/* =========================================================
   CO2-Kompass.ch — Design-System
   Palette: ruhig, seriös, vertrauensvoll (Teal-Grün)
   Schrift: Fraunces (Überschriften) + Inter (Fliesstext)
   Raster: 8px-Basis
   ========================================================= */

:root {
  /* Farben — abgestimmt auf die Logofarben (Oliv-Grün + Anthrazit) */
  --gruen: #a5be3e;          /* Markengrün: Flächen, Logo, Akzentfüllungen */
  --gruen-hover: #93ac2f;    /* dunklere Variante für Button-Hover */
  --text: #3b3b39;           /* Anthrazit (Logo-Grau, etwas dunkler für Lesbarkeit) */
  --text-leise: #6b6b67;
  --akzent: #5f7018;         /* dunkles Oliv: Links, Eyebrows, Icons (kontraststark auf Weiss) */
  --akzent-dunkel: #4a5711;  /* Hover für Textlinks */
  --flaeche-leise: #f4f7ea;
  --flaeche-alt: #f8faf2;
  --linie: #e5e8d8;
  --weiss: #ffffff;
  --dunkel: #2d2f28;         /* warmes Anthrazit für Hero/Footer */
  --dunkel-text: #eef1e6;
  --dunkel-leise: #adb09f;
  --warnung: #b45309;
  --erfolg: #4d6b1e;

  /* Abstände (8px-Skala) */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
  --s-9: 80px; --s-10: 120px;

  /* Radius & Schatten */
  --radius: 10px;
  --radius-s: 8px;
  --schatten-klein: 0 1px 2px rgb(16 32 44 / .06), 0 2px 8px rgb(16 32 44 / .04);
  --schatten-gross: 0 2px 4px rgb(16 32 44 / .06), 0 12px 32px rgb(16 32 44 / .10);

  /* Layout */
  --breite: 1160px;
  --breite-text: 760px;
}

/* ---------- Reset / Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  color: var(--text);
  background: var(--weiss);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: "Fraunces", Georgia, "Times New Roman", serif;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 var(--s-4);
  letter-spacing: -.01em;
}
h1 { font-size: clamp(2rem, 5vw + 1rem, 3.4rem); line-height: 1.08; letter-spacing: -.02em; }
h2 { font-size: clamp(1.5rem, 3vw + .5rem, 2.25rem); line-height: 1.2; }
h3 { font-size: 1.25rem; line-height: 1.3; font-family: "Inter", sans-serif; font-weight: 600; letter-spacing: -.01em; }
h4 { font-size: 1.0625rem; line-height: 1.35; font-family: "Inter", sans-serif; font-weight: 600; }

p { margin: 0 0 var(--s-4); }
a { color: var(--akzent); text-decoration: none; }
a:hover { color: var(--akzent-dunkel); text-decoration: underline; }
strong { font-weight: 600; color: var(--text); }
img { max-width: 100%; height: auto; display: block; }

/* ---------- Layout-Hilfen ---------- */
.container { width: 100%; max-width: var(--breite); margin: 0 auto; padding: 0 var(--s-5); }
.schmal { max-width: var(--breite-text); }
.abschnitt { padding: var(--s-9) 0; }
.abschnitt-alt { background: var(--flaeche-alt); }
.abschnitt-leise { background: var(--flaeche-leise); }
@media (max-width: 640px) {
  .abschnitt { padding: var(--s-7) 0; }
}

.eyebrow {
  display: inline-block;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--akzent);
  margin-bottom: var(--s-3);
}
.lead { font-size: 1.1875rem; color: var(--text-leise); max-width: 62ch; }
.text-leise { color: var(--text-leise); }
.zentriert { text-align: center; }
.zentriert .lead { margin-left: auto; margin-right: auto; }
.max-65 { max-width: 65ch; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  font-family: "Inter", sans-serif; font-size: 1rem; font-weight: 600;
  padding: 14px 28px; min-height: 48px;
  border-radius: var(--radius-s); border: 1.5px solid transparent;
  cursor: pointer; transition: background-color .15s ease, border-color .15s ease, color .15s ease;
  text-decoration: none; line-height: 1;
}
.btn:hover { text-decoration: none; }
.btn-primaer { background: var(--gruen); color: var(--dunkel); }
.btn-primaer:hover { background: var(--gruen-hover); color: var(--dunkel); }
.btn-sekundaer { background: transparent; color: var(--akzent); border-color: var(--linie); }
.btn-sekundaer:hover { background: var(--flaeche-leise); color: var(--akzent-dunkel); border-color: var(--akzent); }
.btn-hell { background: #fff; color: var(--dunkel); }
.btn-hell:hover { background: var(--flaeche-leise); color: var(--dunkel); }
.btn:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, button:focus-visible {
  outline: 3px solid var(--akzent);
  outline-offset: 2px;
}
.btn-hinweis { display: block; font-size: .9375rem; color: var(--text-leise); margin-top: var(--s-3); }

/* ---------- Kopfbereich / Navigation ---------- */
.kopf {
  position: sticky; top: 0; z-index: 50;
  background: rgb(255 255 255 / .92); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--linie);
}
.kopf-inner { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.marke { display: inline-flex; align-items: center; color: var(--text); }
.marke:hover { text-decoration: none; }
.marke svg { flex: none; }
.logo-svg { height: 30px; width: auto; display: block; }
.logo-svg-fuss { height: 30px; }
@media (max-width: 420px) { .logo-svg { height: 26px; } }
.logo-img { height: 26px; width: auto; display: block; }
@media (max-width: 420px) { .logo-img { height: 23px; } }
.logo-chip { display: inline-block; background: #fff; padding: 8px 13px; border-radius: 10px; margin-bottom: var(--s-4); }
.logo-chip .logo-img { height: 24px; }
.nav { display: flex; align-items: center; gap: var(--s-6); }
.nav a.nav-link { color: var(--text); font-weight: 500; font-size: .9875rem; }
.nav a.nav-link:hover { color: var(--akzent); text-decoration: none; }
.nav a.nav-link[aria-current="page"] { color: var(--akzent); }
.nav-toggle { display: none; }
.nav-btn { display: none; }

@media (max-width: 860px) {
  .nav-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border: 1px solid var(--linie); border-radius: var(--radius-s);
    background: #fff; cursor: pointer; color: var(--text);
  }
  .nav {
    position: absolute; top: 72px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #fff; border-bottom: 1px solid var(--linie);
    padding: var(--s-3) var(--s-5) var(--s-5);
    box-shadow: var(--schatten-gross);
    display: none;
  }
  .nav-toggle:checked ~ .nav { display: flex; }
  .nav a.nav-link { padding: var(--s-4) 0; border-bottom: 1px solid var(--linie); font-size: 1.0625rem; }
  .nav .btn { margin-top: var(--s-4); }
}

/* ---------- Hero ---------- */
.hero { background: var(--dunkel); color: var(--dunkel-text); position: relative; overflow: hidden; }
.hero::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(120% 120% at 100% 0%, rgb(165 190 62 / .30) 0%, transparent 55%);
  pointer-events: none;
}
.hero .container { position: relative; z-index: 1; padding-top: var(--s-10); padding-bottom: var(--s-10); }
.hero h1 { color: #fff; max-width: 18ch; }
.hero .eyebrow { color: #c3d86a; }
.hero p.lead { color: var(--dunkel-text); max-width: 56ch; }
.hero-aktionen { display: flex; flex-wrap: wrap; gap: var(--s-4); margin-top: var(--s-6); align-items: center; }
.hero-belege { margin-top: var(--s-8); padding-top: var(--s-6); border-top: 1px solid rgb(255 255 255 / .14); display: flex; flex-wrap: wrap; gap: var(--s-7); }
.hero-beleg { max-width: 24ch; }
.hero-beleg .zahl { font-family: "Fraunces", serif; font-size: 1.75rem; color: #fff; display: block; line-height: 1.1; }
.hero-beleg .txt { font-size: .9375rem; color: var(--dunkel-leise); }
@media (max-width: 640px) {
  .hero .container { padding-top: var(--s-8); padding-bottom: var(--s-8); }
  .hero-belege { gap: var(--s-5); }
}

/* ---------- Raster / Karten ---------- */
.raster { display: grid; gap: var(--s-5); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.raster-2 { display: grid; gap: var(--s-5); grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.karte {
  background: #fff; border: 1px solid var(--linie); border-radius: var(--radius);
  padding: var(--s-6); box-shadow: var(--schatten-klein);
}
.karte h3 { margin-bottom: var(--s-3); }
.karte p:last-child { margin-bottom: 0; }
.karte-symbol {
  width: 48px; height: 48px; border-radius: var(--radius-s);
  background: var(--flaeche-leise); color: var(--akzent);
  display: flex; align-items: center; justify-content: center; margin-bottom: var(--s-5);
}
.karte-nr {
  font-family: "Fraunces", serif; font-size: 1.5rem; color: var(--akzent);
  display: block; margin-bottom: var(--s-3);
}

/* ---------- Situations-/Relevanzblock ---------- */
.situation { display: flex; gap: var(--s-4); align-items: flex-start; }
.situation .haken { flex: none; color: var(--akzent); margin-top: 2px; }
.situation h4 { margin-bottom: var(--s-1); }
.situation p { margin-bottom: 0; color: var(--text-leise); font-size: .9875rem; }

/* ---------- Liste mit Haken ---------- */
.haken-liste { list-style: none; padding: 0; margin: var(--s-4) 0; }
.haken-liste li { position: relative; padding-left: var(--s-6); margin-bottom: var(--s-3); color: var(--text-leise); }
.haken-liste li::before {
  content: ""; position: absolute; left: 0; top: 9px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--akzent);
}

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--linie); }
.faq details { border-bottom: 1px solid var(--linie); padding: var(--s-5) 0; }
.faq summary {
  font-weight: 600; font-size: 1.0625rem; cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); color: var(--text);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.5rem; color: var(--akzent); font-weight: 400; line-height: 1; flex: none; }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin: var(--s-4) 0 0; color: var(--text-leise); max-width: 70ch; }

/* ---------- Hinweis-Box ---------- */
.hinweis {
  border-left: 3px solid var(--akzent); background: var(--flaeche-leise);
  padding: var(--s-5) var(--s-5) var(--s-5) var(--s-5); border-radius: 0 var(--radius-s) var(--radius-s) 0;
}
.hinweis.platzhalter { border-left-color: var(--warnung); background: #fdf6ee; }
.hinweis p:last-child { margin-bottom: 0; }
.hinweis .label { font-size: .8125rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--warnung); display: block; margin-bottom: var(--s-2); }

/* ---------- CTA-Band ---------- */
.cta-band { background: var(--dunkel); color: var(--dunkel-text); }
.cta-band h2 { color: #fff; }
.cta-band p { color: var(--dunkel-text); }

/* ---------- Formular ---------- */
.formular { display: grid; gap: var(--s-4); }
.feld { display: grid; gap: var(--s-2); }
.feld label { font-weight: 600; font-size: .9375rem; }
.feld .pflicht { color: var(--akzent); }
.feld input, .feld textarea, .feld select {
  font-family: inherit; font-size: 1rem; color: var(--text);
  padding: 12px 14px; min-height: 48px; border: 1px solid var(--linie); border-radius: var(--radius-s);
  background: #fff; width: 100%;
}
.feld textarea { min-height: 140px; resize: vertical; }
.feld-reihe { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.checkbox-reihe { display: flex; gap: var(--s-3); align-items: flex-start; font-size: .9375rem; color: var(--text-leise); }
.checkbox-reihe input { width: 20px; height: 20px; min-height: 0; margin-top: 2px; flex: none; }
.formular-erfolg {
  display: none; background: #eefaf3; border: 1px solid #bce3cd; color: #14532d;
  padding: var(--s-5); border-radius: var(--radius-s);
}
.formular-erfolg.sichtbar { display: block; }

/* ---------- Info-Zeile / Kontaktdaten ---------- */
.kontakt-zeile { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-4); }
.kontakt-zeile svg { flex: none; color: var(--akzent); }

/* ---------- Fusszeile ---------- */
.fuss { background: var(--dunkel); color: var(--dunkel-leise); padding: var(--s-9) 0 var(--s-6); }
.fuss a { color: var(--dunkel-text); }
.fuss a:hover { color: #fff; }
.fuss-raster { display: grid; gap: var(--s-6); grid-template-columns: 1.5fr 1fr 1fr; }
.fuss h4 { color: #fff; font-size: .875rem; letter-spacing: .06em; text-transform: uppercase; margin-bottom: var(--s-4); }
.fuss ul { list-style: none; padding: 0; margin: 0; }
.fuss li { margin-bottom: var(--s-3); }
.fuss .marke { color: #fff; margin-bottom: var(--s-4); }
.fuss-unten {
  margin-top: var(--s-8); padding-top: var(--s-5); border-top: 1px solid rgb(255 255 255 / .12);
  display: flex; flex-wrap: wrap; gap: var(--s-4); justify-content: space-between; font-size: .875rem;
}
@media (max-width: 720px) { .fuss-raster { grid-template-columns: 1fr; gap: var(--s-6); } }

/* ---------- Breadcrumb / Seitentitel ---------- */
.seitenkopf { background: var(--flaeche-leise); border-bottom: 1px solid var(--linie); padding: var(--s-8) 0; }
.seitenkopf h1 { font-size: clamp(1.9rem, 4vw + 1rem, 2.9rem); max-width: 20ch; }
.seitenkopf .lead { margin-bottom: 0; }

/* ---------- Skip-Link ---------- */
.skip { position: absolute; left: -9999px; top: 0; background: #fff; color: var(--akzent); padding: var(--s-3) var(--s-4); z-index: 100; }
.skip:focus { left: var(--s-4); top: var(--s-4); }

/* ---------- Divider ---------- */
.abschnitt-titel { max-width: 60ch; margin-bottom: var(--s-7); }
.abschnitt-titel.zentriert { margin-left: auto; margin-right: auto; }

/* ---------- Breadcrumb ---------- */
.brotkrumen { font-size: .9375rem; color: var(--text-leise); margin-bottom: var(--s-4); }
.brotkrumen a { color: var(--text-leise); }
.brotkrumen a:hover { color: var(--akzent); }
.brotkrumen span { color: var(--linie); margin: 0 var(--s-2); }

/* ---------- Wissens-Hub-Karten ---------- */
.wissen-karte { display: flex; flex-direction: column; }
.wissen-karte .tag {
  display: inline-block; align-self: flex-start; font-size: .75rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--akzent);
  background: var(--flaeche-leise); padding: 4px 10px; border-radius: 999px; margin-bottom: var(--s-4);
}
.wissen-karte h3 { margin-bottom: var(--s-2); }
.wissen-karte p { color: var(--text-leise); font-size: .9875rem; flex-grow: 1; }
.wissen-karte .weiter { font-weight: 600; font-size: .9375rem; margin-top: var(--s-3); }
.wissen-karte a.stretch::after { content: ""; position: absolute; inset: 0; }
.wissen-karte { position: relative; transition: border-color .15s ease, box-shadow .15s ease; }
.wissen-karte:hover { border-color: var(--akzent); box-shadow: var(--schatten-gross); }

/* ---------- Artikel-Layout ---------- */
.artikel { max-width: 760px; }
.artikel h2 { margin-top: var(--s-8); }
.artikel h3 { margin-top: var(--s-6); }
.artikel p, .artikel li { color: var(--text); }
.artikel .lead { color: var(--text-leise); margin-bottom: var(--s-6); }
.artikel ul, .artikel ol { padding-left: var(--s-5); margin: 0 0 var(--s-4); }
.artikel li { margin-bottom: var(--s-2); }
.artikel .quelle { font-size: .875rem; color: var(--text-leise); }

/* Inhaltsverzeichnis */
.toc { background: var(--flaeche-leise); border: 1px solid var(--linie); border-radius: var(--radius); padding: var(--s-5); margin-bottom: var(--s-7); }
.toc h4 { margin-bottom: var(--s-3); font-size: .8125rem; letter-spacing: .06em; text-transform: uppercase; color: var(--text-leise); }
.toc ul { list-style: none; padding: 0; margin: 0; }
.toc li { margin-bottom: var(--s-2); }
.toc a { font-weight: 500; }

/* Glossar */
.glossar { margin-top: var(--s-6); }
.glossar-eintrag { border-top: 1px solid var(--linie); padding: var(--s-5) 0; }
.glossar-eintrag:last-child { border-bottom: 1px solid var(--linie); }
.glossar-eintrag dt { font-family: "Fraunces", serif; font-size: 1.25rem; font-weight: 600; color: var(--text); margin-bottom: var(--s-2); }
.glossar-eintrag dd { margin: 0; color: var(--text-leise); }
.glossar-nav { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: var(--s-5) 0; }
.glossar-nav a {
  display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px;
  padding: 0 10px; border: 1px solid var(--linie); border-radius: var(--radius-s);
  font-weight: 600; font-size: .9375rem; background: #fff;
}
.glossar-nav a:hover { border-color: var(--akzent); text-decoration: none; }

/* Zeitachse */
.zeitachse { list-style: none; padding: 0; margin: var(--s-6) 0 0; position: relative; }
.zeitachse::before { content: ""; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 2px; background: var(--linie); }
.zeitachse li { position: relative; padding: 0 0 var(--s-6) var(--s-7); }
.zeitachse li::before { content: ""; position: absolute; left: 0; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: var(--akzent); border: 3px solid #fff; box-shadow: 0 0 0 1px var(--linie); }
.zeitachse .datum { display: block; font-family: "Fraunces", serif; font-weight: 600; color: var(--akzent); margin-bottom: 2px; }
.zeitachse .titel { font-weight: 600; }
.zeitachse p { color: var(--text-leise); margin: var(--s-1) 0 0; font-size: .9875rem; }

/* Definition-Box im Artikel */
.def-box { background: var(--flaeche-leise); border-left: 3px solid var(--akzent); border-radius: 0 var(--radius-s) var(--radius-s) 0; padding: var(--s-4) var(--s-5); margin: var(--s-5) 0; }
.def-box p { margin: 0; }

/* ---------- Figuren / Grafiken ---------- */
.figur { margin: var(--s-6) 0 0; }
.figur svg { width: 100%; height: auto; display: block; }
.figur figcaption { font-size: .9rem; color: var(--text-leise); margin-top: var(--s-3); text-align: center; }
.figur-rahmen { background: #fff; border: 1px solid var(--linie); border-radius: var(--radius); padding: var(--s-6); }
.abschnitt-leise .figur-rahmen, .abschnitt-alt .figur-rahmen { background: #fff; }

/* ---------- Foto-Platzhalter ---------- */
.bild-platzhalter {
  position: relative; background: var(--flaeche-leise); border: 2px dashed var(--linie);
  border-radius: var(--radius); display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  color: var(--text-leise); padding: var(--s-6); min-height: 220px;
}
.bild-platzhalter .label { font-size: .8125rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--akzent); margin-bottom: var(--s-2); }
.bild-platzhalter .mass { font-size: .8125rem; margin-top: var(--s-2); opacity: .8; }
.bild-platzhalter svg { color: var(--gruen); margin-bottom: var(--s-3); }
.bild-platzhalter.rund { border-radius: 50%; width: 168px; height: 168px; min-height: 0; padding: var(--s-4); margin-bottom: var(--s-5); }

/* Porträtfoto (rund) */
.portrait {
  width: 168px; height: 168px; border-radius: 50%; object-fit: cover;
  margin-bottom: var(--s-5); background: var(--flaeche-leise); border: 1px solid var(--linie);
}

/* Hero mit Bild */
.hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: var(--s-8); align-items: center; }
.hero-bild {
  background: rgb(255 255 255 / .06); border: 2px dashed rgb(255 255 255 / .28);
  color: var(--dunkel-leise); min-height: 300px;
}
.hero-bild .label { color: #c3d86a; }
.hero-bild svg { color: #c3d86a; }
@media (max-width: 820px) {
  .hero-grid { grid-template-columns: 1fr; gap: var(--s-6); }
  .hero-bild { min-height: 200px; }
}