/* ═══════════════════════════════════════════════════════════════════════════
   BC Toolkit — Shell + Komponenten
   Design-Tokens sind source-of-truth: /app/static/design-tokens.css
   Legacy-Variablen hier werden auf Tokens aliased, bis alles migriert ist.
   ═══════════════════════════════════════════════════════════════════════════ */

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    color-scheme: dark;

    /* ─── Legacy-Alias: alte Vars auf Liquid-Glass-Tokens (v20) gehoben.
       Achtung: KEINE echten Token-Namen mehr shadowen (--error, --success,
       --radius-sm bleiben aus design-tokens.css). ─── */
    --bg:              rgba(255, 255, 255, 0.03);
    --bg-raised:       var(--surface-flat);
    --bg-input:        var(--glass-field-bg);
    --bg-surface:      var(--surface-flat);

    --border:          var(--surface-border);
    --border-subtle:   var(--hairline-gold-weak);
    --border-focus:    var(--glass-field-border-focus);

    --text:            var(--bone);
    --text-dim:        var(--bone-dim);
    --text-muted:      var(--ash);

    --accent:          var(--gold);
    --accent-hover:    var(--gold-warm);
    --accent-dim:      rgba(255, 255, 255, 0.14);
    --accent-glow:     rgba(255, 255, 255, 0.20);

    --radius:          var(--radius-md);

    --font:            var(--font-ui);
    --mono:            ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

    --ease-out-expo:   var(--ease-out);
    --ease-out-quad:   var(--ease-out);
    --ease-spring:     cubic-bezier(0.34, 1.56, 0.64, 1);
    --apple-blur:      var(--glass-blur-strong);
}

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-ui);
    background: var(--ink);
    color: var(--bone);
    font-weight: var(--fw-medium);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    letter-spacing: var(--ls-normal);
    min-height: 100dvh;
    position: relative;
    overflow-x: hidden;
}

body.sidebar-open { --sidebar-w: var(--sidebar-expanded); }

/* ─── Hintergrund-Stage: GT3 + Licht-Gradient ─────────────────────── */
/* BG füllt komplette Viewport-Breite inkl. hinter der Sidebar.
   Image auf Full-Viewport zentriert, 10% rein-gezoomt (scale 1.1) damit
   das ganze Motiv bis unter die Sidebar reicht. */
.bg-stage {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(0,0,0,0.22), rgba(0,0,0,0.38)),
        var(--asset-hero-bg) 50% 50% / cover no-repeat,
        var(--ink);
    transform: scale(1.1);
    transform-origin: center center;
}

.light-top {
    position: fixed;
    top: -30vh;
    left: 50%;
    transform: translateX(-50%);
    width: 120vw;
    height: 80vh;
    background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.06), transparent 55%);
    pointer-events: none;
    z-index: 0;
}

/* Liquid-Glass-Logik: das Foto bleibt SCHARF — kein Vollflächen-Schleier mehr.
   Glas liegt nur noch auf den schwebenden Panels (Sidebar, Cards, Modals). */
.glass-surface {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
}

/* ─── Page-Wrapper ───────────────────────────────────────────────── */
/* Flex-Layout: Sidebar ist fixed, Main wächst, Footer pinnt unten */
.page {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
}
.page > .main,
.page > .container { flex: 1 0 auto; }

/* ═══════════════════════════════════════════════════════════════════════════
   SIDEBAR — primäre Navigation, Milchglas-Panel
   ═══════════════════════════════════════════════════════════════════════════ */

.sidebar,
.floating-nav {
    position: fixed;
    top: var(--sidebar-inset);
    left: var(--sidebar-inset);
    bottom: var(--sidebar-inset);
    width: var(--sidebar-w);
    z-index: 100;
    transition: width var(--dur-xslow) var(--ease-out);
    display: flex;
    flex-direction: column;
    overflow: visible;
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-glass);
}

.sidebar__brand {
    height: var(--sidebar-brand-h);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-5) var(--space-4);
    flex-shrink: 0;
    position: relative;
}

.sidebar__brand::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: var(--space-4);
    right: var(--space-4);
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--hairline-gold), transparent);
}

.brand-mark-only {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transition: opacity var(--dur-base) var(--ease-base);
    pointer-events: none;
}

body.sidebar-open .brand-mark-only { opacity: 0; }

/* Brand bleibt golden — einzige Gold-Ausnahme im UI (Spec §3.5) */
.brand-mark-only__img {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: transparent;
    font-family: var(--font-display);
    font-size: var(--fs-xl);
    font-weight: var(--fw-bold);
    letter-spacing: 0;
    background: var(--gradient-brand-gold);
    -webkit-background-clip: text;
    background-clip: text;
    filter: var(--glow-brand);
}

.brand-full-logo {
    opacity: 0;
    transition: opacity var(--dur-base) var(--ease-base);
    width: 168px;
    height: 34px;
    background: var(--gradient-brand-gold);
    -webkit-mask: var(--asset-logo) center/contain no-repeat;
            mask: var(--asset-logo) center/contain no-repeat;
    filter: var(--glow-brand);
}

body.sidebar-open .brand-full-logo { opacity: 1; }

.sidebar__nav,
.floating-nav__bar {
    flex: 1;
    padding: var(--space-8) 0;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}

.sidebar__nav::-webkit-scrollbar,
.floating-nav__bar::-webkit-scrollbar { width: 0; }

.nav-group { margin-bottom: var(--nav-group-gap); }

.nav-group__label {
    font-family: var(--font-ui);
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: var(--ls-eyebrow);
    color: var(--ash);
    font-weight: var(--fw-bold);
    padding: 0 var(--space-6);
    margin-bottom: var(--space-5);
    height: 12px;
    opacity: 0;
    transition: opacity var(--dur-base) var(--ease-base);
    white-space: nowrap;
}

body.sidebar-open .nav-group__label { opacity: 1; }

.nav-group + .nav-group::before {
    content: '';
    display: block;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--hairline-gold), transparent);
    margin: calc(-1 * var(--space-5)) var(--space-5) var(--space-5);
    opacity: 1;
    transition: opacity var(--dur-base) var(--ease-base);
}

body.sidebar-open .nav-group + .nav-group::before { opacity: 0; }

.nav-item {
    display: flex;
    align-items: center;
    height: var(--nav-item-height);
    padding: 0 15px;
    margin: 0 var(--space-2) 2px;
    width: calc(100% - var(--space-2) * 2);
    border-radius: var(--radius-pill);
    color: var(--bone-dim);
    cursor: pointer;
    position: relative;
    white-space: nowrap;
    font-family: var(--font-ui);
    font-size: var(--fs-body);
    font-weight: var(--fw-semi);
    letter-spacing: 0;
    text-transform: none;
    text-decoration: none;
    background: transparent;
    border: none;
    transition: color var(--dur-fast) var(--ease-base),
                background var(--dur-fast) var(--ease-base);
    text-align: left;
}

.nav-item:hover {
    color: var(--bone);
    background: rgba(255, 255, 255, 0.08);
}

.nav-item.mode-toggle__btn--active,
.nav-item--active {
    color: var(--bone);
    background: rgba(255, 255, 255, 0.16);
    font-weight: var(--fw-semi);
}

.nav-item__initial {
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: var(--font-display);
    font-size: var(--fs-body);
    letter-spacing: 0;
    color: var(--ash);
    flex-shrink: 0;
    transition: color var(--dur-fast) var(--ease-base);
}

/* Stroke-Icons im Nav: erben Farbe via currentColor (alle State-Regeln greifen weiter) */
.nav-item__initial svg {
    width: 18px;
    height: 18px;
    display: block;
}

.nav-item:hover .nav-item__initial { color: var(--bone); }

.nav-item.mode-toggle__btn--active .nav-item__initial,
.nav-item--active .nav-item__initial {
    color: var(--gold-warm);
}

.nav-item__label {
    margin-left: var(--space-5);
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity var(--dur-med) var(--ease-base), transform var(--dur-med) var(--ease-base);
    flex: 1;
}

body.sidebar-open .nav-item__label {
    opacity: 1;
    transform: translateX(0);
}

.nav-item__lock {
    font-family: var(--font-ui);
    font-size: var(--fs-micro);
    letter-spacing: 0;
    color: var(--ash-mid);
    text-transform: none;
    font-weight: var(--fw-medium);
    opacity: 0;
    transition: opacity var(--dur-med) var(--ease-base);
}
body.sidebar-open .nav-item__lock { opacity: 1; }

.nav-item--locked,
.nav-item.nav-item--locked {
    color: var(--ash-deep);
    cursor: not-allowed;
}
.nav-item--locked .nav-item__initial { color: var(--ash-deep); }
.nav-item--locked:hover { color: var(--ash-deep); }
.nav-item--locked:hover .nav-item__initial { color: var(--ash-deep); }

.sidebar__footer {
    padding: var(--space-5) var(--space-5);
    flex-shrink: 0;
    position: relative;
}

.sidebar__footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: var(--space-4);
    right: var(--space-4);
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--hairline-gold), transparent);
}

.sidebar__user {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding-top: var(--space-3);
}

.sidebar__avatar {
    width: 20px;
    height: 20px;
    border-radius: var(--radius-round);
    background: radial-gradient(circle at 28% 28%, #ffffff 0%, rgba(255, 255, 255, 0.75) 55%, rgba(255, 255, 255, 0.4) 100%);
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.5),
        inset 0 -1px 2px rgba(0, 0, 0, 0.25);
    flex-shrink: 0;
}

.sidebar__user-info {
    opacity: 0;
    transition: opacity var(--dur-med) var(--ease-base);
    overflow: hidden;
    flex: 1;
}

body.sidebar-open .sidebar__user-info { opacity: 1; }

.user-name {
    font-family: var(--font-ui);
    font-size: var(--fs-sm);
    color: var(--bone);
    letter-spacing: var(--ls-normal);
    font-weight: var(--fw-medium);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar__logout {
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--ash);
    cursor: pointer;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity var(--dur-med) var(--ease-base), color var(--dur-fast) var(--ease-base);
}

body.sidebar-open .sidebar__logout { opacity: 1; }

.sidebar__logout:hover { color: var(--gold-warm); }

.sidebar__toggle {
    position: absolute;
    right: -13px;
    top: 50%;
    width: 26px;
    height: 52px;
    background: var(--glass-toggle-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.30);
    border-left: none;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--ash);
    transition: color var(--dur-base) var(--ease-base), background var(--dur-base) var(--ease-base);
    z-index: 10;
    transform: translateY(-50%);
}

.sidebar__toggle:hover {
    color: var(--gold-warm);
    background: var(--glass-toggle-bg-hover);
}

.sidebar__toggle svg {
    width: 10px;
    height: 10px;
    transition: transform var(--dur-xslow) var(--ease-out);
}

body.sidebar-open .sidebar__toggle svg { transform: rotate(180deg); }

/* Legacy-Navbar + Top-Bar-Reste komplett ausblenden */
.navbar,
.mode-toggle__dropdown,
.mode-toggle__divider,
.floating-nav__divider,
.floating-nav__dropdown {
    display: none !important;
}

/* Dynamisch injizierter Admin-Link (floating-nav__btn als <a>) als Nav-Item stylen */
.sidebar__nav .floating-nav__btn,
.floating-nav__bar .floating-nav__btn {
    display: flex;
    align-items: center;
    height: var(--nav-item-height);
    padding: 0 15px;
    margin: 0 var(--space-2) 2px;
    border-radius: var(--radius-pill);
    color: var(--bone-dim) !important;
    font-family: var(--font-ui);
    font-size: var(--fs-body);
    font-weight: var(--fw-semi);
    letter-spacing: 0;
    text-transform: none;
    text-decoration: none;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: color var(--dur-fast) var(--ease-base),
                background var(--dur-fast) var(--ease-base);
}
.sidebar__nav .floating-nav__btn:hover {
    color: var(--bone) !important;
    background: rgba(255, 255, 255, 0.08);
}

/* ═══════════════════════════════════════════════════════════════════════════
   MAIN / CONTAINER — Content-Bereich rechts von der Sidebar
   ═══════════════════════════════════════════════════════════════════════════ */

.main,
.container {
    /* Center the main track in the non-sidebar viewport space.
       margin-left = sidebar-w (+ Schwebe-Inset beidseitig) OR centering offset,
       whichever is larger. margin-right = auto → centered block. */
    margin-left: max(calc(var(--sidebar-w) + var(--sidebar-inset) * 2), calc((100vw - var(--main-track-w)) / 2));
    margin-right: auto;
    transition: margin-left var(--dur-xslow) var(--ease-out);
    width: auto;
    max-width: var(--main-track-w);
    padding: var(--space-12) var(--space-6) var(--space-16);
    position: relative;
}

@media (min-width: 768px) {
    .main,
    .container {
        padding: var(--space-16) var(--space-10) var(--space-20);
    }
}

@media (min-width: 1200px) {
    .main,
    .container {
        padding: var(--main-padding-top) var(--main-padding-x) var(--main-padding-bot);
    }
}

/* Content-Width wird pro Section gesteuert — hero, search, input-section etc.
   haben eigene max-widths. Standardwert für Sections + Forms: Search-Max-Width. */
.main > section,
.container > section,
.container > form {
    max-width: var(--search-max-width);
    margin-left: auto;
    margin-right: auto;
}

.container--wide > section,
.container--wide > form { max-width: none; }

/* ─── Tool-Tabs: zentrierte Arbeitsfläche statt links-gepinnter Spalte ────────
   .page ist flex-direction:column → .main schrumpft horizontal auf seinen
   Content, und .main { margin-right: auto } pinnt es nach links → tote rechte
   Hälfte NEBEN .main (nicht in der Section). Fix: in den Tool-Tabs margin-right
   auf 0, dann füllt .main bis max-width (1200px) und die Section zentriert sich
   darin. data-active-mode wird per Inline-Script in index.html gespiegelt.

   0) .main auf volle Breite ziehen (behebt den toten rechten Rand an der Wurzel) */
body[data-active-mode="tnt"] .main,
body[data-active-mode="outlier"] .main,
body[data-active-mode="analyzer"] .main {
    margin-right: 0;
}

/* a) Sections in den Tool-Tabs in der jetzt breiten .main zentrieren. */
body[data-active-mode="tnt"] .main > section,
body[data-active-mode="tnt"] #tnt-input-section,
body[data-active-mode="outlier"] .main > section,
body[data-active-mode="outlier"] #outlier-input-section,
body[data-active-mode="analyzer"] .main > section,
body[data-active-mode="analyzer"] #analyzer-input-section {
    margin-left: auto;
    margin-right: auto;
}

/* b) Outlier + Analyse zusätzlich auf 960px — ihre Inhalte (Textareas,
   URL-Listen, Ergebnis-Grids) nutzen die Breite. TNT bleibt schmal (eine
   URL-Zeile würde gestreckt kaputt wirken), nur zentriert. */
body[data-active-mode="outlier"] .main > section,
body[data-active-mode="outlier"] #outlier-input-section,
body[data-active-mode="analyzer"] .main > section,
body[data-active-mode="analyzer"] #analyzer-input-section {
    max-width: 960px;
}

/* c) Standalone-Textareas (Outlier) füllen jetzt die Breite — lagen vorher auf
   dem cols-Default (~230px), weil sie außerhalb eines Flex-Rows stehen. */
body[data-active-mode="outlier"] .outlier-textarea { width: 100%; }

/* ═══════════════════════════════════════════════════════════════════════════
   LOCKED TOAST
   ═══════════════════════════════════════════════════════════════════════════ */

.locked-toast {
    position: fixed;
    bottom: var(--space-6);
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-xs);
    color: var(--bone);
    font-family: var(--font-ui);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    letter-spacing: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
    z-index: 1000;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
}

.locked-toast--visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.locked-toast svg {
    color: var(--gold-warm);
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   HERO — linksbündig, Display-Titel + Mono-Eyebrow mit Gold-Dash
   ═══════════════════════════════════════════════════════════════════════════ */

.hero {
    margin: 0 0 var(--space-10);
    padding: var(--space-6) 0 var(--space-4);
    max-width: 100%;
    animation: heroIn var(--dur-xslow) var(--ease-out) 0.1s both;
    position: relative;
}

.hero__content { max-width: 960px; }

.hero__title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 3.4vw, 3rem);
    font-weight: var(--fw-bold);
    line-height: 1.08;
    letter-spacing: 0;
    text-transform: none;
    color: var(--bone);
    margin: 0 0 var(--space-2);
}

.hero__sub {
    font-family: var(--font-ui);
    font-size: var(--fs-md);
    color: var(--bone-dim);
    font-weight: var(--fw-regular);
    max-width: 56ch;
    margin: 0;
    line-height: var(--lh-body);
    letter-spacing: var(--ls-normal);
}

/* Brand-Subtitle als Mini-Eyebrow mit weißem Dash davor */
.hero__sub--brand {
    font-family: var(--font-ui);
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color: var(--bone-dim);
    max-width: none;
    margin: 0;
}

.hero__sub--brand::before {
    content: "";
    display: inline-block;
    width: 28px;
    height: 1px;
    background: var(--gold);
    vertical-align: middle;
    margin-right: var(--space-2);
    transform: translateY(-2px);
}

/* Videolink: Hero ausblenden, damit der Kalender Platz hat
   (Ersatz ist .vl-inline-head, siehe unten) */
body[data-active-mode="videolink"] .hero { display: none; }

@keyframes heroIn {
    0%   { opacity: 0; transform: translateY(8px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Utility
   ═══════════════════════════════════════════════════════════════════════════ */

.hidden { display: none !important; }

.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* Globaler Keyboard-Fokus: weiße Outline. Komponenten mit eigenem sichtbarem
   Fokusstil (.input-field, .search-bar__input) setzen outline:none weiter
   unten und gewinnen damit die Kaskade. */
:where(button, a, [tabindex], input, select, textarea, [role="tab"]):focus-visible {
    outline: 2px solid var(--glass-field-border-focus);
    outline-offset: 2px;
}

/* Checkboxen/Radios: weißer Akzent (Liquid-Look) */
input[type="checkbox"],
input[type="radio"] {
    accent-color: #fff;
}

/* Scrollbars: weißer Pill-Thumb, transparenter Track */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: var(--radius-pill);
    border: 2px solid transparent;
    background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background-color: rgba(255, 255, 255, 0.5); }

/* Range-Slider: 4px-Track, weißer 18px-Thumb (Bubbbly-Rezept) */
input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    height: 18px;
    background: transparent;
}
input[type="range"]::-webkit-slider-runnable-track {
    height: 4px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.45);
}
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    margin-top: -7px;
    border-radius: var(--radius-round);
    background: #fff;
    border: none;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
    cursor: pointer;
}
input[type="range"]::-moz-range-track {
    height: 4px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.45);
}
input[type="range"]::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: var(--radius-round);
    background: #fff;
    border: none;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
    cursor: pointer;
}

.spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-top-color: currentColor;
    border-radius: var(--radius-round);
    animation: spin 0.9s linear infinite;
    flex-shrink: 0;
}

.spinner.hidden { display: none; }

@keyframes spin { to { transform: rotate(360deg); } }

@keyframes fadeIn {
    0%   { opacity: 0; transform: translateY(6px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LEGACY KOMPONENTEN — werden in Phasen 3/4 migriert
   Bis dahin mit neuen Tokens gerendert (via :root-Alias)
   ═══════════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════════════
   INPUTS & BUTTONS — auf Design-Tokens migriert
   ═══════════════════════════════════════════════════════════════════════════ */

.input-section {
    margin-bottom: var(--space-10);
    animation: fadeIn var(--dur-slow) var(--ease-out) 0.15s both;
}

/* Linke Achse: Formulare hängen am linken Rail, nicht zentriert */
.main .input-section {
    max-width: var(--search-max-width);
    margin-left: 0;
    margin-right: auto;
    padding-top: var(--space-6);
}

/* Eyebrow-Label — eine Label-Stimme überall (Inputs, Modals, Sektionen) */
.input-label {
    display: block;
    font-family: var(--font-ui);
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color: var(--bone-dim);
    margin-bottom: var(--space-2);
}

.input-row {
    display: flex;
    gap: var(--space-2);
    align-items: stretch;
}

/* Standard-Input — Glas-Pill (999px, 46px), weißer Fokus-Rand */
.input-field {
    flex: 1;
    background: var(--glass-field-bg);
    border: 1px solid var(--glass-field-border);
    border-radius: var(--radius-pill);
    padding: 0 18px;
    font-family: var(--font-ui);
    font-size: var(--fs-md);
    font-weight: var(--fw-medium);
    letter-spacing: 0;
    color: var(--bone);
    outline: none;
    transition: border-color var(--dur-base) var(--ease-out),
                background-color var(--dur-base) var(--ease-out);
    min-height: var(--field-height);
    height: var(--field-height);
}

/* Textareas: 16px Radius, mehrzeilig */
textarea.input-field {
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    height: auto;
    min-height: 48px;
}

.input-field::placeholder { color: rgba(255, 255, 255, 0.75); }

.input-field:hover { border-color: rgba(255, 255, 255, 0.6); }

.input-field:focus {
    border-color: var(--glass-field-border-focus);
    background: var(--glass-field-bg-focus);
    box-shadow: none;
}

select.input-field option {
    background: var(--smoke-deep);
    color: var(--bone);
}

.input-helper {
    margin-top: var(--space-2);
    font-family: var(--font-ui);
    font-size: var(--fs-sm);
    color: var(--ash);
    max-width: 65ch;
    letter-spacing: var(--ls-normal);
}

.input-error {
    margin-top: var(--space-2);
    font-family: var(--font-ui);
    font-size: var(--fs-sm);
    color: var(--error);
    letter-spacing: var(--ls-normal);
}

.expert-hint {
    margin-top: var(--space-2);
    font-family: var(--font-ui);
    font-size: var(--fs-xs);
    color: var(--ash-mid);
    letter-spacing: var(--ls-subtle);
}

/* ── Analyzer URL-Inputs ─────────────────────────── */

.url-inputs {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.url-input-row {
    display: flex;
    gap: var(--space-3);
    align-items: center;
    animation: slideUp var(--dur-base) var(--ease-out);
}

.url-input-num {
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    font-variant-numeric: tabular-nums;
    color: var(--ash);
    min-width: 1.5rem;
    text-align: right;
    letter-spacing: var(--ls-subtle);
}

.btn-add-url {
    font-size: var(--fs-xs);
    padding: var(--space-2) var(--space-4);
    min-width: auto;
    min-height: auto;
    height: 32px;
    align-self: flex-start;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BUTTONS — .btn-primary/.btn-download (weißer Pill, Navy-Text),
             .btn-secondary (Glas, 16px-Radius)
   ═══════════════════════════════════════════════════════════════════════════ */

.btn-primary,
.btn-download {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: 0 22px;
    background: var(--gradient-gold);
    color: var(--on-gold);
    font-family: var(--font-ui);
    font-size: var(--fs-md);
    font-weight: var(--fw-bold);
    letter-spacing: 0;
    text-transform: none;
    text-decoration: none;
    border: none;
    border-radius: var(--radius-pill);
    cursor: pointer;
    white-space: nowrap;
    min-width: 140px;
    min-height: var(--button-height);
    height: var(--button-height);
    box-shadow: var(--shadow-pill);
    transition: transform var(--dur-instant) var(--ease-base),
                box-shadow var(--dur-instant) var(--ease-base);
}

.btn-primary:hover,
.btn-download:hover { transform: translateY(-1px); }

.btn-primary:active,
.btn-download:active { transform: translateY(1px); }

/* Disabled-Pattern — ein Zustand für alle Button-Klassen */
.btn-primary:disabled,
.btn-download:disabled,
.btn-secondary:disabled,
.btn-primary--secondary:disabled,
.btn-icon:disabled,
.btn-sm:disabled,
.btn-add-url:disabled,
.vl-cal-view-btn:disabled,
.insp-filter:disabled,
.search-bar__go:disabled,
.tnt-tab:disabled {
    opacity: 0.38;
    cursor: not-allowed;
    filter: none;
}

/* Secondary-Variant (Glas-Button, 16px) */
.btn-primary--secondary,
.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 0 var(--space-6);
    background: var(--surface-flat);
    color: var(--bone);
    font-family: var(--font-ui);
    font-size: var(--fs-md);
    font-weight: var(--fw-bold);
    letter-spacing: 0;
    text-transform: none;
    border: 1px solid var(--surface-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    min-height: var(--button-height);
    height: var(--button-height);
    filter: none;
    box-shadow: none;
    transition: background var(--dur-fast) var(--ease-base),
                border-color var(--dur-fast) var(--ease-base),
                transform var(--dur-instant) var(--ease-base);
}

.btn-primary--secondary:hover,
.btn-secondary:hover {
    color: var(--bone);
    border-color: var(--surface-border);
    background: rgba(255, 255, 255, 0.16);
    transform: translateY(-1px);
}

.btn-secondary:active,
.btn-primary--secondary:active { transform: translateY(1px); }

/* Spinner-Farbe in Buttons (Navy auf weißen Pills) */
.btn-primary .spinner,
.btn-download .spinner,
.search-bar__go .spinner {
    border-color: rgba(15, 26, 42, 0.3);
    border-top-color: var(--on-gold);
}

.btn-secondary .spinner,
.btn-primary--secondary .spinner {
    border-color: rgba(255, 255, 255, 0.25);
    border-top-color: var(--bone);
}

/* ── Progress Section ────────────────────────────── */

.progress-section {
    margin-bottom: var(--space-8);
    animation: fadeIn var(--dur-base) var(--ease-out);
}

.progress-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: var(--space-3);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--hairline-gold-weak);
}

.progress-step {
    font-family: var(--font-ui);
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color: var(--bone);
}

.progress-pct {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--bone-dim);
    letter-spacing: var(--ls-subtle);
    font-variant-numeric: tabular-nums;
}

.progress-track {
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.25);
    border-radius: var(--radius-pill);
    overflow: hidden;
    position: relative;
}

.progress-fill {
    height: 100%;
    width: 0%;
    background: #fff;
    border-radius: var(--radius-pill);
    transition: width var(--dur-xslow) var(--ease-out);
    position: relative;
}

/* ── Scenes Section ──────────────────────────────── */

.scenes-section {
    margin-bottom: var(--space-10);
    animation: fadeIn var(--dur-base) var(--ease-out);
}

.section-title {
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
    letter-spacing: 0;
    text-transform: none;
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-4);
    color: var(--bone);
    border-bottom: 1px solid var(--hairline-gold-weak);
}

.scenes-list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.scene-item {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    transition: background var(--dur-instant) var(--ease-base);
    animation: slideUp var(--dur-base) var(--ease-out) calc(var(--i, 0) * 50ms) both;
}

@media (hover: hover) {
    .scene-item:hover {
        background: var(--border-subtle);
    }
}

.scene-index {
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    font-variant-numeric: tabular-nums;
    color: var(--accent);
    min-width: 1.75rem;
    padding-top: 0.125rem;
}

.scene-timestamp {
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    font-variant-numeric: tabular-nums;
    color: var(--text-dim);
    min-width: 3.5rem;
    padding-top: 0.125rem;
}

.scene-desc {
    font-size: var(--fs-md);
    color: var(--text);
    line-height: var(--lh-body);
}

/* ── Preview Grid ────────────────────────────────── */

.preview-section {
    margin-bottom: var(--space-8);
    animation: fadeIn var(--dur-base) var(--ease-out);
}

.preview-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}

@media (min-width: 640px) {
    .preview-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .preview-grid .preview-card:first-child {
        grid-column: span 2;
    }
}

.preview-card {
    position: relative;
    aspect-ratio: 4 / 5;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--bg-raised);
    border: 1px solid var(--border);
    cursor: pointer;
    transition: transform var(--dur-base) var(--ease-spring), box-shadow var(--dur-base) var(--ease-base), border-color var(--dur-instant) var(--ease-base);
    animation: scaleIn var(--dur-med) var(--ease-out) calc(var(--i, 0) * 60ms) both;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

@media (hover: hover) {
    .preview-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
        border-color: var(--glass-field-border-focus);
    }
}

.preview-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--dur-base) var(--ease-out);
}

@media (hover: hover) {
    .preview-card:hover img {
        transform: none;
    }
}

.preview-card__index {
    position: absolute;
    top: var(--space-2);
    left: var(--space-2);
    background: rgba(0, 0, 0, 0.55);
    color: var(--text);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    font-variant-numeric: tabular-nums;
    padding: 0.125rem 0.375rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
}

/* ── Download Section ────────────────────────────── */

.download-section {
    margin-bottom: var(--space-8);
    padding-top: var(--space-2);
    animation: fadeIn var(--dur-base) var(--ease-out);
}

/* ── Videos Status (Analyzer) ────────────────────── */

.videos-status-section {
    margin-bottom: var(--space-8);
    animation: fadeIn var(--dur-base) var(--ease-out);
}

.videos-status-list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.video-status-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: transparent;
    border-radius: var(--radius-sm);
    transition: background var(--dur-instant) var(--ease-base);
    animation: slideUp var(--dur-base) var(--ease-out) calc(var(--i, 0) * 50ms) both;
}

@media (hover: hover) {
    .video-status-item:hover {
        background: var(--border-subtle);
    }
}

.video-status-icon {
    font-size: var(--fs-md);
    min-width: 1.25rem;
    text-align: center;
}

.video-status-icon--done {
    color: var(--success);
}

.video-status-icon--pending {
    color: var(--text-muted);
}

.video-status-icon--failed {
    color: var(--error);
}

.video-status-title {
    font-size: var(--fs-body);
    color: var(--text);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.video-status-tag {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--text-muted);
    white-space: nowrap;
}

/* ── Pattern Cards (Analyzer) ────────────────────── */

.patterns-section {
    margin-bottom: var(--space-8);
    animation: fadeIn var(--dur-base) var(--ease-out);
}

.patterns-summary {
    font-size: var(--fs-md);
    color: var(--text-dim);
    line-height: 1.7;
    margin-bottom: var(--space-5);
    padding: var(--space-4);
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    max-width: 65ch;
}

.patterns-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.pattern-card {
    background: var(--bg-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--space-5);
    transition: border-color var(--dur-instant) var(--ease-base), box-shadow var(--dur-instant) var(--ease-base);
    animation: slideUp var(--dur-med) var(--ease-out) calc(var(--i, 0) * 60ms) both;
}

@media (max-width: 640px) {
    .pattern-card {
        padding: var(--space-4);
    }
}

@media (hover: hover) {
    .pattern-card:hover {
        border-color: var(--glass-field-border-focus);
        background: rgba(255, 255, 255, 0.12);
    }
}

.pattern-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.pattern-card__name {
    font-size: var(--fs-md);
    font-weight: var(--fw-semi);
    color: var(--text);
    letter-spacing: 0;
}

.pattern-card__meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.pattern-card__category {
    font-size: var(--fs-xs);
    font-weight: var(--fw-semi);
    color: var(--accent);
    background: var(--accent-dim);
    padding: 0.1875rem var(--space-2);
    border-radius: var(--radius-pill);
    white-space: nowrap;
}

.pattern-card__score {
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    font-variant-numeric: tabular-nums;
    color: var(--text-dim);
    white-space: nowrap;
}

.pattern-card__desc {
    font-size: var(--fs-md);
    color: var(--text-dim);
    line-height: 1.6;
    margin-bottom: var(--space-3);
    max-width: 65ch;
}

.pattern-card__examples {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.pattern-example {
    background: var(--border-subtle);
    border-left: 2px solid var(--accent);
    padding: 0.625rem 0.875rem;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.pattern-example__source {
    font-size: var(--fs-xs);
    font-family: var(--font-mono);
    color: var(--text-muted);
    margin-bottom: var(--space-1);
}

.pattern-example__quote {
    font-size: var(--fs-body);
    color: var(--text);
    line-height: var(--lh-body);
    font-style: italic;
}

.pattern-example__ts {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    font-variant-numeric: tabular-nums;
    color: var(--accent);
    margin-top: var(--space-1);
}

/* ── Error Section ───────────────────────────────── */

.error-section {
    margin-bottom: var(--space-8);
    animation: fadeIn var(--dur-base) var(--ease-out);
}

.error-card {
    padding: var(--space-5);
    background: var(--error-dim);
    border: 1px solid rgba(255, 138, 120, 0.4);
    border-radius: var(--radius-md);
}

.error-title {
    font-family: var(--font-ui);
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color: var(--error);
    margin-bottom: var(--space-2);
}

.error-message {
    font-family: var(--font-ui);
    font-size: var(--fs-sm);
    color: var(--bone-dim);
    margin-bottom: var(--space-3);
    line-height: var(--lh-body);
    max-width: 65ch;
}

/* ── Animations ──────────────────────────────────── */

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.4;
    }
}

/* ── TNT Input Tabs — Segmented Pill-Control ─────── */

.tnt-input-tabs {
    display: inline-flex;
    gap: 0;
    margin-bottom: var(--space-4);
    border: 1px solid var(--surface-border);
    border-radius: var(--radius-pill);
    padding: 3px;
    background: var(--surface-flat);
}

.tnt-tab {
    padding: var(--space-2) var(--space-4);
    font-family: var(--font-ui);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semi);
    letter-spacing: 0;
    text-transform: none;
    color: rgba(255, 255, 255, 0.75);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: color var(--dur-instant) var(--ease-out),
                background var(--dur-instant) var(--ease-out),
                border-color var(--dur-instant) var(--ease-out);
}

.tnt-tab:hover { color: var(--bone); }

.tnt-tab--active {
    background: #fff;
    border-color: transparent;
    color: var(--on-gold);
}

/* ── TNT Upload Zone ────────────────────────────── */

.tnt-upload-zone {
    border: 1px dashed var(--surface-border);
    border-radius: var(--radius-md);
    padding: var(--space-10) var(--space-6);
    text-align: center;
    cursor: pointer;
    color: var(--ash);
    background: var(--glass-field-bg);
    transition: border-color var(--dur-base) var(--ease-base),
                background var(--dur-base) var(--ease-base),
                color var(--dur-base) var(--ease-base);
}

.tnt-upload-zone.drag-over,
.tnt-upload-zone:hover {
    border-color: var(--glass-field-border-focus);
    background: var(--glass-field-bg-focus);
    color: var(--bone-dim);
}

.tnt-upload-zone svg {
    margin-bottom: var(--space-3);
    color: var(--gold);
}

.tnt-upload-browse {
    color: var(--gold-warm);
    text-decoration: none;
    border-bottom: 1px solid var(--hairline-gold);
    cursor: pointer;
}

.tnt-upload-status {
    margin-top: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--surface-flat);
    border: 1px solid var(--surface-border);
    border-radius: var(--radius-md);
    font-family: var(--font-ui);
    font-size: var(--fs-sm);
    color: var(--bone);
}

/* ── TNT Results Grid ───────────────────────────── */

.tnt-results-section {
    margin-bottom: var(--space-8);
    animation: fadeIn var(--dur-base) var(--ease-out);
}

.tnt-results-grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.tnt-result-card {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    background: var(--bg-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    transition: border-color var(--dur-instant) var(--ease-base), box-shadow var(--dur-instant) var(--ease-base);
    animation: slideUp var(--dur-med) var(--ease-out) calc(var(--i, 0) * 60ms) both;
}

@media (min-width: 640px) {
    .tnt-result-card {
        grid-template-columns: 1fr 1fr;
    }
}

@media (hover: hover) {
    .tnt-result-card:hover {
        border-color: var(--glass-field-border-focus);
        background: rgba(255, 255, 255, 0.12);
    }
}

.tnt-result-card__image {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.tnt-result-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--dur-base) var(--ease-out);
}

@media (hover: hover) {
    .tnt-result-card:hover .tnt-result-card__image img {
        transform: none;
    }
}

.tnt-result-card__index {
    position: absolute;
    top: var(--space-2);
    left: var(--space-2);
    background: rgba(0, 0, 0, 0.55);
    color: var(--text);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    font-variant-numeric: tabular-nums;
    padding: 0.125rem 0.375rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
}

.tnt-result-card__ts {
    position: absolute;
    bottom: var(--space-2);
    right: var(--space-2);
    background: rgba(0, 0, 0, 0.55);
    color: var(--text-dim);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    font-variant-numeric: tabular-nums;
    padding: 0.125rem 0.375rem;
    border-radius: var(--radius-sm);
}

.tnt-result-card__titles {
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    justify-content: center;
}

.tnt-result-card__label {
    font-size: var(--fs-xs);
    font-weight: var(--fw-semi);
    color: var(--text-muted);
    margin-bottom: var(--space-1);
}

.tnt-title-suggestion {
    display: flex;
    gap: 0.375rem;
    padding: 0.375rem 0.625rem;
    background: var(--border-subtle);
    border-radius: var(--radius-sm);
    border-left: 2px solid var(--accent);
    transition: background var(--dur-instant) var(--ease-base);
}

@media (hover: hover) {
    .tnt-title-suggestion:hover {
        background: var(--accent-dim);
    }
}

.tnt-title-num {
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    font-variant-numeric: tabular-nums;
    color: var(--accent);
    min-width: 1rem;
    padding-top: 0.0625rem;
}

.tnt-title-text {
    font-size: var(--fs-body);
    color: var(--text);
    line-height: 1.4;
}

.tnt-result-card__thumb-text {
    font-size: var(--fs-xs);
    font-family: var(--font-mono);
    font-weight: var(--fw-semi);
    color: var(--accent);
    letter-spacing: var(--ls-subtle);
    margin-bottom: 0.125rem;
}

/* ── TNT Profile Selector ──────────────────────── */

.tnt-profile-row {
    margin-bottom: 1rem;
}

.tnt-profile-controls {
    display: flex;
    gap: 0.5rem;
}

.tnt-profile-select {
    flex: 1;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    padding-right: 2rem;
    cursor: pointer;
}

.tnt-profile-manage-btn {
    white-space: nowrap;
    flex-shrink: 0;
}

/* ── TNT Profile Modal ─────────────────────────── */

.tnt-profile-modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--scrim-modal);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    animation: fadeIn var(--dur-instant) var(--ease-out);
}

.tnt-profile-modal__content {
    background: var(--glass-bg-strong);
    backdrop-filter: var(--glass-blur-strong);
    -webkit-backdrop-filter: var(--glass-blur-strong);
    border: var(--glass-border);
    border-radius: var(--radius-lg);
    width: 90%;
    max-width: 540px;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: var(--shadow-glass);
}

.tnt-profile-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--hairline-gold-weak);
}

.tnt-profile-modal__header h3 {
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
    letter-spacing: 0;
    text-transform: none;
    color: var(--bone);
}

.tnt-profile-modal__close {
    background: none;
    border: none;
    color: var(--ash);
    font-size: var(--fs-xl);
    cursor: pointer;
    padding: 0 var(--space-1);
    line-height: 1;
    transition: color var(--dur-fast) var(--ease-base);
}

@media (hover: hover) {
    .tnt-profile-modal__close:hover {
        color: var(--text);
    }
}

.tnt-profile-modal__body {
    padding: var(--space-4) var(--space-5);
}

.tnt-profile-create {
    margin-bottom: var(--space-4);
}

.tnt-profile-list {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.tnt-profile-item {
    background: var(--border-subtle);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0.875rem;
    animation: slideUp var(--dur-base) var(--ease-out);
}

.tnt-profile-item__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.tnt-profile-item__name {
    font-weight: var(--fw-semi);
    font-size: var(--fs-md);
}

.tnt-profile-item__delete {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: var(--fs-body);
    transition: color var(--dur-instant) var(--ease-base);
}

@media (hover: hover) {
    .tnt-profile-item__delete:hover {
        color: var(--error);
    }
}

.tnt-profile-item__images {
    display: flex;
    gap: 0.375rem;
    flex-wrap: wrap;
}

.tnt-profile-ref-img {
    position: relative;
    width: 72px;
    height: 40px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 1px solid var(--border);
}

.tnt-profile-ref-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.tnt-profile-ref-img__remove {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 16px;
    height: 16px;
    background: var(--bg-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius-round);
    color: var(--text);
    font-size: var(--fs-micro);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity var(--dur-instant) var(--ease-base);
}

@media (hover: hover) {
    .tnt-profile-ref-img:hover .tnt-profile-ref-img__remove {
        opacity: 1;
    }
}

@media (hover: none) {
    .tnt-profile-ref-img__remove {
        opacity: 1;
    }
}

.tnt-profile-add-img {
    width: 72px;
    height: 40px;
    border: 1px dashed var(--border);
    border-radius: var(--radius-sm);
    background: none;
    color: var(--text-muted);
    font-size: var(--fs-lg);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color var(--dur-instant) var(--ease-base), color var(--dur-instant) var(--ease-base);
}

@media (hover: hover) {
    .tnt-profile-add-img:hover {
        border-color: var(--accent);
        color: var(--accent);
    }
}

/* ── TNT Selection ─────────────────────────────── */

.tnt-result-card__select {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    z-index: 2;
    cursor: pointer;
}

.tnt-select-checkbox {
    display: none;
}

.tnt-select-check {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: var(--radius-sm);
    border: 2px solid rgba(255, 255, 255, 0.6);
    background: rgba(0, 0, 0, 0.35);
    transition: all var(--dur-instant) var(--ease-base);
}

.tnt-select-checkbox:checked+.tnt-select-check {
    background: var(--accent);
    border-color: var(--accent);
}

.tnt-select-checkbox:checked+.tnt-select-check::after {
    content: "\2713";
    color: var(--on-gold);
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
}

.tnt-result-card--selected {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 2px var(--accent-dim);
}

/* ── TNT Selection Bar — sticky, schwebt über dem Grid ── */

.tnt-selection-bar {
    position: sticky;
    bottom: var(--space-4);
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) var(--space-4);
    background: var(--glass-bg-strong);
    backdrop-filter: var(--glass-blur-strong);
    -webkit-backdrop-filter: var(--glass-blur-strong);
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-glass);
    margin-bottom: var(--space-5);
    animation: slideUp var(--dur-base) var(--ease-out);
}

/* ── TNT Edit Section ──────────────────────────── */

.tnt-edit-section {
    margin-bottom: var(--space-8);
    animation: fadeIn var(--dur-base) var(--ease-out);
}

.tnt-edit-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}

.tnt-edit-panels {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.tnt-edit-panel {
    background: var(--bg-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    animation: slideUp var(--dur-base) var(--ease-out);
}

.tnt-edit-panel__image-area {
    padding: 1rem;
}

.tnt-edit-panel__current {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--radius-sm);
    display: block;
}

.tnt-edit-panel__alternatives {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.tnt-alt-card {
    cursor: pointer;
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 2px solid var(--border);
    transition: border-color var(--dur-instant) var(--ease-base), transform var(--dur-instant) var(--ease-base);
}

@media (hover: hover) {
    .tnt-alt-card:hover {
        border-color: var(--accent);
        transform: translateY(-1px);
    }
}

.tnt-alt-card img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
}

.tnt-edit-panel__controls {
    padding: 0 1rem 1rem;
}

.tnt-edit-panel__prompt-row {
    display: flex;
    gap: 0.5rem;
}

.tnt-edit-panel__prompt-row .input-field {
    min-width: 0;
}

/* ── Responsive ──────────────────────────────────── */

@media (max-width: 640px) {
    .mode-toggle {
        height: auto;
        flex-wrap: wrap;
        justify-content: center;
    }

    .mode-toggle__btn {
        font-size: var(--fs-xs);
        padding: 0.375rem 0.5rem;
        border-bottom-width: 2px;
    }

    .mode-toggle__dropdown-item {
        font-size: var(--fs-sm);
    }

    .input-row {
        flex-direction: column;
    }

    .btn-primary {
        width: 100%;
    }

    .preview-grid {
        grid-template-columns: 1fr;
    }

    .preview-grid .preview-card:first-child {
        grid-column: span 1;
    }

    .tnt-edit-panel__prompt-row {
        flex-direction: column;
    }
}

/* ═══════════════════════════════════════════════════ */
/* EXPERT SEARCH MODE                                 */
/* ═══════════════════════════════════════════════════ */

/* ── Matrix-Suche: Search-Bar — großer Glas-Pill, weißer Go-Pill ── */
.search-bar {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 0;
    max-width: var(--search-max-width);
    border: 1px solid var(--glass-field-border);
    border-radius: var(--radius-pill);
    background: var(--glass-field-bg);
    backdrop-filter: var(--glass-field-blur);
    -webkit-backdrop-filter: var(--glass-field-blur);
    padding: var(--space-1) var(--space-1) var(--space-1) var(--space-2);
    min-height: 52px;
    transition: border-color var(--dur-instant) var(--ease-out), background var(--dur-instant) var(--ease-out);
}
.search-bar:focus-within {
    border-color: var(--glass-field-border-focus);
    background: var(--glass-field-bg-focus);
}
.search-bar__input {
    flex: 1;
    background: transparent;
    border: none;
    padding: var(--space-3) var(--space-4);
    color: var(--bone);
    font-family: var(--font-ui);
    font-size: var(--fs-lg);
    font-weight: var(--fw-medium);
    letter-spacing: 0;
    outline: none;
    min-height: 0;
    min-width: 0;
}
.search-bar__input::placeholder { color: rgba(255, 255, 255, 0.75); }
.search-bar__go {
    background: var(--gradient-gold);
    border: none;
    border-radius: var(--radius-pill);
    padding: 0 64px 0 30px;
    color: var(--on-gold);
    font-family: var(--font-ui);
    font-size: var(--fs-md);
    font-weight: var(--fw-bold);
    letter-spacing: 0;
    text-transform: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    position: relative;
    white-space: nowrap;
    box-shadow: var(--shadow-pill);
    transition: transform var(--dur-instant) var(--ease-base);
}
.search-bar__go::after {
    content: '';
    position: absolute;
    right: 30px;
    top: 50%;
    width: 22px;
    height: 1px;
    background: var(--on-gold);
}
.search-bar__go::before {
    content: '';
    position: absolute;
    right: 30px;
    top: 50%;
    width: 6px;
    height: 6px;
    border-right: 1px solid var(--on-gold);
    border-top: 1px solid var(--on-gold);
    transform: translateY(-50%) rotate(45deg);
}
.search-bar__go:hover { transform: translateY(-1px); }
.search-bar__go:active { transform: translateY(1px); }

/* Agent dots progress indicator */
.expert-agents-dots {
    display: flex;
    gap: 0.375rem;
    justify-content: center;
    margin-top: 0.875rem;
    flex-wrap: wrap;
}

.expert-dot {
    width: 24px;
    height: 24px;
    border-radius: var(--radius-round);
    background: var(--border-subtle);
    border: 1px solid var(--border);
    transition: all var(--dur-base) var(--ease-out);
    position: relative;
}

@keyframes dotPulse {

    0%,
    100% {
        opacity: 0.5;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.12);
    }
}

.expert-dot--active {
    background: var(--accent-dim);
    border-color: var(--accent);
    animation: dotPulse 1.5s ease-in-out infinite;
}

.expert-dot[data-agent="1"].expert-dot--active {
    animation-delay: 0s;
}

.expert-dot[data-agent="2"].expert-dot--active {
    animation-delay: 0.15s;
}

.expert-dot[data-agent="3"].expert-dot--active {
    animation-delay: 0.3s;
}

.expert-dot[data-agent="4"].expert-dot--active {
    animation-delay: 0.45s;
}

.expert-dot[data-agent="5"].expert-dot--active {
    animation-delay: 0.6s;
}

.expert-dot[data-agent="6"].expert-dot--active {
    animation-delay: 0.75s;
}

.expert-dot[data-agent="7"].expert-dot--active {
    animation-delay: 0.9s;
}

.expert-dot[data-agent="8"].expert-dot--active {
    animation-delay: 1.05s;
}

.expert-dot[data-agent="9"].expert-dot--active {
    animation-delay: 1.2s;
}

.expert-dot[data-agent="10"].expert-dot--active {
    animation-delay: 1.35s;
}

.expert-dot--done {
    background: var(--success);
    border-color: var(--success);
    transform: scale(1.05);
    animation: none;
}

.expert-dot--done::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 5px;
    border-left: 2px solid var(--on-gold);
    border-bottom: 2px solid var(--on-gold);
    transform: translate(-50%, -60%) rotate(-45deg);
}

/* Results */
.expert-results-section {
    margin-top: 1.5rem;
}

.expert-results-content {
    background: var(--bg-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--space-7);
    line-height: 1.7;
    color: var(--text);
    font-size: var(--fs-md);
}

@media (max-width: 640px) {
    .expert-results-content {
        padding: var(--space-4);
    }
}

.expert-results-content p {
    margin-bottom: 0.625rem;
}

.expert-results-content .expert-h2 {
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
    margin: var(--space-6) 0 0.625rem 0;
    padding-bottom: 0.375rem;
    border-bottom: 1px solid var(--border);
    color: var(--text);
}

.expert-results-content .expert-h2:first-child {
    margin-top: 0;
}

.expert-results-content .expert-h3 {
    font-size: var(--fs-lg);
    font-weight: var(--fw-semi);
    margin: var(--space-4) 0 0.375rem 0;
    color: var(--text);
}

.expert-results-content strong {
    color: var(--text);
    font-weight: var(--fw-semi);
}

.expert-list-item {
    padding: 0.1875rem 0 0.1875rem 1.25rem;
    position: relative;
}

.expert-list-num {
    font-family: var(--font-mono);
    font-size: var(--fs-body);
    font-variant-numeric: tabular-nums;
    color: var(--accent);
    font-weight: var(--fw-medium);
}

.expert-list-bullet::before {
    content: "\2022";
    position: absolute;
    left: 0.25rem;
    color: var(--text-muted);
}

.expert-pdf-btn {
    margin-top: 0.75rem;
    width: 100%;
    justify-content: center;
}


/* ═══════════════════════════════════════════════════
   VIDEOLINK MODE
   ═══════════════════════════════════════════════════ */

.container--wide {
    max-width: 1200px;
}

/* ── Side-by-side layout ── */

.videolink-section {
    width: 100%;
}

.videolink-layout {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 1.5rem;
    min-height: 60vh;
}

@media (max-width: 1024px) {
    .videolink-layout {
        grid-template-columns: 1fr;
    }
}

/* ── Grid panel ── */

.videolink-grid-panel {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.videolink-grid-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.videolink-grid-actions {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.vl-filter-select {
    width: auto;
    min-width: 90px;
    padding: 0.375rem var(--space-2);
    font-size: var(--fs-body);
}

/* Mini-Pill (Spec: 4px 14px, 13px, fw 700) */
.btn-sm {
    padding: 4px 14px;
    font-size: var(--fs-sm);
    font-weight: var(--fw-semi);
    border-radius: var(--radius-pill);
    min-height: 32px;
    height: auto;
}

/* ── Video grid container (outer scroll wrapper) ── */

.vl-video-grid-container {
    max-height: 65vh;
    overflow-y: auto;
    padding-right: 0.25rem;
}

/* ── Folder groups ── */

.vl-folder-group {
    margin-bottom: 0.75rem;
}

.vl-folder-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-1);
    cursor: pointer;
    user-select: none;
    border-bottom: 1px solid var(--hairline-ash);
    margin-bottom: var(--space-2);
    transition: opacity var(--dur-instant) var(--ease-base);
}

.vl-folder-header:hover {
    opacity: 0.8;
}

.vl-folder-chevron {
    flex-shrink: 0;
    transition: transform var(--dur-instant) var(--ease-base);
}

.vl-folder-header--collapsed .vl-folder-chevron {
    transform: rotate(-90deg);
}

.vl-folder-name {
    font-weight: var(--fw-semi);
    font-size: var(--fs-body);
    color: var(--bone);
}

.vl-folder-count {
    background: var(--hairline-bone);
    color: var(--ash);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    font-variant-numeric: tabular-nums;
    padding: 0.1rem 0.4rem;
    border-radius: var(--radius-pill);
    flex-shrink: 0;
}

.vl-folder-summary {
    color: var(--ash-mid);
    font-size: var(--fs-sm);
    margin-left: auto;
}

/* ── Video grid ── */

.vl-video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 0.5rem;
}

.vl-video-card {
    background: var(--bg-raised);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    cursor: grab;
    transition: transform var(--dur-instant) var(--ease-out), box-shadow var(--dur-instant) var(--ease-base);
    overflow: hidden;
    position: relative;
}

.vl-video-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.vl-video-card:active {
    cursor: grabbing;
}

.vl-video-card--dragging {
    opacity: 0.4;
    transform: scale(0.95);
}

.vl-video-card__thumb {
    aspect-ratio: 9 / 16;
    background: var(--border-subtle);
    overflow: hidden;
    position: relative;
}

.vl-video-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.vl-video-card__placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
}

.vl-video-card__overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0.5rem;
    background: linear-gradient(transparent, rgba(0,0,0,0.85));
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.vl-video-card__body {
    display: none;
}

.vl-video-card__client {
    font-size: var(--fs-micro);
    font-weight: var(--fw-semi);
    color: var(--accent);
    text-transform: none;
    letter-spacing: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vl-video-card__title {
    font-size: var(--fs-sm);
    font-weight: var(--fw-semi);
    line-height: 1.3;
    color: var(--bone);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vl-platform-tags {
    color: var(--success);
    font-weight: var(--fw-bold);
    font-size: var(--fs-micro);
}

/* ── State badges ── */

.vl-state-badge {
    display: inline-block;
    font-size: var(--fs-micro);
    font-weight: var(--fw-semi);
    padding: 0.125rem 0.4rem;
    border-radius: var(--radius-pill);
    background: rgba(0, 0, 0, 0.45);
    color: var(--bone);
    align-self: flex-start;
}

.vl-video-card .vl-state-badge {
    position: absolute;
    top: 0.375rem;
    left: 0.375rem;
    z-index: 2;
    backdrop-filter: blur(4px);
}

.vl-state-badge--analyzed {
    background: var(--success-dim);
    color: var(--success);
}

.vl-state-badge--scheduled {
    background: var(--info-dim);
    color: var(--info);
}

.vl-state-badge--new {
    background: rgba(0, 0, 0, 0.45);
    color: var(--bone);
}

/* ── Empty state ── */

.vl-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 3rem 1rem;
    color: var(--text-dim);
    gap: 0.5rem;
}

/* ── Calendar panel ── */

.videolink-calendar-panel {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.vl-calendar-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.vl-cal-title {
    font-size: var(--fs-lg);
    font-weight: var(--fw-semi);
    flex: 1;
    text-align: center;
}

.btn-icon {
    background: var(--surface-flat);
    border: 1px solid var(--surface-border);
    border-radius: var(--radius-pill);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: var(--fs-xl);
    color: var(--bone);
    transition: background var(--dur-instant) var(--ease-base);
}

.btn-icon:hover {
    background: rgba(255, 255, 255, 0.16);
    color: var(--bone);
}

.vl-cal-view-toggle {
    display: flex;
    gap: 0;
    border: 1px solid var(--surface-border);
    border-radius: var(--radius-pill);
    padding: 2px;
    background: var(--surface-flat);
}

.vl-cal-view-btn {
    background: none;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    padding: 0.25rem 0.75rem;
    font-family: var(--font-ui);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semi);
    letter-spacing: 0;
    text-transform: none;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.75);
    transition: background var(--dur-instant) var(--ease-out), color var(--dur-instant) var(--ease-out), border-color var(--dur-instant) var(--ease-out);
}

.vl-cal-view-btn--active {
    background: #fff;
    border-color: transparent;
    color: var(--on-gold);
}

/* ── Month calendar grid ── */

.vl-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    background: var(--border-subtle);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.vl-cal-dayname {
    padding: 0.375rem;
    text-align: center;
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    color: var(--text-dim);
    background: var(--bg);
    text-transform: uppercase;
    letter-spacing: var(--ls-eyebrow);
}

.vl-cal-day {
    min-height: 72px;
    padding: var(--space-1);
    background: var(--bg-raised);
    transition: background var(--dur-instant) var(--ease-base);
    position: relative;
}

.vl-cal-day--empty {
    background: var(--bg);
}

.vl-cal-day--today {
    background: var(--accent-dim);
}

.vl-cal-day--today .vl-cal-day__num {
    color: var(--accent);
    font-weight: 700;
}

.vl-cal-day--drop-target {
    background: rgba(255, 255, 255, 0.16) !important;
    outline: 2px dashed var(--gold);
    outline-offset: -2px;
}

.vl-cal-day__num {
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    font-variant-numeric: tabular-nums;
    color: var(--text-dim);
    display: block;
    margin-bottom: 0.125rem;
}

.vl-cal-day__chips {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.vl-cal-chip {
    font-size: var(--fs-micro);
    padding: 0.125rem 0.25rem;
    background: var(--info-dim);
    color: var(--info);
    border-radius: var(--radius-sm);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--dur-instant) var(--ease-base);
    display: flex;
    align-items: center;
    gap: 2px;
    position: relative;
}

.vl-cal-chip__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}

.vl-cal-chip:hover {
    background: rgba(140, 199, 245, 0.3);
}

.vl-cal-chip__remove {
    display: none;
    border: none;
    background: rgba(0,0,0,0.25);
    color: inherit;
    font-size: var(--fs-micro);
    line-height: 1;
    width: 14px;
    height: 14px;
    border-radius: var(--radius-round);
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    opacity: 0.7;
    transition: opacity var(--dur-instant) var(--ease-base), background var(--dur-instant) var(--ease-base);
}

.vl-cal-chip:hover .vl-cal-chip__remove,
.vl-cal-week-chip:hover .vl-cal-chip__remove {
    display: flex;
}

.vl-cal-chip__remove:hover {
    opacity: 1;
    background: rgba(255, 120, 102, 0.6);
}

/* ── Week calendar grid ── */

.vl-cal-week-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.5rem;
}

.vl-cal-week-day {
    background: var(--bg-raised);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    min-height: 180px;
    padding: var(--space-2);
    transition: background var(--dur-instant) var(--ease-base);
}

.vl-cal-week-day.vl-cal-day--today {
    border-color: var(--accent);
}

.vl-cal-week-day.vl-cal-day--drop-target {
    background: rgba(255, 255, 255, 0.16);
    border-color: var(--gold);
}

.vl-cal-week-day__header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: var(--space-2);
    padding-bottom: 0.375rem;
    border-bottom: 1px solid var(--border-subtle);
}

.vl-cal-week-day__name {
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: var(--ls-eyebrow);
}

.vl-cal-week-day__num {
    font-family: var(--font-mono);
    font-size: var(--fs-md);
    font-weight: var(--fw-semi);
    font-variant-numeric: tabular-nums;
}

.vl-cal-week-day__body {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.vl-cal-week-chip {
    display: flex;
    gap: 0.375rem;
    align-items: center;
    background: var(--accent-dim);
    border-radius: var(--radius-sm);
    padding: var(--space-1);
    cursor: pointer;
    transition: background var(--dur-instant) var(--ease-base);
    position: relative;
}

.vl-cal-week-chip .vl-cal-chip__remove {
    width: 16px;
    height: 16px;
    font-size: var(--fs-sm);
    margin-left: auto;
}

.vl-cal-week-chip:hover {
    background: var(--accent-glow);
}

.vl-cal-week-chip__thumb {
    width: 32px;
    height: 24px;
    object-fit: cover;
    border-radius: var(--radius-xs);
    flex-shrink: 0;
}

.vl-cal-week-chip__info {
    overflow: hidden;
    min-width: 0;
}

.vl-cal-week-chip__title {
    font-size: var(--fs-micro);
    font-weight: var(--fw-semi);
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vl-cal-week-chip__client {
    font-size: var(--fs-micro);
    font-weight: var(--fw-bold);
    text-transform: none;
    letter-spacing: 0;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vl-cal-week-chip__time {
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    font-variant-numeric: tabular-nums;
    color: var(--text-dim);
}

/* ── Modals ── */

.vl-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.vl-modal__overlay {
    position: absolute;
    inset: 0;
    background: var(--scrim-modal);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.vl-modal__content {
    position: relative;
    background: var(--glass-bg-strong);
    backdrop-filter: var(--glass-blur-strong);
    -webkit-backdrop-filter: var(--glass-blur-strong);
    border-radius: var(--radius-lg);
    border: var(--glass-border);
    max-width: 560px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--shadow-glass);
}

.vl-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--hairline-gold-weak);
}

.vl-modal__header h3 {
    font-size: var(--fs-lg);
    font-weight: var(--fw-semi);
}

.vl-modal__close {
    background: none;
    border: none;
    font-size: var(--fs-xl);
    cursor: pointer;
    color: var(--text-dim);
    line-height: 1;
    padding: var(--space-1);
    transition: color var(--dur-instant) var(--ease-base);
}

.vl-modal__close:hover {
    color: var(--text);
}

.vl-modal__body {
    padding: var(--space-5);
    display: flex;
    gap: var(--space-4);
}

.vl-detail-thumb {
    flex-shrink: 0;
    width: 180px;
    position: relative;
}

.vl-detail-thumb img,
.vl-detail-thumb video {
    width: 100%;
    border-radius: var(--radius-sm);
    display: block;
}

.vl-detail-play {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 56px;
    height: 56px;
    border-radius: var(--radius-round);
    border: none;
    background: rgba(0, 0, 0, 0.55);
    color: var(--bone);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(2px);
    transition: transform var(--dur-instant) var(--ease-base), background var(--dur-instant) var(--ease-base);
}

.vl-detail-play:hover {
    background: rgba(0, 0, 0, 0.75);
}

.vl-detail-play svg {
    margin-left: 3px; /* optical centering of the play triangle */
}

.vl-detail-play.hidden {
    display: none;
}

.vl-detail-fields {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
}

.vl-detail-fields .input-label {
    margin-bottom: -0.25rem;
}

.vl-detail-state {
    margin-top: 0.25rem;
}

.vl-detail-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
    flex-wrap: wrap;
}

.vl-btn-danger {
    color: var(--error) !important;
    border-color: rgba(255, 138, 120, 0.4) !important;
}

.vl-btn-danger:hover {
    background: var(--error-dim) !important;
}

@media (max-width: 640px) {
    .vl-modal__body {
        flex-direction: column;
    }

    .vl-detail-thumb {
        width: 100%;
    }

    .vl-cal-week-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ── Reduced Motion ──────────────────────────────── */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}
/* ── Upload drop zone ── */

.vl-upload-zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 1.25rem 1rem;
    border: 2px dashed var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg);
    cursor: pointer;
    transition: border-color var(--dur-instant) var(--ease-base), background var(--dur-instant) var(--ease-base);
    text-align: center;
    color: var(--text-dim);
}

.vl-upload-zone:hover,
.vl-upload-zone--dragover {
    border-color: var(--accent);
    background: var(--accent-dim);
    color: var(--accent);
}

.vl-upload-zone p {
    margin: 0;
    font-size: var(--fs-body);
    font-weight: var(--fw-medium);
}

.vl-upload-zone__hint {
    font-size: var(--fs-xs) !important;
    font-weight: var(--fw-regular) !important;
    opacity: 0.7;
}

.vl-upload-zone svg {
    opacity: 0.5;
    transition: opacity var(--dur-instant) var(--ease-base);
}

.vl-upload-zone:hover svg,
.vl-upload-zone--dragover svg {
    opacity: 1;
}

/* ── Upload progress bar ── */

.vl-upload-progress {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    padding: 0.625rem 0.75rem;
    background: var(--bg-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.vl-upload-progress__info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.vl-upload-progress__name {
    flex: 1;
    font-size: var(--fs-body);
    font-weight: var(--fw-medium);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vl-upload-progress__pct {
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    font-variant-numeric: tabular-nums;
    color: var(--text-dim);
    min-width: 3ch;
    text-align: right;
}

.vl-upload-progress__cancel {
    background: none;
    border: none;
    font-size: var(--fs-lg);
    color: var(--text-dim);
    cursor: pointer;
    padding: 0 var(--space-1);
    line-height: 1;
}

.vl-upload-progress__cancel:hover {
    color: var(--error);
}

/* ── Inline card analysis progress ── */

.vl-video-card__progress {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--border-subtle);
    overflow: hidden;
    z-index: 3;
}

.vl-video-card__progress-fill {
    height: 100%;
    background: var(--accent);
    width: 0%;
    transition: width var(--dur-base) var(--ease-base);
}

/* ── Videolink Platform Tabs ── */
.vl-platform-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid var(--border);
}

.vl-platform-tab {
    padding: var(--space-2) var(--space-4);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--bone-dim);
    font-size: var(--fs-body);
    font-weight: var(--fw-medium);
    cursor: pointer;
    transition: all var(--dur-instant) var(--ease-base);
}

.vl-platform-tab:hover {
    color: var(--bone);
}

.vl-platform-tab--active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

.vl-platform-panel {
    animation: fadeIn var(--dur-instant) var(--ease-base);
}

.vl-platform-panel.hidden {
    display: none;
}

/* Platform checkboxes */
.vl-platform-checkboxes {
    display: flex;
    gap: var(--space-4);
    margin-bottom: var(--space-3);
}

.vl-platform-check {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: var(--fs-body);
    color: var(--bone-dim);
    cursor: pointer;
}

.vl-platform-check input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin: 0;
    border: 1px solid var(--glass-field-border);
    border-radius: 6px;
    background: var(--glass-field-bg);
    display: inline-grid;
    place-content: center;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease;
}

.vl-platform-check input[type="checkbox"]:hover {
    background: var(--glass-field-bg-focus);
}

.vl-platform-check input[type="checkbox"]:checked {
    background: var(--bone);
    border-color: var(--bone);
}

.vl-platform-check input[type="checkbox"]:checked::before {
    content: "";
    width: 11px;
    height: 11px;
    background: var(--on-gold);
    clip-path: polygon(14% 44%, 0 62%, 40% 100%, 100% 18%, 84% 4%, 39% 72%);
}

.vl-platform-check.disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* YouTube connect status */
.vl-yt-status {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--fs-body);
    color: var(--bone-dim);
    padding: 0.35rem 0;
}

.vl-yt-status--connected {
    color: var(--success);
}

/* Retry button */
.vl-detail-error {
    background: var(--error-dim);
    color: var(--error);
    border-radius: var(--radius-sm);
    padding: var(--space-2) var(--space-3);
    font-size: var(--fs-body);
    line-height: 1.4;
    word-break: break-word;
}

.vl-btn-retry {
    font-size: var(--fs-body);
}

/* State badges - extended
   Status-Mapping: publishing = warn, published = success, failed = error */
.vl-state-badge--publishing {
    background: var(--warn-dim);
    color: var(--warn);
    animation: pulse 2s infinite;
}

.vl-state-badge--published {
    background: var(--success-dim);
    color: var(--success);
}

.vl-state-badge--failed {
    background: var(--error-dim);
    color: var(--error);
}

/* Publish status indicators in calendar chips */
.vl-cal-chip--publishing {
    border-left: 3px solid var(--warn);
}

.vl-cal-chip--published {
    border-left: 3px solid var(--success);
}

.vl-cal-chip--failed {
    border-left: 3px solid var(--error);
}

/* Client management */
.vl-clients-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin-top: var(--space-2);
}

.vl-client-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-2) var(--space-3);
    background: var(--surface-flat);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.vl-client-item__name {
    font-size: var(--fs-md);
    font-weight: var(--fw-medium);
}

.vl-client-item__edit {
    opacity: 0.5;
    cursor: pointer;
    background: none;
    border: none;
    color: inherit;
    padding: var(--space-1);
}

.vl-client-item__edit:hover {
    opacity: 1;
}

/* ═══════════════════════════════════════════════════════
   SKRIPT-PIPELINE
   ═══════════════════════════════════════════════════════ */

.skript-textarea {
    min-height: 22rem;
    resize: vertical;
    font-family: var(--font-ui);
    font-size: var(--fs-md);
    line-height: 1.65;
    padding: var(--space-5);
}

.skript-meta-row {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: var(--space-4);
    margin-top: var(--space-4);
}

@media (max-width: 760px) {
    .skript-meta-row { grid-template-columns: 1fr; }
}

.skript-meta-field {
    display: flex;
    flex-direction: column;
}

.input-label--small {
    font-family: var(--font-ui);
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color: var(--bone-dim);
    margin-bottom: var(--space-2);
}

.input-field--small {
    padding: 0 14px;
    font-size: var(--fs-md);
    min-height: 40px;
    height: 40px;
}

.skript-input-actions {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    margin-top: var(--space-6);
}

.skript-wordcount {
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    font-variant-numeric: tabular-nums;
    color: var(--ash);
    letter-spacing: var(--ls-wide);
}

.skript-pipeline-explainer {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    margin-top: var(--space-10);
    border-top: 1px solid var(--hairline-ash);
    border-left: 1px solid var(--hairline-ash);
    background: var(--hairline-ash);
}

@media (max-width: 760px) {
    .skript-pipeline-explainer { grid-template-columns: 1fr; }
}

.skript-pipeline-step {
    background: var(--bg);
    padding: var(--space-6);
    border-right: 1px solid var(--hairline-ash);
    border-bottom: 1px solid var(--hairline-ash);
}

.skript-pipeline-num {
    font-family: var(--font-display);
    font-size: 2.2rem;
    font-weight: var(--fw-bold);
    font-variant-numeric: tabular-nums;
    color: var(--bone);
    line-height: 1;
    margin-bottom: var(--space-2);
}

.skript-pipeline-title {
    font-size: var(--fs-md);
    font-weight: var(--fw-semi);
    color: var(--bone);
    margin-bottom: 0.3rem;
}

.skript-pipeline-hint {
    font-size: var(--fs-sm);
    color: var(--ash);
    line-height: var(--lh-body);
}

.skript-agents-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: var(--space-2);
    margin-top: var(--space-6);
}

@media (max-width: 880px) {
    .skript-agents-grid { grid-template-columns: repeat(4, 1fr); }
}

.skript-agent {
    padding: var(--space-3) var(--space-2);
    background: var(--surface-flat);
    border: 1px solid var(--hairline-ash);
    border-radius: var(--radius-sm);
    text-align: center;
    transition: all var(--dur-base) var(--ease-base);
}

.skript-agent-id {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--ls-wide);
    color: var(--ash);
    margin-bottom: 0.2rem;
}

.skript-agent-name {
    font-size: var(--fs-xs);
    color: var(--ash);
    letter-spacing: var(--ls-subtle);
}

.skript-agent--active {
    background: rgba(255, 255, 255, 0.16);
    border-color: var(--gold);
    animation: pulse 1.4s ease-in-out infinite;
}

.skript-agent--active .skript-agent-id,
.skript-agent--active .skript-agent-name {
    color: var(--gold-warm);
}

.skript-agent--done {
    background: var(--success-dim);
    border-color: var(--success);
}

.skript-agent--done .skript-agent-id {
    color: var(--success);
}

.skript-progress-hint {
    margin-top: var(--space-6);
    font-size: var(--fs-body);
    color: var(--ash);
    text-align: center;
    line-height: var(--lh-body);
}

.skript-results-section {
    padding: var(--space-8) 0;
}

.skript-results-head {
    margin-bottom: var(--space-7);
}

.skript-results-eyebrow {
    font-family: var(--font-ui);
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color: var(--bone-dim);
    margin-bottom: var(--space-2);
    display: block;
}

.skript-results-meta {
    color: var(--ash);
    font-family: var(--font-mono);
    font-size: var(--fs-body);
    font-variant-numeric: tabular-nums;
    margin-top: var(--space-2);
}

.skript-results-actions {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-bottom: var(--space-8);
}

.skript-results-actions .btn-primary,
.skript-results-actions .btn-secondary {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.skript-results-preview {
    background: var(--surface-flat);
    border: 1px solid var(--hairline-ash);
    border-radius: var(--radius-sm);
    padding: var(--space-4) var(--space-6);
}

.skript-results-preview summary {
    cursor: pointer;
    color: var(--ash);
    font-family: var(--font-ui);
    font-weight: var(--fw-semi);
    font-size: var(--fs-body);
    letter-spacing: 0;
    user-select: none;
}

.skript-final-preview {
    margin-top: var(--space-4);
    padding: var(--space-5) var(--space-6);
    background: var(--bg);
    border: 1px solid var(--hairline-ash);
    border-radius: var(--radius-sm);
    white-space: pre-wrap;
    color: var(--bone);
    font-family: var(--font-ui);
    font-size: var(--fs-md);
    line-height: 1.65;
    max-height: 32rem;
    overflow-y: auto;
}

/* ═══════════════════════════════════════════════ */
/* OUTLIER DETECTOR                                */
/* ═══════════════════════════════════════════════ */

.outlier-intro {
    margin-bottom: var(--space-6);
}

.outlier-intro-text {
    color: var(--ash);
    font-size: var(--fs-md);
    line-height: 1.65;
    max-width: 56rem;
    margin: var(--space-2) 0 0;
}

.input-label-hint {
    color: var(--ash);
    font-weight: var(--fw-regular);
    margin-left: 0.4rem;
    font-size: var(--fs-sm);
    letter-spacing: 0;
    text-transform: none;
}

.outlier-textarea {
    font-family: var(--font-ui);
    font-weight: var(--fw-medium);
    font-size: var(--fs-md);
    line-height: 1.55;
    min-height: 6rem;
}

/* Ausnahme: Channel-IDs (UC…) sind technische Werte → Mono erlaubt (Spec §3.3) */
#outlier-channels {
    font-family: var(--font-mono);
}

.outlier-textarea--small {
    min-height: 4rem;
}

.outlier-options-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: var(--space-4);
    margin-top: var(--space-5);
    padding: var(--space-4) var(--space-5);
    background: var(--surface-flat);
    border: 1px solid var(--hairline-ash);
    border-radius: var(--radius-sm);
}

.outlier-option {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.outlier-option--toggle {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
}

.outlier-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    cursor: pointer;
    color: var(--ash);
    font-size: var(--fs-body);
}

.outlier-toggle input[type="checkbox"] {
    accent-color: var(--gold);
    width: 1rem;
    height: 1rem;
    cursor: pointer;
}

.outlier-input-actions {
    margin-top: var(--space-6);
    display: flex;
    gap: var(--space-4);
    align-items: center;
}

.outlier-cost-hint {
    color: var(--ash);
    font-size: var(--fs-sm);
}

.outlier-formula {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-3);
    margin-top: var(--space-8);
    opacity: 0.85;
}

.outlier-formula-step {
    padding: var(--space-4) var(--space-5);
    background: var(--surface-flat);
    border: 1px solid var(--hairline-ash);
    border-radius: var(--radius-sm);
}

.outlier-log {
    margin-top: var(--space-5);
    padding: var(--space-4) var(--space-4);
    background: var(--surface-flat);
    border: 1px solid var(--surface-border);
    border-radius: var(--radius-md);
    max-height: 14rem;
    overflow-y: auto;
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    line-height: 1.55;
    color: var(--ash);
}

.outlier-log__line {
    display: block;
    padding: 0.15rem 0;
    border-bottom: 1px dotted var(--hairline-bone-weak);
}

.outlier-log__line:last-child {
    border-bottom: none;
}

.outlier-log__line--warn {
    color: var(--warn);
}

.outlier-results-section {
    padding: var(--space-8) 0 var(--space-16);
}

.outlier-results-head {
    margin-bottom: var(--space-7);
}

.outlier-results-meta {
    color: var(--ash);
    font-family: var(--font-mono);
    font-size: var(--fs-body);
    font-variant-numeric: tabular-nums;
    margin: var(--space-2) 0 var(--space-5);
}

.outlier-results-actions {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.outlier-results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr));
    gap: var(--space-6);
}

.outlier-card {
    background: var(--surface-flat);
    border: 1px solid var(--hairline-ash);
    border-radius: var(--radius-md);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: border-color var(--dur-instant) var(--ease-base), transform var(--dur-instant) var(--ease-base);
}

.outlier-card:hover {
    border-color: rgba(255, 255, 255, 0.45);
    transform: translateY(-2px);
}

.outlier-card__thumb {
    position: relative;
    aspect-ratio: 16/9;
    background: #000;
    display: block;
}

.outlier-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.outlier-card__score {
    position: absolute;
    top: 0.6rem;
    left: 0.6rem;
    padding: 0.3rem 0.6rem;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(4px);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-weight: var(--fw-semi);
    font-size: var(--fs-body);
    font-variant-numeric: tabular-nums;
    color: var(--bone);
    letter-spacing: 0;
}

.outlier-card__score--hot {
    background: var(--error);
    color: var(--on-gold);
}

.outlier-card__score--mid {
    background: var(--warn);
    color: var(--on-gold);
}

.outlier-card__hook {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    padding: 0.25rem 0.55rem;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(4px);
    border-radius: var(--radius-sm);
    font-family: var(--font-ui);
    font-weight: var(--fw-semi);
    font-size: var(--fs-xs);
    color: var(--bone);
    letter-spacing: 0;
    text-transform: none;
}

.outlier-card__body {
    padding: 1rem 1.1rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    flex: 1;
}

.outlier-card__title {
    margin: 0;
    font-size: var(--fs-lg);
    line-height: 1.35;
    font-weight: var(--fw-semi);
    color: var(--bone);
}

.outlier-card__title a {
    color: inherit;
    text-decoration: none;
}

.outlier-card__title a:hover {
    text-decoration: underline;
}

.outlier-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 0.7rem;
    color: var(--ash);
    font-size: var(--fs-sm);
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}

.outlier-card__channel {
    color: var(--bone-dim);
}

.outlier-card__summary {
    color: var(--ash);
    font-size: var(--fs-body);
    line-height: 1.55;
    margin: 0;
}

.outlier-card__pattern {
    padding: var(--space-2) var(--space-3);
    background: var(--surface-flat);
    border-left: 2px solid var(--warn);
    font-size: var(--fs-sm);
    color: var(--bone);
    line-height: var(--lh-body);
}

.outlier-card__variants {
    border-top: 1px dotted var(--hairline-bone-weak);
    padding-top: 0.7rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.outlier-card__variants-label {
    font-family: var(--font-ui);
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: var(--ls-eyebrow);
    color: var(--ash);
    margin-bottom: 0.2rem;
}

.outlier-card__variant {
    font-size: var(--fs-body);
    line-height: 1.4;
    color: var(--bone);
    cursor: pointer;
    padding: 0.4rem 0.55rem;
    background: var(--surface-flat);
    border-radius: var(--radius-xs);
    border-left: 2px solid transparent;
    transition: border-color var(--dur-instant) var(--ease-base), background var(--dur-instant) var(--ease-base);
}

.outlier-card__variant:hover {
    border-left-color: var(--gold);
    background: var(--bg-surface);
}

.outlier-card__variant--copied {
    border-left-color: var(--success);
}

.outlier-card__breakdown {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    font-variant-numeric: tabular-nums;
    color: var(--ash);
    border-top: 1px dotted var(--hairline-bone-weak);
    padding-top: var(--space-2);
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.outlier-card__breakdown span {
    white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════
   INSPIRATION BOARD
   ═══════════════════════════════════════════════════════ */
.inspiration-board { padding: var(--space-6) 0 var(--space-16); }

.insp-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-4);
}
.insp-filters { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.insp-filter {
    padding: 4px 14px; border-radius: var(--radius-pill);
    border: 1px solid var(--surface-border);
    background: var(--surface-flat); color: var(--bone);
    font-family: var(--font-ui); font-size: var(--fs-sm);
    font-weight: var(--fw-semi);
    letter-spacing: 0; text-transform: none;
    cursor: pointer;
    transition: border-color var(--dur-instant) var(--ease-out), color var(--dur-instant) var(--ease-out), background var(--dur-instant) var(--ease-out);
}
.insp-filter:hover { color: var(--bone); background: rgba(255, 255, 255, 0.16); }
.insp-filter--active {
    color: var(--on-gold); background: #fff;
    border-color: transparent; font-weight: var(--fw-semi);
}

.insp-toolbar__right { display: flex; gap: 0.6rem; align-items: center; }
.insp-search { width: 200px; max-width: 40vw; }

.insp-count { color: var(--ash); font-size: var(--fs-sm); margin: 0 0 var(--space-4); font-family: var(--font-ui); }

.insp-empty {
    text-align: center; padding: var(--space-16) var(--space-4); color: var(--ash);
    border: 1px dashed var(--hairline-ash); border-radius: var(--radius-md);
}
.insp-empty__title { font-size: var(--fs-lg); color: var(--bone); margin: 0 0 0.4rem; }
.insp-empty__sub { font-size: var(--fs-body); max-width: 460px; margin: 0 auto; line-height: var(--lh-body); }

.insp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
    gap: var(--space-5);
}
.insp-card {
    background: var(--surface-flat);
    border: 1px solid var(--hairline-ash);
    border-radius: var(--radius-md); overflow: hidden; cursor: pointer;
    display: flex; flex-direction: column;
    transition: border-color var(--dur-instant) var(--ease-base), transform var(--dur-instant) var(--ease-base);
}
.insp-card:hover { border-color: rgba(255, 255, 255, 0.45); transform: translateY(-2px); }
.insp-card__thumb { aspect-ratio: 16/10; background: #000; }
.insp-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.insp-card__body { padding: 0.7rem 0.8rem 0.9rem; display: flex; flex-direction: column; gap: 0.45rem; }
.insp-card__cat {
    align-self: flex-start; font-size: var(--fs-xs); font-weight: var(--fw-semi);
    text-transform: none; letter-spacing: 0;
    padding: 0.22rem var(--space-2); border-radius: var(--radius-pill);
    background: var(--hairline-bone-weak); color: var(--bone-dim);
}
.insp-cat--thumbnail { background: color-mix(in srgb, var(--client-4) 18%, transparent); color: var(--client-4); }
.insp-cat--website { background: color-mix(in srgb, var(--client-3) 18%, transparent); color: var(--client-3); }
.insp-cat--ad { background: color-mix(in srgb, var(--client-1) 18%, transparent); color: var(--client-1); }
.insp-cat--copy { background: color-mix(in srgb, var(--client-2) 18%, transparent); color: var(--client-2); }
.insp-cat--logo { background: color-mix(in srgb, var(--client-5) 18%, transparent); color: var(--client-5); }
.insp-card__note { font-size: var(--fs-body); color: var(--bone-dim); margin: 0; line-height: 1.4; }
.insp-card__tags { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.insp-tag {
    font-size: var(--fs-xs); color: var(--ash);
    background: var(--hairline-bone-weak); padding: 0.15rem 0.45rem; border-radius: var(--radius-xs);
}

/* Overlays / modals */
.insp-overlay {
    position: fixed; inset: 0; z-index: 1000;
    background: var(--scrim-modal);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    display: flex; align-items: center; justify-content: center; padding: var(--space-6);
}
.insp-modal {
    position: relative; width: 100%; max-width: 560px; max-height: 88vh; overflow-y: auto;
    background: var(--glass-bg-strong);
    backdrop-filter: var(--glass-blur-strong); -webkit-backdrop-filter: var(--glass-blur-strong);
    border: var(--glass-border); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-glass);
}
.insp-modal--narrow { max-width: 460px; }
.insp-modal__close {
    position: absolute; top: 0.6rem; right: 0.7rem; z-index: 2;
    width: 30px; height: 30px; border-radius: var(--radius-round);
    background: rgba(0, 0, 0, 0.5); border: none; color: var(--bone);
    font-size: var(--fs-lg); cursor: pointer; line-height: 1;
}
.insp-modal__preview { aspect-ratio: 16/9; background: #000; border-radius: var(--radius-lg) var(--radius-lg) 0 0; overflow: hidden; }
.insp-modal__preview img { width: 100%; height: 100%; object-fit: contain; }
.insp-modal__body { padding: var(--space-4) var(--space-5) var(--space-5); display: flex; flex-direction: column; gap: 0.55rem; }
.insp-modal__title { margin: 0 0 0.2rem; font-size: var(--fs-lg); }
.insp-modal__hint { margin: 0 0 0.6rem; font-size: var(--fs-body); color: var(--ash); line-height: var(--lh-body); }
.insp-cat-choices { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 0.3rem; }
.insp-cat-choice {
    padding: 4px 14px; border-radius: var(--radius-pill); cursor: pointer;
    border: 1px solid var(--surface-border); background: var(--surface-flat);
    color: var(--bone); font-family: var(--font-ui); font-size: var(--fs-sm);
    font-weight: var(--fw-semi);
    letter-spacing: 0; text-transform: none;
    transition: border-color var(--dur-instant) var(--ease-out), color var(--dur-instant) var(--ease-out), background var(--dur-instant) var(--ease-out);
}
.insp-cat-choice--active {
    color: var(--on-gold); background: #fff;
    border-color: transparent; font-weight: var(--fw-semi);
}
.insp-source-link { font-size: var(--fs-sm); color: var(--info); text-decoration: none; margin-top: 0.2rem; }
.insp-source-link:hover { text-decoration: underline; }
.insp-modal__actions { display: flex; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-3); }
.insp-modal__actions--start { justify-content: flex-start; }
.insp-btn-danger { color: var(--error); border-color: rgba(255, 138, 120, 0.4); }

.insp-key-fresh { margin: 0.4rem 0 0.8rem; }
.insp-key-row { display: flex; gap: var(--space-2); }
.insp-key-row .input-field { flex: 1; }
.insp-key-list { display: flex; flex-direction: column; gap: var(--space-2); margin-top: 0.4rem; }
.insp-key-empty { color: var(--ash); font-size: var(--fs-body); }
.insp-key-item {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--space-3); padding: 0.55rem 0.7rem;
    border: 1px solid var(--hairline-ash); border-radius: var(--radius-sm);
}
.insp-key-item__name { font-size: var(--fs-body); color: var(--bone-dim); margin-right: var(--space-2); }
.insp-key-item__prefix { font-size: var(--fs-sm); font-family: var(--font-mono); color: var(--ash); }
.insp-key-item__revoked { font-size: var(--fs-xs); color: var(--error); margin-left: var(--space-2); }

/* ═══════════════════════════════════════════════════════════════════════════
   INDEX-SPA — absorbierte Inline-Styles (vormals <style> in index.html)
   Scoped auf die jeweiligen Sections; Reihenfolge am Dateiende erhält die
   ursprüngliche Kaskade des Inline-Blocks.
   ═══════════════════════════════════════════════════════════════════════════ */

@keyframes bctkPulseDot {
    0%, 100% { transform: scale(1); opacity: 0.9; box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4); }
    50%      { transform: scale(1.15); opacity: 1;   box-shadow: 0 0 0 6px rgba(255, 255, 255, 0); }
}

/* ── Matrix-Suche: Search-Stage + Empty-State ── */

#expert-input-section {
    max-width: 780px;
    padding-top: var(--space-6);
}

/* Empty-State ausblenden, sobald Progress oder Ergebnisse sichtbar sind */
.main:has(#expert-progress-section:not(.hidden)) .expert-empty,
.main:has(#expert-results-section:not(.hidden))  .expert-empty { display: none; }

/* Nummerierte Mono-Steps unter der Search-Bar */
.expert-empty {
    margin-top: var(--space-7);
    max-width: 780px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    border-top: 1px solid var(--hairline-bone-weak);
    padding-top: var(--space-5);
}

.expert-empty__step {
    padding: 0 var(--space-5);
    border-right: 1px solid var(--hairline-bone-weak);
}

.expert-empty__step:first-child { padding-left: 0; }
.expert-empty__step:last-child  { border-right: none; padding-right: 0; }

.expert-empty__num {
    font-family: var(--font-ui);
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-eyebrow);
    color: var(--bone-dim);
    font-variant-numeric: tabular-nums;
}

.expert-empty__label {
    margin-top: var(--space-2);
    color: var(--bone);
    font-size: var(--fs-md);
    line-height: 1.35;
}

.expert-empty__hint {
    margin-top: var(--space-1);
    color: var(--ash);
    font-size: var(--fs-sm);
    line-height: 1.4;
}

/* ── Carousel: Form-Rail ── */

#input-section .input-row { gap: var(--space-2); }
#input-section .input-field { max-width: 520px; }
#input-section .btn-primary { white-space: nowrap; }

/* ── Analyzer: URL-Liste als nummerierter Workflow ── */

#analyzer-input-section {
    max-width: var(--search-max-width);
}

#analyzer-input-section .url-inputs {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-top: 1px solid var(--hairline-bone-weak);
    margin-top: var(--space-1);
}

#analyzer-input-section .url-input-row {
    display: grid;
    grid-template-columns: 40px 1fr;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--hairline-bone-weak);
}

#analyzer-input-section .url-input-num {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: 0;
    color: var(--ash);
    font-variant-numeric: tabular-nums;
}

#analyzer-input-section #add-url-btn.btn-add-url {
    margin-top: var(--space-3);
    background: transparent;
    border: 1px dashed var(--surface-border);
    border-radius: var(--radius-pill);
    color: var(--bone-dim);
    font-family: var(--font-ui);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semi);
    letter-spacing: 0;
    text-transform: none;
    padding: var(--space-2) var(--space-4);
}

#analyzer-input-section #add-url-btn.btn-add-url:hover {
    border-color: var(--glass-field-border-focus);
    color: var(--bone);
}

#analyzer-input-section .input-row {
    margin-top: var(--space-4);
}

#analyzer-input-section .input-row .btn-primary {
    width: auto;
    min-width: 240px;
    padding-left: var(--space-6);
    padding-right: var(--space-6);
}

/* ── TNT: kompakte Profil-Zeile + Upload-Zone ── */

#tnt-input-section {
    max-width: var(--search-max-width);
}

#tnt-input-section .tnt-profile-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--hairline-bone-weak);
    margin-bottom: var(--space-4);
}

#tnt-input-section .tnt-profile-row .input-label {
    margin: 0;
}

#tnt-input-section .tnt-profile-controls {
    display: flex;
    gap: var(--space-2);
    align-items: center;
}

#tnt-input-section .tnt-profile-select {
    min-width: 220px;
}

#tnt-input-section .tnt-upload-zone {
    border: 1px dashed rgba(255, 255, 255, 0.45);
    border-radius: var(--radius-md);
    padding: var(--space-8) var(--space-5);
    text-align: left;
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

#tnt-input-section .tnt-upload-zone svg {
    opacity: 0.5;
    flex: 0 0 auto;
    margin-bottom: 0;
}

#tnt-input-section .tnt-upload-zone p { margin: 0; }

#tnt-input-section .tnt-upload-zone .tnt-upload-browse {
    color: var(--gold);
    text-decoration: underline;
    text-underline-offset: 3px;
    border-bottom: none;
    cursor: pointer;
}

/* ── Videolink: kompakter Dashboard-Header (ersetzt den Hero) ── */

.vl-inline-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-1) 0 var(--space-4) 0;
    border-bottom: 1px solid var(--hairline-bone-weak);
    margin-bottom: var(--space-4);
}

body:not([data-active-mode="videolink"]) .vl-inline-head { display: none; }

.vl-inline-head__title {
    font-family: var(--font-display);
    font-weight: var(--fw-bold);
    font-size: var(--fs-xl);
    margin: 0;
    letter-spacing: 0;
}

.vl-inline-head__meta {
    font-family: var(--font-ui);
    font-size: var(--fs-body);
    font-weight: var(--fw-semi);
    letter-spacing: 0;
    color: var(--bone);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.vl-inline-head__meta::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: var(--radius-round);
    background: var(--gold);
    animation: bctkPulseDot 2.4s ease-in-out infinite;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TOAST (.bc-toast) — eine Mechanik für alle transienten Meldungen
   ═══════════════════════════════════════════════════════════════════════════ */

.bc-toast-container {
    position: fixed;
    bottom: var(--space-6);
    left: 50%;
    transform: translateX(-50%);
    z-index: 1100;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    pointer-events: none;
    max-width: min(90vw, 480px);
    width: max-content;
}

.bc-toast {
    position: relative;
    pointer-events: auto;
    padding: var(--space-3) var(--space-5);
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-xs);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
    color: var(--bone);
    font-family: var(--font-ui);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    letter-spacing: 0;
    line-height: var(--lh-body);
    max-width: 100%;
    overflow: hidden;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}

.bc-toast--visible {
    opacity: 1;
    transform: translateY(0);
}

.bc-toast--success { border-left: 1px solid var(--success); }
.bc-toast--error   { border-left: 1px solid var(--error); }
.bc-toast--info    { border-left: 1px solid var(--info); }

/* ═══════════════════════════════════════════════════════════════════════════
   FORM-UTILITIES
   ═══════════════════════════════════════════════════════════════════════════ */

.btn--block { width: 100%; }

.form-divider {
    border: none;
    border-top: 1px solid var(--hairline-bone-weak);
    margin: var(--space-4) 0;
}

/* ═══════════════════════════════════════════════════ */
/* PRODUKTIVITÄT — Liste, Baulig-Board, Timer, Zeiten   */
/* Redesign 2026-06: „Smoked Glass" — Bubbbly-Panel     */
/* außen, dunkle Kontrastschicht NUR auf Containern     */
/* (Spalten-Bodies, Gruppen, Grid, Tracks). Karten und  */
/* Pills bleiben weißes Spec-Glas.                      */
/* ═══════════════════════════════════════════════════ */

body[data-active-mode="produktiv"] .hero { display: none; }

/* Track-Breakout: --main-track-w steckt in max-width UND der
   margin-left-Zentrierformel (.main/.container sind dasselbe Element) —
   ein lokaler Token-Override hebt beide gleichzeitig. */
body[data-active-mode="produktiv"] .main {
    --main-track-w: 1840px;
    margin-right: 0;
}
/* margin-left animiert in der Basis-Regel bereits — max-width/padding müssen
   mitziehen, sonst ruckelt der Tab-Wechsel zweiphasig */
.main {
    transition: margin-left var(--dur-xslow) var(--ease-out),
                max-width var(--dur-xslow) var(--ease-out),
                padding var(--dur-xslow) var(--ease-out);
}
body[data-active-mode="produktiv"] .container--wide { max-width: var(--main-track-w); }
@media (min-width: 1200px) {
    body[data-active-mode="produktiv"] .main {
        padding-left: var(--space-10);
        padding-right: var(--space-10);
    }
}

.produktiv-section {
    /* Kontrastschicht-Töne — bewusste Spec-Abweichung (wie glass-bg-strong):
       dunkler Tint NUR auf Containern (Spalten-Bodies, Gruppen, Grid, Tracks),
       nie auf Karten/Pills, Cap 0.45 Alpha. Grund: weiße Karten brauchen auf
       dem scharfen Foto eine ruhige Datenebene dahinter. */
    --kontrast:        rgba(10, 16, 26, 0.25);
    --kontrast-grid:   rgba(8, 14, 24, 0.35);
    --kontrast-deep:   rgba(8, 14, 24, 0.45);
    --kontrast-border: rgba(255, 255, 255, 0.20);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    display: flex; flex-direction: column; gap: var(--space-4);
    /* Bewusste Spec-Abweichung (§1): Modal-Glas statt Panel-Glas —
       datendichte Fläche braucht die stärkere Stufe. */
    background: var(--glass-bg-strong);
    backdrop-filter: var(--glass-blur-strong);
    -webkit-backdrop-filter: var(--glass-blur-strong);
    border: var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-glass);
    padding: var(--space-6);
}
@media (min-width: 768px) {
    .produktiv-section { padding: var(--space-7) var(--space-8); }
}

.prod-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.prod-views { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--surface-border); border-radius: var(--radius-pill); background: var(--surface-flat); }
.prod-view-btn {
    padding: 8px 18px;
    background: transparent;
    border: none;
    border-radius: var(--radius-pill);
    color: rgba(255, 255, 255, 0.75);
    font-family: var(--font-ui);
    font-size: var(--fs-body);
    font-weight: var(--fw-semi);
    letter-spacing: 0;
    text-transform: none;
    cursor: pointer;
    transition: color var(--dur-instant) var(--ease-out), background var(--dur-instant) var(--ease-out);
}
.prod-view-btn:hover { color: var(--bone); }
.prod-view-btn--active { background: #fff; color: var(--on-gold); }

/* Tagesfortschritt — „Heute: 3 von 7 ✓" mit Mini-Ring */
.prod-progress {
    display: inline-flex; align-items: center; gap: var(--space-2);
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    background: var(--surface-flat);
    border: 1px solid var(--surface-border);
    color: #fff;
    font-family: var(--font-ui); font-size: var(--fs-sm); font-weight: var(--fw-semi);
    white-space: nowrap;
}
.prod-progress__ring { transform: rotate(-90deg); flex: 0 0 20px; }
.prod-progress__ring circle { fill: none; stroke-width: 3; }
.prod-progress__ring .ring-bg { stroke: rgba(255, 255, 255, 0.22); }
.prod-progress__ring .ring-fg { stroke: var(--success); stroke-linecap: round; transition: stroke-dashoffset 400ms var(--ease-out); }
.prod-progress--done { border-color: color-mix(in srgb, var(--success) 45%, transparent); background: var(--success-dim); }

.prod-quickadd { display: flex; gap: var(--space-3); }
.prod-quickadd .input-field { min-height: var(--field-height); }
.prod-quickadd__btn { min-height: var(--field-height); min-width: auto; padding: 0 var(--space-5); white-space: nowrap; }

.prod-chips { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.prod-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    background: var(--info-dim);
    border: 1px solid color-mix(in srgb, var(--info) 40%, transparent);
    color: var(--info);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semi);
    font-family: var(--font-ui);
}
.prod-chip__x {
    background: none; border: none; color: inherit; cursor: pointer; opacity: 0.7;
    font-size: 14px; padding: 0 2px; line-height: 1; min-width: 16px; min-height: 16px;
}
.prod-chip__x:hover { opacity: 1; }

/* ── Sprach-Aufnahme (Voice → Tasks) ── */
.prod-voice-btn {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-height: var(--field-height); min-width: var(--field-height);
    padding: 0 14px;
    border-radius: var(--radius-md);
    background: var(--surface-flat);
    border: 1px solid var(--surface-border);
    color: #fff;
    font-size: 17px; line-height: 1;
    cursor: pointer;
    transition: background var(--dur-instant) var(--ease-base), border-color var(--dur-instant) var(--ease-base), transform var(--dur-instant) var(--ease-base);
}
.prod-voice-btn:hover { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.55); }
.prod-voice-btn:active { transform: scale(0.95); }
.prod-voice-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.prod-voice-btn__glyph { display: inline-flex; }
.prod-voice-btn__time {
    font-family: var(--font-ui); font-size: var(--fs-sm); font-weight: var(--fw-semi);
    font-variant-numeric: tabular-nums; min-width: 2.4em; text-align: left;
}
/* Aufnahme läuft: rot, pulsierend (Puls nur ohne reduced-motion, s. u.) */
.prod-voice-btn--rec {
    background: color-mix(in srgb, #ff5a5a 32%, var(--surface-flat));
    border-color: color-mix(in srgb, #ff5a5a 70%, transparent);
}
.prod-voice-btn--rec .prod-voice-btn__glyph { color: #ff7a7a; }
/* Verarbeitung: Spinner statt Glyph */
.prod-voice-btn--busy { cursor: progress; }
.prod-voice-btn--busy .prod-voice-btn__glyph::after {
    content: ""; width: 15px; height: 15px; display: inline-block;
    border: 2px solid rgba(255, 255, 255, 0.35); border-top-color: #fff;
    border-radius: 50%; animation: prodSpin 0.7s linear infinite;
}

/* Undo-Banner */
.prod-voice-banner {
    display: flex; align-items: center; gap: var(--space-3);
    margin-top: var(--space-3);
    padding: 8px 8px 8px 16px;
    border-radius: var(--radius-md);
    background: var(--surface-flat);
    border: 1px solid var(--surface-border);
    color: #fff;
    font-family: var(--font-ui); font-size: var(--fs-sm); font-weight: var(--fw-semi);
}
.prod-voice-banner__txt { flex: 1 1 auto; }
.prod-voice-banner__undo {
    flex: 0 0 auto;
    padding: 6px 16px; border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.16); border: 1px solid rgba(255, 255, 255, 0.42);
    color: #fff; cursor: pointer; font: inherit; font-weight: var(--fw-semi);
}
.prod-voice-banner__undo:hover { background: rgba(255, 255, 255, 0.28); }
.prod-voice-banner__x {
    flex: 0 0 auto; background: none; border: none; color: inherit; cursor: pointer;
    font-size: 20px; line-height: 1; opacity: 0.6; padding: 0 6px; min-height: 24px;
}
.prod-voice-banner__x:hover { opacity: 1; }

/* „Prüfen"-Markierung — unsichere Voice-Tasks (Liste) */
.prod-row--review { background: var(--warn-dim); box-shadow: inset 3px 0 0 var(--warn); }
.prod-review-bar {
    display: flex; align-items: center; gap: 8px;
    margin: 0 0 8px; padding: 5px 10px;
    border-radius: var(--radius-sm);
    background: var(--warn-dim);
    border: 1px dashed color-mix(in srgb, var(--warn) 60%, transparent);
    font-family: var(--font-ui); font-size: var(--fs-xs); font-weight: var(--fw-semi);
}
.prod-review-bar__icon { flex: 0 0 auto; color: var(--warn); }
.prod-review-bar__txt { flex: 1 1 auto; color: color-mix(in srgb, var(--warn) 85%, #fff); }
.prod-review-bar__ok {
    flex: 0 0 auto; cursor: pointer; min-height: 26px;
    padding: 3px 14px; border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--warn) 22%, transparent);
    border: 1px solid color-mix(in srgb, var(--warn) 55%, transparent);
    color: var(--warn); font: inherit; font-weight: var(--fw-semi);
}
.prod-review-bar__ok:hover { background: color-mix(in srgb, var(--warn) 36%, transparent); }

/* „Prüfen"-Markierung (Board-Karte) */
.prod-card--review { border: 1px dashed color-mix(in srgb, var(--warn) 70%, transparent); border-left-width: 3px; }
.prod-card__review {
    display: flex; align-items: center; gap: 6px; width: 100%;
    margin-top: 8px; padding: 4px 9px;
    border-radius: var(--radius-sm);
    background: var(--warn-dim);
    border: 1px dashed color-mix(in srgb, var(--warn) 50%, transparent);
    color: var(--warn);
    font-family: var(--font-ui); font-size: var(--fs-xs); font-weight: var(--fw-semi);
    cursor: pointer; text-align: left;
}
.prod-card__review:hover { background: color-mix(in srgb, var(--warn) 24%, transparent); }
.prod-card__review-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@keyframes prodSpin { to { transform: rotate(360deg); } }

/* ── Liste ── */
.prod-group {
    margin-bottom: var(--space-4);
    background: var(--kontrast);
    border: 1px solid var(--kontrast-border);
    border-radius: var(--radius-md);
    padding: 6px 16px 10px;
}
.prod-group__head {
    display: flex; align-items: center; gap: var(--space-2);
    font-family: var(--font-ui); font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
    color: rgba(255, 255, 255, 0.92);
    padding: var(--space-3) 0 var(--space-2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    margin-bottom: var(--space-1);
}
.prod-group__head::before {
    content: "";
    width: 8px; height: 8px; flex: 0 0 8px;
    border-radius: 50%;
    background: var(--col-accent, rgba(255, 255, 255, 0.35));
}
.prod-group[data-status="todo"]        { --col-accent: var(--info); }
.prod-group[data-status="in_progress"] { --col-accent: var(--warn); }
.prod-group[data-status="done"]        { --col-accent: var(--success); }
.prod-group[data-status="weekly"]      { --col-accent: var(--client-6); }
.prod-count {
    margin-left: auto;
    font-size: var(--fs-xs);
    font-family: var(--font-ui);
    font-weight: var(--fw-semi);
    font-variant-numeric: tabular-nums;
    background: color-mix(in srgb, var(--col-accent, #fff) 18%, transparent);
    border: none;
    border-radius: var(--radius-pill);
    padding: 2px 9px;
    color: #fff;
    letter-spacing: 0;
}
.prod-empty { color: var(--ash); font-size: var(--fs-body); font-weight: var(--fw-medium); padding: var(--space-3) 0; }
.prod-empty--big { text-align: center; padding: var(--space-12) 0; font-size: var(--fs-md); }
.prod-empty--col { padding: var(--space-4) var(--space-2); text-align: center; font-size: var(--fs-sm); line-height: 1.45; }
.prod-empty__glyph { display: block; font-size: 24px; opacity: 0.35; margin-bottom: var(--space-2); }

.prod-row {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr) 20px 180px 24px 130px 26px 96px;
    align-items: center; gap: var(--space-3);
    min-height: 46px; padding: 6px 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}
.prod-group .prod-row:last-of-type { border-bottom: none; }
.prod-row:hover { background: rgba(255, 255, 255, 0.07); border-radius: 10px; }
.prod-row__title {
    min-width: 0; cursor: pointer;
    font-size: var(--fs-md); font-weight: var(--fw-medium); color: #fff;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.prod-row--done .prod-row__title { text-decoration: line-through; color: rgba(255, 255, 255, 0.55); }
.prod-row__actions { display: inline-flex; gap: 2px; justify-content: flex-end; }

.prod-check {
    position: relative;
    width: 22px; height: 22px; flex: 0 0 22px;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, 0.45);
    background: transparent;
    cursor: pointer;
    color: var(--on-gold);
    font-size: 12px; line-height: 1; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    transition: border-color var(--dur-instant) var(--ease-out), background var(--dur-instant) var(--ease-out);
}
.prod-check:hover { border-color: #fff; background: rgba(255, 255, 255, 0.18); }
.prod-check--done { background: #fff; border-color: #fff; }
.prod-check--sm { width: 18px; height: 18px; flex-basis: 18px; font-size: 10px; margin-top: 2px; }
/* Hit-Areas unsichtbar auf ≥24px erweitern (WCAG 2.5.8) — klein genug,
   um Nachbar-Targets (Titel 8-12px daneben) nicht zu überlappen */
.prod-check::before { content: ""; position: absolute; inset: -11px; border-radius: 50%; }
.prod-check--sm::before { inset: -5px; }
.prod-chip__x { position: relative; }
.prod-chip__x::before { content: ""; position: absolute; inset: -4px; }
.prod-cal__event-check { position: relative; }
.prod-cal__event-check::before { content: ""; position: absolute; inset: -5px; }

.prod-badge {
    display: inline-flex; align-items: center; gap: 6px;
    max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    cursor: pointer;
    font-size: var(--fs-xs); font-weight: var(--fw-semi);
    height: 22px; padding: 2px 10px;
    border-radius: var(--radius-pill);
    color: var(--pb, rgba(255, 255, 255, 0.8));
    background: color-mix(in srgb, var(--pb, #fff) 18%, transparent);
    border: 1px solid color-mix(in srgb, var(--pb, #fff) 45%, transparent);
}
.prod-badge--none { color: rgba(255, 255, 255, 0.65); background: var(--surface-flat); border: 1px dashed rgba(255, 255, 255, 0.35); }
.prod-badge--pending { color: var(--ash); background: var(--surface-flat); border: 1px dashed rgba(255, 255, 255, 0.35); }

.prod-prio { background: none; border: none; cursor: pointer; color: rgba(255, 255, 255, 0.55); font-size: 12px; padding: 2px 4px; }
.prod-prio--high { color: var(--warn); }
.prod-prio--low { color: rgba(255, 255, 255, 0.45); }
span.prod-prio { cursor: default; padding: 0; }

.prod-due {
    font-family: var(--font-ui); font-variant-numeric: tabular-nums;
    font-size: var(--fs-xs); font-weight: var(--fw-semi);
    color: rgba(255, 255, 255, 0.75); white-space: nowrap;
    padding: 2px 8px; border-radius: var(--radius-pill);
    justify-self: start;
}
.prod-due--today { color: var(--warn); background: var(--warn-dim); border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent); }
.prod-due--overdue { color: var(--error); background: var(--error-dim); border: 1px solid color-mix(in srgb, var(--error) 40%, transparent); }
.prod-rec { color: var(--ash); font-size: 13px; display: inline-block; }

.prod-avatar {
    width: 24px; height: 24px; flex: 0 0 24px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid var(--surface-border);
    color: #fff;
    font-size: 10px; font-weight: var(--fw-semi); letter-spacing: 0.02em;
    display: inline-flex; align-items: center; justify-content: center;
}

.prod-iconbtn {
    background: none; border: none;
    color: rgba(255, 255, 255, 0.45); cursor: pointer;
    font-size: 14px; padding: 4px 6px; border-radius: var(--radius-pill);
    opacity: 0;
    transition: opacity var(--dur-instant) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.prod-row:hover .prod-iconbtn { opacity: 1; }
.prod-iconbtn:focus-visible, .prod-row:focus-within .prod-iconbtn { opacity: 1; }
.prod-iconbtn:hover { color: #fff; background: var(--surface-flat); }
.prod-iconbtn--del:hover { color: var(--error); transition-delay: 150ms; }

.prod-notes { padding: var(--space-2) var(--space-2) var(--space-3) 38px; border-bottom: 1px solid rgba(255, 255, 255, 0.10); }
.prod-notes__ta { width: 100%; min-height: 60px; font-size: var(--fs-body); resize: vertical; }

/* ── Board (6 Spalten, Akzentfarbe pro Spalte) ── */
.prod-board { display: flex; gap: 14px; align-items: stretch; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: var(--space-2); }
.prod-col {
    /* min-width misst den Content, nicht den Viewport — unter 6×240px+Gaps
       scrollt das Board horizontal statt die Spalten zu zerquetschen */
    flex: 1 1 0; min-width: 240px;
    background: var(--kontrast);
    border: 1px solid var(--kontrast-border);
    border-top: 3px solid var(--col-accent, rgba(255, 255, 255, 0.35));
    border-radius: var(--radius-md);
    display: flex; flex-direction: column;
    max-height: calc(100vh - 210px);
    min-height: 240px;
}
.prod-col[data-col="todo"]      { --col-accent: var(--info); }
.prod-col[data-col="doing"]     { --col-accent: var(--warn); }
.prod-col[data-col="delegated"] { --col-accent: var(--client-5); }
.prod-col[data-col="done"]      { --col-accent: var(--success); }
.prod-col[data-col="weekly"]    { --col-accent: var(--client-6); }
.prod-col[data-col="delegated"] .prod-col__body {
    background: linear-gradient(180deg, rgba(211, 181, 255, 0.07), transparent 120px);
}
.prod-col--drop {
    box-shadow: inset 0 0 0 2px var(--col-accent, rgba(255, 255, 255, 0.85));
    background: color-mix(in srgb, var(--col-accent, #fff) 8%, var(--kontrast));
}
.prod-col__head {
    display: flex; align-items: flex-start; gap: var(--space-2);
    padding: var(--space-3) var(--space-3) var(--space-2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.prod-col__head[data-act="toggle-done"] { cursor: pointer; }
.prod-col__titles { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.prod-col__title {
    font-family: var(--font-ui); font-size: var(--fs-md);
    font-weight: var(--fw-bold);
    letter-spacing: 0; text-transform: none;
    color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.prod-col__sub {
    font-size: var(--fs-xs); font-weight: var(--fw-medium);
    color: rgba(255, 255, 255, 0.75);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.prod-col__head .prod-count { margin-left: auto; }
.prod-col__body { overflow-y: auto; padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); flex: 1; min-height: 80px; }
.prod-col__body::-webkit-scrollbar { width: 5px; }
.prod-col__body::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.3); border-radius: var(--radius-pill); }
.prod-col--collapsed { flex: 0 0 56px; min-width: 56px; min-height: 240px; }
/* Nur Browser-Defaults neutralisieren — Typo/Farbe liefern die Klassen
   (font/color: inherit würde sie per Spezifität überschreiben) */
button.prod-col__head, button.prod-group__head {
    width: 100%; background: none;
    text-align: left; cursor: pointer; border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    appearance: none; -webkit-appearance: none;
}
.prod-col--collapsed .prod-col__head { writing-mode: vertical-rl; border-bottom: none; padding: var(--space-3) var(--space-2); align-items: center; }
.prod-col--collapsed .prod-col__titles { flex-direction: row; }
.prod-col--collapsed .prod-col__sub { display: none; }
.prod-col--collapsed .prod-col__body { display: none; }
.prod-col--collapsed .prod-count { margin-left: 0; margin-top: var(--space-2); }

.prod-card {
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-left: 3px solid color-mix(in srgb, var(--pb, rgba(255, 255, 255, 0.30)) 60%, transparent);
    border-radius: var(--radius-md);
    padding: 12px 14px;
    cursor: grab;
    transition: transform var(--dur-instant) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.prod-card:hover { transform: translateY(-1px); background: rgba(255, 255, 255, 0.12); }
.prod-card:active { cursor: grabbing; }
.prod-card--dragging { opacity: 0.35; }
.prod-card--done { opacity: 0.55; }
.prod-card--done .prod-card__title { text-decoration: line-through; }
.prod-card__top { display: flex; gap: var(--space-2); align-items: flex-start; }
.prod-card__title {
    flex: 1; min-width: 0;
    font-size: var(--fs-body); font-weight: var(--fw-medium); color: #fff;
    cursor: pointer; line-height: 1.4;
    overflow-wrap: break-word; word-break: normal; hyphens: auto;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.prod-card__assign {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: var(--fs-xs); font-weight: var(--fw-semi); color: var(--client-5);
    white-space: nowrap;
}
.prod-card__meta { display: flex; align-items: center; gap: var(--space-2); margin-top: 8px; flex-wrap: wrap; }
.prod-drop-line { height: 3px; background: var(--col-accent, #fff); border-radius: var(--radius-pill); margin: -1px 2px; flex: 0 0 auto; }

/* ── Popover ── */
.prod-popover {
    position: fixed; z-index: 1200;
    min-width: 200px; max-width: 260px; max-height: 320px; overflow-y: auto;
    background: var(--glass-bg-strong);
    backdrop-filter: var(--glass-blur-strong);
    -webkit-backdrop-filter: var(--glass-blur-strong);
    border: var(--glass-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-glass);
    padding: var(--space-2);
}
.prod-popover__head {
    font-family: var(--font-ui); font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
    color: var(--bone-dim);
    padding: var(--space-2) var(--space-2) var(--space-1);
}
.prod-popover__item {
    display: flex; align-items: center; gap: var(--space-2);
    width: 100%; text-align: left;
    background: none; border: none;
    color: var(--bone); font-size: var(--fs-body); font-weight: var(--fw-medium);
    padding: 8px var(--space-2);
    border-radius: var(--radius-xs);
    cursor: pointer;
}
.prod-popover__item:hover { background: rgba(255, 255, 255, 0.10); }
.prod-popover__item--muted { color: var(--ash-mid); }
.prod-popover__empty { color: var(--ash-mid); font-size: var(--fs-body); padding: var(--space-2); }
.prod-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--pb, var(--ash)); flex: 0 0 8px; }

/* ── Detail-Modal ── */
.prod-detail .vl-modal__body { display: flex; flex-direction: column; gap: var(--space-3); }
.prod-d-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.prod-d-label {
    display: block;
    font-family: var(--font-ui); font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
    color: var(--bone-dim);
    margin-bottom: 4px;
}
.prod-d-actions { display: flex; gap: var(--space-3); justify-content: flex-end; margin-top: var(--space-2); }
.prod-danger { color: var(--error); border-color: rgba(255, 138, 120, 0.4); }
.prod-danger:hover { color: var(--error); border-color: var(--error); background: var(--error-dim); }

@media (max-width: 900px) {
    .prod-quickadd { flex-wrap: wrap; }
    .prod-d-grid { grid-template-columns: 1fr; }
    .prod-views { width: 100%; overflow-x: auto; }
    .prod-row { grid-template-columns: 26px minmax(0, 1fr) 140px; }
    .prod-row .prod-rec, .prod-row .prod-prio, .prod-row .prod-avatar, .prod-row .prod-badge, .prod-row .prod-due { display: none; }
    .prod-row__actions { display: none; }
}

/* ── Globaler Timer ── */
.prod-timer { position: fixed; top: 14px; right: 16px; z-index: 1300; }
.prod-timer__idle {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--glass-bg-strong);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: var(--glass-border);
    color: #fff;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: var(--shadow-glass);
    transition: background var(--dur-instant) var(--ease-out), transform var(--dur-instant) var(--ease-out);
}
.prod-timer__idle:hover { background: rgba(255, 255, 255, 0.22); transform: translateY(-1px); }
.prod-timer__running {
    display: flex; align-items: center; gap: var(--space-2);
    padding: 6px 8px 6px 14px;
    background: var(--glass-bg-strong);
    backdrop-filter: var(--glass-blur-strong);
    -webkit-backdrop-filter: var(--glass-blur-strong);
    border: var(--glass-border);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-glass);
}
.prod-timer__dot { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: var(--success); }
.prod-timer__running--paused .prod-timer__dot { background: var(--warn); animation: none; }
.prod-timer__display {
    font-size: 20px; font-weight: var(--fw-bold); color: #fff;
    font-variant-numeric: tabular-nums;
    cursor: pointer; min-width: 60px; text-align: center;
}
.prod-timer__display--warn { color: var(--warn); }
.prod-timer__info { display: flex; flex-direction: column; line-height: 1.2; max-width: 150px; }
.prod-timer__label { font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--bone-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prod-timer__mode { font-size: var(--fs-micro); font-weight: var(--fw-medium); color: var(--ash); text-transform: none; letter-spacing: 0; }
.prod-timer__running--paused .prod-timer__mode { color: var(--warn); }
.prod-timer__btn {
    background: none; border: none; cursor: pointer;
    color: var(--ash); font-size: 13px; padding: 4px 5px; border-radius: var(--radius-pill);
}
.prod-timer__btn:hover { color: var(--bone); background: var(--surface-flat); }

/* Timer Start-Popover */
.prod-timer-popover {
    position: fixed; z-index: 1305;
    width: 320px;
    background: var(--glass-bg-strong);
    backdrop-filter: var(--glass-blur-strong);
    -webkit-backdrop-filter: var(--glass-blur-strong);
    border: var(--glass-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-glass);
    padding: var(--space-4);
    display: flex; flex-direction: column; gap: var(--space-3);
}
.prod-tp__modes { display: flex; gap: 2px; padding: 3px; background: var(--surface-flat); border-radius: var(--radius-pill); border: 1px solid var(--surface-border); }
.prod-tp__mode { flex: 1; padding: 7px 4px; background: none; border: none; border-radius: var(--radius-pill); color: rgba(255, 255, 255, 0.75); font-size: var(--fs-sm); font-weight: var(--fw-semi); cursor: pointer; text-transform: none; letter-spacing: 0; }
.prod-tp__mode--active { background: #fff; color: var(--on-gold); }
.prod-tp__presets { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.prod-tp__preset {
    flex: 1; min-width: 56px; padding: 8px 4px;
    background: var(--surface-flat); border: 1px solid rgba(255, 255, 255, 0.30);
    border-radius: var(--radius-xs);
    color: var(--bone-dim);
    font-family: var(--font-ui); font-size: var(--fs-sm); font-weight: var(--fw-semi);
    font-variant-numeric: tabular-nums;
    cursor: pointer;
}
.prod-tp__preset--active { background: #fff; color: var(--on-gold); border-color: #fff; }
.prod-tp__custom { display: flex; align-items: center; gap: var(--space-2); }
.prod-tp__custom .input-field { flex: 1; }
.prod-tp__custom-label { font-size: var(--fs-xs); color: var(--ash); font-family: var(--font-ui); font-weight: var(--fw-medium); }
.prod-tp__task { position: relative; }
.prod-tp__task-results {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 2;
    margin-top: 2px;
    background: var(--smoke-deep); border: 1px solid var(--hairline-ash); border-radius: var(--radius-xs);
    max-height: 180px; overflow-y: auto;
}
.prod-tp__task-hit { display: block; width: 100%; text-align: left; background: none; border: none; color: var(--bone); padding: 8px 10px; font-size: var(--fs-body); cursor: pointer; }
.prod-tp__task-hit:hover { background: rgba(255, 255, 255, 0.10); }
.prod-tp__task-chosen { display: flex; align-items: center; gap: 8px; font-size: var(--fs-body); font-weight: var(--fw-medium); color: #fff; padding: 6px 0; }
.prod-tp__task-chosen button { background: none; border: none; color: var(--ash); cursor: pointer; font-size: 14px; margin-left: auto; }
.prod-tp__start { width: 100%; min-width: auto; min-height: var(--field-height); }

/* Timer Fullscreen */
.prod-timer-fs {
    position: fixed; inset: 0; z-index: 1400;
    background: rgba(6, 10, 16, 0.6);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    display: flex; align-items: center; justify-content: center;
}
.prod-timer-fs__inner { text-align: center; position: relative; }
.prod-timer-fs__display {
    font-size: clamp(64px, 20vw, 280px); font-weight: var(--fw-bold); color: #fff;
    line-height: 1; letter-spacing: 0; font-variant-numeric: tabular-nums;
}
.prod-timer-fs__display--warn { color: var(--warn); }
.prod-timer-fs__progress {
    width: min(480px, 60vw); height: 4px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.18);
    margin: var(--space-6) auto 0;
    overflow: hidden;
}
.prod-timer-fs__progress-bar { height: 100%; width: 0; background: #fff; border-radius: var(--radius-pill); transition: width 250ms linear; }
.prod-timer-fs__label { font-size: var(--fs-lg); font-weight: var(--fw-medium); color: var(--bone-dim); margin-top: var(--space-4); }
.prod-timer-fs__quote { min-height: 22px; font-size: var(--fs-md); font-weight: var(--fw-medium); color: rgba(255, 255, 255, 0.85); margin-top: var(--space-3); }
.prod-timer-fs__controls { display: flex; gap: var(--space-3); justify-content: center; margin-top: var(--space-8); }
.prod-timer-fs__close { position: absolute; top: -40px; right: 0; background: none; border: none; color: var(--ash); font-size: 28px; cursor: pointer; }
.prod-timer-fs__close:hover { color: var(--bone); }

/* ── Zeiten-Ansicht ── */
.prod-stats__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-5); }
.prod-stats__nav { display: flex; align-items: center; gap: var(--space-3); }
.prod-stats__week { font-size: var(--fs-md); font-weight: var(--fw-medium); color: var(--bone-dim); min-width: 90px; text-align: center; font-variant-numeric: tabular-nums; }
.prod-stats__user { max-width: 200px; }
.prod-stats__total { display: flex; align-items: baseline; gap: var(--space-3); margin-bottom: var(--space-6); flex-wrap: wrap; }
.prod-stats__total-num {
    font-size: clamp(36px, 4vw, 56px); font-weight: var(--fw-bold); color: #fff;
    font-variant-numeric: tabular-nums;
}
.prod-stats__total-lbl { font-family: var(--font-ui); font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--ash); text-transform: uppercase; letter-spacing: var(--ls-eyebrow); }
.prod-stats__delta {
    display: inline-flex; align-items: center;
    font-size: var(--fs-sm); font-weight: var(--fw-semi);
    padding: 3px 10px; border-radius: var(--radius-pill);
    font-variant-numeric: tabular-nums;
}
.prod-stats__delta--up { color: var(--success); background: var(--success-dim); }
.prod-stats__delta--down { color: var(--error); background: var(--error-dim); }
.prod-stats__bars { display: flex; flex-direction: column; gap: var(--space-3); }
.prod-stats__row { display: grid; grid-template-columns: 200px 1fr 90px; align-items: center; gap: var(--space-3); }
.prod-stats__row-label { font-size: var(--fs-md); font-weight: var(--fw-medium); color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prod-stats__who { display: block; color: rgba(255, 255, 255, 0.6); font-size: var(--fs-xs); font-weight: var(--fw-medium); }
.prod-stats__track { height: 28px; background: var(--kontrast-deep); border: 1px solid var(--kontrast-border); border-radius: var(--radius-pill); overflow: hidden; }
.prod-stats__fill {
    height: 100%; border-radius: var(--radius-pill);
    display: flex; align-items: center; justify-content: flex-end;
    padding-right: 10px;
    transition: width 500ms var(--ease-out);
}
.prod-stats__fill-val { font-size: var(--fs-sm); font-weight: var(--fw-semi); color: var(--on-gold); font-variant-numeric: tabular-nums; white-space: nowrap; }
.prod-stats__row--narrow .prod-stats__fill-val { display: none; }
.prod-stats__row-val { text-align: right; font-size: var(--fs-body); font-weight: var(--fw-medium); color: var(--bone-dim); font-variant-numeric: tabular-nums; display: none; }
.prod-stats__row--narrow .prod-stats__row-val { display: block; }

@media (max-width: 700px) {
    .prod-stats__row { grid-template-columns: 110px 1fr 70px; }
    .prod-timer__info { display: none; }
}

/* ── Kunden-Zufriedenheit ── */
.prod-cust__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-5); }
.prod-cust__bar-info { display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; }
.prod-cust__avg { font-size: var(--fs-lg); font-weight: var(--fw-semi); font-variant-numeric: tabular-nums; }
.prod-cust__avg--none { color: var(--ash); }
.prod-cust__bar-lbl { font-size: var(--fs-body); color: var(--ash); font-weight: var(--fw-medium); }
.prod-cust__add { white-space: nowrap; }

.prod-cust__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-4); }

.prod-cust {
    --sat: var(--ash);
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: var(--glass-border);
    border-radius: var(--radius-lg);
    padding: var(--space-4) var(--space-4) var(--space-3);
    display: flex; flex-direction: column; gap: var(--space-3);
}
.prod-cust__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-2); }
.prod-cust__name { font-size: var(--fs-md); font-weight: var(--fw-semi); color: #fff; line-height: 1.25; }
.prod-cust__sub { font-size: var(--fs-xs); color: var(--ash); margin-top: 2px; line-height: 1.35; }
.prod-cust__del {
    background: none; border: none; color: var(--ash); cursor: pointer;
    font-size: var(--fs-lg); line-height: 1; padding: 2px 6px; border-radius: var(--radius-sm);
    opacity: 0; transition: opacity 150ms var(--ease-out), color 150ms var(--ease-out); flex-shrink: 0;
}
.prod-cust:hover .prod-cust__del, .prod-cust__del:focus-visible { opacity: 1; }
.prod-cust__del:hover { color: var(--error); }

.prod-cust__readout { display: flex; align-items: baseline; gap: var(--space-2); }
.prod-cust__num { font-size: 2.4rem; font-weight: var(--fw-semi); color: var(--sat); font-variant-numeric: tabular-nums; line-height: 1; transition: color 150ms var(--ease-out); }
.prod-cust__den { font-size: var(--fs-md); color: var(--ash); font-weight: var(--fw-medium); }
.prod-cust__face { margin-left: auto; font-size: 1.55rem; line-height: 1; }
.prod-cust--unset .prod-cust__num { color: var(--ash); }

.prod-cust__gauge { height: 10px; background: var(--kontrast-deep); border: 1px solid var(--kontrast-border); border-radius: var(--radius-pill); overflow: hidden; }
.prod-cust__gauge-fill { height: 100%; width: 0; background: var(--sat); border-radius: var(--radius-pill); transition: width 250ms var(--ease-out), background 150ms var(--ease-out); }

.prod-cust__slider { -webkit-appearance: none; appearance: none; width: 100%; height: 22px; background: transparent; cursor: pointer; margin: 0; }
.prod-cust__slider::-webkit-slider-runnable-track { height: 4px; border-radius: var(--radius-pill); background: var(--kontrast-border); }
.prod-cust__slider::-moz-range-track { height: 4px; border-radius: var(--radius-pill); background: var(--kontrast-border); }
.prod-cust__slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--sat); border: 2px solid #fff; margin-top: -7px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4); transition: background 150ms var(--ease-out); }
.prod-cust__slider::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--sat); border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4); }
.prod-cust__slider:focus-visible { outline: none; }
.prod-cust__slider:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px var(--glass-field-border-focus); }
.prod-cust__slider:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px var(--glass-field-border-focus); }

.prod-cust__scale { display: flex; justify-content: space-between; font-size: var(--fs-xs); color: var(--ash); font-variant-numeric: tabular-nums; margin-top: -4px; }

/* ── Kalender ── */
.prod-cal__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-4); }
.prod-cal__range { font-size: var(--fs-md); font-weight: var(--fw-medium); color: var(--bone-dim); min-width: 160px; text-align: center; font-variant-numeric: tabular-nums; }
.prod-cal__conn { display: flex; align-items: center; gap: var(--space-3); }
.prod-cal__email { font-size: var(--fs-body); color: var(--ash); }
.prod-cal__link { background: none; border: none; color: var(--bone-dim); cursor: pointer; font-size: var(--fs-xs); text-decoration: underline; }
.prod-cal__connect { display: flex; align-items: center; gap: var(--space-4); background: var(--surface-flat); border: 1px solid var(--hairline-gold-weak); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); }
.prod-cal__connect p { font-size: var(--fs-body); color: var(--bone-dim); margin: 0; max-width: 360px; }
.prod-cal__connect .btn-primary { min-height: 44px; }

.prod-cal__body { display: flex; gap: var(--space-3); align-items: flex-start; }
.prod-cal__rail {
    flex: 0 0 240px;
    background: var(--kontrast);
    border: 1px solid var(--kontrast-border);
    border-radius: var(--radius-md);
    max-height: calc(100vh - 240px);
    display: flex; flex-direction: column;
}
.prod-cal__rail-head { font-family: var(--font-ui); font-size: var(--fs-sm); font-weight: var(--fw-bold); letter-spacing: 0; text-transform: none; color: #fff; padding: var(--space-3); border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
.prod-cal__rail-list { overflow-y: auto; padding: var(--space-2); display: flex; flex-direction: column; gap: var(--space-2); }
.prod-cal__railcard {
    position: relative;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: var(--radius-sm);
    padding: 9px 11px 9px 22px;
    cursor: grab;
    display: flex; flex-direction: column; gap: 5px;
}
.prod-cal__railcard::before {
    content: "⠿" / "";
    position: absolute; left: 7px; top: 50%; transform: translateY(-50%);
    font-size: 11px; color: rgba(255, 255, 255, 0.35);
}
.prod-cal__railcard:hover::before { color: rgba(255, 255, 255, 0.6); }
.prod-cal__railcard:active { cursor: grabbing; }
.prod-cal__railtitle { font-size: var(--fs-body); font-weight: var(--fw-medium); color: #fff; line-height: 1.35; }

.prod-cal__grid-scroll {
    flex: 1; overflow-x: auto; overflow-y: auto;
    max-height: calc(100vh - 240px);
    background: var(--kontrast-grid);
    border: 1px solid var(--kontrast-border);
    border-radius: var(--radius-md);
}
.prod-cal__grid { display: grid; grid-template-columns: 56px repeat(7, minmax(96px, 1fr)); min-width: 640px; }
.prod-cal__hourcol { display: flex; flex-direction: column; }
.prod-cal__corner { height: 34px; position: sticky; top: 0; z-index: 4; background: rgba(13, 20, 32, 0.92); }
.prod-cal__allday-lbl, .prod-cal__allday { min-height: 26px; }
.prod-cal__allday-lbl { font-size: var(--fs-micro); font-weight: var(--fw-medium); color: var(--ash); text-align: right; padding-right: 6px; border-bottom: 1px solid rgba(255, 255, 255, 0.14); display: flex; align-items: center; justify-content: flex-end; }
.prod-cal__hour {
    font-size: var(--fs-xs); font-weight: var(--fw-medium);
    color: rgba(255, 255, 255, 0.75);
    font-variant-numeric: tabular-nums;
    text-align: right; padding-right: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.10);
    box-sizing: border-box;
}
.prod-cal__day { display: flex; flex-direction: column; border-left: 1px solid rgba(255, 255, 255, 0.16); }
.prod-cal__dayhead {
    height: 34px;
    display: flex; align-items: center; justify-content: center; gap: 4px;
    font-family: var(--font-ui); font-size: var(--fs-sm); font-weight: var(--fw-bold);
    color: var(--bone-dim);
    text-transform: none; letter-spacing: 0;
    /* Auto-Scroll auf „jetzt − 1 h" darf die Orientierung nicht kosten */
    position: sticky; top: 0; z-index: 4;
    background: rgba(13, 20, 32, 0.92);
}
.prod-cal__dayhead span { color: var(--ash); font-variant-numeric: tabular-nums; }
.prod-cal__day--today .prod-cal__dayhead { color: var(--on-gold); background: rgba(13, 20, 32, 0.92); }
.prod-cal__day--today .prod-cal__dayhead::before { content: ""; position: absolute; inset: 3px 8px; background: #fff; border-radius: var(--radius-pill); z-index: -1; }
.prod-cal__day--today .prod-cal__dayhead { isolation: isolate; position: sticky; }
.prod-cal__day--today .prod-cal__dayhead span { color: var(--on-gold); }
.prod-cal__day--today { background: rgba(255, 255, 255, 0.05); }
.prod-cal__allday { border-bottom: 1px solid rgba(255, 255, 255, 0.14); padding: 2px; display: flex; flex-direction: column; gap: 2px; }
.prod-cal__due {
    font-size: var(--fs-micro); font-weight: var(--fw-semi); color: var(--warn);
    background: var(--warn-dim); border-radius: var(--radius-xs);
    padding: 2px 6px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.prod-cal__slots { position: relative; }
.prod-cal__slot { border-top: 1px solid rgba(255, 255, 255, 0.10); box-sizing: border-box; }
.prod-cal__slot--drop { background: rgba(255, 255, 255, 0.10); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.85); }
.prod-cal__event {
    position: absolute; left: 2px; right: 2px;
    background: rgba(255, 255, 255, 0.16);
    border: none;
    border-left: 3px solid rgba(255, 255, 255, 0.75);
    border-radius: 8px;
    padding: 4px 8px;
    min-height: 24px;
    font-size: var(--fs-xs); font-weight: var(--fw-semi); color: #fff;
    overflow: hidden; cursor: pointer;
    display: flex; align-items: flex-start; gap: 4px; flex-wrap: wrap;
}
.prod-cal__event--task { background: color-mix(in srgb, var(--info) 24%, transparent); border-left-color: var(--info); }
.prod-cal__event--foreign {
    background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.10) 0 6px, rgba(255, 255, 255, 0.04) 6px 12px);
    border-left-color: rgba(255, 255, 255, 0.35);
    color: rgba(255, 255, 255, 0.75);
    cursor: default;
}
.prod-cal__ev-readonly { font-size: var(--fs-xs); color: #fff; max-width: 220px; }
.prod-cal__ev-readonly small { color: rgba(255, 255, 255, 0.6); }
.prod-cal__event--dragging { opacity: 0.4; }
.prod-cal__event-time { color: rgba(255, 255, 255, 0.85); font-size: var(--fs-micro); font-weight: var(--fw-medium); font-variant-numeric: tabular-nums; }
.prod-cal__event-title { line-height: 1.25; }
.prod-cal__event-check { background: #fff; border: none; color: var(--on-gold); border-radius: var(--radius-round); width: 15px; height: 15px; font-size: 9px; cursor: pointer; padding: 0; line-height: 1; flex: 0 0 15px; }
.prod-cal__ev-actions { display: flex; gap: var(--space-2); margin-top: var(--space-2); }
.prod-cal__nowline {
    position: absolute; left: 0; right: 0; height: 2px;
    background: #fff; box-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
    z-index: 2; pointer-events: none;
}
.prod-cal__nowline::before {
    content: "";
    position: absolute; left: -4px; top: -3px;
    width: 8px; height: 8px; border-radius: 50%;
    background: #fff;
}

@media (max-width: 900px) {
    .prod-cal__rail { flex-basis: 170px; }
}

/* ── Mikro-Feedback (gezielt gegated, Killswitch: localStorage prodCalm=1) ── */
@media (prefers-reduced-motion: no-preference) {
    .prod-check--pop { animation: prodPop 350ms var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1)); }
    .prod-card--landed { animation: prodLand 320ms var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1)); }
    .prod-card--new { animation: prodLand 320ms var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1)), prodGlow 800ms ease-out; }
    .prod-row--new { animation: prodLand 320ms var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1)), prodGlow 800ms ease-out; }
    .prod-chip--pop { animation: prodChipPop 150ms var(--ease-out); }
    .prod-count--bump { animation: prodBump 300ms var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1)); }
    .prod-rec { transition: transform 300ms var(--ease-out); }
    .prod-row:hover .prod-rec { transform: rotate(180deg); }
    .prod-timer__dot { animation: prodBreathe 2s ease-in-out infinite; }
    .prod-voice-btn--rec { animation: prodRecPulse 1.4s ease-in-out infinite; }
}
@keyframes prodRecPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 90, 90, 0.5); } 50% { box-shadow: 0 0 0 6px rgba(255, 90, 90, 0); } }
@keyframes prodPop  { 0% { transform: scale(0.6); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } }
@keyframes prodLand { from { transform: translateY(-6px) scale(0.97); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes prodGlow { from { background-color: rgba(140, 199, 245, 0.18); } to { background-color: transparent; } }
@keyframes prodChipPop { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes prodBump { 50% { transform: scale(1.3); } }
@keyframes prodBreathe { 50% { opacity: 0.45; } }
.prod-confetti {
    position: fixed; width: 7px; height: 10px;
    border-radius: 2px; pointer-events: none; z-index: 1500;
    will-change: transform, opacity;
    animation: prodConfetti 700ms ease-out forwards;
}
@keyframes prodConfetti { to { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)); opacity: 0; } }

.prod-avatar--empty { background: none; border: none; }
.prod-group__head[data-act] { cursor: pointer; }
.prod-group__chev { font-size: 10px; color: var(--ash); }
@media (prefers-reduced-motion: reduce) {
    .prod-stats__fill { transition: none; }
    .prod-confetti { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   FUNKTIONSFLÄCHEN — jede eigenständige Content-Fläche wird ein großes
   Liquid-Glass-Panel (Spec §2): Foto scharf, Glas nur auf Panels.
   Cards DARIN bleiben innere Panels (16px, kein eigener Blur).
   ═══════════════════════════════════════════════════════════════════════════ */

.input-section,
.progress-section,
.scenes-section,
.preview-section,
.videos-status-section,
.patterns-section,
.tnt-results-section,
.tnt-edit-section,
.skript-results-section,
.outlier-results-section,
.inspiration-board,
.videolink-grid-panel,
.videolink-calendar-panel,
.expert-results-content {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-glass);
    padding: var(--space-6);
}

@media (min-width: 768px) {
    .input-section,
    .tnt-results-section,
    .skript-results-section,
    .outlier-results-section,
    .inspiration-board,
    .expert-results-content {
        padding: var(--space-7) var(--space-8);
    }
}

/* ═══════════════════════════════════════════════════ */
/* PRODUKTIVITÄT — Heute-Cockpit, Ritual, Wolke, Messung */
/* Tagescockpit: setzt die Verhaltens-Schleife durch.   */
/* ═══════════════════════════════════════════════════ */

/* ── Konsum-Banner ── */
.prod-consume {
    display: flex; align-items: center; gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    border: 1px solid var(--surface-border);
    background: var(--surface-flat);
    margin-bottom: var(--space-5);
    flex-wrap: wrap;
}
.prod-consume__dot { width: 10px; height: 10px; flex: 0 0 10px; border-radius: 50%; background: var(--ash); }
.prod-consume__label { font-weight: var(--fw-bold); color: #fff; font-size: var(--fs-md); }
.prod-consume__sub { font-size: var(--fs-sm); color: var(--bone-dim); font-weight: var(--fw-medium); }
.prod-consume--focus { border-color: color-mix(in srgb, var(--info) 45%, transparent); background: color-mix(in srgb, var(--info) 12%, transparent); }
.prod-consume--focus .prod-consume__dot { background: var(--info); box-shadow: 0 0 0 4px color-mix(in srgb, var(--info) 22%, transparent); }
.prod-consume--open { border-color: color-mix(in srgb, var(--success) 50%, transparent); background: var(--success-dim); }
.prod-consume--open .prod-consume__dot { background: var(--success); box-shadow: 0 0 0 4px color-mix(in srgb, var(--success) 24%, transparent); }
.prod-consume--feierabend { border-color: var(--surface-border); background: var(--surface-flat); }
.prod-consume--feierabend .prod-consume__dot { background: var(--client-5); }

/* ── Cockpit-Layout ── */
.prod-cockpit { display: flex; flex-direction: column; gap: var(--space-6); }
.prod-h-sec {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-glass);
    padding: var(--space-5);
}
.prod-h-sec__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); flex-wrap: wrap; }
.prod-h-sec__title { font-size: var(--fs-lg); font-weight: var(--fw-semi); color: #fff; display: inline-flex; align-items: center; gap: var(--space-2); }
.prod-h-sec__count {
    font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--on-gold);
    background: #fff; border-radius: var(--radius-pill); padding: 1px 9px;
    font-variant-numeric: tabular-nums;
}
.prod-h-hint { font-size: var(--fs-sm); color: var(--ash); font-weight: var(--fw-medium); }
.prod-h-plan {
    background: var(--surface-flat); border: 1px solid var(--surface-border);
    color: var(--bone); border-radius: var(--radius-pill);
    padding: 6px 14px; font-size: var(--fs-sm); font-weight: var(--fw-semi); cursor: pointer;
    font-family: var(--font-ui);
}
.prod-h-plan:hover { border-color: #fff; background: rgba(255, 255, 255, 0.14); }

/* ── Die-3-Karten ── */
.prod-h-cards { display: flex; flex-direction: column; gap: var(--space-3); }
.prod-h-card {
    display: flex; align-items: center; gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--glass-bg);
    border: 1px solid var(--surface-border);
    border-radius: var(--radius-md);
    transition: border-color var(--dur-instant) var(--ease-out), background var(--dur-instant) var(--ease-out);
}
.prod-h-card:hover { border-color: rgba(255, 255, 255, 0.4); }
.prod-h-card.is-done { opacity: 0.55; }
.prod-h-card.is-done .prod-h-card__title { text-decoration: line-through; }
.prod-h-card.is-biz { box-shadow: inset 3px 0 0 var(--client-2); }
.prod-h-card.is-cloud { box-shadow: inset 3px 0 0 var(--warn); }
.prod-h-card__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.prod-h-card__title { font-size: var(--fs-md); font-weight: var(--fw-medium); color: #fff; cursor: pointer; }
.prod-h-card__title:hover { color: var(--bone); text-decoration: underline; }
.prod-h-card__tags { display: inline-flex; gap: var(--space-2); flex-wrap: wrap; }
.prod-h-badge {
    font-size: var(--fs-micro); font-weight: var(--fw-bold); color: var(--on-gold);
    background: var(--client-2); border-radius: var(--radius-pill); padding: 1px 8px;
}
.prod-h-cloudtag {
    font-size: var(--fs-micro); font-weight: var(--fw-bold); color: var(--on-gold);
    background: var(--warn); border-radius: var(--radius-pill); padding: 1px 8px;
}
.prod-h-card__actions { display: inline-flex; align-items: center; gap: var(--space-2); flex: 0 0 auto; }
.prod-h-btn {
    background: var(--surface-flat); border: 1px solid var(--surface-border);
    color: var(--bone); border-radius: var(--radius-pill);
    padding: 7px 14px; font-size: var(--fs-sm); font-weight: var(--fw-semi); cursor: pointer;
    font-family: var(--font-ui); white-space: nowrap;
}
.prod-h-btn:hover { border-color: #fff; background: rgba(255, 255, 255, 0.14); }
.prod-h-btn--cloud { color: var(--on-gold); background: var(--warn); border-color: var(--warn); }
.prod-h-btn--cloud:hover { background: color-mix(in srgb, var(--warn) 85%, #fff); }
.prod-h-iconbtn {
    width: 32px; height: 32px; flex: 0 0 32px;
    display: inline-flex; align-items: center; justify-content: center;
    background: none; border: 1px solid transparent; border-radius: 50%;
    color: var(--ash); font-size: 14px; cursor: pointer;
}
.prod-h-iconbtn:hover { color: var(--bone); background: var(--surface-flat); }
.prod-h-iconbtn.is-on { background: color-mix(in srgb, var(--client-2) 26%, transparent); border-color: var(--client-2); }

/* ── Später-Impulse ── */
.prod-h-impulses { display: flex; flex-direction: column; gap: var(--space-2); }
.prod-h-impulse {
    display: flex; align-items: center; gap: var(--space-3);
    padding: 8px var(--space-3);
    background: var(--surface-flat); border: 1px solid var(--surface-border);
    border-radius: var(--radius-pill);
}
.prod-h-impulse__txt { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--bone-dim); font-size: var(--fs-body); font-weight: var(--fw-medium); }
.prod-h-impulse__act {
    background: none; border: 1px solid var(--surface-border); color: var(--bone);
    border-radius: var(--radius-pill); padding: 4px 12px; font-size: var(--fs-sm); font-weight: var(--fw-semi);
    cursor: pointer; white-space: nowrap; font-family: var(--font-ui);
}
.prod-h-impulse__act:hover { border-color: #fff; background: rgba(255, 255, 255, 0.12); }
.prod-h-impulse__del { background: none; border: none; color: var(--ash); font-size: 16px; cursor: pointer; padding: 0 4px; }
.prod-h-impulse__del:hover { color: var(--error); }

/* ── Minimum-Viable-Day ── */
.prod-h-mvd.is-on { border-color: color-mix(in srgb, var(--warn) 40%, transparent); }
.prod-h-toggle {
    width: 46px; height: 26px; flex: 0 0 46px; border-radius: var(--radius-pill);
    background: var(--surface-flat); border: 1px solid var(--surface-border);
    position: relative; cursor: pointer; padding: 0; transition: background var(--dur-instant) var(--ease-out);
}
.prod-h-toggle__knob {
    position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%;
    background: #fff; transition: transform var(--dur-instant) var(--ease-out);
}
.prod-h-toggle.is-on { background: var(--warn); border-color: var(--warn); }
.prod-h-toggle.is-on .prod-h-toggle__knob { transform: translateX(20px); }
.prod-h-mvd__items { display: flex; flex-direction: column; gap: var(--space-2); }
.prod-h-check { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-body); color: var(--bone-dim); font-weight: var(--fw-medium); cursor: pointer; }
.prod-h-check input { width: 18px; height: 18px; accent-color: var(--warn); cursor: pointer; }
.prod-h-mvd__status { margin-top: var(--space-2); font-size: var(--fs-sm); font-weight: var(--fw-semi); color: var(--ash); }
.prod-h-mvd__status.is-passed { color: var(--success); }

/* ── Footer + Streak ── */
.prod-h-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.prod-h-streak { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.prod-h-stat { font-size: var(--fs-sm); color: var(--ash); font-weight: var(--fw-medium); }
.prod-h-stat b { color: #fff; font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.prod-h-close { min-width: auto; padding: 0 var(--space-6); min-height: var(--field-height); }

/* ── Handy & Erinnerungen ── */
.prod-h-settings__row { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.prod-h-settings__out { margin-top: var(--space-3); }
.prod-h-note {
    padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
    background: var(--surface-flat); border: 1px solid var(--surface-border);
    font-size: var(--fs-sm); color: var(--bone-dim); line-height: 1.5;
}
.prod-h-note.is-ok { border-color: color-mix(in srgb, var(--success) 45%, transparent); background: var(--success-dim); color: color-mix(in srgb, var(--success) 90%, #fff); }
.prod-h-note.is-warn { border-color: color-mix(in srgb, var(--warn) 45%, transparent); background: var(--warn-dim); color: color-mix(in srgb, var(--warn) 90%, #fff); }
.prod-h-note__title { font-weight: var(--fw-bold); color: #fff; margin-bottom: 4px; }
.prod-h-note code { font-family: var(--font-mono, ui-monospace, monospace); font-size: var(--fs-xs); }
.prod-h-token {
    display: inline-block; margin: 6px 0; padding: 4px 10px;
    background: var(--smoke-deep); border-radius: var(--radius-xs);
    font-family: var(--font-mono, ui-monospace, monospace); font-size: var(--fs-sm);
    color: #fff; word-break: break-all;
}

/* ── Aufgaben-Picker (Modal) ── */
.prod-picker .vl-modal__body, .prod-ritual .vl-modal__body, .prod-clarity .vl-modal__body {
    padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4);
}
.prod-picker__hint, .prod-clarity__lead { font-size: var(--fs-body); color: var(--bone-dim); font-weight: var(--fw-medium); }
.prod-picker__list, .prod-ritual__picker {
    display: flex; flex-direction: column; gap: 2px;
    max-height: 320px; overflow-y: auto;
    border: 1px solid var(--surface-border); border-radius: var(--radius-md);
    padding: var(--space-2);
}
.prod-ritual__picker { max-height: 220px; }
.prod-picker__item {
    display: flex; align-items: center; gap: var(--space-3);
    padding: 8px var(--space-3); border-radius: var(--radius-sm); cursor: pointer;
}
.prod-picker__item:hover { background: rgba(255, 255, 255, 0.07); }
.prod-picker__cb { width: 18px; height: 18px; flex: 0 0 18px; accent-color: #fff; cursor: pointer; }
.prod-picker__title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-body); color: var(--bone); font-weight: var(--fw-medium); }
.prod-picker__biz {
    width: 30px; height: 30px; flex: 0 0 30px; border-radius: 50%;
    background: none; border: 1px solid transparent; color: var(--ash);
    font-size: 14px; cursor: pointer; opacity: 0.55;
}
.prod-picker__biz:hover { opacity: 1; background: var(--surface-flat); }
.prod-picker__biz.is-on { opacity: 1; background: color-mix(in srgb, var(--client-2) 26%, transparent); border-color: var(--client-2); }
.prod-picker__foot, .prod-clarity__foot, .prod-ritual__foot { display: flex; gap: var(--space-3); justify-content: flex-end; }

/* ── Wolke zerlegen ── */
.prod-clarity__loading { text-align: center; color: var(--bone-dim); font-size: var(--fs-md); padding: var(--space-8) 0; }
.prod-clarity__q { display: flex; flex-direction: column; gap: 2px; }
.prod-clarity__q p { color: var(--bone); font-size: var(--fs-body); font-weight: var(--fw-medium); }
.prod-clarity__label {
    font-family: var(--font-ui); font-size: var(--fs-xs); font-weight: var(--fw-bold);
    letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--bone-dim);
}
.prod-clarity__action { display: flex; flex-direction: column; gap: 4px; }

/* ── Abend-Ritual ── */
.prod-ritual__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.prod-ritual__field { display: flex; flex-direction: column; gap: 4px; }
.prod-ritual__measure { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
.prod-ritual__m { display: flex; flex-direction: column; gap: var(--space-2); }
.prod-seg-row, .prod-yn-row, .prod-en-row { display: flex; gap: var(--space-2); }
.prod-seg, .prod-yn, .prod-en {
    flex: 1; min-width: 40px; padding: 9px 6px;
    background: var(--surface-flat); border: 1px solid var(--surface-border);
    border-radius: var(--radius-sm); color: var(--bone-dim);
    font-family: var(--font-ui); font-size: var(--fs-sm); font-weight: var(--fw-semi);
    font-variant-numeric: tabular-nums; cursor: pointer;
}
.prod-seg:hover, .prod-yn:hover, .prod-en:hover { border-color: rgba(255, 255, 255, 0.5); }
.prod-seg.is-on, .prod-yn.is-on { background: #fff; color: var(--on-gold); border-color: #fff; }
.prod-en--gut.is-on { background: var(--success); color: var(--on-gold); border-color: var(--success); }
.prod-en--mittel.is-on { background: var(--warn); color: var(--on-gold); border-color: var(--warn); }
.prod-en--schlecht.is-on { background: var(--error); color: var(--on-gold); border-color: var(--error); }

/* ── Messung (14-Tage) ── */
.prod-m-summary { display: flex; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-6); }
.prod-m-stat {
    flex: 1 1 140px; display: flex; flex-direction: column; gap: 2px;
    padding: var(--space-4); border-radius: var(--radius-md);
    background: var(--glass-bg); border: var(--glass-border);
}
.prod-m-stat__num { font-size: clamp(28px, 3.5vw, 40px); font-weight: var(--fw-bold); color: #fff; font-variant-numeric: tabular-nums; line-height: 1; }
.prod-m-stat__lbl { font-family: var(--font-ui); font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--ash); text-transform: uppercase; letter-spacing: var(--ls-eyebrow); }
.prod-m-list { display: flex; flex-direction: column; gap: var(--space-2); }
.prod-m-row {
    display: grid; grid-template-columns: 92px 1fr 24px 24px 48px; align-items: center; gap: var(--space-3);
    padding: 8px var(--space-3); border-radius: var(--radius-sm); background: var(--surface-flat);
}
.prod-m-day { font-size: var(--fs-sm); color: var(--bone-dim); font-weight: var(--fw-medium); font-variant-numeric: tabular-nums; }
.prod-m-blocks { display: inline-flex; gap: 4px; }
.prod-m-block { width: 22px; height: 12px; border-radius: 3px; background: rgba(255, 255, 255, 0.14); }
.prod-m-block.is-on { background: var(--success); }
.prod-m-biz { font-size: 14px; opacity: 0.25; text-align: center; }
.prod-m-biz.is-on { opacity: 1; }
.prod-m-energy { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.prod-m-mvd { font-size: var(--fs-micro); font-weight: var(--fw-bold); color: var(--warn); text-align: center; }
.prod-m-mvd.is-on { }
.prod-m-legend { margin-top: var(--space-4); font-size: var(--fs-sm); color: var(--ash); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

@media (max-width: 720px) {
    .prod-ritual__grid, .prod-ritual__measure { grid-template-columns: 1fr; }
    .prod-h-card { flex-wrap: wrap; }
    .prod-h-card__actions { width: 100%; justify-content: flex-end; }
    .prod-m-row { grid-template-columns: 78px 1fr 22px 22px; }
    .prod-m-row .prod-m-mvd { display: none; }
}

/* ── Zuordnungs-Dropdown (Liste + Ideen) ── */
.prod-assign {
    width: 100%; max-width: 100%;
    padding: 4px 8px;
    font-size: var(--fs-sm); color: #fff;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
    cursor: pointer;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.prod-assign:hover { border-color: rgba(255, 255, 255, 0.3); }
.prod-assign:focus { outline: none; border-color: rgba(255, 255, 255, 0.45); }
.prod-assign--none { color: rgba(255, 255, 255, 0.5); }
.prod-assign option, .prod-assign optgroup { background: #1c2230; color: #fff; }
.prod-row__imp { opacity: 0.7; }

/* ── Ideen-Tab ── */
.prod-idea {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 64px 180px 130px;
    align-items: center; gap: var(--space-3);
    min-height: 52px; padding: 8px 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}
.prod-group .prod-idea:last-of-type { border-bottom: none; }
.prod-idea:hover { background: rgba(255, 255, 255, 0.07); border-radius: 10px; }
.prod-idea__main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.prod-idea__title {
    min-width: 0; cursor: pointer;
    font-size: var(--fs-md); font-weight: var(--fw-medium); color: #fff;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.prod-idea__notes {
    font-size: var(--fs-sm); color: rgba(255, 255, 255, 0.55);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.prod-idea__date { font-size: var(--fs-sm); color: rgba(255, 255, 255, 0.5); text-align: right; }

/* ── Transkripte-Tab (Voice-Notes) ── */
.prod-vn-toolbar {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
    margin-bottom: var(--space-3);
    font-size: var(--fs-sm); color: rgba(255, 255, 255, 0.55);
}
.prod-vn__download-all {
    min-height: 38px; padding: 7px 13px;
    color: #fff; font: inherit; font-weight: var(--fw-medium);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 10px; cursor: pointer;
}
.prod-vn__download-all:hover { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.35); }
.prod-vn__download-all:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.prod-vn-list { display: flex; flex-direction: column; gap: var(--space-3); }
.prod-vn {
    overflow: hidden;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 14px;
}
.prod-vn--open { background: rgba(255, 255, 255, 0.055); border-color: rgba(255, 255, 255, 0.18); }
.prod-vn__head {
    display: grid; grid-template-columns: minmax(0, 1fr) 36px 36px;
    align-items: center; gap: 4px; min-height: 52px; padding: 6px 8px 6px 10px;
}
.prod-vn .prod-iconbtn {
    width: 36px; height: 36px; padding: 0;
    display: inline-grid; place-items: center; opacity: 1;
}
.prod-vn__toggle {
    min-width: 0; align-self: stretch; padding: 0 6px;
    display: grid; grid-template-columns: 16px auto auto minmax(0, 1fr);
    align-items: center; gap: 10px;
    color: inherit; font: inherit; text-align: left;
    background: transparent; border: 0; border-radius: 9px; cursor: pointer;
}
.prod-vn__toggle:hover { background: rgba(255, 255, 255, 0.05); }
.prod-vn__toggle:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.75); outline-offset: 1px; }
.prod-vn__chevron { font-size: 22px; color: rgba(255, 255, 255, 0.5); transition: transform 160ms ease; }
.prod-vn--open .prod-vn__chevron { transform: rotate(90deg); }
.prod-vn__src { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: rgba(255, 255, 255, 0.75); }
.prod-vn__date { font-size: var(--fs-sm); color: rgba(255, 255, 255, 0.5); white-space: nowrap; }
.prod-vn__preview {
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: var(--fs-sm); color: rgba(255, 255, 255, 0.48);
}
.prod-vn__body { padding: 12px 16px 16px; border-top: 1px solid rgba(255, 255, 255, 0.09); }
.prod-vn__body[hidden] { display: none; }
.prod-vn__summary {
    margin: 0 0 8px;
    padding: 8px 12px;
    font-size: var(--fs-md); color: #fff;
    background: rgba(255, 255, 255, 0.05);
    border-left: 3px solid rgba(255, 255, 255, 0.35);
    border-radius: 6px;
}
.prod-vn__text {
    margin: 0 0 10px;
    font-size: var(--fs-md); line-height: 1.55;
    color: rgba(255, 255, 255, 0.72);
    white-space: pre-wrap; word-break: break-word;
}
.prod-vn__page {
    display: block;
    max-width: min(420px, 100%);
    margin: 0 0 10px;
    background: #fff;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 8px;
}
.prod-vn__tasks { display: flex; flex-wrap: wrap; gap: 6px; }
.prod-vn__task {
    padding: 3px 10px;
    font-size: var(--fs-sm); color: #fff;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    cursor: pointer;
}
.prod-vn__task:hover { border-color: rgba(255, 255, 255, 0.4); }
.prod-vn__task--gone { opacity: 0.45; cursor: default; }
.prod-vn__none { font-size: var(--fs-sm); color: rgba(255, 255, 255, 0.45); }

@media (max-width: 900px) {
    /* Nach den Basisregeln definiert, damit die Override greift (Quelltext-Reihenfolge) */
    .prod-idea { grid-template-columns: minmax(0, 1fr) 140px; }
    .prod-idea__date, .prod-idea .prod-row__actions { display: none; }
    .prod-vn__toggle { grid-template-columns: 16px auto minmax(0, 1fr); gap: 8px; }
    .prod-vn__preview { grid-column: 2 / -1; }
}