/* D!'s Team-Portal (Welcome Desk, Schicht-Log, Verwaltung) · Design v2 seit 16.10.2026: dunkles Glas in der CI von D!'s.
   Tokens wie docs/dienstplan/entwurf-v2/glas2.css. Tablet und Handy zuerst. Lesbarkeit geht vor: Nebentext mindestens 4,5:1
   auch auf der hellsten Glasfläche, Fallback ohne Blur deckend. Blur nur auf großen Flächen (Leiste, Karten, Kacheln),
   Listenzeilen bekommen eine ruhige Glasfüllung ohne Blur (sonst ruckelt das Tablet beim Scrollen). */
@property --anteil { syntax: '<number>'; inherits: true; initial-value: 0; }
:root{
  --grund:#100F0E; --grund-2:#1C1B19;
  --text:#F6F5F1; --text-2:rgba(var(--t-rgb),.86); --text-3:rgba(var(--t-rgb),.78);
  --pink:#FFA7E2; --pink-2:#FFC6EC; --pink-tief:#B4247F; --auf-pink:#2A1022;
  --gold:#B29261; --gold-hell:#E0CBA4; --beige:#E1E2DC;
  --ok:#A6EDBE; --warn:#FFD47E; --bad:#FFBDBD;
  /* Schrift auf getönten Flächen (Chips, Hinweise): eine Stufe heller als Pink 2 und Gold hell, gemessen mit docs/dienstplan/kontrast.py */
  --pink-schrift:#FFDDF4; --gold-schrift:#F0E2C6;
  --glas:rgba(var(--w-rgb),.065); --glas-2:rgba(var(--w-rgb),.10); --glas-3:rgba(var(--w-rgb),.15);
  --kante:rgba(var(--w-rgb),.12); --kante-2:rgba(var(--w-rgb),.2);
  --kante-feld:rgba(var(--w-rgb),.42);   /* Feldgrenze mindestens 3:1 (WCAG 1.4.11), gemessen in kontrast.py */
  --zeile:linear-gradient(180deg,rgba(var(--w-rgb),.075),rgba(var(--w-rgb),.045));
  --blur:22px;
  --r-xl:28px; --r:22px; --r-m:16px; --r-k:12px;
  --schatten:0 30px 60px -36px rgba(var(--s-rgb),.9),0 1px 0 rgba(var(--w-rgb),.07) inset;
  /* Bewegung: kurze, starke Ausklänge. Häufige Handgriffe 120 bis 200 ms, seltene Momente ausdrucksvoller. */
  --aus:cubic-bezier(.23,1,.32,1);
  --aus-stark:cubic-bezier(.16,1,.3,1);
  --weg:cubic-bezier(.4,0,1,1);
  --feder:linear(0,.009,.035 2.1%,.141 4.4%,.723 12.9%,.938 16.7%,1.017 19.4%,1.067,1.099 24.1%,1.111 26.5%,1.106 29.4%,1.053 37.3%,1.019 42.6%,.999 49.2%,.996 58.6%,1);
  --t-1:120ms; --t-2:200ms; --t-3:320ms; --t-4:480ms;
  --sicher-u:env(safe-area-inset-bottom,0px); --sicher-o:env(safe-area-inset-top,0px);
  /* Farbkanäle und Flächen als Variablen (seit 16.10.2026): das helle Thema setzt nur diese Werte neu, siehe :root[data-thema=hell] */
  --w-rgb:255,255,255; --s-rgb:0,0,0; --t-rgb:246,245,241; --grund-rgb:16,15,14;
  --p-rgb:255,167,226; --g-rgb:178,146,97; --ok-rgb:134,224,164; --warn-rgb:255,212,126; --bad-rgb:255,154,154; --blau-rgb:150,180,255;
  --akzent:var(--pink); --akzent-2:var(--pink-2); --pink-linie:var(--pink); --ok-fuell:var(--ok); --blau-schrift:#CFDBFF; --gold-schrift-2:var(--gold-hell);
  --flaeche:rgba(30,29,27,.94); --flaeche-formular:rgba(30,29,27,.95); --flaeche-dialog:rgba(30,29,27,.97); --flaeche-dicht:rgba(36,34,32,.84);
  --flaeche-dialog-blur:rgba(36,34,32,.9); --flaeche-tabbar:rgba(36,34,32,.72); --flaeche-dock:rgba(36,34,32,.74); --flaeche-schwebend:rgba(36,34,32,.96);
  --flaeche-zug:rgba(40,36,38,.94); --schleier:rgba(8,7,6,.6); --feld:rgba(0,0,0,.28); --feld-fokus:rgba(0,0,0,.36);
  --autofill:#2a2427; --mini:#3a2d36; --ava-a:#3b2c37; --ava-b:#262220;
  --glas-verlauf:linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,.045));
  --lichtkante:linear-gradient(160deg,rgba(255,255,255,.34),rgba(255,255,255,.06) 38%,rgba(255,255,255,.03) 62%,rgba(255,167,226,.22));
  --hintergrund:radial-gradient(48vmax 40vmax at 6% -6%,rgba(255,167,226,.20),transparent 62%),
    radial-gradient(40vmax 36vmax at 104% 4%,rgba(178,146,97,.26),transparent 60%),
    radial-gradient(60vmax 50vmax at 70% 112%,rgba(180,36,127,.24),transparent 62%),
    radial-gradient(30vmax 30vmax at 30% 70%,rgba(255,167,226,.07),transparent 70%);
}
/* ---------- Helles Glas (Schalter Sonne/Mond, Cookie tp_thema, der Server setzt data-thema schon beim Ausliefern) ----------
   Gleiche Glas-Idee auf warmem Hellgrund: weißes Glas mit Lichtkante, Pink und Gold als Pastellfelder. Linien und Überlagerungen
   werden dunkel (--w-rgb), Pink als Schrift und Rand wird tief (#B4247F), pinke Knöpfe bleiben pink. Kontrast in kontrast.py. */
:root[data-thema=hell]{
  color-scheme:light;
  --grund:#F3EEE8; --grund-2:#FFFFFF; --grund-rgb:243,238,232;
  --text:#1B1A18; --t-rgb:27,26,24; --text-2:rgba(27,26,24,.82); --text-3:rgba(27,26,24,.72);
  --w-rgb:58,36,50; --s-rgb:96,56,78;
  --p-rgb:214,77,160; --g-rgb:160,120,56; --ok-rgb:34,150,90; --warn-rgb:214,150,20; --bad-rgb:210,60,70; --blau-rgb:70,105,215;
  --pink-schrift:#8A1660; --gold-schrift:#634815; --gold-schrift-2:#634815; --ok:#14663A; --warn:#7A4E00; --bad:#A01E2B; --blau-schrift:#2B4C9E;
  --akzent:#B4247F; --akzent-2:#A01F72; --pink-linie:#C93A93; --ok-fuell:#8FE0AE;
  --glas:rgba(255,255,255,.55); --glas-2:rgba(255,255,255,.72); --glas-3:rgba(255,255,255,.92);
  --kante:rgba(58,36,50,.12); --kante-2:rgba(58,36,50,.22); --kante-feld:rgba(58,36,50,.58);
  --zeile:linear-gradient(180deg,rgba(255,255,255,.82),rgba(255,255,255,.64));
  --schatten:0 24px 48px -30px rgba(96,56,78,.45),0 1px 0 rgba(255,255,255,.9) inset;
  --flaeche:rgba(255,255,255,.93); --flaeche-formular:rgba(255,255,255,.95); --flaeche-dialog:rgba(255,255,255,.97); --flaeche-dicht:rgba(255,255,255,.86);
  --flaeche-dialog-blur:rgba(255,255,255,.9); --flaeche-tabbar:rgba(255,255,255,.74); --flaeche-dock:rgba(255,255,255,.78); --flaeche-schwebend:rgba(255,255,255,.96);
  --flaeche-zug:rgba(255,248,252,.96); --schleier:rgba(60,36,50,.32); --feld:rgba(255,255,255,.82); --feld-fokus:#FFFFFF;
  --autofill:#FFFFFF; --mini:#F2E3EC; --ava-a:#F7DDEC; --ava-b:#EADFD2;
  --glas-verlauf:linear-gradient(180deg,rgba(255,255,255,.74),rgba(255,255,255,.54));
  --lichtkante:linear-gradient(160deg,rgba(255,255,255,1),rgba(255,255,255,.5) 38%,rgba(58,36,50,.10) 62%,rgba(214,77,160,.35));
  --hintergrund:radial-gradient(48vmax 40vmax at 6% -6%,rgba(255,167,226,.55),transparent 62%),
    radial-gradient(40vmax 36vmax at 104% 4%,rgba(224,203,164,.6),transparent 60%),
    radial-gradient(60vmax 50vmax at 70% 112%,rgba(240,130,200,.35),transparent 62%),
    radial-gradient(30vmax 30vmax at 30% 70%,rgba(255,167,226,.18),transparent 70%);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:96px;color-scheme:dark;background:var(--grund)}
body{margin:0;min-height:100dvh;color:var(--text);font-family:'Overused Grotesk',system-ui,-apple-system,sans-serif;
  font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
/* Hintergrund: weiche Farbfelder plus feines Korn, steht fest, bewegt sich nicht */
body::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:var(--hintergrund)}
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.07;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
button,input,textarea,select{font:inherit;color:inherit}
a{color:inherit}
.i{width:1.25em;height:1.25em;flex:none;display:inline-block;vertical-align:-.22em}
.p{color:var(--akzent)}
.zahl{font-variant-numeric:tabular-nums}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;z-index:100;background:var(--pink);color:var(--auf-pink);font-weight:800;padding:10px 14px;border-radius:12px}
.skip:focus{left:8px}
:focus-visible{outline:3px solid var(--akzent);outline-offset:3px;border-radius:12px}

/* ---------- Glas mit Lichtkante: Verlaufsrand über eine Maske, ohne Blur deckend ---------- */
.glas,.leiste,.karte,.kachel,.band,.anm-form,.reiter,.hinweis-toast,.seitenmenue{position:relative;isolation:isolate;border-radius:var(--r);box-shadow:var(--schatten);
  background:var(--flaeche)}
.anm-form,.karte.formular{background:var(--flaeche-formular)}   /* ohne Blur: Formulare deckender */
.glas::before,.leiste::before,.karte::before,.kachel::before,.band::before,.anm-form::before,.reiter::before,.hinweis-toast::before,.seitenmenue::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;z-index:-1;
  background:var(--lichtkante);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .glas,.leiste,.karte,.kachel,.band,.anm-form,.reiter,.hinweis-toast,.seitenmenue{background:var(--glas-verlauf);
    -webkit-backdrop-filter:blur(var(--blur)) saturate(150%);backdrop-filter:blur(var(--blur)) saturate(150%)}
  /* Formulare und Meldungen deckender: Lesbarkeit geht vor */
  .anm-form,.karte.formular,.hinweis-toast{background:var(--flaeche-dicht)}
}
/* Listenzeilen: ruhige Glasfüllung ohne Blur */
.zeile-glas,.kern-liste li,.morgen li,.strecke li,.vorbei summary,.gabel-frage,.rollen-hilfe span{
  background:var(--zeile);box-shadow:inset 0 0 0 1px var(--kante)}

/* ---------- Leiste oben: schwebende Glas-Pille ---------- */
.leiste{position:sticky;top:calc(10px + var(--sicher-o));z-index:20;display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin:calc(10px + var(--sicher-o)) clamp(12px,3vw,24px) 0;padding:8px 8px 8px 12px;min-height:60px;border-radius:999px}
.leiste-l,.leiste-r{display:flex;align-items:center;gap:12px;min-width:0}
.marke{display:flex;align-items:center;gap:12px;text-decoration:none;min-height:44px;border-radius:999px;padding-right:6px}
.marke-t{font-family:'Queering',sans-serif;font-weight:900;font-size:22px;letter-spacing:.01em;display:flex;align-items:baseline;gap:10px;white-space:nowrap}
.marke-z{font-family:'Overused Grotesk',sans-serif;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--text-3)}
/* Das D!-Zeichen wie auf dem App-Symbol. In der Leiste und auf der Anmeldekarte dasselbe Element (Übergang beim Login) */
.dzeichen{display:inline-flex;align-items:center;justify-content:center;flex:none;width:40px;height:40px;border-radius:12px;background:#272727;color:var(--beige);
  box-shadow:inset 0 0 0 1px var(--kante),0 8px 20px -10px rgba(var(--s-rgb),.8);font-family:'Queering',sans-serif;font-weight:900;font-size:18px;
  letter-spacing:-.02em;line-height:1;view-transition-name:dmarke}
.dzeichen b{color:var(--pink);font-weight:900}
.zurueck{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px 0 12px;border-radius:999px;text-decoration:none;font-weight:700;
  background:var(--glas-2);box-shadow:inset 0 0 0 1px var(--kante);transition:background-color var(--t-2) var(--aus),transform var(--t-1) var(--aus)}
.zurueck:hover{background:var(--glas-3)}
.zurueck:active{transform:scale(.97)}
.uhr{font-variant-numeric:tabular-nums;font-weight:700;font-size:15px;color:var(--text-3)}
.ich{display:flex;align-items:center;gap:8px;font-weight:700;font-size:14px}
.raus{margin:0}
.knopf-leise{display:grid;place-items:center;width:44px;height:44px;border-radius:999px;border:0;background:transparent;color:var(--text-2);cursor:pointer;
  transition:background-color var(--t-2) var(--aus),transform var(--t-1) var(--aus)}
.knopf-leise:hover{background:var(--glas-2)}
.knopf-leise:active{transform:scale(.94)}
@media (max-width:520px){.ich-n,.marke-z{display:none}.marke-t{font-size:20px}.uhr{display:none}}

/* ---------- Seitenmenü (seit 16.10.2026) ----------
   Ab 1024 px fest links, die obere Leiste entfällt dort. Darunter Schublade über den Menü-Knopf in der Leiste. */
:root{--sm-breite:256px;--sm-platz:calc(var(--sm-breite) + 24px)}
.seitenmenue{position:fixed;z-index:50;top:calc(12px + var(--sicher-o));bottom:calc(12px + var(--sicher-u));left:12px;width:var(--sm-breite);
  display:flex;flex-direction:column;gap:6px;padding:14px 12px 12px;border-radius:var(--r-xl);overflow:hidden}
.sm-kopf{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:2px 4px 6px}
.sm-kopf .marke-t{font-size:20px}
.sm-kopf .dzeichen{view-transition-name:none}   /* das Zeichen in der Leiste fliegt beim Login, doppelte Namen brechen den Übergang ab */
.sm-kopf .uhr{margin-left:auto}
.sm-zu{display:none}
.sm-nav{display:flex;flex-direction:column;gap:2px;flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;margin:0 -4px;padding:0 4px}
.sm-gruppe{margin:16px 12px 6px;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)}
.sm-gruppe:first-child{margin-top:6px}
.sm-punkt{display:flex;align-items:center;gap:12px;min-height:46px;padding:0 10px 0 12px;border-radius:14px;text-decoration:none;font-weight:700;color:var(--text-2);
  -webkit-tap-highlight-color:transparent;transition:background-color var(--t-2) var(--aus),color var(--t-2) var(--aus),transform var(--t-1) var(--aus)}
@media (hover:hover){.sm-punkt:hover{background:var(--glas-2);color:var(--text)}}
.sm-punkt:active{transform:scale(.98)}
.sm-punkt[aria-current=page]{background:var(--glas-3);color:var(--text);box-shadow:inset 0 0 0 1px var(--kante)}
.sm-punkt[aria-current=page] .i{color:var(--akzent)}
.sm-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sm-n{min-width:24px;height:22px;padding:0 7px;border-radius:999px;display:grid;place-items:center;font-size:12px;font-weight:800;font-variant-numeric:tabular-nums;
  background:var(--glas-2);box-shadow:inset 0 0 0 1px var(--kante);color:var(--text-2)}
.sm-n.heiss{background:var(--pink);box-shadow:none;color:var(--auf-pink)}
.sm-fuss{display:grid;gap:2px;padding-top:10px;margin-top:6px;border-top:1px solid var(--kante)}
.sm-schalter{display:flex;align-items:center;gap:12px;min-height:44px;padding:0 10px 0 12px;border:0;border-radius:14px;background:transparent;color:var(--text-2);
  font-weight:700;cursor:pointer;text-align:left;transition:background-color var(--t-2) var(--aus),color var(--t-2) var(--aus)}
.sm-schalter > span:nth-of-type(1){flex:1}
@media (hover:hover){.sm-schalter:hover{background:var(--glas-2);color:var(--text)}}
.sm-kippe{position:relative;flex:none;width:40px;height:24px;border-radius:999px;background:var(--glas-3);box-shadow:inset 0 0 0 1.5px var(--kante-feld);transition:background-color var(--t-2) var(--aus)}
.sm-kippe::after{content:"";position:absolute;top:4px;left:4px;width:16px;height:16px;border-radius:50%;background:var(--text-2);transition:transform var(--t-2) var(--aus),background-color var(--t-2) var(--aus)}
.sm-schalter[aria-pressed=true] .sm-kippe{background:var(--pink);box-shadow:none}
.sm-schalter[aria-pressed=true] .sm-kippe::after{transform:translateX(16px);background:var(--auf-pink)}
.sm-ich{display:flex;align-items:center;gap:10px;padding:8px 0 0 8px}
.sm-ich-t{flex:1;display:grid;line-height:1.25;min-width:0}
.sm-ich-t small{color:var(--text-3);font-size:12px;font-weight:600}
.menue-knopf{display:none}
.sm-schleier{position:fixed;inset:0;z-index:45;background:var(--schleier);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.sm-schleier[hidden]{display:none}
@media (min-width:1024px){
  .mit-menue body{padding-left:var(--sm-platz)}
  .mit-menue .leiste,.mit-menue .tabbar,.sm-schleier{display:none!important}
  .mit-menue .sm-kopf .dzeichen{view-transition-name:dmarke}   /* Leiste ist hier ausgeblendet, das Menü-Zeichen übernimmt */
  .mit-menue .fuss-leiste{left:var(--sm-platz)}
  .mit-menue .dp-dock,.mit-menue .hinweis-toast{left:calc(50% + var(--sm-platz) / 2)}
}
@media (max-width:1023.98px){
  .mit-menue .menue-knopf{display:grid}
  .seitenmenue{visibility:hidden;transform:translateX(calc(-100% - 24px));transition:transform var(--t-2) var(--aus),visibility 0s linear var(--t-2)}
  .menue-offen .seitenmenue{visibility:visible;transform:none;transition:transform var(--t-2) var(--aus),visibility 0s}
  .sm-zu{display:grid}
  .sm-kopf .uhr{display:none}
  .sm-schleier{opacity:0;transition:opacity var(--t-2) var(--aus)}
  .menue-offen .sm-schleier{opacity:1}
}

/* ---------- Bühne ---------- */
.buehne{max-width:1120px;margin:0 auto;padding:clamp(20px,3.5vw,36px) clamp(16px,4vw,32px) calc(120px + var(--sicher-u))}
.umgebung{display:inline-flex;gap:8px;align-items:center;border-radius:999px;padding:6px 14px;font-size:13px;font-weight:700;margin-bottom:16px;
  background:rgba(var(--g-rgb),.14);box-shadow:inset 0 0 0 1px rgba(var(--g-rgb),.5);color:var(--gold-schrift)}
.rollenwahl{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 18px;font-size:13px;font-weight:700}
.rollenwahl span{color:var(--text-3);margin-right:4px}
.rollenwahl button{font:inherit;cursor:pointer;border:0;border-radius:999px;padding:8px 14px;min-height:36px;color:var(--text-2);
  background:rgba(var(--p-rgb),.08);box-shadow:inset 0 0 0 1px rgba(var(--p-rgb),.35)}
.rollenwahl button[aria-pressed="true"]{background:var(--akzent);color:var(--auf-pink);box-shadow:none}
.rollenwahl-mappe{margin-left:auto;color:var(--text-2);text-decoration:underline;text-underline-offset:3px;padding:8px 4px}   /* Meeting-Mappe auf derselben Vorschau-Adresse (Caddy /mappe/) */
.rollenwahl button:focus-visible{outline:2px solid var(--akzent);outline-offset:2px}
.meldung{display:flex;gap:10px;align-items:center;border-radius:var(--r-m);padding:14px 16px;font-weight:700;margin-bottom:18px;
  background:rgba(var(--p-rgb),.10);box-shadow:inset 0 0 0 1px rgba(var(--p-rgb),.42);color:var(--pink-schrift)}
.meldung .i{color:var(--akzent)}
.kick{margin:0 0 6px;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3)}
h1.gross,h1.mittel,.merksatz,.k-titel,.k-zahl,.band-t,.st-n,.gast-zeit,.zaehler,.tag-heute,.log-zeit{font-family:'Queering',sans-serif;font-weight:900;text-transform:uppercase;letter-spacing:.005em}
h1.gross{font-size:clamp(46px,9vw,92px);line-height:.88;margin:0;text-wrap:balance}
h1.mittel{font-size:clamp(34px,6vw,56px);line-height:.9;margin:0;text-wrap:balance}
h2.ab{font-family:'Queering',sans-serif;font-weight:900;text-transform:uppercase;font-size:20px;letter-spacing:.01em;margin:36px 0 14px;display:flex;align-items:center;gap:10px}
h2.ab .n,.vorbei summary .n{font-family:'Overused Grotesk',sans-serif;font-size:13px;font-weight:800;min-width:28px;text-align:center;border-radius:999px;padding:2px 10px;
  background:rgba(var(--p-rgb),.12);box-shadow:inset 0 0 0 1px rgba(var(--p-rgb),.42);color:var(--pink-schrift)}
.leise{color:var(--text-2)}
.klein{font-size:14px}
.leise.klein{color:var(--text-3)}
.hallo{margin:6px 0 22px}

/* ---------- Knöpfe: Druck-Rückmeldung per Übergang, unterbrechbar ---------- */
.knopf{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 24px;border-radius:999px;border:0;
  background:var(--pink);color:var(--auf-pink);font-weight:800;font-size:16px;text-decoration:none;cursor:pointer;touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  transition:transform var(--t-1) var(--aus),background-color var(--t-2) var(--aus),box-shadow var(--t-2) var(--aus),opacity var(--t-2) var(--aus)}
@media (hover:hover){.knopf:hover{background:var(--pink-2);box-shadow:0 10px 30px -12px rgba(var(--p-rgb),.7)}}
.knopf:active{transform:scale(.97)}
.knopf.gross{min-height:60px;font-size:17px;padding:0 28px}
.knopf.breit{width:100%}
.knopf.pink{box-shadow:0 12px 32px -16px rgba(var(--p-rgb),.85)}
.knopf.hell{background:var(--glas-2);color:var(--text);box-shadow:inset 0 0 0 1px var(--kante)}
.knopf.dunkel{background:rgba(var(--w-rgb),.14);color:var(--text);box-shadow:inset 0 0 0 1px var(--kante-2)}
@media (hover:hover){.knopf.hell:hover,.knopf.dunkel:hover{background:var(--glas-3);box-shadow:inset 0 0 0 1px var(--kante-2)}}
.knopf[disabled],.knopf[aria-disabled=true]{opacity:.45;cursor:not-allowed;transform:none}
.knopf[aria-busy=true]{cursor:progress}
.knopf-reihe{display:flex;gap:12px;flex-wrap:wrap;margin-top:14px}
.knopf-reihe form{margin:0}

/* ---------- Avatare, Ring ---------- */
.ava{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--pink);color:var(--auf-pink);font-weight:800;font-size:13px;letter-spacing:.02em;flex:none}
.ava.gross{width:46px;height:46px;font-size:15px}
.ava.klein{width:26px;height:26px;font-size:10px}
.leute{display:flex;align-items:center;gap:0;margin-top:10px;flex-wrap:wrap}
.leute .ava+.ava{margin-left:-10px;box-shadow:0 0 0 3px var(--grund-2)}
.leute-t{margin-left:12px;font-weight:700}
.ring{position:relative;display:grid;place-items:center;width:92px;aspect-ratio:1;flex:none;--spur:rgba(var(--w-rgb),.12);--fuell:var(--pink-linie);
  transition:--anteil .9s var(--aus-stark)}
.ring::before{content:"";position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(var(--fuell) calc(var(--anteil)*1%),var(--spur) 0);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 10px),#000 calc(100% - 9px));mask:radial-gradient(farthest-side,transparent calc(100% - 10px),#000 calc(100% - 9px))}
.ring b{font-family:'Queering',sans-serif;font-size:30px;line-height:1;font-variant-numeric:tabular-nums;transform:translateY(-4px)}
.ring small{position:absolute;bottom:22px;font-size:12px;font-weight:700;color:var(--text-3)}

/* ---------- Schicht-Band ---------- */
.band{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;border-radius:var(--r-xl);padding:22px clamp(18px,3vw,28px);overflow:hidden}
.band::after{content:"";position:absolute;right:-90px;top:-90px;width:280px;height:280px;border-radius:50%;z-index:-1;
  background:radial-gradient(closest-side,rgba(var(--p-rgb),.26),transparent 70%);pointer-events:none}
.band form{margin:0}
.band-kick{margin:0;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--akzent-2)}
.band-t{margin:6px 0 0;font-size:30px;line-height:.95}
.ring-link{display:flex;align-items:center;gap:16px;text-decoration:none;min-height:44px;border-radius:999px}
.ring-t{display:flex;align-items:center;gap:6px;font-weight:800}

/* ---------- Kacheln ---------- */
.kacheln{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:16px}
@media (min-width:760px){.kacheln{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}}
.kachel{display:flex;flex-direction:column;gap:6px;min-height:168px;padding:20px;text-decoration:none;-webkit-tap-highlight-color:transparent;
  transition:transform var(--t-2) var(--aus),box-shadow var(--t-2) var(--aus)}
.kachel:active{transform:scale(.98)}
@media (hover:hover){.kachel:hover{transform:translateY(-2px);box-shadow:var(--schatten),0 18px 40px -22px rgba(var(--s-rgb),.9),inset 0 0 0 1px rgba(var(--w-rgb),.08)}}
.k-icon{display:grid;place-items:center;width:52px;height:52px;border-radius:16px;background:var(--glas-2);box-shadow:inset 0 0 0 1px var(--kante);margin-bottom:auto}
.k-icon .i{width:26px;height:26px}
.k-icon.gross{width:76px;height:76px;border-radius:22px;background:rgba(var(--p-rgb),.12);box-shadow:inset 0 0 0 1px rgba(var(--p-rgb),.42);color:var(--pink-schrift)}
.k-icon.gross .i{width:36px;height:36px}
.kachel.heiss{background:linear-gradient(180deg,rgba(var(--p-rgb),.10),rgba(var(--p-rgb),.05))}
.kachel.heiss .k-icon{background:var(--pink);color:var(--auf-pink);box-shadow:0 10px 24px -12px rgba(var(--p-rgb),.9)}
.k-titel{font-size:22px;line-height:.95;margin-top:16px}
.k-zahl{font-size:42px;line-height:.9}
.k-zahl small{font-family:'Overused Grotesk',sans-serif;font-size:14px;font-weight:700;text-transform:none;color:var(--text-3);margin-left:4px}
.k-sub{font-size:14px;color:var(--text-2);font-weight:600}
.kacheln.verwaltung .kachel{min-height:140px}
.bald-zeile{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px;margin:16px 4px 0;font-weight:700;color:var(--text-2)}
.bald-zeile .kick{margin:0 4px 0 0}
.bald-zeile a{color:var(--text-2);text-underline-offset:3px;min-height:32px;display:inline-flex;align-items:center}
@media (hover:hover){.bald-zeile a:hover{color:var(--text)}}
.kachel.dunkel{background:linear-gradient(180deg,rgba(var(--g-rgb),.14),rgba(var(--g-rgb),.06))}
.kachel.dunkel .k-icon{background:var(--gold);color:#1B1408}
.kachel.dunkel .k-sub{color:var(--text-2)}

/* ---------- Worauf es ankommt ---------- */
.kern{margin-top:10px}
.merksatz{font-size:clamp(26px,4.4vw,40px);line-height:.95;margin:0 0 18px;max-width:20ch;text-wrap:balance}
.merksatz.gross{font-size:clamp(32px,6vw,58px);max-width:16ch;margin:6px 0 10px}
.kern-liste{list-style:none;margin:0;padding:0;display:grid;gap:10px}
@media (min-width:760px){.kern-liste{grid-template-columns:repeat(3,1fr)}}
.kern-liste li{display:flex;gap:14px;align-items:center;border-radius:var(--r-m);padding:16px 18px;font-weight:700;font-size:17px;line-height:1.3}
.kern-liste .i{width:40px;height:40px;padding:9px;border-radius:12px;background:rgba(var(--p-rgb),.12);color:var(--pink-schrift)}

/* ---------- Checkliste: häufigster Handgriff, also schnell und ohne Einstieg ---------- */
.liste-kopf{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:10px}
.hinweis{display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap;border-radius:var(--r-m);padding:14px 16px;font-weight:700;margin:14px 0;
  background:rgba(var(--p-rgb),.10);box-shadow:inset 0 0 0 1px rgba(var(--p-rgb),.42)}
.hinweis form{margin:0}
.punkte{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.punkt{width:100%;display:flex;align-items:center;gap:16px;min-height:68px;padding:12px 18px 12px 14px;border:0;border-radius:var(--r-m);text-align:left;cursor:pointer;color:var(--text);
  background:linear-gradient(180deg,rgba(var(--p-rgb),.11),rgba(var(--p-rgb),.05));box-shadow:inset 0 0 0 1.5px rgba(var(--p-rgb),.5);
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
  transition:transform var(--t-1) var(--aus),background-color var(--t-1) var(--aus),box-shadow var(--t-1) var(--aus)}
.punkt:active{transform:scale(.985)}
.punkt[disabled]{cursor:not-allowed}
.kreis{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;box-shadow:inset 0 0 0 2.5px var(--pink-linie);flex:none;color:transparent;
  transition:background-color var(--t-1) var(--aus),box-shadow var(--t-1) var(--aus),color var(--t-1) var(--aus)}
.kreis .i{width:20px;height:20px}
.punkt-t{flex:1;font-weight:700;font-size:17px;line-height:1.3}
.punkt-tage{font-size:12px;font-weight:700;letter-spacing:.02em;color:var(--text-3);white-space:nowrap}
.wer{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--text-3);font-variant-numeric:tabular-nums;white-space:nowrap}
.punkt.fertig{background:var(--zeile);box-shadow:inset 0 0 0 1px var(--kante)}
.punkt.fertig .kreis{background:var(--pink);box-shadow:none;color:var(--auf-pink)}
.punkt.fertig .punkt-t{color:var(--text-2)}
.punkt.blitz{animation:blitz 900ms var(--aus)}
@keyframes blitz{0%{box-shadow:inset 0 0 0 1px var(--kante),0 0 0 0 rgba(var(--p-rgb),.75)}100%{box-shadow:inset 0 0 0 1px var(--kante),0 0 0 16px rgba(var(--p-rgb),0)}}
.fuss-leiste{position:fixed;left:0;right:0;bottom:0;z-index:15;padding:20px clamp(16px,4vw,32px) calc(14px + var(--sicher-u));
  background:linear-gradient(to top,rgba(var(--grund-rgb),.96) 55%,rgba(var(--grund-rgb),0));display:flex;justify-content:center}
.fuss-leiste .knopf{max-width:560px}

/* ---------- Karten ---------- */
.karte{padding:20px;margin:14px 0}
.karte-kopf{display:flex;gap:10px;align-items:center;margin:0 0 6px;font-weight:800;font-size:18px}
.karte.warn{background:linear-gradient(180deg,rgba(var(--warn-rgb),.10),rgba(var(--warn-rgb),.05))}
.karte.warn .karte-kopf{color:var(--warn)}
.karte.gut{background:linear-gradient(180deg,rgba(var(--ok-rgb),.10),rgba(var(--ok-rgb),.05))}
.karte.gut .karte-kopf{color:var(--ok)}
.karte.dunkel{background:linear-gradient(180deg,rgba(var(--p-rgb),.10),rgba(var(--p-rgb),.05))}
.karte.dunkel .karte-kopf{color:var(--pink-schrift)}
.karte.pink{background:var(--pink);color:var(--auf-pink);-webkit-backdrop-filter:none;backdrop-filter:none}
.karte.pink .kick{color:rgba(42,16,34,.78)}
.karte p{margin:0}
.offen-liste{margin:8px 0 14px;padding-left:20px;font-weight:600}
.feld-t{display:block;font-weight:800;font-size:19px;margin-bottom:2px}

/* ---------- Felder ---------- */
/* :where hält die Grundregel leicht, damit Fokus, Fehlerzustand und Klassen (z. B. .pw input) sie überschreiben */
textarea,select,input:where(:not([type=hidden]):not([type=checkbox]):not([type=radio])){width:100%;border:0;border-radius:14px;color:var(--text);
  background:var(--feld);box-shadow:inset 0 0 0 1.5px var(--kante-feld);padding:14px 16px;font-size:17px;font-weight:500;line-height:1.45;min-height:52px;
  transition:box-shadow var(--t-2) var(--aus),background-color var(--t-2) var(--aus)}
textarea{resize:vertical;margin-top:10px}
::placeholder{color:rgba(var(--t-rgb),.55)}
textarea:focus,select:focus,input:focus{outline:none;background:var(--feld-fokus);box-shadow:inset 0 0 0 2px var(--pink-linie),0 0 0 4px rgba(var(--p-rgb),.22)}
input[aria-invalid=true]{box-shadow:inset 0 0 0 2px var(--bad)}
input[aria-invalid=true]:focus{box-shadow:inset 0 0 0 2px var(--bad),0 0 0 4px rgba(var(--bad-rgb),.22)}
/* Passwortmanager füllt sonst hell: dunkel halten */
input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus{-webkit-text-fill-color:var(--text);caret-color:var(--text);
  -webkit-box-shadow:inset 0 0 0 1.5px rgba(var(--p-rgb),.5),inset 0 0 0 100px var(--autofill);transition:background-color 9999s}
select{padding:0 14px;font-size:16px}
select option{background:var(--grund-2);color:var(--text)}
input[type=checkbox],input[type=radio]{accent-color:var(--akzent)}

/* ---------- Heute neu ---------- */
.zaehler{display:grid;place-items:center;min-width:76px;height:76px;padding:0 14px;border-radius:24px;background:var(--pink);color:var(--auf-pink);font-size:44px;line-height:1;
  box-shadow:0 14px 30px -16px rgba(var(--p-rgb),.9)}
.gaeste{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:12px}
@media (min-width:900px){.gaeste{grid-template-columns:1fr 1fr}}
.gast{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:16px;align-items:start;border-radius:var(--r);padding:18px;
  background:linear-gradient(180deg,rgba(var(--p-rgb),.08),rgba(var(--p-rgb),.035));box-shadow:inset 0 0 0 1.5px rgba(var(--p-rgb),.5);
  transition:opacity var(--t-2) var(--aus),box-shadow var(--t-2) var(--aus),background-color var(--t-2) var(--aus)}
.gast.zweiter{background:linear-gradient(180deg,rgba(var(--g-rgb),.12),rgba(var(--g-rgb),.05));box-shadow:inset 0 0 0 1.5px rgba(var(--g-rgb),.6)}
.gast.fertig{background:var(--zeile);box-shadow:inset 0 0 0 1px var(--kante);opacity:.66}
.gast-mitte{min-width:0}
.gast-zeit b{display:block;font-size:30px;line-height:1;font-variant-numeric:tabular-nums}
.gast-name{margin:0;font-weight:800;font-size:20px;line-height:1.2;overflow-wrap:anywhere}
.gast-kurs{margin:4px 0 8px;display:flex;gap:6px;align-items:center;color:var(--text-2);font-weight:600;overflow-wrap:anywhere}
.gast-kurs .i{width:16px;height:16px}
.marke-tag{display:inline-flex;align-items:center;min-height:26px;margin:0;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:0 10px;border-radius:999px;
  background:rgba(var(--p-rgb),.12);box-shadow:inset 0 0 0 1px rgba(var(--p-rgb),.42);color:var(--pink-schrift)}
.marke-tag.wp2{background:rgba(var(--g-rgb),.14);box-shadow:inset 0 0 0 1px rgba(var(--g-rgb),.5);color:var(--gold-schrift)}
.marke-tag.usc{background:rgba(var(--blau-rgb),.14);box-shadow:inset 0 0 0 1px rgba(var(--blau-rgb),.42);color:var(--blau-schrift)}
.aufgaben{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.aufgaben li{font-size:13px;font-weight:700;padding:4px 9px;border-radius:8px;background:rgba(var(--w-rgb),.07)}
.aufgaben li::before{content:"/ ";color:var(--akzent)}
.abhaken{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:76px;min-height:76px;padding:6px;border:0;background:transparent;cursor:pointer;
  font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--text-2);touch-action:manipulation;border-radius:var(--r-m)}
.abhaken .kreis{width:48px;height:48px}
.abhaken .kreis .i{width:24px;height:24px}
.abhaken[aria-pressed=true] .kreis{background:var(--ok-fuell);box-shadow:none;color:#0E2416}
.morgen{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:8px}
.morgen li{display:flex;gap:12px;align-items:center;flex-wrap:wrap;border-radius:14px;padding:12px 16px}
.morgen b{font-variant-numeric:tabular-nums;min-width:48px}
@media (max-width:520px){
  .gast{gap:10px;padding:14px 12px 14px 14px}
  .gast-zeit b{font-size:22px}
  .gast-name{font-size:18px}
  .gast-kurs{font-size:14px;margin:2px 0 6px}
  .abhaken{min-width:56px;padding:0}
  .abhaken .kreis{width:44px;height:44px}
  .abhaken-t{font-size:10px}
  .zaehler{min-width:60px;height:60px;font-size:34px;border-radius:18px}
}
/* Schon durch: eingeklappt */
.vorbei{margin-top:22px}
.vorbei summary{display:flex;align-items:center;gap:10px;cursor:pointer;min-height:52px;padding:0 16px;border-radius:var(--r-m);
  font-family:'Queering',sans-serif;font-weight:900;text-transform:uppercase;font-size:18px;list-style:none}
.vorbei summary::-webkit-details-marker{display:none}
.vorbei summary::after{content:"+";margin-left:auto;font-size:24px}
.vorbei[open] summary::after{content:"\2212"}
.vorbei summary .leise{font-family:'Overused Grotesk',sans-serif;text-transform:none;font-weight:600}

/* ---------- So läuft's ---------- */
.strecke{list-style:none;margin:0;padding:0;display:grid;gap:10px;counter-reset:s}
@media (min-width:900px){.strecke{grid-template-columns:repeat(6,1fr);gap:8px}}
.strecke li{position:relative;display:grid;grid-template-columns:auto auto 1fr;grid-template-rows:auto auto;column-gap:14px;align-items:center;border-radius:var(--r-m);padding:14px 16px}
.strecke li b{font-weight:800;font-size:17px;grid-column:3}
.strecke li > span:last-child{grid-column:3;font-size:14px;color:var(--text-2);line-height:1.3}
.st-n{font-size:22px;color:var(--text-3);grid-row:1 / span 2}
.st-i{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:var(--glas-2);grid-row:1 / span 2}
@media (min-width:900px){
  .strecke li{grid-template-columns:1fr;grid-template-rows:auto;row-gap:8px;padding:18px 14px;align-content:start}
  .strecke li b,.strecke li > span:last-child,.st-n,.st-i{grid-column:1;grid-row:auto}
  .strecke li:not(:last-child)::after{content:"";position:absolute;right:-9px;top:50%;width:10px;height:2px;background:var(--pink);z-index:1}
}
.strecke li.heiss{background:var(--pink);color:var(--auf-pink);box-shadow:0 14px 30px -18px rgba(var(--p-rgb),.9)}
.strecke li.heiss .st-i{background:rgba(255,255,255,.45)}
.strecke li.heiss .st-n,.strecke li.heiss > span:last-child{color:var(--auf-pink)}
.strecke li.ziel{background:linear-gradient(180deg,rgba(var(--g-rgb),.26),rgba(var(--g-rgb),.12));box-shadow:inset 0 0 0 1.5px rgba(var(--g-rgb),.6)}
.strecke li.ziel .st-i{background:var(--gold);color:#1B1408}
.strecke li.ziel .st-n{color:var(--gold-schrift-2)}
.drei,.zwei{display:grid;gap:12px}
@media (min-width:760px){.drei{grid-template-columns:repeat(3,1fr)}.zwei{grid-template-columns:1fr 1fr}}
.drei .karte,.zwei .karte{margin:0}
.drei .st-n{display:block;margin-bottom:10px}
.karte.dunkel .st-n{color:var(--akzent)}
.gabel{display:grid;gap:12px;justify-items:center;text-align:center}
.gabel-frage{display:inline-flex;gap:10px;align-items:center;border-radius:999px;padding:14px 24px;font-size:19px}
.gabel-wege{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%}
.gabel-wege .karte{margin:0;text-align:left}
.haken-liste{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:8px;font-weight:700}
.haken-liste li::before{content:"/ ";color:var(--akzent);font-weight:900}

/* ---------- Leerstelle ---------- */
.leerstelle{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;padding:48px 10px}
.leerstelle .leise{max-width:40ch;margin:0}

/* ---------- Verwaltung ---------- */
.reiter{display:inline-flex;gap:2px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding:4px;margin:6px 0 20px;border-radius:999px;max-width:100%}
.reiter::-webkit-scrollbar{display:none}
.reiter a{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:999px;font-weight:700;text-decoration:none;color:var(--text-2);
  transition:background-color var(--t-2) var(--aus),color var(--t-2) var(--aus)}
@media (hover:hover){.reiter a:hover{color:var(--text);background:var(--glas)}}
.reiter a.on{color:var(--text);background:var(--glas-3);box-shadow:inset 0 0 0 1px var(--kante)}
.reiter a{white-space:nowrap}
.reiter a:focus-visible{outline-offset:-3px;border-radius:999px}
@media (max-width:520px){.reiter a{padding:0 13px;font-size:15px}}
.tag-wahl{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:6px}
.tag-wahl .knopf{min-height:48px;min-width:48px;padding:0 16px}
.tag-heute{font-size:26px;padding:0 6px}
.chip-s{display:inline-flex;align-items:center;gap:6px;min-height:28px;font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:0 10px;border-radius:999px;white-space:nowrap}
.chip-s.gruen{background:rgba(var(--ok-rgb),.10);box-shadow:inset 0 0 0 1px rgba(var(--ok-rgb),.42);color:var(--ok)}
.chip-s.gelb{background:rgba(var(--warn-rgb),.10);box-shadow:inset 0 0 0 1px rgba(var(--warn-rgb),.42);color:var(--warn)}
.chip-s.rot{background:rgba(var(--bad-rgb),.08);box-shadow:inset 0 0 0 1px rgba(var(--bad-rgb),.42);color:var(--bad)}
.ring.klein{width:64px}
.ring.klein::before{-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 7px),#000 calc(100% - 6px));mask:radial-gradient(farthest-side,transparent calc(100% - 7px),#000 calc(100% - 6px))}
.ring.klein b{font-size:20px;transform:translateY(-3px)}
.ring.klein small{bottom:13px;font-size:10px}
.log-karte.vorfall{box-shadow:var(--schatten),inset 0 0 0 1.5px rgba(var(--bad-rgb),.6)}
.log-kopf{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;flex-wrap:wrap}
.log-zeit{font-size:28px;line-height:1;margin:2px 0 0!important}
.log-status{display:flex;align-items:center;gap:12px}
.meldung-box{border-radius:14px;padding:14px 16px;margin-top:14px;background:rgba(var(--bad-rgb),.07);box-shadow:inset 0 0 0 1px rgba(var(--bad-rgb),.38)}
.meldung-box .karte-kopf{color:var(--bad)}
.vorzeilen{white-space:pre-line;font-weight:600}
.log-details{margin-top:12px}
.log-details summary{cursor:pointer;font-weight:800;min-height:44px;display:flex;align-items:center;border-radius:12px}
details.karte>summary.karte-kopf{cursor:pointer;min-height:44px;display:flex;align-items:center;margin:0}
.log-punkte{list-style:none;margin:6px 0 12px;padding:0;display:grid;gap:6px}
.log-punkte li{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;font-weight:600}
.log-punkte li.nein{color:var(--text-3)}
.kreis.klein{width:24px;height:24px;box-shadow:inset 0 0 0 2px var(--pink-linie)}
.kreis.klein .i{width:14px;height:14px}
.log-punkte li.ja .kreis{background:var(--pink);box-shadow:none;color:var(--auf-pink)}
.log-punkte li.nein .kreis{box-shadow:inset 0 0 0 2px rgba(var(--w-rgb),.22)}
.formular{display:grid;gap:12px}
.formular label{display:grid;gap:6px;font-weight:800;font-size:14px}
.formular label.zeile{display:flex;align-items:center;gap:10px;font-weight:600}
.formular label.zeile input{width:22px;height:22px;min-height:0;flex:none}
.formular .knopf{justify-self:start}
.spalten{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.rollen-hilfe{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:6px}
.rollen-hilfe span{border-radius:999px;padding:6px 12px;font-size:13px;color:var(--text-2)}
.rollen-hilfe b{color:var(--text)}
.nutzer-liste{list-style:none;margin:0;padding:0;display:grid;gap:12px}
@media (min-width:900px){.nutzer-liste{grid-template-columns:1fr 1fr}}
.nutzer-liste .karte{margin:0;display:grid;gap:10px}
.nutzer-liste .karte.aus{opacity:.62}
.nutzer-kopf{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center}
.nutzer-kopf .leise{overflow-wrap:anywhere}
.nutzer-name{font-weight:800;font-size:18px;margin:0}
.nutzer-form{display:grid;grid-template-columns:1fr 1fr auto;gap:8px}
@media (max-width:620px){.nutzer-form{grid-template-columns:1fr}.nutzer-kopf{grid-template-columns:auto minmax(0,1fr)}.nutzer-kopf .chip-s{grid-column:2;justify-self:start}}

/* ---------- Anmeldung, Passwort, Offline (seit 08.11.2026, Mobbin-Vorlage Epidemic Sound): geteilte Fläche ----------
   Links das Formular flach auf ruhigem Grund mit Pink-Schein, rechts der große Saal (Spiegel mit pinkem Licht) mit dunklem
   Verlauf und der Headline. Handy und Tablet hochkant: Bild als Band oben, Formular darunter. Lesbarkeit: Text steht nie
   direkt auf hellen Bildstellen, der Verlauf unter der Headline ist deckend genug (gemessen am hellsten Boden-Pixel). */
.t-login .buehne{max-width:none;padding:0;min-height:100dvh}
.anmeldung{display:grid;min-height:100dvh;grid-template-columns:1fr;grid-template-rows:auto 1fr}
.anm-seite{order:2;display:grid;grid-template-rows:auto 1fr auto;gap:28px;min-width:0;
  padding:28px clamp(20px,5vw,56px) calc(28px + var(--sicher-u));
  background:radial-gradient(60vmax 40vmax at -10% -10%,rgba(var(--p-rgb),.16),transparent 60%),
    radial-gradient(50vmax 40vmax at 110% 110%,rgba(var(--g-rgb),.14),transparent 62%),var(--grund)}
.anm-marke{margin:0;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.anm-marke-n{font-family:'Queering',sans-serif;font-weight:900;font-size:20px;text-transform:uppercase;letter-spacing:.01em}
.anm-marke-z{font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--text-3)}
.anm-mitte{align-self:center;justify-self:center;width:100%;max-width:400px}
.anm-mitte .meldung{margin-bottom:22px}
.anm-fuss{margin:0;font-size:13px;line-height:1.5;color:var(--text-3)}
.anm-fuss a{color:var(--text-2);text-underline-offset:3px}

.anmeldung .anm-form{display:grid;gap:6px;padding:0;border-radius:0;background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;
  view-transition-name:anm-karte}
.anmeldung .anm-form::before{display:none}
.anm-form .dzeichen{width:56px;height:56px;border-radius:16px;font-size:25px;margin-bottom:18px}
.anm-titel{font-family:'Queering',sans-serif;font-weight:900;text-transform:uppercase;font-size:clamp(30px,4vw,38px);line-height:.95;margin:0}
.anm-unter{margin:8px 0 14px;color:var(--text-2);font-size:16px;line-height:1.45}
.anm-form label{font-weight:800;font-size:14px;margin-top:12px}
.anm-zeile{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:12px}
.anm-zeile label{margin-top:0}
.anm-zeile a{font-size:14px;font-weight:700;color:var(--akzent-2);text-underline-offset:3px;padding:6px 0}
.anm-form .knopf{margin-top:22px}
.anm-feststell{margin:6px 0 0;font-size:14px;font-weight:700;color:var(--warn)}
.anm-regel{margin:6px 0 0;font-size:14px;line-height:1.45;color:var(--text-3)}
.anm-zurueck{text-align:center;margin:14px 0 0;font-size:15px}
.anm-form a:not(.knopf){color:var(--text);font-weight:700;text-underline-offset:3px}
.anm-zeile a:not(.knopf){color:var(--akzent-2)}

.anm-bild{order:1;position:relative;overflow:hidden;min-height:clamp(220px,38vh,360px);background:#1a1719;isolation:isolate}
.anm-bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 55%;z-index:-2;
  filter:saturate(.85) contrast(1.08) brightness(.8)}
/* Pink-Schein über dem Saal (greift das Spiegellicht auf), dazu dunkler Verlauf unter der Headline */
.anm-bild::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(16,15,14,.55) 0%,rgba(16,15,14,.15) 34%,rgba(16,15,14,.72) 72%,rgba(16,15,14,.94) 100%),
    radial-gradient(60% 50% at 76% 46%,rgba(255,167,226,.26),transparent 70%),
    linear-gradient(90deg,rgba(180,36,127,.18),rgba(178,146,97,.06))}
.anm-kopf{position:absolute;left:0;right:0;bottom:0;padding:24px clamp(20px,5vw,56px) 22px;color:#F6F5F1}
.anm-kopf .kick{color:var(--pink-2);margin-bottom:10px}
.anm-kopf h1.gross{font-size:clamp(46px,13vw,76px);color:#F6F5F1;text-shadow:0 2px 30px rgba(0,0,0,.35)}
.anm-kopf .p{color:var(--pink)}
.anm-satz{margin:12px 0 0;font-size:17px;font-weight:600;color:rgba(246,245,241,.9);max-width:34ch}

/* Handy: Bild als flaches Band, damit „Anmelden“ ohne Scrollen sichtbar ist */
@media (max-width:899px){
  .anm-bild{min-height:clamp(180px,26vh,240px)}
  .anm-kopf{padding-bottom:16px}
  .anm-kopf h1.gross{font-size:clamp(40px,11vw,56px)}
  .anm-kopf .kick{margin-bottom:6px}
  .anm-satz,.anm-marke,.anm-form .dzeichen{display:none}
  .anm-seite{grid-template-rows:1fr auto;padding-top:24px;gap:20px}
  .anm-mitte{align-self:start}
  .anm-unter{margin:6px 0 4px}
}
@media (min-width:900px){
  .anmeldung{grid-template-columns:minmax(440px,36%) 1fr;grid-template-rows:none}
  .anm-seite{order:0;padding:calc(36px + var(--sicher-o)) clamp(36px,4vw,64px) 32px}
  .anm-bild{order:0;min-height:calc(100dvh - 24px);margin:12px 12px 12px 0;border-radius:var(--r-xl)}
  .anm-kopf{padding:0 clamp(36px,4vw,64px) clamp(36px,5vh,56px)}
  .anm-kopf h1.gross{font-size:clamp(84px,9vw,148px)}
  .anm-satz{font-size:20px}
}
/* Helles Glas: linke Fläche hell, das Bild bleibt dunkel (Headline steht immer auf Dunkel) */
:root[data-thema=hell] .anm-kopf .kick{color:#FFC6EC}
/* Fehler direkt am Feld, Text plus Symbol (nicht nur Farbe), kein Schütteln */
.feld-fehler{display:flex;gap:8px;align-items:flex-start;margin:8px 0 0;color:var(--bad);font-weight:700;font-size:15px;line-height:1.35}
.feld-fehler .i{margin-top:1px}
.fehler{display:flex;gap:10px;align-items:center;border-radius:14px;padding:12px 14px;font-weight:700;margin:0 0 6px;
  background:rgba(var(--bad-rgb),.08);box-shadow:inset 0 0 0 1px rgba(var(--bad-rgb),.42);color:var(--bad)}
.pw{position:relative}
.pw input{padding-right:58px}
.pw-zeigen{position:absolute;right:2px;top:50%;transform:translateY(-50%);width:48px;height:48px;border:0;background:transparent;border-radius:12px;cursor:pointer;color:var(--text-2);
  display:grid;place-items:center}
.pw-zeigen[aria-pressed=true]{color:var(--akzent)}

/* ---------- Kurzmeldung unten ---------- */
.hinweis-toast{position:fixed;left:50%;bottom:calc(96px + var(--sicher-u));transform:translateX(-50%);z-index:30;padding:12px 18px;border-radius:999px;font-weight:700;
  max-width:calc(100vw - 32px);animation:toast var(--t-3) var(--aus-stark) both}
@keyframes toast{from{opacity:0;transform:translate(-50%,12px)}to{opacity:1;transform:translate(-50%,0)}}

/* ---------- Bewegung ----------
   Einstieg nur beim Laden: Deckkraft, 8 px, Unschärfe 4 px, gestaffelt, gesamt unter 300 ms. Listen am Tresen (Checkliste,
   Gäste) kommen ohne Einstieg, die werden dutzendfach am Tag geöffnet. */
@keyframes rein{from{opacity:0;transform:translateY(8px);filter:blur(4px)}to{opacity:1;transform:none;filter:blur(0)}}
.hallo,.band,.kachel,.kern,.strecke li{animation:rein var(--t-4) var(--aus-stark) backwards;animation-delay:calc(var(--i,0) * 32ms)}
.band{--i:1}
.kacheln .kachel:nth-child(1){--i:2}.kacheln .kachel:nth-child(2){--i:3}.kacheln .kachel:nth-child(3){--i:4}
.kacheln .kachel:nth-child(4){--i:5}.kacheln .kachel:nth-child(5){--i:6}.kacheln .kachel:nth-child(n+6){--i:7}
.kern{--i:7}
.strecke li:nth-child(2){--i:1}.strecke li:nth-child(3){--i:2}.strecke li:nth-child(4){--i:3}.strecke li:nth-child(5){--i:4}.strecke li:nth-child(6){--i:5}
.meldung{animation:rein var(--t-3) var(--aus-stark) backwards}

/* Ankunft nach dem Login: Startseite kommt gestaffelt herein, während das D!-Zeichen in die Leiste gleitet.
   Läuft auch ohne View Transitions (Firefox) als normaler Einstieg. */
html.ankunft .hallo,html.ankunft .band,html.ankunft .kachel,html.ankunft .kern{animation-duration:var(--t-3);animation-delay:calc(160ms + var(--i,0) * 32ms)}

/* Übergang Login -> Start (nur diese beiden Seiten melden sich mit @view-transition an, siehe login.html und start.html).
   Gesamt etwa 700 ms: Karte zieht sich zusammen (240 ms), D!-Zeichen wächst kurz und setzt sich in die Leiste (420 ms). */
::view-transition-group(root){animation-duration:var(--t-3);animation-timing-function:var(--aus)}
::view-transition-old(root){animation:var(--t-2) var(--weg) both vt-aus}
::view-transition-new(root){animation:var(--t-3) var(--aus) 80ms both vt-ein}
::view-transition-old(anm-karte){animation:240ms var(--weg) both karte-zu}
::view-transition-new(anm-karte){animation:var(--t-3) var(--aus-stark) both karte-auf}
::view-transition-group(dmarke){animation-duration:420ms;animation-timing-function:var(--aus-stark)}
::view-transition-image-pair(dmarke){animation:420ms var(--aus) both wachsen}
@keyframes vt-aus{to{opacity:0}}
@keyframes vt-ein{from{opacity:0}}
@keyframes karte-zu{to{opacity:0;transform:scale(.92);filter:blur(6px)}}
@keyframes karte-auf{from{opacity:0;transform:scale(.96);filter:blur(4px)}}
@keyframes wachsen{0%{transform:scale(1)}38%{transform:scale(1.3)}100%{transform:scale(1)}}

/* Weniger Bewegung: alles sofort, Endzustände bleiben */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*),::view-transition-image-pair(*){animation:none!important}
}

/* =====================================================================================================================
   Dienstplan (seit 16.10.2026, Entwurf v2: docs/dienstplan/entwurf-v2/). Planer-Seite breiter, Welcomer-Seiten schmal.
   ===================================================================================================================== */
.t-plan .buehne{max-width:1480px}
.reiter-n{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;margin-left:6px;border-radius:999px;background:var(--pink);color:var(--auf-pink);font-size:12px;font-weight:800}
.knopf.klein{min-height:44px;padding:0 16px;font-size:14px;gap:8px}
.chip{display:inline-flex;align-items:center;gap:6px;min-height:26px;padding:0 10px;border-radius:999px;font-size:12.5px;font-weight:700;
  background:var(--glas-2);box-shadow:inset 0 0 0 1px var(--kante);color:var(--text-2);white-space:nowrap}
.chip .dot{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.chip.klein{min-height:20px;font-size:11.5px;padding:0 8px}
.chip.pink{background:rgba(var(--p-rgb),.12);box-shadow:inset 0 0 0 1px rgba(var(--p-rgb),.42);color:var(--pink-schrift)}
.chip.gold{background:rgba(var(--g-rgb),.14);box-shadow:inset 0 0 0 1px rgba(var(--g-rgb),.5);color:var(--gold-schrift)}
.chip.warn{background:rgba(var(--warn-rgb),.10);box-shadow:inset 0 0 0 1px rgba(var(--warn-rgb),.42);color:var(--warn)}
.chip.bad{background:rgba(var(--bad-rgb),.08);box-shadow:inset 0 0 0 1px rgba(var(--bad-rgb),.42);color:var(--bad)}
.chip.ok{background:rgba(var(--ok-rgb),.10);box-shadow:inset 0 0 0 1px rgba(var(--ok-rgb),.42);color:var(--ok)}

/* ---------- Welcomer-Seiten: schmal, mit Leiste unten ---------- */
.dp-app{max-width:640px;margin:0 auto}
.dp-app.breit{max-width:none}
.dp-app .liste-kopf{align-items:center}
.dp-hinweis{display:flex;gap:10px;align-items:center;border-radius:var(--r-m);padding:12px 14px;margin:0 0 14px;font-weight:700;font-size:15px;
  background:rgba(var(--warn-rgb),.10);box-shadow:inset 0 0 0 1px rgba(var(--warn-rgb),.42);color:var(--warn)}
.dp-wochenwahl{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.dp-app .dp-wochenwahl{flex-wrap:nowrap}
.dp-pfeil{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--glas-2);box-shadow:inset 0 0 0 1px var(--kante);
  text-decoration:none;color:var(--text);transition:transform var(--t-1) var(--aus),background-color var(--t-2) var(--aus)}
@media (hover:hover){.dp-pfeil:hover{background:var(--glas-3)}}
.dp-pfeil:active{transform:scale(.94)}

/* Wochenstreifen: Markierung gleitet über --tag, ohne JS-Messung */
.dp-streifen{position:relative;display:grid;grid-template-columns:repeat(7,1fr);padding:6px;border-radius:24px;margin-bottom:16px;
  background:var(--glas-verlauf);box-shadow:var(--schatten),inset 0 0 0 1px var(--kante)}
.dp-streifen-markierung{position:absolute;top:6px;bottom:6px;left:6px;width:calc((100% - 12px) / 7);border-radius:18px;background:var(--pink);
  transform:translateX(calc(var(--tag,0) * 100%));transition:transform var(--t-3) var(--aus-stark)}
.dp-streifen button{position:relative;z-index:1;border:0;background:transparent;min-height:64px;border-radius:18px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:2px;color:var(--text-2);cursor:pointer;transition:color var(--t-2) var(--aus);touch-action:manipulation}
.dp-streifen button small{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.dp-streifen button b{font-family:'Queering',sans-serif;font-weight:900;font-size:22px;line-height:1}
.dp-streifen button i{width:5px;height:5px;border-radius:50%;background:currentColor;opacity:0}
.dp-streifen button.hat i{opacity:.9}
.dp-streifen button.heute:not([aria-pressed=true]) small{color:var(--akzent-2)}
.dp-streifen button[aria-pressed=true]{color:var(--auf-pink)}
.dp-tagesbox{display:grid;touch-action:pan-y}
.dp-tagesinhalt > * + *{margin-top:12px}
@keyframes dp-rein-x{from{opacity:0;transform:translateX(calc(var(--r,1) * 20px));filter:blur(3px)}}
.dp-rein-x{animation:dp-rein-x var(--t-3) var(--aus-stark)}

.dp-held{padding:20px;border-radius:var(--r-xl);overflow:hidden;margin:0}
.dp-held::after{content:"";position:absolute;inset:-30% -30% auto auto;width:260px;height:260px;border-radius:50%;z-index:-1;pointer-events:none;
  background:radial-gradient(circle,rgba(var(--p-rgb),.26),transparent 70%)}
.dp-held-kick{color:var(--akzent-2)!important}
.dp-held-zeit{font-family:'Queering',sans-serif;font-weight:900;font-size:52px;line-height:.95;margin:8px 0 4px!important;font-variant-numeric:tabular-nums}
.dp-held-zeit small{display:block;font-size:22px;color:var(--text-2)}
.dp-infos{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0}
.dp-aktionen{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}
.dp-aktion{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:76px;border:0;border-radius:18px;cursor:pointer;color:var(--text);
  text-decoration:none;background:var(--glas-2);box-shadow:inset 0 0 0 1px var(--kante);font-weight:700;font-size:13.5px;touch-action:manipulation;
  transition:transform var(--t-1) var(--aus),background-color var(--t-2) var(--aus)}
.dp-aktion:active{transform:scale(.96)}
@media (hover:hover){.dp-aktion:hover{background:var(--glas-3)}}
.dp-aktion .i{width:22px;height:22px}
.dp-frei-tag{padding:22px;border-radius:var(--r-xl);text-align:center;color:var(--text-2);margin:0}
.dp-frei-tag b{display:block;font-family:'Queering',sans-serif;font-weight:900;font-size:30px;color:var(--text);text-transform:uppercase}

.dp-liste{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.dp-zeile{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 14px;border-radius:var(--r-m);background:var(--zeile);box-shadow:inset 0 0 0 1px var(--kante)}
.dp-zeile.kompakt{grid-template-columns:1fr}
.dp-zeile form{margin:0}
.dp-datum{text-align:center;border-radius:12px;padding:6px 0;background:rgba(var(--w-rgb),.07)}
.dp-datum small{display:block;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3)}
.dp-datum b{font-family:'Queering',sans-serif;font-weight:900;font-size:22px;line-height:1}
.dp-was{min-width:0}
.dp-was b{display:block;font-size:16px;overflow-wrap:anywhere}
.dp-was small{display:block;color:var(--text-2);font-size:13.5px;overflow-wrap:anywhere}
.dp-sperre{display:flex!important;gap:6px;align-items:center;color:var(--bad)!important;font-weight:700;margin-top:4px}
.dp-knopfpaar{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.dp-knopfpaar form{margin:0}
@media (max-width:520px){.dp-zeile:has(.dp-knopfpaar){grid-template-columns:56px minmax(0,1fr)}.dp-zeile .dp-knopfpaar{grid-column:1 / -1;justify-content:stretch}.dp-zeile .dp-knopfpaar > *{flex:1}.dp-zeile .dp-knopfpaar .knopf{width:100%}}
.dp-bewerben{min-width:124px}
.dp-bewerben .a,.dp-bewerben .b{display:inline-flex;align-items:center;gap:6px;transition:opacity var(--t-2) var(--aus),filter var(--t-2) var(--aus),transform var(--t-2) var(--aus)}
.dp-bewerben .b{position:absolute;opacity:0;filter:blur(4px);transform:translateY(6px)}
.dp-bewerben.ja{background:rgba(var(--ok-rgb),.16);color:var(--ok);box-shadow:inset 0 0 0 1px rgba(var(--ok-rgb),.5)}
.dp-bewerben.ja .a{opacity:0;filter:blur(4px);transform:translateY(-6px)}
.dp-bewerben.ja .b{opacity:1;filter:blur(0);transform:none}

.dp-stunden{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:16px 18px}
.dp-stunden small{display:block;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)}
.dp-stunden b{font-family:'Queering',sans-serif;font-weight:900;font-size:30px;font-variant-numeric:tabular-nums}
.dp-voll{grid-column:1 / -1}
.dp-balken{grid-column:1 / -1;height:8px;border-radius:99px;background:rgba(var(--w-rgb),.1);overflow:hidden}
.dp-balken i{display:block;height:100%;width:100%;transform-origin:left;transform:scaleX(var(--anteil,0));border-radius:inherit;
  background:linear-gradient(90deg,var(--gold),var(--pink));animation:dp-balken 900ms var(--aus-stark) backwards}
@keyframes dp-balken{from{transform:scaleX(0)}}

.dp-aufklapp{margin:14px 0}
.dp-aufklapp summary{cursor:pointer;font-weight:800;min-height:44px;display:flex;align-items:center;border-radius:12px}
.dp-aufklapp[open] summary{margin-bottom:10px}
.dp-schalter{display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.dp-fakten{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px;margin:0}
.dp-fakten div{padding:10px 12px;border-radius:var(--r-k);background:rgba(var(--w-rgb),.06)}
.dp-fakten dt{font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)}
.dp-fakten dd{margin:0;font-weight:700}
.dp-link{font-size:14px!important;font-family:ui-monospace,Menlo,monospace!important}

/* Leiste unten: gleitende Markierung über --tab */
.tabbar{position:fixed;left:50%;bottom:calc(10px + var(--sicher-u));transform:translateX(-50%);z-index:40;display:grid;grid-template-columns:repeat(4,1fr);
  width:min(528px,calc(100vw - 24px));padding:6px;border-radius:28px;isolation:isolate;
  background:var(--flaeche);box-shadow:var(--schatten),inset 0 0 0 1px var(--kante)}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .tabbar{background:var(--flaeche-tabbar);-webkit-backdrop-filter:blur(var(--blur)) saturate(150%);backdrop-filter:blur(var(--blur)) saturate(150%)}
}
.tab-markierung{position:absolute;top:6px;bottom:6px;left:6px;width:calc((100% - 12px) / 4);border-radius:22px;background:var(--glas-3);box-shadow:inset 0 0 0 1px var(--kante);
  transform:translateX(calc(var(--tab,0) * 100%));z-index:-1}
.tabbar a{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:56px;border-radius:22px;text-decoration:none;
  color:var(--text-3);font-size:12px;font-weight:700;transition:color var(--t-2) var(--aus)}
.tabbar a[aria-current=page]{color:var(--text)}
.tab-n{position:absolute;top:4px;left:calc(50% + 6px);min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--pink);color:var(--auf-pink);font-size:11px;display:grid;place-items:center}

/* ---------- Dialoge und Blätter ---------- */
.dp-dialog,.dp-blatt{border:0;padding:0;background:transparent;color:var(--text);max-width:min(640px,calc(100vw - 24px));width:100%;overflow:visible}
.dp-dialog::backdrop,.dp-blatt::backdrop{background:var(--schleier);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.dp-dialog .karte,.dp-blatt .karte{margin:0;background:var(--flaeche-dialog)}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.dp-dialog .karte,.dp-blatt .karte{background:var(--flaeche-dialog-blur)}}
.dp-dialog .karte{transform-origin:var(--ursprung,50% 50%);max-height:calc(100dvh - 32px);overflow:auto}
.dp-dialog[open] .karte{animation:dp-auf var(--t-3) var(--aus-stark) backwards}
.dp-dialog.zu .karte{animation:dp-ab 160ms var(--weg) both}
.dp-dialog[open]::backdrop,.dp-blatt[open]::backdrop{animation:dp-dimm var(--t-3) var(--aus) both}
.dp-dialog.zu::backdrop,.dp-blatt.zu::backdrop{animation:dp-dimm 160ms var(--weg) reverse both}
@keyframes dp-auf{from{opacity:0;transform:scale(.94);filter:blur(4px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes dp-ab{to{opacity:0;transform:scale(.98)}}
@keyframes dp-dimm{from{opacity:0}to{opacity:1}}
.dp-blatt{margin:auto auto 0;max-width:min(640px,100vw)}
.dp-blatt .karte{border-radius:28px 28px 0 0;padding:6px 18px calc(20px + var(--sicher-u));touch-action:pan-y;max-height:92dvh;overflow:auto}
.dp-blatt[open] .karte{animation:dp-hoch var(--t-4) var(--aus-stark) backwards}   /* backwards: sonst übersteuert transform:none das Wischen */
.dp-blatt.zu .karte{animation:dp-runter 200ms var(--weg) both}
@keyframes dp-hoch{from{transform:translateY(100%)}to{transform:none}}
@keyframes dp-runter{from{transform:translateY(var(--y,0px))}to{transform:translateY(100%)}}
.dp-griff{display:block;width:100%;height:44px;border:0;background:transparent;cursor:grab;position:relative}
.dp-griff::before{content:"";position:absolute;left:50%;top:14px;width:44px;height:5px;margin-left:-22px;border-radius:9px;background:rgba(var(--w-rgb),.35)}
.dp-blatt-t{font-family:'Queering',sans-serif;font-weight:900;text-transform:uppercase;font-size:26px;margin:0}
.dp-zwei{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.dp-dlg-kopf{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.dp-dlg-kopf h2{font-family:'Queering',sans-serif;font-weight:900;text-transform:uppercase;font-size:30px;line-height:.95;margin:0}
.dp-dlg-kopf p{margin:6px 0 0;font-weight:600}
.dp-zu{width:44px;height:44px;flex:none;border-radius:50%;border:0;box-shadow:inset 0 0 0 1px var(--kante);background:var(--glas-2);cursor:pointer;display:grid;place-items:center;color:var(--text)}
.dp-dlg-fuss{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:16px;flex-wrap:wrap}
.dp-fakten-reihe{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:14px 0}
.dp-fakt{padding:10px 12px;border-radius:var(--r-k);background:rgba(var(--w-rgb),.06)}
.dp-fakt small{display:block;color:var(--text-3);font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.dp-fakt b{font-size:18px;font-variant-numeric:tabular-nums}
.dp-segment{position:relative;display:flex;padding:4px;border-radius:999px;gap:2px;background:var(--glas);box-shadow:inset 0 0 0 1px var(--kante)}
.dp-segment button{position:relative;z-index:1;flex:1;min-height:44px;padding:0 12px;border-radius:999px;border:0;background:transparent;color:var(--text-2);font-weight:700;cursor:pointer;
  transition:color var(--t-2) var(--aus)}
.dp-segment button[aria-selected=true]{color:var(--text)}
.dp-segment-markierung{position:absolute;z-index:0;top:4px;bottom:4px;left:0;border-radius:999px;background:var(--glas-3);box-shadow:inset 0 0 0 1px var(--kante);
  transition:transform var(--t-3) var(--aus-stark),width var(--t-3) var(--aus-stark)}
.dp-kandidaten{display:grid;gap:6px;max-height:min(360px,42vh);overflow:auto;padding:2px 4px 2px 0;margin-top:10px}
.dp-kandidat{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px 10px;border-radius:var(--r-k);background:rgba(var(--w-rgb),.045)}
.dp-kandidat.drin{background:rgba(var(--ok-rgb),.07);box-shadow:inset 0 0 0 1px rgba(var(--ok-rgb),.3)}
.dp-kandidat small{display:block;color:var(--text-2);font-size:12.5px}
.dp-warn{display:block;font-size:12.5px;font-weight:800}
.dp-warn.bad{color:var(--bad)}.dp-warn.warn{color:var(--warn)}.dp-warn.ok{color:var(--ok)}
.dp-protokoll{margin:0;padding:0;list-style:none;display:grid;gap:8px;font-size:14px}
.dp-protokoll b{font-variant-numeric:tabular-nums}
.dp-wiederholen{border:0;padding:0;margin:4px 0 0;display:flex;flex-wrap:wrap;gap:6px}
.dp-wiederholen legend{font-weight:800;font-size:14px;margin-bottom:6px;padding:0}
.dp-tagwahl{position:relative;display:inline-flex!important}
.dp-tagwahl input{position:absolute;opacity:0;inset:0;width:100%!important;height:100%!important;cursor:pointer}
.dp-tagwahl span{display:grid;place-items:center;min-width:48px;min-height:44px;border-radius:12px;background:var(--glas-2);box-shadow:inset 0 0 0 1px var(--kante);font-weight:800;
  transition:background-color var(--t-1) var(--aus)}
.dp-tagwahl input:checked + span{background:rgba(var(--p-rgb),.16);box-shadow:inset 0 0 0 1.5px rgba(var(--p-rgb),.6);color:var(--pink-schrift)}
.dp-tagwahl input:focus-visible + span{outline:3px solid var(--akzent);outline-offset:2px}
.dp-werkzeug-zeile{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;margin:14px 0 0;padding-top:14px;border-top:1px solid var(--kante)}
.dp-werkzeug-zeile label{flex:1;min-width:200px}
.dp-loeschen,.dp-raus{color:var(--bad)!important}

/* Kurzmeldung unten */
.dp-meldung{position:fixed;left:50%;bottom:calc(96px + var(--sicher-u));z-index:70;display:flex;align-items:center;gap:10px;padding:12px 18px;border-radius:999px;
  max-width:calc(100vw - 32px);font-weight:700;pointer-events:none;opacity:0;transform:translate(-50%,20px);
  background:var(--flaeche-schwebend);box-shadow:var(--schatten),inset 0 0 0 1px var(--kante-2);
  transition:transform var(--t-3) var(--aus-stark),opacity var(--t-2) var(--aus)}
.dp-meldung.da{opacity:1;transform:translate(-50%,0)}
.dp-meldung .i{color:var(--ok)}
.dp-meldung.warn .i{color:var(--warn)}
.t-plan .dp-meldung{bottom:calc(100px + var(--sicher-u))}

/* ---------- Wochenplan (Planer) ---------- */
.dp-kopf{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px;margin:4px 0 18px}
.dp-kopf p{margin:8px 0 0;font-weight:600}
.dp-kacheln{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-bottom:16px}
.dp-kachel{display:flex;align-items:center;gap:14px;min-height:92px;padding:14px 18px;margin:0}
@media (max-width:520px){.dp-kacheln{grid-template-columns:1fr 1fr;gap:10px}.dp-kachel{flex-direction:column;align-items:flex-start;gap:8px;padding:12px 14px}}
.dp-kachel small{display:block;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3)}
.dp-kachel b{font-family:'Queering',sans-serif;font-weight:900;font-size:32px;line-height:1;font-variant-numeric:tabular-nums}
.dp-kachel span:not(.ring):not(.dp-sym){font-size:13px;color:var(--text-2);font-weight:600}
.dp-kachel .ring.klein{width:58px}
.dp-kachel .ring.klein b{font-size:17px}
.dp-sym{flex:none;width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:var(--glas-2);font-weight:900;font-size:20px}
.dp-sym.pink{color:var(--akzent-2)}.dp-sym.bad{color:var(--bad)}.dp-sym.gold{color:var(--gold-schrift)}
.dp-flaeche{display:grid;grid-template-columns:272px minmax(0,1fr);gap:14px;align-items:start}
@media (max-width:1100px){.dp-flaeche{grid-template-columns:minmax(0,1fr)}.dp-leute{position:static!important}}
.dp-flaeche > *{min-width:0}   /* sonst wächst die Spalte auf die Mindestbreite des Rasters und schneidet rechts ab */
.dp-leute{padding:14px;position:sticky;top:92px;margin:0}
.dp-titel{font-family:'Queering',sans-serif;font-weight:900;text-transform:uppercase;font-size:17px;margin:2px 4px 12px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.dp-suche{min-height:44px!important;padding:0 16px!important;border-radius:999px!important;margin-bottom:10px;font-size:16px!important}
[data-leute]{display:grid;gap:2px}

.dp-person{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:10px;align-items:center;padding:6px 8px;border-radius:var(--r-m);transition:background-color var(--t-2) var(--aus)}
@media (hover:hover){.dp-person:hover{background:var(--glas)}}
.dp-person b{display:block;font-size:15px;line-height:1.2}
.dp-person small{display:block;color:var(--text-2);font-size:12.5px}
.dp-person .kurz{display:none}
.dp-euro{font-size:13px;font-weight:800;color:var(--gold-schrift);font-variant-numeric:tabular-nums}
.dp-ava{--p:0;position:relative;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:14px;border:0;color:var(--text);flex:none;
  background:conic-gradient(var(--gold) calc(var(--p) * 1%),rgba(var(--w-rgb),.1) 0);cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;padding:0}
.dp-ava::before{content:"";position:absolute;inset:3px;border-radius:50%;background:linear-gradient(135deg,var(--ava-a),var(--ava-b))}
.dp-ava span{position:relative}
.dp-ava[aria-pressed=true]{box-shadow:0 0 0 3px var(--pink-linie)}
.dp-ava.ueber{background:conic-gradient(var(--bad) 100%,transparent 0)}
.dp-kandidat .dp-ava{width:40px;height:40px;cursor:default}
.dp-hinweis-zug{margin:10px 4px 2px;font-size:12.5px;color:var(--text-3)}
.dp-plan.waehlt .dp-schicht{box-shadow:inset 0 0 0 1px rgba(var(--p-rgb),.45)}

.dp-raster-huelle{padding:12px;overflow:hidden;margin:0;view-transition-name:dp-raster}
.dp-raster-scroll{overflow-x:auto;scrollbar-width:thin}
.dp-raster{display:grid;grid-template-columns:88px repeat(7,minmax(108px,1fr));min-width:880px;gap:6px}
.dp-tag{padding:10px 10px 8px;border-radius:var(--r-k);background:rgba(var(--w-rgb),.035)}
.dp-tag b{display:block;font-size:15px}
.dp-tag small{display:block;font-size:12.5px;color:var(--text-2);font-weight:600;font-variant-numeric:tabular-nums}
.dp-tag.heute{background:rgba(var(--p-rgb),.12);box-shadow:inset 0 0 0 1px rgba(var(--p-rgb),.45)}
.dp-tag.heute b::after{content:"heute";margin-left:6px;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--pink-schrift)}
.dp-tag.feiertag{background:rgba(var(--g-rgb),.12);box-shadow:inset 0 0 0 1px rgba(var(--g-rgb),.4)}
.dp-zeilen-titel{padding:10px 8px;font-weight:800;font-size:13.5px;display:flex;flex-direction:column;gap:2px}
.dp-zeilen-titel .dp-punkt{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px}
.dp-zelle{position:relative;display:flex;flex-direction:column;gap:6px;padding:5px;border-radius:var(--r-k);background:rgba(var(--w-rgb),.022);min-height:64px}
.dp-zelle.flach{min-height:40px;justify-content:center}
.dp-zelle.leer small{color:var(--text-3);padding-left:6px}
.dp-zelle.rein{animation:rein var(--t-4) var(--aus-stark) backwards;animation-delay:calc(var(--i,0) * 32ms)}
.dp-event{align-self:flex-start;padding:6px 12px;border-radius:999px;font-size:12.5px;font-weight:700;background:rgba(var(--g-rgb),.14);box-shadow:inset 0 0 0 1px rgba(var(--g-rgb),.5);color:var(--gold-schrift)}
.dp-abw{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;font-size:13px;font-weight:700;align-self:center;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  background:repeating-linear-gradient(135deg,rgba(var(--warn-rgb),.12) 0 8px,rgba(var(--warn-rgb),.06) 8px 16px);box-shadow:inset 0 0 0 1px rgba(var(--warn-rgb),.42);color:var(--warn)}
.dp-abw.beantragt{background:none;box-shadow:none;outline:1.5px dashed rgba(var(--warn-rgb),.55);outline-offset:-1.5px}

.dp-schicht{position:relative;display:block;width:100%;text-align:left;cursor:pointer;padding:10px 10px 10px 12px;border-radius:14px;border:0;color:var(--text);
  background:linear-gradient(180deg,rgba(var(--w-rgb),.085),rgba(var(--w-rgb),.05));box-shadow:inset 0 0 0 1px var(--kante);touch-action:manipulation;
  transition:transform var(--t-2) var(--aus),box-shadow var(--t-2) var(--aus)}
.dp-schicht::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:0 3px 3px 0;background:var(--gold)}
@media (hover:hover){.dp-schicht:hover{transform:translateY(-1px);box-shadow:inset 0 0 0 1px rgba(var(--w-rgb),.22),0 12px 24px -16px rgba(var(--s-rgb),.9)}}
.dp-schicht:active{transform:scale(.98)}
.dp-schicht .kopfzeile{display:flex;justify-content:space-between;align-items:flex-start;gap:6px}
.dp-schicht .von{display:block;font-weight:800;font-size:17px;line-height:1.1;font-variant-numeric:tabular-nums}
.dp-schicht .bis{display:block;white-space:nowrap;font-size:12.5px;font-weight:600;color:var(--text-2);font-variant-numeric:tabular-nums}
.dp-schicht .zaehl{font-size:12px;font-weight:800;padding:2px 7px;border-radius:999px;background:rgba(var(--w-rgb),.1);font-variant-numeric:tabular-nums}
.dp-schicht .leute-in{display:flex;flex-direction:column;gap:3px;margin-top:8px;font-size:13.5px;font-weight:600;color:var(--text-2)}
.dp-schicht .leute-in > span{display:flex;align-items:center;gap:6px}
.dp-schicht .mini{width:18px;height:18px;border-radius:50%;display:inline-grid;place-items:center;font-size:9px;font-weight:800;background:var(--mini);box-shadow:inset 0 0 0 1px var(--kante);color:var(--text)}
.dp-schicht .frei{color:var(--warn);font-weight:800}
.dp-schicht .notiz{display:block;margin-top:6px;font-size:12.5px;color:var(--text-2);font-style:italic}
.dp-schicht .status{display:flex;gap:4px;flex-wrap:wrap;margin-top:7px}
.dp-schicht .status .chip{min-height:22px;font-size:11.5px;padding:0 8px;white-space:normal;text-align:left}
.dp-schicht.voll::before{background:var(--ok)}
.dp-schicht.unter::before{background:var(--warn)}
.dp-schicht.konflikt::before{background:var(--bad)}
.dp-schicht.offen{background:linear-gradient(180deg,rgba(var(--p-rgb),.11),rgba(var(--p-rgb),.05))}
.dp-schicht.offen::before{background:var(--pink)}
.dp-schicht.geaendert::after{content:"";position:absolute;right:6px;bottom:6px;width:8px;height:8px;border-radius:50%;background:var(--pink);box-shadow:0 0 0 3px rgba(var(--p-rgb),.2)}
.dp-schicht.ziel{transform:scale(1.02);box-shadow:inset 0 0 0 2px var(--pink-linie),0 0 0 6px rgba(var(--p-rgb),.14)}
.dp-schicht.gesendet{animation:dp-glanz 700ms var(--aus) backwards;animation-delay:calc(var(--i,0) * 18ms)}
@keyframes dp-glanz{0%{box-shadow:inset 0 0 0 1px var(--kante)}35%{box-shadow:inset 0 0 0 2px rgba(var(--p-rgb),.85),0 0 24px -6px rgba(var(--p-rgb),.6)}100%{box-shadow:inset 0 0 0 1px var(--kante)}}
.dp-plus{align-self:stretch;display:grid;place-items:center;min-height:44px;border:0;border-radius:10px;background:transparent;color:var(--text-3);cursor:pointer;opacity:.0;
  transition:opacity var(--t-2) var(--aus),background-color var(--t-2) var(--aus)}
.dp-zelle:hover .dp-plus,.dp-plus:focus-visible{opacity:1}
.dp-plus:hover{background:var(--glas)}
@media (hover:none){.dp-plus{opacity:.7}}
.dp-geist{position:fixed;left:0;top:0;z-index:90;pointer-events:none;display:flex;align-items:center;gap:10px;padding:8px 14px 8px 8px;border-radius:999px;
  background:var(--flaeche-zug);box-shadow:inset 0 0 0 1px rgba(var(--p-rgb),.6),0 24px 40px -18px rgba(var(--s-rgb),.9);font-weight:800;will-change:transform}
.dp-geist .dp-ava{width:34px;height:34px;cursor:grabbing}

/* Dock unten: Stand und Veröffentlichen */
.dp-dock{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(14px + var(--sicher-u));z-index:40;display:flex;align-items:center;gap:8px;
  padding:8px 8px 8px 12px;border-radius:999px;max-width:calc(100vw - 24px);isolation:isolate;
  background:var(--flaeche);box-shadow:var(--schatten),inset 0 0 0 1px var(--kante)}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .dp-dock{background:var(--flaeche-dock);-webkit-backdrop-filter:blur(var(--blur)) saturate(150%);backdrop-filter:blur(var(--blur)) saturate(150%)}
}
.dp-dock-chips{display:flex;gap:6px;overflow:hidden}
@media (max-width:620px){.dp-dock-chips .chip:not(:first-child){display:none}}
.dp-senden{min-width:210px;overflow:hidden;white-space:nowrap;flex:none}
.dp-senden[disabled]{opacity:.55}
.dp-fuellung{position:absolute;inset:0;background:linear-gradient(90deg,#FFD0EF,#FFA7E2);transform-origin:left;transform:scaleX(0);z-index:0}
.dp-senden-a,.dp-senden-b{position:relative;z-index:1;display:inline-flex;align-items:center;gap:10px;
  transition:opacity var(--t-2) var(--aus),filter var(--t-2) var(--aus),transform var(--t-2) var(--aus)}
.dp-senden-b{position:absolute}
.dp-zaehler{display:inline-grid;place-items:center;min-width:24px;height:24px;padding:0 6px;border-radius:999px;background:var(--auf-pink);color:var(--pink);font-size:13px;font-variant-numeric:tabular-nums}
.dp-senden.laeuft .dp-fuellung{transform:scaleX(1);transition:transform 900ms cubic-bezier(.3,.1,.3,1)}
.dp-senden .wechsel{opacity:0;filter:blur(4px);transform:translateY(6px)}
.dp-senden.fertig{background:var(--ok-fuell);color:#0E2416}
.dp-senden.fertig .dp-fuellung{opacity:0}

/* Wochenwechsel: Raster gleitet seitlich */
::view-transition-old(dp-raster){animation:180ms var(--weg) both dp-raus-x}
::view-transition-new(dp-raster){animation:320ms var(--aus-stark) both dp-rein-x2}
@keyframes dp-raus-x{to{opacity:0;transform:translateX(calc(var(--richtung,1) * -24px));filter:blur(3px)}}
@keyframes dp-rein-x2{from{opacity:0;transform:translateX(calc(var(--richtung,1) * 32px));filter:blur(3px)}}
@media (prefers-reduced-motion:reduce){::view-transition-old(dp-raster),::view-transition-new(dp-raster){animation:none!important}}

/* Tablet hochkant und schmaler: Team als Streifen über dem Raster (Avatar und Vorname), Ziehen geht weiter */
@media (max-width:1100px){
  .dp-leute{padding:10px 12px}
  .dp-leute .dp-titel{margin:0 4px 8px}
  .dp-suche,.dp-hinweis-zug{display:none}
  [data-leute]{display:flex;gap:4px;overflow-x:auto;padding:4px 2px 6px;scrollbar-width:thin;scroll-snap-type:x proximity}
  .dp-person{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:72px;padding:6px 4px;scroll-snap-align:start;text-align:center}
  .dp-person b{font-size:13px;white-space:nowrap}
  .dp-person b{max-width:68px;overflow:hidden;text-overflow:ellipsis}
  .dp-person small{font-size:11.5px;white-space:nowrap}
  .dp-person small .art,.dp-person .voll{display:none}
  .dp-person .kurz{display:inline}
  [data-leute] .dp-ava{touch-action:manipulation}   /* Streifen: wischen scrollt, Antippen und Schicht wählen plant ein (Ziehen ab 1100 px) */
  .dp-euro{font-size:11.5px}
}

/* ---------- Welcome Pass am Desk (seit 27.10.2026): Pass-Liste, digitale Welcome Card, Abschlussgespräch ---------- */
.wp-zahlen{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:6px 0 4px}
.wp-zahl{border-radius:var(--r-m);padding:12px 14px;background:var(--zeile);box-shadow:inset 0 0 0 1px var(--kante)}
.wp-zahl b{display:block;font-family:'Queering',sans-serif;font-weight:900;font-size:28px;line-height:1}
.wp-zahl span{font-size:13px;color:var(--text-2)}
.wp-zahl.heiss{box-shadow:inset 0 0 0 1px var(--pink-linie);background:rgba(var(--p-rgb),.10)}
.wp-liste,.wp-aufgaben,.wp-classes{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.wp-zeile{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;min-height:64px;padding:10px 16px;border-radius:var(--r-m);
  background:var(--zeile);box-shadow:inset 0 0 0 1px var(--kante);text-decoration:none;color:inherit}
.wp-zeile:active{transform:scale(.99)}
.wp-wer{min-width:0}.wp-wer b,.wp-wer small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wp-stempel{display:flex;gap:5px}
.wp-stempel i{width:14px;height:14px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--kante-2)}
.wp-stempel i.da{background:var(--pink);box-shadow:none}
.wp-stempel i.gebucht,.wp-stempel i.jetzt{box-shadow:inset 0 0 0 2px var(--pink)}
.wp-stempel i.verpasst{background:rgba(var(--bad-rgb),.5);box-shadow:none}
.wp-aufgaben .karte{margin:0}
.wp-a-kopf{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:6px}
.wp-a-kopf a{color:inherit}
.pass-link{margin-top:8px;text-decoration:none}
.wp-kopf{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;flex-wrap:wrap;margin-bottom:6px}
.wp-kopf .chip{margin-top:8px}
.wp-slots{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;margin:12px 0}
.wp-slot{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border-radius:var(--r-m);background:var(--zeile);box-shadow:inset 0 0 0 1px var(--kante);min-width:0}
.wp-slot b{overflow-wrap:anywhere}
.wp-slot .chip{align-self:flex-start;margin-top:4px}
.wp-slot.da{box-shadow:inset 0 0 0 1px var(--pink-linie)}
.wp-slot.leer{box-shadow:inset 0 0 0 1.5px var(--kante-2);background:transparent;border:0;outline:1.5px dashed var(--kante-2);outline-offset:-4px}
.wp-nr{font-family:'Queering',sans-serif;font-weight:900;font-size:13px;color:var(--text-3)}
.wp-gespraech.jetzt{box-shadow:inset 0 0 0 2px var(--pink-linie),var(--schatten)}
.wp-alarm{display:flex;align-items:center;gap:10px;font-weight:800;color:var(--pink-schrift);margin:0 0 4px}
.wp-alarm span{width:10px;height:10px;border-radius:50%;background:var(--pink);animation:wp-puls 1.6s infinite}
@keyframes wp-puls{70%{box-shadow:0 0 0 10px rgba(var(--p-rgb),0)}0%{box-shadow:0 0 0 0 rgba(var(--p-rgb),.6)}}
@media (prefers-reduced-motion:reduce){.wp-alarm span{animation:none}}
.wp-notiz-alt{margin:12px 0;padding:12px 14px;border-radius:var(--r-k);background:rgba(var(--g-rgb),.12);box-shadow:inset 0 0 0 1px rgba(var(--g-rgb),.45);color:var(--gold-schrift)}
.wp-notiz-alt p{margin:2px 0}
.wp-frage{margin:16px 0 8px !important;font-weight:800}
.wp-tipps,.wp-haken,.wp-nein{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.wp-tipps form,.wp-haken form{margin:0}
.wp-haken{flex-direction:column;align-items:stretch;margin-top:10px}
.wp-tipp{min-height:48px;padding:0 18px;border-radius:999px;border:0;background:var(--glas-2);color:var(--text);box-shadow:inset 0 0 0 1px var(--kante-2);font-weight:700;cursor:pointer;
  transition:transform var(--t-1) var(--aus),background var(--t-2) var(--aus)}
.wp-tipp:active{transform:scale(.96)}
.wp-tipp.klein{min-height:40px;padding:0 14px;font-size:14px}
.wp-tipp.haken{width:100%;text-align:left;border-radius:var(--r-k);display:flex;align-items:center;gap:12px}
.wp-tipp.haken::before{content:"";width:22px;height:22px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--kante-feld);flex:none}
.wp-tipp[aria-pressed=true]{background:var(--pink);color:var(--auf-pink);box-shadow:none}
.wp-tipp.haken[aria-pressed=true]::before{background:var(--auf-pink);box-shadow:none}
.wp-tipp.aber[aria-pressed=true]{background:var(--gold-hell);color:#2a2116}
.wp-tipp.gruen[aria-pressed=true]{background:var(--ok);color:#10261a}
.wp-tipp[aria-busy=true]{opacity:.6}
.wp-fragezeile{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 0;border-top:1px solid var(--kante)}
.wp-notiz{margin-top:14px}
.wp-notiz .feld-t{font-size:16px}
.wp-notiz .knopf{margin-top:10px}
.wp-tarif{margin-top:14px;padding:16px;border-radius:var(--r-m);background:rgba(var(--p-rgb),.10);box-shadow:inset 0 0 0 1px rgba(var(--p-rgb),.42)}
.wp-tarif-name{font-family:'Queering',sans-serif;font-weight:900;font-size:24px;text-transform:uppercase;margin:0}
.wp-tarif-name span{font-family:'Overused Grotesk',sans-serif;font-size:14px;text-transform:none;color:var(--text-2);font-weight:700;margin-left:6px}
.wp-preis{margin:6px 0 !important}.wp-preis b{font-size:22px;color:var(--pink-schrift)}.wp-preis s{color:var(--text-3)}
.wp-satz{font-size:17px;font-weight:700;margin-top:8px !important}
.wp-classes li{display:grid;grid-template-columns:96px minmax(0,1.4fr) minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 0;border-top:1px solid var(--kante)}
.wp-classes li span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wp-qr{border:0;border-radius:var(--r-xl);padding:24px;background:var(--flaeche-dialog);color:var(--text);max-width:360px;text-align:center}
.wp-qr::backdrop{background:var(--schleier)}
.wp-qr [data-qr-bild] svg{width:100%;height:auto;border-radius:16px;display:block;margin:10px 0}
@media (max-width:700px){
  .wp-zahlen{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wp-classes li{grid-template-columns:80px minmax(0,1fr) auto}
  .wp-classes li .leise{display:none}
}

/* Kündigungen (seit 27.10.2026): Heute im Haus, Karte, Mail-Vorschau. Baut auf den wp-Klassen des Welcome Pass auf. */
.kd-haus{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.kd-haus .karte{margin:0;display:grid;gap:6px}
.kd-haus .karte.jetzt{box-shadow:inset 0 0 0 2px var(--pink-linie),var(--schatten)}
.kd-haus .knopf{justify-self:start;margin-top:4px}
.kd-haus-kopf{display:flex;justify-content:space-between;align-items:center;gap:10px}
.kd-haus-kopf a{color:inherit;font-size:18px}
.kd-class{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0}
.kd-class b{font-size:17px}
.kd-heute{box-shadow:inset 0 0 0 2px var(--pink-linie),var(--schatten)}
.kd-leitfaden{margin:4px 0 0;padding-left:22px;display:grid;gap:8px}
.kd-leitfaden li b{display:block}
.kd-leitfaden li span{color:var(--text-2)}
.kd-verlauf{list-style:none;margin:8px 0 0;padding:0}
.kd-verlauf li{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 0;border-top:1px solid var(--kante)}
.kd-verlauf a{color:inherit}
.kd-text{white-space:pre-wrap;font:inherit;font-size:15px;line-height:1.5;margin:8px 0 0;color:var(--text-2)}
.kd-stand{margin-top:28px}

/* ---------- Arbeitsbereiche im Reiter Team (seit 08.11.2026) ---------- */
.unsichtbar{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.dp-bereiche{margin:0 0 18px;display:grid;gap:10px}
.dp-bereich-liste{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:8px}
.dp-bereich{display:grid;grid-template-columns:auto minmax(0,1fr) 130px auto auto;gap:10px;align-items:center}
.dp-bereich.neu{grid-template-columns:minmax(0,1fr) 130px auto;margin-top:4px}
.dp-bereich.aus input[name=name]{opacity:.62}
.dp-bereich-farbe{width:16px;height:16px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(var(--s-rgb),.3)}
.dp-bereich .zeile{display:flex;align-items:center;gap:6px;font-weight:700;font-size:14px;white-space:nowrap}
.dp-bereich select{min-height:52px}
@media (max-width:620px){
  .dp-bereich{grid-template-columns:auto minmax(0,1fr) auto}
  .dp-bereich select{grid-column:2}
  .dp-bereich .knopf{grid-column:2 / -1;justify-self:start}
  .dp-bereich.neu{grid-template-columns:1fr}
  .dp-bereich.neu select,.dp-bereich.neu .knopf{grid-column:1}
}