/* Momo Büro – Designsystem
   Marke: Plus Jakarta Sans · Navy #0e162b · Verlauf Türkis #0ccdfc → Blau #1242fc → Violett #9443fc
   Alle Größen in rem, damit „Schriftgröße“ in den Einstellungen alles mitskaliert. */

@font-face{font-family:Jakarta;font-weight:400;font-display:swap;src:url(/fonts/plus-jakarta-sans-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:Jakarta;font-weight:500;font-display:swap;src:url(/fonts/plus-jakarta-sans-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:Jakarta;font-weight:600;font-display:swap;src:url(/fonts/plus-jakarta-sans-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:Jakarta;font-weight:700;font-display:swap;src:url(/fonts/plus-jakarta-sans-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:Jakarta;font-weight:800;font-display:swap;src:url(/fonts/plus-jakarta-sans-latin-800-normal.woff2) format("woff2")}

:root{
  --cyan:#0ccdfc;--blue:#1242fc;--violet:#9443fc;
  --grad:linear-gradient(115deg,var(--cyan) 0%,var(--blue) 52%,var(--violet) 100%);
  --acc:#1242fc;            /* Akzent – in „Aussehen“ wählbar */
  --acc-ink:#fff;
  --acc-hi:var(--acc);
  --acc-soft:color-mix(in srgb,var(--acc) 10%,var(--surface));
  --acc-line:color-mix(in srgb,var(--acc) 28%,var(--surface));

  --paper:#f5f7ff;--surface:#ffffff;--sunken:#eef1fb;
  --ink:#0e162b;--ink2:#26304a;--mut:#5d6782;--faint:#8c94ab;
  --line:#dde3f3;--line2:#eaeef8;

  --ok:#03a676;--ok-soft:#dcf7ee;--warn:#c98a00;--warn-soft:#fff4d6;--bad:#e5484d;--bad-soft:#ffe4e5;

  --side-bg:#0e162b;--side-ink:#b9c1d6;--side-ink-hi:#fff;--side-mut:#66708c;--side-hover:#ffffff0f;--side-on:#ffffff17;

  --r:14px;--r-s:10px;--r-xs:7px;
  --sp:1;                                   /* Dichte-Faktor */
  --pad:calc(1.25rem * var(--sp));
  --row:calc(.7rem * var(--sp));
  --shadow-pop:0 18px 50px -12px #0e162b40,0 2px 6px #0e162b14;
  font-family:Jakarta,"Segoe UI",system-ui,sans-serif;
  font-size:calc(15px * var(--scale,1));
  color-scheme:light;
}
/* Dunkelmodus – Anthrazit (Standard) */
:root[data-modus="dunkel"]{
  --paper:#18191c;--surface:#202125;--sunken:#1b1c1f;
  --ink:#ededef;--ink2:#c8c9ce;--mut:#9b9da6;--faint:#6f717a;
  --line:#2f3136;--line2:#28292e;
  --ok:#2fcf95;--ok-soft:#173a2e;--warn:#f0b43a;--warn-soft:#3a3018;--bad:#ff6b6f;--bad-soft:#3d2023;
  --acc-hi:color-mix(in srgb,var(--acc) 62%,#fff);
  --acc-soft:color-mix(in srgb,var(--acc) 16%,var(--surface));--acc-line:color-mix(in srgb,var(--acc) 40%,var(--surface));
  --side-bg:#121315;--side-ink:#b4b6bd;--side-mut:#6c6e77;--side-hover:#ffffff0a;--side-on:#ffffff12;
  --shadow-pop:0 24px 60px -12px #000c,0 2px 8px #0008;
  color-scheme:dark;
}
@media (prefers-color-scheme:dark){
  :root[data-modus="auto"]{
    --paper:#18191c;--surface:#202125;--sunken:#1b1c1f;
    --ink:#ededef;--ink2:#c8c9ce;--mut:#9b9da6;--faint:#6f717a;
    --line:#2f3136;--line2:#28292e;
    --ok:#2fcf95;--ok-soft:#173a2e;--warn:#f0b43a;--warn-soft:#3a3018;--bad:#ff6b6f;--bad-soft:#3d2023;
    --acc-hi:color-mix(in srgb,var(--acc) 62%,#fff);
    --acc-soft:color-mix(in srgb,var(--acc) 16%,var(--surface));--acc-line:color-mix(in srgb,var(--acc) 40%,var(--surface));
    --side-bg:#121315;--side-ink:#b4b6bd;--side-mut:#6c6e77;--side-hover:#ffffff0a;--side-on:#ffffff12;
    --shadow-pop:0 24px 60px -12px #000c,0 2px 8px #0008;
    color-scheme:dark;
  }
}
/* Seitenleiste */
:root[data-seite="hell"]{--side-bg:var(--surface);--side-ink:var(--ink2);--side-ink-hi:var(--ink);--side-mut:var(--faint);--side-hover:var(--sunken);--side-on:var(--acc-soft)}
:root[data-seite="verlauf"]{--side-bg:linear-gradient(170deg,#0b3a8f 0%,#1242fc 45%,#6a2fe0 100%);--side-ink:#dfe6ff;--side-ink-hi:#fff;--side-mut:#a9b8f5;--side-hover:#ffffff1a;--side-on:#ffffff2b}
/* Dichte & Ecken */
:root[data-dichte="kompakt"]{--sp:.72}
:root[data-dichte="luftig"]{--sp:1.3}
:root[data-ecken="eckig"]{--r:4px;--r-s:3px;--r-xs:2px}
:root[data-ecken="sehr-rund"]{--r:22px;--r-s:14px;--r-xs:10px}

*{box-sizing:border-box}
html,body{margin:0;background:var(--paper);color:var(--ink);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{font-size:1rem;line-height:1.5}
a{color:var(--acc-hi);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.num,.r,.v,.tbl td.r{font-variant-numeric:tabular-nums}
h1,h2,h3{text-wrap:balance}

/* ---------- Gerüst ---------- */
.app{display:grid;grid-template-columns:15.5rem minmax(0,1fr);min-height:100vh}
.side{background:var(--side-bg);color:var(--side-ink);padding:1.1rem .75rem;position:sticky;top:0;height:100vh;overflow:auto;display:flex;flex-direction:column;gap:1px;border-right:1px solid transparent}
:root[data-seite="hell"] .side,:root[data-modus="dunkel"] .side{border-right-color:var(--line2)}
.brand{display:flex;align-items:center;gap:.7rem;padding:.25rem .55rem 1.3rem;color:var(--side-ink-hi);text-decoration:none!important}
.brand-mark{width:2.6rem;height:2.3rem;flex:none;display:grid;place-items:center}
.brand-mark img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 4px 10px #1242fc40)}
.brand-mark.fallback{background:var(--grad);color:#fff;font-weight:800;font-size:1.15rem}
.brand b{display:block;font-size:1.02rem;font-weight:800;letter-spacing:-.01em;line-height:1.15}
.brand small{display:block;font-size:.76rem;color:var(--side-mut);font-weight:500}
.nav-h{font-size:.74rem;font-weight:600;color:var(--side-mut);padding:1rem .8rem .35rem}
.side a.nav{display:flex;align-items:center;gap:.7rem;padding:.55rem .8rem;border-radius:var(--r-s);color:var(--side-ink);font-size:.94rem;font-weight:500;position:relative;text-decoration:none}
.side a.nav:hover{background:var(--side-hover);color:var(--side-ink-hi)}
.side a.nav.on{background:var(--side-on);color:var(--side-ink-hi);font-weight:600}
.side a.nav.on::before{content:"";position:absolute;left:-.75rem;top:.45rem;bottom:.45rem;width:3px;border-radius:0 3px 3px 0;background:var(--grad)}
.side a.nav svg{width:1.15rem;height:1.15rem;flex:none;opacity:.9}
.pill{margin-left:auto;background:var(--bad);color:#fff;border-radius:99px;font-size:.7rem;padding:.05rem .45rem;font-weight:700;line-height:1.5}
.side .foot{margin-top:auto;padding:.8rem;display:flex;flex-direction:column;gap:.4rem}
.side .foot a{color:var(--side-mut);font-size:.84rem}

.main{min-width:0;display:flex;flex-direction:column}
.top{display:flex;align-items:center;gap:.8rem;padding:.85rem 2rem;background:color-mix(in srgb,var(--paper) 82%,transparent);backdrop-filter:blur(10px);position:sticky;top:0;z-index:5;border-bottom:1px solid var(--line2)}
.top h1{font-size:1.2rem;margin:0;font-weight:700;letter-spacing:-.015em}
.top .sp{flex:1}
.top .burger{display:none;padding:.4rem}
.top .burger svg{width:1.4rem;height:1.4rem}
.page{padding:1.6rem 2rem 4rem;max-width:84rem;width:100%}

/* Stoppuhr */
.timer{display:flex;align-items:center;gap:.55rem;border:1px solid var(--line);background:var(--surface);border-radius:99px;padding:.25rem .3rem .25rem .8rem;font-size:.88rem}
.timer.run{border-color:color-mix(in srgb,var(--ok) 45%,var(--line));background:var(--ok-soft)}
.timer b{font-variant-numeric:tabular-nums}
.pulse{width:.5rem;height:.5rem;border-radius:50%;background:var(--ok);animation:p 1.6s ease-in-out infinite}
@keyframes p{50%{opacity:.25}}

/* ---------- Flächen ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:var(--pad)}
.card.quiet{background:transparent;border-style:dashed}
.card h2{font-size:1rem;font-weight:700;margin:0 0 calc(.8rem * var(--sp));display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;letter-spacing:-.005em}
.card h2 .sp{flex:1}
.card h2 a{font-size:.85rem;font-weight:600}
.sec-h{display:flex;align-items:baseline;gap:.6rem;margin:0 0 .7rem}
.sec-h h2{font-size:1.05rem;margin:0;font-weight:700}
.grid{display:grid;gap:calc(1rem * var(--sp))}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(3,minmax(0,1fr))}.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.split{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:calc(1.25rem * var(--sp));align-items:start}
.stack{display:flex;flex-direction:column;gap:calc(1rem * var(--sp))}

/* Kennzahl */
.kpi .l{color:var(--mut);font-size:.84rem;font-weight:500}
.kpi .v{font-size:1.65rem;font-weight:800;letter-spacing:-.025em;margin-top:.15rem;line-height:1.2}
.kpi .s{color:var(--mut);font-size:.8rem;margin-top:.2rem}
.meter{height:.4rem;background:var(--sunken);border-radius:99px;overflow:hidden;margin-top:.55rem}
.meter b{display:block;height:100%;background:var(--grad);border-radius:99px}

/* ---------- Heute ---------- */
.day{display:flex;align-items:flex-end;gap:2rem;flex-wrap:wrap;margin:.2rem 0 1.4rem}
.day .date{font-size:2.6rem;font-weight:800;letter-spacing:-.035em;line-height:1;margin:0}
.day .date span{display:block;font-size:1rem;font-weight:600;color:var(--mut);letter-spacing:0;margin-bottom:.45rem}
.day .sum{color:var(--ink2);font-size:.98rem;max-width:30rem;padding-bottom:.2rem;flex:1 1 16rem;margin:0}
.day .sum b{color:var(--ink)}
.day .quick{display:flex;gap:.5rem;flex-wrap:wrap;padding-bottom:.1rem}

.flow{display:grid;grid-template-columns:1fr 1fr 1.25fr;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-bottom:calc(1.25rem * var(--sp));position:relative}
.flow::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--grad)}
.flow a{padding:calc(1.1rem * var(--sp)) var(--pad);color:inherit;text-decoration:none;position:relative;display:block}
.flow a+a{border-left:1px solid var(--line2)}
@media (hover:hover){.flow a:hover{background:var(--sunken)}.flow a:hover::after{background:var(--sunken)}}
.flow a:not(:last-child)::after{content:"";position:absolute;right:-.45rem;top:50%;width:.8rem;height:.8rem;background:var(--surface);border-top:1px solid var(--line2);border-right:1px solid var(--line2);transform:translateY(-50%) rotate(45deg);z-index:1}

.flow .l{font-size:.84rem;color:var(--mut);font-weight:500}
.flow .v{font-size:1.75rem;font-weight:800;letter-spacing:-.03em;line-height:1.2;margin-top:.15rem}
.flow .s{font-size:.8rem;color:var(--mut);margin-top:.15rem}
.flow .s.bad{color:var(--bad);font-weight:600}
.flow .last .v{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- Knöpfe ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;border:1px solid var(--line);background:var(--surface);border-radius:var(--r-s);padding:calc(.5rem * var(--sp) + .05rem) .9rem;cursor:pointer;font-weight:600;font-size:.9rem;white-space:nowrap;color:var(--ink);text-decoration:none!important;transition:background-color .15s,border-color .15s,transform .08s;line-height:1.35}
.btn:hover{background:var(--sunken)}
.btn:active{transform:scale(.97)}
.btn svg{width:1rem;height:1rem}
.btn.p{background:var(--acc);border-color:var(--acc);color:var(--acc-ink)}
.btn.p:hover{background:color-mix(in srgb,var(--acc) 86%,#000)}
.btn.g{background:var(--grad);border:0;color:#fff;padding:calc(.5rem * var(--sp) + .1rem) .95rem}
.btn.g:hover{filter:brightness(1.07)}
.btn.d{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 30%,var(--line))}
.btn.d:hover{background:var(--bad-soft)}
.btn.ok{background:var(--ok);border-color:var(--ok);color:#fff}
.btn.s{padding:.3rem .65rem;font-size:.82rem;border-radius:var(--r-xs)}
.btn.ghost{border-color:transparent;background:transparent}
.btn.ghost:hover{background:var(--sunken)}
.btn.ghost.d:hover{background:var(--bad-soft)}
.btn[disabled]{opacity:.5;pointer-events:none}
.row{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}
.row .sp{flex:1}
.toolbar{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;margin-bottom:calc(1rem * var(--sp))}
.toolbar .sp{flex:1}
.mut{color:var(--mut)}.small{font-size:.85rem}

/* Status */
.badge{display:inline-flex;align-items:center;gap:.35rem;font-size:.76rem;font-weight:600;padding:.15rem .55rem;border-radius:99px;background:var(--acc-soft);color:var(--acc-hi);white-space:nowrap;text-decoration:none!important}
.badge::before{content:"";width:.4rem;height:.4rem;border-radius:50%;background:currentColor;opacity:.85}
.badge.ok{background:var(--ok-soft);color:var(--ok)}.badge.warn{background:var(--warn-soft);color:var(--warn)}.badge.bad{background:var(--bad-soft);color:var(--bad)}
.badge.grey{background:var(--sunken);color:var(--mut)}.badge.vio{background:color-mix(in srgb,var(--violet) 12%,var(--surface));color:var(--violet)}
.badge.plain::before{display:none}
.dot{width:.6rem;height:.6rem;border-radius:50%;display:inline-block;background:var(--faint);flex:none}
.dot.ok{background:var(--ok)}.dot.bad{background:var(--bad);box-shadow:0 0 0 .25rem color-mix(in srgb,var(--bad) 22%,transparent)}

/* ---------- Tabellen & Listen ---------- */
.tbl{width:100%;border-collapse:collapse;font-size:.92rem}
.tbl th{text-align:left;font-weight:600;color:var(--mut);font-size:.8rem;padding:calc(.55rem * var(--sp)) .75rem;border-bottom:1px solid var(--line);white-space:nowrap}
.tbl td{padding:var(--row) .75rem;border-bottom:1px solid var(--line2);vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl tr.click{cursor:pointer}
.tbl tr.click:hover td{background:var(--sunken)}
.tbl .r{text-align:right;white-space:nowrap}
.tbl td b{font-weight:600}
.tblwrap{overflow-x:auto;margin:0 calc(var(--pad) * -1);padding:0 var(--pad)}
.list{display:flex;flex-direction:column}
.li{display:flex;gap:.8rem;align-items:center;padding:var(--row) 0;border-bottom:1px solid var(--line2);color:inherit;text-decoration:none!important}
.li:last-child{border-bottom:0}
a.li:hover{background:var(--sunken);margin:0 calc(var(--pad) * -.5);padding-left:calc(var(--pad) * .5);padding-right:calc(var(--pad) * .5);border-radius:var(--r-xs)}
.li .t{flex:1;min-width:0}
.li .t b{font-weight:600}
.li .sub{font-size:.82rem;color:var(--mut);margin-top:.1rem}
.li .amt{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.empty{color:var(--mut);text-align:center;padding:2rem 1rem;font-size:.92rem}
.empty b{display:block;color:var(--ink);font-size:1rem;margin-bottom:.2rem}
.empty .btn{margin-top:.8rem}

/* Aufgaben */
.task{align-items:flex-start}
.task .chk{padding-top:.1rem}
.task.hoch .t b::after{content:"wichtig";margin-left:.5rem;font-size:.7rem;font-weight:700;color:var(--bad);background:var(--bad-soft);padding:.05rem .4rem;border-radius:99px;vertical-align:.1em}
.task.done .t b{text-decoration:line-through;color:var(--faint)}
.task .over{color:var(--bad);font-weight:600}

/* ---------- Formulare ---------- */
.f{display:grid;gap:calc(.85rem * var(--sp))}
.f2{grid-template-columns:1fr 1fr}.f3{grid-template-columns:repeat(3,1fr)}
label.fl{display:flex;flex-direction:column;gap:.35rem;font-size:.84rem;font-weight:600;color:var(--ink2)}
label.fl small{font-weight:400;color:var(--mut)}
input,select,textarea{border:1px solid var(--line);border-radius:var(--r-s);padding:calc(.55rem * var(--sp) + .05rem) .75rem;background:var(--surface);width:100%;outline:none;transition:border-color .15s,box-shadow .15s;font-size:.94rem}
input:hover,select:hover,textarea:hover{border-color:color-mix(in srgb,var(--ink) 22%,var(--line))}
input:focus,select:focus,textarea:focus{border-color:var(--acc);box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 18%,transparent)}
textarea{min-height:6rem;resize:vertical;line-height:1.5}
input[type=color]{padding:.2rem;height:2.5rem;cursor:pointer}
.chk{display:flex;align-items:center;gap:.6rem;font-size:.92rem;cursor:pointer}
.chk input{width:1.15rem;height:1.15rem;accent-color:var(--acc);flex:none}
.search{max-width:18rem}
.hint{font-size:.82rem;color:var(--mut)}

/* Beleg-Editor */
.doc-head{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin-bottom:1rem}
.doc-head .sp{flex:1}
.pos{width:100%;border-collapse:separate;border-spacing:0 .35rem}
.pos th{font-size:.78rem;color:var(--mut);font-weight:600;text-align:left;padding:0 .3rem}
.pos th.r{text-align:right}
.pos td{vertical-align:top;padding:0 .3rem}
.pos input,.pos textarea{padding:.45rem .6rem;font-size:.9rem}
.pos textarea{min-height:2.3rem;height:2.3rem;margin-top:.3rem;font-size:.84rem;color:var(--ink2)}
.pos .n{min-width:4.6rem;width:4.6rem}.pos .e{min-width:6rem;width:6rem}.pos .pr{min-width:7rem;width:7rem}
.pos .ges{min-width:7rem;text-align:right;padding-top:.55rem;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.sumbox{margin-left:auto;min-width:17rem}
.sumbox div{display:flex;justify-content:space-between;padding:.2rem 0;font-variant-numeric:tabular-nums;color:var(--ink2)}
.sumbox .tot{font-size:1.25rem;font-weight:800;color:var(--ink);border-top:2px solid var(--ink);margin-top:.4rem;padding-top:.5rem}
.note{background:var(--acc-soft);border:1px solid var(--acc-line);border-radius:var(--r-s);padding:.65rem .9rem;font-size:.88rem;color:var(--ink2);overflow-wrap:anywhere}
.note.warn{background:var(--warn-soft);border-color:color-mix(in srgb,var(--warn) 35%,transparent)}
.note.bad{background:var(--bad-soft);border-color:color-mix(in srgb,var(--bad) 35%,transparent)}
.locked{background:var(--acc-soft);border-radius:var(--r-s);padding:.65rem .9rem;font-size:.88rem;color:var(--ink2);overflow-wrap:anywhere}

/* ---------- Dialoge ---------- */
.modal-bg{position:fixed;inset:0;background:color-mix(in srgb,#0e162b 55%,transparent);display:grid;place-items:center;z-index:50;padding:1rem;animation:fi .16s ease-out}
.modal{background:var(--surface);border-radius:calc(var(--r) + 4px);width:min(38rem,100%);max-height:92vh;overflow:auto;padding:1.5rem;box-shadow:var(--shadow-pop);animation:up .2s cubic-bezier(.2,.8,.2,1)}
.modal.w{width:min(56rem,100%)}
.modal h3{margin:0 0 1.1rem;font-size:1.2rem;font-weight:700;letter-spacing:-.01em}
.modal .act{display:flex;justify-content:flex-end;gap:.5rem;margin-top:1.2rem;flex-wrap:wrap}
@keyframes fi{from{opacity:0}}@keyframes up{from{transform:translateY(10px) scale(.985);opacity:0}}
.toasts{position:fixed;bottom:1.25rem;right:1.25rem;display:flex;flex-direction:column;gap:.5rem;z-index:60}
.toast{background:var(--ink);color:var(--paper);padding:.7rem 1rem;border-radius:var(--r-s);font-size:.9rem;font-weight:500;box-shadow:var(--shadow-pop);max-width:24rem;animation:up .2s}
.toast.err{background:var(--bad);color:#fff}
.tabs{display:flex;gap:.2rem;border-bottom:1px solid var(--line);margin-bottom:calc(1rem * var(--sp));overflow-x:auto;scrollbar-width:none}
.tabs button{border:0;background:none;padding:.6rem .85rem;cursor:pointer;font-weight:600;color:var(--mut);border-bottom:2px solid transparent;white-space:nowrap;font-size:.9rem;margin-bottom:-1px}
.tabs button:hover{color:var(--ink)}
.tabs button.on{color:var(--ink);border-color:var(--acc)}
.tabs button .c{font-weight:500;color:var(--faint);margin-left:.2rem}
.seg{display:inline-flex;background:var(--sunken);border-radius:var(--r-s);padding:.2rem;gap:.15rem;flex-wrap:wrap}
.seg button{border:0;background:none;padding:.4rem .8rem;border-radius:calc(var(--r-s) - 3px);cursor:pointer;font-weight:600;font-size:.86rem;color:var(--mut)}
.seg button.on{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px #0e162b1f}

.spark{display:flex;gap:2px;align-items:flex-end;height:1.4rem}
.spark i{width:4px;border-radius:2px;background:var(--ok)}.spark i.x{background:var(--bad)}
.kbd{font-family:inherit;font-size:.8rem;font-weight:600;background:var(--sunken);border:1px solid var(--line);padding:.05rem .4rem;border-radius:var(--r-xs)}

/* ---------- Schnelleintrag ---------- */
.modal-bg.oben{place-items:start center;padding-top:min(14vh,7rem)}
.schnell-feld{display:flex;align-items:center;gap:.7rem;border:1.5px solid var(--acc-line);border-radius:var(--r);padding:.2rem .9rem;background:var(--sunken)}
.schnell-feld:focus-within{border-color:var(--acc);box-shadow:0 0 0 4px color-mix(in srgb,var(--acc) 16%,transparent)}
.schnell-feld svg{width:1.3rem;height:1.3rem;color:var(--acc-hi);flex:none}
.schnell-feld input{border:0;background:transparent;box-shadow:none!important;font-size:1.15rem;padding:.8rem 0;font-weight:500}
.schnell-vorschau{min-height:2rem;padding:.6rem .1rem 0}
.schnell-vorschau .badge{font-size:.8rem}
.schnell-tipps{margin-top:1rem;font-size:.82rem;color:var(--mut);line-height:1.6;background:var(--sunken);border-radius:var(--r-s);padding:.7rem .9rem}
.schnell-tipps b{color:var(--ink2)}
#sl:not(:empty){margin-top:.8rem}
.schnell-knopf .kbd{padding:0 .35rem;font-size:.72rem}
.fab{display:none;position:fixed;right:1.1rem;bottom:calc(1.1rem + env(safe-area-inset-bottom));width:3.6rem;height:3.6rem;border-radius:50%;border:0;background:var(--grad);color:#fff;box-shadow:0 12px 30px -6px #1242fc99;z-index:30;cursor:pointer;place-items:center}
.fab svg{width:1.6rem;height:1.6rem}
.fab:active{transform:scale(.94)}

/* ---------- Aussehen ---------- */
.swatches{display:flex;gap:.55rem;flex-wrap:wrap;align-items:center}
.sw{width:2.3rem;height:2.3rem;border-radius:50%;border:2px solid var(--surface);box-shadow:0 0 0 1px var(--line);cursor:pointer;padding:0}
.sw.on{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--ink)}
.opt-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem}
.opt{border:1.5px solid var(--line);border-radius:var(--r);padding:.7rem;cursor:pointer;background:var(--surface);text-align:left;display:flex;flex-direction:column;gap:.55rem}
.opt:hover{border-color:color-mix(in srgb,var(--ink) 25%,var(--line))}
.opt.on{border-color:var(--acc);box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 15%,transparent)}
.opt b{font-size:.92rem}.opt span{font-size:.8rem;color:var(--mut);line-height:1.35}
.opt svg{width:100%;height:13rem;border-radius:var(--r-xs);display:block;background:#fff;border:1px solid var(--line2)}
.preview-mini{display:grid;grid-template-columns:3.2rem 1fr;height:6rem;border-radius:var(--r-xs);overflow:hidden;border:1px solid var(--line2)}
.preview-mini i{display:block}

/* ---------- Anmeldung ---------- */
.login{min-height:100vh;display:grid;grid-template-columns:1fr 1fr;background:var(--paper)}
.login .art{background:#0e162b;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;padding:3rem;color:#fff}
.login .art::before{content:"";position:absolute;width:42rem;height:42rem;border-radius:50%;background:var(--grad);filter:blur(90px);opacity:.55;top:-18rem;right:-14rem}
.login .art h2{position:relative;font-size:2.4rem;line-height:1.1;letter-spacing:-.03em;margin:0;font-weight:800;max-width:22rem}
.login .art p{position:relative;color:#b9c1d6;max-width:24rem}
.login .form{display:grid;place-items:center;padding:2rem 1rem}
.login form{width:min(22rem,100%)}
.login .brand{color:var(--ink);padding:0 0 1.6rem}
.login .brand small{color:var(--mut)}

/* ---------- Responsiv ---------- */
@media (max-width:1150px){.g4{grid-template-columns:repeat(2,minmax(0,1fr))}.split{grid-template-columns:1fr}}
@media (max-width:860px){
  .app{grid-template-columns:1fr}
  .side{position:fixed;left:0;top:0;bottom:0;width:16.5rem;z-index:40;transform:translateX(-100%);transition:transform .22s ease}
  .side.open{transform:none;box-shadow:0 0 0 100vmax color-mix(in srgb,#0e162b 50%,transparent)}
  .top .burger{display:inline-flex}
  .top{padding:.7rem 1rem}.page{padding:1.1rem 1rem 4rem}
  .g2,.g3,.f2,.f3,.opt-grid{grid-template-columns:1fr}
  .flow{grid-template-columns:1fr}.flow a+a{border-left:0;border-top:1px solid var(--line2)}.flow a:not(:last-child)::after{display:none}
  .day .date{font-size:2rem}.day .quick{margin-left:0}
  .timer .lbl,.schnell-knopf{display:none}
  .fab{display:grid}
  .pos .e,.pos .pr{min-width:5.2rem;width:5.2rem}.pos .n{min-width:3.8rem;width:3.8rem}.pos td:first-child{min-width:12rem}
  #kat{max-width:none!important;flex:1 1 100%}
  .login{grid-template-columns:1fr}.login .art{display:none}
  .doc-head .btn{flex:1 1 auto}
}
@media (prefers-reduced-motion:reduce){*,*::before{animation:none!important;transition:none!important}}
.schnell-feld input:focus-visible{outline:none}