/* ============================================================
   Shootless — globale Styles (Modern Photo-Studio Layer)
   Brand-Tokens: tokens.css (zwingend zuvor eingebunden)
   Designsprache: hairline Borders (`--border`), Soft-Elevation
   (`--elevation-1/2/3`), Smooth-Easings (`--ease-standard`),
   subtile Grid-Linien als Hintergrund-Pattern auf warmem Off-White.
   Siehe BRANDING.md „Modern Photo-Studio Layer".
   Verboten: Glow, harte Hard-Offset-Schatten, 2–3 px Outlines.
   ============================================================ */

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

[hidden] {
    display: none !important;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-family-base);
    background: var(--surface-canvas);
    color: var(--text-primary);
    min-height: 100vh;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    position: relative;
    overflow-x: hidden;
}

body::after {
    content: "";
    position: fixed;
    inset: 0;
    background: var(--gradient-aurora);
    pointer-events: none;
    z-index: 0;
}

a {
    color: var(--brand-primary);
    text-decoration: none;
    transition: color var(--transition);
}

a:hover {
    color: var(--brand-primary-shade);
}

code {
    font-family: var(--font-family-mono);
    font-size: 0.8em;
    background: var(--surface-blue-soft);
    color: var(--brand-primary);
    padding: 1px 6px;
    border-radius: var(--radius-pill);
}

/* ============================================================
   APERTURE SHELL — Sidebar-Navigation + Content-Bühne
   Dunkle Ink-Sidebar links (Werkzeug-Gehäuse) gegen helle
   Off-White-Bühne rechts. Zwei Spalten als echtes CSS-Grid.
   ============================================================ */

/* Shell-Seiten brauchen keinen Topbar-Offset (alte Topbar entfällt). */
body.app-body {
    padding-top: 0;
}

.app-shell {
    display: grid;
    grid-template-columns: var(--sidebar-w) 1fr;
    min-height: 100vh;
}

body[data-sidebar="collapsed"] .app-shell {
    grid-template-columns: var(--sidebar-w-collapsed) 1fr;
}

/* --- Sidebar-Gehäuse --- */
.sidebar {
    position: sticky;
    top: 0;
    align-self: start;
    height: 100vh;
    z-index: 50;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 18px 14px;
    background: var(--sidebar-bg);
    border-right: 1px solid var(--sidebar-border);
    overflow: visible;
}

.sidebar-head {
    display: flex;
    align-items: center;
    padding: 4px 12px 14px;
}

.sidebar-brand {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.sidebar-brand .brand-wordmark {
    font-family: var(--font-family-display);
    font-size: 21px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--sidebar-text-strong);
    transition: opacity var(--transition);
}

.sidebar-brand:hover .brand-wordmark {
    opacity: 0.82;
}

.sidebar-brand .brand-dot {
    color: var(--brand-accent);
}

.sidebar-brand-mark {
    display: none;
    font-family: var(--font-family-display);
    font-size: 21px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--sidebar-text-strong);
}

/* --- Navigation --- */
.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.nav-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.nav-group-label {
    margin: 6px 12px 4px;
    font-family: var(--font-family-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.nav-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
    border-radius: var(--radius-md);
    color: var(--sidebar-text);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: color var(--transition), background var(--transition);
}

.nav-item:hover {
    color: var(--sidebar-text-strong);
    background: var(--sidebar-hover);
}

.nav-item.is-active {
    color: var(--sidebar-text-strong);
    background: var(--sidebar-bg-elevated);
    box-shadow: var(--glow-brand-soft);
}

.nav-item.is-active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 2px;
    height: 18px;
    border-radius: 2px;
    background: var(--nav-active-bar);
}

.nav-item-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.nav-item-icon svg {
    width: 20px;
    height: 20px;
}

.nav-item-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-spacer {
    flex: 1 1 auto;
}

/* --- Footer (Kosten + Account + Collapse) --- */
.sidebar-foot {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top: 10px;
    border-top: 1px solid var(--sidebar-border);
}

.sidebar-collapse {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 8px 12px;
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    color: var(--sidebar-text);
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: color var(--transition), background var(--transition);
}

.sidebar-collapse:hover {
    color: var(--sidebar-text-strong);
    background: var(--sidebar-hover);
}

.sidebar-collapse-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    transition: transform var(--transition);
}

.sidebar-collapse-icon svg {
    width: 18px;
    height: 18px;
}

/* --- Projekt-Switcher im Sidebar-Kontext (dunkel, volle Breite) --- */
.sidebar .proj-switcher {
    width: 100%;
}

.sidebar .proj-switcher-trigger {
    width: 100%;
    max-width: none;
    justify-content: flex-start;
    background: var(--sidebar-bg-elevated);
    color: var(--sidebar-text-strong);
    border-color: var(--sidebar-border);
    border-radius: var(--radius-md);
    box-shadow: none;
}

.sidebar .proj-switcher-trigger:hover {
    background: var(--sidebar-hover);
    border-color: rgba(255, 255, 255, 0.16);
    box-shadow: none;
    transform: none;
}

.sidebar .proj-switcher-icon {
    color: var(--sidebar-text);
}

.sidebar .proj-switcher-caret {
    margin-left: auto;
    color: var(--sidebar-text);
}

.sidebar .proj-switcher-menu {
    top: calc(100% + 8px);
    left: 0;
    right: auto;
    width: 100%;
    min-width: 0;
}

/* --- Command-Palette-Trigger (⌘K) unter dem Projekt-Switcher --- */
.sidebar-cmdk {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin-top: 4px;
    padding: 9px 12px;
    background: var(--sidebar-bg-elevated);
    border: 1px solid var(--sidebar-border);
    border-radius: var(--radius-md);
    color: var(--sidebar-text);
    font-family: var(--font-family-base);
    font-size: 13px;
    cursor: pointer;
    transition: color var(--transition), background var(--transition), border-color var(--transition);
}

.sidebar-cmdk:hover {
    background: var(--sidebar-hover);
    color: var(--sidebar-text-strong);
    border-color: rgba(255, 255, 255, 0.16);
}

.sidebar-cmdk-icon {
    display: inline-flex;
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    color: var(--sidebar-text);
}

.sidebar-cmdk-icon svg {
    width: 18px;
    height: 18px;
}

.sidebar-cmdk-label {
    flex: 1 1 auto;
    text-align: left;
}

.sidebar-cmdk-kbd {
    flex: 0 0 auto;
    font-family: var(--font-family-mono);
    font-size: 11px;
    color: var(--sidebar-text);
    padding: 2px 6px;
    border: 1px solid var(--sidebar-border);
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.04);
}

/* --- Account-Trigger im Sidebar-Footer (volle Breite, öffnet nach oben) --- */
.sidebar .account-menu-wrap {
    width: 100%;
}

.sidebar .account-trigger {
    width: 100%;
    height: auto;
    justify-content: flex-start;
    gap: 10px;
    padding: 7px 10px;
    background: transparent;
    border-color: transparent;
    border-radius: var(--radius-md);
    box-shadow: none;
}

.sidebar .account-trigger:hover {
    background: var(--sidebar-hover);
    border-color: transparent;
    box-shadow: none;
    transform: none;
}

.account-trigger-email {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 500;
    color: var(--sidebar-text);
}

.sidebar .account-menu {
    top: auto;
    bottom: calc(100% + 8px);
    left: 0;
    right: auto;
    width: 100%;
    min-width: 0;
}

/* --- Content-Bühne (rechte Spalte) --- */
.shell-content {
    position: relative;
    z-index: 1;
    min-width: 0;
    padding: var(--shell-gutter) 0;
}

/* ============================================================
   COLLAPSED RAIL (Desktop) — nur Icons, Labels via Tooltip
   ============================================================ */
body[data-sidebar="collapsed"] .sidebar {
    padding: 18px 8px;
}

body[data-sidebar="collapsed"] .sidebar-head {
    justify-content: center;
    padding: 4px 0 14px;
}

body[data-sidebar="collapsed"] .sidebar-brand .brand-wordmark {
    display: none;
}

body[data-sidebar="collapsed"] .sidebar-brand-mark {
    display: inline-flex;
}

body[data-sidebar="collapsed"] .nav-item,
body[data-sidebar="collapsed"] .sidebar-collapse,
body[data-sidebar="collapsed"] .sidebar-cmdk,
body[data-sidebar="collapsed"] .sidebar .account-trigger,
body[data-sidebar="collapsed"] .sidebar .proj-switcher-trigger {
    justify-content: center;
    gap: 0;
}

body[data-sidebar="collapsed"] .nav-item-label,
body[data-sidebar="collapsed"] .nav-group-label,
body[data-sidebar="collapsed"] .sidebar-cmdk-label,
body[data-sidebar="collapsed"] .sidebar-cmdk-kbd,
body[data-sidebar="collapsed"] .proj-switcher-name,
body[data-sidebar="collapsed"] .proj-switcher-caret,
body[data-sidebar="collapsed"] .account-trigger-email,
body[data-sidebar="collapsed"] .sidebar-collapse-label {
    display: none;
}

body[data-sidebar="collapsed"] .sidebar-collapse-icon {
    transform: rotate(180deg);
}

/* Fly-out-Menüs neben der Rail statt unter/über dem Trigger. */
body[data-sidebar="collapsed"] .sidebar .proj-switcher-menu {
    top: 0;
    bottom: auto;
    left: calc(100% + 8px);
    right: auto;
    width: 240px;
    min-width: 240px;
}

body[data-sidebar="collapsed"] .sidebar .account-menu {
    top: auto;
    bottom: 0;
    left: calc(100% + 8px);
    right: auto;
    width: 240px;
    min-width: 240px;
}

/* Collapsed-Tooltips (eigenes Pattern, kein natives title-Attribut).
   Auch bei Keyboard-Fokus, damit die Rail ohne Maus bedienbar bleibt. */
body[data-sidebar="collapsed"] [data-tooltip]:hover::after,
body[data-sidebar="collapsed"] [data-tooltip]:focus-visible::after {
    content: attr(data-tooltip);
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
    z-index: 200;
    padding: 5px 9px;
    background: var(--sidebar-bg-elevated);
    color: var(--sidebar-text-strong);
    border: 1px solid var(--sidebar-border);
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    box-shadow: var(--elevation-2);
    pointer-events: none;
}

/* ============================================================
   MOBILE-STUB + OFF-CANVAS-DRAWER
   ============================================================ */
.mobile-stub {
    display: none;
}

.drawer-backdrop {
    display: none;
}

@media (max-width: 900px) {

    .app-shell,
    body[data-sidebar="collapsed"] .app-shell {
        grid-template-columns: 1fr;
    }

    .mobile-stub {
        position: sticky;
        top: 0;
        z-index: 60;
        display: flex;
        align-items: center;
        gap: 14px;
        height: 56px;
        padding: 0 16px;
        background: var(--sidebar-bg);
        border-bottom: 1px solid var(--sidebar-border);
    }

    .mobile-stub-brand {
        text-decoration: none;
    }

    .mobile-stub-brand .brand-wordmark {
        font-family: var(--font-family-display);
        font-size: 19px;
        font-weight: 600;
        letter-spacing: -0.02em;
        color: var(--sidebar-text-strong);
    }

    .mobile-stub-brand .brand-dot {
        color: var(--brand-accent);
    }

    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        width: var(--sidebar-w);
        height: 100vh;
        padding: 18px 14px;
        transform: translateX(-100%);
        transition: transform 220ms var(--ease-standard);
        z-index: 120;
    }

    body[data-drawer="open"] .sidebar {
        transform: none;
    }

    /* Im Drawer immer die volle Sidebar zeigen, nie die Rail. */
    body[data-sidebar="collapsed"] .sidebar {
        width: var(--sidebar-w);
        padding: 18px 14px;
    }

    body[data-sidebar="collapsed"] .nav-item-label,
    body[data-sidebar="collapsed"] .nav-group-label,
    body[data-sidebar="collapsed"] .proj-switcher-name,
    body[data-sidebar="collapsed"] .proj-switcher-caret,
    body[data-sidebar="collapsed"] .account-trigger-email,
    body[data-sidebar="collapsed"] .sidebar-collapse-label {
        display: revert;
    }

    body[data-sidebar="collapsed"] .sidebar-brand .brand-wordmark {
        display: inline;
    }

    body[data-sidebar="collapsed"] .sidebar-brand-mark {
        display: none;
    }

    body[data-sidebar="collapsed"] .nav-item,
    body[data-sidebar="collapsed"] .sidebar .account-trigger,
    body[data-sidebar="collapsed"] .sidebar .proj-switcher-trigger {
        justify-content: flex-start;
        gap: 12px;
    }

    .sidebar-collapse {
        display: none;
    }

    .drawer-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 110;
        background: rgba(13, 13, 17, 0.5);
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
    }

    .drawer-backdrop[hidden] {
        display: none;
    }
}

/* --- Mobile-Burger (öffnet den Off-Canvas-Drawer) --- */
.shell-burger {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 0;
    width: 36px;
    height: 36px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--sidebar-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    position: relative;
}

.shell-burger span {
    position: absolute;
    left: 8px;
    right: 8px;
    height: 2px;
    background: var(--sidebar-text-strong);
    border-radius: 2px;
    transition: transform 0.2s var(--ease-standard), opacity 0.15s ease;
}

.shell-burger span:nth-child(1) {
    top: 12px;
}

.shell-burger span:nth-child(2) {
    top: 17px;
}

.shell-burger span:nth-child(3) {
    top: 22px;
}

body[data-drawer="open"] .shell-burger span:nth-child(1) {
    transform: translateY(5px) rotate(45deg);
}

body[data-drawer="open"] .shell-burger span:nth-child(2) {
    opacity: 0;
}

body[data-drawer="open"] .shell-burger span:nth-child(3) {
    transform: translateY(-5px) rotate(-45deg);
}

/* --- A11y: sichtbarer Fokus-Ring an Shell-Bedienelementen (--focus-ring) --- */
.nav-item:focus-visible,
.sidebar-collapse:focus-visible,
.sidebar .proj-switcher-trigger:focus-visible,
.sidebar .account-trigger:focus-visible,
.sidebar-cmdk:focus-visible,
.shell-burger:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

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

    .sidebar,
    .sidebar-collapse-icon,
    .shell-burger span {
        transition: none;
    }

    /* Drawer ohne Slide einblenden statt von links fahren. */
    body[data-drawer="open"] .sidebar {
        transition: none;
    }
}

/* ============================================================
   BRAND-WORDMARK — Auth-Seiten + Generator-Hero teilen die Marke
   ============================================================ */

.brand-wordmark {
    font-family: var(--font-family-display);
    font-size: 22px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--brand-primary);
    transition: opacity var(--transition);
}

.brand-dot {
    color: var(--brand-accent);
}

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    font-size: 12px;
    font-weight: 600;
    color: var(--brand-navy-deep);
    transition: all var(--transition);
}

.status-badge .status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--success);
    animation: pulseDot 1.2s steps(1, end) infinite;
}

.status-badge.warn .status-dot {
    background: var(--warning);
    animation: none;
}

.status-badge.warn {
    color: var(--warning);
    border-color: var(--warning);
    background: var(--warning-soft);
}

.status-badge.error .status-dot {
    background: var(--error);
    animation: none;
}

.status-badge.error {
    color: var(--error);
    border-color: var(--error);
    background: var(--error-soft);
}

@keyframes pulseDot {

    0%,
    49% {
        opacity: 1;
    }

    50%,
    100% {
        opacity: 0.35;
    }
}

/* ============================================================
   STATUS-DOTS & -INDICATOR (Console-Graft — sichtbarer Werkzeug-Zustand)
   Wiederverwendbar: Studio-Header (bereit/läuft), Galerie-/Kosten-Meta.
   Eigenständige Komponente — `.status-badge .status-dot` bleibt davon
   unberührt (höhere Spezifität überschreibt im Badge-Scope).
   ============================================================ */
.status-dot {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: var(--radius-pill);
    background: var(--status-idle);
}

.status-dot--ok {
    background: var(--status-ok);
}

.status-dot--idle {
    background: var(--status-idle);
}

.status-dot--run {
    background: var(--status-run);
    animation: statusPulse 1.4s var(--ease-standard) infinite;
}

@keyframes statusPulse {
    0% {
        box-shadow: 0 0 0 0 var(--status-run-soft);
    }

    70% {
        box-shadow: 0 0 0 5px transparent;
    }

    100% {
        box-shadow: 0 0 0 0 transparent;
    }
}

.status-indicator {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 4px 11px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    font-family: var(--font-family-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-secondary);
    white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
    .status-dot--run {
        animation: none;
    }
}

/* ============================================================
   PAGE / SECTIONS
   ============================================================ */

.page {
    max-width: var(--content-max);
    margin: 0 auto;
    padding: 0 32px;
    position: relative;
    z-index: 1;
}

.section-head {
    margin-bottom: 24px;
}

.section-title {
    font-size: 26px;
    font-weight: 800;
    color: var(--brand-primary);
    letter-spacing: 0;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.section-sub {
    font-size: 14px;
    color: var(--text-secondary);
}

/* ============================================================
   PAGE HEADER (Sub-Pages: Galerie, Produkte, Kosten, Trainingslabor)
   Free-standing Comic-H1 ohne Card-Wrapper, im .page-Container.
   ============================================================ */

.page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    padding: 32px 0 20px;
}

.page-title {
    margin: 0;
    font-size: clamp(32px, 4vw, 44px);
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--brand-primary);
}

.page-title-count {
    margin-left: 6px;
    font-family: var(--font-family-mono);
    font-weight: 700;
    color: var(--brand-primary);
    font-variant-numeric: tabular-nums;
}

/* ============================================================
   PAGE TOOLBAR (Filter / Settings auf Sub-Pages)
   ============================================================ */

.page-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    margin-bottom: 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--elevation-1);
}

.page-toolbar-search {
    flex: 1 1 280px;
    min-width: 220px;
}

.page-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    min-width: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--brand-navy-deep) transparent;
    padding-bottom: 2px;
}

.page-toolbar-actions::-webkit-scrollbar {
    height: 4px;
}

.page-toolbar-actions::-webkit-scrollbar-track {
    background: transparent;
}

.page-toolbar-actions::-webkit-scrollbar-thumb {
    background: var(--brand-navy-deep);
    border-radius: var(--radius-pill);
}

.page-toolbar-actions>* {
    flex: 0 0 auto;
}

.page-toolbar input[type="search"],
.page-toolbar input[type="date"],
.page-toolbar select {
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 6px 10px;
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    outline: none;
    transition: all var(--transition);
}

.page-toolbar input[type="search"] {
    width: 100%;
}

.page-toolbar input[type="search"]:focus,
.page-toolbar input[type="date"]:focus,
.page-toolbar select:focus {
    border-color: var(--brand-primary);
}

/* Custom Select Chevron (kein nativer System-Pfeil mehr).
   stroke='%23001b3f' = URL-encoded var(--brand-navy-deep). */
.page-toolbar select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23001b3f' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='1,1 6,6 11,1'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 10px 6px;
    padding-right: 28px;
    cursor: pointer;
}

.page-toolbar select::-ms-expand {
    display: none;
}

/* Produkt-Filter: lange Produktnamen würden den Select beliebig breit
   ziehen und die Toolbar in die zweite Zeile drücken. Harte Obergrenze +
   Ellipsis hält die Leiste einzeilig; im geöffneten Dropdown zeigt der
   Browser den vollen Optionstext per Tooltip/Auto-Width. */
.page-toolbar select#filterProduct {
    max-width: 220px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.page-toolbar-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    color: var(--brand-navy-deep);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0 4px;
}

/* ============================================================
   SEGMENTED CONTROL (z.B. Aggregation Tag/Woche/Monat)
   ============================================================ */

.toolbar-segmented {
    display: inline-flex;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--surface);
    box-shadow: var(--elevation-1);
    transition: transform var(--transition), box-shadow var(--transition);
}

.toolbar-segmented:hover {
    box-shadow: var(--elevation-2);
    transform: translateY(-1px);
}

.toolbar-segmented-btn {
    appearance: none;
    background: transparent;
    border: 0;
    border-left: 1px solid var(--border);
    padding: 6px 14px;
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 700;
    font-family: inherit;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
}

.toolbar-segmented-btn:first-child {
    border-left: 0;
}

.toolbar-segmented-btn:hover:not([aria-pressed="true"]) {
    background: var(--surface-blue-soft);
}

.toolbar-segmented-btn[aria-pressed="true"] {
    background: var(--gradient-brand);
    color: var(--text-on-primary);
}

.toolbar-segmented-btn[aria-pressed="true"]:hover {
    filter: brightness(1.06);
}

.toolbar-segmented-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.toolbar-segmented-btn:disabled:hover {
    background: transparent;
}

/* Tablet (iPad Portrait/Mini) + Mobile: Actions-Gruppe nimmt volle Breite,
   margin-left:auto wird zurückgesetzt damit der horizontale Scroll-Container
   nicht in einem Inline-Flex-Slot stranguliert wird. */
@media (max-width: 900px) {
    .page-toolbar-actions {
        margin-left: 0;
        width: 100%;
    }
}

@media (max-width: 640px) {
    .page-header {
        flex-direction: column;
        align-items: stretch;
        padding: 24px 0 16px;
    }

    .page-toolbar {
        gap: 8px;
        padding: 10px;
    }

    .page-toolbar-search {
        flex: 1 1 100%;
    }

    /* Kosten-Toolbar (VON-Datum, BIS-Datum, Tag/Woche/Monat-Pille):
       jedes Filter-Element nimmt eine eigene Zeile in voller Breite,
       VON/BIS-Labels bekommen identische Mindestbreite (`min-width`
       über `flex-basis` am Span), damit beide Date-Inputs an exakt
       derselben X-Position starten — harmonischer als die intrinsische
       Label-Breite, bei der „VON" und „BIS" nicht bündig sitzen. */
    .page-toolbar-label {
        flex: 1 1 100%;
        gap: 10px;
        padding: 0;
    }

    .page-toolbar-label>span {
        flex: 0 0 36px;
    }

    .page-toolbar input[type="date"] {
        flex: 1 1 auto;
        min-width: 0;
    }

    /* Tag/Woche/Monat-Pille: volle Breite, drei Tabs gleichmäßig verteilt
       (vorher inline-flex → Pille klebte links mit ungenutztem Whitespace
       rechts daneben). Horizontaler Scroll wäre für 3 fixe Buttons
       Overkill — Stretch + flex:1 reicht. */
    .toolbar-segmented {
        display: flex;
        width: 100%;
    }

    .toolbar-segmented-btn {
        flex: 1 1 0;
        text-align: center;
    }
}

/* ============================================================
   PILL BADGE (Hero-Trigger, Status-Marker)
   ============================================================ */

.pill-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    background: var(--surface);
    color: var(--brand-navy-deep);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.pill-badge-trigger {
    font-family: var(--font-family-mono);
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

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

/* ============================================================
   GENERATOR
   ============================================================ */

/* ============================================================
   STUDIO-WERKBANK (M3) — zweispaltig: links scrollbare
   Control-Column mit sticky Generieren-CTA, rechts die
   Output-/Vorschau-Bühne. Füllt die Shell-Content-Höhe;
   nur die linke Spalte scrollt intern.
   ============================================================ */
.studio {
    max-width: var(--content-max);
    margin: 0 auto;
    padding: 0 32px;
}

.studio-workbench {
    display: grid;
    grid-template-columns: minmax(340px, 440px) 1fr;
    gap: 24px;
    height: calc(100vh - 2 * var(--shell-gutter));
    min-height: 520px;
}

.studio-controls {
    display: grid;
    grid-template-rows: 1fr auto;
    min-height: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--elevation-2);
    overflow: hidden;
}

.studio-controls-scroll {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 24px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* Sticky Generieren-CTA am Fuß der Control-Column (auto-Row,
   scrollt nie mit) — CTA stretcht, Kbd-Hint rechts daneben. */
.studio-cta-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 24px;
    background: var(--surface);
    border-top: 1px solid var(--border);
}

.studio-cta-bar .generate-wrap {
    flex: 1 1 auto;
}

.studio-cta-bar .btn-generate {
    width: 100%;
    justify-content: center;
    padding: 13px 18px;
}

.cta-kbd {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    padding: 6px 9px;
    background: var(--surface-paper);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-family: var(--font-family-mono);
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
}

/* ============================================================
   STEPPER (geführter Flow M1) — Step-Indikator, progressive
   Step-Sektionen und kontextuelle „Weiter"-Nav. Rein token-basiert.
   Reveal läuft über das `hidden`-Attribut (globales [hidden] greift).
   ============================================================ */
.studio-steps {
    display: flex;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.studio-step-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 0;
    min-width: 0;
    padding: 8px 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    transition: border-color var(--transition), background var(--transition);
}

.studio-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    background: var(--surface-paper);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    color: var(--text-muted);
    font-family: var(--font-family-mono);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}

.studio-step-name {
    min-width: 0;
    overflow: hidden;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.studio-step-indicator[data-state="active"] {
    border-color: var(--brand-accent);
}

.studio-step-indicator[data-state="active"] .studio-step-num {
    background: var(--brand-accent);
    border-color: var(--brand-accent);
    color: var(--text-on-primary);
}

.studio-step-indicator[data-state="active"] .studio-step-name {
    color: var(--text-primary);
}

/* „done": abgeschlossener Schritt — ruhiger Soft-Chip, dessen Ziffer durch
   einen Akzent-Haken ersetzt wird (klar von „upcoming" unterscheidbar, ohne
   die laute Voll-Akzent-Fläche des aktiven Schritts). Reine Tokens, kein Hex. */
.studio-step-indicator[data-state="done"] .studio-step-num {
    position: relative;
    background: var(--surface-blue-soft);
    border-color: var(--surface-blue-soft);
    color: transparent;
}

.studio-step-indicator[data-state="done"] .studio-step-num::after {
    content: "✓";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand-accent);
    font-size: 13px;
    font-weight: 700;
}

.studio-step-indicator[data-state="done"] .studio-step-name {
    color: var(--text-secondary);
}

/* Step-Sektion — eigener Spalten-Stack, Reveal via `hidden`-Attribut. */
.studio-step {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Die DOM-Reihenfolge der Step-Sektionen ist NICHT 1·2·3·4: M2 hob Modus + Produkt
   in Schritt 1 und verschob die Einstellungen in Schritt 4, ohne die physischen
   Blöcke umzustellen (Markup steht als 1·4·2·3 im DOM). Da `.studio-controls-scroll`
   eine Flex-Spalte ist, sortiert `order` die Sektionen wieder in die fachliche Folge —
   sonst erschiene „Einstellungen" bei vollem Reveal vor „Stichworte" und „Review".
   Header + Indikator (order 0) bleiben oben; die CTA-Bar liegt außerhalb des Scrollers. */
.studio-step[data-studio-step="1"] { order: 1; }
.studio-step[data-studio-step="2"] { order: 2; }
.studio-step[data-studio-step="3"] { order: 3; }
.studio-step[data-studio-step="4"] { order: 4; }

/* Kontextuelle „Weiter"-Nav in der CTA-Bar — `.btn-secondary` (CTA-Disziplin:
   der glühende Primär-CTA bleibt allein dem Generieren-Button vorbehalten). */
.studio-step-nav {
    flex: 1 1 auto;
    display: flex;
}

.studio-step-nav .studio-step-next {
    width: 100%;
    justify-content: center;
}

.studio-stage {
    display: grid;
    place-items: center;
    min-height: 0;
    padding: 32px;
    background: var(--surface-paper);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--elevation-1);
    overflow: auto;
}

.studio-stage-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    max-width: 360px;
    color: var(--text-muted);
}

.studio-stage-icon {
    display: inline-flex;
    margin-bottom: 8px;
    color: var(--text-muted);
    opacity: 0.7;
}

.studio-stage-title {
    margin: 0;
    font-family: var(--font-family-display);
    font-size: 20px;
    font-weight: 600;
    color: var(--text-secondary);
}

.studio-stage-hint {
    margin: 0;
    font-size: 14px;
    line-height: 1.45;
    color: var(--text-muted);
}

/* Ergebnis-Canvas in der Bühne — gespiegelt aus dem Generierungs-Status-Modal,
   bleibt als persistente Vorschau stehen, nachdem das Modal geschlossen wurde. */
.studio-stage-result {
    display: grid;
    gap: 18px;
    width: 100%;
    place-items: center;
}

.studio-stage-result[hidden] {
    display: none;
}

.studio-stage-result[data-count="2"],
.studio-stage-result[data-count="3"],
.studio-stage-result[data-count="4"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    place-items: stretch;
}

.stage-result-item {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    min-width: 0;
}

.stage-result-img {
    width: 100%;
    max-height: calc(100vh - 220px);
    object-fit: contain;
    border-radius: var(--radius-md);
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--elevation-2);
}

.studio-stage-result[data-count="2"] .stage-result-img,
.studio-stage-result[data-count="3"] .stage-result-img,
.studio-stage-result[data-count="4"] .stage-result-img {
    max-height: calc((100vh - 260px) / 2);
}

.stage-result-actions {
    display: flex;
    justify-content: center;
    gap: 8px;
}

/* Studio-Werkbank stapelt unter 1024px: Controls oben, Bühne darunter —
   feste Viewport-Höhe wird aufgehoben, beide Spalten wachsen mit dem Inhalt. */
@media (max-width: 1024px) {
    .studio-workbench {
        grid-template-columns: 1fr;
        height: auto;
        min-height: 0;
        gap: 18px;
    }

    .studio-controls {
        grid-template-rows: auto auto;
    }

    .studio-controls-scroll {
        overflow-y: visible;
    }

    .studio-stage {
        min-height: 60vh;
    }
}

@media (max-width: 640px) {
    .studio {
        padding: 0 16px;
    }

    .studio-controls-scroll {
        padding: 18px;
    }

    .studio-cta-bar {
        padding: 14px 18px;
    }
}

.generator-section {
    position: relative;
    z-index: 2;
    padding: 56px 0 64px;
}

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 28px;
    box-shadow: var(--elevation-2);
}

/* Hero-Block als kompakter Kopf der Control-Column: Wordmark links,
   Help-Trigger oben rechts, Bottom-Border trennt von den Controls. */
.generator-hero {
    position: relative;
    display: flex;
    flex-direction: column;
    padding-bottom: 18px;
    margin: 0 0 4px;
    border-bottom: 1px solid var(--border);
}

.generator-hero-text {
    max-width: 640px;
}

/* Status-Pill (bereit/läuft) unter der Wordmark — stapelt links, kollidiert
   nicht mit dem absolut positionierten Help-Trigger oben rechts. */
.generator-hero .status-indicator {
    align-self: flex-start;
    margin-top: 10px;
}

.generator-hero-title {
    font-family: var(--font-family-display);
    font-size: 26px;
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -0.01em;
    color: var(--brand-primary);
    animation: fadeInUp 0.4s ease 80ms backwards;
}

.generator-hero-sub {
    font-size: 17px;
    font-weight: 500;
    line-height: 1.35;
    color: var(--text-secondary);
    margin: 0;
    animation: fadeInUp 0.4s ease 200ms backwards;
}

/* Help-Trigger — kantiger Glas-Button oben rechts in der Generator-Card */
.control-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.control-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    flex-wrap: wrap;
}

.control-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--brand-navy-deep);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    min-width: 64px;
}

/* Mode — Segmented Control (zwei gleiche Buttons in einer Pille). Press-Effekt
   liegt auf dem Outer-Container, da die einzelnen Segmente keine eigene Border
   haben — Hover auf irgendeinem Segment lässt das ganze Pill „eindrücken". */
.mode-segmented {
    display: inline-flex;
    flex: 1 1 auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--elevation-2);
    min-width: 0;
    transition: transform var(--transition), box-shadow var(--transition);
}

.mode-segmented:hover {
    box-shadow: var(--elevation-2);
    transform: translateY(-1px);
}

.mode-segment {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex: 1 1 0;
    padding: 9px 14px;
    background: transparent;
    border: 0;
    color: var(--brand-navy-deep);
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
    white-space: nowrap;
}

.mode-segment:first-child {
    border-top-left-radius: calc(var(--radius-md) - 3px);
    border-bottom-left-radius: calc(var(--radius-md) - 3px);
}

.mode-segment:last-child {
    border-top-right-radius: calc(var(--radius-md) - 3px);
    border-bottom-right-radius: calc(var(--radius-md) - 3px);
}

.mode-segment+.mode-segment {
    border-left: 1px solid var(--border);
}

.mode-segment:hover:not(.active) {
    background: var(--surface-blue-soft);
}

.mode-segment.active {
    background: var(--gradient-brand);
    color: var(--text-on-primary);
    box-shadow: var(--elevation-1), var(--glow-brand-soft);
}

.mode-segment:focus-visible {
    outline: 2px solid var(--brand-primary);
    outline-offset: -4px;
}

/* Comic-Tooltip am ganzen Mode-Segment (Hover/Focus auf dem Button selbst) */
.mode-tooltip {
    position: absolute;
    bottom: calc(100% + 32px);
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    max-width: 320px;
    padding: 12px 16px;
    background: var(--surface);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--elevation-2);
    font-family: var(--font-family-base);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    text-align: center;
    text-transform: none;
    letter-spacing: 0;
    white-space: normal;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition), visibility var(--transition);
    z-index: 60;
}

.mode-tooltip strong {
    color: var(--brand-navy-deep);
    font-weight: 700;
}

.mode-tooltip code {
    background: var(--surface-blue-soft);
    color: var(--brand-navy-deep);
    border: 1.5px solid var(--brand-navy-deep);
    border-radius: var(--radius-sm);
    font-family: var(--font-family-mono);
    font-size: 0.92em;
    font-weight: 700;
    padding: 0 5px;
}

.mode-tooltip::before {
    content: "";
    position: absolute;
    bottom: -7px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 14px;
    height: 14px;
    background: var(--surface);
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.mode-segment:hover .mode-tooltip,
.mode-segment:focus-visible .mode-tooltip {
    opacity: 1;
    visibility: visible;
}

@media (prefers-reduced-motion: reduce) {
    .mode-tooltip {
        transition: none;
    }
}

/* Stack-Label oberhalb der Controls */
.control-label-inline {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    flex-shrink: 0;
}

.control-row-cell {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    flex-wrap: wrap;
}

.control-row-cell:first-child {
    flex: 0 0 auto;
    min-width: 0;
}

/* `.control-row-cell` setzt `display: flex` und würde damit den
   Default `[hidden] { display: none }` überschreiben — explizit zurückholen,
   sonst flackert eine ausgeblendete Zelle als leere Lücke in der Row. */
.control-row-cell[hidden] {
    display: none;
}

/* „Produkte suchen": Default weiß, Hover hellblau, bei ausgewähltem Produkt
   Primary-Blue mit weißem Text. Doppelselektor (`.btn-secondary.btn-alle-produkte`)
   schlägt die später im Stylesheet definierten `.btn-secondary`-Defaults. */
.btn-secondary.btn-alle-produkte {
    background: var(--surface);
    max-width: 280px;
}

.btn-secondary.btn-alle-produkte:hover {
    background: var(--surface-blue-soft);
}

.btn-secondary.btn-alle-produkte[data-has-selection="true"] {
    background: var(--gradient-brand);
    color: var(--text-on-primary);
    border-color: rgba(255, 255, 255, 0.18);
    box-shadow: var(--elevation-1), var(--glow-brand-soft);
}

.btn-secondary.btn-alle-produkte[data-has-selection="true"]:hover {
    background: var(--gradient-brand);
    color: var(--text-on-primary);
    filter: brightness(1.06);
    box-shadow: var(--elevation-2), var(--glow-brand);
    transform: translateY(-1px);
}

/* Label im Button kann bei selektiertem Produkt lang werden — kein Umbruch,
   stattdessen Ellipsis. */
.btn-alle-produkte-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* Icon-Switch: Lupe wenn nichts ausgewählt, Link-Icon wenn ein Produkt aktiv. */
.btn-alle-produkte[data-has-selection="true"] .btn-alle-produkte-icon-search {
    display: none;
}

.btn-alle-produkte[data-has-selection="true"] .btn-alle-produkte-icon-link {
    display: inline;
}

/* Format Buttons */
.format-buttons {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.format-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 7px 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--elevation-1);
    cursor: pointer;
    font-family: inherit;
    transition: transform var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition), filter var(--transition);
}

.format-btn:hover {
    background: var(--surface-blue-soft);
    box-shadow: var(--elevation-2);
    transform: translateY(-1px);
}

.format-btn.active {
    background: var(--gradient-brand);
    border-color: rgba(255, 255, 255, 0.18);
    box-shadow: var(--elevation-1), var(--glow-brand-soft);
}

.format-btn.active:hover {
    background: var(--gradient-brand);
    filter: brightness(1.06);
    box-shadow: var(--elevation-2), var(--glow-brand);
    transform: translateY(-1px);
}

.format-preview {
    display: inline-block;
    background: var(--brand-navy-deep);
    border-radius: 0;
}

.format-btn.active .format-preview {
    background: var(--text-on-primary);
}

.format-preview[data-shape="1-1"] {
    width: 18px;
    height: 18px;
}

.format-preview[data-shape="9-16"] {
    width: 14px;
    height: 24px;
}

.format-preview[data-shape="4-5"] {
    width: 18px;
    height: 22px;
}

.format-preview[data-shape="16-9"] {
    width: 26px;
    height: 14px;
}

.format-label {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--brand-navy-deep);
}

.format-btn.active .format-label {
    color: var(--text-on-primary);
}

/* Pill-Toggle (Logo) */
.pill-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--elevation-2);
    transition: transform var(--transition), box-shadow var(--transition);
}

.pill-toggle:hover {
    box-shadow: var(--elevation-2);
    transform: translateY(-1px);
}

.pill {
    border: none;
    background: transparent;
    padding: 6px 16px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--brand-navy-deep);
    cursor: pointer;
    border-radius: var(--radius-sm);
    font-family: inherit;
    transition: background var(--transition), color var(--transition), filter var(--transition);
}

.pill:hover:not(.active) {
    background: var(--surface-blue-soft);
}

.pill.active {
    background: var(--gradient-brand);
    color: var(--text-on-primary);
    box-shadow: var(--elevation-1), var(--glow-brand-soft);
}

.pill.active:hover {
    filter: brightness(1.06);
}

/* Produkt-Card (gerendert im Picker-Modal — Auswahl per Pending-State).
   Flach im Ruhezustand, Hover hebt sich subtil ab (Elevation-Lift,
   Hellblau-Tint). Selektierte Card markiert mit `--brand-primary`-Border
   und `--elevation-2`. */
.product-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 8px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    cursor: pointer;
    font-family: inherit;
    transition: background var(--transition), box-shadow var(--transition), transform var(--transition);
}

.product-card:hover {
    background: var(--surface-blue-soft);
    box-shadow: var(--elevation-2);
    transform: translate(-1px, -1px);
}

.product-card:focus-visible {
    outline: 2px solid var(--brand-primary);
    outline-offset: 2px;
}

.product-card[aria-selected="true"] {
    background: var(--brand-primary);
    box-shadow: var(--elevation-2);
}

.product-card[aria-selected="true"]:hover {
    background: var(--brand-primary);
    box-shadow: var(--elevation-2);
    transform: translate(-1px, -1px);
}

.product-card-thumb {
    width: 100%;
    aspect-ratio: 1 / 1;
    background: var(--surface);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.product-card-thumb img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
}

.product-card-name {
    font-size: 10px;
    font-weight: 500;
    color: var(--brand-navy-deep);
    line-height: 1.2;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 26px;
}

.product-card[aria-selected="true"] .product-card-name {
    color: var(--text-on-primary);
}

.product-card {
    position: relative;
}

/* Refs-Row (nur in `isolated`/`scene`): Inline-Grid aus Bild-Chips, die
   per Klick als Ref-Bild für die Generation an/ab geschaltet werden. */
.refs-area {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.refs-header {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}

.refs-counter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 22px;
    padding: 0 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--surface-blue-soft);
    color: var(--brand-navy-deep);
    font-family: var(--font-family-mono);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.refs-counter[data-full="true"] {
    background: var(--warning-soft, var(--surface-blue-soft));
    border-color: var(--warning, var(--brand-navy-deep));
    color: var(--warning, var(--brand-navy-deep));
}

.refs-hint {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.4;
}

.refs-loading {
    font-size: 12px;
    color: var(--text-muted);
    margin: 0;
}

.refs-empty {
    margin: 0;
}

.ref-chips-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 80px));
    gap: 10px;
}

.ref-chip {
    position: relative;
    width: 80px;
    height: 80px;
    padding: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    cursor: pointer;
    overflow: hidden;
    box-shadow: var(--elevation-0, none);
    opacity: 0.5;
    transition: transform var(--transition), box-shadow var(--transition), opacity var(--transition), border-color var(--transition);
}

.ref-chip:hover {
    transform: translateY(-2px);
    box-shadow: var(--elevation-1);
    opacity: 1;
}

.ref-chip:focus-visible {
    outline: 2px solid var(--brand-primary);
    outline-offset: 2px;
}

.ref-chip[aria-pressed="true"] {
    opacity: 1;
    border-color: var(--brand-navy-deep);
    box-shadow: var(--elevation-2);
}

.ref-chip-thumb {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    background: var(--surface-alt);
}

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

.ref-chip-tag {
    position: absolute;
    bottom: 4px;
    left: 4px;
    padding: 1px 6px;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.92);
    color: var(--brand-navy-deep);
    border: 1px solid var(--border);
}

.ref-chip-tag-application {
    background: var(--surface-blue-soft);
}

.ref-chip-tag-mood {
    background: var(--accent-yellow, var(--surface-blue-soft));
}

/* Prompt-Area — Chat-Shell mit integriertem Action-Row */
.prompt-area {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    transition: box-shadow var(--transition);
    overflow: hidden;
}

.prompt-area:focus-within {
    box-shadow: var(--elevation-1);
}

.prompt-input {
    width: 100%;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 18px 20px 8px;
    color: var(--text-primary);
    font-size: 17px;
    font-weight: 600;
    line-height: 1.45;
    font-family: inherit;
    resize: none;
    min-height: 96px;
    max-height: 320px;
    outline: none;
    overflow-y: auto;
}

.prompt-input::placeholder {
    color: var(--text-muted);
    font-weight: 500;
}

.prompt-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 8px 10px 10px 14px;
}

/* Mono-Zeichenzähler links in der Prompt-Action-Row (M3.4). `margin-right: auto`
   pinnt ihn links und schiebt Chip + Library-Trigger nach rechts. */
.prompt-counter {
    margin-right: auto;
    flex: 0 0 auto;
    font-family: var(--font-family-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--text-muted);
    white-space: nowrap;
}

/* Selected-Product-Chip in der Prompt-Action-Row (nur Composite-Modus mit
   ausgewähltem Produkt). Sitzt im rechten Cluster neben den Library-Triggern;
   der Mono-Zähler übernimmt das Links-Pinnen. Der Thumbnail-Button blendet im
   Hover ein dunkles Overlay mit „X" ein und entfernt beim Klick die Auswahl. */
.prompt-product-chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    max-width: 50%;
}

.prompt-product-chip[hidden] {
    display: none;
}

.prompt-product-chip-remove {
    position: relative;
    width: 42px;
    height: 42px;
    padding: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    box-shadow: var(--elevation-1);
    transition: transform var(--transition), box-shadow var(--transition);
}

.prompt-product-chip-remove:hover {
    box-shadow: var(--elevation-2);
    transform: translate(1px, 1px);
}

.prompt-product-chip-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 4px;
    box-sizing: border-box;
    display: block;
}

.prompt-product-chip-x {
    position: absolute;
    inset: 0;
    background: var(--backdrop-color);
    color: var(--text-on-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity var(--transition);
}

.prompt-product-chip-remove:hover .prompt-product-chip-x,
.prompt-product-chip-remove:focus-visible .prompt-product-chip-x {
    opacity: 1;
}

.prompt-product-chip-remove:focus-visible {
    outline: 2px solid var(--brand-primary);
    outline-offset: 2px;
}

.prompt-product-chip-name {
    font-size: 13px;
    font-weight: 800;
    color: var(--brand-navy-deep);
    letter-spacing: 0.02em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* Wrapper um den Generieren-CTA, damit der Tooltip einen Bezugspunkt hat
   (`position: relative`) und Hover/Focus auch dann greifen, wenn der Button
   selbst `disabled` ist und je nach Browser keine Pointer-Events feuert. */
.generate-wrap {
    position: relative;
    display: inline-flex;
}

/* Comic-Tooltip am Generieren-CTA (gleiche Sprache wie `.mode-tooltip`):
   oberhalb des Buttons verankert mit Pfeil nach unten. Sichtbar nur wenn
   das Wrapper-Element `data-needs-product="true"` trägt — JS setzt das
   parallel zu `btn.disabled` aus `updateGenerateAvailability()`. Oben
   verankert (statt unten), weil `.prompt-area` ein `overflow: hidden`
   trägt und alles unterhalb der Action-Row sonst abgeschnitten würde. */
.generate-tooltip {
    position: absolute;
    bottom: calc(100% + 14px);
    right: 0;
    width: max-content;
    max-width: 280px;
    padding: 10px 14px;
    background: var(--surface);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--elevation-2);
    font-family: var(--font-family-base);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.45;
    text-align: center;
    text-transform: none;
    letter-spacing: 0;
    white-space: normal;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition), visibility var(--transition);
    z-index: 60;
}

.generate-tooltip::before {
    content: "";
    position: absolute;
    bottom: -7px;
    right: 29px;
    transform: rotate(45deg);
    width: 14px;
    height: 14px;
    background: var(--surface);
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.generate-wrap[data-needs-product="true"]:hover .generate-tooltip,
.generate-wrap[data-needs-product="true"]:focus-within .generate-tooltip {
    opacity: 1;
    visibility: visible;
}

@media (prefers-reduced-motion: reduce) {
    .generate-tooltip {
        transition: none;
    }
}

.btn-generate {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--gradient-brand);
    color: var(--text-on-primary);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--radius-md);
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: var(--elevation-1), var(--glow-brand-soft);
    transition: transform var(--transition), box-shadow var(--transition), filter var(--transition);
    font-family: inherit;
    letter-spacing: 0.04em;
}

.btn-generate:hover:not(:disabled),
a.btn-generate:hover:not(:disabled) {
    color: var(--text-on-primary);
    filter: brightness(1.06);
    box-shadow: var(--elevation-2), var(--glow-brand);
    transform: translateY(-1px);
}

.btn-generate:active:not(:disabled) {
    filter: none;
    box-shadow: var(--elevation-1), var(--glow-brand-soft);
    transform: translateY(0);
}

.btn-generate:disabled {
    background: var(--text-muted);
    color: var(--surface);
    cursor: not-allowed;
    box-shadow: var(--elevation-1);
    opacity: 0.6;
}

.btn-generate .btn-icon {
    transition: transform var(--transition);
}

.btn-generate:hover:not(:disabled) .btn-icon {
    transform: translateX(2px);
}

/* Geschätzte Kosten direkt im CTA — schmales Mono-Pill rechts vom Label.
   Wird im Loading-State ausgeblendet, damit nur „LÄUFT…" sichtbar bleibt. */
.btn-generate-cost {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    margin-left: 2px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.92);
    font-family: var(--font-family-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0;
}

.btn-generate.is-loading .btn-generate-cost,
.btn-generate:disabled .btn-generate-cost {
    display: none;
}

/* Library-Trigger — Icon-only Glass-Button neben dem Generieren-CTA */
.library-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    background: var(--glass-surface-soft);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--brand-navy-deep);
    cursor: pointer;
    box-shadow: var(--elevation-1), var(--glass-border-inner);
    transition: transform var(--transition), box-shadow var(--transition), background var(--transition), border-color var(--transition);
}

.library-trigger-icon {
    color: var(--brand-navy-deep);
    transition: transform var(--transition);
}

.library-trigger:hover {
    background: var(--glass-surface-soft);
    border-color: var(--border-hover);
    box-shadow: var(--elevation-2), var(--glass-border-inner);
    transform: translateY(-1px);
}

.library-trigger:active {
    box-shadow: var(--elevation-1), var(--glass-border-inner);
    transform: translateY(0);
}

.library-trigger:focus-visible {
    outline: none;
    box-shadow: var(--elevation-2), var(--glass-border-inner);
}

/* Result */
.result {
    margin-top: 18px;
}

.result img {
    max-width: 100%;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    display: block;
    box-shadow: var(--elevation-2);
}

.result.isolated img {
    background: var(--surface-alt);
}

.result-actions {
    display: flex;
    gap: 12px;
    margin-top: 12px;
    justify-content: flex-end;
}

.btn-small {
    background: var(--glass-surface-soft);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 8px 16px;
    color: var(--brand-navy-deep);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    text-decoration: none;
    transition: transform var(--transition), box-shadow var(--transition), background var(--transition), border-color var(--transition);
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: var(--elevation-1), var(--glass-border-inner);
}

.btn-small:hover {
    background: var(--glass-surface-soft);
    border-color: var(--border-hover);
    box-shadow: var(--elevation-2), var(--glass-border-inner);
    transform: translateY(-1px);
}

.btn-secondary {
    background: var(--glass-surface-soft);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 8px 16px;
    color: var(--brand-navy-deep);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    text-decoration: none;
    transition: transform var(--transition), box-shadow var(--transition), background var(--transition), border-color var(--transition);
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: var(--elevation-1), var(--glass-border-inner);
}

.btn-secondary:hover,
a.btn-secondary:hover {
    background: var(--glass-surface-soft);
    border-color: var(--border-hover);
    color: var(--brand-navy-deep);
    box-shadow: var(--elevation-2), var(--glass-border-inner);
    transform: translateY(-1px);
}

.btn-secondary:disabled {
    cursor: not-allowed;
    box-shadow: var(--elevation-1), var(--glass-border-inner);
    transform: none;
    opacity: 0.6;
}

.btn-secondary:disabled:hover {
    background: var(--glass-surface-soft);
    border-color: var(--border);
    color: var(--brand-navy-deep);
}

.error {
    background: var(--error-soft);
    border: 2px solid var(--error);
    color: var(--error);
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    margin-top: 16px;
    font-size: 14px;
    font-weight: 600;
    box-shadow: var(--elevation-1);
}

.result-meta {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

.logo-badge {
    background: var(--surface-blue-soft);
    color: var(--brand-navy-deep);
    border: 1px solid var(--border);
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.03em;
}

.logo-badge-warn {
    background: var(--warning-soft);
    color: var(--warning);
    border-color: var(--warning);
}

.logo-badge-error {
    background: var(--error-soft);
    color: var(--error);
    border-color: var(--error);
}

.logo-warning {
    margin-top: 6px;
    font-size: 11px;
    color: var(--text-muted);
    font-style: italic;
}

/* ============================================================
   GALERIE
   ============================================================ */

.gallery-section {
    padding: 0 0 48px;
}

.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
}

.gallery-loadmore {
    display: flex;
    justify-content: center;
    margin: 24px 0 8px;
}

.gallery-loadmore[hidden] {
    display: none;
}

.gallery-item {
    --idx: 0;
    position: relative;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    box-shadow: var(--elevation-1);
    transition: box-shadow var(--transition), transform var(--transition);
    opacity: 0;
    animation: fadeInUp 0.3s ease forwards;
    animation-delay: calc(var(--idx) * 30ms);
}

.gallery-item:hover {
    box-shadow: var(--elevation-2);
    transform: translate(-2px, -2px);
}

.gallery-thumb {
    position: relative;
    cursor: zoom-in;
    display: block;
    background: var(--surface-alt);
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

.gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
    transition: transform 220ms ease-out;
}

.gallery-item:hover .gallery-thumb img {
    transform: scale(1.03);
}

.gallery-item.isolated .gallery-thumb {
    background: var(--surface-alt);
}

.gallery-item.isolated .gallery-thumb img {
    object-fit: contain;
    object-position: center;
}

/* Top-Strip: permanent sichtbar (Format-Badge links, Herz rechts) */
.gallery-card-corner {
    position: absolute;
    top: 8px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    pointer-events: auto;
}

.gallery-card-corner.left {
    left: 8px;
}

.gallery-card-corner.right {
    right: 8px;
}

.gallery-format-badge {
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid var(--border);
    color: var(--brand-navy-deep);
    font-size: 11px;
    font-weight: 800;
    padding: 3px 9px;
    border-radius: var(--radius-pill);
    letter-spacing: 0.04em;
    line-height: 1.2;
    box-shadow: var(--elevation-1);
    font-family: var(--font-family-mono);
}

.btn-favorite {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    color: var(--brand-navy-deep);
    cursor: pointer;
    padding: 0;
    box-shadow: var(--elevation-1);
    transition: var(--transition);
}

.btn-favorite svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    transition: fill var(--transition);
}

.btn-favorite:not([data-active="true"]):hover {
    background: var(--surface-blue-soft);
    transform: translateY(-1px);
    box-shadow: var(--elevation-2);
}

.btn-favorite[data-active="true"]:hover {
    transform: translateY(-1px);
    box-shadow: var(--elevation-2);
}

.btn-favorite[data-active="true"] {
    background: var(--error-soft);
    color: var(--error);
    border-color: var(--error);
}

.btn-favorite[data-active="true"] svg {
    fill: var(--error);
}

/* Permanenter Card-Footer: Prompt-Copy + Download + Delete (immer sichtbar) */
.gallery-card-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 8px 10px;
    background: var(--surface-blue-soft);
    border-top: 1px solid var(--border);
}

.btn-card-action {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--brand-navy-deep);
    cursor: pointer;
    padding: 0;
    text-decoration: none;
    box-shadow: var(--elevation-1);
    transition: var(--transition);
}

.btn-card-action svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

.btn-card-action:hover {
    background: var(--surface-blue-soft);
    transform: translateY(-1px);
    box-shadow: var(--elevation-2);
}

.btn-card-action.btn-card-action-danger {
    color: var(--error);
    border-color: var(--error);
}

.btn-card-action.btn-card-action-danger:hover {
    background: var(--error-soft);
}

/* Icon-Only-Toolbar-Button (Bilder-Modal: Auge / Refresh / Upload).
   Square-Glass-Button mit Tooltip ueber title; Tooltip-Text wechselt im
   Toggle-Fall. */
.btn-icon-toolbar {
    position: relative;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0;
    background: var(--glass-surface-soft);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    color: var(--brand-navy-deep);
    cursor: pointer;
    box-shadow: var(--elevation-1), var(--glass-border-inner);
    transition: transform var(--transition), box-shadow var(--transition), background var(--transition), border-color var(--transition);
}

.btn-icon-toolbar:hover {
    background: var(--glass-surface);
    border-color: var(--border-hover);
    box-shadow: var(--elevation-2), var(--glass-border-inner);
    transform: translateY(-1px);
}

.btn-icon-toolbar:focus-visible {
    outline: none;
    border-color: var(--brand-primary);
    box-shadow: var(--elevation-2), var(--glass-border-inner);
}

.btn-icon-toolbar:disabled {
    cursor: not-allowed;
    opacity: 0.6;
    transform: none;
}

.btn-icon-toolbar svg {
    width: 18px;
    height: 18px;
}

/* Eye-Toggle: aria-pressed steuert, welches Icon sichtbar ist
   (offen = "Gelöschte zeigen", geschlossen = "Gelöschte ausblenden"). */
.btn-icon-toolbar .icon-eye-closed {
    display: none;
}

.btn-icon-toolbar[aria-pressed="true"] .icon-eye-open {
    display: none;
}

.btn-icon-toolbar[aria-pressed="true"] .icon-eye-closed {
    display: inline-block;
}

.btn-icon-toolbar[aria-pressed="true"] {
    background: var(--gradient-brand);
    color: var(--text-on-primary);
    border-color: rgba(255, 255, 255, 0.18);
    box-shadow: var(--elevation-1), var(--glow-brand-soft);
}

.btn-icon-toolbar[aria-pressed="true"]:hover {
    filter: brightness(1.06);
    box-shadow: var(--elevation-2), var(--glow-brand);
}

/* Primary-Variante: Upload-Button als Brand-CTA, deutlich zur sekundaeren
   Aktion (Re-Scrape) abgegrenzt. */
.btn-icon-toolbar-primary {
    background: var(--gradient-brand);
    color: var(--text-on-primary);
    border-color: rgba(255, 255, 255, 0.18);
    box-shadow: var(--elevation-1), var(--glow-brand-soft);
}

.btn-icon-toolbar-primary:hover {
    filter: brightness(1.06);
    background: var(--gradient-brand);
    color: var(--text-on-primary);
    border-color: rgba(255, 255, 255, 0.24);
    box-shadow: var(--elevation-2), var(--glow-brand);
}

/* Spinner-Slot im Refresh-Button: beim Loading wird das Icon ueberlagert. */
.btn-icon-toolbar.is-loading svg {
    opacity: 0;
}

.btn-icon-toolbar .btn-spinner {
    position: absolute;
    inset: 0;
    margin: auto;
}

/* Favoriten-Filter-Toggle (Toolbar-konform: rechteckig, gleicher Radius wie Selects/Inputs) */
.btn-filter-fav {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--brand-navy-deep);
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    box-shadow: var(--elevation-1);
    transition: transform var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition);
    line-height: 1.2;
}

.btn-filter-fav svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

.btn-filter-fav:hover {
    background: var(--surface-blue-soft);
    box-shadow: var(--elevation-2);
    transform: translateY(-1px);
}

.btn-filter-fav[aria-pressed="true"] {
    background: var(--error-soft);
    color: var(--error);
    border-color: var(--error);
}

.btn-filter-fav[aria-pressed="true"] svg {
    fill: var(--error);
}

.btn-filter-fav-count {
    font-family: var(--font-family-mono);
    font-size: 11px;
    opacity: 0.85;
}

/* Trainings-Filter-Toggle — analog zum Favoriten-Filter, aber eigene Farbe */
.btn-filter-training {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--brand-navy-deep);
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    box-shadow: var(--elevation-1);
    transition: transform var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition);
    line-height: 1.2;
}

.btn-filter-training svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

.btn-filter-training:hover {
    background: var(--surface-blue-soft);
    box-shadow: var(--elevation-2);
    transform: translateY(-1px);
}

.btn-filter-training[aria-pressed="true"] {
    background: var(--success-soft);
    color: var(--success);
    border-color: var(--success);
}

.btn-filter-training[aria-pressed="true"] svg {
    fill: var(--success);
}

.btn-filter-training-count {
    font-family: var(--font-family-mono);
    font-size: 11px;
    opacity: 0.85;
}

/* Icon-only-Variante (kompakte Toolbar-Buttons ohne Label).
   Quadratisches Padding, Tooltip via title/aria-label trägt die Bedeutung. */
.btn-filter-icon {
    padding: 6px;
    gap: 4px;
}

.btn-filter-icon svg {
    width: 16px;
    height: 16px;
}

/* ============================================================
   SELECTION-MODE — Mehrfachauswahl + Bulk-Delete
   ============================================================ */

/* Toolbar-Toggle „Mehr auswählen" — analog zum Favoriten/Trainings-Filter,
   eigene Akzentfarbe (Primary-Blue) für aktiven Zustand. */
.btn-filter-select {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--brand-navy-deep);
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-family: inherit;
    cursor: pointer;
    box-shadow: var(--elevation-1);
    transition: transform var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition);
    line-height: 1.2;
}

.btn-filter-select svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

.btn-filter-select:hover {
    background: var(--surface-blue-soft);
    box-shadow: var(--elevation-2);
    transform: translateY(-1px);
}

.btn-filter-select[aria-pressed="true"] {
    background: var(--gradient-brand);
    color: var(--text-on-primary);
    border-color: rgba(255, 255, 255, 0.18);
    box-shadow: var(--elevation-1), var(--glow-brand-soft);
}

.btn-filter-select[aria-pressed="true"]:hover {
    filter: brightness(1.06);
    box-shadow: var(--elevation-2), var(--glow-brand);
    transform: translateY(-1px);
}

/* Checkbox links im Card-Footer — nur in Selection-Mode sichtbar.
   `margin-right: auto` schiebt sie nach links, die übrigen Footer-Aktionen
   (Copy/Download/Delete) bleiben rechts. */
.gallery-card-checkbox {
    display: none;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: transparent;
    border: 0;
    cursor: pointer;
    margin-right: auto;
}

.gallery-card-checkbox-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    box-shadow: var(--elevation-1);
    transition: var(--transition);
}

.gallery-card-checkbox-box svg {
    width: 18px;
    height: 18px;
    stroke: var(--text-on-primary);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    opacity: 0;
    transition: opacity var(--transition);
}

body.gallery-selection-mode .gallery-card-checkbox {
    display: inline-flex;
}

.gallery-card-checkbox[data-checked="true"] .gallery-card-checkbox-box {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
}

.gallery-card-checkbox[data-checked="true"] .gallery-card-checkbox-box svg {
    opacity: 1;
}

/* In Selection-Mode wird die ganze Thumb klickbar für Toggle. */
body.gallery-selection-mode .gallery-thumb {
    cursor: pointer;
}

body.gallery-selection-mode .gallery-item {
    cursor: pointer;
}

.gallery-item.is-selected {
    box-shadow: var(--elevation-2);
    outline: 3px solid var(--brand-primary);
    outline-offset: -3px;
}

.gallery-item.is-selected .gallery-thumb::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 102, 153, 0.18);
    pointer-events: none;
}

/* Re-Render nach Lösch-Aktion: Fade-In-Animation der Cards unterdrücken,
   damit die verbleibenden Bilder nicht erneut „aufpoppen". */
.gallery--no-anim .gallery-item {
    animation: none;
    opacity: 1;
}

/* Floating Action-Bar am unteren Bildschirmrand */
.selection-actionbar {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    z-index: 1100;
    display: inline-flex;
    align-items: center;
    gap: 16px;
    padding: 10px 14px 10px 18px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--elevation-3);
    max-width: calc(100vw - 32px);
}

.selection-actionbar[hidden] {
    display: none;
}

/* Reserviert Platz unten, damit die Action-Bar Galerie-Inhalte
   (z.B. „Mehr laden") nicht überdeckt. */
body.gallery-selection-mode {
    padding-bottom: 96px;
}

.selection-actionbar-count {
    font-family: var(--font-family-mono);
    font-size: 13px;
    font-weight: 700;
    color: var(--brand-navy-deep);
    white-space: nowrap;
}

.selection-actionbar-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

@media (max-width: 480px) {
    .selection-actionbar {
        bottom: 12px;
        padding: 8px 10px 8px 14px;
        gap: 10px;
    }

    .selection-actionbar-count {
        font-size: 12px;
    }
}

/* ============================================================
   TRAININGSLABOR
   ============================================================ */

.training-section {
    padding: 24px 0 32px;
}

.training-section+.training-section {
    padding-top: 8px;
}

.training-meta-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.training-card {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.spec-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.spec-tile {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 16px;
    background: var(--surface-blue-soft);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    box-shadow: var(--elevation-1);
    transition: all var(--transition);
}

.spec-tile:hover {
    box-shadow: var(--elevation-2);
    transform: translate(-2px, -2px);
}

.spec-label {
    font-size: 12px;
    color: var(--brand-navy-deep);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    font-weight: 700;
}

.spec-value {
    font-size: 22px;
    font-weight: 800;
    color: var(--brand-primary);
    font-family: var(--font-family-mono);
    letter-spacing: -0.01em;
}

.spec-hint {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.4;
}

.spec-divider {
    height: 2px;
    background: var(--brand-navy-deep);
}

.spec-meta {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.spec-meta-row {
    display: grid;
    grid-template-columns: 140px 1fr;
    align-items: center;
    gap: 12px;
}

.spec-meta-row .spec-label {
    text-transform: none;
    letter-spacing: 0;
    color: var(--text-secondary);
    font-weight: 600;
}

.spec-mono {
    font-family: var(--font-family-mono);
    font-size: 12.5px;
    color: var(--brand-navy-deep);
    background: var(--surface-blue-soft);
    border: 1.5px solid var(--brand-navy-deep);
    padding: 3px 9px;
    border-radius: var(--radius-sm);
    overflow-wrap: anywhere;
    font-weight: 600;
}

.spec-mono-truncate {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Pipeline-Cards (Info-Card-Pattern) */
.info-card {
    display: flex;
    gap: 12px;
    padding: 14px 18px;
    background: var(--surface-blue-soft);
    color: var(--brand-navy-deep);
    border: 1px solid var(--border);
    border-left-width: 5px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    line-height: 1.5;
}

.info-card .info-body {
    flex: 1;
}

.info-card .info-title {
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--brand-primary);
    margin: 0 0 4px;
}

.info-card .info-text {
    margin: 0;
    color: var(--text-secondary);
}

.pipeline-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.pipeline-step {
    align-items: flex-start;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left-width: 5px;
    box-shadow: var(--elevation-1);
    padding: 18px 20px;
    border-radius: var(--radius-sm);
}

.pipeline-step-number {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-pill);
    background: var(--brand-primary);
    color: var(--text-on-primary);
    border: 1px solid var(--border);
    font-weight: 800;
    font-size: 14px;
    font-family: var(--font-family-mono);
    box-shadow: var(--elevation-2);
}

/* Lock-Strings (ausklappbar) */
.lock-details {
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 14px 18px;
    box-shadow: var(--elevation-1);
}

.lock-details summary {
    cursor: pointer;
    font-weight: 700;
    color: var(--brand-navy-deep);
    list-style: none;
    padding: 4px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.lock-details summary::-webkit-details-marker {
    display: none;
}

.lock-details summary::before {
    content: "▸";
    color: var(--brand-navy-deep);
    transition: transform var(--transition);
}

.lock-details[open] summary::before {
    transform: rotate(90deg);
}

.lock-details summary:hover {
    color: var(--brand-primary-shade);
}

.lock-intro {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 14px 0 18px;
}

.lock-block+.lock-block {
    margin-top: 18px;
}

.lock-title {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--brand-primary);
    margin-bottom: 8px;
}

.lock-meta {
    font-weight: 500;
    color: var(--text-muted);
    font-size: 13px;
    text-transform: none;
    letter-spacing: 0;
}

.lock-code {
    background: var(--brand-navy-deep);
    color: #d6e4f0;
    border-radius: var(--radius-sm);
    padding: 14px 16px;
    overflow-x: auto;
    font-family: var(--font-family-mono);
    font-size: 12.5px;
    line-height: 1.6;
    border: 1px solid var(--border);
}

.lock-code code {
    background: transparent;
    color: inherit;
    padding: 0;
    font-size: inherit;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Lernprozess-Timeline */
.timeline-container {
    position: relative;
}

.timeline-empty {
    text-align: center;
    color: var(--text-muted);
    font-size: 14px;
    padding: 24px 0;
}

.timeline {
    list-style: none;
    margin: 0;
    padding: 8px 0;
    position: relative;
}

.timeline::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 3px;
    background: var(--brand-navy-deep);
    transform: translateX(-50%);
}

.timeline-item {
    position: relative;
    width: 50%;
    padding: 18px 40px 18px 0;
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 400ms var(--ease-standard), transform 400ms var(--ease-standard);
    box-sizing: border-box;
}

.timeline-item.is-revealed {
    opacity: 1;
    transform: translateY(0);
}

.timeline-item--left {
    margin-right: 50%;
    text-align: right;
}

.timeline-item--right {
    margin-left: 50%;
    padding: 18px 0 18px 40px;
    text-align: left;
}

.timeline-marker {
    position: absolute;
    top: 28px;
    width: 16px;
    height: 16px;
    border-radius: var(--radius-pill);
    background: var(--brand-primary);
    border: 1px solid var(--border);
    z-index: 1;
}

.timeline-item--left .timeline-marker {
    right: -8px;
}

.timeline-item--right .timeline-marker {
    left: -8px;
}

.timeline-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 18px;
    text-align: left;
}

.timeline-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.timeline-version {
    background: var(--brand-primary);
    color: var(--text-on-primary);
    letter-spacing: 0.06em;
    font-weight: 800;
}

.timeline-date {
    font-size: 12px;
    color: var(--text-muted);
    font-family: var(--font-family-mono);
}

.timeline-figure {
    margin: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--surface-blue-soft);
    aspect-ratio: 4 / 3;
}

.timeline-figure img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 300ms var(--ease-standard);
}

.timeline-item:hover .timeline-figure img {
    transform: scale(1.02);
}

.timeline-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.timeline-focus {
    font-size: 16px;
    font-weight: 700;
    color: var(--brand-navy-deep);
    line-height: 1.4;
}

.timeline-insight,
.timeline-change {
    font-size: 13.5px;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0;
}

.timeline-label {
    font-weight: 700;
    color: var(--brand-navy-deep);
    margin-right: 4px;
}

@media (prefers-reduced-motion: reduce) {
    .timeline-item {
        transition: none;
    }

    .timeline-item:hover .timeline-figure img {
        transform: none;
        transition: none;
    }
}

@media (max-width: 1024px) {
    .spec-grid {
        grid-template-columns: repeat(2, 1fr);
    }

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

@media (max-width: 768px) {
    .timeline::before {
        left: 18px;
    }

    .timeline-item,
    .timeline-item--left,
    .timeline-item--right {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        padding: 12px 0 12px 44px;
        text-align: left;
    }

    .timeline-item--left .timeline-marker,
    .timeline-item--right .timeline-marker {
        left: 11px;
        right: auto;
    }
}

@media (max-width: 600px) {
    .spec-grid {
        grid-template-columns: 1fr;
    }

    .spec-meta-row {
        grid-template-columns: 1fr;
        gap: 4px;
    }
}

/* ============================================================
   COMPARE-SLIDER (V1 ↔ V7)
   ============================================================ */

.compare-slider {
    --compare-pos: 50%;
    margin: 0 auto;
    max-width: 720px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.compare-stage {
    position: relative;
    width: 100%;
    aspect-ratio: 648 / 900;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--surface-blue-soft);
    box-shadow: var(--elevation-2);
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
}

.compare-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
    -webkit-user-drag: none;
}

.compare-image--top {
    clip-path: inset(0 50% 0 0);
    z-index: 2;
}

.compare-label {
    position: absolute;
    top: 12px;
    z-index: 4;
    padding: 4px 12px;
    border: 2px solid var(--surface);
    border-radius: var(--radius-pill);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: var(--text-on-primary);
    background: var(--brand-navy-deep);
    pointer-events: none;
    transition: opacity var(--transition);
}

.compare-label--left {
    left: 12px;
}

.compare-label--right {
    right: 12px;
}

.compare-handle {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--compare-pos);
    width: 44px;
    margin-left: -22px;
    z-index: 3;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: ew-resize;
    touch-action: none;
    color: var(--brand-primary);
}

.compare-handle:focus {
    outline: none;
}

.compare-handle:focus-visible .compare-handle-knob {
    border-color: var(--brand-primary);
    box-shadow: var(--elevation-2);
}

.compare-handle-line {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 3px;
    margin-left: -1.5px;
    background: var(--brand-navy-deep);
}

.compare-handle-knob {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--surface);
    color: var(--brand-navy-deep);
    border: 1px solid var(--border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--elevation-1);
    transition: transform var(--transition), box-shadow var(--transition);
}

.compare-handle:hover .compare-handle-knob,
.compare-handle:active .compare-handle-knob {
    box-shadow: var(--elevation-2);
    transform: translate(-50%, -50%) scale(1.05);
}

.compare-caption {
    font-size: 13px;
    color: var(--text-secondary);
    text-align: center;
    line-height: 1.5;
    padding: 0 8px;
}

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

    .compare-handle-knob,
    .compare-label {
        transition: none;
    }

    .compare-handle:hover .compare-handle-knob,
    .compare-handle:active .compare-handle-knob {
        transform: translate(-50%, -50%);
    }
}

@media (max-width: 600px) {
    .compare-label {
        font-size: 11px;
        padding: 3px 8px;
    }

    .compare-handle-knob {
        width: 36px;
        height: 36px;
    }
}

/* ============================================================
   COSTS PAGE — Glass-Morphism-Layer
   Alle Surface-Container (Toolbar, KPI-Tiles, Chart-Cards, Tabellen,
   Info-Cards) liegen auf demselben halbtransparenten Glas — Backdrop-Blur
   verschmilzt mit dem Body-Pattern.
   ============================================================ */

.costs-page {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.costs-section {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.costs-page .section-head {
    margin-bottom: 0;
}

/* Toolbar (Datum-Range + Aggregation) als Glas-Pille */
.costs-page .page-toolbar {
    background: var(--glass-surface-soft);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--elevation-1), var(--glass-border-inner);
    padding: 12px 16px;
    margin-bottom: 0;
}

.costs-page .page-toolbar input[type="date"] {
    background: var(--glass-surface);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-border-inner);
}

.costs-page .toolbar-segmented {
    background: var(--glass-surface);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    box-shadow: var(--elevation-1), var(--glass-border-inner);
}

.costs-kpi-grid {
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
}

/* KPI-Tiles als Glas-Cards mit Lift-Hover */
.costs-page .spec-tile {
    background: var(--glass-surface-soft);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--elevation-1), var(--glass-border-inner);
    padding: 18px 20px;
    gap: 6px;
}

.costs-page .spec-tile:hover {
    transform: translateY(-2px);
    box-shadow: var(--elevation-2), var(--glass-border-inner);
}

.costs-page .spec-value {
    font-size: 26px;
}

/* Chart- und Tabellen-Cards: Glas statt Solid-Surface */
.costs-page .card {
    background: var(--glass-surface-soft);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--elevation-2), var(--glass-border-inner);
    padding: 24px 28px;
}

/* Info-Card auf der Kosten-Page: Glas-Optik mit Brand-Akzent links */
.costs-page .info-card {
    background: var(--glass-surface-soft);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-left: 4px solid var(--brand-primary);
    border-radius: var(--radius-lg);
    box-shadow: var(--elevation-1), var(--glass-border-inner);
    padding: 16px 20px;
}

.costs-canvas-wrapper {
    position: relative;
    width: 100%;
    height: 320px;
    max-height: 320px;
}

.costs-canvas-wrapper canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
}

.costs-empty {
    margin: 12px 0 0;
    text-align: center;
    color: var(--text-muted);
    font-size: 14px;
}

.costs-table-card+.costs-table-card {
    margin-top: 0;
}

.costs-table-title {
    margin: 0 0 16px;
    font-size: 16px;
    font-weight: 800;
    color: var(--brand-primary);
    letter-spacing: 0;
    text-transform: uppercase;
}

.costs-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.costs-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    color: var(--text-primary);
    min-width: 480px;
}

.costs-table thead th {
    text-align: left;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--brand-navy-deep);
    padding: 12px 14px;
    border-bottom: 1px solid var(--glass-border);
    background: rgba(0, 102, 153, 0.06);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
}

.costs-table tbody td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    font-variant-numeric: tabular-nums;
}

.costs-table tbody tr:last-child td {
    border-bottom: 0;
}

.costs-table tbody tr:hover td {
    background: var(--surface-hover);
}

.costs-table .costs-num {
    text-align: right;
    font-family: var(--font-family-mono);
}

/* Perioden-/Datumsspalte: Datenzeichen → Mono (linksbündig, kein costs-num) */
.costs-table .costs-period {
    font-family: var(--font-family-mono);
}

.costs-table .costs-num-strong {
    font-weight: 800;
    color: var(--brand-primary);
}

.costs-table-empty {
    text-align: center;
    color: var(--text-muted);
    padding: 18px 12px;
}

.tag-cost {
    background: var(--glass-surface);
    color: var(--brand-primary);
    border-color: var(--brand-primary);
    font-variant-numeric: tabular-nums;
}

@media (max-width: 1024px) {
    .costs-kpi-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .costs-page {
        gap: 24px;
    }

    .costs-section {
        gap: 16px;
    }

    .costs-kpi-grid {
        grid-template-columns: 1fr;
    }

    .costs-canvas-wrapper {
        height: 260px;
        max-height: 260px;
    }

    .costs-page .card {
        padding: 18px 18px;
    }
}

/* ============================================================
   FOOTER
   ============================================================ */

.page-footer {
    border-top: 1px solid var(--border);
    padding: 24px 32px;
    margin-top: 32px;
    background: var(--surface-alt);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 13px;
    color: var(--text-muted);
}

.footer-claim {
    color: var(--brand-navy-deep);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* ============================================================
   TOAST (Comic-Snap-In)
   ============================================================ */

.toast-container {
    position: fixed;
    top: 24px;
    right: 24px;
    /* Muss über dem App-Modal-Layer (z-index: 10000) UND der PhotoSwipe-
       Lightbox (Default z-index: 100000) liegen — sonst schluckt deren
       Backdrop das Toast-Feedback. */
    z-index: 100001;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}

.iso-toast {
    pointer-events: auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left-width: 5px;
    border-radius: var(--radius-sm);
    box-shadow: var(--elevation-2);
    padding: 12px 18px;
    min-width: 240px;
    max-width: 360px;
    font-size: 14px;
    font-weight: 600;
    color: var(--brand-navy-deep);
    animation: toastIn 120ms var(--ease-standard);
}

.iso-toast.success {
    border-left-color: var(--success);
}

.iso-toast.error {
    border-left-color: var(--error);
}

.iso-toast.warn {
    border-left-color: var(--warning);
}

.iso-toast.fade-out {
    animation: toastOut 120ms var(--ease-standard) forwards;
}

@keyframes toastIn {
    from {
        opacity: 0;
        transform: translate(20px, 0);
    }

    to {
        opacity: 1;
        transform: translate(0, 0);
    }
}

@keyframes toastOut {
    to {
        opacity: 0;
        transform: translate(20px, 0);
    }
}

/* ============================================================
   LIGHTBOX-MODAL (PhotoSwipe — Comic-Modal-Look)
   ============================================================ */

/* Backdrop in Brand-Navy plus Weichzeichnung (gleiche Tokens wie das Generator-Modal).
   bgOpacity 0.78 in JS × Brand-Navy ergibt visuell rgba(0,27,63,0.78) — identisch zum
   Modal-Backdrop. Filter sitzt auf .pswp (transparent, keine JS-Opacity) — backdrop-filter
   wirkt dort sauber auf den Page-Content. */
.pswp {
    --pswp-bg: var(--brand-navy-deep);
    backdrop-filter: var(--backdrop-blur);
    -webkit-backdrop-filter: var(--backdrop-blur);
}

/* Modal-Card: visueller Wrapper aus Image-Frame + Footer */
.pswp-modal-card {
    max-width: 960px;
    width: calc(100% - 48px);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--elevation-3);
    overflow: hidden;
    pointer-events: auto;
}

.pswp-modal-image-frame {
    flex: 1 1 auto;
    min-height: 0;
    position: relative;
    padding: 12px;
    background: var(--surface);
    display: flex;
    align-items: center;
    justify-content: center;
}

.pswp-modal-image-frame img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Badges oben links auf dem Bild */
.pswp-modal-badges {
    position: absolute;
    top: 20px;
    left: 20px;
    display: flex;
    gap: 6px;
    z-index: 5;
    pointer-events: none;
}

.pswp-modal-format-badge,
.pswp-modal-mode-badge {
    display: inline-flex;
    align-items: center;
    background: var(--surface);
    color: var(--brand-navy-deep);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0.04em;
    box-shadow: var(--elevation-1);
}

.pswp-modal-format-badge {
    font-family: var(--font-family-mono);
}

/* Footer */
.pswp-modal-footer {
    flex: 0 0 auto;
    border-top: 1px solid var(--border);
    padding: 14px 18px;
    background: var(--surface);
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: auto;
}

.pswp-modal-prompt {
    margin: 0;
    font-size: 15px;
    line-height: 1.5;
    font-weight: 500;
    color: var(--text-primary);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.pswp-modal-meta-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.pswp-modal-meta {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pswp-modal-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Favorit-Icon (Höhe an btn-small angeglichen) */
.pswp-favorite {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--brand-navy-deep);
    cursor: pointer;
    padding: 0;
    box-shadow: var(--elevation-1);
    transition: var(--transition);
}

.pswp-favorite svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

/* Download-Button im Lightbox-Footer mit Brand-Gradient */
.pswp .pswp-download {
    background: var(--gradient-brand);
    color: var(--text-on-primary);
    border-color: rgba(255, 255, 255, 0.18);
    box-shadow: var(--elevation-1), var(--glow-brand-soft);
}

.pswp .pswp-download:hover {
    filter: brightness(1.06);
    box-shadow: var(--elevation-2), var(--glow-brand);
    transform: translateY(-1px);
}

.pswp .pswp-download:hover {
    background: var(--brand-primary-shade);
    color: var(--text-on-primary);
}

/* Trainings-Feedback-Toggle: weißer Hintergrund (überschreibt btn-secondary) */
.pswp .pswp-training-toggle {
    background: var(--surface);
}

.pswp .pswp-training-toggle:hover {
    background: var(--surface-blue-soft);
}

.pswp-favorite:hover {
    transform: translateY(-1px);
    box-shadow: var(--elevation-2);
}

.pswp-favorite[data-active="true"] {
    background: var(--error-soft);
    border-color: var(--error);
    color: var(--error);
}

.pswp-favorite[data-active="true"] svg {
    fill: var(--error);
}

/* Trainings-Feedback-Toggle-Button (auf .btn-secondary.btn-small) */
.pswp-training-toggle svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

.pswp-training-toggle[data-rating="positive"] {
    border-color: var(--success);
    color: var(--success);
}

.pswp-training-toggle[data-rating="positive"] svg {
    fill: var(--success);
}

.pswp-training-toggle[data-rating="negative"] {
    border-color: var(--error);
    color: var(--error);
}

.pswp-training-toggle[data-rating="negative"] svg {
    fill: var(--error);
}

/* Delete-Button (lokaler btn-danger-Tint, da global nicht vorhanden) */
.pswp-delete.btn-secondary {
    background: var(--error-soft);
    color: var(--error);
    border-color: var(--error);
}

.pswp-delete.btn-secondary:hover {
    background: var(--error-soft);
    color: var(--error);
}

/* Trainings-Feedback Sub-Block (ausklappbar) */
.pswp-modal-training {
    display: none;
    flex-direction: column;
    gap: 8px;
    border-top: 1px solid var(--border);
    padding-top: 10px;
}

.pswp-modal-training[data-expanded="true"] {
    display: flex;
}

.pswp-training-feedback-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pswp-training-feedback-label {
    flex: 1;
    font-family: var(--font-family-mono);
    font-size: 11px;
    font-weight: 700;
    color: var(--brand-navy-deep);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.2;
}

.pswp-btn-training-feedback {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--brand-navy-deep);
    cursor: pointer;
    padding: 0;
    box-shadow: var(--elevation-1);
    transition: var(--transition);
}

.pswp-btn-training-feedback svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

.pswp-btn-training-feedback:hover {
    transform: translateY(-1px);
    box-shadow: var(--elevation-2);
}

.pswp-btn-training-feedback[data-rating="positive"][data-active="true"] {
    background: var(--success-soft);
    color: var(--success);
    border-color: var(--success);
}

.pswp-btn-training-feedback[data-rating="positive"][data-active="true"] svg {
    fill: var(--success);
}

.pswp-btn-training-feedback[data-rating="negative"][data-active="true"] {
    background: var(--error-soft);
    color: var(--error);
    border-color: var(--error);
}

.pswp-btn-training-feedback[data-rating="negative"][data-active="true"] svg {
    fill: var(--error);
}

.pswp-training-feedback-note {
    width: 100%;
    min-height: 56px;
    padding: 8px 10px;
    background: var(--surface);
    color: var(--text-primary);
    border: 1.5px solid var(--brand-navy-deep);
    border-radius: var(--radius-sm);
    font-family: var(--font-family-base);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.45;
    resize: vertical;
    outline: none;
    transition: box-shadow var(--transition);
}

.pswp-training-feedback-note:focus {
    box-shadow: var(--elevation-1);
}

.pswp-training-feedback-charcounter {
    align-self: flex-end;
    font-family: var(--font-family-mono);
    font-size: 10px;
    color: var(--text-muted);
    line-height: 1.2;
}

/* Mobile (≤ 640 px) */
@media (max-width: 640px) {
    .pswp-modal-card {
        max-width: 100%;
        width: calc(100% - 16px);
        max-height: 92vh;
    }

    .pswp-modal-badges {
        top: 12px;
        left: 12px;
        gap: 4px;
    }

    .pswp-modal-format-badge,
    .pswp-modal-mode-badge {
        font-size: 10px;
        padding: 2px 8px;
    }

    /* Footer-Buttons bleiben auf Mobile in EINER Zeile: Daumen-Hoch links,
       Copy/Download/Herz rechts — `space-between` aus dem Desktop-Default
       wird beibehalten. Vorheriges `flex-direction: column` hatte den
       Trainings-Toggle in eine eigene Zeile darüber gehoben, was unnötig
       Vertikalraum kostete (alle vier Buttons sind Icon-only und passen
       sehr wohl nebeneinander). */
    .pswp-modal-actions {
        flex-wrap: wrap;
        justify-content: flex-end;
    }
}

/* M2 Vorschlag B: EINE durchgehende Comic-Card (Bild + Footer in einer Hülle)
   - .pswp__scroll-wrap::before malt die Card-Backdrop von oben bis unten
   - .pswp-modal-footer sitzt absolut am Bottom INNERHALB der Card und nutzt nur border-top als Trennlinie
   - Trainings-Feedback ist Popover über dem Toggle-Button (kein Inline-Block mehr im Footer)
   - pointer-events: none — die Card ist rein visuell. Auto-Close auf Bg-Klick
     ist via PSWP-Option `bgClickAction: false` deaktiviert; ein eigener
     Click-Handler in gallery.js (computeCardRect/onRootClick) schließt nur
     bei Klicks AUSSERHALB der hier definierten Card-Box. */
.pswp__scroll-wrap::before {
    content: '';
    position: absolute;
    top: 32px;
    bottom: 24px;
    left: 24px;
    right: 24px;
    max-width: 960px;
    margin-inline: auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--elevation-3);
    pointer-events: none;
}

/* Header-Bar: interne Top-Zone der Card mit Prompt prominenter dargestellt, border-bottom als Trennlinie. */
.pswp .pswp-modal-header {
    position: absolute;
    top: 35px;
    left: 27px;
    right: 27px;
    max-width: 954px;
    margin-inline: auto;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    box-shadow: none;
    padding: 14px 24px;
    z-index: 10;
    pointer-events: auto;
}

.pswp .pswp-modal-header .pswp-modal-prompt {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--text-primary);
    text-align: center;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

/* Footer-Bar: interne Bottom-Zone der Card, transparent auf Card-Backdrop, mit border-top als Trennlinie */
.pswp .pswp-modal-footer {
    position: absolute;
    bottom: 27px;
    left: 27px;
    right: 27px;
    max-width: 954px;
    margin-inline: auto;
    background: transparent;
    border: none;
    border-top: 1px solid var(--border);
    border-radius: 0;
    box-shadow: none;
    padding: 12px 16px;
    z-index: 10;
    pointer-events: auto;
}

/* Icons im Lightbox-Footer (Prompt-Kopieren + Download): icon-only seit beide
   Buttons die Text-Labels verloren haben. Daumen-Hoch/Herz/Heart bleiben in
   ihrer eigenen Größe (16 px). */
.pswp-reuse svg,
.pswp-download svg,
.pswp-edit svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    flex-shrink: 0;
}

/* Trainings-Feedback Popover (öffnet vom Toggle-Button nach oben) */
.pswp-training-popover-anchor {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.pswp-training-popover {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    width: 320px;
    max-width: 90vw;
    padding: 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--elevation-2);
    z-index: 20;
    display: none;
}

.pswp-training-popover[data-expanded="true"] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

@media (max-width: 640px) {
    .pswp__scroll-wrap::before {
        top: 56px;
        bottom: 12px;
        left: 8px;
        right: 8px;
    }

    .pswp .pswp-modal-header {
        top: 59px;
        left: 11px;
        right: 11px;
        padding: 10px 16px;
    }

    .pswp .pswp-modal-header .pswp-modal-prompt {
        font-size: 15px;
    }

    .pswp .pswp-modal-footer {
        bottom: 15px;
        left: 11px;
        right: 11px;
    }

    .pswp-training-popover {
        width: 280px;
        left: -8px;
    }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1024px) {
    .hero {
        padding: 64px 0 110px;
        min-height: 480px;
    }
}

@media (max-width: 768px) {
    .status-badge {
        display: none;
    }

    .page {
        padding: 0 20px;
    }

    .page-footer {
        padding: 20px;
    }

    .card {
        padding: 20px;
        box-shadow: var(--elevation-1);
    }

    .hero {
        padding: 48px 0 90px;
        min-height: 400px;
    }
}

@media (max-width: 640px) {

    .generator-hero-title {
        font-size: 30px;
    }

    .generator-hero-sub {
        font-size: 14px;
    }

    /* Modus-Toggle vertikal stapeln: 3 Tabs („Freigestellt", „Mit Hintergrund",
       „Mit Produkt") sind nebeneinander auf Smartphone-Breiten zu lang und
       wurden rechts abgeschnitten. */
    .mode-segmented {
        width: 100%;
        flex-direction: column;
    }

    .mode-segment+.mode-segment {
        border-left: 0;
        border-top: 1px solid var(--border);
    }

    .mode-segment:first-child {
        border-radius: calc(var(--radius-md) - 3px) calc(var(--radius-md) - 3px) 0 0;
    }

    .mode-segment:last-child {
        border-radius: 0 0 calc(var(--radius-md) - 3px) calc(var(--radius-md) - 3px);
    }

    /* Format/Auflösung/Anzahl/Produkt-Cells nutzen auf schmalen Viewports die
       volle Container-Breite (Default ist `align-items: flex-start`). */
    .control-row-cell {
        align-items: stretch;
        width: 100%;
    }

    .control-label,
    .control-label-inline {
        min-width: 0;
    }

    /* Format: 2×2-Grid statt einzeiliger Flex-Reihe — schon ab 640 px (vorher
       erst ab 480 px); auf engem Smartphone-Viewport sind 4 Buttons in einer
       Zeile zu eng, in zwei Zeilen aber passend mit größerer Tap-Fläche. */
    .format-buttons {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        width: 100%;
    }

    .format-btn {
        justify-content: center;
        width: 100%;
    }

    /* Logo-Pille: volle Breite, beide Optionen je 50 %. */
    .pill-toggle {
        display: flex;
        width: 100%;
    }

    .pill-toggle .pill {
        flex: 1 1 0;
        text-align: center;
    }

    /* Produkt-Picker-Trigger: volle Breite, Inhalt zentriert; max-width 280 px
       (Desktop-Default) wird hier explizit aufgehoben. */
    .btn-secondary.btn-alle-produkte {
        max-width: none;
        width: 100%;
        justify-content: center;
    }

    .prompt-input {
        font-size: 16px;
        padding: 16px 16px 6px;
    }

    /* Action-Row darf umbrechen: bei aktivem Composite-Modus mit ausgewähltem
       Produkt rutschen Glühbirne + Generieren-CTA sonst rechts aus dem
       Prompt-Container. Mit Wrap nimmt der Chip die ganze erste Zeile,
       Library-Trigger und Generieren-Button stehen rechts in der zweiten. */
    .prompt-actions {
        padding: 6px 8px 8px 10px;
        flex-wrap: wrap;
    }

    .prompt-product-chip {
        flex: 1 1 100%;
        max-width: 100%;
        margin-right: 0;
    }
}

/* ============================================================
   Modal (Comic-Pattern) — Backdrop + Panel + Head/Body/Foot
   ============================================================ */

.modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.modal[hidden] {
    display: none;
}

.modal-backdrop {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at center, rgba(0, 27, 63, 0.20), transparent 70%),
        var(--backdrop-color);
    backdrop-filter: var(--backdrop-blur);
    -webkit-backdrop-filter: var(--backdrop-blur);
    animation: modal-fade-in 160ms var(--ease-standard);
}

.modal-panel {
    position: relative;
    background: var(--glass-surface-soft);
    backdrop-filter: var(--glass-blur-strong);
    -webkit-backdrop-filter: var(--glass-blur-strong);
    color: var(--text-primary);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--elevation-3), var(--glass-border-inner), var(--glow-brand-soft);
    max-width: 540px;
    width: 100%;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    animation: modal-pop-in 200ms var(--ease-standard);
}

.modal-head {
    display: grid;
    grid-template-columns: minmax(36px, 1fr) auto minmax(36px, 1fr);
    align-items: center;
    gap: 12px;
    padding: 16px 24px;
    border-bottom: 1px solid var(--border);
}

.modal-title {
    grid-column: 2;
    text-align: center;
    font-size: 18px;
    font-weight: 800;
    color: var(--brand-primary);
    margin: 0;
    letter-spacing: 0;
    text-transform: uppercase;
}

.modal-close {
    grid-column: 3;
    justify-self: end;
    width: 36px;
    height: 36px;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--brand-navy-deep);
    font-size: 20px;
    font-weight: 800;
    line-height: 1;
    border-radius: var(--radius-md);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--elevation-1);
    transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
}

.modal-close:hover {
    background: var(--surface-blue-soft);
    box-shadow: var(--elevation-2);
    transform: translateY(-1px);
}

.modal-body {
    padding: 20px 24px;
    overflow: auto;
    flex: 1;
}

.modal-foot {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid var(--border);
}

@keyframes modal-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes modal-pop-in {
    from {
        opacity: 0;
        transform: scale(0.96) translateY(8px);
    }

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

/* ============================================================
   Command-Palette (⌘K) — globale Overlay-Suche (Milestone 6)
   ============================================================ */

.cmdk {
    position: fixed;
    inset: 0;
    z-index: 11000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 12vh 20px 20px;
}

.cmdk[hidden] {
    display: none;
}

.cmdk-backdrop {
    position: absolute;
    inset: 0;
    background: var(--backdrop-color);
    backdrop-filter: var(--backdrop-blur);
    -webkit-backdrop-filter: var(--backdrop-blur);
    animation: modal-fade-in 160ms var(--ease-standard);
}

.cmdk-panel {
    position: relative;
    width: 100%;
    max-width: 560px;
    max-height: 70vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--elevation-3), var(--glow-brand-soft);
    animation: modal-pop-in 200ms var(--ease-standard);
}

.cmdk-search {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
}

.cmdk-search-icon {
    display: inline-flex;
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    color: var(--text-muted);
}

.cmdk-search-icon svg {
    width: 18px;
    height: 18px;
}

.cmdk-input {
    flex: 1 1 auto;
    min-width: 0;
    border: none;
    background: transparent;
    outline: none;
    font-family: var(--font-family-base);
    font-size: 15px;
    color: var(--text-primary);
}

.cmdk-input::placeholder {
    color: var(--text-muted);
}

.cmdk-esc {
    flex: 0 0 auto;
    font-family: var(--font-family-mono);
    font-size: 11px;
    color: var(--text-muted);
    padding: 3px 7px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-paper);
}

.cmdk-results {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 8px;
}

.cmdk-group + .cmdk-group {
    margin-top: 4px;
}

.cmdk-group-label {
    margin: 8px 10px 4px;
    font-family: var(--font-family-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.cmdk-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 9px 10px;
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 14px;
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
}

.cmdk-item:hover,
.cmdk-item.is-active {
    background: var(--surface-blue-soft);
}

.cmdk-item.is-active {
    box-shadow: inset 2px 0 0 var(--brand-accent);
}

.cmdk-item-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    color: var(--text-secondary);
}

.cmdk-item-icon svg {
    width: 18px;
    height: 18px;
}

.cmdk-item-badge {
    flex: 0 0 auto;
    min-width: 34px;
    text-align: center;
    font-family: var(--font-family-mono);
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
}

.cmdk-item-label {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cmdk-empty {
    margin: 0;
    padding: 28px 16px;
    text-align: center;
    color: var(--text-muted);
    font-size: 14px;
}

.cmdk-foot {
    display: flex;
    gap: 16px;
    align-items: center;
    padding: 10px 16px;
    border-top: 1px solid var(--border);
    background: var(--surface-paper);
}

.cmdk-foot-hint {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: var(--text-muted);
}

.cmdk-foot kbd {
    font-family: var(--font-family-mono);
    font-size: 11px;
    color: var(--text-secondary);
    padding: 2px 5px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
}

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

    .cmdk-backdrop,
    .cmdk-panel {
        animation: none;
    }
}

@media (max-width: 560px) {

    .cmdk {
        padding: 8vh 12px 12px;
    }

    .cmdk-foot {
        display: none;
    }
}

/* ============================================================
   Confirm-Modal — destruktive Aktionen (siehe delete-pattern.md)
   ============================================================ */

.modal-panel-sm {
    max-width: 420px;
}

.btn-confirm {
    display: inline-flex;
    align-items: center;
    padding: 10px 18px;
    background: var(--gradient-brand);
    color: var(--text-on-primary);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--radius-md);
    font-family: var(--font-family-base);
    font-weight: 800;
    font-size: 14px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: var(--elevation-1), var(--glow-brand-soft);
    transition: transform var(--transition), box-shadow var(--transition), filter var(--transition);
}

.btn-confirm:hover {
    filter: brightness(1.06);
    box-shadow: var(--elevation-2), var(--glow-brand);
    transform: translateY(-1px);
}

.btn-confirm:active {
    filter: none;
    box-shadow: var(--elevation-1), var(--glow-brand-soft);
    transform: translateY(0);
}

.btn-confirm.danger {
    background: var(--gradient-danger);
    color: var(--error-on);
    border-color: rgba(255, 255, 255, 0.18);
    box-shadow:
        var(--elevation-1),
        var(--glow-danger-soft),
        inset 0 1px 0 rgba(255, 255, 255, 0.20),
        inset 0 -1px 0 rgba(0, 0, 0, 0.18);
}

.btn-confirm.danger:hover {
    filter: none;
    background: var(--gradient-danger-hover);
    box-shadow:
        var(--elevation-2),
        var(--glow-danger),
        inset 0 1px 0 rgba(255, 255, 255, 0.24),
        inset 0 -1px 0 rgba(0, 0, 0, 0.22);
    transform: translateY(-1px);
}

.btn-confirm.danger:active {
    background: var(--gradient-danger);
    box-shadow:
        var(--elevation-1),
        var(--glow-danger-soft),
        inset 0 1px 2px rgba(0, 0, 0, 0.22);
    transform: translateY(0);
}

.btn-confirm:disabled,
.btn-confirm.danger:disabled {
    cursor: not-allowed;
    opacity: 0.6;
    filter: none;
    transform: none;
    box-shadow: var(--elevation-1);
}

.btn-confirm:disabled:hover,
.btn-confirm.danger:disabled:hover {
    filter: none;
    transform: none;
    box-shadow: var(--elevation-1);
}

/* ============================================================
   Szenen-Assistent (M006) — Seed → Fragen → Build im Prompt-Block.
   Claude schlägt eine Szene vor; das Ergebnis landet im #promptInput.
   ============================================================ */

.assistant-area {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px 16px;
    background: var(--surface-blue-softer);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}

.assistant-intro {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.4;
}

.assistant-intro-icon {
    display: inline-flex;
    flex-shrink: 0;
    color: var(--text-secondary);
}

.assistant-seed-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.assistant-seed-input {
    flex: 1 1 220px;
    min-width: 0;
    padding: 9px 12px;
    font-family: var(--font-family-base);
    font-size: 14px;
    color: var(--text-primary);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    outline: none;
    transition: var(--transition);
}

.assistant-seed-input:focus {
    box-shadow: var(--elevation-1);
}

.assistant-seed-input::placeholder {
    color: var(--text-muted);
}

/* In-Button-Spinner für die beiden KI-Aktionen (self-contained, kein
   globaler Spinner-Style nötig). */
.assistant-questions-btn,
.assistant-build-btn {
    position: relative;
}

.assistant-questions-btn .btn-spinner,
.assistant-build-btn .btn-spinner {
    display: none;
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: assistant-spin 0.7s linear infinite;
}

.assistant-questions-btn.is-loading .btn-spinner,
.assistant-build-btn.is-loading .btn-spinner {
    display: inline-block;
}

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

.assistant-fallback {
    margin: 0;
}

.assistant-questions {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.assistant-question {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.assistant-question-text {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
}

.assistant-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.assistant-chip {
    padding: 6px 12px;
    font-family: var(--font-family-base);
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    cursor: pointer;
    box-shadow: var(--elevation-1);
    transition: var(--transition);
}

.assistant-chip:hover:not([aria-pressed="true"]) {
    transform: translateY(-1px);
    box-shadow: var(--elevation-2);
}

.assistant-chip[aria-pressed="true"] {
    background: var(--gradient-brand);
    border-color: transparent;
    color: var(--text-on-primary);
}

.assistant-build-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.assistant-build-hint {
    font-size: 12px;
    color: var(--text-muted);
}

/* Resilienz-Ausweg (M4): info-card mit gestapeltem Text + linksbündigem Button. */
.assistant-build-escape {
    margin: 0;
}

.assistant-build-escape .info-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

/* ============================================================
   Voll-Prompt-Modal (M006) — Read-only-Prompt + Copy-Button
   ============================================================ */

.modal-panel-full-prompt {
    max-width: 680px;
}

.full-prompt-intro {
    margin: 0 0 14px;
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
}

.full-prompt-text {
    margin: 0;
    padding: 14px 16px;
    max-height: 52vh;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-word;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--text-primary);
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}

/* ============================================================
   Product-Picker-Modal — Vollliste mit Suche (M3-Grundlayout)
   Polish (Tile-Größen, Tokens, Scrolling) folgt in M5.
   ============================================================ */

.modal-panel-product-picker {
    max-width: 920px;
}

.modal-body-product-picker {
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.product-modal-search {
    position: relative;
    padding: 16px 24px 12px;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}

.product-modal-search-icon {
    position: absolute;
    left: 36px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    pointer-events: none;
}

.product-modal-search-input {
    width: 100%;
    padding: 9px 12px 9px 34px;
    font-family: var(--font-family-base);
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    outline: none;
    transition: all var(--transition);
}

.product-modal-search-input:focus {
    background: var(--surface);
    box-shadow: var(--elevation-1);
    transform: translate(-1px, -1px);
}

.product-modal-search-input::placeholder {
    color: var(--text-muted);
    font-weight: 500;
}

.product-modal-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    padding: 16px 24px;
    overflow-y: auto;
    max-height: 60vh;
}

@media (max-width: 768px) {
    .product-modal-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 480px) {
    .product-modal-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.product-modal-empty {
    padding: 24px;
    text-align: center;
    font-size: 13px;
    color: var(--text-muted);
    margin: 0;
}

/* ============================================================
   Generation-Status-Modal — Stepper, Result/Error
   ============================================================ */

.modal-panel-genstatus {
    max-width: 560px;
}

.modal-body-genstatus {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.genmodal-progress-track {
    position: relative;
    width: 100%;
    height: 12px;
    margin: 16px 0 8px;
    border-radius: var(--radius-pill);
    background: var(--surface-alt);
    border: 1px solid var(--border);
    box-shadow: inset 0 1px 2px rgba(0, 27, 63, 0.08);
    overflow: hidden;
    isolation: isolate;
}

.genmodal-progress-fill {
    position: relative;
    height: 100%;
    width: 0%;
    border-radius: inherit;
    background: var(--gradient-progress);
    box-shadow: var(--glow-progress);
    transition: width 600ms linear;
    will-change: width;
    overflow: hidden;
}

.genmodal-progress-shine {
    position: absolute;
    top: 0;
    bottom: 0;
    left: -40%;
    width: 40%;
    border-radius: inherit;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.35) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    animation: genmodal-shine 2.2s linear infinite;
    pointer-events: none;
}

.genmodal-progress-head {
    position: absolute;
    top: 50%;
    right: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    transform: translateY(-50%);
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.85), 0 0 14px rgba(24, 212, 163, 0.55);
    animation: genmodal-head-pulse 1.6s ease-in-out infinite;
    pointer-events: none;
}

@keyframes genmodal-shine {
    0% {
        left: -40%;
    }
    100% {
        left: 110%;
    }
}

@keyframes genmodal-head-pulse {
    0%, 100% {
        opacity: 0.9;
        box-shadow: 0 0 8px rgba(255, 255, 255, 0.85), 0 0 14px rgba(24, 212, 163, 0.55);
    }
    50% {
        opacity: 1;
        box-shadow: 0 0 12px rgba(255, 255, 255, 0.95), 0 0 22px rgba(24, 212, 163, 0.75);
    }
}

@media (prefers-reduced-motion: reduce) {
    .genmodal-progress-fill {
        transition: width 200ms linear;
    }
    .genmodal-progress-shine,
    .genmodal-progress-head {
        animation: none;
    }
}

.genmodal-timer {
    margin: 18px 0 0;
    color: var(--text-primary);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
}

.genmodal-results {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.genmodal-result-item {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.genmodal-image {
    display: block;
    max-width: 100%;
    max-height: 60vh;
    margin: 0 auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--elevation-2);
    background: var(--surface-alt);
}

.genmodal-results[data-count="2"] .genmodal-image,
.genmodal-results[data-count="3"] .genmodal-image,
.genmodal-results[data-count="4"] .genmodal-image {
    max-height: 48vh;
}

.genmodal-result-download {
    align-self: flex-end;
}

.genmodal-warning {
    margin-top: 14px;
    padding: 10px 14px;
    background: var(--warning-soft);
    border: 2px solid var(--warning);
    border-radius: var(--radius-sm);
    color: var(--warning);
    font-size: 13px;
    font-weight: 600;
    box-shadow: var(--elevation-1);
}

.genmodal-error {
    padding: 16px;
    background: var(--error-soft);
    border: 2px solid var(--error);
    border-radius: var(--radius-sm);
    box-shadow: var(--elevation-1);
}

.genmodal-error-message {
    margin: 0 0 8px;
    color: var(--error-deep);
    font-size: 15px;
    font-weight: 700;
}

.genmodal-error-hint {
    margin: 0;
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.5;
}

/* Ergebnis-Aktionen (Bearbeiten / Herunterladen) pro Bild — Region-Edit (M008) */
.genmodal-result-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

/* ============================================================
   REGION-EDIT-MODAL (M008) — Pinsel-Maske + Anweisung
   Canvas-Stage-Glow (M7, „Aperture"): Bild zentriert auf ruhiger Studio-
   Bühne, Pinsel malt eine Electric-Indigo-Spur mit Glow direkt aufs Bild.
   ============================================================ */

.modal-panel-edit {
    max-width: 640px;
}

.modal-body-edit {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.edit-modal-hint {
    margin: 0;
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.5;
}

/* Bild + Overlay-Canvas exakt deckungsgleich gestapelt — ruhige Bühne im
   Studio-Papier, das zentrierte Bild trägt die Show. */
.edit-stage {
    position: relative;
    display: block;
    width: 100%;
    max-height: 56vh;
    margin: 0 auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--elevation-1);
    background: var(--surface-paper);
    overflow: hidden;
    line-height: 0;
}

.edit-stage-image {
    display: block;
    width: 100%;
    max-height: 56vh;
    object-fit: contain;
    -webkit-user-select: none;
    user-select: none;
}

/* Anzeige-Ebene: translucente Indigo-Spur, der Schein kommt rein aus
   drop-shadow (Glow-Spur). Die EXPORTIERTE Maske lebt im offscreen
   Masken-Canvas (region-edit.js) und ist davon unberührt kantenscharf. */
.edit-stage-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    cursor: crosshair;
    touch-action: none;
    filter: drop-shadow(0 0 4px var(--brand-accent)) drop-shadow(0 0 11px var(--brand-accent));
}

.edit-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.edit-brush {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 auto;
    min-width: 200px;
}

.edit-brush-label {
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

.edit-brush input[type="range"] {
    flex: 1 1 auto;
    accent-color: var(--brand-primary);
    cursor: pointer;
}

.edit-prompt-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.edit-prompt-input {
    min-height: 56px;
}

.edit-prompt-error {
    margin: 0;
    color: var(--error);
    font-size: 13px;
    font-weight: 600;
}

/* ============================================================
   FORM-BASE — wiederverwendbar (form-pattern.md)
   ============================================================ */

.form-input {
    width: 100%;
    padding: 10px 14px;
    background: var(--surface);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: var(--font-family-base);
    font-size: 15px;
    font-weight: 500;
    outline: none;
    transition: box-shadow var(--transition);
}

.form-input:focus {
    box-shadow: var(--elevation-1);
}

.form-input[readonly] {
    background: var(--surface-alt);
    color: var(--text-secondary);
    cursor: not-allowed;
}

.form-textarea {
    resize: vertical;
    min-height: 64px;
    font-family: var(--font-family-base);
    line-height: 1.45;
}

.form-label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--brand-navy-deep);
    letter-spacing: 0.02em;
    margin-bottom: 6px;
}

.form-label-optional {
    font-weight: 500;
    color: var(--text-muted);
    text-transform: none;
    letter-spacing: 0;
}

.form-hint {
    font-size: 12px;
    color: var(--text-muted);
    margin: 6px 0 0;
}

.form-error {
    margin: 12px 0 0;
    padding: 10px 14px;
    background: var(--error-soft);
    color: var(--error);
    border: 2px solid var(--error);
    border-left-width: 5px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 600;
    box-shadow: var(--elevation-1);
}

.form-row {
    margin-bottom: 16px;
}

.form-row:last-child {
    margin-bottom: 0;
}

/* ============================================================
   Wissensanreicherung (Enrichment) im Produkt-Edit-Modal (M005)
   Additive Sektion: Analyse-Button + Provenienz + editierbare Felder.
   ============================================================ */
.form-enrich {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
}

.form-enrich-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.form-enrich-title {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--brand-navy-deep);
    letter-spacing: 0.02em;
}

.form-enrich-prov {
    margin: 0 0 12px;
    font-size: 12px;
    color: var(--text-muted);
}

.form-enrich-disabled-hint {
    margin: 0 0 12px;
    padding: 8px 12px;
    background: var(--warning-soft);
    color: var(--warning);
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 600;
}

.form-enrich-error {
    margin: 0 0 12px;
    padding: 8px 12px;
    background: var(--error-soft);
    color: var(--error);
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 600;
}

.form-enrich-fields .form-row {
    margin-bottom: 12px;
}

.form-enrich-fields .form-row:last-child {
    margin-bottom: 0;
}

/* Gesperrter Lade-/Analyse-Zustand: Felder sind während GET/POST disabled, damit
   eine spät zurückkommende Response keine Eingabe überschreibt (Race-Härtung). */
.form-enrich-fields .form-input:disabled,
.form-enrich-fields .form-textarea:disabled {
    background: var(--surface-alt);
    color: var(--text-muted);
    cursor: not-allowed;
}

/* ============================================================
   PRODUCTS-PAGE — Verwaltung des Katalogs
   ============================================================ */

.products-section+.products-section {
    margin-top: 16px;
}

.products-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 16px 0 20px;
}

.product-search {
    flex: 1;
    min-width: 240px;
    background: var(--glass-surface-soft);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    padding: 12px 16px;
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    outline: none;
    transition: box-shadow var(--transition), border-color var(--transition);
    box-shadow: var(--elevation-1), var(--glass-border-inner);
}

.product-search:focus {
    border-color: var(--border-hover);
    box-shadow: var(--elevation-2), var(--glass-border-inner);
}

.products-list-status {
    margin: 12px 0;
    padding: 12px 16px;
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 14px;
    color: var(--text-secondary);
    box-shadow: var(--elevation-1);
}

.products-list-status.is-error {
    background: var(--error-soft);
    color: var(--error);
    border-color: var(--error);
}

.products-empty {
    margin: 24px 0;
    padding: 24px;
    text-align: center;
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 600;
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.product-mgmt-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.product-mgmt-card {
    display: grid;
    grid-template-columns: 28px 64px 1fr auto;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    background: var(--glass-surface-soft);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--elevation-1), var(--glass-border-inner);
    transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
}

.product-mgmt-card:hover {
    border-color: var(--border-hover);
    box-shadow: var(--elevation-2), var(--glass-border-inner);
    transform: translateY(-1px);
}

.product-mgmt-card[hidden] {
    display: none;
}

.product-mgmt-handle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 36px;
    padding: 0;
    margin: 0;
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-muted);
    font-family: inherit;
    font-size: 16px;
    font-weight: 800;
    line-height: 1;
    cursor: grab;
    user-select: none;
    border-radius: var(--radius-sm);
    transition: background var(--transition), color var(--transition), border-color var(--transition);
}

.product-mgmt-handle:hover {
    color: var(--brand-navy-deep);
    background: var(--surface-blue-soft);
}

.product-mgmt-handle:focus-visible {
    outline: none;
    border-color: var(--brand-navy-deep);
    color: var(--brand-navy-deep);
    background: var(--surface-blue-soft);
}

.product-mgmt-handle:active {
    cursor: grabbing;
}

.product-mgmt-card.is-search-disabled {
    cursor: default;
}

.product-mgmt-card.is-search-disabled .product-mgmt-handle {
    cursor: not-allowed;
    opacity: 0.4;
}

.product-mgmt-card.is-dragging {
    opacity: 0.45;
    box-shadow: var(--elevation-2);
}

.product-mgmt-card.drop-before {
    box-shadow: inset 0 3px 0 0 var(--brand-primary), var(--elevation-2);
}

.product-mgmt-card.drop-after {
    box-shadow: inset 0 -3px 0 0 var(--brand-primary), var(--elevation-2);
}

.products-search-hint {
    margin: -8px 0 16px;
    padding: 8px 14px;
    background: var(--surface-blue-softer);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.product-mgmt-thumb {
    width: 64px;
    height: 64px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.product-mgmt-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.product-mgmt-thumb-empty {
    color: var(--text-muted);
    font-weight: 700;
}

.product-mgmt-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.product-mgmt-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--brand-navy-deep);
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.product-mgmt-url {
    font-size: 12px;
    color: var(--text-muted);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.product-mgmt-url:hover {
    color: var(--brand-primary);
    text-decoration: underline;
}

/* Leer-Zustand (M002): kein klickbarer Link, nur ein ruhiger Hinweis. */
.product-mgmt-url-empty,
.product-mgmt-url-empty:hover {
    color: var(--text-muted);
    font-style: italic;
    text-decoration: none;
    cursor: default;
}

.product-mgmt-actions {
    display: flex;
    gap: 6px;
    align-items: center;
}

.product-mgmt-stats-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    padding: 2px 8px;
    margin-right: 4px;
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    line-height: 1.4;
    cursor: default;
    user-select: none;
}

.product-mgmt-stats-badge.is-complete {
    background: var(--success-soft);
    border-color: var(--success-soft);
    color: var(--success);
}

.product-mgmt-stats-badge[hidden] {
    display: none;
}

.skeleton {
    background: linear-gradient(90deg,
            var(--surface-alt) 0%,
            var(--surface-blue-soft) 50%,
            var(--surface-alt) 100%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.4s var(--ease-standard) infinite;
    border-radius: var(--radius-sm);
}

.skeleton-line {
    height: 14px;
    margin-bottom: 8px;
    border-radius: var(--radius-sm);
}

.skeleton-line.short {
    width: 60%;
}

.skeleton-line.medium {
    width: 80%;
}

.skeleton-image {
    aspect-ratio: 1;
    width: 100%;
    border-radius: var(--radius-sm);
}

@keyframes skeleton-shimmer {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

.product-mgmt-skeleton {
    display: grid;
    grid-template-columns: 28px 64px 1fr auto;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    background: var(--glass-surface-soft);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--elevation-1), var(--glass-border-inner);
}

.product-mgmt-skeleton .skeleton-image {
    width: 64px;
    height: 64px;
}

.product-mgmt-skeleton-text {
    display: flex;
    flex-direction: column;
    gap: 6px;
    grid-column: 3;
}

@media (max-width: 720px) {

    .product-mgmt-card,
    .product-mgmt-skeleton {
        grid-template-columns: 28px 56px 1fr;
        grid-template-rows: auto auto;
        row-gap: 8px;
    }

    .product-mgmt-thumb {
        width: 56px;
        height: 56px;
    }

    .product-mgmt-actions {
        grid-column: 1 / -1;
        justify-content: flex-end;
    }

    .product-mgmt-skeleton-text {
        grid-column: 3;
    }
}

/* Mobile (≤ 640 px): Toolbar stapelt — der „Produkt hinzufügen"-Button
   kann auf engen Smartphone-Breiten nicht schrumpfen (intrinsische
   Label-Breite) und wurde sonst rechts abgeschnitten. Cards verlieren
   den Drag-Handle (HTML5 `draggable` ohne Touch-Polyfill ist auf
   iOS/Android-Browsern praktisch nicht nutzbar — Sortierung bleibt am
   Desktop erhalten) und kommen wieder in EINE Zeile: Thumbnail links,
   Name/URL in der Mitte, Edit/Trash rechts. Damit fällt die zweite
   Action-Zeile weg und die Card wirkt deutlich aufgeräumter. */
@media (max-width: 640px) {

    .products-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .products-toolbar .btn-generate {
        width: 100%;
        justify-content: center;
    }

    .product-mgmt-handle {
        display: none;
    }

    .product-mgmt-card,
    .product-mgmt-skeleton {
        grid-template-columns: 48px 1fr auto;
        grid-template-rows: auto;
        padding: 12px;
        column-gap: 12px;
        row-gap: 0;
    }

    .product-mgmt-thumb {
        width: 48px;
        height: 48px;
    }

    .product-mgmt-skeleton .skeleton-image {
        width: 48px;
        height: 48px;
    }

    .product-mgmt-skeleton-text {
        grid-column: 2;
    }

    .product-mgmt-actions {
        grid-column: auto;
        align-self: center;
        justify-content: flex-end;
    }
}

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

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .modal-backdrop,
    .modal-panel {
        animation: none;
    }
}

/* ============================================================
   M3 — Bilder-verwalten-Modal: Grid mit Tag-Pills + Drag&Drop
   ============================================================ */

.modal-panel-images {
    max-width: 880px;
}

.modal-body-images {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.product-images-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.product-images-subtitle {
    margin: 0;
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: 600;
}

.product-images-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.product-images-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
}

.product-images-grid[aria-busy="true"] {
    opacity: 0.6;
}

.product-image-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px;
    background: var(--glass-surface-soft);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--elevation-1), var(--glass-border-inner);
    cursor: default;
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
    outline: none;
}

.product-image-tile:hover,
.product-image-tile:focus-visible {
    transform: translateY(-2px);
    box-shadow: var(--elevation-2), var(--glass-border-inner);
    border-color: var(--border-hover);
}

.product-image-tile:focus-visible {
    border-color: var(--brand-primary);
}

.product-image-tile.is-deleted {
    opacity: 0.55;
}

/* Thumb behaelt opaque, helle Surface — Produktbilder sollen sauber lesbar
   sein und nicht durch das Body-Pattern hindurchschimmern. */
.product-image-thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-image-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.product-image-thumb-broken::after {
    content: '⚠';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 28px;
}

/* Source-Marker: nur bei manuell hochgeladenen Bildern (Cloud-Up-Icon).
   Gescraptes Bild = Default ohne Badge, weniger visueller Noise. */
.product-image-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--glass-surface);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-pill);
    box-shadow: var(--elevation-1), var(--glass-border-inner);
    color: var(--brand-primary);
    pointer-events: none;
}

.product-image-badge svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    fill: none;
}

/* Delete/Restore als Overlay top-right auf dem Thumb. Semi-transparent,
   wird beim Hover/Focus des Tiles voll deckend. */
.product-image-overlay-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: var(--glass-surface);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    color: var(--brand-navy-deep);
    cursor: pointer;
    box-shadow: var(--elevation-1), var(--glass-border-inner);
    opacity: 0.7;
    transition: opacity var(--transition), background var(--transition), color var(--transition), transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.product-image-tile:hover .product-image-overlay-btn,
.product-image-tile:focus-within .product-image-overlay-btn {
    opacity: 1;
}

.product-image-overlay-btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--elevation-2), var(--glass-border-inner);
}

.product-image-overlay-btn svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

.product-image-overlay-delete {
    color: var(--error);
    border-color: rgba(186, 26, 26, 0.24);
}

.product-image-overlay-delete:hover {
    background: var(--error-soft);
    color: var(--error);
    border-color: var(--error);
}

.product-image-overlay-restore {
    color: var(--success);
    border-color: rgba(0, 110, 28, 0.24);
}

.product-image-overlay-restore:hover {
    background: var(--success-soft);
    color: var(--success);
    border-color: var(--success);
}

/* 2x2-Grid statt 4-spaltig — Labels bleiben vollstaendig lesbar
   (vorher schnitt "Anwendung" auf schmalen Tiles ab). */
.product-image-tags {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.product-image-tag-pill {
    min-width: 0;
    padding: 6px 8px;
    background: var(--glass-surface-soft);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    cursor: pointer;
    text-align: center;
    box-shadow: var(--glass-border-inner);
    transition: var(--transition);
}

.product-image-tag-pill:hover {
    background: var(--glass-surface);
    color: var(--brand-navy-deep);
    border-color: var(--border-hover);
}

.product-image-tag-pill.is-active {
    background: var(--gradient-brand);
    color: var(--text-on-primary);
    border-color: rgba(255, 255, 255, 0.18);
    box-shadow: var(--elevation-1), var(--glow-brand-soft);
}

.product-images-empty {
    margin: 0;
    padding: 24px;
    text-align: center;
    color: var(--text-muted);
    font-size: 14px;
    background: var(--surface-alt);
    border: 1px dashed var(--border);
    border-radius: var(--radius-md);
}

.product-images-error {
    margin: 0;
    padding: 10px 14px;
    background: var(--error-soft);
    border: 1px solid var(--error);
    border-radius: var(--radius-sm);
    color: var(--error);
    font-size: 13px;
    font-weight: 600;
}

.product-images-dropzone {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-blue-soft);
    border: 2px dashed var(--brand-primary);
    border-radius: var(--radius-md);
    pointer-events: none;
}

.product-images-dropzone p {
    margin: 0;
    font-size: 16px;
    font-weight: 800;
    color: var(--brand-navy-deep);
}

@media (max-width: 640px) {
    .product-images-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .product-image-tag-pill {
        font-size: 10px;
        padding: 4px 6px;
    }
}

/* ============================================================
   BRAND-SETTINGS-PAGE — Glass-Morphism-Layer
   Sektion-Cards, Info-Card, Dropzone, Policy-Optionen und Save-Bar liegen
   alle auf demselben halbtransparenten Glas — gleiche Tokens wie
   Generator-Card, Topbar und Kosten-Seite.
   ============================================================ */

.brand-page {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Form ist Flex-Stack — Sektionen breathen gleichmaessig, statt eigene
   margin-bottom-Werte zu schichten. */
.brand-page .form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.brand-page .info-card {
    margin: 0;
    background: var(--glass-surface-soft);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-left: 4px solid var(--brand-primary);
    border-radius: var(--radius-lg);
    box-shadow: var(--elevation-1), var(--glass-border-inner);
    padding: 16px 20px;
}

.brand-section {
    background: var(--glass-surface-soft);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: 24px 28px;
    box-shadow: var(--elevation-2), var(--glass-border-inner);
    margin-bottom: 0;
}

.brand-section-head {
    margin-bottom: 20px;
}

.brand-section-title {
    margin: 0 0 4px;
    font-size: 18px;
    font-weight: 800;
    color: var(--brand-primary);
    letter-spacing: 0;
    text-transform: uppercase;
}

.brand-section-sub {
    margin: 0;
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
}

.brand-logo-row {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    flex-wrap: wrap;
}

/* Logo-Preview bleibt opak weiss — fuer eine sauber lesbare Logo-Vorschau
   ist Transparenz kontraproduktiv (Logos haben oft transparente Pixel,
   die sonst auf dem Body-Pattern unruhig wirken). */
.brand-logo-preview {
    flex: 0 0 160px;
    width: 160px;
    height: 160px;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    box-shadow: var(--elevation-1);
}

.brand-logo-preview img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.brand-logo-controls {
    flex: 1 1 320px;
    min-width: 240px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.brand-logo-dropzone {
    border: 1px dashed var(--border-hover);
    border-radius: var(--radius-md);
    padding: 18px 16px;
    text-align: center;
    background: var(--glass-surface-soft);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    box-shadow: var(--glass-border-inner);
    cursor: pointer;
    transition: var(--transition);
}

.brand-logo-dropzone:hover,
.brand-logo-dropzone:focus-visible {
    background: var(--glass-surface);
    border-color: var(--brand-primary);
    outline: none;
}

.brand-logo-dropzone.is-dragover {
    background: var(--glass-surface);
    border-color: var(--brand-primary);
    box-shadow: var(--glow-brand-soft), var(--glass-border-inner);
}

.brand-logo-dropzone-title {
    margin: 0 0 4px;
    font-size: 14px;
    font-weight: 700;
    color: var(--brand-primary);
}

.brand-logo-dropzone-hint {
    margin: 0;
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.5;
}

.brand-logo-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.brand-color-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

.brand-color-row {
    margin-bottom: 0;
}

.brand-color-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

.brand-color-picker {
    width: 48px;
    height: 40px;
    padding: 2px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    cursor: pointer;
    flex-shrink: 0;
}

.brand-color-picker::-webkit-color-swatch-wrapper {
    padding: 0;
}

.brand-color-picker::-webkit-color-swatch {
    border: none;
    border-radius: calc(var(--radius-sm) - 2px);
}

.brand-color-text {
    flex: 1 1 auto;
    font-family: var(--font-family-mono);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.brand-policy-fieldset {
    border: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.brand-policy-option {
    display: flex;
    gap: 12px;
    padding: 14px 16px;
    background: var(--glass-surface-soft);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    box-shadow: var(--glass-border-inner);
    cursor: pointer;
    transition: var(--transition);
}

.brand-policy-option:hover {
    background: var(--glass-surface);
    border-color: var(--border-hover);
    transform: translateY(-1px);
    box-shadow: var(--elevation-1), var(--glass-border-inner);
}

.brand-policy-option:has(input:checked) {
    border-color: var(--brand-navy-deep);
    background: var(--glass-surface);
    box-shadow: var(--glow-brand-soft), var(--glass-border-inner);
}

.brand-policy-option input[type="radio"] {
    margin-top: 2px;
    accent-color: var(--brand-primary);
    flex-shrink: 0;
}

.brand-policy-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.brand-policy-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--brand-primary);
}

.brand-policy-hint {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
}

.brand-save-bar {
    position: sticky;
    bottom: 16px;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 20px;
    margin-top: 0;
    background: var(--glass-surface);
    backdrop-filter: var(--glass-blur-strong);
    -webkit-backdrop-filter: var(--glass-blur-strong);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--elevation-3), var(--glass-border-inner);
}

.brand-save-status {
    font-size: 13px;
    color: var(--text-muted);
    font-weight: 600;
}

.btn-secondary.btn-danger-soft,
.btn-small.btn-danger-soft {
    color: var(--error);
    border-color: var(--error-soft);
}

.btn-secondary.btn-danger-soft:hover,
.btn-small.btn-danger-soft:hover {
    background: var(--error-soft);
    color: var(--error);
}

@media (max-width: 720px) {
    .brand-section {
        padding: 20px 18px;
    }

    .brand-color-grid {
        grid-template-columns: 1fr;
    }

    .brand-logo-row {
        gap: 16px;
    }

    .brand-logo-preview {
        flex: 0 0 120px;
        width: 120px;
        height: 120px;
    }

    .brand-save-bar {
        flex-wrap: wrap;
    }
}

/* ============================================================
   AUTH-PAGES — Login / Registrierung (kein Topbar)
   ============================================================ */

.auth-body {
    /* Auth-Seiten haben keinen fixierten Topbar → kein padding-top nötig. */
    padding-top: 0;
}

.auth-page {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 20px;
}

.auth-card {
    width: 100%;
    max-width: 400px;
    padding: 36px 32px;
    box-shadow: var(--elevation-2);
}

.auth-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 28px;
}

.auth-wordmark {
    font-size: 28px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--brand-primary);
}

.auth-title {
    font-family: var(--font-family-display);
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--brand-navy-deep);
    margin: 0 0 6px;
}

.auth-subtitle {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0 0 24px;
}

.auth-form .form-row {
    margin-bottom: 16px;
}

.auth-submit {
    width: 100%;
    justify-content: center;
    margin-top: 4px;
    padding: 12px 18px;
}

.auth-switch {
    margin: 22px 0 0;
    text-align: center;
    font-size: 13px;
    color: var(--text-secondary);
}

.auth-switch a {
    color: var(--brand-navy-deep);
    font-weight: 700;
    text-decoration: none;
    border-bottom: 1px solid var(--border);
    transition: border-color var(--transition);
}

.auth-switch a:hover {
    border-bottom-color: var(--brand-navy-deep);
}

/* ============================================================
   PROJEKT-SWITCHER + ACCOUNT-MENÜ — Basis-Styling
   (Sidebar überschreibt Position/Farben im .sidebar-Scope oben)
   ============================================================ */

/* --- Projekt-Switcher --- */

.proj-switcher,
.account-menu-wrap {
    position: relative;
}

.proj-switcher-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 220px;
    padding: 6px 12px;
    background: var(--surface);
    color: var(--brand-navy-deep);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: var(--elevation-1);
    transition: box-shadow var(--transition), border-color var(--transition), transform var(--transition);
}

.proj-switcher-trigger:hover {
    border-color: var(--border-hover);
    box-shadow: var(--elevation-2);
    transform: translateY(-1px);
}

.proj-switcher-icon {
    font-size: 10px;
    color: var(--brand-primary);
}

.proj-switcher-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.proj-switcher-caret {
    font-size: 10px;
    color: var(--text-muted);
}

.proj-switcher-trigger[aria-expanded="true"] .proj-switcher-caret {
    transform: rotate(180deg);
}

/* --- Account-Trigger (Avatar) --- */

.account-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    cursor: pointer;
    box-shadow: var(--elevation-1);
    transition: box-shadow var(--transition), border-color var(--transition), transform var(--transition);
}

.account-trigger:hover {
    border-color: var(--border-hover);
    box-shadow: var(--elevation-2);
    transform: translateY(-1px);
}

.account-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: var(--radius-pill);
    background: var(--gradient-brand);
    color: var(--text-on-primary);
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
}

/* --- Dropdown-Menüs (Switcher + Account teilen das Panel-Styling) --- */

.proj-switcher-menu,
.account-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 240px;
    padding: 8px;
    background: var(--glass-surface-soft);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--elevation-3), var(--glass-border-inner);
    z-index: 200;
}

.proj-switcher-menu[hidden],
.account-menu[hidden] {
    display: none;
}

.menu-label {
    margin: 4px 8px 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.account-email {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 600;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.proj-list {
    list-style: none;
    margin: 0 0 6px;
    padding: 0;
    max-height: 280px;
    overflow-y: auto;
}

.proj-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 8px 10px;
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    text-align: left;
    cursor: pointer;
    transition: background var(--transition);
}

.proj-item:hover {
    background: var(--surface-hover);
}

.proj-item.is-active {
    color: var(--brand-primary);
    cursor: default;
}

.proj-item-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.proj-item-check {
    flex-shrink: 0;
    color: var(--brand-primary);
    font-weight: 800;
}

.new-proj-form {
    display: flex;
    gap: 6px;
    padding: 6px 4px;
    border-top: 1px solid var(--border);
}

.new-proj-input {
    flex: 1;
    padding: 7px 10px;
    font-size: 13px;
}

.new-proj-submit {
    flex-shrink: 0;
    padding: 7px 12px;
    text-transform: none;
}

.menu-link {
    display: block;
    width: 100%;
    margin-top: 4px;
    padding: 9px 10px;
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
}

.menu-link:hover {
    background: var(--surface-hover);
    color: var(--brand-navy-deep);
}

.menu-link-danger {
    color: var(--error);
}

.menu-link-danger:hover {
    background: var(--error-soft);
    color: var(--error);
}

/* ============================================================
   ACCOUNT-SEITE — Profil, Passwort, Projekte
   ============================================================ */

.account-section + .account-section {
    margin-top: 16px;
}

.account-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 420px;
}

.account-form .form-row {
    margin-bottom: 0;
}

.account-form .btn-generate {
    align-self: flex-start;
}

.project-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
}

.project-row:last-child {
    border-bottom: none;
}

.project-row .form-input {
    flex: 1;
    min-width: 0;
}

.project-row-active {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--brand-primary);
}

.project-row-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.account-new-proj {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 20px;
    max-width: 420px;
}

.account-new-proj .form-input {
    flex: 1;
    min-width: 0;
}

.account-new-proj .btn-generate {
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .project-row {
        flex-wrap: wrap;
    }

    .project-row .form-input {
        flex-basis: 100%;
    }
}


/* ─────────────────────────────────────────────────────────────────────────
   Stilprofile (M007)
   ───────────────────────────────────────────────────────────────────────── */

/* Generator-Dropdown „Stilprofil" — fügt sich in die Control-Split-Row ein,
   nur Bestands-Tokens, kein neuer Design-Token. */
.control-select {
    font-family: var(--font-family-base);
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 8px 30px 8px 12px;
    max-width: 260px;
    cursor: pointer;
    transition: var(--transition);
    box-shadow: var(--elevation-1);
    appearance: none;
    -webkit-appearance: none;
    /* Caret aus dem Brand-Gradient-freien Inline-SVG — neutral, token-konform. */
    background-image: linear-gradient(45deg, transparent 50%, var(--text-secondary) 50%),
                      linear-gradient(135deg, var(--text-secondary) 50%, transparent 50%);
    background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}

.control-select:hover {
    border-color: var(--border-hover);
}

.control-select:focus-visible {
    outline: none;
    border-color: var(--brand-primary);
    box-shadow: var(--glow-brand-soft), var(--elevation-1);
}

/* Inspiration-Steuerung (Komposition-Referenz): Dropdown + Thumbnail-Preview
   + „Prompt aus Vorlage übernehmen" stapeln vertikal unter dem Label. */
.inspiration-control {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.inspiration-preview {
    margin: 0;
    width: 96px;
    height: 96px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--elevation-1);
    background: var(--surface-alt);
}

.inspiration-preview[hidden] {
    display: none;
}

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

.inspiration-apply-btn[hidden] {
    display: none;
}

/* --- Verwaltungsseite --- */
.style-create-section,
.style-list-section {
    margin-top: 24px;
}

.style-section-title {
    margin: 0 0 4px;
    font-size: 18px;
    font-weight: 800;
    color: var(--brand-primary);
    text-transform: uppercase;
}

.style-section-sub {
    margin: 0 0 18px;
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
}

.style-create-form {
    background: var(--glass-surface-soft);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: 24px 28px;
    box-shadow: var(--elevation-2), var(--glass-border-inner);
}

.style-dropzone {
    border: 1px dashed var(--border-hover);
    border-radius: var(--radius-md);
    padding: 24px 16px;
    text-align: center;
    background: var(--glass-surface-soft);
    box-shadow: var(--glass-border-inner);
    cursor: pointer;
    transition: var(--transition);
}

.style-dropzone:hover,
.style-dropzone:focus-visible {
    background: var(--glass-surface);
    border-color: var(--brand-primary);
    outline: none;
}

.style-dropzone.is-dragover {
    background: var(--glass-surface);
    border-color: var(--brand-primary);
    box-shadow: var(--glow-brand-soft), var(--glass-border-inner);
}

.style-dropzone-title {
    margin: 0 0 4px;
    font-size: 14px;
    font-weight: 700;
    color: var(--brand-primary);
}

.style-dropzone-hint {
    margin: 0;
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.5;
}

.style-preview-tiles {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}

.style-preview-tile {
    position: relative;
    width: 84px;
    height: 84px;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--border);
    box-shadow: var(--elevation-1);
}

.style-preview-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.style-preview-remove {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 22px;
    height: 22px;
    border: none;
    border-radius: var(--radius-pill);
    background: var(--backdrop-color);
    color: var(--text-on-dark);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.style-preview-remove:hover {
    background: var(--error);
    color: var(--error-on);
}

.style-create-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 18px;
}

.style-create-hint {
    font-size: 12px;
    color: var(--text-muted);
}

.style-list-loading,
.style-list-empty {
    font-size: 14px;
    color: var(--text-secondary);
}

.style-profile-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.style-profile-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 20px 24px;
    box-shadow: var(--elevation-1);
}

.style-card-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}

.style-card-name {
    margin: 0;
    font-size: 17px;
    font-weight: 800;
    color: var(--text-primary);
}

.style-card-summary {
    margin: 4px 0 0;
    font-size: 13px;
    color: var(--text-secondary);
}

.style-card-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.style-card-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

.style-card-thumb {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
}

.style-card-swatches {
    display: flex;
    gap: 6px;
    margin-top: 14px;
}

.style-swatch {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    box-shadow: var(--glass-border-inner);
}

.style-card-details {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.style-detail-row {
    display: flex;
    gap: 10px;
    font-size: 13px;
    line-height: 1.5;
}

.style-detail-label {
    flex: 0 0 96px;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.04em;
    padding-top: 1px;
}

.style-detail-value {
    flex: 1 1 auto;
    color: var(--text-primary);
}

@media (max-width: 640px) {
    .style-create-form {
        padding: 18px 16px;
    }
    .style-detail-row {
        flex-direction: column;
        gap: 2px;
    }
    .style-detail-label {
        flex-basis: auto;
    }
}

/* ============================================================
   Shop-Import-Wizard (Produktimport · Milestone 4)
   Mehrschritt-Modal: URL → Auswahl → Marke → Fortschritt.
   Token-basiert (keine Hex/Tailwind/Glow).
   ============================================================ */

/* Onboarding-CTA im leeren Katalog */
.products-empty-cta {
    margin: 24px auto;
    max-width: 520px;
    padding: 40px 32px;
    text-align: center;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--elevation-1);
}

.products-empty-cta-title {
    margin: 0 0 8px;
    font-family: var(--font-family-display);
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
}

.products-empty-cta-text {
    margin: 0 auto 20px;
    max-width: 420px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-secondary);
}

.products-empty-cta-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

/* Breiteres Panel für das Treffer-Grid */
.modal-panel-shop-import {
    max-width: 720px;
}

.shop-import-indicator {
    grid-column: 1;
    justify-self: start;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
}

/* Schritt 2: Auswahl */
.shop-import-toolbar {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 12px;
}

.shop-import-filter {
    flex: 1;
}

.shop-import-count {
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
}

.shop-import-cap-hint {
    margin: 0 0 10px;
    padding: 8px 12px;
    background: var(--warning-soft);
    color: var(--warning);
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 600;
}

.shop-import-results {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    max-height: 44vh;
    overflow: auto;
    padding: 2px;
}

.shop-import-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: border-color var(--transition), box-shadow var(--transition);
}

.shop-import-item:hover {
    border-color: var(--border-hover);
    box-shadow: var(--elevation-1);
}

.shop-import-item.is-imported {
    opacity: 0.6;
    cursor: default;
}

.shop-import-item-check {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    accent-color: var(--brand-accent);
    cursor: pointer;
}

.shop-import-item-thumb {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-paper);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.shop-import-item-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.shop-import-item-thumb.is-broken::after {
    content: "–";
    color: var(--text-muted);
    font-weight: 700;
}

.shop-import-item-body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.shop-import-item-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.shop-import-item-url {
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.shop-import-item-badge {
    margin-top: 2px;
    align-self: flex-start;
    padding: 1px 8px;
    background: var(--surface-alt);
    color: var(--text-secondary);
    border-radius: var(--radius-pill);
    font-size: 10px;
    font-weight: 700;
}

.shop-import-empty {
    margin: 16px 0;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 600;
}

/* Anreicherungs-/Marke-Checkbox-Zeile */
.shop-import-enrich {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-top: 16px;
    padding: 12px 14px;
    background: var(--surface-paper);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    cursor: pointer;
}

.shop-import-enrich input[type="checkbox"] {
    margin-top: 2px;
    width: 18px;
    height: 18px;
    accent-color: var(--brand-accent);
    flex-shrink: 0;
    cursor: pointer;
}

.shop-import-enrich-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.shop-import-enrich-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
}

.shop-import-enrich-cost {
    color: var(--warning);
    font-weight: 600;
}

.shop-import-enrich-hint {
    font-size: 12px;
    line-height: 1.45;
    color: var(--text-muted);
}

/* Schritt 3: Marke */
.shop-import-brand-toggle {
    margin-top: 0;
    margin-bottom: 16px;
}

.shop-import-brand-note {
    margin: 0 0 16px;
    padding: 8px 12px;
    background: var(--warning-soft);
    color: var(--warning);
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 600;
}

.shop-import-brand {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    flex-wrap: wrap;
}

.shop-import-brand.is-disabled {
    opacity: 0.5;
    pointer-events: none;
}

.shop-import-logo {
    flex: 0 0 140px;
    width: 140px;
    height: 140px;
}

.shop-import-logo-empty {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
}

.shop-import-colors {
    flex: 1 1 280px;
    min-width: 240px;
}

/* Schritt 4: Fortschritt */
.shop-import-progress {
    padding: 12px 0;
}

.shop-import-progress-track {
    width: 100%;
    height: 8px;
    background: var(--surface-alt);
    border-radius: var(--radius-pill);
    overflow: hidden;
}

.shop-import-progress-fill {
    height: 100%;
    width: 0;
    background: var(--gradient-progress);
    border-radius: var(--radius-pill);
    transition: width 300ms var(--ease-standard);
}

.shop-import-progress-label {
    margin: 12px 0 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    text-align: center;
}

.shop-import-summary {
    margin-top: 16px;
    padding: 16px;
    background: var(--surface-paper);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}

.shop-import-summary-list {
    margin: 0;
    padding-left: 18px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
    color: var(--text-secondary);
}

.shop-import-summary-error {
    margin: 0;
    color: var(--error);
    font-size: 13px;
    font-weight: 600;
}

@media (max-width: 640px) {
    .shop-import-results {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   ONBOARDING — Vollbild-Einrichtung (Shop-Import inline)
   Schlanke Standalone-Seite für leere Projekte. Bühne = derselbe
   Wizard wie im /products-Modal, nur ohne Modal-Hülle.
   ============================================================ */
.onboarding-body {
    padding-top: 0;
}

.onboarding-topbar {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 28px;
}

.onboarding-brand .brand-wordmark {
    font-size: 24px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--brand-primary);
}

.onboarding-topbar-actions {
    display: flex;
    align-items: center;
    gap: 20px;
}

.onboarding-account-link {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
}

.onboarding-account-link:hover {
    color: var(--brand-primary);
}

.onboarding-continue {
    font-size: 13px;
    font-weight: 600;
    color: var(--brand-primary);
    transition: opacity var(--transition), color var(--transition);
}

.onboarding-continue.is-disabled {
    color: var(--text-muted);
    opacity: 0.45;
    pointer-events: none;
}

.onboarding-main {
    position: relative;
    z-index: 1;
    min-height: calc(100vh - 76px);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 24px 20px 64px;
}

.onboarding-card {
    width: 100%;
    max-width: 760px;
    padding: 40px 40px 32px;
}

.onboarding-intro {
    text-align: center;
    margin-bottom: 28px;
}

.onboarding-title {
    margin: 0 0 10px;
    font-family: var(--font-family-display);
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--brand-navy-deep);
}

.onboarding-subtitle {
    max-width: 540px;
    margin: 0 auto;
    font-size: 15px;
    line-height: 1.6;
    color: var(--text-secondary);
}

.onboarding-indicator {
    display: block;
    margin-bottom: 16px;
}

.onboarding-foot {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
}

.onboarding-foot[data-step-foot="url"] .btn-generate {
    width: 100%;
    justify-content: center;
}

@media (max-width: 640px) {
    .onboarding-card {
        padding: 28px 22px 24px;
    }

    .onboarding-title {
        font-size: 25px;
    }
}