/* Ergaenzung zum Grundgeruest: Zustimmung, Danke-Seite, Fehlerseite.
   Gleiche Farben, gleiche Schrift, gleiche Knoepfe wie die Landingpage –
   hier kommt nichts Neues dazu, nur die fehlenden Bausteine. */

/* ---------- Zustimmung ---------- */
.zustimmung{position:fixed;left:0;right:0;bottom:0;z-index:60;
  padding:14px var(--rand) calc(14px + env(safe-area-inset-bottom));
  background:var(--weiss);border-top:1px solid var(--linie);box-shadow:0 -10px 30px rgba(4,33,58,.14);
  max-height:70vh;overflow-y:auto}
.zustimmung[hidden]{display:none!important}
.zustimmung-innen{max-width:var(--breite);margin:0 auto;color:var(--tinte)}
/* Kopf = Text und Schaltflaechen. Solange die Einstellungen zu sind, stehen sie NEBENEINANDER –
   der Banner ist dann nur eine Knopfreihe hoch. Die Kategorien haben flex-basis:100 %, brechen
   also auf eine eigene Zeile um und schieben die Knoepfe darunter, sobald sie sichtbar werden.
   Kein :has() und kein order noetig: verschwindet der Block, rutscht alles von selbst zusammen. */
.zustimmung-kopf{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px}
.zustimmung-einleitung{flex:1 1 360px;min-width:0;font-size:15px;line-height:1.45;color:var(--grau)}
.zustimmung-einleitung b{color:var(--tinte)}

/* Kategorien: je eine Zeile mit Schalter, darunter die Pflichtangaben zum Ausklappen */
.zustimmung-gruppen{flex:1 1 100%;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:8px 16px}
.zustimmung-gruppe{border:1.5px solid var(--linie);border-radius:12px;padding:10px 14px;background:var(--weiss)}
.zustimmung-zeile{display:flex;align-items:center;gap:10px;cursor:pointer;min-height:32px}
.zustimmung-zeile input{width:20px;height:20px;flex:0 0 auto;accent-color:var(--blau);cursor:pointer}
.zustimmung-zeile input:disabled{cursor:default}
.zustimmung-name{font-weight:500;font-size:16px}
.zustimmung-pflicht,.zustimmung-frei{margin-left:auto;font-size:13px;color:var(--grau);white-space:nowrap}
.zustimmung-details{margin-top:6px}
.zustimmung-details summary{font-size:14px;color:var(--grau);cursor:pointer;padding:4px 0;
  text-decoration:underline;text-decoration-color:var(--linie);text-underline-offset:3px}
.zustimmung-details summary:hover{color:var(--blau)}
.zustimmung-details dl{margin:6px 0 2px;font-size:14px;line-height:1.5}
.zustimmung-details dt{font-weight:500;color:var(--tinte);margin-top:7px}
.zustimmung-details dd{margin:1px 0 0;color:var(--grau)}

/* Ablehnen und Zustimmen sind BEWUSST gleich gestaltet – gleiche Groesse, Farbe und Gewichtung.
   Ein optisch schwaecheres Ablehnen waere ein Dark Pattern und rechtlich angreifbar. */
.zustimmung-knoepfe{display:flex;flex-wrap:wrap;gap:10px;flex:0 0 auto}
.zustimmung-knoepfe .knopf{min-height:46px;padding:11px 20px;font-size:16px;
  white-space:nowrap;text-align:center}
.zustimmung-knoepfe .knopf[hidden]{display:none}
.zustimmung-fuss{margin-top:10px;font-size:13px;line-height:1.5;color:var(--grau)}
.zustimmung-fuss a,.zustimmung-mehr{color:var(--blau);text-decoration:underline;text-underline-offset:3px}
.zustimmung-mehr{background:none;border:0;padding:0;font:inherit;cursor:pointer}
.zustimmung-mehr:hover{color:var(--blau-hell)}
.zustimmung-gruppen[hidden]{display:none}
/* Solange gefragt wird, tritt die untere Leiste zurueck – zwei Balken uebereinander gehen nicht. */
.zustimmung-offen .leiste-unten{display:none!important}
@media (max-width:720px){
  /* Auf schmalen Geraeten muessen „Nur notwendige" und „Alle akzeptieren" BEIDE ohne Scrollen
     erreichbar sein – sonst ist eine Option faktisch schlechter gestellt. Darum stehen sie
     nebeneinander und der Rest wird enger; „Auswahl speichern" bekommt die Zeile darunter. */
  .zustimmung{padding:10px var(--rand) calc(10px + env(safe-area-inset-bottom))}
  .zustimmung-einleitung{font-size:14px;line-height:1.45}
  .zustimmung-gruppen{margin-top:8px;gap:8px}
  .zustimmung-gruppe{padding:8px 12px}
  .zustimmung-details summary{padding:2px 0}
  .zustimmung-kopf{gap:8px}
  .zustimmung-einleitung{flex:1 1 100%}
  .zustimmung-knoepfe{flex:1 1 100%;gap:8px}
  .zustimmung-knoepfe .knopf{flex:1 1 40%;min-height:44px;font-size:15px;padding:10px 6px;white-space:normal}
  .zustimmung-knoepfe .zustimmung-auswahl{flex:1 1 100%}
  .zustimmung-fuss{margin-top:8px;font-size:12.5px}
}

/* ---------- Danke- und Fehlerseite ---------- */
.schluss-seite{min-height:68vh;display:flex;align-items:center}
.schluss-seite .kopf-abschnitt{margin-bottom:28px}
.eingangsnummer{display:inline-flex;flex-direction:column;gap:2px;max-width:100%;
  padding:18px 26px;border-radius:var(--rund);background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.35);font-size:16px;color:rgba(255,255,255,.86)}
.eingangsnummer b{font-size:clamp(24px,6vw,32px);line-height:1.2;letter-spacing:.02em;color:var(--weiss);
  font-variant-numeric:tabular-nums;word-break:break-word}
.eingangsnummer span{font-size:15px;color:rgba(255,255,255,.72)}
.eingangsnummer-leer{display:block;font-size:17px;text-wrap:balance}
.schluss-knoepfe{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.schluss-direkt{margin-top:22px;font-size:16px;color:rgba(255,255,255,.8)}
.schluss-direkt a{color:var(--weiss)}
.fehlerliste{margin:0;padding-left:22px;display:grid;gap:8px;font-size:17px;max-width:640px}
@media (max-width:520px){
  .schluss-seite{min-height:0;display:block}
  .schluss-knoepfe .knopf{width:100%}
}

/* ---------- Hinweis unter dem Absendeknopf ---------- */
.formular .schutz{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.formular .rechtshinweis{grid-column:1/-1;margin-top:-4px;font-size:15px;line-height:1.5;color:var(--grau)}
.formular .rechtshinweis a{color:var(--blau)}

/* ---------- Rechtstexte (Impressum, Datenschutz) ---------- */
.rechtstext{max-width:780px;font-size:17px;line-height:1.65;color:var(--tinte);overflow-wrap:break-word}
.rechtstext h2{font-size:clamp(23px,4.5vw,30px);margin:44px 0 12px;line-height:1.2}
.rechtstext h3{font-size:clamp(19px,3.4vw,23px);margin:32px 0 10px;line-height:1.25}
.rechtstext h4{font-size:17px;font-weight:700;margin:22px 0 6px;line-height:1.3;letter-spacing:0}
.rechtstext > :first-child{margin-top:0}
.rechtstext p{margin:0 0 14px}
.rechtstext ul{margin:0 0 16px;padding-left:22px}
.rechtstext li{margin-bottom:6px}
.rechtstext a{color:var(--blau);overflow-wrap:anywhere}
@media (max-width:520px){.rechtstext{font-size:16px}}

/* Kein einzelnes Zeichen allein in der letzten Zeile (Regel der Landingpage) */
.zusammen{white-space:nowrap}

/* Die Nummernschilder der Abschnitte („01 · Einstieg") waren nur fuer die Abstimmung
   im Grundgeruest gedacht. Ausgeblendet statt geloescht: so bleiben alle data-e-
   Kennungen erhalten und Max' Editor findet die Seite unveraendert vor. */
.gg-marke{display:none}