/* ════════════════════════ TOKENS / THEMES ════════════════════════ */
:root {
  --font-d: "Segoe UI Variable Display","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --font-b: "Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --font-m: ui-monospace,"Cascadia Mono","SF Mono","JetBrains Mono",Consolas,"Liberation Mono",monospace;
  --radius: 14px;
  --radius-s: 9px;
  --ok: #34d399; --warn: #f0a33c; --danger: #ef5d6e;
  --shadow: 0 10px 34px rgba(0,0,0,.38);
}
html[data-theme="sand"] {
  --bg:#f3eee6; --surface:#fdfaf4; --surface2:#f6f0e5; --surface3:#ece3d3;
  --border:#e0d5c1; --border-s:#cfc0a6;
  --text:#2b2418; --text-muted:#7a6e58; --text-faint:#a99a80;
  --accent:#b4540a; --accent-h:#984607; --accent-l:#d97a33; --on-accent:#ffffff;
  --glow: rgba(180,84,10,.10);
  --shadow: 0 10px 30px rgba(60,45,20,.12); color-scheme: light;
}
html[data-theme="lavendel"] {
  --bg:#f5effb; --surface:#ffffff; --surface2:#f2e8fb; --surface3:#e8d8f7;
  --border:#e3d2f3; --border-s:#cdb1e8;
  --text:#36154e; --text-muted:#7a5897; --text-faint:#a98cc4;
  --accent:#a855f7; --accent-h:#9333ea; --accent-l:#c896fb; --on-accent:#ffffff;
  --glow: rgba(168,85,247,.12);
  --shadow: 0 10px 30px rgba(60,20,90,.12); color-scheme: light;
}
html[data-theme="chill"] {
  --bg:#1a1a1a; --surface:rgba(42,42,42,.55); --surface2:rgba(54,52,50,.66); --surface3:rgba(66,62,56,.74);
  --border:rgba(126,114,94,.42); --border-s:rgba(150,136,112,.55);
  --text:#e6d3ad; --text-muted:#a89678; --text-faint:#7e725e;
  --accent:#a9b665; --accent-h:#94a352; --accent-l:#c2cf80; --on-accent:#1d2206;
  --glow: rgba(169,182,101,.16);
  --shadow: 0 8px 32px rgba(0,0,0,.40); color-scheme: dark;
}
/* Chill: weiche Glasoptik auf den Karten/Panels */
html[data-theme="chill"] body {
  background:
    radial-gradient(1100px 700px at 12% -8%, rgba(169,182,101,.10), transparent 60%),
    radial-gradient(900px 600px at 108% 112%, rgba(126,114,94,.12), transparent 60%),
    #1a1a1a;
  background-attachment: fixed;
}
/* Chill mit Hintergrundbild (via --chill-bg gesetzt) */
html[data-theme="chill"][style*="--chill-bg"] body {
  background: linear-gradient(rgba(15,15,15,.55), rgba(15,15,15,.7)), var(--chill-bg) center center / cover no-repeat fixed;
}
html[data-theme="chill"] .mfr-card,
html[data-theme="chill"] .dev-card,
html[data-theme="chill"] .card,
html[data-theme="chill"] .panel,
html[data-theme="chill"] .modal-box,
html[data-theme="chill"] .rail,
html[data-theme="chill"] .filterbar,
html[data-theme="chill"] .komp-main,
html[data-theme="chill"] .komp-side .komp-pl-item,
html[data-theme="chill"] .file-tab,
html[data-theme="chill"] .note-card,
html[data-theme="chill"] .hit-row,
html[data-theme="chill"] .theme-card {
  backdrop-filter: blur(12px) saturate(125%);
  -webkit-backdrop-filter: blur(12px) saturate(125%);
}
html[data-theme="salbei"] {
  --bg:#404a44; --surface:#4b564f; --surface2:#57635b; --surface3:#647168;
  --border:#6b7a70; --border-s:#839487;
  --text:#f1f6f2; --text-muted:#c5d2c8; --text-faint:#98a89e;
  --accent:#8bc4a0; --accent-h:#72ad88; --accent-l:#aed8bd; --on-accent:#10261a;
  --glow: rgba(139,196,160,.16);
  --shadow: 0 10px 30px rgba(0,0,0,.2); color-scheme: dark;
}
html[data-theme="papier"] {
  --bg:#faf8f3; --surface:#ffffff; --surface2:#f3efe6; --surface3:#e9e3d6;
  --border:#e2dcce; --border-s:#cabfa8;
  --text:#2c2920; --text-muted:#736d5d; --text-faint:#a59c87;
  --accent:#3f6212; --accent-h:#365314; --accent-l:#65a30d; --on-accent:#ffffff;
  --glow: rgba(63,98,18,.10);
  --shadow: 0 10px 30px rgba(44,41,32,.08); color-scheme: light;
}
/* 1. Kiesel: Ein warmes, beruhigendes Greige mit einem gedeckten Petrol als Akzent. Sehr sleek und professionell. */
html[data-theme="kiesel"] {
  --bg:#f0ede6; --surface:#f8f6f0; --surface2:#e8e4db; --surface3:#dfd9cd;
  --border:#d4cdbf; --border-s:#beb4a1;
  --text:#2d2b27; --text-muted:#6e685f; --text-faint:#9e968a;
  --accent:#2c7a7b; --accent-h:#235f5f; --accent-l:#4fd1c5; --on-accent:#ffffff;
  --glow: rgba(44,122,123,.12);
  --shadow: 0 10px 30px rgba(45,43,39,.08); color-scheme: light;
}

/* 2. Leinen: Etwas erdiger als Papier. Ein sandiger Ton gepaart mit einem weichen Terrakotta. */
html[data-theme="leinen"] {
  --bg:#efebe1; --surface:#f7f4ec; --surface2:#e6e0d3; --surface3:#dbd3c2;
  --border:#cec4b1; --border-s:#b8ab94;
  --text:#302a22; --text-muted:#756958; --text-faint:#a39783;
  --accent:#b76e53; --accent-h:#905540; --accent-l:#d58e72; --on-accent:#ffffff;
  --glow: rgba(183,110,83,.12);
  --shadow: 0 10px 30px rgba(48,42,34,.08); color-scheme: light;
}

/* 3. Salz: Ein minimal kühles, sehr helles Grau-Blau. Wirkt extrem sauber, modern und reduziert. Akzent: Schieferblau. */
html[data-theme="salz"] {
  --bg:#eaedf0; --surface:#f4f6f8; --surface2:#e0e5e9; --surface3:#d3dae0;
  --border:#c4cdd5; --border-s:#aab6c2;
  --text:#222930; --text-muted:#5f6d7a; --text-faint:#8c9ca8;
  --accent:#476a8a; --accent-h:#334d66; --accent-l:#6b95bb; --on-accent:#ffffff;
  --glow: rgba(71,106,138,.12);
  --shadow: 0 10px 30px rgba(34,41,48,.08); color-scheme: light;
}

/* 4. Matcha: Ein hauchzartes, entsättigtes Salbeigrün im Hintergrund. Organisch und extrem entspannend für die Augen. */
html[data-theme="matcha"] {
  --bg:#ebece8; --surface:#f5f6f4; --surface2:#e1e4dd; --surface3:#d5d9cf;
  --border:#c6ccc0; --border-s:#adb5a5;
  --text:#232b25; --text-muted:#647067; --text-faint:#91a095;
  --accent:#3b6b4c; --accent-h:#284d35; --accent-l:#5ea674; --on-accent:#ffffff;
  --glow: rgba(59,107,76,.12);
  --shadow: 0 10px 30px rgba(35,43,37,.08); color-scheme: light;
}

/* 5. Mandel: Ein tieferer Cremeton. Fühlt sich weich und hochwertig an. Der gedämpfte Pflaumen-Akzent macht es elegant. */
html[data-theme="mandel"] {
  --bg:#f2ece4; --surface:#fbf8f4; --surface2:#e8dfd3; --surface3:#ddcfc0;
  --border:#cebea9; --border-s:#b8a58c;
  --text:#332820; --text-muted:#7a6655; --text-faint:#a89481;
  --accent:#805566; --accent-h:#5c3d4a; --accent-l:#b3778f; --on-accent:#ffffff;
  --glow: rgba(128,85,102,.12);
  --shadow: 0 10px 30px rgba(51,40,32,.08); color-scheme: light;
}

/* ══════════════════════ BLICKFÄNGER-THEMES ══════════════════════
   Drei Themes mit Atmosphäre statt nur Farbwerten. Gemeinsames Prinzip:

   Die Effekte liegen auf ZWEI fixierten Hintergrundebenen (body::before /
   body::after) hinter dem Inhalt — nicht auf den Karten. Das ist der
   entscheidende Punkt: bei 745 Geräten in der Liste würde ein Effekt pro
   Karte die Ansicht zäh machen, zwei Vollbildebenen kosten dagegen nichts,
   weil der Browser sie als eigene Compositor-Schicht hält und nur
   verschiebt (reine transform-Animation, kein Neuzeichnen).

   Bewegung läuft NUR im Darstellungsmodus „Schön". In „Simpel" steht
   dasselbe Bild still — das Theme sieht gleich aus, es bewegt sich nur
   nichts. Die globale prefers-reduced-motion-Regel in 02-base-shell.css
   schaltet zusätzlich alles ab.

   Aufbau je Theme: html trägt die Grundfarbe, body wird durchsichtig
   gemacht, die Ebenen liegen mit z-index:-1 dahinter. Sie sind bewusst
   größer als der Viewport (inset:-25%), damit die Drift nie eine Kante
   ins Bild schiebt.
   ═══════════════════════════════════════════════════════════════════ */

/* ───────────────────────── NORDLICHT ─────────────────────────
   Polarnachtblau mit langsam driftenden Lichtschleiern und feinem
   Sternenstaub. Die Flächen bleiben deckend, damit Gerätedaten auch vor
   einer hellen Stelle des Nordlichts gut lesbar bleiben; die Glasoptik
   bekommt nur die Rahmung (Leiste, Filterzeile, Panels). */
html[data-theme="nordlicht"] {
  --bg:#050a14; --surface:#0d1628; --surface2:#131f37; --surface3:#1c2b4a;
  --border:#22334f; --border-s:#33496c;
  --text:#e8eefb; --text-muted:#94a8c8; --text-faint:#64758f;
  --accent:#5eead4; --accent-h:#2dd4bf; --accent-l:#99f6e4; --on-accent:#022b26;
  --glow: rgba(94,234,212,.20);
  --shadow: 0 14px 42px rgba(0,0,0,.55); color-scheme: dark;
  background: #050a14;
}
html[data-theme="nordlicht"] body { background: transparent; }
html[data-theme="nordlicht"] body::before,
html[data-theme="nordlicht"] body::after {
  content: ''; position: fixed; inset: -25%; z-index: -1; pointer-events: none;
}
/* Ebene 1: die Lichtschleier */
html[data-theme="nordlicht"] body::before {
  background:
    radial-gradient(46% 30% at 24% 16%, rgba(45,212,191,.32), transparent 68%),
    radial-gradient(40% 26% at 74% 10%, rgba(129,140,248,.28), transparent 70%),
    radial-gradient(56% 30% at 18% 62%, rgba(56,189,248,.16), transparent 72%),
    radial-gradient(52% 28% at 86% 78%, rgba(99,102,241,.18), transparent 74%);
  filter: blur(28px);
}
/* Ebene 2: Sternenstaub. Drei Punktraster mit teilerfremden Kantenlängen —
   das Gesamtmuster wiederholt sich dadurch erst nach zigtausend Pixeln und
   wirkt zufällig, kostet aber nur drei Gradienten. */
html[data-theme="nordlicht"] body::after {
  background-image:
    radial-gradient(1.1px 1.1px at 30% 22%, rgba(255,255,255,.45), transparent 100%),
    radial-gradient(1px   1px   at 72% 64%, rgba(190,220,255,.34), transparent 100%),
    radial-gradient(1.3px 1.3px at 12% 78%, rgba(255,255,255,.26), transparent 100%);
  background-size: 137px 137px, 211px 211px, 313px 313px;
  opacity: .55;
}
@keyframes nlSchleier {
  0%, 100% { transform: translate3d(-2%, -1%, 0) scale(1.04); }
  50%      { transform: translate3d( 3%,  2%, 0) scale(1.11); }
}
@keyframes nlSterne {
  0%, 100% { transform: translate3d( 1%,  1%, 0); }
  50%      { transform: translate3d(-2%, -2%, 0); }
}
html[data-display="schoen"][data-theme="nordlicht"] body::before { animation: nlSchleier 48s ease-in-out infinite; }
html[data-display="schoen"][data-theme="nordlicht"] body::after  { animation: nlSterne  104s ease-in-out infinite; }

/* Rahmung als mattes Glas, damit das Nordlicht durchschimmert */
html[data-theme="nordlicht"] .rail,
html[data-theme="nordlicht"] .filterbar,
html[data-theme="nordlicht"] .panel,
html[data-theme="nordlicht"] .modal-box {
  background: rgba(13,22,40,.72);
  backdrop-filter: blur(16px) saturate(130%);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
}
/* Haarlinie in Akzentfarbe unter der Topbar (hat keinen eigenen Hover-Schatten) */
html[data-theme="nordlicht"] .topbar {
  border-bottom-color: transparent;
  box-shadow: 0 1px 0 rgba(94,234,212,.22), 0 12px 32px -22px rgba(94,234,212,.45);
}

/* ───────────────────────── PERLMUTT ─────────────────────────
   Helles, warmes Perlweiß mit schimmerndem Farbspiel. Der Effekt sitzt hier
   bewusst NICHT im Hintergrund, sondern im Material: über jede Karte läuft
   ein Perlmuttschimmer, der beim Überfahren seitlich durchwandert. Das ist
   nur eine Verschiebung der Hintergrundposition — es wird ausschließlich
   die Karte unter dem Zeiger neu gezeichnet. */
html[data-theme="perlmutt"] {
  --bg:#f4f1ec; --surface:#fffdfa; --surface2:#f7f2ec; --surface3:#ece3d8;
  --border:#e4dacd; --border-s:#cdbca7;
  --text:#2b2630; --text-muted:#6d6275; --text-faint:#9e94a7;
  --accent:#9a6f8e; --accent-h:#7d5573; --accent-l:#c197b4; --on-accent:#ffffff;
  --glow: rgba(154,111,142,.16);
  --shadow: 0 12px 34px rgba(60,48,66,.10); color-scheme: light;
  background: #f4f1ec;
}
html[data-theme="perlmutt"] body { background: transparent; }
html[data-theme="perlmutt"] body::before {
  content: ''; position: fixed; inset: -25%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(44% 32% at 18% 10%, rgba(255,196,214,.42), transparent 66%),
    radial-gradient(42% 30% at 84% 16%, rgba(186,220,255,.40), transparent 68%),
    radial-gradient(48% 32% at 62% 94%, rgba(196,246,220,.36), transparent 70%),
    radial-gradient(38% 28% at  6% 86%, rgba(255,236,192,.38), transparent 70%);
  filter: blur(34px);
}
@keyframes pmWandern {
  0%, 100% { transform: translate3d(-2%, -2%, 0) scale(1.05); }
  50%      { transform: translate3d( 2%,  3%, 0) scale(1.12); }
}
html[data-display="schoen"][data-theme="perlmutt"] body::before { animation: pmWandern 64s ease-in-out infinite; }

/* Der Schimmer auf den Flächen. background-image überlagert die Grundfarbe
   aus --surface; die höhere Spezifität sorgt dafür, dass das spätere
   `background: var(--surface)` der Basisregeln nur die Farbe setzt. */
html[data-theme="perlmutt"] .mfr-card,
html[data-theme="perlmutt"] .theme-card,
html[data-theme="perlmutt"] .note-card {
  background-image: linear-gradient(115deg,
    rgba(255,203,222,.34) 0%, rgba(255,241,203,.20) 26%,
    rgba(201,236,255,.30) 58%, rgba(208,255,230,.24) 100%);
  background-size: 260% 100%;   /* breiter als die Karte — nur waagerecht wandert etwas */
  background-position: 0% 0%;
}
/* Große Leseflächen bekommen denselben Schimmer, aber halb so kräftig —
   Gerätedaten sollen vor ruhigem Grund stehen, nicht vor Farbspiel. */
html[data-theme="perlmutt"] .card,
html[data-theme="perlmutt"] .panel,
html[data-theme="perlmutt"] .modal-box,
html[data-theme="perlmutt"] .filterbar {
  background-image: linear-gradient(115deg,
    rgba(255,203,222,.16) 0%, rgba(255,241,203,.09) 26%,
    rgba(201,236,255,.14) 58%, rgba(208,255,230,.11) 100%);
}
html[data-theme="perlmutt"] .mfr-card {
  transition: transform .14s, border-color .14s, box-shadow .14s, background-position .75s ease;
}
html[data-theme="perlmutt"] .theme-card { transition: background-position .75s ease; }
html[data-theme="perlmutt"] .mfr-card:hover,
html[data-theme="perlmutt"] .theme-card:hover { background-position: 100% 0%; }
/* Satinkante: heller Lichtsaum oben auf der Topbar */
html[data-theme="perlmutt"] .topbar {
  background: linear-gradient(180deg, rgba(255,255,255,.90), rgba(252,248,243,.74));
  border-bottom-color: rgba(206,190,170,.6);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 14px 26px -22px rgba(120,90,110,.55);
}

/* ───────────────────────── ABENDROT ─────────────────────────
   Dämmerungsverlauf von Indigo über Pflaume bis zu einem Glutsaum am
   unteren Bildrand, der ganz langsam heller und dunkler wird — wie eine
   Sonne, die gerade untergegangen ist. */
html[data-theme="abendrot"] {
  --bg:#140b1c; --surface:#26142f; --surface2:#331b3d; --surface3:#44254c;
  --border:#4d2b46; --border-s:#6b3d59;
  --text:#fbeae4; --text-muted:#c4a2a9; --text-faint:#8d6f7b;
  --accent:#ff8a5c; --accent-h:#f2683a; --accent-l:#ffb190; --on-accent:#2a0d03;
  --glow: rgba(255,138,92,.22);
  --shadow: 0 14px 42px rgba(0,0,0,.5); color-scheme: dark;
  background: #140b1c;
}
html[data-theme="abendrot"] body { background: transparent; }
/* Ebene 1: der Himmel — steht still, er ist der Grund.
   z-index -2 statt -1: die Sternebenen weiter unten hängen am html-Element
   und stehen damit in der Baumreihenfolge VOR body::before. Auf derselben
   Stapelebene würde der undurchsichtige Himmel sie also überdecken — eine
   davon war zuerst schlicht unsichtbar. */
html[data-theme="abendrot"] body::before {
  content: ''; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background: linear-gradient(180deg,
    #0e0717 0%, #170a21 34%, #26102e 62%, #3d1638 82%, #5c2337 93%, #7a3330 100%);
}
/* Ebene 2: der Glutsaum — er atmet. Ebenfalls -2, er gehört zum Himmel. */
html[data-theme="abendrot"] body::after {
  content: ''; position: fixed; inset: auto 0 0 0; height: 40vh;
  z-index: -2; pointer-events: none;
  background: radial-gradient(130% 100% at 50% 138%,
    rgba(255,150,72,.34), rgba(255,112,62,.10) 46%, transparent 76%);
  opacity: .66;
}
@keyframes abGlut {
  0%, 100% { opacity: .52; transform: translateY(1.5%); }
  50%      { opacity: .80; transform: translateY(0); }
}
html[data-display="schoen"][data-theme="abendrot"] body::after { animation: abGlut 34s ease-in-out infinite; }

/* ── Sterne ──
   body::before und body::after sind beim Abendrot schon belegt (Himmel und
   Glutsaum), deshalb kommen die Sterne auf die Pseudo-Elemente des
   html-Elements. Das geht, weil dessen Hintergrundfarbe an die Seitenfläche
   weitergereicht wird — die Ebenen liegen also darüber, aber unter allem
   Inhalt.

   Zwei Sätze mit VERSCHIEDENEN Positionen und verschiedenen Takten (11 s und
   17 s, der zweite zusätzlich versetzt). Jeder Satz blitzt nur kurz auf statt
   gleichmäßig zu atmen — deshalb der schmale helle Ausschlag in den
   Keyframes. Zusammen sieht es aus, als funkelte mal hier, mal dort einer,
   ohne dass je alle gleichzeitig hell sind. */
html[data-theme="abendrot"]::before,
html[data-theme="abendrot"]::after {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-repeat: no-repeat;
}
/* Jeder Stern besteht aus zwei Gradienten: einem winzigen harten Kern und
   einem weichen Hof darum. Nur der Kern allein sähe aus wie ein Staubkorn
   auf dem Bildschirm — erst der Hof macht daraus einen Lichtpunkt.
   Die Positionen liegen im oberen Bilddrittel, wo der Himmel frei ist;
   was hinter einer Karte läge, sähe man ohnehin nie. */
html[data-theme="abendrot"]::before {
  background-image:
    radial-gradient(2.6px 2.6px at 31% 13%, rgba(255,250,235,1), transparent 100%),
    radial-gradient(9px   9px   at 31% 13%, rgba(255,240,205,.16), transparent 100%),
    radial-gradient(3.1px 3.1px at 58% 19%, rgba(255,252,242,1), transparent 100%),
    radial-gradient(11px  11px  at 58% 19%, rgba(255,238,210,.18), transparent 100%),
    radial-gradient(2.2px 2.2px at 79% 10%, rgba(238,234,255,.95), transparent 100%),
    radial-gradient(8px   8px   at 79% 10%, rgba(220,220,255,.14), transparent 100%),
    radial-gradient(2.5px 2.5px at 93% 24%, rgba(255,248,232,1), transparent 100%),
    radial-gradient(9px   9px   at 93% 24%, rgba(255,235,200,.15), transparent 100%);
  opacity: .4;
}
html[data-theme="abendrot"]::after {
  background-image:
    radial-gradient(2.9px 2.9px at 44% 10%, rgba(255,252,240,1), transparent 100%),
    radial-gradient(10px  10px  at 44% 10%, rgba(255,240,212,.17), transparent 100%),
    radial-gradient(2.3px 2.3px at 68% 27%, rgba(255,247,230,.95), transparent 100%),
    radial-gradient(8px   8px   at 68% 27%, rgba(255,236,206,.14), transparent 100%),
    radial-gradient(2.7px 2.7px at 86% 15%, rgba(244,240,255,1), transparent 100%),
    radial-gradient(10px  10px  at 86% 15%, rgba(226,224,255,.15), transparent 100%),
    radial-gradient(2.1px 2.1px at 24% 21%, rgba(255,246,228,.9), transparent 100%),
    radial-gradient(7px   7px   at 24% 21%, rgba(255,234,204,.13), transparent 100%);
  opacity: .36;
}
@keyframes abFunkeln1 {
  0%, 38%, 100% { opacity: .26; }
  46%           { opacity: .92; }
  54%           { opacity: .3;  }
}
@keyframes abFunkeln2 {
  0%, 22%, 100% { opacity: .22; }
  30%           { opacity: .85; }
  38%           { opacity: .26; }
  74%           { opacity: .26; }
  80%           { opacity: .6;  }
  86%           { opacity: .24; }
}
html[data-display="schoen"][data-theme="abendrot"]::before { animation: abFunkeln1 11s ease-in-out infinite; }
html[data-display="schoen"][data-theme="abendrot"]::after  { animation: abFunkeln2 17s ease-in-out -6s infinite; }

html[data-theme="abendrot"] .rail,
html[data-theme="abendrot"] .filterbar,
html[data-theme="abendrot"] .panel,
html[data-theme="abendrot"] .modal-box {
  background: rgba(38,20,47,.74);
  backdrop-filter: blur(16px) saturate(125%);
  -webkit-backdrop-filter: blur(16px) saturate(125%);
}
html[data-theme="abendrot"] .topbar {
  border-bottom-color: transparent;
  box-shadow: 0 1px 0 rgba(255,138,92,.24), 0 12px 32px -22px rgba(255,138,92,.5);
}


/* ───────────────────────── WALD ─────────────────────────
   Waldboden bei Gegenlicht: Lichtbahnen fallen schräg von oben ein und
   wandern kaum merklich, darüber ein weiches Blätterschattenspiel. Die
   Bahnen werden nach unten hin ausmaskiert (mask-image), sonst liefen sie
   als harte Streifen durchs ganze Bild. */
html[data-theme="wald"] {
  --bg:#070f0a; --surface:#0f1c14; --surface2:#16281c; --surface3:#1f3627;
  --border:#24402e; --border-s:#33563e;
  --text:#e8f5ec; --text-muted:#93b8a1; --text-faint:#628172;
  --accent:#8fd6a0; --accent-h:#6dc082; --accent-l:#bce9c6; --on-accent:#08210f;
  --glow: rgba(143,214,160,.18);
  --shadow: 0 14px 40px rgba(0,0,0,.55); color-scheme: dark;
  background: #070f0a;
}
html[data-theme="wald"] body { background: transparent; }
html[data-theme="wald"] body::before,
html[data-theme="wald"] body::after {
  content: ''; position: fixed; inset: -25%; z-index: -1; pointer-events: none;
}
/* Ebene 1: die Lichtbahnen */
html[data-theme="wald"] body::before {
  background: repeating-linear-gradient(101deg,
    transparent 0 78px,
    rgba(200,244,192,.115) 78px 112px,
    transparent 112px 130px,
    rgba(200,244,192,.06) 130px 152px,
    transparent 152px 250px);
  filter: blur(12px);
  /* oben hell, nach unten auslaufend — so „fällt" das Licht schräg ein */
  -webkit-mask-image: radial-gradient(115% 100% at 74% -10%, #000 0%, rgba(0,0,0,.6) 46%, transparent 90%);
          mask-image: radial-gradient(115% 100% at 74% -10%, #000 0%, rgba(0,0,0,.6) 46%, transparent 90%);
}
/* Ebene 2: Blätterschatten und ein warmer Schimmer am Boden */
html[data-theme="wald"] body::after {
  background:
    radial-gradient(38% 24% at 14% 20%, rgba(10,26,15,.75), transparent 72%),
    radial-gradient(32% 20% at 58% 34%, rgba(8,22,13,.68),  transparent 74%),
    radial-gradient(30% 20% at 84% 52%, rgba(10,26,15,.6),  transparent 74%),
    radial-gradient(34% 22% at 40% 66%, rgba(120,190,138,.09), transparent 72%),
    radial-gradient(28% 18% at 78% 24%, rgba(150,220,165,.08), transparent 74%),
    radial-gradient(80% 32% at 50% 106%, rgba(143,214,160,.14), transparent 76%);
  filter: blur(22px);
}
/* Zwei Animationen auf DERSELBEN Ebene: eine bewegt (transform), die andere
   hellt auf und dunkelt ab (opacity). Sie greifen sich nicht, weil jede eine
   andere Eigenschaft anfasst — und weil ihre Perioden nicht ineinander
   aufgehen (58 s / 23 s), wiederholt sich das Gesamtbild erst nach gut
   22 Minuten. Das Licht wirkt dadurch nie „getaktet". */
@keyframes waBahnen {
  0%, 100% { transform: translate3d(-1.6%, 0, 0) rotate(-.5deg); }
  35%      { transform: translate3d(  .8%, 0, 0) rotate( .2deg); }
  70%      { transform: translate3d( 2.6%, 0, 0) rotate( .6deg); }
}
/* Zartes Glimmen — als ob sich draußen Zweige vor die Sonne schieben. */
@keyframes waGlimmen {
  0%, 100% { opacity: .78; }
  30%      { opacity: 1;   }
  55%      { opacity: .68; }
  80%      { opacity: .92; }
}
@keyframes waBlaetter {
  0%, 100% { transform: translate3d( 1%, -.5%, 0) scale(1.03); }
  50%      { transform: translate3d(-2%,  1%, 0) scale(1.08); }
}
html[data-display="schoen"][data-theme="wald"] body::before {
  animation: waBahnen  58s ease-in-out infinite,
             waGlimmen 23s ease-in-out infinite;
}
html[data-display="schoen"][data-theme="wald"] body::after  { animation: waBlaetter 76s ease-in-out infinite; }

html[data-theme="wald"] .rail,
html[data-theme="wald"] .filterbar,
html[data-theme="wald"] .panel,
html[data-theme="wald"] .modal-box {
  background: rgba(15,28,20,.74);
  backdrop-filter: blur(16px) saturate(125%);
  -webkit-backdrop-filter: blur(16px) saturate(125%);
}
html[data-theme="wald"] .topbar {
  border-bottom-color: transparent;
  box-shadow: 0 1px 0 rgba(143,214,160,.20), 0 12px 32px -22px rgba(143,214,160,.4);
}

/* ───────────────────────── PORZELLAN ─────────────────────────
   Kühles Weiß mit Glasur. Einziger Effekt: ein sehr breites, sehr schwaches
   Lichtband, das in anderthalb Minuten einmal quer über die Seite zieht —
   wie eine Lampe, an der man vorbeigeht. Dazu ein Glanzsaum an der
   Oberkante der Flächen, der das Porzellanhafte macht. */
html[data-theme="porzellan"] {
  --bg:#eef1f4; --surface:#ffffff; --surface2:#e9eef3; --surface3:#dce4ec;
  --border:#dce3ea; --border-s:#bbc7d3;
  --text:#1f2730; --text-muted:#5b6876; --text-faint:#94a1ad;
  --accent:#3f5f9e; --accent-h:#31497b; --accent-l:#7a95c8; --on-accent:#ffffff;
  --glow: rgba(63,95,158,.13);
  --shadow: 0 12px 32px rgba(31,39,48,.10); color-scheme: light;
  background: #eef1f4;
}
html[data-theme="porzellan"] body { background: transparent; }
/* Ebene 1: die Glasur — ruhiger Grundschimmer */
html[data-theme="porzellan"] body::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60% 46% at 16% 4%,  rgba(255,255,255,.95), transparent 70%),
    radial-gradient(54% 42% at 92% 96%, rgba(196,212,230,.55), transparent 72%),
    linear-gradient(168deg, #f4f6f9 0%, #eaeef3 56%, #e2e8ef 100%);
}
/* Ebene 2: das wandernde Lichtband */
html[data-theme="porzellan"] body::after {
  content: ''; position: fixed; top: -30%; bottom: -30%; left: -60%; width: 55%;
  z-index: -1; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.85) 45%, transparent);
  filter: blur(40px);
  transform: translate3d(0, 0, 0);
}
@keyframes pzBand {
  0%   { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(300%, 0, 0); }
}
html[data-display="schoen"][data-theme="porzellan"] body::after { animation: pzBand 92s linear infinite; }

/* Glanzsaum an der Oberkante — deshalb zweimal, damit der Hover-Schatten
   der Herstellerkacheln erhalten bleibt statt überschrieben zu werden. */
html[data-theme="porzellan"] .mfr-card,
html[data-theme="porzellan"] .card,
html[data-theme="porzellan"] .panel,
html[data-theme="porzellan"] .modal-box,
html[data-theme="porzellan"] .filterbar,
html[data-theme="porzellan"] .note-card,
html[data-theme="porzellan"] .theme-card {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 1px 2px rgba(31,39,48,.05);
}
html[data-theme="porzellan"] .mfr-card:hover {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 10px 26px var(--glow);
}
html[data-theme="porzellan"] .topbar {
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(244,246,249,.78));
  box-shadow: inset 0 1px 0 rgba(255,255,255,1), 0 14px 26px -22px rgba(31,39,48,.4);
}

/* ───────────────────────── ACHAT ─────────────────────────
   Mittlerer Ton, warmes Grauviolett. Der Hintergrund ist ein
   Achatschnitt: konzentrische Bänder, die durch einen weichen Weichzeichner
   ineinander übergehen und beim Atmen ganz leicht die Breite ändern. Die
   Bänder entstehen aus einem einzigen repeating-radial-gradient — keine
   Bilddatei, nichts nachzuladen. */
html[data-theme="achat"] {
  --bg:#463f4c; --surface:#524a58; --surface2:#5e5566; --surface3:#6c6274;
  --border:#726780; --border-s:#8b7f99;
  --text:#f6f1f8; --text-muted:#cec4d6; --text-faint:#a197aa;
  --accent:#e8a75e; --accent-h:#d18f45; --accent-l:#f5c78f; --on-accent:#2b1a06;
  --glow: rgba(232,167,94,.18);
  --shadow: 0 12px 34px rgba(0,0,0,.28); color-scheme: dark;
  background: #463f4c;
}
html[data-theme="achat"] body { background: transparent; }
html[data-theme="achat"] body::before,
html[data-theme="achat"] body::after {
  content: ''; position: fixed; inset: -25%; z-index: -1; pointer-events: none;
}
/* Ebene 1: die Bänder */
html[data-theme="achat"] body::before {
  background: repeating-radial-gradient(ellipse 155% 115% at 8% 30%,
    rgba(255,255,255,.032) 0 88px,
    rgba(0,0,0,.036)      88px 202px);
  filter: blur(26px);
  /* Die Bänder laufen zur Mitte hin aus — sonst wirkt das Muster gleichförmig
     wie eine Tapete statt wie ein Schnitt durch einen Stein. */
  -webkit-mask-image: radial-gradient(120% 120% at 6% 26%, #000 0%, rgba(0,0,0,.55) 46%, transparent 86%);
          mask-image: radial-gradient(120% 120% at 6% 26%, #000 0%, rgba(0,0,0,.55) 46%, transparent 86%);
}
/* Ebene 2: zweiter Schnitt von der anderen Seite, dazu ein warmer Kern */
html[data-theme="achat"] body::after {
  background:
    repeating-radial-gradient(ellipse 140% 105% at 96% 86%,
      rgba(255,255,255,.024) 0 116px,
      rgba(0,0,0,.028)      116px 262px),
    radial-gradient(56% 42% at 14% 20%, rgba(232,167,94,.12), transparent 74%);
  filter: blur(30px);
}
@keyframes acAtem1 {
  0%, 100% { transform: scale(1.00) translate3d(0, 0, 0); }
  50%      { transform: scale(1.06) translate3d(1%, -1%, 0); }
}
@keyframes acAtem2 {
  0%, 100% { transform: scale(1.05) translate3d(0, 0, 0); }
  50%      { transform: scale(1.00) translate3d(-1%, 1%, 0); }
}
html[data-display="schoen"][data-theme="achat"] body::before { animation: acAtem1 62s ease-in-out infinite; }
html[data-display="schoen"][data-theme="achat"] body::after  { animation: acAtem2 86s ease-in-out infinite; }

html[data-theme="achat"] .rail,
html[data-theme="achat"] .filterbar,
html[data-theme="achat"] .panel,
html[data-theme="achat"] .modal-box {
  background: rgba(82,74,88,.76);
  backdrop-filter: blur(16px) saturate(120%);
  -webkit-backdrop-filter: blur(16px) saturate(120%);
}
html[data-theme="achat"] .topbar {
  border-bottom-color: transparent;
  box-shadow: 0 1px 0 rgba(232,167,94,.22), 0 12px 32px -22px rgba(232,167,94,.4);
}

html[style*="--accent-custom"] {
  --accent: var(--accent-custom); --accent-h: var(--accent-custom); --accent-l: var(--accent-custom);
}

/* ════════════════════════ BASE ════════════════════════ */
* { box-sizing: border-box; margin: 0; padding: 0; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-s); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }
* { scrollbar-width: thin; scrollbar-color: var(--border-s) transparent; }
html { font-size: 16px; }
body {
  background: var(--bg); color: var(--text);
  font-family: var(--font-b); font-size: .9rem; line-height: 1.55;
  min-height: 100vh; overflow-x: hidden;
}
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; color: var(--text); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

.mono { font-family: var(--font-m); }
.eyebrow {
  font-size: .66rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-muted);
}
.hl { color: var(--accent); }

/* ════════════════════════ APP-GERÜST ════════════════════════ */
#app { display: none; }
#app.ready { display: block; }

.rail {
  position: fixed; inset: 0 auto 0 0; width: 60px; z-index: 50;
  background: var(--surface); border-right: 1px solid var(--border);
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 0;
}
.rail .brand {
  width: 38px; height: 38px; border-radius: 11px; margin-bottom: 10px;
  background: var(--accent); color: var(--on-accent);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: 0 0 0 5px var(--glow);
}
.rail .brand svg { width: 24px; height: 24px; }
.rail-btn {
  width: 42px; height: 42px; border-radius: 12px; border: 1px solid transparent;
  background: transparent; color: var(--text-muted); font-size: 18px;
  display: flex; align-items: center; justify-content: center; position: relative;
  transition: background .15s, color .15s;
}
.rail-btn:hover { background: var(--surface2); color: var(--text); }
.rail-btn.active { background: var(--surface3); color: var(--accent); border-color: var(--border); }
.rail-btn .dot {
  position: absolute; top: 5px; right: 5px; width: 9px; height: 9px; border-radius: 50%;
  background: var(--accent); border: 2px solid var(--surface); display: none;
}
.rail-btn.has-dot .dot { display: block; }
.rail-ic { width: 22px; height: 22px; display: block; }
@keyframes railBlink {
  0%, 100% { color: var(--text-muted); }
  50% { color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent); }
}
@keyframes railBlinkGreen { 0%,100% { color: var(--text-muted); } 50% { color: #34d399; background: rgba(52,211,153,.18); } }
@keyframes railBlinkYellow { 0%,100% { color: var(--text-muted); } 50% { color: #f0b429; background: rgba(240,180,41,.20); } }
@keyframes railBlinkRed { 0%,100% { color: var(--text-muted); } 50% { color: #ef5d6e; background: rgba(239,93,110,.20); } }
.rail-btn.blink { animation: railBlink 1.5s ease-in-out infinite; }
.rail-btn.blink.blink-green { animation: railBlinkGreen 1.5s ease-in-out infinite; }
.rail-btn.blink.blink-yellow { animation: railBlinkYellow 1.2s ease-in-out infinite; }
.rail-btn.blink.blink-red { animation: railBlinkRed 0.9s ease-in-out infinite; }
.rail-btn.blink.active { animation: none; }
.rail .spacer { flex: 1; }
.rail-tip { position: relative; }
.rail-tip::after {
  content: attr(data-tip); position: absolute; left: 52px; top: 50%; transform: translateY(-50%);
  background: var(--surface3); border: 1px solid var(--border-s); color: var(--text);
  font-size: 12px; padding: 5px 10px; border-radius: 8px; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity .12s; z-index: 60;
}
.rail-tip:hover::after { opacity: 1; }

main { margin-left: 60px; padding: 0 32px 120px; max-width: none; width: auto; }

/* ── Topbar ── */
.topbar {
  position: sticky; top: 0; z-index: 40; margin: 0 -32px; padding: 14px 32px;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 14px; min-height: 64px;
}
.crumbs { display: flex; align-items: center; gap: 8px; font-size: .85rem; min-width: 0; flex-wrap: wrap; }
.crumbs a { color: var(--text-muted); text-decoration: none; cursor: pointer; white-space: nowrap; }
.crumbs a:hover { color: var(--accent); }
.crumbs .sep { color: var(--text-faint); }
.crumbs .cur { color: var(--text); font-weight: 700; white-space: nowrap; }
.topbar .grow { flex: 1; }
.searchwrap { position: relative; width: min(340px, 32vw); }
.searchwrap input {
  width: 100%; background: var(--surface); border: 1px solid var(--border);
  border-radius: 999px; padding: 9px 38px 9px 16px; font-size: .85rem; color: var(--text);
}
.searchwrap input::placeholder { color: var(--text-faint); }
.searchwrap input:focus { border-color: var(--accent); outline: none; }
.searchwrap .ic { position: absolute; right: 13px; top: 50%; transform: translateY(-50%); color: var(--text-faint); pointer-events: none; }
.search-results {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; max-height: 420px; overflow: auto;
  background: var(--surface2); border: 1px solid var(--border-s); border-radius: var(--radius);
  box-shadow: var(--shadow); display: none; z-index: 45;
}
.search-results.open { display: block; }
.sr-item { display: flex; align-items: center; gap: 11px; padding: 9px 13px; cursor: pointer; }
.sr-item:hover { background: var(--surface3); }
.sr-item img { width: 34px; height: 34px; object-fit: contain; border-radius: 6px; background: var(--surface); }
.sr-item .ph { width: 34px; height: 34px; border-radius: 6px; background: var(--surface); display:flex; align-items:center; justify-content:center; font-size:15px; }
.sr-item .n { font-weight: 600; font-size: .85rem; }
.sr-item .m { font-size: .7rem; color: var(--text-muted); }
.sr-empty { padding: 14px; color: var(--text-muted); font-size: .82rem; text-align: center; }

.need-pill {
  display: none; align-items: center; gap: 9px; padding: 7px 8px 7px 14px;
  background: color-mix(in srgb, var(--accent) 14%, var(--surface));
  border: 1px solid var(--accent); border-radius: 999px; font-size: .78rem; font-weight: 700;
  color: var(--text); cursor: pointer; white-space: nowrap;
}
.need-pill.on { display: inline-flex; }
.need-pill .x {
  width: 20px; height: 20px; border-radius: 50%; border: none; background: var(--surface3);
  color: var(--text-muted); font-size: 11px; display: flex; align-items: center; justify-content: center;
}
.need-pill .x:hover { background: var(--danger); color: #fff; }
.need-pill svg { width: 26px; height: 15px; }

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--surface2); border: 1px solid var(--border); color: var(--text);
  padding: 8px 15px; border-radius: var(--radius-s); font-size: .8rem; font-weight: 600;
  transition: background .15s, border-color .15s, transform .08s;
}
.btn:hover { background: var(--surface3); border-color: var(--border-s); }
.btn:active { transform: scale(.97); }
.btn.primary { background: var(--accent); color: var(--on-accent); border-color: transparent; }
.btn.primary:hover { background: var(--accent-h); }
.btn.ghost { background: transparent; }
.btn.danger:hover { border-color: var(--danger); color: var(--danger); }
.btn.sm { padding: 5px 10px; font-size: .72rem; }
.btn[disabled] { opacity: .45; pointer-events: none; }
.iconbtn {
  width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface2); border: 1px solid var(--border); border-radius: 9px;
  color: var(--text-muted); font-size: 14px;
}
.iconbtn:hover { color: var(--text); border-color: var(--border-s); }

/* ════════════════════════ START / LADEN ════════════════════════ */
#view-start { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 30px; }
.start-card {
  width: min(560px, 94vw); background: var(--surface); border: 1px solid var(--border);
  border-radius: 22px; padding: 42px 44px; box-shadow: var(--shadow); position: relative; overflow: hidden;
}
.start-card .curve-bg { position: absolute; inset: auto 0 0 0; height: 110px; opacity: .5; pointer-events: none; }
.start-card h1 { font-family: var(--font-d); font-size: 2rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; margin: 14px 0 8px; }
.start-card p { color: var(--text-muted); font-size: .88rem; margin-bottom: 26px; }
.start-actions { display: flex; gap: 10px; flex-wrap: wrap; position: relative; z-index: 2; }
.start-status { margin-top: 18px; font-size: .78rem; color: var(--text-faint); font-family: var(--font-m); min-height: 18px; }

.loader { display: inline-block; width: 16px; height: 16px; border: 2px solid var(--border-s); border-top-color: var(--accent); border-radius: 50%; animation: spin .7s linear infinite; vertical-align: -3px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ════════════════════════ HOME: HERSTELLER ════════════════════════ */
.page-head { padding: 30px 0 6px; }
.page-head h1 { font-family: var(--font-d); font-size: clamp(1.6rem, 3vw, 2.3rem); font-weight: 800; letter-spacing: -.025em; line-height: 1.08; }
.page-head h1 .h1-ic { width: .95em; height: .95em; vertical-align: -.1em; color: var(--accent); margin-right: .12em; }
.page-head .sub { color: var(--text-muted); font-size: .86rem; margin-top: 6px; }
.head-curve { width: 150px; height: 14px; display: block; margin-top: 12px; }

.mfr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(235px, 1fr)); gap: 14px; margin-top: 22px; }
.mfr-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 20px 20px 16px; cursor: pointer; position: relative; overflow: hidden;
  transition: transform .14s, border-color .14s, box-shadow .14s;
}
.mfr-card:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: 0 10px 26px var(--glow); }
.mfr-card .letter {
  font-family: var(--font-d); font-size: 2rem; font-weight: 800; letter-spacing: -.03em;
  width: 52px; height: 52px; border-radius: 14px; background: var(--surface3);
  display: flex; align-items: center; justify-content: center; color: var(--accent); margin-bottom: 14px;
}
.mfr-card .name { font-weight: 800; font-size: 1rem; letter-spacing: -.01em; }
.mfr-card .count { font-size: .74rem; color: var(--text-muted); margin-top: 3px; font-family: var(--font-m); }
.mfr-card .count b { color: var(--accent); font-size: .85rem; }
.mfr-card .mini-eol { position: absolute; top: 14px; right: 14px; display: flex; gap: 5px; }
.mini-eol span { width: 8px; height: 8px; border-radius: 50%; display: block; }

/* ════════════════════════ GERÄTE-LISTE ════════════════════════ */
.filterbar-row { display: flex; gap: 10px; align-items: stretch; flex-wrap: wrap; margin: 18px 0 8px; position: sticky; top: 72px; z-index: 30; }
.filterbar {
  display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 13px 16px; flex: 1; min-width: 0;
}
.filterbar .grow { flex: 1; min-width: 8px; }
.catbar {
  display: flex; gap: 7px; align-items: center; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 13px 14px;
}
.catbtn {
  display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 700;
  border: 1px solid var(--border); border-radius: 10px; padding: 9px 14px; cursor: pointer;
  background: var(--surface2); color: var(--text); white-space: nowrap;
}
.catbtn:hover { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--surface2)); }
.fgroup { display: flex; flex-direction: column; gap: 4px; }
.fgroup label { font-size: .62rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint); }
.fgroup input, .fgroup select {
  background: var(--surface2); border: 1px solid var(--border); border-radius: 8px;
  padding: 7px 11px; font-size: .82rem; min-width: 130px;
}
.fgroup input:focus, .fgroup select:focus { border-color: var(--accent); outline: none; }
.f-toggles { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }
.tgl {
  display: inline-flex; align-items: center; gap: 7px; font-size: .74rem; font-weight: 600;
  border: 1px solid var(--border); border-radius: 999px; padding: 6px 12px; cursor: pointer;
  background: var(--surface2); color: var(--text-muted); user-select: none;
}
.tgl .sw { width: 8px; height: 8px; border-radius: 50%; background: var(--text-faint); }
.tgl.on { color: var(--text); border-color: var(--border-s); }
.tgl.on.amber .sw { background: #a855f7; }
.tgl.on.red .sw { background: #9ca3af; }
.tgl.on.teal .sw { background: var(--accent); }

.fam-block { margin-top: 26px; }
.fam-head {
  display: flex; align-items: center; gap: 12px; padding-bottom: 8px; margin-bottom: 13px;
  border-bottom: 1px solid var(--border); position: relative;
}
.fam-head h3 { font-family: var(--font-d); font-size: 1.12rem; font-weight: 800; letter-spacing: -.01em; }
.fam-head .fam-n { font-family: var(--font-m); font-size: .72rem; color: var(--text-faint); }
.fam-head .acts { margin-left: auto; display: flex; gap: 7px; }
.tech-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; align-items: stretch; }
/* Einzel-Familie-Banner */
.onlyfam-banner { display: flex; align-items: center; gap: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 16px; margin-bottom: 18px; font-size: .9rem; }
.onlyfam-banner button { margin-left: auto; }
/* Spotlight – bündig an unterem/rechtem Bildschirmrand, kein Kachel-Look */
.spotlight { position: fixed; left: 60px; right: 0; bottom: 0; height: clamp(230px, 32vh, 380px); cursor: pointer; z-index: 30; background: none; border: none; border-radius: 0; overflow: hidden; }
.spot-img { position: absolute; right: 0; bottom: 0; height: 100%; aspect-ratio: 3 / 1; background-size: cover; background-position: center bottom; transition: opacity .45s ease, transform 6s ease; opacity: 1;
  /* EIN diagonaler Verlauf: opak unten-rechts → transparent nach oben-links */
  -webkit-mask-image: linear-gradient(122deg, transparent 17%, #000 58%);
  mask-image: linear-gradient(122deg, transparent 17%, #000 58%); }
.spotlight:hover .spot-img { transform: scale(1.03); }
.spot-text { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 10px;
  padding: 0 24px clamp(24px, 5vh, 60px) clamp(33%, 37vw, 46%); z-index: 1; pointer-events: none; }
.spot-fam { font-family: var(--font-d); font-size: clamp(2.4rem, 5.2vw, 4.6rem); font-weight: 800; line-height: .98; letter-spacing: -.035em;
  background: linear-gradient(180deg, #fff 30%, color-mix(in srgb, var(--text) 75%, transparent)); -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 2px 24px rgba(0,0,0,.35); }
.spot-cta { align-self: flex-start; margin-left: 2px; font-family: var(--font-d); font-size: clamp(1rem, 1.7vw, 1.5rem); font-weight: 700; color: var(--accent);
  letter-spacing: .12em; display: inline-flex; align-items: center; gap: 9px; transition: letter-spacing .2s ease; }
.spot-cta::before { content: ''; width: clamp(24px, 3vw, 48px); height: 2px; background: var(--accent); border-radius: 2px; }
.spotlight:hover .spot-cta { letter-spacing: .16em; }
/* Helle Themes: dunkle Schrift mit hellem Halo statt Weiß-Verlauf – guter Kontrast überall.
   ACHTUNG: Diese Liste muss ALLE Themes mit "color-scheme: light" enthalten, sonst steht
   im Spotlight weiße Schrift auf hellem Grund. tests/themes_test.mjs wacht darüber. */
html[data-theme="sand"] .spot-fam, html[data-theme="lavendel"] .spot-fam,
html[data-theme="papier"] .spot-fam, html[data-theme="perlmutt"] .spot-fam,
html[data-theme="porzellan"] .spot-fam, html[data-theme="kiesel"] .spot-fam,
html[data-theme="leinen"] .spot-fam, html[data-theme="salz"] .spot-fam,
html[data-theme="matcha"] .spot-fam, html[data-theme="mandel"] .spot-fam {
  background: none; color: var(--text); -webkit-text-fill-color: var(--text);
  text-shadow: 0 1px 3px rgba(255,255,255,.85), 0 0 18px rgba(255,255,255,.6);
}
html[data-theme="sand"] .spot-cta, html[data-theme="lavendel"] .spot-cta,
html[data-theme="papier"] .spot-cta, html[data-theme="perlmutt"] .spot-cta,
html[data-theme="porzellan"] .spot-cta, html[data-theme="kiesel"] .spot-cta,
html[data-theme="leinen"] .spot-cta, html[data-theme="salz"] .spot-cta,
html[data-theme="matcha"] .spot-cta, html[data-theme="mandel"] .spot-cta {
  text-shadow: 0 1px 3px rgba(255,255,255,.8);
}
/* Crop-Modal */
.crop-modal { position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,.7); display: none; align-items: center; justify-content: center; }
.crop-box { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 22px; width: min(620px, 92vw); }
.crop-box h3 { font-family: var(--font-d); font-size: 1.15rem; font-weight: 800; margin-bottom: 4px; }
.crop-hint { font-size: .8rem; color: var(--text-muted); margin-bottom: 14px; }
.crop-frame { position: relative; width: 100%; aspect-ratio: 3 / 1; background: #000; border-radius: 10px; overflow: hidden; touch-action: none; cursor: grab; }
.crop-frame:active { cursor: grabbing; }
.crop-frame img { position: absolute; user-select: none; -webkit-user-drag: none; max-width: none; }
.crop-zoomrow { display: flex; align-items: center; gap: 10px; margin: 14px 0; }
.crop-zoomrow input[type=range] { flex: 1; accent-color: var(--accent); }
.crop-actions { display: flex; justify-content: flex-end; gap: 10px; }

.dev-card {
  background: var(--surface2); border: 1px solid var(--border); border-radius: 12px;
  display: flex; align-items: stretch; cursor: pointer; position: relative; overflow: hidden;
  flex: 0 1 108px; min-width: 60px; height: 126px;
  transition: flex-basis .28s cubic-bezier(.2,.7,.2,1), border-color .13s;
}
.tech-row .dev-card:hover { flex: 0 0 408px; border-color: var(--accent); z-index: 5; box-shadow: var(--shadow); }
.dev-card:not(:hover):not(.col-open) .status-flag { display: none; }
/* Phase-Out jetzt Lila */
.dev-card.eol { border-color: color-mix(in srgb, #a855f7 60%, var(--border)); }
.dev-card.obs { border-color: #9ca3af; opacity: .68; }
/* Marge-Randfärbung: I sehr lohnend (grün) → IV kaum noch (rot).
   2px-Rand, damit die Färbung deutlich sichtbar ist; Hover/Status haben Vorrang. */
.dev-card.marge-I   { border-color: #22c55e; border-width: 2px; }
.dev-card.marge-II  { border-color: #eab308; border-width: 2px; }
.dev-card.marge-III { border-color: #f97316; border-width: 2px; }
.dev-card.marge-IV  { border-color: #ef4444; border-width: 2px; }
/* Status sticht durch (Phase-Out/Veraltet wichtiger als Marge) */
.dev-card.eol.marge-I, .dev-card.eol.marge-II, .dev-card.eol.marge-III, .dev-card.eol.marge-IV { border-color: color-mix(in srgb, #a855f7 60%, var(--border)); }
.dev-card.obs.marge-I, .dev-card.obs.marge-II, .dev-card.obs.marge-III, .dev-card.obs.marge-IV { border-color: #9ca3af; }
.dev-card.marge-I:hover, .dev-card.marge-II:hover, .dev-card.marge-III:hover, .dev-card.marge-IV:hover { border-color: var(--accent); }
.dt-main { flex: 0 0 108px; width: 108px; height: 100%; display: flex; flex-direction: column; box-sizing: border-box; }
.dev-card .thumb {
  flex: 1; width: 100%; min-height: 0; background: var(--surface2); box-sizing: border-box; padding: 10px;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.dev-card .thumb img { width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .25s; }
.dev-card .thumb img.ld { opacity: 1; }
.dt-name { flex: 0 0 30px; height: 30px; box-sizing: border-box; font-weight: 700; font-size: .66rem; line-height: 1.1; text-align: center; padding: 2px 5px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; align-items: center; }
.dt-brief { flex: 1; min-width: 0; padding: 10px 14px; opacity: 0; transition: opacity .16s ease .05s;
  display: flex; flex-direction: column; gap: 8px; overflow: hidden; justify-content: center; }
.dt-row { display: flex; gap: 12px; align-items: center; min-height: 0; }
.dt-radar { flex: 0 0 78px; width: 78px; height: 78px; }
.dt-facts { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; font-size: .8rem; color: var(--text-muted); font-family: var(--font-m); }
.dt-facts span { white-space: nowrap; }
.dt-dock { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; font-size: 12px; }
.dev-card mark { background: color-mix(in srgb, var(--accent) 35%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; }
.status-flag {
  position: absolute; top: -7px; right: 10px; font-size: .56rem; font-weight: 800; letter-spacing: .08em;
  padding: 3px 8px; border-radius: 5px; text-transform: uppercase; z-index: 3;
}
.status-flag.eol { background: #a855f7; color: #fff; }
.status-flag.obs { background: #9ca3af; color: #1f2937; }
.fit-chip {
  position: absolute; bottom: -8px; right: 10px; z-index: 3;
  font-family: var(--font-m); font-size: .6rem; font-weight: 700;
  padding: 3px 8px; border-radius: 6px; border: 1px solid var(--border-s); background: var(--surface3);
  display: inline-flex; align-items: center; gap: 5px;
}
.fit-chip .d { width: 7px; height: 7px; border-radius: 50%; }
.fit-chip.good .d { background: var(--ok); } .fit-chip.good { border-color: color-mix(in srgb, var(--ok) 50%, var(--border)); }
.fit-chip.limited .d { background: var(--warn); } .fit-chip.limited { border-color: color-mix(in srgb, var(--warn) 50%, var(--border)); }

.empty-note { padding: 50px 20px; text-align: center; color: var(--text-muted); font-size: .86rem; }
.empty-note .big { font-size: 2rem; display: block; margin-bottom: 10px; }

/* ── Familien-Status-Popover ── */
.pop {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 35; width: 270px;
  background: var(--surface2); border: 1px solid var(--border-s); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 15px; display: none;
}
.pop.open { display: block; }
.pop h4 { font-size: .82rem; margin-bottom: 10px; }
.pop label { display: flex; align-items: center; gap: 8px; font-size: .78rem; padding: 5px 0; cursor: pointer; }
.pop input[type="checkbox"] { accent-color: var(--accent); width: 15px; height: 15px; }
.pop input[type="date"] { width: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: 7px; padding: 6px 9px; font-size: .78rem; margin: 5px 0; }


/* Familien-Popup: Phase-Out je Gerät auswählbar */
.pop-po{min-width:300px;}
.fam-pod-row{display:flex;flex-direction:column;align-items:stretch;gap:5px;margin:6px 0 12px;font-size:.82em;}
.fam-pod-row>span{color:var(--muted,#7a7a7a);}
.fam-pod-row input[type=date]{width:100%;box-sizing:border-box;}
.fam-po-head{display:flex;align-items:center;justify-content:space-between;font-size:.72em;text-transform:uppercase;letter-spacing:.04em;color:var(--muted,#7a7a7a);margin-bottom:4px;}
.fam-po-all{background:none;border:none;color:var(--accent,#2f7d4f);cursor:pointer;font:inherit;font-size:1em;text-decoration:underline;padding:0;}
.fam-po-list{max-height:230px;overflow:auto;display:flex;flex-direction:column;gap:2px;margin-bottom:8px;border:1px solid var(--line,rgba(128,128,128,.18));border-radius:8px;padding:6px;}
.fam-po-dev{display:flex;align-items:center;gap:8px;padding:3px 4px;border-radius:6px;cursor:pointer;font-size:.88em;}
.fam-po-dev:hover{background:var(--panel,rgba(128,128,128,.1));}
.fam-ob-line{display:flex;align-items:center;gap:8px;font-size:.85em;margin-top:4px;}

/* Farbbilder per Drag-and-Drop auf eine Gerätekachel ziehen */
.dev-card.drop-hot { outline: 2px dashed var(--accent, #4a5d23); outline-offset: -3px; background: color-mix(in srgb, var(--accent, #4a5d23) 10%, transparent); }

/* Sortiermodus: freies 2D-Grid per Strg+Halten */
.sort-bar { display:flex; align-items:center; gap:12px; justify-content:space-between; margin-bottom:10px;
  background: color-mix(in srgb, var(--accent) 12%, var(--surface)); border:1px solid var(--accent); border-radius:10px; padding:8px 12px; font-size:.82rem; color:var(--text); }
.sort-grid { display:grid; gap:6px; align-items:stretch; margin-bottom:14px; overflow-x:auto; padding-bottom:4px; }
.sort-rowlabel { display:flex; align-items:center; justify-content:center; font-size:.7rem; font-weight:800; color:var(--text-muted); }
.sort-cell { min-height:104px; border:1.5px dashed color-mix(in srgb, var(--accent) calc(var(--bo, 0.12) * 100%), transparent); border-radius:10px; display:flex; align-items:center; justify-content:center; }
.sort-cell.over { border-color:var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.sort-tile { width:100%; height:100%; display:flex; flex-direction:column; align-items:center; gap:3px; padding:6px; cursor:grab; border-radius:8px; background:var(--surface); border:1px solid var(--border); box-sizing:border-box; }
.sort-tile:active { cursor:grabbing; }
.sort-tile .st-img { flex:1; width:100%; min-height:0; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.sort-tile .st-img img { max-width:100%; max-height:100%; object-fit:contain; }
.sort-tile .st-name { font-size:.6rem; line-height:1.05; text-align:center; color:var(--text-muted); max-height:2.1em; overflow:hidden; }

/* Familien als Spalten-Raster (Standard) + Spalten-Hover (ganze Spalte geht nach rechts auf) */
.fam-grid { display: grid; gap: 6px; margin-bottom: 10px; align-items: start; justify-content: start;
  --fg-base: 108px; --fg-open: 408px;
  transition: grid-template-columns .28s cubic-bezier(.2,.7,.2,1); }
.fam-grid .dev-card { flex: none; width: 100%; min-width: 0; height: 126px; transition: border-color .13s; }
.fam-grid .dev-card .dt-main { flex: 0 0 108px; width: 108px; }
.fam-grid .dev-card .dt-brief { opacity: 0; }
.fam-grid .dev-card.col-open { border-color: var(--accent); box-shadow: var(--shadow); z-index: 3; }
.fam-grid .dev-card.col-open .dt-brief { opacity: 1; }
.fam-grid .fg-empty { height: 126px; border-radius: 12px; }

/* Umsortieren per Strg+Ziehen im Raster */
.fam-grid.sorting .dev-card { cursor: grab; }
.fam-grid.sorting .dev-card:active { cursor: grabbing; }
.fam-grid.sorting .fg-empty { border: 1.5px dashed color-mix(in srgb, var(--accent) 45%, transparent); border-radius: 12px; }
.fam-grid .drop-over { outline: 2px solid var(--accent); outline-offset: -2px; background: color-mix(in srgb, var(--accent) 12%, transparent); border-radius: 12px; }
/* ════════════════════════ DETAIL ════════════════════════ */
.detail-head { display: flex; align-items: flex-start; gap: 18px; padding: 28px 0 14px; flex-wrap: wrap; }
.detail-head .titles { min-width: 0; }
.detail-head h1 { font-family: var(--font-d); font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 800; letter-spacing: -.025em; line-height: 1.05; }
.detail-head .mfr-badge {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 9px;
  background: var(--surface2); border: 1px solid var(--border); border-radius: 999px;
  padding: 4px 13px; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-muted); cursor: pointer;
}
.detail-head .mfr-badge:hover { color: var(--accent); border-color: var(--accent); }
.status-pill {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 9px; margin-left: 8px;
  border-radius: 999px; padding: 4px 13px; font-size: .7rem; font-weight: 800; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface2); color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .06em; position: relative;
}
.status-pill.eol { border-color: #a855f7; color: #a855f7; }
.status-pill.obs { border-color: #9ca3af; color: #9ca3af; }
.detail-head .acts { margin-left: auto; display: flex; gap: 9px; flex-wrap: wrap; }
.price-chip { display: inline-flex; align-items: baseline; gap: 6px; vertical-align: middle; font-family: var(--font-d); font-size: 1rem; font-weight: 800; color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent); padding: 3px 11px; border-radius: 10px; margin-left: 6px; }
.price-chip-sub { font-family: var(--font-m); font-size: .6rem; font-weight: 600; color: var(--text-muted); letter-spacing: .02em; }
.price-seg-wrap { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.seg.sm button { font-size: .72rem; padding: 4px 9px; }
.price-row { display: flex; align-items: center; justify-content: space-between; padding: 5px 9px; border-radius: 7px; font-size: .82rem; }
.price-row.active { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.price-row .k { color: var(--text-muted); }
.price-row.active .k { color: var(--text); font-weight: 600; }
.price-row .v { font-weight: 700; }
.price-row.active .v { color: var(--accent); }
.price-src { margin-top: 8px; font-size: .66rem; color: var(--text-faint); }
.price-meta { margin-top: 4px; font-size: .68rem; color: var(--text-muted); }
.price-variants-note { font-size: .74rem; color: var(--text-muted); margin-bottom: 10px; line-height: 1.5; }
.price-variant { border: 1px solid var(--border); border-radius: 10px; padding: 9px 11px; margin-bottom: 9px; }
.price-variant-h { font-size: .72rem; font-weight: 700; color: var(--accent); margin-bottom: 5px; letter-spacing: .01em; }
.altname-row { display: flex; gap: 8px; align-items: center; margin-bottom: 7px; }
.altname-row input { background: var(--surface2); border: 1px solid var(--border); border-radius: 8px; padding: 7px 11px; font-size: .82rem; color: var(--text); }
.altname-mfr { flex: 0 0 38%; }
.altname-name { flex: 1; }
.altname-row input:focus { border-color: var(--accent); outline: none; }
.altname-del { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 7px; border: 1px solid var(--border); background: var(--surface2); color: var(--text-muted); cursor: pointer; }
.altname-del:hover { border-color: var(--danger); color: var(--danger); }
.custom-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 14px; }
.custom-sw { display: flex; align-items: center; gap: 9px; font-size: .8rem; color: var(--text-muted); cursor: pointer; }
.custom-sw input[type=color] { width: 38px; height: 30px; border: 1px solid var(--border); border-radius: 8px; background: none; cursor: pointer; padding: 2px; }
.custom-preview { border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; background: var(--bg); }
.cp-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.cp-h { background: var(--surface2); padding: 9px 13px; font-weight: 700; font-size: .82rem; color: var(--text); border-bottom: 1px solid var(--border); }
.cp-b { padding: 13px; display: flex; flex-direction: column; gap: 9px; }
.cp-b p { font-size: .85rem; color: var(--text); margin: 0; }
.cp-b a { color: var(--accent); }
.cp-row { display: flex; justify-content: space-between; font-size: .8rem; color: var(--text); border-bottom: 1px dotted var(--border); padding-bottom: 5px; }
.cp-k { color: var(--text-muted); }
.cp-btn { align-self: flex-start; background: var(--accent); color: var(--on-accent); border: none; border-radius: 8px; padding: 7px 14px; font-size: .8rem; font-weight: 700; cursor: pointer; }
.cp-muted { font-size: .72rem; color: var(--text-faint); }
.bf-opts { display: flex; flex-direction: column; gap: 9px; padding: 6px 2px 14px; }
.bf-opt { display: flex; align-items: center; gap: 10px; font-size: .9rem; color: var(--text); cursor: pointer; padding: 9px 12px; border: 1px solid var(--border); border-radius: 10px; }
.bf-opt:hover { border-color: var(--accent); }
.bf-opt input { width: 17px; height: 17px; accent-color: var(--accent); }
.bf-cnt { margin-left: auto; font-family: var(--font-m); font-size: .72rem; color: var(--text-faint); background: var(--surface2); padding: 1px 8px; border-radius: 6px; }
.modal-acts { display: flex; justify-content: flex-end; gap: 10px; margin-top: 4px; }

.detail-grid { display: grid; grid-template-columns: 330px 1fr; gap: 16px; align-items: start; }
@media (max-width: 1020px) { .detail-grid { grid-template-columns: 1fr; } }
.dcol { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
}
.card-h {
  padding: 11px 17px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 10px;
  font-size: .68rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: var(--text-muted);
}
.card-h .right { margin-left: auto; display: flex; gap: 6px; }
.card-b { padding: 16px 17px; }

.carousel { position: relative; background: var(--surface2); }
.carousel .main {
  width: 100%; height: 250px; object-fit: contain; display: block; cursor: zoom-in; padding: 14px;
}
.carousel .nav {
  position: absolute; top: 50%; transform: translateY(-50%); width: 32px; height: 32px;
  border-radius: 50%; border: 1px solid var(--border-s); background: var(--surface3); color: var(--text);
  font-size: 14px; display: flex; align-items: center; justify-content: center; opacity: .85;
}
.carousel .nav:hover { background: var(--accent); color: var(--on-accent); }
.carousel .nav.l { left: 9px; } .carousel .nav.r { right: 9px; }
.carousel .clabel {
  position: absolute; bottom: 9px; left: 50%; transform: translateX(-50%);
  background: var(--surface3); border: 1px solid var(--border-s); border-radius: 999px;
  padding: 3px 13px; font-size: .7rem; font-weight: 600;
}
.carousel .cdots { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); display: flex; gap: 5px; }
.carousel .cdots i { width: 6px; height: 6px; border-radius: 50%; background: var(--border-s); }
.carousel .cdots i.on { background: var(--accent); }
/* 3D-Farbkarussell (schön-Modus) — oben, mittig über dem Layout */
.detail-hero { margin-bottom: 16px; display: flex; justify-content: center; }
.carousel3d-wrap { width: 100%; max-width: 760px; }
.carousel3d { position: relative; height: 300px; perspective: 1300px; outline: none; overflow: hidden; cursor: grab; touch-action: pan-y; }
.carousel3d:active { cursor: grabbing; }
.c3d-stage { position: absolute; inset: 0; transform-style: preserve-3d; }
.c3d-item { position: absolute; top: 50%; left: 50%; width: 230px; height: 230px; transition: transform .42s cubic-bezier(.22,.61,.36,1), opacity .42s ease; cursor: pointer; }
.c3d-card { width: 100%; height: 100%; border-radius: 16px; background: transparent; border: none; display: flex; align-items: center; justify-content: center; overflow: visible; }
.c3d-item.current .c3d-card { border: none; box-shadow: none; }
.c3d-card img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 12px 22px rgba(0,0,0,.4)); }
.c3d-ph { font-size: 3rem; opacity: .5; }
.c3d-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 120; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--border-s); background: var(--surface); color: var(--text); font-size: 19px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.c3d-nav:hover { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.c3d-nav.l { left: 10px; } .c3d-nav.r { right: 10px; }
.c3d-caption { position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%); z-index: 120; text-align: center; pointer-events: none; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.c3d-name { font-weight: 700; font-size: .9rem; color: var(--text); background: color-mix(in srgb, var(--surface) 82%, transparent); padding: 3px 12px; border-radius: 8px; }
.c3d-color { font-size: .72rem; color: var(--text-muted); background: color-mix(in srgb, var(--surface) 70%, transparent); padding: 1px 9px; border-radius: 6px; }
.c3d-hmv { font-family: var(--font-m); font-size: .68rem; font-weight: 700; color: var(--accent); background: color-mix(in srgb, var(--surface) 70%, transparent); padding: 1px 9px; border-radius: 6px; }
.img-ph { height: 250px; display: flex; flex-direction: column; gap: 8px; align-items: center; justify-content: center; color: var(--text-faint); font-size: .8rem; }
.img-ph .e { font-size: 2.2rem; }

.spec-row { display: flex; align-items: baseline; gap: 12px; padding: 9px 0; border-bottom: 1px dashed var(--border); }
.spec-row:last-child { border-bottom: none; }
.spec-row .k { font-size: .64rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); width: 105px; flex-shrink: 0; }
.spec-row .v { font-size: .86rem; font-weight: 600; }
.spec-row .v.mono { font-family: var(--font-m); }
.spec-row .v .conflict { color: var(--danger); font-size: .72rem; font-weight: 600; display: block; }
.kanal-big { font-family: var(--font-m); font-size: 1.3rem; font-weight: 700; color: var(--accent); }
.kanal-big sup { font-size: .58rem; color: var(--text-muted); margin-left: 4px; font-family: var(--font-b); }

.hexwrap { padding: 8px 10px 4px; position: relative; }
.hex-score {
  position: absolute; right: 16px; bottom: 14px; background: var(--surface2);
  border: 1px solid var(--border-s); border-radius: 11px; padding: 6px 14px; text-align: center;
}
.hex-score .v { font-family: var(--font-m); font-size: 1.25rem; font-weight: 700; color: var(--accent); }
.hex-score .l { font-size: .6rem; color: var(--text-muted); }

.addon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.addon {
  background: var(--surface2); border: 1px solid var(--border); border-radius: 11px; padding: 10px;
  display: flex; flex-direction: column; align-items: center; gap: 7px; text-align: center;
}
.addon img { width: 100%; height: 58px; object-fit: contain; cursor: zoom-in; }
.addon .ph { height: 58px; display: flex; align-items: center; justify-content: center; font-size: 22px; }
.addon span { font-size: .7rem; font-weight: 600; line-height: 1.3; }
.addon-img { position: relative; width: 100%; }
.acc-price {
  position: absolute; right: 2px; bottom: 2px; background: var(--accent); color: #07210f;
  font-size: .64rem; font-weight: 800; padding: 2px 6px; border-radius: 7px; cursor: pointer;
  font-family: var(--font-d); line-height: 1.2; white-space: nowrap; max-width: 95%;
}
.acc-price:empty::before { content: '+ Preis'; }
.acc-price.man { background: var(--warn); color: #221500; }
.acc-price .acc-price-inp { width: 56px; background: #fff; border: none; border-radius: 5px; padding: 1px 4px; font-size: .66rem; text-align: right; color: #111; }

.rec-select {
  width: 100%; background: var(--surface2); border: 1px solid var(--border); border-radius: 9px;
  padding: 9px 12px; font-size: .85rem; font-weight: 600; margin-bottom: 12px;
}
.rec-imgbox { text-align: center; margin-top: 10px; }
.rec-imgbox img { max-width: 150px; max-height: 95px; object-fit: contain; }
.rec-fitline { font-family: var(--font-m); font-size: .68rem; margin-top: 8px; text-align: center; color: var(--text-muted); }
.rec-hmv { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-top: 10px; }
.rec-hmv-l { font-size: .58rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); }
.rec-hmv-v { font-family: var(--font-m); font-size: .84rem; font-weight: 700; color: var(--accent); }
.cat-hmv { margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--border); }
.cat-hmv .eyebrow { display: block; margin-bottom: 10px; }
.cat-hmv-grid { display: flex; flex-direction: column; gap: 6px; }
.cat-hmv-row { display: flex; align-items: center; gap: 10px; }
.cat-hmv-dev { flex: 0 0 240px; font-size: .8rem; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-hmv-row input { flex: 1; background: var(--surface2); border: 1px solid var(--border); border-radius: 8px; padding: 7px 11px; font-family: var(--font-m); font-size: .8rem; color: var(--text); }
.cat-hmv-row input:focus { border-color: var(--accent); outline: none; }
.rec-fitline b.good { color: var(--ok); } .rec-fitline b.limited { color: var(--warn); } .rec-fitline b.poor { color: var(--danger); }

.feat-item { border-bottom: 1px dashed var(--border); padding: 11px 0; }
.feat-item:last-child { border-bottom: none; }
.feat-item .t { font-weight: 700; font-size: .86rem; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.feat-item .desc { color: var(--text-muted); font-size: .8rem; margin-top: 3px; }
.lvl-chips { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.lvl-chips i {
  font-style: normal; font-family: var(--font-m); font-size: .62rem; padding: 2px 8px;
  border-radius: 5px; background: var(--surface3); border: 1px solid var(--border); color: var(--text-muted);
}
.lvl-chips i.top { background: color-mix(in srgb, var(--accent) 18%, var(--surface3)); color: var(--accent); border-color: var(--accent); }
.feat-tag { font-family: var(--font-m); font-size: .6rem; font-weight: 700; padding: 1px 7px; border-radius: 5px; background: color-mix(in srgb, var(--accent) 14%, var(--surface3)); color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border)); text-transform: lowercase; letter-spacing: .02em; }

.notes-area {
  width: 100%; min-height: 110px; background: var(--surface2); border: 1px solid var(--border);
  border-radius: 10px; padding: 12px 14px; font-size: .86rem; line-height: 1.6; resize: vertical;
}
.notes-area:focus { border-color: var(--accent); outline: none; }
.save-hint { font-size: .68rem; color: var(--text-faint); font-family: var(--font-m); margin-top: 6px; min-height: 14px; }

/* ════════════════════════ VERGLEICH ════════════════════════ */
.dock {
  position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 60;
  background: var(--surface2); border: 1px solid var(--border-s); border-radius: 18px;
  box-shadow: var(--shadow); padding: 11px 13px; display: none; align-items: center; gap: 11px;
}
.dock.open { display: flex; }
.dock-slot {
  min-width: 165px; max-width: 215px; height: 54px; border-radius: 12px; position: relative;
  display: flex; align-items: center; gap: 9px; padding: 0 11px;
}
.dock-slot.empty { border: 2px dashed var(--border-s); color: var(--text-faint); font-size: .72rem; justify-content: center; }
.dock-slot.filled { border: 2px solid var(--accent); background: var(--surface); }
.dock-slot img { width: 38px; height: 38px; object-fit: contain; }
.dock-slot .t { min-width: 0; }
.dock-slot .t .m { font-size: .58rem; color: var(--accent); font-weight: 800; text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dock-slot .t .n { font-size: .76rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dock-slot .rm {
  position: absolute; top: -8px; right: -8px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--danger); color: #fff; border: none; font-size: 10px; display: none; align-items: center; justify-content: center;
}
.dock-slot.filled:hover .rm { display: flex; }
.dock-vs { font-family: var(--font-d); font-weight: 800; color: var(--text-faint); font-size: .8rem; }
/* Der dritte Platz ist freiwillig — verglichen wird schon ab zwei Geräten.
   Deshalb steht er schmaler und blasser da als die beiden Pflichtplätze. */
#dock-3.empty { min-width: 140px; opacity: .72; }
.dock-slot .opt { font-size: .66rem; opacity: .8; }
/* Mit drei Plätzen wird die Leiste rund 990 px breit. Auf schmaleren
   Fenstern würde sie links und rechts aus dem Bild laufen, weil sie fest
   mittig sitzt — deshalb dürfen die Plätze dort enger werden. */
@media (max-width: 1080px) {
  .dock { padding: 9px 11px; gap: 8px; }
  .dock-slot { min-width: 126px; max-width: 168px; padding: 0 8px; }
  .dock-slot img { width: 32px; height: 32px; }
  #dock-3.empty { min-width: 104px; }
}


/* ════════════════════ VERGLEICHS-AUFBAU ════════════════════
   Drei Zeilen von grob nach fein: Gesamtbild + Zahlen, dann die Paare
   (nur bei drei Geräten), dann jedes Gerät für sich. Aufgebaut in
   vergleich.js → buildCompareBoard(). Dieselben Klassennamen gibt es in
   der Druckvorlage in drucken.js → printHtml(); wer hier etwas umbenennt,
   muss dort mit. */
.cmp-board { display: flex; flex-direction: column; gap: 16px; }
.cmp-row { display: grid; gap: 14px; align-items: start; }
.cmp-row-2 { grid-template-columns: 1fr 1fr; }
.cmp-row-3 { grid-template-columns: repeat(3, 1fr); }
.cmp-cell {
  min-width: 0; background: var(--surface2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px 13px 10px;
}
.cmp-cell-tab { display: flex; flex-direction: column; justify-content: center; }
.cmp-cap {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px;
  font-size: .76rem; font-weight: 800; letter-spacing: .01em; margin-bottom: 9px; text-align: center;
}
.cmp-cap i { font-style: normal; color: var(--text-faint); font-weight: 600; }
.cmp-nm { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.cmp-sw { width: 9px; height: 9px; border-radius: 3px; display: inline-block; flex: 0 0 auto; }
.cmp-axis-table { width: 100%; border-collapse: collapse; font-size: .84rem; table-layout: fixed; }
.cmp-axis-table th {
  font-size: .7rem; font-weight: 700; color: var(--text-muted);
  padding: 0 4px 9px; text-align: center; vertical-align: bottom;
}
/* Erste Spalte trägt die Achsnamen und bekommt festen Platz; die Geräte
   teilen sich den Rest. Ohne table-layout:fixed sprengen drei Gerätenamen
   die halbe Seitenbreite. */
.cmp-axis-table th:first-child {
  width: 40%; text-align: left; font-size: .62rem; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase;
}
/* Gerätenamen dürfen hier umbrechen — nicht abgeschnitten werden. Der
   Farbtupfer steht dabei über dem Namen statt mittendrin im Umbruch. */
.cmp-axis-table th .cmp-nm { flex-direction: column; gap: 4px; justify-content: flex-end; white-space: normal; text-align: center; }
.cmp-axis-table td { padding: 7px 5px; border-top: 1px solid var(--border); text-align: center; font-family: var(--font-m); }
.cmp-axis-table td:first-child { text-align: left; font-family: var(--font-b); font-weight: 600; }
.cmp-hint { color: var(--text-faint); font-weight: 400; font-size: .86em; }
/* Auf schmalen Fenstern stapeln statt quetschen — ein halbierter Halbseiter
   wäre unlesbar. */
@media (max-width: 780px) {
  .cmp-row-2, .cmp-row-3 { grid-template-columns: 1fr; }
}
/* ════════════════════════ MODALS / PANELS ════════════════════════ */
.modal {
  position: fixed; inset: 0; z-index: 100; display: none; align-items: center; justify-content: center;
  background: rgba(4,8,9,.62); backdrop-filter: blur(4px); padding: 26px;
}
.modal.open { display: flex; }
.modal-box {
  background: var(--surface); border: 1px solid var(--border-s); border-radius: 20px;
  width: min(960px, 100%); max-height: 92vh; overflow: auto; box-shadow: var(--shadow);
  animation: pop .18s ease-out;
}
@keyframes pop { from { transform: scale(.97); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.modal-h {
  position: sticky; top: 0; z-index: 5; background: var(--surface);
  display: flex; align-items: center; gap: 12px; padding: 17px 22px; border-bottom: 1px solid var(--border);
}
.modal-h h2 { font-family: var(--font-d); font-size: 1.15rem; font-weight: 800; letter-spacing: -.01em; }
.modal-h .right { margin-left: auto; display: flex; gap: 8px; }
.modal-b { padding: 20px 22px; }
.modal-foot { position: sticky; bottom: 0; background: var(--surface); border-top: 1px solid var(--border); padding: 13px 22px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.modal-foot .grow { flex: 1; }
/* Anlage-Maske: 2D-Wasserfall-Matrix */
.cr-top { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 16px; }
.cr-field { display: flex; flex-direction: column; gap: 4px; min-width: 200px; }
.cr-field label { font-size: .64rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); }
.cr-field input { background: var(--surface2); border: 1px solid var(--border); border-radius: 9px; padding: 9px 12px; font-size: .85rem; color: var(--text); width: 100%; }
.cr-field input:focus { border-color: var(--accent); outline: none; }
.cr-add-forms { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.cr-add-lbl { font-size: .68rem; font-weight: 700; color: var(--text-muted); }
.cr-matrix-scroll { overflow-x: auto; padding-bottom: 8px; }
.cr-matrix { display: grid; gap: 9px; min-width: min-content; }
.cr-corner { }
.cr-colhead { background: var(--surface2); border: 2px dashed var(--accent); border-radius: 11px; padding: 11px; display: flex; flex-direction: column; gap: 5px; text-align: center; }
.cr-formtype { font-weight: 800; color: var(--accent); font-size: .66rem; text-transform: uppercase; letter-spacing: .1em; }
.cr-colhead label { font-size: .58rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; }
.cr-scheme { display: flex; flex-direction: column; gap: 6px; }
.cr-scheme-btn { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 6px 9px; font-size: .68rem; font-weight: 700; color: var(--text-muted); cursor: pointer; }
.cr-scheme-btn:hover { border-color: var(--accent); color: var(--accent); }
.cr-color-list { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.cr-color-row { display: flex; align-items: center; gap: 5px; }
.cr-color-name { flex: 1; min-width: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 7px; padding: 7px 9px; font-size: .72rem; color: var(--text); }
.cr-color-name:focus { outline: none; border-color: var(--accent); }
.cr-color-del { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 6px; border: 1px solid var(--border); background: var(--surface); color: var(--danger); font-size: 11px; cursor: pointer; line-height: 1; }
.cr-color-del:hover { background: var(--danger); color: #fff; }
.cr-prefix { background: var(--surface); border: 1px solid var(--accent); border-radius: 8px; padding: 8px; font-weight: 800; font-size: .95rem; text-align: center; color: var(--text); }
.cr-prefix:focus { outline: none; box-shadow: 0 0 0 2px var(--glow); }
.cr-coldel { background: none; border: none; color: var(--text-faint); font-size: .68rem; font-weight: 600; cursor: pointer; padding: 3px; }
.cr-coldel:hover { color: var(--danger); }
.cr-rowhead { background: var(--surface2); border: 1px solid var(--border); border-radius: 11px; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.cr-levelname { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 7px; font-weight: 700; color: var(--accent); font-size: .82rem; width: 100%; }
.cr-levelname:focus { outline: none; border-color: var(--accent); }
.cr-rowacts { display: flex; gap: 6px; }
.cr-rowacts .btn { flex: 1; }
.cr-featbox { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; margin-top: auto; }
.cr-featbox summary { cursor: pointer; padding: 7px 9px; font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); user-select: none; }
.cr-featbox textarea { width: 100%; background: var(--surface2); border: none; border-top: 1px solid var(--border); padding: 8px 9px; font-family: var(--font-m); font-size: .72rem; line-height: 1.6; min-height: 70px; resize: vertical; color: var(--text); }
.cr-featbox textarea:focus { outline: none; }
.cr-feathint { font-size: .58rem; color: var(--text-faint); padding: 4px 9px 7px; }
.cr-cell { background: var(--surface); border: 1px solid var(--border); border-radius: 11px; padding: 11px; display: flex; flex-direction: column; gap: 8px; }
.cr-cell.del { opacity: .4; }
.cr-celllbl { font-size: .58rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; }
.cr-suffix { background: var(--surface2); border: 1px solid var(--accent-l); border-radius: 8px; padding: 8px; font-weight: 800; font-size: .9rem; color: var(--text); width: 100%; }
.cr-suffix:focus { outline: none; border-color: var(--accent); }
.cr-ignore { background: var(--surface2); border: 1px solid var(--border); border-radius: 7px; padding: 7px; font-size: .7rem; font-weight: 700; color: var(--text); cursor: pointer; }
.cr-ignore:hover { border-color: var(--accent); }
.cr-sub { background: var(--surface2); border: 1px solid var(--border); border-radius: 8px; }
.cr-sub summary { cursor: pointer; padding: 7px 10px; font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); user-select: none; }
.cr-subgrid { display: flex; flex-direction: column; gap: 6px; padding: 0 10px 10px; }
.cr-subgrid select, .cr-subgrid input { background: var(--surface); border: 1px solid var(--border); border-radius: 7px; padding: 6px 9px; font-size: .76rem; color: var(--text); width: 100%; }
.cr-subgrid select:focus, .cr-subgrid input:focus { outline: none; border-color: var(--accent); }
.cr-sliderbox { display: flex; flex-direction: column; gap: 7px; padding: 0 10px 10px; }
.cr-mxslider label { display: flex; justify-content: space-between; font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); margin-bottom: 2px; }
.cr-mxslider label b { color: var(--accent); font-family: var(--font-m); }
.cr-mxslider input[type="range"] { width: 100%; accent-color: var(--accent); }
/* Kategorie-Verwaltung (Hörer/Lader/Zubehör/Features) */
.cat-page-body { display: grid; grid-template-columns: 330px 1fr; gap: 16px; align-items: start; height: calc(100vh - 175px); min-height: 360px; }
@media (max-width: 860px) { .cat-page-body { grid-template-columns: 1fr; height: auto; } }
.cat-side { height: 100%; overflow-y: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; display: flex; flex-direction: column; gap: 3px; }
.cat-li { display: flex; align-items: center; gap: 7px; text-align: left; background: transparent; border: 1px solid transparent; border-radius: 8px; padding: 8px 11px; cursor: pointer; color: var(--text-muted); }
.cat-li:hover { background: var(--surface2); color: var(--text); }
.cat-li.active { background: var(--surface2); color: var(--accent); border-color: var(--border); font-weight: 700; }
.cat-li-n { flex: 1; min-width: 0; font-size: .84rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-li-tag { font-family: var(--font-m); font-size: .56rem; padding: 1px 5px; border-radius: 4px; background: color-mix(in srgb, var(--accent) 14%, var(--surface3)); color: var(--accent); }
.cat-li-c { font-family: var(--font-m); font-size: .62rem; color: var(--text-faint); }
.cat-empty-side, .cat-empty { color: var(--text-faint); font-size: .8rem; padding: 20px; text-align: center; }
.cat-main { min-width: 0; height: 100%; overflow-y: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 22px; }
.cat-d-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.cat-d-head h3 { font-family: var(--font-d); font-size: 1.25rem; font-weight: 800; flex: 1; min-width: 0; }
.cat-d-actions { display: flex; gap: 7px; align-items: center; }
.cat-price-field { display: inline-flex; align-items: center; gap: 5px; background: var(--surface2); border: 1px solid var(--border); border-radius: 8px; padding: 3px 8px; }
.cat-price-field .cpf-lab { color: var(--text-muted); font-weight: 700; font-size: .85rem; }
.cat-price-field input { width: 70px; background: none; border: none; color: var(--accent); font-weight: 800; font-size: .9rem; text-align: right; font-family: var(--font-d); }
.cat-price-field input:focus { outline: none; }
.cat-price-field input::placeholder { color: var(--text-faint); font-weight: 500; font-size: .78rem; }
.cat-price-field .cpf-note { font-family: var(--font-m); font-size: .6rem; color: var(--text-faint); border-left: 1px solid var(--border); padding-left: 6px; white-space: nowrap; }
.cat-featmeta { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--border); }
.cat-field { display: flex; flex-direction: column; gap: 4px; }
.cat-field label { font-size: .62rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); }
.cat-field input, .cat-field textarea { background: var(--surface2); border: 1px solid var(--border); border-radius: 8px; padding: 8px 11px; font-size: .84rem; color: var(--text); }
.cat-field input:focus, .cat-field textarea:focus { border-color: var(--accent); outline: none; }
.cat-levels { display: flex; flex-direction: column; gap: 6px; }
.cat-level-row { display: flex; align-items: center; gap: 8px; }
.cat-level-n { flex: 0 0 22px; height: 22px; border-radius: 50%; background: var(--surface3); color: var(--text-muted); font-size: .68rem; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.cat-level-row input { flex: 1; background: var(--surface2); border: 1px solid var(--border); border-radius: 8px; padding: 7px 11px; font-size: .84rem; color: var(--text); }
.cat-level-row input:focus { border-color: var(--accent); outline: none; }
.cat-level-del { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 7px; border: 1px solid var(--border); background: var(--surface2); color: var(--text-muted); cursor: pointer; font-size: .72rem; }
.cat-level-del:hover { border-color: var(--danger); color: var(--danger); }
.cat-level-add { align-self: flex-start; background: var(--surface2); border: 1px solid var(--border); border-radius: 8px; padding: 7px 13px; font-size: .78rem; font-weight: 700; color: var(--text-muted); cursor: pointer; margin-top: 2px; }
.cat-level-add:hover { border-color: var(--accent); color: var(--accent); }
.cat-level-empty { font-size: .76rem; color: var(--text-faint); }
.cat-ab { margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--border); }
.cat-ab-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.cat-ab-targets { display: flex; flex-wrap: wrap; gap: 6px; }
.cat-ab-chip { background: var(--surface2); border: 1px solid var(--border); border-radius: 8px; padding: 7px 12px; font-size: .78rem; cursor: pointer; color: var(--text); }
.cat-ab-chip:hover { border-color: var(--accent); }
.cat-ab-chip.set { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--surface2)); }
.cat-ab-hint { font-size: .76rem; color: var(--text-faint); }
.seg.sm button { font-size: .72rem; padding: 5px 10px; }
.cat-assign .eyebrow { display: block; margin-bottom: 10px; }
.cat-fam { margin-bottom: 12px; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.cat-fam-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; background: var(--surface2); font-weight: 700; font-size: .82rem; }
.cat-fam-all { background: none; border: none; color: var(--accent); font-size: .72rem; font-weight: 700; cursor: pointer; }
.cat-fam-devs { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 12px; }
.cat-grid { display: grid; gap: 6px; padding: 10px 12px; }
.cat-imgrow { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--border); }
.cat-img { width: 96px; height: 96px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface2); overflow: hidden; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cat-img img { width: 100%; height: 100%; object-fit: contain; }
.cat-img.empty span { font-size: .68rem; color: var(--text-faint); }
.cat-imgacts { display: flex; flex-direction: column; gap: 7px; }
.cat-grid .cat-dev { width: 100%; justify-content: flex-start; }
.cat-cell-empty { min-height: 1px; }
.cat-dev { display: inline-flex; align-items: center; gap: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: 7px; padding: 5px 10px; font-size: .76rem; cursor: pointer; user-select: none; }
.cat-dev.on { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.cat-dev input { accent-color: var(--accent); }
#ab-svg { background: var(--surface2); border: 1px solid var(--border); border-radius: 12px; padding: 8px; }
/* Add-Kachel im Hersteller-Grid */
.mfr-card.add-card { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 6px; border-style: dashed; border-color: var(--border-s); background: transparent; }
.mfr-card.add-card:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, transparent); }
.mfr-card.add-card .add-plus { width: 52px; height: 52px; border-radius: 14px; background: var(--surface3); color: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 1.8rem; font-weight: 300; margin-bottom: 6px; }

#lightbox { z-index: 200; cursor: zoom-out; }
#lightbox img { max-width: 92vw; max-height: 90vh; object-fit: contain; border-radius: 12px; }

.panel {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(430px, 94vw); z-index: 80;
  background: var(--surface); border-left: 1px solid var(--border-s);
  transform: translateX(105%); transition: transform .22s ease; display: flex; flex-direction: column;
  box-shadow: var(--shadow);
}
.panel.open { transform: translateX(0); }
.panel-h { display: flex; align-items: center; gap: 11px; padding: 17px 20px; border-bottom: 1px solid var(--border); }
.panel-h h2 { font-family: var(--font-d); font-size: 1.05rem; font-weight: 800; letter-spacing: -.01em; }
.panel-h .right { margin-left: auto; display: flex; gap: 7px; }
.panel-b { flex: 1; overflow-y: auto; padding: 18px 20px 30px; }
#panel-scrim { position: fixed; inset: 0; z-index: 75; background: rgba(4,8,9,.4); display: none; }
#panel-scrim.open { display: block; }


/* Kategorien: Stelltiefe-Stufe pro Gerät + Auswahl-Overlay */
.cat-dev-lvl{position:relative;cursor:pointer;text-align:left;}
.cat-lvl-badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;margin-left:8px;padding:0 5px;border-radius:10px;background:var(--accent,#2f7d4f);color:#fff;font-size:.72em;font-weight:800;line-height:1;}
.cat-lvl-ov{position:fixed;inset:0;z-index:1300;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.45);}
.cat-lvl-card{background:var(--card,#fff);color:inherit;width:min(420px,92vw);border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.35);padding:18px 20px;}
.cat-lvl-h{display:flex;align-items:center;justify-content:space-between;font-weight:700;font-size:1.05em;margin-bottom:2px;}
.cat-lvl-x{background:none;border:none;font-size:1.1em;cursor:pointer;color:inherit;padding:2px 6px;border-radius:6px;}
.cat-lvl-x:hover{background:var(--panel,rgba(128,128,128,.12));}
.cat-lvl-sub{color:var(--muted,#7a7a7a);font-size:.88em;margin-bottom:12px;}
.cat-lvl-opts{display:flex;flex-direction:column;gap:8px;}
.cat-lvl-opt{text-align:left;padding:10px 12px;border:1px solid var(--line,rgba(128,128,128,.3));border-radius:9px;background:var(--card,#fff);color:inherit;font:inherit;cursor:pointer;}
.cat-lvl-opt:hover:not([disabled]){border-color:var(--accent,#2f7d4f);background:var(--panel,rgba(128,128,128,.08));}
.cat-lvl-opt.cur{border-color:var(--accent,#2f7d4f);background:var(--accent,#2f7d4f);color:#fff;font-weight:700;}
.cat-lvl-opt[disabled]{opacity:.4;cursor:not-allowed;}
.cat-lvl-remove{margin-top:14px;width:100%;padding:9px;border:1px solid var(--line,rgba(128,128,128,.3));border-radius:9px;background:none;color:var(--danger,#c0392b);cursor:pointer;font:inherit;}
.cat-lvl-remove:hover{background:rgba(192,57,43,.08);}

/* Mausdrag-Mehrfachauswahl im Kategorie-Geräteraster */
.cat-assign .cat-dev.cat-dev-sel { outline: 2px solid var(--accent, #4a5d23); outline-offset: -2px; background: color-mix(in srgb, var(--accent, #4a5d23) 14%, transparent); }
.cat-assign { user-select: none; -webkit-user-select: none; }

/* Anlage-/Bearbeiten-Matrix: nahezu volle Bildschirmbreite nutzen (dünner Rahmen) */
#create-modal .modal-box { width: 96vw; max-width: 96vw; }

/* Anlage-Assistent (Stufen/Spalten + Namens-Baukasten) */
#cr-wizard .wiz-row { margin-bottom: 12px; display: flex; flex-direction: column; gap: 4px; }
#cr-wizard .wiz-row > label { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted, #888); font-weight: 800; }
#cr-wizard .wiz-counts { flex-direction: row; flex-wrap: wrap; gap: 14px; }
#cr-wizard .wiz-counts label { display: flex; align-items: center; gap: 6px; text-transform: none; letter-spacing: 0; font-weight: 700; font-size: .82rem; }
#cr-wizard .wiz-counts input { width: 60px; }
#cr-wizard input[type=number], #cr-wizard .cr-prefix { padding: 7px 9px; border: 1px solid var(--border-s, rgba(0,0,0,.18)); border-radius: 8px; font: inherit; background: var(--surface, #fff); color: inherit; }
#cr-wizard .cr-prefix { width: 100%; box-sizing: border-box; font-weight: 700; }
#cr-wizard .wiz-part { border: 1px solid var(--border, rgba(0,0,0,.1)); border-radius: 10px; padding: 8px 10px; margin: 6px 0; }
#cr-wizard .wiz-part-h { display: flex; align-items: center; gap: 8px; }
#cr-wizard .wiz-ptype { flex: 1; padding: 5px 8px; border: 1px solid var(--border-s, rgba(0,0,0,.18)); border-radius: 8px; font: inherit; background: var(--surface, #fff); color: inherit; }
#cr-wizard .wiz-pdel { border: none; background: transparent; color: var(--text-muted, #888); cursor: pointer; font-size: 1rem; padding: 2px 6px; border-radius: 6px; }
#cr-wizard .wiz-pdel:hover { background: var(--surface3, rgba(0,0,0,.06)); }
#cr-wizard .wiz-pvals { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
#cr-wizard .wiz-pval { flex: 1 1 120px; min-width: 100px; padding: 6px 8px; border: 1px solid var(--border-s, rgba(0,0,0,.18)); border-radius: 8px; font: inherit; background: var(--surface, #fff); color: inherit; }

/* Assistent: Namensteile per Drag-and-Drop umsortieren */
#cr-wizard .wiz-grip { cursor: grab; color: var(--text-faint, #999); font-size: 1rem; line-height: 1; padding: 0 2px; user-select: none; }
#cr-wizard .wiz-grip:active { cursor: grabbing; }
#cr-wizard .wiz-part { transition: border-color .1s; }
#cr-wizard .wiz-part.wiz-dragging { opacity: .5; }
#cr-wizard .wiz-part.wiz-drop-before { border-top: 2px solid var(--accent, #4a5d23); }
#cr-wizard .wiz-part.wiz-drop-after { border-bottom: 2px solid var(--accent, #4a5d23); }

/* Assistent: vollständige Namensvorschau */
#cr-wizard .wiz-preview { margin-top: 10px; }
#cr-wizard .wiz-preview > summary { cursor: pointer; font-size: .78rem; font-weight: 700; color: var(--text-muted, #888); }
#cr-wizard .wiz-prev-scroll { max-height: 200px; overflow: auto; margin-top: 6px; border: 1px solid var(--border, rgba(0,0,0,.1)); border-radius: 8px; }
#cr-wizard .wiz-prev-tbl { width: 100%; border-collapse: collapse; font-size: .76rem; }
#cr-wizard .wiz-prev-tbl th, #cr-wizard .wiz-prev-tbl td { padding: 4px 8px; border-bottom: 1px solid var(--border, rgba(0,0,0,.06)); text-align: left; white-space: nowrap; }
#cr-wizard .wiz-prev-tbl th { position: sticky; top: 0; background: var(--surface2, #faf8f2); font-size: .68rem; text-transform: uppercase; letter-spacing: .03em; color: var(--text-muted, #888); }
#cr-wizard .wiz-prev-lv { font-weight: 700; color: var(--text-muted, #888); }
/* ════════════════════════ HÖRBEDARF ════════════════════════ */
.need-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.need-tile {
  background: var(--surface2); border: 1px solid var(--border); border-radius: 12px;
  padding: 11px 12px; cursor: pointer; text-align: left; transition: border-color .13s, background .13s;
  color: var(--text);
}
.need-tile:hover { border-color: var(--border-s); }
.need-tile.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface2)); }
.need-tile svg { width: 100%; height: 26px; display: block; margin-bottom: 6px; }
.need-tile .t { font-size: .76rem; font-weight: 700; }
.need-tile .s { font-size: .62rem; color: var(--text-muted); }

.grad-wrap { margin-top: 18px; }
.lblrow { display: flex; justify-content: space-between; font-size: .66rem; color: var(--text-faint); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 4px; }
.grad-wrap .lblrow { display: flex; justify-content: space-between; font-size: .66rem; color: var(--text-faint); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 4px; }
input[type="range"].grad {
  -webkit-appearance: none; appearance: none; width: 100%; height: 7px; border-radius: 5px;
  background: linear-gradient(90deg, var(--surface3), var(--accent)); outline: none;
}
input[type="range"].grad::-webkit-slider-thumb {
  -webkit-appearance: none; width: 21px; height: 21px; border-radius: 50%;
  background: var(--accent); border: 3px solid var(--surface); box-shadow: 0 0 0 1px var(--border-s); cursor: grab;
}
input[type="range"].grad::-moz-range-thumb {
  width: 17px; height: 17px; border-radius: 50%; background: var(--accent); border: 3px solid var(--surface); cursor: grab;
}
.grad-readout { text-align: center; font-family: var(--font-m); font-size: .72rem; color: var(--text-muted); margin-top: 7px; }
.grad-readout b { color: var(--accent); font-size: .82rem; }

.need-audio { margin-top: 16px; background: var(--surface2); border: 1px solid var(--border); border-radius: 12px; padding: 10px;
  user-select: none; -webkit-user-select: none; -ms-user-select: none; -webkit-touch-callout: none; }
.need-audio svg { width: 100%; display: block; touch-action: none; cursor: crosshair; }
.need-audio svg * { user-select: none; -webkit-user-select: none; }
.need-audio .hint { font-size: .62rem; color: var(--text-faint); text-align: center; margin-top: 5px; }
/* Such-Button direkt unter dem Audiogramm — markiert, sobald die Suche aktiv/aktuell ist */
.need-search-btn { width: 100%; margin-top: 12px; font-weight: 700; }
.need-search-btn.on, .need-search-btn.on:hover {
  background: var(--ok); border-color: var(--ok); color: #fff;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 30%, transparent);
}

.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chip {
  border: 1px solid var(--border); background: var(--surface2); color: var(--text-muted);
  border-radius: 999px; padding: 6px 14px; font-size: .74rem; font-weight: 700; cursor: pointer;
  transition: all .12s;
}
.chip.on { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--surface2)); }
.need-sec { margin-top: 20px; }
.need-sec .eyebrow { margin-bottom: 9px; display: block; }
.need-foot {
  position: sticky; bottom: -30px; margin: 22px -20px -30px; padding: 14px 20px 18px;
  background: var(--surface); border-top: 1px solid var(--border); display: flex; gap: 9px; align-items: center;
}
.need-count { font-family: var(--font-m); font-size: .72rem; color: var(--text-muted); flex: 1; }
.need-count b { color: var(--accent); font-size: .9rem; }

/* ── Treffer-Liste ── */
.hit-row {
  display: flex; align-items: center; gap: 13px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px 15px; margin-bottom: 9px; cursor: pointer; position: relative;
}
.hit-row:hover { border-color: var(--accent); }
/* Marge-Randfärbung in der Trefferliste (I grün → IV rot) */
.hit-row.marge-I   { border-color: #22c55e; border-width: 2px; }
.hit-row.marge-II  { border-color: #eab308; border-width: 2px; }
.hit-row.marge-III { border-color: #f97316; border-width: 2px; }
.hit-row.marge-IV  { border-color: #ef4444; border-width: 2px; }
.hit-row.marge-I:hover, .hit-row.marge-II:hover, .hit-row.marge-III:hover, .hit-row.marge-IV:hover { border-color: var(--accent); }
.hit-row img { width: 46px; height: 46px; object-fit: contain; border-radius: 9px; background: var(--surface2); }
.hit-row .ph { width: 46px; height: 46px; border-radius: 9px; background: var(--surface2); display: flex; align-items: center; justify-content: center; }
.hit-row .inf { flex: 1; min-width: 0; }
.hit-row .n { font-weight: 700; font-size: .88rem; }
.hit-row .m { font-size: .68rem; color: var(--text-muted); font-family: var(--font-m); margin-top: 2px; }
.hit-price { flex: 0 0 auto; text-align: right; min-width: 92px; }
.hit-price .hp-v { font-family: var(--font-d); font-size: .98rem; font-weight: 800; color: var(--accent); white-space: nowrap; }
.hit-price .hp-l { font-family: var(--font-m); font-size: .56rem; color: var(--text-faint); letter-spacing: .03em; margin-top: 2px; }
/* ── Angebot ── */
.ang-wrap { width: 100%; }
.ang-ears { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 8px; }
.ang-ear { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; }
.ang-ear-lab { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); margin-bottom: 8px; }
.ang-sec-h { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); margin: 18px 0 8px; }
.ang-line { display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 9px; }
.ang-name { flex: 1; min-width: 0; background: var(--surface2); border: 1px solid var(--border); border-radius: 9px; padding: 8px 11px; color: var(--text); font-size: .9rem; font-family: var(--font-b); }
.ang-ear .ang-name { width: 100%; box-sizing: border-box; }
.ang-price-row { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.ang-line .ang-price-row { margin-top: 0; flex: 0 0 auto; }
.ang-price-lab { font-family: var(--font-m); font-size: .58rem; color: var(--text-faint); margin-right: 4px; }
.ang-price { width: 92px; text-align: right; background: var(--surface2); border: 1px solid var(--border); border-radius: 9px; padding: 8px 10px; color: var(--accent); font-weight: 800; font-size: .95rem; font-family: var(--font-d); }
.ang-eur { color: var(--text-muted); font-weight: 700; }
.ang-del { background: none; border: none; color: var(--text-faint); cursor: pointer; font-size: .9rem; padding: 4px 6px; border-radius: 6px; }
.ang-del:hover { color: var(--danger); background: var(--surface2); }
.ang-add { margin: 2px 0 4px; background: var(--surface2); border: 1px dashed var(--border-s); border-radius: var(--radius); padding: 11px 14px; width: 100%; color: var(--text-muted); cursor: pointer; font-size: .85rem; font-weight: 600; }
.ang-add:hover { color: var(--accent); border-color: var(--accent); }
.ang-sum { display: flex; justify-content: space-between; align-items: baseline; margin-top: 18px; padding-top: 14px; border-top: 2px solid var(--border-s); font-weight: 700; }
.ang-sum-v { font-family: var(--font-d); font-size: 1.5rem; font-weight: 800; color: var(--accent); }
@media (max-width: 640px) { .ang-ears { grid-template-columns: 1fr; } }
.ang-ops-pick { flex: 0 0 auto; max-width: 220px; background: var(--surface2); border: 1px solid var(--border); border-radius: 9px; padding: 8px 10px; color: var(--text); font-size: .85rem; }
.ang-ops-line .ang-thumb { width: 92px; height: 92px; }
.ang-ops-selects { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; flex: 1; min-width: 0; }
/* Zubehör-Checkbox-Raster: 3 Spalten, gestreckt */
.ang-zub-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 4px; }
.ang-zub-card { display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 11px 14px; cursor: pointer; transition: border-color .12s, background .12s; }
.ang-zub-card:hover { border-color: var(--border-s); }
.ang-zub-card.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }
.ang-zub-cb { width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--accent); cursor: pointer; }
.ang-zub-info { flex: 1; min-width: 0; }
.ang-zub-name { font-size: .86rem; font-weight: 600; line-height: 1.25; }
.ang-zub-edits { display: flex; gap: 12px; margin-top: 5px; flex-wrap: wrap; }
.ang-zub-el { display: flex; align-items: center; gap: 4px; font-size: .62rem; color: var(--text-faint); font-family: var(--font-m); }
.ang-zub-el.rab { color: var(--danger); }
.ang-zub-pinp { width: 62px; text-align: right; background: var(--surface2); border: 1px solid var(--border); border-radius: 6px; padding: 4px 6px; color: var(--accent); font-weight: 800; font-size: .8rem; font-family: var(--font-d); }
.ang-zub-el.rab .ang-zub-pinp { color: var(--danger); }
@media (max-width: 1100px) { .ang-zub-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px) { .ang-zub-grid { grid-template-columns: 1fr; } }
.ang-ops-selects .ang-ops-pick { max-width: none; min-width: 0; width: 100%; box-sizing: border-box; }
.ang-pricetype { background: var(--surface2); border: 1px solid var(--border); border-radius: 8px; padding: 6px 8px; color: var(--text-muted); font-size: .72rem; font-weight: 600; margin-right: 4px; }
.ang-ear-top { display: flex; align-items: center; gap: 10px; }
.ang-thumb { flex: 0 0 auto; width: 84px; height: 84px; border-radius: 11px; background: var(--surface2); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; overflow: hidden; font-size: 26px; }
.ang-thumb.sm { width: 64px; height: 64px; font-size: 20px; }
.ang-thumb img { width: 100%; height: 100%; object-fit: contain; }
.ang-ear-top .ang-name { flex: 1; min-width: 0; }
/* ── OPS-Verwaltung ── */
.ops-wrap { max-width: 820px; }
.ops-addmfr { display: flex; gap: 10px; margin-bottom: 18px; }
.ops-addmfr input { flex: 1; background: var(--surface2); border: 1px solid var(--border); border-radius: 9px; padding: 9px 12px; color: var(--text); font-size: .9rem; }
.ops-mfr { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; margin-bottom: 14px; }
.ops-mfr-h { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.ops-mfr-name { font-family: var(--font-d); font-weight: 800; font-size: 1.05rem; }
.ops-item { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--surface2); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; }
.ops-name { flex: 1 1 180px; min-width: 140px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 7px 10px; color: var(--text); font-size: .88rem; font-weight: 600; }
.ops-prices { display: flex; gap: 12px; flex: 0 0 auto; }
.ops-prices label { display: flex; align-items: center; gap: 5px; font-size: .68rem; color: var(--text-muted); font-family: var(--font-m); }
.ops-price { width: 78px; text-align: right; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 6px 8px; color: var(--accent); font-weight: 700; font-size: .85rem; }
.ops-farben { flex: 1 1 160px; min-width: 120px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 7px 10px; color: var(--text); font-size: .82rem; }
.ops-del { background: none; border: none; color: var(--text-faint); cursor: pointer; font-size: .9rem; padding: 4px 6px; border-radius: 6px; flex: 0 0 auto; }
.ops-del:hover { color: var(--danger); background: var(--surface); }
.ops-detail-head { display: flex; justify-content: space-between; align-items: flex-start; }
.ops-head-acts { display: flex; gap: 8px; }
.ops-mat-group { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; margin-bottom: 14px; }
.ops-mat-h { font-family: var(--font-d); font-weight: 800; font-size: 1rem; margin-bottom: 10px; display: flex; align-items: center; }
.ops-mat-h .right { margin-left: auto; font-size: .7rem; color: var(--text-muted); }
.ops-thumb { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 8px; background: var(--surface); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; overflow: hidden; cursor: pointer; font-size: .56rem; color: var(--text-faint); text-align: center; }
.ops-thumb img { width: 100%; height: 100%; object-fit: contain; }
.ops-thumb:hover { border-color: var(--accent); }
.ops-mat { flex: 1 1 120px; min-width: 100px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 7px 10px; color: var(--text); font-size: .82rem; }
.ops-item-wrap { margin-bottom: 10px; }
.ops-forms { margin: 4px 0 0 56px; padding: 8px 12px; background: var(--surface); border: 1px dashed var(--border); border-radius: 9px; }
.ops-forms-h { font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-faint); margin-bottom: 6px; }
.ops-form-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.ops-form-thumb { width: 40px; height: 40px; }
.ops-form-name { flex: 1; background: var(--surface2); border: 1px solid var(--border); border-radius: 7px; padding: 6px 9px; color: var(--text); font-size: .82rem; }
.ops-form-add { background: var(--surface2); border: 1px dashed var(--border-s); border-radius: 7px; padding: 6px 10px; color: var(--text-muted); cursor: pointer; font-size: .76rem; font-weight: 600; }
.ops-form-add:hover { color: var(--accent); border-color: var(--accent); }
.hit-meter { width: 130px; flex-shrink: 0; }
.hit-meter .bar { height: 6px; border-radius: 4px; background: var(--surface3); overflow: hidden; }
.hit-meter .bar i { display: block; height: 100%; border-radius: 4px; }
.hit-meter .lab { font-family: var(--font-m); font-size: .6rem; color: var(--text-muted); margin-top: 4px; text-align: right; }


/* ── Exakte Audiogramm-Eingabe im Hörbedarf-Panel ── */
.audiogram-paste{border:1.5px dashed var(--border-s,rgba(128,128,128,.4));border-radius:10px;min-height:64px;
  display:flex;align-items:center;justify-content:center;text-align:center;padding:10px;
  font-size:.78rem;color:var(--text-muted,#888);background:var(--surface2,rgba(0,0,0,.02));cursor:text;}
.audiogram-paste:focus{outline:2px solid var(--accent,#4a5d23);outline-offset:2px;}
.audiogram-paste img{max-width:100%;max-height:260px;border-radius:8px;display:block;}
.ag-grid{width:100%;border-collapse:collapse;font-size:.8rem;margin-top:4px;}
.ag-grid th{font-size:.66rem;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted,#888);text-align:left;padding:2px 6px;font-weight:800;}
.ag-grid td{padding:2px 6px;border-bottom:1px solid var(--border,rgba(0,0,0,.06));}
.ag-grid td.agf{font-weight:700;color:var(--text,inherit);width:52px;}
.ag-in{width:100%;box-sizing:border-box;padding:5px 7px;border:1px solid var(--border-s,rgba(0,0,0,.18));
  border-radius:7px;font:inherit;background:var(--surface,#fff);color:inherit;text-align:right;}
.ag-in:focus{outline:none;border-color:var(--accent,#4a5d23);}

/* ── „Selbst ausfüllen": ziehbare Audiogramme (ein/zwei Ohren) ── */
.ag-onemap{margin-bottom:12px;}
.ag-onemap .ag-lbl{font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted,#888);margin:0 0 4px 2px;}
.ag-ed{touch-action:none;user-select:none;-webkit-user-select:none;cursor:crosshair;background:var(--surface2,rgba(0,0,0,.02));border:1px solid var(--border,rgba(0,0,0,.08));border-radius:10px;padding:6px;}
.ag-ed svg{display:block;width:100%;height:auto;}
.ag-check{display:inline-flex;align-items:center;gap:6px;font-size:.85rem;color:var(--text,inherit);cursor:pointer;}
.ag-check.ag-better{display:flex;margin-top:4px;flex-wrap:wrap;}
.ag-check .mdhint{flex-basis:100%;margin-left:22px;}
.ag-tip{position:fixed;z-index:9999;pointer-events:none;display:none;background:var(--accent,#4a5d23);color:var(--on-accent,#fff);
  font-size:.74rem;font-weight:700;padding:2px 7px;border-radius:6px;box-shadow:0 2px 8px rgba(0,0,0,.3);transform:translateY(-100%);}
/* ════════════════════════ DATEIEN / NOTIZEN ════════════════════════ */
.file-tab { background: var(--surface2); border: 1px solid var(--border); border-radius: 11px; margin-bottom: 10px; overflow: hidden; }
.file-tab summary {
  list-style: none; display: flex; align-items: center; gap: 9px; padding: 11px 14px;
  font-weight: 700; font-size: .82rem; cursor: pointer; user-select: none;
}
.file-tab summary::-webkit-details-marker { display: none; }
.file-tab summary .car { transition: transform .15s; color: var(--text-faint); font-size: .7rem; }
.file-tab[open] summary .car { transform: rotate(90deg); }
.file-tab summary .right { margin-left: auto; }
.file-list { border-top: 1px solid var(--border); padding: 8px 10px; }
.file-row {
  display: flex; align-items: center; gap: 9px; padding: 8px 9px; border-radius: 8px; cursor: pointer; font-size: .8rem;
}
.file-row:hover { background: var(--surface3); }
.file-row .nm { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.file-row .star { color: var(--text-faint); font-size: 14px; opacity: .35; background: none; border: none; }
.file-row .star.fav { color: var(--warn); opacity: 1; }

.note-card {
  background: var(--surface2); border: 1px solid var(--border); border-left: 3px solid var(--accent);
  border-radius: 10px; padding: 11px 13px; margin-bottom: 9px;
}
.note-card .txt { font-size: .84rem; white-space: pre-wrap; word-break: break-word; }
.note-card .meta { display: flex; align-items: center; gap: 8px; margin-top: 7px; font-size: .62rem; color: var(--text-faint); font-family: var(--font-m); }
.note-card .meta .grow { flex: 1; }
.note-card .meta button { background: none; border: none; color: var(--text-faint); font-size: 12px; }
.note-card .meta button:hover { color: var(--danger); }
.note-input { display: flex; gap: 8px; margin-bottom: 9px; }
.note-input textarea {
  flex: 1; background: var(--surface2); border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 12px; font-size: .84rem; resize: vertical; min-height: 44px;
}
.note-date-row { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; font-size: .72rem; color: var(--text-muted); }
.note-date-row label { font-weight: 700; letter-spacing: .03em; }
.note-date-row input[type="date"] {
  flex: 1; background: var(--surface2); border: 1px solid var(--border); border-radius: 8px;
  padding: 6px 10px; font-size: .78rem; color: var(--text);
}
.note-date-row input[type="date"]:focus { border-color: var(--accent); outline: none; }
.note-date-row input[type="date"], .note-date-row input[type="time"] {
  background: var(--surface2); border: 1px solid var(--border); border-radius: 8px;
  padding: 6px 10px; font-size: .78rem; color: var(--text);
}
.note-date-row input[type="date"] { flex: 1; }
.note-date-row input:focus { border-color: var(--accent); outline: none; }
.note-card.note-soon { border-left-color: #34d399; }
.note-card.note-today { border-left-color: #f0b429; }
.note-card.note-over { border-left-color: #ef5d6e; }
.note-due { font-family: var(--font-m); font-size: .6rem; font-weight: 700; padding: 2px 7px; border-radius: 5px; background: var(--surface3); border: 1px solid var(--border); color: var(--text-muted); }
.note-due.soon { background: rgba(52,211,153,.16); color: #34d399; border-color: rgba(52,211,153,.4); }
.note-due.today { background: rgba(240,180,41,.16); color: #d99a12; border-color: rgba(240,180,41,.4); }
.note-due.over { background: rgba(239,93,110,.16); color: #ef5d6e; border-color: rgba(239,93,110,.4); }
/* Dauerhafte Notiz-Toasts unten rechts */
#corner-stack { position: fixed; right: 18px; bottom: 18px; z-index: 250; display: flex; flex-direction: column; gap: 9px; align-items: flex-end; }
#note-toasts { display: flex; flex-direction: column; gap: 9px; max-width: 320px; }
.note-toast { background: var(--surface2); border: 1px solid var(--border-s); border-left: 4px solid var(--warn); border-radius: 11px; padding: 11px 14px; box-shadow: var(--shadow); animation: ntPulse 2s ease-in-out infinite; }
.note-toast.over { border-left-color: var(--danger); animation: ntPulseRed 1s ease-in-out infinite; }
.note-toast .nt-h { font-size: .68rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--warn); display: flex; align-items: center; gap: 7px; }
.note-toast.over .nt-h { color: var(--danger); }
.note-toast .nt-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.note-toast .nt-txt { font-size: .84rem; margin-top: 5px; color: var(--text); white-space: pre-wrap; word-break: break-word; }
@keyframes ntPulse { 0%,100% { box-shadow: var(--shadow); } 50% { box-shadow: 0 0 0 3px rgba(240,164,60,.25), var(--shadow); } }
@keyframes ntPulseRed { 0%,100% { box-shadow: var(--shadow); } 50% { box-shadow: 0 0 0 3px rgba(239,93,110,.30), var(--shadow); } }

/* ════════════════════════ EINSTELLUNGEN ════════════════════════ */
.theme-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.theme-card {
  border: 1px solid var(--border); border-radius: 12px; padding: 10px; cursor: pointer;
  background: var(--surface2); text-align: left; color: var(--text);
}
.theme-card.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.theme-card .sw { display: flex; gap: 4px; margin-bottom: 7px; }
.theme-card .sw i { width: 18px; height: 18px; border-radius: 6px; border: 1px solid rgba(128,128,128,.25); }
.theme-card .nm { font-size: .74rem; font-weight: 700; }
.set-row { display: flex; align-items: center; gap: 11px; padding: 11px 0; border-bottom: 1px dashed var(--border); font-size: .82rem; }
.set-row .grow { flex: 1; }
input[type="color"].accpick { width: 42px; height: 30px; border: 1px solid var(--border-s); border-radius: 8px; background: var(--surface2); padding: 2px; cursor: pointer; }
.seg { display: inline-flex; border: 1px solid var(--border); border-radius: 9px; overflow: hidden; }
.seg button { background: var(--surface2); border: none; color: var(--text-muted); font-size: .74rem; font-weight: 700; padding: 6px 13px; }
.seg button.on { background: var(--accent); color: var(--on-accent); }

.cmp-feat-table { width: 100%; border-collapse: collapse; margin-top: 6px; font-size: .82rem; }
.cmp-feat-table th, .cmp-feat-table td { padding: 7px 10px; border-bottom: 1px solid var(--border); text-align: left; }
.cmp-feat-table thead th { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); border-bottom: 1.5px solid var(--border-s); }
.cmp-feat-table tbody tr:hover { background: var(--surface2); }

/* ════════════════════════ KOMPENDIUM (Rich-Text-Wiki) ════════════════════════ */
.komp-wrap { display: grid; grid-template-columns: 270px 1fr; gap: 16px; align-items: start; min-height: calc(100vh - 90px); padding-top: 12px; }
@media (max-width: 900px) { .komp-wrap { grid-template-columns: 1fr; } }
.komp-side { position: sticky; top: 80px; display: flex; flex-direction: column; gap: 9px; max-height: calc(100vh - 100px); overflow-y: auto; }
.komp-side-head { display: flex; gap: 6px; align-items: center; }
.komp-select { flex: 1; min-width: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 9px; padding: 8px 10px; font-size: .82rem; font-weight: 700; color: var(--text); }
.komp-select:focus { border-color: var(--accent); outline: none; }
.komp-mini { width: 32px; height: 32px; flex-shrink: 0; border: 1px solid var(--border); background: var(--surface2); border-radius: 8px; color: var(--text-muted); font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.komp-mini:hover { color: var(--accent); border-color: var(--accent); }
.komp-mini.danger:hover { color: var(--danger); border-color: var(--danger); }
.komp-search { background: var(--surface); border: 1px solid var(--border); border-radius: 9px; padding: 8px 11px; font-size: .82rem; color: var(--text); }
.komp-search:focus { border-color: var(--accent); outline: none; }
.komp-side-btns { display: flex; gap: 6px; }
.komp-newpage { flex: 1; background: var(--accent); color: var(--on-accent); border: none; border-radius: 9px; padding: 9px; font-size: .8rem; font-weight: 700; cursor: pointer; }
.komp-newpage:hover { background: var(--accent-h); }
.komp-newpage.ghost { flex: 0 0 auto; background: var(--surface2); color: var(--text); border: 1px solid var(--border); }
.komp-newpage.ghost:hover { border-color: var(--accent); color: var(--accent); }
.komp-pagelist { display: flex; flex-direction: column; gap: 3px; margin-top: 4px; }
.komp-pl-item { text-align: left; background: transparent; border: 1px solid transparent; border-radius: 8px; padding: 8px 11px; font-size: .83rem; color: var(--text-muted); cursor: pointer; }
.komp-pl-item:hover { background: var(--surface2); color: var(--text); }
.komp-pl-item.active { background: var(--surface2); color: var(--accent); font-weight: 700; border-left: 3px solid var(--accent); border-color: var(--border); }
.komp-pl-empty { padding: 18px 8px; color: var(--text-faint); font-size: .78rem; text-align: center; }
.komp-main { min-width: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; min-height: 70vh; }
.komp-empty { padding: 70px 30px; text-align: center; color: var(--text-muted); font-size: .9rem; line-height: 1.6; }
/* Editor */
.komp-editor { display: flex; flex-direction: column; }
.komp-title-input { background: transparent; border: none; border-bottom: 2px solid var(--border); padding: 16px 20px; font-family: var(--font-d); font-size: 1.5rem; font-weight: 800; color: var(--text); letter-spacing: -.02em; }
.komp-title-input:focus { outline: none; border-bottom-color: var(--accent); }
.komp-toolbar { display: flex; flex-wrap: wrap; gap: 4px; padding: 9px 14px; border-bottom: 1px solid var(--border); position: sticky; top: 72px; background: var(--surface); z-index: 6; align-items: center; }
.komp-tb { background: var(--surface2); border: 1px solid var(--border); border-radius: 7px; color: var(--text); font-size: .76rem; font-weight: 600; padding: 6px 9px; min-height: 30px; cursor: pointer; line-height: 1; display: inline-flex; align-items: center; }
.komp-tb:hover { border-color: var(--accent); color: var(--accent); }
.komp-tb-sep { width: 1px; height: 22px; background: var(--border); margin: 0 3px; }
.komp-edit-area { padding: 22px; min-height: 50vh; font-size: .96rem; line-height: 1.7; color: var(--text); outline: none; }
.komp-editbar { display: flex; gap: 8px; padding: 13px 18px; border-top: 1px solid var(--border); flex-wrap: wrap; }
.komp-btn { background: var(--surface2); border: 1px solid var(--border); border-radius: 9px; color: var(--text); padding: 8px 15px; font-size: .82rem; font-weight: 600; cursor: pointer; }
.komp-btn:hover { border-color: var(--border-s); background: var(--surface3); }
.komp-btn.primary { background: var(--accent); color: var(--on-accent); border-color: transparent; }
.komp-btn.primary:hover { background: var(--accent-h); }
.komp-btn.danger:hover { border-color: var(--danger); color: var(--danger); }
/* Lesemodus */
.komp-read-head { display: flex; align-items: flex-start; gap: 14px; padding: 20px 22px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.komp-read-head h1 { font-family: var(--font-d); font-size: 1.7rem; font-weight: 800; letter-spacing: -.02em; flex: 1; min-width: 0; }
.komp-read-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.komp-read-body { padding: 22px; font-size: .96rem; line-height: 1.7; }
/* Gemeinsame Inhalts-Stile (Editor + Lesemodus) */
.komp-edit-area h1, .komp-read-body h1 { font-family: var(--font-d); font-size: 1.5rem; font-weight: 800; margin: 18px 0 8px; }
.komp-edit-area h2, .komp-read-body h2 { font-size: 1.25rem; font-weight: 800; margin: 16px 0 7px; }
.komp-edit-area h3, .komp-read-body h3 { font-size: 1.08rem; font-weight: 700; margin: 14px 0 6px; }
.komp-edit-area p, .komp-read-body p { margin: 8px 0; }
.komp-edit-area ul, .komp-edit-area ol, .komp-read-body ul, .komp-read-body ol { margin: 8px 0 8px 24px; }
.komp-edit-area a, .komp-read-body a, .komp-link { color: var(--accent); cursor: pointer; }
.komp-edit-area hr, .komp-read-body hr { border: none; border-top: 1px solid var(--border); margin: 16px 0; }
.komp-table { border-collapse: collapse; margin: 12px 0; }
.komp-table td, .komp-table th { border: 1px solid var(--border-s); padding: 7px 11px; min-width: 40px; }
.komp-colsgrid { display: grid; gap: 18px; margin: 12px 0; }
.komp-col { min-width: 0; }
.komp-frac { display: inline-flex; flex-direction: column; text-align: center; vertical-align: middle; margin: 0 3px; }
.komp-frac-n { border-bottom: 1.5px solid currentColor; padding: 0 4px; line-height: 1.2; }
.komp-frac-d { padding: 0 4px; line-height: 1.2; }
.komp-img { display: inline-block; position: relative; max-width: 100%; vertical-align: top; }
.komp-img img { width: 100%; height: auto; display: block; border-radius: 8px; }
.komp-img-left { float: left; margin: 4px 16px 8px 0; }
.komp-img-right { float: right; margin: 4px 0 8px 16px; }
.komp-img-center { display: block; margin: 12px auto; }
.komp-img-free { display: block; }
.komp-imgctl { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); display: none; gap: 2px; background: var(--surface3); border: 1px solid var(--border-s); border-radius: 8px; padding: 3px; z-index: 3; }
.komp-img:hover .komp-imgctl { display: flex; }
.komp-ic { background: var(--surface); border: 1px solid var(--border); border-radius: 5px; color: var(--text); width: 26px; height: 24px; font-size: 12px; cursor: pointer; }
.komp-ic:hover { color: var(--accent); border-color: var(--accent); }
.komp-ic-sep { width: 1px; background: var(--border); margin: 0 2px; }
.komp-imgx { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border-radius: 50%; background: var(--danger); color: #fff; border: none; font-size: 12px; cursor: pointer; display: none; align-items: center; justify-content: center; z-index: 3; }
.komp-img:hover .komp-imgx { display: flex; }
/* Farb-Popover */
#komp-colorpop { position: fixed; z-index: 200; background: var(--surface2); border: 1px solid var(--border-s); border-radius: 11px; padding: 10px; box-shadow: var(--shadow); width: 210px; }
.komp-cp-row { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }
.komp-sw { width: 24px; height: 24px; border-radius: 6px; border: 1px solid rgba(128,128,128,.3); cursor: pointer; }
.komp-cp-row2 { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.komp-cp-custom { font-size: .74rem; color: var(--text-muted); display: flex; align-items: center; gap: 6px; cursor: pointer; }
.komp-cp-reset { background: var(--surface3); border: 1px solid var(--border); border-radius: 6px; padding: 5px 9px; font-size: .72rem; color: var(--text); cursor: pointer; }
/* Link-Picker + Suchoverlay */
#komp-linkpicker, #komp-searchov { position: fixed; inset: 0; z-index: 210; background: rgba(4,8,9,.55); backdrop-filter: blur(4px); display: none; align-items: flex-start; justify-content: center; padding-top: 12vh; }
.komp-lp-inner, .komp-so-inner { width: min(520px, 92vw); background: var(--surface); border: 1px solid var(--border-s); border-radius: 16px; box-shadow: var(--shadow); overflow: hidden; }
.komp-lp-head, .komp-so-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--border); font-weight: 700; }
.komp-lp-head button, .komp-so-head button { background: none; border: none; color: var(--text-muted); font-size: 15px; cursor: pointer; }
#komp-lp-search, #komp-so-input { width: calc(100% - 32px); margin: 14px 16px; background: var(--surface2); border: 1px solid var(--border); border-radius: 9px; padding: 9px 12px; font-size: .86rem; color: var(--text); }
#komp-lp-search:focus, #komp-so-input:focus { border-color: var(--accent); outline: none; }
.komp-lp-list, .komp-so-list { max-height: 50vh; overflow-y: auto; padding: 0 12px 14px; display: flex; flex-direction: column; gap: 3px; }
.komp-lp-item, .komp-sr-item { text-align: left; background: var(--surface2); border: 1px solid var(--border); border-radius: 8px; padding: 9px 12px; font-size: .84rem; color: var(--text); cursor: pointer; display: flex; justify-content: space-between; gap: 10px; }
.komp-lp-item:hover, .komp-sr-item:hover { border-color: var(--accent); }
.komp-sr-count { font-family: var(--font-m); font-size: .68rem; color: var(--text-muted); white-space: nowrap; }

/* ════════════════════════ TOAST ════════════════════════ */
#toasts { position: fixed; bottom: 22px; right: 22px; z-index: 300; display: flex; flex-direction: column; gap: 8px; }
.toast {
  background: var(--surface2); border: 1px solid var(--border-s); border-left: 4px solid var(--accent);
  color: var(--text); border-radius: 10px; padding: 11px 17px; font-size: .8rem; box-shadow: var(--shadow);
  opacity: 0; transform: translateY(8px); transition: all .22s; max-width: 320px;
}
.toast.show { opacity: 1; transform: none; }
.toast.err { border-left-color: var(--danger); }
.toast.ok { border-left-color: var(--ok); }

@media (max-width: 760px) {
  main { padding: 0 14px 130px; }
  .topbar { margin: 0 -14px; padding: 10px 14px; }
  .searchwrap { width: 100%; order: 5; }
  .detail-head .acts { margin-left: 0; width: 100%; }
}
@media print { body { display: none; } }

/* ════════════════════════ BESTELLBUCH-PANEL ════════════════════════ */
#panel-bestellbuch { width: min(96vw, 900px); }
#panel-bestellbuch .panel-b { display: flex; flex-direction: column; gap: 14px; overflow-y: auto; }

/* Status-Leiste im Panel */
.bb-statusbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: var(--radius-s); padding: 9px 14px; font-size: .8rem;
}
.bb-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--danger); flex: none; transition: background .3s; }
.bb-dot.on { background: var(--ok); }
.bb-folder { font-family: var(--font-m); background: var(--surface3); border: 1px solid var(--border); padding: 2px 9px; border-radius: 6px; font-size: .75rem; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bb-statusbar .grow { flex: 1; }
.bb-statusbar .bb-msg { font-size: .75rem; color: var(--text-muted); max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bb-statusbar .bb-msg.err { color: var(--danger); }

/* Bücher-Kacheln */
.bb-books { display: flex; gap: 10px; flex-wrap: wrap; }
.bb-book {
  flex: 1 1 160px; background: var(--surface2); border: 1px solid var(--border);
  border-radius: var(--radius-s); padding: 10px 13px;
}
.bb-book .bk-top { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.bb-book .bk-name { font-weight: 700; font-size: .82rem; color: var(--text); }
.bb-book .bk-tag { margin-left: auto; font-size: .68rem; font-weight: 700; padding: 2px 8px; border-radius: 20px; background: var(--surface3); color: var(--text-muted); }
.bb-book.is-active .bk-tag { background: var(--accent); color: var(--on-accent); }
.bb-book.is-full .bk-tag { background: color-mix(in srgb, var(--warn) 20%, var(--surface3)); color: var(--warn); }
.bb-book.is-done .bk-tag { background: color-mix(in srgb, var(--ok) 18%, var(--surface3)); color: var(--ok); }
.bb-meter { height: 6px; border-radius: 6px; background: var(--surface3); margin: 9px 0 5px; overflow: hidden; }
.bb-meter > i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-h)); transition: width .3s; }
.bb-meter > i.done { background: linear-gradient(90deg, var(--ok), #059669); }
.bb-book .bk-stats { font-size: .7rem; color: var(--text-muted); }

/* Setup-Box */
.bb-setup { display: flex; flex-direction: column; gap: 10px; }
.bb-callout {
  background: var(--surface2); border: 1px solid var(--border);
  border-left: 4px solid var(--accent); border-radius: var(--radius-s);
  padding: 11px 14px; font-size: .8rem; color: var(--text-muted);
}
.bb-steps { font-size: .8rem; color: var(--text-muted); margin: 0; padding-left: 18px; }
.bb-steps li { margin: 4px 0; }

/* Eingabeformular */
.bb-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); gap: 10px; }
.bb-fg { display: flex; flex-direction: column; }
.bb-fg label { font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 4px; }
.bb-fg input, .bb-fg select {
  padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-s);
  font: inherit; font-size: .82rem; background: var(--surface); color: var(--text);
}
.bb-fg input:focus, .bb-fg select:focus { outline: 2px solid var(--accent); border-color: var(--accent); }
.bb-save {
  background: var(--ok); color: #fff; border: none; font-size: .82rem; font-weight: 700;
  padding: 9px 16px; border-radius: var(--radius-s); cursor: pointer;
}
.bb-save:hover { filter: brightness(1.1); }
.bb-save:disabled { background: var(--border-s); color: var(--text-faint); cursor: not-allowed; }

/* Tabs + Tabellen */
.bb-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); padding-bottom: 0; align-items: center; }
.bb-tab {
  background: transparent; border: none; border-bottom: 3px solid transparent;
  color: var(--text-muted); font-size: .82rem; font-weight: 700;
  padding: 8px 14px 10px; cursor: pointer; border-radius: var(--radius-s) var(--radius-s) 0 0;
}
.bb-tab:hover { color: var(--text); background: var(--surface2); }
.bb-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.bb-tab .cnt {
  display: inline-block; margin-left: 6px; background: var(--surface3);
  color: var(--text-muted); font-size: .68rem; font-weight: 700; padding: 1px 7px; border-radius: 20px;
}
.bb-tab.active .cnt { background: var(--accent); color: var(--on-accent); }
.bb-tabs-spacer { flex: 1; }
.bb-search-wrap { display: flex; align-items: center; gap: 6px; padding-bottom: 6px; }
.bb-search-wrap input {
  width: 260px; padding: 6px 12px; border: 1.5px solid var(--border); border-radius: 20px;
  font: inherit; font-size: .78rem; background: var(--surface2); color: var(--text); transition: border-color .15s;
}
.bb-search-wrap input:focus { outline: none; border-color: var(--accent); background: var(--surface); }
.bb-search-wrap input::placeholder { color: var(--text-faint); }
.bb-search-clear { background: none; border: none; cursor: pointer; color: var(--text-muted); font-size: 16px; line-height: 1; padding: 0 2px; display: none; }
.bb-search-clear.visible { display: block; }

.bb-panel { display: none; flex: 1; min-height: 0; flex-direction: column; }
.bb-panel.active { display: flex; }
.bb-tbl-wrap { overflow: auto; flex: 1; min-height: 0; }
.bb-tbl-wrap table { width: 100%; border-collapse: collapse; font-size: .78rem; table-layout: fixed; }
.bb-tbl-wrap th, .bb-tbl-wrap td { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--border); vertical-align: middle; overflow-wrap: anywhere; }
.bb-tbl-wrap thead th { position: sticky; top: 0; background: var(--surface2); color: var(--text-muted); font-size: .66rem; text-transform: uppercase; letter-spacing: .08em; z-index: 1; }
.bb-tbl-wrap tbody tr:hover { background: var(--surface2); }
.bb-tbl-wrap td .src { display: block; font-size: .68rem; color: var(--text-faint); margin-top: 2px; }
.bb-pill { display: inline-block; font-size: .65rem; font-weight: 700; padding: 2px 7px; border-radius: 20px; }
.bb-pill.call { background: color-mix(in srgb, var(--danger) 15%, var(--surface)); color: var(--danger); }
.bb-pill.ok { background: color-mix(in srgb, var(--ok) 15%, var(--surface)); color: var(--ok); }
.bb-pill.no { background: color-mix(in srgb, var(--danger) 15%, var(--surface)); color: var(--danger); }
.bb-pill.arch { background: var(--surface3); color: var(--text-faint); }
.bb-empty { padding: 24px; text-align: center; color: var(--text-faint); font-size: .8rem; }

/* Inline Wareneingang */
.bb-we { display: flex; align-items: center; gap: 5px; flex-wrap: nowrap; }
.bb-we input { padding: 6px 7px; border: 1px solid var(--border); border-radius: 7px; font: inherit; font-size: .75rem; background: var(--surface); color: var(--text); }
.bb-we input.bb-we-date { width: 70px; }
.bb-we input.bb-we-ma { width: 66px; }
.bb-we select { padding: 6px 5px; border: 1px solid var(--border); border-radius: 7px; font-size: .72rem; background: var(--surface); color: var(--text); }
.bb-we input:focus, .bb-we select:focus { outline: 2px solid var(--accent); border-color: var(--accent); }
.bb-icon {
  display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
  border: 1px solid var(--border); background: var(--surface2); border-radius: 7px;
  cursor: pointer; color: var(--accent); flex: none; font-size: 14px;
}
.bb-icon:hover { background: var(--surface3); }
.bb-icon.go { background: var(--ok); border-color: var(--ok); color: #fff; }
.bb-icon.go:hover { filter: brightness(1.1); }
.bb-icon.go:disabled { background: var(--border); border-color: var(--border); color: var(--text-faint); cursor: not-allowed; }

/* Zielhinweis + Aktionen */
.bb-form-actions { margin-top: 12px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.bb-target-hint { font-size: .75rem; color: var(--text-muted); }

/* ═══════════════ Laufkunden (Laufkundenzähler) ═══════════════ */
/* Kalender */
.lk-cal { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius, 12px); padding: 12px; }
.lk-cal-h { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.lk-cal-title { flex: 1; text-align: center; font-weight: 800; font-size: .95rem; line-height: 1.15; }
.lk-cal-sub { display: block; font-weight: 600; font-size: .64rem; color: var(--text-muted); margin-top: 2px; }
.lk-nav { width: 32px; height: 32px; border-radius: 9px; border: 1px solid var(--border); background: var(--surface);
  color: var(--text); font-size: 1.1rem; line-height: 1; cursor: pointer; transition: all .12s; }
.lk-nav:hover { border-color: var(--accent); color: var(--accent); }
.lk-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.lk-dows { margin-bottom: 4px; }
.lk-dow { text-align: center; font-size: .6rem; font-weight: 700; color: var(--text-faint); text-transform: uppercase; letter-spacing: .04em; }
.lk-day { position: relative; aspect-ratio: 1 / 1; border: 1px solid var(--border); background: var(--surface);
  border-radius: 9px; color: var(--text); cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-size: .78rem; font-weight: 600; transition: all .1s; padding: 0; }
.lk-day.pad { border: none; background: transparent; cursor: default; pointer-events: none; }
.lk-day:hover:not(.pad) { border-color: var(--accent); }
.lk-day.has { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.lk-day.sel { outline: 2px solid var(--accent); outline-offset: -2px; }
.lk-day.today { background: var(--ok); border-color: var(--ok); color: #062018; font-weight: 800; }
.lk-day.today.sel { outline-color: #062018; }
.lk-badge { position: absolute; top: 2px; right: 3px; min-width: 15px; height: 15px; padding: 0 3px;
  border-radius: 999px; background: var(--accent); color: var(--on-accent); font-size: .58rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center; line-height: 1; }
.lk-day.today .lk-badge { background: #062018; color: var(--ok); }
.lk-today { width: 100%; margin-top: 10px; padding: 7px; border-radius: 9px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text-muted); font-size: .72rem; font-weight: 700; cursor: pointer; }
.lk-today:hover { border-color: var(--ok); color: var(--ok); }

/* „Laufkunde eintragen" + Tagesliste */
.lk-add { width: 100%; margin: 14px 0 4px; font-weight: 800; }
.lk-daysum { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 14px 2px 8px; }
.lk-daysum b { font-size: .95rem; }
.lk-daysum span { font-size: .72rem; color: var(--text-muted); font-family: var(--font-m); }
.lk-tile { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius, 12px); padding: 11px 12px; margin-bottom: 9px; }
.lk-tile-h { display: flex; align-items: center; justify-content: space-between; }
.lk-tile-h b { font-size: .82rem; }
.lk-del { border: none; background: transparent; color: var(--text-faint); cursor: pointer; font-size: .8rem; line-height: 1; padding: 2px 4px; border-radius: 6px; opacity: .5; }
.lk-del:hover { color: var(--danger); background: color-mix(in srgb, var(--danger) 14%, transparent); opacity: 1; }
.lk-path { font-size: .74rem; color: var(--text-muted); line-height: 1.35; margin: 5px 0 10px; }
.lk-be { display: flex; gap: 8px; }
.lk-be-label { flex: 1; display: flex; align-items: center; justify-content: space-between; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; font-size: .76rem; color: var(--text-muted); font-weight: 600; }
.lk-be-inp { width: 56px; background: transparent; border: none; font-family: var(--font-m); font-size: .9rem; font-weight: 800; color: var(--text); outline: none; text-align: right; padding: 0; }
.lk-be-inp.on { color: var(--accent); }

/* Durchklick-Overlay (eine Ebene je Schritt) */
.lk-overlay { position: fixed; inset: 0; z-index: 4000; display: none; align-items: center; justify-content: center;
  padding: 20px; background: color-mix(in srgb, #000 55%, transparent); backdrop-filter: blur(2px); }
.lk-overlay.open { display: flex; }
.lk-ov-box { width: min(440px, 100%); max-height: 88vh; overflow-y: auto; background: var(--surface);
  border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow, 0 20px 60px rgba(0,0,0,.4)); padding: 18px; }
.lk-crumb { font-size: .72rem; font-weight: 700; color: var(--text-muted); text-align: center; margin-bottom: 14px; line-height: 1.4; }
.lk-opts { display: flex; flex-direction: column; gap: 9px; }
.lk-opt { display: flex; align-items: center; justify-content: space-between; gap: 10px; text-align: left;
  padding: 15px 16px; border: 1px solid var(--border); background: var(--surface2); color: var(--text);
  border-radius: 12px; font-size: .9rem; font-weight: 700; cursor: pointer; transition: all .12s; }
.lk-opt:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface2)); transform: translateY(-1px); }
.lk-arr { color: var(--accent); font-size: 1.15rem; font-weight: 800; }
.lk-cancel { width: 100%; margin-top: 16px; padding: 13px; border: 1px solid var(--border); background: var(--surface);
  color: var(--text-muted); border-radius: 12px; font-size: .85rem; font-weight: 700; cursor: pointer; }
.lk-cancel:hover { border-color: var(--danger); color: var(--danger); }

/* Laufkunden-Statistik-Overlay (i-Symbol im Panelkopf) */
.lk-stat-row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:11px 2px;border-bottom:1px solid var(--line,rgba(128,128,128,.18));}
.lk-stat-row:last-of-type{border-bottom:none;}
.lk-stat-row span{color:var(--muted,#7a7a7a);}
.lk-stat-row b{font-size:1.3em;font-variant-numeric:tabular-nums;}
.lk-stat-note{margin-top:12px;font-size:.8em;color:var(--muted,#8a8a8a);line-height:1.45;}

/* Bestellbuch: Bleistift-Bearbeitung offener Zeilen */
.bb-editcell{width:38px;text-align:center;padding-right:0;}
.bb-edit-tr > td{background:var(--panel,rgba(128,128,128,.06));}
.bb-edit-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:10px 14px;align-items:end;padding:12px 8px;}
.bb-eg{display:flex;flex-direction:column;gap:3px;font-size:.82em;}
.bb-eg span{color:var(--muted,#7a7a7a);}
.bb-eg input,.bb-eg select{padding:6px 8px;border:1px solid var(--line,rgba(128,128,128,.3));border-radius:6px;background:var(--card,#fff);color:inherit;font:inherit;}
.bb-edit-actions{display:flex;gap:8px;align-items:end;}

/* Laufkunden-Statistik: Gruppen-Überschriften */
.lk-stat-group{margin:16px 0 2px;font-size:.72em;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted,#8a8a8a);}
.lk-stat-group:first-child{margin-top:2px;}
.lk-stats-box{max-width:430px;}

/* ── Anrufliste-Overlay ── */
.anruf-ov{position:fixed;inset:0;z-index:1200;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.45);}
.anruf-card{background:var(--card,#fff);color:inherit;width:min(1100px,94vw);max-height:88vh;overflow:auto;border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.35);padding:0;}
.anruf-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--line,rgba(128,128,128,.18));position:sticky;top:0;background:var(--card,#fff);z-index:1;}
.anruf-head h3{margin:0;font-size:1.2em;}
.anruf-x{background:none;border:none;font-size:1.2em;cursor:pointer;color:inherit;padding:4px 8px;border-radius:6px;}
.anruf-x:hover{background:var(--panel,rgba(128,128,128,.12));}
.anruf-add{display:flex;gap:8px;flex-wrap:wrap;padding:14px 20px;border-bottom:1px solid var(--line,rgba(128,128,128,.12));}
.anruf-add input{flex:1 1 140px;padding:7px 9px;border:1px solid var(--line,rgba(128,128,128,.3));border-radius:7px;background:var(--card,#fff);color:inherit;font:inherit;}
.anruf-tablewrap{padding:6px 12px 18px;}
.anruf-table{width:100%;border-collapse:collapse;font-size:.92em;}
.anruf-table th{text-align:left;padding:8px 10px;color:var(--muted,#7a7a7a);font-size:.78em;text-transform:uppercase;letter-spacing:.04em;border-bottom:1px solid var(--line,rgba(128,128,128,.2));}
.anruf-table td{padding:9px 10px;border-bottom:1px solid var(--line,rgba(128,128,128,.1));vertical-align:middle;}
.an-editcol,.an-actcol{width:40px;}
.an-icon{background:none;border:1px solid var(--line,rgba(128,128,128,.3));border-radius:6px;cursor:pointer;color:inherit;padding:3px 7px;line-height:1;display:inline-flex;align-items:center;justify-content:center;}
.an-icon:hover{background:var(--panel,rgba(128,128,128,.12));}
.an-try{white-space:nowrap;}
.an-count{display:inline-block;min-width:20px;text-align:center;font-variant-numeric:tabular-nums;font-weight:600;cursor:help;margin-right:6px;}
.an-plus{font-weight:700;}
.an-actcell{white-space:nowrap;}
.an-ask{font-size:.85em;margin-right:6px;color:var(--muted,#7a7a7a);}
.an-edit-tr>td{background:var(--panel,rgba(128,128,128,.06));}
.an-edit-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px 14px;align-items:end;padding:12px 6px;}
.an-eg{display:flex;flex-direction:column;gap:3px;font-size:.82em;}
.an-eg span{color:var(--muted,#7a7a7a);}
.an-eg input{padding:6px 8px;border:1px solid var(--line,rgba(128,128,128,.3));border-radius:6px;background:var(--card,#fff);color:inherit;font:inherit;}
.an-edit-actions{display:flex;gap:8px;align-items:end;}
.anruf-empty{padding:26px;text-align:center;color:var(--muted,#8a8a8a);}

/* Anrufliste: Rahmenfarbe (grün→rot), Brief-Status, rote Badges unten rechts */
.anruf-table tbody td:first-child{border-left:4px solid var(--an-frame, transparent);}
.an-letter{font-weight:700;color:var(--danger,#c0392b);}
#anruf-toasts{display:flex;flex-direction:column;gap:9px;max-width:320px;}
.anruf-toast{background:var(--surface2,#fff);border:1px solid var(--border-s,rgba(128,128,128,.25));border-left:4px solid var(--danger,#c0392b);border-radius:11px;padding:11px 14px;box-shadow:var(--shadow,0 8px 24px rgba(0,0,0,.18));}
.anruf-toast .at-h{font-size:.68rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--danger,#c0392b);display:flex;align-items:center;gap:7px;}
.anruf-toast .at-dot{width:8px;height:8px;border-radius:50%;background:currentColor;}
.anruf-toast .at-txt{font-size:.84rem;margin-top:5px;color:var(--text,inherit);word-break:break-word;}
.anruf-toast{position:relative;padding-right:32px;}
.anruf-toast .at-x{position:absolute;top:7px;right:8px;width:20px;height:20px;border:none;border-radius:50%;background:transparent;color:var(--text-muted,#888);font-size:.82rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.anruf-toast .at-x:hover{background:var(--surface3,rgba(0,0,0,.08));color:var(--text,inherit);}
.anruf-toast .at-sub{font-size:.72rem;margin-top:4px;color:var(--text-muted,#888);}

/* Anrufliste: prominente Alarm-Notiz unten rechts (ersetzt die Systembenachrichtigung) */
.anruf-alarm{display:flex;align-items:center;gap:10px;background:#e11d2a;color:#fff;border-radius:12px;padding:13px 15px;max-width:320px;box-shadow:0 10px 28px rgba(225,29,42,.45);font-weight:700;animation:anruf-alarm-pulse 1.1s ease-in-out infinite;}
.anruf-alarm .aa-txt{flex:1;font-size:.92rem;line-height:1.3;}
.anruf-alarm .aa-x{background:rgba(255,255,255,.22);border:none;color:#fff;border-radius:6px;cursor:pointer;padding:3px 8px;font-size:.9em;line-height:1;}
.anruf-alarm .aa-x:hover{background:rgba(255,255,255,.38);}
@keyframes anruf-alarm-pulse{0%,100%{box-shadow:0 10px 28px rgba(225,29,42,.30);}50%{box-shadow:0 10px 34px rgba(225,29,42,.75);}}

/* Speichern-Button in die Feld-Reihe integrieren: sitzt in einer Linie mit den
   Eingabefeldern, wenn die Breite reicht, sonst rutscht er in die nächste Zeile. */
.bb-form-grid > .bb-save { align-self: end; grid-column: span 2; white-space: nowrap; }

/* ── Bestellbuch: Seite fixieren, nur die Bestellliste scrollt ── */
body.bb-full { overflow: hidden; }
body.bb-full main { height: 100vh; box-sizing: border-box; overflow: hidden;
  display: flex; flex-direction: column; padding-bottom: 14px; }
body.bb-full #view-bestellbuch { flex: 1; min-height: 0; display: flex !important; flex-direction: column; }
body.bb-full #bb-panel-body { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 12px; }
body.bb-full #bb-list-wrap { flex: 1; min-height: 0; display: flex; flex-direction: column; }
body.bb-full #bb-list-wrap .bb-panel.active { flex: 1; min-height: 0; }

/* Anrufliste: Warte-Optionen (meldet sich selbst / Anrufen ab) */
.anruf-table .an-wait { white-space: nowrap; }
.anruf-table .an-wait label { display: flex; align-items: center; gap: 4px; font-size: .74rem; color: var(--text-muted, #888); cursor: pointer; }
.anruf-table .an-wait .an-wait-from { margin-top: 2px; }
.anruf-table .an-wait input[type=date] { font: inherit; font-size: .74rem; padding: 1px 4px; border: 1px solid var(--border-s, rgba(0,0,0,.18)); border-radius: 6px; background: var(--surface, #fff); color: inherit; }
.anruf-table tr.an-paused { opacity: .55; }
.anruf-table tr.an-paused td:not(.an-wait):not(.an-actcell):not(.an-editcell) { font-style: italic; }

/* Bestellbuch: Inventur vormerken */
.bb-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.bb-inv-cfg { position: relative; flex: none; }
.bb-inv-cfg > summary { cursor: pointer; font-size: .82rem; font-weight: 800; color: var(--text-muted); padding: 6px 12px; list-style: none; border: 1px solid var(--border-s, rgba(0,0,0,.18)); border-radius: 9px; background: var(--surface2, var(--surface)); white-space: nowrap; }
.bb-inv-cfg > summary::-webkit-details-marker { display: none; }
.bb-inv-cfg[open] > summary { border-bottom-color: transparent; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
/* aufgeklappt: Popover unter dem Button, rechtsbündig */
.bb-inv-cfg[open] > .bb-inv-grid { position: absolute; right: 0; top: 100%; z-index: 40;
  display: flex; flex-wrap: wrap; gap: 12px; align-items: end; width: max-content; max-width: 82vw;
  padding: 14px; background: var(--surface, #fff); border: 1px solid var(--border-s, rgba(0,0,0,.18));
  border-top-right-radius: 0; border-radius: 12px; box-shadow: 0 14px 34px rgba(0,0,0,.20); }
.bb-inv-grid { display: none; }
.bb-inv-grid label { display: flex; flex-direction: column; gap: 3px; font-size: .7rem; text-transform: uppercase; letter-spacing: .03em; color: var(--text-muted); font-weight: 700; }
.bb-inv-grid input[type=date] { font: inherit; font-size: .82rem; padding: 5px 7px; border: 1px solid var(--border-s, rgba(0,0,0,.18)); border-radius: 8px; background: var(--surface, #fff); color: inherit; }
/* Warn-/Sperr-Banner: rot, unter dem Buch */
.bb-inv-banner { padding: 10px 14px; border-radius: 9px; font-size: .86rem; font-weight: 600; margin: 4px 0 14px; }
.bb-inv-banner.warn,
.bb-inv-banner.lock { background: color-mix(in srgb, #ef4444 18%, var(--surface)); border: 1px solid #ef4444; color: var(--text); }
/* ════════════════════════ ANSICHTS-ÜBERGÄNGE ════════════════════════
   Richtungsabhängige Wechsel zwischen den Ansichten. Die Klassen werden
   AUSSCHLIESSLICH von uebergang.js gesetzt, und zwar nur im Darstellungs-
   modus „Schön" — im Modus „Simpel" wird hier nichts aktiv.

   Ausfahrende Ansicht: uebergang.js friert sie per position:fixed an ihrer
   Bildschirmposition ein ([data-tx-ghost]); sie liegt mit z-index 30 unter
   der Topbar (z-index 40) und fängt keine Klicks mehr ab.

   ZWEITAKT (wichtig): Aus- und Einfahrt laufen NACHEINANDER, nicht
   gleichzeitig. Die Einfahrt startet mit der Verzögerung --tx-out, also
   genau dann, wenn die Ausfahrt fertig ist. Liefen beide parallel, sähe
   man je nach Beschleunigungskurve beide Inhalte übereinander — der alte
   schöbe sich erst raus, wenn der neue längst eingeblendet ist.
   Deshalb: EINE gemeinsame Ausfahrtdauer (--tx-out), die zugleich die
   Verzögerung der Einfahrt ist. Wer hier am Tempo dreht, dreht an beiden
   Stellen zugleich — das ist Absicht.

   --tx-out muss zu TX_MS in uebergang.js passen (dort Sicherheitsnetz für
   das Aufräumen des Geistes). Die globale prefers-reduced-motion-Regel in
   02-base-shell.css schaltet alles hier ab; uebergang.js prüft es zusätzlich.
   ══════════════════════════════════════════════════════════════════════ */

:root {
  --tx-out: .18s;   /* Takt 1: alte Ansicht raus — zugleich Verzögerung für Takt 2 */
  --tx-in:  .24s;   /* Takt 2: neue Ansicht rein */
}

[data-tx-ghost] { overflow: hidden; }

/* ── Takt 1: Ausfahrt ──
   Kurve mit zügigem Anlauf (ease-in): die alte Ansicht setzt sich sofort in
   Bewegung, statt erst kurz stehenzubleiben. */
@keyframes txExitFade  { from { opacity: 1; transform: translateX(0); }  to { opacity: 0; transform: translateX(-18px); } }
@keyframes txExitRight { from { opacity: 1; transform: translateX(0); }  to { opacity: 0; transform: translateX(48px); } }
@keyframes txExitUp    { from { opacity: 1; transform: translateY(0); }  to { opacity: 0; transform: translateY(-42px); } }
@keyframes txExitDown  { from { opacity: 1; transform: translateY(0); }  to { opacity: 0; transform: translateY(42px); } }

.tx-exit-fade  { animation: txExitFade  var(--tx-out) cubic-bezier(.4,0,1,1) forwards; }
.tx-exit-right { animation: txExitRight var(--tx-out) cubic-bezier(.4,0,1,1) forwards; }
.tx-exit-up    { animation: txExitUp    var(--tx-out) cubic-bezier(.4,0,1,1) forwards; }
.tx-exit-down  { animation: txExitDown  var(--tx-out) cubic-bezier(.4,0,1,1) forwards; }

/* ── Takt 2: Einfahrt ──
   Verzögerung = var(--tx-out), Füllmodus `both`: dadurch steht die neue
   Ansicht während der gesamten Ausfahrt schon auf dem ersten Keyframe
   (opacity 0) — sie ist also unsichtbar, bis die alte weg ist. Genau das
   verhindert die Überlagerung. */
@keyframes txEnterRight { from { opacity: 0; transform: translateX(54px); } to { opacity: 1; transform: translateX(0); } }
@keyframes txEnterFade  { from { opacity: 0; transform: translateY(9px);  } to { opacity: 1; transform: translateY(0); } }

.tx-enter-right { animation: txEnterRight var(--tx-in) cubic-bezier(.2,.8,.3,1) var(--tx-out) both; }
.tx-enter-fade  { animation: txEnterFade  var(--tx-in) ease-out                 var(--tx-out) both; }