/* ===========================================================================
   GreenLife — gemeinsames Stylesheet für alle Unterseiten
   (Impressum, Datenschutz, Risikohinweise, Ratgeberseiten)

   Die Startseite index.html trägt ihr eigenes CSS inline, weil sie viele
   Bausteine hat, die sonst nirgends vorkommen (Hero, Diagramme, Rechner).
   Die Werte im :root-Block unten sind mit ihr identisch.

   >>> WENN DU HIER EINE FARBE ODER EINE SCHRIFT ÄNDERST, ÄNDERE SIE AUCH IM
   >>> :root-BLOCK VON index.html. Sonst driften Startseite und Unterseiten
   >>> auseinander, und das fällt zuerst dem auf, den man am wenigsten
   >>> verlieren will: dem aufmerksamen Leser.
   =========================================================================== */

/* ---------- Schriften (self-hosted, latin) ---------- */
@font-face{font-family:"Source Serif 4";font-style:normal;font-weight:200 900;font-display:swap;
  src:url(../fonts/source-serif-4-latin-var.woff2) format("woff2")}
@font-face{font-family:"Source Serif 4";font-style:italic;font-weight:200 900;font-display:swap;
  src:url(../fonts/source-serif-4-latin-var-italic.woff2) format("woff2")}
@font-face{font-family:Archivo;font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/archivo-latin-400.woff2) format("woff2")}
@font-face{font-family:Archivo;font-style:normal;font-weight:500;font-display:swap;
  src:url(../fonts/archivo-latin-500.woff2) format("woff2")}
@font-face{font-family:Archivo;font-style:normal;font-weight:600;font-display:swap;
  src:url(../fonts/archivo-latin-600.woff2) format("woff2")}
@font-face{font-family:Archivo;font-style:normal;font-weight:700;font-display:swap;
  src:url(../fonts/archivo-latin-700.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/ibm-plex-mono-latin-400.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;
  src:url(../fonts/ibm-plex-mono-latin-500.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:600;font-display:swap;
  src:url(../fonts/ibm-plex-mono-latin-600.woff2) format("woff2")}

/* ---------- Design-Tokens ---------- */
:root{
  --forest:#163F37; --forest-d:#0F2E28; --night:#14322B; --night2:#1A3B32;
  --ivory:#F7F5F0; --ivory2:#EFEBE2; --paper:#FCFBF8; --white:#FFFFFF;
  --ink:#101A17; --ink2:#33403B; --mut:#5E6B65;
  --line:#DFDACE; --line2:#EAE6DB; --lineD:#224036;
  --amber:#C9832F; --amber-l:#E3A85C; --amber-bg:#FBF1E1;
  --leaf:#54A12F; --leaf-d:#3E7A22;
  --red:#96302A; --red-bg:#F8EAE7;
  --maxw:1200px; --r:10px;
  --sh1:0 1px 2px rgba(11,31,27,.05);
  --sh2:0 2px 6px rgba(11,31,27,.06),0 18px 40px -28px rgba(11,31,27,.5);
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- Basis ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);
  font:450 17px/1.62 Archivo,ui-sans-serif,system-ui,"Segoe UI",Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3{margin:0;font-family:"Source Serif 4","Iowan Old Style",Palatino,Georgia,serif;
  font-optical-sizing:auto;font-weight:600;line-height:1.06;letter-spacing:-.015em;text-wrap:balance}
h1{font-size:clamp(32px,4.6vw,52px);line-height:1.04}
h2{font-size:clamp(25px,3.1vw,36px);line-height:1.12}
h3{font-size:20px;line-height:1.28}
h1 em,h2 em,h3 em{font-style:italic;font-weight:600;color:var(--amber)}
h4{margin:0;font:600 16.5px/1.3 Archivo,sans-serif;letter-spacing:-.01em}
p{margin:0}
a{color:var(--leaf-d)}
img{max-width:100%;height:auto;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
.eyebrow{font:500 11px/1.5 "IBM Plex Mono",ui-monospace,Menlo,monospace;
  letter-spacing:.2em;text-transform:uppercase;color:var(--amber)}
.mono{font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace;font-variant-numeric:tabular-nums}
.skip{position:absolute;left:-9999px}
.skip:focus{left:14px;top:14px;z-index:200;background:var(--forest);color:#fff;padding:12px 18px;border-radius:6px}
:focus-visible{outline:2.5px solid var(--amber);outline-offset:3px}
::selection{background:var(--amber);color:#fff}
.logo{height:30px;width:auto}
.logo.on-dark{filter:brightness(0) invert(1)}
@media(min-width:700px){.logo{height:34px}}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border:0;cursor:pointer;
  text-decoration:none;white-space:nowrap;background:var(--forest);color:#F7F5F0;
  font:600 16px/1.2 Archivo,sans-serif;padding:15px 26px;border-radius:var(--r);box-shadow:var(--sh1);
  transition:transform .25s var(--ease),background .25s var(--ease),box-shadow .25s var(--ease)}
.btn:hover{background:var(--forest-d);transform:translateY(-1px);box-shadow:var(--sh2)}
.btn:active{transform:translateY(0)}
.btn .ar{transition:transform .28s var(--ease)}
.btn:hover .ar{transform:translateX(3px)}
.btn.amber{background:var(--amber);color:#1B1105}
.btn.amber:hover{background:var(--amber-l)}
.btn.line{background:transparent;color:var(--forest);box-shadow:inset 0 0 0 1.5px var(--line)}
.btn.line:hover{box-shadow:inset 0 0 0 1.5px var(--forest);background:rgba(22,63,55,.04)}
.btn.sm{padding:10px 17px;font-size:14.5px}
@media(pointer:coarse){.btn.sm{padding:13px 18px}}

/* ---------- Kopfzeile (Unterseiten: immer deckend, kein Hero darunter) ---------- */
.hdr{background:var(--night);position:sticky;top:0;z-index:100;box-shadow:0 1px 0 var(--lineD)}
.hdr .in{display:flex;align-items:center;gap:22px;height:72px;max-width:var(--maxw);margin:0 auto;padding:0 22px}
.hdr nav{display:none;gap:24px;margin-left:auto}
@media(min-width:1060px){.hdr nav{display:flex}}
.hdr nav a{position:relative;white-space:nowrap;font:600 14.8px/1 Archivo,sans-serif;color:#D5E2DB;text-decoration:none;padding:5px 0}
.hdr nav a::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:1.5px;background:var(--amber);transition:right .3s var(--ease)}
.hdr nav a:hover::after,.hdr nav a:focus-visible::after{right:0}
.hdr nav a:hover{color:#fff}
.hdr .act{margin-left:auto;display:flex;gap:10px;align-items:center}
@media(min-width:1060px){.hdr .act{margin-left:16px}}

/* ---------- Seitenkopf ---------- */
.pagehead{background:var(--night);color:#EDF2EE;padding:52px 0 58px}
.pagehead h1{color:#F5F8F4}
.pagehead .lede{margin-top:16px;max-width:62ch;color:#B9CCC2;font-size:17.5px;font-weight:450}
.crumb{font:500 11px/1.5 "IBM Plex Mono",monospace;letter-spacing:.16em;text-transform:uppercase;color:#8CA096;margin-bottom:14px}
.crumb a{color:#8CA096;text-decoration:none;border-bottom:1px solid transparent}
.crumb a:hover{color:var(--amber);border-bottom-color:var(--amber)}

/* ---------- Fließtext ---------- */
main{padding:56px 0 72px}
.layout{display:grid;grid-template-columns:1fr;gap:40px}
@media(min-width:960px){.layout{grid-template-columns:230px 1fr;gap:56px;align-items:start}}
.prose{max-width:72ch}
.prose h2{margin:44px 0 14px;scroll-margin-top:88px}
.prose h2:first-child{margin-top:0}
.prose h3{margin:30px 0 10px;scroll-margin-top:88px}
.prose p{margin:0 0 15px;color:var(--ink2)}
.prose p strong,.prose li strong{color:var(--ink);font-weight:600}
.prose ul,.prose ol{margin:0 0 16px;padding-left:22px;color:var(--ink2)}
.prose li{margin-bottom:8px}
.prose a{color:var(--leaf-d);text-decoration:none;border-bottom:1px solid rgba(62,122,34,.35)}
.prose a:hover{border-bottom-color:var(--leaf-d)}
.prose hr{border:0;border-top:1px solid var(--line);margin:40px 0}

/* Definitionsliste für Angaben wie im Impressum */
.dl{display:grid;grid-template-columns:1fr;gap:0;margin:0 0 20px;border-top:1px solid var(--line)}
.dl div{display:grid;grid-template-columns:1fr;gap:2px;padding:14px 0;border-bottom:1px solid var(--line2)}
@media(min-width:640px){.dl div{grid-template-columns:210px 1fr;gap:18px;align-items:baseline}}
.dl dt{font:500 11.5px/1.7 "IBM Plex Mono",monospace;letter-spacing:.06em;color:var(--mut);text-transform:uppercase}
.dl dd{margin:0;color:var(--ink)}

/* ---------- Inhaltsverzeichnis ---------- */
.toc{position:sticky;top:96px;font-size:14.6px}
.toc h4{font:500 10.5px/1 "IBM Plex Mono",monospace;letter-spacing:.18em;text-transform:uppercase;color:var(--amber);margin-bottom:14px}
.toc ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;counter-reset:t}
.toc a{color:var(--ink2);text-decoration:none;border-left:2px solid var(--line);padding:5px 0 5px 12px;display:block;transition:color .2s,border-color .2s}
.toc a:hover{color:var(--forest);border-left-color:var(--amber)}
@media(max-width:959px){.toc{position:static;border:1px solid var(--line);border-radius:var(--r);padding:20px;background:var(--white)}}

/* ---------- Bausteine ---------- */
.chip{display:inline-flex;align-items:center;gap:7px;font:500 10.5px/1 "IBM Plex Mono",monospace;
  letter-spacing:.13em;text-transform:uppercase;padding:6px 10px;border-radius:4px;border:1px solid}
.chip::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.chip.ist{color:var(--forest);border-color:#A9C4B8;background:#E6EFE9}
.chip.mod{color:var(--amber);border-color:#E2CBA4;background:var(--amber-bg)}
.chip.todo{color:var(--red);border-color:#DFB3AC;background:var(--red-bg)}
.ph{display:inline-block;font:600 10.5px/1.6 "IBM Plex Mono",monospace;background:var(--red-bg);
  color:var(--red);border:1px solid #DFB3AC;padding:2px 7px;border-radius:4px}
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:22px;margin:22px 0}
.card h4{margin-bottom:8px}
.card p{font-size:15.4px;color:var(--ink2)}
.note{background:var(--ivory);border-left:3px solid var(--amber);border-radius:0 var(--r) var(--r) 0;
  padding:18px 22px;margin:24px 0}
.note p{margin:0;font-size:15.6px;color:var(--ink2)}
.note p+p{margin-top:10px}
.fine{margin-top:16px;font-size:13.9px;font-weight:450;color:var(--mut);max-width:76ch;line-height:1.6}
.tablewrap{overflow-x:auto;margin:22px 0;-webkit-overflow-scrolling:touch}
@media(max-width:700px){
  /* Breite Tabellen wandern seitlich statt zu schrumpfen — mit sichtbarem Hinweis,
     sonst übersieht man die Hälfte der Spalten. */
  .tablewrap::after{content:"seitlich scrollbar →";display:block;margin-top:6px;
    font:500 11.5px/1.4 "IBM Plex Mono",monospace;color:var(--mut)}
}
table{border-collapse:collapse;width:100%;font-size:15.2px;min-width:520px}
th,td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line2);vertical-align:top}
th{font:600 13px/1.4 Archivo,sans-serif;color:var(--forest);border-bottom:1px solid var(--line);
  text-transform:uppercase;letter-spacing:.05em}
td{color:var(--ink2)}

/* ---------- Fußzeile ---------- */
footer{background:#0F2620;color:#B4C7BD;padding:56px 0 44px}
footer a{color:#DCE7E1;text-decoration:none;border-bottom:1px solid transparent}
footer a:hover{border-bottom-color:var(--amber)}
footer .cols{display:grid;grid-template-columns:1fr;gap:30px}
@media(min-width:820px){footer .cols{grid-template-columns:1.7fr 1fr 1fr}}
footer h4{margin:0 0 13px;font:500 10.5px/1 "IBM Plex Mono",monospace;letter-spacing:.18em;
  text-transform:uppercase;color:var(--amber)}
footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;font-size:15px}
footer ul a{display:inline-block;padding:7px 0}
.legal{margin-top:42px;padding-top:26px;border-top:1px solid #24443A;font-size:13px;line-height:1.7;color:#9AB0A5}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
}