/* ==============================================
   AI Videocreator — Bavaria Entertainment
   Tool-spezifische Styles über Pico CSS + Tinte (Bavaria Design System)

   Design-System: Tinte (BENT-1229). Palette, Pico-Overrides und die
   Dark-/Light-Tokens (--t-*) liefert die kanonische static/css/bavaria-theme.css
   aus dem tinte-Repo. Kanonische Komponenten (Header, Footer, Tabs, Cards,
   Buttons, Drop-Zone, Flash-Messages, Page-Stage, Upload-CTA, Prose etc.)
   kommen jetzt aus static/css/tinte-base.css (BENT-1411, geladen vor dieser
   Datei). Hier nur noch wirklich tool-spezifische Ergänzungen, die das
   gemeinsame Design-System nicht kennt.
   ============================================== */


/* ========================================
   EMPTY-STATE-BOX
   (z. B. neue Nutzer:innen ohne freigeschaltetes Projekt)
   ======================================== */

.empty-state {
    text-align: center;
    padding: 2.5rem 1.5rem;
}

.empty-state__title {
    margin: 0 0 0.75rem;
}

.empty-state__body {
    color: var(--be-text-muted);
    max-width: 46ch;
    margin: 0 auto 0.75rem;
    line-height: 1.6;
}

.empty-state__body strong {
    color: var(--t-text, inherit);
}

.empty-state__contact {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.5rem;
}


/* ========================================
   TRAFFIC-LIGHT BADGES (für Statusanzeigen)
   Nicht in tinte-base; tool-eigene Utility-Klassen.
   ======================================== */

.badge-green,
.badge-yellow,
.badge-red {
    display: inline-block;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.badge-green {
    background-color: var(--be-badge-green-bg);
    color: var(--be-badge-green);
    border: 1px solid var(--be-badge-green);
}

.badge-yellow {
    background-color: var(--be-badge-yellow-bg);
    color: var(--be-badge-yellow);
    border: 1px solid var(--be-badge-yellow);
}

.badge-red {
    background-color: var(--be-badge-red-bg);
    color: var(--be-badge-red);
    border: 1px solid var(--be-badge-red);
}


/* =====================================================
   UPLOAD-GRID (Upload-Page — Schritt 2)
   Hero + Drop-Zone · zweispaltig
   ===================================================== */

.upload-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 32px;
    align-items: start;
}

@media (max-width: 960px) {
    .upload-grid { grid-template-columns: 1fr; gap: 24px; }
}

/* Hero-Spalte (links) */
.upload-hero-col {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.upload-headline {
    font-size: clamp(28px, 4vw, 44px);
    font-weight: 500;
    line-height: 1.05;
    margin: 8px 0 4px;
}

.upload-sub {
    font-size: 15px;
    line-height: 1.55;
    color: var(--t-ink-soft);
    max-width: 520px;
    margin: 0 0 14px;
}


/* =====================================================
   TIPP-ZEILE (Hinweis-Label unter Settings-Feldern)
   ===================================================== */

.tipp-line {
    font-size: 13px;
    color: var(--t-ink-soft);
    line-height: 1.55;
    margin: 6px 0 0;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}
.tipp-line__icon {
    color: var(--t-teal-hi);
    flex-shrink: 0;
    margin-top: 1px;
}
.tipp-line strong { color: var(--t-ink); font-weight: 600; }


/* =====================================================
   UPLOAD-META / -PROGRESS / -STATUS
   (Fortschritts-Anzeige während Datei-Upload)
   ===================================================== */

/* Prompt-Optimizer-Button mit Abstand nach unten (quick.html) */
.optimize-btn-gap {
    margin-bottom: 1rem;
}

/* Admin-Login-Card zentriert und begrenzt (admin.html) */
.admin-login-card {
    max-width: 480px;
    margin: 2rem auto;
}

.upload-meta {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 11px;
    color: var(--t-muted);
}

.upload-progress {
    width: 100%;
    height: 4px;
    margin-top: 8px;
    border: 0;
    border-radius: 999px;
    background: var(--t-hairline);
    accent-color: var(--t-teal-hi);
}
.upload-progress::-webkit-progress-bar { background: var(--t-hairline); border-radius: 999px; }
.upload-progress::-webkit-progress-value { background: var(--t-teal-hi); border-radius: 999px; }

.upload-status {
    font-size: 12px;
    color: var(--t-ink-soft);
    margin: 8px 0 0;
}


/* =====================================================
   LOGIN-PAGE (Direction A)
   ===================================================== */

.login-body {
    background: var(--t-bg);
    color: var(--t-ink);
    font-family: var(--f-sans);
    min-height: 100vh;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px;
}
.login-frame {
    width: 100%;
    max-width: 440px;
    display: flex;
    flex-direction: column;
    gap: 28px;
}
.login-brand {
    display: flex;
    align-items: center;
    gap: 14px;
}
.login-wordmark {
    font-family: var(--f-serif);
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1;
    color: var(--t-ink);
    margin-bottom: 4px;
    text-transform: none;
}
.login-card {
    background: var(--t-card);
    border: 1px solid var(--t-rule);
    border-radius: 12px;
    padding: 32px;
    margin: 0;
}
.login-headline {
    font-size: 32px;
    line-height: 1.1;
    margin: 0 0 8px;
    font-weight: 500;
    text-transform: none;
}
.login-sub {
    font-size: 14px;
    color: var(--t-ink-soft);
    line-height: 1.55;
    margin: 0 0 20px;
}
/* Letzter Login-Sub-Paragraph braucht keinen unteren Abstand */
.login-sub:last-child,
.login-sub--no-bottom {
    margin-bottom: 0;
}
.login-error {
    background: var(--t-red-tint);
    color: var(--t-red);
    border-left: 3px solid var(--t-red);
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 13px;
    margin-bottom: 12px;
}
.login-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.login-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--t-ink);
    letter-spacing: -0.005em;
    margin: 4px 0 -2px;
}
.login-form input[type="password"] {
    padding: 10px 14px;
    border: 1px solid var(--t-rule);
    border-radius: 8px;
    font-family: var(--f-sans);
    font-size: 14px;
    background: var(--t-card);
    color: var(--t-ink);
    margin-bottom: 8px;
}
.login-form input[type="password"]:focus {
    border-color: var(--t-teal-hi);
    outline: none;
}
.login-cta {
    width: 100%;
    background: var(--t-teal);
    border: 1px solid var(--t-teal);
    color: #fff;
    font-family: var(--f-sans);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.005em;
    padding: 12px 16px;
    border-radius: 8px;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}
.login-cta:hover { background: var(--t-teal-dark); border-color: var(--t-teal-dark); }
.login-footer {
    display: flex;
    justify-content: center;
    gap: 12px;
    font-size: 11px;
    color: var(--t-muted);
}
.login-footer a {
    color: var(--t-muted);
    text-decoration: none;
}
.login-footer a:hover { color: var(--t-teal); }


/* =====================================================
   PROCESSING-PAGE (Direction A — Schritt 3)
   ===================================================== */

.processing-wrap {
    max-width: 880px;
    margin: 0 auto;
    padding: 24px 0 56px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.processing-headline {
    font-size: clamp(28px, 4vw, 40px);
    margin: 4px 0;
    font-weight: 500;
    line-height: 1.05;
}

.processing-sub {
    color: var(--t-ink-soft);
    font-size: 15px;
    line-height: 1.55;
    max-width: 680px;
    margin: 0 0 12px;
    text-wrap: pretty;
}

.processing-card {
    background: var(--t-card);
    border: 1px solid var(--t-rule);
    border-radius: 12px;
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin: 8px 0 0;
}

.processing-file {
    display: grid;
    grid-template-columns: 44px 1fr auto;
    gap: 14px;
    align-items: center;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--t-hairline);
}
.processing-file__icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: var(--t-teal-tint);
    color: var(--t-teal);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.processing-file__text { min-width: 0; }
.processing-file__name {
    font-family: var(--f-serif);
    font-size: 16px;
    font-weight: 500;
    color: var(--t-ink);
    text-transform: none;
    letter-spacing: -0.005em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.processing-file__meta {
    font-size: 11px;
    color: var(--t-muted);
    margin-top: 2px;
}
.processing-cancel {
    background: transparent;
    border: 1px solid var(--t-rule);
    color: var(--t-ink-soft);
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 12px;
    font-family: var(--f-sans);
    cursor: pointer;
    transition: border-color .15s, color .15s, background .15s;
}
.processing-cancel:hover {
    border-color: var(--t-red);
    color: var(--t-red);
    background: var(--t-red-tint);
}
.processing-cancel:disabled { opacity: 0.5; cursor: not-allowed; }

.processing-progress {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-top: 2px;
}
.processing-progress__pct {
    font-family: var(--f-serif);
    font-size: 32px;
    font-weight: 500;
    line-height: 1;
    color: var(--t-ink);
    font-variant-numeric: tabular-nums;
    text-transform: none;
}
.processing-progress__phase {
    color: var(--t-teal-hi);
    font-size: 14px;
    font-weight: 500;
    text-align: right;
}

.processing-bar {
    width: 100%;
    height: 6px;
    border-radius: 999px;
    background: var(--t-hairline);
    border: 0;
    appearance: none;
    accent-color: var(--t-teal-hi);
    margin: 0;
}
.processing-bar::-webkit-progress-bar { background: var(--t-hairline); border-radius: 999px; }
.processing-bar::-webkit-progress-value { background: var(--t-teal-hi); border-radius: 999px; }
.processing-bar::-moz-progress-bar { background: var(--t-teal-hi); border-radius: 999px; }

.processing-detail {
    font-size: 12px;
    color: var(--t-ink-soft);
    font-style: italic;
    margin: 0;
}

.processing-history__eyebrow { margin-top: 6px; }
.processing-history {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.processing-history__row {
    display: grid;
    grid-template-columns: 14px 70px 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 6px 8px;
    border-radius: 4px;
    font-family: var(--f-mono);
    font-size: 11px;
    transition: background .15s ease;
}
.processing-history__row.is-current { background: var(--t-teal-tint); }
.processing-history__marker {
    font-size: 14px;
    line-height: 1;
    color: var(--t-faint);
    text-align: center;
}
.processing-history__row.is-done .processing-history__marker { color: var(--t-green); }
.processing-history__row.is-current .processing-history__marker { color: var(--t-teal-hi); }
.processing-history__name { color: var(--t-faint); }
.processing-history__row.is-done .processing-history__name { color: var(--t-ink-soft); }
.processing-history__row.is-current .processing-history__name { color: var(--t-teal-hi); font-weight: 600; }
.processing-history__label {
    font-family: var(--f-sans);
    font-size: 12px;
    color: var(--t-muted);
}
.processing-history__row.is-done .processing-history__label { color: var(--t-ink); }
.processing-history__row.is-current .processing-history__label { color: var(--t-ink); font-weight: 500; }
.processing-history__status {
    color: var(--t-faint);
    font-variant-numeric: tabular-nums;
    text-align: right;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.processing-history__row.is-done .processing-history__status { color: var(--t-green); }
.processing-history__row.is-current .processing-history__status { color: var(--t-teal-hi); }

.processing-foot {
    font-size: 12px;
    color: var(--t-muted);
    text-align: center;
    margin: 4px 0 0;
}


/* =====================================================
   PAGE-STAGE — Ergänzungen (tool-spezifisch)
   Kanonische .page-stage etc. kommt aus tinte-base.css.
   ===================================================== */

/* Verlauf-Section nach Formular (quick.html) */
.page-stage__hero--spaced {
    margin-top: 3rem;
}


/* =====================================================
   OPTIONAL-DETAILS (aufklappbare Detail-Sektion)
   Nicht in tinte-base; tool-eigene Komponente.
   ===================================================== */

.optional-details {
    border: 1px solid var(--t-rule);
    border-radius: 10px;
    padding: 12px 16px;
    background: var(--t-card);
}
.optional-details summary {
    cursor: pointer;
    font-size: 13px;
    color: var(--t-ink-soft);
    font-weight: 500;
    list-style: none;
    padding: 4px 0;
}
.optional-details summary::-webkit-details-marker { display: none; }
.optional-details summary::before {
    content: "▸";
    color: var(--t-muted);
    margin-right: 8px;
    display: inline-block;
    transition: transform .15s ease;
}
.optional-details[open] summary::before { transform: rotate(90deg); }
.optional-details__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    padding-top: 10px;
}
.optional-details__grid label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    color: var(--t-ink);
}


/* =====================================================
   ====  AI VIDEOCREATOR — APP-SPEZIFISCHE KOMPONENTEN  ====
   Direction-A-Idiom, ausschließlich --t-*-Tokens.
   ===================================================== */

/* Pico-sicheres Ausblenden (von editor.js / quick.html getoggelt) */
.hidden { display: none !important; }

.center { text-align: center; }
.muted { color: var(--t-muted); }
.inline-form,
.d-inline { display: inline; margin: 0; }
.btn-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* --- Sub-Nav / Breadcrumb (ersetzt Pico-Breadcrumb) --- */
.site-subnav {
    max-width: 1400px;
    margin: 0 auto;
    padding: 12px 32px 0;
}
.breadcrumb ol {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0;
    margin: 0;
    font-size: 12px;
}
.breadcrumb li {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--t-muted);
}
.breadcrumb li + li::before {
    content: "/";
    color: var(--t-faint);
}
.breadcrumb a {
    color: var(--t-muted);
    text-decoration: none;
    transition: color .15s ease;
}
.breadcrumb a:hover { color: var(--t-teal); }
.breadcrumb li[aria-current="page"] {
    color: var(--t-ink);
    font-weight: 600;
}
@media (max-width: 640px) {
    .site-subnav { padding: 12px 18px 0; }
}

/* --- Wizard-Stepper ({% block wizard %}) --- */
.wizard-wrap {
    background: var(--t-card);
    border-bottom: 1px solid var(--t-rule);
}
ol.wizard-stepper {
    max-width: 1400px;
    margin: 0 auto;
    padding: 16px 32px;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0;
    counter-reset: wstep;
}
ol.wizard-stepper li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 500;
    color: var(--t-muted);
    white-space: nowrap;
}
ol.wizard-stepper li::before {
    counter-increment: wstep;
    content: counter(wstep);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid var(--t-rule);
    background: var(--t-card);
    color: var(--t-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--f-mono);
    font-size: 12px;
    font-weight: 600;
    flex-shrink: 0;
}
ol.wizard-stepper li:not(:last-child)::after {
    content: "";
    width: clamp(20px, 6vw, 80px);
    height: 1px;
    background: var(--t-rule);
    margin: 0 16px;
}
ol.wizard-stepper li.active {
    color: var(--t-ink);
    font-weight: 600;
}
ol.wizard-stepper li.active::before {
    background: var(--t-teal);
    border-color: var(--t-teal);
    color: #fff;
}
ol.wizard-stepper li.completed {
    color: var(--t-ink-soft);
}
ol.wizard-stepper li.completed::before {
    content: "✓";
    background: var(--t-teal-hi);
    border-color: var(--t-teal-hi);
    color: #fff;
}
@media (max-width: 760px) {
    ol.wizard-stepper { padding: 14px 18px; overflow-x: auto; }
    ol.wizard-stepper li:not(:last-child)::after { margin: 0 8px; }
}

/* --- Status-Badge-Pills --- */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--f-sans);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid transparent;
    white-space: nowrap;
}
.status-badge::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}
.status-uploaded,
.status-pending {
    background: var(--t-teal-hi-tint);
    color: var(--t-teal-hi);
    border-color: var(--t-teal-hi-tint);
}
.status-parsing,
.status-editing,
.status-generating {
    background: var(--t-amber-tint);
    color: var(--t-amber);
    border-color: rgba(184, 116, 42, 0.25);
}
.status-done {
    background: var(--t-green-tint);
    color: var(--t-green);
    border-color: rgba(46, 125, 50, 0.2);
}
.status-error,
.status-cancelled {
    background: var(--t-red-tint);
    color: var(--t-red);
    border-color: rgba(162, 58, 44, 0.2);
}

/* --- Projekt-Liste / -Karten --- */
.project-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 18px;
    margin: 18px 0 28px;
}
.project-card {
    background: var(--t-card);
    border: 1px solid var(--t-rule);
    border-radius: 12px;
    padding: 20px 22px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    box-shadow: none;
    margin: 0;
}
.project-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.project-card-header strong {
    font-family: var(--f-serif);
    font-size: 18px;
    font-weight: 600;
    color: var(--t-ink);
    letter-spacing: -0.005em;
    text-transform: none;
}
.project-card-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 4px;
}
.project-card--active {
    border-color: var(--t-teal);
    box-shadow: 0 0 0 2px var(--t-teal-tint);
}

/* Konto-Bereich (aufklappbar, projects.html) */
.account-section {
    border: 1px solid var(--t-rule);
    border-radius: 10px;
    padding: 12px 16px;
    background: var(--t-card);
    margin-top: 32px;
}
.account-section summary {
    cursor: pointer;
    font-size: 13px;
    color: var(--t-ink-soft);
    font-weight: 500;
    list-style: none;
    padding: 4px 0;
}
.account-section summary::-webkit-details-marker { display: none; }
.account-section summary::before {
    content: "▸";
    color: var(--t-muted);
    margin-right: 8px;
    display: inline-block;
    transition: transform .15s ease;
}
.account-section[open] summary::before { transform: rotate(90deg); }
.account-section[open] { padding-bottom: 18px; }

/* --- Drop-Zone (dropzone.js: .dropzone / .dropzone-active / -preview / -item / -remove / -count) --- */
.dropzone {
    border: 1.5px dashed var(--t-teal-soft);
    border-radius: 12px;
    padding: 32px 24px;
    background: var(--t-card);
    text-align: center;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}
.dropzone:hover,
.dropzone:focus-visible,
.dropzone.dropzone-active {
    border-color: var(--t-teal-hi);
    background: var(--t-teal-hi-tint);
    outline: none;
}
.dropzone-text {
    font-family: var(--f-serif);
    font-size: 16px;
    font-weight: 500;
    color: var(--t-ink);
    letter-spacing: -0.01em;
}
.dropzone-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}
.dropzone-item {
    position: relative;
    width: 84px;
    height: 84px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--t-rule);
}
.dropzone-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.dropzone-remove {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 0;
    background: rgba(15, 29, 34, 0.7);
    color: #fff;
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.dropzone-remove:hover { background: var(--t-red); }
.dropzone-count {
    display: block;
    width: 100%;
    margin-top: 6px;
    font-size: 11px;
    color: var(--t-muted);
    font-family: var(--f-mono);
}

/* --- Bild-Galerie / Auswahl-Thumbnails --- */
.image-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 12px 0;
}
.thumb {
    width: 96px;
    height: 96px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--t-rule);
}
.image-assign { margin: 14px 0; }
.image-option {
    position: relative;
    display: inline-flex;
    cursor: pointer;
}
.image-option input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.thumb-select {
    width: 88px;
    height: 88px;
    object-fit: cover;
    border-radius: 8px;
    border: 2px solid var(--t-rule);
    transition: border-color .12s ease, box-shadow .12s ease;
}
.image-option input:checked + .thumb-select {
    border-color: var(--t-teal-hi);
    box-shadow: 0 0 0 3px var(--t-teal-hi-tint);
}
.image-option:focus-within .thumb-select {
    border-color: var(--t-teal-hi);
}

/* --- Szenen-Karten (editor.html / result.html) --- */
.scene-card {
    background: var(--t-card);
    border: 1px solid var(--t-rule);
    border-radius: 12px;
    padding: 22px 24px;
    margin: 0 0 18px;
    box-shadow: none;
}
.scene-card > header {
    padding: 0;
    margin: 0 0 12px;
    border: 0;
}
.scene-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.scene-card-header strong,
.scene-card > header strong {
    font-family: var(--f-serif);
    font-size: 17px;
    font-weight: 600;
    color: var(--t-ink);
    letter-spacing: -0.01em;
    text-transform: none;
}

/* --- Video-Player / Aktionen --- */
video.scene-video,
.scene-video {
    width: 100%;
    max-width: 680px;
    border-radius: 10px;
    border: 1px solid var(--t-rule);
    background: #000;
    display: block;
    margin: 12px 0;
}
.video-variant { margin: 0 0 18px; }

/* --- Video-Galerie (BENT-1027) --- */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 18px;
    margin: 18px 0;
}
.gallery-card {
    background: var(--t-card);
    border: 1px solid var(--t-rule);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.gallery-thumb-link { display: block; }
.gallery-thumb {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
    background: #000;
}
.gallery-thumb--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--t-muted);
    font-size: 13px;
    background: var(--t-rule);
}
.gallery-card-body {
    padding: 14px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.gallery-card-title {
    font-family: var(--f-serif);
    font-size: 15px;
    font-weight: 600;
    color: var(--t-ink);
}
.gallery-card-prompt {
    font-size: 13px;
    color: var(--t-ink-soft);
    margin: 0;
    line-height: 1.4;
}

.scene-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    margin: 10px 0;
}
.status-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin: 0 0 18px;
    font-size: 14px;
    color: var(--t-ink-soft);
}
.status-summary progress {
    flex: 1;
    min-width: 160px;
    height: 6px;
    border: 0;
    border-radius: 999px;
    accent-color: var(--t-teal-hi);
}

/* --- Recent-Videos (quick.html) --- */
.recent-videos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 18px;
    margin-top: 18px;
}
.recent-video-card {
    background: var(--t-card);
    border: 1px solid var(--t-rule);
    border-radius: 12px;
    padding: 18px 20px;
}
.recent-video-card header {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 12px;
    padding: 0;
    border: 0;
}
.recent-video-card header strong {
    font-family: var(--f-serif);
    font-size: 15px;
    font-weight: 600;
    color: var(--t-ink);
    text-transform: none;
}
.recent-video-card small {
    color: var(--t-muted);
    font-size: 11px;
    font-family: var(--f-mono);
}
.ai-disclosure {
    align-self: flex-start;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--t-amber-tint);
    color: var(--t-amber);
    border: 1px solid rgba(184, 116, 42, 0.2);
    margin-top: 4px;
}

/* EU AI Act Art. 50 Hinweis-Banner über Formularen */
.ai-disclosure-banner {
    background: var(--t-amber-tint);
    border: 1px solid rgba(184, 116, 42, 0.25);
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 13px;
    color: var(--t-ink-soft);
    margin-bottom: 1.25rem;
    line-height: 1.45;
}
.ai-disclosure-banner strong {
    color: var(--t-amber);
    font-weight: 600;
}

/* --- Text-/Vorschau-Blöcke --- */
.script-preview {
    background: var(--t-bg);
    border: 1px solid var(--t-hairline);
    border-radius: 8px;
    padding: 14px 16px;
    font-family: var(--f-mono);
    font-size: 12px;
    line-height: 1.6;
    color: var(--t-ink-soft);
    white-space: pre-wrap;
    max-height: 360px;
    overflow: auto;
    margin: 10px 0 0;
}
.prompt-text {
    font-family: var(--f-serif);
    font-size: 15px;
    line-height: 1.55;
    color: var(--t-ink-soft);
    text-wrap: pretty;
}
.error-text {
    color: var(--t-red);
    font-size: 13px;
    font-family: var(--f-mono);
    word-break: break-word;
}

/* --- Daten-Tabelle (admin.html) — Direction-A --- */
.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    margin: 8px 0;
}
.data-table thead th {
    background: transparent;
    color: var(--t-muted);
    font-family: var(--f-sans);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-align: left;
    padding: 0 12px 10px;
    border-bottom: 1px solid var(--t-rule);
}
.data-table tbody td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--t-hairline);
    color: var(--t-ink);
}
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr:hover td { background: var(--t-bg); }
.data-table small { color: var(--t-muted); font-family: var(--f-mono); }

/* --- Kompakte Action-Buttons (admin.html) --- */
.small-btn {
    padding: 0.1rem 0.5rem;
    font-size: 0.8rem;
    width: auto;
}
.btn-danger-compact {
    color: var(--t-red, #a23a2c);
    border-color: var(--t-red, #a23a2c);
}
.btn-danger-compact:hover,
.btn-danger-compact:focus {
    background: var(--t-red-tint, #fbeae8);
}

/* --- Formular-Button-Zeile (editor.html) --- */
.button-row {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 1rem;
}
.button-row > * {
    margin: 0;
    width: auto;
}

/* --- Szenen-Modus-Select (editor.html) --- */
.mode-select {
    font-size: 13px;
    padding: 0.3rem 0.5rem;
}

/* --- Logout-Formular (base.html, BENT-1543) ---
   /logout ist ein POST-Formular statt eines Links; Pico-Button-Defaults
   (volle Breite, eigene Box-Optik) zuruecksetzen, damit .logout-pill
   (tinte-base.css) weiterhin wie ein Pill-Link aussieht. */
.logout-form {
    display: inline-flex;
    margin: 0;
    width: auto;
}
.logout-form .logout-pill {
    width: auto;
    margin: 0;
    font: inherit;
    cursor: pointer;
}