/* EULEN MEDIA Studio – Milchglas (seit 27.10.2026). Weich und ruhig wie bei Apple: deckendes Milchglas in Ebenen über
   einem sehr hellen Pastell-Hintergrund, den jede Person selbst wählt (Konto → Darstellung, auch eigenes Foto).
   Feine Haarlinien statt Kanten, sehr blasse Schatten, Orange nur noch klein (gewähltes Menü-Symbol, Zähler, ein
   Akzent im Diagramm), Hauptknopf Graphit. Liegt über theme.css – alle Werte stehen hier oben an einer Stelle. */

:root {
  /* Grund und Hintergrund (sand ist Standard; html[data-bg] wählt, siehe theme.js) */
  --app-base: #f0eae2;
  --app-bg:
    radial-gradient(42% 38% at 18% 22%, #f1dcc0 0%, transparent 70%),
    radial-gradient(38% 40% at 82% 18%, #dde7dc 0%, transparent 70%),
    radial-gradient(45% 45% at 70% 82%, #ecd3c6 0%, transparent 70%),
    radial-gradient(40% 40% at 12% 85%, #d9e0ec 0%, transparent 70%);
  /* Milchglas in drei Stufen: große Flächen, Karten, Felder/Kapseln */
  --glass-1: rgba(255, 255, 255, 0.52);
  --glass-2: rgba(255, 255, 255, 0.62);
  --glass-3: rgba(255, 255, 255, 0.86);
  --glass-sheet: rgba(250, 248, 245, 0.9);
  --glass-blur: blur(40px) saturate(125%);
  --hair: rgba(20, 18, 15, 0.06);
  --hair-2: rgba(20, 18, 15, 0.09);
  --top-light: inset 0 1px 0 rgba(255, 255, 255, 0.75);
  --lift: 0 1px 2px rgba(20, 18, 15, 0.03), 0 12px 40px -16px rgba(20, 18, 15, 0.08);
  /* Hauptknopf: Graphit statt Orange, ohne Schatten */
  --btn: #2b2926;
  --btn-hover: #3a3733;
  --btn-ink: #ffffff;
  /* Bestehende Werte an das Glas angepasst */
  --bg: #f3efe9;
  --surface: #ffffff;
  --surface-2: rgba(60, 46, 32, 0.055);
  --ink: #1d1c1a;
  --ink-soft: #4a4743;
  --muted: #7d7975;
  --line: rgba(20, 18, 15, 0.07);
  --line-strong: rgba(20, 18, 15, 0.12);
  --pill: rgba(20, 18, 15, 0.05);
  --accent-soft: rgba(231, 132, 8, 0.14);
  --radius: 22px;
  --radius-sm: 12px;
  --pop-shadow: 0 1px 2px rgba(20, 18, 15, 0.04), 0 18px 48px -18px rgba(20, 18, 15, 0.22);
  --sb-glass: var(--glass-1);
  --sb-hi: rgba(255, 255, 255, 0.75);
  --sb-glass-line: var(--hair);
  --card: var(--glass-2);
}
:root[data-bg="nebel"] { --app-base: #e9ecef; --app-bg: radial-gradient(45% 40% at 20% 25%, #d6e2f0 0%, transparent 70%), radial-gradient(40% 40% at 80% 70%, #d2dee8 0%, transparent 70%), radial-gradient(35% 35% at 60% 15%, #ebeee6 0%, transparent 70%); }
:root[data-bg="salbei"] { --app-base: #e9ece4; --app-bg: radial-gradient(45% 40% at 25% 30%, #d9e5d1 0%, transparent 70%), radial-gradient(40% 40% at 80% 75%, #d2e0cd 0%, transparent 70%), radial-gradient(35% 35% at 75% 15%, #f0e8d8 0%, transparent 70%); }
:root[data-bg="rose"] { --app-base: #efe8e4; --app-bg: radial-gradient(45% 40% at 22% 25%, #f0d6d1 0%, transparent 70%), radial-gradient(40% 40% at 78% 72%, #e8d5e0 0%, transparent 70%), radial-gradient(35% 35% at 70% 18%, #f3e5d4 0%, transparent 70%); }
:root[data-bg="plain"] { --app-bg: none; }

/* Dunkel: Graphit-Milchglas */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --app-base: #1c1b1a;
    --app-bg: radial-gradient(42% 38% at 18% 22%, #3a3530 0%, transparent 70%), radial-gradient(45% 45% at 70% 82%, #34302e 0%, transparent 70%), radial-gradient(40% 40% at 85% 15%, #2c302c 0%, transparent 70%);
    --glass-1: rgba(30, 29, 27, 0.66);
    --glass-2: rgba(46, 44, 42, 0.6);
    --glass-3: rgba(64, 61, 58, 0.62);
    --glass-sheet: rgba(36, 35, 33, 0.92);
    --hair: rgba(255, 255, 255, 0.07);
    --hair-2: rgba(255, 255, 255, 0.1);
    --top-light: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    --lift: 0 1px 2px rgba(0, 0, 0, 0.2), 0 16px 40px -18px rgba(0, 0, 0, 0.45);
    --btn: #f2f0ec; --btn-hover: #ffffff; --btn-ink: #1d1c1a;
    --bg: #1f1e1c;
    --surface: #2c2a28;
    --surface-2: rgba(255, 255, 255, 0.06);
    --ink: #f2f0ec; --ink-soft: #c9c5bf; --muted: #9d9993;
    --line: rgba(255, 255, 255, 0.07); --line-strong: rgba(255, 255, 255, 0.13);
    --pill: rgba(255, 255, 255, 0.07);
    --accent-soft: rgba(231, 132, 8, 0.18);
    --pop-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 22px 50px -18px rgba(0, 0, 0, 0.7);
    --sb-hi: rgba(255, 255, 255, 0.06);
  }
  :root:not([data-theme="light"])[data-bg="nebel"] { --app-base: #1f2123; --app-bg: radial-gradient(45% 40% at 20% 25%, #2e3339 0%, transparent 70%), radial-gradient(40% 40% at 80% 70%, #2a2f33 0%, transparent 70%); }
  :root:not([data-theme="light"])[data-bg="salbei"] { --app-base: #20221f; --app-bg: radial-gradient(45% 40% at 25% 30%, #2f352d 0%, transparent 70%), radial-gradient(40% 40% at 80% 75%, #2b302a 0%, transparent 70%); }
  :root:not([data-theme="light"])[data-bg="rose"] { --app-base: #232020; --app-bg: radial-gradient(45% 40% at 22% 25%, #3a302f 0%, transparent 70%), radial-gradient(40% 40% at 78% 72%, #352e33 0%, transparent 70%); }
  :root:not([data-theme="light"])[data-bg="plain"] { --app-bg: none; }
}
:root[data-theme="dark"] {
  --app-base: #1c1b1a;
  --app-bg: radial-gradient(42% 38% at 18% 22%, #3a3530 0%, transparent 70%), radial-gradient(45% 45% at 70% 82%, #34302e 0%, transparent 70%), radial-gradient(40% 40% at 85% 15%, #2c302c 0%, transparent 70%);
  --glass-1: rgba(30, 29, 27, 0.66);
  --glass-2: rgba(46, 44, 42, 0.6);
  --glass-3: rgba(64, 61, 58, 0.62);
  --glass-sheet: rgba(36, 35, 33, 0.92);
  --hair: rgba(255, 255, 255, 0.07);
  --hair-2: rgba(255, 255, 255, 0.1);
  --top-light: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --lift: 0 1px 2px rgba(0, 0, 0, 0.2), 0 16px 40px -18px rgba(0, 0, 0, 0.45);
  --btn: #f2f0ec; --btn-hover: #ffffff; --btn-ink: #1d1c1a;
  --bg: #1f1e1c;
  --surface: #2c2a28;
  --surface-2: rgba(255, 255, 255, 0.06);
  --ink: #f2f0ec; --ink-soft: #c9c5bf; --muted: #9d9993;
  --line: rgba(255, 255, 255, 0.07); --line-strong: rgba(255, 255, 255, 0.13);
  --pill: rgba(255, 255, 255, 0.07);
  --accent-soft: rgba(231, 132, 8, 0.18);
  --pop-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 22px 50px -18px rgba(0, 0, 0, 0.7);
  --sb-hi: rgba(255, 255, 255, 0.06);
}
:root[data-theme="dark"][data-bg="nebel"] { --app-base: #1f2123; --app-bg: radial-gradient(45% 40% at 20% 25%, #2e3339 0%, transparent 70%), radial-gradient(40% 40% at 80% 70%, #2a2f33 0%, transparent 70%); }
:root[data-theme="dark"][data-bg="salbei"] { --app-base: #20221f; --app-bg: radial-gradient(45% 40% at 25% 30%, #2f352d 0%, transparent 70%), radial-gradient(40% 40% at 80% 75%, #2b302a 0%, transparent 70%); }
:root[data-theme="dark"][data-bg="rose"] { --app-base: #232020; --app-bg: radial-gradient(45% 40% at 22% 25%, #3a302f 0%, transparent 70%), radial-gradient(40% 40% at 78% 72%, #352e33 0%, transparent 70%); }
:root[data-theme="dark"][data-bg="plain"] { --app-bg: none; }

/* ---------- Hintergrund: feste Ebene hinter allem (eigenes Foto weichgezeichnet, gerechnet nur einmal) ---------- */
html { background: var(--app-base); }
html body { background: transparent; }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--app-bg), var(--app-base); }
:root[data-bg="photo"] body::before { background: var(--app-photo, none) center / cover no-repeat, var(--app-base); filter: blur(28px) saturate(115%); transform: scale(1.08); }
/* Über einem Foto etwas mehr Milch, damit Text lesbar bleibt */
:root[data-bg="photo"] { --glass-1: rgba(255, 255, 255, 0.6); --glass-2: rgba(255, 255, 255, 0.7); }
:root[data-theme="dark"][data-bg="photo"] { --glass-1: rgba(30, 29, 27, 0.72); --glass-2: rgba(46, 44, 42, 0.68); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"])[data-bg="photo"] { --glass-1: rgba(30, 29, 27, 0.72); --glass-2: rgba(46, 44, 42, 0.68); } }

/* ---------- Seitenleiste: schwebendes Milchglas ---------- */
@media (min-width: 901px) {
  .sidebar { -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border-color: var(--hair); box-shadow: var(--top-light), var(--lift); border-radius: 28px; }
  /* Inhalt: eine große Milchglas-Fläche rechts neben der Leiste (ohne eigenen Weichzeichner – der Grund ist schon weich) */
  .studio-shell .main { margin: 10px 10px 10px 12px; min-height: calc(100vh - 20px); background: var(--glass-1); border: 1px solid var(--hair); border-radius: 30px; box-shadow: var(--top-light), var(--lift); }
}
.sb-nav .tab, .sb-user { border-radius: 999px; font-weight: 520; color: var(--ink-soft); }
.sb-nav .tab:hover, .sb-user:hover { background: var(--pill); }
.sb-nav .tab[aria-selected="true"], .sb-user[aria-selected="true"], .sb-nav .tab.sb-ai[aria-selected="true"] { background: var(--glass-3); color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgba(20, 18, 15, 0.05); }
.sb-nav .tab[aria-selected="true"] svg { color: var(--accent); }
.sb-brand img { box-shadow: none; }
.sb-brand .spot-btn, .sb-brand #inbox-btn { background: var(--glass-3); border: 1px solid var(--hair); }
.sb-group-system, .sb-foot { border-color: var(--hair-2); }
/* KI-Block oben (Assistent + Content Lab) mit Abstand zu den übrigen Bereichen */
.sb-group-ai:not(:has(> .tab:not([hidden]):not(.perm-off))) { display: none; }
.sb-group-ai { padding-bottom: 0.7rem; border-bottom: 1px solid var(--hair-2); }
.sb-nav .tab.sb-ai { border: 1px solid var(--hair); background: var(--glass-3); }
.sb-nav .tab.sb-ai:hover { background: var(--surface); border-color: var(--hair-2); }
.nav-count { background: var(--accent-soft); color: var(--accent-strong); }
.tab-dot { background: var(--accent); }
.wk-pill { background: var(--glass-2); border: 1px solid var(--hair); box-shadow: var(--top-light); }
.wk-pill[data-state="working"] { background: var(--glass-2); }
.theme-switch { background: var(--glass-3); border: 1px solid var(--hair); }
@media (max-width: 900px) {
  .sidebar { background: var(--glass-sheet); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border-bottom: 1px solid var(--hair); }
  .pwa-tabs { background: var(--glass-sheet); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid var(--hair); }
  .pwa-tab[aria-selected="true"] { background: var(--glass-3); color: var(--ink); }
  .pwa-more-sheet { background: var(--glass-sheet); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
}

/* ---------- Kopf: Überschrift leichter, Bereichs-Reiter als Milchglas-Kapsel ---------- */
.page-head h1 { font-weight: 600; letter-spacing: -0.04em; }
.subnav { background: var(--glass-2); border: 1px solid var(--hair); border-radius: 999px; padding: 3px; box-shadow: var(--top-light); width: max-content; max-width: 100%; }
.subnav-tab[aria-selected="true"] { background: var(--glass-3); color: var(--ink); box-shadow: 0 1px 2px rgba(20, 18, 15, 0.06); }
.seg { background: var(--pill); }
.seg button[aria-checked="true"], .seg button[aria-selected="true"] { background: var(--glass-3); box-shadow: 0 1px 2px rgba(20, 18, 15, 0.06); }

/* ---------- Karten: Milchglas mit Haarlinie und zartem Licht oben ---------- */
.panel, .card, .dash-card, .list-panel, .kpi-panel, .batch-list, .vp-upload, .topo-panel, .fov-tile, .set-card, .labset-store {
  background: var(--card); border: 1px solid var(--hair); box-shadow: var(--top-light);
}
.set-card:hover { background: var(--glass-3); }
/* Karten in Karten: eine Stufe heller statt noch eine Glasschicht */
.panel .panel, .panel .card, .dash-card .panel, .panel .fov-tile { background: var(--glass-3); box-shadow: none; }
.fov-mini-tiles .fov-tile { background: var(--surface-2); border-color: transparent; }
.detail-placeholder { background: var(--glass-2); border: 1px solid var(--hair); }

/* ---------- Knöpfe: Haupt = Graphit, Neben = Milchglas-Kapsel, Ghost = neutral ---------- */
.btn-primary { background: var(--btn); color: var(--btn-ink); border-color: transparent; }
.btn-primary:not(:disabled):hover { background: var(--btn-hover); }
.btn-secondary { background: var(--glass-3); color: var(--ink); border: 1px solid var(--hair-2); }
.btn-secondary:not(:disabled):hover { background: var(--surface); border-color: var(--line-strong); }
.btn-ghost:not(:disabled):hover { background: var(--pill); }

/* ---------- Felder: Milch mit Haarlinie, beim Tippen weiß ---------- */
input:not([type]), input[type="text"], input[type="password"], input[type="email"], input[type="tel"], input[type="number"], input[type="search"], input[type="url"],
input[type="datetime-local"], input[type="date"], input[type="time"], textarea, select {
  background-color: var(--glass-3); border-color: var(--hair-2);
}
input:hover, textarea:hover, select:hover { background-color: var(--glass-3); border-color: var(--line-strong); }
input:focus, textarea:focus, select:focus { background-color: var(--surface); border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
.panel input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), .panel textarea, .panel select { background-color: var(--glass-3); }
.set-search-input { background: var(--glass-2); border: 1px solid var(--hair); }

/* Kapseln zum Wählen */
.select-pill, .tk-filters select, .tk-quick-status, .fov-chip, .rich-token, .qt-chip, .wk-chip, .bks-tl-chip, .fb-state, .bks-tray-more, .kb-live, .tm-play,
.gal-folder, .gal-album, .tk-chip, .ai-chip, .bks-multi-btn, .filter-toggle { background-color: var(--glass-3); border-color: var(--hair); }
.panel .fov-chip, .panel .qt-chip, .panel .wk-chip, .panel .tk-chip, .panel .select-pill, .panel .bks-multi-btn, .panel .filter-toggle { background-color: var(--glass-3); }

/* ---------- Schwebendes: dichtes Milchglas ---------- */
dialog { background: var(--glass-sheet); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid var(--hair); box-shadow: var(--top-light), var(--pop-shadow); }
dialog::backdrop { background: rgba(30, 26, 22, 0.22); }
.ctx-menu, .inbox-panel, .cover-menu, .bks-multi-panel, .ml-suggest, .set-results, .dash-size-pop {
  background: var(--glass-sheet); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid var(--hair); box-shadow: var(--pop-shadow);
}
.tk-panel, .ai-drawer-panel { background: var(--glass-sheet); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid var(--hair); }
.tk-panel-head, .tk-panel-foot { background: transparent; border-color: var(--hair); }
.ai-box, .ai-talk, .ai-fab { background: var(--glass-sheet); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid var(--hair); }
.ai-drawer.large .ai-drawer-list { background: transparent; }
.tk-drawer-backdrop, .ai-drawer.large .ai-drawer-backdrop { background: rgba(30, 26, 22, 0.16); }

/* ---------- Diagramme: grau, nur der laufende Monat orange (blass schraffiert) ---------- */
.dash-bar:last-child i.paid { background: repeating-linear-gradient(135deg, var(--accent) 0 3px, color-mix(in srgb, var(--accent) 55%, #fff) 3px 6px); }
.dash-bar:last-child i.open { background: color-mix(in srgb, var(--accent) 25%, transparent); }

/* ---------- Ohne Transparenz / mehr Kontrast: Flächen fest ---------- */
@media (prefers-reduced-transparency: reduce) {
  :root { --glass-1: var(--bg); --glass-2: var(--surface); --glass-3: var(--surface); --glass-sheet: var(--surface); }
  body::before { display: none; }
}
@media (prefers-contrast: more) {
  :root { --hair: var(--line-strong); --hair-2: var(--line-strong); --glass-1: var(--bg); --glass-2: var(--surface); }
}

/* ---------- Hintergrund wählen (Konto → Darstellung, Dashboard → Anpassen) ---------- */
.bg-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 0.6rem; }
.bg-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bg-tile { display: grid; gap: 0.35rem; justify-items: stretch; padding: 0; border: 0; background: none; color: var(--ink-soft); font: 500 0.8rem var(--font); cursor: pointer; text-align: center; }
.bg-swatch { display: grid; place-items: center; aspect-ratio: 4 / 3; border-radius: 14px; border: 1px solid var(--hair-2); background: var(--app-base); background-size: cover; background-position: center; color: var(--muted); font-size: 1.3rem; transition: box-shadow 0.15s; }
.bg-tile:hover .bg-swatch { box-shadow: 0 0 0 2px var(--line-strong); }
.bg-tile[aria-checked="true"] .bg-swatch { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--ink-soft); }
.bg-tile[aria-checked="true"] { color: var(--ink); font-weight: 600; }
.bg-tile:focus-visible { outline: none; }
.bg-tile:focus-visible .bg-swatch { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent); }
.bg-tile.is-busy .bg-swatch { animation: tk-breathe 1.2s ease-in-out infinite; }
.bg-sand .bg-swatch { background-image: radial-gradient(60% 60% at 25% 30%, #f1dcc0, transparent 70%), radial-gradient(60% 60% at 80% 80%, #ecd3c6, transparent 70%), radial-gradient(50% 50% at 85% 15%, #dde7dc, transparent 70%); background-color: #f0eae2; }
.bg-nebel .bg-swatch { background-image: radial-gradient(60% 60% at 25% 30%, #d6e2f0, transparent 70%), radial-gradient(60% 60% at 80% 75%, #d2dee8, transparent 70%); background-color: #e9ecef; }
.bg-salbei .bg-swatch { background-image: radial-gradient(60% 60% at 25% 30%, #d9e5d1, transparent 70%), radial-gradient(60% 60% at 80% 75%, #d2e0cd, transparent 70%), radial-gradient(50% 50% at 80% 15%, #f0e8d8, transparent 70%); background-color: #e9ece4; }
.bg-rose .bg-swatch { background-image: radial-gradient(60% 60% at 25% 30%, #f0d6d1, transparent 70%), radial-gradient(60% 60% at 80% 75%, #e8d5e0, transparent 70%); background-color: #efe8e4; }
.bg-plain .bg-swatch { background: var(--app-base); }
:root[data-theme="dark"] .bg-sand .bg-swatch { background-image: radial-gradient(60% 60% at 25% 30%, #3a3530, transparent 70%); background-color: #1c1b1a; }
:root[data-theme="dark"] .bg-nebel .bg-swatch { background-image: radial-gradient(60% 60% at 25% 30%, #2e3339, transparent 70%); background-color: #1f2123; }
:root[data-theme="dark"] .bg-salbei .bg-swatch { background-image: radial-gradient(60% 60% at 25% 30%, #2f352d, transparent 70%); background-color: #20221f; }
:root[data-theme="dark"] .bg-rose .bg-swatch { background-image: radial-gradient(60% 60% at 25% 30%, #3a302f, transparent 70%); background-color: #232020; }
dialog.bg-dialog { width: min(520px, calc(100vw - 32px)); }

/* ---------- Weniger Orange: Auswahl in Listen neutral (wie bei Apple), Kürzel grau ---------- */
:root { --sel: rgba(20, 18, 15, 0.07); --sel-strong: rgba(20, 18, 15, 0.1); }
:root[data-theme="dark"] { --sel: rgba(255, 255, 255, 0.09); --sel-strong: rgba(255, 255, 255, 0.13); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --sel: rgba(255, 255, 255, 0.09); --sel-strong: rgba(255, 255, 255, 0.13); } }
.tk-side-item.active, .ml-folder[aria-current="true"], .ml-row[aria-selected="true"], .ai-list-item.active, .team-row.selected, .tk-tree-row.active,
.lab-cust.active, .lab-layer.on, .le-layer.on, .ss-row.on, .mb-li.on, .nas-pick-row.on, .ar-tr.selected, .ar-tr.selected:nth-child(odd), .ar-tile.selected,
.bks-rrow.selected, .tp-cell.sel, .tk-mention-item.active, .ml-suggest-item[aria-selected="true"], .ar-tn.current, .bks-loose-item.selected, .bks-trash-item.selected {
  background: var(--sel); color: var(--ink); box-shadow: none;
}
.tk-mention-item:hover, .ml-suggest-item:hover { background: var(--sel); }
.customer-list button[aria-current="true"] { background: var(--glass-3); box-shadow: 0 1px 2px rgba(20, 18, 15, 0.05); }
.customer-list button[aria-current="true"] .avatar { background: var(--ink-soft); color: var(--surface); }
.customer-list button[aria-current="true"] .avatar.has-logo:not(.logo-free) { box-shadow: 0 0 0 2px var(--ink-soft) !important; }
.avatar { background: var(--sel-strong); color: var(--ink-soft); }
.avatar-edit .avatar { background: var(--ink-soft); color: var(--surface); }

.ar-folder-ic { background: var(--sel); color: var(--ink-soft); }
.team-row.selected { box-shadow: inset 3px 0 0 var(--ink-soft); }
.ai-list-item.active { box-shadow: none; }
/* Häkchen überall in EULEN-MEDIA-Orange – rot nur beim Löschen (Galerie/Kunde löschen) */
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); }
.check-row input { accent-color: var(--accent); }
#gdel-nas-row input, #cdel-gal-row input { accent-color: var(--err); }

/* Lange Wörter ohne Leerzeichen (Titel, Dateinamen, Pfade) brechen um statt aus dem Fenster zu ragen */
h1, h2, h3, h4, .tk-result-title, .tk-panel .muted, .tk-panel code { overflow-wrap: anywhere; }
.tk-split > *, .tk-main, .tk-track { min-width: 0; }
/* Suche (⌘K): gewählter Treffer neutral */
.spot-item.on { background: var(--sel); }
.spot-item.on .spot-item-ic { background: var(--sel-strong); color: var(--ink); }
dialog.spot { background: var(--glass-sheet); }
/* Mitteilungen: ungelesen nur mit Punkt und etwas Milch, nicht orange getönt */
.inbox-item.unread { background: var(--glass-3); }
/* Anmelden: auf dem Pastell-Hintergrund, Karte aus Milchglas */
.login { background: transparent; }
.login-brand img { box-shadow: none; }
.login-card { -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
/* Kein oranges Leuchten (Kundenakte: großes Kürzel) */
.detail-head .avatar-lg { box-shadow: none; }
.detail-head .avatar-lg:not(.has-logo) { background: var(--ink-soft); color: var(--surface); }
/* Kundenakte: Spalten dürfen schrumpfen (am Handy machte der Reiter „Marke“ die ganze Akte breiter als den Bildschirm) */
.customer-detail, #customer-brand, .br-panel { grid-template-columns: minmax(0, 1fr); min-width: 0; }
.customer-detail > *, #customer-brand > * { min-width: 0; }
.br-add { flex-wrap: wrap; min-width: 0; }

/* ---------- Vollflächen-Seiten (Mail, Medien, Assistent): Inhalt direkt auf der großen Glasfläche, keine Box in der Box ---------- */
@media (min-width: 901px) {
  /* Die Glasfläche ist genau so hoch wie das Fenster, die Seite darin füllt den Rest – nichts scrollt ins Leere */
  body.page-fixed .studio-shell .main { display: flex; flex-direction: column; height: calc(100dvh - 20px); min-height: 0; padding-top: 1.1rem; padding-bottom: 1.1rem; overflow: hidden; }
  body.page-fixed .studio-shell .main > :not(.page) { flex: none; }
  body.page-fixed .studio-shell .main > .page:not([hidden]) { flex: 1 1 auto; min-height: 0; }
  body.page-fixed .page-mail { grid-template-rows: minmax(0, 1fr); }
  body.page-fixed .page-mail .ml-shell { height: 100%; min-height: 0; align-self: stretch; }
  body.page-fixed #tab-media:not([hidden]) { display: flex; flex-direction: column; }
  body.page-fixed #tab-media > * { flex: none; }
  body.page-fixed #tab-media .ar-finder.fit { flex: 1 1 auto; height: auto; min-height: 0; }
  /* Spaltenansicht füllt die Liste bis unten statt fester Höhe */
  body.page-fixed .ar-finder.fit .ar-list:has(> .ar-cols) { display: flex; flex-direction: column; min-height: 0; }
  body.page-fixed .ar-finder.fit .ar-cols { flex: 1 1 auto; height: auto; min-height: 0; }
  body.page-fixed .page-ai { grid-template-rows: minmax(0, 1fr); }
  body.page-fixed .page-ai .ai-layout { height: 100%; min-height: 0; align-items: stretch; }
  body.page-fixed .page-ai .ai-main { height: auto; min-height: 0; }
  body.page-fixed .page-ai .ai-side { position: static; min-height: 0; grid-template-rows: auto auto minmax(0, 1fr); }
  body.page-fixed .page-ai .ai-list { max-height: none; min-height: 0; }
}
.ml-shell, .ar-finder, .page-ai .ai-main { background: transparent; border: 0; border-radius: 0; box-shadow: none; }
/* Mail: Ordner als eingelassene Milch-Spalte (wie die Seitenleiste in Apple Mail), Liste und Mail durch Haarlinien getrennt */
.ml-folders { background: var(--pill); border-right: 0; border-radius: 20px; }
.ml-list { border-right-color: var(--hair-2); }
.ml-folders-foot { border-top-color: var(--hair-2); }
.ml-quick { background: transparent; border-top-color: var(--hair-2); }
@container mlpage (max-width: 900px) {
  .ml-folders { background: var(--glass-sheet); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid var(--hair); }
}
/* Medien: Leiste und Baum ohne eigene Kästen, klebende Köpfe aus Milchglas */
.ar-toolbar { background: transparent; border-bottom-color: var(--hair-2); }
.ar-tree { background: var(--pill); border-right: 0; border-radius: 18px; margin: 0.5rem 0 0; }
.ar-info { border-left-color: var(--hair-2); }
.ar-thead, .ar-date-groups .ar-group-head, .ar-tree-disk { background: var(--glass-sheet); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
.ar-tree-disk { border-radius: 0 0 18px 18px; }
.ar-tb-btn:hover:not(:disabled), .ar-tb-btn.on { background: var(--glass-3); }
.ar-index-line, .ar-idx { background: var(--glass-2); border-color: var(--hair); }
.ar-cols { background: transparent; border: 0; border-radius: 0; }
/* Assistent: Unterhaltung direkt auf Glas, eigene Nachrichten als Milch-Blase, Eingabe als schwebende Kapsel */
.ai-chat-head { border-top: 0; border-bottom-color: var(--hair-2); }
.ai-bubble { background: var(--glass-3); border: 1px solid var(--hair); box-shadow: var(--top-light); }
.ai-box { background: var(--glass-3); border: 1px solid var(--hair-2); box-shadow: var(--top-light), var(--lift); }
.ai-box:focus-within { border-color: var(--line-strong); box-shadow: var(--top-light), var(--lift); }
.ai-round:not(.ghost) { background: var(--btn); color: var(--btn-ink); }
.ai-round:not(.ghost):hover { background: var(--btn-hover); }
.ai-round.ghost:hover { background: var(--pill); }
.ai-new-btn { background: var(--btn); color: var(--btn-ink); }
.ai-new-btn:hover { background: var(--btn-hover); }
.ai-list-item:hover { background: var(--pill); }
.ai-list-item.active { background: var(--sel); box-shadow: none; }
.ai-list-actions { background: linear-gradient(to right, transparent, var(--glass-3) 1.1rem); }
.ai-list-item.active .ai-list-actions { background: linear-gradient(to right, transparent, var(--glass-3) 1.1rem); }
.ai-archive-toggle { background: var(--pill); }
.ai-tile { background: var(--glass-2); border-color: var(--hair); box-shadow: var(--top-light); }
.ai-tile:hover { background: var(--glass-3); border-color: var(--hair-2); }
.ai-tile .ai-ic { background: var(--pill); color: var(--ink-soft); }
.ai-chip { background: var(--glass-3); border-color: var(--hair-2); }
.ai-chip:hover { background: var(--surface); border-color: var(--line-strong); color: var(--ink); }
.ai-replies .ai-chip { border-color: var(--hair-2); color: var(--ink); }
.ai-tool .ai-ic { background: var(--pill); }
.ai-day { background: var(--pill); }
.ai-plus-menu { background: var(--glass-sheet); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid var(--hair); box-shadow: var(--pop-shadow); }
/* Assistent-Schublade wie die Seite: kein oranger Strich oben */
.ai-drawer-head { border-top: 0; border-bottom-color: var(--hair-2); }
/* Assistent-Seite (Briefing, Kacheln, Vorschläge): Milchglas-Karten wie das Dashboard */
.kb-card, .kb-later-row { background: var(--card); border-color: var(--hair); box-shadow: var(--top-light); }
.kb-tile, .kb-draft { background: var(--pill); }
.kb-tile:hover { background: var(--glass-3); }
.kb-card-head .kb-ic, .kb-ask .kb-ic { color: var(--ink-soft); }
.kb-filter { background: var(--glass-3); border-color: var(--hair); }
.kb-filter[aria-selected="true"] { background: var(--btn); border-color: var(--btn); color: var(--btn-ink); }
.kb-filter[aria-selected="true"] .kb-count { background: rgba(255, 255, 255, 0.2); color: inherit; }
.kb-appt-time { color: var(--ink); }
.kb-chip:hover { background: var(--glass-3); color: var(--ink); }
.ai-drawer-panel { box-shadow: var(--top-light), var(--pop-shadow); }
.labset-drill, .labset-drop { background: var(--card); border-color: var(--hair-2); box-shadow: var(--top-light); }
.labset-drill:hover { background: var(--glass-3); }
.labset-drill-ic { background: var(--pill); }
/* Kundenakte → Einstellungen */
.cs-tile { background: var(--card); border-color: var(--hair); box-shadow: var(--top-light); }
.cs-tile:hover { background: var(--glass-3); border-color: var(--hair-2); }
.cs-faces .avatar { box-shadow: 0 0 0 2px var(--glass-3); }
/* Mail und Medien randlos: Spalten bis an die Kante der Glasfläche (die Rundung schneidet .main ab) */
@media (min-width: 901px) {
  body.page-fixed .studio-shell .main:has(> .page-mail:not([hidden])),
  body.page-fixed .studio-shell .main:has(> #tab-media:not([hidden])) { padding: 0; }
  body.page-fixed .page-mail .ml-folders { border-radius: 0; border-right: 1px solid var(--hair-2); }
  body.page-fixed #tab-media > :not(.ar-finder) { margin-left: clamp(16px, 3vw, 2.75rem); margin-right: clamp(16px, 3vw, 2.75rem); }
  body.page-fixed #tab-media > .page-head { margin-top: 1.1rem; }
  body.page-fixed #tab-media .ar-finder .ar-tree { margin: 0; border-radius: 0; border-right: 1px solid var(--hair-2); }
  body.page-fixed #tab-media .ar-finder .ar-toolbar { padding-left: clamp(12px, 2vw, 1.4rem); padding-right: clamp(12px, 2vw, 1.4rem); }
  body.page-fixed #tab-media .ar-tree-disk { border-radius: 0; }
}