/* =====================================================================
   Montenegro Experts, Neuauftritt Oktober 2026
   Eigenes Stylesheet, damit die bestehenden Seiten mit styles.css
   unberuehrt weiterlaufen, bis sie Schritt fuer Schritt umgezogen sind.

   Farben aus der Logo-Dokumentation vom 5.8.2026. Kontraste gerechnet:
     Navy  #021835 auf Weiss / Papier    Fliesstext, Ueberschriften
     Gold  #C8A54E auf Navy             7,55:1  nur auf dunklem Grund
     Gold-dunkel #7A5C1A auf Weiss      6,23:1  kleine Schrift auf hell
     Petrol #196853 auf Papier          6,18:1
     Weinrot #970419 auf Papier         8,28:1
     Grau  #5C6470 auf Papier           5,54:1
   Gold #C8A54E auf hellem Grund erreicht nur 2,2:1 und bleibt dort Zierlinie.
   ===================================================================== */

@import url('/fonts/fonts.css');

:root {
  --navy: #021835;
  --navy-2: #0B2A4D;
  --navy-3: #123A63;
  --ink: #16283C;
  --gold: #C8A54E;
  --gold-dk: #7A5C1A;
  --gold-hell: #E9DDB8;
  --petrol: #196853;
  --wein: #970419;
  --braun: #54310D;
  --papier: #F8F6F1;
  --sand: #EFEAE0;
  --weiss: #FFFFFF;
  --linie: #E1DCD1;
  --grau: #5C6470;
  --nebel: #9FB3C8;

  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans: 'Jost', 'Helvetica Neue', Arial, sans-serif;

  --breite: 1200px;
  --schmal: 760px;
  --rand: clamp(16px, 4vw, 40px);
  --abstand: clamp(64px, 9vw, 120px);
  --radius: 4px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--weiss);
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--navy-3); }
p { margin: 0 0 1em; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.15;
  color: var(--navy);
  margin: 0 0 .5em;
  letter-spacing: -.01em;
}
h1 { font-size: clamp(2.3rem, 5.4vw, 4.1rem); font-weight: 450; }
h2 { font-size: clamp(1.75rem, 3.4vw, 2.6rem); }
h3 { font-size: clamp(1.2rem, 1.8vw, 1.4rem); font-weight: 550; }
h4 { font-size: 1.05rem; font-weight: 600; }
em.akzent { font-style: italic; color: var(--gold-dk); }
.dunkel em.akzent { color: var(--gold); }

.huelle { max-width: var(--breite); margin: 0 auto; padding: 0 var(--rand); }
.huelle.schmal { max-width: calc(var(--schmal) + 2 * var(--rand)); }

.kennzeile {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: .82rem; font-weight: 600; letter-spacing: .04em;
  color: var(--gold-dk); margin-bottom: 1rem;
}
.kennzeile::before { content: ""; width: 28px; height: 1px; background: currentColor; }
.dunkel .kennzeile { color: var(--gold); }

.einleitung { font-size: clamp(1.08rem, 1.5vw, 1.25rem); line-height: 1.6; color: var(--grau); max-width: 680px; }
.dunkel .einleitung { color: var(--nebel); }

.sprung { position: absolute; left: -9999px; }
.sprung:focus { left: 16px; top: 16px; z-index: 100; background: var(--weiss); padding: 8px 14px; }

/* --------------------------------------------------------- Kopf */
.kopf {
  position: sticky; top: 0; z-index: 60;
  background: var(--weiss);
  border-bottom: 1px solid var(--linie);
}
.kopf-innen {
  max-width: var(--breite); margin: 0 auto; padding: 14px var(--rand);
  display: flex; align-items: center; gap: 28px;
}
.marke { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--navy); }
.marke img { width: 40px; height: 40px; }
.marke-name { font-family: var(--serif); font-size: 1.22rem; font-weight: 600; line-height: 1.05; }
.marke-name small { display: block; font-family: var(--sans); font-size: .68rem; font-weight: 500; letter-spacing: .08em; color: var(--grau); margin-top: 3px; }
.navigation { display: flex; gap: 4px; margin-left: auto; align-items: center; }
.navigation a {
  text-decoration: none; color: var(--ink); font-size: .93rem; font-weight: 450;
  padding: 8px 10px; border-radius: var(--radius); white-space: nowrap;
}
.navigation a:hover { background: var(--papier); }
.navigation a[aria-current="page"] { color: var(--navy); font-weight: 600; box-shadow: inset 0 -2px 0 var(--gold); border-radius: 0; }
.sprachen { display: flex; gap: 4px; font-size: .8rem; font-weight: 600; order: 3; }
.sprachen a { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; color: var(--grau); padding: 5px 7px; border-radius: var(--radius); border: 1px solid transparent; }
.sprachen a:hover { background: var(--papier); }
.sprachen a[aria-current="true"] { color: var(--navy); border-color: var(--linie); }
.flagge { width: 24px; height: 16px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(2,24,53,.15); flex: none; display: block; }
.navigation { order: 2; }
.menue-knopf { order: 4; }

/* Nachrichtenband unter dem Kopf, gefuellt von js/main.js */
.ticker-wrap {
  position: sticky; top: 69px; z-index: 59;
  height: 36px; overflow: hidden; display: flex; align-items: center;
  background: var(--papier); border-bottom: 1px solid var(--linie);
  /* Platz fuer das Etikett; der Versatz sitzt hier, damit der Track genau
     zwei Durchlaeufe misst und die Schleife ohne Sprung umbricht. */
  padding-left: 72px;
}
.ticker-track { display: inline-flex; white-space: nowrap; will-change: transform; font-size: 12.5px; letter-spacing: .2px; color: var(--ink); }
.ticker-track .titem { padding: 0 34px; display: inline-flex; align-items: center; gap: 8px; }
.ticker-track .titem .dot { color: var(--gold); font-weight: 700; }
.ticker-label {
  position: absolute; left: 0; top: 0; height: 36px; display: flex; align-items: center;
  padding: 0 14px; background: var(--navy); color: var(--gold); z-index: 2;
  font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 600;
}
.ohne-sprachen .menue-knopf { margin-left: auto; }

/* Sprachband oben auf der Startseite */
.sprachband { background: var(--papier); border-bottom: 1px solid var(--linie); }
.sprachband .huelle { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; padding-top: 12px; padding-bottom: 12px; }
.sprachband-titel { font-size: .82rem; font-weight: 600; letter-spacing: .03em; color: var(--gold-dk); }
.sprachband-wahl { display: flex; gap: 10px; flex-wrap: wrap; }
.sprachband-wahl a { display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px 9px 10px; background: var(--weiss); border: 1px solid var(--linie); border-radius: 40px; text-decoration: none; color: var(--navy); font-weight: 600; font-size: 1rem; transition: border-color .2s, box-shadow .2s; }
.sprachband-wahl a:hover { border-color: var(--navy); box-shadow: 0 6px 16px rgba(2,24,53,.08); }
.sprachband-wahl a[aria-current="true"] { background: var(--navy); color: var(--weiss); border-color: var(--navy); }
.sprachband-wahl .flagge { width: 33px; height: 22px; border-radius: 3px; }
@media (max-width: 560px) {
  .sprachband .huelle { justify-content: center; }
  .sprachband-titel { width: 100%; text-align: center; }
  .sprachband-wahl { justify-content: center; gap: 6px; flex-wrap: nowrap; }
  .sprachband-wahl a { padding: 7px 10px 7px 7px; font-size: .85rem; gap: 6px; }
  .sprachband-wahl .flagge { width: 24px; height: 16px; }
}
.knopf-kopf { margin-left: 8px; }
.menue-knopf { display: none; background: none; border: 0; padding: 8px; color: var(--navy); cursor: pointer; }
.menue-knopf svg { width: 26px; height: 26px; }

@media (max-width: 1180px) {
  .menue-knopf { display: block; }
  .navigation {
    display: none; position: fixed; inset: 69px 0 0 0; background: var(--weiss);
    flex-direction: column; align-items: stretch; padding: 24px var(--rand); gap: 0; overflow-y: auto;
  }
  .navigation.offen { display: flex; }
  .navigation a { font-size: 1.15rem; padding: 14px 4px; border-bottom: 1px solid var(--linie); border-radius: 0; }
  .navigation a[aria-current="page"] { box-shadow: none; color: var(--wein); }
  .knopf-kopf { display: none; }
  .sprachen { margin-left: auto; }
  .menue-knopf { margin-left: 4px; }
}

/* --------------------------------------------------------- Knoepfe */
.knopf {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--sans); font-size: .98rem; font-weight: 550;
  padding: 14px 24px; border-radius: var(--radius); text-decoration: none;
  border: 1px solid transparent; cursor: pointer; transition: background .2s, color .2s, border-color .2s;
}
.knopf.voll { background: var(--navy); color: var(--weiss); }
.knopf.voll:hover { background: var(--navy-3); }
.knopf.gold { background: var(--gold); color: var(--navy); }
.knopf.gold:hover { background: var(--gold-hell); }
.knopf.linie { border-color: var(--navy); color: var(--navy); background: transparent; }
.knopf.linie:hover { background: var(--navy); color: var(--weiss); }
.dunkel .knopf.linie, .knopf.linie-hell { border-color: rgba(255,255,255,.5); color: var(--weiss); }
.dunkel .knopf.linie:hover, .knopf.linie-hell:hover { background: var(--weiss); color: var(--navy); }
.knopf.klein { padding: 9px 16px; font-size: .9rem; }
.knopf-reihe { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.pfeil { text-decoration: none; font-weight: 600; color: var(--navy); border-bottom: 1px solid var(--gold); padding-bottom: 2px; }
.pfeil::after { content: " \2192"; }
.dunkel .pfeil { color: var(--weiss); }

/* --------------------------------------------------------- Abschnitte */
.abschnitt { padding: var(--abstand) 0; }
.abschnitt.papier { background: var(--papier); }
.abschnitt.sand { background: var(--sand); }
.dunkel { background: var(--navy); color: #DCE4EE; }
.dunkel h1, .dunkel h2, .dunkel h3, .dunkel h4 { color: var(--weiss); }
.dunkel a { color: var(--gold-hell); }
.abschnitt-kopf { max-width: 760px; margin-bottom: clamp(36px, 5vw, 60px); }
.abschnitt-kopf.mitte { margin-left: auto; margin-right: auto; text-align: center; }
.abschnitt-kopf.mitte .kennzeile { justify-content: center; }

/* --------------------------------------------------------- Buehne */
.buehne {
  position: relative; min-height: min(88vh, 820px); display: flex; align-items: flex-end;
  color: var(--weiss); background: var(--navy) center / cover no-repeat; isolation: isolate;
}
.buehne::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(2,24,53,.35) 0%, rgba(2,24,53,.25) 35%, rgba(2,24,53,.88) 78%, rgba(2,24,53,.97) 100%);
}
.buehne .huelle { width: 100%; padding-bottom: clamp(48px, 7vw, 90px); padding-top: 120px; }
.buehne h1 { color: var(--weiss); max-width: 900px; }
.buehne .einleitung { color: #DCE4EE; max-width: 640px; }
.buehne .kennzeile { color: var(--gold); }
.bildnachweis { font-size: .74rem; color: rgba(255,255,255,.6); margin-top: 36px; }
.buehne.klein { min-height: 0; padding-top: 40px; }
.buehne.klein .huelle { padding-top: 90px; padding-bottom: 64px; }

/* Leiste mit Eckdaten unter der Buehne */
.eckdaten { background: var(--navy); color: #DCE4EE; border-top: 1px solid rgba(255,255,255,.1); }
.eckdaten .huelle { display: grid; grid-template-columns: repeat(4, 1fr); }
.eckdatum { padding: 26px 22px 28px 0; border-right: 1px solid rgba(255,255,255,.1); margin-right: 22px; }
.eckdatum:last-child { border-right: 0; margin-right: 0; }
.eckdatum b { display: block; font-family: var(--serif); font-size: clamp(1.6rem, 2.6vw, 2.2rem); font-weight: 450; color: var(--gold); line-height: 1.1; }
.eckdatum span { display: block; font-size: .9rem; margin-top: 6px; }
.eckdatum small { display: block; font-size: .72rem; color: var(--nebel); margin-top: 6px; }
@media (max-width: 860px) {
  .eckdaten .huelle { grid-template-columns: 1fr 1fr; }
  .eckdatum { border-right: 0; margin-right: 0; border-bottom: 1px solid rgba(255,255,255,.1); padding-right: 12px; }
}

/* --------------------------------------------------------- Raster */
.raster { display: grid; gap: clamp(18px, 2.4vw, 30px); }
.raster.zwei { grid-template-columns: repeat(2, 1fr); }
.raster.drei { grid-template-columns: repeat(3, 1fr); }
.raster.vier { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 960px) { .raster.drei, .raster.vier { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .raster.zwei, .raster.drei, .raster.vier { grid-template-columns: 1fr; } }

.geteilt { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(32px, 6vw, 88px); align-items: center; }
.geteilt.umgekehrt > :first-child { order: 2; }
@media (max-width: 860px) { .geteilt { grid-template-columns: 1fr; } .geteilt.umgekehrt > :first-child { order: 0; } }

/* --------------------------------------------------------- Karten */
.karte {
  background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius);
  padding: clamp(24px, 3vw, 34px); display: flex; flex-direction: column;
}
.papier .karte, .sand .karte { border-color: transparent; }
.karte h3 { margin-bottom: .4em; }
.karte p { color: var(--grau); }
.karte .pfeil { margin-top: auto; align-self: flex-start; }
.karte-marke { font-size: .78rem; font-weight: 600; letter-spacing: .04em; color: var(--petrol); margin-bottom: 14px; }
.karte.dunkel { background: var(--navy-2); border-color: transparent; }
.karte.dunkel p { color: #C9D5E3; }
a.karte { text-decoration: none; color: inherit; transition: transform .25s, box-shadow .25s; }
a.karte:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(2,24,53,.10); }

/* Zielgruppen-Wahl */
.wege { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid var(--linie); border-radius: var(--radius); overflow: hidden; background: var(--weiss); }
.weg { padding: clamp(26px, 3.2vw, 42px); border-right: 1px solid var(--linie); text-decoration: none; color: inherit; display: flex; flex-direction: column; transition: background .2s; }
.weg:last-child { border-right: 0; }
.weg:hover { background: var(--papier); }
.weg .nummer { font-family: var(--serif); font-size: .95rem; color: var(--gold-dk); margin-bottom: 18px; }
.weg h3 { font-size: clamp(1.35rem, 2vw, 1.65rem); }
.weg p { color: var(--grau); }
.weg ul { list-style: none; padding: 0; margin: 4px 0 26px; }
.weg li { padding: 7px 0; border-top: 1px solid var(--linie); font-size: .95rem; }
.weg .pfeil { margin-top: auto; align-self: flex-start; }
@media (max-width: 900px) { .wege { grid-template-columns: 1fr; } .weg { border-right: 0; border-bottom: 1px solid var(--linie); } .weg:last-child { border-bottom: 0; } }

/* Herausforderung und Antwort */
.befunde { counter-reset: befund; border-top: 1px solid var(--linie); }
.befund { display: grid; grid-template-columns: 80px 1fr 1fr; gap: clamp(18px, 3vw, 40px); padding: clamp(26px, 3vw, 36px) 0; border-bottom: 1px solid var(--linie); }
.befund::before { counter-increment: befund; content: counter(befund, decimal-leading-zero); font-family: var(--serif); font-size: 1.9rem; color: var(--gold-dk); line-height: 1; }
.befund h3 { margin-bottom: .35em; }
.befund p { color: var(--grau); margin: 0; }
.befund .antwort { border-left: 2px solid var(--petrol); padding-left: 20px; }
.befund .antwort b { display: block; font-size: .8rem; letter-spacing: .04em; color: var(--petrol); margin-bottom: 6px; }
.befund .antwort p { color: var(--ink); }
@media (max-width: 860px) { .befund { grid-template-columns: 1fr; } }

/* Zahlen mit Quelle */
.zahlen { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.4vw, 30px); }
.zahl { border-top: 2px solid var(--navy); padding-top: 18px; }
.dunkel .zahl { border-top-color: var(--gold); }
.zahl b { display: block; font-family: var(--serif); font-size: clamp(2.2rem, 4vw, 3.2rem); font-weight: 400; color: var(--navy); line-height: 1; }
.dunkel .zahl b { color: var(--gold); }
.zahl span { display: block; margin: 10px 0 8px; font-size: 1rem; }
.zahl small, .quelle { display: block; font-size: .76rem; color: var(--grau); }
.dunkel .zahl small, .dunkel .quelle { color: var(--nebel); }
@media (max-width: 860px) { .zahlen { grid-template-columns: 1fr; } }

/* Balken fuer Anteile */
.balken { margin: 22px 0 6px; }
.balken-zeile { display: grid; grid-template-columns: 170px 1fr 64px; gap: 14px; align-items: center; padding: 8px 0; font-size: .92rem; }
.balken-spur { height: 12px; background: rgba(2,24,53,.08); border-radius: 2px; overflow: hidden; }
.balken-wert { height: 100%; background: var(--navy); }
.balken-wert.petrol { background: var(--petrol); }
.balken-zeile b { text-align: right; font-weight: 600; }
@media (max-width: 560px) { .balken-zeile { grid-template-columns: 1fr 52px; } .balken-spur { grid-column: 1 / -1; grid-row: 2; } }

/* Fristen */
.fristen { display: grid; gap: 14px; }
.frist {
  display: grid; grid-template-columns: 1fr auto; gap: 4px 18px; align-items: start;
  background: var(--weiss); border-left: 3px solid var(--wein); padding: 20px 24px; border-radius: 0 var(--radius) var(--radius) 0;
}
.frist time { font-family: var(--serif); font-size: 1.2rem; color: var(--wein); line-height: 1.2; grid-column: 1; }
.frist > div { grid-column: 1 / -1; }
.frist .rest { grid-column: 2; grid-row: 1; }
.frist h4 { margin: 0 0 4px; }
.frist p { margin: 0; color: var(--grau); font-size: .93rem; }
.frist .rest { font-size: .8rem; font-weight: 600; color: var(--navy); white-space: nowrap; background: var(--papier); padding: 6px 10px; border-radius: 20px; }
.frist.ruhig { border-left-color: var(--petrol); }
.frist.ruhig time { color: var(--petrol); }


/* Foerderfinder */
.finder { background: var(--weiss); border-radius: var(--radius); padding: clamp(24px, 3.5vw, 44px); box-shadow: 0 20px 50px rgba(2,24,53,.08); }
.finder fieldset { border: 0; padding: 0; margin: 0 0 26px; }
.finder legend { font-family: var(--serif); font-size: 1.2rem; color: var(--navy); margin-bottom: 14px; font-weight: 550; }
.finder .wahl { display: flex; flex-wrap: wrap; gap: 10px; }
.finder label { cursor: pointer; }
.finder input { position: absolute; opacity: 0; pointer-events: none; }
.finder label span {
  display: inline-block; padding: 10px 16px; border: 1px solid var(--linie); border-radius: 30px; font-size: .95rem; transition: all .15s;
}
.finder input:checked + span { background: var(--navy); border-color: var(--navy); color: var(--weiss); }
.finder input:focus-visible + span { outline: 2px solid var(--gold-dk); outline-offset: 2px; }
.treffer { display: grid; gap: 12px; margin-top: 8px; }
.treffer-karte { border: 1px solid var(--linie); border-radius: var(--radius); padding: 18px 20px; display: grid; grid-template-columns: 1fr auto; gap: 6px 20px; }
.treffer-karte h4 { margin: 0; }
.treffer-karte .art { font-size: .78rem; font-weight: 600; color: var(--petrol); }
.treffer-karte p { margin: 0; font-size: .93rem; color: var(--grau); grid-column: 1 / -1; }
.treffer-karte.passt { border-color: var(--petrol); background: #F3F8F6; }
.treffer-karte.passt .art::after { content: " \00B7  passt zu Ihrer Auswahl"; }
html[lang="en"] .treffer-karte.passt .art::after { content: " \00B7  matches your selection"; }
html[lang="sr-ME"] .treffer-karte.passt .art::after { content: " \00B7  odgovara Va\0161 em izboru"; }
.treffer-karte.blass { opacity: .5; }

/* Foerder-Check (Briefaktion November 2026), von js/site.js eingesetzt */
.fc-willkommen { display: grid; gap: 4px; background: var(--navy); color: var(--weiss); border-radius: var(--radius); padding: 16px 20px; margin-bottom: 24px; border-left: 4px solid var(--gold); }
.fc-willkommen strong { font-family: var(--serif); font-size: 1.2rem; font-weight: 550; color: var(--gold); }
.fc-willkommen span { font-size: .95rem; color: var(--nebel); }
.foerder-check { margin: 0 0 22px; padding: 18px 20px; border: 1px solid var(--linie); border-radius: var(--radius); background: var(--papier); }
.foerder-check label { display: block; font-family: var(--serif); font-size: 1.1rem; color: var(--navy); font-weight: 550; margin-bottom: 10px; }
.finder .foerder-check input { position: static; opacity: 1; pointer-events: auto; width: 100%; max-width: 280px; font: inherit; font-size: 1.05rem; padding: 10px 12px; border: 1px solid var(--linie); border-radius: var(--radius); background: var(--weiss); color: var(--navy); }
.foerder-check input:focus-visible { outline: 2px solid var(--gold-dk); outline-offset: 2px; }
.fc-ergebnis { margin: 16px 0 6px; padding-left: 18px; color: var(--navy); }
.fc-ergebnis li { margin-bottom: 8px; line-height: 1.5; }
.fc-hinweis { font-size: .82rem; color: var(--grau); margin: 0 0 14px; }
.foerder-check .fc-plan { display: inline-block; }
.finder-hinweis { font-size: .82rem; color: var(--grau); margin-top: 18px; }

/* Zeitleiste */
.zeitleiste { position: relative; padding-left: 34px; }
.zeitleiste::before { content: ""; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 1px; background: var(--linie); }
.dunkel .zeitleiste::before { background: rgba(255,255,255,.18); }
.station { position: relative; padding-bottom: 30px; }
.station::before { content: ""; position: absolute; left: -33px; top: 6px; width: 13px; height: 13px; border-radius: 50%; background: var(--weiss); border: 2px solid var(--gold-dk); }
.dunkel .station::before { background: var(--navy); border-color: var(--gold); }
.station.jetzt::before { background: var(--gold); border-color: var(--gold); box-shadow: 0 0 0 5px rgba(200,165,78,.25); }
.station time { font-size: .82rem; font-weight: 600; color: var(--gold-dk); letter-spacing: .03em; }
.dunkel .station time { color: var(--gold); }
.station h4 { margin: 4px 0 4px; }
.station p { margin: 0; color: var(--grau); font-size: .95rem; }
.dunkel .station p { color: var(--nebel); }

/* Bildband */
.bildband { display: grid; grid-template-columns: 1.4fr 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 10px; height: clamp(420px, 52vw, 620px); }
.bildband figure { margin: 0; position: relative; overflow: hidden; border-radius: var(--radius); background: var(--sand); }
.bildband figure:first-child { grid-row: 1 / 3; }
.bildband img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.bildband figure:hover img { transform: scale(1.03); }
.bildband figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 16px 12px;
  background: linear-gradient(transparent, rgba(2,24,53,.85)); color: var(--weiss); font-size: .84rem; line-height: 1.4;
}
@media (max-width: 760px) {
  .bildband { grid-template-columns: 1fr 1fr; grid-template-rows: auto; height: auto; }
  .bildband figure { aspect-ratio: 4 / 5; }
  .bildband figure:first-child { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 3 / 2; }
}

.foto { margin: 0; position: relative; }
.foto img { width: 100%; border-radius: var(--radius); }
.foto figcaption { font-size: .8rem; color: var(--grau); margin-top: 10px; }
.foto.hoch img { aspect-ratio: 4 / 5; object-fit: cover; }
.foto.quer img { aspect-ratio: 3 / 2; object-fit: cover; }

/* Personen */
.person { display: grid; grid-template-columns: 200px 1fr; gap: 28px; align-items: start; }
.person img { aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); }
.person .rolle { font-size: .82rem; font-weight: 600; color: var(--petrol); letter-spacing: .03em; margin-bottom: 6px; }
.person.ljubo .rolle { color: var(--wein); }
.person p { color: var(--grau); }
.person ul { padding-left: 18px; margin: 0 0 14px; color: var(--ink); }
.person li { margin-bottom: 4px; }
@media (max-width: 640px) { .person { grid-template-columns: 1fr; } .person img { max-width: 260px; } }

/* Zitat */
.zitat { font-family: var(--serif); font-size: clamp(1.4rem, 2.6vw, 2rem); line-height: 1.35; font-weight: 400; color: var(--navy); margin: 0; }
.dunkel .zitat { color: var(--weiss); }
.zitat-quelle { margin-top: 18px; font-size: .9rem; color: var(--grau); }
.dunkel .zitat-quelle { color: var(--nebel); }

/* Abwaegung zwei Spalten */
.waage { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--linie); border-radius: var(--radius); overflow: hidden; }
.waage > div { padding: clamp(24px, 3vw, 36px); background: var(--weiss); }
.waage > div + div { border-left: 1px solid var(--linie); background: var(--papier); }
.waage h3 { display: flex; align-items: center; gap: 10px; }
.waage ul { list-style: none; padding: 0; margin: 0; }
.waage li { padding: 12px 0; border-top: 1px solid var(--linie); }
.waage li b { display: block; color: var(--navy); }
.waage li span { color: var(--grau); font-size: .94rem; }
@media (max-width: 760px) { .waage { grid-template-columns: 1fr; } .waage > div + div { border-left: 0; border-top: 1px solid var(--linie); } }

/* Ablauf in Stufen */
.stufen { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; counter-reset: stufe; }
.stufe { padding: 0 18px 0 0; position: relative; }
.stufe::before {
  counter-increment: stufe; content: counter(stufe);
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--navy); color: var(--gold); font-family: var(--serif); font-size: 1.1rem; margin-bottom: 16px; position: relative; z-index: 1;
}
.stufe::after { content: ""; position: absolute; top: 20px; left: 40px; right: 0; height: 1px; background: var(--linie); }
.stufe:last-child::after { display: none; }
.stufe h4 { margin-bottom: 6px; }
.stufe p { font-size: .93rem; color: var(--grau); margin: 0; }
@media (max-width: 900px) { .stufen { grid-template-columns: 1fr; gap: 22px; } .stufe { padding-left: 58px; } .stufe::before { position: absolute; left: 0; top: 0; } .stufe::after { display: none; } }

/* Aufklappbare Fragen */
.fragen { border-top: 1px solid var(--linie); }
.fragen details { border-bottom: 1px solid var(--linie); }
.fragen summary {
  list-style: none; cursor: pointer; padding: 22px 40px 22px 0; position: relative;
  font-family: var(--serif); font-size: 1.15rem; color: var(--navy); font-weight: 500;
}
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary::after { content: "+"; position: absolute; right: 6px; top: 18px; font-size: 1.6rem; color: var(--gold-dk); font-family: var(--sans); font-weight: 300; }
.fragen details[open] summary::after { content: "\2212"; }
.fragen details > div { padding: 0 0 22px; color: var(--grau); max-width: 760px; }

/* Haken-Liste */
.haken { list-style: none; padding: 0; margin: 0 0 1em; }
.haken li { position: relative; padding: 6px 0 6px 30px; }
.haken li::before { content: ""; position: absolute; left: 2px; top: 13px; width: 13px; height: 7px; border-left: 2px solid var(--petrol); border-bottom: 2px solid var(--petrol); transform: rotate(-45deg); }
.dunkel .haken li::before { border-color: var(--gold); }

/* Grundsaetze */
.grundsatz { border-top: 1px solid rgba(255,255,255,.18); padding-top: 20px; }
.grundsatz h4 { color: var(--gold); font-family: var(--serif); font-size: 1.2rem; font-weight: 500; }
.grundsatz p { color: #C9D5E3; margin: 0; font-size: .96rem; }

/* Unterlagen */
.unterlage { display: grid; grid-template-columns: 54px 1fr; gap: 18px; align-items: start; padding: 22px 0; border-top: 1px solid var(--linie); text-decoration: none; color: inherit; }
.unterlage:hover h4 { text-decoration: underline; text-decoration-color: var(--gold); }
.unterlage .symbol { width: 54px; height: 66px; border: 1px solid var(--linie); border-radius: 2px; display: grid; place-items: end center; padding-bottom: 8px; font-size: .64rem; font-weight: 700; color: var(--wein); background: var(--weiss); position: relative; }
.unterlage .symbol::before { content: ""; position: absolute; top: 10px; left: 10px; right: 10px; height: 2px; background: var(--navy); box-shadow: 0 6px 0 var(--linie), 0 12px 0 var(--linie), 0 18px 0 var(--linie); }
.unterlage h4 { margin: 0 0 4px; }
.unterlage p { margin: 0; color: var(--grau); font-size: .93rem; }
.unterlage small { display: block; margin-top: 6px; color: var(--gold-dk); font-weight: 600; font-size: .78rem; }

/* Netzwerk-Kacheln ohne Logos */
.netz { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--linie); border: 1px solid var(--linie); }
.netz > div { background: var(--weiss); padding: 24px; }
.netz b { display: block; font-family: var(--serif); color: var(--navy); font-weight: 550; margin-bottom: 4px; }
.netz span { font-size: .9rem; color: var(--grau); }
@media (max-width: 760px) { .netz { grid-template-columns: 1fr; } }

/* Abschluss mit Kontakt */
.schluss { position: relative; background: var(--navy) center / cover; color: var(--weiss); isolation: isolate; }
.schluss::before { content: ""; position: absolute; inset: 0; background: rgba(2,24,53,.86); z-index: -1; }
.schluss h2 { color: var(--weiss); }
.kontaktwege { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(255,255,255,.14); margin-top: 40px; }
.kontaktwege a, .kontaktwege div { background: var(--navy); padding: 22px; text-decoration: none; color: var(--weiss); }
.kontaktwege small { display: block; color: var(--gold); font-size: .78rem; font-weight: 600; margin-bottom: 4px; }
@media (max-width: 760px) { .kontaktwege { grid-template-columns: 1fr; } }

/* Formulare, Klassen bleiben kompatibel mit js/main.js */
.contact-grid form, form.nl-form { display: grid; gap: 12px; }
.contact-grid input, .contact-grid textarea, .contact-grid select, form.nl-form input {
  font: inherit; font-size: 1rem; padding: 14px 16px; border: 1px solid var(--linie); border-radius: var(--radius); background: var(--weiss); color: var(--ink); width: 100%;
}
.contact-grid input:focus, .contact-grid textarea:focus, form.nl-form input:focus { outline: 2px solid var(--gold-dk); outline-offset: 1px; border-color: transparent; }
.contact-grid button, form.nl-form button { font: inherit; font-weight: 600; padding: 15px 24px; border: 0; border-radius: var(--radius); background: var(--navy); color: var(--weiss); cursor: pointer; }
.contact-grid button:hover, form.nl-form button:hover { background: var(--navy-3); }
.dunkel form.nl-form button { background: var(--gold); color: var(--navy); }
.form-status { font-size: .95rem; padding: 12px 14px; background: #F3F8F6; border-left: 3px solid var(--petrol); margin: 4px 0 0; }
.form-status.is-fehler { background: #FBF1F2; border-left-color: var(--wein); }
.download-link { display: inline-block; margin-top: 10px; font-weight: 600; }
form.nl-form select { font: inherit; font-size: 1rem; padding: 14px 12px; border: 1px solid var(--linie); border-radius: var(--radius); background: var(--weiss); color: var(--ink); }
.auch-brief { display: flex; gap: 10px; align-items: flex-start; font-size: .9rem; line-height: 1.45; }
.auch-brief input { width: auto; margin-top: 3px; }
form.nl-form.reihe { grid-template-columns: 1fr 1.4fr auto auto; }
@media (max-width: 700px) { form.nl-form.reihe { grid-template-columns: 1fr; } }
.klein-hinweis { font-size: .8rem; color: var(--grau); margin-top: 10px; }
.dunkel .klein-hinweis { color: var(--nebel); }

/* --------------------------------------------------------- Fuss */
.fuss { background: #01112A; color: #AFC0D3; padding: 72px 0 30px; font-size: .93rem; }
.fuss a { color: #DCE4EE; text-decoration: none; }
.fuss a:hover { color: var(--gold); }
.fuss-raster { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 36px; }
.fuss h4 { color: var(--weiss); font-family: var(--sans); font-size: .82rem; letter-spacing: .06em; font-weight: 600; margin-bottom: 14px; }
.fuss nav a { display: block; padding: 4px 0; }
.fuss .marke { color: var(--weiss); margin-bottom: 16px; }
.fuss .marke-name small { color: var(--nebel); }
.fuss-unten { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; border-top: 1px solid rgba(255,255,255,.1); margin-top: 52px; padding-top: 22px; font-size: .8rem; }
@media (max-width: 860px) { .fuss-raster { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .fuss-raster { grid-template-columns: 1fr; } }

/* Sanftes Einblenden, nur wenn der Nutzer Bewegung zulaesst */
@media (prefers-reduced-motion: no-preference) {
  .einblenden { opacity: 0; transform: translateY(18px); transition: opacity .8s ease, transform .8s ease; }
  .einblenden.sichtbar { opacity: 1; transform: none; }
}

/* Hilfsklassen */
.mitte { text-align: center; }
.oben-0 { margin-top: 0; }
.unten-0 { margin-bottom: 0; }
.luft-oben { margin-top: clamp(36px, 5vw, 60px); }
.hinweis-rahmen { border: 1px solid var(--linie); border-left: 3px solid var(--gold); padding: 18px 22px; background: var(--weiss); font-size: .95rem; }
.hinweis-rahmen p:last-child { margin: 0; }

/* Geteilte Buehne: Text links auf Navy, Belegfoto rechts */
.buehne-geteilt { background: var(--navy); color: #DCE4EE; overflow: hidden; }
.buehne-geteilt .huelle { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(32px, 5vw, 72px); align-items: center; padding-top: clamp(56px, 8vw, 110px); padding-bottom: clamp(56px, 8vw, 110px); }
.buehne-geteilt h1 { color: var(--weiss); }
.buehne-geteilt .einleitung { color: #C9D5E3; }
.buehne-geteilt .kennzeile { color: var(--gold); }
.buehne-geteilt figure { margin: 0; position: relative; }
.buehne-geteilt figure img { width: 100%; aspect-ratio: 4 / 3.4; object-fit: cover; border-radius: var(--radius); box-shadow: 0 30px 60px rgba(0,0,0,.35); }
.buehne-geteilt figure.hoch img { aspect-ratio: 4 / 5; }
.buehne-geteilt figcaption { font-size: .8rem; color: var(--nebel); margin-top: 14px; line-height: 1.5; border-left: 2px solid var(--gold); padding-left: 12px; }
@media (max-width: 900px) { .buehne-geteilt .huelle { grid-template-columns: 1fr; } }
.buehne-geteilt .einleitung a { color: var(--gold-hell); }
.dunkel .karte:not(.dunkel) h3 { color: var(--navy); }
.dunkel .karte:not(.dunkel) { color: var(--ink); }
.programm-fuss { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: .78rem; color: var(--grau); margin-top: 10px; grid-column: 1 / -1; }
.programm-fuss b { color: var(--ink); font-weight: 600; }
.marke-leiste { display: flex; flex-wrap: wrap; gap: 10px; }
.marke-leiste span { font-size: .82rem; padding: 6px 12px; border: 1px solid var(--linie); border-radius: 30px; color: var(--grau); background: var(--weiss); }

.buehne-geteilt em.akzent { color: var(--gold); }
.buehne-geteilt h1 { font-size: clamp(2.1rem, 4.2vw, 3.4rem); }
.schluss .einleitung, .schluss p { color: #DCE4EE; }
.schluss .kennzeile { color: var(--gold); }
.befund .quelle { margin-top: 10px; }
.station + .quelle, .zeitleiste + .quelle { margin-top: 4px; }
[hidden] { display: none !important; }

@media (max-width: 1180px) and (min-width: 0px) { .navigation { order: 5; } }
@media (max-width: 520px) { .sprachen a span { display: none; } .sprachen a { padding: 5px; } .marke-name small { display: none; } .marke-name { font-size: 1.05rem; } }
@media (min-width: 1181px) { .sprachen { margin-left: 6px; } }
.person img { object-position: center 20%; }

/* Menue auf dem Telefon: volle Hoehe unter dem Kopf. Kein backdrop-filter am
   Kopf, sonst wird er zum Bezugsrahmen fuer position:fixed und das Menue
   schrumpft auf die Hoehe des Kopfes (am 15. Oktober 2026 so passiert). */
@media (max-width: 1180px) {
  .navigation { top: var(--kopf-hoehe, 74px); bottom: 0; height: auto; z-index: 70; box-shadow: 0 12px 24px rgba(2,24,53,.12); }
  .navigation .knopf-kopf { display: inline-flex; justify-content: center; margin: 22px 0 0; border-bottom: 0; color: var(--weiss); }
}
.menue-knopf .auf { display: none; }
.menue-knopf[aria-expanded="true"] .auf { display: block; }
.menue-knopf[aria-expanded="true"] .zu { display: none; }

/* =====================================================================
   Bestehende Seiten im Kopf des Neuauftritts: Blog, Personenseiten,
   Marktbrief, Impressum, Datenschutz. Ihr Rumpf traegt noch die Klassen
   aus styles.css; sie sind hier unter main.bestand nachgebaut, damit nichts
   davon auf die acht Seiten des Neuauftritts durchschlaegt.
   Die Inline-Stile im Rumpf nennen --grey, --gold, --navy-2: diese Namen
   zeigen hier auf die Werte des Neuauftritts. --gold wird dabei zum dunklen
   Gold, weil es dort durchweg auf hellem Grund steht (6,23:1 statt 2,2:1).
   ===================================================================== */
main.bestand {
  --grey: var(--grau);
  --gold: var(--gold-dk);
  --navy-2: var(--navy-3);
  --line: var(--linie);
  --paper-alt: var(--papier);
}
.bestand .container { max-width: var(--breite); margin: 0 auto; padding: 0 var(--rand); }
.bestand a { text-decoration-color: rgba(18,58,99,.35); text-underline-offset: 3px; }

.bestand .hero {
  background: var(--papier); border-bottom: 1px solid var(--linie);
  padding: clamp(56px, 8vw, 104px) 0 clamp(40px, 5vw, 64px) !important;
}
.bestand .hero .container { max-width: calc(var(--schmal) + 2 * var(--rand)); }
.bestand .hero h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); }
.bestand .eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: .82rem; font-weight: 600; letter-spacing: .04em;
  color: var(--gold-dk); margin-bottom: 1rem;
}
.bestand .eyebrow::before { content: ""; width: 28px; height: 1px; background: currentColor; }
.bestand .lead { font-size: clamp(1.08rem, 1.5vw, 1.25rem); line-height: 1.6; color: var(--grau); }

.bestand section.block { padding: clamp(48px, 7vw, 88px) 0; }
.bestand section.block.alt { background: var(--papier); }
.bestand .section-head { max-width: 760px; margin: 0 auto 36px; text-align: center; }
.bestand .section-head .eyebrow { justify-content: center; }

.bestand .btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: .98rem; font-weight: 550; padding: 14px 24px; border-radius: var(--radius);
  text-decoration: none; border: 1px solid transparent; transition: background .2s, color .2s;
}
.bestand .btn-primary { background: var(--navy); color: var(--weiss); }
.bestand .btn-primary:hover { background: var(--navy-3); }
.bestand .btn-outline { border-color: var(--navy); color: var(--navy); }
.bestand .btn-outline:hover { background: var(--navy); color: var(--weiss); }
.bestand .btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

.bestand .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.4vw, 30px); }
.bestand .topic-card { background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius); padding: clamp(22px, 3vw, 30px); }
.bestand .topic-card p { color: var(--grau); margin: 0; }
.bestand .tag { display: inline-block; font-size: .78rem; font-weight: 600; letter-spacing: .04em; color: var(--petrol); margin-bottom: 12px; }

.bestand section.photo-section { padding: clamp(48px, 7vw, 88px) 0; }
.bestand .photo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
.bestand .photo-section img { width: 100%; min-height: 320px; object-fit: cover; border-radius: var(--radius); }

.bestand .newsletter-box {
  max-width: 760px; margin: 0 auto; background: var(--papier); border-top: 3px solid var(--navy);
  border-radius: var(--radius); padding: clamp(28px, 4vw, 44px); text-align: center;
}
.bestand .newsletter-box form.nl-form { max-width: 460px; margin: 22px auto 10px; }
.bestand .nl-note { font-size: .82rem; color: var(--grau); margin: 0; }

.bestand .blog-list { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px, 2.4vw, 26px); }
.bestand .blog-card { background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius); padding: clamp(22px, 3vw, 30px); display: flex; flex-direction: column; }
.bestand .blog-card .date { font-size: .8rem; font-weight: 600; color: var(--gold-dk); letter-spacing: .03em; margin-bottom: 8px; }
.bestand .blog-card h3 a { color: var(--navy); text-decoration: none; }
.bestand .blog-card h3 a:hover { text-decoration: underline; }
.bestand .blog-card p { color: var(--grau); }
.bestand .blog-card > a:last-child { margin-top: auto; align-self: flex-start; font-weight: 600; color: var(--navy); text-decoration: none; border-bottom: 1px solid var(--gold-dk); }

.bestand article.post { max-width: var(--schmal); margin: 0 auto; }
.bestand article.post .date { display: block; font-size: .85rem; font-weight: 600; color: var(--gold-dk); letter-spacing: .03em; margin-bottom: 18px; }
.bestand article.post h1 { font-size: clamp(2rem, 4.4vw, 3.1rem); }
.bestand article.post h2 { margin-top: 1.6em; font-size: clamp(1.45rem, 2.6vw, 1.9rem); }
.bestand article.post h3 { margin-top: 1.4em; }
.bestand article.post .lead { color: var(--ink); }
.bestand article.post ul { margin: 0 0 1.1em 1.15em; padding: 0; }
.bestand article.post li { margin-bottom: .5em; }
.bestand article.post table { width: 100%; border-collapse: collapse; margin: 0 0 1.4em; font-size: .93rem; }
.bestand article.post th, .bestand article.post td { text-align: left; padding: 10px; border-bottom: 1px solid var(--linie); vertical-align: top; }
.bestand article.post th { color: var(--grau); font-weight: 600; font-size: .8rem; letter-spacing: .03em; }
.bestand article.post td strong { color: var(--navy); }
.bestand article.post .quellen { margin-top: 2.2em; padding-top: 16px; border-top: 1px solid var(--linie); font-size: .84rem; color: var(--grau); }
.bestand article.post .quellen a { color: var(--grau); }
.bestand article.post .btn-row { margin-top: 28px; }

@media (max-width: 860px) {
  .bestand .grid-3, .bestand .blog-list, .bestand .photo-grid { grid-template-columns: 1fr; }
  .bestand .photo-section img { min-height: 0; aspect-ratio: 3 / 2; }
}
@media (max-width: 560px) {
  /* Tabellen in Artikeln rollen in sich, die Seite bleibt ruhig */
  .bestand article.post table { display: block; overflow-x: auto; }
}

/* Bewerbungsformular BD auf /passion, seit 19.10.2026 */
.bw { gap: 14px; }
.bw-feld { display: grid; gap: 6px; font-size: .95rem; }
.bw-feld span { color: var(--ink); font-weight: 500; }
.bw-zwei { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.bw-drei { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.bw-gruppe { border: 1px solid var(--linie); border-radius: var(--radius); padding: 12px 16px 16px; margin: 0; display: grid; gap: 12px; }
.bw-gruppe legend { padding: 0 6px; font-weight: 600; color: var(--navy); }
.bw-check { display: flex; gap: 10px; align-items: flex-start; font-size: .92rem; line-height: 1.45; }
.bw-check input { width: 20px; height: 20px; margin-top: 2px; flex: none; }
.bw-koeder { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.bw-meldung { margin: 0; padding: 10px 14px; border-radius: var(--radius); background: #E3F0EB; color: var(--petrol); }
.bw-meldung.bw-fehler { background: #F6E3E5; color: var(--wein); }
.bw-danke { padding: 18px 20px; border-left: 3px solid var(--petrol); background: #E3F0EB; border-radius: 0 var(--radius) var(--radius) 0; }
@media (max-width: 700px) { .bw-zwei, .bw-drei { grid-template-columns: 1fr; } }

/* Hinweis auf die BD-Ausschreibung auf der Startseite, seit 19.10.2026.
   Nach der Besetzung den Abschnitt in den drei Startseiten wieder entfernen. */
.stellen-band { background: var(--petrol); color: #F8F6F1; font-size: .92rem; line-height: 1.45; }
.stellen-band .huelle { padding-top: 10px; padding-bottom: 10px; display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: center; text-align: center; }
.stellen-band b { font-weight: 600; }
.stellen-band a { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.stellen-band a::after { content: " \2192"; }