/*
  FlexAI: ein Stylesheet, keine Inline-Stile (CSP style-src 'self').
  Basis (Schrift, Farben hell/dunkel, Abstände, Knöpfe) wortgleich aus der Website web/src/styles/global.css.
  Der Test tests/test_oberflaeche.py prüft, dass die :root-Variablen beider Dateien gleich sind.
  Darüber das Portal-Layout nach dem Vorbild der Videoauswertung (E6): Seitenleiste, Karten, Schritt-Leiste.
*/

/* Schrift: Geist Sans variabel, lokal (OFL 1.1, Lizenz: /static/fonts/OFL-Geist.txt). */
@font-face {
  font-family: "Geist";
  src: url("../fonts/Geist-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
/* Schriften für den Text im Video (OFL 1.1, Lizenzen: /static/fonts/OFL-*.txt), wie medien.SCHRIFTEN */
@font-face { font-family: "Playfair Display"; src: url("../fonts/PlayfairDisplay.woff2") format("woff2"); font-weight: 400 900; font-display: swap; }
@font-face { font-family: "Bebas Neue"; src: url("../fonts/BebasNeue-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Caveat"; src: url("../fonts/Caveat.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Space Mono"; src: url("../fonts/SpaceMono-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face {
  font-family: "Geist Fallback";
  src: local("Arial");
  size-adjust: 104.9%;
  ascent-override: 95.8%;
  descent-override: 28.1%;
  line-gap-override: 0%;
}

/* --- Basis wie Website ------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
:root {
  color-scheme: light dark;
  --bg: #FFFFFF; --surface: #F5F6F8; --text: #111318; --muted: #5B6170;
  --accent: #2450E0; --accent-hover: #1B3FB8; --on-accent: #FFFFFF;
  --field: #868C9B; --line: #E3E5EA; --danger: #B42318;
  --sp-4: 4px; --sp-8: 8px; --sp-12: 12px; --sp-16: 16px; --sp-24: 24px; --sp-32: 32px; --sp-48: 48px; --sp-64: 64px;
  --section: clamp(64px, 12vw, 128px);
  --container: 1120px; --gutter: 16px;
  --r-card: 12px; --r-ctl: 10px; --header-h: 64px;
  --fs-display: clamp(40px, 1.6rem + 4vw, 72px);
  --fs-h2: clamp(28px, 1.3rem + 2vw, 44px);
  --font: "Geist", "Geist Fallback", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #0B0D12; --surface: #141821; --text: #ECEEF3; --muted: #A3A9B8; --accent: #8AA4FF; --accent-hover: #A5B8FF; --on-accent: #0B0D12; --field: #5F6678; --line: #232836; --danger: #FF8A80; }
}
@media (min-width: 640px) { :root { --gutter: 32px; } }
/* Nur Portal: Erfolgsfarbe (Website hat keine), gleiche Logik hell/dunkel. */
html { --ok: #067647; -webkit-text-size-adjust: 100%; }
@media (prefers-color-scheme: dark) { html { --ok: #6CE9A6; } }

body { margin: 0; background: var(--bg); color: var(--text); font: 400 16px/1.6 var(--font); -webkit-font-smoothing: antialiased; overflow-wrap: break-word; padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
.container { width: min(var(--container), 100% - 2 * var(--gutter)); margin-inline: auto; }
.h2 { font-size: var(--fs-h2); font-weight: 600; line-height: 1.15; letter-spacing: -.02em; }
.h3 { font-size: 22px; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; }
.lead { font-size: 20px; line-height: 1.5; }
.small { font-size: 14px; line-height: 1.5; }
.muted { color: var(--muted); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
main:focus-visible { outline: 0; }

.link { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; transition: color 120ms ease-out; }
.link:hover { color: var(--accent-hover); text-decoration-thickness: 2px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-8); min-height: 44px; padding: 0 20px; border: 1px solid transparent; border-radius: var(--r-ctl); font: 500 16px/1 var(--font); text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color 120ms ease-out, border-color 120ms ease-out; }
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-hover); }
.btn-quiet { background: transparent; color: var(--text); border-color: var(--field); }
.btn-quiet:hover { border-color: var(--text); }
.btn[aria-disabled="true"], .btn:disabled { opacity: .6; cursor: not-allowed; }
.btn[aria-disabled="true"] { cursor: progress; }
.btn-klein { min-height: 36px; padding: 0 12px; font-size: 14px; }
.btn-gefahr { color: var(--danger); }
.skip { position: absolute; left: var(--sp-16); top: -120px; z-index: 30; }
.skip:focus-visible { top: var(--sp-8); }
.chip { display: inline-flex; align-items: center; padding: 2px 10px; border: 1px solid var(--line); border-radius: var(--r-ctl); background: var(--surface); color: var(--muted); font-size: 13px; font-weight: 500; line-height: 1.4; letter-spacing: .02em; white-space: nowrap; }
.wm { font-size: 22px; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; color: var(--text); text-decoration: none; }
.wm span { color: var(--accent); }

/* Formulare */
.formular { display: grid; gap: var(--sp-24); }
.feld { display: grid; gap: var(--sp-8); min-width: 0; }
.feld label, .feld .label { font-weight: 500; }
.feld-gruppe { display: grid; gap: var(--sp-24); }
@media (min-width: 760px) { .feld-gruppe { grid-template-columns: 1fr 1fr; } }
.input { width: 100%; min-height: 48px; padding: 10px 14px; border: 1px solid var(--field); border-radius: var(--r-ctl); background: var(--bg); color: var(--text); font: 400 16px/1.5 var(--font); }
.input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.input[aria-invalid="true"] { border-color: var(--danger); }
/* Schreibgeschützt (zum Beispiel die bestätigte Adresse): wie deaktiviert, bleibt aber fokussierbar und lesbar für Passwort-Manager. */
.input-gesperrt { background: var(--surface); color: var(--muted); border-color: var(--line); }
/* Eingaben nie unter 16 px: sonst zoomt iOS beim Fokus. */
.input-klein { min-height: 36px; padding: 4px 10px; font-size: 16px; }
.fehlertext { color: var(--danger); font-size: 14px; }
.hinweis { padding: var(--sp-12) var(--sp-16); border: 1px solid var(--line); border-radius: var(--r-ctl); background: var(--surface); }
.hinweis-ok { border-color: var(--ok); }
.hinweis-fehler { border-color: var(--danger); color: var(--text); }
.status { min-height: 1.6em; margin-top: var(--sp-16); color: var(--muted); }
.aktionen { display: flex; flex-wrap: wrap; gap: var(--sp-12); margin-top: var(--sp-32); }
.abstand-oben { margin-top: var(--sp-32); }
.js .nur-ohne-js { display: none; }
.nur-mit-js { display: none !important; }
.js .nur-mit-js { display: inline-flex !important; }
.passwort-zeile { display: flex; gap: var(--sp-8); align-items: stretch; }
.passwort-zeile .input { flex: 1; min-width: 0; }
.passwort-zeile .btn { align-self: center; }
/* Honigtopf der Registrierung: ausserhalb des Bildschirms (CSP verbietet Inline-Stile), ohne Platz im Layout. */
.honigtopf { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.login-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-16) var(--sp-24); }
/* hidden-Attribut gilt auch gegen display:flex/grid der Komponenten (app.js schaltet damit). */
[hidden] { display: none !important; }
.btn-haupt { min-height: 48px; }

/* --- Öffentliche Seiten (Login, Einladung): schlicht wie die Website --------------------- */
.site-header { position: sticky; top: 0; z-index: 10; background: var(--bg); border-bottom: 1px solid var(--line); padding-top: env(safe-area-inset-top); }
.bar { display: flex; align-items: center; gap: var(--sp-24); height: var(--header-h); }
.logo { display: inline-flex; align-items: center; min-height: 44px; }
.bar-end { margin-left: auto; display: flex; align-items: center; gap: var(--sp-4); }
.sprache-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--sp-12); border-radius: var(--r-ctl); color: var(--text); font-weight: 500; font-size: 14px; text-decoration: none; }
.sprache-link:hover { background: var(--surface); }
.sprache-link[aria-current] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .35em; }
.page { padding-top: clamp(40px, 6vw, 80px); }
.page .lead { margin-top: var(--sp-16); color: var(--muted); }
.narrow { max-width: 512px; }
.karte-einzeln .formular { margin-top: var(--sp-32); }
.schritte-klein { margin-top: var(--sp-24); padding-left: 1.25em; color: var(--muted); }
.schritte-klein li + li { margin-top: var(--sp-4); }
.trenner { display: flex; align-items: center; gap: var(--sp-16); margin-top: var(--sp-48); color: var(--muted); font-size: 14px; }
.trenner::before, .trenner::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
.site-footer { margin-top: var(--section); border-top: 1px solid var(--line); padding-block: var(--sp-32); }
.fuss-zeile { display: flex; flex-wrap: wrap; gap: var(--sp-8) var(--sp-24); align-items: center; }
/* ClipDesk-Fuss: Links mit mindestens 32 px Tippfläche (Mindestgrösse 24 px, WCAG 2.2 SC 2.5.8). */
.clipdesk-seite .fuss-link { display: inline-flex; align-items: center; min-height: 32px; }

/* --- Portal: Handy (< 900 px) Kopfzeile + Tab-Leiste, ab 900 px Seitenleiste ----------------- */
/* 100dvh: Höhe ohne die ein- und ausfahrenden Browserleisten; 100vh als Rückfall für ältere Browser. */
/* Zeilen fest (Kopfzeile auto, Inhalt 1fr), sonst bekommt bei kurzem Inhalt auch die Kopfzeile freien Platz. */
.app { display: grid; grid-template-columns: 1fr; grid-template-rows: auto 1fr; min-height: 100vh; min-height: 100dvh; }
.icon { width: 20px; height: 20px; flex: none; }
.marke { display: inline-flex; min-height: 44px; align-items: center; }

/* Handy: schlanke Kopfzeile mit Wortmarke und Kontoknopf */
.kopf-mobil { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-16); padding: env(safe-area-inset-top) var(--gutter) 0; min-height: calc(56px + env(safe-area-inset-top)); background: var(--bg); border-bottom: 1px solid var(--line); }
.konto-knopf { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--text); background: var(--surface); text-decoration: none; }
.konto-knopf[aria-current="page"] { color: var(--accent); }
.konto-knopf .icon { width: 22px; height: 22px; }

/* Handy: feste Tab-Leiste unten, in Daumenreichweite, über dem Home-Balken (safe-area) */
.tabs { position: fixed; z-index: 20; left: 0; right: 0; bottom: 0; background: var(--bg); border-top: 1px solid var(--line); padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
.tabs-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); }
.tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 56px; padding: 6px 2px; color: var(--muted); font-size: 12px; font-weight: 500; line-height: 1.2; text-align: center; text-decoration: none; }
.tab .icon { width: 24px; height: 24px; }
.tab[aria-current] { color: var(--accent); }
.tab:focus-visible { outline-offset: -2px; }
.tab-neu-kreis { display: inline-grid; place-items: center; width: 40px; height: 28px; margin-block: -2px; border-radius: 14px; background: var(--accent); color: var(--on-accent); }
.tab-neu-kreis .icon { width: 20px; height: 20px; }
.tab-neu { color: var(--text); }

.seitenleiste { display: none; }
/* Fokus und Sprungziele nie unter Kopf- oder Tab-Leiste verstecken (WCAG 2.2 SC 2.4.11). */
@media (max-width: 899px) {
  html.portal-html {
    scroll-padding-top: calc(56px + env(safe-area-inset-top) + var(--sp-8));
    scroll-padding-bottom: calc(56px + env(safe-area-inset-bottom) + var(--sp-8));
  }
}
.hauptbereich { min-width: 0; padding: var(--sp-24) var(--gutter) calc(var(--sp-48) + 56px + env(safe-area-inset-bottom)); }

@media (min-width: 900px) {
  .app { grid-template-columns: 264px 1fr; grid-template-rows: 1fr; }
  .kopf-mobil, .tabs { display: none; }
  .seitenleiste { position: sticky; top: 0; height: 100vh; height: 100dvh; overflow-y: auto; display: flex; flex-direction: column; gap: var(--sp-16); padding: var(--sp-24) var(--sp-16); background: var(--surface); border-right: 1px solid var(--line); }
  .hauptbereich { padding: clamp(24px, 4vw, 48px) clamp(16px, 4vw, 56px) var(--sp-64); }
}
.seitenleiste-kopf { padding: 0 var(--sp-8); }
.firma-name { margin-top: -4px; }
.neu-knopf { width: 100%; }
.nav-liste { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--sp-4); }
.nav-liste a, .nav-knopf { display: flex; align-items: center; gap: var(--sp-12); min-height: 44px; padding: 0 var(--sp-12); border: 0; border-radius: var(--r-ctl); background: transparent; color: var(--text); font: 500 15px/1.2 var(--font); text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color 120ms ease-out; }
.nav-liste a:hover, .nav-knopf:hover { background: var(--bg); }
.nav-liste a[aria-current="page"] { background: var(--bg); color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.nav-knopf { width: 100%; }
.seitenleiste-fuss { display: grid; gap: var(--sp-8); margin-top: auto; padding-top: var(--sp-16); border-top: 1px solid var(--line); }
.sprache-form { display: flex; gap: var(--sp-8); }
.benutzer-zeile { padding: 0 var(--sp-12); overflow: hidden; text-overflow: ellipsis; }

/* Seite «Mehr» (Handy): grosse Listeneinträge */
.mehr-liste { list-style: none; padding: 0; display: grid; gap: var(--sp-8); }
.mehr-eintrag { display: flex; align-items: center; gap: var(--sp-16); min-height: 56px; padding: 0 var(--sp-16); border: 1px solid var(--line); border-radius: var(--r-card); color: var(--text); font-weight: 500; text-decoration: none; }
.mehr-eintrag:hover { border-color: var(--field); }
.mehr-aktionen { gap: var(--sp-16); }
.mehr-aktionen .nav-knopf { padding: 0; }
.hauptbereich > * { max-width: 1040px; }
.seitenkopf { display: grid; gap: var(--sp-12); justify-items: start; margin-bottom: var(--sp-32); }
.seitenkopf .lead { max-width: 680px; }
.abschnitt { margin-top: var(--sp-64); }
.abschnitt > .h3 { margin-bottom: var(--sp-24); }
.abschnitt-eng { margin-top: var(--sp-32); }
.abschnitt-eng > .h3 { margin-bottom: var(--sp-16); }

/* Karten */
.karten { display: grid; gap: var(--sp-16); grid-template-columns: 1fr; list-style: none; padding: 0; }
@media (min-width: 640px) { .karten { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .karten { grid-template-columns: repeat(3, 1fr); } }
.karte { position: relative; display: flex; flex-direction: column; gap: var(--sp-12); padding: var(--sp-24); background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-card); transition: border-color 120ms ease-out; }
.karten .karte:hover { border-color: var(--field); }
.karte-kopf { display: flex; align-items: center; justify-content: space-between; color: var(--accent); }
.karte-kopf .icon { width: 24px; height: 24px; }
.karte-link { margin-top: auto; display: inline-flex; align-items: center; min-height: 44px; }
.karte-link::after { content: ""; position: absolute; inset: -1px; border-radius: var(--r-card); }
.karte-link:focus-visible { outline: 0; }
.karte-link:focus-visible::after { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Schritte (nummeriert) */
.steps { counter-reset: step; display: grid; gap: var(--sp-32); grid-template-columns: 1fr; list-style: none; padding: 0; }
@media (min-width: 760px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.steps li { counter-increment: step; border-top: 1px solid var(--line); padding-top: var(--sp-16); }
.steps li::before { content: counter(step); display: block; margin-bottom: var(--sp-8); color: var(--accent); font-size: 22px; font-weight: 600; line-height: 1.3; }
.steps p { margin-top: var(--sp-8); color: var(--muted); max-width: 34ch; }
.schritt-titel { font-size: 17px; font-weight: 600; }

/* Assistent: Schritt-Leiste + «So geht dieser Schritt» + Arbeitsfläche */
.schrittleiste { display: flex; gap: var(--sp-8); list-style: none; padding: 0; margin-bottom: var(--sp-32); overflow-x: auto; }
.schrittleiste li { display: flex; align-items: center; gap: var(--sp-8); flex: 1 0 auto; min-height: 44px; padding: 0 var(--sp-16) 0 var(--sp-8); border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-weight: 500; white-space: nowrap; }
.schrittleiste li[aria-current="step"] { border-color: var(--accent); color: var(--text); }
.schritt-nr { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--surface); font-size: 14px; }
.schrittleiste li[aria-current="step"] .schritt-nr { background: var(--accent); color: var(--on-accent); }
.assistent { display: grid; gap: var(--sp-16); }
@media (min-width: 1000px) { .assistent { grid-template-columns: minmax(260px, 1fr) 2fr; align-items: start; } }
.punkte-liste { padding-left: 1.25em; color: var(--muted); }
.punkte-liste li + li { margin-top: var(--sp-8); }
.platzhalter { min-height: 200px; justify-content: center; border-style: dashed; background: var(--surface); }
.ablauf { display: grid; gap: var(--sp-12); list-style: none; padding: 0; }
.ablauf li { display: grid; gap: var(--sp-8); justify-items: start; padding: var(--sp-12) var(--sp-16); border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); }
.knopf-vorschau { display: inline-flex; align-items: center; min-height: 32px; padding: 0 14px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-size: 14px; font-weight: 500; }

/* Listen und Tabellen */
.liste { list-style: none; padding: 0; display: grid; gap: var(--sp-8); }
.liste-eintrag { display: grid; gap: var(--sp-12); align-items: center; padding: var(--sp-16); border: 1px solid var(--line); border-radius: var(--r-card); }
@media (min-width: 900px) { .liste-eintrag { grid-template-columns: 1fr auto auto; } }
.liste-text { display: grid; gap: 2px; min-width: 0; }
.inline-form { display: flex; flex-wrap: wrap; gap: var(--sp-8); align-items: center; }
.inline-form .input { width: 200px; }
@media (max-width: 899px) { .inline-form .input { width: auto; flex: 1 1 160px; } }
.inline-form .fehlertext { flex-basis: 100%; }
.kunde { margin-top: var(--sp-16); }
.kunde-name { font-size: 17px; font-weight: 600; }
.tabelle-rahmen { overflow-x: auto; }
.tabelle { width: 100%; border-collapse: collapse; font-size: 15px; }
.tabelle th, .tabelle td { padding: var(--sp-8) var(--sp-12); border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.tabelle th { color: var(--muted); font-weight: 500; font-size: 14px; }
.tabelle tr:last-child td { border-bottom: 0; }
/* Schmale Bildschirme: jede Zeile als Karte, Spaltenname aus data-label. */
@media (max-width: 699px) {
  .tabelle-karten thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .tabelle-karten, .tabelle-karten tbody, .tabelle-karten tr, .tabelle-karten td { display: block; width: 100%; }
  .tabelle-karten tr { padding: var(--sp-8) 0; border-bottom: 1px solid var(--line); }
  .tabelle-karten tr:last-child { border-bottom: 0; }
  .tabelle-karten td { display: grid; grid-template-columns: minmax(96px, 35%) 1fr; gap: var(--sp-8); padding: var(--sp-4) 0; border: 0; }
  .tabelle-karten td[data-label]::before { content: attr(data-label); color: var(--muted); font-size: 14px; }
  .tabelle-karten td:not([data-label]) { grid-template-columns: 1fr; }
}
/* Grobe Zeiger (Touch) oder Handy: Touch-Ziele mindestens 44 px, Hauptaktionen 48 px (WCAG 2.2 SC 2.5.8 übertroffen). */
@media (pointer: coarse), (max-width: 899px) {
  .btn-klein, .input-klein { min-height: 44px; }
  .btn-primary { min-height: 48px; }
}
.link-box { display: grid; gap: var(--sp-8); margin-bottom: var(--sp-24); }
.kopier-zeile { display: flex; gap: var(--sp-8); }
.kopier-zeile .input { flex: 1; min-width: 0; font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: 16px; }
#einladung-ergebnis:not(:empty) { margin-top: var(--sp-24); }

/* --- P6 Kommentar-Automatik (Portal «Kommentare», Rechtstexte) ------------------------------------------ */
.h4 { font-size: 18px; font-weight: 600; line-height: 1.35; }
.zeile-zwischen { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-12); }
.chip-ok { border-color: var(--ok); color: var(--text); }
.feld-check { display: flex; align-items: flex-start; gap: var(--sp-8); }
.feld-check input { width: 20px; height: 20px; margin: 3px 0 0; flex: none; accent-color: var(--accent); }
.feld-check label, label.feld-check { font-weight: 400; }
fieldset.feld { border: 0; padding: 0; margin: 0; }
fieldset.feld legend { font-weight: 500; padding: 0; margin-bottom: var(--sp-8); }
details.feld summary { cursor: pointer; font-weight: 500; min-height: 44px; display: flex; align-items: center; }
.zahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--sp-12); margin: 0; }
.zahlen div { padding: var(--sp-8) var(--sp-12); border-radius: var(--r-ctl); background: var(--surface); }
.zahlen dt { font-size: 13px; color: var(--muted); }
.zahlen dd { margin: 0; font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; }
.eigenschaften { display: grid; gap: var(--sp-8); margin: 0; }
.eigenschaften div { display: grid; grid-template-columns: minmax(140px, 1fr) 2fr; gap: var(--sp-12); }
.eigenschaften dt { color: var(--muted); }
.eigenschaften dd { margin: 0; overflow-wrap: anywhere; }
.automatik { gap: var(--sp-12); margin-top: var(--sp-12); }
.beitragsliste { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--sp-8); }
.beitrag { display: flex; align-items: center; gap: var(--sp-8); padding: var(--sp-8); min-height: 44px; border: 1px solid var(--line); border-radius: var(--r-ctl); font-weight: 400; }
.beitrag img { width: 64px; height: 64px; object-fit: cover; border-radius: 6px; flex: none; }
.beitrag input { width: 20px; height: 20px; flex: none; accent-color: var(--accent); }
.chat { list-style: none; padding: 0; display: grid; gap: var(--sp-8); margin-top: var(--sp-12); }
.chat li { display: grid; gap: var(--sp-4); justify-items: start; max-width: min(520px, 90%); padding: var(--sp-12) var(--sp-16); border-radius: 18px; background: var(--surface); border: 1px solid var(--line); }
.chat .chat-firma { justify-self: end; }
.vorformatiert { white-space: pre-wrap; }
.rechtslinks { margin-top: var(--sp-8); }
.rechtstext { display: grid; gap: var(--sp-16); }
.rechtstext h2 { font-size: 28px; font-weight: 600; line-height: 1.2; }
.rechtstext h3 { font-size: 20px; font-weight: 600; line-height: 1.3; margin-top: var(--sp-16); }
.rechtstext ul, .rechtstext ol { padding-left: 1.4em; display: grid; gap: var(--sp-8); }
.rechtstext blockquote { margin: 0; padding: var(--sp-12) var(--sp-16); border-left: 3px solid var(--line); background: var(--surface); }
.rechtstext hr { border: 0; border-top: 1px solid var(--line); margin: var(--sp-24) 0; }
.rechtstext td, .rechtstext th { vertical-align: top; }
/* --- P5 Beitrags-Assistent -------------------------------------------------------------- */
.schritt-link { display: flex; align-items: center; gap: var(--sp-8); color: inherit; text-decoration: none; min-height: 44px; }
.auswahl-raster { display: grid; gap: var(--sp-8); grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.auswahl-zeile { display: flex; flex-wrap: wrap; gap: var(--sp-8); }
.auswahl, .kaestchen { display: flex; align-items: center; gap: var(--sp-8); min-height: 44px; padding: var(--sp-8) var(--sp-12); border: 1px solid var(--line); border-radius: var(--r-ctl); cursor: pointer; font-weight: 400; overflow-wrap: anywhere; }
.feld .auswahl, .feld .kaestchen { font-weight: 400; }
.auswahl:has(input:checked), .kaestchen:has(input:checked) { border-color: var(--accent); background: var(--surface); }
.auswahl input, .kaestchen input { width: 20px; height: 20px; margin: 0; accent-color: var(--accent); flex: none; }
.auswahl-breit { align-items: flex-start; }
fieldset.feld { border: 0; padding: 0; margin: 0; }
.chip-ki { color: var(--accent); border-color: var(--accent); }
.beitrag-liste { list-style: none; padding: 0; display: grid; gap: var(--sp-12); }
.beitrag-eintrag { display: grid; gap: var(--sp-8); }
.beitrag-link { font-weight: 500; }
.angaben { display: grid; grid-template-columns: max-content 1fr; gap: var(--sp-4) var(--sp-16); margin: 0 0 var(--sp-24); }
.angaben dt { color: var(--muted); }
.angaben dd { margin: 0; }
.foto-bereich, .sprach-text, .video-ergebnis, #bilder { display: grid; gap: var(--sp-12); margin-top: var(--sp-24); }
.foto-vorschau, .video-vorschau { max-width: min(100%, 420px); height: auto; border-radius: var(--r-ctl); border: 1px solid var(--line); }
.hochladen { display: grid; gap: var(--sp-8); justify-items: start; }
.hochladen input[type="file"]:focus-visible + .small, .hochladen:focus-within .btn { outline: 2px solid var(--accent); outline-offset: 2px; }
.gewaehlt { padding: var(--sp-12) var(--sp-16); border-left: 3px solid var(--accent); background: var(--surface); border-radius: var(--r-ctl); }
.umschreiben { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-8); }
.vorlesen { white-space: pre-line; }
.kopie textarea { font-size: 16px; }
.farbmuster { width: 18px; height: 18px; border-radius: 50%; border: 2px solid #000; flex: none; }
.farbmuster-weiss { background: #FFFFFF; }
.farbmuster-schwarz { background: #111111; border-color: #FFFFFF; outline: 1px solid var(--line); }
.farbmuster-gelb { background: #FFD60A; }
.farbmuster-pink { background: #FF4FA3; }
.farbmuster-orange { background: #FF9500; }
.farbmuster-rot { background: #FF3B30; }
.farbmuster-gruen { background: #34C759; }
.farbmuster-blau { background: #0A84FF; }
.fokus-raster { display: grid; grid-template-columns: repeat(3, 48px); grid-template-rows: repeat(3, 48px); gap: 4px; padding: 4px; width: max-content; border: 1px solid var(--line); border-radius: var(--r-ctl); background: var(--surface); }
.fokus-punkt { display: grid; place-items: center; border-radius: 6px; cursor: pointer; }
.fokus-punkt:has(input:checked) { background: var(--accent); }
.fokus-punkt input { width: 20px; height: 20px; margin: 0; accent-color: var(--accent); }
.bild-formate { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-16); align-items: flex-end; }
.bild-formate li { display: grid; gap: var(--sp-8); justify-items: start; }
.bild-formate img { width: 120px; height: auto; border-radius: 6px; border: 1px solid var(--line); }
.auftrag { display: grid; gap: var(--sp-8); padding: var(--sp-12) var(--sp-16); margin-bottom: var(--sp-24); border: 1px solid var(--line); border-radius: var(--r-ctl); background: var(--surface); }
.auftrag-zeile { display: flex; align-items: center; gap: var(--sp-12); }
.auftrag-prozent { margin-left: auto; color: var(--accent); font-weight: 600; font-variant-numeric: tabular-nums; }
/* Standard-Ladeanzeige: Balken. Ohne JS unbestimmt (wandernder Abschnitt), mit JS nach erwarteter Dauer gefüllt. */
.ladebalken { position: relative; height: 8px; border-radius: 4px; background: color-mix(in srgb, var(--accent) 16%, var(--bg)); overflow: hidden; }
.ladebalken > span { position: absolute; inset: 0 auto 0 0; width: 35%; border-radius: 4px; background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 60%, #FFFFFF)); animation: balken-wandern 1.4s ease-in-out infinite; }
.ladebalken.ist-bestimmt > span { animation: none; transition: width 400ms ease-out; }
@keyframes balken-wandern { from { left: -35%; } to { left: 100%; } }
.laeuft-punkt { width: 12px; height: 12px; border-radius: 50%; background: var(--accent); animation: puls 1.2s ease-in-out infinite; flex: none; }
@keyframes puls { 50% { opacity: .3; } }
/* --- Ende P5 --- */

/* --- Beitrags-Assistent, geführt (Vorbild Videoauswertung, docs/plattform/ANALYSE-VIDEO-BEITRAGSASSISTENT.md) ----
   Gleiche Farben und Schrift wie FlexAI; dazu weiche Akzentflächen, runde Karten mit leichtem Schatten,
   Schritt-Leiste mit Häkchen, Assistent rechts, grosser Weiter-Knopf unten. Eigene Variablen auf html (nicht :root),
   damit :root wortgleich mit der Website bleibt. */
html {
  --akzent-weich: color-mix(in srgb, var(--accent) 8%, var(--bg));
  --akzent-mittel: color-mix(in srgb, var(--accent) 18%, var(--bg));
  --ok-weich: color-mix(in srgb, var(--ok) 12%, var(--bg));
  --schatten: 0 1px 2px rgb(17 19 24 / .04), 0 8px 24px rgb(17 19 24 / .06);
  --schatten-hoch: 0 2px 4px rgb(17 19 24 / .06), 0 16px 40px rgb(36 80 224 / .14);
  --r-gross: 16px;
}
@media (prefers-color-scheme: dark) {
  html { --schatten: 0 0 0 1px var(--line); --schatten-hoch: 0 0 0 1px var(--accent); }
}

.eyebrow { color: var(--accent); font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.chip .icon { width: 14px; height: 14px; margin-right: 4px; }
.chip-leise { background: transparent; }
.chip-ok { background: var(--ok-weich); color: var(--ok); border-color: transparent; }
.link-optik { display: inline-flex; align-items: center; gap: 4px; color: var(--accent); font-weight: 500; }
.link-optik .icon { width: 16px; height: 16px; }
.btn .icon { width: 18px; height: 18px; }
.btn-primary { box-shadow: 0 1px 2px rgb(17 19 24 / .08); }
.btn-primary:not(:disabled):hover { box-shadow: var(--schatten-hoch); }
.btn-haupt { padding: 0 24px; font-weight: 600; }
.knopf-gruppe { display: inline-flex; flex-wrap: wrap; gap: var(--sp-8); }

/* Symbol in weicher Akzentfläche (Kacheln, Kartenköpfe) */
.symbol-kachel { display: inline-grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 12px; background: var(--akzent-weich); color: var(--accent); }
.symbol-kachel .icon { width: 22px; height: 22px; }
.symbol-gross { width: 56px; height: 56px; border-radius: 16px; }
.symbol-gross .icon { width: 28px; height: 28px; }

/* Karten: runder, mit leichtem Schatten */
.karte-gross, .schritt-karte.karte, .medien-karte, .video-gestalten, .beitrag-karte { border-radius: var(--r-gross); box-shadow: var(--schatten); }
.karte-gross { padding: clamp(20px, 3vw, 32px); gap: var(--sp-24); }
.karte-hervor { border-color: var(--akzent-mittel); background: var(--akzent-weich); }
.karte-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-16); }
.karte-zeile-text { flex: 1 1 260px; display: grid; gap: var(--sp-4); }
.schritt-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-8) var(--sp-16); }

/* Kennzahlen-Band über dem Assistenten */
.kennzahl-band { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-12); margin: var(--sp-32) 0 0; }
.kennzahl-band div { padding: var(--sp-16); border: 1px solid var(--line); border-radius: var(--r-gross); background: var(--bg); box-shadow: var(--schatten); }
.kennzahl-band dt { color: var(--muted); font-size: 13px; }
.kennzahl-band dd { margin: 2px 0 0; font-size: 28px; font-weight: 600; line-height: 1.2; font-variant-numeric: tabular-nums; }

/* Neuer Beitrag: drei kleine Schritte */
.neu-schritte { list-style: none; padding: 0; display: grid; gap: var(--sp-32); }
.neu-legende { display: flex; align-items: center; gap: var(--sp-12); font-size: 17px; font-weight: 600; }
.neu-nr { display: inline-grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 50%; background: var(--accent); color: var(--on-accent); font-size: 14px; font-weight: 600; }
.anlass-raster { display: grid; gap: var(--sp-12); grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.anlass-kachel { position: relative; display: flex; align-items: center; gap: var(--sp-12); min-height: 72px; padding: var(--sp-12) var(--sp-16); border: 1px solid var(--line); border-radius: 14px; background: var(--bg); cursor: pointer; transition: border-color 120ms ease-out, background-color 120ms ease-out, box-shadow 120ms ease-out; }
.anlass-kachel:hover { border-color: var(--field); }
.anlass-kachel input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.anlass-kachel:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.anlass-kachel:has(input:checked) { border-color: var(--accent); background: var(--akzent-weich); box-shadow: 0 0 0 1px var(--accent); }
.anlass-kachel:has(input:checked) .symbol-kachel { background: var(--accent); color: var(--on-accent); }
.anlass-text { display: grid; gap: 2px; min-width: 0; }
.anlass-name { font-weight: 600; line-height: 1.3; }
.anlass-info { color: var(--muted); font-size: 13px; line-height: 1.35; }
.anlass-haken { position: absolute; top: 8px; right: 8px; display: none; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); color: var(--on-accent); }
.anlass-haken .icon { width: 14px; height: 14px; stroke-width: 2.5; }
.anlass-kachel:has(input:checked) .anlass-haken { display: inline-grid; }
.ideen { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-8); }
.ideen > .small { display: inline-flex; align-items: center; gap: 4px; }
.ideen .icon { width: 16px; height: 16px; color: var(--accent); }
.idee { min-height: 36px; padding: 0 14px; border: 1px dashed var(--akzent-mittel); border-radius: 999px; background: var(--akzent-weich); color: var(--text); font: 500 14px/1.2 var(--font); cursor: pointer; transition: border-color 120ms ease-out; }
.idee:hover { border-color: var(--accent); border-style: solid; }
.pille { border-radius: 999px; padding-inline: var(--sp-16); }

/* Untere Aktionsleiste: Zurück links, Hauptknopf rechts; auf dem Handy über der Tab-Leiste angeheftet */
.aktionsleiste { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-12); margin-top: var(--sp-24); }
.aktionsleiste > :last-child { margin-left: auto; }
.aktionsleiste-ende { padding-top: var(--sp-24); border-top: 1px solid var(--line); margin-top: 0; }
.assistent-haupt > .aktionsleiste { position: sticky; bottom: 0; z-index: 5; padding: var(--sp-12) 0; background: linear-gradient(to top, var(--bg) 70%, transparent); }
/* Handy: Leiste nicht anheften (sonst deckt sie mit Tab-Leiste zu viel zu), Hauptknopf volle Breite zuoberst. */
@media (max-width: 899px) {
  .assistent-haupt > .aktionsleiste { position: static; padding: 0; background: none; flex-direction: column-reverse; align-items: stretch; }
  .aktionsleiste > :last-child { margin-left: 0; }
  .aktionsleiste .knopf-gruppe { flex-direction: column-reverse; }
  .aktionsleiste .btn, .aktionsleiste form .btn { width: 100%; }
}

/* Beitragsliste als Karten mit Fortschritt */
.beitrag-raster { list-style: none; padding: 0; display: grid; gap: var(--sp-16); grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); margin-top: var(--sp-16); }
.beitrag-karte { gap: var(--sp-8); transition: box-shadow 120ms ease-out, border-color 120ms ease-out; }
.beitrag-karte:hover { border-color: var(--akzent-mittel); box-shadow: var(--schatten-hoch); }
.beitrag-karte .karte-kopf { color: var(--muted); }
.karte-link-flaeche { color: var(--text); font-weight: 600; text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.karte-link-flaeche::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-gross); }
.karte-link-flaeche:focus-visible { outline: 0; }
.karte-link-flaeche:focus-visible::after { outline: 2px solid var(--accent); outline-offset: 2px; }
.fortschritt { height: 6px; border-radius: 3px; background: var(--surface); overflow: hidden; margin-top: auto; }
.fortschritt-balken { display: block; height: 100%; border-radius: 3px; background: var(--accent); }
.fortschritt-1 { width: 20%; } .fortschritt-2 { width: 40%; } .fortschritt-3 { width: 60%; } .fortschritt-4 { width: 80%; }
.fortschritt-5 { width: 100%; background: var(--ok); }
.beitrag-weiter { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-8); }
.leer-karte { display: grid; justify-items: center; gap: var(--sp-12); padding: var(--sp-32) var(--sp-16); border: 1px dashed var(--line); border-radius: var(--r-gross); background: var(--surface); text-align: center; margin-top: var(--sp-16); }
.leer-karte .muted { max-width: 46ch; }

/* Kopf des Beitrags und Schritt-Leiste mit Häkchen */
.assistent-kopf { display: grid; gap: var(--sp-12); margin-bottom: var(--sp-24); }
.zurueck-link { display: inline-flex; align-items: center; gap: 6px; width: max-content; min-height: 36px; color: var(--muted); font-size: 14px; font-weight: 500; text-decoration: none; }
.zurueck-link:hover { color: var(--text); }
.zurueck-link .icon { width: 16px; height: 16px; }
.assistent-titelzeile { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-8) var(--sp-12); }
.assistent-titel { margin-right: var(--sp-8); }
.stepper { display: flex; align-items: center; gap: 0; list-style: none; padding: 0; margin: 0 0 var(--sp-24); overflow-x: auto; scrollbar-width: none; }
.stepper-schritt { display: flex; align-items: center; flex: 1 0 auto; color: var(--muted); }
.stepper-schritt + .stepper-schritt::before { content: ""; flex: 1 1 16px; min-width: 12px; height: 2px; margin: 0 6px; border-radius: 1px; background: var(--line); }
.stepper-schritt.ist-fertig + .stepper-schritt::before, .stepper-schritt.ist-fertig + .stepper-schritt.ist-aktiv::before { background: var(--accent); }
.stepper-link { display: inline-flex; align-items: center; gap: var(--sp-8); min-height: 44px; padding: 4px 12px 4px 4px; border-radius: 999px; color: inherit; font-size: 15px; font-weight: 500; white-space: nowrap; text-decoration: none; }
.stepper-link:hover { background: var(--surface); }
.stepper-punkt { display: inline-grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 50%; border: 1.5px solid var(--line); background: var(--bg); font-size: 13px; font-weight: 600; }
.stepper-punkt .icon { width: 16px; height: 16px; stroke-width: 2.5; }
.ist-fertig .stepper-punkt { border-color: var(--ok); background: var(--ok); color: var(--bg); }
.ist-fertig { color: var(--text); }
.ist-aktiv .stepper-link { background: var(--akzent-weich); color: var(--accent); font-weight: 600; }
.ist-aktiv .stepper-punkt { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
@media (max-width: 699px) {
  .stepper-text { display: none; }
  .ist-aktiv .stepper-text { display: inline; }
  .stepper-link { padding: 4px; gap: 6px; }
  .ist-aktiv .stepper-link { padding-right: 12px; }
  .stepper-schritt + .stepper-schritt::before { min-width: 6px; margin: 0 2px; }
}

/* Raster: Schritt links, Assistent rechts (ab 1100 px), darunter auf schmalen Bildschirmen */
.assistent-raster { display: grid; gap: var(--sp-24); align-items: start; }
.assistent-haupt { display: grid; gap: var(--sp-16); min-width: 0; }
.so-geht { padding: var(--sp-16) var(--sp-24); border: 1px solid var(--akzent-mittel); border-radius: var(--r-gross); background: var(--akzent-weich); }
.so-geht-kopf { display: flex; align-items: center; gap: var(--sp-8); color: var(--accent); }
.so-geht-titel { font-size: 15px; font-weight: 600; color: var(--text); }
.so-geht-nr { margin-left: auto; }
.so-geht-liste { counter-reset: so; list-style: none; padding: 0; margin-top: var(--sp-8); display: grid; gap: 6px; }
.so-geht-liste li { counter-increment: so; display: flex; gap: var(--sp-12); font-size: 15px; line-height: 1.45; }
.so-geht-liste li::before { content: counter(so); display: inline-grid; place-items: center; width: 22px; height: 22px; flex: none; margin-top: 1px; border-radius: 6px; background: var(--bg); color: var(--accent); font-size: 12px; font-weight: 600; }
.schritt-karte { gap: var(--sp-16); }
section.schritt-karte:not(.karte) { display: grid; }
.schritt-karte > *, .medien-karte > *, .gestalten-raster > * { min-width: 0; }
/* Hochladen: Knopf über dem Hinweis (nur-mit-js setzt sonst inline-flex). */
.js .hochladen.nur-mit-js { display: grid !important; }

/* Ladeplatzhalter mit Kreisel und Skelettzeilen */
.lade-karte { display: grid; justify-items: center; gap: var(--sp-8); padding: var(--sp-24) var(--sp-16); text-align: center; }
.lade-karte .auftrag { justify-self: stretch; margin: var(--sp-16) 0 0; text-align: left; }
.lade-titel { font-weight: 600; font-size: 17px; }
.skelett { display: grid; gap: var(--sp-12); width: 100%; margin-top: var(--sp-16); }
.skelett span { height: 44px; border-radius: 12px; background: linear-gradient(90deg, var(--surface) 25%, var(--akzent-weich) 50%, var(--surface) 75%); background-size: 200% 100%; animation: schimmern 1.4s ease-in-out infinite; }
@keyframes schimmern { to { background-position: -200% 0; } }

/* Anfangssätze als Auswahlkarten mit Art-Schild */
.wahl-liste { display: grid; gap: var(--sp-8); }
.wahl-karte { display: flex; align-items: flex-start; gap: var(--sp-12); padding: var(--sp-16); border: 1px solid var(--line); border-radius: 14px; background: var(--bg); cursor: pointer; font-weight: 400; transition: border-color 120ms ease-out, background-color 120ms ease-out, box-shadow 120ms ease-out; }
.wahl-karte:hover { border-color: var(--field); }
.wahl-karte input { width: 20px; height: 20px; margin: 2px 0 0; flex: none; accent-color: var(--accent); }
.wahl-karte:has(input:checked) { border-color: var(--accent); background: var(--akzent-weich); box-shadow: 0 0 0 1px var(--accent); }
.wahl-text { flex: 1; min-width: 0; font-size: 16px; line-height: 1.5; }
.wahl-art { flex: none; padding: 2px 8px; border-radius: 6px; background: var(--surface); color: var(--muted); font-size: 12px; font-weight: 500; line-height: 1.5; }
.wahl-art .icon { width: 14px; height: 14px; display: block; }
.wahl-karte:has(input:checked) .wahl-art { background: var(--bg); color: var(--accent); }
.wahl-eigen { border-style: dashed; }
.eingabe-zeile { display: flex; flex-wrap: wrap; gap: var(--sp-8); }
.eingabe-zeile .input { flex: 1 1 240px; }

/* Beschreibung */
.hinweis-ki, .hinweis-tipp { display: flex; align-items: flex-start; gap: var(--sp-8); border-color: var(--akzent-mittel); background: var(--akzent-weich); }
.hinweis-ki .icon, .hinweis-tipp .icon { color: var(--accent); margin-top: 3px; width: 18px; height: 18px; }
.text-gross { line-height: 1.6; }
.text-fuss { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-8); }
.sprach-text { padding-top: var(--sp-16); border-top: 1px solid var(--line); }
.sprach-text:first-of-type { border-top: 0; padding-top: 0; }

/* Bild und Video */
.medien-wahl { display: grid; gap: var(--sp-16); }
@media (min-width: 760px) { .medien-wahl { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.medien-kopf { display: flex; align-items: center; gap: var(--sp-12); }
.medien-karte .foto-vorschau { max-width: 100%; max-height: 320px; object-fit: contain; }
.gestalten-raster { display: grid; gap: var(--sp-24); align-items: start; }
@media (min-width: 760px) { .gestalten-raster { grid-template-columns: 280px minmax(0, 1fr); } }
.handy-spalte { display: grid; gap: var(--sp-12); justify-items: center; }
.handy-rahmen { position: relative; width: 260px; aspect-ratio: 9 / 16; overflow: hidden; border: 6px solid #111318; border-radius: 28px; background: linear-gradient(160deg, #2A3142, #0B0D12); box-shadow: var(--schatten); }
.handy-rahmen.format-4x5 { aspect-ratio: 4 / 5; }
.handy-rahmen.format-1x1 { aspect-ratio: 1 / 1; }
.handy-video { display: block; width: 100%; height: 100%; object-fit: cover; background: #000; }
.handy-vorschau .handy-video { position: absolute; inset: 0; }
/* Text wie im fertigen Video: Kontur (medien.FARBEN) per Strich hinter der Füllung */
.vorschau-text { --kontur: #000; position: absolute; left: 7%; right: 7%; text-align: center; font-weight: 700; font-size: 16px; line-height: 1.2; -webkit-text-stroke: 3px var(--kontur); paint-order: stroke fill; overflow-wrap: anywhere; }
.position-oben { top: 15%; } .position-mitte { top: 50%; transform: translateY(-50%); } .position-unten { bottom: 28%; }
.farbe-weiss { color: #FFFFFF; } .farbe-schwarz { color: #111111; --kontur: #FFF; }
.farbe-gelb { color: #FFD60A; } .farbe-pink { color: #FF4FA3; } .farbe-orange { color: #FF9500; }
.farbe-rot { color: #FF3B30; } .farbe-gruen { color: #34C759; } .farbe-blau { color: #0A84FF; }
.schrift-geist { font-family: var(--font); font-weight: 700; }
.schrift-playfair { font-family: "Playfair Display", Georgia, serif; font-weight: 700; }
.schrift-bebas { font-family: "Bebas Neue", Impact, sans-serif; font-weight: 400; }
.schrift-caveat { font-family: "Caveat", cursive; font-weight: 700; }
.schrift-mono { font-family: "Space Mono", ui-monospace, monospace; font-weight: 700; }
/* Schrift (links) und Farbe (rechts) nebeneinander, auf schmalen Bildschirmen untereinander */
.stil-wahl { display: grid; align-items: start; gap: var(--sp-16); padding: var(--sp-16); border: 1px solid var(--line); border-radius: var(--r-gross); }
@media (min-width: 560px) { .stil-wahl { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-24); } }
.stil-wahl .feld { margin: 0; }
.schrift-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-8); }
.schrift-knopf { display: grid; place-items: center; min-height: 48px; padding: 4px 8px; border: 1px solid var(--line); border-radius: var(--r-ctl); cursor: pointer; font-size: 16px; text-align: center; line-height: 1.1; }
.schrift-knopf.schrift-bebas, .schrift-knopf.schrift-caveat { font-size: 20px; }
.schrift-knopf.schrift-mono { font-size: 13px; }
.schrift-knopf input, .farb-wahl input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.schrift-knopf:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); background: var(--akzent-weich); }
.schrift-knopf:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.farb-zeile { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 6px; }
.farb-wahl { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; cursor: pointer; }
.farb-wahl .farbmuster { width: 32px; height: 32px; border: 1px solid var(--line); outline: none; }
.farb-wahl .farbmuster-schwarz { border-color: #FFFFFF; }
.farb-wahl:has(input:checked) .farbmuster { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--accent); }
.farb-wahl:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.segmente { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 12px; background: var(--surface); max-width: 100%; }
fieldset.feld { min-width: 0; }
.segment { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 9px; cursor: pointer; font-size: 15px; font-weight: 500; color: var(--muted); }
.segment input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.segment:has(input:checked) { background: var(--bg); color: var(--text); box-shadow: 0 1px 3px rgb(17 19 24 / .12); }
.segment:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Abschluss */
.pruefliste { list-style: none; padding: 0; display: grid; gap: var(--sp-8); }
.pruefliste li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-12); padding: var(--sp-12) var(--sp-16); border: 1px solid var(--line); border-radius: 12px; }
.pruefliste li.ist-ok { background: var(--ok-weich); border-color: transparent; }
.pruefliste .link { margin-left: auto; }
.pruef-punkt { display: inline-grid; place-items: center; width: 24px; height: 24px; flex: none; border-radius: 50%; border: 1.5px dashed var(--field); }
.ist-ok .pruef-punkt { border: 0; background: var(--ok); color: var(--bg); }
.pruef-punkt .icon { width: 14px; height: 14px; stroke-width: 2.5; }
.erfolg { display: grid; justify-items: center; gap: var(--sp-8); padding: var(--sp-24) var(--sp-16); text-align: center; }
.erfolg .muted { max-width: 52ch; }
.erfolg-kreis { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--ok); color: var(--bg); box-shadow: 0 0 0 10px var(--ok-weich); margin-bottom: var(--sp-8); }
.erfolg-kreis .icon { width: 32px; height: 32px; stroke-width: 2.5; }
.posten-liste { list-style: none; padding: 0; display: grid; gap: var(--sp-16); }
.posten-liste > li { display: flex; gap: var(--sp-16); }
.posten-nr { display: inline-grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 50%; background: var(--akzent-weich); color: var(--accent); font-weight: 600; }
.posten-inhalt { display: grid; gap: var(--sp-8); flex: 1; min-width: 0; }
.posten-titel { font-weight: 600; padding-top: 4px; }

/* Tipp, Umschreiben, Löschen, Meldungen, Speichern statt Weiter (seit die Spalte «Ihr Assistent» weg ist) */
.so-geht-tipp { display: flex; gap: var(--sp-8); margin-top: var(--sp-12); padding-top: var(--sp-12); border-top: 1px solid var(--akzent-mittel); font-size: 15px; line-height: 1.45; }
.so-geht-tipp .icon { width: 18px; height: 18px; color: var(--accent); flex: none; margin-top: 2px; }
.umschreiben { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: var(--sp-12); }
.umschreiben-titel { display: inline-flex; align-items: center; gap: 6px; margin-right: var(--sp-4); }
.umschreiben-titel .icon { width: 16px; height: 16px; color: var(--accent); }
.schnellknopf { border: 1px solid var(--line); border-radius: 999px; background: var(--bg); color: var(--text); }
.schnellknopf:not(:disabled):hover { border-color: var(--accent); color: var(--accent); }
.loeschen-zeile { display: flex; justify-content: flex-end; margin-top: var(--sp-32); padding-top: var(--sp-16); border-top: 1px dashed var(--line); }
.hinweis-zeile { flex-wrap: wrap; align-items: center; }
.hinweis-zeile > span { flex: 1 1 240px; }
.meldung { display: flex; align-items: flex-start; gap: var(--sp-12); padding: var(--sp-16); margin-bottom: var(--sp-16); border-radius: var(--r-gross); }
.meldung-fehler { background: color-mix(in srgb, var(--danger) 10%, var(--bg)); border: 1px solid color-mix(in srgb, var(--danger) 35%, var(--bg)); }
.meldung-symbol { display: inline-grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 50%; background: var(--danger); color: var(--bg); font-weight: 700; }
.meldung-titel { font-weight: 600; }
.meldung p + p { margin-top: 2px; color: var(--muted); }
/* Fehler beim Hochladen (beitraege.js setzt status-fehler) */
.status.status-fehler { padding: var(--sp-8) var(--sp-12); border-radius: var(--r-ctl); background: color-mix(in srgb, var(--danger) 10%, var(--bg)); color: var(--danger); font-weight: 500; }
/* Weiter/Speichern: mit JS zeigt die Leiste «Speichern», sobald ein Formular geändert ist (beitraege.js). */
.js .speichern-knopf:not(.ist-aktiv), .js .weiter-knopf.ist-versteckt { display: none; }
html:not(.js) [data-alle-speichern] { display: none; }
/* Sprungziele mit tabindex=-1: kein Leuchtrahmen beim Anspringen. */
[tabindex="-1"]:focus { outline: none; }
/* --- Ende Beitrags-Assistent, geführt --- */

/* --- Erwähnungen (Plan EL, M8): Unternavigation, Reiter, Karten, Vorschläge, Erlaubnis-Dialog ------------------------
   Nur Klassen mit eigenem Präfix (unternav, reiter, erw, vorschlag, ki, erlaubnis). Farben und Abstände aus den Variablen. */
.unternav { margin-bottom: var(--sp-24); }
.unternav-liste { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-8); }
.unternav-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--sp-16); border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 15px; font-weight: 500; line-height: 1.2; text-decoration: none; transition: border-color 120ms ease-out, color 120ms ease-out; }
.unternav-link:hover { border-color: var(--field); color: var(--text); }
.unternav-link[aria-current] { border-color: var(--accent); background: var(--akzent-weich); color: var(--accent); font-weight: 600; }

/* Reiter «Offen (n)» | «Erledigt (n)»: Segmentleiste wie .segmente, aber Links. */
.reiter { display: flex; flex-wrap: wrap; gap: 4px; width: fit-content; max-width: 100%; margin-bottom: var(--sp-24); padding: 4px; border-radius: 12px; background: var(--surface); }
.reiter-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--sp-16); border-radius: 9px; color: var(--muted); font-weight: 500; font-variant-numeric: tabular-nums; text-decoration: none; }
.reiter-link:hover { color: var(--text); }
.reiter-link[aria-current] { background: var(--bg); color: var(--text); box-shadow: 0 1px 3px rgb(17 19 24 / .12); }

/* Karte je Erwähnung */
.erwaehnung-liste { list-style: none; padding: 0; display: grid; gap: var(--sp-16); grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
.erwaehnung { min-width: 0; border-radius: var(--r-gross); box-shadow: var(--schatten); }
.erwaehnung .karte-kopf { flex-wrap: wrap; gap: var(--sp-8); color: var(--muted); }
.erw-name { overflow-wrap: anywhere; }
.erw-name-zusatz { font-weight: 400; color: var(--muted); }
.erw-text { margin: 0; padding: var(--sp-12) var(--sp-16); border-left: 3px solid var(--akzent-mittel); border-radius: 0 var(--r-ctl) var(--r-ctl) 0; background: var(--surface); overflow-wrap: anywhere; white-space: pre-line; }
.erw-quelle, .erw-status { display: flex; align-items: flex-start; gap: var(--sp-8); }
.erw-quelle .icon, .erw-status .icon { width: 16px; height: 16px; margin-top: 4px; flex: none; }
.erw-status { font-size: 15px; font-weight: 500; }
.erw-status-ok { color: var(--ok); }
.erw-status-fehler { color: var(--danger); }
.erw-status-hilfe { display: block; font-weight: 400; }
.erw-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-8); margin-top: auto; padding-top: var(--sp-8); }
@media (max-width: 899px) {
  .erw-aktionen > .btn, .erw-aktionen > form { flex: 1 1 100%; }
  .erw-aktionen > form .btn { width: 100%; }
}

/* KI-Vorschläge (Danke sagen, Automatisch danken) */
.vorschlag-block { display: grid; gap: var(--sp-12); min-width: 0; }
.karte-gross > .vorschlag-block { padding-top: var(--sp-24); border-top: 1px solid var(--line); }
.ki-formular { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-12); }
.ki-formular .feld { min-width: min(100%, 200px); }
.vorschlag-liste { list-style: none; padding: 0; display: grid; gap: var(--sp-12); }
.vorschlag-karte { display: grid; gap: var(--sp-8); justify-items: start; padding: var(--sp-16); border: 1px solid var(--line); border-radius: 14px; background: var(--bg); overflow-wrap: anywhere; }
.vorschlag-nr { font-weight: 600; }
.vorschlag-wahl { display: block; width: 100%; margin-top: var(--sp-4); padding: var(--sp-12) var(--sp-16); border: 1px dashed var(--akzent-mittel); border-radius: 14px; background: var(--akzent-weich); color: var(--text); font: 400 16px/1.5 var(--font); text-align: left; white-space: pre-line; overflow-wrap: anywhere; cursor: pointer; transition: border-color 120ms ease-out; }
.vorschlag-wahl:hover { border-color: var(--accent); border-style: solid; }
.js .vorschlag-wahl.nur-mit-js { display: block !important; }

/* Erlaubnis-Dialog Kundenstimme (Legal 1.6 b): «Übernehmen» erst nach dem Häkchen. Bis dahin zeigt die Leiste den
   deaktivierten Knopf; der echte Absenden-Knopf erscheint per :has(), ohne JavaScript. */
.erlaubnis-dialog { display: grid; gap: var(--sp-12); padding: var(--sp-16) var(--sp-24); border: 1px solid var(--akzent-mittel); border-radius: var(--r-gross); background: var(--akzent-weich); }
.erlaubnis-dialog .kaestchen { background: var(--bg); }
/* «Übernehmen» erscheint erst, wenn alle Pflichtkästchen gesetzt sind (eines, mit Beitrags-Assistent-Zustimmung zwei). */
.erlaubnis-seite .uebernehmen-an { display: none; }
.erlaubnis-seite:not(:has(.erlaubnis-pflicht:not(:checked))) .uebernehmen-an { display: inline-flex; }
.erlaubnis-seite:not(:has(.erlaubnis-pflicht:not(:checked))) .uebernehmen-aus { display: none; }
@supports not selector(:has(*)) {
  .erlaubnis-seite .uebernehmen-an { display: inline-flex; }
  .erlaubnis-seite .uebernehmen-aus { display: none; }
}
/* Alleinstehende Text-Links (nicht im Satz): Trefferfläche mindestens 44 px hoch. */
.link-allein { display: inline-flex; align-items: center; min-height: 44px; }
/* Meldung mit Link «Aktualisieren» daneben (umbrechend bei 390 px). */
.hinweis-aktion { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--sp-16); row-gap: 0; }
.hinweis-aktion > span { flex: 1 1 240px; }
/* --- Ende Erwähnungen --- */

/* htmx: laufende Anfrage dezent anzeigen (ohne Inline-Stile von htmx) */
.htmx-request { opacity: .6; transition: opacity 120ms ease-out; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }

/* --- Links und QR-Codes (Plan EL, M9): Zweck-Kacheln, Link-Liste, Regeln, QR-Code, Statistik, Löschen -----------------
   Nur Klassen mit eigenem Präfix (zweck, einstieg, regeln, chat-knopf, qr, stat, loeschen). Farben und Abstände aus den Variablen. */
.zustimmung-karte { margin-bottom: var(--sp-24); }
.zustimmung-karte .zustimmung-formular { margin-top: var(--sp-16); gap: var(--sp-16); }
.zustimmung-karte .zustimmung-formular .kaestchen { align-items: flex-start; }
.zustimmung-karte .zustimmung-formular .kaestchen input { margin-top: 2px; }
.zweck-raster { list-style: none; padding: 0; display: grid; gap: var(--sp-12); grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
.zweck-raster > li { display: flex; min-width: 0; }
.zweck-hinweis { margin-bottom: var(--sp-16); }
.zweck-raster-gross { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: var(--sp-16); }
.zweck-kachel { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-12); width: 100%; min-height: 44px; padding: var(--sp-16); border: 1px solid var(--line); border-radius: 14px; background: var(--bg); color: var(--text); font: 400 16px/1.5 var(--font); text-align: left; cursor: pointer; transition: border-color 120ms ease-out, box-shadow 120ms ease-out; }
.zweck-kachel:hover:not(:disabled) { border-color: var(--accent); box-shadow: var(--schatten); }
.zweck-kachel:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.zweck-kachel:disabled { opacity: .6; cursor: not-allowed; }
.zweck-raster-gross .zweck-kachel { padding: var(--sp-24); }
.zweck-text { display: grid; gap: 2px; min-width: 0; }
.zweck-name { font-weight: 600; line-height: 1.3; }
.zweck-info { color: var(--muted); font-size: 14px; line-height: 1.45; }
.zweck-anlegen { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; color: var(--accent); font-size: 14px; font-weight: 600; }
.zweck-anlegen .icon { width: 16px; height: 16px; }
.zweck-kachel:disabled .zweck-anlegen { color: var(--muted); }

.einstieg-liste { list-style: none; padding: 0; display: grid; gap: var(--sp-16); grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.einstieg { min-width: 0; border-radius: var(--r-gross); box-shadow: var(--schatten); }
.einstieg .karte-kopf { flex-wrap: wrap; justify-content: flex-start; gap: var(--sp-8); color: var(--muted); }
.einstieg-zahlen { font-weight: 500; font-variant-numeric: tabular-nums; }

.regeln-liste { list-style: none; padding: 0; margin-top: var(--sp-8); display: grid; gap: var(--sp-8); }
.regeln-liste li { display: flex; gap: var(--sp-12); font-size: 15px; line-height: 1.45; }
.regeln-liste li::before { content: ""; width: 6px; height: 6px; flex: none; margin-top: .6em; border-radius: 50%; background: var(--accent); }

.chat-knopf { display: inline-block; padding: 6px var(--sp-16); border: 1px solid var(--accent); border-radius: 999px; background: var(--bg); color: var(--accent); font-size: 14px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }

.qr-block { display: grid; gap: var(--sp-16); justify-items: start; min-width: 0; }
/* Weisser Grund mit Rand ist Absicht: QR-Scanner brauchen dunkle Module auf hellem Grund, auch im Dunkelmodus. */
.qr-bild { display: block; box-sizing: border-box; width: min(100%, 260px); height: auto; aspect-ratio: 1; padding: var(--sp-12); border: 1px solid var(--line); border-radius: var(--r-ctl); background: #FFFFFF; image-rendering: pixelated; }
.qr-downloads { display: flex; flex-wrap: wrap; gap: var(--sp-8); }
@media (max-width: 899px) { .qr-downloads > .btn { flex: 1 1 100%; } }

.stat-karte { min-width: 0; }
.stat-band { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 0; }
.stat-band > div { min-width: 0; padding: var(--sp-12); overflow-wrap: anywhere; }
.stat-details { min-width: 0; }
.stat-details > summary { display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; color: var(--accent); font-weight: 600; }
.stat-details > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.stat-tabelle th, .stat-tabelle td { padding-inline: var(--sp-8); font-variant-numeric: tabular-nums; }
.stat-tabelle thead th { vertical-align: bottom; }
.stat-tabelle .stat-zahl { text-align: right; }

.loeschen-bereich { padding-top: var(--sp-16); border-top: 1px dashed var(--line); }
.loeschen-details > summary { display: inline-flex; list-style: none; cursor: pointer; }
.loeschen-details > summary::-webkit-details-marker { display: none; }
.loeschen-details > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.kunde-aktionen { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--sp-12); margin-top: var(--sp-12); }
.loeschen-inhalt { display: grid; gap: var(--sp-12); margin-top: var(--sp-16); justify-items: start; }
/* --- Ende Links und QR-Codes --- */

/* --- Admin Guthaben (P1.3): Seiten /admin/guthaben und /admin/guthaben/<id>; Knopfreihe in /admin --- */
.admin-links { display: flex; flex-wrap: wrap; gap: var(--sp-12); }
.admin-guthaben-seite .zahl { font-variant-numeric: tabular-nums; }
.admin-guthaben-seite .kennung { overflow-wrap: anywhere; font-size: 14px; }
.admin-guthaben-seite .chip-sperre { border-color: var(--danger); color: var(--text); white-space: normal; }
@media (pointer: coarse), (max-width: 899px) {
  .admin-guthaben-seite a.link { display: inline-flex; align-items: center; min-height: 44px; }
}
.admin-guthaben-seite .zeile-erledigt { color: var(--muted); }
.admin-guthaben-seite .zuordnen-formular { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-8); }
.admin-guthaben-seite .zuordnen-formular .input { width: 7rem; flex: none; }
.admin-guthaben-seite .zuordnen-formular .fehlertext { flex-basis: 100%; margin: 0; }
.admin-guthaben-seite .zuordnen-formular .btn { white-space: normal; min-width: 0; line-height: 1.25; padding-block: 6px; }
/* --- Ende Admin Guthaben --- */

/* --- ClipDesk Guthaben (P1.4): Seite /guthaben auf dem Host clipdesk --- */
.guthaben-seite .zur-start { display: inline-flex; align-items: center; min-height: 24px; }
.guthaben-seite .schritte { padding-left: var(--sp-24); margin-bottom: var(--sp-16); }
.guthaben-seite .schritte li + li { margin-top: var(--sp-4); }
.guthaben-seite .paket-liste { margin-bottom: var(--sp-16); }
.guthaben-seite .paket-liste .btn { width: 100%; white-space: normal; text-align: center; line-height: 1.25; padding-block: 8px; }
@media (min-width: 640px) { .guthaben-seite .paket-liste { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); } }
.guthaben-seite .formular { margin-bottom: var(--sp-24); }
@media (pointer: coarse), (max-width: 899px) {
  .guthaben-seite a.link { display: inline-flex; align-items: center; min-height: 44px; }
}
/* --- Ende ClipDesk Guthaben --- */