/* Chrome — written once, inherited by every page. design-system.md §4.1, §4.3. */

@layer components {

  /* C1 · Skip link ----------------------------------------------------- */
  .skip {
    position: absolute;
    top: -100%;
    left: var(--space-3);
    z-index: 1000;
    background: var(--brand);
    color: var(--deep);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-sm);
    font-weight: var(--fw-semi);
    text-decoration: none;
  }
  .skip:focus-visible {
    top: var(--space-3);
    outline: var(--focus-width) solid var(--focus);
    outline-offset: var(--focus-offset);
  }

  /* C2 · Site header ----------------------------------------------------*/
  .site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--surface);
    border-block-end: 1px solid transparent;
  }
  @supports (animation-timeline: scroll()) {
    @keyframes stick {
      to { box-shadow: var(--shadow-sm); border-color: var(--rule); }
    }
    .site-header {
      animation: stick linear both;
      animation-timeline: scroll();
      animation-range: 0 4rem;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .site-header { animation: none; }
  }

  .site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-3);
    padding-block: var(--space-2);
    min-height: var(--tap);
  }

  .site-header__logo {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    flex-shrink: 0;
    color: inherit;
    text-decoration: none;
  }
  .site-header__logo img {
    /* Native 280×112 asset — the only logo file that exists, and no sharper
       original is coming (Hari, 10.09.2026). Never go past 280px: beyond its
       native width it is genuinely upscaled and shows it.
       The widths are what lets the header hold ONE row: at 360px the row is
       328px of usable width and has to carry logo + Anmelden + Menü, and at
       768px the logo shares the row with five links and the CTA. Both were
       measured wrapping to two rows before these numbers (185px and 157px
       of header). 120/160 are what design-system.md C2 asked for, and
       the smaller sizes are *sharper*: 280 native over 160 CSS px is 1.75x
       density rather than 1.4x. The vw cap catches 320px phones, where the
       fixed 120px put the row 12px over and wrapped it again. */
    width: min(120px, 32vw);
    height: auto;
  }
  @media (min-width: 60rem) {
    .site-header__logo img { width: 160px; }
  }

  /* Die Wortmarke neben dem Logo — der Schulname in lesbarer Größe, weil die
     Logodatei ihn bei 120/160px nicht mehr hergibt (siehe base.njk).
     Erst ab --bp-xl, und das ist gemessen, nicht geschätzt: mit Wortmarke
     braucht die Kopfzeile 1112px Viewport für eine Zeile (160 Logo + 16 Lücke
     + 197 Wortmarke + 16 + 643 Navigation + 80 Innenabstand). Bei --bp-lg
     (960px) fehlen davon 152px, und .site-header__inner hat flex-wrap: wrap —
     die Navigation fiele also in eine zweite Zeile und die klebende Kopfzeile
     wäre auf jeder Seite doppelt so hoch. Bei 1200px bleiben 88px Luft.
     Darunter nennt die Startseite den vollen Namen in ihrem page_header —
     das ist die Stelle, an der Telefon und Tablet ihn lesen. */
  .site-header__wortmarke { display: none; }
  @media (min-width: 75rem) {
    .site-header__wortmarke {
      display: flex;
      flex-direction: column;
      line-height: var(--lh-snug);
    }
    .site-header__name {
      font-size: var(--fs-sm);
      font-weight: var(--fw-semi);
      color: var(--ink);
    }
    .site-header__inhaber {
      font-size: var(--fs-xs);
      color: var(--ink-muted);
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }
  }

  /* C3 · Primary nav — six flat items, no dropdown at any breakpoint,
     no JavaScript dependency. Wraps onto a second line at narrow widths
     rather than hiding behind a toggle. */
  .site-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-4);
  }
  .site-nav__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1) var(--space-4);
  }
  /* The thin second group is mobile-only; on desktop these destinations
     live in the footer and in the page bodies, where there is room. */
  .site-nav__extra { display: none; }
  /* No button exists until nav.js makes one, so this is the state with
     JavaScript off, and at every width: the panel is simply open. */
  .site-nav__toggle { display: none; }

  .site-nav__link {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap);
    padding-block: var(--space-1);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--ink);
    text-decoration: none;
    border-block-end: 3px solid transparent;
  }
  .site-nav__link:hover {
    color: var(--brand-ink);
  }
  .site-nav__link[aria-current="page"] {
    color: var(--brand-ink);
    font-weight: var(--fw-semi);
    border-block-end-color: var(--brand-ink);
  }

  .site-nav__cta {
    margin-inline-start: var(--space-2);
  }

  .site-nav__toggle {
    align-items: center;
    gap: var(--space-2);
    min-height: var(--tap);
    padding-inline: var(--space-3);
    font: inherit;
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--rule-strong);
    border-radius: var(--radius-sm);
    cursor: pointer;
  }
  .site-nav__burger,
  .site-nav__burger::before,
  .site-nav__burger::after {
    display: block;
    width: 1.125rem;
    height: 2px;
    background: currentColor;
  }
  .site-nav__burger {
    position: relative;
  }
  .site-nav__burger::before,
  .site-nav__burger::after {
    content: "";
    position: absolute;
    inset-inline-start: 0;
  }
  .site-nav__burger::before { inset-block-start: -6px; }
  .site-nav__burger::after  { inset-block-start: 6px; }

  /* --- Below --bp-lg: the drawer -------------------------------------
     Six flat items wrap to three rows on a phone, which made the sticky
     header 185px tall at 360px — 24.4% of the viewport, against a spec of
     <= 72px (design-system.md C2). Measured, not estimated: 360px was the
     one width this project had never opened in a real viewport.
     The CTA stays outside the panel, so Anmelden needs no tap to reach.

     DEVIATION from ux-ia.md §3, which put the flip at ~760px: the five
     German labels measure 389px of text, and with the 24px rhythm between
     them the nav needs 635px. Beside a 160px logo that wants 811px of a
     row, so at 768px the header still wrapped to two rows (137px). The
     horizontal nav therefore starts at --bp-lg, where it measures 811px
     into 906px of usable row. --bp-md was simply too small for German. */
  @media (max-width: 59.999rem) {
    .site-nav__cta    { order: 1; }
    .site-nav__toggle { order: 2; }

    /* Ohne JavaScript gibt es keinen Button und das Panel ist schlicht offen:
       es bleibt im Fluss und schiebt die Seite nach unten. Ein hoher Header,
       aber jedes Ziel bleibt erreichbar. Verdeckt wird dabei nichts — aber
       nur wegen der (scripting: none)-Regel weiter unten, die den Header
       dafür aus der Sticky-Positionierung nimmt. */
    .site-nav__panel { order: 3; flex-basis: 100%; }

    .js-nav .site-nav__toggle { display: inline-flex; }
    /* 326px of usable row at 360px: logo 120 + gap 16 + CTA 110 + gap 8
       + Menü 44 = 298. The toggle is icon-only here — its label is still
       in the accessible name, via .visually-hidden in the markup — because
       spelling out "Menü" cost 57px and pushed the row over. */
    /* 320px is the tightest real phone: logo 102 + CTA 110 + Menü 44 comes
       to 256, and a 16px gap on both joins lands on exactly the 288px of
       usable row — which wraps. 8px leaves the slack. */
    .site-header__inner { gap: var(--space-2); }
    .site-nav { gap: var(--space-2); }
    .site-nav__cta { padding-inline: var(--space-3); }
    .site-nav__toggle {
      min-width: var(--tap);
      justify-content: center;
      padding-inline: var(--space-2);
    }

    .site-nav__list,
    .site-nav__extra {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: 0;
    }
    .site-nav__panel .site-nav__link {
      display: flex;
      width: 100%;
      padding-inline: var(--space-1);
      border-block-end: 1px solid var(--rule);
      border-inline-start: 3px solid transparent;
    }
    /* Horizontal underline -> inline-start bar, per design-system.md C3. */
    .site-nav__panel .site-nav__link[aria-current="page"] {
      border-block-end-color: var(--rule);
      border-inline-start-color: var(--brand-ink);
      background: var(--brand-tint);
    }
    .site-nav__extra {
      margin-block-start: var(--space-3);
      padding-block-start: var(--space-2);
      border-block-start: 1px solid var(--rule);
    }
    .site-nav__extra .site-nav__link {
      font-size: var(--fs-xs);
      color: var(--ink-muted);
    }
  }



  /* Where scripting is available the panel starts collapsed and hangs under
     the header, full-bleed. This has to be the FIRST painted state, not
     something nav.js arrives at later: painting the panel open in flow and
     then folding it away cost a measured CLS of 0.501 and ~20 Lighthouse
     performance points, because every section below jumped up by the height
     of the open menu. Out of flow it also stops the open panel from pushing
     Anmelden and the Menü button onto a second row under the thumb that
     just tapped them. .site-header is sticky, so it is the containing block.

     If scripting is on but nav.js never arrives, the mobile panel stays
     hidden — the footer carries all eight destinations, so nothing becomes
     unreachable. That is the milder failure than leaving an overlay pinned
     over the page. */
  @media (max-width: 59.999rem) and (scripting: enabled) {
    .site-nav__panel {
      display: none;
      position: absolute;
      inset-inline: 0;
      inset-block-start: 100%;
      padding: var(--space-2) var(--space-4) var(--space-4);
      background: var(--surface);
      border-block-end: 1px solid var(--rule);
      box-shadow: var(--shadow-md);
      max-height: calc(100vh - 100%);
      overflow-y: auto;
    }
    /* aria-expanded is the single source of truth — CSS reads it directly,
       so the ARIA state and the visual state cannot drift apart. */
    .js-nav .site-nav__toggle[aria-expanded="true"] ~ .site-nav__panel {
      display: block;
    }
  }

  /* Die Gegenprobe (Cross-Wave-Audit C2): ohne Scripting lässt sich das Panel
     nicht einklappen, es steht offen im Fluss und macht den Header bei 360px
     rund 440px hoch. Ein Sticky-Kasten, der höher ist als sein Offset, bleibt
     bei top: 0 kleben und deckt das halbe Viewport zu — und --header-h
     (5rem, base.css) ist am EINGEKLAPPTEN Header gemessen, also landen die
     301er aus /gleitschirmkurse/* rund 360px hinter dem Header statt an ihrer
     Überschrift (ux-ia.md §7). Was man nicht einklappen kann, darf nicht
     kleben: static. Der Header scrollt dann einfach mit weg. */
  @media (max-width: 59.999rem) and (scripting: none) {
    .site-header { position: static; }
  }

  /* C5 · Site footer ------------------------------------------------- */
  .site-footer {
    background: var(--deep);
    color: var(--on-deep);
    padding-block: var(--space-7) var(--space-5);
  }
  .site-footer a {
    color: var(--on-deep);
  }
  .site-footer a:hover {
    text-decoration: underline;
  }

  .site-footer__grid {
    display: grid;
    gap: var(--space-6);
    grid-template-columns: 1fr;
  }
  @media (min-width: 60rem) {
    .site-footer__grid {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  .site-footer__col ul {
    display: flex;
    flex-direction: column;
  }
  .site-footer__col li {
    min-height: var(--tap);
    display: flex;
    align-items: center;
  }
  .site-footer address {
    font-style: normal;
  }

  .site-footer__bottom {
    margin-block-start: var(--space-6);
    padding-block-start: var(--space-4);
    border-block-start: 1px solid var(--rule-on-deep);
    font-size: var(--fs-2xs);
    color: var(--on-deep-muted);
  }

  /* C12 · CTA band ------------------------------------------------------*/
  .cta-band {
    background: var(--deep);
    color: var(--on-deep);
    padding-block: var(--section-y-tight);
    text-align: center;
  }
  .cta-band .container--narrow {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
  }
  .cta-band__lead {
    color: var(--on-deep-muted);
  }
  .cta-band__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-3);
    margin-block-start: var(--space-2);
  }
  /* Auf dem schmalsten Telefon stehen die Knöpfe voll­breit untereinander statt
     halbbreit nebeneinander. Ersetzt .cta-band--split .cta-band__doors, das
     dasselbe nur für die Startseite tat — die zwei Türen der Startseite sind
     jetzt eine gewöhnliche Knopfreihe mit zwei Knöpfen, und die Sonderklasse
     ist mit der split-Variante weggefallen. */
  @media (max-width: 30rem) {
    .cta-band__actions {
      flex-direction: column;
      align-items: stretch;
      width: 100%;
    }
  }

  /* Die Kontaktzeile — auf jeder Seite dieselbe, siehe partials/cta-band.njk.
     --on-deep-accent ist das Token für Akzenttext auf --deep (6,64:1); dieselbe
     Farbe trägt die Kennzeile darüber. Unterstrichen, weil Farbe allein kein
     Linkhinweis ist (WCAG 1.4.1).
     padding-block statt min-height: die beiden Links sollen in EINER Textzeile
     nebeneinander stehen, aber trotzdem anfassbar sein. 8px oben und unten
     bringen den ~20px hohen Zeilenkasten auf ~36px und damit über die 24px aus
     WCAG 2.5.8 — vorher war die Telefonnummer ein .btn--link mit
     min-height: auto und padding: 0, also ein rund 20px hohes Tippziel für die
     Tap-to-Call-Geste, die auf dieser Site am häufigsten gebraucht wird. */
  .cta-band__kontakt {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0 var(--space-3);
  }
  .cta-band__kontakt a {
    display: inline-block;
    padding-block: var(--space-2);
    color: var(--on-deep-accent);
    text-decoration-line: underline;
    text-underline-offset: 0.2em;
  }
  .cta-band__kontakt a:hover {
    color: var(--on-deep);
  }
  /* Umbrechen die beiden Angaben, steht der Mittelpunkt am Zeilenende und
     trennt nichts mehr. Dann lieber weg. */
  @media (max-width: 30rem) {
    .cta-band__trenner { display: none; }
  }
}