/* Pflichtenradar – Gestaltung angelehnt an die technische Zeichnung: Schriftfeld, Normlinien, ruhige Fläche. */
:root {
  --papier: #F3F5F7;
  --flaeche: #FFFFFF;
  --tinte: #1B2430;
  --marke: #14365D;
  --linie: #C3CCD6;
  --linie-fein: #DDE3E9;
  --grau: #56606D;
  --signal: #23696A;
  --signal-hell: #E3F0EF;
  --rot: #B42B2B;    --rot-hell: #FBEAEA;
  --gelb: #8A5A12;   --gelb-hell: #FBF1DE;
  --gruen: #276B47;  --gruen-hell: #E4F2E8;
  --schrift: "Segoe UI", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --breite: 72rem;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--papier); color: var(--tinte); font: 400 1.0625rem/1.6 var(--schrift); }
a { color: var(--marke); text-underline-offset: .18em; }
a:hover { color: var(--signal); }
:focus-visible { outline: 3px solid var(--signal); outline-offset: 2px; }
h1, h2, h3 { color: var(--marke); line-height: 1.2; }
h1 { font-size: clamp(1.9rem, 1.2rem + 2.6vw, 2.75rem); font-weight: 700; letter-spacing: -.015em; margin: 0 0 1rem; }
h2 { font-size: 1.3rem; font-weight: 650; margin: 2.25rem 0 .75rem; }
p { margin: 0 0 1rem; }
.rahmen { max-width: var(--breite); margin: 0 auto; padding: 0 1rem; }
@media (min-width: 48rem) { .rahmen { padding: 0 2rem; } }

.sprung { position: absolute; left: -999px; top: 0; background: var(--flaeche); padding: .5rem 1rem; }
.sprung:focus { left: 1rem; z-index: 10; }

/* Kopf und Fuß */
.kopf { border-bottom: 1px solid var(--linie); background: var(--flaeche); }
.kopf-innen { display: flex; align-items: center; justify-content: space-between; min-height: 3.75rem; }
.marke { display: inline-flex; gap: .55rem; align-items: center; font-weight: 700; font-size: 1.05rem; color: var(--marke); text-decoration: none; letter-spacing: .01em; }
.kopf-link { font-weight: 600; }
.fuss { margin-top: 5rem; border-top: 1px solid var(--linie); color: var(--grau); font-size: .875rem; }
.fuss-innen { display: flex; flex-wrap: wrap; gap: .5rem 2rem; justify-content: space-between; padding-top: 1.25rem; padding-bottom: 2rem; }
.fuss p { margin: 0; }
.fuss nav { display: flex; gap: 1.25rem; }
.fuss a { color: var(--grau); }

/* Knöpfe */
.knopf, .knopf-leise { display: inline-block; font: inherit; font-weight: 600; border-radius: 3px; padding: .75rem 1.5rem; cursor: pointer; text-decoration: none; }
.knopf { background: var(--marke); color: #fff; border: 1px solid var(--marke); }
.knopf:hover { background: #0F2A49; color: #fff; }
.knopf-leise { background: var(--flaeche); color: var(--marke); border: 1px solid var(--linie); }
.knopf-leise:hover { border-color: var(--marke); }
.leise { color: var(--grau); font-size: .9375rem; }
.einleitung { font-size: 1.1875rem; line-height: 1.55; max-width: 38em; }
.optional { font-weight: 400; color: var(--grau); }

/* Startseite */
.held { display: grid; gap: 2.5rem; padding: 3rem 0 1rem; align-items: start; }
@media (min-width: 62rem) { .held { grid-template-columns: 1fr 33rem; gap: 3.5rem; padding-top: 4.5rem; } }
.held-text h1 { max-width: 15em; }

/* Das Schriftfeld: Rahmen in Zeichnungsstärke, Felder mit kleinem Feldnamen */
.schriftfeld { background: var(--flaeche); border: 2px solid var(--marke); font-size: .9375rem; }
.sf-zeile { display: grid; border-top: 1px solid var(--marke); }
.sf-zeile:first-child { border-top: 0; }
.sf-zeile > div { padding: .55rem .8rem .65rem; }
.sf-zeile > div + div { border-left: 1px solid var(--marke); }
.sf-regel { grid-template-columns: 1fr 14rem; border-top-color: var(--linie); }
.sf-titel + .sf-regel { border-top-color: var(--marke); }
.sf-regel > div + div { border-left-color: var(--linie); }
.sf-drei { grid-template-columns: 1.1fr 1.3fr .6fr; }
.sf-titel > div { font-size: 1.15rem; font-weight: 700; color: var(--marke); }
.sf-label { display: block; font-size: .72rem; color: var(--grau); letter-spacing: .02em; line-height: 1.3; margin-bottom: .1rem; font-weight: 400; }
.sf-termin { font-variant-numeric: tabular-nums; }
@media (max-width: 30rem) {
  .sf-regel, .sf-drei { grid-template-columns: 1fr; }
  .sf-zeile > div + div { border-left: 0; border-top: 1px solid var(--linie-fein); }
}

.grundsaetze { max-width: 52rem; }
.grundsaetze dl { display: grid; gap: 1.5rem 3rem; margin: 0 0 1.5rem; }
@media (min-width: 48rem) { .grundsaetze dl { grid-template-columns: 1fr 1fr; } }
.grundsaetze dt { font-weight: 650; color: var(--marke); margin-bottom: .25rem; }
.grundsaetze dd { margin: 0; }

/* Fragebogen */
.check, .ergebnis, .text { max-width: 46rem; padding-top: 2.5rem; }
.ergebnis { max-width: 60rem; }
.schritt { margin-top: 2.5rem; padding-left: 1.25rem; border-left: 2px solid var(--linie); }
.schritt h2 { display: flex; gap: .75rem; align-items: baseline; margin: 0 0 1.25rem -2.15rem; }
.schritt-nr { display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; background: var(--marke); color: #fff; font-size: .95rem; border-radius: 50%; flex: none; }
.frage { border: 0; margin: 0 0 1.75rem; padding: 0; min-width: 0; }
.frage > label, .frage legend { display: block; font-weight: 600; margin-bottom: .35rem; padding: 0; }
.hilfe { color: var(--grau); font-size: .9375rem; margin: 0 0 .6rem; max-width: 40em; }
input[type=text], select { font: inherit; color: var(--tinte); background: var(--flaeche); border: 1px solid #8C97A4; border-radius: 3px; padding: .6rem .7rem; width: 100%; }
select { max-width: 34rem; }
input.kurz { width: 5rem; }
.zahlfeld { display: flex; align-items: center; gap: .6rem; max-width: 20rem; }
.einheit { color: var(--grau); white-space: nowrap; }
.optionen { display: flex; flex-wrap: wrap; gap: .5rem; }
.option { display: inline-flex; align-items: center; gap: .5rem; background: var(--flaeche); border: 1px solid var(--linie); border-radius: 3px; padding: .5rem .9rem; cursor: pointer; font-weight: 400; }
.option:has(input:checked) { border-color: var(--marke); box-shadow: inset 0 0 0 1px var(--marke); }
.option input { margin: 0; accent-color: var(--marke); }
.nebenfeld { margin-top: .75rem; }
.nebenfeld label { display: block; font-size: .9375rem; margin-bottom: .25rem; }
.bedingung { background: var(--flaeche); border-left: 3px solid var(--signal); padding: .6rem .9rem; font-size: .9375rem; }
.hat-fehler input[type=text], .hat-fehler select { border-color: var(--rot); }
.meldung { color: var(--rot); font-weight: 600; font-size: .9375rem; margin: .4rem 0 0; }
.fehlerliste { border: 2px solid var(--rot); background: var(--rot-hell); padding: 1rem 1.25rem; margin: 1.5rem 0; }
.fehlerliste h2 { color: var(--rot); margin: 0 0 .5rem; font-size: 1.1rem; }
.fehlerliste ul { margin: 0; padding-left: 1.2rem; }
.fehlerliste a { color: var(--rot); }
.abschluss { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--linie); }

/* Gruppen-Rechner */
.gruppen-tabelle { display: grid; gap: .5rem; margin-bottom: .75rem; }
.g-kopf { display: none; }
.g-zeile { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; padding: .75rem; background: var(--flaeche); border: 1px solid var(--linie-fein); }
.g-zeile label:first-child { grid-column: 1 / -1; }
.g-label { display: block; font-size: .8rem; color: var(--grau); }
@media (min-width: 48rem) {
  .g-kopf, .g-zeile { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1.15fr; gap: .5rem; }
  .g-kopf { font-size: .8rem; color: var(--grau); padding: 0 .1rem; }
  .g-zeile { padding: 0; background: none; border: 0; }
  .g-zeile label:first-child { grid-column: auto; }
  .g-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}

/* Ergebnis */
.landkarte { width: 100%; border-collapse: collapse; background: var(--flaeche); border: 2px solid var(--marke); margin: 1.5rem 0; font-size: .9688rem; }
.landkarte th, .landkarte td { text-align: left; vertical-align: top; padding: .75rem .8rem; border-top: 1px solid var(--linie); }
.landkarte thead th { background: var(--marke); color: #fff; font-weight: 600; border-top: 0; font-size: .875rem; }
.landkarte tbody th { color: var(--marke); white-space: nowrap; }
.landkarte td:last-child { font-variant-numeric: tabular-nums; }
.status { display: inline-block; padding: .2rem .55rem; border-radius: 3px; font-size: .875rem; font-weight: 600; border-left: 3px solid; }
.status-trifft_zu { color: var(--rot); background: var(--rot-hell); }
.status-voraussichtlich, .status-pruefen { color: var(--gelb); background: var(--gelb-hell); }
.status-nicht_zu { color: var(--grau); background: var(--papier); }
.status.chance.status-voraussichtlich, .status.chance.status-trifft_zu { color: var(--gruen); background: var(--gruen-hell); }
.offen { display: block; margin-top: .35rem; color: var(--grau); font-size: .875rem; }
@media (max-width: 44rem) {
  .landkarte thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .landkarte tr { display: block; border-top: 1px solid var(--marke); padding: .5rem 0; }
  .landkarte tr:first-child { border-top: 0; }
  .landkarte th, .landkarte td { display: block; border: 0; padding: .3rem .8rem; }
  .landkarte td::before { content: attr(data-titel); display: block; font-size: .75rem; color: var(--grau); }
  .landkarte tbody th { font-size: 1.1rem; }
}
.betrag { background: var(--gruen-hell); border-left: 4px solid var(--gruen); padding: 1rem 1.25rem; margin: 1.5rem 0; }
.betrag p:last-child { margin: 0; font-size: .9375rem; }
.knopfreihe { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1rem 0; }
.knopfreihe form { margin: 0; }
.rechtlich { margin-top: 3rem; padding-top: 1rem; border-top: 1px solid var(--linie); color: var(--grau); font-size: .875rem; max-width: 52rem; }

/* Textseiten */
.text h2 { font-size: 1.125rem; margin-top: 2rem; }
.text p { max-width: 40em; }

[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }
@media print { .kopf, .fuss, .knopfreihe { display: none; } body { background: #fff; } }