/* Vorlage provisionsseite v3 (Website-Fabrik, Mindeststandard 09.11.2026, SF19 10.11.2026): ohne fremde Schriften
   und Bilder, CSP nur self; mobil zuerst; große Schrift (Wurzel 20 px, nichts unter 18 px außer „Anzeige“ und
   Quellenmarken) und Kontrast AAA für Fließtext für ältere Leserinnen und Leser */
:root {
  --text: #1a1f24; --grund: #ffffff; --leise: #3d4852; --linie: #d5dde2; --flaeche: #f3f6f7;
  --akzent: #0b4f6c; --akzent-hell: #e3eff3; --gruen: #1d5f50; --gruen-hell: #e4f2ee;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; font-size: 125%; }
body { margin: 0; font: 20px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--text); background: var(--grund); overflow-wrap: break-word; }
a { color: var(--akzent); text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible {
  outline: 3px solid #f0a500; outline-offset: 2px; }
.sprung { position: absolute; left: -999px; top: .4rem; z-index: 30; background: var(--grund); padding: .5rem .9rem; border-radius: .4rem; }
.sprung:focus { left: .8rem; }
.vorschau-band { margin: 0; padding: .4rem 1rem; background: #263238; color: #fff; text-align: center; font-size: .8rem; }
.entwurf { margin: 0; padding: .4rem 1rem; background: #fdecee; color: #6b1d27; text-align: center; font-size: .8rem; }

/* Kopf und Navigation (SF19): breit eine Leiste mit allen Seiten, schmal ein Menü-Knopf ohne JS */
.kopf { position: relative; border-bottom: 1px solid var(--linie); background: var(--grund); }
.kopf-innen { max-width: 54rem; margin: 0 auto; padding: .55rem 1rem; display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: .4rem .8rem; flex-wrap: nowrap; }
.marke { display: inline-flex; align-items: center; gap: .55rem; min-width: 0; font-weight: 700; color: var(--text); text-decoration: none; font-size: .8rem; line-height: 1.25; }
.marke span { min-width: 0; overflow-wrap: anywhere; }
.logo { width: 1.9rem; height: 1.9rem; flex: none; }
.nav ul { list-style: none; margin: 0; padding: 0; }
.nav a { font-size: .9rem; display: block; text-decoration: none; color: var(--akzent); }
.nav a:hover { text-decoration: underline; }
.nav a[aria-current="page"] { background: var(--akzent); color: #fff; font-weight: 650; }
.nav-breit { display: none; }
.nav-breit ul { display: flex; flex-wrap: wrap; gap: .35rem; padding: .1rem 0 .2rem; }
.nav-breit a { padding: .3rem .8rem; border-radius: 999px; background: var(--akzent-hell); white-space: nowrap; }
.menue { flex: none; }
.menue summary { font-size: .9rem; list-style: none; display: inline-flex; align-items: center; gap: .45rem; min-height: 2.4rem;
  padding: .25rem .75rem; border: 2px solid var(--akzent); border-radius: .6rem; color: var(--akzent); font-weight: 700;
  cursor: pointer; background: var(--grund); user-select: none; }
.menue summary::-webkit-details-marker { display: none; }
.menue[open] summary { background: var(--akzent); color: #fff; }
.menue-symbol { width: 1.2rem; height: 1.2rem; flex: none; }
.nav-schmal { position: absolute; left: 0; right: 0; top: 100%; z-index: 20; background: var(--grund);
  border-bottom: 1px solid var(--linie); box-shadow: 0 10px 24px rgba(11, 79, 108, .14); padding: .6rem 1rem 1rem; }
.nav-schmal ul { max-width: 54rem; margin: 0 auto; display: grid; gap: .35rem; }
.nav-schmal a { font-size: 1rem; padding: .65rem .9rem; border-radius: .55rem; background: var(--flaeche); }

/* Inhalt */
main { max-width: 54rem; margin: 0 auto; padding: 0 1rem; }
main > section, .held { max-width: none; }
main p, main li, .einleitung { max-width: 38rem; }
.held { padding: 1.3rem 0 .4rem; }
.held-bild { margin: 1.1rem auto 0; max-width: 23rem; }
.held-grafik { max-width: 100%; margin: 0 auto; }
h1 { font-size: 1.45rem; line-height: 1.2; margin: 0 0 .9rem; letter-spacing: -.01em; }
h2 { font-size: 1.3rem; line-height: 1.3; margin: 2.2rem 0 .7rem; }
h3 { font-size: 1.05rem; margin: 0 0 .35rem; }
.einleitung { font-size: 1.08rem; color: var(--text); }
sup { line-height: 0; }
.qref { font-size: .7rem; text-decoration: none; padding: 0 .1rem; }
.klein, .bildtext { font-size: .9rem; color: var(--leise); }
.punkte li { margin: .35rem 0; }
.knopf { display: inline-block; padding: .8rem 1.3rem; border-radius: .6rem; background: var(--akzent); color: #fff;
  font-weight: 650; text-decoration: none; border: 0; font: inherit; font-weight: 650; cursor: pointer; }
.knopf:hover { background: #083b51; }
.aufruf { margin: 1.4rem 0 .4rem; }

/* Grafiken (eigene SVG) */
.grafik { width: 100%; max-width: 34rem; height: auto; display: block; margin: .5rem 0; }
.g-text { font: 600 16px system-ui, sans-serif; fill: #1a1f24; }
.g-klein { font: 400 14px system-ui, sans-serif; fill: #3d4852; }
.g-titel { font: 700 20px system-ui, sans-serif; fill: #1a1f24; }
.g-nummer { font: 700 19px system-ui, sans-serif; fill: #fff; }
.g-schritt { font: 600 15px system-ui, sans-serif; fill: #1a1f24; }
.schritte-grafik { max-width: 30rem; margin: .4rem 0 1.2rem; }
.g-hell { font: 700 16px system-ui, sans-serif; fill: #fff; }
.g-dunkel { font: 700 17px system-ui, sans-serif; fill: #1a1f24; }
.abbildung { background: var(--flaeche); border-radius: 1rem; padding: .4rem 1.2rem 1rem; margin-top: 2rem; }
.abbildung h2 { margin-top: 1rem; }

/* Kacheln und Weiterlesen (mit Symbol) */
.kacheln, .weiter-liste { list-style: none; padding: 0; display: grid; gap: .8rem; grid-template-columns: 1fr; }
.kacheln a, .weiter-liste a { display: grid; grid-template-columns: 2.8rem minmax(0, 1fr); column-gap: .85rem; align-items: start; height: 100%;
  padding: .9rem 1rem; border: 1px solid var(--linie); border-radius: .9rem; text-decoration: none; color: var(--text); background: var(--grund); }
.kacheln a:hover, .weiter-liste a:hover { border-color: var(--akzent); box-shadow: 0 2px 10px rgba(11, 79, 108, .12); }
.symbol { width: 2.8rem; height: 2.8rem; grid-row: span 2; }
.kacheln strong, .weiter-liste strong { display: block; color: var(--akzent); font-size: 1.05rem; line-height: 1.3; }
/* SF21 b: Karten nie so schmal, dass Wörter mitten im Wort brechen („Genehmigu|ng“); wenn der Browser trennt, dann
   nur mit Wörterbuch (lang="de") und mindestens 4 Zeichen vor und nach dem Trennstrich */
.kacheln a, .weiter-liste a { hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 8 4 4; }
.kacheln span { color: var(--leise); font-size: .9rem; }
.weiterlesen span { color: var(--leise); font-size: .9rem; }
.weiterlesen { margin-top: 2.6rem; padding: .2rem 1rem 1.1rem; background: var(--flaeche); border-radius: 1rem; }
.weiterlesen h2 { margin-top: 1rem; }

/* Tabellen */
.tabelle { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: .9rem; }
th, td { text-align: left; padding: .6rem .6rem; border-bottom: 1px solid var(--linie); vertical-align: top; }
th { background: var(--akzent-hell); font-weight: 650; }
td.zahl { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Rechner */
.rechner { background: var(--akzent-hell); border-radius: 1rem; padding: .2rem 1.2rem 1.2rem; margin-top: 1.4rem; }
.rechner form { display: grid; gap: .45rem; }
.rechner fieldset { border: 0; padding: 0; margin: 0 0 .4rem; }
.rechner legend, .rechner label { font-weight: 600; }
.rechner .wahl { font-weight: 400; display: inline-flex; align-items: center; gap: .4rem; margin-right: 1.2rem; min-height: 2.6rem; }
.rechner input[type=radio] { width: 1.3rem; height: 1.3rem; }
.rechner input[type=number], .rechner input[type=date] { font: inherit; padding: .6rem .7rem; border: 2px solid #8fa3ad; border-radius: .5rem; background: #fff; width: 100%; max-width: 26rem; margin-bottom: .5rem; }
.rechner select { font: inherit; padding: .6rem .7rem; border: 2px solid #8fa3ad; border-radius: .5rem; background: #fff; width: 100%; max-width: 100%; margin-bottom: .5rem; }
.rechner .knopf { justify-self: start; margin-top: .3rem; }
.ergebnis { background: #fff; border-radius: .8rem; padding: .9rem 1.1rem; margin-top: 1rem; border: 1px solid var(--linie); }
.ergebnis .zahlen { display: grid; grid-template-columns: 1fr auto; gap: .2rem 1rem; font-variant-numeric: tabular-nums; }
.ergebnis .gross { font-size: 1.35rem; font-weight: 750; }
.ergebnis .zuschuss { color: var(--gruen); }
.balken { display: flex; height: 1.4rem; border-radius: .7rem; overflow: hidden; background: #dfe8ec; margin: .8rem 0 .3rem; }
.balken .z { background: var(--gruen); }
.andock { margin-top: 1rem; border: 2px dashed #8fa3ad; border-radius: .8rem; padding: .8rem 1rem; background: #fff; }
.andock-titel { font-weight: 700; margin: 0; }

/* Lift-Typen */
.typen { display: grid; gap: 1rem; grid-template-columns: 1fr; }
.typ { border: 1px solid var(--linie); border-radius: 1rem; padding: 1rem 1.1rem; background: var(--grund); }
.lift { width: 100%; max-width: 15rem; height: auto; display: block; margin: 0 auto .6rem; }
.treppenformen { max-width: 32rem; }

/* Schritte */
.schritte { list-style: none; counter-reset: schritt; padding: 0; }
.schritte li { counter-increment: schritt; position: relative; padding: 0 0 1.1rem 3.3rem; border-left: 3px solid var(--akzent-hell); margin-left: 1.1rem; }
.schritte li::before { content: counter(schritt); position: absolute; left: -1.3rem; top: -.1rem; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--akzent); color: #fff; font-weight: 700; display: grid; place-items: center; }
.schritte li:last-child { border-left-color: transparent; }
.download { background: var(--gruen-hell); border-radius: 1rem; padding: .2rem 1.2rem 1rem; }

/* Fragen */
.fragen details { border: 1px solid var(--linie); border-radius: .7rem; padding: .7rem 1rem; margin: .55rem 0; background: var(--grund); }
.fragen summary { cursor: pointer; font-weight: 650; }
.fragen details p { margin: .5rem 0 0; }

/* Partnerkasten: nur nach Zusage (oder in der Vorschau) */
.partnerkasten { border-top: 1px solid var(--linie); margin-top: 2.4rem; }
.partner { list-style: none; padding: 0; display: grid; gap: 1rem; grid-template-columns: 1fr; }
.partner li { border: 1px solid var(--linie); border-radius: 1rem; padding: .8rem; background: var(--grund); }
.platzhalter { width: 100%; height: auto; display: block; border-radius: .6rem; }
.partnername { margin: .6rem 0 .1rem; font-weight: 650; }
.zweck { margin: 0; color: var(--leise); font-size: .9rem; }
.anzeige { display: inline-block; margin-left: .3rem; font-size: .68rem; line-height: 1; color: var(--leise); vertical-align: .1em; letter-spacing: .02em; }
.andock .anzeige { margin-left: 0; }

/* Quellen und Fuß */
.seitenquellen { margin-top: 3rem; border-top: 1px solid var(--linie); }
.klein-titel { font-size: .95rem; margin: 1.2rem 0 .4rem; color: var(--leise); }
.quellen { font-size: .9rem; color: var(--leise); padding-left: 1.4rem; }
.quellen.alle { font-size: .9rem; color: var(--text); }
.quellen li { margin: .25rem 0; }
.fuss { margin-top: 3rem; border-top: 1px solid var(--linie); background: var(--flaeche); color: var(--leise); font-size: .9rem; }
.fuss-nav ul { list-style: none; margin: .3rem 0 .9rem; padding: 0 0 .8rem; display: flex; flex-wrap: wrap; gap: .1rem 1.3rem; border-bottom: 1px solid var(--linie); }
.fuss-nav a { display: inline-block; padding: .3rem 0; }
.fuss-innen { max-width: 54rem; margin: 0 auto; padding: 1rem 1.1rem 2rem; }
.fuss p { margin: .3rem 0; max-width: 46rem; }
.autor { font-size: .9rem; }

@media (min-width: 46rem) {
  h1 { font-size: 2rem; }
  .kacheln, .weiter-liste { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
  .typen { grid-template-columns: repeat(2, 1fr); }
  .partner { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 52rem) {
  .kopf-innen { flex-wrap: wrap; }
  .marke { font-size: 1rem; }
  .nav-breit { display: block; flex-basis: 100%; }
  .menue { display: none; }
  .held:has(.held-bild) { display: grid; grid-template-columns: minmax(0, 1fr) 18rem; gap: 2rem; align-items: center; }
  .held-bild { margin: 0; }
}
@media (min-width: 64rem) {
  .kacheln { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
}
@page { size: A4; margin: 14mm 12mm; }
@media print {
  /* SF21-menue: das Menü gehört auch aufs Papier und ins Freigabe-PDF – im Druck die Leiste mit allen Einträgen,
     der Menü-Knopf (ohne Funktion auf Papier) fällt weg */
  .menue, .sprung, .fuss-nav, .andock[hidden] { display: none; }
  .kopf-innen { flex-wrap: wrap; }
  .nav-breit { display: block; flex-basis: 100%; }
  .nav-breit a { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  html { font-size: 100%; }
  body { font-size: 11.5pt; }
  .abbildung, .rechner, .download { break-inside: avoid; }
  details { break-inside: avoid; }
  details::details-content { content-visibility: visible; display: block; }
  details > summary { list-style: none; }
  h2, h3 { break-after: avoid; }
}