/* Antragspforte – Gestaltung. Regelwerk und Begründung: DESIGN.md.
   Leitidee: sorgfältig gesetztes Dokument statt Baukasten. Ordnung durch Linien, Abstände und Schriftgrade;
   Kästen nur für echte Einheiten. Eine Akzentfarbe für Handlungen, Statusfarben nur für Hinweise. */
@font-face { font-family: "AP Sans"; src: url("/fonts/fira-sans-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "AP Sans"; src: url("/fonts/fira-sans-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "AP Sans"; src: url("/fonts/fira-sans-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "AP Sans"; src: url("/fonts/fira-sans-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "AP Fallback"; src: local("Arial"); size-adjust: 96%; ascent-override: 93%; descent-override: 26%; }

:root {
  --grund: #ffffff; --flaeche: #ffffff; --ruhe: #f3f4f5; --senke: #f3f4f5;
  --tinte: #16191d; --gedaempft: #535b66; --linie: #d8dbdf; --linie-stark: #6b7380;
  --akzent: #0b4a78; --akzent-dunkel: #073557; --akzent-hell: #e7eef5; --auf-akzent: #fff;
  --signal: #b4471a;
  --gut: #0d6b4b; --gut-hell: #e3f1ea; --warn: #7a5300; --warn-hell: #f7eed6; --schlecht: #a3241c; --schlecht-hell: #f8e3e0; --info: #0b4a78; --info-hell: #e7eef5;
  --k0: #eef2f6; --k1: #c8d7e6; --k2: #92b0cc; --k3: #5a86ad; --k4: #2d608c; --k5: #0b4a78;
  --schrift: "AP Sans", "AP Fallback", system-ui, sans-serif;
  --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --r: 2px; --kopf-hoehe: 72px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--kopf-hoehe) + 16px); }
body { margin: 0; background: var(--grund); color: var(--tinte); font: 400 17px/1.6 var(--schrift); font-feature-settings: "kern"; -webkit-font-smoothing: antialiased; }
@media (max-width: 640px) { body { font-size: 16px; } }

/* Schrift */
h1, h2, h3 { line-height: 1.2; margin: 0 0 .5em; text-wrap: balance; color: var(--tinte); }
h1 { font-size: 2.25rem; font-weight: 700; letter-spacing: -.015em; }
h2 { font-size: 1.45rem; font-weight: 600; letter-spacing: -.005em; margin-top: 1.9em; }
h3 { font-size: 1.1rem; font-weight: 600; }
@media (max-width: 640px) { h1 { font-size: 1.7rem; } h2 { font-size: 1.25rem; } }
p { margin: 0 0 1em; max-width: 68ch; }
b, strong { font-weight: 600; }
a { color: var(--akzent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--akzent-dunkel); text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--akzent); outline-offset: 2px; }
.zahl, td.betrag, .betrag { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--mono); font-size: .92em; }
.gedaempft { color: var(--gedaempft); }
.klein { font-size: .875rem; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; left: 0; top: 0; }

.rahmen { max-width: 1160px; margin: 0 auto; padding: 0 32px; }
@media (max-width: 640px) { .rahmen { padding: 0 16px; } }
.sprung { position: absolute; left: -9999px; top: 8px; background: var(--flaeche); color: var(--tinte); padding: 10px 14px; z-index: 100; font-weight: 600; outline: 3px solid var(--akzent); }
.sprung:focus { left: 8px; }

.demoleiste { background: var(--tinte); color: #d5d9df; font-size: .82rem; padding: 7px 0; line-height: 1.4; }
.demoleiste b { color: #16191d; background: #f2c14e; padding: 1px 6px; border-radius: var(--r); margin-right: 4px; font-weight: 700; letter-spacing: .02em; }

/* Kopf */
.kopf { background: var(--flaeche); border-bottom: 1px solid var(--linie); z-index: 30; }
@media (min-height: 700px) { .kopf { position: sticky; top: 0; } }
.kopf-innen { display: flex; align-items: center; gap: 32px; min-height: var(--kopf-hoehe); }
.marke { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--tinte); padding: 6px 0; }
.marke:hover { color: var(--tinte); }
.marke-zeichen { width: 30px; height: 34px; flex: none; color: var(--akzent); }
.marke-text { font-weight: 700; font-size: 1.2rem; line-height: 1.05; letter-spacing: -.01em; display: flex; flex-direction: column; gap: 3px; }
.marke-text small { font-weight: 400; font-size: .76rem; color: var(--gedaempft); letter-spacing: 0; }
.hauptnav { display: flex; gap: 2px; margin-left: auto; align-items: stretch; align-self: stretch; }
.hauptnav a { color: var(--tinte); text-decoration: none; padding: 0 12px; font-size: .95rem; font-weight: 500; display: inline-flex; align-items: center; gap: 8px; border-bottom: 3px solid transparent; border-top: 3px solid transparent; }
.hauptnav a:hover { color: var(--akzent); border-bottom-color: var(--linie); }
.hauptnav a[aria-current="page"] { border-bottom-color: var(--akzent); color: var(--akzent); }
.hauptnav .nav-meine { margin-left: 12px; padding-left: 20px; position: relative; }
.hauptnav .nav-meine::before { content: ""; position: absolute; left: 0; top: 24px; bottom: 24px; width: 1px; background: var(--linie); }
.zaehler { background: var(--akzent); color: var(--auf-akzent); border-radius: 10px; font-size: .74rem; font-weight: 600; padding: 1px 7px; font-variant-numeric: tabular-nums; }
.menu-knopf { display: none; margin-left: auto; font: 500 1rem var(--schrift); color: var(--tinte); background: none; border: 2px solid var(--tinte); border-radius: var(--r); padding: 6px 14px; min-height: 44px; cursor: pointer; }
@media (max-width: 960px) {
  .menu-knopf { display: block; }
  .hauptnav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--flaeche); border-bottom: 1px solid var(--linie); flex-direction: column; padding: 8px 16px 16px; }
  .kopf { position: sticky; top: 0; }
  .kopf-innen { position: relative; }
  .hauptnav.offen { display: flex; }
  .hauptnav a { padding: 12px 4px; border: 0; border-bottom: 1px solid var(--linie); }
  .hauptnav a[aria-current="page"] { border-bottom-color: var(--linie); box-shadow: inset 4px 0 0 var(--akzent); padding-left: 14px; }
  .hauptnav .nav-meine { margin-left: 0; padding-left: 4px; }
  .hauptnav .nav-meine::before { display: none; }
}
@media (max-width: 960px) and (max-height: 500px) { .kopf { position: static; } }

main { padding: 40px 0 80px; min-height: 60vh; outline: none; }
@media (max-width: 640px) { main { padding: 24px 0 56px; } }
.lade { color: var(--gedaempft); }

/* Fuß */
.fuss { background: var(--tinte); color: #d5d9df; padding: 48px 0 28px; font-size: .92rem; }
.fuss a { color: #fff; text-decoration-color: rgba(255,255,255,.45); display: inline-block; padding: 3px 0; }
.fuss a:hover { color: #fff; text-decoration-color: #fff; }
.fuss :focus-visible { outline-color: #fff; }
.fuss-innen { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(0, 1fr)); gap: 32px 48px; }
@media (max-width: 760px) { .fuss-innen { grid-template-columns: minmax(0, 1fr); gap: 28px; } }
.fuss .fuss-marke { color: #fff; margin: 0; font-weight: 700; font-size: 1.1rem; display: flex; align-items: center; gap: 10px; }
.fuss-marke svg { width: 22px; height: 26px; color: #fff; }
.fuss p { color: #c3c9d1; margin: 10px 0 0; max-width: 44ch; }
.fuss h2 { color: #fff; font-size: .82rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; margin: 0 0 10px; }
.fuss ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.fuss-unten { border-top: 1px solid rgba(255,255,255,.16); margin-top: 36px; padding-top: 18px; display: flex; justify-content: space-between; gap: 8px 24px; flex-wrap: wrap; font-size: .84rem; color: #aab2bc; }
.fuss-unten a { color: #c3c9d1; }

/* Knöpfe */
.knopf { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: 600 1rem/1.2 var(--schrift); padding: 12px 22px; min-height: 48px;
  background: var(--akzent); color: var(--auf-akzent); border: 2px solid var(--akzent); border-radius: var(--r); cursor: pointer; text-decoration: none; }
.knopf:hover { background: var(--akzent-dunkel); border-color: var(--akzent-dunkel); color: #fff; text-decoration: none; }
.knopf:active { transform: translateY(1px); }
.knopf.zweit { background: var(--flaeche); color: var(--tinte); border-color: var(--tinte); }
.knopf.zweit:hover { background: var(--ruhe); color: var(--tinte); }
.knopf.klein { padding: 7px 14px; min-height: 40px; font-size: .92rem; }
.knopf:disabled { opacity: .5; cursor: default; transform: none; }
@media (max-width: 640px) { .knopf.haupt { width: 100%; } }
.textknopf { background: none; border: 0; padding: 2px 0; min-height: 24px; font: inherit; color: var(--akzent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; cursor: pointer; text-align: left; }
.textknopf:hover { color: var(--akzent-dunkel); text-decoration-thickness: 2px; }
.zurueck { display: inline-flex; align-items: center; min-height: 32px; margin-bottom: 20px; font-weight: 500; }
.zeile { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.aktionen { display: flex; gap: 12px 20px; flex-wrap: wrap; align-items: center; margin-top: 24px; }

/* Flächen und Raster */
.karte-box { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r); padding: 24px; }
.karte-box + .karte-box { margin-top: 16px; }
.raster { display: grid; gap: 24px; }
.raster.zwei { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.raster.drei { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.raster.vier { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.raster > .karte-box + .karte-box { margin-top: 0; }
.spalten { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: 56px; align-items: start; }
@media (max-width: 960px) { .spalten { grid-template-columns: minmax(0, 1fr); gap: 28px; } }
.seitenleiste { position: sticky; top: calc(var(--kopf-hoehe) + 24px); }
.seitenleiste > .karte-box, aside.karte-box { background: var(--ruhe); border-color: transparent; }
@media (max-width: 960px) { .spalten > aside.seitenleiste { order: -1; position: static; } }
@media (max-height: 699px) { .seitenleiste { position: static; } }

.ueberzeile { font-size: .9rem; font-weight: 600; color: var(--gedaempft); margin-bottom: 8px; letter-spacing: 0; }
.einleitung { font-size: 1.2rem; line-height: 1.55; color: var(--tinte); max-width: 60ch; }
@media (max-width: 640px) { .einleitung { font-size: 1.08rem; } }
.abstand-oben { margin-top: 24px; }
h2.oben { margin-top: 0; }
.trenner { border: 0; border-top: 1px solid var(--linie); margin: 48px 0; }

/* Formulare */
.feld { margin-bottom: 24px; }
.feld label, .feld legend, .label { display: block; font-weight: 600; margin-bottom: 6px; }
.feld legend { padding: 0; }
.feld .hilfe, .hilfe { color: var(--gedaempft); font-size: .92rem; margin: -2px 0 8px; }
input[type=text], input[type=email], input[type=date], input[type=time], input[type=search], input[type=number], input[type=password], select, textarea {
  font: inherit; color: var(--tinte); background: var(--flaeche); border: 2px solid var(--linie-stark); border-radius: var(--r); padding: 9px 12px; min-height: 48px; width: 100%; max-width: 32rem; }
select { padding-right: 36px; }
input.kurz, select.kurz { max-width: 12rem; }
textarea { min-height: 104px; }
input:focus, select:focus, textarea:focus { border-color: var(--tinte); outline: 3px solid var(--akzent); outline-offset: 0; }
::placeholder { color: #737b86; opacity: 1; }
.einheit { display: inline-flex; align-items: stretch; max-width: 12rem; }
.einheit input { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.einheit span { border: 2px solid var(--linie-stark); border-left: 0; padding: 9px 12px; background: var(--ruhe); border-radius: 0 var(--r) var(--r) 0; display: flex; align-items: center; }
fieldset { border: 0; padding: 0; margin: 0 0 24px; min-width: 0; }
.wahl { display: grid; gap: 8px; }
.wahl label { display: flex; gap: 12px; align-items: flex-start; padding: 13px 16px; border: 1px solid var(--linie-stark); border-radius: var(--r); background: var(--flaeche); cursor: pointer; font-weight: 400; margin: 0; }
.wahl label:hover { border-color: var(--tinte); }
.wahl input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--akzent); flex: none; }
.wahl label:has(input:checked) { border-color: var(--akzent); box-shadow: inset 4px 0 0 var(--akzent), 0 0 0 1px var(--akzent); background: var(--akzent-hell); }
.wahl label:has(input:focus-visible) { outline: 3px solid var(--akzent); outline-offset: 2px; }
.wahl input:focus-visible { outline: none; }
.wahl b { display: block; font-weight: 600; }
.wahl small { color: var(--gedaempft); font-size: .9rem; }
.wahl.reihe { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.wahl.mengen { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.fehlertext { color: var(--schlecht); font-weight: 600; font-size: .94rem; margin: 6px 0 0; }
.fehlertext:empty { margin: 0; }
.fehler-feld { border-left: 4px solid var(--schlecht); padding-left: 14px; }
.fehler-feld input, .fehler-feld select, .fehler-feld textarea { border-color: var(--schlecht); }
.datum-lang { color: var(--gedaempft); font-size: .92rem; margin-top: 6px; }
.zweifeld { display: flex; gap: 16px; flex-wrap: wrap; }
.zweifeld .feld { flex: 1 1 180px; }
.haken { display: inline-flex; padding: 6px; cursor: pointer; }
.haken input { width: 22px; height: 22px; accent-color: var(--akzent); }
.ts:empty { display: none; } .ts { margin: 12px 0; }

/* Ortssuche */
.suche { position: relative; max-width: 32rem; }
.vorschlaege { position: absolute; left: 0; right: 0; top: 100%; z-index: 20; background: var(--flaeche); border: 2px solid var(--tinte); border-top: 0; list-style: none; margin: 0; padding: 0; max-height: 300px; overflow: auto; }
.vorschlaege li { padding: 11px 12px; cursor: pointer; display: flex; justify-content: space-between; gap: 12px; border-top: 1px solid var(--linie); }
.vorschlaege li[aria-selected="true"], .vorschlaege li:hover { background: var(--akzent); color: #fff; }
.vorschlaege li[aria-selected="true"] small, .vorschlaege li:hover small { color: #dfe8f1; }
.vorschlaege small { color: var(--gedaempft); }

/* Hinweise und Marken */
.hinweis { border-left: 4px solid var(--info); background: var(--info-hell); padding: 14px 18px; border-radius: 0; margin: 0 0 14px; }
.hinweis b { display: block; margin-bottom: 2px; }
.hinweis p { margin: 2px 0 0; }
.hinweis.warnung { border-color: var(--warn); background: var(--warn-hell); }
.hinweis.problem { border-color: var(--schlecht); background: var(--schlecht-hell); }
.hinweis.gut { border-color: var(--gut); background: var(--gut-hell); }
.hinweis:focus { outline: 3px solid var(--akzent); outline-offset: 2px; }
.hinweis ul { margin: 6px 0 0; padding-left: 20px; }
.marke-status, .marke-stufe { display: inline-block; font-size: .78rem; font-weight: 600; line-height: 1.3; padding: 2px 7px; border-radius: var(--r); white-space: nowrap; vertical-align: .08em; }
.marke-status { border: 1px solid currentColor; }
.s-gut { color: var(--gut); background: var(--gut-hell); border-color: transparent; }
.s-mittel { color: var(--warn); background: var(--warn-hell); border-color: transparent; }
.s-schwach { color: var(--schlecht); background: var(--schlecht-hell); border-color: transparent; }
.s-offen { color: var(--gedaempft); background: var(--ruhe); border-color: transparent; }
.st-E { background: var(--gut-hell); color: var(--gut); }
.st-S { background: var(--akzent-hell); color: var(--akzent); }
.st-K { background: var(--warn-hell); color: var(--warn); }
.marke-rolle { font-weight: 600; color: var(--tinte); }

/* Tabellen */
.tabelle-wrap { overflow-x: auto; border-top: 2px solid var(--tinte); border-bottom: 1px solid var(--linie); background: var(--flaeche); position: relative; }
.tabelle-wrap:focus-visible { outline-offset: 2px; }
table { border-collapse: collapse; width: 100%; font-size: .95rem; }
th, td { text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--linie); vertical-align: top; }
tr:last-child td { border-bottom: 0; }
th { font-weight: 600; background: var(--ruhe); white-space: nowrap; font-size: .9rem; }
td.betrag, th.betrag { text-align: right; white-space: nowrap; }
tr.summe td { font-weight: 700; border-top: 2px solid var(--tinte); }
tbody tr:hover { background: #fafbfb; }
th button.sortieren { background: none; border: 0; font: inherit; padding: 0; cursor: pointer; color: inherit; min-height: 24px; }
.tabelle-wrap table { min-width: 640px; }
table.stufen, table.kompakt, .tabelle-wrap table.stufen, .tabelle-wrap table.kompakt, .tabelle-wrap table.preistabelle { min-width: 0; }
tr.aktiv-zeile td { background: var(--akzent-hell); font-weight: 600; }
tr.frist-wichtig td { font-weight: 600; }
tr.frist-wichtig td:nth-child(2) { color: var(--signal); }
.preistabelle th[scope=row] { background: none; white-space: normal; }
@media (max-width: 640px) { table.preistabelle th, table.preistabelle td { padding: 8px 6px; font-size: .88rem; } table.preistabelle .marke-stufe { font-size: .7rem; padding: 2px 5px; } }

dl.liste { display: grid; grid-template-columns: minmax(140px, max-content) minmax(0, 1fr); gap: 10px 24px; margin: 0; }
dl.liste dt { color: var(--gedaempft); }
dl.liste dd { margin: 0; overflow-wrap: anywhere; }
dl.liste.karte-box { padding: 8px 24px; gap: 0 24px; }
dl.liste.karte-box dt, dl.liste.karte-box dd { padding: 12px 0; border-bottom: 1px solid var(--linie); }
dl.liste.karte-box dt:nth-last-of-type(1), dl.liste.karte-box dd:last-child { border-bottom: 0; }
@media (max-width: 640px) {
  dl.liste { grid-template-columns: minmax(0, 1fr); gap: 2px; } dl.liste dd { margin-bottom: 10px; }
  dl.liste.karte-box dt { border-bottom: 0; padding-bottom: 0; } dl.liste.karte-box dd { margin-bottom: 0; padding-top: 2px; }
}

details.fund { margin-top: 8px; font-size: .92rem; }
details.fund summary { cursor: pointer; color: var(--akzent); min-height: 24px; }
details.fund p { margin: 6px 0 0; color: var(--gedaempft); }
.stufen-erklaerung summary { cursor: pointer; min-height: 24px; }
.stufen-erklaerung dl.liste { grid-template-columns: minmax(130px, max-content) minmax(0, 1fr); }

/* Startseite */
.start-kopf { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(320px, 1fr); gap: 72px; align-items: start; padding: 16px 0 8px; }
@media (max-width: 960px) { .start-kopf { grid-template-columns: minmax(0, 1fr); gap: 32px; padding-top: 0; } }
.start-kopf h1 { font-size: 3.25rem; line-height: 1.06; letter-spacing: -.025em; margin-bottom: .45em; }
@media (max-width: 1100px) { .start-kopf h1 { font-size: 2.7rem; } }
@media (max-width: 640px) { .start-kopf h1 { font-size: 2.1rem; } }
.start-ort { font-weight: 600; color: var(--akzent); margin-bottom: 14px; }
.zusagen { list-style: none; padding: 0; margin: 32px 0 0; border-top: 1px solid var(--linie); max-width: 60ch; }
.zusagen li { padding: 12px 0 12px 32px; border-bottom: 1px solid var(--linie); position: relative; }
.zusagen li::before { content: ""; position: absolute; left: 4px; top: 19px; width: 12px; height: 7px; border-left: 2px solid var(--akzent); border-bottom: 2px solid var(--akzent); transform: rotate(-45deg); }
.zusagen b { font-weight: 600; }
.schnellstart { background: var(--flaeche); border: 1px solid var(--linie); border-top: 4px solid var(--tinte); border-radius: var(--r); padding: 28px; }
.schnellstart h2 { margin: 0 0 20px; font-size: 1.3rem; }
.schnellstart .knopf { width: 100%; }
.schnellstart .feld input, .schnellstart .feld select { max-width: none; }
.schnellstart .suche { max-width: none; }
.schnellstart > p:last-child { margin: 16px 0 0; }
.kennzahlen { display: flex; gap: 32px; flex-wrap: wrap; margin: 24px 0 0; padding: 0; list-style: none; }
.kennzahlen b { display: block; font-size: 1.6rem; font-variant-numeric: tabular-nums; }
.kennzahlen span { color: var(--gedaempft); font-size: .9rem; }
.abschnitt { margin-top: 72px; }
.abschnitt > h2:first-child { margin-top: 0; }
.abschnitt-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; border-bottom: 2px solid var(--tinte); padding-bottom: 12px; margin-bottom: 28px; }
.abschnitt-kopf h2 { margin: 0; }
.schritte { counter-reset: s; list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 32px; }
.schritte li { counter-increment: s; padding: 0; position: relative; }
.schritte li::before { content: counter(s, decimal-leading-zero); display: block; font-size: 2rem; font-weight: 300; line-height: 1; color: var(--akzent); font-variant-numeric: tabular-nums; margin-bottom: 14px; }
.schritte li b { display: block; font-size: 1.08rem; margin-bottom: 4px; }
.schritte li br { display: none; }
.schritte li .gedaempft { font-size: .95rem; }
.linkliste { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 32px; }
.linkliste li { border-bottom: 1px solid var(--linie); }
.linkliste a { display: block; padding: 18px 32px 18px 0; text-decoration: none; color: var(--tinte); position: relative; height: 100%; }
.linkliste a b { display: block; color: var(--akzent); font-size: 1.08rem; margin-bottom: 4px; }
.linkliste a span { color: var(--gedaempft); font-size: .95rem; }
.linkliste a::after { content: "→"; position: absolute; right: 4px; top: 17px; color: var(--akzent); font-size: 1.15rem; transition: transform .15s; }
.linkliste a:hover b { text-decoration: underline; text-underline-offset: 3px; }
.linkliste a:hover::after { transform: translateX(3px); }
.band { background: var(--ruhe); margin-top: 72px; padding: 40px 0; }
.band-innen { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 24px 56px; align-items: center; }
@media (max-width: 760px) { .band-innen { grid-template-columns: minmax(0, 1fr); } }
.band h2 { margin-top: 0; }
.band p { margin-bottom: 0; }
.band .aktionen { margin-top: 0; justify-content: flex-start; }
.randnotiz { margin-top: 32px; color: var(--gedaempft); font-size: .9rem; }
/* ältere Kachel-Klassen (andere Seiten) */
a.kachel-link { text-decoration: none; color: var(--tinte); display: block; }
a.kachel-link h3 { color: var(--akzent); text-decoration: underline; text-underline-offset: 3px; }
a.kachel-link:hover { border-color: var(--tinte); }

/* Fortschritt */
.fortschritt { font-size: .82rem; font-weight: 600; color: var(--gedaempft); margin-bottom: 8px; text-transform: uppercase; letter-spacing: .06em; }
.balken { height: 4px; background: var(--ruhe); margin-bottom: 28px; overflow: hidden; }
.balken i { display: block; height: 100%; width: var(--w, 0%); background: var(--akzent); }

/* Ergebnis */
.sperre { position: relative; }
.sperre .verdeckt { filter: blur(5px); user-select: none; pointer-events: none; }
.freischalten { background: var(--flaeche); border: 2px solid var(--tinte); border-radius: var(--r); padding: 28px; margin: 32px 0 8px; }
.freischalten h2 { margin-top: 0; }
@media (max-width: 640px) { .freischalten { padding: 20px 16px; margin-left: -4px; margin-right: -4px; } }
.genehmigung { border-top: 1px solid var(--linie); padding: 18px 0 16px; margin: 0; }
.genehmigung:last-of-type { border-bottom: 1px solid var(--linie); }
.genehmigung + h2 { margin-top: 1.9em; }
.genehmigung h3 { margin-bottom: 6px; font-size: 1.15rem; }
.frist-wichtig { font-weight: 600; }
.summe-zeile { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--linie); }
.liste-haken { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--linie); }
.liste-haken li { padding: 11px 0 11px 34px; border-bottom: 1px solid var(--linie); position: relative; }
.liste-haken li::before { content: ""; position: absolute; left: 2px; top: 15px; width: 16px; height: 16px; border: 2px solid var(--linie-stark); border-radius: var(--r); }
.liste-haken small { display: block; color: var(--gedaempft); }
.liste-gesperrt { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--linie); }
.liste-gesperrt li { display: grid; grid-template-columns: minmax(120px, max-content) minmax(0, 1fr); gap: 4px 24px; padding: 14px 0; border-bottom: 1px solid var(--linie); }
.liste-gesperrt span { color: var(--gedaempft); }
@media (max-width: 640px) { .liste-gesperrt li { grid-template-columns: minmax(0, 1fr); } }
.seitenleiste ul.klein { padding-left: 0; list-style: none; margin: 12px 0; }
.seitenleiste ul.klein li { padding: 6px 0; border-bottom: 1px solid var(--linie); }
.seitenleiste ul.klein li:last-child { border-bottom: 0; }
.seitenleiste ul.klein .textknopf, .seitenleiste ul.klein a { display: inline-flex; min-height: 28px; align-items: center; }

/* Karte */
.karten-layout { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(300px, 1fr); gap: 32px; align-items: start; }
@media (max-width: 1000px) { .karten-layout { grid-template-columns: minmax(0, 1fr); } }
.karten-flaeche { background: #e4ebf1; border: 1px solid var(--linie); border-radius: var(--r); position: relative; overflow: hidden; }
.karten-flaeche svg { display: block; width: 100%; height: auto; max-height: 78vh; touch-action: pan-y; }
.k-umland path { fill: #eceeef; stroke: #cfd3d7; stroke-width: .6; vector-effect: non-scaling-stroke; }
.k-einheit path { stroke: #fff; stroke-width: .8; vector-effect: non-scaling-stroke; cursor: pointer; }
.k-einheit path:hover, .k-einheit path:focus { stroke: #f2c14e; stroke-width: 3; outline: none; }
.k-kreis path { fill: none; stroke: #3d434b; stroke-opacity: .5; stroke-width: 1.2; vector-effect: non-scaling-stroke; pointer-events: none; }
.k-wahl path { fill: none; stroke: var(--tinte); stroke-width: 3; vector-effect: non-scaling-stroke; pointer-events: none; }
.k-text text { font: 600 11px var(--schrift); fill: var(--tinte); paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linejoin: round; text-anchor: middle; pointer-events: none; }
.legende { display: flex; gap: 6px 18px; flex-wrap: wrap; font-size: .86rem; margin: 12px 0 0; padding: 0; list-style: none; }
.legende li { display: flex; align-items: center; gap: 6px; }
.legende i { width: 14px; height: 14px; border-radius: var(--r); border: 1px solid rgba(0,0,0,.25); background: var(--c); }
.umschalter { display: inline-flex; border: 2px solid var(--tinte); border-radius: var(--r); overflow: hidden; flex-wrap: wrap; background: var(--flaeche); }
.umschalter button { font: 500 .92rem var(--schrift); color: var(--tinte); border: 0; border-right: 1px solid var(--linie); background: none; padding: 8px 14px; cursor: pointer; min-height: 40px; }
.umschalter button:last-child { border-right: 0; }
.umschalter button[aria-pressed="true"] { background: var(--tinte); color: #fff; }
.tip { position: absolute; pointer-events: none; background: var(--tinte); color: #fff; font-size: .82rem; padding: 6px 9px; border-radius: var(--r); transform: translate(-50%, calc(-100% - 10px)); white-space: nowrap; }

/* Preise */
.preis { background: var(--flaeche); border: 0; border-top: 2px solid var(--tinte); border-radius: 0; padding: 20px 0 0; display: flex; flex-direction: column; gap: 10px; }
.preis.hervor { border-top: 4px solid var(--akzent); padding-top: 18px; }
.preis .betrag-gross { font-size: 2.1rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; letter-spacing: -.01em; }
.preis ul { margin: 0; padding-left: 18px; color: var(--gedaempft); font-size: .95rem; }
.preis ul li { margin-bottom: 3px; }
.preis .knopf { margin-top: auto; }
a.preis { text-decoration: none; color: var(--tinte); }
a.preis:hover { border-top-color: var(--akzent); }
.code { font-family: var(--mono); font-size: 1.4rem; letter-spacing: .06em; background: var(--ruhe); border: 1px dashed var(--linie-stark); padding: 8px 14px; border-radius: var(--r); display: inline-block; user-select: all; }
.preisbox { background: var(--ruhe); border: 0; border-left: 4px solid var(--akzent); border-radius: 0; padding: 18px 20px; margin: 20px 0 14px; }
.freischalten .preisbox { margin-top: 8px; }
.preisbox .ueberzeile { font-size: .8rem; text-transform: uppercase; letter-spacing: .07em; }
.preiszeile { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.preiszeile .betrag-gross { font-size: 2rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; letter-spacing: -.01em; }
.preis-mini { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.preis-mini b { font-size: 1.2rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.korb { border-top: 1px solid var(--linie); margin-top: 24px; padding-top: 20px; }
.korb h3 { margin-bottom: 12px; }
.korb-zeile, .korb-summe { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 10px 0; }
.korb-zeile { border-bottom: 1px solid var(--linie); margin-bottom: 16px; }
.korb-summe { border-top: 2px solid var(--tinte); font-size: 1.15rem; margin-top: 8px; }
.korb-summe b { font-size: 1.3rem; font-weight: 700; }
.korb-summe b, .korb-zeile b, .korb-liste b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.korb-liste { list-style: none; padding: 0; margin: 0; }
.korb-liste li { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--linie); }
.korb-liste small, td small, .anfragen small, .liste-dateien small, .rolle-knopf small { display: block; color: var(--gedaempft); font-size: .86rem; font-weight: 400; }
.konto-option { background: var(--ruhe); border-left: 4px solid var(--tinte); padding: 18px 20px; margin: 20px 0; }
.konto-option .aktionen { margin-top: 12px; }
#codeform { margin-top: 20px; }
#codeform input { max-width: 14rem; }

/* Firmenkonto */
.reiter { display: flex; gap: 4px; border-bottom: 1px solid var(--linie); margin-bottom: 28px; flex-wrap: wrap; }
.reiter button { font: 500 1rem var(--schrift); background: none; border: 0; padding: 12px 14px; min-height: 44px; cursor: pointer; color: var(--gedaempft); border-bottom: 3px solid transparent; margin-bottom: -1px; }
.reiter button:hover { color: var(--tinte); }
.reiter button[aria-selected="true"] { color: var(--tinte); border-bottom-color: var(--akzent); font-weight: 600; }
.reiter .zaehler { margin-left: 4px; }
.messer { height: 8px; background: var(--ruhe); overflow: hidden; margin: 10px 0; }
.messer i { display: block; height: 100%; width: var(--w); background: var(--akzent); }
.messer.warn i { background: var(--warn); }
.kanban { display: grid; grid-template-columns: repeat(4, minmax(200px, 1fr)); gap: 16px; overflow-x: auto; position: relative; }
.kanban section { background: var(--ruhe); padding: 12px; min-height: 120px; border-top: 2px solid var(--tinte); }
.kanban h3 { font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; color: var(--gedaempft); }
.projekt { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r); padding: 12px; margin-bottom: 8px; font-size: .92rem; }
.projekt b { display: block; }
.projekt select { min-height: 36px; padding: 4px 8px; font-size: .88rem; margin-top: 6px; }
.projekt .textknopf { min-height: 28px; }
.rolle-knopf { font: inherit; text-align: left; background: var(--flaeche); border: 1px solid var(--linie-stark); border-radius: var(--r); padding: 14px 16px; cursor: pointer; display: flex; flex-direction: column; gap: 2px; min-height: 48px; color: var(--tinte); }
.rolle-knopf:hover { border-color: var(--tinte); background: var(--ruhe); }
.rolle-knopf b { color: var(--akzent); }
.demo-wahl h2 { margin-top: 0; }
.demo-rollen { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; background: var(--ruhe); padding: 10px 14px; margin: 0 0 24px; border-left: 4px solid var(--tinte); }
.liste-dateien, .anfragen { list-style: none; padding: 0; margin: 12px 0 0; }
.liste-dateien li { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--linie); }
.anfragen li { display: flex; justify-content: space-between; gap: 12px 20px; align-items: center; flex-wrap: wrap; }
.anfragen li + li { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--linie); }
.anfragen .zitat { font-style: italic; color: var(--tinte); }
.anfragen select { width: auto; min-height: 40px; padding: 4px 30px 4px 8px; }
input.mini { width: 8.5rem; max-width: 8.5rem; min-height: 40px; padding: 5px 8px; }
table.team select { width: auto; min-height: 40px; padding: 5px 30px 5px 8px; }

/* Unterlagen-Check */
.ablage { border: 2px dashed var(--linie-stark); border-radius: var(--r); padding: 32px 24px; text-align: center; background: var(--flaeche); display: flex; flex-direction: column; align-items: center; gap: 10px; }
.ablage p { margin: 0; }
.ablage.aktiv { border-color: var(--akzent); background: var(--akzent-hell); }
.dok { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; padding: 16px 0; border-bottom: 1px solid var(--linie); align-items: center; }
.dok-detail { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 24px; background: var(--ruhe); padding: 18px; }
@media (max-width: 800px) { .dok-detail { grid-template-columns: minmax(0, 1fr); } }
.seitenbild { position: relative; background: #fff; border: 1px solid var(--linie); }
.seitenbild canvas { display: block; width: 100%; height: auto; }
.markierung { position: absolute; border: 2px solid var(--c, var(--warn)); left: var(--x); top: var(--y); width: var(--w); height: var(--h); }

/* Druck */
.nur-druck { display: none; }
@media print {
  .kopf, .fuss, .demoleiste, .aktionen, .freischalten, .nicht-drucken, nav, .seitenleiste .knopf { display: none !important; }
  .nur-druck { display: block; }
  body { background: #fff; font-size: 11pt; }
  main { padding: 0; }
  .spalten { display: block; }
  .karte-box, .genehmigung { border: 1px solid #999; break-inside: avoid; padding: 8px; }
  .tabelle-wrap { border: 1px solid #999; }
  a { color: #000; text-decoration: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .knopf, .hauptnav a, .wahl label, .reiter button { transition: background-color .15s, border-color .15s, color .15s; }
}
@media (prefers-reduced-motion: reduce) { .linkliste a::after { transition: none; } }

/* Inhalte im Raster: Spalten mit Linie oben statt Kästen (Leitidee „Text vor Kasten“) */
.raster > .karte-box { background: transparent; border: 0; border-top: 2px solid var(--tinte); border-radius: 0; padding: 18px 0 0; }
.raster > .karte-box > h2:first-child, .raster > .karte-box > h3:first-child { margin-top: 0; }
.raster > details.karte-box { border-top-width: 1px; border-top-color: var(--linie); padding: 14px 0 10px; }
.raster > details.karte-box summary { font-weight: 400; }
.raster > details.karte-box[open] { padding-bottom: 16px; }
#codeform .label { flex-basis: 100%; margin: 0 0 -4px; font-weight: 600; }
.raster > .karte-box b.zahl { font-size: 2rem; font-weight: 700; line-height: 1.1; letter-spacing: -.01em; margin-right: 2px; }
@media (max-width: 420px) { .marke-text small { display: none; } }
.karte-box > .ueberzeile:first-child, .freischalten .preisbox > .ueberzeile:first-child { margin-top: 0; }
h2.ueberzeile, h3.ueberzeile { font-size: .9rem; }