/* Parteitag live · Gestaltung
   Grammatik: Karte = Beschluss (verbindlich, Himmelblau, gefüllt).
              Umriss = Meinungsbild (unverbindlich, Violett, gestrichelt).
   Schrift: Ubuntu, selbst gehostet (Ubuntu Font Licence 1.0). */

@font-face{font-family:Ubuntu;src:url(schrift/Ubuntu-regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Ubuntu;src:url(schrift/Ubuntu-medium.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:Ubuntu;src:url(schrift/Ubuntu-bold.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Ubuntu Mono";src:url(schrift/UbuntuMono-regular.woff2) format("woff2");font-weight:400;font-display:swap}

:root{
  --grund:#f4f1f7;--flaeche:#fff;--flaeche-2:#efe8f5;--flaeche-3:#e6dcef;
  --linie:#e0d6ea;--linie-stark:#bfaed3;
  --text:#251238;--leise:#5b4d69;--sehr-leise:#6b6275;
  --volt:var(--volt-lila);--auf-volt:var(--volt-auf-lila);--akzent:var(--volt-lila);
  --beschluss:var(--volt-himmel);--auf-beschluss:var(--volt-auf-himmel);--beschluss-tief:var(--volt-himmel-tief);
  --daten:var(--volt-lila);--meinung:var(--volt-vorschlag);--meinung-text:var(--volt-vorschlag-text);--meinung-flaeche:#f3ecfa;--meinung-streifen:#b99ad9;
  --live:#c8232c;--warn:#8f4a00;--warn-flaeche:#fff0d9;--gut:#0d5a32;
  --weg-flaeche:#fde2e2;--weg-text:#8a1c1c;--neu-flaeche:#d7f3e3;--neu-text:#0d5a32;
  --band:#fff0d9;--auf-band:#6b3d00;
  --schatten:0 1px 2px rgba(28,13,44,.06),0 8px 24px rgba(28,13,44,.06);
  --t-xs:13px;--t-s:15px;--t-m:17px;--t-l:21px;--t-xl:28px;--t-2xl:36px;--t-3xl:52px;
  --r-karte:var(--volt-r-gross);--r-panel:var(--volt-r);--r-knopf:var(--volt-r-klein);
  --kurve:cubic-bezier(.2,.7,.2,1);--dauer:.32s;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="hell"]){
    --grund:#140a1d;--flaeche:#1d1029;--flaeche-2:#261634;--flaeche-3:#302041;
    --linie:#33244a;--linie-stark:#4d3a6b;
    --text:#f6f2fa;--leise:#bcadca;--sehr-leise:#a799b5;
    --volt:#5c2a8c;--akzent:#dcbdf5;
    --daten:#dcbdf5;--meinung-flaeche:#21152f;--meinung-streifen:#7d5ca6;
    --live:#ff6b6b;--warn:#ffb35c;--warn-flaeche:#2e2010;--gut:#8fe6b8;
    --weg-flaeche:#3a1b24;--weg-text:#ffb7b7;--neu-flaeche:#14301f;--neu-text:#9ff0c4;
    --band:#2e2010;--auf-band:#f5c886;
    --schatten:0 1px 2px rgba(0,0,0,.3),0 12px 32px rgba(0,0,0,.25);
    color-scheme:dark;
  }
}
:root[data-theme="dunkel"]{
  --grund:#140a1d;--flaeche:#1d1029;--flaeche-2:#261634;--flaeche-3:#302041;
  --linie:#33244a;--linie-stark:#4d3a6b;
  --text:#f6f2fa;--leise:#bcadca;--sehr-leise:#a799b5;
  --volt:#5c2a8c;--akzent:#dcbdf5;
  --daten:#dcbdf5;--meinung-flaeche:#21152f;--meinung-streifen:#7d5ca6;
  --live:#ff6b6b;--warn:#ffb35c;--warn-flaeche:#2e2010;--gut:#8fe6b8;
  --weg-flaeche:#3a1b24;--weg-text:#ffb7b7;--neu-flaeche:#14301f;--neu-text:#9ff0c4;
  --band:#2e2010;--auf-band:#f5c886;
  --schatten:0 1px 2px rgba(0,0,0,.3),0 12px 32px rgba(0,0,0,.25);
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--grund)}
body{margin:0;background:var(--grund);color:var(--text);font:400 var(--t-m)/1.5 Ubuntu,"Segoe UI",system-ui,sans-serif;font-feature-settings:"kern";-webkit-font-smoothing:antialiased}
h1,h2,h3,p{margin:0}
h1,h2,h3{font-weight:500;line-height:1.12;letter-spacing:-.012em;text-wrap:balance}
p{text-wrap:pretty}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--akzent);text-underline-offset:3px}
:focus-visible{outline:3px solid var(--volt-fokus);outline-offset:3px;border-radius:6px}
.nur-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.zahl{font-variant-numeric:tabular-nums}
.leise{color:var(--leise)}
.klein{font-size:var(--t-s)}
.sehr-klein{font-size:var(--t-xs)}
.stapel{display:flex;flex-direction:column;gap:var(--luecke,16px)}
.reihe{display:flex;align-items:center;gap:var(--luecke,12px);flex-wrap:wrap}
.reihe.zwischen{justify-content:space-between}
.reihe.fest{flex-wrap:nowrap}

/* Beispiel-Band: überall sichtbar, nie ausblendbar */
.band{display:flex;align-items:center;justify-content:center;gap:8px;padding:6px 16px;background:var(--band);color:var(--auf-band);font-size:var(--t-xs);font-weight:500;text-align:center}
.band::before{content:"";width:8px;height:8px;border-radius:2px;background:currentColor;flex:none}

/* Kopfzeile der Geräteansichten */
.kopf{display:flex;align-items:center;gap:12px;padding:10px 16px;border-bottom:1px solid var(--linie);background:var(--flaeche);position:relative;z-index:5}
.marke{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text);font-weight:500;font-size:var(--t-m);letter-spacing:-.01em;min-height:44px}
.marke svg{height:18px;width:auto;fill:currentColor}
.marke .strich{width:1px;height:18px;background:var(--linie-stark)}
.marke .rolle{font-weight:400;color:var(--leise);font-size:var(--t-s)}
.kopf .werkzeuge{margin-left:auto;display:flex;gap:4px}
.werkzeug{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:44px;padding:0 10px;border-radius:10px;border:0;background:transparent;color:var(--leise);font-size:var(--t-xs);font-weight:500}
.werkzeug:hover{background:var(--flaeche-2);color:var(--text)}
.werkzeug svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8}
.werkzeug[aria-pressed="true"]{color:var(--text);background:var(--flaeche-2)}

/* Knöpfe */
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 20px;border-radius:var(--r-knopf);border:0;font-size:var(--t-m);font-weight:500;text-decoration:none;transition:transform .12s var(--kurve),background var(--dauer)}
.knopf:active{transform:scale(.98)}
.knopf.haupt{background:var(--volt);color:var(--auf-volt)}
.knopf.haupt:hover,.knopf.volt:hover{background:color-mix(in srgb,var(--volt) 88%,#000)}
.knopf.volt{background:var(--volt);color:var(--auf-volt)}
.knopf.rand{background:transparent;color:var(--text);box-shadow:inset 0 0 0 1.5px var(--linie-stark)}
.knopf.rand:hover{background:var(--flaeche-2)}
.knopf.klein{min-height:40px;padding:0 14px;font-size:var(--t-s)}
.knopf.breit{width:100%}
.knopf[disabled],.knopf[aria-disabled="true"]{opacity:.45;cursor:not-allowed;transform:none}
.knopf svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;flex:none}

/* Kennzeichen */
.marker{display:inline-flex;align-items:center;gap:8px;font-size:var(--t-xs);font-weight:500;line-height:1;padding:6px 10px;border-radius:999px;white-space:nowrap}
.marker.bind{background:var(--beschluss);color:var(--auf-beschluss)}
.marker.meinung{box-shadow:inset 0 0 0 1.5px var(--meinung);color:var(--meinung-text);background:transparent;border:0;outline:1.5px dashed var(--meinung);outline-offset:-1.5px;box-shadow:none}
.marker.neutral{background:var(--flaeche-2);color:var(--leise)}
.marker.live{color:var(--live);padding-left:0}
.marker.live::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--live);animation:puls 2s infinite}
.marker.warn{background:var(--warn-flaeche);color:var(--warn)}
@keyframes puls{0%,100%{opacity:1}50%{opacity:.35}}

/* Flächen */
.panel{background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--r-panel);padding:20px}
.panel.flach{background:var(--flaeche-2);border-color:transparent}
.panel-titel{font-size:var(--t-s);font-weight:500;color:var(--leise);margin:0 0 12px}
.leer{padding:16px;border-radius:var(--r-panel);background:var(--flaeche-2);color:var(--leise);font-size:var(--t-s)}

/* Karte: Beschluss */
.karte-beschluss{position:relative;background:var(--beschluss);color:var(--auf-beschluss);border-radius:var(--r-karte);padding:20px 22px 22px;display:flex;flex-direction:column;gap:6px;overflow:hidden}
.karte-beschluss .was{font-size:var(--t-s);font-weight:500;opacity:.8}
.karte-beschluss .ergebnis{font-size:var(--t-2xl);font-weight:500;line-height:1;letter-spacing:-.03em}
.karte-beschluss .zahlen{font-size:var(--t-s)}
.karte-beschluss.abgelehnt{background:var(--flaeche);color:var(--text);box-shadow:inset 0 0 0 3px var(--beschluss)}
.karte-beschluss .stimmleiste{display:flex;height:8px;border-radius:4px;overflow:hidden;gap:2px;margin-top:8px;background:transparent}
.stimmleiste i{display:block;height:100%;background:currentColor}
.stimmleiste i.n{opacity:.35}
.stimmleiste i.e{opacity:.15}

/* Umriss: Meinungsbild */
.umriss{border-radius:var(--r-karte);outline:2px dashed var(--meinung);outline-offset:-2px;padding:18px 20px;display:flex;flex-direction:column;gap:12px;background:var(--meinung-flaeche)}
.umriss .kopfzeile{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.umriss .fuss{font-size:var(--t-xs);color:var(--leise)}
.balken-zeile{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;font-size:var(--t-s)}
.balken{grid-column:1/-1;height:10px;border-radius:5px;background:var(--flaeche-3);overflow:hidden}
.balken i{display:block;height:100%;border-radius:5px;background:repeating-linear-gradient(135deg,var(--meinung) 0 5px,var(--meinung-streifen) 5px 9px);transform-origin:left;animation:wachsen .7s var(--kurve) both}
.balken.bind i{background:var(--beschluss)}
@keyframes wachsen{from{transform:scaleX(0)}}
.mb-zeile{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 16px;border-radius:var(--r-panel);outline:2px dashed var(--meinung);outline-offset:-2px;color:var(--meinung-text);font-size:var(--t-s)}

/* Optionen im Meinungsbild */
.optionen{display:flex;flex-direction:column;gap:10px}
.option{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:60px;padding:0 20px;border-radius:var(--r-panel);border:0;box-shadow:inset 0 0 0 1.5px var(--linie-stark);background:var(--flaeche);font-size:var(--t-l);font-weight:500;text-align:left;transition:background var(--dauer),box-shadow var(--dauer)}
.option:hover:not([disabled]){box-shadow:inset 0 0 0 2px var(--meinung)}
.option[aria-pressed="true"]{background:var(--volt);color:var(--auf-volt);box-shadow:none}
.option[disabled]:not([aria-pressed="true"]){opacity:.55;cursor:default}
.option .haken{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2.4}

/* Begleiter (Handy, auf breiten Schirmen zweispaltig) */
.begleiter{min-height:100dvh;display:flex;flex-direction:column}
.begleiter-raster{flex:1;display:flex;flex-direction:column}
.buehne{position:relative;aspect-ratio:16/9;background:#1a0f26;color:#f6f2fa;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;padding:14px 16px}
.buehne .licht{position:absolute;inset:0;background:linear-gradient(transparent 50%,rgba(10,5,16,.88))}
.buehne .saal{position:absolute;inset:0;width:100%;height:100%}
.saal .s-leinwand{fill:#2a1a3d;stroke:#4a3468;stroke-width:1}
.saal .s-text{fill:#82d0f4;font:500 11px Ubuntu,sans-serif}
.saal .s-zeile{fill:#4a3468}
.saal .s-person{fill:#3a2654}
.saal .s-pult{fill:#502379}
.saal .s-marke{fill:#f6f2fa;opacity:.85}
.saal .s-boden{fill:#140b1f}
.buehne .unten{position:relative;display:flex;flex-direction:column;gap:2px}
.buehne .unten strong{font-size:var(--t-m);font-weight:500}
.buehne .unten span{font-size:var(--t-xs);color:#cdbfe0}
.buehne .oben{position:absolute;left:16px;right:16px;top:12px;display:flex;justify-content:space-between;align-items:center;font-size:var(--t-xs);color:#e7dcf4}
.buehne .oben .marker.live{color:#ffb4b4}
.buehne .oben .marker.live::before{background:#ff6b6b}
.inhalt{flex:1;padding:20px 16px 28px;display:flex;flex-direction:column;gap:18px;width:100%;max-width:560px;margin:0 auto}
.reiter{position:sticky;bottom:0;display:flex;background:var(--flaeche);border-top:1px solid var(--linie);padding:4px 4px calc(6px + env(safe-area-inset-bottom,0px));z-index:4}
.reiter button{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;min-height:52px;padding:6px 2px;border:0;background:none;color:var(--leise);font-size:12px;font-weight:500;border-radius:10px;position:relative}
.reiter svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8}
.reiter button[aria-current="page"]{color:var(--text)}
.reiter button[aria-current="page"]::after{content:"";position:absolute;top:0;left:30%;right:30%;height:3px;border-radius:0 0 3px 3px;background:var(--akzent)}
.reiter .punkt{position:absolute;top:8px;left:calc(50% + 8px);width:8px;height:8px;border-radius:50%;background:var(--live)}
.oben-reiter{display:none}

.top-kopf{display:flex;flex-direction:column;gap:8px}
.top-kopf .zeile{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:var(--t-s);color:var(--leise)}
.top-kopf .nr{font-weight:500;color:var(--text)}
.top-kopf h1{font-size:var(--t-xl)}
.top-kopf p{color:var(--leise)}
.aufgabe{display:flex;flex-direction:column;gap:14px}
.aufgabe .frage-gross{font-size:var(--t-l);font-weight:500;line-height:1.25}
.hinweis{font-size:var(--t-xs);color:var(--leise);line-height:1.5}

.redner-karte{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;padding:16px;border-radius:var(--r-panel);background:var(--flaeche-2)}
.redner-karte .zeichen{width:44px;height:44px;border-radius:50%;background:var(--volt);display:grid;place-items:center;color:#fff}
.redner-karte .zeichen svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8}
.redner-karte .uhr{font-size:var(--t-xl);font-weight:500}

/* Ablauf über drei Tage */
.tage{display:flex;gap:6px;padding:4px;background:var(--flaeche-2);border-radius:var(--r-panel)}
.tage button{flex:1;min-height:44px;border:0;border-radius:10px;background:transparent;font-size:var(--t-s);font-weight:500;color:var(--leise);display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.2}
.tage button small{font-weight:400;font-size:12px}
.tage button[aria-pressed="true"]{background:var(--flaeche);color:var(--text);box-shadow:var(--schatten)}
.ablauf{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.ablauf li{display:grid;grid-template-columns:52px 20px minmax(0,1fr);gap:10px;align-items:start;padding:10px 4px;position:relative}
.ablauf .zeit{font-size:var(--t-s);color:var(--leise);padding-top:2px}
.ablauf .spur{position:relative;height:100%;display:flex;justify-content:center}
.ablauf .spur::before{content:"";position:absolute;top:0;bottom:-20px;width:2px;background:var(--linie)}
.ablauf li:last-child .spur::before{display:none}
.ablauf .knoten{position:relative;width:14px;height:14px;margin-top:5px;border-radius:50%;background:var(--flaeche);box-shadow:inset 0 0 0 2px var(--linie-stark)}
.ablauf li.fertig .knoten{background:var(--linie-stark);box-shadow:none}
.ablauf li.beschluss .knoten{background:var(--beschluss);box-shadow:none}
.ablauf li.jetzt .knoten{background:var(--volt);box-shadow:0 0 0 4px color-mix(in srgb,var(--volt) 30%,transparent)}
.ablauf li.nicht .knoten{background:transparent;box-shadow:inset 0 0 0 2px var(--warn)}
.ablauf .titel{font-weight:500}
.ablauf .status{font-size:var(--t-xs);color:var(--leise)}
.ablauf li.jetzt .titel{color:var(--text)}
.ablauf li.jetzt .status{color:var(--akzent);font-weight:500}
.ablauf li.nicht .status{color:var(--warn);font-weight:500}

/* Recaps */
.recap{display:flex;flex-direction:column;gap:12px;padding:18px;border-radius:var(--r-panel);background:var(--flaeche);border:1px solid var(--linie)}
.recap h3{font-size:var(--t-m)}
.recap .text{font-size:var(--t-s);line-height:1.55}
.recap.nicht{border-style:dashed;border-color:var(--warn)}
.recap .ergebniszeile{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:var(--t-s)}

/* Fragen */
.frage{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:start;padding:14px;border-radius:var(--r-panel);background:var(--flaeche-2)}
.frage .text{padding-top:4px}
.unterstuetzen{min-width:56px;min-height:56px;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:12px;border:0;box-shadow:inset 0 0 0 1.5px var(--linie-stark);background:var(--flaeche);font-weight:500;font-size:var(--t-s);gap:0}
.unterstuetzen svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2}
.unterstuetzen[aria-pressed="true"]{background:var(--volt);color:var(--auf-volt);box-shadow:none}
.unterstuetzen[disabled]{cursor:default}
textarea,input[type=text],input[type=email]{width:100%;background:var(--flaeche);border:0;box-shadow:inset 0 0 0 1.5px var(--linie-stark);border-radius:12px;padding:12px 14px;font-size:var(--t-m);color:var(--text)}
textarea{resize:vertical;min-height:88px;line-height:1.45}
textarea:focus,input:focus{outline:none;box-shadow:inset 0 0 0 2px var(--akzent)}
label.feld{font-size:var(--t-s);font-weight:500}

/* Textvergleich */
.vergleich{display:grid;grid-template-columns:1fr;gap:12px}
.fassung{padding:16px 18px;border-radius:var(--r-panel);background:var(--flaeche);border:1px solid var(--linie);font-size:var(--t-m);line-height:1.65}
.fassung .kennung{font-size:var(--t-xs);font-weight:500;color:var(--leise);display:block;margin-bottom:6px}
.fassung del{background:var(--weg-flaeche);color:var(--weg-text);text-decoration:line-through;text-decoration-thickness:1.5px;border-radius:4px;padding:1px 2px}
.fassung ins{background:var(--neu-flaeche);color:var(--neu-text);text-decoration:none;border-radius:4px;padding:1px 2px;box-shadow:inset 0 -2px 0 currentColor}
.zeilennr{font-family:"Ubuntu Mono",ui-monospace,monospace;font-size:var(--t-xs);color:var(--leise)}
.antrag-liste{display:flex;flex-direction:column;gap:6px;list-style:none;margin:0;padding:0}
.antrag-liste button{width:100%;display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:10px;align-items:center;text-align:left;padding:12px 14px;border-radius:12px;border:0;background:transparent;min-height:52px}
.antrag-liste button[aria-current="true"]{background:var(--flaeche-2)}
.antrag-liste .id{font-weight:500}

/* Stimmkarte der Delegierten */
.stimmkarte{position:relative;border-radius:var(--r-karte);padding:22px;display:flex;flex-direction:column;gap:14px;background:var(--flaeche-2);border:1px solid var(--linie)}
.stimmkarte.aktiv{background:var(--beschluss);color:var(--auf-beschluss);border-color:transparent}
.stimmkarte.aktiv .hinweis{color:inherit;opacity:.8}
.stimmkarte .gross{font-size:var(--t-xl);font-weight:500;line-height:1.1}
.stimmkarte .knopf.dunkel{background:var(--auf-beschluss);color:var(--beschluss)}

/* Blatt (Dialog) */
dialog.blatt{border:0;padding:0;background:var(--flaeche);color:var(--text);border-radius:var(--r-karte);max-width:min(520px,calc(100vw - 32px));width:100%;box-shadow:var(--schatten)}
dialog.blatt::backdrop{background:rgba(10,5,16,.55)}
dialog.blatt .koerper{padding:24px;display:flex;flex-direction:column;gap:14px}
dialog.blatt[open]{animation:hoch .35s var(--kurve)}
@keyframes hoch{from{transform:translateY(24px);opacity:0}}

/* Einstieg und Anmeldung */
.einstieg{max-width:520px;margin:0 auto;padding:28px 20px 40px;display:flex;flex-direction:column;gap:22px;flex:1;justify-content:center}
.einstieg h1{font-size:var(--t-2xl)}
.einstieg .schritte{display:flex;gap:6px}
.einstieg .schritte i{flex:1;height:4px;border-radius:2px;background:var(--linie)}
.einstieg .schritte i.an{background:var(--akzent)}
.qr{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:center;padding:16px;border-radius:var(--r-panel);background:var(--flaeche);border:1px solid var(--linie)}
.qr svg{width:96px;height:96px;display:block;border-radius:8px;background:#fff;padding:6px}
.anmelden{padding:22px;border-radius:var(--r-karte);background:var(--flaeche);border:1px solid var(--linie);display:flex;flex-direction:column;gap:14px}
.legende{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.legende>div{display:flex;flex-direction:column;gap:8px;padding:14px;border-radius:16px;font-size:var(--t-s)}
.legende .l-karte{background:var(--beschluss);color:var(--auf-beschluss)}
.legende .l-umriss{outline:2px dashed var(--meinung);outline-offset:-2px;color:var(--meinung-text);background:var(--meinung-flaeche)}
.legende strong{font-size:var(--t-m)}
.regeln{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.regeln li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px;font-size:var(--t-s)}
.regeln svg{width:24px;height:24px;stroke:var(--akzent);fill:none;stroke-width:1.8}

/* Hammer: der Beschluss-Moment, als <dialog> für Fokusfang, Escape und Fokus-Rückgabe */
dialog.hammer{margin:0;border:0;width:100%;height:100%;max-width:none;max-height:none}
dialog.hammer::backdrop{background:transparent}
.hammer{position:fixed;inset:0;z-index:50;display:grid;place-items:center;background:var(--beschluss);color:var(--auf-beschluss);animation:hammer-rein .55s var(--kurve) both;cursor:pointer;padding:24px;text-align:center}
.hammer.raus{animation:hammer-raus .6s var(--kurve) both}
.hammer .stack{display:flex;flex-direction:column;gap:14px;align-items:center}
.hammer .was{font-size:clamp(16px,2.2vw,40px);font-weight:500;opacity:.8}
.hammer .wort{font-size:clamp(56px,11vw,220px);font-weight:500;letter-spacing:-.04em;line-height:.9;animation:setzen .5s .25s cubic-bezier(.3,1.4,.5,1) both}
.hammer .quote{font-size:clamp(20px,3.2vw,64px);font-weight:500}
.hammer .linie{width:min(60vw,900px);height:6px;border-radius:3px;background:currentColor;transform-origin:left;animation:strich .9s .35s var(--kurve) both}
.hammer.abgelehnt{background:var(--grund);color:var(--text)}
.hammer.abgelehnt .linie{background:var(--beschluss)}
@keyframes hammer-rein{from{transform:translateY(100%)}}
@keyframes hammer-raus{to{opacity:0;transform:scale(1.04)}}
@keyframes setzen{from{transform:translateY(12%) scale(1.08);opacity:0}}
@keyframes strich{from{transform:scaleX(0)}}

/* Leinwand im Saal: 16:9, skaliert über Containerbreite */
.leinwand-rahmen{min-height:100dvh;display:grid;place-items:center;background:#000}
:root[data-theme="hell"] .leinwand-rahmen{background:#d9d0e3}
.leinwand{container-type:size;width:min(100vw,177.78dvh);aspect-ratio:16/9;background:var(--pr-grund);color:var(--text);position:relative;overflow:hidden}
.eingebettet .leinwand-rahmen{min-height:100vh}
.eingebettet .leinwand{width:min(100vw,177.78vh)}
.lw{position:absolute;inset:0;padding:3.4cqw 5.83cqw 2.9cqw;display:flex;flex-direction:column;gap:2.4cqw}
.lw .oben{display:flex;justify-content:space-between;align-items:baseline;font-size:1.7cqw;color:var(--leise);gap:3cqw}
.lw .oben strong{color:var(--text);font-weight:500}
.lw-kopf{display:flex;align-items:center;gap:1.6cqw}
.lw-marke svg{display:block;height:1.5cqw;width:auto;fill:var(--text)}
.lw .mitte{flex:1;display:flex;flex-direction:column;justify-content:center;gap:2.4cqw;min-height:0}
.lw h1{font-size:6.4cqw;line-height:1.02;letter-spacing:-.035em;max-width:88%}
.lw h1.mittel{font-size:4.8cqw}
.lw .unterzeile{font-size:2.3cqw;color:var(--leise);max-width:70%}
.lw .fuss{display:flex;justify-content:space-between;align-items:center;gap:3cqw;font-size:1.5cqw;color:var(--leise);border-top:.12cqw solid var(--linie);padding-top:1.4cqw}
.lw .fuss .legende-mini{display:flex;gap:2cqw;align-items:center}
.lw .fuss .legende-mini span{display:inline-flex;gap:.8cqw;align-items:center}
.lw .fuss .legende-mini i{width:2.2cqw;height:1.3cqw;border-radius:.4cqw;display:inline-block}
.lw .fuss .legende-mini i.k{background:var(--beschluss)}
.lw .fuss .legende-mini i.u{outline:.18cqw dashed var(--meinung);outline-offset:-.18cqw}
.lw .karte{align-self:flex-start;background:var(--beschluss);color:var(--auf-beschluss);border-radius:2cqw;padding:2.4cqw 3cqw;display:flex;flex-direction:column;gap:.6cqw;min-width:46cqw}
.lw .karte .was{font-size:1.8cqw;font-weight:500;opacity:.85}
.lw .karte .gross{font-size:11cqw;font-weight:500;letter-spacing:-.05em;line-height:.9}
.lw .karte .zahlen{font-size:2cqw}
.lw .karte.abgelehnt{background:transparent;color:var(--text);box-shadow:inset 0 0 0 .4cqw var(--beschluss)}
.lw .mb{align-self:flex-start;display:flex;align-items:center;gap:1.6cqw;padding:1.2cqw 2cqw;border-radius:1.2cqw;outline:.22cqw dashed var(--meinung);outline-offset:-.22cqw;font-size:2cqw;color:var(--meinung-text)}
.lw .mb b{font-weight:500}
.lw .gross-frage{font-size:4.4cqw;font-weight:500;line-height:1.14;letter-spacing:-.02em;max-width:85%}
.lw .zitat-kopf{font-size:2cqw;color:var(--meinung-text);display:flex;gap:1.4cqw;align-items:center}
.lw .redner{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4cqw;align-items:end}
.lw .redner .name{font-size:5.2cqw;font-weight:500;letter-spacing:-.03em;line-height:1.05}
.lw .redner .uhr{font-size:9cqw;font-weight:500;letter-spacing:-.04em;line-height:.9;color:var(--beschluss-tief)}
.lw .redner .uhr.knapp{color:var(--warn)}
.lw .zeitleiste{height:.8cqw;border-radius:.4cqw;background:var(--flaeche-3);overflow:hidden}
.lw .zeitleiste i{display:block;height:100%;background:var(--beschluss);transition:width 1s linear}
.lw .danach{font-size:1.9cqw;color:var(--leise)}
.lw .zaehler{font-size:12cqw;font-weight:500;letter-spacing:-.05em;line-height:.9;color:var(--meinung-text)}
.lw .ecke-qr{position:absolute;right:5cqw;top:8.4cqw;display:flex;gap:1.2cqw;align-items:center;font-size:1.4cqw;color:var(--leise)}
.lw .ecke-qr svg{width:6cqw;height:6cqw;background:#fff;border-radius:.6cqw;padding:.4cqw}
.lw .stimmkarte-bild{width:9cqw;height:12cqw;border-radius:1cqw;background:var(--beschluss);position:relative;animation:heben 1.4s var(--kurve) infinite alternate}
.lw .stimmkarte-bild::after{content:"";position:absolute;left:50%;bottom:-4cqw;width:.8cqw;height:4cqw;margin-left:-.4cqw;background:var(--linie-stark);border-radius:.4cqw}
@keyframes heben{from{transform:translateY(1.2cqw)}}
/* Folien des Berichts: Volt-Vorlage aus volt-vorlage.css. Auf der Leinwand füllt die Folie das Bild. */
.lw-folie{position:absolute;inset:0}
.lw-folie .pr-rahmen{height:100%}
/* Handy: dieselbe Folie, eigenes Maß, Spalten gestapelt, Schrift ab 13 px */
.pr-handy{border-radius:var(--r-panel);overflow:hidden;border:1px solid var(--linie)}
.pr-handy .pr-folie{aspect-ratio:auto;font-size:calc(10cqw / 12);padding:4.4em 4.4em 4em;gap:4em}
.pr-handy .pr-kopf{font-size:4.4em;gap:.8em;flex-wrap:wrap}
.pr-handy .pr-kopf>span:nth-child(2){order:5;flex-basis:100%}
.pr-handy .pr-marke{font-size:1.2em}
.pr-handy .pr-demo{font-size:.95em}
.pr-handy .pr-fuss{font-size:4.2em}
.pr-handy .pr-inhalt{gap:5em}
.pr-handy .pr-inhalt>h2{font-size:7.6em}
.pr-handy.pr-rahmen .pr-titelfolie .pr-inhalt>h2{font-size:10em}
.pr-handy .pr-unter{font-size:5.4em}
.pr-handy .pr-drei,.pr-handy .pr-diagramm-zeile{grid-template-columns:minmax(0,1fr);gap:4.4em}
.pr-handy .pr-block{padding-top:2.4em}
.pr-handy .pr-drei .pr-blockzahl,.pr-handy .pr-seitenzahl .pr-blockzahl{font-size:13em}
.pr-handy .pr-blocktext{font-size:5.4em}
.pr-handy .pr-blockvergleich{font-size:4.6em}
.pr-handy .pr-vergleich>div,.pr-handy .pr-vergleich.pr-anteile>div{grid-template-columns:minmax(0,1fr) auto;gap:.4em 1em;font-size:5.2em}
.pr-handy .pr-vergleich .pr-spur{grid-column:1/-1;grid-row:2}
.pr-handy .pr-diagramm svg text{font-size:52px}

/* Pult der Tagungsleitung und Regie */
.arbeitsplatz{min-height:100dvh;display:flex;flex-direction:column}
.raster{display:grid;gap:16px;padding:16px;align-items:start;grid-template-columns:minmax(0,1fr)}
.uhr-gross{font-size:clamp(72px,9vw,140px);font-weight:500;letter-spacing:-.05em;line-height:.9;color:var(--beschluss-tief)}
.uhr-gross.knapp{color:var(--warn)}
.zeitbalken{height:8px;border-radius:4px;background:var(--flaeche-3);overflow:hidden}
.zeitbalken i{display:block;height:100%;background:var(--beschluss);transition:width 1s linear}
.rednerliste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.rednerliste li{display:flex;gap:12px;align-items:center;padding:10px 12px;border-radius:10px;font-size:var(--t-s)}
.rednerliste li.jetzt{background:var(--volt);color:var(--auf-volt);font-weight:500}
.rednerliste li.vorbei{color:var(--leise);text-decoration:line-through;text-decoration-color:var(--linie-stark)}
.rednerliste li>span{min-width:0;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
.rednerliste li>span:last-child{white-space:nowrap}
.rednerliste .nr{width:22px;text-align:right;color:inherit;opacity:.7;font-size:var(--t-xs)}
.phasen{display:flex;gap:4px;flex-wrap:wrap}
.phasen span{font-size:var(--t-xs);padding:6px 10px;border-radius:999px;background:var(--flaeche-2);color:var(--leise)}
.phasen span.vorbei{color:var(--text)}
.phasen span.jetzt{background:var(--volt);color:var(--auf-volt);font-weight:500}
.kennwert{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:8px 0;border-bottom:1px solid var(--linie);font-size:var(--t-s)}
.kennwert:last-child{border-bottom:0}
.kennwert b{font-size:var(--t-l)}
.zustand-liste{display:flex;flex-direction:column}
.zustand-liste>div{display:grid;grid-template-columns:14px minmax(0,1fr) auto;gap:10px;align-items:center;padding:9px 0;border-bottom:1px solid var(--linie);font-size:var(--t-s)}
.zustand-liste>div:last-child{border-bottom:0}
.lampe{width:10px;height:10px;border-radius:50%;background:var(--gut)}
.lampe.aus{background:var(--linie-stark)}
.lampe.gelb{background:var(--warn)}
.vorschau{border-radius:12px;overflow:hidden;border:1px solid var(--linie);aspect-ratio:16/9;background:#000}
.vorschau iframe{width:100%;height:100%;border:0;display:block}
.schalter{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:start;font-size:var(--t-s);cursor:pointer}
.schalter input{appearance:none;width:44px;height:26px;border-radius:13px;background:var(--linie-stark);position:relative;margin:0;cursor:pointer;transition:background var(--dauer)}
.schalter input::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform var(--dauer) var(--kurve)}
.schalter input:checked{background:var(--volt)}
.schalter input:checked::after{transform:translateX(18px)}

/* Demo-Steuerung */
.demo-leiste{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 16px;background:var(--flaeche);border-top:1px solid var(--linie)}
.demo-leiste .was{flex:1;min-width:200px;font-size:var(--t-s)}
.demo-leiste .was b{display:block}
.demo-leiste select{min-height:40px;border-radius:10px;border:0;box-shadow:inset 0 0 0 1.5px var(--linie-stark);background:var(--flaeche);padding:0 10px;font-size:var(--t-s)}

/* Vorführung: Leinwand und zwei Handys nebeneinander */
.vorfuehrung{min-height:100dvh;display:flex;flex-direction:column}
.buehnenbild{flex:1;display:grid;gap:20px;padding:20px;grid-template-columns:minmax(0,1fr);align-items:start}
.geraet-rahmen{display:flex;flex-direction:column;gap:8px;align-items:center}
.geraet-rahmen .bez{font-size:var(--t-xs);color:var(--leise);font-weight:500;align-self:flex-start}
.telefon{width:100%;max-width:360px;aspect-ratio:390/800;border-radius:36px;padding:10px;background:#0c0712;box-shadow:0 0 0 1px #2b1d3c,var(--schatten)}
.telefon{overflow:hidden;position:relative}
.telefon iframe{width:390px;height:780px;border:0;background:var(--grund);display:block;transform-origin:0 0;transform:scale(var(--s,1));position:absolute;left:10px;top:10px;border-radius:calc(27px / var(--s,1))}
.saal-rahmen{width:100%;border-radius:var(--r-panel);overflow:hidden;box-shadow:0 0 0 1px var(--linie),var(--schatten);aspect-ratio:16/9;background:#000}
.saal-rahmen iframe{width:100%;height:100%;border:0;display:block}

/* Startseite */
.start{max-width:1180px;margin:0 auto;padding:48px 20px 72px;display:flex;flex-direction:column;gap:48px}
.start .held{display:grid;gap:32px;align-items:end}
.start h1{font-size:clamp(44px,8vw,112px);letter-spacing:-.05em;line-height:.9}
.start .unter{font-size:var(--t-l);color:var(--leise);max-width:36ch}
.start .aktionen{display:flex;gap:12px;flex-wrap:wrap}
.grammatik{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.grammatik .k,.grammatik .u{border-radius:var(--r-karte);padding:20px;display:flex;flex-direction:column;gap:10px;min-height:170px}
.grammatik .k{background:var(--beschluss);color:var(--auf-beschluss)}
.grammatik .u{outline:2px dashed var(--meinung);outline-offset:-2px;color:var(--meinung-text);background:var(--meinung-flaeche)}
.grammatik .gross{font-size:clamp(36px,5vw,64px);font-weight:500;letter-spacing:-.04em;line-height:.9;margin-top:auto}
.grammatik p{font-size:var(--t-s)}
.rollen-gruppe{display:grid;gap:14px}
.rollen-gruppe h2{font-size:var(--t-l)}
.rollen{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.rolle-karte{display:flex;flex-direction:column;gap:6px;padding:18px;border-radius:var(--r-panel);background:var(--flaeche);border:1px solid var(--linie);text-decoration:none;color:var(--text);transition:border-color var(--dauer)}
.rolle-karte:hover{border-color:var(--volt)}
.rolle-karte strong{font-size:var(--t-m)}
.rolle-karte span{font-size:var(--t-s);color:var(--leise)}
.rolle-karte .geraet{font-size:var(--t-xs);color:var(--sehr-leise);margin-top:auto;padding-top:6px}

/* Interessenten */
.mitmachen{max-width:1100px;margin:0 auto;padding:32px 20px 64px;display:flex;flex-direction:column;gap:40px}
.mitmachen .held{display:grid;gap:24px}
.mitmachen h1{font-size:clamp(36px,4.6vw,64px);letter-spacing:-.04em;line-height:1.02}
.wege{list-style:none;margin:0;padding:0;display:grid;gap:12px;counter-reset:w}
.wege li{counter-increment:w;display:grid;grid-template-columns:48px minmax(0,1fr);gap:14px;padding:20px;border-radius:var(--r-panel);background:var(--flaeche);border:1px solid var(--linie)}
.wege li::before{content:counter(w);width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--volt);color:var(--auf-volt);font-weight:500}
.wege h3{font-size:var(--t-l);margin-bottom:4px}
.wege p{color:var(--leise);font-size:var(--t-s);margin-bottom:12px}

/* Übergänge */
::view-transition-old(root),::view-transition-new(root){animation-duration:.28s}
html[data-bewegung="aus"] *,html[data-bewegung="aus"] *::before,html[data-bewegung="aus"] *::after{animation:none!important;transition:none!important}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}

/* Breite Schirme */
@media (min-width:760px){
  .vergleich{grid-template-columns:1fr 1fr}
  .start .held{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}
  .mitmachen .held{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:center}
  .wege{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:1024px){
  .begleiter-raster{display:grid;grid-template-columns:minmax(0,1fr) minmax(400px,480px);align-items:start}
  .begleiter-raster>.buehne-spalte{position:sticky;top:0;padding:20px;display:flex;flex-direction:column;gap:16px}
  .begleiter-raster .buehne{border-radius:18px}
  .begleiter-raster .rechts{border-left:1px solid var(--linie);min-height:calc(100dvh - 90px);display:flex;flex-direction:column;background:var(--flaeche)}
  .begleiter-raster .reiter{position:sticky;top:0;bottom:auto;order:-1;border-top:0;border-bottom:1px solid var(--linie);padding:4px}
  .begleiter-raster .reiter button{flex-direction:row;justify-content:center;gap:8px;font-size:var(--t-s)}
  .begleiter-raster .reiter button[aria-current="page"]::after{top:auto;bottom:0;border-radius:3px 3px 0 0}
  .begleiter-raster .inhalt{max-width:none}
  .raster.pult{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) minmax(0,.9fr)}
  .raster.regie{grid-template-columns:280px minmax(0,1.25fr) minmax(0,1fr)}
  .raster.delegierte{grid-template-columns:240px minmax(0,1fr) minmax(0,.8fr);padding:0;gap:0;min-height:calc(100dvh - 90px)}
  .raster.delegierte>nav{position:sticky;top:0;padding:16px;border-right:1px solid var(--linie);min-height:calc(100dvh - 90px);background:var(--flaeche)}
  .raster.delegierte>main{padding:32px 36px;display:flex;flex-direction:column;gap:22px}
  .raster.delegierte>aside{padding:32px 24px;border-left:1px solid var(--linie);display:flex;flex-direction:column;gap:18px;position:sticky;top:0}
  .buehnenbild{grid-template-columns:minmax(0,1fr) auto auto;align-items:start}
  .buehnenbild .telefon{width:300px}
}
@media (min-width:1600px){
  .buehnenbild .telefon{width:340px}
}
.seitennav{display:flex;flex-direction:column;gap:4px}
.seitennav button{display:flex;align-items:center;gap:12px;min-height:44px;padding:0 12px;border:0;border-radius:10px;background:transparent;color:var(--leise);font-size:var(--t-s);font-weight:500;text-align:left}
.seitennav button svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8}
.seitennav button[aria-current="page"]{background:var(--flaeche-2);color:var(--text)}
@media (max-width:1023px){
  .raster.delegierte{padding:0}
  .raster.delegierte>nav{display:none}
  .raster.delegierte>main,.raster.delegierte>aside{padding:20px 16px}
  .raster.delegierte>aside{padding-top:0}
}
@media (forced-colors:active){
  .marker.meinung,.umriss,.mb-zeile{outline-color:CanvasText}
  .karte-beschluss,.stimmkarte.aktiv{border:3px solid CanvasText}
}

/* Sichtbarkeit je Breite */
.nur-breit{display:none}
.nur-schmal-reiter{position:sticky;bottom:0;z-index:4}
@media (min-width:1024px){
  .nur-breit{display:flex}
  .nur-schmal,.nur-schmal-reiter{display:none}
  .raster.delegierte>main.inhalt{max-width:none;margin:0}
}
@media (max-width:1023px){.raster.delegierte>aside{display:none}}
.marke span{white-space:nowrap}
@media (max-width:520px){.marke .produkt.mit-rolle{display:none}.marke .rolle{color:var(--text);font-weight:500}}
.begleiter-raster>.rechts{flex:1;display:flex;flex-direction:column}
.raster.delegierte{flex:1}
@media (min-width:1024px){.begleiter-raster .reiter button{gap:6px;padding:6px 2px}}
@media (min-width:1600px){.begleiter-raster{grid-template-columns:minmax(0,1fr) 520px}}

.saal-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ki-hinweis{font-size:11px;padding:2px 8px;border-radius:99px;background:rgba(14,7,22,.62);color:#f7f4fa}