/* ============================================================
   Layout Grid
   Body-level grid + site-header internal layout.

   Breakpoints:
   Mobile:           max-width: 44.999rem
   Tablet:           min-width: 45rem / max-width: 79.499rem
   Desktop:          min-width: 79.5rem
   ============================================================ */

/* =============================================================================
   BASE (all screens)
   ============================================================================= */

body {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto auto 1fr auto auto auto;
  grid-template-areas:
    "banner"
    "header"
    "ticker-top"
    "teaser"
    "main"
    "social"
    "ticker-bottom"
    "footer";
  min-height: 100dvh;
  /* overflow-x: clip verhindert Ghost-Scrollbar wenn ein Section-Element
     leicht über die Viewport-Breite hinausragt (z.B. negative margin-inline
     der About-Section für full-bleed Bild). 'clip' statt 'hidden' damit
     Sticky-Positioning + scroll-snap im Page-Body weiter funktionieren. */
  overflow-x: clip;
}

#lang-banner                    { grid-area: banner; }
#site-header                    { grid-area: header; }
.ticker[data-position="top"]    { grid-area: ticker-top; }
#teaser-slider                  { grid-area: teaser; }
main                            { grid-area: main; }
.social                         { grid-area: social; }
.ticker[data-position="bottom"] { grid-area: ticker-bottom; }
body > footer                   { grid-area: footer; }

/* Overlays — not in grid flow */
#info-button    { position: fixed; }
#cookie-consent { position: fixed; }

/* --- Scroll progress bar (1px at top) --- */

#scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 0.0625rem;
  background: var(--color-primary);
  z-index: 1001;
  pointer-events: none;
  transition: width 50ms linear;
}

/* --- Cookie settings button (bottom left) --- */

#cookie-btn {
  position: fixed;
  bottom: var(--space-5);
  left: var(--space-5);
  z-index: 900;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 0.0625rem solid var(--color-border);
  border-radius: 50%;
  background: var(--color-bg);
  box-shadow: var(--shadow);
  cursor: pointer;
  color: var(--color-text-muted);
  /* Wie #scroll-top: keine display-Toggles, Sichtbarkeit via opacity/visibility. */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--transition), visibility var(--transition),
              color var(--transition), box-shadow var(--transition);
}

#cookie-btn.visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

#cookie-btn:hover {
  color: var(--color-primary);
  box-shadow: var(--shadow-lg);
}

/* --- Scroll-to-top button --- */

#scroll-top {
  position: fixed;
  bottom: var(--space-5);
  right: var(--space-5);
  z-index: 900;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 0.0625rem solid var(--color-border);
  border-radius: 50%;
  background: var(--color-bg);
  box-shadow: var(--shadow);
  cursor: pointer;
  color: var(--color-text);
  /* Default: versteckt — Layout-Bereich bleibt aber bestehen, kein display-Toggle.
     pointer-events:none verhindert versehentliche Klicks im Hidden-State. */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(1rem);
  transition: opacity var(--transition), visibility var(--transition),
              transform var(--transition),
              background var(--transition), color var(--transition);
}

#scroll-top.visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

#scroll-top:hover {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  border-color: var(--color-primary);
}

/* --- Content width constraint --- */

main,
.social,
body > footer {
  width: 100%;
  max-width: var(--content-width);
  margin-inline: auto;
  padding-inline: var(--padding-page);
}

/* --- Main content spacing --- */

main {
  padding-block: var(--gap-section);
  /* <main> ist Grid-Item im body-Grid (siehe oben). Ohne min-width: 0 würde
     intrinsische Größe von Kindern (Bilder, iframes) den Viewport sprengen. */
  min-width: 0;
}

/* Mobile: kompakteres vertikales Padding (3rem ist auf kleinen Screens zu viel) */
@media (max-width: 44.999rem) {
  main {
    padding-block: var(--gap-block);
  }
}

/* Homepage: no constraints on main, sections handle their own width/padding */
#home {
  max-width: none;
  padding-inline: 0;
}

/* CMS-Pages mit page_sections (Pro-Tier): main wird full-bleed, damit die
   Marketing-Sections (.about, .testimonials, .callback, .local-area, .faq)
   ihre Hintergründe genauso wie auf der Homepage über die volle Breite
   ziehen können. Article + Header darin haben weiterhin .narrow. */
main.full-bleed {
  max-width: none;
  padding-inline: 0;
}

/* Home: erste <header> (h1 "Willkommen") — Inset über margin-inline (nicht padding),
   damit das visible Box-Outline links/rechts mitschrumpft. width: min() = entweder
   volle Breite minus padding-inline (narrow) oder content-width (wide), in beiden
   Fällen über margin-inline: auto zentriert. */
#home > header {
  width: min(100% - 2 * var(--padding-page), var(--content-width));
  max-width: none;
  margin-inline: auto;
  text-align: center;
}

/* Schmale Content-Seiten: Contact, Newsletter, Impressum, Calculator, Anfahrt,
   Register, Documents, CMS-Pages, sowie Favorites-Auth-Sub-Section.
   Wird als class="narrow" auf <main> gesetzt (FrontendView::get_main_class).
   Sub-Section-Variante (innerhalb breiter Pages): direkt class="narrow" am Element. */
main.narrow,
.narrow {
  max-width: var(--width-narrow);
  margin-inline: auto;
  padding-inline: var(--padding-page);
}

main > header {
  max-width: calc(var(--content-width) - (var(--padding-page) * 2));
  margin-inline: auto;
  margin-block-end: var(--gap-block);
}

main > section,
main > article,
main > aside,
main > fieldset,
main > form {
  margin-block-end: var(--gap-section);
}

main > *:last-child {
  margin-block-end: 0;
}

/* ============================================================
   Site Header — sticky, hides on scroll
   ============================================================ */

#site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--color-bg);
  display: flex;
  flex-direction: column;
  /* Dezenter Schatten als Default — trennt den Header optisch vom Page-Content,
     auch bevor der User scrollt und auf allen Tiers/Viewports. Tier-Files
     überschreiben das im Desktop-/Tablet-Landscape-Mode mit ihrer eigenen
     Glass-/Solid-Optik. Im .scrolled-State wird der Schatten verstärkt. */
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-slow), box-shadow var(--transition-slow);
}

#site-header.hidden {
  transform: translateY(-100%);
}

/* Media-Focus-Mode: wird von property.js beim Slider-Interaktion gesetzt.
   Versteckt den Header tier-unabhängig (transform greift auf den ganzen
   #site-header, egal ob default/pro/basic-Tier) und nullt --sticky-offset,
   damit scroll-margin-top der Slides nicht mehr Header-Platz reserviert.
   → Slide bekommt volle Viewport-Höhe ohne Bouncing. */
body.media-focus {
  --sticky-offset: 0;
}

body.media-focus #site-header {
  transform: translateY(-100%);
}

#site-header.scrolled {
  box-shadow: var(--shadow);
}

/* --- Header module order (configurable per tier via --order-* variables) --- */
#contact-bar         { order: var(--order-contact-bar); }
#topbar,
#site-header > .service { order: var(--order-service-nav); }
#site-header #brand  { order: var(--order-brand); }
#site-header #main-nav { order: var(--order-nav); }

/* --- Contact bar (above topbar) --- */

#contact-bar {
  display: flex;
  align-items: center;
  /* space-between: address-Gruppe links, social-Gruppe rechts. Bei nur einer
     Gruppe (z.B. keine Socials konfiguriert) bleibt die einzelne Gruppe an
     ihrer Seite — falls erwünscht zentriert, hilft margin-inline: auto. */
  justify-content: space-between;
  gap: var(--space-5);
  height: var(--topbar-height);
  padding-inline: var(--padding-page);
  background: var(--color-bg-alt);
  border-bottom: 0.0625rem solid var(--color-border);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

#contact-bar > .address,
#contact-bar > .social-inline {
  display: inline-flex;
  align-items: center;
  gap: var(--space-5);
}

#contact-bar > .social-inline {
  gap: var(--space-2);
}

/* Tap-Target-Mindestmass 24x24 (Lighthouse / WCAG 2.2 AA Target Size Minimum).
   Die Social-Icons selbst sind nur 14px; Padding bringt den Klickbereich
   auf 24px Quadrat ohne die Topbar-Hoehe zu sprengen. */
#contact-bar > .social-inline > a {
  min-width: 1.5rem;
  min-height: 1.5rem;
  justify-content: center;
}

#contact-bar a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--color-text-muted);
  transition: color var(--transition);
}

#contact-bar a:hover {
  color: var(--color-primary);
}

/* Compact mode — moved to tier-specific header.css files.
   Each tier defines its own scroll-collapse behavior. */

/* --- Topbar (dark bar) --- */

#topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--color-topbar);
  color: var(--color-topbar-text);
  height: var(--topbar-height);
  padding-inline: var(--padding-page);
}

/* Lang-Switch wird komplett pro Tier in tier header.css definiert */

/* Service nav without topbar wrapper (dropdown mode) */
#site-header > .service {
  background: var(--color-topbar);
  color: var(--color-topbar-text);
  height: var(--topbar-height);
}

/* Service nav inside topbar wrapper (inline mode) */
#topbar .service {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

/* Static page links in topbar */
.topbar-link {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking);
}

/* > a (direct child) statt deszendierend: Service-Icons (search/fav/login/
   logout) sind direct children der .service-nav. Verhindert dass nested
   <a> im Lang-Switch-Dropdown (`.service > #lang-switch > ul > li > a`)
   fälschlich die Topbar-Text-Farbe (weiß) erbt → vorher !important-Workaround
   in components/lang-switch.css. */
#topbar > .service > a,
#site-header > .service > a {
  color: var(--color-topbar-text);
}

/* Hover-Effekte für Service werden pro Tier in tier header.css definiert */

/* Dropdown-Lang-Switch innerhalb .service wird pro Tier definiert
   (nur relevant wenn der Dropdown-Modus genutzt wird) */

/* --- Brand + inner elements share max-width --- */

#site-header #brand,
#site-header #main-nav {
  max-width: var(--content-width);
  margin-inline: auto;
  padding-inline: var(--padding-page);
}

#site-header #brand {
  display: flex;
  align-items: center;
  gap: .25rem;
  padding-block: var(--space-4);
  padding-inline: 0;
}

#site-header #brand > :first-child {
  margin-inline-start: 1.1rem;
}

#site-header #brand > :last-child {
  margin-inline-end: 1.1rem;
}

/* =============================================================================
   MOBILE (max-width: 44.999rem)
   ============================================================================= */

@media screen and (max-width: 44.999rem) {
  /* Hide contact bar */
  #contact-bar {
    display: none;
  }

  /* Topbar-Textlinks (Kontakt, Anfahrt etc.) brauchen zu viel Platz im Mobile —
     nur Icons + Lang-Switch bleiben. Lang-Switch wird in components/lang-switch.css
     für Mobile/Tablet-Portrait kompakt restyled (tier-unabhängig). */
  .topbar-link {
    display: none !important;
  }

  #topbar {
    justify-content: flex-end;
  }

  #site-header .service {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--space-4);
    font-size: var(--text-xs);
  }

  /* Brand: smaller, burger right */
  #site-header #brand {
    padding-block: var(--space-2);
  }

  #nav-toggle {
    margin-inline-start: auto;
  }

  /* Hide progress bar + scroll-top on mobile */
  #scroll-progress,
  #scroll-top {
    display: none !important;
  }

  /* Hide cookie on mobile */
  #cookie-btn {
    display: none !important;
  }

}

/* Logo-Sichtbarkeit pro Viewport ist tier-spezifisch — siehe
   tier/{default,basic,pro}/header.css. */

/* =============================================================================
   TABLET (45rem — 79.499rem)
   ============================================================================= */

@media screen and (min-width: 45rem) and (max-width: 79.499rem) and (orientation: portrait) {
  /* Hide contact bar on tablet-portrait */
  #contact-bar {
    display: none;
  }

  /* Topbar-Textlinks weg (Platz), Lang-Switch bleibt — wird kompakt gestyled
     in components/lang-switch.css. */
  .topbar-link {
    display: none !important;
  }

  #topbar {
    justify-content: flex-end;
  }

  #site-header .service {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--space-5);
    font-size: var(--text-xs);
  }

  /* Brand: medium size, burger right */
  #site-header #brand {
    padding-block: var(--space-3);
  }

  #nav-toggle {
    margin-inline-start: auto;
  }
}

/* =============================================================================
   DESKTOP (min-width: 79.5rem)
   ============================================================================= */

@media screen and (min-width: 79.5rem) {
  /* Two-column layout for property page */
  #property > .content {
    display: grid;
    grid-template-columns: 1fr var(--sidebar-width);
    gap: var(--gap-section);
  }

  /* Grid-Items dürfen kleiner werden als ihr Content — verhindert, dass
     iframes/videos/lange Wörter das Layout sprengen. */
  #property > .content > article,
  #property > .content > aside {
    min-width: 0;
  }

  #property > .content > aside {
    align-self: start;
    position: sticky;
    top: var(--space-5);
  }

  /* Topbar service: right-aligned with text links */
  #site-header > .service {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--space-5);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking);
    text-transform: uppercase;
  }

  /* Brand: larger padding */
  #site-header #brand {
    padding-block: var(--space-5);
  }

  /* Nav: horizontal, right-aligned */
  #site-header #main-nav {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    border-top: 0.0625rem solid var(--color-border);
  }

  #site-header #main-nav > ul {
    display: flex;
    align-items: center;
  }
}