/* =========================================================================
   ClickUp Profis - Design-System
   Helles Design, eine Schriftfamilie, keine Frameworks.
   Reihenfolge: Tokens, Reset, Basis, Layout, Komponenten, Utilities.
   ========================================================================= */

/* ---------- Schrift (self-hosted, keine externen Requests) ---------- */
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/assets/fonts/plus-jakarta-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/assets/fonts/plus-jakarta-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Tokens ---------- */
:root {
  /* Marke */
  --lila: #7612fa;
  --lila-tief: oklch(0.43 0.26 296);
  --lila-hauch: oklch(0.965 0.022 296);
  --lila-zart: oklch(0.925 0.045 296);
  /* Signatur-Verlauf. Nur fuer Flaechen OHNE Text: weisser Text erreicht
     am cyanfarbenen Ende nur 2,24:1 und am magentafarbenen Ende 3,35:1. */
  --verlauf: linear-gradient(100deg, #40ddff -6.08%, #7612fa 25.08%, #fa12e3);
  /* Derselbe Verlauf, gefenstert auf 44 bis 83 Prozent und mit dunklem
     Schleier. Traegt weissen Text mit 5,69:1 bis 7,63:1 und erfuellt AA. */
  --verlauf-schrift: linear-gradient(rgb(24 0 48 / 0.22), rgb(24 0 48 / 0.22)),
    linear-gradient(100deg, #9712f4, #dc12e8);

  /* Neutrale, alle minimal Richtung Lila getoent. Kein reines Schwarz/Weiss. */
  --grund: oklch(0.994 0.003 296);
  --flaeche: oklch(0.977 0.006 296);
  --flaeche-satt: oklch(0.955 0.012 296);
  --rand: oklch(0.906 0.011 296);
  --rand-stark: oklch(0.836 0.018 296);
  --text-leise: oklch(0.523 0.028 296);
  --text: oklch(0.315 0.032 296);
  --text-laut: oklch(0.221 0.042 296);

  /* Signalfarben */
  --erfolg: oklch(0.52 0.13 155);
  --erfolg-hauch: oklch(0.95 0.03 155);
  --fehler: oklch(0.52 0.19 25);
  --fehler-hauch: oklch(0.96 0.03 25);

  /* Abstaende, 4pt-Raster */
  --r-1: 0.25rem;  --r-2: 0.5rem;   --r-3: 0.75rem;  --r-4: 1rem;
  --r-5: 1.25rem;  --r-6: 1.5rem;   --r-8: 2rem;     --r-10: 2.5rem;
  --r-12: 3rem;    --r-16: 4rem;    --r-20: 5rem;    --r-24: 6rem;
  --r-32: 8rem;

  /* Schriftgroessen, fluid. Grundwert 18px statt 16px, die kleinen
     Stufen wurden ueberproportional angehoben, sie waren das Problem. */
  --t-h1: clamp(2.375rem, 1.6rem + 3.2vw, 3.375rem);
  --t-h2: clamp(1.875rem, 1.35rem + 2.2vw, 2.625rem);
  --t-h3: clamp(1.4375rem, 1.25rem + 0.8vw, 1.75rem);
  --t-h4: 1.3125rem;
  --t-lead: clamp(1.125rem, 1.06rem + 0.35vw, 1.3125rem);
  --t-body: 1.125rem;
  --t-klein: 1.0625rem;
  --t-mini: 0.9375rem;

  /* Radien, Schatten, Motion */
  --radius-s: 8px;
  --radius-m: 14px;
  --radius-l: 20px;
  --radius-xl: 28px;
  --schatten-s: 0 1px 2px oklch(0.3 0.05 296 / 0.06), 0 2px 6px oklch(0.3 0.05 296 / 0.05);
  --schatten-m: 0 2px 4px oklch(0.3 0.05 296 / 0.05), 0 8px 24px oklch(0.3 0.05 296 / 0.08);
  --schatten-l: 0 4px 8px oklch(0.3 0.05 296 / 0.05), 0 20px 48px oklch(0.3 0.05 296 / 0.1);
  --kurve: cubic-bezier(0.22, 1, 0.36, 1);
  --dauer: 240ms;

  /* Masse */
  --breite-inhalt: 1240px;
  --breite-text: 62ch;
  --kopf-hoehe: 88px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", Roboto, sans-serif;
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.65;
  color: var(--text);
  background: var(--grund);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, picture, svg, video { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }

/* ---------- Fokus, sichtbar und ueberall ---------- */
:focus-visible {
  outline: 3px solid var(--lila);
  outline-offset: 3px;
  border-radius: var(--radius-s);
}
:focus:not(:focus-visible) { outline: none; }

/* ---------- Typografie ---------- */
h1, h2, h3, h4 {
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.022em;
  color: var(--text-laut);
  text-wrap: balance;
  /* Deutsche Komposita sprengen auf schmalen Viewports sonst das Layout.
     lang="de" steht am html-Element, die Trennung greift damit korrekt. */
  overflow-wrap: break-word;
  hyphens: auto;
}
/* Ab Tablet ist genug Platz, dort stoert die Trennung das Schriftbild. */
@media (min-width: 700px) { h1, h2, h3, h4 { hyphens: manual; } }
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); letter-spacing: -0.024em; }
h3 { font-size: var(--t-h3); font-weight: 700; letter-spacing: -0.018em; }
h4 { font-size: var(--t-h4); font-weight: 700; letter-spacing: -0.012em; }

p { text-wrap: pretty; overflow-wrap: break-word; }
p, li { max-width: var(--breite-text); }

a { color: var(--lila); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--lila-tief); }

strong, b { font-weight: 700; color: var(--text-laut); }

/* Textmarker fuer Schluesselaussagen */
mark {
  color: #2b2b2b;
  padding: 0 0.35em;
  background: linear-gradient(105deg, rgba(255,200,100,0) 0%, #ffc864 3%,
      rgba(255,200,100,.5) 6%, rgba(255,200,100,.25) 90%, rgba(255,200,100,.7) 96%,
      rgba(255,200,100,0) 100%),
    linear-gradient(175deg, rgba(255,200,100,0), rgba(255,200,100,.3) 10%, rgba(255,200,100,0) 18%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  border-radius: 0.15em;
}

/* Sekundaere Ueberschrift: Lila, Kleinschreibung, enger Buchstabenabstand */
.oberzeile {
  display: block;
  font-size: var(--t-klein);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--lila);
  margin-bottom: var(--r-3);
}

.lead {
  font-size: var(--t-lead);
  line-height: 1.55;
  color: var(--text-leise);
}

.klein { font-size: var(--t-klein); }
.leise { color: var(--text-leise); }

/* ---------- Skip-Link ---------- */
.skip-link {
  position: absolute;
  left: var(--r-4);
  top: var(--r-4);
  z-index: 200;
  padding: var(--r-3) var(--r-5);
  background: var(--text-laut);
  color: var(--grund);
  border-radius: var(--radius-s);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform var(--dauer) var(--kurve);
}
.skip-link:focus-visible { transform: translateY(0); color: var(--grund); }

/* ---------- Layout ---------- */
.huelle {
  width: 100%;
  max-width: var(--breite-inhalt);
  margin-inline: auto;
  padding-inline: var(--r-5);
}
@media (min-width: 768px) { .huelle { padding-inline: var(--r-8); } }

.band { padding-block: var(--r-16); }
.band--eng { padding-block: var(--r-12); }
.band--weit { padding-block: var(--r-24); }
.band--flaeche { background: var(--flaeche); }
.band--linie { border-top: 1px solid var(--rand); }
@media (min-width: 768px) {
  .band { padding-block: var(--r-20); }
  .band--eng { padding-block: var(--r-16); }
  .band--weit { padding-block: var(--r-32); }
}

/* Kopfblock einer Sektion */
.bandkopf { max-width: 60ch; margin-bottom: var(--r-12); }
.bandkopf p { margin-top: var(--r-4); }

/* Nur fuer Screenreader */
.nur-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* =========================================================================
   Komponenten
   ========================================================================= */

/* ---------- Schaltflaechen ---------- */
.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--r-3);
  min-height: 60px;
  padding: var(--r-4) var(--r-8);
  border-radius: var(--radius-m);
  font-weight: 700;
  font-size: var(--t-body);
  letter-spacing: -0.008em;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: transform var(--dauer) var(--kurve), opacity var(--dauer) var(--kurve),
    background-color var(--dauer) var(--kurve), border-color var(--dauer) var(--kurve);
}
.knopf svg { flex: none; }

.knopf--haupt {
  color: #fff;
  background-image: var(--verlauf-schrift);
  border: 1px solid transparent;
  box-shadow: var(--schatten-m);
}
.knopf--haupt:hover { color: #fff; transform: translateY(-3px); box-shadow: var(--schatten-l); }
.knopf--haupt:active { transform: translateY(0); }

.knopf--zweit {
  color: var(--text-laut);
  background: var(--grund);
  border: 1px solid var(--rand-stark);
}
.knopf--zweit:hover {
  color: var(--text-laut);
  background: var(--flaeche);
  border-color: var(--text-leise);
  transform: translateY(-2px);
}
.knopf--zweit:active { transform: translateY(0); }

.knopf--schlicht {
  min-height: 44px;
  padding: 0;
  color: var(--lila);
  font-weight: 700;
  font-size: var(--t-body);
}
.knopf--schlicht:hover { color: var(--lila-tief); }
.knopf--schlicht .pfeil { transition: transform var(--dauer) var(--kurve); }
.knopf--schlicht:hover .pfeil { transform: translateX(4px); }

.knopf[aria-disabled="true"], .knopf:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.knopfgruppe { display: flex; flex-wrap: wrap; gap: var(--r-3); }

/* ---------- Kopfzeile ---------- */
.kopf {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in oklab, var(--grund) 88%, transparent);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dauer) var(--kurve), box-shadow var(--dauer) var(--kurve);
}
@supports (backdrop-filter: blur(1px)) { .kopf { backdrop-filter: blur(12px); } }
.kopf[data-gescrollt="ja"] { border-bottom-color: var(--rand); box-shadow: var(--schatten-s); }

.kopf__innen {
  display: flex;
  align-items: center;
  gap: var(--r-4);
  min-height: var(--kopf-hoehe);
}
.kopf__logo { flex: none; margin-right: auto; }
.kopf__logo img { height: 48px; width: auto; }

.kopf__nav { display: none; }
@media (min-width: 1100px) { .kopf__nav { display: block; } }
.kopf__liste { display: flex; align-items: center; gap: var(--r-1); list-style: none; padding: 0; margin: 0; }
.kopf__liste li { max-width: none; }

.kopf__link {
  display: inline-flex;
  align-items: center;
  gap: var(--r-1);
  padding: var(--r-3);
  white-space: nowrap;
  border-radius: var(--radius-s);
  font-size: var(--t-klein);
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  min-height: 44px;
  transition: background-color var(--dauer) var(--kurve), color var(--dauer) var(--kurve);
}
.kopf__link:hover { color: var(--text-laut); background: var(--flaeche-satt); }
.kopf__link[aria-current="page"] { color: var(--lila); }

.kopf__aktion { display: none; min-height: 46px; padding-inline: var(--r-4); font-size: var(--t-mini); border-radius: var(--radius-s); white-space: nowrap; }
@media (min-width: 1100px) { .kopf__aktion { display: inline-flex; } }

/* Ausklappmenue Leistungen */
.klapp { position: relative; }
.klapp__schalter { width: 100%; }
.klapp__pfeil { transition: transform var(--dauer) var(--kurve); }
.klapp__schalter[aria-expanded="true"] .klapp__pfeil { transform: rotate(180deg); }
.klapp__tafel {
  position: absolute;
  top: calc(100% + var(--r-3));
  left: 0;
  width: min(560px, calc(100vw - var(--r-8)));
  padding: var(--r-4);
  background: var(--grund);
  border: 1px solid var(--rand);
  border-radius: var(--radius-l);
  box-shadow: var(--schatten-l);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--r-1);
  list-style: none;
  margin: 0;
}
.klapp__tafel[hidden] { display: none; }
.klapp__eintrag {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: var(--r-3);
  padding: var(--r-3);
  border-radius: var(--radius-s);
  text-decoration: none;
  color: var(--text-laut);
  transition: background-color var(--dauer) var(--kurve);
}
.klapp__eintrag:hover { background: var(--lila-hauch); color: var(--text-laut); }
.klapp__text { min-width: 0; }
.klapp__eintrag b { display: block; font-size: var(--t-klein); font-weight: 700; }
.klapp__text > span { display: block; font-size: var(--t-mini); color: var(--text-leise); line-height: 1.45; }
.klapp__eintrag { align-items: center; }

/* Mobiles Menue */
.kopf__burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px; height: 52px;
  border-radius: var(--radius-s);
  color: var(--text-laut);
  border: 1px solid var(--rand);
}
@media (min-width: 1100px) { .kopf__burger { display: none; } }
.kopf__burger:hover { background: var(--flaeche-satt); }

.mobilmenue {
  display: none;
  border-top: 1px solid var(--rand);
  background: var(--grund);
  max-height: calc(100dvh - var(--kopf-hoehe));
  overflow-y: auto;
}
.mobilmenue[data-offen="ja"] { display: block; }
@media (min-width: 1100px) { .mobilmenue { display: none !important; } }
.mobilmenue ul { list-style: none; padding: 0; margin: 0; }
.mobilmenue li { max-width: none; border-bottom: 1px solid var(--rand); }
.mobilmenue a {
  display: block;
  padding: var(--r-4) 0;
  font-weight: 600;
  color: var(--text-laut);
  text-decoration: none;
  min-height: 44px;
}
.mobilmenue a:hover { color: var(--lila); }
.mobilmenue__gruppe > a { font-size: var(--t-mini); color: var(--text-leise); font-weight: 500; padding-left: var(--r-4); }
.mobilmenue__aktion { padding-block: var(--r-6); }
.mobilmenue__aktion .knopf { width: 100%; }

/* ---------- Hero ---------- */
.hero { position: relative; padding-block: var(--r-12) var(--r-12); overflow: hidden; }
@media (min-width: 768px) { .hero { padding-block: var(--r-20) var(--r-16); } }
.hero::before {
  content: "";
  position: absolute;
  inset: -30% -10% auto -10%;
  height: 70%;
  background: radial-gradient(60% 60% at 25% 40%, oklch(0.93 0.06 296 / 0.55), transparent 70%),
    radial-gradient(45% 55% at 80% 20%, oklch(0.93 0.05 200 / 0.4), transparent 70%);
  pointer-events: none;
  z-index: -1;
}
.hero__raster { display: grid; gap: var(--r-10); align-items: center; }
.hero__raster > * { min-width: 0; }
@media (min-width: 1024px) { .hero__raster { grid-template-columns: 1fr 1fr; gap: var(--r-16); } }
.hero h1 { margin-bottom: var(--r-5); }
.hero .lead { margin-bottom: var(--r-6); }
.hero .knopfgruppe { margin-top: var(--r-8); }

.partnerband {
  display: inline-flex;
  align-items: center;
  gap: var(--r-3);
  padding: var(--r-2) var(--r-6) var(--r-2) var(--r-2);
  margin-bottom: var(--r-6);
  background: var(--grund);
  border: 1px solid var(--rand);
  border-radius: 999px;
  box-shadow: var(--schatten-s);
  font-size: var(--t-klein);
  font-weight: 700;
  color: var(--text-laut);
}
.partnerband img { height: 40px; width: auto; }

.hakenliste { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--r-3); }
.hakenliste li { display: flex; align-items: flex-start; gap: var(--r-3); font-weight: 500; color: var(--text); max-width: none; }
.hakenliste svg { flex: none; margin-top: 4px; color: var(--lila); }

/* ---------- Video-Fassade (kein iframe im Auslieferungs-HTML) ---------- */
.video { position: relative; }
.video__flaeche {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--rand);
  border-radius: var(--radius-l);
  overflow: hidden;
  background: var(--flaeche-satt);
  box-shadow: var(--schatten-l);
  cursor: pointer;
}
.video__flaeche img { width: 100%; height: 100%; object-fit: cover; }
.video__flaeche::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, oklch(0.22 0.04 296 / 0.35), transparent 55%);
  transition: opacity var(--dauer) var(--kurve);
}
/* Der Play-Knopf sitzt unten links, damit er das Wortzeichen auf dem
   Vorschaubild nicht verdeckt. */
.video__knopf {
  position: absolute;
  left: var(--r-5); bottom: var(--r-5);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: var(--r-3);
  padding: var(--r-2) var(--r-5) var(--r-2) var(--r-2);
  border-radius: 999px;
  background: rgb(255 255 255 / 0.94);
  box-shadow: 0 6px 24px oklch(0.25 0.06 296 / 0.3);
  color: var(--text-laut);
  font-size: var(--t-mini);
  font-weight: 700;
  transition: transform var(--dauer) var(--kurve);
  pointer-events: none;
}
.video__knopf::before {
  content: "";
  flex: none;
  width: 34px; height: 34px;
  border-radius: 999px;
  background: var(--verlauf);
}
.video__knopf svg {
  position: absolute;
  left: 19px;
  width: 13px; height: 15px;
  color: #fff;
}
.video__flaeche:hover .video__knopf { transform: scale(1.04); }
.video__hinweis {
  margin-top: var(--r-3);
  font-size: var(--t-mini);
  color: var(--text-leise);
  max-width: none;
}
.video iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--radius-l); display: block; }

/* ---------- Zertifikatsleiste ---------- */
.zertifikate {
  display: grid;
  gap: var(--r-8);
  padding-top: var(--r-12);
  margin-top: var(--r-16);
  border-top: 1px solid var(--rand);
}
.zertifikate__text {
  font-size: var(--t-h4);
  font-weight: 700;
  letter-spacing: -0.012em;
  color: var(--text-laut);
}
.zertifikate__reihe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--r-6) var(--r-10);
}
.zertifikate__reihe img {
  height: 104px;
  width: auto;
  transition: transform var(--dauer) var(--kurve);
}
.zertifikate__reihe img:hover { transform: scale(1.06); }
@media (max-width: 600px) { .zertifikate__reihe img { height: 76px; } }

/* ---------- Kundenlogo-Wand ----------
   Bewusst statisch, kein Laufband. WCAG 2.2.2 verlangt bei automatisch
   startender Bewegung ueber fuenf Sekunden eine echte Pausiermoeglichkeit;
   Pausieren bei Hover genuegt fuer Tastatur- und Touch-Bedienung nicht.
   Ohne Bewegung entfaellt die Anforderung, und die Logos bekommen Platz. */
.logowand {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--r-10) var(--r-16);
}
@media (max-width: 700px) { .logowand { gap: var(--r-8) var(--r-10); } }

/* Optische Normalisierung: Hoehe = Basis / Seitenverhaeltnis^0.42.
   Gleich breite Logos wirken sonst unterschiedlich gross. */
.kundenlogo {
  --basis: 92px;
  height: calc(var(--basis) * var(--hf, 1));
  width: auto;
  flex: none;
  filter: grayscale(1);
  opacity: 0.78;
  transition: opacity var(--dauer) var(--kurve), filter var(--dauer) var(--kurve),
    transform var(--dauer) var(--kurve);
}
.kundenlogo:hover { opacity: 1; filter: none; transform: scale(1.06); }
.kundenlogo--farbig { opacity: 1; filter: none; }
@media (max-width: 700px) { .kundenlogo { --basis: 68px; } }

/* ---------- Karten und Flaechen ---------- */
.karte {
  padding: var(--r-6);
  background: var(--grund);
  border: 1px solid var(--rand);
  border-radius: var(--radius-l);
  transition: transform var(--dauer) var(--kurve), box-shadow var(--dauer) var(--kurve);
}
.karte--hebt:hover { transform: translateY(-3px); box-shadow: var(--schatten-m); }
@media (min-width: 768px) { .karte { padding: var(--r-8); } }

.notiz {
  padding: var(--r-5) var(--r-6);
  background: var(--lila-hauch);
  border: 1px solid var(--lila-zart);
  border-radius: var(--radius-m);
  font-size: var(--t-klein);
}
.notiz p { max-width: none; }

/* ---------- Redaktioneller Zweispalter (Problemaufriss) ---------- */
.aufriss { display: grid; gap: var(--r-12); }
.aufriss > * { min-width: 0; }
@media (min-width: 900px) { .aufriss { grid-template-columns: 1.15fr 1fr; gap: var(--r-16); align-items: start; } }
.aufriss__text > * + * { margin-top: var(--r-5); }
.aufriss__text p { font-size: var(--t-body); line-height: 1.7; }

/* Symptomliste als echte Definitionsliste */
.symptome { margin: 0; }
.symptome > div { padding-block: var(--r-5); border-top: 1px solid var(--rand); }
.symptome > div:last-child { border-bottom: 1px solid var(--rand); }
.symptome dt {
  font-weight: 700;
  font-size: var(--t-h4);
  letter-spacing: -0.012em;
  color: var(--text-laut);
  margin-bottom: var(--r-2);
}
.symptome dd { margin: 0; font-size: var(--t-klein); color: var(--text-leise); }

/* ---------- Alternierende Leistungsreihen ---------- */
.reihe { display: grid; gap: var(--r-8); align-items: center; padding-block: var(--r-12); }
.reihe + .reihe { border-top: 1px solid var(--rand); }
@media (min-width: 900px) {
  .reihe { grid-template-columns: 1fr 1fr; gap: var(--r-16); padding-block: var(--r-16); }
  .reihe--gedreht .reihe__medium { order: -1; }
}
.reihe__text > * + * { margin-top: var(--r-4); }
.reihe__text .knopfgruppe { margin-top: var(--r-6); }
.reihe__medium img, .reihe__medium picture {
  width: 100%;
  border: 1px solid var(--rand);
  border-radius: var(--radius-l);
  box-shadow: var(--schatten-m);
  overflow: hidden;
}
.reihe__preis {
  display: inline-block;
  padding: var(--r-1) var(--r-3);
  background: var(--flaeche-satt);
  border-radius: 999px;
  font-size: var(--t-mini);
  font-weight: 700;
  color: var(--text-laut);
}

/* ---------- Leistungsindex (kompakte Liste statt Kartenwueste) ---------- */
.index { display: grid; gap: 0; }
@media (min-width: 768px) { .index { grid-template-columns: repeat(2, 1fr); column-gap: var(--r-12); } }
.index__eintrag {
  display: grid;
  min-width: 0;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: var(--r-4);
  padding-block: var(--r-5);
  border-top: 1px solid var(--rand);
  text-decoration: none;
  color: inherit;
  transition: background-color var(--dauer) var(--kurve);
}
.index__eintrag:hover { color: inherit; background: var(--lila-hauch); }
.index__eintrag:hover .index__titel { color: var(--lila); }
.index__titel {
  grid-column: 1;
  min-width: 0;
  font-weight: 700;
  font-size: var(--t-h4);
  letter-spacing: -0.012em;
  color: var(--text-laut);
  transition: color var(--dauer) var(--kurve);
}
.index__preis { grid-column: 2; font-size: var(--t-mini); font-weight: 600; color: var(--text-leise); }
/* Auf schmalen Viewports rutscht der Preis unter den Titel, sonst
   sprengen lange Preisangaben das Raster. */
@media (max-width: 560px) {
  .index__eintrag { grid-template-columns: 1fr; }
  .index__preis { grid-column: 1; order: 3; margin-top: var(--r-2); }
  .index__text { order: 2; }
}
@media (min-width: 561px) { .index__preis { white-space: nowrap; } }
.index__text { grid-column: 1 / -1; font-size: var(--t-klein); color: var(--text-leise); margin-top: var(--r-1); max-width: 46ch; }

/* ---------- Ablauf als Zeilen ----------
   Drei Spalten je Schritt: Ziffer, Titel, Beschreibung, getrennt durch
   Haarlinien. Referenz: Craft Agency. Fuenf gleich breite Spalten haetten
   die Beschreibungen zu stark gestaucht. */
.ablauf { list-style: none; padding: 0; margin: 0; counter-reset: schritt; }
.ablauf li {
  max-width: none;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--r-6);
  align-items: baseline;
  padding-block: var(--r-8);
  border-top: 1px solid var(--rand);
}
.ablauf li:last-child { border-bottom: 1px solid var(--rand); }
.ablauf li::before {
  counter-increment: schritt;
  content: counter(schritt, decimal-leading-zero);
  grid-row: 1;
  font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3.25rem);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.045em;
  color: var(--lila);
  font-variant-numeric: tabular-nums;
  opacity: 0.9;
}
.ablauf h3 { grid-column: 2; font-size: var(--t-h3); margin: 0; }
.ablauf p {
  grid-column: 2;
  margin-top: var(--r-2);
  font-size: var(--t-klein);
  color: var(--text-leise);
  max-width: 62ch;
}
@media (min-width: 900px) {
  .ablauf li {
    grid-template-columns: auto minmax(0, 15rem) minmax(0, 1fr);
    column-gap: var(--r-10);
    padding-block: var(--r-8);
  }
  .ablauf h3 { grid-column: 2; }
  .ablauf p { grid-column: 3; grid-row: 1; margin-top: 0; }
}

/* ---------- Kundenstimmen ---------- */
.stimme { display: flex; flex-direction: column; gap: var(--r-5); }
.stimme blockquote { margin: 0; }
.stimme p { max-width: none; }
.stimme__wer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--r-6);
  margin-top: auto;
  padding-top: var(--r-5);
  border-top: 1px solid var(--rand);
}
/* Auch hier optisch normalisieren, sonst wirken breite Wortmarken
   deutlich groesser als kompakte Bildmarken. */
.stimme__wer img {
  --basis: 34px;
  height: calc(var(--basis) * var(--hf, 1));
  width: auto;
  max-width: 130px;
  object-fit: contain;
  object-position: right center;
  flex: none;
}
.stimme__person { min-width: 0; }
.stimme__wer b { display: block; font-size: var(--t-klein); color: var(--text-laut); }
.stimme__wer span { display: block; font-size: var(--t-mini); color: var(--text-leise); }

.stimme--gross blockquote p {
  font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.625rem);
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: -0.018em;
  color: var(--text-laut);
}
.stimme--klein blockquote p { font-size: var(--t-klein); color: var(--text); }
.stimme--klein.karte { background: #f3f3f3; border-color: oklch(0.88 0.004 296); }

.stimmen__raster { display: grid; gap: var(--r-8); }
@media (min-width: 900px) { .stimmen__raster { grid-template-columns: 1.4fr 1fr; gap: var(--r-12); align-items: start; } }
.stimmen__neben { display: grid; gap: var(--r-6); }
@media (min-width: 600px) and (max-width: 899px) { .stimmen__neben { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Preistabelle ---------- */
.tabellenrahmen { overflow-x: auto; border: 1px solid var(--rand); border-radius: var(--radius-l); background: var(--grund); }
.preistabelle { width: 100%; border-collapse: collapse; font-size: var(--t-klein); min-width: 520px; }
.preistabelle caption { text-align: left; padding: var(--r-5) var(--r-6) 0; font-size: var(--t-mini); color: var(--text-leise); }
.preistabelle th, .preistabelle td { padding: var(--r-4) var(--r-6); text-align: left; vertical-align: top; }
.preistabelle thead th {
  font-size: var(--t-mini);
  font-weight: 700;
  color: var(--text-leise);
  border-bottom: 1px solid var(--rand);
  white-space: nowrap;
}
.preistabelle tbody tr + tr th, .preistabelle tbody tr + tr td { border-top: 1px solid var(--rand); }
.preistabelle tbody th { font-weight: 700; color: var(--text-laut); }
.preistabelle tbody th a { color: inherit; text-decoration: none; }
.preistabelle tbody th a:hover { color: var(--lila); text-decoration: underline; }
.preistabelle .einheit { color: var(--text-leise); white-space: nowrap; }
.preistabelle .betrag { font-weight: 700; color: var(--text-laut); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.preistabelle tbody tr:hover { background: var(--lila-hauch); }

/* Gruppenueberschrift innerhalb der Tabelle. Referenz: Browserbase. */
.preistabelle__gruppe th {
  padding-top: var(--r-6);
  font-size: var(--t-mini);
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--lila);
  background: var(--flaeche);
  border-top: 1px solid var(--rand);
}
.preistabelle tbody:first-of-type .preistabelle__gruppe th { border-top: 0; padding-top: var(--r-4); }
.preistabelle__gruppe:hover { background: var(--flaeche); }
.preistabelle tbody tr + tr th, .preistabelle tbody tr + tr td { border-top: 1px solid var(--rand); }

/* ---------- FAQ-Akkordeon ---------- */
.faq { border-top: 1px solid var(--rand); }
.faq__punkt { border-bottom: 1px solid var(--rand); }
.faq__punkt summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--r-6);
  padding-block: var(--r-5);
  min-height: 44px;
  font-weight: 700;
  font-size: var(--t-h4);
  letter-spacing: -0.012em;
  color: var(--text-laut);
  cursor: pointer;
  list-style: none;
  transition: color var(--dauer) var(--kurve);
}
.faq__punkt summary::-webkit-details-marker { display: none; }
.faq__punkt summary:hover { color: var(--lila); }
.faq__punkt summary::after {
  content: "";
  flex: none;
  width: 12px; height: 12px;
  margin-top: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--dauer) var(--kurve);
}
.faq__punkt[open] summary::after { transform: rotate(-135deg); }
.faq__antwort { padding-bottom: var(--r-6); }
.faq__antwort p { color: var(--text-leise); }

/* ---------- Faktenblock (GEO: zitierbare Frage-Antwort-Paare) ---------- */
.fakten { display: grid; gap: 0; margin: 0; }
@media (min-width: 768px) { .fakten { grid-template-columns: repeat(2, 1fr); column-gap: var(--r-12); } }
.fakten > div { padding-block: var(--r-5); border-top: 1px solid var(--rand); }
.fakten dt { font-size: var(--t-klein); font-weight: 700; color: var(--lila); margin-bottom: var(--r-2); }
.fakten dd { margin: 0; color: var(--text); }

/* ---------- Abschluss-Aufruf ---------- */
.aufruf {
  position: relative;
  padding: var(--r-12) var(--r-6);
  border-radius: var(--radius-xl);
  background: var(--text-laut);
  color: var(--flaeche);
  overflow: hidden;
}
@media (min-width: 768px) { .aufruf { padding: var(--r-20) var(--r-16); } }
.aufruf::before {
  content: "";
  position: absolute;
  inset: auto -10% -60% 40%;
  height: 120%;
  background: radial-gradient(50% 50% at 50% 50%, oklch(0.55 0.28 296 / 0.55), transparent 70%);
  pointer-events: none;
}
.aufruf > * { position: relative; }
.aufruf h2 { color: #fff; max-width: 20ch; }
.aufruf p { color: oklch(0.86 0.02 296); margin-top: var(--r-5); }
.aufruf .knopfgruppe { margin-top: var(--r-8); }
.aufruf .knopf--zweit {
  background: transparent;
  color: #fff;
  border-color: oklch(0.6 0.04 296);
}
.aufruf .knopf--zweit:hover { background: oklch(0.3 0.05 296); color: #fff; border-color: oklch(0.75 0.04 296); }
.aufruf :focus-visible { outline-color: #fff; }

.direktkontakt { display: flex; flex-wrap: wrap; gap: var(--r-8); margin-top: var(--r-10); padding-top: var(--r-8); border-top: 1px solid oklch(0.4 0.04 296); }
.direktkontakt a { color: #fff; font-weight: 700; text-decoration: none; }
.direktkontakt a:hover { color: #fff; text-decoration: underline; }
.direktkontakt span { display: block; font-size: var(--t-mini); color: oklch(0.75 0.03 296); font-weight: 500; }

/* ---------- Formular ---------- */
.formular { display: grid; gap: var(--r-5); max-width: 640px; }
.feld { display: grid; gap: var(--r-2); }
.feld label { font-size: var(--t-klein); font-weight: 700; color: var(--text-laut); }
.feld label .pflicht { color: var(--lila); }
.feld__hinweis { font-size: var(--t-mini); color: var(--text-leise); }
.feld input, .feld textarea, .feld select {
  width: 100%;
  min-height: 48px;
  padding: var(--r-3) var(--r-4);
  background: var(--grund);
  border: 1px solid var(--rand-stark);
  border-radius: var(--radius-s);
  color: var(--text-laut);
  transition: border-color var(--dauer) var(--kurve), box-shadow var(--dauer) var(--kurve);
}
.feld textarea { min-height: 140px; resize: vertical; line-height: 1.6; }
.feld input::placeholder, .feld textarea::placeholder { color: var(--text-leise); opacity: 0.75; }
.feld input:hover, .feld textarea:hover, .feld select:hover { border-color: var(--text-leise); }
.feld input:focus-visible, .feld textarea:focus-visible, .feld select:focus-visible {
  outline: none;
  border-color: var(--lila);
  box-shadow: 0 0 0 3px oklch(0.512 0.284 296 / 0.22);
}
.feld input[aria-invalid="true"], .feld textarea[aria-invalid="true"] { border-color: var(--fehler); }
.feld input[aria-invalid="true"]:focus-visible, .feld textarea[aria-invalid="true"]:focus-visible {
  box-shadow: 0 0 0 3px oklch(0.52 0.19 25 / 0.22);
}
.feld input:disabled, .feld textarea:disabled { background: var(--flaeche-satt); color: var(--text-leise); cursor: not-allowed; }
.feld__fehler { display: flex; align-items: center; gap: var(--r-2); font-size: var(--t-mini); font-weight: 600; color: var(--fehler); }
.feld__fehler:empty { display: none; }

.zustimmung { display: grid; grid-template-columns: auto 1fr; gap: var(--r-3); align-items: start; }
.zustimmung input { width: 20px; height: 20px; min-height: 20px; margin-top: 3px; accent-color: var(--lila); }
.zustimmung label { font-weight: 400; font-size: var(--t-klein); color: var(--text-leise); }

.meldung { padding: var(--r-5) var(--r-6); border-radius: var(--radius-m); font-size: var(--t-klein); font-weight: 600; }
.meldung--erfolg { background: var(--erfolg-hauch); border: 1px solid var(--erfolg); color: var(--erfolg); }
.meldung--fehler { background: var(--fehler-hauch); border: 1px solid var(--fehler); color: var(--fehler); }
.meldung[hidden] { display: none; }

/* ---------- Brotkrumen ---------- */
.krumen { padding-block: var(--r-6) 0; font-size: var(--t-mini); }
.krumen ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--r-2); list-style: none; padding: 0; margin: 0; }
.krumen li { max-width: none; display: flex; align-items: center; gap: var(--r-2); color: var(--text-leise); }
.krumen li:not(:last-child)::after { content: "/"; color: var(--rand-stark); }
.krumen a { color: var(--text-leise); text-decoration: none; }
.krumen a:hover { color: var(--lila); text-decoration: underline; }
.krumen [aria-current="page"] { color: var(--text-laut); font-weight: 600; }

/* ---------- Fusszeile ---------- */
.fuss { background: var(--flaeche); border-top: 1px solid var(--rand); padding-block: var(--r-16) var(--r-10); }
.fuss__kunden { padding-bottom: var(--r-12); margin-bottom: var(--r-12); border-bottom: 1px solid var(--rand); }
.fuss__kunden h2 { font-size: var(--t-h4); color: var(--text-leise); font-weight: 600; margin-bottom: var(--r-8); }
.fuss__logos { display: flex; flex-wrap: wrap; align-items: center; gap: var(--r-8) var(--r-10); }

.fuss__raster { display: grid; gap: var(--r-10); }
@media (min-width: 768px) { .fuss__raster { grid-template-columns: 1.6fr 1fr 1fr; gap: var(--r-12); } }
.fuss h2 { font-size: var(--t-mini); font-weight: 700; color: var(--text-laut); margin-bottom: var(--r-4); letter-spacing: 0; }
.fuss ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--r-3); }
.fuss li { max-width: none; }
.fuss a { color: var(--text-leise); text-decoration: none; font-size: var(--t-klein); }
.fuss a:hover { color: var(--lila); text-decoration: underline; }
.fuss__marke img { height: 46px; width: auto; margin-bottom: var(--r-6); }
.fuss__marke address { font-style: normal; font-size: var(--t-klein); color: var(--text-leise); line-height: 1.7; }
.fuss__unten {
  display: flex; flex-wrap: wrap; gap: var(--r-4) var(--r-6);
  justify-content: space-between; align-items: center;
  margin-top: var(--r-12); padding-top: var(--r-6);
  border-top: 1px solid var(--rand);
  font-size: var(--t-mini); color: var(--text-leise);
}
.fuss__unten ul { display: flex; flex-wrap: wrap; gap: var(--r-5); }

/* ---------- 404 ---------- */
.fehlerseite { display: grid; place-items: center; text-align: center; padding-block: var(--r-32); }
.fehlerseite__code { font-size: clamp(4rem, 2rem + 10vw, 8rem); font-weight: 800; line-height: 1; letter-spacing: -0.04em; color: var(--lila-zart); }
.fehlerseite h1 { margin-block: var(--r-6) var(--r-4); }
.fehlerseite p { margin-inline: auto; }
.fehlerseite .knopfgruppe { justify-content: center; margin-top: var(--r-8); }

/* ---------- Fliesstext (Rechtstexte) ---------- */
.fliesstext { max-width: var(--breite-text); }
.fliesstext > .lead:first-child { margin-top: var(--r-6); }
.fliesstext > * + * { margin-top: var(--r-4); }
.fliesstext h2 { margin-top: var(--r-12); font-size: var(--t-h3); }
.fliesstext h3 { margin-top: var(--r-8); font-size: var(--t-h4); }
.fliesstext ul, .fliesstext ol { padding-left: var(--r-6); display: grid; gap: var(--r-2); }
.fliesstext a { overflow-wrap: anywhere; }

/* ---------- Hilfsklassen ---------- */
.stapel > * + * { margin-top: var(--r-4); }
.stapel-gross > * + * { margin-top: var(--r-8); }
.mittig { text-align: center; margin-inline: auto; }
.trennlinie { border: 0; border-top: 1px solid var(--rand); margin-block: var(--r-12); }

/* ---------- Bewegung global daempfen ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- Druck ---------- */
@media print {
  .kopf, .mobilmenue, .aufruf, .video__knopf { display: none !important; }
  body { color: #000; background: #fff; }
  a::after { content: " (" attr(href) ")"; font-size: 0.8em; }
}

/* ---------- Aussagesatz unter der Oberzeile ---------- */
.grossaussage {
  font-size: var(--t-h2);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.024em;
  color: var(--text-laut);
  text-wrap: balance;
}
.grossaussage--kurz { max-width: 20ch; }
/* Der Aussagesatz im Problemaufriss traegt die Kernbotschaft und
   darf deutlich groesser stehen als eine normale Sektionsaussage. */
.aufriss__text .grossaussage {
  font-size: clamp(2.125rem, 1.4rem + 2.9vw, 3rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
}
.bandkopf .grossaussage + .lead { margin-top: var(--r-5); }
.nachsatz { margin-top: var(--r-10); max-width: none; }
.notiz--abstand { margin-top: var(--r-6); }
.weitere { margin-top: var(--r-16); }
.weitere h3 { margin-bottom: var(--r-6); }

/* ---------- Leistungsseiten ---------- */
.leistungskopf { padding-block: var(--r-10) var(--r-16); }
.leistungskopf__raster { display: grid; gap: var(--r-10); align-items: center; }
.leistungskopf__raster > * { min-width: 0; }
@media (min-width: 900px) { .leistungskopf__raster { grid-template-columns: 1.05fr 1fr; gap: var(--r-16); } }
.leistungskopf h1 { margin-bottom: var(--r-5); }
.leistungskopf .knopfgruppe { margin-top: var(--r-8); }
.leistungskopf__medium img, .leistungskopf__medium picture {
  width: 100%;
  border: 1px solid var(--rand);
  border-radius: var(--radius-l);
  box-shadow: var(--schatten-m);
}

.preismarke {
  display: inline-flex;
  align-items: baseline;
  gap: var(--r-3);
  margin-top: var(--r-6);
  padding: var(--r-3) var(--r-5);
  background: var(--lila-hauch);
  border: 1px solid var(--lila-zart);
  border-radius: var(--radius-s);
  font-weight: 700;
  color: var(--text-laut);
}
.preismarke span { font-size: var(--t-mini); font-weight: 500; color: var(--text-leise); }

/* Lieferumfang: zweispaltig, aber keine Kartenwueste */
.lieferliste { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--r-5); }
@media (min-width: 768px) { .lieferliste { grid-template-columns: repeat(2, 1fr); gap: var(--r-6) var(--r-12); } }
.lieferliste li { display: flex; align-items: flex-start; gap: var(--r-4); max-width: none; }
.lieferliste svg { flex: none; margin-top: 3px; color: var(--lila); }
.lieferliste b { color: var(--text-laut); }
.lieferliste span { font-size: var(--t-klein); color: var(--text-leise); max-width: 42ch; }
.lieferliste b + br { display: none; }

.hinweisliste {
  margin-top: var(--r-6);
  padding-left: var(--r-5);
  display: grid;
  gap: var(--r-3);
  font-size: var(--t-klein);
  color: var(--text-leise);
}
.hinweisliste li::marker { color: var(--lila); }

.stimme--allein {
  max-width: 62ch;
  padding: var(--r-8);
  background: #f3f3f3;
  border: 1px solid var(--rand);
  border-radius: var(--radius-l);
}
@media (min-width: 768px) { .stimme--allein { padding: var(--r-12); } }

/* Rhythmus straffen: nach einem Sektionskopf braucht die erste Reihe
   keinen eigenen Vorlauf mehr. */
.bandkopf + .reihe { padding-top: 0; }
.reihe:last-of-type { padding-bottom: 0; }

/* =========================================================================
   Bewegung
   Es werden ausschliesslich transform und opacity animiert, beides laeuft
   auf dem Compositor und erzeugt kein Layout-Neuberechnen. Startzustand
   wird per JS gesetzt (Klasse .js-bewegt am html-Element), damit die
   Inhalte ohne JavaScript sofort sichtbar sind.
   ========================================================================= */

.js-bewegt [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
}
.js-bewegt [data-reveal].ist-sichtbar {
  opacity: 1;
  transform: none;
  transition: opacity 620ms var(--kurve), transform 620ms var(--kurve);
}

/* Gestaffelter Einlauf fuer Listen und Raster */
.js-bewegt [data-reveal-gruppe] > * {
  opacity: 0;
  transform: translateY(20px);
}
.js-bewegt [data-reveal-gruppe].ist-sichtbar > * {
  opacity: 1;
  transform: none;
  transition: opacity 560ms var(--kurve), transform 560ms var(--kurve);
  transition-delay: calc(var(--verzug, 0) * 55ms);
}

/* Der Hero laeuft ohne Beobachter direkt beim Laden ein */
@keyframes einlauf {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: none; }
}
.js-bewegt .hero__auftritt > * {
  animation: einlauf 700ms var(--kurve) backwards;
}
.js-bewegt .hero__auftritt > *:nth-child(1) { animation-delay: 60ms; }
.js-bewegt .hero__auftritt > *:nth-child(2) { animation-delay: 140ms; }
.js-bewegt .hero__auftritt > *:nth-child(3) { animation-delay: 220ms; }
.js-bewegt .hero__auftritt > *:nth-child(4) { animation-delay: 300ms; }
.js-bewegt .hero__auftritt > *:nth-child(5) { animation-delay: 380ms; }
.js-bewegt .hero .video { animation: einlauf 800ms var(--kurve) 260ms backwards; }

/* Der Verlauf hinter dem Hero atmet sehr langsam, rein dekorativ */
@keyframes atmen {
  0%, 100% { transform: scale(1) translateY(0); opacity: 0.85; }
  50% { transform: scale(1.08) translateY(-2%); opacity: 1; }
}
.hero::before { animation: atmen 18s ease-in-out infinite; }

/* Zahlen im Ablauf laufen zusammen mit ihrer Zeile ein */
.js-bewegt .ablauf li { opacity: 0; transform: translateY(18px); }
.js-bewegt .ablauf.ist-sichtbar li {
  opacity: 1;
  transform: none;
  transition: opacity 520ms var(--kurve), transform 520ms var(--kurve);
}
.js-bewegt .ablauf.ist-sichtbar li:nth-child(1) { transition-delay: 0ms; }
.js-bewegt .ablauf.ist-sichtbar li:nth-child(2) { transition-delay: 80ms; }
.js-bewegt .ablauf.ist-sichtbar li:nth-child(3) { transition-delay: 160ms; }
.js-bewegt .ablauf.ist-sichtbar li:nth-child(4) { transition-delay: 240ms; }
.js-bewegt .ablauf.ist-sichtbar li:nth-child(5) { transition-delay: 320ms; }

/* Der Textmarker wird beim Einlaufen von links aufgezogen.
   Ausnahme von der Regel "nur transform und opacity": hier wird
   background-size animiert. Das loest Repaints aus, betrifft aber nur
   wenige kurze Inline-Elemente und ist bewusst so gewuenscht. */
@keyframes markieren { from { background-size: 0% 100%; } to { background-size: 100% 100%; } }
.js-bewegt mark {
  background-size: 0% 100%;
  background-repeat: no-repeat;
}
.js-bewegt .ist-sichtbar mark,
.js-bewegt mark.ist-sichtbar {
  animation: markieren 850ms var(--kurve) 250ms forwards;
}

/* Wer Bewegung reduziert haben moechte, bekommt alles sofort und statisch. */
@media (prefers-reduced-motion: reduce) {
  .js-bewegt mark { background-size: 100% 100% !important; animation: none !important; }
  .js-bewegt [data-reveal],
  .js-bewegt [data-reveal-gruppe] > *,
  .js-bewegt .ablauf li,
  .js-bewegt .hero__auftritt > *,
  .js-bewegt .hero .video {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
  .hero::before { animation: none; }
}

/* =========================================================================
   Icons, Merkmale, Experten-Sektion
   ========================================================================= */

.ic { flex: none; display: block; }
.knopf .ic { margin-left: calc(var(--r-1) * -1); }

/* Hakenliste im Hero mit Icon-Plaettchen */
.hakenliste { gap: var(--r-4); }
.hakenliste li { align-items: center; gap: var(--r-4); font-size: var(--t-klein); }
.hakenliste__ic {
  display: inline-grid;
  place-content: center;
  place-items: center;
  flex: none;
  width: 46px; height: 46px;
  line-height: 0;
  border-radius: var(--radius-m);
  background: var(--lila-hauch);
  border: 1px solid var(--lila-zart);
  color: var(--lila);
}

/* ---------- Experten-Sektion ---------- */
.experte__raster { display: grid; gap: var(--r-12); align-items: center; }
.experte__raster > * { min-width: 0; }
@media (min-width: 900px) {
  .experte__raster { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--r-16); }
}

/* Das Portrait ist freigestellt und steht auf einer weichen Markenflaeche. */
.experte__text > * + * { margin-top: var(--r-5); }
.experte__text .grossaussage { margin-top: var(--r-4); }
.experte__text .lead { margin-top: var(--r-6); }
.experte__bild { position: relative; max-width: 440px; margin-inline: auto; }
.experte__bild::before {
  content: "";
  position: absolute;
  inset: 8% -4% 0 -4%;
  border-radius: var(--radius-xl) var(--radius-xl) var(--radius-l) var(--radius-l);
  background: radial-gradient(80% 70% at 50% 30%, var(--lila-zart), var(--lila-hauch) 70%, transparent);
}
.experte__bild img, .experte__bild picture {
  position: relative;
  width: 100%;
  height: auto;
  display: block;
}

/* Merkmalsliste mit Icons, zweispaltig ab Tablet */
.merkmale {
  list-style: none;
  padding: 0;
  margin: var(--r-10) 0 0;
  display: grid;
  gap: var(--r-6);
}
@media (min-width: 620px) { .merkmale { grid-template-columns: repeat(2, 1fr); gap: var(--r-6) var(--r-8); } }
.merkmale li { display: flex; align-items: flex-start; gap: var(--r-4); max-width: none; }
.merkmale .ic { margin-top: 2px; color: var(--lila); }
.merkmale b { display: block; font-size: var(--t-klein); color: var(--text-laut); margin-bottom: var(--r-1); }
.merkmale span { font-size: var(--t-mini); color: var(--text-leise); line-height: 1.5; }
.experte .knopfgruppe { margin-top: var(--r-10); }

/* Zertifikate als Liste ausgezeichnet */
.zertifikate__reihe { list-style: none; padding: 0; margin: 0; }
.zertifikate__reihe li { max-width: none; }

/* Oberzeile mittig, wenn die Sektion zentriert ist */
.oberzeile.mittig { text-align: center; margin-bottom: var(--r-10); }

/* =========================================================================
   Kacheln, Projektkarten, Modulliste
   ========================================================================= */

/* ---------- Kacheln fuer die weiteren Leistungen ---------- */
.kacheln { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--r-5); }
@media (min-width: 620px) { .kacheln { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .kacheln { grid-template-columns: repeat(3, 1fr); } }
.kacheln li { max-width: none; display: flex; }

.kachel {
  display: grid;
  min-width: 0;
  grid-template-columns: auto 1fr;
  gap: var(--r-3) var(--r-4);
  width: 100%;
  padding: var(--r-6);
  background: var(--grund);
  border: 1px solid var(--rand);
  border-radius: var(--radius-l);
  text-decoration: none;
  color: inherit;
  transition: transform var(--dauer) var(--kurve), box-shadow var(--dauer) var(--kurve),
    border-color var(--dauer) var(--kurve);
}
.kachel:hover {
  color: inherit;
  transform: translateY(-4px);
  box-shadow: var(--schatten-m);
  border-color: var(--lila-zart);
}
.kachel__ic {
  display: inline-grid;
  place-content: center;
  width: 52px; height: 52px;
  border-radius: var(--radius-m);
  background: var(--lila-hauch);
  border: 1px solid var(--lila-zart);
  color: var(--lila);
  line-height: 0;
  transition: background-color var(--dauer) var(--kurve), transform var(--dauer) var(--kurve);
}
.kachel:hover .kachel__ic { transform: scale(1.06); background: var(--lila-zart); }
.kachel__kopf { display: grid; gap: 2px; align-content: center; min-width: 0; }
.kachel__titel {
  min-width: 0;
  overflow-wrap: break-word;
  hyphens: auto;
  font-size: var(--t-h4);
  font-weight: 700;
  letter-spacing: -0.014em;
  color: var(--text-laut);
  transition: color var(--dauer) var(--kurve);
}
.kachel:hover .kachel__titel { color: var(--lila); }
.kachel__preis { font-size: var(--t-mini); font-weight: 600; color: var(--text-leise); }
.kachel__text { grid-column: 1 / -1; font-size: var(--t-klein); color: var(--text-leise); }
.kachel__mehr {
  grid-column: 1 / -1;
  display: inline-flex;
  align-items: center;
  gap: var(--r-2);
  margin-top: auto;
  padding-top: var(--r-2);
  font-size: var(--t-mini);
  font-weight: 700;
  color: var(--lila);
}
.kachel__mehr .ic { transition: transform var(--dauer) var(--kurve); }
.kachel:hover .kachel__mehr .ic { transform: translateX(4px); }

/* ---------- Projektkarten ---------- */
.projekte { display: grid; gap: var(--r-6); }
@media (min-width: 900px) { .projekte { grid-template-columns: repeat(2, 1fr); gap: var(--r-8); } }
.projekt {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--r-4);
  padding: var(--r-8);
  background: var(--grund);
  border: 1px solid var(--rand);
  border-radius: var(--radius-xl);
  transition: transform var(--dauer) var(--kurve), box-shadow var(--dauer) var(--kurve);
}
.projekt:hover { transform: translateY(-3px); box-shadow: var(--schatten-m); }
.projekt--betont { border-color: var(--lila-zart); box-shadow: var(--schatten-m); }
.projekt--betont:hover { box-shadow: var(--schatten-l); }
.projekt__marke {
  position: absolute;
  top: calc(var(--r-3) * -1);
  left: var(--r-8);
  padding: var(--r-1) var(--r-4);
  border-radius: 999px;
  background: var(--verlauf-schrift);
  color: #fff;
  font-size: var(--t-mini);
  font-weight: 700;
}
.projekt__ic {
  display: inline-grid;
  place-content: center;
  width: 60px; height: 60px;
  border-radius: var(--radius-m);
  background: var(--lila-hauch);
  border: 1px solid var(--lila-zart);
  color: var(--lila);
  line-height: 0;
}
.projekt h3 { font-size: var(--t-h3); }
.projekt__unter { font-size: var(--t-klein); color: var(--text-leise); }
.projekt__preis {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--r-2);
  padding-block: var(--r-4);
  border-top: 1px solid var(--rand);
  border-bottom: 1px solid var(--rand);
  max-width: none;
}
.projekt__ab { font-size: var(--t-klein); color: var(--text-leise); }
.projekt__preis strong {
  font-size: clamp(2rem, 1.5rem + 1.8vw, 2.625rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--text-laut);
}
.projekt__einheit { width: 100%; font-size: var(--t-mini); color: var(--text-leise); }
.projekt__liste { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--r-3); }
.projekt__liste li { display: flex; align-items: flex-start; gap: var(--r-3); max-width: none; font-size: var(--t-klein); }
.projekt__liste .ic { flex: none; margin-top: 3px; color: var(--lila); }
.projekt .knopf { margin-top: auto; width: 100%; }

/* ---------- Modulliste ---------- */
.module { margin-top: var(--r-16); }
.module h3 { margin-bottom: var(--r-6); }
.modulliste { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
@media (min-width: 800px) { .modulliste { grid-template-columns: repeat(2, 1fr); column-gap: var(--r-12); } }
.modulliste li {
  display: grid;
  grid-template-columns: minmax(7.5rem, auto) 1fr;
  align-items: baseline;
  gap: var(--r-2) var(--r-5);
  padding-block: var(--r-4);
  border-top: 1px solid var(--rand);
  max-width: none;
}
.modul__preis {
  grid-row: span 2;
  display: inline-flex;
  align-items: baseline;
  gap: 0.25em;
  font-size: var(--t-h4);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-laut);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.modul__preis span { font-size: var(--t-mini); font-weight: 600; color: var(--text-leise); }
.modul__name a { font-weight: 700; color: var(--text-laut); text-decoration: none; font-size: var(--t-klein); }
.modul__name a:hover { color: var(--lila); text-decoration: underline; }
.modul__einheit { grid-column: 2; font-size: var(--t-mini); color: var(--text-leise); }

/* ---------- Verlinkte Kundenlogos ---------- */
.logowand a {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-s);
  padding: var(--r-2);
}
.logowand a:focus-visible { outline-offset: 0; }

/* Symptomliste mit Icon vor der Ueberschrift */
.symptome--ic dt { display: flex; align-items: center; gap: var(--r-3); }
.symptome--ic dt .ic { flex: none; color: var(--lila); }
.symptome--ic dd { padding-left: calc(24px + var(--r-3)); }

/* Direktkontakt mit Icons */
.direktkontakt p { display: flex; align-items: flex-start; gap: var(--r-3); max-width: none; }
.direktkontakt .ic { flex: none; margin-top: 3px; color: oklch(0.78 0.09 296); }
.direktkontakt__was { display: block; font-size: var(--t-mini); color: oklch(0.75 0.03 296); font-weight: 500; }

/* =========================================================================
   Weitere Seitentypen
   ========================================================================= */

.bandkopf.mittig { margin-inline: auto; text-align: center; }

/* Kundenstimmen-Raster auf der Referenzseite */
.stimmenraster { display: grid; gap: var(--r-6); }
@media (min-width: 700px) { .stimmenraster { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .stimmenraster { grid-template-columns: repeat(3, 1fr); } }
.stimmenraster .stimme { height: 100%; }
.stimme__themen { display: flex; flex-wrap: wrap; gap: var(--r-2); margin-top: var(--r-4); }
.stimme__themen a {
  font-size: var(--t-mini);
  font-weight: 600;
  padding: var(--r-1) var(--r-3);
  border-radius: 999px;
  background: var(--lila-hauch);
  color: var(--lila);
  text-decoration: none;
}
.stimme__themen a:hover { background: var(--lila-zart); }

/* Standort */
.standort { display: grid; gap: var(--r-8); align-items: center; }
@media (min-width: 900px) { .standort { grid-template-columns: 1fr 1fr; gap: var(--r-12); } }
.standort__bild img, .standort__bild picture {
  width: 100%; border-radius: var(--radius-l); border: 1px solid var(--rand);
}
.standort__text > * + * { margin-top: var(--r-5); }
.standort__text address { font-style: normal; line-height: 1.8; }

/* Kontaktseite */
.kontakt__raster { display: grid; gap: var(--r-10); align-items: start; }
@media (min-width: 900px) { .kontakt__raster { grid-template-columns: 1fr 1.15fr; gap: var(--r-16); } }
.kontakt__raster h2 { margin-bottom: var(--r-4); }
.kontakt__raster .knopfgruppe { margin-top: var(--r-6); }
.kontakt__raster .merkmale a { color: var(--text-laut); text-decoration: none; font-weight: 600; }
.kontakt__raster .merkmale a:hover { color: var(--lila); text-decoration: underline; }

/* Suche auf der Fehlerseite */
.fehlerseite__suche { width: 100%; max-width: 520px; margin-top: var(--r-10); text-align: left; }
.suchform label { display: block; font-size: var(--t-klein); font-weight: 700; color: var(--text-laut); margin-bottom: var(--r-2); }
.suchform__zeile { display: flex; flex-wrap: wrap; gap: var(--r-3); }
.suchform input[type="search"] {
  flex: 1 1 14rem;
  min-height: 60px;
  padding: var(--r-3) var(--r-5);
  background: var(--grund);
  border: 1px solid var(--rand-stark);
  border-radius: var(--radius-m);
  color: var(--text-laut);
}
.suchform input[type="search"]:focus-visible {
  outline: none; border-color: var(--lila);
  box-shadow: 0 0 0 3px oklch(0.512 0.284 296 / 0.22);
}
.suchform .feld__hinweis { margin-top: var(--r-3); }
.fehlerseite .knopfgruppe { justify-content: center; }

/* Blog */
.artikelliste { list-style: none; padding: 0; margin: var(--r-12) 0 0; display: grid; gap: var(--r-5); }
@media (min-width: 800px) { .artikelliste { grid-template-columns: repeat(2, 1fr); } }
.artikelliste li { max-width: none; display: flex; }
.artikelkarte {
  display: grid; gap: var(--r-3); width: 100%;
  padding: var(--r-8);
  background: var(--grund);
  border: 1px solid var(--rand);
  border-radius: var(--radius-l);
  text-decoration: none; color: inherit;
  transition: transform var(--dauer) var(--kurve), box-shadow var(--dauer) var(--kurve);
}
.artikelkarte:hover { transform: translateY(-4px); box-shadow: var(--schatten-m); color: inherit; }
.artikelkarte__datum { font-size: var(--t-mini); font-weight: 600; color: var(--lila); }
.artikelkarte__titel { font-size: var(--t-h3); font-weight: 700; letter-spacing: -0.018em; color: var(--text-laut); }
.artikelkarte__text { font-size: var(--t-klein); color: var(--text-leise); }

.artikelkopf { max-width: var(--breite-text); margin-bottom: var(--r-12); }
.artikelkopf h1 { margin-block: var(--r-4) var(--r-5); }
.artikelinhalt > * + * { margin-top: var(--r-5); }
.artikelfuss {
  max-width: var(--breite-text);
  margin-top: var(--r-12); padding-top: var(--r-6);
  border-top: 1px solid var(--rand);
  display: grid; gap: var(--r-4);
}
.feld__fehler--voll { grid-column: 1 / -1; }
.stimme__themen { margin-top: var(--r-4); margin-bottom: var(--r-2); }

/* ---------- Branchenseiten ---------- */
.branchekopf__raster { display: grid; gap: var(--r-8); align-items: center; }
.branchekopf__raster > * { min-width: 0; }
@media (min-width: 900px) { .branchekopf__raster { grid-template-columns: 1.05fr 1fr; gap: var(--r-16); } }
.branchekopf h1 { margin-block: var(--r-4) var(--r-5); }
.branchekopf .knopfgruppe { margin-top: var(--r-8); }
.branchekopf__ic {
  display: none;
  place-content: center;
  width: 200px; height: 200px;
  border-radius: var(--radius-xl);
  background: radial-gradient(70% 70% at 40% 30%, var(--lila-zart), var(--lila-hauch));
  border: 1px solid var(--lila-zart);
  color: var(--lila);
}
@media (min-width: 900px) { .branchekopf__ic { display: grid; } }

.hinweisbox {
  display: flex;
  align-items: flex-start;
  gap: var(--r-4);
  max-width: none;
  margin-bottom: var(--r-10);
  padding: var(--r-5) var(--r-6);
  background: var(--flaeche-satt);
  border: 1px solid var(--rand);
  border-radius: var(--radius-m);
  font-size: var(--t-klein);
  color: var(--text-leise);
}
.hinweisbox .ic { flex: none; margin-top: 3px; color: var(--text-leise); }

.szenarien { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--r-6); counter-reset: szenario; }
@media (min-width: 1000px) { .szenarien { grid-template-columns: repeat(3, 1fr); } }
.szenario {
  max-width: none;
  padding: var(--r-8);
  background: var(--grund);
  border: 1px solid var(--rand);
  border-radius: var(--radius-l);
  transition: transform var(--dauer) var(--kurve), box-shadow var(--dauer) var(--kurve);
}
.szenario:hover { transform: translateY(-3px); box-shadow: var(--schatten-m); }
.szenario h3 { font-size: var(--t-h4); margin-bottom: var(--r-5); }
.szenario h3::before {
  counter-increment: szenario;
  content: "Szenario " counter(szenario);
  display: block;
  font-size: var(--t-mini);
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--lila);
  margin-bottom: var(--r-2);
}
.szenario dl { margin: 0; display: grid; gap: var(--r-4); }
.szenario dt { font-size: var(--t-mini); font-weight: 700; color: var(--text-laut); margin-bottom: var(--r-1); }
.szenario dd { margin: 0; font-size: var(--t-klein); color: var(--text-leise); }

.kacheln--gross .kachel__text { font-size: var(--t-body); color: var(--text); font-weight: 500; }

/* =========================================================================
   Einwilligung
   ========================================================================= */

.einwilligung {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 300;
  padding: var(--r-5);
  background: var(--grund);
  border-top: 1px solid var(--rand-stark);
  box-shadow: 0 -8px 40px oklch(0.3 0.05 296 / 0.14);
}
.einwilligung[hidden] { display: none; }
@media (min-width: 768px) { .einwilligung { padding: var(--r-6); } }

.einwilligung__innen {
  width: 100%;
  max-width: var(--breite-inhalt);
  margin-inline: auto;
  display: grid;
  gap: var(--r-6);
  align-items: center;
}
@media (min-width: 1000px) {
  .einwilligung__innen { grid-template-columns: minmax(0, 1fr) auto; gap: var(--r-10); }
}
.einwilligung h2 { font-size: var(--t-h4); margin-bottom: var(--r-2); }
.einwilligung p { font-size: var(--t-klein); color: var(--text-leise); max-width: 78ch; }
.einwilligung__links { display: flex; gap: var(--r-5); margin-top: var(--r-3); }
.einwilligung__links a { font-size: var(--t-mini); font-weight: 600; }

/* Annehmen und Ablehnen stehen gleichwertig nebeneinander, gleiche Groesse,
   gleiche Position. Nur die Farbe unterscheidet sie. */
.einwilligung__knoepfe { display: flex; flex-wrap: wrap; gap: var(--r-3); align-items: center; }
.einwilligung__knoepfe .knopf { flex: 1 1 auto; }
.einwilligung__knoepfe .knopf--haupt,
.einwilligung__knoepfe .knopf--zweit { min-width: 13rem; }
.einwilligung__knoepfe .knopf--schlicht { flex: 0 0 auto; padding-inline: var(--r-3); }
@media (max-width: 560px) {
  .einwilligung__knoepfe .knopf--haupt,
  .einwilligung__knoepfe .knopf--zweit { flex: 1 1 100%; min-width: 0; }
}

/* ---------- Einstellungsdialog ---------- */
.einwdialog { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; padding: var(--r-4); }
.einwdialog[hidden] { display: none; }
.einwdialog__hintergrund { position: absolute; inset: 0; background: oklch(0.22 0.04 296 / 0.55); border: 0; }
@supports (backdrop-filter: blur(1px)) { .einwdialog__hintergrund { backdrop-filter: blur(3px); } }

.einwdialog__tafel {
  position: relative;
  width: min(760px, 100%);
  max-height: min(88dvh, 900px);
  display: flex;
  flex-direction: column;
  background: var(--grund);
  border-radius: var(--radius-l);
  box-shadow: var(--schatten-l);
  overflow: hidden;
}
.einwdialog__kopf {
  display: flex; align-items: center; justify-content: space-between; gap: var(--r-4);
  padding: var(--r-6); border-bottom: 1px solid var(--rand);
}
.einwdialog__kopf h2 { font-size: var(--t-h3); }
.einwdialog__kopf h2:focus-visible { outline-offset: 4px; }
.einwdialog__zu {
  display: grid; place-content: center;
  width: 44px; height: 44px; flex: none;
  border-radius: var(--radius-s); color: var(--text-leise);
}
.einwdialog__zu:hover { background: var(--flaeche-satt); color: var(--text-laut); }
.einwdialog__inhalt { padding: var(--r-6); overflow-y: auto; display: grid; gap: var(--r-6); }
.einwdialog__fuss {
  display: flex; flex-wrap: wrap; gap: var(--r-3);
  padding: var(--r-6); border-top: 1px solid var(--rand); background: var(--flaeche);
}
.einwdialog__fuss .knopf { flex: 1 1 12rem; }

.einwkat { padding-top: var(--r-6); border-top: 1px solid var(--rand); }
.einwkat:first-of-type { padding-top: 0; border-top: 0; }
.einwkat__text { font-size: var(--t-klein); color: var(--text-leise); margin-top: var(--r-3); }
.einwkat__leer { font-size: var(--t-mini); color: var(--text-leise); margin-top: var(--r-3); font-style: italic; }
.einwkat__dienste { margin-top: var(--r-4); }
.einwkat__dienste summary {
  font-size: var(--t-mini); font-weight: 700; color: var(--lila);
  cursor: pointer; min-height: 44px; display: flex; align-items: center;
}
.einwkat__dienste ul { list-style: none; padding: 0; margin: var(--r-2) 0 0; display: grid; gap: var(--r-4); }
.einwkat__dienste li {
  max-width: none; padding: var(--r-5);
  background: var(--flaeche); border-radius: var(--radius-m); font-size: var(--t-mini);
}
.einwkat__dienste li b { display: block; color: var(--text-laut); margin-bottom: var(--r-3); font-size: var(--t-klein); }
.einwkat__dienste dl { margin: 0; display: grid; gap: var(--r-2); }
.einwkat__dienste dl > div { display: grid; grid-template-columns: 10rem 1fr; gap: var(--r-3); }
@media (max-width: 560px) { .einwkat__dienste dl > div { grid-template-columns: 1fr; gap: 0; } }
.einwkat__dienste dt { color: var(--text-leise); }
.einwkat__dienste dd { margin: 0; color: var(--text); }

/* ---------- Schalter ---------- */
.schalter { display: flex; align-items: center; gap: var(--r-4); cursor: pointer; min-height: 44px; }
.schalter input { position: absolute; opacity: 0; width: 0; height: 0; }
.schalter__spur {
  position: relative; flex: none;
  width: 52px; height: 30px;
  border-radius: 999px;
  background: var(--rand-stark);
  transition: background-color var(--dauer) var(--kurve);
}
.schalter__spur::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 24px; height: 24px; border-radius: 999px; background: var(--grund);
  box-shadow: var(--schatten-s);
  transition: transform var(--dauer) var(--kurve);
}
.schalter input:checked + .schalter__spur { background: var(--lila); }
.schalter input:checked + .schalter__spur::after { transform: translateX(22px); }
.schalter input:disabled + .schalter__spur { background: var(--lila); opacity: 0.45; }
.schalter input:disabled ~ .schalter__text { color: var(--text-leise); }
.schalter input:focus-visible + .schalter__spur { outline: 3px solid var(--lila); outline-offset: 3px; }
.schalter__text { font-size: var(--t-h4); font-weight: 700; color: var(--text-laut); }
.schalter__fest { display: block; font-size: var(--t-mini); font-weight: 500; color: var(--text-leise); }
.schalter:hover input:not(:disabled) + .schalter__spur { background: var(--text-leise); }
.schalter:hover input:checked:not(:disabled) + .schalter__spur { background: var(--lila-tief); }

/* ---------- Platzhalter fuer gesperrte Einbettungen ---------- */
.einbettung__platzhalter {
  display: grid;
  gap: var(--r-4);
  justify-items: start;
  padding: var(--r-8);
  background: var(--flaeche);
  border: 1px dashed var(--rand-stark);
  border-radius: var(--radius-l);
}
.einbettung__ic {
  display: grid; place-content: center;
  width: 60px; height: 60px; border-radius: var(--radius-m);
  background: var(--lila-hauch); border: 1px solid var(--lila-zart); color: var(--lila);
}
.einbettung__platzhalter h3 { font-size: var(--t-h4); }
.einbettung__platzhalter p { font-size: var(--t-klein); color: var(--text-leise); }
.einbettung .pipedriveWebForms { min-height: 400px; }

.knopf--mini { min-height: auto; font-size: var(--t-mini); }
.fuss__einwilligung {
  font-size: var(--t-mini);
  color: var(--text-leise);
  padding: 0;
  min-height: 44px;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}
.fuss__einwilligung:hover { color: var(--lila); }

@media print { .einwilligung, .einwdialog { display: none !important; } }

/* Solange keine Einwilligung fuer externe Inhalte vorliegt, weist die
   Video-Fassade darauf hin, statt einen sofortigen Start zu versprechen. */
.video[data-frei="nein"] .video__hinweis::before {
  content: "Für dieses Video ist Ihre Einwilligung nötig. ";
  font-weight: 600;
  color: var(--text-laut);
}

/* ---------- Rechtstexte ---------- */
.datenschutz h2 { margin-top: var(--r-16); scroll-margin-top: calc(var(--kopf-hoehe) + var(--r-6)); }
.datenschutz h3 { margin-top: var(--r-10); }
/* display muss zurueckgesetzt werden, .fliesstext ul steht auf grid und
   Grid-Container ignorieren die Mehrspaltigkeit. */
.dsinhalt { display: block; columns: 2; column-gap: var(--r-10); }
.dsinhalt li + li { margin-top: var(--r-2); }
@media (max-width: 640px) { .dsinhalt { columns: 1; } }
.dsinhalt li { break-inside: avoid; }

/* Dienstangaben als Definitionsliste, damit die Struktur maschinenlesbar bleibt */
.dsdienst { margin: var(--r-6) 0; border-top: 1px solid var(--rand); }
.dsdienst > div {
  display: grid; gap: var(--r-1) var(--r-6);
  padding-block: var(--r-4); border-bottom: 1px solid var(--rand);
}
@media (min-width: 700px) { .dsdienst > div { grid-template-columns: 17rem 1fr; } }
.dsdienst dt { font-weight: 700; color: var(--text-laut); font-size: var(--t-klein); }
.dsdienst dd { margin: 0; font-size: var(--t-klein); color: var(--text-leise); }

.dsbegriffe { margin: var(--r-6) 0 0; display: grid; gap: var(--r-5); }
.dsbegriffe dt { font-weight: 700; color: var(--text-laut); margin-bottom: var(--r-2); }
.dsbegriffe dd { margin: 0; color: var(--text-leise); }

/* Klar erkennbare Platzhalter, die vor dem Livegang ersetzt werden muessen */
.platzhalter {
  padding: var(--r-5) var(--r-6);
  background: oklch(0.97 0.05 85);
  border: 1px dashed oklch(0.72 0.12 75);
  border-radius: var(--radius-m);
  font-size: var(--t-klein);
  color: oklch(0.4 0.09 70);
}
.platzhalter strong { color: oklch(0.34 0.1 60); }

/* Ein Knopf, der wie ein Link aussieht, fuer den Widerruf im Fliesstext */
.dslink {
  padding: 0; font: inherit; color: var(--lila);
  text-decoration: underline; text-underline-offset: 0.18em;
}
.dslink:hover { color: var(--lila-tief); }

@media print { .platzhalter { border-color: #999; background: none; } }

/* ---------- Aufbau-Bereiche auf den Anwendungsfall-Seiten ---------- */
.aufbau { display: grid; gap: var(--r-6); }
@media (min-width: 800px) { .aufbau { grid-template-columns: repeat(2, 1fr); } }
.aufbauteil {
  padding: var(--r-8);
  background: var(--grund);
  border: 1px solid var(--rand);
  border-radius: var(--radius-l);
  transition: transform var(--dauer) var(--kurve), box-shadow var(--dauer) var(--kurve);
}
.aufbauteil:hover { transform: translateY(-3px); box-shadow: var(--schatten-m); }
.aufbauteil__ic {
  display: inline-grid; place-content: center;
  width: 52px; height: 52px; margin-bottom: var(--r-5);
  border-radius: var(--radius-m);
  background: var(--lila-hauch); border: 1px solid var(--lila-zart);
  color: var(--lila); line-height: 0;
}
.aufbauteil h3 { font-size: var(--t-h4); margin-bottom: var(--r-3); }
.aufbauteil > p { font-size: var(--t-klein); color: var(--text-leise); }
.aufbauteil ul { list-style: none; padding: 0; margin: var(--r-5) 0 0; display: grid; gap: var(--r-3); }
.aufbauteil li { display: flex; align-items: flex-start; gap: var(--r-3); max-width: none; font-size: var(--t-mini); }
.aufbauteil li .ic { flex: none; margin-top: 2px; color: var(--lila); }

/* Breites Ausklappmenue mit zwei Spalten, fuer Branchen und Anwendungsfaelle.
   Drei einzelne Menuepunkte haetten die Kopfzeile unter 1280px gesprengt. */
.klapp__tafel--breit {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--r-8);
  width: min(620px, calc(100vw - var(--r-8)));
  padding: var(--r-6);
}
.klapp__spalte ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; }
.klapp__spalte li { max-width: none; }
.klapp__ueber {
  font-size: var(--t-mini);
  font-weight: 700;
  color: var(--text-leise);
  margin-bottom: var(--r-3);
  padding-inline: var(--r-3);
}
.klapp__eintrag--knapp {
  font-size: var(--t-klein);
  font-weight: 600;
  padding: var(--r-2) var(--r-3);
  min-height: 40px;
  display: flex;
  align-items: center;
}
.klapp__alle {
  margin-top: var(--r-2);
  border-top: 1px solid var(--rand);
  padding-top: var(--r-3);
  color: var(--lila);
  border-radius: 0;
}
.klapp__alle:hover { color: var(--lila-tief); }

/* ---------- Icons in den Ausklappmenues ---------- */
/* Farbton je Eintrag, abgeleitet aus dem Signatur-Verlauf. Der Bogen laeuft
   von 275 (Violett) ueber 296 (Markenlila) bis 345 (Pink). Helligkeit und
   Buntheit bleiben konstant, dadurch ist der Kontrast unabhaengig vom Ton
   berechenbar: mindestens 4,77:1, nachgerechnet in _werkzeuge-farbtoene.mjs.
   Das Cyan-Ende des Verlaufs entfaellt, weil sRGB dort bei mittlerer
   Helligkeit nicht genug Buntheit hergibt, ohne den Kontrast zu verlieren. */
.klapp__ic {
  --ton: 296;
  display: inline-grid;
  place-content: center;
  flex: none;
  width: 38px; height: 38px;
  border-radius: var(--radius-s);
  background: oklch(0.958 0.02 var(--ton));
  border: 1px solid oklch(0.925 0.032 var(--ton));
  color: oklch(0.52 0.22 var(--ton));
  line-height: 0;
  transition: background-color var(--dauer) var(--kurve), border-color var(--dauer) var(--kurve);
}
.klapp__eintrag:hover .klapp__ic {
  background: oklch(0.925 0.032 var(--ton));
  border-color: oklch(0.88 0.045 var(--ton));
}

/* Im Loesungsmenue sitzen die Icons einzeilig neben dem Text */
.klapp__ic--klein {
  width: 30px; height: 30px;
  background: transparent;
  border-color: transparent;
  border-radius: var(--radius-s);
}
.klapp__eintrag--knapp {
  display: flex;
  align-items: center;
  gap: var(--r-3);
  grid-template-columns: none;
}
.klapp__eintrag--knapp:hover .klapp__ic--klein { background: oklch(0.925 0.032 var(--ton)); border-color: transparent; }
.klapp__alle { display: flex; align-items: center; gap: var(--r-2); }
.klapp__alle .ic { transition: transform var(--dauer) var(--kurve); }
.klapp__alle:hover .ic { transform: translateX(3px); }

/* Mobilmenue: Icon vor dem Eintrag */
.mobilmenue__gruppe > a { display: flex; align-items: center; gap: var(--r-3); }
.mobilmenue__gruppe > a { --ton: 296; }
.mobilmenue__gruppe > a .ic { flex: none; color: oklch(0.52 0.22 var(--ton)); }

/* Hero-Bild auf Branchen- und Anwendungsfall-Seiten */
.branchekopf__medium img, .branchekopf__medium picture {
  width: 100%;
  border: 1px solid var(--rand);
  border-radius: var(--radius-l);
  box-shadow: var(--schatten-m);
}
.bildnachweis {
  margin-top: var(--r-3);
  font-size: var(--t-mini);
  color: var(--text-leise);
  max-width: none;
}
.bildnachweis a { color: var(--text-leise); }
.bildnachweis a:hover { color: var(--lila); }
.bildliste { font-size: var(--t-mini); color: var(--text-leise); }
.bildliste li { max-width: none; }

/* Produktbeleg auf Anwendungsfall-Seiten: kleine Abbildung neben Erläuterung */
.beleg { display: grid; gap: var(--r-8); align-items: center; margin: 0; }
@media (min-width: 700px) { .beleg { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: var(--r-12); } }
.beleg__bild img, .beleg__bild picture {
  width: 100%;
  border-radius: var(--radius-m);
  border: 1px solid var(--rand);
  box-shadow: var(--schatten-m);
}
.beleg figcaption > * + * { margin-top: var(--r-4); }
.beleg figcaption p:first-child { font-size: var(--t-lead); color: var(--text); }