@font-face{font-family:'Saira Condensed';font-weight:600;font-display:swap;src:url(/fonts/saira-condensed-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Saira Condensed';font-weight:700;font-display:swap;src:url(/fonts/saira-condensed-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Saira Condensed';font-weight:800;font-display:swap;src:url(/fonts/saira-condensed-latin-800-normal.woff2) format('woff2')}
@font-face{font-family:'Roboto';font-weight:400;font-display:swap;src:url(/fonts/roboto-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Roboto';font-weight:400;font-style:italic;font-display:swap;src:url(/fonts/roboto-latin-400-italic.woff2) format('woff2')}
@font-face{font-family:'Roboto';font-weight:500;font-display:swap;src:url(/fonts/roboto-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Roboto';font-weight:700;font-display:swap;src:url(/fonts/roboto-latin-700-normal.woff2) format('woff2')}
/* Layout: T36-Look in one deliberate theme: anthracite page, black header with cyan rule, white panels carry the content; flowchart pans inside a white panel; technique card = bottom sheet on phone, side panel on tablet. */
:root{
  --bg:#231F20; --on-bg:#F4F3F3; --on-bg-muted:#ABA6A7;
  --surface:#FFFFFF; --surface-2:#F0F0F0; --ink:#231F20; --muted:#5E5A5B; --panel-muted:#5E5A5B; --line:#CDC9CA;
  --brand:#0B0A0A; --brand-2:#2E2A2B; --on-brand:#FFFFFF; --on-brand-muted:#ABA6A7;
  --accent:#00C0FF; --accent-ink:#0077A8;
  --start:#00C0FF; --on-start:#0B1A22;
  --pos:#231F20; --on-pos:#FFFFFF;
  --cond:#4B4647;
  --auf:#C62828; --auf-bg:#FCE4E2;
  --kon:#1D5FBF; --kon-bg:#E1EBFA;
  --td:#2E7D32; --td-bg:#E3F2E4;
  --abw:#A86400; --abw-bg:#FDF0D9;
  --ok:#2E7D32; --warn:#C62828;
  --shadow:0 10px 30px rgba(0,0,0,.45);
  --f-display:'Saira Condensed','Arial Narrow',Arial,sans-serif;
  --f-body:'Roboto',system-ui,-apple-system,'Segoe UI',sans-serif;
}
.wrap{color:var(--on-bg);--muted:var(--on-bg-muted)}
.search,.seg,.zoom button,.setsw button,.qbtn,.prog,.setcard,.dg-scroll,.drill,.tk,.librow,.empty,.legend,.setnav button,.ol{color:var(--ink);--muted:var(--panel-muted)}
.legend{background:var(--surface);padding:10px 12px;border-radius:10px}
*{box-sizing:border-box}
html,body{background:var(--bg)}
body{color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.45;-webkit-text-size-adjust:100%}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:30;background:var(--brand)}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2.5px solid var(--start);outline-offset:2px}
.muted{color:var(--muted)}
h1,h2,h3{font-family:var(--f-display);text-wrap:balance;margin:0;line-height:1.05}

#app{min-height:100%;transition:margin-right .2s ease}

/* Header */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--brand);color:var(--on-brand);border-bottom:3px solid var(--accent);
  padding-left:max(12px,env(safe-area-inset-left,0px));padding-right:max(12px,env(safe-area-inset-right,0px));padding-block:8px;
  display:flex;align-items:center;gap:8px;min-height:56px}
.top .back{width:40px;height:40px;border-radius:10px;border:0;background:var(--brand-2);color:var(--on-brand);font-size:20px;display:grid;place-items:center;flex:none}
.top .ttl{flex:1;min-width:0}
.top .ttl small{display:block;font-family:var(--f-display);letter-spacing:.14em;text-transform:uppercase;font-size:11px;color:var(--on-brand-muted);font-weight:600}
.top .ttl b{display:block;font-family:var(--f-display);font-size:21px;font-weight:700;letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.role{border:1.5px solid var(--on-brand-muted);background:transparent;color:var(--on-brand);border-radius:999px;padding:6px 12px;font-family:var(--f-display);font-weight:600;font-size:14px;letter-spacing:.05em;text-transform:uppercase;flex:none;display:flex;gap:6px;align-items:center}
.role i{width:8px;height:8px;border-radius:50%;background:var(--on-brand-muted);display:inline-block}
body.trainer .role{background:var(--accent);border-color:var(--accent);color:var(--on-start)}
body.trainer .role i{background:var(--on-start)}

.wrap{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:20px 48px;max-width:1100px;margin:0 auto;display:flex;flex-direction:column;gap:22px}
.eyebrow{font-family:var(--f-display);font-weight:600;letter-spacing:.14em;text-transform:uppercase;font-size:12.5px;color:var(--muted)}
.lead{color:var(--muted);max-width:62ch;margin:6px 0 0}

/* Home */
.hero h1{font-size:clamp(34px,7vw,52px);font-weight:700;text-transform:uppercase;letter-spacing:.01em}
.hero h1 span{color:var(--start)}
.progs{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}
.prog{background:var(--surface);border:1.5px solid var(--line);border-radius:14px;padding:18px;text-align:left;display:flex;flex-direction:column;gap:12px;min-width:0}
.prog:not(:disabled):hover{border-color:var(--start)}
.prog h2{font-size:30px;font-weight:700;text-transform:uppercase;overflow-wrap:anywhere;hyphens:auto}
.prog p{margin:0;color:var(--muted)}
.prog .sets{display:flex;gap:6px;flex-wrap:wrap}
.prog .sets span{width:30px;height:30px;border-radius:6px;background:var(--pos);color:var(--on-pos);display:grid;place-items:center;font-family:var(--f-display);font-weight:700}
.prog .meta{display:flex;gap:14px;flex-wrap:wrap;font-size:14px;color:var(--muted)}
.prog .meta b{color:var(--ink);font-variant-numeric:tabular-nums}
.prog:disabled{border-style:dashed;opacity:.75;cursor:default}
.tag-soon{align-self:flex-start;font-family:var(--f-display);font-weight:600;font-size:12px;letter-spacing:.1em;text-transform:uppercase;border:1.5px solid var(--line);border-radius:999px;padding:2px 10px;color:var(--muted)}
.quick{display:flex;gap:10px;flex-wrap:wrap}
.qbtn{display:flex;align-items:center;gap:8px;background:var(--surface);border:1.5px solid var(--line);border-radius:10px;padding:10px 14px;font-weight:600}
.qbtn .n{background:var(--start);color:var(--on-start);border-radius:999px;font-size:12px;padding:1px 8px;font-variant-numeric:tabular-nums}

/* Program */
.setgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.setcard{background:var(--surface);border:1.5px solid var(--line);border-radius:12px;padding:14px;text-align:left;display:grid;grid-template-columns:52px 1fr;gap:4px 14px;align-items:start;min-width:0}
.setcard:hover{border-color:var(--start)}
.setcard .num{grid-row:span 3;width:52px;height:52px;border-radius:8px;background:var(--pos);color:var(--on-pos);display:grid;place-items:center;font-family:var(--f-display);font-weight:700;font-size:30px}
.setcard h3{font-size:21px;font-weight:700;min-width:0}
.setcard .st{font-size:14px;color:var(--muted)}
.setcard .rel{font-size:13px;color:var(--muted);display:flex;flex-wrap:wrap;gap:4px 10px}
.setcard .rel b{color:var(--ink);font-weight:600}

.legend{display:flex;flex-wrap:wrap;gap:8px 14px;font-size:13.5px;align-items:center}
.legend .lg{display:flex;align-items:center;gap:6px}
.sw{display:inline-block;width:22px;height:14px;border-radius:999px;border:1.5px solid}
.sw.pos{border-radius:3px;background:var(--pos);border-color:var(--pos)}
.sw.start{border-radius:0;background:var(--start);border-color:var(--start)}
.sw.cond{border-radius:2px;border-style:dashed;border-color:var(--cond)}
.sw.link{border-radius:0;background:var(--surface-2);border-color:var(--ink)}
.cat-aufgabe{--c:var(--auf);--cb:var(--auf-bg)}
.cat-kontrolle{--c:var(--kon);--cb:var(--kon-bg)}
.cat-takedown{--c:var(--td);--cb:var(--td-bg)}
.cat-abwehr{--c:var(--abw);--cb:var(--abw-bg)}
.cat-position{--c:var(--pos);--cb:var(--pos)}
.sw[class*="cat-"]{background:var(--cb);border-color:var(--c)}

/* Set view toolbar */
.setbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:space-between}
.seg{display:inline-flex;background:var(--surface-2);border-radius:10px;padding:3px}
.seg button{border:0;background:transparent;border-radius:8px;padding:7px 14px;font-weight:600;color:var(--muted)}
.seg button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.15)}
.zoom{display:inline-flex;gap:4px}
.zoom button{width:40px;height:38px;border-radius:9px;border:1.5px solid var(--line);background:var(--surface);font-weight:700;font-size:17px}
.zoom button.fit{width:auto;padding:0 12px;font-size:14px}
.setsw{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:6px}
.setsw button.dtab b{color:var(--accent-ink)}
.setsw button.dtab[aria-current="true"]{background:var(--start);border-color:var(--start)}
.setsw button.dtab[aria-current="true"] b{color:var(--on-start)}
.drills{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px;align-items:start}
.drillsec{display:flex;flex-direction:column;gap:8px}
.drillsec .drill{max-width:460px}
.drill{background:var(--surface);border:1.5px solid var(--line);border-top:4px solid var(--start);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:12px;scroll-margin-top:calc(72px + env(safe-area-inset-top,0px));min-width:0}
.drill-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.drill-h h3{font-size:24px;font-weight:700;text-transform:uppercase}
.drill-h .linkbtn{margin-left:auto;font-size:14px}
.timer{display:inline-flex;align-items:center;gap:3px;font-weight:700;color:var(--muted);font-size:15px;font-variant-numeric:tabular-nums}
.timer svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2}
.dsteps{display:flex;flex-direction:column;align-items:flex-start}
.dn{position:relative;display:inline-flex;align-items:center;gap:8px;border:1.5px solid var(--c);background:var(--cb);color:var(--ink);border-radius:999px;padding:6px 14px;font-weight:600;font-size:15px;text-align:left}
.dn.cat-position{color:var(--on-pos);border-radius:4px;font-family:var(--f-display);text-transform:uppercase;letter-spacing:.03em;font-size:16px;font-weight:700}
.dn.boxed{box-shadow:0 0 0 3px var(--surface),0 0 0 5px var(--ink)}
.dn .vid{position:static;border:0;width:18px;height:18px;flex:none}
.de{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-left:16px;padding:6px 0 6px 14px;border-left:2px solid var(--line);min-height:34px;font-size:14px}
.de .arr{color:var(--muted);font-weight:700;margin-left:-6px}
.de.last{border-left-style:dashed}
.dlegend{font-size:13.5px;color:var(--muted);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.dlegend .bx{display:inline-block;width:22px;height:14px;border-radius:3px;background:var(--surface);box-shadow:0 0 0 2px var(--bg),0 0 0 3.5px var(--on-bg)}
.setsw button{background:var(--surface);border:1.5px solid var(--line);border-radius:10px;padding:8px 8px 9px;text-align:left;display:flex;flex-direction:column;gap:2px;min-width:0}
.setsw button b{font-family:var(--f-display);font-weight:700;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.setsw button span{font-weight:600;font-size:13.5px;line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.setsw button:hover{border-color:var(--start)}
.setsw button[aria-current="true"]{background:var(--accent);border-color:var(--accent);color:var(--on-start)}
.setsw button[aria-current="true"] b{color:var(--on-start)}
@media (max-width:899px){.setsw{display:flex;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:2px}.setsw::-webkit-scrollbar{display:none}.setsw button{flex:0 0 132px}}
details.lgd summary{cursor:pointer;font-size:14px;color:var(--muted);font-weight:600}
details.lgd .legend{margin-top:10px}

/* Diagram */
.dg-scroll{overflow:auto;-webkit-overflow-scrolling:touch;background:var(--surface);border:1.5px solid var(--line);border-radius:14px;height:calc(100dvh - 240px);min-height:380px;
  background-image:radial-gradient(var(--surface-2) 1.2px,transparent 1.2px);background-size:22px 22px}
.dg-size{position:relative}
.dg{position:absolute;left:0;top:0;transform-origin:0 0}
.dg svg{position:absolute;left:0;top:0;overflow:visible}
.dg svg path{fill:none;stroke:var(--line);stroke-width:1.6}
.dg svg path.on{stroke:var(--start);stroke-width:2.4}
.nd{position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:4px 8px;line-height:1.15;font-size:13px;font-weight:600;border:1.5px solid transparent;transition:opacity .15s, box-shadow .15s}
.nd .t{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
button.nd:hover{box-shadow:0 0 0 3px var(--surface-2)}
.nd-start{background:var(--start);color:var(--on-start);font-family:var(--f-display);text-transform:uppercase;letter-spacing:.03em;font-size:15px;font-weight:700}
.nd-pos{background:var(--pos);color:var(--on-pos);border-radius:4px;font-family:var(--f-display);text-transform:uppercase;letter-spacing:.03em;font-size:16px;font-weight:700}
.nd-tech{background:var(--cb);border-color:var(--c);color:var(--ink);border-radius:999px}
.nd-cond{border:1.5px dashed var(--cond);color:var(--cond);font-style:italic;font-weight:500;border-radius:3px;background:var(--surface)}
.nd-link,.nd-jump{background:var(--surface-2);border:1.5px solid var(--ink);gap:3px;padding:4px}
.nd-link .lk{display:flex;gap:4px;flex-wrap:wrap;justify-content:center}
.nd-link button,.nd-jump{font-family:var(--f-display);font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:14px}
.nd-link button{border:0;background:var(--ink);color:var(--surface);border-radius:4px;padding:2px 8px}
.nd-link .s{font-size:11.5px;font-weight:500;color:var(--muted)}
.nd-jump .s{font-size:11.5px;font-weight:500;color:var(--muted);text-transform:none;letter-spacing:0;font-family:var(--f-body)}
.vid{position:absolute;top:-7px;right:-5px;width:20px;height:20px;border-radius:50%;background:var(--start);color:var(--on-start);font-size:9px;display:grid;place-items:center;font-style:normal;border:2px solid var(--surface)}
.dg.hl .nd{opacity:.42}
.dg.hl .nd.path,.dg.hl .nd.sel{opacity:1}
.nd.sel{box-shadow:0 0 0 3px var(--start)!important}

/* Outline */

/* Library */
.search{width:100%;padding:12px 14px;border-radius:12px;border:1.5px solid var(--line);background:var(--surface);font-size:16px}
.libgrp h2{font-size:20px;text-transform:uppercase;letter-spacing:.04em;display:flex;align-items:center;gap:8px;margin-bottom:8px}
.librows{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:8px}
.librow{display:flex;align-items:center;gap:10px;background:var(--surface);border:1.5px solid var(--line);border-left:5px solid var(--c);border-radius:10px;padding:10px 12px;text-align:left;min-width:0}
.librow .nm{flex:1;min-width:0;font-weight:600}
.librow .nm small{display:block;font-weight:400;color:var(--muted);font-size:13px}
.librow .vv{font-size:12px;color:var(--accent-ink);font-weight:700;flex:none}

/* Tickets */
.tk{background:var(--surface);border:1.5px solid var(--line);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:6px}
.tk.done{opacity:.6}
.tk .h{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:13px;color:var(--muted)}
.tk .ty{font-family:var(--f-display);font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:12.5px;border-radius:4px;padding:1px 7px;background:var(--surface-2);color:var(--ink)}
.tk .ty.fehler{background:var(--auf-bg);color:var(--auf)}
.tk .ty.idee{background:var(--td-bg);color:var(--td)}
.tk p{margin:0;white-space:pre-wrap;overflow-wrap:anywhere}
.tk .acts{display:flex;gap:8px;flex-wrap:wrap}
.linkbtn{border:0;background:none;padding:0;color:var(--kon);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.empty{background:var(--surface);border:1.5px dashed var(--line);border-radius:12px;padding:18px;color:var(--muted)}

/* Sheet */
.scrim{position:fixed;inset:0;background:rgba(8,14,26,.45);z-index:40}
.sheet{position:fixed;left:0;right:0;bottom:0;top:max(7vh,calc(env(safe-area-inset-top,0px) + 16px));z-index:41;background:var(--surface);border-radius:18px 18px 0 0;box-shadow:var(--shadow);display:flex;flex-direction:column;overflow:hidden}
.sh-head{display:flex;gap:10px;align-items:flex-start;padding:16px max(16px,env(safe-area-inset-right,0px)) 12px max(16px,env(safe-area-inset-left,0px));border-bottom:1.5px solid var(--surface-2)}
.sh-head .hd{flex:1;min-width:0}
.sh-head h2{font-size:28px;font-weight:700;text-transform:uppercase;overflow-wrap:anywhere}
.catpill{display:inline-flex;align-items:center;gap:6px;font-family:var(--f-display);font-weight:700;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--c);margin-bottom:4px}
.catpill::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--c)}
.x{width:40px;height:40px;border-radius:10px;border:0;background:var(--surface-2);font-size:20px;flex:none}
.sh-body{overflow-y:auto;-webkit-overflow-scrolling:touch;padding:16px max(16px,env(safe-area-inset-right,0px)) calc(28px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));display:flex;flex-direction:column;gap:20px}
.sec h3{font-size:15px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-weight:700;margin-bottom:8px}
.video{aspect-ratio:9/16;max-height:52vh;max-width:100%;margin:0 auto;width:auto;background:var(--brand);border-radius:12px;overflow:hidden;display:grid;place-items:center;color:var(--on-brand-muted);text-align:center;font-size:14px}
.video.empty-v{aspect-ratio:16/9;width:100%;max-height:none;padding:16px;background:var(--surface-2);color:var(--muted);border:1.5px dashed var(--line)}
.video video{width:100%;height:100%;object-fit:contain;background:#000;display:block}
.vtools{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:10px}
.btn{border:1.5px solid var(--line);background:var(--surface);border-radius:10px;padding:9px 14px;font-weight:600;display:inline-flex;align-items:center;gap:6px}
.btn.pri{background:var(--start);border-color:var(--start);color:var(--on-start)}
.btn.sm{padding:5px 10px;font-size:14px}
.btn.danger{color:var(--warn)}
label.btn input{display:none}
.txt{margin:0;white-space:pre-wrap;max-width:65ch}
ol.steps{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:4px}
ol.steps li::marker{font-family:var(--f-display);font-weight:700;color:var(--accent-ink)}
.note{border-left:4px solid var(--start);background:var(--surface-2);padding:8px 12px;border-radius:0 8px 8px 0;margin:0;white-space:pre-wrap}
.placeholder{color:var(--muted);font-style:italic;margin:0}
.occ{border:1.5px solid var(--surface-2);border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;gap:8px}
.occ-set{border:0;background:none;padding:0;text-align:left;font-family:var(--f-display);font-weight:700;font-size:18px;text-transform:uppercase;display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline}
.occ-set span{font-family:var(--f-body);text-transform:none;font-weight:600;font-size:13px;color:var(--kon)}
.occ-row{display:grid;grid-template-columns:62px 1fr;gap:8px;align-items:start;font-size:14.5px}
.occ-l{font-family:var(--f-display);font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:12px;color:var(--muted);padding-top:5px}
.occ-next{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
.occ-row>div,.occ-next li{display:flex;flex-wrap:wrap;gap:5px;align-items:center;min-width:0}
.chip{border:1.5px solid var(--c,var(--line));background:var(--cb,var(--surface));border-radius:999px;padding:3px 10px;font-size:14px;font-weight:600;line-height:1.25;text-align:left}
.chip.cat-position{color:var(--on-pos);border-radius:4px}
.chip-link{border-radius:4px;border-color:var(--ink);background:var(--surface-2)}
.chip-start{background:var(--start);border-color:var(--start);color:var(--on-start);border-radius:0}
.chip .rm{margin-left:6px;opacity:.7}
.when{font-style:italic;color:var(--cond);font-weight:500}
.tags{display:flex;flex-wrap:wrap;gap:6px}
.form{display:flex;flex-direction:column;gap:12px}
.form label{display:flex;flex-direction:column;gap:4px;font-weight:600;font-size:14px}
.form label small{font-weight:400;color:var(--muted)}
.form input,.form select,.form textarea{border:1.5px solid var(--line);background:var(--surface-2);color:var(--ink);border-radius:10px;padding:9px 11px;font-size:16px;font-weight:400;width:100%}
.form textarea{min-height:84px;resize:vertical}
.form .row2{display:flex;gap:8px;flex-wrap:wrap}
.form .row2>*{flex:1;min-width:140px}
.form .acts{display:flex;gap:8px;flex-wrap:wrap}

body:not(.trainer) .tr-only{display:none!important}

.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--accent);color:var(--on-start);padding:10px 16px;border-radius:10px;font-weight:600;z-index:60;max-width:calc(100% - 32px);box-shadow:var(--shadow)}

@media (min-width:900px){
  .scrim{display:none}
  .sheet{left:auto;top:0;width:420px;border-radius:0;border-left:1.5px solid var(--line);padding-top:env(safe-area-inset-top,0px)}
  body.panel #app{margin-right:420px}
  .video{max-height:46vh}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---------- Server-Version: Anmeldung, Konto, Offline ---------- */
.auth{min-height:100%;display:grid;place-items:center;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:32px}
.auth-card{width:100%;max-width:420px;background:var(--surface);color:var(--ink);border-radius:16px;padding:24px 20px;display:flex;flex-direction:column;gap:16px;border-top:5px solid var(--accent);box-shadow:var(--shadow)}
.auth-card h1{font-size:34px;text-transform:uppercase;font-weight:800}
.auth-card .sub{margin:0;color:var(--panel-muted)}
.auth-brand{font-family:var(--f-display);font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:13px;color:var(--accent-ink)}
.err{background:var(--auf-bg);color:var(--auf);border-radius:8px;padding:8px 12px;font-weight:500;margin:0}
.btn.wide{width:100%;justify-content:center;padding:12px 14px;font-size:16px}
.seg.full{display:flex}.seg.full button{flex:1}
.offbar{background:#3A3536;color:var(--on-bg);font-size:14px;padding:6px max(16px,env(safe-area-inset-right,0px)) 6px max(16px,env(safe-area-inset-left,0px));display:flex;gap:8px;align-items:center}
.offbar::before{content:"";width:8px;height:8px;border-radius:50%;background:#F0A43A;flex:none}
.panel{background:var(--surface);color:var(--ink);--muted:var(--panel-muted);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:12px}
.panel h2{font-size:22px;text-transform:uppercase;font-weight:700}
.panel p{margin:0}
.bar{height:10px;border-radius:999px;background:var(--surface-2);overflow:hidden}
.bar i{display:block;height:100%;background:var(--accent);width:0;transition:width .2s}
.kv{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:14.5px}
.kv b{font-variant-numeric:tabular-nums}
.trow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;border-top:1.5px solid var(--surface-2);padding-top:10px}
.trow .nm{flex:1;min-width:140px}
.trow .nm small{display:block;color:var(--muted)}
.badge{font-family:var(--f-display);font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase;background:var(--surface-2);border-radius:4px;padding:1px 7px}
.vstate{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:16px;text-align:center}
.spin{width:28px;height:28px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--accent);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.upl{width:100%;max-width:320px}
.off-ok{color:var(--ok);font-weight:600}
body.offline .on-only{opacity:.5;pointer-events:none}
.role{cursor:pointer}