/* Vermieterkompass — Designsystem
   Schriften: Fraunces und Inter, beide SIL Open Font License, lokal eingebunden. */

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/fraunces-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/fraunces-latin.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: 'Inter';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/inter-latin.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;
}

:root {
  --papier: #fbf9f5;
  --papier-2: #ffffff;
  --papier-3: #f3efe6;
  --tinte: #16201c;
  --tinte-2: #55605a;
  --tinte-3: #7d867f;
  --gruen: #1e4b3c;
  --gruen-hell: #2f6b56;
  --gruen-blass: #e7efe9;
  --auf-gruen: #fbf9f5;
  --messing: #a8783a;
  --messing-blass: #f6efe3;
  --rot: #9a3324;
  --rot-blass: #fbeeeb;
  --linie: rgba(22, 32, 28, 0.11);
  --linie-stark: rgba(22, 32, 28, 0.2);
  --schatten: 0 1px 2px rgba(22, 32, 28, 0.035), 0 10px 30px -14px rgba(22, 32, 28, 0.16);
  --schatten-hoch: 0 2px 6px rgba(22, 32, 28, 0.05), 0 28px 60px -24px rgba(22, 32, 28, 0.26);
  --radius: 18px;
  --radius-klein: 11px;
  --breite: 1120px;
  --serif: 'Fraunces', ui-serif, Georgia, serif;
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-thema='hell']) {
    --papier: #0f1512;
    --papier-2: #161d19;
    --papier-3: #1d2621;
    --tinte: #e9e6de;
    --tinte-2: #a3aca6;
    --tinte-3: #7d867f;
    --gruen: #7fc0a4;
    --gruen-hell: #9ad3ba;
    --gruen-blass: #17251f;
    --auf-gruen: #0f1512;
    --messing: #d9a765;
    --messing-blass: #241d12;
    --rot: #e08877;
    --rot-blass: #2a1a16;
    --linie: rgba(233, 230, 222, 0.13);
    --linie-stark: rgba(233, 230, 222, 0.24);
    --schatten: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px -12px rgba(0, 0, 0, 0.6);
    --schatten-hoch: 0 2px 4px rgba(0, 0, 0, 0.4), 0 20px 48px -20px rgba(0, 0, 0, 0.8);
  }
}
:root[data-thema='dunkel'] {
  --papier: #0f1512;
  --papier-2: #161d19;
  --papier-3: #1d2621;
  --tinte: #e9e6de;
  --tinte-2: #a3aca6;
  --tinte-3: #7d867f;
  --gruen: #7fc0a4;
  --gruen-hell: #9ad3ba;
  --gruen-blass: #17251f;
  --auf-gruen: #0f1512;
  --messing: #d9a765;
  --messing-blass: #241d12;
  --rot: #e08877;
  --rot-blass: #2a1a16;
  --linie: rgba(233, 230, 222, 0.13);
  --linie-stark: rgba(233, 230, 222, 0.24);
  --schatten: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px -12px rgba(0, 0, 0, 0.6);
  --schatten-hoch: 0 2px 4px rgba(0, 0, 0, 0.4), 0 20px 48px -20px rgba(0, 0, 0, 0.8);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.62;
  font-feature-settings: 'kern' 1, 'liga' 1, 'cv05' 1;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.012em;
  margin: 0 0 0.5em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.1rem, 1.4rem + 2.6vw, 3.4rem); font-variation-settings: 'opsz' 120; }
h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.15rem); font-variation-settings: 'opsz' 60; }
h3 { font-size: 1.16rem; font-family: var(--sans); font-weight: 600; letter-spacing: -0.005em; }
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--gruen); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--messing); }

:focus-visible {
  outline: 2px solid var(--messing);
  outline-offset: 2px;
  border-radius: 4px;
}

.huelle { width: 100%; max-width: var(--breite); margin-inline: auto; padding-inline: clamp(1.1rem, 4vw, 2.4rem); }
.schmal { max-width: 760px; }
.vorspann { font-size: 1.13rem; color: var(--tinte-2); max-width: 62ch; }

/* ---------- Kopfzeile ---------- */

.kopf {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--papier) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--linie);
}
.kopf-innen { display: flex; align-items: center; gap: 1.6rem; height: 66px; }
.marke { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--serif); font-size: 1.2rem; font-weight: 600; color: var(--tinte); text-decoration: none; letter-spacing: -0.015em; white-space: nowrap; }
.marke:hover { color: var(--tinte); }
.marke svg { flex: none; }
.navi { display: flex; gap: 0.3rem; margin-left: auto; align-items: center; }
.navi a {
  font-size: 0.92rem; color: var(--tinte-2); text-decoration: none;
  padding: 0.42rem 0.72rem; border-radius: 99px; white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
.navi a:hover, .navi a[aria-current='page'] { background: var(--papier-3); color: var(--tinte); }
.navi a.knopf-haupt, .navi a.knopf-haupt:hover { color: var(--auf-gruen); background: var(--gruen); }
.navi a.knopf-haupt:hover { background: var(--gruen-hell); }
.navi-knopf { display: none; background: none; border: 1px solid var(--linie-stark); border-radius: 9px; padding: 0.4rem 0.55rem; color: var(--tinte); cursor: pointer; margin-left: auto; }

@media (max-width: 900px) {
  .navi-knopf { display: block; }
  .navi {
    position: absolute; inset: 66px 0 auto; flex-direction: column; align-items: stretch;
    background: var(--papier-2); border-bottom: 1px solid var(--linie);
    padding: 0.7rem clamp(1.1rem, 4vw, 2.4rem) 1.2rem; gap: 0.1rem;
    box-shadow: var(--schatten); margin-left: 0;
  }
  .navi[hidden] { display: none; }
  .navi a { padding: 0.6rem 0.7rem; font-size: 1rem; }
}

/* ---------- Flächen ---------- */

main { display: block; padding-bottom: 5rem; }
section { padding-block: clamp(2.6rem, 5vw, 4.4rem); }
.abschnitt-kopf { max-width: 60ch; margin-bottom: 2rem; }

.karte {
  background: var(--papier-2);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: clamp(1.2rem, 3vw, 1.9rem);
  box-shadow: var(--schatten);
}

.gitter { display: grid; gap: 1.1rem; }
.gitter-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.gitter-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }

/* ---------- Rechner-Kacheln ---------- */

.kachel {
  display: flex; flex-direction: column; gap: 0.55rem;
  background: var(--papier-2); border: 1px solid var(--linie); border-radius: var(--radius);
  padding: 1.45rem 1.5rem 1.55rem; text-decoration: none; color: inherit;
  position: relative; overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.kachel::after {
  content: ''; position: absolute; inset: 0 auto 0 0; width: 3px;
  background: linear-gradient(var(--gruen), var(--messing));
  opacity: 0; transition: opacity 0.18s ease;
}
.kachel:hover { transform: translateY(-2px); box-shadow: var(--schatten-hoch); border-color: var(--linie-stark); color: inherit; }
.kachel:hover::after { opacity: 1; }
.kachel h3 { margin: 0; font-size: 1.06rem; }
.kachel p { font-size: 0.92rem; color: var(--tinte-2); margin: 0; }
.kachel-nr { font-family: var(--serif); font-size: 0.82rem; color: var(--messing); letter-spacing: 0.09em; text-transform: uppercase; }

/* ---------- Formulare ---------- */

.feldgruppe { display: grid; gap: 1rem; }
/* align-content: start ist hier keine Feinheit, sondern die Behebung eines
   Fehlers. Ohne die Angabe steht das Raster auf "stretch": Sitzt links ein
   Feld aus Beschriftung und Eingabe und rechts eines, das zusätzlich einen
   Hilfetext trägt, dann dehnt das linke seine beiden Zeilen auf die Höhe des
   rechten — und seine Eingabe rutscht um zwanzig Pixel nach unten. Genau das
   war auf der Mietpreisseite zu sehen. */
.feld { display: grid; gap: 0.32rem; align-content: start; }
.feld > label, .feld-kopf { font-size: 0.87rem; font-weight: 500; color: var(--tinte-2); }
.feld-hilfe { font-size: 0.8rem; color: var(--tinte-3); line-height: 1.45; }

input[type='text'], input[type='number'], input[type='date'], input[type='search'], select, textarea {
  width: 100%; font: inherit; font-size: 1rem;
  padding: 0.62rem 0.75rem;
  color: var(--tinte); background: var(--papier);
  border: 1px solid var(--linie-stark); border-radius: var(--radius-klein);
  transition: border-color 0.15s, box-shadow 0.15s;
  appearance: none;
}
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%2355605a' stroke-width='1.6' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.75rem center; padding-right: 2.2rem;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--gruen);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gruen) 16%, transparent);
}
input[type='number'] { -moz-appearance: textfield; }
input[type='number']::-webkit-outer-spin-button, input[type='number']::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.mit-einheit { position: relative; }
.mit-einheit input { padding-right: 2.9rem; }
.mit-einheit .einheit {
  position: absolute; right: 0.8rem; top: 50%; transform: translateY(-50%);
  font-size: 0.86rem; color: var(--tinte-3); pointer-events: none;
}

fieldset { border: none; margin: 0; padding: 0; }
legend { padding: 0; font-size: 0.87rem; font-weight: 500; color: var(--tinte-2); margin-bottom: 0.45rem; }

.schalter { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.schalter label {
  font-size: 0.88rem; padding: 0.42rem 0.8rem; border-radius: 99px;
  border: 1px solid var(--linie-stark); cursor: pointer; color: var(--tinte-2);
  transition: all 0.15s;
}
.schalter input { position: absolute; opacity: 0; width: 0; height: 0; }
.schalter label:has(input:checked) { background: var(--gruen); border-color: var(--gruen); color: var(--auf-gruen); }
.schalter label:has(input:focus-visible) { outline: 2px solid var(--messing); outline-offset: 2px; }

.kasten-liste { display: grid; gap: 0.55rem; }
.kasten { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.93rem; color: var(--tinte-2); cursor: pointer; }
.kasten input { margin-top: 0.28rem; accent-color: var(--gruen); flex: none; width: 16px; height: 16px; }

.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font: inherit; font-size: 0.95rem; font-weight: 500;
  padding: 0.68rem 1.35rem; border-radius: 99px; border: 1px solid transparent;
  cursor: pointer; text-decoration: none; transition: all 0.15s; white-space: nowrap;
}
.knopf-haupt { background: var(--gruen); color: var(--auf-gruen); }
.knopf-haupt:hover { background: var(--gruen-hell); color: var(--auf-gruen); }
.knopf-rand { background: transparent; border-color: var(--linie-stark); color: var(--tinte); }
.knopf-rand:hover { border-color: var(--gruen); color: var(--gruen); background: var(--gruen-blass); }
.knopf-still { background: none; border: none; color: var(--tinte-2); padding: 0.4rem 0.6rem; font-size: 0.88rem; }
.knopf-still:hover { color: var(--gruen); }
.knopf:disabled { opacity: 0.45; cursor: not-allowed; }
.knopf-reihe { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }

/* ---------- Ergebnisse ---------- */

.ergebnis {
  background: linear-gradient(150deg, var(--gruen-blass), var(--papier-2) 65%);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: clamp(1.3rem, 3vw, 1.9rem);
}
.zahl-gross {
  font-family: var(--serif); font-variation-settings: 'opsz' 100;
  font-size: clamp(2.3rem, 1.6rem + 2.8vw, 3.3rem); font-weight: 600;
  line-height: 1.02; letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--gruen); display: block;
}
.zahl-gross.neutral { color: var(--tinte); }
.zahl-gross.warn { color: var(--rot); }
.zahl-titel { font-size: 0.83rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tinte-3); margin-bottom: 0.35rem; }
.zahl-fuss { font-size: 0.9rem; color: var(--tinte-2); margin-top: 0.5rem; }

/* Die Trennlinien entstehen aus Rändern der Zellen, nicht aus dem Hintergrund
   des Gitters mit 1px Lücke. Der alte Weg war kürzer, füllte aber die letzte,
   unvollständige Reihe mit einem grauen Klotz — bei sechs Kennzahlen in einer
   fünfspaltigen Reihe war das die halbe Breite. */
.kennzahlen {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  border: 1px solid var(--linie); border-radius: var(--radius-klein); overflow: hidden;
  background: var(--papier-2);
}
.kennzahl {
  background: var(--papier-2); padding: 0.9rem 1rem;
  border-right: 1px solid var(--linie); border-bottom: 1px solid var(--linie);
  margin: 0 -1px -1px 0;
}
.kennzahl dt { font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tinte-3); margin-bottom: 0.2rem; }
.kennzahl dd { margin: 0; font-size: 1.32rem; font-weight: 600; font-variant-numeric: tabular-nums lining-nums; letter-spacing: -0.015em; }
.kennzahl dd small { font-size: 0.78rem; font-weight: 400; color: var(--tinte-3); display: block; letter-spacing: 0; }
.kennzahl.gut dd { color: var(--gruen); }
.kennzahl.schlecht dd { color: var(--rot); }

table { width: 100%; border-collapse: collapse; font-size: 0.94rem; }
table th, table td { text-align: left; padding: 0.6rem 0.7rem; border-bottom: 1px solid var(--linie); }
table th { font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tinte-3); font-weight: 500; }
table td.zahl, table th.zahl { text-align: right; font-variant-numeric: tabular-nums lining-nums; }
table tr:last-child td { border-bottom: none; }
tfoot td { font-weight: 600; border-top: 2px solid var(--linie-stark); }
.tabelle-huelle { overflow-x: auto; margin-inline: -0.7rem; padding-inline: 0.7rem; }

/* ---------- Hinweise ---------- */

/* Die Regel [hidden] { display: none } steht im Browservorrat und verliert
   damit gegen jede Klasse aus diesem Stylesheet, die display setzt. Beim
   Knopf "Rückgängig" hiess das: dauerhaft sichtbar, obwohl er hidden trug. */
[hidden] { display: none !important; }

.hinweis {
  display: flex; gap: 0.7rem; font-size: 0.9rem; line-height: 1.55;
  padding: 0.85rem 1rem; border-radius: var(--radius-klein);
  background: var(--papier-3); color: var(--tinte-2);
  border-left: 3px solid var(--linie-stark);
}
.hinweis-recht { background: var(--messing-blass); border-left-color: var(--messing); }
.hinweis-warn { background: var(--rot-blass); border-left-color: var(--rot); color: var(--tinte); }
.hinweis-gut { background: var(--gruen-blass); border-left-color: var(--gruen); }
.hinweis strong { color: var(--tinte); }

.quelle { font-size: 0.8rem; color: var(--tinte-3); }
.quelle a { color: var(--tinte-3); }

details.formel { border-top: 1px solid var(--linie); margin-top: 1.2rem; padding-top: 0.9rem; }
details.formel summary { cursor: pointer; font-size: 0.88rem; color: var(--tinte-2); list-style: none; display: flex; align-items: center; gap: 0.4rem; }
details.formel summary::-webkit-details-marker { display: none; }
details.formel summary::before { content: '＋'; font-size: 0.85em; color: var(--messing); }
details.formel[open] summary::before { content: '−'; }
details.formel .inhalt { font-size: 0.9rem; color: var(--tinte-2); padding-top: 0.8rem; }
details.formel code, .rechnung {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 0.87em;
  background: var(--papier-3); padding: 0.1rem 0.35rem; border-radius: 4px;
}
.rechnung { display: block; padding: 0.7rem 0.85rem; margin: 0.5rem 0; line-height: 1.7; }

.marke-pro {
  display: inline-block; font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase;
  background: var(--messing); color: #fff; padding: 0.13rem 0.45rem; border-radius: 4px;
  vertical-align: 2px; font-weight: 600;
}

/* ---------- Fuß ---------- */

.fuss { border-top: 1px solid var(--linie); background: var(--papier-3); padding-block: 3rem 2.4rem; font-size: 0.9rem; color: var(--tinte-2); }
.fuss-gitter { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 2rem; }
.fuss h3 { font-size: 0.78rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--tinte-3); margin-bottom: 0.7rem; }
.fuss ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.fuss a { color: var(--tinte-2); text-decoration: none; }
.fuss a:hover { color: var(--gruen); text-decoration: underline; }
.fuss-schluss { margin-top: 2.4rem; padding-top: 1.4rem; border-top: 1px solid var(--linie); font-size: 0.82rem; color: var(--tinte-3); display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; }

.nur-lesbar { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Druck und PDF ----------
   Das Blatt soll fertig aussehen, nicht wie ein abfotografierter Bildschirm.
   kern.js ergänzt vorher Kopf, Fuss und Datum und klappt die Faltkästen auf;
   hier wird alles ausgeblendet, was auf Papier keinen Sinn ergibt. */

@page { margin: 16mm 13mm 18mm; }

@media print {
  :root { --papier: #fff; --papier-2: #fff; --papier-3: #f4f4f4; }

  html, body { background: #fff !important; color: #000; font-size: 10.5pt; }

  /* Diagramme bestehen aus Flächen. Ohne das druckt der Browser sie weiss. */
  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }

  /* Bedienung, Werbung und Navigation gehören nicht aufs Blatt. */
  .kopf, .fuss, .knopf-reihe, .navi, .brotkrumen, .verwandt, .megamenue,
  .schnellsuche, .objektwahl, .werbung, .einwilligung, .licht3d, .ornament,
  [data-werbung], [data-thema-knopf], [data-einwilligung], [data-dokument-einstellungen],
  button, .knopf, .filterzeile, .rollen-gitter, .zurueck-nach-oben,
  .mehrzahlen > summary, details.formel > summary { display: none !important; }

  /* Leere Kästen erzeugen sonst leere Rahmen — kern.js markiert sie. */
  [data-druck-leer] { display: none !important; }

  .deko::before, .deko::after { display: none !important; }

  /* Der Kopf, den kern.js einsetzt. */
  .druckkopf {
    border-bottom: 2px solid #1e4b3c; padding-bottom: .5rem; margin-bottom: 1.2rem;
  }
  .druckkopf-zeile {
    display: flex; justify-content: space-between; gap: 2rem;
    font-size: 8.5pt; letter-spacing: .06em; text-transform: uppercase; color: #1e4b3c;
  }
  .druckkopf h2 { font-size: 16pt; margin: .5rem 0 .2rem; }
  .druckkopf p { font-size: 8pt; color: #555; margin: 0; }

  .druckfuss {
    margin-top: 1.4rem; padding-top: .6rem; border-top: 1px solid #bbb;
    font-size: 7.8pt; line-height: 1.45; color: #444; break-inside: avoid;
  }
  .druckfuss p { margin: 0 0 .35rem; }

  /* Eine Spalte: Eingaben zuerst, Ergebnis darunter. Nebeneinander wird auf
     A4 zu schmal, und die Diagramme werden unlesbar. */
  .rechner-gitter { display: block !important; }
  .rechner-ausgabe { position: static !important; display: block !important; }
  .rechner-ausgabe > * { margin-top: .8rem; }
  .rechner-kopf { padding-block: 0 .6rem; }
  .huelle, .huelle.schmal { max-width: none; padding-inline: 0; }
  section { padding-block: .5rem; }
  main > section:first-of-type h1 { display: none; } /* steht schon im Druckkopf */

  .karte, .ergebnis {
    border: 1px solid #ccc; box-shadow: none; background: #fff;
    break-inside: avoid; page-break-inside: avoid; padding: .7rem .9rem;
  }
  .zahl-gross { font-size: 20pt; }
  h2 { font-size: 13pt; }
  h3 { font-size: 11pt; }
  table { font-size: 9pt; }
  thead { display: table-header-group; }
  tr, .zeile, .kennzahl, li { break-inside: avoid; page-break-inside: avoid; }
  svg { max-width: 100%; height: auto; }

  /* Eingabefelder als Werte lesbar machen, nicht als Bedienelemente. */
  input, select, textarea {
    border: none !important; border-bottom: 1px solid #999 !important;
    background: none !important; padding: 0 !important; font-weight: 600;
    -webkit-appearance: none; appearance: none;
  }
  .mit-einheit { border: none !important; background: none !important; padding: 0 !important; }

  /* Faltkästen sind offen; ihr Inhalt soll ohne Rahmen weiterlaufen. */
  details, details[open] { border: none !important; background: none !important; }
  details > .inhalt, .mehrzahlen-inhalt { padding: 0 !important; }

  /* Das Kennzahlengitter füllt die letzte Reihe mit seiner Hintergrundfarbe
     auf. Auf dem Bildschirm ist das eine feine Linie, auf Papier ein grauer
     Klotz neben der letzten Zahl. */
  .kennzahl { border-color: #ddd; padding: .5rem .6rem; }
  .kennzahl dd { font-size: 12pt; }

  a { text-decoration: none; color: #000; }
  a[href^="http"]::after { content: ""; }
}

/* ---------- Rechnerseiten ---------- */

.rechner-kopf { padding-block: clamp(2rem, 4vw, 3.2rem) 1.4rem; }
.rechner-kopf h1 { font-size: clamp(1.9rem, 1.3rem + 2.1vw, 2.9rem); }
.rechner-gitter { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(1.2rem, 3vw, 2.4rem); align-items: start; }
@media (max-width: 880px) { .rechner-gitter { grid-template-columns: 1fr; } }
.rechner-ausgabe { position: sticky; top: 88px; display: grid; gap: 1rem; }
@media (max-width: 880px) { .rechner-ausgabe { position: static; } }

.block { display: grid; gap: 1rem; }
.block + .block { margin-top: 1.6rem; padding-top: 1.5rem; border-top: 1px solid var(--linie); }
.block-titel { font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--messing); font-weight: 600; }
.paar { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: start; }
@media (max-width: 460px) { .paar { grid-template-columns: 1fr; } }

/* Damit die Eingaben auch dann auf einer Linie stehen, wenn eine Beschriftung
   umbricht und die andere nicht: Beide Felder teilen sich die Zeilen des
   Elternrasters. Wo subgrid fehlt, greift align-content: start von oben — dann
   stimmt die Ausrichtung immer noch, solange die Beschriftungen gleich hoch
   sind. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 461px) {
    .paar { grid-template-rows: auto auto auto; align-items: stretch; }
    .paar > .feld { grid-row: span 3; grid-template-rows: subgrid; }
  }
}

.balken { display: flex; height: 9px; border-radius: 99px; overflow: hidden; background: var(--papier-3); }
.balken span { display: block; height: 100%; }
.legende { display: grid; gap: 0.35rem; font-size: 0.88rem; margin-top: 0.8rem; }
.legende div { display: flex; align-items: center; gap: 0.5rem; }
.legende i { width: 9px; height: 9px; border-radius: 3px; flex: none; }
.legende b { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 500; }

.spanne { position: relative; height: 46px; margin: 1.2rem 0 0.4rem; }
.spanne-schiene { position: absolute; inset: 16px 0 auto; height: 8px; border-radius: 99px; background: linear-gradient(90deg, var(--papier-3), var(--gruen-blass), var(--papier-3)); border: 1px solid var(--linie); }
.spanne-feld { position: absolute; top: 16px; height: 8px; background: var(--gruen); opacity: 0.32; }
.spanne-marke { position: absolute; top: 8px; width: 3px; height: 24px; border-radius: 2px; background: var(--messing); }
.spanne-beschriftung { position: absolute; top: 34px; font-size: 0.74rem; color: var(--tinte-3); transform: translateX(-50%); white-space: nowrap; }

.merkliste { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.merkliste li { display: flex; gap: 0.6rem; font-size: 0.93rem; }
.merkliste li::before { content: '—'; color: var(--messing); flex: none; }
.merkliste li.ja::before { content: '✓'; color: var(--gruen); font-weight: 700; }
.merkliste li.nein::before { content: '✕'; color: var(--rot); font-weight: 700; }

.zeilen { display: grid; gap: 0.55rem; font-size: 0.94rem; }
.zeile { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
.zeile span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }
.zeile.summe { border-top: 1px solid var(--linie-stark); padding-top: 0.55rem; margin-top: 0.25rem; font-weight: 600; }
.zeile.abzug span:last-child { color: var(--rot); }
.zeile small { color: var(--tinte-3); display: block; font-size: 0.82rem; }

.verwandt { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
.verwandt a { font-size: 0.88rem; padding: 0.4rem 0.85rem; border: 1px solid var(--linie-stark); border-radius: 99px; text-decoration: none; color: var(--tinte-2); }
.verwandt a:hover { border-color: var(--gruen); color: var(--gruen); background: var(--gruen-blass); }

/* ---------- Erzeugte Schreiben ---------- */

.brief {
  background: var(--papier-2); color: var(--tinte);
  font-size: 0.95rem; line-height: 1.6;
  padding: clamp(1rem, 3vw, 2rem);
}
.brief-kopf { display: flex; justify-content: space-between; gap: 2rem; flex-wrap: wrap; margin-bottom: 2.2rem; }
.brief-absender { font-size: 0.86rem; color: var(--tinte-2); }
.brief-datum { font-size: 0.86rem; color: var(--tinte-2); white-space: nowrap; }
.brief-empfaenger { margin-bottom: 2.4rem; }
.brief h4 { font-size: 1rem; font-weight: 600; margin: 0 0 1.2rem; }
.brief table { font-size: 0.9rem; margin-block: 1rem; }
.brief-gruss { margin-top: 2rem; }
.brief-fuss { margin-top: 2.4rem; padding-top: 1rem; border-top: 1px solid var(--linie); font-size: 0.8rem; color: var(--tinte-3); }

@media print {
  body.nur-brief > *:not(main) { display: none !important; }
  body.nur-brief main > section > .huelle > *:not(.rechner-gitter) { display: none !important; }
  body.nur-brief .rechner-gitter > form,
  body.nur-brief .rechner-ausgabe > *:not([data-pro-bereich]),
  body.nur-brief [data-dokument-einstellungen],
  body.nur-brief main > section:not(:nth-of-type(2)) { display: none !important; }
  body.nur-brief .rechner-gitter { display: block !important; }
  body.nur-brief .karte { border: none !important; box-shadow: none !important; padding: 0 !important; }
  body.nur-brief .brief { padding: 0; }
  body.nur-brief .brief-kopf, body.nur-brief .brief-datum, body.nur-brief .brief-absender { color: #333; }
}

/* ---------- Hintergrundgrafiken ----------
   Die Motive liegen als SVG in assets/bild und werden als Maske geladen, nicht
   als Bild. So bestimmt die CSS-Farbe, wie sie aussehen, und dasselbe Motiv
   trägt helle wie dunkle Ansicht. Erzeugt von scripts/build_grafik.py. */

.deko { position: relative; isolation: isolate; }
.deko > * { position: relative; z-index: 1; }
.deko::before, .deko::after { content: ''; position: absolute; pointer-events: none; z-index: 0; }

/* Flurkarte, groß und sehr blass, rechts angeschnitten */
.deko-kataster::after {
  inset: -8% -14% -8% 34%;
  background-color: var(--gruen);
  -webkit-mask: url('../bild/kataster.svg') right center / contain no-repeat;
  mask: url('../bild/kataster.svg') right center / contain no-repeat;
  /* Über eine Variable statt über Spezifität, damit die dunkle Ansicht und der
     3D-Hintergrund den Wert unabhängig voneinander setzen können. */
  opacity: var(--kataster-deckung, 0.07);
}
@media (prefers-color-scheme: dark) { :root:not([data-thema='hell']) { --kataster-deckung: 0.11; } }
:root[data-thema='dunkel'] { --kataster-deckung: 0.11; }
@media (max-width: 720px) { .deko-kataster::after { inset: auto -30% -4% 10%; height: 46%; opacity: 0.05; } }

/* Warmer Lichtschein hinter der Überschrift */
.deko-schein::before {
  inset: -60% -10% -40% -40%;
  background: radial-gradient(42% 46% at 38% 52%, color-mix(in srgb, var(--messing) 15%, transparent), transparent 68%);
}
@media (prefers-color-scheme: dark) { :root:not([data-thema='hell']) .deko-schein::before { opacity: 0.55; } }
:root[data-thema='dunkel'] .deko-schein::before { opacity: 0.55; }

/* Millimeterraster als ruhige Textur */
.deko-raster::before {
  inset: 0;
  background-color: var(--tinte);
  -webkit-mask: url('../bild/raster.svg') 0 0 / 64px 64px repeat;
  mask: url('../bild/raster.svg') 0 0 / 64px 64px repeat;
  opacity: 0.05;
  -webkit-mask-composite: source-over;
}
.deko-raster::after {
  inset: 0;
  background: linear-gradient(to bottom, var(--papier-3), transparent 30%, transparent 70%, var(--papier-3));
}

/* Höhenlinien im Fußbereich */
.deko-hoehen::before {
  inset: auto 0 0 0; height: 260px;
  background-color: var(--gruen);
  -webkit-mask: url('../bild/hoehenlinien.svg') bottom center / 100% auto no-repeat;
  mask: url('../bild/hoehenlinien.svg') bottom center / 100% auto no-repeat;
  opacity: 0.09;
}
@media (prefers-color-scheme: dark) { :root:not([data-thema='hell']) .deko-hoehen::before { opacity: 0.14; } }
:root[data-thema='dunkel'] .deko-hoehen::before { opacity: 0.14; }

/* Trennornament zwischen Abschnitten */
.ornament {
  display: flex; align-items: center; gap: 0.9rem;
  color: var(--linie-stark); margin-block: 0;
}
.ornament::before, .ornament::after {
  content: ''; height: 1px; flex: 1;
  background: linear-gradient(to right, transparent, var(--linie-stark), transparent);
}
.ornament span { color: var(--messing); font-size: 0.7rem; letter-spacing: 0.2em; }

@media print { .deko::before, .deko::after { display: none !important; } }

/* Rechnerköpfe bekommen dasselbe Motiv, nur zurückhaltender. */
.rechner-kopf { position: relative; overflow: hidden; isolation: isolate; }
.rechner-kopf > * { position: relative; z-index: 1; }
.rechner-kopf::after {
  content: ''; position: absolute; inset: -20% -12% -20% 52%; z-index: 0; pointer-events: none;
  background-color: var(--gruen);
  -webkit-mask: url('../bild/kataster.svg') right center / contain no-repeat;
  mask: url('../bild/kataster.svg') right center / contain no-repeat;
  opacity: 0.05;
}
@media (prefers-color-scheme: dark) { :root:not([data-thema='hell']) .rechner-kopf::after { opacity: 0.09; } }
:root[data-thema='dunkel'] .rechner-kopf::after { opacity: 0.09; }
@media (max-width: 880px) { .rechner-kopf::after { display: none; } }

.fuss { position: relative; overflow: hidden; }

/* ---------- Tornado: Einflussstärke einzelner Größen ---------- */

.tornado { display: grid; gap: 0.5rem; }
.tornado-zeile {
  display: grid; grid-template-columns: minmax(7rem, 11rem) minmax(0, 1fr) auto;
  gap: 0.7rem; align-items: center; font-size: 0.88rem;
}
.tornado-name { color: var(--tinte-2); }
.tornado-spur {
  display: grid; grid-template-columns: 1fr 1fr; align-items: center;
  border-left: 1px solid var(--linie); border-right: 1px solid var(--linie);
  position: relative;
}
.tornado-spur::before {
  content: ''; position: absolute; left: 50%; top: -3px; bottom: -3px;
  width: 1px; background: var(--linie-stark);
}
.tornado-halb { display: flex; height: 16px; align-items: center; }
.tornado-halb.links { justify-content: flex-end; }
.tornado-halb.rechts { justify-content: flex-start; }
.tornado-balken { display: block; height: 100%; border-radius: 3px; min-width: 0; }
.tornado-balken.schlecht { background: var(--rot); opacity: 0.7; border-radius: 3px 0 0 3px; }
.tornado-balken.gut { background: var(--gruen); opacity: 0.7; border-radius: 0 3px 3px 0; }
.tornado-wert { color: var(--tinte-3); font-size: 0.8rem; text-align: right; white-space: nowrap; }
.tornado-fuss { font-size: 0.8rem; color: var(--tinte-3); text-align: center; margin: 0.6rem 0 0; }

@media (max-width: 560px) {
  .tornado-zeile { grid-template-columns: 1fr; gap: 0.2rem; }
  .tornado-wert { text-align: left; }
}

/* ---------- Anzeigenplätze ----------
   AdSense verlangt, dass Werbung klar als solche erkennbar ist und nicht mit
   Bedienelementen verwechselt werden kann. Deshalb eigener Rahmen, deutlicher
   Abstand zu Knöpfen und eine Beschriftung, die nicht wegzuklicken ist. */

[data-werbung] {
  display: block;
  margin-block: clamp(1.6rem, 4vw, 2.6rem);
  padding: 0.9rem;
  border: 1px solid var(--linie);
  border-radius: var(--radius-klein);
  background: var(--papier-3);
  min-height: 0;
  overflow: hidden;
}
[data-werbung='seite'] { margin-block: 0; }
.werbung-marke {
  font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--tinte-3); margin: 0 0 0.6rem; text-align: center;
}
[data-werbung] ins { display: block; min-height: 90px; }

@media print { [data-werbung] { display: none !important; } }

/* ---------- Animierter 3D-Hintergrund ---------- */

/* Farbtöne für das Lichtfeld im Hintergrund, damit es sich unabhängig vom
   Rest abstimmen lässt. licht3d.js liest sie zur Laufzeit aus. */
:root {
  --licht-warm: #d9a441;
  --licht-frisch: #4aa87a;
  --licht-zart: #e0a68f;
  --licht-linien: 0.30;
  --licht-deckung: 0.62;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-thema='hell']) {
    --licht-warm: #c98f36;
    --licht-frisch: #3f9f76;
    --licht-zart: #b0705d;
    --licht-linien: 0.22;
    --licht-deckung: 0.44;
  }
}
:root[data-thema='dunkel'] {
  --licht-warm: #c98f36;
  --licht-frisch: #3f9f76;
  --licht-zart: #b0705d;
  --licht-linien: 0.22;
  --licht-deckung: 0.44;
}

.licht3d {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.4s ease;
  /* Zu allen Seiten auslaufen lassen, damit keine Kante entsteht. */
  -webkit-mask-image: radial-gradient(115% 105% at 62% 45%, #000 30%, transparent 82%);
  mask-image: radial-gradient(115% 105% at 62% 45%, #000 30%, transparent 82%);
}
.licht3d.sichtbar { opacity: 1; }

/* Damit die Überschrift lesbar bleibt, liegt ein Verlauf zwischen Licht und Text. */
.hat-licht3d::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(100deg,
    var(--papier) 0%,
    color-mix(in srgb, var(--papier) 94%, transparent) 32%,
    color-mix(in srgb, var(--papier) 66%, transparent) 52%,
    color-mix(in srgb, var(--papier) 14%, transparent) 74%,
    transparent 90%);
}
@media (max-width: 900px) {
  .hat-licht3d::before {
    background: linear-gradient(180deg,
      color-mix(in srgb, var(--papier) 90%, transparent) 0%,
      color-mix(in srgb, var(--papier) 84%, transparent) 55%,
      var(--papier) 100%);
  }
}

/* Wo das Lichtfeld läuft, tritt die statische Flurkarte ganz zurück —
   zwei Motive übereinander ergeben nur Unruhe. */
.hat-licht3d { --kataster-deckung: 0; }
.hat-licht3d.deko-schein::before { background: none; }

@media (max-width: 560px) { .licht3d { opacity: 0; } .licht3d.sichtbar { opacity: .55; } }
@media print { .licht3d { display: none; } }

/* ---------- Anzeigenplätze ----------
   AdSense verlangt, dass Werbung klar als solche erkennbar ist und nicht mit
   Bedienelementen verwechselt werden kann. Deshalb eigener Rahmen, deutlicher
   Abstand zu Knöpfen und eine Beschriftung, die nicht wegzuklicken ist. */

[data-werbung] {
  display: block;
  margin-block: clamp(1.6rem, 4vw, 2.6rem);
  padding: 0.9rem;
  border: 1px solid var(--linie);
  border-radius: var(--radius-klein);
  background: var(--papier-3);
  min-height: 0;
  overflow: hidden;
}
[data-werbung='seite'] { margin-block: 0; }
.werbung-marke {
  font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--tinte-3); margin: 0 0 0.6rem; text-align: center;
}
[data-werbung] ins { display: block; min-height: 90px; }

@media print { [data-werbung] { display: none !important; } }

/* ---------- Raumliste im Wohnflächenrechner ---------- */

.raum-zeile {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) 6.2rem 6.2rem minmax(0, 1.5fr) auto;
  gap: 0.45rem; align-items: center; margin-bottom: 0.5rem;
}
.raum-zeile input, .raum-zeile select { font-size: 0.92rem; padding: 0.45rem 0.6rem; }
.raum-zeile .mit-einheit input { padding-right: 2rem; }
.raum-zeile .einheit { font-size: 0.78rem; }
@media (max-width: 720px) {
  .raum-zeile { grid-template-columns: 1fr 1fr; gap: 0.4rem; padding-bottom: 0.7rem;
                border-bottom: 1px solid var(--linie); }
  .raum-zeile > :first-child { grid-column: 1 / -1; }
  .raum-zeile > :nth-child(4) { grid-column: 1 / -1; }
}

/* ---------- Brotkrumen ---------- */

.brotkrumen { padding-top: 1.1rem; font-size: 0.85rem; }
.brotkrumen ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; }
.brotkrumen li { color: var(--tinte-3); }
.brotkrumen li + li::before { content: '›'; margin-right: 0.5rem; color: var(--linie-stark); }
.brotkrumen a { color: var(--tinte-2); text-decoration: none; }
.brotkrumen a:hover { color: var(--gruen); text-decoration: underline; }

/* ---------- Häufige Fragen ---------- */

.faq { display: grid; gap: 0.6rem; }
.faq-frage {
  border: 1px solid var(--linie); border-radius: var(--radius-klein);
  background: var(--papier-2); overflow: hidden;
}
.faq-frage summary {
  cursor: pointer; list-style: none; padding: 0.95rem 1.1rem;
  font-weight: 500; display: flex; align-items: flex-start; gap: 0.7rem;
}
.faq-frage summary::-webkit-details-marker { display: none; }
.faq-frage summary::before {
  content: '＋'; color: var(--messing); flex: none; font-size: 0.9em; line-height: 1.5;
}
.faq-frage[open] summary::before { content: '−'; }
.faq-frage[open] summary { border-bottom: 1px solid var(--linie); }
.faq-frage:hover { border-color: var(--linie-stark); }
.faq-antwort { padding: 1rem 1.1rem 1.2rem 2.5rem; color: var(--tinte-2); font-size: 0.95rem; }
@media print { .faq-antwort { display: block !important; } }

/* ---------- Schnellsuche (Strg+K) ---------- */

.schnellsuche { position: fixed; inset: 0; z-index: 200; display: grid; place-items: start center; }
.schnellsuche[hidden] { display: none; }
.schnellsuche-schleier {
  position: absolute; inset: 0;
  background: color-mix(in srgb, var(--tinte) 42%, transparent);
  backdrop-filter: blur(3px);
}
.schnellsuche-feld {
  position: relative; width: min(620px, calc(100vw - 2rem)); margin-top: min(14vh, 7rem);
  background: var(--papier-2); border: 1px solid var(--linie-stark);
  border-radius: var(--radius); box-shadow: var(--schatten-hoch); overflow: hidden;
  animation: auftauchen 0.18s ease;
}
@keyframes auftauchen { from { opacity: 0; transform: translateY(-8px) scale(0.99); } }
.schnellsuche-kopf { display: flex; align-items: center; gap: 0.8rem; padding: 0.9rem 1.1rem; border-bottom: 1px solid var(--linie); }
.schnellsuche-kopf svg { width: 19px; height: 19px; color: var(--tinte-3); flex: none; }
.schnellsuche-kopf input {
  flex: 1; border: none; background: none; padding: 0; font-size: 1.02rem;
}
.schnellsuche-kopf input:focus { outline: none; box-shadow: none; }
.schnellsuche-liste { list-style: none; margin: 0; padding: 0.4rem; max-height: min(52vh, 26rem); overflow-y: auto; }
.schnellsuche-liste li {
  display: flex; align-items: center; gap: 0.85rem; padding: 0.6rem 0.75rem;
  border-radius: var(--radius-klein); cursor: pointer;
}
.schnellsuche-liste li.aktiv { background: var(--gruen-blass); }
.schnellsuche-liste li.leer { color: var(--tinte-3); cursor: default; justify-content: center; padding: 1.4rem; }
.schnellsuche-liste .kachel-zeichen { width: 20px; height: 20px; color: var(--gruen); flex: none; }
.schnellsuche-liste strong { display: block; font-weight: 600; font-size: 0.96rem; }
.schnellsuche-liste small { display: block; color: var(--tinte-3); font-size: 0.83rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.schnellsuche-liste span { min-width: 0; flex: 1; }
.schnellsuche-liste em { font-style: normal; font-size: 0.74rem; color: var(--messing);
  letter-spacing: 0.06em; text-transform: uppercase; flex: none; }
.schnellsuche-fuss { display: flex; gap: 1.2rem; margin: 0; padding: 0.6rem 1.1rem;
  border-top: 1px solid var(--linie); font-size: 0.78rem; color: var(--tinte-3); }
kbd {
  font: inherit; font-size: 0.76em; padding: 0.1rem 0.35rem; border-radius: 4px;
  border: 1px solid var(--linie-stark); background: var(--papier-3); color: var(--tinte-2);
  margin-right: 0.2rem;
}

/* Suchknopf in der Kopfzeile */
.suchknopf {
  display: inline-flex; align-items: center; gap: 0.55rem;
  background: var(--papier-3); border: 1px solid var(--linie);
  border-radius: 99px; padding: 0.36rem 0.5rem 0.36rem 0.8rem;
  color: var(--tinte-3); font: inherit; font-size: 0.87rem; cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.suchknopf:hover { border-color: var(--linie-stark); color: var(--tinte-2); }
.suchknopf svg { width: 15px; height: 15px; }
@media (max-width: 1100px) { .suchknopf span { display: none; } .suchknopf { padding: 0.4rem 0.55rem; } }

/* ---------- Objekt in den Rechner übernehmen ---------- */

.objektwahl {
  display: grid; gap: 0.4rem; margin-bottom: 1.4rem; padding-bottom: 1.3rem;
  border-bottom: 1px solid var(--linie);
}
.objektwahl > label { font-size: 0.87rem; font-weight: 500; color: var(--tinte-2); }
.objektwahl-zeile { display: flex; gap: 0.7rem; align-items: center; flex-wrap: wrap; }
.objektwahl-zeile select { flex: 1; min-width: 12rem; }
.objektwahl-hinweis { font-size: 0.85rem; color: var(--gruen); }

/* ---------- Kacheln mit Zeichen ---------- */

.kachel-zeichen { width: 26px; height: 26px; color: var(--gruen); margin-bottom: 0.15rem; }
.kachel:hover .kachel-zeichen { color: var(--messing); }
.kachel-zeichen, .kachel-nr, .kachel h3, .kachel p { transition: color 0.18s ease; }


/* ---------- Vertrauensleiste unter dem Kopfbereich ---------- */

.zahlenleiste {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: 1px; background: var(--linie);
  border: 1px solid var(--linie); border-radius: var(--radius); overflow: hidden;
}
.zahlenleiste > div { background: var(--papier-2); padding: 1.4rem 1.5rem; }
.zahlenleiste b {
  display: block; font-family: var(--serif); font-variation-settings: 'opsz' 70;
  font-size: clamp(1.55rem, 1.2rem + 1vw, 2.1rem); font-weight: 600;
  letter-spacing: -0.02em; color: var(--gruen); line-height: 1.1;
}
.zahlenleiste span { display: block; margin-top: 0.35rem; font-size: 0.88rem; color: var(--tinte-2); }

/* Kacheln etwas luftiger und mit weicherem Hoververhalten */
.kachel { padding: 1.6rem 1.6rem 1.7rem; }
.kachel:hover { transform: translateY(-3px); }


/* ---------- Kleingedrucktes ganz unten ---------- */

.kleingedrucktes {
  margin: 1.6rem 0 0;
  padding-top: 1.2rem;
  border-top: 1px solid var(--linie);
  font-size: 0.75rem;
  line-height: 1.65;
  color: var(--tinte-3);
  text-wrap: pretty;
}
.kleingedrucktes strong { color: var(--tinte-2); font-weight: 600; }
.kleingedrucktes a { color: var(--tinte-3); text-decoration: underline; text-underline-offset: 2px; }
.kleingedrucktes a:hover { color: var(--gruen); }
@media print { .kleingedrucktes { font-size: 7pt; } }

/* ---------- Verlaufsdiagramme ---------- */

.diagramm { margin-top: 0.4rem; }
.diagramm svg { max-width: 100%; }
.diagramm-legende {
  display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem;
  margin-top: 0.6rem; font-size: 0.85rem; color: var(--tinte-2);
}
.diagramm-legende span { display: inline-flex; align-items: center; gap: 0.45rem; }
.diagramm-legende i { width: 14px; height: 3px; border-radius: 2px; flex: none; }

/* ---------- Folgerungen aus den Zahlen ---------- */

.folgerungen { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.folgerungen li {
  display: grid; gap: 0.2rem;
  padding: 0.85rem 1rem 0.9rem 2.4rem;
  border-radius: var(--radius-klein);
  background: var(--papier-3);
  position: relative;
  font-size: 0.93rem;
}
.folgerungen li::before {
  position: absolute; left: 0.95rem; top: 0.85rem;
  font-weight: 700; line-height: 1.5;
}
.folgerungen li.gut { background: var(--gruen-blass); }
.folgerungen li.gut::before { content: '✓'; color: var(--gruen); }
.folgerungen li.warn { background: var(--rot-blass); }
.folgerungen li.warn::before { content: '!'; color: var(--rot); }
.folgerungen li.info::before { content: '→'; color: var(--messing); }
.folgerungen strong { font-weight: 600; }
.folgerungen span { color: var(--tinte-2); }

.diagramm-achse {
  font-size: 0.78rem; color: var(--tinte-3);
  text-transform: uppercase; letter-spacing: 0.06em;
  margin: 0 0 0.4rem;
}

.diagramm-achse-unten { margin: 0.35rem 0 0; text-align: center; }

/* ---------- Glossar ---------- */

.glossar-suche { margin-bottom: 1.4rem; }
.glossar-suchlabel {
  display: block; font-size: 0.78rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--tinte-3); margin-bottom: 0.5rem;
}
.glossar-suche input {
  width: 100%; font-size: 1.05rem; padding: 0.85rem 1.1rem;
}
.glossar-treffer {
  margin: 0.55rem 0 0; font-size: 0.85rem; color: var(--tinte-3); min-height: 1.2em;
}

.glossar-sprung {
  display: flex; flex-wrap: wrap; gap: 0.3rem;
  padding-top: 0.4rem; border-top: 1px solid var(--linie);
}
.glossar-sprung a {
  display: grid; place-items: center;
  min-width: 2rem; padding: 0.3rem 0.45rem;
  border-radius: var(--radius-klein);
  font-size: 0.88rem; font-weight: 600; text-decoration: none;
  color: var(--tinte-2); background: var(--papier-3);
}
.glossar-sprung a:hover { background: var(--gruen-blass); color: var(--gruen); }

.glossar-buchstabe {
  font-size: 1.6rem; color: var(--messing);
  margin: 0 0 0.9rem; padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--linie);
}
.glossar-liste { display: grid; gap: 1.5rem; }

.glossar-eintrag { scroll-margin-top: 5.5rem; }
.glossar-eintrag h3 {
  font-size: 1.08rem; margin: 0 0 0.35rem;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.6rem;
}
.glossar-bereich {
  font-family: var(--sans); font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--tinte-3); background: var(--papier-3);
  padding: 0.15rem 0.5rem; border-radius: 99px;
}
.glossar-eintrag p { margin: 0; color: var(--tinte-2); font-size: 0.95rem; }
.glossar-quelle {
  display: inline-block; margin-left: 0.2rem;
  font-size: 0.85rem; color: var(--messing); white-space: nowrap;
}
.glossar-verweise {
  margin-top: 0.5rem !important;
  display: flex; flex-wrap: wrap; gap: 0.4rem 1rem;
  font-size: 0.86rem;
}
.glossar-eintrag.hervor {
  background: var(--gruen-blass);
  border-radius: var(--radius-klein);
  padding: 0.9rem 1.1rem; margin: -0.9rem -1.1rem;
}

/* ---------- Aufgefächertes Rechnermenü ----------
   Ohne JavaScript: :hover und :focus-within öffnen das Feld. Der Auslöser
   bleibt ein echter Verweis, damit ein Klick auch dann zur Übersicht führt,
   wenn nichts aufklappen kann. */

/* Das Feld hängt am Kopfstreifen, nicht am Auslöser. Am Auslöser zentriert
   ragte es bei knapp tausend Pixeln Breite links aus dem Fenster. */
.kopf-innen { position: relative; }
.megamenue-huelle { display: inline-flex; }

.megamenue-ausloeser { display: inline-flex; align-items: center; gap: 0.35rem; }
.megamenue-ausloeser svg { opacity: 0.55; transition: transform 0.18s ease; }
.megamenue-huelle:hover .megamenue-ausloeser svg,
.megamenue-huelle:focus-within .megamenue-ausloeser svg { transform: rotate(180deg); }

.megamenue {
  position: absolute; top: calc(100% + 0.7rem); left: 0; right: 0;
  transform: translateY(-6px);
  padding: 1.6rem 1.7rem 1.1rem;
  background: var(--papier-2);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  box-shadow: 0 24px 60px -18px rgb(0 0 0 / 0.28);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  z-index: 60;
}
.megamenue-huelle:hover .megamenue,
.megamenue-huelle:focus-within .megamenue,
.megamenue:hover, .megamenue:focus-within {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateY(0);
}
/* Unsichtbare Brücke, damit der Zeiger die Lücke überqueren kann. */
.megamenue::before {
  content: ''; position: absolute; left: 0; right: 0; top: -0.8rem; height: 0.8rem;
}

.megamenue-gitter {
  display: grid; gap: 1.4rem 2rem;
  grid-template-columns: 1fr 1fr 1.75fr 1fr;
}
.megamenue-spalte.breit ul { columns: 2; column-gap: 1.4rem; }
.megamenue-spalte.breit li { break-inside: avoid; }
.megamenue-titel {
  margin: 0 0 0.15rem; font-size: 0.82rem; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--messing);
}
.megamenue-unter {
  margin: 0 0 0.7rem; font-size: 0.8rem; color: var(--tinte-3); line-height: 1.4;
}
.megamenue-spalte ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.1rem; }
.megamenue-spalte a {
  display: block; padding: 0.32rem 0.5rem; margin-left: -0.5rem;
  border-radius: var(--radius-klein);
  font-size: 0.9rem; color: var(--tinte-2); text-decoration: none;
}
.megamenue-spalte a:hover { background: var(--gruen-blass); color: var(--gruen); }

.megamenue-fuss {
  display: flex; flex-wrap: wrap; gap: 0.6rem 1.6rem;
  margin-top: 1.3rem; padding-top: 0.9rem;
  border-top: 1px solid var(--linie);
  font-size: 0.88rem;
}

/* Auf schmalen Schirmen klappt die Navigation ohnehin zur Liste auf.
   Dann steht das Feld einfach untereinander im Fluss. */
@media (max-width: 900px) {
  .megamenue-huelle { display: block; width: 100%; }
  .megamenue {
    position: static; transform: none; width: 100%; inset: auto;
    opacity: 1; visibility: visible; pointer-events: auto;
    padding: 0.9rem 0 0; margin-top: 0.4rem;
    background: none; border: none; box-shadow: none;
    border-top: 1px solid var(--linie); border-radius: 0;
  }
  .megamenue-gitter { grid-template-columns: 1fr; gap: 1.1rem; }
  .megamenue-spalte.breit ul { columns: 1; }
  .megamenue-ausloeser svg { display: none; }
  .megamenue-fuss { margin-top: 0.9rem; }
}

/* ---------- Analyseseite ---------- */

.analyse-gitter {
  display: grid; gap: 1.6rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
}
.analyse-breit { grid-column: 1 / -1; }
.analyse-gitter h2 { font-size: 1.25rem; margin: 0 0 0.4rem; }
.analyse-gitter .feld-hilfe { margin-bottom: 1.1rem; }

.analyse-lage {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  margin-top: 1.3rem; padding-top: 1.2rem;
  border-top: 1px solid var(--linie);
}
.analyse-punkt-titel {
  margin: 0; font-size: 0.72rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--tinte-3);
}
.analyse-punkt-wert {
  margin: 0.25rem 0 0.3rem; font-family: var(--serif);
  font-size: 1.5rem; line-height: 1;
}
.analyse-punkt-text { margin: 0; font-size: 0.85rem; color: var(--tinte-2); }

/* ---------- Die übrigen Rechner auf der Startseite ---------- */

.weitere-rechner {
  margin-top: 2.6rem; padding-top: 2rem;
  border-top: 1px solid var(--linie);
}
.weitere-gitter {
  display: grid; gap: 1.4rem 2rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}
.weitere-titel {
  margin: 0 0 0.55rem; font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.07em; text-transform: uppercase; color: var(--messing);
}
.weitere-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.28rem; }
.weitere-liste a {
  font-size: 0.93rem; color: var(--tinte-2); text-decoration: none;
  border-bottom: 1px solid transparent;
}
.weitere-liste a:hover { color: var(--gruen); border-bottom-color: currentColor; }

/* Überschrift und Verweis nebeneinander, auf schmalen Schirmen untereinander. */
.abschnitt-kopf-reihe {
  display: flex; flex-wrap: wrap; align-items: flex-end;
  justify-content: space-between; gap: 1.2rem 2rem;
  max-width: none;
}
.abschnitt-kopf-reihe > div { max-width: 60ch; }

/* ---------- Abbildungen auf den Rechnerkacheln ----------
   Selbst gezeichnet, siehe scripts/build_vignetten.py. Sie tragen keine
   eigenen Farben, sondern erben currentColor — damit passen sie sich der
   hellen wie der dunklen Ansicht an. */

.kachel-vignette {
  display: block;
  margin: -0.35rem 0 0.2rem;
  color: var(--gruen);
}
.kachel-vignette svg.vignette {
  display: block;
  width: 100%;
  max-width: 9.5rem;
  height: auto;
  overflow: visible;
}
.kachel:hover .kachel-vignette { color: var(--gruen-hell, var(--gruen)); }

/* Wo nur das Strichzeichen vorliegt, bleibt es bei der bisherigen Größe. */
.kachel-vignette .kachel-zeichen { width: 24px; height: 24px; }

@media (prefers-reduced-motion: no-preference) {
  .kachel-vignette svg.vignette { transition: color 0.18s ease; }
}

/* ---------- Zwei Filterachsen auf der Rechnerübersicht ---------- */

.filterzeile {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1rem;
  margin-top: 1.1rem;
}
.filter-titel {
  margin: 0; flex: none; min-width: 8.5rem;
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--tinte-3);
}
.filterzeile .schalter { margin: 0; flex: 1 1 auto; }
@media (max-width: 620px) { .filter-titel { min-width: 100%; } }

/* ---------- Einstieg nach Rolle ---------- */

.rollen-gitter {
  display: grid; gap: 1.1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}
.rollenkarte {
  display: flex; flex-direction: column; gap: 0.4rem;
  padding: 1.3rem 1.35rem 1.15rem;
  background: var(--papier-2);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  text-decoration: none; color: inherit;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.rollenkarte:hover {
  transform: translateY(-2px);
  border-color: var(--gruen);
  box-shadow: var(--schatten-hoch);
  color: inherit;
}
.rollenkarte svg { width: 26px; height: 26px; color: var(--gruen); }
.rollenkarte-frage {
  margin: 0.35rem 0 0; font-family: var(--serif);
  font-size: 0.9rem; color: var(--messing);
}
.rollenkarte h3 { margin: 0; font-size: 1.08rem; }
.rollenkarte p:not(.rollenkarte-frage) {
  margin: 0; font-size: 0.9rem; color: var(--tinte-2);
}
.rollenkarte-zahl {
  margin-top: auto; padding-top: 0.7rem;
  font-size: 0.8rem; color: var(--tinte-3);
}

.megamenue-rollen {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 1.1rem;
  margin-top: 1.2rem; padding-top: 0.9rem;
  border-top: 1px solid var(--linie);
  font-size: 0.88rem;
}
.megamenue-rollen > span {
  font-size: 0.78rem; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--tinte-3);
}
.megamenue-fuss { margin-top: 0.8rem !important; padding-top: 0.8rem !important; }

/* ---------- Sprungmarken in langen Rechtstexten ----------
   Art. 12 Abs. 1 DSGVO verlangt eine leicht zugängliche Form. Ein
   Inhaltsverzeichnis erfüllt das, ohne etwas zu verbergen — anders als ein
   Aufklappen, bei dem der Text erst auf Klick sichtbar wird. */

.inhalt-sprung {
  margin: 1.8rem 0 0;
  padding: 1.1rem 1.3rem 1.2rem;
  background: var(--papier-3);
  border-radius: var(--radius-klein);
}
.inhalt-sprung-titel {
  margin: 0 0 0.6rem; font-size: 0.76rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--tinte-3);
}
.inhalt-sprung ol {
  margin: 0; padding: 0; list-style: none;
  columns: 2; column-gap: 2rem;
  font-size: 0.92rem;
}
.inhalt-sprung li { break-inside: avoid; margin-bottom: 0.22rem; counter-increment: sprung; }
.inhalt-sprung li::before {
  content: counter(sprung) ". "; color: var(--tinte-3); font-variant-numeric: tabular-nums;
}
.inhalt-sprung { counter-reset: sprung; }
.inhalt-sprung a { color: var(--tinte-2); text-decoration: none; }
.inhalt-sprung a:hover { color: var(--gruen); text-decoration: underline; }
@media (max-width: 560px) { .inhalt-sprung ol { columns: 1; } }
h2[id] { scroll-margin-top: 5.5rem; }

/* ---------- Wasserfall ---------- */

.wasserfall { display: grid; gap: 0.4rem; }
.wasserfall-zeile {
  display: grid; grid-template-columns: 11rem 1fr auto;
  gap: 0.7rem; align-items: center;
}
.wasserfall-name {
  font-size: 0.86rem; color: var(--tinte-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wasserfall-spur { position: relative; display: block; height: 20px; }
.wasserfall-balken {
  position: absolute; top: 3px; bottom: 3px;
  border-radius: 2px; background: var(--tinte-3);
}
.wasserfall-zeile.zu .wasserfall-balken { background: var(--gruen); }
.wasserfall-zeile.ab .wasserfall-balken { background: var(--rot); opacity: 0.75; }
.wasserfall-zeile.gesamt .wasserfall-balken { background: var(--messing); }
.wasserfall-zeile.gesamt .wasserfall-name { font-weight: 600; color: var(--tinte); }
.wasserfall-wert {
  font-variant-numeric: tabular-nums; font-size: 0.88rem; font-weight: 500;
}
@media (max-width: 520px) {
  .wasserfall-zeile { grid-template-columns: 7.5rem 1fr auto; }
}

/* ---------- Ring ---------- */

.ring {
  display: grid; gap: 1.2rem 1.6rem; align-items: center;
  grid-template-columns: minmax(8rem, 11rem) 1fr;
}
.ring svg { width: 100%; height: auto; display: block; }
.ring-legende { display: grid; gap: 0.45rem; font-size: 0.88rem; }
.ring-legende > div {
  display: grid; grid-template-columns: auto 1fr auto auto;
  gap: 0.5rem; align-items: baseline;
}
.ring-legende i {
  width: 10px; height: 10px; border-radius: 3px; align-self: center;
}
.ring-legende span { color: var(--tinte-2); }
.ring-legende b { font-weight: 500; font-variant-numeric: tabular-nums; }
.ring-legende em {
  font-style: normal; color: var(--tinte-3); font-size: 0.82rem;
  min-width: 3.2rem; text-align: right; font-variant-numeric: tabular-nums;
}
@media (max-width: 520px) { .ring { grid-template-columns: 1fr; justify-items: center; } }

/* ---------- Skala mit benannten Schwellen ---------- */

.skala-spur {
  position: relative; display: flex;
  height: 18px; border-radius: var(--radius-klein); overflow: visible;
  border: 1px solid var(--linie);
}
.skala-feld {
  min-width: 0; border-right: 1px solid var(--papier-2);
}
.skala-feld:first-child { border-radius: var(--radius-klein) 0 0 var(--radius-klein); }
.skala-feld:last-child { border-right: none; border-radius: 0 var(--radius-klein) var(--radius-klein) 0; }
.skala-zeiger {
  position: absolute; top: -5px; bottom: -5px; width: 3px;
  border-radius: 2px; background: var(--tinte);
  transform: translateX(-50%);
  box-shadow: 0 0 0 2px var(--papier-2);
}
.skala-achse {
  position: relative; height: 1.1rem; margin-top: 0.45rem;
  font-size: 0.74rem; color: var(--tinte-3);
  font-variant-numeric: tabular-nums;
}
.skala-marke-wert { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.skala-marke-wert:first-child { transform: none; }
.skala-marke-wert:last-child { transform: translateX(-100%); }
.skala-fuss { margin: 0.5rem 0 0; font-size: 0.92rem; color: var(--tinte-2); }
.skala-legende {
  display: flex; flex-wrap: wrap; gap: 0.3rem 1.1rem;
  margin-top: 0.6rem; font-size: 0.8rem; color: var(--tinte-3);
}
.skala-legende span { display: inline-flex; align-items: center; gap: 0.4rem; }
.skala-legende i { width: 10px; height: 10px; border-radius: 3px; opacity: 0.55; }

/* ---------- Ranglisten ---------- */

.rangtabelle { width: 100%; }
.rangtabelle th.rang, .rangtabelle td.rang {
  width: 3.2rem; text-align: right; color: var(--tinte-3);
  font-variant-numeric: tabular-nums; font-weight: 400;
}
.rangtabelle thead th { padding: 0; }
.rangtabelle thead button {
  width: 100%; display: flex; align-items: center; gap: 0.35rem;
  padding: 0.7rem 0.6rem; background: none; border: none; cursor: pointer;
  font: inherit; font-size: 0.74rem; font-weight: 600;
  letter-spacing: 0.07em; text-transform: uppercase; color: var(--tinte-3);
}
.rangtabelle thead th.zahl button { justify-content: flex-end; }
.rangtabelle thead button:hover { color: var(--gruen); }
.rangtabelle thead th.sortiert button { color: var(--gruen); }
.rangtabelle thead button span { font-size: 0.9em; }
.rangtabelle tbody tr.hervor { background: var(--gruen-blass); }
.rangtabelle tbody tr.hervor td, .rangtabelle tbody tr.hervor th { font-weight: 600; }
.rangtabelle small { display: block; color: var(--tinte-3); font-size: 0.8em; }
.rangliste-mehr { display: flex; justify-content: center; margin-top: 1.2rem; }

/* ---------- Schnelleingabe: alles auf einmal ----------
   Der Kasten sitzt im Formular, gehört aber nicht dazu. Er ist deshalb
   bewusst anders gesetzt als die Eingabefelder darunter: eigener Grund,
   Messingakzent, gepunkteter Rand. Wer ihn übersieht, verliert nichts; wer
   ihn benutzt, spart sich zwanzig Tastatureingaben. */

.schnelleingabe {
  margin-bottom: 1.7rem;
  border: 1px solid var(--linie-stark);
  border-radius: var(--radius-klein);
  background:
    linear-gradient(180deg, var(--messing-blass), transparent 62%),
    var(--papier-2);
  overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.schnelleingabe:hover { border-color: var(--messing); }
.schnelleingabe[open] { box-shadow: var(--schatten); border-color: var(--messing); }

.schnelleingabe > summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center; gap: 0.85rem;
  padding: 0.9rem 1.1rem;
  cursor: pointer; list-style: none;
}
.schnelleingabe > summary::-webkit-details-marker { display: none; }
.schnelleingabe > summary:focus-visible { outline: 2px solid var(--gruen); outline-offset: -2px; }

.schnell-marke {
  display: grid; place-items: center;
  width: 2.15rem; height: 2.15rem; flex: none;
  border-radius: 9px; background: var(--papier-2);
  border: 1px solid var(--linie); color: var(--messing);
}
.schnell-marke svg { width: 1.15rem; height: 1.15rem; }

.schnell-kopf { display: grid; gap: 0.1rem; min-width: 0; }
.schnell-kopf strong { font-size: 0.98rem; }
.schnell-kopf small { font-size: 0.82rem; color: var(--tinte-3); line-height: 1.4; }

.schnelleingabe kbd {
  font: inherit; font-size: 0.72rem; letter-spacing: 0.03em;
  padding: 0.2rem 0.45rem; border-radius: 6px;
  border: 1px solid var(--linie-stark); color: var(--tinte-3);
  background: var(--papier-2); white-space: nowrap;
}
@media (max-width: 620px) { .schnelleingabe kbd { display: none; } }


.schnell-pfeil {
  width: 0.62rem; height: 0.62rem; flex: none;
  border-right: 1.8px solid var(--messing); border-bottom: 1.8px solid var(--messing);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.22s;
}
.schnelleingabe[open] .schnell-pfeil { transform: rotate(-135deg) translate(-2px, -2px); }

.schnelleingabe-inhalt {
  display: grid; gap: 1rem;
  padding: 0 1.1rem 1.1rem;
  border-top: 1px solid var(--linie); padding-top: 1rem;
  background: var(--papier-2);
}

.schnelleingabe textarea {
  width: 100%; resize: vertical; min-height: 7.5rem;
  font: inherit; font-size: 0.93rem; line-height: 1.6;
  padding: 0.8rem 0.95rem;
  border: 1px solid var(--linie-stark); border-radius: var(--radius-klein);
  background: var(--papier); color: var(--tinte);
  box-shadow: inset 0 1px 2px rgba(22, 32, 28, 0.04);
}
.schnelleingabe textarea::placeholder { color: var(--tinte-3); }
.schnelleingabe textarea:focus-visible {
  outline: none; border-color: var(--gruen);
  box-shadow: 0 0 0 3px var(--gruen-blass);
}

/* Fortschritt: wie viele Felder von wie vielen. Die Zahl allein sagt wenig,
   der Balken daneben macht sie auf einen Blick lesbar. */
.schnell-fortschritt {
  display: flex; align-items: center; gap: 0.8rem;
  font-size: 0.82rem; color: var(--tinte-3); margin-bottom: 0.7rem;
}
.schnell-balken {
  flex: 1; height: 5px; border-radius: 99px;
  background: var(--papier-3); overflow: hidden; min-width: 3rem;
}
.schnell-balken i {
  display: block; height: 100%; background: var(--gruen);
  border-radius: 99px; transition: width 0.25s;
}

.schnell-liste {
  display: grid;
  border: 1px solid var(--linie); border-radius: var(--radius-klein);
  overflow: hidden;
}
.schnell-zeile {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: 'kasten feld wert' '. quelle quelle';
  align-items: center; gap: 0.15rem 0.7rem;
  padding: 0.6rem 0.85rem; cursor: pointer;
  background: var(--papier-2);
  transition: background 0.15s;
}
.schnell-zeile + .schnell-zeile { border-top: 1px solid var(--linie); }
.schnell-zeile:hover { background: var(--gruen-blass); }
.schnell-zeile input { position: absolute; opacity: 0; pointer-events: none; }

.schnell-kaestchen {
  grid-area: kasten;
  display: grid; place-items: center;
  width: 1.15rem; height: 1.15rem; flex: none;
  border: 1.5px solid var(--linie-stark); border-radius: 5px;
  background: var(--papier-2); color: transparent;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.schnell-haken { width: 0.85rem; height: 0.85rem; }
.schnell-zeile input:checked + .schnell-kaestchen {
  background: var(--gruen); border-color: var(--gruen); color: var(--papier-2);
}
.schnell-zeile input:focus-visible + .schnell-kaestchen {
  outline: 2px solid var(--gruen); outline-offset: 2px;
}

.schnell-feld { grid-area: feld; font-weight: 500; font-size: 0.93rem; }
.schnell-wert {
  grid-area: wert; font-weight: 600; font-size: 0.95rem;
  font-variant-numeric: tabular-nums lining-nums; white-space: nowrap;
}
.schnell-quelle {
  grid-area: quelle; font-size: 0.78rem; color: var(--tinte-3); line-height: 1.4;
}

/* Mehrdeutiges kommt abgewählt an und sagt auch warum. Messing statt Rot:
   Es ist kein Fehler, sondern eine Entscheidung, die der Nutzer treffen muss. */
.schnell-zeile.unsicher { background: var(--messing-blass); }
.schnell-zeile.unsicher .schnell-quelle { color: var(--messing); }
.schnell-zeile.unsicher .schnell-kaestchen { border-color: var(--messing); }

.schnell-titel {
  font-size: 0.74rem; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--messing); font-weight: 600; margin: 1.1rem 0 0.35rem;
}
.schnell-rest { display: grid; gap: 0.45rem; margin-top: 0.5rem; }
.schnell-rest label {
  display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
}
.schnell-rest code {
  min-width: 5.5rem; text-align: right;
  font-variant-numeric: tabular-nums; font-size: 0.88rem;
  background: var(--papier-3); border: 1px solid var(--linie);
  border-radius: 6px; padding: 0.2rem 0.5rem;
}
.schnell-rest select { flex: 1; min-width: 12rem; font-size: 0.88rem; padding: 0.35rem 0.55rem; }

.schnell-leiste { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
.schnell-fuss { margin: 0; }

/* Auf schmalen Schirmen bricht die Unterzeile auf vier Zeilen um, und das
   Zeichen daneben steht dann sinnlos in der Mitte. Oben ausrichten und den
   Text auf zwei Zeilen kürzen. */
@media (max-width: 560px) {
  .schnelleingabe > summary { align-items: start; gap: 0.7rem; padding: 0.8rem 0.9rem; }
  .schnell-marke { width: 1.9rem; height: 1.9rem; }
  .schnell-kopf small {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .schnell-pfeil { margin-top: 0.45rem; }
  .schnelleingabe-inhalt { padding-inline: 0.9rem; }
  .schnell-zeile { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: 'kasten feld' '. wert' '. quelle'; }
  .schnell-wert { justify-self: start; }
}

@media print { .schnelleingabe { display: none !important; } }

/* ---------- Weiterrechnen: kuratierte Querverweise ---------- */

.weiter-gitter {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
}
.weiter-karte {
  display: block; text-decoration: none; color: inherit;
  border: 1px solid var(--linie); border-radius: var(--radius-klein);
  padding: 1.1rem 1.2rem; background: var(--papier-2);
  transition: border-color .18s, transform .18s;
}
.weiter-karte:hover { border-color: var(--gruen); transform: translateY(-2px); }
.weiter-karte h3 {
  font-size: 1.02rem; margin: 0 0 .35rem;
  display: flex; align-items: baseline; gap: .4rem;
}
.weiter-karte h3::after {
  content: '→'; color: var(--messing); font-size: .9em; margin-left: auto;
}
.weiter-karte p { margin: 0; font-size: .9rem; color: var(--tinte-2); line-height: 1.5; }

@media print { .weiter-gitter, .weiter-karte { display: none !important; } }

/* ---------- Aufklappbare Zusatzauswertung ---------- */

.mehrzahlen { padding: 0; }
.mehrzahlen > summary {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.8rem;
  padding: clamp(1rem, 2.6vw, 1.35rem) clamp(1.2rem, 3vw, 1.9rem);
  cursor: pointer; list-style: none;
  font-weight: 600;
}
.mehrzahlen > summary::-webkit-details-marker { display: none; }
.mehrzahlen > summary::after {
  content: '+'; margin-left: auto;
  font-family: var(--serif); font-size: 1.3rem; line-height: 1;
  color: var(--messing);
}
.mehrzahlen[open] > summary::after { content: '−'; }
.mehrzahlen > summary small {
  font-weight: 400; font-size: 0.85rem; color: var(--tinte-3);
}
.mehrzahlen > summary:hover { color: var(--gruen); }
.mehrzahlen-inhalt {
  padding: 0 clamp(1.2rem, 3vw, 1.9rem) clamp(1.2rem, 3vw, 1.7rem);
  border-top: 1px solid var(--linie);
  padding-top: 1.2rem;
}
.mehrzahlen-inhalt h4 {
  margin: 1.6rem 0 0.3rem; font-size: 0.98rem;
}
.mehrzahlen-inhalt h4:first-child { margin-top: 0; }
.mehrzahlen-inhalt .feld-hilfe { margin-bottom: 1rem; }
.tafel { font-size: 0.86rem; }
.tafel th { white-space: nowrap; }
.tafel th[scope='row'] { color: var(--tinte-3); font-weight: 500; text-align: right; }
.tafel td { font-variant-numeric: tabular-nums; text-align: right; }
.tafel thead tr:first-child th { text-align: center; color: var(--messing); }
.mehrzahlen-fussnote {
  margin-top: 1.6rem; padding-top: .9rem; border-top: 1px solid var(--linie);
  font-size: .82rem; line-height: 1.5; color: var(--tinte-3);
}