/* ============================================================
   30 · LAYOUT — Header, mobile Navigation, Footer
   ------------------------------------------------------------
   Die Rahmenelemente, die auf jeder Seite vorkommen.

   Breakpoints: 600 / 768 / 1024 / 1280, nur min-width.
   ============================================================ */

/* ============================================================
   HEADER
   ------------------------------------------------------------
   .header            transparent ueber dem Hero, helle Schrift,
                      grosses Logo, das ueber die Leiste hinausragt.
                      Nur die Startseite -- sie hat als einzige einen
                      formatfuellenden Kopf.
   .header--onlight   heller Grund dahinter: dunkle Schrift, kein Balken.
   .header--bar       Balken von Anfang an, wo der Grund die Schrift nicht
                      traegt. Modifier statt globaler Umdefinition der
                      Komponente -- die Vorlage hatte .header auf der
                      Projektseite seitenweit ueberschrieben.
   .header--solid     nach dem Hero: Papiergrund, dunkle Schrift,
                      Logo skaliert herunter (per JS gesetzt)
   .header--plain     kein Seitenkopf, der das Logo traegt: startet klein.
   ============================================================ */
.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-header);
  height: var(--nav-h);
  display: flex;
  align-items: stretch;
  transition:
    background var(--dur-base) var(--ease),
    box-shadow var(--dur-base) var(--ease);
}

.header .container {
  width: 100%;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

/* --onlight faerbt nur noch: dunkle Schrift, weil der Grund dahinter hell ist.
   Einen Balken bringt es nicht mit -- ueber einem hellen Seitenkopf soll die
   Navigation frei stehen, solange das Logo gross ist (Kundenwunsch
   2026-08-19). Den Balken traegt --plain, siehe unten. */

/* Der Balken traegt die Schrift dort, wo der Grund dahinter sie nicht traegt:
   ueber dem gruenen Seitenkopf der einfachen Seiten, ohne Seitenkopf (Meldung,
   Suche) -- und im Projektkopf, wo die Navigation ueber dem ungefilterten Foto
   liegt. Gemessen ohne Schrift kam sie dort auf 1,0 : 1 (Villa Forte) und
   1,3 : 1 (Suelzerbucht); ueber hellem Grund braucht es ihn nicht. */
.header--bar {
  background: var(--header-bg-soft);
  backdrop-filter: blur(10px);
}

/* Steht bewusst NACH --onlight: Treffen beide Modifier zusammen, muss der
   gescrollte Zustand gewinnen. Gleiche Spezifitaet, also entscheidet die
   Reihenfolge. */
.header--solid {
  background: var(--header-bg);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 var(--line);
}

/* Der Kopf laeuft hier randlos und richtet sich am Seitenkopf aus. */
/* Nur wo der Inhalt selbst bis an den Rand laeuft -- der Projektkopf mit
   seiner linken Spalte. Sonst bleibt es beim .container, damit das Logo auf
   derselben Linie steht wie der Text darunter. */
.header--wide .container {
  max-width: none;
  padding-inline: var(--gutter-wide);
}

/* ---------- Logo ----------
   Eine Datei fuer alle Kontexte: das Signet nimmt currentColor, die
   Wortmarke die Variable --logo-ink. Die Vorlage brauchte dafuer zwei
   Dateien, die sich nur in zwei getauschten Farbwerten unterschieden. */
/* Die drei Masse stehen an einer Stelle, weil mehrere Regeln mit ihnen rechnen
   statt Werte zu raten: der gescrollte Zustand (siehe unten) und die Textspalte
   des zweigeteilten Kopfes, die unter dem ueberstehenden Logo beginnt
   (.hero--split .hero__panel in 50-sections.css). Sie stehen deshalb an :root
   und nicht an .logo. */
:root {
  --logo-h: clamp(96px, 9.5vw, 132px);
  --logo-mt: clamp(18px, 2vw, 28px);
  --logo-scale: 0.42;
}

.logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  align-self: flex-start;
  margin-top: var(--logo-mt);
  color: var(--green);
  --logo-ink: var(--white);
}

.logo svg,
.logo img {
  height: var(--logo-h);
  width: auto;
  transform-origin: left top;
  transition: transform 0.35s var(--ease);
}

/* Gescrollt sitzt das Logo mittig in der Kopfleiste.
   transform-origin ist left top, die Oberkante liegt also bei --logo-mt; von
   dort wird auf die Mitte gerueckt: (Leistenhoehe - verkleinerte Hoehe) / 2.
   Als fester Versatz ginge das nicht -- Hoehe und Vorabstand sind clamp() und
   damit von der Fensterbreite abhaengig. Der frueher hier stehende
   translateY(-12px) traf deshalb nur bei rund 1280 px. */
.header--solid .logo svg,
.header--solid .logo img {
  transform:
    translateY(calc((var(--nav-h) - var(--logo-h) * var(--logo-scale)) / 2 - var(--logo-mt)))
    scale(var(--logo-scale));
}

/* Wo kein Seitenkopf das grosse Logo traegt, startet es klein und bleibt es
   auch. Der Modifier haengt an der Seite, nicht an der Kopffarbe: Hell und
   klein sind zwei verschiedene Fragen (ADR-032). Denselben Fall beschreibt
   der Balken oben -- deshalb dieselbe Klasse und nicht eine zweite. */
.header--plain .logo {
  align-self: center;
  margin-top: 0;
}

.header--plain .logo svg,
.header--plain .logo img {
  height: clamp(40px, 3.2vw, 54px);
  transform: none;
}

/* ---------- Hauptnavigation ----------
   .nav ist die Menueliste selbst -- kein zusaetzlicher Wrapper. */
.nav {
  display: none;
  align-items: center;
  gap: clamp(18px, 2.4vw, 38px);
}

.nav a {
  position: relative;
  padding: 6px 0;
  white-space: nowrap;
  color: var(--white);
  font-size: var(--fs-300);
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: color var(--dur-fast);
}

.header--solid .nav a,
.header--onlight .nav a {
  color: var(--ink);
}

.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--amber);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.35s var(--ease);
}

.nav a:hover::after,
.nav a[aria-current]::after {
  transform: scaleX(1);
}

/* ---------- Sprachumschalter ---------- */
.lang {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--white);
  transition: color var(--dur-fast);
}

.header--solid .lang,
.header--onlight .lang {
  color: var(--ink);
}

.lang__opt {
  padding: 4px 2px;
  color: inherit;
  font-size: var(--fs-200);
  font-weight: 700;
  letter-spacing: 0.08em;
  opacity: 0.55;
  transition:
    opacity var(--dur-fast),
    color var(--dur-fast);
}

.lang__opt:hover {
  opacity: 1;
}

.lang__opt[aria-current] {
  opacity: 1;
  color: var(--amber-soft);
}

.header--solid .lang__opt[aria-current],
.header--onlight .lang__opt[aria-current] {
  color: var(--amber-deep);
}

/* Trenner als Pseudoelement statt als eigenes Markup-Element. */
.lang__opt + .lang__opt::before {
  content: "/";
  margin-right: 8px;
  opacity: 0.4;
  font-weight: 600;
}

.lang--mobile {
  margin-top: 32px;
  gap: 10px;
}

.lang--mobile .lang__opt {
  font-size: var(--fs-500);
}

/* ---------- Burger ---------- */
.burger {
  display: block;
  padding: 8px;
}

.burger span {
  display: block;
  width: 24px;
  height: 2px;
  margin: 5px 0;
  background: var(--white);
  transition: var(--dur-fast);
}

.header--solid .burger span,
.header--onlight .burger span {
  background: var(--ink);
}

/* ---------- Mobile Navigation ---------- */
.mnav {
  /* Dunkle Flaeche: heller Fokusring (Rueckfall in 10-base.css). */
  --focus-ring: var(--amber-soft);
  position: fixed;
  inset: 0;
  z-index: var(--z-mnav);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 32px;
  background: var(--green-deep);
  transform: translateX(100%);
  visibility: hidden;
  transition:
    transform 0.5s var(--ease),
    visibility 0s 0.5s;
}

.mnav.is-open {
  transform: none;
  visibility: visible;
  transition:
    transform 0.5s var(--ease),
    visibility 0s;
}

.mnav a {
  display: block;
  padding: 14px 0;
  border-bottom: 1px solid var(--line-light);
  color: var(--white);
  font-size: var(--fs-700);
  font-weight: 700;
}

@media (min-width: 1024px) {
  /* Navigation und Sprachumschalter haengen am Fenster, nicht an der
     Inhaltsspalte: Beide stehen gegen den fixierten Kopf und damit auf jeder
     Seite an derselben Stelle.

     Im Fluss des .container ging das nicht. Der Kopf verteilt seinen freien
     Platz mit space-between, und dieser Platz ist je Seite ein anderer: Der
     zweigeteilte Kopf laeuft randlos (--wide, Aussenabstand --gutter-wide),
     alle uebrigen Seiten im .container (mittig, hoechstens --container-max
     breit, Aussenabstand --gutter). Beim Wechsel von "Was wir tun" auf
     "Aktuelles" sprang die Navigation deshalb um gut 110 px nach rechts und
     der Sprachumschalter um 56 px nach links (gemessen bei 1512 px).

     Der linke Anschlag ist die Kante des Bewegtbildes im zweigeteilten Kopf:
     5 von 12 Rasteranteilen (Kundenwunsch 2026-08-20). Rechts endet der
     Sprachumschalter am breiten Aussenabstand.

     Das Logo bleibt als einziges im Fluss und behaelt damit die Ausrichtung
     seiner Seite -- randlos beim zweigeteilten Kopf, sonst buendig mit dem
     Text darunter. */
  .nav {
    position: absolute;
    top: 0;
    left: calc(100vw / 12 * 5);
    height: var(--nav-h);
    display: flex;
  }

  /* Nur der Umschalter im Kopf. Die Fassung in der mobilen Navigation traegt
     dieselbe Klasse und bleibt dort im Fluss. */
  .header .lang {
    position: absolute;
    top: 0;
    right: var(--gutter-wide);
    height: var(--nav-h);
  }

  .burger {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .header,
  .logo,
  .logo svg,
  .logo img,
  .mnav {
    transition: none;
  }
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  /* Dunkle Flaeche: heller Fokusring (Rueckfall in 10-base.css). */
  --focus-ring: var(--amber-soft);
  padding: var(--space-2xl) 0 40px;
  background: var(--green-deep);
  color: var(--white);
}

.footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px, 4vw, 64px);
  padding-bottom: clamp(40px, 5vw, 64px);
  border-bottom: 1px solid var(--line-light);
}

/* Im Footer kehrt sich das Logo um -- dieselbe Datei, getauschte Rollen. */
.footer__logo {
  color: var(--white);
  --logo-ink: var(--green);
}

.footer__logo svg,
.footer__logo img {
  height: 56px;
  width: auto;
}

.footer__title {
  margin-bottom: 16px;
  color: var(--amber-soft);
  font-size: var(--fs-200);
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.footer address {
  color: var(--on-dark-80);
  font-size: var(--fs-400);
  line-height: 1.8;
}

.footer__place + .footer__place {
  margin-top: var(--space-s);
}

/* Kontaktdaten je Standort: links die Art, rechts die Angabe.
   Die Art steht zurueckhaltender -- gelesen wird die Nummer. */
.footer__contact {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 16px;
  margin-top: 12px;
  font-size: var(--fs-400);
  line-height: 1.8;
}

.footer__contact dt {
  color: var(--on-dark-55);
}

.footer__contact dd {
  color: var(--on-dark-80);
}

.footer__contact a {
  color: inherit;
  transition: color var(--dur-fast);
}

.footer__contact a:hover {
  color: var(--amber-soft);
}

/* Navigation waagerecht unter den Standorten (KI-037). Umbricht, damit die
   Rechtstexte darunter ihre eigene Zeile bekommen -- siehe .legal. */
.footer__bar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px clamp(20px, 3vw, 40px);
  padding: var(--space-s) 0;
  border-bottom: 1px solid var(--line-light);
}

.footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 12px clamp(20px, 3vw, 40px);
}

/* Impressum und Datenschutz gehoeren zur Navigation und sind doch eine andere
   Sorte Link. Ab Tablet setzen sie sich dafuer an den rechten Rand ab -- auf
   dem Handy stehen sie in ihrer eigenen Zeile und bleiben linksbuendig wie
   alles andere (die Absetzung braeuchte dort Platz, den es nicht gibt). */

.footer__nav a {
  color: var(--on-dark-80);
  font-size: var(--fs-400);
  font-weight: 600;
  transition: color var(--dur-fast);
}

.footer__nav a:hover,
.footer__nav a[aria-expanded="true"] {
  color: var(--amber-soft);
}

.footer__bottom {
  padding-top: 28px;
  color: var(--on-dark-55);
  font-size: var(--fs-200);
}

/* Rechtstexte klappen unter ihren Links auf.
   ------------------------------------------------------------
   Der Block ist ein Geschwister der Linklisten, kein Kind: .footer__bar
   umbricht, und mit voller Breite bekommt der Text dadurch seine eigene
   Zeile unter allen Links -- statt die Spalte eines einzelnen Links zu
   sprengen.

   Ohne JavaScript bleibt das hidden-Attribut stehen und der Link fuehrt auf
   die Seite (ADR-025). Es braucht deshalb keine Regel in 90-nojs.css. */
.legal {
  flex: 0 0 100%;
  padding-top: var(--space-m);
}

.legal[hidden] {
  display: none;
}

@media (min-width: 768px) {
  .footer__grid {
    grid-template-columns: 1fr 1fr;
  }

  .footer__nav--legal {
    margin-left: auto;
  }
}

@media (min-width: 1024px) {
  .footer__grid {
    grid-template-columns: minmax(0, 1.2fr) repeat(3, minmax(0, 1fr));
  }
}