/* ═══════════════════════════════════════════════════════════════════
   VEXORA AI — Product Showcase
   Öffentliche Verkaufsseite. Kein Systembestandteil.

   Grundsatz: Das Produkt ist der Held. Jede Regel hier dient dazu,
   die echten Aufnahmen groß, ruhig und glaubwürdig zu zeigen.

   Farben: Tinte (fast schwarz) · Papier (fast weiß) · Violett (Akzent).
   Mehr nicht.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  /* Dunkel — der Normalfall der Seite */
  --tinte:      #07070D;
  --tinte-2:    #0B0B13;
  --flaeche:    #11111B;
  --flaeche-2:  #171722;
  --linie:      #202030;
  --linie-2:    #2C2C42;

  /* Hell — die eine Atempause in der Mitte */
  --papier:     #F5F5F8;
  --papier-2:   #E7E7EE;
  --papier-tint:#15151F;

  --text:       #F4F4F9;
  --matt:       #A4A4C0;
  --leise:      #6B6B8C;

  --akzent:     #8B5CF6;
  --akzent-2:   #A78BFA;
  --akzent-3:   #C4B5FD;
  --tief:       #5B21B6;

  --gruen:      #34D399;

  --r:      22px;
  --r-m:    15px;
  --r-s:    10px;

  --spur:   1220px;   /* Lesebreite */
  --spur-b: 1480px;   /* Produktbreite */

  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --tief-schatten: 0 50px 110px -55px rgba(0,0,0,.96);
  --held-schatten:
      0 90px 170px -60px rgba(0,0,0,.96),
      0 0 0 1px rgba(139,92,246,.13),
      0 0 160px -60px rgba(139,92,246,.42);

  --weich: cubic-bezier(.22,.61,.36,1);
}

*, *::before, *::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; scroll-padding-top:96px; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0; background:var(--tinte); color:var(--text);
  font-family:var(--font); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
picture{ display:block; }
a{ color:inherit; }

.springen{
  position:absolute; left:-9999px; top:0; z-index:300;
  background:var(--akzent); color:#fff; padding:13px 22px;
  border-radius:0 0 var(--r-s) 0; font-weight:600; text-decoration:none;
}
.springen:focus{ left:0; }

:focus-visible{ outline:2px solid var(--akzent-2); outline-offset:3px;
  border-radius:6px; }

/* ══ Bahnen ═══════════════════════════════════════════════════════ */
.bahn{ width:100%; max-width:var(--spur); margin:0 auto; padding-inline:26px; }
.bahn--breit{ max-width:var(--spur-b); }
.bahn--eng{ max-width:820px; }
.mitte{ text-align:center; }

/* ══ Typografie ═══════════════════════════════════════════════════ */
h1,h2,h3,h4{ margin:0; font-weight:700; letter-spacing:-.028em; line-height:1.06; }

.riese{
  font-size:clamp(2.45rem, 7.2vw, 6.2rem); letter-spacing:-.045em; line-height:1;
}
/* Auf schmalen Geräten sind die gesetzten Umbrüche zu lang. Dort bricht
   der Satz frei und ausgewogen um. */
@media (max-width:620px){
  .riese br{ display:none; }
  .riese{ text-wrap:balance; letter-spacing:-.035em; }
}
h2{ font-size:clamp(2.1rem, 4.4vw, 3.6rem); line-height:1.08;
  text-wrap:balance; }
h3{ font-size:1.22rem; letter-spacing:-.014em; line-height:1.3; }

.schild{
  display:inline-flex; align-items:center; gap:9px;
  font-size:12px; font-weight:700; letter-spacing:.2em;
  text-transform:uppercase; color:var(--akzent-2); margin:0 0 22px;
}
.schild::before{ content:""; width:22px; height:1px; background:currentColor;
  opacity:.55; }
.mitte .schild::after{ content:""; width:22px; height:1px;
  background:currentColor; opacity:.55; }

.fuehrung{
  font-size:clamp(1.08rem, 1.5vw, 1.26rem); line-height:1.62;
  color:var(--matt); margin:24px 0 0; max-width:60ch;
}
.mitte .fuehrung{ margin-inline:auto; }

.schimmer{
  background:linear-gradient(96deg,#FFFFFF 4%,#DAD6F2 38%,var(--akzent-2) 82%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ══ Knöpfe ═══════════════════════════════════════════════════════ */
.tat{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font:inherit; font-size:15.5px; font-weight:600; text-decoration:none;
  padding:15px 28px; border-radius:999px; border:1px solid transparent;
  background:linear-gradient(135deg,var(--akzent) 0%,var(--tief) 100%);
  color:#fff; cursor:pointer; position:relative; overflow:hidden;
  box-shadow:0 18px 40px -20px rgba(139,92,246,.95);
  transition:transform .2s var(--weich), box-shadow .2s var(--weich),
             filter .2s var(--weich);
}
.tat::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(120deg,transparent 35%,rgba(255,255,255,.22) 50%,
             transparent 65%);
  transform:translateX(-120%); transition:transform .55s var(--weich);
}
.tat:hover{ transform:translateY(-2px); filter:brightness(1.07);
  box-shadow:0 26px 52px -20px rgba(139,92,246,1); }
.tat:hover::after{ transform:translateX(120%); }
.tat:active{ transform:translateY(0); }

.tat--rand{
  background:rgba(255,255,255,.035); border-color:var(--linie-2);
  color:var(--text); box-shadow:none;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.tat--rand:hover{ background:rgba(255,255,255,.07);
  border-color:var(--akzent); box-shadow:none; }
.tat--rand::after{ display:none; }

.tat--klein{ padding:11px 21px; font-size:14.5px; }
/* Auf dem Telefon trägt die Kennzeile nur den Kern - die Zielgruppe
   steht ohnehin im Satz darunter. */
.nur-breit{ display:none; }
@media (min-width:560px){ .nur-breit{ display:inline; } }
.tat--gross{ padding:18px 38px; font-size:17px; }

.tat--hell{ background:var(--papier-tint); color:var(--papier);
  box-shadow:0 18px 40px -22px rgba(0,0,0,.5); }
.tat--hell:hover{ filter:brightness(1.5); }

.tat-reihe{ display:flex; flex-wrap:wrap; gap:15px; margin-top:40px; }
.mitte .tat-reihe{ justify-content:center; }

@media (prefers-reduced-motion:reduce){
  .tat, .tat:hover{ transform:none; transition:none; }
  .tat::after{ display:none; }
}

/* ══ Fortschrittsbalken ═══════════════════════════════════════════ */
.fortschritt{
  position:fixed; top:0; left:0; height:2px; width:100%; z-index:200;
  transform:scaleX(0); transform-origin:0 50%;
  background:linear-gradient(90deg,var(--akzent),var(--akzent-3));
  pointer-events:none;
}

/* ══ Kopfleiste ═══════════════════════════════════════════════════ */
.kopf{
  position:sticky; top:0; z-index:150;
  background:rgba(7,7,13,.6);
  backdrop-filter:blur(22px) saturate(170%);
  -webkit-backdrop-filter:blur(22px) saturate(170%);
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--weich), background .3s var(--weich);
}
.kopf.fest{ border-bottom-color:var(--linie); background:rgba(7,7,13,.88); }
.kopf__bahn{ display:flex; align-items:center; gap:26px; height:74px; }
.kopf__marke{ display:flex; align-items:center; flex:none; }
.kopf__marke img{ height:20px; width:auto; }

.kopf__nav{ display:none; margin-inline:auto; gap:4px; }
.kopf__nav a{
  position:relative; font-size:14.5px; font-weight:500; color:var(--matt);
  text-decoration:none; padding:8px 15px; border-radius:999px;
  transition:color .18s var(--weich), background .18s var(--weich);
}
.kopf__nav a:hover{ color:var(--text); background:rgba(255,255,255,.05); }
.kopf__nav a[aria-current="true"]{ color:var(--text); }
.kopf__nav a[aria-current="true"]::after{
  content:""; position:absolute; left:50%; bottom:0; width:16px; height:2px;
  border-radius:2px; background:var(--akzent-2); transform:translateX(-50%);
}
.kopf__tat{ margin-left:auto; flex:none; }
@media (min-width:1000px){
  .kopf__nav{ display:flex; }
  .kopf__tat{ margin-left:0; }
}

/* ══ Abschnitte ═══════════════════════════════════════════════════ */
.teil{ padding:clamp(68px, 7.5vw, 112px) 0; position:relative; }
.teil--kante{ border-top:1px solid var(--linie); }
.teil--tief{ background:var(--tinte-2); border-block:1px solid var(--linie); }

.teil--hell{
  background:var(--papier); color:var(--papier-tint);
  border-block:1px solid var(--papier-2);
}
.teil--hell .schild{ color:var(--tief); }
.teil--hell .fuehrung{ color:#53536C; }
.teil--hell h2{ color:var(--papier-tint); }

.kopfblock{ max-width:27ch; }
.mitte .kopfblock{ margin-inline:auto; max-width:24ch; }
.kopfblock--weit{ max-width:36ch; }

/* Sanftes Erscheinen beim Scrollen */
/* Nur mit JavaScript verborgen — sonst stünde die Seite ohne JS leer da. */
.js .auf{ opacity:0; transform:translateY(26px);
  transition:opacity .75s var(--weich), transform .75s var(--weich); }
.js .auf.da{ opacity:1; transform:none; }
.js .auf--2{ transition-delay:.09s; }
.js .auf--3{ transition-delay:.18s; }
.js .auf--4{ transition-delay:.27s; }
@media (prefers-reduced-motion:reduce){
  .js .auf{ opacity:1; transform:none; transition:none; }
}

/* ══ 01 · HERO ════════════════════════════════════════════════════ */
.held{ position:relative; padding:clamp(52px,9vw,120px) 0 0; overflow:clip; }
.held::before{
  content:""; position:absolute; inset:-38% -10% auto; height:900px;
  background:
    radial-gradient(50% 48% at 50% 4%, rgba(139,92,246,.30), transparent 70%),
    radial-gradient(34% 38% at 84% 16%, rgba(91,33,182,.26), transparent 72%),
    radial-gradient(30% 34% at 14% 20%, rgba(167,139,250,.13), transparent 74%);
  pointer-events:none;
}
.held::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(62% 50% at 50% 20%, #000 0%, transparent 78%);
          mask-image:radial-gradient(62% 50% at 50% 20%, #000 0%, transparent 78%);
}
.held > *{ position:relative; z-index:1; }

/* Drei kurze Zeilen statt einer langen: bei dieser Schriftgröße bricht
   jeder längere Satz an einer willkürlichen Stelle um. */
.held__satz{ margin:0 auto; max-width:none; }
.held__zwei{
  margin:26px auto 0; max-width:26ch;
  font-size:clamp(1.24rem, 2.3vw, 1.8rem); font-weight:600;
  letter-spacing:-.022em; line-height:1.3; color:var(--text);
}
.held__zwei .hebt{ color:var(--akzent-2); white-space:nowrap; }
.held__text{
  margin:24px auto 0; max-width:56ch; color:var(--matt);
  font-size:clamp(1.04rem,1.35vw,1.14rem); line-height:1.66;
}

/* Die Bühne: eine große Aufnahme, beim Erscheinen leicht aufgerichtet. */
.buehne{ margin-top:clamp(44px,5vw,66px); perspective:2400px; }
.buehne__rahmen{
  transform:rotateX(8deg) scale(.982); transform-origin:50% 0;
  transition:transform 1.1s var(--weich);
}
.buehne.da .buehne__rahmen{ transform:rotateX(0deg) scale(1); }
@media (prefers-reduced-motion:reduce){
  .buehne__rahmen, .buehne.da .buehne__rahmen{ transform:none; transition:none; }
}

/* Merkmalsstreifen unter der Bühne */
.merkmale{
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px;
  margin:30px 0 0; padding:0;
}
.merkmale li{
  list-style:none; display:inline-flex; align-items:center; gap:9px;
  font-size:13.5px; font-weight:500; color:var(--matt);
  background:rgba(255,255,255,.035); border:1px solid var(--linie);
  border-radius:999px; padding:9px 17px;
}
.merkmale i{
  width:6px; height:6px; border-radius:50%; background:var(--akzent-2);
  box-shadow:0 0 0 4px rgba(139,92,246,.14); flex:none;
}

/* ══ Programmfenster ══════════════════════════════════════════════ */
.fenster{
  background:var(--flaeche); border:1px solid var(--linie);
  border-radius:var(--r); overflow:hidden; box-shadow:var(--tief-schatten);
  min-width:0; margin:0;
}
.fenster--held{ box-shadow:var(--held-schatten); }

.fenster__leiste{
  display:flex; align-items:center; gap:7px; flex-wrap:nowrap;
  padding:13px 19px; background:var(--tinte-2);
  border-bottom:1px solid var(--linie);
}
.fenster__leiste i{
  width:10px; height:10px; border-radius:50%; background:var(--linie-2);
  flex:none;
}
.fenster__name{
  margin-left:15px; font-size:12px; color:var(--leise); font-weight:500;
  background:var(--tinte); border:1px solid var(--linie);
  padding:5px 17px; border-radius:999px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* Sichtfeld — hohe Aufnahmen laufen darin weiter */
.blick{
  overflow:auto; overscroll-behavior:contain; background:#0A0A12;
  scrollbar-width:thin; scrollbar-color:var(--linie-2) transparent;
}
.blick img{ width:100%; height:auto; }
/* Der Hero-Shot ist ein Breitformat und wird ganz gezeigt. */
.blick--voll{ max-height:none; }
.blick--hoch{ max-height:min(80vh, 760px); }
.blick--mittel{ max-height:560px; }
.blick--kachel{ max-height:380px; }
.blick::-webkit-scrollbar{ width:11px; height:11px; }
.blick::-webkit-scrollbar-track{ background:transparent; }
.blick::-webkit-scrollbar-thumb{
  background:var(--linie-2); border-radius:99px;
  border:3px solid transparent; background-clip:content-box;
}
.blick::-webkit-scrollbar-thumb:hover{ background:var(--leise);
  background-clip:content-box; }

/* Auf dem Telefon behalten die Verwaltungsansichten ihre Größe und
   rollen im Rahmen zur Seite — sonst wären sie unlesbar klein.
   Die Ganzseiten-Aufnahmen (Kacheln) passen sich dagegen der Breite an. */
@media (max-width:760px){
  .blick--roll img{ width:auto; max-width:none; min-width:720px; }
  .blick--hoch{ max-height:min(66vh, 500px); }
  .blick--mittel{ max-height:min(60vh, 440px); }
  .blick--kachel{ max-height:none; }
}

/* Herkunftszeile */
.quelle{
  margin:20px auto 0; font-size:13.5px; line-height:1.62; color:var(--leise);
  max-width:76ch; text-align:center;
}
.quelle b{ color:var(--matt); font-weight:600; }
.quelle .glimm{
  display:inline-block; width:7px; height:7px; border-radius:50%;
  background:var(--gruen); box-shadow:0 0 0 4px rgba(52,211,153,.15);
  margin-right:9px; vertical-align:middle;
}
.teil--hell .quelle{ color:#79798F; }
.teil--hell .quelle b{ color:#43435A; }

/* Demo-Hinweis direkt am Bild */
.mit-marke{ position:relative; }
.demo-marke{
  position:absolute; top:15px; right:15px; z-index:2;
  font-size:10.5px; font-weight:700; letter-spacing:.13em;
  text-transform:uppercase; color:var(--akzent-3);
  background:rgba(11,11,19,.84); border:1px solid rgba(139,92,246,.35);
  border-radius:999px; padding:5px 12px;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}

/* ══ 02 · GEGENÜBERSTELLUNG ═══════════════════════════════════════ */
.wandel{ display:grid; gap:20px; margin-top:clamp(46px,5vw,66px); }
@media (min-width:900px){
  .wandel{ grid-template-columns:1fr auto 1fr; gap:30px; align-items:center; }
}
.wandel__pfeil{
  display:none; place-content:center; width:46px; height:46px;
  border-radius:50%; border:1px solid var(--linie-2); background:var(--flaeche);
  color:var(--akzent-2);
}
@media (min-width:900px){ .wandel__pfeil{ display:grid; } }
.wandel__pfeil svg{ width:20px; height:20px; stroke:currentColor; fill:none;
  stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

.saeule{
  border:1px solid var(--linie); border-radius:var(--r);
  padding:30px 30px 34px; background:var(--flaeche); min-width:0;
}
.saeule--vorher{ opacity:.8; }
.saeule--nachher{
  border-color:rgba(139,92,246,.36);
  background:linear-gradient(168deg, rgba(139,92,246,.13) 0%, var(--flaeche) 58%);
  box-shadow:0 40px 90px -60px rgba(139,92,246,.8);
}
.saeule__kopf{
  font-size:11.5px; font-weight:700; letter-spacing:.19em;
  text-transform:uppercase; color:var(--leise); margin:0 0 20px;
}
.saeule--nachher .saeule__kopf{ color:var(--akzent-2); }
.saeule ul{ list-style:none; margin:0; padding:0; display:grid; gap:13px; }
.saeule li{ display:flex; gap:12px; align-items:flex-start;
  font-size:15.5px; line-height:1.5; }
.saeule svg{ width:17px; height:17px; flex:none; margin-top:4px;
  fill:none; stroke-width:2.1; stroke-linecap:round; stroke-linejoin:round; }
.saeule--vorher svg{ stroke:var(--leise); }
.saeule--vorher li{ color:var(--matt); }
.saeule--nachher svg{ stroke:var(--akzent-2); }

/* ══ 03 · DER FLUSS ═══════════════════════════════════════════════ */
.fluss{
  list-style:none; margin:clamp(50px,5vw,74px) 0 0; padding:0;
  display:grid; gap:14px; counter-reset:f;
}
@media (min-width:620px){ .fluss{ grid-template-columns:repeat(4,1fr); } }
@media (min-width:1120px){ .fluss{ grid-template-columns:repeat(8,1fr); gap:0; } }

.fluss li{
  counter-increment:f; position:relative; text-align:center;
  padding:26px 12px 28px; border:1px solid var(--linie);
  border-radius:var(--r-m); background:var(--flaeche);
  transition:border-color .25s var(--weich), background .25s var(--weich);
}
.fluss li:hover{ border-color:var(--linie-2); background:var(--flaeche-2); }
@media (min-width:1120px){
  .fluss li{ border-radius:0; border-left-width:0; }
  .fluss li:first-child{ border-left-width:1px;
    border-radius:var(--r-m) 0 0 var(--r-m); }
  .fluss li:last-child{ border-radius:0 var(--r-m) var(--r-m) 0; }
}
.fluss li::before{
  content:"0" counter(f); display:block; font-size:11px; font-weight:700;
  letter-spacing:.14em; color:var(--leise); margin-bottom:9px;
}
.fluss b{ display:block; font-size:15px; font-weight:600; letter-spacing:-.01em; }
.fluss span{ display:block; font-size:12.5px; color:var(--leise); margin-top:5px;
  line-height:1.45; }
.fluss li:last-child{
  border-color:rgba(139,92,246,.4);
  background:linear-gradient(165deg, rgba(139,92,246,.16), var(--flaeche) 70%);
}
.fluss li:last-child::before{ color:var(--akzent-2); }

/* ══ 04 · BETRACHTER ══════════════════════════════════════════════ */
.betrachter{ margin-top:clamp(44px,5vw,64px); }

.reiterbahn{
  display:flex; gap:9px; margin-bottom:30px;
  overflow-x:auto; scrollbar-width:none; padding:3px 0 10px;
  scroll-snap-type:x proximity;
}
.reiterbahn::-webkit-scrollbar{ display:none; }
@media (min-width:920px){
  .reiterbahn{ flex-wrap:wrap; justify-content:center; overflow:visible;
    padding-bottom:0; }
}
.reiter{
  font:inherit; font-size:14.5px; font-weight:600; letter-spacing:-.006em;
  color:var(--matt); background:rgba(255,255,255,.035);
  border:1px solid var(--linie); border-radius:999px;
  padding:11px 21px; cursor:pointer; white-space:nowrap; flex:none;
  scroll-snap-align:center;
  transition:color .2s var(--weich), background .2s var(--weich),
             border-color .2s var(--weich);
}
.reiter:hover{ color:var(--text); border-color:var(--linie-2);
  background:rgba(255,255,255,.06); }
.reiter[aria-selected="true"]{
  color:#fff; background:linear-gradient(135deg,var(--akzent),var(--tief));
  border-color:transparent;
  box-shadow:0 14px 30px -14px rgba(139,92,246,.9);
}

.blatt{ display:grid; gap:34px; align-items:center; }
.blatt[hidden]{ display:none; }      /* display:grid schlägt sonst [hidden] */
@media (min-width:1080px){
  .blatt{ grid-template-columns:minmax(0,1fr) 330px; gap:52px; }
}
.blatt__bild{ animation:einblenden .55s var(--weich) both; }
@keyframes einblenden{
  from{ opacity:0; transform:translateY(14px) scale(.995); }
  to  { opacity:1; transform:none; }
}
@media (prefers-reduced-motion:reduce){ .blatt__bild{ animation:none; } }

.blatt__wort h3{ margin:0 0 14px; font-size:clamp(1.3rem,2vw,1.62rem);
  line-height:1.2; }
.blatt__wort p{ margin:0; color:var(--matt); font-size:16px; line-height:1.65; }
.blatt__wort .gewinn{
  display:inline-flex; align-items:center; gap:9px; margin-top:22px;
  font-size:13.5px; font-weight:600; color:var(--akzent-2);
  background:rgba(139,92,246,.1); border:1px solid rgba(139,92,246,.26);
  border-radius:999px; padding:8px 16px;
}

/* ══ Geteilte Abschnitte (Bild | Text) ════════════════════════════ */
.paar{ display:grid; gap:40px; align-items:center; }
@media (min-width:980px){
  .paar{ grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:62px; }
  .paar--gedreht .paar__bild{ order:2; }
}
.paar__wort h2{ font-size:clamp(1.95rem,3.3vw,2.9rem); }
.paar__wort .fuehrung{ font-size:1.1rem; }

.drei-worte{
  display:flex; flex-wrap:wrap; gap:14px 22px; margin:32px 0 0; padding:0;
  list-style:none;
}
.drei-worte--mitte{ justify-content:center; }
.drei-worte li{
  font-size:clamp(1.1rem,1.8vw,1.4rem); font-weight:700; letter-spacing:-.025em;
  color:var(--text); border-bottom:2px solid var(--akzent); padding-bottom:3px;
}

/* ══ 05 · KUNDENREISE ═════════════════════════════════════════════ */
.reise{
  list-style:none; margin:clamp(48px,5vw,72px) 0 0; padding:0;
  display:grid; gap:36px;
}
@media (min-width:700px){ .reise{ grid-template-columns:1fr 1fr; } }
@media (min-width:1160px){ .reise{ grid-template-columns:repeat(4,1fr); gap:26px; } }
.etappe{ display:flex; flex-direction:column; min-width:0; }
.etappe__nr{
  display:flex; align-items:center; gap:13px; margin:0 0 16px;
  font-size:12px; font-weight:700; letter-spacing:.15em;
  text-transform:uppercase; color:var(--akzent-2);
}
.etappe__nr em{
  font-style:normal; font-size:clamp(1.6rem,2.4vw,2rem); font-weight:700;
  letter-spacing:-.04em; line-height:1; color:transparent;
  -webkit-text-stroke:1.2px var(--akzent);
}
.etappe__bild{ margin:0; }
.etappe__bild .fenster{
  border-radius:var(--r-m);
  transition:transform .35s var(--weich), box-shadow .35s var(--weich);
}
.etappe:hover .fenster{
  transform:translateY(-5px);
  box-shadow:0 60px 110px -60px rgba(139,92,246,.6), var(--tief-schatten);
}
@media (prefers-reduced-motion:reduce){
  .etappe__bild .fenster, .etappe:hover .fenster{ transform:none; transition:none; }
}
.etappe__wort{ margin-top:auto; padding-top:22px; }
.etappe__wort h3{ margin:0 0 8px; font-size:1.08rem; }
.etappe__wort p{ margin:0; color:var(--matt); font-size:14.5px; line-height:1.58; }

.finale{ margin-top:clamp(42px,4vw,62px); }
.finale__kopf{
  display:flex; align-items:baseline; gap:16px; flex-wrap:wrap; margin-bottom:22px;
}
.finale__kopf .etappe__nr{ margin:0; }
.finale__kopf p{ margin:0; color:var(--matt); font-size:16px; }
.finale__kopf strong{ color:var(--text); font-weight:600; }

/* ══ 08 · BETRIEB ═════════════════════════════════════════════════ */
.raster{ display:grid; gap:26px; margin-top:clamp(46px,5vw,64px); }
@media (min-width:880px){ .raster{ grid-template-columns:1fr 1fr; gap:30px; } }
.kachel{ margin:0; min-width:0; }
.kachel .fenster{ border-radius:var(--r-m); }
.kachel figcaption{ margin-top:20px; }
.kachel figcaption h3{ margin:0 0 7px; font-size:1.06rem; }
.kachel figcaption p{ margin:0; color:var(--matt); font-size:14.5px;
  line-height:1.58; }

.bausteine{
  display:flex; flex-wrap:wrap; gap:10px; list-style:none;
  margin:clamp(44px,5vw,60px) 0 0; padding:0; justify-content:center;
}
.bausteine li{
  display:inline-flex; align-items:center; gap:9px;
  font-size:14px; font-weight:500; color:var(--matt);
  background:var(--flaeche); border:1px solid var(--linie);
  border-radius:999px; padding:11px 19px;
  transition:color .2s var(--weich), border-color .2s var(--weich),
             transform .2s var(--weich);
}
.bausteine li:hover{ color:var(--text); border-color:var(--akzent);
  transform:translateY(-2px); }
.bausteine svg{ width:15px; height:15px; flex:none; stroke:var(--akzent-2);
  fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
@media (prefers-reduced-motion:reduce){
  .bausteine li, .bausteine li:hover{ transform:none; transition:none; }
}

/* ══ Zwischentitel ════════════════════════════════════════════════ */
.zwischentitel{
  font-size:clamp(1.5rem,2.8vw,2.15rem); letter-spacing:-.028em;
  line-height:1.15; margin:0 auto; max-width:22ch;
}
.zwischentitel--hell{ color:var(--papier-tint); }

/* ══ Gegenüberstellung ════════════════════════════════════════════
   Kein Vorher/Nachher-Spott: links steht, was heute üblich ist, rechts,
   was das System daraus macht. Der Pfeil dazwischen trägt die Aussage.
   ═══════════════════════════════════════════════════════════════════ */
.gegen{
  list-style:none; margin:clamp(48px,5vw,72px) 0 0; padding:0;
  border:1px solid var(--linie); border-radius:var(--r);
  overflow:hidden; background:var(--flaeche);
}
.gegen__zeile, .gegen__kopf{
  display:grid; gap:14px; align-items:center;
  padding:20px 22px; border-top:1px solid var(--linie);
  text-align:left;
}
@media (min-width:820px){
  .gegen__zeile, .gegen__kopf{
    grid-template-columns:1fr 52px 1fr; gap:0; padding:22px 30px;
  }
}
.gegen__kopf{
  border-top:0; padding-block:16px; background:var(--tinte-2);
  font-size:11.5px; font-weight:700; letter-spacing:.17em;
  text-transform:uppercase;
}
.gegen__kopf .gegen__ohne{ color:var(--leise); }
.gegen__kopf .gegen__mit{ color:var(--akzent-2); }

.gegen__ohne{ color:var(--matt); font-size:15.5px; line-height:1.45; }
.gegen__mit{ color:var(--text); font-size:16px; font-weight:600;
  line-height:1.45; letter-spacing:-.012em; }
@media (min-width:820px){
  .gegen__ohne{ text-align:right; padding-right:26px; }
  .gegen__mit{ padding-left:26px; }
}
.gegen__pfeil{ display:grid; place-content:center; }
.gegen__pfeil svg{
  width:19px; height:19px; stroke:var(--akzent); fill:none; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round; opacity:.7;
}
@media (max-width:819px){
  .gegen__pfeil svg{ transform:rotate(90deg); }
  .gegen__kopf{ display:none; }
  .gegen__zeile{ gap:9px; }
}
/* Die rechte Hälfte bekommt einen ruhigen Grundton - sie ist das Ziel. */
@media (min-width:820px){
  .gegen{ position:relative; }
  .gegen::after{
    content:""; position:absolute; inset:0 0 0 calc(50% + 26px);
    background:linear-gradient(90deg, rgba(139,92,246,.07), transparent 70%);
    pointer-events:none;
  }
  .gegen > *{ position:relative; z-index:1; }
}

/* ══ Zwei Wege durch denselben Arbeitstag ═════════════════════════ */
.wege{ display:grid; gap:22px; margin-top:clamp(40px,4vw,56px); }
@media (min-width:760px){ .wege{ grid-template-columns:1fr 1fr; gap:26px; } }
.weg{
  border:1px solid var(--linie); border-radius:var(--r);
  background:var(--flaeche); padding:26px 26px 30px; text-align:left;
  min-width:0;
}
.weg--mit{
  border-color:rgba(139,92,246,.36);
  background:linear-gradient(168deg, rgba(139,92,246,.12), var(--flaeche) 60%);
}
.weg--ohne{ opacity:.82; }
.weg__kopf{
  margin:0 0 18px; font-size:11.5px; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:var(--leise);
}
.weg--mit .weg__kopf{ color:var(--akzent-2); }
.weg ol{ list-style:none; margin:0; padding:0; counter-reset:w; }
.weg li{
  counter-increment:w; position:relative; padding:0 0 0 34px;
  font-size:15.5px; line-height:1.45; color:var(--matt);
}
.weg li + li{ margin-top:16px; }
.weg li::before{
  content:counter(w); position:absolute; left:0; top:-1px;
  width:22px; height:22px; border-radius:50%; display:grid;
  place-content:center; font-size:11px; font-weight:700;
  background:rgba(255,255,255,.05); border:1px solid var(--linie-2);
  color:var(--leise);
}
/* Die Verbindungslinie zwischen den Schritten. */
.weg li:not(:last-child)::after{
  content:""; position:absolute; left:11px; top:23px; width:1px;
  height:calc(100% + 16px - 23px); background:var(--linie-2);
}
.weg--mit li{ color:var(--text); }
.weg--mit li::before{ background:rgba(139,92,246,.16);
  border-color:rgba(139,92,246,.45); color:var(--akzent-2); }
.weg--mit li:not(:last-child)::after{ background:rgba(139,92,246,.3); }

.weg__schluss{
  margin:clamp(30px,3vw,40px) auto 0; max-width:44ch;
  font-size:clamp(1.05rem,1.7vw,1.3rem); font-weight:600;
  letter-spacing:-.018em; color:var(--text);
}

/* ══ Belege: Problem, Produkt, Unterschied ════════════════════════ */
.beweis{ display:grid; gap:30px; align-items:center; min-width:0; }
.beweis + .beweis{ margin-top:clamp(40px,4vw,58px); }
@media (min-width:980px){
  .beweis{ grid-template-columns:minmax(0,380px) minmax(0,1fr); gap:56px; }
  /* Beim Wechsel der Seiten müssen auch die Spaltenbreiten mitwandern,
     sonst landet die Aufnahme in der schmalen Spalte. */
  .beweis--gedreht{ grid-template-columns:minmax(0,1fr) minmax(0,380px); }
  .beweis--gedreht .beweis__wort{ order:2; }
}
.beweis__wort{ min-width:0; }
.beweis__marke{
  margin:0 0 18px; font-size:11.5px; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:var(--akzent-2);
}
.beweis__ohne, .beweis__mit{ margin:0 0 16px; font-size:15.5px; line-height:1.55; }
.beweis__ohne{ color:var(--matt); }
.beweis__mit{ color:var(--text); font-weight:500; }
.beweis__ohne span, .beweis__mit span{
  display:block; margin-bottom:5px;
  font-size:11px; font-weight:700; letter-spacing:.15em;
  text-transform:uppercase; color:var(--leise);
}
.beweis__mit span{ color:var(--akzent-2); }
.beweis__folge{
  display:flex; gap:11px; align-items:flex-start; margin:22px 0 0;
  padding-top:18px; border-top:1px solid var(--linie);
  font-size:15px; line-height:1.5; color:var(--akzent-2); font-weight:500;
}
.beweis__folge svg{
  width:18px; height:18px; flex:none; margin-top:2px;
  stroke:var(--akzent); fill:none; stroke-width:2.2;
  stroke-linecap:round; stroke-linejoin:round;
}
.beweis__bild{ min-width:0; }

/* ══ Was bleibt, wenn nichts verändert wird (hell) ════════════════ */
.verluste{
  list-style:none; margin:clamp(36px,4vw,52px) 0 0; padding:0;
  display:grid; gap:1px; background:var(--papier-2);
  border:1px solid var(--papier-2); border-radius:var(--r); overflow:hidden;
}
@media (min-width:680px){ .verluste{ grid-template-columns:1fr 1fr; } }
@media (min-width:1060px){ .verluste{ grid-template-columns:repeat(3,1fr); } }
.verluste li{ background:var(--papier); padding:28px 26px 30px;
  transition:background .25s var(--weich); }
.verluste li:hover{ background:#FFFFFF; }
.verluste h3{ margin:0 0 9px; font-size:1.08rem; color:var(--papier-tint);
  letter-spacing:-.018em; }
.verluste p{ margin:0; font-size:14.5px; line-height:1.55; color:#5A5A73; }

/* ══ Zeit · Geld · Chancen (hell) ═════════════════════════════════ */
.saeulen{
  list-style:none; margin:clamp(42px,4vw,60px) 0 0; padding:0;
  display:grid; gap:26px; text-align:left;
}
@media (min-width:860px){ .saeulen{ grid-template-columns:repeat(3,1fr); gap:34px; } }
.saeulen li{ padding-top:22px; border-top:2px solid var(--tief); min-width:0; }
.saeulen em{
  font-style:normal; display:block; margin-bottom:12px;
  font-size:11.5px; font-weight:700; letter-spacing:.19em;
  text-transform:uppercase; color:var(--tief);
}
.saeulen b{ display:block; font-size:1.16rem; font-weight:700;
  letter-spacing:-.022em; line-height:1.25; color:var(--papier-tint); }
.saeulen span{ display:block; margin-top:10px; font-size:14.5px;
  line-height:1.55; color:#5A5A73; }

/* ══ Hebelkette ═══════════════════════════════════════════════════ */
.hebel{
  list-style:none; margin:clamp(48px,5vw,70px) 0 0; padding:0;
  display:grid; gap:12px; counter-reset:hb;
}
@media (min-width:700px){ .hebel{ grid-template-columns:1fr 1fr; } }
@media (min-width:1100px){ .hebel{ grid-template-columns:repeat(4,1fr); gap:14px; } }
.hebel li{
  counter-increment:hb; position:relative; min-width:0;
  border:1px solid var(--linie); border-radius:var(--r-m);
  background:var(--flaeche); padding:22px 22px 24px 22px;
  transition:border-color .22s var(--weich), background .22s var(--weich);
}
.hebel li:hover{ border-color:var(--linie-2); background:var(--flaeche-2); }
.hebel li::before{
  content:"0" counter(hb); display:block; margin-bottom:11px;
  font-size:11px; font-weight:700; letter-spacing:.14em; color:var(--leise);
}
.hebel b{ display:block; font-size:15.5px; font-weight:600;
  letter-spacing:-.015em; line-height:1.3; }
.hebel span{ display:block; margin-top:7px; font-size:13.5px; line-height:1.5;
  color:var(--matt); }
/* Das letzte Glied ist das Ziel der Kette. */
.hebel li:last-child{
  border-color:rgba(139,92,246,.42);
  background:linear-gradient(165deg, rgba(139,92,246,.16), var(--flaeche) 70%);
}
.hebel li:last-child::before{ color:var(--akzent-2); }

/* ══ Was Sie kaufen ═══════════════════════════════════════════════ */
.kauf{
  display:grid; gap:30px; align-items:center; text-align:left;
  margin-top:clamp(48px,5vw,70px);
  border:1px solid var(--linie-2); border-radius:var(--r);
  background:linear-gradient(150deg, rgba(139,92,246,.1), var(--flaeche) 62%);
  padding:clamp(28px,4vw,44px);
}
@media (min-width:900px){ .kauf{ grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:48px; } }
.kauf__wort h3{ margin:0 0 12px; font-size:clamp(1.3rem,2.2vw,1.7rem);
  letter-spacing:-.028em; line-height:1.2; }
.kauf__wort p{ margin:0; color:var(--matt); font-size:15.5px; line-height:1.6; }
.kauf__liste{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
@media (min-width:540px){ .kauf__liste{ grid-template-columns:1fr 1fr; } }
.kauf__liste li{
  display:flex; gap:11px; align-items:center;
  font-size:15px; font-weight:500; color:var(--text);
}
.kauf__liste svg{
  width:17px; height:17px; flex:none; stroke:var(--akzent-2); fill:none;
  stroke-width:2.3; stroke-linecap:round; stroke-linejoin:round;
}

.persoenlich{
  margin:clamp(44px,5vw,62px) auto 0; max-width:40ch;
  font-size:clamp(1.24rem,2.2vw,1.66rem); font-weight:600;
  letter-spacing:-.022em; line-height:1.34; color:var(--text);
}
.persoenlich strong{ color:var(--akzent-2); font-weight:600; }

/* ══ 09 · GESCHÄFTSWERT (heller Abschnitt) ════════════════════════ */
.werte{
  list-style:none; margin:clamp(50px,5vw,74px) 0 0; padding:0;
  display:grid; gap:1px; background:var(--papier-2);
  border:1px solid var(--papier-2); border-radius:var(--r); overflow:hidden;
}
@media (min-width:720px){ .werte{ grid-template-columns:1fr 1fr; } }
@media (min-width:1060px){ .werte{ grid-template-columns:repeat(3,1fr); } }
.werte li{
  background:var(--papier); padding:38px 32px 42px;
  transition:background .25s var(--weich);
}
.werte li:hover{ background:#FFFFFF; }
.werte em{
  font-style:normal; display:block; font-size:12px; font-weight:700;
  letter-spacing:.18em; color:var(--tief); margin-bottom:22px;
}
.werte h3{ margin:0 0 12px; font-size:clamp(1.3rem,2vw,1.6rem);
  color:var(--papier-tint); letter-spacing:-.025em; }
.werte p{ margin:0; font-size:15px; line-height:1.6; color:#5A5A73; }

/* ══ 10 · ZUKUNFT ═════════════════════════════════════════════════ */
.zeitstrahl{ display:grid; gap:22px; margin-top:clamp(48px,5vw,70px); }
@media (min-width:920px){ .zeitstrahl{ grid-template-columns:repeat(3,1fr);
  gap:26px; } }
.stufe{
  border:1px solid var(--linie); border-radius:var(--r);
  background:var(--flaeche); padding:30px 30px 34px; min-width:0;
}
.stufe--jetzt{
  border-color:rgba(52,211,153,.34);
  background:linear-gradient(168deg, rgba(52,211,153,.09), var(--flaeche) 60%);
}
.stufe--naechst{
  border-color:rgba(139,92,246,.3);
  background:linear-gradient(168deg, rgba(139,92,246,.09), var(--flaeche) 60%);
}
.marke{
  display:inline-flex; align-items:center; gap:8px; margin-bottom:18px;
  font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  border-radius:999px; padding:6px 14px; border:1px solid;
}
.marke--verfuegbar{ color:var(--gruen); border-color:rgba(52,211,153,.4);
  background:rgba(52,211,153,.1); }
.marke--geplant{ color:var(--akzent-2); border-color:rgba(139,92,246,.4);
  background:rgba(139,92,246,.1); }
.marke--perspektive{ color:var(--leise); border-color:var(--linie-2);
  background:rgba(255,255,255,.03); }
.stufe h3{ margin:0 0 18px; font-size:1.5rem; letter-spacing:-.03em; }
.stufe ul{ list-style:none; margin:0; padding:0; display:grid; gap:11px; }
.stufe li{ display:flex; gap:11px; align-items:flex-start;
  font-size:15px; color:var(--matt); line-height:1.5; }
.stufe li::before{
  content:""; width:5px; height:5px; border-radius:50%; flex:none;
  margin-top:9px; background:var(--linie-2);
}
.stufe--jetzt li::before{ background:var(--gruen); }
.stufe--naechst li::before{ background:var(--akzent); }

/* ══ Problem → Produkt → Nutzen ═══════════════════════════════════ */
/* Die Reizzeile benennt, was der Leser kennt, bevor die Überschrift
   die Antwort gibt. Die Folgezeile sagt, was er davon hat. */
.reiz{
  display:flex; gap:11px; align-items:flex-start;
  margin:0 0 20px; max-width:54ch;
  font-size:1.1rem; line-height:1.5; color:#8B8BAA; font-style:italic;
}
.mitte .reiz{ margin-inline:auto; justify-content:center; text-align:center; }
.reiz::before{
  content:"„"; font-size:1.7rem; line-height:.9; color:var(--linie-2);
  flex:none; margin-top:2px;
}
.mitte .reiz::before{ display:none; }

.folge{
  display:inline-flex; gap:11px; align-items:flex-start;
  margin:26px 0 0; max-width:56ch;
  font-size:1.02rem; line-height:1.5; font-weight:500; color:var(--akzent-2);
}
.mitte .folge{ margin-inline:auto; text-align:left; }
.folge svg{
  width:19px; height:19px; flex:none; margin-top:3px;
  stroke:var(--akzent); fill:none; stroke-width:2.2;
  stroke-linecap:round; stroke-linejoin:round;
}

/* Nutzenzeile im Produkt-Explorer */
.blatt__wort .nutzen{
  margin:0 0 16px; font-size:1.02rem; line-height:1.45; font-weight:500;
  color:var(--akzent-2);
}

/* ══ Was Sie sehen / Warum es zählt ═══════════════════════════════ */
/* Zwei Fragen, zwei Antworten. Die erste beschreibt das Bild, die zweite
   sagt, was der Leser davon hat. Mehr braucht ein Screenshot nicht. */
.wawa{ margin:20px 0 0; }
.wawa dt{
  font-size:11.5px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--leise); margin-bottom:7px;
}
.wawa dt + dd{ margin:0 0 20px; }
.wawa dd:last-child{ margin-bottom:0; }
.wawa dd{ font-size:15.5px; line-height:1.62; color:var(--matt); }
.wawa dt:nth-of-type(2){ color:var(--akzent-2); }
.wawa dt:nth-of-type(2) + dd{ color:var(--text); font-weight:500; }

.wawa--breit{
  display:grid; gap:26px; margin:34px auto 0; max-width:860px;
  text-align:left;
}
@media (min-width:720px){ .wawa--breit{ grid-template-columns:1fr 1fr; gap:44px; } }
.wawa--breit p{ margin:0; }
.wawa__kopf{
  font-size:11.5px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--leise); margin:0 0 8px !important;
}
.wawa--breit div:last-child .wawa__kopf{ color:var(--akzent-2); }
.wawa--breit div:first-child p:last-child{ color:var(--matt); font-size:15.5px;
  line-height:1.6; }
.wawa--breit div:last-child p:last-child{ color:var(--text); font-size:15.5px;
  line-height:1.6; font-weight:500; }

/* ══ Knopf mit wechselnder Beschriftung ═══════════════════════════ */
/* Die zweite Beschriftung ist für Vorlesewerkzeuge ausgeblendet — der
   zugängliche Name bleibt „Demo vereinbaren". */
.tat--wechsel{ display:inline-grid; }
.tat--wechsel > span{
  grid-area:1 / 1; display:flex; align-items:center; justify-content:center;
  transition:opacity .22s var(--weich), transform .22s var(--weich);
}
.tat__b{ opacity:0; transform:translateY(7px); }
.tat--wechsel:hover .tat__a,
.tat--wechsel:focus-visible .tat__a{ opacity:0; transform:translateY(-7px); }
.tat--wechsel:hover .tat__b,
.tat--wechsel:focus-visible .tat__b{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .tat--wechsel > span{ transition:none; transform:none; }
  .tat--wechsel:hover .tat__a{ transform:none; }
  .tat--wechsel:hover .tat__b{ transform:none; }
}

.stuetze{
  margin:20px 0 0; font-size:13.5px; color:var(--leise); letter-spacing:.01em;
}
/* Auf dem Telefon zählt jeder Pixel über der Falz: der Produkt-Shot soll
   ohne Scrollen anfangen. Deshalb rücken Knöpfe, Stützzeile und Bühne
   dort enger zusammen. */
@media (max-width:620px){
  .held .tat-reihe{ margin-top:30px; gap:12px; }
  .stuetze{ margin-top:14px; font-size:12.5px; }
  .buehne{ margin-top:34px; }
}

/* ══ Vorstellung · Ihr Unternehmen ════════════════════════════════ */
.ihres{
  list-style:none; margin:clamp(38px,4vw,52px) 0 0; padding:0;
  display:grid; gap:12px; text-align:left;
}
@media (min-width:620px){ .ihres{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1040px){ .ihres{ grid-template-columns:repeat(5,1fr); gap:14px; } }
.ihres li{
  background:var(--flaeche); border:1px solid var(--linie);
  border-radius:var(--r-m); padding:20px 20px 22px;
  transition:border-color .22s var(--weich), background .22s var(--weich);
}
.ihres li:hover{ border-color:rgba(139,92,246,.4); background:var(--flaeche-2); }
.ihres b{ display:block; font-size:15px; font-weight:700; letter-spacing:-.015em;
  color:var(--akzent-2); }
.ihres span{ display:block; margin-top:6px; font-size:13.5px; line-height:1.5;
  color:var(--matt); }

/* ══ Weiterführende Stufe am Ende der Kundenreise ═════════════════ */
.weiterstufe{
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  margin-top:26px; padding:22px 26px; text-decoration:none;
  border:1px solid var(--linie); border-radius:var(--r-m);
  background:var(--flaeche); text-align:left;
  transition:border-color .22s var(--weich), background .22s var(--weich),
             transform .22s var(--weich);
}
.weiterstufe:hover{ border-color:rgba(139,92,246,.45);
  background:var(--flaeche-2); transform:translateY(-2px); }
.weiterstufe .etappe__nr{ margin:0; flex:none; }
.weiterstufe__wort{ color:var(--matt); font-size:15.5px; }
.weiterstufe svg{
  width:20px; height:20px; margin-left:auto; flex:none;
  stroke:var(--akzent-2); fill:none; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round;
  transition:transform .22s var(--weich);
}
.weiterstufe:hover svg{ transform:translateX(4px); }
@media (prefers-reduced-motion:reduce){
  .weiterstufe, .weiterstufe:hover, .weiterstufe svg,
  .weiterstufe:hover svg{ transform:none; transition:none; }
}

/* ══ Summe · One System ═══════════════════════════════════════════ */
.stapel{
  list-style:none; margin:clamp(46px,5vw,68px) 0 0; padding:0;
  display:grid; gap:12px; counter-reset:s;
}
@media (min-width:640px){ .stapel{ grid-template-columns:1fr 1fr; } }
@media (min-width:1060px){ .stapel{ grid-template-columns:repeat(3,1fr); gap:14px; } }
.stapel li{
  counter-increment:s; position:relative; text-align:left;
  background:#FFFFFF; border:1px solid var(--papier-2);
  border-radius:var(--r-m); padding:22px 24px 24px;
  transition:border-color .22s var(--weich), box-shadow .22s var(--weich);
}
.stapel li:hover{ border-color:#CFCFE2;
  box-shadow:0 22px 44px -34px rgba(21,21,31,.4); }
.stapel li::before{
  content:"+"; position:absolute; left:-11px; top:50%;
  transform:translateY(-50%); display:none;
  width:20px; height:20px; place-content:center; border-radius:50%;
  background:var(--papier); color:var(--tief);
  font-size:13px; font-weight:700; line-height:1;
}
@media (min-width:640px){
  .stapel li:not(:first-child)::before{ display:grid; }
}
.stapel b{ display:block; font-size:15.5px; font-weight:700;
  letter-spacing:-.015em; color:var(--papier-tint); }
.stapel span{ display:block; margin-top:5px; font-size:13.8px;
  line-height:1.5; color:#5A5A73; }

/* Die Losung steht jetzt auf dunklem Grund. Die dunkle Schriftfarbe
   gilt nur noch innerhalb eines hellen Abschnitts. */
.losung{
  margin:clamp(34px,3.5vw,48px) auto 0; max-width:22ch;
  font-size:clamp(1.5rem,3.2vw,2.4rem); font-weight:700;
  letter-spacing:-.032em; line-height:1.18; color:var(--text);
}
.teil--hell .losung{ color:var(--papier-tint); }
.teil--hell .fuehrung strong{ color:var(--papier-tint); font-weight:600; }

/* ══ 11 · SCHLUSS ═════════════════════════════════════════════════ */
.schluss{
  position:relative; overflow:hidden; text-align:center;
  padding:clamp(78px,9vw,130px) 0; border-top:1px solid var(--linie);
}
.schluss::before{
  content:""; position:absolute; inset:auto -10% -46%; height:820px;
  background:radial-gradient(46% 60% at 50% 100%, rgba(139,92,246,.32),
             transparent 72%);
  pointer-events:none;
}
.schluss > *{ position:relative; z-index:1; }

.kleinzeile{
  margin:22px 0 0; font-size:13px; color:var(--leise); letter-spacing:.01em;
}

/* ══ Haltung ══════════════════════════════════════════════════════ */
.haltung{
  list-style:none; margin:clamp(34px,4vw,46px) 0 0; padding:0;
  display:grid; gap:12px;
}
@media (min-width:700px){ .haltung{ grid-template-columns:1fr 1fr;
  column-gap:44px; } }
.haltung li{ display:flex; gap:12px; align-items:flex-start;
  font-size:15px; color:var(--matt); }
.haltung svg{ width:16px; height:16px; flex:none; margin-top:4px;
  stroke:var(--leise); fill:none; stroke-width:2.2;
  stroke-linecap:round; stroke-linejoin:round; }

/* ══ Demo-Anfrage ═════════════════════════════════════════════════
   Mit JavaScript ein Dialog über der Seite, ohne JavaScript ein ganz
   normaler Abschnitt am Seitenende. Beide Male dasselbe Markup.
   ═════════════════════════════════════════════════════════════════ */
.demo{
  padding:0; border:0; background:transparent; color:var(--text);
  max-width:min(640px, calc(100vw - 32px)); width:100%;
  max-height:calc(100dvh - 32px); overflow:visible;
}
.demo::backdrop{
  background:rgba(5,5,10,.78);
  backdrop-filter:blur(10px) saturate(120%);
  -webkit-backdrop-filter:blur(10px) saturate(120%);
}
.demo[open]{ animation:demo-auf .3s var(--weich) both; }
.demo[open]::backdrop{ animation:demo-schleier .3s var(--weich) both; }
@keyframes demo-auf{
  from{ opacity:0; transform:translateY(16px) scale(.985); }
  to  { opacity:1; transform:none; }
}
@keyframes demo-schleier{ from{ opacity:0; } to{ opacity:1; } }
@media (prefers-reduced-motion:reduce){
  .demo[open], .demo[open]::backdrop{ animation:none; }
}

.demo__blatt{
  position:relative; background:var(--flaeche);
  border:1px solid var(--linie-2); border-radius:var(--r);
  padding:clamp(26px,4vw,42px);
  box-shadow:0 70px 150px -60px rgba(0,0,0,.95),
             0 0 0 1px rgba(139,92,246,.12),
             0 0 140px -70px rgba(139,92,246,.5);
  max-height:calc(100dvh - 32px); overflow-y:auto; overscroll-behavior:contain;
  scrollbar-width:thin; scrollbar-color:var(--linie-2) transparent;
}

.demo__zu{
  position:absolute; top:14px; right:14px; z-index:2;
  display:grid; place-content:center; width:38px; height:38px;
  border-radius:50%; cursor:pointer;
  background:rgba(255,255,255,.05); border:1px solid var(--linie-2);
  transition:background .18s var(--weich), border-color .18s var(--weich);
}
.demo__zu:hover{ background:rgba(255,255,255,.1); border-color:var(--akzent); }
.demo__zu svg{ width:17px; height:17px; stroke:var(--matt); fill:none;
  stroke-width:2.2; stroke-linecap:round; }

.demo__kopf{ margin-bottom:28px; padding-right:44px; }
.demo__titel{ font-size:clamp(1.45rem,3vw,1.95rem); line-height:1.15;
  letter-spacing:-.03em; margin:0 0 14px; }
.demo__text{ margin:0; color:var(--matt); font-size:15.5px; line-height:1.6; }

/* ── Felder ── */
.demo__form{ display:grid; gap:18px; }
/* display:grid schlägt sonst das hidden-Attribut, und der Dank stünde
   unter dem Formular statt an seiner Stelle. */
.demo__form[hidden], .demo__dank[hidden]{ display:none; }
.feld{ display:grid; gap:7px; min-width:0; }
.feld label{
  font-size:13.5px; font-weight:600; letter-spacing:.005em; color:var(--text);
}
.feld label span{ color:var(--akzent-2); }
.feld label em{ font-style:normal; font-weight:400; color:var(--leise); }
.feld input, .feld textarea{
  font:inherit; font-size:15.5px; width:100%;
  color:var(--text); background:var(--tinte-2);
  border:1px solid var(--linie-2); border-radius:var(--r-s);
  padding:13px 15px; min-height:48px;
  transition:border-color .18s var(--weich), background .18s var(--weich);
}
.feld textarea{ resize:vertical; line-height:1.55; min-height:88px; }
.feld input::placeholder, .feld textarea::placeholder{ color:#55556F; }
.feld input:hover, .feld textarea:hover{ border-color:#3B3B58; }
.feld input:focus, .feld textarea:focus{
  outline:none; border-color:var(--akzent); background:var(--tinte);
  box-shadow:0 0 0 3px rgba(139,92,246,.18);
}
.feld input[aria-invalid="true"]{ border-color:#F87171; }
.feld input[aria-invalid="true"]:focus{ box-shadow:0 0 0 3px rgba(248,113,113,.2); }
.feld__fehler{ margin:0; font-size:13px; color:#FCA5A5; }

.feld-paar{ display:grid; gap:18px; }
@media (min-width:520px){ .feld-paar{ grid-template-columns:1fr 1fr; } }

/* ── Auswahl ── */
.satz{ border:0; margin:2px 0 0; padding:0; min-width:0; }
.satz legend{
  padding:0; margin-bottom:11px;
  font-size:13.5px; font-weight:600; color:var(--text);
}
.satz legend em{ font-style:normal; font-weight:400; color:var(--leise); }
.wahlreihe{ display:flex; flex-wrap:wrap; gap:9px; }
.wahl{
  display:inline-flex; align-items:center; gap:9px; cursor:pointer;
  font-size:14px; color:var(--matt);
  background:var(--tinte-2); border:1px solid var(--linie-2);
  border-radius:999px; padding:10px 16px;
  transition:color .16s var(--weich), border-color .16s var(--weich),
             background .16s var(--weich);
}
.wahl input{
  appearance:none; -webkit-appearance:none; margin:0; flex:none;
  width:15px; height:15px; border-radius:50%;
  border:1.5px solid var(--linie-2); background:transparent;
  transition:border-color .16s var(--weich), background .16s var(--weich);
}
.wahl input[type="checkbox"]{ border-radius:4px; }
.wahl input:checked{ border-color:var(--akzent); background:var(--akzent);
  box-shadow:inset 0 0 0 3px var(--tinte-2); }
.wahl input[type="checkbox"]:checked{ box-shadow:inset 0 0 0 2.5px var(--tinte-2); }
.wahl:hover{ color:var(--text); border-color:#3B3B58; }
.wahl:has(input:checked){ color:var(--text); border-color:var(--akzent);
  background:rgba(139,92,246,.1); }
.wahl:focus-within{ outline:2px solid var(--akzent-2); outline-offset:2px; }

/* Falle für automatische Einsendungen — für Menschen nie sichtbar. */
.honig{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.demo__senden{ width:100%; margin-top:6px; }
.demo__senden[disabled]{ opacity:.6; cursor:progress; transform:none; }
.demo__klein{ margin:0; text-align:center; font-size:13px; color:var(--leise); }
.demo__recht{ margin:0; text-align:center; font-size:12.5px; color:var(--leise);
  line-height:1.55; }
.demo__recht a{ color:var(--akzent-2); }

.demo__hinweis{
  margin:0; padding:13px 16px; border-radius:var(--r-s);
  background:rgba(248,113,113,.1); border:1px solid rgba(248,113,113,.35);
  color:#FCA5A5; font-size:14px; line-height:1.55;
}

/* ── Bestätigung ── */
.demo__dank{ text-align:center; padding:20px 0 8px; }
.demo__haken{
  width:62px; height:62px; margin:0 auto 24px; border-radius:50%;
  display:grid; place-content:center;
  background:rgba(52,211,153,.13); border:1px solid rgba(52,211,153,.4);
}
.demo__haken svg{ width:28px; height:28px; stroke:var(--gruen); fill:none;
  stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.demo__dank h2{ font-size:clamp(1.6rem,3vw,2.1rem); margin:0 0 12px; }
.demo__dank p{ margin:0 0 28px; color:var(--matt); font-size:16px;
  line-height:1.6; }

/* ── Ohne JavaScript: ein sichtbarer Abschnitt statt eines Dialogs ── */
html:not(.js) .demo{
  display:block; position:static; max-width:var(--spur); max-height:none;
  margin:0 auto; padding:clamp(84px,10vw,150px) 26px;
}
html:not(.js) .demo__blatt{ max-height:none; overflow:visible; }
html:not(.js) .demo__zu{ display:none; }

/* ══ Fuß ══════════════════════════════════════════════════════════ */
.fuss{ padding:56px 0 68px; border-top:1px solid var(--linie);
  background:var(--tinte-2); }
.fuss__bahn{ display:grid; gap:24px; justify-items:center; text-align:center; }
.fuss img{ height:20px; width:auto; opacity:.8; }
.fuss p{ margin:0; font-size:13px; color:var(--leise); max-width:74ch;
  line-height:1.68; }
.fuss code{ font-family:var(--mono); font-size:12px; color:var(--akzent-2);
  background:rgba(139,92,246,.09); border:1px solid var(--linie-2);
  border-radius:5px; padding:1px 6px; }

/* ══ Kein Grid-Kind darf mit seinem Inhalt wachsen — sonst schiebt
      eine breite Aufnahme die ganze Seite zur Seite. ══════════════ */
.gegen, .gegen__zeile, .gegen__zeile > *, .wege, .weg, .weg > *,
.beweis, .beweis > *, .verluste, .verluste > *, .saeulen,
.saeulen > *, .hebel, .hebel > *, .kauf, .kauf > *,
.demo, .demo__blatt, .demo__form, .feld, .feld-paar, .feld-paar > *,
.satz, .ihres, .ihres > *, .wawa--breit, .wawa--breit > *,
.blatt, .blatt > *, .reise, .etappe, .betrachter, .paar, .paar > *,
.fenster, .buehne, .raster, .kachel, .wandel, .wandel > *,
.zeitstrahl, .stufe, .werte, .werte > *{ min-width:0; }

/* ══════════════════════════════════════════════════════════════════
   PLANZEICHNUNGEN
   Vier Vektorbilder, die erklären, was Aufnahmen nicht erklären können:
   wo das System sitzt, welchen Weg es baut, was sich dadurch ändert
   und was davon messbar wird. Sie ersetzen keine Aufnahme — jede
   Aufnahme auf dieser Seite stammt weiterhin aus dem echten System.
   ══════════════════════════════════════════════════════════════════ */

.plan{
  margin:0 0 clamp(38px,5vw,64px);
  padding:clamp(18px,3vw,30px);
  background:linear-gradient(180deg,var(--flaeche) 0%,var(--tinte-2) 100%);
  border:1px solid var(--linie);
  border-radius:var(--r);
  box-shadow:var(--tief-schatten);
  overflow:hidden;              /* nichts wird gezogen — die Zeichnung
                                   passt sich ein */
}
.plan svg{
  display:block;
  width:100%;
  min-width:0;                  /* passt sich ein, statt seitwärts
                                   herauszuragen */
  height:auto;
}
.plan__fuss{
  margin:14px auto 0;
  max-width:74ch;
  text-align:left;         /* .mitte zentriert den Abschnitt — Fließtext
                              liest sich linksbündig besser */
  font-size:14px;
  line-height:1.5;
  color:var(--leise);
  letter-spacing:.01em;
}
.plan__fuss b{color:var(--matt);font-weight:600}

/* Beschriftungen in den Zeichnungen */
.pz-t{font-family:var(--font);font-size:15px;font-weight:600;fill:var(--text)}
.pz-k{font-family:var(--font);font-size:12.5px;font-weight:500;fill:var(--matt)}
.pz-w{font-family:var(--font);font-size:12px;font-weight:600;fill:var(--matt)}
.pz-m{font-family:var(--font);font-size:11px;font-weight:600;fill:var(--leise);
      letter-spacing:.14em;text-transform:uppercase}
.pz-a{fill:var(--akzent-3)}
.pz-g{fill:var(--gruen)}

/* Flächen und Linien */
.pz-feld{fill:var(--flaeche-2);stroke:var(--linie-2);stroke-width:1}
.pz-feld-a{fill:rgba(139,92,246,.12);stroke:var(--akzent);stroke-width:1.25}
.pz-feld-g{fill:rgba(52,211,153,.10);stroke:var(--gruen);stroke-width:1.25}
.pz-linie{fill:none;stroke:var(--linie-2);stroke-width:1.5}
.pz-weg{fill:none;stroke:var(--akzent);stroke-width:2;stroke-linecap:round}
.pz-weg-g{fill:none;stroke:var(--gruen);stroke-width:2;stroke-linecap:round}
.pz-weg-tot{fill:none;stroke:var(--leise);stroke-width:1.5;stroke-linecap:round;
             stroke-dasharray:4 7}

@media (max-width:640px){
  .plan{padding:14px;border-radius:var(--r-m)}
  .plan__fuss{font-size:14px}
}

/* ══════════════════════════════════════════════════════════════════
   KAUFENTSCHEIDUNG
   Die Seite führt: verstehen → Eignung → Ergebnis → Nutzen → Preis
   → Ablauf → Einwände → Entscheidung. Eine Aussage, ein Bild, ein
   Nutzen, eine Entscheidung.
   ══════════════════════════════════════════════════════════════════ */

/* ── Above the fold: Problem → Lösung → Ergebnis → CTA ───────────── */
.sofort{
  display:grid; gap:14px; margin:30px auto 0; max-width:940px;
  grid-template-columns:repeat(3,1fr);
}
.sofort__k{
  padding:18px 18px 16px; border:1px solid var(--linie);
  border-radius:var(--r-m); background:var(--flaeche); text-align:left;
}
.sofort__k b{
  display:flex; align-items:center; gap:9px;
  font-size:12px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--leise); margin-bottom:10px;
}
.sofort__z{
  width:26px; height:26px; padding:5px; box-sizing:border-box; flex:none;
  border-radius:50%; background:rgba(107,107,140,.16);
  fill:none; stroke:var(--leise); stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round;
}
.sofort__k--loesung .sofort__z{background:rgba(139,92,246,.18); stroke:var(--akzent-2)}
.sofort__k--ergebnis .sofort__z{background:rgba(52,211,153,.16); stroke:var(--gruen)}
.sofort__k p{margin:0; font-size:15px; line-height:1.5; color:var(--text)}
.sofort__k--loesung{border-color:rgba(139,92,246,.42); background:rgba(139,92,246,.07)}
.sofort__k--loesung b{color:var(--akzent-3)}
.sofort__k--ergebnis{border-color:rgba(52,211,153,.36); background:rgba(52,211,153,.06)}
.sofort__k--ergebnis b{color:var(--gruen)}

/* ── Eignung: passt / passt nicht ────────────────────────────────── */
.eignung{display:grid; gap:20px; grid-template-columns:1fr 1fr; text-align:left}
.eignung__s{
  padding:24px; border-radius:var(--r); border:1px solid var(--linie);
  background:var(--flaeche);
}
.eignung__s--ja{border-color:rgba(52,211,153,.34); background:rgba(52,211,153,.05)}
.eignung__s h3{
  margin:0 0 16px; font-size:17px; font-weight:700; color:var(--text);
  line-height:1.35;
}
.eignung__s ul{margin:0; padding:0; list-style:none; display:grid; gap:11px}
.eignung__s li{
  display:grid; grid-template-columns:20px 1fr; gap:11px; align-items:start;
  font-size:15px; line-height:1.5; color:var(--matt);
}
.eignung__s svg{width:20px; height:20px; margin-top:1px}
.eignung__s--ja svg{stroke:var(--gruen)}
.eignung__s--nein svg{stroke:var(--leise)}

/* ── Ergebniskette ───────────────────────────────────────────────── */
.kette2{
  display:grid; gap:0; margin:0; padding:0; list-style:none; text-align:left;
  max-width:760px; margin-inline:auto;
}
.kette2 li{
  display:grid; grid-template-columns:132px 1fr; gap:20px; align-items:baseline;
  padding:17px 0; border-bottom:1px solid var(--linie);
}
.kette2 li:last-child{border-bottom:0}
.kette2 b{font-size:15px; font-weight:700; color:var(--akzent-3)}
.kette2 li:last-child b{color:var(--gruen)}
.kette2 span{font-size:15px; line-height:1.5; color:var(--matt)}

/* ── Nutzen ──────────────────────────────────────────────────────── */
.nutzen{
  display:grid; gap:12px; grid-template-columns:repeat(2,1fr);
  list-style:none; margin:0; padding:0; text-align:left;
}
.nutzen li{
  display:grid; grid-template-columns:20px 1fr; gap:12px; align-items:start;
  padding:15px 17px; border:1px solid var(--linie); border-radius:var(--r-m);
  background:var(--flaeche); font-size:15px; line-height:1.5; color:var(--text);
}
.nutzen svg{width:20px; height:20px; stroke:var(--akzent-2); margin-top:1px}

/* ── Preis ───────────────────────────────────────────────────────── */
.preis{
  max-width:720px; margin:0 auto; padding:30px; text-align:left;
  border:1px solid rgba(139,92,246,.38); border-radius:var(--r);
  background:linear-gradient(180deg,rgba(139,92,246,.09),var(--flaeche));
  box-shadow:var(--tief-schatten);
}
.preis__zeile{
  display:flex; justify-content:space-between; align-items:baseline; gap:18px;
  padding:15px 0; border-bottom:1px solid var(--linie);
}
.preis__zeile:last-of-type{border-bottom:0}
.preis__zeile{align-items:start}
.preis__zeile dt{margin:0; flex:1 1 auto}
.preis__zeile dt b{display:block; font-size:15.5px; font-weight:700; color:var(--text)}
.preis__was{display:block; margin-top:6px; font-size:14px; line-height:1.55;
  color:var(--matt); max-width:46ch}
.preis__zeile dd{margin:0; text-align:right; flex:0 0 auto}
.preis__zahl{display:block; font-size:26px; font-weight:700; color:var(--text);
  font-variant-numeric:tabular-nums; letter-spacing:-.01em; line-height:1.15}
.preis__netto{display:block; margin-top:3px; font-size:14px; color:var(--leise);
  white-space:nowrap}
.preis__titel{margin:26px 0 12px; font-size:14px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--akzent-3)}
.preis__enthalten{margin:22px 0 0; padding:0; list-style:none; display:grid; gap:10px}
.preis__enthalten li{
  display:grid; grid-template-columns:18px 1fr; gap:11px; align-items:start;
  font-size:14.5px; line-height:1.5; color:var(--matt);
}
.preis__enthalten svg{width:18px; height:18px; stroke:var(--gruen); margin-top:2px}
.preis__hinweis{
  margin:22px 0 0; padding-top:18px; border-top:1px solid var(--linie);
  font-size:14px; line-height:1.6; color:var(--leise);
}

/* ── Nach dem Kauf ───────────────────────────────────────────────── */
.danach{
  display:grid; gap:12px; grid-template-columns:repeat(5,1fr);
  list-style:none; margin:0; padding:0; counter-reset:d; text-align:left;
}
.danach li{
  padding:20px 16px; border:1px solid var(--linie); border-radius:var(--r-m);
  background:var(--flaeche); counter-increment:d;
}
.danach li::before{
  content:counter(d,decimal-leading-zero);
  display:block; font-size:12px; font-weight:700; letter-spacing:.1em;
  color:var(--akzent); margin-bottom:10px;
}
.danach b{display:block; font-size:15px; color:var(--text); margin-bottom:6px}
.danach span{font-size:14px; line-height:1.5; color:var(--matt)}

/* ── Einwände ────────────────────────────────────────────────────── */
.fragen{max-width:800px; margin:0 auto; text-align:left}
.fragen details{
  border:1px solid var(--linie); border-radius:var(--r-m);
  background:var(--flaeche); margin-bottom:10px;
}
.fragen summary{
  padding:16px 20px; cursor:pointer; font-size:15.5px; font-weight:600;
  color:var(--text); list-style:none; display:flex; justify-content:space-between;
  gap:16px; align-items:center;
}
.fragen summary::-webkit-details-marker{display:none}
.fragen summary::after{
  content:"+"; color:var(--akzent-2); font-size:19px; font-weight:400;
  line-height:1; flex:none;
}
.fragen details[open] summary::after{content:"–"}
.fragen summary:focus-visible{outline:2px solid var(--akzent); outline-offset:-2px}
.fragen p{
  margin:0; padding:0 20px 18px; font-size:15px; line-height:1.62; color:var(--matt);
}

/* ── Wiederkehrendes CTA-Band ────────────────────────────────────── */
.band{
  display:flex; flex-wrap:wrap; gap:16px 22px; align-items:center;
  justify-content:center; max-width:860px; margin:0 auto;
  padding:26px 28px; border-radius:var(--r);
  border:1px solid rgba(139,92,246,.34); background:rgba(139,92,246,.07);
}
.band p{margin:0; font-size:16px; line-height:1.5; color:var(--text); text-align:left}


@media (max-width:860px){
  .sofort,.eignung,.nutzen{grid-template-columns:1fr}
  .danach{grid-template-columns:repeat(2,1fr)}
  .kette2 li{grid-template-columns:1fr; gap:4px}
  .preis{padding:22px}
  .band{flex-direction:column; align-items:stretch; text-align:center}
  .band p{text-align:center}
}
@media (max-width:480px){
  .danach{grid-template-columns:1fr}
  .preis__zeile{flex-direction:column; gap:8px}
  .preis__zeile dd{text-align:left}
  .preis__was{max-width:none}
}

/* ══════════════════════════════════════════════════════════════════
   LIVE-BEISPIEL
   Der Besucher läuft den Ablauf selbst durch — erst aus seiner Sicht,
   dann aus der des Betriebs. Echte Aufnahmen, keine Nachbauten.
   ══════════════════════════════════════════════════════════════════ */

.marke-beispiel{
  display:inline-flex; align-items:center; gap:9px;
  margin:0 auto 6px; padding:8px 16px; border-radius:99px;
  border:1px solid rgba(139,92,246,.42); background:rgba(139,92,246,.10);
  font-size:14px; font-weight:600; color:var(--akzent-3);
}
.marke-beispiel::before{
  content:""; width:8px; height:8px; border-radius:50%;
  background:var(--gruen); flex:none;
}

.sicht{margin-top:clamp(40px,5vw,66px); text-align:left}
.sicht__kopf{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 16px;
  margin-bottom:18px; padding-bottom:14px; border-bottom:1px solid var(--linie);
}
.sicht__nr{
  font-size:14px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--akzent);
}
.sicht--b .sicht__nr{color:var(--gruen)}
.sicht__kopf h3{margin:0; font-size:clamp(20px,2.4vw,26px); font-weight:700;
  color:var(--text); line-height:1.25}
.sicht__kopf p{margin:0; flex:1 1 260px; font-size:15px; line-height:1.5;
  color:var(--matt)}

/* Schrittleiste */
.schrittbahn{
  display:flex; gap:8px; margin-bottom:18px; padding-bottom:4px;
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.schrittbahn::-webkit-scrollbar{display:none}
.schritt{
  flex:0 0 auto; display:flex; align-items:center; gap:10px;
  padding:11px 17px; min-height:44px;          /* Touch-Ziel */
  border:1px solid var(--linie); border-radius:99px;
  background:var(--flaeche); color:var(--matt);
  font:600 14px/1.2 var(--font); cursor:pointer;
  transition:border-color .18s var(--weich), color .18s var(--weich),
             background .18s var(--weich);
}
.schritt em{
  font-style:normal; font-size:12px; font-weight:700; letter-spacing:.08em;
  color:var(--leise);
}
.schritt:hover{border-color:var(--linie-2); color:var(--text)}
.schritt[aria-selected="true"]{
  border-color:var(--akzent); background:rgba(139,92,246,.13); color:var(--text);
}
.schritt[aria-selected="true"] em{color:var(--akzent-2)}
.sicht--b .schritt[aria-selected="true"]{
  border-color:var(--gruen); background:rgba(52,211,153,.11);
}
.sicht--b .schritt[aria-selected="true"] em{color:var(--gruen)}
.schritt:focus-visible{outline:2px solid var(--akzent-2); outline-offset:2px}

/* Bildfläche */
.schrittfeld[hidden]{display:none}
.schrittfeld{
  display:grid; gap:26px; grid-template-columns:minmax(0,1fr) 300px;
  align-items:start;
}
/* Perspektive A zeigt Hochkant-Aufnahmen des Widgets — die brauchen
   eine schmale Spalte, sonst erschlagen sie den Ablauf. */
.sicht--a .schrittfeld{grid-template-columns:380px minmax(0,1fr)}
.sicht--a .schrittfeld__bild{max-width:380px}
.schrittfeld__bild{
  margin:0; border:1px solid var(--linie); border-radius:var(--r);
  background:var(--flaeche); overflow:hidden; box-shadow:var(--tief-schatten);
}
.schrittfeld__bild img{display:block; width:100%; height:auto}
.schrittfeld__wort h4{
  margin:0 0 10px; font-size:18px; font-weight:700; color:var(--text);
  line-height:1.3;
}
.schrittfeld__wort p{margin:0; font-size:15px; line-height:1.6; color:var(--matt)}

/* Ergebniskarte — was beim Unternehmen ankommt */
.ergebnis-karte{
  margin-top:26px; padding:22px 24px; border-radius:var(--r);
  border:1px solid rgba(52,211,153,.36); background:rgba(52,211,153,.05);
  text-align:left;
}
.ergebnis-karte__kopf{
  display:flex; align-items:center; gap:11px; margin-bottom:18px;
  padding-bottom:14px; border-bottom:1px solid var(--linie);
}
.ergebnis-karte__kopf b{font-size:16px; color:var(--text)}
.ergebnis-karte__kopf span{
  margin-left:auto; padding:4px 11px; border-radius:99px;
  border:1px solid rgba(52,211,153,.4); color:var(--gruen);
  font-size:14px; font-weight:600;
}
.feldliste{
  display:grid; gap:12px 26px; grid-template-columns:repeat(2,minmax(0,1fr));
  margin:0; padding:0;
}
.feldliste div{display:grid; gap:3px}
.feldliste dt{
  font-size:14px; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--leise); margin:0;
}
.feldliste dd{margin:0; font-size:15px; color:var(--text);
  font-variant-numeric:tabular-nums}

/* Ohne / Mit — als Bildstreifen */
.streifen{
  display:grid; gap:14px; margin-top:clamp(40px,5vw,60px); text-align:left;
}
.streifen__reihe{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  padding:18px 20px; border:1px solid var(--linie); border-radius:var(--r-m);
  background:var(--flaeche);
}
.streifen__reihe--mit{
  border-color:rgba(52,211,153,.34); background:rgba(52,211,153,.05);
}
.streifen__etikett{
  flex:0 0 118px; font-size:14px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--leise);
}
.streifen__reihe--mit .streifen__etikett{color:var(--gruen)}
.streifen__glied{
  display:inline-flex; align-items:center; gap:8px;
  font-size:14px; color:var(--matt); white-space:nowrap;
}
.streifen__glied svg{width:19px; height:19px; flex:none;
  fill:none; stroke:var(--leise); stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round}
.streifen__reihe--mit .streifen__glied{color:var(--text)}
.streifen__reihe--mit .streifen__glied svg{stroke:var(--gruen)}
.streifen__pfeil{color:var(--linie-2); flex:none}

/* Was bedeutet das für Ihr Unternehmen */
.bedeutung{
  display:grid; gap:14px; grid-template-columns:repeat(3,1fr);
  margin-top:clamp(40px,5vw,60px); list-style:none; padding:0; text-align:left;
}
.bedeutung li{
  padding:22px 20px; border:1px solid var(--linie); border-radius:var(--r-m);
  background:var(--flaeche);
}
.bedeutung b{display:block; font-size:16px; color:var(--text); margin-bottom:7px}
.bedeutung span{font-size:14px; line-height:1.55; color:var(--matt)}

@media (max-width:900px){
  .schrittfeld,.sicht--a .schrittfeld{grid-template-columns:1fr}
  .sicht--a .schrittfeld__bild{max-width:none}
  .bedeutung{grid-template-columns:1fr}
  .feldliste{grid-template-columns:1fr}
}
@media (max-width:640px){
  .streifen__etikett{flex:1 1 100%}
  .schritt{padding:11px 15px}
}

/* ══════════════════════════════════════════════════════════════════
   LIVE-BEISPIEL — zweite Stufe
   Sehen → Ausprobieren → Verstehen. Der Besucher entscheidet selbst,
   und die Karte antwortet sichtbar.
   ══════════════════════════════════════════════════════════════════ */

/* Sehen → Ausprobieren → Verstehen */
.dreiklang{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap:10px 14px; margin:26px auto 0; max-width:720px;
}
.dreiklang__glied{
  display:inline-flex; align-items:center; gap:10px;
  padding:12px 20px; border-radius:99px;
  border:1px solid var(--linie); background:var(--flaeche);
  font:700 14px/1 var(--font); letter-spacing:.12em; text-transform:uppercase;
  color:var(--matt);
}
.dreiklang__glied svg{width:20px; height:20px; flex:none; fill:none;
  stroke:var(--leise); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.dreiklang__glied--tun{
  border-color:var(--akzent); background:rgba(139,92,246,.13); color:var(--akzent-3);
}
.dreiklang__glied--tun svg{stroke:var(--akzent-2)}
.dreiklang__glied--ende{
  border-color:rgba(52,211,153,.4); background:rgba(52,211,153,.08); color:var(--gruen);
}
.dreiklang__glied--ende svg{stroke:var(--gruen)}
.dreiklang__pfeil{color:var(--linie-2); font-size:18px; flex:none}

/* Brücke: Besucher → System → Unternehmen */
.bruecke{
  display:flex; align-items:center; justify-content:center; gap:14px;
  flex-wrap:wrap; margin:clamp(34px,4vw,52px) auto;
  padding:20px 24px; max-width:760px;
  border:1px solid var(--linie); border-radius:var(--r);
  background:linear-gradient(90deg,rgba(139,92,246,.09),rgba(52,211,153,.08));
}
.bruecke__punkt{
  display:inline-flex; align-items:center; gap:10px;
  font:600 15px/1.2 var(--font); color:var(--text);
}
.bruecke__punkt svg{width:22px; height:22px; flex:none; fill:none;
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.bruecke__punkt--a svg{stroke:var(--akzent-2)}
.bruecke__punkt--sys svg{stroke:var(--akzent)}
.bruecke__punkt--b svg{stroke:var(--gruen)}
.bruecke__punkt--b{color:var(--gruen)}
.bruecke__pfeil{color:var(--linie-2); font-size:19px; flex:none}

/* Leistungswahl — der Punkt, an dem der Besucher etwas entscheidet */
.wahlblock{
  margin-top:clamp(30px,4vw,46px); padding:22px 24px;
  border:1px solid rgba(139,92,246,.34); border-radius:var(--r);
  background:rgba(139,92,246,.06); text-align:left;
}
.wahlblock__kopf{
  margin:0 0 4px; font:700 14px/1 var(--font); letter-spacing:.12em;
  text-transform:uppercase; color:var(--akzent-3);
}
.wahlblock__satz{margin:0 0 16px; font-size:15px; line-height:1.5; color:var(--matt)}
.leistungswahl{display:flex; flex-wrap:wrap; gap:9px}
.leistungswahl button{
  min-height:44px; padding:11px 17px;
  border:1px solid var(--linie-2); border-radius:99px;
  background:var(--flaeche); color:var(--matt);
  font:600 14px/1.2 var(--font); cursor:pointer;
  transition:border-color .18s var(--weich), color .18s var(--weich),
             background .18s var(--weich);
}
.leistungswahl button:hover{color:var(--text); border-color:var(--akzent)}
.leistungswahl button[aria-pressed="true"]{
  border-color:var(--akzent); background:var(--akzent); color:#0B0B13;
}
.leistungswahl button:focus-visible{outline:2px solid var(--akzent-2); outline-offset:2px}

/* Die Antwort der Karte kurz hervorheben */
@keyframes frisch-an{
  0%   {background:rgba(52,211,153,.30)}
  100% {background:transparent}
}
.frisch{animation:frisch-an 1.1s var(--weich) 1; border-radius:5px}
@media (prefers-reduced-motion:reduce){ .frisch{animation:none} }

/* Ergebniskarte deutlicher als Ziel kennzeichnen */
.ergebnis-ziel{
  display:flex; align-items:center; gap:10px; justify-content:center;
  margin:clamp(30px,4vw,46px) 0 0;
  font:700 14px/1 var(--font); letter-spacing:.12em;
  text-transform:uppercase; color:var(--gruen);
}
.ergebnis-ziel::before,.ergebnis-ziel::after{
  content:""; height:1px; flex:1 1 40px; max-width:110px;
  background:linear-gradient(90deg,transparent,rgba(52,211,153,.45));
}
.ergebnis-ziel::after{background:linear-gradient(90deg,rgba(52,211,153,.45),transparent)}
.ergebnis-karte{margin-top:16px}

/* Menschen im Vorher/Nachher-Streifen */
.streifen__leute{flex:none; display:flex; align-items:center; gap:2px; margin-right:4px}
.streifen__leute svg{width:15px; height:19px}
.streifen__leute svg path,.streifen__leute svg circle{stroke:none}

@media (max-width:640px){
  .dreiklang__glied{padding:10px 15px; font-size:14px; letter-spacing:.08em}
  .bruecke{gap:10px; padding:16px}
  .wahlblock{padding:18px 16px}
}

/* ══════════════════════════════════════════════════════════════════
   EBENEN: PRODUKT · BEISPIEL · ÜBERTRAGBARKEIT
   Die Reinigung ist der gezeigte Fall, nicht das Produkt. Alles hier
   arbeitet bewusst mit generischen Zeichen — kein Besen, kein Eimer.
   ══════════════════════════════════════════════════════════════════ */

.einordnung{
  max-width:820px; margin:0 auto; padding:24px 26px;
  border:1px solid rgba(139,92,246,.34); border-radius:var(--r);
  background:rgba(139,92,246,.07); text-align:left;
}
.einordnung__satz{margin:0; font-size:17px; line-height:1.55; color:var(--text)}
.einordnung__satz + .einordnung__satz{
  margin-top:10px; font-size:15.5px; color:var(--matt);
}
.einordnung__satz b{color:var(--akzent-3)}

.ebenen{
  display:flex; flex-wrap:wrap; gap:10px 12px; align-items:stretch;
  margin-top:20px; padding-top:18px; border-top:1px solid var(--linie);
}
.ebene{
  flex:1 1 180px; padding:13px 15px; border-radius:var(--r-s);
  border:1px solid var(--linie); background:var(--flaeche);
}
.ebene b{
  display:block; font:700 14px/1 var(--font); letter-spacing:.11em;
  text-transform:uppercase; color:var(--leise); margin-bottom:7px;
}
.ebene span{display:block; font-size:14.5px; line-height:1.45; color:var(--matt)}
.ebene--a{border-color:rgba(139,92,246,.4)}
.ebene--a b{color:var(--akzent-3)}
.ebene--a span{color:var(--text)}
.ebene--b b{color:var(--matt)}
.ebene--c{border-color:rgba(52,211,153,.32)}
.ebene--c b{color:var(--gruen)}

/* Systemlogik — die eigentliche Produktarchitektur */
.logik{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:flex-start;
  gap:6px 4px; margin:0 auto; max-width:1000px;
}
.logik__stufe{
  display:flex; flex-direction:column; align-items:center; gap:9px;
  width:118px; text-align:center;
}
.logik__kreis{
  display:grid; place-items:center; width:54px; height:54px; border-radius:50%;
  border:1px solid var(--akzent); background:rgba(139,92,246,.10);
}
.logik__stufe:last-child .logik__kreis{
  border-color:var(--gruen); background:rgba(52,211,153,.10);
}
.logik__kreis svg{width:25px; height:25px; fill:none; stroke:var(--akzent-2);
  stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
.logik__stufe:last-child .logik__kreis svg{stroke:var(--gruen)}
.logik__wort{font-size:14px; line-height:1.35; color:var(--matt)}
.logik__stufe:last-child .logik__wort{color:var(--gruen); font-weight:600}
.logik__pfeil{
  align-self:center; margin-top:-22px; color:var(--linie-2);
  font-size:17px; flex:none;
}

/* Branchen-Beispiele */
.branchen{
  display:grid; gap:13px; grid-template-columns:repeat(3,1fr);
  list-style:none; margin:0; padding:0; text-align:left;
}
.branchen li{
  padding:19px 20px; border:1px solid var(--linie); border-radius:var(--r-m);
  background:var(--flaeche);
}
.branchen b{display:block; font-size:16px; color:var(--text); margin-bottom:10px}
.branchen__kette{
  display:flex; flex-wrap:wrap; gap:6px 7px; align-items:center;
  font-size:14px; color:var(--matt);
}
.branchen__kette i{font-style:normal; color:var(--linie-2)}

/* An Ihr Geschäft anpassbar */
.anpassbar{
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px;
  list-style:none; margin:0; padding:0;
}
.anpassbar li{
  display:inline-flex; align-items:center; gap:9px;
  padding:12px 18px; border-radius:99px;
  border:1px solid rgba(52,211,153,.34); background:rgba(52,211,153,.06);
  font:600 15px/1 var(--font); color:var(--text);
}
.anpassbar svg{width:18px; height:18px; flex:none; fill:none; stroke:var(--gruen);
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}

@media (max-width:900px){
  .branchen{grid-template-columns:repeat(2,1fr)}
  .logik__stufe{width:104px}
}
@media (max-width:620px){
  .branchen{grid-template-columns:1fr}
  .einordnung{padding:18px}
  .logik{gap:4px 2px}
  .logik__stufe{width:92px}
  .logik__wort{font-size:14px}
  .logik__kreis{width:46px; height:46px}
  .logik__kreis svg{width:21px; height:21px}
  .logik__pfeil{margin-top:-18px; font-size:15px}
}

/* ══════════════════════════════════════════════════════════════════
   STUFE 4 — INTERAKTIVE KAUFHILFEN
   Auswählen → sehen, dass sich etwas ändert → verstehen.
   Alles läuft lokal; kein Modul spricht mit einem Server.
   ══════════════════════════════════════════════════════════════════ */

.hilfe{
  margin-top:clamp(40px,5vw,64px); padding:26px 28px; text-align:left;
  border:1px solid var(--linie); border-radius:var(--r);
  background:var(--flaeche);
}
.hilfe__kopf{
  margin:0 0 6px; font:700 14px/1 var(--font); letter-spacing:.12em;
  text-transform:uppercase; color:var(--akzent-3);
}
.hilfe h3{margin:0 0 6px; font-size:clamp(19px,2.2vw,24px); font-weight:700;
  color:var(--text); line-height:1.3}
.hilfe__satz{margin:0 0 18px; font-size:15px; line-height:1.55; color:var(--matt);
  max-width:72ch}
.hilfe__fuss{
  margin:18px 0 0; padding-top:15px; border-top:1px solid var(--linie);
  font-size:14px; line-height:1.55; color:var(--leise);
}
.hilfe__fuss b{color:var(--matt)}

/* gemeinsame Auswahlknöpfe */
.wahlreihe{display:flex; flex-wrap:wrap; gap:9px; margin-bottom:20px}
.wahlreihe button{
  min-height:44px; padding:11px 17px;
  border:1px solid var(--linie-2); border-radius:99px;
  background:var(--tinte-2); color:var(--matt);
  font:600 15px/1.2 var(--font); cursor:pointer;
  transition:border-color .18s var(--weich), color .18s var(--weich),
             background .18s var(--weich);
}
.wahlreihe button:hover{color:var(--text); border-color:var(--akzent)}
.wahlreihe button[aria-pressed="true"]{
  border-color:var(--akzent); background:var(--akzent); color:#0B0B13;
}
.wahlreihe button:focus-visible{outline:2px solid var(--akzent-2); outline-offset:2px}

/* 1 · Szenarien */
.szenario__name{
  display:inline-flex; align-items:center; gap:9px; margin:0 0 16px;
  padding:7px 15px; border-radius:99px;
  border:1px solid rgba(139,92,246,.4); background:rgba(139,92,246,.10);
  font:700 14px/1 var(--font); letter-spacing:.06em; color:var(--akzent-3);
}
.szenario__raster{display:grid; gap:14px; grid-template-columns:repeat(3,1fr)}
.szenario__karte{
  padding:18px 19px; border:1px solid var(--linie); border-radius:var(--r-m);
  background:var(--tinte-2);
}
.szenario__karte > b{
  display:block; font:700 14px/1 var(--font); letter-spacing:.1em;
  text-transform:uppercase; color:var(--leise); margin-bottom:12px;
}
.szenario__karte ul{margin:0; padding:0; list-style:none; display:grid; gap:9px}
.szenario__karte li{
  font-size:15px; line-height:1.4; color:var(--text);
  padding-left:15px; position:relative;
}
.szenario__karte li::before{
  content:""; position:absolute; left:0; top:8px;
  width:6px; height:6px; border-radius:50%; background:var(--akzent);
}
.szenario__karte--ziel{border-color:rgba(52,211,153,.32); background:rgba(52,211,153,.05)}
.szenario__karte--ziel > b{color:var(--gruen)}
.szenario__karte--ziel li::before{background:var(--gruen)}
.szenario__gleich{
  display:flex; flex-wrap:wrap; gap:7px 9px; align-items:center;
  margin-top:16px; font-size:14px; color:var(--leise);
}
.szenario__gleich i{font-style:normal; color:var(--linie-2)}

/* 2 · Ablauf bauen */
.abk{display:flex; flex-wrap:wrap; gap:8px 6px; align-items:center}
.abk__glied{
  display:inline-flex; align-items:center; gap:8px;
  padding:11px 16px; border-radius:99px;
  border:1px solid var(--linie-2); background:var(--tinte-2);
  font:600 15px/1 var(--font); color:var(--matt);
}
.abk__glied svg{width:19px; height:19px; flex:none; fill:none; stroke:var(--leise);
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.abk__glied--ziel{
  border-color:var(--akzent); background:rgba(139,92,246,.16); color:var(--text);
}
.abk__glied--ziel svg{stroke:var(--akzent-2)}
.abk__glied--ende{
  border-color:rgba(52,211,153,.4); background:rgba(52,211,153,.09); color:var(--gruen);
}
.abk__glied--ende svg{stroke:var(--gruen)}
.abk__pfeil{color:var(--linie-2); flex:none}

/* 3 · Entscheidungshilfe */
.pruefung__frage{
  display:flex; flex-wrap:wrap; gap:12px 18px; align-items:center;
  justify-content:space-between;
  padding:15px 0; border-bottom:1px solid var(--linie);
}
.pruefung__frage p{margin:0; flex:1 1 320px; font-size:15.5px; line-height:1.5;
  color:var(--text)}
.pruefung__wahl{display:flex; gap:8px; flex:none}
.pruefung__wahl button{
  min-width:74px; min-height:44px; padding:10px 18px;
  border:1px solid var(--linie-2); border-radius:99px;
  background:var(--tinte-2); color:var(--matt);
  font:600 15px/1 var(--font); cursor:pointer;
}
.pruefung__wahl button:hover{color:var(--text); border-color:var(--akzent)}
.pruefung__wahl button[aria-pressed="true"]{
  border-color:var(--akzent); background:var(--akzent); color:#0B0B13;
}
.pruefung__wahl button:focus-visible{outline:2px solid var(--akzent-2); outline-offset:2px}

.pruefung__offen{
  margin:18px 0 0; font-size:14px; color:var(--leise);
}
.pruefung__ergebnis[hidden]{display:none}
.pruefung__ergebnis{
  margin-top:20px; padding:22px 24px; border-radius:var(--r-m);
  border:1px solid var(--linie); background:var(--tinte-2);
}
.pruefung__ergebnis--ja{border-color:rgba(52,211,153,.4); background:rgba(52,211,153,.06)}
.pruefung__ergebnis--teils{border-color:rgba(139,92,246,.38); background:rgba(139,92,246,.06)}
.pruefung__ergebnis--nein{border-color:var(--linie-2)}
.pruefung__satz{margin:0 0 16px; font-size:17px; line-height:1.45; font-weight:700;
  color:var(--text)}
.pruefung__ergebnis--ja .pruefung__satz{color:var(--gruen)}
.pruefung__titel{
  margin:0 0 10px; font:700 14px/1 var(--font); letter-spacing:.1em;
  text-transform:uppercase; color:var(--leise);
}
.pruefung__punkte{margin:0; padding:0; list-style:none; display:grid; gap:9px}
.pruefung__punkte li{
  font-size:15px; line-height:1.45; color:var(--matt);
  padding-left:16px; position:relative;
}
.pruefung__punkte li::before{
  content:""; position:absolute; left:0; top:8px; width:6px; height:6px;
  border-radius:50%; background:var(--gruen);
}

@media (max-width:820px){
  .szenario__raster{grid-template-columns:1fr}
  .hilfe{padding:20px 18px}
  .pruefung__frage{gap:10px}
  .pruefung__wahl{width:100%}
  .pruefung__wahl button{flex:1 1 0}
}

/* ══════════════════════════════════════════════════════════════════
   ERKLÄRFILM — sieben Szenen, reiner Vektor
   Kein Video, keine Datei, keine Bibliothek. Sieben <g>-Gruppen in
   einer SVG-Bühne; das Skript schaltet weiter. Bei reduzierter
   Bewegung steht jede Szene still in ihrem Endzustand.
   ══════════════════════════════════════════════════════════════════ */

.film{
  max-width:940px; margin:0 auto; text-align:left;
}
.film__buehne{
  position:relative; border:1px solid var(--linie); border-radius:var(--r);
  background:linear-gradient(180deg,var(--flaeche) 0%,var(--tinte-2) 100%);
  box-shadow:var(--tief-schatten); overflow:hidden;
}
.film__buehne svg{display:block; width:100%; height:auto}

/* Szenen */
.szene{opacity:0; visibility:hidden}
.szene--an{opacity:1; visibility:visible}

/* Fortschritt */
.film__leiste{
  display:flex; gap:4px; padding:0 2px; margin:0 0 14px;
}
.film__takt{
  flex:1 1 0; height:4px; border-radius:2px; background:var(--linie);
  overflow:hidden; position:relative;
}
.film__takt span{
  position:absolute; inset:0 100% 0 0; background:var(--akzent);
  transition:right .25s linear;
}
.film__takt--durch span{right:0}

/* Steuerung */
.film__pult{
  display:flex; flex-wrap:wrap; gap:10px; align-items:center;
  margin-top:16px;
}
.film__knopf{
  display:inline-flex; align-items:center; gap:9px;
  min-height:44px; padding:11px 20px; border-radius:99px;
  border:1px solid var(--linie-2); background:var(--flaeche);
  color:var(--text); font:600 15px/1 var(--font); cursor:pointer;
  transition:border-color .18s var(--weich), background .18s var(--weich);
}
.film__knopf:hover{border-color:var(--akzent)}
.film__knopf--start{border-color:var(--akzent); background:rgba(139,92,246,.16)}
.film__knopf:focus-visible{outline:2px solid var(--akzent-2); outline-offset:2px}
.film__knopf svg{width:17px; height:17px; fill:currentColor}

.film__szenen{display:flex; flex-wrap:wrap; gap:6px; margin-left:auto}
.film__punkt{
  min-width:44px; min-height:44px; padding:0 6px;
  border:1px solid var(--linie); border-radius:var(--r-s);
  background:transparent; color:var(--leise);
  font:600 14px/1 var(--font); cursor:pointer;
}
.film__punkt:hover{color:var(--text); border-color:var(--linie-2)}
.film__punkt[aria-current="true"]{
  border-color:var(--akzent); background:rgba(139,92,246,.14); color:var(--akzent-3);
}
.film__punkt:focus-visible{outline:2px solid var(--akzent-2); outline-offset:2px}

.film__titel{
  margin:14px 0 0; font-size:15px; line-height:1.5; color:var(--matt);
}
.film__titel b{color:var(--text)}

.film__text{margin-top:18px}
.film__text summary{
  padding:13px 18px; min-height:44px; display:flex; align-items:center;
  border:1px solid var(--linie); border-radius:var(--r-m);
  background:var(--flaeche); cursor:pointer; list-style:none;
  font:600 15px/1.3 var(--font); color:var(--matt);
}
.film__text summary::-webkit-details-marker{display:none}
.film__text summary:hover{color:var(--text)}
.film__text summary:focus-visible{outline:2px solid var(--akzent); outline-offset:-2px}
.film__text ol{
  margin:12px 0 0; padding:0 0 0 22px; display:grid; gap:9px;
  font-size:15px; line-height:1.55; color:var(--matt);
}

/* ── Bewegungen. Laufen nur in der aktiven Szene. ─────────────────── */
@keyframes f-ein   {from{opacity:0}                    to{opacity:1}}
@keyframes f-hoch  {from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:none}}
@keyframes f-rechts{from{opacity:0;transform:translateX(-26px)} to{opacity:1;transform:none}}
@keyframes f-weg   {from{opacity:.85;transform:none}   to{opacity:.12;transform:translate(var(--dx,60px),var(--dy,-24px))}}
@keyframes f-puls  {0%,100%{opacity:.18;transform:scale(1)} 50%{opacity:.4;transform:scale(1.14)}}
@keyframes f-zieh  {from{stroke-dashoffset:var(--len,300)} to{stroke-dashoffset:0}}

.szene--an .f-ein   {animation:f-ein   .7s var(--weich) both}
.szene--an .f-hoch  {animation:f-hoch  .7s var(--weich) both}
.szene--an .f-rechts{animation:f-rechts .8s var(--weich) both}
.szene--an .f-weg   {animation:f-weg   1.9s var(--weich) both}
.szene--an .f-puls  {animation:f-puls  2.4s ease-in-out infinite}
.szene--an .f-zieh  {stroke-dasharray:var(--len,300); animation:f-zieh 1.2s var(--weich) both}
.szene--an .v1{animation-delay:.15s}
.szene--an .v2{animation-delay:.45s}
.szene--an .v3{animation-delay:.8s}
.szene--an .v4{animation-delay:1.15s}
.szene--an .v5{animation-delay:1.5s}
.szene--an .v6{animation-delay:1.9s}

/* Beschriftungen in der Bühne */
.fs-t{font-family:var(--font);font-size:23px;font-weight:700;fill:var(--text)}
.fs-k{font-family:var(--font);font-size:15px;font-weight:500;fill:var(--matt)}
.fs-m{font-family:var(--font);font-size:14px;font-weight:700;fill:var(--leise);
      letter-spacing:.14em;text-transform:uppercase}
.fs-a{fill:var(--akzent-3)} .fs-g{fill:var(--gruen)}

/* Ruhige Darstellung: nichts bewegt sich, jede Szene steht fertig da */
@media (prefers-reduced-motion:reduce){
  .szene--an .f-ein,.szene--an .f-hoch,.szene--an .f-rechts,
  .szene--an .f-weg,.szene--an .f-puls,.szene--an .f-zieh{
    animation:none !important;
  }
  .szene--an .f-weg{opacity:.12; transform:translate(var(--dx,60px),var(--dy,-24px))}
  .szene--an .f-zieh{stroke-dashoffset:0}
  .film__takt span{transition:none}
}

@media (max-width:640px){
  .film__pult{gap:8px}
  .film__szenen{margin-left:0; width:100%}
  .film__punkt{flex:1 1 0}
  .film__knopf{flex:1 1 auto; justify-content:center}
}

/* Auf schmalen Geräten bekommt die Bühne einen eigenen Scroll-Rahmen —
   sonst rendert die Schrift IN der Zeichnung bei rund fünf Pixeln.
   Die Botschaft selbst steht als HTML-Text darunter und braucht kein
   seitliches Scrollen. */
@media (max-width:940px){
  .film__buehne{overflow:hidden}
  .film__buehne svg{min-width:0}
}
#film-satz{display:block; margin-top:6px; color:var(--matt)}

/* Seitenwahl im Vergleichsfilm — nur schmal, wo sonst zwei unlesbare
   Spalten nebeneinander stünden. */
.film__seiten{display:none}
@media (max-width:940px){
  .film__seiten{
    display:flex; gap:8px; margin-bottom:12px;
  }
  .film__seiten button{
    flex:1 1 0; min-height:44px; padding:11px 14px;
    border:1px solid var(--linie-2); border-radius:99px;
    background:var(--flaeche); color:var(--matt);
    font:600 15px/1.2 var(--font); cursor:pointer;
  }
  .film__seiten button[aria-pressed="true"]{
    border-color:var(--akzent); background:rgba(139,92,246,.16); color:var(--text);
  }
  .film__seiten button:focus-visible{outline:2px solid var(--akzent-2); outline-offset:2px}
}

/* ══════════════════════════════════════════════════════════════════
   TELEFON — nichts wird seitwärts gezogen
   Zeichnungen und Filme bleiben dieselben wie am Rechner; sie passen
   sich nur in die Breite ein. Aufnahmen stehen nicht mehr in
   natürlicher Größe, und Chip-Leisten brechen um statt zu rollen.
   ══════════════════════════════════════════════════════════════════ */

@media (max-width:820px){
  /* Aufnahmen: einpassen. Wer Einzelheiten will, zoomt mit zwei Fingern. */
  .blick{overflow:hidden}
  .blick--roll img,
  .blick img{width:100%; max-width:100%; min-width:0; height:auto}

  /* Leisten brechen um, statt zu rollen */
  .reiterbahn,
  .schrittbahn{flex-wrap:wrap; overflow:visible}

}

/* ══════════════════════════════════════════════════════════════════
   KOPFBÜHNE
   Besucher → Ihre Seite → strukturierte Anfrage. Bewusst ohne Schrift:
   eine Zeichnung aus reinen Formen bleibt auf dem Telefon so lesbar wie
   am Rechner. Sie läuft einmal an und bleibt dann stehen; nur die Blase
   atmet weiter, weil genau sie das Lebendige am System ist.
   ══════════════════════════════════════════════════════════════════ */
.heldb{
  margin:clamp(30px,4vw,48px) auto clamp(28px,3.5vw,40px);
  max-width:1080px; width:100%;
}
.heldb svg{display:block; width:100%; height:auto}   /* nichts tritt aus dem Rahmen */

@keyframes hb-ein  {from{opacity:0}                             to{opacity:1}}
@keyframes hb-hoch {from{opacity:0;transform:translateY(12px)}  to{opacity:1;transform:none}}
@keyframes hb-pop  {from{opacity:0;transform:scale(.72)}        to{opacity:1;transform:none}}
@keyframes hb-weg  {from{opacity:.85;transform:none}
                    to{opacity:.30;transform:translate(var(--dx,40px),var(--dy,-30px))}}
@keyframes hb-zieh {from{stroke-dashoffset:var(--len,200)}      to{stroke-dashoffset:0}}
@keyframes hb-atem {0%,100%{opacity:.16;transform:scale(1)} 50%{opacity:.34;transform:scale(1.13)}}

.hb-ein {animation:hb-ein  .9s var(--weich) both}
.hb-hoch{animation:hb-hoch .8s var(--weich) both}
.hb-pop {animation:hb-pop  .6s var(--weich) both; transform-origin:center}
.hb-weg {animation:hb-weg  2.2s var(--weich) both}
.hb-zieh{stroke-dasharray:var(--len,200); animation:hb-zieh 1s var(--weich) both}
.hb-puls{transform-origin:552px 266px; animation:hb-pop .6s var(--weich) both,
         hb-atem 3.4s ease-in-out 1.6s infinite}

.hb-v1{animation-delay:.15s}  .hb-v2{animation-delay:.70s}
.hb-v3{animation-delay:.95s}  .hb-v4{animation-delay:1.20s}
.hb-v5{animation-delay:1.65s} .hb-v6{animation-delay:2.05s}
.hb-v7{animation-delay:2.35s} .hb-v8{animation-delay:2.60s}
.hb-v9{animation-delay:2.90s}
.hb-puls.hb-v4{animation-delay:1.20s, 1.60s}

/* Ruhig: alles steht sofort fertig da, nichts atmet */
@media (prefers-reduced-motion:reduce){
  .hb-ein,.hb-hoch,.hb-pop,.hb-weg,.hb-zieh,.hb-puls{animation:none !important}
  .hb-weg{opacity:.30; transform:translate(var(--dx,40px),var(--dy,-30px))}
  .hb-zieh{stroke-dashoffset:0}
  .hb-puls{opacity:.16}
}

@media (max-width:820px){
  .heldb{margin:26px auto 24px}
}

/* ══════════════════════════════════════════════════════════════════
   ATMOSPHÄRE
   Zwei Schichten hinter allem: ein feines Punktraster für das
   Handwerk — Ingenieursmillimeterpapier, nicht Dekoration — und zwei
   sehr weiche Lichtfelder in Violett und Grün für die Marke.
   Beide liegen fest im Bild, sodass beim Scrollen Tiefe entsteht,
   ohne dass sich etwas bewegt. Kein Bild, keine Datei, kein Skript.
   ══════════════════════════════════════════════════════════════════ */
body::before,
body::after{
  content:""; position:fixed; inset:0;
  pointer-events:none; z-index:0;
}

/* Punktraster — sichtbar, aber nie laut */
body::before{
  background-image:radial-gradient(circle, rgba(196,181,253,.085) 1px, transparent 1px);
  background-size:36px 36px;
  background-position:center;
  /* In der Mitte etwas zurücknehmen, damit Fließtext ruhig bleibt */
  -webkit-mask-image:radial-gradient(130% 100% at 50% 40%,
      rgba(0,0,0,.55) 0%, rgba(0,0,0,.95) 58%, #000 100%);
          mask-image:radial-gradient(130% 100% at 50% 40%,
      rgba(0,0,0,.55) 0%, rgba(0,0,0,.95) 58%, #000 100%);
}

/* Lichtfelder — Violett oben links, Grün unten rechts, ein tiefer
   Schimmer in der Mitte. Alles sehr diffus. */
body::after{
  background:
    radial-gradient(52rem 34rem at 14% 4%,  rgba(139,92,246,.17), transparent 62%),
    radial-gradient(44rem 30rem at 92% 74%, rgba(52,211,153,.10), transparent 62%),
    radial-gradient(60rem 40rem at 50% 118%, rgba(91,33,182,.16), transparent 66%);
}

/* Damit die Atmosphäre durch die tiefen Abschnitte hindurchscheint,
   statt sie abzuschneiden. Die hellen Abschnitte bleiben bewusst
   deckend — sie sind der gewollte Bruch. */
.teil--tief{background:rgba(11,11,19,.80)}
.held,.schluss{background:transparent}

/* Inhalt liegt über der Atmosphäre */
.teil,.held,.schluss,.kopf,header,nav,footer{position:relative; z-index:1}

/* Auf Telefonen kostet eine feste Hintergrundschicht beim Scrollen
   Rechenzeit. Dort ruhiger und ohne Maske. */
@media (max-width:820px){
  body::before{background-size:30px 30px; -webkit-mask-image:none; mask-image:none; opacity:.6}
  body::after{
    background:
      radial-gradient(26rem 20rem at 10% 2%,  rgba(139,92,246,.16), transparent 64%),
      radial-gradient(24rem 18rem at 96% 82%, rgba(52,211,153,.09), transparent 64%);
  }
}

/* ══════════════════════════════════════════════════════════════════
   HELL ODER DUNKEL — die beiden Ansichten des Verwaltungspanels
   Alle Farbwerte stammen unverändert aus lams-chat-widget.js.
   ══════════════════════════════════════════════════════════════════ */
.hd-buehne{
  /* helle Ansicht — der Auslieferungszustand */
  --pn-flaeche:#F5F7FA;  --pn-leiste:#FFFFFF;   --pn-linie:#EAECEF;
  --pn-karte:#F7F9FB;    --pn-karte-linie:#EEF1F4;
  --pn-text:#0A2530;     --pn-matt:rgba(10,37,48,.45);
  --pn-block:rgba(10,37,48,.14);  --pn-spur:#EEF1F4;
  --pn-knopf-an:rgba(18,135,158,.10); --pn-knopf-rand:rgba(18,135,158,.38);
  max-width:1060px; margin-inline:auto;
}
.hd-buehne.ist-dunkel{
  --pn-flaeche:#0F151A;  --pn-leiste:#131A20;   --pn-linie:#212B33;
  --pn-karte:#182028;    --pn-karte-linie:#232E37;
  --pn-text:#E8EEF3;     --pn-matt:#93A3B0;
  --pn-block:rgba(232,238,243,.20); --pn-spur:#1C252D;
  --pn-knopf-an:rgba(79,209,232,.12); --pn-knopf-rand:rgba(79,209,232,.40);
}
.hd-fenster{ margin:0; }
.hd-blick{ background:var(--pn-flaeche); transition:background .55s var(--weich); }
.hd-blick svg{ display:block; width:100%; height:auto;
  font-family:inherit; font-variant-numeric:tabular-nums; }

/* Der Farbwechsel läuft weich — er ist hier die eigentliche Botschaft. */
.hd-blick rect, .hd-blick path, .hd-blick text, .hd-blick circle{
  transition:fill .55s var(--weich), stroke .55s var(--weich);
}
.hd-sonne, .hd-mond{ transition:opacity .4s var(--weich); }
.hd-mond{ opacity:0; }
.ist-dunkel .hd-sonne{ opacity:0; }
.ist-dunkel .hd-mond{ opacity:1; }

/* Der Ring zeigt, wo der Knopf im echten Panel sitzt. */
.hd-ring{ opacity:.55; animation:hd-atmen 2.8s var(--weich) infinite; }
@keyframes hd-atmen{ 0%,100%{opacity:.25} 50%{opacity:.85} }

/* ── Der Umschalter ────────────────────────────────────────────── */
.hd-steuer{
  display:flex; align-items:center; justify-content:center; gap:16px;
  margin:0 0 26px;
}
.hd-wort{
  font-size:13px; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--leise);
  transition:color .3s var(--weich);
}
.hd-wort--an{ color:var(--text); }
.hd-schalter{
  appearance:none; border:0; padding:5px; margin:0; background:none;
  cursor:pointer; border-radius:999px; line-height:0;
}
.hd-schalter__bahn{
  display:block; width:66px; height:34px; border-radius:999px;
  background:var(--flaeche); border:1px solid var(--linie-2);
  position:relative; transition:background .4s var(--weich),
    border-color .4s var(--weich);
}
.hd-schalter__knopf{
  position:absolute; top:3px; left:3px; width:26px; height:26px;
  border-radius:50%; background:var(--akzent);
  box-shadow:0 2px 10px rgba(139,92,246,.45);
  transition:transform .4s var(--weich), background .4s var(--weich);
}
.hd-schalter[aria-checked="true"] .hd-schalter__bahn{
  background:rgba(79,209,232,.14); border-color:rgba(79,209,232,.45);
}
.hd-schalter[aria-checked="true"] .hd-schalter__knopf{
  transform:translateX(32px); background:#4FD1E8;
  box-shadow:0 2px 10px rgba(79,209,232,.45);
}
.hd-schalter:focus-visible{ outline:2px solid var(--akzent-2); outline-offset:3px; }

/* ── Die drei Belege darunter ──────────────────────────────────── */
.hd-punkte{
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
  max-width:1060px; margin:34px auto 0; text-align:left;
}
.hd-punkt{
  background:var(--flaeche); border:1px solid var(--linie);
  border-radius:var(--r); padding:22px 24px;
}
.hd-punkt h3{
  margin:0 0 8px; font-size:15px; font-weight:700; color:var(--text);
  letter-spacing:-.01em;
}
.hd-punkt p{ margin:0; font-size:14px; line-height:1.6; color:var(--matt); }

@media (max-width:860px){
  .hd-punkte{ grid-template-columns:1fr; gap:14px; margin-top:26px; }
  .hd-punkt{ padding:18px 20px; }
  .hd-steuer{ gap:12px; margin-bottom:20px; }
  .hd-wort{ font-size:12px; }
}
@media (prefers-reduced-motion:reduce){
  .hd-blick rect, .hd-blick path, .hd-blick text, .hd-blick circle,
  .hd-blick, .hd-schalter__knopf, .hd-schalter__bahn,
  .hd-sonne, .hd-mond{ transition:none; }
  .hd-ring{ animation:none; opacity:.6; }
}

/* ══════════════════════════════════════════════════════════════════
   DIE RECHNUNG — Schwellenrechner und Entscheidungsgrundlage
   ══════════════════════════════════════════════════════════════════ */
.rechner{
  max-width:1060px; margin:0 auto; text-align:left;
  background:var(--flaeche); border:1px solid var(--linie);
  border-radius:var(--r); padding:clamp(24px,3vw,38px);
}
.rechner__regler{ display:grid; gap:26px; }
@media (min-width:760px){ .rechner__regler{ grid-template-columns:1fr 1fr; gap:34px; } }

.regler label{
  display:block; font-size:13px; font-weight:600; color:var(--matt);
  letter-spacing:.02em;
}
.regler output{
  display:block; margin:6px 0 12px; font-size:28px; font-weight:800;
  color:var(--text); letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
.regler__fuss{ margin:10px 0 0; font-size:12.5px; color:var(--leise); line-height:1.5; }

/* Der Regler ist 44 px hoch, damit der Daumen ihn trifft; sichtbar ist
   davon nur die 6 px schmale Spur. Die Flaeche drumherum bleibt leer. */
.regler input[type=range]{
  -webkit-appearance:none; appearance:none; width:100%; height:44px;
  background:transparent; outline:none; margin:-10px 0; display:block;
  cursor:pointer;
}
.regler input[type=range]::-webkit-slider-runnable-track{
  height:6px; border-radius:999px; background:var(--linie-2);
}
.regler input[type=range]::-moz-range-track{
  height:6px; border-radius:999px; background:var(--linie-2);
}
.regler input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:24px; height:24px;
  border-radius:50%; background:var(--akzent); cursor:pointer;
  border:3px solid var(--tinte-2); box-shadow:0 2px 10px rgba(139,92,246,.5);
  margin-top:-9px;                 /* (6 − 24) / 2 — mittig auf der Spur */
}
.regler input[type=range]::-moz-range-thumb{
  width:22px; height:22px; border-radius:50%; background:var(--akzent);
  cursor:pointer; border:3px solid var(--tinte-2);
  box-shadow:0 2px 10px rgba(139,92,246,.5);
}
.regler input[type=range]:focus-visible{ outline:2px solid var(--akzent-2); outline-offset:-4px; }

/* ── Die drei Kacheln ──────────────────────────────────────────── */
.rechner__tafel{
  display:grid; gap:14px; margin-top:clamp(26px,3vw,36px);
}
@media (min-width:760px){
  .rechner__tafel{ grid-template-columns:1.4fr 1fr 1fr; align-items:stretch; }
}
.rechenkachel{
  background:var(--tinte-2); border:1px solid var(--linie);
  border-radius:16px; padding:20px 22px;
}
.rechenkachel--gross{
  background:linear-gradient(150deg, rgba(139,92,246,.14), rgba(139,92,246,.04));
  border-color:rgba(139,92,246,.34);
}
.rechenkachel__kopf{
  margin:0 0 12px; font-size:11px; font-weight:700; letter-spacing:.11em;
  text-transform:uppercase; color:var(--leise);
}
.rechenkachel--gross .rechenkachel__kopf{ color:var(--akzent-3); }
.rechenkachel__zahl{
  margin:0; font-size:15px; color:var(--matt); line-height:1.35;
}
.rechenkachel__zahl b{
  display:block; font-size:clamp(34px,4vw,46px); font-weight:800;
  color:var(--text); letter-spacing:-.03em; line-height:1;
  margin-bottom:5px; font-variant-numeric:tabular-nums;
}
.rechenkachel--gross .rechenkachel__zahl b{ color:var(--akzent-3); }
.rechenkachel__sub{ margin:10px 0 0; font-size:13.5px; color:var(--matt); }
.rechenkachel__sub b{ color:var(--text); font-weight:700; font-variant-numeric:tabular-nums; }
.rechenkachel__rechnung{
  margin:12px 0 0; font-size:12px; color:var(--leise); line-height:1.5;
  font-variant-numeric:tabular-nums;
}

.rechner__satz{
  margin:clamp(22px,2.6vw,30px) 0 0; font-size:16px; line-height:1.6;
  color:var(--text); font-weight:600;
}
.rechner__warnung{
  margin:14px 0 0; padding:14px 18px; border-radius:12px;
  background:rgba(252,165,165,.07); border:1px solid rgba(252,165,165,.28);
  font-size:13.5px; line-height:1.6; color:#FCA5A5;
}
.rechner__fuss{
  margin:20px 0 0; padding-top:18px; border-top:1px solid var(--linie);
  font-size:12.5px; line-height:1.65; color:var(--leise);
}
.rechner__fuss b{ color:var(--matt); font-weight:600; }

/* ── Entscheidungsgrundlage ────────────────────────────────────── */
.grundlage{
  max-width:1060px; margin:22px auto 0; text-align:left;
  background:var(--tinte-2); border:1px solid var(--linie-2);
  border-radius:var(--r); padding:clamp(24px,3vw,34px);
}
.grundlage__kopf{
  margin:0 0 18px; font-size:11px; font-weight:700; letter-spacing:.13em;
  text-transform:uppercase; color:var(--akzent-3);
}
.grundlage__liste{ margin:0; display:grid; gap:12px; }
.grundlage__zeile{
  display:grid; gap:4px 20px; padding-bottom:12px;
  border-bottom:1px solid var(--linie);
}
@media (min-width:640px){
  .grundlage__zeile{ grid-template-columns:200px 1fr; align-items:baseline; }
}
.grundlage__zeile:last-child{ border-bottom:0; padding-bottom:0; }
.grundlage__zeile dt{
  font-size:12.5px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--leise);
}
.grundlage__zeile dd{ margin:0; font-size:15.5px; line-height:1.55; color:var(--text); }
.grundlage__leer{
  margin:16px 0 0; font-size:13.5px; line-height:1.6; color:var(--leise);
}
.grundlage__leer a{ color:var(--akzent-2); text-underline-offset:3px; }

@media (max-width:640px){
  .rechner{ padding:20px 18px; }
  .grundlage{ padding:20px 18px; }
  .regler output{ font-size:24px; }
}

/* ══════════════════════════════════════════════════════════════════
   DIE ALTERNATIVEN — vier Wege nebeneinander
   ══════════════════════════════════════════════════════════════════ */
.wahlfeld{
  display:grid; gap:16px; max-width:1160px; margin:0 auto; text-align:left;
}
@media (min-width:1000px){ .wahlfeld{ grid-template-columns:repeat(4,1fr); } }
@media (min-width:620px) and (max-width:999px){ .wahlfeld{ grid-template-columns:1fr 1fr; } }

.wahlkarte{
  display:flex; flex-direction:column;
  background:var(--flaeche); border:1px solid var(--linie);
  border-radius:var(--r); padding:24px 22px;
}
.wahlkarte--eigen{
  background:linear-gradient(165deg, rgba(139,92,246,.13), rgba(139,92,246,.03));
  border-color:rgba(139,92,246,.4);
}
.wahlkarte h3{
  margin:0 0 4px; font-size:17px; font-weight:800; color:var(--text);
  letter-spacing:-.015em;
}
.wahlkarte--eigen h3{ color:var(--akzent-3); }
.wahlkarte__was{ margin:0 0 18px; font-size:13px; color:var(--leise); line-height:1.5; }

.wahlkarte__liste{ margin:0 0 18px; display:grid; gap:13px; }
.wahlkarte__liste > div{ display:grid; gap:3px; }
.wahlkarte__liste dt{
  font-size:10.5px; font-weight:700; letter-spacing:.11em;
  text-transform:uppercase; color:var(--leise);
}
.wahlkarte__liste dd{ margin:0; font-size:14px; line-height:1.5; color:var(--matt); }
.wahlkarte--eigen .wahlkarte__liste dd{ color:var(--text); }

.wahlkarte__besser{
  margin:auto 0 0; padding-top:16px; border-top:1px solid var(--linie);
  font-size:13.5px; line-height:1.6; color:var(--matt);
}
.wahlkarte__besser b{ color:var(--text); font-weight:700; }
.wahlkarte--eigen .wahlkarte__besser{ border-top-color:rgba(139,92,246,.3); }

/* ══════════════════════════════════════════════════════════════════
   DAS RISIKO — der Weg wieder hinaus
   ══════════════════════════════════════════════════════════════════ */
.ausgang{
  list-style:none; margin:0 auto; padding:0; max-width:900px;
  display:grid; gap:2px; text-align:left;
  border:1px solid var(--linie); border-radius:var(--r);
  background:var(--linie); overflow:hidden;
}
.ausgang__punkt{
  display:grid; grid-template-columns:auto 1fr; gap:18px;
  align-items:start; padding:22px 26px; background:var(--tinte-2);
}
.ausgang__punkt svg{
  width:26px; height:26px; flex:none; fill:none; stroke:var(--akzent-2);
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
  margin-top:2px;
}
.ausgang__punkt h3{
  margin:0 0 6px; font-size:16px; font-weight:700; color:var(--text);
  letter-spacing:-.01em;
}
.ausgang__punkt p{ margin:0; font-size:14.5px; line-height:1.65; color:var(--matt); }
.ausgang__punkt p b{ color:var(--text); font-weight:600; }

.ausgang__schluss{
  max-width:900px; margin:26px auto 0; text-align:center;
  font-size:17px; line-height:1.6; font-weight:600; color:var(--text);
}

@media (max-width:560px){
  .ausgang__punkt{ padding:18px 18px; gap:14px; }
  .ausgang__punkt svg{ width:22px; height:22px; }
  .wahlkarte{ padding:20px 18px; }
}

/* Der Druckknopf ist ein <button> — die Knopfregeln setzen ein <a> voraus. */
button.tat{ font:inherit; cursor:pointer; }

/* ══════════════════════════════════════════════════════════════════
   DRUCK — nur die Entscheidungsgrundlage, für die zweite Person im Raum
   ══════════════════════════════════════════════════════════════════ */
@media print{
  body *{ visibility:hidden !important; }
  body::before, body::after{ display:none !important; }
  #grundlage, #grundlage *{ visibility:visible !important; }
  #grundlage{
    position:absolute; inset:0 auto auto 0; width:100%;
    background:#fff !important; border:0 !important; padding:0 !important;
    color:#000 !important;
  }
  #grundlage::before{
    content:"VEXORA AI — Ihre Entscheidungsgrundlage";
    display:block; font-size:18pt; font-weight:800; margin-bottom:6pt;
    color:#000;
  }
  #grundlage::after{
    content:"Einrichtung 3.900 € netto einmalig · Betrieb 199 € netto im Monat · monatlich kündbar, 30 Tage zum Monatsende · vexora-ai.de";
    display:block; margin-top:14pt; padding-top:8pt;
    border-top:1pt solid #999; font-size:9pt; color:#333;
  }
  #grundlage .grundlage__kopf{ display:none !important; }
  #grundlage .grundlage__zeile{ border-bottom:1pt solid #ccc !important; }
  #grundlage dt{ color:#555 !important; }
  #grundlage dd{ color:#000 !important; font-size:12pt !important; }
  #grundlage .grundlage__leer,
  #grundlage .tat-reihe{ display:none !important; }
}

/* ══════════════════════════════════════════════════════════════════
   KONTAKTWEG — erscheint nur, wenn in script.js etwas eingetragen ist
   ══════════════════════════════════════════════════════════════════ */
.kontaktwege{
  margin:18px 0 0; font-size:15px; line-height:1.7; color:var(--matt);
}
.kontaktwege a{
  color:var(--akzent-2); font-weight:600; text-underline-offset:4px;
}
.kontaktwege a:hover{ color:var(--akzent-3); }
.kontaktwege__punkt{ margin-inline:10px; color:var(--leise); }

.fehlerweg{
  margin:10px 0 0; font-size:14px; line-height:1.6; color:var(--matt);
}
.fehlerweg a{ color:var(--akzent-2); font-weight:600; text-underline-offset:3px; }
.fehlerweg a:hover{ color:var(--akzent-3); }