/* Willys Bedienpult — Fassung «07 · Glas dunkel» (entschieden 26.08.2026)
   Verlauf 160°: Violett #482784 oben → dasselbe Violett zu 58 % über Schwarz →
   Petrol #068D9D unten. Milchige Scheiben, die Farbe kommt aus dem Verlauf.
   Schrift Hanken Grotesk in Weiss. Die Sprechtaste ist die einzige massive Fläche. */

@font-face{font-family:"Hanken Grotesk"; src:url("fonts/HankenGrotesk-Regular.ttf") format("truetype"); font-weight:400; font-display:swap}
@font-face{font-family:"Hanken Grotesk"; src:url("fonts/HankenGrotesk-SemiBold.ttf") format("truetype"); font-weight:600; font-display:swap}
@font-face{font-family:"Hanken Grotesk"; src:url("fonts/HankenGrotesk-ExtraBold.ttf") format("truetype"); font-weight:800; font-display:swap}

:root{
  --violett:#482784;
  --violett-mitte:color-mix(in srgb, #482784 58%, #000);   /* = #2A1650, kein eigener Farbton */
  --violett-hell:#AB92BF;
  --hellblau:#CEEDF3;
  --petrol:#068D9D;
  --weiss:#FFFFFF;
  --scheibe:rgba(255,255,255,.12);
  --scheibe-kante:rgba(255,255,255,.25);
  --scheibe-druck:rgba(255,255,255,.30);
  --text-daempf:rgba(255,255,255,.72);
  --gruen:#5BD68B; --orange:#F5B942; --rot:#F2695C;   /* Signale, keine Gestaltung */
  --hanken:"Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --radius:14px;
}
@supports not (color:color-mix(in srgb, #000 50%, #fff)){ :root{--violett-mitte:#2A1650} }

[hidden]{display:none !important}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html{color-scheme:dark}
html,body{height:100%}
body{
  margin:0; color:var(--weiss); font-family:var(--hanken); line-height:1.4;
  background:linear-gradient(160deg, var(--violett) 0%, var(--violett-mitte) 60%, var(--petrol) 100%) fixed;
  font-size:clamp(13px, 3.72vw, 17px);
  overscroll-behavior:none;
}
@media (min-width:700px){ body{font-size:16px} }

.scheibe{
  background:var(--scheibe); border:1px solid var(--scheibe-kante); border-radius:var(--radius);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
}

#app{
  height:100%; height:100dvh; display:flex; flex-direction:column; gap:.55rem;
  max-width:56rem; margin:0 auto;
  padding:calc(.6rem + env(safe-area-inset-top)) .8rem 0;
}

/* 1 · Kopf */
.kopf{display:flex; align-items:center; gap:.65rem; padding:.55rem .75rem; flex:0 0 auto}
.kopf .avatar{
  width:44px; height:44px; min-width:44px; min-height:44px; border-radius:50%; overflow:hidden; flex:0 0 auto;
  box-shadow:0 0 0 1.5px rgba(255,255,255,.5); border:0; padding:0; background:none; cursor:pointer;
}
.kopf .avatar img{width:100%; height:100%; object-fit:cover; display:block}
.kopf .name{line-height:1.15; min-width:0; flex:1}
.kopf .name b{display:block; font-weight:800; font-size:1.15rem; letter-spacing:-.01em}
.kopf .name small{display:flex; align-items:center; font-size:.7rem; color:var(--text-daempf); margin-top:.15rem}
.kopf .signet{height:1.9rem; width:auto; flex:0 0 auto; margin-left:auto}
.dot{width:.5rem; height:.5rem; border-radius:50%; background:var(--gruen); display:inline-block;
  margin-right:.32rem; box-shadow:0 0 6px var(--gruen); flex:0 0 auto}
.dot.orange{background:var(--orange); box-shadow:0 0 6px var(--orange)}
.dot.rot{background:var(--rot); box-shadow:0 0 6px var(--rot)}

/* 2 · Protokollzeile */
.protokollzeile{
  display:flex; gap:.5rem; align-items:baseline; padding:.5rem .8rem; font-family:var(--hanken); color:var(--weiss);
  font-size:.74rem; text-align:left; cursor:pointer; flex:0 0 auto; min-height:44px; width:100%;
}
.protokollzeile .titel{opacity:.7; font-weight:600; letter-spacing:.06em; text-transform:uppercase; font-size:.62rem; white-space:nowrap}
.protokollzeile .was{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.protokollzeile .ergebnis{opacity:.75; white-space:nowrap}

/* 3 · Gespräch */
.gespraech{flex:1 1 auto; min-height:0; display:flex; flex-direction:column; overflow:hidden}
.gespraech-scroll{flex:1 1 auto; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:.75rem .85rem}
.antwort .meta{font-size:.62rem; color:var(--text-daempf); letter-spacing:.06em; font-weight:600; margin-bottom:.3rem}
.antwort .txt{font-size:.95rem; line-height:1.45; white-space:pre-wrap; word-wrap:break-word}
.antwort .txt .ampel-liste{margin:.3rem 0 0; padding:0; list-style:none; font-size:.82rem}
.antwort .txt .ampel-liste li{display:flex; gap:.45rem; align-items:baseline; margin:0 0 .3rem}
.antwort .txt .ampel-liste li.gruppe{font-weight:700; margin-top:.5rem; color:var(--hellblau)}
.ampelpunkt{width:.55rem; height:.55rem; border-radius:50%; flex:0 0 auto; position:relative; top:.05rem; background:var(--gruen)}
.ampelpunkt.warn, .ampelpunkt.unknown{background:var(--orange)}
.ampelpunkt.crit, .ampelpunkt.error, .ampelpunkt.red, .ampelpunkt.down{background:var(--rot)}
.trenn{border:0; border-top:1px solid rgba(255,255,255,.22); margin:.7rem 0 .6rem}
.verlauf{display:flex; flex-direction:column; gap:.4rem}
.past{display:flex; gap:.45rem; font-size:.76rem; line-height:1.35; color:var(--text-daempf)}
.past .zeit{white-space:nowrap; min-width:2.6rem; opacity:.85}
.past .wer{white-space:nowrap; font-weight:600}
.past .text{white-space:pre-wrap; word-wrap:break-word; min-width:0}

@keyframes einschieben{from{transform:translateY(-.6rem); opacity:0} to{transform:none; opacity:1}}
.antwort.neu{animation:einschieben 320ms cubic-bezier(.2,.7,.3,1)}

/* 4 · Knöpfe: zwei Spalten, Kalender breit */
.knoepfe{display:grid; grid-template-columns:1fr 1fr; gap:.55rem; flex:0 0 auto}
.knopf{
  position:relative; overflow:hidden; color:var(--weiss); font-family:var(--hanken); font-weight:700; font-size:1.02rem;
  letter-spacing:-.01em; min-height:3.6rem; padding:.85rem .7rem;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:background 90ms ease, transform 90ms ease;
}
.knopf.breit, .knopf:not([hidden]):last-of-type:nth-of-type(odd){grid-column:1 / -1}
.knopf:active, .knopf.gedrueckt{background:var(--scheibe-druck); transform:translateY(1px)}
.knopf.gedaempft{opacity:.45}
.knopf .balken{position:absolute; left:0; bottom:0; height:2px; width:100%; display:none; overflow:hidden}
.knopf.arbeitet .balken{display:block}
.knopf .balken i{display:block; height:100%; width:40%; background:var(--hellblau); animation:laufband 1.1s linear infinite}
@keyframes laufband{from{transform:translateX(-100%)} to{transform:translateX(260%)}}
@media (min-width:1100px){ .knoepfe{grid-template-columns:repeat(4,1fr)} .knopf.breit{grid-column:auto} }

/* 5 · Sprechtaste — weiss, violette Schrift, Radius rund 5 % der Breite, Abstand zur Kante */
.sprechtaste{
  margin:.1rem .25rem 0; background:var(--weiss); color:var(--violett); border:0; border-radius:5vw;
  padding:1.15rem 1rem; font-family:var(--hanken); font-weight:700; font-size:16px;
  min-height:56px; letter-spacing:.01em; cursor:pointer; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center; gap:.55rem; position:relative;
  box-shadow:0 12px 24px -12px rgba(0,0,0,.5);
  transition:background 120ms ease, color 120ms ease; touch-action:none; user-select:none; -webkit-user-select:none;
  -webkit-touch-callout:none;
}
@media (min-width:700px){ .sprechtaste{border-radius:28px} }
.sprechtaste.haelt{background:var(--petrol); color:var(--weiss)}
.sprechtaste.sendet{background:var(--violett-hell); color:var(--violett)}
.sprechtaste.aus{background:rgba(255,255,255,.35); color:rgba(255,255,255,.9); cursor:default; box-shadow:none}
.sprechtaste .uhr{position:absolute; right:1.1rem; font-variant-numeric:tabular-nums; font-size:.85rem; display:none}
.sprechtaste.haelt .uhr{display:inline}
.heimbalken{height:calc(.55rem + env(safe-area-inset-bottom)); flex:0 0 auto}

/* Mikrofon in CSS, wie im Entwurf */
.mic{width:1.25rem; height:2rem; position:relative; flex:0 0 auto}
.mic i{position:absolute; left:50%; transform:translateX(-50%); top:0; width:.78rem; height:1.2rem; border-radius:999px; background:currentColor}
.mic u{position:absolute; left:50%; transform:translateX(-50%); bottom:.24rem; width:1.2rem; height:.6rem; border:2px solid currentColor; border-top:0; border-radius:0 0 999px 999px}
.mic s{position:absolute; left:50%; transform:translateX(-50%); bottom:0; width:2px; height:.24rem; background:currentColor}
.sprechtaste.haelt .mic{display:none}
.pegel{display:none; align-items:flex-end; gap:.18rem; height:1.4rem}
.sprechtaste.haelt .pegel{display:flex}
.pegel i{width:.24rem; background:var(--weiss); border-radius:1px; height:.3rem}

/* Tippzeile */
.tippzeile{display:flex; gap:.5rem; flex:0 0 auto; margin-bottom:var(--vv-bottom, 0px); position:relative; z-index:5}
.tippzeile input{
  flex:1; border:1px solid var(--scheibe-kante); border-radius:var(--radius); background:var(--scheibe);
  padding:.6rem .8rem; font-family:var(--hanken); font-size:16px; color:var(--weiss); min-height:44px;
}
.tippzeile input::placeholder{color:var(--text-daempf)}
.tippzeile input:focus{outline:2px solid var(--hellblau); outline-offset:0}
.tippzeile button{
  border:1px solid var(--scheibe-kante); background:var(--scheibe); color:var(--weiss);
  font-family:var(--hanken); font-weight:700; border-radius:var(--radius); padding:0 .9rem; cursor:pointer; min-width:44px; min-height:44px;
}

/* Eingebettete Dienste und Tafeln */
.einbettung{
  position:fixed; inset:0; z-index:40; display:none; flex-direction:column;
  background:linear-gradient(160deg, var(--violett) 0%, var(--violett-mitte) 60%, var(--petrol) 100%) fixed;
  padding:calc(.6rem + env(safe-area-inset-top)) .8rem calc(.6rem + env(safe-area-inset-bottom)); gap:.55rem;
}
.einbettung.offen{display:flex}
.einbettung .kopf{padding:.35rem .5rem}
.einbettung .zurueck{
  background:none; border:0; color:var(--weiss); font-family:var(--hanken); font-weight:700; font-size:1rem; cursor:pointer;
  display:flex; align-items:center; gap:.4rem; padding:.55rem .55rem; min-height:44px; min-width:44px;
}
.einbettung .zurueck::before{content:"←"; font-size:1.2rem}
/* iOS: das iframe braucht einen scrollenden Rahmen mit fester Höhe, sonst wächst es auf Inhaltsgrösse und scrollt nicht */
.einbettung .rahmen{flex:1; min-height:0; border-radius:var(--radius); overflow:auto; -webkit-overflow-scrolling:touch; background:#fff}
.einbettung iframe{border:0; width:100%; height:100%; min-height:100%; display:block; background:#fff}
.einbettung .tafel-innen{flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; padding:.2rem .1rem}
.fuss{font-size:.78rem; color:var(--text-daempf); margin:.8rem .1rem .4rem; line-height:1.5}

/* Protokoll-Liste */
.pr-liste{display:flex; flex-direction:column; gap:.4rem}
.pr{padding:.6rem .85rem; display:grid; grid-template-columns:auto 1fr auto; gap:.2rem .6rem; font-size:.8rem; align-items:baseline}
.pr .zeit{white-space:nowrap; opacity:.8; font-variant-numeric:tabular-nums}
.pr .wer{font-weight:700}
.pr .knopf-name{grid-column:2; opacity:.9}
.pr .erg{white-space:nowrap; opacity:.8; text-align:right}
.pr.abgewiesen .erg{color:var(--orange)}

/* Überlagerungen: Schloss, Einstellungen, Anmeldung */
.schleier{
  position:fixed; inset:0; z-index:60;
  background:linear-gradient(160deg, var(--violett) 0%, var(--violett-mitte) 60%, var(--petrol) 100%) fixed;
  display:none; flex-direction:column; align-items:center; justify-content:center; padding:2rem 1.2rem; text-align:center;
}
.schleier.offen{display:flex}
.schleier .avatar-gross{width:4.8rem; height:4.8rem; border-radius:50%; overflow:hidden; box-shadow:0 0 0 1.5px rgba(255,255,255,.5); margin-bottom:.8rem}
.schleier .avatar-gross img{width:100%; height:100%; object-fit:cover}
.schleier h1{font-weight:800; font-size:1.5rem; margin:.1rem 0 .2rem}
.schleier p{font-size:.88rem; color:var(--text-daempf); margin:.2rem 0 1rem; max-width:24rem}
.schleier .fehler{color:#FFD0C8; font-size:.8rem; min-height:1.2em; margin:.4rem 0 0}
.schleier .abmelden{color:var(--text-daempf); font-size:.8rem; margin-top:1.6rem; text-decoration:underline}
.schleier .signet-unten{height:2.2rem; width:auto; margin-top:2rem; opacity:.9}
.sperr-knopf{
  display:block; width:100%; max-width:20rem; margin:.35rem auto 0; text-decoration:none;
  background:var(--weiss); color:var(--violett); border:0; border-radius:14px;
  font-family:var(--hanken); font-weight:700; font-size:16px; padding:.85rem 1rem; cursor:pointer; min-height:44px;
}
.sperr-knopf:active{background:var(--hellblau)}
.sperr-knopf.zweit{background:var(--scheibe); color:var(--weiss); border:1px solid var(--scheibe-kante);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px)}
.sperr-knopf.zweit:active{background:var(--scheibe-druck)}
.pin-feld{
  display:block; width:100%; max-width:20rem; margin:.3rem auto; text-align:center;
  border:1px solid var(--scheibe-kante); border-radius:14px; background:var(--scheibe); color:var(--weiss);
  font-size:1.3rem; letter-spacing:.4em; padding:.6rem .5rem; font-family:var(--hanken); min-height:44px;
}
.pin-feld::placeholder{letter-spacing:normal; font-size:.85rem; color:var(--text-daempf)}
.pin-feld:focus{outline:2px solid var(--hellblau)}

/* Einstellungen */
.einstellungen{align-items:stretch; justify-content:flex-start; overflow-y:auto; text-align:left}
.einstellungen .innen{max-width:26rem; margin:0 auto; width:100%}
.einstellungen h1{margin-top:.6rem}
.einstellungen h2{font-weight:700; font-size:.78rem; color:var(--hellblau); text-transform:uppercase; letter-spacing:.1em; margin:1.4rem 0 .5rem}
.einstellungen label{display:block; font-size:.88rem; margin:.5rem 0 .25rem}
.einstellungen .zeile{display:flex; align-items:center; justify-content:space-between; gap:.8rem; margin:.4rem 0}
.einstellungen .zeile label{display:flex; align-items:center; min-height:44px; margin:0; flex:1; cursor:pointer}
.einstellungen input[type=checkbox]{width:28px; height:28px; min-width:28px; min-height:28px; accent-color:var(--petrol); cursor:pointer}
.einstellungen input[type=range]{width:100%; accent-color:var(--hellblau); min-height:44px}
.einstellungen .hinweis{font-size:.78rem; color:var(--text-daempf); margin:.3rem 0 0}

@media (prefers-reduced-motion: reduce){
  .antwort.neu{animation:none}
  .knopf, .sprechtaste{transition:none}
  .knopf .balken i{animation:none; width:100%}
}


/* ---------------------------------------------------------------------------
   Wachstum und Posten (nur Vorstand) — Scheiben auf dem Verlauf
--------------------------------------------------------------------------- */
.tafel-innen{padding:.2rem .1rem calc(1.2rem + env(safe-area-inset-bottom))}
.wx-ueberblick{display:grid; grid-template-columns:1fr 1fr; gap:.5rem; margin:.2rem 0 .8rem}
.wx-kachel{padding:.7rem .85rem; display:flex; flex-direction:column; gap:.15rem}
.wx-kachel.breit{grid-column:1 / -1}
.wx-kachel b{font-weight:800; font-size:1.5rem; line-height:1.05; font-variant-numeric:tabular-nums}
.wx-kachel span{font-size:.72rem; color:var(--text-daempf)}
.wx{display:block; text-decoration:none; color:var(--weiss); padding:.8rem .9rem .6rem; margin-bottom:.5rem}
.wx-kopf{display:flex; justify-content:space-between; align-items:baseline; gap:.5rem}
.wx .kanal{font-weight:700; font-size:.92rem; color:var(--hellblau)}
.wx-ziel{color:var(--text-daempf); font-size:.72rem}
.wx .wert{font-weight:800; font-size:1.7rem; line-height:1.1; margin:.35rem 0 .5rem; font-variant-numeric:tabular-nums}
.wx .wert small{font-size:.72rem; font-weight:600; color:var(--text-daempf); margin-left:.4rem}
.wx.leer .wert{font-size:1rem; color:var(--text-daempf)}
.wx-stats{display:grid; grid-template-columns:repeat(3,1fr); gap:.4rem; border-top:1px solid rgba(255,255,255,.22); padding-top:.5rem}
.wx-stats div{display:flex; flex-direction:column; gap:.1rem}
.wx-stats b{font-weight:700; font-size:1rem; font-variant-numeric:tabular-nums}
.wx-stats b.plus{color:var(--gruen)} .wx-stats b.minus{color:var(--rot)}
.wx-stats span{color:var(--text-daempf); font-size:.68rem}
.wx-hinweis{font-size:.72rem; color:var(--text-daempf); margin:.4rem 0 .1rem}
.wx-hand{margin:.3rem 0; background:var(--scheibe); border:1px solid var(--scheibe-kante); border-radius:999px; color:var(--weiss);
  font-family:var(--hanken); font-weight:600; font-size:16px; padding:.65rem .85rem; cursor:pointer; min-height:44px}
.wx canvas{width:100%; height:30px; display:block; margin-top:.5rem}

.po .po-h{font-weight:700; font-size:.76rem; letter-spacing:.08em; text-transform:uppercase; color:var(--hellblau); margin:1.1rem 0 .45rem}
.po .po-h:first-child{margin-top:.3rem}
.po-kanaele{display:flex; flex-wrap:wrap; gap:.4rem}
.po-lade{font-size:.85rem; color:var(--text-daempf)}
.po-chip{border:1px solid var(--scheibe-kante); background:var(--scheibe); color:var(--weiss); border-radius:999px; padding:.65rem .95rem;
  font-size:16px; font-weight:600; cursor:pointer; font-family:var(--hanken); line-height:1; min-height:44px; display:inline-flex; align-items:center; gap:.35rem}
.po-chip.an{background:var(--weiss); color:var(--violett); border-color:var(--weiss)}
.po-chip.aus{opacity:.5; cursor:not-allowed}
.po-chip.aus[data-grund]::after{content:attr(data-grund); font-size:.7rem; font-weight:600; opacity:.85}
.po-text, .po-feld{width:100%; border:1px solid var(--scheibe-kante); border-radius:var(--radius); background:var(--scheibe); color:var(--weiss);
  font-family:var(--hanken); font-size:16px; line-height:1.45; padding:.75rem .85rem; -webkit-appearance:none; appearance:none; min-height:44px}
.po-text{resize:vertical; min-height:9rem}
.po-feld{margin:0 0 .45rem}
.po-text::placeholder, .po-feld::placeholder{color:var(--text-daempf)}
.po-text:focus, .po-feld:focus{outline:2px solid var(--hellblau)}
input.po-feld[type="datetime-local"]{color:var(--weiss)}
.po-zeile{display:flex; justify-content:flex-end; font-size:.76rem; color:var(--text-daempf); margin:.3rem 0 .6rem}
.po-zaehler.warn{color:var(--rot); font-weight:700}
.po-label{display:block; font-size:.78rem; color:var(--text-daempf); margin:.2rem 0 .3rem}
.po-vorschlag{display:flex; flex-direction:column; gap:.1rem}
.po-knopf{display:block; width:100%; border:0; border-radius:var(--radius); background:var(--weiss); color:var(--violett); font-family:var(--hanken);
  font-weight:700; font-size:16px; padding:.9rem 1rem; cursor:pointer; text-align:center; min-height:44px}
.po-knopf:active{background:var(--hellblau)}
.po-knopf.zweit{background:var(--scheibe); color:var(--weiss); border:1px solid var(--scheibe-kante)}
.po-knopf.zweit:active{background:var(--scheibe-druck)}
.po-knopf:disabled{opacity:.5}
.po-medium{display:block}
.po-vorschau{margin:0 0 .5rem; border-radius:var(--radius); overflow:hidden; background:#000; max-height:14rem; display:flex; justify-content:center}
.po-vorschau img, .po-vorschau video{max-height:14rem; max-width:100%; object-fit:contain}
.po-preview{display:flex; flex-direction:column; gap:.5rem}
.po-pv{padding:.6rem .75rem; border-radius:var(--radius); background:var(--scheibe); border:1px solid var(--scheibe-kante)}
.po-pv.zulang{border-color:var(--rot)}
.po-pv-kopf{font-weight:700; font-size:.78rem; color:var(--hellblau); margin-bottom:.35rem}
.po-pv.zulang .po-pv-kopf{color:var(--rot)}
.po-pv-medium{font-size:.78rem; color:var(--text-daempf); margin-bottom:.3rem}
.po-pv-text{white-space:pre-wrap; word-break:break-word; font-family:var(--hanken); font-size:.9rem; line-height:1.4; margin:0}
.po-aktionen{display:flex; flex-direction:column; gap:.45rem; position:sticky; bottom:0; z-index:2; margin:.6rem -.1rem 0;
  padding:.55rem .1rem calc(.6rem + env(safe-area-inset-bottom)); background:rgba(42,22,80,.85); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border-radius:var(--radius)}
.po-aktionen .fuss{margin:0 0 .3rem; min-height:1.1em; font-size:.8rem}
.po-aktionen .fuss:empty{display:none}
.po-zweitreihe{display:grid; grid-template-columns:1fr 1fr; gap:.45rem}
.po-planen{border:1px solid var(--scheibe-kante); border-radius:var(--radius); padding:.7rem .8rem}