/* EcoKarte — sachlich: graues Umfeld, weißes Blatt, Anthrazit, eckige Formen */
:root{--text:#1f2326;--grau:#5f666d;--linie:#d5d8db;--umfeld:#e8eaec;--blatt:#fff;--anthrazit:#2b3035;--gruen:#3d6b55;--gruen-d:#2c5141;--gelb:#e5a50a;--gelb-h:#fbf1d6;--rot:#b3261e;--df:Bahnschrift,"DIN Alternate","DIN Next","Roboto Condensed","Arial Narrow","Segoe UI",Arial,sans-serif}
*,*::before,*::after{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--umfeld);color:var(--text);font:16px/1.6 "Segoe UI",Roboto,"Helvetica Neue",Arial,"Liberation Sans",sans-serif}
a{color:var(--gruen-d);text-underline-offset:2px}a:hover{color:var(--anthrazit)}
h1,h2,h3,h4{font-family:var(--df);font-weight:700;line-height:1.2;margin:0 0 .5em;letter-spacing:0}
h1{font-size:clamp(1.6rem,1.2rem + 1.8vw,2.3rem)}h2{font-size:clamp(1.22rem,1.05rem + .7vw,1.5rem)}h3{font-size:1.06rem}
p{margin:0 0 1em}small,.gedaempft{color:var(--grau)}
.blatt,.inhalt-breite{max-width:1080px;margin:0 auto;padding:0 22px}
.sprung{position:absolute;left:-999px}.sprung:focus{left:10px;top:10px;z-index:50;background:#fff;padding:8px 12px;outline:2px solid var(--anthrazit)}
/* Kopf: weiße Leiste + anthrazitfarbene Reiterleiste, alles im Blatt */
.kopf,.auftakt,.seitenkopf,main,.fuss{max-width:1124px;margin-left:auto;margin-right:auto}
.kopf-leiste{background:var(--blatt);border-top:4px solid var(--gelb)}
.kopf-leiste .blatt{display:flex;align-items:center;gap:20px;min-height:66px}
.marke{display:inline-flex;align-items:center;gap:10px;color:var(--anthrazit);text-decoration:none;white-space:nowrap}
.zeichen{width:36px;height:36px;flex:none}
.schriftzug{font:700 1.3rem var(--df);letter-spacing:.01em}.schriftzug b{font-weight:400;color:var(--gruen)}
.kopfsuche{margin-left:auto;width:340px}
.navigation{background:var(--anthrazit)}
.navigation ul{display:flex;list-style:none;margin:0;padding:0}
.navigation a{display:block;padding:11px 18px;color:#e9ecee;text-decoration:none;font:600 .95rem var(--df);border-right:1px solid #41474d}
.navigation li:first-child a{border-left:1px solid #41474d}
.navigation a:hover{background:#3a4046;color:#fff}
.navigation a.aktion{background:var(--gelb);color:#1f1a08}.navigation a.aktion:hover{background:#f0b52a}
.navigation li:last-child{margin-left:auto}
@media(max-width:900px){.kopfsuche{display:none}}
@media(max-width:560px){.navigation a{padding:10px 11px;font-size:.88rem}.navigation li:first-child a{border-left:0}}
/* Suche */
.suche{position:relative}
.suche-feld{display:flex;border:1px solid #9aa1a8;background:#fff}
.suche-feld:focus-within{outline:2px solid var(--gruen);outline-offset:-1px}
.suche input{flex:1;min-width:0;border:0;outline:0;padding:11px 12px;font:inherit;color:var(--text);background:transparent}
.suche button{border:0;border-left:1px solid #9aa1a8;background:var(--gruen);color:#fff;padding:0 18px;font:600 .95rem var(--df);cursor:pointer}
.suche button:hover{background:var(--gruen-d)}
.kopfsuche input{padding:8px 10px}
.vorschlaege{display:none;position:absolute;left:0;right:0;top:100%;z-index:30;margin:0;padding:0;list-style:none;background:#fff;border:1px solid #9aa1a8;border-top:0;box-shadow:0 8px 18px rgba(0,0,0,.12);color:var(--text)}
.vorschlaege.offen{display:block}.vorschlaege li{display:flex;justify-content:space-between;gap:10px;padding:8px 12px;cursor:pointer;border-top:1px solid #eceef0}
.vorschlaege li small{white-space:nowrap}.vorschlaege li.aktiv,.vorschlaege li:hover{background:#eef3f0}
/* Auftakt / Seitenkopf */
.auftakt{background:var(--blatt);padding:38px 0 40px;border-bottom:1px solid var(--linie)}
.auftakt h1{max-width:820px}.einleitung{font-size:1.08rem;color:#3a4046;max-width:800px}
.auftakt .suche{max-width:620px;margin-top:20px}.auftakt .suche input{padding:14px 14px;font-size:1.04rem}
.seitenkopf{background:var(--blatt);padding:22px 0 26px;border-bottom:1px solid var(--linie)}
.seitenkopf .einleitung{margin:0}
.pfad{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px;font-size:.85rem;color:var(--grau)}.pfad a{color:var(--grau)}
main{background:var(--blatt);padding:8px 0 40px}
/* Abschnitte: nummerierte Gliederung durch Linien */
.abschnitt{padding:26px 0 24px;border-top:1px solid var(--linie)}
main>.abschnitt:first-child,main>:first-child{border-top:0}
.abschnitt>h2{padding-bottom:8px;border-bottom:2px solid var(--anthrazit);display:inline-block}
/* Kennzahlen */
.kennzahlen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;margin:20px 0 0;border:1px solid var(--linie)}
@media(min-width:821px){.kennzahlen{grid-template-columns:repeat(4,minmax(0,1fr))}}
.kennzahl{padding:12px 14px;border-right:1px solid var(--linie);border-bottom:1px solid var(--linie);background:#fafbfb}
.kennzahl b{display:block;font:700 1.55rem var(--df);color:var(--anthrazit);font-variant-numeric:tabular-nums}
.kennzahl span{display:block;font-size:.85rem;line-height:1.4;color:var(--grau)}
.zweispaltig,.dreispaltig{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
@media(min-width:821px){.zweispaltig{grid-template-columns:repeat(2,minmax(0,1fr))}.dreispaltig{grid-template-columns:repeat(3,minmax(0,1fr))}}
.kachel{display:block;padding:14px 16px;border:1px solid var(--linie);border-left:4px solid var(--gruen);background:#fff;color:var(--text);text-decoration:none}
a.kachel:hover{background:#f4f7f5;color:var(--text)}
.kachel h3{color:var(--gruen-d)}
/* Tabellen: Gitterlinien */
table{width:100%;border-collapse:collapse;font-size:.94rem}
th,td{padding:8px 10px;text-align:left;vertical-align:top;border:1px solid var(--linie)}
th{background:#eceef0;color:var(--text);font:600 .86rem var(--df)}
td.zahl,th.zahl{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.tabelle-rahmen{overflow-x:auto;-webkit-overflow-scrolling:touch}
.sortierbar th{cursor:pointer;user-select:none}.sortierbar th[aria-sort]::after{content:" ↕";opacity:.5}
.hinweis{font-size:.88rem;color:var(--grau)}
.kasten{margin:14px 0;padding:12px 14px;border:1px solid var(--linie);border-left-width:4px;font-size:.95rem;background:#fafbfb}
.kasten.info{border-left-color:var(--gruen)}.kasten.achtung{border-left-color:var(--gelb);background:var(--gelb-h)}.kasten.warnung{border-left-color:var(--rot);background:#fbecea}.kasten p:last-child{margin:0}
.balken{display:flex;gap:3px;align-items:flex-end;height:150px;margin:8px 0 4px;border-bottom:1px solid var(--anthrazit)}
.balken div{position:relative;flex:1;min-height:2px;background:var(--gelb)}
.balken div span{position:absolute;top:-19px;left:0;right:0;text-align:center;font-size:.72rem;color:var(--grau)}
.balken-beschriftung{display:flex;gap:3px}.balken-beschriftung span{flex:1;text-align:center;font-size:.75rem;color:var(--grau)}
.klassen{display:grid;gap:4px;margin:8px 0}
.klassen .reihe{display:grid;grid-template-columns:28px 1fr 64px;gap:8px;align-items:center;font-size:.9rem}
.klassen .lbl{padding:1px 0;text-align:center;color:#fff;font:700 .95rem var(--df)}
.klassen .spur{height:18px;overflow:hidden;background:#eceef0}.klassen .spur i{display:block;height:100%}
.klassen .wert{text-align:right;font-variant-numeric:tabular-nums}
.cA{background:#009c6d}.cB{background:#52b153}.cC{background:#a5cc74}.cD{background:#f4e70f}.cE{background:#f0b50f}.cF{background:#eb8235}.cG{background:#d7221f}
.klassen .cD,.klassen .cC{color:#222}
.marker{display:inline-block;margin:2px 4px 2px 0;padding:1px 7px;border:1px solid var(--linie);background:#f4f5f6;color:#3a4046;font-size:.78rem;font-weight:600}
.marker.gruen{border-color:#b9cfc3;background:#edf4f0;color:var(--gruen-d)}
.betrieb{padding:11px 0;border-top:1px solid var(--linie)}.betrieb:first-of-type{border-top:0}.betrieb b{font-size:1rem}.betrieb .angaben{font-size:.86rem;color:var(--grau)}
.reiter{display:flex;flex-wrap:wrap;margin:0 0 12px;border-bottom:2px solid var(--anthrazit)}
.reiter button{margin-bottom:-2px;padding:8px 14px;border:1px solid var(--linie);border-bottom:2px solid var(--anthrazit);background:#f4f5f6;color:var(--text);font:600 .9rem var(--df);cursor:pointer}
.reiter button+button{border-left:0}
.reiter button[aria-selected=true]{background:var(--anthrazit);border-color:var(--anthrazit);color:#fff}
.reiter-inhalt[hidden]{display:none}
.linkliste{columns:3 200px;column-gap:20px}.linkliste a{display:block;padding:3px 0;break-inside:avoid}
.schaltflaeche{display:inline-block;padding:11px 20px;border:0;background:var(--gelb);color:#1f1a08;font:700 1rem var(--df);text-decoration:none;cursor:pointer}
.schaltflaeche:hover{background:#f0b52a;color:#1f1a08}.schaltflaeche.zweitrangig{background:var(--anthrazit);color:#fff}
/* Rechner */
.rechenblatt{display:grid;gap:24px}@media(min-width:821px){.rechenblatt{grid-template-columns:repeat(2,minmax(0,1fr))}}
.rechenblatt label{display:block;margin:0 0 4px;font:600 .92rem var(--df)}.rechenblatt .feld{margin-bottom:14px}
.rechenblatt input,.rechenblatt select,.einleitung input,.einleitung select,.einleitung textarea{width:100%;padding:9px 10px;border:1px solid #9aa1a8;border-radius:0;background:#fff;font:inherit;color:var(--text)}
.rechenblatt input:focus,.rechenblatt select:focus,.einleitung input:focus,.einleitung select:focus,.einleitung textarea:focus{outline:2px solid var(--gruen);outline-offset:-1px}
.rechenblatt .feld small{display:block;margin-top:3px;font-size:.82rem;color:var(--grau)}
.ergebnis{padding:16px 18px;border:1px solid var(--linie);border-top:4px solid var(--gruen);background:#fafbfb}
.ergebnis .betrag{font:700 2.1rem var(--df);color:var(--gruen-d)}
.ergebnis dl{display:grid;grid-template-columns:1fr auto;gap:0;margin:10px 0 0;border-top:1px solid var(--linie)}
.ergebnis dt,.ergebnis dd{padding:6px 0;border-bottom:1px solid var(--linie)}.ergebnis dt{color:var(--grau)}.ergebnis dd{margin:0;text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
.einleitung fieldset{border:0;padding:0;margin:0}.einleitung .feld{margin-bottom:12px}.einleitung label{display:block;margin-bottom:4px;font-weight:600}
.einleitung [disabled]{background:#eceef0;color:#7a8187;cursor:not-allowed}
.fragen details{padding:11px 0;border-top:1px solid var(--linie)}.fragen summary{font-weight:600;cursor:pointer}.fragen details p{margin:.6em 0 0}
.quelle{margin-top:14px;padding-top:8px;border-top:1px solid var(--linie);font-size:.84rem;color:var(--grau)}
.hinweis-fr{margin-top:18px;padding:12px 14px;border:1px solid var(--linie);font-size:.88rem}.hinweis-fr a{display:inline;text-decoration:underline}
.anzeige{margin:18px 0;text-align:center}.anzeige small{display:block;font-size:.7rem;color:var(--grau)}
.rang{font-weight:700;color:var(--gruen-d)}
.anbieter-img{display:block;width:auto;max-width:100%;height:auto;margin:0 0 1em}
/* Grafiken */
figure.grafik{margin:14px 0 6px}figure.grafik figcaption{margin-top:6px;font-size:.8rem;color:var(--grau)}
.diagramm,.karte{display:block;width:100%;max-width:600px;height:auto;font-family:"Segoe UI",Roboto,Arial,sans-serif}.karte{max-width:620px;margin:0 auto}
.diagramm text,.karte text{font-size:11px;fill:#3a4046}.diagramm .lbl{text-anchor:middle}.diagramm .wert{text-anchor:middle;font-size:10px;fill:#6d747a}
.diagramm .fett{font-weight:700}.diagramm .y-achse,.diagramm .lbl-rechts{text-anchor:end}.diagramm .lbl-links{text-anchor:start;font-weight:700}.diagramm .wert-klein,.karte .wert-klein{font-size:10.5px}
.karte a:hover path,.karte a:hover circle,.karte a:focus circle{stroke:var(--anthrazit);stroke-width:2}
.q0{fill:#fdf3d4}.q1{fill:#f7d77a}.q2{fill:#e5a50a}.q3{fill:#c27c06}.q4{fill:#8a5604}
.h0{fill:#fbe7e5}.h1{fill:#f2b3ad}.h2{fill:#e27a70}.h3{fill:#c9433a}.h4{fill:#8f1f18}
/* Fuß */
.fuss{background:var(--anthrazit);color:#c5cacf;font-size:.9rem;border-top:4px solid var(--gelb)}
.fuss .blatt{padding-top:30px;padding-bottom:18px}
.fuss-raster{display:grid;gap:22px}@media(min-width:821px){.fuss-raster{grid-template-columns:1.4fr 1fr 1fr 1fr}}
.fuss .marke{color:#fff}.fuss .schriftzug b{color:#a9c9b8}
.fuss-marke-block p{margin:12px 0 0;max-width:320px}
.fuss-spalte h4{margin:0 0 8px;padding-bottom:6px;border-bottom:1px solid #4a5157;color:#fff;font-size:.95rem}
.fuss-spalte ul{list-style:none;margin:0;padding:0}.fuss-spalte li{padding:2px 0}
.fuss a{color:#e3e6e9;text-decoration:none}.fuss a:hover{color:#fff;text-decoration:underline}
.fuss-zeile{margin-top:22px;padding-top:12px;border-top:1px solid #4a5157;font-size:.82rem;color:#a7adb3}.fuss-zeile p{margin:0 0 4px}
main.inhalt-breite{max-width:1124px;padding-left:max(22px,calc((100% - 1036px)/2));padding-right:max(22px,calc((100% - 1036px)/2))}