/* ================= Design 2026: UNIfit Glass (nur Aussehen) ================= */
@font-face{font-family:"Figtree";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/figtree-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Figtree";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/figtree-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Figtree";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/figtree-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Figtree";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/figtree-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow Semi Condensed";font-style:italic;font-weight:800;font-display:swap;src:url(../fonts/barlow-semi-condensed-latin-800-italic.woff2) format("woff2")}
:root{
  --bg:#F7F2F6; --bg2:#EEF5F0;
  --fg:#1C171B; --muted:#675D67;
  --magenta:#C2186B; --magenta-soft:#F9E1ED; --on-magenta:#fff;
  --grad:linear-gradient(135deg,#B5125C,#D63883);
  --green:#21803A; --green-soft:#DDF1E1; --on-green:#fff;
  --warn:#8A4B00; --warn-soft:#FBEBD3; --bad:#B3261E; --bad-soft:#FBE3E1;
  --info:#3D5A99; --info-soft:#E4EAF7;
  --surface:#FFFFFF; --surface-2:#F3EDF2; --line:rgba(28,23,27,.10);
  --card:rgba(255,255,255,.86); --card-line:rgba(255,255,255,.9);
  --glass:rgba(255,255,255,.58); --glass-line:rgba(255,255,255,.8); --glass-solid:rgba(250,246,249,.96); --glass-bar:rgba(255,255,255,.74); --glass-menu:rgba(252,248,251,.9);
  --shadow:0 1px 2px rgba(60,20,45,.05),0 6px 22px rgba(60,20,45,.07);
  --shadow-lg:0 10px 40px rgba(60,20,45,.14);
  --blob1:rgba(214,56,131,.30); --blob2:rgba(33,128,58,.20); --blob3:rgba(255,178,138,.30);
  --body:"Figtree",-apple-system,"Segoe UI",Roboto,sans-serif;
  /* Barlow nur sparsam für große Überschriften/Beträge; alles andere Figtree */
  --hero:"Barlow Semi Condensed","Arial Narrow",system-ui,sans-serif;
  --display:var(--body);
  --r:18px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#110D11; --bg2:#0C130E;
  --fg:#F5EFF4; --muted:#ABA0AA;
  --magenta:#EC5A9E; --magenta-soft:rgba(236,90,158,.16); --on-magenta:#fff;
  --grad:linear-gradient(135deg,#BE2C72,#D2458A);
  --green:#62CC77; --green-soft:rgba(98,204,119,.15); --on-green:#06210d;
  --warn:#F2B45C; --warn-soft:rgba(242,180,92,.15); --bad:#F2867E; --bad-soft:rgba(242,134,126,.15);
  --info:#9DB4EC; --info-soft:rgba(157,180,236,.14);
  --surface:#1E181E; --surface-2:#2A222A; --line:rgba(255,255,255,.09);
  --card:rgba(30,24,30,.88); --card-line:rgba(255,255,255,.07);
  --glass:rgba(38,30,38,.52); --glass-line:rgba(255,255,255,.09); --glass-solid:rgba(28,22,28,.97); --glass-bar:rgba(38,30,38,.74); --glass-menu:rgba(30,24,30,.9);
  --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 26px rgba(0,0,0,.28);
  --shadow-lg:0 14px 44px rgba(0,0,0,.5);
  --blob1:rgba(190,44,114,.30); --blob2:rgba(98,204,119,.12); --blob3:rgba(255,150,110,.12);
}}
body{background:linear-gradient(160deg,var(--bg),var(--bg2)) fixed;font-family:var(--body);font-size:15px}
/* weiche, langsam treibende Farbflächen im Hintergrund (nur transform animiert) */
body::before,body::after{content:"";position:fixed;z-index:-1;pointer-events:none;border-radius:50%;will-change:transform}
body::before{width:70vmax;height:70vmax;left:-20vmax;top:-25vmax;background:radial-gradient(closest-side,var(--blob1),transparent);animation:blobA 38s ease-in-out infinite alternate}
body::after{width:60vmax;height:60vmax;right:-18vmax;bottom:-22vmax;background:radial-gradient(closest-side,var(--blob2),transparent),radial-gradient(closest-side at 30% 30%,var(--blob3),transparent 70%);animation:blobB 44s ease-in-out infinite alternate}
@keyframes blobA{to{transform:translate3d(14vmax,10vmax,0) scale(1.08)}}
@keyframes blobB{to{transform:translate3d(-12vmax,-8vmax,0) scale(1.12)}}
.num,td,th,.big,.total strong,.sum b,.ovtile b,.tile .p,.amt,.cmp .v,.counter .cnum,input[inputmode="decimal"],.nb{font-variant-numeric:tabular-nums}
h2,h3,.label{letter-spacing:0}
h2{font:700 20px var(--body)}
h3{font:700 17px var(--body)}
.label{font:600 11.5px var(--body);text-transform:uppercase;letter-spacing:.07em}
.mtitle,.cashcard .big,.total strong{font-family:var(--hero);font-style:italic;font-weight:800;letter-spacing:.2px}
.alarmbar strong,.mittbar strong,.dutybar strong,.cashcard.ab .abhead strong,.monthnav strong{font-weight:700}
.ovtile b,.sum b{font-weight:700;letter-spacing:-.01em}
label.actions:has(>input[type=checkbox]){flex-wrap:nowrap}
.progress{background:color-mix(in srgb,var(--fg) 10%,transparent)}
/* Logo */
.logo{margin:0;line-height:0}.logo img{height:44px;width:auto;display:block}
.logo .lg-d{display:none}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .logo .lg-l{display:none}:root:not([data-theme="light"]) .logo .lg-d{display:block}}
.gatebox .logo{display:flex;justify-content:center;padding:6px 0 4px}.gatebox .logo img{height:110px}
/* Kopfleiste: schwebend, Glas */
header.top{position:sticky;top:calc(env(safe-area-inset-top,0px) + 10px);z-index:40;padding:10px 12px 10px 18px;border-radius:24px;background:var(--glass);border:1px solid var(--glass-line);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(22px) saturate(180%);backdrop-filter:blur(22px) saturate(180%)}
.brand{align-items:center;gap:14px}
.brand span{font-weight:500}
/* Navigation als Segment-Schalter mit gleitendem Indikator */
nav.tabs,.subtabs,.seg{position:relative;isolation:isolate}
nav.tabs{background:var(--card);border:1px solid var(--card-line);box-shadow:var(--shadow);border-radius:20px;padding:5px;gap:2px}
nav.tabs button{border-radius:14px;padding:9px 14px;font:600 14.5px var(--body);transition:color .2s}
nav.tabs button[aria-selected="true"]{background:transparent;box-shadow:none;color:var(--on-magenta)}
nav.tabs button[aria-selected="true"] .nb{background:rgba(255,255,255,.28);color:#fff}
.segind{position:absolute;z-index:-1;left:0;top:0;border-radius:14px;background:var(--grad);box-shadow:0 4px 14px rgba(194,24,107,.32);transition:transform .32s cubic-bezier(.3,.8,.3,1),width .32s cubic-bezier(.3,.8,.3,1),height .32s,opacity .2s;pointer-events:none}
.subtabs .segind,.seg .segind{background:var(--surface);box-shadow:0 1px 3px rgba(0,0,0,.12),0 0 0 1px var(--line)}
.subtabs{background:var(--card);border:1px solid var(--card-line);box-shadow:var(--shadow);border-radius:18px;padding:4px;gap:2px;width:fit-content;max-width:100%}
.subtabs button{border:0;background:transparent;border-radius:14px;color:var(--muted);transition:color .2s}
.subtabs button[aria-selected="true"]{background:transparent;color:var(--fg);border:0}
.seg{background:var(--surface-2);border-radius:14px;padding:3px}
.seg button{border-radius:11px;transition:color .2s}
.seg button[aria-pressed="true"]{background:transparent;box-shadow:none;color:var(--fg)}
nav.tabs .sep{background:var(--line)}
/* Badges */
.nb{background:var(--grad);font:700 11px var(--body)}
.nb.warn{background:var(--warn);color:var(--surface)}
.role{border-radius:99px}.role.admin{background:var(--magenta-soft);color:var(--magenta)}
/* Buttons: Pillenform, Hauptaktion mit Verlauf, Nebenaktion als heller Glas-Button */
.btn,.tlink{transition:transform .12s ease,background .15s,border-color .15s,box-shadow .15s}
.btn{border-radius:99px;padding:9px 16px;border:1px solid var(--line);background:var(--card);box-shadow:0 1px 2px rgba(0,0,0,.04);font-weight:600}
.btn:hover{border-color:var(--magenta)}
.btn:active,.tile:active,.pay button:active,.book:active,.person:active,.pad button:active,.stepper button:active{transform:scale(.96)}
.btn.primary{background:var(--grad);border-color:transparent;color:#fff;box-shadow:0 4px 14px rgba(194,24,107,.28)}
.btn.primary:hover{filter:brightness(1.05)}
.btn.green{background:var(--green);border-color:transparent;color:var(--on-green);box-shadow:0 4px 12px rgba(33,128,58,.22)}
.btn.danger{background:var(--card);color:var(--bad);border-color:color-mix(in srgb,var(--bad) 45%,transparent)}
.btn.small{padding:6px 12px}
.btn:disabled{box-shadow:none}
/* Eingaben */
input,select,textarea{border-radius:12px;border:1px solid var(--line);background:var(--surface);padding:9px 12px;transition:border-color .15s,box-shadow .15s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--magenta);box-shadow:0 0 0 3px var(--magenta-soft)}
input[type=checkbox],input[type=radio]{accent-color:var(--magenta)}
/* Karten & Listen: fast deckend, ohne Blur */
.card,.item,.journal,.tablewrap,.sum,.ovtile,.cashcard,.tile,.free,.person,.pinbox,.kasseoff,.alarmbar,.mittbar,.dutybar{border-radius:var(--r);box-shadow:var(--shadow)}
.card,.item,.journal,.tablewrap,.sum,.ovtile,.cashcard,.tile,.person,.pinbox{background:var(--card);border:1px solid var(--card-line)}
.free{background:var(--card)}
.cashcard.ab{border:1.5px dashed color-mix(in srgb,var(--magenta) 35%,transparent)}
.cashcard.ab.open,.areditor{border:1.5px solid var(--magenta)}
.cashcard.stand{border-left:5px solid var(--green)}
.ovtile{border-left:5px solid var(--line)}
.ovtile.ok{border-left-color:var(--green)}.ovtile.warn{border-left-color:var(--warn)}.ovtile.bad{border-left-color:var(--bad)}
.item.open{border-left:4px solid var(--magenta)}
.jrow,.arow,.katrow,th,td,.ovrow,.daysep{border-color:var(--line)}
.jrow.jh,.daysep,thead th{background:transparent}
.tablewrap thead th{background:color-mix(in srgb,var(--surface-2) 60%,transparent)}
tbody tr:hover td{background:color-mix(in srgb,var(--magenta-soft) 40%,transparent)}
/* Status-Pills */
.chip{border-radius:99px;padding:3px 9px;font-weight:700;letter-spacing:.04em}
/* Kasse: große Touch-Flächen, klare Preise, deutlicher gedrückt-Zustand */
.tiles{gap:10px}
.tile{min-height:92px;padding:14px;border-radius:18px;transition:transform .1s ease,box-shadow .15s,border-color .15s,background .15s}
.tile:hover{border-color:color-mix(in srgb,var(--magenta) 50%,transparent)}
.tile:active{background:var(--magenta-soft);border-color:var(--magenta);box-shadow:none}
.tile .n{font-weight:600}
.tile .p{font:700 19px var(--body);color:var(--magenta)}
.tile .q{background:var(--grad)}
.pay button{border-radius:16px;min-height:52px;font:700 16px var(--body);border:1.5px solid var(--line);background:var(--card);transition:transform .1s,background .15s}
.pay button[data-z="karte"][aria-pressed="true"]{background:var(--grad);border-color:transparent;color:#fff}
.book{border-radius:99px;min-height:54px;background:var(--grad);color:#fff;font:700 18px var(--body);box-shadow:0 6px 18px rgba(194,24,107,.3);transition:transform .12s}
.stepper button{border-radius:10px;width:34px;height:34px}
.bon{border-radius:22px;background:var(--glass);border:1px solid var(--glass-line);box-shadow:var(--shadow-lg);-webkit-backdrop-filter:blur(22px) saturate(180%);backdrop-filter:blur(22px) saturate(180%)}
/* Login */
.person{border-radius:20px}
.person:hover{border-color:var(--magenta)}
.avatar{background:var(--magenta-soft);color:var(--magenta);font:700 20px var(--body)}
.pinbox{border-radius:24px}
.pad button{border-radius:18px;background:var(--card);border:1px solid var(--line);font:600 24px var(--body)}
.dots i.on{background:var(--magenta);border-color:var(--magenta)}
/* Toast & Popups als Glas */
.toast{background:rgba(28,23,27,.82);color:#fff;-webkit-backdrop-filter:blur(18px) saturate(180%);backdrop-filter:blur(18px) saturate(180%);border:1px solid rgba(255,255,255,.12)}
.vorschau{border-radius:0 0 14px 14px}
/* Fallback ohne backdrop-filter: deckendere Flächen */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  header.top,.bon,.bottombar,nav.tabs.open{background:var(--glass-solid)!important}
  .toast{background:rgba(28,23,27,.96)}
}
/* Handy/Tablet */
@media (max-width:700px){
  header.top{top:calc(env(safe-area-inset-top,0px) + 8px);padding:8px 10px 8px 14px;border-radius:22px}
  .logo img{height:32px}
  header.top{flex-wrap:nowrap;gap:8px}
  header.top .brand>span{display:none}
  header.top .who{gap:6px;min-width:0}
  header.top .who .role{display:none}
  header.top .who .btn{padding:6px 11px;min-height:34px;font-size:13px}
  header.top .who #whoName{max-width:30vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .bottombar{left:10px;right:10px;bottom:calc(env(safe-area-inset-bottom,0px) + 10px);border-radius:24px;padding:5px;background:var(--glass-bar);border:1px solid var(--glass-line);box-shadow:var(--shadow-lg);-webkit-backdrop-filter:blur(22px) saturate(180%);backdrop-filter:blur(22px) saturate(180%)}
  .bottombar button{border-radius:18px}
  .bottombar button[aria-current="true"]{color:var(--magenta)}
  .bottombar button[aria-current="true"] svg{background:var(--magenta-soft)}
  .wrap{padding-bottom:calc(100px + env(safe-area-inset-bottom,0px))}
  .sheetbg{background:rgba(10,5,10,.28)}
  nav.tabs.open{width:auto;bottom:calc(84px + env(safe-area-inset-bottom,0px));border-radius:24px;background:var(--glass-menu);border:1px solid var(--glass-line);box-shadow:var(--shadow-lg);-webkit-backdrop-filter:blur(22px) saturate(180%);backdrop-filter:blur(22px) saturate(180%)}
  nav.tabs.open .segind{display:none}
  nav.tabs.open button[aria-selected="true"]{background:var(--grad);color:#fff}
  .toast{bottom:calc(env(safe-area-inset-bottom,0px) + 96px)}
  .subtabs{border-radius:16px;margin-left:0;margin-right:0;padding:4px}
}
.bottombar .bt-off{display:none!important}
@media (prefers-reduced-motion:reduce){body::before,body::after{animation:none}.segind{transition:none}}

/* Touch: kein Doppeltipp-Zoom beim schnellen Tippen (PIN-Feld, Kasse, Buttons); Zoomen mit zwei Fingern bleibt möglich */
button,.btn,.tile,.pad,.pad button,.person,input,select,textarea,label,a,.bottombar,nav.tabs,.subtabs,.seg{touch-action:manipulation}

/* Benachrichtigungen: Glocke im Kopf + Liste (Glas wie der Kopf) */
.bellbtn{position:relative;display:inline-grid;place-items:center;width:36px;height:36px;border-radius:12px;border:1px solid var(--glass-line);background:transparent;color:var(--fg);cursor:pointer;flex:none}
.bellbtn:hover,.bellbtn[aria-expanded="true"]{background:var(--magenta-soft)}
.bellbtn .nb{position:absolute;top:-6px;right:-8px;min-width:18px;height:18px;font-size:10px;padding:0 5px}
.bellbtn .nb:empty{display:none}
.bellpanel{position:fixed;z-index:60;top:calc(env(safe-area-inset-top,0px) + 74px);right:max(16px,calc((100vw - 1280px)/2 + 16px));width:min(400px,calc(100vw - 32px));max-height:min(70vh,560px);overflow:hidden;background:var(--glass-solid)!important;border:1px solid var(--glass-line)!important;border-radius:22px!important;box-shadow:var(--shadow-lg)!important;-webkit-backdrop-filter:blur(22px) saturate(180%);backdrop-filter:blur(22px) saturate(180%)}
.bellpanel[hidden]{display:none}
.bellpanel .head{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:nowrap}
.bellpanel .head h2{font-size:18px;margin:0;white-space:nowrap}
.belllist{display:flex;flex-direction:column;gap:6px;overflow-y:auto;min-height:0;margin:0 -4px;padding:0 4px}
.bellitem{display:flex;flex-direction:column;gap:2px;text-align:left;width:100%;padding:10px 12px;border-radius:14px;border:1px solid var(--card-line);background:var(--card);color:var(--fg);cursor:pointer;font:inherit}
.bellitem.neu{border-left:4px solid var(--magenta)}
.bellitem .bt{font-weight:700;font-size:14px}
.bellitem .bx{font-size:13px;color:var(--fg);opacity:.85}
.bellitem .bw{font-size:12px;color:var(--muted)}
.bellitem:not(.neu) .bt{font-weight:600}
@media (max-width:700px){.bellpanel{left:16px;right:16px;width:auto;top:calc(env(safe-area-inset-top,0px) + 70px);max-height:calc(100vh - 180px)}}

/* Push-Einstellungen im Profil */
.pushkat{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:8px;margin-top:6px}
.pushopt{display:flex;gap:8px;align-items:flex-start;padding:8px 10px;border:1px solid var(--card-line);border-radius:12px;cursor:pointer}
.pushopt input{flex:none;width:17px;height:17px;margin-top:2px}

/* Vertretungen: Zwischenüberschriften (gesucht zuerst) */
.vhead{font:700 13px var(--body);text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:6px 2px 0}
.vhead:first-child{margin-top:0}

/* Plan-Editor: „gilt ab“ */
.abrow{display:grid;grid-template-columns:minmax(0,290px) minmax(0,1fr);gap:12px;align-items:center;padding:10px 12px;border-radius:12px;background:var(--magenta-soft)}
@media (max-width:640px){.abrow{grid-template-columns:1fr}}

/* Anmeldung: „Angemeldet bleiben“ */
.bleiben{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--fg);cursor:pointer;text-align:left;flex-wrap:wrap;justify-content:center}
.bleiben[hidden]{display:none}
.bleiben input{flex:none;width:17px;height:17px;margin:0}
.bleiben .note{font-size:12px}

/* Plan-Editor: betroffene Vertretungen */
.impactbox{padding:10px 14px;border-radius:12px;border:1px solid var(--magenta);background:var(--magenta-soft);font-size:14px;color:var(--fg)}
.impactbox[hidden]{display:none}
.impactbox ul{margin:6px 0 0;padding-left:20px}
.impactbox li{margin:2px 0}

/* Planung: Archiv */
.semhead{font:700 13px var(--body);text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:14px 2px 8px}
.pltab{display:flex;flex-direction:column;gap:2px;border-top:1px dashed var(--card-line);padding-top:8px}
.plrow{display:grid;grid-template-columns:32px 98px minmax(0,160px) minmax(0,1fr);gap:8px;align-items:baseline;font-size:14px}
@media (max-width:640px){.plrow{grid-template-columns:28px 92px minmax(0,1fr)}.plrow .note{grid-column:2 / -1}}