/* ===========================================================================
   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}}
/* Rasterfelder dürfen schrumpfen.
   Ein Rasterfeld hat von sich aus min-width:auto und wird damit nie schmaler
   als sein breitester Inhalt. Breitester Inhalt ist hier die Tabelle mit
   ihrer Mindestbreite von 520 px — und zwar auch dann, wenn sie in einem
   scrollbaren Rahmen steckt.

   Gemessen am 11.09.2026 bei 360 px Gerätebreite: Die Spalte spannte sich auf
   520 px auf, obwohl nur 326 px zur Verfügung standen. Weil body das
   waagerechte Scrollen unterdrückt, wurde der Text rechts nicht scrollbar,
   sondern abgeschnitten — auf jeder Unterseite mit Tabelle, also auf fast
   allen. Mit min-width:0 sind es wieder 326 px, und die Tabelle scrollt für
   sich allein in ihrem Rahmen. */
.layout>*{min-width:0}
.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}
/* Fließtextlinks werden grün und unterstrichen. Knöpfe dürfen davon nichts
   abbekommen: Ein .btn im Fließtext hat einen dunkelgrünen Hintergrund, und
   `.prose a` (0,1,1) schlägt `.btn` (0,1,0) — dadurch stand die Beschriftung
   grün auf grün und war praktisch unlesbar. Das :not(.btn) hält die Knöpfe
   außen vor. */
.prose a:not(.btn){color:var(--leaf-d);text-decoration:none;border-bottom:1px solid rgba(62,122,34,.35)}
.prose a:not(.btn):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}

/* ---------- Handy: engere Typografie ----------
   Dieselbe Abstufung wie auf der Startseite, damit Unterseiten sich nicht
   anders anfühlen als die Startseite. Begründung dort ausführlich; kurz:
   Bei 375 px Breite passen in eine Zeile mit 17 px Schrift und 22 px Rand
   rund 45 Zeichen — zu wenig. 16 px Schrift und 17 px Rand ergeben gut 50,
   und die Überschriften brechen nicht mehr nach zwei Wörtern um.

   Untergrenze 16 px für Fließtext und Eingabefelder: Darunter zoomt iOS
   beim Antippen von selbst in die Seite.

   Steht bewusst am Dateiende — bei gleicher Spezifität gewinnt die spätere
   Regel, und dieser Block soll die Basisregeln oben schlagen. */
@media(max-width:560px){
  body{font-size:16px;line-height:1.58}
  h1{font-size:30px;line-height:1.1;letter-spacing:-.02em}
  h2{font-size:22.5px;line-height:1.16;letter-spacing:-.018em}
  h3{font-size:18px;line-height:1.3}
  h4{font-size:15.5px}
  .wrap{padding:0 17px}
  main{padding:40px 0 56px}
  .lede{font-size:16.4px;line-height:1.6}
  .fine{font-size:13.2px}
  .eyebrow{font-size:10.2px;letter-spacing:.16em}
  .prose p,.prose li{font-size:16px;line-height:1.62}
  .prose h2{margin:36px 0 12px}
  .prose h3{margin:26px 0 9px}
  .toc{font-size:14.6px}
  .btn{padding:13px 20px;font-size:15px}
  footer ul{font-size:14.4px}
  .legal{font-size:12.4px;line-height:1.65}
  input,select,textarea{font-size:16px}
}

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