/*
  design.css: Design-Vorgaben (Architektur §5). Jede Farbe, Schrift und Rundung kommt
  aus den Variablen in :root -- feste Werte stehen nur hier. Spaeter ueberschreibt das
  Adminboard diese Variablen. Startwerte aus dem Altsystem (Petrol #005160, Inter).
*/
:root {
    --farbe-primaer: #005160;
    --farbe-primaer-hover: #003f48;
    --farbe-verlauf-von: #2a5cff;
    --farbe-verlauf-bis: #76ffcf;
    --farbe-kaufen: #28a745;
    /* Akzentfarbe BiWi (Inhaberin 30.9.): sparsam – Kennzeichen, Sterne, Play-Knopf, Hervorhebungen */
    --farbe-akzent: #ffb067;
    --farbe-fehler: #b3261e;
    --farbe-hinweis: #d97706;
    --farbe-grund: #f4f7fb;
    --farbe-flaeche: #ffffff;
    --farbe-text: #1f2430;
    --farbe-gedaempft: #5b6472;
    --farbe-linie: #d9dce2;
    --auf-primaer: #ffffff;

    --schrift: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --schrift-marke: "Poppins", var(--schrift); /* Schriftzug neben dem Logo */
    --rundung: 14px;
    --schatten: 0 1px 2px rgba(16, 24, 40, .05), 0 4px 14px rgba(16, 24, 40, .05);
    --schatten-hoch: 0 2px 4px rgba(16, 24, 40, .06), 0 12px 28px rgba(16, 24, 40, .10);
    --abstand: 1rem;
    --breite: 1200px;
}

/* Poppins Bold fuer den Schriftzug, selbst ausgeliefert (kein Google-Abruf); Lizenz: schriften/OFL.txt */
@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("/schriften/poppins-700.woff2") format("woff2");
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--schrift);
    color: var(--farbe-text);
    background: var(--farbe-grund);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

a { color: var(--farbe-primaer); }

/* Markierter Text in der Markenfarbe (Maus und Finger) */
::selection { background: var(--farbe-primaer); color: var(--auf-primaer); }

/* ---- Baustein header: Glas-Look (E-22) ---- */
.kopfleiste {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .6rem calc(var(--abstand) * 2);
    padding: .8rem calc(var(--abstand) * 2);
    background: color-mix(in srgb, var(--farbe-flaeche) 75%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid color-mix(in srgb, var(--farbe-linie) 60%, transparent);
}
.marke { display: flex; align-items: center; gap: .5rem; text-decoration: none; }
.marke img { border-radius: 8px; }
.marke span { font-family: var(--schrift-marke); font-weight: 700; font-size: 1.15rem; color: var(--farbe-primaer); }
.hauptmenue { display: flex; align-items: center; gap: calc(var(--abstand) * 1.5); flex: 1; }
.hauptmenue > a, .menue-knopf { text-decoration: none; color: var(--farbe-text); font: inherit; font-weight: 500; }
.hauptmenue a:hover, .menue-knopf:hover { color: var(--farbe-primaer); }

/* Aufklappmenues: mit der Maus per hover, sonst per Klick (menue.js setzt aria-expanded) */
.menue-gruppe { position: relative; }
.menue-knopf { display: flex; align-items: center; gap: .3rem; padding: 0; border: none; background: none; cursor: pointer; }
.menue-knopf::after { content: ""; width: .4rem; height: .4rem; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: translateY(-2px) rotate(45deg); transition: transform .2s; }
.menue-klapp {
    position: absolute;
    top: calc(100% + .6rem);
    left: -1rem;
    z-index: 25;
    min-width: 15rem;
    display: none;
    flex-direction: column;
    padding: .5rem;
    border: 1px solid var(--farbe-linie);
    border-radius: var(--rundung);
    background: var(--farbe-flaeche);
    box-shadow: var(--schatten-hoch);
}
.menue-klapp::before { content: ""; position: absolute; inset: -.7rem 0 auto; height: .7rem; } /* Bruecke fuer die Maus */
.menue-klapp a { padding: .5rem .75rem; border-radius: calc(var(--rundung) * .6); color: var(--farbe-text); text-decoration: none; font-size: .95rem; }
.menue-klapp a:hover, .menue-klapp a:focus-visible { background: color-mix(in srgb, var(--farbe-primaer) 8%, transparent); color: var(--farbe-primaer); outline: none; }
.menue-knopf[aria-expanded="true"] + .menue-klapp { display: flex; }
.menue-knopf[aria-expanded="true"]::after { transform: translateY(1px) rotate(-135deg); }
@media (hover: hover) {
    .menue-gruppe:hover .menue-klapp { display: flex; }
    .menue-gruppe:hover .menue-knopf::after { transform: translateY(1px) rotate(-135deg); }
}
.kontobereich { display: flex; align-items: center; gap: var(--abstand); }
.kontobereich form { margin: 0; }

/* Benutzermenue (Vorbild Office.Fuenta) */
.benutzer-menue { position: relative; display: inline-flex; }
.benutzer-knopf {
    display: inline-flex; align-items: center; gap: .3rem; padding: .35rem .7rem;
    border: 1px solid var(--farbe-linie); border-radius: 999px; background: var(--farbe-flaeche);
    color: var(--farbe-text); font: inherit; font-weight: 500; cursor: pointer;
}
.benutzer-knopf:hover, .benutzer-knopf[aria-expanded="true"] { border-color: var(--farbe-primaer); color: var(--farbe-primaer); }
.benutzer-knopf .pfeil { font-size: .8em; }
.benutzer-liste {
    position: absolute; right: 0; top: calc(100% + .4rem); z-index: 30; min-width: 14rem;
    display: flex; flex-direction: column; gap: .1rem; padding: .4rem;
    border: 1px solid var(--farbe-linie); border-radius: var(--rundung); background: var(--farbe-flaeche);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
}
.benutzer-liste[hidden] { display: none; }
.benutzer-liste a, .benutzer-liste button {
    display: block; width: 100%; padding: .45rem .6rem; border: 0; border-radius: calc(var(--rundung) / 2);
    background: none; color: var(--farbe-text); font: inherit; font-size: .95rem; text-align: left;
    text-decoration: none; cursor: pointer;
}
.benutzer-liste a:hover, .benutzer-liste button:hover { background: var(--farbe-grund); color: var(--farbe-primaer); }
.benutzer-liste form { margin: 0; border-top: 1px solid var(--farbe-linie); padding-top: .2rem; margin-top: .2rem; }
.warenkorb { display: grid; place-items: center; color: var(--farbe-text); }
.warenkorb .symbol { width: 1.35rem; height: 1.35rem; }
.warenkorb:hover { color: var(--farbe-primaer); }

/* ---- Baustein footer: hell und ruhig, kleine Schrift, enge Abstaende ---- */
.fussleiste {
    position: relative;
    z-index: 1;
    margin-top: auto;
    padding: calc(var(--abstand) * 2.5) calc(var(--abstand) * 2) var(--abstand);
    background: var(--farbe-flaeche);
    border-top: 1px solid var(--farbe-linie);
    color: var(--farbe-gedaempft);
    font-size: .85rem;
}
.fuss-innen {
    max-width: var(--breite);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr); /* Themen breiter, zweispaltig */
    gap: calc(var(--abstand) * 1.5);
}
.fussleiste a { color: var(--farbe-gedaempft); text-decoration: none; }
.fussleiste a:hover { color: var(--farbe-primaer); }
.fuss-spalte { display: flex; flex-direction: column; gap: .35rem; }
.fuss-spalte h4 { margin: 0 0 .25rem; font-size: .8rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--farbe-text); }
.fuss-unten {
    max-width: var(--breite);
    margin: calc(var(--abstand) * 2) auto 0;
    padding-top: var(--abstand);
    border-top: 1px solid var(--farbe-linie);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--abstand);
    font-size: .8rem;
}
.fuss-links { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1.2rem; }
.fuss-kanal { display: grid; place-items: center; }
.fuss-kanal .symbol { width: 1.15rem; height: 1.15rem; }
.fuss-logo img { display: block; width: 150px; height: auto; }

/* ---- Inhalt ---- */
.inhalt { width: 100%; max-width: var(--breite); margin: 0 auto; padding: calc(var(--abstand) * 2); }
/* Alle Seiten gleich breit (--breite) (Inhaberin 25.9.2026); nur die Karte bei Anmelden/2FA ist 60 % (.karte-schmal) */

/* ---- Gemeinsame Bausteine der Website: Videobild, Punkte, Bereiche, Kurskarten ---- */
.hero-bild {
    aspect-ratio: 16 / 9; /* Startvideo ist 1920x1080 -- nichts abschneiden */
    border-radius: calc(var(--rundung) * 1.5);
    overflow: hidden;
    background: linear-gradient(135deg, var(--farbe-verlauf-von), var(--farbe-verlauf-bis));
    box-shadow: var(--schatten-hoch);
}
.hero-bild video { width: 100%; height: 100%; object-fit: cover; display: block; }
.knopf-gross { padding: .8rem 1.5rem; font-weight: 600; }
.hero-punkte { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; padding: 0; margin: calc(var(--abstand) * 1.5) 0 0; list-style: none; color: var(--farbe-gedaempft); font-size: .92rem; }
.hero-punkte li::before { content: "✓ "; color: var(--farbe-kaufen); font-weight: 700; }

.bereich { width: 100%; max-width: var(--breite); margin: 0 auto; padding: calc(var(--abstand) * 2); }
.bereich-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: var(--abstand); }
.bereich-kopf h2 { margin: 0; font-size: 1.6rem; letter-spacing: -.01em; }
.bereich-kopf a { text-decoration: none; font-weight: 600; }

.kurskarte {
    display: flex;
    flex-direction: column;
    background: var(--farbe-flaeche);
    border: 1px solid color-mix(in srgb, var(--farbe-linie) 60%, transparent);
    border-radius: var(--rundung);
    box-shadow: var(--schatten);
    overflow: hidden;
}
.kurs-bild { aspect-ratio: 16 / 9; background: linear-gradient(135deg, color-mix(in srgb, var(--farbe-verlauf-von) 25%, white), color-mix(in srgb, var(--farbe-verlauf-bis) 35%, white)); }
.kurs-inhalt { display: flex; flex-direction: column; gap: .3rem; padding: var(--abstand); font-size: .92rem; }
.kurs-thema { color: var(--farbe-primaer); font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.kurskarte.platzhalter { opacity: .75; }

@media (max-width: 900px) {
    .fuss-innen { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
    .kopfleiste { padding: .7rem var(--abstand); }
    .hauptmenue { order: 3; flex-basis: 100%; }
    .bereich { padding-left: var(--abstand); padding-right: var(--abstand); }
    .fussleiste { padding-left: var(--abstand); padding-right: var(--abstand); }
}

.karte {
    background: var(--farbe-flaeche);
    border: 1px solid var(--farbe-linie);
    border-radius: var(--rundung);
    padding: calc(var(--abstand) * 2);
}
/* Anmelden und 2FA: Seite bleibt --breite, die Karte darin 60 % und mittig (Inhaberin 26.9.2026) */
.karte-schmal { width: 60%; margin: 0 auto; }
@media (max-width: 800px) { .karte-schmal { width: 100%; } }

/* ---- Knoepfe und Formulare ---- */
.knopf {
    display: inline-block;
    padding: .6rem 1.2rem;
    border: none;
    border-radius: var(--rundung);
    background: var(--farbe-primaer);
    color: var(--auf-primaer);
    font: inherit;
    text-decoration: none;
    cursor: pointer;
}
.knopf-leise { background: transparent; color: var(--farbe-primaer); border: 1px solid var(--farbe-linie); }

.formular { display: flex; flex-direction: column; gap: var(--abstand); }
.formular label { display: flex; flex-direction: column; gap: .3rem; color: var(--farbe-gedaempft); }
.formular input {
    padding: .6rem;
    border: 1px solid var(--farbe-linie);
    border-radius: calc(var(--rundung) / 2);
    font: inherit;
}

.meldung { padding: .6rem; border-radius: calc(var(--rundung) / 2); }
.meldung-fehler { background: color-mix(in srgb, var(--farbe-fehler) 12%, white); color: var(--farbe-fehler); }
.meldung-ok { background: color-mix(in srgb, var(--farbe-kaufen) 12%, white); color: #1c6b30; }
.feld-fehler { color: var(--farbe-fehler); font-size: .85rem; }

.feld-hinweis { font-size: .85rem; color: var(--farbe-gedaempft); }
.feld-hinweis:empty { display: none; }
.feld-hinweis.ok { color: #1c6b30; }
.feld-hinweis.warnung { color: var(--farbe-hinweis); }

/* Einstellungsformulare im Adminboard (Firmendaten): Beschriftung | Feld | Beschriftung | Feld.
   Die Spaltenzahl richtet sich nach der Breite des Formulars (nicht des Fensters): 4, 2 oder untereinander. */
.einstellungen { container-type: inline-size; gap: 1.5rem; }
.einstellungen fieldset {
    display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .6rem 1rem; align-items: start;
    margin: 0; padding: .9rem 0 0; border: 0; border-top: 1px solid var(--farbe-linie);
}
.einstellungen legend { padding: 0 .5rem 0 0; font-weight: 600; color: var(--farbe-text); }
/* allgemein (29.9.): vor jeder Abschnittsueberschrift im Formular mehr Luft */
.einstellungen fieldset { margin-top: calc(var(--abstand) * 1.25); padding-top: 1.1rem; }
.einstellungen legend { margin-bottom: .2rem; }
.einstellungen fieldset > label, .einstellungen .beschriftung {
    display: block; padding-top: .55rem; color: var(--farbe-gedaempft); font-size: .92rem;
}
.einstellungen .feld { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.einstellungen input, .einstellungen select { padding: .5rem .6rem; border: 1px solid var(--farbe-linie); border-radius: calc(var(--rundung) / 2); font: inherit; width: 100%; box-sizing: border-box; }
.einstellungen input:focus, .einstellungen select:focus { outline: 2px solid color-mix(in srgb, var(--farbe-primaer) 40%, transparent); border-color: var(--farbe-primaer); }
.einstellungen .wert { padding-top: .55rem; }
/* zwei Felder in einer Zeile, die zweite Beschriftung direkt daneben (PLZ + Ort, IBAN + BIC) */
.einstellungen .feld-zeile { display: flex; align-items: center; gap: .6rem; }
.einstellungen .feld-zeile input { flex: 1; min-width: 0; }
.einstellungen .feld-zeile label { color: var(--farbe-gedaempft); font-size: .92rem; white-space: nowrap; }
.einstellungen .feld-zeile .feld-plz { flex: 0 0 6.5rem; }
.einstellungen .feld-zeile .feld-bic { flex: 0 0 9.5rem; }
.einstellungen .mit-knopf { display: flex; gap: .4rem; }
.einstellungen .mit-knopf input { flex: 1; min-width: 0; }
.knopf-klein { padding: .4rem .7rem; font-size: .85rem; white-space: nowrap; }
/* Logo in den Firmendaten: Vorschau auf Karo-Muster, damit ein durchsichtiger Hintergrund sichtbar ist */
.logo-zeile { display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: flex-start; }
.logo-vorschau {
    display: grid; place-items: center; width: 14rem; height: 7rem; padding: .5rem; box-sizing: border-box;
    border: 1px solid var(--farbe-linie); border-radius: 8px;
    background: repeating-conic-gradient(#f1f3f6 0 25%, #fff 0 50%) 0 0 / 16px 16px;
}
.logo-vorschau img { max-width: 100%; max-height: 100%; }
.logo-aktionen { display: flex; flex-direction: column; gap: .5rem; flex: 1; min-width: 16rem; }
.logo-aktionen input[type=file] { font: inherit; font-size: .9rem; }
@container (min-width: 46rem) {
    .einstellungen fieldset { grid-template-columns: max-content minmax(0, 1fr) max-content minmax(0, 1fr); column-gap: 1.25rem; }
    .einstellungen .feld.breit { grid-column: 2 / -1; }
}
@container (max-width: 28rem) {
    .einstellungen fieldset { grid-template-columns: 1fr; row-gap: .3rem; }
    .einstellungen fieldset > label, .einstellungen .beschriftung { padding-top: .5rem; }
}

/* Zwei-Faktor (E-32): Hinweis im Header als eigene Zeile, Einrichtung mit QR-Code */
.hinweis-leiste {
    flex-basis: 100%;
    margin: 0;
    padding: .5rem .8rem;
    border-radius: calc(var(--rundung) / 2);
    background: color-mix(in srgb, var(--farbe-hinweis) 14%, white);
    color: var(--farbe-text);
    font-size: .92rem;
}
.hinweis-leiste a { font-weight: 600; margin-left: .3rem; }
.schritte { padding-left: 1.2rem; display: grid; gap: .8rem; }
/* Profil & Sicherheit: Karten nebeneinander, Verlauf darunter ueber die volle Breite */
.profil { display: grid; gap: calc(var(--abstand) * 1.5); }
.profil h1 { margin-bottom: 0; }
.profil .karte h2 { margin-top: 0; font-size: 1.2rem; }
.profil-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--abstand) * 1.5); }
@media (max-width: 760px) { .profil-raster { grid-template-columns: 1fr; } }
.angaben { display: grid; grid-template-columns: max-content 1fr; gap: .4rem 1.2rem; margin: 0; }
.angaben dt { color: var(--farbe-gedaempft); }
.angaben dd { margin: 0; }
table.liste { width: 100%; border-collapse: collapse; font-size: .95rem; }
table.liste th { text-align: left; font-weight: 600; color: var(--farbe-gedaempft); border-bottom: 1px solid var(--farbe-linie); padding: .5rem .6rem; }
table.liste td { padding: .5rem .6rem; border-bottom: 1px solid color-mix(in srgb, var(--farbe-linie) 60%, transparent); }
table.liste tr.verlauf-fehler td { color: var(--farbe-fehler); }
.zfa-raster { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: calc(var(--abstand) * 2.5); align-items: start; }
.zfa-qr { margin: 0; color: var(--farbe-gedaempft); font-size: .92rem; }
@media (max-width: 760px) { .zfa-raster { grid-template-columns: 1fr; } }
.qr-code { display: block; margin: .6rem 0; background: #fff; }
.geheimnis { display: block; margin-top: .3rem; font-size: 1.05rem; letter-spacing: .05em; word-break: break-all; }

.gedaempft { color: var(--farbe-gedaempft); }

/* ---- Adminboard (E-23): Menue links, Arbeitsflaeche rechts ---- */
.admin { flex: 1; display: grid; grid-template-columns: 260px 1fr; }
/* Menue als flache Liste (26.9.2026): Gruppen als kleine graue Ueberschrift, darunter je Bereich eine Zeile
   mit Symbol. Aktiv = heller Markenton + Balken links. Unterpunkte als Reiter auf der Seite. */
.admin-menue {
    --ton: color-mix(in srgb, var(--farbe-primaer) 8%, var(--farbe-flaeche));
    background: var(--farbe-flaeche);
    border-right: 1px solid var(--farbe-linie);
    padding: .75rem .6rem;
    font-size: .875rem;
}
.admin-menue-kopf { padding: 0 .6rem; }
.admin-menue-kopf strong { font-size: 1rem; }
.admin-menue .admin-gruppe h2 {
    display: flex; align-items: center; justify-content: space-between;
    margin: .7rem 0 .05rem; padding: 0 .6rem;
    font-size: .7rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
    color: var(--farbe-gedaempft);
}
/* Gruppenname fuehrt zur Gruppenseite mit Kacheln */
.admin-menue .admin-gruppe h2 a { color: inherit; text-decoration: none; }
.admin-menue .admin-gruppe h2 a:hover, .admin-menue .admin-gruppe h2 a.aktiv { color: var(--farbe-primaer); }
.admin-menue .menue-punkt {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .24rem .6rem;
    border-radius: 6px;
    color: var(--farbe-text);
    text-decoration: none;
}
.admin-menue .menue-punkt .symbol { width: 1rem; height: 1rem; flex-shrink: 0; color: var(--farbe-gedaempft); }
.admin-menue .menue-punkt:hover { background: var(--ton); }
.admin-menue .menue-punkt.aktiv {
    background: var(--ton);
    color: var(--farbe-primaer);
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--farbe-primaer);
}
.admin-menue .menue-punkt.aktiv .symbol { color: var(--farbe-primaer); }
/* Griffe (E-25) nur zeigen, wenn die Maus ueber dem Menue ist; am Handy immer */
.admin-menue .griff { margin-left: auto; opacity: 0; transition: opacity .15s; }
.admin-menue:hover .griff { opacity: 1; }
@media (pointer: coarse) { .admin-menue .griff { opacity: 1; } }
.admin-flaeche { padding: 2rem; min-width: 0; max-width: calc(var(--breite) + 4rem); }
.seitenkopf h1 { margin: 0; font-size: 1.9rem; letter-spacing: -.02em; }
.seitenkopf p { margin: .3rem 0 0; }
.abschnitt { margin: calc(var(--abstand) * 2.5) 0 0; font-size: 1.15rem; }

/* ---- Adminboard-Inhalt im Office.Fuenta-Look (26.9.2026): eine Karte, Pfadzeile, Reiter, Kacheln ----
   Farben bleiben unsere; uebernommen sind Form, Farbrand oben, Strich unter h1, ruhige Abstaende. */
.admin-karte {
    background: var(--farbe-flaeche);
    border: 1px solid var(--farbe-linie);
    border-top: 4px solid var(--farbe-primaer);
    border-radius: 10px;
    padding: 2rem;
    box-shadow: 0 2px 12px rgba(0, 28, 55, .07);
}
.admin-pfad { font-size: .85rem; color: var(--farbe-gedaempft); margin: 0 0 .5rem; }
.admin-pfad a { color: inherit; text-decoration: none; }
.admin-pfad a:hover { color: var(--farbe-primaer); }
.admin-pfad .seite { color: var(--farbe-text); font-weight: 600; }
.admin-karte h1 { position: relative; margin: 0 0 .5rem; padding-bottom: .35rem; font-size: 1.4rem; letter-spacing: 0; }
.admin-karte h1::after {
    content: ""; position: absolute; left: 0; bottom: 0;
    width: 2.5rem; height: 3px; border-radius: 2px; background: var(--farbe-primaer);
}
.admin-karte .abschnitt, .admin-karte .abschnitt-kopf {
    margin-top: 2.2rem; padding-top: .9rem; border-top: 1px solid var(--farbe-linie);
}
.admin-karte .abschnitt-kopf .abschnitt { margin: 0; padding: 0; border: 0; }

/* Reiter: Unterpunkte eines Bereichs, aktiver mit Farbstrich oben */
.admin-reiter {
    display: flex; flex-wrap: wrap; gap: .25rem;
    margin: .4rem -2rem 1.25rem; padding: 0 1.5rem;
    border-bottom: 1px solid var(--farbe-linie);
}
.admin-reiter a {
    padding: .35rem .9rem; font-size: .9rem; color: var(--farbe-gedaempft); text-decoration: none;
    background: var(--farbe-grund); border: 1px solid var(--farbe-linie); border-bottom: none;
    border-radius: 8px 8px 0 0; position: relative; top: 1px;
}
.admin-reiter a:hover { color: var(--farbe-text); }
.admin-reiter a.aktiv {
    background: var(--farbe-flaeche); color: var(--farbe-text); font-weight: 600;
    box-shadow: inset 0 3px 0 var(--farbe-primaer);
}

/* Kacheln im Office-Look: 4px Farbrand oben, flacher Schatten, beim Ueberfahren heller Rand + mehr Schatten */
.admin-karte .kachel { border-radius: 8px; border: 1px solid var(--farbe-linie); border-top: 4px solid var(--akzent, var(--farbe-primaer)); box-shadow: 0 1px 3px rgba(0, 28, 55, .08); }
.admin-karte .kachel-aktion:hover { transform: none; box-shadow: 0 6px 18px rgba(0, 28, 55, .14); }
.nav-kacheln {
    display: grid; gap: .75rem; margin-top: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); grid-auto-rows: 1fr;
}
/* Gruppenseite: je Bereich eine Kachel mit Symbol, Name und den Unterpunkten in klein */
.nav-kachel {
    display: flex; flex-direction: column; gap: .35rem;
    padding: .9rem 1rem; color: inherit; text-decoration: none;
    background: var(--farbe-flaeche); border: 1px solid var(--farbe-linie);
    border-top: 4px solid var(--farbe-primaer); border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 28, 55, .08); transition: box-shadow .15s, border-color .15s;
}
.nav-kachel:hover {
    border-color: color-mix(in srgb, var(--farbe-primaer) 45%, var(--farbe-flaeche));
    box-shadow: 0 6px 18px rgba(0, 28, 55, .14);
}
.nav-kachel-kopf { display: flex; align-items: center; gap: .55rem; }
.nav-kachel-kopf .symbol { width: 1.15rem; height: 1.15rem; color: var(--farbe-primaer); flex-shrink: 0; }
.nav-kachel-name { font-weight: 600; }
.nav-kachel-erklaerung { font-size: .8rem; color: var(--farbe-gedaempft); line-height: 1.35; }
@media (max-width: 560px) { .admin-karte { padding: 1.25rem; } .admin-reiter { margin: .4rem -1.25rem 1rem; padding: 0 1rem; } }

/* ---- Dashboard-Kacheln: Akzentfarbe haengt an der Kachel, nicht am Platz ---- */
.akzent-1 { --akzent: var(--farbe-primaer); }
.akzent-2 { --akzent: var(--farbe-verlauf-von); }
.akzent-3 { --akzent: var(--farbe-kaufen); }
.akzent-4 { --akzent: var(--farbe-hinweis); }

.kacheln {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: calc(var(--abstand) * 1.25);
    margin-top: calc(var(--abstand) * 1.25);
}
.kachel {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    background: var(--farbe-flaeche);
    border: 1px solid color-mix(in srgb, var(--farbe-linie) 60%, transparent);
    border-radius: var(--rundung);
    padding: calc(var(--abstand) * 1.5);
    color: var(--farbe-text);
    text-decoration: none;
    box-shadow: var(--schatten);
    transition: transform .15s, box-shadow .15s;
}
.kachel-symbol {
    display: grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    margin-bottom: .6rem;
    border-radius: calc(var(--rundung) * .8);
    background: color-mix(in srgb, var(--akzent) 12%, var(--farbe-flaeche));
    color: var(--akzent);
}
.symbol { width: 1.3rem; height: 1.3rem; }
.kachel-zahl { font-size: 2.2rem; font-weight: 800; line-height: 1.1; letter-spacing: -.02em; }
.kachel-titel { font-weight: 600; }
.kachel-zusatz { color: var(--farbe-gedaempft); font-size: .88rem; }

.kachel-aktion { flex-direction: row; align-items: center; gap: var(--abstand); }
.kachel-aktion .kachel-symbol { margin-bottom: 0; flex-shrink: 0; }
.kachel-text { display: flex; flex-direction: column; gap: .15rem; flex: 1; }
.kachel-pfeil { color: var(--farbe-gedaempft); transition: transform .15s, color .15s; }
.kachel-aktion:hover { transform: translateY(-2px); box-shadow: var(--schatten-hoch); }
.kachel-aktion:hover .kachel-pfeil { transform: translateX(3px); color: var(--akzent); }

@media (max-width: 800px) {
    .admin { grid-template-columns: 1fr; }
    .admin-menue { border-right: none; border-bottom: 1px solid var(--farbe-linie); }
}

/* ---- Verschieben am Griff (E-25, verschieben.js) ---- */
.griff {
    cursor: grab;
    color: color-mix(in srgb, var(--farbe-gedaempft) 35%, transparent);
    font-size: .8rem;
    line-height: 1;
    user-select: none;
    touch-action: none; /* Ziehen am Griff scrollt die Seite nicht */
}
.griff:hover { color: var(--farbe-gedaempft); }
.griff:active { cursor: grabbing; }
.wird-gezogen { opacity: .45; }
.admin-gruppe h2 { display: flex; align-items: center; gap: .4rem; }
.kachel { position: relative; }
.kachel .griff { position: absolute; top: .7rem; right: .8rem; }
.wird-gezogen { box-shadow: 0 6px 18px rgba(0, 0, 0, .15); }

/* Finger statt Maus: groessere Griffflaeche */
@media (pointer: coarse) {
    .griff { font-size: 1.05rem; padding: .35rem .45rem; margin: -.35rem 0; }
    .kachel .griff { top: .3rem; right: .4rem; }
}

/* 4 Kacheln nebeneinander, darunter 2, am Handy 1 */
@media (max-width: 1000px) { .kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .kacheln { grid-template-columns: 1fr; } }

/* ---- Schnellzugriff einrichten (⋮) ---- */
.abschnitt-kopf { display: flex; align-items: center; justify-content: space-between; margin-top: calc(var(--abstand) * 2.5); }
.abschnitt-kopf .abschnitt { margin: 0; }
.einstellung { position: relative; }
.einstellung summary {
    list-style: none;
    cursor: pointer;
    padding: .2rem .6rem;
    border-radius: calc(var(--rundung) / 2);
    color: var(--farbe-gedaempft);
    font-size: 1.2rem;
}
.einstellung summary::-webkit-details-marker { display: none; }
.einstellung summary:hover { background: var(--farbe-flaeche); }
.einstellung-feld {
    position: absolute;
    right: 0;
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    width: min(300px, 85vw);
    padding: calc(var(--abstand) * 1.25);
    background: var(--farbe-flaeche);
    border: 1px solid var(--farbe-linie);
    border-radius: var(--rundung);
    box-shadow: var(--schatten-hoch);
}
.einstellung-feld label { display: flex; align-items: center; gap: .5rem; cursor: pointer; }
.einstellung-feld .knopf { margin-top: .4rem; }

/* ---- Baustein lebenszyklus: schlichte Kurve ohne Achsen, mit Punktverfolgung ---- */
.bereich-text { margin: .4rem 0 0; }
.lz { margin-top: calc(var(--abstand) * 1.5); }
.lz-flaeche {
    position: relative;
    aspect-ratio: 1000 / 380; /* gleich der viewBox: Punkt-Prozente passen genau */
}
.lz-kurve { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.lz-fuellung { fill: url(#lzFuellung); }
.lz-linie { fill: none; stroke: color-mix(in srgb, var(--farbe-akzent) 45%, transparent); stroke-width: 3; stroke-linecap: round; }
.lz-weg { fill: none; stroke: color-mix(in srgb, var(--farbe-akzent) 80%, white); stroke-width: 5; stroke-linecap: round; }

.lz-spalten { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(4, 1fr); }
.lz-spalte {
    position: relative;
    display: block;
    border-right: 1px dashed var(--farbe-linie);
    color: var(--farbe-text);
    text-decoration: none;
    transition: background .25s;
}
.lz-spalte:last-child { border-right: none; }
.lz-kopf { position: absolute; top: .7rem; left: .8rem; right: .5rem; display: flex; align-items: center; gap: .5rem; font-size: .95rem; }
.lz-nr {
    display: inline-grid;
    place-items: center;
    flex-shrink: 0;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 50%;
    border: 1.5px solid var(--farbe-primaer);
    background: var(--farbe-flaeche);
    color: var(--farbe-primaer);
    font-size: .85rem;
    font-weight: 700;
}
/* Bloecke je Phase dort, wo die Kurve Platz laesst */
.lz-block {
    position: absolute;
    left: .8rem;
    width: min(85%, 230px);
    display: flex;
    flex-direction: column;
    gap: .3rem;
    padding: .7rem .85rem;
    background: var(--farbe-flaeche);
    border-radius: var(--rundung);
    box-shadow: var(--schatten);
    font-size: .88rem;
    color: var(--farbe-gedaempft);
    transition: opacity .25s, transform .25s, box-shadow .25s;
}
.lz-spalte:nth-child(1) .lz-block { top: 30%; }
.lz-spalte:nth-child(2) .lz-block { top: 14%; }
.lz-spalte:nth-child(3) .lz-block { top: 47%; }
.lz-spalte:nth-child(4) .lz-block { bottom: 5%; }
.lz-link { color: var(--farbe-primaer); font-weight: 600; }

/* Maus in der Grafik: aktive Phase poppt auf, die anderen treten zurueck */
.verfolgt .lz-spalte:not(.aktiv) .lz-block { opacity: .45; }
.lz-spalte.aktiv, .lz-spalte:focus-visible { background: color-mix(in srgb, var(--farbe-primaer) 6%, transparent); outline: none; }
.lz-spalte.aktiv .lz-block, .lz-spalte:focus-visible .lz-block {
    transform: translateY(-4px) scale(1.04);
    box-shadow: var(--schatten-hoch);
    animation: aufpoppen .4s ease-out;
}
@keyframes aufpoppen {
    0% { transform: translateY(0) scale(.96); }
    60% { transform: translateY(-6px) scale(1.07); }
    100% { transform: translateY(-4px) scale(1.04); }
}
.lz-punkt, .lz-lot { position: absolute; pointer-events: none; opacity: 0; transition: opacity .2s; }
.lz-punkt {
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    border-radius: 50%;
    background: var(--farbe-primaer);
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--farbe-primaer) 22%, transparent);
}
.lz-lot { bottom: 0; border-left: 1.5px dashed color-mix(in srgb, var(--farbe-primaer) 55%, transparent); }
.verfolgt .lz-punkt, .verfolgt .lz-lot { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .lz-spalte.aktiv .lz-block { animation: none; } }

/* Handy: Liste statt Bloecke in der Grafik */
.lz-liste { display: none; }
@media (max-width: 760px) {
    .lz-kopf strong, .lz-block { display: none; }
    .lz-kopf { top: .3rem; left: .3rem; }
    .lz-liste { display: grid; gap: var(--abstand); margin-top: calc(var(--abstand) * 1.25); }
    .lz-karte {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: .2rem .7rem;
        padding: var(--abstand);
        background: var(--farbe-flaeche);
        border-radius: var(--rundung);
        box-shadow: var(--schatten);
        color: var(--farbe-gedaempft);
        text-decoration: none;
        font-size: .92rem;
    }
    .lz-karte .lz-nr { grid-row: span 3; }
    .lz-karte strong { color: var(--farbe-text); }
}

/* ---- Baustein testimonials ---- */
.stimmen-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--abstand) * 1.25); margin-top: calc(var(--abstand) * 1.25); }
.stimme {
    margin: 0;
    padding: calc(var(--abstand) * 1.5);
    background: var(--farbe-flaeche);
    border-radius: var(--rundung);
    box-shadow: var(--schatten);
    display: flex;
    flex-direction: column;
    gap: var(--abstand);
}
.stimme blockquote { margin: 0; line-height: 1.55; }
.stimme blockquote::before { content: "“"; display: block; font-size: 2.6rem; line-height: .8; color: var(--farbe-verlauf-von); font-weight: 800; }
.stimme figcaption { display: flex; flex-direction: column; font-size: .9rem; margin-top: auto; }
.stimme figcaption span { color: var(--farbe-gedaempft); }
@media (max-width: 900px) { .stimmen-raster { grid-template-columns: 1fr; } }

/* ---- Seiten Vorteile und Vergleich (Baustein vergleichstabelle) ---- */
.seite { padding-top: calc(var(--abstand) * 2.5); padding-bottom: calc(var(--abstand) * 3); }
.seite h1 { font-size: clamp(1.9rem, 4vw, 2.8rem); line-height: 1.1; letter-spacing: -.02em; margin: .8rem 0 1rem; }
.seite-einleitung { max-width: 44rem; font-size: 1.1rem; line-height: 1.55; color: var(--farbe-gedaempft); margin: 0; }
.entwurf-hinweis {
    display: inline-block;
    margin: 0 0 var(--abstand);
    padding: .35rem .9rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--farbe-hinweis) 18%, var(--farbe-flaeche));
    font-size: .85rem;
}

.vergleich { margin-top: calc(var(--abstand) * 2); }
.vergleich-rahmen {
    overflow-x: auto; /* Handy: Tabelle waagrecht scrollen statt quetschen */
    border: 1px solid var(--farbe-linie);
    border-radius: var(--rundung);
    background: var(--farbe-flaeche);
    box-shadow: var(--schatten);
}
.vergleich-tabelle { width: 100%; min-width: 560px; border-collapse: collapse; font-size: .95rem; }
.vergleich-tabelle th, .vergleich-tabelle td { padding: .9rem 1rem; border-bottom: 1px solid var(--farbe-linie); text-align: center; vertical-align: middle; }
.vergleich-tabelle tbody tr:last-child > * { border-bottom: none; }
.vergleich-tabelle thead th { font-size: .8rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--farbe-gedaempft); }
.vergleich-tabelle th[scope="row"], .vergleich-tabelle thead th:first-child { text-align: left; }
.vergleich-tabelle th[scope="row"] { font-weight: 400; }
.vergleich-kriterium { display: block; font-weight: 600; color: var(--farbe-text); }
.vergleich-erklaerung { display: block; margin-top: .2rem; font-size: .85rem; color: var(--farbe-gedaempft); }
.vergleich-tabelle .vergleich-wir { background: color-mix(in srgb, var(--farbe-primaer) 7%, transparent); }
.vergleich-tabelle thead .vergleich-wir { color: var(--farbe-primaer); }

.wertung {
    display: inline-grid;
    place-items: center;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 50%;
    font-weight: 700;
}
.wertung.ja { background: color-mix(in srgb, var(--farbe-kaufen) 15%, transparent); color: var(--farbe-kaufen); }
.wertung.teilweise { background: color-mix(in srgb, var(--farbe-verlauf-von) 14%, transparent); color: color-mix(in srgb, var(--farbe-verlauf-von) 70%, var(--farbe-text)); }
.wertung.nein { background: color-mix(in srgb, var(--farbe-fehler) 12%, transparent); color: var(--farbe-fehler); }
.wertung[data-tipp] { cursor: help; }
.wertung[data-tipp]:focus-visible { outline: 2px solid var(--farbe-primaer); outline-offset: 2px; }

/* Sprechblase fuer data-tipp (sprechblase.js) */
.sprechblase {
    position: fixed;
    z-index: 40;
    max-width: min(20rem, calc(100vw - 16px));
    padding: .55rem .8rem;
    border-radius: calc(var(--rundung) * .7);
    background: var(--farbe-text);
    color: var(--farbe-flaeche);
    box-shadow: var(--schatten-hoch);
    font-size: .82rem;
    line-height: 1.4;
    pointer-events: none;
    opacity: 0;
    transition: opacity .15s;
}
.sprechblase.sichtbar { opacity: 1; }

.vergleich-legende { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin: var(--abstand) 0 0; font-size: .85rem; color: var(--farbe-gedaempft); }
.vergleich-legende > span { display: inline-flex; align-items: center; gap: .4rem; }
.vergleich-legende .wertung { width: 1.4rem; height: 1.4rem; font-size: .8rem; }
.vergleich-hinweis { margin: .6rem 0 0; font-size: .8rem; color: var(--farbe-gedaempft); }
.vergleich-weiter { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin: calc(var(--abstand) * 2) 0 0; }
.vergleich-weiter a { text-decoration: none; font-weight: 600; }
.vergleich-aufruf { margin: calc(var(--abstand) * 2) 0 0; }

/* ---- Rechtstexte (recht/*.html): ruhige Lesespalte ---- */
.rechtstext { max-width: 820px; line-height: 1.65; }
.rechtstext h2 { margin: calc(var(--abstand) * 2) 0 .5rem; font-size: 1.25rem; letter-spacing: -.01em; }
.rechtstext p, .rechtstext li { color: var(--farbe-text); }
.rechtstext ul, .rechtstext ol { padding-left: 1.3rem; }
.rechtstext li + li { margin-top: .35rem; }
.muster-formular {
    padding: calc(var(--abstand) * 1.25) calc(var(--abstand) * 1.5);
    border: 1px dashed var(--farbe-linie);
    border-radius: var(--rundung);
    background: var(--farbe-flaeche);
}
.muster-formular p { margin: 0 0 .8rem; }
.pdf-knopf { margin: calc(var(--abstand) * 2.5) 0 0; padding-top: calc(var(--abstand) * 1.5); border-top: 1px solid var(--farbe-linie); }
.muster-formular p:last-child { margin-bottom: 0; line-height: 2; }
.rechtstext .offen { padding: 0 .3rem; border-radius: 4px; background: color-mix(in srgb, var(--farbe-hinweis) 22%, transparent); font-weight: 600; } /* offene Stelle im Entwurf */

/* Nur fuer Screenreader sichtbar (z. B. Textbeschreibung des Startvideos) */
.nur-screenreader { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---- Startseite (E-27): Einstieg, Laufband, Themen-Karte, Abschnitte ---- */
.startseite .kopfleiste { background: color-mix(in srgb, var(--farbe-grund) 80%, transparent); }
.startseite h1, .startseite h2 { letter-spacing: -.02em; }

/* Vorschau-Hinweis (nur /admin/vorschau/startseite) als kleines Schild unten links */
.vorschau-hinweis {
    position: fixed;
    left: .8rem;
    bottom: .8rem;
    z-index: 30;
    max-width: calc(100% - 1.6rem);
    margin: 0;
    padding: .35rem .9rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--farbe-hinweis) 18%, var(--farbe-flaeche));
    box-shadow: var(--schatten-hoch);
    font-size: .78rem;
}

/* Start-Bildschirm: bleibt stehen (stapel.js setzt --kopf-h und top), unten lugt die Themen-Karte hervor */
.start-bildschirm { position: sticky; top: var(--kopf-h, 65px); }
.start-einstieg {
    max-width: 1320px;
    margin: 0 auto;
    padding: calc(var(--abstand) * 2) clamp(2rem, 6vw, 7rem) calc(var(--abstand) * 3.9); /* Seitenrand waechst mit der Breite */
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    gap: clamp(2rem, 4.5vw, 5rem);
    align-items: center;
}
.start-etikett { font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--farbe-primaer); }
.start-text h1 { font-size: clamp(2rem, min(3.5vw, 7.2svh), 4.4rem); line-height: 1.05; letter-spacing: -.025em; margin: 1.2rem 0 1.4rem; }
.start-text h1 em { font-style: italic; }
.start-text > p { font-size: clamp(1.05rem, 2.2svh, 1.3rem); line-height: 1.55; color: var(--farbe-gedaempft); margin: 0 0 calc(var(--abstand) * 2.2); }
.start-text .hero-punkte { margin-top: calc(var(--abstand) * 1.8); font-size: .95rem; }
.start-suche {
    display: flex;
    gap: .5rem;
    max-width: 560px;
    padding: .4rem;
    border: 1px solid var(--farbe-linie);
    border-radius: 999px;
    background: var(--farbe-flaeche);
    box-shadow: var(--schatten);
}
.start-suche input { flex: 1; min-width: 0; border: none; background: transparent; padding: .5rem .9rem; font: inherit; outline: none; }
.start-suche .knopf { border-radius: 999px; }

/* Video-Breite an der Bildschirmhoehe begrenzen: Video (16:9), Laufband und Oberkante der Themen-Karte passen hinein */
.start-buehne { width: min(100%, calc((100svh - var(--kopf-h, 65px) - 330px) * 16 / 9)); min-width: 240px; justify-self: center; }
.start-bild { position: relative; padding: 1rem 1rem 1rem 0; }
.start-rahmen {
    position: absolute;
    inset: 0 0 0 1rem;
    border-radius: calc(var(--rundung) * 1.6);
    background: color-mix(in srgb, var(--farbe-linie) 60%, var(--farbe-grund));
}
.start-video { position: relative; box-shadow: var(--schatten-hoch); border-radius: calc(var(--rundung) * 1.4); }

/* Gerades Laufband mit den Themen */
.start-laufband {
    overflow: hidden;
    border-block: 1px solid var(--farbe-linie);
    padding: 1.1rem 0;
    margin: 0 0 calc(var(--abstand) * 4.5);
    mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.start-laufband-spur { display: flex; width: max-content; animation: laufband 40s linear infinite; }
.start-laufband span { padding: 0 2rem; font-size: 1.4rem; font-weight: 700; color: var(--farbe-primaer); white-space: nowrap; }
.start-laufband span::after { content: "✦"; margin-left: 4rem; color: color-mix(in srgb, var(--farbe-primaer) 45%, transparent); font-size: .9rem; vertical-align: middle; }
@keyframes laufband { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .start-laufband-spur { animation: none; } }

/* Themen-Karte gleitet einmal mit stark gerundeten Ecken ueber den Start-Bildschirm; danach normale Abschnitte */
.start-karte, .start-abschnitt { position: relative; z-index: 1; background: var(--farbe-grund); }
.start-karte {
    padding-bottom: calc(var(--abstand) * 2);
    border-radius: 2rem 2rem 0 0;
    box-shadow: 0 -14px 34px -12px rgba(16, 24, 40, .22);
}
.start-karte > .bereich { padding-top: calc(var(--abstand) * 1.5); } /* Ueberschrift knapp unter der Kartenkante */
.start-abschnitt { padding: calc(var(--abstand) * 2) 0; }
.start-hell { background: var(--farbe-flaeche); }
.start-petrol { background: color-mix(in srgb, var(--farbe-primaer) 8%, var(--farbe-flaeche)); }

.start-kopf { display: flex; align-items: baseline; gap: 1rem; border-bottom: 1px solid var(--farbe-linie); padding-bottom: .6rem; }
.start-kopf h2, .startseite .bereich-kopf h2 { margin: 0; font-size: 1.7rem; }
.start-kopf h2 { flex: 1; }
.start-kopf a { text-decoration: none; font-weight: 600; }
.startseite .lebenszyklus .bereich-kopf { border-bottom: 1px solid var(--farbe-linie); padding-bottom: .6rem; }


/* Hinter den Themen: weiche Farbflaechen in den Markenfarben (Verlauf blau -> mint, Petrol), die langsam wandern,
   darueber ein feines Linienraster, das zur Mitte hin sichtbar ist. Nur CSS, keine Bilddatei; bei „Bewegung
   reduzieren“ steht alles still. (29.9., ersetzt das Punkteraster) */
.start-karte:has(.start-themen) { overflow: hidden; isolation: isolate; }
.start-karte:has(.start-themen)::before {
    content: ""; position: absolute; inset: -20%; z-index: -2; pointer-events: none;
    background:
        radial-gradient(38% 42% at 18% 30%, color-mix(in srgb, var(--farbe-verlauf-von) 30%, transparent), transparent 70%),
        radial-gradient(34% 40% at 82% 22%, color-mix(in srgb, var(--farbe-verlauf-bis) 42%, transparent), transparent 70%),
        radial-gradient(40% 44% at 62% 82%, color-mix(in srgb, var(--farbe-primaer) 24%, transparent), transparent 70%),
        radial-gradient(30% 34% at 8% 88%, color-mix(in srgb, var(--farbe-verlauf-bis) 26%, transparent), transparent 70%);
    filter: blur(28px) saturate(1.15);
    animation: themen-wandern 26s ease-in-out infinite alternate;
}
.start-karte:has(.start-themen)::after {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background-image:
        linear-gradient(color-mix(in srgb, var(--farbe-primaer) 9%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--farbe-primaer) 9%, transparent) 1px, transparent 1px);
    background-size: 44px 44px;
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000 30%, transparent 80%);
    mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000 30%, transparent 80%);
}
@keyframes themen-wandern {
    0%   { transform: translate(0, 0) rotate(0deg) scale(1); }
    50%  { transform: translate(4%, -3%) rotate(8deg) scale(1.06); }
    100% { transform: translate(-3%, 4%) rotate(-6deg) scale(1.02); }
}
@media (prefers-reduced-motion: reduce) {
    .start-karte:has(.start-themen)::before { animation: none; }
}
/* Kacheln leicht glasig, damit die Farbe durchscheint und der Text lesbar bleibt */
.start-karte .start-thema { backdrop-filter: blur(6px); background: linear-gradient(145deg, color-mix(in srgb, var(--akzent) 12%, rgba(255, 255, 255, .82)), rgba(255, 255, 255, .9) 65%); }

/* Themen-Kacheln: Symbol, H3 und Erklaerung linksbuendig; Innenschattierung und duenner Farbrahmen */
.start-themen {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: calc(var(--abstand) * 1.5);
    margin-top: calc(var(--abstand) * 2.4);
}
.start-thema {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    padding: calc(var(--abstand) * 1.6);
    border-radius: calc(var(--rundung) * 1.3);
    background: linear-gradient(145deg, color-mix(in srgb, var(--akzent) 9%, var(--farbe-flaeche)), var(--farbe-flaeche) 65%);
    border: 1px solid color-mix(in srgb, var(--akzent) 40%, transparent);
    box-shadow: var(--schatten), inset 0 0 28px color-mix(in srgb, var(--akzent) 10%, transparent);
    color: var(--farbe-text);
    text-decoration: none;
    transition: transform .2s, box-shadow .2s;
}
.start-thema-kopf { display: flex; flex-direction: column; align-items: flex-start; gap: .6rem; }
.start-thema .kachel-symbol { width: 3rem; height: 3rem; margin: 0; flex-shrink: 0; }
.start-thema h3 { margin: 0; font-size: 1.15rem; letter-spacing: -.01em; }
.start-thema p { margin: 0; color: var(--farbe-gedaempft); font-size: .95rem; line-height: 1.5; }
.startseite .start-themen .start-thema:hover { /* staerker als die Einblenden-Regeln */
    transform: translateY(-4px);
    transition-delay: 0s;
    box-shadow: var(--schatten-hoch), inset 0 0 28px color-mix(in srgb, var(--akzent) 14%, transparent);
}

/* Neu hochgeladen: ein grosser Kurs, daneben vier kleine */
.start-kurse {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: auto auto;
    gap: calc(var(--abstand) * 1.25);
    margin-top: calc(var(--abstand) * 1.5);
}
.start-kurs-gross, .start-kurse > .kurskarte-link:first-child { grid-row: span 2; }
.start-kurs-gross .kurs-bild, .start-kurse > .kurskarte-link:first-child .kurs-bild { aspect-ratio: auto; flex: 1; min-height: 220px; }
.start-kurs-gross strong, .start-kurse > .kurskarte-link:first-child strong { font-size: 1.5rem; }

.start-zitat { margin: calc(var(--abstand) * 2) 0 0; padding: 0 0 0 calc(var(--abstand) * 2); border-left: 6px solid var(--farbe-primaer); }
.start-zitat blockquote { margin: 0 0 var(--abstand); font-size: clamp(1.5rem, 3vw, 2.3rem); font-weight: 700; line-height: 1.3; font-style: italic; }
.start-zitat figcaption { color: var(--farbe-gedaempft); }

.start-aufruf { text-align: center; padding: calc(var(--abstand) * 4) var(--abstand) calc(var(--abstand) * 5); }
.start-aufruf h2 { font-size: clamp(1.8rem, 4vw, 2.8rem); margin: 0 0 calc(var(--abstand) * 1.5); }

/* Einblenden beim Scrollen (einblenden.js); Themen-Kacheln nacheinander */
.einblenden-an [data-einblenden] { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
.einblenden-an .start-themen [data-einblenden] { transition-delay: calc(var(--i, 0) * 80ms); }
.einblenden-an [data-einblenden].sichtbar { opacity: 1; transform: none; }

@media (max-width: 900px) {
    /* Handy/Tablet hochkant: Text und Video untereinander -- Video so gross, wie Platz bleibt */
    .start-einstieg { grid-template-columns: 1fr; gap: calc(var(--abstand) * 1.2); padding-top: calc(var(--abstand) * 2); }
    .start-buehne { width: min(100%, calc((100svh - var(--kopf-h, 65px) - 540px) * 16 / 9)); min-width: 200px; }
    .start-text > p { margin-bottom: var(--abstand); }
    .start-themen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .start-kurse { grid-template-columns: 1fr 1fr; }
    .start-kurs-gross, .start-kurse > .kurskarte-link:first-child { grid-column: 1 / -1; grid-row: auto; }
}
@media (max-width: 560px) {
    .start-einstieg { padding-left: var(--abstand); padding-right: var(--abstand); }
    .start-themen, .start-kurse { grid-template-columns: 1fr; }
    .start-karte { border-radius: 1.4rem 1.4rem 0 0; }
    .start-laufband { padding: .7rem 0; }
    .start-laufband span { font-size: 1.1rem; }
}

/* Notfall-Codes (T-1.0 Schritt 3) */
.notfall-eingabe { margin-top: calc(var(--abstand) * 1.5); border-top: 1px solid var(--farbe-linie); padding-top: var(--abstand); }
.notfall-eingabe summary { cursor: pointer; color: var(--farbe-gedaempft); }
.notfall-eingabe[open] summary { margin-bottom: var(--abstand); }
.profil .karte h3 { font-size: 1rem; margin: calc(var(--abstand) * 1.5) 0 .4rem; }
.notfall-codes { margin: var(--abstand) 0; }
.notfall-liste { display: grid; grid-template-columns: repeat(2, max-content); gap: .3rem 2rem; margin: .5rem 0 0; padding-left: 1.6rem;
    font-family: ui-monospace, Consolas, monospace; font-size: 1.05rem; }
.notfall-neu { margin-top: .6rem; }
ul.meldung { padding-left: 1.6rem; margin: 0 0 .6rem; }

/* Zweitrangiger Knopf (umrandet), z. B. "Code per E-Mail schicken" */
.knopf-zweit { background: transparent; color: var(--farbe-primaer); box-shadow: inset 0 0 0 1px var(--farbe-primaer); }
form.mit-knopf { margin-top: .6rem; }
.zfa-wahl { border-top: 1px solid var(--farbe-linie); margin-top: calc(var(--abstand) * 1.5); padding-top: var(--abstand); }
.zfa-freigabe { background: color-mix(in srgb, var(--farbe-primaer) 6%, white); border-radius: calc(var(--rundung) / 2); padding: .8rem 1rem; margin: var(--abstand) 0; }

/* Registrierung und Warteliste (T-1.1) */
.formular select { padding: .6rem; border: 1px solid var(--farbe-linie); border-radius: calc(var(--rundung) / 2); font: inherit; background: #fff; }
.formular label.auswahl { flex-direction: row; align-items: flex-start; gap: .5rem; color: inherit; }
.formular label.auswahl input { margin-top: .25rem; padding: 0; }
/* nur die Kontoart-Auswahl der Registrierung -- nicht jedes fieldset (sonst bricht das Raster der Einstellungen) */
.registrieren fieldset.kontoart { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; }
.registrieren fieldset.kontoart legend { color: var(--farbe-gedaempft); margin-bottom: .3rem; width: 100%; }
.meldung-hinweis { background: color-mix(in srgb, var(--farbe-primaer) 8%, white); }
.registrieren .nur-unternehmen { display: flex; flex-direction: column; gap: var(--abstand); }
.registrieren:has(input[name="kontoart"][value="PRIVAT"]:checked) .nur-unternehmen { display: none; }

/* Adminboard: Listen mit Filter, Formulare (T-2.2 Themen und Kategorien) */
.einstellungen textarea { padding: .5rem .6rem; border: 1px solid var(--farbe-linie); border-radius: calc(var(--rundung) / 2); font: inherit; width: 100%; box-sizing: border-box; resize: vertical; }
.filter-zeile { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: var(--abstand) 0; }
.filter-zeile input, .filter-zeile select { padding: .45rem .6rem; border: 1px solid var(--farbe-linie); border-radius: calc(var(--rundung) / 2); font: inherit; }
.filter-zeile input[type=search] { flex: 1; min-width: 12rem; }
.filter-zeile .filter-rechts { margin-left: auto; }
.knopf-zeile { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: var(--abstand); }
.archiv-zeile { margin-top: calc(var(--abstand) * 2); padding-top: var(--abstand); border-top: 1px solid var(--farbe-linie); }
table.liste-klickbar td a { color: inherit; font-weight: 600; text-decoration: none; }
table.liste-klickbar td a:hover { text-decoration: underline; }
table.liste tr.archiviert td { color: var(--farbe-gedaempft); }
.knopf-symbol { border: 1px solid var(--farbe-linie); background: #fff; border-radius: 4px; cursor: pointer; font-size: .7rem; padding: .15rem .35rem; color: var(--farbe-gedaempft); }
.knopf-symbol:hover { color: var(--farbe-primaer); border-color: var(--farbe-primaer); }
/* Kategorien: Name und Kurzbeschreibung uebereinander, Griff links, ein Speichern-Knopf oben rechts */
.liste-kopf { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: var(--abstand) 0; }
.liste-kopf p { margin: 0; }
table.kategorien td { vertical-align: top; }
table.kategorien .griff-zelle { width: 2rem; padding-top: .9rem; }
table.kategorien .zahl { width: 5rem; text-align: right; }
table.kategorien td.zahl { padding-top: .9rem; }
table.kategorien input, table.kategorien textarea {
    padding: .4rem .55rem; border: 1px solid var(--farbe-linie); border-radius: calc(var(--rundung) / 2);
    font: inherit; width: 100%; box-sizing: border-box; background: #fff;
}
table.kategorien input.name { font-weight: 600; }
table.kategorien textarea.kurzbeschreibung {
    resize: none; color: var(--farbe-gedaempft); font-size: .92rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; height: 2.1rem;
}
/* ↵ gedrueckt: ganzer Text, umgebrochen, Hoehe passt sich an */
table.kategorien.umbrechen textarea.kurzbeschreibung { white-space: pre-wrap; height: auto; field-sizing: content; min-height: 2.1rem; }
table.kategorien tr.wird-gezogen { opacity: .5; }
table.kategorien tr.neu td { border-bottom: 0; }
.knopf-symbol.umbruch { margin-left: .4rem; font-size: .85rem; vertical-align: middle; }
.knopf-symbol[aria-pressed="true"] { background: var(--farbe-primaer); color: var(--auf-primaer); border-color: var(--farbe-primaer); }
/* Einstellungen: ueber die ganze Breite, Beschriftung darueber (z. B. Beschreibung eines Themas) */
.einstellungen .ganz { grid-column: 1 / -1; }
.einstellungen fieldset > label.ganz { padding-top: .2rem; margin-bottom: -.3rem; }
table.liste td.aktion { text-align: right; white-space: nowrap; width: 1%; }
/* Knoepfe in Tabellenzeilen flach, damit alle Listen gleich hohe Zeilen haben (30.9.) */
table.liste td .knopf-klein { padding: 0 .5rem; line-height: 1.5; }
table.liste td form { display: inline; margin: 0; }
/* Kategorien in einer Zeile: Griff | Name | Kurzbeschreibung | Themen, ohne Trennstriche, Breiten ziehbar */
table.kategorien { table-layout: fixed; width: 100%; }
table.kategorien col.c-griff { width: 2.5rem; }
table.kategorien col[data-spalte="name"] { width: 18rem; }
table.kategorien col.c-zahl { width: 5.5rem; }
table.kategorien th, table.kategorien td { border-bottom: 0; }
table.kategorien thead th { position: relative; }
table.kategorien td { padding: .3rem .5rem; }
table.kategorien .griff-zelle, table.kategorien td.zahl { padding-top: .7rem; }
.spalten-griff { position: absolute; top: 0; right: -3px; width: 7px; height: 100%; cursor: col-resize; touch-action: none; }
.spalten-griff::after { content: ""; position: absolute; left: 3px; top: 25%; height: 50%; border-left: 1px solid var(--farbe-linie); }
.spalten-griff:hover::after { border-left: 2px solid var(--farbe-primaer); }

/* dunkle Knoepfe: beim Darueberfahren weisser Hintergrund, gruene Schrift, Rahmen */
.knopf:hover { background: #fff; color: var(--farbe-primaer); box-shadow: inset 0 0 0 1px var(--farbe-primaer); }
.knopf-zweit:hover { background: var(--farbe-primaer); color: var(--auf-primaer); }
.knopf-leise:hover { background: var(--farbe-grund); color: var(--farbe-primaer); box-shadow: none; }
/* Kategorie zum Loeschen markiert (×), geloescht wird beim Speichern */
table.kategorien col.c-loeschen { width: 2.5rem; }
table.kategorien .loeschen-zelle { padding-top: .6rem; text-align: center; }
.knopf-symbol.loeschen { font-size: 1rem; line-height: 1; padding: .1rem .4rem; }
.knopf-symbol.loeschen:hover, .knopf-symbol.loeschen[aria-pressed="true"] { color: #fff; background: var(--farbe-fehler); border-color: var(--farbe-fehler); }
table.kategorien tr.zum-loeschen input, table.kategorien tr.zum-loeschen textarea { text-decoration: line-through; opacity: .5; }

/* Leads (T-2.3): Status-Etikett, Themen als Chips, Zeitleiste als Schritte nebeneinander */
.status { display: inline-block; padding: .1rem .55rem; border-radius: 999px; font-size: .82rem; white-space: nowrap;
    background: color-mix(in srgb, var(--farbe-primaer) 10%, white); color: var(--farbe-primaer); }
.status-neu { background: #eef1f4; color: var(--farbe-gedaempft); }
.status-ok { background: color-mix(in srgb, var(--farbe-kaufen) 15%, white); color: #1c6b30; }
.status-fehler { background: color-mix(in srgb, var(--farbe-fehler) 10%, white); color: var(--farbe-fehler); white-space: normal; }
.status-vertrag-erhalten { background: color-mix(in srgb, var(--farbe-kaufen) 15%, white); color: #1c6b30; }
.status-absage-erhalten, .status-archiviert { background: color-mix(in srgb, var(--farbe-fehler) 10%, white); color: var(--farbe-fehler); }
/* Referent:innen (T-2.3 Teil 3): Ampel aus der Vollstaendigkeit der Stammdaten */
.ampel { display: inline-flex; align-items: center; gap: .4rem; font-size: .85rem; white-space: nowrap; }
.ampel::before { content: ""; width: .75rem; height: .75rem; border-radius: 50%; background: var(--farbe-gedaempft); flex: none; }
.ampel-rot::before { background: var(--farbe-fehler); }
.ampel-gelb::before { background: var(--farbe-hinweis); }
.ampel-gruen::before { background: #2e9e4f; }
.liste-kopf .ampel { white-space: normal; }
table.anteile { margin-bottom: .5rem; }
/* OnBoarding (T-2.3 Teil 4): Checkliste in zwei Spalten, Fortschrittsbalken in der Uebersicht */
ol.checkliste { list-style: none; counter-reset: schritt; padding: 0; margin: 0; display: grid;
    grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr)); gap: .4rem 2rem; }
ol.checkliste li { counter-increment: schritt; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
    padding: .45rem .6rem; border: 1px solid var(--farbe-linie); border-radius: calc(var(--rundung) / 2); }
ol.checkliste li.erledigt { background: color-mix(in srgb, var(--farbe-kaufen) 8%, white); border-color: color-mix(in srgb, var(--farbe-kaufen) 35%, white); }
.formular ol.checkliste label { flex-direction: row; align-items: center; gap: .6rem; color: var(--farbe-text); }
ol.checkliste label::before { content: counter(schritt) "."; color: var(--farbe-gedaempft); min-width: 1.4rem; }
ol.checkliste input { width: auto; margin: 0; }
/* ToDos im Dashboard: Aufgabe als Eingabefeld, Prioritaet farbig am linken Rand */
table.todos input, table.todos select { width: 100%; box-sizing: border-box; padding: .3rem .45rem; border: 1px solid transparent;
    border-radius: calc(var(--rundung) / 2); font: inherit; background: transparent; }
table.todos input:hover, table.todos input:focus, table.todos select:hover, table.todos select:focus { border-color: var(--farbe-linie); background: #fff; }
table.todos td { padding: .15rem .45rem; }
table.todos input, table.todos select { padding: .15rem .35rem; }
/* Dashboard kompakter (29.9.): Kennzahl-Kacheln niedrig, Symbol links neben Zahl, Titel und Zusatz */
.admin-karte .kacheln { gap: .8rem; margin-top: .8rem; }
.admin-karte .kachel { padding: .7rem 1rem; }
.admin-karte .kachel-link { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: .8rem; row-gap: 0; align-items: center; }
.admin-karte .kachel-link .kachel-symbol { grid-row: 1 / span 3; width: 2.2rem; height: 2.2rem; margin: 0; }
.admin-karte .kachel-link .kachel-zahl { font-size: 1.5rem; }
.admin-karte .kachel-link .kachel-titel { font-size: .92rem; }
.admin-karte .kachel-link .kachel-zusatz { font-size: .8rem; }
.admin-karte .kachel-aktion { padding: .55rem .9rem; }
.admin-karte .kachel-aktion .kachel-symbol { width: 2rem; height: 2rem; }
table.todos tr.prio-hoch td:first-child { box-shadow: inset 3px 0 0 var(--farbe-fehler); }
table.todos tr.prio-mittel td:first-child { box-shadow: inset 3px 0 0 var(--farbe-hinweis); }
table.todos tr.prio-niedrig td:first-child { box-shadow: inset 3px 0 0 var(--farbe-gedaempft); }
progress.fortschritt { width: 4.5rem; height: .45rem; margin-right: .4rem; vertical-align: middle; border: 0; border-radius: 999px;
    background: var(--farbe-linie); accent-color: var(--farbe-primaer); appearance: none; overflow: hidden; }
progress.fortschritt::-webkit-progress-bar { background: var(--farbe-linie); }
progress.fortschritt::-webkit-progress-value { background: var(--farbe-primaer); }
progress.fortschritt::-moz-progress-bar { background: var(--farbe-primaer); }
.themen-wahl { display: flex; flex-wrap: wrap; gap: .4rem; }
.auswahl-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .6rem; border: 1px solid var(--farbe-linie);
    border-radius: 999px; font-size: .9rem; color: var(--farbe-text); cursor: pointer; }
.auswahl-chip:has(input:checked) { border-color: var(--farbe-primaer); background: color-mix(in srgb, var(--farbe-primaer) 8%, white); }
.einstellungen .auswahl-chip input { width: auto; padding: 0; }
.zeitleiste-schritte { display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: .6rem; }
.zeitleiste-schritte .schritt { display: flex; flex-direction: column; gap: .3rem; padding: .5rem .6rem; border: 1px solid var(--farbe-linie);
    border-radius: calc(var(--rundung) / 2); font-size: .88rem; color: var(--farbe-gedaempft); }
.zeitleiste-schritte .schritt.erledigt { border-color: var(--farbe-primaer); color: var(--farbe-primaer); background: color-mix(in srgb, var(--farbe-primaer) 5%, white); }
.archiv-zeile summary { cursor: pointer; color: var(--farbe-gedaempft); }
/* Mehrfachauswahl zum Aufklappen (mehrfachwahl.js) */
.mehrfachwahl { position: relative; }
.mehrfachwahl summary { list-style: none; cursor: pointer; padding: .5rem 2rem .5rem .6rem; border: 1px solid var(--farbe-linie);
    border-radius: calc(var(--rundung) / 2); background: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: relative; }
.mehrfachwahl summary::-webkit-details-marker { display: none; }
.mehrfachwahl summary::after { content: "▾"; position: absolute; right: .7rem; top: 50%; transform: translateY(-50%); color: var(--farbe-gedaempft); }
.mehrfachwahl[open] summary { border-color: var(--farbe-primaer); }
.mehrfachwahl [data-auswahl-text].leer { color: var(--farbe-gedaempft); }
.mehrfachwahl-liste { position: absolute; z-index: 20; left: 0; right: 0; margin-top: .25rem; max-height: 18rem; overflow-y: auto;
    background: #fff; border: 1px solid var(--farbe-linie); border-radius: calc(var(--rundung) / 2); box-shadow: 0 8px 24px rgba(0,0,0,.12); padding: .4rem; }
.mehrfachwahl-liste input[type=search] { margin-bottom: .3rem; }
.mehrfachwahl-eintrag { display: flex; align-items: center; gap: .5rem; padding: .3rem .4rem; border-radius: 4px; cursor: pointer; color: var(--farbe-text); }
.mehrfachwahl-eintrag:hover { background: var(--farbe-grund); }
.mehrfachwahl-eintrag small { margin-left: auto; }
.einstellungen .mehrfachwahl-eintrag input { width: auto; }
.einstellungen .mehrfachwahl-eintrag[hidden] { display: none; }
/* Kennzahl-Kacheln als Links */
a.kachel-link { color: inherit; text-decoration: none; }
a.kachel-link:hover { box-shadow: 0 4px 14px rgba(0,0,0,.08); }
table.liste th.zahl, table.liste td.zahl { text-align: right; width: 5rem; }

/* Notizen und Telefonprotokolle (admin/notizen.html) */
.person-bereich { margin-top: calc(var(--abstand) * 2); }
.schnell-zeile { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin: var(--abstand) 0; }
.schnell-zeile input { padding: .45rem .6rem; border: 1px solid var(--farbe-linie); border-radius: calc(var(--rundung) / 2); font: inherit; }
.schnell-zeile input[name=text] { flex: 1; min-width: 14rem; }
.stern-wahl { display: inline-flex; align-items: center; cursor: pointer; font-size: 1.2rem; color: var(--farbe-linie); }
.stern-wahl input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.stern-wahl:has(input:checked) { color: #d9a400; }
.stern-wahl:has(input:focus-visible) { outline: 2px solid var(--farbe-primaer); border-radius: 4px; }
ul.eintraege { list-style: none; padding: 0; margin: .5rem 0 0; }
ul.eintraege > li { padding: .6rem 0; border-top: 1px solid color-mix(in srgb, var(--farbe-linie) 60%, transparent); }
.eintrag-kopf { display: flex; gap: .6rem; align-items: baseline; font-size: .9rem; }
.eintrag-text { margin: .25rem 0 0; white-space: pre-wrap; }
li.todo .stern, .stern { color: #d9a400; }
.eintrag-bearbeiten summary, .loeschen-rueckfrage summary { cursor: pointer; color: var(--farbe-gedaempft); font-size: .85rem; margin-top: .3rem; }
.eintrag-bearbeiten .formular { margin-top: .5rem; max-width: 40rem; }
.eintrag-bearbeiten textarea, .neu-aufklappen textarea, .eintrag-bearbeiten input, .neu-aufklappen input { padding: .45rem .6rem; border: 1px solid var(--farbe-linie); border-radius: calc(var(--rundung) / 2); font: inherit; }
.neu-aufklappen { margin: var(--abstand) 0; }
.neu-aufklappen > summary { list-style: none; display: inline-block; }
.neu-aufklappen > summary::-webkit-details-marker { display: none; }
.neu-aufklappen .formular { margin-top: .6rem; max-width: 40rem; }
.knopf-gefahr { background: var(--farbe-fehler); }
.knopf-gefahr:hover { background: #fff; color: var(--farbe-fehler); box-shadow: inset 0 0 0 1px var(--farbe-fehler); }
/* Eintraege in Auswahllisten stehen in einer Zeile -- nicht wie Formular-Beschriftungen ueber dem Feld */
.formular label.mehrfachwahl-eintrag, .formular label.auswahl-chip {
    flex-direction: row; align-items: center; text-align: left; gap: .5rem; color: var(--farbe-text);
}
.formular label.mehrfachwahl-eintrag { justify-content: flex-start; }
.formular label.mehrfachwahl-eintrag span { flex: 1; }
.formular label.mehrfachwahl-eintrag small { margin-left: auto; white-space: nowrap; }
.formular label.mehrfachwahl-eintrag input, .formular label.auswahl-chip input { width: auto; margin: 0; flex: none; }
.sprung-links { display: inline-flex; gap: 1rem; margin-left: 1rem; font-size: .9rem; }
.sprung-links a { color: var(--farbe-primaer); }
/* Person (Lead, Referent:in; 29.9.): oben das Formular ueber die ganze Breite, darunter Notizen und
   Telefonprotokolle nebeneinander (quer), auf schmalen Flaechen untereinander */
.person-seite { display: grid; grid-template-columns: minmax(0, 1fr); gap: calc(var(--abstand) * 1.5);
    margin-top: calc(var(--abstand) * 1.25); }
.person-seite .person-bereich { margin-top: 0; min-width: 0; }
.person-seite .person-bereich .abschnitt { margin-top: 0; }
.person-seite .schnell-zeile input[name=text] { min-width: 0; }
.person-seite .formular textarea, .person-seite .formular input { padding: .45rem .6rem; border: 1px solid var(--farbe-linie); border-radius: calc(var(--rundung) / 2); font: inherit; }
/* Abschnitte des Formulars in zwei Spalten; jede Spalte ist ein eigener Container, damit ihr Raster
   (Beschriftung | Feld) sich nach der Spaltenbreite richtet. .ganz-breit geht ueber beide Spalten. */
.formular-spalten { display: grid; grid-template-columns: repeat(auto-fit, minmax(26rem, 1fr)); gap: 0 calc(var(--abstand) * 2); align-items: start; }
.formular-spalten > .spalte { container-type: inline-size; display: flex; flex-direction: column; gap: 1.5rem; min-width: 0; margin-bottom: 1.5rem; }
.formular-spalten > .ganz-breit { grid-column: 1 / -1; }
@media (max-width: 40rem) { .formular-spalten { grid-template-columns: 1fr; } }
/* Personenfelder kompakt (29.9.): auf breiten Formularen drei Paare Beschriftung | Feld je Zeile;
   .feld.doppelt nimmt zwei Paare ein (z. B. IBAN + BIC) */
@container (min-width: 60rem) {
    .einstellungen fieldset.person-felder { grid-template-columns: repeat(3, max-content minmax(0, 1fr)); }
    .einstellungen fieldset.person-felder .feld.doppelt { grid-column: span 3; }
}
/* Kopfleiste der Detailseiten: bleibt beim Scrollen oben, Stand + Sprunglinks links, Speichern rechts */
.liste-kopf.kopf-leiste { position: sticky; top: 0; z-index: 15; margin: 0 0 .2rem; padding: .5rem 0; background: #fff;
    border-bottom: 1px solid var(--farbe-linie); }
.kopf-info { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem 1.1rem; font-size: .9rem; }
.kopf-info a { color: var(--farbe-primaer); text-decoration: none; }
.kopf-info a:hover { text-decoration: underline; }
.kopf-leiste + .formular-spalten > fieldset:first-child { margin-top: .6rem; }
/* IBAN ganz lesbar (bis 34 Zeichen mit Leerzeichen), BIC direkt daneben */
.einstellungen .feld-zeile input.feld-iban { flex: 0 1 25rem; }
/* Umsatzanteil in einer Zeile: Saetze als Chips, daneben der neue */
.anteil-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; }
.anteil-chip { display: inline-flex; align-items: center; gap: .4rem; padding: .25rem .35rem .25rem .7rem; border: 1px solid var(--farbe-linie);
    border-radius: 999px; font-size: .9rem; color: var(--farbe-gedaempft); }
.anteil-chip.aktuell { border-color: var(--farbe-primaer); color: var(--farbe-text); background: color-mix(in srgb, var(--farbe-primaer) 7%, white); }
.anteil-chip strong { color: var(--farbe-text); }
.einstellungen .anteil-weg { display: inline-flex; align-items: center; justify-content: center; width: 1.4rem; height: 1.4rem; padding: 0;
    border-radius: 50%; cursor: pointer; color: var(--farbe-gedaempft); font-size: 1rem; }
.einstellungen .anteil-weg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.einstellungen .anteil-weg:hover, .einstellungen .anteil-weg:has(input:checked) { background: var(--farbe-fehler); color: #fff; }
.anteil-chip:has(.anteil-weg input:checked) { text-decoration: line-through; opacity: .6; }
.anteil-neu { display: inline-flex; align-items: center; gap: .45rem; }
.einstellungen .anteil-neu label { color: var(--farbe-gedaempft); font-size: .92rem; white-space: nowrap; }
.einstellungen .anteil-neu input[name=anteilNeu] { width: 4.5rem; }
.einstellungen .anteil-neu input[type=month] { width: 11rem; }
/* Kurse/Kooperationen der Referent:in und Kataloge: wie die Personen-Spalten, aber ohne dicke Trennlinie */
.person-seite.kurs-block { margin-top: calc(var(--abstand) * 1.25); }
.person-seite.katalog-raster { margin-top: 0; }
.katalog-raster { border-top: 0; margin-top: 0; padding-top: 0; grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr)); }
/* Notizen, Telefonate, Dokumente (29.9.): je Bereich die ganze Breite, Eintraege als Zeilen Datum | Text | Aktion */
/* Ueberschrift wie eine Abschnitts-Legende im Formular: Strich rechts daneben, kein eigener Rahmen (29.9.) */
.person-seite .person-bereich { padding: 0; border: 0; background: none; }
.admin-karte .person-seite .person-bereich > .abschnitt { display: flex; align-items: center; gap: .6rem; margin: 0 0 .4rem; padding: 0; border: 0; font-size: 1rem; font-weight: 600; color: var(--farbe-text); }
.admin-karte .person-seite .person-bereich > .abschnitt::after { content: ""; flex: 1; border-top: 1px solid var(--farbe-linie); }

.person-seite ul.eintraege > li { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr) auto; column-gap: 1rem; align-items: baseline; padding: .45rem 0; }
.person-seite ul.eintraege > li .eintrag-kopf { grid-column: 1; display: flex; gap: .3rem; align-items: baseline; white-space: nowrap; }
.person-seite ul.eintraege > li .eintrag-text { grid-column: 2; margin: 0; white-space: pre-line; }
.person-seite ul.eintraege > li > details { grid-column: 3; font-size: .85rem; }
.person-seite ul.eintraege > li > details[open] { grid-column: 1 / -1; margin-top: .4rem; }
.person-seite ul.eintraege > li.todo .eintrag-text { font-weight: 500; }
@media (max-width: 40rem) {
    .person-seite ul.eintraege > li { grid-template-columns: 1fr auto; }
    .person-seite ul.eintraege > li .eintrag-text { grid-column: 1 / -1; grid-row: 2; }
    .person-seite ul.eintraege > li > details { grid-column: 2; grid-row: 1; }
}
.katalog-zeile { display: flex; align-items: center; gap: .8rem; }
.katalog-zeile .schnell-zeile { flex: 1; margin: 0; }
.katalog-zeile .schnell-zeile input[name=name] { flex: 1; min-width: 0; }
.person-seite .schnell-zeile input[name=notiz] { flex: 1; min-width: 0; padding: .35rem .5rem; border: 1px solid var(--farbe-linie);
    border-radius: calc(var(--rundung) / 2); font: inherit; }
/* Kursformular (29.9.): Kopf links Titel … Tags untereinander, rechts ab „Thema“ die Phasen (Spalte 3 + 4) */
@container (min-width: 46rem) {
    .einstellungen fieldset.kurs-kopf { grid-template-columns: max-content minmax(0, 1fr) max-content minmax(0, 1fr); }
    .kurs-kopf .kk-b1 { grid-area: 1 / 1; }
    .kurs-kopf .kk-titel { grid-area: 1 / 2 / 2 / -1; }
    .kurs-kopf .kk-b2 { grid-area: 2 / 1; } .kurs-kopf .kk-f2 { grid-area: 2 / 2; }
    .kurs-kopf .kk-b3 { grid-area: 3 / 1; } .kurs-kopf .kk-f3 { grid-area: 3 / 2; }
    .kurs-kopf .kk-b4 { grid-area: 4 / 1; } .kurs-kopf .kk-f4 { grid-area: 4 / 2; }
    .kurs-kopf .kk-b5 { grid-area: 5 / 1; } .kurs-kopf .kk-f5 { grid-area: 5 / 2; }
    .kurs-kopf .kk-b6 { grid-area: 6 / 1; } .kurs-kopf .kk-f6 { grid-area: 6 / 2 / 7 / -1; }
    .kurs-kopf .kk-phasen-b { grid-area: 2 / 3; }
    .kurs-kopf .kk-phasen { grid-area: 2 / 4 / 6 / 5; }
}
.kurs-kopf .kk-phasen { flex-direction: column; align-items: flex-start; gap: .35rem; }
.einstellungen .zwei-spalten { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: .6rem 2rem; }
.einstellungen .zwei-spalten label { color: var(--farbe-gedaempft); font-size: .92rem; margin-top: .3rem; }
/* Listen wie eine Tabellenkalkulation (tabelle.js): sortieren, filtern, verschieben, Breite, Spaltenwahl */
.tabelle-leiste { display: flex; justify-content: flex-end; align-items: center; gap: .6rem; margin: .4rem 0; }
.tabelle-leiste-links { margin-right: auto; }
.spalten-wahl { position: relative; }
.spalten-wahl summary { cursor: pointer; list-style: none; padding: .3rem .7rem; border: 1px solid var(--farbe-linie);
    border-radius: 999px; font-size: .85rem; color: var(--farbe-gedaempft); }
.spalten-wahl summary::-webkit-details-marker { display: none; }
.spalten-wahl-liste { position: absolute; right: 0; z-index: 20; display: grid; gap: .25rem; min-width: 14rem; margin-top: .3rem;
    padding: .6rem .8rem; background: #fff; border: 1px solid var(--farbe-linie); border-radius: calc(var(--rundung) / 2);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .08); font-size: .9rem; }
.spalten-wahl-liste label { display: flex; gap: .45rem; align-items: center; white-space: nowrap; cursor: pointer; }
.tabelle-rahmen { overflow-x: auto; }
table.tabelle-aktiv th { position: relative; }
/* ohne Umbruch einzeilig mit „…“; ↵ in der Ueberschrift schaltet den Umbruch je Spalte ein */
table.tabelle-aktiv td, table.tabelle-aktiv tr:first-child th { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 28rem; }
table.tabelle-aktiv td.umbruch, table.tabelle-aktiv th.umbruch { white-space: normal; overflow-wrap: anywhere; max-width: none; }
table.tabelle-fest { table-layout: fixed; }
table.tabelle-fest td, table.tabelle-fest tr:first-child th { max-width: none; }
.umbruch-schalter { margin-left: .3rem; padding: 0 .25rem; border: 1px solid transparent; border-radius: 4px; background: none;
    font: inherit; font-size: .8rem; line-height: 1.2; color: var(--farbe-linie); cursor: pointer; vertical-align: middle; }
.umbruch-schalter:hover { border-color: var(--farbe-linie); color: var(--farbe-gedaempft); }
.umbruch-schalter.an { color: var(--farbe-primaer); border-color: var(--farbe-primaer); }
table.tabelle-aktiv th.sortierbar { cursor: pointer; user-select: none; padding-right: 1.2rem; }
table.tabelle-aktiv th[aria-sort="ascending"]::after { content: " ▲"; font-size: .7em; color: var(--farbe-primaer); }
table.tabelle-aktiv th[aria-sort="descending"]::after { content: " ▼"; font-size: .7em; color: var(--farbe-primaer); }
table.tabelle-aktiv th.ziel { box-shadow: inset 3px 0 0 var(--farbe-primaer); }
table.tabelle-aktiv th.wird-gezogen { opacity: .45; }
table.tabelle-aktiv th .spalten-griff { position: absolute; top: 0; right: 0; width: .5rem; height: 100%; cursor: col-resize; }
table.tabelle-aktiv th .spalten-griff:hover { border-right: 2px solid var(--farbe-primaer); }
table.tabelle-aktiv tr.tabelle-filter th { padding-top: 0; font-weight: normal; }
table.tabelle-aktiv tr.tabelle-filter input { width: 100%; box-sizing: border-box; padding: .2rem .4rem; font: inherit; font-size: .82rem;
    border: 1px solid var(--farbe-linie); border-radius: calc(var(--rundung) / 3); background: #fff; }
/* Uebernehmen / Archivieren nebeneinander in einer Zeile unter dem Formular */
.aktionen-zeile { display: flex; flex-wrap: wrap; gap: .5rem 2rem; align-items: flex-start; margin-top: var(--abstand);
    padding-top: var(--abstand); border-top: 1px solid var(--farbe-linie); }
.aktionen-zeile > .archiv-zeile { margin: 0; padding: 0; border: 0; flex: 1 1 18rem; }

/* ---- Website aus dem Adminboard (T-2.5): Kursliste, Kursseite, Themen, Seiten aus Bausteinen ---- */
.kurskarte-link { color: inherit; text-decoration: none; transition: transform .15s, box-shadow .15s; }
.kurskarte-link:hover { transform: translateY(-2px); box-shadow: var(--schatten-hoch); }
.kurs-bild { position: relative; overflow: hidden; }
.kurs-bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kurs-referent { color: var(--farbe-gedaempft); font-size: .85rem; }
.kurs-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: calc(var(--abstand) * 1.2); margin: var(--abstand) 0; }
.kurs-filter { display: flex; flex-wrap: wrap; gap: .5rem; margin: var(--abstand) 0; }
.kurs-filter input[type=search] { flex: 1 1 18rem; }
.kurs-filter input, .kurs-filter select { padding: .6rem .8rem; border: 1px solid var(--farbe-linie); border-radius: calc(var(--rundung) / 2); font: inherit; }
.phasen-wahl { display: flex; flex-wrap: wrap; gap: .4rem; margin: .5rem 0 var(--abstand); }
.phasen-wahl a { padding: .35rem .85rem; border: 1px solid var(--farbe-linie); border-radius: 999px; color: var(--farbe-text); text-decoration: none; font-size: .9rem; }
.phasen-wahl a.aktiv, .phasen-wahl a:hover { border-color: var(--farbe-primaer); background: color-mix(in srgb, var(--farbe-primaer) 8%, white); color: var(--farbe-primaer); }
.pfad-website { font-size: .88rem; color: var(--farbe-gedaempft); margin-bottom: .5rem; }
.pfad-website a { color: var(--farbe-primaer); text-decoration: none; }
.kurs-kopf { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: calc(var(--abstand) * 2); align-items: start; }
.kurs-bild.gross { aspect-ratio: 16 / 9; border-radius: var(--rundung); box-shadow: var(--schatten); }
.kurs-merkmale { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; color: var(--farbe-gedaempft); }
.kurs-spalten { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: calc(var(--abstand) * 2); margin-top: calc(var(--abstand) * 2); }
.aufzaehlung { white-space: pre-line; line-height: 1.65; }
.themen-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: calc(var(--abstand) * 1.5); }
.themen-gruppe h2 { font-size: 1.15rem; margin-bottom: .3rem; }
.themen-gruppe h2 a { color: var(--farbe-primaer); text-decoration: none; }
.themen-gruppe ul { list-style: none; padding: 0; margin: .5rem 0 0; display: grid; gap: .3rem; }
.paket-block { margin-top: calc(var(--abstand) * 2); }
.seite-bausteine > section, .seite-bausteine > figure { margin: calc(var(--abstand) * 2) 0; }
.block-bild img { width: 100%; border-radius: var(--rundung); }
.block-bild figcaption { color: var(--farbe-gedaempft); font-size: .9rem; margin-top: .4rem; }
.block-aufruf { padding: calc(var(--abstand) * 2); border-radius: var(--rundung); background: color-mix(in srgb, var(--farbe-primaer) 7%, white); text-align: center; }
.stimmen-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: var(--abstand); }
.stimme { margin: 0; padding: var(--abstand); border: 1px solid var(--farbe-linie); border-radius: var(--rundung); background: #fff; }
.stimme blockquote { margin: 0 0 .6rem; font-style: italic; }
@media (max-width: 800px) { .kurs-kopf { grid-template-columns: 1fr; } }

/* Adminboard: Bausteine einer Seite, Testimonials */
.baustein { margin: .8rem 0; padding: .7rem 1rem; border: 1px solid var(--farbe-linie); border-radius: calc(var(--rundung) / 2); background: #fff; }
.baustein.ausgeblendet { opacity: .65; }
.baustein-kopf { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.baustein-aktionen { display: flex; align-items: center; gap: .3rem; font-size: .85rem; }
.baustein-felder { margin-top: .5rem; }
.baustein-felder input, .baustein-felder textarea, .baustein-felder select { padding: .45rem .6rem; border: 1px solid var(--farbe-linie);
    border-radius: calc(var(--rundung) / 2); font: inherit; width: 100%; box-sizing: border-box; }
.baustein-zeile { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .6rem 1rem; }
.baustein-neu { margin-top: 1rem; }
.einstellungen input.farbwahl { width: 3.2rem; height: 2.2rem; padding: .15rem; }
.eintraege-einfach { padding-left: 1.2rem; display: grid; gap: .3rem; }

/* aufklappbarer Abschnitt im Formular (z. B. Firmensitz), Ueberschrift wie eine Legende mit Strich rechts */
.einstellungen details.abschnitt-klapp { margin-top: calc(var(--abstand) * 1.25); }
.einstellungen details.abschnitt-klapp > summary { display: flex; align-items: center; gap: .5rem; cursor: pointer; list-style: none;
    font-weight: 600; color: var(--farbe-text); }
.einstellungen details.abschnitt-klapp > summary::-webkit-details-marker { display: none; }
.einstellungen details.abschnitt-klapp > summary::before { content: "▸"; color: var(--farbe-gedaempft); transition: transform .15s; }
.einstellungen details.abschnitt-klapp[open] > summary::before { transform: rotate(90deg); }
.einstellungen details.abschnitt-klapp > summary::after { content: ""; flex: 1; border-top: 1px solid var(--farbe-linie); }
.einstellungen details.abschnitt-klapp > fieldset { margin-top: .4rem; padding-top: .4rem; border-top: 0; }
.einstellungen input[readonly], .einstellungen select:disabled { background: var(--farbe-grund); color: var(--farbe-gedaempft); }

/* Ueber uns und Seite der Referent:in (29.9.) */
.referenten-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: var(--abstand); margin-top: var(--abstand); }
.referent-karte { display: flex; gap: 1rem; align-items: flex-start; padding: var(--abstand); border: 1px solid var(--farbe-linie);
    border-radius: var(--rundung); background: var(--farbe-flaeche); box-shadow: var(--schatten); }
.referent-karte h2 { margin: 0 0 .2rem; font-size: 1.1rem; }
.referent-karte h2 a { color: var(--farbe-primaer); text-decoration: none; }
.referent-karte p { margin: .2rem 0; font-size: .92rem; }
.referent-kuerzel { display: grid; place-items: center; flex: none; width: 3rem; height: 3rem; border-radius: 50%; font-weight: 700;
    font-size: 1.2rem; color: var(--farbe-primaer); background: color-mix(in srgb, var(--farbe-primaer) 10%, white); }
.referent-kuerzel.gross { width: 5rem; height: 5rem; font-size: 2rem; }
.referent-kopf { display: flex; gap: 1.5rem; align-items: center; margin-bottom: var(--abstand); }

/* ---- Shop (Stufe 4, E-55): Warenkorb, Kasse, Kaufen auf der Kursseite, Konto ---- */
.betrag, table.liste th.betrag, table.liste td.betrag { text-align: right; white-space: nowrap; }
.summen-tabelle { margin: .8rem 0 0 auto; border-collapse: collapse; min-width: 18rem; }
.summen-tabelle td { padding: .25rem .6rem; }
.summen-tabelle tr.gesamt td { font-weight: 700; font-size: 1.1rem; border-top: 1px solid var(--farbe-text); }
.shop-weiter { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: .6rem; margin-top: calc(var(--abstand) * 1.5); }
.kaufen-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin: var(--abstand) 0; }
.kaufen-zeile .preis { display: flex; flex-direction: column; }
.kaufen-zeile .preis strong { font-size: 1.6rem; }
.kasse-formular section { margin-top: calc(var(--abstand) * 1.5); }
.kasse-felder { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: .6rem 1rem; }
.kasse-felder input, .kasse-formular table input { width: 100%; box-sizing: border-box; padding: .5rem .6rem;
    border: 1px solid var(--farbe-linie); border-radius: calc(var(--rundung) / 2); font: inherit; }
.kasse-bestaetigung label.auswahl { margin: .5rem 0; }
.mein-kurs.abgelaufen { opacity: .6; }
.betrag-zeile { text-align: right; font-weight: 600; }
/* Favoriten (E-56) */
.favorit-form { margin: .4rem 0 0; }
.favorit-knopf.gemerkt { color: #c2185b; border-color: #c2185b; }
.favorit-karte { display: flex; flex-direction: column; gap: .3rem; }
.favorit-karte form { align-self: flex-end; }
/* Aktionen (E-57) */
.aktion-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: var(--abstand); margin: var(--abstand) 0 calc(var(--abstand) * 2); }
.aktion-karte { display: flex; flex-direction: column; gap: .4rem; padding: var(--abstand); border: 1px solid var(--farbe-linie);
    border-radius: var(--rundung); background: var(--farbe-flaeche); box-shadow: var(--schatten); }
.aktion-karte h3 { margin: 0; font-size: 1.3rem; }
.aktion-rabatt { margin: 0; color: var(--farbe-kaufen); font-weight: 700; font-size: 1.2rem; }
.aktion-karte small { display: block; }
.feld-kurz { width: 7rem; }

/* Kursvideo im Bunny-Player (E-58): 16:9, volle Breite; im Adminboard kleiner */
.video-rahmen { position: relative; width: 100%; aspect-ratio: 16 / 9; margin: 1rem 0; background: #000; border-radius: 8px; overflow: hidden; }
.video-rahmen iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-rahmen.video-klein { max-width: 640px; }
.video-rahmen.referent-video { max-width: 760px; margin: 0 0 2rem; }
.video-upload progress { width: 16rem; }

/* Kundenportal (E-59): Kacheln, Weiterlernen, Fortschritt */
.konto-kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--abstand); margin: calc(var(--abstand) * 1.5) 0; }
.konto-kachel { display: flex; flex-direction: column; gap: .2rem; padding: var(--abstand); border-radius: var(--rundung); background: var(--farbe-flaeche);
    border: 1px solid var(--farbe-linie); box-shadow: var(--schatten); color: var(--farbe-text); text-decoration: none; }
.konto-kachel strong { font-size: 1.9rem; color: var(--farbe-primaer); line-height: 1.1; }
.konto-kachel span { color: var(--farbe-gedaempft); font-size: .9rem; }
.konto-kachel.warnung strong { color: var(--farbe-hinweis); }
.weiterlernen { display: flex; align-items: center; gap: calc(var(--abstand) * 1.5); padding: var(--abstand) calc(var(--abstand) * 1.5);
    border-radius: var(--rundung); background: color-mix(in srgb, var(--farbe-primaer) 8%, var(--farbe-flaeche)); margin-bottom: calc(var(--abstand) * 1.5); }
.weiterlernen > div { flex: 1; display: flex; flex-direction: column; gap: .3rem; }
.weiterlernen progress, .mein-kurs progress, .lern-stand progress { width: 100%; max-width: 22rem; height: .55rem; accent-color: var(--farbe-kaufen); }
.lern-stand { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.2rem; margin: 0 0 var(--abstand); }
@media (max-width: 800px) { .konto-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); } .weiterlernen { flex-wrap: wrap; } }

/* Passwort-Checkliste (passwortpruefung.js): offen grau mit Kreis, erfuellt gruen mit Haken */
.pw-liste { list-style: none; margin: -.2rem 0 .4rem; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .2rem 1rem; font-size: .88rem; color: var(--farbe-gedaempft); }
.pw-liste li::before { content: "○"; display: inline-block; width: 1.3em; font-weight: 700; }
.pw-liste li.erfuellt { color: var(--farbe-kaufen); }
.pw-liste li.erfuellt::before { content: "✓"; }
@media (max-width: 600px) { .pw-liste { grid-template-columns: 1fr; } }

/* Aktionsseite lebendiger (29.9.): Farbkopf mit Sprunglinks, Blockkarten mit Band „Beliebt“, Preis je Kurs gross,
   Gutscheine wie Geschenkkarten, 10 + 1 als Stempelkarte */
.aktionen-kopf { background: linear-gradient(120deg, var(--farbe-primaer), color-mix(in srgb, var(--farbe-verlauf-von) 70%, var(--farbe-primaer)) 55%, color-mix(in srgb, var(--farbe-verlauf-bis) 60%, var(--farbe-primaer)));
    color: var(--auf-primaer); padding: calc(var(--abstand) * 3) 0 calc(var(--abstand) * 2.4); margin-bottom: calc(var(--abstand) * 1.5); }
.aktionen-kopf h1 { color: var(--auf-primaer); margin: .3rem 0 .6rem; font-size: clamp(2rem, 4vw, 2.8rem); }
.aktionen-kopf p { max-width: 42rem; font-size: 1.1rem; opacity: .95; }
.aktionen-kopf .start-etikett { color: var(--auf-primaer); opacity: .85; }
.aktionen-sprung { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.2rem; }
.aktionen-sprung a { color: var(--auf-primaer); text-decoration: none; font-weight: 600; padding: .45rem 1rem; border-radius: 999px;
    background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .35); }
.aktionen-sprung a:hover { background: rgba(255, 255, 255, .28); }
.aktionen-abschnitt { padding: calc(var(--abstand) * 1.2) 0; }
.block-karte { position: relative; overflow: hidden; border-top: 4px solid var(--farbe-primaer); transition: transform .2s, box-shadow .2s; }
.block-karte:hover { transform: translateY(-4px); box-shadow: var(--schatten-hoch); }
.block-karte.beliebt { border-top-color: var(--farbe-kaufen); box-shadow: var(--schatten-hoch); }
.aktion-band { position: absolute; top: .9rem; right: -2.2rem; transform: rotate(35deg); background: var(--farbe-kaufen); color: #fff;
    font-size: .75rem; font-weight: 700; padding: .2rem 2.6rem; letter-spacing: .04em; }
.aktion-je-kurs { margin: .4rem 0 0; display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.aktion-je-kurs strong { font-size: 1.45rem; color: var(--farbe-primaer); }
.aktion-summe { margin: 0; font-weight: 600; }
.aktion-summe small { display: inline; margin-left: .3rem; font-weight: 400; }
.aktion-sparen { margin: .2rem 0 .6rem; align-self: flex-start; background: color-mix(in srgb, var(--farbe-kaufen) 14%, transparent);
    color: color-mix(in srgb, var(--farbe-kaufen) 80%, #000); font-weight: 700; font-size: .9rem; padding: .2rem .6rem; border-radius: 999px; }
.gutschein-karte { position: relative; display: flex; flex-direction: column; gap: .6rem; padding: calc(var(--abstand) * 1.2); min-height: 10rem;
    border-radius: calc(var(--rundung) * 1.2); color: #fff; box-shadow: var(--schatten); overflow: hidden; transition: transform .2s; }
.gutschein-karte:hover { transform: translateY(-4px) rotate(-.6deg); }
.gutschein-karte::after { content: ""; position: absolute; right: -2.5rem; top: -2.5rem; width: 7rem; height: 7rem; border-radius: 50%; background: rgba(255, 255, 255, .15); }
.gutschein-karte.ton-1 { background: linear-gradient(135deg, var(--farbe-primaer), #0a7d8f); }
.gutschein-karte.ton-2 { background: linear-gradient(135deg, var(--farbe-verlauf-von), #6a8bff); }
.gutschein-karte.ton-3 { background: linear-gradient(135deg, #1f9d6b, var(--farbe-kaufen)); }
.gutschein-karte.ton-4 { background: linear-gradient(135deg, #b8860b, #e0a82e); }
.gutschein-marke { font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; opacity: .9; }
.gutschein-wert { font-size: 2.4rem; line-height: 1; }
.knopf-hell { background: #fff; color: var(--farbe-primaer); margin-top: auto; align-self: flex-start; }
.knopf-hell:hover { background: rgba(255, 255, 255, .88); color: var(--farbe-primaer); }
.zehn-plus-eins { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: calc(var(--abstand) * 2); align-items: center;
    background: color-mix(in srgb, var(--farbe-primaer) 7%, var(--farbe-flaeche)); border-radius: calc(var(--rundung) * 1.3);
    padding: calc(var(--abstand) * 1.6); margin: var(--abstand) 0 calc(var(--abstand) * 2); }
.stempelkarte { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 2.6rem); gap: .5rem; }
.stempelkarte li { width: 2.6rem; height: 2.6rem; border-radius: 50%; display: grid; place-items: center; font-weight: 700;
    border: 2px dashed color-mix(in srgb, var(--farbe-primaer) 45%, transparent); color: var(--farbe-primaer); background: var(--farbe-flaeche); }
.stempelkarte li.voll { background: var(--farbe-primaer); color: #fff; border-style: solid; }
.stempelkarte li.geschenk { border: 2px solid var(--farbe-kaufen); background: color-mix(in srgb, var(--farbe-kaufen) 14%, #fff); font-size: 1.2rem; }
@media (max-width: 800px) { .zehn-plus-eins { grid-template-columns: 1fr; } }

/* Fusszeile: Themen in zwei Spalten (29.9.) */
.fuss-zweispaltig { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .35rem 1.2rem; }

/* Bestellabschluss (29.9.): Karte mit gezeichnetem Haken, etwas Konfetti, Zusammenfassung, naechste Schritte */
.fertig-seite { display: flex; justify-content: center; }
.fertig-karte { position: relative; overflow: hidden; width: 100%; max-width: 46rem; text-align: center; margin: calc(var(--abstand) * 2) auto;
    padding: calc(var(--abstand) * 2.4) calc(var(--abstand) * 2); border-radius: calc(var(--rundung) * 1.5); background: var(--farbe-flaeche);
    box-shadow: var(--schatten-hoch); }
.fertig-karte.erfolg { border-top: 6px solid var(--farbe-kaufen); }
.fertig-karte .seite-einleitung { margin-left: auto; margin-right: auto; }
.fertig-haken { width: 5rem; height: 5rem; display: block; margin: 0 auto 1rem; }
.fertig-haken circle { fill: color-mix(in srgb, var(--farbe-kaufen) 14%, #fff); stroke: var(--farbe-kaufen); stroke-width: 3;
    stroke-dasharray: 151; stroke-dashoffset: 151; animation: fertig-strich .6s ease-out forwards; }
.fertig-haken path { fill: none; stroke: var(--farbe-kaufen); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round;
    stroke-dasharray: 40; stroke-dashoffset: 40; animation: fertig-strich .4s .55s ease-out forwards; }
@keyframes fertig-strich { to { stroke-dashoffset: 0; } }
.fertig-konfetti i { position: absolute; top: -1rem; width: .55rem; height: .9rem; border-radius: 2px; opacity: 0; animation: fertig-fallen 2.4s ease-in forwards; }
.fertig-konfetti i:nth-child(odd) { background: var(--farbe-verlauf-von); }
.fertig-konfetti i:nth-child(even) { background: var(--farbe-kaufen); }
.fertig-konfetti i:nth-child(3n) { background: #e0a82e; }
.fertig-konfetti i:nth-child(1) { left: 8%; animation-delay: .1s; } .fertig-konfetti i:nth-child(2) { left: 20%; animation-delay: .4s; }
.fertig-konfetti i:nth-child(3) { left: 33%; animation-delay: .2s; } .fertig-konfetti i:nth-child(4) { left: 47%; animation-delay: .6s; }
.fertig-konfetti i:nth-child(5) { left: 60%; animation-delay: .3s; } .fertig-konfetti i:nth-child(6) { left: 72%; animation-delay: .5s; }
.fertig-konfetti i:nth-child(7) { left: 85%; animation-delay: .15s; } .fertig-konfetti i:nth-child(8) { left: 94%; animation-delay: .45s; }
@keyframes fertig-fallen { 0% { opacity: 1; transform: translateY(0) rotate(0); } 100% { opacity: 0; transform: translateY(22rem) rotate(540deg); } }
.fertig-positionen { width: 100%; max-width: 32rem; margin: calc(var(--abstand) * 1.5) auto; border-collapse: collapse; text-align: left; }
.fertig-positionen td { padding: .45rem .2rem; border-bottom: 1px solid var(--farbe-linie); }
.fertig-positionen tr.gesamt td { font-weight: 700; border-bottom: none; border-top: 2px solid var(--farbe-text); }
.fertig-positionen small { font-weight: 400; color: var(--farbe-gedaempft); }
.fertig-schritte { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--abstand); margin-top: calc(var(--abstand) * 1.5); }
.fertig-schritt { display: flex; flex-direction: column; gap: .2rem; padding: var(--abstand); border-radius: var(--rundung); text-decoration: none;
    color: var(--farbe-text); background: color-mix(in srgb, var(--farbe-primaer) 6%, var(--farbe-flaeche)); transition: transform .2s; }
.fertig-schritt:hover { transform: translateY(-3px); }
.fertig-schritt span { font-size: 1.5rem; color: var(--farbe-primaer); }
.fertig-schritt small { color: var(--farbe-gedaempft); }
.fertig-warten { width: 3rem; height: 3rem; margin: 0 auto 1rem; border-radius: 50%; border: 4px solid var(--farbe-linie); border-top-color: var(--farbe-primaer); animation: fertig-drehen 1s linear infinite; }
@keyframes fertig-drehen { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .fertig-konfetti { display: none; } .fertig-haken circle, .fertig-haken path { animation: none; stroke-dashoffset: 0; } }
@media (max-width: 700px) { .fertig-schritte { grid-template-columns: 1fr; } }

/* Zustellung der Belehrung (E-61) */
.zustell-stand { display: inline-flex; align-items: center; gap: .7rem; padding: .8rem 1.3rem; border-radius: 999px; margin: 1rem 0 1.4rem;
    background: color-mix(in srgb, var(--farbe-primaer) 8%, var(--farbe-flaeche)); }
.zustell-symbol { width: 1.4rem; height: 1.4rem; border-radius: 50%; border: 3px solid var(--farbe-linie); border-top-color: var(--farbe-primaer);
    animation: fertig-drehen 1s linear infinite; }
.zustell-stand.ok { background: color-mix(in srgb, var(--farbe-kaufen) 14%, var(--farbe-flaeche)); }
.zustell-stand.ok .zustell-symbol { animation: none; border-color: var(--farbe-kaufen); background: var(--farbe-kaufen); }
.zustell-stand.fehler { background: color-mix(in srgb, var(--farbe-fehler) 12%, var(--farbe-flaeche)); }
.zustell-stand.fehler .zustell-symbol { animation: none; border-color: var(--farbe-fehler); }
.kasse-auswahl { display: flex; flex-direction: column; gap: .3rem; margin-top: .6rem; }
.kasse-auswahl select { max-width: 100%; }

/* Kundenkonto mit Reitern und Gamification (E-61) */
.kopf-konto { margin-right: .4rem; }
.konto-kopf { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.konto-kopf h1 { margin: 0; }
.konto-kopf p { margin: .2rem 0 0; }
.avatar { position: relative; flex-shrink: 0; width: 3.4rem; height: 3.4rem; border-radius: 50%; display: grid; place-items: center;
    font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--farbe-primaer), var(--farbe-verlauf-von)); overflow: hidden; }
.avatar::after { content: ""; position: absolute; inset: 0; background: var(--bild) center / cover no-repeat; }
.avatar-gross { width: 5.5rem; height: 5.5rem; font-size: 1.6rem; }
.profil-bild-zeile { display: flex; gap: 1rem; align-items: flex-start; margin-bottom: 1rem; }
.profil-bild-zeile form { margin-bottom: .4rem; }
.konto-reiter { display: flex; flex-wrap: wrap; gap: .3rem; border-bottom: 2px solid var(--farbe-linie); margin: 0 0 calc(var(--abstand) * 1.5); }
.konto-reiter a { padding: .65rem 1.1rem; text-decoration: none; color: var(--farbe-gedaempft); font-weight: 600; border-radius: var(--rundung) var(--rundung) 0 0;
    margin-bottom: -2px; border-bottom: 3px solid transparent; }
.konto-reiter a:hover { color: var(--farbe-primaer); background: color-mix(in srgb, var(--farbe-primaer) 6%, transparent); }
.konto-reiter a.aktiv { color: var(--farbe-primaer); border-bottom-color: var(--farbe-primaer); }
.dash-oben { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--abstand); margin-bottom: calc(var(--abstand) * 1.5); align-items: stretch; }
.dash-kacheln { margin: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dash-karte { background: var(--farbe-flaeche); border: 1px solid var(--farbe-linie); border-radius: calc(var(--rundung) * 1.2); padding: calc(var(--abstand) * 1.2);
    box-shadow: var(--schatten); margin-bottom: var(--abstand); }
.dash-karte h2 { margin-top: 0; font-size: 1.15rem; }
.dash-ring { display: flex; align-items: center; gap: 1rem; margin: 0; }
.ring { width: 7.5rem; height: 7.5rem; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 12; }
.ring-grund { stroke: color-mix(in srgb, var(--farbe-primaer) 12%, transparent); }
.ring-wert { stroke: var(--farbe-kaufen); stroke-linecap: round; stroke-dasharray: 326.7; stroke-dashoffset: calc(326.7 - 326.7 * var(--wert) / 100);
    transition: stroke-dashoffset 1.2s ease-out; }
.ring-text { display: flex; flex-direction: column; max-width: 9rem; }
.ring-text strong { font-size: 2rem; color: var(--farbe-primaer); }
.ring-text span { color: var(--farbe-gedaempft); font-size: .9rem; }
.dash-level { margin: 0; display: flex; flex-direction: column; gap: .5rem; justify-content: center;
    background: linear-gradient(135deg, color-mix(in srgb, var(--farbe-verlauf-von) 10%, var(--farbe-flaeche)), color-mix(in srgb, var(--farbe-verlauf-bis) 18%, var(--farbe-flaeche))); }
.level-name { font-size: 1.5rem; color: var(--farbe-primaer); }
.balken { height: .7rem; border-radius: 999px; background: color-mix(in srgb, var(--farbe-primaer) 12%, transparent); overflow: hidden; }
.balken span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--farbe-verlauf-von), var(--farbe-kaufen));
    animation: balken-fuellen 1s ease-out; }
.balken.fertig span { background: var(--farbe-kaufen); }
.balken.gutschein span { background: linear-gradient(90deg, #b8860b, #e0a82e); }
@keyframes balken-fuellen { from { width: 0 !important; } }
.dash-zwei { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--abstand); }
.dash-balken { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .8rem; }
.dash-balken li { display: grid; grid-template-columns: minmax(0, 1fr) 3rem; gap: .2rem .6rem; align-items: center; }
.dash-balken li a { grid-column: 1 / -1; text-decoration: none; font-weight: 600; color: var(--farbe-text); }
.dash-balken small { text-align: right; color: var(--farbe-gedaempft); }
.abzeichen { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; }
.abzeichen li { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .2rem; padding: .6rem .3rem; border-radius: var(--rundung);
    background: color-mix(in srgb, var(--farbe-text) 4%, transparent); filter: grayscale(1); opacity: .5; }
.abzeichen li.erreicht { filter: none; opacity: 1; background: var(--farbe-flaeche);
    box-shadow: inset 0 0 0 1px var(--farbe-linie), var(--schatten); }
.abzeichen-symbol { font-size: 1.6rem; }
.abzeichen strong { font-size: .85rem; }
.abzeichen small { font-size: .72rem; color: var(--farbe-gedaempft); line-height: 1.25; }
.dash-boni { display: flex; flex-direction: column; gap: 1rem; }
.bonus { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: .3rem 1rem; align-items: center; }
.bonus > small, .bonus > .balken + small { grid-column: 2; }
.bonus-mitmachen { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.stempelkarte.klein { grid-template-columns: repeat(11, 1.9rem); gap: .3rem; }
.stempelkarte.klein li { width: 1.9rem; height: 1.9rem; font-size: .8rem; }
.ruecktritt-karte { margin-top: calc(var(--abstand) * 1.5); }
@media (max-width: 900px) {
    .dash-oben, .dash-zwei { grid-template-columns: 1fr; }
    .abzeichen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bonus { grid-template-columns: 1fr; } .bonus > small, .bonus > .balken + small { grid-column: 1; }
    .stempelkarte.klein { grid-template-columns: repeat(6, 1.9rem); }
}
@media (prefers-reduced-motion: reduce) { .balken span, .ring-wert { animation: none; transition: none; } }

/* Untertitel & Kapitel im Adminboard (E-62) */
.video-texte { margin: 1rem 0; padding: 1rem; border: 1px dashed var(--farbe-linie); border-radius: var(--rundung); }
.video-texte h3 { margin-top: 0; }
.video-texte-formular textarea { width: 100%; font-family: ui-monospace, Consolas, monospace; font-size: .85rem; }

/* ==========================================================================================================
   DETAIL-VORLAGE (Inhaberin 30.9.: „Referent-Details ist das Vorbild fuer alle Detail-Ansichten“)
   Aufbau jeder Detailseite (admin/referent.html, konto/profil.html, admin/idee.html …):
   1. .liste-kopf.kopf-leiste  – bleibt beim Scrollen oben; links .kopf-info mit Stand (.ampel-*) und
      Sprunglinks (#abschnitt), rechts ggf. der Knopf „Speichern“
   2. .formular.einstellungen  – je Abschnitt ein <fieldset> mit <legend> (Strich-Ueberschrift, kein Rahmen);
      Raster Beschriftung | .feld, normal zwei Paare je Zeile; .person-felder (drei Paare) nur bei vielen kurzen Feldern
      wie der Referent-Stammdaten; .feld.breit = Rest der Zeile, .ganz = volle Breite, .feld.wert = nur Anzeige,
      .aktionen = Knopfzeile rechtsbuendig unter dem Abschnitt (nicht zusammenquetschen, Inhaberin 30.9.)
   3. mehrere Abschnitte nebeneinander: .formular-spalten (> .spalte bzw. .ganz-breit)
   4. Listen darunter (Notizen, Verlauf …) mit <h2 class="abschnitt"> und table.liste
   Zusammengehoeriges knapp halten: Knoepfe klein (.knopf-klein), Aktionen in einer .knopf-zeile.
   ========================================================================================================== */
main.profil > .detail { background: var(--farbe-flaeche); border: 1px solid var(--farbe-linie); border-radius: var(--rundung);
    padding: 0 calc(var(--abstand) * 2) calc(var(--abstand) * 2); }
.detail > .einstellungen { margin: 0; }
.detail .kopf-leiste + form fieldset, .detail .kopf-leiste ~ .meldung + form fieldset { margin-top: .6rem; }
.knopf-zeile-eng { flex-direction: row !important; flex-wrap: wrap; gap: .5rem; margin-top: 0; }
/* kleine Formulare in einer Zeile (Entfernen, Loeschen): Felder nebeneinander, Knopf am Ende */
.formular-zeile { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .6rem 1rem; }
.formular-zeile label { display: flex; flex-direction: column; gap: .25rem; color: var(--farbe-gedaempft); font-size: .92rem; }
.formular-zeile label.auswahl { flex-direction: row; align-items: center; color: var(--farbe-text); }
/* Profilbild kompakt: kleiner Kreis, daneben „Bild ändern …“ und „entfernen“ */
.profilbild-feld { flex-direction: row !important; align-items: center; gap: .7rem !important; }

.profilbild-feld label.knopf { cursor: pointer; }

/* Profilbild bearbeiten (bildzuschnitt.js, aus Content.Fuenta): Pop-up mit runder Maske */
.zuschnitt-dialog { border: 0; border-radius: var(--rundung); padding: calc(var(--abstand) * 1.5); max-width: 44rem; width: calc(100% - 2rem);
    box-shadow: 0 20px 50px rgba(15, 23, 42, .3); }
.zuschnitt-dialog::backdrop { background: rgba(15, 23, 42, .5); }
.zuschnitt-dialog h2 { margin: 0 0 .2rem; font-size: 1.15rem; }
.zs-hinweis { margin: 0 0 .8rem; font-size: .8rem; color: var(--farbe-gedaempft); }
.zs-raster { display: grid; grid-template-columns: auto 1fr; gap: 1.2rem; }
@media (max-width: 36rem) { .zs-raster { grid-template-columns: 1fr; } }
.zuschnitt-flaeche { width: 280px; max-width: 100%; border-radius: 8px; overflow: hidden; background: #f1f3f6; outline-offset: 3px; }
.zuschnitt-flaeche canvas { display: block; width: 100%; height: auto; cursor: grab; touch-action: none; }
.zuschnitt-flaeche canvas:active { cursor: grabbing; }
.zs-regler { display: flex; flex-direction: column; gap: .45rem; }
.zs-zeile { display: flex; align-items: center; gap: .5rem; font-size: .8rem; color: var(--farbe-text); margin: 0; padding: 0; border: 0; }
.zs-zeile > span:first-child { width: 5.5rem; flex-shrink: 0; }
.zs-zeile input[type=range] { flex: 1; min-width: 0; }
.zs-zeile select { font: inherit; padding: .2rem .4rem; border: 1px solid var(--farbe-linie); border-radius: 4px; }
.zs-wert { width: 3rem; flex-shrink: 0; text-align: right; font-variant-numeric: tabular-nums; color: var(--farbe-gedaempft); }
.zs-knopf { padding: .15rem .55rem; border: 1px solid var(--farbe-linie); border-radius: 4px; background: #fff; cursor: pointer; font: inherit; }
.zs-leise { background: none; border: 0; padding: 0; color: var(--farbe-primaer); cursor: pointer; font: inherit; font-size: .8rem; text-align: left; }
.zs-fuss { display: flex; justify-content: flex-end; gap: .5rem; margin-top: 1rem; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Kursmedien (T-3.3, E-65): Vorschau/Titelbild nebeneinander, Unterlagen-Liste, Sammel-Upload */
.medien-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 1rem 2rem; margin-bottom: 1rem; }
.medien-raster h3 { margin-top: .5rem; }
.titelbild-vorschau { display: block; max-width: 100%; max-height: 10rem; border-radius: 6px; border: 1px solid var(--farbe-linie); margin-bottom: .5rem; }
.unterlagen-liste { list-style: none; padding: 0; margin: 0; display: grid; gap: .4rem; }
.unterlagen-liste li { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .8rem; }
.kurs-vorschau { align-self: start; }
.schritte { margin: 0 0 1rem; padding-left: 1.2rem; display: grid; gap: .35rem; font-size: .92rem; }
.sammel-gruppen { display: grid; gap: .8rem; margin: 1rem 0; }
.sammel-gruppe { margin: 0; padding: .6rem 0 0; border: 0; border-top: 1px solid var(--farbe-linie); }
.sammel-gruppe legend { padding-right: .5rem; }
.sammel-kurs { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin: .3rem 0; }
.sammel-kurs select { min-width: min(100%, 28rem); padding: .35rem .5rem; border: 1px solid var(--farbe-linie); border-radius: 4px; font: inherit; }
table.sammel-dateien td { padding: .2rem .6rem; font-size: .88rem; }
table.sammel-dateien select { font: inherit; font-size: .85rem; padding: .1rem .3rem; border: 1px solid var(--farbe-linie); border-radius: 4px; }
.sammel-protokoll { font-size: .85rem; max-height: 22rem; overflow-y: auto; padding-left: 1.4rem; margin: .5rem 0 0; }
.protokoll-ok { color: var(--farbe-text); }
.protokoll-fehler { color: var(--farbe-fehler); font-weight: 600; }

/* Aktionszeile in Detail-Formularen (30.9.): ueber die ganze Breite, Hinweis und Knoepfe rechtsbuendig */
.einstellungen .aktionen { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: .5rem 1rem; }
.einstellungen .aktionen .feld-hinweis { margin: 0; }
.profilbild-feld .avatar { width: 3rem; height: 3rem; font-size: 1rem; }
/* Sammel-Upload: Arten als schmale Haekchen-Spalten (30.9.) */
table.sammel-dateien th.art-spalte, table.sammel-dateien td.art-spalte { width: 2.8rem; padding: .2rem .1rem; text-align: center; }
table.sammel-dateien th.art-spalte { font-size: .72rem; font-weight: 600; cursor: help; }
table.sammel-dateien td.art-spalte input { margin: 0; cursor: pointer; }
table.sammel-dateien td:first-child { word-break: break-word; }
/* Referentenportal -> Vorlagen (E-66): Kacheln mit Titelbild */
.vorlagen-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 1rem; margin-top: 1rem; }
.vorlage-kachel { display: flex; flex-direction: column; gap: .5rem; padding: .6rem; border: 1px solid var(--farbe-linie); border-radius: var(--rundung);
    background: var(--farbe-flaeche); color: var(--farbe-text); text-decoration: none; }
.vorlage-kachel:hover { border-color: var(--farbe-primaer); }
.vorlage-bild { aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden; background: var(--farbe-grund); }
.vorlage-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Kursseite neu (30.9.): Merken rechts oben, Vorschau mit Play-Knopf, Inhalt + „Auf einen Blick“ */
.kurs-kopf-zeile { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.kurs-kopf-zeile .favorit-form { margin: 0; }
.kurs-kopf h1 { margin-top: .4rem; }
.kurs-mit { font-weight: 600; color: var(--farbe-text); }
.kaufen-karte { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem 1.5rem; margin-top: 1.2rem;
    padding: 1rem 1.2rem; border: 1px solid var(--farbe-linie); border-radius: var(--rundung); background: var(--farbe-flaeche); box-shadow: var(--schatten); }
.kaufen-karte .preis { display: flex; flex-direction: column; }
.kaufen-karte .preis strong { font-size: 1.7rem; line-height: 1.1; color: var(--farbe-text); }
.vorschau-poster { display: block; width: 100%; padding: 0; border: 0; cursor: pointer; font: inherit; color: #fff; }
.vorschau-poster::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(15, 23, 42, .55), rgba(15, 23, 42, .05) 55%); }
.vorschau-play { position: absolute; z-index: 1; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; place-items: center;
    width: 4.5rem; height: 4.5rem; border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--farbe-primaer); font-size: 1.6rem;
    padding-left: .3rem; box-shadow: 0 6px 20px rgba(0, 0, 0, .25); transition: transform .15s; }
.vorschau-poster:hover .vorschau-play, .vorschau-poster:focus-visible .vorschau-play { transform: translate(-50%, -50%) scale(1.08); }
.vorschau-etikett { position: absolute; z-index: 1; left: 1rem; bottom: .8rem; font-weight: 600; text-shadow: 0 1px 3px rgba(0, 0, 0, .5); }
.kurs-vorschau { border-radius: var(--rundung); overflow: hidden; box-shadow: var(--schatten); }
.kurs-inhalt-raster { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: calc(var(--abstand) * 2.5); margin-top: calc(var(--abstand) * 2.5); align-items: start; }
@media (max-width: 900px) { .kurs-inhalt-raster { grid-template-columns: 1fr; } }
.kurs-block + .kurs-block { margin-top: calc(var(--abstand) * 2); }
.kurs-block h2, .kurs-blick h2 { font-size: 1.3rem; margin: 0 0 .8rem; }
.haken-liste { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: .6rem 1.5rem; }
.haken-liste li { position: relative; padding: .7rem .9rem .7rem 2.6rem; border-radius: 8px; background: color-mix(in srgb, var(--farbe-primaer) 6%, white); line-height: 1.45; }
.haken-liste li::before { content: "✓"; position: absolute; left: .9rem; top: .7rem; width: 1.2rem; height: 1.2rem; border-radius: 50%;
    display: grid; place-items: center; font-size: .75rem; font-weight: 700; color: #fff; background: var(--farbe-primaer); }
.kurs-blick { position: sticky; top: 1rem; padding: 1.2rem 1.3rem; border: 1px solid var(--farbe-linie); border-radius: var(--rundung);
    background: var(--farbe-flaeche); box-shadow: var(--schatten); }
.kurs-blick dl { display: grid; grid-template-columns: max-content 1fr; gap: .5rem 1rem; margin: 0 0 1rem; }
.kurs-blick dt { color: var(--farbe-gedaempft); font-size: .9rem; }
.kurs-blick dd { margin: 0; font-weight: 600; }
.kurs-blick h3 { font-size: 1rem; margin: 1rem 0 .4rem; padding-top: .8rem; border-top: 1px solid var(--farbe-linie); }
.punkt-liste { margin: 0; padding-left: 1.1rem; display: grid; gap: .25rem; }
.kurs-blick-paket { margin: 1rem 0 0; padding-top: .8rem; border-top: 1px solid var(--farbe-linie); font-size: .92rem; }

/* Ansicht eines Kontos durch den Admin (E-68): festes Band unten */
.ansicht-band { position: fixed; left: 0; right: 0; bottom: 0; z-index: 200; display: flex; flex-wrap: wrap; align-items: center;
    justify-content: center; gap: .5rem 1.2rem; padding: .6rem 1rem; background: #111; color: #fff; font-size: .92rem;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, .2); }
.ansicht-band form { margin: 0; }
.ansicht-band .knopf { background: #fff; color: #111; }
.ansicht-band .knopf:hover { background: #e5e5e5; color: #111; box-shadow: none; }
body:has(.ansicht-band) { padding-bottom: 4rem; }
.ansicht-form { display: inline; margin: 0 0 0 .3rem; }
.ansicht-pfeil { border: 1px solid var(--farbe-linie); background: var(--farbe-flaeche); color: var(--farbe-primaer); border-radius: 4px;
    padding: 0 .4rem; line-height: 1.5; font: inherit; font-size: .85rem; cursor: pointer; }
.ansicht-pfeil:hover { background: var(--farbe-primaer); color: var(--auf-primaer); border-color: var(--farbe-primaer); }
.status-admin { background: #fde7c7; color: #8a4108; }

/* Kurskacheln gleich hoch (30.9.): Titel hoechstens 2 Zeilen, Beschreibung hoechstens 3 Zeilen mit „…“ (etwa ein Drittel
   der Kachel), Referent:in immer unten; staerkerer Hover mit Schatten und Akzentlinie */
.kurs-raster > .kurskarte-link, .start-kurse > .kurskarte-link { height: 100%; }
.kurskarte .kurs-inhalt { flex: 1; }
.kurskarte .kurs-titel { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
    font-size: 1.02rem; line-height: 1.3; min-height: 2.6em; }
.kurskarte .kurs-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
    color: var(--farbe-gedaempft); line-height: 1.45; min-height: 4.35em; }
.kurskarte .kurs-referent { margin-top: auto; padding-top: .4rem; }
.kurskarte-link:hover, .kurskarte-link:focus-visible { transform: translateY(-4px);
    box-shadow: 0 14px 34px rgba(15, 23, 42, .18), 0 0 0 2px color-mix(in srgb, var(--farbe-akzent) 70%, transparent); }
.kurskarte-link .kurs-bild img { transition: transform .3s; }
.kurskarte-link:hover .kurs-bild img { transform: scale(1.04); }
.vorschau-play { color: #fff; background: var(--farbe-akzent); }

/* Profil (30.9.): Profilbild links gross, Felder rechts; Passwort-Felder links, Regeln rechts */
.profil-zwei { display: grid; grid-template-columns: minmax(12rem, 16rem) minmax(0, 1fr); gap: 1rem 2.5rem; align-items: start; }
#passwort .profil-zwei { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@container (max-width: 40rem) { .profil-zwei, #passwort .profil-zwei { grid-template-columns: 1fr; } }
.profil-bild-block { display: flex; flex-direction: column; align-items: center; gap: .6rem; text-align: center; }
.profil-bild-block .avatar-gross { width: 8rem; height: 8rem; font-size: 2.2rem; }
.profil-bild-knoepfe { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; }
.profil-bild-knoepfe label.knopf { cursor: pointer; }
.profil-felder { display: flex; flex-direction: column; gap: .7rem; }
.profil-felder label { display: flex; flex-direction: column; gap: .25rem; color: var(--farbe-gedaempft); font-size: .92rem; }
.profil-felder .aktionen { justify-content: flex-start; }
.profil-regeln { padding: .8rem 1rem; border-radius: 8px; background: var(--farbe-grund); }
.profil-regeln .pw-liste { margin: .5rem 0; }
.stoebern-leiste { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1rem; margin: 1rem 0;
    padding: .9rem 1.2rem; border-radius: var(--rundung); text-decoration: none; color: var(--farbe-text);
    background: color-mix(in srgb, var(--farbe-primaer) 6%, white);
    border: 1px solid var(--farbe-linie); }
.stoebern-leiste:hover { box-shadow: var(--schatten-hoch); }
.h2-link { margin-left: .8rem; font-size: .9rem; font-weight: 500; }

/* Sterne (E-69): anteilig gefuellt in der Akzentfarbe */
.sterne { position: relative; display: inline-block; color: #d6d9df; letter-spacing: .05em; line-height: 1; }
.sterne::before { content: "★★★★★"; position: absolute; inset: 0; width: var(--anteil, 0%); overflow: hidden; color: var(--farbe-akzent);
    white-space: nowrap; letter-spacing: .05em; }
.sterne-klein { display: inline-flex; align-items: center; gap: .35rem; font-size: .92rem; }
.sterne-wahl { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: .1rem; border: 0; padding: 0; margin: 0 0 .6rem; }
.sterne-wahl legend { float: left; width: 6rem; font-size: .9rem; color: var(--farbe-gedaempft); }
.sterne-wahl input { position: absolute; opacity: 0; pointer-events: none; }
.sterne-wahl label { font-size: 1.6rem; color: #d6d9df; cursor: pointer; line-height: 1; }
.sterne-wahl input:checked ~ label, .sterne-wahl label:hover, .sterne-wahl label:hover ~ label { color: var(--farbe-akzent); }
.sterne-wahl input:focus-visible + label { outline: 2px solid var(--farbe-primaer); border-radius: 4px; }

/* Gekaufter Kurs (30.9.): Video + Inhalt links, Fortschritt/Bewertung rechts */
.lern-kopf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: .5rem 2rem; margin-bottom: 1rem; }
.lern-kopf h1 { margin: .3rem 0; }
.lern-zugang { text-align: right; margin: 0; }
.lern-raster { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: 2rem; align-items: start; }
@media (max-width: 900px) { .lern-raster { grid-template-columns: 1fr; } .lern-zugang { text-align: left; } }
.lern-video { border-radius: var(--rundung); overflow: hidden; box-shadow: var(--schatten-hoch); }
.lern-block { margin-top: 2rem; }
.lern-block h2 { font-size: 1.3rem; margin: 0 0 .8rem; }
.lern-seitenleiste { display: flex; flex-direction: column; gap: 1rem; position: sticky; top: 1rem; }
.lern-karte { padding: 1rem 1.2rem; border: 1px solid var(--farbe-linie); border-radius: var(--rundung); background: var(--farbe-flaeche); box-shadow: var(--schatten); }
.lern-karte h2 { font-size: 1.05rem; margin: 0 0 .7rem; }
.lern-karte .lern-stand { display: flex; flex-direction: column; gap: .4rem; margin-bottom: .6rem; }
.lern-karte progress { width: 100%; height: .7rem; accent-color: var(--farbe-akzent); }
.unterlagen-karten { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.unterlagen-karten li { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; padding: .7rem .9rem; border: 1px solid var(--farbe-linie);
    border-radius: 10px; background: var(--farbe-flaeche); }
.datei-symbol { display: grid; place-items: center; width: 2.8rem; height: 2.8rem; border-radius: 8px; font-size: .72rem; font-weight: 700; color: #fff;
    background: var(--farbe-gedaempft); flex: none; }
.datei-pdf { background: #c0392b; } .datei-xlsx, .datei-csv { background: #1e7b45; } .datei-docx { background: #2b5797; } .datei-pptx { background: #c1502e; }
.datei-name { display: flex; flex-direction: column; flex: 1; min-width: 12rem; word-break: break-word; }
.datei-aktionen { display: flex; gap: .4rem; }
.pdf-dialog { width: min(1100px, 96vw); height: 90vh; padding: 0; border: 0; border-radius: var(--rundung); overflow: hidden; }
.pdf-dialog::backdrop { background: rgba(15, 23, 42, .6); }
.pdf-dialog[open] { display: flex; flex-direction: column; }
.pdf-dialog-kopf { display: flex; justify-content: space-between; align-items: center; padding: .6rem 1rem; border-bottom: 1px solid var(--farbe-linie); }
.pdf-dialog iframe { flex: 1; width: 100%; border: 0; }
.frage-stellen { margin: 0 0 1rem; }
.frage-stellen summary { list-style: none; display: inline-block; cursor: pointer; }
.frage-stellen[open] summary { margin-bottom: .8rem; }
.fragen-liste { list-style: none; padding: 0; margin: 0; display: grid; gap: .8rem; }
.fragen-liste li { padding: .8rem 1rem; border-radius: 10px; background: var(--farbe-grund); }
.fragen-liste .frage { margin: 0; display: flex; flex-direction: column; gap: .2rem; }
.fragen-liste .antwort { margin: .6rem 0 0; padding: .6rem .8rem; border-left: 3px solid var(--farbe-akzent); background: var(--farbe-flaeche); border-radius: 0 6px 6px 0;
    display: flex; flex-direction: column; gap: .2rem; }
.fragen-liste .antwort-offen { margin: .4rem 0 0; font-size: .88rem; }
/* Referentenportal: Hinweis auf neue Fragen (E-69) */
.fragen-hinweis { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin: 1rem 0; padding: .9rem 1.2rem;
    border-radius: var(--rundung); text-decoration: none; color: var(--farbe-text); background: color-mix(in srgb, var(--farbe-akzent) 25%, white);
    border: 1px solid var(--farbe-akzent); box-shadow: var(--schatten); animation: fragen-auf .4s ease-out; }
.fragen-hinweis > span:nth-child(2) { flex: 1; }
.fragen-glocke { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--farbe-akzent); color: #fff; font-weight: 700; }
@keyframes fragen-auf { from { transform: translateY(-6px); opacity: 0; } to { transform: none; opacity: 1; } }
.fragen-liste .frage-offen { border-left: 4px solid var(--farbe-akzent); }
.fragen-liste form { margin-top: .6rem; }

/* Kennzeichen auf Kurskarten und Kursseite (30.9.): kleine Etiketten, Akzentfarbe; im Warenkorb gruen */
.kennzeichen-leiste { position: absolute; z-index: 1; top: .6rem; left: .6rem; right: .6rem; display: flex; flex-wrap: wrap; gap: .3rem; }
.kennzeichen { display: inline-flex; align-items: center; padding: .15rem .55rem; border-radius: 999px; font-size: .72rem; font-weight: 700;
    letter-spacing: .02em; color: #3d2400; background: var(--farbe-akzent); box-shadow: 0 2px 6px rgba(0, 0, 0, .15); }
.kz-kostenlos { background: var(--farbe-kaufen); color: #fff; }
.kz-neu { background: var(--farbe-primaer); color: #fff; }
.kz-im-paket { background: #fff; color: var(--farbe-primaer); }
.kz-bestbewertet::before, .kz-top-referent::before { content: "★ "; }
.kurskarte.im-warenkorb { border: 2px solid var(--farbe-kaufen); }
.warenkorb-marke { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; padding: .3rem .6rem; font-size: .8rem; font-weight: 700;
    color: #fff; background: color-mix(in srgb, var(--farbe-kaufen) 92%, black); text-align: center; }
.kursseite-kennzeichen { display: flex; flex-wrap: wrap; gap: .35rem; margin: .4rem 0 0; }
.kursseite-kennzeichen .kennzeichen { font-size: .78rem; }
.knopf-im-korb { background: var(--farbe-kaufen); border-color: var(--farbe-kaufen); color: #fff; }
.ablauf-schritte { list-style: none; counter-reset: schritt; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .8rem; }
.ablauf-schritte li { counter-increment: schritt; position: relative; padding: 1rem 1rem 1rem 3.2rem; border-radius: 10px; background: var(--farbe-flaeche);
    border: 1px solid var(--farbe-linie); display: flex; flex-direction: column; gap: .25rem; }
.ablauf-schritte li::before { content: counter(schritt); position: absolute; left: 1rem; top: 1rem; width: 1.6rem; height: 1.6rem; border-radius: 50%;
    display: grid; place-items: center; font-weight: 700; font-size: .85rem; color: #fff; background: var(--farbe-primaer); }
.ablauf-schritte span { color: var(--farbe-gedaempft); font-size: .9rem; line-height: 1.45; }
.kurs-aehnlich { margin-top: 3rem; }
.kurs-aehnlich h2 { font-size: 1.3rem; }

/* Textfelder ausserhalb der Einstellungsformulare (gekaufter Kurs: Frage, Bewertung; 30.9.) im Schriftbild der Seite */
.formular textarea, .formular input[type=text], .formular input[type=search], .formular select {
    width: 100%; box-sizing: border-box; padding: .55rem .7rem; font: inherit; color: var(--farbe-text); line-height: 1.5;
    border: 1px solid var(--farbe-linie); border-radius: calc(var(--rundung) / 2); background: var(--farbe-flaeche); }
.formular textarea { resize: vertical; min-height: 5.5rem; }
.formular textarea:focus, .formular input[type=text]:focus { outline: 2px solid color-mix(in srgb, var(--farbe-primaer) 40%, transparent); border-color: var(--farbe-primaer); }
.formular label:has(> textarea) { display: flex; flex-direction: column; gap: .35rem; color: var(--farbe-gedaempft); font-size: .92rem; }

/* Laufband „Das koennte dich auch interessieren“ (30.9.): langsam nach links, Hover/Fokus haelt an */
.laufband { overflow: hidden; margin: 0 calc(var(--abstand) * -1); padding: .8rem var(--abstand) 1.2rem;
    mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.laufband-spur { display: flex; gap: 1.2rem; width: max-content; animation: laufen var(--dauer, 60s) linear infinite; }
.laufband-kopie { display: contents; }
.laufband:hover .laufband-spur, .laufband:focus-within .laufband-spur { animation-play-state: paused; }
.laufband .kurskarte-link { width: 16rem; flex: none; }
@keyframes laufen { from { transform: translateX(0); } to { transform: translateX(calc(-50% - .6rem)); } }
@media (prefers-reduced-motion: reduce) {
    .laufband { overflow-x: auto; mask-image: none; }
    .laufband-spur { animation: none; }
    .laufband-kopie { display: none; }
}
.sterne-gross { display: flex; align-items: center; gap: .6rem; font-size: 1.3rem; margin: 0 0 1rem; }
.sterne-gross .gedaempft { font-size: .9rem; }
.stimmen-liste { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: .8rem; }
.stimmen-liste li { padding: .9rem 1rem; border-radius: 10px; background: var(--farbe-flaeche); border: 1px solid var(--farbe-linie);
    display: flex; flex-direction: column; gap: .4rem; }
.stimmen-liste p { margin: 0; line-height: 1.5; }

/* Mehr Orange (Inhaberin 30.9.: „auf den ersten Blick erkennbar“): Linien unter Ueberschriften, Kartenraender, Haken */
.kurs-seite h2, .kurs-aehnlich h2 { position: relative; padding-bottom: .45rem; }
.kurs-seite h2::after, .kurs-aehnlich h2::after {
    content: ""; position: absolute; left: 0; bottom: 0; width: 2.5rem; height: 2px; border-radius: 2px; background: color-mix(in srgb, var(--farbe-primaer) 35%, white); }







.kurs-blick dd.sterne-klein, .kurs-sterne strong { color: var(--farbe-text); }

/* Referentenportal neu (30.9.): Motivation, Hilfe-„?“, Diagramme, Summenzeile – mit Akzentfarbe */
.ref-oben { grid-template-columns: auto minmax(0, 1.3fr) minmax(0, 1fr); }
.ring-akzent .ring-wert { stroke: var(--farbe-akzent); }
.balken-akzent span { background: linear-gradient(90deg, var(--farbe-akzent), color-mix(in srgb, var(--farbe-akzent) 60%, var(--farbe-primaer))); }
.dash-karte { position: relative; }
.serie-karte { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: .15rem; }
.serie-karte strong { font-size: 1.8rem; line-height: 1.1; }
.serie-flamme { font-size: 2rem; }
.kachel-akzent { }
.ziele-liste { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.ziele-liste li { display: flex; align-items: center; gap: .6rem; padding: .5rem .7rem; border-radius: 8px; background: var(--farbe-grund); }
.ziel-haken { display: grid; place-items: center; width: 1.4rem; height: 1.4rem; flex: none; border-radius: 50%; border: 2px solid var(--farbe-akzent);
    font-size: .8rem; font-weight: 700; color: #fff; }
.ziele-liste li.erledigt .ziel-haken { background: var(--farbe-akzent); }
.ziele-liste li.erledigt span:last-child { color: var(--farbe-gedaempft); text-decoration: line-through; }
.abzeichen .abzeichen-symbol { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; font-weight: 700;
    background: color-mix(in srgb, var(--farbe-akzent) 25%, white); color: #7a4300; }

.ref-abschnitt { position: relative; margin-top: 2rem; }
/* kleines „?“ ueber der Ueberschrift: Klick oeffnet die Erklaerung */
.hilfe { position: absolute; top: -.2rem; right: 0; z-index: 5; }
.hilfe summary { list-style: none; display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; cursor: pointer;
    font-weight: 700; font-size: .85rem; color: var(--farbe-primaer); background: color-mix(in srgb, var(--farbe-primaer) 8%, white); border: 1px solid color-mix(in srgb, var(--farbe-primaer) 25%, white); }
.hilfe summary::-webkit-details-marker { display: none; }
.hilfe[open] p { position: absolute; right: 0; top: 1.9rem; width: min(26rem, 80vw); margin: 0; padding: .8rem 1rem; font-size: .9rem; line-height: 1.5;
    background: var(--farbe-flaeche); border: 1px solid var(--farbe-linie); border-radius: 10px; box-shadow: var(--schatten-hoch); }
.dash-karte > .hilfe { top: .6rem; right: .6rem; }
.summen-zeile th, .summen-zeile td { font-weight: 700; border-top: 2px solid var(--farbe-linie); background: var(--farbe-grund); }
.grafiken { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: 1rem; }
.balkendiagramm { margin: 0; padding: 1rem; border: 1px solid var(--farbe-linie); border-radius: var(--rundung); background: var(--farbe-flaeche); }
.balkendiagramm figcaption { font-weight: 600; margin-bottom: .6rem; }
.balken-reihe { display: flex; align-items: flex-end; gap: .35rem; height: 11rem; }
.balken-spalte { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: .2rem; height: 100%; min-width: 0; }
.balken-spalte small { font-size: .68rem; color: var(--farbe-gedaempft); white-space: nowrap; }
.saeule { display: block; width: 100%; max-width: 1.8rem; height: max(var(--h, 0%), 2px); border-radius: 4px 4px 0 0;
    background: linear-gradient(180deg, var(--farbe-akzent), color-mix(in srgb, var(--farbe-akzent) 65%, var(--farbe-primaer))); }
.saeule-zweit { background: linear-gradient(180deg, color-mix(in srgb, var(--farbe-primaer) 70%, white), var(--farbe-primaer)); }
@media (max-width: 800px) { .ref-oben { grid-template-columns: 1fr; } }

/* Linktree einer Referent:in (E-73): mittig, fuer das Handy, Akzentfarbe */
.linktree-seite { background: linear-gradient(160deg, color-mix(in srgb, var(--farbe-akzent) 22%, white), var(--farbe-grund) 45%); min-height: 100vh; }
.linktree { max-width: 34rem; margin: 0 auto; padding: 2rem 1rem 3rem; display: flex; flex-direction: column; align-items: center; text-align: center; gap: .6rem; }
.linktree-marke { display: flex; align-items: center; gap: .5rem; color: var(--farbe-primaer); font-weight: 700; text-decoration: none; margin-bottom: 1rem; }
.linktree-avatar { display: grid; place-items: center; width: 5.5rem; height: 5.5rem; border-radius: 50%; font-size: 1.8rem; font-weight: 700; color: #fff;
    background: linear-gradient(135deg, var(--farbe-akzent), var(--farbe-primaer)); box-shadow: var(--schatten-hoch); }
.linktree h1 { margin: .3rem 0 0; font-size: 1.6rem; }
.linktree-liste { list-style: none; padding: 0; margin: 1rem 0; width: 100%; display: grid; gap: .7rem; }
.linktree-liste a { display: flex; align-items: center; gap: .8rem; padding: .6rem .8rem; border-radius: 14px; text-decoration: none; color: var(--farbe-text);
    background: var(--farbe-flaeche); border: 2px solid color-mix(in srgb, var(--farbe-akzent) 60%, transparent); box-shadow: var(--schatten); text-align: left;
    transition: transform .15s, box-shadow .15s; }
.linktree-liste a:hover { transform: translateY(-2px); box-shadow: var(--schatten-hoch); border-color: var(--farbe-akzent); }
.linktree-liste a > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; gap: .15rem; }
.linktree-liste small { color: var(--farbe-gedaempft); }
.linktree-bild { width: 4.5rem; aspect-ratio: 16 / 9; flex: none; border-radius: 8px; overflow: hidden; background: color-mix(in srgb, var(--farbe-akzent) 30%, white); }
.linktree-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.linktree-pfeil { font-size: 1.3rem; color: var(--farbe-akzent); font-weight: 700; }
.linktree-karte { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; padding: .9rem 1.1rem; border-radius: var(--rundung);
    background: var(--farbe-flaeche); border: 1px solid var(--farbe-linie); }
.linktree-karte code { flex: 1; min-width: 14rem; font-size: .95rem; word-break: break-all; }
.link-kopieren { margin-left: .3rem; padding: 0 .4rem; font: inherit; font-size: .75rem; line-height: 1.6; cursor: pointer; color: var(--farbe-primaer);
    background: var(--farbe-flaeche); border: 1px solid var(--farbe-linie); border-radius: 4px; }
.link-kopieren:hover { border-color: var(--farbe-akzent); }
.beitrag-anfordern { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1rem; }
.beitrag-anfordern form { margin: 0; }
.beitrag-text { white-space: pre-line; max-width: 42rem; font-size: .9rem; line-height: 1.5; }
/* Videos per OneDrive-Link (E-74) */
.link-weg { margin-bottom: 2rem; padding: .8rem 1.1rem 1rem; border: 1px solid var(--farbe-linie); border-radius: var(--rundung);
    background: var(--farbe-flaeche); }
.link-weg summary { cursor: pointer; list-style: none; }
.link-weg summary h2 { display: inline; margin: 0; }
.link-weg input[type=url], .link-holen input[type=url] { width: 100%; min-width: 14rem; padding: .35rem .5rem; font: inherit; font-size: .85rem;
    border: 1px solid var(--farbe-linie); border-radius: 4px; }
.link-holen { margin-top: .4rem; }
/* BiWi als App (E-75) */
.app-installieren { margin-top: .6rem; padding: .8rem 1.6rem; font-weight: 700; }
.offline-seite { text-align: center; max-width: 30rem; margin: 4rem auto; display: flex; flex-direction: column; align-items: center; gap: .6rem; }

/* Referentenportal: Meine Kurse und Kursdetail (E-76/E-77, Inhaberin 30.9.: modern, platzsparend, wenig Orange) */
/* PORTAL-KOPF (Vorlage: Kursideen, Inhaberin 1.10.2026): Etikett, Ueberschrift, Reiter – gleiche Abstaende auf allen Portalseiten.
   Ueberschrift mit Knoepfen daneben: <div class="seiten-kopf"><h1>…</h1><div class="seiten-kopf-aktionen">…</div></div> */
.seiten-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1rem; margin: .8rem 0 1rem; }
.seiten-kopf h1 { margin: 0; }
.seiten-kopf-aktionen { display: flex; align-items: center; gap: .6rem; }
.hilfe.hilfe-inline { position: relative; top: 0; }
.aufklapp-menue { position: relative; }
.aufklapp-menue > summary { list-style: none; }
.aufklapp-menue > summary::-webkit-details-marker { display: none; }
.aufklapp-inhalt { position: absolute; right: 0; top: calc(100% + .4rem); z-index: 20; width: min(24rem, 90vw); padding: 1rem;
    display: flex; flex-direction: column; gap: .6rem; background: var(--farbe-flaeche); border: 1px solid var(--farbe-linie);
    border-radius: var(--rundung); box-shadow: var(--schatten-hoch); }
.aufklapp-inhalt p { margin: 0; }
.leer-hinweis { padding: 2rem; text-align: center; color: var(--farbe-gedaempft); border: 2px dashed var(--farbe-linie); border-radius: var(--rundung); }
.pille { display: inline-flex; align-items: center; padding: .1rem .6rem; border-radius: 999px; font-size: .75rem; font-weight: 600;
    background: #eef1f4; color: var(--farbe-gedaempft); white-space: nowrap; }
.pille-ok { background: color-mix(in srgb, var(--farbe-primaer) 12%, white); color: var(--farbe-primaer); }
.pille-info { background: #e8efff; color: #2749b8; }
.chip { display: inline-flex; align-items: center; gap: .2rem; padding: .05rem .45rem; border-radius: 6px; font-size: .72rem;
    color: var(--farbe-gedaempft); border: 1px dashed var(--farbe-linie); }
.chip-ok { border-style: solid; border-color: color-mix(in srgb, var(--farbe-primaer) 30%, white); color: var(--farbe-primaer); }
.chip-ok::before { content: "✓"; font-weight: 700; }
.klein { font-size: .82rem; }
.knopf.voll { width: 100%; justify-content: center; }
.symbol-knopf { display: grid; place-items: center; width: 1.8rem; height: 1.8rem; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
    font: inherit; font-size: .85rem; color: var(--farbe-gedaempft); background: transparent; }
.symbol-knopf:hover, .symbol-knopf:focus-visible { background: #fdecea; color: var(--farbe-fehler); }

/* Kursliste als Zeilen-Karten */
.kursliste-modern { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: .6rem; }
.kl-zeile { display: grid; grid-template-columns: 7rem minmax(0, 1fr) 10rem 1rem; align-items: center; gap: 1.2rem; padding: .6rem 1rem .6rem .6rem;
    border-radius: var(--rundung); background: var(--farbe-flaeche); border: 1px solid var(--farbe-linie); color: var(--farbe-text);
    text-decoration: none; transition: box-shadow .15s, transform .15s, border-color .15s; }
.kl-zeile:hover, .kl-zeile:focus-visible { box-shadow: var(--schatten-hoch); transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--farbe-primaer) 35%, white); }
.kl-bild { aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: linear-gradient(135deg, #e6ecf2, #f4f7fb); }
.kl-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kl-text { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.kl-text strong { font-size: 1.02rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kl-status { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; }
.kl-fortschritt { display: flex; flex-direction: column; gap: .25rem; }
.kl-fortschritt small { color: var(--farbe-gedaempft); font-size: .78rem; }
.kl-fortschritt progress, .checkliste-balken { width: 100%; height: .5rem; appearance: none; border: 0; border-radius: 999px; overflow: hidden;
    background: #e6ecf2; accent-color: var(--farbe-primaer); }
.kl-fortschritt progress::-webkit-progress-bar, .checkliste-balken::-webkit-progress-bar { background: #e6ecf2; border-radius: 999px; }
.kl-fortschritt progress::-webkit-progress-value, .checkliste-balken::-webkit-progress-value { background: var(--farbe-primaer); border-radius: 999px; }
.kl-fortschritt progress::-moz-progress-bar, .checkliste-balken::-moz-progress-bar { background: var(--farbe-primaer); border-radius: 999px; }
.kl-pfeil { font-size: 1.6rem; color: var(--farbe-gedaempft); }
@media (max-width: 700px) {
    .kl-zeile { grid-template-columns: 5rem minmax(0, 1fr); }
    .kl-fortschritt { grid-column: 1 / -1; } .kl-pfeil { display: none; }
}

/* Kursdetail: links Videos und Unterlagen, rechts Titelbild und Checkliste */
.kurs-arbeit { display: grid; grid-template-columns: minmax(0, 1fr) 19rem; gap: 1.2rem; align-items: start; margin-top: 1.2rem; }
.kurs-arbeit-haupt, .kurs-arbeit-seite { display: flex; flex-direction: column; gap: 1.2rem; min-width: 0; }
.kurs-arbeit-seite { position: sticky; top: 1rem; }
.arbeits-karte { padding: 1rem 1.1rem; border-radius: var(--rundung); background: var(--farbe-flaeche); border: 1px solid var(--farbe-linie);
    display: flex; flex-direction: column; gap: .7rem; }
.karten-kopf { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; }
.karten-kopf h2 { margin: 0; font-size: 1.05rem; }
.arbeits-karte h3 { margin: .3rem 0 0; font-size: .9rem; color: var(--farbe-gedaempft); font-weight: 600; }
.arbeits-karte .video-rahmen { border-radius: 8px; overflow: hidden; }
.video-karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1.2rem; }
.ablage { position: relative; display: flex; align-items: center; gap: .8rem; padding: 1rem; border: 2px dashed var(--farbe-linie); border-radius: 10px;
    background: var(--farbe-grund); cursor: pointer; transition: border-color .15s, background .15s; }
.ablage:hover, .ablage:focus-within, .ablage.ablage-aktiv { border-color: var(--farbe-primaer); background: color-mix(in srgb, var(--farbe-primaer) 5%, white); }
.ablage.ablage-laeuft { opacity: .6; pointer-events: none; }
.ablage input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.ablage > span:last-child { display: flex; flex-direction: column; gap: .1rem; }
.ablage small { color: var(--farbe-gedaempft); font-size: .78rem; }
.ablage-symbol { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; flex: none; border-radius: 50%; font-weight: 700;
    color: var(--farbe-primaer); background: color-mix(in srgb, var(--farbe-primaer) 10%, white); }
.ablage-klein { padding: .6rem .8rem; }
.ablage-klein .ablage-symbol { width: 1.8rem; height: 1.8rem; }
.video-upload progress { width: 100%; }
.link-zeile { display: flex; gap: .4rem; }
.link-zeile input { flex: 1; min-width: 0; padding: .35rem .6rem; font: inherit; font-size: .85rem; border: 1px solid var(--farbe-linie); border-radius: 6px; }
.unterlagen-spalten { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem 1.4rem; }
.unterlagen-spalten > div { display: flex; flex-direction: column; gap: .5rem; }
.unterlagen-karten.kompakt { gap: .4rem; }
.unterlagen-karten.kompakt li { flex-wrap: nowrap; gap: .6rem; padding: .45rem .5rem; }
.unterlagen-karten.kompakt .datei-symbol { width: 2.2rem; height: 2.2rem; font-size: .62rem; }
.unterlagen-karten.kompakt .datei-name { min-width: 0; }
.unterlagen-karten.kompakt .datei-name a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--farbe-text); font-weight: 600; font-size: .9rem; }
.unterlagen-karten form { margin: 0 0 0 auto; }
.titelbild-feld { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; cursor: pointer;
    background: var(--farbe-grund); border: 2px dashed var(--farbe-linie); }
.titelbild-feld:has(img) { border-style: solid; border-color: transparent; }
.titelbild-feld input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; z-index: 2; }
.titelbild-feld img { width: 100%; height: 100%; object-fit: cover; display: block; }
.titelbild-hinweis { position: absolute; inset: auto 0 0 0; padding: .4rem; text-align: center; font-size: .82rem; font-weight: 600; color: #fff;
    background: rgba(15, 23, 42, .55); opacity: 0; transition: opacity .15s; }
.titelbild-feld:not(:has(img)) .titelbild-hinweis { inset: 0; display: grid; place-items: center; color: var(--farbe-gedaempft); background: none; opacity: 1; }
.titelbild-feld:hover .titelbild-hinweis, .titelbild-feld:focus-within .titelbild-hinweis, .titelbild-feld.ablage-aktiv .titelbild-hinweis { opacity: 1; }
.checkliste { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .35rem; }
.checkliste li { display: flex; align-items: center; gap: .55rem; font-size: .88rem; line-height: 1.35; }
.checkliste li.erledigt > span:last-child { color: var(--farbe-gedaempft); }
.checkliste form { margin: 0; display: contents; }
.check-kreis { display: grid; place-items: center; width: 1.35rem; height: 1.35rem; flex: none; border-radius: 50%; font-size: .75rem; font-weight: 700;
    color: #fff; border: 2px solid var(--farbe-linie); background: var(--farbe-flaeche); padding: 0; }
.checkliste li.erledigt .check-kreis { background: var(--farbe-primaer); border-color: var(--farbe-primaer); }
.check-knopf { cursor: pointer; font: inherit; font-size: .75rem; font-weight: 700; }
.check-knopf:hover { border-color: var(--farbe-primaer); }
@media (max-width: 900px) { .kurs-arbeit { grid-template-columns: 1fr; } .kurs-arbeit-seite { position: static; } }

/* Bewertung mit Smileys und Gruenden (E-78): Gruende erscheinen passend zur gewaehlten Stufe (CSS :has) */
.bewertung-formular { gap: 1rem; }
.smiley-frage { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .6rem; }
.smiley-frage legend { font-weight: 600; padding: 0; margin-bottom: .5rem; }
.smileys { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .3rem; }
.smileys input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.smileys label { display: flex; flex-direction: column; align-items: center; gap: .15rem; padding: .35rem .1rem; border-radius: 10px; cursor: pointer;
    border: 1px solid transparent; transition: background .15s, border-color .15s, transform .15s; }
.smileys label:hover { background: var(--farbe-grund); transform: translateY(-1px); }
.smiley { font-size: 1.7rem; line-height: 1; filter: grayscale(.6); transition: filter .15s; }
.smileys small { font-size: .68rem; color: var(--farbe-gedaempft); }
.smileys input:checked + label { background: color-mix(in srgb, var(--farbe-primaer) 8%, white); border-color: color-mix(in srgb, var(--farbe-primaer) 35%, white); }
.smileys input:checked + label .smiley, .smileys label:hover .smiley { filter: none; }
.smileys input:focus-visible + label { outline: 2px solid var(--farbe-primaer); outline-offset: 2px; }
.gruende, .gruende-sonstiges { display: none; }
.gruende { flex-wrap: wrap; gap: .35rem; }
.smiley-frage:has(.smileys input:checked:not([value="5"])) .gruende-kritisch,
.smiley-frage:has(.smileys input[value="5"]:checked) .gruende-fantastisch { display: flex; }
.smiley-frage:has(.smileys input:checked) .gruende-sonstiges { display: block; width: 100%; padding: .35rem .6rem; font: inherit; font-size: .85rem;
    border: 1px solid var(--farbe-linie); border-radius: 6px; }
.grund { position: relative; cursor: pointer; }
.grund input { position: absolute; opacity: 0; }
.grund span { display: inline-block; padding: .2rem .6rem; border-radius: 999px; font-size: .78rem; border: 1px solid var(--farbe-linie);
    background: var(--farbe-flaeche); transition: background .15s, border-color .15s; }
.grund input:checked + span { background: var(--farbe-primaer); border-color: var(--farbe-primaer); color: #fff; }
.grund input:focus-visible + span { outline: 2px solid var(--farbe-primaer); outline-offset: 1px; }
.bewertung-formular .smileys label, .bewertung-formular label.grund { color: var(--farbe-text); }
.bewertung-formular label.grund { display: inline-flex; flex-direction: row; gap: 0; }
.feedback-spalten { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .6rem 1.4rem; }
.feedback-liste { list-style: none; padding: 0; margin: .3rem 0 0; display: flex; flex-direction: column; gap: .3rem; }
.feedback-liste li { display: flex; justify-content: space-between; gap: .6rem; padding: .3rem .6rem; border-radius: 6px; font-size: .88rem;
    background: color-mix(in srgb, var(--farbe-primaer) 6%, white); }
.feedback-liste.kritisch li { background: var(--farbe-grund); }
.feedback-liste:not(:has(li))::after { content: "–"; color: var(--farbe-gedaempft); }
.feedback-sonstiges { margin: .3rem 0 0; padding-left: 1.1rem; font-size: .88rem; color: var(--farbe-gedaempft); }

/* Referenten-Dashboard neu (30.9., Inhaberin: weniger Orange, Level-Karte, Kennzahlen, 12 Monate als Grafik) */
.ref-kopf { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr); gap: var(--abstand); margin-bottom: var(--abstand); }
.ref-kopf .dash-karte { margin: 0; }
.level-karte { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .6rem 1.6rem; }
.level-ring { position: relative; width: 7.5rem; height: 7.5rem; }
.level-ring .ring { width: 100%; height: 100%; }
.level-ring .ring-wert { stroke: var(--farbe-primaer); }
.level-ring-text { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.level-ring-text strong { font-size: 1.7rem; line-height: 1; color: var(--farbe-primaer); }
.level-ring-text small { color: var(--farbe-gedaempft); font-size: .78rem; }
.level-info { display: flex; flex-direction: column; gap: .4rem; min-width: 0; }
.level-nummer { font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--farbe-gedaempft); }
.level-info .level-name { font-size: 1.45rem; color: var(--farbe-text); }
.level-info .balken span, .level-karte .balken span { background: var(--farbe-primaer); }
.level-vorteil { color: var(--farbe-primaer); font-weight: 600; }
.level-alle { grid-column: 1 / -1; font-size: .88rem; }
.level-alle summary { cursor: pointer; color: var(--farbe-gedaempft); }
.level-alle ol { margin: .5rem 0 0; padding-left: 1.2rem; display: flex; flex-direction: column; gap: .3rem; }
.level-alle li span { display: block; color: var(--farbe-gedaempft); font-size: .82rem; }
.level-alle li.erreicht strong { color: var(--farbe-primaer); }
.ref-kacheln { display: grid; grid-template-columns: .8fr .8fr 1.25fr 1.25fr 1fr; gap: var(--abstand); margin: 0 0 calc(var(--abstand) * 1.5); }
.ref-kachel { display: flex; flex-direction: column; gap: .35rem; padding: .9rem 1.1rem; border-radius: var(--rundung); background: var(--farbe-flaeche);
    border: 1px solid var(--farbe-linie); box-shadow: var(--schatten); }
.ref-kachel span { color: var(--farbe-gedaempft); font-size: .88rem; text-align: left; }
.ref-kachel strong { font-size: 1.7rem; line-height: 1.1; color: var(--farbe-primaer); text-align: right; font-variant-numeric: tabular-nums; }
.ref-kachel-gross strong { font-size: 2rem; }
@media (max-width: 900px) {
    .ref-kopf { grid-template-columns: 1fr; }
    .ref-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .level-karte { grid-template-columns: 1fr; justify-items: start; }
}
/* weniger Orange im Dashboard: Wochenziele und Abzeichen in Petrol */
.ziel-haken { border-color: color-mix(in srgb, var(--farbe-primaer) 40%, white); }
.ziele-liste li.erledigt .ziel-haken { background: var(--farbe-primaer); border-color: var(--farbe-primaer); }
.abzeichen .abzeichen-symbol { background: color-mix(in srgb, var(--farbe-primaer) 10%, white); color: var(--farbe-primaer); }
.abzeichen li.erreicht .abzeichen-symbol { background: var(--farbe-primaer); color: #fff; }

/* 12 Monate: Kennzahl-Knoepfe mit Summe, darunter die Saeulen der gewaehlten Kennzahl */
.monats-wahl { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .5rem; margin-bottom: 1rem; }
.monats-wahl input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.monats-wahl label { display: flex; flex-direction: column; gap: .15rem; padding: .6rem .8rem; border-radius: 10px; cursor: pointer;
    background: var(--farbe-flaeche); border: 1px solid var(--farbe-linie); transition: border-color .15s, box-shadow .15s; }
.monats-wahl label span { font-size: .8rem; color: var(--farbe-gedaempft); }
.monats-wahl label strong { font-size: 1.2rem; text-align: right; color: var(--farbe-text); font-variant-numeric: tabular-nums; }
.monats-wahl input:checked + label { border-color: var(--farbe-primaer); box-shadow: inset 0 -3px 0 var(--farbe-primaer); }
.monats-wahl input:checked + label strong { color: var(--farbe-primaer); }
.monats-wahl input:focus-visible + label { outline: 2px solid var(--farbe-primaer); outline-offset: 2px; }
.monats-diagramm { padding: 1rem 1rem .6rem; border-radius: var(--rundung); background: var(--farbe-flaeche); border: 1px solid var(--farbe-linie); }
.monats-reihe { display: none; align-items: flex-end; gap: .5rem; height: 13rem; }
.monatsgrafik:has(#mr-aufrufe:checked) .reihe-aufrufe, .monatsgrafik:has(#mr-vorschau:checked) .reihe-vorschau,
.monatsgrafik:has(#mr-korb:checked) .reihe-korb, .monatsgrafik:has(#mr-verkaeufe:checked) .reihe-verkaeufe,
.monatsgrafik:has(#mr-anteil:checked) .reihe-anteil { display: flex; }
.monats-spalte { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: .25rem; }
.monats-saeule { display: block; width: 100%; max-width: 2.6rem; height: max(var(--h, 0%), 3px); border-radius: 6px 6px 2px 2px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--farbe-primaer) 65%, white), var(--farbe-primaer)); transition: height .4s ease-out; }
.monats-spalte:last-child .monats-saeule { background: linear-gradient(180deg, color-mix(in srgb, var(--farbe-akzent) 70%, white), var(--farbe-akzent)); }
.monats-wert { font-size: .72rem; font-weight: 600; color: var(--farbe-text); white-space: nowrap; }
.monats-name { font-size: .72rem; color: var(--farbe-gedaempft); }
.als-tabelle { margin-top: .8rem; }
.als-tabelle summary { cursor: pointer; color: var(--farbe-gedaempft); font-size: .88rem; }
@media (max-width: 700px) {
    .monats-wahl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .monats-reihe { gap: .2rem; } .monats-wert { display: none; }
}
.feedback-block { display: flex; flex-direction: column; gap: .7rem; }



/* Auswahlfilter in Tabellen (data-filter="liste") und moderne Liste (Kursideen, 30.9.) */
table.tabelle-aktiv tr.tabelle-filter select { width: 100%; box-sizing: border-box; padding: .2rem .4rem; font: inherit; font-size: .82rem;
    border: 1px solid var(--farbe-linie); border-radius: calc(var(--rundung) / 3); background: #fff; }
.leiste-gruppe { display: flex; align-items: center; gap: .6rem; }
.aufklapp-links .aufklapp-inhalt { left: 0; right: auto; }
.hilfe-links[open] p { left: 0; right: auto; }
table.liste-modern { border-collapse: separate; border-spacing: 0; background: var(--farbe-flaeche); border: 1px solid var(--farbe-linie);
    border-radius: var(--rundung); overflow: hidden; }
table.liste-modern thead th { background: var(--farbe-grund); font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--farbe-gedaempft); }
table.liste-modern tbody td { padding-top: .75rem; padding-bottom: .75rem; vertical-align: middle; }
table.liste-modern tbody tr { transition: background .12s; }
table.liste-modern tbody tr:hover { background: color-mix(in srgb, var(--farbe-primaer) 4%, white); }
table.liste-modern tbody tr.zeile-meine { background: color-mix(in srgb, #2749b8 5%, white); }
.zeilen-notiz { display: block; margin-top: .15rem; color: var(--farbe-gedaempft); font-size: .8rem; overflow: hidden; text-overflow: ellipsis;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; line-clamp: 1; }
.zeilen-aktionen { white-space: nowrap; }
.zeilen-aktionen form { display: inline-block; margin: 0 .2rem 0 0; }

/* Fragen als Chatverlauf (30.9.): Frage links, Antwort rechts, Bearbeiten nur ueber ⋮ */
.chat-liste { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.chat { display: flex; flex-direction: column; gap: .5rem; padding: 1rem 0; border-top: 1px solid var(--farbe-linie); }
.chat:first-child { border-top: 0; padding-top: .4rem; }
.chat-offen .blase-frage { box-shadow: inset 3px 0 0 #2749b8; }
.chat-kopf { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.blase { position: relative; max-width: 80%; padding: .6rem .9rem .45rem; border-radius: 14px; line-height: 1.5; }
.blase-frage { align-self: flex-start; background: var(--farbe-grund); border-top-left-radius: 4px; }
.blase-antwort { align-self: flex-end; background: color-mix(in srgb, var(--farbe-primaer) 10%, white); border-top-right-radius: 4px; padding-right: 2.2rem; }
.blase-wer { display: block; font-size: .75rem; font-weight: 700; color: var(--farbe-primaer); }
.blase-text { margin: .1rem 0 0; white-space: pre-line; }
.blase-zeit { display: block; text-align: right; font-size: .7rem; color: var(--farbe-gedaempft); margin-top: .2rem; }
.blase-menue { position: absolute; top: .3rem; right: .3rem; }
.blase-menue summary { list-style: none; display: grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; cursor: pointer;
    font-weight: 700; color: var(--farbe-gedaempft); }
.blase-menue summary::-webkit-details-marker { display: none; }
.blase-menue summary:hover, .blase-menue[open] summary { background: color-mix(in srgb, var(--farbe-primaer) 12%, white); color: var(--farbe-primaer); }
.blase-menue[open] summary::before { content: "✕"; }
.blase-menue[open] summary { font-size: 0; }
.blase-menue[open] summary::before { font-size: .85rem; }
.blase-antwort:has(.blase-menue[open]) { width: 80%; }
.blase-antwort:has(.blase-menue[open]) > .blase-text, .blase-antwort:has(.blase-menue[open]) > .blase-zeit { display: none; }
.blase-bearbeiten { display: flex; flex-direction: column; align-items: flex-end; gap: .4rem; margin-top: 1.4rem; width: calc(100% + 1.9rem);
    position: relative; right: 0; }
.blase-antwort:has(.blase-menue[open]) .blase-menue { position: static; display: flex; flex-direction: column; align-items: flex-end; order: 3; }
.blase-antwort:has(.blase-menue[open]) { display: flex; flex-direction: column; }
.blase-antwort:has(.blase-menue[open]) .blase-menue summary { position: absolute; top: .3rem; right: .3rem; }
.blase-bearbeiten textarea, .chat-eingabe textarea { width: 100%; box-sizing: border-box; padding: .5rem .7rem; font: inherit; border: 1px solid var(--farbe-linie);
    border-radius: 10px; resize: vertical; background: #fff; }
.chat-eingabe { display: flex; gap: .5rem; align-items: flex-end; margin-top: .3rem; }
.chat-senden { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; flex: none; border: 0; border-radius: 50%; cursor: pointer;
    font-size: 1.1rem; color: #fff; background: var(--farbe-primaer); }
.chat-senden:hover { background: var(--farbe-primaer-hover); }
.ueberschneidungen { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .5rem; }
.ueberschneidungen li { display: flex; flex-direction: column; gap: .3rem; padding: .5rem .6rem; border-radius: 8px; background: var(--farbe-grund); }
.ueberschneidungen li form { margin: 0; }
.aufklapp-inhalt .oder { text-align: center; color: var(--farbe-gedaempft); font-size: .85rem; }
.aufklapp-inhalt hr { border: 0; border-top: 1px solid var(--farbe-linie); width: 100%; }
.schnitt-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; margin: 0; }
/* Subtext (z. B. Notiz der Kursidee) folgt dem Umbruch-Schalter der Spalte (Inhaberin 1.10.) */
table.tabelle-aktiv td .zeilen-notiz { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: unset; line-clamp: unset; }
table.tabelle-aktiv td.umbruch .zeilen-notiz { white-space: normal; overflow: visible; overflow-wrap: anywhere; }
.fragen-leiste { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1rem; margin-bottom: 1.2rem; }
.suche-feld { display: flex; gap: .4rem; flex: 1; max-width: 36rem; }
.suche-feld input { flex: 1; min-width: 0; padding: .4rem .7rem; font: inherit; border: 1px solid var(--farbe-linie); border-radius: 999px; }
.fragen-block { padding: 1rem 1.2rem; margin-bottom: 1.2rem; border-radius: var(--rundung); background: var(--farbe-flaeche); border: 1px solid var(--farbe-linie); box-shadow: var(--schatten); }
.fragen-block .karten-kopf { padding-bottom: .6rem; border-bottom: 1px solid var(--farbe-linie); margin-bottom: .2rem; }
.fragen-block .karten-kopf h2 { font-size: 1.1rem; }
.bunny-zuordnen { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-top: .4rem; }
.bunny-zuordnen select, .bunny-zuordnen input { padding: .3rem .5rem; font: inherit; font-size: .85rem; border: 1px solid var(--farbe-linie); border-radius: 4px; min-width: 0; }
.bunny-zuordnen select { flex: 1 1 14rem; } .bunny-zuordnen input { flex: 1 1 12rem; }

/* ===== POSTFACH (T-5.4): Gespraeche links, Verlauf rechts; Sprechblasen wie der Fragen-Chat ===== */
.postfach { display: grid; grid-template-columns: minmax(14rem, 18rem) 1fr; gap: 1.5rem; align-items: start; margin-top: 1rem; }
.postfach-liste { display: flex; flex-direction: column; gap: .3rem; }
.postfach-liste > a { position: relative; display: flex; flex-direction: column; gap: .1rem; padding: .6rem 2.2rem .6rem .8rem; border-radius: 10px;
    text-decoration: none; color: inherit; border: 1px solid var(--farbe-linie); background: #fff; }
.postfach-liste > a:hover { border-color: var(--farbe-primaer); }
.postfach-liste > a.aktiv { border-color: var(--farbe-primaer); box-shadow: inset 3px 0 0 var(--farbe-primaer); }
.postfach-liste .zahl-punkt { position: absolute; top: .6rem; right: .6rem; }
.postfach-gruppe { margin-top: .6rem; }
.postfach-gruppe summary { list-style: none; display: inline-block; cursor: pointer; }
.postfach-gruppe summary::-webkit-details-marker { display: none; }
.postfach-gruppe form { margin-top: .6rem; display: flex; flex-direction: column; gap: .6rem; }
.postfach-auswahl { border: 1px solid var(--farbe-linie); border-radius: 8px; max-height: 14rem; overflow: auto; display: flex; flex-direction: column; gap: .2rem; }
.postfach-verlauf { border: 1px solid var(--farbe-linie); border-radius: 12px; padding: 1rem 1.2rem; background: #fff; min-width: 0; }
.postfach-nachrichten { max-height: 60vh; overflow-y: auto; gap: .5rem; padding: .5rem 0; }
.postfach-zeile { display: flex; flex-direction: column; }
.postfach-zeile .blase-antwort { padding-right: .9rem; }
.postfach-dazu { margin-top: .8rem; }
.zahl-punkt { display: inline-grid; place-items: center; min-width: 1.3rem; height: 1.3rem; padding: 0 .35rem; border-radius: 999px;
    font-size: .72rem; font-weight: 700; color: #fff; background: #c0392b; }
.kopf-nachrichten { position: relative; }
.kopf-nachrichten .zahl-punkt { position: absolute; top: -.45rem; right: -.45rem; }
@media (max-width: 760px) { .postfach { grid-template-columns: 1fr; } }

/* Falle fuer Bots im Partner-Antrag (T-4.5): fuer Menschen unsichtbar */
.falle { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Aktualitaetspruefung im Referentenportal (T-5.3): auffaellige Box oben */
.aktualitaet-box { border: 2px solid #e0a100; background: #fff8e6; border-radius: 12px; padding: 1rem 1.2rem; margin: 1rem 0; }
.aktualitaet-box h2 { margin: 0 0 .3rem; font-size: 1.15rem; }
.aktualitaet-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; padding: .6rem 0; border-top: 1px solid #f0d58a; }
.aktualitaet-zeile strong { flex: 1 1 14rem; }
.aktualitaet-zeile form { margin: 0; }

/* ===== SERVICE-BOT „BiWi“ (T-5.5): Knopf rechts unten auf jeder Seite, Chatfenster darueber ===== */
.bot { position: fixed; right: 1.2rem; bottom: 1.2rem; z-index: 900; }
.bot-knopf { width: 3.6rem; height: 3.6rem; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center;
    color: #fff; background: var(--farbe-primaer); box-shadow: 0 6px 18px rgba(0,0,0,.18); }
.bot-knopf:hover { background: var(--farbe-primaer-hover); }
.bot-knopf svg { width: 2.2rem; height: 2.2rem; }
.bot-fenster { position: absolute; right: 0; bottom: 4.4rem; width: min(24rem, calc(100vw - 2rem)); max-height: min(34rem, 75vh);
    display: flex; flex-direction: column; background: #fff; border-radius: 14px; box-shadow: 0 12px 36px rgba(0,0,0,.22); overflow: hidden; }
.bot-fenster[hidden] { display: none; }
.bot-kopf { display: flex; align-items: baseline; gap: .5rem; padding: .7rem 1rem; color: #fff; background: var(--farbe-primaer); }
.bot-kopf small { opacity: .85; }
.bot-zu { margin-left: auto; border: 0; background: none; color: #fff; font-size: 1rem; cursor: pointer; }
.bot-verlauf { list-style: none; margin: 0; padding: .8rem; overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: .5rem; }
.bot-nachricht { max-width: 85%; padding: .5rem .75rem; border-radius: 12px; line-height: 1.45; white-space: pre-line; font-size: .92rem; }
.bot-von-bot { align-self: flex-start; background: var(--farbe-grund); border-top-left-radius: 4px; }
.bot-von-dir { align-self: flex-end; background: color-mix(in srgb, var(--farbe-primaer) 12%, white); border-top-right-radius: 4px; }
.bot-eingabe { display: flex; gap: .4rem; padding: .6rem .8rem; border-top: 1px solid var(--farbe-linie); }
.bot-eingabe input { flex: 1; padding: .5rem .7rem; border: 1px solid var(--farbe-linie); border-radius: 10px; font: inherit; }
.bot-mensch { padding: 0 .8rem .8rem; display: flex; flex-direction: column; gap: .4rem; }
.bot-mensch-form { display: flex; gap: .4rem; }
.bot-mensch-form input { flex: 1; padding: .4rem .6rem; border: 1px solid var(--farbe-linie); border-radius: 8px; font: inherit; }
@media print { .bot { display: none; } }

/* Sammel-Upload (Inhaberin 1.10.): Bunny-Tabelle bleibt in der Karte – Auswahlfelder schrumpfen mit */
.bunny-tabelle { table-layout: fixed; width: 100%; }
.bunny-tabelle col.c-an { width: 2.2rem; }
.bunny-tabelle col.c-art { width: 9.5rem; }
.bunny-tabelle col.c-treffer { width: 7.5rem; }
.bunny-tabelle select { width: 100%; max-width: 100%; }
.bunny-tabelle td { overflow-wrap: anywhere; }
/* Ueber uns: Willkommensvideo je Referent:in zum Aufklappen (Inhaberin 1.10.) */
.referent-karte > div:last-child { flex: 1; min-width: 0; }
.willkommen-klappe { margin-top: .5rem; }
.willkommen-klappe summary { cursor: pointer; color: var(--farbe-primaer); font-weight: 600; font-size: .92rem; }
.willkommen-klappe .video-rahmen { margin-top: .5rem; }
/* Gutschrift: Berechnung zum Aufklappen (Inhaberin 1.10.) */
.liste tr.detail-zeile td { border-top: 0; padding-top: 0; }
.gutschrift-detail summary { cursor: pointer; color: var(--farbe-primaer); font-size: .88rem; }
.gutschrift-detail table { margin: .5rem 0 .75rem; background: var(--farbe-flaeche, #f6f8fa); border-radius: 8px; }
.gutschrift-detail tfoot td { border-top: 1px solid var(--farbe-linie); }
.gutschrift-detail tr.summe td { border-top: 2px solid var(--farbe-text, #1f2430); }
.liste-kompakt th, .liste-kompakt td { padding: .3rem .5rem; font-size: .88rem; }
form > .liste + .knopf, form > .tabelle-rahmen + .knopf { margin-top: var(--abstand); }

/* ---- Einheitliche Knoepfe (Inhaberin 1.10.): alle wie „Weiter ansehen“ – gefuellt, fett, etwas groesser;
   Zweitknoepfe gleich gross mit Rahmen. Steht am Ende, damit es die aelteren Einzelregeln uebersteuert. ---- */
.knopf { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; padding: .7rem 1.4rem;
    font-weight: 600; line-height: 1.2; border-radius: 10px; transition: background .15s, color .15s, box-shadow .15s; }
.knopf-klein { padding: .55rem 1.1rem; font-size: .9rem; }
.knopf-gross { padding: .9rem 1.8rem; font-size: 1.05rem; }
.knopf-leise, .knopf-zweit { background: #fff; color: var(--farbe-primaer); border: 0; box-shadow: inset 0 0 0 1.5px var(--farbe-primaer); }
.knopf-leise:hover, .knopf-zweit:hover { background: var(--farbe-primaer); color: var(--auf-primaer); box-shadow: inset 0 0 0 1.5px var(--farbe-primaer); }
.ansicht-pfeil { display: inline-flex; align-items: center; margin-left: .4rem; padding: .35rem .8rem; border: 0; border-radius: 10px;
    background: var(--farbe-primaer); color: var(--auf-primaer); font-weight: 600; font-size: .82rem; line-height: 1.2; }
.ansicht-pfeil:hover { background: #fff; color: var(--farbe-primaer); box-shadow: inset 0 0 0 1.5px var(--farbe-primaer); }
/* Hilfe-„?“ neben der Ueberschrift (Inhaberin 1.10.): grauer Kreis, weisses Fragezeichen; Erklaerung klappt darunter auf */
.hilfe summary { background: #8a929c; color: #fff; border: 0; width: 1.25rem; height: 1.25rem; font-size: .75rem; }
.hilfe summary:hover, .hilfe[open] summary { background: var(--farbe-primaer); }
.hilfe.hilfe-bei-titel { display: inline-block; position: relative; top: auto; right: auto; margin-left: .45rem; vertical-align: middle;
    font-size: 1rem; font-weight: 400; letter-spacing: 0; text-transform: none; }
.hilfe.hilfe-bei-titel[open] p { left: 0; right: auto; top: 1.7rem; color: var(--farbe-text); z-index: 30; }

/* ---- Kundenkonto (Inhaberin 1.10.): orange Firmenfarbe ohne Verlauf, Lernlevel ohne Hintergrund, mehr Luft ---- */
.konto-reiter a.aktiv { border-bottom-color: var(--farbe-akzent); }
.konto-reiter a { border-bottom: 3px solid transparent; margin-bottom: -2px; }
.balken { height: .6rem; background: color-mix(in srgb, var(--farbe-akzent) 22%, #eef0f3); }
.balken span, .balken.gutschein span, .balken-akzent span, .level-info .balken span, .level-karte .balken span { background: var(--farbe-akzent); }
.balken.fertig span { background: var(--farbe-kaufen); }
.weiterlernen progress, .mein-kurs progress, .lern-stand progress { accent-color: var(--farbe-akzent); height: .6rem; }
.ring-wert { stroke: var(--farbe-akzent); }
.dash-level { background: var(--farbe-flaeche); }
.konto-seite .dash-oben { gap: calc(var(--abstand) * 1.25); margin-bottom: calc(var(--abstand) * 2); }
.konto-seite .dash-zwei { gap: calc(var(--abstand) * 1.25); margin-bottom: calc(var(--abstand) * 2); }
.konto-seite .dash-karte { padding: calc(var(--abstand) * 1.5); }
.konto-seite .stoebern-leiste, .konto-seite .weiterlernen { margin: 0 0 calc(var(--abstand) * 1.25); }
.weiterlernen { border: 1px solid var(--farbe-linie); text-decoration: none; color: var(--farbe-text); transition: box-shadow .15s; }
.weiterlernen:hover, .stoebern-leiste:hover { box-shadow: var(--schatten-hoch); }
.weiterlernen > div > strong { font-size: 1.05rem; }
.dash-boni .bonus-aktionen { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .4rem; }
/* Guthaben & Rechnungen als Karten */
.guthaben-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: var(--abstand); margin-bottom: calc(var(--abstand) * 2); }
.guthaben-karte { display: flex; flex-direction: column; gap: .45rem; padding: calc(var(--abstand) * 1.25); border: 1px solid var(--farbe-linie);
    border-radius: var(--rundung); background: var(--farbe-flaeche); box-shadow: var(--schatten); }
.guthaben-karte .etikett-klein { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--farbe-gedaempft); }
.guthaben-karte strong.wert { font-size: 1.6rem; color: var(--farbe-primaer); line-height: 1.1; }
.guthaben-karte.aufladen { justify-content: center; align-items: flex-start; background: color-mix(in srgb, var(--farbe-akzent) 14%, white);
    border-color: color-mix(in srgb, var(--farbe-akzent) 45%, white); }
.abschnitt-kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 1rem; margin: 0 0 var(--abstand); }
.abschnitt-kopf h2 { margin: 0; }

/* ---- Aktionen (Inhaberin 1.10.): Kopf in der Hausfarbe, Abschnitte als helle Flaechen, Karten gleich hoch und ueber die
   ganze Breite, Gutscheine groesser, 10 + 1 deutlich in Orange ---- */
.aktionen-kopf { background: var(--farbe-primaer); position: relative; overflow: hidden; }
.aktionen-kopf::after { content: ""; position: absolute; right: -6rem; top: -6rem; width: 22rem; height: 22rem; border-radius: 50%;
    background: color-mix(in srgb, var(--farbe-akzent) 35%, transparent); }
.aktionen-kopf .bereich { position: relative; z-index: 1; }
.aktionen-seite .aktionen-abschnitt { background: var(--farbe-flaeche); border: 1px solid var(--farbe-linie); border-radius: calc(var(--rundung) * 1.3);
    padding: calc(var(--abstand) * 2); margin: 0 0 calc(var(--abstand) * 1.75); box-shadow: var(--schatten); }
.aktionen-seite .aktionen-abschnitt h2 { margin-top: 0; font-size: 1.6rem; }
.aktionen-seite .aktion-raster { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: calc(var(--abstand) * 1.25); margin-bottom: 0; }
.aktionen-seite .block-karte { padding: calc(var(--abstand) * 1.4); height: 100%; box-sizing: border-box; }
.aktionen-seite .block-karte form { margin-top: auto; }
.aktionen-seite .block-karte .knopf { width: 100%; }
.aktionen-seite .aktion-summe { white-space: nowrap; }
.aktionen-seite .aktion-sparen:empty { visibility: hidden; }
.aktionen-seite .gutschein-raster { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.aktionen-seite .gutschein-karte { min-height: 13rem; padding: calc(var(--abstand) * 1.6); }
.aktionen-seite .gutschein-wert { font-size: 3.2rem; }
.aktionen-seite .zehn-plus-eins { background: color-mix(in srgb, var(--farbe-akzent) 22%, white); border-color: color-mix(in srgb, var(--farbe-akzent) 55%, white); }
.aktionen-seite .zehn-plus-eins h2 { font-size: 2.2rem; color: var(--farbe-primaer); }
.aktionen-seite .zehn-plus-eins p { font-size: 1.05rem; max-width: 36rem; }
.aktionen-seite .stempelkarte { grid-template-columns: repeat(6, 3.2rem); gap: .6rem; }
.aktionen-seite .stempelkarte li { width: 3.2rem; height: 3.2rem; font-size: 1.05rem; }
/* Felder nebeneinander (Inhaberin 1.10.): „formular formular-zeile“ war eine Spalte mit align-items: flex-end – dadurch hingen
   die Felder einsam rechts. Jetzt: Felder links nebeneinander, Knopf in derselben Zeile. */
.formular.formular-zeile, .formular-zeile { flex-direction: row; flex-wrap: wrap; align-items: flex-end; justify-content: flex-start; }
.formular-zeile label { flex: 1 1 12rem; max-width: 22rem; }
.formular-zeile label.auswahl { flex: 0 0 auto; }
.formular-zeile input, .formular-zeile select { padding: .55rem .6rem; border: 1px solid var(--farbe-linie); border-radius: 8px; font: inherit; width: 100%; box-sizing: border-box; }
.formular-zeile label.auswahl input { width: auto; }
.formular-zeile > div, .formular-zeile > button { flex: 0 0 auto; }
/* Mehrere Felder als Raster (Partner-Organisationen u. a.): 3 Spalten, schmal untereinander; Haken und Knopf in eigener Zeile */
.formular.formular-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: .8rem 1.2rem; align-items: end; margin: .8rem 0 1.2rem; }
.formular-raster label { display: flex; flex-direction: column; gap: .25rem; color: var(--farbe-gedaempft); font-size: .92rem; }
.formular-raster input, .formular-raster select { padding: .55rem .6rem; border: 1px solid var(--farbe-linie); border-radius: 8px; font: inherit; width: 100%; box-sizing: border-box; }
.formular-raster label.auswahl { flex-direction: row; align-items: center; gap: .5rem; color: var(--farbe-text); }
.formular-raster label.auswahl input { width: auto; }
.formular-raster > div:last-child { grid-column: 1 / -1; display: flex; justify-content: flex-end; }
.formular-raster .breit { grid-column: 1 / -1; }
.abschnitt-klapp { border: 1px solid var(--farbe-linie); border-radius: var(--rundung); padding: .2rem 1rem; margin: 0 0 .8rem; background: var(--farbe-flaeche); }
.abschnitt-klapp > summary { cursor: pointer; padding: .7rem 0; }
.abschnitt-klapp[open] > summary { border-bottom: 1px solid var(--farbe-linie); }

/* Partner-Antrag (Inhaberin 1.10.): Kopf mit vier Schritten, links Vorteile, rechts das Formular */
.partner-kopf { background: var(--farbe-primaer); color: var(--auf-primaer); padding: calc(var(--abstand) * 3) 0 calc(var(--abstand) * 2.5); position: relative; overflow: hidden; }
.partner-kopf::after { content: ""; position: absolute; left: -5rem; bottom: -8rem; width: 20rem; height: 20rem; border-radius: 50%;
    background: color-mix(in srgb, var(--farbe-akzent) 30%, transparent); }
.partner-kopf-innen { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: calc(var(--abstand) * 2); align-items: center; padding-top: 0; padding-bottom: 0; }
.partner-kopf h1 { color: var(--auf-primaer); font-size: clamp(1.9rem, 3.6vw, 2.6rem); margin: .3rem 0 .7rem; }
.partner-kopf p { font-size: 1.08rem; opacity: .95; max-width: 36rem; }
.partner-kopf .start-etikett { color: var(--auf-primaer); opacity: .85; }
.partner-schritte { list-style: none; counter-reset: schritt; margin: 0; padding: 0; display: grid; gap: .7rem; }
.partner-schritte li { counter-increment: schritt; display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); gap: .1rem .8rem; align-items: center;
    background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .25); border-radius: 12px; padding: .65rem .9rem; }
.partner-schritte li::before { content: counter(schritt); grid-row: span 2; width: 2.2rem; height: 2.2rem; border-radius: 50%; display: grid; place-items: center;
    background: var(--farbe-akzent); color: var(--farbe-text); font-weight: 700; }
.partner-schritte span { font-size: .88rem; opacity: .9; }
.partner-antrag-raster { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: calc(var(--abstand) * 2); align-items: start; }
.partner-vorteile h2 { margin-top: .5rem; }
.partner-antrag-karte { box-shadow: var(--schatten-hoch); margin-top: calc(var(--abstand) * -3); position: relative; z-index: 2; }
.partner-antrag-karte h2 { margin-top: 0; }
@media (max-width: 860px) { .partner-kopf-innen, .partner-antrag-raster { grid-template-columns: 1fr; } .partner-antrag-karte { margin-top: 0; } }
/* Referent:in im Adminboard (Inhaberin 1.10.): Kurse und Kooperationen als Tabelle ueber die ganze Breite */
.person-seite.kurs-block { display: flex; flex-direction: column; gap: calc(var(--abstand) * 1.75); }
.person-seite.kurs-block .liste { width: 100%; }
.kooperationen td:first-child { width: 30%; }
.notiz-zeile { display: flex; gap: .5rem; align-items: center; }
.notiz-zeile input { flex: 1; min-width: 0; padding: .5rem .6rem; border: 1px solid var(--farbe-linie); border-radius: 8px; font: inherit; }
.auswahl-suche { margin-bottom: .35rem; padding: .5rem .6rem; border: 1px solid var(--farbe-linie); border-radius: 8px; font: inherit; width: 100%; box-sizing: border-box; }
/* Kategorien: Symbol mit Vorschau */
table.kategorien col.c-symbol { width: 15rem; }
.symbol-zelle { display: flex; align-items: center; gap: .5rem; }
.symbol-vorschau { flex: none; width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: 8px;
    background: color-mix(in srgb, var(--farbe-primaer) 8%, white); color: var(--farbe-primaer); }
.symbol-vorschau svg { width: 1.3rem; height: 1.3rem; }
.symbol-zelle select { min-width: 0; flex: 1; padding: .35rem; border: 1px solid var(--farbe-linie); border-radius: 6px; font: inherit; font-size: .88rem; }

/* Themenkacheln der Startseite (Inhaberin 1.10.): eigenes Symbol uebergross rechts unten, 30 % sichtbar, in der Farbe der Kachel */
.start-thema { position: relative; overflow: hidden; }
.start-thema .thema-wasserzeichen { position: absolute; right: -1.6rem; bottom: -1.8rem; width: 8.5rem; height: 8.5rem; color: var(--akzent);
    opacity: .3; pointer-events: none; transition: transform .3s; }
.start-thema:hover .thema-wasserzeichen { transform: rotate(-8deg) scale(1.05); }
.start-thema-kopf, .start-thema p { position: relative; z-index: 1; }
.start-thema p { max-width: 75%; }

/* Kursseite im Adminboard (Inhaberin 1.10.): Medien als Karten – links Video, rechts Stand und Aktionen */
.medien-karte { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: calc(var(--abstand) * 1.5); align-items: start;
    padding: calc(var(--abstand) * 1.25); border: 1px solid var(--farbe-linie); border-radius: var(--rundung); background: var(--farbe-flaeche);
    margin-bottom: var(--abstand); }
.medien-karte-spalte { grid-template-columns: minmax(0, 1fr); gap: .6rem; }
.medien-karte h3 { margin: 0; font-size: 1.05rem; }
.medien-leer { aspect-ratio: 16 / 9; display: grid; place-items: center; border-radius: 10px; color: var(--farbe-gedaempft);
    background: repeating-linear-gradient(45deg, #f3f5f8 0 12px, #eef1f5 12px 24px); }
.medien-info { display: flex; flex-direction: column; gap: .8rem; }
.medien-info p { margin: 0; }
.medien-daten { display: grid; grid-template-columns: max-content 1fr; gap: .3rem 1rem; margin: 0; font-size: .92rem; }
.medien-daten dt { color: var(--farbe-gedaempft); }
.medien-daten dd { margin: 0; }
.medien-ersetzen { border-top: 1px solid var(--farbe-linie); padding-top: .6rem; }
.medien-ersetzen > summary { cursor: pointer; font-weight: 600; color: var(--farbe-primaer); }
.medien-ersetzen form { margin-top: .6rem; }
.medien-ersetzen .schnell-zeile input[type=url], .medien-ersetzen .schnell-zeile input[type=file] { flex: 1; min-width: 0; }
@media (max-width: 900px) { .medien-karte { grid-template-columns: 1fr; } }
/* Benutzerverwaltung: gewaehltes Konto als Karte mit „Schliessen“ (Inhaberin 1.10.) */
.konto-detail { border: 1px solid var(--farbe-linie); border-radius: var(--rundung); padding: calc(var(--abstand) * 1.25);
    margin: 0 0 calc(var(--abstand) * 1.5); background: color-mix(in srgb, var(--farbe-primaer) 3%, white); }
.konto-detail h2 { font-size: 1.15rem; }
.mitarbeiter-tabelle input { width: 100%; box-sizing: border-box; padding: .45rem .55rem; border: 1px solid var(--farbe-linie); border-radius: 8px; font: inherit; }
.zeilen-klapp { display: inline-block; }
.zeilen-klapp > summary { list-style: none; }
.zeilen-klapp > summary::-webkit-details-marker { display: none; }
.zeilen-klapp[open] form { margin-top: .5rem; white-space: normal; }
.hilfe-felder textarea { width: 100%; box-sizing: border-box; padding: .55rem .6rem; border: 1px solid var(--farbe-linie); border-radius: 8px; font: inherit; }
.hilfe-felder { margin: 0 0 .8rem; }
/* Team im Referentenportal (Inhaberin 1.10.): links die Helfer:innen, rechts die Einladung als Karte */
.team-raster { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: calc(var(--abstand) * 1.5); align-items: start; margin-top: var(--abstand); }
.team-raster .dash-karte h2 { margin: 0 0 .8rem; }
.team-leer { padding: 1.2rem; border: 1px dashed var(--farbe-linie); border-radius: 12px; text-align: center; }
.team-leer p { margin: .2rem 0; }
.team-einladen .formular label { font-size: .92rem; }
.team-einladen .formular input, .team-einladen .formular select { width: 100%; box-sizing: border-box; }
.team-einladen .knopf { align-self: flex-start; }
@media (max-width: 860px) { .team-raster { grid-template-columns: 1fr; } }
/* Hinweis „erst bewerten“ (Inhaberin 1.10.) */
.bewerten-dialog { max-width: 28rem; border: 0; border-radius: var(--rundung); padding: calc(var(--abstand) * 1.5); box-shadow: var(--schatten-hoch); }
.bewerten-dialog::backdrop { background: rgba(16, 24, 40, .45); }
.bewerten-dialog h2 { margin-top: 0; }

/* Ruecktrittsformular (Inhaberin 1.10.): links Erlaeuterung, rechts das Formular wie die Vorlage */
.ruecktritt-raster { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr); gap: calc(var(--abstand) * 2); align-items: start; margin-top: var(--abstand); }
.ruecktritt-info { padding: calc(var(--abstand) * 1.5); border-radius: var(--rundung); background: color-mix(in srgb, var(--farbe-primaer) 6%, white);
    border: 1px solid color-mix(in srgb, var(--farbe-primaer) 18%, white); font-size: .95rem; line-height: 1.6; }
.ruecktritt-info h2 { margin-top: 0; color: var(--farbe-primaer); }
.ruecktritt-links { display: flex; flex-wrap: wrap; gap: .6rem; }
.ruecktritt-links a { padding: .45rem .9rem; border-radius: 999px; background: #fff; border: 1px solid var(--farbe-linie); text-decoration: none; font-weight: 600; }
.ruecktritt-karte h2 { margin-top: 0; color: var(--farbe-primaer); }
.ruecktritt-karte h3 { margin: .6rem 0 0; font-size: 1rem; border-bottom: 1px solid var(--farbe-linie); padding-bottom: .3rem; }
.ruecktritt-an { line-height: 1.5; }
.ruecktritt-karte textarea { width: 100%; box-sizing: border-box; padding: .55rem .6rem; border: 1px solid var(--farbe-linie); border-radius: 8px; font: inherit; }
.ruecktritt-karte input[readonly] { background: var(--farbe-grund); }
.ruecktritt-karte .unterschrift { align-items: flex-start; padding: .8rem; border-radius: 10px; background: color-mix(in srgb, var(--farbe-akzent) 14%, white); }
.ruecktritt-karte .unterschrift input { margin-top: .25rem; }
@media (max-width: 900px) { .ruecktritt-raster { grid-template-columns: 1fr; } }
.sofort-senden select { padding: .4rem .5rem; border: 1px solid var(--farbe-linie); border-radius: 8px; font: inherit; font-size: .9rem; }
.chip-pruefung { background: color-mix(in srgb, var(--farbe-primaer) 8%, white); } .chip-faellig { background: color-mix(in srgb, var(--farbe-fehler) 12%, white); color: var(--farbe-fehler); }

/* ---- Nachrichten (Inhaberin 1.10.): neue Nachricht, wichtige oben, Bilder/Dokumente, Abstimmungen, Bildbibliothek ---- */
.postfach-neu { margin-bottom: .6rem; }
.postfach-neu > summary { list-style: none; display: inline-flex; cursor: pointer; }
.postfach-neu > summary::-webkit-details-marker { display: none; }
.postfach-neu-form { margin-top: .6rem; padding: .8rem; border: 1px solid var(--farbe-linie); border-radius: 12px; background: #fff; gap: .6rem; }
.postfach-neu-form textarea { width: 100%; box-sizing: border-box; padding: .5rem; border: 1px solid var(--farbe-linie); border-radius: 8px; font: inherit; }
.an-wahl { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .2rem; }
.an-wahl legend { font-weight: 600; margin-bottom: .2rem; }
.kolleginnen-wahl > summary { cursor: pointer; padding: .45rem .6rem; border: 1px solid var(--farbe-linie); border-radius: 8px; background: #fff; }
.postfach-auswahl { padding: .4rem; }
.postfach-auswahl input[type=search], .bildwahl input[type=search] { width: 100%; box-sizing: border-box; padding: .4rem .5rem; border: 1px solid var(--farbe-linie); border-radius: 6px; font: inherit; margin-bottom: .3rem; }
.postfach-angeheftet { margin: 0 0 .8rem; padding: .6rem; border-radius: 12px; background: color-mix(in srgb, var(--farbe-akzent) 14%, white);
    border: 1px solid color-mix(in srgb, var(--farbe-akzent) 45%, white); }
.postfach-angeheftet::before { content: "📌 Wichtig"; display: block; font-weight: 700; font-size: .85rem; margin-bottom: .3rem; }
.anheft-zeichen { margin-left: .3rem; }
.anheften-form { margin-top: .3rem; text-align: right; }
.anhaenge { display: flex; flex-wrap: wrap; gap: .4rem; margin: .4rem 0; }
.anhang-bild img { display: block; max-width: 14rem; max-height: 11rem; border-radius: 8px; border: 1px solid var(--farbe-linie); }
.anhang-datei { display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .6rem; border-radius: 8px; background: #fff;
    border: 1px solid var(--farbe-linie); text-decoration: none; font-size: .9rem; }
.umfrage { display: flex; flex-direction: column; gap: .35rem; margin: .4rem 0; min-width: min(18rem, 70vw); }
.umfrage form { margin: 0; }
.umfrage-antwort { position: relative; width: 100%; display: flex; justify-content: space-between; gap: .6rem; padding: .45rem .7rem; border-radius: 8px;
    border: 1px solid var(--farbe-linie); background: linear-gradient(90deg, color-mix(in srgb, var(--farbe-akzent) 35%, white) var(--anteil), #fff var(--anteil));
    font: inherit; text-align: left; cursor: pointer; }
.umfrage-antwort.gewaehlt { border-color: var(--farbe-primaer); font-weight: 600; }
.umfrage-zahl { color: var(--farbe-gedaempft); font-size: .85rem; white-space: nowrap; }
.chat-eingabe.mit-extras { flex-wrap: wrap; }
.chat-eingabe.mit-extras textarea { flex: 1 1 calc(100% - 4rem); }
.nachricht-extras { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: flex-start; gap: .5rem; margin-top: .4rem; }
.extras-knopf { display: inline-flex; align-items: center; gap: .3rem; padding: .3rem .7rem; border-radius: 999px; border: 1px solid var(--farbe-linie);
    background: #fff; cursor: pointer; font-size: .85rem; list-style: none; }
.extras-knopf::-webkit-details-marker { display: none; }
.extras-umfrage[open] { flex-basis: 100%; }
.umfrage-felder { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: .4rem; margin-top: .4rem; }
.umfrage-felder input:not([type=checkbox]) { padding: .4rem .5rem; border: 1px solid var(--farbe-linie); border-radius: 6px; font: inherit; }
.umfrage-felder input[name=frage] { grid-column: 1 / -1; }
.bildwahl { flex-basis: 100%; }
.bildwahl[open] { padding: .5rem; border: 1px solid var(--farbe-linie); border-radius: 10px; background: #fff; }
.bildwahl-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); gap: .4rem; max-height: 16rem; overflow: auto; }
.bildwahl-bild { position: relative; display: flex; flex-direction: column; gap: .2rem; font-size: .75rem; cursor: pointer; }
.bildwahl-bild img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; border: 2px solid transparent; }
.bildwahl-bild input { position: absolute; top: .3rem; left: .3rem; }
.bildwahl-bild input:checked + img { border-color: var(--farbe-primaer); }
.wichtig-haken { flex-basis: 100%; font-size: .9rem; }
.konto-reiter .zahl-punkt { margin-left: .35rem; } .benutzer-knopf .zahl-punkt { margin-left: .3rem; } .menue-punkt .zahl-punkt { margin-left: auto; } .benutzer-liste .zahl-punkt { margin-left: .3rem; }
/* BiWiBot-Kopf (Inhaberin 1.10.): Smiley, Name, darunter „Service-Bot von Business Wissen“ */
.bot-kopf { align-items: center; gap: .6rem; }
.bot-gesicht svg { width: 2.1rem; height: 2.1rem; display: block; }
.bot-name { display: flex; flex-direction: column; line-height: 1.15; flex: 1; }
.bot-name strong { font-size: 1.05rem; }
.bot-name small { font-size: .78rem; }
.bot-faq { display: block; text-align: center; font-size: .85rem; margin-top: .4rem; }
/* FAQ (Inhaberin 1.10.): Inhaltsverzeichnis links (mitlaufend), Fragen zum Aufklappen rechts */
.faq-raster { display: grid; grid-template-columns: minmax(14rem, 18rem) minmax(0, 1fr); gap: calc(var(--abstand) * 2); align-items: start; margin-top: var(--abstand); }
.faq-inhalt { position: sticky; top: 5.5rem; max-height: calc(100vh - 7rem); overflow: auto; padding: 1rem 1.2rem; border-radius: var(--rundung);
    background: var(--farbe-flaeche); border: 1px solid var(--farbe-linie); font-size: .9rem; }
.faq-inhalt ol { list-style: none; margin: .5rem 0 0; padding: 0; }
.faq-inhalt > ol > li { margin-bottom: .6rem; }
.faq-inhalt > ol > li > a { font-weight: 700; text-decoration: none; }
.faq-inhalt ol ol { margin: .25rem 0 0 .6rem; padding-left: .6rem; border-left: 2px solid var(--farbe-linie); }
.faq-inhalt ol ol a { color: var(--farbe-gedaempft); text-decoration: none; }
.faq-inhalt ol ol a:hover { color: var(--farbe-primaer); }
.faq-bereich { margin-bottom: calc(var(--abstand) * 2); scroll-margin-top: 6rem; }
.faq-frage { border: 1px solid var(--farbe-linie); border-radius: 12px; background: var(--farbe-flaeche); margin-bottom: .5rem; scroll-margin-top: 6rem; }
.faq-frage > summary { cursor: pointer; padding: .85rem 1.1rem; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.faq-frage > summary::-webkit-details-marker { display: none; }
.faq-frage > summary::after { content: "+"; color: var(--farbe-primaer); font-size: 1.2rem; line-height: 1; }
.faq-frage[open] > summary::after { content: "–"; }
.faq-frage p { margin: 0; padding: 0 1.1rem 1rem; line-height: 1.6; white-space: pre-line; }
@media (max-width: 860px) { .faq-raster { grid-template-columns: 1fr; } .faq-inhalt { position: static; max-height: none; } }

/* ---- Rueckmeldung 1.10. abends ---- */
/* Hauptseite, Lebenszyklus: Linie in Petrol, Punkt in Orange */
.lz-linie { stroke: color-mix(in srgb, var(--farbe-primaer) 45%, transparent); }
.lz-weg { stroke: var(--farbe-primaer); }
.lz-punkt { background: var(--farbe-akzent); box-shadow: 0 0 0 5px color-mix(in srgb, var(--farbe-akzent) 30%, transparent); }
/* alle Knoepfe deutlich runder */
.knopf, .ansicht-pfeil, .knopf-symbol, .extras-knopf, .aktionen-sprung a, .ruecktritt-links a { border-radius: 999px; }
/* gewaehlter Reiter in Petrol unterstrichen */
.konto-reiter a.aktiv { border-bottom-color: var(--farbe-primaer); }
/* alle Haekchen und Auswahlpunkte gruen */
input[type=checkbox], input[type=radio] { accent-color: var(--farbe-kaufen); }
/* Admin-Ansicht: schwarze Leiste oben im Kopf statt fest unten (im Glas-Kopf rutschte „fixed“ ueber den Inhalt) */
.kopfleiste .ansicht-band { position: static; order: -1; flex: 0 0 100%; width: 100%; box-sizing: border-box; margin: 0 0 .5rem;
    padding: .45rem 1rem; border-radius: 12px; box-shadow: none; font-size: .88rem; line-height: 1.4; }
.kopfleiste .ansicht-band .knopf { padding: .35rem .9rem; font-size: .82rem; }
body:has(.ansicht-band) { padding-bottom: 0; }
.kopfleiste:has(.ansicht-band) { flex-wrap: wrap; }
.partner-vorteile .haken-liste { grid-template-columns: 1fr; margin-bottom: 1rem; }
.haken-liste li::before { background: var(--farbe-kaufen); }
/* Kategorien-Tabelle bleibt in der Karte */
table.kategorien { width: 100%; max-width: 100%; table-layout: fixed; }
table.kategorien col.c-symbol { width: 12rem; }
table.kategorien input, table.kategorien textarea { width: 100%; box-sizing: border-box; min-width: 0; }
/* zwei kleine Formulare nebeneinander (Auszahlungen): je Feld + Knopf in einer Zeile */
.formular-zeile > form.formular-zeile { flex: 0 1 auto; flex-wrap: nowrap; gap: .6rem; }
.formular-zeile > form.formular-zeile label { flex: 0 1 15rem; min-width: 11rem; }
div.formular-zeile:has(> form) { gap: 1rem 2.5rem; margin-bottom: var(--abstand); padding: 1rem 1.2rem; border-radius: var(--rundung);
    background: color-mix(in srgb, var(--farbe-primaer) 4%, white); border: 1px solid var(--farbe-linie); }
/* Mein Guthaben: Karten fuellen die Breite, Balken schlicht in Petrol, Aktionskarte als Farbflaeche ohne Unterstreichung */
.guthaben-raster { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.guthaben-karte .balken { height: .5rem; background: #eceff3; }
.guthaben-karte .balken span { background: var(--farbe-primaer); }
a.guthaben-karte, a.guthaben-karte * { text-decoration: none; }
.guthaben-karte.aufladen { background: var(--farbe-primaer); border-color: var(--farbe-primaer); color: #fff; position: relative; overflow: hidden; }
.guthaben-karte.aufladen::after { content: ""; position: absolute; right: -2.5rem; bottom: -2.5rem; width: 8rem; height: 8rem; border-radius: 50%;
    background: color-mix(in srgb, var(--farbe-akzent) 45%, transparent); }
.guthaben-karte.aufladen .etikett-klein { color: rgba(255, 255, 255, .8); }
.guthaben-karte.aufladen strong { color: #fff; font-size: 1.15rem; position: relative; z-index: 1; }
.guthaben-karte.aufladen .knopf { background: #fff; color: var(--farbe-primaer); position: relative; z-index: 1; }
/* Neue Nachricht gross im rechten Bereich (Inhaberin 1.10.) */
.postfach-neu-knopf { align-self: flex-start; margin-bottom: .6rem; }
.postfach-schreiben .postfach-neu-form { border: 0; padding: 0; gap: .9rem; }
.postfach-schreiben textarea { min-height: 10rem; }
.postfach-schreiben .postfach-auswahl { max-height: 22rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: .25rem .8rem; }
.postfach-schreiben .postfach-auswahl input[type=search] { grid-column: 1 / -1; }
.postfach-schreiben .postfach-auswahl label { align-items: flex-start; }
.postfach-schreiben .postfach-auswahl small { display: block; }
.postfach-schreiben .an-wahl { flex-direction: row; gap: 1.5rem; }
/* „Bereit fuer den naechsten Schritt?“ mit Stockfoto (Unsplash-Lizenz, Foto irfWcn-sF48), Petrol-Verlauf fuer Lesbarkeit */
.start-aufruf { position: relative; overflow: hidden; border-radius: calc(var(--rundung) * 1.5); margin: 0 auto calc(var(--abstand) * 3);
    max-width: var(--breite); color: #fff;
    background: linear-gradient(100deg, color-mix(in srgb, var(--farbe-primaer) 92%, transparent) 0%, color-mix(in srgb, var(--farbe-primaer) 70%, transparent) 45%,
        rgba(0, 0, 0, .15) 100%), url("/bilder/naechster-schritt.jpg") center 35% / cover no-repeat; }
.start-aufruf h2 { color: #fff; text-shadow: 0 2px 12px rgba(0, 0, 0, .25); }
.start-aufruf .knopf { background: var(--farbe-akzent); color: var(--farbe-text); }
.start-aufruf .knopf:hover { background: #fff; color: var(--farbe-primaer); }
/* Seitenkopf wie Aktionen (Ueber uns, Vorteile, Kurspakete) */
.seiten-held { margin-bottom: calc(var(--abstand) * 1.75); }
.aktionen-seite .paket-block .bereich-kopf h2 { margin: 0; }
.aktionen-seite .referenten-raster { margin-top: 0; }
.referent-firma { margin: 0; color: var(--farbe-gedaempft); font-size: .88rem; font-weight: 500; } .kurs-referent-firma { display: block; color: var(--farbe-gedaempft); font-size: .8rem; } dd .referent-firma { display: block; }
.foto-zeile { display: flex; gap: 1rem; align-items: flex-start; } .foto-zeile > div { display: flex; flex-direction: column; gap: .5rem; } .referent-foto-admin { width: 6rem; height: 6rem; object-fit: cover; border-radius: 50%; border: 1px solid var(--farbe-linie); }
.foto-zeile { display: flex; gap: 1rem; align-items: flex-start; } .foto-zeile > div { display: flex; flex-direction: column; gap: .5rem; } .referent-foto-admin { width: 6rem; height: 6rem; object-fit: cover; border-radius: 50%; border: 1px solid var(--farbe-linie); }
.referent-foto { flex: none; width: 4.5rem; height: 4.5rem; border-radius: 50%; object-fit: cover; border: 3px solid #fff; box-shadow: var(--schatten); } .referent-foto.gross { width: 7.5rem; height: 7.5rem; }

/* VORSCHALTSEITE (T-6.2a): Inhalt wie vereinbart (Inhaberin 2.10.). Optik aus den eigenen Seiten:
   Hintergrund wie hinter den Themen der Startseite (wandernde Farbflaechen + Linienraster), in der Mitte eine grosse
   Karte im Verlauf wie Aktionen-Kopf/Gutschein-Karten mit Deko-Kreisen, weisser Knopf; Testzugang klein als Glaskarte;
   Fuss nur mit Pflichtlinks. Bei „Bewegung reduzieren“ steht alles still. */
.vorschalt-seite { background: var(--farbe-grund); }
.vorschalt-seite .kopfleiste { background: transparent; border-bottom-color: transparent; }
.vorschalt-buehne {
    position: relative; isolation: isolate; overflow: hidden;
    min-height: calc(100svh - var(--kopf-h, 65px) - 3.5rem);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: calc(var(--abstand) * 2) var(--abstand);
    text-align: center;
}
.vorschalt-buehne::before {
    content: ""; position: absolute; inset: -20%; z-index: -2; pointer-events: none;
    background:
        radial-gradient(38% 42% at 18% 30%, color-mix(in srgb, var(--farbe-verlauf-von) 22%, transparent), transparent 70%),
        radial-gradient(34% 40% at 82% 22%, color-mix(in srgb, #0a7d8f 34%, transparent), transparent 70%),
        radial-gradient(40% 44% at 62% 82%, color-mix(in srgb, var(--farbe-primaer) 24%, transparent), transparent 70%),
        radial-gradient(30% 34% at 8% 88%, color-mix(in srgb, var(--farbe-akzent) 30%, transparent), transparent 70%);
    filter: blur(40px) saturate(1.1);
    animation: themen-wandern 26s ease-in-out infinite alternate;
}
.vorschalt-buehne::after {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background-image:
        linear-gradient(color-mix(in srgb, var(--farbe-primaer) 9%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--farbe-primaer) 9%, transparent) 1px, transparent 1px);
    background-size: 44px 44px;
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000 30%, transparent 80%);
    mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000 30%, transparent 80%);
}
.vorschalt-held {
    position: relative; overflow: hidden;
    width: min(100%, 52rem);
    padding: clamp(2.2rem, 6vw, 4.5rem) clamp(1.4rem, 6vw, 5rem);
    border-radius: calc(var(--rundung) * 2.2);
    color: var(--auf-primaer);
    background: linear-gradient(120deg, var(--farbe-primaer), #0a7d8f 50%, color-mix(in srgb, var(--farbe-verlauf-von) 75%, var(--farbe-primaer)));
    box-shadow: 0 30px 60px -24px color-mix(in srgb, var(--farbe-primaer) 65%, transparent), var(--schatten-hoch);
    transition: transform .3s ease;
}
.vorschalt-held:hover { transform: translateY(-4px) rotate(-.4deg); }
.vorschalt-held > * { position: relative; }
.vorschalt-kreis { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .14); pointer-events: none; }
.vorschalt-kreis.eins { width: 15rem; height: 15rem; right: -5rem; top: -5rem; }
.vorschalt-kreis.zwei { width: 9rem; height: 9rem; left: -3rem; bottom: -3.5rem; background: rgba(255, 255, 255, .10); }
.vorschalt-held h1 { font-size: clamp(2.1rem, 5.2vw, 4rem); line-height: 1.05; letter-spacing: -.025em; margin: 0 0 1.2rem; color: var(--auf-primaer); }
.vorschalt-held p { font-size: clamp(1.05rem, 2vw, 1.3rem); line-height: 1.55; opacity: .95; margin: 0 auto calc(var(--abstand) * 2.2); max-width: 34rem; }
.vorschalt-knopf {
    border-radius: 999px;
    padding: 1rem 2.4rem;
    font-size: 1.15rem;
    font-weight: 700;
    margin-top: 0; align-self: center;
    box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .35);
    transition: transform .15s ease, box-shadow .15s ease;
}
.vorschalt-knopf:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 14px 30px -8px rgba(0, 0, 0, .4); }
@media (prefers-reduced-motion: reduce) {
    .vorschalt-buehne::before { animation: none; }
    .vorschalt-held, .vorschalt-knopf { transition: none; }
    .vorschalt-held:hover, .vorschalt-knopf:hover { transform: none; }
}
.vorschalt-test { margin-top: calc(var(--abstand) * 2.5); max-width: 26rem; font-size: .85rem; color: var(--farbe-gedaempft);
    padding: .45rem 1.1rem; border-radius: 999px; background: rgba(255, 255, 255, .55); backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, .7); }
.vorschalt-test p { margin: .6rem 0 0; }
.vorschalt-test[open] { padding: .9rem 1.2rem 1rem; border-radius: var(--rundung); background: rgba(255, 255, 255, .8); box-shadow: var(--schatten); }
.vorschalt-test summary { cursor: pointer; list-style: none; font-weight: 600; color: var(--farbe-primaer); }
.vorschalt-test summary::-webkit-details-marker { display: none; }
.vorschalt-test .meldung { margin: .6rem 0 0; }
.vorschalt-code { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; margin-top: .6rem; }
.vorschalt-code input { width: 12rem; max-width: 100%; padding: .35rem .8rem; border: 1px solid var(--farbe-linie); border-radius: 999px; font: inherit; }
.fuss-schlank { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 1.4rem; padding: .9rem var(--abstand); font-size: .8rem; }
.fuss-schlank a { color: var(--farbe-gedaempft); }
.vorschalt-seite .fussleiste { padding: 0; background: transparent; border: 0; }