/* Steinfresh® Penny, steinpflege-penny.de
   Gestaltung angelehnt an die Steinfresh-Landingpage 2026: Grün und Grau, eckig, schwere Schrift. */

@font-face {
  font-family: "Noto Sans JP";
  src: url("schrift/noto-sans-jp-latin-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  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 {
  --gruen: #75b837;          /* Steinfresh-Grün, nur Flächen und Linien */
  --gruen-tief: #4a7a1e;     /* Knöpfe und Links, 5:1 auf Weiß */
  --gruen-dunkel: #3c6418;
  --gruen-hauch: #f1f7ea;
  --grau: #6c686c;           /* Steinfresh-Grau, Überschriften */
  --grau-dunkel: #4f4c4f;    /* dunkle Abschnitte */
  --text: #3a373a;
  --text-leise: #5e5a5e;
  --linie: rgba(108, 104, 108, .18);
  --flaeche: #f3f3f2;
  --weiss: #ffffff;
  --schatten: 0 10px 30px rgba(40, 38, 40, .10);
  --breite: 1180px;
  --rand: clamp(16px, 4vw, 40px);
  --kopf: 76px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--kopf) + 12px); }
body {
  margin: 0;
  font-family: "Noto Sans JP", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--text);
  background: var(--weiss);
  font-feature-settings: "palt" 0;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--gruen-tief); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--gruen-dunkel); }
::selection { background: var(--gruen); color: #fff; }
:focus-visible { outline: 3px solid var(--gruen); outline-offset: 3px; }

h1, h2, h3 { color: var(--grau); line-height: 1.08; margin: 0 0 .5em; text-wrap: balance; letter-spacing: -.02em; }
h1 { font-weight: 900; font-size: clamp(2.3rem, 4.6vw, 3.75rem); letter-spacing: -.03em; line-height: 1.02; }
h2 { font-weight: 900; font-size: clamp(1.85rem, 3.4vw, 2.85rem); }
h3 { font-weight: 800; font-size: 1.3rem; line-height: 1.25; letter-spacing: -.01em; }
p { margin: 0 0 1em; }
.lead { font-size: clamp(1.1rem, 1.6vw, 1.25rem); color: var(--text-leise); max-width: 34em; }

.rahmen { width: 100%; max-width: var(--breite); margin: 0 auto; padding: 0 var(--rand); }
.abschnitt { padding: clamp(64px, 9vw, 120px) 0; }
.abschnitt--flaeche { background: var(--flaeche); }
.abschnitt--dunkel { background: var(--grau-dunkel); color: #f4f3f4; }
.abschnitt--dunkel h2, .abschnitt--dunkel h3 { color: #fff; }
.abschnitt-kopf { max-width: 46rem; margin-bottom: clamp(32px, 4vw, 56px); }
.abschnitt-kopf p { color: var(--text-leise); font-size: 1.125rem; }

.nur-vorleser { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.icon { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Knöpfe: rechteckig wie im Steinfresh-System */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-height: 52px; padding: .8em 1.4em;
  font: inherit; font-weight: 800; font-size: 1.02rem; line-height: 1.2;
  text-decoration: none; border: 2px solid transparent; border-radius: 0; cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.knopf--gruen { background: var(--gruen-tief); color: #fff; }
.knopf--gruen:hover { background: var(--gruen-dunkel); color: #fff; }
.knopf--rand { border-color: var(--grau); color: var(--grau); background: transparent; }
.knopf--rand:hover { background: var(--grau); color: #fff; }
.knopf:active { transform: translateY(1px); }
.knopf .icon { width: 1.1em; height: 1.1em; }

/* Kopf */
.kopf {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .97);
  border-top: 3px solid var(--gruen);
  border-bottom: 1px solid var(--linie);
  backdrop-filter: saturate(1.4) blur(8px);
}
.kopf .rahmen { display: flex; align-items: center; gap: 28px; height: var(--kopf); }
.logo { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--grau); flex: none; }
.logo img { height: 46px; width: auto; }
.logo span { font-weight: 800; font-size: .95rem; line-height: 1.15; letter-spacing: -.01em; border-left: 1px solid var(--linie); padding-left: 12px; }
.logo span small { display: block; font-weight: 400; font-size: .8rem; color: var(--text-leise); }
.navi { display: flex; gap: 26px; margin-left: auto; }
.navi a { color: var(--grau); text-decoration: none; font-weight: 700; font-size: .98rem; padding: 6px 0; border-bottom: 2px solid transparent; }
.navi a:hover, .navi a[aria-current="page"] { border-bottom-color: var(--gruen); color: var(--text); }
.kopf-telefon { display: inline-flex; align-items: center; gap: 8px; color: var(--grau); font-weight: 800; text-decoration: none; white-space: nowrap; font-variant-numeric: tabular-nums; }
.kopf-telefon .icon { color: var(--gruen-tief); }
.kopf .knopf { min-height: 46px; padding: .6em 1.15em; }
.menue-knopf { display: none; }

@media (max-width: 1080px) {
  .navi { display: none; }
  .kopf-telefon span { display: none; }
  .kopf .knopf--gruen { display: none; }
  .menue-knopf {
    display: inline-flex; align-items: center; gap: 8px; margin-left: 0;
    background: none; border: 2px solid var(--linie); color: var(--grau); font: inherit; font-weight: 800; font-size: .95rem;
    min-height: 44px; padding: 0 14px; cursor: pointer;
  }
  .kopf-telefon { margin-left: auto; min-width: 44px; min-height: 44px; justify-content: center; border: 2px solid var(--linie); }
  .kopf-telefon .icon { width: 1.25em; height: 1.25em; }
  .navi.offen {
    display: flex; flex-direction: column; gap: 0;
    position: absolute; left: 0; right: 0; top: 100%;
    background: #fff; border-bottom: 3px solid var(--gruen); box-shadow: var(--schatten);
    padding: 8px var(--rand) 20px;
  }
  .navi.offen a { padding: 14px 0; border-bottom: 1px solid var(--linie); font-size: 1.1rem; }
}
@media (max-width: 520px) {
  .logo span { display: none; }
  .logo img { height: 40px; }
}

/* Start */
.start { padding: clamp(40px, 6vw, 88px) 0 clamp(56px, 7vw, 96px); }
.start .rahmen { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.start h1 { margin-bottom: .4em; }
.start h1 em { font-style: normal; color: var(--gruen-tief); }
.start .lead { margin-bottom: 1.6em; }
.knopfreihe { display: flex; flex-wrap: wrap; gap: 12px; }
.bewertung { display: flex; align-items: center; gap: 12px; margin-top: 28px; color: var(--text-leise); font-size: .98rem; }
.bewertung a { color: inherit; text-decoration: none; }
.bewertung a:hover { text-decoration: underline; }
.bewertung strong { color: var(--text); font-weight: 800; }
.sterne { display: inline-flex; gap: 2px; color: #e6a700; }
.sterne svg { width: 18px; height: 18px; fill: currentColor; }
@media (max-width: 860px) {
  .start .rahmen { grid-template-columns: 1fr; }
  .start .vergleich { order: -1; }
}

/* Vorher-Nachher-Schieber */
.vergleich { position: relative; overflow: hidden; background: var(--flaeche); aspect-ratio: 4 / 3; user-select: none; touch-action: pan-y; --pos: 50%; }
.vergleich img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vergleich .nachher { clip-path: inset(0 0 0 var(--pos)); }
.vergleich-linie { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 3px; margin-left: -1.5px; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.08); pointer-events: none; }
.vergleich-griff {
  position: absolute; top: 50%; left: var(--pos); width: 48px; height: 48px; margin: -24px 0 0 -24px;
  background: var(--gruen-tief); color: #fff; display: grid; place-items: center; pointer-events: none;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
}
.vergleich-griff svg { width: 26px; height: 26px; stroke: #fff; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.vergleich input[type=range] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.vergleich input[type=range]:focus-visible ~ .vergleich-griff { outline: 3px solid #fff; outline-offset: 3px; }
.marke { position: absolute; top: 14px; padding: 5px 10px; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #fff; pointer-events: none; }
.marke--vorher { left: 14px; background: rgba(60, 57, 60, .82); }
.marke--nachher { right: 14px; background: var(--gruen-tief); }
.vergleich--gross { box-shadow: var(--schatten); }

/* Musterfläche */
.muster { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 64px); align-items: center; }
.muster figure { margin: 0; position: relative; }
.muster figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.muster figcaption { display: flex; justify-content: space-between; margin-top: 10px; font-size: .9rem; font-weight: 700; color: var(--text-leise); }
.muster blockquote { margin: 0 0 1.2em; padding: 0; font-size: 1.15rem; color: var(--text); }
@media (max-width: 860px) { .muster { grid-template-columns: 1fr; } }

/* Ergebnisse */
.raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.2vw, 28px); }
.raster figure { margin: 0; }
.raster figcaption { margin-top: 10px; font-size: .98rem; color: var(--text-leise); }
.raster figcaption strong { color: var(--text); font-weight: 800; }
.mehr { margin-top: 36px; }
@media (max-width: 900px) { .raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .raster { grid-template-columns: 1fr; } }

/* Ablauf */
.ablauf { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(24px, 3vw, 40px); counter-reset: schritt; }
.ablauf li { counter-increment: schritt; border-top: 3px solid var(--gruen); padding-top: 22px; }
.ablauf li::before { content: counter(schritt); display: block; font-weight: 900; font-size: 2.6rem; line-height: 1; color: var(--gruen); margin-bottom: 14px; font-variant-numeric: tabular-nums; }
.ablauf h3 { margin-bottom: .45em; }
.ablauf p { color: var(--text-leise); font-size: 1rem; margin: 0; }
@media (max-width: 900px) { .ablauf { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .ablauf { grid-template-columns: 1fr; } }

/* Preis */
.preis { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.rechner { background: #fff; padding: clamp(24px, 3vw, 40px); box-shadow: var(--schatten); border-top: 4px solid var(--gruen); }
.rechner label { display: block; font-weight: 800; color: var(--grau); margin-bottom: 14px; }
.rechner-eingabe { display: flex; align-items: center; gap: 16px; }
.rechner input[type=range] { flex: 1; accent-color: var(--gruen-tief); height: 32px; }
.rechner-zahl { display: flex; align-items: baseline; gap: 6px; }
.rechner-zahl input { width: 4.6em; font: inherit; font-weight: 800; font-size: 1.15rem; padding: 8px 10px; border: 2px solid var(--linie); color: var(--text); text-align: right; font-variant-numeric: tabular-nums; }
.rechner-zahl input:focus { border-color: var(--gruen-tief); outline: none; }
.rechner-ergebnis { margin: 26px 0 6px; font-weight: 900; font-size: clamp(2.6rem, 5vw, 3.6rem); line-height: 1; color: var(--gruen-tief); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.rechner-wort { font-size: max(1rem, .32em); font-weight: 700; letter-spacing: 0; color: var(--text-leise); }
.rechner-satz { color: var(--text-leise); font-size: .98rem; margin: 0 0 22px; font-variant-numeric: tabular-nums; }
.staffel { width: 100%; border-collapse: collapse; font-size: .95rem; font-variant-numeric: tabular-nums; }
.staffel th, .staffel td { text-align: left; padding: 9px 0; border-bottom: 1px solid var(--linie); }
.staffel th { font-weight: 700; color: var(--text-leise); }
.staffel tr.aktiv td { font-weight: 800; color: var(--gruen-tief); }
.klein { font-size: .92rem; color: var(--text-leise); }
@media (max-width: 860px) { .preis { grid-template-columns: 1fr; } }

/* Dave */
.person { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 72px); align-items: end; }
.person figure { margin: 0; background: linear-gradient(var(--flaeche), var(--flaeche)) bottom / 100% 78% no-repeat; }
.person figure img { width: 88%; margin: 0 auto; }
.person-text { padding-bottom: clamp(0px, 3vw, 40px); }
.versprechen { list-style: none; margin: 28px 0 0; padding: 0; border-top: 1px solid var(--linie); }
.versprechen li { padding: 14px 0; border-bottom: 1px solid var(--linie); }
.versprechen strong { color: var(--text); }
@media (max-width: 860px) { .person { grid-template-columns: 1fr; } .person figure { max-width: 420px; } }

/* Musterprobe und Formular */
.anfrage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.anfrage .lead { color: #e6e4e6; }
.schritte { margin: 24px 0 32px; padding-left: 1.3em; }
.schritte li { margin-bottom: 10px; padding-left: 4px; }
.schritte li::marker { color: var(--gruen); font-weight: 900; }
.telefon-gross { display: inline-flex; align-items: center; gap: 12px; font-weight: 900; font-size: clamp(1.6rem, 3vw, 2.1rem); color: #fff; text-decoration: none; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.telefon-gross .icon { color: var(--gruen); width: 1em; height: 1em; }
.telefon-gross:hover { color: #fff; text-decoration: underline; }
.anfrage .klein { color: #d9d7d9; }

.formular { background: #fff; color: var(--text); padding: clamp(24px, 3vw, 40px); border-top: 4px solid var(--gruen); box-shadow: 0 30px 70px rgba(0,0,0,.25); }
.formular h3 { color: var(--grau); font-size: 1.5rem; margin-bottom: .3em; }
.formular > p { color: var(--text-leise); margin-bottom: 22px; }
.feld { margin-bottom: 16px; }
.feld label, .feld legend { display: block; font-weight: 700; font-size: .95rem; margin-bottom: 6px; color: var(--text); }
.feld input[type=text], .feld input[type=tel] {
  width: 100%; font: inherit; font-size: 1.05rem; padding: 12px 14px; border: 2px solid var(--linie); border-radius: 0; background: #fff; color: var(--text);
}
.feld input::placeholder { color: #8a868a; }
.feld input:focus { border-color: var(--gruen-tief); outline: none; box-shadow: 0 0 0 3px var(--gruen-hauch); }
.feld input[aria-invalid=true] { border-color: #b3261e; }
fieldset.feld { border: 0; padding: 0; margin: 0 0 18px; }
.wahl { display: flex; flex-wrap: wrap; gap: 8px; }
.wahl input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.wahl label { margin: 0; padding: 9px 14px; border: 2px solid var(--linie); font-weight: 700; font-size: .95rem; cursor: pointer; color: var(--text-leise); }
.wahl input:checked + label { border-color: var(--gruen-tief); background: var(--gruen-hauch); color: var(--gruen-dunkel); }
.wahl input:focus-visible + label { outline: 3px solid var(--gruen); outline-offset: 2px; }
.foto { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.foto label { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 10px 14px; border: 2px dashed var(--linie); cursor: pointer; font-weight: 700; color: var(--grau); }
.foto label:hover { border-color: var(--gruen-tief); color: var(--gruen-tief); }
.foto input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.foto input:focus-visible + label { outline: 3px solid var(--gruen); outline-offset: 2px; }
.foto-name { font-size: .9rem; color: var(--text-leise); }
.formular .knopf { width: 100%; margin-top: 8px; }
.formular .knopf[disabled] { opacity: .65; cursor: progress; }
.hinweis { font-size: .85rem; color: var(--text-leise); margin: 14px 0 0; }
.fehler { color: #b3261e; font-weight: 700; font-size: .95rem; margin: 10px 0 0; }
.honig { position: absolute; left: -9999px; }
.danke { text-align: left; }
.danke h3 { color: var(--gruen-tief); }
@media (max-width: 860px) { .anfrage { grid-template-columns: 1fr; } }

/* Fragen */
.fragen { max-width: 52rem; }
.fragen details { border-bottom: 1px solid var(--linie); }
.fragen details:first-of-type { border-top: 1px solid var(--linie); }
.fragen summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 24px; align-items: center; padding: 22px 0; font-weight: 800; font-size: 1.15rem; color: var(--grau); }
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary .icon { color: var(--gruen-tief); transition: transform .25s ease; }
.fragen details[open] summary .icon { transform: rotate(45deg); }
.fragen details > div { padding: 0 0 22px; max-width: 46rem; }
.fragen details > div p:last-child { margin-bottom: 0; }

/* Gebiet */
.gebiet { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); }
.orte { columns: 2; gap: 32px; list-style: none; margin: 0; padding: 0; font-weight: 700; color: var(--grau); }
.orte li { padding: 8px 0; border-bottom: 1px solid var(--linie); break-inside: avoid; }
@media (max-width: 760px) { .gebiet { grid-template-columns: 1fr; } }

/* Fuß */
.fuss { background: var(--flaeche); padding: 56px 0 120px; font-size: .95rem; color: var(--text-leise); border-top: 3px solid var(--gruen); }
.fuss .rahmen { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 32px; }
.fuss strong { color: var(--text); display: block; margin-bottom: 6px; }
.fuss a { color: var(--text-leise); text-decoration: none; }
.fuss a:hover { color: var(--gruen-tief); text-decoration: underline; }
.fuss ul { list-style: none; margin: 0; padding: 0; }
.fuss li { margin-bottom: 6px; }
.fuss p { margin: 0 0 10px; }
@media (max-width: 900px) { .fuss .rahmen { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .fuss .rahmen { grid-template-columns: 1fr; } }
@media (min-width: 861px) { .fuss { padding-bottom: 56px; } }

/* Leiste unten am Handy */
.leiste { display: none; }
@media (max-width: 860px) {
  .leiste {
    display: grid; grid-template-columns: 1fr 1fr 1.2fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    box-shadow: 0 -8px 24px rgba(0,0,0,.12); padding-bottom: env(safe-area-inset-bottom); background: #fff;
  }
  .leiste a { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 58px; font-weight: 800; text-decoration: none; font-size: .98rem; }
  .leiste a:not(:last-child) { color: var(--grau); background: #fff; border-right: 1px solid var(--linie); }
  .leiste a:last-child { color: #fff; background: var(--gruen-tief); }
}

/* Ein Moment Bewegung: der Schieber zeigt einmal, dass er sich bewegen lässt */
@media (prefers-reduced-motion: no-preference) {
  .vergleich.zeigt .nachher, .vergleich.zeigt .vergleich-linie, .vergleich.zeigt .vergleich-griff { transition: clip-path 1.1s cubic-bezier(.16, 1, .3, 1), left 1.1s cubic-bezier(.16, 1, .3, 1); }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Artikel und Ratgeber */
body { overflow-x: clip; }
.artikel-kopf { padding-top: clamp(28px, 4vw, 56px); padding-bottom: 8px; max-width: calc(800px + 2 * var(--rand)); }
.artikel-kopf h1 { font-size: clamp(2rem, 4.2vw, 3.3rem); margin-bottom: .35em; }
.artikel-kopf .lead { margin-top: .4em; }
.brotkrumen { display: flex; flex-wrap: wrap; gap: 8px; font-size: .9rem; color: var(--text-leise); margin-bottom: 18px; }
.brotkrumen a { color: var(--text-leise); text-decoration: none; }
.brotkrumen a:hover { color: var(--gruen-tief); text-decoration: underline; }
.brotkrumen [aria-current] { color: var(--text); font-weight: 700; }
@media (max-width: 640px) { .brotkrumen [aria-current] { display: none; } .brotkrumen span[aria-hidden]:has(+ [aria-current]) { display: none; } }
.byline { display: flex; align-items: center; gap: 12px; font-size: .93rem; color: var(--text-leise); margin: 0 0 8px; }
.byline img { width: 40px; height: 40px; object-fit: cover; object-position: top; border-radius: 50%; background: var(--flaeche); }
.byline a { color: var(--text); font-weight: 700; }
.gruss { font-weight: 800; color: var(--gruen-tief); margin-bottom: .4em; font-size: 1.1rem; }
.artikel { max-width: calc(800px + 2 * var(--rand)); padding-bottom: clamp(40px, 6vw, 72px); }
.prosa { font-size: 1.0625rem; }
.prosa > p:first-child { font-size: 1.18rem; color: var(--text); }
.prosa h2 { font-size: clamp(1.55rem, 2.6vw, 2.05rem); margin: 2.1em 0 .55em; }
.prosa h3 { font-size: 1.22rem; margin: 1.7em 0 .45em; color: var(--grau); }
.prosa ul, .prosa ol { padding-left: 1.3em; margin: 0 0 1.2em; }
.prosa li { margin-bottom: .45em; padding-left: .2em; }
.prosa ol > li::marker { color: var(--gruen-tief); font-weight: 800; }
.prosa ul > li::marker { color: var(--gruen); }
.prosa strong { color: var(--text); font-weight: 800; }
.prosa a { font-weight: 600; }
.prosa .vergleich-figur, .prosa .bild { margin: 2em 0; }
.prosa .bild img { width: auto; max-width: 100%; max-height: 560px; }
.prosa figcaption, .vergleich-figur figcaption { margin-top: 10px; font-size: .95rem; color: var(--text-leise); }
.vergleich-figur { margin: 0; }
.prosa .rechner { margin: 2em 0; }
.tabelle { margin: 1.8em 0; }
.prosa table { width: 100%; border-collapse: collapse; font-size: .98rem; font-variant-numeric: tabular-nums; line-height: 1.45; }
.prosa thead th { text-align: left; font-weight: 800; font-size: .88rem; letter-spacing: .01em; color: var(--grau); background: var(--gruen-hauch); border-bottom: 2px solid var(--gruen); padding: 12px 14px; vertical-align: bottom; }
.prosa td { border-bottom: 1px solid var(--linie); padding: 12px 14px; vertical-align: top; }
.prosa td:first-child { font-weight: 700; color: var(--text); }
.prosa .zahl { white-space: nowrap; }
.prosa tbody tr:hover td { background: #fafaf8; }
@media (max-width: 640px) {
  .prosa .tabelle:not(.tabelle--2) table, .prosa .tabelle:not(.tabelle--2) tbody, .prosa .tabelle:not(.tabelle--2) tr, .prosa .tabelle:not(.tabelle--2) td { display: block; width: 100%; }
  .prosa .tabelle:not(.tabelle--2) thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .prosa .tabelle:not(.tabelle--2) tr { border: 1px solid var(--linie); border-top: 3px solid var(--gruen); padding: 6px 14px; margin-bottom: 12px; background: #fff; }
  .prosa .tabelle:not(.tabelle--2) td { display: flex; gap: 16px; border-bottom: 1px solid var(--linie); padding: 9px 0; text-align: left; }
  .prosa .tabelle:not(.tabelle--2) td:last-child { border-bottom: 0; }
  .prosa .tabelle:not(.tabelle--2) td::before { content: attr(data-label); font-weight: 700; color: var(--text-leise); text-align: left; flex: 0 0 42%; }
  .prosa .tabelle:not(.tabelle--2) td:first-child { display: block; text-align: left; font-size: 1.05rem; color: var(--grau); font-weight: 800; padding-top: 6px; }
  .prosa .tabelle:not(.tabelle--2) td:first-child::before { content: none; }
}
@media (max-width: 640px) { .prosa .tabelle--2 th, .prosa .tabelle--2 td { padding: 10px 10px 10px 0; } .prosa .tabelle--2 thead th { padding-left: 10px; } .prosa .tabelle--2 td:first-child { padding-left: 10px; } }
.toc { margin: 28px 0 8px; padding: 14px 0 6px; border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); }
.toc summary { cursor: pointer; font-weight: 800; color: var(--grau); list-style: none; display: flex; justify-content: space-between; align-items: center; padding-bottom: 10px; }
.toc summary::-webkit-details-marker { display: none; }
.toc summary::after { content: ""; width: 9px; height: 9px; border-right: 2px solid var(--gruen-tief); border-bottom: 2px solid var(--gruen-tief); transform: rotate(45deg); margin-right: 6px; transition: transform .2s ease; }
.toc[open] summary::after { transform: rotate(-135deg); }
.toc ol { margin: 0; padding-left: 1.4em; columns: 2; column-gap: 40px; font-size: .97rem; }
.toc li { break-inside: avoid; margin-bottom: 8px; }
.toc a { color: var(--text); text-decoration: none; font-weight: 600; }
.toc a:hover { color: var(--gruen-tief); text-decoration: underline; }
@media (max-width: 640px) { .toc ol { columns: 1; } }
.prosa h2#quellen + ol, .prosa h2#quellen ~ ol { font-size: .9rem; color: var(--text-leise); }
.prosa h2#quellen ~ ol a { font-weight: 400; word-break: break-word; }
.prosa h2#quellen ~ p { font-size: .9rem; color: var(--text-leise); }
.weiter { padding-top: clamp(48px, 6vw, 80px); padding-bottom: clamp(48px, 6vw, 80px); max-width: calc(800px + 2 * var(--rand)); }
.weiter h2 { font-size: 1.5rem; }
.weiter-liste { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linie); }
.weiter-liste li { border-bottom: 1px solid var(--linie); }
.weiter-liste a { display: block; padding: 14px 0; font-weight: 700; text-decoration: none; color: var(--text); }
.weiter-liste a:hover { color: var(--gruen-tief); }

/* Themenliste (Start, Übersichten) */
.themen { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(24px, 4vw, 56px); border-top: 1px solid var(--linie); }
.themen li { border-bottom: 1px solid var(--linie); padding: 18px 0; }
.themen a { font-weight: 800; font-size: 1.12rem; color: var(--grau); text-decoration: none; }
.themen a:hover { color: var(--gruen-tief); text-decoration: underline; }
.themen p { margin: 4px 0 0; color: var(--text-leise); font-size: .98rem; }
@media (max-width: 720px) { .themen { grid-template-columns: 1fr; } }
.ratgeber-gruppe { margin-bottom: clamp(40px, 5vw, 64px); scroll-margin-top: calc(var(--kopf) + 16px); }
.bereiche ul { list-style: none; margin: 8px 0 clamp(36px, 5vw, 56px); padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.bereiche li { display: flex; }
.bereiche a { flex: 1; display: flex; align-items: center; gap: 12px; padding: 14px 16px; min-height: 64px; background: var(--flaeche); color: var(--grau); text-decoration: none; font-weight: 800; font-size: .98rem; line-height: 1.25; border-bottom: 3px solid transparent; transition: background-color .2s ease, border-color .2s ease, color .2s ease; }
.bereiche a:hover { background: var(--gruen-hauch); border-bottom-color: var(--gruen); color: var(--gruen-dunkel); }
.bereich-symbol { flex: none; width: 30px; height: 30px; fill: none; stroke: var(--gruen-tief); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 520px) { .bereiche ul { grid-template-columns: 1fr 1fr; } .bereiche a { padding: 12px; gap: 10px; font-size: .92rem; } .bereich-symbol { width: 26px; height: 26px; } }
.glossar-hinweis { margin: -20px 0 clamp(36px, 5vw, 56px); color: var(--text-leise); }
.ratgeber-gruppe h2 { font-size: 1.6rem; }
.bereich-kopf { display: flex; align-items: center; gap: 14px; margin: 0 0 4px; padding: 14px 18px; background: var(--flaeche); border-bottom: 3px solid var(--gruen); font-size: 1.35rem !important; line-height: 1.2; }
.bereich-kopf .bereich-symbol { width: 32px; height: 32px; }
.ratgeber-gruppe .themen { border-top: 0; }
.typ-uebersicht main > .rahmen:last-of-type { padding-bottom: clamp(48px, 6vw, 80px); }

.knopf--hell { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); margin-top: 8px; }
.knopf--hell:hover { background: #fff; color: var(--grau-dunkel); }
.abschnitt--dunkel .anfrage > div:first-child a:not(.knopf):not(.telefon-gross) { color: #fff; }

/* Glossar */
.abc ul { list-style: none; margin: 24px 0 8px; padding: 14px 0; display: flex; flex-wrap: wrap; gap: 6px; border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); }
.abc a { display: grid; place-items: center; min-width: 40px; height: 40px; font-weight: 800; color: var(--grau); text-decoration: none; background: var(--flaeche); }
.abc a:hover { background: var(--gruen-tief); color: #fff; }
.typ-glossar .prosa h2 { font-size: 2.2rem; color: var(--gruen-tief); border-bottom: 2px solid var(--gruen); padding-bottom: 4px; scroll-margin-top: calc(var(--kopf) + 16px); }
.typ-glossar .prosa h3 { scroll-margin-top: calc(var(--kopf) + 16px); }