/* Gemeinsames Stylesheet der Unterseiten.
   Bewusst eigene Datei statt kopierter <style>-Blöcke: Die Startseite bringt ihr
   CSS inline mit (ein Request weniger für die wichtigste Seite), die Unterseiten
   teilen sich diese Datei. Werte stammen aus diexpo/diexpo-tokens.css. */

:root{
  --navy:#0B2149; --navy-deep:#061530; --gold:#B8873F; --gold-light:#D3AE74;
  --alert:#C4231C; --line:#E3E8EF; --text:#16202E; --muted:#5A6676;
  --bg:#FFFFFF; --bg-soft:#F5F7FA; --radius:6px;
  --f-display:"Poppins","Segoe UI",system-ui,sans-serif;
  --f-body:"Inter",-apple-system,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--f-body);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:820px;margin:0 auto;padding:0 24px}

h1,h2,h3{font-family:var(--f-display);color:var(--navy);letter-spacing:-.02em;line-height:1.2}
h1{font-size:clamp(1.75rem,4.4vw,2.6rem);font-weight:600;margin:0 0 .5em;overflow-wrap:break-word}
h2{font-size:clamp(1.3rem,2.6vw,1.7rem);font-weight:600;margin:2.2em 0 .5em}
h3{font-size:1.1rem;font-weight:600;margin:1.8em 0 .4em}
p{margin:0 0 1.1em;min-width:0;overflow-wrap:break-word}
ul{margin:0 0 1.2em;padding-left:1.3em}
li{margin:.4em 0}
a{color:var(--navy)}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}

/* Kopf */
.top{border-bottom:1px solid var(--line);background:var(--bg)}
.top__in{max-width:820px;margin:0 auto;padding:14px 24px;display:flex;
  align-items:center;justify-content:space-between;gap:16px}
.top img{height:38px;width:auto;display:block}
.top a.zurueck{font-size:.92rem;text-decoration:none;border-bottom:2px solid var(--gold);
  padding-bottom:1px;white-space:nowrap}

/* Inhalt */
main{padding:52px 0 12px}
.eyebrow{display:inline-block;font-family:var(--f-display);font-size:.74rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin:0 0 12px}
.lead{font-size:1.07rem;color:var(--muted);max-width:640px}
.lead strong{color:var(--navy);font-weight:600}
.box{background:var(--bg-soft);border-left:4px solid var(--gold);
  border-radius:var(--radius);padding:18px 22px;margin:1.6em 0}
.box p:last-child{margin-bottom:0}
.box b{font-family:var(--f-display);color:var(--navy)}

/* Handlungsaufruf */
.cta{margin:44px 0 8px;padding:28px 24px;background:var(--bg-soft);
  border-radius:var(--radius);text-align:center}
.cta h2{margin:0 0 .4em}
.cta p{color:var(--muted);max-width:520px;margin-left:auto;margin-right:auto}
.btn{display:inline-block;margin:8px 6px 0;padding:14px 26px;border-radius:var(--radius);
  font-family:var(--f-display);font-weight:600;text-decoration:none;font-size:.98rem}
.btn--solid{background:var(--navy);color:#fff}
.btn--solid:hover{background:var(--navy-deep)}
.btn--alert{background:var(--alert);color:#fff}
.btn--ghost{border:1px solid var(--line);color:var(--navy)}

/* Fuß - deckungsgleich mit der Startseite.
   Gleiche Klassennamen, gleiches Markup, gleiche Werte: Die Startseite bringt
   dieselben Regeln in ihrem <style>-Block mit (dort ab ".footer{"). Wer hier
   etwas aendert, aendert es dort mit - sonst laufen die beiden Fusszeilen
   wieder auseinander. Einziger Unterschied: margin-top und die Breite, weil
   die Unterseiten eine 820px-Spalte haben statt 1180px. */
.footer{margin-top:56px;background:var(--navy-deep);color:rgba(255,255,255,.72);
  padding:40px 0 22px;font-size:.84rem;line-height:1.45;position:relative}
.footer::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--gold)}
/* Gleiche Breite wie die Startseite - sonst sitzen die Spalten anders. */
.footer .wrap{max-width:1180px}
/* align-items:end - die drei Textbloecke stehen unten buendig, nicht oben.
   Die Logospalte ist die hoechste und bestimmt die Zeilenhoehe. */
.footer__grid{display:grid;grid-template-columns:1.15fr 1.35fr 1fr;gap:36px;align-items:end}
/* Auf Unterseiten umschliesst ein Link das Logo (Weg zur Startseite).
   Als Inline-Element erzeugt er eine Zeilenbox und macht die Fusszeile
   4px hoeher als die der Startseite. Auf der Startseite greift die Regel
   ins Leere - sie steht hier nur, damit beide Dateien gleich bleiben. */
.footer__grid > div > a{display:block}
/* Optischer Randausgleich: Das Logo-SVG traegt links 13,4 von 124,53
   viewBox-Einheiten Weissraum (per getBBox gemessen, nicht geschaetzt). Ohne
   Ausgleich steht die sichtbare Logokante eingerueckt gegenueber der Anschrift
   darunter. Faustformel bei Aenderung der Breite: Rand = Breite x -0,1076.
   Bei 150px sind das 16px. */
.footer img{display:block;width:150px;height:auto;margin:0 0 14px -16px}
/* Der Abschluss-Absatz der Anschrift traegt sonst seinen Aussenabstand
   als toten Raum ans Rasterende - 16px, die niemand sieht. */
.footer__grid p:last-child{margin-bottom:0}
/* Vollstaendig ausgeschrieben, nicht geerbt: Die beiden Stylesheets haben
   unterschiedliche Grundregeln fuer Ueberschriften (unterseite.css deckt nur
   h1-h3 ab). Ohne diese Zeilen rendert h4 auf Unterseiten in Inter statt
   Poppins und 7px hoeher. Werte entsprechen der Startseite. */
.footer h4{font-family:var(--f-display);font-weight:700;font-size:.88rem;
  line-height:1.18;letter-spacing:-.02em;color:#fff;margin:0 0 10px}
.footer a{color:rgba(255,255,255,.72);text-decoration:none;text-underline-offset:3px}
.footer a:hover{color:#fff;text-decoration:underline}
/* margin/padding zuruecksetzen: Die Grundregeln dieser Datei (ul mit
   padding-left und li mit Aussenabstand) gelten auf der Startseite nicht,
   deren CSS setzt ul{margin:0;padding:0}. Ohne diese Zeile ist die
   Fusszeile der Unterseiten 72px hoeher als die der Startseite. */
.footer ul{list-style:none;display:grid;gap:7px;margin:0;padding:0}
.footer li{margin:0}
.footer__bottom{
  border-top:1px solid rgba(255,255,255,.14);margin-top:26px;padding-top:16px;
  font-size:.78rem;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
}
.footer__bottom .slogan{color:var(--gold-light);font-family:var(--f-display)}

/* Dieselben Umbruchpunkte wie auf der Startseite: Bei 760px liegt die
   Logospalte oben ueber die ganze Breite, die beiden Linklisten darunter
   nebeneinander. */
@media (max-width:760px){
  .footer__grid{grid-template-columns:1fr 1fr;gap:26px 36px}
  .footer__grid > div:first-child{grid-column:1 / -1}
}

/* Erst hier ganz einspaltig. Ohne die Zwischenstufe sprang die Fusszeile
   bei 940px von 308px auf 680px - drei Spalten direkt auf eine. */
@media (max-width:600px){
  .footer__grid{grid-template-columns:1fr;gap:26px}
}

@media (max-width:640px){
  main{padding:36px 0 8px}
  .top img{height:32px}
}