/* Wohnkosten-Rechner – Gestaltung (Stand 12.11.2026)
   Eine Schriftfamilie (Public Sans, lokal, SIL Open Font License), eine Akzentfarbe (Indigo),
   keine fremden Dateien, keine Cookies. */
@font-face {
  font-family: "Public Sans";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(schrift/public-sans.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Public Sans";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(schrift/public-sans-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0, U+2113, U+A720-A7FF;
}

/* Ersatzschrift mit angepassten Maßen, damit beim Nachladen der Schrift nichts springt (gemessen 12.11.2026) */
@font-face {
  font-family: "Public Sans Ersatz";
  src: local("Arial"), local("Helvetica"), local("Liberation Sans");
  size-adjust: 102.3%;
  ascent-override: 92.9%;
  descent-override: 22%;
  line-gap-override: 0%;
}
:root {
  --grund: #f5f6f8;
  --karte: #ffffff;
  --tinte: #15171c;
  --text: #2b2f38;
  --grau: #4b5260;
  --rahmen: #858b97;
  --klein: .875rem;
  --hell: #8a909c;
  --linie: #e2e5ea;
  --linie-stark: #cfd4dc;
  --akzent: #3b3fc4;
  --akzent-dunkel: #2b2e9a;
  --akzent-weich: #eef0fd;
  --akzent-mittel: #c9cdf6;
  --warn: #9a5b00;
  --warn-weich: #fff6e5;
  --schrift: "Public Sans", "Public Sans Ersatz", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --rund: 14px;
  --rund-klein: 10px;
  --schatten: 0 1px 2px rgba(21, 23, 28, .04), 0 4px 16px rgba(21, 23, 28, .05);
  --luft: 64px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--kopf-h, 64px); }
body { margin: 0; background: var(--grund); color: var(--text); font: 400 18px/1.6 var(--schrift); font-variant-numeric: lining-nums; }
img, svg { max-width: 100%; }
a { color: var(--akzent); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--akzent-dunkel); }
h1, h2, h3 { color: var(--tinte); line-height: 1.2; font-weight: 700; letter-spacing: -.015em; }
h1 { font-size: clamp(1.85rem, 4.6vw, 2.75rem); margin: .3em 0 .35em; letter-spacing: -.025em; }
h2 { font-size: clamp(1.35rem, 3vw, 1.75rem); margin: 0 0 .6em; }
h3 { font-size: 1.25rem; margin: 1.4em 0 .4em; }
p { margin: 0 0 1em; }
ul, ol { padding-left: 1.3em; }
li { margin: .25em 0; }
strong { color: var(--tinte); font-weight: 650; }
.breite { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.schmal { max-width: 760px; }
.sprung { position: absolute; left: -9999px; }
.sprung:focus { left: 8px; top: 8px; background: #fff; padding: 8px 12px; z-index: 30; }
.klein { font-size: .875rem; color: var(--grau); }
.einleitung { font-size: 1.12rem; color: var(--grau); max-width: 44rem; }
.sym { width: 1.1em; height: 1.1em; flex: none; vertical-align: -.18em; }

/* ---------- Kopf (fest oben; Höhe wird per Skript in --kopf-h gemessen) ---------- */
.kopf { position: sticky; top: 0; z-index: 20; background: rgba(255, 255, 255, .96); border-bottom: 1px solid var(--linie); backdrop-filter: saturate(1.4) blur(6px); }
.kopf-innen { display: flex; align-items: center; gap: 24px; min-height: 64px; }
.marke { color: var(--tinte); text-decoration: none; font-weight: 750; font-size: 1.08rem; letter-spacing: -.01em; display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
.marke:hover { color: var(--tinte); }
.marke-zeichen { width: 30px; height: 30px; border-radius: 8px; background: var(--akzent); display: grid; place-items: center; }
.marke-zeichen svg { width: 18px; height: 18px; }
.haupt { display: flex; gap: 4px; margin-left: auto; font-size: .95rem; }
.haupt a { color: var(--text); text-decoration: none; padding: 8px 12px; border-radius: 8px; font-weight: 500; }
.haupt a:hover, .haupt a[aria-current="page"] { background: var(--akzent-weich); color: var(--akzent-dunkel); }
.menue { display: none; margin-left: auto; position: relative; }
.menue summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--linie-stark); border-radius: 8px; font-weight: 600; font-size: .95rem; color: var(--tinte); }
.menue summary::-webkit-details-marker { display: none; }
.menue nav { position: absolute; right: 0; top: calc(100% + 8px); width: min(300px, calc(100vw - 32px)); background: #fff; border: 1px solid var(--linie); border-radius: var(--rund); box-shadow: 0 12px 32px rgba(21, 23, 28, .14); padding: 8px; display: grid; }
.menue nav a { padding: 11px 12px; border-radius: 8px; text-decoration: none; color: var(--tinte); font-weight: 500; }
.menue nav a:hover { background: var(--akzent-weich); }
@media (max-width: 860px) {
  .haupt { display: none; }
  .menue { display: block; }
  .kopf-innen { min-height: 56px; gap: 12px; }
}

.pfadleiste ol { list-style: none; padding: 0; margin: 20px auto 0; display: flex; flex-wrap: wrap; gap: 2px; font-size: var(--klein); color: var(--grau); }
.pfadleiste li { margin: 0; }
.pfadleiste a { color: var(--grau); text-decoration: none; }
.pfadleiste a:hover { color: var(--akzent); text-decoration: underline; }
.pfadleiste li + li::before { content: "/"; margin: 0 8px 0 6px; color: var(--linie-stark); }

main { padding-bottom: 24px; }
main > h2 { margin-top: var(--luft); }
main > h1:first-child { margin-top: 36px; }
main > .rechner { margin-bottom: 8px; }

/* ---------- Abschnitte ---------- */
.abschnitt { margin: var(--luft) 0 0; }
.abschnitt > h2:first-child, .abschnitt-kopf h2 { margin-top: 0; }
.abschnitt-kopf { margin-bottom: 24px; max-width: 46rem; }
.abschnitt-kopf p { color: var(--grau); margin: 0; }
.ueberzeile { display: block; font-size: var(--klein); font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--akzent); margin: 0 0 8px; }
.band { background: var(--karte); box-shadow: 0 0 0 100vmax var(--karte); clip-path: inset(0 -100vmax); padding: 48px 0; }

/* ---------- Knöpfe ---------- */
.knopf { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; background: var(--akzent); color: #fff; border: 0; border-radius: 12px; padding: 12px 22px; font: 600 1rem/1.2 var(--schrift); cursor: pointer; text-decoration: none; }
.knopf:hover { background: var(--akzent-dunkel); color: #fff; }
.knopf-hell { background: var(--akzent-weich); color: var(--akzent-dunkel); }
.knopf-hell:hover { background: var(--akzent-mittel); color: var(--akzent-dunkel); }
.knopf-rahmen { background: #fff; color: var(--tinte); border: 1px solid var(--linie-stark); }
.knopf-rahmen:hover { background: var(--grund); color: var(--tinte); }
.knopf-gross { min-height: 60px; padding: 16px 30px; font-size: 1.15rem; border-radius: 14px; }
.knopf-gross .sym { width: 24px; height: 24px; }
.knopf .sym { width: 20px; height: 20px; }
.textlink { font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.textlink:hover { text-decoration: underline; }

/* ---------- Karten ---------- */
.karte { background: var(--karte); border: 1px solid var(--linie); border-radius: var(--rund); padding: 24px; box-shadow: var(--schatten); }
.karten { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.karten-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .karten-3 { grid-template-columns: 1fr; } }
.karte h3 { margin: 0 0 8px; font-size: 1.08rem; }
.karte p:last-child { margin-bottom: 0; }
.karte-symbol { width: 44px; height: 44px; border-radius: 12px; background: var(--akzent-weich); color: var(--akzent); display: grid; place-items: center; margin-bottom: 16px; }
.karte-symbol svg { width: 22px; height: 22px; }
.karte .kennwert { font-size: 1.6rem; font-weight: 750; color: var(--tinte); letter-spacing: -.02em; display: block; margin: 2px 0 6px; font-variant-numeric: tabular-nums; }
.raster { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

/* Rechner-Kacheln */
.rechner-kachel { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: var(--text); background: var(--karte); border: 1px solid var(--linie); border-radius: var(--rund); padding: 22px; box-shadow: var(--schatten); transition: border-color .15s, transform .15s; }
.rechner-kachel:hover { border-color: var(--akzent-mittel); color: var(--text); transform: translateY(-1px); }
.rechner-kachel strong { display: flex; align-items: center; gap: 10px; font-size: 1.08rem; color: var(--tinte); }
.rechner-kachel strong .sym { color: var(--akzent); width: 22px; height: 22px; }
.rechner-kachel span { font-size: .93rem; color: var(--grau); }
.rechner-kachel.haupt-kachel { grid-column: span 2; background: var(--akzent); border-color: var(--akzent); color: #e8e9ff; padding: 28px; }
.rechner-kachel.haupt-kachel strong { color: #fff; font-size: 1.35rem; }
.rechner-kachel.haupt-kachel strong .sym { color: #fff; }
.rechner-kachel.haupt-kachel span { color: #dcdffd; font-size: 1rem; }
.rechner-kachel.haupt-kachel .los { margin-top: auto; padding-top: 14px; font-weight: 650; color: #fff; }
@media (max-width: 560px) { .rechner-kachel.haupt-kachel { grid-column: auto; } }

.treffer { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); margin-top: 8px; }

/* Länder-Kacheln */
.laender { display: grid; gap: 12px; grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .laender { grid-template-columns: repeat(2, 1fr); } }
.land-kachel { display: block; text-decoration: none; background: var(--karte); border: 1px solid var(--linie); border-radius: var(--rund-klein); padding: 14px 16px; color: var(--text); }
.land-kachel:hover { border-color: var(--akzent-mittel); color: var(--text); }
.land-kachel b { display: block; color: var(--tinte); font-weight: 650; }
.land-kachel small { color: var(--grau); font-size: var(--klein); }

/* ---------- Suche ---------- */
.suche { position: relative; max-width: 620px; margin: 8px 0 24px; }
.suche label { display: block; font-weight: 600; margin-bottom: 8px; color: var(--tinte); }
.suche-zeile { display: flex; gap: 8px; }
.suche input { flex: 1; min-width: 0; font: 400 1.05rem var(--schrift); padding: 12px 14px; border: 1px solid var(--linie-stark); border-radius: 10px; background: #fff; color: var(--tinte); }
.suche-gross .suche-zeile { background: #fff; border: 1px solid var(--linie-stark); border-radius: 14px; padding: 6px; box-shadow: 0 6px 24px rgba(59, 63, 196, .10); }
.suche-gross input { border: 0; font-size: 1.15rem; padding: 12px 10px 12px 44px; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a909c' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 12px center / 22px; }
.suche-gross input:focus { outline: none; }
.suche-gross .suche-zeile:focus-within { border-color: var(--akzent); box-shadow: 0 0 0 3px var(--akzent-weich), 0 6px 24px rgba(59, 63, 196, .10); }
.vorschlaege { position: absolute; z-index: 15; left: 0; right: 0; top: 100%; margin: 6px 0 0; padding: 6px; list-style: none; background: #fff; border: 1px solid var(--linie); border-radius: 12px; box-shadow: 0 12px 32px rgba(21, 23, 28, .14); }
.vorschlaege li { margin: 0; }
.vorschlaege a { display: block; padding: 9px 12px; text-decoration: none; color: var(--tinte); border-radius: 8px; }
.vorschlaege a:hover, .vorschlaege a[aria-selected="true"] { background: var(--akzent-weich); }
.vorschlaege small { color: var(--grau); }
.schnell { font-size: .9rem; color: var(--grau); margin-top: -12px; }
.schnell a { color: var(--grau); margin-right: 4px; }

/* ---------- Startseite ---------- */
.held { padding: 40px 0 0; }
.held-karte { background: var(--karte); border: 1px solid var(--linie); border-radius: 24px; padding: 56px; box-shadow: 0 2px 4px rgba(21, 23, 28, .04), 0 18px 48px rgba(43, 46, 154, .10); background-image: radial-gradient(circle at 100% 0, var(--akzent-weich) 0, rgba(238, 240, 253, 0) 55%); }
.held h1 { max-width: 20ch; font-size: clamp(2rem, 5vw, 3.3rem); line-height: 1.1; margin: 0 0 14px; }
.held .einleitung { margin-bottom: 28px; }
.held .suche { max-width: 680px; margin-bottom: 20px; }
.held .schnell { margin: 0; }
.quelle-karte { display: flex; gap: 20px; align-items: flex-start; }
.quelle-karte .karte-symbol { margin: 0; }
.quelle-karte h3 { margin-top: 4px; }
@media (max-width: 600px) { .held { padding-top: 16px; } .held-karte { padding: 28px 20px; border-radius: 20px; } .quelle-karte { flex-direction: column; } }
.kennzahlen { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px 40px; margin: 24px 0 0; padding: 8px 8px 0; }
.kennzahlen div { min-width: 120px; }
.kennzahlen b { display: block; font-size: 1.6rem; font-weight: 750; color: var(--tinte); letter-spacing: -.02em; }
.kennzahlen span { font-size: var(--klein); color: var(--grau); }

/* ---------- Gemeindeseite: erster Bildschirm „auf einen Blick“ ---------- */
/* Die Antwortkarte füllt den ersten Bildschirm; der nächste Abschnitt beginnt erst darunter. */
.blick { padding: 28px 0 0; }
.blick-karte { width: 100%; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); grid-template-areas: "kopf wert" "satz wert" "knopf wert"; column-gap: 56px; align-items: center; background: var(--karte); border: 1px solid var(--linie); border-radius: 24px; padding: 56px 56px; box-shadow: 0 2px 4px rgba(21, 23, 28, .04), 0 18px 48px rgba(43, 46, 154, .10); }
.blick-kopf { grid-area: kopf; align-self: end; }
.blick-wo { margin: 0 0 10px; color: var(--grau); font-size: 1.05rem; display: flex; align-items: center; gap: 8px; }
.blick-wo .sym { color: var(--akzent); width: 20px; height: 20px; }
.blick h1 { margin: 0; font-size: clamp(2rem, 4.2vw, 3.1rem); line-height: 1.1; }
.blick-wert { grid-area: wert; align-self: stretch; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: linear-gradient(160deg, #4649d6 0%, #2b2e9a 100%); color: #fff; border-radius: 20px; padding: 40px 24px; }
.blick-bez { font-size: 1rem; font-weight: 600; color: #dfe1ff; }
.blick-zahl { font-size: clamp(52px, 13vw, 80px); line-height: 1.05; font-weight: 800; letter-spacing: -.045em; margin: 10px 0 8px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.blick-wert.leer .blick-zahl { font-size: clamp(30px, 7vw, 42px); letter-spacing: -.02em; white-space: normal; }
.blick-stand { font-size: .95rem; color: #dfe1ff; background: rgba(255, 255, 255, .12); border-radius: 999px; padding: 4px 14px; }
.blick-satz { grid-area: satz; margin: 22px 0 32px; font-size: clamp(1.15rem, 2vw, 1.35rem); font-weight: 500; color: var(--text); line-height: 1.45; max-width: 32ch; }
.blick-knopf { grid-area: knopf; align-self: start; }
@media (max-width: 760px) {
  .blick { padding: 16px 0 24px; }
  .blick-karte { grid-template-columns: 1fr; grid-template-areas: "kopf" "wert" "satz" "knopf"; padding: 24px 20px; border-radius: 20px; text-align: center; }
  .blick-wo { justify-content: center; font-size: .95rem; }
  .blick-wert { margin-top: 20px; padding: 26px 16px; }
  .blick-satz { margin: 20px auto 22px; }
  .blick-knopf .knopf { width: 100%; }
}
.abschnitt-eng { margin-top: 32px; }

/* kurzer Balkenvergleich */
.vb { display: grid; gap: 8px; margin-top: 6px; }
.vb-zeile { display: grid; grid-template-columns: minmax(0, 7.5rem) 1fr auto; gap: 10px; align-items: center; font-size: .9rem; color: var(--grau); }
.vb-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vb-spur { height: 12px; background: var(--grund); border-radius: 6px; overflow: hidden; }
.vb-spur span { display: block; height: 100%; background: var(--linie-stark); border-radius: 6px; }
.vb-hervor { color: var(--tinte); font-weight: 650; }
.vb-hervor .vb-spur span { background: var(--akzent); }
.vb-wert { font-variant-numeric: tabular-nums; white-space: nowrap; }
.kennwert small { font-size: .55em; font-weight: 600; color: var(--grau); letter-spacing: 0; }

/* Zugeklappte Erklärungen */
.mehr { margin-top: 12px; }
.mehr summary { cursor: pointer; font-weight: 600; color: var(--akzent); font-size: .95rem; display: inline-block; padding: 6px 0; }
.mehr > div { padding-top: 8px; }
.mehr > div > :last-child { margin-bottom: 0; }

/* ---------- Gemeindeseite: Antwortkarte (ältere Bausteine) ---------- */
.antwort { margin-top: 20px; padding: 32px; }
.antwort h1 { margin: 0 0 10px; }
.antwort .ueberzeile { margin-bottom: 4px; }
.ort-daten { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0; padding: 0 0 22px; list-style: none; color: var(--grau); font-size: .93rem; border-bottom: 1px solid var(--linie); }
.ort-daten li { display: inline-flex; align-items: center; gap: 7px; margin: 0; }
.ort-daten .sym { color: var(--hell); }
.saetze { display: grid; grid-template-columns: 1.25fr 1fr; gap: 20px; margin: 24px 0; }
@media (max-width: 760px) { .saetze { grid-template-columns: 1fr; } }
.satz-b { background: var(--akzent-weich); border: 1px solid var(--akzent-mittel); border-radius: var(--rund); padding: 22px 24px; }
.satz-b .bez { font-weight: 650; color: var(--akzent-dunkel); font-size: .95rem; }
.satz-b .wert { display: block; font-size: clamp(3rem, 9vw, 4.2rem); line-height: 1.05; font-weight: 800; color: var(--akzent-dunkel); letter-spacing: -.04em; margin: 6px 0 4px; font-variant-numeric: tabular-nums; }
.satz-b .wert.leer { font-size: 1.5rem; letter-spacing: -.01em; line-height: 1.3; padding: 10px 0 4px; }
.satz-b .neben { font-size: var(--klein); color: var(--grau); display: block; }
.aenderung { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: var(--klein); font-weight: 600; color: var(--text); background: #fff; border: 1px solid var(--akzent-mittel); border-radius: 999px; padding: 3px 11px; }
.satz-neben { display: grid; gap: 12px; align-content: start; }
.satz-zeile { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; border: 1px solid var(--linie); border-radius: var(--rund-klein); padding: 14px 16px; }
.satz-zeile .bez { font-weight: 600; color: var(--tinte); display: block; font-size: .95rem; }
.satz-zeile .neben { font-size: var(--klein); color: var(--grau); display: block; }
.satz-zeile .wert { font-size: 1.5rem; font-weight: 750; color: var(--tinte); white-space: nowrap; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.antwort-fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.antwort-fuss .klein { margin: 0; }
.hinweis-karte { font-size: .93rem; background: var(--warn-weich); border: 1px solid #f1d9a8; border-radius: var(--rund-klein); padding: 12px 16px; margin: 0 0 22px; color: #4a3a17; }
.hinweis-karte p:last-child { margin-bottom: 0; }
.hinweis-karte strong { color: #3d2f10; }

/* Rechenbeispiel */
.beispiel { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; margin-top: 20px; background: var(--karte); border: 1px solid var(--linie); border-radius: var(--rund); padding: 20px 24px; box-shadow: var(--schatten); }
.beispiel > div { display: flex; flex-direction: column; }
.beispiel-bez { font-size: var(--klein); color: var(--grau); }
.beispiel b { color: var(--tinte); font-size: 1.6rem; font-weight: 750; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.beispiel-pfeil { color: var(--akzent); display: grid; }
.beispiel-pfeil .sym { width: 28px; height: 28px; }
.beispiel-neben { margin-left: auto; padding-left: 24px; border-left: 1px solid var(--linie); }
.beispiel-neben b { color: var(--grau); font-size: 1.25rem; }
@media (max-width: 600px) { .beispiel-neben { margin-left: 0; padding-left: 0; border-left: 0; width: 100%; } }

/* Verlauf */
.verlauf { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
@media (max-width: 860px) { .verlauf { grid-template-columns: 1fr; } }
.diagramm { display: flex; justify-content: center; }
.diagramm svg { width: 100%; max-width: 520px; height: auto; display: block; }
.diagramm text { font-family: var(--schrift); }

/* Gewerbesteuer-Kurzinfo */
.kurz-info { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; }
.kurz-info .werte { display: flex; flex-wrap: wrap; gap: 12px 36px; }
.kurz-info .werte div span { display: block; font-size: var(--klein); color: var(--grau); }
.kurz-info .werte div b { font-size: 1.35rem; font-weight: 750; color: var(--tinte); font-variant-numeric: tabular-nums; }

/* ---------- Kennzahlen (Länder- und Kreisseiten) ---------- */
.zahlen { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin: 24px 0; }
.zahl { background: var(--karte); border: 1px solid var(--linie); border-radius: var(--rund); padding: 18px 20px; box-shadow: var(--schatten); }
.zahl .bez { font-size: .88rem; color: var(--grau); display: block; font-weight: 500; }
.zahl .wert { font-size: 2rem; font-weight: 750; color: var(--tinte); line-height: 1.2; display: block; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.zahl .neben { font-size: var(--klein); color: var(--grau); display: block; }
.zahl.akzent { background: var(--akzent-weich); border-color: var(--akzent-mittel); }
.zahl.akzent .wert { color: var(--akzent-dunkel); }

.hinweis { background: var(--warn-weich); border: 1px solid #f1d9a8; padding: 12px 16px; border-radius: var(--rund-klein); margin: 16px 0; font-size: .93rem; color: #4a3a17; }
.hinweis p:last-child { margin-bottom: 0; }

/* ---------- Tabellen ---------- */
.tabelle-huelle { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 12px 0 14px; border: 1px solid var(--linie); border-radius: var(--rund); background: var(--karte); }
table { border-collapse: collapse; width: 100%; font-size: .95rem; }
th, td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--linie); vertical-align: top; }
thead th { font-weight: 600; font-size: var(--klein); color: var(--grau); white-space: nowrap; background: #fafbfc; }
td.z, th.z { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: #fafbfd; }
tr.hervor td { background: var(--akzent-weich) !important; font-weight: 650; color: var(--tinte); }
td a { text-decoration: none; font-weight: 500; }
td a:hover { text-decoration: underline; }
td small { display: block; color: var(--grau); font-size: var(--klein); }

/* ---------- Rechner ---------- */
.rechner-kopf { padding: 36px 0 8px; }
.rechner-kopf h1 { margin: 0 0 8px; }
.rechner-kopf .einleitung { margin-bottom: 20px; }
.rechner { background: var(--karte); border: 1px solid var(--linie); border-radius: var(--rund); padding: 28px; margin: 0; box-shadow: var(--schatten); }
.rechner h2 { margin-top: 0; }
.felder { display: grid; gap: 16px 20px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.feld label, .feld .lbl { display: block; font-weight: 600; font-size: .92rem; margin-bottom: 6px; color: var(--tinte); }
.feld input[type=number], .feld input[type=text], .feld input[type=date], .feld input[type=email], .feld select, .feld textarea { width: 100%; min-height: 52px; font: 400 1.1rem var(--schrift); padding: 10px 14px; border: 1px solid var(--rahmen); border-radius: var(--rund-klein); background: #fff; color: var(--tinte); }
.feld textarea { min-height: 110px; resize: vertical; line-height: 1.5; }
.feld input:focus, .feld select:focus, .feld textarea:focus, .suche input:focus { outline: 3px solid var(--akzent-mittel); outline-offset: 0; border-color: var(--akzent); }
.suche-gross input:focus { outline: none; }
.feld small { display: block; color: var(--grau); font-size: var(--klein); margin-top: 5px; line-height: 1.45; }
.feld-check { display: flex; gap: 10px; align-items: flex-start; font-size: .95rem; }
.feld-check input { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--akzent); }
.reiter { display: inline-flex; flex-wrap: wrap; gap: 4px; margin: 0 0 20px; background: var(--grund); border: 1px solid var(--linie); border-radius: 12px; padding: 4px; }
.reiter button { border: 0; background: transparent; color: var(--grau); border-radius: 9px; padding: 8px 14px; font: 600 .92rem var(--schrift); cursor: pointer; }
.reiter button[aria-pressed="true"] { background: #fff; color: var(--akzent-dunkel); box-shadow: 0 1px 3px rgba(21, 23, 28, .12); }
.ergebnis { margin-top: 24px; background: var(--akzent-weich); border-radius: var(--rund-klein); padding: 20px 22px; }
.ergebnis .gross { font-size: 2.1rem; font-weight: 800; color: var(--akzent-dunkel); line-height: 1.15; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.ergebnis .unter { color: var(--grau); font-size: .93rem; margin-top: 4px; }
.ergebnis .hinweis { margin: 12px 0 0; }
.rechenweg { margin-top: 14px; }
.rechenweg summary { cursor: pointer; font-weight: 600; color: var(--akzent); font-size: .95rem; }
.rechenweg table { margin-top: 10px; background: #fff; border-radius: 8px; font-size: .9rem; }
.rechenweg td { padding: 8px 12px; }
.rechenweg td:last-child { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ohne-js { color: var(--warn); }
.balken { display: grid; gap: 8px; margin-top: 12px; }
.balken-zeile { display: grid; grid-template-columns: 7.5rem 1fr 6rem; gap: 10px; align-items: center; font-size: .93rem; }
.balken-zeile .spur { background: #fff; border-radius: 6px; height: 18px; overflow: hidden; }
.balken-zeile .fuell { background: var(--akzent); height: 100%; border-radius: 6px; }
.balken-zeile .fuell.co2 { background: #8f93e8; }
.balken-zeile .z { text-align: right; font-variant-numeric: tabular-nums; }
.erklaerung { margin-top: 40px; }

/* ---------- Fragen, Quellen, Ratgeber ---------- */
.faq details { background: var(--karte); border: 1px solid var(--linie); border-radius: var(--rund-klein); margin: 10px 0; padding: 0 20px; }
.faq summary { cursor: pointer; font-weight: 600; padding: 16px 0; color: var(--tinte); list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--akzent); font-weight: 500; font-size: 1.3rem; line-height: 1; }
.faq details[open] summary::after { content: "−"; }
.faq details > div { padding: 0 0 16px; color: var(--text); }
.quellen { margin-top: var(--luft); padding-top: 28px; border-top: 1px solid var(--linie); }
.quellen h2 { font-size: 1.1rem; }
.quellen ul { padding-left: 20px; font-size: .9rem; }
.quellen li { margin: 4px 0; overflow-wrap: anywhere; }
.quellen p { font-size: .9rem; }

.spalten { display: grid; gap: 20px; grid-template-columns: 1fr; }
.spalten > .tabelle-huelle { margin: 0; }
@media (min-width: 860px) { .spalten { grid-template-columns: 1fr 1fr; } }

.artikel-liste { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.artikel-kachel { display: flex; flex-direction: column; gap: 6px; text-decoration: none; background: var(--karte); border: 1px solid var(--linie); border-radius: var(--rund); padding: 22px; color: var(--text); box-shadow: var(--schatten); }
.artikel-kachel:hover { border-color: var(--akzent-mittel); color: var(--text); }
.artikel-kachel b { color: var(--tinte); font-size: 1.05rem; line-height: 1.35; }
.artikel-kachel span { font-size: .92rem; color: var(--grau); }
.artikel-kachel .rubrik { font-size: var(--klein); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--akzent); }
.artikel { max-width: 760px; }
.artikel h2 { margin-top: 1.8em; }
.artikel h3 { margin-top: 1.5em; }
.artikel .stand { font-size: .88rem; color: var(--grau); }
.artikel table { font-size: .93rem; }
.kasten { background: var(--akzent-weich); border-radius: var(--rund-klein); padding: 16px 20px; margin: 20px 0; }
.kasten p:last-child, .kasten ul:last-child { margin-bottom: 0; }
.kasten-titel { font-weight: 700; color: var(--akzent-dunkel); margin-bottom: 6px; }
.weiter { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

.partner { border: 1px dashed var(--linie-stark); border-radius: var(--rund); padding: 18px 20px; margin: 32px 0; background: #fff; }
.partner-titel { font-weight: 700; margin-bottom: 4px; color: var(--tinte); }
.anzeige { font-size: var(--klein); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--hell); }
.partner .anzeige { margin-left: 8px; border: 1px solid var(--linie-stark); border-radius: 4px; padding: 1px 6px; }
.werbeplatz { margin: 40px 0 0; }
.werbeplatz .anzeige { display: block; text-align: center; margin-bottom: 6px; }
.werbeplatz-flaeche { min-height: 280px; background: #fafbfc; border-radius: var(--rund-klein); overflow: hidden; }
@media (min-width: 761px) { .werbeplatz-flaeche { min-height: 120px; } }

/* Musterschreiben */
.brief { background: #fff; border: 1px solid var(--linie); border-radius: 4px; padding: 48px 56px; font-size: 15px; line-height: 1.55; color: #000; max-width: 760px; box-shadow: var(--schatten); }
.brief p { margin: 0 0 1em; }
.brief .absender { font-size: 13px; margin-bottom: 28px; }
.brief .datum { text-align: right; }
.brief .betreff { font-weight: 700; }
.leerstelle { background: #fff3cd; padding: 0 3px; border-radius: 3px; }
@media (max-width: 600px) { .brief { padding: 24px 20px; font-size: 14px; } }

/* ---------- Fuß ---------- */
.fuss { margin-top: 80px; background: #fff; border-top: 1px solid var(--linie); font-size: .9rem; color: var(--grau); }
.fuss-innen { display: grid; gap: 28px; grid-template-columns: 1fr; padding-top: 40px; padding-bottom: 40px; }
@media (min-width: 760px) { .fuss-innen { grid-template-columns: 2fr 1fr 1fr; } }
.fuss nav { display: flex; flex-direction: column; gap: 8px; }
.fuss nav b { color: var(--tinte); font-size: var(--klein); margin-bottom: 2px; }
.fuss a { color: var(--text); text-decoration: none; }
.fuss a:hover { color: var(--akzent); text-decoration: underline; }
.fuss-marke { font-weight: 750; font-size: 1.05rem; color: var(--tinte); display: flex; align-items: center; gap: 10px; }

/* ---------- Handy ---------- */
@media (max-width: 600px) {
  :root { --luft: 48px; }
  body { font-size: 17px; }
  .breite { padding: 0 16px; }
  .antwort, .rechner, .karte { padding: 20px; }
  .antwort { margin-top: 14px; }
  .satz-b { padding: 18px; }
  .satz-zeile { padding: 12px 14px; }
  .satz-zeile .wert { font-size: 1.3rem; }
  .zahlen { grid-template-columns: 1fr 1fr; gap: 10px; }
  .zahl { padding: 14px; }
  .zahl .wert { font-size: 1.45rem; }
  th, td { padding: 9px 10px; }
  .ergebnis .gross { font-size: 1.75rem; }
  .balken-zeile { grid-template-columns: 6rem 1fr 5rem; }
  .held { padding-top: 32px; }
  .kennzahlen { gap: 16px 24px; }
  .kennzahlen div { min-width: 40%; }
  .kennzahlen b { font-size: 1.35rem; }
  .suche-gross input { font-size: 1.05rem; }
  .suche-gross .knopf { padding: 12px 14px; }
  .reiter { display: flex; }
  .reiter button { flex: 1; padding: 8px 8px; font-size: var(--klein); }
  .nur-pc { display: none; }
}
@media (min-width: 601px) { .nur-handy { display: none; } }
@media (max-width: 640px) {
  table.stapel, .stapel tbody, .stapel tr, .stapel td { display: block; width: 100%; }
  .stapel thead { display: none; }
  .stapel tr { border-bottom: 1px solid var(--linie); padding: 10px 0; }
  .stapel td { border: 0; padding: 2px 14px; }
  .stapel td:first-child { font-weight: 600; }
}
@media print {
  .kopf, .fuss, .partner, .werbeplatz, .suche, .pfadleiste, .kein-druck { display: none !important; }
  body { background: #fff; }
  main { padding: 0; }
  .brief { border: 0; box-shadow: none; padding: 0; max-width: none; }
}

/* ================= Überarbeitung nach Gutachten (12.11.2026) ================= */
:focus-visible { outline: 3px solid var(--akzent); outline-offset: 2px; border-radius: 4px; }
.anzeige { color: var(--grau); }
.blick-quelle { margin: 14px 0 0; font-size: var(--klein); color: var(--grau); max-width: 46ch; }
.blick-beispiel { margin-top: 16px; font-size: 1rem; color: #fff; background: rgba(255, 255, 255, .16); border-radius: 12px; padding: 8px 14px; }
.blick-beispiel b { color: #fff; font-weight: 750; }
.blick-wert.alt, .blick-wert.leer { background: linear-gradient(160deg, #fff4dc 0%, #fde7b8 100%); color: #3d2f10; border: 1px solid #ecc977; }
.blick-wert.alt .blick-bez, .blick-wert.alt .blick-stand, .blick-wert.leer .blick-bez, .blick-wert.leer .blick-stand { color: #5a4413; }
.blick-wert.alt .blick-stand, .blick-wert.leer .blick-stand { background: rgba(255, 255, 255, .6); }
.blick-wert.alt .blick-beispiel { background: #fff; color: #5a4413; font-weight: 650; }
.blick-wert.leer .blick-zahl { font-size: clamp(30px, 7vw, 42px); }
.blick-wert.null { background: linear-gradient(160deg, #5c6170 0%, #3c404b 100%); }
.h1-zusatz { display: block; font-size: .5em; font-weight: 600; color: var(--grau); letter-spacing: 0; margin-top: 6px; }
.blick-karte { padding: 44px 48px; }
.abschnitt-erst { margin-top: 40px; }
.kurzfassung { color: var(--text) !important; font-size: 1.05rem; max-width: 62ch; margin-top: 6px !important; }
.vergleich-raster { display: grid; gap: 16px; grid-template-columns: 1.3fr 1.3fr 1fr 1fr; align-items: stretch; }
.vergleich-raster .karte { padding: 20px; }
.vergleich-raster h3 { margin: 0 0 6px; font-size: 1.05rem; display: flex; align-items: center; gap: 8px; }
.vergleich-raster h3 .sym { color: var(--akzent); }
.vergleich-raster .kennwert { margin: 0 0 4px; }
.vergleich-raster .klein { margin: 0 0 10px; }
.vergleich-raster .textlink { margin-top: 4px; }
@media (max-width: 1000px) { .vergleich-raster { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .vergleich-raster { grid-template-columns: 1fr 1fr; gap: 10px; } .vergleich-raster .v-breit { grid-column: 1 / -1; } .vergleich-raster .karte { padding: 16px; } }
.pille { display: inline-block; font-size: var(--klein); font-weight: 650; border-radius: 999px; padding: 3px 11px; margin: 0 0 10px; background: var(--grund); color: var(--text); border: 1px solid var(--linie-stark); }
.pille.unter { background: #e6f4ea; color: #14532d; border-color: #9fd3b0; }
.pille.ueber { background: #fdecea; color: #7f1d1d; border-color: #f1b4ad; }
.vb-zeile { font-size: var(--klein); }
.diagramm { padding: 16px; }
.begriffe dt { font-weight: 700; color: var(--tinte); margin-top: 8px; }
.begriffe dd { margin: 2px 0 0; }
/* Rechner: am PC Eingaben links, Ergebnis rechts (bleibt beim Scrollen sichtbar) */
.rechner-raster { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.rechner-raster .felder { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.rechner-ausgabe { position: sticky; top: calc(var(--kopf-h, 64px) + 16px); }
.rechner-ausgabe .ergebnis { margin-top: 0; }
@media (max-width: 900px) { .rechner-raster { grid-template-columns: 1fr; gap: 8px; } .rechner-ausgabe { position: static; } .rechner-ausgabe .ergebnis { margin-top: 16px; } }
.ergebnis.ist-beispiel { background: var(--grund); border: 1px dashed var(--rahmen); }
.ergebnis.ist-beispiel .gross { color: var(--tinte); font-size: 1.6rem; }
.reiter-hilfe { margin: -8px 0 16px; }
/* Nachbarn: ganze Zeile klickbar; am Handy als Liste */
tr.klickbar { position: relative; cursor: pointer; }
tr.klickbar td:first-child a::after { content: ""; position: absolute; inset: 0; }
tr.klickbar:hover td { background: var(--akzent-weich); }
@media (max-width: 600px) {
  .nachbar-tabelle thead { display: none; }
  .nachbar-tabelle, .nachbar-tabelle tbody { display: block; }
  .nachbar-tabelle tr { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "name b" "rest rest"; gap: 2px 12px; padding: 12px 14px; border-bottom: 1px solid var(--linie); }
  .nachbar-tabelle tr:last-child { border-bottom: 0; }
  .nachbar-tabelle td { border: 0; padding: 0; background: none !important; }
  .nachbar-tabelle td:first-child { grid-area: name; font-weight: 600; }
  .nachbar-tabelle td:nth-child(2) { grid-area: b; font-size: 1.2rem; font-weight: 750; color: var(--tinte); align-self: center; }
  .nachbar-tabelle td:nth-child(3), .nachbar-tabelle td:nth-child(4) { text-align: left; font-size: var(--klein); color: var(--grau); }
  .nachbar-tabelle td:nth-child(3) { grid-area: rest; }
  .nachbar-tabelle td:nth-child(4) { grid-area: rest; justify-self: end; }
  .nachbar-tabelle td:nth-child(3)::before { content: "A: "; }
  .nachbar-tabelle td:nth-child(4)::before { content: "Gewerbe: "; }
  .nachbar-tabelle td:nth-child(2)::before { content: "B "; font-size: var(--klein); font-weight: 500; color: var(--grau); }
  .nachbar-tabelle tr.hervor { background: var(--akzent-weich); }
}
/* Chips (Weitere Rechner) */
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 10px 16px; border: 1px solid var(--linie-stark); border-radius: 999px; background: #fff; color: var(--tinte); text-decoration: none; font-weight: 600; }
.chip .sym { color: var(--akzent); width: 20px; height: 20px; }
.chip:hover { border-color: var(--akzent); color: var(--akzent-dunkel); }
/* Ortssuche im Kopf */
.kopf-suche { margin: 0 0 0 8px; max-width: 220px; flex: 0 1 220px; }
.kopf-suche input { padding: 9px 12px 9px 36px; font-size: .95rem; min-height: 44px; border: 1px solid var(--rahmen); border-radius: 10px; width: 100%; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234b5260' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 10px center / 18px; }
.kopf-suche .vorschlaege { left: auto; right: 0; width: min(420px, 90vw); }
.menue-suche { margin: 4px 4px 8px; max-width: none; }
.menue-suche input { width: 100%; min-height: 48px; padding: 10px 12px; border: 1px solid var(--rahmen); border-radius: 10px; font-size: 1rem; }
.menue-suche .vorschlaege { position: static; box-shadow: none; }
.vorschlaege { max-height: 45vh; overflow-y: auto; }
.vorschlaege a { min-height: 44px; }
.vorschlaege-kopf { padding: 6px 12px; font-size: var(--klein); color: var(--grau); font-weight: 600; }
@media (max-width: 1100px) { .kopf-suche { flex-basis: 160px; min-width: 130px; } .haupt a { padding: 8px 8px; } }
@media (max-width: 860px) { .kopf-suche { display: none; } }
@media (max-width: 360px) { .marke { font-size: .95rem; gap: 8px; } .marke-zeichen { width: 26px; height: 26px; } .menue summary { padding: 8px 10px; } }
/* Tippflächen mindestens 44 px */
.menue summary { min-height: 44px; }
.menue nav a { min-height: 44px; display: flex; align-items: center; }
.fuss nav a { min-height: 44px; display: flex; align-items: center; }
.fuss nav { gap: 0; }
.pfadleiste a, .pfadleiste span { display: inline-flex; align-items: center; min-height: 44px; }
.pfadleiste ol { margin-top: 8px; }
.faq summary { min-height: 52px; align-items: center; }
.faq summary::after { content: "+"; display: grid; place-items: center; width: 30px; height: 30px; flex: none; border: 1.5px solid var(--akzent-mittel); border-radius: 50%; font-size: 1.15rem; }
.faq details[open] summary::after { content: "−"; }
.mehr summary { min-height: 44px; display: flex; align-items: center; }
.rechenweg summary { min-height: 44px; display: flex; align-items: center; }
.feld-check input { width: 24px; height: 24px; margin-top: 1px; }
.feld-check { min-height: 44px; align-items: center; }
td a { display: inline-block; padding: 4px 0; }
/* Werbung: Abstand zu Bedienelementen, leere Plätze ausblenden */
.werbeplatz { margin: 80px 0; }
.werbeplatz:has(ins[data-ad-status="unfilled"]) { display: none; }
.partner { margin: 56px 0; }
.partner .anzeige { display: inline-block; margin: 0 0 6px; border: 0; padding: 0; color: var(--grau); }
/* Zeilenlänge */
.quellen, .pfadleiste ol, p.klein { max-width: 68ch; }
.abschnitt-kopf p { max-width: 62ch; }
@media (max-width: 600px) {
  :root { --klein: .9375rem; --luft: 32px; }
  .blick { padding-top: 12px; }
  .blick-karte { padding: 22px 18px; }
  .blick-beispiel { font-size: .95rem; }
  .abschnitt-erst { margin-top: 28px; }
  .werbeplatz { margin: 56px 0; }
}
@media (max-width: 759px) {
  .fuss-innen { grid-template-columns: 1fr 1fr; gap: 20px 16px; padding-top: 28px; padding-bottom: 28px; }
  .fuss-innen > div:first-child { grid-column: 1 / -1; }
  .fuss nav a { min-height: 44px; }
}
@media (max-width: 600px) {
  .nachbar-tabelle td:first-child small { display: inline; margin-left: 8px; }
  .nachbar-tabelle tr { padding: 10px 14px; }
  .vergleich-raster .vb { display: none; }
}
.pfadleiste ol { margin: 8px 0 0; }
/* Handy: Brotkrumen nur als Rücksprung zur übergeordneten Seite */
@media (max-width: 600px) {
  .pfadleiste li { display: none; }
  .pfadleiste li:nth-last-child(2) { display: list-item; }
  .pfadleiste li:nth-last-child(2)::before { content: "← "; margin: 0 4px 0 0; color: var(--grau); }
  .pfadleiste ol { margin-top: 0; }
}
/* Suchsymbol im Handy-Kopf */
.kopf-lupe { display: none; width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--linie-stark); background: #fff; color: var(--tinte); align-items: center; justify-content: center; margin-left: auto; }
.kopf-lupe .sym { width: 22px; height: 22px; }
@media (max-width: 860px) { .kopf-lupe { display: inline-flex; margin-left: auto; } .menue { margin-left: 0; } }
.marke-teil { font-weight: 450; color: var(--grau); }
/* Startseite: Suche links, Beispielkarte rechts */
.held-karte { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.held-beispiel { display: flex; flex-direction: column; align-items: center; text-align: center; text-decoration: none; color: #fff; background: linear-gradient(160deg, #4649d6 0%, #2b2e9a 100%); border-radius: 20px; padding: 32px 20px; }
.held-beispiel:hover { color: #fff; box-shadow: 0 10px 30px rgba(43, 46, 154, .3); }
.held-beispiel .blick-bez { color: #dfe1ff; }
.held-ort { font-size: 1.4rem; font-weight: 700; margin-top: 6px; }
.held-beispiel .blick-zahl { font-size: clamp(48px, 8vw, 68px); }
.held-beispiel .blick-stand { color: #dfe1ff; background: rgba(255, 255, 255, .12); border-radius: 999px; padding: 4px 14px; font-size: var(--klein); }
.kennzeile { margin: 16px 4px 0; color: var(--grau); font-size: var(--klein); max-width: none !important; }
@media (max-width: 860px) { .held-karte { grid-template-columns: minmax(0, 1fr); gap: 24px; } .held-beispiel { display: none; } }
.balken-zeile.guenstigste { font-weight: 700; color: var(--tinte); }
.legende { display: inline-block; width: 14px; height: 10px; border-radius: 3px; vertical-align: middle; }
.legende-co2 { background: #8f93e8; }
/* Ratgeber-Artikel */
.artikel { max-width: 760px; }
.artikel .rechner-kopf { padding-top: 24px; }
.rubrik-zeile { display: block; font-size: var(--klein); font-weight: 650; color: var(--akzent); margin-bottom: 6px; }
.artikel .kern ul { margin: 0; padding-left: 1.2em; }
.artikel > table { background: var(--karte); border: 1px solid var(--linie); border-radius: var(--rund); overflow: hidden; margin: 12px 0 20px; display: table; }
.artikel h2 { font-size: 1.4rem; margin: 1.6em 0 .5em; }
.hinweis-rechtlich { margin-top: 32px; font-size: var(--klein); color: var(--grau); border-top: 1px solid var(--linie); padding-top: 16px; }
.artikel-quellen h2 { font-size: 1.1rem; }
.artikel-quellen ul { font-size: var(--klein); padding-left: 1.2em; }
.artikel-quellen li { overflow-wrap: anywhere; }
.artikel-liste .artikel-kachel b { font-size: 1.1rem; }
/* Umlage-Rechner */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.umlage-eingabe td { padding: 6px 8px; vertical-align: middle; }
.umlage-eingabe input { width: 100%; min-height: 44px; font: 400 1rem var(--schrift); padding: 8px 10px; border: 1px solid var(--rahmen); border-radius: 8px; background: #fff; color: var(--tinte); }
.umlage-eingabe td.z input { text-align: right; max-width: 120px; }
.umlage-eingabe td:nth-child(3) input { max-width: 70px; }
.umlage-eingabe input:disabled { background: var(--grund); color: var(--grau); }
.knopf-klein { min-width: 44px; min-height: 44px; border: 1px solid var(--linie-stark); background: #fff; border-radius: 8px; cursor: pointer; color: var(--grau); font-size: 1rem; }
.knopf-klein:hover { color: var(--tinte); border-color: var(--rahmen); }
.umlage .ergebnis .tabelle-huelle { margin-top: 14px; }
.druck-kopf, .druck-fuss { display: none; }
@media (max-width: 600px) { .umlage-eingabe td.z input { max-width: 90px; } }
@media print {
  .kein-druck, .rechner-leiste, .werbeplatz, .faq, .quellen, .chips { display: none !important; }
  .druck-kopf, .druck-fuss { display: block; }
  .druck-titel { font-size: 20px; font-weight: 700; margin: 0 0 12px; }
  .rechner { border: 0; box-shadow: none; padding: 0; }
  .ergebnis { background: #fff; border: 0; padding: 0; }
  .umlage-eingabe input { border: 0; padding: 0; min-height: 0; }
  .rechenweg[open] summary { display: none; }
}
/* Reiter des Grundsteuer-Rechners (Tabs, mindestens 48 px hoch) */
.reiter { display: flex; width: 100%; max-width: 520px; }
.reiter button[role="tab"] { flex: 1; min-height: 48px; padding: 10px 14px; font-size: .98rem; }
.reiter button[role="tab"][aria-selected="true"] { background: #fff; color: var(--akzent-dunkel); box-shadow: 0 1px 3px rgba(21, 23, 28, .14); }
.reiter button[role="tab"][aria-selected="false"]:hover { color: var(--tinte); background: rgba(255, 255, 255, .6); }
.reiter-feld { margin-bottom: 16px; }
.reiter-feld .reiter-hilfe { margin: 0 0 12px; }
.felder.gemeinsam { margin-bottom: 16px; }
.mit-js .ohne-js-titel strong { display: none; }
/* Musterschreiben */
.muster-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: start; margin-top: 24px; }
.muster-vorschau { position: sticky; top: calc(var(--kopf-h, 64px) + 16px); }
.muster-form h2 { margin-bottom: 12px; }
.muster-form h3 { font-size: 1.05rem; margin: 22px 0 10px; }
.gruende { display: grid; gap: 4px; margin-bottom: 14px; }
.grund-detail { width: 100%; min-height: 44px; margin: 0 0 8px 34px; max-width: calc(100% - 34px); padding: 8px 10px; border: 1px solid var(--rahmen); border-radius: 8px; font: 400 .95rem var(--schrift); }
.muster-form textarea { margin-bottom: 8px; }
.knopf-zeile { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.brief ol { padding-left: 1.3em; margin: 0 0 1em; }
.brief .empfaenger { margin-bottom: 28px; }
.brief .datum { text-align: right; }
.brief .betreff { font-weight: 700; margin-bottom: 0; }
.brief .az { margin-bottom: 1.4em; }
@media (max-width: 960px) { .muster-raster { grid-template-columns: minmax(0, 1fr); } .muster-vorschau { position: static; } }
@media print {
  .muster-raster { display: block; margin: 0; }
  .muster-vorschau { position: static; }
  .leerstelle { background: none; }
  .hinweis.kein-druck { display: none !important; }
}
/* Kontrollkästchen: eigene Zeilen über die volle Breite, Kästchen mittig vor der Beschriftung, ganze Zeile anklickbar */
.felder > .feld:has(> .feld-check) { grid-column: 1 / -1; }
label.feld-check, .feld label.feld-check { display: flex; align-items: center; gap: 12px; min-height: 48px; margin: 0; padding: 8px 14px; border: 1px solid var(--linie); border-radius: var(--rund-klein); background: #fff; cursor: pointer; font-size: 1rem; font-weight: 500; color: var(--tinte); }
.feld-check:hover { border-color: var(--rahmen); }
.feld-check input[type="checkbox"], .feld-check input[type="radio"] { width: 24px; height: 24px; margin: 0; flex: none; accent-color: var(--akzent); cursor: pointer; }
.feld-check span { line-height: 1.35; }
.felder > .feld:has(> .feld-check) + .feld:has(> .feld-check) { margin-top: -8px; }
.gruende .feld-check { border: 0; padding: 4px 0; min-height: 48px; background: none; }
.muster-form > .feld-check { margin: 8px 0 12px; }
@media (max-width: 600px) {
  .umlage-eingabe td { padding: 4px 4px; }
  .umlage-eingabe td.z input { max-width: 72px; }
  .umlage-eingabe td:nth-child(3) input { max-width: 52px; }
  .umlage-eingabe input { padding: 8px 6px; }
}
.sr { left: 0; top: 0; }
.umlage-eingabe th { position: relative; }
.umlage-eingabe table { table-layout: fixed; }
.umlage-eingabe th:nth-child(2), .umlage-eingabe td:nth-child(2) { width: 130px; }
.umlage-eingabe th:nth-child(3), .umlage-eingabe td:nth-child(3) { width: 90px; }
.umlage-eingabe th:nth-child(4), .umlage-eingabe td:nth-child(4) { width: 60px; }
@media (max-width: 600px) {
  .umlage-eingabe th:nth-child(2), .umlage-eingabe td:nth-child(2) { width: 84px; }
  .umlage-eingabe th:nth-child(3), .umlage-eingabe td:nth-child(3) { width: 62px; }
  .umlage-eingabe th:nth-child(4), .umlage-eingabe td:nth-child(4) { width: 52px; }
  .umlage-eingabe th { white-space: normal; font-size: var(--klein); }
}
@media (max-width: 600px) {
  .umlage-ergebnis th:nth-child(3), .umlage-ergebnis td:nth-child(3) { display: none; }
  .umlage-ergebnis th, .umlage-ergebnis td { padding: 8px 6px; }
}
@media (max-width: 600px) {
  .artikel-liste { gap: 8px; }
  .artikel-kachel { padding: 14px 16px; gap: 2px; }
  .artikel-kachel span:not(.rubrik) { display: none; }
  .chips { gap: 8px; }
  .chip { min-height: 44px; padding: 8px 12px; font-size: .95rem; }
  .fuss-innen > div:first-child p:not(.fuss-marke) { font-size: var(--klein); }
}

/* ================= Rechner-Prüfung 12.11.2026, Runde 1: alle Rechner nach einem Muster ================= */
/* Kacheln auf Startseite und /rechner/ (eigener Name, früher kollidierte er mit dem Rechner-Layout) */
.kachel-raster { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); align-items: stretch; }
.rechner-kachel, .rechner-kachel.haupt-kachel { padding: 24px; position: relative; }
.rechner-kachel strong { padding-right: 28px; }
.rechner-kachel .pfeil { position: absolute; right: 22px; top: 22px; color: var(--akzent); font-weight: 700; font-size: 1.15rem; line-height: 1.3; }
@media (max-width: 600px) {
  .kachel-raster { grid-template-columns: 1fr; gap: 12px; }
  .rechner-kachel, .rechner-kachel.haupt-kachel { padding: 18px 20px; }
  .rechner-kachel .pfeil { right: 18px; top: 17px; }
  .chips { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .chip { min-height: 48px; border-radius: 14px; padding: 8px 12px; line-height: 1.25; }
}

/* Rahmen: Eingaben links, Ergebnis rechts (mitlaufend); bis 900 px untereinander */
.rechner > h2 { margin-bottom: 24px; }
.rechner-kopf .zurueck { margin: -10px 0 18px; }
.rechner-raster { gap: 32px; }
.rechner-eingaben .felder, .muster-form .felder { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.felder { gap: 18px 20px; }
.felder > .breit, .felder > .modell-text, .felder > .feld:has(> .feld-check), .felder > .wahl { grid-column: 1 / -1; }
@media (min-width: 901px) { .umlage .felder { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 601px) and (max-width: 900px) { .umlage .felder { grid-template-columns: repeat(2, minmax(0, 1fr)); } .umlage .felder > [data-feld="objekt"] { grid-column: 1 / -1; } }
/* Jedes Feld: Beschriftung, Eingabe, Hilfe in drei Zeilen des gemeinsamen Rasters, damit Eingaben auf einer Linie stehen */
@supports (grid-template-rows: subgrid) {
  .felder > .feld:not(:has(> .feld-check)):not(.wahl) { display: grid; grid-template-rows: subgrid; grid-row: span 3; row-gap: 0; align-content: start; }
}
.feld label, .feld .lbl { font-size: .95rem; }
.feld small, .feld-unten small { font-size: .9375rem; color: var(--grau); line-height: 1.4; }
.feld-unten:empty { display: none; }
.eingabe { position: relative; }
.eingabe .einheit { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--grau); font-size: 1rem; font-weight: 500; pointer-events: none; }
.eingabe.mit-einheit input { padding-right: 3.1em; }
.eingabe.mit-einheit.lang input { padding-right: 4.6em; }
.modell-text { margin: -6px 0 0; }
/* Fehler direkt am Feld */
.feld [aria-invalid="true"], .umlage-eingabe [aria-invalid="true"] { border-color: #b3261e !important; box-shadow: 0 0 0 1px #b3261e; background: #fff8f7; }
.fehler-text { display: block; color: #a8231a !important; font-weight: 600; margin-top: 5px; }
input.uebernommen { background: var(--warn-weich) !important; border-color: #d9a441 !important; }
.knopf-text { display: inline-flex; align-items: center; min-height: 40px; padding: 0; border: 0; background: none; color: var(--akzent); font: inherit; font-weight: 650; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
/* Kontrollkästchen und Optionsfelder: Kästchen an der ersten Zeile, Zusatz klein darunter */
label.feld-check, .feld label.feld-check { align-items: flex-start; padding: 12px 14px; }
.feld-check input[type="checkbox"], .feld-check input[type="radio"] { margin-top: -1px; }
.feld-check span small { display: block; font-size: .875rem; color: var(--grau); font-weight: 400; margin-top: 2px; line-height: 1.35; }
fieldset.wahl { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: 8px; }
fieldset.wahl legend { padding: 0; margin: 0 0 6px; font-weight: 600; font-size: .95rem; color: var(--tinte); }
.felder > .feld:has(> .feld-check) + .feld:has(> .feld-check) { margin-top: -8px; }
/* Reiter des Grundsteuer-Rechners */
.mit-js .ohne-js-titel { display: none; }
.felder.gemeinsam { margin: 0; }
.reiter-feld { margin-bottom: 18px; }

/* Aufklappbare Teile: als Knopf mit Pfeil erkennbar, mindestens 48 px hoch */
.rechenweg > summary, .mehr > summary, details.weitere > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 10px 16px 10px 14px; border: 1px solid var(--akzent-mittel); border-radius: 10px; background: #fff; color: var(--akzent-dunkel); font-weight: 600; font-size: 1rem; }
.rechenweg > summary::-webkit-details-marker, .mehr > summary::-webkit-details-marker, details.weitere > summary::-webkit-details-marker { display: none; }
.rechenweg > summary::before, .mehr > summary::before, details.weitere > summary::before { content: ""; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform .15s; margin: 0 4px 0 2px; flex: none; }
.rechenweg[open] > summary::before, .mehr[open] > summary::before, details.weitere[open] > summary::before { transform: rotate(45deg); margin-top: -4px; }
.rechenweg > summary:hover, .mehr > summary:hover, details.weitere > summary:hover { background: var(--akzent-weich); }
details.weitere { margin-top: 20px; }
details.weitere > .felder { margin-top: 16px; }

/* Ergebnis: gleiche Karte im Beispiel-, Leer- und Ergebniszustand */
.ergebnis { border: 1px solid var(--akzent-mittel); padding: 22px 24px; }
.ergebnis .gross { font-size: clamp(1.65rem, 3vw, 2.15rem); overflow-wrap: anywhere; }
.ergebnis .zweit { font-size: 1.3rem; font-weight: 750; color: var(--tinte); margin-top: 6px; letter-spacing: -.01em; }
.ergebnis .zweit:empty { display: none; }
.ergebnis .unter { font-size: 1rem; color: var(--text); margin-top: 6px; }
.ergebnis.ist-beispiel { background: var(--akzent-weich); border: 1px solid var(--akzent-mittel); }
.ergebnis.ist-beispiel .gross { color: var(--akzent-dunkel); font-size: clamp(1.35rem, 2.6vw, 1.7rem); }
.ergebnis.ist-leer { background: #fff; border: 2px dashed var(--akzent-mittel); }
.ergebnis.ist-leer .gross { color: var(--tinte); font-size: 1.45rem; }
.ergebnis .notiz { font-size: .9375rem; color: var(--grau); margin: 10px 0 0; }
.posten { display: grid; gap: 6px; margin: 14px 0 0; }
.posten > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 12px; background: #fff; border-radius: 8px; }
.posten dt { color: var(--text); }
.posten dd { margin: 0; font-weight: 700; color: var(--tinte); white-space: nowrap; font-variant-numeric: tabular-nums; }
.rechenweg { margin-top: 16px; }
.rechenweg > table { table-layout: fixed; width: 100%; }
.rechenweg > table td:first-child { overflow-wrap: anywhere; }
.rechenweg > table td:last-child { width: 8.5em; }
.rechenweg tr.unterzeile td:first-child { padding-left: 26px; color: var(--grau); font-size: .875rem; }
.rechenweg tr.summenzeile td { font-weight: 700; color: var(--tinte); border-top: 2px solid var(--linie-stark); }
.rechenweg .tabelle-huelle { margin-top: 10px; }
.rechenweg tfoot td { font-weight: 700; color: var(--tinte); border-top: 2px solid var(--linie-stark); }
.druck-stand { display: none; }
/* Heizkosten: günstigste Variante farbig, andere neutral */
.balken-zeile { grid-template-columns: 7.5rem 1fr 6rem; }
.balken-zeile .spur { display: flex; }
.balken-zeile .fuell { flex: none; height: 100%; border-radius: 0; background: #9aa0ad; }
.balken-zeile .fuell.co2 { background: #d0d3da; }
.balken-zeile.guenstigste .fuell { background: var(--akzent); }
.balken-zeile.guenstigste .fuell.co2 { background: #8f93e8; }
.balken-zeile .z { font-weight: 650; }
table.jahre { font-size: .875rem; }

/* Feste Ergebnisleiste am Handy */
.ergebnis-leiste { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--akzent-dunkel); color: #fff; border: 0; font: 700 1.05rem/1.25 var(--schrift); box-shadow: 0 -6px 20px rgba(21, 23, 28, .18); cursor: pointer; text-align: left; }
.ergebnis-leiste .el-wert { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ergebnis-leiste .el-knopf { flex: none; font-size: .9rem; font-weight: 600; background: rgba(255, 255, 255, .16); border-radius: 999px; padding: 6px 12px; }
.ergebnis-leiste .el-knopf::after { content: " ↓"; }
@media (min-width: 901px) { .ergebnis-leiste { display: none !important; } }

/* Umlage */
.umlage-eingabe input { min-height: 48px; }
.knopf-klein { min-width: 48px; min-height: 48px; }
.umlage-ergebnis td.name small { display: none; }

/* Musterschreiben */
.muster-form h2 { font-size: 1.2rem; margin: 28px 0 12px; }
.muster-form h2:first-child { margin-top: 0; }
.gruende .feld-check, .muster-form .grund .feld-check { border: 0; background: none; padding: 6px 0; }
.grund-detail::placeholder, .feld input::placeholder { color: #646b78; }
.hinweis-klein { display: block; color: var(--warn) !important; font-weight: 600; }
.brief .absender { font-size: 14px; }
@media (min-width: 961px) { .brief { padding: 36px 40px; } }

/* Handy */
@media (max-width: 600px) {
  .rechner { padding: 18px 16px; }
  .felder, .rechner-eingaben .felder, .muster-form .felder { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; }
  .felder > * { grid-column: 1 / -1; }
  .felder > .kurz { grid-column: auto; }
  .ergebnis { padding: 18px 16px; }
  .ergebnis .gross { font-size: 1.65rem; }
  .ergebnis .zweit { font-size: 1.15rem; }
  /* Rechenweg: Text und Betrag untereinander statt gequetscht nebeneinander */
  .rechenweg > table, .rechenweg > table tbody { display: block; }
  .rechenweg > table tr { display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--linie); padding: 7px 10px; }
  .rechenweg > table tr:last-child { border-bottom: 0; }
  .rechenweg > table td { display: block; border: 0; padding: 0 !important; width: 100% !important; }
  .rechenweg > table td:last-child { text-align: right; font-weight: 700; color: var(--tinte); }
  .rechenweg tr.unterzeile td:first-child { padding-left: 14px !important; }
  .balken-zeile { grid-template-columns: 1fr auto; grid-template-areas: "name z" "spur spur"; row-gap: 4px; }
  .balken-zeile .name { grid-area: name; }
  .balken-zeile .spur { grid-area: spur; }
  .balken-zeile .z { grid-area: z; }
  /* Umlage-Ergebnis als Karten: Name, darunter Anteil, im Jahr, je Mietmonat */
  .umlage-ergebnis thead { display: none; }
  .umlage-ergebnis, .umlage-ergebnis tbody { display: block; }
  .umlage-ergebnis tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px 8px; padding: 10px 12px; border-bottom: 1px solid var(--linie); }
  .umlage-ergebnis td { display: block; border: 0; padding: 0 !important; text-align: left !important; }
  .umlage-ergebnis td.name { grid-column: 1 / -1; font-weight: 700; color: var(--tinte); }
  .umlage-ergebnis td.name small { display: inline; margin-left: 8px; font-weight: 500; color: var(--grau); font-size: .875rem; }
  .umlage-ergebnis td.monate { display: none !important; }
  .umlage-ergebnis td:not(.name) { font-weight: 700; color: var(--tinte); white-space: nowrap; }
  .umlage-ergebnis td:not(.name)::before { content: attr(data-label); display: block; font-size: .8125rem; color: var(--grau); font-weight: 500; }
  .muster-form h2 { font-size: 1.1rem; }
}

@media print {
  .reiter, .ergebnis-leiste, .knopf-text, .kein-druck { display: none !important; }
  .rechner-raster { display: block; }
  .rechner-ausgabe { position: static; }
  .ergebnis { break-inside: avoid; margin-top: 16px; border: 1px solid #999; padding: 12px; }
  .rechenweg[open] > summary, details.weitere[open] > summary { display: block !important; border: 0; padding: 0; min-height: 0; font-weight: 700; color: #000; }
  .rechenweg > summary::before, details.weitere > summary::before { display: none; }
  .feld input, .feld select { box-shadow: none !important; outline: none !important; }
  :focus, :focus-visible { outline: none !important; }
  .feld-unten small:not(.fehler-text), .feld small { display: none; }
  .umlage-eingabe input { background: none !important; box-shadow: none !important; -webkit-appearance: none; appearance: none; border-radius: 0; }
  .druck-stand { display: block; font-size: 12px; color: #444; margin: 12px 0 0; }
}

/* ================= Rechner-Prüfung 12.11.2026, Runde 2 ================= */
/* Raster ohne Löcher: ein allein stehendes halbes Feld bekommt die ganze Zeile (gesetzt in gemeinsam.mjs) */
.felder > .fuellt { grid-column: 1 / -1; }
/* Rasterspalten dürfen schmaler als ihr Inhalt werden: sonst schiebt eine breite Tabelle die ganze Seite (Heizkosten am Handy) */
.rechner-raster > * { min-width: 0; }
@media (max-width: 900px) { .rechner-raster { grid-template-columns: minmax(0, 1fr); gap: 0; } .rechner-ausgabe .ergebnis { margin-top: 20px; } }
/* Solange die feste Ergebnisleiste steht, scrollen fokussierte Felder über sie */
html.hat-leiste { scroll-padding-bottom: 76px; }

/* Kontrollkästchen: schlichte Zeilen ohne eigenen Rahmen (wirkten wie Eingabefelder), eng untereinander */
.felder label.feld-check, .feld label.feld-check { border: 0; background: none; padding: 6px 0; min-height: 44px; align-items: center; }
.felder > .feld:has(> .feld-check) + .feld:has(> .feld-check) { margin-top: -12px; }
.feld-check span small { margin-top: 0; }
/* Optionsfelder (Rechtsform) bleiben Kacheln: sie sind die Auswahl selbst */
fieldset.wahl label.feld-check { border: 1px solid var(--linie); background: #fff; padding: 10px 14px; min-height: 48px; }
fieldset.wahl label.feld-check:has(input:checked) { border-color: var(--akzent-mittel); background: var(--akzent-weich); }

/* Aufklapp-Pfeil ohne Übergang: kein halb gedrehter Zustand */
.rechenweg > summary::before, .mehr > summary::before, details.weitere > summary::before { transition: none; }

/* Beispiel im Ergebnisfeld klar als Platzhalter: grau, kleiner */
.ergebnis.ist-beispiel { background: var(--grund); border: 1px dashed var(--rahmen); }
.ergebnis.ist-beispiel .gross { color: var(--tinte); font-size: clamp(1.25rem, 2.4vw, 1.5rem); }

/* Letzten Hebesatz übernehmen: echter Knopf in Warnfarbe */
.knopf-text[data-alt-hebesatz] { display: flex; width: fit-content; min-height: 48px; margin-top: 8px; padding: 8px 16px; border: 1px solid #d9a441; border-radius: 10px; background: var(--warn-weich); color: #5c3700; text-decoration: none; font-size: .95rem; }
.knopf-text[data-alt-hebesatz]:hover { background: #ffecc7; }

/* Rechenweg am Handy: Text und Betrag in einer Zeile, wo es passt; Summenzeile mit einem Strich */
@media (max-width: 600px) {
  .rechenweg > table tr { align-items: baseline; column-gap: 12px; }
  .rechenweg > table td { width: auto !important; }
  .rechenweg > table td:first-child { flex: 1 1 11em; }
  .rechenweg > table td:last-child { flex: 0 0 auto; margin-left: auto; }
  .rechenweg tr.summenzeile td { border-top: 0; }
  .rechenweg > table tr.summenzeile { border-top: 2px solid var(--linie-stark); }
  .rechenweg > table tr:has(+ tr.summenzeile) { border-bottom: 0; }
}

/* Heizkosten: Jahrestabelle unter Eingaben und Ergebnis über die ganze Breite */
.jahre-block { margin-top: 24px; }
.jahre-block .tabelle-huelle { margin-bottom: 0; }
table.jahre td { white-space: nowrap; }
table.jahre tfoot td { font-weight: 700; color: var(--tinte); border-top: 2px solid var(--linie-stark); }
@media (max-width: 600px) {
  .jahre-block table.jahre { font-size: .8125rem; }
  .jahre-block table.jahre th, .jahre-block table.jahre td { padding: 8px 5px; }
  .jahre-block table.jahre th { white-space: normal; vertical-align: bottom; }
  .jahre-block table.jahre th:first-child, .jahre-block table.jahre td:first-child { padding-left: 10px; }
  table.jahre th:nth-child(2), table.jahre td:nth-child(2) { display: none; }
}

/* Förderung: Einkommensbonus-Tabelle passt ans Handy */
@media (max-width: 600px) { .bonus-tabelle th, .bonus-tabelle td { padding: 9px 8px; } }

/* Musterschreiben */
.hinweis-klein { display: block; margin-top: 8px; padding: 10px 12px; background: var(--warn-weich); border: 1px solid #e3c27a; border-radius: 8px; color: #3d2a00 !important; font-weight: 500; }
.grund-detail { min-height: 52px; font-size: 1rem; padding: 10px 14px; border-radius: 10px; }

/* Umlage: Wohnungstabelle ausgewogen (PC) und als Karten (Handy) */
.umlage-eingabe { max-width: 760px; }
.umlage-eingabe th:nth-child(2), .umlage-eingabe td:nth-child(2) { width: 150px; }
.umlage-eingabe th:nth-child(3), .umlage-eingabe td:nth-child(3) { width: 110px; }
.umlage-eingabe td.z input { max-width: none; }
.umlage-eingabe td:nth-child(3) input { max-width: none; }
@media (max-width: 600px) {
  .umlage-eingabe thead { display: none; }
  .umlage-eingabe table, .umlage-eingabe tbody { display: block; }
  .umlage-eingabe tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 48px; gap: 8px; align-items: end; padding: 12px; border-bottom: 1px solid var(--linie); }
  .umlage-eingabe tr:last-child { border-bottom: 0; }
  .umlage-eingabe td { display: block; width: auto !important; padding: 0 !important; border: 0; }
  .umlage-eingabe td:first-child { grid-column: 1 / -1; }
  .umlage-eingabe td.z input, .umlage-eingabe td:nth-child(3) input { max-width: none; padding: 8px 10px; }
  .umlage-eingabe td[data-label]::before { content: attr(data-label); display: block; font-size: .875rem; color: var(--grau); margin-bottom: 4px; text-align: left; }
}

/* Kacheln: ab drei Spalten füllt die letzte Kachel die Reihe, wenn sonst ein Loch bliebe */
@media (min-width: 961px) {
  .kachel-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kachel-raster > .haupt-kachel:first-child ~ :last-child:nth-child(7) { grid-column: span 2; }
}
@media (min-width: 601px) and (max-width: 960px) { .kachel-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .rechner-kachel.haupt-kachel .los { padding-top: 8px; } }
/* Chips am Handy gleich hoch */
@media (max-width: 600px) { .chip { min-height: 56px; font-size: .9375rem; } }

@media print {
  .rechner-ausgabe .ergebnis { margin-top: 24px; }
  /* Rechenweg immer aufgeklappt drucken, Knopf als schlichte Überschrift „Rechenweg“ */
  details.rechenweg::details-content { content-visibility: visible; display: block; }
  .rechenweg > summary { display: block !important; border: 0; padding: 0; min-height: 0; background: none; font-weight: 700; color: #000; }
  .rechenweg > summary[data-druck] { font-size: 0; }
  .rechenweg > summary[data-druck]::after { content: attr(data-druck); font-size: 14px; }
  /* Umlage: Eingaben als reiner Text, Objekt steht im Titel, nur eine Fußzeile */
  .umlage .druck-stand, .umlage [data-feld="objekt"], .umlage .feld-unten { display: none !important; }
  .umlage .feld input, .umlage .feld select { border: 0 !important; padding: 0 !important; min-height: 0 !important; background: none !important; -webkit-appearance: none; appearance: none; font-weight: 700; }
  .umlage .eingabe .einheit { position: static; transform: none; margin-left: 4px; }
  .umlage .eingabe.mit-einheit { display: flex; align-items: baseline; }
  .umlage .eingabe.mit-einheit input { width: auto; field-sizing: content; padding-right: 0 !important; }
  .umlage .druck-fuss { margin-top: 12px; }
}
.umlage > p:has(> [data-drucken]) { margin-top: 20px; }
@media (max-width: 600px) { .umlage-eingabe td { background: none !important; } }

/* ================= Rechner-Prüfung 12.11.2026, Runde 3 (Feinschliff) ================= */
/* Aufklapper: Text wechselt („Rechenweg anzeigen“ / „Rechenweg ausblenden“) */
.rechenweg[open] > summary .nur-zu, .rechenweg:not([open]) > summary .nur-auf { display: none; }
/* Aufklapper über die volle Breite: gleich breite Knöpfe statt unruhiger Einzelbreiten */
.rechenweg > summary, .mehr > summary, details.weitere > summary { display: flex; width: 100%; }
/* Ergebnisbox am PC so hoch wie die Eingaben (gesetzt in gemeinsam.mjs), Rechenweg-Knopf unten */
.ergebnis.gestreckt { display: flex; flex-direction: column; }
.ergebnis.gestreckt > .rechenweg { margin-top: auto; padding-top: 16px; }
/* Hinweis „Gelesen als …“ bei Zahlen mit Punkt: freundlich, nicht rot */
.deutung-text { display: block; margin-top: 6px; padding: 6px 10px; border-radius: 8px; background: var(--warn-weich); color: #5c3700 !important; font-size: .9375rem; font-weight: 500; line-height: 1.4; }
/* Links in Hilfetexten („Hebesatz suchen“) als Tippziel mit 44 px, ohne Umbruch */
.feld-unten small a { display: inline-flex; align-items: center; min-height: 44px; white-space: nowrap; font-weight: 600; }
.knopf-text { min-height: 44px; }
/* Erklärsatz zum Landesmodell: als Infokasten statt Kleingedrucktes */
.felder > .modell-text { margin: 0; padding: 10px 14px; border-radius: var(--rund-klein); background: var(--akzent-weich); color: var(--text); font-size: .9375rem; line-height: 1.45; }
.felder > .modell-text:empty { display: none; }
/* Reiter so breit wie das Feldraster darunter */
.reiter { max-width: none; }
/* Kein grauer Tipp-Rest (Hover) in Tabellen auf Touch-Geräten und nie im Rechenweg */
@media (hover: none) { tbody tr:hover td { background: transparent; } }
.rechenweg tbody tr:hover td { background: transparent; }
/* Rechenweg so groß wie die Posten darüber */
.rechenweg > table { font-size: 1rem; }
.ergebnis .notiz { color: var(--text); }
/* Kontrollkästchen: schmaler, klarer Fokusring statt breitem Schleier; nur bei Tastatur */
.feld-check input:focus { outline: none; }
.feld-check input:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
/* Feste Ergebnisleiste: Seitenende bleibt frei */
html.hat-leiste body { padding-bottom: 64px; }
/* Lupe im Handy-Kopf nicht stauchen (war 37 px breit) */
.kopf-lupe { flex: none; }
/* Musterschreiben: Briefschrift am Handy lesbarer; Hinweis ohne Begründung; Rücksprung zu den Angaben */
@media (max-width: 600px) { .brief { font-size: 15px; } .brief .absender { font-size: 14px; } }
.brief .ohne-grund { background: var(--warn-weich); border-left: 3px solid #d9a441; padding: 4px 10px; }
.zu-angaben { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; text-decoration: none; }
@media (min-width: 961px) { .zu-angaben { display: none; } }
@media print { .brief .ohne-grund { background: none; border: 0; padding: 0; } }
/* Umlage: Druckknopf mit Abstand zur Box */
.umlage .knopf-zeile, .umlage > p:has(> [data-drucken]) { margin-top: 20px; }
/* Umlage: zwei Rechenfelder nebeneinander, Objekt-Feld erst beim Drucken-Knopf; Monatszusatz unter dem Namen */
@media (min-width: 901px) { .umlage .felder { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 760px; } }
.umlage .druck-angabe { margin-top: 24px; max-width: 760px; }
.umlage .druck-angabe + p { margin-top: 12px !important; }
@media (max-width: 600px) { .umlage-ergebnis td.name small { display: block; margin-left: 0; } }
/* Übersicht: weniger Leerraum über der Überschrift, Kachel-Texte größer, Pfeil auf Höhe der Überschrift */
.rechner-kopf { padding-top: 20px; }
.rechner-kachel span { font-size: 1rem; }
.rechner-kachel strong { line-height: 1.35; }
.rechner-kachel .pfeil { top: 24px; line-height: 1.35; font-size: 1.08rem; }
@media (max-width: 600px) { .rechner-kachel .pfeil { top: 18px; } }
/* Fuß: Marken-Spalte schmaler, damit „Wärmepumpen-Förderung“ nicht umbricht */
@media (min-width: 760px) { .fuss-innen { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); } }
/* Kopf: Tippziele mindestens 44 px */
.marke { min-height: 44px; }
.haupt a { min-height: 44px; display: inline-flex; align-items: center; }
.ergebnis tbody tr:hover td { background: transparent; }