/*
 * sp-theme.css: Klassen sp-* und Standardwerte der neuen Design-Token.
 *
 * Vertrag: docs/architecture/theming-vertrag.md im Plattform-Workspace. Kurzfassung:
 *  - Module tragen keine Farben, Radien, Schatten und Schriften, sondern diese Klassen und data-akzent.
 *  - Alles hier steht UNGELAYERT. Tailwind v4 legt seine Utilities in @layer; ungelayertes CSS gewinnt gegen
 *    jede Utility ohne !important und ohne Spezifitaetskampf. Ein Preset (overrides.css) steht spaeter im
 *    Dokument und gewinnt gegen dieses Blatt bei gleicher Spezifitaet.
 *  - Die Standardwerte im :root-Block sind die Werte von heute. lib/tokens/tokens.php fuehrt dieselben Werte;
 *    tests/t_tokens.php haelt beide gleich. Tokens ohne Wert (Schrift der Beschriftung, Knopfschrift, Groesse
 *    der Beschriftung) haben ihren Rueckfall in var(--x, ...) an der Stelle, die sie liest.
 *  - Wird bei der Installation nach redaxo/resources/css kopiert (install.php) und von boot/frontend.php
 *    nach output.css verlinkt.
 *
 * Aenderung an diesem Blatt: Version in package.yml anheben (Browser-Cache haengt an filemtime).
 */

:root {
  --sp-page: oklch(98.5% 0.002 247.839);
  --sp-dark-fill: gradient;
  --sp-dark-bg: var(--primary);
  --sp-on-accent: #fff;
  --sp-nav-text: #fff;
  --sp-footer-fill: gradient;
  --sp-footer-bg: var(--primary);
  --sp-footer-text: #fff;
  --sp-veil-fill: gradient;
  --sp-veil-bg: var(--primary);
  --sp-veil-opacity: 0.4;
  --sp-accent-1: #10B981;   /* emerald */
  --sp-accent-1-von: oklch(76.5% 0.177 163.223);
  --sp-accent-1-bis: oklch(70.4% 0.14 182.503);
  --sp-accent-1-text: oklch(59.6% 0.145 163.225);
  --sp-accent-1-hell: oklch(84.5% 0.143 164.978);
  --sp-accent-2: #3B82F6;   /* blue */
  --sp-accent-2-von: oklch(70.7% 0.165 254.624);
  --sp-accent-2-bis: oklch(58.5% 0.233 277.117);
  --sp-accent-2-text: oklch(54.6% 0.245 262.881);
  --sp-accent-2-hell: oklch(80.9% 0.105 251.813);
  --sp-accent-3: #A855F7;   /* purple */
  --sp-accent-3-von: oklch(71.4% 0.203 305.504);
  --sp-accent-3-bis: oklch(60.6% 0.25 292.717);
  --sp-accent-3-text: oklch(55.8% 0.288 302.321);
  --sp-accent-3-hell: oklch(82.7% 0.119 306.383);
  --sp-accent-4: #F97316;   /* orange */
  --sp-accent-4-von: oklch(75% 0.183 55.934);
  --sp-accent-4-bis: oklch(63.7% 0.237 25.331);
  --sp-accent-4-text: oklch(64.6% 0.222 41.116);
  --sp-accent-4-hell: oklch(83.7% 0.128 66.29);
  --sp-accent-5: #06B6D4;   /* cyan */
  --sp-accent-5-von: oklch(78.9% 0.154 211.53);
  --sp-accent-5-bis: oklch(70.4% 0.14 182.503);
  --sp-accent-5-text: oklch(60.9% 0.126 221.723);
  --sp-accent-5-hell: oklch(86.5% 0.127 207.078);
  --sp-accent-6: #F43F5E;   /* rose */
  --sp-accent-6-von: oklch(71.2% 0.194 13.428);
  --sp-accent-6-bis: oklch(65.6% 0.241 354.308);
  --sp-accent-6-text: oklch(58.6% 0.253 17.585);
  --sp-accent-6-hell: oklch(81% 0.117 11.638);
  --sp-accent-7: #F59E0B;   /* amber */
  --sp-accent-7-von: oklch(82.8% 0.189 84.429);
  --sp-accent-7-bis: oklch(70.5% 0.213 47.604);
  --sp-accent-7-text: oklch(66.6% 0.179 58.318);
  --sp-accent-7-hell: oklch(87.9% 0.169 91.605);
  --sp-accent-8: #EC4899;   /* pink */
  --sp-accent-8-von: oklch(71.8% 0.202 349.761);
  --sp-accent-8-bis: oklch(64.5% 0.246 16.439);
  --sp-accent-8-text: oklch(59.2% 0.249 0.584);
  --sp-accent-8-hell: oklch(82.3% 0.12 346.018);
  --sp-accent-9: #6366F1;   /* indigo */
  --sp-accent-9-von: oklch(67.3% 0.182 276.935);
  --sp-accent-9-bis: oklch(62.7% 0.265 303.9);
  --sp-accent-9-text: oklch(51.1% 0.262 276.966);
  --sp-accent-9-hell: oklch(78.5% 0.115 274.713);
  --sp-accent-10: #14B8A6;   /* teal */
  --sp-accent-10-von: oklch(77.7% 0.152 181.912);
  --sp-accent-10-bis: oklch(71.5% 0.143 215.221);
  --sp-accent-10-text: oklch(60% 0.118 184.704);
  --sp-accent-10-hell: oklch(85.5% 0.138 181.071);
  /* Palette (lib/tokens/palette.php): Status und Farben, die Module vorher als Tailwind-Klassen trugen */
  --sp-fehler-100: oklch(93.6% 0.032 17.717);
  --sp-fehler-200: oklch(88.5% 0.062 18.334);
  --sp-fehler-300: oklch(80.8% 0.114 19.571);
  --sp-fehler-50: oklch(97.1% 0.013 17.38);
  --sp-fehler-500: oklch(63.7% 0.237 25.331);
  --sp-fehler-600: oklch(57.7% 0.245 27.325);
  --sp-fehler-700: oklch(50.5% 0.213 27.518);
  --sp-ok-100: oklch(96.2% 0.044 156.743);
  --sp-ok-200: oklch(92.5% 0.084 155.995);
  --sp-ok-300: oklch(87.1% 0.15 154.449);
  --sp-ok-400: oklch(79.2% 0.209 151.711);
  --sp-ok-500: oklch(72.3% 0.219 149.579);
  --sp-ok-600: oklch(62.7% 0.194 149.214);
  --sp-ok-700: oklch(52.7% 0.154 150.069);
  --sp-p-black: #000000;
  --sp-p-blue-100: oklch(93.2% 0.032 255.585);
  --sp-p-blue-200: oklch(88.2% 0.059 254.128);
  --sp-p-blue-300: oklch(80.9% 0.105 251.813);
  --sp-p-blue-500: oklch(62.3% 0.214 259.815);
  --sp-p-blue-600: oklch(54.6% 0.245 262.881);
  --sp-p-blue-700: oklch(48.8% 0.243 264.376);
  --sp-p-blue-800: oklch(42.4% 0.199 265.638);
  --sp-p-blue-900: oklch(37.9% 0.146 265.522);
  --sp-p-cyan-100: oklch(95.6% 0.045 203.388);
  --sp-p-cyan-600: oklch(60.9% 0.126 221.723);
  --sp-p-emerald-100: oklch(95% 0.052 163.051);
  --sp-p-emerald-200: oklch(90.5% 0.093 164.15);
  --sp-p-emerald-50: oklch(97.9% 0.021 166.113);
  --sp-p-emerald-500: oklch(69.6% 0.17 162.48);
  --sp-p-emerald-600: oklch(59.6% 0.145 163.225);
  --sp-p-emerald-700: oklch(50.8% 0.118 165.612);
  --sp-p-emerald-800: oklch(43.2% 0.095 166.913);
  --sp-p-gray-100: oklch(96.7% 0.003 264.542);
  --sp-p-gray-200: oklch(92.8% 0.006 264.531);
  --sp-p-gray-300: oklch(87.2% 0.01 258.338);
  --sp-p-gray-400: oklch(70.7% 0.022 261.325);
  --sp-p-gray-50: oklch(98.5% 0.002 247.839);
  --sp-p-gray-500: oklch(55.1% 0.027 264.364);
  --sp-p-gray-600: oklch(44.6% 0.03 256.802);
  --sp-p-gray-700: oklch(37.3% 0.034 259.733);
  --sp-p-gray-800: oklch(27.8% 0.033 256.848);
  --sp-p-gray-900: oklch(21% 0.034 264.665);
  --sp-p-orange-100: oklch(95.4% 0.038 75.164);
  --sp-p-orange-200: oklch(90.1% 0.076 70.697);
  --sp-p-orange-50: oklch(98% 0.016 73.684);
  --sp-p-orange-500: oklch(70.5% 0.213 47.604);
  --sp-p-orange-600: oklch(64.6% 0.222 41.116);
  --sp-p-orange-700: oklch(55.3% 0.195 38.402);
  --sp-p-pink-200: oklch(89.9% 0.061 343.231);
  --sp-p-pink-300: oklch(82.3% 0.12 346.018);
  --sp-p-pink-500: oklch(65.6% 0.241 354.308);
  --sp-p-pink-600: oklch(59.2% 0.249 0.584);
  --sp-p-purple-100: oklch(94.6% 0.033 307.174);
  --sp-p-purple-200: oklch(90.2% 0.063 306.703);
  --sp-p-purple-300: oklch(82.7% 0.119 306.383);
  --sp-p-purple-500: oklch(62.7% 0.265 303.9);
  --sp-p-purple-600: oklch(55.8% 0.288 302.321);
  --sp-p-rose-100: oklch(94.1% 0.03 12.58);
  --sp-p-rose-600: oklch(58.6% 0.253 17.585);
  --sp-p-sky-100: oklch(95.1% 0.026 236.824);
  --sp-p-sky-800: oklch(44.3% 0.11 240.79);
  --sp-p-slate-100: oklch(96.8% 0.007 247.896);
  --sp-p-slate-200: oklch(92.9% 0.013 255.508);
  --sp-p-slate-300: oklch(86.9% 0.022 252.894);
  --sp-p-slate-400: oklch(70.4% 0.04 256.788);
  --sp-p-slate-50: oklch(98.4% 0.003 247.858);
  --sp-p-slate-500: oklch(55.4% 0.046 257.417);
  --sp-p-slate-600: oklch(44.6% 0.043 257.281);
  --sp-p-slate-700: oklch(37.2% 0.044 257.287);
  --sp-p-slate-800: oklch(27.9% 0.041 260.031);
  --sp-p-slate-900: oklch(20.8% 0.042 265.755);
  --sp-p-violet-100: oklch(94.3% 0.029 294.588);
  --sp-p-violet-700: oklch(49.1% 0.27 292.581);
  --sp-p-white: #ffffff;
  --sp-warnung-100: oklch(97.3% 0.071 103.193);
  --sp-warnung-200: oklch(92.4% 0.12 95.746);
  --sp-warnung-300: oklch(90.5% 0.182 98.111);
  --sp-warnung-400: oklch(85.2% 0.199 91.936);
  --sp-warnung-50: oklch(98.7% 0.022 95.277);
  --sp-warnung-500: oklch(79.5% 0.184 86.047);
  --sp-warnung-600: oklch(66.6% 0.179 58.318);
  --sp-warnung-700: oklch(55.5% 0.163 48.998);
  --sp-warnung-800: oklch(47.3% 0.137 46.201);
  --sp-warnung-950: oklch(27.9% 0.077 45.635);
  /* Formulare (Kontaktformular, Formbuilder, Login) */
  --sp-form-text: #1e293b;
  --sp-form-muted: #64748b;
  --sp-form-bg: #ffffff;
  --sp-form-border: #e2e8f0;
  --sp-form-border-strong: #cbd5e1;
  --sp-form-error: #dc2626;
  --sp-form-error-hell: #fca5a5;
  --sp-form-error-line: #ef4444;
  --sp-form-error-border: #fecaca;
  --sp-form-ok: #15803d;
  --sp-form-ok-hell: #86efac;
  --sp-form-ok-line: #22c55e;
  --sp-form-ok-border: #bbf7d0;
  --sp-form-focus: #06b6d4;
  --sp-form-on-dark: #ffffff;
  --sp-form-shadow: #000000;
  --sp-p-amber-100: oklch(97.3% 0.071 103.193);
  --sp-p-amber-300: oklch(90.5% 0.182 98.111);
  --sp-p-amber-400: oklch(85.2% 0.199 91.936);
  --sp-p-amber-500: oklch(79.5% 0.184 86.047);
  --sp-p-amber-600: oklch(66.6% 0.179 58.318);
  --sp-p-amber-950: oklch(27.9% 0.077 45.635);
  --sp-p-green-200: oklch(92.5% 0.084 155.995);
  --sp-p-green-300: oklch(87.1% 0.15 154.449);
  --sp-p-green-500: oklch(72.3% 0.219 149.579);
  --sp-p-green-600: oklch(62.7% 0.194 149.214);
  --sp-p-red-100: oklch(93.6% 0.032 17.717);
  --sp-p-red-700: oklch(50.5% 0.213 27.518);
  --sp-radius-btn: 0.75rem;
  --sp-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --sp-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --sp-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --sp-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --sp-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --sp-radius-small: 0.25rem;
  --sp-radius-medium: 0.375rem;
  --sp-radius-field: 0.5rem;
  --sp-radius-surface: 0.75rem;
  --sp-radius-large: 1rem;
  --sp-radius-xlarge: 1.5rem;
  --sp-radius-img: var(--radius-card);
  --sp-shadow-hover: 0 25px 50px -12px rgb(0 0 0 / .25);
  --sp-shadow-btn: 0 25px 50px -12px rgb(0 0 0 / .25);
  --sp-hover-scale: 1.05;
  --sp-btn-style: fill;
  --sp-btn-case: none;
  --sp-btn-border-w: 0;
  --sp-btn-weight: 600;
  --sp-btn-spacing: 0;
  --sp-btn-bg: var(--accent);
  --sp-btn-text: #fff;
  --sp-btn-bg-dunkel: #fff;
  --sp-btn-text-dunkel: var(--secondary);
  --sp-btn-rand: transparent;
  --sp-btn-rand-dunkel: transparent;
  --sp-label-case: none;
  --sp-label-spacing: 0;
  --sp-label-weight: 600;
}

body { background-color: var(--sp-page); }

/* ---- Navigation, Fuss, Kopf ----
   Ersetzt die Regel ".<theme> nav { background-color: rgba(primary, .7) }" aus dem head-Fragment: gleiche Spezifitaet (0,1,1),
   aber aus Token (color.nav-bg), ohne Wert gilt die Primaerfarbe des aktiven Themes zu 70 %. */
:root nav { background-color: var(--sp-nav-bg, color-mix(in srgb, var(--primary) 70%, transparent)); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.sp-nav-text { color: var(--sp-nav-text); }
.sp-footer-text { color: var(--sp-footer-text); }
.sp-kopf { background-color: var(--sp-kopf-bg, transparent); }
.sp-kopf__schleier--bild { opacity: var(--sp-veil-opacity); }

/* ---- Raster: wie Tailwind .container mit px-4 md:px-6, Breite ueberschreibbar durch space.container ---- */
.sp-container { width: 100%; margin-inline: auto; padding-inline: 1rem; }
@media (min-width: 40rem) { .sp-container { max-width: 40rem; } }
@media (min-width: 48rem) { .sp-container { max-width: 48rem; padding-inline: 1.5rem; } }
@media (min-width: 64rem) { .sp-container { max-width: 64rem; } }
@media (min-width: 80rem) { .sp-container { max-width: 80rem; } }
@media (min-width: 96rem) { .sp-container { max-width: 96rem; } }

/* ---- Akzent: data-akzent="primary|secondary|accent|1..10" setzt fuenf Werte, Klassen lesen sie ---- */
[data-akzent="primary"] { --sp-akz: var(--primary); --sp-akz-von: var(--primary); --sp-akz-bis: var(--accent); --sp-akz-text: var(--primary); --sp-akz-hell: color-mix(in oklab, var(--primary) 70%, transparent); }
[data-akzent="secondary"] { --sp-akz: var(--secondary); --sp-akz-von: var(--secondary); --sp-akz-bis: var(--primary); --sp-akz-text: var(--secondary); --sp-akz-hell: color-mix(in oklab, var(--secondary) 70%, transparent); }
[data-akzent="accent"] { --sp-akz: var(--accent); --sp-akz-von: var(--accent); --sp-akz-bis: var(--primary); --sp-akz-text: var(--accent); --sp-akz-hell: color-mix(in oklab, var(--accent) 70%, transparent); }
[data-akzent="1"] { --sp-akz: var(--sp-accent-1); --sp-akz-von: var(--sp-accent-1-von); --sp-akz-bis: var(--sp-accent-1-bis); --sp-akz-text: var(--sp-accent-1-text); --sp-akz-hell: var(--sp-accent-1-hell); }
[data-akzent="2"] { --sp-akz: var(--sp-accent-2); --sp-akz-von: var(--sp-accent-2-von); --sp-akz-bis: var(--sp-accent-2-bis); --sp-akz-text: var(--sp-accent-2-text); --sp-akz-hell: var(--sp-accent-2-hell); }
[data-akzent="3"] { --sp-akz: var(--sp-accent-3); --sp-akz-von: var(--sp-accent-3-von); --sp-akz-bis: var(--sp-accent-3-bis); --sp-akz-text: var(--sp-accent-3-text); --sp-akz-hell: var(--sp-accent-3-hell); }
[data-akzent="4"] { --sp-akz: var(--sp-accent-4); --sp-akz-von: var(--sp-accent-4-von); --sp-akz-bis: var(--sp-accent-4-bis); --sp-akz-text: var(--sp-accent-4-text); --sp-akz-hell: var(--sp-accent-4-hell); }
[data-akzent="5"] { --sp-akz: var(--sp-accent-5); --sp-akz-von: var(--sp-accent-5-von); --sp-akz-bis: var(--sp-accent-5-bis); --sp-akz-text: var(--sp-accent-5-text); --sp-akz-hell: var(--sp-accent-5-hell); }
[data-akzent="6"] { --sp-akz: var(--sp-accent-6); --sp-akz-von: var(--sp-accent-6-von); --sp-akz-bis: var(--sp-accent-6-bis); --sp-akz-text: var(--sp-accent-6-text); --sp-akz-hell: var(--sp-accent-6-hell); }
[data-akzent="7"] { --sp-akz: var(--sp-accent-7); --sp-akz-von: var(--sp-accent-7-von); --sp-akz-bis: var(--sp-accent-7-bis); --sp-akz-text: var(--sp-accent-7-text); --sp-akz-hell: var(--sp-accent-7-hell); }
[data-akzent="8"] { --sp-akz: var(--sp-accent-8); --sp-akz-von: var(--sp-accent-8-von); --sp-akz-bis: var(--sp-accent-8-bis); --sp-akz-text: var(--sp-accent-8-text); --sp-akz-hell: var(--sp-accent-8-hell); }
[data-akzent="9"] { --sp-akz: var(--sp-accent-9); --sp-akz-von: var(--sp-accent-9-von); --sp-akz-bis: var(--sp-accent-9-bis); --sp-akz-text: var(--sp-accent-9-text); --sp-akz-hell: var(--sp-accent-9-hell); }
[data-akzent="10"] { --sp-akz: var(--sp-accent-10); --sp-akz-von: var(--sp-accent-10-von); --sp-akz-bis: var(--sp-accent-10-bis); --sp-akz-text: var(--sp-accent-10-text); --sp-akz-hell: var(--sp-accent-10-hell); }

.sp-akz-verlauf { background-image: linear-gradient(to bottom right in oklab, var(--sp-akz-von), var(--sp-akz-bis)); }
.sp-akz-flaeche { background-color: var(--sp-akz); }
.sp-auf-akzent { color: var(--sp-on-accent); }
.sp-akz-farbe { color: var(--sp-akz); }
.sp-akz-text { color: var(--sp-akz-text); }
.sp-akz-hell { color: var(--sp-akz-hell); }
.sp-akz-schleier { background-image: linear-gradient(to bottom right in oklab, color-mix(in oklab, var(--sp-akz) 10%, transparent), color-mix(in oklab, var(--sp-akz-bis) 5%, transparent)); }
.sp-karte:hover .sp-akz-titel { color: var(--sp-akz); }

/* ---- Karte: Form und Hover aus Token ---- */
.sp-rund { border-radius: var(--radius-card); }
.sp-rund-innen { border-radius: var(--radius-inner); }
.sp-rund-bild { border-radius: var(--sp-radius-img); }
.sp-schatten { box-shadow: var(--shadow-card); }
@media (hover: hover) {
  .sp-hover:hover { scale: var(--sp-hover-scale); box-shadow: var(--sp-shadow-hover); }
}

/* ---- Knopf ---- */
.sp-btn {
  padding: 0.75rem 1.5rem;
  border-radius: var(--sp-radius-btn);
  border: var(--sp-btn-border-w) solid var(--sp-btn-rand);
  background-color: var(--sp-btn-bg); color: var(--sp-btn-text);
  font-family: var(--sp-btn-font, inherit); font-weight: var(--sp-btn-weight);
  text-transform: var(--sp-btn-case); letter-spacing: var(--sp-btn-spacing);
  text-decoration: none; cursor: pointer;
}
.sp-btn--schatten { box-shadow: var(--sp-shadow-btn); }
.sp-btn--gross { padding: 1rem 3rem; font-size: 1.125rem; line-height: 1.75rem; }
.sp-btn--kapsel { border-radius: var(--radius-pill); }
@media (hover: hover) {
  .sp-btn--hebt:hover { scale: var(--sp-hover-scale); box-shadow: var(--sp-shadow-hover); }
}
/* Auf dunklem Abschnitt kehrt sich der Knopf um; ein helles Schema weiter innen (Karte) kehrt ihn zurueck. */
[data-scheme="dark"] .sp-btn { background-color: var(--sp-btn-bg-dunkel); color: var(--sp-btn-text-dunkel); border-color: var(--sp-btn-rand-dunkel); }
[data-scheme="light"] .sp-btn, [data-scheme="plain"] .sp-btn { background-color: var(--sp-btn-bg); color: var(--sp-btn-text); border-color: var(--sp-btn-rand); }

/* ---- Gleis des Moduls "Schritte": Ruhe, gefuellter Teil, Kante ---- */
.sp-gleis-ruhe { background-color: var(--sp-border); }
.sp-gleis-aktiv { background-color: var(--primary); }
.sp-gleis-kante { border-color: var(--sp-border); }
[data-scheme="dark"] .sp-gleis-ruhe { background-color: rgb(255 255 255 / .25); }
[data-scheme="dark"] .sp-gleis-aktiv { background-color: #fff; }
[data-scheme="dark"] .sp-gleis-kante { border-color: rgb(255 255 255 / .25); }

/* ---- Kreis und Glanz: Dekor, das rund bleibt und der Themefarbe folgt (nicht Teil der Radius-Token) ---- */
.sp-kreis { border-radius: 9999px; }
.sp-blob { background-color: var(--secondary); }
.sp-glow-innen { box-shadow: inset 0 0 30px rgba(var(--primary-rgb), 0.2); }


/* ---- Schattenstufen (Token shadow.sm bis shadow.2xl), Varianten: -hover (Zeigen) und -gruppe (Zeigen auf .group) ---- */
.sp-sh-sm { box-shadow: var(--sp-shadow-sm); }
.sp-sh-md { box-shadow: var(--sp-shadow-md); }
.sp-sh-lg { box-shadow: var(--sp-shadow-lg); }
.sp-sh-xl { box-shadow: var(--sp-shadow-xl); }
.sp-sh-2xl { box-shadow: var(--sp-shadow-2xl); }
@media (hover: hover) {
  .sp-sh-sm-hover:hover { box-shadow: var(--sp-shadow-sm); }
  .group:hover .sp-sh-sm-gruppe { box-shadow: var(--sp-shadow-sm); }
  .sp-sh-md-hover:hover { box-shadow: var(--sp-shadow-md); }
  .group:hover .sp-sh-md-gruppe { box-shadow: var(--sp-shadow-md); }
  .sp-sh-lg-hover:hover { box-shadow: var(--sp-shadow-lg); }
  .group:hover .sp-sh-lg-gruppe { box-shadow: var(--sp-shadow-lg); }
  .sp-sh-xl-hover:hover { box-shadow: var(--sp-shadow-xl); }
  .group:hover .sp-sh-xl-gruppe { box-shadow: var(--sp-shadow-xl); }
  .sp-sh-2xl-hover:hover { box-shadow: var(--sp-shadow-2xl); }
  .group:hover .sp-sh-2xl-gruppe { box-shadow: var(--sp-shadow-2xl); }
}

/* ---- Dekor: weisse Flaechen und Punkte auf farbigem Grund. Deckkraft je Element in --sp-deko-a. Ein Preset blendet sie mit display:none aus. ---- */
.sp-deko { background-color: rgb(255 255 255 / var(--sp-deko-a, .1)); }

/* ---- Abschnittskopf (Fragment sektionskopf) ---- */
.sp-sektionskopf__untertitel,
.sp-kopf__kapitel {
  font-family: var(--sp-font-label, var(--font-display, var(--font-sans, ui-sans-serif, system-ui, sans-serif)));
  font-size: var(--sp-label-size, revert-layer);
  font-weight: var(--sp-label-weight);
  text-transform: var(--sp-label-case);
  letter-spacing: var(--sp-label-spacing);
}

/* ---- Layout "Kapitel": Seitenleiste und Kapitelkopf (Template Layout_Kapitel, Fragmente nav/seitenleiste und kopf/kapitel) ---- */
.sp-skip { position: absolute; left: -999px; top: 0; }
.sp-skip:focus { left: 1rem; top: 1rem; z-index: 100; padding: .5rem 1rem; background: var(--sp-page); color: var(--sp-text); }
.sp-layout-kapitel__haupt { min-width: 0; }
.sp-layout-kapitel__leiste { background-color: var(--sp-surface-sunken); border-bottom: 1px solid var(--sp-border); }
@media (min-width: 64rem) {
  .sp-layout-kapitel__raster { display: grid; grid-template-columns: var(--sp-seitenleiste, 16rem) minmax(0, 1fr); min-height: 100vh; }
  .sp-layout-kapitel__leiste { position: sticky; top: 0; align-self: start; height: 100vh; overflow-y: auto; border-bottom: 0; border-right: 1px solid var(--sp-border); }
}
/* nav.: Spezifitaet gleich der Themeregel ".<theme> nav" aus dem head-Fragment, die jede <nav> in der Primaerfarbe einfaerbt */
nav.sp-nav--seitenleiste { padding: 1.25rem 1.25rem 1.5rem; background-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.sp-nav__kopf { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.sp-nav__marke { font-family: var(--font-display, var(--font-sans, ui-sans-serif, system-ui, sans-serif)); font-weight: 700; font-size: 1.25rem; line-height: 1.2; color: var(--sp-text); text-decoration: none; }
.sp-nav__schalter { padding: .4rem .9rem; border: 1px solid var(--sp-border); border-radius: var(--sp-radius-btn); background-color: var(--sp-surface); color: var(--sp-text); cursor: pointer; }
@media (min-width: 64rem) { .sp-nav__schalter { display: none; } }
.sp-nav__liste { list-style: none; margin: 1.25rem 0 0; padding: 0; display: none; }
.sp-nav__liste.is-offen { display: block; }
@media (min-width: 64rem) { .sp-nav__liste { display: block; } }
.sp-nav__link { display: block; padding: .5rem .75rem; border-radius: var(--radius-inner); color: var(--sp-text-muted); text-decoration: none; }
.sp-nav__link:hover { color: var(--sp-text); background-color: var(--sp-surface); }
.sp-nav__link[aria-current] { color: var(--sp-text); font-weight: 600; background-color: var(--sp-surface); }
.sp-nav__unter { list-style: none; margin: .25rem 0 .5rem 1rem; padding: 0 0 0 .75rem; border-left: 1px solid var(--sp-border); }
.sp-kopf--kapitel { padding: clamp(2rem, 6vw, 4.5rem) clamp(1rem, 4vw, 3rem) 1.5rem; }
.sp-kopf__titel { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.5rem); line-height: 1.1; margin: 0; color: var(--sp-heading); }
.sp-kopf__text { max-width: 42rem; margin-top: 1rem; color: var(--sp-text-muted); }
.sp-kopf__kapitel { margin: 0 0 .5rem; color: var(--sp-text-muted); }

/* ---- Navigation OnePager (Fragment nav/onepager): aktiver Abschnitt, Sprungziel unter der festen Leiste ---- */
nav .nav-link.is-active { opacity: 1; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.onepager-section { scroll-margin-top: 80px; }