/* ============================================================
   implec — zentrales Design-System (Komponenten-Layer)
   Alle im Design-Manual definierten Elemente sind hier als
   wiederverwendbare Klassen umgesetzt. HTML-Seiten enthalten
   nur noch Struktur + Text. Design-Änderungen = hier, einmal.
   ============================================================ */

/* ——— Hausschrift: Radikal (Nootype) ——— */
@font-face { font-family:'Radikal'; src:url('assets/fonts/radikal-light.woff2') format('woff2'),url('assets/fonts/radikal-light.woff') format('woff'); font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:'Radikal'; src:url('assets/fonts/radikal-regular.woff2') format('woff2'),url('assets/fonts/radikal-regular.woff') format('woff'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Radikal'; src:url('assets/fonts/radikal-bold.woff2') format('woff2'),url('assets/fonts/radikal-bold.woff') format('woff'); font-weight:500 700; font-style:normal; font-display:swap; }

/* ——— Tokens ——— */
:root {
  /* Farben */
  --purple:#3C005F; --purple-deep:#25003B; --purple-soft:#51187a;
  --red:#E6002D; --red-deep:#B80024;
  --ink:#2A0040; --ink-soft:#6e6e73; --ink-faint:#b0a8bb;
  --paper:#fbfbfd; --white:#ffffff; --cream:#f5f5f7; --panel:#f3eef7;
  --line:rgba(60,0,95,0.08); --line-2:rgba(0,0,0,0.08); --line-3:rgba(60,0,95,0.1);
  --pink:#ff8da3; --gold:#FBBC05;
  /* Schrift */
  --sans:"Radikal","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  /* Radius / Maße */
  --r-card:24px; --r-card-sm:16px; --r-pill:980px; --r-tag:6px;
  --maxw:1280px;
  /* Akzent (pro Seite überschreibbar) */
  --accent:var(--purple);
  --accent-cta:var(--red);
}

*{ box-sizing:border-box; }
/* overflow-x:clip kappt das aus-dem-Viewport geschobene mobile Menü-Panel
   (position:fixed, translateX(100%)), ohne einen Scroll-Container zu erzeugen
   — position:sticky in der Nav bleibt dadurch funktionsfähig. */
html{ scroll-behavior:smooth; scroll-padding-top:110px; overflow-x:clip; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:15px; line-height:1.5;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }

/* ============================================================
   LAYOUT
   ============================================================ */
.wrap{ max-width:var(--maxw); margin:0 auto; }
.wrap--1500{ max-width:1500px; margin:0 auto; }
.wrap--1200{ max-width:1200px; margin:0 auto; }
.wrap--1100{ max-width:1100px; margin:0 auto; }

.section{ padding:88px 22px; }
.section--lg{ padding:120px 22px; }
.section--flush-top{ padding-top:0; }
.section--white{ background:var(--white); }
.section--cream{ background:var(--cream); }
.section--panel{ background:var(--panel); }
.section--dark{ background:linear-gradient(165deg,#2A0040 0%,#14001f 100%); color:#fff; }
.section--dark-flat{ background:var(--purple-deep); color:#fff; }
.center{ text-align:center; }

.section-head{ text-align:center; max-width:720px; margin:0 auto 48px; }
.section-head .lead{ margin-left:auto; margin-right:auto; }

/* Grids */
.grid{ display:grid; gap:14px; }
.grid--2{ grid-template-columns:1fr 1fr; }
.grid--3{ grid-template-columns:repeat(3,1fr); }
.grid--4{ grid-template-columns:repeat(4,1fr); }
.gap-24{ gap:24px; }

/* ============================================================
   TYPOGRAFIE
   ============================================================ */
/* Kicker/Eyebrow: Radikal, gemischte Schreibung, gut lesbar (Vorschlag 3 „dezent gemischt").
   Früher Mono/UPPERCASE/0.18em — auf Wunsch zurück auf lesbar. */
.eyebrow{ font-family:var(--sans); font-size:13px; font-weight:600; color:var(--accent-cta); margin:0 0 12px; letter-spacing:0.06em; text-transform:uppercase; }
.eyebrow--accent{ color:var(--accent); }
.eyebrow--pink{ color:var(--pink); }
/* Metadaten (Datum/Lesedauer auf Karten): dezent gedämpftes Grau statt Signalrot */
.eyebrow--meta{ color:var(--ink-soft); font-weight:500; }
.eyebrow--mono{ font-family:var(--sans); font-size:12px; font-weight:600; letter-spacing:0; text-transform:none; }
/* A11y: rotes Eyebrow auf Cream nutzt --red-deep (6,3:1 statt 4,38:1); Farb-Modifier ausgenommen */
.section--cream .eyebrow:not(.eyebrow--meta):not(.eyebrow--accent):not(.eyebrow--pink){ color:var(--red-deep); }

.h1{ font-size:clamp(40px,6.5vw,84px); font-weight:600; line-height:1.02; letter-spacing:-0.025em; margin:0 0 16px; }
/* Display-Hero (zentriert, groß) — für Pillar-/Produkt-Heros mit Akzent-Wort */
.h1--xl{ font-size:clamp(44px,9vw,104px); line-height:1.0; letter-spacing:-0.04em; max-width:16ch; margin-left:auto; margin-right:auto; text-wrap:balance; }
.subhero--left .h1--xl{ margin-left:0; margin-right:0; }
/* Akzent-Wort: Purple→Rot→Purple Verlauf, in den Text geclippt */
.accent{ background:linear-gradient(90deg,var(--purple) 0%,var(--red) 50%,var(--purple) 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }
.h2{ font-size:clamp(30px,5vw,48px); font-weight:600; line-height:1.05; letter-spacing:-0.025em; margin:0 0 14px; }
.h2--xl{ font-size:clamp(34px,6vw,72px); }
.h2--dark{ font-weight:700; letter-spacing:-0.03em; }
.h3{ font-size:21px; font-weight:600; line-height:1.25; letter-spacing:-0.015em; margin:0; }
.lead{ font-size:clamp(17px,2vw,21px); color:var(--ink-soft); letter-spacing:-0.01em; margin:0; }
.muted{ color:var(--ink-soft); }
.text{ font-size:15px; color:var(--ink-soft); line-height:1.5; }

/* ============================================================
   BUTTONS / LINKS
   ============================================================ */
.btn{ display:inline-flex; align-items:center; gap:10px; padding:14px 26px; border-radius:var(--r-pill);
  font-weight:600; font-size:15px; text-decoration:none; cursor:pointer; border:1px solid transparent;
  transition:background .18s ease, transform .18s ease, box-shadow .18s ease; }
.btn--sm{ padding:10px 22px; font-size:14px; }
.btn--lg{ padding:15px 32px; font-size:17px; }
.btn--block{ width:100%; justify-content:center; }
.btn--primary{ background:var(--red); color:#fff; }
.btn--primary:hover{ background:var(--red-deep); transform:translateY(-1px); }
.btn--purple{ background:var(--accent); color:#fff; }
.btn--purple:hover{ background:var(--purple-soft); transform:translateY(-1px); }
/* Ghost-Button: hell-tauglich (Standard auf creme/weißen Flächen) */
.btn--ghost{ border-color:var(--rule,rgba(60,0,95,0.18)); color:var(--ink); background:transparent; }
.btn--ghost:hover{ background:rgba(60,0,95,0.05); border-color:rgba(60,0,95,0.3); }
/* Auf dunklen Flächen (dunkler Hero/CTA) weiß-transparent */
.on-dark .btn--ghost,.hero .btn--ghost,.section--dark .btn--ghost,.wp-panel--dark .btn--ghost{ border-color:rgba(255,255,255,0.4); color:#fff; background:rgba(255,255,255,0.12); backdrop-filter:blur(8px); }
.on-dark .btn--ghost:hover,.hero .btn--ghost:hover,.section--dark .btn--ghost:hover,.wp-panel--dark .btn--ghost:hover{ background:rgba(255,255,255,0.2); }
.btn .arrow::after,.arr::after{ content:"→"; }

.link{ text-decoration:none; color:var(--accent); font-size:14px; font-weight:500; transition:opacity .15s ease; }
.link:hover{ opacity:.7; }
.link::after{ content:" ›"; }
.link--red{ color:var(--red); }
.link--soft{ color:var(--ink-soft); }

/* ============================================================
   EYEBROW / TAGS / CHIPS
   ============================================================ */
.tag{ display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:var(--r-pill);
  background:rgba(60,0,95,0.08); color:var(--purple); font-family:var(--mono); font-size:12.5px; font-weight:500;
  letter-spacing:0.04em; text-transform:uppercase; }
.tag--red{ background:rgba(230,0,45,0.10); color:var(--red); }
.chip{ padding:6px 14px; border-radius:var(--r-pill); background:var(--panel); color:var(--accent); font-size:13px; font-weight:500; }
.chip--ghost{ padding:5px 12px; background:rgba(255,255,255,0.08); color:#fff; font-size:11.5px; }
.chip--city{ padding:5px 12px; background:#f0edf3; color:var(--purple); font-size:11.5px; font-weight:500; }

/* Pills-Filter */
.pills{ display:inline-flex; gap:6px; padding:6px; background:var(--cream); border-radius:var(--r-pill); flex-wrap:wrap; }
.pills--bordered{ background:#fff; border:1px solid var(--line); }
.pill{ appearance:none; -webkit-appearance:none; border:0; background:transparent; cursor:pointer; font-family:var(--sans); line-height:1.5; padding:7px 16px; border-radius:var(--r-pill); color:var(--ink); font-size:13px; font-weight:500; }
.pill--active{ background:var(--ink); color:#fff; }
.pill--active-accent{ background:var(--accent); color:#fff; }

/* ============================================================
   FOTO-PLATZHALTER  (.ph — bis echte Bilder vorliegen)
   ============================================================ */
.ph{ background:repeating-linear-gradient(135deg,rgba(60,0,95,0.06) 0 2px,transparent 2px 14px),linear-gradient(135deg,rgba(60,0,95,0.16),rgba(230,0,45,0.10)); background-color:#ece6f1; }
.ph.dark{ background:repeating-linear-gradient(135deg,rgba(255,255,255,0.06) 0 2px,transparent 2px 14px),linear-gradient(135deg,rgba(230,0,45,0.30),rgba(60,0,95,0.55)); background-color:#1a0030; }
.ph.cover{ position:absolute; inset:0; width:100%; height:100%; }
/* Echte Bilder: object-fit-cover als Fläche / Hintergrund */
.img-cover{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.media{ width:100%; height:100%; object-fit:cover; display:block; }

/* ============================================================
   MOTION
   ============================================================ */
@keyframes kenburns{ 0%{transform:scale(1) translate(0,0);} 100%{transform:scale(1.12) translate(-1.5%,-1.5%);} }
.kenburns{ animation:kenburns 18s ease-out infinite alternate; }
@keyframes pulsering{ 0%{box-shadow:0 0 0 0 rgba(230,0,45,0.45);} 70%{box-shadow:0 0 0 16px rgba(230,0,45,0);} 100%{box-shadow:0 0 0 0 rgba(230,0,45,0);} }
.playring{ animation:pulsering 2.4s ease-out infinite; }
.lift{ transition:transform .2s ease, box-shadow .2s ease; }
.lift:hover{ transform:translateY(-2px); box-shadow:0 18px 40px rgba(60,0,95,0.10); }

/* ============================================================
   NAV  (Haupt-Website)
   ============================================================ */
.sticky{ position:sticky; top:0; z-index:40; }
.utility{ background:var(--ink); color:rgba(255,255,255,0.8); font-size:12.5px; padding:7px 40px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; }
.utility__group{ display:flex; gap:22px; flex-wrap:wrap; align-items:center; }
.utility b{ color:#fff; }
.utility .gold{ color:var(--gold); }
.utility__link{ display:inline-flex; align-items:center; gap:6px; color:inherit; text-decoration:none; transition:color .15s ease; }
.utility__link:hover{ color:#fff; }
.utility__link .icon{ flex:none; }

.nav{ background:rgba(251,251,253,0.92); backdrop-filter:saturate(180%) blur(20px); -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--line); height:62px; display:flex; align-items:center; justify-content:space-between; padding:0 40px; }
.nav__logo{ height:24px; }
.nav__links{ display:flex; gap:24px; list-style:none; margin:0; padding:0; font-size:14.5px; font-weight:400; align-items:center; height:62px; }
.nav__links > li{ color:var(--ink); cursor:pointer; }
.nav__actions{ display:flex; align-items:center; gap:16px; }

/* Dropdown-Trigger (Lösungen / Services / Insights / Über uns) */
.has-drop{ height:100%; display:flex; align-items:center; position:static; }
.nav-trigger{ display:flex; align-items:center; gap:6px; height:62px; margin:0; padding:0;
  background:none; border:0; border-top:2px solid transparent; border-bottom:2px solid transparent; cursor:pointer;
  font-family:var(--sans); font-size:14.5px; font-weight:400; color:var(--ink); }
.nav-trigger .caret{ display:none; }
.has-drop:hover > .nav-trigger,
.has-drop.open > .nav-trigger{ color:var(--purple); border-bottom-color:var(--red); font-weight:400; }
.has-drop:hover > .nav-trigger .caret,
.has-drop.open > .nav-trigger .caret{ transform:rotate(180deg); }

/* Dropdown-Sheet (volle Breite, alle Links sofort sichtbar — kein zweites Hover-Level) */
.mega{ position:absolute; left:0; right:0; top:100%; background:#fff; border-bottom:1px solid var(--line);
  box-shadow:0 40px 80px rgba(60,0,95,0.12); padding:36px 40px 28px;
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .18s ease, transform .18s ease, visibility .18s; transition-delay:140ms; z-index:50; }
.has-drop:hover > .mega, .has-drop.open > .mega{ opacity:1; visibility:visible; transform:translateY(0); transition-delay:0s; }
.mega > .wrap{ max-width:var(--maxw); margin:0 auto; }
.mega__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:36px 44px; }
.mega-colgroup + .mega-colgroup{ margin-top:22px; }
.mega-col__title{ margin-bottom:12px; padding-bottom:9px; border-bottom:1px solid rgba(60,0,95,0.09); font-family:var(--sans); font-size:12px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:var(--purple-deep); }
.mega-col__title--flat{ margin:0; padding:0; border:0; }
.mega-badge{ display:inline-block; margin-left:6px; padding:2px 9px; border-radius:var(--r-pill);
  font-family:var(--sans); font-size:11px; font-weight:500; letter-spacing:0; text-transform:none; vertical-align:middle; }
.mega-badge--red{ background:rgba(230,0,45,0.12); color:var(--red); }
.mega-badge--purple{ background:rgba(60,0,95,0.10); color:var(--purple); }
.mega-link{ display:block; padding:9px 10px; border-radius:11px; text-decoration:none; color:var(--ink); margin-bottom:1px; transition:background .15s ease; }
.mega-link:hover{ background:rgba(60,0,95,0.07); }
.mega-link b{ font-size:15px; font-weight:600; display:block; line-height:1.25; }
.mega-link span{ font-size:12px; color:var(--ink-soft); }

/* Lösungen — KI-Leiste (abgesetzter Hintergrund) */
.mega__ki{ margin-top:24px; padding:18px 22px; background:var(--panel); border-radius:16px; }
.mega__ki-head{ display:flex; align-items:center; gap:8px; margin-bottom:14px; }
.mega__ki-cards{ display:grid; grid-template-columns:repeat(3,1fr) auto; gap:12px; align-items:stretch; }
.ki-card{ display:block; padding:12px 14px; background:#fff; border:1px solid var(--line); border-radius:12px; text-decoration:none; color:var(--ink); transition:box-shadow .2s ease, transform .2s ease; }
.ki-card:hover{ box-shadow:0 12px 30px rgba(60,0,95,0.10); transform:translateY(-2px); }
.ki-card b{ display:block; font-size:14.5px; font-weight:600; } .ki-card span{ font-size:12px; color:var(--ink-soft); }
.mega__ki-cards .btn{ align-self:center; white-space:nowrap; }

/* Lösungen — Wissen-&-Tools-Leiste (Soft-Panel) */
.mega__bar{ margin-top:20px; padding:16px 20px; background:var(--panel); border-radius:16px; display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.mega__bar-label{ font-family:var(--sans); font-size:13px; font-weight:600; letter-spacing:0; text-transform:none; color:var(--red); margin-right:6px; }
/* .nav__links-Präfix: schlägt .nav__links > li a (color:inherit) */
.nav__links .mega__bar a{ display:inline-flex; align-items:baseline; gap:6px; color:var(--ink); text-decoration:none; font-size:13px; font-weight:600; padding:8px 14px; background:#fff; border:1px solid var(--line); border-radius:var(--r-pill); box-shadow:0 1px 2px rgba(60,0,95,0.04); transition:border-color .15s ease, color .15s ease; }
.nav__links .mega__bar a:hover{ border-color:var(--purple); color:var(--purple); }
.mega__bar a span{ color:var(--ink-soft); font-size:11.5px; font-weight:400; }
.mega__bar .sep{ display:none; }

/* Services-Dropdown (2 Spalten + CTA) */
.mega__services{ display:grid; grid-template-columns:1.1fr 1.1fr 1fr; gap:40px; align-items:start; }
.mega__cta{ background:var(--purple-deep); color:var(--cream); border-radius:16px; padding:24px; }
.mega__cta-eyebrow{ display:block; font-family:var(--sans); font-size:12px; font-weight:500; letter-spacing:0.06em; text-transform:uppercase; color:rgba(246,242,236,0.65); margin-bottom:10px; }
.mega__cta h3{ font-size:22px; font-weight:700; letter-spacing:-0.02em; margin:0 0 10px; color:#fff; }
.mega__cta p{ font-size:13px; color:rgba(255,255,255,0.78); margin:0 0 18px; }

/* Insights-Dropdown (Links + Featured Card) */
.mega__insights{ display:grid; grid-template-columns:1fr 0.8fr 1.3fr; gap:40px; align-items:start; }
.mega-feature{ display:grid; grid-template-columns:128px 1fr; gap:16px; text-decoration:none; color:var(--ink); border:1px solid var(--line); border-radius:16px; overflow:hidden; transition:box-shadow .2s ease; }
.mega-feature:hover{ box-shadow:0 16px 40px rgba(60,0,95,0.12); }
.mega-feature__media{ aspect-ratio:1/1; }
.mega-feature__media img{ width:100%; height:100%; object-fit:cover; }
.mega-feature__body{ padding:16px 18px 16px 0; display:flex; flex-direction:column; gap:6px; }
.mega-feature__eyebrow{ font-family:var(--sans); font-size:12px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color:var(--purple); }
.mega-feature__body b{ font-size:15.5px; font-weight:600; line-height:1.3; }
.mega-feature__date{ font-family:var(--mono); font-size:11px; color:var(--ink-soft); margin-top:auto; }
.mega-feature__more{ font-size:13px; font-weight:600; color:var(--red); margin-top:6px; }

/* Über-uns-Dropdown (2 Spalten + Kennzahlen) */
.mega__about{ display:grid; grid-template-columns:1fr 1fr 0.9fr; gap:40px; align-items:start; }
.mega__stats{ display:flex; flex-direction:column; gap:16px; padding-left:32px; border-left:1px solid var(--line); }
.mega__stat b{ display:block; font-size:26px; font-weight:700; letter-spacing:-0.02em; color:var(--purple); line-height:1; }
.mega__stat span{ font-size:12px; color:var(--ink-soft); }

.burger{ display:none; font-size:30px; line-height:1; width:44px; height:44px; align-items:center; justify-content:center; margin-right:-10px; cursor:pointer; color:var(--ink); background:none; border:0; padding:0; }
/* Mobiler Übersichts-Link im Akkordeon — auf Desktop ausgeblendet (Hover-Mega + Klick-Navigation) */
.mega__overview{ display:none; }

/* ============================================================
   HERO  (fullbleed)
   ============================================================ */
.hero{ position:relative; height:92vh; min-height:780px; background:#0a0410; overflow:hidden; color:#fff; }
.hero--sister{ height:90vh; min-height:760px; background:#1a0030; }
.hero--half{ height:56vh; min-height:460px; }
.hero--third{ height:38vh; min-height:320px; }
.hero__scrim{ position:absolute; inset:0; background:linear-gradient(180deg,rgba(10,4,16,0.4) 0%,rgba(10,4,16,0) 30%,rgba(10,4,16,0) 50%,rgba(10,4,16,0.85) 100%); }
.hero--sister .hero__scrim{ background:linear-gradient(180deg,rgba(26,0,48,0.55) 0%,rgba(26,0,48,0.1) 30%,rgba(26,0,48,0.2) 55%,rgba(26,0,48,0.9) 100%); }
.hero__glow{ position:absolute; top:-10%; right:-5%; width:520px; height:520px; border-radius:50%; background:radial-gradient(circle,rgba(230,0,45,0.35),transparent 70%); filter:blur(20px); }
.hero__content{ position:absolute; left:5%; bottom:9%; max-width:760px; }
.hero__kicker{ font-size:21px; font-weight:500; color:#fff; margin:0 0 18px; letter-spacing:-0.01em; }
.hero__kicker--mono{ font-size:14px; font-weight:600; color:var(--red); letter-spacing:0.04em; text-transform:uppercase; }
.hero__title{ font-size:clamp(40px,8vw,84px); font-weight:600; line-height:1.02; letter-spacing:-0.03em; margin:0 0 14px; }
.hero__title--gradient{ background:linear-gradient(180deg,#fff 0%,#c8b8d6 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.hero__accent{ -webkit-text-fill-color:var(--red); color:var(--red); }
/* Tieferes Overlay für Bild-Heros (hero-image): links + unten fast deckend,
   damit weißer Text auf beliebigen Motiven lesbar bleibt. */
.hero__scrim--deep{ background:
  linear-gradient(90deg, rgba(10,4,16,0.88) 0%, rgba(10,4,16,0.55) 42%, rgba(10,4,16,0.12) 78%, rgba(10,4,16,0) 100%),
  linear-gradient(180deg, rgba(10,4,16,0.45) 0%, rgba(10,4,16,0.1) 30%, rgba(10,4,16,0.55) 72%, rgba(10,4,16,0.9) 100%); }
/* Leichter LILA-Verlauf für HELLE Illustrations-Heros (Creme-Hintergrund):
   nur so viel Abdunklung links/unten (in Brand-Lila statt Schwarz), dass der weiße
   Titel lesbar bleibt — die Skyline rechts bleibt hell. Kein schwerer Schwarz-Schleier. */
.hero__scrim--light{ background:
  linear-gradient(90deg, rgba(37,0,59,0.84) 0%, rgba(37,0,59,0.62) 32%, rgba(37,0,59,0.28) 58%, rgba(37,0,59,0.10) 78%, rgba(37,0,59,0) 100%),
  linear-gradient(180deg, rgba(37,0,59,0.16) 0%, rgba(37,0,59,0) 50%, rgba(37,0,59,0.20) 80%, rgba(37,0,59,0.44) 100%); }
.hero__sub{ font-size:clamp(18px,2.2vw,24px); font-weight:400; color:rgba(255,255,255,0.86); margin:0; max-width:600px; line-height:1.25; letter-spacing:-0.01em; }
.hero__trust{ display:flex; flex-wrap:wrap; gap:8px 18px; list-style:none; padding:0; margin:20px 0 0; }
.hero__trust li{ font-size:14px; font-weight:500; color:rgba(255,255,255,0.88); display:flex; align-items:center; gap:7px; }
.hero__actions{ display:flex; gap:12px; margin-top:30px; flex-wrap:wrap; }
.hero__top{ position:absolute; top:32px; left:50%; transform:translateX(-50%); font-size:13px; font-weight:500; color:rgba(255,255,255,0.5); letter-spacing:0.02em; text-transform:uppercase; }
.showreel{ position:absolute; top:8%; right:4%; display:flex; align-items:center; gap:12px; padding:8px 18px 8px 8px;
  background:rgba(255,255,255,0.12); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border-radius:var(--r-pill); border:1px solid rgba(255,255,255,0.18); cursor:pointer; color:#fff; font-size:14px; font-weight:500; }
.showreel__play{ width:34px; height:34px; border-radius:50%; background:var(--red); display:flex; align-items:center; justify-content:center; font-size:13px; }
.price-pill{ position:absolute; right:4%; bottom:9%; display:flex; align-items:center; gap:6px; padding:6px 6px 6px 22px;
  background:rgba(40,28,56,0.75); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); border-radius:var(--r-pill); border:1px solid rgba(255,255,255,0.08); color:#fff; font-size:15px; }
.price-pill a{ padding:10px 24px; background:var(--red); color:#fff; border-radius:var(--r-pill); text-decoration:none; font-weight:500; }

/* ============================================================
   TRUST-BAR
   ============================================================ */
.trust{ padding:28px 22px; background:#fff; border-bottom:1px solid rgba(60,0,95,0.06); }
.trust__inner{ max-width:var(--maxw); margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap; }
.trust__points{ display:flex; gap:28px; flex-wrap:wrap; font-size:14.5px; color:var(--ink-soft); }
.trust__logos{ display:flex; gap:30px; align-items:center; font-weight:700; font-size:18px; color:rgba(37,0,59,0.6); letter-spacing:-0.01em; }
.stars{ color:var(--gold); letter-spacing:1px; }

/* ============================================================
   BENTO / TILES
   ============================================================ */
/* Gleiches 3er-Raster wie .grid--3 darunter (zwei 14px-Fugen), damit die rechte
   Spalte exakt mit der dritten Kachel der Folgereihe fluchtet. */
.bento{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.bento > .tile--big{ grid-column:span 2; }
.bento__col{ display:grid; grid-template-rows:1fr 1fr; gap:14px; }
.tile{ position:relative; overflow:hidden; border-radius:var(--r-card); padding:36px; background:#fff; border:1px solid rgba(0,0,0,0.06); min-height:280px; }
.tile--big{ padding:56px 48px; min-height:580px; }
.tile--md{ min-height:280px; }
.tile--dark{ background:#2A0040; color:#fff; border:none; }
.tile--purple-grad{ background:linear-gradient(135deg,#3C005F 0%,#25003B 100%); color:#fff; border:none; }
.tile--red-grad{ background:linear-gradient(135deg,#E6002D 0%,#B80024 100%); color:#fff; border:none; }
.tile--cream{ background:var(--cream); border:none; }
.tile__rel{ position:relative; }
.tile__eyebrow{ font-size:13px; font-weight:600; margin:0; letter-spacing:0.06em; text-transform:uppercase; }
.tile__title{ font-weight:600; line-height:1.05; letter-spacing:-0.02em; margin:8px 0 14px; font-size:32px; }
.tile__title--xl{ font-size:48px; max-width:560px; }
.tile__title--lg{ font-size:44px; }
.tile__text{ font-size:15px; margin:0; }
.tile__link{ position:absolute; bottom:32px; left:36px; text-decoration:none; font-size:15px; }
.tile__links{ display:flex; gap:20px; margin-top:28px; font-size:17px; }
.tile__links a{ text-decoration:none; }
.on-dark, .on-dark .tile__text{ color:rgba(255,255,255,0.85); }
.t-pink{ color:var(--pink); } .t-purple{ color:var(--purple); } .t-red{ color:var(--red); }
/* Uptime-Visual */
.uptime{ display:flex; gap:10px; align-items:flex-end; margin-top:28px; }
.uptime__bar{ width:28px; border-radius:8px; background:linear-gradient(180deg,rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.2) 100%); }
.uptime__num{ font-size:38px; font-weight:600; letter-spacing:-0.025em; line-height:1; }
.uptime__cap{ font-size:13px; color:rgba(255,255,255,0.6); margin-top:4px; }

/* Bildzone in Kacheln: Foto in eigener Zone bei voller Deckkraft, Verlaufs-Naht
   zum Text — Text und Bild überlappen nie (UniFi-Prinzip wie beim Expand-Grid). */
.tile__media{ position:absolute; top:0; right:0; bottom:0; width:60%; }
.tile__media img{ width:100%; height:100%; object-fit:cover; display:block; }
.tile__media::before{ content:""; position:absolute; top:0; bottom:0; left:0; width:120px; z-index:1;
  background:linear-gradient(90deg,#fff 0%,rgba(255,255,255,0) 100%); }
.tile--dark .tile__media::before{ background:linear-gradient(90deg,#2A0040 0%,rgba(42,0,64,0) 100%); }
.tile__media--narrow{ width:58%; }
.tile--cream .tile__media::before{ background:linear-gradient(90deg,var(--cream) 0%,rgba(245,245,247,0) 100%); }
/* Textzone neben der seitlichen Bildzone */
.tile--big .tile__rel{ max-width:40%; }
.tile__rel--narrow{ max-width:44%; }
/* Link im Textfluss (statt absolut), wenn eine Bildzone den unteren Rand belegt */
.tile__link--inline{ position:static; display:inline-block; margin-top:16px; }

/* ============================================================
   DISZIPLINEN (dunkle Karten)
   ============================================================ */
.disc-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.disc{ background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.12); border-radius:20px; padding:34px 32px; display:flex; flex-direction:column; min-height:280px; }
.disc__head{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:22px; }
.disc__icon{ width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center; background:rgba(60,0,95,0.55); color:var(--cream); }
.disc__icon--red{ background:rgba(230,0,45,0.22); color:#fff; }
.disc__num{ font-size:13px; font-weight:700; color:rgba(255,255,255,0.4); }
.disc h3{ font-size:26px; font-weight:700; letter-spacing:-0.02em; color:#fff; margin:0 0 10px; }
.disc p{ font-size:15px; color:rgba(255,255,255,0.68); line-height:1.5; margin:0 0 24px; }
.disc__tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:auto; }

/* ============================================================
   STATS
   ============================================================ */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); max-width:1100px; margin:0 auto; border-top:1px solid var(--line-2); border-bottom:1px solid var(--line-2); }
.stat{ padding:48px 24px; border-right:1px solid var(--line-2); text-align:center; }
.stat:last-child{ border-right:none; }
.stat__num{ font-size:clamp(48px,8vw,88px); font-weight:600; letter-spacing:-0.04em; line-height:1; color:var(--ink); }
.stat__label{ font-size:15px; color:var(--ink-soft); margin-top:14px; }
/* Spec-Band (Schwester-Seiten, kleiner, Akzentfarbe) */
.spec{ max-width:1100px; margin:0 auto; display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); border-top:1px solid var(--line-3); border-bottom:1px solid var(--line-3); }
.spec__item{ padding:38px 22px; border-right:1px solid var(--line-3); text-align:center; }
.spec__item:last-child{ border-right:none; }
.spec__num{ font-size:52px; font-weight:700; letter-spacing:-0.03em; line-height:1; color:var(--accent); }
.spec__label{ font-size:13.5px; color:var(--ink-soft); margin-top:10px; }

/* ============================================================
   KARTEN (Cases / Posts / Use-Cases)
   ============================================================ */
.card{ background:#fff; border-radius:var(--r-card); overflow:hidden; border:1px solid rgba(0,0,0,0.06); }
/* Ganze Karte als Link (verbindlich, s. CLAUDE.md): <a class="card"> braucht kein Inline-Style. */
a.card{ text-decoration:none; color:inherit; }
.card--soft{ background:var(--paper); }
.card--panel{ background:var(--panel); border:none; }
.card__media{ position:relative; aspect-ratio:4/3; }
.card__media--wide{ aspect-ratio:16/10; }
/* Iso-Illustrations-Medien: weisse Buehne, Illustration zentriert (statt Foto-Cover) */
.card__media--illu{ display:flex; align-items:center; justify-content:center; background:#fff; padding:28px 24px; }
.card__media--illu .iso{ width:100%; max-width:210px; height:auto; overflow:visible; display:block; }
/* Gezeichnete Spot-Illustration (freigestelltes PNG) auf derselben weissen Buehne */
.card__media--illu picture{ display:flex; align-items:center; justify-content:center; width:100%; height:100%; }
.card__illu-img{ width:100%; height:100%; max-width:300px; object-fit:contain; display:block; }
.card__illu-ring{ position:absolute; top:18px; right:18px; width:22px; height:22px; border-radius:50%; border:2px dotted var(--purple-soft); opacity:.5; }
/* Checklisten-Karten: Illustration rechts neben Text, kein Hintergrund */
.card--ill-right .card__ill{ display:flex; align-items:center; justify-content:center; flex-shrink:0; width:110px; padding:12px 16px 12px 0; }
.card--ill-right .card__ill img{ max-height:88px; width:auto; object-fit:contain; display:block; }
.feed-grid > .card.card--ill-right{ flex-direction:row; align-items:center; height:auto; }
.card--ill-right .card__body{ flex:1; min-width:0; }
.card__badge{ position:absolute; bottom:16px; left:16px; padding:5px 12px; border-radius:var(--r-pill); background:rgba(40,4,64,0.7); color:#fff; font-family:var(--mono); font-size:12.5px; font-weight:500; letter-spacing:0.04em; text-transform:uppercase; }
.card__badge--accent{ background:rgba(60,0,95,0.85); }
.card__badge--light{ background:rgba(255,255,255,0.95); color:var(--ink); }
.card__body{ padding:24px 26px 28px; }
.card__foot{ display:flex; justify-content:space-between; align-items:center; padding-top:16px; margin-top:18px; border-top:1px solid var(--line-2); }
.card__stat{ font-size:18px; font-weight:600; color:var(--red); letter-spacing:-0.02em; }
/* content-feed („Mehr zum Thema") — alle Kacheln exakt gleich groß:
   einheitliches Bild-Seitenverhältnis, gleich hohe Reihen, Karte füllt die Zelle. */
.feed-grid{ grid-auto-rows:1fr; }
.feed-grid > .card{ display:flex; flex-direction:column; height:100%; }
.feed-grid .card__media, .feed-grid .card__media--wide{ aspect-ratio:16/10; }
.feed-grid .card__body{ display:flex; flex-direction:column; flex:1 1 auto; }
.feed-grid .card__foot{ margin-top:auto; }

/* ============================================================
   PREIS-PAKETE
   ============================================================ */
.plans{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; max-width:1200px; margin:0 auto; }
.plan{ background:var(--paper); color:var(--ink); border-radius:var(--r-card); padding:40px 32px; border:1px solid var(--line-2); position:relative; }
.plan--featured{ background:#2A0040; color:#fff; border:none; }
.plan__badge{ position:absolute; top:24px; right:24px; font-size:11px; font-weight:600; color:var(--pink); text-transform:uppercase; letter-spacing:0.08em; }
.plan__name{ font-size:14px; font-weight:600; letter-spacing:-0.01em; }
.plan__price{ font-size:64px; font-weight:600; letter-spacing:-0.03em; margin-top:12px; line-height:1; }
.plan__per{ font-size:13px; color:var(--ink-soft); margin-top:6px; }
.plan--featured .plan__per{ color:rgba(255,255,255,0.6); }
.plan__list{ list-style:none; padding:0; margin:32px 0 0; display:grid; gap:12px; font-size:15px; }
.plan__list li{ display:flex; gap:10px; }
.plan__list li::before{ content:"✓"; color:var(--purple); }
.plan--featured .plan__list li::before{ color:var(--red); }
.plan{ display:flex; flex-direction:column; transition:box-shadow .2s ease, transform .2s ease; }
.plan:hover{ box-shadow:0 16px 48px rgba(60,0,95,0.12); transform:translateY(-2px); }
.plan__name strong{ font-weight:700; }
.plan__note{ font-size:13px; color:var(--ink-soft); margin-top:10px; }
.plan--featured .plan__note{ color:rgba(255,255,255,0.6); }
.plan__list{ flex:1 0 auto; align-content:start; }
.plan__cta{ margin-top:32px; }

/* — Pricing: Kalkulator-Karte — */
.pricing-calc{ max-width:1200px; margin:14px auto 0; background:var(--white); border:1px solid var(--line-2); border-radius:var(--r-card); padding:32px 28px; }
.pricing-calc__inner{ max-width:640px; margin:0 auto; display:grid; gap:16px; }
.pricing-calc__title{ font-size:clamp(19px,2.2vw,23px); font-weight:600; letter-spacing:-0.02em; margin:0 0 6px; }
.pricing-calc__row{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:8px 16px; padding:12px 0; border-bottom:1px solid var(--line-2); }
.pricing-calc__row:last-child{ border-bottom:none; }
.pricing-calc__plan{ font-size:15px; }
.pricing-calc__plan strong{ font-weight:700; }
.pricing-calc__result{ font-size:17px; font-weight:600; }
.pricing-calc__note{ font-size:13px; color:var(--ink-soft); margin:0; }

/* — Pricing: implec-Shield-Band (Premium-Security, dunkel) — */
.plan-shield{ max-width:1200px; margin:14px auto 0; background:var(--purple-deep); color:#fff; border-radius:var(--r-card); padding:56px 48px; display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
.plan-shield .plan__per{ color:rgba(255,255,255,0.6); }
.plan-shield__sub{ font-size:17px; color:rgba(255,255,255,0.75); margin:12px 0 24px; }
.plan-shield__list{ grid-template-columns:1fr 1fr; column-gap:32px; flex:none; }
.plan-shield .plan__list li::before{ color:var(--red); }
.plan-shield .btn--ghost{ border-color:rgba(255,255,255,0.45); color:#fff; }
.plan-shield .btn--ghost:hover{ background:rgba(255,255,255,0.08); border-color:rgba(255,255,255,0.7); }
@media (max-width:760px){
  .plan-shield{ grid-template-columns:1fr; padding:40px 24px; }
  .plan-shield__list{ grid-template-columns:1fr; }
}

/* ============================================================
   STANDORTE / GEO
   ============================================================ */
.geo-grid{ display:grid; grid-template-columns:1.5fr 1fr; gap:14px; }
.map{ border-radius:var(--r-card); overflow:hidden; position:relative; aspect-ratio:4/3; border:1px solid rgba(0,0,0,0.06); min-height:300px; }
.map__label{ position:absolute; top:18px; left:20px; font-size:11px; font-weight:500; letter-spacing:0.04em; text-transform:uppercase; color:var(--ink-soft); }
.map__pin{ position:absolute; left:30%; top:62%; display:flex; align-items:center; gap:10px; }
.map__pin .dot{ width:16px; height:16px; border-radius:50%; background:var(--red); box-shadow:0 0 0 8px rgba(230,0,45,0.12); }
/* SVG-Karte: implec-Standorte Deutschland + Niederrhein-Inset (self-hosted, kein externer Karten-Dienst -> DSGVO-konform) */
.map--geo{ background:#fff; }
.map--geo .map__label{ z-index:2; }
.geo-svg{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.geo-de{ fill:url(#geoGlow); stroke:rgba(60,0,95,0.35); stroke-width:1.5; stroke-linejoin:round; }
.geo-link{ fill:none; stroke:rgba(230,0,45,0.45); stroke-width:1.2; stroke-dasharray:3 4; }
.geo-lens{ fill:none; stroke:rgba(60,0,95,0.16); stroke-width:1; stroke-dasharray:2 4; }
.geo-inset{ fill:#faf8fc; stroke:rgba(60,0,95,0.18); }
.geo-ititle{ fill:var(--ink-soft); font-family:var(--mono); font-size:9px; letter-spacing:0.06em; }
.geo-ispoke{ fill:none; stroke:rgba(60,0,95,0.20); stroke-width:0.8; stroke-dasharray:1 4; }
.geo-idot{ fill:var(--purple); stroke:#fff; stroke-width:1; }
.geo-ilabel{ fill:var(--ink-soft); font-family:var(--mono); font-size:6.5px; }
.geo-icore{ fill:var(--red); stroke:#fff; stroke-width:1.5; }
.geo-pin2{ fill:var(--red-deep); stroke:#fff; stroke-width:2; }
.geo-sub{ fill:var(--ink-soft); font-family:var(--mono); font-size:9px; letter-spacing:0.05em; }
.geo-label--main{ fill:var(--red); font-family:var(--sans); font-size:12.5px; font-weight:700; letter-spacing:-0.01em; }
.geo-label--main2{ fill:var(--red-deep); font-family:var(--sans); font-size:12.5px; font-weight:700; letter-spacing:-0.01em; }
.geo-pin__halo{ fill:none; stroke:rgba(230,0,45,0.30); stroke-width:1.5; }
.geo-pin__pulse{ fill:rgba(230,0,45,0.22); }
.geo-pin__core{ fill:var(--red); stroke:#fff; stroke-width:2; }
@media (prefers-reduced-motion:no-preference){ .geo-pin__pulse{ transform-box:fill-box; transform-origin:center; animation:geo-pulse 2.6s ease-out infinite; } }
@keyframes geo-pulse{ 0%{ transform:scale(.5); opacity:.55; } 70%{ transform:scale(2.4); opacity:0; } 100%{ transform:scale(2.4); opacity:0; } }
.loc-stack{ display:grid; gap:14px; }
.loc-card{ background:#fff; border-radius:20px; padding:24px 26px; border:1px solid rgba(0,0,0,0.06); }
.loc-card__head{ display:flex; justify-content:space-between; align-items:baseline; }
.loc-card h3{ font-size:24px; font-weight:600; letter-spacing:-0.02em; margin:8px 0; }
.loc-card p{ font-size:14px; color:var(--ink-soft); margin:0; line-height:1.5; }

/* ============================================================
   ZITAT (großes Testimonial)
   ============================================================ */
.quote{ max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:1fr 1fr; border-radius:28px; overflow:hidden; background:var(--paper); border:1px solid rgba(0,0,0,0.06); }
.quote__media{ min-height:480px; position:relative; }
.quote__body{ padding:56px 48px; display:flex; flex-direction:column; justify-content:center; }
.quote__text{ font-size:28px; font-weight:500; line-height:1.3; letter-spacing:-0.02em; color:var(--ink); margin:0; }
.avatar{ width:44px; height:44px; flex-shrink:0; border-radius:50%; background:linear-gradient(135deg,var(--purple),var(--red)); display:inline-flex; align-items:center; justify-content:center; color:#fff; font-size:14px; font-weight:600; }
.who{ display:flex; gap:12px; align-items:center; margin-top:28px; }
.who b{ font-size:16px; font-weight:600; color:var(--ink); display:block; }
.who span{ font-size:13px; color:var(--ink-soft); }
.metrics{ display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:32px; padding-top:28px; border-top:1px solid var(--line-2); }
.metrics .m-num{ font-size:40px; font-weight:600; letter-spacing:-0.03em; color:var(--ink); line-height:1; }
.metrics .m-cap{ font-size:13px; color:var(--ink-soft); margin-top:6px; }

/* ============================================================
   VERGLEICHSTABELLE
   ============================================================ */
.compare{ border-radius:var(--r-card); overflow:hidden; border:1px solid var(--line-3); background:#fff; }
.compare__row{ display:grid; grid-template-columns:1fr 1fr 1.1fr; font-size:15px; }
.compare__row--head{ background:#2A0040; color:#fff; }
.compare__row:nth-child(even){ background:var(--paper); }
.compare__cell{ padding:16px 24px; }
.compare__cell--head{ font-weight:600; font-size:14px; }
.compare__cell--key{ font-weight:600; color:var(--ink); }
.compare__cell--other{ color:var(--ink-soft); }
.compare__cell--win{ color:var(--ink); background:rgba(60,0,95,0.03); display:flex; gap:8px; }
.compare__cell--win::before{ content:"✓"; color:var(--red); font-weight:700; }
.compare__cell--implec{ background:var(--purple); display:flex; align-items:center; gap:8px; }

/* implec-Spalte als erhöhte, gerahmte Karte mit CTA-Abschluss (nur im .compare-block) */
.compare-block{ position:relative; padding-top:16px; --implec-col:calc(1.15 / 3.15 * 100%); }
.compare-block .compare{ position:relative; z-index:1; border:none; background:transparent; }
.compare-block .compare__row{ grid-template-columns:1fr 1fr 1.15fr; }
.compare-block .compare__row:nth-child(even){ background:transparent; }
.compare-block .compare__row:nth-child(even) .compare__cell--key,
.compare-block .compare__row:nth-child(even) .compare__cell--other{ background:var(--paper); }
.compare-block .compare__cell--head{ display:flex; align-items:center; }
.compare-block .compare__cell--win{ background:transparent; gap:10px; align-items:flex-start; }
.compare-block .compare__cell--win::before{ flex:0 0 auto; width:20px; height:20px; border-radius:999px;
  background:var(--red); color:#fff; font-size:12px; line-height:1;
  display:inline-flex; align-items:center; justify-content:center; margin-top:1px; }
.compare__spotlight{ position:absolute; top:0; bottom:0; right:0; width:var(--implec-col);
  border:2px solid var(--purple); border-radius:18px; background:#fff;
  box-shadow:0 18px 50px rgba(60,0,95,0.18); z-index:0; pointer-events:none; }
.compare__badge{ position:absolute; top:-12px; left:50%; transform:translateX(-50%);
  background:var(--red); color:#fff; font-size:11px; font-weight:600; padding:4px 14px;
  border-radius:var(--r-pill); white-space:nowrap; box-shadow:0 4px 12px rgba(230,0,45,0.30); }
.compare__cta{ position:relative; z-index:2; width:var(--implec-col); margin-left:auto; padding:18px 24px 22px; }
.compare__cta .btn{ width:100%; justify-content:center; }

/* ============================================================
   BEWERTUNGEN (Masonry)
   ============================================================ */
.reviews{ columns:3 320px; column-gap:16px; }
.review{ break-inside:avoid; margin-bottom:16px; background:var(--paper); border-radius:18px; padding:26px 28px; border:1px solid rgba(60,0,95,0.07); }
.review__top{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; }
.review__stars{ color:var(--gold); font-size:15px; }
.review p{ font-size:15.5px; line-height:1.55; color:var(--ink); margin:0 0 18px; }
.review__who{ display:flex; align-items:center; gap:11px; }
.review__ava{ width:38px; height:38px; border-radius:50%; background:var(--purple); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:600; font-size:14px; }
.review__who b{ font-size:15px; font-weight:600; color:var(--ink); }

/* ============================================================
   FAQ
   ============================================================ */
.faq-cat{ font-family:var(--mono); font-size:12px; font-weight:600; color:var(--accent-cta); letter-spacing:0.16em; margin:44px 0 8px; text-transform:uppercase; }
.faq-cat:first-of-type{ margin-top:32px; }
details.faq{ border-top:1px solid var(--line-3); }
details.faq > summary{ list-style:none; padding:18px 0; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:20px; font-size:18px; font-weight:600; color:var(--ink); }
details.faq > summary::-webkit-details-marker{ display:none; }
.faq-plus{ color:var(--red); font-size:22px; flex-shrink:0; transition:transform .2s ease; }
details.faq[open] .faq-plus{ transform:rotate(45deg); }
details.faq p{ font-size:16px; line-height:1.6; color:var(--ink-soft); margin:0 0 20px; max-width:780px; }

/* ============================================================
   KONTAKT (Formular + Kontaktwege)
   ============================================================ */
.form{ background:#fff; border-radius:var(--r-card); padding:36px; border:1px solid var(--line); }
.form label{ display:block; font-size:13px; font-weight:600; color:var(--ink); margin-bottom:6px; }
.input{ width:100%; padding:13px 14px; border-radius:12px; border:1px solid rgba(60,0,95,0.15); font-size:15px; font-family:inherit; background:var(--paper); }
.field{ margin-bottom:16px; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.form__hint{ font-size:12px; color:var(--ink-faint); margin:14px 0 0; text-align:center; }
.form__success{ text-align:center; padding:40px 10px; }
.form__check{ width:64px; height:64px; border-radius:50%; background:rgba(230,0,45,0.1); color:var(--red); display:flex; align-items:center; justify-content:center; font-size:30px; margin:0 auto 18px; }
.ways{ display:grid; gap:16px; }
.way{ display:flex; gap:18px; align-items:center; background:#fff; color:var(--ink); border-radius:18px; padding:24px 26px; border:1px solid var(--line); text-decoration:none; }
a.way{ transition:box-shadow 0.2s ease, transform 0.2s ease; }
a.way:hover{ box-shadow:0 16px 48px rgba(60,0,95,0.12); transform:translateY(-2px); }
.way--hot{ background:#2A0040; color:#fff; border:none; }
.way__icon{ width:48px; height:48px; border-radius:12px; flex-shrink:0; display:flex; align-items:center; justify-content:center; background:rgba(60,0,95,0.08); color:var(--purple); }
.way--hot .way__icon{ background:rgba(255,255,255,0.12); color:#fff; }
.way__body{ flex:1; }
.way__body h3{ font-size:19px; font-weight:700; letter-spacing:-0.015em; margin:0 0 4px; }
.way__body p{ font-size:13.5px; margin:0; line-height:1.4; color:var(--ink-soft); }
.way--hot .way__body p{ color:rgba(255,255,255,0.7); }
.way__cta{ padding:10px 18px; background:var(--panel); color:var(--purple); border-radius:var(--r-pill); font-size:13.5px; font-weight:600; white-space:nowrap; text-decoration:none; }
.way--hot .way__cta{ background:var(--red); color:#fff; }
.contact-person{ display:flex; align-items:center; gap:16px; background:#fff; border-radius:18px; padding:20px 24px; border:1px solid var(--line); }
.contact-person__img{ width:80px; height:80px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.contact-person strong{ font-size:16px; font-weight:600; letter-spacing:-0.01em; display:block; margin-bottom:2px; }

/* ============================================================
   GLOSSAR / WHITEPAPER
   ============================================================ */
.gloss-row{ display:flex; justify-content:space-between; align-items:center; padding:14px 0; border-top:1px solid var(--line-2); text-decoration:none; color:var(--ink); transition:opacity .15s ease; }
.gloss-row:hover{ opacity:.65; }
.gloss-row b{ font-size:17px; font-weight:500; }
.gloss-row span{ font-size:12px; color:var(--ink-soft); font-weight:500; }

/* ============================================================
   FOOTER  (Haupt-Website, hell)
   ============================================================ */
.site-footer{ background:var(--cream); padding:24px 22px 44px; font-size:12px; color:var(--ink-soft); letter-spacing:-0.01em; }
.site-footer__top{ margin:0 0 24px; border-bottom:1px solid var(--line-2); padding-bottom:18px; }
.foot-cols{ display:grid; grid-template-columns:repeat(5,1fr); gap:32px; padding-bottom:24px; border-bottom:1px solid var(--line-2); }
.foot-cols h4{ margin:0 0 12px; font-size:12px; font-weight:600; color:var(--ink); }
.foot-cols ul{ list-style:none; padding:0; margin:0; display:grid; gap:8px; }
.foot-cols a{ color:var(--ink-soft); text-decoration:none; }
.foot-legal{ margin-top:18px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; }
.foot-legal__links{ display:flex; gap:18px; flex-wrap:wrap; }
.foot-legal a{ color:var(--ink-soft); text-decoration:none; }

/* ============================================================
   FOOTER  (Schwester-Seiten, dunkel)
   ============================================================ */
.dfooter{ background:var(--purple-deep); color:#fff; padding:64px 26px 36px; }
.dfooter__grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px; padding-bottom:48px; border-bottom:1px solid rgba(255,255,255,0.14); }
.dfooter__brand{ font-size:24px; font-weight:700; letter-spacing:-0.03em; }
.dfooter p{ font-size:15px; color:rgba(255,255,255,0.7); line-height:1.5; max-width:320px; margin-top:14px; }
.dfooter h4{ font-size:12px; letter-spacing:0.14em; text-transform:uppercase; color:rgba(255,255,255,0.55); margin:0 0 14px; font-weight:600; }
.dfooter ul{ list-style:none; padding:0; margin:0; display:grid; gap:9px; font-size:14px; }
.dfooter ul a{ color:rgba(255,255,255,0.85); text-decoration:none; }
.dfooter__by{ display:flex; align-items:center; gap:9px; margin-top:20px; font-size:13px; color:rgba(255,255,255,0.6); }
.dfooter__partner{ margin-top:16px; }
.dfooter__partner span{ padding:5px 12px; border-radius:var(--r-pill); background:rgba(255,255,255,0.1); font-size:12px; }
.dfooter__legal{ padding-top:24px; display:flex; justify-content:space-between; font-size:12px; color:rgba(255,255,255,0.55); flex-wrap:wrap; gap:12px; }
.dfooter__legal a{ color:inherit; text-decoration:none; margin-left:0; }
.dfooter__legal-links{ display:flex; gap:18px; }

/* ============================================================
   SCHWESTER-NAV
   ============================================================ */
.snav{ background:rgba(251,252,254,0.85); backdrop-filter:saturate(180%) blur(20px); -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--line); padding:0 26px; height:56px; display:flex; align-items:center; justify-content:space-between; }
.snav__brand{ display:flex; align-items:center; gap:11px; text-decoration:none; }
.snav__name{ font-size:21px; font-weight:700; letter-spacing:-0.03em; color:var(--purple-deep); }
.snav__name span{ color:var(--accent); }
.snav__by{ display:flex; align-items:center; gap:6px; border-left:1px solid rgba(60,0,95,0.15); padding-left:11px; font-size:12px; color:var(--ink-soft); }
.snav__links{ display:flex; gap:30px; list-style:none; padding:0; margin:0; font-size:14px; font-weight:500; }
.snav__links li{ color:var(--purple-deep); opacity:.8; }
.snav__links li.active{ color:var(--accent); opacity:1; }
.snav__links a{ color:inherit; text-decoration:none; }
.snav__links li.active a{ border-bottom:2px solid var(--red); padding-bottom:3px; }
.snav__actions{ display:flex; align-items:center; gap:14px; }

/* Capability-Grid (Schwester) */
.caps{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.cap{ background:#fff; border-radius:var(--r-card-sm); padding:28px 26px; min-height:160px; display:flex; flex-direction:column; box-shadow:0 1px 3px rgba(60,0,95,0.05); }
.cap__icon{ font-size:26px; }
.cap h3{ font-size:20px; font-weight:600; color:var(--purple-deep); line-height:1.15; margin:auto 0 0; }
.cap--wide{ grid-column:span 2; flex-direction:row; align-items:stretch; padding:0; overflow:hidden; display:grid; grid-template-columns:1fr 1.1fr; }
.cap--wide .cap__txt{ padding:28px 26px; }
.cap--wide h3{ margin:0 0 10px; font-size:21px; }
.cap--wide p{ font-size:13.5px; color:var(--ink-soft); line-height:1.5; margin:0; max-width:240px; }
.cap--wide .cap__media{ position:relative; min-height:160px; }

/* Bento (Schwester, 6-Spalten-Optik → 3) */
.sbento{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.sbento__tile{ border-radius:20px; overflow:hidden; position:relative; min-height:300px; background:#fff; color:var(--purple-deep); border:1px solid var(--line); }
.sbento__tile--dark{ background:#1a0030; color:#fff; border:none; }
.sbento__tile--wide{ grid-column:span 2; }
.sbento__tile .inner{ position:relative; padding:32px; }
.sbento__tile .inner p{ font-size:13px; font-weight:600; margin:0; }
.sbento__tile .inner h3{ font-size:26px; font-weight:700; letter-spacing:-0.02em; line-height:1.1; margin:8px 0 0; max-width:300px; }

/* CTA-Band (Schwester) */
.cta-band{ padding:100px 26px; background:linear-gradient(135deg,#25003B 0%,#1a0030 100%); color:#fff; text-align:center; position:relative; overflow:hidden; }
.cta-band__glow{ position:absolute; bottom:-30%; left:50%; transform:translateX(-50%); width:700px; height:700px; border-radius:50%; background:radial-gradient(circle,rgba(230,0,45,0.24),transparent 70%); }
.cta-band__inner{ position:relative; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1040px){
  .snav__links{ display:none; }
  /* Burger über dem Vollbild-Overlay halten, damit er als Schließen-Button klickbar bleibt */
  .burger{ display:inline-flex; position:relative; z-index:60; }
  .nav.mobile-open .burger{ color:var(--ink); }
  .bento, .bento__col, .grid--2, .grid--3, .grid--4, .disc-grid, .plans, .geo-grid, .quote, .sbento, .caps, .dfooter__grid, .foot-cols, .field-row, .mega__grid{ grid-template-columns:1fr; }
  .bento > .tile--big{ grid-column:auto; }
  .tile--big{ min-height:auto; }
  .tile--md{ min-height:auto; }
  /* Bildzonen stapeln mobil: Text oben, Foto kantenbündig darunter */
  .tile__media{ position:relative; top:auto; right:auto; bottom:auto; left:auto; width:auto; height:260px; margin:24px -36px -36px; }
  .tile--big .tile__media{ margin:24px -48px -56px; }
  .tile__media::before{ top:0; left:0; right:0; bottom:auto; width:auto; height:48px;
    background:linear-gradient(180deg,#fff 0%,rgba(255,255,255,0) 100%); }
  .tile--dark .tile__media::before{ background:linear-gradient(180deg,#2A0040 0%,rgba(42,0,64,0) 100%); }
  .tile--cream .tile__media::before{ background:linear-gradient(180deg,var(--cream) 0%,rgba(245,245,247,0) 100%); }
  .tile--big .tile__rel, .tile__rel--narrow{ max-width:none; }
  .tile__link{ position:static; display:inline-block; margin-top:16px; }
  .sbento__tile--wide, .cap--wide{ grid-column:span 1; }
  .cap--wide{ grid-template-columns:1fr; }
  .utility{ padding:7px 20px; }
  .nav, .snav{ padding:0 20px; }

  /* Mobiles Vollbild-Menü mit Akkordeon (Links bleiben im DOM, kein display:none) */
  .nav__links{
    position:fixed; left:0; right:0; top:0; height:100vh; height:100dvh; margin:0;
    padding:84px 20px 48px; flex-direction:column; align-items:stretch; gap:0;
    background:var(--paper); overflow-y:auto; -webkit-overflow-scrolling:touch;
    transform:translateX(100%); transition:transform .25s ease; z-index:45;
  }
  .nav.mobile-open .nav__links{ transform:translateX(0); }
  .nav__links > li{ width:100%; border-bottom:1px solid var(--line); }
  .nav__links > li.active{ height:auto; }
  .has-drop{ display:block; height:auto; }
  .nav-trigger{ width:100%; justify-content:space-between; height:auto; padding:16px 4px; border-bottom:0; font-size:17px; }
  .nav-trigger .caret{ display:inline; }
  .nav__links > li > a{ display:block; height:auto; border-top:0; padding:16px 4px; font-size:17px; }

  /* Dropdown wird Akkordeon */
  .mega{ position:static; opacity:1; visibility:visible; transform:none; box-shadow:none;
    border:0; padding:0; max-height:0; overflow:hidden; transition:max-height .3s ease; transition-delay:0s; }
  .has-drop.open > .mega{ max-height:3000px; padding:4px 0 18px; }
  .mega > .wrap{ max-width:none; }
  /* Übersichts-Link: der Trigger klappt mobil nur auf/zu — dieser Link führt zur Übersichtsseite */
  .mega__overview{ display:flex; align-items:center; gap:8px; padding:14px 4px; margin-bottom:6px;
    font-size:15px; font-weight:500; color:var(--purple); text-decoration:none; border-bottom:1px solid var(--line); }
  .mega__overview span{ color:var(--red); }
  .mega__services, .mega__insights, .mega__about{ grid-template-columns:1fr; gap:22px; }
  .mega__ki-cards{ grid-template-columns:1fr; }
  .mega__stats{ padding-left:0; border-left:0; flex-direction:row; flex-wrap:wrap; gap:24px; }
  .mega-feature{ grid-template-columns:96px 1fr; }
}
@media (max-width:760px){
  .section, .section--lg{ padding-left:18px; padding-right:18px; }
  .stats, .spec{ grid-template-columns:1fr 1fr; }
  /* min-width:0 lässt die Grid-Zellen schrumpfen, sonst sprengt z. B. "196.000" die Spalte */
  .stat, .spec__item{ border-right:none; border-bottom:1px solid var(--line-2); min-width:0; padding-left:8px; padding-right:8px; }
  .stat__num{ font-size:clamp(28px,9vw,52px); }
  .spec__num{ font-size:clamp(26px,8vw,44px); }
  .reviews{ columns:1; }
  .compare__row{ grid-template-columns:1fr 1fr; }
  /* Spezifitäts-Override: .compare-block .compare__row (0,2,0) > .compare__row (0,1,0) */
  .compare-block .compare__row{ grid-template-columns:1fr 1fr; }
  .compare__row--head{ display:none; }
  .compare__cell--other{ display:none; }
  .compare-block{ padding-top:0; }
  .compare__spotlight{ display:none; }
  .compare-block .compare__cell--win{ background:var(--panel); }
  .compare__cta{ width:100%; padding:20px 24px 0; }
  .hero__content{ left:6%; right:6%; }
  .showreel, .price-pill{ display:none; }
}

/* ============================================================
   UNTERSEITEN-KOMPONENTEN
   ============================================================ */
/* aktiver Nav-Link */
/* einfache (Nicht-Dropdown-)Links: volle Höhe + Border-Balken wie bei den Triggern */
.nav__links > li > a{ display:flex; align-items:center; height:62px; border-top:2px solid transparent; border-bottom:2px solid transparent; text-decoration:none; color:inherit; }
/* aktiver / gehoverter Nav-Link: roter Balken (kein Fett) */
.nav__links > li:hover > a,
.nav__links > li.active > a{ color:var(--purple); border-bottom-color:var(--red); }
.has-drop.active > .nav-trigger{ color:var(--purple); border-bottom-color:var(--red); font-weight:400; }
.nav__links > li a{ text-decoration:none; color:inherit; }

/* Sub-Hero (heller Seitenkopf) */
.subhero{ padding:80px 22px 48px; text-align:center; }
.subhero .eyebrow{ display:block; }
.subhero .lead{ max-width:680px; margin:0 auto; }
.subhero--left{ text-align:left; }
.subhero--left .lead{ margin:0; }
/* Optionaler gezeichneter Illu-Anker im Hero (freigestelltes PNG, zentriert) */
.subhero__illu{ margin:44px auto 0; max-width:520px; }
.subhero__illu img{ width:100%; height:auto; display:block; }
/* Split-Hero: Text links, Illustration rechts (nur Service-Landingpages mit illu) */
.subhero--split{ display:flex; align-items:center; justify-content:center; gap:56px; text-align:left; max-width:1180px; margin-inline:auto; padding:72px 22px 56px; }
.subhero--split .subhero__text{ flex:1 1 0; min-width:0; }
.subhero--split .eyebrow{ display:block; }
.subhero--split .h1--xl{ margin:0; max-width:none; text-align:left; }
.subhero--split .h1--calm{ font-size:clamp(34px,5vw,56px); margin:0 0 0; text-align:left; }
.subhero--split .lead{ margin:18px 0 0; max-width:46ch; }
.subhero--split .subhero__meta{ display:flex; margin-top:16px; }
.subhero--split .subhero__actions{ justify-content:flex-start; margin-top:28px; }
.subhero--split .subhero__illu{ flex:0 1 44%; max-width:480px; margin:0; }
@media (max-width:860px){
  .subhero--split{ flex-direction:column; text-align:center; gap:8px; padding:56px 20px 40px; }
  .subhero--split .h1--xl{ text-align:center; }
  .subhero--split .h1--calm{ text-align:center; }
  .subhero--split .lead{ margin-inline:auto; }
  .subhero--split .subhero__meta,
  .subhero--split .subhero__actions{ justify-content:center; }
  .subhero--split .subhero__illu{ flex:0 1 auto; max-width:340px; margin:0 auto 8px; }
}

/* Feature-Karte (Icon + Titel + Text) */
.feat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.feat{ background:#fff; border:1px solid var(--rule, rgba(60,0,95,0.1)); border-radius:20px; padding:30px 28px; }
.feat__icon{ width:48px; height:48px; border-radius:12px; background:rgba(60,0,95,0.08); display:flex; align-items:center; justify-content:center; margin-bottom:18px; color:var(--purple); }
.feat h3{ font-size:21px; font-weight:600; letter-spacing:-0.015em; margin:0 0 8px; color:var(--ink); }
.feat p{ font-size:15px; color:var(--ink-soft); line-height:1.55; margin:0; }

/* Team-Grid */
.team-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.member{ text-align:center; }
.member__photo{ aspect-ratio:1; border-radius:20px; overflow:hidden; position:relative; margin-bottom:14px; }
.member h3{ font-size:17px; font-weight:600; margin:0; color:var(--ink); }
.member p{ font-size:13px; color:var(--ink-soft); margin:2px 0 0; }

/* Werte / Icon-Liste */
.values{ display:grid; grid-template-columns:repeat(3,1fr); gap:32px; }
.value h3{ font-size:20px; font-weight:600; margin:0 0 8px; color:var(--ink); }
.value p{ font-size:15px; color:var(--ink-soft); line-height:1.55; margin:0; }

/* Zeitleiste (Firmen-Historie) — horizontale Achse, Karten abwechselnd oben/unten */
/* Scrollbarer Viewport: läuft per JS langsam von selbst, bleibt manuell scrollbar.
   Fade-Maske links/rechts lässt Einträge weich ein- und auslaufen. */
.timeline-viewport{ position:relative; margin:0; overflow-x:auto; overflow-y:hidden;
  overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch;
  scrollbar-width:none; -ms-overflow-style:none; padding:4px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 64px,#000 calc(100% - 64px),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 64px,#000 calc(100% - 64px),transparent 100%); }
.timeline-viewport:focus-visible{ outline:2px solid var(--purple); outline-offset:2px; border-radius:8px; }
.timeline-viewport::-webkit-scrollbar{ display:none; }
/* selbst verschieben: Greif-Cursor (Drag per Maus, JS) */
@media (hover:hover){ .timeline-viewport{ cursor:grab; } }
.timeline-viewport.is-dragging{ cursor:grabbing; user-select:none; }
.timeline{ list-style:none; margin:0; padding:0; display:flex; align-items:stretch;
  width:max-content; }
/* Echte Flex-Abstandshalter links/rechts (Pseudo-Elemente zählen NICHT bei
   :nth-child/:first/:last → Zickzack & Achse bleiben intakt). Erzeugen — anders als
   container-padding — zuverlässig scrollbaren Platz, damit auch der erste/letzte
   Eintrag mittig gescrollt werden kann. Breite per JS über --tl-pad. */
.timeline::before, .timeline::after{ content:""; flex:0 0 var(--tl-pad,40px); }
.tl-item{ position:relative; flex:0 0 clamp(210px,64vw,236px); height:480px; }
/* durchgehende Achse: vertikal mittig, jedes Item zeichnet sein Segment */
.tl-item::before{ content:""; position:absolute; left:0; right:0; top:50%; height:2px;
  background:var(--line-3); }
.tl-item:first-child::before{ left:50%; }   /* Linie beginnt am ersten Punkt (2002) */
.tl-item:last-child::before{ right:50%; }    /* Linie endet am letzten Punkt (2026) */
/* Punkt mittig auf der Achse */
.tl-dot{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:1;
  width:13px; height:13px; border-radius:50%; background:var(--purple);
  border:2px solid var(--white); box-shadow:0 0 0 1px var(--line-3); }
/* Inhalt zur Achse hin verankert → wächst von ihr weg, kreuzt sie nie */
.tl-content{ position:absolute; left:50%; transform:translateX(-50%); width:min(112%,264px); }
.tl-content::after{ content:""; position:absolute; left:50%; transform:translateX(-50%);
  width:2px; height:20px; background:var(--line-3); }
.tl-item:nth-child(odd) .tl-content{ bottom:calc(50% + 20px); }
.tl-item:nth-child(odd) .tl-content::after{ bottom:-20px; }
.tl-item:nth-child(even) .tl-content{ top:calc(50% + 20px); }
.tl-item:nth-child(even) .tl-content::after{ top:-20px; }
/* Karte */
.tl-card{ background:var(--white); border:1px solid var(--line); border-radius:16px;
  padding:16px 18px; box-shadow:0 6px 16px rgba(60,0,95,0.06); }
/* Jahr als Tag/Pill (Design-System: Mono, Versalien, Pill) */
.tl-year{ display:inline-flex; align-items:center; padding:4px 11px; border-radius:var(--r-pill);
  background:rgba(60,0,95,0.08); color:var(--purple); font-family:var(--mono); font-size:12.5px;
  font-weight:600; letter-spacing:0.04em; text-transform:uppercase; line-height:1.2; margin:0 0 10px; }
.tl-title{ font-size:17px; font-weight:600; margin:0 0 6px; color:var(--ink); letter-spacing:-0.01em; }
.tl-text{ font-size:14.5px; color:var(--ink-soft); line-height:1.55; margin:0; }
/* aktueller/jüngster Eintrag (2026): Signal in Rot, Karte hervorgehoben */
.tl-item--current .tl-dot{ background:var(--red); }
.tl-item--current .tl-year{ color:var(--red); background:rgba(230,0,45,0.10); }
.tl-item--current .tl-card{ border-color:rgba(230,0,45,0.35); box-shadow:0 6px 18px rgba(230,0,45,0.12); }
/* Auszeichnungen: Gold-Akzent (Token --gold), Pokal-Icon + Label */
.tl-award{ display:inline-flex; align-items:center; gap:6px; margin:0 0 8px;
  font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:0.06em;
  text-transform:uppercase; color:var(--ink-soft); }
.tl-award svg{ color:var(--gold); }
.tl-item--award .tl-card{ border-color:rgba(251,188,5,0.55); box-shadow:0 6px 18px rgba(251,188,5,0.16); }
.tl-item--award .tl-year{ color:var(--ink); background:rgba(251,188,5,0.20); }
.tl-item--award .tl-dot{ background:var(--gold); }
@media (prefers-reduced-motion:no-preference){
  .tl-item--current .tl-dot{ animation:pulsering 2.6s ease-out infinite; }
}

/* Jobs-Liste */
.jobs{ display:grid; gap:12px; }
.job{ display:flex; justify-content:space-between; align-items:center; gap:20px; background:#fff; border:1px solid var(--rule, rgba(60,0,95,0.1)); border-radius:16px; padding:22px 26px; text-decoration:none; color:var(--ink); transition:box-shadow .2s ease, transform .2s ease; flex-wrap:wrap; }
.job:hover{ box-shadow:0 12px 30px rgba(60,0,95,0.10); transform:translateY(-2px); }
.job h3{ font-size:19px; font-weight:600; margin:0; }
.job__meta{ font-size:13px; color:var(--ink-soft); margin-top:4px; }

/* Artikel-Layout (Blog) */
.answer-box{ background:#f0edf3; border-radius:16px; padding:26px 30px; max-width:760px; margin:0 auto; }
.answer-box--wide{ max-width:none; }
.answer-box .label{ font-family:var(--sans); font-size:12px; font-weight:600; letter-spacing:0; text-transform:none; color:var(--implec-red,#E6002D); }
.answer-box p{ font-size:19px; font-weight:600; line-height:1.5; color:var(--ink); margin:8px 0 0; }
.article{ max-width:720px; margin:0 auto; }
.article p{ font-size:17px; line-height:1.75; color:var(--ink-2,#2A2530); margin:0 0 22px; }
.article h2{ font-size:28px; font-weight:600; letter-spacing:-0.02em; margin:40px 0 14px; color:var(--ink); }
.article ul{ font-size:17px; line-height:1.7; color:var(--ink-2,#2A2530); padding-left:22px; margin:0 0 22px; }
.article li{ margin-bottom:8px; }
.article .pullquote{ font-size:24px; font-weight:600; line-height:1.35; letter-spacing:-0.02em; color:var(--purple); margin:36px 0; padding:2px 0 2px 24px; border-left:3px solid var(--red); }
.byline{ display:flex; align-items:center; gap:12px; justify-content:center; margin-top:24px; font-size:14px; color:var(--ink-soft); }
.author-box{ display:flex; gap:18px; align-items:center; background:var(--paper); border:1px solid var(--rule, rgba(60,0,95,0.1)); border-radius:20px; padding:26px 28px; max-width:720px; margin:40px auto 0; }
.author-photo{ border-radius:50%; object-fit:cover; flex-shrink:0; }
.fullbleed-img{ aspect-ratio:21/9; position:relative; overflow:hidden; border-radius:24px; }
/* Randlos/kantenbündig (image full:true) — Foto-Band zwischen Textblöcken,
   schwebt nicht als abgerundete Kachel auf dem grauen Section-Hintergrund. */
.fullbleed-img--edge{ border-radius:0; }

/* Conversion-/Lead-Box (Blog) — Interaktionsgrundlage je Artikeltyp.
   Variante "offen": Direkt-Download (Checkliste/Vorlage/Matrix).
   Variante .conversion--gated: schlankes Lead-Formular (Whitepaper, gegen E-Mail). */
.conversion{ max-width:720px; margin:48px auto 0; background:var(--panel); border:1px solid var(--line-3); border-radius:20px; padding:30px 32px; }
.conversion__eyebrow{ font-family:var(--sans); font-size:12px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color:var(--red); margin:0 0 10px; }
.conversion__title{ font-size:21px; font-weight:600; letter-spacing:-0.02em; color:var(--ink); margin:0 0 8px; }
.conversion__text{ font-size:16px; line-height:1.6; color:var(--ink-soft); margin:0 0 20px; max-width:560px; }
.conversion__action{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; }
.conversion__form{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.conversion__form .input{ flex:1 1 260px; }
.conversion__form .input:focus{ outline:none; border-color:var(--purple); box-shadow:0 0 0 3px rgba(60,0,95,0.10); }
.conversion__note{ font-size:12px; color:var(--ink-faint); margin:12px 0 0; }
.conversion__note a{ color:var(--purple); }
@media (max-width:760px){ .conversion{ padding:24px 22px; } }

/* Checklisten-Landingpages (Lead-Magnets) — ruhige, abhakbare Prüflisten.
   Inhalt = data/pages/<id>.json (checklist-Komponente), Druck-/PDF-fähig. */
.check-wrap{ max-width:1100px; margin:0 auto; padding:56px 24px 24px; }
.check-wrap--with-ill{ display:flex; gap:64px; align-items:flex-start; }
.check-wrap--with-ill .check-wrap__content{ flex-grow:1; min-width:0; max-width:600px; }
.check-wrap__ill{ width:300px; flex-shrink:0; }
.check-wrap__ill img{ max-width:100%; object-fit:contain; }
@media (max-width:768px){
  .check-wrap--with-ill{ flex-direction:column; gap:32px; }
  .check-wrap__ill{ width:100%; max-width:260px; margin:0 auto; order:-1; }
}
/* Embed-Modus (Checklisten-Modal): Illustration bleibt rechts, halb so groß — kein column-stack. */
.embed .check-wrap--with-ill{ flex-direction:row; gap:32px; }
.embed .check-wrap__ill{ width:150px; max-width:150px; flex-shrink:0; margin:0; order:0; }
.check-eyebrow{ font-family:var(--sans); font-size:12px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color:var(--red); margin:0 0 8px; max-width:680px; }
.check-title{ font-size:30px; font-weight:600; letter-spacing:-0.02em; color:var(--ink); margin:0 0 10px; max-width:680px; }
.check-lead{ font-size:17px; line-height:1.6; color:var(--ink-soft); margin:0 0 28px; max-width:680px; }
.check-list{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line-3); }
.check-list li{ display:flex; gap:14px; align-items:flex-start; padding:16px 0; border-bottom:1px solid var(--line-3); font-size:16px; line-height:1.5; color:var(--ink); cursor:pointer; transition:opacity .12s ease; }
.check-list li:focus-visible{ outline:2px solid var(--purple); outline-offset:2px; border-radius:6px; }
.check-box{ position:relative; flex-shrink:0; width:22px; height:22px; border:2px solid var(--purple); border-radius:6px; margin-top:1px; transition:background .12s ease, border-color .12s ease; }
.check-list li.is-done .check-box{ background:var(--purple); border-color:var(--purple); }
.check-list li.is-done .check-box::after{ content:""; position:absolute; left:6px; top:2px; width:6px; height:11px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg); }
.check-list li.is-done > span:last-child{ color:var(--ink-soft); }
.check-num{ font-family:var(--mono); font-size:12px; color:var(--red); flex-shrink:0; margin-top:3px; min-width:22px; }
/* Handlungs-Tipp: unter der Frage (No-JS-Liste) bzw. unter offenen Punkten im Ergebnis */
.check-tip{ display:block; font-size:13.5px; line-height:1.5; color:var(--ink-soft); margin-top:4px; font-weight:400; }
.cl-result__tip{ display:block; font-size:13.5px; line-height:1.5; color:var(--ink-soft); margin-top:6px; font-weight:400; }
.check-result{ margin:22px 0 0; }
.check-result__line{ margin:0; font-family:var(--mono); font-size:13px; letter-spacing:0.04em; color:var(--ink-soft); }
.check-result__count{ color:var(--purple); font-weight:600; }
.check-result__verdict{ margin:12px 0 0; padding:14px 16px; border-radius:12px; background:var(--panel); font-size:14px; line-height:1.55; color:var(--ink-2,#2A2530); }
.check-result__verdict b{ font-weight:600; }
.check-result__verdict.is-good b{ color:var(--purple); }
.check-result__verdict.is-low{ background:rgba(230,0,45,0.07); }
.check-result__verdict.is-low b{ color:var(--red); }

/* Checklisten-Quiz — Progressive Enhancement (assets/js/checklist-quiz.js).
   Führt Punkt für Punkt durch die Liste und zeigt am Ende eine eigene
   Ergebnis-Seite. Ist JS aktiv, blendet cl-quiz-on die statische Liste aus. */
.cl-quiz-on .check-list, .cl-quiz-on .check-result{ display:none; }
.cl-quiz{ margin-top:24px; }
.cl-quiz__progress{ margin:0 0 30px; }
.cl-quiz__meta{ display:flex; justify-content:space-between; align-items:baseline; gap:16px;
  font-family:var(--mono); font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-soft); margin:0 0 10px; }
.cl-quiz__meta b{ color:var(--purple); font-weight:600; }
.cl-quiz__bar{ height:6px; border-radius:999px; background:var(--line-3); overflow:hidden; }
.cl-quiz__bar span{ display:block; height:100%; width:0; background:var(--purple); border-radius:999px; transition:width .35s cubic-bezier(.4,0,.2,1); }
.cl-quiz__view{ outline:none; }
.cl-quiz__num{ font-family:var(--mono); font-size:12px; letter-spacing:0.1em; color:var(--red); margin:0 0 14px; }
.cl-quiz__q{ font-size:24px; line-height:1.35; letter-spacing:-0.02em; font-weight:400; color:var(--ink); margin:0 0 28px; text-wrap:balance; }
.cl-quiz__q strong{ font-weight:600; }
.cl-quiz__answers{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.cl-quiz__ans{ font-family:var(--sans); font-size:16px; font-weight:500; line-height:1.3; text-align:left;
  padding:18px 22px; border-radius:var(--r-card-sm); border:1px solid var(--line-3); background:var(--white); color:var(--ink);
  cursor:pointer; transition:border-color .15s ease, background .15s ease, transform .1s ease; }
.cl-quiz__ans:hover{ border-color:var(--purple); transform:translateY(-1px); }
.cl-quiz__ans:focus-visible{ outline:2px solid var(--purple); outline-offset:2px; }
.cl-quiz__ans small{ display:block; font-family:var(--mono); font-size:10px; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--ink-faint); font-weight:400; margin-top:7px; }
.cl-quiz__ans--yes.is-active{ border-color:var(--purple); background:var(--panel); }
.cl-quiz__ans--no.is-active{ border-color:var(--red); background:rgba(230,0,45,0.06); }
.cl-quiz__back{ margin:20px 0 0; padding:6px 0; background:none; border:0; font-family:var(--sans); font-size:14px;
  color:var(--ink-soft); cursor:pointer; }
.cl-quiz__back:hover{ color:var(--purple); }

/* Ergebnis-Seite */
.cl-result__score{ display:flex; align-items:center; gap:24px; padding:0 0 24px; }
.cl-result__ring{ flex:none; position:relative; width:96px; height:96px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:conic-gradient(var(--ring,var(--purple)) calc(var(--p,0)*1%), var(--line-3) 0); }
.cl-result__ring i{ width:74px; height:74px; border-radius:50%; background:var(--white);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0; font-style:normal; }
.cl-result__ring b{ font-size:36px; line-height:1; font-weight:600; letter-spacing:-0.02em; color:var(--ink); }
.cl-result__ring span{ font-size:12px; line-height:1; color:var(--ink-soft); margin-top:3px; }
.cl-result__label{ font-size:22px; font-weight:600; letter-spacing:-0.02em; color:var(--purple); margin:0 0 6px; }
.cl-result--low .cl-result__label{ color:var(--red); }
.cl-result__hint{ font-size:15px; line-height:1.55; color:var(--ink-soft); margin:0; }
.cl-result__why{ margin:20px 0 0; padding:16px 18px; border-radius:var(--r-card-sm); background:var(--panel); }
.cl-result--low .cl-result__why{ background:rgba(230,0,45,0.06); }
.cl-result__why-title{ font-family:var(--mono); font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--red); margin:0 0 8px; }
.cl-result__why p:last-child{ font-size:15px; line-height:1.6; color:var(--ink-2,#2A2530); margin:0; text-wrap:pretty; }
.cl-result__open{ margin:24px 0 0; border-top:1px solid var(--line-3); padding-top:8px; }
.cl-result__open-title{ font-family:var(--mono); font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink); margin:14px 0; }
.cl-result__open ul{ list-style:none; margin:0; padding:0; }
.cl-result__open li{ display:flex; gap:14px; align-items:flex-start; padding:12px 0; border-top:1px solid var(--line-3);
  font-size:15px; line-height:1.5; color:var(--ink); }
.cl-result__open li .check-num{ margin-top:2px; }
.cl-result__restart{ margin:24px 0 0; padding:11px 22px; background:none; border:1px solid var(--line-3); border-radius:999px;
  font-family:var(--sans); font-size:14px; font-weight:500; color:var(--ink); cursor:pointer; transition:border-color .15s ease, color .15s ease; }
.cl-result__restart:hover{ border-color:var(--purple); color:var(--purple); }

@media (prefers-reduced-motion: reduce){
  .cl-quiz__bar span, .cl-quiz__ans, .cl-result__restart{ transition:none; }
}
@media (max-width:520px){
  .cl-quiz__answers{ grid-template-columns:1fr; }
  .cl-quiz__q{ font-size:21px; }
  .cl-result__score{ flex-direction:column; align-items:flex-start; gap:18px; }
}

@media print{
  .sticky, .site-footer, .conversion, .section--dark{ display:none !important; }
  body{ background:#fff; }
  .check-wrap{ padding:0; }
  .check-wrap--with-ill{ display:block; }
  .check-wrap__ill{ display:none; }
  .check-box{ border-color:#333; }
}

/* Blog: 2-Spalten-Layout mit mitscrollender Sidebar (2/3 Text, 1/3 Aside) */
.article-layout{ display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:24px 56px; align-items:start; }
.article-layout > .article{ max-width:none; margin:0; }
.article-layout > .author-box{ grid-column:1; margin:16px 0 0; max-width:none; }
.article h2{ scroll-margin-top:110px; }

.article-aside{ grid-column:2; grid-row:1 / span 2; position:sticky; top:110px; align-self:start;
  display:flex; flex-direction:column; gap:18px; }
.aside-eyebrow{ font-family:var(--sans); font-size:12px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--red); margin:0 0 10px; }

/* TL;DR */
.aside-tldr{ background:var(--cream); border:1px solid var(--line); border-radius:var(--r-card-sm); padding:18px 20px; }
.aside-tldr ul{ margin:0; padding-left:18px; }
.aside-tldr li{ font-size:13.5px; line-height:1.5; color:var(--ink-soft); margin-bottom:8px; }
.aside-tldr li:last-child{ margin-bottom:0; }

/* Inhaltsverzeichnis */
.aside-toc{ border:1px solid var(--line); border-radius:var(--r-card-sm); padding:18px 20px; }
.aside-toc ol{ list-style:none; margin:0; padding:0; counter-reset:toc; }
.aside-toc li{ counter-increment:toc; }
.aside-toc a{ display:flex; gap:10px; font-size:13.5px; line-height:1.45; color:var(--ink);
  text-decoration:none; padding:9px 0; border-top:1px solid var(--line); }
.aside-toc li:first-child a{ border-top:0; padding-top:0; }
.aside-toc a:hover{ color:var(--purple); }
.aside-toc a::before{ content:counter(toc); font-family:var(--mono); font-size:11px; color:var(--red); flex:none; }

/* Lexikon: Spot-Illustration links neben der „Kurz erklärt"-Box — transparentes WebP direkt auf dem Seitenhintergrund (kein Feld, kein Rahmen) */
.lex-defrow{ display:flex; align-items:center; gap:32px; }
.lex-defrow .answer-box{ flex:1 1 auto; margin:0; }
.lex-defrow__ill{ flex:0 0 200px; display:flex; align-items:center; justify-content:center; }
.lex-defrow__ill img{ display:block; max-width:100%; max-height:170px; width:auto; height:auto; }
@media (max-width:720px){
  .lex-defrow{ flex-direction:column; }
  .lex-defrow__ill{ flex-basis:auto; }
  .lex-defrow__ill img{ max-height:140px; }
}

/* Conversion-Box als Sidebar-Variante */
.conversion--aside{ max-width:none; margin:0; padding:20px 22px; border-radius:var(--r-card-sm); }
.conversion--aside .conversion__title{ font-size:18px; }
.conversion--aside .conversion__text{ font-size:13.5px; line-height:1.55; margin:0 0 16px; max-width:none; }
.conversion--aside .conversion__action{ flex-direction:column; align-items:stretch; gap:12px; }
.conversion--aside .conversion__action .btn{ justify-content:center; padding:11px 20px; font-size:14px; }
.conversion--aside .conversion__action a:not(.btn){ font-size:13px; }

/* Kompakter Autor */
.aside-author{ display:flex; gap:12px; align-items:center; border:1px solid var(--line); border-radius:var(--r-card-sm); padding:16px 18px; }
.aside-author .avatar{ width:42px; height:42px; flex:none; }
.aside-author b{ display:block; font-size:14px; color:var(--ink); }
.aside-author span{ font-size:12px; color:var(--ink-soft); }

/* Checklisten-Modal (öffnet die Checklistenseite als Overlay statt neuer Seite) */
.cl-modal{ position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center;
  padding:24px; background:rgba(14,11,18,0.55); backdrop-filter:saturate(140%) blur(6px); animation:cl-fade .15s ease; }
@keyframes cl-fade{ from{ opacity:0 } to{ opacity:1 } }
.cl-modal__panel{ position:relative; width:min(760px,100%); height:min(86vh,920px); background:#fff;
  border-radius:24px; overflow:hidden; box-shadow:0 30px 80px rgba(37,0,59,0.45); }
.cl-modal__frame{ width:100%; height:100%; border:0; display:block; }
.cl-modal__close{ position:absolute; top:12px; right:12px; z-index:2; width:38px; height:38px; border-radius:999px;
  border:1px solid var(--line); background:rgba(255,255,255,0.92); color:var(--ink); font-size:22px; line-height:1;
  cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .15s ease; }
.cl-modal__close:hover{ background:#fff; }
@media (max-width:760px){ .cl-modal{ padding:0; } .cl-modal__panel{ width:100%; height:100%; border-radius:0; } }

@media (max-width:980px){
  .article-layout{ grid-template-columns:1fr; gap:32px; }
  .article-aside{ grid-column:1; grid-row:auto; position:static; }
  .article-layout > .author-box{ grid-column:1; }
}

/* Prozess-Schritte (Case-Detail) */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.step__num{ font-family:var(--mono); font-size:13px; color:var(--implec-red,#E6002D); letter-spacing:0.08em; }
.step h3{ font-size:20px; font-weight:600; margin:8px 0 8px; color:var(--ink); }
.step p{ font-size:15px; color:var(--ink-soft); line-height:1.6; margin:0; }

@media (max-width:1040px){
  .feat-grid, .team-grid, .values, .steps{ grid-template-columns:1fr 1fr; }
}
@media (max-width:760px){
  .feat-grid, .team-grid, .values, .steps{ grid-template-columns:1fr; }
}

/* Split-Layout (Bild/Text nebeneinander, bricht mobil um) */
.split{ display:grid; grid-template-columns:3fr 2fr; }
.split--even{ grid-template-columns:1fr 1fr; }
@media (max-width:1040px){ .split, .split--even{ grid-template-columns:1fr; } }

/* ============================================================
   LEXIKON
   ============================================================ */
.lex-search{ max-width:560px; margin:0 auto 22px; position:relative; }
.lex-search input{ width:100%; padding:15px 18px; border-radius:var(--r-pill); border:1px solid var(--line-3); font-size:16px; font-family:inherit; background:#fff; }
.lex-search input:focus{ outline:none; border-color:var(--purple); box-shadow:0 0 0 3px rgba(60,0,95,0.10); }
.az{ display:flex; flex-wrap:wrap; gap:6px; justify-content:center; max-width:760px; margin:0 auto 16px; }
.az button{ min-width:34px; height:34px; padding:0 8px; border-radius:9px; border:1px solid var(--line-3); background:#fff; color:var(--ink); font-family:var(--sans); font-size:14px; font-weight:600; cursor:pointer; transition:background .15s ease,color .15s ease; }
.az button:hover{ background:var(--panel); }
.az button.active{ background:var(--ink); color:#fff; border-color:var(--ink); }
.az button:disabled{ opacity:.3; cursor:default; }
.lex-cats{ display:flex; flex-wrap:wrap; gap:6px; justify-content:center; max-width:760px; margin:0 auto 16px; }
.lex-cats button{ height:30px; padding:0 14px; border-radius:var(--r-pill); border:1px solid var(--line-3); background:#fff; color:var(--ink); font-family:var(--sans); font-size:13px; font-weight:500; letter-spacing:0; text-transform:none; cursor:pointer; transition:background .15s ease,color .15s ease; }
.lex-cats button:hover{ background:var(--panel); }
.lex-cats button.active{ background:var(--purple); color:#fff; border-color:var(--purple); }
.lex-count{ text-align:center; font-family:var(--sans); font-size:13px; color:var(--ink-soft); margin-bottom:28px; }
.lex-group{ margin-bottom:18px; }
.lex-group__letter{ font-family:var(--sans); font-size:18px; font-weight:700; letter-spacing:-0.01em; color:var(--ink); border-bottom:1px solid var(--line-3); padding-bottom:8px; margin:0 0 6px; }
.lex-item{ display:block; padding:16px 4px; border-bottom:1px solid var(--line-2); text-decoration:none; color:var(--ink); transition:background .12s ease; }
.lex-item:hover{ background:var(--paper); }
.lex-item b{ font-size:18px; font-weight:600; }
.lex-item .lex-cat{ font-family:var(--sans); font-size:12px; font-weight:500; letter-spacing:0; text-transform:none; color:var(--purple); background:rgba(60,0,95,0.07); padding:3px 10px; border-radius:var(--r-pill); margin-left:8px; }
.lex-item p{ margin:6px 0 0; font-size:14.5px; color:var(--ink-soft); line-height:1.5; }
.lex-empty{ text-align:center; color:var(--ink-soft); padding:40px 0; display:none; }
/* Begriffsseite */
.term-def{ font-size:21px; line-height:1.6; color:var(--ink-2,#2A2530); max-width:720px; }
.seealso{ display:flex; flex-wrap:wrap; gap:8px; }
.seealso a{ padding:8px 16px; border-radius:var(--r-pill); background:var(--panel); color:var(--purple); font-size:14px; text-decoration:none; }
.seealso a:hover{ background:rgba(60,0,95,0.12); }
/* ============================================================
   WHITEPAPER — Hub, Landingpages & Lead-Formular
   ============================================================ */
.wp-grid{ display:grid; grid-template-columns:1.5fr 1fr; gap:48px; align-items:start; }
.wp-aside{ position:sticky; top:88px; }
.wp-panel{ background:#fff; border:1px solid rgba(0,0,0,0.08); border-radius:var(--r-card); padding:32px 30px; box-shadow:0 18px 48px rgba(60,0,95,0.10); }
.wp-panel--dark{ background:linear-gradient(165deg,#2A0040 0%,#14001f 100%); color:var(--cream); border:none; }
.wp-panel__eyebrow{ font-family:var(--sans); font-size:13px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color:var(--red); margin:0 0 10px; }
.wp-panel--dark .wp-panel__eyebrow{ color:var(--pink); }
.wp-panel h3{ font-size:22px; font-weight:600; letter-spacing:-0.02em; margin:0 0 6px; }
.wp-panel p.wp-sub{ font-size:14px; color:var(--ink-soft); margin:0 0 20px; line-height:1.5; }
.wp-panel--dark p.wp-sub{ color:rgba(246,242,236,0.75); }

/* Inhaltsverzeichnis / „Das erwartet Sie" */
.wp-toc{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; }
.wp-toc li{ display:flex; gap:12px; align-items:flex-start; font-size:15.5px; color:var(--ink); line-height:1.5; }
.wp-toc li::before{ content:""; flex:0 0 auto; width:20px; height:20px; margin-top:2px; border-radius:50%; background:rgba(60,0,95,0.08); background-image:linear-gradient(135deg,var(--purple),var(--red)); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/14px no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/14px no-repeat; }

/* Lead-Formular */
.wp-form{ display:flex; flex-direction:column; gap:14px; }
.wp-field{ display:flex; flex-direction:column; gap:6px; }
.wp-field label{ font-size:12.5px; font-weight:600; color:var(--ink-soft); letter-spacing:0.01em; }
.wp-panel--dark .wp-field label{ color:rgba(246,242,236,0.7); }
.wp-form input, .wp-form select, .wp-form textarea{ padding:13px 16px; border:1px solid var(--line-2); border-radius:12px; font-family:var(--sans); font-size:14px; color:var(--ink); background:#fff; outline:none; transition:border-color .15s, box-shadow .15s; width:100%; }
.wp-form input:focus, .wp-form select:focus, .wp-form textarea:focus{ border-color:var(--purple); box-shadow:0 0 0 3px rgba(60,0,95,0.10); }
.wp-choice{ display:flex; gap:10px; }
.wp-choice label{ flex:1; display:flex; align-items:center; justify-content:center; gap:8px; padding:11px 12px; border:1px solid var(--line-2); border-radius:var(--r-pill); font-size:13.5px; font-weight:500; color:var(--ink-soft); cursor:pointer; background:#fff; transition:all .15s; }
.wp-choice input{ position:absolute; opacity:0; width:0; height:0; }
.wp-choice label:has(input:checked){ border-color:var(--purple); background:rgba(60,0,95,0.06); color:var(--purple); }
/* Dunkles Panel: eigene Pill-Farben, sonst gewinnt .wp-panel--dark .wp-field label (Cream auf Weiß). */
.wp-panel--dark .wp-choice label{ background:rgba(255,255,255,0.10); border-color:rgba(255,255,255,0.25); color:rgba(246,242,236,0.85); }
.wp-panel--dark .wp-choice label:has(input:checked){ background:var(--cream); border-color:var(--cream); color:var(--purple); }
.wp-consent{ display:flex; gap:10px; align-items:flex-start; font-size:12.5px; color:var(--ink-soft); line-height:1.45; }
.wp-consent input{ flex:0 0 auto; width:16px; height:16px; margin-top:2px; accent-color:var(--purple); }
.wp-panel--dark .wp-consent{ color:rgba(246,242,236,0.7); }
.wp-form .btn{ width:100%; justify-content:center; margin-top:4px; }
.wp-note{ font-size:11.5px; color:var(--ink-faint); margin:2px 0 0; line-height:1.4; text-align:center; }
.wp-panel--dark .wp-note{ color:rgba(246,242,236,0.5); }

/* Erfolgsmeldung nach Absenden */
.wp-success{ display:none; text-align:center; }
.wp-success.is-active{ display:block; }
.wp-success__icon{ width:54px; height:54px; margin:0 auto 16px; border-radius:50%; background:rgba(230,0,45,0.10); color:var(--red); display:flex; align-items:center; justify-content:center; font-size:26px; }
.wp-panel--dark .wp-success__icon{ background:rgba(255,255,255,0.10); color:var(--pink); }

/* freier Download */
.wp-dl{ display:flex; flex-direction:column; gap:10px; }
.wp-badge{ display:inline-flex; align-items:center; gap:6px; align-self:flex-start; font-family:var(--sans); font-size:13px; font-weight:500; letter-spacing:0; text-transform:none; padding:5px 12px; border-radius:var(--r-pill); }
.wp-badge--free{ background:rgba(230,0,45,0.10); color:var(--red); }
.wp-badge--gated{ background:rgba(60,0,95,0.08); color:var(--purple); }
.wp-panel--dark .wp-badge--free{ background:rgba(255,255,255,0.12); color:var(--pink); }

/* Hub-Karten-Fußzeile */
.wp-cardfoot{ display:flex; align-items:center; justify-content:space-between; margin-top:14px; }

@media (max-width:860px){
  .wp-grid{ grid-template-columns:1fr; gap:32px; }
  .wp-aside{ position:static; }
}

/* ============================================================
   Action-Modal — Conversion (Variante A: Optionskarten)
   Buttons mit Kontakt-Aktion öffnen dieses Modal statt zu navigieren.
   ============================================================ */
.actmodal{ position:fixed; inset:0; z-index:1100; display:flex; align-items:center; justify-content:center;
  padding:24px; background:rgba(37,0,59,0.55); backdrop-filter:saturate(160%) blur(6px);
  opacity:0; transition:opacity .18s ease; }
.actmodal[hidden]{ display:none; }
.actmodal.is-open{ opacity:1; }
.actmodal__panel{ position:relative; width:min(940px,100%); height:min(760px,90vh); max-height:90vh;
  display:flex; flex-direction:column; overflow:hidden;
  background:#fff; border-radius:24px; box-shadow:0 30px 80px rgba(37,0,59,0.35);
  transform:translateY(14px); transition:transform .22s cubic-bezier(.2,.8,.2,1); }
/* Feste Panel-Höhe → das Modal behält in allen Ansichten dieselbe Größe.
   Die jeweils sichtbare Ansicht füllt das Panel und scrollt bei Bedarf intern. */
.actmodal__view:not([hidden]){ flex:1 1 auto; min-height:0; overflow-y:auto; }
.actmodal.is-open .actmodal__panel{ transform:translateY(0); }
.actmodal__close{ position:absolute; top:14px; right:14px; z-index:3; width:40px; height:40px; border-radius:999px;
  border:1px solid var(--line,rgba(60,0,95,0.12)); background:#fff; color:var(--ink); font-size:22px; line-height:1;
  cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .15s ease; }
.actmodal__close:hover{ background:var(--cream); }
.actmodal__back{ position:absolute; top:18px; left:22px; z-index:3; background:none; border:0; cursor:pointer;
  font-family:var(--ff); font-size:14px; color:var(--ink-soft); padding:4px 0; }
.actmodal__back:hover{ color:var(--red); }

.actmodal__head{ text-align:center; padding:46px 44px 6px; }
.actmodal__title{ font-size:clamp(24px,3.2vw,30px); letter-spacing:-0.025em; margin:0 0 10px; color:var(--ink); }
.actmodal__sub{ font-size:16px; color:var(--ink-soft); margin:0 auto; max-width:52ch; }

.actmodal__opts{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; padding:24px 44px 14px; }
.actopt{ position:relative; display:flex; flex-direction:column; gap:12px; text-align:left; padding:24px 22px;
  border:1px solid var(--line,rgba(60,0,95,0.12)); border-radius:18px; background:#fff; cursor:pointer;
  text-decoration:none; color:inherit; transition:box-shadow .2s ease, transform .2s ease, border-color .2s ease; }
.actopt:hover{ box-shadow:0 16px 48px rgba(60,0,95,0.12); transform:translateY(-3px); border-color:rgba(60,0,95,0.25); }
.actopt--hot{ border-color:var(--red); box-shadow:0 8px 28px rgba(230,0,45,0.12); }
.actopt__hint{ position:absolute; top:-10px; left:22px; font-family:var(--mono); font-size:10px; font-weight:600;
  letter-spacing:0.12em; text-transform:uppercase; color:#fff; background:var(--red); padding:3px 9px; border-radius:999px; }
.actopt__chip{ display:inline-flex; align-items:center; justify-content:center; width:46px; height:46px;
  border-radius:12px; background:rgba(60,0,95,0.08); color:var(--purple); align-self:flex-start; }
.actopt__chip svg{ width:23px; height:23px; }
.actopt__chip--red{ background:rgba(230,0,45,0.10); color:var(--red); }
.actopt__title{ font-size:18px; font-weight:600; letter-spacing:-0.01em; }
.actopt__text{ font-size:14px; color:var(--ink-soft); flex:1; }
.actopt__cta{ font-family:var(--ff); font-size:14px; font-weight:500; color:var(--red); }
.actopt__cta::after{ content:" →"; }

.actmodal__trust{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px 22px; margin:8px 0 0;
  padding:14px 44px 40px; font-family:var(--mono); font-size:11px; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--ink-faint); }
.actmodal__trust span{ display:inline-flex; align-items:center; gap:6px; }
.actmodal__trust span+span::before{ content:"·"; margin-right:22px; color:var(--line,rgba(60,0,95,0.2)); }

/* Rückruf-Formular */
.actmodal__form{ padding:24px 44px 44px; max-width:560px; margin:0 auto; }
.actfield{ margin-bottom:14px; }
.actfield label{ display:block; font-size:13px; color:var(--ink-soft); margin-bottom:6px; }
.actfield__opt{ color:var(--ink-faint); }
.actfield-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.actmodal__hp{ position:absolute !important; left:-9999px; width:1px; height:1px; opacity:0; pointer-events:none; }
.actmodal__hint{ font-size:12px; color:var(--ink-faint); margin:12px 0 0; text-align:center; }
.actmodal__note{ font-size:13px; color:var(--red); margin:12px 0 0; text-align:center; }
.actmodal__note a{ color:var(--red); }

/* Erfolg */
.actmodal__view[hidden]{ display:none; }   /* schlägt display:flex der Center-View */
.actmodal__view--center{ text-align:center; padding:54px 44px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; }
.actmodal__check{ width:56px; height:56px; border-radius:50%; background:rgba(230,0,45,0.10); color:var(--red);
  display:flex; align-items:center; justify-content:center; font-size:28px; }

/* Calendly — füllt die Kalender-Ansicht vollständig, damit das transparente
   Calendly-iframe exakt so hoch ist wie sein Container (kein durchscheinender
   Spinner mehr) und das Modal nicht springt. */
.actmodal__view[data-view="calendar"]:not([hidden]){ display:flex; flex-direction:column;
  overflow:hidden; padding:14px 10px 12px; }
/* Vorwärm-Zustand: lädt Calendly unsichtbar im Hintergrund, sobald das Modal
   öffnet. Volle Panel-Breite (position:absolute inset:0), damit Calendly korrekt
   misst; visibility:hidden hält es aus Fokus & a11y heraus. */
.actmodal__view[data-view="calendar"][data-prewarm]{ display:flex; flex-direction:column;
  overflow:hidden; padding:14px 10px 12px; position:absolute; inset:0;
  visibility:hidden; pointer-events:none; }
.actmodal__calendly{ flex:1 1 auto; min-height:0; }
.actmodal__calendly .calendly-inline-widget{ height:100% !important; min-width:0 !important; }
.actmodal__calendly iframe{ height:100% !important; }
.actmodal__calendly .calendly-spinner{ display:none !important; }

@media (max-width:760px){
  .actmodal{ padding:0; }
  .actmodal__panel{ width:100%; max-height:100vh; min-height:100vh; border-radius:0; }
  .actmodal__opts{ grid-template-columns:1fr; padding:22px 20px 8px; }
  .actmodal__head{ padding:52px 20px 6px; }
  .actmodal__form{ padding:20px; }
  .actmodal__trust{ padding:14px 20px 32px; }
  .actfield-row{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion: reduce){
  .actmodal, .actmodal__panel{ transition:none; }
  .actopt:hover{ transform:none; }
}

/* ============================================================
   ROOM-GRID  (Raumgrößen als bildbetonte, klickbare Karten + Modal)
   Vier Karten nebeneinander (responsiv 4 → 2 → 1), gleich hoch.
   Klick auf die ganze Karte öffnet das Detail-Modal (großes Bild,
   Detailtext, empfohlenes Setup, „Passt, wenn …" + CTA).
   ============================================================ */
.roomgrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; align-items:stretch; }
.roomcard{ position:relative; display:flex; flex-direction:column; background:var(--white); border:1px solid var(--line); border-radius:var(--r-card); overflow:hidden; cursor:pointer; text-align:left; transition:box-shadow .2s ease, transform .2s ease; }
.roomcard:hover{ box-shadow:0 18px 50px rgba(60,0,95,0.14); transform:translateY(-3px); }
.roomcard:focus-visible{ outline:2px solid var(--purple); outline-offset:3px; }

/* Illustration wie auf /loesungen/ (card__media--illu): freigestellt auf weißem Feld, contain + Padding */
.roomcard__media{ position:relative; aspect-ratio:1/1; background:#fff; display:flex; align-items:center; justify-content:center; padding:14px 16px; border-bottom:1px solid var(--line); }
.roomcard__media img{ width:100%; height:100%; object-fit:contain; display:block; }
.roomcard__plus{ position:absolute; top:12px; right:12px; width:30px; height:30px; border-radius:50%; border:1px solid var(--line); background:#fff; color:var(--purple); display:flex; align-items:center; justify-content:center; font-size:19px; line-height:1; }
.roomcard__more{ position:absolute; left:0; right:0; bottom:0; padding:14px 16px 10px; font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:0.06em; color:var(--purple); text-align:center; background:linear-gradient(to top, rgba(255,255,255,0.96), rgba(255,255,255,0)); opacity:0; transition:opacity .2s ease; }
.roomcard:hover .roomcard__more, .roomcard:focus-visible .roomcard__more{ opacity:1; }

.roomcard__body{ display:flex; flex-direction:column; padding:20px 22px 24px; flex:1; }
.roomcard__cap{ display:flex; align-items:baseline; gap:9px; margin:0 0 6px; }
.roomcard__cap b{ font-size:21px; font-weight:700; line-height:1; letter-spacing:-0.02em; color:var(--purple); }
.roomcard__cap span{ font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:0.08em; color:var(--ink-soft); }
.roomcard__body .h3{ margin-bottom:8px; }
.roomcard__lead{ color:var(--ink-soft); margin:0; font-size:14px; line-height:1.5; }

@media (max-width:980px){ .roomgrid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .roomgrid{ grid-template-columns:1fr; } }

/* ---- Detail-Modal (ein <dialog> je Raumgröße) ---- */
.roommodal{ border:none; border-radius:24px; padding:0; max-width:920px; width:calc(100% - 40px); box-shadow:0 40px 120px rgba(20,0,30,0.45); overflow:visible; }
.roommodal::backdrop{ background:rgba(20,0,30,0.55); }
.roommodal__inner{ position:relative; border-radius:24px; overflow:hidden; background:var(--white); }
.roommodal__grid{ display:grid; grid-template-columns:1fr 1fr; }
.roommodal__media{ background:var(--cream); display:flex; align-items:center; justify-content:center; padding:32px; }
.roommodal__media img{ width:100%; height:100%; object-fit:contain; max-height:440px; }
.roommodal__content{ padding:40px 40px 36px; }
.roommodal__cap{ font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:0.08em; color:var(--red); margin:0 0 10px; }
.roommodal__title{ font-size:28px; font-weight:700; letter-spacing:-0.025em; margin:0 0 16px; color:var(--ink); }
.roommodal__text{ color:var(--ink-soft); line-height:1.6; margin:0 0 22px; }
.roommodal__slabel{ font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:0.14em; color:var(--red); margin:0 0 10px; }
.roommodal__setup{ list-style:none; padding:0; margin:0 0 22px; display:flex; flex-direction:column; gap:9px; }
.roommodal__setup li{ position:relative; padding-left:24px; font-size:14px; line-height:1.45; color:var(--ink); }
.roommodal__setup li::before{ content:"→"; position:absolute; left:0; color:var(--red); font-weight:600; }
.roommodal__fit{ background:var(--cream); border-radius:14px; padding:14px 16px; font-size:14px; line-height:1.5; color:var(--ink); margin:0 0 24px; }
.roommodal__close{ position:absolute; top:14px; right:16px; z-index:3; border:none; background:rgba(255,255,255,0.85); width:38px; height:38px; border-radius:50%; font-size:22px; line-height:1; cursor:pointer; color:var(--ink); }
@media (max-width:680px){ .roommodal__grid{ grid-template-columns:1fr; } .roommodal__media{ padding:22px; } .roommodal__media img{ max-height:260px; } .roommodal__content{ padding:26px 22px; } .roommodal__title{ font-size:23px; } }

/* ============================================================
   PROSE-TABLE — schlichte Daten-Tabelle für Artikel (Blog/Insights)
   Tokenbasiert, auf Mobile horizontal scrollbar.
   ============================================================ */
.prose-table{ overflow-x:auto; margin:24px 0; border:1px solid var(--line); border-radius:14px; -webkit-overflow-scrolling:touch; }
.prose-table table{ width:100%; border-collapse:collapse; font-size:14px; min-width:520px; }
.prose-table th, .prose-table td{ padding:12px 16px; text-align:left; border-bottom:1px solid var(--line); }
.prose-table thead th{ background:var(--cream); font-family:var(--mono); font-size:12px; text-transform:uppercase; letter-spacing:0.04em; color:var(--purple); }
.prose-table tbody tr:last-child td{ border-bottom:none; }
.prose-table td{ color:var(--ink-soft); }
.prose-table td:first-child{ color:var(--ink); font-weight:500; }

/* ============================================================
   DISPLAY-CALCULATOR — interaktiver Displaygrößen-Rechner (.dcalc)
   Tokenbasiert, responsiv (2 Spalten → 1), Steuerelemente tastaturbedienbar.
   ============================================================ */
.dcalc{ display:grid; grid-template-columns:1fr 1fr; gap:28px; align-items:start; }
@media (max-width:860px){ .dcalc{ grid-template-columns:1fr; } }
.dcalc__controls{ display:flex; flex-direction:column; gap:22px; }
.dcalc__field{ display:flex; flex-direction:column; gap:10px; }
.dcalc__label{ font-weight:600; font-size:15px; color:var(--ink); display:block; }
.dcalc__hint{ display:block; font-weight:400; font-size:13px; color:var(--ink-soft); margin-top:2px; }
.dcalc__sliderrow{ display:flex; align-items:center; gap:16px; }
.dcalc__slider{ flex:1; accent-color:var(--purple); height:6px; }
.dcalc__distval{ font-family:var(--mono); font-size:24px; font-weight:600; color:var(--purple); min-width:84px; text-align:right; }
.dcalc__seg{ border:none; margin:0; padding:0; min-width:0; }
.dcalc__segopts{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:10px; }
@media (max-width:480px){ .dcalc__segopts{ grid-template-columns:1fr; } }
.dcalc__opt{ display:flex; gap:10px; padding:12px 14px; border:1px solid var(--line); border-radius:12px; background:var(--white); cursor:pointer; transition:border-color .15s, box-shadow .15s; }
.dcalc__opt:hover{ border-color:var(--purple); }
.dcalc__opt:focus-within{ outline:2px solid var(--purple); outline-offset:2px; }
.dcalc__opt:has(input:checked){ border-color:var(--purple); box-shadow:inset 0 0 0 1px var(--purple); }
.dcalc__opt input{ margin-top:3px; accent-color:var(--purple); flex:none; }
.dcalc__optbody{ display:flex; flex-direction:column; gap:2px; }
.dcalc__optbody b{ font-size:14px; color:var(--ink); }
.dcalc__optbody small{ font-size:12.5px; color:var(--ink-soft); line-height:1.4; }
.dcalc__togglewrap{ flex-direction:row; align-items:flex-start; gap:14px; }
.dcalc__switch{ position:relative; flex:none; width:46px; height:26px; }
.dcalc__switch input{ position:absolute; inset:0; opacity:0; margin:0; width:100%; height:100%; cursor:pointer; }
.dcalc__track{ position:absolute; inset:0; background:var(--line); border-radius:999px; transition:background .15s; }
.dcalc__track::after{ content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(14,11,18,0.25); transition:transform .15s; }
.dcalc__switch input:checked + .dcalc__track{ background:var(--purple); }
.dcalc__switch input:checked + .dcalc__track::after{ transform:translateX(20px); }
.dcalc__switch input:focus-visible + .dcalc__track{ outline:2px solid var(--purple); outline-offset:2px; }
.dcalc__toggletext{ display:flex; flex-direction:column; gap:2px; cursor:pointer; }
.dcalc__toggletext b{ font-size:14px; color:var(--ink); }
.dcalc__toggletext small{ font-size:12.5px; color:var(--ink-soft); line-height:1.4; }
.dcalc__result{ background:var(--white); border:1px solid var(--line); border-radius:20px; padding:28px; display:flex; flex-direction:column; gap:18px; }
.dcalc__rec{ display:flex; flex-direction:column; gap:2px; }
.dcalc__recsize{ font-size:56px; font-weight:700; letter-spacing:-0.03em; line-height:1; color:var(--purple); }
.dcalc__reclabel{ font-family:var(--mono); font-size:12px; text-transform:uppercase; letter-spacing:0.06em; color:var(--ink-soft); }
.dcalc__eval{ font-size:15px; line-height:1.55; color:var(--ink); margin:0; }
.dcalc__bar{ display:flex; gap:8px; }
.dcalc__tile{ flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; padding:12px 6px; border:1px solid var(--line); border-radius:12px; text-align:center; }
.dcalc__tile.is-small{ opacity:.45; }
.dcalc__tile.is-rec{ border-color:var(--purple); background:rgba(60,0,95,0.06); }
.dcalc__tinch{ font-weight:700; font-size:16px; color:var(--ink); }
.dcalc__th{ font-size:12px; color:var(--ink-soft); }
.dcalc__tstatus{ font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:0.04em; color:var(--ink-soft); }
.dcalc__tile.is-rec .dcalc__tstatus{ color:var(--purple); font-weight:600; }
.dcalc__dual{ border:1px dashed var(--purple); border-radius:14px; padding:16px 18px; background:rgba(60,0,95,0.04); }
.dcalc__dualtitle{ font-weight:600; font-size:14px; color:var(--purple); margin:0 0 6px; }
.dcalc__dualtext{ font-size:13.5px; line-height:1.5; color:var(--ink); margin:0; }
.dcalc__foot{ font-size:11.5px; line-height:1.5; color:var(--ink-soft); margin:0; }
.dcalc__cta{ border-top:1px solid var(--line); padding-top:18px; display:flex; flex-direction:column; gap:12px; align-items:flex-start; }
.dcalc__cta p{ font-size:14px; color:var(--ink); margin:0; }

/* Rechner als Modal: Trigger-Band (unter den Raumkarten) + Dialog */
.dcalc-trigger{ display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center; }
.dcalc-trigger__lead{ max-width:560px; font-size:16px; line-height:1.55; color:var(--ink-soft); margin:0; }
.dcalc-modal{ border:none; border-radius:24px; padding:0; max-width:980px; width:calc(100% - 40px); background:var(--cream); box-shadow:0 40px 120px rgba(20,0,30,0.45); overflow:visible; }
.dcalc-modal::backdrop{ background:rgba(20,0,30,0.55); }
.dcalc-modal__inner{ position:relative; border-radius:24px; background:var(--cream); padding:40px; max-height:90vh; overflow-y:auto; }
.dcalc-modal__inner .section-head{ margin-bottom:26px; }
.dcalc-modal__close{ position:absolute; top:14px; right:16px; z-index:3; border:none; background:rgba(255,255,255,0.85); width:38px; height:38px; border-radius:50%; font-size:22px; line-height:1; cursor:pointer; color:var(--ink); }
@media (max-width:560px){ .dcalc-modal__inner{ padding:30px 18px 24px; } }

/* ============================================================
   Icon-Bibliothek — eigene Line-Icons (lib/icons.php)
   currentColor → erben die Token-Farbe ihres Kontexts.
   ============================================================ */
.icon{ display:inline-block; vertical-align:middle; flex:none; }
/* Icons in CTAs/Links bündig zur Schrift skalieren */
.btn .icon{ width:1.15em; height:1.15em; }

/* Galerie / Referenz unter /design/icons/ */
.icongrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:16px; }
.iconcard{ display:flex; flex-direction:column; align-items:center; gap:12px; padding:22px 14px; background:#fff; border:1px solid var(--line); border-radius:16px; transition:box-shadow .2s ease, transform .2s ease; }
.iconcard:hover{ box-shadow:0 16px 48px rgba(60,0,95,0.12); transform:translateY(-2px); }
.iconcard .icon{ width:30px; height:30px; color:var(--purple); }
.iconcard__name{ font-family:var(--mono); font-size:12.5px; color:var(--ink-soft); letter-spacing:0; word-break:break-all; text-align:center; }
.iconcard--dark{ background:var(--purple-deep); border-color:transparent; }
.iconcard--dark .icon{ color:var(--cream); }
.iconcard--dark .iconcard__name{ color:rgba(246,242,236,0.7); }

/* ============================================================
   NIS2-CHECK — 3-step eligibility screener (.ncheck)
   Token-based, responsive. Without JS: all three steps visible + no-JS CTA.
   With JS (.is-enhanced on .ncheck__wrap): one step at a time, computed result.
   "Weiter" buttons are hidden without JS and shown only in enhanced mode.
   ============================================================ */
.ncheck__wrap{ max-width:720px; margin:0 auto; display:flex; flex-direction:column; gap:28px; }
.ncheck__step{ display:flex; flex-direction:column; gap:18px; }
.ncheck__step[hidden]{ display:none; }   /* schlägt das display:flex, sonst bleiben alle Steps gleichzeitig sichtbar */
.ncheck__result[hidden]{ display:none; }
.ncheck__step-head{ display:flex; flex-direction:column; gap:6px; }
.ncheck__stepmeta{ font-family:var(--mono); font-size:12px; text-transform:uppercase; letter-spacing:0.06em; color:var(--ink-soft); margin:0; }
.ncheck__stepq{ font-size:20px; font-weight:600; letter-spacing:-0.015em; color:var(--ink); margin:0; }
.ncheck__fieldset{ border:none; margin:0; padding:0; min-width:0; }
.ncheck__legend{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }
.ncheck__opts{ display:flex; flex-direction:column; gap:10px; }
.ncheck__opt{ display:flex; gap:12px; align-items:flex-start; padding:14px 16px; border:1px solid var(--line); border-radius:12px; background:var(--white); cursor:pointer; transition:border-color .15s, box-shadow .15s; }
.ncheck__opt:hover{ border-color:var(--purple); }
.ncheck__opt:focus-within{ outline:2px solid var(--purple); outline-offset:2px; }
.ncheck__opt:has(input:checked){ border-color:var(--purple); box-shadow:inset 0 0 0 1px var(--purple); }
.ncheck__opt input{ margin-top:4px; accent-color:var(--purple); flex:none; }
.ncheck__optbody{ display:flex; flex-direction:column; gap:2px; }
.ncheck__optbody b{ font-size:15px; font-weight:600; color:var(--ink); }
.ncheck__optbody small{ font-size:12.5px; color:var(--ink-soft); line-height:1.4; }

/* "Weiter" / "Ergebnis anzeigen" buttons: only visible in enhanced mode */
.ncheck__next{ display:none; }
.ncheck__next:disabled{ opacity:.45; cursor:not-allowed; }
.ncheck__wrap.is-enhanced .ncheck__next{ display:inline-flex; }

/* Result card */
.ncheck__result{ background:var(--white); border:1px solid var(--line); border-radius:20px; padding:32px; display:flex; flex-direction:column; gap:14px; }
.ncheck__result-eyebrow{ font-family:var(--sans); font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:0.06em; margin:0; }
.ncheck__result-eyebrow--alert{ color:var(--red-deep); }
.ncheck__result-eyebrow--neutral{ color:var(--ink-soft); }
.ncheck__result-title{ font-size:22px; font-weight:700; letter-spacing:-0.02em; color:var(--ink); margin:0; }
.ncheck__result-text{ font-size:15px; line-height:1.6; color:var(--ink); margin:0; }
.ncheck__result-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:16px; padding-top:6px; }
.ncheck__restart{ font-size:13px; color:var(--ink-soft); background:none; border:none; cursor:pointer; text-decoration:underline; padding:0; font-family:var(--sans); }
.ncheck__restart:hover{ color:var(--ink); }

/* No-JS fallback CTA: visible by default, hidden when JS activates .is-enhanced */
.ncheck__noscript{ display:flex; flex-direction:column; align-items:flex-start; gap:14px; }
.ncheck__noscript p{ font-size:15px; color:var(--ink-soft); margin:0; }
.ncheck__wrap.is-enhanced .ncheck__noscript{ display:none; }

/* Mobile (375px): full-width buttons */
@media (max-width:560px){
  .ncheck__next{ width:100%; justify-content:center; }
  .ncheck__result-actions .btn{ width:100%; justify-content:center; }
  /* .way-CTA hat white-space:nowrap — auf engen Screens wrappen lassen statt zu überlaufen */
  .way{ flex-wrap:wrap; gap:12px 18px; }
  .way__cta{ flex-basis:100%; text-align:center; }
}

/* expand-grid ("UniFi-Kachel-Element") — aufklappbares Feature-Grid, domainübergreifend.
   Reine Line-Icons (ohne Hintergrund-Box, UniFi-Optik). 4 Kacheln je Reihe, alle gleich
   hoch (feste Höhe im Enhanced-Modus). Ohne JS: alle Kacheln zeigen Icon+Titel+Text
   (Fallback). Mit JS (.is-enhanced): eingeklappte Icon-Kacheln, eine offen zur Zeit —
   die offene Kachel wird BREITER, ihre Reihen-Nachbarn schmaler (Breiten per Script
   gesetzt), kein Umbruch/Verspringen. KEIN scrollIntoView() (vgl. CLAUDE.md). */
.xgrid{ display:flex; flex-wrap:wrap; gap:14px; align-items:stretch; }
.xtile{ position:relative; flex:0 1 calc(25% - 11px); min-width:0; background:#fff; border:1px solid var(--line); border-radius:16px; padding:28px 26px; display:flex; flex-direction:column; box-shadow:0 1px 3px rgba(60,0,95,0.05); }
.xtile__main{ display:flex; flex-direction:column; flex:1; min-width:0; }
.xtile__icon{ display:flex; align-items:flex-start; color:var(--ink); margin-bottom:22px; }
.xtile__title{ font-size:20px; font-weight:600; letter-spacing:-0.015em; line-height:1.15; margin:0; color:var(--ink); overflow-wrap:break-word; hyphens:auto; }
.xtile__detail{ margin-top:12px; }
.xtile__text{ font-size:15px; color:var(--ink-soft); line-height:1.55; margin:0; }
.xtile__media{ margin-top:16px; border-radius:12px; overflow:hidden; border:1px solid var(--line); }
.xtile__media img{ display:block; width:100%; height:100%; object-fit:cover; }
.xtile__toggle{ display:none; }

.xgrid.is-enhanced .xtile{ height:240px; overflow:hidden; cursor:pointer; transition:box-shadow .18s ease; }
.xgrid.is-enhanced .xtile:hover{ box-shadow:0 10px 30px rgba(60,0,95,0.12); }
.xgrid.is-enhanced .xtile:focus-visible{ outline:2px solid var(--purple); outline-offset:2px; }
.xgrid.is-enhanced .xtile__title{ margin-top:auto; }
.xgrid.is-enhanced .xtile__detail,
.xgrid.is-enhanced .xtile__media{ display:none; }
.xgrid.is-enhanced .xtile.is-open .xtile__title{ margin-top:0; }
.xgrid.is-enhanced .xtile.is-open .xtile__detail{ display:block; }
/* Offene Bild-Kachel: Split — Text links auf deckend Weiß, Bild rechts. Text liegt NIE über dem Bild (UniFi-Prinzip → immer lesbar). */
.xgrid.is-enhanced .xtile.is-open.xtile--has-img{ padding:0; flex-direction:row; align-items:stretch; gap:0; }
.xgrid.is-enhanced .xtile.is-open.xtile--has-img .xtile__main{ flex:1.12 1 0; min-width:0; position:relative; z-index:1; background:#fff; padding:26px 28px; display:flex; flex-direction:column; }
.xgrid.is-enhanced .xtile.is-open.xtile--has-img .xtile__detail{ margin-top:12px; }
.xgrid.is-enhanced .xtile.is-open.xtile--has-img .xtile__media{ display:block; flex:1 1 0; align-self:stretch; position:relative; margin:0; border:none; border-radius:0; z-index:0; }
.xgrid.is-enhanced .xtile.is-open.xtile--has-img .xtile__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
/* Weiche Naht: schmaler weißer Verlauf nur über der linken Bildkante — nicht unter dem Text. */
.xgrid.is-enhanced .xtile.is-open.xtile--has-img .xtile__media::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:64px; background:linear-gradient(to right, #fff, rgba(255,255,255,0)); z-index:2; }

/* 3-Spalten-Variante (cols:3) — nur Desktop; Tablet/Mobile bleiben bei 2/1. */
@media (min-width:981px){
  .xgrid--cols3 .xtile{ flex-basis:calc(33.333% - 10px); }
}
@media (max-width:980px){
  .xtile{ flex-basis:calc(50% - 7px); }
}
@media (max-width:560px){
  .xtile{ flex-basis:100%; }
  .xgrid.is-enhanced .xtile{ height:auto; min-height:180px; overflow:visible; }
  /* Offene Bild-Kachel: gestapelt — Text oben, Bild darunter. */
  .xgrid.is-enhanced .xtile.is-open.xtile--has-img{ flex-direction:column; min-height:0; }
  .xgrid.is-enhanced .xtile.is-open.xtile--has-img .xtile__main{ flex:0 0 auto; }
  .xgrid.is-enhanced .xtile.is-open.xtile--has-img .xtile__media{ flex:0 0 auto; min-height:180px; margin:0 26px 26px; border-radius:12px; overflow:hidden; }
  .xgrid.is-enhanced .xtile.is-open.xtile--has-img .xtile__media::before{ display:none; }
}