/* Stile für /blog/ — dieselben Marken und dieselbe Formensprache wie die
   Startseite (dort inline), hier als eigene Datei, damit sie nicht in jeder
   Unterseite dupliziert wird. Die Farben sind die Endzustandsfarben aus dem
   Auswertungswerkzeug, keine freie Wahl. */
:root{
  --papier:#F2F4F3;
  --blatt:#FFFFFF;
  --tinte:#16211E;
  --gedaempft:#5E706A;
  --linie:#D6DEDA;
  --akzent:#0E6E5C;
  --akzent-hell:#E3EFEB;

  --unbewegt:#166534;
  --laeuft:#8A4B00;
  --laeuft-bg:#FDF3E3;
  --endet:#9B1C1C;
  --endet-bg:#FBE9E9;

  --mass:1.5rem;
  --schiene:clamp(2.5rem,6vw,5.5rem);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --papier:#0E1614; --blatt:#141F1C; --tinte:#E7EEEB; --gedaempft:#93A6A0;
    --linie:#26332F; --akzent:#4FBBA1; --akzent-hell:#172B26;
    --unbewegt:#54B87A; --laeuft:#D69A54; --laeuft-bg:#332616; --endet:#E08585; --endet-bg:#3A1E1E;
  }
}
:root[data-theme="dark"]{
  --papier:#0E1614; --blatt:#141F1C; --tinte:#E7EEEB; --gedaempft:#93A6A0;
  --linie:#26332F; --akzent:#4FBBA1; --akzent-hell:#172B26;
  --unbewegt:#54B87A; --laeuft:#D69A54; --laeuft-bg:#332616; --endet:#E08585; --endet-bg:#3A1E1E;
}

@font-face{font-family:'Archivo';font-style:normal;font-weight:400 700;
  font-display:swap;src:url(/static/fonts/archivo-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Archivo';font-style:normal;font-weight:400 700;
  font-display:swap;src:url(/static/fonts/archivo-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 700;
  font-display:swap;src:url(/static/fonts/jetbrains-mono-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:400 600;
  font-display:swap;src:url(/static/fonts/newsreader-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:400 600;
  font-display:swap;src:url(/static/fonts/newsreader-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Newsreader';font-style:italic;font-weight:400;
  font-display:swap;src:url(/static/fonts/newsreader-italic-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

*{box-sizing:border-box}
body{margin:0; background:var(--papier); color:var(--tinte);
  font-family:Archivo,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:17px; line-height:1.62; -webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:Newsreader,Georgia,"Times New Roman",serif; font-weight:500;
  text-wrap:balance; margin:0; letter-spacing:-.008em}
h1{font-size:clamp(1.9rem,4.2vw,2.9rem); line-height:1.1; letter-spacing:-.018em}
h2{font-size:clamp(1.35rem,2.4vw,1.75rem); line-height:1.18; margin:2.4rem 0 .8rem}
p{margin:0 0 1.1rem}
a{color:var(--akzent)}

.marke{font-family:"JetBrains Mono",ui-monospace,monospace; font-size:.68rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--gedaempft)}

/* ─── Beweisschiene: dieselbe Formensprache wie auf der Startseite ───────── */
.blatt{max-width:1180px; margin:0 auto; padding:0 var(--mass); position:relative}
.abschnitt{position:relative; padding:clamp(2rem,5vw,3.5rem) 0 clamp(3rem,7vw,5rem) var(--schiene)}
.abschnitt::before{content:""; position:absolute; left:calc(var(--schiene) / 2.6);
  top:0; bottom:0; width:1px; background:var(--linie)}
.abschnitt::after{content:""; position:absolute; left:calc(var(--schiene) / 2.6 - 4px);
  top:clamp(2rem,5vw,3.5rem); width:9px; height:9px; background:var(--papier);
  border:1.5px solid var(--akzent); transform:rotate(45deg)}
@media (max-width:720px){
  :root{--schiene:1.6rem}
  .abschnitt::before,.abschnitt::after{display:none}
  .abschnitt{padding-left:0}
}

/* ─── Kopf ───────────────────────────────────────────────────────────────── */
.kopf{display:flex; flex-wrap:wrap; gap:.9rem 1.4rem; align-items:baseline; padding:1.5rem 0 0}
.wortmarke{font-family:Newsreader,Georgia,serif; font-size:1.06rem; font-weight:600;
  letter-spacing:-.01em; color:var(--tinte); text-decoration:none;
  display:inline-flex; align-items:center; gap:.55rem}
.wortmarke-text span{color:var(--akzent)}
/* Bildmarke: eine Zahlung, die sich verzweigt und in zwei Endzuständen endet -
   dieselbe Formensprache wie die Beweisschiene und die Spur im Kopfbereich.
   Die Knotenfarben sind die Endzustandsfarben aus der Legende, folgen also
   automatisch dem Hell-/Dunkelmodus. */
.zeichen{flex:none; width:34px; height:28px; overflow:visible}
.zeichen .spur{stroke:var(--gedaempft); opacity:.5}
@media (max-width:720px){ .zeichen{width:30px; height:25px} }
.kopf nav{margin-left:auto; display:flex; gap:1.3rem; flex-wrap:wrap}
.kopf nav a{font-size:.9rem; color:var(--gedaempft); text-decoration:none;
  border-bottom:1px solid transparent; padding-bottom:2px}
.kopf nav a:hover,.kopf nav a:focus-visible{color:var(--tinte); border-bottom-color:var(--akzent)}

.menu-schalter{position:absolute; opacity:0; pointer-events:none}
.menuknopf{display:none}
@media (max-width:720px){
  .menuknopf{display:inline-flex; align-items:center; gap:.5rem; margin-left:auto;
    border:1px solid var(--linie); border-radius:2px; padding:.5rem .9rem;
    background:var(--blatt); color:var(--tinte); font-size:.85rem; cursor:pointer; user-select:none}
  .menu-schalter:focus-visible + .menuknopf{outline:2px solid var(--akzent); outline-offset:2px}
  .kopf nav{margin-left:0; display:none; flex-direction:column; align-items:stretch;
    width:100%; gap:0; border-top:1px solid var(--linie); margin-top:.9rem; padding-top:.2rem}
  .kopf nav a{padding:.75rem .1rem; border-bottom:1px solid var(--linie)}
  .menu-schalter:checked ~ nav{display:flex}
}

/* ─── Beitrag ────────────────────────────────────────────────────────────── */
.brotkrumen{font-size:.82rem; color:var(--gedaempft); margin-bottom:1rem}
.brotkrumen a{color:var(--gedaempft)}
.beitrag{max-width:46em}
.vorspann{font-size:clamp(1.02rem,1.7vw,1.18rem); color:var(--gedaempft); margin-top:1rem}
.beitrag h1 + .vorspann{margin-top:1.1rem}

.punkte{list-style:none; padding:0; margin:0 0 1.2rem; display:grid; gap:.7rem}
.punkte li{padding-left:1.3rem; position:relative}
.punkte li::before{content:""; position:absolute; left:0; top:.62em; width:6px; height:6px;
  background:var(--akzent); transform:rotate(45deg)}

.kasten{background:var(--blatt); border:1px solid var(--linie); border-left:3px solid var(--akzent);
  padding:1.1rem 1.3rem; border-radius:2px; margin:0 0 1.3rem; font-size:.97rem}
.kasten.gefahr{border-left-color:var(--endet); background:var(--endet-bg); color:var(--endet)}
.kasten.gefahr a{color:inherit}
.kasten.warnung{border-left-color:var(--laeuft); background:var(--laeuft-bg); color:var(--laeuft)}
.kasten.warnung a{color:inherit}
.kasten.hinweis{border-left-color:var(--gedaempft); color:var(--gedaempft); font-size:.9rem}

.quellen li{font-size:.92rem}
.quellen li::before{background:var(--gedaempft)}
/* Herkunftsangabe: wer hier schreibt, woher die Aussagen stammen, wie man uns
   erreicht. Für Leser wie für Suchmaschinen die Einordnung, die einem reinen
   Ratgebertext sonst fehlt. */
.herkunft{margin-top:2.6rem; padding:1.2rem 1.4rem; border:1px solid var(--linie);
  border-left:3px solid var(--gedaempft); border-radius:2px; background:var(--blatt);
  font-size:.9rem; color:var(--gedaempft)}
.herkunft p{margin:0 0 .7rem}
.herkunft p:last-child{margin-bottom:0}
.zurueck{margin-top:2.4rem; display:flex; flex-wrap:wrap; gap:.8rem}
.knopf{display:inline-block; padding:.78rem 1.4rem; text-decoration:none; font-weight:500;
  font-size:.95rem; border-radius:2px; border:1.5px solid var(--akzent);
  background:var(--akzent); color:var(--papier); transition:transform .12s ease}
.knopf:hover{transform:translateY(-1px)}
.knopf.leer{background:transparent; color:var(--akzent)}
.knopf:focus-visible,.kopf nav a:focus-visible{outline:2px solid var(--akzent); outline-offset:3px}

/* ─── Übersicht ──────────────────────────────────────────────────────────── */
.karten{display:grid; gap:1px; background:var(--linie); border:1px solid var(--linie);
  grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); margin-top:2.2rem;
  border-radius:2px; overflow:hidden}
.karte{background:var(--blatt); padding:1.4rem 1.5rem 1.6rem; text-decoration:none; color:inherit;
  display:block; transition:background .12s ease}
.karte:hover,.karte:focus-visible{background:var(--akzent-hell)}
.karte h3{font-size:1.14rem; margin:.5rem 0 .5rem; line-height:1.3}
.karte p{font-size:.93rem; color:var(--gedaempft); margin:0}

/* ─── Fuß ────────────────────────────────────────────────────────────────── */
.fuss{border-top:1px solid var(--linie); margin-top:3rem; padding:2.2rem 0 3rem;
  display:grid; gap:1.2rem; font-size:.86rem; color:var(--gedaempft)}
.fuss a{color:var(--gedaempft)}
.fuss .zeilen{display:flex; flex-wrap:wrap; gap:.4rem 1.4rem}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important; transition-duration:.01ms !important}
}