/* =============================================================================
   Tinte — Design-System der Bavaria-Tools  (Companion zu Pico CSS 2)
   -----------------------------------------------------------------------------
   Gemeinsame, ruhige Design-Sprache der internen Bavaria-Entertainment-Tools
   (Volmo/ORACLE-Linie): warmes Off-White, Teal-Akzent, Source-Serif-Überschriften,
   Inter-Text. Statt eigenem Markup überschreiben wir Picos CSS-Variablen, sodass
   bestehendes Pico-Markup den Look erbt, plus ein kleiner, disziplinierter Satz
   Komponenten-Klassen. NACH pico.min.css einbinden. Quelle der Wahrheit:
   Claude-Design-Projekt „Bavaria Tools Design System".
   Akzentfarben = offizielle Bavaria-Film-Logofarben (Pantone 315):
   dunkel #006680 (Primär), hell #3D93AA (heller Akzent).
   -----------------------------------------------------------------------------
   @version 0.2.6
   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 gegen die Tool-Kopien).
   ========================================================================== */

/* Brand-Fonts self-hosted (woff2 unter css/fonts/), damit das System unabhaengig
   vom Google-CDN rendert. Tools koennen die Google-Fonts-Links zusaetzlich behalten. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/inter-400.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/inter-500.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/inter-600.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/inter-700.woff2") format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/source-serif-4-500.woff2") format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/source-serif-4-600.woff2") format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/source-serif-4-700.woff2") format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-style: italic; font-weight: 500; font-display: swap; src: url("fonts/source-serif-4-500-italic.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/jetbrains-mono-400.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/jetbrains-mono-500.woff2") format("woff2"); }

:root {
  /* --- Bavaria-Palette (geteilt über alle Tools) --- */
  --t-ink:          #0f1d22;
  --t-ink-soft:     #3a4a4f;
  --t-muted:        #6b7a7e;
  --t-faint:        #a4b0b3;
  --t-rule:         #e3e7e6;
  --t-hairline:     #eef1f0;
  --t-bg:           #f6f4ee;
  --t-card:         #ffffff;
  /* Offizielle Bavaria-Film-Logofarben (Pantone 315): dunkel #006680, hell #3D93AA */
  --t-teal:         #006680;   /* Bavaria-Marke dunkel — Primär, Links, aktive Zustände */
  --t-teal-light:   #3d93aa;   /* Bavaria-Marke hell — heller Akzent */
  --t-teal-soft:    #9cc3d0;
  --t-teal-hi:      #006680;   /* Akzent (= Primär) */
  --t-teal-tint:    rgba(0, 102, 128, 0.08);
  --t-teal-hi-tint: rgba(61, 147, 170, 0.14);
  --t-amber:        #b8742a;
  --t-amber-tint:   #fbf3e6;
  --t-red:          #a23a2c;
  --t-red-tint:     #fbeae8;
  --t-green:        #2e7d32;
  --t-green-tint:   #e8f5e9;

  --f-serif: "Source Serif 4", Georgia, serif;
  --f-sans:  Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-mono:  "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --be-radius: 8px;
  --be-radius-lg: 12px;   /* größere Flächen: Karten/Panels/Drop-Zone */

  /* --- Typografie & Abstände (Pico) --- */
  --pico-font-family: var(--f-sans);
  --pico-font-size: 93.75%;        /* ~15px */
  --pico-line-height: 1.5;
  --pico-font-weight: 400;
  --pico-border-radius: var(--be-radius);

  --pico-spacing: 0.75rem;
  --pico-typography-spacing-vertical: 0.6rem;
  --pico-block-spacing-vertical: 1rem;
  --pico-block-spacing-horizontal: 1.25rem;
  --pico-form-element-spacing-vertical: 0.45rem;
  --pico-form-element-spacing-horizontal: 0.65rem;
  --pico-nav-element-spacing-vertical: 0.5rem;
}

/* Farb-Overrides auf Picos eigener Schema-Spezifität, sonst gewinnt Pico-Blau. */
:root,
:root:not([data-theme="dark"]) {
  --pico-background-color: var(--t-bg);
  --pico-color: var(--t-ink);
  --pico-h1-color: var(--t-ink);
  --pico-h2-color: var(--t-ink);
  --pico-h3-color: var(--t-ink);
  --pico-h4-color: var(--t-ink);
  --pico-h5-color: var(--t-ink);
  --pico-h6-color: var(--t-ink);
  --pico-muted-color: var(--t-muted);
  --pico-muted-border-color: var(--t-rule);
  --pico-border-color: var(--t-rule);

  --pico-primary: var(--t-teal);
  --pico-primary-hover: #00566b;
  --pico-primary-focus: var(--t-teal-hi-tint);
  --pico-primary-background: var(--t-teal);
  --pico-primary-hover-background: #00566b;
  --pico-primary-border: var(--t-teal);
  --pico-primary-inverse: #ffffff;
  --pico-primary-underline: rgba(0, 102, 128, 0.35);

  --pico-card-background-color: var(--t-card);
  --pico-card-border-color: var(--t-rule);
  --pico-card-sectioning-background-color: #fbfaf6;

  --pico-form-element-background-color: var(--t-card);
  --pico-form-element-border-color: var(--t-rule);
  --pico-form-element-active-border-color: var(--t-teal-hi);
  --pico-form-element-focus-color: var(--t-teal-hi-tint);

  --pico-table-border-color: var(--t-rule);
  --pico-table-row-stripped-background-color: rgba(15, 29, 34, 0.015);
}

/* -----------------------------------------------------------------------------
   Typo-Hierarchie: Source-Serif-Überschrift als „edler" Anker, leise
   Section-Labels darunter. Ein klarer Fokus pro Bereich.
   -------------------------------------------------------------------------- */
main h1 {
  font-family: var(--f-serif);
  font-size: 1.7rem; font-weight: 600; letter-spacing: -0.01em;
  margin-bottom: 0.15rem;
}
main h2 {
  font-size: 0.78rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--t-muted);
  margin: 1.1rem 0 0.45rem;
}
main h3 { font-family: var(--f-serif); font-size: 1.1rem; font-weight: 600; }
main h1, main h2, main h3, main h4, main h5, main h6 { margin-top: 0; }
main article > header, .ds-card > header {
  font-family: var(--f-serif); font-weight: 600;
}

/* -----------------------------------------------------------------------------
   Karten: ruhige Flächen, warme Haarlinie, kein harter Schatten.
   -------------------------------------------------------------------------- */
main article, .ds-card {
  border: 1px solid var(--t-rule);
  border-radius: var(--be-radius);
  box-shadow: 0 1px 2px rgba(15, 29, 34, 0.03);
  padding: 1rem 1.25rem;
  margin-bottom: 0.75rem;
}
main article > header, .ds-card > header {
  background: transparent;
  border-bottom: 1px solid var(--t-rule);
  margin: -1rem -1.25rem 0.75rem;
  padding: 0.6rem 1.25rem;
  font-size: 1rem;
}

/* -----------------------------------------------------------------------------
   Buttons — edel statt wuchtig: schlanke Schrift, Auto-Breite, klare Rollen.
     default / [type=submit]   teal-Fill  → genau EINE Primäraktion pro Kontext
     .secondary                Fläche + Rule-Border → Nebenaktionen
     .outline / .btn-ghost     teal-Umriss / reiner Link → tertiär
   -------------------------------------------------------------------------- */
button, [role="button"], [type="submit"], [type="button"], [type="reset"] {
  width: auto;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.005em;
  /* line-height bewusst eng (nicht --pico-line-height 1,5): bei einzeiligen Buttons
     lässt 1,5 die Beschriftung „schwimmen" und wirkt nicht mittig. 1,2 setzt den Text
     satt in die Mitte. Höhen bleiben über box-sizing + symmetrisches Padding konsistent. */
  line-height: 1.2;
  vertical-align: middle;   /* mit benachbarten Inline-Controls (Checkboxen) bündig */
  padding: 0.42rem 0.95rem;
  border-radius: var(--be-radius);
  --pico-font-weight: 500;
}
/* Pico macht <button type=submit> vollflächig (button[type=submit]{width:100%}).
   Gleiche Spezifität + spätere Ladereihenfolge → schlanke Auto-Breite gewinnt. */
button[type="submit"], button[type="button"], button[type="reset"] { width: auto; }
/* Kleiner Inline-Button (z. B. „+ Zeile" neben SV/KSK-Feldern) — proportionierte
   Konvention statt ad-hoc-CSS pro Tool. */
.btn-sm, button.btn-sm {
  font-size: 0.78rem;
  padding: 0.25rem 0.6rem;
  line-height: 1.2;
}
.ds-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin: 0.5rem 0; }
/* Vollbreiten-Button nur, wo bewusst gewünscht (z. B. Login). */
.btn-block, button.btn-block[type="submit"] { width: 100%; }

button.secondary, [role="button"].secondary, .btn-secondary {
  background-color: var(--t-card);
  border: 1px solid var(--t-rule);
  color: var(--t-ink-soft);
}
button.secondary:hover, [role="button"].secondary:hover, .btn-secondary:hover {
  border-color: var(--t-ink-soft); color: var(--t-ink);
}
button.outline, [role="button"].outline {
  background-color: transparent; color: var(--t-teal); border-color: var(--t-teal);
}
button.outline:hover, [role="button"].outline:hover {
  background-color: var(--t-teal-tint); color: var(--t-teal);
}
.btn-ghost {
  background: transparent; border-color: transparent;
  color: var(--t-teal); padding-left: 0; padding-right: 0; font-weight: 500;
}
.danger-btn { background: var(--t-red); border-color: var(--t-red); color: #fff; }
.danger-btn:hover { background: #862e22; border-color: #862e22; }

button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, [role="button"]:focus-visible, a:focus-visible {
  outline: 2px solid var(--t-teal-hi); outline-offset: 2px;
}

/* -----------------------------------------------------------------------------
   Tabellen: ruhig, leiser Kopf, schmale Zeilen (Controlling-Dichte).
   -------------------------------------------------------------------------- */
table { margin-bottom: 0; }
table thead th {
  background: #fbfaf6;
  font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--t-muted); font-weight: 600;
}
table th, table td { padding-top: 0.4rem; padding-bottom: 0.4rem; vertical-align: middle; }
table td.num, table th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* -----------------------------------------------------------------------------
   Semantik, Badges, Kennzahlen
   -------------------------------------------------------------------------- */
.positiv { color: var(--t-green); }
.negativ { color: var(--t-red); }
.muted   { color: var(--t-muted); }
.kennzahl, .stat-zahl { text-align: right; font-variant-numeric: tabular-nums; }
.stat-zahl { font-family: var(--f-serif); font-size: 1.6rem; font-weight: 600; }

.ds-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;
}

.ds-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;
}
.ds-kpi-bar .kpi { display: flex; flex-direction: column; gap: 0.1rem; }
.ds-kpi-bar .kpi .label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--t-muted); }
.ds-kpi-bar .kpi .value { font-family: var(--f-serif); font-size: 1.15rem; font-weight: 600; font-variant-numeric: tabular-nums; }

/* -----------------------------------------------------------------------------
   Brand-Chrome — Header-Markenzeichen, Display-Headline, Footer.
   Aus dem Transkriptor ins gemeinsame Set übernommen. Markenquadrate in den
   offiziellen Bavaria-Logofarben (hell #3D93AA links, dunkel #006680 rechts).
   Bewusst OHNE Tool-Kategorie-Label (z. B. „POSTPRODUKTION") im Header.
   -------------------------------------------------------------------------- */

/* Markenzeichen: zwei abgerundete Quadrate (pure CSS, kein SVG-File nötig). */
.ds-brandmark { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; }
.ds-brandmark::before, .ds-brandmark::after {
  content: ""; width: 1.05rem; height: 1.05rem; border-radius: 22%;
}
.ds-brandmark::before { background: var(--t-teal-light); }  /* hell, links */
.ds-brandmark::after  { background: var(--t-teal); }        /* dunkel, rechts (= Primär) */

/* Zwei-Ton-Layout: weiße Chrome (Header/Footer) auf warm-off-white Body (--t-bg)
   gibt Tiefe. Body-Hintergrund kommt aus --pico-background-color (= --t-bg). */
.ds-header { background: var(--t-card); border-bottom: 1px solid var(--t-rule); }
.ds-header-inner, .ds-footer-inner {
  max-width: 1400px; margin: 0 auto; padding: 0.8rem 2rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
/* Header bleibt EINE zentrierte Zeile (Brand links, Nav rechts); Nav darf bei
   Enge horizontal scrollen statt umzubrechen. Footer darf umbrechen. */
.ds-header-inner { flex-wrap: nowrap; }
.ds-footer-inner { flex-wrap: wrap; }
.ds-header nav { min-width: 0; }
/* Header-Navigation: eine buendige, vertikal zentrierte Zeile. Vertraegt Text-Links,
   Dropdown-<summary>, Benutzer-Kontext (.ds-nav-context), Buttons und den Theme-Toggle
   ohne Hoehenversatz. Schluessel: einheitliche line-height:1, jedes <li> zentriert seinen
   Inhalt per Flex, und Picos margin-bottom auf Buttons UND [role=group] wird zurueckgesetzt
   (sonst werden die Listenelemente unterschiedlich hoch und der Inhalt rutscht nach oben). */
.ds-header nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: nowrap; align-items: center; gap: 1.25rem; }
.ds-header nav ul li { padding: 0; display: flex; align-items: center; }
.ds-header nav a { color: var(--t-teal); text-decoration: none; font-size: 0.95rem; line-height: 1; padding: 0.25rem 0; white-space: nowrap; display: inline-flex; align-items: center; }
.ds-header nav a:hover, .ds-header nav a:focus-visible { color: var(--t-teal-light); }
.ds-header nav a[aria-current="page"] { color: var(--t-teal); font-weight: 600; }
.ds-header nav details.dropdown > summary { background: none; border: none; padding: 0.25rem 0; line-height: 1; color: var(--t-teal); cursor: pointer; font-size: 0.95rem; display: inline-flex; align-items: center; }
.ds-header nav details.dropdown > summary:hover, .ds-header nav details.dropdown > summary:focus { background: none; color: var(--t-teal-light); }
.ds-header nav details.dropdown > summary[aria-current] { color: var(--t-teal); font-weight: 600; }
.ds-header nav button, .ds-header nav [role="group"] { margin-bottom: 0; }
/* Nicht-klickbarer Benutzer-/Status-Kontext als leises Eyebrow in der Nav-Zeile. */
.ds-nav-context { font-size: 0.66rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--t-muted); cursor: default; white-space: nowrap; display: inline-flex; align-items: center; line-height: 1; }
@media (max-width: 640px) { .ds-header-inner, .ds-footer-inner { padding: 0.7rem 1.1rem; } }
/* Seiten-Container für den Body-Inhalt — gleiche Breite/Ränder wie Header/Footer,
   damit alles sauber fluchtet. Ersetzt Picos schmaleres .container. */
.ds-page { max-width: 1400px; margin: 0 auto; padding: 1.5rem 2rem 2.5rem; }
@media (max-width: 640px) { .ds-page { padding: 1.1rem 1.1rem 2rem; } }

.ds-brand { display: inline-flex; align-items: center; gap: 0.7rem; text-decoration: none; color: var(--t-ink); }
.ds-brand-text { display: flex; flex-direction: column; gap: 3px; }
.ds-brand-title { font-family: var(--f-serif); font-size: 1.35rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1; color: var(--t-ink); white-space: nowrap; }
.ds-brand-sub { font-size: 0.6rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--t-muted); line-height: 1; white-space: nowrap; }
.ds-brand:hover .ds-brand-title, .ds-brand:focus-visible .ds-brand-title { color: var(--t-teal); }

/* Seiten-Kopf: Eyebrow-Label + Serif-Display-Headline mit italic-Teal-Akzent
   (Serif/Sans-Kombi). Akzentwort als <em> oder .accent markieren. */
.ds-eyebrow { font-size: 0.66rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--t-muted); line-height: 1; }
.ds-display { font-family: var(--f-serif); font-weight: 600; font-size: 2rem; letter-spacing: -0.02em; line-height: 1.1; text-transform: none; color: var(--t-ink); margin: 0.35rem 0 0.4rem; }
.ds-display em, .ds-display .accent { color: var(--t-teal-light); font-style: italic; font-weight: 600; }
.ds-lead { color: var(--t-muted); max-width: 62ch; }
/* Pico stuft das LETZTE Kind einer <hgroup> als Untertitel herab (kleiner/leichter).
   Steht eine Tinte-Kopf-Klasse als letztes hgroup-Kind (Eyebrow+Display ohne Lead),
   darf das die Groesse nicht zerstoeren. Gleiche bzw. hoehere Spezifitaet, spaeter geladen. */
hgroup > .ds-eyebrow { font-size: 0.66rem; font-weight: 600; color: var(--t-muted); }
hgroup > .ds-display { font-family: var(--f-serif); font-weight: 600; font-size: 2rem; color: var(--t-ink); }
hgroup > .ds-display.ds-display--xl,
hgroup > .ds-hero-title { font-size: clamp(1.9rem, 4vw, 2.9rem); font-weight: 500; }
hgroup > .ds-lead { font-size: 1rem; font-weight: 400; }

/* Footer: Mini-Markenzeichen + Name·Version · zentrale Links · Copyright. */
.ds-footer { background: var(--t-card); color: var(--t-muted); border-top: 1px solid var(--t-rule); font-size: 0.7rem; padding: 1.1rem 0; margin-top: 2.5rem; }
.ds-footer-brand { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--t-muted); }
.ds-footer-brand .ds-brandmark::before, .ds-footer-brand .ds-brandmark::after { width: 0.8rem; height: 0.8rem; }
.ds-footer-name { color: var(--t-ink-soft); font-weight: 500; }
.ds-footer-version { color: var(--t-faint); }
.ds-footer-links { display: flex; gap: 1.25rem; }
.ds-footer-links a { color: var(--t-muted); text-decoration: none; }
.ds-footer-links a:hover, .ds-footer-links a:focus-visible { color: var(--t-teal); }
.ds-footer-copy { color: var(--t-faint); }
@media (max-width: 576px) { .ds-footer-inner { flex-direction: column; text-align: center; } }

/* -----------------------------------------------------------------------------
   Dark Mode — „Tinte bei Nacht". Teil des Grunddesigns: data-theme="dark" auf
   <html> umschalten (Standard-Toggle .ds-theme-toggle + js/tinte-theme.js).
   Akzent wechselt auf das hellere Bavaria-Teal (#3D93AA), das auf Dunkel besser
   liest. Markenquadrate bleiben in den offiziellen Logofarben.
   -------------------------------------------------------------------------- */
:root[data-theme="dark"] {
  --t-bg:            #161b1e;   /* Tinten-Nacht-Hintergrund */
  --t-card:          #1e2529;   /* Flächen/Karten */
  --t-rule:          #2c353a;   /* Haarlinie */
  --t-border-strong: #3a454b;
  --t-ink:           #e7eae9;   /* Primärtext */
  --t-ink-soft:      #b6c0c2;
  --t-muted:         #8a9699;
  --t-faint:         #5f6c70;
  --t-teal:          #4fb0c4;   /* Akzent heller fürs Dunkle (Links/aktive Zustände) */
  --t-teal-light:    #6fc7d8;
  --t-teal-tint:     rgba(79, 176, 196, 0.12);
  --t-teal-hi-tint:  rgba(111, 199, 216, 0.16);

  --pico-background-color: var(--t-bg);
  --pico-color: var(--t-ink);
  --pico-h1-color: var(--t-ink); --pico-h2-color: var(--t-ink); --pico-h3-color: var(--t-ink);
  --pico-h4-color: var(--t-ink); --pico-h5-color: var(--t-ink); --pico-h6-color: var(--t-ink);
  --pico-muted-color: var(--t-muted);
  --pico-muted-border-color: var(--t-rule);
  --pico-border-color: var(--t-rule);
  --pico-primary: var(--t-teal);
  --pico-primary-hover: var(--t-teal-light);
  --pico-primary-focus: var(--t-teal-tint);
  --pico-primary-background: var(--t-teal);
  --pico-primary-hover-background: var(--t-teal-light);
  --pico-primary-border: var(--t-teal);
  --pico-primary-inverse: #0e1417;
  --pico-primary-underline: rgba(79, 176, 196, 0.4);
  --pico-card-background-color: var(--t-card);
  --pico-card-border-color: var(--t-rule);
  --pico-card-sectioning-background-color: #232b2f;
  --pico-form-element-background-color: #232b2f;
  --pico-form-element-border-color: var(--t-border-strong);
  --pico-form-element-active-border-color: var(--t-teal);
  --pico-form-element-focus-color: var(--t-teal-tint);
  --pico-table-border-color: var(--t-rule);
  --pico-table-row-stripped-background-color: rgba(255, 255, 255, 0.02);
}
/* Tabellenkopf/Sektionsflächen im Dunkeln nicht „weiß" rendern. */
:root[data-theme="dark"] table thead th,
:root[data-theme="dark"] .ds-kpi-bar,
:root[data-theme="dark"] .ds-header,
:root[data-theme="dark"] .ds-footer { background: var(--t-card); }
:root[data-theme="dark"] .ds-display em, :root[data-theme="dark"] .ds-display .accent { color: var(--t-teal-light); }

/* Standard-Modus-Umschalter (segmentiert, Dunkel | Hell). */
.ds-theme-toggle { display: inline-flex; border: 1px solid var(--t-rule); border-radius: 999px; overflow: hidden; }
.ds-theme-toggle button {
  border: none; background: transparent; color: var(--t-muted);
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.03em;
  padding: 0.28rem 0.7rem; border-radius: 0; width: auto; line-height: 1.2; cursor: pointer;
}
.ds-theme-toggle button[aria-pressed="true"] { background: var(--t-teal); color: var(--pico-primary-inverse, #fff); }

/* =============================================================================
   BODY-KOMPONENTEN — aus dem Transkriptor-Look generalisiert (BENT-1217).
   Alle Farben über die Bavaria-Tokens (--t-teal #006680 / --t-teal-light #3D93AA),
   nicht über Transkriptors „Direction A"-Teals. Dark Mode erbt automatisch über
   die Token-Umdefinition. Bewusst: Button-Gruppen als GANZE Einzel-Buttons.
   ========================================================================== */

/* --- Hero-/Split-Layout: Hauptinhalt links, Aside (z. B. Einstellungen) rechts --- */
.ds-split {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 2rem;
  align-items: start;
}
@media (max-width: 960px) { .ds-split { grid-template-columns: 1fr; gap: 1.5rem; } }

/* Selbstbewusste Display-Headline für Hero-Bereiche (größer als Standard-.ds-display). */
.ds-display.ds-display--xl,
.ds-hero-title {
  font-family: var(--f-serif);
  font-size: clamp(1.9rem, 4vw, 2.9rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--t-ink);
  margin: 0.35rem 0 0.4rem;
}
.ds-hero-title em, .ds-hero-title .accent { color: var(--t-teal-light); font-style: italic; font-weight: 500; }

/* --- Panel: Fläche mit mehr Präsenz als .ds-card (Settings/Aside/Editorial) --- */
.ds-panel {
  background: var(--t-card);
  border: 1px solid var(--t-rule);
  border-radius: var(--be-radius-lg);
  padding: 1.5rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}

/* --- Gestylte Datei-Drop-Zone (ersetzt natives <input type=file>) --- */
.ds-dropzone {
  border: 1.5px solid var(--t-teal);
  border-radius: var(--be-radius-lg);
  padding: 2.5rem 2rem;
  background: var(--t-teal);
  color: var(--pico-primary-inverse, #fff);
  display: flex; flex-direction: column; align-items: center; gap: 1rem;
  cursor: pointer; text-align: center;
  transition: box-shadow .15s ease;
}
/* Dragover/Hover: Füllung sichtbar vertiefen (gleichmäßiger Dunkel-Overlay) plus heller Innenring. */
.ds-dropzone:hover, .ds-dropzone:focus-visible, .ds-dropzone.is-dragover {
  box-shadow: inset 0 0 0 999px rgba(0, 0, 0, 0.14), inset 0 0 0 2px rgba(255, 255, 255, 0.45);
  outline: none;
}
.ds-dropzone.is-selected { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.5); }
.ds-dropzone__avatar {
  width: 4.5rem; height: 4.5rem; border-radius: 50%;
  background: rgba(255, 255, 255, 0.16); color: inherit;
  display: inline-flex; align-items: center; justify-content: center;
}
.ds-dropzone__title {
  font-family: var(--f-serif); font-size: 1.15rem; font-weight: 500;
  color: inherit; line-height: 1.3; letter-spacing: -0.01em; margin-bottom: 0.25rem;
}
.ds-dropzone__hint { font-size: 0.85rem; color: inherit; opacity: 0.85; line-height: 1.5; }
.ds-dropzone__hint a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.ds-dropzone__hint a:hover { opacity: 0.75; }

/* --- Kompakter gestylter Datei-Button (wo kein Hero-Drop nötig ist) ---
   Markup: <label class="ds-file"><input type="file"><span class="ds-file__btn">Datei wählen</span>
           <span class="ds-file__name">Keine Datei</span></label> */
.ds-file { display: inline-flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.ds-file input[type="file"] {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.ds-file__btn {
  display: inline-block; cursor: pointer; background: var(--t-card);
  border: 1px solid var(--t-rule); color: var(--t-ink-soft);
  padding: 0.42rem 0.95rem; border-radius: var(--be-radius);
  font-size: 0.875rem; font-weight: 500; line-height: 1.2;
}
.ds-file:hover .ds-file__btn { border-color: var(--t-ink-soft); color: var(--t-ink); }
.ds-file input:focus-visible + .ds-file__btn { outline: 2px solid var(--t-teal-hi); outline-offset: 2px; }
.ds-file__name { color: var(--t-muted); font-size: 0.85rem; }

/* --- Prominenter Primär-CTA (deep teal). Bewusst kräftiger als der schlanke
   Standard-Button — für DIE eine Hauptaktion eines Bereichs. --- */
.ds-cta {
  width: 100%;
  background: var(--t-teal); border: 1px solid var(--t-teal);
  color: var(--pico-primary-inverse, #fff);
  font-family: var(--f-sans); font-size: 0.95rem; font-weight: 600; letter-spacing: -0.005em;
  padding: 0.85rem 1rem; border-radius: var(--be-radius);
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  transition: background .15s, border-color .15s;
}
.ds-cta:hover, .ds-cta:focus-visible { background: var(--pico-primary-hover, #00566b); border-color: var(--pico-primary-hover, #00566b); outline: none; }
.ds-cta:disabled { background: var(--t-faint); border-color: var(--t-faint); cursor: not-allowed; }
.ds-cta--auto { width: auto; }

/* --- Custom-Toggle (Schalter) --- */
.ds-toggle { display: inline-flex; align-items: center; gap: 0.6rem; cursor: pointer; user-select: none; }
.ds-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.ds-toggle__track {
  width: 2.25rem; height: 1.25rem; background: var(--t-rule); border-radius: 999px;
  position: relative; transition: background .15s ease; flex-shrink: 0;
}
.ds-toggle__thumb {
  position: absolute; top: 2px; left: 2px; width: 1rem; height: 1rem;
  background: var(--t-card); border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  transition: left .15s ease;
}
.ds-toggle input:checked + .ds-toggle__track { background: var(--t-teal); }
.ds-toggle input:checked + .ds-toggle__track .ds-toggle__thumb { left: calc(100% - 1rem - 2px); }
.ds-toggle:focus-within .ds-toggle__track { outline: 2px solid var(--t-teal-hi); outline-offset: 2px; }
.ds-toggle__caption { font-size: 0.85rem; color: var(--t-ink-soft); }

/* --- Choice-Buttons: GANZE Einzel-Buttons (kein segmentiertes Grid) ---
   Wrappende Reihe gleichwertiger Auswahl-Buttons; .is-active = Bavaria-Teal. */
.ds-choices { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.ds-choice {
  appearance: none; background: var(--t-card);
  border: 1px solid var(--t-rule); border-radius: var(--be-radius);
  padding: 0.45rem 0.9rem; font-family: var(--f-sans); font-size: 0.85rem; font-weight: 500;
  color: var(--t-ink-soft); cursor: pointer; line-height: 1.2;
  transition: background .12s, border-color .12s, color .12s;
}
.ds-choice:hover { border-color: var(--t-teal-soft); color: var(--t-ink); }
.ds-choice.is-active, .ds-choice[aria-pressed="true"] {
  background: var(--t-teal-tint); border-color: var(--t-teal); color: var(--t-teal); font-weight: 600;
}

/* --- Feld mit Label + rechtsbündigem Hinweis --- */
.ds-field { display: flex; flex-direction: column; gap: 0.6rem; }
.ds-field__head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; }
.ds-field__label { font-size: 0.85rem; font-weight: 600; color: var(--t-ink); }
.ds-field__hint { font-size: 0.72rem; color: var(--t-muted); text-align: right; flex: 1; min-width: 0; }

/* --- Tag-/Pills-Eingabe --- */
.ds-pills {
  display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0.5rem;
  border: 1px solid var(--t-rule); border-radius: var(--be-radius);
  background: var(--t-card); align-items: center; min-height: 2.6rem;
}
.ds-pills:focus-within { border-color: var(--t-teal); }
.ds-pill {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.25rem 0.3rem 0.25rem 0.65rem; border-radius: 999px;
  background: var(--t-teal-tint); color: var(--t-teal); font-size: 0.78rem; font-weight: 500;
}
.ds-pill__remove {
  background: none; border: none; color: inherit; font-size: 0.9rem; line-height: 1;
  padding: 0.1rem 0.35rem; cursor: pointer; border-radius: 999px; opacity: 0.7; width: auto;
}
.ds-pill__remove:hover { opacity: 1; background: var(--t-teal-tint); }
.ds-pills__input {
  flex: 1; min-width: 6rem; border: 1px dashed var(--t-rule); border-radius: 999px;
  padding: 0.25rem 0.75rem; font-family: var(--f-sans); font-size: 0.78rem;
  color: var(--t-ink); background: transparent; margin: 0;
}
.ds-pills__input::placeholder { color: var(--t-faint); }
.ds-pills__input:focus { outline: none; border-color: var(--t-teal); border-style: solid; }

/* --- Tipp-Zeile --- */
.ds-tip {
  font-size: 0.85rem; color: var(--t-ink-soft); line-height: 1.55;
  display: flex; align-items: flex-start; gap: 0.5rem; margin: 0.4rem 0 0;
}
.ds-tip__icon { color: var(--t-teal); flex-shrink: 0; margin-top: 1px; }
.ds-tip strong { color: var(--t-ink); font-weight: 600; }

/* --- Schlanke Progress-Bar --- */
.ds-progress {
  width: 100%; height: 4px; border: 0; border-radius: 999px;
  background: var(--t-hairline); accent-color: var(--t-teal);
}
.ds-progress::-webkit-progress-bar { background: var(--t-hairline); border-radius: 999px; }
.ds-progress::-webkit-progress-value { background: var(--t-teal); border-radius: 999px; }

/* --- Mono-Tabularzahlen (Zeiten, Codes, Meta) --- */
.ds-mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }

/* -----------------------------------------------------------------------------
   Hilfe-Tooltip — .ds-help (BENT-1249)
   CSS-only, kein JS. Zeigt ein rundes Fragezeichen-Icon; beim Hover/Focus
   klappt ein weisser Popover-Kasten auf. Nutzung:
     <span class="ds-help" tabindex="0" aria-label="Erklärung zu NFK">
       <span class="ds-help__popover">Netto-Filmkosten: …</span>
     </span>
   Hinweis: In dichten Tabellen-Spaltenkoepfen stattdessen das native title-Attribut
   auf <abbr> oder <th> nutzen — der Popover braucht overflow-visible im Elternelement.
   -------------------------------------------------------------------------- */
.ds-help {
  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;
}
.ds-help::before { content: "?"; }
.ds-help:hover,
.ds-help:focus { background: var(--t-teal); color: #fff; outline: none; }
.ds-help:focus-visible { outline: 2px solid var(--t-teal-hi); outline-offset: 2px; }
.ds-help__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;
}
.ds-help__popover::after {
  content: ""; position: absolute;
  top: 100%; left: 50%; transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--t-rule);
}
.ds-help__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;
}
.ds-help:hover .ds-help__popover,
.ds-help:focus .ds-help__popover { display: block; }
.ds-help__popover .ds-help__title {
  display: block; font-weight: 600; color: var(--t-ink);
  margin-bottom: 0.25rem; font-size: 0.8rem;
}
:root[data-theme="dark"] .ds-help {
  background: var(--t-teal-tint); color: var(--t-teal);
  border-color: rgba(79, 176, 196, 0.25);
}
:root[data-theme="dark"] .ds-help:hover,
:root[data-theme="dark"] .ds-help:focus { background: var(--t-teal); color: #0e1417; }

/* =============================================================================
   Alert / Notice (.ds-alert), BENT-1366
   Hinweis-, Erfolgs-, Warn- und Fehlerboxen. Ersetzt handgebaute Inline-Style-
   Kaesten. Basis ist Info (Teal); Variante via Modifier-Klasse.
   Markup:
     <div class="ds-alert ds-alert--error">
       <strong class="ds-alert__title">Fehler</strong> Text ...
     </div>
   ========================================================================== */
.ds-alert {
  border: 1px solid var(--t-rule);
  border-left: 3px solid var(--t-teal);
  background: var(--t-teal-tint);
  color: var(--t-ink);
  border-radius: var(--be-radius);
  padding: 0.7rem 0.95rem;
  margin: 0 0 1rem;
  font-size: 0.95rem;
}
.ds-alert > :last-child { margin-bottom: 0; }
.ds-alert__title { display: block; font-weight: 600; margin-bottom: 0.15rem; }
.ds-alert--info    { border-left-color: var(--t-teal);  background: var(--t-teal-tint); }
.ds-alert--success { border-left-color: var(--t-green); background: var(--t-green-tint); }
.ds-alert--warning { border-left-color: var(--t-amber); background: var(--t-amber-tint); }
.ds-alert--error   { border-left-color: var(--t-red);   background: var(--t-red-tint); }

/* Dunkelmodus: dezenter Overlay-Hintergrund, farbiger Balken bleibt */
:root[data-theme="dark"] .ds-alert {
  background: rgba(255, 255, 255, 0.05);
  color: var(--t-ink);
  border-color: var(--t-rule);
}

/* =============================================================================
   Print / PDF, BENT-1366
   Offizielle Akzentfarbe (#006680) auch im Druck, Light-Basis erzwingen,
   Chrome ausblenden. Gilt fuer alle Tools, die das Theme laden; dedizierte
   PDF-Templates referenzieren ebenfalls die offizielle Farbe (kein #2a9d8f).
   ========================================================================== */
@media print {
  :root, :root[data-theme="dark"] {
    --t-teal:       #006680;
    --t-teal-light: #3D93AA;
  }
  body { background: #ffffff; color: #0f1d22; }
  .ds-header, .ds-footer, nav, .ds-theme-toggle { display: none !important; }
  a { color: #006680; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}