/* eCardilly Cockpit — Aufbau nach cockpit-dummy-v4.html, mobil zuerst.
   Jede Farbe aus tokens.css (vendorter Spiegel), keine Inline-Stile (CSP). */

*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--app-bg);color:var(--text-primary);font-family:var(--font-ui);font-size:var(--text-body);line-height:var(--leading-body)}
button,input,textarea{font-family:inherit;font-size:var(--text-body);color:inherit}
a{color:var(--brand-violet)}
p{margin:0}
.muted{color:var(--text-muted)}
.klein{font-size:var(--text-label);line-height:var(--leading-heading)}
.mini{font-size:var(--text-label);line-height:var(--leading-heading)}
h1{font-size:var(--text-page-title);line-height:var(--leading-tight);font-weight:var(--font-weight-medium);margin:0 0 var(--space-3)}
h2{font-size:var(--text-section-title);line-height:var(--leading-heading);font-weight:var(--font-weight-medium);margin:0}
h3{font-size:var(--text-body);font-weight:var(--font-weight-medium);margin:0}
.eyebrow{font-size:var(--text-small);letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);font-weight:var(--font-weight-semibold)}
.wort{font-size:var(--text-small);letter-spacing:.14em;color:var(--gold-link);font-weight:var(--font-weight-semibold)}
.abstand-oben{margin-top:var(--space-5)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Rahmen */
.app{position:fixed;inset:0;display:flex;flex-direction:column;max-width:720px;margin:0 auto}
.kopf{flex:0 0 var(--topbar-height);display:flex;align-items:center;gap:var(--space-2);padding:0 var(--space-2) 0 var(--space-4);border-bottom:1px solid var(--panel-border);background:var(--app-bg)}
.kopf .titel{font-weight:var(--font-weight-medium)}
.kopf .stand{margin-left:auto;font-size:var(--text-small);color:var(--text-muted);text-align:right;line-height:1.25}
.icon-btn{min-width:var(--control-h-lg);height:var(--control-h-lg);border:0;background:transparent;border-radius:var(--radius-sm);cursor:pointer;font-size:20px;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;color:var(--text-primary)}
.ansicht{flex:1 1 auto;overflow-y:auto;position:relative}
.seite{padding:var(--space-4)}
.nav{flex:0 0 var(--bottombar-height);display:flex;background:var(--panel-bg);border-top:1px solid var(--panel-border)}
.nav a{flex:1;text-decoration:none;font-size:var(--text-small);color:var(--text-muted);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:var(--control-h-lg)}
.nav .i{font-size:17px;line-height:1;padding:2px 12px;border-radius:var(--radius-full)}
.nav a.aktiv{color:var(--text-primary);font-weight:var(--font-weight-medium)}
.nav a.aktiv .i{background:var(--gold-primary)}
:focus-visible{outline:2px solid var(--gold-link);outline-offset:2px}

/* Sitzung: vertikales Einrasten je Bildschirm */
.sitzung{scroll-snap-type:y mandatory}
.schirm{scroll-snap-align:start;min-height:100%;padding:var(--space-4);display:flex;flex-direction:column;gap:10px;position:relative}
.schirm + .schirm{border-top:1px solid var(--panel-border)}
.weiter{margin-top:auto;align-self:center;min-width:var(--control-h-lg);justify-content:center;font-size:var(--text-label);color:var(--text-muted);border:0;background:transparent;min-height:var(--control-h-lg);cursor:pointer;text-decoration:none;display:inline-flex;align-items:center}

.karte{background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:var(--radius-md);padding:var(--space-4)}
.stapel{display:flex;flex-direction:column;gap:var(--space-2)}
.stapel + .stapel{margin-top:var(--space-2)}
.lagesatz{font-size:var(--text-section-title);line-height:var(--leading-heading);font-weight:var(--font-weight-medium)}
.reihe{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-3);padding:6px 0;border-top:1px solid var(--panel-border)}
.reihe:first-child,.reihe.ohne-linie{border-top:0;padding:0}
.ziel{display:block;width:100%;height:14px;margin:var(--space-2) 0 var(--space-1)}
.ziel .grund{fill:var(--app-bg);stroke:var(--panel-border-hover)}
.ziel .ist{fill:var(--gold-link)}

/* Marken (Herkunft, Zustand) */
.marke{display:inline-block;font-size:var(--text-small);font-weight:var(--font-weight-semibold);padding:1px 6px;border-radius:var(--radius-xs);background:var(--pill-bg);color:var(--pill-text);vertical-align:middle;letter-spacing:.02em;white-space:nowrap}
.marke.echt{background:var(--gs-host-pill-live-bg);color:var(--success-text)}
.marke.warn{background:var(--gs-host-gold-soft);color:var(--pill-text)}
.marke.rot{background:var(--gs-host-pill-closed-bg);color:var(--text-primary);box-shadow:inset 0 0 0 1px var(--error)}
.teamlink{display:inline-flex;align-items:center;min-height:var(--control-h-lg);text-decoration:none;color:var(--text-primary)}
.marke.gold{background:var(--gold-light);color:var(--pill-text)}
.vor{display:inline-block;font-size:var(--text-small);font-weight:var(--font-weight-semibold);padding:1px 6px;border-radius:var(--radius-xs);border:1px solid var(--brand-lavender);color:var(--brand-violet);background:var(--brand-lavender-tint);vertical-align:middle;white-space:nowrap}
.neu{display:inline-block;font-size:var(--text-small);font-weight:var(--font-weight-semibold);padding:1px 6px;border-radius:var(--radius-full);background:var(--gold-primary);color:var(--text-primary);vertical-align:middle;letter-spacing:.04em}

/* Einheiten: Farbe nur als Punkt, immer mit Namen (Spec §12) */
.einheit{display:inline-flex;align-items:center;gap:6px;font-size:var(--text-label);font-weight:var(--font-weight-medium)}
.einheit::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--farbe,var(--text-light));flex:0 0 10px}
.u-geschaeftsfuehrung{--farbe:var(--text-primary)}
.u-zahlen{--farbe:var(--info)}
.u-wachstum{--farbe:var(--success)}
.u-strategie{--farbe:var(--brand-violet)}
.u-kreation{--farbe:var(--brand-coral)}
.u-bau{--farbe:var(--gold-link)}
.u-betrieb{--farbe:var(--text-light)}

/* Karussell (waagerecht wischbar) */
.karussell{display:flex;align-items:flex-start;gap:var(--space-3);overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(-1*var(--space-4));padding:0 var(--space-4) var(--space-2);scrollbar-width:none}
.karussell::-webkit-scrollbar{display:none}
.karussell > .karte{flex:0 0 calc(100% - 28px);scroll-snap-align:center;display:flex;flex-direction:column;gap:var(--space-2)}
.kpunkte{display:flex;justify-content:center;gap:6px}
.kpunkte i{width:6px;height:6px;border-radius:50%;background:var(--panel-border-hover)}
.kpunkte i.an{background:var(--text-primary)}

/* Knöpfe */
.btn{min-height:var(--control-h-lg);border-radius:var(--radius-sm);border:1px solid var(--panel-border-hover);background:var(--panel-bg);padding:6px var(--space-3);cursor:pointer;font-weight:var(--font-weight-medium);line-height:1.25;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;text-align:left;width:100%;text-decoration:none;color:var(--text-primary)}
.btn small{font-weight:var(--font-weight-regular);font-size:var(--text-small);color:var(--text-muted)}
.btn.primaer{background:var(--gold-primary);border-color:var(--gold-primary)}
.btn.primaer small{color:var(--pill-text)}
.btn.mittig{align-items:center;text-align:center}
.btn.schmal{width:auto;display:inline-flex}
.btn[disabled],.btn[aria-disabled=true]{opacity:.38;cursor:not-allowed}
.knoepfe{display:flex;flex-direction:column;gap:var(--space-2)}
.knoepfe.zwei{flex-direction:row}
.knoepfe.zwei .btn,.knoepfe.zwei form{flex:1}
form.inline{display:contents}
.ohne{font-size:var(--text-label);background:var(--app-bg);border-radius:var(--radius-sm);padding:6px var(--space-2);line-height:var(--leading-heading)}
.beschlossen{background:var(--gs-host-pill-live-bg);border-radius:var(--radius-sm);padding:var(--space-2) var(--space-3);font-size:var(--text-label);line-height:var(--leading-heading)}

/* Entscheidungskarte */
.frage{font-size:17px;line-height:1.35;font-weight:var(--font-weight-medium)}
.empf{font-size:var(--text-label);line-height:var(--leading-heading);border-left:3px solid var(--gold-link);padding:2px 0 2px var(--space-2)}
.zahlbezug{font-size:var(--text-label);line-height:var(--leading-heading);color:var(--text-muted)}
.zahlbezug b{color:var(--text-primary)}
.signal{border-left:3px solid var(--warning)}

/* Team-Karte: festes Raster */
.zeile{display:grid;grid-template-columns:76px 1fr;gap:var(--space-2);font-size:var(--text-label);line-height:var(--leading-heading);padding:4px 0;border-top:1px solid var(--panel-border)}
.zeile > b{font-weight:var(--font-weight-semibold);color:var(--text-muted);font-size:var(--text-small);text-transform:uppercase;letter-spacing:.04em;padding-top:1px}
.zeile.erste{border-top:0}
.grau{opacity:.6}
.vorschlaege{margin:4px 0 0;padding:0;list-style:none}
.vorschlaege li{padding:4px 0;border-top:1px dashed var(--panel-border)}
.vorschlaege li:first-child{border-top:0;padding-top:0}
.vn{display:grid;grid-template-columns:1fr 1fr auto;gap:var(--space-2);align-items:center}
.vn img{width:100%;max-height:96px;object-fit:contain;border-radius:var(--radius-sm);background:var(--app-bg)}
.daumen{display:flex;flex-direction:column;gap:4px}
.daumen button{width:var(--control-h-lg);height:var(--control-h-lg);border-radius:var(--radius-full);border:1px solid var(--panel-border-hover);background:var(--panel-bg);cursor:pointer;font-size:18px}
.daumen button.an{background:var(--gold-light);border-color:var(--gold-link)}

/* Zeitleiste (Server-SVG, ADR-050) */
.band{display:block;width:100%;height:auto;margin-top:var(--space-2)}
.band .tag{fill:var(--panel-bg);stroke:var(--panel-border)}
.band .tag.wochenende{fill:var(--app-bg)}
.band .tag.heute{stroke:var(--text-primary)}
.band text{font-size:11px;fill:var(--text-muted);font-family:var(--font-ui)}
.band .heute-text{fill:var(--text-primary);font-weight:var(--font-weight-semibold)}
.punkt.u-geschaeftsfuehrung{fill:var(--text-primary)} .punkt.u-zahlen{fill:var(--info)} .punkt.u-wachstum{fill:var(--success)}
.punkt.u-strategie{fill:var(--brand-violet)} .punkt.u-kreation{fill:var(--brand-coral)} .punkt.u-bau{fill:var(--gold-link)} .punkt.u-betrieb{fill:var(--text-light)}
.punkt.ueberfaellig{stroke:var(--error);stroke-width:2}
.ereignisse .ez{display:grid;grid-template-columns:56px 1fr;gap:6px;align-items:center;font-size:var(--text-small);line-height:1.3;padding:3px 0;border-top:1px solid var(--panel-border)}
.ereignisse .ez .einheit{font-size:var(--text-small)}
.ueberfaellig-text{color:var(--error);font-weight:var(--font-weight-medium)}
.wellen{display:block;width:100%;height:auto;margin-top:var(--space-2)}
.wellen .monat{font-size:11px;fill:var(--text-muted);font-family:var(--font-ui)}
.wellen .achse{stroke:var(--panel-border)}
.wellen .fenster{fill:var(--brand-lavender-tint);stroke:var(--brand-lavender)}
.wellen .fenster.leer{stroke-dasharray:3 2}
.wellen .fest{fill:var(--brand-violet)}
.wellen .marke-voll{stroke:var(--panel-bg);stroke-width:2}
.wellen .marke-vor{fill:var(--panel-bg);stroke-width:2}
.marke-vor.u-geschaeftsfuehrung{stroke:var(--text-primary)} .marke-vor.u-zahlen{stroke:var(--info)} .marke-vor.u-wachstum{stroke:var(--success)}
.marke-vor.u-strategie{stroke:var(--brand-violet)} .marke-vor.u-kreation{stroke:var(--brand-coral)} .marke-vor.u-bau{stroke:var(--gold-link)}
.wellen .lbl{font-size:10px;fill:var(--text-primary);font-family:var(--font-ui)}
.wellenliste{margin:var(--space-2) 0 0;padding:0;list-style:none}
.wellenliste li{font-size:var(--text-small);line-height:1.35;padding:3px 0;border-top:1px solid var(--panel-border)}

/* Blatt (Bestätigung), Meldung, Menü */
dialog.blatt{position:fixed;left:0;right:0;bottom:0;top:auto;margin:0 auto;width:100%;max-width:720px;border:0;background:var(--panel-bg);border-radius:var(--radius-lg) var(--radius-lg) 0 0;padding:var(--space-5) var(--space-4) var(--space-6);box-shadow:var(--shadow-lg)}
dialog.blatt::backdrop{background:rgba(0,0,0,.35)}
.blatt-seite{max-width:720px;margin:var(--space-6) auto 0;background:var(--panel-bg);border-radius:var(--radius-lg);padding:var(--space-5) var(--space-4) var(--space-6);box-shadow:var(--shadow-lg)}
.blatt h2{margin-bottom:var(--space-1)}
textarea{width:100%;font-size:16px;border:1px solid var(--panel-border-hover);border-radius:var(--radius-sm);padding:var(--space-2) var(--space-3);min-height:60px}
label.feld{display:block;font-size:var(--text-label);color:var(--text-muted);margin-top:var(--space-3)}
.fehlerbox{background:var(--gs-host-pill-closed-bg);border:1px solid var(--error);border-radius:var(--radius-md);padding:var(--space-3);margin:var(--space-3) 0;font-size:var(--text-label)}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--bottombar-height) + var(--space-4));background:var(--text-primary);color:var(--panel-bg);padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);font-size:var(--text-label);z-index:30;width:max-content;max-width:340px;display:flex;align-items:center;gap:var(--space-3)}
.toast button{background:transparent;border:0;color:var(--gold-primary);font-weight:var(--font-weight-semibold);cursor:pointer;min-height:var(--control-h-lg);padding:0 var(--space-2)}
.toast[hidden]{display:none}
details.menue{position:relative}
details.menue > summary{list-style:none}
details.menue > summary::-webkit-details-marker{display:none}
details.menue nav{position:absolute;top:calc(var(--control-h-lg) + 4px);right:0;width:250px;background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:var(--radius-md);box-shadow:var(--shadow-md);z-index:15;padding:var(--space-2)}
details.menue nav a,details.menue nav button{display:flex;align-items:center;width:100%;text-align:left;border:0;background:transparent;min-height:var(--control-h-lg);padding:0 var(--space-3);border-radius:var(--radius-sm);cursor:pointer;text-decoration:none;color:var(--text-primary)}
.bandmeldung{margin:var(--space-2) var(--space-4) 0;border-radius:var(--radius-md);padding:var(--space-2) var(--space-3);font-size:var(--text-label);line-height:var(--leading-heading);background:var(--gs-host-gold-soft);border:1px solid var(--gold-link)}
.bandmeldung.neutral{background:var(--panel-bg);border-color:var(--panel-border)}
details > summary{cursor:pointer;min-height:var(--control-h-lg);display:flex;align-items:center;font-weight:var(--font-weight-medium)}
.listzeile{display:flex;align-items:center;gap:var(--space-3);width:100%;min-height:var(--control-h-lg);background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:var(--radius-md);padding:var(--space-3);margin-bottom:var(--space-2);text-align:left;text-decoration:none;color:var(--text-primary)}
.listzeile .rechts{margin-left:auto;white-space:nowrap}
.qr svg{width:220px;height:220px;display:block;margin:var(--space-3) auto}
.linktext{word-break:break-all;font-size:var(--text-label)}

/* Anmeldung */
.login{min-height:100%;display:flex;flex-direction:column;justify-content:center;gap:var(--space-3);padding:var(--space-6);max-width:420px;margin:0 auto}

@media (min-width:768px){
  .karussell > .karte{flex-basis:calc(50% - 20px)}
  .schirm{min-height:auto}
  .sitzung{scroll-snap-type:none}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
.reihe.kopfzeile{align-items:center}
.leitfrage{margin-top:-6px}
.spalte{flex:1 1 auto;display:flex;flex-direction:column;min-height:0}
/* Ab 768 px: Inhalt höchstens 720 px, Navigation als linke Leiste (Spec §4). */
@media (min-width:768px){
  .app{max-width:none;display:grid;grid-template-columns:200px minmax(0,720px);grid-template-rows:var(--topbar-height) minmax(0,1fr);justify-content:center}
  .kopf{grid-column:1 / -1}
  .spalte{grid-column:2;grid-row:2}
  .nav{grid-column:1;grid-row:2;flex-direction:column;justify-content:flex-start;border-top:0;border-right:1px solid var(--panel-border);background:var(--app-bg);padding-top:var(--space-3)}
  .nav a{flex:0 0 auto;flex-direction:row;justify-content:flex-start;gap:var(--space-2);padding:0 var(--space-4);font-size:var(--text-body)}
}