/* VKS Seminarportal – Design-Grundlayout
   Schrift: Space Grotesk (Display) + Manrope (Text), self-hosted.
   Farbwelt: warmes Papier, tiefe Tinte, Signalrot als Akzent. */

:root {
    --paper: #faf9f5;
    --weiss: #ffffff;
    --ink: #16181d;
    --ink-soft: #3a3d45;
    --muted: #64748b;
    --line: #e5e7eb;
    --line-soft: #ecedf1;
    --rot: #e2001a;
    --rot-tief: #c20018;
    --rot-dunkel: #7a1419;
    --rot-hell: #ff6b76;
    --rot-zart: #fce8ea;
    /* Semantische Statusfarben (Design-Tokens, Paket 76). */
    --gruen: #0f6e56;
    --gruen-tief: #0b5946;
    --gruen-zart: #e4f1ec;
    --warn: #9a6a00;
    --warn-zart: #fdf3e2;
    --radius: 18px;
    --radius-sm: 12px;
    /* Abstands-Skala + Schatten – für Komponenten statt Inline-Styles. */
    --raum-1: 4px;
    --raum-2: 8px;
    --raum-3: 12px;
    --raum-4: 16px;
    --raum-5: 24px;
    --raum-6: 36px;
    --schatten-1: 0 1px 2px rgba(20, 24, 33, .05);
    --schatten-2: 0 8px 20px -10px rgba(20, 24, 33, .22);
    --maxw: 1240px;
    --kopf-verlauf: linear-gradient(135deg, #8e1622 0%, #5c1016 48%, #1a0d10 100%);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

/* Statistik-Dashboard */
.stat-zeitraum { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; background: var(--weiss); border: 0.5px solid var(--line); border-radius: var(--radius); padding: 16px 18px; margin-bottom: 18px; }
.stat-zeitraum .formfeld { margin: 0; }
.stat-vergleich { font-size: 13px; color: var(--muted); margin-left: auto; }
.stat-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; margin-bottom: 22px; }
.stat-kpi { background: var(--weiss); border: 0.5px solid var(--line); border-radius: var(--radius); padding: 16px 18px; }
.stat-kpi-wert { font-family: 'Space Grotesk', sans-serif; font-size: 28px; font-weight: 600; color: var(--ink); }
.stat-kpi-label { font-size: 13px; color: var(--ink-soft); margin-top: 2px; }
.stat-kpi-delta { font-size: 12px; margin-top: 8px; display: flex; gap: 8px; align-items: center; }
.stat-kpi-delta .auf { color: #0f7a3d; font-weight: 600; }
.stat-kpi-delta .ab { color: var(--rot-tief); font-weight: 600; }
.stat-kpi-delta .neutral { color: var(--muted); }
.stat-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.stat-karte { background: var(--weiss); border: 0.5px solid var(--line); border-radius: var(--radius); padding: 18px 20px; }
.stat-karte h3 { font-family: 'Space Grotesk', sans-serif; font-size: 15px; margin: 0 0 12px; }
.stat-leer { font-size: 13px; color: var(--muted); margin: 0; }
.stat-balken { list-style: none; margin: 0; padding: 0; }
.stat-balken li { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px 12px; padding: 6px 0; border-bottom: 0.5px solid var(--line-soft); font-size: 13px; }
.stat-balken li:last-child { border-bottom: none; }
.stat-label { color: var(--ink-soft); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stat-wert { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink); }
/* Klickbare Statistik-Zeile: display:contents entfernt die Box, daher greifen
   cursor/Affordance nur auf den Kind-Spans. Ein Chevron am Wert signalisiert die
   Klickbarkeit schon im Ruhezustand (Ticket #21). */
.stat-link { display: contents; color: inherit; text-decoration: none; }
.stat-link .stat-label, .stat-link .stat-wert { cursor: pointer; }
.stat-link .stat-label { color: var(--rot-tief); }
.stat-link .stat-wert::after { content: ' ›'; color: var(--rot-tief); font-weight: 700; }
.stat-link:hover .stat-label { text-decoration: underline; }
.stat-link:hover .stat-label, .stat-link:hover .stat-wert { color: var(--rot); }
.stat-bar { grid-column: 1 / -1; height: 6px; background: var(--line-soft); border-radius: 999px; overflow: hidden; }
.stat-bar > span { display: block; height: 100%; background: var(--rot); border-radius: 999px; }

/* Cookie-Consent-Banner */
.consent { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; background: var(--ink); color: #fff; box-shadow: 0 -10px 30px -12px rgba(0,0,0,0.5); }
.consent[hidden] { display: none; }
.consent-inner { max-width: var(--maxw); margin: 0 auto; padding: 18px 28px; display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.consent-text { margin: 0; font-size: 14px; color: rgba(255,255,255,0.85); flex: 1; min-width: 240px; }
.consent-text a { color: #fff; text-decoration: underline; }
.consent-aktionen { display: flex; gap: 10px; flex-wrap: wrap; }

/* A11y: Sprunglink + sichtbarer Tastaturfokus */
.skip-link { position: absolute; left: 12px; top: -48px; z-index: 100; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 0 0 var(--radius-sm) var(--radius-sm); transition: top .12s ease; }
.skip-link:focus { top: 0; }
:focus-visible { outline: 2px solid var(--rot); outline-offset: 2px; border-radius: 4px; }
main:focus { outline: none; }

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: 'Manrope', system-ui, -apple-system, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

.display { font-family: 'Space Grotesk', 'Manrope', sans-serif; letter-spacing: -0.02em; }

a { color: inherit; text-decoration: none; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }

/* ---------- Weiße Kopfleiste (Logo + Navigation) ---------- */
.topbar { background: var(--weiss); border-bottom: 0.5px solid var(--line); }
.nav {
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 12px 0;
}
.marke { margin-right: auto; display: flex; align-items: center; }
.marke img { height: 48px; width: auto; display: block; }
.nav a.link { font-size: 14px; color: var(--ink-soft); }
.nav a.link:hover { color: var(--rot-tief); }
.nav .einloggen { font-size: 14px; color: var(--rot-tief); padding: 8px 17px; border: 1px solid var(--rot-tief); border-radius: 999px; }
.nav .einloggen:hover { background: var(--rot-zart); }

/* ---------- Roter Hero-Kopf ---------- */
.kopf { background: var(--kopf-verlauf); color: #fff; }

/* Hero (Startseite) – zweispaltig, nutzt die volle Breite */
.hero { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 56px; align-items: center; padding: 36px 0 40px; }
.hero-haupt { min-width: 0; }
.eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.eyebrow .strich { width: 26px; height: 2px; background: var(--rot-hell); }
.eyebrow .text { font-family: 'Space Grotesk', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.14em; color: var(--rot-hell); }
.hero h1 { font-family: 'Space Grotesk', sans-serif; font-size: clamp(34px, 6vw, 50px); line-height: 1.05; font-weight: 700; color: #fff; margin: 0; max-width: 16ch; letter-spacing: -0.02em; }
.hero .lead { font-size: 17px; color: rgba(255,255,255,0.82); margin: 16px 0 26px; max-width: 52ch; }
.hero-stats { display: flex; flex-direction: column; gap: 26px; padding-left: 40px; border-left: 1px solid rgba(255,255,255,0.18); }
.hero-stats .zahl { font-family: 'Space Grotesk', sans-serif; font-size: 32px; font-weight: 600; color: #fff; }
.hero-stats .label { font-size: 12px; color: rgba(255,255,255,0.7); }

/* Kompakter Seitenkopf (Unterseiten) */
.seitenkopf { padding: 30px 0 42px; }
.seitenkopf h1 { font-family: 'Space Grotesk', sans-serif; font-size: clamp(26px, 4vw, 34px); font-weight: 700; color: #fff; margin: 0; letter-spacing: -0.02em; }
.seitenkopf .lead { font-size: 15px; color: rgba(255,255,255,0.8); margin: 12px 0 0; max-width: 60ch; }

/* ---------- Buttons ---------- */
.btn { display: inline-block; font-size: 15px; padding: 13px 26px; border-radius: 999px; border: 1px solid transparent; cursor: pointer; transition: transform .08s ease, background .15s ease; font-family: 'Manrope', sans-serif; }
.btn:active { transform: scale(0.98); }
.btn-rot { background: var(--rot); color: #fff; box-shadow: 0 8px 20px -6px color-mix(in srgb, var(--rot) 50%, transparent); }
.btn-rot:hover { background: var(--rot-tief); }
.btn-weiss { background: #fff; color: var(--rot-tief); font-weight: 500; }
.btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,0.42); }
.btn-ghost:hover { background: rgba(255,255,255,0.12); }
/* Sekundärer Button (kompakt, dezent – aber klar ein Button), Paket 76. */
.btn-leise { display: inline-flex; align-items: center; gap: 7px; font-family: 'Manrope', sans-serif; font-size: 13px; font-weight: 500; padding: 8px 15px; border-radius: 999px; border: 0.5px solid var(--line); background: var(--weiss); color: var(--ink); cursor: pointer; transition: border-color .14s ease, color .14s ease, background .14s ease; }
.btn-leise:hover { border-color: var(--rot); color: var(--rot); }
.btn-dunkel { background: var(--ink); color: #fff; }
/* Themenbild-/Medien-Bibliothek (Paket 77) */
.bilder-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; margin-top: 16px; }
.bild-karte { border: 0.5px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--weiss); box-shadow: var(--schatten-1); display: flex; flex-direction: column; }
.bild-karte > img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; background: var(--paper); }
.bild-karte .bild-meta { padding: 10px 12px; font-size: 13px; }
.bild-karte .bild-meta .titel { font-weight: 600; }
.themenbild-wahl { display: block; width: 100%; padding: 0; border: 2px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--weiss); cursor: pointer; text-align: left; transition: border-color .14s ease; }
.themenbild-wahl:hover { border-color: var(--rot); }
.themenbild-wahl.gewaehlt { border-color: var(--gruen); }
.themenbild-wahl > img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; background: var(--paper); }
.themenbild-wahl > span { display: block; padding: 6px 8px; font-size: 12px; color: var(--ink-soft); }
/* Badges über dem Seminarbild: „Neu" + Format (Paket 78) */
.bild-badges { position: absolute; top: 10px; left: 10px; right: 10px; display: flex; gap: 8px; z-index: 3; pointer-events: none; }
.bild-badge { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 5px 9px; border-radius: 999px; box-shadow: 0 2px 6px rgba(0,0,0,.18); line-height: 1; }
.badge-neu { background: var(--rot); color: #fff; }
.badge-format { margin-left: auto; }
/* Zeilen-Ansicht: kleineres Thumbnail -> kompaktere Badges. */
.liste-bild .bild-badges { top: 6px; left: 6px; right: 6px; gap: 5px; }
.liste-bild .bild-badge { font-size: 9px; letter-spacing: .03em; padding: 3px 6px; box-shadow: 0 1px 4px rgba(0,0,0,.16); }
.btn-dunkel:hover { background: #000; }

/* ---------- Inhalt ---------- */
main { padding: 40px 0 64px; }
.abschnitt-kopf { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 22px; }
.abschnitt-kopf h2 { font-family: 'Space Grotesk', sans-serif; font-size: 22px; font-weight: 600; margin: 0; color: var(--ink); }
.mehr { font-size: 13px; color: var(--rot-tief); font-weight: 500; }
.mehr-unten { text-align: center; margin-top: 24px; }
.mehr-unten .mehr { display: inline-block; padding: 9px 20px; border: 1px solid var(--line); border-radius: 999px; transition: border-color .12s, color .12s; }
.mehr-unten .mehr:hover { border-color: var(--rot); color: var(--rot); }

.label-eyebrow { font-size: 12px; color: var(--rot-tief); font-weight: 600; letter-spacing: 0.06em; }

/* Karten-Raster */
.raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 26px; }

.karte { background: var(--weiss); border-radius: var(--radius); padding: 24px; box-shadow: 0 1px 2px rgba(20,21,25,0.04), 0 14px 30px -14px rgba(20,21,25,0.16); transition: transform .12s ease, box-shadow .12s ease; display: flex; flex-direction: column; }
.karte:hover { transform: translateY(-3px); box-shadow: 0 1px 2px rgba(20,21,25,0.05), 0 22px 40px -16px rgba(20,21,25,0.24); }
.karte h3 { font-family: 'Space Grotesk', sans-serif; font-size: 18px; font-weight: 600; line-height: 1.28; color: var(--ink); margin: 14px 0 8px; overflow-wrap: break-word; hyphens: auto; }
.karte .meta { font-size: 13px; color: var(--muted); overflow-wrap: break-word; }
.karte p { overflow-wrap: break-word; hyphens: auto; }
.karte .fuss { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 0.5px solid var(--line-soft); padding-top: 14px; margin-top: auto; }
.karte .preis { font-size: 13px; color: var(--ink-soft); min-width: 0; }
.karte .details { font-size: 13px; color: var(--rot-tief); font-weight: 500; white-space: nowrap; flex-shrink: 0; }
/* Seminarbild (4:3) + Anbieterfarbe-Akzent + Partner-Badge (Paket 22) */
.karte-bild { display: block; margin: -24px -24px 14px; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius) var(--radius) 0 0; background: var(--line-soft); }
/* Redaktions-Schnellzugriff „Bearbeiten" auf der Kachel (nur Staff). */
.karte { position: relative; }
.seminar-edit { position: absolute; top: 12px; left: 12px; z-index: 3; display: inline-flex; align-items: center; gap: 5px;
    font-size: 12px; font-weight: 600; color: #fff; background: rgba(20,21,25,.72); padding: 5px 10px; border-radius: 999px;
    text-decoration: none; backdrop-filter: blur(2px); box-shadow: 0 2px 8px -2px rgba(0,0,0,.35); }
.seminar-edit:hover { background: var(--rot-tief); color: #fff; }
.karte-bild > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.karte-kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.partner-badge { font-size: 11px; font-weight: 600; color: var(--gruen); background: #E1F5EE; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }

/* dunkle Akzentkarte */
.karte-dunkel { background: var(--ink); box-shadow: 0 14px 30px -14px rgba(20,21,25,0.4); }
.karte-dunkel h3 { color: #fff; }
.karte-dunkel .label-eyebrow { color: var(--rot-hell); }
.karte-dunkel .meta { color: rgba(255,255,255,0.6); }
.karte-dunkel .fuss { border-top-color: rgba(255,255,255,0.12); }
.karte-dunkel .preis { color: rgba(255,255,255,0.7); }
.karte-dunkel .details { color: var(--rot-hell); }

/* Format-Pille */
.pille { display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; padding: 4px 10px; border-radius: 999px; background: var(--rot-zart); color: var(--rot-dunkel); }

/* Inhalts-Textkarte (Datenschutz etc.) */
.textkarte { background: var(--weiss); border-radius: var(--radius); padding: 32px; box-shadow: 0 1px 2px rgba(20,21,25,0.04), 0 14px 30px -14px rgba(20,21,25,0.12); max-width: 760px; }
.textkarte h2 { font-family: 'Space Grotesk', sans-serif; font-weight: 600; }
/* Info-Hinweise: blau (neutral/informativ), nicht rot (Warnung). */
.hinweis { background: #e8eefb; border-radius: var(--radius-sm); padding: 14px 18px; color: #1e3a8a; font-size: 14px; border: 0.5px solid #c7d4f5; }
.hinweis a { color: #1d4ed8; text-decoration: underline; }
/* Echte Warnung weiterhin rot, falls explizit gewünscht. */
.hinweis-warnung { background: var(--rot-zart); color: var(--rot-dunkel); border-color: transparent; }
.hinweis-warnung a { color: var(--rot-tief); }

/* Formularfelder */
.feld { width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); font: inherit; background: #fff; color: var(--ink); }
.feld:focus { outline: none; border-color: var(--rot); box-shadow: 0 0 0 3px var(--rot-zart); }
.feld-label { display: block; font-size: 13px; color: var(--ink-soft); margin: 0 0 6px; font-weight: 500; }
.feld-gruppe { margin-bottom: 14px; }
.feld-hinweis { font-size: 12px; color: var(--muted); margin: 0 0 6px; }
.feld-pflicht { color: var(--rot-tief); }
.feld[aria-invalid="true"] { border-color: var(--rot-tief); }

/* ---------- Footer ---------- */
.footer { border-top: 0.5px solid var(--line); margin-top: 40px; }
.footer .inner { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; padding: 26px 0; font-size: 14px; color: var(--muted); }
.footer a { color: var(--ink-soft); }
.footer a:hover { color: var(--rot-tief); }
.footer .rechts { margin-left: auto; font-size: 13px; }

@media (max-width: 900px) {
    .hero { grid-template-columns: 1fr; gap: 30px; }
    .hero-stats { flex-direction: row; flex-wrap: wrap; gap: 32px; padding-left: 0; border-left: none; }
}

@media (max-width: 720px) {
    /* Öffentliche Links bleiben sichtbar (umbrechen statt ausblenden). */
    .nav { flex-wrap: wrap; gap: 10px 16px; }
    .nav .marke { flex: 1 0 100%; }
    .nav a.link { font-size: 15px; }
}

/* ---------- Paket 5: Filter, Listenansicht, Badges, Breadcrumbs ---------- */
.breadcrumb { font-size: 13px; color: var(--muted); margin: 0 0 18px; }
.breadcrumb a { color: var(--ink-soft); }
.breadcrumb a:hover { color: var(--rot-tief); }
.breadcrumb .sep { margin: 0 6px; color: var(--line); }

.filterleiste {
    background: var(--weiss);
    border: 0.5px solid var(--line);
    border-radius: var(--radius);
    padding: 18px;
    margin-bottom: 22px;
    box-shadow: 0 1px 2px rgba(20,21,25,0.04), 0 10px 24px -16px rgba(20,21,25,0.14);
}
.filter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; align-items: end; }
.filter-feld label { display: block; font-size: 12px; color: var(--ink-soft); margin: 0 0 5px; font-weight: 500; }
.filter-feld input, .filter-feld select {
    width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm);
    font: inherit; background: #fff; color: var(--ink);
}
.filter-feld input:focus, .filter-feld select:focus { outline: none; border-color: var(--rot); box-shadow: 0 0 0 3px var(--rot-zart); }
.filter-aktionen { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 14px; }
.filter-reset { font-size: 13px; color: var(--ink-soft); }
.filter-reset:hover { color: var(--rot-tief); }

.ergebnis-kopf { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.ergebnis-anzahl { font-size: 14px; color: var(--muted); }
.ansicht-toggle { display: inline-flex; border: 0.5px solid var(--line); border-radius: 999px; overflow: hidden; }
.ansicht-toggle a { font-size: 13px; padding: 7px 14px; color: var(--ink-soft); }
.ansicht-toggle a.aktiv { background: var(--ink); color: #fff; }

/* Teilen-Plugin (Paket 21) */
.teilen { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.teilen-label { font-size: 13px; color: var(--muted); font-weight: 600; }
.teilen-liste { display: inline-flex; flex-wrap: wrap; gap: 8px; }
.teilen-btn { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 500; padding: 8px 14px; border: 0.5px solid var(--line); border-radius: 999px; color: var(--ink); background: var(--weiss); cursor: pointer; transition: transform .14s ease, border-color .14s ease, background-color .14s ease, color .14s ease, box-shadow .14s ease; }
.teilen-btn .icon { color: var(--ink-soft); transition: color .14s ease; }
.teilen-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 18px -10px rgba(20,24,33,.35); border-color: transparent; color: #fff; }
.teilen-btn:hover .icon { color: #fff; }
.teilen-native { background: var(--ink); color: #fff; border-color: var(--ink); }
.teilen-native .icon { color: #fff; }
.teilen-email:hover { background: var(--rot); }
.teilen-whatsapp:hover { background: #25D366; }
.teilen-linkedin:hover { background: #0A66C2; }
.teilen-facebook:hover { background: #1877F2; }
.teilen-telegram:hover { background: #26A5E4; }
.teilen-x:hover { background: #000; }
.teilen-copy:hover { background: var(--ink); }
.teilen-feedback { font-size: 13px; color: var(--gruen); }

/* Seitenweise Anzeige (Erweiterungspaket 1) */
.seiten-leiste { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
.seiten-pro { display: inline-flex; align-items: center; gap: 6px; }
.seiten-pro-label { font-size: 13px; color: var(--muted); margin-right: 4px; }
.seiten-pro-link { font-size: 13px; padding: 6px 11px; border: 0.5px solid var(--line); border-radius: 999px; color: var(--ink-soft); }
.seiten-pro-link:hover { border-color: var(--ink-soft); }
.seiten-pro-link.aktiv { background: var(--ink); color: #fff; border-color: var(--ink); }
.seiten-blaettern { display: inline-flex; align-items: center; gap: 12px; }
.seiten-knopf { font-size: 13px; padding: 7px 14px; border: 0.5px solid var(--line); border-radius: 999px; color: var(--ink); }
.seiten-knopf:hover { border-color: var(--ink-soft); }
.seiten-knopf.inaktiv { color: var(--line); pointer-events: none; }
.seiten-info { font-size: 13px; color: var(--muted); }

/* Status-Badge (Icon + Text, nicht nur Farbe – A11y) */
.badge { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 500; padding: 3px 10px; border-radius: 999px; }
.badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; }
.badge-veroeffentlicht { background: #E1F5EE; color: var(--gruen); }
.badge-veroeffentlicht::before { background: var(--gruen); }
.badge-ausgebucht { background: var(--rot-zart); color: var(--rot-dunkel); }
.badge-ausgebucht::before { background: var(--rot-tief); }
.badge-verschoben { background: #FAEEDA; color: #854F0B; }
.badge-verschoben::before { background: #854F0B; }
.badge-abgesagt { background: #F1EFE8; color: #5F5E5A; }
.badge-abgesagt::before { background: #5F5E5A; }
/* Fehlende Status-Badges ergänzt (sonst farbloser Text). */
.badge-entwurf { background: #EEF0F4; color: #475569; }
.badge-entwurf::before { background: #64748B; }
.badge-zur_pruefung_eingereicht { background: #E3EEFB; color: #1F5FA8; }
.badge-zur_pruefung_eingereicht::before { background: #1F5FA8; }
.badge-aenderung_zur_pruefung { background: #E3EEFB; color: #1F5FA8; }
.badge-aenderung_zur_pruefung::before { background: #1F5FA8; }
.badge-abgelehnt { background: var(--rot-zart); color: var(--rot-tief); }
.badge-abgelehnt::before { background: var(--rot-tief); }
.badge-archiviert { background: #ECEDF1; color: #64748B; }
.badge-archiviert::before { background: #94A3B8; }

/* Listenansicht */
.liste { display: flex; flex-direction: column; gap: 12px; }
.liste-zeile { display: grid; grid-template-columns: auto auto minmax(0,1fr) auto; gap: 0 22px; align-items: center; padding: 12px 22px; background: var(--weiss); border: 0.5px solid var(--line); border-radius: 14px; box-shadow: 0 1px 2px rgba(20,24,33,0.05); transition: box-shadow .14s ease, transform .14s ease; }
.liste-zeile:hover { box-shadow: 0 8px 20px -10px rgba(20,24,33,0.22); }
.liste-zeile > * { min-width: 0; }
/* Festes 4:3-Vorschaubild – unabhängig von der Zeilenhöhe (Paket 86). */
.liste-bild { position: relative; align-self: center; display: block; width: 150px; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 10px; background: var(--line-soft); }
/* Admin-wählbare Bildgröße der Zeilenansicht (Paket 84). */
.liste-klein .liste-bild { width: 104px; }
.liste-gross .liste-bild { width: 220px; }
.liste-gross .liste-bild .bild-badge { font-size: 10px; padding: 4px 8px; }
/* „Groß": mehr Daten je Zeile (Teaser + Mehrtages-Zeitraum). Sonst ausgeblendet. */
.liste-teaser { display: none; margin: 6px 0 0; font-size: 13px; color: var(--ink-soft); line-height: 1.5; }
.liste-gross .liste-teaser { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.liste-datum-ende { display: none; }
.liste-gross .liste-datum-ende { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
/* Drag & Drop-Ablagefläche für Datei-Uploads (Paket 85). */
.dropzone { border: 1.5px dashed var(--line); border-radius: var(--radius-sm); padding: 12px 14px; background: var(--paper); transition: border-color .12s ease, background .12s ease; }
.dropzone-aktiv { border-color: var(--rot); background: var(--rot-zart); }
.dropzone-hinweis { margin: 8px 0 0; font-size: 12px; color: var(--muted); }
.dropzone-aktiv .dropzone-hinweis { color: var(--rot-tief); }
.liste-bild > img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 640px) { .liste-zeile { grid-template-columns: auto minmax(0,1fr); gap: 0 16px; padding: 12px 16px; } .liste-bild { width: 120px; } .liste-datum { display: none; } }
.liste-datum { font-family: 'Space Grotesk', sans-serif; font-size: 14px; font-weight: 500; color: var(--ink); white-space: nowrap; }
.liste-titel { font-family: 'Space Grotesk', sans-serif; font-size: 16px; font-weight: 500; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.liste-titel a:hover { color: var(--rot-tief); }
.liste-meta { font-size: 13px; color: var(--muted); margin-top: 3px; }
.leer { text-align: center; padding: 48px 20px; color: var(--muted); }

@media (max-width: 600px) {
    /* Bild oben (volle Breite), Rest darunter gestapelt. */
    .liste-zeile { grid-template-columns: 1fr; gap: 8px; padding: 14px 16px; }
    .liste-bild { width: 100%; aspect-ratio: 4 / 3; }
}

/* Screenreader-only (A11y) */
.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; }

/* Hero-Suche */
.hero-suche { display: flex; gap: 10px; max-width: 520px; margin: 6px 0 24px; }
.hero-suche input { flex: 1; padding: 13px 16px; border: 1px solid rgba(255,255,255,0.4); border-radius: 999px; background: rgba(255,255,255,0.12); color: #fff; font: inherit; }
.hero-suche input::placeholder { color: rgba(255,255,255,0.7); }
.hero-suche input:focus { outline: none; background: rgba(255,255,255,0.18); border-color: #fff; }
@media (max-width: 600px) { .hero-suche { flex-direction: column; } }

/* ---------- Paket 6: Anbieter-Bereich ---------- */
.anbieter-nav { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; padding: 7px 8px; background: var(--weiss); border: 0.5px solid var(--line); border-radius: 999px; margin-bottom: 24px; box-shadow: 0 1px 2px rgba(20,21,25,0.04), 0 12px 30px -22px rgba(20,21,25,0.5); }
.anbieter-nav a { font-size: 14px; font-weight: 500; color: var(--ink-soft); padding: 8px 15px; border-radius: 999px; line-height: 1; transition: background .14s ease, color .14s ease; }
.anbieter-nav a:hover { background: var(--paper); color: var(--ink); }
.anbieter-nav a.aktiv { background: var(--rot); color: #fff; box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--rot) 55%, transparent); }
.anbieter-nav a.aktiv:hover { background: var(--rot-tief); color: #fff; }
.anbieter-nav form { margin-left: auto; }

/* Klassenlose Buttons (zuvor browser-grau) bekommen einen ruhigen Premium-Stil */
button:not([class]) { font: inherit; font-size: 13px; padding: 7px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--weiss); color: var(--ink-soft); cursor: pointer; transition: border-color .12s ease, color .12s ease, background .12s ease; }
button:not([class]):hover { border-color: var(--rot); color: var(--rot-tief); }
button:not([class]):focus-visible { outline: 2px solid var(--rot); outline-offset: 1px; }

.flash { border-radius: var(--radius-sm); padding: 12px 16px; margin-bottom: 18px; font-size: 14px; }
.flash-erfolg { background: #E1F5EE; color: var(--gruen); }
.flash-fehler { background: var(--rot-zart); color: var(--rot-dunkel); }
.feldfehler { color: var(--rot-tief); font-size: 13px; margin: 4px 0 0; }

.formabschnitt { background: var(--weiss); border: 0.5px solid var(--line); border-radius: var(--radius); padding: 22px; margin-bottom: 18px; }
.formabschnitt > h3 { font-family: 'Space Grotesk', sans-serif; font-size: 16px; font-weight: 600; margin: 0 0 16px; color: var(--ink); }
.formreihe { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.formfeld { display: flex; flex-direction: column; }
.formfeld.voll { grid-column: 1 / -1; }
.formfeld label { font-size: 13px; color: var(--ink-soft); margin: 0 0 5px; font-weight: 500; }
.formfeld input, .formfeld select, .formfeld textarea { padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); font: inherit; background: #fff; color: var(--ink); width: 100%; }
.formfeld textarea { min-height: 90px; resize: vertical; }
.formfeld input:focus, .formfeld select:focus, .formfeld textarea:focus { outline: none; border-color: var(--rot); box-shadow: 0 0 0 3px var(--rot-zart); }
.autosave-status { font-size: 12px; color: var(--muted); }

.seminar-tabelle { width: 100%; border-collapse: collapse; background: var(--weiss); border: 0.5px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.seminar-tabelle th, .seminar-tabelle td { text-align: left; padding: 12px 16px; border-bottom: 0.5px solid var(--line-soft); font-size: 14px; }
.seminar-tabelle th { font-size: 12px; color: var(--muted); font-weight: 500; }
.seminar-tabelle th a.sort-link { color: inherit; text-decoration: none; cursor: pointer; white-space: nowrap; }
.seminar-tabelle th a.sort-link:hover { color: var(--ink); text-decoration: underline; }
.seminar-tabelle th a.sort-link.aktiv { color: var(--rot-tief); font-weight: 700; }
.seminar-tabelle tr:last-child td { border-bottom: none; }
.seminar-tabelle .aktionen { display: flex; gap: 12px; flex-wrap: wrap; }
.seminar-tabelle .aktionen a, .seminar-tabelle .aktionen button { font-size: 13px; color: var(--rot-tief); background: none; border: none; cursor: pointer; padding: 0; }

/* Bestätigungsdialog (z. B. Anbieter löschen) */
dialog.dialog { border: none; border-radius: var(--radius); padding: 26px; max-width: 460px; width: calc(100% - 40px); box-shadow: 0 30px 60px -20px rgba(20,21,25,0.4); background: var(--weiss); color: var(--ink); }
dialog.dialog::backdrop { background: rgba(20,21,25,0.45); }
dialog.dialog h3 { font-family: 'Space Grotesk', sans-serif; }

/* ---------- Paket 7: VKS-Redaktion ---------- */
.kennzahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-bottom: 24px; }
.kennzahl { display: block; background: var(--weiss); border: 0.5px solid var(--line); border-radius: var(--radius); padding: 18px; }
a.kennzahl { text-decoration: none; color: inherit; transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease; }
a.kennzahl:hover { border-color: var(--rot); box-shadow: 0 6px 18px -10px rgba(20,21,25,0.25); transform: translateY(-1px); }
a.kennzahl:focus-visible { outline: 2px solid var(--rot); outline-offset: 2px; }
.kennzahl .zahl { font-family: 'Space Grotesk', sans-serif; font-size: 28px; font-weight: 600; color: var(--ink); }
.kennzahl .label { font-size: 13px; color: var(--muted); margin-top: 2px; }
.kennzahl.akzent { border-color: var(--rot-tief); }
.kennzahl.akzent .zahl { color: var(--rot-tief); }

.checkliste { list-style: none; padding: 0; margin: 0; }
.checkliste li { display: flex; gap: 10px; align-items: flex-start; padding: 7px 0; font-size: 14px; color: var(--ink-soft); }
.checkliste li::before { content: "✓"; color: var(--gruen); font-weight: 600; }

.aktion-leiste { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; margin-top: 18px; }
.aktion-leiste form { display: flex; flex-direction: column; gap: 8px; }
.aktion-leiste textarea { min-width: 240px; min-height: 60px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); font: inherit; }

/* Rich-Text-Ausgabe (Paket 24) – gemeinsame Darstellung auf Web/Detail/Profil/Prüfung */
.rich-text > :first-child { margin-top: 0; }
.rich-text > :last-child { margin-bottom: 0; }
.rich-text p { margin: 0 0 12px; line-height: 1.6; }
.rich-text h3, .rich-text h4 { font-family: 'Space Grotesk', sans-serif; color: var(--ink); margin: 20px 0 8px; }
.rich-text h3 { font-size: 18px; }
.rich-text h4 { font-size: 16px; }
.rich-text ul, .rich-text ol { margin: 0 0 12px; padding-left: 22px; }
.rich-text li { margin: 2px 0; line-height: 1.6; }
.rich-text a { color: var(--rot-tief); text-decoration: underline; }
.rich-text blockquote { margin: 0 0 12px; padding: 4px 0 4px 14px; border-left: 3px solid var(--rot-zart); color: var(--ink-soft); }

/* Editor (Paket 24) – kuratierte Toolbar, on-brand */
.editor { border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; overflow: hidden; }
.editor:focus-within { border-color: var(--rot); box-shadow: 0 0 0 3px var(--rot-zart); }
.editor-leiste { display: flex; flex-wrap: wrap; gap: 4px; padding: 7px 8px; border-bottom: 1px solid var(--line-soft); background: var(--paper); }
.editor-knopf { font-family: inherit; font-size: 13px; padding: 5px 10px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink-soft); cursor: pointer; }
.editor-knopf:hover { border-color: var(--rot); color: var(--rot-tief); }
.editor-knopf:focus-visible { outline: 2px solid var(--rot); outline-offset: 1px; }
.editor-knopf[aria-pressed="true"] { background: var(--rot); border-color: var(--rot); color: #fff; }
.editor-flaeche { min-height: 140px; padding: 12px 14px; outline: none; }
.editor-flaeche:empty::before { content: attr(data-platzhalter); color: var(--muted); }

/* Admin-Verwaltung (Paket 46) */
.impersonation-banner { position: sticky; top: 0; z-index: 70; display: flex; align-items: center; justify-content: center; gap: 16px; background: var(--rot-dunkel); color: #fff; padding: 8px 14px; font-size: 14px; flex-wrap: wrap; }
.impersonation-banner button { font: inherit; font-weight: 600; padding: 5px 12px; border: 1px solid #fff; border-radius: 999px; background: transparent; color: #fff; cursor: pointer; }

/* Buchung (Paket 39) */
.buchung-box { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 16px 18px; background: var(--weiss); }

/* News / Aktuelles (Paket 36) */
.news-datum { font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); font-weight: 600; }
.news-liste { display: grid; gap: 16px; }
.news-eintrag h2 a { color: var(--ink); }
.news-eintrag h2 a:hover { color: var(--rot-tief); }

/* Redaktions-Assistenz (Paket 35) */
.qa-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.qa-liste li { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.qa-marke { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 999px; color: #fff; font-size: 12px; font-weight: 700; flex-shrink: 0; }
.qa-warnung .qa-marke { background: var(--rot); }
.qa-hinweis .qa-marke { background: #c08a00; }
.qa-ok { color: var(--gruen); font-weight: 500; }
.cockpit-karte { border-left: 4px solid var(--rot); }
.cockpit-liste { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.cockpit-liste li { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; border-bottom: 0.5px solid var(--line-soft); padding-bottom: 5px; }
.cockpit-meta { color: var(--muted); font-size: 13px; white-space: nowrap; }
.textbaustein-wahl { display: block; margin-bottom: 6px; padding: 7px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); font: inherit; background: #fff; max-width: 260px; }
.baustein { border-top: 0.5px solid var(--line-soft); padding-top: 14px; margin-top: 14px; }

/* Rückfragen-Thread (Paket 34) */
.thread { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.thread-nachricht { padding: 10px 14px; border-radius: var(--radius-sm); max-width: 80%; }
.thread-nachricht.von-redaktion { background: var(--rot-zart); }
.thread-nachricht.von-anbieter { background: var(--paper); border: 0.5px solid var(--line); margin-left: auto; }
.thread-meta { font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.thread-text { margin: 0; color: var(--ink); white-space: pre-line; }
.thread-gelesen { color: var(--gruen); }

/* Onboarding (Paket 33) */
.onboarding { background: var(--weiss); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; margin-bottom: 18px; }
.onboarding-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.onboarding-fortschritt { height: 8px; border-radius: 999px; background: var(--line-soft); margin: 14px 0; overflow: hidden; }
.onboarding-fortschritt span { display: block; height: 100%; background: var(--rot); border-radius: 999px; }
.onboarding-schritte { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.onboarding-schritte li { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.onboarding-marke { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 999px; border: 1px solid var(--line); color: #fff; font-size: 13px; flex-shrink: 0; }
.onboarding-schritte li.fertig .onboarding-marke { background: var(--gruen); border-color: var(--gruen); }
.onboarding-schritte li.fertig span { color: var(--muted); }

/* Erinnerung & Interesse (Paket 32) */
.erinnerung-box { margin-top: 16px; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 16px; background: var(--weiss); }
.erinnerung-box > summary { cursor: pointer; font-weight: 500; color: var(--rot-tief); }
.erinnerung-form { margin-top: 12px; }
.interesse-box { margin-top: 16px; padding: 16px; border: 1px dashed var(--line); border-radius: var(--radius-sm); background: var(--paper); }

/* Besucher-Komfort (Paket 31) */
.vorschlag-feld { position: relative; }
.vorschlag-liste { position: absolute; z-index: 40; left: 0; right: 0; top: 100%; margin: 4px 0 0; padding: 4px; list-style: none; background: var(--weiss); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: 0 14px 30px -12px rgba(20,21,25,0.24); max-height: 320px; overflow-y: auto; }
.vorschlag-eintrag { padding: 8px 10px; border-radius: 8px; cursor: pointer; font-size: 14px; color: var(--ink); display: flex; gap: 8px; align-items: baseline; }
.vorschlag-eintrag.aktiv, .vorschlag-eintrag:hover { background: var(--rot-zart); }
.vorschlag-typ { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); min-width: 64px; }
.such-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 14px 0; }
.such-chips-titel { font-size: 13px; color: var(--muted); font-weight: 500; }

.komfort { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 0.5px solid var(--line); }
.komfort-titel { font-size: 13px; color: var(--muted); margin-right: 4px; }
.komfort-trenner { color: var(--line); }
.komfort-btn { font: inherit; font-size: 13px; padding: 5px 11px; border: 1px solid var(--line); border-radius: 999px; background: var(--weiss); color: var(--ink-soft); cursor: pointer; }
.komfort-btn:hover { border-color: var(--rot); }
.komfort-btn[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }

/* Dunkles Farbschema (manuell oder per System bei "auto") */
:root[data-theme="dunkel"] {
    --paper: #15171c; --weiss: #1e2127; --ink: #eef0f3; --ink-soft: #c6c9d1;
    --muted: #9aa0ab; --line: #2c2f37; --line-soft: #24272e; --rot-zart: #3a1d22;
}
@media (prefers-color-scheme: dark) {
    :root[data-theme="auto"] {
        --paper: #15171c; --weiss: #1e2127; --ink: #eef0f3; --ink-soft: #c6c9d1;
        --muted: #9aa0ab; --line: #2c2f37; --line-soft: #24272e; --rot-zart: #3a1d22;
    }
}
:root[data-theme="dunkel"] body, :root[data-theme="dunkel"] { background: var(--paper); color: var(--ink); }

/* Schriftgröße */

/* Mehr Kontrast (deutlich spürbar: dunklere Sekundärtexte, stärkere Linien) */
:root[data-kontrast="an"] { --ink-soft: var(--ink); --muted: #2c2f37; --line: #7c828e; --line-soft: #9aa0ab; }
:root[data-kontrast="an"][data-theme="dunkel"] { --ink-soft: #ffffff; --muted: #e6e8ec; --line: #6b7280; --line-soft: #565b66; }
:root[data-kontrast="an"] body { color: var(--ink); }
:root[data-kontrast="an"] a:not(.btn):not(.komfort-btn):not(.details) { text-decoration: underline; }
:root[data-kontrast="an"] .karte, :root[data-kontrast="an"] .textkarte, :root[data-kontrast="an"] input,
:root[data-kontrast="an"] select, :root[data-kontrast="an"] textarea { border-width: 1.5px; }
:root[data-kontrast="an"] :focus-visible { outline-width: 3px; }

/* Lesemodus (ruhiger, luftiger – wirkt auf der ganzen Seite, nicht nur Artikel) */
:root[data-lesemodus="an"] body { line-height: 1.8; letter-spacing: 0.01em; }
:root[data-lesemodus="an"] p, :root[data-lesemodus="an"] li { line-height: 1.9; margin-bottom: 0.65em; }
:root[data-lesemodus="an"] .meta, :root[data-lesemodus="an"] .lead { line-height: 1.7; }
:root[data-lesemodus="an"] .rich-text { font-size: 1.1em; line-height: 1.95; max-width: 70ch; }
:root[data-lesemodus="an"] .rich-text p { margin-bottom: 1em; }

/* PWA-Update-Hinweis (Paket 29) */
.pwa-update { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 60; display: flex; align-items: center; gap: 14px; background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 999px; box-shadow: 0 14px 30px -10px rgba(20,21,25,0.5); font-size: 14px; max-width: 92vw; }
.pwa-update button { font: inherit; font-weight: 600; padding: 7px 16px; border: 0; border-radius: 999px; background: var(--rot); color: #fff; cursor: pointer; }

/* Redaktions-Massen-Aktionen (Paket 28) */
.massen-leiste { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; background: var(--weiss); border: 0.5px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px; margin-bottom: 14px; }
.massen-leiste select, .massen-leiste input[type="text"] { padding: 9px 11px; border: 1px solid var(--line); border-radius: var(--radius-sm); font: inherit; background: #fff; }
.massen-anzahl { font-size: 13px; color: var(--muted); margin-left: auto; }
.hinweis-erfolg { background: #e8f5ef; border: 1px solid #b7e0cf; color: var(--gruen); padding: 10px 14px; border-radius: var(--radius-sm); font-size: 14px; }

/* Anbieter-Statistik (Paket 27) */
.filter-chip { font-size: 13px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink-soft); background: #fff; white-space: nowrap; }
.filter-chip:hover { border-color: var(--rot); }
.filter-chip.aktiv { background: var(--rot); border-color: var(--rot); color: #fff; }
.stat-delta { font-size: 12px; margin-top: 4px; }
.stat-delta-hoch { color: var(--gruen); }
.stat-delta-runter { color: var(--rot-tief); }
.stat-delta-gleich { color: var(--muted); }
.verlauf { display: flex; align-items: flex-end; gap: 2px; height: 120px; padding-top: 8px; }
.verlauf-balken { flex: 1 1 0; min-width: 2px; background: var(--rot); border-radius: 2px 2px 0 0; opacity: 0.85; }
.verlauf-balken:hover { opacity: 1; }
.stat-tabelle { width: 100%; border-collapse: collapse; }
.stat-tabelle th { font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--line); }
.stat-tabelle td { padding: 8px 6px; border-bottom: 0.5px solid var(--line-soft); font-size: 14px; color: var(--ink); }

/* Kalenderansicht (Paket 26) */
.kalender-leiste { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 6px; }
.kalender-mitte { display: flex; align-items: center; justify-content: center; gap: 10px; flex: 1; min-width: 0; }
.kalender-titel { font-family: 'Space Grotesk', sans-serif; font-size: 22px; font-weight: 600; color: var(--ink); margin: 0; text-align: center; }
.kalender-nav { font-size: 14px; font-weight: 500; color: var(--rot-tief); padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; white-space: nowrap; }
.kalender-nav:hover { border-color: var(--rot); }
.kalender-heute { font-size: 13px; font-weight: 600; color: #fff; background: var(--rot); padding: 6px 14px; border-radius: 999px; white-space: nowrap; }
.kalender-heute:hover { background: var(--rot-tief); }
.kalender { width: 100%; border-collapse: collapse; table-layout: fixed; background: var(--weiss); border-radius: var(--radius); overflow: hidden; box-shadow: 0 1px 2px rgba(20,21,25,0.04), 0 14px 30px -14px rgba(20,21,25,0.12); }
.kalender th { font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); font-weight: 600; padding: 10px 6px; border-bottom: 1px solid var(--line); background: var(--paper); }
.kalender-tag { position: relative; vertical-align: top; height: 104px; padding: 6px; border: 0.5px solid var(--line-soft); }
.kalender-tag.ausserhalb { background: var(--paper); }
.kalender-tag.ausserhalb .kalender-tagnr { color: var(--line); }
/* „Heute"-Rahmen als Overlay ÜBER den Einträgen, damit ihn die durchgehenden
   Balken nicht mehr unterbrechen (Ticket #25). pointer-events:none lässt Klicks
   auf die darunterliegenden Einträge durch. */
.kalender-tag.heute::after { content: ''; position: absolute; inset: 0; border: 2px solid var(--rot-hell); border-radius: 3px; pointer-events: none; z-index: 3; }
.kalender-tagnr { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; font-weight: 600; }
/* Lane-Stapel: gleich hohe Zeilen, damit mehrtägige Balken tagübergreifend fluchten. */
.kalender-lanes { --laneH: 38px; display: flex; flex-direction: column; gap: 4px; }
.kalender-eintrag { box-sizing: border-box; height: var(--laneH); display: block; border-left: 3px solid var(--rot); background: var(--paper); border-radius: 6px; padding: 3px 6px; font-size: 12px; line-height: 1.25; overflow: hidden; cursor: pointer; }
.kalender-eintrag:hover { background: var(--rot-zart); }
.kalender-eintrag-titel { display: block; color: var(--ink); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kalender-eintrag-meta { display: block; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kalender-lane-leer { height: var(--laneH); display: block; }
/* Mehrtägiges Seminar: durchgehender Balken (oben farbige Leiste), an Rändern
   bündig zur Zellenkante, nur am tatsächlichen Start/Ende abgerundet. */
.kalender-eintrag.mehr { border-left: 0; border-top: 3px solid var(--rot); border-radius: 0; margin-left: -6px; margin-right: -6px; padding-left: 8px; padding-right: 8px; }
.kalender-eintrag.mehr.start { margin-left: 0; padding-left: 6px; border-top-left-radius: 6px; }
.kalender-eintrag.mehr.ende { margin-right: 0; padding-right: 6px; border-top-right-radius: 6px; }
.kalender-eintrag.fortsetzung .kalender-eintrag-titel,
.kalender-eintrag.fortsetzung .kalender-eintrag-meta { visibility: hidden; }
/* Schnellansicht-Popover (ohne Seitenwechsel) */
.kalender-popover { position: absolute; z-index: 60; width: 268px; max-width: 88vw; background: var(--weiss); border: 1px solid var(--line); border-top: 3px solid var(--rot); border-radius: var(--radius); box-shadow: 0 10px 30px -8px rgba(20,21,25,0.28); padding: 12px 14px; }
.kalender-popover[hidden] { display: none; }
.kalender-popover-titel { font-family: 'Space Grotesk', sans-serif; font-size: 15px; font-weight: 600; color: var(--ink); margin: 0 30px 8px 0; line-height: 1.25; }
.kalender-popover-schliessen { position: absolute; top: 8px; right: 10px; border: 0; background: transparent; color: var(--muted); font-size: 20px; line-height: 1; cursor: pointer; padding: 2px 4px; }
.kalender-popover-schliessen:hover { color: var(--ink); }
.kalender-popover dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; margin: 0 0 10px; font-size: 12.5px; }
.kalender-popover dt { color: var(--muted); font-weight: 600; }
.kalender-popover dd { margin: 0; color: var(--ink); }
.kalender-popover .details { display: inline-block; font-size: 13px; font-weight: 600; color: var(--rot-tief); }
@media (max-width: 720px) {
    .kalender-tag { height: auto; min-height: 60px; }
    .kalender-lanes { --laneH: 24px; }
    .kalender-eintrag-meta { display: none; }
}

/* Merkliste (Paket 25) */
.merken { font-family: inherit; font-size: 13px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--rot-tief); cursor: pointer; white-space: nowrap; flex-shrink: 0; transition: background .12s ease, border-color .12s ease; }
.merken:hover { border-color: var(--rot); }
.merken:focus-visible { outline: 2px solid var(--rot); outline-offset: 1px; }
.merken[aria-pressed="true"] { background: var(--rot-zart); border-color: var(--rot-hell); }
.merken-gross { padding: 13px 26px; font-size: 15px; }
.merkliste-link { position: relative; }
.merk-badge { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 5px; font-size: 11px; font-weight: 600; line-height: 18px; text-align: center; color: #fff; background: var(--rot); border-radius: 999px; }
.merkliste-aktionen { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 20px; }
.merk-eintrag { display: flex; flex-direction: column; }
.merk-eintrag .karte { height: 100%; }
.merk-entfernen { align-self: flex-start; margin-top: 8px; font-family: inherit; font-size: 13px; padding: 5px 12px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--muted); cursor: pointer; }
.merk-entfernen:hover { border-color: var(--rot); color: var(--rot-tief); }

/* Monatsansicht (rote Überschriften) */
.monat-kopf { font-family: 'Space Grotesk', sans-serif; font-size: 15px; font-weight: 600; letter-spacing: 0.04em; color: #fff; background: var(--rot-tief); padding: 8px 16px; border-radius: var(--radius-sm); margin: 22px 0 12px; text-transform: uppercase; }
.monat-kopf:first-child { margin-top: 0; }

/* Kontextbezogene Hilfe (Paket 52) */
.hilfe-knopf { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 999px; border: 1px solid var(--line); background: var(--weiss); color: var(--muted); font-size: 12px; font-weight: 700; text-decoration: none; line-height: 1; vertical-align: middle; transition: color .12s ease, border-color .12s ease; }
.hilfe-knopf:hover { color: var(--rot); border-color: var(--rot); }

/* Backend-Navigation: Gruppen-Dropdowns (Menü-Restrukturierung) */
.nav-gruppe { position: relative; }
.nav-gruppe > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; color: var(--ink-soft); padding: 8px 15px; border-radius: 999px; line-height: 1; user-select: none; transition: background .14s ease, color .14s ease; }
.nav-gruppe > summary::-webkit-details-marker { display: none; }
.nav-gruppe > summary::after { content: '\25BE'; font-size: 10px; opacity: 0.55; }
.nav-gruppe > summary:hover { background: var(--paper); color: var(--ink); }
.nav-gruppe > summary.aktiv { background: var(--rot); color: #fff; box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--rot) 55%, transparent); }
.nav-gruppe[open] > summary { background: var(--paper); color: var(--ink); }
.nav-gruppe[open] > summary.aktiv { background: var(--rot); color: #fff; }
.nav-menu { position: absolute; top: calc(100% + 8px); left: 0; z-index: 60; min-width: 214px; display: flex; flex-direction: column; gap: 2px; padding: 7px; background: var(--weiss); border: 0.5px solid var(--line); border-radius: 14px; box-shadow: 0 1px 2px rgba(20,21,25,0.06), 0 18px 38px -16px rgba(20,21,25,0.32); }
.nav-menu a { padding: 9px 12px; border-radius: 9px; font-size: 14px; font-weight: 500; color: var(--ink-soft); white-space: nowrap; text-decoration: none; transition: background .12s ease, color .12s ease; }
.nav-menu a:hover { background: var(--paper); color: var(--ink); }
.nav-menu a.aktiv { background: var(--rot-zart); color: var(--rot-tief); font-weight: 600; }

/* Backend-Navigation: auf Mobil als Inline-Akkordeon (Dropdown-Panel statt absolut) */
@media (max-width: 640px) {
    .anbieter-nav { border-radius: 18px; }
    .nav-gruppe { width: 100%; }
    .nav-gruppe > summary { width: 100%; justify-content: space-between; }
    .nav-menu { position: static; min-width: 0; box-shadow: none; border: none; padding: 2px 0 6px 14px; }
}

/* Breite Datentabellen mobil horizontal scrollbar (statt Seitenüberlauf) */
.tabelle-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.tabelle-scroll > table { min-width: 640px; }

/* === Dark-Mode-Lesbarkeit: invertierende/feste Flächen korrigieren === */
/* (A) "Dunkle Flächen" (nutzten background:var(--ink), das im Dark Mode hell wird) */
:root[data-theme="dunkel"] .consent,
:root[data-theme="dunkel"] .skip-link,
:root[data-theme="dunkel"] .btn-dunkel,
:root[data-theme="dunkel"] .karte-dunkel,
:root[data-theme="dunkel"] .teilen-native,
:root[data-theme="dunkel"] .ansicht-toggle a.aktiv,
:root[data-theme="dunkel"] .seiten-pro-link.aktiv,
:root[data-theme="dunkel"] .komfort-btn[aria-pressed="true"],
:root[data-theme="dunkel"] .pwa-update {
    background: #2a2f3a; color: #fff; border-color: #2a2f3a;
}
/* (B) Formularfelder & helle Chips: dunkle Fläche statt Weiß */
:root[data-theme="dunkel"] .feld,
:root[data-theme="dunkel"] .filter-feld input,
:root[data-theme="dunkel"] .filter-feld select,
:root[data-theme="dunkel"] .formfeld input,
:root[data-theme="dunkel"] .formfeld select,
:root[data-theme="dunkel"] .formfeld textarea,
:root[data-theme="dunkel"] .massen-leiste select,
:root[data-theme="dunkel"] .massen-leiste input[type="text"],
:root[data-theme="dunkel"] .editor,
:root[data-theme="dunkel"] .editor-knopf,
:root[data-theme="dunkel"] .textbaustein-wahl,
:root[data-theme="dunkel"] .filter-chip,
:root[data-theme="dunkel"] .merken,
:root[data-theme="dunkel"] select,
:root[data-theme="dunkel"] option {
    background: var(--weiss); color: var(--ink); border-color: var(--line);
}
/* (C) Buttons ohne eigene Fläche erben den dunklen Hintergrund */
:root[data-theme="dunkel"] .filter-reset { background: transparent; color: var(--ink-soft); }

/* Präsenz / Online-Anzeige (Paket 54) */
.praesenz{ display:inline-flex; align-items:center; gap:5px; font-weight:600; white-space:nowrap }
.praesenz-on{ color:var(--gruen) }
.praesenz-off,.praesenz-nie{ color:var(--muted) }
.praesenz-punkt{ display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:6px; vertical-align:middle; background:var(--muted) }
.praesenz-punkt.praesenz-on{ background:#22c55e; box-shadow:0 0 0 3px color-mix(in srgb,#22c55e 26%,transparent) }
.praesenz-punkt.praesenz-off{ background:#cbd1da }
.praesenz-punkt.praesenz-nie{ background:transparent; border:1.5px solid var(--line) }
:root[data-theme="dunkel"] .praesenz-on{ color:#4ade80 }
:root[data-theme="dunkel"] .praesenz-punkt.praesenz-off{ background:#3a3f4a }

/* === Ticket #31: Dunkelmodus-Kontraste === */
/* (1) Status-Pillen lesbar: vermeidet „rot auf rot" und helle Chips auf Dunkel. */
:root[data-theme="dunkel"] .pille { background: #4a2028; color: #ffb3bd; }
:root[data-theme="dunkel"] .si-6108cf6 { background: #4a2028; color: #ffb3bd; }   /* gesperrt */
:root[data-theme="dunkel"] .si-fc01405 { background: #123528; color: #63e3a8; }   /* aktiv */
:root[data-theme="dunkel"] .si-84aa884 { background: #2a2f3a; color: #d3d7de; }   /* inaktiv */
/* (2) Präsenz-Punkte deutlicher erkennbar. */
:root[data-theme="dunkel"] .praesenz-punkt.praesenz-off { background: #6b7280; }
:root[data-theme="dunkel"] .praesenz-punkt.praesenz-nie { border-color: #6b7280; }
/* (5) Rote Vordergrundtexte auf dunklem Grund lesbar machen: --rot-tief/--rot
   ist auf Dunkel zu kontrastarm, daher heller Rotton (--rot-hell). Nur die
   Textfarbe – Flächen und Rahmen bleiben unangetastet. Betrifft u. a. Eyebrows
   („PRÄSENZ · …", „VERANSTALTUNGSORT"), „Details ›", die sekundären
   Ghost-Buttons, das „Erinnern"-Summary, Pflichtfeld-Marker, Statistik-Links
   und den „Newsletter abbestellen"-Link. */
:root[data-theme="dunkel"] .label-eyebrow,
:root[data-theme="dunkel"] .karte .details,
:root[data-theme="dunkel"] .mehr,
:root[data-theme="dunkel"] .erinnerung-box > summary,
:root[data-theme="dunkel"] .feld-pflicht,
:root[data-theme="dunkel"] .stat-kpi-delta .ab,
:root[data-theme="dunkel"] .stat-link .stat-label,
:root[data-theme="dunkel"] .stat-link .stat-wert::after,
:root[data-theme="dunkel"] .si-1b184b8,
:root[data-theme="dunkel"] .si-329377a,
:root[data-theme="dunkel"] .si-868f58f,
:root[data-theme="dunkel"] .si-a365bc6,
:root[data-theme="dunkel"] .si-a4a1f47,
:root[data-theme="dunkel"] .si-c250cea,
:root[data-theme="dunkel"] .si-c68fe39,
:root[data-theme="dunkel"] .si-e9586a2,
:root[data-theme="dunkel"] .si-f78773f { color: var(--rot-hell); }
@media (prefers-color-scheme: dark) {
    :root[data-theme="auto"] .label-eyebrow,
    :root[data-theme="auto"] .karte .details,
    :root[data-theme="auto"] .mehr,
    :root[data-theme="auto"] .erinnerung-box > summary,
    :root[data-theme="auto"] .feld-pflicht,
    :root[data-theme="auto"] .stat-kpi-delta .ab,
    :root[data-theme="auto"] .stat-link .stat-label,
    :root[data-theme="auto"] .stat-link .stat-wert::after,
    :root[data-theme="auto"] .si-1b184b8,
    :root[data-theme="auto"] .si-329377a,
    :root[data-theme="auto"] .si-868f58f,
    :root[data-theme="auto"] .si-a365bc6,
    :root[data-theme="auto"] .si-a4a1f47,
    :root[data-theme="auto"] .si-c250cea,
    :root[data-theme="auto"] .si-c68fe39,
    :root[data-theme="auto"] .si-e9586a2,
    :root[data-theme="auto"] .si-f78773f { color: var(--rot-hell); }
}
/* (4) Textfelder etwas heller als die Karten-/Topbar-Fläche (Kontrast). */
:root[data-theme="dunkel"] .formfeld input,
:root[data-theme="dunkel"] .formfeld select,
:root[data-theme="dunkel"] .formfeld textarea,
:root[data-theme="dunkel"] .feld,
:root[data-theme="dunkel"] input[type="text"],
:root[data-theme="dunkel"] input[type="email"],
:root[data-theme="dunkel"] input[type="url"],
:root[data-theme="dunkel"] input[type="number"],
:root[data-theme="dunkel"] input[type="password"],
:root[data-theme="dunkel"] input[type="search"],
:root[data-theme="dunkel"] input[type="tel"],
:root[data-theme="dunkel"] input[type="date"] { background: #2c313c; }
/* (5) Logo im Dunkelmodus: farbiges Emblem bleibt, nur der Schriftzug ist weiß.
   Umsetzung über eine eigene Dunkel-SVG (-dunkel.svg), die per Theme ein-/
   ausgeblendet wird – kein Filter (der würde das ganze Logo einfärben). */
.marke .logo-dunkel { display: none; }
:root[data-theme="dunkel"] .marke .logo-hell { display: none; }
:root[data-theme="dunkel"] .marke .logo-dunkel { display: inline-block; }
@media (prefers-color-scheme: dark) {
    :root[data-theme="auto"] .marke .logo-hell { display: none; }
    :root[data-theme="auto"] .marke .logo-dunkel { display: inline-block; }
}

/* Marken-Overlay auf Seminarbildern (Paket 56): Bogen in Anbieterfarbe + Logo */
.karte-bild { position: relative; }
.marken-overlay { position: absolute; inset: 0; pointer-events: none; }
.marken-overlay-bogen { position: absolute; inset: 0; width: 100%; height: 100%; }
.marken-overlay-logo { position: absolute; left: 5%; bottom: 6%; max-width: 26%; max-height: 22%;
    width: auto; height: auto; object-fit: contain; opacity: .95;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,.4)); }
/* Weiße/monochrome Marke (wie VKS-Vorlage). */
.marken-overlay-logo.logo-weiss { opacity: .9; filter: brightness(0) invert(1) drop-shadow(0 1px 3px rgba(0,0,0,.45)); }
/* Bildlose Kachel: Anbieterlogo groß, mittig, in Naturfarben (weißer Grund). */
.marken-overlay-logo.marken-overlay-logo-platzhalter { opacity: 1; filter: none; }
.seminar-hero { position: relative; }
.seminar-hero .marken-overlay-logo { left: 3.5%; bottom: 5%; max-width: 11%; max-height: 14%; }

/* Design-Auswahl Seminarbild-Overlay (Paket 57) */
.stilkarte { cursor:pointer; width:140px; border:1px solid var(--line); border-radius:10px; padding:8px; transition:border-color .15s, box-shadow .15s; }
.stilkarte input { position:absolute; opacity:0; pointer-events:none; }
.stilkarte-bild { position:relative; display:block; width:100%; aspect-ratio:4/3; border-radius:7px; overflow:hidden;
    background:linear-gradient(135deg,#c7ccd1,#9aa1a9); }
.stilkarte-bild svg { position:absolute; inset:0; width:100%; height:100%; }
.stilkarte-titel { display:block; font-size:13px; font-weight:600; margin-top:7px; color:var(--ink); }
.stilkarte-text { display:block; font-size:11px; color:var(--ink-soft); line-height:1.35; }
.stilkarte:has(input:checked) { border-color:var(--rot); box-shadow:0 0 0 2px var(--rot) inset; }

/* Seminar-Detailseite: 4:3-Bild mit Marken-Overlay (Paket 58) */
.detail-bild { margin: 0; border-radius: 14px; max-width: 100%; aspect-ratio: 4 / 3; }
.detail-bild .marken-overlay-logo { left: 4%; bottom: 5%; max-width: 13%; max-height: 14%; }

/* Zweispaltiges Layout: links Titel/Beschreibung, rechts schmale Infokarte. */
.seminar-detail { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 26px; align-items: start; }
.seminar-detail > .sd-main { margin: 0; max-width: none; }
.seminar-detail .sd-info { position: sticky; top: 88px; display: flex; flex-direction: column; gap: 16px; }

/* Kopf der Hauptspalte: 4:3-Bild links, Titel daneben. */
.sd-kopf { display: grid; grid-template-columns: 300px 1fr; gap: 22px; align-items: center; margin-bottom: 18px; }
.sd-kopf .detail-bild { width: 100%; }
.sd-kopf-text { min-width: 0; }
.sd-titel { margin: 6px 0 0; }

.sd-fakten { padding-top: 20px; }
.sd-fakten-titel { margin: 0 0 12px; font-size: 17px; }
.sd-dl { margin: 0; font-size: 15px; }
.sd-dl dt { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; margin-top: 14px; }
.sd-dl dt:first-of-type { margin-top: 0; }
.sd-dl dd { margin: 3px 0 0; }
.sd-teilen { padding-top: 16px; padding-bottom: 16px; }

@media (max-width: 860px) {
  .seminar-detail { grid-template-columns: 1fr; gap: 0; }
  .seminar-detail .sd-info { position: static; }
}
@media (max-width: 560px) {
  .sd-kopf { grid-template-columns: 1fr; gap: 14px; }
  .sd-kopf .detail-bild { max-width: 340px; }
}

/* Startseiten-Module: Block-Breite voll/halb (Paket 60) */
.hp-sektionen { display:flex; flex-wrap:wrap; gap:44px 32px; align-items:stretch; }
/* Roter Linksrand zum Abheben (Newsletter, Anbieter-CTA, Widget-Werbung). */
.textkarte.karte-akzent { border-left: 4px solid var(--rot); }
.hp-block { flex:1 1 100%; min-width:0; }
.hp-block.hp-halb { flex:1 1 calc(50% - 12px); }
/* Modul-Karten füllen ihren Block (voll = ganze Breite, halb = halbe Zeile) und
   dessen Höhe – sonst deckelt .textkarte { max-width:760px } sie und nebeneinander
   liegende Blöcke wären ungleich hoch (Paket 92). Nur .textkarte-Module betroffen;
   Listen-/Kachel-Module (mehrere Kinder) bleiben unangetastet. */
.hp-block .textkarte { max-width: none; height: 100%; }
@media (max-width:760px){ .hp-block.hp-halb { flex:1 1 100%; } }

/* Reiter/Tabs (CSP-sicher, Paket 61) */
.reiter-leiste { display:flex; gap:4px; flex-wrap:wrap; border-bottom:1px solid var(--line); margin-bottom:20px; }
.reiter { background:none; border:0; border-bottom:2px solid transparent; padding:9px 16px; cursor:pointer;
    font-size:14px; font-weight:600; color:var(--ink-soft); border-radius:8px 8px 0 0; }
.reiter:hover { color:var(--ink); background:var(--line-soft); }
.reiter.aktiv { color:var(--rot-tief); border-bottom-color:var(--rot); }
[data-tab-panel][hidden] { display:none; }

/* Seminarbild-Design: zweispaltig + Live-Vorschau (Paket 63) */
.ov-layout { display:flex; gap:28px; align-items:flex-start; flex-wrap:wrap; }
.ov-controls { flex:1 1 420px; min-width:0; }
.ov-preview-col { flex:0 0 340px; max-width:100%; position:sticky; top:80px; }
@media (max-width: 900px){ .ov-preview-col { position:static; flex-basis:100%; } }
.ov-vorschau-titel { font-size:13px; font-weight:600; color:var(--ink); margin-bottom:8px; }
.ov-vorschau-bild { position:relative; aspect-ratio:4/3; border-radius:12px; overflow:hidden;
    background:linear-gradient(135deg,#9aa6b3,#cfd6dd 45%,#aeb8c2); border:0.5px solid var(--line); }
.ov-vorschau-svg { position:absolute; inset:0; width:100%; height:100%; }
.ov-vorschau-logo { position:absolute; left:6%; bottom:7%; max-width:20%; max-height:20%; width:auto; height:auto;
    object-fit:contain; opacity:.95; filter:drop-shadow(0 1px 3px rgba(0,0,0,.4)); }
.ov-vorschau-logo.logo-weiss { opacity:.9; filter:brightness(0) invert(1) drop-shadow(0 1px 3px rgba(0,0,0,.45)); }

/* Drag & Drop Sortierung (Paket 64) */
[data-sortier] tr[data-id] { cursor: grab; }
[data-sortier] tr.sortier-aktiv { opacity: .5; background: var(--paper); cursor: grabbing; }
.sortier-griff { color: var(--muted); margin-right: 8px; font-size: 16px; cursor: grab; user-select: none; }

/* Ansprechpartner-Liste im Anbieter-Profil */
.ap-zeile { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 0.5px solid var(--line-soft); }
.ap-zeile:first-child { padding-top: 0; }
.ap-griff { cursor: grab; color: var(--muted); font-size: 18px; line-height: 1; user-select: none; padding: 4px; flex: none; }
.ap-griff:active { cursor: grabbing; }
.ap-felder { flex: 1; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; min-width: 0; }
.ap-entfernen { flex: none; border: none; background: transparent; color: var(--muted); font-size: 16px; cursor: pointer; padding: 6px 9px; border-radius: 8px; line-height: 1; }
.ap-entfernen:hover { background: var(--rot-zart); color: var(--rot-tief); }
.ap-zeile.sortier-aktiv { opacity: .55; }

/* Anbieter-Header: Banner vollständig im roten Block (ohne Text) */
.anbieter-hero.hat-banner .wrap { padding-top: 24px; padding-bottom: 24px; }
.anbieter-banner-block { display: block; width: 100%; height: auto; max-height: 300px; object-fit: cover; border-radius: var(--radius); box-shadow: 0 10px 30px -16px rgba(0,0,0,.5); }
@media (max-width: 640px) { .anbieter-hero.hat-banner .wrap { padding-top: 16px; padding-bottom: 16px; } .anbieter-banner-block { max-height: 180px; } }

/* Anbieterseite: Hauptspalte + Seitenleiste */
.anbieter-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 26px; align-items: start; margin-bottom: 28px; }
.anbieter-seitenleiste { display: flex; flex-direction: column; gap: 18px; }
.seitenleiste-karte { margin: 0; }
.seitenleiste-liste { display: grid; grid-template-columns: auto 1fr; gap: 7px 12px; margin: 12px 0 14px; font-size: 14px; }
.seitenleiste-liste dt { color: var(--muted); }
.seitenleiste-liste dd { margin: 0; overflow-wrap: anywhere; }
.seitenleiste-knopf { display: inline-block; margin-top: 4px; }
.seitenleiste-personen { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-direction: column; gap: 13px; font-size: 14px; }
.seitenleiste-personen li { display: flex; flex-direction: column; gap: 2px; }
.seitenleiste-personen .rolle { color: var(--muted); font-size: 13px; }
.seitenleiste-personen .tel { color: var(--ink-soft); }
.seitenleiste-social { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; font-size: 14px; }

/* Social-Media-Brand-Icons */
.social-icons { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.social-icon { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; background: var(--paper, #f4f2ee); color: var(--ink-soft); border: 0.5px solid var(--line); transition: transform .14s ease, background-color .14s ease, color .14s ease, box-shadow .14s ease; }
.social-icon:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 8px 18px -8px rgba(20,24,33,.4); border-color: transparent; }
.social-linkedin:hover { background: #0A66C2; }
.social-xing:hover { background: #006567; }
.social-facebook:hover { background: #1877F2; }
.social-instagram:hover { background: radial-gradient(circle at 30% 110%, #fdf497 0%, #fd5949 45%, #d6249f 70%, #285AEB 100%); }
.icon { display: inline-block; vertical-align: middle; flex: none; }
@media (max-width: 880px) { .anbieter-layout { grid-template-columns: 1fr; } .anbieter-seitenleiste { flex-direction: row; flex-wrap: wrap; } .seitenleiste-karte { flex: 1 1 240px; } }

/* Paginierung (eigene Ansicht statt Tailwind-Standard) */
.paginierung { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; font-size: 14px; }
.paginierung-seiten { display: flex; flex-wrap: wrap; gap: 4px; }
.paginierung-knopf, .paginierung-seite { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 11px; border: 0.5px solid var(--line); border-radius: 9px; color: var(--ink); background: var(--weiss); text-decoration: none; line-height: 1; }
.paginierung-knopf:hover, .paginierung-seite:hover { border-color: var(--rot); color: var(--rot); }
.paginierung-seite.aktiv { background: var(--rot); border-color: var(--rot); color: #fff; }
.paginierung .deaktiviert { color: var(--muted); background: transparent; border-color: var(--line-soft); cursor: default; }
.paginierung .deaktiviert:hover { color: var(--muted); border-color: var(--line-soft); }
.paginierung-punkte { padding: 0 4px; color: var(--muted); }

/* Leistungs-Checkboxen / Ja-Nein im Seminarformular */
.check-gruppe { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px 18px; margin-top: 6px; }
.check-zeile { display: flex; align-items: center; gap: 9px; font-size: 14px; cursor: pointer; }
.check-zeile input { width: 17px; height: 17px; flex: none; }
.janein { display: flex; gap: 20px; margin-top: 4px; }

/* -------------------------------------------------------------------
   Utility-Klassen (Paket: CSP-Härtung)
   Ersetzen wiederkehrende Inline-Styles, damit style-src ohne
   'unsafe-inline' auskommt. Werte spiegeln die real genutzten Abstände/
   Farben wider (siehe Migrationsnotiz in SecurityHeaders).
   ------------------------------------------------------------------- */
.m-0 { margin: 0; }
.mt-0 { margin-top: 0; }
.mt-4 { margin-top: 4px; }
.mt-6 { margin-top: 6px; }
.mt-8 { margin-top: 8px; }
.mt-10 { margin-top: 10px; }
.mt-12 { margin-top: 12px; }
.mt-14 { margin-top: 14px; }
.mt-16 { margin-top: 16px; }
.mt-18 { margin-top: 18px; }
.mt-20 { margin-top: 20px; }
.mt-22 { margin-top: 22px; }
.mt-24 { margin-top: 24px; }
.mb-6 { margin-bottom: 6px; }
.mb-10 { margin-bottom: 10px; }
.mb-14 { margin-bottom: 14px; }
.mb-18 { margin-bottom: 18px; }
.t-soft { color: var(--ink-soft); }
.t-muted { color: var(--muted); }
.t-rot { color: var(--rot-tief); }
.t-gruen { color: var(--gruen); }
.fs-13 { font-size: 13px; }
.fs-14 { font-size: 14px; }
.font-display { font-family: 'Space Grotesk', sans-serif; }
.inline { display: inline; }
.nowrap { white-space: nowrap; }
.text-right { text-align: right; }
.flex-1 { flex: 1; }
.fs-12 { font-size: 12px; }
.fs-15 { font-size: 15px; }
.maxw-560 { max-width: 560px; }
.offscreen { position: absolute; left: -9999px; }
.row-wrap { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.check-inline { display: flex; gap: 7px; align-items: center; }
.mb-0 { margin-bottom: 0; }
.op-55 { opacity: .55; }
.op-60 { opacity: .6; }

/* -------------------------------------------------------------------
   Bild-Picker: Kategorie-Filter, Suche, scrollbare Liste
   (Themenbild-Auswahl im Seminar-Editor)
   ------------------------------------------------------------------- */
.bild-picker { margin-top: 12px; }
.bild-picker-leiste { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 10px; }
.bild-picker-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.bild-picker .chip { border: 1px solid var(--line); background: #fff; color: var(--ink-soft); border-radius: 999px; padding: 5px 13px; font-size: 13px; line-height: 1.4; cursor: pointer; transition: background .12s, border-color .12s, color .12s; }
.bild-picker .chip:hover { border-color: var(--rot); color: var(--rot); }
.bild-picker .chip.aktiv { background: var(--rot); border-color: var(--rot); color: #fff; }
.bild-picker-suche { margin-left: auto; min-width: 200px; padding: 8px 13px; border: 1px solid var(--line); border-radius: var(--radius-sm); font: inherit; background: #fff; color: var(--ink); }
.bild-picker-suche:focus { outline: none; border-color: var(--rot); box-shadow: 0 0 0 3px var(--rot-zart); }
.bild-picker [data-liste] { max-height: 400px; overflow-y: auto; margin-top: 0; padding: 4px; border: 1px solid var(--line-soft); border-radius: var(--radius-sm); background: var(--paper); }
/* Gefilterte Bilder wirklich ausblenden: Author-display (z. B. .themenbild-wahl
   display:block) überschreibt sonst das UA-[hidden]. */
.bild-picker [data-liste] > [hidden] { display: none !important; }
.bild-picker-zaehler { font-size: 12px; color: var(--muted); margin: 6px 0 0; }
.bild-picker-leer { font-size: 14px; color: var(--muted); margin: 12px 4px; }
@media (max-width: 640px) { .bild-picker-suche { margin-left: 0; width: 100%; } }
:root[data-theme="dunkel"] .bild-picker .chip { background: transparent; }
:root[data-theme="dunkel"] .bild-picker-suche { background: transparent; }

/* -------------------------------------------------------------------
   Moderne Upload-Karte (dropzone.js) – ersetzt das native File-Input
   ------------------------------------------------------------------- */
.upload-input-versteckt { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; }
.upload-karte { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; width: 100%; padding: 28px 18px; border: 2px dashed var(--line); border-radius: 14px; background: var(--paper); cursor: pointer; text-align: center; font: inherit; transition: border-color .14s ease, background .14s ease; }
.upload-karte:hover, .upload-karte:focus-visible { border-color: var(--rot); background: var(--rot-zart); outline: none; }
.upload-karte.upload-aktiv { border-color: var(--rot); background: var(--rot-zart); }
.upload-karte.hat-datei { border-style: solid; border-color: var(--gruen); background: var(--weiss); }
.upload-icon { font-size: 28px; line-height: 1; color: var(--rot); }
.upload-karte.hat-datei .upload-icon { color: var(--gruen); }
.upload-titel { font-weight: 600; font-size: 15px; color: var(--ink); }
.upload-sub { font-size: 12px; color: var(--muted); }
.upload-status { margin: 8px 0 0; font-size: 13px; font-weight: 500; color: var(--gruen); }
:root[data-theme="dunkel"] .upload-karte { background: transparent; }
:root[data-theme="dunkel"] .upload-karte.hat-datei { background: transparent; }

/* -------------------------------------------------------------------
   Melde-Widget (schwebender Admin-Knopf unten rechts)
   ------------------------------------------------------------------- */
.meldung-fab { position: fixed; right: 22px; bottom: 22px; z-index: 60; width: 54px; height: 54px; border-radius: 50%; border: none; background: var(--rot); color: #fff; box-shadow: 0 10px 26px -8px rgba(0,0,0,.42); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: transform .12s ease, background .12s ease; }
.meldung-fab:hover { background: var(--rot-tief); transform: translateY(-2px); }
.meldung-fab:focus-visible { outline: 3px solid var(--rot-zart); outline-offset: 2px; }
dialog.meldung-dialog { max-width: 480px; max-height: calc(100vh - 48px); overflow: auto; }
.meldung-titel { font-family: 'Space Grotesk', sans-serif; margin: 0 0 14px; font-size: 18px; color: var(--ink); }
.meldung-shot { margin: 6px 0; border: 1px solid var(--line-soft); border-radius: var(--radius-sm); background: var(--paper); min-height: 64px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.meldung-shot img { max-width: 100%; max-height: 220px; display: block; }
.meldung-aktionen { display: flex; align-items: center; gap: 12px; margin-top: 16px; flex-wrap: wrap; }
.meldung-alle { margin-left: auto; }
@media print { .meldung-fab { display: none; } }