/* Zustimmungsbalken - Hausbaustein, Stand 12.10.2026

   DIE FARBEN KOMMEN AUS DER SEITE, nicht von hier. Jede Farbe steht als
   var(--haus-...) mit einem neutralen Ersatzwert. Wer den Baustein
   einsetzt, setzt in seiner EIGENEN CSS-Datei diese fuenf Variablen und
   baut NICHT diese Datei um:

       --haus-grund     Hintergrund des Balkens
       --haus-flaeche   Kaestchen je Schieber
       --haus-schrift   Text
       --haus-leise     Nebentext
       --haus-ton       Linie, Rand, Schieber an

   Warum geteilt: Am 12.10.2026 gab es drei Fassungen desselben Balkens
   im Haus. Mechanik teilen, Aussehen nicht.

   ACHTUNG an alle, die hier etwas ergaenzen: CSS-Kommentare lassen sich
   NICHT verschachteln. Ein Sternchen-Schraegstrich innerhalb eines
   Kommentars beendet ihn, und alles danach wird als Regel gelesen. Genau
   daran ist diese Datei am 12.10. beim ersten Lauf gescheitert - der
   Balken erschien ohne jede Gestaltung.                                 */

.zust{position:fixed;left:0;right:0;bottom:0;z-index:9999;
  background:var(--haus-grund,#fdfbf6);color:var(--haus-schrift,#23281a);
  border-top:3px solid var(--haus-ton,#a8410a);
  box-shadow:0 -10px 30px rgba(0,0,0,.18);
  max-height:88vh;overflow:auto;font-family:inherit}
.zust[hidden]{display:none}
.zust__innen{max-width:1080px;margin:0 auto;
  padding:18px 20px calc(18px + env(safe-area-inset-bottom,0px))}
.zust__titel{font-size:1.3rem;line-height:1.2;margin:0 0 6px}
.zust__titel:focus{outline:none}
.zust__text{font-size:.95rem;line-height:1.5;margin:0 0 12px;color:var(--haus-leise,#5c6650)}
.zust__text a{color:var(--haus-ton,#a8410a);text-decoration:underline}

.zust__liste{display:grid;gap:6px;margin:0 0 14px}
@media (min-width:860px){.zust__liste{grid-template-columns:repeat(3,1fr);gap:14px}}
.zust__reihe{background:var(--haus-flaeche,#faf6ec);border:1px solid rgba(0,0,0,.08);
  border-radius:10px;padding:8px 12px}

/* 44 px ist die kleinste Fläche, die ein Daumen sicher trifft. Nicht kürzen. */
.zust__schalter{display:flex;align-items:center;justify-content:space-between;
  gap:12px;min-height:44px;cursor:pointer}
.zust__name{font-weight:600}
.zust__name small{font-weight:400;color:var(--haus-leise,#5c6650)}
.zust__schalter input{position:absolute;opacity:0;width:1px;height:1px}
.zust__bahn{position:relative;flex:none;width:52px;height:30px;border-radius:999px;
  background:rgba(0,0,0,.18);transition:background .15s}
.zust__bahn::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;
  border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);
  transition:transform .15s}
.zust__schalter input:checked + .zust__bahn{background:var(--haus-ton,#a8410a)}
.zust__schalter input:checked + .zust__bahn::after{transform:translateX(22px)}
.zust__schalter input:disabled + .zust__bahn{opacity:.55}
.zust__schalter input:disabled ~ *{cursor:not-allowed}
.zust__schalter input:focus-visible + .zust__bahn{
  outline:3px solid var(--haus-ton,#a8410a);outline-offset:2px}
.zust__info{font-size:.85rem;line-height:1.45;margin:2px 0 4px;color:var(--haus-leise,#5c6650)}

.zust__knoepfe{display:grid;gap:10px;position:sticky;bottom:0;
  background:var(--haus-grund,#fdfbf6);padding:10px 0 2px;margin-bottom:-2px}
@media (min-width:600px){.zust__knoepfe{grid-template-columns:repeat(3,1fr)}}
.zust__knopf{min-height:48px;padding:0 16px;border-radius:999px;
  border:2px solid var(--haus-ton,#a8410a);background:var(--haus-grund,#fdfbf6);
  color:var(--haus-ton,#a8410a);font:600 1rem/1.2 inherit;cursor:pointer}
.zust__knopf:hover{filter:brightness(.97)}
.zust__knopf:focus-visible{outline:3px solid var(--haus-ton,#a8410a);outline-offset:2px}

/* ── Stufe 1: ein schmaler Streifen ───────────────────────────────────
   Der Balken stand sonst über der halben Startseite. Die Schieber kommen
   erst, wenn jemand sie sehen will.                                     */
.zust--kurz .zust__liste{display:none}
.zust--kurz .zust__lang{display:none}
.zust:not(.zust--kurz) .zust__kurz{display:none}
.zust--kurz .zust__titel{font-size:1.15rem;margin-bottom:4px}
.zust--kurz .zust__innen{padding-top:14px}
.zust--kurz .zust__text{margin-bottom:10px}
@media (min-width:860px){
  .zust--kurz .zust__innen{display:flex;align-items:center;gap:24px}
  .zust--kurz .zust__kopf{flex:1 1 auto;min-width:0}
  .zust--kurz .zust__knoepfe{flex:none;grid-template-columns:repeat(3,auto);
    position:static;padding:0;margin:0}
  .zust--kurz .zust__text{margin-bottom:0}
}

/* ── Stufe 2: kleiner gesetzt ─────────────────────────────────────────
   Die Schieber bleiben bei 30 px — nur die Schrift wird kleiner.        */
.zust:not(.zust--kurz) .zust__titel{font-size:1.1rem;margin-bottom:4px}
.zust:not(.zust--kurz) .zust__text{font-size:.8rem;line-height:1.45;margin-bottom:9px}
.zust:not(.zust--kurz) .zust__name{font-size:.85rem}
.zust:not(.zust--kurz) .zust__name small{font-size:.75rem}
.zust:not(.zust--kurz) .zust__info{font-size:.72rem;line-height:1.4}
.zust:not(.zust--kurz) .zust__reihe{padding:6px 10px}
.zust:not(.zust--kurz) .zust__knopf{min-height:44px;font-size:.9rem}

/* Widerruf im Fuß — Pflicht, siehe LIESMICH. */
.zust-fuss{background:none;border:0;padding:0;font:inherit;color:inherit;
  cursor:pointer;text-align:left;text-decoration:underline;min-height:24px}

@media (prefers-reduced-motion:reduce){
  .zust__bahn,.zust__bahn::after{transition:none}
}