/* ==========================================================================
   Marketingpoint Community – Stylesheet
   Look: Petrol, warmes Papier, Salbei-Grün, Gold-Akzente (angelehnt an as-newmedia.de)
   Keine externen Fonts: System-Schriften (Georgia für Überschriften), DSGVO-freundlich.
   Farben erfüllen WCAG 2.2 AA (Text ≥ 4.5:1, UI ≥ 3:1).
   ========================================================================== */

:root {
  --font: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --font-display: "Segoe UI Variable Display", "SF Pro Display", -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  /* Markenfarben (feste Werte, unabhängig vom Modus) */
  --petrol: #102f34;
  --petrol-deep: #0b2327;
  --petrol-glow: rgb(47 125 109 / .35);
  --sage-light: #9fc8b3;
  --brand-yellow: #f3e20f;        /* aus dem Logo */
  --brand-yellow-text: #1f1c02;
  --brand-red: #e3162a;           /* i-Punkt im Logo */
  --cover: radial-gradient(circle at 80% 20%, rgb(159 200 179 / .35), transparent 60%),
           radial-gradient(circle at 10% 90%, rgb(243 226 15 / .18), transparent 55%),
           linear-gradient(135deg, #102f34, #2f7d6d);
  --on-petrol: #f5f1e8;
  --on-petrol-muted: #b8cbc5;

  --bg: #f6f1e7;
  --surface: #fffdf8;
  --surface-2: #f1eadd;
  --border: #e4d9c6;
  --border-strong: #8f8676;
  --text: #171512;
  --text-muted: #5c574e;
  --accent: #2f7d6d;
  --accent-hover: #256557;
  --accent-contrast: #ffffff;
  --accent-soft: #dcebe4;
  --accent-text: #23685a;
  --danger: #a3262b;
  --danger-soft: #fbeceb;
  --success: #1f6f4a;
  --success-soft: #e2f1e8;
  --warning: #7a5412;
  --warning-soft: #f6ead0;
  --gold: #f3e20f;
  --gold-text: #1f1c02;
  --focus: #1f6feb;
  --pill-active-bg: #102f34;
  --pill-active-text: #f5f1e8;
  --shadow: 0 1px 2px rgb(40 30 15 / .05), 0 4px 14px rgb(40 30 15 / .06);
  --shadow-lg: 0 24px 60px rgb(22 20 18 / .14);

  --radius: 16px;
  --radius-sm: 10px;
  --header-h: 68px;
  --container: 1160px;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #081619;
    --surface: #0e2327;
    --surface-2: #143036;
    --border: #22424a;
    --border-strong: #5f8080;
    --text: #f2eee5;
    --text-muted: #a8bab5;
    --accent: #7cc4ab;
    --accent-hover: #97d4be;
    --accent-contrast: #06201b;
    --accent-soft: #143a33;
    --accent-text: #8fd1b8;
    --danger: #ff8a80;
    --danger-soft: #3a1c1e;
    --success: #6fd39b;
    --success-soft: #12311f;
    --warning: #f0c060;
    --warning-soft: #33280f;
    --focus: #9fc8b3;
    --pill-active-bg: #9fc8b3;
    --pill-active-text: #0b2327;
    --shadow: 0 1px 2px rgb(0 0 0 / .4);
    --shadow-lg: 0 24px 60px rgb(0 0 0 / .5);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg: #081619;
  --surface: #0e2327;
  --surface-2: #143036;
  --border: #22424a;
  --border-strong: #5f8080;
  --text: #f2eee5;
  --text-muted: #a8bab5;
  --accent: #7cc4ab;
  --accent-hover: #97d4be;
  --accent-contrast: #06201b;
  --accent-soft: #143a33;
  --accent-text: #8fd1b8;
  --danger: #ff8a80;
  --danger-soft: #3a1c1e;
  --success: #6fd39b;
  --success-soft: #12311f;
  --warning: #f0c060;
  --warning-soft: #33280f;
  --focus: #9fc8b3;
  --pill-active-bg: #9fc8b3;
  --pill-active-text: #0b2327;
  --shadow: 0 1px 2px rgb(0 0 0 / .4);
  --shadow-lg: 0 24px 60px rgb(0 0 0 / .5);
  color-scheme: dark;
}

/* ---------- Basis ---------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text);
  background:
    radial-gradient(circle at 92% 0%, rgb(47 125 109 / .10), transparent 520px),
    radial-gradient(circle at 0% 60%, rgb(111 141 122 / .08), transparent 480px),
    var(--bg);
  background-attachment: fixed;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

img, svg, video { max-width: 100%; }
img { height: auto; display: block; }

h1, h2, h3, h4 { line-height: 1.25; margin: 0 0 .5em; font-weight: 700; letter-spacing: -.01em; }
h1, h2 { font-family: var(--font-display); font-weight: 700; letter-spacing: -.015em; }
h1 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem); }
h2 { font-size: 1.35rem; }
.card__title, .chat__head h2, .poll__title { font-family: var(--font); letter-spacing: 0; }
h3 { font-size: 1.1rem; }
p { margin: 0 0 1em; }

a { color: var(--accent-text); text-underline-offset: .15em; }
a:hover { text-decoration-thickness: 2px; }

hr { border: 0; border-top: 1px solid var(--border); margin: 1.5rem 0; }

code { font-family: var(--font-mono); font-size: .9em; background: var(--surface-2); padding: .1em .35em; border-radius: 4px; }

blockquote { margin: 1em 0; padding: .5em 1em; border-left: 4px solid var(--accent); background: var(--surface-2); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 1rem; top: -100px; z-index: 100;
  background: var(--accent); color: var(--accent-contrast); padding: .75rem 1rem;
  border-radius: var(--radius-sm); font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: 1rem; }

.icon { width: 1.15em; height: 1.15em; flex-shrink: 0; vertical-align: -.2em; }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 16px; }

.muted { color: var(--text-muted); }
.small { font-size: .875rem; }
.stack > * + * { margin-top: 1rem; }
.row { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.row--between { justify-content: space-between; }
.row--center { justify-content: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mt-1 { margin-top: 1rem; }
.nowrap { white-space: nowrap; }

/* ---------- Header --------------------------------------------------------- */

/* Petrol-Header in beiden Modi – eigene lokale Farbwerte */
.site-header, .group-bar, .site-footer, .hero {
  --focus: var(--sage-light);
  color: var(--on-petrol);
}
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgb(11 35 39 / .96);
  border-bottom: 1px solid rgb(159 200 179 / .12);
}
/* Glas-Effekt, wo der Browser ihn unterstützt */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .site-header {
    background: rgb(11 35 39 / .78);
    -webkit-backdrop-filter: saturate(160%) blur(16px);
    backdrop-filter: saturate(160%) blur(16px);
  }
}
.header-inner { display: flex; align-items: center; gap: 1rem; min-height: var(--header-h); }

.brand { display: inline-flex; align-items: center; gap: .75rem; font-weight: 700; font-size: 1.1rem; color: var(--on-petrol); text-decoration: none; }
.brand { flex-shrink: 0; }
.brand__img { height: 44px; width: auto; max-width: none; }
.brand__name { font-family: var(--font); font-weight: 700; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--sage-light); padding-left: .75rem; border-left: 1px solid rgb(159 200 179 / .3); }
.brand__logo { width: 34px; height: 34px; border-radius: 10px; background: var(--accent); color: #fff; display: grid; place-items: center; font-size: .95rem; }

.main-nav { display: flex; gap: .25rem; margin-left: .5rem; }
.main-nav a { color: var(--on-petrol-muted); text-decoration: none; padding: .45rem .9rem; border-radius: 999px; font-weight: 600; font-size: .95rem; }
.main-nav a:hover { background: rgb(255 255 255 / .08); color: var(--on-petrol); }
.main-nav a { position: relative; }
.main-nav a[aria-current="page"] { color: var(--on-petrol); }
.main-nav a[aria-current="page"]::after { content: ""; position: absolute; left: .9rem; right: .9rem; bottom: .1rem; height: 2px; border-radius: 2px; background: var(--brand-yellow); }

.site-header .icon-btn { color: var(--on-petrol-muted); }
.site-header .icon-btn:hover { background: rgb(255 255 255 / .08); color: var(--on-petrol); }
.site-header .icon-btn[aria-current="page"] { background: rgb(159 200 179 / .16); color: var(--on-petrol); }
.site-header .count-badge { border-color: var(--petrol); background: #e3162a; color: #fff; }
.site-header .btn--ghost { color: var(--on-petrol); }
.site-header .btn--ghost:hover { background: rgb(255 255 255 / .08); color: var(--on-petrol); }
.site-header .btn--primary { background: var(--brand-yellow); border-color: var(--brand-yellow); color: var(--brand-yellow-text); }
.site-header .btn--primary:hover { filter: brightness(1.05); background: var(--brand-yellow); }
.site-header .menu > summary .avatar { box-shadow: 0 0 0 2px rgb(159 200 179 / .45); }

.header-actions { margin-left: auto; display: flex; align-items: center; gap: .5rem; }

.icon-btn {
  display: inline-grid; place-items: center; width: 44px; height: 44px;
  border: 0; background: transparent; color: var(--text-muted); border-radius: 50%; cursor: pointer;
}
.icon-btn:hover { background: var(--surface-2); color: var(--text); }
.icon-btn .icon { width: 22px; height: 22px; }

.theme-toggle .icon-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: inline; }

/* Dropdown mit <details> – funktioniert ohne JavaScript */
.menu { position: relative; }
.menu > summary { list-style: none; cursor: pointer; border-radius: 50%; display: flex; align-items: center; min-height: 44px; }
.menu > summary::-webkit-details-marker { display: none; }
.menu__panel {
  position: absolute; right: 0; top: calc(100% + 8px); min-width: 230px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); padding: .5rem; z-index: 60;
}
.menu__panel a, .menu__panel button {
  display: flex; align-items: center; gap: .6rem; width: 100%; padding: .6rem .75rem;
  color: var(--text); text-decoration: none; background: none; border: 0; border-radius: var(--radius-sm);
  font: inherit; cursor: pointer; text-align: left;
}
.menu__panel a:hover, .menu__panel button:hover { background: var(--surface-2); }
.menu__head { padding: .5rem .75rem .75rem; border-bottom: 1px solid var(--border); margin-bottom: .35rem; }
.menu__head strong { display: block; }

/* ---------- Gruppen-Kopf & Tabs ------------------------------------------- */

.group-bar {
  background:
    radial-gradient(circle at 12% 120%, rgb(111 141 122 / .28), transparent 420px),
    radial-gradient(circle at 88% -20%, var(--petrol-glow), transparent 460px),
    linear-gradient(180deg, var(--petrol), #133a40);
  box-shadow: 0 10px 30px rgb(11 35 39 / .18);
}
.group-bar__top { display: flex; align-items: center; gap: .85rem; padding-top: 1.25rem; }
.group-bar__name { font-family: var(--font-display); font-size: clamp(1.3rem, 1.1rem + .7vw, 1.7rem); font-weight: 700; letter-spacing: -.025em; margin: 0; }
.group-bar__name a { color: var(--on-petrol); text-decoration: none; }
.group-logo { width: 44px; height: 44px; border-radius: 12px; object-fit: cover; background: rgb(159 200 179 / .16); color: var(--sage-light); display: grid; place-items: center; font-weight: 700; flex-shrink: 0; box-shadow: inset 0 0 0 1px rgb(159 200 179 / .3); }
.group-bar .badge--gold { background: var(--brand-yellow); color: var(--brand-yellow-text); }

.tabs { display: flex; gap: .25rem; overflow-x: auto; scrollbar-width: none; margin-top: .75rem; }
.tabs::-webkit-scrollbar { display: none; }
.tabs a {
  display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap;
  padding: .75rem .95rem; color: var(--on-petrol-muted); text-decoration: none; font-weight: 600;
  border-bottom: 3px solid transparent; min-height: 44px;
}
.tabs a:hover { color: var(--on-petrol); }
.tabs a[aria-current="page"] { color: var(--on-petrol); border-bottom-color: var(--brand-yellow); }

.group-bar .group-search { background: rgb(255 255 255 / .08); border-color: rgb(159 200 179 / .28); }
.group-bar .group-search input { color: var(--on-petrol); }
.group-bar .group-search input::placeholder { color: var(--on-petrol-muted); }
.group-bar .icon-btn { color: var(--on-petrol-muted); }
.group-bar .icon-btn:hover { background: rgb(255 255 255 / .08); color: var(--on-petrol); }

/* ---------- Main & Footer ------------------------------------------------- */

main { flex: 1; padding-block: 1.5rem 3rem; }
main:focus { outline: none; }

.site-footer { background: linear-gradient(180deg, var(--petrol), var(--petrol-deep)); padding-block: 1.5rem; font-size: .9rem; }
.site-footer .container { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; justify-content: space-between; align-items: center; }
.site-footer nav { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.site-footer a, .site-footer .muted { color: var(--on-petrol-muted); }
.site-footer a:hover { color: var(--on-petrol); }
.footer-brand { display: flex; align-items: center; gap: .75rem; }
.footer-brand img { height: 32px; width: auto; }

/* ---------- Layouts ------------------------------------------------------- */

.layout-sidebar { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 1.5rem; align-items: start; }
.layout-sidebar > aside { position: sticky; top: calc(var(--header-h) + 16px); display: grid; gap: 1rem; }
.layout-narrow { max-width: 760px; margin-inline: auto; }
.layout-auth { max-width: 440px; margin: 2rem auto; }

@media (max-width: 480px) {
  .brand__name { display: none; }
  .brand__img { height: 32px; }
  .header-inner { gap: .5rem; }
  .header-actions { gap: .25rem; }
  .header-actions .btn { padding-inline: .7rem; }
  .header-actions .header-register { display: none; }
}

@media (max-width: 900px) {
  .layout-sidebar { grid-template-columns: minmax(0, 1fr); }
  .layout-sidebar > aside { position: static; order: 2; }
  .main-nav { display: none; }
}

/* ---------- Karten -------------------------------------------------------- */

.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.25rem; }
.card--flush { padding: 0; overflow: hidden; }
.card__title { font-size: 1rem; margin-bottom: .75rem; }
.card + .card { margin-top: 1rem; }
.card__pad { padding: 1.25rem 1.25rem 0; }

.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.page-head h1 { margin: 0; }
.page-head p { margin: .25rem 0 0; }

/* ---------- Buttons ------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 44px; padding: .55rem 1.1rem; border-radius: 999px;
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--text);
  font: inherit; font-weight: 650; text-decoration: none; cursor: pointer; line-height: 1.2;
  transition: background-color .15s, border-color .15s, color .15s;
}
.btn:hover { background: var(--surface-2); }
.btn--primary { background: var(--accent); border-color: var(--accent); color: var(--accent-contrast); }
.btn--primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn--gold { background: var(--gold); border-color: var(--gold); color: var(--gold-text); }
.btn--gold:hover { filter: brightness(.95); background: var(--gold); }
.btn--danger { color: var(--danger); border-color: var(--danger); }
.btn--danger:hover { background: var(--danger-soft); }
.btn--ghost { border-color: transparent; background: transparent; color: var(--text-muted); }
.btn--ghost:hover { color: var(--text); background: var(--surface-2); }
.btn--sm { min-height: 36px; padding: .35rem .75rem; font-size: .9rem; }
.btn--block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }

.link-btn { background: none; border: 0; padding: 0; font: inherit; color: var(--accent-text); text-decoration: underline; cursor: pointer; }

.inline-form { display: inline; }

/* ---------- Formulare ----------------------------------------------------- */

.field { margin-bottom: 1.1rem; }
.field label, .label { display: block; font-weight: 650; margin-bottom: .35rem; }
.field .hint { color: var(--text-muted); font-size: .875rem; margin: .3rem 0 0; }

input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="url"], input[type="number"],
input[type="search"], input[type="date"], input[type="time"], input[type="file"], select, textarea {
  width: 100%; min-height: 44px; padding: .6rem .8rem;
  font: inherit; color: var(--text); background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
}
input[type="file"] { padding: .45rem; }
textarea { min-height: 120px; resize: vertical; line-height: 1.5; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--focus); outline-offset: 0; border-color: var(--focus); }
[aria-invalid="true"] { border-color: var(--danger) !important; }
.field-error { color: var(--danger); font-size: .9rem; font-weight: 600; margin: .35rem 0 0; }
.field-error::before { content: "⚠ "; }

.check { display: flex; gap: .6rem; align-items: flex-start; font-weight: 400; }
.check input { width: 20px; height: 20px; margin-top: .2rem; flex-shrink: 0; accent-color: var(--accent); }

.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0 1rem; }

fieldset { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 1rem 1rem .25rem; margin: 0 0 1.1rem; }
legend { font-weight: 700; padding: 0 .35rem; }

.hp-field { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.input-narrow { width: 90px !important; flex: 0 0 90px; }
.row > input[type="text"], .row > input[type="search"] { flex: 1 1 180px; width: auto; }
.row > .field { flex: 1 1 220px; }
.row > .field:has(.input-narrow) { flex: 0 0 auto; }
.module-block__head > form:first-child { flex: 1; }

/* ---------- Hinweise / Flash ---------------------------------------------- */

.alert { display: flex; gap: .6rem; align-items: flex-start; padding: .85rem 1rem; border-radius: var(--radius-sm); border: 1px solid; margin-bottom: 1rem; }
.alert p { margin: 0; }
.alert--success { background: var(--success-soft); border-color: var(--success); color: var(--text); }
.alert--error { background: var(--danger-soft); border-color: var(--danger); color: var(--text); }
.alert--info { background: var(--accent-soft); border-color: var(--accent); color: var(--text); }
.alert--warning { background: var(--warning-soft); border-color: var(--warning); color: var(--text); }
.alert .icon { margin-top: .2rem; }

.error-summary { border: 2px solid var(--danger); background: var(--danger-soft); border-radius: var(--radius-sm); padding: 1rem; margin-bottom: 1.25rem; }
.error-summary h2 { font-size: 1rem; margin-bottom: .5rem; }
.error-summary ul { margin: 0; padding-left: 1.2rem; }

/* ---------- Avatare & Badges ---------------------------------------------- */

.avatar { border-radius: 50%; object-fit: cover; display: inline-grid; place-items: center; font-weight: 700; color: #fff; flex-shrink: 0; }
.avatar--xs { width: 28px; height: 28px; font-size: .7rem; }
.avatar--sm { width: 36px; height: 36px; font-size: .8rem; }
.avatar--md { width: 44px; height: 44px; font-size: .95rem; }
.avatar--lg { width: 96px; height: 96px; font-size: 2rem; }
.avatar--c0 { background: #2f7d6d; } .avatar--c1 { background: #1d4f57; } .avatar--c2 { background: #7a3e48; }
.avatar--c3 { background: #8a611a; } .avatar--c4 { background: #3d5a80; } .avatar--c5 { background: #4f6b58; }

.avatar-wrap { position: relative; display: inline-flex; flex-shrink: 0; }
.avatar-wrap .level-badge { position: absolute; right: -4px; bottom: -4px; }
.level-badge {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 999px; background: var(--accent); color: var(--accent-contrast);
  font-size: .7rem; font-weight: 700; border: 2px solid var(--surface); line-height: 1;
}

.badge { display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .55rem; border-radius: 999px; font-size: .78rem; font-weight: 700; background: var(--surface-2); color: var(--text-muted); white-space: nowrap; }
.badge--accent { background: var(--accent-soft); color: var(--accent-text); }
.badge--success { background: var(--success-soft); color: var(--success); }
.badge--warning { background: var(--warning-soft); color: var(--warning); }
.badge--danger { background: var(--danger-soft); color: var(--danger); }
.badge--gold { background: var(--gold); color: var(--gold-text); }

.online-dot { width: 10px; height: 10px; background: #22a55a; border-radius: 50%; border: 2px solid var(--surface); position: absolute; left: 0; bottom: 0; }

/* ---------- Gruppen-Übersicht --------------------------------------------- */

/* Individuelle Farbcover (wenn kein Titelbild hochgeladen ist) – je Gruppe/Kurs eine Variante */
.cover-0 { --cover-a: #1f7a6a; --cover-b: #0b2327; --cover-c: #9fc8b3; }
.cover-1 { --cover-a: #2f7d6d; --cover-b: #0b2327; --cover-c: #f3e20f; }
.cover-2 { --cover-a: #1d6a7a; --cover-b: #0a1f28; --cover-c: #7cd0e0; }
.cover-3 { --cover-a: #4f8a6b; --cover-b: #12302a; --cover-c: #d7ec8a; }
.cover-4 { --cover-a: #3b6e8f; --cover-b: #0d1f2e; --cover-c: #9fc8b3; }
.cover-5 { --cover-a: #4b5a9a; --cover-b: #151a33; --cover-c: #7cd0e0; }
.cover-0, .cover-1, .cover-2, .cover-3, .cover-4, .cover-5 {
  background: linear-gradient(135deg, var(--cover-b), var(--cover-a)); /* Fallback ohne color-mix */
  background:
    radial-gradient(circle at 85% 15%, color-mix(in srgb, var(--cover-c) 45%, transparent), transparent 55%),
    radial-gradient(circle at 0% 100%, color-mix(in srgb, var(--cover-a) 90%, transparent), transparent 70%),
    linear-gradient(135deg, var(--cover-b), var(--cover-a));
}

.group-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1rem; }
.group-card {
  display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border);
  border-radius: 20px; overflow: hidden; box-shadow: var(--shadow); position: relative;
  transition: box-shadow .2s, transform .2s, border-color .2s;
}
.group-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
.group-card:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.group-card__media { position: relative; aspect-ratio: 16 / 7; max-height: 150px; width: 100%; overflow: hidden; }
.group-card__media img { width: 100%; height: 100%; object-fit: cover; }
.group-card__mono {
  position: relative; margin: -2.6rem 0 .35rem; width: 52px; height: 52px; border-radius: 16px;
  display: grid; place-items: center; font-weight: 700; font-size: 1rem; letter-spacing: -.02em;
  background: var(--surface); color: var(--text); box-shadow: 0 6px 18px rgb(0 0 0 / .18); border: 1px solid var(--border);
}
.group-card__chip { position: absolute; top: .7rem; right: .7rem; }
.group-card__body { padding: 0 1rem 1rem; display: flex; flex-direction: column; gap: .35rem; flex: 1; }
.group-card__title { font-size: 1.02rem; margin: 0; letter-spacing: -.01em; }
.group-card__title a { color: var(--text); text-decoration: none; }
.group-card__title a::after { content: ""; position: absolute; inset: 0; } /* ganze Karte klickbar */
.group-card__title a:focus-visible { outline: none; }
.group-card__tagline { color: var(--text-muted); font-size: .88rem; line-height: 1.45; margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.group-card__meta { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: .5rem; font-size: .85rem; color: var(--text-muted); padding-top: .75rem; }
.group-card__go { display: inline-flex; align-items: center; gap: .25rem; font-weight: 700; color: var(--accent-text); }
.group-card:hover .group-card__go .icon { transform: translateX(3px); }
.group-card__go .icon { transition: transform .2s; }

.hero {
  position: relative; overflow: hidden; isolation: isolate;
  padding: clamp(2.5rem, 7vw, 5rem) clamp(1.25rem, 5vw, 4rem); margin-bottom: 1.5rem; border-radius: 28px;
  background:
    radial-gradient(ellipse at 90% 0%, rgb(159 200 179 / .30), transparent 50%),
    radial-gradient(ellipse at 0% 100%, rgb(47 125 109 / .45), transparent 55%),
    radial-gradient(circle at 60% 120%, rgb(243 226 15 / .12), transparent 40%),
    linear-gradient(160deg, #071a1d, #102f34 55%, #15393f);
  box-shadow: var(--shadow-lg);
}
/* feines Raster im Hintergrund */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .5;
  background-image: linear-gradient(rgb(255 255 255 / .05) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / .05) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse at 70% 30%, #000 10%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at 70% 30%, #000 10%, transparent 70%);
}
.hero__inner { max-width: 720px; }
.hero h1 { color: var(--on-petrol); font-size: clamp(2.1rem, 1.3rem + 3.2vw, 3.6rem); line-height: 1.04; letter-spacing: -.035em; margin-bottom: 1rem; }
.hero h1 em {
  font-style: normal; background: linear-gradient(90deg, var(--brand-yellow), var(--sage-light));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero__kicker {
  display: inline-flex; align-items: center; gap: .5rem; padding: .35rem .8rem; border-radius: 999px;
  background: rgb(255 255 255 / .07); box-shadow: inset 0 0 0 1px rgb(159 200 179 / .25);
  font-size: .8rem; font-weight: 600; color: var(--on-petrol) !important; margin-bottom: 1.25rem;
}
.hero__kicker::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--brand-yellow); box-shadow: 0 0 0 4px rgb(243 226 15 / .2); }
.hero .btn--ghost-light { color: var(--on-petrol); border-color: rgb(159 200 179 / .35); background: rgb(255 255 255 / .04); }
.hero .btn--ghost-light:hover { background: rgb(255 255 255 / .1); }
.hero .btn--primary { background: var(--brand-yellow); border-color: var(--brand-yellow); color: var(--brand-yellow-text); box-shadow: 0 8px 24px rgb(243 226 15 / .25); }
.hero .btn--primary:hover { filter: brightness(1.05); background: var(--brand-yellow); }
.hero p { color: var(--on-petrol-muted); font-size: 1.1rem; max-width: 560px; }
.hero__actions { display: flex; gap: .75rem; flex-wrap: wrap; margin: 1.75rem 0 0; }

.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin: 2.25rem 0 1rem; }
.section-head h2 { margin: 0; font-size: 1.35rem; }
.eyebrow { display: block; font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-text); margin-bottom: .25rem; }
.section-title { font-size: 1.35rem; margin: 2.25rem 0 1rem; }

/* ---------- Feed ---------------------------------------------------------- */

.composer { display: flex; gap: .75rem; align-items: center; }
summary.composer { list-style: none; cursor: pointer; }
summary.composer::-webkit-details-marker { display: none; }
.composer__fake { display: block; flex: 1; padding: .7rem 1rem; border-radius: 999px; background: var(--surface-2); color: var(--text-muted); border: 1px solid var(--border); }
details[open] .composer__fake { display: none; }
.composer-form { margin-top: 1rem; }

.pills { display: flex; gap: .5rem; flex-wrap: wrap; margin: 1rem 0; list-style: none; padding: 0; }
.pills a { display: inline-flex; align-items: center; min-height: 36px; padding: .3rem .9rem; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); color: var(--text); text-decoration: none; font-weight: 600; font-size: .9rem; }
.pills a:hover { border-color: var(--border-strong); }
.pills a[aria-current="true"] { background: var(--pill-active-bg); color: var(--pill-active-text); border-color: var(--pill-active-bg); }

.post-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }

.post { position: relative; }
.post--pinned { border-color: var(--accent); box-shadow: inset 4px 0 0 var(--accent), var(--shadow); }
.post__head { display: flex; gap: .75rem; align-items: center; margin-bottom: .75rem; }
.post__author { font-weight: 700; color: var(--text); text-decoration: none; }
.post__meta { font-size: .85rem; color: var(--text-muted); display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.post__title { font-size: 1.15rem; margin: 0 0 .35rem; }
.post__title a { color: var(--text); text-decoration: none; }
.post__title a:hover { text-decoration: underline; }
.post__excerpt { color: var(--text-muted); margin: 0; overflow-wrap: anywhere; }
.post__foot { display: flex; align-items: center; gap: 1rem; margin-top: .9rem; color: var(--text-muted); font-size: .9rem; flex-wrap: wrap; }
.post__stat { display: inline-flex; align-items: center; gap: .35rem; }
.pinned-label { display: inline-flex; align-items: center; gap: .3rem; font-size: .8rem; font-weight: 700; color: var(--warning); }

.prose { overflow-wrap: anywhere; }
.prose > :last-child { margin-bottom: 0; }
.prose h2 { font-size: 1.2rem; margin-top: 1.4em; }
.prose h3 { font-size: 1.05rem; margin-top: 1.2em; }
.prose h4 { font-size: 1rem; }
.prose ul, .prose ol { padding-left: 1.4rem; margin: 0 0 1em; }
.prose li + li { margin-top: .25em; }

.like-btn {
  display: inline-flex; align-items: center; gap: .4rem; min-height: 36px; padding: .3rem .7rem;
  border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text-muted);
  font: inherit; font-weight: 650; font-size: .9rem; cursor: pointer;
}
.like-btn:hover { border-color: var(--border-strong); color: var(--text); }
.like-btn[aria-pressed="true"] { color: var(--danger); border-color: var(--danger); background: var(--danger-soft); }
.like-btn[aria-pressed="true"] .icon { fill: currentColor; }

/* Kommentare */
.comments { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; }
.comment { display: flex; gap: .75rem; }
.comment__body { flex: 1; min-width: 0; }
.comment__bubble { background: var(--surface-2); border-radius: var(--radius); padding: .65rem .9rem; }
.comment__bubble .prose p { margin-bottom: .5em; }
.comment__name { font-weight: 700; color: var(--text); text-decoration: none; font-size: .95rem; }
.comment__actions { display: flex; gap: .75rem; align-items: center; margin-top: .3rem; font-size: .85rem; color: var(--text-muted); flex-wrap: wrap; }
.comment__actions .like-btn { min-height: 32px; padding: .15rem .6rem; font-size: .85rem; }
.replies { list-style: none; padding: 0; margin: .75rem 0 0; display: grid; gap: .75rem; }
.reply-form { margin-top: .5rem; }
.reply-form summary { cursor: pointer; color: var(--text-muted); font-weight: 600; display: inline-flex; align-items: center; gap: .3rem; min-height: 32px; }

/* ---------- Sidebar ------------------------------------------------------- */

.side-group__cover { aspect-ratio: 16 / 8; width: 100%; object-fit: cover; }
.side-group__body { padding: 1rem 1.1rem; }
.side-stats { display: grid; grid-template-columns: repeat(2, 1fr); text-align: center; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: .75rem 0; margin: 1rem 0; }
.side-stats strong { display: block; font-size: 1.15rem; }
.side-stats span { color: var(--text-muted); font-size: .85rem; }

.mini-board { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.mini-board li { display: flex; align-items: center; gap: .6rem; }
.mini-board .rank { width: 1.6rem; text-align: center; font-weight: 700; color: var(--text-muted); }
.mini-board .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); text-decoration: none; font-weight: 600; }
.mini-board .pts { font-weight: 700; color: var(--accent-text); font-size: .9rem; }

/* ---------- Pagination ---------------------------------------------------- */

.pagination { display: flex; justify-content: center; align-items: center; gap: .5rem; margin-top: 1.5rem; flex-wrap: wrap; }
.pagination a, .pagination span { min-width: 44px; min-height: 44px; display: inline-grid; place-items: center; padding: 0 .75rem; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface); text-decoration: none; color: var(--text); font-weight: 600; }
.pagination [aria-current="page"] { background: var(--text); color: var(--surface); border-color: var(--text); }

/* ---------- Mitglieder ---------------------------------------------------- */

.member-list { list-style: none; margin: 0; padding: 0; }
.member-list li { display: flex; gap: 1rem; align-items: center; padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); }
.member-list li:last-child { border-bottom: 0; }
.member-list .info { flex: 1; min-width: 0; }
.member-list .name { font-weight: 700; color: var(--text); text-decoration: none; }
.member-list .bio { color: var(--text-muted); font-size: .9rem; margin: .1rem 0 0; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

.search-form { display: flex; gap: .5rem; max-width: 420px; }

/* ---------- Rangliste ----------------------------------------------------- */

.level-overview { display: grid; grid-template-columns: auto 1fr; gap: 2rem; align-items: center; }
.level-overview__me { text-align: center; }
.level-overview__me .avatar-wrap { margin-bottom: .5rem; }
@media (max-width: 640px) {
  .level-overview { grid-template-columns: 1fr; gap: 1.25rem; }
}
.level-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .5rem 1.5rem; }
.level-list li { display: flex; align-items: center; gap: .6rem; font-size: .9rem; }
.level-list .level-badge { width: 28px; height: 28px; font-size: .8rem; }
.level-list .locked { color: var(--text-muted); }

progress { appearance: none; -webkit-appearance: none; width: 100%; height: 8px; border: 0; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
progress::-webkit-progress-bar { background: var(--surface-2); border-radius: 999px; }
progress::-webkit-progress-value { background: var(--accent); border-radius: 999px; }
progress::-moz-progress-bar { background: var(--accent); border-radius: 999px; }
progress.progress--success::-webkit-progress-value { background: var(--success); }
progress.progress--success::-moz-progress-bar { background: var(--success); }

.boards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; margin-top: 1rem; }
.board { list-style: none; margin: 0; padding: 0; }
.board li { display: flex; align-items: center; gap: .7rem; padding: .55rem 0; border-bottom: 1px solid var(--border); }
.board li:last-child { border-bottom: 0; }
.board .rank { width: 1.8rem; height: 1.8rem; display: grid; place-items: center; font-weight: 700; border-radius: 50%; font-size: .85rem; color: var(--text-muted); }
.board li:nth-child(1) .rank { background: var(--gold); color: var(--gold-text); }
.board li:nth-child(2) .rank { background: #c9ced6; color: #1d2128; }
.board li:nth-child(3) .rank { background: #d99a6c; color: #2b1606; }
.board .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); text-decoration: none; font-weight: 600; }
.board .pts { font-weight: 700; color: var(--accent-text); }

/* ---------- Classroom ----------------------------------------------------- */

.course-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.25rem; }
.course-card { position: relative; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.course-card:hover { box-shadow: var(--shadow-lg); }
.course-card:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.course-card__cover { aspect-ratio: 16 / 9; width: 100%; object-fit: cover; display: grid; place-items: center; color: #fff; }
.course-card__cover .icon { width: 42px; height: 42px; opacity: .9; }
.course-card__body { padding: 1rem 1.1rem 1.2rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.course-card__title { font-size: 1.05rem; margin: 0; }
.course-card__title a { color: var(--text); text-decoration: none; }
.course-card__title a::after { content: ""; position: absolute; inset: 0; }
.course-card__title a:focus-visible { outline: none; }
.course-card--locked .course-card__cover { filter: grayscale(1) brightness(.7); }
.course-card__lock { position: absolute; top: .75rem; right: .75rem; }
.course-card__progress { margin-top: auto; display: grid; gap: .3rem; font-size: .85rem; color: var(--text-muted); }

.lesson-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.lesson-nav { position: sticky; top: calc(var(--header-h) + 16px); max-height: calc(100vh - var(--header-h) - 32px); overflow-y: auto; padding: 0; }
.lesson-nav__head { padding: 1rem 1.1rem; border-bottom: 1px solid var(--border); }
.lesson-nav__head h2 { font-size: 1rem; margin: 0 0 .5rem; }
.lesson-nav h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); margin: 0; padding: .9rem 1.1rem .4rem; }
.lesson-nav ol { list-style: none; margin: 0; padding: 0 0 .5rem; }
.lesson-nav a { display: flex; gap: .6rem; align-items: flex-start; padding: .55rem 1.1rem; color: var(--text); text-decoration: none; font-size: .95rem; }
.lesson-nav a:hover { background: var(--surface-2); }
.lesson-nav a[aria-current="page"] { background: var(--accent-soft); color: var(--accent-text); font-weight: 700; box-shadow: inset 3px 0 0 var(--accent); }
.lesson-nav .done { color: var(--success); }
.lesson-nav .todo { color: var(--border-strong); }

.lesson-actions { display: flex; justify-content: space-between; gap: .75rem; flex-wrap: wrap; border-top: 1px solid var(--border); margin-top: 1.5rem; padding-top: 1.25rem; }

@media (max-width: 900px) {
  .lesson-layout { grid-template-columns: minmax(0, 1fr); }
  .lesson-nav { position: static; max-height: none; order: 2; }
}

/* Video mit 2-Klick-Lösung (DSGVO) */
.video { position: relative; aspect-ratio: 16 / 9; background: #0b0d12; border-radius: var(--radius); overflow: hidden; margin-bottom: 1.25rem; color: #fff; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video__consent { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 1.5rem; background: radial-gradient(circle at center, #242a3a, #0b0d12); }
.video__consent p { max-width: 460px; font-size: .9rem; color: #d7dbe4; margin: .75rem auto; }
.video__consent a { color: #b8c5ff; }
.video__play { width: 72px; height: 72px; border-radius: 50%; background: #fff; color: #0b0d12; border: 0; display: grid; place-items: center; margin: 0 auto; cursor: pointer; }
.video__play .icon { width: 30px; height: 30px; margin-left: 4px; fill: currentColor; }
.video__play:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }

/* ---------- Kalender ------------------------------------------------------ */

.cal-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }
.cal-head h2 { margin: 0; font-size: 1.25rem; }
.calendar { width: 100%; border-collapse: collapse; table-layout: fixed; }
.calendar th { font-size: .8rem; text-transform: uppercase; color: var(--text-muted); padding: .5rem; font-weight: 700; }
.calendar td { border: 1px solid var(--border); vertical-align: top; height: 104px; padding: .35rem; }
.calendar td.is-other { background: var(--surface-2); color: var(--text-muted); }
.calendar td.is-today .daynum { background: var(--accent); color: var(--accent-contrast); }
.calendar .daynum { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font-size: .85rem; font-weight: 700; }
.calendar .cal-event { display: block; font-size: .78rem; background: var(--accent-soft); color: var(--accent-text); border-radius: 6px; padding: .15rem .35rem; margin-top: .2rem; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }

@media (max-width: 700px) {
  .calendar-wrap { display: none; } /* Auf kleinen Bildschirmen reicht die Liste */
}

.event-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.event { display: flex; gap: 1rem; align-items: flex-start; }
.event__date { width: 64px; flex-shrink: 0; text-align: center; border-radius: var(--radius-sm); border: 1px solid var(--border); overflow: hidden; }
.event__date span { display: block; background: #a3262b; color: #fff; font-size: .72rem; font-weight: 700; text-transform: uppercase; padding: .15rem 0; }
.event__date strong { display: block; font-size: 1.5rem; padding: .2rem 0; }
.event__body { flex: 1; min-width: 0; }
.event__body h3 { margin: 0 0 .2rem; }
.event__meta { display: flex; flex-wrap: wrap; gap: .25rem 1rem; color: var(--text-muted); font-size: .9rem; margin-bottom: .5rem; }

/* ---------- Info-Seite (About) -------------------------------------------- */

.about-cover { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; border-radius: var(--radius); margin-bottom: 1.25rem; }
.about-facts { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; color: var(--text-muted); margin-bottom: 1.25rem; }
.about-facts span { display: inline-flex; gap: .35rem; align-items: center; }
.join-card .price { font-size: 1.6rem; font-weight: 700; margin: .25rem 0 1rem; }

/* ---------- Profil -------------------------------------------------------- */

.profile-head { display: flex; gap: 1.5rem; align-items: center; flex-wrap: wrap; }
.profile-head h1 { margin: 0; }
.stat-row { display: flex; gap: 1.5rem; flex-wrap: wrap; margin-top: .5rem; color: var(--text-muted); }
.stat-row strong { color: var(--text); }

/* ---------- Tabellen (Admin) ---------------------------------------------- */

.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.table th, .table td { text-align: left; padding: .7rem .75rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
.table th { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); background: var(--surface-2); }
.table tr:last-child td { border-bottom: 0; }
.table .actions { display: flex; gap: .35rem; flex-wrap: wrap; justify-content: flex-end; }

.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.stat-card strong { display: block; font-size: 1.8rem; line-height: 1.1; }
.stat-card span { color: var(--text-muted); font-size: .9rem; }

.admin-nav { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.breadcrumbs ol { list-style: none; padding: 0; margin: 0 0 1rem; display: flex; flex-wrap: wrap; gap: .35rem; font-size: .9rem; color: var(--text-muted); }
.breadcrumbs li + li::before { content: "›"; margin-right: .35rem; }

.module-block { border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 1rem; }
.module-block__head { display: flex; gap: .5rem; align-items: flex-end; flex-wrap: wrap; padding: .75rem; background: var(--surface-2); border-bottom: 1px solid var(--border); border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.module-block__head .field { margin: 0; }
.module-block ol { margin: 0; padding: .5rem .75rem .5rem 2.25rem; }
.module-block li { padding: .35rem 0; }
.module-block__foot { padding: .75rem; border-top: 1px solid var(--border); }

.danger-zone { border: 1px solid var(--danger); border-radius: var(--radius); padding: 1.25rem; margin-top: 2rem; }
.danger-zone h2 { color: var(--danger); font-size: 1.1rem; }

.empty { text-align: center; padding: 2.5rem 1rem; color: var(--text-muted); }
.empty .icon { width: 40px; height: 40px; margin-bottom: .5rem; }

/* ---------- Zähler im Header --------------------------------------------- */

.has-count { position: relative; }
.count-badge {
  position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px; background: var(--danger); color: #fff; font-size: .7rem; font-weight: 700;
  display: grid; place-items: center; line-height: 1; border: 2px solid var(--surface);
}
:root[data-theme="dark"] .count-badge { color: #1a0b0b; }
.count-badge--inline { position: static; border: 0; }
.icon-btn[aria-current="page"] { color: var(--accent-text); background: var(--accent-soft); }

/* ---------- Gruppen-Suche ------------------------------------------------- */

.group-search { margin-left: auto; display: flex; align-items: center; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding-left: .8rem; max-width: 260px; flex: 1 1 160px; }
.group-search input { border: 0; background: transparent; min-height: 40px; padding: .3rem 0; }
.group-search input:focus-visible { outline: none; }
.group-search:focus-within { outline: 3px solid var(--focus); outline-offset: 1px; }
.group-search .icon-btn { width: 40px; height: 40px; }
.search-form--wide { max-width: none; }
.search-results { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.search-results li + li { border-top: 1px solid var(--border); padding-top: 1rem; }
.search-results a { font-weight: 700; }
.search-results p { margin: .25rem 0; color: var(--text-muted); }
mark { background: var(--warning-soft); color: var(--text); border-radius: 3px; padding: 0 .1em; box-shadow: inset 0 -2px 0 var(--warning); }

@media (max-width: 640px) {
  .group-bar__top { flex-wrap: wrap; }
  .group-search { max-width: none; flex-basis: 100%; }
}

/* ---------- Anhänge ------------------------------------------------------- */

.gallery { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .5rem; grid-template-columns: repeat(2, 1fr); }
.gallery--1 { grid-template-columns: 1fr; }
.gallery--3 li:first-child { grid-column: span 2; }
.gallery a { display: block; border-radius: var(--radius-sm); overflow: hidden; background: var(--surface-2); }
.gallery img { width: 100%; height: auto; max-height: 420px; object-fit: cover; aspect-ratio: 4 / 3; transition: transform .2s; }
.gallery--1 img { aspect-ratio: 16 / 9; max-height: 480px; }
.gallery a:hover img { transform: scale(1.02); }

.file-list { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .5rem; }
.file-list a { display: flex; align-items: center; gap: .75rem; padding: .6rem .8rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); text-decoration: none; }
.file-list a:hover { border-color: var(--border-strong); background: var(--surface-2); }
.file-list__icon { flex-shrink: 0; width: 44px; height: 44px; border-radius: 8px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-text); font-size: .7rem; font-weight: 700; }
.file-list__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.file-list__size { color: var(--text-muted); font-size: .85rem; white-space: nowrap; }

.attach-edit { list-style: none; margin: 0 0 .75rem; padding: 0; display: grid; gap: .5rem; }
.attach-edit li { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.attach-edit img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; }
.attach-edit__name { flex: 1; min-width: 140px; overflow-wrap: anywhere; }

.materials { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.materials h2 { font-size: 1.05rem; }

/* Feed-Vorschau mit Bild */
.post__main { display: flex; gap: 1rem; align-items: flex-start; }
.post__text { flex: 1; min-width: 0; }
.post__thumb { position: relative; flex-shrink: 0; width: 120px; height: 120px; border-radius: var(--radius-sm); overflow: hidden; background: var(--surface-2); }
.post__thumb img { width: 100%; height: 100%; object-fit: cover; }
.post__thumb-more { position: absolute; right: 6px; bottom: 6px; background: rgb(0 0 0 / .7); color: #fff; font-size: .8rem; font-weight: 700; padding: .1rem .45rem; border-radius: 999px; }
@media (max-width: 480px) { .post__thumb { width: 84px; height: 84px; } }

/* Lightbox */
.lightbox { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; }
.lightbox::backdrop { background: rgb(5 7 12 / .9); }
.lightbox[open] { display: grid; place-items: center; }
.lightbox img { max-width: calc(100vw - 32px); max-height: calc(100vh - 110px); object-fit: contain; border-radius: 6px; }
.lightbox__close, .lightbox__nav { position: fixed; border: 0; background: rgb(255 255 255 / .12); color: #fff; width: 48px; height: 48px; border-radius: 50%; font-size: 1.6rem; cursor: pointer; display: grid; place-items: center; }
.lightbox__close:hover, .lightbox__nav:hover { background: rgb(255 255 255 / .25); }
.lightbox__close:focus-visible, .lightbox__nav:focus-visible { outline: 3px solid #fff; }
.lightbox__close { top: 16px; right: 16px; font-size: 1.2rem; }
.lightbox__prev { left: 16px; top: 50%; transform: translateY(-50%); }
.lightbox__next { right: 16px; top: 50%; transform: translateY(-50%); }
.lightbox__caption { position: fixed; bottom: 16px; left: 0; right: 0; text-align: center; color: #d7dbe4; font-size: .9rem; margin: 0; }

/* ---------- Umfragen ------------------------------------------------------ */

.poll-builder { margin-bottom: 1.1rem; }
.poll-builder > summary { cursor: pointer; font-weight: 650; display: inline-flex; gap: .4rem; align-items: center; min-height: 44px; color: var(--accent-text); }
.poll-builder fieldset { margin-top: .5rem; }
.poll { margin-top: 1.25rem; padding: 1rem 1.1rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); }
.poll__title { font-size: 1rem; display: flex; align-items: center; gap: .4rem; }
.poll__results { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.poll__results li.is-mine progress::-webkit-progress-value { background: var(--success); }
.poll__results li.is-mine progress::-moz-progress-bar { background: var(--success); }
.poll__results progress { height: 10px; margin-top: .25rem; background: var(--surface); }
.poll__options { border: 0; padding: 0; margin: 0 0 .75rem; display: grid; gap: .4rem; }
.poll__option { padding: .6rem .8rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); cursor: pointer; }
.poll__option:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.poll details summary { cursor: pointer; color: var(--accent-text); }

/* ---------- Nachrichten --------------------------------------------------- */

.chat { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 1rem; height: calc(100vh - var(--header-h) - 3.5rem); min-height: 480px; }
.chat > .card + .card { margin-top: 0; }
.chat__list { padding: 0; overflow-y: auto; }
.chat__list-title { font-size: 1.15rem; padding: 1rem 1.1rem .5rem; margin: 0; }
.chat__empty { padding: 0 1.1rem 1rem; }
.chat__list ul { list-style: none; margin: 0; padding: 0 .4rem .5rem; }
.chat__list a { display: flex; gap: .7rem; align-items: center; padding: .65rem .7rem; border-radius: var(--radius-sm); color: var(--text); text-decoration: none; }
.chat__list a:hover { background: var(--surface-2); }
.chat__list a[aria-current="page"] { background: var(--accent-soft); }
.chat__list a.is-unread .chat__name { font-weight: 700; }
.chat__preview { flex: 1; min-width: 0; display: grid; }
.chat__name { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat__snippet { color: var(--text-muted); font-size: .85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat__meta { display: grid; justify-items: end; gap: .2rem; }

.chat__thread { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.chat__thread > .empty { margin: auto; }
.chat__head { display: flex; align-items: center; gap: .75rem; padding: .75rem 1rem; border-bottom: 1px solid var(--border); }
.chat__head h2 { font-size: 1rem; }
.chat__head h2 a { color: var(--text); text-decoration: none; }
.chat__back { display: none; }
.chat__messages { flex: 1; overflow-y: auto; list-style: none; margin: 0; padding: 1rem; display: flex; flex-direction: column; gap: .6rem; }
.chat__hint { margin: auto; }
.chat__form { border-top: 1px solid var(--border); padding: .75rem 1rem; }
.chat__form textarea { min-height: 52px; max-height: 200px; }
.chat__form .hint { margin: .3rem 0 0; font-size: .78rem; }
.chat__actions { display: flex; align-items: center; gap: .5rem; margin-top: .5rem; }
.chat__actions [data-file-label] { flex: 1; }
.chat__attach { cursor: pointer; }
.chat__attach:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }

.msg { display: flex; flex-direction: column; max-width: min(80%, 560px); }
.msg--mine { align-self: flex-end; align-items: flex-end; }
.msg--theirs { align-self: flex-start; }
.msg__bubble { padding: .55rem .85rem; border-radius: 16px; background: var(--surface-2); overflow-wrap: anywhere; }
.msg--mine .msg__bubble { background: var(--accent); color: var(--accent-contrast); border-bottom-right-radius: 4px; }
.msg--mine .msg__bubble a { color: inherit; }
.msg--theirs .msg__bubble { border-bottom-left-radius: 4px; }
.msg__bubble .prose p { margin: 0; }
.msg__bubble .prose p + p { margin-top: .5em; }
.msg__bubble .gallery, .msg__bubble .file-list { margin-top: .4rem; }
.msg__bubble .gallery { width: min(300px, 62vw); }
.msg__bubble .file-list { min-width: min(280px, 62vw); }
.msg__bubble .gallery img { max-height: 240px; }
.msg__time { font-size: .72rem; color: var(--text-muted); margin-top: .15rem; padding: 0 .3rem; }

@media (max-width: 760px) {
  .chat { grid-template-columns: 1fr; height: calc(100vh - var(--header-h) - 2.5rem); }
  .chat--thread .chat__list { display: none; }
  .chat--list .chat__thread { display: none; }
  .chat__back { display: inline-grid; }
}

/* ---------- Benachrichtigungen ------------------------------------------- */

.notif-list { list-style: none; margin: 0; padding: 0; }
.notif-list li + li { border-top: 1px solid var(--border); }
.notif-list a { display: flex; gap: .8rem; align-items: center; padding: .9rem 1.1rem; color: var(--text); text-decoration: none; }
.notif-list a:hover { background: var(--surface-2); }
.notif-list li.is-unread a { background: var(--accent-soft); }
.notif-list__body { flex: 1; min-width: 0; display: grid; gap: .1rem; }
.notif-list__text .icon { color: var(--text-muted); }
.notif-list__icon { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); flex-shrink: 0; }
.unread-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }

/* ---------- Bewegung reduzieren ------------------------------------------ */

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

/* ---------- Hoher Kontrast (Windows) -------------------------------------- */

@media (forced-colors: active) {
  .btn, .like-btn, .pills a, .card { border: 1px solid CanvasText; }
  .tabs a[aria-current="page"] { border-bottom-color: Highlight; }
}

/* ---------- Druck --------------------------------------------------------- */

@media print {
  .site-header, .group-bar, .site-footer, .lesson-nav, aside, .btn, .like-btn { display: none !important; }
  body { background: #fff; color: #000; }
}

/* Listen, die als Raster dienen, ohne Standard-Einrückung */
.group-grid, .course-grid, .stats-grid, .about-facts, .boards { list-style: none; margin: 0; padding: 0; }
.about-facts { margin-bottom: 1.25rem; }

/* ---------- Design-Feinschliff (modern) ----------------------------------- */

.badge--glass { background: rgb(255 255 255 / .16); color: #fff; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .25); }
.group-card__media .badge--gold { box-shadow: 0 4px 12px rgb(0 0 0 / .2); }

/* Karten: größere Radien, feine Kante, sanftes Anheben */
.card { border-radius: 20px; }
.course-card { border-radius: 20px; transition: transform .2s, box-shadow .2s, border-color .2s; }
.course-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
.post { transition: border-color .2s, box-shadow .2s; }
.post:hover { border-color: color-mix(in srgb, var(--accent) 30%, var(--border)); box-shadow: var(--shadow-lg); }
.course-card__cover .icon { opacity: .85; }
.about-cover { border-radius: 24px; }
.side-group__cover { aspect-ratio: 16 / 7; }

/* Buttons mit etwas Tiefe */
.btn--primary { box-shadow: 0 6px 16px color-mix(in srgb, var(--accent) 28%, transparent); }
.btn--primary:hover { transform: translateY(-1px); }
.btn { transition: background-color .15s, border-color .15s, color .15s, transform .15s, box-shadow .15s; }

/* Seitentitel etwas größer & moderner */
.page-head h1 { font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.4rem); }

/* Dunkelmodus: Karten mit feiner heller Oberkante (Glas-Anmutung) */
:root[data-theme="dark"] .card, :root[data-theme="dark"] .group-card, :root[data-theme="dark"] .course-card { box-shadow: inset 0 1px 0 rgb(255 255 255 / .05), var(--shadow); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .card, :root:not([data-theme="light"]) .group-card, :root:not([data-theme="light"]) .course-card { box-shadow: inset 0 1px 0 rgb(255 255 255 / .05), var(--shadow); }
}

@media (prefers-reduced-motion: reduce) {
  .group-card:hover, .course-card:hover, .btn--primary:hover { transform: none; }
}

/* Eingabefeld mit festem Präfix (z. B. URL) */
.input-prefix { display: flex; align-items: stretch; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); overflow: hidden; }
.input-prefix:focus-within { outline: 3px solid var(--focus); outline-offset: 0; border-color: var(--focus); }
.input-prefix > span { display: flex; align-items: center; padding: 0 .1rem 0 .8rem; color: var(--text-muted); font-size: .92rem; white-space: nowrap; background: var(--surface-2); padding-right: .6rem; border-right: 1px solid var(--border); }
.input-prefix input { border: 0 !important; border-radius: 0; min-width: 0; }
.input-prefix input:focus-visible { outline: none; }

.archive-json { font-size: .78rem; background: var(--surface-2); padding: .75rem; border-radius: var(--radius-sm); overflow-x: auto; max-width: 520px; white-space: pre-wrap; }

/* ---------- Admin-Bereich ------------------------------------------------- */

.admin-tabs {
  display: flex; gap: .35rem; flex-wrap: wrap; padding: .35rem; margin-bottom: 1.5rem;
  background: var(--surface); border: 1px solid var(--border); border-radius: 999px; width: fit-content; max-width: 100%;
  box-shadow: var(--shadow);
}
.admin-tabs a { display: inline-flex; align-items: center; gap: .45rem; padding: .5rem 1rem; border-radius: 999px; color: var(--text-muted); text-decoration: none; font-weight: 650; font-size: .92rem; min-height: 40px; }
.admin-tabs a:hover { color: var(--text); background: var(--surface-2); }
.admin-tabs a[aria-current="page"] { background: var(--pill-active-bg); color: var(--pill-active-text); }
.admin-tabs .count-badge { border: 0; }
@media (max-width: 640px) { .admin-tabs { border-radius: var(--radius); } }

.pb-1 { padding-bottom: 1rem; }

.rights-grid { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .75rem; }
.right-tile { display: grid; gap: .2rem; padding: .9rem 1rem; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); }
.right-tile strong { font-size: .98rem; }
.right-tile__art { font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-text); }

.privacy-results { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .35rem; }
.privacy-results a { display: flex; align-items: center; gap: .75rem; padding: .6rem .75rem; border-radius: var(--radius-sm); color: var(--text); text-decoration: none; border: 1px solid var(--border); }
.privacy-results a:hover { border-color: var(--accent); background: var(--accent-soft); }
.privacy-results a > span:nth-of-type(1) { flex: 1; }

.privacy-head { display: flex; gap: 1.25rem; align-items: center; flex-wrap: wrap; margin-bottom: 1rem; }
.rights-actions { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; align-items: start; }
.rights-actions .card + .card { margin-top: 0; }
.rights-actions .card__title { margin-top: .35rem; }
.danger-card { border-color: color-mix(in srgb, var(--danger) 45%, var(--border)); }

/* ---------- Startseite: Landingpage (Gäste) ------------------------------- */

.hero--split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 2.5rem; align-items: center; }
.hero__trust { list-style: none; margin: 1.5rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; color: var(--on-petrol-muted); font-size: .88rem; }
.hero__trust li { display: inline-flex; align-items: center; gap: .4rem; }
.hero__trust .icon { color: var(--sage-light); }

.hero__preview { position: relative; min-height: 420px; }
.float-card {
  position: absolute; border-radius: 18px; padding: .9rem 1rem; color: var(--on-petrol);
  background: linear-gradient(145deg, rgb(255 255 255 / .14), rgb(255 255 255 / .05));
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .14), 0 24px 50px rgb(0 0 0 / .35);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  animation: float 7s ease-in-out infinite;
}
.float-card strong { display: block; font-size: .92rem; }
.float-card span { font-size: .78rem; color: var(--on-petrol-muted); }
.float-card--post { top: 0; right: 0; width: 80%; }
.float-card__head { display: flex; gap: .6rem; align-items: center; margin-bottom: .6rem; }
.float-card__head > div { display: grid; }
.float-card__head .avatar { color: #fff; font-size: .8rem; }
.float-card__title { font-weight: 700; margin: 0 0 .25rem; font-size: 1rem; }
.float-card__text { margin: 0 0 .7rem; font-size: .85rem; color: var(--on-petrol-muted); }
.float-card__foot { display: flex; gap: 1rem; }
.float-card__foot span { display: inline-flex; gap: .3rem; align-items: center; }
.float-card__foot .icon { color: #ff8a80; }
.float-card--level { top: 53%; right: 2%; display: flex; gap: .75rem; align-items: center; animation-delay: -2s; }
.float-card--level > div { display: grid; }
.float-card .float-card__lvl { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-weight: 700; font-size: 1.2rem; color: var(--brand-yellow-text); background: var(--brand-yellow); box-shadow: 0 0 0 6px rgb(243 226 15 / .18); }
.float-card--event { bottom: 0; left: 14%; display: flex; gap: .75rem; align-items: center; animation-delay: -4s; }
.float-card--event > div { display: grid; }
.float-card .float-card__date { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; background: var(--sage-light); color: #0b2327; font-weight: 700; font-size: .85rem; line-height: 1; }
.float-card__date small { font-size: .62rem; letter-spacing: .08em; }
.float-card--course { top: 55%; left: 0; width: 46%; animation-delay: -5.5s; display: grid; gap: .4rem; }
.float-card--course strong { display: flex; gap: .4rem; align-items: center; }
.float-card__bar { height: 6px; border-radius: 999px; background: rgb(255 255 255 / .15); overflow: hidden; }
.float-card .float-card__bar span { display: block; width: 68%; height: 100%; background: linear-gradient(90deg, var(--sage-light), var(--brand-yellow)); border-radius: 999px; }

@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

@media (max-width: 900px) {
  .hero--split { grid-template-columns: 1fr; }
  .hero__preview { min-height: 340px; }
}
@media (max-width: 520px) {
  .hero__preview { display: none; }
}

.feature-strip { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
.feature-strip li { display: flex; gap: .85rem; align-items: flex-start; padding: 1.1rem; border-radius: 20px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); }
.feature-strip li > div { display: grid; gap: .15rem; }
.feature-strip strong { font-size: 1rem; }
.feature-strip li > div > span { font-size: .88rem; color: var(--text-muted); }
.feature-strip__icon { flex-shrink: 0; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-text); }
.feature-strip__icon .icon { width: 22px; height: 22px; }

/* ---------- Startseite: Dashboard (eingeloggt) ---------------------------- */

.welcome {
  position: relative; overflow: hidden; isolation: isolate; color: var(--on-petrol); --focus: var(--sage-light);
  display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1.5rem; align-items: stretch;
  padding: clamp(1.5rem, 4vw, 2.5rem); border-radius: 28px; margin-bottom: .5rem;
  background:
    radial-gradient(ellipse at 95% 0%, rgb(159 200 179 / .28), transparent 50%),
    radial-gradient(ellipse at 0% 110%, rgb(47 125 109 / .5), transparent 55%),
    linear-gradient(150deg, #071a1d, #102f34 60%, #15393f);
  box-shadow: var(--shadow-lg);
}
.welcome::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .45;
  background-image: linear-gradient(rgb(255 255 255 / .05) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / .05) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(ellipse at 30% 20%, #000 5%, transparent 65%);
  -webkit-mask-image: radial-gradient(ellipse at 30% 20%, #000 5%, transparent 65%);
}
.welcome h1 { color: var(--on-petrol); font-size: clamp(1.8rem, 1.2rem + 2.2vw, 2.8rem); letter-spacing: -.035em; margin-bottom: .4rem; }
.welcome h1 em { font-style: normal; background: linear-gradient(90deg, var(--brand-yellow), var(--sage-light)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.welcome__text > p:not(.hero__kicker) { color: var(--on-petrol-muted); margin-bottom: 1.25rem; }
.quick-links { display: flex; flex-wrap: wrap; gap: .5rem; }
.quick-link {
  display: inline-flex; align-items: center; gap: .45rem; padding: .55rem .95rem; border-radius: 999px; min-height: 44px;
  color: var(--on-petrol); text-decoration: none; font-weight: 600; font-size: .92rem;
  background: rgb(255 255 255 / .07); box-shadow: inset 0 0 0 1px rgb(159 200 179 / .22);
}
.quick-link:hover { background: rgb(255 255 255 / .13); }
.quick-link__count { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--brand-yellow); color: var(--brand-yellow-text); font-size: .72rem; font-weight: 700; display: grid; place-items: center; }

.welcome__event {
  display: flex; flex-direction: column; gap: .6rem; align-items: flex-start; padding: 1.25rem; border-radius: 20px;
  background: linear-gradient(145deg, rgb(255 255 255 / .12), rgb(255 255 255 / .04));
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .12);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.welcome__label { display: inline-flex; gap: .4rem; align-items: center; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sage-light); }
.welcome__when { display: flex; gap: .9rem; align-items: center; }
.welcome__date { display: grid; place-items: center; width: 60px; padding: .35rem 0; border-radius: 14px; background: var(--on-petrol); color: #0b2327; line-height: 1.1; flex-shrink: 0; }
.welcome__date span { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #2f7d6d; }
.welcome__date strong { font-size: 1.5rem; font-weight: 700; }
.welcome__event-title { font-weight: 700; margin: 0; font-size: 1.02rem; }
.welcome__event-meta { margin: 0; font-size: .85rem; color: var(--on-petrol-muted); }
.welcome__event .btn--primary { margin-top: auto; background: var(--brand-yellow); border-color: var(--brand-yellow); color: var(--brand-yellow-text); box-shadow: none; }

@media (max-width: 820px) { .welcome { grid-template-columns: 1fr; } }

.learn-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }
.learn-card { position: relative; display: flex; gap: .9rem; align-items: center; padding: .75rem; border-radius: 20px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); transition: transform .2s, border-color .2s; }
.learn-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
.learn-card:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.learn-card__thumb { width: 84px; height: 84px; border-radius: 14px; overflow: hidden; flex-shrink: 0; display: grid; place-items: center; color: #fff; }
.learn-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.learn-card__body { flex: 1; min-width: 0; display: grid; gap: .15rem; }
.learn-card h3 { font-size: 1rem; margin: 0; }
.learn-card h3 a { color: var(--text); text-decoration: none; }
.learn-card h3 a::after { content: ""; position: absolute; inset: 0; }
.learn-card h3 a:focus-visible { outline: none; }
.learn-card__progress { display: flex; align-items: center; gap: .6rem; margin-top: .25rem; }
.learn-card__progress progress { flex: 1; }
.learn-card__go { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--accent-contrast); flex-shrink: 0; }
.learn-card__go .icon { width: 16px; height: 16px; fill: currentColor; margin-left: 2px; }

.dash-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
@media (max-width: 960px) { .dash-grid { grid-template-columns: 1fr; } }

.activity { list-style: none; margin: 0; padding: 0; }
.activity li { position: relative; display: flex; gap: .75rem; align-items: center; padding: .85rem 1rem; }
.activity li + li { border-top: 1px solid var(--border); }
.activity li:hover { background: var(--surface-2); }
.activity__body { flex: 1; min-width: 0; display: grid; }
.activity__title { font-weight: 700; color: var(--text); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.activity__title::after { content: ""; position: absolute; inset: 0; }
.activity__stats { display: inline-flex; gap: .3rem; align-items: center; white-space: nowrap; }

@media (prefers-reduced-motion: reduce) { .float-card { animation: none; } }

/* Absolut positionierte Screenreader-Texte in scrollenden Tabellen verankern; kein seitliches Scrollen der Seite */
.table-wrap { position: relative; }
html, body { overflow-x: clip; }

/* Kennzahlen kompakt; Karten in Rastern ohne zusätzlichen Abstand */
.stats-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .75rem; }
.stats-grid .card + .card, .rights-grid .card + .card { margin-top: 0; }
.stat-card { padding: 1rem 1.1rem; }
.stat-card strong { font-size: 1.6rem; letter-spacing: -.02em; }
.privacy-head .avatar--lg { width: 72px; height: 72px; font-size: 1.5rem; }
.stats-grid { margin-bottom: 1.25rem; }

/* ---------- Passwortfeld mit Live-Prüfung --------------------------------- */

.layout-auth--wide { max-width: 560px; }
.flex-1 { flex: 1; min-width: 0; }
.mb-1 { margin-bottom: 1rem; }

.pw-input { position: relative; }
.pw-input input { padding-right: 3.2rem; }
.pw-toggle { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border: 0; border-radius: 8px; background: transparent; color: var(--text-muted); cursor: pointer; display: grid; place-items: center; }
.pw-toggle:hover { background: var(--surface-2); color: var(--text); }
.pw-toggle .pw-eye-off { display: none; }
.pw-toggle[aria-pressed="true"] .pw-eye { display: none; }
.pw-toggle[aria-pressed="true"] .pw-eye-off { display: inline; }

.pw-meter { display: flex; align-items: center; gap: .75rem; margin-top: .6rem; }
.pw-meter__bar { flex: 1; height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.pw-meter__bar span { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--danger); transition: width .25s, background-color .25s; }
.pw-meter[data-level="2"] .pw-meter__bar span { background: var(--warning); }
.pw-meter[data-level="3"] .pw-meter__bar span { background: var(--success); }
.pw-meter[data-level="4"] .pw-meter__bar span { background: linear-gradient(90deg, var(--success), var(--accent)); }
.pw-meter__label { font-size: .82rem; font-weight: 700; color: var(--text-muted); white-space: nowrap; }
.pw-meter[data-level="1"] .pw-meter__label { color: var(--danger); }
.pw-meter[data-level="3"] .pw-meter__label, .pw-meter[data-level="4"] .pw-meter__label { color: var(--success); }

.pw-rules { list-style: none; margin: .75rem 0 .5rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .3rem .9rem; font-size: .86rem; color: var(--text-muted); }
.pw-rules li { display: flex; gap: .45rem; align-items: flex-start; }
.pw-rules__icon { flex-shrink: 0; width: 18px; height: 18px; margin-top: .12rem; border-radius: 50%; border: 2px solid var(--border-strong); display: grid; place-items: center; font-size: .7rem; font-weight: 700; line-height: 1; }
.pw-rules li.is-ok { color: var(--success); }
.pw-rules li.is-ok .pw-rules__icon { background: var(--success); border-color: var(--success); color: var(--surface); }
.pw-rules li.is-ok .pw-rules__icon::before { content: "✓"; }
.pw-rules li.is-bad { color: var(--danger); }
.pw-rules li.is-bad .pw-rules__icon { border-color: var(--danger); color: var(--danger); }
.pw-rules li.is-bad .pw-rules__icon::before { content: "✕"; }
.pw-count { font-variant-numeric: tabular-nums; }

.pw-chars { display: grid; gap: .25rem; padding: .7rem .85rem; border-radius: var(--radius-sm); background: var(--surface-2); color: var(--text-muted); }
.pw-specials { word-spacing: .15em; letter-spacing: .05em; background: transparent; padding: 0; }
.pw-bad { color: var(--danger); }
.pw-match.is-ok { color: var(--success); font-weight: 600; }
.pw-match.is-bad { color: var(--danger); font-weight: 600; }

/* ---------- MFA ----------------------------------------------------------- */

.mfa-steps { list-style: none; margin: 1.25rem 0; padding: 0; display: grid; gap: 1.25rem; }
.mfa-steps > li { display: flex; gap: .9rem; align-items: flex-start; }
.mfa-steps > li > div { flex: 1; min-width: 0; }
.mfa-steps h2 { font-family: var(--font); font-size: 1rem; letter-spacing: 0; margin: .2rem 0 .4rem; display: flex; gap: .4rem; align-items: center; }
.mfa-steps__num { flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; background: var(--accent); color: var(--accent-contrast); }
.mfa-qr { display: inline-block; padding: .6rem; background: #fff; border-radius: 16px; box-shadow: var(--shadow); margin: .25rem 0 .5rem; }
.mfa-qr svg { display: block; width: 100%; max-width: 240px; height: auto; }
.mfa-secret { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: .5rem 0 0; }
.mfa-secret code { font-size: 1rem; letter-spacing: .08em; padding: .4rem .6rem; word-break: break-all; }
.otp-input { font-size: 1.6rem !important; letter-spacing: .5em; text-align: center; font-variant-numeric: tabular-nums; font-family: var(--font-mono) !important; }
.mfa-badge { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 18px; background: var(--accent-soft); color: var(--accent-text); margin-bottom: .75rem; }
.mfa-badge .icon { width: 28px; height: 28px; }

.recovery-codes { list-style: none; margin: 1rem 0; padding: 1rem; display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem 1rem; border-radius: var(--radius-sm); background: var(--surface-2); counter-reset: rc; }
.recovery-codes li { counter-increment: rc; display: flex; gap: .5rem; align-items: center; }
.recovery-codes li::before { content: counter(rc) "."; color: var(--text-muted); font-size: .8rem; width: 1.4rem; text-align: right; }
.recovery-codes code { font-size: 1.05rem; letter-spacing: .08em; background: var(--surface); }
@media print {
  .recovery-card form, .recovery-card .row { display: none !important; }
}

/* ---------- Protokoll (Zeitleiste) ---------------------------------------- */

.timeline { list-style: none; margin: 1rem 0 0; padding: 0; position: relative; }
.timeline::before { content: ""; position: absolute; left: 17px; top: 6px; bottom: 6px; width: 2px; background: var(--border); }
.timeline__item { position: relative; display: flex; gap: .9rem; padding: .55rem 0; }
.timeline__dot { position: relative; z-index: 1; flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); color: var(--text-muted); border: 2px solid var(--surface); }
.timeline__dot .icon { width: 16px; height: 16px; }
.timeline__item--danger .timeline__dot { background: var(--danger-soft); color: var(--danger); }
.timeline__item--success .timeline__dot { background: var(--success-soft); color: var(--success); }
.timeline__body { flex: 1; min-width: 0; padding-top: .35rem; }
.timeline__reason { margin: .35rem 0 0; padding: .5rem .75rem; border-left: 3px solid var(--accent); background: var(--surface-2); border-radius: 0 8px 8px 0; font-size: .9rem; }

/* Stärkeanzeige: Balken in voller Breite über dem Text */
.pw-meter { display: grid; gap: .35rem; }
.pw-meter__bar { width: 100%; }
.pw-meter__label { white-space: normal; }
.field label.check { font-weight: 400; }
.privacy-head > .flex-1 { flex: 1 1 240px; }

/* ---------- Rich-Text: Formatklassen (Editor & Ausgabe) ------------------- */

:root {
  --rt-red: #c0262d; --rt-orange: #b45309; --rt-yellow: #8a6a00; --rt-green: #1f7a3e; --rt-teal: #1f6f60;
  --rt-blue: #1f5fbf; --rt-purple: #6d3fc4; --rt-pink: #b0307f; --rt-gray: #5c5f66;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --rt-red: #ff8a80; --rt-orange: #ffb561; --rt-yellow: #f3e20f; --rt-green: #6fd39b; --rt-teal: #7cc4ab;
    --rt-blue: #8fb8ff; --rt-purple: #c3a6ff; --rt-pink: #ff9bd2; --rt-gray: #b3bac5;
  }
}
:root[data-theme="dark"] {
  --rt-red: #ff8a80; --rt-orange: #ffb561; --rt-yellow: #f3e20f; --rt-green: #6fd39b; --rt-teal: #7cc4ab;
  --rt-blue: #8fb8ff; --rt-purple: #c3a6ff; --rt-pink: #ff9bd2; --rt-gray: #b3bac5;
}
.rt-c-red { color: var(--rt-red); } .rt-c-orange { color: var(--rt-orange); } .rt-c-yellow { color: var(--rt-yellow); }
.rt-c-green { color: var(--rt-green); } .rt-c-teal { color: var(--rt-teal); } .rt-c-blue { color: var(--rt-blue); }
.rt-c-purple { color: var(--rt-purple); } .rt-c-pink { color: var(--rt-pink); } .rt-c-gray { color: var(--rt-gray); }
/* Hervorhebungen immer mit dunkler Schrift – lesbar in beiden Modi */
.rt-hl-yellow, .rt-hl-green, .rt-hl-blue, .rt-hl-pink, .rt-hl-gray { color: #16140f; border-radius: 3px; padding: 0 .12em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.rt-hl-yellow { background: #fff27a; } .rt-hl-green { background: #b8f0c8; } .rt-hl-blue { background: #bfe3ff; }
.rt-hl-pink { background: #ffc9e6; } .rt-hl-gray { background: #dfe2e7; }
.rt-fs-s { font-size: .85em; } .rt-fs-l { font-size: 1.25em; } .rt-fs-xl { font-size: 1.6em; line-height: 1.3; }
.rt-ff-serif { font-family: Georgia, "Times New Roman", serif; }
.rt-ff-mono { font-family: var(--font-mono); }
.rt-ff-round { font-family: "Trebuchet MS", "Segoe UI Rounded", "Arial Rounded MT Bold", var(--font); }
.rt-ta-center { text-align: center; } .rt-ta-right { text-align: right; } .rt-ta-justify { text-align: justify; hyphens: auto; }
.rt-indent-1 { margin-left: 2em; } .rt-indent-2 { margin-left: 4em; } .rt-indent-3 { margin-left: 6em; } .rt-indent-4 { margin-left: 8em; }
.rt s { text-decoration-thickness: 2px; }
.rt a { color: var(--accent-text); }
.rt > :last-child { margin-bottom: 0; }

/* ---------- Editor ------------------------------------------------------ */

.rt-wrap { border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); }
.rt-wrap:focus-within { outline: 3px solid var(--focus); outline-offset: 0; border-color: var(--focus); }
.rt-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: .15rem .35rem; padding: .35rem .4rem;
  border-bottom: 1px solid var(--border); background: var(--surface-2); border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  position: sticky; top: var(--header-h); z-index: 5;
}
.rt-group { display: flex; align-items: center; gap: .1rem; padding-right: .35rem; border-right: 1px solid var(--border); }
.rt-group:last-child { border-right: 0; }
.rt-btn {
  display: inline-grid; place-items: center; min-width: 34px; height: 34px; padding: 0 .35rem; gap: .1rem;
  border: 1px solid transparent; border-radius: 7px; background: transparent; color: var(--text); cursor: pointer;
}
.rt-btn:hover { background: var(--surface); border-color: var(--border); }
.rt-btn[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-text); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.rt-btn:focus-visible, .rt-select:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
.rt-btn--menu { display: inline-flex; align-items: center; }
.rt-caret { font-size: .65rem; margin-left: .1rem; }
.rt-select { width: auto; min-height: 34px; height: 34px; padding: 0 1.6rem 0 .5rem; font-size: .88rem; border-radius: 7px; background-color: var(--surface); border: 1px solid var(--border); }
.rt-menu { position: relative; }
.rt-palette {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 20; display: grid; grid-template-columns: repeat(5, 30px); gap: 6px;
  padding: .6rem; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-lg);
}
.rt-palette[hidden] { display: none; }
.rt-swatch { width: 30px; height: 30px; border-radius: 8px; border: 2px solid var(--border); cursor: pointer; }
.rt-swatch:hover { transform: scale(1.08); }
.rt-swatch:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.rt-swatch--none { background: linear-gradient(135deg, transparent 45%, var(--danger) 45%, var(--danger) 55%, transparent 55%), var(--surface); }
.rt-sw-c-red { background: var(--rt-red); } .rt-sw-c-orange { background: var(--rt-orange); } .rt-sw-c-yellow { background: var(--rt-yellow); }
.rt-sw-c-green { background: var(--rt-green); } .rt-sw-c-teal { background: var(--rt-teal); } .rt-sw-c-blue { background: var(--rt-blue); }
.rt-sw-c-purple { background: var(--rt-purple); } .rt-sw-c-pink { background: var(--rt-pink); } .rt-sw-c-gray { background: var(--rt-gray); }
.rt-sw-hl-yellow { background: #fff27a; } .rt-sw-hl-green { background: #b8f0c8; } .rt-sw-hl-blue { background: #bfe3ff; }
.rt-sw-hl-pink { background: #ffc9e6; } .rt-sw-hl-gray { background: #dfe2e7; }

.rt-editor { min-height: 160px; max-height: 70vh; overflow-y: auto; padding: .8rem 1rem; line-height: 1.6; color: var(--text); outline: none; overflow-wrap: anywhere; }
.rt-editor--mini { min-height: 72px; }
.rt-editor.is-empty::before { content: attr(data-placeholder); color: var(--text-muted); pointer-events: none; position: absolute; }
.rt-editor p { margin: 0 0 .6em; }
.rt-editor h2 { font-size: 1.35rem; margin: .6em 0 .4em; }
.rt-editor h3 { font-size: 1.12rem; margin: .6em 0 .4em; }
.rt-editor ul, .rt-editor ol { padding-left: 1.5rem; margin: 0 0 .6em; }
.rt-editor blockquote, .rt blockquote { margin: .6em 0; padding: .4em 1em; border-left: 4px solid var(--accent); background: var(--surface-2); border-radius: 0 8px 8px 0; }
.rt-editor[aria-invalid="true"] { box-shadow: inset 0 0 0 2px var(--danger); }
.rt-wrap textarea[hidden] { display: none !important; }

/* Chat: kompakter Editor */
.chat__form .rt-editor { min-height: 52px; max-height: 180px; }
.chat__form .rt-toolbar { position: static; }
.msg--mine .rt [class*="rt-c-"] { color: inherit; }

@media (max-width: 560px) {
  .rt-group { border-right: 0; padding-right: 0; }
  .rt-select { max-width: 132px; }
}
.rt-editor { position: relative; }

/* ---------- Zahlungsarten ------------------------------------------------- */

.pay-options { display: grid; gap: .6rem; }
.pay-btn { min-height: 48px; font-size: 1rem; }
/* PayPal-Button nach PayPal-Markenrichtlinien (Gold #FFC439, dunkler Schriftzug) */
.pay-btn--paypal { background: #ffc439; border-color: #ffc439; color: #111; }
.pay-btn--paypal:hover { background: #f2b600; border-color: #f2b600; }
.pay-btn__pp { font-size: 1.25rem; font-style: italic; font-weight: 700; letter-spacing: -.02em; }
.pay-btn__pp b { color: #003087; }
.pay-btn__pp i { color: #0070e0; font-style: italic; }
.provider-choice__item { padding: .6rem .75rem; border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: .5rem; }
.provider-choice__item:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.syscheck__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.syscheck__list li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; padding: .5rem 0; border-bottom: 1px solid var(--border); }
.syscheck__list li:last-child { border-bottom: 0; }
.syscheck { margin-bottom: 1.25rem; }

ul.row { list-style: none; margin: 0; padding: 0; }

/* Schärfere Schrift: keine künstlich verstärkten Schnitte, bessere Lesbarkeit */
body { text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-synthesis: none; }
.hero h1, .welcome h1 { letter-spacing: -.02em; }

/* ===== Admin: Zahlungsanbieter & Stammdaten ===== */
.provider-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); align-items: start; }
.provider-card { display: flex; flex-direction: column; gap: .75rem; }
.provider-card form { margin: 0; }
.provider-card__head { display: flex; align-items: center; gap: .85rem; flex-wrap: wrap; }
.provider-card__head > div { flex: 1 1 12rem; min-width: 0; }
.provider-card__head h2 { font-size: 1.2rem; margin: 0; }
.provider-logo {
  display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 14px;
  font-weight: 700; font-size: .95rem; letter-spacing: -.01em; flex: none;
}
.provider-logo--stripe { background: #635bff; color: #fff; }
.provider-logo--paypal { background: #ffc439; color: #003087; }
.provider-logo--ds24 { background: #0a4b8f; color: #fff; font-size: .8rem; }
.provider-toggle { padding: .6rem .8rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); margin-bottom: .75rem; }
.copy-field { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; padding: .5rem .65rem; border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); background: var(--bg); }
.copy-field code { flex: 1 1 14rem; min-width: 0; overflow-wrap: anywhere; font-family: var(--font-mono); font-size: .85rem; }
.guide { border-top: 1px solid var(--border); padding-top: .75rem; }
.guide summary { cursor: pointer; font-weight: 600; color: var(--accent-text); display: flex; align-items: center; gap: .4rem; }
.guide summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
.guide ol, .guide ul { margin: .75rem 0 0; padding-left: 1.25rem; display: grid; gap: .45rem; font-size: .92rem; }
.guide code { font-family: var(--font-mono); font-size: .85em; background: var(--accent-soft); padding: .05em .35em; border-radius: 5px; overflow-wrap: anywhere; }

/* Gruppenformular: Anbieter + Produkt */
.provider-choice__item { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .75rem .85rem; margin-bottom: .75rem; background: var(--surface); }
.provider-link { margin: .75rem 0 0 1.9rem; padding-left: .85rem; border-left: 3px solid var(--accent-soft); }
.provider-link[hidden] { display: none; }
.provider-link select, .provider-link input { width: 100%; }
@media (max-width: 560px) { .provider-link { margin-left: 0; } }

/* Gruppenformular: Bereiche */
.feature-choice__grid { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); margin-bottom: .75rem; }
.feature-choice__item { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .7rem .8rem; background: var(--surface); align-items: flex-start; }
.feature-choice__item:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.feature-choice__item .icon { vertical-align: -3px; }

.pay-btn--ds24 { background: #0a4b8f; color: #fff; border-color: #0a4b8f; }
.pay-btn--ds24:hover { background: #083c73; color: #fff; }

.footer-vendor { flex-basis: 100%; margin: 0; font-size: .78rem; color: var(--on-petrol-muted); opacity: .8; letter-spacing: .01em; }
.footer-version { font-variant-numeric: tabular-nums; }
.admin-version { font-size: .8rem; color: var(--text-muted); margin-top: 2rem; }

.footer-version { margin-left: .6rem; padding-left: .6rem; border-left: 1px solid currentColor; opacity: .75; }

.footer-version { display: inline-block; white-space: nowrap; }
@media (max-width: 640px) { .footer-version { display: block; margin: .15rem 0 0; padding: 0; border: 0; } }

/* Startseite: Kachel-Collage (versetzt links/rechts, leicht überlappend, unterschiedliche Tiefe) */
.float-card--ai, .float-card--rank, .float-card--tool, .float-card--affiliate { display: none; gap: .65rem; align-items: center; padding: .65rem .85rem; }
.float-card--ai > div, .float-card--rank > div, .float-card--tool > div, .float-card--affiliate > div { display: grid; }
.float-card .float-card__ico { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; flex: none; font-size: 1.05rem; background: rgb(255 255 255 / .12); color: var(--brand-yellow); }
.float-card .float-card__ico--ai { background: linear-gradient(135deg, #7c5cff, #2fb5a0); color: #fff; }
.float-card .float-card__ico--tool { background: var(--sage-light); color: #0b2327; }
.float-card .float-card__ico--affiliate, .hero-chips .float-card__ico--affiliate { background: linear-gradient(135deg, #f3e20f, #2fb5a0); color: #0b2327; }
@media (min-width: 901px) {
  .hero__preview { min-height: 660px; }
  .hero__preview::before {
    content: ""; position: absolute; inset: 10% 5% 15% 10%; border-radius: 50%;
    background: radial-gradient(closest-side, rgb(159 200 179 / .22), transparent); filter: blur(20px); pointer-events: none;
  }
  .float-card--ai, .float-card--rank, .float-card--tool, .float-card--affiliate { display: flex; }
  .float-card { animation-duration: 8s; }
  .float-card--ai     { top: 0;     right: 0;   left: auto; z-index: 3; animation-delay: -1s; animation-duration: 7s; }
  .float-card--affiliate { top: 590px; left: 2%; right: auto; z-index: 3; animation-delay: -2.5s; animation-duration: 8.5s; }
  .float-card--post   { top: 48px;  left: 6%;   right: auto; width: 78%; z-index: 1; }
  .float-card--rank   { top: 212px; right: -4%; left: auto; z-index: 3; animation-delay: -3s; animation-duration: 9s; }
  .float-card--level  { top: 286px; left: 0;    right: auto; z-index: 2; animation-delay: -2s; }
  .float-card--course { top: 316px; right: -3%; left: auto; width: 44%; z-index: 2; animation-delay: -5.5s; animation-duration: 7.5s; }
  .float-card--tool   { top: 416px; left: 8%;   right: auto; z-index: 2; animation-delay: -6s; animation-duration: 9.5s; }
  .float-card--event  { top: 490px; right: 6%;  left: auto; bottom: auto; z-index: 2; animation-delay: -4s; }
}
@media (min-width: 901px) and (max-width: 1199px) {
  .hero__preview { min-height: 520px; }
  .float-card--rank, .float-card--tool, .float-card--affiliate { display: none; }
  .float-card--post   { left: 0; width: 92%; }
  .float-card--level  { top: 290px; }
  .float-card--course { top: 372px; width: 60%; }
  .float-card--event  { top: 448px; right: auto; left: 0; }
}
/* Footer: Links rechts neben dem Logo, Hersteller-Zeile darunter */
.site-footer nav { margin-left: auto; }
.footer-vendor { order: 3; }

/* ===== Startseite (Gäste): Abschnitte ===== */
.hero__lead { font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); }
.landing-block { margin-block: clamp(3rem, 7vw, 5.5rem); }
.landing-block--narrow { max-width: 820px; margin-inline: auto; }
.section-head--center { justify-content: center; text-align: center; margin: 0 auto 2rem; }
.section-head--center h2 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem); letter-spacing: -.02em; }

/* Das bekommst du */
.benefits { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }
.benefits li { background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 1.4rem 1.25rem; box-shadow: var(--shadow); transition: transform .2s, box-shadow .2s, border-color .2s; }
.benefits li:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--accent); }
.benefits h3 { font-size: 1.05rem; margin: .9rem 0 .35rem; }
.benefits p { margin: 0; color: var(--text-muted); font-size: .93rem; line-height: 1.55; }
.benefits__icon { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-text); font-size: 1.2rem; }
.benefits__icon--ai { background: linear-gradient(135deg, #7c5cff, #2fb5a0); color: #fff; }
.benefits li:first-child { border-color: color-mix(in srgb, #7c5cff 45%, var(--border)); }

/* So funktioniert's */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); counter-reset: none; position: relative; }
.steps li { position: relative; padding: 1.5rem 1.25rem 1.25rem; text-align: center; }
.steps h3 { font-size: 1.1rem; margin: 1rem 0 .4rem; }
.steps p { margin: 0 auto; max-width: 30ch; color: var(--text-muted); font-size: .95rem; }
.steps__num { width: 56px; height: 56px; margin-inline: auto; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 1.35rem; color: var(--brand-yellow-text); background: var(--brand-yellow); box-shadow: 0 0 0 8px rgb(243 226 15 / .16), 0 10px 24px rgb(0 0 0 / .15); position: relative; z-index: 1; }
@media (min-width: 800px) {
  .steps li:not(:last-child)::after { content: ""; position: absolute; top: calc(1.5rem + 28px); left: calc(50% + 44px); right: calc(-50% + 44px); border-top: 2px dashed var(--border-strong); opacity: .5; }
}

/* Gruppen-Angebote */
.offers { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); align-items: stretch; }
.offer { position: relative; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: 22px; overflow: hidden; box-shadow: var(--shadow); transition: transform .2s, box-shadow .2s; }
.offer:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.offer--recommended { border: 2px solid var(--brand-yellow); box-shadow: 0 0 0 6px rgb(243 226 15 / .12), var(--shadow-lg); }
.offer__ribbon { position: absolute; top: .85rem; left: .85rem; z-index: 2; background: var(--brand-yellow); color: var(--brand-yellow-text); font-weight: 700; font-size: .78rem; padding: .3rem .7rem; border-radius: 999px; box-shadow: 0 4px 14px rgb(0 0 0 / .18); }
.offer__media { height: 110px; position: relative; }
.offer__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.offer__body { display: flex; flex-direction: column; gap: .6rem; padding: 1.25rem 1.35rem 1.4rem; flex: 1; }
.offer__title { font-size: 1.25rem; margin: 0; }
.offer__tagline { margin: 0; color: var(--text-muted); font-size: .93rem; }
.offer__price { margin: .25rem 0 .25rem; display: flex; align-items: baseline; gap: .4rem; }
.offer__price strong { font-size: 1.8rem; letter-spacing: -.02em; }
.offer__price span { color: var(--text-muted); font-size: .9rem; }
.offer__list { list-style: none; margin: 0 0 .5rem; padding: .9rem 0 0; border-top: 1px solid var(--border); display: grid; gap: .5rem; font-size: .93rem; flex: 1; align-content: start; }
.offer__list li { display: flex; gap: .5rem; align-items: flex-start; }
.offer__list .icon { color: var(--accent); flex: none; margin-top: .15em; }
.offer .btn { margin-top: auto; }

/* Stimmen */
.voices { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.voices figure { margin: 0; height: 100%; display: flex; flex-direction: column; justify-content: space-between; gap: 1rem; background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 1.4rem; box-shadow: var(--shadow); }
.voices blockquote { margin: 0; font-size: 1.02rem; line-height: 1.6; }
.voices blockquote p { margin: 0; }
.voices figcaption { display: flex; gap: .7rem; align-items: center; }
.voices figcaption > span:last-child { display: grid; }
.voices figcaption small { color: var(--text-muted); }
.voices .avatar { color: #fff; }

/* FAQ */
.faq { display: grid; gap: .6rem; }
.faq details { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; transition: border-color .2s; }
.faq details[open] { border-color: var(--accent); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 1.2rem; font-weight: 600; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 16px; }
.faq__icon { width: 26px; height: 26px; flex: none; border-radius: 50%; background: var(--accent-soft); position: relative; transition: transform .2s; }
.faq__icon::before, .faq__icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 2px; background: var(--accent-text); border-radius: 2px; transform: translate(-50%, -50%); }
.faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform .2s; }
.faq details[open] .faq__icon::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq details p { margin: 0; padding: 0 1.2rem 1.1rem; color: var(--text-muted); line-height: 1.6; }

/* Abschluss */
.cta-final { text-align: center; margin-top: clamp(3rem, 7vw, 5rem); }
.cta-final h2 { color: var(--on-petrol); font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.6rem); letter-spacing: -.02em; margin: 0 0 .6rem; }
.cta-final p { margin-inline: auto; }
.cta-final .hero__actions { justify-content: center; }

/* Mobil: Vorschau-Kacheln zum Wischen (Hero-Collage ist dort ausgeblendet) */
.hero-chips { display: none; }
@media (max-width: 520px) {
  .hero-chips {
    display: flex; gap: .75rem; list-style: none; margin: -.5rem -16px 0; padding: 0 16px .5rem;
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  }
  .hero-chips::-webkit-scrollbar { display: none; }
  .hero-chips li {
    flex: 0 0 auto; scroll-snap-align: start; display: flex; gap: .65rem; align-items: center;
    padding: .7rem .9rem; border-radius: 16px; background: var(--petrol); color: var(--on-petrol); box-shadow: var(--shadow);
  }
  .hero-chips li > div { display: grid; }
  .hero-chips strong { font-size: .9rem; }
  .hero-chips div span { font-size: .78rem; color: var(--on-petrol-muted); }
  .hero-chips .float-card__ico, .hero-chips .float-card__lvl, .hero-chips .float-card__date {
    width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; flex: none; font-weight: 700;
  }
  .hero-chips .float-card__lvl { background: var(--brand-yellow); color: var(--brand-yellow-text); }
  .hero-chips .float-card__date { background: var(--sage-light); color: #0b2327; font-size: .75rem; line-height: 1; }
  .hero-chips .float-card__date small { font-size: .55rem; }
  .hero__trust { flex-direction: column; }
}

/* Vorteile: 5 in einer Reihe (Desktop), sonst KI-Kachel breit + 2er-Raster */
@media (min-width: 1000px) { .benefits { grid-template-columns: repeat(5, 1fr); } }
@media (min-width: 560px) and (max-width: 999px) { .benefits { grid-template-columns: repeat(2, 1fr); } .benefits li:first-child { grid-column: 1 / -1; } }

/* Startseite: Themen-Filter und Themen-Label der Kurse */
.topic-filter { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin: -1rem 0 1.75rem; }
.topic-filter[hidden] { display: none; }
.topic-filter__btn { font: inherit; font-weight: 600; font-size: .92rem; cursor: pointer; padding: .5rem 1.1rem; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); transition: background-color .15s, color .15s, border-color .15s; }
.topic-filter__btn:hover { color: var(--text); border-color: var(--accent); }
.topic-filter__btn[aria-pressed="true"] { background: var(--pill-active-bg); color: var(--pill-active-text); border-color: var(--pill-active-bg); }
.topic-filter__btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.offer[hidden] { display: none; }
.offer__topic { align-self: flex-start; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: .25rem .6rem; border-radius: 999px; background: var(--accent-soft); color: var(--accent-text); }
.offer__topic--ki { background: color-mix(in srgb, #7c5cff 18%, var(--surface)); color: color-mix(in srgb, #7c5cff 70%, var(--text)); }
.offer__topic--both { background: linear-gradient(90deg, var(--accent-soft), color-mix(in srgb, #7c5cff 18%, var(--surface))); }

/* ===== Kursübersicht (Startseite + /kurse) ===== */
.course-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.course-card { position: relative; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: 22px; overflow: hidden; box-shadow: var(--shadow); transition: transform .2s, box-shadow .2s, border-color .2s; }
.course-card:hover, .course-card:focus-within { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--accent); }
.course-card--recommended { border-color: var(--brand-yellow); }
.course-card[hidden] { display: none; }
.course-card__media { position: relative; height: 120px; }
.course-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.course-card__flag { position: absolute; top: .8rem; left: .8rem; display: inline-flex; align-items: center; gap: .3rem; background: var(--brand-yellow); color: var(--brand-yellow-text); font-weight: 700; font-size: .76rem; padding: .28rem .65rem; border-radius: 999px; box-shadow: 0 4px 14px rgb(0 0 0 / .18); }
.course-card__flag--owned { background: var(--success); color: #fff; }
.course-card__body { display: flex; flex-direction: column; gap: .55rem; padding: 1.15rem 1.25rem 1.2rem; flex: 1; }
.course-card__title { font-size: 1.2rem; margin: 0; line-height: 1.25; }
.course-card__title a { color: inherit; text-decoration: none; }
/* ganze Karte klickbar, Fokus sichtbar an der Karte */
.course-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.course-card__title a:focus-visible { outline: none; }
.course-card:has(.course-card__title a:focus-visible) { outline: 3px solid var(--focus); outline-offset: 3px; }
.course-card__text { margin: 0; color: var(--text-muted); font-size: .93rem; line-height: 1.5; }
.course-card__list { list-style: none; margin: .2rem 0 0; padding: 0; display: grid; gap: .4rem; font-size: .9rem; }
.course-card__list li { display: flex; gap: .45rem; align-items: flex-start; }
.course-card__list .icon { color: var(--accent); flex: none; margin-top: .15em; }
.course-card__foot { margin-top: auto; padding-top: .9rem; border-top: 1px solid var(--border); display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; flex-wrap: wrap; }
.course-card__price { margin: 0; display: flex; align-items: baseline; gap: .35rem; }
.course-card__price strong { font-size: 1.45rem; letter-spacing: -.02em; }
.course-card__price span { color: var(--text-muted); font-size: .85rem; }
.course-card__more { display: inline-flex; align-items: center; gap: .25rem; font-weight: 700; color: var(--accent-text); font-size: .95rem; }
.course-card:hover .course-card__more .icon { transform: translateX(3px); }
.course-card__more .icon { transition: transform .2s; }
.course-grid__all { text-align: center; margin: 1.75rem 0 0; }
.page-head--center { text-align: center; justify-content: center; }
.page-head--center p { max-width: 62ch; margin-inline: auto; }
.page-head--center + section .topic-filter { margin-top: 0; }

/* Kursseite: Inhalte */
.course-includes { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.course-includes li { display: flex; gap: .5rem; align-items: flex-start; }
.course-includes .icon { color: var(--accent); flex: none; margin-top: .15em; }
.curriculum { display: grid; gap: .5rem; }
.curriculum details { border: 1px solid var(--border); border-radius: 14px; background: var(--surface-2); }
.curriculum summary { cursor: pointer; padding: .8rem 1rem; font-weight: 600; display: flex; justify-content: space-between; gap: 1rem; }
.curriculum summary span { color: var(--text-muted); font-weight: 400; font-size: .88rem; white-space: nowrap; }
.curriculum ol { margin: 0; padding: 0 1rem .9rem 2.4rem; display: grid; gap: .3rem; color: var(--text-muted); font-size: .93rem; }
@media (min-width: 900px) { .course-grid { grid-template-columns: repeat(3, 1fr); } .course-card__media { height: 140px; } }

/* Kursübersicht kompakter: 4 Kurse pro Zeile (Desktop), 2 (Tablet), 1 (Handy) */
@media (min-width: 600px) { .course-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .course-grid { grid-template-columns: repeat(4, 1fr); gap: 1rem; } }
@media (min-width: 900px) { .course-card__media { height: 96px; } }
.course-card__media { height: 96px; }
.course-card { border-radius: 18px; }
.course-card__body { gap: .45rem; padding: .95rem 1rem 1rem; }
.course-card__title { font-size: 1.05rem; }
.course-card__text { font-size: .86rem; line-height: 1.45; }
.course-card__list { font-size: .84rem; gap: .3rem; }
.course-card__foot { padding-top: .7rem; }
.course-card__price strong { font-size: 1.2rem; }
.course-card__price span { font-size: .78rem; }
.course-card__more { font-size: .86rem; }
.course-card__flag { font-size: .7rem; top: .6rem; left: .6rem; }
.course-card .offer__topic { font-size: .66rem; padding: .2rem .5rem; }

/* Admin: E-Mail-Vorlagen */
.mail-admin { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); align-items: start; }
@media (max-width: 900px) { .mail-admin { grid-template-columns: 1fr; } }
.mail-admin__list ul { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .25rem; }
.mail-admin__list a { display: grid; gap: .1rem; padding: .55rem .7rem; border-radius: 10px; text-decoration: none; color: var(--text); }
.mail-admin__list a span { font-size: .78rem; color: var(--text-muted); }
.mail-admin__list a:hover { background: var(--surface-2); }
.mail-admin__list a[aria-current="page"] { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
.mail-admin__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.mail-admin__subject { font-size: 1.1rem; margin: .1rem 0 0; }
.mail-admin__frame { width: 100%; height: 900px; border: 1px solid var(--border); border-radius: 14px; background: #f6f1e7; }
.mail-admin__text { white-space: pre-wrap; font-family: var(--font-mono); font-size: .82rem; background: var(--surface-2); padding: 1rem; border-radius: 10px; max-height: 420px; overflow: auto; }

/* Admin: Kurs-Statistik */
.course-stats__head { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem 1rem; flex-wrap: wrap; }
.course-stats td { vertical-align: top; }
.course-stats .num { text-align: right; white-space: nowrap; }
.course-stats tr.is-inactive td { opacity: .6; }
.trend { font-weight: 700; }
.trend--up { color: var(--success); }
.trend--down { color: var(--danger); }
/* Schalter (Kurs aktiv/inaktiv) */
.switch { display: inline-flex; align-items: center; gap: .5rem; background: none; border: 0; padding: .25rem; cursor: pointer; font: inherit; color: var(--text); border-radius: 999px; }
.switch:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.switch__track { width: 42px; height: 24px; border-radius: 999px; background: var(--border-strong); position: relative; transition: background-color .2s; flex: none; }
.switch__thumb { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / .3); transition: transform .2s; }
.switch[aria-checked="true"] .switch__track { background: var(--success); }
.switch[aria-checked="true"] .switch__thumb { transform: translateX(18px); }
.switch__label { font-size: .88rem; font-weight: 600; }
.msg-history { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.msg-history li { display: grid; gap: .15rem; padding-bottom: .75rem; border-bottom: 1px solid var(--border); }
.msg-history li:last-child { border-bottom: 0; padding-bottom: 0; }

/* Dashboard: Nachrichten aus den Kursen */
.course-msgs { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.course-msg { background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--brand-yellow); border-radius: 18px; padding: 1.1rem 1.25rem; box-shadow: var(--shadow); }
.course-msg__head { display: flex; gap: .75rem; align-items: flex-start; margin-bottom: .6rem; }
.course-msg__icon { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-text); flex: none; }
.course-msg__title { font-size: 1.05rem; margin: 0 0 .15rem; }
.course-msg__body { font-size: .95rem; }
.course-msg__actions { display: flex; gap: .5rem; flex-wrap: wrap; margin: .75rem 0 0; }

/* Newsletter: Bilder im Editor, Admin-Kennzahlen, Nachweis */
/* Bilder im Text: nie breiter als die Spalte, nie überhoch, immer im richtigen Seitenverhältnis */
.rt img, .rt-editor img { display: block; max-width: 100%; width: auto; height: auto; max-height: min(70vh, 640px); object-fit: contain; border-radius: 12px; margin: 1rem auto; }
.rt img.rt-img-l, .rt-editor img.rt-img-l { width: 100%; }
.rt img.rt-img-m, .rt-editor img.rt-img-m { width: 50%; }
.rt img.rt-img-s, .rt-editor img.rt-img-s { width: 30%; min-width: 140px; }
.rt img.rt-img-left, .rt-editor img.rt-img-left { margin-left: 0; margin-right: auto; }
.rt img.rt-img-right, .rt-editor img.rt-img-right { margin-left: auto; margin-right: 0; }
@media (min-width: 700px) {
  /* Kleine und mittlere Bilder links/rechts: Text fließt daneben */
  .rt img.rt-img-left:is(.rt-img-s, .rt-img-m), .rt-editor img.rt-img-left:is(.rt-img-s, .rt-img-m) { float: left; margin: .25rem 1.25rem .75rem 0; }
  .rt img.rt-img-right:is(.rt-img-s, .rt-img-m), .rt-editor img.rt-img-right:is(.rt-img-s, .rt-img-m) { float: right; margin: .25rem 0 .75rem 1.25rem; }
  .rt::after { content: ""; display: table; clear: both; }
}
@media (max-width: 699px) { .rt img.rt-img-m, .rt img.rt-img-s { width: 100%; max-width: 420px; } }
.stat-row { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.stat-row li { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: .8rem 1rem; display: grid; }
.stat-row strong { font-size: 1.5rem; }
.stat-row span { color: var(--text-muted); font-size: .85rem; }
.proof { display: grid; grid-template-columns: minmax(140px, 200px) 1fr; gap: .5rem 1rem; margin: 0; }
.proof dt { color: var(--text-muted); font-size: .9rem; }
.proof dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 560px) { .proof { grid-template-columns: 1fr; } .proof dd { margin-bottom: .5rem; } }
.nl-page { text-align: center; }
.nl-page__icon { width: 64px; height: 64px; margin: 0 auto 1rem; border-radius: 20px; display: grid; place-items: center; background: var(--brand-yellow); color: var(--brand-yellow-text); }
.nl-page__icon .icon { width: 30px; height: 30px; }

/* Startseite: Newsletter-Anmeldung */
.nl-signup {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; gap: clamp(1.5rem, 4vw, 3rem); grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center;
  margin-block: clamp(3rem, 7vw, 5rem); padding: clamp(1.75rem, 5vw, 3.25rem); border-radius: 28px; color: var(--on-petrol);
  background:
    radial-gradient(circle at 100% 0%, rgb(243 226 15 / .18), transparent 45%),
    radial-gradient(ellipse at 0% 100%, rgb(47 125 109 / .5), transparent 55%),
    linear-gradient(150deg, #071a1d, #102f34 60%, #15393f);
  box-shadow: var(--shadow-lg);
}
.nl-signup::after { content: ""; position: absolute; right: -60px; bottom: -60px; width: 220px; height: 220px; border-radius: 50%; border: 28px solid rgb(243 226 15 / .08); z-index: -1; }
.nl-signup__icon { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; background: var(--brand-yellow); color: var(--brand-yellow-text); box-shadow: 0 0 0 8px rgb(243 226 15 / .15); margin-bottom: 1rem; }
.nl-signup__icon .icon { width: 26px; height: 26px; }
.nl-signup .eyebrow { color: var(--sage-light); }
.nl-signup h2 { color: var(--on-petrol); font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.2rem); letter-spacing: -.02em; margin: 0 0 .6rem; }
.nl-signup__text p { color: var(--on-petrol-muted); max-width: 48ch; }
.nl-signup__points { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; color: var(--on-petrol); font-weight: 600; font-size: .92rem; }
.nl-signup__points li { display: inline-flex; gap: .35rem; align-items: center; }
.nl-signup__points .icon { color: var(--brand-yellow); }
.nl-signup__form { background: rgb(255 255 255 / .06); border: 1px solid rgb(255 255 255 / .12); border-radius: 20px; padding: 1.25rem; backdrop-filter: blur(6px); }
.nl-signup__form label { color: var(--on-petrol); }
.nl-signup__form input[type="text"], .nl-signup__form input[type="email"] { background: rgb(255 255 255 / .95); color: #171512; border-color: transparent; }
.nl-signup__form input:focus-visible { outline: 3px solid var(--brand-yellow); outline-offset: 2px; }
.nl-optional { color: var(--on-petrol-muted); font-weight: 400; }
.nl-hint { margin: .35rem 0 0; font-size: .85rem; line-height: 1.45; color: var(--on-petrol-muted); }
.nl-consent span { font-size: .82rem; line-height: 1.45; color: var(--on-petrol-muted); font-weight: 400; }
.nl-consent a { color: var(--brand-yellow); }
.nl-signup__form .field-error, .nl-signup__form .error { color: #ffb4ab; }
.nl-signup__note { display: flex; gap: .4rem; align-items: center; justify-content: center; margin: .75rem 0 0; font-size: .8rem; color: var(--on-petrol-muted); }
.nl-hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 820px) { .nl-signup { grid-template-columns: 1fr; } }

.nl-account { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--border); }
.nl-account__title { font-size: 1rem; display: flex; gap: .4rem; align-items: center; margin: 0 0 .5rem; }
.hero-chips:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 12px; }

/* Admin: Mediathek */
.media-upload__form { display: grid; gap: 0 1rem; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto; align-items: end; }
@media (max-width: 760px) { .media-upload__form { grid-template-columns: 1fr; } }
.media-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin: 1.25rem 0 1rem; }
.media-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.media-item { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; }
.media-item__thumb { display: block; aspect-ratio: 4 / 3; background: repeating-conic-gradient(var(--surface-2) 0 25%, transparent 0 50%) 0 0 / 16px 16px; }
.media-item__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-item__body { padding: .7rem .8rem .8rem; display: grid; gap: .25rem; }
.media-item__name { margin: 0; font-weight: 600; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.media-item__edit summary { cursor: pointer; font-size: .85rem; color: var(--accent-text); font-weight: 600; margin-top: .3rem; }
.media-item__edit form { margin-top: .5rem; }
/* Editor: Bildauswahl */
.media-picker { width: min(860px, calc(100vw - 32px)); max-height: 86vh; border: 0; border-radius: 20px; padding: 1.25rem; background: var(--surface); color: var(--text); box-shadow: var(--shadow-lg); }
.media-picker::backdrop { background: rgb(7 26 29 / .6); backdrop-filter: blur(3px); }
.media-picker__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .75rem; }
.media-picker__head h2 { font-size: 1.15rem; margin: 0; }
.media-picker__search { width: 100%; margin-bottom: .75rem; }
.media-picker__grid { list-style: none; margin: 0 0 .75rem; padding: 0; display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); max-height: 56vh; overflow: auto; }
.media-picker__item { width: 100%; padding: 0; border: 2px solid var(--border); border-radius: 12px; background: var(--surface-2); cursor: pointer; overflow: hidden; display: grid; text-align: left; color: var(--text); font: inherit; }
.media-picker__item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.media-picker__item span { font-size: .78rem; padding: .35rem .5rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.media-picker__item:hover, .media-picker__item:focus-visible { border-color: var(--accent); outline: none; }

/* Admin: Punkte & Urkunden */
.rules-grid { display: grid; gap: .25rem 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.rule__input { display: flex; align-items: center; gap: .5rem; }
.rule__input input { width: 6rem; }
.rule__input span { color: var(--text-muted); font-size: .9rem; }
.level-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.level-list li { display: flex; justify-content: space-between; gap: 1rem; padding: .3rem 0; border-bottom: 1px solid var(--border); font-size: .92rem; }
.level-list li:last-child { border-bottom: 0; }

/* Urkunde (auch für Druck/PDF) */
.cert-actions { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.certificate { max-width: 1000px; margin: 0 auto; aspect-ratio: 1.414 / 1; background: #fbf8f2; color: #171512; border-radius: 12px; padding: clamp(.75rem, 2vw, 1.5rem); box-shadow: var(--shadow-lg); }
.certificate__frame { height: 100%; border: 3px solid #102f34; outline: 1px solid #f3e20f; outline-offset: -10px; border-radius: 6px; padding: clamp(1rem, 4vw, 3rem); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: .35rem;
  background: radial-gradient(circle at 50% 0%, rgb(243 226 15 / .12), transparent 55%), radial-gradient(circle at 50% 100%, rgb(47 125 109 / .08), transparent 55%); }
.certificate__logo { height: clamp(28px, 5vw, 48px); width: auto; margin-bottom: .5rem; }
.certificate__kicker { margin: 0; letter-spacing: .25em; text-transform: uppercase; font-size: clamp(.65rem, 1.2vw, .8rem); color: #2f7d6d; font-weight: 700; }
.certificate__title { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(2rem, 6vw, 4rem); color: #102f34; letter-spacing: .04em; }
.certificate__title--long { font-size: clamp(1.6rem, 5vw, 3.1rem); letter-spacing: .02em; overflow-wrap: anywhere; }
.certificate__lead { margin: .25rem 0 0; color: #5c574e; font-size: clamp(.8rem, 1.5vw, 1rem); }
.certificate__name { margin: .2rem 0; font-family: Georgia, "Times New Roman", serif; font-style: italic; font-size: clamp(1.5rem, 4.5vw, 3rem); color: #171512; border-bottom: 2px solid #f3e20f; padding: 0 1.5rem .2rem; }
.certificate__course { margin: .2rem 0 0; font-weight: 700; font-size: clamp(1rem, 2.4vw, 1.6rem); color: #102f34; }
.certificate__meta { margin: 0; color: #5c574e; font-size: clamp(.75rem, 1.4vw, .95rem); }
.certificate__foot { display: grid; grid-template-columns: 1fr auto 1fr; gap: clamp(1rem, 4vw, 3rem); align-items: end; width: 100%; max-width: 720px; margin-top: clamp(1rem, 3vw, 2rem); }
.certificate__foot p { margin: .3rem 0 0; font-size: clamp(.75rem, 1.4vw, .95rem); }
.certificate__foot small { color: #5c574e; }
.certificate__line { display: block; border-top: 1px solid #171512; }
.certificate__seal { width: clamp(52px, 8vw, 84px); height: clamp(52px, 8vw, 84px); border-radius: 50%; display: grid; place-items: center; background: #f3e20f; color: #1f1c02; box-shadow: 0 0 0 6px rgb(243 226 15 / .3); }
.certificate__seal .icon { width: 55%; height: 55%; }
.certificate__code { margin: clamp(.75rem, 2vw, 1.25rem) 0 0; font-size: clamp(.6rem, 1.1vw, .75rem); color: #5c574e; }
@media print {
  @page { size: A4 landscape; margin: 0; }
  body { background: #fff !important; }
  .no-print, .site-header, .site-footer, .skip-link { display: none !important; }
  main, .container { padding: 0 !important; margin: 0 !important; max-width: none !important; }
  .certificate { box-shadow: none; border-radius: 0; width: 297mm; height: 210mm; max-width: none; aspect-ratio: auto; }
}

/* Hilfsklassen für Balken (keine Inline-Styles wegen Content-Security-Policy) */
.ph-0{height:0%}.pw-0{width:0%}
.ph-1{height:1%}.pw-1{width:1%}.fg-1{flex-grow:1}.ph-2{height:2%}.pw-2{width:2%}.fg-2{flex-grow:2}.ph-3{height:3%}.pw-3{width:3%}.fg-3{flex-grow:3}.ph-4{height:4%}.pw-4{width:4%}.fg-4{flex-grow:4}.ph-5{height:5%}.pw-5{width:5%}.fg-5{flex-grow:5}.ph-6{height:6%}.pw-6{width:6%}.fg-6{flex-grow:6}.ph-7{height:7%}.pw-7{width:7%}.fg-7{flex-grow:7}.ph-8{height:8%}.pw-8{width:8%}.fg-8{flex-grow:8}.ph-9{height:9%}.pw-9{width:9%}.fg-9{flex-grow:9}.ph-10{height:10%}.pw-10{width:10%}.fg-10{flex-grow:10}
.ph-11{height:11%}.pw-11{width:11%}.fg-11{flex-grow:11}.ph-12{height:12%}.pw-12{width:12%}.fg-12{flex-grow:12}.ph-13{height:13%}.pw-13{width:13%}.fg-13{flex-grow:13}.ph-14{height:14%}.pw-14{width:14%}.fg-14{flex-grow:14}.ph-15{height:15%}.pw-15{width:15%}.fg-15{flex-grow:15}.ph-16{height:16%}.pw-16{width:16%}.fg-16{flex-grow:16}.ph-17{height:17%}.pw-17{width:17%}.fg-17{flex-grow:17}.ph-18{height:18%}.pw-18{width:18%}.fg-18{flex-grow:18}.ph-19{height:19%}.pw-19{width:19%}.fg-19{flex-grow:19}.ph-20{height:20%}.pw-20{width:20%}.fg-20{flex-grow:20}
.ph-21{height:21%}.pw-21{width:21%}.fg-21{flex-grow:21}.ph-22{height:22%}.pw-22{width:22%}.fg-22{flex-grow:22}.ph-23{height:23%}.pw-23{width:23%}.fg-23{flex-grow:23}.ph-24{height:24%}.pw-24{width:24%}.fg-24{flex-grow:24}.ph-25{height:25%}.pw-25{width:25%}.fg-25{flex-grow:25}.ph-26{height:26%}.pw-26{width:26%}.fg-26{flex-grow:26}.ph-27{height:27%}.pw-27{width:27%}.fg-27{flex-grow:27}.ph-28{height:28%}.pw-28{width:28%}.fg-28{flex-grow:28}.ph-29{height:29%}.pw-29{width:29%}.fg-29{flex-grow:29}.ph-30{height:30%}.pw-30{width:30%}.fg-30{flex-grow:30}
.ph-31{height:31%}.pw-31{width:31%}.fg-31{flex-grow:31}.ph-32{height:32%}.pw-32{width:32%}.fg-32{flex-grow:32}.ph-33{height:33%}.pw-33{width:33%}.fg-33{flex-grow:33}.ph-34{height:34%}.pw-34{width:34%}.fg-34{flex-grow:34}.ph-35{height:35%}.pw-35{width:35%}.fg-35{flex-grow:35}.ph-36{height:36%}.pw-36{width:36%}.fg-36{flex-grow:36}.ph-37{height:37%}.pw-37{width:37%}.fg-37{flex-grow:37}.ph-38{height:38%}.pw-38{width:38%}.fg-38{flex-grow:38}.ph-39{height:39%}.pw-39{width:39%}.fg-39{flex-grow:39}.ph-40{height:40%}.pw-40{width:40%}.fg-40{flex-grow:40}
.ph-41{height:41%}.pw-41{width:41%}.fg-41{flex-grow:41}.ph-42{height:42%}.pw-42{width:42%}.fg-42{flex-grow:42}.ph-43{height:43%}.pw-43{width:43%}.fg-43{flex-grow:43}.ph-44{height:44%}.pw-44{width:44%}.fg-44{flex-grow:44}.ph-45{height:45%}.pw-45{width:45%}.fg-45{flex-grow:45}.ph-46{height:46%}.pw-46{width:46%}.fg-46{flex-grow:46}.ph-47{height:47%}.pw-47{width:47%}.fg-47{flex-grow:47}.ph-48{height:48%}.pw-48{width:48%}.fg-48{flex-grow:48}.ph-49{height:49%}.pw-49{width:49%}.fg-49{flex-grow:49}.ph-50{height:50%}.pw-50{width:50%}.fg-50{flex-grow:50}
.ph-51{height:51%}.pw-51{width:51%}.fg-51{flex-grow:51}.ph-52{height:52%}.pw-52{width:52%}.fg-52{flex-grow:52}.ph-53{height:53%}.pw-53{width:53%}.fg-53{flex-grow:53}.ph-54{height:54%}.pw-54{width:54%}.fg-54{flex-grow:54}.ph-55{height:55%}.pw-55{width:55%}.fg-55{flex-grow:55}.ph-56{height:56%}.pw-56{width:56%}.fg-56{flex-grow:56}.ph-57{height:57%}.pw-57{width:57%}.fg-57{flex-grow:57}.ph-58{height:58%}.pw-58{width:58%}.fg-58{flex-grow:58}.ph-59{height:59%}.pw-59{width:59%}.fg-59{flex-grow:59}.ph-60{height:60%}.pw-60{width:60%}.fg-60{flex-grow:60}
.ph-61{height:61%}.pw-61{width:61%}.fg-61{flex-grow:61}.ph-62{height:62%}.pw-62{width:62%}.fg-62{flex-grow:62}.ph-63{height:63%}.pw-63{width:63%}.fg-63{flex-grow:63}.ph-64{height:64%}.pw-64{width:64%}.fg-64{flex-grow:64}.ph-65{height:65%}.pw-65{width:65%}.fg-65{flex-grow:65}.ph-66{height:66%}.pw-66{width:66%}.fg-66{flex-grow:66}.ph-67{height:67%}.pw-67{width:67%}.fg-67{flex-grow:67}.ph-68{height:68%}.pw-68{width:68%}.fg-68{flex-grow:68}.ph-69{height:69%}.pw-69{width:69%}.fg-69{flex-grow:69}.ph-70{height:70%}.pw-70{width:70%}.fg-70{flex-grow:70}
.ph-71{height:71%}.pw-71{width:71%}.fg-71{flex-grow:71}.ph-72{height:72%}.pw-72{width:72%}.fg-72{flex-grow:72}.ph-73{height:73%}.pw-73{width:73%}.fg-73{flex-grow:73}.ph-74{height:74%}.pw-74{width:74%}.fg-74{flex-grow:74}.ph-75{height:75%}.pw-75{width:75%}.fg-75{flex-grow:75}.ph-76{height:76%}.pw-76{width:76%}.fg-76{flex-grow:76}.ph-77{height:77%}.pw-77{width:77%}.fg-77{flex-grow:77}.ph-78{height:78%}.pw-78{width:78%}.fg-78{flex-grow:78}.ph-79{height:79%}.pw-79{width:79%}.fg-79{flex-grow:79}.ph-80{height:80%}.pw-80{width:80%}.fg-80{flex-grow:80}
.ph-81{height:81%}.pw-81{width:81%}.fg-81{flex-grow:81}.ph-82{height:82%}.pw-82{width:82%}.fg-82{flex-grow:82}.ph-83{height:83%}.pw-83{width:83%}.fg-83{flex-grow:83}.ph-84{height:84%}.pw-84{width:84%}.fg-84{flex-grow:84}.ph-85{height:85%}.pw-85{width:85%}.fg-85{flex-grow:85}.ph-86{height:86%}.pw-86{width:86%}.fg-86{flex-grow:86}.ph-87{height:87%}.pw-87{width:87%}.fg-87{flex-grow:87}.ph-88{height:88%}.pw-88{width:88%}.fg-88{flex-grow:88}.ph-89{height:89%}.pw-89{width:89%}.fg-89{flex-grow:89}.ph-90{height:90%}.pw-90{width:90%}.fg-90{flex-grow:90}
.ph-91{height:91%}.pw-91{width:91%}.fg-91{flex-grow:91}.ph-92{height:92%}.pw-92{width:92%}.fg-92{flex-grow:92}.ph-93{height:93%}.pw-93{width:93%}.fg-93{flex-grow:93}.ph-94{height:94%}.pw-94{width:94%}.fg-94{flex-grow:94}.ph-95{height:95%}.pw-95{width:95%}.fg-95{flex-grow:95}.ph-96{height:96%}.pw-96{width:96%}.fg-96{flex-grow:96}.ph-97{height:97%}.pw-97{width:97%}.fg-97{flex-grow:97}.ph-98{height:98%}.pw-98{width:98%}.fg-98{flex-grow:98}.ph-99{height:99%}.pw-99{width:99%}.fg-99{flex-grow:99}.ph-100{height:100%}.pw-100{width:100%}.fg-100{flex-grow:100}


/* ===== Admin: Module & Untermodule ===== */
.admin-modules { display: flex; gap: .35rem; flex-wrap: wrap; padding: .4rem; margin: 0 0 .75rem; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow); }
.admin-modules__item { display: inline-flex; align-items: center; gap: .45rem; padding: .55rem .95rem; border-radius: 12px; color: var(--text-muted); text-decoration: none; font-weight: 650; font-size: .93rem; min-height: 42px; }
.admin-modules__item:hover { color: var(--text); background: var(--surface-2); }
.admin-modules__item[aria-current="true"] { background: var(--pill-active-bg); color: var(--pill-active-text); }
.admin-modules__item .lamp { margin-left: .1rem; }
.admin-subnav { display: flex; gap: .25rem 1.25rem; flex-wrap: wrap; margin: 0 0 1.5rem; padding: 0 .5rem; border-bottom: 1px solid var(--border); }
.admin-subnav a { position: relative; padding: .55rem 0 .7rem; color: var(--text-muted); text-decoration: none; font-weight: 600; font-size: .92rem; display: inline-flex; gap: .35rem; align-items: center; }
.admin-subnav a:hover { color: var(--text); }
.admin-subnav a[aria-current="page"] { color: var(--text); }
.admin-subnav a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--brand-yellow); }
@media (max-width: 700px) { .admin-modules__item span:not(.count-badge) { display: none; } .admin-modules__item { padding: .55rem .7rem; } }

/* Ampel */
.lamp { display: inline-block; width: 12px; height: 12px; border-radius: 50%; flex: none; vertical-align: middle; }
.lamp--lg { width: 18px; height: 18px; }
.lamp--good { background: #22a06b; box-shadow: 0 0 0 4px rgb(34 160 107 / .2); }
.lamp--steady { background: #e2b203; box-shadow: 0 0 0 4px rgb(226 178 3 / .22); }
.lamp--bad { background: #e5484d; box-shadow: 0 0 0 4px rgb(229 72 77 / .2); }

/* ===== Dashboard ===== */
.dash-head { align-items: flex-end; flex-wrap: wrap; gap: 1rem; }
.period { display: grid; gap: .5rem; justify-items: end; }
.period__modes { display: inline-flex; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: .25rem; gap: .2rem; flex-wrap: wrap; }
.period__mode { position: relative; }
.period__mode input { position: absolute; opacity: 0; pointer-events: none; }
.period__mode span { display: inline-block; padding: .4rem .85rem; border-radius: 999px; cursor: pointer; font-weight: 600; font-size: .88rem; color: var(--text-muted); }
.period__mode input:checked + span { background: var(--pill-active-bg); color: var(--pill-active-text); }
.period__mode input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.period__range { display: flex; gap: .4rem; align-items: center; }
.period__range input { width: auto; padding: .35rem .5rem; }
@media (max-width: 700px) { .period { justify-items: stretch; width: 100%; } .period__range { flex-wrap: wrap; } }

.dash-section { margin-bottom: 1.5rem; }
.dash-section__title { display: flex; gap: .45rem; align-items: center; font-size: 1.05rem; margin: 0 0 .75rem; }
.kpi-grid { list-style: none; margin: 0 0 .5rem; padding: 0; display: grid; gap: .9rem; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.kpi-grid--revenue { grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); }
@media (max-width: 1000px) { .kpi-grid--revenue { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .kpi-grid--revenue { grid-template-columns: 1fr; } }
.kpi { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 1rem 1.1rem 1rem 1.3rem; box-shadow: var(--shadow); display: grid; gap: .35rem; align-content: start; overflow: hidden; }
.kpi::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--border); }
.kpi--good::before { background: #22a06b; }
.kpi--steady::before { background: #e2b203; }
.kpi--bad::before { background: #e5484d; }
.kpi__head { display: flex; align-items: center; gap: .5rem; }
.kpi__label { flex: 1; font-size: .86rem; font-weight: 600; color: var(--text-muted); line-height: 1.3; }
.kpi__icon { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-text); flex: none; }
.kpi__icon .icon { width: 16px; height: 16px; }
.kpi__value { margin: .15rem 0 0; font-size: 1.6rem; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.kpi__value small { font-size: .9rem; color: var(--text-muted); font-weight: 600; }
.kpi__delta { margin: 0; display: flex; flex-wrap: wrap; gap: .25rem .6rem; align-items: center; font-size: .82rem; }
.kpi__trend { display: inline-flex; align-items: center; gap: .2rem; font-weight: 700; padding: .1rem .45rem; border-radius: 999px; }
.kpi__trend .icon { width: 14px; height: 14px; }
.kpi__trend--good { color: #157f52; background: rgb(34 160 107 / .14); }
.kpi__trend--steady { color: #7a5d00; background: rgb(226 178 3 / .2); }
.kpi__trend--bad { color: #b8232a; background: rgb(229 72 77 / .14); }
:root[data-theme="dark"] .kpi__trend--good { color: #6fdca6; }
:root[data-theme="dark"] .kpi__trend--steady { color: #ffd84d; }
:root[data-theme="dark"] .kpi__trend--bad { color: #ff9ea1; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .kpi__trend--good { color: #6fdca6; }
  :root:not([data-theme="light"]) .kpi__trend--steady { color: #ffd84d; }
  :root:not([data-theme="light"]) .kpi__trend--bad { color: #ff9ea1; }
}
.kpi__prev { color: var(--text-muted); }
.kpi__sub { margin: .15rem 0 0; font-size: .82rem; color: var(--text-muted); }
.kpi--hero { background: linear-gradient(150deg, #071a1d, #102f34 60%, #15393f); color: var(--on-petrol); border-color: transparent; }
.kpi--hero .kpi__label, .kpi--hero .kpi__prev, .kpi--hero .kpi__sub { color: var(--on-petrol-muted); }
.kpi--hero .kpi__icon { background: var(--brand-yellow); color: var(--brand-yellow-text); }
.kpi--hero .kpi__value { font-size: 2.3rem; color: #fff; }
.kpi--hero .kpi__trend--good { color: #7ee2b0; background: rgb(34 160 107 / .25); }
.kpi--hero .kpi__trend--bad { color: #ffb4b6; background: rgb(229 72 77 / .25); }
.kpi--hero .kpi__trend--steady { color: #ffe27a; background: rgb(226 178 3 / .25); }
.provider-dot { display: inline-block; width: 12px; height: 12px; border-radius: 4px; flex: none; }
.provider-dot--stripe { background: #635bff; }
.provider-dot--paypal { background: #ffc439; }
.provider-dot--ds24 { background: #0a8fd8; }
.share { height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; margin-top: .2rem; }
.share__bar { display: block; height: 100%; border-radius: 999px; }
.share__bar--stripe { background: #635bff; }
.share__bar--paypal { background: #ffc439; }
.share__bar--ds24 { background: #0a8fd8; }
.dash-columns { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); align-items: start; margin-bottom: 1.25rem; }
@media (max-width: 960px) { .dash-columns { grid-template-columns: 1fr; } }
.dash-side { display: grid; gap: 1.25rem; }
.dash-side .card, .chart-card { margin: 0; }
.chart { display: flex; align-items: flex-end; gap: .5rem; height: 240px; padding: .5rem 0 0; border-bottom: 1px solid var(--border); }
.chart__col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; min-width: 0; }
.chart__stack { width: min(38px, 80%); display: flex; flex-direction: column; border-radius: 8px 8px 2px 2px; overflow: hidden; min-height: 2px; background: var(--surface-2); }
.chart__seg { display: block; flex-basis: 0; }
.chart__seg--stripe { background: #635bff; }
.chart__seg--paypal { background: #ffc439; }
.chart__seg--ds24 { background: #0a8fd8; }
.chart__label { font-size: .72rem; color: var(--text-muted); white-space: nowrap; margin-bottom: -1.6rem; padding-top: .4rem; }
.chart__legend { display: flex; gap: 1rem; flex-wrap: wrap; margin: 2.2rem 0 0; font-size: .85rem; color: var(--text-muted); }
.chart__legend span { display: inline-flex; align-items: center; gap: .35rem; }
.backup-mini__state { display: flex; align-items: center; gap: .6rem; font-weight: 700; margin: 0 0 .4rem; }
.stock { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.stock a { display: grid; padding: .7rem .8rem; border-radius: 12px; background: var(--surface-2); text-decoration: none; color: var(--text); }
.stock a:hover { outline: 2px solid var(--accent); }
.stock strong { font-size: 1.35rem; }
.stock span { font-size: .8rem; color: var(--text-muted); }

/* Backup-Seite */
.backup-status { display: flex; gap: 1rem; align-items: center; }
.backup-status__label { font-weight: 700; font-size: 1.1rem; margin: 0 0 .2rem; }
.restore summary { cursor: pointer; font-size: .85rem; color: var(--danger); font-weight: 600; margin-top: .4rem; display: inline-flex; gap: .3rem; align-items: center; }
.restore__form { margin-top: .6rem; padding: .8rem; border: 1px solid var(--danger); border-radius: 12px; background: var(--danger-soft); max-width: 360px; }

/* Mitglieder-Dashboard: Punktestand & Urkunden */
.points-card { display: grid; gap: 1.25rem; grid-template-columns: minmax(170px, .7fr) minmax(0, 1.6fr) minmax(0, 1.2fr); background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 1.25rem; box-shadow: var(--shadow); }
@media (max-width: 900px) { .points-card { grid-template-columns: 1fr; } }
.points-card__total { display: grid; justify-items: center; align-content: center; text-align: center; border-radius: 16px; padding: 1rem; background: linear-gradient(150deg, #071a1d, #102f34 60%, #15393f); color: var(--on-petrol); }
.points-card__icon { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--brand-yellow); color: var(--brand-yellow-text); box-shadow: 0 0 0 6px rgb(243 226 15 / .15); }
.points-card__value { margin: .6rem 0 0; font-size: 2.2rem; font-weight: 700; line-height: 1; color: #fff; }
.points-card__label { margin: .2rem 0 0; font-size: .85rem; color: var(--on-petrol-muted); }
.points-card__courses { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; align-content: start; }
.points-card__row { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-bottom: .3rem; font-weight: 600; }
.points-card__row a { color: var(--text); text-decoration: none; }
.points-card__row a:hover { text-decoration: underline; }
.share__bar--level { background: linear-gradient(90deg, var(--sage-light), var(--brand-yellow)); }
.points-card__h { font-size: .95rem; margin: 0 0 .5rem; }
.points-log { list-style: none; margin: 0 0 .75rem; padding: 0; display: grid; gap: .4rem; font-size: .9rem; }
.points-log li { display: flex; gap: .5rem; align-items: baseline; }
.points-log__pts { min-width: 2.6rem; text-align: center; font-weight: 700; color: var(--success); background: var(--success-soft); border-radius: 999px; padding: 0 .4rem; font-size: .82rem; }
.points-log__pts.is-minus { color: var(--danger); background: var(--danger-soft); }
.points-rules summary { cursor: pointer; font-size: .85rem; font-weight: 600; color: var(--accent-text); }
.points-rules ul { margin: .5rem 0 0; padding-left: 1.1rem; }
.cert-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.cert-tile { display: flex; gap: .75rem; align-items: center; padding: .9rem 1rem; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); text-decoration: none; color: var(--text); box-shadow: var(--shadow); }
.cert-tile:hover { border-color: var(--brand-yellow); }
.cert-tile__icon { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-yellow); color: var(--brand-yellow-text); flex: none; }
.cert-tile span:last-child { display: grid; }
.cert-tile small { color: var(--text-muted); }

/* Handy: Kurskarten kompakter */
@media (max-width: 599px) {
  .course-grid { gap: .75rem; }
  .course-card__media { height: 64px; }
  .course-card__body { padding: .8rem .9rem .9rem; gap: .35rem; }
  .course-card__text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .course-card__list li:nth-child(n+3) { display: none; }
  .course-card__price strong { font-size: 1.1rem; }
}

/* Dashboard: Handlungsbedarf */
.todo { border-left: 4px solid var(--brand-yellow); }
.todo__head { display: flex; justify-content: space-between; align-items: center; gap: .75rem 1.5rem; flex-wrap: wrap; margin-bottom: .75rem; }
.todo__backup { display: flex; align-items: center; gap: .6rem; margin: 0; padding: .45rem .9rem; border-radius: 999px; background: var(--surface-2); font-size: .9rem; }
.todo__backup a { color: var(--text); text-decoration: none; }
.todo__backup a:hover { text-decoration: underline; }
.todo__ok { display: flex; gap: .6rem; align-items: center; margin: 0; font-weight: 600; }
.todo__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.todo__item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .75rem; align-items: center; padding: .7rem .9rem; border-radius: 14px; background: var(--surface-2); border: 1px solid transparent; }
.todo__item--bad { border-color: rgb(229 72 77 / .45); background: color-mix(in srgb, #e5484d 8%, var(--surface)); }
.todo__item--steady { border-color: rgb(226 178 3 / .45); }
.todo__text { display: grid; gap: .1rem; min-width: 0; }
.todo__text span { font-size: .86rem; color: var(--text-muted); }
.lamp--info { background: #3b82f6; box-shadow: 0 0 0 4px rgb(59 130 246 / .2); }
@media (max-width: 600px) { .todo__item { grid-template-columns: auto 1fr; } .todo__item .btn { grid-column: 2; justify-self: start; } }
/* Redakteur: Schnellzugriffe */
.quick-tiles { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.quick-tiles a { display: grid; gap: .3rem; padding: 1.1rem; border-radius: 18px; background: var(--surface); border: 1px solid var(--border); text-decoration: none; color: var(--text); box-shadow: var(--shadow); }
.quick-tiles a:hover { border-color: var(--accent); }
.quick-tiles .icon { width: 26px; height: 26px; color: var(--accent-text); }
.quick-tiles span { font-size: .86rem; color: var(--text-muted); }
/* Team & Rollen */
.team-role { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; }
.team-role select, .team-role input { width: auto; padding: .35rem .5rem; font-size: .88rem; }
.rights td:not(:first-child), .rights th:not(:first-child) { text-align: center; width: 110px; }
.rights .yes { color: var(--success); }
.rights .no { color: var(--danger); opacity: .7; }

.points-table td.num { width: 90px; }
.level-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(9, 1fr); gap: .35rem; }
.level-steps li { display: grid; justify-items: center; padding: .4rem .2rem; border-radius: 10px; background: var(--surface-2); font-size: .78rem; color: var(--text-muted); }
.level-steps li strong { font-size: 1rem; color: var(--text); }
.level-steps li.is-reached { background: var(--accent-soft); }
@media (max-width: 560px) { .level-steps { grid-template-columns: repeat(5, 1fr); } }
.my-events { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.my-event { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .9rem; align-items: center; padding: .75rem .9rem; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow); }
.my-event__date { width: 52px; display: grid; justify-items: center; border-radius: 12px; background: var(--accent-soft); color: var(--accent-text); padding: .3rem 0; font-size: .7rem; line-height: 1.15; text-transform: uppercase; }
.my-event__date strong { font-size: 1.3rem; }
.my-event__body { display: grid; gap: .15rem; justify-items: start; }
.my-event__actions { display: flex; gap: .4rem; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 640px) { .my-event { grid-template-columns: auto 1fr; } .my-event__actions { grid-column: 1 / -1; justify-content: flex-start; } }
.rsvp { display: flex; flex-wrap: wrap; gap: .5rem .9rem; align-items: center; margin-top: .6rem; padding: .55rem .75rem; border-radius: 12px; background: var(--surface-2); }
.rsvp--registered { background: var(--success-soft); }
.rsvp--waitlist { background: var(--warning-soft); }
.rsvp__state { display: inline-flex; gap: .35rem; align-items: center; font-size: .9rem; font-weight: 600; }
.occupancy .share { max-width: 160px; margin-top: .35rem; }

/* Urkunde: auf schmalen Bildschirmen freie Höhe statt festem Querformat (sonst läuft der Inhalt über den Rahmen) */
@media (max-width: 899px) {
  .certificate { aspect-ratio: auto; padding: .6rem; }
  .certificate__frame { height: auto; padding: 1.75rem 1rem 1.25rem; gap: .5rem; outline-offset: -7px; }
  .certificate__foot { grid-template-columns: 1fr 1fr; gap: 1rem; }
  .certificate__seal { grid-column: 1 / -1; grid-row: 1; justify-self: center; }
  .certificate__code { overflow-wrap: anywhere; }
}
.certificate__frame > * { max-width: 100%; }
.certificate__name, .certificate__course { overflow-wrap: anywhere; }

/* Terminmodul */
.form-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); }
.event-form { border-left: 4px solid var(--brand-yellow); }
.event-form__checks { display: grid; gap: .5rem; margin: .5rem 0 1rem; }
.event-filter { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin: 0 0 1rem; }
.event-filter select { width: auto; }
tr.is-inactive td { opacity: .6; }

/* Urkunden im Profil */
.cert-shelf { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.cert-shelf__item { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; padding: .85rem 1rem; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.cert-shelf__text { flex: 1 1 220px; display: grid; gap: .15rem; min-width: 0; }
.cert-shelf__text strong { overflow-wrap: anywhere; }
.cert-shelf__actions { display: flex; flex-wrap: wrap; gap: .5rem; }
@media (max-width: 560px) { .cert-shelf__actions { width: 100%; } .cert-shelf__actions .btn { flex: 1 1 auto; justify-content: center; } }

/* Revisionsprotokoll */
.rev-integrity { display: grid; grid-template-columns: 1fr auto; gap: .75rem 1rem; align-items: center; border-left: 4px solid var(--border); }
.rev-integrity--good { border-left-color: var(--success); }
.rev-integrity--steady { border-left-color: var(--warning); }
.rev-integrity--bad { border-left-color: var(--danger); background: var(--danger-soft); }
.rev-integrity__main { display: flex; gap: .75rem; align-items: flex-start; }
.rev-integrity__main .lamp { margin-top: .45rem; flex: none; }
.rev-how { grid-column: 1 / -1; }
.rev-how summary, .rev-details summary { cursor: pointer; color: var(--accent-text); font-size: .875rem; }
.rev-how ul { margin: .5rem 0 0; padding-left: 1.2rem; display: grid; gap: .35rem; }
.rev-filter__grid { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.rev-filter__q { grid-column: span 2; }
.rev-filter .row { align-items: center; gap: .75rem; flex-wrap: wrap; }
.rev-summary { display: inline; overflow-wrap: anywhere; }
.rev-table td { vertical-align: top; }
.rev-details { margin-top: .35rem; }
.rev-data { display: grid; grid-template-columns: minmax(90px, max-content) 1fr; gap: .2rem .75rem; margin: .4rem 0 0; font-size: .8125rem; }
.rev-data dt { color: var(--text-muted); font-weight: 600; }
.rev-data dd { margin: 0; overflow-wrap: anywhere; min-width: 0; }
.rev-data .rev-data { margin: 0; }
.rev-hash { font-size: .75rem; word-break: break-all; }
@media (max-width: 640px) {
  .rev-integrity { grid-template-columns: 1fr; }
  .rev-filter__q { grid-column: auto; }
  .rev-data { grid-template-columns: 1fr; }
}
.rev-export { display: grid; gap: .4rem; justify-items: end; }
.rev-export .row { gap: .5rem; }
@media (max-width: 640px) { .rev-export { justify-items: start; } }

/* Einladungen */
.invite__open-title { font-size: 1rem; margin: 1.5rem 0 .5rem; }
.invite__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.invite__list li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem 1rem; padding: .7rem .9rem; border: 1px solid var(--border); border-radius: 12px; }
.invite__list li > div:first-child { min-width: 0; overflow-wrap: anywhere; }
input[readonly] { opacity: .85; cursor: not-allowed; }

/* Ampel E-Mail-Test */
.mail-health { display: flex; gap: .75rem; align-items: flex-start; margin-top: 1rem; padding: .8rem 1rem; border-radius: 12px; border: 1px solid var(--border); border-left-width: 4px; }
.mail-health .lamp { margin-top: .35rem; flex: none; }
.mail-health--good { border-left-color: var(--success); }
.mail-health--steady { border-left-color: var(--warning); }
.mail-health--bad { border-left-color: var(--danger); background: var(--danger-soft); }
.mail-health p { overflow-wrap: anywhere; }

/* Automatisches Zwischenspeichern */
.autosave-note { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; margin: 0 0 1rem; padding: .6rem .9rem; border-radius: 12px; background: var(--accent-soft); color: var(--text); font-size: .9rem; }
.autosave-status { margin: .5rem 0 0; flex-basis: 100%; }
.autosave-status::before { content: "✓ "; color: var(--success); }

/* Newsletter: Empfänger, Auto-Speichern, Vorschau */
.nl-form-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .25rem 1rem; }
.nl-autosave { margin: 0; }
.nl-autosave.is-error { color: var(--danger); }
.nl-fieldset { border: 0; padding: 0; margin: 0; }
.nl-audience { margin-top: .5rem; }
.nl-audience .check { margin-bottom: .35rem; }
.nl-audience__groups { margin: .25rem 0 .5rem 1.9rem; display: grid; gap: .2rem; }
.nl-recipients { font-size: 1rem; margin: 0 0 1rem; }
.nl-recipients strong { font-size: 1.6rem; margin-right: .25rem; }
.nl-preview__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .75rem; margin-bottom: .5rem; }
.nl-preview__modes { display: flex; flex-wrap: wrap; gap: .4rem; }
.nl-inbox { display: flex; flex-wrap: wrap; gap: .25rem .75rem; align-items: baseline; padding: .6rem .9rem; margin: .5rem 0 .75rem; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2, var(--surface)); font-size: .9rem; }
.nl-inbox__from { font-weight: 700; }
.nl-inbox__subject { font-weight: 600; }
.nl-inbox__pre { color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.nl-preview__frame { background: #eef1f1; border-radius: 12px; padding: 1rem; display: flex; justify-content: center; min-height: 200px; }
.nl-preview__frame iframe { width: 100%; max-width: 760px; height: 900px; border: 0; background: #fff; border-radius: 8px; box-shadow: 0 6px 24px rgb(0 0 0 / .12); transition: max-width .2s ease; }
.nl-preview__frame.is-mobile iframe { max-width: 390px; height: 780px; border-radius: 24px; border: 8px solid #1c1c1c; }
.nl-preview__empty { align-self: center; }

/* Bild-Werkzeuge im Editor */
.rt-wrap { position: relative; }
.rt-editor img { cursor: pointer; }
.rt-editor img.is-selected { outline: 3px solid var(--brand-yellow); outline-offset: 2px; }
.rt-imgbar { position: absolute; z-index: 5; display: flex; flex-wrap: wrap; gap: .25rem; align-items: center; padding: .35rem; border-radius: 12px; background: var(--surface); border: 1px solid var(--border-strong); box-shadow: var(--shadow); max-width: 100%; }
.rt-imgbar__btn { font: inherit; font-size: .8125rem; padding: .3rem .6rem; border-radius: 8px; border: 1px solid transparent; background: transparent; color: var(--text); cursor: pointer; min-height: 32px; }
.rt-imgbar__btn:hover, .rt-imgbar__btn:focus-visible { border-color: var(--border-strong); }
.rt-imgbar__btn[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-text); font-weight: 700; }
.rt-imgbar__sep { width: 1px; align-self: stretch; background: var(--border); margin: 0 .15rem; }

/* Titelbild mit Live-Vorschau des Zuschnitts */
.cover-pick__frame { position: relative; width: 100%; max-width: 560px; overflow: hidden; border-radius: 14px; border: 1px solid var(--border); background: var(--surface-2, var(--surface)); margin-bottom: .6rem; display: grid; place-items: center; }
.cover-pick--1600x700 .cover-pick__frame { aspect-ratio: 16 / 7; }
.cover-pick--1280x720 .cover-pick__frame { aspect-ratio: 16 / 9; }
.cover-pick--800x1200 .cover-pick__frame { aspect-ratio: 2 / 3; max-width: 240px; }
.cover-pick__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 33%; }
.cover-pick__img.is-focus-top { object-position: center top; }
.cover-pick__img.is-focus-center { object-position: center center; }
.cover-pick__img.is-focus-bottom { object-position: center bottom; }
.cover-pick__empty { color: var(--text-muted); display: inline-flex; gap: .4rem; align-items: center; font-size: .9rem; }
.cover-pick__focus { display: flex; flex-wrap: wrap; gap: .25rem 1rem; border: 0; padding: 0; margin: .5rem 0 0; }
.cover-pick__focus legend { width: 100%; padding: 0; margin-bottom: .25rem; font-weight: 600; }
.cover-pick__warn { color: var(--warning); margin: .4rem 0 0; }
.rt-imgbar[hidden], .cover-pick__focus[hidden] { display: none; }

/* Anklickbare Kennzahl-Kacheln: die ganze Kachel ist ein Link (Tastatur: Fokus auf dem Titel) */
.kpi--link { transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.kpi--link:hover { transform: translateY(-2px); border-color: var(--border-strong); box-shadow: 0 10px 28px rgb(0 0 0 / .22); }
.kpi__more { color: inherit; text-decoration: none; }
.kpi__more::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.kpi__more:focus-visible { outline: none; }
.kpi--link:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.kpi--link a:not(.kpi__more) { position: relative; z-index: 2; }
.kpi__go { font-size: .78rem; color: var(--accent-text); display: inline-flex; align-items: center; gap: .15rem; opacity: .75; }
.kpi__go .icon { width: 14px; height: 14px; }
.kpi--link:hover .kpi__go { opacity: 1; }

/* ===== Testimonials ===== */
/* Karte im Handy-Look – bewusst feste Farben (wie ein Screenshot), in hellem und dunklem Modus identisch */
.tcard { margin: 0; display: flex; justify-content: center; }
.tcard__phone { position: relative; width: 100%; max-width: 330px; padding: 12px; border-radius: 42px; background: linear-gradient(145deg, #1d2527, #0b1112); box-shadow: 0 18px 40px rgb(0 0 0 / .35), inset 0 0 0 2px #2c3638; }
.tcard__notch { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); width: 34%; height: 22px; background: #0b1112; border-radius: 0 0 14px 14px; z-index: 1; }
.tcard__screen { position: relative; border-radius: 31px; background: linear-gradient(180deg, #f8f3d9 0, #fffdf6 92px, #ffffff 100%); color: #172224; padding: 38px 20px 22px; min-height: 420px; display: flex; flex-direction: column; gap: .7rem; overflow: hidden; }
.tcard__bar { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.tcard__logo { height: 20px; width: auto; }
.tcard__verified { display: inline-flex; align-items: center; gap: .25rem; font-size: .68rem; font-weight: 700; color: #1f6f58; background: #e3f4ec; padding: .2rem .5rem; border-radius: 999px; }
.tcard__verified .icon { width: 12px; height: 12px; }
.tcard__stars { margin: .4rem 0 0; font-size: 1.55rem; letter-spacing: .08em; line-height: 1; }
.tcard__stars span { color: #d8dde0; }
.tcard__stars span.is-on { color: #f5b301; text-shadow: 0 1px 0 rgb(0 0 0 / .08); }
.tcard__headline { margin: 0; font-size: 1.12rem; font-weight: 700; line-height: 1.3; color: #104a4f; }
.tcard__quote { margin: 0; position: relative; padding-left: 1.1rem; border-left: 3px solid #f3e20f; flex: 1; }
.tcard__quote p { margin: 0; font-size: .95rem; line-height: 1.55; color: #26393c; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 12; -webkit-box-orient: vertical; overflow: hidden; }
.tcard__person { display: flex; align-items: center; gap: .7rem; padding-top: .8rem; border-top: 1px solid #ecefef; }
.tcard__avatar { width: 48px; height: 48px; border-radius: 50%; flex: none; display: grid; place-items: center; overflow: hidden; font-weight: 700; color: #fff; background: #2f7d6d; box-shadow: 0 0 0 3px #fff, 0 0 0 5px #f3e20f; }
.tcard__avatar img { width: 100%; height: 100%; object-fit: cover; }
.tcard__who { display: grid; line-height: 1.3; min-width: 0; }
.tcard__who strong { color: #172224; }
.tcard__who small { color: #5c6d70; font-size: .76rem; overflow-wrap: anywhere; }
.tcard__date { opacity: .8; }
[data-tcard-live] [hidden], .tcard [hidden] { display: none !important; }

.tgrid { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); align-items: start; }
.tgrid__item { display: grid; gap: .6rem; }
.tgrid__meta { display: grid; gap: .4rem; padding: 0 .5rem; }
.tgrid--public { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }

.testi-layout { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr) 360px; align-items: start; }
.testi-preview { position: sticky; top: 90px; }
@media (max-width: 900px) { .testi-layout { grid-template-columns: 1fr; } .testi-preview { position: static; } }

/* Sterne-Auswahl (Radio-Buttons, per Tastatur bedienbar) */
.stars-input { border: 0; padding: 0; margin: 0 0 1rem; }
.stars-input legend { font-weight: 700; margin-bottom: .3rem; }
.stars-input__row { display: inline-flex; flex-direction: row-reverse; gap: .15rem; }
.stars-input__row input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.stars-input__row label { font-size: 2.2rem; line-height: 1; cursor: pointer; color: var(--border-strong); transition: transform .1s, color .1s; padding: 0 .05rem; }
.stars-input__row label:hover, .stars-input__row label:hover ~ label, .stars-input__row input:checked ~ label { color: #f5b301; }
.stars-input__row label:hover { transform: scale(1.12); }
.stars-input__row input:focus-visible + label { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
.stars-input.has-error .stars-input__row label { color: var(--danger); }

.consent-box { margin: 1rem 0; padding: .9rem 1rem; border-radius: 12px; background: var(--accent-soft); }

/* Hinweis im Kunden-Dashboard */
.testi-prompt { display: grid; grid-template-columns: auto 1fr auto; gap: 1rem 1.5rem; align-items: center; margin: 0 0 2rem; padding: 1.3rem 1.6rem; border-radius: 22px; background: linear-gradient(120deg, #104a4f, #1d6b5f); color: #fff; box-shadow: var(--shadow); }
.testi-prompt__stars { font-size: 1.9rem; color: #f5c518; letter-spacing: .06em; text-shadow: 0 2px 8px rgb(0 0 0 / .25); }
.testi-prompt h2 { margin: 0 0 .3rem; font-size: 1.3rem; color: #fff; }
.testi-prompt p { margin: 0; color: rgb(255 255 255 / .88); }
@media (max-width: 700px) { .testi-prompt { grid-template-columns: 1fr; text-align: left; } }

dl.facts { display: grid; grid-template-columns: minmax(110px, max-content) 1fr; gap: .4rem 1rem; margin: 0; }
dl.facts dt { font-weight: 600; color: var(--text-muted); }
dl.facts dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 560px) { dl.facts { grid-template-columns: 1fr; } }
.tcard .tcard__quote { background: none; box-shadow: none; border-radius: 0; margin: 0; padding: 0 0 0 1.1rem; border-left: 3px solid #f3e20f; color: #26393c; font-style: normal; }
.tcard .tcard__quote::before, .tcard .tcard__quote::after { content: none; }

/* Kundenansicht */
.admin-modules__preview { margin: 0 0 0 auto; display: flex; }
button.admin-modules__item { font: inherit; font-weight: 650; font-size: .93rem; border: 1px dashed var(--border-strong); background: transparent; cursor: pointer; }
.admin-modules__item--preview:hover { border-style: solid; }
.preview-bar { position: sticky; top: 0; z-index: 50; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .5rem 1rem; padding: .6rem 1rem; background: repeating-linear-gradient(135deg, #104a4f 0 14px, #125459 14px 28px); color: #fff; font-size: .92rem; box-shadow: 0 4px 14px rgb(0 0 0 / .25); }
.preview-bar .icon { vertical-align: -2px; }
.preview-bar form { margin: 0; }
@media (max-width: 640px) { .admin-modules__preview { margin-left: 0; } }

/* Kachel Kundenbewertung */
.kpi__stars { margin: 0; font-size: 1.25rem; letter-spacing: .05em; line-height: 1; }
.kpi__stars span { color: var(--border-strong); }
.kpi__stars span.is-on { color: #f5b301; }
.kpi__stars span.is-half { background: linear-gradient(90deg, #f5b301 50%, var(--border-strong) 50%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.kpi__dist { list-style: none; margin: .2rem 0 0; padding: 0; display: grid; gap: .2rem; font-size: .75rem; color: var(--text-muted); }
.kpi__dist li { display: grid; grid-template-columns: 2.2rem 1fr 1.6rem; align-items: center; gap: .4rem; }
.kpi__dist .share { margin: 0; }
.kpi__dist-n { text-align: right; font-variant-numeric: tabular-nums; }

/* Kundenbewertung im Querformat: doppelt breit, Score links, Verteilung rechts – gleiche Höhe wie die anderen Kacheln */
.kpi--rating { grid-column: span 2; }
.kpi__rating { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: .25rem 1.4rem; align-items: center; }
.kpi__rating-main { display: grid; gap: .3rem; align-content: start; }
.kpi__rating-main .kpi__sub { margin: 0; }
.kpi--rating .kpi__dist { margin: 0; gap: .12rem; font-size: .72rem; }
.kpi--rating .kpi__dist li { grid-template-columns: 2rem 1fr 1.2rem; }
.kpi--rating .kpi__dist .share { height: 5px; }
@media (max-width: 640px) {
  .kpi--rating { grid-column: auto; }
  .kpi__rating { grid-template-columns: 1fr; }
}

/* Partnerprogramm */
.partner-usp { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.partner-usp li { display: grid; gap: .25rem; padding: 1rem 1.1rem; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); }
.partner-usp .icon { width: 26px; height: 26px; color: var(--accent-text); }
.partner-usp span { color: var(--text-muted); font-size: .9rem; }
.partner-kpis { margin-bottom: 1.25rem; }
.partner-link { display: grid; gap: .3rem; }
.copy-field { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.copy-field code { flex: 1 1 260px; padding: .55rem .75rem; border-radius: 10px; background: var(--surface-2); overflow-wrap: anywhere; font-size: .9rem; }
.code-input { display: flex; align-items: stretch; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); overflow: hidden; background: var(--surface); }
.code-input__prefix { display: flex; align-items: center; padding: 0 .6rem; background: var(--surface-2); color: var(--text-muted); font-size: .85rem; white-space: nowrap; }
.code-input input { border: 0 !important; border-radius: 0 !important; min-width: 0; }
@media (max-width: 560px) { .code-input { flex-direction: column; } .code-input__prefix { padding: .4rem .6rem; } }
.input-rate { max-width: 150px; }
.input-sm { max-width: 170px; min-height: 36px !important; padding: .35rem .6rem !important; }
.plain-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.lifetime-check { padding: .7rem .9rem; border-radius: 12px; background: var(--accent-soft); }

/* Partnerprogramm: Werbung im Dashboard und Einstiegsseite */
.earn-teaser { display: grid; grid-template-columns: auto 1fr auto; gap: 1rem 1.5rem; align-items: center; margin: 0 0 2rem; padding: 1.3rem 1.6rem; border-radius: 22px; background: linear-gradient(120deg, #f3e20f 0%, #f5b301 100%); color: #1b2426; box-shadow: 0 12px 30px rgb(245 179 1 / .25); }
.earn-teaser__coin { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; font-size: 2rem; font-weight: 800; color: #7a5800; background: radial-gradient(circle at 35% 30%, #fff6c7, #f5c518 60%, #d99b00); box-shadow: inset 0 -3px 0 rgb(0 0 0 / .15), 0 4px 12px rgb(0 0 0 / .18); }
.earn-teaser__kicker { display: inline-flex; gap: .35rem; align-items: center; font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #104a4f; }
.earn-teaser__kicker .icon { width: 16px; height: 16px; }
.earn-teaser h2 { margin: .15rem 0 .3rem; font-size: 1.3rem; color: #10262a; }
.earn-teaser p { margin: 0; color: #2c3a3c; }
.earn-teaser .btn--gold { background: #104a4f; color: #fff; border-color: #104a4f; }
.earn-teaser .btn--gold:hover { background: #0b3a3e; }
@media (max-width: 700px) { .earn-teaser { grid-template-columns: 1fr; } .earn-teaser__coin { width: 48px; height: 48px; font-size: 1.5rem; } }
/* Start-Hinweis im Dashboard („Wir sind gerade gestartet“) – feste Farben, in hell und dunkel gut lesbar */
.launch-hint { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 1rem 1.4rem; align-items: start; margin: 0 0 2rem; padding: 1.4rem 3.2rem 1.4rem 1.6rem; border-radius: 22px; background: linear-gradient(120deg, #e6f4f1 0%, #fdf5d6 100%); color: #1b2426; border: 1px solid #cfe6e0; box-shadow: 0 10px 26px rgb(16 74 79 / .10); }
.launch-hint__icon { width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; font-size: 1.9rem; background: #fff; box-shadow: 0 4px 12px rgb(16 74 79 / .15); }
.launch-hint__kicker { display: inline-block; font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #0f5a5f; }
.launch-hint h2 { margin: .15rem 0 .35rem; font-size: 1.3rem; color: #10262a; }
.launch-hint p { margin: 0; color: #2f3a3c; }
.launch-hint__actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .9rem; }
.launch-hint__actions .btn:not(.btn--gold) { background: #fff; color: #10262a; border-color: #cfe6e0; }
.launch-hint__partner { display: grid; grid-template-columns: auto 1fr auto; gap: .6rem 1rem; align-items: center; margin-top: 1rem; padding: .8rem 1rem; border-radius: 16px; background: linear-gradient(120deg, #fff7c2 0%, #ffe680 100%); border: 1px solid #f0d45a; }
/* Solange der Start-Hinweis (mit Partner-Vorteil) sichtbar ist, den großen Partner-Teaser nicht doppelt zeigen */
.launch-hint:not([hidden]) ~ .earn-teaser[data-launch-dup] { display: none; }
.launch-hint__partner .btn { background: #10262a; color: #fff; border-color: #10262a; }
.launch-hint__partner .btn:hover, .launch-hint__partner .btn:focus-visible { background: #0f5a5f; border-color: #0f5a5f; color: #fff; }
.launch-hint__partner p { margin: 0; color: #2b2a1f; font-size: .95rem; }
.launch-hint__coin { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 1.2rem; color: #7a5800; background: radial-gradient(circle at 35% 30%, #fff6c7, #f5c518 60%, #d99b00); box-shadow: inset 0 -2px 0 rgb(0 0 0 / .15); }
@media (max-width: 700px) { .launch-hint__partner { grid-template-columns: auto 1fr; } .launch-hint__partner .btn { grid-column: 1 / -1; justify-self: start; } }
.launch-hint__note { margin-top: .6rem !important; color: #4a5658 !important; }
.launch-hint__note .icon { width: 14px; height: 14px; vertical-align: -2px; }
.launch-hint__close { position: absolute; top: .7rem; right: .7rem; width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: #2f3a3c; cursor: pointer; }
.launch-hint[hidden], .launch-hint__close[hidden] { display: none; }
.launch-hint__close:hover, .launch-hint__close:focus-visible { background: rgb(255 255 255 / .8); }
.launch-hint__close .icon { width: 18px; height: 18px; }
@media (max-width: 700px) { .launch-hint { grid-template-columns: 1fr; padding: 1.2rem 1.1rem; } .launch-hint__icon { width: 46px; height: 46px; font-size: 1.5rem; } }

.earn-mini { display: grid; grid-template-columns: 1fr auto; gap: .2rem 1rem; align-items: center; margin: 0 0 2rem; padding: 1rem 1.3rem; border-radius: 18px; background: var(--surface); border: 1px solid var(--border); border-left: 5px solid #f5b301; box-shadow: var(--shadow); }
.earn-mini__title { grid-column: 1 / -1; margin: 0; font-size: .9rem; color: var(--text-muted); display: flex; gap: .4rem; align-items: center; }
.earn-mini__value { margin: 0; font-size: 1.7rem; font-weight: 800; }
.earn-mini__value small { font-size: .85rem; color: var(--text-muted); font-weight: 600; }
.earn-mini__meta { margin: 0; color: var(--text-muted); font-size: .85rem; grid-column: 1; }
.earn-mini__actions { grid-column: 2; grid-row: 2 / span 2; display: flex; gap: .5rem; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 600px) { .earn-mini { grid-template-columns: 1fr; } .earn-mini__actions { grid-column: 1; grid-row: auto; justify-content: flex-start; } }

.partner-hero { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 1.5rem; align-items: center; margin: 0 0 1.5rem; padding: 1.8rem; border-radius: 26px; background: linear-gradient(135deg, #104a4f, #1d6b5f); color: #fff; box-shadow: var(--shadow); }
.partner-hero h2 { margin: .5rem 0; font-size: clamp(1.4rem, 3vw, 2rem); color: #fff; line-height: 1.2; }
.partner-hero p { color: rgb(255 255 255 / .9); }
.partner-hero__badge { display: inline-flex; gap: .4rem; align-items: center; padding: .3rem .7rem; border-radius: 999px; background: rgb(243 226 15 / .18); color: #f3e20f; font-weight: 700; font-size: .82rem; }
.partner-hero__terms { color: #fff; border-color: rgb(255 255 255 / .4); margin-left: .4rem; }
.partner-calc { background: #fffdf2; color: #172224; border-radius: 20px; padding: 1.2rem 1.3rem; box-shadow: 0 10px 28px rgb(0 0 0 / .25); }
.partner-calc p { color: #3b4a4c; }
.partner-calc__label { margin: 0; font-weight: 800; text-transform: uppercase; font-size: .75rem; letter-spacing: .08em; color: #1f6f58 !important; }
.partner-calc__q { display: flex; justify-content: space-between; font-weight: 700; margin-top: .6rem; color: #172224; }
.partner-calc__q output { color: #104a4f; font-size: 1.1rem; }
.partner-calc input[type="range"] { width: 100%; accent-color: #f5b301; margin: .4rem 0 .6rem; min-height: auto; padding: 0; border: 0; background: transparent; }
.partner-calc__result { margin: 0; font-size: 2.2rem; font-weight: 800; color: #104a4f !important; line-height: 1.1; }
.partner-calc__result small { font-size: .9rem; color: #5c6d70; font-weight: 600; }
@media (max-width: 800px) { .partner-hero { grid-template-columns: 1fr; padding: 1.3rem; } }
.partner-steps { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.partner-steps li { display: grid; gap: .2rem; padding: 1rem 1.1rem; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); }
.partner-steps span { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; background: #f3e20f; color: #172224; }
.partner-steps small { color: var(--text-muted); }
.partner-end { margin-top: 1rem; }
.partner-end summary { cursor: pointer; color: var(--text-muted); }

/* Admin-Modulleiste bleibt beim Scrollen direkt unter dem Seitenkopf stehen */
.admin-modules { position: sticky; top: var(--header-h, 72px); z-index: 40; transition: box-shadow .2s ease; }
.admin-modules.is-stuck { box-shadow: 0 10px 24px rgb(0 0 0 / .28); background: color-mix(in srgb, var(--surface) 96%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
/* Auf schmalen Bildschirmen einzeilig und seitlich wischbar, damit die Leiste wenig Platz braucht */
@media (max-width: 900px) {
  .admin-modules { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .admin-modules::-webkit-scrollbar { display: none; }
  .admin-modules__item, .admin-modules__preview { flex: none; }
}

/* Bestellübersicht, Widerruf, Kündigung */
.checkout { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
@media (max-width: 900px) { .checkout { grid-template-columns: 1fr; } }
.checkout__list { margin: 0; padding-left: 1.1rem; }
.checkout__price { font-size: 1.25rem; }
.checkout__check { align-items: flex-start; margin-bottom: .6rem; }
.checkout__consent { margin: .9rem 0; padding: .8rem .9rem; border: 1px solid var(--border); border-radius: 12px; }
.checkout__consent-title { margin: 0 0 .4rem; }
.checkout__consent .check span { font-size: .9rem; }
.checkout__total { display: flex; justify-content: space-between; align-items: baseline; margin: 1rem 0 .6rem; padding-top: .8rem; border-top: 1px solid var(--border); font-size: 1.05rem; }
.checkout__total strong { font-size: 1.35rem; }
.checkout__buy { font-size: 1.05rem; }
.withdraw-hint { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .6rem 1rem; margin: 0 0 1.5rem; padding: .8rem 1.1rem; border-radius: 14px; background: var(--accent-soft); }
.footer-legal-btn { font-weight: 700; }

/* Danke-Seite */
.thanks { max-width: 760px; margin: 1rem auto 2rem; text-align: center; padding: 2rem 1.4rem; border-radius: 28px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); }
.thanks__badge { width: 76px; height: 76px; margin: 0 auto .8rem; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #f3e20f, #f5b301); color: #10262a; box-shadow: 0 10px 26px rgb(245 179 1 / .35); animation: thanks-pop .5s ease-out; }
.thanks__badge .icon { width: 40px; height: 40px; stroke-width: 3; }
@keyframes thanks-pop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .thanks__badge { animation: none; } }
.thanks__kicker { margin: 0; font-size: .8rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-text); }
.thanks h1 { margin: .3rem 0 .6rem; font-size: clamp(1.5rem, 3.5vw, 2.1rem); line-height: 1.2; }
.thanks__lead { color: var(--text-muted); }
.thanks__status { margin: 1.2rem auto; padding: 1rem 1.2rem; max-width: 560px; border-radius: 16px; background: var(--accent-soft); display: grid; gap: .7rem; justify-items: center; }
.thanks__status p { margin: 0; }
.thanks__next-title { margin: 1.6rem 0 .8rem; font-size: 1.15rem; }
.thanks__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); text-align: left; }
.thanks__steps li { display: grid; gap: .25rem; padding: .9rem 1rem; border-radius: 14px; border: 1px solid var(--border); }
.thanks__steps span { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; background: #f3e20f; color: #172224; }
.thanks__steps small { color: var(--text-muted); }
.thanks__legal { margin: 1.4rem 0 0; }

/* Info DS24 */
.info-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.info-status { display: inline-flex; align-items: center; gap: .6rem; }
.info-checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.info-checklist li { position: relative; padding-left: 1.6rem; }
.info-checklist li::before { content: ""; position: absolute; left: .2rem; top: .45rem; width: .7rem; height: .7rem; border: 2px solid var(--accent); border-radius: 3px; }
dl.facts dd .copy-field { margin: 0; }

/* FernUSG-Schutz: Live-Warnung beim Tippen */
.fernusg-warn { margin: .4rem 0 0; padding: .55rem .75rem; border: 1px solid var(--danger); border-left-width: 4px; border-radius: var(--radius-sm); background: var(--danger-soft); color: var(--text); font-size: .9rem; font-weight: 600; }
.fernusg-warn--soft { border-color: var(--warning); background: var(--warning-soft); font-weight: 500; }
.fernusg-warn[hidden] { display: none; }
.has-fernusg, input.has-fernusg, textarea.has-fernusg { border-color: var(--danger) !important; box-shadow: 0 0 0 3px var(--danger-soft) !important; }

/* Live-Termine: Themenfarbe im Kalender (gleiche Farben wie die Themen-Badges) */
.cal-event--ki { border-left: 3px solid #7c5cff; }
.cal-event--marketing { border-left: 3px solid var(--accent); }
.cal-event--both { border-left: 3px solid color-mix(in srgb, #7c5cff 50%, var(--accent)); }
.event[hidden] { display: none; }
.event .offer__topic { display: inline-block; margin-bottom: .25rem; }
.topic-choice { border: 0; padding: 0; margin: 0 0 1rem; }
.topic-choice legend { font-weight: 700; margin-bottom: .4rem; }
.topic-choice__item { align-items: center; }
.topic-choice__item input:checked + .offer__topic { outline: 2px solid var(--text); outline-offset: 2px; }

/* Live-Termine: Übersicht „Erlaubt / Nicht erlaubt“ im Terminformular */
.event-rules { margin: 1rem 0; padding: .9rem 1rem; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--bg); }
.event-rules summary { cursor: pointer; display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.event-rules__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: .9rem; margin: .9rem 0; }
.event-rules__col { padding: .75rem .9rem; border-radius: var(--radius-sm); border-left: 4px solid; }
.event-rules__col h3 { display: flex; gap: .4rem; align-items: center; margin: 0 0 .4rem; }
.event-rules__col ul { margin: 0; padding-left: 1.1rem; display: grid; gap: .3rem; font-size: .92rem; }
.event-rules__col--ok { border-color: var(--success); background: var(--success-soft); }
.event-rules__col--no { border-color: var(--danger); background: var(--danger-soft); }

/* Live-Termine: Liste unter dem Kalender */
.event-board { margin-top: 1.25rem; }
.event-board__head { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: space-between; margin-bottom: .75rem; }
.event-board__head .topic-filter { margin: 0; }
.event-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.event-row { display: grid; grid-template-columns: auto 1fr auto; gap: 1rem; align-items: start; padding: 1rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); }
.event-row[hidden] { display: none; }
.event-row.is-past { opacity: .6; }
.event-row__date { display: grid; justify-items: center; width: 3.6rem; padding: .4rem 0; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--border); line-height: 1.1; }
.event-row__date span { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); }
.event-row__date strong { font-size: 1.5rem; }
.event-row__tags { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin: 0 0 .3rem; }
.event-row__type { font-size: .8rem; color: var(--text-muted); }
.event-row__title { margin: 0 0 .3rem; font-size: 1.1rem; }
.event-row__meta { display: flex; flex-wrap: wrap; gap: .3rem 1rem; margin: 0; font-size: .88rem; color: var(--text-muted); }
.event-row__meta span { display: inline-flex; gap: .3rem; align-items: center; }
.event-row__more { margin-top: .4rem; font-size: .9rem; }
.event-row__more summary { cursor: pointer; color: var(--accent-text); font-weight: 600; }
.event-row__side { display: grid; gap: .5rem; justify-items: end; min-width: 13rem; }
.event-row__actions { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: flex-end; }
.event-row__actions form { margin: 0; }
.event-status { display: inline-flex; gap: .35rem; align-items: center; padding: .3rem .65rem; border-radius: 999px; font-size: .82rem; font-weight: 600; background: var(--surface); border: 1px solid var(--border); }
.event-status--success { background: var(--success-soft); color: var(--success); border-color: var(--success); }
.event-status--warning { background: var(--warning-soft); color: var(--warning); border-color: var(--warning); }
.event-status--info { background: var(--accent-soft); color: var(--accent-text); border-color: transparent; }
.event-status--muted { color: var(--text-muted); }
@media (max-width: 720px) {
  .event-row { grid-template-columns: auto 1fr; }
  .event-row__side { grid-column: 1 / -1; justify-items: start; min-width: 0; }
  .event-row__actions { justify-content: flex-start; }
}

/* Live-Termin: Detailseite */
.event-detail__head { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; }
.event-detail__date { width: 4.2rem; }
.event-detail__date strong { font-size: 1.8rem; }
.event-detail__title { margin: .1rem 0 .4rem; font-size: clamp(1.4rem, 3vw, 2rem); }
.event-detail__book { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin: 1.1rem 0; padding: .9rem 1rem; border-radius: var(--radius-sm); background: var(--bg); border: 1px solid var(--border); }
.event-detail__book .event-row__actions { justify-content: flex-start; }
.event-detail__text { margin-top: .5rem; }
.event-more { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.event-more a { display: inline-flex; gap: .4rem; align-items: center; }
.event-row__title a { color: inherit; text-decoration: none; }
.event-row__title a:hover, .event-row__title a:focus-visible { text-decoration: underline; }

/* ---------- KI-Assistent (Langdock, nur Inhaber) ---------- */
.ai-dialog { width: min(560px, calc(100vw - 32px)); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); padding: 1.25rem; box-shadow: var(--shadow-lg); }
.ai-dialog::backdrop { background: rgb(11 35 39 / .55); }
.ai-dialog h2 { margin: 0 0 .25rem; font-size: 1.25rem; }
.ai-dialog__form { display: grid; gap: .5rem; }
.ai-dialog__form label { font-weight: 600; margin-top: .25rem; }
.ai-dialog__form select, .ai-dialog__form textarea { width: 100%; }
.ai-dialog__error { color: var(--danger); background: var(--danger-soft); border-radius: var(--radius-sm); padding: .5rem .75rem; margin: 0; }
.ai-dialog__actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .5rem; }
.ai-dialog[aria-busy="true"] .ai-dialog__actions .btn--primary { opacity: .7; cursor: progress; }
.ai-progress { height: 12px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); overflow: hidden; margin: .5rem 0; }
.ai-progress__bar { display: block; height: 100%; width: 0; background: var(--accent); transition: width .4s ease; }
.ai-lessons { display: grid; gap: .35rem; padding-left: 1.5rem; }
.ai-lessons__state { display: inline-block; width: 1.4em; }
.ai-modules { display: grid; gap: .75rem; padding-left: 1.5rem; }
.ai-modules ol { margin-top: .25rem; }
.ai-draft { border-color: var(--accent); }
@media (prefers-reduced-motion: reduce) { .ai-progress__bar { transition: none; } }

/* ---------- E-Books ---------- */
.topic-filter--links { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin: 0 0 1.5rem; }
.topic-filter--links .topic-filter__btn { text-decoration: none; }
.topic-filter__btn[aria-current="page"] { background: var(--pill-active-bg); color: var(--pill-active-text); border-color: var(--pill-active-bg); }
.ebook-mine-link { display: flex; justify-content: center; margin: 0 0 1rem; }
.ebook-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 250px)); justify-content: center; }
.ebook-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); transition: transform .2s, box-shadow .2s; }
.ebook-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.ebook-card__cover { display: block; aspect-ratio: 2 / 3; background: var(--surface-2); }
.ebook-card__cover img, .ebook-detail__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ebook-card__placeholder { display: grid; place-items: center; width: 100%; height: 100%; aspect-ratio: 2 / 3; color: var(--cover-c, var(--on-petrol)); background: linear-gradient(150deg, var(--cover-a, var(--petrol)), var(--cover-b, var(--petrol-deep))); }
.ebook-card__placeholder .icon { width: 3rem; height: 3rem; }
.ebook-card__body { padding: 1rem 1.1rem 1.2rem; display: grid; gap: .4rem; }
.ebook-card__tags { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin: 0; }
.ebook-card__price { font-size: .8rem; font-weight: 700; padding: .2rem .6rem; border-radius: 999px; background: var(--surface-2); color: var(--text); }
.ebook-card__price.is-free { background: var(--success-soft); color: var(--success); }
.ebook-card__title { font-size: 1.05rem; margin: 0; }
.ebook-card__title a { color: inherit; text-decoration: none; }
.ebook-card__title a:hover { text-decoration: underline; }
.ebook-card__sub { margin: 0; color: var(--text-muted); font-size: .9rem; }
.ebook-detail { display: grid; gap: 2rem; grid-template-columns: minmax(0, 280px) minmax(0, 1fr); align-items: start; }
.ebook-detail__cover { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lg); aspect-ratio: 2 / 3; background: var(--surface-2); }
.ebook-detail__main { display: grid; gap: .75rem; }
.ebook-detail__title { margin: 0; }
.ebook-detail__sub { font-size: 1.15rem; color: var(--text-muted); margin: 0; }
.ebook-detail__cta { display: grid; gap: .5rem; justify-items: start; padding: 1.1rem 1.2rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.ebook-detail__text { margin-top: .5rem; }
.ebook-list { list-style: none; margin: 0; padding: 0; }
.ebook-list__item { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: space-between; align-items: center; padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); }
.ebook-list__item:last-child { border-bottom: 0; }
.inline-edit { display: flex; gap: .35rem; align-items: center; }
.inline-edit input { min-width: 0; flex: 1; }
@media (max-width: 640px) {
  .ebook-detail { grid-template-columns: 1fr; }
  .ebook-detail__cover { max-width: 220px; }
}

/* Dashboard: Punkte-Erklärung (Punkte je Aktion, Level & was sie bringen) */
.points-explain { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); margin-top: 1rem; align-items: start; }
.points-explain .card { margin: 0; }
.level-ladder { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .6rem; }
.level-ladder li { display: flex; gap: .7rem; align-items: flex-start; }
.level-ladder__num { flex: none; width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; font-weight: 700; background: var(--accent-soft); color: var(--accent-text); }
.feed-intro { margin: 0 0 .75rem; padding: .65rem .9rem; border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--accent-text); font-size: .92rem; }

/* Hilfe & Stolpersteine, „Hier komme ich nicht weiter“, Fragen-Radar */
.lesson-nav__help { margin: 1rem 0 0; padding-top: .75rem; border-top: 1px solid var(--border); font-weight: 600; }
.lesson-help { margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--border); }
.lesson-help h2 { font-size: 1.15rem; }
.faq-list { display: grid; gap: .5rem; margin-bottom: 1rem; }
.faq-item { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); padding: .7rem .9rem; }
.faq-item > summary { cursor: pointer; font-weight: 600; }
.faq-item[open] > summary { margin-bottom: .5rem; }
.stuck > summary { list-style: none; display: inline-flex; }
.stuck > summary::-webkit-details-marker { display: none; }
.stuck__form { display: grid; gap: .4rem; margin-top: .75rem; max-width: 560px; }
.stuck__form .btn { justify-self: start; }
.help-widget { border-color: var(--accent); }
.radar-card { border-left: 4px solid var(--accent); }
.radar-card__texts { margin: .5rem 0; padding-left: 1.1rem; }
.radar-card__texts li { margin-bottom: .25rem; }
.radar-meta { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }

/* Themen-Badges: Farbvorlagen (Stammdaten → Themen) */
/* Themen-Farben: feste Farbpaare mit Kontrast ≥ 7:1 (hell und dunkel getrennt geprüft) */
.offer__topic--c-petrol, .offer__topic--c-violett, .offer__topic--c-gelb, .offer__topic--c-orange, .offer__topic--c-blau, .offer__topic--c-rosa, .offer__topic--c-verlauf, .offer__topic--ki, .offer__topic--both { background: var(--tb); color: var(--tt); }
.offer__topic--c-petrol  { --tb: #dcefe9; --tt: #0b4a44; }
.offer__topic--c-violett, .offer__topic--ki { --tb: #ebe5ff; --tt: #4b2fb8; }
.offer__topic--c-gelb    { --tb: #fbf3a6; --tt: #4d4300; }
.offer__topic--c-orange  { --tb: #fde3cc; --tt: #733100; }
.offer__topic--c-blau    { --tb: #dde8fb; --tt: #1a4296; }
.offer__topic--c-rosa    { --tb: #fadbe9; --tt: #761446; }
.offer__topic--c-verlauf, .offer__topic--both { --tb: linear-gradient(90deg, #dcefe9, #ebe5ff); --tt: #0b4a44; }
:root[data-theme="dark"] .offer__topic--c-petrol { --tb: #16433f; --tt: #a8ecd9; }
:root[data-theme="dark"] .offer__topic--c-violett, :root[data-theme="dark"] .offer__topic--ki { --tb: #2f2463; --tt: #d9cfff; }
:root[data-theme="dark"] .offer__topic--c-gelb { --tb: #4a4300; --tt: #fff27a; }
:root[data-theme="dark"] .offer__topic--c-orange { --tb: #4f2a0a; --tt: #ffc896; }
:root[data-theme="dark"] .offer__topic--c-blau { --tb: #173466; --tt: #c3d8ff; }
:root[data-theme="dark"] .offer__topic--c-rosa { --tb: #4f1733; --tt: #ffc2de; }
:root[data-theme="dark"] .offer__topic--c-verlauf, :root[data-theme="dark"] .offer__topic--both { --tb: linear-gradient(90deg, #16433f, #2f2463); --tt: #d9f5ec; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .offer__topic--c-petrol { --tb: #16433f; --tt: #a8ecd9; }
  :root:not([data-theme="light"]) .offer__topic--c-violett, :root:not([data-theme="light"]) .offer__topic--ki { --tb: #2f2463; --tt: #d9cfff; }
  :root:not([data-theme="light"]) .offer__topic--c-gelb { --tb: #4a4300; --tt: #fff27a; }
  :root:not([data-theme="light"]) .offer__topic--c-orange { --tb: #4f2a0a; --tt: #ffc896; }
  :root:not([data-theme="light"]) .offer__topic--c-blau { --tb: #173466; --tt: #c3d8ff; }
  :root:not([data-theme="light"]) .offer__topic--c-rosa { --tb: #4f1733; --tt: #ffc2de; }
  :root:not([data-theme="light"]) .offer__topic--c-verlauf, :root:not([data-theme="light"]) .offer__topic--both { --tb: linear-gradient(90deg, #16433f, #2f2463); --tt: #d9f5ec; }
}
.cal-event--c-petrol  { border-left: 3px solid var(--accent); }
.cal-event--c-violett { border-left: 3px solid #7c5cff; }
.cal-event--c-gelb    { border-left: 3px solid #d4c20a; }
.cal-event--c-orange  { border-left: 3px solid #f08c2b; }
.cal-event--c-blau    { border-left: 3px solid #2f6fdf; }
.cal-event--c-rosa    { border-left: 3px solid #d9468f; }
.cal-event--c-verlauf { border-left: 3px solid color-mix(in srgb, #7c5cff 50%, var(--accent)); }
.topic-admin__row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto; gap: .6rem; align-items: end; padding: .6rem 0; border-bottom: 1px solid var(--border); }
@media (max-width: 640px) { .topic-admin__row { grid-template-columns: 1fr; } }
.payout-item { display: grid; gap: .6rem; padding: .8rem 0; border-bottom: 1px solid var(--border); }
.payout-item:last-child { border-bottom: 0; }
.payout-upload { display: grid; gap: .4rem; padding: .8rem; border: 1px dashed var(--border); border-radius: var(--radius-sm); background: var(--surface-2); }
.payout-upload .btn { justify-self: start; }
.invoice-check { margin-top: .5rem; padding: .5rem .7rem; border-radius: var(--radius-sm); border: 1px solid var(--border); }
.invoice-check.is-ok { background: var(--success-soft); }
.invoice-check.is-warn { background: var(--warning-soft); }
.invoice-check > summary { cursor: pointer; font-weight: 600; font-size: .88rem; }
.not-invoice { display: flex; gap: .6rem; align-items: center; margin: 0 0 1rem; padding: .75rem 1rem; border-radius: var(--radius-sm); background: #c7212a; color: #fff; font-weight: 700; letter-spacing: .01em; }
.doc-table code { font-size: .82rem; }

/* Zentraler KI-Assistent (nur Inhaber) */
.ai-fab { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 900; width: 56px; height: 56px; border-radius: 50%; border: 0; cursor: pointer; font-size: 1.6rem; line-height: 1; color: #0b2327; background: linear-gradient(135deg, #f3e20f, #2fb5a0); box-shadow: 0 10px 28px rgb(0 0 0 / .28); transition: transform .15s; }
.ai-fab:hover, .ai-fab:focus-visible { transform: scale(1.08); }
@media print { .ai-fab { display: none; } }
.ai-dialog--global { width: min(640px, calc(100vw - 32px)); }
.ai-dialog__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .5rem; }
.ai-dialog__head h2 { margin: 0; }
.ai-dialog__setup { padding: .75rem 1rem; margin-bottom: .75rem; border-radius: var(--radius-sm); background: var(--warning-soft); display: grid; gap: .5rem; justify-items: start; }
.ai-dialog__setup p { margin: 0; }
.ai-tabs { display: flex; gap: .35rem; margin-bottom: .75rem; flex-wrap: wrap; }
.ai-tabs button { font: inherit; font-weight: 600; cursor: pointer; padding: .45rem .9rem; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); }
.ai-tabs button[aria-selected="true"] { background: var(--pill-active-bg); color: var(--pill-active-text); border-color: var(--pill-active-bg); }
.ai-result__box { max-height: 260px; overflow: auto; padding: .7rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); margin-bottom: .5rem; }
.ai-image img { width: 100%; border-radius: var(--radius-sm); margin: .5rem 0; box-shadow: var(--shadow); }
.media-ai-badge { position: absolute; top: .4rem; left: .4rem; font-size: .7rem; font-weight: 700; padding: .15rem .45rem; border-radius: 999px; background: #0b2327; color: #f3e20f; }
.media-item__thumb { position: relative; }
.ai-dialog [data-pane][hidden], .ai-image[hidden], .ai-result[hidden] { display: none; }

/* ✨ KI-Assistent in der Editor-Werkzeugleiste – deutlich hervorgehoben */
.rt-btn.rt-btn--ai { width: auto; display: inline-flex; align-items: center; gap: .35rem; padding: 0 .75rem; font-weight: 700; font-size: .85rem; color: #0b2327; background: linear-gradient(135deg, #f3e20f, #2fb5a0); border-color: transparent; box-shadow: 0 2px 8px rgb(47 181 160 / .35); }
.rt-btn.rt-btn--ai:hover { filter: brightness(1.06); background: linear-gradient(135deg, #f3e20f, #2fb5a0); border-color: transparent; }
.rt-btn.rt-btn--ai svg { color: #0b2327; }
.rt-btn__label { white-space: nowrap; }

/* Automatische Rechnungsprüfung – kompakt: Bilanz, offene Punkte, erfüllte eingeklappt */
.icheck { margin-top: .6rem; padding: .75rem .9rem; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface); display: grid; gap: .55rem; max-width: 460px; }
.icheck--ok { border-color: color-mix(in srgb, var(--success) 45%, var(--border)); }
.icheck--warn { border-color: color-mix(in srgb, #d99a1a 60%, var(--border)); }
.icheck__head { display: flex; gap: .6rem; align-items: center; }
.icheck__icon { font-size: 1.3rem; line-height: 1; }
.icheck__title { display: grid; line-height: 1.3; }
.icheck__bar { height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.icheck__bar span { display: block; height: 100%; background: var(--success); }
.icheck--warn .icheck__bar span { background: #d99a1a; }
.icheck__issues { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.icheck__issues li { display: flex; gap: .5rem; align-items: flex-start; padding: .45rem .6rem; border-radius: 8px; font-size: .9rem; }
.icheck__issues li.is-warn { background: var(--warning-soft); }
.icheck__issues li.is-unknown { background: var(--surface-2); }
.icheck__ok > summary { cursor: pointer; font-size: .85rem; color: var(--text-muted); }
.icheck__ok ul { margin: .4rem 0 0; padding-left: 1.1rem; font-size: .85rem; display: grid; gap: .2rem; }

/* KI-Schnellstart (Kacheln im Assistenten), Rundum-sorglos-Kurs, Kennzeichnung KI-Bilder */
.ai-quick { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .5rem; margin: 0; padding: 0; list-style: none; }
.ai-quick button { width: 100%; height: 100%; text-align: left; font: inherit; cursor: pointer; display: grid; gap: .15rem; padding: .7rem .8rem; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface-2); color: var(--text); }
.ai-quick button:hover, .ai-quick button:focus-visible { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }
.ai-quick strong { font-size: .95rem; }
.ai-quick span { font-size: .8rem; color: var(--text-muted); }
.ai-quick-form[hidden], .ai-quick[hidden] { display: none; }
.ai-quick-form .ai-back { justify-self: start; }
.ai-checks { display: grid; gap: .3rem; margin: .25rem 0; }
.ai-checks label { font-weight: 400; margin: 0; }
.ai-build-opts { display: grid; gap: .4rem; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .75rem 1rem; margin: 0 0 1rem; }
.ai-build-opts legend { font-weight: 700; padding: 0 .35rem; }
.ai-todo { list-style: none; padding: 0; margin: .5rem 0 0; display: grid; gap: .4rem; }
.ai-todo li { display: grid; grid-template-columns: 1.4em 1fr; column-gap: .5rem; align-items: baseline; padding: .55rem .75rem; border-radius: var(--radius-sm); background: var(--surface-2); }
.ai-todo li.is-done { opacity: .75; }
.ai-todo__state { grid-row: span 2; }
.ai-todo li > .small { grid-column: 2; }
.ai-img-tag { position: absolute; left: .5rem; top: .5rem; z-index: 1; font-size: .7rem; font-weight: 700; padding: .15rem .5rem; border-radius: 999px; background: #0b2327; color: #f3e20f; }
.about-cover__note { margin: -.5rem 0 .75rem; }
.module-cover { margin: 0 0 1rem; }
.module-cover img { width: 100%; height: auto; border-radius: var(--radius-sm); display: block; }
.module-cover figcaption { margin-top: .3rem; }
.module-block__cover { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; padding: .5rem .75rem; border-bottom: 1px solid var(--border); }
.module-block__cover img { width: 96px; height: 54px; object-fit: cover; border-radius: 6px; }

/* Bildstil-Auswahl mit Vorschau, KI-Kosten */
.style-pick { border: 0; padding: 0; margin: 0 0 1rem; }
.style-pick legend { font-weight: 700; margin-bottom: .25rem; }
.style-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .6rem; }
.style-pick .style-card { position: relative; display: grid; align-content: start; margin: 0; font-weight: 400; gap: .2rem; padding: .45rem; border: 2px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); cursor: pointer; }
.style-card input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.style-card:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent); }
.style-card:has(input:checked) .style-card__name::after { content: " ✓"; }
.style-card:has(input:focus-visible) { outline: 3px solid var(--text); outline-offset: 2px; }
.style-card__img { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden; }
.style-card__img img, .style-card__svg { display: block; width: 100%; height: 100%; object-fit: cover; }
.style-card__name { font-weight: 700; font-size: .9rem; }
.style-card__info { font-size: .78rem; color: var(--text-muted); line-height: 1.3; }
.ai-costs { border-top: 1px solid var(--border); padding-top: .75rem; }
.ai-costs h3 { margin: 0 0 .5rem; font-size: 1.05rem; }
.ai-costs__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .5rem; margin: 0; }
.ai-costs__item { padding: .6rem .75rem; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--border); }
.ai-costs__item dt { font-size: .8rem; color: var(--text-muted); }
.ai-costs__item dd { margin: .15rem 0 0; display: grid; gap: .1rem; }
.ai-costs__item strong { font-size: 1.25rem; }
.style-chips { gap: .35rem; flex-wrap: wrap; }

/* Anzeigename im Profil: Auswahl, Spitzname, Vorschau */
.name-display { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .75rem 1rem 1rem; }
.name-display legend { font-weight: 700; padding: 0 .35rem; }
.name-display__options { display: grid; gap: .45rem; margin: .5rem 0; }
.field .name-display__opt { font-weight: 400; display: flex; gap: .5rem; align-items: flex-start; margin: 0; padding: .5rem .65rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); cursor: pointer; }
.name-display__opt:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent); }
.name-display__example { color: var(--text-muted); font-weight: 400; }
.name-display__nick[hidden] { display: none; }
.name-preview { margin: .75rem 0 .5rem; padding: .65rem .75rem; border-radius: var(--radius-sm); border: 1px dashed var(--border); background: var(--surface); }
.name-preview__post { display: flex; gap: .6rem; align-items: center; margin-top: .4rem; }
.upload-security summary { cursor: pointer; }
.rules-page table { width: 100%; border-collapse: collapse; margin: .5rem 0 1rem; font-size: .95rem; }
.rules-page th, .rules-page td { text-align: left; padding: .5rem .65rem; border: 1px solid var(--border); vertical-align: top; }
.rules-page th { background: var(--surface-2); }
.mod-pending { display: inline-flex; gap: .35rem; align-items: center; font-size: .8rem; font-weight: 700; padding: .2rem .55rem; border-radius: 999px; background: var(--warning-soft); color: var(--text); }
.write-ban { padding: .75rem 1rem; border-radius: var(--radius-sm); background: var(--warning-soft); margin: 0; }
.mod-item { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .75rem 1rem; display: grid; gap: .5rem; }
.mod-item__body { max-height: 220px; overflow: auto; padding: .6rem .75rem; background: var(--surface-2); border-radius: 8px; }
.mod-item__actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: flex-end; }
.mod-list { display: grid; gap: .75rem; list-style: none; padding: 0; margin: 0; }
.doc-frame { width: 100%; min-height: 70vh; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #fff; margin-top: .75rem; }
.facts-list { display: grid; gap: .4rem; margin: 1rem 0; }
.facts-list div { display: grid; grid-template-columns: minmax(120px, 200px) 1fr; gap: .75rem; }
.facts-list dt { color: var(--text-muted); }
.facts-list dd { margin: 0; overflow-wrap: anywhere; }
/* Community-Regeln: Stufen bei Verstößen */
.rule-steps { list-style: none; padding: 0; margin: .75rem 0 1rem; display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.rule-steps__item { display: grid; gap: .3rem; align-content: start; padding: .85rem 1rem; border-radius: var(--radius-sm); border: 1px solid var(--border); border-top-width: 4px; background: var(--surface-2); }
.rule-steps__item strong { font-size: 1rem; }
.rule-steps__item span:last-child { font-size: .92rem; color: var(--text-muted); line-height: 1.45; }
.rule-steps__badge { font-size: 1.4rem; line-height: 1; }
.rule-steps__item--1 { border-top-color: #d9b40a; }
.rule-steps__item--2 { border-top-color: #e07a1f; }
.rule-steps__item--3 { border-top-color: #c7212a; }
.prose .rule-steps li { margin: 0; }
/* Lange deutsche Wörter in Kacheln sauber trennen statt überlappen */
.stat-card { min-width: 0; }
.stat-card span, .stat-card strong { overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; }
.mod-item__evidence { display: grid; gap: .5rem; padding: .25rem; background: var(--surface); }
.mod-item__imgs { display: flex; gap: .5rem; flex-wrap: wrap; }
.mod-item__imgs img { max-width: 220px; max-height: 160px; border-radius: 6px; border: 1px solid var(--border); }
.doc-image { max-width: 100%; height: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #fff; }
.legal-review { list-style: none; padding: 0; margin: 0; display: grid; gap: .75rem; }
.legal-review__item { display: flex; gap: 1rem; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; }
.legal-review__item > div { flex: 1 1 320px; display: grid; gap: .35rem; }
.legal-review__item.is-done { opacity: .8; }

/* Installations-Assistent: Systemprüfung */
.install-checks { list-style: none; padding: 0; margin: 0 0 1.25rem; display: grid; gap: .35rem; }
.install-checks li { display: flex; gap: .5rem; align-items: flex-start; }
.install-checks li svg { flex: none; width: 1.1rem; height: 1.1rem; margin-top: .15rem; }
.install-checks .is-ok svg { color: var(--success); }
.install-checks .is-bad { font-weight: 600; }
.install-checks .is-bad svg { color: var(--danger); }

/* Neue Rechtstext-Vorlagen: Änderungen */
.btn-row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: 1rem 0 .5rem; }
.btn-row form { margin: 0; }
.tpl-diff { border: 1px solid var(--border); border-radius: 10px; padding: .5rem .9rem; }
.tpl-diff summary { cursor: pointer; font-weight: 600; }
.tpl-diff__body p { margin: .35rem 0; padding: .3rem .6rem; border-radius: 6px; }
.tpl-diff__add { background: var(--success-soft); border-left: 4px solid var(--success); }
.tpl-diff__del { background: var(--danger-soft); border-left: 4px solid var(--danger); }
.tpl-diff__same { color: var(--text-muted); }
.tpl-diff__skip { text-align: center; }

/* Inhalte melden (Art. 16 DSA) */
.report-target { margin: 0 0 1.25rem; padding: .75rem 1rem; border-left: 4px solid var(--border-strong); background: var(--surface-2); border-radius: 8px; }
.report-link { color: var(--text-muted); }
.msg__report { display: inline-block; margin-top: .15rem; color: var(--text-muted); font-size: .8rem; }
.msg--theirs .msg__report { margin-left: .25rem; }

/* Tool-Empfehlungen (Affiliate): Werbehinweis, Kacheln, Beitrag, Admin-Formular */
.ad-disclosure { display: flex; gap: .75rem; align-items: flex-start; background: var(--warning-soft); border: 1px solid var(--warning); border-radius: var(--radius); padding: .85rem 1rem; margin: 0 0 1.25rem; color: var(--text); }
.ad-disclosure p { margin: 0; }
.ad-disclosure__icon { font-size: 1.25rem; line-height: 1.2; }
.ad-badge { display: inline-block; font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: .2rem .55rem; border-radius: 999px; background: var(--brand-yellow); color: var(--brand-yellow-text); }
.tool-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); }
.tool-grid--single { grid-template-columns: 1fr; }
.tool-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.tool-card__media { display: block; aspect-ratio: 16 / 9; overflow: hidden; text-decoration: none; }
.tool-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tool-card__ph { display: grid; place-items: center; width: 100%; height: 100%; color: #fff; font-size: 1.25rem; font-weight: 800; text-shadow: 0 1px 3px rgba(0,0,0,.4); padding: 1rem; text-align: center; }
.tool-card__body { display: flex; flex-direction: column; gap: .4rem; padding: .8rem .9rem .9rem; flex: 1; }
.tool-card__badges { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin: 0; }
.tool-card__badges .offer__topic { align-self: center; }
.tool-card__new { font-size: .75rem; font-weight: 700; color: var(--brand-yellow); }
.tool-card__title { margin: 0; font-size: 1rem; line-height: 1.3; }
.tool-card__title a { color: var(--text); text-decoration: none; }
.tool-card__title a:hover, .tool-card__title a:focus-visible { text-decoration: underline; }
.tool-card__text { margin: 0; color: var(--text-muted); font-size: .88rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tool-card__foot { margin: auto 0 0; padding-top: .35rem; }
.tool-article h1 { margin: .4rem 0 1rem; }
.tool-article__cover { width: 100%; height: auto; border-radius: var(--radius); margin: 0 0 1rem; }
.tool-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .6rem; margin: 0 0 1.25rem; }
.tool-facts div { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .55rem .75rem; }
.tool-facts dt { font-size: .78rem; color: var(--text-muted); }
.tool-facts dd { margin: 0; font-weight: 700; }
.tool-lists { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
.tool-lists h3 { margin-top: 0; font-size: 1rem; }
.tool-lists ul { margin: 0; padding-left: 1.2rem; }
.tool-cta { text-align: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem; margin: 1.75rem 0 1rem; }
.tool-cta .btn { margin-bottom: .5rem; }
.tool-checked { border-top: 1px solid var(--border); padding-top: .75rem; }
.tool-edit { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1.25rem; align-items: start; }
.tool-edit__preview { position: sticky; top: calc(var(--header-h, 64px) + 1rem); }
.tool-edit__preview h2 { margin: 0 0 .6rem; font-size: 1rem; }
.input-prefix { display: flex; align-items: stretch; }
.input-prefix span { display: flex; align-items: center; padding: 0 .65rem; border: 1px solid var(--border-strong); border-right: 0; border-radius: var(--radius-sm) 0 0 var(--radius-sm); background: var(--surface-2); color: var(--text-muted); font-size: .9rem; white-space: nowrap; }
.input-prefix input { border-top-left-radius: 0; border-bottom-left-radius: 0; min-width: 0; }
.lock-note { background: var(--warning-soft); border: 1px dashed var(--warning); border-radius: var(--radius-sm); padding: .6rem .8rem; }
@media (max-width: 900px) { .tool-edit { grid-template-columns: 1fr; } .tool-edit__preview { position: static; } }
@media (max-width: 480px) { .input-prefix { flex-direction: column; } .input-prefix span { border-right: 1px solid var(--border-strong); border-bottom: 0; border-radius: var(--radius-sm) var(--radius-sm) 0 0; padding: .4rem .65rem; } .input-prefix input { border-radius: 0 0 var(--radius-sm) var(--radius-sm); } }
.tool-card .ad-badge, .tool-card .offer__topic { font-size: .64rem; padding: .18rem .5rem; }
.tool-grid--single .tool-card__ph { font-size: 1.5rem; }

/* Vorlagen/Code-Blöcke in Kurs- und Seitentexten: ein Kasten mit Kopieren-Knopf */
.prose pre, .rt pre { position: relative; margin: .75rem 0 1.25rem; padding: .9rem 1rem; padding-right: 6.5rem; background: var(--surface-2); border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: var(--radius-sm); white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--font-mono); font-size: .9rem; line-height: 1.55; }
.prose pre code, .rt pre code { background: none; padding: 0; border-radius: 0; font-size: inherit; }
.pre-copy { position: absolute; top: .5rem; right: .5rem; font: inherit; font-family: inherit; font-size: .78rem; font-weight: 700; padding: .3rem .65rem; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); cursor: pointer; }
.pre-copy:hover, .pre-copy:focus-visible { background: var(--accent-soft); }
@media (max-width: 480px) { .prose pre, .rt pre { padding-right: 1rem; padding-top: 2.6rem; } }
.lesson-testimonial { margin-top: 1.5rem; border-left: 4px solid var(--brand-yellow); }
.lesson-testimonial h2 { font-size: 1.15rem; margin-top: 0; }
/* Hilfe-Eintrag: Zuordnung zu Kurs/Lektion – volle Breite, gut lesbar */
.help-assign { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .9rem 1rem 1rem; margin: 0 0 1.25rem; }
.help-assign legend { font-weight: 700; padding: 0 .35rem; }
.help-assign select { width: 100%; max-width: 100%; }

/* Kurzformular (z. B. Partnerlink anlegen) */
.form-narrow { max-width: 640px; }

/* Prompt-Bibliothek (Abo-Club) */
.library-search__row { display: flex; gap: .5rem; flex-wrap: wrap; }
.library-search__row input[type="search"] { flex: 1 1 260px; }
.library-search__row select { flex: 0 1 220px; }
.library-views { display: flex; gap: .5rem; flex-wrap: wrap; margin: 0 0 1rem; }
.library-latest { border-left: 4px solid var(--accent); }
.prompt-list { display: grid; gap: 1rem; }
.prompt-card__head { display: flex; justify-content: space-between; align-items: flex-start; gap: .75rem; }
.prompt-card__tags { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; }
.prompt-card__title { margin: .6rem 0 .25rem; font-size: 1.15rem; }
.prompt-card__use { margin: 0 0 .25rem; }
.prompt-card__tip { margin: 0 0 .5rem; }
.prompt-card__fav[aria-pressed="true"] { color: var(--danger, #d9534f); }
.prompt-card__fav[aria-pressed="true"] svg { fill: currentColor; }
.library-archive li { margin-bottom: .5rem; }
.empty-state { text-align: center; padding: 2rem 1rem; }
.library-latest { margin-bottom: 1rem; }

/* ---------- Abo-Club hervorgehoben (/kurse, Meine Kurse) & Prompt-Zähler ---------- */
.main-nav a.main-nav__club { color: var(--brand-yellow); }
.main-nav a.main-nav__club:hover { color: var(--brand-yellow); }
.club-banner { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 0; margin: 0 0 1.5rem; border-radius: 18px; overflow: hidden; background: var(--petrol); color: #fff; border: 2px solid var(--brand-yellow); box-shadow: 0 10px 30px rgb(0 0 0 / .18); }
.club-banner__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.club-banner__body { padding: 1.4rem 1.6rem; display: flex; flex-direction: column; align-items: flex-start; gap: .6rem; }
.club-banner__flag { display: inline-block; background: var(--brand-yellow); color: var(--brand-yellow-text); font-weight: 700; font-size: .8rem; padding: .2rem .7rem; border-radius: 999px; }
.club-banner__title { margin: 0; color: #fff; font-size: 1.45rem; line-height: 1.2; }
.club-banner__text { margin: 0; color: rgb(255 255 255 / .85); }
.club-banner__facts { display: flex; flex-wrap: wrap; gap: 1.5rem; margin: .2rem 0 .4rem; }
.club-banner__facts p { display: flex; align-items: center; gap: .6rem; margin: 0; }
.club-banner__facts strong { font-size: 2.2rem; line-height: 1; color: var(--brand-yellow); }
.club-banner__facts span { font-size: .85rem; line-height: 1.25; color: rgb(255 255 255 / .85); }
@media (max-width: 760px) { .club-banner { grid-template-columns: 1fr; } .club-banner__media img { max-height: 180px; } }
.library-count { display: flex; align-items: center; gap: .7rem; margin: 0; padding: .7rem 1.1rem; border-radius: 14px; background: var(--petrol); border: 2px solid var(--brand-yellow); }
.library-count strong { font-size: 2.2rem; line-height: 1; color: var(--brand-yellow); }
.library-count span { font-size: .85rem; line-height: 1.25; color: #fff; }
.main-nav a { white-space: nowrap; }
@media (max-width: 1360px) { .main-nav { gap: 0; margin-left: .25rem; } .main-nav a { padding: .45rem .6rem; font-size: .9rem; } .main-nav a[aria-current="page"]::after { left: .6rem; right: .6rem; } }

/* ---------- KI-Assistent: Aufgaben-Auswahl, ✨ an Feldern, KI-Monatsausgabe ---------- */
.ai-task { display: grid; gap: .35rem; margin: 0 0 .8rem; }
.ai-task select { width: 100%; }
.has-ai-btn > label { display: inline-block; }
.ai-field-btn { display: inline-flex; align-items: center; margin: 0 0 .3rem .5rem; padding: .1rem .55rem; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-2); color: inherit; font-size: .78rem; font-weight: 700; cursor: pointer; vertical-align: middle; }
.ai-field-btn:hover, .ai-field-btn:focus-visible { border-color: var(--brand-yellow); }
.library-ai-issue { border: 2px solid var(--brand-yellow); }
.library-ai-issue__cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .2rem .8rem; }
.library-ai-issue + h2 { margin-top: 1.5rem; }
/* Abo-Club als Empfehlung in Kurslisten (immer vorne, gelber Rahmen mit Leuchten) */
.course-card--club { border: 2px solid var(--brand-yellow); box-shadow: 0 0 0 4px rgb(243 226 15 / .12), 0 14px 34px rgb(0 0 0 / .28); }
.course-card__flag--club { background: var(--brand-yellow); }
.course-card__count { margin: 0 0 .4rem; font-size: .9rem; color: var(--text-muted); }
.course-card__count strong { font-size: 1.35rem; color: var(--brand-yellow); margin-right: .15rem; }
:root[data-theme="light"] .course-card__count strong { color: var(--petrol); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .course-card__count strong { color: var(--petrol); } }
/* Hinweis auf den Prompt-Club im Hero der Startseite */
.hero__club { margin: -.4rem 0 1.2rem; }
.hero__club a { display: inline-flex; align-items: center; gap: .5rem; padding: .45rem .9rem .45rem .45rem; border-radius: 999px; background: rgb(243 226 15 / .12); border: 1px solid rgb(243 226 15 / .45); color: #fff; text-decoration: none; font-weight: 600; font-size: .95rem; }
.hero__club a:hover, .hero__club a:focus-visible { background: rgb(243 226 15 / .2); }
.hero__club-badge { background: var(--brand-yellow); color: var(--brand-yellow-text); border-radius: 999px; padding: .1rem .55rem; font-size: .78rem; font-weight: 800; }
/* Anlaufschutz: gesperrte PDF-Vorlage in der Materialliste */
.file-list__locked { display: flex; align-items: center; gap: .75rem; padding: .7rem .9rem; border: 1px dashed var(--border); border-radius: 12px; color: var(--text-muted); }
/* Einrichtungs-Assistent Digistore24 */
.setup-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.setup-step details { border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.setup-step.is-done details { opacity: .8; }
.setup-step summary { display: flex; align-items: center; gap: .7rem; padding: .75rem 1rem; cursor: pointer; font-weight: 700; list-style: none; }
.setup-step summary::-webkit-details-marker { display: none; }
.setup-step__num { flex: 0 0 auto; width: 1.9rem; height: 1.9rem; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); font-size: .9rem; }
.setup-step.is-done .setup-step__num { background: var(--brand-yellow); color: var(--brand-yellow-text); }
.setup-step__title { flex: 1 1 auto; }
.setup-step__body { padding: 0 1rem 1rem 3.6rem; display: grid; gap: .6rem; }
.setup-step__where { margin: 0; font-size: .9rem; }
.setup-step__actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.setup-copy { display: grid; gap: .25rem; }
.setup-image { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; }
.setup-image img { border-radius: 10px; max-width: 240px; height: auto; }
.setup-inline-form { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.setup-inline-form input { max-width: 14rem; }
.setup-products { list-style: none; margin: 0; padding: 0; }
.setup-products li { display: grid; grid-template-columns: 1fr auto auto; gap: 1rem; align-items: center; padding: .9rem 1.2rem; border-top: 1px solid var(--border); }
.setup-products li > div { display: grid; gap: .15rem; }
@media (max-width: 640px) { .setup-step__body { padding-left: 1rem; } .setup-products li { grid-template-columns: 1fr; } }
/* Teilen-Menü (Kurs, Club, E-Book, Tool) */
.share-menu { margin-top: 1rem; padding: 1rem 1.1rem; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); display: grid; gap: .5rem; }
.share-menu__title { margin: 0; font-size: 1rem; display: flex; align-items: center; gap: .4rem; }
.share-menu__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.footer-brand-wrap { display: grid; gap: .35rem; }
.footer-brand-wrap .footer-vendor { flex-basis: auto; }
.footer-marks { flex-basis: 100%; margin: .5rem 0 0; padding-top: .75rem; border-top: 1px solid rgb(255 255 255 / .08); text-align: center; font-size: .72rem; line-height: 1.5; color: var(--on-petrol-muted); opacity: .75; }