/* =====================================================================
   Kita-Bereich · Liquid Glass v2 (Apple-Vorgaben, Referenzbilder A–E)
   CD: kita/_konzept/06-cd-liquid-glass-v2.md (verbindlich)
   Aufbau: Tokens → Hintergrund → Inhaltsebene → Navigationsebene → Blasen → Barrierefreiheit → Druck
   ===================================================================== */

/* --- Kap. 5.1 --- */
/* ============ REGISTRIERTE EIGENSCHAFTEN (animierbar) ============ */
@property --lg-a      { syntax: '<number>';     inherits: true; initial-value: 0.62; }
@property --lg-mat    { syntax: '<number>';     inherits: true; initial-value: 1; }
@property --lg-angle  { syntax: '<angle>';      inherits: true; initial-value: 315deg; }
@property --lg-glow   { syntax: '<number>';     inherits: true; initial-value: 0; }
@property --lg-glow-r { syntax: '<percentage>'; inherits: true; initial-value: 0%; }
@property --tx        { syntax: '<length>';     inherits: true; initial-value: 0px; }

/* --- Kap. 5.2 --- */
:root,
html[data-theme="light"] {
  color-scheme: light;

  /* Tailwind-Kanäle (unverändert v1) */
  --c-surface: 246 243 250;
  --c-surface-container-lowest: 255 255 255;
  --c-surface-container-low: 251 250 255;
  --c-surface-container: 244 241 248;
  --c-surface-container-high: 236 232 242;
  --c-surface-container-highest: 226 221 234;
  --c-surface-bright: 255 255 255;
  --c-on-surface: 31 42 54;
  --c-on-surface-variant: 58 69 82;
  --c-primary: 107 33 168;
  --c-primary-container: 107 33 168;
  --c-secondary: 134 54 14;
  --c-tertiary: 71 82 96;
  --c-outline-variant: 120 110 135;
  --c-ink: 20 26 34;
  --c-slate-300: 31 42 54;
  --c-slate-400: 58 69 82;
  --c-slate-500: 58 69 82;
  --c-slate-600: 71 82 96;
  --c-slate-700: 120 110 135;

  /* Semantik (unverändert v1) */
  --page-bg: #f6f3fa;
  --ink: #141a22;
  --text: #1f2a36;
  --text-muted: #3a4552;
  --text-subtle: #475260;
  --highlight: #6b21a8;
  --highlight-gradient: linear-gradient(135deg, #7a2fc2 0%, #6b21a8 100%);
  --link: #6b21a8;
  --accent-orange: #ffb693;
  --accent-orange-text: #86360e;
  --accent-green: #a5d6a7;
  --accent-green-text: #245a29;
  --accent-text-mix: 34%;
  --accent-text-base: #1a1a2e;
  --focus-ring: #6b21a8;
  --focus-halo: rgba(107, 33, 168, .22);
  --mark-bg: rgba(201, 136, 250, .38);
  --scroll-thumb: rgba(58, 69, 82, .30);
  --ok-tint: rgba(46, 125, 50, .08);
  --ok-edge: rgba(46, 125, 50, .38);
  --warn-tint: rgba(191, 90, 30, .08);
  --warn-edge: rgba(191, 90, 30, .40);
  --warn-chip-bg: rgba(191, 90, 30, .10);
  --photo-filter: saturate(.92) contrast(.86) brightness(1.06);
  --veil:
    radial-gradient(60% 60% at 30% 20%, rgba(201, 136, 250, .10), transparent 60%),
    radial-gradient(130% 90% at 50% 45%, transparent 55%, rgba(236, 230, 245, .35) 100%),
    linear-gradient(180deg, rgba(246, 243, 250, .58) 0%, rgba(246, 243, 250, .22) 34%,
                            rgba(246, 243, 250, .22) 70%, rgba(246, 243, 250, .42) 100%);

  /* ---- Ebene 1 · Inhalt ---- */
  --accent-tint: 12%;
  --accent-edge: 45%;
  --surface-bg: rgba(251, 250, 255, .84);
  --surface-strong: rgba(251, 250, 255, .92);
  --surface-inset: rgba(255, 255, 255, .56);
  --surface-border: rgba(40, 30, 70, .10);
  --surface-shadow: 0 1px 2px rgba(30, 20, 60, .06), 0 10px 28px -14px rgba(30, 20, 60, .22);
  --surface-shadow-hover: 0 2px 4px rgba(30, 20, 60, .08), 0 18px 40px -16px rgba(30, 20, 60, .28);
  --scrim-bg: rgba(246, 243, 250, .80);
  --label-bg: rgba(255, 255, 255, .88);
  --input-bg: rgba(255, 255, 255, .92);
  --hairline: rgba(40, 30, 70, .12);
  --r-surface: 18px;
  --r-plate: 28px;

  /* ---- Ebene 2 · Navigation · Regular hell (Referenz B) ---- */
  --nav-tint-rgb: 255 255 255;
  --nav-a-rest: .62;
  --nav-a-deep: .68;
  --nav-a-busy: .84;
  --nav-blur: 20px;
  --nav-sat: 1.8;
  --nav-bright: 1.1;
  --nav-ink: #141a22;
  --nav-text: #1f2a36;
  --nav-muted: #3a4552;
  --kissen: rgba(255, 255, 255, .35);
  --on-glass-hover: rgba(255, 255, 255, .50);
  --on-glass-press: rgba(255, 255, 255, .72);
  --on-glass-sep: rgba(0, 0, 0, .08);
  --on-glass-round: rgba(255, 255, 255, .55);
  --seg-lens-fill: rgba(255, 255, 255, .78);
  --seg-lens-shadow: 0 1px 2px rgba(30, 20, 60, .10), 0 6px 14px -6px rgba(30, 20, 60, .22);
  --seg-active-ink: #141a22;
  --hl-strong: rgba(255, 255, 255, .95);
  --hl-soft: rgba(255, 255, 255, .60);
  --hl-side: rgba(255, 255, 255, .22);
  --rim-dark: rgba(20, 20, 40, .10);
  --fb-edge-dark: rgba(20, 20, 40, .08);
  --glow-color: rgba(255, 255, 255, .90);
  --rim-boost: 1.12;
  --nav-shadow-rest: 0 1px 2px rgba(30, 20, 60, .08), 0 8px 22px -10px rgba(30, 20, 60, .22);
  --nav-shadow-busy: 0 1px 3px rgba(30, 20, 60, .12), 0 14px 34px -10px rgba(30, 20, 60, .36);
  --veil-flat: rgba(246, 243, 250, .30);
  --check-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3.2L15 7' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --track-fill: rgba(20, 26, 34, .80);
  --track-rest: rgba(20, 26, 34, .18);

  /* ---- Ebene 3 · Overlays · Regular hell, dickes Material ---- */
  --bubble-tint-rgb: 255 255 255;
  --bubble-a: .64;
  --bubble-blur: 28px;
  --bubble-sat: 1.8;
  --bubble-bright: 1.1;
  --bubble-text: #141a22;
  --bubble-light: none;
  --bubble-angle: 225deg;
  --bubble-shadow: 0 2px 6px rgba(30, 20, 60, .10), 0 30px 70px -20px rgba(30, 20, 60, .42);

  /* ---- Tönung (zwei Stellen) ---- */
  --tint-rgb: 107 33 168;
  --tint-a: .82;
  --on-tint: #ffffff;
  --tint-focus: rgba(107, 33, 168, .10);
  --tint-ring: rgba(107, 33, 168, .38);

  /* ---- Scroll-Edge ---- */
  --edge-top: linear-gradient(180deg, rgba(246, 243, 250, .72) 0%, rgba(246, 243, 250, .42) 55%, rgba(246, 243, 250, 0) 100%);
  --edge-bottom: linear-gradient(0deg, rgba(246, 243, 250, .72) 0%, rgba(246, 243, 250, 0) 100%);
  --edge-blur: 8px;

  /* ---- Kugel-Linse (Referenz E) ---- */
  --orb-fill: rgba(255, 255, 255, .30);
  --orb-bloom: rgba(255, 255, 255, .85);
  --orb-bloom-o: .55;
  --orb-caustic: rgba(255, 255, 255, .55);
  --orb-fringe-a: rgba(110, 100, 255, .45);
  --orb-fringe-b: rgba(255, 205, 80, .45);

  /* ---- Bewegung ---- */
  --lg-spring: linear(0, .063 2.4%, .249 5.6%, .52 9.6%, .769 14%, .94 18.6%, 1.03 23.6%, 1.056 28.2%, 1.047 33%, 1.019 40%, .998 50%, .994 58%, 1.001 75%, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --text-shadow-free: none;
}
@supports not (transition-timing-function: linear(0, 1)) {
  :root, html[data-theme="light"], html[data-theme="dark"] { --lg-spring: cubic-bezier(.34, 1.36, .64, 1); }
}

/* --- Kap. 5.3 --- */
@media screen {
  html[data-theme="dark"] {
    color-scheme: dark;

    /* Tailwind-Kanäle und Semantik (unverändert v1) */
    --c-surface: 11 20 28;
    --c-surface-container-lowest: 6 15 23;
    --c-surface-container-low: 20 28 37;
    --c-surface-container: 24 32 41;
    --c-surface-container-high: 34 43 51;
    --c-surface-container-highest: 45 54 62;
    --c-surface-bright: 49 58 67;
    --c-on-surface: 218 227 239;
    --c-on-surface-variant: 207 194 211;
    --c-primary: 225 182 255;
    --c-primary-container: 201 136 250;
    --c-secondary: 255 182 147;
    --c-tertiary: 190 199 211;
    --c-outline-variant: 76 68 81;
    --c-ink: 255 255 255;
    --c-slate-300: 218 227 239;
    --c-slate-400: 190 199 211;
    --c-slate-500: 190 199 211;
    --c-slate-600: 190 199 211;
    --c-slate-700: 76 68 81;
    --page-bg: #0b141c;
    --ink: #ffffff;
    --text: #dae3ef;
    --text-muted: #cfc2d3;
    --text-subtle: #bec7d3;
    --highlight: #c988fa;
    --highlight-gradient: linear-gradient(135deg, #e1b6ff 0%, #c988fa 100%);
    --link: #e1b6ff;
    --accent-orange-text: #ffb693;
    --accent-green-text: #a5d6a7;
    --accent-text-mix: 100%;
    --focus-ring: #c988fa;
    --focus-halo: rgba(201, 136, 250, .30);
    --mark-bg: rgba(201, 136, 250, .28);
    --scroll-thumb: rgba(207, 194, 211, .20);
    --ok-tint: rgba(165, 214, 167, .06);
    --ok-edge: rgba(165, 214, 167, .25);
    --warn-tint: rgba(255, 182, 147, .06);
    --warn-edge: rgba(255, 182, 147, .30);
    --warn-chip-bg: rgba(255, 182, 147, .12);
    --photo-filter: saturate(.85) brightness(.5);
    --veil:
      radial-gradient(60% 60% at 30% 20%, rgba(225, 182, 255, .10), transparent 60%),
      radial-gradient(130% 90% at 50% 45%, transparent 50%, rgba(6, 10, 16, .55) 100%),
      linear-gradient(180deg, rgba(11, 20, 28, .72) 0%, rgba(11, 20, 28, .38) 34%,
                              rgba(11, 20, 28, .38) 70%, rgba(11, 20, 28, .62) 100%);

    /* ---- Ebene 1 · Inhalt ---- */
    --accent-tint: 10%;
    --accent-edge: 30%;
    --surface-bg: rgba(16, 26, 36, .76);
    --surface-strong: rgba(13, 22, 32, .86);
    --surface-inset: rgba(255, 255, 255, .04);
    --surface-border: rgba(207, 194, 211, .12);
    --surface-shadow: 0 1px 2px rgba(0, 0, 0, .30), 0 12px 30px -14px rgba(0, 0, 0, .55);
    --surface-shadow-hover: 0 2px 4px rgba(0, 0, 0, .34), 0 20px 44px -16px rgba(0, 0, 0, .62);
    --scrim-bg: rgba(11, 20, 28, .60);
    --label-bg: rgba(16, 26, 36, .80);
    --input-bg: rgba(20, 28, 37, .86);
    --hairline: rgba(207, 194, 211, .12);

    /* ---- Ebene 2 · Navigation · Clear dunkel (Referenz D) ---- */
    --nav-tint-rgb: 0 0 0;
    --nav-a-rest: .22;
    --nav-a-deep: .34;
    --nav-a-busy: .56;
    --nav-blur: 12px;
    --nav-sat: 1.7;
    --nav-bright: 1.15;
    --nav-ink: #ffffff;
    --nav-text: #dae3ef;
    --nav-muted: #cfc2d3;
    --kissen: rgba(255, 255, 255, .06);
    --on-glass-hover: rgba(255, 255, 255, .12);
    --on-glass-press: rgba(255, 255, 255, .18);
    --on-glass-sep: rgba(255, 255, 255, .12);
    --on-glass-round: rgba(0, 0, 0, .35);
    --seg-lens-fill: rgba(255, 255, 255, .16);
    --seg-lens-shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 6px 14px -6px rgba(0, 0, 0, .50);
    --seg-active-ink: #ffffff;
    --hl-strong: rgba(255, 255, 255, .60);
    --hl-soft: rgba(255, 255, 255, .38);
    --hl-side: rgba(255, 255, 255, .08);
    --rim-dark: rgba(0, 0, 0, .35);
    --fb-edge-dark: rgba(0, 0, 0, .28);
    --glow-color: rgba(255, 240, 220, .55);
    --rim-boost: 1.22;
    --nav-shadow-rest: 0 1px 2px rgba(0, 0, 0, .25), 0 8px 20px -10px rgba(0, 0, 0, .45);
    --nav-shadow-busy: 0 1px 3px rgba(0, 0, 0, .35), 0 14px 34px -10px rgba(0, 0, 0, .65);
    --veil-flat: rgba(11, 20, 28, .45);
    --check-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3.2L15 7' fill='none' stroke='%23141a22' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --track-fill: rgba(255, 255, 255, .85);
    --track-rest: rgba(255, 255, 255, .30);

    /* ---- Ebene 3 · Overlays · Regular dunkel, rauchig (Referenz A) ---- */
    --bubble-tint-rgb: 28 28 30;
    --bubble-a: .80;
    --bubble-blur: 36px;
    --bubble-sat: 1.5;
    --bubble-bright: .95;
    --bubble-text: #ffffff;
    --bubble-light: linear-gradient(180deg, rgba(255, 255, 255, .07), transparent 40%);
    --bubble-angle: 315deg;
    --bubble-shadow: 0 2px 8px rgba(0, 0, 0, .35), 0 34px 80px -20px rgba(0, 0, 0, .75);

    /* ---- Tönung ---- */
    --tint-rgb: 122 47 194;
    --tint-a: .82;
    --on-tint: #ffffff;
    --tint-focus: rgba(201, 136, 250, .16);
    --tint-ring: rgba(225, 182, 255, .45);

    /* ---- Scroll-Edge: Abdunklung ---- */
    --edge-top: linear-gradient(180deg, rgba(6, 10, 16, .60) 0%, rgba(6, 10, 16, .32) 55%, rgba(6, 10, 16, 0) 100%);
    --edge-bottom: linear-gradient(0deg, rgba(6, 10, 16, .60) 0%, rgba(6, 10, 16, 0) 100%);
    --edge-blur: 0px;

    /* ---- Kugel-Linse ---- */
    --orb-fill: rgba(255, 255, 255, .08);
    --orb-bloom: rgba(255, 250, 235, .95);
    --orb-bloom-o: .85;
    --orb-caustic: rgba(255, 245, 225, .60);

    --text-shadow-free: 0 1px 2px rgba(0, 0, 0, .35);
  }
}

/* Mobil: Blur-Radien */
@media (max-width: 767px) {
  :root, html[data-theme="light"] { --nav-blur: 16px; --bubble-blur: 24px; }
  html[data-theme="dark"] { --nav-blur: 10px; --bubble-blur: 30px; }
}

html { background: var(--page-bg); color: var(--text); }
body, body.ambient-violet { background: transparent; color: var(--text); }

/* --- Kap. 3 · Hintergrund (v1) --- */
/* ============ HINTERGRUND-FOTO ============ */
.kita-bg {
  position: fixed; top: 0; left: 0; right: 0;
  height: 100vh; height: 100lvh;
  z-index: -1; overflow: hidden; pointer-events: none;
  background: #958983;
}
.kita-bg::before,
.kita-bg__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  object-position: var(--bg-pos);
  filter: var(--photo-filter);
  transition: filter .6s cubic-bezier(.2,.8,.2,1), opacity .5s ease;
}
.kita-bg::before {
  content: "";
  background: url("data:image/webp;base64,UklGRvAAAABXRUJQVlA4IOQAAADwBQCdASogABIAPu1gqE2ppaOiMAgBMB2JQBihbInGVq8d1yspkp1RV8sNBpEVbsU0fK/pNTv0AAD+vBrNjmd2JApLO29dxN2vRxWC07z0zsmHGQSGIl1kUkuKrnf7fD9wCwzsbTnUmYvkXZM1Wm15xJqMbWUkr6PpZyGzJQh9HhOJXWsYB3CbhKWma9bgURNOTP9Qr9BTIJC8jZYIcRKAA7qd07MmLAx5qIRafeXERDhxvoC7ZiW7ZPbLK5srQnyqFYKrnZL4/o5jwtmU5ZZKcO3nuKpuU1jvaRoLz/IgKNOoAAA=") var(--bg-pos) / cover no-repeat;
  filter: var(--photo-filter) blur(24px);
  transform: scale(1.08);
}
.kita-bg__img { opacity: 0; }
.kita-bg__img.is-loaded { opacity: 1; }
.kita-bg::after {
  content: ""; position: absolute; inset: 0;
  background: var(--veil);
}
:root { --bg-pos: 36% 50%; }
@media (min-width: 640px) and (orientation: portrait) { :root { --bg-pos: 35% 50%; } }
@media (orientation: landscape) { :root { --bg-pos: 42% 55%; } }
@media (min-width: 1024px) and (orientation: landscape) { :root { --bg-pos: 40% 58%; } }


/* --- Kap. 6.1 --- */
/* ============ BASIS ============ */
.font-headline { font-family: "Manrope", sans-serif; letter-spacing: -0.02em; }
.font-label    { font-family: "Space Grotesk", sans-serif; letter-spacing: 0.04em; }
:where(h1, h2, h3) { color: var(--ink); }
.monolith-gradient { background-image: var(--highlight-gradient); }
.text-primary-container { color: var(--highlight); }
.prose-kb strong { color: var(--ink); font-weight: 600; }
.prose-kb a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
mark { background: var(--mark-bg); color: var(--ink); border-radius: 3px; padding: 0 2px; }
.scroll-x::-webkit-scrollbar-thumb { background: var(--scroll-thumb); }
.arrow-accent svg path { stroke: var(--text-muted); opacity: .45; }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; box-shadow: 0 0 0 6px var(--focus-halo); }

/* Typografie (v1 Kap. 7) */
html[data-theme="light"] .font-light { font-weight: 400; }
html[data-theme="dark"]  .font-light { font-weight: 350; }
.text-\[10px\] { font-size: 11px !important; font-weight: 500; }
html[data-theme="light"] .text-xs { font-weight: 450; }
html[data-theme="dark"] body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* --- Kap. 6.2 --- */
/* ============ INHALTSFLÄCHE ============ */
.glass-card,
.lg-surface {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--text);
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--accent, #e1b6ff) var(--accent-tint), transparent) 0%, transparent 60%),
    var(--surface-bg);
  border: 1px solid color-mix(in srgb, var(--accent, #e1b6ff) var(--accent-edge), var(--surface-border));
  border-radius: var(--r-surface);
  box-shadow: var(--surface-shadow);
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), border-color .25s ease;
}
/* Akzent-Oberkante in Originalfarbe (beide Modi) */
.glass-card::before,
.lg-surface::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 1;
  background: var(--accent, #e1b6ff); opacity: .9;
}
:is(a, button).glass-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent, #e1b6ff) calc(var(--accent-edge) + 20%), var(--surface-border));
  box-shadow: var(--surface-shadow-hover);
}
:is(a, button).glass-card:active { transform: scale(.99); transition-duration: .1s; }
.glass-card.small { padding: 1.25rem 1.4rem; }

.kicker-accent { color: color-mix(in oklab, var(--accent, #e1b6ff) var(--accent-text-mix), var(--accent-text-base)); }
.swatch {
  width: 8px; height: 8px; border-radius: 999px; display: inline-block; flex-shrink: 0;
  background: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent), inset 0 0 0 1px rgba(20, 26, 34, .12);
}

/* --- Kap. 6.3 --- */
/* ============ LESEBAHN ============ */
.lg-plate {
  background: var(--surface-strong);
  border-radius: var(--r-plate);
  box-shadow: inset 0 0 0 1px var(--surface-border), var(--surface-shadow);
  padding: clamp(1.25rem, 3vw, 2.5rem);
  /* Flächen in der Lesebahn: Innen-Tönung, konzentrischer Radius */
  --surface-bg: var(--surface-inset);
  --surface-strong: var(--surface-inset);
  --surface-shadow: none;
  --surface-shadow-hover: 0 1px 2px rgba(0, 0, 0, .06);
  --r-surface: max(12px, calc(var(--r-plate) - clamp(1.25rem, 3vw, 2.5rem) + 8px));
}
@media screen and (max-width: 767px) {
  .lg-plate { --r-plate: 22px; margin-inline: -.75rem; padding-inline: .75rem; }
}
.lg-plate :is(.rounded-xl) { border-radius: var(--r-surface); }

/* --- Kap. 6.4 --- */
/* a) Rahmenlinie */
.ghost-border { box-shadow: inset 0 0 0 1px var(--hairline); }

/* b) Info-Boxen mit Fläche */
.ghost-border[class*="bg-surface-container"],
details.ghost-border,
article.ghost-border {
  background: var(--surface-strong);
  box-shadow: inset 0 0 0 1px var(--surface-border), var(--surface-shadow);
}
.ghost-border.law-diff { box-shadow: inset 3px 0 0 var(--accent-orange), inset 0 0 0 1px var(--surface-border), var(--surface-shadow); }

/* c) Buttons und Links im Inhalt (Etikett, flach) */
:is(a, button).ghost-border:not([class*="bg-surface-container"]) {
  background: var(--label-bg);
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--surface-border);
  transition: background-color .2s ease, color .2s ease, transform .2s var(--ease-out);
}
:is(a, button).ghost-border:not([class*="bg-surface-container"]):hover { background: var(--surface-strong); color: var(--ink); }
:is(a, button).ghost-border:active { transform: scale(.98); }

/* d) Formularfelder im Inhalt */
input.ghost-border, select.ghost-border,
input[type="number"][class*="bg-surface-container"], select[class*="bg-surface-container"],
#gesetz-filter {
  background-color: var(--input-bg) !important;
  color: var(--text);
  box-shadow: inset 0 1px 2px rgba(20, 26, 34, .08), inset 0 0 0 1px var(--surface-border);
}
input::placeholder { color: var(--text-subtle); opacity: 1; }

/* Vorschlags-Chips unter der Hero-Suche */
#hero-suggest .chip {
  background: var(--label-bg);
  color: var(--text-muted);
  box-shadow: inset 0 0 0 1px var(--surface-border);
  white-space: nowrap;
}
#hero-suggest .chip:hover { background: var(--surface-strong); color: var(--ink); }
.horizon-filter-btn.active { background: var(--label-bg); box-shadow: inset 0 0 0 1px var(--hairline); }
#view-home .bg-secondary { background: var(--accent-orange); }
@media (pointer: coarse) { #hero-suggest .chip { min-height: 44px; } }

/* --- Kap. 6.5 --- */
[style*="rgba(165,214,167,.06)"] {
  background: linear-gradient(var(--ok-tint), var(--ok-tint)), var(--surface-strong) !important;
  box-shadow: inset 0 0 0 1px var(--ok-edge) !important;
}
[style*="rgba(255,182,147,.06)"],
[style*="rgba(255,182,147,.08)"] {
  background: linear-gradient(var(--warn-tint), var(--warn-tint)), var(--surface-strong) !important;
  box-shadow: inset 0 0 0 1px var(--warn-edge) !important;
}
[style*="rgba(255,182,147,.08)"] { box-shadow: inset 4px 0 0 var(--accent-orange), inset 0 0 0 1px var(--warn-edge) !important; }
[style*="rgba(255,182,147,.12)"],
[style*="rgba(255,182,147,.14)"] {
  background: var(--warn-chip-bg) !important;
  box-shadow: inset 0 0 0 1px var(--warn-edge) !important;
}
/* Wer-hilft-weiter: farbige 3-px-Kante bleibt, Fläche aus Token */
#wer-list > .ghost-border { background: var(--surface-strong); }

[style*="color:#a5d6a7"] { color: var(--accent-green-text) !important; }
[style*="color:#ffb693"] { color: var(--accent-orange-text) !important; }
[style*="color:#e1b6ff"] { color: var(--link) !important; }

/* Themen-, Rollen-, Cluster- und Prioritätsfarben als Text: hell gedeckt (v1 3.4) */
@media screen {
  html[data-theme="light"] [style*="color:#80cbc4"], html[data-theme="light"] [style*="color: rgb(128, 203, 196)"] { color: #3b505d !important; }
  html[data-theme="light"] [style*="color:#81d4fa"], html[data-theme="light"] [style*="color: rgb(129, 212, 250)"] { color: #3c536d !important; }
  html[data-theme="light"] [style*="color:#90caf9"], html[data-theme="light"] [style*="color: rgb(144, 202, 249)"] { color: #3f506c !important; }
  html[data-theme="light"] [style*="color: rgb(165, 214, 167)"] { color: #445456 !important; }
  html[data-theme="light"] [style*="color:#b39ddb"], html[data-theme="light"] [style*="color: rgb(179, 157, 219)"] { color: #494264 !important; }
  html[data-theme="light"] [style*="color:#bec7d3"], html[data-theme="light"] [style*="color: rgb(190, 199, 211)"] { color: #4c4f62 !important; }
  html[data-theme="light"] [style*="color:#c988fa"], html[data-theme="light"] [style*="color: rgb(201, 136, 250)"] { color: #503d6d !important; }
  html[data-theme="light"] [style*="color:#ce93d8"], html[data-theme="light"] [style*="color: rgb(206, 147, 216)"] { color: #514063 !important; }
  html[data-theme="light"] [style*="color:#f8bbd0"], html[data-theme="light"] [style*="color: rgb(248, 187, 208)"] { color: #5d4c61 !important; }
  html[data-theme="light"] [style*="color:#fb923c"], html[data-theme="light"] [style*="color: rgb(251, 146, 60)"] { color: #5e423d !important; }
  html[data-theme="light"] [style*="color:#fbbf24"], html[data-theme="light"] [style*="color: rgb(251, 191, 36)"] { color: #5d4e3e !important; }
  html[data-theme="light"] [style*="color:#ffab91"], html[data-theme="light"] [style*="color: rgb(255, 171, 145)"] { color: #5f4850 !important; }
  html[data-theme="light"] [style*="color:#ffd166"], html[data-theme="light"] [style*="color: rgb(255, 209, 102)"] { color: #5e5348 !important; }
}

/* --- Kap. 6.6 --- */
/* ============ LESEGRUND ============ */
.lg-halo { position: relative; isolation: isolate; }
.lg-halo::before {
  content: ""; position: absolute; inset: -2rem 0; z-index: -1; pointer-events: none;
  border-radius: 48px;
  background: var(--scrim-bg);
  -webkit-mask:
    linear-gradient(90deg, transparent, #000 1.25rem, #000 calc(100% - 1.25rem), transparent),
    linear-gradient(180deg, transparent, #000 2rem, #000 calc(100% - 2rem), transparent);
  -webkit-mask-composite: source-in;
          mask:
    linear-gradient(90deg, transparent, #000 1.25rem, #000 calc(100% - 1.25rem), transparent),
    linear-gradient(180deg, transparent, #000 2rem, #000 calc(100% - 2rem), transparent);
          mask-composite: intersect;
}
.lg-halo :is(h1, h2, p) { text-shadow: var(--text-shadow-free); }

/* --- Kap. 6.7 --- */
/* ============ PFAD-ZEILE & ETIKETTEN ============ */
.lg-path { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.lg-label,
#breadcrumb:not(:empty),
#rolle-list > section > div:first-child,
#overview-grid > section > div:first-child,
#overview-grid > section > .mb-8 > p:first-child,
#cluster-solutions > div > div:first-child {
  display: inline-flex; align-items: center; gap: .6rem; width: fit-content; max-width: 100%;
  background: var(--label-bg);
  padding: .4rem .95rem; border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--surface-border);
}
#rolle-list > section > div:first-child .flex-1.h-px,
#cluster-solutions > div > div:first-child .flex-1.h-px { display: none; }
#rolle-list > section > div:first-child,
#overview-grid > section > div:first-child,
#cluster-solutions > div > div:first-child { display: flex; }
.lg-path:has(#breadcrumb:empty):not(:has(.lg-label)) { display: none; }

/* --- Kap. 6.8 --- */
footer.no-print {
  margin-top: 4rem;
  background: var(--surface-strong);
  border-top: 1px solid var(--hairline) !important;
}
footer.no-print img[src*="NxtLvlOrg.png"] { opacity: .7 !important; }
html[data-theme="light"] footer.no-print img[src*="NxtLvlOrg.png"] { filter: invert(1) hue-rotate(180deg) brightness(.35); }

/* --- Kap. 6.9 --- */
.view { display: none; }
/* backwards statt both: beendete Animationen halten sonst Compositing-Ebenen fest; lange Seiten (Frage, Gesetz) verloren dadurch im Browser-Test ganze Bereiche beim Scrollen */
.view.active { display: block; animation: lg-view-in .45s var(--ease-out) backwards; }
@keyframes lg-view-in { from { translate: 0 8px; } to { translate: 0 0; } }
.view.active :is(.glass-card, .lg-plate, .ghost-border, .lg-halo > :not(form):not(:has(.lg-glass))):not(:has(.lg-glass)) {
  animation: lg-fade-in .45s ease backwards;
}
@keyframes lg-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* --- Kap. 7.2 --- */
/* ============ GLAS · NAVIGATIONSEBENE ============ */
.lg-glass {
  --lg-a: var(--nav-a-rest);
  --lg-r: 999px;
  position: relative;
  isolation: isolate;
  border-radius: var(--lg-r);
  color: var(--nav-text);
  background-color: rgb(var(--nav-tint-rgb) / var(--lg-a));
  background-image: radial-gradient(140% 100% at 18% 0%, var(--kissen), transparent 60%);
  -webkit-backdrop-filter: blur(var(--nav-blur)) saturate(var(--nav-sat)) brightness(var(--nav-bright));
          backdrop-filter: var(--lg-lens, ) blur(var(--nav-blur)) saturate(var(--nav-sat)) brightness(var(--nav-bright));
  box-shadow:
    inset 0 0 0 .5px var(--rim-dark),
    inset 0 -10px 18px -14px var(--fb-edge-dark),
    var(--lg-shadow, var(--nav-shadow-rest));
  transition: --lg-a .45s ease, box-shadow .45s ease, opacity .3s ease, scale .5s var(--lg-spring);
}
:where(.lg-glass > *) { position: relative; z-index: 3; }
.lg-glass :focus-visible { outline-offset: -2px; box-shadow: none; }

/* Adaptive Tönung und Schatten (Kap. 9.6) */
:is(.lg-header, .lg-dock)[data-lg-tone="deep"] .lg-glass { --lg-a: var(--nav-a-deep); }
:is(.lg-header, .lg-dock)[data-lg-over="content"] .lg-glass {
  --lg-a: var(--nav-a-busy);
  --lg-shadow: var(--nav-shadow-busy);
}

/* Fokusverlust: Glas tritt zurück */
.lg-header[data-lg-recede] .lg-header__row > .lg-glass:not([aria-expanded="true"]) { --lg-hl-o: .4; scale: .98; }
html[data-lg-idle] .lg-glass { --lg-hl-o: .4; --lg-shadow: var(--nav-shadow-rest); }

/* --- Kap. 7.3 --- */
/* Randlicht: diagonal (Referenz D), breite Elemente mit breiten Bändern (Referenz C) */
.lg-glass::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from var(--lg-angle),
    var(--hl-strong) 0deg,
    var(--hl-side) var(--lg-spread, 50deg),
    var(--hl-side) calc(180deg - var(--lg-spread, 50deg)),
    var(--hl-soft) 180deg,
    var(--hl-side) calc(180deg + var(--lg-spread, 50deg)),
    var(--hl-side) calc(360deg - var(--lg-spread, 50deg)),
    var(--hl-strong) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: var(--lg-hl-o, 1);
  transition: --lg-angle .9s var(--lg-spring), opacity .4s ease;
}

/* Innenleuchten ab Berührungspunkt */
.lg-glass::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), var(--glow-color) 0%, transparent var(--lg-glow-r));
  opacity: var(--lg-glow);
  mix-blend-mode: plus-lighter;
}
@supports not (mix-blend-mode: plus-lighter) { .lg-glass::after { mix-blend-mode: screen; } }

/* --- Kap. 7.4 --- */
/* Fallback: Randlicht-Verläufe deuten die Brechung an */
html:not(.lg-lens) .lg-glass {
  box-shadow:
    inset 0 0 0 .5px var(--rim-dark),
    inset 0 1px 1px -.5px var(--hl-strong),
    inset 0 -1px 1px -.5px var(--hl-soft),
    inset 8px 8px 14px -10px var(--hl-soft),
    inset -8px -8px 14px -10px var(--fb-edge-dark),
    var(--lg-shadow, var(--nav-shadow-rest));
}

/* Fallback: deckungsgleiche, vergrößerte Foto-Kopie (Header und Dock) */
.lg-refract {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  border-radius: inherit; overflow: hidden;
}
.lg-refract::before {
  content: ""; position: absolute;
  left: var(--rx); top: var(--ry); width: var(--rw); height: var(--rh);
  background: var(--lg-photo) var(--bg-pos) / cover no-repeat;
  filter: var(--photo-filter) blur(var(--nav-blur)) saturate(var(--nav-sat)) brightness(var(--nav-bright));
  transform-origin: var(--rox) var(--roy);
  transform: scale(var(--lg-zoom, 1.06));
}
.lg-refract::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(140% 100% at 18% 0%, var(--kissen), transparent 60%),
    linear-gradient(rgb(var(--nav-tint-rgb) / var(--lg-a)) 0 0),
    linear-gradient(var(--veil-flat) 0 0);
}
/* Kapseln: Kopie nur im Randring (Breite = Randzone) */
.lg-refract--rim {
  padding: var(--lg-bezel, 16px);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.lg-glass:has(> .lg-refract:not(.lg-refract--rim)) { background-color: transparent; background-image: none; }
[data-lg-inbubble] .lg-refract { display: none; }

/* --- Kap. 7.7 --- */
/* ============ HEADER ============ */
.lg-header {
  position: sticky; top: 0; z-index: 40;
  padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 0 max(12px, env(safe-area-inset-left));
}
@media (min-width: 768px) {
  .lg-header { padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left)); }
}
.lg-header__row {
  --lg-h: 52px;
  position: relative; z-index: 1;
  max-width: 1600px; margin-inline: auto;
  height: var(--lg-h);
  display: flex; align-items: center; gap: 8px;
}
.lg-header__row > *, .lg-menu__inner > .lg-seg { flex: none; }
.lg-spacer { flex: 1 1 auto !important; min-width: 8px; }
.lg-header:is([data-lg-stage="kompakt"], [data-lg-stage="schmal"]) .lg-logo { margin-right: auto; }   /* rechte Gruppe */

.lg-logo { --lg-r: 26px; height: var(--lg-h); display: inline-flex; align-items: center; padding-inline: 14px; }
.lg-logo img { width: 92px; height: auto; }
html[data-theme="light"] .lg-logo img { filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .6)); }

.lg-menu, .lg-menu__inner { display: contents; }
.lg-header:is([data-lg-stage="voll"], [data-lg-stage="mittel"]) .lg-menu { flex: 1 1 auto; }

.lg-menu-btn { --lg-r: 26px; display: none; width: var(--lg-h); height: var(--lg-h); place-items: center; color: var(--nav-ink); }
.lg-menu-btn svg { width: 22px; height: 22px; }
.lg-header:is([data-lg-stage="kompakt"], [data-lg-stage="schmal"]) .lg-menu-btn { display: grid; }
.lg-header:is([data-lg-stage="kompakt"], [data-lg-stage="schmal"]) .lg-menu:not(:popover-open):not([data-open]) { display: none; }
.lg-header[data-lg-stage="schmal"] .lg-role { display: none; }

@media (max-width: 767px) {
  .lg-header__row { --lg-h: 48px; gap: 6px; }
  .lg-logo { --lg-r: 24px; padding-inline: 12px; }
  .lg-logo img { width: 76px; }
}
@media (max-width: 359px) { .lg-logo img { width: 64px; } }

/* --- Kap. 7.8 --- */
/* ============ SEGMENT-KAPSEL ============ */
.lg-seg {
  --lg-r: 26px;
  display: inline-flex; align-items: center; gap: 2px;
  height: var(--lg-h, 52px); padding: 4px;
}
.lg-seg__lens {
  position: absolute !important; z-index: 1 !important; top: 0; left: 0;
  width: var(--seg-w, 0px); height: var(--seg-h, 44px);
  transform: translate(var(--seg-x, 0px), var(--seg-y, 4px));
  border-radius: calc(var(--lg-r) - 4px);
  background: var(--seg-lens-fill);
  box-shadow: inset 0 1px 0 var(--hl-strong), inset 0 0 0 .5px var(--rim-dark), var(--seg-lens-shadow);
  opacity: var(--seg-o, 0);
  pointer-events: none;
  transition: transform .55s var(--lg-spring), width .55s var(--lg-spring), height .55s var(--lg-spring), opacity .2s ease;
}
.lg-seg__lens.is-moving { animation: lg-lift .55s var(--ease-out); }
@keyframes lg-lift {
  0%   { scale: 1 1; }
  30%  { scale: 1.08 .86; }
  65%  { scale: .98 1.04; }
  100% { scale: 1 1; }
}
.lg-seg--tinted .lg-seg__lens {
  background: rgb(var(--tint-rgb) / var(--tint-a));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 0 0 .5px rgba(0, 0, 0, .15), var(--seg-lens-shadow);
}

.lg-seg :is(.lg-seg__item, .chip, .role-tab, .fassung-btn, .overview-filter-btn) {
  position: relative; z-index: 2;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 16px; margin: 0;
  border: 0; border-radius: 22px;
  background: transparent !important;
  box-shadow: none !important;
  font-family: "Space Grotesk", sans-serif; font-size: 12px; font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
  color: var(--nav-text) !important;
  transition: background-color .2s ease, color .25s ease;
}
.lg-seg :is(.lg-seg__item, .chip, .role-tab, .fassung-btn, .overview-filter-btn) svg { width: 18px; height: 18px; flex: none; }
.lg-seg :is(.lg-seg__item, .chip, .role-tab, .fassung-btn, .overview-filter-btn):hover { background: var(--on-glass-hover) !important; }
.lg-seg :is(.lg-seg__item, .chip, .role-tab, .fassung-btn, .overview-filter-btn):active { background: var(--on-glass-press) !important; }
.lg-seg :is([aria-current="page"], .active, [aria-selected="true"], .bg-surface-bright, .is-current) {
  background: transparent !important;
  color: var(--seg-active-ink) !important;
}
.lg-seg--tinted [aria-current="page"] { color: var(--on-tint) !important; }
.lg-seg--tinted [aria-current="page"] [style*="rgba(255,182,147"] { background: rgba(255, 255, 255, .22) !important; color: #fff !important; box-shadow: none !important; }

/* Varianten in Views */
.lg-seg--center { display: flex; width: fit-content; max-width: 100%; margin-inline: auto; flex-wrap: wrap; height: auto; }
.lg-seg--scroll { display: flex; width: fit-content; max-width: 100%; margin-inline: auto; padding: 0; overflow: hidden; }
.lg-seg__scroll {
  display: flex; align-items: center; padding: 4px; max-width: 100%;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  -webkit-mask: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
          mask: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
}
.lg-seg__scroll::-webkit-scrollbar { display: none; }
.lg-seg--scroll :is(#rolle-filter, #frage-roles) { display: flex; gap: 2px; padding: 0 !important; justify-content: flex-start !important; }
.lg-seg:has(#frage-roles:empty) { display: none; }

/* Umschalter-Eintrag „nur geänderte Paragrafen" */
.lg-seg__toggle { cursor: pointer; }
.lg-check {
  appearance: none; -webkit-appearance: none;
  width: 20px; height: 20px; margin: 0; border-radius: 6px;
  background: var(--on-glass-hover) center / 16px no-repeat;
  box-shadow: inset 0 0 0 1.5px var(--nav-muted);
}
.lg-check:checked { background-color: var(--nav-ink); background-image: var(--check-img); box-shadow: none; }

/* --- Kap. 7.9 --- */
/* ============ SUCHE ============ */
.lg-search {
  --lg-r: 26px;
  --search-w: 240px;
  display: flex; align-items: center; gap: 10px;
  width: var(--search-w); height: var(--lg-h, 52px);
  padding: 0 16px;
  cursor: text;
  transition: width .55s var(--lg-spring), --lg-a .45s ease, box-shadow .45s ease;
}
.lg-search > svg { width: 20px; height: 20px; flex: none; color: var(--nav-text); }
.lg-search__input {
  flex: 1 1 auto; min-width: 0; height: 100%;
  background: transparent !important; border: 0; padding: 0; margin: 0;
  box-shadow: none !important; outline: none;
  color: var(--nav-ink); font: 400 15px/1.2 "Inter", sans-serif;
}
.lg-search__input::placeholder { color: var(--nav-muted); opacity: 1; }
.lg-search__input::-webkit-search-decoration { -webkit-appearance: none; }
.lg-search:focus-within {
  --search-w: 360px;
  box-shadow: inset 0 0 0 .5px var(--rim-dark), 0 0 0 3px var(--focus-halo), var(--lg-shadow, var(--nav-shadow-rest));
}

/* KOMPAKT/SCHMAL: Tropfen, der zur Kapsel morpht */
.lg-header:not([data-lg-stage="voll"]) .lg-search { --search-w: var(--lg-h); padding: 0; justify-content: center; }
.lg-header:not([data-lg-stage="voll"]) .lg-search__input { flex: 0 0 0; width: 0; opacity: 0; }
.lg-header:not([data-lg-stage="voll"]) .lg-search:focus-within {
  --search-w: 100%;
  margin-left: auto;
  padding: 0 16px; justify-content: flex-start;
}
.lg-header:not([data-lg-stage="voll"]) .lg-search:focus-within .lg-search__input { flex: 1 1 auto; opacity: 1; transition: opacity .2s ease .15s; }
.lg-header:not([data-lg-stage="voll"]) .lg-header__row:has(.lg-search:focus-within) > :not(.lg-search, .lg-menu) { display: none; }

/* --- Kap. 7.10 --- */
/* ============ ANSICHT ============ */
.lg-role { --lg-r: 26px; display: inline-flex; align-items: center; gap: 8px; height: var(--lg-h, 52px); padding: 4px 4px 4px 16px; }
.lg-role__label { font: 500 11px/1 "Space Grotesk", sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--nav-muted); }
.lg-role__select {                     /* ohne JS sichtbar und bedienbar */
  height: 44px; border: 0; border-radius: 22px;
  background-color: var(--on-glass-hover); color: var(--nav-ink);
  font: 500 12px/1 "Space Grotesk", sans-serif; letter-spacing: .06em; text-transform: uppercase;
  padding: 0 34px 0 14px;
}
.lg-role--enhanced { padding: 4px; }
.lg-role--enhanced > :is(label, select) {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); opacity: 0; pointer-events: none;
}
.lg-role__btn {
  height: 44px; display: inline-flex; align-items: center; gap: 10px;
  padding: 0 14px 0 12px; border-radius: 22px; color: var(--nav-ink);
}
.lg-role__btn:hover { background: var(--on-glass-hover); }
.lg-role__btn .lg-role__label { margin-left: 4px; }
.lg-role__value { font: 500 12px/1 "Space Grotesk", sans-serif; letter-spacing: .06em; text-transform: uppercase; }
.lg-role__btn svg { width: 16px; height: 16px; transition: rotate .4s var(--lg-spring); }
.lg-role__btn[aria-expanded="true"] svg { rotate: 180deg; }

/* --- Kap. 7.11 --- */
/* ============ THEME-UMSCHALTER ============ */
.lg-theme {
  --lg-r: 26px;
  --th-cell: 48px;
  --th-thumb: 40px;
  display: inline-grid; grid-template-columns: var(--th-cell) var(--th-cell);
  height: calc(var(--th-cell) + 4px); padding: 2px;
  transition: --tx .6s var(--lg-spring), --lg-a .45s ease, box-shadow .45s ease;
}
html[data-theme="dark"] .lg-theme { --tx: var(--th-cell); }
.lg-theme__btn {
  width: var(--th-cell); height: var(--th-cell); display: grid; place-items: center;
  border-radius: calc(var(--th-cell) / 2); color: var(--nav-text);
  transition: background-color .2s ease;
}
.lg-theme__btn:hover { background: var(--on-glass-hover); }
.lg-theme__btn svg { width: 20px; height: 20px; transition: opacity .2s ease .12s; }
.lg-theme__btn[aria-pressed="true"] svg { opacity: 0; }

.lg-theme__thumb {
  position: absolute !important; z-index: 4 !important;
  top: calc(2px + (var(--th-cell) - var(--th-thumb)) / 2);
  left: calc(2px + (var(--th-cell) - var(--th-thumb)) / 2);
  width: var(--th-thumb); height: var(--th-thumb); border-radius: 50%;
  transform: translateX(var(--tx));
  pointer-events: none;
  background: var(--orb-fill);
  box-shadow:
    inset 0 0 0 .5px var(--rim-dark),
    inset 1px 0 0 var(--orb-fringe-a),
    inset -1px 0 0 var(--orb-fringe-b),
    0 -3px 10px -4px var(--orb-bloom),
    0 3px 10px -3px rgba(0, 0, 0, .35);
}
.lg-theme__thumb::before {                          /* Bloom über die Silhouette hinaus */
  content: ""; position: absolute; inset: -45% -25% 35% -25%; border-radius: 50%;
  background: radial-gradient(closest-side at 50% 62%, var(--orb-bloom), transparent 72%);
  opacity: var(--orb-bloom-o); mix-blend-mode: plus-lighter; pointer-events: none;
}
.lg-theme__thumb::after {                           /* Glanzlicht oben, Kaustik unten */
  content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none;
  background:
    radial-gradient(38% 20% at 50% 14%, rgba(255, 255, 255, .95), transparent),
    radial-gradient(42% 16% at 50% 88%, var(--orb-caustic), transparent);
}
.lg-theme__lens { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; }
html.lg-orb .lg-theme__lens { filter: url(#lg-orb); }
.lg-theme__track {
  position: absolute;
  top: calc(-2px - (var(--th-cell) - var(--th-thumb)) / 2);
  left: calc(-2px - (var(--th-cell) - var(--th-thumb)) / 2);
  width: calc(var(--th-cell) * 2 + 4px); height: calc(var(--th-cell) + 4px); padding: 2px;
  display: grid; grid-template-columns: var(--th-cell) var(--th-cell); place-items: center;
  transform: translateX(calc(-1 * var(--tx)));
  color: var(--nav-ink);
}
.lg-theme__track svg { width: 20px; height: 20px; }
html:not(.lg-orb) .lg-theme__track svg { scale: 1.15; }
.lg-theme.is-switching .lg-theme__thumb { animation: lg-gel-x .6s var(--ease-out); }
@keyframes lg-gel-x {
  0%   { scale: 1 1; }
  30%  { scale: 1.34 .84; }
  62%  { scale: .94 1.06; }
  100% { scale: 1 1; }
}
@media (max-width: 767px) { .lg-theme { --th-cell: 44px; --th-thumb: 36px; } }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .45s; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }

/* --- Kap. 7.12 --- */
/* ============ HERO-SUCHE ============ */
.lg-hero-search { --lg-r: 30px; display: flex; align-items: center; height: 60px; }
.lg-hero-search > svg { width: 22px; height: 22px; margin-left: 22px; flex: none; color: var(--nav-text); }
.lg-hero-search input {
  flex: 1 1 auto; min-width: 0; height: 100%;
  background: transparent; border: 0; box-shadow: none; outline: none;
  padding: 0 22px 0 12px; border-radius: inherit;
  color: var(--nav-ink); font: 400 17px/1.3 "Inter", sans-serif;
}
.lg-hero-search input::placeholder { color: var(--nav-muted); opacity: 1; }
.lg-hero-search:focus-within {
  --lg-shadow: var(--nav-shadow-busy);
  background-image: linear-gradient(var(--tint-focus), var(--tint-focus)), radial-gradient(140% 100% at 18% 0%, var(--kissen), transparent 60%);
  box-shadow: inset 0 0 0 1px var(--tint-ring), 0 0 0 4px var(--focus-halo), var(--nav-shadow-busy);
}
.lg-hero-search:has(input:not(:placeholder-shown)) { --tint-focus: rgb(var(--tint-rgb) / .14); }
@media (max-width: 767px) { .lg-hero-search { height: 56px; --lg-r: 28px; } .lg-hero-search input { font-size: 16px; } }

/* --- Kap. 7.13 --- */
/* ============ FILTERFELD ============ */
.lg-field {
  --lg-r: 26px;
  display: flex; align-items: center; gap: 10px;
  width: min(100%, 28rem); height: 52px; margin: 0 auto 2rem; padding: 0 18px;
}
.lg-field > svg { width: 20px; height: 20px; flex: none; color: var(--nav-text); }
.lg-field input {
  flex: 1 1 auto; min-width: 0; height: 100%;
  background: transparent !important; border: 0; box-shadow: none !important; outline: none; padding: 0;
  color: var(--nav-ink); font: 400 15px/1.2 "Inter", sans-serif;
}
.lg-field input::placeholder { color: var(--nav-muted); opacity: 1; }
.lg-field:focus-within { box-shadow: inset 0 0 0 .5px var(--rim-dark), 0 0 0 3px var(--focus-halo), var(--nav-shadow-rest); }

/* --- Kap. 7.14 --- */
/* ============ DOCK ============ */
.lg-dock {
  position: fixed; z-index: 35;
  left: 50%; bottom: max(16px, env(safe-area-inset-bottom));
  translate: -50% 0;
  display: none; gap: 8px; max-width: calc(100vw - 24px);
}
body:has(#view-frage.active)   .lg-dock[data-lg-for="view-frage"],
body:has(#view-cluster.active) .lg-dock[data-lg-for="view-cluster"],
body:has(#view-detail.active)  .lg-dock[data-lg-for="view-detail"] { display: flex; }
.lg-action {
  --lg-r: 26px;
  display: inline-flex; align-items: center; gap: 8px;
  height: 52px; padding: 0 22px;
  color: var(--nav-ink); font: 500 16px/1 "Inter", sans-serif; white-space: nowrap;
}
.lg-action:hover { background-image: linear-gradient(var(--on-glass-hover), var(--on-glass-hover)); }
@media (max-width: 767px) { .lg-action { height: 48px; padding: 0 18px; font-size: 15px; --lg-r: 24px; } }

/* Ruhezustand ohne Überschneidung: Polster am Seitenende */
body:is(:has(#view-frage.active), :has(#view-cluster.active), :has(#view-detail.active)) footer.no-print {
  padding-bottom: calc(84px + env(safe-area-inset-bottom));
}

/* --- Kap. 7.15 --- */
/* ============ SCROLL-EDGE ============ */
.lg-edge { position: fixed; left: 0; right: 0; pointer-events: none; opacity: 0; transition: opacity .35s ease; }
.lg-edge--top {
  top: 0; z-index: 0;
  height: var(--lg-edge-h, 96px);
  background: var(--edge-top);
  -webkit-backdrop-filter: blur(var(--edge-blur)); backdrop-filter: blur(var(--edge-blur));
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent);
          mask-image: linear-gradient(180deg, #000 55%, transparent);
}
.lg-header[data-lg-scrolled] .lg-edge--top { opacity: 1; }
.lg-edge--bottom {
  bottom: 0; z-index: 34; height: calc(104px + env(safe-area-inset-bottom));
  background: var(--edge-bottom);
  -webkit-backdrop-filter: blur(var(--edge-blur)); backdrop-filter: blur(var(--edge-blur));
  -webkit-mask-image: linear-gradient(0deg, #000 55%, transparent);
          mask-image: linear-gradient(0deg, #000 55%, transparent);
}
body:is(:has(#view-frage.active), :has(#view-cluster.active), :has(#view-detail.active)) .lg-edge--bottom { opacity: 1; }
html[data-lg-end] .lg-edge--bottom { opacity: 0; }

/* --- Kap. 8.1 --- */
/* ============ BLASEN · EBENE 3 ============ */
.lg-bubble {
  --lg-r: 36px;
  --lg-angle: var(--bubble-angle);
  --lg-spread: 70deg;
  position: fixed; inset: auto; margin: 0; border: 0;
  top: var(--b-top, 72px); right: var(--b-right, 12px);
  width: min(360px, calc(100vw - 24px));
  padding: 10px;
  overflow: visible;
  border-radius: var(--lg-r);
  color: var(--bubble-text);
  background-color: rgb(var(--bubble-tint-rgb) / calc(var(--bubble-a) * var(--lg-mat)));
  background-image: var(--bubble-light);
  -webkit-backdrop-filter:
    blur(calc(var(--bubble-blur) * var(--lg-mat)))
    saturate(calc(1 + (var(--bubble-sat) - 1) * var(--lg-mat)))
    brightness(calc(1 + (var(--bubble-bright) - 1) * var(--lg-mat)));
          backdrop-filter: var(--lg-lens, )
    blur(calc(var(--bubble-blur) * var(--lg-mat)))
    saturate(calc(1 + (var(--bubble-sat) - 1) * var(--lg-mat)))
    brightness(calc(1 + (var(--bubble-bright) - 1) * var(--lg-mat)));
  box-shadow: inset 0 0 0 .5px var(--rim-dark), var(--bubble-shadow);
  transform-origin: var(--b-ox, 100%) var(--b-oy, 0%);
}
.lg-bubble::backdrop { background: transparent; }
.lg-bubble::before {                                /* Randlicht wie .lg-glass::before */
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  border-radius: inherit; padding: 1px;
  background: conic-gradient(from var(--lg-angle),
    var(--hl-strong) 0deg, var(--hl-side) var(--lg-spread), var(--hl-side) calc(180deg - var(--lg-spread)),
    var(--hl-soft) 180deg, var(--hl-side) calc(180deg + var(--lg-spread)), var(--hl-side) calc(360deg - var(--lg-spread)),
    var(--hl-strong) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: var(--lg-mat);
}
.lg-bubble::after {                                 /* Innenleuchten */
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), var(--glow-color) 0%, transparent var(--lg-glow-r));
  opacity: calc(var(--lg-glow) * .6); mix-blend-mode: plus-lighter;
}
.lg-bubble > * { position: relative; z-index: 3; opacity: clamp(0, calc(var(--lg-mat) * 2 - 1), 1); }
.lg-bubble__scroll, .lg-bubble .lg-menu__inner {
  display: flex; flex-direction: column;
  max-height: calc(100dvh - var(--b-top, 72px) - 16px - 20px);
  overflow-y: auto; overscroll-behavior: contain;
  border-radius: calc(var(--lg-r) - 10px);
}
@media (max-width: 399px) { .lg-bubble { --lg-r: 32px; } }

/* Glas in der Blase gibt sein Material ab (kein Glas auf Glas) */
.lg-bubble :is(.lg-glass, .lg-seg) {
  display: flex; flex-direction: column; align-items: stretch;
  height: auto; padding: 0; gap: 0;
  background: none !important; box-shadow: none !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
.lg-bubble .lg-glass::before, .lg-bubble .lg-glass::after,
.lg-bubble .lg-seg__lens, .lg-bubble .lg-spacer, .lg-bubble .lg-refract { display: none !important; }
.lg-bubble .lg-seg + .lg-seg { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--on-glass-sep); }

/* Zeilen im Stil von Referenz B */
.lg-bubble :is(.lg-seg__item, .lg-menu__row, .lg-option) {
  display: flex; align-items: center; justify-content: flex-start; gap: 12px;
  width: 100%; height: 44px; padding: 0 14px 0 8px;
  border-radius: calc(var(--lg-r) - 10px);
  background: transparent !important;
  font-family: "Inter", sans-serif; font-size: 17px; font-weight: 500;
  letter-spacing: 0; text-transform: none; text-align: left;
  color: var(--bubble-text) !important;
}
.lg-bubble :is(.lg-seg__item, .lg-menu__row, .lg-option) > svg {
  width: 32px; height: 32px; padding: 6px; flex: none;
  border-radius: 50%; background: var(--on-glass-round);          /* Symbol-Mulde, Referenz A */
}
.lg-bubble :is(.lg-seg__item, .lg-menu__row):not(:has(> svg))::before { content: ""; width: 32px; flex: none; }
.lg-bubble :is(.lg-seg__item, .lg-menu__row, .lg-option):hover { background: var(--on-glass-hover) !important; }
.lg-bubble :is(.bg-surface-bright, .is-current, [aria-selected="true"]) { background: var(--on-glass-hover) !important; }
.lg-bubble .lg-seg--tinted [aria-current="page"] { background: rgb(var(--tint-rgb) / var(--tint-a)) !important; color: var(--on-tint) !important; }
.lg-bubble .lg-seg--tinted [aria-current="page"] > svg { background: rgba(255, 255, 255, .22); }
.lg-menu__row .lg-role__value { margin-left: auto; font: 500 12px/1 "Space Grotesk", sans-serif; letter-spacing: .06em; text-transform: uppercase; }
.lg-option[aria-selected="true"]::after {
  content: ""; margin-left: auto; width: 11px; height: 6px;
  border-left: 2px solid currentColor; border-bottom: 2px solid currentColor;
  rotate: -45deg; translate: 0 -2px;
}
.lg-option.is-active { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
.lg-bubble--role { width: min(320px, calc(100vw - 24px)); }

/* --- Kap. 9 --- */
.lg-menu.lg-bubble { display: block; }

/* --- Kap. 11.1 --- */
/* ============ REDUZIERTE BEWEGUNG ============ */
@media (prefers-reduced-motion: reduce) {
  :root, html[data-theme="light"], html[data-theme="dark"] { --lg-spring: ease; }
  .lg-glass, .lg-glass::before, .lg-bubble, .lg-seg__lens, .lg-theme, .lg-search, .glass-card, .lg-role__btn svg {
    transition-duration: .01s !important;
  }
  .lg-seg__lens.is-moving, .lg-theme.is-switching .lg-theme__thumb,
  .view.active, .view.active :is(.glass-card, .lg-plate, .ghost-border, .lg-halo > *) { animation: none !important; }
  :is(a, button).glass-card:hover { transform: none; }
  .kita-bg::before, .kita-bg__img, .lg-edge { transition: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* ============ REDUZIERTE TRANSPARENZ: frostiger, deckender ============ */
@media (prefers-reduced-transparency: reduce) {
  :root, html[data-theme="light"] {
    --surface-bg: #fbfaff; --surface-strong: #ffffff; --surface-inset: #f4f1f8;
    --scrim-bg: rgba(246, 243, 250, .94); --label-bg: #ffffff; --input-bg: #ffffff;
    --nav-a-rest: .94; --nav-a-deep: .94; --nav-a-busy: .96; --nav-blur: 30px;
    --bubble-a: .96; --edge-blur: 16px; --orb-fill: #ffffff;
  }
  html[data-theme="dark"] {
    --surface-bg: #141c25; --surface-strong: #0f1820; --surface-inset: #182029;
    --scrim-bg: rgba(11, 20, 28, .92); --label-bg: #182029; --input-bg: #141c25;
    --nav-tint-rgb: 28 28 30; --nav-a-rest: .94; --nav-a-deep: .94; --nav-a-busy: .96; --nav-blur: 30px;
    --bubble-a: .96; --orb-fill: #2c2c2e;
  }
  .lg-refract, .lg-theme__thumb::before { display: none !important; }
  .lg-theme__lens { filter: none !important; }
  .kita-bg::after { background: var(--veil), color-mix(in srgb, var(--page-bg) 70%, transparent); }
}

/* ============ ERHÖHTER KONTRAST: Schwarz/Weiß mit Rand ============ */
@media (prefers-contrast: more) {
  :root, html[data-theme="light"] {
    --nav-tint-rgb: 255 255 255; --nav-a-rest: 1; --nav-a-deep: 1; --nav-a-busy: 1;
    --nav-ink: #000; --nav-text: #000; --nav-muted: #1f2a36;
    --bubble-tint-rgb: 255 255 255; --bubble-a: 1; --bubble-text: #000;
    --hl-strong: transparent; --hl-soft: transparent; --hl-side: transparent; --kissen: transparent;
    --rim-dark: #000; --seg-lens-fill: #000; --seg-active-ink: #fff;
    --surface-bg: #fff; --surface-strong: #fff; --surface-inset: #fff; --surface-border: #141a22;
    --scrim-bg: #fff; --label-bg: #fff; --tint-a: 1; --tint-rgb: 83 20 136;
  }
  html[data-theme="dark"] {
    --nav-tint-rgb: 0 0 0; --nav-a-rest: 1; --nav-a-deep: 1; --nav-a-busy: 1;
    --nav-ink: #fff; --nav-text: #fff; --nav-muted: #dae3ef;
    --bubble-tint-rgb: 0 0 0; --bubble-a: 1; --bubble-text: #fff; --bubble-light: none;
    --rim-dark: #fff; --seg-lens-fill: #fff; --seg-active-ink: #000;
    --surface-bg: #000; --surface-strong: #000; --surface-inset: #000; --surface-border: #fff;
    --scrim-bg: #000; --label-bg: #000;
  }
  .lg-glass, .lg-bubble { box-shadow: inset 0 0 0 1.5px var(--rim-dark) !important; }
  .lg-glass::after, .lg-bubble::after, .lg-refract, .lg-theme__thumb::before { display: none !important; }
  .lg-theme__lens { filter: none !important; }
  .glass-card, .lg-plate, .ghost-border { box-shadow: inset 0 0 0 1.5px var(--surface-border) !important; }
}

/* ============ FORCED COLORS ============ */
@media (forced-colors: active) {
  .kita-bg, .lg-edge, .lg-refract, .lg-theme__thumb::before, .lg-theme__thumb::after { display: none !important; }
  .lg-glass, .lg-bubble, .glass-card, .lg-plate, .ghost-border, .lg-label, .lg-halo::before {
    background: Canvas !important; color: CanvasText !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
    border: 1px solid CanvasText; box-shadow: none !important;
  }
  .lg-glass::before, .lg-glass::after, .lg-bubble::before, .lg-bubble::after, .lg-halo::before { display: none !important; }
  .lg-seg__lens { background: Highlight !important; forced-color-adjust: none; }
  .lg-seg :is([aria-current="page"], .active, [aria-selected="true"], .bg-surface-bright) { color: HighlightText !important; forced-color-adjust: none; }
  .lg-theme__thumb { background: Highlight; forced-color-adjust: none; }
  .lg-theme__lens { filter: none !important; }
  .lg-theme__track { color: HighlightText; }
}

/* --- Kap. 12 --- */
@media print {
  .kita-bg, .lg-header, .lg-dock, .lg-edge, .lg-bubble, .lg-defs, .lg-theme, .no-print { display: none !important; }
  html, body { background: #fff !important; color: #111 !important; }
  .glass-card, .lg-surface, .ghost-border, .lg-plate, .lg-label, #breadcrumb, footer,
  [style*="rgba(165,214,167"], [style*="rgba(255,182,147"] {
    background: #fff !important; box-shadow: none !important;
    border: 1px solid #ccc !important; color: #111 !important;
  }
  .lg-halo::before { display: none !important; }
  .glass-card::before { opacity: 1; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .text-on-surface-variant, .text-tertiary, .text-on-surface { color: #333 !important; }
  .text-white, h1, h2, h3 { color: #000 !important; }
  .monolith-gradient { background: none !important; -webkit-text-fill-color: #6b21a8 !important; color: #6b21a8 !important; }
  .lg-plate { padding: 0 !important; border: 0 !important; }
  details { display: block; } details > * { display: block !important; }
  .view.active, .view.active * { animation: none !important; }
}


/* #####################################################################
   CD v2.1 (kita/_konzept/06b-cd-v2-1-feedback.md) · ersetzt Nachtrag v2
   ##################################################################### */

/* --- v2.1 Kap. 3 --- */
/* =====================================================================
   CD v2.1 · TOKENS (überschreibt v2 + Nachtrag)
   ===================================================================== */
:root, html[data-theme="light"] {
  /* Hintergrund: Schleier halbiert, damit keine milchige Fläche entsteht */
  --veil:
    radial-gradient(60% 60% at 30% 20%, rgba(201, 136, 250, .08), transparent 60%),
    linear-gradient(180deg, rgba(246, 243, 250, .40) 0%, rgba(246, 243, 250, .30) 12%, rgba(246, 243, 250, .20) 26%,
                            rgba(246, 243, 250, .14) 40%, rgba(246, 243, 250, .12) 60%, rgba(246, 243, 250, .16) 78%,
                            rgba(246, 243, 250, .30) 100%);

  /* Gruppen-Zone */
  --group-tint: rgba(246, 243, 250, .76);
  --group-blur: 24px;
  --group-sat: 1.4;
  --group-bright: 1.04;
  --group-gap: 40px;

  /* Kacheln und Controls in Gruppen */
  --tile-fill: rgba(255, 255, 255, .60);
  --tile-fill-strong: rgba(255, 255, 255, .78);
  --tile-line: rgba(20, 26, 40, .08);
  --tile-shadow: 0 1px 2px rgba(30, 20, 60, .05), 0 8px 20px -12px rgba(30, 20, 60, .18);
  --tile-shadow-hover: 0 2px 4px rgba(30, 20, 60, .07), 0 14px 30px -14px rgba(30, 20, 60, .26);
  --control-fill: rgba(255, 255, 255, .74);
  --control-line: rgba(20, 26, 40, .12);

  /* Lese-Ansichten */
  --read-fill: rgba(251, 250, 255, .97);
  --read-tile: rgba(251, 250, 255, .95);
  --surface-solid: #fbfaff;
  --read-photo-blur: 12px;

  /* Navigation: Silhouette statt Lichtkante, Füllungen statt Scheiben */
  --nav-outline: 0 0 0 .5px rgba(20, 26, 40, .16);
  --nav-shadow-rest: 0 1px 2px rgba(30, 20, 60, .08), 0 8px 22px -10px rgba(30, 20, 60, .24);
  --nav-shadow-busy: 0 1px 3px rgba(30, 20, 60, .12), 0 14px 34px -10px rgba(30, 20, 60, .36);
  --on-glass-hover: rgba(20, 26, 34, .05);
  --on-glass-press: rgba(20, 26, 34, .10);
  --on-glass-fill: rgba(20, 26, 34, .08);         /* aktiver Eintrag, Daumen */
  --on-glass-sep: rgba(20, 26, 34, .10);
  --nav-inactive: #3a4552;

  /* Scroll-Edge hell: langer Sinus-Verlauf */
  --edge-top: linear-gradient(180deg,
    rgba(246, 243, 250, .92) 0%, rgba(246, 243, 250, .90) 18%, rgba(246, 243, 250, .83) 30%,
    rgba(246, 243, 250, .72) 40%, rgba(246, 243, 250, .58) 50%, rgba(246, 243, 250, .43) 60%,
    rgba(246, 243, 250, .28) 70%, rgba(246, 243, 250, .16) 79%, rgba(246, 243, 250, .07) 88%,
    rgba(246, 243, 250, .02) 95%, rgba(246, 243, 250, 0) 100%);
  --edge-bottom: linear-gradient(0deg,
    rgba(246, 243, 250, .88) 0%, rgba(246, 243, 250, .80) 20%, rgba(246, 243, 250, .62) 40%,
    rgba(246, 243, 250, .40) 58%, rgba(246, 243, 250, .20) 74%, rgba(246, 243, 250, .07) 88%, rgba(246, 243, 250, 0) 100%);
  --edge-blur: 12px;
}

@media screen {
  html[data-theme="dark"] {
    /* Foto, Schleier, Navigationstönung: unverändert (Maßstab) */

    --group-tint: rgba(11, 20, 28, .50);
    --group-blur: 28px;
    --group-sat: 1.2;
    --group-bright: .90;

    --tile-fill: rgba(6, 10, 16, .40);
    --tile-fill-strong: rgba(6, 10, 16, .52);
    --tile-line: rgba(255, 255, 255, .06);
    --tile-shadow: 0 1px 2px rgba(0, 0, 0, .25), 0 10px 24px -14px rgba(0, 0, 0, .50);
    --tile-shadow-hover: 0 2px 4px rgba(0, 0, 0, .30), 0 16px 34px -16px rgba(0, 0, 0, .60);
    --control-fill: rgba(6, 10, 16, .50);
    --control-line: rgba(255, 255, 255, .10);

    --read-fill: rgba(13, 22, 32, .93);
    --read-tile: rgba(16, 26, 36, .90);
    --surface-solid: #101a24;
    --read-photo-blur: 12px;

    --nav-outline: 0 0 0 .5px rgba(0, 0, 0, .45);
    --on-glass-hover: rgba(0, 0, 0, .20);
    --on-glass-press: rgba(0, 0, 0, .30);
    --on-glass-fill: rgba(0, 0, 0, .38);
    --on-glass-sep: rgba(255, 255, 255, .10);
    --nav-inactive: #cfd6de;
    --bubble-light: none;

    --edge-top: linear-gradient(180deg,
      rgba(6, 10, 16, .88) 0%, rgba(6, 10, 16, .86) 18%, rgba(6, 10, 16, .79) 30%,
      rgba(6, 10, 16, .68) 40%, rgba(6, 10, 16, .55) 50%, rgba(6, 10, 16, .41) 60%,
      rgba(6, 10, 16, .27) 70%, rgba(6, 10, 16, .15) 79%, rgba(6, 10, 16, .06) 88%,
      rgba(6, 10, 16, .02) 95%, rgba(6, 10, 16, 0) 100%);
    --edge-bottom: linear-gradient(0deg,
      rgba(6, 10, 16, .82) 0%, rgba(6, 10, 16, .74) 20%, rgba(6, 10, 16, .57) 40%,
      rgba(6, 10, 16, .37) 58%, rgba(6, 10, 16, .18) 74%, rgba(6, 10, 16, .06) 88%, rgba(6, 10, 16, 0) 100%);
    --edge-blur: 6px;
  }
}

@media (max-width: 767px) {
  :root, html[data-theme="light"] { --group-blur: 16px; --group-gap: 24px; }
  html[data-theme="dark"] { --group-blur: 18px; }
}

/* --- v2.1 Kap. 4.2 --- */
/* =====================================================================
   CD v2.1 · GRUPPEN-ZONEN
   ===================================================================== */
:is(main .lg-group, #rolle-list > section, #overview-grid > section) {
  --fx: 96px;                 /* seitlicher Auslauf außerhalb des Containers */
  --fy: 56px;                 /* Auslauf oben/unten innerhalb des Innenabstands */
  position: relative;
  isolation: isolate;
  padding-block: calc(var(--fy) + 12px) !important;
  margin-bottom: 0 !important;

  /* Kacheln und Controls in der Gruppe: Füllung, kein Backdrop */
  --surface-bg: var(--tile-fill);
  --surface-strong: var(--tile-fill-strong);
  --surface-border: var(--tile-line);
  --surface-shadow: var(--tile-shadow);
  --surface-shadow-hover: var(--tile-shadow-hover);
  --label-bg: var(--tile-fill);
  --input-bg: var(--control-fill);
}
:is(main .lg-group, #rolle-list > section, #overview-grid > section):not(:first-child) { margin-top: var(--group-gap) !important; }
#rolle-list > section + section, #overview-grid > section + section { margin-top: var(--group-gap) !important; }

:is(main .lg-group, #rolle-list > section, #overview-grid > section)::before {
  content: "";
  position: absolute; z-index: -1; pointer-events: none;
  inset: 0 calc(-1 * var(--fx));
  background: var(--group-tint);
  -webkit-backdrop-filter: blur(var(--group-blur)) saturate(var(--group-sat)) brightness(var(--group-bright));
          backdrop-filter: blur(var(--group-blur)) saturate(var(--group-sat)) brightness(var(--group-bright));
  /* Maske: siehe Block „Masken" direkt darunter */
}

/* Mobil: volle Breite, Auslauf nur oben/unten */
@media (max-width: 767px) {
  :is(main .lg-group, #rolle-list > section, #overview-grid > section) { --fx: 0px; --fy: 36px; }
  :is(main .lg-group, #rolle-list > section, #overview-grid > section)::before {
    inset: 0 calc(50% - 50vw);
  }
}

/* Glas-Controls in Gruppen verlieren das Material (kein Glas auf Glas) */
:is(main .lg-group, #rolle-list > section, #overview-grid > section) .lg-glass {
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  background: var(--control-fill) !important;
  box-shadow: inset 0 0 0 1px var(--control-line) !important;
}

/* Lesegrund aus v2/Nachtrag entfällt; Zonen übernehmen */
.lg-halo::before { content: none !important; }

/* --- v2.1 Kap. 4.2 --- */
:is(main .lg-group, #rolle-list > section, #overview-grid > section) {
  --lg-mask-x: linear-gradient(90deg,
    rgb(0 0 0 / 0) 0, rgb(0 0 0 / .024) calc(var(--fx) * .1), rgb(0 0 0 / .095) calc(var(--fx) * .2),
    rgb(0 0 0 / .206) calc(var(--fx) * .3), rgb(0 0 0 / .345) calc(var(--fx) * .4), rgb(0 0 0 / .5) calc(var(--fx) * .5),
    rgb(0 0 0 / .655) calc(var(--fx) * .6), rgb(0 0 0 / .794) calc(var(--fx) * .7), rgb(0 0 0 / .905) calc(var(--fx) * .8),
    rgb(0 0 0 / .976) calc(var(--fx) * .9), #000 var(--fx), #000 calc(100% - var(--fx)),
    rgb(0 0 0 / .976) calc(100% - var(--fx) * .9), rgb(0 0 0 / .905) calc(100% - var(--fx) * .8),
    rgb(0 0 0 / .794) calc(100% - var(--fx) * .7), rgb(0 0 0 / .655) calc(100% - var(--fx) * .6),
    rgb(0 0 0 / .5) calc(100% - var(--fx) * .5), rgb(0 0 0 / .345) calc(100% - var(--fx) * .4),
    rgb(0 0 0 / .206) calc(100% - var(--fx) * .3), rgb(0 0 0 / .095) calc(100% - var(--fx) * .2),
    rgb(0 0 0 / .024) calc(100% - var(--fx) * .1), rgb(0 0 0 / 0) 100%);
  --lg-mask-y: linear-gradient(180deg,
    rgb(0 0 0 / 0) 0, rgb(0 0 0 / .024) calc(var(--fy) * .1), rgb(0 0 0 / .095) calc(var(--fy) * .2),
    rgb(0 0 0 / .206) calc(var(--fy) * .3), rgb(0 0 0 / .345) calc(var(--fy) * .4), rgb(0 0 0 / .5) calc(var(--fy) * .5),
    rgb(0 0 0 / .655) calc(var(--fy) * .6), rgb(0 0 0 / .794) calc(var(--fy) * .7), rgb(0 0 0 / .905) calc(var(--fy) * .8),
    rgb(0 0 0 / .976) calc(var(--fy) * .9), #000 var(--fy), #000 calc(100% - var(--fy)),
    rgb(0 0 0 / .976) calc(100% - var(--fy) * .9), rgb(0 0 0 / .905) calc(100% - var(--fy) * .8),
    rgb(0 0 0 / .794) calc(100% - var(--fy) * .7), rgb(0 0 0 / .655) calc(100% - var(--fy) * .6),
    rgb(0 0 0 / .5) calc(100% - var(--fy) * .5), rgb(0 0 0 / .345) calc(100% - var(--fy) * .4),
    rgb(0 0 0 / .206) calc(100% - var(--fy) * .3), rgb(0 0 0 / .095) calc(100% - var(--fy) * .2),
    rgb(0 0 0 / .024) calc(100% - var(--fy) * .1), rgb(0 0 0 / 0) 100%);
}
:is(main .lg-group, #rolle-list > section, #overview-grid > section)::before {
  -webkit-mask-image: var(--lg-mask-x), var(--lg-mask-y);
  -webkit-mask-composite: source-in;
          mask-image: var(--lg-mask-x), var(--lg-mask-y);
          mask-composite: intersect;
}
@media (max-width: 767px) {
  :is(main .lg-group, #rolle-list > section, #overview-grid > section)::before {
    -webkit-mask-image: var(--lg-mask-y);
            mask-image: var(--lg-mask-y);
  }
}

/* --- v2.1 Kap. 5.1 --- */
/* =====================================================================
   CD v2.1 · KACHELN
   ===================================================================== */
:is(main .lg-group, #rolle-list > section, #overview-grid > section) :is(.glass-card, .ghost-border[class*="bg-surface-container"], details.ghost-border, article.ghost-border) {
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
/* Etiketten und Zwischenüberschriften in Gruppen: Text statt Pille */
:is(#rolle-list > section, #overview-grid > section, #cluster-solutions > div) > div:first-child,
#overview-grid > section > .mb-8 > p:first-child {
  background: none !important; box-shadow: none !important; padding: 0 !important;
}
/* Inline-Boxen aus Tailwind-Utilities in index.html („Wie funktioniert es?", „Zeit-Horizont") */
.lg-group .ghost-border.backdrop-blur { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--tile-fill); }

/* --- v2.1 Kap. 5.2 --- */
/* =====================================================================
   CD v2.1 · LESE-ANSICHTEN
   ===================================================================== */
body:has(:is(#view-frage, #view-gesetz, #view-quellen, #view-suche, #view-detail).active) {
  --surface-bg: var(--read-tile);
  --surface-strong: var(--read-fill);
}
body:has(:is(#view-frage, #view-gesetz, #view-quellen, #view-suche, #view-detail).active) .kita-bg__img {
  filter: var(--photo-filter) blur(var(--read-photo-blur));
  transform: scale(1.04);
}
body:has(:is(#view-frage, #view-gesetz, #view-quellen, #view-suche, #view-detail).active) .lg-plate {
  background: var(--read-fill);
}
/* Kopf-Gruppen in Lese-Ansichten: Foto ist schon weich, Zone ohne zweiten Blur */
body:has(:is(#view-gesetz, #view-quellen, #view-suche).active) main .lg-group::before {
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
/* Notfall-Box voll deckend, orange Kante bleibt */
[style*="rgba(255,182,147,.08)"] {
  background: linear-gradient(var(--warn-tint), var(--warn-tint)), var(--surface-solid) !important;
}

/* --- v2.1 Kap. 6.2 --- */
/* =====================================================================
   CD v2.1 · NAVIGATION OHNE LICHTEFFEKTE
   ===================================================================== */
.lg-glass::before, .lg-glass::after,
.lg-bubble::before, .lg-bubble::after,
.lg-theme__thumb::before, .lg-theme__thumb::after,
.lg-refract { content: none !important; display: none !important; }

.lg-glass,
html:not(.lg-lens) .lg-glass {
  background-image: none;
  box-shadow: var(--nav-outline), var(--lg-shadow, var(--nav-shadow-rest));
}
.lg-bubble { background-image: none; box-shadow: var(--nav-outline), var(--bubble-shadow); }

/* Füllungen auf Glas */
.lg-seg__lens,
.lg-seg--tinted .lg-seg__lens { box-shadow: none; }
.lg-seg__lens { background: var(--on-glass-fill); }
.lg-seg :is(.lg-seg__item, .chip, .role-tab, .fassung-btn, .overview-filter-btn) { color: var(--nav-inactive) !important; }
.lg-seg :is([aria-current="page"], .active, [aria-selected="true"], .bg-surface-bright, .is-current) {
  color: var(--nav-ink) !important; font-weight: 600;
}
.lg-seg--tinted [aria-current="page"] { color: var(--on-tint) !important; }

/* Hell/Dunkel-Umschalter: schlichter Daumen, Symbole scharf */
.lg-theme__lens { display: none; }
.lg-theme__thumb {
  z-index: 2 !important;
  background: var(--on-glass-fill);
  box-shadow: none;
}
.lg-theme__btn { z-index: 3; color: var(--nav-inactive); }
.lg-theme__btn svg { opacity: 1 !important; width: 20px; height: 20px; }
.lg-theme__btn[aria-pressed="true"] { color: var(--nav-ink); }
.lg-theme__btn[aria-pressed="true"] svg { stroke-width: 2.3; }
.lg-theme.is-switching .lg-theme__thumb { animation: lg-gel-soft .5s var(--ease-out); }
@keyframes lg-gel-soft { 0% { scale: 1 1; } 35% { scale: 1.14 .92; } 70% { scale: .98 1.02; } 100% { scale: 1 1; } }

/* Erhöhter Kontrast / Ruhige Darstellung: Aktiv-Zustand zusätzlich mit Kante */
@media (prefers-contrast: more) {
  .lg-seg__lens, .lg-theme__thumb { box-shadow: inset 0 0 0 1.5px var(--nav-ink) !important; }
}
html[data-lg-calm] :is(.lg-seg__lens, .lg-theme__thumb) { box-shadow: inset 0 0 0 1.5px var(--nav-ink) !important; }

/* --- v2.1 Kap. 6.3 --- */
/* =====================================================================
   CD v2.1 · BESCHRIFTUNGEN DER NAVIGATION
   ===================================================================== */
.lg-seg :is(.lg-seg__item, .chip, .role-tab, .fassung-btn, .overview-filter-btn),
.lg-role__value, .lg-menu__row .lg-role__value {
  font-family: "Inter", sans-serif !important;
  font-size: 15px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
.lg-seg :is(.lg-seg__item, .chip, .role-tab, .fassung-btn, .overview-filter-btn) { padding: 0 14px; font-weight: 500; }
.lg-role__label { font: 400 15px/1 "Inter", sans-serif; letter-spacing: 0; text-transform: none; color: var(--nav-inactive); }
.text-\[10px\], .text-\[11px\] { font-size: 12px !important; }
.font-label.uppercase { letter-spacing: .08em; }

/* --- v2.1 Kap. 6.4 --- */
/* =====================================================================
   CD v2.1 · STUFE MITTEL (ersetzt die Nachtrag-Blöcke „Stufe MITTEL") · ANSICHT
   ===================================================================== */
.lg-seg__text { display: inline-flex; align-items: center; gap: 6px; }
.lg-seg__short { display: none; align-items: center; gap: 6px; }
/* 14.09.2026: Bereichs-Tabs zeigen in allen Stufen dieselbe Beschriftung */
.lg-header[data-lg-stage="mittel"] .lg-seg--tinted .area-tab > svg { display: none; }
.lg-header[data-lg-stage="mittel"] .lg-seg:not(.lg-seg--tinted) .lg-seg__item { padding: 0 11px; }
.lg-bubble .lg-seg__text { display: inline-flex !important; }
.lg-bubble .lg-seg__short { display: none !important; }

.lg-role__btn .lg-role__label { position: static !important; width: auto !important; height: auto !important; clip-path: none !important; }
.lg-role__btn .lg-role__label::after, .lg-role-inline .lg-role__label::after { content: ":"; }

.lg-role-inline { display: none; }
.lg-header[data-lg-stage="schmal"] ~ main .lg-role-inline {
  display: inline-flex; align-items: center; gap: 6px;
  margin-left: auto; min-height: 44px; padding: 0 12px 0 16px; border-radius: 22px;
  background: var(--control-fill); box-shadow: inset 0 0 0 1px var(--control-line);
  color: var(--ink); font: 500 15px/1 "Inter", sans-serif;
}
.lg-role-inline .lg-role__label { font-weight: 400; color: var(--text); }
.lg-role-inline svg { width: 18px; height: 18px; }

/* --- v2.1 Kap. 6.6 --- */
.lg-group .lg-hero-search { background: var(--control-fill) !important; }
.lg-group .lg-hero-search:focus-within {
  box-shadow: inset 0 0 0 1.5px var(--tint-ring), 0 0 0 4px var(--focus-halo) !important;
}
@media screen {
  html[data-theme="dark"] .lg-group .lg-hero-search { background: rgba(6, 10, 16, .58) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12) !important; }
}
.lg-group .lg-seg__lens { background: var(--on-glass-fill); }

/* --- v2.1 Kap. 6.7 --- */
/* =====================================================================
   CD v2.1 · PFAD-ZEILE
   ===================================================================== */
#breadcrumb:not(:empty), .lg-path .lg-label { background: none !important; box-shadow: none !important; padding: 0 !important; }
#breadcrumb, .lg-path .lg-label .font-label {
  font-family: "Inter", sans-serif !important; font-size: 14px !important;
  letter-spacing: 0 !important; text-transform: none !important;
}
.lg-path {
  position: relative; isolation: isolate; min-height: 44px; --fx: 96px;
  --path-mask-x: linear-gradient(90deg,
    rgb(0 0 0 / 0) 0, rgb(0 0 0 / .095) calc(var(--fx) * .2), rgb(0 0 0 / .345) calc(var(--fx) * .4),
    rgb(0 0 0 / .655) calc(var(--fx) * .6), rgb(0 0 0 / .905) calc(var(--fx) * .8), #000 var(--fx),
    #000 calc(100% - var(--fx)), rgb(0 0 0 / .905) calc(100% - var(--fx) * .8), rgb(0 0 0 / .655) calc(100% - var(--fx) * .6),
    rgb(0 0 0 / .345) calc(100% - var(--fx) * .4), rgb(0 0 0 / .095) calc(100% - var(--fx) * .2), rgb(0 0 0 / 0) 100%);
  --path-mask-y: linear-gradient(180deg,
    rgb(0 0 0 / 0) 0, rgb(0 0 0 / .095) 8%, rgb(0 0 0 / .345) 16%, rgb(0 0 0 / .655) 24%, rgb(0 0 0 / .905) 32%, #000 40%,
    #000 60%, rgb(0 0 0 / .905) 68%, rgb(0 0 0 / .655) 76%, rgb(0 0 0 / .345) 84%, rgb(0 0 0 / .095) 92%, rgb(0 0 0 / 0) 100%);
}
.lg-path::before {
  content: ""; position: absolute; inset: 0 calc(-1 * var(--fx)); z-index: -1; pointer-events: none;
  background: var(--group-tint);
  -webkit-mask-image: var(--path-mask-x), var(--path-mask-y);
  -webkit-mask-composite: source-in;
          mask-image: var(--path-mask-x), var(--path-mask-y);
          mask-composite: intersect;
}
.lg-path:has(#breadcrumb:empty):not(:has(.lg-label)):not(:has(.lg-role-inline)) { display: none; }
#breadcrumb a:hover, #breadcrumb button:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 767px) {
  .lg-path { --fx: 0px; }
  .lg-path::before { inset: 0 calc(50% - 50vw); -webkit-mask-image: var(--path-mask-y); mask-image: var(--path-mask-y); }
}

/* --- v2.1 Kap. 6.8 --- */
/* =====================================================================
   CD v2.1 · LOGO JAEB ALSDORF (Breiten aus der Umsetzung, Kapsel konzentrisch)
   ===================================================================== */
.lg-logo { --lg-r: 26px; padding-inline: 16px; }
.lg-logo img { width: 132px; height: auto; filter: none !important; }
@media screen { html[data-theme="dark"] .lg-logo img { filter: brightness(1.12) saturate(1.05) !important; } }
@media (max-width: 767px) { .lg-logo { --lg-r: 24px; padding-inline: 12px; } .lg-logo img { width: 104px; } }
@media (max-width: 359px) { .lg-logo img { width: 88px; } }

/* --- v2.1 Kap. 7 --- */
/* =====================================================================
   CD v2.1 · SCROLL-EDGE (ersetzt Nachtrag-Block „Scroll-Edge verstärkt")
   ===================================================================== */
.lg-edge--top {
  height: calc(var(--lg-edge-h, 96px) + 44px);
  background: var(--edge-top);
  -webkit-backdrop-filter: blur(var(--edge-blur)); backdrop-filter: blur(var(--edge-blur));
  -webkit-mask-image: linear-gradient(180deg,
    #000 0%, #000 45%, rgb(0 0 0 / .976) 50.5%, rgb(0 0 0 / .905) 56%, rgb(0 0 0 / .794) 61.5%, rgb(0 0 0 / .655) 67%,
    rgb(0 0 0 / .5) 72.5%, rgb(0 0 0 / .345) 78%, rgb(0 0 0 / .206) 83.5%, rgb(0 0 0 / .095) 89%, rgb(0 0 0 / .024) 94.5%, rgb(0 0 0 / 0) 100%);
          mask-image: linear-gradient(180deg,
    #000 0%, #000 45%, rgb(0 0 0 / .976) 50.5%, rgb(0 0 0 / .905) 56%, rgb(0 0 0 / .794) 61.5%, rgb(0 0 0 / .655) 67%,
    rgb(0 0 0 / .5) 72.5%, rgb(0 0 0 / .345) 78%, rgb(0 0 0 / .206) 83.5%, rgb(0 0 0 / .095) 89%, rgb(0 0 0 / .024) 94.5%, rgb(0 0 0 / 0) 100%);
  transition: opacity .5s ease;
}
.lg-edge--bottom {
  height: calc(128px + env(safe-area-inset-bottom));
  -webkit-mask-image: linear-gradient(0deg,
    #000 0%, #000 40%, rgb(0 0 0 / .905) 52%, rgb(0 0 0 / .655) 64%, rgb(0 0 0 / .345) 76%, rgb(0 0 0 / .095) 88%, rgb(0 0 0 / 0) 100%);
          mask-image: linear-gradient(0deg,
    #000 0%, #000 40%, rgb(0 0 0 / .905) 52%, rgb(0 0 0 / .655) 64%, rgb(0 0 0 / .345) 76%, rgb(0 0 0 / .095) 88%, rgb(0 0 0 / 0) 100%);
}

/* --- v2.1 Kap. 5.3 --- */
/* =====================================================================
   CD v2.1 · KI-KENNZEICHNUNG DES FOTOS
   ===================================================================== */
.kita-bg::after { z-index: 1; }
.kita-bg__ai {
  position: absolute; z-index: 2;
  right: max(12px, env(safe-area-inset-right));
  bottom: max(12px, env(safe-area-inset-bottom));
  padding: 3px 8px; border-radius: 999px;
  background: rgba(0, 0, 0, .62);
  color: #fff; font: 500 11px/1.3 "Inter", sans-serif; letter-spacing: .02em;
  filter: none;
}
/* Untere Scroll-Kante spart die Kennzeichnung aus (Gradient minus Rechteck unten rechts) */
.lg-edge--bottom {
  -webkit-mask-image:
    linear-gradient(0deg, #000 0%, #000 40%, rgb(0 0 0 / .905) 52%, rgb(0 0 0 / .655) 64%, rgb(0 0 0 / .345) 76%, rgb(0 0 0 / .095) 88%, rgb(0 0 0 / 0) 100%),
    linear-gradient(#000 0 0);
  -webkit-mask-size: 100% 100%, 128px 40px;
  -webkit-mask-position: 0 0, right max(4px, env(safe-area-inset-right)) bottom max(4px, env(safe-area-inset-bottom));
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-composite: source-out;
          mask-image:
    linear-gradient(0deg, #000 0%, #000 40%, rgb(0 0 0 / .905) 52%, rgb(0 0 0 / .655) 64%, rgb(0 0 0 / .345) 76%, rgb(0 0 0 / .095) 88%, rgb(0 0 0 / 0) 100%),
    linear-gradient(#000 0 0);
          mask-size: 100% 100%, 128px 40px;
          mask-position: 0 0, right max(4px, env(safe-area-inset-right)) bottom max(4px, env(safe-area-inset-bottom));
          mask-repeat: no-repeat;
          mask-composite: subtract;
}

/* --- v2.1 Kap. 8.1 --- */
.lg-dock { visibility: hidden; transition: visibility 0s linear .3s; }
.lg-dock .lg-action { scale: .6; transition: scale .5s var(--lg-spring), --lg-a .45s ease, box-shadow .45s ease; }
html[data-lg-dock] .lg-dock { visibility: visible; transition-delay: 0s; }
html[data-lg-dock] .lg-dock .lg-action { scale: 1; }
html:not([data-lg-dock]) .lg-edge--bottom { opacity: 0 !important; }

/* --- v2.1 Kap. 8.2 --- */
.lg-call {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 0 14px; margin: 4px 2px; vertical-align: middle; border-radius: 22px;
  background: var(--surface-solid); box-shadow: inset 0 0 0 1.5px var(--accent-orange-text);
  color: var(--ink); text-decoration: none; font: 600 17px/1 "Inter", sans-serif;
}
.lg-call strong { font-weight: 700; color: inherit; }
.lg-call svg { width: 18px; height: 18px; color: var(--accent-orange-text); }
.lg-call:hover { background: color-mix(in srgb, var(--accent-orange) 18%, var(--surface-solid)); }
@media print { .lg-call { min-height: 0; padding: 0; margin: 0; box-shadow: none; } .lg-call svg { display: none; } }

/* --- v2.1 Kap. 8.3 --- */
/* =====================================================================
   CD v2.1 · DARSTELLUNGS-OPTIONEN
   ===================================================================== */
.lg-theme { grid-template-columns: var(--th-cell) var(--th-cell) 44px; }
.lg-theme__more {
  width: 44px; height: var(--th-cell); display: grid; place-items: center;
  border-radius: calc(var(--th-cell) / 2); color: var(--nav-inactive);
  box-shadow: inset 1px 0 0 var(--on-glass-sep);
}
.lg-theme__more:hover { background: var(--on-glass-hover); color: var(--nav-ink); }
.lg-theme__more svg { width: 20px; height: 20px; }
.lg-header[data-lg-stage="schmal"] .lg-theme { grid-template-columns: var(--th-cell) var(--th-cell); }
.lg-header[data-lg-stage="schmal"] .lg-theme__more { display: none; }
.lg-menu__row[aria-pressed="true"]::after {
  content: ""; margin-left: auto; width: 11px; height: 6px;
  border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; rotate: -45deg; translate: 0 -2px;
}
.lg-menu__display { display: none; }
.lg-header[data-lg-stage="schmal"] .lg-bubble .lg-menu__display {
  display: flex; flex-direction: column; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--on-glass-sep);
}

/* ---- Ruhige Darstellung ---- */
html[data-lg-calm] .kita-bg { display: none; }
html[data-lg-calm] { background: radial-gradient(70% 50% at 20% 0%, rgba(201, 136, 250, .10), transparent 70%), var(--page-bg); }
html[data-lg-calm], html[data-lg-calm][data-theme="light"] {
  --group-tint: rgba(255, 255, 255, .0); --tile-fill: #ffffff; --tile-fill-strong: #ffffff; --tile-line: rgba(20, 26, 40, .14);
  --control-fill: #ffffff; --read-fill: #ffffff; --read-tile: #ffffff;
  --nav-a-rest: .96; --nav-a-deep: .96; --nav-a-busy: .98; --nav-blur: 0px; --bubble-a: .98; --bubble-blur: 0px; --edge-blur: 0px;
}
@media screen {
  html[data-lg-calm][data-theme="dark"] {
    --tile-fill: #141c25; --tile-fill-strong: #0f1820; --tile-line: rgba(255, 255, 255, .12);
    --control-fill: #0f1820; --read-fill: #0f1820; --read-tile: #141c25;
    --nav-tint-rgb: 28 28 30; --nav-a-rest: .96; --nav-a-deep: .96; --nav-a-busy: .98; --nav-blur: 0px; --bubble-a: .98; --bubble-blur: 0px;
  }
}
html[data-lg-calm] :is(main .lg-group, #rolle-list > section, #overview-grid > section, .lg-path)::before { content: none !important; }
html[data-lg-calm] :is(.lg-glass, .lg-bubble, .lg-seg__lens, .lg-theme, .lg-search, .glass-card, .lg-dock .lg-action, .kita-bg__img) { transition-duration: .01s !important; }
html[data-lg-calm] :is(.view.active, .view.active *, .lg-seg__lens.is-moving, .lg-theme.is-switching .lg-theme__thumb) { animation: none !important; }
html[data-lg-calm] :is(a, button).glass-card:hover { transform: none; }

/* ---- Leistungs-Probe: Gruppen ohne Blur ---- */
html[data-lg-lite] :is(main .lg-group, #rolle-list > section, #overview-grid > section)::before {
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
html[data-lg-lite] { --group-tint: rgba(246, 243, 250, .90); }
@media screen { html[data-lg-lite][data-theme="dark"] { --group-tint: rgba(11, 20, 28, .78); } }

/* ---- Präsentation ---- */
html[data-lg-present] { font-size: 118%; }
html[data-lg-present][data-theme="light"] { --text-muted: #2a3340; --text-subtle: #333d4a; --nav-inactive: #1f2a36; }
html[data-lg-present] .lg-action { height: 60px; padding: 0 26px; font-size: 18px; --lg-r: 30px; }
html[data-lg-present] .lg-seg :is(.lg-seg__item, .chip, .role-tab, .fassung-btn, .overview-filter-btn) { font-size: 16px !important; }

/* --- v2.1 Kap. 8.5 --- */
@media screen {
  html[data-theme="dark"] { --highlight-gradient: linear-gradient(135deg, #e7c2ff 0%, #d49bff 55%, #c67ff9 100%); }
  html[data-theme="dark"] #hero-suggest .chip { color: var(--text); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
}

/* --- v2.1 Kap. 8.5 --- */
#hero-suggest { gap: 8px; }
#hero-suggest .chip {
  position: relative; display: inline-flex; align-items: center;
  min-height: 36px; padding: 0 14px; border-radius: 18px;
  background: var(--control-fill); box-shadow: inset 0 0 0 1px var(--control-line);
  font: 500 14px/1 "Inter", sans-serif;
}
#hero-suggest .chip::after { content: ""; position: absolute; inset: -4px 0; }

.lg-seg--scroll { --fade-s: 0px; --fade-e: 0px; }
.lg-seg--scroll[data-more-start] { --fade-s: 40px; }
.lg-seg--scroll[data-more-end] { --fade-e: 40px; }
.lg-seg__scroll {
  -webkit-mask: linear-gradient(90deg, rgb(0 0 0 / 0) 0, rgb(0 0 0 / .5) calc(var(--fade-s) * .5), #000 var(--fade-s),
                #000 calc(100% - var(--fade-e)), rgb(0 0 0 / .5) calc(100% - var(--fade-e) * .5), rgb(0 0 0 / 0) 100%);
          mask: linear-gradient(90deg, rgb(0 0 0 / 0) 0, rgb(0 0 0 / .5) calc(var(--fade-s) * .5), #000 var(--fade-s),
                #000 calc(100% - var(--fade-e)), rgb(0 0 0 / .5) calc(100% - var(--fade-e) * .5), rgb(0 0 0 / 0) 100%);
  scroll-snap-type: x proximity;
}
.lg-seg__more {
  position: absolute !important; z-index: 4 !important; right: 8px; top: 50%; translate: 0 -50%;
  width: 22px; height: 22px; display: none; place-items: center; pointer-events: none; color: var(--nav-ink);
}
.lg-seg--scroll[data-more-end] .lg-seg__more { display: grid; }

/* --- v2.1 Kap. 8.5 --- */
html[data-theme="light"] .lg-group > * > p.text-on-surface-variant,
html[data-theme="light"] .lg-group > p.text-on-surface-variant { color: var(--text); }

/* --- v2.1 Kap. 8.5 --- */
@media (max-width: 479px) {
  .lg-dock { flex-wrap: wrap; justify-content: center; width: calc(100vw - 24px); gap: 6px; }
  .lg-action { padding: 0 14px; }
}

/* --- v2.1 Kap. 11.1 --- */
html { scroll-padding-top: 88px; scroll-padding-bottom: 96px; }

/* --- v2.1 Kap. 8.6 (Kann, Auswahl) --- */
.lg-hero-search input, .lg-search__input { text-overflow: ellipsis; }
[style*="rgba(255,182,147,.08)"] ul { grid-auto-flow: dense; align-items: start; }

/* Umsetzung v2.1: Gruppen-Zonen reichen seitlich über den Container hinaus (--fx);
   die Seite darf dadurch nicht horizontal scrollen */
html, body { overflow-x: clip; }
main { overflow-x: clip; }

/* Umsetzung v2.1, Browser-Test: Zonenränder auf dem Desktop noch als helle Fläche erkennbar →
   längerer Auslauf seitlich und oben/unten (Sinus-Maske bleibt, nur die Strecke wächst) */
@media (min-width: 768px) {
  :is(main .lg-group, #rolle-list > section, #overview-grid > section) { --fx: 180px; --fy: 72px; }
}


/* =====================================================================
   Rechtliche Hinweise (kita/_konzept/10-rechtsrisiken-und-rechtstexte.md)
   ===================================================================== */
.lg-legal { font: 400 13px/1.55 "Inter", sans-serif; color: var(--text-muted); letter-spacing: 0; text-transform: none; }
.lg-legal strong { color: var(--ink); font-weight: 600; }
.lg-legal a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
.lg-legal--box { padding: 12px 16px; border-radius: 14px; background: var(--surface-strong); box-shadow: inset 0 0 0 1px var(--surface-border); }
.lg-legal--ki { font-size: 13px; }
.lg-legal--footer p + p { margin-top: .6rem; }
.kita-bg__ai { font-size: 12px !important; }
.print-only { display: none; }
@media print {
  .print-only { display: block !important; }
  .lg-print-note { margin-top: 24px; padding-top: 12px; border-top: 1px solid #999; font: 11px/1.5 "Inter", sans-serif; color: #111; }
}


/* =====================================================================
   Expertenrunde Apple-Designer (kita/_konzept/12a) · umgesetzt 14.09.2026
   ===================================================================== */
/* B2 · Rollen-Segment der Frage-Ansicht: gefüllte Steuerung statt Glas im Inhalt */
#view-frage .lg-seg.lg-glass {
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  background: var(--read-fill) !important;
  box-shadow: inset 0 0 0 1px var(--surface-border), var(--tile-shadow) !important;
}
/* B3 · Akzentränder ruhiger, Oberkante trägt den Akzent */
:root, html[data-theme="light"] { --accent-edge: 22%; }
@media screen { html[data-theme="dark"] { --accent-edge: 10%; } }
.glass-card::before, .lg-surface::before { height: 2px; opacity: .85; }
/* B4 · Pfad-Zeile: Auslauf in Pixeln über die Zeile hinaus */
.lg-path::before {
  inset: -28px calc(-1 * var(--fx));
  --path-mask-y: linear-gradient(180deg,
    rgb(0 0 0 / 0) 0, rgb(0 0 0 / .024) 3px, rgb(0 0 0 / .095) 6px, rgb(0 0 0 / .206) 9px, rgb(0 0 0 / .345) 12px,
    rgb(0 0 0 / .5) 15px, rgb(0 0 0 / .655) 18px, rgb(0 0 0 / .794) 21px, rgb(0 0 0 / .905) 24px, rgb(0 0 0 / .976) 27px,
    #000 30px, #000 calc(100% - 30px),
    rgb(0 0 0 / .976) calc(100% - 27px), rgb(0 0 0 / .905) calc(100% - 24px), rgb(0 0 0 / .794) calc(100% - 21px),
    rgb(0 0 0 / .655) calc(100% - 18px), rgb(0 0 0 / .5) calc(100% - 15px), rgb(0 0 0 / .345) calc(100% - 12px),
    rgb(0 0 0 / .206) calc(100% - 9px), rgb(0 0 0 / .095) calc(100% - 6px), rgb(0 0 0 / .024) calc(100% - 3px), rgb(0 0 0 / 0) 100%);
}
@media (max-width: 767px) { .lg-path::before { inset: -20px calc(50% - 50vw); } }
/* B5 · KI-Kennzeichnung: eine Regel, Aussparung der unteren Kante groß genug */
.kita-bg__ai { font: 500 12px/1.3 "Inter", sans-serif !important; white-space: nowrap; }
.lg-edge--bottom { -webkit-mask-size: 100% 100%, 172px 48px; mask-size: 100% 100%, 172px 48px; }
/* B6 · Aside „Auf einen Blick“ im Ruhezustand unter dem Header frei */
@media (min-width: 1024px) { #view-frage aside > .lg\:sticky { top: 96px; } }
/* B7 · KI-Hinweis im Hero: Position bleibt (Rechtstexte 3d-1 verlangt Nähe zum Hero-Absatz), Satzspiegel ruhiger */
.lg-legal--ki { max-width: 60ch; margin-inline: auto; text-wrap: balance; }
/* B8 · Footer-Hinweise vereinheitlicht */
#footer-disclaimer { font: 400 13px/1.55 "Inter", sans-serif; color: var(--text-muted); }
#footer-disclaimer, .lg-legal--footer p { max-width: 80ch; }
/* B9 · Aktiv-Füllung hell im Farbton der Seite */
:root, html[data-theme="light"] { --on-glass-fill: rgba(40, 30, 70, .08); --on-glass-hover: rgba(40, 30, 70, .05); --on-glass-press: rgba(40, 30, 70, .10); }
/* B10 · kompakte Zone für reine Kachel-Gruppen */
@media (min-width: 768px) {
  :is(main .lg-group, #rolle-list > section, #overview-grid > section).lg-group--tiles { --fy: 40px; --fx: 120px; }
}
/* B11 · Hinweis-Box als Füllung auf Füllung */
.lg-legal--box { background: color-mix(in srgb, var(--ink) 4%, transparent); }
@media screen { html[data-theme="dark"] .lg-legal--box { background: rgba(0, 0, 0, .22); } }
/* B12 · helle Kacheln etwas plastischer */
:root, html[data-theme="light"] { --tile-fill: rgba(255, 255, 255, .66); --tile-line: rgba(40, 30, 70, .10); --tile-shadow: 0 1px 2px rgba(30, 20, 60, .06), 0 10px 24px -14px rgba(30, 20, 60, .22); }
/* B13 · Trenner zwischen Etikett und Brotkrumen */
.lg-path .lg-label + #breadcrumb { margin-left: 12px; padding-left: 12px; box-shadow: inset 1px 0 0 var(--hairline) !important; }
/* B14 · Daumen-Gel mit derselben Amplitude wie das übrige Feedback */
@keyframes lg-gel-soft { 0% { scale: 1 1; } 35% { scale: 1.07 .95; } 70% { scale: .99 1.01; } 100% { scale: 1 1; } }

/* Stufen-Messung: keine Übergänge, damit Breiten sofort feststehen (kita-glass.js › stages) */
.lg-header[data-lg-measuring], .lg-header[data-lg-measuring] * { transition: none !important; }


/* =====================================================================
   Expertenrunde UX (kita/_konzept/12b) · umgesetzt 14.09.2026
   ===================================================================== */
/* B11 · Überschrift als Sprungziel, ohne Ring bei Mausnutzung */
h1[tabindex="-1"]:focus:not(:focus-visible), h2[tabindex="-1"]:focus:not(:focus-visible), main[tabindex="-1"]:focus { outline: none; box-shadow: none; }

/* B13 · Rechtshinweise 14 px mit kleinem „i" */
.lg-legal {
  font: 400 14px/1.6 "Inter", sans-serif; max-width: 68ch;
  display: flex; gap: 8px; align-items: flex-start;
}
.lg-legal::before {
  content: ""; flex: 0 0 16px; height: 16px; margin-top: 3px; border-radius: 50%;
  background: currentColor; opacity: .55;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0Zm-.9 6.5v6h1.8v-6Zm.9-3.3a1.1 1.1 0 1 0 0 2.2 1.1 1.1 0 0 0 0-2.2Z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0Zm-.9 6.5v6h1.8v-6Zm.9-3.3a1.1 1.1 0 1 0 0 2.2 1.1 1.1 0 0 0 0-2.2Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.text-center .lg-legal, .lg-legal.mx-auto, .lg-legal--ki { margin-inline: auto; justify-content: center; }
.lg-legal--footer, .lg-legal--footer p { display: block; max-width: 80ch; }
.lg-legal--footer::before { content: none; }
#footer-disclaimer { font-size: 14px; line-height: 1.6; }

/* B14 · KI-Kennzeichnung als eigene feste Ebene über dem Inhalt, unter Header und Dock */
.kita-bg__ai {
  position: fixed !important; z-index: 30 !important; pointer-events: none;
  right: max(12px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom));
  padding: 4px 9px; border-radius: 999px; background: rgba(0, 0, 0, .66);
  color: #fff; font: 500 12px/1.3 "Inter", sans-serif !important; letter-spacing: .01em; white-space: nowrap;
}
@media (max-width: 767px) { html[data-lg-dock] body:has(#view-frage.active, #view-cluster.active, #view-detail.active) .kita-bg__ai { bottom: calc(76px + env(safe-area-inset-bottom)); } }
@media (max-width: 479px) { html[data-lg-dock] body:has(#view-frage.active, #view-cluster.active, #view-detail.active) .kita-bg__ai { bottom: calc(128px + env(safe-area-inset-bottom)); } }
html[data-lg-calm] .kita-bg__ai { display: none; }
@media print, (forced-colors: active) { .kita-bg__ai { display: none !important; } }
/* Aussparung der unteren Kante entfällt wieder */
.lg-edge--bottom {
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-image: linear-gradient(0deg, #000 0%, #000 40%, rgb(0 0 0 / .905) 52%, rgb(0 0 0 / .655) 64%, rgb(0 0 0 / .345) 76%, rgb(0 0 0 / .095) 88%, rgb(0 0 0 / 0) 100%);
          mask-image: linear-gradient(0deg, #000 0%, #000 40%, rgb(0 0 0 / .905) 52%, rgb(0 0 0 / .655) 64%, rgb(0 0 0 / .345) 76%, rgb(0 0 0 / .095) 88%, rgb(0 0 0 / 0) 100%);
  -webkit-mask-composite: source-over; mask-composite: add;
}

/* B18 · Mobile: Scroll-Padding beim zweireihigen Dock, Sticky-Aside, Pfad-Trefferflächen */
@media (max-width: 479px) { html[data-lg-dock] { scroll-padding-bottom: calc(136px + env(safe-area-inset-bottom)); } }
@media (min-width: 1024px) { #view-detail aside > .lg\:sticky { top: 96px; } }
#breadcrumb :is(a, button) { display: inline-flex; align-items: center; min-height: 32px; }

/* B20 · Kleintexte lesbarer, Footer-Links mit Trefferfläche */
.text-\[10px\], .text-\[11px\] { font-size: 13px !important; }
.font-label.uppercase { letter-spacing: .06em; }
footer nav :is(a, button) { display: inline-flex; align-items: center; min-height: 32px; }

/* B19 · Reduzierte Transparenz und erhöhter Kontrast auch in Gruppen (am Dateiende, schlägt v2.1-Tokens) */
@media (prefers-reduced-transparency: reduce) {
  :root, html[data-theme="light"] { --group-tint: rgba(246, 243, 250, .95); --tile-fill: #fff; --tile-fill-strong: #fff; --control-fill: #fff; --read-fill: #fbfaff; --read-tile: #fbfaff; }
  html[data-theme="dark"] { --group-tint: rgba(11, 20, 28, .93); --tile-fill: #141c25; --tile-fill-strong: #0f1820; --control-fill: #0f1820; --read-fill: #0f1820; --read-tile: #141c25; }
  :is(main .lg-group, #rolle-list > section, #overview-grid > section)::before { -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  :root, html[data-theme="light"] { --group-tint: #fff; --tile-fill: #fff; --tile-fill-strong: #fff; --tile-line: #141a22; --control-fill: #fff; --control-line: #141a22; --read-fill: #fff; --read-tile: #fff; }
  html[data-theme="dark"] { --group-tint: #000; --tile-fill: #000; --tile-fill-strong: #000; --tile-line: #fff; --control-fill: #000; --control-line: #fff; --read-fill: #000; --read-tile: #000; }
}