/*
 * Gemeinsame Navigation, Kopfbereich ("Hero"), Abschnitte und Fußzeile der
 * informativen Unterseiten (presse.html, faq.html, wer-wir-sind.html,
 * unterstuetzer.html, alle-fotos.html, ci-material.html, pressefotos.html,
 * rechtliches.html).
 * Setzt css/tokens.css voraus (muss davor eingebunden sein, wegen der
 * verwendeten --content-width/--hero-sub-width/--hero-title-max/--rule/
 * --accent/--ink-Variablen).
 * Seiteneigene Abweichungen stehen im <style>-Block der jeweiligen Seite, der
 * NACH dieser Datei geladen wird und deshalb gewinnt (z. B. die helle
 * Fußzeile von wer-wir-sind.html).
 */
.nav{background:var(--paper);border-bottom:1px solid var(--rule);position:sticky;top:0;z-index:50}
.nav-grid{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;max-width:var(--content-width);margin:0 auto;padding:10px 20px;padding-top:max(10px,env(safe-area-inset-top))}
.nav-slot{display:flex;align-items:center}
.nav-slot--right{justify-content:flex-end}
.nav-logo-link{display:flex;justify-content:center}
.nav-logo-round{width:44px;height:44px;border-radius:50%}
.nav-pn{font-size:12px;padding:5px 9px;border:1px solid var(--rule);border-radius:6px;color:var(--ink-mid);white-space:nowrap;text-decoration:none}
.nav-pn:hover{color:var(--accent);border-color:var(--accent)}

.page-header{background:linear-gradient(155deg,#0a3d2b 0%,#0F6E56 55%,#1D9E75 100%);color:#fff;padding:36px 20px 28px;padding-top:max(36px,calc(env(safe-area-inset-top) + 16px))}
.hero-inner{max-width:var(--content-width);margin:0 auto}
.hero-kicker{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.55);font-weight:700;margin-bottom:10px}
.hero-title{font-family:'Playfair Display',serif;font-size:clamp(21px,5.25vw,var(--hero-title-max));font-weight:900;line-height:1.05;letter-spacing:-.025em;color:#fff}
.hero-sub{font-size:15px;color:rgba(255,255,255,.6);font-weight:300;margin-top:12px;max-width:var(--hero-sub-width);line-height:1.6}
.hero-stand{font-size:11px;color:rgba(255,255,255,.4);margin-top:16px;letter-spacing:.04em}

/* Abschnitte: Standard = volle Breite mit Trennlinie, Inhalt in .section-inner.
   .section--single = ein einzelner zentrierter Block ohne Trennlinie (faq.html,
   alle-fotos.html). Muss nach .section stehen, damit es diese überschreibt. */
.section{padding:44px 20px;border-bottom:1px solid var(--rule)}
.section--single{padding:44px 20px 60px;max-width:var(--content-width);margin:0 auto;border-bottom:0}
@media(min-width:640px){
  .section{padding:60px 28px}
  .section--single{padding:60px 28px 80px}
}
.section-inner{max-width:var(--content-width);margin:0 auto}
.kicker{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);font-weight:700;margin-bottom:10px}
.section h2{font-family:'Playfair Display',serif;font-size:clamp(20px,4vw,34px);font-weight:900;line-height:1.15;letter-spacing:-.02em;margin-bottom:20px;color:var(--ink)}

/* Fußzeile */
.foot{padding:32px 20px 48px;background:var(--ink)}
.foot-inner{max-width:var(--content-width);margin:0 auto}
.foot-rule{height:1px;background:rgba(255,255,255,.1);margin-bottom:20px}
.foot-row{display:flex;flex-direction:column;gap:4px;font-size:13px;color:rgba(255,255,255,.45);line-height:1.7}
@media(min-width:640px){.foot-row{flex-direction:row;justify-content:space-between;flex-wrap:wrap}}
.foot-row a{color:rgba(255,255,255,.45)}
.foot-row a:hover{color:var(--accent)}
.bsky-social{display:flex;align-items:center;gap:6px;margin-top:4px;justify-content:center}
.bsky-logo{height:1em;vertical-align:-0.15em;filter:brightness(0) saturate(100%) invert(47%) sepia(44%) saturate(754%) hue-rotate(115deg) brightness(96%)}