/* Auto-generated bundle from main.imports.css to avoid @import waterfalls. */
/* Edit C:/Users/lucie/OneDrive/Berufliches/Lucien/eonar.de/assets/css/main.imports.css for import order and entrypoint-level rules. */

/* ---- /assets/css/base/tokens.css ---- */
/* =========================================================
##################
   /assets/css/base/tokens.css
##################
   Design Tokens / Theme
##################
========================================================= */

:root {
  --container: 1120px;
  --pad: clamp(18px, 3vw, 34px);

  /* Typography */
  --ff-base:
    "Quicksand",
    system-ui,
    -apple-system,
    Segoe UI,
    Roboto,
    Helvetica,
    Arial,
    sans-serif;
  --ff-heading: var(--ff-base);

  /* Type scale (keep compact and reusable across components) */
  --fs-2xs: 0.75rem; /* labels, pills, micro-meta */
  --fs-xs: 0.875rem; /* helper text, compact meta */
  --fs-sm: 0.95rem; /* secondary body */
  --fs-md: 1rem; /* body */
  --fs-lg: 1.0625rem; /* lead / emphasized body */
  --fs-xl: 1.125rem; /* card titles / compact section titles */
  --fs-2xl: 1.25rem; /* larger UI titles */

  --fs-h1: clamp(2.15rem, 3.2vw, 3.35rem);
  --fs-h2: clamp(1.6rem, 2.2vw, 2.25rem);
  --fs-h3: 1.05rem;

  --lh-tight: 1.06;
  --lh-snug: 1.12;
  --lh-ui: 1.25;
  --lh-body: 1.6;
  --lh-relaxed: 1.72;

  /* Brand */
  --brand: #007978;
  --brand-deep: #002e2b;
  --ink: #071019;

  /* Theme */
  --bg: var(--ink);
  --fg: rgba(255, 255, 255, 0.96);
  --muted: var(--text-muted);
  --text: var(--fg);
  --text-strong: rgba(255, 255, 255, 0.96);
  --text-main: rgba(255, 255, 255, 0.9);
  --text-muted: rgba(255, 255, 255, 0.78);
  --text-soft: rgba(255, 255, 255, 0.65);
  --text-faint: rgba(255, 255, 255, 0.55);

  --line: rgba(255, 255, 255, 0.12);
  --line-2: rgba(255, 255, 255, 0.1);
  --line-soft: rgba(255, 255, 255, 0.08);
  --line-faint: rgba(255, 255, 255, 0.05);

  --surface-glass-a: rgba(255, 255, 255, 0.075);
  --surface-glass-b: rgba(255, 255, 255, 0.045);
  --surface-card-a: rgba(255, 255, 255, 0.06);
  --surface-card-b: rgba(255, 255, 255, 0.03);
  --surface-panel-a: rgba(10, 16, 24, 0.58);
  --surface-panel-b: rgba(8, 12, 20, 0.86);
  --surface-border: rgba(255, 255, 255, 0.16);
  --surface-border-soft: rgba(255, 255, 255, 0.1);
  --glass-1: var(--surface-glass-a);
  --glass-2: var(--surface-glass-b);
  --glass-border: var(--surface-border);
  --surface-elev-a: var(--surface-card-a);
  --surface-elev-b: var(--surface-card-b);

  --shadow: 0 24px 90px rgba(0, 0, 0, 0.28);
  --shadow-soft: 0 12px 45px rgba(0, 0, 0, 0.2);

  --r: 18px;
  --r-lg: 26px;

  --header-h: 78px; /* dein Header bleibt oben sichtbar */
  --accent: #00b6ad;
  --accent-soft: rgba(0, 190, 190, 0.8);
  --accent-line: rgba(0, 190, 190, 0.18);

  --img-fx-brightness: 1;
  --img-fx-saturate: 1.08;
  --img-fx-contrast: 1.03;
  --img-fx-opacity: 1;
  --bg-overlay-hi: rgba(255, 255, 255, 0.11);
  --bg-overlay-accent: rgba(0, 190, 190, 0.12);
  --bg-overlay-warm: rgba(255, 120, 45, 0.08);
  --bg-fade-top-soft: rgba(0, 0, 0, 0.75);
  --bg-fade-bottom-soft: rgba(0, 0, 0, 0.55);

  /* Page Background Layer */
  --page-bg:
    radial-gradient(
      1100px 700px at 12% 20%,
      rgba(0, 190, 190, 0.22),
      transparent 55%
    ),
    radial-gradient(
      980px 620px at 88% 14%,
      rgba(255, 120, 45, 0.12),
      transparent 58%
    ),
    radial-gradient(
      900px 500px at 85% 10%,
      rgba(255, 255, 255, 0.06),
      transparent 60%
    ),
    radial-gradient(
      1200px 900px at 50% 55%,
      rgba(255, 255, 255, 0.05),
      transparent 65%
    ),
    linear-gradient(180deg, #0b1623 0%, #091523 52%, #08121d 100%);
}

:root[data-theme="light"] {
  --brand: #007978;
  --brand-deep: #005553;
  --ink: #eff5fb;

  --bg: #f4f8fc;
  --fg: rgba(10, 23, 34, 0.94);
  --muted: var(--text-muted);
  --text: var(--fg);
  --text-strong: rgba(10, 23, 34, 0.96);
  --text-main: rgba(10, 23, 34, 0.9);
  --text-muted: rgba(10, 23, 34, 0.76);
  --text-soft: rgba(10, 23, 34, 0.62);
  --text-faint: rgba(10, 23, 34, 0.52);

  --line: rgba(10, 23, 34, 0.14);
  --line-2: rgba(10, 23, 34, 0.1);
  --line-soft: rgba(10, 23, 34, 0.08);
  --line-faint: rgba(10, 23, 34, 0.05);

  --surface-glass-a: rgba(255, 255, 255, 0.78);
  --surface-glass-b: rgba(255, 255, 255, 0.62);
  --surface-card-a: rgba(255, 255, 255, 0.82);
  --surface-card-b: rgba(247, 251, 255, 0.72);
  --surface-panel-a: rgba(255, 255, 255, 0.76);
  --surface-panel-b: rgba(246, 250, 255, 0.68);
  --surface-border: rgba(10, 23, 34, 0.1);
  --surface-border-soft: rgba(10, 23, 34, 0.08);
  --glass-1: var(--surface-glass-a);
  --glass-2: var(--surface-glass-b);
  --glass-border: var(--surface-border);
  --surface-elev-a: var(--surface-card-a);
  --surface-elev-b: var(--surface-card-b);

  --shadow: 0 24px 70px rgba(21, 37, 55, 0.12);
  --shadow-soft: 0 10px 34px rgba(21, 37, 55, 0.08);
  --accent: #007978;
  --accent-soft: rgba(0, 121, 120, 0.82);
  --accent-line: rgba(0, 121, 120, 0.16);

  --img-fx-brightness: 0.97;
  --img-fx-saturate: 1.02;
  --img-fx-contrast: 1.06;
  --img-fx-opacity: 0.94;
  --bg-overlay-hi: rgba(255, 255, 255, 0.035);
  --bg-overlay-accent: rgba(0, 190, 190, 0.02);
  --bg-overlay-warm: rgba(255, 120, 45, 0.03);
  --bg-fade-top-soft: rgba(255, 255, 255, 0.02);
  --bg-fade-bottom-soft: rgba(255, 255, 255, 0.01);

  --page-bg:
    radial-gradient(
      1100px 700px at 10% 14%,
      rgba(0, 190, 190, 0.14),
      transparent 55%
    ),
    radial-gradient(
      900px 540px at 88% 12%,
      rgba(255, 120, 45, 0.1),
      transparent 58%
    ),
    radial-gradient(
      1200px 900px at 50% 58%,
      rgba(30, 80, 140, 0.06),
      transparent 68%
    ),
    linear-gradient(180deg, #f8fbff 0%, #f1f6fb 55%, #eaf2f9 100%);
}


/* ---- /assets/css/base/reset.css ---- */
/* =========================================================
##################
   /assets/css/base/reset.css
##################
   Minimal Reset + Base
##################
========================================================= */

html {
  scroll-behavior: smooth;
  color-scheme: dark;
}

html[data-theme="light"] {
  color-scheme: light;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  line-height: 1.55;
  color: var(--fg);

  background:
    radial-gradient(
      1100px 560px at 16% 12%,
      rgba(0, 121, 120, 0.22),
      transparent 60%
    ),
    radial-gradient(
      900px 520px at 86% 16%,
      rgba(0, 46, 43, 0.14),
      transparent 55%
    ),
    radial-gradient(
      760px 520px at 50% 95%,
      rgba(0, 121, 120, 0.14),
      transparent 55%
    ),
    var(--bg);
}

html[data-theme="light"] body {
  background:
    radial-gradient(
      950px 520px at 14% 10%,
      rgba(0, 121, 120, 0.08),
      transparent 62%
    ),
    radial-gradient(
      840px 460px at 88% 14%,
      rgba(255, 120, 45, 0.05),
      transparent 60%
    ),
    radial-gradient(
      900px 620px at 50% 100%,
      rgba(30, 80, 140, 0.035),
      transparent 68%
    ),
    var(--bg);
}

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

a {
  color: inherit;
}

hr.sep {
  border: 0;
  height: 1px;
  background: var(--line-2);
  margin: 1rem 0;
}

/* Prevent background scroll when any dialog is open */
html:has(dialog[open]),
body:has(dialog[open]) {
  overflow: hidden;
}


/* ---- /assets/css/base/typography.css ---- */
/* =========================================================
##################
   /assets/css/base/typography.css
##################
   Fonts + Headings
##################
========================================================= */

body {
  font-family: var(--ff-base);
}

h1,
h2,
h3 {
  font-family: var(--ff-heading);
}

h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  margin: 0.35rem 0 1rem;
}

h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: -0.02em;
  margin: 0 0 0.65rem;
}

h3 {
  font-size: var(--fs-h3);
  letter-spacing: -0.01em;
  margin: 0 0 0.55rem;
}


/* ---- /assets/css/base/utilities.css ---- */
/* =========================================================
##################
   /assets/css/base/utilities.css
##################
   Utilities + A11y
##################
========================================================= */

.container {
  width: min(var(--container), calc(100% - (var(--pad) * 2)));
  margin-inline: auto;
}

.muted {
  color: var(--muted);
}

.small {
  font-size: var(--fs-sm);
}

.lead {
  font-size: var(--fs-lg);
  color: var(--muted);
  max-width: 62ch;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.78);
  font-size: var(--fs-sm);
  letter-spacing: 0.01em;
  margin: 0 0 0.5rem;
}

/* A11y */
.skip-link {
  position: absolute;
  left: -999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.skip-link:focus {
  left: 16px;
  top: 12px;
  width: auto;
  height: auto;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.16);
  z-index: 999;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}


/* ---- /assets/css/components/glass.css ---- */
/* =========================================================
##################
   /assets/css/components/glass.css
##################
   Glass base surface
##################
========================================================= */

.card,
.feature,
.faq details,
.blog-card,
.contact-card {
  background: linear-gradient(
    180deg,
    var(--surface-glass-a),
    var(--surface-glass-b)
  );
  border: 1px solid var(--surface-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}


/* ---- /assets/css/components/buttons.css ---- */
/* =========================================================
##################
   /assets/css/components/buttons.css
##################
   Buttons
##################
========================================================= */

.btn {
  --btn-fg: var(--text-strong);
  --btn-bg: color-mix(in srgb, var(--text-strong) 5%, transparent);
  --btn-bg-hover: color-mix(in srgb, var(--text-strong) 7%, transparent);
  --btn-border: var(--line);
  --btn-border-hover: var(--surface-border);
  --btn-shadow: none;
  --btn-shadow-hover: var(--btn-shadow);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 14px;
  border: 1px solid var(--btn-border);
  text-decoration: none;
  font-weight: 700;
  color: var(--btn-fg);
  background: var(--btn-bg);
  box-shadow: var(--btn-shadow);
  transition:
    transform 0.15s ease,
    background 0.15s ease,
    border-color 0.15s ease,
    filter 0.15s ease,
    box-shadow 0.15s ease,
    color 0.15s ease;
  will-change: transform;
}

.btn:hover {
  transform: translateY(-1px);
  background: var(--btn-bg-hover);
  border-color: var(--btn-border-hover);
  box-shadow: var(--btn-shadow-hover);
}

.btn:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 74%, white);
  outline-offset: 3px;
}

.btn--ghost {
  --btn-bg: color-mix(in srgb, var(--text-strong) 3%, transparent);
  --btn-bg-hover: color-mix(in srgb, var(--text-strong) 5%, transparent);
}

.btn--small {
  padding: 10px 12px;
  border-radius: 13px;
  font-size: var(--fs-sm);
}

.btn.primary {
  --btn-fg: var(--text-strong);
  --btn-border: color-mix(in srgb, var(--brand) 45%, transparent);
  --btn-border-hover: color-mix(in srgb, var(--brand) 58%, transparent);
  --btn-bg: linear-gradient(
    135deg,
    color-mix(in srgb, var(--brand) 95%, transparent),
    color-mix(in srgb, var(--brand-deep) 75%, transparent)
  );
  --btn-bg-hover: linear-gradient(
    135deg,
    color-mix(in srgb, var(--brand) 100%, transparent),
    color-mix(in srgb, var(--brand-deep) 82%, transparent)
  );
  --btn-shadow:
    0 10px 24px color-mix(in srgb, var(--brand-deep) 32%, transparent),
    inset 0 1px 0 color-mix(in srgb, white 9%, transparent);
  --btn-shadow-hover:
    0 14px 28px color-mix(in srgb, var(--brand-deep) 38%, transparent),
    inset 0 1px 0 color-mix(in srgb, white 14%, transparent);

  color: var(--btn-fg);
  font-weight: 800;
}

.btn.primary:hover {
  filter: brightness(1.05);
}

html[data-theme="light"] .btn {
  --btn-fg: var(--text-strong);
  --btn-bg:
    linear-gradient(
      180deg,
      color-mix(in srgb, white 90%, var(--surface-card-a) 10%),
      color-mix(in srgb, white 84%, var(--surface-card-b) 16%)
    );
  --btn-bg-hover:
    linear-gradient(
      180deg,
      color-mix(in srgb, white 96%, var(--surface-card-a) 4%),
      color-mix(in srgb, white 90%, var(--surface-card-b) 10%)
    );
  --btn-border: var(--line);
  --btn-border-hover: var(--surface-border);
  --btn-shadow:
    0 10px 22px rgba(21, 37, 55, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);
  --btn-shadow-hover:
    0 12px 26px rgba(21, 37, 55, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

html[data-theme="light"] .btn:focus-visible {
  outline-color: color-mix(in srgb, var(--accent) 78%, white);
}

html[data-theme="light"] .btn--ghost {
  --btn-bg: color-mix(in srgb, white 76%, var(--surface-card-a) 24%);
  --btn-bg-hover: color-mix(in srgb, white 86%, var(--surface-card-a) 14%);
  --btn-border: color-mix(in srgb, var(--text-strong) 10%, transparent);
  --btn-border-hover: color-mix(in srgb, var(--text-strong) 16%, transparent);
}

/* Hero CTA needs stronger separation on bright readability panels */
html[data-theme="light"] .hero .btn--ghost {
  --btn-fg: color-mix(in srgb, var(--text-strong) 96%, black);
  --btn-bg:
    linear-gradient(
      180deg,
      color-mix(in srgb, white 94%, var(--brand) 6%),
      color-mix(in srgb, white 88%, var(--surface-card-a) 12%)
    );
  --btn-bg-hover:
    linear-gradient(
      180deg,
      color-mix(in srgb, white 98%, var(--brand) 2%),
      color-mix(in srgb, white 92%, var(--surface-card-a) 8%)
    );
  --btn-border: color-mix(in srgb, var(--brand) 22%, var(--text-strong) 8%);
  --btn-border-hover: color-mix(in srgb, var(--brand) 32%, var(--text-strong) 10%);
  --btn-shadow:
    0 8px 18px rgba(21, 37, 55, 0.06),
    0 0 0 1px color-mix(in srgb, var(--brand) 8%, transparent) inset,
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --btn-shadow-hover:
    0 12px 24px rgba(21, 37, 55, 0.1),
    0 0 0 1px color-mix(in srgb, var(--brand) 12%, transparent) inset,
    inset 0 1px 0 rgba(255, 255, 255, 0.95);

  color: var(--text-strong);
  font-weight: 700;
}

html[data-theme="light"] .hero .btn--ghost:is(:link, :visited, :hover, :focus-visible) {
  color: var(--text-strong);
}

html[data-theme="light"] .btn.primary {
  --btn-fg: #fff;
  --btn-border: color-mix(in srgb, var(--brand) 42%, transparent);
  --btn-border-hover: color-mix(in srgb, var(--brand) 56%, transparent);
  --btn-bg:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--brand) 94%, white 6%),
      color-mix(in srgb, var(--brand-deep) 84%, var(--brand) 16%)
    );
  --btn-bg-hover:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--brand) 100%, white 0%),
      color-mix(in srgb, var(--brand-deep) 88%, var(--brand) 12%)
    );
  --btn-shadow:
    0 12px 26px rgba(0, 46, 43, 0.2),
    0 0 0 1px color-mix(in srgb, var(--brand) 14%, transparent) inset,
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  --btn-shadow-hover:
    0 16px 30px rgba(0, 46, 43, 0.24),
    0 0 0 1px color-mix(in srgb, var(--brand) 18%, transparent) inset,
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

html[data-theme="light"] .btn.primary:hover {
  filter: brightness(1.02);
}

.btn-lg {
  padding: 14px 18px;
  border-radius: 16px;
}

.btn.small {
  padding: 10px 12px;
  border-radius: 13px;
  font-size: var(--fs-sm);
}

.btn svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}


/* Optional: make the “Details” button a bit more consistent */
#usecases .actions .btn {
  min-height: 40px;
  border-radius: 12px;
}


/* ---- /assets/css/components/header.css ---- */
/* =========================================================
   /assets/css/components/header.css
   Header (Top) – Desktop only
   - Mobile nutzt Sidebar (kein mobile nav hier)
   - Kein Header-Logo -> keine .brand_logo Regeln
   - Header scrollt normal weg (nicht sticky)
========================================================= */

.header {
  --header-bg: rgba(9, 15, 24, 0.5);
  --header-bg-compact: rgba(9, 15, 24, 0.62);
  --header-line: var(--line-2);
  --header-link: rgba(255, 255, 255, 0.84);
  --header-link-hover: rgba(255, 255, 255, 0.92);
  --header-link-hover-bg: color-mix(in srgb, var(--text-strong) 5.5%, transparent);
  --header-link-hover-line: var(--line-2);
  --header-link-active: rgba(255, 255, 255, 0.92);
  --header-link-active-bg: color-mix(in srgb, var(--text-strong) 7.5%, transparent);
  --header-link-active-line: var(--surface-border);
  --header-cta-text: var(--text-strong);
  --header-cta-line: var(--accent-line);
  position: relative; /* statt sticky */
  z-index: 60;

  background: var(--header-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  border-bottom: 1px solid var(--header-line);
}

/* optional: wenn du im JS .is-compact setzt */
.header.is-compact {
  background: var(--header-bg-compact);
}

.header_inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;

  padding: 0.9rem var(--pad);
  min-height: var(--header-h);
}

/* Brand (Text-only / optional) */
.header .brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;

  text-decoration: none;
  font-weight: 850;
  letter-spacing: 0.02em;
}

.header .brand_mark {
  font-size: var(--fs-lg);
  display: inline-block;
}

/* Desktop nav */
.header .nav {
  display: flex;
  gap: 0.9rem;
  align-items: center;
}

.header .nav a {
  text-decoration: none;
  color: var(--header-link);

  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid transparent;

  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}

.header .nav a:hover {
  color: var(--header-link-hover);
  background: var(--header-link-hover-bg);
  border-color: var(--header-link-hover-line);
}

.header .nav a.is-active {
  color: var(--header-link-active);
  background: var(--header-link-active-bg);
  border-color: var(--header-link-active-line);
}

.header .nav a.nav_cta {
  margin-left: 4px;
  padding: 9px 14px;
  color: var(--header-cta-text);
  background: linear-gradient(
    135deg,
    rgba(0, 121, 120, 0.9),
    rgba(0, 46, 43, 0.72)
  );
  border-color: var(--header-cta-line);
  box-shadow:
    0 8px 18px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 color-mix(in srgb, var(--text-strong) 8%, transparent);
}

.header .nav a.nav_cta:hover {
  color: var(--text-strong);
  background: linear-gradient(
    135deg,
    rgba(0, 140, 138, 0.95),
    rgba(0, 60, 56, 0.78)
  );
  border-color: color-mix(in srgb, var(--accent) 34%, transparent);
}

.header .nav_muted {
  opacity: 0.72;
}

/* Mobile: Header-Nav komplett aus */
@media (max-width: 920px) {
  .header .nav {
    display: none;
  }
}

html[data-theme="light"] .header {
  --header-bg: rgba(248, 252, 255, 0.72);
  --header-line: rgba(10, 23, 34, 0.08);
}

html[data-theme="light"] .header.is-compact {
  --header-bg-compact: rgba(243, 249, 255, 0.86);
}

html[data-theme="light"] .header .brand,
html[data-theme="light"] .header .brand_mark {
  color: var(--text-strong);
}

html[data-theme="light"] .header .nav a {
  --header-link: rgba(10, 23, 34, 0.78);
  --header-link-hover: rgba(10, 23, 34, 0.96);
  --header-link-hover-bg: rgba(10, 23, 34, 0.04);
  --header-link-hover-line: rgba(10, 23, 34, 0.08);
  --header-link-active: rgba(10, 23, 34, 0.96);
  --header-link-active-bg: rgba(10, 23, 34, 0.06);
  --header-link-active-line: rgba(10, 23, 34, 0.1);
}

html[data-theme="light"] .header .nav a.nav_cta {
  color: rgba(240, 255, 252, 0.98);
  background: linear-gradient(
    135deg,
    rgba(0, 121, 120, 0.96),
    rgba(0, 46, 43, 0.84)
  );
  border-color: color-mix(in srgb, var(--brand) 34%, transparent);
  box-shadow:
    0 10px 20px rgba(0, 46, 43, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

html[data-theme="light"] .header .nav a.nav_cta:hover {
  color: rgba(245, 255, 253, 1);
  background: linear-gradient(
    135deg,
    rgba(0, 134, 132, 0.98),
    rgba(0, 54, 50, 0.88)
  );
  border-color: color-mix(in srgb, var(--brand) 42%, transparent);
}


/* ---- /assets/css/components/sections.css ---- */
/* =========================================================
   /assets/css/components/sections.css
   Sections + Hero specifics
========================================================= */

/* ---------------------------------------
   Base section spacing
--------------------------------------- */
.section {
  position: relative;
  padding: clamp(56px, 7vw, 96px) 0;
  color: var(--text);
  background: transparent; /* Page-Gradient scheint durch */

  /* for overlays blending */
  isolation: isolate;

  /* Entry-Fade Größe (nur non-bg nutzt ::after dafür) */
  --section-entry: clamp(44px, 6vw, 86px);
}

/* Inhalte immer über BG/Overlays */
.section > .container {
  position: relative;
  z-index: 1;
}

/* ---------------------------------------
   Alt section (Highlight) - ohne Bild
--------------------------------------- */
.section--alt {
  position: relative;
}

.section--alt:not(.has-bg)::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;

  /* NICHT mehr vollflächig "milchig" machen,
     sondern nur oben leicht ansoften */
  background:
    radial-gradient(
      900px 420px at 20% 0%,
      color-mix(in srgb, var(--text-strong) 6%, transparent),
      transparent 60%
    ),
    linear-gradient(
      to bottom,
      color-mix(in srgb, var(--text-strong) 2.5%, transparent) 0,
      transparent 240px
    );
  opacity: 1;
}

/* ---------------------------------------
   Background system (opt-in)
   Usage: .section.has-bg + --section-bg variable
--------------------------------------- */
.section.has-bg {
  background: transparent;
  overflow: clip;

  /* Default Werte (pro Section überschreibbar) */
  --bg-dim: 0.74;
  --overlay-top: 0.36;
  --overlay-bottom: 0.58;
  --text-shadow: 0 10px 30px rgba(0, 0, 0, 0.62);
  --edge-mask-top-soft: rgba(0, 0, 0, 0.65);
  --edge-mask-bottom-soft: rgba(0, 0, 0, 0.55);

  /* Stärke des unteren Übergangs */
  --edge-fade: clamp(200px, 18vw, 360px); /* unten */
  --edge-fade-top: clamp(80px, 10vw, 160px); /* oben */
}

/* Bild-Layer */
.section.has-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;

  background-image: var(--section-bg);
  background-size: cover;
  background-position: var(--section-bg-pos, center);
  background-repeat: no-repeat;

  transform: scale(1.02);
  filter: brightness(var(--bg-dim)) saturate(var(--img-fx-saturate))
    contrast(var(--img-fx-contrast));
  opacity: var(--img-fx-opacity);

  /* weicher Ãœbergang nach unten -> Page-Gradient sichtbar */
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    var(--edge-mask-top-soft) var(--edge-fade-top),
    #000 calc(var(--edge-fade-top) + 40px),
    #000 calc(100% - (var(--edge-fade) + 40px)),
    var(--edge-mask-bottom-soft) calc(100% - var(--edge-fade)),
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    var(--edge-mask-top-soft) var(--edge-fade-top),
    #000 calc(var(--edge-fade-top) + 40px),
    #000 calc(100% - (var(--edge-fade) + 40px)),
    var(--edge-mask-bottom-soft) calc(100% - var(--edge-fade)),
    transparent 100%
  );
}

/* Overlay-Layer */
.section.has-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;

  background:
    radial-gradient(
      900px 520px at 20% 30%,
     var(--bg-overlay-hi),
       transparent 60%
     ),
    radial-gradient(
      700px 420px at 88% 18%,
       var(--bg-overlay-accent),
       transparent 64%
     ),
    radial-gradient(
      520px 300px at 14% 82%,
      var(--bg-overlay-warm),
      transparent 70%
    ),
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, var(--overlay-top)),
      rgba(0, 0, 0, var(--overlay-bottom))
    );

  /* gleiches Fade wie Bild */
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    var(--bg-fade-top-soft) var(--edge-fade-top),
    #000 calc(var(--edge-fade-top) + 40px),
    #000 calc(100% - (var(--edge-fade) + 40px)),
    var(--bg-fade-bottom-soft) calc(100% - var(--edge-fade)),
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    var(--bg-fade-top-soft) var(--edge-fade-top),
    #000 calc(var(--edge-fade-top) + 40px),
    #000 calc(100% - (var(--edge-fade) + 40px)),
    var(--bg-fade-bottom-soft) calc(100% - var(--edge-fade)),
    transparent 100%
  );
}

/* Optional: stärkeres Overlay (z.B. Hero) */
.section.has-bg.has-bg--strong {
  --bg-dim: 0.64;
  --overlay-top: 0.46;
  --overlay-bottom: 0.66;
}

/* ---------------------------------------
   Section headings
--------------------------------------- */
.section_head,
.section-head {
  max-width: 780px;
  margin-bottom: 26px;
}

.section_head--row {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-end;
  flex-wrap: wrap;
}

@media (max-width: 760px) {
  .section_head--row {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ---------------------------------------
   Hero
--------------------------------------- */
.hero {
  padding-top: clamp(52px, 7vw, 96px);
}

/* LCP image in markup (instead of CSS background) for better prioritization */
.hero_media {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: clip;
}

.hero_media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--section-bg-pos, center);
  transform: scale(1.02);
  filter: brightness(var(--bg-dim)) saturate(var(--img-fx-saturate))
    contrast(var(--img-fx-contrast));
  opacity: var(--img-fx-opacity);

  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    var(--edge-mask-top-soft) var(--edge-fade-top),
    #000 calc(var(--edge-fade-top) + 40px),
    #000 calc(100% - (var(--edge-fade) + 40px)),
    var(--edge-mask-bottom-soft) calc(100% - var(--edge-fade)),
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    var(--edge-mask-top-soft) var(--edge-fade-top),
    #000 calc(var(--edge-fade-top) + 40px),
    #000 calc(100% - (var(--edge-fade) + 40px)),
    var(--edge-mask-bottom-soft) calc(100% - var(--edge-fade)),
    transparent 100%
  );
}

.hero_grid {
  display: grid;
  gap: clamp(18px, 3vw, 40px);
  grid-template-columns: 1.15fr 0.85fr;
  align-items: start;
}

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

.actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin: 18px 0 18px;
}

/* Text-Lesbarkeit auf BG */
.hero h1,
.hero .lead {
  text-shadow: var(--text-shadow);
}

.hero .lead {
  color: var(--text-main);
}

/* Eyebrow */
.hero .eyebrow {
  display: inline-block;
  margin: 0 0 10px;
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 0;
  color: var(--text-muted);
  font-size: var(--fs-2xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: default;
  user-select: none;
  text-decoration: none;
  text-shadow: none;
}

/* ---------------------------------------
   Hero Card
--------------------------------------- */
.hero_card .card {
  position: sticky;
  top: 18px;
  z-index: 2;

  background: var(--surface-panel-a);
  border: 1px solid var(--surface-border);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

@media (max-width: 980px) {
  .hero_card .card {
    position: relative;
    top: auto;
  }
}

/* Hinweisbox */
.card_note {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--surface-card-a);
  border: 1px solid var(--surface-border);
  color: var(--text-main);
  cursor: default;
}

.card_note strong {
  color: var(--text-strong);
  font-weight: 600;
  text-decoration: none;
}

/* ---------------------------------------
   Background presets
--------------------------------------- */

.hero--bg-1 {
  --section-bg: image-set(
    url("/assets/img/ui/bg-ai-innovation-hand.webp") type("image/webp")
  );
}

.bg--warum-jetzt {
  --section-bg: image-set(
    url("/assets/img/ui/bg-digital-infrastructure.webp") type("image/webp")
  );
}

.bg--rollenvergleich {
  --section-bg: image-set(
    url("/assets/img/ui/bg-ai-coding-automation.webp") type("image/webp")
  );
}

.bg--modell {
  --section-bg: image-set(
    url("/assets/img/ui/bg-digital-9-steps.webp") type("image/webp")
  );
}

.bg--bildung {
  --section-bg: image-set(
    url("/assets/img/ui/bg-ai-creative-intelligence.webp") type("image/webp")
  );
}

.bg--faq {
  --section-bg: image-set(
    url("/assets/img/ui/bg-digital-faq.webp") type("image/webp")
  );
}

.bg--blog {
  --section-bg: image-set(
    url("/assets/img/ui/bg-digital-blog.webp") type("image/webp")
  );
}

/* mobile BG positioning */
@media (max-width: 700px) {
  .hero--bg-1 {
    --section-bg-pos: 30% 25%;
  }

  .hero--lcp {
    --section-bg-pos: 30% 25%;
  }
}

/* Modell: weniger Glass -> mehr editorial */
#modell .model-step {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;

  background: color-mix(in srgb, var(--text-strong) 2%, transparent) !important;
  border: 1px solid var(--line-soft) !important;
}

#modell .model-grid {
  gap: clamp(14px, 2vw, 22px);
}

#modell .model-step {
  padding: 20px;
  min-height: 210px;
  display: flex;
  flex-direction: column;
}

#modell .model-step .actions {
  margin-top: auto;
}

#modell .model-step .eyebrow {
  margin: 0 0 10px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;

  font-size: var(--fs-2xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 800;

  color: color-mix(in srgb, var(--accent) 85%, transparent);
}

/* hübscher: "Step 01" statt nur "1" - ohne HTML Änderung */
#modell .model-step .eyebrow::before {
  content: "Step ";
  margin-right: 6px;
  color: color-mix(in srgb, var(--text-strong) 45%, transparent);
  font-weight: 700;
}

#modell .model-step h3 {
  margin: 0 0 8px;
  font-size: var(--fs-lg);
  line-height: 1.25;
}

#modell .model-step .muted {
  color: var(--text-soft);
  line-height: 1.45;
}

#modell .btn--ghost {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;

  color: var(--text-muted) !important;
  text-decoration: none;
}

#modell .btn--ghost:hover {
  color: color-mix(in srgb, var(--accent) 95%, transparent) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}

#modell .btn--ghost::after {
  content: " \2197";
  color: var(--accent-soft);
}

#modell .model-step {
  position: relative;
}

#modell .model-step::after {
  content: "";
  position: absolute;
  left: 20px;
  top: 42px;
  width: 22px;
  height: 1px;
  background: color-mix(in srgb, var(--accent) 35%, transparent);
  opacity: 0.6;
}

/* Section spacing */
#usecases.section {
  padding-top: clamp(56px, 6vw, 96px);
  padding-bottom: clamp(56px, 6vw, 96px);
}

#usecases .section_head {
  max-width: 920px;
  margin-bottom: clamp(18px, 2.2vw, 28px);
}

#usecases .section_head h2 {
  margin-bottom: 10px;
}

#usecases .section_head .muted {
  line-height: 1.5;
}

/* Actions always bottom */
#usecases .actions {
  margin-top: auto;
  padding-top: 10px;
}





/* ---- /assets/css/components/grids.css ---- */
/* =========================================================
##################
   /assets/css/components/grids.css
##################
   Layout Grids
##################
========================================================= */

.grid2 {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid3 {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 980px) {
  .grid2,
  .grid3 {
    grid-template-columns: 1fr;
  }
}

/* GRID: 3 → 2 → 1 */
#usecases .grid3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 22px);
  align-items: stretch;
}

@media (max-width: 1100px) {
  #usecases .grid3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  #usecases .grid3 {
    grid-template-columns: 1fr;
  }
}


/* ---- /assets/css/components/cards.css ---- */
/* =========================================================
   /assets/css/components/cards.css
   Cards, Lists, Timeline, CTA Row, Steps
========================================================= */

/* =========================
   Base Card
========================= */

.card {
  padding: clamp(22px, 2.5vw, 30px);
}

.card_title {
  margin: 0 0 12px;
  font-weight: 800;
}

/* =========================
   Card Note (Merksatz)
========================= */

.card_note {
  margin-top: 18px;
  padding: 12px 0 12px 18px;
  position: relative;

  background: transparent;
  border: 0;
  border-radius: 0;
  cursor: default;

  color: var(--text-muted);
}

.card_note::before {
  content: "";
  position: absolute;
  left: -3px;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(to bottom, var(--brand), var(--brand-deep));
  border-radius: 2px;
}

.card_note strong {
  margin-right: 6px;
  color: var(--accent);
  font-weight: 600;
}

/* =========================
   Feature Blocks
========================= */

.feature {
  padding: 20px;
}

.feature h3 {
  margin: 0.2rem 0 0.5rem;
}

.feature p {
  margin: 0;
  color: var(--text-muted);
}

/* =========================
   Lists
========================= */

.checklist,
.bullets {
  margin: 0.6rem 0 0;
  padding-left: 1.1rem;
  color: var(--text-muted);
}

.checklist li,
.bullets li {
  margin: 8px 0;
}

/* =========================
   Timeline
========================= */

.timeline {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.timeline_item {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--text-strong) 4%, transparent);
  border: 1px solid var(--line-2);
}

.timeline_k {
  font-weight: 850;
}

.timeline_v {
  color: var(--text-muted);
}

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

/* =========================
   CTA Row
========================= */

.cta-row {
  margin-top: 18px;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  padding: 16px 18px;
  border-radius: 22px;
}

@media (max-width: 760px) {
  .cta-row {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* =========================
   Steps
========================= */

.steps {
  margin: 0;
  padding-left: 1.1rem;
  display: grid;
  gap: 10px;
  color: var(--text-muted);
}

.steps li {
  padding: 14px;
  border-radius: 18px;
  border: 1px solid var(--line-2);
  background: color-mix(in srgb, var(--text-strong) 3%, transparent);
}

.steps strong {
  display: block;
  color: var(--text-main);
  margin-bottom: 6px;
}

.steps span {
  color: var(--text-soft);
  display: block;
}

/* =========================================================
   Rollenvergleich (finale, eine Version)
========================================================= */

#rollenvergleich .table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-md);
}

/* Header minimal & editorial */
#rollenvergleich .table thead th {
  text-align: left;
  padding: 0 0 12px 0;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: var(--fs-2xs);
  color: var(--text-faint);
  border-bottom: 1px solid var(--line-soft);
}

/* Rows */
#rollenvergleich .table tbody th,
#rollenvergleich .table tbody td {
  padding: 18px 0;
  border-bottom: 1px solid var(--line-faint);
  color: var(--text-main);
}

#rollenvergleich .table tbody tr:last-child th,
#rollenvergleich .table tbody tr:last-child td {
  border-bottom: 0;
}

/* Rolle-Spalte */
#rollenvergleich .table tbody th[scope="row"] {
  width: 90px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: var(--fs-xs);
  color: var(--text-main);
}

/* Fokus etwas klarer */
#rollenvergleich .table tbody td:nth-child(2) {
  color: var(--text-main);
}

/* Ziel ruhiger */
#rollenvergleich .table tbody td:nth-child(3) {
  color: var(--text-soft);
}

/* CDO subtil betonen */
#rollenvergleich .table tbody tr:last-child {
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 8%, transparent), transparent 70%);
}

/* Fazit unter Tabelle */
#rollenvergleich .role-conclusion {
  margin-top: 26px;
  display: grid;
  gap: 6px;
  max-width: 720px;
}

#rollenvergleich .role-conclusion p {
  margin: 0;
  color: var(--text-soft);
}

#rollenvergleich .role-conclusion .emphasis {
  color: var(--accent);
  font-weight: 500;
}

/* =========================================================
   Fractional CDO - remove "button feel" for non-interactive UI
========================================================= */

#fractional-cdo .card,
#fractional-cdo .card * {
  cursor: default;
}

/* echte Buttons/Links bleiben klickbar */
#fractional-cdo a,
#fractional-cdo .btn {
  cursor: pointer;
}

/* Eyebrow: nur Typo-Label, keine Pill/Box */
#fractional-cdo .eyebrow {
  display: inline-block;
  margin: 0 0 10px;
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 0;

  font-size: var(--fs-2xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;

  color: var(--text-faint);
}

/* Compare Columns: optisch trennen ohne "Cards" */
#fractional-cdo .compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 12px;
}

@media (max-width: 820px) {
  #fractional-cdo .compare {
    grid-template-columns: 1fr;
  }
}

#fractional-cdo .compare_col {
  padding: 0; /* keine mini-card */
  background: transparent; /* keine Fläche */
  border: 0; /* kein Button-Rand */
}

/* Bullets: keine UI-Flächen/hover, nur Text */
#fractional-cdo .bullets li {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

#fractional-cdo .bullets li:hover {
  background: transparent !important;
}

/* CTA Row: wie "Footer" der Card, nicht wie Button */
#fractional-cdo .cta-row {
  margin-top: 18px;
  padding: 16px 0 0; /* statt große pill-box */
  border-radius: 0;
  background: transparent;
  border: 0;

  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
}

/* dezente Trennlinie über CTA */
#fractional-cdo .cta-row::before {
  content: "";
  display: block;
  height: 1px;
  width: 100%;
  margin: 0 0 14px;
  background: color-mix(in srgb, var(--text-strong) 8%, transparent);
}

/* damit ::before oben sitzt, wenn flex */
#fractional-cdo .cta-row {
  flex-wrap: wrap;
}
#fractional-cdo .cta-row_copy {
  flex: 1 1 320px;
}
#fractional-cdo .cta-row .btn {
  flex: 0 0 auto;
}

/* Optional: Button klarer als einziges "Clickable" Element */
#fractional-cdo .cta-row .btn {
  box-shadow: var(--shadow-soft);
}

html[data-theme="light"] #fractional-cdo .cta-row .btn {
  --btn-fg: var(--text-strong);
  --btn-bg:
    linear-gradient(
      180deg,
      color-mix(in srgb, white 90%, var(--surface-card-a) 10%),
      color-mix(in srgb, white 82%, var(--surface-card-b) 18%)
    );
  --btn-bg-hover:
    linear-gradient(
      180deg,
      color-mix(in srgb, white 96%, var(--surface-card-a) 4%),
      color-mix(in srgb, white 88%, var(--surface-card-b) 12%)
    );
  --btn-border: color-mix(in srgb, var(--text-strong) 10%, transparent);
  --btn-border-hover: color-mix(in srgb, var(--brand) 18%, transparent);
  --btn-shadow:
    0 10px 22px rgba(21, 37, 55, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.88);
  color: var(--btn-fg);
}

/* =========================================
   Use Cases - Editorial Grid (ohne Featured)
========================================= */

/* Grid: weniger "Catalogue", mehr Editorial */
#usecases .grid3 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}

@media (max-width: 720px) {
  #usecases .grid3 {
    grid-template-columns: 1fr;
  }
}

/* Card innen: klarer Rhythmus */
#usecases .card {
  display: grid;
  gap: 0.9rem;
}

#usecases .card h3,
#usecases .card p {
  margin: 0;
}

/* Outcome stilistisch wie "Meta" */
#usecases .card .muted.small {
  color: var(--text-soft);
}

/* Schwerpunkte: keine Pills, sondern Meta-Line */
#usecases .pills {
  list-style: none;
  padding: 0;
  margin: 0.35rem 0 0;

  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

#usecases .pills li {
  padding: 0;
  border: 0;
  background: none;
  border-radius: 0;

  font-size: var(--fs-2xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--text-faint);
}

#usecases .pills li:not(:last-child)::after {
  content: "\00B7";
  margin-left: 0.55rem;
  color: color-mix(in srgb, var(--text-strong) 22%, transparent);
}

/* Details: als Link-CTA statt Button */
#usecases .actions {
  margin-top: 0.2rem;
}

#usecases .actions .btn--ghost {
  padding: 0;
  border: 0;
  background: none;
  border-radius: 0;

  color: var(--text-main);
  font-weight: 600;

  text-decoration: none;
}

#usecases .actions .btn--ghost:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ========================================
   Usecases - Card öffnen (ruhiger)
======================================== */

#usecases .card {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--text-strong) 4%, transparent),
    color-mix(in srgb, var(--text-strong) 2%, transparent)
  );

  border: 1px solid var(--line-soft);
  box-shadow: none;

  padding: 1.8rem 1.8rem 1.6rem;
}

#usecases .card {
  gap: 1rem;
}

#usecases .card h3 {
  font-size: var(--fs-2xl);
  line-height: 1.3;
}

#usecases .card p {
  line-height: 1.55;
}

#usecases .pills li {
  font-size: var(--fs-2xs);
  letter-spacing: 0.14em;
  color: color-mix(in srgb, var(--text-strong) 35%, transparent);
}

#usecases .actions .btn--ghost {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-soft);
}

#usecases .actions .btn--ghost:hover {
  color: var(--text-strong);
}



/* ---- /assets/css/components/modals.css ---- */
/* =========================================================
   /assets/css/components/modal.css
   Modals (Steps + Use Cases) + Magazine layout
   - cleaned: duplicates removed
   - scalable sizing for large screens
   - unified kicker prefix via data-prefix (STEP / USE CASE / UC)
========================================================= */

/* =========================================================
   Base dialog + backdrop
========================================================= */

.modal {
  border: 0;
  padding: 0;
  background: transparent;
}

.modal::backdrop {
  background: rgba(0, 0, 0, 0.68);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* =========================================================
   Modal surface
========================================================= */

.modal_inner {
  position: relative;
  --modal-text: var(--text-main);
  --modal-text-muted: var(--text-muted);
  --modal-text-soft: var(--text-soft);
  --modal-heading: var(--text-strong);
  --modal-line: var(--line-soft);
  --modal-line-strong: var(--line);
  --modal-surface-a: rgba(18, 18, 22, 0.92);
  --modal-surface-b: rgba(10, 10, 14, 0.96);
  --modal-box: color-mix(in srgb, var(--text-strong) 2%, transparent);
  --modal-box-line: var(--line-soft);
  --modal-accent: var(--accent-soft);

  /* bigger on large screens, still safe on small */
  width: min(1200px, 86vw);
  margin: 6vh auto;

  /* keep within viewport */
  max-height: 92vh;
  overflow: auto;
  -webkit-overflow-scrolling: touch;

  /* padding with close-button safe zone */
  padding: clamp(24px, 3vw, 44px);
  padding-right: clamp(56px, 5vw, 76px);

  border-radius: 24px;
  border: 1px solid var(--modal-line-strong);

  background: linear-gradient(
    180deg,
    var(--modal-surface-a),
    var(--modal-surface-b)
  );

  box-shadow: 0 50px 110px rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  color: var(--modal-text);

  /* scrollbar gutter prevents layout shift when scrollbars appear */
  scrollbar-gutter: stable both-edges;
}

/* Magazine variant (longform): only adds reading comfort */
.modal_inner--mag {
  line-height: 1.6;
}

/* Larger screens: allow wider modals */
@media (min-width: 1200px) {
  .modal_inner {
    width: min(1280px, 84vw);
    margin: 5vh auto;
  }
}

@media (min-width: 1600px) {
  .modal_inner {
    width: min(1400px, 85vw);
  }
}

@media (min-width: 1920px) {
  .modal_inner {
    width: min(1600px, 82vw);
  }
}

/* Mobile: slightly tighter corners */
@media (max-width: 700px) {
  .modal_inner {
    margin: 6vh auto;
    border-radius: 20px;
  }
}

/* =========================================================
   Close button
========================================================= */

.modal_close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 20;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 38px;
  height: 38px;
  border-radius: 12px;

  border: 1px solid var(--modal-line-strong);
  background: rgba(10, 10, 14, 0.55);
  color: var(--modal-heading);

  font-size: 22px;
  line-height: 1;
  cursor: pointer;

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.modal_close:hover {
  border-color: rgba(0, 190, 190, 0.35);
}

/* =========================================================
   Typography
========================================================= */

.modal_inner h3 {
  margin: 0 0 14px;
  font-size: clamp(1.2rem, 1.2vw + 1rem, 1.65rem);
  line-height: 1.15;
}

.modal_lead {
  margin: 0 0 22px;
  font-size: var(--fs-lg);
  line-height: 1.45;
  color: var(--modal-text);
}

/* Section heading */
.modal_h,
.modal_inner--mag h4 {
  margin: 22px 0 10px;
  font-size: var(--fs-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--modal-text-soft);
}

/* default h5 in mag mode */
.modal_inner--mag h5 {
  margin: 0 0 10px;
  font-size: var(--fs-xs);
  color: var(--modal-heading);
}

/* Small subhead inside boxes */
.modal_sh {
  margin: 0 0 10px;
  font-size: var(--fs-xs);
  font-weight: 750;
  color: var(--modal-heading);
}

.modal_p {
  margin: 0;
  line-height: 1.55;
  color: var(--modal-text-muted);
}

/* tighter paragraphs in sections */
.modal_section .modal_p + .modal_p {
  margin-top: 12px;
}

/* =========================================================
   Kicker (STEP / USE CASE / UC) – driven by data-prefix
========================================================= */

.modal_head {
  padding-right: 44px; /* room for close button */
  margin-bottom: 18px;
}

.modal_kicker {
  margin: 0 0 10px;
  font-size: var(--fs-2xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 850;
  color: var(--modal-accent);
}

.modal_kicker::before {
  content: attr(data-prefix);
  margin-right: 0.6rem;
  opacity: 0.7;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.75em;
}

/* Legacy/simple modals (optional) */
.modal_step {
  margin: 0 0 10px;
  font-size: var(--fs-2xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--modal-accent);
}

/* =========================================================
   Lists
========================================================= */

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

.modal_list li {
  position: relative;
  padding-left: 18px;
  margin: 10px 0;
  line-height: 1.45;
  color: var(--modal-text-muted);
}

.modal_list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 8px;
  height: 2px;
  border-radius: 2px;
  background: var(--modal-accent);
}

/* =========================================================
   Sections rhythm
========================================================= */

.modal_section {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--modal-line);
}

.modal_section:first-of-type {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* =========================================================
   Layout helpers
========================================================= */

.modal_grid {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

.modal_grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 760px) {
  .modal_grid--2 {
    grid-template-columns: 1fr;
  }
}

.modal_stack {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

/* Boxes (editorial panels, NOT button-like) */
.modal_box {
  padding: 14px;
  border-radius: 16px;

  background: var(--modal-box);
  border: 1px solid var(--modal-box-line);
  box-shadow: none;
}

.modal_box .modal_list li {
  margin: 8px 0;
}

/* Callout */
.modal_callout {
  margin-top: 14px;
  padding: 14px 14px 14px 16px;
  border-radius: 16px;

  background: linear-gradient(
    180deg,
    rgba(0, 190, 190, 0.08),
    rgba(255, 255, 255, 0.02)
  );
  border: 1px solid rgba(0, 190, 190, 0.18);
  box-shadow: none;
}

.modal_callout strong {
  display: block;
  margin-bottom: 6px;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 750;
}

.modal_callout .modal_p {
  color: rgba(255, 255, 255, 0.78);
}

/* Numbered steps list (for Step 3) */
.modal_steps {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;

  display: grid;
  gap: 10px;
}

.modal_steps li {
  padding: 12px 12px 12px 14px;
  border-radius: 16px;

  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.modal_steps li strong {
  display: block;
  margin-bottom: 6px;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 750;
}

.modal_steps li span {
  display: block;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.45;
}

/* Less "UI": no hover cursor for text */
.modal_inner--mag *:not(button):not(a) {
  cursor: default;
}

/* =========================================================
   Related / Blog block (optional)
========================================================= */

.modal_related {
  margin-top: 26px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);

  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: baseline;

  color: rgba(255, 255, 255, 0.62);
  font-size: var(--fs-sm);
}

.modal_link {
  color: rgba(0, 190, 190, 0.95);
  text-decoration: none;
}

.modal_link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* =========================================================
   Scrollbars (subtle + inset)
========================================================= */

.modal_inner {
  /* Firefox */
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}

.modal_inner::-webkit-scrollbar {
  width: 10px;
}

.modal_inner::-webkit-scrollbar-track {
  background: transparent;
}

.modal_inner::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: padding-box;
}

.modal_inner::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.22);
}


/* ---- /assets/css/components/sidebar.css ---- */
/* =========================================================
   /assets/css/components/sidebar.css
   Desktop Sidebar (>= 921px)
   - Hidden bis Scroll; aktiviert via .is-active
   - UI Collapse: schmale "floating pill" + Icon-Nav + ausfahrender Label-Pill
========================================================= */

/* Mobile: Sidebar aus (Mobile nutzt Sidebar in deinem Setup ggf. anders) */
.sidebar {
  display: none;
}

@media (min-width: 921px) {
  /* =========================================================
     Shell (Desktop default)
  ========================================================= */
  .sidebar {
    --sb-shell-line: color-mix(in srgb, var(--text-strong) 11%, transparent);
    --sb-shell-shine: rgba(255, 255, 255, 0.08);
    --sb-shell-shine-2: rgba(255, 255, 255, 0.05);
    --sb-top-line: var(--line-2);
    --sb-bottom-line: var(--line-soft);
    --sb-text: var(--text-muted);
    --sb-text-strong: color-mix(in srgb, var(--text-strong) 92%, transparent);
    --sb-text-muted: color-mix(in srgb, var(--text-strong) 74%, transparent);
    --sb-toggle-line: var(--line-2);
    --sb-toggle-bg: rgba(255, 255, 255, 0.045);
    --sb-toggle-fg: rgba(255, 255, 255, 0.82);
    --sb-toggle-hover-bg: rgba(255, 255, 255, 0.075);
    --sb-toggle-hover-line: rgba(255, 255, 255, 0.12);
    --sb-scroll-thumb: color-mix(in srgb, var(--text-strong) 14%, transparent);
    --sb-scroll-firefox: color-mix(in srgb, var(--text-strong) 18%, transparent);
    --sb-link-hover-bg: rgba(255, 255, 255, 0.05);
    --sb-link-hover-line: var(--line-2);
    --sb-icon-pill-line: var(--line-soft);
    --sb-icon-pill-bg: rgba(255, 255, 255, 0.03);
    --sb-icon-pill-hover-bg: rgba(255, 255, 255, 0.06);
    --sb-icon-pill-hover-line: rgba(255, 255, 255, 0.12);
    --sb-shell-accent: color-mix(in srgb, var(--brand) 20%, transparent);
    --sb-shell-accent-clear: transparent;
    --sb-shell-dark-a: rgba(12, 18, 27, 0.56);
    --sb-shell-dark-b: rgba(9, 14, 22, 0.42);
    --sb-shell-spot-clear: transparent;
    --sb-shell-shadow: 0 18px 50px rgba(0, 0, 0, 0.32);
    --sb-brand-shadow: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.35));
    --sb-active-text: var(--text-strong);
    --sb-active-bg: color-mix(in srgb, var(--brand) 10%, transparent);
    --sb-active-line: color-mix(in srgb, var(--brand) 28%, transparent);
    --sb-active-ring: color-mix(in srgb, var(--brand) 10%, transparent);
    --sb-active-bar: color-mix(in srgb, var(--brand) 55%, transparent);
    --sb-focus-ring: color-mix(in srgb, var(--accent) 85%, transparent);
    --sb-toggle-track-bg: rgba(255, 255, 255, 0.03);
    --sb-toggle-thumb-bg: rgba(255, 255, 255, 0.92);
    --sb-shell-inset-shine-1: rgba(255, 255, 255, 0.08);
    --sb-shell-inset-shine-2: rgba(255, 255, 255, 0.05);
    --sb-toggle-thumb-shadow:
      0 2px 8px rgba(0, 0, 0, 0.25),
      inset 0 1px 0 rgba(255, 255, 255, 0.35);
    --sb-collapsed-hover-shadow:
      0 14px 40px rgba(0, 0, 0, 0.45),
      inset 0 1px 0 rgba(255, 255, 255, 0.06);
    --sb-collapsed-active-shadow: 0 0 0 1px color-mix(in srgb, var(--brand) 10%, transparent) inset;
    --sb-collapsed-icon-glow: drop-shadow(0 0 10px color-mix(in srgb, var(--brand) 25%, transparent));
    display: block;
    position: fixed;
    left: 16px;
    top: 16px;
    bottom: 16px;
    width: 260px;
    z-index: 55;

    border-radius: 26px;
    overflow: hidden;

    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);

    border: 1px solid var(--sb-shell-line);

    background:
      radial-gradient(
        120% 90% at 20% 10%,
        var(--sb-shell-accent) 0%,
        var(--sb-shell-accent-clear) 55%
      ),
      radial-gradient(
        90% 80% at 80% 20%,
        var(--sb-shell-shine) 0%,
        var(--sb-shell-spot-clear) 60%
      ),
      linear-gradient(
        180deg,
        var(--sb-shell-dark-a) 0%,
        var(--sb-shell-dark-b) 100%
      );

    box-shadow:
      var(--sb-shell-shadow),
      inset 0 1px 0 var(--sb-shell-inset-shine-1),
      inset 0 0 0 1px var(--sb-shell-inset-shine-2);

    opacity: 0;
    pointer-events: none;
    transform: translateX(-8px);
    transition:
      opacity 180ms ease,
      transform 180ms ease,
      width 200ms ease;
  }

  .sidebar.is-active {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
  }

  /* Content offset when sidebar is active */
  html.has-sidebar main#main {
    margin-left: 300px;
    transition: margin-left 200ms ease;
  }

  /* =========================================================
     Layout (default)
  ========================================================= */
  .sidebar_inner {
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 22px 18px;
    gap: 18px;
    overflow: hidden;
  }

  /* =========================================================
     Top / Brand (default)
  ========================================================= */
  .sidebar_top {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--sb-top-line);
  }

  .sidebar_top,
  .sidebar_bottom {
    flex: 0 0 auto;
  }

  .brand--sidebar {
    display: flex;
    align-items: center;
    padding: 0;
  }

  .brand--sidebar .brand_logo {
    height: 80px;
    width: auto;
    filter: var(--sb-brand-shadow);
  }

  .sidebar_tagline {
    margin: 0;
    max-width: 24ch;
    line-height: 1.35;
    opacity: 0.84;
  }

  /* Toggle (default) */
  .sidebar_toggle {
    position: absolute;
    right: 0;
    top: 0;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 36px;
    height: 36px;
    border-radius: 12px;

    border: 1px solid var(--sb-toggle-line);
    background: var(--sb-toggle-bg);
    color: var(--sb-toggle-fg);

    cursor: pointer;
    transition:
      background 0.15s ease,
      border-color 0.15s ease,
      transform 0.15s ease;
  }

  .sidebar_toggle:hover {
    background: var(--sb-toggle-hover-bg);
    border-color: var(--sb-toggle-hover-line);
    transform: translateY(-1px);
  }

  /* =========================================================
     Navigation (default)
  ========================================================= */
  .sidebar_nav {
    flex: 1 1 auto;
    min-height: 0;
    max-height: 100%;
    overflow-y: auto;
    padding-right: 6px;
    scrollbar-gutter: stable;

    scrollbar-width: thin;
    scrollbar-color: var(--sb-scroll-firefox) transparent;
  }

  .sidebar_nav::-webkit-scrollbar {
    width: 8px;
  }
  .sidebar_nav::-webkit-scrollbar-thumb {
    background: var(--sb-scroll-thumb);
    border-radius: 99px;
    border: 2px solid transparent;
    background-clip: content-box;
  }

  .sidebar_group {
    margin-bottom: 12px;
  }

  /* Group title: Heading Look (default) */
  .sidebar_group_title {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 0;

    width: 100%;
    text-align: left;
    font: inherit;
    color: inherit;

    margin: 14px 0 8px;
    padding: 0;

    font-size: var(--fs-2xs);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    opacity: 0.55;

    cursor: default;
    user-select: text;

    display: flex;
    align-items: center;
    gap: 10px;
  }

  /* Icon slot (default hidden) */
  .sidebar_group_icon {
    width: 0;
    height: 18px;
    overflow: hidden;
    opacity: 0;

    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .sidebar_group_icon svg {
    width: 18px;
    height: 18px;
    display: block;
  }

  /* Links */
  .sidebar_nav a {
    display: block;
    position: relative;
    padding: 8px 10px;
    border-radius: 12px;
    line-height: 1.25;

    text-decoration: none;
    font-size: var(--fs-sm);
    color: var(--sb-text);

    border: 1px solid transparent;
    transition:
      background 0.15s ease,
      border-color 0.15s ease,
      color 0.15s ease,
      transform 0.15s ease;
  }

  .sidebar_nav a:hover {
    color: var(--sb-text-strong);
    background: var(--sb-link-hover-bg);
    border-color: var(--sb-link-hover-line);
    transform: translateX(2px);
  }

  .sidebar:not(.is-collapsed-ui) .sidebar_nav a.is-active {
    color: var(--sb-active-text);
    background: var(--sb-active-bg);
    border-color: var(--sb-active-line);
    box-shadow: 0 0 0 1px var(--sb-active-ring) inset;
    padding-left: 14px;
  }

  .sidebar:not(.is-collapsed-ui) .sidebar_nav a.is-active::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 6px;
    bottom: 6px;
    width: 2px;
    border-radius: 999px;
    background: var(--sb-active-bar);
    opacity: 0.9;
  }

  /* =========================================================
     Bottom (default)
  ========================================================= */
  .sidebar_bottom {
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-top: 1px solid var(--sb-bottom-line);
    padding-top: 14px;
  }

  .sidebar_bottom .btn {
    width: 100%;
    justify-content: center;
  }

  .sidebar_meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 8px;
    opacity: 0.7;
  }

  .sidebar_theme_toggle {
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid var(--line);
    background: color-mix(in srgb, var(--text-strong) 4%, transparent);
    color: inherit;
    border-radius: 999px;
    padding: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition:
      background 0.15s ease,
      border-color 0.15s ease,
      transform 0.15s ease;
  }

  .sidebar_theme_toggle:hover {
    background: color-mix(in srgb, var(--text-strong) 7%, transparent);
    border-color: var(--surface-border);
  }

  .sidebar_theme_toggle:focus-visible {
    outline: 2px solid var(--sb-focus-ring);
    outline-offset: 2px;
  }

  .sidebar_theme_toggle-track {
    position: relative;
    width: 48px;
    height: 22px;
    border-radius: 999px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    padding: 0 5px;
    gap: 2px;
    background: var(--sb-toggle-track-bg);
  }

  .sidebar_theme_toggle-icon {
    font-size: 11px;
    line-height: 1;
    opacity: 0.72;
    text-align: center;
    z-index: 1;
    user-select: none;
  }

  .sidebar_theme_toggle-thumb {
    position: absolute;
    top: 1px;
    left: 1px;
    width: 18px;
    height: 18px;
    border-radius: 999px;
    background: var(--sb-toggle-thumb-bg);
    box-shadow: var(--sb-toggle-thumb-shadow);
    transform: translateX(0);
    transition: transform 0.16s ease;
  }

  html[data-theme="light"] .sidebar_theme_toggle-thumb {
    transform: translateX(26px);
  }

  html[data-theme="light"] .sidebar_theme_toggle,
  html[data-theme="light"] .sidebar_theme_toggle-track {
    border-color: var(--sb-toggle-line);
    background: var(--sb-toggle-track-bg);
  }

  html[data-theme="light"] .sidebar_theme_toggle-icon {
    opacity: 0.82;
  }

  /* =========================================================
     Collapsed UI (.is-collapsed-ui)
     - floating pill, zentriert
     - Toggle mittig oben
     - Nur Icon-Buttons + ausfahrender Label-Pill
     - Logo swap (top aus, bottom an)
  ========================================================= */
  .sidebar.is-collapsed-ui {
    width: 72px;

    top: 50%;
    bottom: auto;
    height: auto;
    overflow: visible;

    transform: translateY(-50%) translateX(-8px);
  }

  .sidebar.is-collapsed-ui.is-active {
    transform: translateY(-50%) translateX(0);
  }

  html.has-sidebar.sidebar-ui-collapsed main#main {
    margin-left: 112px;
  }

  .sidebar.is-collapsed-ui .sidebar_inner {
    height: auto;
    padding: 12px 10px 14px;
    gap: 10px;
    align-items: center;
    overflow: visible;
  }

  /* Top: nur Toggle */
  .sidebar.is-collapsed-ui .sidebar_top {
    width: 100%;
    border: 0;
    padding-bottom: 0;
    gap: 0;
    min-height: 44px;

    align-items: center;
    justify-content: center;
  }

  .sidebar.is-collapsed-ui .sidebar_toggle {
    position: absolute;
    left: 50%;
    right: auto;
    top: 0;
    transform: translateX(-50%);
  }

  .sidebar.is-collapsed-ui .sidebar_tagline {
    display: none;
  }

  /* Nav als Icon-Liste */
  .sidebar.is-collapsed-ui .sidebar_nav {
    width: 100%;
    max-height: none;
    overflow: visible;
    padding: 10px 0 0;

    display: flex;
    flex-direction: column;
    gap: 10px;

    flex: 0 0 auto;
  }

  /* wichtig: damit Button nur nach rechts wachsen kann */
  .sidebar.is-collapsed-ui .sidebar_group {
    margin: 0;
    width: 100%;
    display: flex;
    justify-content: flex-start;
  }

  /* Icon-Button, der beim Hover ausfährt */
  .sidebar.is-collapsed-ui .sidebar_group_title {
    width: 44px;
    height: 44px;
    margin: 0 0 0 4px;
    padding: 0 14px 0 12px;

    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;

    border: 1px solid var(--sb-icon-pill-line);
    background: var(--sb-icon-pill-bg);

    cursor: pointer;
    opacity: 1;

    overflow: visible;
    white-space: nowrap;

    transition:
      width 160ms ease,
      background 0.15s ease,
      border-color 0.15s ease,
      box-shadow 0.15s ease;
  }

  .sidebar.is-collapsed-ui .sidebar_group_title:hover {
    background: var(--sb-icon-pill-hover-bg);
    border-color: var(--sb-icon-pill-hover-line);
  }

  /* Icons sichtbar, Links aus */
  .sidebar.is-collapsed-ui .sidebar_group_icon {
    width: 18px;
    min-width: 18px;
    opacity: 0.9;
    overflow: visible;
  }

  .sidebar.is-collapsed-ui .sidebar_group > a {
    display: none;
  }

  /* Klick-Fix: Button bekommt immer den Klick */
  .sidebar.is-collapsed-ui .sidebar_group_title svg,
  .sidebar.is-collapsed-ui .sidebar_group_icon {
    pointer-events: none;
  }

  /* Label im collapsed Zustand animierbar statt display:none */
  .sidebar.is-collapsed-ui .sidebar_group_text {
    display: inline-block;
    max-width: 0;
    opacity: 0;
    transform: translateX(-6px);

    transition:
      max-width 160ms ease,
      opacity 120ms ease,
      transform 160ms ease;
  }

  /* Hover + Keyboard-Focus: Button fährt aus */
  .sidebar.is-collapsed-ui .sidebar_group_title:is(:hover, :focus-visible) {
    width: max-content;
    box-shadow:
      var(--sb-collapsed-hover-shadow);
  }

  .sidebar.is-collapsed-ui
    .sidebar_group_title:is(:hover, :focus-visible)
    .sidebar_group_text {
    max-width: 220px;
    opacity: 1;
    transform: translateX(0);
  }

  /* Active group highlight + dauerhaft ausgefahren */
  .sidebar.is-collapsed-ui
    .sidebar_group:has(a.is-active)
    .sidebar_group_title {
    width: max-content;
    border-color: color-mix(in srgb, var(--sb-active-line) 100%, transparent);
    background: var(--sb-active-bg);
    box-shadow: var(--sb-collapsed-active-shadow);
  }

  .sidebar.is-collapsed-ui .sidebar_group:has(a.is-active) .sidebar_group_icon {
    filter: var(--sb-collapsed-icon-glow);
  }

  .sidebar.is-collapsed-ui .sidebar_group:has(a.is-active) .sidebar_group_text {
    max-width: 220px;
    opacity: 1;
    transform: translateX(0);
  }

  /* Bottom CTA aus */
  .sidebar.is-collapsed-ui .sidebar_bottom {
    display: none;
  }

  /* Logo swap */
  .sidebar .brand--bottom {
    display: none;
  }

  .sidebar.is-collapsed-ui .brand--top {
    display: none;
  }

  .sidebar.is-collapsed-ui .brand--bottom {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--sb-bottom-line);
  }

  .sidebar.is-collapsed-ui .brand--bottom .brand_logo {
    height: 28px;
    width: auto;
    max-width: 44px;
    display: block;
  }
}

.sidebar.is-collapsed-ui .sidebar_group_title {
  position: relative;
  z-index: 5;
}

html[data-theme="light"] .sidebar {
  --sb-shell-line: var(--line-2);
  --sb-shell-shine: rgba(255, 255, 255, 0.8);
  --sb-shell-shine-2: rgba(255, 255, 255, 0.5);
  --sb-shell-accent-clear: transparent;
  --sb-shell-spot-clear: transparent;
  --sb-top-line: var(--line-soft);
  --sb-bottom-line: var(--line-soft);
  --sb-text: var(--text-main);
  --sb-text-strong: var(--text-strong);
  --sb-text-muted: var(--text-muted);
  --sb-toggle-line: var(--line-2);
  --sb-toggle-bg: rgba(255, 255, 255, 0.55);
  --sb-toggle-fg: color-mix(in srgb, var(--text-strong) 72%, transparent);
  --sb-toggle-hover-bg: rgba(255, 255, 255, 0.8);
  --sb-toggle-hover-line: var(--line);
  --sb-scroll-thumb: color-mix(in srgb, var(--text-strong) 20%, transparent);
  --sb-scroll-firefox: color-mix(in srgb, var(--text-strong) 22%, transparent);
  --sb-link-hover-bg: color-mix(in srgb, var(--text-strong) 4%, transparent);
  --sb-link-hover-line: var(--line-soft);
  --sb-icon-pill-line: var(--line-2);
  --sb-icon-pill-bg: rgba(255, 255, 255, 0.55);
  --sb-icon-pill-hover-bg: rgba(255, 255, 255, 0.8);
  --sb-icon-pill-hover-line: var(--line);
  --sb-shell-accent: color-mix(in srgb, var(--brand) 10%, transparent);
  --sb-shell-dark-a: rgba(255, 255, 255, 0.78);
  --sb-shell-dark-b: rgba(246, 250, 255, 0.68);
  --sb-shell-shadow: 0 18px 50px rgba(21, 37, 55, 0.12);
  --sb-brand-shadow: drop-shadow(0 6px 18px rgba(21, 37, 55, 0.12));
  --sb-active-text: var(--text-strong);
  --sb-active-bg: color-mix(in srgb, var(--brand) 8%, transparent);
  --sb-active-line: color-mix(in srgb, var(--brand) 22%, transparent);
  --sb-active-ring: color-mix(in srgb, var(--brand) 8%, transparent);
  --sb-active-bar: color-mix(in srgb, var(--brand) 68%, transparent);
  --sb-focus-ring: color-mix(in srgb, var(--brand) 55%, transparent);
  --sb-toggle-track-bg: rgba(10, 23, 34, 0.03);
  --sb-toggle-thumb-bg: rgba(10, 23, 34, 0.86);
  --sb-shell-inset-shine-1: rgba(255, 255, 255, 0.8);
  --sb-shell-inset-shine-2: rgba(255, 255, 255, 0.5);
  --sb-toggle-thumb-shadow:
    0 2px 8px rgba(21, 37, 55, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  --sb-collapsed-hover-shadow:
    0 14px 34px rgba(21, 37, 55, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.42);
  --sb-collapsed-active-shadow:
    0 10px 28px color-mix(in srgb, var(--brand) 8%, transparent),
    0 0 0 1px color-mix(in srgb, var(--brand) 8%, transparent) inset;
  --sb-collapsed-icon-glow: drop-shadow(0 0 10px color-mix(in srgb, var(--brand) 16%, transparent));
  border-color: var(--sb-shell-line);
  background:
    radial-gradient(
      120% 90% at 20% 10%,
      var(--sb-shell-accent) 0%,
      var(--sb-shell-accent-clear) 55%
    ),
    radial-gradient(
      90% 80% at 80% 20%,
      color-mix(in srgb, var(--sb-shell-shine) 82%, transparent) 0%,
      var(--sb-shell-spot-clear) 60%
    ),
    linear-gradient(
      180deg,
      var(--sb-shell-dark-a) 0%,
      var(--sb-shell-dark-b) 100%
    );
  box-shadow:
    var(--sb-shell-shadow),
    inset 0 1px 0 var(--sb-shell-inset-shine-1),
    inset 0 0 0 1px var(--sb-shell-inset-shine-2);
}

html[data-theme="light"] .sidebar_top,
html[data-theme="light"] .sidebar_bottom {
  border-color: var(--sb-top-line);
}

html[data-theme="light"] .sidebar_bottom .btn,
html[data-theme="light"] .sidebar_bottom .btn.btn--ghost {
  --btn-fg: var(--text-strong);
  --btn-bg:
    linear-gradient(
      180deg,
      color-mix(in srgb, white 92%, var(--surface-card-a) 8%),
      color-mix(in srgb, white 84%, var(--surface-card-b) 16%)
    );
  --btn-bg-hover:
    linear-gradient(
      180deg,
      color-mix(in srgb, white 98%, var(--surface-card-a) 2%),
      color-mix(in srgb, white 90%, var(--surface-card-b) 10%)
    );
  --btn-border: color-mix(in srgb, var(--text-strong) 10%, transparent);
  --btn-border-hover: color-mix(in srgb, var(--brand) 18%, transparent);
  --btn-shadow:
    0 8px 20px rgba(21, 37, 55, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

html[data-theme="light"] .sidebar_tagline,
html[data-theme="light"] .sidebar_group_title,
html[data-theme="light"] .sidebar_meta {
  color: var(--sb-text-muted);
  opacity: 1;
}

html[data-theme="light"] .sidebar_toggle {
  color: var(--sb-toggle-fg);
}

html[data-theme="light"] .sidebar_toggle:hover {
  background: var(--sb-toggle-hover-bg);
}

html[data-theme="light"] .sidebar_nav {
  scrollbar-color: var(--sb-scroll-firefox) transparent;
}

html[data-theme="light"] .sidebar_nav::-webkit-scrollbar-thumb {
  background: var(--sb-scroll-thumb);
}

html[data-theme="light"] .sidebar_nav a {
  color: var(--sb-text);
}

html[data-theme="light"] .sidebar_nav a:hover {
  color: var(--sb-text-strong);
}

html[data-theme="light"] .sidebar:not(.is-collapsed-ui) .sidebar_nav a.is-active::after {
  background: var(--sb-active-bar);
}

html[data-theme="light"] .sidebar::before,
html[data-theme="light"] .sidebar::after {
  opacity: 0.16;
}

html[data-theme="light"] .sidebar.is-collapsed-ui .brand--bottom {
  border-top-color: var(--sb-bottom-line);
  margin-top: 12px;
  padding-top: 12px;
}

html[data-theme="light"] .sidebar.is-collapsed-ui .brand--bottom .brand_logo {
  padding: 6px 8px;
  border-radius: 12px;
  background: var(--brand);
  border: 1px solid color-mix(in srgb, var(--brand-deep) 20%, transparent);
  box-shadow:
    0 8px 18px color-mix(in srgb, var(--brand) 18%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
  filter: brightness(0) invert(1);
}


/* ---- /assets/css/components/footer.css ---- */
/* =========================================================
##################
   /assets/css/components/footer.css
##################
   Footer
##################
========================================================= */

.footer {
  border-top: 1px solid var(--line-2);
  padding: 1.5rem 0;
  background: color-mix(in srgb, var(--surface-panel-b) 55%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.footer_inner {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: center;
}

.footer_left,
.footer_right {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  flex-wrap: wrap;
}

.footer_left {
  color: var(--text-muted);
}

.footer a {
  text-decoration: none;
  color: var(--text-muted);
  opacity: 1;
  transition: color 0.15s ease, opacity 0.15s ease;
}

.footer a:hover {
  color: var(--text-strong);
}

.footer_theme_toggle {
  margin-left: 0.15rem;
  transform: translateY(1px);
}

.footer_theme_toggle .sidebar_theme_toggle-track {
  width: 46px;
}

.footer_theme_toggle .sidebar_theme_toggle-icon {
  font-size: 10px;
}

html[data-theme="light"] .footer {
  border-top-color: var(--line);
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--surface-card-a) 92%, white),
      color-mix(in srgb, var(--surface-card-b) 92%, white)
    );
  box-shadow:
    0 -1px 0 color-mix(in srgb, var(--text-strong) 3%, transparent) inset,
    0 -10px 28px color-mix(in srgb, var(--brand) 4%, transparent);
}

html[data-theme="light"] .footer_left {
  color: var(--text-soft);
}

html[data-theme="light"] .footer a {
  color: var(--text-soft);
}

html[data-theme="light"] .footer a:hover {
  color: var(--text-strong);
}

html[data-theme="light"] .footer_theme_toggle {
  border-color: color-mix(in srgb, var(--text-strong) 10%, transparent);
  background: color-mix(in srgb, white 86%, var(--surface-card-a) 14%);
  box-shadow:
    0 6px 14px rgba(21, 37, 55, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

html[data-theme="light"] .footer_theme_toggle:hover {
  border-color: color-mix(in srgb, var(--brand) 20%, transparent);
  background: color-mix(in srgb, white 92%, var(--surface-card-a) 8%);
}

@media (max-width: 760px) {
  .footer_inner {
    align-items: flex-start;
  }

  .footer_right {
    gap: 0.6rem 0.9rem;
  }

  .footer_theme_toggle {
    margin-left: 0;
  }
}


/* ---- /assets/css/components/pills.css ---- */
.pills li {
  font-size: var(--fs-2xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;

  padding: 0.2rem 0.6rem;

  background: rgba(255, 255, 255, 0.03);
  border-radius: 4px;

  color: rgba(255, 255, 255, 0.5);
}

.pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  list-style: none;
  padding: 0;
  margin: 1.25rem 0 0;
}

.pills li {
  font-size: var(--fs-2xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.45);
  padding: 0; /* wichtig: kein "pill" padding */
  border: 0; /* wichtig: keine pill border */
  background: none; /* wichtig: keine box */
}

.pills li:not(:last-child)::after {
  content: "·";
  margin-left: 0.55rem;
  color: rgba(255, 255, 255, 0.22);
}


/* ---- /assets/css/components/about.css ---- */
/* =========================================================
   /assets/css/components/about.css
   ABOUT – clean stack + split cards + readable overlays
   Scoped to #ueber-uns
========================================================= */

#ueber-uns .section_head {
  max-width: 80ch;
  margin-bottom: clamp(18px, 2.2vw, 28px);
}

#ueber-uns .section_head .lead,
#ueber-uns .section_head .muted {
  max-width: 72ch;
}

/* =============================
   Vertical stack spacing (FIX)
   -> use ONE system: flex + gap
   -> fallback only if gap unsupported
============================= */

#ueber-uns .about_stack {
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 2.5vw, 28px);
  margin-top: clamp(16px, 2vw, 24px);
}

/* Fallback only for very old browsers */
@supports not (gap: 1rem) {
  #ueber-uns .about_stack > * + * {
    margin-top: clamp(18px, 2.5vw, 28px);
  }
}

#ueber-uns .about_panel {
  position: relative;
  z-index: 1;
  margin: 0; /* keep clean */
}

/* =============================
   Typography inside about cards
============================= */

#ueber-uns h3 {
  margin: 0 0 10px;
  line-height: 1.25;
  font-size: var(--fs-xl);
}

#ueber-uns p {
  margin: 0 0 10px;
  line-height: 1.6;
}

#ueber-uns p:last-child {
  margin-bottom: 0;
}

#ueber-uns .bullets {
  margin: 8px 0 0;
}

#ueber-uns .bullets li {
  margin: 6px 0;
}

/* If you wrap text in .about_content (split cards) */
#ueber-uns .about_content {
  padding: clamp(20px, 2.2vw, 28px);
  display: grid;
  gap: 0.9rem;
}

/* Non-split panels (like "Unsere Werte"): keep padding tidy */
#ueber-uns .about_panel:not(.about_panel--split) {
  padding: clamp(18px, 2vw, 24px);
}

/* =============================
   Split card (text left, image right)
   -> image is subtle accent, not focus
============================= */

#ueber-uns .about_panel--split {
  padding: 0; /* padding lives in .about_content */
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr minmax(260px, 34%);
  align-items: stretch;
}

/* right column */
#ueber-uns .about_panel--split .about_side {
  position: relative;
  min-height: 100%;
  overflow: hidden;
  border-left: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(0, 0, 0, 0.08); /* prevents "empty flash" while loading */
}

/* Image: natural (no filter) */
#ueber-uns .about_panel--split .about_side img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 55% 35%;
  transform: scale(1.01);
  filter: none;
}

/* Subtle edge-fade so left text stays clean (NOT too dark) */
#ueber-uns .about_panel--split .about_side::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(3, 2, 4, 0.32) 0%,
    rgba(3, 2, 4, 0.14) 42%,
    rgba(3, 2, 4, 0.06) 100%
  );
}

/* Desktop: keep height balanced */
@media (min-width: 980px) {
  #ueber-uns .about_panel--split {
    min-height: 340px;
  }
}

/* Mobile: stack image under text */
@media (max-width: 980px) {
  #ueber-uns .about_panel--split {
    grid-template-columns: 1fr;
  }

  #ueber-uns .about_panel--split .about_side {
    aspect-ratio: 16 / 9;
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
  }

  #ueber-uns .about_panel--split .about_side::after {
    background: linear-gradient(
      180deg,
      rgba(3, 2, 4, 0.1) 0%,
      rgba(3, 2, 4, 0.05) 60%,
      rgba(3, 2, 4, 0.16) 100%
    );
  }
}

/* Team-image slightly different crop */
#ueber-uns .about_panel--team.about_panel--split .about_side img {
  object-position: 50% 30%;
}

@media (min-width: 980px) {
  #ueber-uns .about_panel--team.about_panel--split {
    min-height: 360px;
  }
}

/* =============================
   Quote overlay on image
   -> readable glass box
============================= */

#ueber-uns .about_overlay {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  pointer-events: none;
  display: flex;
  justify-content: flex-start;
}

/* quote box */
#ueber-uns .about_overlay blockquote {
  margin: 0;
  max-width: min(92%, 420px);
  padding: 12px 12px;
  border-radius: 14px;

  background: rgba(3, 2, 4, 0.62); /* a bit darker for readability */
  border: 1px solid rgba(255, 255, 255, 0.1);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  color: rgba(255, 255, 255, 0.94);
  text-shadow: 0 8px 22px rgba(0, 0, 0, 0.55);

  font-size: var(--fs-sm);
  line-height: 1.45;
}

#ueber-uns .about_overlay blockquote span {
  display: block;
  margin-top: 6px;
  font-size: var(--fs-2xs);
  color: rgba(255, 255, 255, 0.72);
}

/* If you bold inside quote (e.g. "Unser Anspruch") */
#ueber-uns .about_overlay blockquote strong {
  color: rgba(0, 190, 190, 0.95);
  font-weight: 650;
}

/* =============================
   Stats row (tidy)
============================= */

#ueber-uns .about_stats {
  margin-top: clamp(14px, 2vw, 22px);
  padding-top: clamp(14px, 2vw, 18px);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  gap: clamp(12px, 1.6vw, 18px);
}

#ueber-uns .about_stats .stat {
  padding: 14px 16px;
  box-shadow: none;
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.08);

  display: grid;
  grid-template-columns: 68px 1fr;
  gap: 0.85rem;
  align-items: start;
}

#ueber-uns .about_stats .stat_k {
  font-size: 1.45rem;
  font-weight: 850;
  letter-spacing: -0.02em;
  line-height: 1;
}

#ueber-uns .about_stats .muted.small {
  display: block;
  margin-top: 4px;
  color: rgba(255, 255, 255, 0.6);
}

@media (max-width: 760px) {
  #ueber-uns .about_stats .stat {
    grid-template-columns: 56px 1fr;
  }
}


/* ---- /assets/css/components/contact.css ---- */
/* =========================================================
##################
   /assets/css/components/contact.css
##################
   Contact section
##################
========================================================= */

.contact-grid--simple {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 14px;
}

@media (max-width: 980px) {
  .contact-grid--simple {
    grid-template-columns: 1fr;
  }
}

.contact-card {
  padding: 22px;
}

.contact-card--primary {
  border-color: var(--accent-line);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--accent) 12%, transparent),
    var(--surface-card-b)
  );
}

.contact-badge h3 {
  margin: 0 0 10px;
}

.contact-hint {
  margin: 12px 0 0;
}


/* ---- /assets/css/components/blog.css ---- */
/* =========================================================
##################
   /assets/css/components/blog.css
##################
   Blog grid + cards
##################
========================================================= */

.blog-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

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

.blog-card {
  display: block;
  overflow: hidden;
  text-decoration: none;
}

.blog-card_media img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  filter: saturate(1.05);
}

.blog-card_body {
  padding: 16px 16px 18px;
}

.blog-card_meta {
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.66);
  margin-bottom: 0.35rem;
}

.blog-card_title {
  margin: 0 0 0.45rem;
  font-size: var(--fs-lg);
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.blog-card_excerpt {
  margin: 0;
  color: rgba(255, 255, 255, 0.74);
}

.page-head {
  margin: 2rem 0 1rem;
}
.lead {
  font-size: var(--fs-xl);
  line-height: 1.6;
}
.muted {
  opacity: 0.75;
}

.blog-controls {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  margin: 1rem 0 1.5rem;
  flex-wrap: wrap;
}
.input,
.select {
  padding: 0.75rem 0.9rem;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 12px;
}

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

.blog-card {
  display: block;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 18px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
}
.blog-card_media img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
}
.blog-card_body {
  padding: 1rem;
}
.blog-card_meta {
  font-size: var(--fs-xs);
  opacity: 0.8;
  margin-bottom: 0.35rem;
}
.blog-card_title {
  font-size: var(--fs-xl);
  line-height: 1.35;
  margin: 0 0 0.4rem;
}
.blog-card_excerpt {
  margin: 0 0 0.8rem;
  opacity: 0.9;
}

.blog-card_tags {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.tag {
  font-size: var(--fs-xs);
  padding: 0.2rem 0.55rem;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 999px;
}

/* =========================================
   Home teaser ("Neu im Blog") - scoped redesign
========================================= */

.bg--blog {
  --bg-dim: 0.7;
  --overlay-top: 0.3;
  --overlay-bottom: 0.48;
  --blog-text-main: var(--text-main);
  --blog-text-muted: var(--text-muted);
  --blog-text-soft: var(--text-soft);
  --blog-text-strong: var(--text-strong);
  --blog-line: var(--line-2);
  --blog-line-strong: var(--surface-border);
  --blog-surface-soft: color-mix(in srgb, var(--text-strong) 3%, transparent);
  --blog-surface-soft-2: color-mix(in srgb, var(--text-strong) 5%, transparent);
  --blog-surface-panel: rgba(8, 12, 20, 0.42);
  --blog-surface-panel-2: rgba(8, 12, 20, 0.86);
  --blog-shadow-soft: 0 16px 34px rgba(0, 0, 0, 0.24);
  --blog-shadow-hover: 0 20px 40px rgba(0, 0, 0, 0.3);
  --blog-accent: var(--accent-soft);
  --blog-accent-line: var(--accent-line);
  --blog-accent-line-strong: color-mix(in srgb, var(--accent) 24%, transparent);
  --blog-focus: rgba(0, 190, 190, 0.9);
  --blog-teaser-card-bg:
    radial-gradient(
      120% 100% at 12% 8%,
      rgba(0, 190, 190, 0.12),
      transparent 54%
    ),
    linear-gradient(
      180deg,
      rgba(10, 18, 28, 0.56),
      rgba(8, 13, 21, 0.64) 60%,
      rgba(7, 11, 18, 0.7)
    );
  --blog-teaser-card-border: rgba(255, 255, 255, 0.08);
  --blog-teaser-card-shadow:
    0 18px 42px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  --blog-teaser-image-opacity: 0.42;
  --blog-teaser-image-filter: saturate(1.02) brightness(0.9) contrast(1.03);
  --blog-teaser-body-fade:
    linear-gradient(
      to top,
      rgba(4, 8, 13, 0.76) 0%,
      rgba(4, 8, 13, 0.46) 38%,
      rgba(4, 8, 13, 0.04) 100%
    );
  --blog-teaser-title: rgba(255, 255, 255, 0.96);
  --blog-teaser-meta: rgba(255, 255, 255, 0.76);
  --blog-teaser-excerpt: rgba(255, 255, 255, 0.8);
  --blog-status-bg: rgba(10, 16, 25, 0.24);
  --blog-status-line: rgba(255, 255, 255, 0.08);
  --blog-status-fg: var(--blog-text-muted);
  --blog-input-bg: rgba(7, 11, 19, 0.64);
  --blog-input-line: rgba(255, 255, 255, 0.1);
  --blog-input-placeholder: rgba(255, 255, 255, 0.45);
  --blog-index-card-bg: linear-gradient(180deg, rgba(8, 12, 20, 0.75), rgba(5, 8, 15, 0.9));
  --blog-index-card-line: rgba(255, 255, 255, 0.08);
  --blog-index-card-shadow:
    0 16px 34px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.03);
  --blog-index-card-shadow-hover:
    0 20px 40px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(0, 190, 190, 0.06) inset;
  --blog-index-tag-bg: rgba(255, 255, 255, 0.03);
  --blog-index-tag-line: rgba(255, 255, 255, 0.12);
  --blog-index-tag-fg: rgba(255, 255, 255, 0.75);
  --blog-btt-bg:
    radial-gradient(120% 120% at 30% 20%, rgba(0, 190, 190, 0.18), transparent 55%),
    rgba(8, 12, 20, 0.86);
  --blog-btt-bg-hover:
    radial-gradient(120% 120% at 30% 20%, rgba(0, 190, 190, 0.24), transparent 55%),
    rgba(9, 14, 24, 0.95);
  --blog-btt-line: rgba(255, 255, 255, 0.12);
  --blog-btt-fg: rgba(255, 255, 255, 0.96);
  --blog-btt-shadow:
    0 14px 30px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.bg--blog .section_head--row {
  align-items: center;
  gap: clamp(14px, 2vw, 22px);
  margin-bottom: clamp(18px, 2.4vw, 28px);
}

.bg--blog .section_head--row h2 {
  margin: 0 0 8px;
  font-size: clamp(1.9rem, 3vw, 2.65rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-wrap: balance;
  text-shadow: 0 12px 30px rgba(0, 0, 0, 0.42);
}

.bg--blog .section_head--row .muted {
  margin: 0;
  color: var(--blog-text-main);
  max-width: 54ch;
}

.bg--blog .section_head--row .btn {
  min-height: 50px;
  padding-inline: 18px;
  border-radius: 16px;
  border-color: var(--blog-line);
  background:
    linear-gradient(rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.02)),
    rgba(8, 15, 24, 0.52);
  box-shadow:
    0 12px 26px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.bg--blog .section_head--row .btn:hover {
  background:
    linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.025)),
    rgba(9, 16, 26, 0.6);
}

#home-blog-status {
  padding: 12px 14px;
  border-radius: 14px;
  width: fit-content;
  border: 1px solid var(--blog-status-line);
  background: var(--blog-status-bg);
  color: var(--blog-status-fg);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

#home-blog-grid.blog-grid {
  gap: clamp(14px, 1.8vw, 18px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
}

@media (max-width: 980px) {
  #home-blog-grid.blog-grid {
    grid-template-columns: 1fr;
  }
}

#home-blog-grid .blog-card {
  position: relative;
  display: grid;
  min-height: clamp(260px, 32vw, 360px);
  border-radius: 22px;
  border: 1px solid var(--blog-teaser-card-border);
  color: var(--blog-teaser-title);
  background: var(--blog-teaser-card-bg);
  box-shadow: var(--blog-teaser-card-shadow);
  transition:
    transform 0.22s ease,
    border-color 0.22s ease,
    box-shadow 0.22s ease,
    background 0.22s ease;
}

#home-blog-grid .blog-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(
      120deg,
       rgba(255, 255, 255, 0.05),
      transparent 28%,
      transparent 72%,
      rgba(0, 190, 190, 0.06)
    ),
    radial-gradient(
      120px 180px at 82% 20%,
      rgba(0, 70, 170, 0.14),
      transparent 72%
    );
  opacity: 0.9;
}

#home-blog-grid .blog-card:hover {
  transform: translateY(-4px);
  border-color: var(--blog-accent-line-strong);
  box-shadow:
    0 24px 54px rgba(0, 0, 0, 0.34),
    0 0 0 1px color-mix(in srgb, var(--accent) 8%, transparent) inset;
}

#home-blog-grid .blog-card:focus-visible {
  outline: 2px solid var(--blog-focus);
  outline-offset: 3px;
}

#home-blog-grid .blog-card_media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

#home-blog-grid .blog-card_media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
   opacity: var(--blog-teaser-image-opacity);
   filter: var(--blog-teaser-image-filter);
  transform: scale(1.03);
  transition:
    opacity 0.24s ease,
    transform 0.24s ease,
    filter 0.24s ease;
}

#home-blog-grid .blog-card:hover .blog-card_media img {
  opacity: 0.5;
  transform: scale(1.05);
  filter: saturate(1.08) brightness(0.97) contrast(1.05);
}

#home-blog-grid .blog-card_body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: inherit;
  padding: clamp(16px, 2vw, 22px);
  gap: 8px;
   background: var(--blog-teaser-body-fade);
}

#home-blog-grid .blog-card_meta {
  margin: 0;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
   color: var(--blog-teaser-meta);
}

#home-blog-grid .blog-card_title {
  margin: 0;
  font-size: clamp(1.12rem, 1.35vw, 1.35rem);
  line-height: 1.28;
   color: var(--blog-teaser-title);
  text-wrap: balance;
}

#home-blog-grid .blog-card_excerpt {
  margin: 0;
   color: var(--blog-teaser-excerpt);
  line-height: 1.55;
  font-size: var(--fs-md);
  max-width: 58ch;
}

@media (prefers-reduced-motion: reduce) {
  #home-blog-grid .blog-card,
  #home-blog-grid .blog-card_media img {
    transition: none;
  }
}

/* =========================================
   Blog index page (all posts overview)
========================================= */

body.blog-index-page .header,
body.blog-post-page .header {
  position: sticky;
  top: 0;
  z-index: 80;
  background: rgba(9, 15, 24, 0.62);
  border-bottom-color: var(--line-2);
}

body.blog-index-page .header::after,
body.blog-post-page .header::after {
  content: "";
  position: absolute;
  inset: auto 0 -1px 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(0, 190, 190, 0.05),
    rgba(255, 255, 255, 0.12),
    rgba(0, 190, 190, 0.05)
  );
  pointer-events: none;
}

body.blog-index-page .header .nav a[href="/blog/"],
body.blog-post-page .header .nav a[href="/blog/"] {
  color: var(--text-strong);
  background: color-mix(in srgb, var(--text-strong) 7.5%, transparent);
  border-color: var(--surface-border);
}

html[data-theme="light"] .bg--blog {
  --bg-dim: 0.9;
  --overlay-top: 0.08;
  --overlay-bottom: 0.18;
  --blog-index-page-bg:
    radial-gradient(
      980px 520px at 10% -8%,
      color-mix(in srgb, var(--brand) 10%, white),
      transparent 62%
    ),
    radial-gradient(
      820px 480px at 102% 4%,
      color-mix(in srgb, var(--brand-deep) 6%, white),
      transparent 64%
    ),
    linear-gradient(
      180deg,
      color-mix(in srgb, white 90%, var(--surface-card-a) 10%),
      color-mix(in srgb, white 82%, var(--surface-card-b) 18%)
    );
  --blog-index-page-panel-bg:
    linear-gradient(
      180deg,
      color-mix(in srgb, white 88%, var(--surface-card-a) 12%),
      color-mix(in srgb, white 78%, var(--surface-card-b) 22%)
    );
  --blog-index-page-panel-line: color-mix(in srgb, var(--text-strong) 8%, transparent);
  --blog-index-page-panel-shadow:
    0 18px 40px rgba(21, 37, 55, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.72);
  --blog-teaser-card-bg:
    radial-gradient(
      120% 100% at 12% 8%,
      rgba(0, 190, 190, 0.06),
      transparent 54%
    ),
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.34),
      rgba(247, 251, 255, 0.22) 60%,
      rgba(240, 246, 252, 0.28)
    );
  --blog-teaser-card-border: rgba(10, 23, 34, 0.08);
  --blog-teaser-image-opacity: 0.82;
  --blog-teaser-image-filter: saturate(1.03) brightness(0.97) contrast(1.05);
  --blog-teaser-body-fade:
    linear-gradient(
      to top,
      rgba(248, 251, 255, 0.86) 0%,
      rgba(248, 251, 255, 0.54) 38%,
      rgba(248, 251, 255, 0.08) 100%
    );
  --blog-teaser-title: rgba(10, 23, 34, 0.96);
  --blog-teaser-meta: rgba(10, 23, 34, 0.62);
  --blog-teaser-excerpt: rgba(10, 23, 34, 0.76);
  --blog-text-main: rgba(10, 23, 34, 0.82);
  --blog-text-muted: rgba(10, 23, 34, 0.72);
  --blog-text-soft: rgba(10, 23, 34, 0.62);
  --blog-line: rgba(10, 23, 34, 0.08);
  --blog-line-strong: rgba(10, 23, 34, 0.12);
  --blog-status-bg: rgba(255, 255, 255, 0.62);
  --blog-status-line: rgba(10, 23, 34, 0.08);
  --blog-status-fg: rgba(10, 23, 34, 0.74);
  --blog-input-bg: rgba(255, 255, 255, 0.74);
  --blog-input-line: rgba(10, 23, 34, 0.1);
  --blog-input-placeholder: rgba(10, 23, 34, 0.42);
  --blog-index-card-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(243, 248, 253, 0.9));
  --blog-index-card-line: rgba(10, 23, 34, 0.08);
  --blog-index-card-shadow:
    0 16px 30px rgba(21, 37, 55, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
  --blog-index-card-shadow-hover:
    0 20px 40px rgba(21, 37, 55, 0.12),
    0 0 0 1px rgba(0, 121, 120, 0.06) inset;
  --blog-index-tag-bg: rgba(10, 23, 34, 0.03);
  --blog-index-tag-line: rgba(10, 23, 34, 0.12);
  --blog-index-tag-fg: rgba(10, 23, 34, 0.7);
  --blog-btt-line: rgba(10, 23, 34, 0.12);
  --blog-btt-fg: rgba(10, 23, 34, 0.96);
  --blog-btt-bg:
    radial-gradient(120% 120% at 30% 20%, rgba(0, 121, 120, 0.12), transparent 55%),
    rgba(255, 255, 255, 0.92);
  --blog-btt-bg-hover:
    radial-gradient(120% 120% at 30% 20%, rgba(0, 121, 120, 0.18), transparent 55%),
    rgba(255, 255, 255, 0.98);
  --blog-btt-shadow:
    0 14px 30px rgba(21, 37, 55, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
  --blog-focus: rgba(0, 121, 120, 0.85);
}

html[data-theme="light"] body.blog-index-page {
  background: var(--blog-index-page-bg);
}

html[data-theme="light"] body.blog-index-page .page-shell,
html[data-theme="light"] body.blog-index-page .page-main {
  background: transparent;
}

html[data-theme="light"] body.blog-index-page .section.has-bg.bg--blog {
  --img-fx-opacity: 0.22;
  --img-fx-saturate: 1.01;
  --img-fx-contrast: 1.03;
  --bg-overlay-hi: color-mix(in srgb, white 96%, var(--brand) 4%);
  --bg-overlay-accent: color-mix(in srgb, white 98%, var(--brand) 2%);
  --bg-overlay-warm: rgba(255, 140, 70, 0.012);
  --overlay-top: 0.02;
  --overlay-bottom: 0.06;
  --bg-fade-top-soft: rgba(255, 255, 255, 0.02);
  --bg-fade-bottom-soft: rgba(255, 255, 255, 0.02);
}

html[data-theme="light"] body.blog-index-page .bg--blog > .container {
  padding: clamp(18px, 2.2vw, 26px);
  border-radius: 24px;
  border: 1px solid var(--blog-index-page-panel-line);
  background: var(--blog-index-page-panel-bg);
  box-shadow: var(--blog-index-page-panel-shadow);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

@media (max-width: 760px) {
  html[data-theme="light"] body.blog-index-page .bg--blog > .container {
    padding: 14px;
    border-radius: 18px;
  }
}

html[data-theme="light"] .bg--blog .section_head--row .muted,
html[data-theme="light"] .bg--blog .page-head .lead,
html[data-theme="light"] .bg--blog .page-head .eyebrow {
  color: var(--blog-text-muted);
}

html[data-theme="light"] #home-blog-status,
html[data-theme="light"] #blog-status { color: var(--blog-status-fg); }

html[data-theme="light"] #home-blog-grid .blog-card,
html[data-theme="light"] #blog-grid .blog-card {
  border-color: var(--blog-index-card-line);
  box-shadow: var(--blog-index-card-shadow);
}

html[data-theme="light"] #home-blog-grid .blog-card { color: var(--text-strong); }

html[data-theme="light"] #home-blog-grid .blog-card_media img { opacity: var(--blog-teaser-image-opacity); filter: var(--blog-teaser-image-filter); }

html[data-theme="light"] #home-blog-grid .blog-card_body { background: var(--blog-teaser-body-fade); }

html[data-theme="light"] #home-blog-grid .blog-card_meta,
html[data-theme="light"] #blog-grid .blog-card_meta {
  color: var(--blog-teaser-meta);
}

html[data-theme="light"] #home-blog-grid .blog-card_title,
html[data-theme="light"] #blog-grid .blog-card_title {
  color: var(--blog-teaser-title);
}

html[data-theme="light"] #home-blog-grid .blog-card_excerpt,
html[data-theme="light"] #blog-grid .blog-card_excerpt {
  color: var(--blog-teaser-excerpt);
}

html[data-theme="light"] #blog-grid .blog-card {
  background: var(--blog-index-card-bg);
}

html[data-theme="light"] #blog-grid .blog-card_media img {
  background: var(--blog-index-tag-bg);
}

html[data-theme="light"] #blog-grid .tag {
  border-color: var(--blog-index-tag-line);
  color: var(--blog-index-tag-fg);
  background: var(--blog-index-tag-bg);
}

html[data-theme="light"] body.blog-index-page .header,
html[data-theme="light"] body.blog-post-page .header {
  background: rgba(244, 249, 255, 0.88);
  border-bottom-color: rgba(10, 23, 34, 0.08);
}

html[data-theme="light"] body.blog-index-page .header::after,
html[data-theme="light"] body.blog-post-page .header::after {
  background: linear-gradient(
    90deg,
    rgba(0, 190, 190, 0.03),
    rgba(10, 23, 34, 0.08),
    rgba(0, 190, 190, 0.03)
  );
}

html[data-theme="light"] body.blog-index-page .header .nav a[href="/blog/"],
html[data-theme="light"] body.blog-post-page .header .nav a[href="/blog/"] {
  color: rgba(10, 23, 34, 0.96);
  background: rgba(10, 23, 34, 0.05);
  border-color: rgba(10, 23, 34, 0.1);
}

.bg--blog .page-head {
  margin: 0 0 1.25rem;
  max-width: 860px;
}

.bg--blog .page-head .eyebrow {
  margin: 0 0 0.5rem;
  color: var(--blog-text-soft);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: var(--fs-2xs);
}

.bg--blog .page-head h1 {
  margin: 0 0 0.7rem;
  text-shadow: 0 16px 34px rgba(0, 0, 0, 0.38);
}

.bg--blog .page-head .lead {
  margin: 0;
  color: var(--blog-text-muted);
  max-width: 62ch;
}

.bg--blog .blog-controls {
  display: grid;
  grid-template-columns: 1.5fr minmax(180px, 260px);
  gap: 12px;
  margin: 0 0 1rem;
}

@media (max-width: 760px) {
  .bg--blog .blog-controls {
    grid-template-columns: 1fr;
  }
}

.bg--blog .input,
.bg--blog .select {
  min-height: 48px;
  border-radius: 14px;
  border: 1px solid var(--blog-input-line);
  background: var(--blog-input-bg);
  color: var(--blog-text-strong);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.bg--blog .input::placeholder {
  color: var(--blog-input-placeholder);
}

.bg--blog .input:focus,
.bg--blog .select:focus {
  outline: 2px solid var(--blog-focus);
  outline-offset: 2px;
  border-color: var(--blog-accent-line-strong);
}

#blog-status {
  padding: 10px 12px;
  width: fit-content;
  border-radius: 12px;
  border: 1px solid var(--blog-status-line);
  background: var(--blog-status-bg);
  color: var(--blog-status-fg);
}

#blog-grid.blog-grid {
  gap: clamp(14px, 1.8vw, 18px);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

#blog-grid .blog-card {
  display: block;
  color: inherit;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--blog-index-card-line);
  background: var(--blog-index-card-bg);
  box-shadow: var(--blog-index-card-shadow);
  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

#blog-grid .blog-card:hover {
  transform: translateY(-3px);
  border-color: var(--blog-accent-line);
  box-shadow: var(--blog-index-card-shadow-hover);
}

#blog-grid .blog-card:focus-visible {
  outline: 2px solid var(--blog-focus);
  outline-offset: 3px;
}

#blog-grid .blog-card_media img {
  display: block;
  width: 100%;
  height: 200px;
  object-fit: cover;
  background: var(--blog-index-tag-bg);
}

#blog-grid .blog-card_body {
  padding: 16px;
}

#blog-grid .blog-card_meta {
  color: var(--blog-text-soft);
}

#blog-grid .blog-card_title {
  color: var(--blog-text-strong);
}

#blog-grid .blog-card_excerpt {
  color: var(--blog-text-muted);
}

#blog-grid .blog-card_tags {
  margin-top: 10px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

#blog-grid .tag {
  border-color: var(--blog-index-tag-line);
  color: var(--blog-index-tag-fg);
  background: var(--blog-index-tag-bg);
}

/* =========================================
   Floating back-to-top button (blog + post)
========================================= */

.back-to-top {
  position: fixed;
  right: clamp(14px, 2vw, 22px);
  bottom: clamp(14px, 2vw, 22px);
  z-index: 95;

  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 1px solid var(--blog-btt-line);
  background: var(--blog-btt-bg);
  color: var(--blog-btt-fg);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;

  box-shadow: var(--blog-btt-shadow);

  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition:
    opacity 0.18s ease,
    transform 0.18s ease,
    border-color 0.18s ease,
    background 0.18s ease;
}

.back-to-top.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.back-to-top:hover {
  border-color: var(--blog-accent-line-strong);
  background: var(--blog-btt-bg-hover);
}

.back-to-top:focus-visible {
  outline: 2px solid var(--blog-focus);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .back-to-top {
    transition: none;
  }
}


/* ---- /assets/css/components/faq.css ---- */
/* =========================================================
   /assets/css/components/faq.css
   FAQ – polished dark / executive
========================================================= */

.faq {
  --faq-radius: 16px;

  --faq-text: var(--text-main);
  --faq-muted: var(--text-soft);

  --faq-border: var(--line-soft);
  --faq-border-strong: var(--line);

  --faq-bg: color-mix(in srgb, var(--text-strong) 3%, transparent);
  --faq-bg-hover: color-mix(in srgb, var(--text-strong) 4.5%, transparent);
  --faq-bg-open: color-mix(in srgb, var(--text-strong) 5.5%, transparent);

  --faq-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  --faq-shadow-open: 0 14px 40px rgba(0, 0, 0, 0.45);

  --faq-ease: cubic-bezier(0.2, 0.8, 0.2, 1);

  display: grid;
  gap: 16px;
}

.faq--grouped {
  display: grid;
  gap: 20px;
}

.faq_group {
  padding-top: 2px;
}

.faq_group_title {
  margin: 0 0 10px;
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 650;
}

/* Card shell */
.faq details {
  border-radius: var(--faq-radius);
  border: 1px solid var(--faq-border);
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.04),
    rgba(255, 255, 255, 0.02)
  );
  box-shadow: var(--faq-shadow);
  overflow: hidden;

  transition:
    border-color 220ms var(--faq-ease),
    background 220ms var(--faq-ease),
    box-shadow 260ms var(--faq-ease);
}

/* Hover: weniger "lift", mehr Material */
.faq details:hover {
  border-color: var(--faq-border-strong);
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.05),
    rgba(255, 255, 255, 0.025)
  );
}

/* Open state: klarer, hochwertiger */
.faq details[open] {
  border-color: rgba(255, 255, 255, 0.16);
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.06),
    rgba(255, 255, 255, 0.03)
  );
  box-shadow: var(--faq-shadow-open);
}

/* Summary row */
.faq summary {
  list-style: none;
  cursor: pointer;

  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;

  color: var(--faq-text);
  font-weight: 620;
  line-height: 1.28;
}

.faq summary::-webkit-details-marker {
  display: none;
}

/* Tastatur-Fokus sauber */
.faq summary:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.18);
  outline-offset: 3px;
}

/* Icon: dezenter Control statt Button-Badge */
.faq summary::after {
  content: "+";
  flex: 0 0 auto;

  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;

  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.18);

  color: rgba(255, 255, 255, 0.78);
  font-weight: 650;
  opacity: 0.95;

  transition:
    transform 260ms var(--faq-ease),
    background 220ms var(--faq-ease),
    border-color 220ms var(--faq-ease),
    color 220ms var(--faq-ease);
}

.faq details:hover summary::after {
  background: rgba(0, 0, 0, 0.28);
  border-color: rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.9);
}

/* Open: Minus + leichte Rotation rausnehmen (wirkt weniger "UI") */
.faq details[open] summary::after {
  content: "−";
  transform: none;
  background: rgba(0, 0, 0, 0.3);
  border-color: rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.92);
}

/* Divider nur im open state */
.faq details[open] summary {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Content */
.faq_content {
  padding: 0 16px 14px;
  color: var(--faq-muted);
  line-height: 1.6;
}

.faq details > .faq_content {
  overflow: hidden; /* kompatibel mit JS-Height Animation */
}

/* Mobile */
@media (max-width: 640px) {
  .faq--grouped {
    gap: 16px;
  }

  .faq summary {
    padding: 13px 14px;
    font-size: var(--fs-md);
  }

  .faq_content {
    padding: 0 14px 13px;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .faq details,
  .faq summary,
  .faq summary::after {
    transition: none !important;
  }
}

.faq details {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
  margin-bottom: 6px;
}
.faq details[open] {
  border-color: rgba(255, 255, 255, 0.12);
}


/* ---- /assets/css/pages/agb.css ---- */
/* =========================================================
##################
   /assets/css/pages/agb.css
##################
   AGB-only
##################
========================================================= */

.page-agb .card h2 {
  font-size: clamp(var(--fs-lg), 0.95rem + 0.6vw, 1.4rem);
  line-height: 1.25;
  margin-top: 1.25rem;
  margin-bottom: 0.6rem;
}

.page-agb .card ol,
.page-agb .card ul {
  margin-top: 0.4rem;
}

.page-agb .card li {
  margin: 0.35rem 0;
}

.page-agb .card hr {
  margin: 1.25rem 0;
  opacity: 0.4;
}


/* ---- /assets/css/pages/post.css ---- */
/* /assets/css/post.css */

body.blog-post-page {
  --post-text: var(--text);
  --post-text-strong: var(--text-strong);
  --post-text-main: var(--text-main);
  --post-text-muted: var(--text-muted);
  --post-text-soft: var(--text-soft);
  --post-line: var(--line);
  --post-line-soft: var(--line-soft);
  --post-line-faint: var(--line-faint);
  --post-surface-a: rgba(8, 12, 20, 0.68);
  --post-surface-b: rgba(5, 8, 14, 0.86);
  --post-panel-a: rgba(9, 14, 24, 0.78);
  --post-panel-b: rgba(5, 8, 14, 0.9);
  --post-glass-a: rgba(255, 255, 255, 0.03);
  --post-glass-b: rgba(255, 255, 255, 0.06);
  --post-shadow-sm: 0 8px 20px rgba(0, 0, 0, 0.2);
  --post-shadow-md: 0 16px 34px rgba(0, 0, 0, 0.2);
  --post-shadow-lg: 0 22px 44px rgba(0, 0, 0, 0.26);
  --post-shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.03);
  --post-shadow-inset-strong: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --post-accent: var(--accent);
  --post-accent-soft: var(--accent-soft);
  --post-accent-line: var(--accent-line);
  --post-accent-bg: color-mix(in srgb, var(--post-accent) 10%, transparent);
  --post-accent-bg-strong: color-mix(in srgb, var(--post-accent) 16%, transparent);
  --post-accent-line-soft: color-mix(in srgb, var(--post-accent) 22%, transparent);
  --post-accent-line-strong: color-mix(in srgb, var(--post-accent) 34%, transparent);
  --post-accent-glow: 0 0 10px color-mix(in srgb, var(--post-accent) 28%, transparent);
  --post-scroll-thumb: rgba(255, 255, 255, 0.14);
  --post-backlink-bg: rgba(7, 11, 20, 0.42);
  --post-backlink-bg-hover: rgba(7, 11, 20, 0.55);
  --post-table-head-bg: rgba(6, 110, 109, 0.75);
  --post-table-head-bg-sticky: rgba(6, 110, 109, 0.9);
  --post-table-first-col-bg: rgba(8, 12, 20, 0.94);
}

html[data-theme="light"] body.blog-post-page {
  --post-surface-a: rgba(255, 255, 255, 0.84);
  --post-surface-b: rgba(246, 250, 255, 0.9);
  --post-panel-a: rgba(255, 255, 255, 0.9);
  --post-panel-b: rgba(247, 251, 255, 0.94);
  --post-glass-a: rgba(10, 23, 34, 0.03);
  --post-glass-b: rgba(10, 23, 34, 0.05);
  --post-shadow-sm: 0 10px 24px rgba(21, 37, 55, 0.08);
  --post-shadow-md: 0 14px 34px rgba(21, 37, 55, 0.1);
  --post-shadow-lg: 0 20px 42px rgba(21, 37, 55, 0.12);
  --post-shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.6);
  --post-shadow-inset-strong: inset 0 1px 0 rgba(255, 255, 255, 0.75);
  --post-scroll-thumb: rgba(10, 23, 34, 0.16);
  --post-backlink-bg: rgba(255, 255, 255, 0.78);
  --post-backlink-bg-hover: rgba(255, 255, 255, 0.9);
  --post-table-head-bg: color-mix(in srgb, var(--post-accent) 72%, white);
  --post-table-head-bg-sticky: color-mix(in srgb, var(--post-accent) 82%, white);
  --post-table-first-col-bg: rgba(244, 248, 252, 0.96);
}

.post-layout {
  display: grid;
  gap: clamp(14px, 2vw, 22px);
  grid-template-columns: 1fr;
  margin-top: clamp(14px, 2vw, 22px);
  margin-bottom: clamp(42px, 6vw, 84px);
}

body.blog-post-page .post-layout.container {
  width: min(1540px, calc(100% - (var(--pad) * 2)));
}

.post-top {
  grid-column: 1 / -1;
  margin-bottom: 4px;
}

@media (max-width: 979px) {
  .post-top {
    margin-top: calc(var(--header-h, 78px) + 8px);
  }
}
.backlink {
  text-decoration: none;
  opacity: 0.88;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid var(--post-line);
  background: var(--post-backlink-bg);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--post-text-strong);
  font-weight: 600;
  box-shadow:
    var(--post-shadow-sm),
    var(--post-shadow-inset);
}

.backlink:hover {
  opacity: 1;
  border-color: color-mix(in srgb, var(--post-text-strong) 14%, transparent);
  background: var(--post-backlink-bg-hover);
}

.post-aside {
  order: 2;
  --toc-w: clamp(250px, 20vw, 320px);
}
.post {
  order: 1;
}

@media (min-width: 980px) {
  .post-layout {
    display: block;
    --post-left-offset: 356px; /* sidebar + gap */
    padding-left: var(--post-left-offset);
    transition: padding-left 200ms ease;
  }

  .post-layout:has(.post-aside.is-collapsed-ui) {
    --post-left-offset: 128px;
  }

  .post-top,
  .post {
    margin-left: 0;
  }

  .post-layout:not(:has(.post-aside.is-collapsed-ui)) .post-top {
    padding-top: 14px;
    margin-bottom: 14px;
  }

  .post-layout:not(:has(.post-aside.is-collapsed-ui)) .post-top .backlink {
    transform: none;
  }

  .post-aside {
    order: 1;
    position: fixed;
    left: 16px;
    top: calc(var(--header-h, 78px) + 16px);
    bottom: 16px;
    width: min(var(--toc-w), calc(100vw - 32px));
    z-index: 70;
    transition:
      width 200ms ease,
      top 180ms ease,
      bottom 180ms ease,
      transform 180ms ease;
  }

  .post {
    order: 2;
  }

  .post-aside.is-collapsed-ui {
    width: 72px;
    top: calc(var(--header-h, 78px) + 16px);
    bottom: 16px;
    transform: none;
  }
}

.toc-card {
  border: 1px solid var(--post-line);
  border-radius: 18px;
  padding: 12px 10px 10px;
  background:
    radial-gradient(
      120% 90% at 10% 10%,
      color-mix(in srgb, var(--post-accent) 8%, transparent),
      transparent 60%
    ),
    linear-gradient(180deg, var(--post-surface-a), var(--post-surface-b));
  box-shadow:
    0 18px 36px rgba(0, 0, 0, 0.22),
    var(--post-shadow-inset);
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.toc-brand-bottom {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--post-line-soft);
  opacity: 0.96;
  flex-shrink: 0;
}

.toc-brand-bottom_link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.toc-brand-bottom_logo {
  height: 28px;
  width: auto;
  max-width: 44px;
  display: block;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.35));
}

.post-aside.toc-sidebar {
  opacity: 1;
  pointer-events: auto;
  overflow: visible;
}

.post-aside.toc-sidebar .toc-card {
  border: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.post-aside.toc-sidebar .sidebar_nav {
  direction: ltr;
  padding-left: 0;
}

.post-aside.toc-sidebar .toc-scroll {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.post-aside.toc-sidebar .sidebar_group > a.toc-hidden-link {
  display: none !important;
}

.post-aside.toc-sidebar .toc-group-title {
  cursor: pointer;
  user-select: none;
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  opacity: 1;
  line-height: var(--lh-ui);
  color: var(--sb-text, var(--post-text-main));
}

.post-aside.toc-sidebar .toc-group_num {
  width: 8px;
  min-width: 8px;
  height: 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--post-text-strong) 34%, transparent);
  border: 1px solid color-mix(in srgb, var(--post-text-strong) 14%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--post-text-strong) 3%, transparent) inset;
  font-size: 0;
  line-height: 0;
}

.post-aside.toc-sidebar .sidebar_group {
  margin-bottom: 0;
  display: block;
}

.post-aside.toc-sidebar:not(.is-collapsed-ui) .toc-group-title {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  margin: 0;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  text-align: left;
  color: var(--sb-text, var(--post-text-main));
  font: inherit;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    transform 0.15s ease;
}

.post-aside.toc-sidebar:not(.is-collapsed-ui) .toc-group-title:hover {
  color: var(--sb-text-strong, var(--post-text-strong));
  background: var(--post-glass-b);
  border-color: color-mix(in srgb, var(--post-text-strong) 10%, transparent);
  transform: translateX(2px);
}

.post-aside.toc-sidebar:not(.is-collapsed-ui) .sidebar_group:has(a.is-active) .toc-group-title {
  color: var(--sb-text-strong, var(--post-text-strong));
  background: var(--post-accent-bg);
  border-color: var(--post-accent-line-soft);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--post-accent) 10%, transparent) inset;
  position: relative;
  padding-left: 14px;
}

.post-aside.toc-sidebar:not(.is-collapsed-ui) .sidebar_group:has(a.is-active) .toc-group-title::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 7px;
  bottom: 7px;
  width: 2px;
  border-radius: 999px;
  background: linear-gradient(
    180deg,
      color-mix(in srgb, var(--post-accent) 86%, white),
      color-mix(in srgb, var(--post-accent) 85%, transparent)
    );
  box-shadow: var(--post-accent-glow);
}

.post-aside.toc-sidebar:not(.is-collapsed-ui) .toc-group_num {
  display: none;
}

.post-aside.toc-sidebar:not(.is-collapsed-ui) .toc-group-title .sidebar_group_text {
  display: block;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  text-transform: none;
  max-width: none;
  opacity: 1;
  transform: none;
  white-space: normal;
  overflow: hidden;
  text-overflow: initial;
  line-height: var(--lh-ui);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.post-aside.toc-sidebar:not(.is-collapsed-ui) .sidebar_group + .sidebar_group {
  margin-top: 2px;
}

@media (min-width: 980px) {
  .post-aside.toc-sidebar.is-collapsed-ui .sidebar_group_title {
    margin-left: 4px;
  }

  .post-aside.toc-sidebar.is-collapsed-ui .sidebar_group:has(a.is-active) .sidebar_group_title {
    width: max-content;
    max-width: min(420px, calc(100vw - 104px));
    min-height: 44px;
    height: auto;
    align-items: center;
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .post-aside.toc-sidebar.is-collapsed-ui .sidebar_group:has(a.is-active) .sidebar_group_text {
    max-width: min(360px, calc(100vw - 160px));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    overflow-wrap: break-word;
    line-height: 1.15;
  }

  .post-aside.toc-sidebar.is-collapsed-ui .sidebar_group:has(a.is-active) .sidebar_group_icon {
    margin-top: 0;
  }

  .post-aside.toc-sidebar.is-collapsed-ui:has(.toc.toc--dense) .sidebar_group_title {
    width: 36px;
    height: 36px;
    padding: 0 12px 0 10px;
  }

  .post-aside.toc-sidebar.is-collapsed-ui:has(.toc.toc--dense)
    .sidebar_group:has(a.is-active)
    .sidebar_group_title {
    width: max-content;
    max-width: min(390px, calc(100vw - 100px));
    min-height: 36px;
    height: auto;
    padding-top: 7px;
    padding-bottom: 7px;
  }

  .post-aside.toc-sidebar.is-collapsed-ui:has(.toc.toc--dense)
    .sidebar_group:has(a.is-active)
    .sidebar_group_text {
    max-width: min(330px, calc(100vw - 150px));
    font-size: var(--fs-sm);
  }

  .post-aside.toc-sidebar.is-collapsed-ui:has(.toc.toc--very-dense) .sidebar_group_title {
    width: 34px;
    height: 34px;
    padding: 0 11px 0 9px;
  }

  .post-aside.toc-sidebar.is-collapsed-ui:has(.toc.toc--very-dense)
    .sidebar_group:has(a.is-active)
    .sidebar_group_title {
    width: max-content;
    max-width: min(360px, calc(100vw - 96px));
    min-height: 34px;
    height: auto;
    padding-top: 6px;
    padding-bottom: 6px;
  }

  .post-aside.toc-sidebar.is-collapsed-ui:has(.toc.toc--very-dense)
    .sidebar_group:has(a.is-active)
    .sidebar_group_text {
    max-width: min(300px, calc(100vw - 146px));
    font-size: var(--fs-xs);
  }
}

.toc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 0.55rem;
  padding: 2px 4px 6px 2px;
  position: relative;
}

.toc-title {
  font-weight: 800;
  margin-bottom: 0;
  letter-spacing: 0.02em;
}

.toc-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  border: 1px solid var(--post-line);
  background: var(--post-glass-a);
  color: var(--post-text-main);
  cursor: pointer;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    transform 0.15s ease;
  flex: 0 0 auto;
  margin-right: 2px;
}

.toc-toggle [data-icon] {
  display: block;
  font-size: 20px;
  line-height: 1;
  font-weight: 700;
  transform: translateY(-1px);
}

.toc-toggle:hover {
  background: var(--post-glass-b);
  border-color: color-mix(in srgb, var(--post-text-strong) 12%, transparent);
  transform: translateY(-1px);
}

.toc-toggle:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--post-accent) 80%, transparent);
  outline-offset: 2px;
}
.toc ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 4px;
}
.toc {
  overflow: auto;
  padding-left: 4px;
  padding-right: 0;
  flex: 1 1 auto;
  min-height: 0;
  direction: rtl; /* puts scrollbar on the left in supporting browsers */
  scrollbar-width: thin;
  scrollbar-color: var(--post-scroll-thumb) transparent;
}

.toc > * {
  direction: ltr;
}

.toc::-webkit-scrollbar {
  width: 8px;
}

.toc::-webkit-scrollbar-thumb {
  background: var(--post-scroll-thumb);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: content-box;
}

.toc a {
  text-decoration: none;
  opacity: 0.88;
  display: block;
  padding: 6px 8px;
  border-radius: 9px;
  color: var(--post-text-main);
  border: 1px solid transparent;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
  line-height: 1.24;
  overflow: hidden;
  min-width: 0;
}

.toc-link_icon {
  display: none;
}

.toc-link_icon svg {
  display: none;
}

.toc-link_text {
  display: block;
  min-width: 0;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (min-width: 980px) {
  .post-aside.toc-sidebar:not(.is-collapsed-ui) .toc {
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 0;
    margin-right: 0;
  }

  .post-aside.toc-sidebar:not(.is-collapsed-ui) .toc a {
    overflow: hidden;
    position: relative;
  }

  .post-aside.toc-sidebar:not(.is-collapsed-ui) .toc a .toc-link_text {
    display: block;
  }

  .post-aside.toc-sidebar:not(.is-collapsed-ui) .toc a:is(:hover, :focus-visible) {
    width: auto;
    max-width: none;
    z-index: 20;
    box-shadow:
      0 10px 24px rgba(0, 0, 0, 0.34),
      var(--post-shadow-inset-strong);
  }

  .post-aside.toc-sidebar:not(.is-collapsed-ui)
    .toc
    a:is(:hover, :focus-visible)
    .toc-link_text {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.toc-floating-tooltip {
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  transform: translateY(-50%);
  z-index: 120;
  max-width: min(340px, calc(100vw - 96px));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  padding: 9px 12px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--post-text-strong) 14%, transparent);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--post-panel-a) 92%, black),
    color-mix(in srgb, var(--post-panel-b) 96%, black)
  );
  color: var(--post-text-strong);
  box-shadow:
    0 14px 38px rgba(0, 0, 0, 0.42),
    var(--post-shadow-inset-strong);
  visibility: hidden;
  opacity: 0;
  transition: opacity 120ms ease, transform 120ms ease;
}

.toc-floating-tooltip[data-show="true"] {
  visibility: visible;
  opacity: 1;
}

.toc a:hover {
  opacity: 1;
  color: var(--post-text-strong);
  background: color-mix(in srgb, var(--post-text-strong) 4%, transparent);
  border-color: color-mix(in srgb, var(--post-text-strong) 7%, transparent);
}
.toc a:is([aria-current="true"], .is-active, .is-active-main) {
  font-weight: 700;
  opacity: 1;
  color: var(--post-text-strong);
  background: var(--post-accent-bg);
  border-color: var(--post-accent-line-soft);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--post-accent) 7%, transparent) inset;
}

.toc-item--sub {
  padding-left: 0.35rem;
  opacity: 0.95;
}

.toc-item--sub a {
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.68);
}

@media (min-width: 980px) {
  .post-aside:not(.is-collapsed-ui) .toc-head {
    justify-content: center;
    min-height: 40px;
    padding: 2px 8px 8px;
  }

  .post-aside:not(.is-collapsed-ui) .toc-toggle {
    width: 34px;
    height: 34px;
    border-radius: 11px;
    margin-right: 0;
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
  }

  .post-aside:not(.is-collapsed-ui) .toc-toggle:hover {
    transform: translateY(calc(-50% - 1px));
  }

  .post-aside:not(.is-collapsed-ui) .toc-title {
    text-align: center;
  }

  .post-aside.is-collapsed-ui .toc-card {
    border-radius: 20px;
    padding: 8px 6px;
    align-items: stretch;
    height: auto;
    max-height: calc(100svh - var(--header-h, 78px) - 32px);
    overflow: visible;
  }

  .post-aside.is-collapsed-ui .toc-head {
    margin: 0;
    width: 100%;
    justify-content: center;
  }

  .post-aside.is-collapsed-ui .toc-title {
    display: none;
  }

  .post-aside.is-collapsed-ui .toc-toggle {
    width: 40px;
    height: 40px;
    border-radius: 13px;
  }

  .post-aside.is-collapsed-ui .toc {
    width: 100%;
    margin-top: 8px;
    display: block;
    overflow: visible;
    padding: 0;
    direction: ltr;
    flex: 0 0 auto;
  }

  .post-aside.is-collapsed-ui .toc-scroll {
    --toc-popout-space: 312px;
    width: calc(100% + var(--toc-popout-space));
    margin-right: calc(var(--toc-popout-space) * -1);
    padding-right: var(--toc-popout-space);
    padding-top: 8px;
    padding-bottom: 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    max-height: calc(100svh - var(--header-h, 78px) - 152px);
    overflow-y: auto;
    overflow-x: hidden;
    direction: ltr;
    scrollbar-width: none;
    scroll-padding-top: 14px;
    scroll-padding-bottom: 14px;
    pointer-events: auto;
  }

  .post-aside.is-collapsed-ui .toc-scroll::-webkit-scrollbar {
    width: 0;
    height: 0;
  }

  .post-aside.is-collapsed-ui .toc-item {
    padding-left: 0;
    display: flex;
    justify-content: flex-start;
    position: relative;
    width: 100%;
    pointer-events: auto;
    padding-top: 1px;
    padding-bottom: 1px;
  }

  .post-aside.is-collapsed-ui .toc.toc--dense .toc-scroll {
    gap: 4px;
  }

  .post-aside.is-collapsed-ui .toc.toc--very-dense .toc-scroll {
    gap: 3px;
  }

  .post-aside.is-collapsed-ui .toc-item--sub {
    display: none;
  }

  .post-aside.is-collapsed-ui .toc-group-title {
    pointer-events: auto;
  }

  .post-aside.is-collapsed-ui .toc-group_num {
    width: 10px;
    min-width: 10px;
    height: 10px;
    margin-left: 4px;
    margin-right: 2px;
    align-self: center;
    background: color-mix(in srgb, var(--post-text-strong) 16%, transparent);
    border-color: color-mix(in srgb, var(--post-text-strong) 10%, transparent);
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--post-text-strong) 3%, transparent) inset,
      0 0 0 color-mix(in srgb, var(--post-accent) 0%, transparent);
  }

  .post-aside.is-collapsed-ui .sidebar_group:has(a.is-active) .toc-group_num {
    background: color-mix(in srgb, var(--post-accent) 70%, transparent);
    border-color: color-mix(in srgb, var(--post-accent) 35%, white);
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--post-accent) 14%, transparent) inset,
      0 0 10px color-mix(in srgb, var(--post-accent) 24%, transparent);
  }

  .post-aside.is-collapsed-ui .toc a {
    width: 40px;
    min-width: 40px;
    height: 40px;
    padding: 0 12px 0 12px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 9px;
    white-space: nowrap;
    overflow: visible;
    position: relative;
    background: color-mix(in srgb, var(--post-text-strong) 2%, transparent);
    border-color: color-mix(in srgb, var(--post-text-strong) 5%, transparent);
    transition:
      width 160ms ease,
      transform 160ms ease,
      padding 160ms ease,
      background 0.15s ease,
      border-color 0.15s ease,
      box-shadow 0.15s ease;
  }

  .post-aside.is-collapsed-ui .toc-item--sub a {
    width: 34px;
    min-width: 34px;
    height: 34px;
    border-radius: 11px;
    background: color-mix(in srgb, var(--post-text-strong) 1.5%, transparent);
    border-color: color-mix(in srgb, var(--post-text-strong) 4%, transparent);
  }

  .post-aside.is-collapsed-ui .toc-item--sub::before {
    content: "";
    position: absolute;
    left: 8px;
    top: -5px;
    width: 8px;
    height: 18px;
    border-left: 1px solid color-mix(in srgb, var(--post-text-strong) 12%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--post-text-strong) 12%, transparent);
    border-bottom-left-radius: 6px;
    pointer-events: none;
  }

  .post-aside.is-collapsed-ui .toc a::before {
    content: "";
    width: 10px;
    min-width: 10px;
    height: 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--post-text-strong) 36%, transparent);
    border: 1px solid color-mix(in srgb, var(--post-text-strong) 14%, transparent);
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--post-text-strong) 4%, transparent) inset,
      0 0 0 rgba(0, 0, 0, 0);
    transition:
      transform 160ms ease,
      background 160ms ease,
      border-color 160ms ease,
      box-shadow 180ms ease;
  }

  .post-aside.is-collapsed-ui .toc-item--sub a::before {
    width: 8px;
    min-width: 8px;
    height: 8px;
  }

  .post-aside.is-collapsed-ui .toc-link_text {
    display: inline-block;
    max-width: 0;
    opacity: 0;
    transform: translateX(-6px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition:
      max-width 160ms ease,
      opacity 120ms ease,
      transform 160ms ease;
  }

  .post-aside.is-collapsed-ui .toc a:is(:hover, :focus-visible) {
    width: min(320px, calc(100vw - 112px));
    background: var(--post-glass-b);
    border-color: color-mix(in srgb, var(--post-text-strong) 12%, transparent);
    box-shadow:
      0 10px 24px rgba(0, 0, 0, 0.34),
      var(--post-shadow-inset-strong);
    z-index: 5;
    transform: translateX(1px);
  }

  .post-aside.is-collapsed-ui .toc-item:is(:hover, :focus-within) > a {
    width: min(320px, calc(100vw - 112px));
    z-index: 6;
    transform: translateX(1px);
  }

  .post-aside.is-collapsed-ui .toc a:is(:hover, :focus-visible)::before {
    transform: scale(1.06);
    background: color-mix(in srgb, var(--post-text-strong) 58%, transparent);
    border-color: color-mix(in srgb, var(--post-text-strong) 24%, transparent);
  }

  .post-aside.is-collapsed-ui .toc-item:is(:hover, :focus-within) > a::before {
    transform: scale(1.06);
    background: color-mix(in srgb, var(--post-text-strong) 58%, transparent);
    border-color: color-mix(in srgb, var(--post-text-strong) 24%, transparent);
  }

  .post-aside.is-collapsed-ui .toc a:is(:hover, :focus-visible) .toc-link_text {
    max-width: 240px;
    opacity: 1;
    transform: translateX(0);
  }

  .post-aside.is-collapsed-ui .toc-item:is(:hover, :focus-within) > a .toc-link_text {
    max-width: 240px;
    opacity: 1;
    transform: translateX(0);
  }

  .post-aside.is-collapsed-ui .toc-item--sub a:is(:hover, :focus-visible) {
    transform: none;
    border-color: var(--post-line);
    background: color-mix(in srgb, var(--post-text-strong) 3.5%, transparent);
  }

  .post-aside.is-collapsed-ui .toc a:is([aria-current="true"], .is-active, .is-active-main) {
    width: min(340px, calc(100vw - 104px));
    min-height: 40px;
    height: 40px;
    align-items: center;
    padding-top: 0;
    padding-bottom: 0;
    background: var(--post-accent-bg-strong);
    border-color: var(--post-accent-line-strong);
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--post-accent) 12%, transparent) inset,
      0 6px 20px color-mix(in srgb, var(--post-accent) 16%, transparent);
    z-index: 8;
  }

  .post-aside.is-collapsed-ui .toc a:is([aria-current="true"], .is-active, .is-active-main)::before {
    transform: scale(1.12);
    background: color-mix(in srgb, var(--post-accent) 78%, transparent);
    border-color: color-mix(in srgb, var(--post-accent) 42%, white);
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--post-accent) 14%, transparent) inset,
      0 0 12px color-mix(in srgb, var(--post-accent) 30%, transparent);
    animation: toc-dot-pulse 1.8s ease-in-out infinite;
  }

  .post-aside.is-collapsed-ui .toc a:is([aria-current="true"], .is-active, .is-active-main) .toc-link_text {
    max-width: 260px;
    opacity: 1;
    transform: translateX(0);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
    color: var(--post-text-strong);
  }

  .post-aside.is-collapsed-ui .toc.toc--dense a:is([aria-current="true"], .is-active, .is-active-main) .toc-link_text {
    max-width: 250px;
    font-size: var(--fs-sm);
  }

  .post-aside.is-collapsed-ui .toc.toc--very-dense a:is([aria-current="true"], .is-active, .is-active-main) .toc-link_text {
    max-width: 230px;
    font-size: var(--fs-xs);
  }

  .post-aside.is-collapsed-ui .toc-item--sub a:is([aria-current="true"], .is-active) {
    background: var(--post-accent-bg);
    border-color: color-mix(in srgb, var(--post-accent) 20%, transparent);
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--post-accent) 7%, transparent) inset,
      0 4px 14px color-mix(in srgb, var(--post-accent) 10%, transparent);
  }

  .post-aside.is-collapsed-ui .toc-item--sub a:is([aria-current="true"], .is-active)::before {
    background: color-mix(in srgb, var(--post-accent) 54%, transparent);
    border-color: color-mix(in srgb, var(--post-accent) 30%, white);
  }

  .post-aside.is-collapsed-ui .toc-item--sub[aria-current="true"]::before,
  .post-aside.is-collapsed-ui .toc-item--sub:has(a[aria-current="true"])::before,
  .post-aside.is-collapsed-ui .toc-item--sub:has(a.is-active)::before {
    border-color: var(--post-accent-line-soft);
  }

  .post-aside.is-collapsed-ui {
    width: 64px;
    top: 50%;
    bottom: auto;
    max-height: calc(100svh - var(--header-h, 78px) - 32px);
    transform: translateY(-50%) translateX(-8px);
  }

  .post-aside.is-collapsed-ui .toc-brand-bottom {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 8px;
    padding-top: 10px;
    border-top: 1px solid var(--post-line-soft);
    opacity: 0.96;
    flex-shrink: 0;
  }

  .post-aside.is-collapsed-ui .toc-brand-bottom_logo {
    height: 28px;
    width: auto;
    max-width: 44px;
    display: block;
    filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.35));
  }

  .post-aside.is-collapsed-ui:has(.toc.toc--dense) {
    width: 58px;
  }

  .post-aside.is-collapsed-ui:has(.toc.toc--very-dense) {
    width: 54px;
  }

  .post-aside.is-collapsed-ui:has(.toc.toc--dense) .toc-toggle {
    width: 36px;
    height: 36px;
  }

  .post-aside.is-collapsed-ui:has(.toc.toc--dense) .toc a {
    width: 36px;
    min-width: 36px;
    height: 36px;
  }

  .post-aside.is-collapsed-ui:has(.toc.toc--dense) .toc a:is([aria-current="true"], .is-active, .is-active-main) {
    width: min(320px, calc(100vw - 100px));
    min-height: 36px;
  }

  .post-aside.is-collapsed-ui:has(.toc.toc--dense) .toc-item--sub a {
    width: 31px;
    min-width: 31px;
    height: 31px;
  }

  .post-aside.is-collapsed-ui:has(.toc.toc--very-dense) .toc-toggle {
    width: 34px;
    height: 34px;
    border-radius: 11px;
  }

  .post-aside.is-collapsed-ui:has(.toc.toc--very-dense) .toc a {
    width: 34px;
    min-width: 34px;
    height: 34px;
  }

  .post-aside.is-collapsed-ui:has(.toc.toc--very-dense) .toc a:is([aria-current="true"], .is-active, .is-active-main) {
    width: min(300px, calc(100vw - 96px));
    min-height: 34px;
  }

  .post-aside.is-collapsed-ui:has(.toc.toc--very-dense) .toc-item--sub a {
    width: 28px;
    min-width: 28px;
    height: 28px;
    border-radius: 9px;
  }

}

@keyframes toc-dot-pulse {
  0% {
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--post-accent) 14%, transparent) inset,
      0 0 0 0 color-mix(in srgb, var(--post-accent) 28%, transparent);
  }
  70% {
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--post-accent) 14%, transparent) inset,
      0 0 0 8px color-mix(in srgb, var(--post-accent) 0%, transparent);
  }
  100% {
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--post-accent) 14%, transparent) inset,
      0 0 0 0 color-mix(in srgb, var(--post-accent) 0%, transparent);
  }
}

@media (min-width: 980px) and (max-height: 760px) {
  .post-aside.is-collapsed-ui {
    top: calc(var(--header-h, 78px) + 12px);
    bottom: 12px;
    max-height: none;
    transform: translateX(-8px);
  }

  .post-aside.is-collapsed-ui .toc-scroll {
    max-height: calc(100svh - var(--header-h, 78px) - 132px);
  }

  .post-aside.is-collapsed-ui .toc-brand-bottom {
    margin-top: 6px;
    padding-top: 8px;
  }

  .post-aside.is-collapsed-ui .toc-brand-bottom_logo {
    height: 24px;
    max-width: 38px;
  }
}

@media (min-width: 980px) and (max-height: 660px) {
  .post-aside.is-collapsed-ui .toc-brand-bottom {
    display: none;
  }

  .post-aside.is-collapsed-ui .toc-scroll {
    max-height: calc(100svh - var(--header-h, 78px) - 92px);
  }
}

@media (max-width: 979px) {
  .post-aside {
    position: sticky;
    top: calc(var(--header-h, 72px) + 10px);
    z-index: 30;
  }

  .post-aside .toc-card {
    height: auto;
    overflow: hidden;
  }

  .post-aside.is-collapsed-ui .toc-card {
    padding-bottom: 10px;
  }

  .post-aside.is-collapsed-ui .toc {
    display: none;
  }

  .post-aside.is-open-mobile .toc {
    display: block;
    max-height: min(46vh, 380px);
    overflow: auto;
    padding-right: 4px;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--post-text-strong) 16%, transparent) transparent;
  }

  .post-aside.is-open-mobile .toc::-webkit-scrollbar {
    width: 8px;
  }

  .post-aside.is-open-mobile .toc::-webkit-scrollbar-thumb {
    background: var(--post-scroll-thumb);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: content-box;
  }

  .post-aside .toc-toggle {
    display: inline-flex;
  }

  .post-aside.is-collapsed-ui .toc-toggle {
    width: 36px;
    height: 36px;
    border-radius: 12px;
  }

  .post-aside .toc a {
    overflow: hidden;
  }
}

.post-header {
  margin: 0 0 1.25rem;
}

@media (min-width: 1200px) {
  .post {
    max-width: none;
  }

  .post-content {
    max-width: 1100px;
  }
}
.post-meta {
  color: var(--post-text-soft);
  margin: 0.45rem 0 1rem;
  display: flex;
  gap: 0.7rem;
  flex-wrap: wrap;
  align-items: center;
}

.post-meta #post-tags:not(:empty)::before {
  content: "\2022";
  opacity: 0.6;
  margin-right: 0.2rem;
}

.post-cover {
  width: 100%;
  border-radius: 20px;
  border: 1px solid var(--post-line);
  margin: 0.75rem 0 0.9rem;
  box-shadow:
    var(--post-shadow-lg),
    var(--post-shadow-inset);
}
.post-intro {
  font-size: clamp(1.05rem, 1.4vw, 1.16rem);
  line-height: 1.72;
  margin: 0.25rem 0 0;
  color: var(--post-text-main);
  max-width: 72ch;
}

.post-content h2 {
  margin-top: 2.1rem;
  scroll-margin-top: calc(var(--header-h, 72px) + 14px);
}
.post-content h3 {
  margin-top: 1.35rem;
  opacity: 0.95;
  scroll-margin-top: calc(var(--header-h, 72px) + 14px);
}
.post-content p {
  line-height: 1.75;
  color: color-mix(in srgb, var(--post-text-strong) 84%, transparent);
}

.post-content,
.post-content :where(p, li, td, th, a, span) {
  overflow-wrap: anywhere;
  word-break: normal;
}

.post-content > * {
  max-width: 100%;
}

.post-content figure {
  margin: 1.15rem 0;
}

.post-content img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 14px;
  border: 1px solid var(--post-line-soft);
  box-shadow: var(--post-shadow-sm);
}

.post-content figure img {
  margin: 0;
}

.post-content ul,
.post-content ol {
  line-height: 1.7;
  color: color-mix(in srgb, var(--post-text-strong) 84%, transparent);
}

.post-content li + li {
  margin-top: 0.35rem;
}

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--post-line);
  border-radius: 18px;
  padding: 0.75rem;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--post-panel-a) 86%, transparent),
      color-mix(in srgb, var(--post-panel-b) 82%, transparent)
    );
  box-shadow:
    var(--post-shadow-inset),
    0 12px 28px rgba(0, 0, 0, 0.16);
}
.table-caption {
  margin: 0 0 0.5rem;
  opacity: 0.8;
  color: color-mix(in srgb, var(--post-text-strong) 70%, transparent);
  font-size: var(--fs-sm);
}

.post-sources {
  margin-top: 2.4rem;
  padding: 16px;
  border-radius: 18px;
  border: 1px solid var(--post-line);
  background:
    radial-gradient(
      120% 100% at 0% 0%,
      color-mix(in srgb, var(--post-accent) 9%, transparent),
      transparent 55%
    ),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--post-surface-a) 92%, transparent),
      color-mix(in srgb, var(--post-surface-b) 95%, transparent)
    );
  box-shadow:
    var(--post-shadow-md),
    var(--post-shadow-inset);
}

.post-sources_title {
  margin: 0 0 0.35rem !important;
}

.post-sources_intro {
  margin: 0 0 0.85rem;
  color: var(--post-text-soft);
  font-size: var(--fs-sm);
}

.post-sources_list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.post-sources_list li {
  margin: 0;
}

.post-sources_list a {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  text-decoration: none;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--post-line-soft);
  background: color-mix(in srgb, var(--post-text-strong) 2%, transparent);
  color: var(--post-text-main);
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}

.post-sources_list a::after {
  content: "\2197";
  color: color-mix(in srgb, var(--post-accent) 90%, transparent);
  font-size: var(--fs-sm);
}

.post-sources_list a:hover {
  background: color-mix(in srgb, var(--post-text-strong) 4%, transparent);
  border-color: color-mix(in srgb, var(--post-accent) 16%, transparent);
  color: var(--post-text-strong);
}

.post-sources_list a:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--post-accent) 85%, transparent);
  outline-offset: 2px;
}

.table-wrap table {
  width: 100%;
  min-width: 640px;
  border-collapse: separate;
  border-spacing: 0;
  color: color-mix(in srgb, var(--post-text-strong) 90%, transparent);
  font-size: var(--fs-sm);
  line-height: 1.45;
}

.table-wrap thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  text-align: left;
  font-weight: 700;
  color: color-mix(in srgb, var(--post-text-strong) 96%, transparent);
  background: var(--post-table-head-bg);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  padding: 12px 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--post-text-strong) 12%, transparent);
}

.table-wrap thead th:first-child {
  border-top-left-radius: 12px;
}

.table-wrap thead th:last-child {
  border-top-right-radius: 12px;
}

.table-wrap tbody td {
  vertical-align: top;
  padding: 11px 14px;
  color: color-mix(in srgb, var(--post-text-strong) 84%, transparent);
  border-bottom: 1px solid var(--post-line-soft);
  border-right: 1px solid var(--post-line-faint);
}

.table-wrap tbody td:last-child {
  border-right: 0;
}

.table-wrap tbody tr:nth-child(odd) td {
  background: color-mix(in srgb, var(--post-text-strong) 1.5%, transparent);
}

.table-wrap tbody tr:nth-child(even) td {
  background: color-mix(in srgb, var(--post-text-strong) 2.8%, transparent);
}

.table-wrap tbody tr:hover td {
  background: color-mix(in srgb, var(--post-accent) 4%, transparent);
}

.table-wrap tbody tr:last-child td {
  border-bottom: 0;
}

/* 2-column roadmap/checklist tables: more readable and space-efficient */
.table-wrap table:has(thead th:nth-child(2):last-child) {
  min-width: 0;
}

.table-wrap table:has(thead th:nth-child(2):last-child) thead th:first-child {
  width: 28%;
}

.table-wrap table:has(thead th:nth-child(2):last-child) thead th:last-child {
  width: 72%;
}

.table-wrap table:has(thead th:nth-child(2):last-child) tbody td {
  padding-top: 10px;
  padding-bottom: 10px;
}

.table-wrap table:has(thead th:nth-child(2):last-child) tbody td:first-child {
  color: color-mix(in srgb, var(--post-text-strong) 90%, transparent);
  font-weight: 500;
}

.table-wrap table.table--grouped-2col {
  min-width: 0;
}

.table-wrap table.table--grouped-2col thead th:first-child {
  width: 28%;
}

.table-wrap table.table--grouped-2col thead th:last-child {
  width: 72%;
}

.table-wrap table.table--grouped-2col tbody td {
  padding-top: 10px;
  padding-bottom: 10px;
}

.table-wrap table.table--grouped-2col tbody td.table-cell-group {
  vertical-align: top;
  font-weight: 600;
  color: color-mix(in srgb, var(--post-text-strong) 93%, transparent);
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--post-text-strong) 2%, transparent),
      color-mix(in srgb, var(--post-text-strong) 1%, transparent)
    ) !important;
  border-right: 1px solid var(--post-line-soft);
}

.table-wrap table.table--grouped-2col tbody tr:hover td.table-cell-group {
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--post-text-strong) 3%, transparent),
      color-mix(in srgb, var(--post-text-strong) 1.5%, transparent)
    ) !important;
}

/* very wide matrices: denser typography + wider min width */
.table-wrap table:has(thead th:nth-child(6)) {
  min-width: 1180px;
  font-size: var(--fs-xs);
  line-height: 1.4;
}

.table-wrap table:has(thead th:nth-child(6)) thead th,
.table-wrap table:has(thead th:nth-child(6)) tbody td {
  padding: 10px 12px;
}

.table-wrap table:has(thead th:nth-child(8)) {
  min-width: 1380px;
}

/* give first column (often index or category) a visual anchor on large matrices */
.table-wrap table:has(thead th:nth-child(6)) tbody td:first-child,
.table-wrap table:has(thead th:nth-child(6)) thead th:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
}

.table-wrap table:has(thead th:nth-child(6)) thead th:first-child {
  background: var(--post-table-head-bg-sticky);
}

.table-wrap table:has(thead th:nth-child(6)) tbody td:first-child {
  background: var(--post-table-first-col-bg);
  box-shadow: 10px 0 16px -14px rgba(0, 0, 0, 0.7);
}

@media (max-width: 760px) {
  .table-wrap {
    padding: 0.55rem;
    border-radius: 14px;
  }

  .table-wrap table {
    min-width: 560px;
    font-size: var(--fs-xs);
  }

  .table-wrap thead th,
  .table-wrap tbody td {
    padding: 9px 10px;
  }
}

.post-cta {
  margin-top: 2.5rem;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  border: 1px solid var(--post-line);
  border-radius: 22px;
  padding: 16px 18px;
  background:
    radial-gradient(
      120% 120% at 0% 0%,
      color-mix(in srgb, var(--post-accent) 14%, transparent),
      transparent 55%
    ),
    radial-gradient(
      90% 100% at 100% 100%,
      rgba(0, 70, 170, 0.14),
      transparent 60%
    ),
    linear-gradient(180deg, var(--post-panel-a), var(--post-panel-b));
  box-shadow:
    var(--post-shadow-lg),
    inset 0 1px 0 color-mix(in srgb, var(--post-text-strong) 4%, transparent);
}

.post-cta > div {
  flex: 1 1 340px;
  color: var(--post-text-main);
  line-height: 1.5;
}

.post-cta strong {
  color: var(--post-text-strong);
  font-size: var(--fs-md);
}

.post-cta .btn {
  flex: 0 0 auto;
  min-height: 46px;
  padding-inline: 16px;
  border-radius: 14px;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.22);
}

@media (max-width: 760px) {
  .post-cta {
    flex-direction: column;
    align-items: flex-start;
  }

  .post-cta .btn {
    width: 100%;
    justify-content: center;
  }
}



/* ---- /assets/css/pages/ressourcen.css ---- */
body.ressourcen-page {
  --res-line: rgba(255, 255, 255, 0.08);
  --res-line-strong: rgba(255, 255, 255, 0.12);
  --res-panel:
    linear-gradient(180deg, rgba(9, 13, 20, 0.72), rgba(7, 10, 16, 0.9));
  --res-panel-soft: rgba(8, 12, 20, 0.46);
  --res-panel-soft-2: rgba(255, 255, 255, 0.02);
  --res-card:
    radial-gradient(120% 90% at 0% 0%, rgba(0, 190, 190, 0.08), transparent 55%),
    linear-gradient(180deg, rgba(8, 12, 20, 0.72), rgba(6, 9, 16, 0.86));
  --res-card-selected:
    radial-gradient(120% 90% at 0% 0%, rgba(0, 190, 190, 0.14), transparent 58%),
    linear-gradient(180deg, rgba(8, 13, 20, 0.74), rgba(6, 9, 16, 0.88));
  --res-text: var(--text-strong);
  --res-text-muted: rgba(255, 255, 255, 0.72);
  --res-text-soft: rgba(255, 255, 255, 0.66);
  --res-shadow:
    0 16px 32px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.03);
  --res-shadow-hover:
    0 18px 34px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  --res-badge-bg: rgba(0, 121, 120, 0.14);
  --res-badge-line: rgba(0, 190, 190, 0.18);
  --res-badge-fg: rgba(214, 255, 250, 0.92);
}

body.ressourcen-page .page-shell {
  background:
    radial-gradient(90rem 50rem at 10% -10%, rgba(0, 190, 190, 0.12), transparent 55%),
    radial-gradient(70rem 45rem at 100% 20%, rgba(0, 121, 120, 0.12), transparent 65%),
    var(--page-bg);
}

.resources-hero {
  padding-top: clamp(18px, 3vw, 34px);
}

.resources-hero .page-head {
  max-width: 820px;
}

.resources-hero .lead {
  max-width: 72ch;
}

.resources-kpis {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
  max-width: 520px;
}

.resources-kpi {
  border: 1px solid var(--res-line);
  border-radius: 14px;
  background: var(--res-panel-soft);
  padding: 12px 14px;
}

.resources-kpi_label {
  display: block;
  color: var(--res-text-soft);
  font-size: var(--fs-xs);
}

.resources-kpi_value {
  display: block;
  margin-top: 4px;
  font-size: var(--fs-xl);
  font-weight: 700;
}

.resources-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.resources-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
  gap: 18px;
  align-items: start;
  margin-top: 18px;
}

.resources-list-pane {
  min-width: 0;
}

.resources-list-head {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 12px;
}

.resources-list-head h2 {
  margin: 0 0 6px;
}

.resources-list-head p {
  margin: 0;
  color: var(--res-text-muted);
  max-width: 56ch;
}

.resources-form-pane {
  position: sticky;
  top: calc(var(--header-h, 78px) + 18px);
}

.resource-card {
  border: 1px solid var(--res-line);
  border-radius: 18px;
  background: var(--res-card);
  box-shadow: var(--res-shadow);
  padding: 13px;
  display: grid;
  gap: 10px;
  cursor: pointer;
  transition:
    transform 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    background 0.15s ease;
}

.resource-card:hover {
  transform: translateY(-1px);
  border-color: var(--res-line-strong);
  box-shadow: var(--res-shadow-hover);
}

.resource-card:focus-visible {
  outline: 2px solid rgba(0, 190, 190, 0.75);
  outline-offset: 2px;
}

.resource-card.is-selected {
  border-color: rgba(0, 190, 190, 0.22);
  background: var(--res-card-selected);
  box-shadow:
    0 18px 34px rgba(0, 0, 0, 0.22),
    0 0 0 1px rgba(0, 121, 120, 0.1) inset;
}

.resource-card_top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.resource-card_badge,
.resource-card_format {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  font-size: var(--fs-2xs);
  border: 1px solid var(--res-line);
}

.resource-card_badge {
  background: var(--res-badge-bg);
  border-color: var(--res-badge-line);
  color: var(--res-badge-fg);
}

.resource-card_format {
  background: color-mix(in srgb, var(--res-text) 3%, transparent);
  color: color-mix(in srgb, var(--res-text) 78%, transparent);
}

.resource-card_title {
  margin: 0;
  font-size: var(--fs-md);
  line-height: 1.18;
}

.resource-card_summary {
  margin: 0;
  color: var(--res-text-muted);
  line-height: 1.38;
  font-size: var(--fs-sm);
}

body.ressourcen-page .btn.btn--ghost {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--res-line);
  color: rgba(255, 255, 255, 0.86);
}

body.ressourcen-page .btn.btn--ghost:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--res-line-strong);
}

.resources-form {
  margin-top: 0;
  border: 1px solid var(--res-line);
  border-radius: 18px;
  background:
    radial-gradient(120% 100% at 100% 0%, rgba(0, 190, 190, 0.06), transparent 60%),
    var(--res-panel);
  box-shadow:
    0 16px 36px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.03);
  padding: 14px;
}

.resources-form_head {
  margin-bottom: 12px;
}

.resources-form_head h2 {
  margin: 0 0 6px;
}

.resources-form_head p {
  margin: 0;
  color: var(--res-text-muted);
}

.resources-form_note {
  margin: 0 0 12px;
  border: 1px solid rgba(0, 190, 190, 0.16);
  border-radius: 12px;
  background: rgba(0, 121, 120, 0.08);
  padding: 10px 12px;
}

.resources-form_note strong {
  display: block;
  margin-bottom: 2px;
}

.resources-form_note p {
  margin: 0;
  color: rgba(236, 255, 252, 0.9);
}

#resource-form-open {
  margin-top: 10px;
}

.resources-form_frame {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--res-text) 6%, transparent);
  background: rgba(3, 5, 10, 0.35);
}

.resources-form_frame iframe {
  display: block;
  width: 100%;
  min-height: 640px;
  border: 0;
}

.resources-process {
  margin-top: 18px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.resources-step {
  border: 1px solid color-mix(in srgb, var(--res-text) 7%, transparent);
  border-radius: 14px;
  background: var(--res-panel-soft-2);
  padding: 10px 12px;
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 10px;
  align-items: start;
}

.resources-step_num {
  display: inline-flex;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  align-items: center;
  justify-content: center;
  background: rgba(0, 121, 120, 0.16);
  border: 1px solid rgba(0, 190, 190, 0.18);
  font-weight: 700;
  margin-bottom: 0;
  grid-row: span 2;
}

.resources-step h3 {
  margin: 0;
  font-size: var(--fs-sm);
}

.resources-step p {
  margin: 0;
  color: var(--res-text-muted);
  line-height: 1.35;
  font-size: var(--fs-xs);
}

html[data-theme="light"] body.ressourcen-page {
  --res-line: var(--line-soft);
  --res-line-strong: var(--line);
  --res-panel:
    linear-gradient(
      180deg,
      color-mix(in srgb, white 88%, var(--surface-card-a) 12%),
      color-mix(in srgb, white 78%, var(--surface-card-b) 22%)
    );
  --res-panel-soft:
    linear-gradient(
      180deg,
      color-mix(in srgb, white 86%, var(--surface-card-a) 14%),
      color-mix(in srgb, white 76%, var(--surface-card-b) 24%)
    );
  --res-panel-soft-2: color-mix(in srgb, white 88%, var(--surface-card-a) 12%);
  --res-card:
    radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--brand) 8%, white), transparent 55%),
    linear-gradient(
      180deg,
      color-mix(in srgb, white 88%, var(--surface-card-a) 12%),
      color-mix(in srgb, white 78%, var(--surface-card-b) 22%)
    );
  --res-card-selected:
    radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--brand) 14%, white), transparent 58%),
    linear-gradient(
      180deg,
      color-mix(in srgb, white 92%, var(--surface-card-a) 8%),
      color-mix(in srgb, white 82%, var(--surface-card-b) 18%)
    );
  --res-text: var(--text-strong);
  --res-text-muted: var(--text-main);
  --res-text-soft: var(--text-muted);
  --res-shadow:
    0 14px 30px rgba(21, 37, 55, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.72);
  --res-shadow-hover:
    0 18px 34px rgba(21, 37, 55, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  --res-badge-bg:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--brand-deep) 88%, var(--brand) 12%),
      color-mix(in srgb, var(--brand-deep) 72%, var(--brand) 28%)
    );
  --res-badge-line: color-mix(in srgb, var(--brand) 28%, transparent);
  --res-badge-fg: rgba(238, 255, 252, 0.96);
}

html[data-theme="light"] body.ressourcen-page .page-shell {
  background:
    radial-gradient(90rem 52rem at 8% -10%, color-mix(in srgb, var(--brand) 10%, white), transparent 55%),
    radial-gradient(72rem 46rem at 100% 16%, color-mix(in srgb, var(--brand-deep) 6%, white), transparent 65%),
    linear-gradient(180deg, color-mix(in srgb, white 90%, var(--surface-card-a) 10%), color-mix(in srgb, white 82%, var(--surface-card-b) 18%));
}

html[data-theme="light"] body.ressourcen-page .resources-hero .page-head h1,
html[data-theme="light"] body.ressourcen-page .resources-hero .page-head p,
html[data-theme="light"] body.ressourcen-page .resources-list-head h2,
html[data-theme="light"] body.ressourcen-page .resources-list-head p,
html[data-theme="light"] body.ressourcen-page .resources-form h2,
html[data-theme="light"] body.ressourcen-page .resources-form p,
html[data-theme="light"] body.ressourcen-page .resource-card_title,
html[data-theme="light"] body.ressourcen-page .resources-step h3 {
  color: var(--res-text);
}

html[data-theme="light"] body.ressourcen-page .resources-form_head p,
html[data-theme="light"] body.ressourcen-page .resources-step p,
html[data-theme="light"] body.ressourcen-page .resource-card_summary,
html[data-theme="light"] body.ressourcen-page .resources-list-head p,
html[data-theme="light"] body.ressourcen-page .resources-kpi_label {
  color: var(--res-text-muted);
}

html[data-theme="light"] body.ressourcen-page .resources-kpi,
html[data-theme="light"] body.ressourcen-page .resources-form,
html[data-theme="light"] body.ressourcen-page .resource-card {
  border-color: var(--res-line);
}

html[data-theme="light"] body.ressourcen-page .resource-card_format {
  background: color-mix(in srgb, var(--text-strong) 3%, white);
  color: color-mix(in srgb, var(--text-strong) 72%, transparent);
}

html[data-theme="light"] body.ressourcen-page .resources-form_note {
  border-color: color-mix(in srgb, var(--brand) 20%, transparent);
  background: color-mix(in srgb, var(--brand) 8%, white);
}

html[data-theme="light"] body.ressourcen-page .resources-form_note p {
  color: var(--res-text);
}

html[data-theme="light"] body.ressourcen-page .resources-form_frame {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(244, 249, 255, 0.82));
}

html[data-theme="light"] body.ressourcen-page .resources-step {
  background: color-mix(in srgb, white 86%, var(--surface-card-a) 14%);
}

html[data-theme="light"] body.ressourcen-page .resources-step_num {
  color: var(--text-strong);
  background: color-mix(in srgb, var(--brand) 10%, white);
  border-color: color-mix(in srgb, var(--brand) 20%, transparent);
}

@media (max-width: 979px) {
  .resources-layout {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .resources-form-pane {
    position: static;
  }

  .resources-kpis {
    grid-template-columns: 1fr;
    max-width: none;
  }

  .resources-list-head {
    flex-direction: column;
  }

  .resources-process {
    grid-template-columns: 1fr;
  }

  .resources-form_frame iframe {
    min-height: 520px;
  }

  .resource-card_actions {
    flex-wrap: wrap;
  }
}


/* ---- /assets/css/base/theme-light-fixes.css ---- */
/* =========================================================
   /assets/css/base/theme-light-fixes.css
   Zentraler Reparatur-/Konsolidierungslayer nur fuer Light Theme.
   Dark Theme bleibt unveraendert.
========================================================= */

html[data-theme="light"] {
  --lt-text: var(--text-strong);
  --lt-text-2: var(--text-main);
  --lt-text-3: var(--text-soft);
  --lt-text-4: var(--text-faint);
  --lt-line: var(--line);
  --lt-line-2: var(--line-soft);
  --lt-line-3: var(--line-faint);
  --lt-panel: var(--surface-card-a);
  --lt-panel-soft: var(--surface-card-b);
  --lt-glass: var(--surface-glass-a);
  --lt-shadow: 0 14px 36px rgba(21, 37, 55, 0.08);
  --lt-shadow-lg: 0 18px 44px rgba(21, 37, 55, 0.1);
  --lt-shadow-xl: 0 40px 84px rgba(18, 31, 46, 0.18);
  --lt-overlay-white-1: rgba(255, 255, 255, 0.01);
  --lt-overlay-white-2: rgba(255, 255, 255, 0.02);
  --lt-overlay-white-3: rgba(255, 255, 255, 0.035);
  --lt-surface-strong: rgba(255, 255, 255, 0.84);
  --lt-surface-soft: rgba(255, 255, 255, 0.62);
  --lt-surface-soft-2: rgba(255, 255, 255, 0.78);
  --lt-surface-soft-3: rgba(255, 255, 255, 0.9);
  --lt-panel-grad-a: rgba(255, 255, 255, 0.84);
  --lt-panel-grad-b: rgba(246, 250, 255, 0.9);
  --lt-panel-grad-c: rgba(247, 251, 255, 0.92);
  --lt-panel-grad-d: rgba(248, 252, 255, 0.95);
  --lt-panel-grad-e: rgba(245, 249, 253, 0.88);
  --lt-panel-grad-f: rgba(245, 249, 253, 0.86);
  --lt-panel-grad-g: rgba(246, 250, 255, 0.96);
  --lt-accent-bg: color-mix(in srgb, var(--accent) 8%, transparent);
  --lt-accent-line: color-mix(in srgb, var(--accent) 16%, transparent);
  --lt-accent-line-strong: color-mix(in srgb, var(--accent) 22%, transparent);
  --lt-accent-fg: color-mix(in srgb, var(--accent) 88%, black);
  --lt-ghost-fg: color-mix(in srgb, var(--text-strong) 72%, transparent);
  --lt-ghost-fg-hover: color-mix(in srgb, var(--accent) 90%, black);
  --lt-card-line: var(--line-soft);
  --lt-card-line-strong: var(--line);
  --lt-divider: var(--line-soft);
  --lt-icon-soft: color-mix(in srgb, var(--text-strong) 38%, transparent);
  --lt-icon-faint: color-mix(in srgb, var(--text-strong) 18%, transparent);
  --lt-link-subtle: color-mix(in srgb, var(--text-strong) 64%, transparent);
  --lt-link-accent: color-mix(in srgb, var(--accent) 86%, black);
  --lt-blog-btn-bg-a: rgba(255, 255, 255, 0.7);
  --lt-blog-btn-bg-b: rgba(248, 251, 255, 0.72);
  --lt-blog-btn-bg-base: rgba(255, 255, 255, 0.66);
  --lt-blog-btn-shadow: 0 10px 24px rgba(21, 37, 55, 0.08);
  --lt-blog-btn-shine: rgba(255, 255, 255, 0.8);
  --lt-blog-card-glow: rgba(0, 190, 190, 0.06);
  --lt-blog-card-overlay-a: rgba(255, 255, 255, 0.34);
  --lt-blog-card-overlay-b: rgba(247, 251, 255, 0.22);
  --lt-blog-card-overlay-c: rgba(240, 246, 252, 0.28);
  --lt-blog-card-fade-a: rgba(248, 251, 255, 0.86);
  --lt-blog-card-fade-b: rgba(248, 251, 255, 0.54);
  --lt-blog-card-fade-c: rgba(248, 251, 255, 0.08);
  --lt-blog-title-shadow: rgba(255, 255, 255, 0.22);
  --lt-readable-panel-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(246, 250, 255, 0.82));
  --lt-readable-panel-bg-strong: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(246, 250, 255, 0.88));
  --lt-readable-panel-line: rgba(10, 23, 34, 0.12);
  --lt-readable-panel-shadow: 0 14px 30px rgba(21, 37, 55, 0.1);
  --lt-scroll-thumb: color-mix(in srgb, var(--text-strong) 16%, transparent);
  --lt-modal-backdrop: rgba(9, 17, 24, 0.28);
}

/* ---------------------------------------------------------
   Background sections with images (global fix)
--------------------------------------------------------- */

html[data-theme="light"] .section.has-bg {
  --bg-dim: 1;
  --overlay-top: 0;
  --overlay-bottom: 0.015;
  --text-shadow: 0 1px 4px rgba(255, 255, 255, 0.16);
  --img-fx-saturate: 1.02;
  --img-fx-contrast: 1.08;
  --img-fx-opacity: 0.94;
  --bg-overlay-hi: rgba(255, 255, 255, 0.035);
  --bg-overlay-accent: rgba(0, 190, 190, 0.018);
  --bg-overlay-warm: rgba(255, 120, 45, 0.03);
  --bg-fade-top-soft: rgba(255, 255, 255, 0.02);
  --bg-fade-bottom-soft: rgba(255, 255, 255, 0.01);
}

html[data-theme="light"] .section.has-bg::before {
  -webkit-mask-image: none;
  mask-image: none;
}

html[data-theme="light"] .section.has-bg::after {
  background:
    radial-gradient(
      760px 420px at 18% 22%,
      var(--bg-overlay-hi),
      transparent 62%
    ),
    radial-gradient(
      560px 340px at 84% 18%,
      var(--bg-overlay-accent),
      transparent 66%
    ),
    linear-gradient(
      to bottom,
      transparent,
      color-mix(in srgb, var(--lt-panel-grad-b) 8%, transparent)
    );
  -webkit-mask-image: none;
  mask-image: none;
}

html[data-theme="light"] .section.has-bg .section_head h2,
html[data-theme="light"] .section.has-bg .section_head h3,
html[data-theme="light"] .section.has-bg > .container > h2 {
  color: var(--lt-text);
  text-shadow: none;
}

html[data-theme="light"] .section.has-bg .section_head .muted,
html[data-theme="light"] .section.has-bg .section_head p,
html[data-theme="light"] .section.has-bg .eyebrow {
  color: var(--lt-text-2);
  text-shadow: none;
}

/* Readability panel for text blocks on image sections */
html[data-theme="light"] .section.has-bg .section_head:not(.section_head--row) {
  position: relative;
  z-index: 1;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid var(--lt-readable-panel-line);
  background: var(--lt-readable-panel-bg);
  box-shadow: var(--lt-readable-panel-shadow);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

html[data-theme="light"] .section.has-bg .section_head--row > div {
  position: relative;
  z-index: 1;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid var(--lt-readable-panel-line);
  background: var(--lt-readable-panel-bg);
  box-shadow: var(--lt-readable-panel-shadow);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

html[data-theme="light"] .section--alt:not(.has-bg)::before {
  background:
    radial-gradient(
      760px 340px at 18% 0%,
      var(--lt-overlay-white-3),
      transparent 62%
    ),
    linear-gradient(
      to bottom,
      var(--lt-overlay-white-1) 0,
      transparent 220px
    );
}

/* ---------------------------------------------------------
   Hero / image sections readability in light
--------------------------------------------------------- */

html[data-theme="light"] .hero h1 {
  color: var(--lt-text);
}

html[data-theme="light"] .hero .lead {
  color: var(--lt-text-2);
}

html[data-theme="light"] .hero .eyebrow {
  color: var(--lt-text-4);
}

html[data-theme="light"] .hero_copy {
  padding: 18px 20px;
  border-radius: 22px;
  border: 1px solid var(--lt-readable-panel-line);
  background: var(--lt-readable-panel-bg-strong);
  box-shadow: var(--lt-readable-panel-shadow);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

html[data-theme="light"] .hero_card .card,
html[data-theme="light"] .card_note {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* ---------------------------------------------------------
   Model section (#modell)
--------------------------------------------------------- */

html[data-theme="light"] #modell .section_head h2,
html[data-theme="light"] #modell .section_head .muted {
  color: var(--lt-text);
}

html[data-theme="light"] #modell .section_head .muted {
  color: var(--lt-text-2);
}

html[data-theme="light"] #modell .model-step {
  background: linear-gradient(180deg, var(--lt-panel), var(--lt-panel-soft)) !important;
  border: 1px solid var(--lt-line) !important;
  box-shadow: var(--lt-shadow) !important;
}

html[data-theme="light"] #modell .model-step h3 {
  color: var(--lt-text);
}

html[data-theme="light"] #modell .model-step .muted {
  color: var(--lt-text-2);
}

html[data-theme="light"] #modell .model-step .eyebrow::before {
  color: var(--lt-text-3);
}

html[data-theme="light"] #modell .btn--ghost {
  color: var(--lt-ghost-fg) !important;
}

html[data-theme="light"] #modell .btn--ghost:hover {
  color: var(--lt-ghost-fg-hover) !important;
}

/* ---------------------------------------------------------
   Education and other image sections content cards
--------------------------------------------------------- */

html[data-theme="light"] #bildung .card,
html[data-theme="light"] .bg--bildung .card {
  background: var(--lt-surface-soft-2);
  border-color: var(--lt-card-line);
  box-shadow: var(--lt-shadow);
}

html[data-theme="light"] #bildung .feature {
  background: linear-gradient(180deg, var(--lt-surface-soft-3), var(--lt-panel-grad-b));
  border: 1px solid var(--lt-card-line);
  border-radius: 22px;
  box-shadow: var(--lt-shadow);
}

html[data-theme="light"] #bildung .feature h3,
html[data-theme="light"] #bildung .feature p {
  color: var(--lt-text);
}

html[data-theme="light"] #bildung .feature p {
  color: var(--lt-text-2);
}

html[data-theme="light"] #bildung h2,
html[data-theme="light"] #bildung h3,
html[data-theme="light"] #bildung p {
  color: var(--lt-text);
}

html[data-theme="light"] #bildung .muted {
  color: var(--lt-text-2);
}

/* ---------------------------------------------------------
   Fractional CDO compare / cards block (light)
--------------------------------------------------------- */

html[data-theme="light"] #fractional-cdo .section_head h2,
html[data-theme="light"] #fractional-cdo .section_head p,
html[data-theme="light"] #fractional-cdo .section_head .muted,
html[data-theme="light"] #fractional-cdo .eyebrow {
  color: var(--lt-text);
  text-shadow: none;
}

html[data-theme="light"] #fractional-cdo .section_head .muted,
html[data-theme="light"] #fractional-cdo .eyebrow {
  color: var(--lt-text-2);
}

html[data-theme="light"] #fractional-cdo .card {
  background: linear-gradient(180deg, var(--lt-panel-grad-a), var(--lt-panel-grad-b));
  border-color: var(--lt-card-line);
  box-shadow: var(--lt-shadow);
}

html[data-theme="light"] #fractional-cdo .card h3,
html[data-theme="light"] #fractional-cdo .card strong {
  color: var(--lt-text);
}

html[data-theme="light"] #fractional-cdo .card p,
html[data-theme="light"] #fractional-cdo .bullets li,
html[data-theme="light"] #fractional-cdo .cta-row_copy {
  color: var(--lt-text-2);
}

html[data-theme="light"] #fractional-cdo .cta-row_copy .muted {
  color: var(--lt-text-2);
}

html[data-theme="light"] #faq .cta-row_copy {
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--lt-readable-panel-line);
  background: var(--lt-readable-panel-bg);
  box-shadow: var(--lt-shadow);
}

html[data-theme="light"] #faq .cta-row .btn {
  background: var(--lt-surface-soft-3);
  border-color: var(--lt-line);
  color: var(--lt-text);
  box-shadow: var(--lt-shadow);
}

html[data-theme="light"] #fractional-cdo .cta-row::before {
  background: var(--lt-card-line-strong);
}

/* Contact section ("Kontakt") */
html[data-theme="light"] #kontakt .section_head h2,
html[data-theme="light"] #kontakt .section_head h3,
html[data-theme="light"] #kontakt .contact-card h3,
html[data-theme="light"] #kontakt .contact-card strong {
  color: var(--lt-text);
}

html[data-theme="light"] #kontakt .section_head p,
html[data-theme="light"] #kontakt .contact-card p,
html[data-theme="light"] #kontakt .contact-hint,
html[data-theme="light"] #kontakt .muted {
  color: var(--lt-text-2);
}

html[data-theme="light"] #kontakt .contact-card {
  background: linear-gradient(180deg, var(--lt-surface-soft-3), var(--lt-panel-grad-b));
  border-color: var(--lt-card-line);
}

html[data-theme="light"] #kontakt .contact-card--primary {
  background: linear-gradient(
    180deg,
    var(--lt-accent-bg),
    var(--lt-surface-soft-2)
  );
  border-color: var(--lt-accent-line);
}

html[data-theme="light"] #kontakt hr,
html[data-theme="light"] #kontakt .divider {
  border-color: var(--lt-divider);
}

/* ---------------------------------------------------------
   Use cases cards
--------------------------------------------------------- */

html[data-theme="light"] #usecases .section_head h2 {
  color: var(--lt-text);
}

html[data-theme="light"] #usecases .section_head .muted {
  color: var(--lt-text-2);
}

html[data-theme="light"] #usecases .card {
  background: linear-gradient(180deg, var(--lt-panel), var(--lt-panel-grad-e));
  border-color: var(--lt-line-2);
  box-shadow: var(--lt-shadow);
}

html[data-theme="light"] #usecases .card h3 {
  color: var(--lt-text);
}

html[data-theme="light"] #usecases .card p,
html[data-theme="light"] #usecases .card .muted.small {
  color: var(--lt-text-2);
}

html[data-theme="light"] #usecases .card .muted.small {
  color: color-mix(in srgb, var(--text-strong) 58%, transparent);
}

html[data-theme="light"] #usecases .pills li {
  color: color-mix(in srgb, var(--text-strong) 52%, transparent);
}

html[data-theme="light"] #usecases .pills li:not(:last-child)::after {
  color: color-mix(in srgb, var(--text-strong) 28%, transparent);
}

html[data-theme="light"] #usecases .actions .btn--ghost {
  color: var(--lt-link-accent);
  font-weight: 600;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--text-strong) 6%);
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, white 92%, var(--accent) 8%),
      color-mix(in srgb, white 84%, var(--surface-card-a) 16%)
    );
  box-shadow:
    0 8px 18px rgba(21, 37, 55, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  text-decoration-color: color-mix(in srgb, var(--accent) 34%, transparent);
}

html[data-theme="light"] #usecases .actions .btn--ghost:hover {
  color: color-mix(in srgb, var(--accent) 96%, black);
  border-color: color-mix(in srgb, var(--accent) 28%, var(--text-strong) 6%);
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, white 97%, var(--accent) 3%),
      color-mix(in srgb, white 89%, var(--surface-card-a) 11%)
    );
  box-shadow:
    0 10px 22px rgba(21, 37, 55, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
  text-decoration-color: color-mix(in srgb, var(--accent) 54%, transparent);
}

/* Roles comparison table section */
html[data-theme="light"] #rollenvergleich .section_head h2,
html[data-theme="light"] #rollenvergleich .section_head p {
  color: var(--lt-text);
}

html[data-theme="light"] #rollenvergleich .section_head p,
html[data-theme="light"] #rollenvergleich .table thead th {
  color: var(--lt-text-2);
}

html[data-theme="light"] #rollenvergleich .card {
  background: linear-gradient(180deg, var(--lt-panel-grad-a), var(--lt-panel-grad-f));
  border-color: var(--lt-line-2);
}

/* ---------------------------------------------------------
   FAQ (component is dark-first, needs a full light palette)
--------------------------------------------------------- */

html[data-theme="light"] .faq {
  --faq-text: var(--lt-text);
  --faq-muted: var(--lt-text-2);
  --faq-border: var(--lt-line);
  --faq-border-strong: color-mix(in srgb, var(--text-strong) 14%, transparent);
  --faq-bg: var(--lt-surface-soft);
  --faq-bg-hover: var(--lt-surface-soft-2);
  --faq-bg-open: var(--lt-surface-strong);
  --faq-shadow: var(--lt-shadow);
  --faq-shadow-open: var(--lt-shadow-lg);
}

html[data-theme="light"] .faq_group_title {
  color: rgba(239, 255, 252, 0.96);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.18);
  display: inline-block;
  padding: 2px 6px;
  border-radius: 8px;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--brand-deep) 88%, var(--brand) 12%),
    color-mix(in srgb, var(--brand-deep) 72%, var(--brand) 28%)
  );
  border: 1px solid color-mix(in srgb, var(--brand) 26%, transparent);
  box-shadow:
    0 6px 12px rgba(0, 46, 43, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

html[data-theme="light"] .faq details {
  background: linear-gradient(180deg, var(--surface-card-a), var(--lt-panel-grad-e));
  box-shadow: var(--faq-shadow);
}

html[data-theme="light"] .faq details:hover {
  background: linear-gradient(180deg, var(--lt-surface-soft-3), var(--lt-panel-grad-c));
}

html[data-theme="light"] .faq details[open] {
  background: linear-gradient(180deg, var(--lt-surface-soft-3), var(--lt-panel-grad-d));
  box-shadow: var(--faq-shadow-open);
  border-color: var(--lt-accent-line);
}

html[data-theme="light"] .faq summary::after {
  border-color: color-mix(in srgb, var(--text-strong) 12%, transparent);
  background: color-mix(in srgb, var(--text-strong) 4%, transparent);
  color: var(--text-soft);
}

html[data-theme="light"] .faq details:hover summary::after {
  background: color-mix(in srgb, var(--text-strong) 7%, transparent);
  border-color: color-mix(in srgb, var(--text-strong) 16%, transparent);
  color: var(--text-main);
}

html[data-theme="light"] .faq details[open] summary::after {
  background: var(--lt-accent-bg);
  border-color: var(--lt-accent-line-strong);
  color: var(--lt-accent-fg);
}

html[data-theme="light"] .faq details[open] summary {
  border-bottom-color: var(--lt-line);
}

html[data-theme="light"] #faq .section_head h2,
html[data-theme="light"] #faq .section_head p,
html[data-theme="light"] #faq .section_foot h3,
html[data-theme="light"] #faq .section_foot p {
  color: var(--lt-text);
}

html[data-theme="light"] #faq .section_head p,
html[data-theme="light"] #faq .section_foot p {
  color: var(--lt-text-2);
}

html[data-theme="light"] #faq .cta-row_copy strong {
  color: var(--lt-text);
}

html[data-theme="light"] #faq .cta-row_copy .muted {
  color: var(--lt-text-2);
}

/* ---------------------------------------------------------
   Modals (component is fully dark-first)
--------------------------------------------------------- */

html[data-theme="light"] .modal::backdrop {
  background: var(--lt-modal-backdrop);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

html[data-theme="light"] .modal_inner {
  border-color: var(--lt-line);
  background: linear-gradient(180deg, var(--lt-surface-soft-3), var(--lt-panel-grad-g));
  box-shadow: var(--lt-shadow-xl);
  color: var(--lt-text);
}

html[data-theme="light"] .modal_close {
  border-color: var(--lt-line);
  background: var(--lt-surface-soft);
  color: color-mix(in srgb, var(--text-strong) 88%, transparent);
}

html[data-theme="light"] .modal_close:hover {
  border-color: var(--lt-accent-line-strong);
  background: var(--lt-surface-soft-2);
}

html[data-theme="light"] .modal_inner h3,
html[data-theme="light"] .modal_sh,
html[data-theme="light"] .modal_inner--mag h5 {
  color: var(--lt-text);
}

html[data-theme="light"] .modal_lead,
html[data-theme="light"] .modal_p,
html[data-theme="light"] .modal_list li,
html[data-theme="light"] .modal_steps li span {
  color: var(--lt-text-2);
}

html[data-theme="light"] .modal_h,
html[data-theme="light"] .modal_inner--mag h4 {
  color: var(--text-faint);
}

html[data-theme="light"] .modal_section,
html[data-theme="light"] .modal_related {
  border-top-color: var(--lt-line);
}

html[data-theme="light"] .modal_box,
html[data-theme="light"] .modal_steps li {
  background: var(--lt-surface-soft);
  border-color: var(--lt-line);
}

html[data-theme="light"] .modal_callout {
  background: linear-gradient(180deg, var(--lt-accent-bg), var(--lt-surface-soft));
  border-color: var(--lt-accent-line);
}

html[data-theme="light"] .modal_callout strong,
html[data-theme="light"] .modal_steps li strong {
  color: var(--lt-text);
}

html[data-theme="light"] .modal_list li::before {
  background: color-mix(in srgb, var(--accent) 82%, transparent);
}

html[data-theme="light"] .modal_link {
  color: color-mix(in srgb, var(--accent) 92%, black);
}

html[data-theme="light"] .modal_inner {
  scrollbar-color: color-mix(in srgb, var(--text-strong) 18%, transparent) transparent;
}

html[data-theme="light"] .modal_inner::-webkit-scrollbar-thumb {
  background: var(--lt-scroll-thumb);
}

/* ---------------------------------------------------------
   Blog home teaser ("Neu im Blog") in light - keep image clarity
--------------------------------------------------------- */

html[data-theme="light"] .bg--blog {
  --bg-dim: 0.98;
  --overlay-top: 0;
  --overlay-bottom: 0.035;
}

html[data-theme="light"] .bg--blog .section_head--row h2 {
  color: var(--lt-text);
  text-shadow: none;
}

html[data-theme="light"] .bg--blog .section_head--row .btn {
  color: var(--lt-text);
  border-color: color-mix(in srgb, var(--text-strong) 12%, transparent);
  background:
    linear-gradient(var(--lt-blog-btn-bg-a), var(--lt-blog-btn-bg-b)),
    var(--lt-blog-btn-bg-base);
  box-shadow:
    var(--lt-blog-btn-shadow),
    inset 0 1px 0 var(--lt-blog-btn-shine);
}

html[data-theme="light"] #home-blog-grid .blog-card {
  background:
    radial-gradient(
      120% 100% at 12% 8%,
      var(--lt-blog-card-glow),
      transparent 54%
    ),
    linear-gradient(
      180deg,
      var(--lt-blog-card-overlay-a),
      var(--lt-blog-card-overlay-b) 60%,
      var(--lt-blog-card-overlay-c)
    );
}

html[data-theme="light"] #home-blog-grid .blog-card_media img {
  opacity: 0.72;
  filter: saturate(1.03) brightness(0.97) contrast(1.05);
}

html[data-theme="light"] #home-blog-grid .blog-card_body {
  background: linear-gradient(
    to top,
    rgba(248, 251, 255, 0.94) 0%,
    rgba(248, 251, 255, 0.82) 42%,
    rgba(248, 251, 255, 0.38) 100%
  );
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* Keep teaser text strong over bright imagery */
html[data-theme="light"] #home-blog-grid .blog-card_title {
  color: var(--lt-text);
  text-shadow: 0 1px 0 var(--lt-blog-title-shadow);
}

html[data-theme="light"] #home-blog-grid .blog-card_excerpt {
  color: var(--lt-text-2);
}

/* About / stats readability on light backgrounds */
html[data-theme="light"] #ueber-uns .about_stats {
  border-top-color: var(--lt-line);
}

html[data-theme="light"] #ueber-uns .about_stats .stat {
  background: linear-gradient(180deg, var(--lt-surface-soft-3), var(--lt-panel-grad-b));
  border-color: var(--lt-line-2);
  box-shadow: var(--lt-shadow);
}

html[data-theme="light"] #ueber-uns .about_stats .stat strong,
html[data-theme="light"] #ueber-uns .about_stats .stat_k {
  color: var(--lt-text);
}

html[data-theme="light"] #ueber-uns .about_stats .muted.small {
  color: color-mix(in srgb, var(--text-strong) 62%, transparent);
}

/* ---------------------------------------------------------
   Generic glass/cards fallback in light for sections without dedicated overrides
--------------------------------------------------------- */

html[data-theme="light"] .section .card {
  color: var(--lt-text);
}

html[data-theme="light"] .section .card .muted {
  color: var(--lt-text-3);
}


/* ---- main.imports.css (non-import rules) ---- */
/* =========================================================
##################
   /assets/css/main.css (ENTRYPOINT)
##################
   Lädt die konsolidierten Styles in sinnvoller Reihenfolge.
   Hinweis: @import ist ok für jetzt – später ggf. bundlen.
##################
========================================================= */









.page-shell {
  background: var(--page-bg);
}