:root{
  color-scheme: dark;
  --graphit:#14171C;
  --sidebar:#11141A;
  --flaeche:#1A1F27;
  --flaeche-2:#252C36;
  --linie:#2E353F;
  --text:#EDF0F3;
  --gedaempft:#8A94A3;
  --signal:#FF8A3D;
  --signal-tief:#C7601F;
  --gut:#3FBF8F;
  --warnung:#F04E4E;
  --schatten:0 10px 30px rgba(0,0,0,.45);
  --sidebar-breite:246px;
}
:root[data-theme="dark"]{ color-scheme: dark; }
/* Heller Modus – überschreibt die Variablen; color-scheme sorgt dafür, dass auch
   native Steuerelemente (Datalist-Vorschläge, Scrollbars, Selects) hell rendern. */
:root[data-theme="light"]{
  color-scheme: light;
  --graphit:#EEF1F5;
  --sidebar:#FFFFFF;
  --flaeche:#FFFFFF;
  --flaeche-2:#F1F4F8;
  --linie:#D7DDE5;
  --text:#1A1F27;
  --gedaempft:#5A6472;
  --signal:#E06A1E;
  --signal-tief:#B4551A;
  --gut:#1E9E72;
  --warnung:#D23B3B;
  --schatten:0 10px 30px rgba(20,30,50,.12);
}
/* Theme-Umschalter */
.theme-toggle{background:var(--flaeche-2);border:1px solid var(--linie);color:var(--gedaempft);
  border-radius:9px;width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;flex:0 0 auto;font-size:1rem;line-height:1;transition:color .12s,background .12s}
.theme-toggle:hover{color:var(--text);background:var(--flaeche)}
.theme-toggle .ic-mond{display:none}
:root[data-theme="light"] .theme-toggle .ic-sonne{display:none}
:root[data-theme="light"] .theme-toggle .ic-mond{display:inline}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--graphit);color:var(--text);
  font-family:"Space Grotesk",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.mono{font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace}
a{color:inherit;text-decoration:none}

/* ---------------- App-Schale ---------------- */
.schale{display:flex;min-height:100dvh}
.inhalt{flex:1;min-width:0;display:flex;flex-direction:column}

/* ---------------- Seitenleiste ---------------- */
.seitenleiste{
  width:var(--sidebar-breite);flex:0 0 var(--sidebar-breite);
  background:var(--sidebar);border-right:1px solid var(--linie);
  display:flex;flex-direction:column;position:sticky;top:0;height:100dvh;
}
.marke{display:flex;align-items:center;gap:.7rem;padding:1.3rem 1.25rem 1.1rem}
.marke .streifen{display:inline-block;width:32px;height:22px;border-radius:3px;flex:0 0 auto;
  background:repeating-linear-gradient(90deg,var(--text) 0 2px,transparent 2px 4px,var(--text) 4px 5px,transparent 5px 9px,var(--text) 9px 12px,transparent 12px 14px)}
.marke .name{font-weight:700;letter-spacing:.01em;line-height:1}
.marke .sub{display:block;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gedaempft);margin-top:.2rem}

.nav{display:flex;flex-direction:column;gap:.15rem;padding:.6rem .7rem;overflow-y:auto}
.nav a{
  display:flex;align-items:center;gap:.75rem;padding:.7rem .8rem;border-radius:10px;
  color:var(--gedaempft);font-weight:600;font-size:.96rem;position:relative;transition:background .12s,color .12s}
.nav a svg{width:20px;height:20px;flex:0 0 auto}
.nav a:hover{background:var(--flaeche);color:var(--text)}
.nav a.aktiv{background:var(--flaeche-2);color:var(--text)}
.nav a.aktiv::before{content:"";position:absolute;left:-.7rem;top:.35rem;bottom:.35rem;width:3px;
  border-radius:0 3px 3px 0;background:var(--signal);box-shadow:0 0 10px var(--signal)}

.leiste-fuss{margin-top:auto;border-top:1px solid var(--linie);padding:.9rem 1rem;display:flex;align-items:center;gap:.7rem}
.avatar{width:34px;height:34px;border-radius:9px;background:var(--flaeche-2);border:1px solid var(--linie);
  display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--signal);flex:0 0 auto}
.leiste-fuss .wer{min-width:0;line-height:1.15}
.leiste-fuss .wer b{display:block;font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.leiste-fuss .wer span{font-size:.72rem;color:var(--gedaempft);text-transform:uppercase;letter-spacing:.12em}
.leiste-fuss .abmelden{margin-left:auto;color:var(--gedaempft);padding:.4rem;border-radius:8px}
.leiste-fuss .abmelden:hover{color:var(--warnung);background:var(--flaeche)}

/* Topbar nur mobil */
.topbar{display:none;align-items:center;gap:.6rem;padding:.7rem 1rem;border-bottom:1px solid var(--linie);
  background:var(--sidebar);position:sticky;top:0;z-index:30}
.burger{background:var(--flaeche-2);border:1px solid var(--linie);color:var(--text);border-radius:9px;
  width:40px;height:40px;display:flex;align-items:center;justify-content:center;cursor:pointer}
.topbar .titel{font-weight:700}

/* ---------------- Inhaltsbereich ---------------- */
.seite{padding:1.6rem clamp(1rem,3vw,2.2rem);flex:1;min-height:0;display:flex;flex-direction:column}
.seite-kopf{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:1.2rem}
.seite-kopf h1{margin:0;font-size:clamp(1.4rem,3vw,1.9rem);letter-spacing:-.01em}
.eyebrow{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gedaempft);font-weight:600}

/* Karten / Tabelle */
.karte{background:var(--flaeche);border:1px solid var(--linie);border-radius:16px;overflow:hidden}
.tab-wrap{overflow:auto}
table.daten{border-collapse:collapse;width:100%}
table.daten th,table.daten td{padding:.75rem 1rem;text-align:left;border-bottom:1px solid var(--linie)}
table.daten th{background:var(--flaeche-2);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gedaempft);font-weight:600}
table.daten tr:last-child td{border-bottom:0}
table.daten td.r,table.daten th.r{text-align:right}
.pille{display:inline-block;background:var(--flaeche-2);border:1px solid var(--linie);border-radius:999px;
  padding:.15rem .6rem;font-size:.78rem}
.summe{margin-top:1rem;color:var(--gedaempft)}
.summe b{color:var(--text)}
.leer-hinweis{padding:2.5rem 1rem;text-align:center;color:var(--gedaempft)}

/* Platzhalter */
.platzhalter{max-width:640px}
.platzhalter .status{display:inline-flex;align-items:center;gap:.5rem;font-size:.78rem;font-weight:600;
  color:var(--signal);border:1px solid var(--signal-tief);border-radius:999px;padding:.25rem .7rem;margin-bottom:1rem}
.platzhalter .status::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--signal)}
.platzhalter p{color:var(--gedaempft);line-height:1.6;font-size:1.02rem}

/* ---------------- Login ---------------- */
.login-wrap{min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:1.5rem}
.login{width:100%;max-width:380px}
.login .marke{padding:0 0 1.6rem}
.login .karte{padding:1.6rem}
.login h1{margin:.1rem 0 .3rem;font-size:1.5rem}
.login .unter{color:var(--gedaempft);margin:0 0 1.4rem;font-size:.95rem}
.feld{margin-bottom:1rem}
.feld label{display:block;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gedaempft);margin-bottom:.4rem;font-weight:600}
.feld input{width:100%;background:var(--graphit);border:1px solid var(--linie);border-radius:11px;color:var(--text);
  padding:.85rem .9rem;font-family:inherit;font-size:1.02rem}
.feld input:focus{outline:none;border-color:var(--signal)}
.knopf{width:100%;appearance:none;border:0;cursor:pointer;border-radius:12px;background:var(--signal);color:#221200;
  padding:.95rem 1rem;font-family:inherit;font-size:1.05rem;font-weight:700;transition:filter .12s,transform .12s;margin-top:.4rem}
.knopf:active{transform:translateY(1px)}
.fehler{background:rgba(240,78,78,.1);border:1px solid var(--warnung);color:#ffd7d7;border-radius:11px;
  padding:.7rem .85rem;font-size:.92rem;margin-bottom:1rem}

/* ---------------- Scanner (im Inhaltsbereich) ---------------- */
.scan-seite{flex:1;display:flex;flex-direction:column;min-height:0;padding:0}
.scan-start{flex:1;display:flex;flex-direction:column;justify-content:center;padding:2rem clamp(1rem,4vw,2.4rem);gap:1.1rem;max-width:640px}
.scan-start h1{font-size:clamp(1.7rem,6vw,2.4rem);margin:.2rem 0 0;letter-spacing:-.01em}
.scan-start p{margin:0;color:var(--gedaempft);max-width:40ch;line-height:1.55}
.start-knopf{margin-top:.6rem;align-self:flex-start;appearance:none;border:0;cursor:pointer;
  padding:1.15rem 1.6rem;border-radius:15px;background:var(--signal);color:#221200;font-family:inherit;
  font-size:1.15rem;font-weight:700;box-shadow:var(--schatten);display:inline-flex;align-items:center;gap:.6rem;transition:transform .12s,filter .12s}
.start-knopf:active{transform:translateY(1px)}
.start-knopf svg{width:24px;height:24px}

#scanner{display:none;flex:1;flex-direction:column;min-height:0}
#scanner.aktiv{display:flex}
.ean-leiste{padding:.9rem clamp(1rem,3vw,1.6rem) .8rem;border-bottom:1px solid var(--linie);background:var(--flaeche)}
.ean-label{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gedaempft);font-weight:600}
.ean-eingabe-reihe{display:flex;align-items:center;gap:.6rem;margin-top:.35rem}
#eanFeld{flex:1;min-width:0;background:transparent;border:0;color:var(--text);
  font-family:"IBM Plex Mono",monospace;font-size:clamp(1.5rem,6vw,2rem);font-weight:600;letter-spacing:.06em;padding:.1rem 0}
#eanFeld:focus{outline:none}
#eanFeld::placeholder{color:#454e5b}
#eanFeld:disabled{color:#4a5360}
.pruef{font-size:.85rem;font-weight:600;white-space:nowrap}
.pruef.ok{color:var(--gut)}.pruef.warn{color:var(--warnung)}.pruef.leer{color:var(--gedaempft)}
.ean-streifen{height:3px;margin-top:.55rem;border-radius:2px;background:#333b46;overflow:hidden}
.ean-streifen b{display:block;height:100%;width:0;background:var(--signal);transition:width .18s}

.buehne{position:relative;flex:1;min-height:240px;background:#000;overflow:hidden;display:flex;align-items:center;justify-content:center}
#video,#standbild{width:100%;height:100%;object-fit:cover;display:block}
#standbild{display:none}
.buehne.review #video{display:none}
.buehne.review #standbild{display:block}
.reticle{position:absolute;inset:0;pointer-events:none;display:flex;align-items:center;justify-content:center}
.rahmen{position:relative;width:min(78vw,420px);height:40%;max-height:230px}
.ecke{position:absolute;width:30px;height:30px;border:3px solid var(--signal);border-radius:4px}
.ecke.tl{top:0;left:0;border-right:0;border-bottom:0}.ecke.tr{top:0;right:0;border-left:0;border-bottom:0}
.ecke.bl{bottom:0;left:0;border-right:0;border-top:0}.ecke.br{bottom:0;right:0;border-left:0;border-top:0}
.laser{position:absolute;left:6%;right:6%;top:0;height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--signal),transparent);box-shadow:0 0 12px var(--signal);animation:scan 2.2s ease-in-out infinite}
.buehne.review .reticle{display:none}
@keyframes scan{0%{top:6%}50%{top:94%}100%{top:6%}}
.buehne-hinweis{position:absolute;left:0;right:0;bottom:1rem;text-align:center;color:#fff;font-size:.92rem;text-shadow:0 1px 6px rgba(0,0,0,.8);padding:0 1rem}
.snap{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}
.snap.blitz{animation:blitz .28s ease-out}
@keyframes blitz{0%{opacity:.75}100%{opacity:0}}

.aktion{padding:.85rem clamp(1rem,3vw,1.6rem);display:flex;gap:.7rem;border-top:1px solid var(--linie);background:var(--flaeche)}
.aktion button{flex:1;appearance:none;border:0;cursor:pointer;border-radius:13px;padding:1rem;font-family:inherit;font-size:1.05rem;font-weight:700;transition:transform .12s}
.aktion button:active{transform:translateY(1px)}
.btn-primaer{background:var(--gut);color:#04140d}
.btn-sekundaer{background:var(--flaeche-2);color:var(--text);border:1px solid var(--linie)}
.aktion .schmal{flex:0 0 auto;padding-left:1.2rem;padding-right:1.2rem}
[hidden]{display:none!important}

.liste-kopf{display:flex;align-items:center;justify-content:space-between;padding:.7rem clamp(1rem,3vw,1.6rem) .3rem;
  color:var(--gedaempft);font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600}
.badge{background:var(--flaeche-2);border:1px solid var(--linie);color:var(--text);border-radius:999px;padding:.15rem .6rem;font-size:.72rem}
.badge.wartet{color:var(--signal);border-color:var(--signal-tief)}
#liste{list-style:none;margin:0;padding:0 clamp(1rem,3vw,1.6rem) 1rem;max-height:24vh;overflow:auto}
#liste li{display:flex;align-items:center;justify-content:space-between;gap:.8rem;padding:.6rem .8rem;
  border:1px solid var(--linie);border-radius:12px;background:var(--flaeche);margin-top:.5rem}
#liste li .code{font-family:"IBM Plex Mono",monospace;font-weight:600;letter-spacing:.04em}
#liste li .menge{background:var(--flaeche-2);border-radius:8px;padding:.15rem .55rem;font-family:"IBM Plex Mono",monospace;font-size:.9rem}
#liste .leer{border:1px dashed var(--linie);color:var(--gedaempft);text-align:center;justify-content:center;background:transparent}
.kamera-fehler{margin:1rem;padding:1rem 1.1rem;border:1px solid var(--warnung);border-radius:14px;background:rgba(240,78,78,.08);color:#ffd7d7;line-height:1.5}
.kamera-fehler b{color:#fff}

/* ---------------- Mobil ---------------- */
.abdunkeln{display:none}
@media (max-width:820px){
  .topbar{display:flex}
  .seitenleiste{position:fixed;left:0;top:0;z-index:40;transform:translateX(-100%);transition:transform .22s ease;height:100dvh}
  .schale.offen .seitenleiste{transform:translateX(0);box-shadow:var(--schatten)}
  .schale.offen .abdunkeln{display:block;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:35}
}
@media (prefers-reduced-motion:reduce){
  .laser{animation:none;top:50%}.snap.blitz{animation:none}
  *{transition:none!important}
}

/* ============================================================= */
/*  Light Mode – Umschaltung über <html data-theme="light">      */
/* ============================================================= */
:root[data-theme="light"]{
  --graphit:#EDEFF3;
  --sidebar:#FFFFFF;
  --flaeche:#FFFFFF;
  --flaeche-2:#F1F3F7;
  --linie:#DCE1E8;
  --text:#171B22;
  --gedaempft:#5C6675;
  --signal:#E0701C;
  --signal-tief:#B4560F;
  --gut:#1E9C69;
  --warnung:#D23A3A;
  --schatten:0 8px 24px rgba(20,23,28,.10);
}
/* einzelne fest kodierte Dunkelwerte im Light Mode angleichen */
:root[data-theme="light"] #eanFeld::placeholder{color:#9aa4b2}
:root[data-theme="light"] #eanFeld:disabled{color:#aab2bf}
:root[data-theme="light"] .ean-streifen{background:#e2e6ec}
:root[data-theme="light"] #liste li .code,
:root[data-theme="light"] .marke .name{color:var(--text)}

/* Icon-Knöpfe (Theme + Abmelden) in der Leisten-Fußzeile */
.fuss-knoepfe{margin-left:auto;display:flex;align-items:center;gap:.1rem}
.ikon-knopf{background:transparent;border:0;color:var(--gedaempft);cursor:pointer;
  padding:.45rem;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:background .12s,color .12s}
.ikon-knopf:hover{background:var(--flaeche);color:var(--text)}
a.abmelden.ikon-knopf:hover{color:var(--warnung)}
.ikon-mond{display:none}
.ikon-sonne{display:block}
:root[data-theme="light"] .ikon-mond{display:block}
:root[data-theme="light"] .ikon-sonne{display:none}
.thema-fix{position:fixed;top:1rem;right:1rem;z-index:5;border:1px solid var(--linie);background:var(--flaeche)}

/* ---------------- Tages-Abgleich ---------------- */
.fliess{color:var(--gedaempft);line-height:1.6;max-width:70ch}
.ab-status{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem;margin-bottom:1.2rem;max-width:560px}
.ab-status.vier{grid-template-columns:repeat(4,minmax(0,1fr));max-width:none}
.ab-kachel{background:var(--flaeche);border:1px solid var(--linie);border-radius:14px;padding:.9rem 1rem;display:flex;flex-direction:column;gap:.15rem}
.k-label{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gedaempft);font-weight:600}
.k-wert{font-size:1.5rem;font-weight:700;font-family:"IBM Plex Mono",monospace}
.k-wert.ok{color:var(--gut)}.k-wert.warn{color:var(--warnung)}
.k-sub{font-size:.78rem;color:var(--gedaempft)}
.hinweis-box{background:var(--flaeche-2);border:1px solid var(--linie);border-radius:12px;padding:.85rem 1rem;margin-bottom:1.1rem;line-height:1.5;font-size:.92rem}
.hinweis-box.warn{border-color:var(--signal-tief);background:rgba(255,138,61,.08)}
.hinweis-box code{font-family:"IBM Plex Mono",monospace;background:var(--graphit);padding:.05rem .35rem;border-radius:5px;font-size:.86em}
.upload-karte{background:var(--flaeche);border:1px solid var(--linie);border-radius:16px;padding:1.2rem;max-width:560px;display:flex;flex-direction:column;gap:1rem}
.drop{display:flex;flex-direction:column;align-items:center;gap:.4rem;text-align:center;
  border:1.5px dashed var(--linie);border-radius:13px;padding:1.8rem 1rem;cursor:pointer;color:var(--gedaempft);transition:border-color .12s,color .12s}
.drop:hover{border-color:var(--signal);color:var(--text)}
.drop b{color:var(--text);font-size:1.05rem}
.upload-karte .knopf{margin-top:0}
.block-kopf{display:flex;align-items:center;gap:.8rem;margin:1.6rem 0 .2rem}
.block-kopf h2{margin:0;font-size:1.15rem}
.block-sub{color:var(--gedaempft);margin:.1rem 0 .7rem;font-size:.92rem}
table.daten tr.gedeckt td{background:rgba(255,138,61,.12)}
.tag{display:inline-block;background:rgba(255,138,61,.15);color:var(--signal);border:1px solid var(--signal-tief);border-radius:999px;padding:.1rem .55rem;font-size:.78rem;font-weight:600}
.kopf-aktionen{display:flex;gap:.5rem;flex-wrap:wrap}
.knopf-klein{background:var(--signal);color:#221200;border-radius:10px;padding:.55rem .9rem;font-weight:700;font-size:.92rem;white-space:nowrap}
.knopf-klein.sekundaer{background:var(--flaeche-2);color:var(--text);border:1px solid var(--linie)}
@media (max-width:820px){ .ab-status,.ab-status.vier{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* ---------------- Artikel-Übersicht ---------------- */
.filter-leiste{display:flex;gap:.6rem;align-items:center;margin-bottom:.9rem;flex-wrap:wrap}
.filter-leiste input[type=text]{flex:1;min-width:200px;background:var(--flaeche);border:1px solid var(--linie);
  border-radius:11px;color:var(--text);padding:.7rem .9rem;font-family:inherit;font-size:1rem}
.filter-leiste input[type=text]:focus{outline:none;border-color:var(--signal)}
.chips{display:flex;gap:.45rem;flex-wrap:wrap;margin-bottom:1rem}
.chip{border:1px solid var(--linie);background:var(--flaeche);color:var(--gedaempft);border-radius:999px;
  padding:.35rem .8rem;font-size:.85rem;font-weight:600;white-space:nowrap}
.chip:hover{color:var(--text);border-color:var(--gedaempft)}
.chip.aktiv{background:var(--signal);color:#221200;border-color:var(--signal)}
.titel-zelle{max-width:34ch}
.st{display:inline-block;border-radius:999px;padding:.12rem .6rem;font-size:.78rem;font-weight:600;
  border:1px solid var(--linie);color:var(--gedaempft);text-transform:capitalize}
.st-aktiv{color:var(--gut);border-color:var(--gut);background:rgba(63,191,143,.12)}
.st-fehler{color:var(--warnung);border-color:var(--warnung);background:rgba(240,78,78,.12);cursor:help}
.st-gesendet{color:#5aa9ff;border-color:#3f7fd0;background:rgba(90,169,255,.12)}
.st-geprueft{color:var(--signal);border-color:var(--signal-tief);background:rgba(255,138,61,.12)}
.st-aufbereitet{color:#c9a227;border-color:#9a7d1e;background:rgba(201,162,39,.12)}
.blaettern{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:1rem;flex-wrap:wrap}
.b-info{color:var(--gedaempft);font-size:.9rem}
.b-knoepfe{display:flex;gap:.5rem}

/* ---------------- Artikel-Detail ---------------- */
.sku-link{color:var(--signal);font-weight:600}
.sku-link:hover{text-decoration:underline}
.zurueck{display:inline-block;color:var(--gedaempft);font-size:.9rem;margin-bottom:.6rem}
.zurueck:hover{color:var(--text)}
.meta-pillen{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1.1rem}
.meta-pillen .pille{font-size:.9rem}
.detail-grid{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:1.3rem;align-items:start}
.foto-karte{padding:.8rem}
.foto-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem}
.foto-grid img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px;background:var(--flaeche-2)}
.foto-platzhalter{aspect-ratio:1;display:flex;align-items:center;justify-content:center;text-align:center;
  padding:.5rem;font-size:.72rem;color:var(--gedaempft);background:var(--flaeche-2);border-radius:10px;word-break:break-all}
.fakten{display:grid;grid-template-columns:repeat(2,1fr);gap:.8rem;margin-bottom:.4rem}
.fakten>div{background:var(--flaeche);border:1px solid var(--linie);border-radius:12px;padding:.7rem .85rem;display:flex;flex-direction:column;gap:.15rem}
.f-label{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gedaempft);font-weight:600}
.f-wert{font-size:1.05rem;font-weight:600}
.beschr{padding:1rem 1.1rem;line-height:1.6;color:var(--text)}
.beschr ul,.beschr ol{margin:.4rem 0 .4rem 1.2rem}
.beschr h3,.beschr h4{margin:.5rem 0 .3rem}
.attr-key{color:var(--gedaempft);white-space:nowrap;width:1%}
.ki-hinweis{margin-top:1.6rem;border:1px dashed var(--signal-tief);border-radius:14px;padding:1rem 1.2rem;max-width:640px;background:rgba(255,138,61,.05)}
.ki-hinweis .status{display:inline-flex;align-items:center;gap:.5rem;font-size:.78rem;font-weight:600;color:var(--signal);margin-bottom:.4rem}
.ki-hinweis .status::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--signal)}
.ki-hinweis p{margin:0;color:var(--gedaempft);line-height:1.6}
@media (max-width:820px){ .detail-grid{grid-template-columns:1fr} }