/* ==========================================================
   fi-hunsrueck.de – Friedensinitiative Hunsrück
   Aufbau nach pydna.de, Farben aus dem FI-Logo (Blau, weiße Taube)
   ========================================================== */
:root{
  --tinte:#161c40;
  --tinte-2:#20285a;
  --tinte-weich:#565d72;
  --papier:#f6f7f3;
  --papier-tief:#eaede4;
  --karte:#ffffff;
  --signal:#3346b8;
  --signal-hell:#8b9bf0;
  --stahl:#2b3e9e;
  --stahl-hell:#5468c9;
  --gruen:#4f7d2a;
  --linie:#d8dbe2;
  --linie-dunkel:#2e3566;
  --serif:Georgia,"Iowan Old Style","Palatino Linotype","Book Antiqua",serif;
  --sans:"Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,Helvetica,Arial,sans-serif;
  --radius:4px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--papier);color:var(--tinte);font-family:var(--sans);font-size:17px;line-height:1.65;-webkit-text-size-adjust:100%}
img{max-width:100%;height:auto;display:block}
a{color:var(--stahl);text-decoration-color:rgba(43,62,158,.35);text-underline-offset:3px}
a:hover{color:var(--signal);text-decoration-color:currentColor}
.wrap{max-width:1120px;margin:0 auto;padding:0 22px}
.schmal{max-width:790px;margin:0 auto;padding:0 22px}
:focus-visible{outline:3px solid var(--signal);outline-offset:2px}

/* ---------- Kopf ---------- */
.kopf{background:var(--tinte);color:#f2efe8}
.kopf a{color:inherit;text-decoration:none}
.kopfzeile{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 0 16px;flex-wrap:nowrap}
.marke{display:block;line-height:1.1;min-width:0}
.marke .wort{font-family:var(--serif);font-size:1.9rem;font-weight:700;letter-spacing:.30em;text-transform:uppercase}
.marke .unter{display:block;margin-top:7px;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:#aab3d6}
.kopf-motto{font-family:var(--serif);font-style:italic;font-size:1.02rem;color:#c9cfea;text-align:right}
.burger{display:none;background:none;border:1px solid #4a5389;color:#f2efe8;border-radius:var(--radius);
        font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;padding:9px 14px;cursor:pointer;font-family:var(--sans)}

/* Suche im Kopf */
.kopfwerkzeuge{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.suchform{display:flex;align-items:stretch;border:1px solid #4a5389;border-radius:var(--radius);overflow:hidden;background:#10153a}
.suchform input{background:transparent;border:none;color:#f2efe8;font-family:var(--sans);font-size:.88rem;
                padding:9px 12px;width:210px;min-width:0}
.suchform input::placeholder{color:#8a92bb}
.suchform input:focus{outline:none}
.suchform:focus-within{border-color:var(--signal)}
.suchform button{background:#2a336e;border:none;border-left:1px solid #4a5389;color:#dfe4e8;cursor:pointer;
                 font-family:var(--sans);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;padding:0 14px}
.suchform button:hover{background:var(--signal);color:#fff}
.suchlink{display:none;border:1px solid #4a5389;border-radius:var(--radius);color:#f2efe8;text-decoration:none;
          font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;padding:8px 12px}
.suchlink:hover{border-color:var(--signal);color:#fff}

nav.hauptnav{background:var(--tinte-2);border-top:1px solid #2c3568;border-bottom:3px solid var(--signal)}
nav.hauptnav ul{list-style:none;display:flex;flex-wrap:wrap;gap:2px}
nav.hauptnav a{display:block;padding:14px 16px;font-size:.79rem;letter-spacing:.11em;text-transform:uppercase;
                font-weight:600;color:#c9cfea;text-decoration:none;border-bottom:3px solid transparent;margin-bottom:-3px}
nav.hauptnav a:hover{color:#fff;background:#2a336e}
nav.hauptnav a.aktiv{color:#fff;border-bottom-color:var(--signal)}

/* ---------- Hero ---------- */
.hero{position:relative;background:var(--tinte);color:#fff;overflow:hidden}
.hero img.hg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5;filter:grayscale(.3) contrast(1.05)}
.hero:after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,rgba(14,18,48,.92) 0%,rgba(14,18,48,.72) 45%,rgba(14,18,48,.25) 78%,rgba(14,18,48,.35) 100%)}
.hero .inhalt{position:relative;z-index:2;padding:84px 0 76px;max-width:760px}
.kicker{display:inline-block;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;font-weight:700;
        color:#fff;background:var(--signal);padding:6px 13px;margin-bottom:20px}
.hero h1{font-family:var(--serif);font-size:clamp(2rem,5vw,3.15rem);line-height:1.14;font-weight:700;text-wrap:balance}
.hero p.lead{margin-top:20px;font-size:1.12rem;color:#dfe4e8;max-width:640px}
.hero .knopfreihe{margin-top:30px;display:flex;gap:12px;flex-wrap:wrap}

.knopf{display:inline-block;background:var(--signal);color:#fff;text-decoration:none;font-weight:700;
       font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;padding:14px 26px;border:2px solid var(--signal)}
.knopf:hover{background:#26369a;border-color:#26369a;color:#fff}
.knopf.rand{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.knopf.rand:hover{background:rgba(255,255,255,.12);border-color:#fff;color:#fff}
.knopf.dunkel{background:var(--tinte);border-color:var(--tinte)}
.knopf.dunkel:hover{background:#000;border-color:#000}

/* ---------- Abschnitte ---------- */
.abschnitt{padding:62px 0}
.abschnitt.tief{background:var(--papier-tief);border-top:1px solid var(--linie);border-bottom:1px solid var(--linie)}
.abschnitt.dunkel{background:var(--tinte);color:#e7e3da}
.abschnitt.dunkel h2,.abschnitt.dunkel h3{color:#fff}
.abschnitt.dunkel a{color:#b8c3f5}
.abschnittkopf{margin-bottom:34px;border-bottom:2px solid var(--tinte);padding-bottom:12px;
                display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap}
.abschnitt.dunkel .abschnittkopf{border-bottom-color:#3a444e}
.abschnittkopf h2{font-family:var(--serif);font-size:1.7rem;font-weight:700;line-height:1.2}
.abschnittkopf .mehr{font-size:.76rem;letter-spacing:.11em;text-transform:uppercase;font-weight:700;text-decoration:none;white-space:nowrap}
.abschnittkopf .mehr:hover{text-decoration:underline}
.vorspann{font-size:1.05rem;color:var(--tinte-weich);max-width:70ch;margin:-16px 0 30px}

/* ---------- Karten ---------- */
.karten{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:26px}
.karte{background:var(--karte);border:1px solid var(--linie);display:flex;flex-direction:column;
       text-decoration:none;color:inherit;transition:.18s}
.karte:hover{border-color:var(--tinte);box-shadow:0 10px 26px rgba(18,22,27,.13);transform:translateY(-2px);color:inherit}
.karte .kbild{aspect-ratio:16/10;overflow:hidden;background:var(--papier-tief)}
.karte .kbild img{width:100%;height:100%;object-fit:cover;filter:grayscale(.2);transition:.3s}
.karte:hover .kbild img{filter:none;transform:scale(1.03)}
.karte .ktext{padding:20px 22px 24px;display:flex;flex-direction:column;flex:1}
.karte h3{font-family:var(--serif);font-size:1.14rem;line-height:1.32;font-weight:700;margin:9px 0 8px}
.karte p{font-size:.9rem;color:var(--tinte-weich);flex:1}
.karte .datum{margin-top:15px;font-size:.74rem;letter-spacing:.09em;text-transform:uppercase;color:var(--tinte-weich)}
.rubrik{font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;font-weight:700}
.rubrik.frieden{color:var(--signal)}
.rubrik.klima{color:#1d6b4f}
.rubrik.mauss{color:#5a4a86}
.rubrik.aktuell{color:var(--gruen)}

/* ---------- Themenkacheln ---------- */
.kacheln{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2px;background:var(--linie)}
.kachel{background:var(--karte);padding:30px 26px 28px;text-decoration:none;color:inherit;
        display:flex;flex-direction:column;min-height:190px;transition:.18s;border-top:4px solid transparent}
.kachel:hover{background:#fff;color:inherit;border-top-color:var(--signal)}
.kachel h3{font-family:var(--serif);font-size:1.22rem;margin:10px 0 8px}
.kachel p{font-size:.9rem;color:var(--tinte-weich);flex:1}
.kachel .pfeil{margin-top:16px;font-size:.76rem;letter-spacing:.11em;text-transform:uppercase;font-weight:700;color:var(--stahl)}

/* ---------- Zahlenband ---------- */
.zahlen{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:34px}
.zahl b{display:block;font-family:var(--serif);font-size:2.5rem;line-height:1;color:#fff}
.zahl b.wort{font-size:1.9rem;letter-spacing:.01em}
.abschnitt.dunkel .zahl a,.zahl a{color:#fff;text-decoration:none;border-bottom:2px solid var(--signal)}
.abschnitt.dunkel .zahl a:hover,.zahl a:hover{color:var(--signal-hell)}
.abschnitt:not(.dunkel) .zahl b{color:var(--signal)}
.zahl span{display:block;margin-top:9px;font-size:.85rem;color:#aeb8c0}
.abschnitt:not(.dunkel) .zahl span{color:var(--tinte-weich)}

/* ---------- Zeitstrahl ---------- */
.zeitstrahl{position:relative;margin:10px 0 0;padding-left:0;list-style:none}
.zeitstrahl:before{content:"";position:absolute;left:106px;top:6px;bottom:6px;width:2px;background:var(--linie)}
.zeitstrahl li{position:relative;display:grid;grid-template-columns:88px 1fr;gap:44px;padding:0 0 30px}
.zeitstrahl li:before{content:"";position:absolute;left:100px;top:9px;width:13px;height:13px;border-radius:50%;
                      background:var(--papier);border:3px solid var(--signal)}
.zeitstrahl .jahr{font-family:var(--serif);font-weight:700;font-size:1.28rem;text-align:right;padding-top:1px}
.zeitstrahl h3{font-size:1.02rem;font-weight:700;margin-bottom:5px}
.zeitstrahl p{font-size:.95rem;color:var(--tinte-weich)}
.zeitstrahl li.stark:before{background:var(--signal)}
.zeitstrahl li.stark .jahr{color:var(--signal)}

/* ---------- Artikel ---------- */
.artikelkopf{background:var(--tinte);color:#fff;padding:52px 0 46px}
.artikelkopf .meta{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:#a3abd0;margin-bottom:14px}
.artikelkopf .meta a{color:#a3abd0}
.artikelkopf h1{font-family:var(--serif);font-size:clamp(1.75rem,4vw,2.65rem);line-height:1.16;font-weight:700;max-width:26ch;text-wrap:balance}
.artikelkopf .lead{margin-top:18px;font-size:1.08rem;color:#d6dbf0;max-width:62ch}
.artikelkopf.hell{background:var(--papier-tief);color:var(--tinte);border-bottom:1px solid var(--linie)}
.artikelkopf.hell .meta{color:var(--tinte-weich)}
.artikelkopf.hell .lead{color:var(--tinte-weich)}

.artikel{font-family:var(--serif);font-size:1.09rem;line-height:1.75;padding:44px 0 60px}
.artikel p{margin:0 0 1.25em}
.artikel h2{font-family:var(--serif);font-size:1.62rem;line-height:1.25;margin:2.2em 0 .7em;padding-bottom:.25em;border-bottom:1px solid var(--linie)}
.artikel h3{font-family:var(--serif);font-size:1.28rem;margin:1.9em 0 .55em}
.artikel h4,.artikel h5,.artikel h6{font-family:var(--sans);font-size:1rem;letter-spacing:.02em;margin:1.7em 0 .5em}
.artikel ul,.artikel ol{margin:0 0 1.3em 1.35em}
.artikel li{margin-bottom:.5em}
.artikel blockquote{margin:1.7em 0;padding:4px 0 4px 24px;border-left:4px solid var(--signal);
                    font-style:italic;color:#39424b}
.artikel blockquote p:last-child{margin-bottom:0}
.artikel pre{font-family:var(--sans);font-size:.98rem;white-space:pre-wrap;background:var(--papier-tief);
             border-left:4px solid var(--linie);padding:16px 20px;margin:0 0 1.4em}
.artikel hr{border:none;border-top:1px solid var(--linie);margin:2.4em 0}
.artikel strong{font-weight:700}
.artikel a{font-weight:600;overflow-wrap:anywhere}
.fussnoten{overflow-wrap:anywhere}
.linkkarte span{overflow-wrap:anywhere}

/* Bilder im Artikel – nie beschnitten */
.artikel figure.bild{margin:2em 0}
.artikel figure.bild img{width:auto;max-width:100%;height:auto;margin:0 auto;border:1px solid var(--linie);background:#fff}
.artikel figure.bild figcaption{font-family:var(--sans);font-size:.83rem;line-height:1.5;color:var(--tinte-weich);
                                margin-top:9px;padding-left:2px;border-left:3px solid var(--signal);padding:2px 0 2px 10px}
.artikel figure.bild.rechts{float:right;max-width:min(48%,340px);margin:.4em 0 1.2em 1.8em}
.artikel figure.bild.links{float:left;max-width:min(48%,340px);margin:.4em 1.8em 1.2em 0}
.artikel figure.bild.klein img{max-width:220px}
.artikel .aufraeumen{clear:both}
.artikel > figure.bild:first-child{margin-top:0}

.bildwand{columns:2;column-gap:20px;margin:2em 0}
.bildwand.raster{columns:auto;display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.bildwand.raster figure{margin:0}
.bildwand figure{break-inside:avoid;margin:0 0 20px}
.bildwand img{width:100%;border:1px solid var(--linie)}
.bildwand figcaption{font-family:var(--sans);font-size:.8rem;color:var(--tinte-weich);margin-top:6px}

.videobox{position:relative;padding-bottom:56.25%;height:0;margin:2em 0;background:#000}
.videounter{font-family:var(--sans);font-size:.82rem;color:var(--tinte-weich);margin:-1.5em 0 2.2em}
.videobox iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

mark.zensiert{background:linear-gradient(transparent 62%,rgba(51,70,184,.22) 0);color:inherit;
              box-shadow:inset 0 0 0 0 transparent;padding:0 1px}
.zensur-legende{font-family:var(--sans);font-size:.9rem;background:#fff;border:1px solid var(--linie);
                border-left:5px solid var(--signal);padding:16px 20px;margin:0 0 2em}
.zitatteil{display:block;color:#2f4a3c}

.hinweis{font-family:var(--sans);font-size:.94rem;background:var(--papier-tief);border:1px solid var(--linie);
         padding:18px 22px;margin:2em 0}
.hinweis strong{display:block;margin-bottom:5px}

/* Fussnoten (Magisterarbeit) */
.artikel sup.fn a{text-decoration:none;font-weight:700;font-size:.72em}
.fussnoten{font-family:var(--sans);font-size:.85rem;line-height:1.6;color:var(--tinte-weich);
           border-top:2px solid var(--tinte);margin-top:3em;padding-top:20px}
.fussnoten ol{margin-left:1.6em}
.fussnoten li{margin-bottom:.5em}
.fussnoten li:target{background:#e6eafb}

/* Kapitelnavigation */
.kapitelnav{font-family:var(--sans);background:#fff;border:1px solid var(--linie);padding:22px 24px;margin:0 0 34px}
.kapitelnav h2{font-family:var(--serif);font-size:1.15rem;margin:0 0 12px;border:none;padding:0}
.kapitelnav ol{margin:0;list-style:none;font-size:.95rem}
.kapitelnav ol ol{margin:.35em 0 .7em 1.3em;font-size:.9rem;color:var(--tinte-weich)}
.kapitelnav li{margin-bottom:.35em}
.blaettern{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-family:var(--sans);
           border-top:1px solid var(--linie);margin-top:44px;padding-top:22px;font-size:.9rem}
.blaettern a{font-weight:600;text-decoration:none}
.blaettern .zurueck:before{content:"← "}
.blaettern .weiter:after{content:" →"}
.fortschritt{position:fixed;top:0;left:0;height:3px;background:var(--signal);width:0;z-index:99}

/* Dossier-Navigation (1 von 5 …) */
.dossiernav{font-family:var(--sans);font-size:.9rem;background:var(--tinte);color:#cdd4da;padding:22px 24px;margin:2.5em 0 0}
.dossiernav b{display:block;font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;color:#949cc4;margin-bottom:12px}
.dossiernav ol{list-style:none;margin:0;display:grid;gap:8px}
.dossiernav a{color:#fff;text-decoration:none;font-weight:600}
.dossiernav a:hover{color:var(--signal-hell)}
.dossiernav li.hier{color:#949cc4}
.dossiernav .nr{display:inline-block;min-width:2.1em;color:#949cc4;font-weight:400}

/* ---------- Filterleiste ---------- */
.filter{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:30px;font-family:var(--sans)}
.chip{border:1px solid var(--linie);background:#fff;padding:9px 18px;font-size:.78rem;letter-spacing:.08em;
      text-transform:uppercase;font-weight:700;color:var(--tinte-weich);cursor:pointer;font-family:inherit}
.chip:hover{border-color:var(--tinte);color:var(--tinte)}
.chip.aktiv{background:var(--tinte);border-color:var(--tinte);color:#fff}

/* ---------- Linkliste ---------- */
.linkliste{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:2px;background:var(--linie)}
.linkkarte{background:#fff;padding:22px;text-decoration:none;color:inherit;display:flex;flex-direction:column;
           justify-content:space-between;gap:14px;min-height:140px;transition:.18s}
.linkkarte:hover{background:var(--papier-tief);color:inherit}
.linkkarte img{max-height:52px;width:auto;object-fit:contain;filter:grayscale(1);opacity:.85}
.linkkarte:hover img{filter:none;opacity:1}
.linkkarte b{font-size:.95rem}
.linkkarte span{font-size:.8rem;color:var(--tinte-weich);word-break:break-word}

/* ---------- Suchseite ---------- */
.suchseite{display:flex;gap:0;margin:0 0 18px;max-width:720px}
.suchseite input{flex:1;min-width:0;font-family:var(--sans);font-size:1.05rem;padding:15px 18px;
                 border:2px solid var(--tinte);background:#fff;color:var(--tinte)}
.suchseite input:focus{outline:none;border-color:var(--signal)}
.suchseite input::-webkit-search-cancel-button,.suchform input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.suchseite button{border:2px solid var(--tinte);border-left:none;background:#fff;color:var(--tinte-weich);
                  font-size:1.5rem;line-height:1;width:52px;cursor:pointer}
.suchseite button:hover{color:var(--signal)}
.suchstatus{font-family:var(--sans);font-size:.9rem;color:var(--tinte-weich);margin-bottom:26px;min-height:1.4em}
.treffer{display:grid;gap:2px;background:var(--linie);border:1px solid var(--linie)}
.treffer:empty{display:none;border:none}
.treffer-karte{display:block;background:#fff;padding:22px 24px;text-decoration:none;color:inherit;transition:.15s}
.treffer-karte:hover{background:var(--papier-tief);color:inherit}
.treffer-karte .tmeta{display:block;font-family:var(--sans);font-size:.72rem;letter-spacing:.12em;
                      text-transform:uppercase;color:var(--tinte-weich);margin-bottom:7px}
.treffer-karte h3{font-family:var(--serif);font-size:1.2rem;line-height:1.3;margin-bottom:7px}
.treffer-karte p{font-family:var(--serif);font-size:.97rem;line-height:1.6;color:#3c454e}
.treffer-karte mark,.suchtipps mark{background:#dfe5ff;color:inherit;padding:0 2px}
.suchtipps h2{font-family:var(--serif);font-size:1.25rem;margin-bottom:14px}
.suchtipps .chip{margin:0 8px 9px 0}
.suchtipps[hidden]{display:none}

/* ---------- Fuss ---------- */
.fuss{background:var(--tinte);color:#aeb5d6;padding:52px 0 30px;margin-top:0;font-size:.9rem}
.fuss a{color:#dde1f3;text-decoration:none}
.fuss a:hover{color:#fff;text-decoration:underline}
.fussgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px}
.fuss h4{font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;color:#fff;margin-bottom:14px}
.fuss ul{list-style:none;display:grid;gap:8px}
.fuss .marke .wort{font-size:1.35rem;color:#fff}
.fuss .marke .unter{color:#949cc4}
.fussunten{border-top:1px solid #2c3466;margin-top:38px;padding-top:20px;display:flex;justify-content:space-between;
           gap:20px;flex-wrap:wrap;font-size:.82rem;color:#8188ad}

/* ---------- Mobil ---------- */
@media(max-width:1040px){ .suchform input{width:150px} }
@media(max-width:860px){
  body{font-size:16px}
  .kopf-motto{display:none}
  .suchform{display:none}
  .suchlink{display:block}
  .burger{display:block}
  nav.hauptnav{display:none}
  nav.hauptnav.offen{display:block}
  nav.hauptnav ul{flex-direction:column;gap:0}
  nav.hauptnav a{padding:14px 22px;border-bottom:1px solid #2c3568;margin:0}
  nav.hauptnav a.aktiv{border-bottom-color:#2c3568;color:var(--signal-hell)}
  .hero .inhalt{padding:56px 0 50px}
  .abschnitt{padding:46px 0}
  .fussgrid{grid-template-columns:1fr;gap:30px}
  .artikel figure.bild.rechts,.artikel figure.bild.links{float:none;max-width:100%;margin:2em 0}
  .bildwand{columns:1}
  .bildwand.raster{grid-template-columns:1fr}
  .zeitstrahl:before{left:8px}
  .zeitstrahl li{grid-template-columns:1fr;gap:4px;padding-left:34px}
  .zeitstrahl li:before{left:2px;top:8px}
  .zeitstrahl .jahr{text-align:left;color:var(--signal)}
  .artikel{font-size:1.04rem}
}
@media(max-width:560px){
  .marke .wort{font-size:1.3rem;letter-spacing:.2em}
  .marke .unter{font-size:.62rem;letter-spacing:.08em;margin-top:5px}
  .kopfzeile{padding:12px 0 11px}
  .burger{padding:8px 11px;font-size:.72rem;flex:0 0 auto}
  .suchlink{padding:8px 10px;font-size:.68rem}
  .kopfwerkzeuge{gap:7px}
  .zahlen{gap:22px}
  .zahl b{font-size:2rem}
  .artikelkopf{padding:34px 0 30px}
  .artikelkopf h1{max-width:none}
}
@media print{
  .kopf,nav.hauptnav,.fuss,.blaettern,.dossiernav,.filter{display:none}
  body{background:#fff;font-size:11pt}
  .artikel{padding:0}
}

/* Lightbox – Bilder zum Vergrößern anklicken */
img.vergroesserbar{cursor:zoom-in}
img.vergroesserbar:focus-visible{outline:3px solid var(--signal);outline-offset:3px}
.lightbox{position:fixed;inset:0;background:rgba(14,18,48,.95);display:none;z-index:200;
  overflow:auto;padding:24px;-webkit-overflow-scrolling:touch}
.lightbox.offen{display:block}
.lightbox figure{min-height:calc(100vh - 48px);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:16px;margin:0}
.lightbox img{max-width:94vw;max-height:84vh;width:auto;height:auto;cursor:zoom-in;
  background:#fff;box-shadow:0 20px 60px rgba(0,0,0,.55)}
.lightbox.gezoomt figure{align-items:flex-start;justify-content:flex-start}
.lightbox.gezoomt img{max-width:none;max-height:none;cursor:zoom-out}
.lightbox figcaption{font-family:var(--sans);color:#cdd4da;font-size:.86rem;line-height:1.5;
  max-width:70ch;text-align:center}
.lb-schliessen,.lb-nav{position:fixed;background:rgba(255,255,255,.14);color:#fff;border:none;
  line-height:1;border-radius:50%;cursor:pointer;z-index:201}
.lb-schliessen{top:14px;right:18px;width:46px;height:46px;font-size:1.9rem}
.lb-nav{top:50%;transform:translateY(-50%);width:52px;height:52px;font-size:2.2rem}
.lb-zurueck{left:14px}
.lb-weiter{right:14px}
.lb-schliessen:hover,.lb-nav:hover{background:rgba(255,255,255,.3)}
.lb-schliessen:focus-visible,.lb-nav:focus-visible{outline:3px solid #fff;outline-offset:2px}
.lb-nav[hidden]{display:none}
@media (max-width:640px){
  .lightbox{padding:12px}
  .lb-nav{width:44px;height:44px;font-size:1.8rem}
  .lightbox img{max-width:100%;max-height:74vh}
}
@media (prefers-reduced-motion:no-preference){
  .lightbox.offen{animation:lb-auf .18s ease-out}
  @keyframes lb-auf{from{opacity:0}to{opacity:1}}
}

/* Veranstaltungshinweis */
.artikel .termin{margin:2.6em 0;padding:26px 28px;background:var(--tinte);color:#fff;border-radius:4px}
.artikel .termin h3{font-family:var(--serif);font-size:1.5rem;line-height:1.2;color:#fff;margin:6px 0 0;
  border:0;padding:0}
.artikel .termin .tkicker{font-family:var(--sans);font-size:.74rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--signal-hell);margin:0}
.artikel .termin .tunter{font-family:var(--serif);font-style:italic;color:#cdd4da;margin:.5em 0 1.2em}
.artikel .termin .twann{font-family:var(--sans);font-size:1.02rem;line-height:1.6;color:#fff;
  border-left:4px solid var(--signal);padding-left:16px;margin:1.2em 0}
.artikel .termin p{color:#d6dbf0}
.artikel .termin .tveranstalter{font-family:var(--sans);font-size:.86rem;color:#a3abd0;margin-bottom:0}
.artikel .termin a{color:#fff}
@media (max-width:560px){ .artikel .termin{padding:20px 18px} }

/* Bildband auf der Startseite (statt des Zahlenbands) */
.bildband{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.bildband figure{margin:0}
.bildband img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;
  border:1px solid rgba(255,255,255,.16);filter:grayscale(.15);transition:filter .3s}
.bildband figure:hover img{filter:none}
.bildband figcaption{margin-top:14px;font-family:var(--sans);font-size:.86rem;line-height:1.55;color:#b9c2ca}
.bildband figcaption b{display:block;margin-bottom:5px;font-family:var(--serif);font-size:2.1rem;
  line-height:1;color:#fff;font-weight:700}
.bildzeile{margin:32px 0 0;padding-top:24px;border-top:1px solid rgba(255,255,255,.16);
  font-family:var(--sans);font-size:.95rem;color:#aeb8c0}
.bildzeile a{font-family:var(--serif);font-size:1.3rem;color:#fff;text-decoration:none;
  border-bottom:2px solid var(--signal)}
.bildzeile a:hover{color:var(--signal-hell)}
@media (max-width:860px){ .bildband{grid-template-columns:1fr 1fr;gap:22px}
  .bildband figure:last-child{grid-column:1 / -1} }
@media (max-width:560px){ .bildband{grid-template-columns:1fr}
  .bildband figcaption b{font-size:1.8rem} }

/* Zählpixel (nur ohne JavaScript sichtbar im Quelltext) */
.zaehlpixel{position:absolute;left:-9999px;width:1px;height:1px;border:0}

/* Bildnachweis am Ende eines Beitrags */
.artikel .bildnachweis{margin:2.4em 0 0;padding-top:16px;border-top:1px solid var(--linie);
  font-family:var(--sans);font-size:.84rem;color:var(--tinte-weich)}

/* Nummerierte Quellenliste */
.artikel ol.quellen{padding-left:1.4em}
.artikel ol.quellen li{margin-bottom:.5em}

/* ==========================================================
   Ergänzungen fi-hunsrueck.de
   ========================================================== */
.marke{display:flex;align-items:center;gap:14px}
.marke .taube{width:46px;height:46px;flex:0 0 auto;color:#fff}
.marke .wort{letter-spacing:.06em;text-transform:none;font-size:1.65rem}
.marke .wort b{font-weight:700;color:var(--signal-hell)}
.fuss .marke .taube{width:36px;height:36px}

/* Unternavigation einer Rubrik */
.unternav{background:#fff;border-bottom:1px solid var(--linie)}
.unternav ul{list-style:none;display:flex;flex-wrap:wrap;gap:0 4px}
.unternav a{display:block;padding:12px 14px;font-size:.86rem;font-weight:600;color:var(--tinte-weich);
  text-decoration:none;border-bottom:3px solid transparent}
.unternav a:hover{color:var(--tinte);background:var(--papier)}
.unternav a.aktiv{color:var(--signal);border-bottom-color:var(--signal)}

/* Einträge */
.eintrag{margin:0 0 2.6em;padding:0 0 2.2em;border-bottom:1px solid var(--linie)}
.eintrag:last-child{border-bottom:none}
.artikel .eintrag > h2,.artikel .eintrag summary h2{margin:0 0 .35em;border:none;padding:0;font-size:1.5rem}
.artikel .unterzeile{font-family:var(--sans);font-size:1rem;font-weight:600;color:var(--signal);line-height:1.45;margin:0 0 1.1em}
.artikel .eintrag h3{font-size:1.15rem;margin:1.4em 0 .5em}
.eintrag:target,.eintrag.ziel{scroll-margin-top:20px}
.eintrag.ziel > h2,.eintrag.ziel summary h2{color:var(--signal)}

details.klapp{border:1px solid var(--linie);background:#fff;padding:0;margin:0 0 14px;border-radius:var(--radius)}
details.klapp > summary{list-style:none;cursor:pointer;padding:18px 54px 18px 22px;position:relative}
details.klapp > summary::-webkit-details-marker{display:none}
details.klapp > summary:after{content:"+";position:absolute;right:20px;top:14px;font-family:var(--sans);
  font-size:1.6rem;line-height:1;color:var(--signal)}
details.klapp[open] > summary:after{content:"–"}
details.klapp > summary:hover{background:var(--papier)}
.artikel details.klapp summary h2{font-size:1.2rem;line-height:1.35;margin:0}
details.klapp .kteaser{display:block;font-family:var(--sans);font-size:.88rem;color:var(--tinte-weich);margin-top:4px}
details.klapp[open] .kteaser{display:none}
details.klapp .kinhalt{padding:4px 22px 18px}
details.klapp .kinhalt > :first-child{margin-top:0}
.eintragsgruppe{margin:0 0 2.6em}

/* Dokumente zum Herunterladen */
.dok{display:flex;align-items:center;gap:12px;font-family:var(--sans);font-size:.95rem;text-decoration:none;
  background:var(--papier);border:1px solid var(--linie);border-left:4px solid var(--signal);
  padding:10px 14px;margin:.4em 0 1.2em;color:var(--tinte);max-width:100%}
.artikel a.dok{font-weight:600}
.dok:hover{background:#fff;border-color:var(--signal);color:var(--signal)}
.dok .art{flex:0 0 auto;font-size:.68rem;letter-spacing:.1em;font-weight:700;background:var(--signal);color:#fff;
  padding:3px 7px;border-radius:2px}
.dok .titel{flex:1;min-width:0;overflow-wrap:anywhere}
.dok .groesse{flex:0 0 auto;font-size:.78rem;font-weight:400;color:var(--tinte-weich)}
.dok.fehlt{border-left-color:var(--linie);color:var(--tinte-weich)}
.dok.fehlt .art{background:#8a8f99}
audio.hoeren{width:100%;margin:0 0 1.2em}

/* Bildgalerien */
.galerie{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:22px;margin:1.4em 0 2em}
.galerie figure{margin:0}
.galerie img{width:100%;aspect-ratio:4/3;object-fit:cover;border:1px solid var(--linie);background:#fff}
.galerie figcaption{font-family:var(--sans);font-size:.82rem;line-height:1.45;color:var(--tinte-weich);margin-top:7px}
.galerie.gedenken{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
.galerie.gedenken img{aspect-ratio:3/4;filter:grayscale(.15)}
.galerie.gedenken figcaption{text-align:center;font-size:.86rem}
.galerie.gedenken figcaption b{display:block;font-family:var(--serif);font-size:1.02rem;color:var(--tinte);margin-bottom:2px}

/* Heftarchiv (Titelbild + PDF) */
.heftraster{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:22px;margin:1.4em 0 2.4em}
.heft{background:#fff;border:1px solid var(--linie);display:flex;flex-direction:column;scroll-margin-top:20px}
.heft .cover{aspect-ratio:3/4;background:var(--papier-tief);overflow:hidden;border-bottom:1px solid var(--linie)}
.heft .cover img{width:100%;height:100%;object-fit:cover;object-position:top}
.heft .htext{padding:14px 16px 16px;display:flex;flex-direction:column;flex:1;font-family:var(--sans)}
.artikel .heft h3{font-family:var(--serif);font-size:1.02rem;line-height:1.35;margin:0 0 6px}
.heft p{font-size:.84rem;line-height:1.5;color:var(--tinte-weich);margin:0 0 10px;flex:1}
.heft .dok{margin:auto 0 0;font-size:.82rem;padding:8px 10px}
.heft:target{outline:3px solid var(--signal)}

/* Inhaltsliste langer Seiten */
details.inhaltsliste{font-family:var(--sans);background:#fff;border:1px solid var(--linie);margin:0 0 34px;padding:0}
details.inhaltsliste summary{cursor:pointer;padding:14px 20px;font-weight:700;font-size:.92rem}
details.inhaltsliste ol{margin:0;padding:4px 20px 16px 42px;font-size:.9rem;columns:2;column-gap:34px}
details.inhaltsliste li{margin-bottom:.35em;break-inside:avoid}
details.inhaltsliste a{font-weight:500;text-decoration:none}
details.inhaltsliste a:hover{text-decoration:underline}

/* Startseite */
.start{background:var(--tinte);color:#fff;padding:56px 0 60px}
.startgrid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.start h1{font-family:var(--serif);font-size:clamp(2rem,4.6vw,3rem);line-height:1.12;text-wrap:balance}
.start .lead{margin-top:18px;font-size:1.08rem;color:#d6dbf0;max-width:58ch}
.start figure{margin:0}
.start figure img{width:100%;border:10px solid #fff;box-shadow:0 18px 50px rgba(0,0,0,.35)}
.start figcaption{font-size:.82rem;color:#aab3d6;margin-top:10px}
.start .knopfreihe{margin-top:28px;display:flex;gap:12px;flex-wrap:wrap}
.nachricht{display:block;background:#fff;color:var(--tinte);text-decoration:none;padding:22px 24px;margin-top:30px;
  border-left:6px solid var(--gruen);max-width:560px}
.nachricht:hover{color:var(--tinte);box-shadow:0 10px 26px rgba(0,0,0,.25)}
.nachricht .rubrik{color:var(--gruen)}
.nachricht h2{font-family:var(--serif);font-size:1.3rem;line-height:1.25;margin:6px 0 6px}
.nachricht p{font-size:.92rem;color:var(--tinte-weich)}
.nachricht .pfeil{display:inline-block;margin-top:10px;font-size:.76rem;letter-spacing:.11em;text-transform:uppercase;font-weight:700;color:var(--signal)}
.termine{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px}
.termin-karte{background:#fff;border:1px solid var(--linie);border-top:4px solid var(--gruen);padding:22px 24px}
.termin-karte h3{font-family:var(--serif);font-size:1.2rem;margin-bottom:8px}
.termin-karte p{font-size:.94rem;color:var(--tinte-weich)}
.rubrik.gruen{color:var(--gruen)}

/* Zeitgeschichte */
.zs-rahmen{display:flex;border:1px solid var(--linie);background:#fff;margin:0 0 14px}
.zs-legende{flex:0 0 auto;width:96px;border-right:1px solid var(--linie);background:#fff}
.zs-legende img{width:96px;height:350px;max-width:none}
.zs-scroll{overflow-x:auto;overflow-y:hidden;flex:1;cursor:grab;-webkit-overflow-scrolling:touch}
.zs-scroll.zieht{cursor:grabbing}
.zs-bild{position:relative;width:5121px;height:350px}
.zs-bild img{width:5121px;height:350px;max-width:none;user-select:none;-webkit-user-drag:none}
.zs-punkt{position:absolute;display:block;border-radius:3px;background:rgba(51,70,184,.08);
  outline:2px solid transparent;transition:.15s}
.zs-punkt:hover,.zs-punkt:focus-visible,.zs-punkt.aktiv{background:rgba(51,70,184,.18);outline-color:var(--signal)}
.zs-hinweis{font-family:var(--sans);font-size:.86rem;color:var(--tinte-weich);margin-bottom:28px}
.zs-steuer{display:flex;gap:8px;margin:0 0 10px;font-family:var(--sans)}
.zs-steuer button{border:1px solid var(--linie);background:#fff;padding:7px 14px;cursor:pointer;font:inherit;font-size:.82rem}
.zs-steuer button:hover{border-color:var(--signal);color:var(--signal)}
.zs-erklaerung details.klapp{scroll-margin-top:20px}

/* Linkseite */
.linkliste .linkkarte b{font-family:var(--serif);font-size:1.05rem}

@media(max-width:860px){
  .startgrid{grid-template-columns:1fr;gap:34px}
  .unternav ul{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .unternav a{white-space:nowrap;padding:11px 12px}
  details.inhaltsliste ol{columns:1}
  .zs-legende{width:60px}.zs-legende img{width:60px;height:350px;object-fit:cover;object-position:left}
}
@media(max-width:560px){
  .marke .taube{width:34px;height:34px}
  .marke .wort{font-size:1.15rem;letter-spacing:.02em}
  .marke{gap:10px}
  .galerie{grid-template-columns:repeat(2,1fr);gap:14px}
  .heftraster{grid-template-columns:repeat(2,1fr);gap:14px}
  details.klapp > summary{padding:15px 46px 15px 16px}
  details.klapp .kinhalt{padding:4px 16px 14px}
}

/* Nachtrag nach Sichtprüfung */
.artikel .galerie figure.bild{margin:0}
.artikel .galerie figure.bild img{width:100%;max-width:none;margin:0}
.artikel .galerie figure.bild figcaption,.galerie figcaption{border-left:0;padding:0}
.galerie.gedenken figcaption b{display:block}
.klapp + .eintrag:not(.klapp),.heftraster + .eintrag{margin-top:2.6em}
.eintrag + .klapp{margin-top:0}
.kacheln.drei{grid-template-columns:repeat(3,1fr)}
@media(max-width:860px){.kacheln.drei{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.kacheln.drei{grid-template-columns:1fr}}
.heft .dok .titel{font-weight:700}
.heft .ohnebild{display:flex;height:100%;align-items:center;justify-content:center;font:700 1.4rem var(--sans);color:var(--signal)}
.karte .ktext{padding-top:22px}

/* lange Adressen und Zeichenketten umbrechen */
.artikel p,.artikel li,.artikel figcaption,.unterzeile,.kteaser{overflow-wrap:anywhere}
.kopfzeile .marke{min-width:0;flex:1 1 auto}
@media(max-width:420px){.kopfzeile .marke .unter{display:none}.kopfzeile .marke .wort{font-size:1.05rem}}
@media(max-width:860px){.unternav{overflow-x:auto;-webkit-overflow-scrolling:touch}.unternav .wrap{width:max-content;min-width:100%}.unternav ul{overflow:visible}}
.artikel h2,.artikel h3{overflow-wrap:anywhere}
.wrap.kopfzeile{padding-left:22px;padding-right:22px}
@media(max-width:560px){.wrap.kopfzeile{padding-left:16px;padding-right:16px}}

/* Zeitzeugen – Videos laden erst nach Klick (youtube-nocookie) */
.video{position:relative;margin:0}
.video-start{position:relative;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;gap:4px;
  width:100%;aspect-ratio:16/9;border:0;cursor:pointer;text-align:left;padding:18px 20px;color:#fff;font-family:var(--sans);
  background:radial-gradient(circle at 70% 30%,#3346b8 0,#20285a 55%,#10153a 100%);border-radius:var(--radius);overflow:hidden}
.video-start:before{content:"";position:absolute;inset:0;background:url("../bilder/friedenstaube.png") no-repeat 92% 12%/54px;opacity:.3}
.video-start:hover{filter:brightness(1.12)}
.video-start:focus-visible{outline:3px solid var(--signal-hell);outline-offset:3px}
.vi-play{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);width:66px;height:66px;border-radius:50%;
  background:rgba(255,255,255,.95);box-shadow:0 8px 24px rgba(0,0,0,.35)}
.vi-play:after{content:"";position:absolute;left:26px;top:20px;border-style:solid;border-width:13px 0 13px 21px;
  border-color:transparent transparent transparent var(--signal)}
.vi-art{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;background:var(--gruen);padding:3px 8px;border-radius:2px}
.vi-titel{font-family:var(--serif);font-size:1.05rem;font-weight:700;line-height:1.3;position:relative}
.vi-hinweis{font-size:.72rem;color:#aab3d6}
.video iframe{display:block;width:100%;aspect-ratio:16/9;border:0;border-radius:var(--radius);background:#000}
.vi-extern{display:inline-block;margin-top:6px;font-family:var(--sans);font-size:.78rem}
.artikel .vi-extern{font-weight:500}
.zz-kopf .vi-titel{font-size:1.25rem}
.zz-kopf .vi-extern{color:#c9cfea}

.zz-nav{position:sticky;top:0;z-index:40;background:#fff;border-top:1px solid var(--linie);border-bottom:1px solid var(--linie);
  box-shadow:0 4px 14px rgba(22,28,64,.06)}
.zz-nav .wrap{display:flex;align-items:center;gap:16px;padding-top:10px;padding-bottom:10px}
.zz-nav-titel{flex:0 0 auto;font-family:var(--sans);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--tinte-weich)}
.zz-chips{display:flex;flex-wrap:wrap;gap:6px}
.zz-chips .chip{text-decoration:none;padding:6px 12px;font-size:.74rem;letter-spacing:.04em;text-transform:none}
.zz-chips .chip.aktiv{background:var(--signal);border-color:var(--signal);color:#fff}
.artikel .zz-chips .chip{font-weight:700}
.zz-person{scroll-margin-top:90px}
.zz-raster{display:grid;grid-template-columns:repeat(2,1fr);gap:0 44px}
.zz-raster .zz-person{border-bottom:1px solid var(--linie)}
.zz-videos{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.zz-person .zz-videos .video:only-child{grid-column:1 / -1;max-width:calc(50% - 7px)}
.zz-gesamt .zz-videos{grid-template-columns:1fr;max-width:760px}
.zz-gesamt .zz-videos .video:only-child{max-width:none}
.zz-gesamt{border-bottom:2px solid var(--tinte)}
.zz-raster .vi-titel{font-size:.92rem}
.zz-raster .video-start{padding:12px 14px}
.zz-raster .vi-play{width:50px;height:50px}
.zz-raster .vi-play:after{left:20px;top:15px;border-width:10px 0 10px 16px}
.zz-raster .vi-hinweis{display:none}

.zz-band .vorspann{color:#c9cfea}
.zz-namen{display:flex;flex-wrap:wrap;gap:8px 10px}
.zz-namen a{color:#fff;text-decoration:none;border:1px solid #4a5389;padding:7px 14px;border-radius:20px;font-size:.88rem}
.zz-namen a:hover{background:var(--signal);border-color:var(--signal);color:#fff}
@media(max-width:1000px){.zz-raster{grid-template-columns:1fr}}
@media(max-width:860px){
  .zz-nav .wrap{flex-direction:column;align-items:flex-start;gap:6px}
  .zz-chips{flex-wrap:nowrap;overflow-x:auto;max-width:100%;padding-bottom:4px;-webkit-overflow-scrolling:touch}
  .zz-chips .chip{white-space:nowrap}
}
@media(max-width:560px){
  .zz-videos{grid-template-columns:1fr}
  .zz-person .zz-videos .video:only-child{max-width:none}
}
.zz-raster .vi-art{display:none}
.zz-raster .vi-play{top:40%}
@media(max-width:560px){.vi-hinweis{display:none}.vi-play{top:34%;width:52px;height:52px}.vi-play:after{left:21px;top:15px;border-width:11px 0 11px 17px}}

/* Hintergrundfarbe der Website #3348bf (13.10.2026) */
:root{--fi-blau:#3348bf;--fi-blau-dunkel:#2a3ca6;--fi-nacht:#161c40}
.kopf,.start,.abschnitt.dunkel,.fuss,.artikelkopf:not(.hell){background:var(--fi-blau)}
nav.hauptnav{background:var(--fi-blau-dunkel);border-top-color:rgba(255,255,255,.18);border-bottom-color:#fff}
nav.hauptnav a{color:rgba(255,255,255,.88)}
nav.hauptnav a:hover{background:rgba(255,255,255,.12);color:#fff}
nav.hauptnav a.aktiv{border-bottom-color:#fff;color:#fff}
.marke .unter,.fuss .marke .unter{color:rgba(255,255,255,.78)}
.marke .wort b{color:#d3d9ff}
.suchform{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.4)}
.suchform input::placeholder{color:rgba(255,255,255,.7)}
.suchform button{background:rgba(255,255,255,.18);border-left-color:rgba(255,255,255,.4)}
.suchform button:hover{background:var(--fi-nacht)}
.suchform:focus-within{border-color:#fff}
.burger,.suchlink{border-color:rgba(255,255,255,.5)}
.kicker{background:var(--fi-nacht)}
.start .lead,.start figcaption,.zz-band .vorspann,.abschnitt.dunkel{color:rgba(255,255,255,.9)}
.abschnitt.dunkel .abschnittkopf{border-bottom-color:rgba(255,255,255,.35)}
.abschnitt.dunkel a,.abschnittkopf .mehr{color:inherit}
.abschnitt.dunkel .abschnittkopf .mehr{color:#fff}
.start .knopf,.abschnitt.dunkel .knopf{background:#fff;border-color:#fff;color:var(--fi-blau)}
.start .knopf:hover,.abschnitt.dunkel .knopf:hover{background:var(--fi-nacht);border-color:var(--fi-nacht);color:#fff}
.zz-namen a{border-color:rgba(255,255,255,.55)}
.zz-namen a:hover{background:var(--fi-nacht);border-color:var(--fi-nacht)}
.fuss{color:rgba(255,255,255,.85)}
.fuss a{color:#fff}
.fussunten{border-top-color:rgba(255,255,255,.25);color:rgba(255,255,255,.75)}
@media(max-width:860px){nav.hauptnav a{border-bottom-color:rgba(255,255,255,.15)}nav.hauptnav a.aktiv{color:#fff;border-bottom-color:rgba(255,255,255,.15);background:rgba(255,255,255,.1)}}
/* Terminkasten im Inhalt ebenfalls im FI-Blau */
.artikel .termin{background:var(--fi-blau)}
.artikel .termin .tkicker{color:#dfe4ff}
.artikel .termin .twann{border-left-color:#fff}
.artikel .termin p,.artikel .termin .tveranstalter{color:rgba(255,255,255,.9)}
.artikel .termin .tunter{color:#e4e8ff}
/* Startseite: Bericht unter dem Titel */
.start-termin{background:#fff;color:var(--tinte);margin-top:30px;padding:24px 26px 22px;border-left:6px solid var(--gruen);
  box-shadow:0 14px 40px rgba(10,16,60,.25)}
.start-termin h2{font-family:var(--serif);font-size:1.45rem;line-height:1.22;margin:6px 0 10px}
.start-termin h2 a{color:var(--tinte);text-decoration:none}
.start-termin h2 a:hover{color:var(--signal)}
.start-termin .termin{margin:0}
.start-termin .tkicker{font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;color:var(--signal);font-weight:700;margin:0 0 4px}
.start-termin .tunter{font-family:var(--serif);font-style:italic;color:var(--tinte-weich);margin:0 0 12px}
.start-termin .twann{border-left:4px solid var(--signal);padding-left:14px;margin:0 0 14px;line-height:1.55}
.start-termin p{font-size:.95rem;line-height:1.6;margin:0 0 12px;color:#2f3550}
.start-termin .tveranstalter{font-size:.84rem;color:var(--tinte-weich)}
.start-termin .tveranstalter a{color:var(--signal);font-weight:600}
.start-termin figure.bild{margin:16px 0 0}
.start-termin figure.bild img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:center 20%}
.start-termin figcaption{font-size:.82rem;color:var(--tinte-weich);margin-top:8px}
.start .startgrid{align-items:start}
.start figure.raketenkuh{position:sticky;top:20px}
.artikel figure.bild.zumach img{max-width:520px}
.start-termin figure.bild img{border:0;box-shadow:none}
.marke .taube{border-radius:50%;box-shadow:0 0 0 2px #fff}
.zz-band{border-top:1px solid rgba(255,255,255,.28)}

/* ==========================================================
   Anmutung wie die bisherige fi-hunsrueck.de (13.10.2026)
   Blau #3348bf nur im Banner; graue Menüleiste mit grüner Linie,
   weiße Seite mit grünem Verlauf, hellgrüne Kästen, Trebuchet,
   Überschriften blau, Fußleiste mit blauem Verlauf.
   ========================================================== */
:root{
  --serif:"Trebuchet MS","Segoe UI",Arial,Helvetica,sans-serif;
  --sans:"Trebuchet MS","Segoe UI",Arial,Helvetica,sans-serif;
  --tinte:#474747; --tinte-weich:#6c7079;
  --papier:#ffffff; --papier-tief:#eff5e9; --linie:#d9dfcf;
  --signal:#3247be; --signal-hell:#6f80e0; --stahl:#3247be;
  --fi-blau:#3348bf; --fi-gruen:#91b827; --fi-hellgruen:#eff5e9; --fi-menue:#222691; --fi-grau:#9ea0a1;
}
body{background:#fff url("../bilder/layout/background.jpg") repeat-x 0 0;color:var(--tinte)}
a{color:var(--signal)}

/* Banner */
.kopf{background:transparent}
.kopf .kopfzeile{background:var(--fi-blau);padding-top:20px;padding-bottom:18px}
/* Menüleiste */
nav.hauptnav{background:#9a9a9a url("../bilder/layout/buttonbg_off.jpg") repeat-x 0 0;border:0;border-bottom:10px solid var(--fi-gruen)}
nav.hauptnav ul{gap:0}
nav.hauptnav li{border-right:1px solid var(--fi-grau)}
nav.hauptnav li:last-child{border-right:0}
nav.hauptnav a{color:var(--fi-menue);font-weight:400;font-size:.88rem;letter-spacing:.04em;padding:8px 22px 10px;border:0;margin:0}
nav.hauptnav a:hover,nav.hauptnav a.aktiv{background:#3a52d6 url("../bilder/layout/buttonbg_on.jpg") repeat-x 0 0;color:#fff;border:0}

/* Überschriften blau wie im Original */
h1,h2,h3,.artikel h2,.artikel h3,.abschnittkopf h2,.karte h3,.kachel h3,.termin-karte h3,.treffer-karte h3{color:var(--signal)}
.artikel{font-size:1rem;line-height:1.65}
.artikel h2{border-bottom-color:var(--linie)}
.artikelkopf.hell{background:var(--fi-hellgruen);border-bottom:0}
.artikelkopf.hell h1{color:var(--signal)}
.abschnittkopf{border-bottom:1px dotted var(--fi-grau)}
.unterzeile,.artikel .unterzeile{color:var(--tinte);font-weight:700}

/* Startseite */
.start{background:transparent;color:var(--tinte);padding:22px 0 44px}
.start .startgrid{grid-template-columns:1.2fr 1fr;gap:34px;align-items:start}
.start figure.raketenkuh{order:-1;position:static;background:var(--fi-hellgruen);padding:15px}
.start figure.raketenkuh img{border:0;box-shadow:none}
.start figure.raketenkuh figcaption{color:var(--tinte-weich)}
.start .kicker{background:var(--signal);color:#fff}
.start h1{color:var(--signal);font-size:clamp(1.9rem,3.6vw,2.6rem)}
.start .lead{color:var(--tinte);font-size:1.1rem}
.start-teaser{display:block;background:var(--fi-hellgruen);color:var(--tinte);text-decoration:none;margin-top:26px;padding:16px 18px 18px;overflow:hidden}
.start-teaser:hover{background:#e4eed9;color:var(--tinte)}
.start-teaser img{float:right;width:120px;height:120px;object-fit:cover;object-position:center 20%;margin:2px 0 8px 16px;border:3px solid #fff}
.start-teaser .rubrik{display:block;color:var(--tinte-weich);margin-bottom:6px}
.start-teaser .tt-titel{display:block;font-weight:700;font-size:1.2rem;line-height:1.3;color:var(--signal);margin-bottom:8px}
.start-teaser .tt-text{display:block;font-size:.93rem;line-height:1.5}
.start-teaser .tt-weiter{display:inline-block;margin-top:8px;color:var(--signal);font-size:.9rem}
.start-teaser:hover .tt-weiter{text-decoration:underline}

/* helle Bänder statt dunkler */
.abschnitt.dunkel,.zz-band{background:var(--fi-hellgruen);color:var(--tinte);border-top:0}
.abschnitt.dunkel h2,.abschnitt.dunkel h3{color:var(--signal)}
.abschnitt.dunkel .abschnittkopf{border-bottom-color:var(--fi-grau)}
.abschnitt.dunkel .abschnittkopf .mehr,.abschnitt.dunkel a{color:var(--signal)}
.zz-band .vorspann,.abschnitt.dunkel{color:var(--tinte)}
.zz-namen a{color:var(--signal);background:#fff;border-color:#c9d3b8}
.zz-namen a:hover{background:var(--signal);border-color:var(--signal);color:#fff}
.abschnitt.dunkel .knopf,.start .knopf,.knopf{background:var(--signal);border-color:var(--signal);color:#fff}
.abschnitt.dunkel .knopf:hover,.start .knopf:hover,.knopf:hover{background:var(--fi-menue);border-color:var(--fi-menue);color:#fff}
.abschnitt.tief{background:#f7faf2;border-color:var(--linie)}
.kicker{background:var(--signal)}

/* Klapp-Einträge wie die blauen Balken des Originals */
details.klapp{border:0;background:#fff;margin:0 0 8px}
details.klapp > summary{background:var(--signal);color:#fff;padding:9px 46px 9px 14px;border-radius:2px}
details.klapp > summary:hover{background:#2a3da8}
.artikel details.klapp summary h2{color:#fff;font-size:1rem;font-weight:700}
details.klapp > summary:after{color:#fff;top:6px;right:14px;font-size:1.4rem}
details.klapp .kteaser{color:#dfe4ff;font-size:.82rem}
details.klapp[open]{border:1px solid var(--linie)}
details.klapp .kinhalt{padding:12px 16px 16px}
.zs-erklaerung details.klapp{margin-bottom:8px}

/* Terminkasten in den Veranstaltungen: hellgrün mit blauer Kante */
.artikel .termin{background:var(--fi-hellgruen);color:var(--tinte);border-left:6px solid var(--signal);border-radius:0}
.artikel .termin .tkicker{color:var(--signal);font-weight:700}
.artikel .termin .tunter{color:var(--tinte-weich)}
.artikel .termin .twann{color:var(--tinte);border-left-color:var(--signal)}
.artikel .termin p,.artikel .termin .tveranstalter{color:var(--tinte)}
.artikel .termin a{color:var(--signal)}

/* Unternavigation als Spalte links (wie im Original) */
.seitenraster{display:grid;grid-template-columns:200px minmax(0,1fr);gap:0 36px;align-items:start;padding-top:22px;padding-bottom:10px}
.seitenraster > main{min-width:0}
.unternav{background:none;border:0;border-right:1px dotted var(--fi-grau);padding:4px 18px 30px 0;position:sticky;top:12px}
.unternav ul{display:block}
.unternav li{list-style:none}
.unternav a{display:block;padding:5px 0;color:var(--fi-grau);font-size:.95rem;font-weight:400;border:0;background:none}
.unternav a:hover{color:var(--signal);background:none}
.unternav a.aktiv{color:var(--signal);font-weight:700;border:0}
.seitenraster .artikelkopf{padding:26px 0 22px}
.seitenraster .artikelkopf .schmal,.seitenraster .artikel .schmal{max-width:820px;margin:0;padding:0 26px}
.seitenraster .artikel{padding-top:26px}

/* Fußleiste mit blauem Verlauf */
.fuss{background:#3348bf url("../bilder/layout/bottom-background2.jpg") repeat-x 0 0;color:#fff;padding-top:64px;margin-top:20px}
.fuss a{color:#fff}
.fuss h4{color:#fff}
.fussunten{color:rgba(255,255,255,.85);border-top-color:rgba(255,255,255,.3)}

/* Zeitzeugen-Kopf hell */
.zz-kopf.start{padding-top:30px}
.zz-kopf .startgrid{grid-template-columns:1fr 1fr}
.zz-kopf .vi-extern{color:var(--signal)}

@media(max-width:860px){
  nav.hauptnav{background:#8f8f8f}
  nav.hauptnav li{border-right:0;border-bottom:1px solid rgba(255,255,255,.35)}
  nav.hauptnav a{color:#fff;padding:12px 22px}
  .start .startgrid,.zz-kopf .startgrid{grid-template-columns:1fr}
  .start figure.raketenkuh{order:0}
  .seitenraster{grid-template-columns:1fr;padding-top:0}
  .unternav{position:static;border-right:0;border-bottom:1px dotted var(--fi-grau);padding:6px 0;overflow-x:auto}
  .unternav ul{display:flex;flex-wrap:nowrap;gap:0 18px}
  .unternav a{white-space:nowrap}
  .seitenraster .artikelkopf .schmal,.seitenraster .artikel .schmal{padding:0}
}
@media(max-width:560px){
  .start-teaser img{width:88px;height:88px}
}
@media(min-width:861px){nav.hauptnav ul{height:34px;overflow:hidden}nav.hauptnav a{height:34px;line-height:25px;padding:0 22px}}
body{background-size:12px 131px}
.kopf .kopfzeile{min-height:87px;box-sizing:border-box}
@media(max-width:860px){body{background:#fff}}
.artikel .quelle{font-size:.86rem;color:var(--tinte-weich);border-top:1px dotted var(--fi-grau);padding-top:10px;margin-top:2em}
.mehr-gruppe{display:flex;gap:18px;flex-wrap:wrap}
.start-teaser + .start-teaser{margin-top:14px}

/* Zeitzeugen-Band mit anklickbarem Trailerbild */
.zz-bandgrid{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:start}
.zz-bandgrid .vorspann{margin-top:0}
.zz-vorschau{position:relative;display:block;background:#fff;padding:10px;box-shadow:0 6px 18px rgba(0,0,0,.12)}
.zz-vorschau img{display:block;width:100%;height:auto}
.zz-vorschau-play{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);width:70px;height:70px;border-radius:50%;
  background:rgba(51,72,191,.92);box-shadow:0 6px 20px rgba(0,0,0,.35);transition:transform .15s}
.zz-vorschau-play:after{content:"";position:absolute;left:27px;top:21px;border-style:solid;border-width:14px 0 14px 22px;border-color:transparent transparent transparent #fff}
.zz-vorschau:hover .zz-vorschau-play{transform:translate(-50%,-50%) scale(1.08)}
.zz-vorschau-text{display:block;padding:10px 4px 2px;color:var(--signal);font-weight:700;font-size:.95rem}
.zz-vorschau:hover .zz-vorschau-text{text-decoration:underline}
@media(max-width:860px){.zz-bandgrid{grid-template-columns:1fr}}

/* Großdemo 1986 – Aufarbeitung (15.10.2026) */
.aufarbeitung-link{display:grid;grid-template-columns:220px 1fr;gap:20px;align-items:center;background:var(--fi-hellgruen);
  padding:16px;text-decoration:none;color:var(--tinte);border-left:6px solid var(--signal)}
.artikel a.aufarbeitung-link{font-weight:400}
.aufarbeitung-link:hover{background:#e4eed9;color:var(--tinte)}
.aufarbeitung-link img{width:100%;height:140px;object-fit:cover;border:3px solid #fff}
.aufarbeitung-link em{display:block;margin-top:8px;font-style:normal;font-weight:700;color:var(--signal)}
.artikel .untertitel-heft{font-size:1.1rem;color:var(--tinte);border-left:4px solid var(--signal);padding-left:14px}
.artikel .autor{color:var(--tinte-weich)}
.artikel sup.fn a{font-weight:700;font-size:.75em;text-decoration:none}
.fussnoten .fn-zurueck{text-decoration:none;margin-left:4px}
.heft-impressum{overflow:hidden}
.heft-impressum img{float:right;width:150px;height:auto;margin:0 0 10px 16px}
.heft-impressum .dok{margin-top:12px;clear:both}
@media(max-width:560px){.aufarbeitung-link{grid-template-columns:1fr}.heft-impressum img{float:none;margin:0 0 10px}}
.artikel figure.bild.zumach img{max-width:min(520px,100%)}