/* Firmenpass App fuer Firmenkunden, im Designsystem von screen-flow.de
   (Repo screenflow, sf.css und DESIGN.md): Weiss und Hellgrau als Flaechen,
   Text in Logo-Marine, eine Farbe (Logo-Blau) nur fuer Hauptaktion, Links,
   aktive Navigation und Fokus. Eine Schrift (Figtree), Haarlinien statt
   Schatten, hell und dunkel.
   Die Paesse selbst (oeffentlicher Pass, Firmenpass in fuenf Karten) haben
   ihre eigene Gestaltung (pass.css, deck.css) und stehen hier nur als
   Vorschau im Rahmen. Admin und Editor nutzen tokens.css.
   Reihenfolge: Schrift · Tokens · Grundlagen · Kopf und Navigation ·
   Seitenkopf · Bausteine · Uebersicht · Paesse · Insights · Shop · Support ·
   Einstellungen · Anmeldung · Dialog · Fuss · Bewegung */

/* ---------- Schrift ----------
   Figtree als Variable Font vom eigenen Server (@fontsource-variable). */
@font-face{font-family:"Figtree";font-style:normal;font-weight:300 900;font-display:swap;
  src:url(/fonts/figtree-latin-ext-wght-normal.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Figtree";font-style:normal;font-weight:300 900;font-display:swap;
  src:url(/fonts/figtree-latin-wght-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---------- Tokens (Werte wie sf.css) ---------- */
:root{
  color-scheme:light;
  --bg:#ffffff;
  --bg-soft:#f4f5f7;
  --surface:#ffffff;
  --ink:#000e32;
  --ink-soft:#4a5368;
  --ink-faint:#5a6275;
  --line:#e4e6eb;
  --line-strong:#cfd3db;
  --field-border:#868d9d;
  --accent:#024af6;
  --accent-hover:#0039cf;
  --accent-text:#024af6;
  --accent-wash:rgb(2 74 246 / .16);
  --navy:#000e32;
  --navy-soft:#b8c1d8;
  --danger:#b42318;
  --danger-wash:rgb(180 35 24 / .08);
  --shot-bg:#e8ebf1;
  --scrim:rgb(0 14 50 / .42);

  --r-sm:10px;
  --r-md:14px;
  --r-lg:18px;
  --r-pill:999px;
  /* Der einzige Flaechenschatten: geoeffnete Ebenen (Dialog, Hinweis). */
  --sh-menu:0 18px 40px -12px rgb(0 0 0 / .2),0 2px 6px rgb(0 0 0 / .06);
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.65,0,.35,1);

  --shell:1200px;
  --pad-x:clamp(20px,5vw,40px);
  --header-h:64px;
  --tabbar-h:64px;
  --sans:"Figtree",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#000000;
  --bg-soft:#0e0e10;
  --surface:#161618;
  --ink:#f5f5f7;
  --ink-soft:#a9adb8;
  --ink-faint:#8d919c;
  --line:#26262b;
  --line-strong:#3a3a41;
  --field-border:#73767f;
  --accent:#2a62f5;
  --accent-hover:#4677f7;
  --accent-text:#7ea6f2;
  --accent-wash:rgb(126 166 242 / .26);
  --navy:#08102a;
  --navy-soft:#b3bccf;
  --danger:#ff8a80;
  --danger-wash:rgb(255 138 128 / .12);
  --shot-bg:#1b1c20;
  --scrim:rgb(0 0 0 / .66);
  --sh-menu:0 18px 40px -12px rgb(0 0 0 / .7),0 0 0 1px rgb(255 255 255 / .06);
}

/* ---------- Grundlagen ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scrollbar-color:var(--line-strong) var(--bg);
  scroll-padding-top:calc(var(--header-h) + 16px)}
body{margin:0;min-height:100svh;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:1rem;line-height:1.55;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;caret-color:var(--accent-text)}
::selection{background:var(--accent-wash);color:inherit}
[hidden]{display:none !important}
img,svg{display:block;max-width:100%}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
h1,h2,h3{text-wrap:balance}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--accent-text);text-decoration-thickness:1px;text-underline-offset:.2em}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--accent-text);outline-offset:3px;border-radius:6px}
.shell{width:100%;max-width:calc(var(--shell) + 2 * var(--pad-x));margin-inline:auto;padding-inline:var(--pad-x)}
.sr{position:absolute !important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:16px;top:-100px;z-index:100;padding:10px 16px;border-radius:var(--r-sm);background:var(--accent);color:#fff;font-weight:650;text-decoration:none}
.skip-link:focus{top:12px}
.num{font-variant-numeric:tabular-nums}

/* Knoepfe: Pillen, Blau nur fuer die Hauptaktion. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 20px;
  border:1.5px solid transparent;border-radius:var(--r-pill);background:none;color:var(--ink);
  font-size:.9688rem;font-weight:650;line-height:1;letter-spacing:-.005em;text-decoration:none;white-space:nowrap;cursor:pointer;
  transition:background-color .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease),transform .15s var(--ease)}
.btn:hover{text-decoration:none}
.btn:active{transform:scale(.98)}
.btn svg{width:18px;height:18px;flex:none}
.btn--primary{background:var(--accent);color:#fff}
.btn--primary:hover{background:var(--accent-hover)}
.btn--secondary{border-color:var(--line-strong);color:var(--ink)}
.btn--secondary:hover{border-color:var(--ink-faint);background:var(--bg-soft)}
.btn--lg{min-height:52px;padding:0 26px;font-size:1.0625rem}
.btn--sm{min-height:40px;padding:0 16px;font-size:.9375rem}
.btn--block{width:100%}
.btn:disabled{opacity:.6;cursor:not-allowed;transform:none}
.btn--primary:disabled:hover{background:var(--accent)}
.btn[aria-busy="true"]{cursor:progress}
/* Textlink als Knopf: Akzent-Text, unterstrichen wie Links auf der Website. */
.link-btn{display:inline-flex;align-items:center;gap:6px;padding:0;border:0;background:none;color:var(--accent-text);
  font-weight:650;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em;text-align:left}
.link-btn:hover{text-decoration-thickness:2px}
.link-btn svg{width:16px;height:16px;flex:none}
.link-btn--danger{color:var(--danger)}
.link-btn--quiet{color:var(--ink-soft)}
.spin{width:16px;height:16px;flex:none;border-radius:50%;border:2px solid currentColor;border-top-color:transparent;opacity:.8;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* Kleine Schaltflaeche mit Zeichen (Kopf): 44px Trefferflaeche. */
.icon-btn{position:relative;display:inline-grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:var(--r-sm);
  background:none;color:var(--ink);text-decoration:none;transition:background-color .15s var(--ease)}
.icon-btn:hover{background:var(--bg-soft)}
.icon-btn svg{width:22px;height:22px}
.icon-btn[aria-current="page"]{color:var(--accent-text)}
.badge{position:absolute;top:4px;right:2px;min-width:18px;height:18px;padding:0 5px;border-radius:var(--r-pill);
  background:var(--accent);color:#fff;font-size:.6875rem;font-weight:650;line-height:18px;text-align:center;font-variant-numeric:tabular-nums}

/* Status als Pille: neutral; dunkel fuer "online", Blau nur fuer Neues. */
.chip{display:inline-flex;align-items:center;gap:6px;min-height:24px;padding:2px 10px;border-radius:var(--r-pill);
  background:var(--bg-soft);color:var(--ink-soft);font-size:.8125rem;font-weight:650;line-height:1.2;white-space:nowrap}
.chip--strong{background:var(--ink);color:var(--bg)}
.chip--accent{background:var(--accent-wash);color:var(--accent-text)}
.chip .dot{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
/* Auf paper-soft-Flaechen steht die neutrale Pille auf dem Seitengrund. */
:is(.tile,.pass-card,.pass-main,.hint) .chip:not(.chip--strong,.chip--accent){background:var(--bg)}

/* Auswahl wie im Preisrechner: Rahmen in field-border, gewaehlt in Blau. */
.seg{display:inline-flex;flex-wrap:wrap;gap:8px}
.seg button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:0 14px;
  border:1px solid var(--field-border);border-radius:var(--r-sm);background:var(--surface);color:var(--ink);
  font-size:.9375rem;font-weight:500;white-space:nowrap;transition:border-color .15s var(--ease),background-color .15s var(--ease)}
.seg button:hover{border-color:var(--ink-soft)}
.seg button svg{width:18px;height:18px}
.seg button[aria-pressed="true"]{border-color:var(--accent-text);background:var(--accent-wash);box-shadow:inset 0 0 0 1px var(--accent-text);font-weight:650}
.seg--fill{display:flex}
.seg--fill button{flex:1}

/* Felder wie im Kontaktformular der Website. */
.field{display:grid;gap:6px;align-content:start}
.field label,.field__label{font-size:.9375rem;font-weight:650}
.field__opt{color:var(--ink-faint);font-weight:400}
.field input,.field select,.field textarea,.input{width:100%;min-height:48px;padding:12px 14px;border:1px solid var(--field-border);
  border-radius:var(--r-sm);background:var(--surface);color:var(--ink);font-size:1rem;
  transition:border-color .15s var(--ease),box-shadow .15s var(--ease)}
.field select{appearance:none;padding-right:40px;
  background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a6275' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center / 18px}
.field textarea{min-height:120px;resize:vertical;line-height:1.5}
.field input:focus,.field select:focus,.field textarea:focus,.input:focus{outline:none;border-color:var(--accent-text);box-shadow:0 0 0 3px var(--accent-wash)}
.field.invalid input,.field.invalid textarea{border-color:var(--danger)}
.field.invalid input:focus,.field.invalid textarea:focus{box-shadow:0 0 0 3px var(--danger-wash)}
.field .err{color:var(--danger);font-size:.875rem;font-weight:650}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.form-grid .full{grid-column:1/-1}
.form__error{padding:12px 14px;border-radius:var(--r-sm);background:var(--danger-wash);color:var(--danger);font-size:.9375rem}
@media (max-width:560px){.form-grid{grid-template-columns:1fr}}

/* Schalter wie der Theme-Schalter im Fuss der Website. */
.switch{position:relative;flex:none;width:44px;height:26px}
.switch input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.switch span{position:absolute;inset:0;border-radius:var(--r-pill);background:var(--line-strong);transition:background-color .2s var(--ease);pointer-events:none}
.switch span::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;
  box-shadow:0 1px 3px rgb(0 0 0 / .25);transition:transform .25s var(--ease)}
.switch input:checked+span{background:var(--accent)}
.switch input:checked+span::after{transform:translateX(18px)}
.switch input:focus-visible+span{outline:2px solid var(--accent-text);outline-offset:3px}

/* Ladezustand: Flaechen in der Form dessen, was gleich erscheint. */
.sk{display:block;border-radius:var(--r-sm);background:linear-gradient(100deg,var(--bg-soft) 30%,var(--line) 50%,var(--bg-soft) 70%);
  background-size:300% 100%;animation:shimmer 1.3s linear infinite}
.sk-line{height:12px;margin-top:10px;border-radius:6px}
@keyframes shimmer{from{background-position:100% 0}to{background-position:-50% 0}}

/* Startbildschirm: steht nur, bis die Sitzung geprueft ist. */
.boot{position:fixed;inset:0;z-index:90;display:grid;place-items:center;align-content:center;gap:22px;background:var(--bg);
  transition:opacity .3s var(--ease),visibility 0s linear .3s}
.boot.is-done{opacity:0;visibility:hidden}
.boot .logo__img{height:32px}
.boot-bar{width:120px;height:2px;border-radius:1px;background:var(--line);overflow:hidden}
.boot-bar i{display:block;width:40%;height:100%;background:var(--ink);animation:loadbar 1.1s var(--ease-io) infinite}
@keyframes loadbar{from{transform:translateX(-100%)}to{transform:translateX(260%)}}

/* ---------- Kopf und Navigation ----------
   Wie der Kopf der Website: deckend, 64px, Haarlinie unten, Logo links.
   Kein backdrop-filter, transform oder filter am Kopf (sonst wird er zum
   Bezugsrahmen der fixierten Leiste unten). Ab 1024px stehen die Bereiche
   im Kopf, darunter als Leiste unten, mit dem Daumen erreichbar.        */
.header{position:sticky;top:0;z-index:30;height:var(--header-h);background:var(--bg);border-bottom:1px solid var(--line)}
.header__inner{display:flex;align-items:center;gap:24px;height:100%}
.logo{display:flex;align-items:center;gap:12px;flex:none;color:var(--ink);text-decoration:none;border-radius:6px}
.logo__img{width:auto;height:28px}
.logo__img--dark{display:none}
:root[data-theme="dark"] .logo__img--light{display:none}
:root[data-theme="dark"] .logo__img--dark{display:block}
.logo__product{padding-left:12px;border-left:1px solid var(--line-strong);color:var(--ink-soft);font-size:.9688rem;font-weight:500;line-height:1.2}
.nav{margin-left:auto}
.nav__list{display:flex;align-items:center;gap:2px}
.nav__link{position:relative;display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:var(--r-sm);
  color:var(--ink);font-size:.9688rem;font-weight:500;text-decoration:none;transition:background-color .15s var(--ease)}
.nav__link:hover{background:var(--bg-soft)}
.nav__link[aria-current="page"]{color:var(--accent-text)}
.nav__link svg{display:none;width:24px;height:24px}
.nav__count{min-width:20px;height:20px;padding:0 6px;border-radius:var(--r-pill);background:var(--accent);color:#fff;
  font-size:.75rem;font-weight:650;line-height:20px;text-align:center;font-variant-numeric:tabular-nums}
.header__tools{display:flex;align-items:center;gap:4px;margin-right:-10px}

@media (max-width:1023px){
  .header__tools{margin-left:auto}
  .logo__product{font-size:.9375rem}
  .nav{position:fixed;left:0;right:0;bottom:0;z-index:30;margin:0;background:var(--bg);border-top:1px solid var(--line);
    padding:0 max(8px,env(safe-area-inset-right,0px)) env(safe-area-inset-bottom,0px) max(8px,env(safe-area-inset-left,0px))}
  .nav__list{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;max-width:640px;margin-inline:auto}
  .nav__link{flex-direction:column;justify-content:center;gap:3px;width:100%;min-height:var(--tabbar-h);padding:8px 2px 6px;border-radius:0;
    color:var(--ink-soft);font-size:.75rem;font-weight:650;letter-spacing:.005em}
  .nav__link:hover{background:none;color:var(--ink)}
  .nav__link[aria-current="page"]{color:var(--accent-text)}
  .nav__link svg{display:block}
  .nav__count{position:absolute;top:6px;left:calc(50% + 6px);min-width:18px;height:18px;padding:0 5px;font-size:.6875rem;line-height:18px}
  body.is-app{padding-bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom,0px))}
}
@media (max-width:380px){.logo__product{display:none}}

/* ---------- Seiten ---------- */
.screen{padding-bottom:clamp(48px,7vw,96px)}
.screen:focus{outline:none}
.page-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px 32px;
  padding-block:clamp(28px,4.5vw,56px) clamp(24px,3.5vw,40px)}
.page-head__text{min-width:0;max-width:46rem}
.page-head__title{font-size:clamp(2rem,1.45rem + 1.9vw,3rem);font-weight:750;line-height:1.06;letter-spacing:-.03em}
.page-head__title:focus{outline:none}
.page-head__lead{max-width:40rem;margin-top:12px;color:var(--ink-soft);font-size:clamp(1.0625rem,1rem + .3vw,1.1875rem);line-height:1.5;text-wrap:pretty}
.page-head__actions{display:flex;flex-wrap:wrap;gap:12px}
@media (max-width:560px){.page-head__actions{width:100%}.page-head__actions .btn{flex:1 1 auto}}
.crumbs{margin-bottom:16px;font-size:.9063rem}
.crumbs ol{display:flex;flex-wrap:wrap;row-gap:4px}
.crumbs li{color:var(--ink-faint);min-width:0;overflow-wrap:anywhere}
.crumbs li+li::before{content:"/";margin-inline:8px;color:var(--line-strong)}
.crumbs a{color:var(--ink-soft);text-decoration:none}
.crumbs a:hover{color:var(--ink);text-decoration:underline}

/* Abschnitt in einer Seite: Titel in 650 mit Haarlinie darueber, wie
   Vorteile und Ablauf auf der Website. Keine Dachzeilen, keine Icons.   */
.block{padding-top:20px;border-top:1px solid var(--line-strong)}
.block+.block{margin-top:clamp(36px,4vw,48px)}
.block__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 16px;margin-bottom:16px}
.block__title{font-size:1.1875rem;font-weight:650;line-height:1.3;letter-spacing:-.01em}
.block__meta{color:var(--ink-faint);font-size:.9375rem}
.block__lead{margin-top:-8px;margin-bottom:16px;color:var(--ink-soft)}

/* Flaeche in paper-soft, 18px: wie Produktkachel und Hervorhebung. */
.tile{padding:clamp(20px,2.6vw,28px);border-radius:var(--r-lg);background:var(--bg-soft)}
.tile+.tile{margin-top:20px}
.tile__title{font-size:1.1875rem;font-weight:650;line-height:1.3;letter-spacing:-.01em}
.tile__text{margin-top:6px;color:var(--ink-soft)}
.tile__actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-top:18px}

/* Zwei Spalten: links das Wichtigste, rechts das Werkzeug dazu (7:5). */
.cols{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(36px,5vw,72px);align-items:start}
.cols--rev{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
@media (max-width:900px){.cols,.cols--rev{grid-template-columns:minmax(0,1fr)}}

/* Liste mit Trennlinie: Zeile mit Bild, Text und Aktion. */
.rows>li+li,.rows>.row+.row{border-top:1px solid var(--line)}
.row{display:flex;align-items:center;gap:14px;width:100%;padding:16px 0;border:0;background:none;color:var(--ink);text-align:left;text-decoration:none}
a.row:hover .row__title,button.row:hover .row__title{color:var(--accent-text)}
.row__main{flex:1;min-width:0}
.row__title{display:block;font-weight:650;line-height:1.35;letter-spacing:-.005em;overflow-wrap:anywhere;transition:color .15s var(--ease)}
.row__text{display:block;margin-top:2px;color:var(--ink-soft);font-size:.9375rem;line-height:1.45;overflow-wrap:anywhere}
.row__aside{flex:none;display:flex;align-items:center;gap:10px}
.chev{width:18px;height:18px;flex:none;color:var(--ink-faint)}

/* Kleines Bild: Foto, Logo oder Initialen, Ecken wie Bedienelemente. */
.avatar{flex:none;display:grid;place-items:center;width:44px;height:44px;overflow:hidden;border-radius:var(--r-sm);
  background:var(--shot-bg);color:var(--ink);font-size:.875rem;font-weight:650;letter-spacing:-.01em}
.avatar img{width:100%;height:100%;object-fit:cover}
.avatar--lg{width:64px;height:64px;border-radius:var(--r-md);font-size:1.25rem}
.avatar--portrait{width:52px;height:65px}
.avatar--portrait.avatar--lg{width:72px;height:90px}

/* Daten zum Nachlesen. */
.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 24px}
.facts dt{color:var(--ink-faint);font-size:.875rem}
.facts dd{margin-top:2px;font-weight:650;overflow-wrap:anywhere;line-height:1.4}
@media (max-width:420px){.facts{grid-template-columns:minmax(0,1fr)}}

/* Hinweis auf paper-soft, mit Titel in 650. */
.hint{padding:16px 18px;border-radius:var(--r-md);background:var(--bg-soft);color:var(--ink-soft)}
.hint b{color:var(--ink);font-weight:650}
.hint__actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.tile .hint{background:var(--bg)}

.empty{padding:28px 0;color:var(--ink-soft)}
.empty b{display:block;margin-bottom:4px;color:var(--ink);font-size:1.0625rem;font-weight:650}
.note{color:var(--ink-faint);font-size:.875rem}

/* Kennzahlen wie .stats auf der Website: Haarlinie, grosse Zahl. */
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 28px}
.stats--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.stat{padding-top:16px;border-top:1px solid var(--line-strong)}
.stat__num{display:block;font-size:clamp(2rem,1.6rem + 1.2vw,2.75rem);font-weight:750;line-height:1;letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.stat__label{display:block;margin-top:10px;color:var(--ink-soft);font-size:.9375rem;line-height:1.35}
.delta{display:inline-flex;align-items:center;gap:3px;margin-top:6px;color:var(--ink-faint);font-size:.8125rem;font-weight:650;font-variant-numeric:tabular-nums}
.delta svg{width:12px;height:12px}
@media (max-width:1023px){.stats--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:420px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Belegte Plaetze im Paket. */
.meter{height:8px;margin-top:12px;overflow:hidden;border-radius:var(--r-pill);background:var(--line)}
.meter i{display:block;width:var(--w);height:100%;border-radius:var(--r-pill);background:var(--ink);transition:width .5s var(--ease)}
.tile .meter{background:var(--line-strong)}

/* ---------- Uebersicht ---------- */
.todo .row{align-items:flex-start}
.todo .row__aside{padding-top:2px}
.todo__mark{flex:none;width:10px;height:10px;margin-top:7px;border-radius:50%;background:var(--accent)}
.todo__mark--quiet{background:var(--line-strong)}
.share-mini{display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px;align-items:center}
.qr{display:grid;place-items:center;flex:none;width:136px;height:136px;padding:8px;border-radius:var(--r-sm);background:#fff;
  box-shadow:0 0 0 1px var(--line-strong)}
.qr canvas{display:block;width:120px;height:120px;image-rendering:pixelated}
@media (max-width:420px){.share-mini{grid-template-columns:minmax(0,1fr)}}

/* ---------- Paesse ---------- */
.seats{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;color:var(--ink-soft)}
.seats .meter{flex:1 1 160px;max-width:260px;margin-top:0}
.pass-main{display:flex;align-items:center;gap:18px;width:100%;padding:clamp(18px,2.4vw,24px);border:0;border-radius:var(--r-lg);
  background:var(--bg-soft);color:var(--ink);text-align:left;text-decoration:none}
.pass-main:hover .row__title{color:var(--accent-text)}
.pass-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.pass-card{display:flex;align-items:center;gap:14px;min-width:0;padding:14px 16px 14px 14px;border-radius:var(--r-lg);
  background:var(--bg-soft);color:var(--ink);text-decoration:none;transition:background-color .15s var(--ease)}
.pass-card:hover .row__title{color:var(--accent-text)}
.pass-card .row__main{display:grid;gap:2px}
.pass-card .chip{justify-self:start;margin-top:4px}
.search{max-width:320px;margin-bottom:16px}

/* Pass-Detail: links Weitergeben und Daten, rechts der Pass selbst. */
.detail-head{display:flex;align-items:center;gap:18px;min-width:0}
.detail-head .page-head__title{font-size:clamp(1.75rem,1.35rem + 1.3vw,2.5rem)}
.detail-head .page-head__lead{margin-top:6px}
.detail-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:10px;color:var(--ink-faint);font-size:.9375rem}
.share{display:grid;gap:18px}
.share__body{display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px;align-items:center}
.share__side{display:grid;gap:8px;min-width:0}
.share__side b{font-weight:650;line-height:1.3}
.share__side p{color:var(--ink-soft);font-size:.9375rem}
.share__actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.share__link{display:flex;gap:8px}
.share__link .input{min-height:44px;padding:10px 12px;font-size:.9375rem;color:var(--ink-soft);background:var(--bg)}
@media (max-width:460px){.share__body{grid-template-columns:minmax(0,1fr);justify-items:start}}
.nfc{position:relative;display:grid;place-items:center;width:136px;height:136px;overflow:hidden;border-radius:var(--r-sm);background:var(--bg);box-shadow:0 0 0 1px var(--line-strong)}
.nfc .phone{position:relative;z-index:2;width:40px;height:66px;border:2.5px solid var(--ink);border-radius:9px;background:var(--bg)}
.nfc .phone::after{content:"";position:absolute;left:50%;top:5px;width:12px;height:3px;border-radius:2px;background:var(--ink);transform:translateX(-50%)}
.nfc .wave{position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;border:2px solid var(--ink-faint);opacity:0;animation:wave 2.4s var(--ease) infinite}
.nfc .wave:nth-child(2){animation-delay:.8s}
.nfc .wave:nth-child(3){animation-delay:1.6s}
.nfc.is-writing .wave{border-color:var(--accent-text);animation-duration:1.1s}
@keyframes wave{0%{transform:scale(.8);opacity:.7}100%{transform:scale(2.8);opacity:0}}
.status{display:inline-flex;align-items:center;gap:8px;font-weight:650}
.status i{width:8px;height:8px;border-radius:50%;background:var(--ink-faint)}
.status.is-busy i{background:var(--accent-text);animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:.3}}

/* Buehne fuer die Vorschau, wie die Buehne hinter Bildschirmansichten. */
.preview{display:flex;flex-direction:column;min-height:min(78svh,820px);overflow:hidden;border-radius:var(--r-lg);background:var(--shot-bg)}
.preview__bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;padding:14px 16px 14px 22px}
.preview__title{color:var(--ink-soft);font-size:.9375rem;font-weight:650}
.preview__frame{flex:1;display:flex;justify-content:center;min-height:0;padding:0 16px 16px}
.preview__frame iframe{flex:1;width:100%;min-height:560px;border:0;border-radius:var(--r-sm);background:#111;box-shadow:0 0 0 1px var(--line-strong)}
.preview__frame.is-phone iframe{flex:none;width:min(393px,100%);height:min(852px,72svh);align-self:center;border-radius:26px}
.preview__empty{margin:auto;max-width:520px;padding:clamp(28px,4vw,48px);display:grid;gap:14px;justify-items:start}
.preview__empty h2{font-size:clamp(1.5rem,1.2rem + 1vw,2rem);font-weight:750;line-height:1.15;letter-spacing:-.025em}
.preview__empty p{color:var(--ink-soft)}
@media (max-width:999px){.preview{display:none}}

/* ---------- Insights ---------- */
.toolbar{display:flex;flex-wrap:wrap;align-items:flex-end;gap:16px 24px;margin-bottom:clamp(28px,3.5vw,40px)}
.toolbar .field{min-width:min(100%,280px)}
.toolbar__end{margin-left:auto}
.ins{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(36px,4vw,48px) clamp(32px,4vw,56px);margin-top:clamp(36px,4vw,48px)}
.ins .block+.block{margin-top:0}
.ins .block--wide{grid-column:1/-1}
@media (max-width:760px){.ins{grid-template-columns:minmax(0,1fr)}}
.chart{position:relative;display:grid;grid-template-columns:34px minmax(0,1fr);grid-template-rows:clamp(150px,22vw,260px) auto;column-gap:8px}
.sk-chart{height:clamp(150px,22vw,260px)}
.chart-y{position:relative;color:var(--ink-faint);font-size:.75rem;font-variant-numeric:tabular-nums}
.chart-y span{position:absolute;right:0;transform:translateY(50%);line-height:1}
.chart-plot{position:relative}
.chart-plot .grid{position:absolute;left:0;right:0;height:1px;background:var(--line)}
.chart-plot .base{position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--line-strong)}
.bars{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:space-between;gap:2px}
.bar{flex:1;display:flex;align-items:flex-end;justify-content:center;max-width:48px;height:100%;padding:0;border:0;background:none;cursor:default}
.bar i{display:block;width:100%;height:var(--h);min-height:2px;border-radius:4px 4px 0 0;background:var(--ink);transition:background-color .15s,height .5s var(--ease)}
.bar:hover i,.bar:focus-visible i,.bar.is-hot i{background:var(--accent)}
.bar:focus-visible{outline:none}
.chart-x{grid-column:2;display:flex;justify-content:space-between;margin-top:8px;color:var(--ink-faint);font-size:.75rem;font-variant-numeric:tabular-nums}
.tip{position:absolute;z-index:3;padding:7px 10px;border-radius:var(--r-sm);background:var(--ink);color:var(--bg);font-size:.8125rem;line-height:1.3;
  white-space:nowrap;pointer-events:none;opacity:0;transform:translate(-50%,-100%);transition:opacity .12s}
.tip b{display:block;font-size:.9375rem;font-weight:650;font-variant-numeric:tabular-nums}
.tip.is-on{opacity:1}
details.table-view{margin-top:16px;font-size:.9375rem}
details.table-view summary{color:var(--accent-text);font-weight:650;cursor:pointer}
.table-wrap{max-height:220px;margin-top:10px;overflow:auto}
.table-wrap table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.table-wrap th,.table-wrap td{padding:6px 8px;border-bottom:1px solid var(--line);text-align:left}
.table-wrap th{color:var(--ink-faint);font-weight:650}
.table-wrap td:last-child,.table-wrap th:last-child{text-align:right}
.hbars{display:grid;gap:12px}
.hbar{display:grid;grid-template-columns:minmax(76px,30%) minmax(0,1fr) minmax(56px,auto);align-items:center;gap:12px;font-size:.9375rem}
.hbar__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hbar-track{position:relative;height:10px}
.hbar-track i{position:absolute;inset:0 auto 0 0;width:var(--w);border-radius:0 4px 4px 0;background:var(--ink);transition:width .5s var(--ease)}
.hbar__val{text-align:right;font-weight:650;font-variant-numeric:tabular-nums;white-space:nowrap}
.clicks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px}
.clicks div{display:flex;justify-content:space-between;gap:8px;padding:10px 0;border-top:1px solid var(--line)}
.clicks div:nth-child(-n+2){border-top:0}
.clicks b{font-weight:650;font-variant-numeric:tabular-nums}
.feed .row{padding:12px 0}
.feed time{flex:none;color:var(--ink-faint);font-size:.875rem;white-space:nowrap}

/* ---------- Shop ----------
   Kacheln wie die Produktkacheln der Website: paper-soft, oben die Buehne
   mit der Zeichnung des Produkts.                                       */
.filters{margin-bottom:24px}
.products{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:20px}
.product{display:flex;flex-direction:column;min-width:0;overflow:hidden;padding:0;border:0;border-radius:var(--r-lg);
  background:var(--bg-soft);color:var(--ink);text-align:left}
.product__media{aspect-ratio:4/3;background:var(--shot-bg)}
.product__media .vis{width:100%;height:100%}
.product__body{display:grid;gap:4px;padding:18px 20px 20px}
.product__name{font-size:1.125rem;font-weight:650;line-height:1.3;letter-spacing:-.01em}
.product:hover .product__name{color:var(--accent-text)}
.product__text{color:var(--ink-soft);font-size:.9375rem;line-height:1.45}
.price{margin-top:8px;font-weight:650;font-variant-numeric:tabular-nums}
.price em{color:var(--ink-faint);font-style:normal;font-weight:400}
.shop-note{margin-top:24px}
@media (max-width:520px){.products{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.product__body{padding:14px 14px 16px}.product__name{font-size:1rem}}
.order{display:grid;gap:4px;padding:14px 0}
.order__top{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.order__top b{font-weight:650;font-variant-numeric:tabular-nums}
.order small{color:var(--ink-soft);font-size:.9375rem}
.order__chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}

/* Produktbilder sind gezeichnet. Die Karten tragen feste Farben, weil sie
   echte Ausfuehrungen zeigen (schwarz, weiss, Metall), auch im Dunkeln.  */
.vis{position:relative;display:grid;place-items:center;overflow:hidden;container-type:inline-size;background:var(--shot-bg)}
.v-card{position:absolute;width:62%;aspect-ratio:85.6/54;display:flex;flex-direction:column;justify-content:space-between;padding:8% 9%;
  border-radius:6px;background:#0b0f1c;color:#fff;box-shadow:0 14px 24px -12px rgb(0 0 0 / .5)}
.v-card.white{background:#fff;color:#000e32;box-shadow:0 14px 24px -12px rgb(0 0 0 / .3),inset 0 0 0 1px #e4e6eb}
.v-card.metal{background:linear-gradient(135deg,#3a3a3a,#8c8c8c 45%,#4a4a4a 70%,#9a9a9a)}
.v-card.matte{background:linear-gradient(160deg,#2a2a2a,#0d0d0d)}
.v-card .m{font-size:clamp(9px,3.2cqi,15px);font-weight:750;line-height:1;letter-spacing:-.02em}
.v-card .n{display:flex;justify-content:space-between;align-items:flex-end;font-size:clamp(6px,1.8cqi,9px);opacity:.75}
.v-card svg{width:clamp(10px,4cqi,18px);height:clamp(10px,4cqi,18px)}
.v-bc{position:absolute;width:58%;aspect-ratio:85/55;display:flex;justify-content:space-between;align-items:flex-end;padding:7%;
  border-radius:3px;background:#fff;box-shadow:0 10px 18px -10px rgb(0 0 0 / .4),inset 0 0 0 1px #e4e6eb}
.v-bc .ln{display:grid;gap:4px;width:52%}
.v-bc .ln i{display:block;height:4px;border-radius:1px;background:#000e32}
.v-bc .ln i+i{height:3px;background:#b8c1d8}
.v-bc img{width:30%;image-rendering:pixelated}
.v-fly{position:absolute;width:34%;aspect-ratio:99/210;display:flex;flex-direction:column;gap:6%;padding:7% 5%;border-radius:3px;background:#fff;
  box-shadow:0 14px 24px -12px rgb(0 0 0 / .4)}
.v-fly .hd{height:16%;border-radius:2px;background:#000e32}
.v-fly i{display:block;height:3px;border-radius:1px;background:#cfd3db}
.v-fly img{width:46%;margin-top:auto;align-self:flex-start;image-rendering:pixelated}
.v-roll{position:absolute;bottom:10%;width:28%;height:76%;display:flex;flex-direction:column;align-items:center}
.v-roll .roll-sheet{flex:1;width:100%;display:flex;flex-direction:column;gap:6%;padding:10% 9%;background:#fff;box-shadow:0 14px 24px -12px rgb(0 0 0 / .4)}
.v-roll .roll-sheet .hd{height:22%;border-radius:2px;background:#000e32}
.v-roll .roll-sheet i{display:block;height:3px;background:#cfd3db}
.v-roll .roll-sheet img{width:55%;margin-top:auto;align-self:center;image-rendering:pixelated}
.v-roll .foot{width:120%;height:7px;border-radius:2px;background:#0b0f1c}
.cart-item{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:14px;align-items:center;padding:14px 0}
.cart-item .vis{width:64px;height:64px;border-radius:var(--r-sm)}
.cart-item b{display:block;font-weight:650}
.cart-item small{display:block;color:var(--ink-soft);font-size:.875rem}
.cart-item .amt{font-weight:650;text-align:right;font-variant-numeric:tabular-nums}
.sum{margin-top:16px;padding-top:14px;border-top:1px solid var(--line-strong)}
.sum div{display:flex;justify-content:space-between;gap:10px;padding:3px 0;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.sum .total{padding-top:8px;color:var(--ink);font-size:1.125rem;font-weight:650}
.pick{display:grid;gap:8px}
.pick label{display:flex;align-items:center;gap:12px;min-height:52px;padding:6px 14px 6px 8px;border:1px solid var(--field-border);border-radius:var(--r-sm);
  background:var(--surface);cursor:pointer;transition:border-color .15s var(--ease),background-color .15s var(--ease)}
.pick label:hover{border-color:var(--ink-soft)}
.pick label:has(input:checked){border-color:var(--accent-text);background:var(--accent-wash);box-shadow:inset 0 0 0 1px var(--accent-text)}
.pick input{width:18px;height:18px;margin:0 0 0 6px;accent-color:var(--accent)}
.pick .avatar{width:36px;height:36px;font-size:.75rem}
.pick small{margin-left:auto;color:var(--ink-faint);font-size:.875rem;text-align:right}
.specs{display:grid;gap:4px;margin-top:12px;padding-left:1.2em;list-style:disc;color:var(--ink-soft)}
.opt+.opt{margin-top:24px}
.opt__head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:10px}
.opt__head h3{font-size:1rem;font-weight:650}

/* ---------- Support ---------- */
.ticket .row__main{display:grid;gap:3px}
.ticket .chip{justify-self:start;margin-top:6px}
.ticket__last{color:var(--ink-soft);font-size:.9375rem;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:anywhere}
.ticket.is-new .row__title::before,.inq.is-new .row__title::before{content:"";display:inline-block;width:8px;height:8px;margin-right:8px;border-radius:50%;background:var(--accent);vertical-align:2px}
.direct{display:grid;gap:16px}
.direct dt{color:var(--ink-faint);font-size:.875rem}
.direct dd{margin-top:2px;font-weight:650}
.thread{display:grid;gap:12px;margin-top:16px}
.msg{margin-left:12%;padding:12px 14px;border-radius:var(--r-md);background:var(--bg-soft)}
.msg--them{margin:0 12% 0 0;background:var(--accent-wash)}
.msg__top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;color:var(--ink-faint);font-size:.8125rem}
.msg__top b{color:var(--ink);font-size:.875rem;font-weight:650}
.msg p{margin-top:4px;white-space:pre-line;overflow-wrap:anywhere}
.inq{padding:16px 0}
.inq p{margin-top:6px;color:var(--ink-soft);white-space:pre-line;overflow-wrap:anywhere}
.inq__acts{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:10px}

/* ---------- Einstellungen ----------
   Je Abschnitt ein 5:7-Paar wie Vorteile und Fragen auf der Website:
   links Titel und Erklaerung, rechts die Angaben und Schalter.          */
.set{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:16px clamp(32px,6vw,88px);
  padding-block:clamp(24px,3vw,32px);border-top:1px solid var(--line-strong)}
.set__title{font-size:1.1875rem;font-weight:650;line-height:1.3;letter-spacing:-.01em}
.set__lead{margin-top:6px;color:var(--ink-soft);font-size:.9375rem}
.set__body{min-width:0}
.set__body>.row:first-child{padding-top:0}
.set__body .facts{margin-top:18px}
.set__actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.firm{display:flex;align-items:center;gap:16px}
@media (max-width:900px){.set{grid-template-columns:minmax(0,1fr)}}
.closing{margin-top:8px;padding-top:24px;border-top:1px solid var(--line-strong);color:var(--ink-soft)}

/* ---------- Anmeldung ----------
   Wie das Kontaktband der Website: links Einleitung und was die App kann,
   rechts die Karte mit dem Formular.                                     */
body.is-auth{display:flex;flex-direction:column}
body.is-auth main{flex:1;display:flex;flex-direction:column}
.auth{flex:1;display:grid;align-items:center;padding-block:clamp(40px,7vw,96px);background:var(--bg-soft)}
.auth__grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(40px,6vw,88px);align-items:center}
.auth__title{font-size:clamp(2.375rem,1.5rem + 3vw,3.75rem);font-weight:750;line-height:1.04;letter-spacing:-.032em}
.auth__lead{max-width:34rem;margin-top:18px;color:var(--ink-soft);font-size:clamp(1.0625rem,1rem + .3vw,1.1875rem);line-height:1.5}
.auth__points{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 32px;margin-top:clamp(32px,4vw,48px)}
.auth__points li{padding-top:16px;border-top:1px solid var(--line-strong)}
.auth__points b{display:block;font-weight:650}
.auth__points span{display:block;margin-top:4px;color:var(--ink-soft);font-size:.9375rem}
.form{padding:clamp(24px,3.5vw,40px);border-radius:var(--r-lg);background:var(--surface);color:var(--ink)}
:root[data-theme="dark"] .form{box-shadow:0 0 0 1px var(--line)}
.form__title{font-size:1.5rem;font-weight:750;line-height:1.2;letter-spacing:-.02em}
.form__lead{margin-top:6px;color:var(--ink-soft)}
.form__body{display:grid;gap:18px;margin-top:24px}
.form__note{color:var(--ink-faint);font-size:.875rem}
@media (max-width:900px){.auth__grid{grid-template-columns:minmax(0,1fr)}.auth{align-items:start}}
@media (max-width:560px){.auth__points{grid-template-columns:minmax(0,1fr);gap:16px}}

/* ---------- Dialog ----------
   Schmal ein Bogen von unten, breit ein Fenster in der Mitte. Der Fokus
   bleibt darin (alles andere ist inert, siehe app.js).                  */
.scrim{position:fixed;inset:0;z-index:60;background:var(--scrim);opacity:0;transition:opacity .25s var(--ease)}
.scrim.is-on{opacity:1}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:61;display:flex;flex-direction:column;max-height:92svh;
  border-radius:var(--r-lg) var(--r-lg) 0 0;background:var(--surface);color:var(--ink);box-shadow:var(--sh-menu);
  transform:translateY(104%);transition:transform .38s var(--ease)}
.sheet.is-on{transform:none}
.sheet-grip{flex:none;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:18px 16px 8px 24px}
.sheet-grip h2{min-width:0;font-size:1.375rem;font-weight:750;line-height:1.2;letter-spacing:-.02em;overflow-wrap:anywhere}
.sheet-body{flex:1;min-height:0;overflow-y:auto;padding:8px 24px 24px;overscroll-behavior:contain}
.sheet-foot{flex:none;display:grid;gap:10px;padding:16px 24px calc(18px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line)}
.sheet-foot:empty{display:none}
.sheet-foot .between{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.sheet-total{font-size:1.25rem;font-weight:750;font-variant-numeric:tabular-nums}
@media (min-width:640px){
  .sheet{left:50%;right:auto;top:50%;bottom:auto;width:min(560px,calc(100% - 48px));max-height:min(88svh,820px);border-radius:var(--r-lg);
    opacity:0;visibility:hidden;transform:translate(-50%,-48%) scale(.98);
    transition:transform .3s var(--ease),opacity .2s var(--ease),visibility 0s linear .3s}
  .sheet.is-on{opacity:1;visibility:visible;transform:translate(-50%,-50%);transition:transform .3s var(--ease),opacity .2s var(--ease)}
  .sheet-grip{padding:22px 20px 8px 28px}
  .sheet-body{padding:8px 28px 28px}
  .sheet-foot{padding:18px 28px 24px}
}
.big-qr{display:grid;justify-items:center;gap:14px;padding:8px 0}
.big-qr .qr{width:min(296px,76vw);height:min(296px,76vw);padding:14px}
.big-qr canvas{width:100%;height:100%}
.success{display:grid;justify-items:start;gap:8px;padding:12px 0}
.success .tick{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--accent);color:#fff}
.success .tick svg{width:24px;height:24px}
.success b{margin-top:8px;font-size:1.375rem;font-weight:650;letter-spacing:-.015em}
.success p{color:var(--ink-soft)}
.photo-edit{display:flex;align-items:center;gap:18px}
.photo-edit .avatar{width:80px;height:100px;border-radius:var(--r-md);border:1px dashed var(--field-border);background:var(--bg-soft);color:var(--ink-faint)}
.photo-edit .avatar svg{width:22px;height:22px}
.photo-edit__acts{display:grid;gap:8px;justify-items:start;min-width:0}
.photo-edit__acts label{cursor:pointer}

.toast{position:fixed;left:50%;bottom:24px;z-index:80;max-width:min(460px,calc(100% - 32px));padding:12px 18px;border-radius:var(--r-md);
  background:var(--ink);color:var(--bg);font-size:.9375rem;font-weight:650;text-align:center;box-shadow:var(--sh-menu);
  opacity:0;pointer-events:none;transform:translate(-50%,16px);transition:opacity .25s var(--ease),transform .3s var(--ease)}
.toast.is-on{opacity:1;transform:translate(-50%,0)}
@media (max-width:1023px){body.is-app .toast{bottom:calc(var(--tabbar-h) + 16px + env(safe-area-inset-bottom,0px))}}

/* ---------- Fuss ---------- */
.footer{border-top:1px solid var(--line);background:var(--bg-soft);color:var(--ink-faint);font-size:.9375rem}
.footer__bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;padding-block:20px 24px}
.footer__links{display:flex;flex-wrap:wrap;gap:6px 20px}
.footer__links a{color:var(--ink-soft);text-decoration:none}
.footer__links a:hover{color:var(--ink);text-decoration:underline}
.theme-switch{display:inline-flex;align-items:center;gap:12px;min-height:44px;padding:0;border:0;background:none;color:var(--ink-soft);cursor:pointer}
.theme-switch__track{position:relative;width:44px;height:26px;border-radius:var(--r-pill);background:var(--line-strong);transition:background-color .2s var(--ease)}
.theme-switch__knob{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgb(0 0 0 / .25);transition:transform .25s var(--ease)}
.theme-switch[aria-checked="true"] .theme-switch__track{background:var(--accent)}
.theme-switch[aria-checked="true"] .theme-switch__knob{transform:translateX(18px)}

/* ---------- Bewegung ----------
   Sacht und nur als Antwort auf Eingabe: Bereiche blenden beim Wechsel
   kurz ein, Dialoge gleiten herein. prefers-reduced-motion schaltet alles ab. */
@media (prefers-reduced-motion:no-preference){
  .screen.is-entering{animation:rise .32s var(--ease) both}
  :root.is-theming,:root.is-theming *{transition:background-color .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease) !important}
}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
}

/* Druck: nur der Inhalt, hell, ohne Navigation und Bedienelemente. */
@media print{
  :root,:root[data-theme="dark"]{color-scheme:light;--bg:#fff;--bg-soft:#fff;--surface:#fff;--ink:#000e32;--ink-soft:#4a5368;--ink-faint:#5a6275;--line:#cfd3db;--line-strong:#868d9d}
  .nav,.header__tools,.footer,.page-head__actions,.toolbar .seg,.preview,.btn,.skip-link{display:none !important}
  .header{position:static}
  body.is-app{padding-bottom:0}
}