/* MediScan – gemeinsames Stylesheet (App + Rechtsseiten). Mobile-first, ohne Framework.
   Design-System v3 („Midnight Clinic"): tiefes Navy-Petrol #0b2433→#0f5a5c als Grundton,
   Teal #13a194 als Aktionsfarbe, Gold/Amber #e8a51e als Akzent (Sucher, Laser, Hinweise). Systemfonts, keine externen Assets (offline-fähig).
   Dark Mode: bewusst NUR auf der App (body.ms-app), damit Seiten ohne eigene
   Dark-Styles (kaufen/zahlung/betreiber haben eigene Inline-Styles) hell bleiben. */
:root{
  /* Marke */
  --petrol:#0b5f63; --petrol-d:#0a4651; --petrol-x:#0b2433; --petrol-l:#0f7a76;
  --navy:#0b2433; --navy-2:#123a4a;
  --mint:#5fd0c2;
  --cyan:#13a194; --cyan-d:#0b7c78;                 /* Aktionsfarbe Teal */
  --amber:#e8a51e; --amber-ink:#875800; --amber-soft:#fcf3df; --gold:#f0b445;
  /* Fläche & Text */
  --bg:#f0f4f6; --card:#ffffff;
  --ink:#10262f; --muted:#566d75; --line:#d8e3e7; --line-soft:#e6edf0;
  --soft:#f4f8f9; --soft-2:#e5f1f1;
  /* Schweregrade: Balken (kräftig) / Textfarbe (lesbar) / Fläche / Rahmen */
  --sev1:#2e7d32; --sev1ink:#2e7d32; --sev1bg:#e9f5ea; --sev1ln:#c8e5ca;
  --sev2:#ef6c00; --sev2ink:#9a4d00; --sev2bg:#fdf1e2; --sev2ln:#f4dab4;
  --sev3:#e53935; --sev3ink:#c62828; --sev3bg:#fdeaea; --sev3ln:#f3c9c7;
  --sev4:#b71c1c; --sev4ink:#8e1515; --sev4bg:#f9e2e2; --sev4ln:#edbfbf;
  --warn:#b97b0a; --warnbg:#fdf6e2; --warnln:#efdfae;
  /* Form & Tiefe */
  --radius:20px; --radius-s:14px;
  /* Elevation-Staffel (petrol-getönt statt grau): e1 ruhend, e2 Karte, e3 schwebend */
  --e1:0 1px 2px rgba(11,36,51,.06),0 4px 12px -6px rgba(11,36,51,.12);
  --e2:0 1px 2px rgba(11,36,51,.05),0 10px 24px -12px rgba(11,36,51,.14),0 28px 56px -28px rgba(11,36,51,.22);
  --e3:0 3px 8px rgba(11,36,51,.13),0 16px 36px -12px rgba(11,36,51,.28),0 36px 72px -24px rgba(11,36,51,.30);
  --shadow:var(--e2); --shadow-s:var(--e1);
  --ring:0 0 0 4px rgba(19,161,148,.20);
  --grad-brand:linear-gradient(135deg,#128a82,#0b5f63 50%,#0b3a4c);
  --grad-accent:linear-gradient(135deg,#19b0a2,#0e8582 52%,#0b6274);
  --grad-gold:linear-gradient(135deg,#f6cd6c,#e8a51e 55%,#c9850f);
  --topbar:linear-gradient(115deg,#0b2433,#0d3644 52%,#0f5458);
  --ico-search:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7' fill='none' stroke='%23566d75' stroke-width='2'/%3E%3Cpath d='M16.5 16.5 21 21' stroke='%23566d75' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  --maxw:760px;
}

/* ---- Dark Mode: nur die App (body.ms-app), Tokens werden vererbt ---- */
@media (prefers-color-scheme: dark){
  :where(:root:not([data-theme="light"])) body.ms-app{
    --petrol-x:#071820;
    --cyan:#2cc4b4; --cyan-d:#62d6c8;
    --amber:#f0b445; --amber-ink:#f2c46d; --amber-soft:#30260f;
    --bg:#081218; --card:#0f1d25;
    --ink:#e4eef1; --muted:#93a8b0; --line:#223743; --line-soft:#1a2c36;
    --soft:#132430; --soft-2:#173039;
    --sev1:#5cb860; --sev1ink:#a3d9a7; --sev1bg:#132a1c; --sev1ln:#245633;
    --sev2:#ff9d3d; --sev2ink:#ffc98c; --sev2bg:#2f2110; --sev2ln:#59401b;
    --sev3:#ef5350; --sev3ink:#ff9d99; --sev3bg:#341414; --sev3ln:#5c2222;
    --sev4:#e53935; --sev4ink:#ff7d78; --sev4bg:#3a0f0f; --sev4ln:#661c1c;
    --warn:#f2c14e; --warnbg:#2c2412; --warnln:#4c3e1c;
    --e1:0 1px 2px rgba(0,0,0,.32),0 5px 14px -6px rgba(0,0,0,.45);
    --e2:0 1px 2px rgba(0,0,0,.3),0 10px 24px -10px rgba(0,0,0,.5),0 28px 56px -24px rgba(0,0,0,.55);
    --e3:0 4px 10px rgba(0,0,0,.4),0 18px 40px -12px rgba(0,0,0,.6),0 40px 80px -26px rgba(0,0,0,.55);
    --ring:0 0 0 4px rgba(44,199,182,.28);
    --grad-brand:linear-gradient(135deg,#17a197,#0e7072 55%,#0c4a5a);
    --grad-accent:linear-gradient(135deg,#22c2b2,#119590 52%,#0d6d7e);
    --topbar:linear-gradient(115deg,#060f15,#0a1f29 55%,#0c3338);
    --ico-search:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7' fill='none' stroke='%2393a8b0' stroke-width='2'/%3E%3Cpath d='M16.5 16.5 21 21' stroke='%2393a8b0' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  }
}

  :where(:root[data-theme="dark"]) body.ms-app{
    --petrol-x:#071820;
    --cyan:#2cc4b4; --cyan-d:#62d6c8;
    --amber:#f0b445; --amber-ink:#f2c46d; --amber-soft:#30260f;
    --bg:#081218; --card:#0f1d25;
    --ink:#e4eef1; --muted:#93a8b0; --line:#223743; --line-soft:#1a2c36;
    --soft:#132430; --soft-2:#173039;
    --sev1:#5cb860; --sev1ink:#a3d9a7; --sev1bg:#132a1c; --sev1ln:#245633;
    --sev2:#ff9d3d; --sev2ink:#ffc98c; --sev2bg:#2f2110; --sev2ln:#59401b;
    --sev3:#ef5350; --sev3ink:#ff9d99; --sev3bg:#341414; --sev3ln:#5c2222;
    --sev4:#e53935; --sev4ink:#ff7d78; --sev4bg:#3a0f0f; --sev4ln:#661c1c;
    --warn:#f2c14e; --warnbg:#2c2412; --warnln:#4c3e1c;
    --e1:0 1px 2px rgba(0,0,0,.32),0 5px 14px -6px rgba(0,0,0,.45);
    --e2:0 1px 2px rgba(0,0,0,.3),0 10px 24px -10px rgba(0,0,0,.5),0 28px 56px -24px rgba(0,0,0,.55);
    --e3:0 4px 10px rgba(0,0,0,.4),0 18px 40px -12px rgba(0,0,0,.6),0 40px 80px -26px rgba(0,0,0,.55);
    --ring:0 0 0 4px rgba(44,199,182,.28);
    --grad-brand:linear-gradient(135deg,#17a197,#0e7072 55%,#0c4a5a);
    --grad-accent:linear-gradient(135deg,#22c2b2,#119590 52%,#0d6d7e);
    --topbar:linear-gradient(115deg,#060f15,#0a1f29 55%,#0c3338);
    --ico-search:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7' fill='none' stroke='%2393a8b0' stroke-width='2'/%3E%3Cpath d='M16.5 16.5 21 21' stroke='%2393a8b0' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  }


/* ---- Basis ---- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
/* Schriftgrößen-Umschalter (A / A+ / A++): skaliert die rem-Basis global */
html[data-fs="l"]{font-size:112.5%}   /* 16 -> 18 px */
html[data-fs="xl"]{font-size:125%}    /* 16 -> 20 px */
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--ink);background:var(--bg);line-height:1.55;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
/* Seitengrund der App: dezente Mint-/Amber-Lichter, greift Logo-Farbwelt auf */
body.ms-app{background:
  radial-gradient(1100px 520px at 92% -200px, rgba(19,161,148,.14), transparent 60%),
  radial-gradient(900px 420px at -14% -160px, rgba(240,180,69,.10), transparent 55%),
  linear-gradient(180deg, #e7eff2 0, var(--bg) 520px);
  background-color:var(--bg)}
@media (prefers-color-scheme: dark){
  :where(:root:not([data-theme="light"])) body.ms-app{background:
    radial-gradient(1100px 520px at 92% -200px, rgba(44,196,180,.10), transparent 60%),
    radial-gradient(900px 420px at -14% -160px, rgba(240,180,69,.06), transparent 55%),
    linear-gradient(180deg, #0a1820 0, var(--bg) 520px);
    background-color:var(--bg);color-scheme:dark}
}

  :where(:root[data-theme="dark"]) body.ms-app{background:
    radial-gradient(1100px 520px at 92% -200px, rgba(44,196,180,.10), transparent 60%),
    radial-gradient(900px 420px at -14% -160px, rgba(240,180,69,.06), transparent 55%),
    linear-gradient(180deg, #0a1820 0, var(--bg) 520px);
    background-color:var(--bg);color-scheme:dark}

a{color:var(--cyan-d)}
/* hidden-Attribut gewinnt immer (sonst überstimmt eine Klasse mit display das UA-[hidden], z. B. .pznpending) */
body.ms-app [hidden]{display:none!important}
h1,h2,h3{line-height:1.25;margin:0 0 .4em;letter-spacing:-.01em}
img{max-width:100%}
::selection{background:rgba(95,208,194,.35)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 16px}
main#app{padding-bottom:calc(34px + env(safe-area-inset-bottom,0px))}
/* Sticky-Header beim programmatischen Scrollen (go=scan, Ergebnisse) einrechnen */
.card,#results,#pane-scan,main#app{scroll-margin-top:76px}

/* Tastatur-Fokus deutlich, Maus-Fokus ruhig */
:focus-visible{outline:3px solid rgba(14,169,154,.55);outline-offset:2px;border-radius:6px}

/* „Zum Inhalt springen" – für Tastatur/Screenreader, sichtbar erst bei Fokus */
.skip{position:absolute;left:8px;top:-100px;z-index:100;background:var(--card);color:var(--ink);
  border:1px solid var(--line);border-radius:10px;padding:10px 16px;font-weight:700;
  text-decoration:none;box-shadow:var(--shadow);transition:top .16s ease}
.skip:focus{top:calc(8px + env(safe-area-inset-top,0px))}

/* ---- Kopfleiste ---- */
.topbar{position:sticky;top:0;z-index:40;background:var(--topbar);color:#fff;
  padding-top:env(safe-area-inset-top,0px);
  box-shadow:inset 0 -1px 0 rgba(240,180,69,.22),0 4px 12px -6px rgba(8,26,37,.42),0 12px 30px -12px rgba(8,26,37,.5)}
.topbar .wrap{display:flex;align-items:center;gap:12px;min-height:58px}
.brand{display:flex;align-items:center;gap:11px;color:#fff;text-decoration:none;font-weight:700}
.brand .logo{width:34px;height:34px;flex:0 0 auto;border-radius:9px;
  filter:drop-shadow(0 3px 8px rgba(0,0,0,.28))}
.brand b{font-size:1.14rem;letter-spacing:.2px}
.brand small{display:block;font-size:.6rem;font-weight:700;opacity:.8;letter-spacing:.16em;text-transform:uppercase;margin-top:-1px}
.brand .trust{display:inline-flex;align-items:center;gap:6px;margin-top:3px;padding:2px 9px 2px 7px;border-radius:999px;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);font-size:.64rem;font-weight:700;
  letter-spacing:.04em;text-transform:none;opacity:1;color:#dff6f1;white-space:nowrap}
.brand .trust i{width:7px;height:7px;border-radius:50%;background:#4fd18b;box-shadow:0 0 0 3px rgba(79,209,139,.22),0 0 8px rgba(79,209,139,.8)}
.topbar .sp{flex:1}
.topbar .nav{color:#d9f4ef;text-decoration:none;font-size:.9rem;font-weight:650;
  padding:8px 13px;border-radius:999px;border:1px solid rgba(255,255,255,.16);
  transition:background .15s,border-color .15s}
.topbar .nav:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3)}
/* Schriftgrößen-Umschalter (A / A+ / A++) */
.fs-switch{display:flex;align-items:center;gap:2px;background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:2px}
.fs-switch button{border:0;background:transparent;color:#eafffb;cursor:pointer;font-family:inherit;
  font-weight:800;line-height:1;padding:6px 9px;border-radius:999px;transition:background .15s,color .15s}
.fs-switch button:nth-child(1){font-size:.78rem}
.fs-switch button:nth-child(2){font-size:.95rem}
.fs-switch button:nth-child(3){font-size:1.12rem}
.fs-switch button[aria-pressed="true"]{background:#fff;color:var(--navy)}
.fs-switch button:hover{background:rgba(255,255,255,.18)}
.fs-switch button[aria-pressed="true"]:hover{background:#fff}
/* Sehr schmale Geräte: Untertitel im Logo ausblenden, damit der Umschalter Platz hat */
@media (max-width:400px){
  .brand small:not(.trust){display:none}
  .brand{gap:8px}
  .brand b{font-size:1.06rem}
  .topbar .wrap{gap:8px}
  .topbar .nav{padding:8px 11px}
  .fs-switch button{padding:6px 7px}
}

/* ---- Buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font:inherit;font-weight:700;font-size:.98rem;line-height:1.25;letter-spacing:.005em;
  border:0;border-radius:var(--radius-s);padding:12px 20px;min-height:48px;cursor:pointer;
  background:var(--grad-brand);color:#fff;text-decoration:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 1px 2px rgba(6,49,44,.2),0 8px 18px -10px rgba(0,105,92,.6);
  transition:transform .06s ease,box-shadow .18s ease,filter .18s ease,background-color .18s ease;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;user-select:none}
.btn:hover{filter:brightness(1.06)}
.btn:active{transform:translateY(1px) scale(.995);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 1px 2px rgba(6,49,44,.2),0 3px 8px -4px rgba(0,105,92,.5)}
.btn.block{width:100%}
.btn.lg{padding:16px 24px;min-height:58px;font-size:1.08rem;border-radius:16px}
.btn.cyan{background:var(--grad-accent);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 1px 2px rgba(6,49,44,.18),0 8px 18px -10px rgba(11,132,120,.65)}
.btn.ghost{background:var(--card);color:var(--petrol);border:1.5px solid var(--line);box-shadow:none}
.btn.ghost:hover{background:var(--soft);border-color:var(--cyan);filter:none}
.btn.small{padding:8px 14px;min-height:40px;font-size:.9rem;border-radius:11px}
.btn.ghost.danger{color:var(--sev3ink);border-color:var(--sev3ln)}
.btn.ghost.danger:hover{background:var(--sev3bg);border-color:var(--sev3)}
.btn[disabled]{opacity:.55;cursor:not-allowed;box-shadow:none}
.btn .sp{width:16px;height:16px;border:2px solid rgba(255,255,255,.5);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-color-scheme: dark){
  :where(:root:not([data-theme="light"])) body.ms-app .btn.ghost{color:var(--cyan-d)}
}

  :where(:root[data-theme="dark"]) body.ms-app .btn.ghost{color:var(--cyan-d)}


/* Haupt-CTA „Wechselwirkungen prüfen": schwebt am unteren Rand mit, bis man ihn
   im Lesefluss erreicht – auf dem Handy immer mit dem Daumen erreichbar. */
#analyzeBtn{position:sticky;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:25;
  margin:20px 0 10px;border:1px solid rgba(255,255,255,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 3px 7px rgba(6,49,44,.16),
    0 16px 38px -10px rgba(6,73,66,.5),0 32px 64px -26px rgba(6,73,66,.4)}

/* ---- Karten ---- */
.card{background:var(--card);border:1px solid var(--line-soft);border-radius:var(--radius);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),var(--shadow);padding:20px 18px;margin:16px 0}
.card h2{font-size:1.1rem;margin:0 0 14px;display:flex;align-items:center;gap:10px;color:var(--ink)}
.card h2 .n{margin-left:auto;background:var(--soft-2);color:var(--cyan-d);font-size:.78rem;
  font-weight:750;padding:3px 11px;border-radius:999px;letter-spacing:.02em}
.card h2 .step{flex:0 0 auto;width:28px;height:28px;border-radius:9px;background:var(--grad-brand);
  color:#fff;display:inline-grid;place-items:center;font-size:.95rem;font-weight:800;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 4px 10px -4px rgba(0,105,92,.55)}
.subhead{display:flex;align-items:center;gap:8px;font-size:1rem;font-weight:700;margin:0 0 10px;color:var(--ink)}
.muted{color:var(--muted)}
.small{font-size:.87rem}
.hr{height:1px;background:var(--line-soft);border:0;margin:16px 0}

/* ---- Disclaimer / Hinweise ---- */
.disclaimer{background:var(--warnbg);border:1px solid var(--warnln);border-radius:14px;
  padding:12px 15px;margin:14px 0;font-size:.88rem;line-height:1.55;color:var(--amber-ink)}
.disclaimer b{color:var(--warn)}
/* Datengrundlage-Zeile: bewusst voller Farbkontrast (kein opacity), nur kleiner gesetzt */
.datasource{display:inline-block;margin-top:6px;font-size:.8rem;color:var(--amber-ink)}

/* ---- Ergebnis-Kopf mit Aktionen (Teilen / PDF) ---- */
.res-head{display:flex;align-items:center;gap:10px 12px;flex-wrap:wrap;margin-bottom:12px}
.res-head h2{margin:0}
.res-actions{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}

/* ---- Eingabe-Umschalter (Altbestand, wird aktuell nicht gerendert) ---- */
.seg{display:flex;background:var(--soft);border-radius:13px;padding:4px;gap:4px;margin-bottom:14px}
.seg button{flex:1;border:0;background:transparent;font:inherit;font-weight:700;color:var(--muted);
  padding:10px;border-radius:10px;cursor:pointer}
.seg button[aria-selected="true"]{background:var(--card);color:var(--petrol);box-shadow:var(--shadow-s)}

/* ---- Foto-Scan-Bereich: ruhiges Panel mit Sucher-Ecken (Logo-Echo) ---- */
.scanpad{position:relative;border:1px solid var(--line-soft);border-radius:16px;
  padding:16px 14px 14px;background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M3 21V10Q3 3 10 3H21' fill='none' stroke='%23e8a51e' stroke-width='3' stroke-linecap='round' stroke-opacity='.65'/%3E%3C/svg%3E") no-repeat left 7px top 7px,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M3 3H14Q21 3 21 10V21' fill='none' stroke='%23e8a51e' stroke-width='3' stroke-linecap='round' stroke-opacity='.65'/%3E%3C/svg%3E") no-repeat right 7px top 7px,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M3 3V14Q3 21 10 21H21' fill='none' stroke='%23e8a51e' stroke-width='3' stroke-linecap='round' stroke-opacity='.65'/%3E%3C/svg%3E") no-repeat left 7px bottom 7px,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M21 3V14Q21 21 14 21H3' fill='none' stroke='%23e8a51e' stroke-width='3' stroke-linecap='round' stroke-opacity='.65'/%3E%3C/svg%3E") no-repeat right 7px bottom 7px,
    linear-gradient(180deg,var(--soft-2),var(--soft) 70%)}
.scanrow{display:flex;gap:10px;flex-wrap:wrap}
.scanrow .btn{flex:1 1 160px;min-height:54px;font-size:1rem}

/* Datei-Drop (Altbestand) */
.drop{border:2px dashed var(--line);border-radius:14px;padding:22px;text-align:center;background:var(--soft)}
.drop input{display:none}
.thumb{max-height:210px;border-radius:12px;margin:12px auto 0;display:block;
  border:1px solid var(--line);box-shadow:var(--shadow-s)}
.progress{height:10px;background:var(--soft-2);border-radius:999px;overflow:hidden;margin:12px 0 4px}
.progress i{display:block;height:100%;width:0;background:var(--grad-accent);border-radius:999px;transition:width .2s}

/* ---- Scan-Animation (ersetzt die Prozentleiste): dunkles Sucher-Panel,
   Foto im Rahmen, goldene Ecken, glühende Laserlinie, Status-Pill ---- */
.scanfx{margin:14px 0 0;padding:12px 12px 14px;border-radius:20px;color:#e8f3f5;
  background:radial-gradient(130% 100% at 50% 0%,#17485a 0%,#0d2c3c 55%,#081a25 100%);
  border:1px solid rgba(240,180,69,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 14px 34px -14px rgba(8,26,37,.65);
  animation:fxIn .35s cubic-bezier(.22,.61,.36,1) both}
.scanfx[hidden]{display:none}
.scanfx{scroll-margin:90px 0 130px}  /* Topbar oben, angehefteter Prüf-Knopf unten */
@keyframes fxIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.scanfx-stage{position:relative;height:210px;border-radius:14px;overflow:hidden;display:grid;place-items:center;
  background:radial-gradient(90% 80% at 50% 45%,rgba(95,208,194,.14),transparent 70%),#0a2230}
.scanfx-pack{width:64%;max-width:250px;transform:rotate(-4deg);filter:drop-shadow(0 12px 22px rgba(0,0,0,.5));
  transition:opacity .35s ease,transform .35s ease}
.scanfx.loaded .scanfx-pack{opacity:0;transform:rotate(-4deg) scale(.94)}
.scanfx-img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;z-index:1;
  filter:saturate(.9) contrast(1.05);animation:fxImgIn .4s ease both}
.scanfx-img[hidden]{display:none}
@keyframes fxImgIn{from{opacity:0}to{opacity:1}}
.scanfx-stage::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,26,37,.45),transparent 28%,transparent 72%,rgba(8,26,37,.5))}
.scanfx-c{position:absolute;z-index:3;width:28px;height:28px;border:3px solid var(--gold);
  filter:drop-shadow(0 0 6px rgba(240,180,69,.55));transition:border-color .25s ease}
.scanfx-c.tl{top:12px;left:12px;border-right:0;border-bottom:0;border-top-left-radius:11px}
.scanfx-c.tr{top:12px;right:12px;border-left:0;border-bottom:0;border-top-right-radius:11px}
.scanfx-c.bl{bottom:12px;left:12px;border-right:0;border-top:0;border-bottom-left-radius:11px}
.scanfx-c.br{bottom:12px;right:12px;border-left:0;border-top:0;border-bottom-right-radius:11px}
.scanfx-laser{position:absolute;z-index:3;left:7%;right:7%;top:12%;height:3px;border-radius:3px;
  background:linear-gradient(90deg,transparent,#ffd27a 18%,#fff6dc 50%,#ffd27a 82%,transparent);
  box-shadow:0 0 10px 2px rgba(240,180,69,.75),0 0 30px 8px rgba(240,180,69,.32);
  animation:fxLaser 1.7s cubic-bezier(.45,0,.55,1) infinite alternate;transition:opacity .25s ease}
@keyframes fxLaser{from{top:12%}to{top:86%}}
.scanfx-ok{position:absolute;z-index:4;width:66px;height:66px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(135deg,#43c983,#1f9a5c);color:#fff;opacity:0;transform:scale(.4);
  box-shadow:0 0 0 8px rgba(67,201,131,.2),0 12px 30px -8px rgba(0,0,0,.5);
  transition:opacity .25s ease,transform .35s cubic-bezier(.34,1.56,.64,1)}
.scanfx-ok svg{width:34px;height:34px}
.scanfx-status{display:flex;align-items:center;justify-content:center;gap:9px;margin:12px auto 0;width:max-content;max-width:100%;
  padding:7px 15px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);
  font-weight:700;font-size:.93rem;color:#f7e6bd;text-align:center}
.scanfx-dot{flex:0 0 auto;width:9px;height:9px;border-radius:50%;background:var(--gold);animation:fxDot 1.2s ease-out infinite}
@keyframes fxDot{0%{box-shadow:0 0 0 0 rgba(240,180,69,.6)}100%{box-shadow:0 0 0 10px rgba(240,180,69,0)}}
.scanfx.ok .scanfx-laser,.scanfx.fail .scanfx-laser{opacity:0;animation-play-state:paused}
.scanfx.ok .scanfx-c{border-color:#43c983;filter:drop-shadow(0 0 6px rgba(67,201,131,.6))}
.scanfx.ok .scanfx-ok{opacity:1;transform:scale(1)}
.scanfx.ok .scanfx-status{color:#c9f3dc}
.scanfx.ok .scanfx-dot{background:#43c983;animation:none}
.scanfx.fail .scanfx-c{border-color:rgba(255,255,255,.35);filter:none}
.scanfx.fail .scanfx-status{color:#e3ecef}
.scanfx.fail .scanfx-dot{background:#9fb3ba;animation:none}

/* ---- Vertrauensleiste am Seitenende („bleibt auf dem Gerät") ---- */
.trustbar{display:flex;align-items:center;gap:13px;margin:22px 0 6px;padding:14px 16px;border-radius:18px;
  background:linear-gradient(120deg,#0b2433,#0e3a47 60%,#0f5458);color:#e6f5f3;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),var(--e2)}
.trustbar-ic{flex:0 0 auto;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
  background:rgba(240,180,69,.14);color:var(--gold);border:1px solid rgba(240,180,69,.3)}
.trustbar-ic svg{width:22px;height:22px}
.trustbar-tx b{display:block;font-size:.97rem;color:#fff}
.trustbar-tx span{display:block;font-size:.8rem;color:#b9d3d6;margin-top:1px;line-height:1.45}

/* ---- Scan-Kurzergebnis direkt unter dem Scan-Panel: „Erkannt"-Karte +
   Wechselwirkungen nach Schweregrad (Farbstreifen + Pill) – ohne Scrollen ---- */
.scansum{display:grid;gap:10px;margin:12px 0 0;animation:fxIn .35s cubic-bezier(.22,.61,.36,1) both}
.scansum[hidden]{display:none}
.ss-card{position:relative;overflow:hidden;background:var(--card);border:1px solid var(--line-soft);
  border-radius:16px;padding:12px 14px 12px 19px;box-shadow:var(--shadow-s)}
.ss-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--line)}
.ss-k{font-size:.7rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.ss-found::before{background:var(--sev1)}
.ss-found .ss-k{color:var(--sev1ink)}
.ss-med+.ss-med{margin-top:7px;padding-top:7px;border-top:1px solid var(--line-soft)}
.ss-med b{display:block;font-size:1.04rem;line-height:1.3}
.ss-med span{display:block;font-size:.83rem;color:var(--muted);margin-top:1px}
/* viele Treffer (z. B. Medikationsplan): Namen als kompakte Liste */
.ss-names{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.ss-names b{font-size:.86rem;font-weight:700;padding:3px 10px;border-radius:999px;background:var(--sev1bg);color:var(--sev1ink);border:1px solid var(--sev1ln)}
/* Scan-Panel nach Treffer mit Kurzergebnis: Bühne schrumpft, damit die Wechselwirkungen ohne Scrollen sichtbar sind */
.scanfx.withsum .scanfx-stage{height:92px;transition:height .35s ease}
.scanfx.withsum .scanfx-ok{width:44px;height:44px;box-shadow:0 0 0 5px rgba(67,201,131,.2)}
.scanfx.withsum .scanfx-ok svg{width:24px;height:24px}
.scanfx.withsum .scanfx-c{width:18px;height:18px;border-width:2px}
.scanfx.withsum .scanfx-status{margin-top:8px;padding:5px 13px;font-size:.86rem}
.scanfx.withsum{padding:9px 9px 10px}
.ss-sec{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:4px 2px 0;
  font-size:.74rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.ss-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.ss-ttl{font-weight:700;font-size:.97rem;line-height:1.35;flex:1 1 auto;min-width:0;overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto}
.ss-pill{flex:0 0 auto;font-size:.66rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  padding:4px 9px;border-radius:999px;background:var(--soft);color:var(--muted);border:1px solid var(--line)}
.ss-pair{font-size:.88rem;font-weight:650;color:var(--petrol-d);margin-top:4px}
.ss-pair i{font-style:normal;color:var(--muted);font-weight:400;margin:0 1px}
.ss-pair{overflow-wrap:anywhere}
.ss-tx{font-size:.85rem;color:var(--muted);line-height:1.45;margin-top:5px}
.ss-it.sev1::before{background:var(--sev1)} .ss-it.sev1 .ss-pill{background:var(--sev1bg);color:var(--sev1ink);border-color:var(--sev1ln)}
.ss-it.sev2::before{background:var(--sev2)} .ss-it.sev2 .ss-pill{background:var(--sev2bg);color:var(--sev2ink);border-color:var(--sev2ln)}
.ss-it.sev3::before{background:var(--sev3)} .ss-it.sev3 .ss-pill{background:var(--sev3bg);color:var(--sev3ink);border-color:var(--sev3ln)}
.ss-it.sev4::before{background:var(--sev4)} .ss-it.sev4 .ss-pill{background:var(--sev4bg);color:var(--sev4ink);border-color:var(--sev4ln)}
.ss-none::before{background:var(--sev1)}
.ss-none p{margin:0;font-size:.88rem;line-height:1.45}
.ss-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;margin:2px 2px 0}
.ss-foot .small{flex:1 1 180px;margin:0}
@media (prefers-color-scheme: dark){ :where(:root:not([data-theme="light"])) body.ms-app .ss-pair{color:var(--mint)} }
 :where(:root[data-theme="dark"]) body.ms-app .ss-pair{color:var(--mint)} 
@media (prefers-reduced-motion:reduce){ .scansum{animation:none} }
#ocrraw{margin-top:10px;padding:9px 12px;border:1px solid var(--line);border-radius:11px;
  background:var(--soft);word-break:break-word}

/* ---- Suche + Autocomplete ---- */
.field{position:relative}
.field input[type=text],.field input:not([type]){width:100%;font:inherit;font-size:1.05rem;
  min-height:54px;padding:14px 16px 14px 47px;color:var(--ink);
  border:1.5px solid var(--line);border-radius:14px;
  background:var(--card) var(--ico-search) no-repeat 15px center/21px;
  transition:border-color .15s,box-shadow .15s}
.field input:focus{outline:0;border-color:var(--cyan);box-shadow:var(--ring)}
.field input::placeholder{color:var(--muted);opacity:.75}
.ac{position:absolute;left:0;right:0;top:calc(100% + 6px);background:var(--card);
  border:1px solid var(--line);border-radius:14px;box-shadow:var(--e3);
  z-index:30;max-height:300px;overflow:auto;overscroll-behavior:contain}
.ac button{display:block;width:100%;text-align:left;border:0;background:transparent;font:inherit;
  color:var(--ink);padding:11px 15px;cursor:pointer;border-bottom:1px solid var(--line-soft);
  -webkit-tap-highlight-color:transparent}
.ac button:last-child{border-bottom:0}
.ac button:hover,.ac button.active{background:var(--soft-2);box-shadow:inset 3px 0 0 var(--cyan)}
.ac .ing{color:var(--muted);font-size:.84rem;margin-top:1px}
.ac .ac-via{color:var(--cyan-d);font-weight:600}
.ac-combo{display:inline-block;margin-left:6px;padding:1px 8px;border-radius:999px;
  background:var(--amber-soft);color:var(--amber-ink);font-size:.68rem;font-weight:750;
  vertical-align:middle;letter-spacing:.03em;text-transform:uppercase}

/* ---- Live-Kamera-Scan (Altbestand, aktuell ohne Aufrufer) ---- */
.scanview{position:relative;border-radius:14px;overflow:hidden;background:#04211d;margin-bottom:10px;
  aspect-ratio:4/3;max-height:60vh}
.scanview video{width:100%;height:100%;object-fit:cover;display:block}
.scanframe{position:absolute;inset:16% 10%;border:2px solid rgba(255,255,255,.9);border-radius:12px;
  box-shadow:0 0 0 100vmax rgba(0,0,0,.28);pointer-events:none}
.scanframe:after{content:"";position:absolute;left:0;right:0;top:50%;height:2px;
  background:var(--mint);box-shadow:0 0 8px var(--mint)}
.scanstop{position:absolute;top:10px;right:10px;background:rgba(255,255,255,.92)}

/* ---- PZN-Eingabe ---- */
.pznrow{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.pznrow input{width:100%;font:inherit;font-size:1.05rem;min-height:52px;padding:13px 15px;
  border:1.5px solid var(--line);border-radius:13px;letter-spacing:.06em;
  background:var(--card);color:var(--ink);transition:border-color .15s,box-shadow .15s}
.pznrow input:focus{outline:0;border-color:var(--cyan);box-shadow:var(--ring)}
.pznrow .btn{white-space:nowrap;width:100%}
@media (min-width:540px){
  .pznrow{flex-direction:row}
  .pznrow .btn{width:auto;flex:0 0 auto}
}
.pznpending{margin-top:14px;display:flex;gap:12px;align-items:flex-start;
  background:var(--warnbg);border:1px solid var(--warnln);border-left:4px solid var(--warn);
  border-radius:13px;padding:12px 14px}
.pznpending .pzn-txt{font-size:.9rem;color:var(--amber-ink);line-height:1.5}
.pznpending .btn{flex:none;align-self:center}

/* Foto/OCR-Klappbereich */
.ocrdetails{margin-top:14px;border-top:1px solid var(--line-soft);padding-top:6px}
.ocrdetails summary{list-style:none;display:flex;align-items:center;gap:9px;min-height:44px;
  cursor:pointer;font-weight:650;color:var(--cyan-d);-webkit-tap-highlight-color:transparent}
.ocrdetails summary::-webkit-details-marker{display:none}
.ocrdetails summary::before{content:"";flex:0 0 auto;width:8px;height:8px;margin-left:3px;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(-45deg);transition:transform .15s ease}
.ocrdetails[open] summary::before{transform:rotate(45deg)}
.ocrdetails[open] summary{margin-bottom:6px}

/* ---- Chips (ausgewählte Medikamente) ---- */
.chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:4px}
.chip{display:inline-flex;align-items:center;gap:8px;min-height:42px;
  background:var(--soft-2);border:1px solid var(--line);color:var(--petrol-d);
  border-radius:999px;padding:7px 8px 7px 15px;font-weight:650;font-size:.95rem;
  animation:chipIn .18s ease}
@keyframes chipIn{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}
.chip small{font-weight:500;opacity:.8;font-size:.8rem}
.chip small::before{content:"· ";opacity:.6}
.chip .x{flex:0 0 auto;width:27px;height:27px;border:0;border-radius:50%;
  background:rgba(0,77,64,.12);color:inherit;font-size:1.05rem;line-height:1;cursor:pointer;
  display:grid;place-items:center;transition:background .15s,color .15s;
  -webkit-tap-highlight-color:transparent}
.chip .x:hover{background:var(--sev3);color:#fff}
@media (prefers-color-scheme: dark){
  :where(:root:not([data-theme="light"])) body.ms-app .chip{color:var(--mint)}
  :where(:root:not([data-theme="light"])) body.ms-app .chip .x{background:rgba(95,208,194,.15)}
}

  :where(:root[data-theme="dark"]) body.ms-app .chip{color:var(--mint)}
  :where(:root[data-theme="dark"]) body.ms-app .chip .x{background:rgba(95,208,194,.15)}

.selactions{display:flex;flex-wrap:wrap;gap:9px;margin-top:16px}
/* Die drei Auswahl-Aktionen farbig (nicht weiß) – heben sich so von den Medikamenten-Chips ab */
.selactions .btn.sel-save{background:#0b7c78;color:#fff;border:1.5px solid #0b7c78}
.selactions .btn.sel-meds{background:#a8461f;color:#fff;border:1.5px solid #a8461f}
.selactions .btn.sel-clear{background:#fbd9d6;color:#a51d1d;border:1.5px solid #e8a19c;box-shadow:none}
.selactions .btn.sel-save:hover,.selactions .btn.sel-meds:hover,.selactions .btn.sel-clear:hover{filter:brightness(1.08)}
@media (prefers-color-scheme: dark){
  :where(:root:not([data-theme="light"])) body.ms-app .selactions .btn.sel-clear{background:#4a1c1c;color:#ffb3ae;border-color:#8a3a36}
}
:where(:root[data-theme="dark"]) body.ms-app .selactions .btn.sel-clear{background:#4a1c1c;color:#ffb3ae;border-color:#8a3a36}

/* ---- Gespeicherte Pläne & Einnahme-Erinnerungen ---- */
#planList{display:flex;flex-direction:column;gap:10px}
.mplan{border:1px solid var(--line-soft);border-radius:14px;padding:13px 14px;background:var(--soft)}
.mplan-hd{display:flex;gap:10px;align-items:flex-start;flex-wrap:wrap}
.mplan-nm{flex:1;min-width:160px}
.mplan-nm .n{margin-left:4px;background:var(--soft-2);color:var(--cyan-d);font-size:.75rem;
  font-weight:750;padding:2px 9px;border-radius:999px}
.mplan-prev{margin-top:3px}
.mplan-bt{display:flex;flex-wrap:wrap;gap:7px}
.mplan-rem{margin-top:12px;padding-top:12px;border-top:1px dashed var(--line)}
.rem-times{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.timechip{display:inline-flex;align-items:center;gap:6px;background:var(--soft-2);color:var(--petrol-d);
  border:1px solid var(--line);border-radius:999px;padding:6px 7px 6px 13px;font-weight:700;font-size:.9rem;
  font-variant-numeric:tabular-nums}
.timechip .x{width:22px;height:22px;border:0;border-radius:50%;background:rgba(0,77,64,.12);
  color:inherit;font-size:.95rem;line-height:1;cursor:pointer;display:grid;place-items:center}
.timechip .x:hover{background:var(--sev3);color:#fff}
@media (prefers-color-scheme: dark){ :where(:root:not([data-theme="light"])) body.ms-app .timechip{color:var(--mint)} }
 :where(:root[data-theme="dark"]) body.ms-app .timechip{color:var(--mint)} 
.rem-add{display:flex;gap:8px;align-items:center;margin-bottom:10px}
.rem-add .tin{font:inherit;font-size:1rem;min-height:44px;padding:8px 12px;
  border:1.5px solid var(--line);border-radius:11px;background:var(--card);color:var(--ink)}
.rem-add .tin:focus{outline:0;border-color:var(--cyan);box-shadow:var(--ring)}
.rem-actions{display:flex;flex-wrap:wrap;gap:8px}
.rem-note{margin:10px 2px 0;line-height:1.5}

/* ---- Profil-Schalter ---- */
.toggles{display:flex;flex-wrap:wrap;gap:9px}
.toggle{display:inline-flex;align-items:center;gap:9px;min-height:46px;
  border:1.5px solid var(--line);background:var(--card);border-radius:999px;padding:9px 16px 9px 11px;
  font:inherit;font-weight:650;font-size:.92rem;cursor:pointer;color:var(--muted);
  transition:border-color .15s,background .15s,color .15s;-webkit-tap-highlight-color:transparent;
  touch-action:manipulation}
.toggle:hover{border-color:var(--cyan)}
.toggle .dot{flex:0 0 auto;width:20px;height:20px;border-radius:50%;
  border:2px solid var(--line);background:transparent;display:grid;place-items:center;
  transition:background .15s,border-color .15s}
.toggle[aria-pressed="true"]{border-color:var(--cyan);background:var(--soft-2);color:var(--petrol-d)}
.toggle[aria-pressed="true"] .dot{background:var(--cyan);border-color:var(--cyan)}
.toggle[aria-pressed="true"] .dot::after{content:"";width:9px;height:5px;margin-top:-2px;
  border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg)}
@media (prefers-color-scheme: dark){
  :where(:root:not([data-theme="light"])) body.ms-app .toggle[aria-pressed="true"]{color:var(--mint)}
  :where(:root:not([data-theme="light"])) body.ms-app .toggle[aria-pressed="true"] .dot::after{border-color:#062622}
}

  :where(:root[data-theme="dark"]) body.ms-app .toggle[aria-pressed="true"]{color:var(--mint)}
  :where(:root[data-theme="dark"]) body.ms-app .toggle[aria-pressed="true"] .dot::after{border-color:#062622}


/* ---- Ergebnis: Gesamt-Einstufung ---- */
.verdict{display:flex;gap:13px;align-items:center;border-radius:14px;padding:13px 15px;
  margin:0 0 14px;border:1px solid var(--line);background:var(--soft)}
.verdict .vicon{flex:0 0 auto;width:36px;height:36px;border-radius:50%;
  display:grid;place-items:center;background:var(--muted);color:#fff}
.verdict .vicon::before{content:"!";font-weight:900;font-size:1.15rem;line-height:1}
.verdict .vtx b{display:block;font-size:1rem;line-height:1.3}
.verdict .vtx span{display:block;font-size:.84rem;color:var(--muted);margin-top:2px}
.verdict.sev1{background:var(--sev1bg);border-color:var(--sev1ln)}
.verdict.sev1 .vicon{background:var(--sev1)} .verdict.sev1 .vicon::before{content:"i"}
.verdict.sev1 b{color:var(--sev1ink)}
.verdict.sev2{background:var(--sev2bg);border-color:var(--sev2ln)}
.verdict.sev2 .vicon{background:var(--sev2)} .verdict.sev2 b{color:var(--sev2ink)}
.verdict.sev3{background:var(--sev3bg);border-color:var(--sev3ln)}
.verdict.sev3 .vicon{background:var(--sev3)} .verdict.sev3 b{color:var(--sev3ink)}
.verdict.sev4{background:var(--sev4bg);border-color:var(--sev4ln)}
.verdict.sev4 .vicon{background:var(--sev4)} .verdict.sev4 b{color:var(--sev4ink)}

/* ---- Ergebnis-Statistik ---- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:6px}
@media (max-width:480px){.stats{grid-template-columns:repeat(2,1fr)}}
.stat{background:var(--soft);border:1px solid var(--line-soft);border-radius:14px;
  padding:13px 8px 11px;text-align:center}
.stat b{display:block;font-size:1.65rem;line-height:1.1;font-weight:800;color:var(--petrol);
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.stat span{font-size:.68rem;color:var(--muted);font-weight:750;letter-spacing:.07em;text-transform:uppercase}
@media (prefers-color-scheme: dark){ :where(:root:not([data-theme="light"])) body.ms-app .stat b{color:var(--mint)} }
 :where(:root[data-theme="dark"]) body.ms-app .stat b{color:var(--mint)} 

/* ---- Ergebnis-Karten (Wechselwirkung / Risiko) ---- */
.res{border:1px solid var(--line-soft);border-left:5px solid var(--muted);border-radius:14px;
  background:var(--card);padding:14px 16px;margin:12px 0;position:relative;box-shadow:var(--shadow-s)}
.res .head{display:flex;align-items:flex-start;gap:10px;justify-content:space-between}
.res .ttl{font-weight:700;font-size:1rem;line-height:1.35;flex:1 1 auto;min-width:0;overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto}
.res .badge{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;font-size:.71rem;
  font-weight:800;padding:4px 10px;border-radius:999px;text-transform:uppercase;letter-spacing:.04em;
  border:1px solid transparent}
.res .badge::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.res .pair{font-size:.92rem;color:var(--petrol-d);font-weight:650;margin:7px 0 0}
.res .pair .arrow{color:var(--muted);margin:0 6px;font-weight:400}
.res .desc{font-size:.92rem;color:var(--ink);opacity:.92;margin-top:7px}
.res .rec{font-size:.9rem;margin-top:10px;padding:10px 13px;background:var(--soft);
  border-left:3px solid var(--cyan);border-radius:10px}
.res .rec b{color:var(--petrol-d)}
.res .sys{font-size:.8rem;color:var(--muted);margin-top:7px}
.res .more{background:none;border:0;color:var(--cyan-d);font:inherit;font-weight:700;padding:6px 0 0;cursor:pointer}
.res .medtags{display:flex;flex-wrap:wrap;gap:6px;margin:9px 0 2px}
.res .medtag{background:var(--soft-2);color:var(--petrol-d);border-radius:8px;padding:3px 10px;font-size:.8rem;font-weight:650}
@media (prefers-color-scheme: dark){
  :where(:root:not([data-theme="light"])) body.ms-app .res .pair,:where(:root:not([data-theme="light"])) body.ms-app .res .rec b,:where(:root:not([data-theme="light"])) body.ms-app .res .medtag{color:var(--mint)}
}

  :where(:root[data-theme="dark"]) body.ms-app .res .pair,:where(:root[data-theme="dark"]) body.ms-app .res .rec b,:where(:root[data-theme="dark"]) body.ms-app .res .medtag{color:var(--mint)}

.sev1{border-left-color:var(--sev1)} .sev1 .badge{background:var(--sev1bg);color:var(--sev1ink);border-color:var(--sev1ln)}
.sev2{border-left-color:var(--sev2)} .sev2 .badge{background:var(--sev2bg);color:var(--sev2ink);border-color:var(--sev2ln)}
.sev3{border-left-color:var(--sev3)} .sev3 .badge{background:var(--sev3bg);color:var(--sev3ink);border-color:var(--sev3ln)}
.sev4{border-left-color:var(--sev4)} .sev4 .badge{background:var(--sev4bg);color:var(--sev4ink);border-color:var(--sev4ln)}
.sev0{border-left-color:var(--muted)} .sev0 .badge{background:var(--soft);color:var(--muted);border-color:var(--line)}
/* v3: zarter Farbverlauf ab dem Schweregrad-Streifen (wie im Mockup) */
.res{border-left-width:6px;border-radius:16px}
.res.sev1{background:linear-gradient(100deg,var(--sev1bg),var(--card) 45%)}
.res.sev2{background:linear-gradient(100deg,var(--sev2bg),var(--card) 45%)}
.res.sev3{background:linear-gradient(100deg,var(--sev3bg),var(--card) 45%)}
.res.sev4{background:linear-gradient(100deg,var(--sev4bg),var(--card) 45%)}

/* ---- Leerer Zustand / Erfolg ---- */
.empty{text-align:center;padding:26px 14px;color:var(--muted)}
.empty .big{font-size:2.2rem}
.ok-note{display:flex;gap:10px;align-items:flex-start;background:var(--sev1bg);
  border:1px solid var(--sev1ln);color:var(--sev1ink);border-radius:13px;padding:12px 15px;
  font-weight:600;line-height:1.5}

/* ---- Toast ---- */
.toast{position:fixed;left:50%;bottom:calc(22px + env(safe-area-inset-bottom,0px));
  transform:translateX(-50%);background:linear-gradient(135deg,#123a4a,#0b2433);color:#eef8f9;
  border:1px solid rgba(95,208,194,.35);padding:13px 19px;border-radius:14px;
  box-shadow:0 3px 8px rgba(0,0,0,.22),0 16px 38px -10px rgba(0,0,0,.5);z-index:60;font-weight:600;font-size:.94rem;
  max-width:min(92vw,560px);text-align:center;animation:toastIn .22s ease}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%,0)}}

/* ---- Landing-Altbestand (index.html hat eigene Styles; hier für Alt-Nutzung) ---- */
.hero{background:linear-gradient(160deg,var(--petrol),var(--petrol-d));color:#fff;padding:54px 0 46px}
.hero h1{font-size:2.1rem;margin-bottom:.3em}
.hero p.lead{font-size:1.12rem;opacity:.95;max-width:52ch}
.hero .cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.hero .btn.ghost{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.35)}
.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin:26px 0}
.feature{background:var(--card);border:1px solid var(--line-soft);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}
.feature .ic{width:42px;height:42px;border-radius:12px;background:var(--soft-2);display:grid;place-items:center;font-size:1.3rem;margin-bottom:10px}
.feature h3{font-size:1.02rem;margin:0 0 4px}
.feature p{margin:0;color:var(--muted);font-size:.92rem}
.price{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin:20px 0}
.plan{background:var(--card);border:1px solid var(--line-soft);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);display:flex;flex-direction:column}
.plan.hi{border:2px solid var(--cyan)}
.plan h3{font-size:1.1rem;margin:0 0 2px}
.plan .amt{font-size:1.8rem;font-weight:800;color:var(--petrol);margin:6px 0}
.plan .amt small{font-size:.8rem;color:var(--muted);font-weight:600}
.plan ul{list-style:none;padding:0;margin:10px 0 16px;flex:1}
.plan li{padding:5px 0 5px 24px;position:relative;font-size:.92rem}
.plan li:before{content:"✓";position:absolute;left:0;color:var(--cyan-d);font-weight:800}
.section{padding:28px 0}
.section h2{font-size:1.5rem;text-align:center;margin-bottom:6px}
.section .sub{text-align:center;color:var(--muted);max-width:56ch;margin:0 auto 8px}
footer{background:var(--petrol-x);color:#cfe8e4;padding:26px 0;margin-top:30px;font-size:.9rem}
footer a{color:#fff;text-decoration:none;margin-right:16px}
footer .links{margin-bottom:10px}

/* ---- Legal-Seiten ---- */
.legal{max-width:760px;margin:0 auto;padding:24px 16px 60px}
.legal h1{font-size:1.6rem}
.legal h2{font-size:1.2rem;margin-top:1.4em}
.legal p,.legal li{color:var(--ink)}
.back{display:inline-block;margin:16px 0;color:var(--cyan-d);font-weight:650;text-decoration:none}

/* ---- Ergänzende, öffentliche FDA-Datenebene (englisch, unverändert) ---- */
.fda-wrap{margin-top:4px}
.fda-card{border-color:var(--line)}
.fda-card h2{color:var(--petrol-d)}
@media (prefers-color-scheme: dark){ :where(:root:not([data-theme="light"])) body.ms-app .fda-card h2{color:var(--mint)} }
 :where(:root[data-theme="dark"]) body.ms-app .fda-card h2{color:var(--mint)} 
.fda-src{font-size:.86rem;color:var(--muted);margin:0 0 6px;line-height:1.5}
.fda-item{margin-top:12px;border-top:1px solid var(--line-soft);padding-top:10px}
.fda-item summary{color:var(--cyan-d);margin-bottom:0;cursor:pointer;font-weight:650;min-height:38px;
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;-webkit-tap-highlight-color:transparent}
.fda-ingr{font-weight:500;color:var(--muted);font-size:.86rem}
.fda-text{white-space:pre-wrap;font-size:.88rem;line-height:1.55;color:var(--ink);
  margin:8px 0 6px;background:var(--soft);border:1px solid var(--line-soft);border-radius:11px;
  padding:12px 14px;max-height:340px;overflow:auto}
.fda-cite{font-size:.76rem;color:var(--muted);font-style:italic}
.fda-foot{margin-top:12px;font-size:.76rem;color:var(--muted);text-align:right}

/* ================= Optik-Ergänzungen (nur Präsentation, keine Funktion) ================= */

/* ---- Inline-Linien-Icons: skalieren mit der Textgröße, erben die Textfarbe ---- */
.ico{width:1.15em;height:1.15em;flex:0 0 auto;stroke:currentColor;fill:none;vertical-align:-.16em}
.subhead .ico{width:1.2em;height:1.2em;color:var(--cyan-d)}

/* ---- „So funktioniert's" – Drei-Schritte-Streifen (Erfassen → Prüfen → Plan) ---- */
.howto{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:0 0 16px;padding:0}
.howto-step{position:relative;min-width:0;display:flex;flex-direction:column;align-items:center;text-align:center;gap:9px;
  background:var(--card);border:1px solid var(--line-soft);border-radius:15px;padding:15px 8px 13px;
  box-shadow:var(--shadow-s);animation:cardIn .5s cubic-bezier(.22,.61,.36,1) both}
.howto-step:nth-child(2){animation-delay:.07s}
.howto-step:nth-child(3){animation-delay:.14s}
.howto-ic{width:42px;height:42px;border-radius:13px;background:var(--grad-brand);color:#fff;display:grid;place-items:center;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 4px 10px -4px rgba(0,105,92,.55)}
.howto-ic .ico{width:23px;height:23px}
.howto-tx{min-width:0;display:flex;flex-direction:column;gap:2px}
.howto-tx b{font-size:.9rem;color:var(--ink);letter-spacing:.01em;overflow-wrap:break-word}
.howto-tx span{font-size:.76rem;color:var(--muted);line-height:1.35;overflow-wrap:break-word}
@media (min-width:480px){
  .howto-step:not(:last-child)::after{content:"";position:absolute;right:-11px;top:32px;width:9px;height:9px;
    border-top:2px solid var(--line);border-right:2px solid var(--line);transform:rotate(45deg)}
}
@media (max-width:360px){
  .howto{gap:7px}
  .howto-tx b{font-size:.82rem}
  .howto-tx span{font-size:.71rem}
}

/* ---- „Meine Pläne": dauerhaft sichtbarer, illustrierter Leerzustand ---- */
.plans-empty{text-align:center;padding:12px 8px 6px;animation:cardIn .5s cubic-bezier(.22,.61,.36,1) both}
.plans-empty-art{width:116px;height:auto;display:block;margin:0 auto 8px}
.plans-empty .pe-a{stroke:var(--muted);opacity:.42}
.plans-empty .pe-b{stroke:var(--muted);opacity:.30}
.plans-empty .pe-c{stroke:var(--cyan)}
.plans-empty .pe-lead{font-weight:700;color:var(--ink);font-size:1rem;margin:0 0 4px}
.plans-empty .pe-sub{max-width:44ch;margin:0 auto;line-height:1.5}

/* ---- Schweregrad-Ring (ersetzt das flache Badge; Füllgrad = rank/4) ---- */
.sevmark{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:3px;max-width:96px;min-width:0}
.sevring{width:40px;height:40px;overflow:visible}
.sevring-bg{fill:none;stroke:var(--line);stroke-width:4}
.sevring-fg{fill:none;stroke:var(--muted);stroke-width:4;stroke-linecap:round;
  stroke-dasharray:var(--ring-c);stroke-dashoffset:var(--ring-o);
  animation:sevfill .9s cubic-bezier(.34,1.12,.64,1) both}
@keyframes sevfill{from{stroke-dashoffset:var(--ring-c)}to{stroke-dashoffset:var(--ring-o)}}
.sevring-gl{fill:var(--muted);font:900 15px/1 system-ui,-apple-system,sans-serif;text-anchor:middle;dominant-baseline:central}
.sevmark-lb{font-size:.66rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);line-height:1.15;text-align:center;max-width:100%;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
.res.sev1 .sevring-fg{stroke:var(--sev1)} .res.sev1 .sevring-gl{fill:var(--sev1ink)} .res.sev1 .sevmark-lb{color:var(--sev1ink)}
.res.sev2 .sevring-fg{stroke:var(--sev2)} .res.sev2 .sevring-gl{fill:var(--sev2ink)} .res.sev2 .sevmark-lb{color:var(--sev2ink)}
.res.sev3 .sevring-fg{stroke:var(--sev3)} .res.sev3 .sevring-gl{fill:var(--sev3ink)} .res.sev3 .sevmark-lb{color:var(--sev3ink)}
.res.sev4 .sevring-fg{stroke:var(--sev4)} .res.sev4 .sevring-gl{fill:var(--sev4ink)} .res.sev4 .sevmark-lb{color:var(--sev4ink)}
/* Hoher Schweregrad: dezenter Puls am Ring */
@keyframes sevpulse{0%,100%{filter:none}50%{filter:drop-shadow(0 0 5px rgba(229,57,53,.55))}}
.res.sev3 .sevring,.res.sev4 .sevring{animation:sevpulse 2.2s ease-in-out infinite}

/* ---- Mikroanimationen: gestaffelter Auftritt, Häkchen-Zeichnung, Banner-Icon ---- */
@keyframes cardIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes resIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
#results>.card{animation:cardIn .5s cubic-bezier(.22,.61,.36,1) both}
#results>.card:nth-child(2){animation-delay:.06s}
#results>.card:nth-child(3){animation-delay:.12s}
#results>.card:nth-child(4){animation-delay:.18s}
#results>.card:nth-child(5){animation-delay:.24s}
#results>.card:nth-child(6){animation-delay:.30s}
.res{animation:resIn .42s ease both}
/* Erfolgs-Häkchen zeichnet sich einmal (ok-note) */
.ico-check{color:var(--sev1ink);stroke-dasharray:24;stroke-dashoffset:24;animation:drawCheck .5s .15s ease forwards}
@keyframes drawCheck{to{stroke-dashoffset:0}}
/* Ergebnis-Banner-Icon: kurzer Pop, bei hohem Schweregrad zusätzlich sanfter Puls */
@keyframes viconPop{from{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes viconPulse{0%,100%{box-shadow:0 0 0 0 rgba(229,57,53,0)}50%{box-shadow:0 0 0 6px rgba(229,57,53,.16)}}
.verdict .vicon{animation:viconPop .42s cubic-bezier(.34,1.56,.64,1) both}
.verdict.sev3 .vicon,.verdict.sev4 .vicon{animation:viconPop .42s cubic-bezier(.34,1.56,.64,1) both,viconPulse 2.2s 1s ease-in-out infinite}

/* ---- Prüf-Button: leerer Zustand ---- */
#analyzeBtn.idle{filter:saturate(.55);opacity:.82}

/* ---- Toast mit Aktion (über dem angehefteten Prüf-Button) ---- */
body.ms-app .toast{bottom:calc(88px + env(safe-area-inset-bottom,0px))}
.toast{display:flex;align-items:center;gap:12px;justify-content:center}
.toast-act{background:none;border:1.5px solid rgba(95,208,194,.6);color:#8ff0e2;font:inherit;font-weight:800;
  padding:6px 12px;border-radius:10px;cursor:pointer;white-space:nowrap}
.toast-act:hover,.toast-act:focus-visible{background:rgba(95,208,194,.16)}

/* ---- Eigene Dialoge (statt prompt/confirm) ---- */
.msdlg{border:1px solid var(--line);border-radius:18px;padding:0;background:var(--card);color:var(--ink);
  width:min(92vw,420px);box-shadow:0 24px 60px -12px rgba(0,0,0,.45)}
.msdlg::backdrop{background:rgba(6,30,27,.55);backdrop-filter:blur(2px)}
.msdlg-f{padding:20px 20px 16px;margin:0}
.msdlg-t{margin:0 0 6px;font-size:1.1rem;color:var(--petrol-d)}
.msdlg-x{margin:0 0 12px;color:var(--muted);font-size:.92rem}
.msdlg-in{width:100%;box-sizing:border-box;font:inherit;font-size:1rem;padding:11px 13px;border-radius:11px;
  border:1.5px solid var(--line);background:var(--card);color:var(--ink);margin:4px 0 14px}
.msdlg-in:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(44,199,182,.22)}
.msdlg-b{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.btn.danger-solid{background:var(--sev3);color:#fff;border:0}
.btn.danger-solid:hover{filter:brightness(1.07)}

/* ---- Beispiel für Erstnutzer ---- */
.example-box{display:flex;align-items:center;gap:8px 10px;flex-wrap:wrap;margin:12px 2px 0}
.example-box[hidden]{display:none}

/* ---- Ergebnis: Abschnitte aus dem DB-Text ---- */
.res .desc,.res .sec-b,.res .why-p{white-space:pre-line}
.res .sec{margin-top:10px;padding:9px 12px;border-radius:10px;font-size:.92rem}
.res .sec-h{font-weight:800;font-size:.8rem;letter-spacing:.03em;text-transform:uppercase;margin-bottom:3px}
.res .sec-happen{background:var(--amber-soft);border-left:3px solid var(--amber)}
.res .sec-happen .sec-h{color:var(--amber-ink)}
.res .sec-todo{background:var(--soft);border-left:3px solid var(--cyan)}
.res .sec-todo .sec-h{color:var(--petrol-d)}
.res .why{margin-top:10px;font-size:.88rem}
.res .why summary{cursor:pointer;color:var(--cyan-d);font-weight:700;padding:4px 0;list-style-position:inside}
.res .why summary:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;border-radius:6px}
.res .why-p{margin:6px 0 0;color:var(--ink);opacity:.9}
.res .why-p b{color:var(--petrol-d)}
.newtag{display:inline-block;vertical-align:1px;margin-right:7px;background:var(--grad-accent,var(--cyan));color:#fff;
  font-size:.66rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:2px 7px;border-radius:6px}
.gone-note{margin-top:12px;font-size:.86rem;padding:10px 13px;border-radius:11px;background:var(--soft);border:1px dashed var(--line);color:var(--muted)}
.gone-note b{color:var(--ink)}
.prof-hint{display:flex;align-items:center;gap:10px 12px;flex-wrap:wrap;margin-top:12px;padding:11px 14px;border-radius:12px;
  background:var(--soft);border:1px solid var(--line);font-size:.9rem}
.prof-hint span{flex:1 1 220px}
.res-actions .btn[aria-pressed="true"]{background:var(--soft-2);border-color:var(--cyan)}

/* Doppelung „gleiche Wirkstoffgruppe": neutral, kein Schweregrad */
.res.sevinfo{border-left-color:var(--petrol,#0f6e63)}
.res.sevinfo .sevring-fg{stroke:var(--petrol,#0f6e63)} .res.sevinfo .sevring-gl{fill:var(--petrol-d)} .res.sevinfo .sevmark-lb{color:var(--petrol-d)}

/* Banner-Symbol je Stufe (zusätzlich zur Farbe) */
.verdict.sev3 .vicon::before{content:"!!"}
.verdict.sev4 .vicon::before{content:"\00D7";font-size:1.35rem}

/* ---- Einfache Ansicht: größer, ohne Hintergrund-Details ---- */
body.plain .res .why,body.plain .res .sys,body.plain .fda-wrap{display:none}
body.plain .res .ttl{font-size:1.15rem}
body.plain .res .desc,body.plain .res .sec,body.plain .res .rec,body.plain .res .pair{font-size:1.06rem;line-height:1.55}
body.plain .verdict .vtx b{font-size:1.15rem}

@media (prefers-color-scheme: dark){
  :where(:root:not([data-theme="light"])) body.ms-app .card{box-shadow:inset 0 1px 0 rgba(255,255,255,.04),var(--shadow)}
  :where(:root:not([data-theme="light"])) body.ms-app .trustbar{background:linear-gradient(120deg,#0c2430,#0d3340 60%,#0e4446);border:1px solid var(--line)}
  :where(:root:not([data-theme="light"])) body.ms-app .msdlg-t,:where(:root:not([data-theme="light"])) body.ms-app .res .why-p b,:where(:root:not([data-theme="light"])) body.ms-app .res .sec-todo .sec-h{color:var(--mint)}
  :where(:root:not([data-theme="light"])) body.ms-app .res.sevinfo{border-left-color:var(--cyan)}
  :where(:root:not([data-theme="light"])) body.ms-app .res.sevinfo .sevring-fg{stroke:var(--cyan)}
  :where(:root:not([data-theme="light"])) body.ms-app .res.sevinfo .sevring-gl,:where(:root:not([data-theme="light"])) body.ms-app .res.sevinfo .sevmark-lb{fill:var(--mint);color:var(--mint)}
  :where(:root:not([data-theme="light"])) body.ms-app .msdlg::backdrop{background:rgba(0,0,0,.6)}
}

  :where(:root[data-theme="dark"]) body.ms-app .card{box-shadow:inset 0 1px 0 rgba(255,255,255,.04),var(--shadow)}
  :where(:root[data-theme="dark"]) body.ms-app .trustbar{background:linear-gradient(120deg,#0c2430,#0d3340 60%,#0e4446);border:1px solid var(--line)}
  :where(:root[data-theme="dark"]) body.ms-app .msdlg-t,:where(:root[data-theme="dark"]) body.ms-app .res .why-p b,:where(:root[data-theme="dark"]) body.ms-app .res .sec-todo .sec-h{color:var(--mint)}
  :where(:root[data-theme="dark"]) body.ms-app .res.sevinfo{border-left-color:var(--cyan)}
  :where(:root[data-theme="dark"]) body.ms-app .res.sevinfo .sevring-fg{stroke:var(--cyan)}
  :where(:root[data-theme="dark"]) body.ms-app .res.sevinfo .sevring-gl,:where(:root[data-theme="dark"]) body.ms-app .res.sevinfo .sevmark-lb{fill:var(--mint);color:var(--mint)}
  :where(:root[data-theme="dark"]) body.ms-app .msdlg::backdrop{background:rgba(0,0,0,.6)}


/* ---- Personen, Dosierung, Sicherung ---- */
.personbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 14px;padding:8px 12px;border:1px solid var(--line, #dfe5e4);border-radius:14px;background:var(--card, #fff)}
.personbar-l{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:.92rem}
.personbar-s{flex:1 1 120px;min-width:0;min-height:40px;padding:6px 10px;border-radius:10px;border:1px solid var(--line, #cfd8d6);background:transparent;color:inherit;font:inherit}
.personbar .btn[hidden]{display:none}
.dose-hd{margin:4px 0 8px}
.dose-tbl{display:grid;gap:6px;margin:0 0 12px}
.dose-row{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1.2fr) repeat(4,minmax(34px,.45fr));gap:6px;align-items:center}
.dose-head span{font-size:.75rem;font-weight:700;opacity:.7;text-align:center}
.dose-head span:first-child,.dose-head span:nth-child(2){text-align:left}
.dose-nm{font-size:.88rem;font-weight:600;overflow-wrap:anywhere}
.dose-in{width:100%;min-height:36px;padding:4px 6px;border:1px solid var(--line, #cfd8d6);border-radius:8px;background:transparent;color:inherit;font:inherit;font-size:.9rem}
.dose-n{text-align:center}
@media (max-width:420px){.dose-row{grid-template-columns:minmax(0,1fr) repeat(4,minmax(30px,.4fr))}.dose-row>span:nth-child(2){grid-column:1/-1;order:9}.dose-head>span:nth-child(2){display:none}}

/* ---- Bewegung reduzieren ---- */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001s!important;transition-duration:.001s!important}
  .scanfx-laser,.scanfx-dot{animation:none!important}
  .scanfx-laser{top:50%}
}

/* =====================================================================
   Design v4 – "Warm & Vertraut" (hell) + "Nacht-Präzision" (dunkel)
   Reine Präsentationsschicht über v3: nur Tokens, Schriften, Flächen.
   Keine IDs/Texte/Funktionen geändert. Gilt nur in der App (body.ms-app),
   Rechtsseiten bleiben unverändert. Schriften selbst gehostet (offline, SIL OFL 1.1).
   ===================================================================== */
@font-face{font-family:"Atkinson Hyperlegible Next";font-style:normal;font-weight:200 800;font-display:swap;src:url("fonts/atkinson-next.woff2") format("woff2")}
@font-face{font-family:"Atkinson Hyperlegible Mono";font-style:normal;font-weight:200 800;font-display:swap;src:url("fonts/atkinson-mono.woff2") format("woff2")}

/* ---------- HELL: Warm & Vertraut ---------- */
body.ms-app{
  --font-head:"Fraunces",Georgia,"Times New Roman",serif;
  --font-body:"DM Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --petrol:#A2462B; --petrol-d:#5A3A28; --petrol-x:#3A2A20; --petrol-l:#C2593A;
  --navy:#3A2A20; --navy-2:#4A3528; --mint:#E98A66;
  --cyan:#C2593A; --cyan-d:#A2462B;
  --amber:#D8902B; --amber-ink:#8C5A12; --amber-soft:#F8E8CC; --gold:#E9A15A;
  --bg:#FBF6EE; --card:#FFFDF9;
  --ink:#3A2A20; --muted:#7A6656; --line:#EADBC6; --line-soft:#F1E6D6;
  --soft:#F8F0E5; --soft-2:#F6E3D8;
  --sev1:#5E7A55; --sev1ink:#46603E; --sev1bg:#E7EEE2; --sev1ln:#CDDBC5;
  --sev2:#D8902B; --sev2ink:#8C5A12; --sev2bg:#F8E8CC; --sev2ln:#EDD3A6;
  --sev3:#B23A26; --sev3ink:#9A2F1E; --sev3bg:#F6DAD3; --sev3ln:#EBBFB4;
  --sev4:#8E2414; --sev4ink:#7A1F12; --sev4bg:#F2D0C8; --sev4ln:#E0ABA0;
  --warn:#A86A12; --warnbg:#FBF0DC; --warnln:#EED9B2;
  --radius:22px; --radius-s:16px;
  --e1:0 2px 0 #F1E6D6,0 6px 14px -8px rgba(58,42,32,.14);
  --e2:0 2px 0 #F1E6D6,0 14px 30px -18px rgba(58,42,32,.22);
  --e3:0 4px 10px rgba(58,42,32,.12),0 22px 44px -16px rgba(58,42,32,.3);
  --ring:0 0 0 4px rgba(194,89,58,.18);
  --grad-brand:linear-gradient(135deg,#CF6A4A,#C2593A 55%,#AC4A2E);
  --grad-accent:linear-gradient(135deg,#CF6A4A,#C2593A 55%,#AC4A2E);
  --grad-gold:linear-gradient(135deg,#F2C27E,#D8902B 60%,#B9771C);
  --topbar:rgba(251,246,238,.9);
  --cta-ink:#fff; --cta-glow:0 10px 20px -10px rgba(194,89,58,.7);
  --ico-search:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7' fill='none' stroke='%237A6656' stroke-width='2'/%3E%3Cpath d='M16.5 16.5 21 21' stroke='%237A6656' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  font-family:var(--font-body);
  background:radial-gradient(900px 460px at 88% -180px,rgba(194,89,58,.10),transparent 60%),
    radial-gradient(800px 400px at -10% -140px,rgba(94,122,85,.08),transparent 55%),var(--bg);
  background-color:var(--bg)}
body.ms-app ::selection{background:rgba(194,89,58,.22)}
body.ms-app :focus-visible{outline-color:rgba(194,89,58,.6)}
body.ms-app h1,body.ms-app h2,body.ms-app h3,body.ms-app .card h2,body.ms-app .brand b,
body.ms-app .stat b,body.ms-app .msdlg-t,body.ms-app .plans-empty .pe-lead{
  font-family:var(--font-head);letter-spacing:-.005em}
body.ms-app .card h2{font-weight:600;font-size:1.22rem}
body.ms-app .subhead{font-family:var(--font-head);font-weight:600;font-size:1.06rem}

/* Kopfleiste: hell, ruhig, Text in Mokka */
body.ms-app .topbar{background:var(--topbar);color:var(--ink);
  -webkit-backdrop-filter:saturate(1.2) blur(12px);backdrop-filter:saturate(1.2) blur(12px);
  box-shadow:0 1px 0 var(--line-soft),0 8px 20px -16px rgba(58,42,32,.35)}
body.ms-app .brand{color:var(--ink)}
body.ms-app .brand .logo{filter:drop-shadow(0 3px 6px rgba(58,42,32,.22))}
body.ms-app .brand .logo rect:first-child,body.ms-app .brand .logo rect:last-child{fill:#C2593A}
body.ms-app .brand .logo g{stroke:#F6DED2}
body.ms-app .brand .trust{background:#E7EEE2;border-color:#CDDBC5;color:#46603E}
body.ms-app .brand .trust i{background:#5E7A55;box-shadow:0 0 0 3px rgba(94,122,85,.2)}
body.ms-app .topbar .nav{color:var(--ink);border-color:var(--line)}
body.ms-app .topbar .nav:hover{background:var(--soft);border-color:var(--cyan)}
body.ms-app .fs-switch{background:var(--card);border-color:var(--line)}
body.ms-app .fs-switch button{color:var(--muted)}
body.ms-app .fs-switch button:hover{background:var(--soft)}
body.ms-app .fs-switch button[aria-pressed="true"],
body.ms-app .fs-switch button[aria-pressed="true"]:hover{background:var(--navy);color:#FBF6EE}

/* Knöpfe: Pillenform, Terrakotta-CTA, cremefarbene Sekundärknöpfe */
body.ms-app .btn{border-radius:999px;background:var(--grad-brand);color:var(--cta-ink);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),var(--cta-glow)}
body.ms-app .btn.cyan{background:var(--grad-accent);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),var(--cta-glow)}
body.ms-app .btn.lg,body.ms-app .btn.small{border-radius:999px}
body.ms-app .btn.ghost{background:var(--card);color:var(--ink);border:1.5px solid var(--line);box-shadow:0 2px 0 var(--line-soft)}
body.ms-app .btn.ghost:hover{background:var(--soft);border-color:var(--cyan)}
body.ms-app .btn.ghost.danger{color:var(--sev3ink);border-color:var(--sev3ln)}
body.ms-app .btn.danger-solid{background:var(--sev3);color:#fff}
body.ms-app #analyzeBtn{background:var(--navy);color:#FBF6EE;border:1px solid rgba(255,255,255,.08);
  box-shadow:0 3px 8px rgba(58,42,32,.18),0 18px 36px -14px rgba(58,42,32,.55)}

/* Karten */
body.ms-app .card{border-color:var(--line-soft);box-shadow:var(--e2)}
body.ms-app .card h2 .step{border-radius:50%;background:var(--soft-2);color:var(--cyan-d);box-shadow:none;
  font-family:var(--font-head);font-weight:700}
body.ms-app .howto-step{box-shadow:var(--e1);border-radius:20px}
body.ms-app .howto-ic{background:var(--soft-2);color:var(--cyan-d);box-shadow:none;border-radius:50%}
body.ms-app .personbar{border-color:var(--line-soft);border-radius:18px;box-shadow:var(--e1)}

/* Scan-Bereich: Hero-Fläche mit Sucher-Ecken in Akzentfarbe */
body.ms-app .scanpad{border:0;border-radius:24px;background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M3 21V10Q3 3 10 3H21' fill='none' stroke='%23C2593A' stroke-width='3' stroke-linecap='round' stroke-opacity='.55'/%3E%3C/svg%3E") no-repeat left 8px top 8px,
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M3 3H14Q21 3 21 10V21' fill='none' stroke='%23C2593A' stroke-width='3' stroke-linecap='round' stroke-opacity='.55'/%3E%3C/svg%3E") no-repeat right 8px top 8px,
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M3 3V14Q3 21 10 21H21' fill='none' stroke='%23C2593A' stroke-width='3' stroke-linecap='round' stroke-opacity='.55'/%3E%3C/svg%3E") no-repeat left 8px bottom 8px,
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M21 3V14Q21 21 14 21H3' fill='none' stroke='%23C2593A' stroke-width='3' stroke-linecap='round' stroke-opacity='.55'/%3E%3C/svg%3E") no-repeat right 8px bottom 8px,
  linear-gradient(160deg,#F6DED2,#F1E6D6)}
body.ms-app .scanfx{background:radial-gradient(130% 100% at 50% 0%,#5A4030 0%,#3A2A20 60%,#2A1E17 100%);
  border-color:rgba(233,161,90,.22);color:#F6EBDD}
body.ms-app .scanfx-stage{background:radial-gradient(90% 80% at 50% 45%,rgba(233,138,102,.16),transparent 70%),#2E211A}
body.ms-app .scanfx-c{filter:drop-shadow(0 0 6px rgba(233,161,90,.5))}
body.ms-app .scanfx-laser{background:linear-gradient(90deg,transparent,#F2B27E 18%,#FFF1E2 50%,#F2B27E 82%,transparent);
  box-shadow:0 0 10px 2px rgba(233,138,102,.7),0 0 30px 8px rgba(233,138,102,.3)}
body.ms-app .scanfx-status{color:#F6DED2}

/* Kurzergebnis + Ergebnis-Karten: innenliegender Schweregrad-Streifen */
body.ms-app .ss-card{border-radius:22px;padding-left:21px;box-shadow:var(--e1)}
body.ms-app .ss-card::before{width:4px;left:8px;top:12px;bottom:12px;border-radius:4px}
body.ms-app .ss-found{background:var(--sev1bg);border-color:var(--sev1ln)}
body.ms-app .ss-pair{color:var(--petrol-d)}
body.ms-app .res{border-radius:22px;border-left-width:1px;padding-left:24px;box-shadow:var(--e1)}
body.ms-app .res::before{content:"";position:absolute;left:9px;top:14px;bottom:14px;width:4px;border-radius:4px;background:var(--muted)}
body.ms-app .res.sev1::before{background:var(--sev1)} body.ms-app .res.sev2::before{background:var(--sev2)}
body.ms-app .res.sev3::before{background:var(--sev3)} body.ms-app .res.sev4::before{background:var(--sev4)}
body.ms-app .res.sev1,body.ms-app .res.sev2,body.ms-app .res.sev3,body.ms-app .res.sev4,body.ms-app .res.sev0{border-color:var(--line-soft)}
body.ms-app .res .ttl{font-family:var(--font-head);font-weight:600;font-size:1.06rem}
body.ms-app .stat{border-radius:18px;box-shadow:var(--e1)}

/* Eingaben, Chips */
body.ms-app .chip{background:var(--card);color:var(--ink);border-color:var(--line);box-shadow:0 2px 0 var(--line-soft)}
body.ms-app .chip .x{background:var(--soft-2);color:var(--cyan-d)}
body.ms-app .timechip{background:var(--card);color:var(--ink)}

/* Vertrauensleiste, Toast, Dialog */
body.ms-app .trustbar{background:#E7EEE2;color:#3A2A20;border:1px solid #CDDBC5;box-shadow:none}
body.ms-app .trustbar-ic{background:#FFFDF9;color:#5E7A55;border-color:#CDDBC5}
body.ms-app .trustbar-tx b{color:#3A2A20}
body.ms-app .trustbar-tx span{color:#5C6E55}
body.ms-app .toast{background:#3A2A20;color:#FBF6EE;border-color:rgba(233,161,90,.35)}
body.ms-app .toast-act{border-color:rgba(242,178,126,.6);color:#F6C9A4}
body.ms-app .msdlg::backdrop{background:rgba(42,30,23,.5)}

/* ---------- DUNKEL: Nacht-Präzision ---------- */
@media (prefers-color-scheme: dark){
  :where(:root:not([data-theme="light"])) body.ms-app{
    --font-head:"Space Grotesk",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
    --font-body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
    --petrol:#3DF2B5; --petrol-d:#BDF5E1; --petrol-x:#05080B; --petrol-l:#3DF2B5;
    --navy:#0B0F14; --navy-2:#151B23; --mint:#3DF2B5;
    --cyan:#3DF2B5; --cyan-d:#3DF2B5;
    --amber:#FFB547; --amber-ink:#FFC977; --amber-soft:#2A2113; --gold:#3DF2B5;
    --bg:#0B0F14; --card:#151B23;
    --ink:#E8EEF4; --muted:#8A97A6; --line:#232B36; --line-soft:#1C232D;
    --soft:#11171F; --soft-2:#10261F;
    --sev1:#4ADE80; --sev1ink:#8FEBB0; --sev1bg:#10241A; --sev1ln:#1F4D33;
    --sev2:#FFB547; --sev2ink:#FFC977; --sev2bg:#2A2113; --sev2ln:#5A4420;
    --sev3:#FF5A6E; --sev3ink:#FF8796; --sev3bg:#2A1419; --sev3ln:#5A2531;
    --sev4:#FF3B55; --sev4ink:#FF7A8C; --sev4bg:#321018; --sev4ln:#6A1F2C;
    --warn:#FFB547; --warnbg:#1C1810; --warnln:#4A3A1C;
    --e1:0 1px 2px rgba(0,0,0,.4),0 6px 16px -8px rgba(0,0,0,.6);
    --e2:0 1px 2px rgba(0,0,0,.35),0 14px 32px -14px rgba(0,0,0,.7);
    --e3:0 4px 10px rgba(0,0,0,.45),0 22px 48px -14px rgba(0,0,0,.75);
    --ring:0 0 0 4px rgba(61,242,181,.22);
    --grad-brand:linear-gradient(135deg,#5CF7C4,#3DF2B5 55%,#22D99C);
    --grad-accent:linear-gradient(135deg,#5CF7C4,#3DF2B5 55%,#22D99C);
    --topbar:rgba(11,15,20,.72);
    --cta-ink:#04130D; --cta-glow:0 0 28px -6px rgba(61,242,181,.7);
    --ico-search:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7' fill='none' stroke='%238A97A6' stroke-width='2'/%3E%3Cpath d='M16.5 16.5 21 21' stroke='%238A97A6' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
    background:radial-gradient(120% 50% at 80% 0%,rgba(61,242,181,.14),transparent 60%),#0B0F14;
    background-color:#0B0F14;color-scheme:dark}
  :where(:root:not([data-theme="light"])) body.ms-app ::selection{background:rgba(61,242,181,.28)}
  :where(:root:not([data-theme="light"])) body.ms-app :focus-visible{outline-color:rgba(61,242,181,.7)}
  :where(:root:not([data-theme="light"])) body.ms-app .card h2{letter-spacing:-.01em}
  :where(:root:not([data-theme="light"])) body.ms-app .card h2 .step{background:rgba(61,242,181,.1);color:#3DF2B5;border:1px solid rgba(61,242,181,.3)}

  :where(:root:not([data-theme="light"])) body.ms-app .topbar{box-shadow:inset 0 -1px 0 rgba(255,255,255,.07)}
  :where(:root:not([data-theme="light"])) body.ms-app .brand .logo{filter:drop-shadow(0 0 10px rgba(61,242,181,.35))}
  :where(:root:not([data-theme="light"])) body.ms-app .brand .logo rect:first-child,:where(:root:not([data-theme="light"])) body.ms-app .brand .logo rect:last-child{fill:#10261F}
  :where(:root:not([data-theme="light"])) body.ms-app .brand .logo g{stroke:#3DF2B5}
  :where(:root:not([data-theme="light"])) body.ms-app .brand .trust{background:rgba(61,242,181,.08);border-color:rgba(61,242,181,.3);color:#3DF2B5}
  :where(:root:not([data-theme="light"])) body.ms-app .brand .trust i{background:#3DF2B5;box-shadow:0 0 8px rgba(61,242,181,.9)}
  :where(:root:not([data-theme="light"])) body.ms-app .fs-switch{background:#151B23;border-color:#232B36}
  :where(:root:not([data-theme="light"])) body.ms-app .fs-switch button[aria-pressed="true"],:where(:root:not([data-theme="light"])) body.ms-app .fs-switch button[aria-pressed="true"]:hover{background:#3DF2B5;color:#04130D}

  :where(:root:not([data-theme="light"])) body.ms-app .btn,:where(:root:not([data-theme="light"])) body.ms-app .btn.cyan{box-shadow:var(--cta-glow)}
  :where(:root:not([data-theme="light"])) body.ms-app .btn.ghost{background:#151B23;color:var(--ink);border:1px solid #232B36;box-shadow:none}
  :where(:root:not([data-theme="light"])) body.ms-app .btn.ghost:hover{background:#1A222C;border-color:rgba(61,242,181,.5)}
  :where(:root:not([data-theme="light"])) body.ms-app .btn.danger-solid{color:#1A0509}
  :where(:root:not([data-theme="light"])) body.ms-app #analyzeBtn{background:#E8EEF4;color:#0B0F14;border:0;
    box-shadow:0 0 0 1px rgba(255,255,255,.06),0 18px 40px -12px rgba(0,0,0,.8)}

  :where(:root:not([data-theme="light"])) body.ms-app .card{background:#151B23;border-color:#232B36}
  :where(:root:not([data-theme="light"])) body.ms-app .howto-step{background:#151B23;border-color:#232B36}
  :where(:root:not([data-theme="light"])) body.ms-app .howto-ic{background:rgba(61,242,181,.1);color:#3DF2B5;border:1px solid rgba(61,242,181,.25)}
  :where(:root:not([data-theme="light"])) body.ms-app .personbar{background:#151B23;border-color:#232B36}

  :where(:root:not([data-theme="light"])) body.ms-app .scanpad{border:1px solid rgba(255,255,255,.09);background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M3 21V10Q3 3 10 3H21' fill='none' stroke='%233DF2B5' stroke-width='3' stroke-linecap='round' stroke-opacity='.7'/%3E%3C/svg%3E") no-repeat left 8px top 8px,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M3 3H14Q21 3 21 10V21' fill='none' stroke='%233DF2B5' stroke-width='3' stroke-linecap='round' stroke-opacity='.7'/%3E%3C/svg%3E") no-repeat right 8px top 8px,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M3 3V14Q3 21 10 21H21' fill='none' stroke='%233DF2B5' stroke-width='3' stroke-linecap='round' stroke-opacity='.7'/%3E%3C/svg%3E") no-repeat left 8px bottom 8px,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M21 3V14Q21 21 14 21H3' fill='none' stroke='%233DF2B5' stroke-width='3' stroke-linecap='round' stroke-opacity='.7'/%3E%3C/svg%3E") no-repeat right 8px bottom 8px,
    linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
    box-shadow:inset 0 1px 0 rgba(61,242,181,.25)}
  :where(:root:not([data-theme="light"])) body.ms-app .scanfx{background:radial-gradient(130% 100% at 50% 0%,#12201C 0%,#0B0F14 70%);
    border-color:rgba(61,242,181,.2);color:#E8EEF4}
  :where(:root:not([data-theme="light"])) body.ms-app .scanfx-stage{background:radial-gradient(90% 80% at 50% 45%,rgba(61,242,181,.12),transparent 70%),#080B0F}
  :where(:root:not([data-theme="light"])) body.ms-app .scanfx-c{filter:drop-shadow(0 0 6px rgba(61,242,181,.6))}
  :where(:root:not([data-theme="light"])) body.ms-app .scanfx-laser{background:linear-gradient(90deg,transparent,#3DF2B5 18%,#E6FFF6 50%,#3DF2B5 82%,transparent);
    box-shadow:0 0 10px 2px rgba(61,242,181,.75),0 0 30px 8px rgba(61,242,181,.3)}
  :where(:root:not([data-theme="light"])) body.ms-app .scanfx-status{color:#BDF5E1}

  :where(:root:not([data-theme="light"])) body.ms-app .ss-card{background:#151B23;border-color:#232B36;box-shadow:none}
  :where(:root:not([data-theme="light"])) body.ms-app .ss-card::before{width:3px}
  :where(:root:not([data-theme="light"])) body.ms-app .ss-it.sev1::before{box-shadow:0 0 10px var(--sev1)} :where(:root:not([data-theme="light"])) body.ms-app .ss-it.sev2::before{box-shadow:0 0 10px var(--sev2)}
  :where(:root:not([data-theme="light"])) body.ms-app .ss-it.sev3::before{box-shadow:0 0 10px var(--sev3)} :where(:root:not([data-theme="light"])) body.ms-app .ss-it.sev4::before{box-shadow:0 0 10px var(--sev4)}
  :where(:root:not([data-theme="light"])) body.ms-app .ss-found{background:rgba(61,242,181,.07);border-color:rgba(61,242,181,.3)}
  :where(:root:not([data-theme="light"])) body.ms-app .ss-found::before{background:#3DF2B5;box-shadow:0 0 10px #3DF2B5}
  :where(:root:not([data-theme="light"])) body.ms-app .ss-found .ss-k{color:#3DF2B5}
  :where(:root:not([data-theme="light"])) body.ms-app .ss-it.sev3 .ss-pill,:where(:root:not([data-theme="light"])) body.ms-app .ss-it.sev4 .ss-pill{background:rgba(255,90,110,.14);color:#FF8796;border-color:rgba(255,90,110,.3)}
  :where(:root:not([data-theme="light"])) body.ms-app .ss-it.sev2 .ss-pill{background:rgba(255,181,71,.14);color:#FFC977;border-color:rgba(255,181,71,.3)}
  :where(:root:not([data-theme="light"])) body.ms-app .res,:where(:root:not([data-theme="light"])) body.ms-app .res.sev1,:where(:root:not([data-theme="light"])) body.ms-app .res.sev2,:where(:root:not([data-theme="light"])) body.ms-app .res.sev3,:where(:root:not([data-theme="light"])) body.ms-app .res.sev4,:where(:root:not([data-theme="light"])) body.ms-app .res.sev0{background:#151B23;border-color:#232B36;box-shadow:none}
  :where(:root:not([data-theme="light"])) body.ms-app .res::before{width:3px}
  :where(:root:not([data-theme="light"])) body.ms-app .res.sev1::before{box-shadow:0 0 10px var(--sev1)} :where(:root:not([data-theme="light"])) body.ms-app .res.sev2::before{box-shadow:0 0 10px var(--sev2)}
  :where(:root:not([data-theme="light"])) body.ms-app .res.sev3::before{box-shadow:0 0 10px var(--sev3)} :where(:root:not([data-theme="light"])) body.ms-app .res.sev4::before{box-shadow:0 0 10px var(--sev4)}
  :where(:root:not([data-theme="light"])) body.ms-app .res .pair,:where(:root:not([data-theme="light"])) body.ms-app .res .rec b,:where(:root:not([data-theme="light"])) body.ms-app .res .medtag{color:var(--petrol-d)}
  :where(:root:not([data-theme="light"])) body.ms-app .stat{background:#151B23;border-color:#232B36;box-shadow:none}
  :where(:root:not([data-theme="light"])) body.ms-app .stat b{color:#3DF2B5}

  :where(:root:not([data-theme="light"])) body.ms-app .chip{background:#151B23;color:var(--ink);border-color:#232B36;box-shadow:none}
  :where(:root:not([data-theme="light"])) body.ms-app .chip .x{background:rgba(61,242,181,.1);color:#3DF2B5}
  :where(:root:not([data-theme="light"])) body.ms-app .timechip{background:#151B23;color:var(--ink)}
  :where(:root:not([data-theme="light"])) body.ms-app .toggle[aria-pressed="true"] .dot::after{border-color:#04130D}

  :where(:root:not([data-theme="light"])) body.ms-app .trustbar{background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));color:var(--ink);border:1px solid rgba(255,255,255,.09)}
  :where(:root:not([data-theme="light"])) body.ms-app .trustbar-ic{background:rgba(61,242,181,.08);color:#3DF2B5;border-color:rgba(61,242,181,.3)}
  :where(:root:not([data-theme="light"])) body.ms-app .trustbar-tx b{color:#E8EEF4}
  :where(:root:not([data-theme="light"])) body.ms-app .trustbar-tx span{color:#8A97A6}
  :where(:root:not([data-theme="light"])) body.ms-app .toast{background:#151B23;color:#E8EEF4;border-color:rgba(61,242,181,.35)}
  :where(:root:not([data-theme="light"])) body.ms-app .toast-act{border-color:rgba(61,242,181,.6);color:#3DF2B5}
  :where(:root:not([data-theme="light"])) body.ms-app .msdlg::backdrop{background:rgba(0,0,0,.65)}
}

  :where(:root[data-theme="dark"]) body.ms-app{
    --font-head:"Space Grotesk",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
    --font-body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
    --petrol:#3DF2B5; --petrol-d:#BDF5E1; --petrol-x:#05080B; --petrol-l:#3DF2B5;
    --navy:#0B0F14; --navy-2:#151B23; --mint:#3DF2B5;
    --cyan:#3DF2B5; --cyan-d:#3DF2B5;
    --amber:#FFB547; --amber-ink:#FFC977; --amber-soft:#2A2113; --gold:#3DF2B5;
    --bg:#0B0F14; --card:#151B23;
    --ink:#E8EEF4; --muted:#8A97A6; --line:#232B36; --line-soft:#1C232D;
    --soft:#11171F; --soft-2:#10261F;
    --sev1:#4ADE80; --sev1ink:#8FEBB0; --sev1bg:#10241A; --sev1ln:#1F4D33;
    --sev2:#FFB547; --sev2ink:#FFC977; --sev2bg:#2A2113; --sev2ln:#5A4420;
    --sev3:#FF5A6E; --sev3ink:#FF8796; --sev3bg:#2A1419; --sev3ln:#5A2531;
    --sev4:#FF3B55; --sev4ink:#FF7A8C; --sev4bg:#321018; --sev4ln:#6A1F2C;
    --warn:#FFB547; --warnbg:#1C1810; --warnln:#4A3A1C;
    --e1:0 1px 2px rgba(0,0,0,.4),0 6px 16px -8px rgba(0,0,0,.6);
    --e2:0 1px 2px rgba(0,0,0,.35),0 14px 32px -14px rgba(0,0,0,.7);
    --e3:0 4px 10px rgba(0,0,0,.45),0 22px 48px -14px rgba(0,0,0,.75);
    --ring:0 0 0 4px rgba(61,242,181,.22);
    --grad-brand:linear-gradient(135deg,#5CF7C4,#3DF2B5 55%,#22D99C);
    --grad-accent:linear-gradient(135deg,#5CF7C4,#3DF2B5 55%,#22D99C);
    --topbar:rgba(11,15,20,.72);
    --cta-ink:#04130D; --cta-glow:0 0 28px -6px rgba(61,242,181,.7);
    --ico-search:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7' fill='none' stroke='%238A97A6' stroke-width='2'/%3E%3Cpath d='M16.5 16.5 21 21' stroke='%238A97A6' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
    background:radial-gradient(120% 50% at 80% 0%,rgba(61,242,181,.14),transparent 60%),#0B0F14;
    background-color:#0B0F14;color-scheme:dark}
  :where(:root[data-theme="dark"]) body.ms-app ::selection{background:rgba(61,242,181,.28)}
  :where(:root[data-theme="dark"]) body.ms-app :focus-visible{outline-color:rgba(61,242,181,.7)}
  :where(:root[data-theme="dark"]) body.ms-app .card h2{letter-spacing:-.01em}
  :where(:root[data-theme="dark"]) body.ms-app .card h2 .step{background:rgba(61,242,181,.1);color:#3DF2B5;border:1px solid rgba(61,242,181,.3)}

  :where(:root[data-theme="dark"]) body.ms-app .topbar{box-shadow:inset 0 -1px 0 rgba(255,255,255,.07)}
  :where(:root[data-theme="dark"]) body.ms-app .brand .logo{filter:drop-shadow(0 0 10px rgba(61,242,181,.35))}
  :where(:root[data-theme="dark"]) body.ms-app .brand .logo rect:first-child,:where(:root[data-theme="dark"]) body.ms-app .brand .logo rect:last-child{fill:#10261F}
  :where(:root[data-theme="dark"]) body.ms-app .brand .logo g{stroke:#3DF2B5}
  :where(:root[data-theme="dark"]) body.ms-app .brand .trust{background:rgba(61,242,181,.08);border-color:rgba(61,242,181,.3);color:#3DF2B5}
  :where(:root[data-theme="dark"]) body.ms-app .brand .trust i{background:#3DF2B5;box-shadow:0 0 8px rgba(61,242,181,.9)}
  :where(:root[data-theme="dark"]) body.ms-app .fs-switch{background:#151B23;border-color:#232B36}
  :where(:root[data-theme="dark"]) body.ms-app .fs-switch button[aria-pressed="true"],:where(:root[data-theme="dark"]) body.ms-app .fs-switch button[aria-pressed="true"]:hover{background:#3DF2B5;color:#04130D}

  :where(:root[data-theme="dark"]) body.ms-app .btn,:where(:root[data-theme="dark"]) body.ms-app .btn.cyan{box-shadow:var(--cta-glow)}
  :where(:root[data-theme="dark"]) body.ms-app .btn.ghost{background:#151B23;color:var(--ink);border:1px solid #232B36;box-shadow:none}
  :where(:root[data-theme="dark"]) body.ms-app .btn.ghost:hover{background:#1A222C;border-color:rgba(61,242,181,.5)}
  :where(:root[data-theme="dark"]) body.ms-app .btn.danger-solid{color:#1A0509}
  :where(:root[data-theme="dark"]) body.ms-app #analyzeBtn{background:#E8EEF4;color:#0B0F14;border:0;
    box-shadow:0 0 0 1px rgba(255,255,255,.06),0 18px 40px -12px rgba(0,0,0,.8)}

  :where(:root[data-theme="dark"]) body.ms-app .card{background:#151B23;border-color:#232B36}
  :where(:root[data-theme="dark"]) body.ms-app .howto-step{background:#151B23;border-color:#232B36}
  :where(:root[data-theme="dark"]) body.ms-app .howto-ic{background:rgba(61,242,181,.1);color:#3DF2B5;border:1px solid rgba(61,242,181,.25)}
  :where(:root[data-theme="dark"]) body.ms-app .personbar{background:#151B23;border-color:#232B36}

  :where(:root[data-theme="dark"]) body.ms-app .scanpad{border:1px solid rgba(255,255,255,.09);background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M3 21V10Q3 3 10 3H21' fill='none' stroke='%233DF2B5' stroke-width='3' stroke-linecap='round' stroke-opacity='.7'/%3E%3C/svg%3E") no-repeat left 8px top 8px,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M3 3H14Q21 3 21 10V21' fill='none' stroke='%233DF2B5' stroke-width='3' stroke-linecap='round' stroke-opacity='.7'/%3E%3C/svg%3E") no-repeat right 8px top 8px,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M3 3V14Q3 21 10 21H21' fill='none' stroke='%233DF2B5' stroke-width='3' stroke-linecap='round' stroke-opacity='.7'/%3E%3C/svg%3E") no-repeat left 8px bottom 8px,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M21 3V14Q21 21 14 21H3' fill='none' stroke='%233DF2B5' stroke-width='3' stroke-linecap='round' stroke-opacity='.7'/%3E%3C/svg%3E") no-repeat right 8px bottom 8px,
    linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
    box-shadow:inset 0 1px 0 rgba(61,242,181,.25)}
  :where(:root[data-theme="dark"]) body.ms-app .scanfx{background:radial-gradient(130% 100% at 50% 0%,#12201C 0%,#0B0F14 70%);
    border-color:rgba(61,242,181,.2);color:#E8EEF4}
  :where(:root[data-theme="dark"]) body.ms-app .scanfx-stage{background:radial-gradient(90% 80% at 50% 45%,rgba(61,242,181,.12),transparent 70%),#080B0F}
  :where(:root[data-theme="dark"]) body.ms-app .scanfx-c{filter:drop-shadow(0 0 6px rgba(61,242,181,.6))}
  :where(:root[data-theme="dark"]) body.ms-app .scanfx-laser{background:linear-gradient(90deg,transparent,#3DF2B5 18%,#E6FFF6 50%,#3DF2B5 82%,transparent);
    box-shadow:0 0 10px 2px rgba(61,242,181,.75),0 0 30px 8px rgba(61,242,181,.3)}
  :where(:root[data-theme="dark"]) body.ms-app .scanfx-status{color:#BDF5E1}

  :where(:root[data-theme="dark"]) body.ms-app .ss-card{background:#151B23;border-color:#232B36;box-shadow:none}
  :where(:root[data-theme="dark"]) body.ms-app .ss-card::before{width:3px}
  :where(:root[data-theme="dark"]) body.ms-app .ss-it.sev1::before{box-shadow:0 0 10px var(--sev1)} :where(:root[data-theme="dark"]) body.ms-app .ss-it.sev2::before{box-shadow:0 0 10px var(--sev2)}
  :where(:root[data-theme="dark"]) body.ms-app .ss-it.sev3::before{box-shadow:0 0 10px var(--sev3)} :where(:root[data-theme="dark"]) body.ms-app .ss-it.sev4::before{box-shadow:0 0 10px var(--sev4)}
  :where(:root[data-theme="dark"]) body.ms-app .ss-found{background:rgba(61,242,181,.07);border-color:rgba(61,242,181,.3)}
  :where(:root[data-theme="dark"]) body.ms-app .ss-found::before{background:#3DF2B5;box-shadow:0 0 10px #3DF2B5}
  :where(:root[data-theme="dark"]) body.ms-app .ss-found .ss-k{color:#3DF2B5}
  :where(:root[data-theme="dark"]) body.ms-app .ss-it.sev3 .ss-pill,:where(:root[data-theme="dark"]) body.ms-app .ss-it.sev4 .ss-pill{background:rgba(255,90,110,.14);color:#FF8796;border-color:rgba(255,90,110,.3)}
  :where(:root[data-theme="dark"]) body.ms-app .ss-it.sev2 .ss-pill{background:rgba(255,181,71,.14);color:#FFC977;border-color:rgba(255,181,71,.3)}
  :where(:root[data-theme="dark"]) body.ms-app .res,:where(:root[data-theme="dark"]) body.ms-app .res.sev1,:where(:root[data-theme="dark"]) body.ms-app .res.sev2,:where(:root[data-theme="dark"]) body.ms-app .res.sev3,:where(:root[data-theme="dark"]) body.ms-app .res.sev4,:where(:root[data-theme="dark"]) body.ms-app .res.sev0{background:#151B23;border-color:#232B36;box-shadow:none}
  :where(:root[data-theme="dark"]) body.ms-app .res::before{width:3px}
  :where(:root[data-theme="dark"]) body.ms-app .res.sev1::before{box-shadow:0 0 10px var(--sev1)} :where(:root[data-theme="dark"]) body.ms-app .res.sev2::before{box-shadow:0 0 10px var(--sev2)}
  :where(:root[data-theme="dark"]) body.ms-app .res.sev3::before{box-shadow:0 0 10px var(--sev3)} :where(:root[data-theme="dark"]) body.ms-app .res.sev4::before{box-shadow:0 0 10px var(--sev4)}
  :where(:root[data-theme="dark"]) body.ms-app .res .pair,:where(:root[data-theme="dark"]) body.ms-app .res .rec b,:where(:root[data-theme="dark"]) body.ms-app .res .medtag{color:var(--petrol-d)}
  :where(:root[data-theme="dark"]) body.ms-app .stat{background:#151B23;border-color:#232B36;box-shadow:none}
  :where(:root[data-theme="dark"]) body.ms-app .stat b{color:#3DF2B5}

  :where(:root[data-theme="dark"]) body.ms-app .chip{background:#151B23;color:var(--ink);border-color:#232B36;box-shadow:none}
  :where(:root[data-theme="dark"]) body.ms-app .chip .x{background:rgba(61,242,181,.1);color:#3DF2B5}
  :where(:root[data-theme="dark"]) body.ms-app .timechip{background:#151B23;color:var(--ink)}
  :where(:root[data-theme="dark"]) body.ms-app .toggle[aria-pressed="true"] .dot::after{border-color:#04130D}

  :where(:root[data-theme="dark"]) body.ms-app .trustbar{background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));color:var(--ink);border:1px solid rgba(255,255,255,.09)}
  :where(:root[data-theme="dark"]) body.ms-app .trustbar-ic{background:rgba(61,242,181,.08);color:#3DF2B5;border-color:rgba(61,242,181,.3)}
  :where(:root[data-theme="dark"]) body.ms-app .trustbar-tx b{color:#E8EEF4}
  :where(:root[data-theme="dark"]) body.ms-app .trustbar-tx span{color:#8A97A6}
  :where(:root[data-theme="dark"]) body.ms-app .toast{background:#151B23;color:#E8EEF4;border-color:rgba(61,242,181,.35)}
  :where(:root[data-theme="dark"]) body.ms-app .toast-act{border-color:rgba(61,242,181,.6);color:#3DF2B5}
  :where(:root[data-theme="dark"]) body.ms-app .msdlg::backdrop{background:rgba(0,0,0,.65)}

/* v4: inaktiver Prüfen-Knopf deckend (kein Durchscheinen des Suchfelds) */
body.ms-app #analyzeBtn.idle{opacity:1;filter:none;background:#8A7466;color:#FBF6EE}
@media (prefers-color-scheme: dark){:where(:root:not([data-theme="light"])) body.ms-app #analyzeBtn.idle{background:#2A333F;color:#C9D3DE}}
:where(:root[data-theme="dark"]) body.ms-app #analyzeBtn.idle{background:#2A333F;color:#C9D3DE}

/* Tag/Nacht-Umschalter oben rechts (ersetzt den früheren „Start“-Link) */
.topbar .theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;
  padding:0;border-radius:999px;cursor:pointer;font:inherit;background:transparent;flex:0 0 auto}
.topbar .theme-toggle svg{width:21px;height:21px;display:block}
.topbar .theme-toggle .ic-sun{display:none}
@media (prefers-color-scheme:dark){
  :where(:root:not([data-theme="light"])) .topbar .theme-toggle .ic-sun{display:block}
  :where(:root:not([data-theme="light"])) .topbar .theme-toggle .ic-moon{display:none}
}
:where(:root[data-theme="dark"]) .topbar .theme-toggle .ic-sun{display:block}
:where(:root[data-theme="dark"]) .topbar .theme-toggle .ic-moon{display:none}
.topbar .theme-toggle:focus-visible{outline:3px solid var(--cyan);outline-offset:2px}
/* Logo nur noch Anzeige, kein Link */
.topbar .brand{cursor:default;user-select:none}
/* Sehr kleine Geräte (≤380px): Kopfleiste kompakter → kein Horizontal-Scroll
   bei 320px CSS-Pixeln (WCAG 1.4.10 Reflow). Steht bewusst NACH der Grundregel. */
@media (max-width:380px){
  .topbar .wrap{gap:6px}
  .brand .trust{padding:2px 7px 2px 5px;letter-spacing:.06em}
  .brand{gap:6px}
  .brand .logo{width:30px;height:30px}
  .fs-switch button{padding:6px 5px}
  .topbar .theme-toggle{width:36px;height:36px}
  .topbar .theme-toggle svg{width:18px;height:18px}
}
@media (max-width:340px){
  .brand .trust i{display:none}
  .fs-switch{gap:0}
}

/* ---- Meine Medikamente (Liste + Bearbeiten-Dialog) ---- */
.meds-hd{display:flex;gap:10px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap}
.meds-hd h2{margin-bottom:12px}
.meds-bt{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:14px}
#medList{display:flex;flex-direction:column;gap:10px}
.mmed{border:1px solid var(--line-soft);border-radius:14px;padding:12px 14px;background:var(--soft);
  display:flex;gap:10px;align-items:flex-start;flex-wrap:wrap}
.mmed-nm{flex:1;min-width:180px;line-height:1.45}
.mmed-line{color:var(--ink);font-variant-numeric:tabular-nums;margin-top:2px}
.mmed-note{white-space:pre-line;margin-top:2px}
.mmed.mm-paused,.mmed.mm-ended{opacity:.72}
.mbadge{display:inline-block;margin-left:4px;padding:1px 9px;border-radius:999px;font-size:.72rem;
  font-weight:750;vertical-align:middle;background:var(--soft-2);color:var(--cyan-d)}
.mbadge.mb-paused,.mbadge.mb-free{background:var(--warnbg);color:var(--warn)}
.mbadge.mb-ended{background:var(--soft-2);color:var(--muted)}
.mbadge.mb-upd{background:var(--warnbg);color:var(--warn)}
.mmed-old{margin-top:2px}
.mmed-old summary{cursor:pointer;color:var(--muted);padding:4px 0}
.mmed-old .mmed{margin-top:8px}
.meds-note{margin:12px 0 0}
/* Statuszeile: Datenbank-Treffer zur aktiven Liste */
.mww{display:flex;gap:12px;align-items:center;flex-wrap:wrap;border:1px solid var(--line);
  border-radius:14px;padding:11px 14px;margin:0 0 12px;background:var(--soft)}
.mww[hidden]{display:none}
.mww-tx{flex:1;min-width:200px;line-height:1.4}
.mww-tx b{display:block}
.mww-tx span{display:block;margin-top:2px}
.mww-tx .mww-ov{margin-top:6px;font-weight:600;color:var(--warn,#B45309)}
.mww.sev1{background:var(--sev1bg);border-color:var(--sev1ln)} .mww.sev1 b{color:var(--sev1ink)}
.mww.sev2{background:var(--sev2bg);border-color:var(--sev2ln)} .mww.sev2 b{color:var(--sev2ink)}
.mww.sev3{background:var(--sev3bg);border-color:var(--sev3ln)} .mww.sev3 b{color:var(--sev3ink)}
.mww.sev4{background:var(--sev4bg);border-color:var(--sev4ln)} .mww.sev4 b{color:var(--sev4ink)}
.msdlg.msdlg-wide{width:min(94vw,540px);max-height:92vh}
.mform .mf{display:block;margin:0}
.mform .mf>span,.mform .mf>label{display:block;font-size:.84rem;font-weight:650;color:var(--muted)}
.mform .msdlg-in{margin:4px 0 12px}
.mform textarea.msdlg-in{resize:vertical;min-height:52px}
.mf-name{position:relative}
.mf-name .mf-ac{top:72px}
.mf-ids{display:block;margin:-8px 0 12px;min-height:1em}
.mf-ids.ok{color:var(--cyan-d);font-weight:600}
.mf-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
.mf-dose{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.mf-dose label{display:block;text-align:center}
.mf-dose .msdlg-in{text-align:center;padding:10px 6px}
.mf-chk{display:flex;gap:8px;align-items:center;margin:-4px 0 12px;font-weight:600}
.mf-chk input{width:18px;height:18px;accent-color:var(--cyan)}
.mf-hint{margin:0 0 12px}
/* Vorrat & Reichweite */
.mf-grid3{grid-template-columns:1fr 1fr 1fr;margin-top:4px}
.mform .mf>span.mf-sh{font-weight:400;font-size:.8rem;margin:-6px 0 12px;line-height:1.4}
.mstock{margin-top:4px;color:var(--muted)}
.mstock.low{color:var(--sev3ink)}
.mbadge.mb-low{margin-left:0;margin-right:4px;background:var(--sev3bg);color:var(--sev3ink);border:1px solid var(--sev3ln)}
@media (max-width:420px){.mf-grid,.mf-grid3{grid-template-columns:1fr}}
/* Einnahme abhaken (Phase 3) */
.itk-nav{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.itk-day{font-weight:700;min-width:9.5em;text-align:center;font-variant-numeric:tabular-nums}
#itkList{display:flex;flex-direction:column;gap:14px}
.itk-slot{font-size:.86rem;font-weight:750;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin:0 0 6px}
.itk-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;border:1px solid var(--line-soft);
  border-radius:14px;padding:10px 12px;background:var(--soft);margin-top:6px}
.itk-nm{flex:1;min-width:160px;line-height:1.4}
.itk-nm span{display:block}
.itk-bt{display:flex;gap:6px;flex-wrap:wrap}
body.ms-app .btn.ghost.itk-b{box-shadow:none}
body.ms-app .btn.itk-b.itk-taken[aria-pressed="true"]{background:var(--grad-brand);border-color:transparent;color:var(--cta-ink)}
body.ms-app .btn.itk-b.itk-skipped[aria-pressed="true"]{background:var(--soft-2);border-color:var(--muted);color:var(--ink)}
.itk-b[aria-pressed="true"]::before{content:"✓ "}
.itk-empty{margin:0}
.mhist{display:flex;gap:2px;margin-top:6px;max-width:330px}
.mhist i{flex:1;height:10px;border-radius:2px;background:var(--line-soft)}
.mhist i.tk{background:var(--cyan)}
.mhist i.sk{background:transparent;border:1px solid var(--muted)}
.mhist i.mx{background:linear-gradient(90deg,var(--cyan) 50%,transparent 50%);border:1px solid var(--cyan)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* Übernahme aus dem Medikationsplan (BMP) */
.bmp-list{display:flex;flex-direction:column;gap:6px;max-height:52vh;overflow:auto;margin:10px 0}
.bmp-row{display:flex;gap:10px;align-items:flex-start;padding:9px 10px;border:1px solid var(--line);border-radius:10px;background:var(--soft-2);cursor:pointer}
.bmp-row input{width:18px;height:18px;margin-top:2px;flex:none;accent-color:var(--cyan)}
.bmp-row>span{display:flex;flex-direction:column;gap:1px;min-width:0;overflow-wrap:anywhere}
.bmp-row>span>b{display:inline}

/* ==========================================================================
   v5 Bruecke (26.10.2026): ruhige Petrol-Flaechen, Atkinson Hyperlegible,
   Schweregrad-Leiter (Balken + Farbe + Wort), Bruecke zwischen den Namen.
   Steht am Dateiende und nutzt nur Tokens, ueberstimmt v4 hell und dunkel.
   ========================================================================== */
body.ms-app{
  --font-head:"Atkinson Hyperlegible Next",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --font-body:"Atkinson Hyperlegible Next",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --font-mono:"Atkinson Hyperlegible Mono",ui-monospace,Consolas,monospace;
  --petrol:#0B5F63; --petrol-d:#0B5F63; --petrol-x:#0F2B30; --petrol-l:#0E7C73;
  --navy:#0F2B30; --navy-2:#173A40; --mint:#0E7C73;
  --cyan:#0E7C73; --cyan-d:#0B5F63;
  --amber:#E0A423; --amber-ink:#7A5200; --amber-soft:#FBF0D6; --gold:#E0A423; --signal:#E0A423;
  --bg:#F3F6F5; --card:#FFFFFF;
  --ink:#0F2B30; --muted:#4E646A; --line:#D5E0DF; --line-soft:#E3EBEA;
  --soft:#EAF1F0; --soft-2:#DDEBE9;
  --sev1:#3E6F8C; --sev1ink:#2F5A73; --sev1bg:#E7EFF4; --sev1ln:#C6D8E3;
  --sev2:#E08A0B; --sev2ink:#8A4F00; --sev2bg:#FCF1DF; --sev2ln:#F1D7AA;
  --sev3:#D9452A; --sev3ink:#A9301A; --sev3bg:#FBE9E4; --sev3ln:#F0C6BB;
  --sev4:#7A0E22; --sev4ink:#7A0E22; --sev4bg:#F5E0E4; --sev4ln:#E2B6BF;
  --warn:#8A5A00; --warnbg:#FBF0D6; --warnln:#EED9A8;
  --radius:16px; --radius-s:10px; --radius-l:28px;
  --e1:none; --e2:none; --e3:0 18px 40px -20px rgba(15,43,48,.35);
  --ring:0 0 0 3px var(--card),0 0 0 6px var(--cyan);
  --grad-brand:var(--cyan); --grad-accent:var(--cyan); --grad-gold:var(--signal);
  --topbar:rgba(243,246,245,.92);
  --cta-ink:#FFFFFF; --cta-glow:none;
  --idle-bg:#8DA2A5; --idle-ink:#FFFFFF;
  --scrim:rgba(10,23,27,.55);
  background:var(--bg);background-color:var(--bg);color:var(--ink);line-height:1.55}
@media (prefers-color-scheme: dark){
  :where(:root:not([data-theme="light"])) body.ms-app{color-scheme:dark;
    --petrol:#2FA39B; --petrol-d:#5CC4BA; --petrol-x:#E3EEEC; --petrol-l:#3CC2B4;
    --navy:#E3EEEC; --navy-2:#C9D9D7; --mint:#3CC2B4;
    --cyan:#3CC2B4; --cyan-d:#5CC4BA;
    --amber:#F0B445; --amber-ink:#F6CB7A; --amber-soft:rgba(240,180,69,.12); --gold:#F0B445; --signal:#F0B445;
    --bg:#0A171B; --card:#10242A;
    --ink:#E3EEEC; --muted:#9DB2B3; --line:#22393F; --line-soft:#1A2F35;
    --soft:#14292F; --soft-2:#183439;
    --sev1:#7FA9C6; --sev1ink:#A9C8DD; --sev1bg:rgba(127,169,198,.12); --sev1ln:rgba(127,169,198,.34);
    --sev2:#F0A23A; --sev2ink:#F6C27A; --sev2bg:rgba(240,162,58,.12); --sev2ln:rgba(240,162,58,.34);
    --sev3:#F2775C; --sev3ink:#F7A190; --sev3bg:rgba(242,119,92,.12); --sev3ln:rgba(242,119,92,.36);
    --sev4:#E5627A; --sev4ink:#F297A8; --sev4bg:rgba(229,98,122,.14); --sev4ln:rgba(229,98,122,.4);
    --warn:#F6CB7A; --warnbg:rgba(240,180,69,.1); --warnln:rgba(240,180,69,.3);
    --e3:0 18px 40px -20px rgba(0,0,0,.6);
    --topbar:rgba(10,23,27,.92); --cta-ink:#04201E;
    --idle-bg:#22393F; --idle-ink:#9DB2B3; --scrim:rgba(0,0,0,.6);
    background:var(--bg)}
}
:where(:root[data-theme="dark"]) body.ms-app{color-scheme:dark;
  --petrol:#2FA39B; --petrol-d:#5CC4BA; --petrol-x:#E3EEEC; --petrol-l:#3CC2B4;
  --navy:#E3EEEC; --navy-2:#C9D9D7; --mint:#3CC2B4;
  --cyan:#3CC2B4; --cyan-d:#5CC4BA;
  --amber:#F0B445; --amber-ink:#F6CB7A; --amber-soft:rgba(240,180,69,.12); --gold:#F0B445; --signal:#F0B445;
  --bg:#0A171B; --card:#10242A;
  --ink:#E3EEEC; --muted:#9DB2B3; --line:#22393F; --line-soft:#1A2F35;
  --soft:#14292F; --soft-2:#183439;
  --sev1:#7FA9C6; --sev1ink:#A9C8DD; --sev1bg:rgba(127,169,198,.12); --sev1ln:rgba(127,169,198,.34);
  --sev2:#F0A23A; --sev2ink:#F6C27A; --sev2bg:rgba(240,162,58,.12); --sev2ln:rgba(240,162,58,.34);
  --sev3:#F2775C; --sev3ink:#F7A190; --sev3bg:rgba(242,119,92,.12); --sev3ln:rgba(242,119,92,.36);
  --sev4:#E5627A; --sev4ink:#F297A8; --sev4bg:rgba(229,98,122,.14); --sev4ln:rgba(229,98,122,.4);
  --warn:#F6CB7A; --warnbg:rgba(240,180,69,.1); --warnln:rgba(240,180,69,.3);
  --e3:0 18px 40px -20px rgba(0,0,0,.6);
  --topbar:rgba(10,23,27,.92); --cta-ink:#04201E;
  --idle-bg:#22393F; --idle-ink:#9DB2B3; --scrim:rgba(0,0,0,.6);
  background:var(--bg)}

/* Schrift + Fokus */
body.ms-app ::selection{background:color-mix(in srgb,var(--cyan) 24%,transparent)}
body.ms-app :focus-visible{outline:3px solid var(--cyan);outline-offset:3px}
body.ms-app h1,body.ms-app h2,body.ms-app h3,body.ms-app .card h2,body.ms-app .brand b,
body.ms-app .stat b,body.ms-app .msdlg-t,body.ms-app .plans-empty .pe-lead,body.ms-app .subhead,body.ms-app .res .ttl{
  font-family:var(--font-head);letter-spacing:0}
body.ms-app .card h2{font-weight:700;font-size:1.19rem}
body.ms-app .pznrow input{font-family:var(--font-mono);letter-spacing:.04em}
body.ms-app .ss-k,body.ms-app .ss-pill,body.ms-app .sevmark-lb{text-transform:none;letter-spacing:0}

/* Kopfleiste */
body.ms-app .topbar{background:var(--topbar);color:var(--ink);box-shadow:0 1px 0 var(--line)}
body.ms-app .brand{color:var(--ink)}
body.ms-app .brand .logo{filter:none}
body.ms-app .brand .logo rect{fill:var(--petrol)}
body.ms-app .brand .logo g{stroke:var(--card)}
body.ms-app .brand .trust{background:var(--soft);border-color:var(--line);color:var(--petrol-d)}
body.ms-app .brand .trust i{background:var(--petrol);box-shadow:none}
body.ms-app .fs-switch{background:var(--card);border-color:var(--line);box-shadow:none}
body.ms-app .fs-switch button{color:var(--muted)}
body.ms-app .fs-switch button:hover{background:var(--soft)}
body.ms-app .fs-switch button[aria-pressed="true"],
body.ms-app .fs-switch button[aria-pressed="true"]:hover{background:var(--ink);color:var(--card)}

/* Knoepfe: einfarbig in Aktionsfarbe, 48 px */
body.ms-app .btn,body.ms-app .btn.cyan{background:var(--cyan);color:var(--cta-ink);border:0;box-shadow:none;
  border-radius:var(--radius-s);min-height:48px;font-weight:700;transition:background-color .18s,transform .15s}
body.ms-app .btn:hover,body.ms-app .btn.cyan:hover{background:color-mix(in srgb,var(--cyan) 86%,var(--ink))}
body.ms-app .btn:active{transform:translateY(1px)}
body.ms-app .btn.ghost{background:var(--card);color:var(--ink);border:1.5px solid var(--line);box-shadow:none}
body.ms-app .btn.ghost:hover{background:var(--soft);border-color:var(--cyan)}
body.ms-app .btn.danger-solid{background:var(--sev3);color:#fff}
body.ms-app #analyzeBtn{background:var(--cyan);color:var(--cta-ink);border:0;box-shadow:none}
body.ms-app #analyzeBtn.idle{opacity:1;filter:none;background:var(--idle-bg);color:var(--idle-ink)}

/* Karten: Linie statt Schatten, Rundung nach Rang */
body.ms-app .card{background:var(--card);border:1px solid var(--line);box-shadow:none;border-radius:var(--radius)}
body.ms-app .card h2 .step{border-radius:var(--radius-s);background:var(--soft-2);color:var(--petrol-d);border:0;box-shadow:none;
  font-family:var(--font-head);font-weight:800}
body.ms-app .howto-step{box-shadow:none;border:1px solid var(--line);border-radius:var(--radius);background:var(--card)}
body.ms-app .howto-ic{background:var(--soft-2);color:var(--petrol-d);box-shadow:none;border:0;border-radius:var(--radius-s)}
body.ms-app .personbar{background:var(--card);border-color:var(--line);border-radius:var(--radius);box-shadow:none}
body.ms-app .stat{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:none}
body.ms-app .stat b{color:var(--petrol-d)}
body.ms-app .stat span{text-transform:none;letter-spacing:0;font-size:.85rem;font-weight:700}
body.ms-app .chip{background:var(--card);color:var(--ink);border-color:var(--line);box-shadow:none}
body.ms-app .chip .x{background:var(--soft-2);color:var(--petrol-d)}
body.ms-app .timechip{background:var(--card);color:var(--ink)}
body.ms-app .toggle[aria-pressed="true"] .dot::after{border-color:var(--cta-ink)}

/* Scan-Buehne: Signalfarbe nur hier */
body.ms-app .scanpad{border:1px solid var(--line);border-radius:var(--radius-l);background-color:var(--card);
  background-image:
    linear-gradient(var(--signal),var(--signal)),linear-gradient(var(--signal),var(--signal)),
    linear-gradient(var(--signal),var(--signal)),linear-gradient(var(--signal),var(--signal)),
    linear-gradient(var(--signal),var(--signal)),linear-gradient(var(--signal),var(--signal)),
    linear-gradient(var(--signal),var(--signal)),linear-gradient(var(--signal),var(--signal));
  background-size:26px 3px,3px 26px,26px 3px,3px 26px,26px 3px,3px 26px,26px 3px,3px 26px;
  background-position:14px 14px,14px 14px,calc(100% - 14px) 14px,calc(100% - 14px) 14px,
    14px calc(100% - 14px),14px calc(100% - 14px),calc(100% - 14px) calc(100% - 14px),calc(100% - 14px) calc(100% - 14px);
  background-repeat:no-repeat}
body.ms-app .scanfx{background:#0A171B;border-color:rgba(240,180,69,.28);color:#E3EEEC}
body.ms-app .scanfx-stage{background:radial-gradient(90% 80% at 50% 45%,rgba(60,194,180,.14),transparent 70%),#0E2026}
body.ms-app .scanfx-c{filter:none;border-color:#F0B445}
body.ms-app .scanfx-laser{background:linear-gradient(90deg,transparent,#F0B445 20%,#FFF4D6 50%,#F0B445 80%,transparent);
  box-shadow:0 0 10px 2px rgba(240,180,69,.55)}
body.ms-app .scanfx-status{color:#E3EEEC}

/* Kurzergebnis */
body.ms-app .ss-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:none}
body.ms-app .ss-card::before,body.ms-app .ss-it.sev1::before,body.ms-app .ss-it.sev2::before,
body.ms-app .ss-it.sev3::before,body.ms-app .ss-it.sev4::before{box-shadow:none}
body.ms-app .ss-found{background:var(--soft);border-color:var(--line)}
body.ms-app .ss-found::before{background:var(--petrol);box-shadow:none}
body.ms-app .ss-found .ss-k{color:var(--petrol-d)}
body.ms-app .ss-k{font-size:.94rem;font-weight:700}
body.ms-app .ss-pill{font-size:.88rem;font-weight:700;border-radius:var(--radius-s)}
body.ms-app .ss-it.sev1 .ss-pill{background:var(--sev1bg);color:var(--sev1ink);border-color:var(--sev1ln)}
body.ms-app .ss-it.sev2 .ss-pill{background:var(--sev2bg);color:var(--sev2ink);border-color:var(--sev2ln)}
body.ms-app .ss-it.sev3 .ss-pill{background:var(--sev3bg);color:var(--sev3ink);border-color:var(--sev3ln)}
body.ms-app .ss-it.sev4 .ss-pill{background:var(--sev4bg);color:var(--sev4ink);border-color:var(--sev4ln)}

/* Ergebnis-Karten */
body.ms-app .res,body.ms-app .res.sev0,body.ms-app .res.sev1,body.ms-app .res.sev2,body.ms-app .res.sev3,body.ms-app .res.sev4{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:none}
body.ms-app .res.sev4{background-image:repeating-linear-gradient(135deg,var(--sev4ln) 0 6px,transparent 6px 14px);
  background-size:100% 6px;background-repeat:no-repeat}
body.ms-app .res .ttl{font-weight:700}
body.ms-app .res .rec b,body.ms-app .res .medtag{color:var(--petrol-d)}
body.ms-app .res .pair{color:var(--ink);font-weight:700}

/* Schweregrad-Leiter: 1-4 Balken + Farbe + Wort (ersetzt den Ring) */
body.ms-app .sevring{display:none}
body.ms-app .sevmark{flex-direction:column;align-items:flex-end;gap:5px;animation:none}
.sevbars{display:inline-flex;align-items:flex-end;gap:3px;height:22px}
.sevbars i{display:block;width:7px;border-radius:2px;background:var(--line)}
.sevbars i:nth-child(1){height:8px} .sevbars i:nth-child(2){height:12px}
.sevbars i:nth-child(3){height:17px} .sevbars i:nth-child(4){height:22px}
.res.sev1 .sevbars{--bar:var(--sev1)} .res.sev2 .sevbars{--bar:var(--sev2)}
.res.sev3 .sevbars{--bar:var(--sev3)} .res.sev4 .sevbars{--bar:var(--sev4)}
.res.sev1 .sevbars i:nth-child(-n+1),.res.sev2 .sevbars i:nth-child(-n+2),
.res.sev3 .sevbars i:nth-child(-n+3),.res.sev4 .sevbars i{background:var(--bar)}
.res.sev4 .sevbars i{background:repeating-linear-gradient(135deg,var(--sev4) 0 3px,color-mix(in srgb,var(--sev4) 55%,var(--card)) 3px 5px)}
.res.sevinfo .sevbars{display:none}
body.ms-app .sevmark-lb{font-size:.88rem;font-weight:700;line-height:1.2;text-align:right}
body.ms-app .res.sev1 .sevmark-lb{color:var(--sev1ink)} body.ms-app .res.sev2 .sevmark-lb{color:var(--sev2ink)}
body.ms-app .res.sev3 .sevmark-lb{color:var(--sev3ink)} body.ms-app .res.sev4 .sevmark-lb{color:var(--sev4ink)}

/* Die Bruecke: Linie in Schweregrad-Farbe zwischen den Namen, zeichnet sich einmal */
body.ms-app .res .pair .arrow,body.ms-app .ss-pair i{display:inline-block;position:relative;vertical-align:middle;
  width:34px;height:4px;margin:0 9px;border-radius:2px;font-size:0;line-height:0;color:transparent;overflow:hidden;
  background:var(--line)}
body.ms-app .res .pair .arrow::after,body.ms-app .ss-pair i::after{content:"";position:absolute;inset:0;border-radius:2px;
  background:var(--br,var(--petrol));transform-origin:left center;animation:ms-bruecke .6s cubic-bezier(.2,.7,.2,1) .15s both}
body.ms-app .res.sev1 .pair,body.ms-app .ss-it.sev1 .ss-pair{--br:var(--sev1)}
body.ms-app .res.sev2 .pair,body.ms-app .ss-it.sev2 .ss-pair{--br:var(--sev2)}
body.ms-app .res.sev3 .pair,body.ms-app .ss-it.sev3 .ss-pair{--br:var(--sev3)}
body.ms-app .res.sev4 .pair,body.ms-app .ss-it.sev4 .ss-pair{--br:var(--sev4)}
@keyframes ms-bruecke{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* Vertrauensleiste, Toast, Dialog */
body.ms-app .trustbar{background:var(--soft);color:var(--ink);border:1px solid var(--line);box-shadow:none;border-radius:var(--radius)}
body.ms-app .trustbar-ic{background:var(--card);color:var(--petrol-d);border-color:var(--line)}
body.ms-app .trustbar-tx b{color:var(--ink)}
body.ms-app .trustbar-tx span{color:var(--muted)}
body.ms-app .toast{background:var(--ink);color:var(--card);border-color:transparent;border-radius:var(--radius-s)}
body.ms-app .toast-act{border-color:color-mix(in srgb,var(--card) 50%,transparent);color:var(--card)}
body.ms-app .msdlg{border-radius:var(--radius)}
body.ms-app .msdlg::backdrop{background:var(--scrim)}

@media (prefers-reduced-motion: reduce){
  body.ms-app .res .pair .arrow::after,body.ms-app .ss-pair i::after{animation:none;transform:none}
  body.ms-app .btn{transition:none}
}
body.ms-app .sec-h{text-transform:none;letter-spacing:0;font-size:.95rem}