/* CD wie ra-couck.de: Anthrazit #35363B + Signalrot #EC1E24.
   Systemschrift statt PT Sans — die Oberfläche läuft lokal und soll keine
   Schriftdateien mitschleppen; die Wirkung trägt die Farbe. */
:root{
  --c-primary:#35363B; --c-primary-deep:#25262B; --c-primary-soft:#3E3F46;
  --c-red:#EC1E24; --c-red-deep:#C8161B; --c-red-hover:#A81217; --c-red-soft:#FBE7E8;
  --c-ink:#2B2C31; --c-muted:#6E6F76; --c-faint:#74757C;
  --c-bg:#FCFCFD; --c-bg-alt:#F5F5F5; --c-surface:#fff;
  --c-line:#E6E6E6; --c-line-strong:#D9D9DC; --c-line-input:#84858D;
  --c-ok:#1F7A4D; --c-warn:#8A5A00;
  --ff:"PT Sans","Open Sans","Noto Sans",system-ui,-apple-system,Segoe UI,sans-serif;
  --radius:4px; --schatten:0 1px 3px rgba(0,0,0,.08);
}
*{box-sizing:border-box}
body{margin:0;font-family:var(--ff);font-size:16px;line-height:1.62;
     color:var(--c-ink);background:var(--c-bg)}
h1,h2,h3{line-height:1.28;margin:0 0 .5rem;color:var(--c-primary);font-weight:700}
h1{font-size:1.5rem} h2{font-size:1.22rem} h3{font-size:1rem}
p{margin:0 0 .75rem}
a{color:var(--c-red-deep)}

/* Kopf */
header{background:var(--c-primary-deep);color:#F6F6F7;padding:1.1rem 1.5rem;
       display:flex;align-items:baseline;gap:1rem;flex-wrap:wrap}
header strong{font-size:1.15rem;letter-spacing:.01em}
header strong em{font-style:normal;color:var(--c-red)}
header span{color:#AFB0B6;font-size:.875rem}

main{max-width:1080px;margin:0 auto;padding:1.5rem}

/* Schritte */
.schritt{background:var(--c-surface);border:1px solid var(--c-line);
         border-radius:var(--radius);box-shadow:var(--schatten);
         padding:1.25rem 1.4rem;margin-bottom:1.25rem}
.schritt[hidden]{display:none}
.schritt__kopf{display:flex;align-items:center;gap:.6rem;margin-bottom:.9rem}
.schritt__nr{flex:0 0 auto;width:1.7rem;height:1.7rem;border-radius:50%;
   background:var(--c-red);color:#fff;font-weight:700;font-size:.85rem;
   display:grid;place-items:center}
.schritt__kopf h2{margin:0}

/* Formular */
label{display:block;font-weight:700;font-size:.875rem;margin-bottom:.3rem;
      color:var(--c-primary)}
/* Alle texteingebenden Feldarten, nicht nur type=text: E-Mail-, Passwort- und
   Datumsfelder blieben sonst unformatiert und 21px hoch — auf der
   Anmeldeseite ebenso wie in der Verwaltung. */
textarea,select,
input:is([type=text],[type=email],[type=password],[type=date],[type=number],[type=tel],[type=url],[type=search]){
  width:100%;font:inherit;padding:.55rem .7rem;min-height:44px;
  border:1px solid var(--c-line-input);border-radius:var(--radius);
  background:#fff;color:var(--c-ink)}
textarea{min-height:9rem;resize:vertical}
:is(textarea,input,select,button,[tabindex]):focus-visible{
  outline:3px solid var(--c-red);outline-offset:2px}
.hilfe{color:var(--c-muted);font-size:.875rem;margin:.35rem 0 0}

button{font:inherit;font-weight:700;cursor:pointer;border-radius:var(--radius);
  padding:.6rem 1.2rem;border:1px solid transparent;min-height:44px}
.btn-haupt{background:var(--c-red-deep);color:#fff}
.btn-haupt:hover:not(:disabled){background:var(--c-red-hover)}
.btn-neben{background:#fff;color:var(--c-primary);border-color:var(--c-line-strong)}
.btn-neben:hover:not(:disabled){background:var(--c-bg-alt)}
button:disabled{opacity:.5;cursor:not-allowed}
.knopfreihe{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:1rem}

/* Musterliste */
.muster{display:grid;gap:.6rem;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.muster button{width:100%;text-align:left;background:#fff;border:1px solid var(--c-line-strong);
  color:var(--c-ink);font-weight:400;padding:.75rem .9rem;display:block}
.muster button:hover:not(:disabled){border-color:var(--c-red);background:var(--c-red-soft)}
.muster button[aria-pressed=true]{border-color:var(--c-red);border-width:2px;
  background:var(--c-red-soft)}
.muster b{display:block;color:var(--c-primary);font-size:.95rem}
.muster small{color:var(--c-muted)}
.muster button:disabled small{color:var(--c-faint)}

/* Bausteine */
.baustein{border:1px solid var(--c-line);border-radius:var(--radius);
  padding:.7rem .85rem;margin-bottom:.55rem;background:#fff}
.baustein--vorlage{border-left:4px solid var(--c-red);background:var(--c-red-soft)}
.baustein__zeile{display:flex;gap:.6rem;align-items:flex-start}
.baustein input[type=checkbox]{margin-top:.35rem;width:18px;height:18px;flex:0 0 auto;
  accent-color:var(--c-red-deep)}
.baustein__titel{font-weight:700;color:var(--c-primary)}
.baustein__id{font-family:ui-monospace,Consolas,monospace;font-size:.8rem;
  color:var(--c-muted)}
.baustein__grund{font-size:.875rem;color:var(--c-ink);margin:.25rem 0 0}
.baustein__hinweis{font-size:.85rem;color:var(--c-muted);margin:.3rem 0 0;
  padding-left:.7rem;border-left:2px solid var(--c-line-strong)}
.marke{display:inline-block;font-size:.7rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;padding:.1rem .45rem;border-radius:2px;vertical-align:.1em}
.marke--vorbehalt{background:var(--c-red-deep);color:#fff}
.marke--gegenseite{background:var(--c-primary-soft);color:#fff}

/* Meldungen */
.meldung{border-left:4px solid;padding:.7rem .9rem;margin:.6rem 0;
  border-radius:0 var(--radius) var(--radius) 0;font-size:.925rem}
.meldung--fehler{border-color:var(--c-red-deep);background:var(--c-red-soft)}
.meldung--hinweis{border-color:var(--c-line-strong);background:var(--c-bg-alt)}
.meldung--ok{border-color:var(--c-ok);background:#EAF5EF}
.meldung--warn{border-color:var(--c-warn);background:#FDF6E7}
.meldung code{font-size:.85em}

ul.schlicht{margin:.4rem 0 0;padding-left:1.2rem}
ul.schlicht li{margin-bottom:.3rem}

/* Variablen */
.var-gitter{display:grid;gap:.75rem;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.var-gitter label{font-family:ui-monospace,Consolas,monospace;font-size:.78rem;
  color:var(--c-muted);font-weight:400}

pre{background:var(--c-primary-deep);color:#F6F6F7;padding:1rem;border-radius:var(--radius);
  overflow:auto;max-height:26rem;font-size:.8rem;line-height:1.5;white-space:pre-wrap}

.laden{display:inline-block;width:1rem;height:1rem;border:2px solid #fff;
  border-top-color:transparent;border-radius:50%;animation:dreh .7s linear infinite;
  vertical-align:-.15em;margin-right:.5rem}
@keyframes dreh{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.laden{animation-duration:2s}}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  white-space:nowrap}
footer{color:var(--c-faint);font-size:.8rem;padding:1rem 1.5rem 2.5rem;
  max-width:1080px;margin:0 auto}

/* Hilfsklassen — ersetzen Inline-Styles, damit die CSP ohne
   'unsafe-inline' auskommt (style-Attribute zaehlen als inline). */
.reihe-mittig{display:flex;align-items:center;gap:.4rem;font-weight:400}
.kasten{width:18px;height:18px}
.abstand-oben{margin-top:1.2rem}
.abstand-oben-klein{margin-top:1rem}
.wachsend{flex:1;min-width:0}
.schlicht-label{font-weight:400;margin:0}

/* --- Schritt 4: Angaben, nach Vertragsabschnitten gegliedert -------------- */
/* 71 Felder als flaches Raster sind unbenutzbar. Gliederung nach Abschnitt,
   erste Gruppe offen, Rest zugeklappt; der Fortschritt zeigt, wo noch etwas
   fehlt, ohne dass man alles aufklappen muss. */

.fortschritt{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;
  background:var(--c-bg-alt);border:1px solid var(--c-line);
  border-radius:var(--radius);padding:.6rem .9rem;margin:.9rem 0 1rem}
.fortschritt__balken{flex:1 1 160px;height:8px;min-width:120px;
  background:var(--c-line-strong);border-radius:99px;overflow:hidden;position:relative}
.fortschritt__balken::after{content:"";position:absolute;inset:0 auto 0 0;
  width:var(--anteil,0%);background:var(--c-red-deep);border-radius:99px;
  transition:width .3s ease}
.fortschritt__text{font-size:.875rem;font-weight:700;color:var(--c-primary);
  white-space:nowrap}
/* 44px auch hier: WCAG 2.2 AA verlangt nur 24px, aber jede andere
   Schaltfläche der Oberfläche hält 44px — Uneinheitlichkeit ist auf dem
   Telefon spürbar. */
.btn-klein{padding:.35rem .8rem;min-height:44px;font-size:.8rem;
  background:#fff;color:var(--c-primary);border:1px solid var(--c-line-strong)}
.btn-klein:hover{background:#fff;border-color:var(--c-red)}

.gruppe{border:1px solid var(--c-line);border-radius:var(--radius);
  margin-bottom:.6rem;background:#fff}
.gruppe > summary{display:flex;align-items:center;gap:.6rem;cursor:pointer;
  padding:.7rem .9rem;list-style:none;min-height:44px;border-radius:var(--radius)}
.gruppe > summary::-webkit-details-marker{display:none}
.gruppe > summary::before{content:"▸";color:var(--c-red-deep);font-size:.9rem;
  flex:0 0 auto;transition:transform .2s ease}
.gruppe[open] > summary::before{transform:rotate(90deg)}
.gruppe > summary:hover{background:var(--c-bg-alt)}
.gruppe > summary:focus-visible{outline:3px solid var(--c-red);outline-offset:-3px}
.gruppe__titel{font-weight:700;color:var(--c-primary);flex:1;min-width:0}
.gruppe__anzahl{flex:0 0 auto;font-size:.75rem;font-weight:700;color:var(--c-muted);
  background:var(--c-bg-alt);border-radius:99px;padding:.1rem .5rem}
.gruppe__stand{flex:0 0 auto;font-size:.75rem;color:var(--c-red-deep);font-weight:700}
.gruppe__stand--fertig{color:var(--c-ok)}
.gruppe[open] > summary{border-bottom:1px solid var(--c-line)}
.gruppe__felder{padding:.9rem;display:grid;gap:1rem;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}

.feld{min-width:0}
.feld label{display:flex;align-items:baseline;gap:.4rem;flex-wrap:wrap;
  font-weight:700;font-size:.9rem;color:var(--c-primary);margin-bottom:.25rem}
.feld__einheit{font-weight:400;font-size:.78rem;color:var(--c-muted);
  background:var(--c-bg-alt);border-radius:2px;padding:0 .35rem}
.feld__quelle{font-weight:400;font-size:.72rem;color:var(--c-red-deep)}
.feld__erklaerung{font-size:.8rem;line-height:1.45;color:var(--c-muted);
  margin:.3rem 0 0;padding-left:.6rem;border-left:2px solid var(--c-line-strong)}
.feld--belegt input{border-color:var(--c-ok)}
.feld input::placeholder{color:var(--c-faint);opacity:1}

/* --- Dokumentvorschau im Kanzlei-CD --------------------------------------- */
/* Gleiche Gestaltung wie die Word-Datei (docx_ausgabe.py): Arial, Anthrazit-
   Überschriften, Signalrot-Linie unter dem Titel, offene Platzhalter rot
   hinterlegt. Der Nutzer soll vor dem Download sehen, was er bekommt. */

.dokument{background:#fff;border:1px solid var(--c-line);border-radius:var(--radius);
  padding:2.2rem 2.4rem;max-height:32rem;overflow-y:auto;
  font-family:Arial,Helvetica,var(--ff);font-size:.86rem;line-height:1.5;
  color:var(--c-ink);box-shadow:inset 0 0 0 1px #fff, var(--schatten)}
.dokument > *:first-child{margin-top:0}

.dok__titel{text-align:center;font-size:1.18rem;font-weight:700;
  color:var(--c-primary);letter-spacing:.02em;text-transform:uppercase;
  border-bottom:2px solid var(--c-red);padding-bottom:.5rem;margin:0 0 .3rem}
.dok__untertitel{text-align:center;font-style:italic;color:var(--c-muted);
  font-size:.82rem;margin:0 0 1.6rem}
.dok__h1{font-size:1rem;font-weight:700;color:var(--c-primary);
  border-bottom:1px solid var(--c-line-strong);padding-bottom:.3rem;
  margin:1.6rem 0 .6rem}
.dok__h2{font-size:.9rem;font-weight:700;color:var(--c-primary);margin:1.1rem 0 .4rem}
.dok__absatz{text-align:justify;margin:0 0 .6rem;hyphens:auto}
.dok__eingerueckt{text-align:justify;margin:0 0 .6rem .9rem;hyphens:auto}
.dok__hinweis{background:var(--c-bg-alt);border-left:3px solid var(--c-red);
  padding:.45rem .7rem;margin:.5rem 0;font-size:.8rem;font-style:italic;
  color:var(--c-muted)}
.dok__umbruch{border:0;border-top:1px dashed var(--c-line-strong);margin:1.4rem 0}
.dok__gekuerzt{text-align:center;color:var(--c-faint);font-size:.8rem;
  font-style:italic;margin-top:1.4rem;padding-top:.8rem;
  border-top:1px solid var(--c-line)}
.dok__offen{background:var(--c-red-soft);color:var(--c-red-deep);font-weight:700;
  padding:0 .18rem;border-radius:2px}

.lizenzfelder{display:grid;gap:.75rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));
  background:var(--c-bg-alt);border:1px solid var(--c-line);
  border-radius:var(--radius);padding:.9rem;margin:1rem 0}
.lizenzfelder .hilfe{grid-column:1/-1;margin:0}
.lizenzfelder label{font-size:.85rem}

/* --- Anmeldung ------------------------------------------------------------ */
.anmeldeseite{min-height:100vh;display:grid;place-items:center;background:var(--c-primary-deep)}
.anmeldung{width:min(100% - 2rem, 26rem);text-align:center}
.anmeldung__marke{color:var(--c-on-dark);margin-bottom:1.4rem}
.anmeldung__marke strong{display:block;font-size:1.3rem;letter-spacing:.02em}
.anmeldung__marke strong em{font-style:normal;color:var(--c-red)}
.anmeldung__marke span{color:var(--c-on-dark-muted);font-size:.9rem}
.anmeldung__karte{background:var(--c-surface);border-radius:var(--radius);
  padding:1.8rem 1.6rem;text-align:left;box-shadow:0 8px 30px rgba(0,0,0,.28)}
.anmeldung__karte h1{font-size:1.25rem;margin-bottom:.3rem}
.anmeldung__karte label{margin-top:.9rem}
.anmeldung__karte button{width:100%;margin-top:1.2rem}
.anmeldung__fuss{color:var(--c-on-dark-muted);font-size:.8rem;margin-top:1.2rem;
  line-height:1.6}

/* --- Verwaltung ----------------------------------------------------------- */
.kopf__link{margin-left:auto;color:var(--c-on-dark);font-size:.875rem;
  text-decoration:underline;text-underline-offset:3px}
.kopf__link:hover{color:#fff}
.kastenreihe{display:flex;gap:.7rem;flex-wrap:wrap}
.kastenreihe label{font-weight:400;font-size:.85rem;margin:0}
.knopfreihe--eingerueckt{padding:0 .9rem .9rem}
.passwort{display:inline-block;margin-top:.3rem;padding:.35rem .6rem;
  background:var(--c-primary-deep);color:var(--c-on-dark);border-radius:2px;
  font-family:ui-monospace,Consolas,monospace;font-size:.95rem;
  user-select:all;word-break:break-all}
select{width:100%;font:inherit;padding:.55rem .7rem;min-height:44px;
  border:1px solid var(--c-line-input);border-radius:var(--radius);background:#fff}

/* Ankreuzfelder: Das Kästchen selbst bleibt klein — Ziel ist die Beschriftung.
   WCAG 2.2 AA (2.5.8) verlangt 24px; hier sind es 44px über das Label. */
.kastenreihe label{display:inline-flex;align-items:center;gap:.35rem;
  min-height:44px;padding:0 .5rem;border:1px solid var(--c-line);
  border-radius:var(--radius);cursor:pointer;background:#fff}
.kastenreihe label:hover{border-color:var(--c-red);background:var(--c-red-soft)}
.kastenreihe label:focus-within{outline:3px solid var(--c-red);outline-offset:2px}
.kastenreihe .kasten{width:20px;height:20px;accent-color:var(--c-red-deep)}

/* --- Belehrung zur KI-Nutzung -------------------------------------------- */
/* Die beiden Wege stehen nebeneinander, nicht übereinander: Ein Verzichtsweg,
   der unter dem Hauptknopf klein wegsteht, ist keine echte Alternative — und
   ohne echte Alternative wäre die Zustimmung an die Leistung gekoppelt. */
.belehrung{max-width:52rem;margin:0 auto}
.belehrung h1{font-size:1.4rem;margin-bottom:.4rem}
.belehrung__einleitung{font-size:1.02rem;color:var(--c-ink);margin-bottom:1.4rem}
.belehrung__punkt{border-left:3px solid var(--c-line-strong);padding:0 0 0 .9rem;
  margin-bottom:1rem}
.belehrung__punkt h2{font-size:.95rem;margin-bottom:.2rem}
.belehrung__punkt p{margin:0;font-size:.925rem;color:var(--c-ink)}
.belehrung__fuss{margin-top:1.2rem;text-align:center}

.weiche{display:grid;gap:1rem;margin-top:1.6rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,19rem),1fr))}
.weiche__karte{border:1px solid var(--c-line-strong);border-radius:var(--radius);
  padding:1.1rem 1.2rem;background:#fff;display:flex;flex-direction:column;gap:.6rem}
.weiche__karte h2{font-size:1.05rem;margin:0}
.weiche__karte p{margin:0;font-size:.9rem;color:var(--c-muted)}
.weiche__karte button{margin-top:auto}
.weiche__stark{font-weight:700;color:var(--c-ok)!important}
.weiche .consent{display:flex;gap:.6rem;align-items:flex-start;font-size:.875rem;
  line-height:1.5;background:var(--c-bg-alt);border-radius:var(--radius);
  padding:.7rem .8rem;cursor:pointer}
.weiche .consent:focus-within{outline:3px solid var(--c-red);outline-offset:2px}
.weiche .consent .kasten{flex:0 0 auto;margin-top:.15rem;width:24px;height:24px;
  accent-color:var(--c-red-deep)}

.alslink{background:none;border:0;padding:0;min-height:0;font:inherit;
  color:var(--c-red-deep);text-decoration:underline;text-underline-offset:2px;
  cursor:pointer}
.alslink:hover{color:var(--c-red-hover)}

/* --- Rechtstexte auf der Subdomain --------------------------------------- */
.rechtstext{max-width:50rem;margin:0 auto}
.rechtstext h1{font-size:1.5rem;margin-bottom:.3rem}
.rechtstext h2{font-size:1.1rem;margin:1.8rem 0 .5rem;padding-top:.9rem;
  border-top:1px solid var(--c-line)}
.rechtstext h3{font-size:.95rem;margin:1.1rem 0 .3rem;color:var(--c-primary)}
.rechtstext p,.rechtstext li{font-size:.925rem;line-height:1.65}
.rechtstext ul{padding-left:1.2rem;margin:.4rem 0 .8rem}
.rechtstext li{margin-bottom:.4rem}
.rechtstext em{color:var(--c-red-deep);font-style:normal;font-weight:700}
.rechtstext__tabelle{width:100%;border-collapse:collapse;margin:.8rem 0;font-size:.85rem;
  display:block;overflow-x:auto}
.rechtstext__tabelle th,.rechtstext__tabelle td{border:1px solid var(--c-line);
  padding:.45rem .6rem;text-align:left;vertical-align:top}
.rechtstext__tabelle thead th{background:var(--c-bg-alt);color:var(--c-primary)}