/* ══════════════════════════════════════════════════════════════
   leistungen.css — gemeinsames Stylesheet der Unterseiten
   ──────────────────────────────────────────────────────────────
   Wird von allen /leistungen/*-Seiten geladen.
   Die Werte sind bewusst 1:1 aus index.html übernommen, damit die
   Unterseiten identisch zur Startseite aussehen. index.html selbst
   bleibt unverändert und behält ihr eigenes Inline-CSS.
   ══════════════════════════════════════════════════════════════ */

:root {
  --o:   #D96E6E;
  --oh:  #C45E5E;
  --ow:  #E08080;
  --p:   #F4AEB0;
  --pd:  #E89090;
  --lv:  #9B88E0;
  --lvl: #C4ADFF;
  --bg:  #FDFAF8;
  --s:   #FFFFFF;
  --t:   #121212;
  --m:   #6B6B6B;
  --b:   rgba(18,18,18,0.07);
  --f:   'Manrope', -apple-system, sans-serif;
  --fb:  'Manrope', -apple-system, sans-serif;
  --fh:  'Canela', Georgia, serif;
}

@font-face {
  font-family: 'Canela';
  src: url('/Headline_fonts/Canela-Bold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body {
  background: var(--bg); color: var(--t); font-family: var(--fb);
  font-size: 16px; line-height: 1.5; overflow-x: hidden; overflow-x: clip;
  cursor: none;
}
a, button, [role="button"], input, textarea, label { cursor: none; }
img { max-width: 100%; display: block; }

@media(max-width:768px) {
  body { cursor: auto; }
  a, button, [role="button"], input, textarea, label { cursor: auto; }
  #cursor { display: none !important; }
}

/* ── SKIP LINK ── */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--t); color: #fff; padding: 12px 20px;
  font-family: var(--f); font-size: 0.85rem; font-weight: 700;
  text-decoration: none; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

/* ── CUSTOM CURSOR ── */
#cursor {
  position: fixed; top: 0; left: 0; pointer-events: none; z-index: 99999;
  width: 72px; height: 72px;
  transform: translate(-50%, -50%);
  transition: opacity 0.3s;
}
#cursor-dot {
  position: absolute; top: 50%; left: 50%;
  width: 8px; height: 8px; background: #fff; border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 0 6px 2px rgba(255,255,255,0.9), 0 0 14px 4px rgba(255,255,255,0.4);
}
#cursor-ring {
  display: block; width: 72px; height: 72px;
  animation: cursor-spin 8s linear infinite;
  transition: opacity 0.5s ease, color 0.1s ease;
  opacity: 0;
}
body.cursor-idle #cursor-ring { opacity: 1; }
@keyframes cursor-spin { to { transform: rotate(360deg); } }
#cursor-ring text {
  font-family: var(--fb); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.14em; fill: #fff; transition: fill 0.15s ease;
}
/* Heller Rand statt "none": erkannt wird nur der SEITEN-Hintergrund, nicht
   die Pixelfarbe an genau der Mausposition. Ohne eigenen Rand verschwindet
   der dunkle Punkt über dunklen Logos/Icons/fettem Text auf hellem Grund. */
body.cursor-dark #cursor-dot {
  background: #1a1a1a;
  box-shadow: 0 0 0 1.5px rgba(255,255,255,0.85), 0 0 8px 2px rgba(255,255,255,0.35);
  transition: background 0s;
}
body.cursor-dark #cursor-ring text { fill: #1a1a1a; text-shadow: 0 0 3px rgba(255,255,255,0.75); transition: fill 0s; }
/* scale(1) = KEINE Größenänderung beim Hover — genau wie auf der Startseite.
   Der Punkt darf nicht springen, sonst wirkt jeder Button anders. */
body.cursor-hover #cursor-dot { transform: translate(-50%,-50%) scale(1); }

/* ── SCROLL FADE-IN ── */
.fi {
  opacity: 0; transform: translate3d(0,36px,0);
  transition: opacity 0.75s cubic-bezier(0.22,1,0.36,1), transform 0.75s cubic-bezier(0.22,1,0.36,1);
}
.fi.up { transform: translate3d(0,0,0); opacity: 1; }
.fi-d1 { transition-delay: 0.1s; }
.fi-d2 { transition-delay: 0.2s; }
.fi-d3 { transition-delay: 0.3s; }
.fi-d4 { transition-delay: 0.4s; }

/* ── POP WORD ── */
.pop { font-family: var(--f); font-weight: 800; font-style: italic; color: var(--o); font-size: 1.05em; letter-spacing: -0.01em; }

/* Schlichtere Inline-Hervorhebung: Farbe + halbfett (kein Kursiv wie .pop) —
   Rosé-Text ist auf der ganzen Website immer mindestens halbfett, nie
   normal-gewichtet (vgl. .pop, .lp-body strong). Für einzelne Wörter oder
   Label-Präfixe innerhalb von Fließtext. */
.tx-rose { color: var(--o); font-weight: 700; }

/* ── GLASS BUTTON ── */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  text-align: center;
  /* Maße bewusst NICHT die Basiswerte der Startseite (56px/0.9375rem):
     dort wird .btn an jeder Einsatzstelle auf 48px / 0.8rem / 0 24px
     heruntergesetzt (.about__cta .btn, .leistungen__footer .btn,
     .contact-submit .btn). Das hier ist also der Wert, der auf der
     Startseite tatsächlich zu sehen ist. */
  min-width: 0; height: 48px; padding: 0 24px;
  border: 1px solid rgba(255,255,255,0.32); border-radius: 999px;
  cursor: none; text-decoration: none; overflow: hidden; isolation: isolate;
  font-family: var(--f); font-size: 0.8rem; font-weight: 800;
  letter-spacing: 0.05em; text-transform: uppercase; color: #fff;
  background: var(--o);
  text-shadow: 0 1px 2px rgba(0,0,0,0.18);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.72),
    inset 0 8px 32px rgba(255,255,255,0.18),
    inset 8px 0 16px rgba(140,40,40,0.22),
    inset -8px 0 16px rgba(140,40,40,0.18),
    0 4px 16px rgba(196,94,94,0.40),
    0 12px 40px rgba(196,94,94,0.22),
    0 2px 4px rgba(0,0,0,0.14);
  transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.3s ease-out;
}
.btn::before {
  content: ''; position: absolute; top: 0; left: 4%; right: 4%; height: 56%;
  border-radius: 999px 999px 50% 50%;
  background: linear-gradient(180deg,
    rgba(255,255,255,0.62) 0%, rgba(255,255,255,0.28) 30%,
    rgba(255,255,255,0.06) 65%, rgba(255,255,255,0.00) 100%);
  pointer-events: none;
}
.btn > span { position: relative; z-index: 1; display: inline; }
.btn:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.80),
    inset 0 8px 32px rgba(255,255,255,0.22),
    0 6px 24px rgba(196,94,94,0.52),
    0 18px 56px rgba(196,94,94,0.30),
    0 2px 4px rgba(0,0,0,0.14);
}
.btn:active { transform: scale(0.97); }
/* Nur diese eine Variante ist in Gebrauch. .btn--sm und .btn--ghost gab es
   hier auch — beide von keiner Unterseite verwendet und deshalb entfernt. */
.btn--white-outline { background: transparent; color: #fff; box-shadow: 0 0 0 2px rgba(255,255,255,0.5); }
.btn--white-outline::before { display: none; }
.btn--white-outline:hover {
  background: rgba(255,255,255,0.12);
  box-shadow: 0 0 0 2px rgba(255,255,255,0.8);
  transform: translateY(-1px); border-radius: 50px;
}

/* ── NAV ── */
@keyframes nav-left  { from{opacity:0;transform:translateX(-28px)} to{opacity:1;transform:translateX(0)} }
@keyframes nav-right { from{opacity:0;transform:translateX(28px)}  to{opacity:1;transform:translateX(0)} }
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: transparent; border-bottom: 1px solid transparent;
  transition: background 0.4s, border-color 0.4s, box-shadow 0.4s;
  padding-top: env(safe-area-inset-top, 0px);
}
.nav.scrolled {
  /* War 0.30 — auf farbigen Hero-Hintergründen (z.B. dem Rosa-Verlauf auf
     /ki-wissen/ki-toolfinder) verschwand der rosa "aktiv"-Link fast völlig
     darin. 0.88 ist der gleiche Wert, der auf Mobile schon funktioniert. */
  background: rgba(253,250,248,0.88);
  -webkit-backdrop-filter: blur(28px) saturate(180%); backdrop-filter: blur(28px) saturate(180%);
  border-bottom: 1px solid rgba(255,255,255,0.35);
  box-shadow: 0 1px 24px rgba(0,0,0,0.06);
}
.nav__inner { max-width: 1240px; margin: 0 auto; padding: 0 48px; height: 62px; display: flex; align-items: center; justify-content: space-between; }
.nav__logo { height: 14px; animation: nav-left 0.8s 0.1s cubic-bezier(0.22,1,0.36,1) both; display: flex; align-items: center; align-self: center; }
/* Inline-SVG wie auf der Startseite: der beschnittene viewBox lässt die
   Schrift die volle Höhe ausfüllen, und die Farbe kann per fill wechseln. */
.nav__logo svg { display: block; height: 100%; width: auto; fill: #ffffff; }
.nav.scrolled .nav__logo svg { fill: #1a1a1a; }
.nav__links { display: flex; align-items: center; gap: 40px; list-style: none; }
.nav__links li:nth-child(1) { animation: nav-right 0.7s 0.22s cubic-bezier(0.22,1,0.36,1) both; }
.nav__links li:nth-child(2) { animation: nav-right 0.7s 0.32s cubic-bezier(0.22,1,0.36,1) both; }
.nav__links li:nth-child(3) { animation: nav-right 0.7s 0.42s cubic-bezier(0.22,1,0.36,1) both; }
.nav__links li:nth-child(4) { animation: nav-right 0.7s 0.52s cubic-bezier(0.22,1,0.36,1) both; }
.nav__links a {
  font-family: var(--f); font-size: 0.8125rem; font-weight: 400;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--m);
  text-decoration: none; transition: color 200ms ease-out; position: relative;
}
.nav__links a::after {
  content: ''; position: absolute; bottom: -3px; left: 0; right: 0;
  height: 1.5px; background: currentColor;
  transform: scaleX(0); transform-origin: left;
  transition: transform 250ms ease-out;
}
.nav__links a:hover::after { transform: scaleX(1); }
.nav:not(.scrolled) .nav__links a { color: rgba(255,255,255,0.85); }
.nav:not(.scrolled) .nav__links a:hover { color: #fff; }
.nav.scrolled .nav__links a { color: var(--t); }
.nav.scrolled .nav__links a:hover { color: var(--o); }

/* Aktuelle Seite markieren, statt sie aus dem Menü zu entfernen */
.nav__links a.is-active { color: var(--o) !important; }
.nav__links a.is-active::after { transform: scaleX(1); }

/* ── DROPDOWN ──
   Bewusst OHNE Pfeil-Icon. Der Menüpunkt sieht aus wie jeder andere und
   verhält sich beim Hover identisch (gleiche Unterstrich-Animation).
   Das Panel öffnet per Hover (Desktop) sowie per Klick/Tastatur (Touch). */
.nav__has-sub { position: relative; }
.nav__sub-toggle {
  /* Muss optisch exakt einem .nav__links a entsprechen */
  font-family: var(--f); font-size: 0.8125rem; font-weight: 400;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--m);
  background: none; border: none; padding: 0; cursor: none;
  transition: color 200ms ease-out; position: relative;
  line-height: inherit;
}
.nav__sub-toggle::after {
  content: ''; position: absolute; bottom: -3px; left: 0; right: 0;
  height: 1.5px; background: currentColor;
  transform: scaleX(0); transform-origin: left;
  transition: transform 250ms ease-out;
}
.nav__has-sub:hover .nav__sub-toggle::after,
.nav__has-sub.open .nav__sub-toggle::after,
.nav__has-sub.is-active .nav__sub-toggle::after { transform: scaleX(1); }
.nav:not(.scrolled) .nav__sub-toggle { color: rgba(255,255,255,0.85); }
.nav:not(.scrolled) .nav__has-sub:hover .nav__sub-toggle { color: #fff; }
.nav.scrolled .nav__sub-toggle { color: var(--t); }
.nav.scrolled .nav__has-sub:hover .nav__sub-toggle { color: var(--o); }
.nav__has-sub.is-active .nav__sub-toggle { color: var(--o) !important; }

.nav__sub {
  position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%) translateY(6px);
  min-width: 210px; list-style: none; padding: 8px; margin-top: 12px;
  background: rgba(253,250,248,0.94);
  -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%);
  border: 1px solid rgba(18,18,18,0.07); border-radius: 16px;
  box-shadow: 0 18px 46px rgba(18,18,18,0.13);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.22s ease-out, transform 0.22s cubic-bezier(0.22,1,0.36,1), visibility 0.22s;
  z-index: 120;
}
/* Unsichtbare Brücke: verhindert, dass das Panel zuklappt, während die
   Maus die Lücke zwischen Menüpunkt und Panel überquert. */
.nav__sub::before { content: ''; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.nav__has-sub:hover .nav__sub,
.nav__has-sub.open .nav__sub,
.nav__has-sub:focus-within .nav__sub {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nav__sub li { animation: none !important; }
.nav__sub a {
  display: block; padding: 11px 16px; border-radius: 10px;
  font-family: var(--f); font-size: 0.8125rem; font-weight: 500;
  text-transform: none; letter-spacing: 0.01em;
  color: var(--t) !important; text-decoration: none; white-space: nowrap;
  transition: background 180ms ease-out, color 180ms ease-out;
}
.nav__sub a::after { display: none !important; }
.nav__sub a:hover { background: rgba(217,110,110,0.09); color: var(--o) !important; }
.nav__sub a.is-active { background: rgba(217,110,110,0.12); color: var(--o) !important; font-weight: 700; }

.nav__burger {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  background: none; border: none; cursor: none; padding: 8px; z-index: 300;
  width: 36px; height: 36px;
}
.nav__close { display: none; }
.nav__burger span { display: block; width: 22px; height: 2px; border-radius: 2px; background: #fff; transition: transform 0.3s ease, opacity 0.3s ease; }
.nav.scrolled .nav__burger span { background: var(--t); }
.nav__burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__burger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav__burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── LAYOUT ── */
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 48px; }
.section { padding: 120px 0; }

/* ── SUBPAGE HERO ──
   min-height ist das verbindliche Maß für ALLE Unterseiten-Heroes (Wunsch:
   gleiche Höhe, unabhängig vom Inhalt). Bewusst KEIN vertikales Zentrieren
   — das würde kürzeren Inhalt (z.B. /ki-wissen) tiefer starten lassen als
   längeren und den Eyebrow/H1-Sprung zwischen Seiten wieder einführen.
   Inhalt bleibt oben an padding-top ausgerichtet, kürzerer Inhalt lässt
   unten einfach mehr Luft. Hat ein Hero mehr Inhalt als 610px, wächst die
   Box normal darüber hinaus (kein Clipping, min-height ist nur ein Boden). */
.lp-hero {
  position: relative; overflow: hidden;
  /* Fixer 610px-Wert reichte nur bis ~1280px Fensterbreite: .lp-hero__hed
     nutzt 4vw für die Schriftgröße und wächst mit der Fensterbreite weiter,
     auch nachdem .wrap längst bei max-width:1080px gedeckelt hat. Bei einem
     breiteren Monitor wurde /ki-wissen/ki-toolfinder (2-spaltiger Hero mit
     Kugel) dadurch wieder höher als /ki-wissen. Diese clamp()-Formel wächst
     im selben Tempo mit, bis 4vw bei 4.4rem (~1760px Fensterbreite) deckelt. */
  min-height: clamp(610px, calc(498px + 8.75vw), 652px);
  padding: 180px 0 96px;
  background:
    radial-gradient(ellipse at 78% 18%, rgba(196,173,255,0.22) 0%, transparent 58%),
    radial-gradient(ellipse at 12% 82%, rgba(217,110,110,0.30) 0%, transparent 62%),
    linear-gradient(135deg, #2a1a1a 0%, #3a2020 45%, var(--oh) 100%);
}
.lp-hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px; opacity: 0.06;
}
/* ── Dotted Surface (nur KI-Wissen-Hero, per .lp-hero--dots) ──
   Der Canvas wird per Three.js in unterseiten-dots.js eingehängt; hier nur
   die Positionierung, damit er den Hero exakt füllt und hinter dem Text
   liegt, aber vor dem Farbverlauf. */
.lp-hero--dots__canvas { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.lp-hero > .wrap { position: relative; z-index: 1; }
.lp-hero__eyebrow {
  font-family: var(--f); font-size: 0.75rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: rgba(255,255,255,0.62); display: block; margin-bottom: 24px;
}
/* ══════════════════════════════════════════════════════════════
   TYPO-SKALA — verbindlich, aus der Startseite übernommen
   ──────────────────────────────────────────────────────────────
   H1  clamp(2.2rem,4vw,4.4rem)  lh 1.22 auf der Startseite,
       auf Unterseiten bewusst enger: lh 1.12 (Wunsch: Zeilen
       etwas näher zusammen) — einzige gewollte Abweichung.
       ls 0.005em  UPPERCASE
   H2  clamp(2.4rem,5vw,4.2rem)  lh 1.0   ls -0.02em   UPPERCASE
   Eyebrow  0.75rem  weight 700  ls 0.12em  UPPERCASE
   Fließtext 1rem                Buttons 0.8rem
   Formularfelder 0.9rem, Innenabstand 12px 16px, Radius 12px
   Sonst nichts hiervon ohne Messung an der Startseite ändern.
   ══════════════════════════════════════════════════════════════ */
.lp-hero__hed {
  font-family: var(--fh); font-weight: 800;
  font-size: clamp(2.2rem, 4vw, 4.4rem);
  line-height: 1.12; letter-spacing: 0.005em;
  text-transform: uppercase;
  color: #fff; max-width: 20ch;
  will-change: transform;
}
.lp-hero__hed em { font-style: normal; color: var(--p); }
/* Zeilen fliegen beim Laden hoch ein — 1:1 Timing von hero__headline /
   heroReveal auf der Startseite übernommen (1.1s, 32px, 0.4s Versatz pro
   Zeile), die Zeitverzögerung setzt unterseiten.js pro Zeile inline. */
@keyframes lpHeroReveal { from { opacity: 0; transform: translateY(32px); } to { opacity: 1; transform: translateY(0); } }
.lp-hero__hed:not(.hl-slide-l):not(.hl-slide-r) .hl-ln { display: block; opacity: 0; animation: lpHeroReveal 1.1s cubic-bezier(0.22,1,0.36,1) both; }
/* Gleicher Flash-of-visible-content wie unten bei .hl-slide-l/-r, nur für
   den Hero-Sonderfall OHNE hl-slide-Klasse (aktuell /ki-wissen): Die H1
   steht als roher Text schon da, bevor unterseiten.js sie in .hl-ln-Zeilen
   zerlegt — deshalb hier ebenfalls per Default unsichtbar, bis JS
   (startEntrance in unterseiten.js) sie sofort wieder freigibt. */
.lp-hero__hed:not(.hl-slide-l):not(.hl-slide-r) { opacity: 0; }
/* Verhindert den Flash-of-visible-content: ohne diese Regel steht der
   rohe Überschriftentext beim Laden kurz normal da, bevor unterseiten.js
   ihn in Zeilen-Spans zerlegt und unsichtbar macht — sieht aus wie
   "erst da, dann weg, dann fliegt sie ein". Unsichtbar per Default, sobald
   die Klasse im HTML steht; unterseiten.js schaltet .lp-hero__hed sofort
   synchron wieder auf opacity:1 (die einzelnen .hl-ln-Zeilen bleiben dabei
   über ihr eigenes Inline-Style unsichtbar, bis sie einfliegen sollen). */
.hl-slide-l, .hl-slide-r { opacity: 0; }
/* 1rem = 16px, wie der Fließtext auf der Startseite. Vorher 1.15rem,
   das ergab 18,4px und ließ die Hero-Texte größer wirken. */
.lp-hero__sub {
  margin-top: 24px; max-width: 56ch;
  font-family: var(--fb); font-size: 1rem;
  line-height: 1.7; color: rgba(255,255,255,0.78);
}
.lp-hero__sub + .lp-hero__sub { margin-top: 16px; }
.lp-hero__actions { margin-top: 44px; display: flex; gap: 16px; flex-wrap: wrap; }
.lp-hero__meta {
  margin-top: 48px; display: flex; gap: 40px; flex-wrap: wrap;
  border-top: 1px solid rgba(255,255,255,0.18); padding-top: 28px;
}
.lp-hero__meta div { display: flex; flex-direction: column; gap: 6px; }
.lp-hero__meta dt {
  font-family: var(--f); font-size: 0.68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.12em; color: rgba(255,255,255,0.52);
}
.lp-hero__meta dd { font-family: var(--fh); font-weight: 700; font-size: 1.5rem; color: #fff; }

/* ── BREADCRUMB ── */
.lp-crumb { background: var(--bg); padding: 24px 0 0; }
.lp-crumb ol { list-style: none; display: flex; gap: 10px; flex-wrap: wrap; font-family: var(--f); font-size: 0.75rem; letter-spacing: 0.04em; color: var(--m); }
.lp-crumb a { color: var(--m); text-decoration: none; }
.lp-crumb a:hover { color: var(--o); text-decoration: underline; }
.lp-crumb li[aria-current] { color: var(--t); font-weight: 700; }

/* ── CONTENT SECTIONS ── */
.lp-sec { background: var(--bg); padding: 88px 0; }
.lp-sec--alt { background: #FAF4F4; }
/* Schwebender Schatten am Section-Übergang — 1:1 von .av-section auf der
   Startseite übernommen. Braucht position:relative + z-index, sonst
   wirft der Schatten nichts auf die Nachbar-Sections. */
.lp-sec--raised { position: relative; z-index: 2; box-shadow: 0 20px 64px rgba(0,0,0,0.13), 0 6px 20px rgba(0,0,0,0.07); }
.lp-eyebrow {
  font-family: var(--f); font-size: 0.75rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--o);
  display: block; margin-bottom: 24px;
}
.lp-hed {
  font-family: var(--fh); font-weight: 800;
  font-size: clamp(2.4rem, 5vw, 4.2rem); letter-spacing: -0.02em;
  line-height: 1.0; text-transform: uppercase;
  color: var(--t); margin-bottom: 28px; max-width: 20ch;
}
.lp-hed em { font-style: normal; color: var(--o); }
.lp-sub {
  font-family: var(--fh); font-weight: 700; font-size: 1.35rem;
  color: var(--t); margin: 40px 0 16px;
}
.lp-body { font-size: 1rem; line-height: 1.78; color: var(--m); max-width: 68ch; }
.lp-body + .lp-body { margin-top: 18px; }
.lp-body strong { color: var(--t); font-weight: 700; }
/* Kompakte Variante für lange KI-Wissen-Artikel — dieselbe Schriftgröße wie
   die Stärken/Grenzen-Bullets im Toolfinder (.tf-tool li), damit ein
   Artikel nicht endlos scrollt. Nur mit lp-body/lp-list kombiniert nutzen,
   NICHT die Basisklassen selbst ändern — die laufen auch auf den
   Leistungs-, Über-mich- und Erfolgsgeschichten-Seiten. */
.lp-body--sm { font-size: 0.9rem; line-height: 1.6; }
.lp-list--sm { margin-top: 20px; gap: 10px; }
.lp-list--sm li { font-size: 0.9rem; line-height: 1.5; }

/* Aufzählung mit Häkchen */
.lp-list { list-style: none; margin-top: 28px; display: flex; flex-direction: column; gap: 14px; max-width: 68ch; }
.lp-list li { position: relative; padding-left: 34px; font-size: 1.02rem; line-height: 1.7; color: var(--m); }
.lp-list li::before {
  content: ''; position: absolute; left: 0; top: 0.42em;
  width: 18px; height: 18px; border-radius: 50%;
  background: rgba(217,110,110,0.12);
  box-shadow: inset 0 0 0 1.5px rgba(217,110,110,0.45);
}
.lp-list li::after {
  content: ''; position: absolute; left: 6px; top: 0.72em;
  width: 6px; height: 3px; border-left: 1.8px solid var(--o); border-bottom: 1.8px solid var(--o);
  transform: rotate(-45deg);
}
.lp-list strong { color: var(--t); font-weight: 700; }

/* Nummerierter Ablauf */
.lp-steps { list-style: none; counter-reset: step; margin-top: 36px; display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.lp-step {
  counter-increment: step; position: relative;
  background: var(--s); border: 1px solid var(--b); border-radius: 18px;
  padding: 28px 24px 26px; transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.lp-step:hover { transform: translateY(-4px); box-shadow: 0 14px 40px rgba(18,18,18,0.07); }
.lp-step::before {
  content: counter(step); display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%; margin-bottom: 16px;
  background: linear-gradient(140deg, var(--o), var(--p));
  font-family: var(--f); font-weight: 800; font-size: 0.85rem; color: #fff;
}
.lp-step h3 { font-family: var(--f); font-weight: 800; font-size: 0.98rem; color: var(--t); margin-bottom: 8px; }
.lp-step p { font-size: 0.92rem; line-height: 1.65; color: var(--m); }

/* Vorher/Nachher — Pain/Gain */
.lp-compare { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); margin-top: 36px; }
.lp-card { border-radius: 20px; padding: 32px 28px; border: 1px solid var(--b); }
.lp-card--pain { background: #F7EFEF; }
.lp-card--gain {
  background: linear-gradient(150deg, rgba(244,174,176,0.20) 0%, rgba(196,173,255,0.16) 100%);
  border-color: rgba(217,110,110,0.22);
}
.lp-card__tag {
  font-family: var(--f); font-size: 0.68rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 18px; display: block;
}
.lp-card--pain .lp-card__tag { color: var(--m); }
.lp-card--gain .lp-card__tag { color: var(--o); }
.lp-card ul { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.lp-card li { font-size: 0.98rem; line-height: 1.6; color: var(--m); padding-left: 22px; position: relative; }
.lp-card--pain li::before { content: '×'; position: absolute; left: 0; color: var(--m); font-weight: 700; }
.lp-card--gain li::before { content: '→'; position: absolute; left: 0; color: var(--o); font-weight: 700; }

/* Preis */
.lp-price {
  margin-top: 32px; display: inline-flex; flex-direction: column; gap: 6px;
  background: var(--s); border: 1px solid var(--b); border-radius: 20px;
  padding: 30px 40px; box-shadow: 0 10px 34px rgba(18,18,18,0.05);
}
.lp-price__val { font-family: var(--fh); font-weight: 800; font-size: clamp(2.2rem,4vw,3rem); color: var(--o); line-height: 1; }
.lp-price__note { font-size: 0.85rem; color: var(--m); }
.lp-note { margin-top: 24px; font-size: 0.95rem; font-style: italic; color: var(--m); max-width: 62ch; }

/* Interne Querverlinkung */
.lp-next { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-top: 36px; }
.lp-next a {
  display: block; text-decoration: none; background: var(--s);
  border: 1px solid var(--b); border-radius: 18px; padding: 26px 24px;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.lp-next a:hover { transform: translateY(-4px); border-color: rgba(217,110,110,0.35); box-shadow: 0 14px 40px rgba(18,18,18,0.07); }
/* Die vier Ebenen einer Kachel stehen im HTML als <span>. Ohne
   display:block bleiben sie inline — dann laufen Überschrift, Text und
   Link-Zeile in einem Absatz zusammen und die margin-bottom-Angaben
   wirken gar nicht. __k hatte das schon, __t und __d fehlten:
   auf /ueber-mich, /erfolgsgeschichten und den beiden Leistungsseiten
   klebte die Überschrift deshalb am Beschreibungstext. */
.lp-next__k { font-family: var(--f); font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em; color: var(--o); display: block; margin-bottom: 10px; }
.lp-next__t { font-family: var(--fh); font-weight: 700; font-size: 1.25rem; color: var(--t); display: block; margin-bottom: 8px; }
/* Ohne Überschrift ist dieser Text der Hauptinhalt der Karte → Fließtextgröße. */
.lp-next__d { font-size: 1rem; line-height: 1.65; color: var(--m); display: block; }
/* Sichtbare Handlungsaufforderung am Fuß der Kachel. Bewusst ohne Pfeil;
   der Hinweis auf die Klickbarkeit ist die Unterstreichung beim Überfahren.
   inline-block, damit die Linie nur unter dem Text liegt und nicht über
   die ganze Kachelbreite. */
.lp-next__go {
  display: inline-block; margin-top: 16px;
  font-family: var(--fb); font-size: 0.9rem; font-weight: 700; color: var(--o);
  text-decoration: underline; text-decoration-color: transparent;
  text-underline-offset: 4px; transition: text-decoration-color 0.2s ease;
}
.lp-next a:hover .lp-next__go { text-decoration-color: currentColor; }

/* ── AUTONOMIE-REGLER ──
   Wiederverwendbare Komponente für "wie autonom darf eine KI handeln"
   (aktuell auf /ki-wissen/ki-agent-vs-ki-assistent). Ein echtes
   <input type="range">, das der Mensch selbst zieht — es animiert sich
   NICHTS von allein, jede Änderung ist eine direkte Reaktion auf die
   Regler-Position. 3 Stufen: 0–33 (Mensch → KI → Mensch), 34–66 (+ Analyse
   + Entscheidung), 67–100 (+ Tool + Aktion, Schluss-Mensch bekommt ein "*").
   Markup-Vorlage: Kommentar "AUTONOMIE-REGLER" in der HTML-Datei — Block
   kopieren, Texte anpassen. JS steht in unterseiten.js, Abschnitt
   "Autonomie-Regler"; findet jedes [data-pl-track] automatisch und
   steuert die .is-shown-Klasse je nach data-min-level/data-max-level am
   Knoten. Farben: Mensch = --t (dunkel), KI = --o (Rosé), Zwischenschritte
   (Analyse/Entscheidung/Tool/Aktion) = --p (Peach) — kein Lila. */
.pl-scale { overflow: visible; }

.pl-component { margin-top: 56px; }

.pl-slider { margin-bottom: 48px; }
.pl-slider__labels { display: flex; justify-content: space-between; gap: 24px; margin-bottom: 18px; }
.pl-slider__label {
  display: flex; flex-direction: column; gap: 3px; max-width: 220px;
  font-family: var(--f); font-size: 0.82rem; color: var(--m);
}
.pl-slider__label strong { font-family: var(--fh); font-weight: 700; font-size: 0.98rem; color: var(--t); }
.pl-slider__label--end { align-items: flex-end; text-align: right; }

.pl-slider__input {
  -webkit-appearance: none; appearance: none; width: 100%; height: 2px;
  background: var(--b); border-radius: 2px; outline: none; cursor: pointer; margin: 0; display: block;
}
.pl-slider__input::-webkit-slider-runnable-track {
  height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--o) 0%, var(--o) var(--pl-pct, 10%), var(--b) var(--pl-pct, 10%), var(--b) 100%);
}
.pl-slider__input::-moz-range-track { height: 2px; border-radius: 2px; background: var(--b); }
.pl-slider__input::-moz-range-progress { height: 2px; border-radius: 2px; background: var(--o); }
/* Runder "3D-Glass"-Griff — 1:1 die Technik von .btn nachgebaut: FLACHE
   Rosé-Grundfarbe (kein Gradient-Ball!) + ein breites, weiches Glanzband
   über die obere Hälfte (2. Hintergrund-Ebene als Ellipse, entspricht dem
   ::before-Verlauf bei .btn, den man auf einem ::-webkit-slider-thumb
   nicht verschachteln kann) + dieselbe Schlagschatten-Schichtung (innen:
   Highlight-Linie oben, weicher Innenglanz, dunklere Rosé-Schattierung an
   den Seiten wie ein Zylinder; außen: farbiger Glow + normaler Schatten).
   Zwei frühere Versuche saßen daneben: erst ein großer radial-gradient
   über den ganzen Kreis (wirkte wie ein Pastell-Ball), dann ein zu enger
   Lichtpunkt (wirkte wie eine Murmel) — der Live-Vergleich mit dem echten
   Button zeigte: das Glanzband muss breit UND weich sein, nicht punktuell. */
.pl-slider__input::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 26px; height: 26px; margin-top: -12px;
  border-radius: 50%; cursor: grab; border: none;
  background:
    radial-gradient(ellipse 90% 65% at 50% 22%, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.32) 45%, rgba(255,255,255,0) 78%),
    var(--o);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.8),
    inset 0 3px 3px rgba(255,255,255,0.35),
    inset 4px 0 5px rgba(120,30,30,0.4),
    inset -4px 0 5px rgba(120,30,30,0.34),
    inset 0 -2px 3px rgba(120,30,30,0.3),
    0 2px 3px rgba(0,0,0,0.28),
    0 4px 8px rgba(196,94,94,0.5);
  transition: box-shadow 0.2s ease, transform 0.15s ease;
}
.pl-slider__input::-moz-range-thumb {
  width: 26px; height: 26px; border-radius: 50%; cursor: grab; border: none;
  background:
    radial-gradient(ellipse 90% 65% at 50% 22%, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.32) 45%, rgba(255,255,255,0) 78%),
    var(--o);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.8),
    inset 0 3px 3px rgba(255,255,255,0.35),
    inset 4px 0 5px rgba(120,30,30,0.4),
    inset -4px 0 5px rgba(120,30,30,0.34),
    inset 0 -2px 3px rgba(120,30,30,0.3),
    0 2px 3px rgba(0,0,0,0.28),
    0 4px 8px rgba(196,94,94,0.5);
}
.pl-slider__input:hover::-webkit-slider-thumb,
.pl-slider__input:focus-visible::-webkit-slider-thumb {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.85),
    inset 0 3px 3px rgba(255,255,255,0.4),
    inset 4px 0 5px rgba(120,30,30,0.4),
    inset -4px 0 5px rgba(120,30,30,0.34),
    inset 0 -2px 3px rgba(120,30,30,0.3),
    0 2px 4px rgba(0,0,0,0.3),
    0 5px 10px rgba(196,94,94,0.6),
    0 0 0 7px rgba(217,110,110,0.16);
}
.pl-slider__input:active::-webkit-slider-thumb { cursor: grabbing; transform: scale(1.08); }
.pl-slider__input:focus-visible { outline: none; }

/* Bricht bewusst breiter aus als der 1080px-Artikeltext (Michaelas
   Feedback: "muss breiter über die Seite gehen") — Standard-Breakout-Trick
   (kein Ancestor zwischen hier und <body> setzt position, daher zentriert
   left:50%+translateX(-50%) auf dem Viewport statt auf .wrap). Auf
   schmaleren Screens ist der Effekt automatisch kleiner/null, das ist
   gewollt: Breite wird nur genutzt, wenn welche da ist. */
.pl-diagram {
  position: relative; left: 50%; transform: translateX(-50%);
  width: 92vw; max-width: 1320px; box-sizing: border-box; padding: 0 24px;
}
.pl-chain { position: relative; display: flex; align-items: flex-start; gap: 8px; padding-top: 5px; }
/* Verbindungslinie hinter den Punkten — macht aus lose schwebenden Dots
   eine klar lesbare Kette und füllt die neue Breite sinnvoll statt leer
   zu bleiben. */
.pl-chain::before {
  content: ''; position: absolute; top: 9px; left: 0; right: 0; height: 2px; background: var(--b); z-index: 0;
}

.pl-node {
  position: relative; z-index: 1; flex: 1 1 0;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px;
  opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.22,1,0.36,1), flex-grow 0.35s ease,
              max-height 0.35s ease, margin-bottom 0.35s ease;
}
.pl-node.is-shown { opacity: 1; transform: translateY(0); pointer-events: auto; }
/* Knoten, die je nach Regler-Stufe ein-/ausgeblendet werden, bekommen
   flex-grow:0 statt Platz zu reservieren — die sichtbaren Knoten teilen
   sich dadurch die ganze Zeilenbreite gleichmäßig unter sich auf, egal
   wie viele gerade aktiv sind (3, 5 oder 7). */
.pl-node[data-min-level], .pl-node[data-max-level] { flex: 0 1 0; overflow: hidden; }
/* overflow zurück auf visible, sobald sichtbar — sonst schneidet die
   Box beim eingeschwungenen Zustand den oberen Rand des Punkts (bzw.
   dessen Glow-Ring) leicht ab, er wirkt dann nicht mehr rund ("Böbbel
   oben abgeschnitten", gemeldetes Problem). overflow:hidden wird nur
   während des kollabierten/animierenden Zustands gebraucht. */
.pl-node[data-min-level].is-shown, .pl-node[data-max-level].is-shown { flex: 1 1 0; overflow: visible; }

.pl-node__dot {
  width: 10px; height: 10px; border-radius: 50%; background: var(--t);
  border: 3px solid var(--bg);
}
.pl-node--ai .pl-node__dot { background: var(--o); box-shadow: 0 0 0 5px rgba(217,110,110,0.14); }
.pl-node--step.pl-node--ai .pl-node__dot { background: var(--p); box-shadow: 0 0 0 4px rgba(244,174,176,0.3); }

.pl-node__text { display: flex; flex-direction: column; gap: 4px; }
.pl-node__label {
  font-family: var(--f); font-weight: 700; font-size: 1rem; color: var(--t); white-space: nowrap;
}
.pl-node--step .pl-node__label { font-weight: 600; font-size: 0.9rem; color: var(--m); }
.pl-node__note { color: var(--o); font-weight: 800; opacity: 0; transition: opacity 0.3s ease; }
.pl-node__note.is-shown { opacity: 1; }

.pl-footnote {
  margin-top: 24px; font-family: var(--f); font-size: 0.8rem; color: var(--m);
  min-height: 1.2em; opacity: 0; transition: opacity 0.3s ease; text-align: center;
}
.pl-footnote.is-shown { opacity: 1; }

@media (max-width: 768px) {
  .pl-component { margin-top: 48px; }
  .pl-slider__input::-webkit-slider-thumb { width: 30px; height: 30px; margin-top: -14px; }
  .pl-slider__input::-moz-range-thumb { width: 30px; height: 30px; }
  .pl-slider__label { max-width: 46%; font-size: 0.76rem; }
  /* Breakout auf Mobile wieder zurücknehmen — dort ist eh schon alles
     volle Breite, der Effekt ergibt keinen Sinn und die Kette steht
     ohnehin als Spalte. */
  .pl-diagram { position: static; left: auto; transform: none; width: auto; max-width: none; padding: 0; }
  /* Kein "gap" hier — ein flex-column-gap wird auch zwischen unsichtbaren
     (max-height:0) Kindern mitgezählt und erzeugt genau die Lücken, die
     die Breakpoint-Logik eigentlich vermeiden soll. Abstand kommt daher
     über margin-bottom je Knoten, die kollabiert mit demselben Trick. */
  .pl-chain { flex-direction: column; align-items: flex-start; gap: 0; }
  .pl-chain::before { top: 0; bottom: 0; left: 4px; right: auto; width: 2px; height: auto; }
  /* flex:0 0 auto überschreibt das Desktop-flex-basis:0 (dort für die
     Zeilen-BREITE gedacht) — im Spalten-Layout hier wäre eine geerbte
     basis:0 sonst eine HÖHEN-Basis von 0, und weil overflow:hidden die
     automatische Mindesthöhe von Flexbox deaktiviert, würde der Knoten
     trotz max-height:40px real auf 0px kollabieren (echter Bug, per
     getComputedStyle geprüft: offsetHeight war 0 trotz korrektem
     max-height/opacity/is-shown). */
  .pl-node { flex: 0 0 auto; flex-direction: row; align-items: center; text-align: left; gap: 12px; margin-bottom: 18px; }
  .pl-node__text { align-items: flex-start; }
  .pl-footnote { text-align: left; }
  /* Auf Mobile ist die Kette vertikal gestapelt — verstecke Knoten müssen
     hier ihre Höhe UND ihren Margin freigeben, sonst bleiben Lücken.
     Selektoren 1:1 wie die Desktop-Regeln wiederholt (gleiche Spezifität),
     sonst gewinnt dort "flex: 1 1 0" weiterhin gegen "flex: 0 0 auto"
     hier — exakt dasselbe Muster wie der .pl-node--phase1only-Bug vorhin
     in dieser Session. */
  .pl-node[data-min-level], .pl-node[data-max-level] { flex: 0 0 auto; max-height: 0; margin-bottom: 0; }
  .pl-node[data-min-level].is-shown, .pl-node[data-max-level].is-shown { flex: 0 0 auto; max-height: 40px; margin-bottom: 18px; }
}

/* ── ROSA-STÖRER (KI-Wissen) ──
   Randabfallende Merksatz-Section, 1:1 dasselbe Muster wie .demo-quote auf
   der Startseite ("KI ist nicht die Zukunft. KI ist jetzt.") — voller
   Rosé/Peach-Verlauf, fetter weißer Editorial-Satz, zentriert. Bewusst
   eigene Klasse hier (unterseiten.css ist projektweit, index.html hat ihr
   eigenes Inline-CSS und bleibt unangetastet), aber identische Werte. */
.kw-stoerer { background: linear-gradient(135deg, var(--oh) 0%, var(--o) 60%, var(--p) 100%); padding: 72px 0; text-align: center; }
.kw-stoerer__inner { max-width: 860px; margin: 0 auto; padding: 0 48px; }
.kw-stoerer__text {
  font-family: var(--fh); font-weight: 800; font-size: clamp(1.8rem, 4.5vw, 3.2rem);
  letter-spacing: -0.02em; line-height: 1.15; color: #fff;
}
@media (max-width: 768px) {
  .kw-stoerer { padding: 48px 0; }
  .kw-stoerer__inner { padding: 0 24px; }
}

/* ── TEXT + BILD (KI-Wissen) ──
   Zweispaltiges Layout für "Was kann der KI-Assistent/Agent" mit
   wechselnder Bildseite (.kw-split--reverse). Bewusst nur ein leichtes
   Fade-in (.fi, wie überall sonst auf der Seite) + dezenter Hover-Scale
   aufs Bild — kein Wipe-Reveal/Sticky-Pin wie beim Startseiten-Foto, das
   wäre für einen Wissensartikel zu viel Bühne. */
/* align-items:start statt center — sonst hängt das Bild mittig neben dem
   (meist längeren) Textblock und darüber bleibt ein leerer Cream-Streifen
   stehen, der wie ein falscher weißer Rand wirkt. Bild startet jetzt auf
   Höhe der Eyebrow, wie der Text. */
.kw-split { display: grid; grid-template-columns: 1.15fr 1fr; gap: 56px; align-items: start; }
.kw-split--reverse .kw-split__media { order: -1; }
/* Randabfallend statt Karte: Fotos/Illustrationen laufen auf dieser
   Website konsequent ohne border-radius (vgl. .about__photo-col,
   .process__img-col auf der Startseite) — nur UI-Karten sind rund. */
.kw-split__media {
  overflow: hidden; background: var(--s);
  aspect-ratio: 1 / 1;
}
.kw-split__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.5s cubic-bezier(0.22,1,0.36,1);
}
.kw-split__media:hover img { transform: scale(1.04); }

@media (max-width: 768px) {
  .kw-split { grid-template-columns: 1fr; gap: 32px; }
  .kw-split__media, .kw-split--reverse .kw-split__media { order: -1; aspect-ratio: 4 / 3; }
}

/* Erste Section direkt nach Hero+Breadcrumb (z.B. ki-agent-vs-ki-assistent):
   Desktop 40px Luft, damit Eyebrow/H2 nicht an der Breadcrumb kleben.
   Mobile 0, weil dort per order:-1 zuerst das Bild kommt und selbst 40px
   + der fast gleichfarbige Breadcrumb-Hintergrund wie ein weißer Rand
   wirkten (die Breadcrumb selbst schafft dort schon genug Abstand). */
.kw-first-sec { padding-top: 40px; }
@media (max-width: 768px) {
  .kw-first-sec { padding-top: 0; }
}

/* CTA-Button am Ende von "Die Entscheidung" auf Mobile mittig statt
   linksbündig — .btn ist inline-flex und folgt sonst dem normalen
   Text-Fluss (linksbündig). display:flex + auto-margins zentrieren ihn,
   ohne die Basis-.btn-Klasse für andere Einsatzstellen zu verändern. */
@media (max-width: 768px) {
  /* width:fit-content ist der Schlüssel — ohne das dehnt sich der Button
     durch display:flex (block-level) auf die volle Zeilenbreite, weil
     margin:auto allein keine Breite vorgibt, sondern nur vorhandenen
     Extra-Platz verteilt. Mit fit-content bleibt die natürliche
     Button-Breite erhalten, nur die Zentrierung kommt dazu. */
  .kw-cta-btn { display: flex; width: fit-content; margin-left: auto; margin-right: auto; }
}

/* ── VERGLEICHSTABELLE (KI-Wissen) ──
   Aktuell auf /ki-wissen/ki-agent-vs-ki-assistent: Kriterium | KI-Assistent
   | KI-Agent. Schmal genug für die meisten Desktop-Breiten, bekommt aber
   ab 768px zur Sicherheit horizontales Scrollen statt einer zweiten,
   umgebauten Mobile-Tabelle — bei nur 3 Spalten reicht das aus. */
.kw-compare-wrap {
  margin-top: 36px; border-radius: 18px; border: 1px solid var(--b);
  overflow-x: auto; -webkit-overflow-scrolling: touch; background: var(--s);
}
.kw-compare { width: 100%; min-width: 600px; border-collapse: collapse; }
.kw-compare th, .kw-compare td { padding: 16px 22px; text-align: left; vertical-align: top; }
.kw-compare thead th {
  font-family: var(--fh); font-weight: 700; font-size: 1rem; color: var(--o);
  border-bottom: 1.5px solid var(--b);
}
.kw-compare thead th:first-child {
  font-family: var(--f); font-weight: 700; font-size: 0.68rem; color: var(--m);
  text-transform: uppercase; letter-spacing: 0.1em;
}
.kw-compare tbody td { font-size: 0.9rem; line-height: 1.42; color: var(--m); border-bottom: 1px solid var(--b); }
.kw-compare tbody tr:last-child td { border-bottom: none; }
.kw-compare tbody td:first-child { font-family: var(--f); font-weight: 700; color: var(--t); white-space: nowrap; }
.kw-compare th:nth-child(3), .kw-compare td:nth-child(3) { background: rgba(217,110,110,0.045); }

@media (max-width: 768px) {
  .kw-compare-wrap { margin-top: 28px; }
  .kw-compare th, .kw-compare td { padding: 14px 18px; font-size: 0.86rem; }
}

/* ── KI-WISSEN: ARTIKEL-LISTE ──
   Bewusst schlicht statt Kachel-Raster mit Bildern: keine Sterne, keine
   Aufrufzahlen, kein Bild pro Artikel — nur Titel, Kurztext und Jahr.
   Jede Zeile ist ein einziger Link, der Pfeil erscheint erst bei Hover. */
.kw-search { display: flex; align-items: center; max-width: 320px; width: 100%; position: relative; }
.kw-search input {
  width: 100%; height: 46px; border-radius: 999px;
  border: 1px solid var(--b); background: var(--s);
  color: var(--t); font-family: var(--f); font-size: 0.95rem;
  padding: 0 18px 0 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D96E6E' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='6'/%3E%3Cpath d='M16 16L21 21'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-size: 16px 16px; background-position: 16px center;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.kw-search input::placeholder { color: var(--m); }
.kw-search input:focus {
  outline: none; border-color: var(--o);
  box-shadow: 0 0 0 3px rgba(217,110,110,0.12);
}
.kw-search input[type="search"] { -webkit-appearance: none; appearance: none; }
.kw-search input::-webkit-search-cancel-button,
.kw-search input::-webkit-search-decoration,
.kw-search input::-webkit-search-results-button,
.kw-search input::-webkit-search-results-decoration { -webkit-appearance: none; appearance: none; display: none; width: 0; height: 0; }
.kw-search input::-ms-clear { display: none; width: 0; height: 0; }
.kw-empty { display: none; margin-top: 24px; font-size: 0.95rem; color: var(--m); }
.kw-empty.is-visible { display: block; }
.kw-list { margin-top: 32px; border-top: 1px solid var(--b); }
.kw-row {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 24px;
  padding: 30px 20px; margin: 0 -20px;
  border-bottom: 1px solid var(--b); border-radius: 16px;
  text-decoration: none; transition: background 0.2s ease;
}
.kw-row:hover { background: rgba(18,18,18,0.035); }
.kw-row__main { min-width: 0; }
/* display:flex (statt inline-flex) + min-width:0 + flex-wrap: der Titel
   ist sonst ein "inline-flex"-Block, der sich NICHT auf die verfügbare
   Breite zusammenschieben lässt (Flexbox-Default min-width:auto) — bei
   längeren Titeln + Pfeil-Icon lief der Text auf schmalen Screens über
   den Rand hinaus, statt umzubrechen (echter Bug, per Screenshot
   gemeldet: Text am rechten Rand abgeschnitten). */
.kw-row__title {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0;
  font-family: var(--f); font-weight: 800; font-size: 1.15rem;
  color: var(--t);
}
.kw-row__title-text { position: relative; min-width: 0; }
.kw-row__title-text::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform 0.3s ease;
}
.kw-row:hover .kw-row__title-text::after { transform: scaleX(1); }
.kw-row__arrow {
  flex-shrink: 0; width: 15px; height: 15px; color: var(--o);
  opacity: 0; transform: translate(-4px, 4px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.kw-row:hover .kw-row__arrow { opacity: 1; transform: translate(0, 0); }
.kw-row__desc {
  margin-top: 6px; font-size: 0.95rem; line-height: 1.6; color: var(--m); max-width: 58ch;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kw-row__meta {
  flex-shrink: 0; padding-top: 3px;
  font-family: var(--f); font-size: 0.85rem; color: var(--m);
}
@media (max-width: 768px) {
  .kw-row { flex-direction: column; gap: 6px; padding: 24px 16px; margin: 0 -16px; }
  .kw-row__meta { padding-top: 0; }
  /* Auf Mobile lieber 2–3 Zeilen Beschreibung als eine abgeschnittene
     Ellipsis-Zeile — Michaelas Feedback: abgeschnittener Text wirkt kaputt. */
  .kw-row__desc { white-space: normal; overflow: visible; text-overflow: clip; max-width: none; }
}

/* ── FAQ ── */
.faq { position: relative; background: var(--bg); overflow: hidden; padding: 88px 0; }
.faq__blob { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(90px); }
.faq__blob--1 { width: 450px; height: 450px; top: -80px; right: -80px; background: radial-gradient(circle, rgba(249,116,85,0.09) 0%, transparent 70%); }
.faq__blob--2 { width: 350px; height: 350px; bottom: -60px; left: -60px; background: radial-gradient(circle, rgba(196,173,255,0.10) 0%, transparent 70%); }
.faq__header { margin-bottom: 40px; position: relative; z-index: 1; }
.faq__eyebrow-cls { font-family: var(--f); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--o); display: block; margin-bottom: 24px; }
.faq__hed { font-family: var(--fh); font-weight: 800; font-size: clamp(2.4rem,5vw,4.2rem); letter-spacing: -0.02em; text-transform: uppercase; line-height: 1.0; color: var(--t); }
.faq__hed em { font-style: normal; color: var(--o); }
.faq__list { display: flex; flex-direction: column; position: relative; z-index: 1; max-width: 860px; }
.faq__item { border-top: 1px solid rgba(18,18,18,0.1); }
.faq__item:last-child { border-bottom: 1px solid rgba(18,18,18,0.1); }
.faq__btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 16px 0; background: none; border: none; cursor: none; text-align: left;
  font-family: var(--f); font-weight: 800; font-size: 1rem; color: var(--t);
  letter-spacing: 0.01em; line-height: 1.3; transition: color 200ms ease-out;
}
.faq__btn:hover { color: var(--o); }
.faq__btn svg { flex-shrink: 0; width: 20px; height: 20px; color: var(--m); transition: transform 0.35s cubic-bezier(0.22,1,0.36,1); }
.faq__item.open .faq__btn { color: var(--o); }
.faq__item.open .faq__btn svg { transform: rotate(180deg); }
.faq__body { display: none; padding: 0 0 16px; }
.faq__item.open .faq__body { display: block; }
.faq__a { font-size: 1rem; color: var(--m); line-height: 1.8; max-width: 700px; }
.faq__a + .faq__a { margin-top: 12px; }

/* ── CTA ── */
.cta-wrap {
  position: relative; overflow: hidden; padding: 120px 48px;
  background: linear-gradient(135deg, var(--oh) 0%, var(--o) 38%, var(--p) 68%, var(--lvl) 100%);
}
.cta-wrap::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px; opacity: 0.06;
}
.cta-wrap::after {
  content: ''; position: absolute; top: -30%; left: 50%; transform: translateX(-50%);
  width: 70%; height: 80%; background: radial-gradient(ellipse, rgba(255,255,255,0.20) 0%, transparent 70%); pointer-events: none;
}
.cta-inner { max-width: 1080px; margin: 0 auto; position: relative; z-index: 1; }
.cta-label { font-family: var(--f); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.65); margin-bottom: 24px; display: block; }
/* War clamp(3rem,7vw,7rem) — spürbar größer als die verbindliche H2-Skala
   (2.4rem,5vw,4.2rem) weiter oben in dieser Datei, sowohl auf Mobile
   (flache 3rem/48px vs. 2.4rem/38px Minimum) als auch Desktop (7rem/112px
   vs. 4.2rem/67px Maximum). Michaelas Feedback: zu groß — jetzt näher an
   der H2-Skala, aber als Schluss-Statement noch minimal betonter. */
.cta-hed { font-family: var(--fh); font-weight: 800; font-size: clamp(2.6rem,5.5vw,5rem); letter-spacing: -0.02em; text-transform: uppercase; line-height: 0.98; color: #fff; margin-bottom: 32px; }
.cta-hed em { font-style: normal; display: block; }
.cta-sub { font-family: var(--fb); font-size: 1.05rem; line-height: 1.7; color: rgba(255,255,255,0.82); max-width: 54ch; margin-bottom: 44px; }

/* ── PLATZHALTER ──
   Absichtlich auffällig gestaltet: Diese Blöcke markieren Stellen, an denen
   noch Michaelas eigener Inhalt fehlt (Biografie, gemessene Zahlen).
   Solange sie auf einer Seite stehen, darf die Seite NICHT deployed werden.
   Nach dem Ersetzen verschwindet auch das CSS-Fragment ungenutzt — kein Problem. */
.lp-todo {
  margin-top: 28px; max-width: 68ch;
  border: 2px dashed #C0392B; border-radius: 14px;
  background: repeating-linear-gradient(135deg, #FFF6F5 0 12px, #FFEDEB 12px 24px);
  padding: 24px 26px;
}
.lp-todo__tag {
  display: inline-block; margin-bottom: 12px;
  font-family: var(--f); font-size: 0.68rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.12em; color: #C0392B;
}
.lp-todo p { font-size: 0.95rem; line-height: 1.7; color: #7A2E24; }
.lp-todo ul { margin-top: 12px; padding-left: 20px; }
.lp-todo li { font-size: 0.92rem; line-height: 1.7; color: #7A2E24; }

/* ── BADGE „Beispiel-Szenario" ──
   Muss sichtbar bleiben (§ 5 UWG): illustrative Szenarien dürfen nicht wie
   echte Kundenreferenzen wirken. Nicht verkleinern, nicht ausgrauen. */
.lp-badge {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 14px; border-radius: 999px; margin-bottom: 18px;
  background: rgba(155,136,224,0.14);
  box-shadow: inset 0 0 0 1.5px rgba(155,136,224,0.45);
  font-family: var(--f); font-size: 0.7rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.1em; color: #6B5AB8;
}
.lp-badge::before { content: 'ⓘ'; font-size: 0.85rem; }

/* ── SZENARIO-KARTEN ── */
.lp-scenario {
  background: var(--s); border: 1px solid var(--b); border-radius: 22px;
  padding: 34px 32px; margin-top: 24px;
}
.lp-scenario__t { font-family: var(--fh); font-weight: 700; font-size: clamp(1.3rem,2.2vw,1.7rem); color: var(--t); margin-bottom: 20px; }
.lp-scenario dl { display: grid; gap: 18px; }
.lp-scenario dt {
  font-family: var(--f); font-size: 0.68rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--o); margin-bottom: 6px;
}
.lp-scenario dd { font-size: 0.98rem; line-height: 1.7; color: var(--m); }
.lp-scenario dd ul { list-style: none; display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.lp-scenario dd li { padding-left: 20px; position: relative; }
.lp-scenario dd li::before { content: '→'; position: absolute; left: 0; color: var(--o); font-weight: 700; }

/* ── PORTRAIT-LAYOUT (Über mich) ── */
.lp-intro { display: grid; grid-template-columns: 1fr 1.35fr; gap: 56px; align-items: start; }
.lp-intro__photo { border-radius: 24px; overflow: hidden; box-shadow: 0 20px 60px rgba(18,18,18,0.10); }
.lp-intro__photo img { width: 100%; height: auto; display: block; }
.lp-intro__cap { margin-top: 12px; font-size: 0.8rem; color: var(--m); font-style: italic; }

/* ── ZITAT-BLOCK ── */
.lp-quote {
  margin-top: 40px; padding: 36px 40px; border-radius: 22px;
  background: linear-gradient(150deg, rgba(244,174,176,0.18) 0%, rgba(196,173,255,0.14) 100%);
  border: 1px solid rgba(217,110,110,0.20);
}
.lp-quote blockquote { font-family: var(--fh); font-weight: 700; font-size: clamp(1.4rem,2.6vw,2.1rem); line-height: 1.25; color: var(--t); letter-spacing: -0.01em; }
.lp-quote blockquote em { font-style: normal; color: var(--o); }

/* ══════════════════════════════════════════════════════════════
   KI-TOOLFINDER
   ──────────────────────────────────────────────────────────────
   Grundsatz: Alle Inhalte stehen als HTML im Quelltext. Ohne
   JavaScript sieht man alle Fragen und alle Tools als lesbare
   Liste. Erst .tf-js auf <body> (von toolfinder.js gesetzt)
   verwandelt das in den schrittweisen Quiz-Ablauf.
   ══════════════════════════════════════════════════════════════ */

/* ── Fortschritt ── */
.tf-progress { margin-bottom: 40px; display: none; }
body.tf-js .tf-progress { display: block; }
.tf-progress__bar { height: 4px; border-radius: 4px; background: rgba(18,18,18,0.08); overflow: hidden; }
.tf-progress__fill {
  height: 100%; width: 0%; border-radius: 4px;
  background: linear-gradient(90deg, var(--oh), var(--o), var(--p));
  transition: width 0.45s cubic-bezier(0.22,1,0.36,1);
}
.tf-progress__label {
  margin-top: 12px; font-family: var(--f); font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--m);
}

/* ── Fragen ── */
/* fieldset bringt vom Browser einen grauen Rahmen mit — der muss weg. */
.tf-step { margin-bottom: 56px; border: none; padding: 0; margin-left: 0; margin-right: 0; }
body.tf-js .tf-step { display: none; margin-bottom: 0; }
body.tf-js .tf-step.is-current { display: block; animation: tf-in 0.5s cubic-bezier(0.22,1,0.36,1) both; }
@keyframes tf-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

.tf-step legend, .tf-step__q {
  display: block; font-family: var(--fh); font-weight: 800;
  font-size: clamp(1.25rem, 2.2vw, 1.75rem); line-height: 1.25;
  letter-spacing: -0.015em; color: var(--t); margin-bottom: 10px; padding: 0;
}
.tf-step__hint {
  font-family: var(--f); font-size: 0.78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--o);
  margin-bottom: 28px; display: block;
}

/* ── Antwort-Optionen ── */
.tf-opts { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); list-style: none; }
.tf-opt { position: relative; }
.tf-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.tf-opt label {
  display: flex; align-items: center; gap: 12px; height: 100%;
  padding: 12px 16px; border-radius: 12px; cursor: none;
  background: var(--s); border: 1.5px solid var(--b);
  font-family: var(--fb); font-size: 0.9rem; line-height: 1.4; color: var(--t);
  transition: border-color 0.2s, background 0.2s, transform 0.2s, box-shadow 0.2s;
}
.tf-opt label::before {
  content: ''; flex-shrink: 0; width: 17px; height: 17px; border-radius: 50%;
  border: 1.5px solid rgba(18,18,18,0.22); background: #fff;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
/* Auch bei Mehrfachauswahl runde Felder — bewusst keine Quadrate. */
.tf-opt label:hover { border-color: rgba(217,110,110,0.45); transform: translateY(-2px); box-shadow: 0 10px 26px rgba(18,18,18,0.06); }
.tf-opt input:checked + label {
  border-color: var(--o); background: linear-gradient(140deg, rgba(244,174,176,0.16), rgba(196,173,255,0.10));
  box-shadow: 0 10px 30px rgba(217,110,110,0.14);
}
.tf-opt input:checked + label::before {
  border-color: var(--o); background: var(--o);
  box-shadow: inset 0 0 0 3px #fff;
}
.tf-opt input:focus-visible + label { outline: 2px solid var(--o); outline-offset: 3px; }
.tf-opt input:disabled + label { opacity: 0.42; }

/* ── Navigation im Quiz ── */
.tf-nav { display: none; gap: 14px; margin-top: 40px; flex-wrap: wrap; align-items: center; }
body.tf-js .tf-nav { display: flex; }
.tf-nav__back {
  background: none; border: none; padding: 8px 4px; cursor: none;
  font-family: var(--f); font-size: 0.8rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--m);
  transition: color 0.2s;
}
.tf-nav__back:hover { color: var(--o); }
.tf-nav__back[hidden] { display: none; }
.btn[disabled] { opacity: 0.4; pointer-events: none; }

/* Hinweis für Nutzer ohne JavaScript */
.tf-nojs {
  margin-bottom: 40px; padding: 18px 22px; border-radius: 14px;
  background: rgba(196,173,255,0.10); border: 1px solid rgba(155,136,224,0.30);
  font-size: 0.95rem; line-height: 1.6; color: var(--m);
}
body.tf-js .tf-nojs { display: none; }

/* ── Ergebnis ──
   #ergebnis behält sonst sein volles .lp-sec-Padding, auch wenn .tf-result
   noch unsichtbar ist — das erzeugt eine leere weiße Fläche vor dem Quiz-
   Abschluss. Deshalb kollabiert der Abschnitt, bis ein Ergebnis feststeht. */
#ergebnis { padding: 0; }
#ergebnis:has(.tf-result.is-visible) { padding: 88px 0; }
.tf-result { display: none; }
.tf-result.is-visible { display: block; animation: tf-in 0.6s cubic-bezier(0.22,1,0.36,1) both; }
.tf-result__lead {
  padding: 30px 34px; border-radius: 20px; margin-bottom: 32px;
  background: linear-gradient(150deg, rgba(244,174,176,0.18), rgba(196,173,255,0.13));
  border: 1px solid rgba(217,110,110,0.20);
  font-size: 1.05rem; line-height: 1.75; color: var(--t);
}
.tf-result__lead strong { color: var(--oh); }
.tf-match { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.tf-match__rank {
  font-family: var(--f); font-size: 0.68rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--o);
}
/* Eigennamen NICHT in Großbuchstaben — "n8n" und "tl;dv" schreiben sich klein.
   Hebt das text-transform der Link-Klasse gezielt wieder auf. */
.tf-match a, p .tf-tool__link {
  text-transform: none; letter-spacing: 0.01em; font-size: 1.02rem;
}
.tf-skip {
  margin-top: 32px; padding: 26px 30px; border-radius: 18px;
  background: #F7EFEF; border: 1px solid var(--b);
}
.tf-skip__t {
  font-family: var(--f); font-size: 0.7rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--m); margin-bottom: 12px; display: block;
}
.tf-skip p { font-size: 0.98rem; line-height: 1.7; color: var(--m); }

/* ── E-Mail-Feld ── */
.tf-mail {
  margin-top: 36px; padding: 32px 34px; border-radius: 20px;
  background: var(--s); border: 1px solid var(--b); box-shadow: 0 12px 36px rgba(18,18,18,0.05);
}
.tf-mail__t { font-family: var(--fh); font-weight: 700; font-size: 1.35rem; color: var(--t); margin-bottom: 8px; }
.tf-mail__d { font-size: 0.95rem; line-height: 1.65; color: var(--m); margin-bottom: 22px; }
.tf-mail__row { display: flex; gap: 12px; flex-wrap: wrap; }
.tf-mail input[type="email"] {
  flex: 1; min-width: 220px; padding: 12px 16px; border-radius: 12px;
  border: 1.5px solid var(--b); background: var(--bg);
  font-family: var(--fb); font-size: 0.9rem; color: var(--t); outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.tf-mail input[type="email"]:focus { border-color: var(--o); box-shadow: 0 0 0 3px rgba(217,110,110,0.14); }
.tf-mail__consent { margin-top: 16px; display: flex; gap: 10px; align-items: flex-start; font-size: 0.82rem; line-height: 1.55; color: var(--m); }
.tf-mail__consent input { margin-top: 3px; flex-shrink: 0; }
.tf-mail__consent a { color: var(--o); }
.tf-mail__note { margin-top: 14px; font-size: 0.88rem; line-height: 1.6; }
.tf-mail__note--ok { color: #2E7D5B; }
.tf-mail__note--err { color: #C0392B; }

/* ── Tool-Übersicht (der eigentliche SEO-Inhalt) ── */
.tf-filter { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 36px; }
.tf-chip {
  padding: 9px 18px; border-radius: 999px; cursor: none;
  background: var(--s); border: 1.5px solid var(--b);
  font-family: var(--f); font-size: 0.78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--m);
  transition: all 0.2s;
}
.tf-chip:hover { border-color: rgba(217,110,110,0.45); color: var(--t); }
.tf-chip.is-on { background: var(--o); border-color: var(--o); color: #fff; }

.tf-tools { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.tf-tool {
  position: relative;
  background: var(--s); border: 1px solid var(--b); border-radius: 20px;
  padding: 28px 26px; scroll-margin-top: 90px;
  transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}
.tf-tool:hover { transform: translateY(-4px); box-shadow: 0 16px 44px rgba(18,18,18,0.08); }
.tf-tool[hidden] { display: none; }
.tf-tool.is-match { border-color: var(--o); box-shadow: 0 14px 40px rgba(217,110,110,0.18); }

/* ── "Neu seit ..."-Störer ──
   Neon-Glas-Pille, per Bild geliefert; Text liegt als eigenes Element
   darüber, damit er in jeder Sprache/Länge zentriert bleibt. Leicht
   verdreht und über die Kartenkante hinaus positioniert, wie ein
   klassischer Störer/Sticker. */
.tf-badge {
  position: absolute; top: -4px; right: 18px;
  transform: rotate(10deg);
  width: 156px; z-index: 2; pointer-events: none;
}
.tf-badge__bg { display: block; width: 100%; height: auto; }
.tf-badge__text {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--f); font-weight: 800; font-size: 0.68rem;
  letter-spacing: 0.02em; text-align: center; color: #365800;
  padding: 0 14px; line-height: 1.15;
}
.tf-tool__head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.tf-tool__name { font-family: var(--fh); font-weight: 700; font-size: 1.5rem; color: var(--t); }

/* ── Tool-Logos ──
   Originalfarben, einheitlich auf 26px optische Höhe. Für Tools ohne
   verfügbares SVG springt automatisch ein Buchstaben-Kreis ein, damit
   die Karten trotzdem gleich aufgebaut bleiben. */
.tf-tool__logo {
  flex-shrink: 0; width: 26px; height: 26px;
  object-fit: contain; display: block;
}
.tf-tool__logo--txt {
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: linear-gradient(140deg, var(--o), var(--p));
  font-family: var(--f); font-size: 0.8rem; font-weight: 800; color: #fff;
  line-height: 1;
}

/* ── Zusatzfilter: Schalter + Beschriftung daneben ──
   Der Schalter selbst ist das Bedienelement, der Text steht außerhalb.
   Farben aus der Marke: Rosé wenn aktiv, keine Fremdfarbe. */
.tf-switchrow { display: flex; align-items: center; gap: 12px; margin: -24px 0 36px; }
/* Tiefeneffekt nach dem Vorbild der Nodes auf der Startseite (.av-node__ring):
   Licht von oben links, Schatten unten rechts. Die Rille ist nach innen
   gedrückt (inset), der Knopf sitzt erhaben darauf. */
.tf-switch {
  position: relative; flex-shrink: 0;
  width: 46px; height: 25px; padding: 0; border: none; border-radius: 999px;
  background: #F1E7E5; cursor: none;
  box-shadow:
    inset 3px 3px 7px rgba(0,0,0,0.13),
    inset -3px -3px 6px rgba(255,255,255,0.95),
    0 1px 0 rgba(255,255,255,0.85);
  transition: background 0.28s ease-out, box-shadow 0.28s ease-out;
}
.tf-switch::after {
  content: ''; position: absolute; top: 3.5px; left: 3.5px;
  width: 18px; height: 18px; border-radius: 50%;
  background: linear-gradient(145deg, #ffffff 0%, #F7EFED 100%);
  box-shadow:
    2px 2px 5px rgba(0,0,0,0.16),
    -2px -2px 4px rgba(255,255,255,0.95),
    inset 0 1px 0 rgba(255,255,255,0.95);
  transition: transform 0.32s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.28s ease-out;
}
.tf-switch:hover::after { box-shadow: 2px 2px 7px rgba(140,40,40,0.22), -2px -2px 4px rgba(255,255,255,0.95), inset 0 1px 0 rgba(255,255,255,0.95); }
.tf-switch[aria-pressed="true"] {
  background: var(--o);
  box-shadow:
    inset 3px 3px 8px rgba(120,35,35,0.34),
    inset -2px -2px 6px rgba(255,255,255,0.30),
    0 1px 0 rgba(255,255,255,0.6);
}
.tf-switch[aria-pressed="true"]::after {
  transform: translateX(21px);
  box-shadow:
    2px 2px 6px rgba(120,35,35,0.32),
    -1px -1px 3px rgba(255,255,255,0.9),
    inset 0 1px 0 rgba(255,255,255,0.98);
}
.tf-switch:active::after { transform: scale(0.94); }
.tf-switch[aria-pressed="true"]:active::after { transform: translateX(21px) scale(0.94); }
.tf-switchrow label {
  font-family: var(--f); font-size: 0.78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--m);
  cursor: none; transition: color 0.2s;
}
.tf-switch[aria-pressed="true"] + label { color: var(--t); }

/* ── Fußnote unter der Tool-Übersicht ── */
.tf-note {
  margin-top: 32px; padding-top: 20px;
  border-top: 1px solid var(--b);
  font-size: 0.85rem; line-height: 1.65; color: var(--m); max-width: 72ch;
}

/* ── NACH OBEN ──
   Werte 1:1 aus der Startseite (#scrollTop). */
#scrollTop {
  position: fixed; left: 28px; bottom: 80px; z-index: 9999;
  width: 36px; height: 36px;
  border: 1.5px solid rgba(18,18,18,0.14);
  border-radius: 50%; background: rgba(253,250,248,0.88);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: var(--t); display: flex; align-items: center; justify-content: center;
  cursor: none; pointer-events: none; opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.3s, transform 0.35s cubic-bezier(0.34,1.56,0.64,1), border-color 0.2s, color 0.2s;
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}
#scrollTop.visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
#scrollTop:hover { border-color: var(--o); color: var(--o); }
#scrollTop svg { width: 15px; height: 15px; }

/* ── ÜBERSCHRIFTEN EIN-/AUSFLIEGEN ──
   Wie auf der Startseite: jede Zeile fährt beim Scrollen seitlich ein und
   beim Verlassen wieder hinaus. Die Zeilen erzeugt unterseiten.js aus <br>. */
.hl-ln {
  display: block;
  transition: opacity 0.82s cubic-bezier(0.22,1,0.36,1), transform 0.82s cubic-bezier(0.22,1,0.36,1);
}

/* ── Abschnitts-Überschrift in H1-Optik ──
   Für Überschriften, die wie eine Hauptüberschrift wirken sollen. Semantisch
   bleiben sie h2 — pro Seite gibt es nur eine h1. */
.lp-hed--h1 {
  font-size: clamp(2.2rem, 4vw, 4.4rem);
  line-height: 1.12; letter-spacing: 0.005em;
}
.lp-hed--rose { color: var(--o); }
.tf-tool__desc { font-size: 0.9rem; line-height: 1.42; color: var(--m); margin-bottom: 20px; }
.tf-tool__meta { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 16px; margin-bottom: 20px; }
.tf-tool__meta div { min-width: 0; }
.tf-tool__meta dt {
  font-family: var(--f); font-size: 0.62rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.11em; color: var(--m); margin-bottom: 3px;
}
.tf-tool__meta dd { font-family: var(--f); font-size: 0.84rem; font-weight: 700; color: var(--t); line-height: 1.35; }
.tf-tool h4 {
  font-family: var(--f); font-size: 0.66rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.11em; color: var(--o);
  margin: 0 0 8px;
}
.tf-tool h4.tf-tool__con { color: var(--m); }
.tf-tool ul { list-style: none; display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.tf-tool li { font-size: 0.9rem; line-height: 1.42; color: var(--m); padding-left: 17px; position: relative; }
.tf-tool__pros li::before { content: '+'; position: absolute; left: 0; color: var(--o); font-weight: 800; }
.tf-tool__cons li::before { content: '–'; position: absolute; left: 0; color: var(--m); font-weight: 800; }
.tf-tool__link {
  font-family: var(--f); font-size: 0.78rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--o);
  text-decoration: none; border-bottom: 1.5px solid transparent; transition: border-color 0.2s;
}
.tf-tool__link:hover { border-bottom-color: var(--o); }
.tf-empty { display: none; font-size: 1rem; color: var(--m); font-style: italic; }
.tf-empty.is-visible { display: block; }

@media (max-width: 768px) {
  .tf-opts { grid-template-columns: 1fr; }
  .tf-tools { grid-template-columns: 1fr; }
  .tf-result__lead, .tf-mail, .tf-skip { padding: 22px 20px; }
  .tf-opt label { padding: 16px 18px; }

}

/* ── FOCUS STATES ── */
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--o); outline-offset: 3px; border-radius: 4px;
}
.lp-hero a:focus-visible, .cta-wrap a:focus-visible { outline-color: #fff; }
::selection { background: rgba(217,110,110,0.22); }

/* ── REDUCED MOTION ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  .fi { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
  .wrap { padding: 0 24px; }
  .nav__inner { padding: 0 24px; }
  .nav { transition: background 0.15s ease; }
  .nav.scrolled {
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
    background: rgba(253,250,248,0.88); box-shadow: 0 1px 0 rgba(0,0,0,0.06);
  }
  .nav__burger { display: flex; }
  .nav__burger.open { display: none; }
  .nav__burger span { transition: none; }
  .nav__logo, .nav__links li { animation: none !important; }
  .nav__burger:focus, .nav__burger:focus-visible { outline: none; }
  .nav__links {
    display: flex; position: fixed; inset: 0; z-index: 200;
    background: var(--bg); flex-direction: column;
    align-items: center; justify-content: center; gap: 40px;
    opacity: 0; pointer-events: none; transition: none;
  }
  .nav__links.open { opacity: 1; pointer-events: all; }
  .nav__links a {
    font-family: var(--f); font-size: clamp(1.6rem,6vw,2.4rem);
    font-weight: 400; color: var(--t) !important; letter-spacing: -0.02em;
  }
  .nav__links a::after { display: none; }

  /* Dropdown im Vollbild-Menü: klappt inline auf, kein Panel, keine Pfeile */
  .nav__has-sub { display: flex; flex-direction: column; align-items: center; gap: 18px; }
  .nav__sub-toggle {
    font-family: var(--f); font-size: clamp(1.6rem,6vw,2.4rem);
    font-weight: 400; color: var(--t) !important; letter-spacing: -0.02em;
    text-transform: none; cursor: auto;
  }
  .nav__sub-toggle::after { display: none; }
  .nav__sub {
    position: static; transform: none; margin: 0; padding: 0;
    min-width: 0; background: none; border: none; box-shadow: none;
    -webkit-backdrop-filter: none; backdrop-filter: none;
    display: none; opacity: 1; visibility: visible; pointer-events: auto;
    flex-direction: column; align-items: center; gap: 14px;
    transition: none;
  }
  .nav__sub::before { display: none; }
  /* Auf Touch gibt es kein Hover — nur .open zählt */
  .nav__has-sub:hover .nav__sub,
  .nav__has-sub:focus-within .nav__sub { display: none; }
  .nav__has-sub.open .nav__sub { display: flex; }
  .nav__sub a {
    font-size: clamp(1.05rem,4.2vw,1.35rem); font-weight: 500;
    padding: 4px 0; color: var(--m) !important; background: none !important;
  }
  .nav__sub a.is-active { color: var(--o) !important; }
  .nav__close {
    display: none; position: fixed; top: 20px; right: 20px; z-index: 201;
    background: none; border: none; cursor: auto; padding: 10px;
    font-family: var(--f); font-size: 1.5rem; font-weight: 300; line-height: 1; color: var(--t);
  }
  .nav__close.open { display: block; }

  .lp-hero { padding: 132px 0 72px; }
  .lp-hero__hed { max-width: none; }
  .lp-hero__meta { gap: 24px; }
  .lp-sec, .faq { padding: 64px 0; }
  #ergebnis:has(.tf-result.is-visible) { padding: 64px 0; }
  .cta-wrap { padding: 80px 24px; }
  .lp-price { padding: 24px 28px; width: 100%; }
  .lp-hero__actions { flex-wrap: wrap; }
  .lp-intro { grid-template-columns: 1fr; gap: 32px; }
  .lp-scenario { padding: 26px 22px; }
  .lp-quote { padding: 28px 24px; }
}