/* ==============================================
   Transkriptor: Bavaria Entertainment
   Custom Styles über Pico CSS + Tinte (Bavaria Design System)

   Design-System: Tinte (BENT-1231). Palette, Pico-Overrides und die
   Dark-/Light-Tokens (--t-*) liefert die kanonische static/css/bavaria-theme.css
   aus dem tinte-Repo (NACH pico.min.css, VOR dieser Datei eingebunden),
   inklusive der offiziellen Bavaria-Film-Logofarben (#006680/#3D93AA).
   Hier nur noch die tool-spezifischen Zusatz-Tokens, die das gemeinsame
   Theme nicht kennt, plus alle App-Komponenten weiter unten.
   ----------------------------------------------
   @version 0.5.5
   Kanonische Komponenten-/Chrome-Schicht. Verteilung in die Tools NUR über
   tools/sync-theme.py (PR-Modus), nie lokal forken. Version = Stand aus
   CHANGELOG.md; der Stempel macht Drift maschinell erkennbar (sync-theme.py
   vergleicht ihn je Datei gegen die Tool-Kopien).
   ============================================== */

/* --- Tool-spezifische Zusatz-Tokens (vom gemeinsamen Theme NICHT geliefert) --- */
:root {
    /* JetBrains Mono fuer Timecodes/Char-Counter/Meta-Zeilen, tool-eigene Schrift */
    --f-mono: "JetBrains Mono", ui-monospace, monospace;

    /* Dunkleres Teal fuer Hover-/Active-Flaechen (deckt sich mit dem
       --pico-primary-hover des Theme im Light-Mode). */
    --t-teal-dark: #00566b;

    /* --- Legacy --be-*-Aliase auf die --t-*-Tokens des Tinte-Theme --- */
    --be-teal:          var(--t-teal);
    --be-teal-hover:    var(--t-teal-dark);
    --be-teal-focus:    var(--t-teal-hi-tint);
    --be-header-bg:     var(--t-card);
    --be-footer-bg:     var(--t-card);
    --be-card-bg:       var(--t-card);
    --be-card-border:   var(--t-rule);
    --be-body-bg:       var(--t-bg);
    --be-text:          var(--t-ink);
    --be-text-muted:    var(--t-muted);
    --be-badge-green:   var(--t-green);
    --be-badge-green-bg:var(--t-green-tint);
    --be-badge-yellow:  var(--t-amber);
    --be-badge-yellow-bg:var(--t-amber-tint);
    --be-badge-red:     var(--t-red);
    --be-badge-red-bg:  var(--t-red-tint);
    --be-radius:        8px;
}

/* Im Dunkelmodus folgt das Hover-Teal dem helleren Akzent (analog Theme). */
:root[data-theme="dark"] {
    --t-teal-dark: var(--t-teal-light);
}


/* ========================================
   HEADER: Sticky, Card-BG, zwei Reihen
   (Brand + Status/User + Logout · Tab-Bar)
   ======================================== */

.site-header {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--t-card);
    border-bottom: 1px solid var(--t-rule);
    padding: 0;
    margin-bottom: 0;
}

/* Inner-Container: full-bleed, eigenes 32px L/R Padding (Direction A).
   Optional max-width 1400px für sehr breite Screens. */
.site-header__inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 32px;
}

@media (max-width: 640px) {
    .site-header__inner { padding: 0 18px; }
}

/* Top-Row: Brand links + Status/User/Logout rechts */
.site-header__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 18px 0 0;
    flex-wrap: wrap;
}

/* page-main entkoppelt vom Pico-.container (das hat zu wenig Padding
   und eine zu enge max-width). Direction-A-Page erlaubt 1400 Breite. */
.page-main {
    max-width: 1400px;
    margin: 0 auto;
    padding: 24px 32px 60px;
}

@media (max-width: 640px) {
    .page-main { padding: 18px 18px 40px; }
}

.brand-link {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    color: var(--t-ink);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    text-align: left;
    transition: color .15s ease;
}

.brand-link:hover,
.brand-link:focus-visible {
    text-decoration: none;
    color: var(--t-ink);
}

.brand-mark {
    display: inline-flex;
    flex-shrink: 0;
}

.brand-mark__svg {
    display: block;
}

.brand-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.brand-title {
    font-family: var(--f-serif);
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1;
    color: var(--t-ink);
    text-transform: none;
    white-space: nowrap;
    margin: 0;
}

.brand-link:hover .brand-title,
.brand-link:focus-visible .brand-title {
    color: var(--t-teal);
}

/* Right side: Status-Pill · User · Logout */
.site-header__user {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    color: var(--t-muted);
    font-size: 13px;
    flex-wrap: wrap;
}

.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.status-dot {
    width: 6px;
    height: 6px;
    border-radius: 3px;
    background: var(--t-green);
}

.user-divider {
    color: var(--t-faint);
}

.user-name {
    color: var(--t-muted);
}

.logout-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: 1px solid var(--t-rule);
    color: var(--t-ink-soft);
    font-size: 12px;
    letter-spacing: 0.04em;
    padding: 6px 12px;
    border-radius: 999px;
    text-decoration: none;
    transition: border-color .15s, color .15s, background .15s;
}

.logout-pill:hover,
.logout-pill:focus-visible {
    border-color: var(--t-ink-soft);
    color: var(--t-ink);
    background: var(--t-bg);
    text-decoration: none;
}


/* ========================================
   FOOTER: Mark · Versions-Info · Links
   ======================================== */

.site-footer {
    background-color: var(--t-card);
    color: var(--t-muted);
    margin-top: 3rem;
    padding: 20px 0;
    border-top: 1px solid var(--t-rule);
    font-size: 11px;
}

.site-footer__inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 32px;
}

@media (max-width: 640px) {
    .site-footer__inner { padding: 0 18px; }
}

.footer-content {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.footer-brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--t-muted);
}

.footer-name {
    color: var(--t-ink-soft);
    font-weight: 500;
    font-size: 11px;
}

.footer-version {
    color: var(--t-faint);
}

.footer-links {
    display: flex;
    gap: 1.25rem;
}

.footer-links a {
    color: var(--t-muted);
    text-decoration: none;
    transition: color .15s ease;
}

.footer-links a:hover,
.footer-links a:focus-visible {
    color: var(--t-teal);
    text-decoration: none;
}

.footer-copy small {
    color: var(--t-faint);
    font-size: 11px;
}

@media (max-width: 576px) {
    .footer-content {
        flex-direction: column;
        text-align: center;
    }
}


/* ========================================
   ALLGEMEIN / TYPOGRAFIE
   ======================================== */

body {
    background-color: var(--t-bg);
    color: var(--t-ink);
    font-family: var(--f-sans);
}

h1, h2, h3 {
    color: var(--t-ink);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

h1 {
    font-size: 1.75rem;
    font-weight: 800;
}

h2 {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

h3 {
    font-size: 1rem;
    font-weight: 700;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
}

/* Display-Headlines (Direction A): kommen mit Step 3+ in Templates rein */
.display {
    font-family: var(--f-serif);
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1.1;
    text-transform: none;
    color: var(--t-ink);
}

.display em {
    color: var(--t-teal-hi);
    font-style: italic;
}

.eyebrow {
    font-family: var(--f-sans);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--t-muted);
    line-height: 1;
}

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


/* ========================================
   TABS: Feature Navigation (im Header)

   Standard-Nav-Komponente (BENT-1897, Muster aus Kunst & Krempel übernommen).
   Der aktive Tab ist ein GESCHLOSSENER Zustand aus drei Signalen, die immer
   zusammen auftreten: getönte Hintergrund-Fläche + kräftiger Teal-Unterstrich
   + fette Teal-Schrift. Die frühere Variante (nur Textfarbe plus dünne, blasse
   Linie) war beim Seitenwechsel kaum zu erkennen. Kein halber Zustand: die drei
   Signale nie einzeln setzen oder tool-lokal wieder abschwächen.

   Zustände vollständig: Ruhe · Hover · Focus-visible · Aktiv · Aktiv+Hover.
   Alle Werte kommen aus den --t-*-Tokens, wirken also in Light UND Dark.

   Aktiv-Selektor greift auf `.active` UND auf `[aria-current="page"]`, damit
   Optik und A11y-Auszeichnung nicht auseinanderlaufen können. Markup-Empfehlung:
   beides setzen (Jinja-Snippet in ADOPTION.md).
   ======================================== */

.tab-nav {
    /* Tab-Bar liegt jetzt innerhalb von .site-header.
       Padding folgt README: 20px oben, 0 unten (Pixel zur Border-Bottom = Tab-Padding). */
    padding: 20px 0 0;
}

.tab-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    /* Kleiner gap, weil die Tabs jetzt eigenes Innenpadding (10px je Seite)
       für die Aktiv-Fläche tragen: 8 + 2x10 = 28px Text-zu-Text, also exakt der
       gewohnte Abstand von vorher (BENT-1897). */
    gap: 8px;
    /* Nav scrollt in sich, sobald die Tabs breiter als der Viewport sind
       (mehrere Tabs plus Theme-Toggle), statt das Dokument ueberlaufen zu
       lassen. Generell gesetzt, nicht erst ab 480px (BENT-1894). */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Pico setzt auf `nav ul:first-of-type` ein negatives margin-left (Spezifität
   0,1,2), das den ganzen Tab-Streifen gegen die Brand-Spalte darüber verschiebt.
   Der Reset in `.tab-nav ul` (0,1,1) verliert dagegen; hier gleichgezogen, damit
   die Quellreihenfolge gewinnt (in K+K live aufgefallen, BENT-1897). */
.tab-nav ul:first-of-type {
    margin-left: 0;
}

/* Tabs behalten ihre Breite; bei Überlauf scrollt die Reihe horizontal, statt
   einzelne Tabs zu quetschen oder umzubrechen (BENT-1894). */
.tab-nav li {
    flex-shrink: 0;
}

/* --- Ruhe --- */
a.tab-btn {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    /* Horizontales Padding gibt der Aktiv-/Hover-Fläche Luft um den Text; der
       Text-zu-Text-Abstand bleibt über den kleineren ul-gap stabil. */
    padding: 0 10px 14px;
    font-weight: 500;
    color: var(--t-muted);
    cursor: pointer;
    font-family: var(--f-sans);
    font-size: 14px;
    letter-spacing: -0.005em;
    text-decoration: none;
    margin-bottom: -1px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    /* Oben gerundet, unten kantig: die Fläche sitzt auf der Unterstrich-Linie auf. */
    border-radius: 6px 6px 0 0;
    transition: color .15s, border-color .15s, background-color .15s;
}

/* --- Hover --- */
a.tab-btn:hover {
    color: var(--t-ink);
    background: var(--t-teal-tint);
    text-decoration: none;
}

/* --- Focus-visible: dieselbe Fläche wie Hover PLUS ein eigener Fokusring.
   Ohne den Ring wäre Tastatur-Fokus optisch nicht von Maus-Hover zu
   unterscheiden. Der Ring liegt bewusst INNEN (negativer offset), sonst
   beschneidet ihn der Scroll-Container der Tab-Reihe am Rand. --- */
a.tab-btn:focus-visible {
    color: var(--t-ink);
    background: var(--t-teal-tint);
    text-decoration: none;
    outline: 2px solid var(--t-teal-hi);
    outline-offset: -2px;
}

/* --- Aktiv (inkl. Aktiv+Hover und Aktiv+Focus: kein Zustandsverlust, der
   aktive Tab bleibt der aktive Tab, auch wenn die Maus darauf liegt) --- */
a.tab-btn.active,
a.tab-btn[aria-current="page"],
a.tab-btn.active:hover,
a.tab-btn[aria-current="page"]:hover,
a.tab-btn.active:focus-visible,
a.tab-btn[aria-current="page"]:focus-visible {
    color: var(--t-teal);
    font-weight: 700;
    border-bottom: 3px solid var(--t-teal);
    background: var(--t-teal-tint);
}

.tab-divider {
    width: 1px;
    align-self: stretch;
    background: var(--t-rule);
    margin: 0 4px 14px 4px;
}

/* Dark-/Light-Umschalter rechtsbuendig in der Tab-Bar, optisch auf
   die Tab-Baseline ausgerichtet (Tabs haben 14px Bottom-Padding). */
.tab-nav li.tab-theme {
    margin-left: auto;
    /* Toggle auf die Tab-Text-Mitte zentrieren: in der Reihe zentrieren, dann um
       die 14px-Bottom-Zone der Tabs nach oben (Text sitzt oben, nicht in Reihenmitte). */
    align-self: center;
    margin-bottom: 6px;
    display: inline-flex;
    align-items: center;
}

.tab-theme .ds-theme-toggle button {
    font-size: 12px;
}

.tab-panel.hidden,
.hidden {
    display: none !important;
}

.tab-panel > .card {
    border-top: none;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    margin-top: 0;
}

@media (max-width: 480px) {
    .tab-nav ul {
        /* overflow-x steht jetzt generell auf .tab-nav ul (BENT-1894);
           hier nur noch die engere Optik fuer kleine Viewports. gap + das
           schmalere Tab-Padding (2 + 2x8) ergeben wieder 18px Text-zu-Text. */
        gap: 2px;
    }

    a.tab-btn {
        font-size: 13px;
        padding: 0 8px 12px;
    }
}


/* ========================================
   CARDS: Light Background + Subtle Border
   ======================================== */

.card {
    background-color: var(--be-card-bg);
    border: 1px solid var(--be-card-border);
    border-radius: var(--be-radius);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.card header {
    padding: 0;
    margin-bottom: 1rem;
    border-bottom: none;
}

.card header h1 {
    margin-bottom: 0.25rem;
}

.card header p {
    color: var(--be-text-muted);
    margin: 0;
}


/* ========================================
   BUTTONS: Teal Accent
   ======================================== */

/* BENT-1231 (Mobile-/Lesbarkeits-Fix): `.drop-zone-pro` aus den Teal-Button-
   Regeln ausnehmen. Die Dropzonen tragen `role="button"` (Tastatur-A11y),
   sind aber visuell eine helle Card mit dunkler Beschriftung, kein gefuellter
   Button. Ohne das `:not(.drop-zone-pro)` faerbte `[role="button"]:not(.outline)`
   (Spezifitaet 0,2,0 > `.drop-zone-pro` 0,1,0) die ganze Dropzone teal und
   machte Beschriftung + „vom Computer waehlen"-Link unlesbar. */
/* Primaer-Button. Rollen-Klassen (.secondary/.btn-ghost/.danger-btn/.outline) MUESSEN
   ausgenommen sein, sonst schlaegt der Attribut-Selektor button[type="submit"] (0,1,1)
   die Rollen-Klassen (0,1,0) per Spezifitaet und faerbt z. B. einen Loesch-Button teal
   statt rot. */
/* BENT-2071: `.chip` gehoert in dieselbe Ausnahme-Kette. Auswahl-Chips sind fast immer
   `button[type="submit"]` (name/value im Formular); ohne `:not(.chip)` faerbt die Regel
   hier jeden Chip solid teal, also sehen ALLE Chips aus wie ausgewaehlt (genau dieser
   Bug in Fiat Lux, BENT-2069). Der Aktiv-Zustand kommt allein aus `.chip.is-active`. */
button[type="submit"]:not(.outline):not(.secondary):not(.btn-secondary):not(.btn-ghost):not(.danger-btn):not(.chip),
[role="button"]:not(.outline):not(.drop-zone-pro):not(.secondary):not(.btn-secondary):not(.btn-ghost):not(.danger-btn):not(.chip) {
    background-color: var(--be-teal);
    border-color: var(--be-teal);
    color: #ffffff;
}

button[type="submit"]:not(.outline):not(.secondary):not(.btn-secondary):not(.btn-ghost):not(.danger-btn):not(.chip):hover,
[role="button"]:not(.outline):not(.drop-zone-pro):not(.secondary):not(.btn-secondary):not(.btn-ghost):not(.danger-btn):not(.chip):hover {
    background-color: var(--be-teal-hover);
    border-color: var(--be-teal-hover);
}

button.outline,
[role="button"].outline {
    background-color: transparent;
    color: var(--be-teal);
    border-color: var(--be-teal);
}

button.outline:hover,
[role="button"].outline:hover {
    background-color: var(--be-teal-focus);
    color: var(--be-teal-hover);
}

/* Focus-Ring */
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
a:focus-visible {
    outline: 2px solid var(--be-teal);
    outline-offset: 2px;
}


/* ========================================
   LINKS: Teal
   ======================================== */

a {
    color: var(--be-teal);
    transition: color 0.2s ease;
}

a:hover {
    color: var(--be-teal-hover);
}


/* ========================================
   DROP-ZONE (Upload)
   ======================================== */

.drop-zone {
    border: 2px dashed var(--be-card-border);
    border-radius: var(--be-radius);
    padding: 2rem;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.drop-zone:hover {
    border-color: var(--be-teal);
}

.drop-zone--active {
    border-color: var(--be-teal);
    background-color: var(--be-teal-focus);
}

.drop-zone p {
    margin: 0;
}

.drop-zone .drop-zone-file {
    font-weight: bold;
    margin-top: 0.5rem;
}

.drop-zone-formats {
    display: block;
    margin-top: 0.5rem;
    color: var(--be-text-muted);
    font-size: 0.75rem;
}


/* =====================================================
   PAGE-STAGE (Hero-Layout für Nebentabs, Step 5)
   Untertitel-Review · Import · Download · Help
   ===================================================== */

.page-stage {
    display: flex;
    flex-direction: column;
    gap: 18px;
    max-width: 720px;
    margin: 0 auto;
}

.page-stage__hero {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0;
    border: 0;
    margin-bottom: 8px;
}

.hero-meta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.page-stage__headline {
    font-size: clamp(24px, 3.6vw, 36px);
    margin: 4px 0;
    font-weight: 500;
    line-height: 1.05;
}

.page-stage__sub {
    color: var(--t-ink-soft);
    font-size: 15px;
    line-height: 1.55;
    max-width: 600px;
    margin: 0;
}

.page-stage__cta {
    align-self: flex-start;
    width: auto;
    padding: 12px 22px;
}

/* =====================================================
   SPLIT-LAYOUT: Hauptinhalt + Einstellungs-Aside (BENT-1399)
   Zweispaltig fuer Eingabe-Seiten mit Einstellungen: Hauptinhalt links,
   Settings-Aside rechts (sticky), Hero spannt beide Spalten. Bricht unter
   768px auf eine Spalte um. Loest das alte .ds-split ab. Fuer Text-/Prose-
   oder reine Settings-Seiten weiterhin .page-stage (einspaltig) nutzen.
   ===================================================== */
.split-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr);
    gap: 18px 28px;
    align-items: start;
    max-width: 1040px;
    margin: 0 auto;
}

/* Hero ueber beide Spalten (mit .page-stage__hero kombinieren) */
.split-layout__hero {
    grid-column: 1 / -1;
}

/* Linke Spalte: gestapelter Hauptinhalt (Textfeld, Dropzone, Hinweis ...) */
.split-layout__main {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
}

/* Rechte Spalte bleibt beim Scrollen sichtbar */
.split-layout__aside {
    position: sticky;
    top: 24px;
}

/* Aside-Kopf sitzt UEBER der settings-card (nicht darin) und nutzt dieselbe
   Typo wie .settings-field__label, damit er mit dem Kopf der linken Spalte
   auf einer Linie startet ‐ sonst drueckt der Karten-Innenabstand den
   rechten Kopf nach unten und die Typo divergiert. */
.split-layout__aside-head {
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--t-ink);
    letter-spacing: -0.005em;
}

@media (max-width: 768px) {
    .split-layout {
        grid-template-columns: 1fr;
    }
    .split-layout__aside {
        position: static;
    }
}

/* =====================================================
   FORM-FELDER + SEGMENTIERTER UMSCHALTER (aus Transkriptor, BENT-1369)
   ===================================================== */
.settings-field {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.settings-field__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}
.settings-field__label {
    font-size: 13px;
    font-weight: 600;
    color: var(--t-ink);
    letter-spacing: -0.005em;
}
.settings-field__hint {
    font-size: 11px;
    color: var(--t-muted);
    text-align: right;
    flex: 1;
    min-width: 0;
}

/* --- Sprache: Button-Grid --- */
.lang-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}
.lang-grid--extra { margin-top: 6px; }
.lang-btn {
    appearance: none;
    background: var(--t-card);
    border: 1px solid var(--t-rule);
    border-radius: 6px;
    padding: 8px 4px;
    font-family: var(--f-sans);
    font-size: 13px;
    font-weight: 500;
    color: var(--t-ink-soft);
    cursor: pointer;
    transition: background .12s, border-color .12s, color .12s;
    text-align: center;
    line-height: 1;
}
.lang-btn:hover {
    border-color: var(--t-teal-soft);
    color: var(--t-ink);
}
.lang-btn.is-active {
    background: var(--t-teal-tint);
    border-color: var(--t-teal);
    color: var(--t-teal);
    font-weight: 600;
}
.lang-btn--more {
    color: var(--t-muted);
    border-style: dashed;
}
.lang-btn--more[aria-expanded="true"] {
    background: var(--t-bg);
    color: var(--t-ink-soft);
    border-style: solid;
}

/* =====================================================
   ALERT / NOTICE (Flash) + ACTION-REIHE + LEAD  (BENT-1369)
   Kanonische, allgemeingueltige Bausteine fuer alle Tools.
   ===================================================== */
.flash-error, .flash-success, .flash-info, .flash-warning {
    border-radius: 10px;
    padding: 14px 22px 14px 18px;
    margin: 0 0 18px;
    font-size: 13px;
    line-height: 1.5;
    border-left: 3px solid;
    background: var(--t-card);
    box-shadow: none;
    color: var(--t-ink);
    position: relative;
    padding-right: 2.5rem;
}
.flash-error { background: var(--t-red-tint); border-color: var(--t-red); }
.flash-error::before { content: "Fehler · "; color: var(--t-red); font-weight: 600; }
.flash-success { background: var(--t-green-tint); border-color: var(--t-green); }
.flash-success::before { content: "✓  "; color: var(--t-green); font-weight: 700; }
.flash-warning { background: var(--t-amber-tint); border-color: var(--t-amber); }
.flash-warning::before { content: "Achtung · "; color: var(--t-amber); font-weight: 600; }
.flash-info { background: var(--t-teal-hi-tint); border-color: var(--t-teal-hi); }
.flash-info::before { content: "Hinweis · "; color: var(--t-teal-hi); font-weight: 600; }
.flash-dismiss {
    position: absolute; top: 0.5rem; right: 0.5rem; background: none; border: none;
    font-size: 1.25rem; line-height: 1; cursor: pointer; color: var(--t-muted); opacity: 0.6; padding: 0.25rem;
}
.flash-dismiss:hover { opacity: 1; }

/* Action-Reihe: mehrere Buttons/Links nebeneinander, statt nackter Geschwister. */
.actions {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 4px;
}

/* Eigenstaendiger Lead-Absatz (wenn keine volle page-stage-Hero genutzt wird). */
.lead {
    color: var(--t-ink-soft);
    font-size: 15px;
    line-height: 1.55;
    max-width: 600px;
    margin: 0 0 8px;
}

/* =====================================================
   VERVOLLSTAENDIGUNG: Dropzone-Innereien, Settings-Card, CTA
   (aus Transkriptors style.css uebernommen, BENT-1369)
   ===================================================== */
.drop-zone-pro {
    border: 1.5px dashed var(--t-teal-soft);
    border-radius: 12px;
    padding: 40px 32px;
    background: var(--t-card);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}
.drop-zone-pro:hover,
.drop-zone-pro:focus-visible,
.drop-zone-pro.is-dragover {
    border-color: var(--t-teal-hi);
    background: var(--t-teal-hi-tint);
    outline: none;
}
.drop-zone-pro.is-selected {
    border-style: solid;
    border-color: var(--t-teal-hi);
    background: var(--t-card);
}
.drop-zone-pro__avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--t-teal-tint);
    color: var(--t-teal);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.drop-zone-pro__text {
    text-align: center;
}
.drop-zone-pro__title {
    font-family: var(--f-serif);
    font-size: 18px;
    font-weight: 500;
    color: var(--t-ink);
    line-height: 1.3;
    margin-bottom: 4px;
    text-transform: none;
    letter-spacing: -0.01em;
}
.drop-zone-pro__hint {
    font-size: 13px;
    color: var(--t-ink-soft);
    line-height: 1.5;
    font-weight: 500;
}
.drop-zone-pro__hint a {
    color: var(--t-teal);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.drop-zone-pro__hint a:hover { color: var(--t-teal-hi); }

/* Kompakte Dichte (BENT-3570). Für mehrere Upload-Slots nebeneinander (etwa
   drei Objektfotos und ein Personenfoto in einer Zeile): in voller Dichte
   trägt jeder Slot 40 Pixel Polsterung und einen Symbolkreis von 72 Pixeln,
   und die Seite wird sehr hoch. Der Modifikator setzt ausschließlich Größen.
   Rahmen, Grund, Radius, Ausrichtung und die Zustände `is-dragover` und
   `is-selected` bleiben unberührt und kommen weiter aus dem Baustein oben:
   eine kompakte Fläche ist dieselbe Fläche, nur kleiner, und niemals eine
   zweite Fassung mit eigener Optik. */
.drop-zone-pro--compact {
    padding: 16px 14px;
    gap: 10px;
}
.drop-zone-pro--compact .drop-zone-pro__avatar {
    width: 40px;
    height: 40px;
    /* Der Baustein setzt am Symbolkreis keine Schriftgröße, die Beschriftung
       erbt sie. Bei 40 statt 72 Pixeln muss sie mit, sonst steht die Kürzel-
       Schrift über den Rand des Kreises hinaus. */
    font-size: 12px;
}
.drop-zone-pro--compact .drop-zone-pro__title {
    font-size: 14px;
    margin-bottom: 2px;
}
.drop-zone-pro--compact .drop-zone-pro__hint {
    font-size: 12px;
}

.settings-card {
    background: var(--t-card);
    border: 1px solid var(--t-rule);
    border-radius: 12px;
    padding: 24px 22px 22px;
    display: flex;
    flex-direction: column;
    gap: 22px;
    box-shadow: none;
    margin-bottom: 0;
}
.settings-card__eyebrow { margin-bottom: -10px; }

.upload-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: 14px 16px;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: background .15s, border-color .15s;
    margin: 6px 0 0;
}
.upload-cta:hover,
.upload-cta:focus-visible {
    background: #155561;
    border-color: #155561;
    outline: none;
}
.upload-cta:disabled {
    background: var(--t-faint);
    border-color: var(--t-faint);
    cursor: not-allowed;
}

/* =====================================================
   TEXT-EINGABEN: kanonischer Input-Look (aus Transkriptor verallgemeinert)
   Gilt fuer nackte Felder -> Eingaben sehen ohne Klasse korrekt aus. (BENT-1369)
   ===================================================== */
input[type="text"], input[type="url"], input[type="email"], input[type="search"],
input[type="password"], input[type="number"], input[type="tel"], textarea,
.speaker-names__input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--t-rule);
    border-radius: 6px;
    font-family: var(--f-sans);
    font-size: 13px;
    color: var(--t-ink);
    background: var(--t-card);
}
input[type="text"]:focus, input[type="url"]:focus, input[type="email"]:focus,
input[type="search"]:focus, input[type="password"]:focus, input[type="number"]:focus,
input[type="tel"]:focus, textarea:focus, .speaker-names__input:focus {
    border-color: var(--t-teal-hi);
    outline: none;
}

/* Groesseres URL-/Haupt-Eingabefeld (z. B. Download-URL). */
.download-url { font-size: 14px; padding: 12px 14px; }

/* 5-spaltiges Sprach-Grid (Download-Variante). */
.lang-grid--download { grid-template-columns: repeat(5, 1fr); }

/* =====================================================
   PROSE: Lang-/Fliesstext-Stil (Markdown/Doku) fuer textlastige Tools
   (aus Transkriptor, BENT-1369) ==================================================== */
.prose {
    font-size: 15px;
    line-height: 1.6;
    color: var(--t-ink-soft);
    max-width: 720px;
    margin: 0 auto;
    background: var(--t-card);
    border: 1px solid var(--t-rule);
    border-radius: 12px;
    padding: 28px 32px;
}
.prose h1, .prose h2, .prose h3 {
    font-family: var(--f-serif);
    color: var(--t-ink);
    text-transform: none;
    letter-spacing: -0.01em;
    font-weight: 600;
}
.prose h1 { font-size: 24px; margin: 0 0 12px; }
.prose h2 { font-size: 20px; margin: 24px 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--t-hairline); }
.prose h3 { font-size: 16px; margin: 18px 0 8px; }
.prose p { margin: 0 0 12px; }
.prose ul, .prose ol { padding-left: 1.25rem; margin: 0 0 12px; }
.prose li { margin-bottom: 4px; }
.prose code {
    background: var(--t-bg);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 0.9em;
    font-family: var(--f-mono);
}
.prose a { color: var(--t-teal); }
.prose a:hover { color: var(--t-teal-hi); }
.prose strong { color: var(--t-ink); font-weight: 600; }
.prose hr { margin: 20px 0; border: 0; border-top: 1px solid var(--t-rule); }
.prose blockquote {
    border-left: 3px solid var(--t-teal-hi);
    padding-left: 14px;
    margin: 12px 0;
    color: var(--t-ink-soft);
    font-style: italic;
}


/* =====================================================
   RESPONSIVE: generische Mobile-Anpassungen (aus Transkriptor, BENT-1369)
   Tool-spezifische Mobile-Regeln (Editor, Export-Buttons usw.) bleiben tool-lokal.
   ===================================================== */
@media (max-width: 768px) {
    h1 { font-size: 1.35rem; }
    .card { padding: 1rem; }
}
@media (max-width: 480px) {
    /* Die kompakte Fassung (BENT-3570) ist hier ausgenommen. Ohne das
       `:not()` gewinnt diese Regel gegen den Modifikator: gleiche
       Spezifität, aber weiter hinten in der Datei, und die kompakte
       Fläche wäre ausgerechnet auf dem schmalsten Schirm wieder groß.
       Am Symbolkreis braucht es die Ausnahme nicht, der Modifikator ist
       dort zweiklassig und gewinnt ohnehin. */
    .drop-zone-pro:not(.drop-zone-pro--compact) { padding: 28px 18px; gap: 12px; }
    .drop-zone-pro__avatar { width: 56px; height: 56px; }
}

/* Utility: tabellarische Ziffern (Zahlen-Spalten buendig untereinander). */
.tabular { font-variant-numeric: tabular-nums; }

/* =====================================================
   DICHTES FORMULAR: field-grid + field  (aus v-geld-buddy verallgemeinert, BENT-1369)
   Fuer datenerfassungs-lastige Formulare (viele Felder pro Datensatz). Ergaenzt das
   grosszuegige .settings-field; hier kompakter, im Raster, kleines Eyebrow-Label.
   settings-field = Einstellungen/wenige Felder; field-grid = dichte Erfassung.
   ===================================================== */
.field-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px 16px;
}
.field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.field > label,
.field__label {
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--t-muted);
}
.field input:not([type="checkbox"]):not([type="radio"]),
.field select,
.field textarea {
    margin: 0;
    font-size: 14px;
    padding: 8px 10px;
}
.field--full { grid-column: 1 / -1; }
.field--required label .required-marker { color: var(--t-red); margin-left: 4px; }
.field--required label:not(:has(.required-marker))::after { content: " *"; color: var(--t-red); }
.field--invalid input,
.field--invalid select,
.field--invalid textarea { border-color: var(--t-red); }
.field-hint { color: var(--t-muted); font-weight: normal; }
.field-hint--block { display: block; }

/* Screenreader-only Utility (Standard sr-only), a11y-Helfer. */
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* =====================================================
   BADGE: kleine Status-/Kategorie-Pille (BENT-1429, aus .ds-badge kanonisiert)
   Basis = Teal-Tint; Varianten via Modifier. Loest Legacy-.ds-badge ab.
   ===================================================== */
.badge {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 600;
    background: var(--t-teal-hi-tint);
    color: var(--t-teal);
    border: 1px solid transparent;
}
.badge--subtle { background: transparent; color: var(--t-muted); border-color: var(--t-rule); }
.badge--teal   { background: var(--t-teal); color: #fff; border-color: transparent; }
.badge--danger { background: var(--t-red-tint); color: var(--t-red); border-color: transparent; }

/* =====================================================
   CHIP: klickbarer Auswahl-Vorschlag (BENT-2071)

   Abgrenzung zur BADGE: das Badge ist ein reines Status-Etikett (nicht
   klickbar), der Chip ist ein Bedien-Element. Chips bieten wenige, konkrete
   Vorschlaege zum Direkt-Uebernehmen an (KTR-Kandidaten im V-Geld-Buddy
   BENT-1767, KTRZ-Vorschlaege in der Fiat-Lux-SESAM-Pruefliste BENT-2069);
   beide Tools hatten dafuer eigene, leicht verschiedene Styles, genau diese
   Drift loest die kanonische Komponente hier ab.

   Markup: fast immer `button[type="submit"]` mit name/value im Formular, oft
   HTMX-getrieben. Deshalb ist `.chip` weiter oben aus der solid-teal-
   Submit-Regel ausgenommen: ohne diese Ausnahme sehen ALLE Chips gefuellt aus,
   also wie ausgewaehlt.

   Zustaende vollstaendig: Ruhe (Outline) · Hover/Focus-visible (Teal-Toenung) ·
   Aktiv (solid Teal, `.is-active` ODER `aria-pressed="true"`) · Gedimmt
   (`.is-dimmed`, `:disabled` oder waehrend einer laufenden HTMX-Anfrage die
   nicht geklickten Chips). Alle Werte aus --t-*-Tokens, wirken in Light UND Dark.
   ===================================================== */
.chip-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    /* Pico gibt Buttons volle Breite und margin-bottom; ein Chip ist inline. */
    width: auto;
    margin: 0;
    padding: 0.15rem 0.6rem;
    font-size: 0.78rem;
    font-weight: 500;
    line-height: 1.35;
    white-space: nowrap;
    border-radius: 999px;
    border: 1px solid var(--t-teal);
    background: transparent;
    color: var(--t-teal);
    text-decoration: none;
    cursor: pointer;
    transition: background .12s ease, color .12s ease, border-color .12s ease, opacity .12s ease;
}

.chip:hover:not(:disabled),
.chip:focus-visible {
    background: var(--t-teal-hi-tint);
    border-color: var(--t-teal);
    color: var(--t-teal);
    text-decoration: none;
}

/* Ausgewaehlt: solid Teal. `.is-active` traegt die Optik, `aria-pressed="true"`
   sagt Screenreadern denselben Zustand; beide Selektoren stylen gleich, damit
   Optik und A11y-Auszeichnung nicht auseinanderlaufen koennen. */
.chip.is-active,
.chip[aria-pressed="true"] {
    background: var(--t-teal);
    border-color: var(--t-teal);
    color: #fff;
}

.chip.is-active:hover:not(:disabled),
.chip[aria-pressed="true"]:hover:not(:disabled) {
    background: var(--be-teal-hover);
    border-color: var(--be-teal-hover);
    color: #fff;
}

/* Gedimmt: verworfene/nicht gewaehlte Vorschlaege bleiben lesbar, treten aber
   zurueck. `:disabled` zusaetzlich ohne Zeiger-Feedback. */
.chip.is-dimmed,
.chip:disabled {
    opacity: 0.45;
}
.chip:disabled { cursor: not-allowed; }

/* HTMX-Muster: waehrend die Anfrage laeuft (htmx setzt .htmx-request auf dem
   Formular) bleibt der geklickte Chip gefuellt (der Klick fokussiert ihn) und
   bekommt ein Auslassungszeichen; die uebrigen Chips derselben Reihe dimmen.
   So ist ohne Spinner sichtbar, welche Auswahl gerade verarbeitet wird. */
form.htmx-request .chip:not(:focus) {
    opacity: 0.4;
}
form.htmx-request .chip:focus {
    background: var(--t-teal);
    border-color: var(--t-teal);
    color: #fff;
}
form.htmx-request .chip:focus::after { content: "…"; }

/* Im Dunkeln ist --t-teal der helle Akzent (#4fb0c4); weisse Schrift darauf
   waere zu kontrastarm, also dunkle Schrift (gleiche Loesung wie .help-tip). */
:root[data-theme="dark"] .chip.is-active,
:root[data-theme="dark"] .chip[aria-pressed="true"],
:root[data-theme="dark"] .chip.is-active:hover:not(:disabled),
:root[data-theme="dark"] .chip[aria-pressed="true"]:hover:not(:disabled),
:root[data-theme="dark"] form.htmx-request .chip:focus {
    color: #0e1417;
}

/* =====================================================
   KPI-BAR: Kennzahlen-Leiste (BENT-1429, aus .ds-kpi-bar kanonisiert)
   Reihe aus Label/Wert-Paaren. Werte in Serif + tabellarischen Ziffern.
   ===================================================== */
.kpi-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    align-items: baseline;
    padding: 0.75rem 1rem;
    border: 1px solid var(--t-rule);
    border-radius: var(--be-radius);
    background: var(--t-card);
    margin-bottom: 0.75rem;
}
.kpi { display: flex; flex-direction: column; gap: 0.1rem; }
.kpi__label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--t-muted); }
.kpi__value { font-family: var(--f-serif); font-size: 1.15rem; font-weight: 600; font-variant-numeric: tabular-nums; }

/* =====================================================
   HELP-TIP: CSS-only Hilfe-Tooltip (BENT-1429, aus .ds-help/BENT-1249 kanonisiert)
   Rundes "?"-Icon; bei Hover/Focus klappt ein Popover auf. Kein JS.
   Markup: <span class="help-tip" tabindex="0" aria-label="...">
             <span class="help-tip__popover"><span class="help-tip__title">...</span> Text ...</span>
           </span>
   Hinweis: Popover braucht overflow-visible im Elternelement; in dichten
   Tabellen-Koepfen stattdessen das native title-Attribut nutzen.
   ===================================================== */
.help-tip {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.1rem; height: 1.1rem; border-radius: 50%;
    background: var(--t-teal-hi-tint); color: var(--t-teal);
    font-size: 0.68rem; font-weight: 700; line-height: 1;
    cursor: help; vertical-align: middle; margin-left: 0.3rem;
    position: relative; flex-shrink: 0;
    border: 1px solid rgba(0, 102, 128, 0.18);
    transition: background 0.12s;
    user-select: none;
}
.help-tip::before { content: "?"; }
.help-tip:hover,
.help-tip:focus { background: var(--t-teal); color: #fff; outline: none; }
.help-tip:focus-visible { outline: 2px solid var(--t-teal-hi); outline-offset: 2px; }
.help-tip__popover {
    display: none;
    position: absolute; z-index: 200;
    bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
    min-width: 16rem; max-width: 22rem;
    background: var(--t-card); color: var(--t-ink-soft);
    border: 1px solid var(--t-rule); border-radius: var(--be-radius);
    box-shadow: 0 4px 16px rgba(15, 29, 34, 0.12);
    padding: 0.55rem 0.75rem;
    font-size: 0.78rem; font-weight: 400; line-height: 1.5;
    text-align: left; white-space: normal; cursor: default;
    pointer-events: none;
}
.help-tip__popover::after {
    content: ""; position: absolute;
    top: 100%; left: 50%; transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: var(--t-rule);
}
.help-tip__popover::before {
    content: ""; position: absolute;
    top: 100%; left: 50%; transform: translateX(-50%);
    border: 4px solid transparent;
    border-top-color: var(--t-card);
    z-index: 1;
}
.help-tip:hover .help-tip__popover,
.help-tip:focus .help-tip__popover { display: block; }
.help-tip__popover .help-tip__title {
    display: block; font-weight: 600; color: var(--t-ink);
    margin-bottom: 0.25rem; font-size: 0.8rem;
}
:root[data-theme="dark"] .help-tip {
    background: var(--t-teal-tint); color: var(--t-teal);
    border-color: rgba(79, 176, 196, 0.25);
}
:root[data-theme="dark"] .help-tip:hover,
:root[data-theme="dark"] .help-tip:focus { background: var(--t-teal); color: #0e1417; }

/* =====================================================
   ARIA-BUSY-TEXTUMBRUCH (Pico-Falle, BENT-1643)
   Pico setzt auf [aria-busy=true] ein white-space: nowrap (fuer Button-/
   Inline-Spinner sinnvoll). Bei Text-Lade-Elementen wie
   <p aria-busy="true">Lade ...</p> verhindert das aber den Umbruch, der Text
   laeuft aus seiner Karte (real im Rezeptrechner: #loading, #calc-loading).
   Defensive Regel: nur Text-Container umbrechen lassen; Buttons/Links und der
   reine Spinner bleiben ueber Picos eigene not-Selektoren unberuehrt.
   ===================================================== */
[aria-busy=true]:where(p, div, span, li) {
    white-space: normal;
    overflow-wrap: anywhere;
}