/* waermepreis-chemnitz.de — self-hosted, keine externen Ressourcen */

:root {
  --akzent: #b93a10;        /* warmes Rot-Orange (Wärme/Alarm) */
  --akzent-dunkel: #8f2c0b;
  --tinte: #22272e;
  --tinte-hell: #4b5563;
  --papier: #fcfaf6;
  --karte: #ffffff;
  --linie: #e5e0d8;
  --info: #f4efe6;
  --gut: #1a7f37;
  --warn-bg: #fff7ed;
  --warn-rand: #f0c48c;
  --fakt-bg: #f0f4f8;
  --fakt-rand: #b9cbdd;
  --meinung-bg: #f7f1fb;
  --meinung-rand: #cdb4e2;
  --radius: 10px;
  --schrift: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--schrift);
  font-size: 1.075rem;
  line-height: 1.65;
  color: var(--tinte);
  background: var(--papier);
}
.wrap { max-width: 62rem; margin: 0 auto; padding: 0 1.25rem; }

.skip { position: absolute; left: -9999px; top: 0; background: var(--akzent); color: #fff; padding: .5rem 1rem; z-index: 99; }
.skip:focus { left: 0; }

/* ---------- Kopf ---------- */
.kopf { background: var(--karte); border-bottom: 3px solid var(--akzent); }
.kopf-zeile { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; padding-top: .8rem; padding-bottom: .8rem; }
.marke { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--tinte); }
.marke strong { display: block; font-size: 1.2rem; letter-spacing: -.01em; }
.marke small { display: block; color: var(--akzent); font-weight: 600; }
.logo { width: 2.2rem; height: 2.2rem; fill: var(--akzent); flex: none; }
.nav { display: flex; flex-wrap: wrap; gap: .25rem .35rem; align-items: center; }
.nav a { text-decoration: none; color: var(--tinte); padding: .45rem .7rem; border-radius: 999px; font-weight: 500; }
.nav a:hover { background: var(--info); }
.nav a[aria-current] { background: var(--info); font-weight: 700; }
.nav-cta { background: var(--akzent); color: #fff !important; font-weight: 700; }
.nav-cta:hover { background: var(--akzent-dunkel) !important; }
.subnav { display: flex; flex-wrap: wrap; gap: .25rem; padding: 0 0 .7rem; }
.subnav a { font-size: .92rem; text-decoration: none; color: var(--tinte-hell); padding: .25rem .6rem; border: 1px solid var(--linie); border-radius: 999px; background: var(--karte); }
.subnav a:hover { border-color: var(--akzent); color: var(--akzent); }
.subnav a[aria-current] { background: var(--akzent); border-color: var(--akzent); color: #fff; }

/* ---------- Typografie ---------- */
main { padding: 2.2rem 1.25rem 3rem; }
h1 { font-size: clamp(1.7rem, 4.5vw, 2.5rem); line-height: 1.2; letter-spacing: -.015em; margin: 0 0 .6rem; }
h2 { font-size: 1.45rem; margin: 2.2rem 0 .6rem; letter-spacing: -.01em; }
h3 { font-size: 1.15rem; margin: 1.6rem 0 .4rem; }
p { margin: .7rem 0; }
a { color: var(--akzent-dunkel); }
a:hover { color: var(--akzent); }
.vorspann { font-size: 1.22rem; color: var(--tinte-hell); margin: 0 0 1.4rem; }
ul, ol { padding-left: 1.4rem; }
li { margin: .35rem 0; }
figure { margin: 1.5rem 0; }
figcaption, .quelle { font-size: .88rem; color: var(--tinte-hell); }
hr { border: 0; border-top: 1px solid var(--linie); margin: 2rem 0; }

/* ---------- Boxen: Fakt / Bewertung / Hinweis ---------- */
.fakt, .bewertung, .hinweis, .erfolg {
  border-radius: var(--radius);
  padding: .9rem 1.1rem;
  margin: 1.1rem 0;
  border: 1px solid;
}
.fakt { background: var(--fakt-bg); border-color: var(--fakt-rand); }
.fakt::before { content: "Fakt — belegt"; }
.bewertung { background: var(--meinung-bg); border-color: var(--meinung-rand); }
.bewertung::before { content: "Unsere Bewertung"; }
.hinweis { background: var(--warn-bg); border-color: var(--warn-rand); }
.hinweis::before { content: "Wichtiger Hinweis"; }
.erfolg { background: #ecfdf3; border-color: #9dd6ae; }
.fakt::before, .bewertung::before, .hinweis::before {
  display: block; font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
  margin-bottom: .3rem; color: var(--tinte-hell);
}
.fehler { background: #fdf0ef; border: 1px solid #e4a9a3; border-radius: var(--radius); padding: .9rem 1.1rem; margin: 1.1rem 0; }

/* ---------- Kennzahlen ---------- */
.kennzahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1rem; margin: 1.6rem 0; }
.kennzahl { background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius); padding: 1.1rem 1.2rem; }
.kennzahl .wert { display: block; font-size: 2rem; font-weight: 800; color: var(--akzent); letter-spacing: -.02em; }
.kennzahl .label { color: var(--tinte-hell); font-size: .95rem; }

/* ---------- Karten & Weiche ---------- */
.karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; margin: 1.4rem 0; }
.karte { background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius); padding: 1.2rem 1.3rem; }
.karte h3 { margin-top: 0; }
.karte a.mehr { font-weight: 600; text-decoration: none; }
.weiche { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; margin: 1.6rem 0; }
.weiche a {
  display: block; text-decoration: none; background: var(--karte);
  border: 2px solid var(--akzent); border-radius: var(--radius); padding: 1.2rem 1.3rem; color: var(--tinte);
}
.weiche a:hover { background: var(--warn-bg); }
.weiche strong { display: block; font-size: 1.2rem; color: var(--akzent-dunkel); margin-bottom: .3rem; }

/* ---------- Buttons & Formulare ---------- */
.btn, button.btn {
  display: inline-block; background: var(--akzent); color: #fff; border: 0; cursor: pointer;
  font: inherit; font-weight: 700; padding: .65rem 1.2rem; border-radius: 999px; text-decoration: none;
}
.btn:hover { background: var(--akzent-dunkel); color: #fff; }
.btn-zweit { background: transparent; color: var(--akzent-dunkel); border: 2px solid var(--akzent); }
.btn-zweit:hover { background: var(--warn-bg); color: var(--akzent-dunkel); }
.btn-reihe { display: flex; flex-wrap: wrap; gap: .7rem; margin: 1.2rem 0; }

form.block { background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius); padding: 1.3rem; margin: 1.4rem 0; }
label { display: block; font-weight: 600; margin: .8rem 0 .25rem; }
input[type="text"], input[type="email"], input[type="number"], input[type="date"], input[type="password"], select, textarea {
  width: 100%; font: inherit; padding: .55rem .7rem; border: 1px solid #c9c2b6; border-radius: 8px; background: #fff; color: var(--tinte);
}
input:focus, select:focus, textarea:focus { outline: 3px solid #f2c9b3; border-color: var(--akzent); }
.feld-reihe { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .8rem; }
.checkbox { display: flex; gap: .6rem; align-items: flex-start; font-weight: 400; margin: .8rem 0; }
.checkbox input { margin-top: .3rem; width: auto; }
.pflicht { color: var(--akzent); }
.hp { position: absolute !important; left: -9999px !important; height: 1px; overflow: hidden; } /* Honeypot */

/* ---------- Tabellen ---------- */
.tabelle-scroll { overflow-x: auto; margin: 1.2rem 0; }
table { border-collapse: collapse; width: 100%; background: var(--karte); font-size: .98rem; }
th, td { text-align: left; padding: .55rem .7rem; border-bottom: 1px solid var(--linie); vertical-align: top; }
thead th { background: var(--info); font-size: .88rem; text-transform: uppercase; letter-spacing: .04em; }
td.zahl, th.zahl { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
tr.hervor { background: var(--warn-bg); font-weight: 700; }

/* ---------- Fortschritt (Petition) ---------- */
/* Breite über Stufen-Klassen statt Inline-Style (strikte CSP ohne unsafe-inline) */
.fortschritt { background: var(--linie); border-radius: 999px; height: 1.4rem; overflow: hidden; margin: .8rem 0; }
.fortschritt > div { background: var(--gut); height: 100%; min-width: 2%; width: 0; }
.fortschritt > .b5 { width: 5%; } .fortschritt > .b10 { width: 10%; } .fortschritt > .b15 { width: 15%; }
.fortschritt > .b20 { width: 20%; } .fortschritt > .b25 { width: 25%; } .fortschritt > .b30 { width: 30%; }
.fortschritt > .b35 { width: 35%; } .fortschritt > .b40 { width: 40%; } .fortschritt > .b45 { width: 45%; }
.fortschritt > .b50 { width: 50%; } .fortschritt > .b55 { width: 55%; } .fortschritt > .b60 { width: 60%; }
.fortschritt > .b65 { width: 65%; } .fortschritt > .b70 { width: 70%; } .fortschritt > .b75 { width: 75%; }
.fortschritt > .b80 { width: 80%; } .fortschritt > .b85 { width: 85%; } .fortschritt > .b90 { width: 90%; }
.fortschritt > .b95 { width: 95%; } .fortschritt > .b100 { width: 100%; }
.news { margin-bottom: 1rem; }
.zaehler { font-size: 1.15rem; }
.zaehler strong { font-size: 1.6rem; color: var(--gut); }

/* ---------- Zeitleiste ---------- */
.zeitleiste { list-style: none; padding: 0; margin: 1.4rem 0; border-left: 3px solid var(--akzent); }
.zeitleiste li { margin: 0 0 1.1rem; padding: 0 0 0 1.1rem; position: relative; }
.zeitleiste li::before { content: ""; position: absolute; left: -.55rem; top: .45rem; width: .8rem; height: .8rem; border-radius: 50%; background: var(--akzent); }
.zeitleiste time { font-weight: 800; color: var(--akzent-dunkel); display: block; font-size: .95rem; }

/* ---------- Schritte ---------- */
.schritte { counter-reset: schritt; list-style: none; padding: 0; }
.schritte > li { counter-increment: schritt; background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius); padding: 1.1rem 1.2rem 1.1rem 3.6rem; margin: 1rem 0; position: relative; }
.schritte > li::before {
  content: counter(schritt); position: absolute; left: 1rem; top: 1rem;
  width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--akzent); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 800;
}
.schritte h3 { margin-top: 0; }

/* ---------- FAQ ---------- */
details { background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius); padding: .8rem 1.1rem; margin: .7rem 0; }
summary { font-weight: 700; cursor: pointer; }
details[open] summary { color: var(--akzent-dunkel); }

/* ---------- Fußnoten / Quellen ---------- */
.quellen { font-size: .9rem; color: var(--tinte-hell); border-top: 1px solid var(--linie); margin-top: 2.4rem; padding-top: 1rem; }
.quellen h2 { font-size: 1.05rem; margin-top: 0; }
.quellen ol { padding-left: 1.2rem; }
.quellen li { margin: .25rem 0; }
sup a { text-decoration: none; font-weight: 700; }

/* ---------- Musterbrief ---------- */
.brief-ausgabe { width: 100%; min-height: 26rem; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .92rem; }
.ergebnis { background: var(--karte); border: 2px solid var(--gut); border-radius: var(--radius); padding: 1.1rem 1.2rem; margin: 1.2rem 0; }
.ergebnis .gross { font-size: 1.9rem; font-weight: 800; color: var(--akzent); }

/* ---------- Fuß ---------- */
.fuss { background: var(--tinte); color: #d5d9de; margin-top: 3rem; }
.fuss a { color: #fff; text-decoration: none; }
.fuss a:hover { text-decoration: underline; }
.fuss h2 { font-size: .95rem; text-transform: uppercase; letter-spacing: .06em; color: #9aa3ad; margin: 0 0 .6rem; }
.fuss ul { list-style: none; padding: 0; margin: 0; }
.fuss li { margin: .3rem 0; }
.fuss-spalten { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 1.5rem; padding: 2rem 1.25rem 1rem; }
.fuss-hinweis { font-size: .85rem; color: #9aa3ad; }
.fuss-unten { padding: 0 1.25rem 1.6rem; font-size: .9rem; color: #9aa3ad; }

/* ---------- Druck (Musterbriefe u. a.) ---------- */
@media print {
  .kopf, .fuss, .btn, .btn-reihe, .subnav, form.block, .nav { display: none !important; }
  body { background: #fff; font-size: 11pt; }
  main { padding: 0; }
  .brief-ausgabe { border: 0; min-height: auto; font-family: inherit; }
}

@media (max-width: 640px) {
  body { font-size: 1rem; }
  .kennzahl .wert { font-size: 1.6rem; }
}