/* =====================================================================
   DESIGN TOKENS — hier änderst du Farben, Typo und Rhythmus
   ===================================================================== */
:root{
  /* -- Farben -- */
  --bg:            #F4F3EF;   /* warmes Off-White */
  --bg-tint:       #F0EFEA;   /* leicht abgesetzte Sektion */
  --surface:       #FFFFFF;
  --ink:           #14120F;   /* Headlines */
  /* Kontrast gegen --bg gemessen: soft 6,7:1, faint 4,6:1.
     Vorher 5,1:1 und 2,7:1 — besonders die Labels lagen unter der
     4,5:1-Grenze. Beide bleiben klar schwächer als --ink. */
  --ink-soft:      #5A554C;   /* Fließtext */
  --ink-faint:     #736E65;   /* Labels, Trust-Zeile */
  --line:          rgba(20,18,15,.10);
  --accent:        #BEA264;   /* Messing/Gold — Markenfarbe */
  --accent-light:  #D3BC8C;   /* heller Verlaufsbeginn oben */
  --accent-deep:   #A9884A;   /* dunkler Verlaufsschluss + Kanten */
  --accent-ink:    #A07F42;   /* kursive Akzentzeile (dunkler, sonst zu blass) */
  --accent-rgb:    190,162,100; /* für Leucht-/Schattenfarben */
  --btn-ink:       #1B1608;   /* Schrift auf gefülltem Button */
  /* Warnton: gedämpftes Terrakotta statt Signalrot — bleibt warm und
     verträgt sich mit dem Gold. Kontrast gegen --bg: 4,7:1. */
  --warn:          #B0503C;
  --warn-rgb:      176,80,60;
  /* Töne der drei Methodenkarten. Kontrast gegen --bg gemessen:
     grün 5,0:1, blau 5,9:1 — beide über der 4,5:1-Grenze. */
  --gruen:         #43714F;
  --gruen-rgb:     67,113,79;
  --blau:          #45607E;
  --blau-rgb:      69,96,126;
  --dot:           20,18,15;  /* RGB des Punkterasters (Alpha in --dot-alpha) */
  --dot-alpha:     .155;

  /* -- Typo -- */
  --font-display: "Instrument Sans", -apple-system, "Segoe UI", sans-serif;
  --font-body:    "Instrument Sans", -apple-system, "Segoe UI", sans-serif;
  --font-accent:  "Instrument Serif", Georgia, serif;   /* kursive Zeile */
  --font-hand:    "Caveat", cursive;                    /* Notiz-Annotation */
  /* Headline ist bewusst NICHT viewport-skaliert (wie im Original):
     ab ~1050px Breite steht sie fix bei 46px. */
  --h1:      clamp(2.05rem, 4.4vw, 2.875rem);
  --h1-lh:   1.0;
  --h1-ls:   -.03em;
  --h2:      clamp(1.9rem, 3.4vw, 2.6rem);

  /* -- Form -- */
  --r-pill:  999px;
  --r-lg:    22px;
  --r-md:    18px;
  --maxw:    1180px;
  --col:     860px;   /* Breite der Content-Spalte / Videokarte */
  --sec-y:   clamp(88px, 11vw, 160px);
  --ease:    cubic-bezier(.22,.61,.36,1);
}

/* =====================================================================
   BASE
   ===================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--font-body);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul{margin:0;padding:0;list-style:none}
h1,h2,h3{margin:0;font-weight:500;letter-spacing:var(--h1-ls)}
p{margin:0}
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:24px}
.wrap--narrow{max-width:860px}

/* Reveal on scroll */
.reveal{opacity:0;transform:translateY(18px);
  transition:opacity .9s var(--ease) var(--d,0s),transform .9s var(--ease) var(--d,0s)}
.reveal.in{opacity:1;transform:none}

/* =====================================================================
   BUTTON
   ===================================================================== */
/* Flache Fläche, keine Verläufe, keine Innenkanten, kein Schlagschatten —
   nichts, was Höhe vortäuscht. Getragen wird der Button allein von der
   Farbfläche und der abgesetzten Outline. */
.btn{
  --pad-y:14px;--pad-x:26px;--glow:.26;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:var(--pad-y) var(--pad-x);border-radius:var(--r-pill);
  font-size:15px;line-height:1;font-weight:500;letter-spacing:-.005em;
  color:var(--btn-ink);
  position:relative;
  background:var(--accent);
  box-shadow:0 0 26px -10px rgba(var(--accent-rgb),var(--glow));
  transition:background .4s var(--ease),box-shadow .45s var(--ease),color .4s var(--ease);
}
/* Die feine Outline läuft abgesetzt außen herum. Als Pseudo-Element und
   nicht als box-shadow-Ring, damit die Lücke transparent bleibt — sonst
   würde ein Ring in Hintergrundfarbe die Punkte dahinter abdecken. */
.btn::after{
  content:"";position:absolute;inset:calc(var(--ring-gap) * -1);
  border:1px solid rgba(var(--accent-rgb),var(--ring-alpha));
  border-radius:inherit;pointer-events:none;
  transition:inset .4s var(--ease),border-color .4s var(--ease);
}
.btn{--ring-gap:4px;--ring-alpha:.45}
/* Hover ohne Bewegung: nur die Fläche vertieft sich und der Ring geht auf. */
.btn:hover{--glow:.44;--ring-gap:6px;--ring-alpha:.7;background:var(--accent-deep)}
.btn:active{--ring-gap:3px}
.btn:focus-visible{outline:2px solid var(--accent-deep);outline-offset:5px}
.btn--sm{--pad-y:10px;--pad-x:15px;--ring-gap:3px;font-size:13px}
.btn--sm:hover{--ring-gap:4px}
.btn--lg{--pad-y:15px;--pad-x:26px;font-size:14.5px}

/* Variante ohne Füllung — falls dir die Outline pur lieber ist:
   einfach class="btn btn--ghost" setzen. */
.btn--ghost{
  color:var(--accent-ink);background:rgba(var(--accent-rgb),.07);
  box-shadow:none;
}
.btn--ghost::after{--ring-gap:0px;--ring-alpha:.6}
.btn--ghost:hover{background:rgba(var(--accent-rgb),.14)}

/* =====================================================================
   NAV
   ===================================================================== */
.nav-wrap{position:fixed;inset:10px 0 auto;z-index:60;display:flex;justify-content:center;pointer-events:none}
.nav{
  pointer-events:auto;display:flex;align-items:center;gap:2px;
  padding:7px 7px 7px 16px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.82);backdrop-filter:blur(16px) saturate(1.4);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);
  border:1px solid rgba(255,255,255,.9);
  box-shadow:0 1px 2px rgba(20,18,15,.05),0 12px 34px -18px rgba(20,18,15,.35);
  transition:box-shadow .5s var(--ease),background .5s var(--ease),padding .55s var(--ease);
}
/* Gescrollt: transparenter, engere Pille — und der Schriftzug klappt weg,
   sodass nur noch das Zeichen stehen bleibt. */
.nav-wrap.is-stuck .nav{
  background:rgba(255,255,255,.74);
  box-shadow:0 1px 2px rgba(20,18,15,.05),0 16px 40px -22px rgba(20,18,15,.45);
  padding-left:10px;
}
.nav__brand{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:500;letter-spacing:-.015em;white-space:nowrap}
.is-stuck .nav__brand{gap:0}
.nav__brand,.nav__name{transition:gap .55s var(--ease),max-width .55s var(--ease),opacity .3s var(--ease)}
.nav__name{display:inline-block;max-width:200px;overflow:hidden;white-space:nowrap}
.is-stuck .nav__name{max-width:0;opacity:0}
.nav__mark{display:grid;place-items:center;width:20px;height:20px;border-radius:6px;color:var(--ink);flex:none}
.nav__mark svg{width:17px;height:17px}
.nav__div{width:1px;height:18px;background:var(--line);margin-inline:11px;
  transition:margin .55s var(--ease),opacity .3s var(--ease)}
.is-stuck .nav__div{margin-inline:6px;opacity:0}
.nav__links{display:flex;align-items:center;gap:2px}
/* Hover liegt als eigene weiße Pille auf der Leiste. */
.nav__links a{position:relative;display:block;padding:9px 12px;border-radius:var(--r-pill);
  font-size:13px;line-height:1;color:var(--ink-soft);
  transition:color .3s var(--ease),background .3s var(--ease),box-shadow .3s var(--ease)}
.nav__links a:hover{
  color:var(--ink);background:#fff;
  box-shadow:0 1px 2px rgba(20,18,15,.07),0 6px 14px -8px rgba(20,18,15,.35);
}
.nav .btn{margin-left:9px}
.nav__burger{display:none;width:38px;height:38px;border:0;background:transparent;border-radius:50%;cursor:pointer}
.nav__burger span{display:block;height:1.5px;width:18px;margin:4px auto;background:var(--ink);border-radius:2px;transition:transform .3s var(--ease),opacity .3s var(--ease)}
.nav__burger[aria-expanded="true"] span:first-child{transform:translateY(3px) rotate(45deg)}
.nav__burger[aria-expanded="true"] span:last-child{transform:translateY(-2.5px) rotate(-45deg)}
.nav__sheet{pointer-events:auto;position:absolute;top:64px;left:16px;right:16px;display:grid;gap:4px;padding:14px;
  background:rgba(255,255,255,.95);backdrop-filter:blur(16px);border-radius:22px;
  border:1px solid var(--line);box-shadow:0 20px 50px -20px rgba(20,18,15,.4)}
.nav__sheet[hidden]{display:none}
.nav__sheet a{padding:12px 14px;border-radius:14px;font-size:16px;color:var(--ink-soft)}
.nav__sheet .btn{margin-top:6px;color:var(--btn-ink)}

/* =====================================================================
   HERO
   ===================================================================== */
.hero{position:relative;padding-top:clamp(96px,11vh,120px);padding-bottom:clamp(56px,7vw,96px);overflow:hidden}
.dotfield{
  position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 72%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 0%,#000 72%,transparent 100%);
}
/* Version 2: das Raster läuft im Header sichtbar aus, statt bis zur
   Sektionsgrenze durchzulaufen — erst dadurch wirkt das rote Raster in der
   Problem-Sektion wie ein Neuanfang und nicht wie eine Fortsetzung. */
.dotfield--auslauf{
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 52%,transparent 78%);
          mask-image:linear-gradient(180deg,#000 0%,#000 52%,transparent 78%);
}

.hero__inner,.marquee,.video-block{position:relative;z-index:1}
.hero__inner{max-width:var(--maxw);margin-inline:auto;padding-inline:24px;text-align:center}

.hero__title{
  font-family:var(--font-display);font-size:var(--h1);line-height:var(--h1-lh);
  font-weight:500;letter-spacing:var(--h1-ls);
}
.hero__title em,.h2 em{
  display:inline-block;font-family:var(--font-accent);font-style:italic;font-weight:400;
  color:var(--accent-ink);letter-spacing:-.005em;
  font-size:1.05em;line-height:1.06;
}
.hero__sub{
  margin:24px auto 0;max-width:660px;color:var(--ink-soft);
  font-size:15px;line-height:1.58;letter-spacing:-.003em;
}
.hero__sub br{display:none}
@media(min-width:900px){.hero__sub br{display:inline}}
.hero__inner .btn{margin-top:28px}

.trust{
  display:flex;align-items:center;justify-content:center;gap:10px;
  margin-top:26px;color:var(--ink-faint);font-size:12.5px;letter-spacing:-.003em;
}
/* Lorbeerzweig: Seitenverhältnis 7:12 aus dem viewBox des SVG.
   fill:currentColor -> nimmt die Farbe der Trust-Zeile an. Für das
   Originalgrün stattdessen fill:#173021 setzen. */
.laurel{width:9px;height:16px;flex:none;fill:currentColor;opacity:.85}
.laurel--r{transform:scaleX(-1)}

/* =====================================================================
   MARQUEE
   ===================================================================== */
/* Läuft randlos aus dem Bild — wie im Original, kein Fade an den Kanten. */
.marquee{margin-top:22px;overflow:hidden}
.marquee__track{display:flex;width:max-content;animation:slide 62s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__row{display:flex;align-items:center;gap:60px;padding-inline:30px}
@keyframes slide{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

/* Kein Flex-Container: sonst würde jedes Inline-Kind zu einem eigenen
   Flex-Item und die Wortmarke bräche um. */
.logo{
  display:block;text-align:center;
  color:var(--ink);opacity:.78;white-space:nowrap;
  font-size:19px;font-weight:600;letter-spacing:-.02em;line-height:1.1;
  filter:grayscale(1);transition:opacity .35s var(--ease)}
.logo:hover{opacity:1}
.logo small{display:block;font-size:6.5px;font-weight:600;letter-spacing:.16em;opacity:.65;margin-top:3px}
.logo i{font-style:normal}
/* Individuelle Wortmarken (Platzhalter für echte SVGs) */
.logo--089{font-weight:800;font-size:22px;letter-spacing:-.04em}
.logo--chique{font-weight:700;font-size:23px}
.logo--wystrach{font-weight:400;font-size:16px;letter-spacing:.06em}
.logo--ditix{font-weight:800;font-size:22px}
.logo--ditix i{color:#2FA9E0}
.logo--kleinfeldt{font-weight:600;font-size:11.5px;letter-spacing:.02em}
.logo--kleinfeldt b{font-weight:400}
.logo--mm{font-family:var(--font-accent);font-size:16px;font-weight:400}
.logo--mm i{font-style:normal}
.logo--max{font-weight:400;font-size:23px;letter-spacing:-.03em;color:#22B8C6;opacity:.9;filter:none}
.logo--max i{font-family:var(--font-accent);font-style:italic}
.logo--ross{font-weight:800;font-size:15px;letter-spacing:.01em}
.logo--orb .orb{width:26px;height:26px;border-radius:50%;background:radial-gradient(circle at 32% 28%,#a6a4ff,#5b21b6 70%);display:inline-block;vertical-align:middle}
.logo--controllit{font-weight:400;font-size:17px;letter-spacing:.01em}
.logo--controllit small{letter-spacing:.06em;font-size:5.5px}
.logo--klix{font-weight:800;font-size:13px;line-height:1;letter-spacing:0}
.logo--klix b{display:block}
.logo--craft{font-weight:700;font-size:15px;color:#1FA9C6;opacity:.9;filter:none;line-height:1.05}
.logo--craft em{font-style:normal;display:block;font-size:13px}
.logo--barbeux{font-family:var(--font-accent);font-size:18px}
.logo--barbeux small{font-size:5.5px}
.logo--superlane{font-weight:500;font-size:18px;letter-spacing:-.01em}
.logo--sm{font-family:var(--font-accent);font-size:19px;color:#D8397F;opacity:.85;filter:none}
.logo--sm small{color:var(--ink);font-family:var(--font-body)}
.logo--luca{font-weight:400;font-size:19px;letter-spacing:-.02em}
.logo--omnino{font-weight:700;font-size:15px;letter-spacing:.02em;background:var(--ink);color:var(--bg);padding:4px 8px;border-radius:2px}
.logo--originx{font-weight:500;font-size:20px}
.logo--originx i{font-family:var(--font-accent);font-style:italic}

/* =====================================================================
   VIDEO
   ===================================================================== */
.video-block{position:relative;max-width:calc(var(--col) + 48px);margin:30px auto 0;padding-inline:24px}
.player{margin:0;position:relative;border-radius:var(--r-lg);background:var(--surface);
  padding:10px;box-shadow:0 2px 4px rgba(20,18,15,.04),0 40px 80px -44px rgba(20,18,15,.42)}
.player__frame{position:relative;border-radius:14px;overflow:hidden;aspect-ratio:16/9;background:#DEDDD8}
.player__video{width:100%;height:100%;object-fit:cover;position:relative;z-index:1}
/* Wistia füllt den Rahmen; padding-top aus dem Einbettcode überschreiben,
   die Seitenverhältnis-Vorgabe macht hier schon .player__frame. */
.player__frame wistia-player{display:block;width:100%;height:100%;padding-top:0!important}
.player__video:not([src]),.player__video[data-missing]{opacity:0}
.player__fallback{position:absolute;inset:0;display:grid;place-items:center;z-index:0;
  color:var(--ink-faint);font-size:14px;text-align:center;
  background:linear-gradient(140deg,#E8E7E2,#D9D8D2 60%,#CFCEC8)}
.player__fallback code{font-size:13px;background:rgba(255,255,255,.6);padding:2px 6px;border-radius:6px}
/* Play-Knopf mittig ueber dem Video. Halbtransparent, damit man das
   laufende Bild dahinter sieht — es ist eine Vorschau, kein Standbild.
   Gold nur als Akzent: Rand, Ring und Dreieck.
   Nach dem Klick verschwindet er ganz, denn ab da steuert der Player. */
/* Kreis, Dreieck und Hinweis sind alle EINZELN mittig gesetzt. Vorher
   lagen Dreieck und Hinweis zusammen in einem zentrierten Raster — dann
   wird ihr gemeinsamer Block mittig gesetzt und das Dreieck rutscht um
   die halbe Texthoehe nach oben aus dem Kreis. */
.player__play{
  position:absolute;inset:0;z-index:3;width:100%;height:100%;
  display:block;
  border:0;background:transparent;cursor:pointer;color:var(--accent);
  transition:opacity .5s var(--ease),visibility .5s;
}
.player__play::before{
  content:"";position:absolute;left:50%;top:50%;translate:-50% -50%;
  width:84px;height:84px;border-radius:50%;
  background:rgba(20,18,15,.34);
  border:1px solid rgba(var(--accent-rgb),.75);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  transition:background .45s var(--ease),scale .45s var(--ease),
             border-color .45s var(--ease);
}
.player__play svg{
  position:absolute;left:50%;top:50%;width:30px;height:30px;
  /* 2px nach rechts: Ein nach rechts zeigendes Dreieck wirkt sonst
     leicht nach links versetzt. */
  translate:calc(-50% + 2px) -50%;
}

/* Ring, der langsam nach aussen laeuft — macht klar, dass hier etwas
   passiert, ohne zu blinken. */
.player__ring{
  position:absolute;left:50%;top:50%;translate:-50% -50%;
  width:84px;height:84px;border-radius:50%;
  border:1px solid rgba(var(--accent-rgb),.6);
  animation:playPuls 2.8s var(--ease) infinite;
}
@keyframes playPuls{
  0%{scale:1;opacity:.65}
  70%{scale:1.5;opacity:0}
  100%{scale:1.5;opacity:0}
}

.player__hinweis{
  position:absolute;left:50%;top:50%;
  translate:-50% 0;margin-top:58px;
  padding:6px 14px;border-radius:999px;white-space:nowrap;
  background:rgba(20,18,15,.42);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  color:#F3E7CB;font-size:12.5px;letter-spacing:.06em;
  transition:opacity .4s var(--ease);
}

.player__play:hover::before{background:rgba(20,18,15,.5);scale:1.07;
  border-color:rgba(var(--accent-rgb),1)}
.player__play:focus-visible::before{outline:2px solid var(--accent);outline-offset:4px}

/* Nach dem Start weg — und nicht mehr anklickbar. */
.player__play.is-weg{opacity:0;visibility:hidden;pointer-events:none}

/* Auf schmalen Bildschirmen ist der Spieler nur rund 184px hoch — mit
   84px Kreis plus Hinweis blieben darunter 3px Luft. Beides knapper. */
@media(max-width:640px){
  .player__play::before,.player__ring{width:64px;height:64px}
  .player__play svg{width:24px;height:24px}
  .player__hinweis{margin-top:44px;font-size:11.5px;padding:5px 12px}
}

@media(prefers-reduced-motion:reduce){
  .player__ring{animation:none}
}

/* Notiz sitzt links neben der Videokarte (430px = halbe Kartenbreite,
   +30px Abstand). Wird ausgeblendet, sobald der Platz nicht reicht. */
.annot{position:absolute;top:28px;width:180px;color:var(--accent-ink);display:none;z-index:2}
@media(min-width:1300px){.annot{display:block;right:calc(50% + 460px)}}
@media(min-width:1700px){.annot{right:calc(50% + 500px);width:200px;top:36px}}
.annot__text{font-family:var(--font-hand);font-size:23px;line-height:1.35;transform:rotate(-3deg)}
.annot__arrow{width:104px;height:80px;margin-top:2px;margin-left:26px;opacity:.9}

/* =====================================================================
   SPLIT-HERO — nur Version "Makler": Video links, Punkte rechts.
   Eigene Klassen, damit die zentrierte Ursprungsversion unberührt bleibt.
   ===================================================================== */
.split{
  position:relative;z-index:1;max-width:var(--maxw);
  margin:clamp(44px,5vw,76px) auto 0;padding-inline:24px;
  display:grid;gap:clamp(30px,3.6vw,60px);align-items:center;grid-template-columns:1fr;
}
@media(min-width:900px){.split{grid-template-columns:minmax(0,1.08fr) minmax(0,1fr)}}
/* Im Split sitzt der Ton-Button innen — außen würde er über den Seitenrand ragen. */
.split .player__mute{left:18px;transform:translate(0,-50%)}

/* Handschriftliche Notiz — steht im Seitenrand links neben der Videokarte,
   der Pfeil läuft von dort auf die Karte zu.
   Sie liegt absolut, belegt also keine Spaltenbreite und drückt das Video
   nicht schmaler. Ab 1520px ist der Rand breit genug (Layout 1228px +
   2x ~150px); darunter bleibt sie aus, weil sie sonst ins Leere zeigt. */
.split__left{position:relative}
.note{display:none;color:var(--accent-ink)}
@media(min-width:1520px){
  .note{
    display:block;position:absolute;top:16px;right:calc(100% + 20px);
    width:clamp(142px,11vw,182px);
  }
}
.note__text{font-family:var(--font-hand);font-size:clamp(20px,1.4vw,24px);
  line-height:1.34;transform:rotate(-3deg);transform-origin:left bottom}
.note__arrow{display:block;width:78%;height:auto;margin:8px 0 0 16%;
  fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* Trust-Zeile mit Gesichtern + Sternen (ersetzt die Logoleiste).
   Bilder liegen unter assets/trust-1.jpg … trust-7.jpg — fehlen sie,
   bleiben die Kreise als neutrale Flächen stehen. */
.trustbar{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:12px;margin-top:30px;color:var(--ink-faint);font-size:12.5px;
}
.faces{display:flex;align-items:center}
.face{
  width:30px;height:30px;flex:none;border-radius:50%;
  background-color:rgba(var(--accent-rgb),.3);
  background-size:cover;background-position:center top;
  box-shadow:0 0 0 2px var(--bg);
  margin-left:-9px;
}
.face:first-child{margin-left:0}
.stars{display:flex;gap:2.5px;margin-left:2px}
.stars svg{width:13px;height:13px;fill:var(--accent)}
.trustbar__text{letter-spacing:-.003em}
/* Schmal: die Zeile bricht um, dann stünde ein Lorbeerzweig oben und der
   andere unten. Deshalb dort ohne Zweige — Gesichter + Sterne, Text darunter. */
@media(max-width:620px){
  .trustbar{gap:9px}
  .trustbar .laurel{display:none}
  .face{width:26px;height:26px;margin-left:-8px}
}

.bullets{display:grid;gap:clamp(18px,1.8vw,24px)}
.bullets li{display:grid;grid-template-columns:22px 1fr;gap:14px;align-items:start;
  font-size:15.5px;line-height:1.52;color:var(--ink-soft);letter-spacing:-.003em}
.tick{margin-top:2px;width:22px;height:22px;border-radius:50%;
  background:rgba(var(--accent-rgb),.22);display:grid;place-items:center}
.tick svg{width:11px;height:11px;fill:none;stroke:var(--accent-deep);
  stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* Logo. Beide Dateien haben dieselbe Höhe im Original (424px), deshalb
   ergibt dieselbe Anzeigehöhe automatisch ein stimmiges Schriftbild. */
.nav__name--wordmark{width:auto;line-height:0}
.nav__mark--wordmark{width:auto;line-height:0}
.nav__name--wordmark img,.nav__mark--wordmark img{height:16px;width:auto;display:block}
/* Zeichen und Schriftzug sind Alternativen, nicht Nachbarn: oben steht der
   Schriftzug, beim Scrollen übernimmt das "b". */
.nav__brand--botti{gap:0}
.nav__brand--botti .nav__mark--wordmark{
  max-width:0;opacity:0;overflow:hidden;
  transition:max-width .55s var(--ease),opacity .3s var(--ease);
}
.is-stuck .nav__brand--botti .nav__mark--wordmark{max-width:24px;opacity:1}

/* =====================================================================
   PROBLEM-SEKTION (Version 2)
   ===================================================================== */
/* --- Scroll-Bühne: Rahmen wächst, Text leuchtet wortweise durch --------
   Der Track gibt die Scrolllänge vor, die Bühne bleibt darin kleben.
   Alle Werte hängen am Scroll-Fortschritt (js/main.js), nicht an einem
   Timer — deshalb läuft die Sequenz rückwärts, wenn man zurückscrollt. */
/* Der Track bringt seine Höhe selbst mit, die Sektionspolsterung sitzt
   deshalb nur unter den Karten.
   Das negative margin-top zieht den leeren Anlauf der Bühne unter den
   Header — dort ist ohnehin nur Luft, also überdeckt nichts etwas. */
/* Der leere Anlauf der Bühne beträgt rund eine halbe Fensterhöhe und wächst
   damit mit hohen Fenstern mit. Der Zug muss deshalb ebenfalls in vh
   rechnen, sonst reicht er auf großen Bildschirmen nicht.
   clamp() deckelt ihn, damit er auf sehr hohen Fenstern nicht zu weit in
   den Header hineinragt. */
/* --pull steuert beides: wie weit die Sektion hochrutscht und wo der
   Scroll-Pfeil sitzt. top:var(--pull) landet exakt auf der Unterkante des
   Headers, also im sichtbaren Zwischenraum. */
.markt{--pull:clamp(180px,36vh,460px);padding-block:0 var(--sec-y);margin-top:calc(var(--pull) * -1)}
@media(max-width:700px){.markt{--pull:clamp(130px,24vh,280px)}}

/* 215vh: die Sequenz ist bei ~84% durch, danach bliebe die Bühne sonst
   unnötig lange stehen, bevor die Kacheln kommen. */
.markt__track{position:relative;height:215vh}
/* Unter dem Textblock steht die halbe Bühne leer. Der negative Zug holt
   einen Teil davon weg — aber nur so viel, dass die Kacheln im leeren
   unteren Bereich der Bühne bleiben und nicht unter den Text rutschen. */
/* Startwert; den genauen Zug rechnet js/main.js aus der echten Geometrie. */
.markt .problems__grid{margin-top:clamp(-300px,-24vh,-120px)}
.markt__stage{
  position:sticky;top:0;height:100vh;height:100svh;
  display:grid;place-items:center;overflow:hidden;
}
/* Das Raster der Markt-Bühne startet unsichtbar und wird von der Sequenz
   rot eingeblendet (js/main.js) — der Farbwechsel macht den Stimmungsbruch
   zwischen Header und Problem-Sektion sichtbar. */
.dotfield--markt{
  -webkit-mask-image:radial-gradient(125% 85% at 50% 58%,#000 30%,transparent 100%);
          mask-image:radial-gradient(125% 85% at 50% 58%,#000 30%,transparent 100%);
}
/* Leichtes Hochsetzen (um die halbe Angabe) — exakt mittig wirkt bei einem
   so kurzen Block etwas tief. Mehr als das nicht: auf hohen Fenstern würde
   die Headline sonst ins obere Drittel rutschen und kopflastig wirken. */
.markt__content{
  position:relative;width:min(100%,720px);padding-inline:24px;text-align:center;
  margin-bottom:8vh;
}
.markt__title{margin-top:0}
.markt__lede{
  margin:26px auto 0;max-width:660px;
  font-size:clamp(15.5px,1.3vw,17.5px);line-height:1.6;color:var(--ink-soft);
}
/* Jedes Wort ein eigenes Element — so kann der Fortschritt sie nacheinander
   aufhellen. Die Spans setzt js/main.js, im HTML steht normaler Fließtext. */
.markt__lede .w{opacity:.13;will-change:opacity}
.markt.is-static .markt__lede .w{opacity:1}

/* --- Warnsignal ------------------------------------------------------
   Ploppt auf, statt zu scrubben: die Klasse wird bei Fortschritt 0,84
   gesetzt, den Rest macht die Transition. Die Kurve überschwingt leicht
   (Rückwärtsanlauf), damit es „aufploppt" und nicht nur einblendet. */
.warn{
  --pop:cubic-bezier(.34,1.56,.64,1);
  display:flex;align-items:center;gap:15px;text-align:left;
  margin:32px auto 0;max-width:600px;padding:15px 22px;border-radius:16px;
  background:rgba(var(--warn-rgb),.07);
  border:1px solid rgba(var(--warn-rgb),.26);
  opacity:0;translate:0 14px;scale:.88;
  transition:opacity .45s var(--ease),translate .55s var(--pop),scale .55s var(--pop);
}
.warn.is-in,.markt.is-static .warn{opacity:1;translate:0 0;scale:1}
.warn p{font-size:15.5px;line-height:1.5;color:var(--ink);letter-spacing:-.005em}

.warn__icon{
  position:relative;flex:none;display:grid;place-items:center;
  width:42px;height:42px;border-radius:50%;color:var(--warn);
  background:rgba(var(--warn-rgb),.14);
}
.warn__icon svg{width:23px;height:23px;position:relative;z-index:1}
/* Ruhiger Puls — läuft erst, wenn das Signal steht. */
.warn__icon::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  border:1px solid rgba(var(--warn-rgb),.55);opacity:0;
}
.warn.is-in .warn__icon::after{animation:warnPuls 2.8s var(--ease) .35s infinite}
@keyframes warnPuls{
  0%{transform:scale(1);opacity:.6}
  70%,100%{transform:scale(1.6);opacity:0}
}
@media(max-width:520px){
  .warn{gap:12px;padding:14px 16px}
  .warn p{font-size:14.5px}
}

.problems__grid{
  display:grid;gap:20px;margin-top:clamp(40px,5vw,66px);
  grid-template-columns:1fr;
}
@media(min-width:640px){.problems__grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.problems__grid{grid-template-columns:repeat(3,1fr)}}

/* Auftauchen der Karten: translate/scale statt transform, weil transform
   für den Hover-Lift reserviert ist — sonst würden sich beide Animationen
   samt ihrer unterschiedlichen Verzögerungen gegenseitig überschreiben. */
.problems__grid{counter-reset:pcard}
.pcard{
  counter-increment:pcard;
  position:relative;overflow:hidden;isolation:isolate;
  border-radius:var(--r-lg);padding:30px 28px 32px;
  /* Punktraster wie im Header, nur sehr leise — die Kacheln gehören damit
     sichtbar zur selben Welt statt weiße Standardkacheln zu sein. */
  background-color:var(--surface);
  background-image:radial-gradient(rgba(20,18,15,.05) 1px,transparent 1px);
  background-size:16px 16px;
  border:1px solid rgba(var(--accent-rgb),.22);
  /* Der abgesetzte Ring der Buttons, hier über outline — braucht kein
     Pseudo-Element (::before ist der Lichtpunkt, ::after die Ziffer). */
  outline:1px solid transparent;outline-offset:0;
  opacity:0;translate:0 28px;scale:.97;
  transition:
    opacity .6s var(--ease) var(--pop-d,0s),
    translate .6s var(--ease) var(--pop-d,0s),
    scale .6s var(--ease) var(--pop-d,0s),
    transform .55s var(--ease),border-color .55s var(--ease),
    outline-color .55s var(--ease),outline-offset .55s var(--ease);
}
/* Laufende Ziffer in der Akzent-Kursiven — dasselbe Schriftpaar wie in den
   Headlines. Kommt aus einem CSS-Zähler, muss also nicht ins Markup. */
.pcard::after{
  content:counter(pcard,decimal-leading-zero);
  position:absolute;top:24px;right:26px;
  font-family:var(--font-accent);font-style:italic;font-size:31px;line-height:1;
  color:rgba(var(--accent-rgb),.5);transition:color .55s var(--ease);
}
.pcard:hover::after{color:rgba(var(--accent-rgb),.95)}
.pcard.is-in{opacity:1;translate:0 0;scale:1}
.problems.is-static .pcard{opacity:1;translate:0 0;scale:1}
/* Micro-Interaktion 1: ein weicher Lichtpunkt folgt dem Cursor über die
   Karte. --mx/--my setzt js/main.js, gedrosselt auf einen Frame. */
.pcard::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,0%),
             rgba(var(--accent-rgb),.15),transparent 68%);
  opacity:0;transition:opacity .55s var(--ease);
}
.pcard:hover{
  transform:translateY(-3px);
  border-color:rgba(var(--accent-rgb),.42);
  outline-color:rgba(var(--accent-rgb),.4);outline-offset:5px;
}
.pcard:hover::before{opacity:1}

/* Micro-Interaktion 2: das Icon hebt sich leicht mit. */
.pcard__icon{
  display:block;width:46px;height:46px;border-radius:50%;
  background-color:rgba(var(--accent-rgb),.10);
  border:1px solid rgba(var(--accent-rgb),.38);
  background-repeat:no-repeat;background-position:center;background-size:22px 22px;
  transition:transform .55s var(--ease),background-color .55s var(--ease);
}
.pcard:hover .pcard__icon{transform:translateY(-3px);background-color:rgba(var(--accent-rgb),.2)}

.pcard h3{margin-top:20px;font-size:19px;font-weight:500;letter-spacing:-.02em;line-height:1.25;
  padding-right:44px}   /* Platz für die Ziffer */
/* Micro-Interaktion 3: die fette Passage der Kicker-Zeile bekommt beim
   Hover eine Linie, die von links einläuft. */
.pcard__kicker{
  margin-top:9px;font-size:12.5px;line-height:1.5;letter-spacing:.07em;
  text-transform:uppercase;color:var(--accent-ink);
}
.pcard__kicker b{position:relative;font-weight:600}
.pcard__kicker b::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;
  background:currentColor;opacity:.45;
  transform:scaleX(0);transform-origin:left;
  transition:transform .6s var(--ease);
}
.pcard:hover .pcard__kicker b::after{transform:scaleX(1)}

/* Bewusst ohne Trennlinie — zusammen mit der Unterstreichung in der
   Kicker-Zeile wären es zwei Linien direkt übereinander. */
.pcard__body{margin-top:20px;color:var(--ink-soft);font-size:15.5px;line-height:1.55}

/* =====================================================================
   AKQUISE-SEKTION (Version 2)
   ===================================================================== */
.akquise__head{
  margin-top:0;max-width:900px;text-align:center;margin-inline:auto;
  font-size:clamp(1.7rem,2.9vw,2.3rem);line-height:1.14;
}
.akquise__grid{
  display:grid;gap:clamp(34px,4.5vw,72px);align-items:center;
  margin-top:clamp(44px,5.5vw,80px);grid-template-columns:1fr;
}
@media(min-width:900px){.akquise__grid{grid-template-columns:minmax(0,.85fr) minmax(0,1fr)}}

/* Bild und Goldrahmen liegen deckungsgleich übereinander wie zwei Karten
   und fächern beim Scrollen auseinander: Bild nach links, Rahmen nach
   rechts, beide mit einer Spur Drehung.
   --fan (0…1) setzt js/main.js aus der Scrollposition. Der Vorgabewert 1
   heißt: ohne JS oder bei prefers-reduced-motion steht der Fächer offen. */
.akquise__media{position:relative;margin:0;--fan:1;--par:0px}
.akquise__media::before{
  content:"";position:absolute;inset:0;
  border:1px solid rgba(var(--accent-rgb),.42);border-radius:var(--r-lg);
  transform-origin:50% 100%;
  transform:translate3d(calc(var(--fan) * 26px),calc(var(--fan) * 22px),0)
            rotate(calc(var(--fan) * 1.6deg));
  will-change:transform;
}
.akquise__img{
  position:relative;border-radius:var(--r-lg);aspect-ratio:4/5;
  background-color:rgba(var(--accent-rgb),.14);
  background-size:cover;background-position:center;
  transform-origin:50% 100%;
  transform:translate3d(calc(var(--fan) * -13px),var(--par),0)
            rotate(calc(var(--fan) * -0.7deg));
  will-change:transform;
}

.akquise__sub{
  font-size:clamp(1.35rem,2vw,1.75rem);line-height:1.2;font-weight:500;
  letter-spacing:-.025em;margin-bottom:22px;
}
.akquise__text p{margin-top:14px;color:var(--ink-soft);font-size:16px;line-height:1.6}
.akquise__text p:first-of-type{margin-top:0}
.akquise__wende{margin-top:22px!important;color:var(--ink)!important;font-weight:500}

/* Die Wendung im Text: erst die Verneinung zurückgenommen, dann die
   eigentliche Aussage groß in der Akzent-Kursiven. */
.claim{position:relative;margin-top:16px!important;padding-left:22px}
.claim::before{
  content:"";position:absolute;left:0;top:2px;bottom:2px;width:2px;
  background:rgba(var(--accent-rgb),.5);border-radius:2px;
  transform:scaleY(0);transform-origin:top;
  transition:transform .9s var(--ease) .25s;
}
.claim.in::before{transform:scaleY(1)}
.claim__no{display:block;color:var(--ink-faint);font-size:16px;line-height:1.5}
.claim__yes{
  display:block;margin-top:7px;color:var(--ink);
  font-size:clamp(20px,2.1vw,26px);line-height:1.25;letter-spacing:-.02em;
}
.claim__yes em{
  font-family:var(--font-accent);font-style:italic;font-weight:400;
  color:var(--accent-ink);font-size:1.08em;letter-spacing:-.005em;
}
.akquise__cta{margin-top:30px}

/* =====================================================================
   FALLAKTE (Version 2)
   ===================================================================== */
/* Akzentwort in der Warnfarbe statt in Gold — bei einer negativen Aussage
   wirkt Gold wie eine Auszeichnung. */
.em--warn{color:var(--warn)!important}

/* Kopfbereich bleibt zusammen mit dem Stapel stehen: Headline und
   Einleitung sind während der ganzen Abfolge sichtbar. Position und
   Abstand zum Stapel rechnet js/main.js aus den echten Höhen. */
@media(min-width:760px){
  /* Ein sticky-Element löst sich, sobald die Unterkante seines Containers
     über top + Elementhöhe wandert. Der Kopf ist niedriger als der Stapel
     und würde sich deshalb später lösen — die letzte Karte liefe hinter
     ihm durch bzw. würde an seiner Kante abgeschnitten.
     Deshalb wird seine Box per Polsterung bis zur Unterkante des Stapels
     verlängert (--kopf-fuellung aus js/main.js). Sichtbar ist nur der
     obere Teil, der Rest der Box ist durchsichtig.
     Der Ausgleich muss am Stapel hängen, nicht als negatives margin am
     Kopf: Für den Lösepunkt zählt dessen Außenkante, ein negatives
     margin-bottom würde die Polsterung wieder aufheben. */
  .faelle__kopf{
    position:sticky;top:var(--kopf-top,96px);z-index:2;pointer-events:none;
    padding-bottom:var(--kopf-fuellung,0px);
  }
  .stapel{margin-top:calc(clamp(38px,4.5vw,62px) - var(--kopf-fuellung,0px))}
  /* Sichtbar ist nur dieser Teil — der Rest der Box bleibt durchsichtig,
     damit die Karten darunter normal zu sehen sind. */
  .faelle__kopf-inner{
    background:var(--bg);padding-bottom:18px;pointer-events:auto;
  }
  /* Deckt den Streifen zwischen Navigation und Kopf ab, sonst taucht eine
     Karte dort kurz wieder auf. Höhe bleibt innerhalb der Sektions-
     polsterung, damit nichts in die getönte Sektion darüber ragt. */
  .faelle__kopf-inner::before{
    content:"";position:absolute;left:0;right:0;bottom:100%;height:130px;
    background:var(--bg);pointer-events:none;
  }
  .faelle__kopf-inner{position:relative}
}
.faelle__head{margin-top:0;text-align:center;max-width:720px;margin-inline:auto}
.faelle__eyebrow{margin-top:clamp(30px,3.5vw,46px);text-align:center}
.faelle__intro{margin-top:14px;margin-inline:auto;text-align:center;max-width:660px}

/* Kartenstapel: jede Karte bleibt oben kleben, die nächste schiebt sich
   darüber und lässt einen Streifen der vorherigen stehen. Reines CSS —
   der Versatz kommt aus --i, das im Markup je Karte gesetzt ist.
   --stapel-top hält Abstand zur fixierten Navigation. */
.stapel{
  /* <ol> bringt 40px Einzug und Zaehlpunkte mit — beides muss weg, sonst
     sitzt der ganze Stapel 40px zu weit rechts. */
  list-style:none;padding:0;
  /* Der Stapel soll mittig im Fenster liegen, nicht oben kleben. Deshalb
     Fenstermitte minus halbe Stapelhöhe (Karte + Versatz der drei
     Nachfolger). Nach unten auf 96px begrenzt, damit er auf sehr flachen
     Fenstern nicht unter die Navigation rutscht. */
  --halber-stapel:165px;
  --stapel-top:max(96px,calc(50vh - var(--halber-stapel)));
  --versatz:18px;
  display:grid;gap:clamp(22px,2.6vw,38px);
  margin-top:clamp(38px,4.5vw,62px);
  max-width:880px;margin-inline:auto;   /* schmaler als die volle Spalte */
}
.fkarte{
  position:relative;
  display:grid;grid-template-columns:1fr;gap:24px;align-content:center;
  min-height:clamp(250px,32vh,320px);
  padding:clamp(30px,3.4vw,44px);border-radius:var(--r-lg);
  background-color:var(--surface);
  background-image:radial-gradient(rgba(20,18,15,.05) 1px,transparent 1px);
  background-size:16px 16px;
  border:1px solid rgba(var(--accent-rgb),.22);
  /* Jede Karte leicht anders schief — wie ein von Hand abgelegter Stapel.
     Der Winkel steht je Karte als --dreh im Markup. */
  transform:rotate(var(--dreh,0deg));
  box-shadow:0 -6px 24px -18px rgba(80,60,20,.5),
             0 16px 36px -30px rgba(80,60,20,.55);
}
@media(min-width:760px){
  /* Erst ab hier stapeln: darunter wäre eine Karte höher als der Platz
     zwischen Navigation und Fensterunterkante, und sticky liefe ins Leere. */
  .fkarte{position:sticky;top:calc(var(--stapel-top) + var(--i) * var(--versatz))}
}
@media(min-width:940px){
  .fkarte{grid-template-columns:minmax(0,1.15fr) minmax(0,.9fr);gap:0 clamp(26px,2.6vw,40px)}
}
/* Schmale Bildschirme: gerade lassen, dort wirkt der Schiefstand nur unruhig */
@media(max-width:560px){.fkarte{transform:none}}

.fkarte__label{
  font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent-ink);font-weight:600;
}
.fkarte__text{margin-top:12px;color:var(--ink-soft);font-size:16px;line-height:1.6}

/* Ergebnis als getönter Block in der Warnfarbe — keine weitere Linie. */
.fkarte__ergebnis{
  align-self:center;
  padding:16px 20px;border-radius:14px;
  background:rgba(var(--warn-rgb),.06);color:var(--warn);
  font-size:15px;line-height:1.5;
}
.fkarte__ergebnis b{
  display:block;margin-bottom:4px;font-size:11.5px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;opacity:.8;
}

/* =====================================================================
   SCHACHMATT-SEKTION (Version 2)
   ===================================================================== */
.faelle__cta{margin-top:clamp(40px,5vw,68px);text-align:center}

/* Scrollstrecke mit fixierter Bühne: jede Etappe schaltet eine Karte und
   einen Zug weiter. 4 Etappen à 50vh plus die Bühne selbst. */
.schach{padding-block:0}
.schach__track{position:relative;height:300vh}
.schach__buehne{position:sticky;top:0;height:100vh;height:100svh;display:grid;place-items:center}
.schach__grid{display:grid;gap:clamp(30px,4vw,64px);align-items:center;grid-template-columns:1fr}
@media(min-width:900px){.schach__grid{grid-template-columns:minmax(0,1fr) minmax(0,.78fr)}}

.schach__head{margin-top:0;font-size:clamp(1.45rem,2.3vw,1.95rem);line-height:1.2;
  max-width:520px}
.schach__schluss{margin-top:clamp(22px,2.4vw,32px);font-size:16.5px;line-height:1.5;
  color:var(--ink);font-weight:500}
.schach__cta{margin-top:22px}

/* --- Kartenstapel der vier Züge ------------------------------------- */
/* Ebenfalls ein <ol>: Einzug und Zaehlpunkte zuruecksetzen. */
.zugkarten{list-style:none;padding:0;margin:0;
  position:relative;height:clamp(186px,20vw,208px)}
.zugkarte{
  position:absolute;left:0;right:0;top:0;
  display:grid;gap:7px;padding:22px 24px;border-radius:var(--r-lg);
  background:var(--surface);border:1px solid rgba(var(--accent-rgb),.22);
  box-shadow:0 16px 34px -30px rgba(80,60,20,.6);
  transform-origin:50% 0;
  transition:transform .6s var(--ease),opacity .6s var(--ease),filter .6s var(--ease);
}
.zugkarte__zug{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--warn);font-weight:600}
.zugkarte__titel{font-size:18px;font-weight:500;letter-spacing:-.02em;color:var(--ink)}
.zugkarte__text{font-size:15.5px;line-height:1.5;color:var(--ink-soft)}

/* Die aktive Karte steht vorn, die folgenden gestaffelt und blass dahinter,
   erledigte werden nach oben ausgeblendet. */
.zugkarte[data-abstand="0"]{transform:none;opacity:1;z-index:4}
.zugkarte[data-abstand="1"]{transform:translateY(16px) scale(.965);opacity:.42;z-index:3}
.zugkarte[data-abstand="2"]{transform:translateY(31px) scale(.93);opacity:.22;z-index:2}
.zugkarte[data-abstand="3"]{transform:translateY(45px) scale(.895);opacity:.12;z-index:1}
.zugkarte[data-abstand="weg"]{transform:translateY(-26px) scale(.97);opacity:0;z-index:0}

/* --- Der goldene König ----------------------------------------------
   Reines SVG, keine Bilddatei. Die Etappen liegen als Klassen auf der
   Bühne; Neigung und Wackeln sind bewusst getrennte Ebenen, sonst würde
   die Keyframe-Animation die Neigung überschreiben. */
/* --- Isometrisches Brett -------------------------------------------
 * Vier mal vier Felder in 2:1-Isometrie. Eine radiale Maske laesst die
 * Raender in den Hintergrund ausfaden, sodass rund sechs Felder klar
 * stehen. Die Figuren liegen ausserhalb der Maske, damit sie scharf
 * bleiben, auch wenn sie am Rand stehen.
 * Positionen und Drehungen setzt js/main.js pro Bild — die Bewegung
 * haengt am Scrollstand und laeuft rueckwaerts genauso.               */

/* --- Schachmatt: flache Seitenansicht -------------------------------
 * Bewusst zweidimensional. Keine Perspektive, keine Kacheln, kein
 * Volumen — nur Silhouetten auf einer Linie, wie eine Zeichnung im
 * Rest der Seite. Die Groessenverhaeltnisse entsprechen einer echten
 * Staunton-Garnitur, sonst liest man die Figuren nicht als das, was
 * sie sind.
 * Alle Positionen und Winkel setzt js/main.js aus dem Scrollstand:
 * die Bewegung laeuft damit auch rueckwaerts sauber zurueck.        */

.matt-buehne{position:relative;justify-self:center;width:min(100%,560px)}
.matt{width:100%;height:auto;display:block;overflow:visible}

.matt__koenig .matt__kipp g{fill:url(#mGold)}
.matt__gegner .matt__kipp g{fill:url(#mDunkel)}

/* Kein transform-origin hier: Die Gruppe liegt bereits im verschobenen
   Koordinatensystem ihrer Figur, der Drehpunkt ist dort (0,0) — also
   genau der Fusspunkt. Ein zusaetzlicher CSS-Ursprung wuerde sich damit
   ueberlagern und die Figur wegkippen lassen. */
.matt__schatten{fill:rgba(70,55,25,.20)}

.matt__staub circle{fill:rgba(120,100,60,.5);opacity:0}

/* --- Pfeile neben dem Kartenstapel --- */
.zugbereich{display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:clamp(12px,1.6vw,20px);align-items:center;
  margin-top:clamp(24px,2.8vw,38px)}

.zugpfeile{display:grid;justify-items:center;gap:10px}
.zugpfeile__stand{color:var(--ink-faint);font-size:12px;
  font-variant-numeric:tabular-nums;letter-spacing:.04em}
.zugpfeile__stand b{color:var(--ink);font-weight:500}

.zugpfeil{
  width:38px;height:38px;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;color:var(--ink-soft);
  background:transparent;border:1px solid var(--line);
  transition:background .35s var(--ease),border-color .35s var(--ease),
             color .35s var(--ease),opacity .35s var(--ease);
}
.zugpfeil svg{width:17px;height:17px}
.zugpfeil:hover:not(:disabled){
  color:var(--accent-ink);border-color:rgba(var(--accent-rgb),.55);
  background:rgba(var(--accent-rgb),.10);
}
.zugpfeil:disabled{opacity:.3;cursor:default}

/* --- Karten des Zugstapels ---------------------------------------- */
/* Schmal: keine Bühne, Karten normal untereinander.
   Das Brett entfällt hier ganz: es ist für eine breite Bühne gebaut
   und als reine Dekoration den Platz auf dem Handy nicht wert. Die
   Vorgängerfigur ragte hier zudem über den Bildschirmrand hinaus. */
@media(max-width:899px){
  .schach__track{height:auto}
  .schach__buehne{position:static;height:auto;padding-block:var(--sec-y)}
  .matt-buehne{display:none}
  .zugbereich{display:block}
  .zugpfeile{display:none}
  .zugkarten{height:auto;display:grid;gap:14px}
  .zugkarte{position:static;opacity:1!important;transform:none!important}
  /* Der Button stand linksbündig unter mittigem Text. */
  .schach__cta{margin-inline:auto;display:block;width:fit-content}
  .schach__grid{justify-items:center;text-align:center}
}

/* =====================================================================
   „NICHT IHRE SCHULD" (Version 2)
   ===================================================================== */
.gefunden__grid{
  display:grid;gap:clamp(36px,4.5vw,76px);align-items:center;grid-template-columns:1fr;
}
@media(min-width:900px){.gefunden__grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.78fr)}}

.gefunden__head{margin-top:0;line-height:1.1}
.gefunden__text p{margin-top:16px;color:var(--ink-soft);font-size:16px;line-height:1.6}
.gefunden__ueberleitung{margin-top:26px!important;color:var(--ink)!important;font-weight:500}

.kennen{display:grid;gap:12px;margin-top:14px}
.kennen li{
  display:grid;grid-template-columns:9px 1fr;gap:14px;align-items:start;
  font-size:15.5px;line-height:1.55;color:var(--ink-soft);
}
.kennen__marke{width:7px;height:7px;margin-top:9px;border-radius:50%;
  background:rgba(var(--warn-rgb),.75)}

/* Die Wendung steht allein — davor und danach Luft. */
.gefunden__wende{
  margin-top:30px!important;color:var(--ink)!important;
  font-size:clamp(19px,1.9vw,23px)!important;font-weight:500;letter-spacing:-.02em;
}
.gefunden__pointe{
  margin-top:26px!important;color:var(--ink)!important;
  font-size:clamp(21px,2.2vw,27px)!important;line-height:1.25!important;letter-spacing:-.02em;
}
.gefunden__pointe em{
  font-family:var(--font-accent);font-style:italic;font-weight:400;
  color:var(--accent-ink);font-size:1.1em;letter-spacing:-.005em;
}
.gefunden__cta{margin-top:30px}

/* Porträt mit demselben Kartenfächer wie in der Akquise-Sektion, nur
   spiegelverkehrt: Das Bild steht hier rechts, also fächert es nach rechts
   auf und der Rahmen nach links. Werte und Mechanik sind identisch. */
.gefunden__media{
  position:relative;margin:0;justify-self:center;width:min(100%,380px);
  --fan:1;--par:0px;
}
.gefunden__media::before{
  content:"";position:absolute;inset:0;
  border:1px solid rgba(var(--accent-rgb),.42);border-radius:var(--r-lg);
  transform-origin:50% 100%;
  transform:translate3d(calc(var(--fan) * -26px),calc(var(--fan) * 22px),0)
            rotate(calc(var(--fan) * -1.6deg));
  will-change:transform;
}
.gefunden__bild{
  position:relative;aspect-ratio:4/5;border-radius:var(--r-lg);
  background-color:rgba(var(--accent-rgb),.14);
  background-size:cover;background-position:center top;
  transform-origin:50% 100%;
  transform:translate3d(calc(var(--fan) * 13px),var(--par),0)
            rotate(calc(var(--fan) * 0.7deg));
  will-change:transform;
}

/* =====================================================================
   ERGEBNISSE (Version 2)
   ===================================================================== */
.ergebnisse__head{margin-top:0;text-align:center;max-width:760px;margin-inline:auto}
.ergebnisse__lede{margin-inline:auto;text-align:center;max-width:620px}

/* Drei Spalten, getrennt durch Haarlinien statt Karten: Kacheln sind in der
   Problem-Sektion belegt, und Ergebnisse dürfen luftiger wirken. */
.ergebnisse__grid{
  display:grid;gap:clamp(30px,3.5vw,52px);
  margin-top:clamp(44px,5vw,72px);grid-template-columns:1fr;
}
@media(min-width:860px){
  .ergebnisse__grid{grid-template-columns:repeat(3,1fr);gap:0}
  .ergebnis{padding-inline:clamp(20px,2.6vw,38px)}
  .ergebnis + .ergebnis{border-left:1px solid var(--line)}
  .ergebnis:first-child{padding-left:0}
  .ergebnis:last-child{padding-right:0}
}
.ergebnis__marke{
  display:grid;place-items:center;width:42px;height:42px;border-radius:50%;
  color:var(--accent-ink);
  background:rgba(var(--accent-rgb),.12);border:1px solid rgba(var(--accent-rgb),.38);
  transition:transform .55s var(--ease),background .55s var(--ease);
}
.ergebnis__marke svg{width:21px;height:21px}
.ergebnis:hover .ergebnis__marke{transform:translate(2px,-2px);background:rgba(var(--accent-rgb),.22)}
.ergebnis__titel{margin-top:20px;font-size:19px;font-weight:500;letter-spacing:-.02em;line-height:1.25}
.ergebnis__kicker{
  margin-top:9px;font-size:12.5px;line-height:1.5;letter-spacing:.07em;
  text-transform:uppercase;color:var(--accent-ink);font-weight:600;
}
.ergebnis__text{margin-top:16px;color:var(--ink-soft);font-size:15.5px;line-height:1.55}

/* Kundenlogos ---------------------------------------------------------
   brightness(0) macht jedes Logo einfarbig schwarz, unabhängig von seiner
   Originalfarbe — vier der sechs Dateien sind weiß und wären auf dem hellen
   Hintergrund sonst unsichtbar. Die Deckkraft nimmt die Härte wieder raus. */
.kundenlogos{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:clamp(26px,4vw,60px);
  margin-top:clamp(52px,6vw,88px);
  padding-top:clamp(34px,4vw,52px);border-top:1px solid var(--line);
}
.kundenlogo{
  height:clamp(30px,3.4vw,42px);width:auto;
  filter:brightness(0);opacity:.42;
  transition:opacity .45s var(--ease);
}
.kundenlogo:hover{opacity:.7}

/* =====================================================================
   MAGNET-METHODE (Version 2) — Aufbau wie die Markt-Sektion
   ===================================================================== */
.methode{padding-block:0 var(--sec-y);margin-top:clamp(-360px,-28vh,-140px)}
.methode__track{position:relative;height:230vh}
.methode__buehne{
  position:sticky;top:0;height:100vh;height:100svh;
  display:grid;place-items:center;overflow:hidden;
}
.dotfield--methode{
  -webkit-mask-image:radial-gradient(125% 85% at 50% 55%,#000 30%,transparent 100%);
          mask-image:radial-gradient(125% 85% at 50% 55%,#000 30%,transparent 100%);
}
.methode__inhalt{
  position:relative;z-index:1;width:min(100%,760px);
  padding-inline:24px;text-align:center;margin-bottom:8vh;
}
.methode__head{margin-top:0}

/* Banner in Gold statt des roten Warnsignals der Markt-Sektion.
   Gleicher Mechanismus: ploppt auf, wenn der Satz durchgeleuchtet ist. */
.gutbanner{
  --pop:cubic-bezier(.34,1.56,.64,1);
  display:flex;align-items:center;gap:15px;text-align:left;
  margin:32px auto 0;max-width:660px;padding:15px 22px;border-radius:16px;
  background:rgba(var(--accent-rgb),.10);
  border:1px solid rgba(var(--accent-rgb),.36);
  opacity:0;translate:0 14px;scale:.88;
  transition:opacity .45s var(--ease),translate .55s var(--pop),scale .55s var(--pop);
}
.gutbanner.is-in,.methode.is-static .gutbanner{opacity:1;translate:0 0;scale:1}
.gutbanner__icon{
  position:relative;flex:none;display:grid;place-items:center;
  width:42px;height:42px;border-radius:50%;color:var(--accent-ink);
  background:rgba(var(--accent-rgb),.18);
}
.gutbanner__icon svg{width:23px;height:23px}
.gutbanner__text{font-size:15.5px;line-height:1.5;color:var(--ink);letter-spacing:-.005em}
/* Wörter werden einzeln aufgehellt (Spans setzt js/main.js) */
.gutbanner__text .w{opacity:.13;will-change:opacity}
.methode.is-static .gutbanner__text .w{opacity:1}

/* --- Die drei Karten -------------------------------------------------
   Gleiche Bauart wie die Problem-Kacheln, aber je Karte ein eigener Ton. */
.mkarten{
  display:grid;gap:20px;grid-template-columns:1fr;
  margin-top:clamp(-300px,-24vh,-120px);
}
@media(min-width:640px){.mkarten{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.mkarten{grid-template-columns:repeat(3,1fr)}}

.mkarte{
  --ton:var(--accent-ink);--ton-rgb:var(--accent-rgb);
  position:relative;overflow:hidden;isolation:isolate;
  border-radius:var(--r-lg);padding:30px 28px 32px;
  background-color:var(--surface);
  background-image:radial-gradient(rgba(20,18,15,.05) 1px,transparent 1px);
  background-size:16px 16px;
  border:1px solid rgba(var(--ton-rgb),.28);
  outline:1px solid transparent;outline-offset:0;
  opacity:0;translate:0 28px;scale:.97;
  transition:
    opacity .6s var(--ease) var(--pop-d,0s),
    translate .6s var(--ease) var(--pop-d,0s),
    scale .6s var(--ease) var(--pop-d,0s),
    transform .55s var(--ease),border-color .55s var(--ease),
    outline-color .55s var(--ease),outline-offset .55s var(--ease);
}
.mkarte.is-in,.problems.is-static .mkarte{opacity:1;translate:0 0;scale:1}
.mkarte--gruen{--ton:var(--gruen);--ton-rgb:var(--gruen-rgb)}
.mkarte--blau{--ton:var(--blau);--ton-rgb:var(--blau-rgb)}
.mkarte--gold{--ton:var(--accent-ink);--ton-rgb:var(--accent-rgb)}

/* Leichte Schräglage wie beim Fallakten-Stapel: die äußeren Karten kippen
   nach außen, die mittlere bleibt gerade. `rotate` ist eine eigenständige
   Eigenschaft — sie kollidiert weder mit dem `transform` des Hovers noch mit
   translate/scale des Pop-ins. Nur im Dreispalter, gestapelt ergäbe
   "links/rechts" keinen Sinn. */
@media(min-width:1000px){
  .mkarte:nth-child(1){rotate:-1.2deg}
  .mkarte:nth-child(3){rotate: 1.2deg}
}

.mkarte::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,0%),
             rgba(var(--ton-rgb),.16),transparent 68%);
  opacity:0;transition:opacity .55s var(--ease);
}
.mkarte:hover{transform:translateY(-3px);border-color:rgba(var(--ton-rgb),.5);
  outline-color:rgba(var(--ton-rgb),.42);outline-offset:5px}
.mkarte:hover::before{opacity:1}

.mkarte__nr{
  display:grid;place-items:center;width:42px;height:42px;border-radius:50%;
  font-size:14px;font-weight:600;font-variant-numeric:tabular-nums;
  color:var(--ton);background:rgba(var(--ton-rgb),.13);
  border:1px solid rgba(var(--ton-rgb),.4);
  transition:background .55s var(--ease),transform .55s var(--ease);
}
.mkarte:hover .mkarte__nr{transform:translateY(-3px);background:rgba(var(--ton-rgb),.24)}
.mkarte h3{margin-top:20px;font-size:19px;font-weight:500;letter-spacing:-.02em;line-height:1.25;
  color:var(--ton)}
.mkarte__text{margin-top:14px;color:var(--ink-soft);font-size:15.5px;line-height:1.55}

/* =====================================================================
   SEKTIONEN
   ===================================================================== */
.sec{padding-block:var(--sec-y);position:relative}
.sec--tint{background:var(--bg-tint);border-block:1px solid var(--line)}
.eyebrow{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint)}
.h2{margin-top:14px;font-family:var(--font-display);font-size:var(--h2);line-height:1.06;font-weight:500}
.lede{margin-top:20px;max-width:620px;color:var(--ink-soft);font-size:clamp(15.5px,1.2vw,17.5px)}

.cards{display:grid;gap:20px;margin-top:clamp(40px,5vw,64px);grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:30px 28px 32px;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.card:hover{transform:translateY(-4px);box-shadow:0 30px 60px -35px rgba(20,18,15,.45)}
.card__num{font-family:var(--font-accent);font-style:italic;font-size:24px;color:var(--accent-ink)}
.card h3{margin-top:14px;font-size:22px;font-weight:500;letter-spacing:-.02em}
.card p{margin-top:10px;color:var(--ink-soft);font-size:15.5px}
.ticks{margin-top:20px;display:grid;gap:9px;font-size:14.5px;color:var(--ink-soft)}
.ticks li{position:relative;padding-left:22px}
.ticks li::before{content:"";position:absolute;left:0;top:8px;width:11px;height:6px;
  border-left:1.5px solid var(--accent);border-bottom:1.5px solid var(--accent);transform:rotate(-45deg)}

.quotes{display:grid;gap:20px;margin-top:clamp(40px,5vw,64px);grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.quote{margin:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:30px 28px}
.quote blockquote{margin:0;font-size:17.5px;line-height:1.5;letter-spacing:-.015em}
.quote figcaption{display:flex;align-items:center;gap:12px;margin-top:24px}
.ava{width:38px;height:38px;border-radius:50%;flex:none;
  background:radial-gradient(circle at 34% 30%,var(--accent-light),var(--accent) 75%);opacity:.85}
.quote b{display:block;font-size:14.5px;font-weight:500}
.quote small{display:block;font-size:13px;color:var(--ink-faint)}

.stats{display:grid;gap:14px;margin-top:26px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.stat{padding:24px 22px;border:1px solid var(--line);border-radius:var(--r-md);background:rgba(255,255,255,.5)}
.stat b{display:block;font-size:30px;font-weight:500;letter-spacing:-.03em}
.stat span{font-size:13.5px;color:var(--ink-faint)}

.warum{display:grid;gap:clamp(36px,5vw,72px);grid-template-columns:1fr}
@media(min-width:900px){.warum{grid-template-columns:1fr 1fr;align-items:center}}
.warum .btn{margin-top:30px}
.compare{border-top:1px solid var(--line)}
.compare li{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding:18px 0;border-bottom:1px solid var(--line);font-size:15px}
.compare li:first-child{font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint)}
.compare__x{color:var(--ink-faint)}
.compare__v{color:var(--ink)}
.compare li:not(:first-child) .compare__v{position:relative;padding-left:22px}
.compare li:not(:first-child) .compare__v::before{content:"";position:absolute;left:0;top:7px;width:11px;height:6px;
  border-left:1.5px solid var(--accent);border-bottom:1.5px solid var(--accent);transform:rotate(-45deg)}

/* FAQ */
/* ============ FAQ ================================================ *
 * Jede Frage ist eine eigene Karte statt einer Zeile in einer Liste —
 * damit hat der geoeffnete Zustand etwas, worin er sich zeigen kann.
 * Offen faerbt sich die Karte golden, bekommt das Punktraster der
 * uebrigen Karten und links eine Kante, die von oben nach unten
 * aufzieht. Es ist immer nur eine Frage offen (siehe js/main.js).     */

.faq{margin-top:clamp(36px,4.5vw,56px);display:grid;gap:12px}

.faq__item{
  position:relative;isolation:isolate;
  border:1px solid var(--line);border-radius:var(--r-lg);
  background-color:var(--surface);
  /* Punktraster wie bei den Methode-Karten. */
  background-image:radial-gradient(rgba(20,18,15,.05) 1px,transparent 1px);
  background-size:16px 16px;
  /* Der versetzte Ring liegt im Ruhezustand unsichtbar auf der Kante und
     wandert beim Ueberfahren nach aussen — dasselbe Verhalten wie dort. */
  outline:1px solid transparent;outline-offset:0;
  transition:transform .55s var(--ease),border-color .55s var(--ease),
             background-color .45s var(--ease),box-shadow .45s var(--ease),
             outline-color .55s var(--ease),outline-offset .55s var(--ease);
}

/* Lichtpunkt, der dem Zeiger folgt — wie bei den Methode-Karten.
   --mx/--my setzt js/main.js, gedrosselt auf einen Frame. */
.faq__item::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,0%),
             rgba(var(--accent-rgb),.16),transparent 68%);
  opacity:0;transition:opacity .55s var(--ease);
}
.faq__item:hover::after{opacity:1}
/* Goldkante links, zieht beim Oeffnen von oben auf. */
.faq__item::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--accent-ink);transform-origin:50% 0;
  scale:1 0;transition:scale .55s var(--ease);
}
.faq__item[open]::before{scale:1 1}

.faq__item:hover{
  transform:translateY(-3px);
  border-color:rgba(var(--accent-rgb),.5);
  outline-color:rgba(var(--accent-rgb),.42);outline-offset:5px;
}
.faq__item[open]{
  border-color:rgba(var(--accent-rgb),.42);
  background-color:rgba(var(--accent-rgb),.08);
  background-image:radial-gradient(rgba(20,18,15,.05) 1px,transparent 1px);
  background-size:16px 16px;
  box-shadow:0 18px 40px -34px rgba(80,60,20,.6);
}

.faq__item summary{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;gap:clamp(12px,1.6vw,18px);
  padding:clamp(18px,2vw,24px) clamp(18px,2.2vw,28px);
  cursor:pointer;list-style:none;
}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary:focus-visible{outline:2px solid rgba(var(--accent-rgb),.6);outline-offset:-3px}

.faq__nr{
  font-family:var(--font-display);font-size:13px;font-weight:500;
  font-variant-numeric:tabular-nums;letter-spacing:.06em;
  color:var(--ink-faint);
  transition:color .4s var(--ease),transform .4s var(--ease);
}
.faq__item:hover .faq__nr{transform:translateY(-1px)}
/* Dunkleres Gold als --accent-ink: auf dem getoenten Grund der offenen
   Karte kaeme der Token nur auf 3,1:1, und Frage wie Nummer sind mit
   16 bzw. 13px kein Grosstext. #7D6434 erreicht 4,6:1. */
.faq__item[open] .faq__nr{color:#7D6434}

.faq__frage{
  font-size:clamp(15.5px,1.3vw,17px);font-weight:500;line-height:1.35;
  letter-spacing:-.01em;color:var(--ink);
  transition:color .4s var(--ease);
}
.faq__item[open] .faq__frage{color:#7D6434}

/* Zeichen: Kreis mit Plus, dreht beim Oeffnen zum Minus. */
.faq__ic{
  position:relative;width:30px;height:30px;flex:none;border-radius:50%;
  border:1px solid var(--line);
  transition:background .45s var(--ease),border-color .45s var(--ease),
             rotate .5s var(--ease);
}
.faq__ic::before,.faq__ic::after{
  content:"";position:absolute;left:50%;top:50%;
  width:11px;height:1.5px;margin:-.75px 0 0 -5.5px;
  background:var(--ink-soft);border-radius:1px;
  transition:transform .5s var(--ease),background .45s var(--ease);
}
.faq__ic::after{transform:rotate(90deg)}
.faq__item:hover .faq__ic{border-color:rgba(var(--accent-rgb),.5)}
.faq__item[open] .faq__ic{
  background:rgba(var(--accent-rgb),.22);
  border-color:rgba(var(--accent-rgb),.5);
  rotate:180deg;                       /* der Kreis dreht mit */
}
.faq__item[open] .faq__ic::after{transform:rotate(0)}   /* Plus wird Minus */
.faq__item[open] .faq__ic::before,
.faq__item[open] .faq__ic::after{background:#7D6434}

.faq__body{overflow:hidden}
.faq__body p{
  margin:0;padding:0 clamp(18px,2.2vw,28px) clamp(20px,2.2vw,26px)
         calc(clamp(18px,2.2vw,28px) + 34px);
  max-width:64ch;color:var(--ink-soft);font-size:15.5px;line-height:1.6;
  /* Die Antwort setzt sich beim Oeffnen leicht nach oben in Bewegung,
     statt einfach da zu sein. */
  opacity:0;translate:0 8px;
  transition:opacity .4s var(--ease) .12s,translate .45s var(--ease) .12s;
}
.faq__item[open] .faq__body p{opacity:1;translate:0 0}

@media(prefers-reduced-motion:reduce){
  .faq__item,.faq__item::before,.faq__item::after,
  .faq__ic,.faq__body p{transition:none}
}

/* CTA */
.cta{position:relative;overflow:hidden;padding-block:clamp(96px,12vw,168px);text-align:center}
.cta__inner{position:relative;z-index:1;display:grid;justify-items:center}
.cta .lede{margin-inline:auto;text-align:center}
.cta .btn{margin-top:32px}
.dotfield--cta{-webkit-mask-image:radial-gradient(120% 80% at 50% 50%,#000 40%,transparent 100%);
                       mask-image:radial-gradient(120% 80% at 50% 50%,#000 40%,transparent 100%)}

/* Footer */
.foot{border-top:1px solid var(--line);padding-block:44px;background:var(--bg-tint)}
.foot__inner{display:flex;flex-wrap:wrap;align-items:center;gap:20px 32px;justify-content:space-between}
.foot__links{display:flex;flex-wrap:wrap;gap:6px 22px;font-size:14.5px;color:var(--ink-soft)}
.foot__links a:hover{color:var(--ink)}
.foot__copy{font-size:13.5px;color:var(--ink-faint)}
.foot__links{list-style:none;margin:0;padding:0}

/* Pflichthinweis: zurueckgenommen, aber lesbar. Abgesetzt durch eine
   feine Linie, damit er nicht wie Teil der Navigation wirkt. */
.foot__hinweis{
  margin-top:clamp(22px,2.6vw,32px);padding-top:clamp(16px,1.8vw,22px);
  border-top:1px solid var(--line);
  max-width:78ch;
  /* Eigener Ton statt --ink-faint: auf dem Fusszeilen-Grund kaeme der
     Token nur auf 4,4:1, und 12,5px sind kein Grosstext. */
  color:#706B62;
  font-size:12.5px;line-height:1.55;
}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media(max-width:960px){
  .nav__links,.nav__div,.nav .btn{display:none}
  .nav__burger{display:block}
  .nav{padding:8px 8px 8px 16px;width:calc(100vw - 32px);justify-content:space-between}
  .hero__title br{display:none}
  .hero__title em{margin-top:6px}
}
@media(max-width:620px){
  .compare li{grid-template-columns:1fr;gap:4px}
  .player{padding:8px;border-radius:20px}
  .player__mute{width:44px;height:44px;left:10px;transform:translate(0,-50%)}
  .player__mute:hover{transform:translate(0,-50%) scale(1.07)}
  .trust{font-size:12.5px}
}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .reveal{opacity:1;transform:none}
  .marquee__track{animation:none}
}

/* ============ ERFAHRUNG: die eine Zahl ============================ *
 * Eine einzelne Zahl trägt die ganze Sektion. Sie muss deshalb wirken
 * wie eine Trophäe, nicht wie eine Statistik: Lorbeer links und rechts
 * (dasselbe Zeichen wie in der Vertrauenszeile oben), darunter ein
 * feiner goldener Strich, der sich aus der Mitte heraus zieht.        */

.methode__cta{margin-top:clamp(40px,5vw,68px);text-align:center}

.erfahrung__wrap{text-align:center}
.erfahrung .h2{margin-inline:auto;max-width:16ch}
.erfahrung__lede{margin-inline:auto}

.zahl{
  position:relative;margin:clamp(44px,6vw,76px) auto 0;
  display:grid;justify-items:center;gap:0;
}

/* Weicher Goldschein hinter der Zahl. Liegt hinter allem und wächst
   beim Auftauchen mit — gibt der Zahl Gewicht ohne harte Kante. */
.zahl::before{
  content:"";position:absolute;z-index:-1;
  left:50%;top:44%;translate:-50% -50%;
  width:min(760px,116%);aspect-ratio:2.1/1;
  background:radial-gradient(closest-side,
             rgba(var(--accent-rgb),.30),rgba(var(--accent-rgb),.09) 52%,transparent 76%);
  opacity:0;scale:.82;
  transition:opacity 1.1s var(--ease) .1s,scale 1.4s var(--ease) .1s;
}
.zahl.in::before{opacity:1;scale:1}

.zahl__reihe{display:flex;align-items:center;justify-content:center;gap:clamp(14px,2.4vw,30px)}

.zahl__laurel{
  width:clamp(18px,2.6vw,30px);height:auto;aspect-ratio:7/12;
  color:var(--accent-ink);opacity:0;
  /* Die Zweige schwenken aus der Mitte nach außen auf. */
  translate:14px 0;
  transition:opacity .8s var(--ease) .5s,translate .9s var(--ease) .5s;
}
.zahl__laurel.laurel--r{translate:-14px 0}
.zahl.in .zahl__laurel{opacity:.9;translate:0 0}

.zahl__wert{
  font-family:var(--font-display);font-weight:500;
  font-size:clamp(46px,9vw,104px);line-height:1;letter-spacing:-.03em;
  color:var(--accent-ink);
  /* Ziffern gleich breit: sonst zappelt die Zahl beim Hochzählen. */
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;
}

.zahl__strich{
  margin-top:clamp(18px,2.4vw,30px);
  height:1px;width:min(340px,72vw);
  background:linear-gradient(90deg,transparent,
             rgba(var(--accent-rgb),.75) 22%,rgba(var(--accent-rgb),.75) 78%,transparent);
  scale:0 1;transition:scale 1s var(--ease) .45s;
}
.zahl.in .zahl__strich{scale:1 1}

.zahl__label{
  margin-top:clamp(14px,1.8vw,20px);
  color:var(--ink-soft);font-size:clamp(14px,1.15vw,16.5px);
  letter-spacing:.02em;
}

@media(prefers-reduced-motion:reduce){
  .zahl::before,.zahl__laurel,.zahl__strich{transition:none}
}

/* --- Rahmen der Sektion: breiter als der uebrige 1180px-Raster --- *
 * `--sbw` ist die Breite der Scrollleiste, von JS gemessen: 100vw
 * enthaelt sie, der sichtbare Bereich nicht. Ohne den Abzug liefe die
 * Sektion auf Systemen mit sichtbarer Leiste seitlich ueber.          */
.auftraege{padding-block:0}
.auftraege .wrap{
  max-width:min(1680px,calc(100vw - var(--sbw,0px) - 2*clamp(0px,2vw,40px)));
}

/* Scrollstrecke mit fixierter Bühne: eine Etappe je Fall, `--etappen`
   setzt JS aus der tatsächlichen Anzahl. */
.auftraege__track{position:relative;height:calc(100svh + var(--etappen,5) * 50vh)}
.auftraege__buehne{
  position:sticky;top:0;height:100svh;
  display:grid;align-content:center;
  /* Platz für die fixierte Navigation — ohne ihn schneidet sie oben in
     die Überschrift. */
  padding-top:clamp(64px,9vh,104px);
}

.auftraege .h2{text-align:center;margin-inline:auto;max-width:22ch}
/* Der Vorspann bleibt schmal — über die volle Breite wäre die Zeile
   zu lang zum Lesen. */
.auftraege .lede{max-width:60ch;margin-inline:auto;text-align:center}

/* ============ AUFTRÄGE: aufklappbarer Fächer ====================== *
 * Der Kern ist, dass Foto und Textkarte GETRENNTE Elemente derselben
 * Flex-Reihe sind — nicht ineinander verschachtelt:
 *
 *   [Streifen 1][Streifen 2][Streifen 3 breit][Karte 3][Streifen 4]…
 *
 * Animiert wird nur die BREITE der Streifen. Sie schieben sich wie
 * eine Ziehharmonika auseinander; das Bild darin hat eine feste Größe
 * und wird nur beschnitten, also skaliert nie. Die Karte springt in
 * der Breite und blendet lediglich über — dadurch entsteht das
 * Gefühl, nach links oder rechts zu springen, statt dass etwas
 * aufgezogen wird.
 *
 * Die Karte landet über `order` direkt neben ihrem Streifen; die
 * inaktiven Karten parken hinter allen anderen.                       */

.faecher{margin-top:clamp(28px,3.4vw,48px)}

.faecher__reihe{
  --lueck:clamp(8px,1vw,14px);
  --zu:clamp(64px,5.6vw,88px);              /* zugeklappter Streifen */
  --auf:clamp(240px,24vw,380px);            /* aufgeklappter Streifen */
  display:flex;gap:var(--lueck);overflow:hidden;
  /* Höhe kommt aus JS: so hoch wie die längste Karte. */
  height:var(--reihe-h,clamp(360px,50svh,540px));
}

/* --- Streifen: das Objektfoto, zugeklappt schmal, offen breit --- */
.astreifen{
  order:calc(var(--i) * 2);
  flex:0 0 auto;width:var(--zu);
  position:relative;overflow:hidden;
  border:0;padding:0;cursor:pointer;background:transparent;
  border-radius:var(--r-lg);
  transition:width .72s cubic-bezier(.16,1,.3,1);
}
.astreifen.is-aktiv{width:var(--auf);cursor:default}

/* Das Bild hat eine FESTE Breite — die des offenen Streifens. Beim
   Zuklappen wird es nur beschnitten, nie verkleinert. Genau das
   verhindert den Zoom, den ein `cover` erzeugen würde. */
.astreifen__bild{
  position:absolute;inset:0 auto 0 50%;translate:-50% 0;
  width:var(--auf);
  background-size:cover;background-position:center;
  transition:filter .5s var(--ease);
}
.astreifen__bild::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(20,18,15,.10),rgba(20,18,15,.82));
  opacity:1;transition:opacity .5s var(--ease);
}
.astreifen.is-aktiv .astreifen__bild::after{opacity:.28}
.astreifen:not(.is-aktiv):hover .astreifen__bild{filter:brightness(1.14)}

.astreifen__name{
  position:absolute;left:50%;bottom:22px;
  transform:translateX(-50%) rotate(180deg);writing-mode:vertical-rl;
  color:#fff;font-size:13.5px;font-weight:500;letter-spacing:.04em;
  white-space:nowrap;text-shadow:0 1px 6px rgba(0,0,0,.55);
  transition:opacity .34s var(--ease);
}
.astreifen.is-aktiv .astreifen__name{opacity:0}

/* --- Karte: springt in der Breite, blendet über --- */
.akarte{
  order:9999;                       /* inaktiv: hinter allem geparkt */
  flex:0 0 0px;width:0;min-width:0;
  overflow:hidden;opacity:0;pointer-events:none;
  border-radius:var(--r-lg);
  background:var(--surface);border:0 solid var(--line);
  /* Die eigene Lücke wieder abziehen, damit geparkte Karten der Reihe
     keinen Platz wegnehmen. Der Rahmen ebenfalls erst im offenen
     Zustand — sonst bleiben pro geparkter Karte 2px stehen. */
  margin-right:calc(-1 * var(--lueck));
  transition:opacity .42s var(--ease);
}
.akarte.is-aktiv{
  order:calc(var(--i) * 2 + 1);
  flex:1 1 0px;width:auto;opacity:1;pointer-events:auto;margin-right:0;
  border-width:1px;
}

/* Feste Breite: sonst bricht der Text in der zugeklappten Karte auf
   Minimalbreite um, und die Höhenmessung bekäme absurde Werte. */
.akarte__inner{
  width:var(--kartenbreite,560px);
  height:100%;display:flex;flex-direction:column;
  padding:clamp(26px,2.6vw,40px);
}

/* --- Inhalt der Karte --- */
.fall__kopf{display:flex;align-items:center;gap:16px}
.fall__portrait{
  width:56px;height:56px;flex:none;border-radius:50%;
  background-image:var(--portrait);background-color:var(--bg-tint);
  background-size:cover;background-position:center top;
  box-shadow:0 0 0 1px var(--line);
}
.fall__name{font-family:var(--font-display);font-weight:500;
  font-size:clamp(24px,2.5vw,34px);line-height:1.05;letter-spacing:-.02em}
.fall__rolle{margin-top:4px;color:var(--ink-faint);font-size:14.5px}

.fall__marken{display:flex;flex-wrap:wrap;gap:9px;list-style:none;margin:22px 0 0;padding:0}
.fall__marke{
  padding:7px 14px;border-radius:999px;
  font-size:12.5px;letter-spacing:.02em;
  color:var(--ink-soft);border:1px solid var(--line);
}
/* Die Herkunft ist das Verkaufsargument der Sektion — sie trägt Gold. */
.fall__marke--quelle{
  color:var(--accent-ink);border-color:rgba(var(--accent-rgb),.45);
  background:rgba(var(--accent-rgb),.09);
  text-transform:uppercase;font-size:11.5px;letter-spacing:.1em;
}

/* margin-bottom, nicht mehr padding oben an .fall__prov: dessen
   `margin-top:auto` schrumpft auf null, sobald der Text die Karte füllt —
   dann klebte der Strich direkt unter der letzten Zeile. */
.fall__text{margin-top:22px;margin-bottom:clamp(26px,2.8vw,40px);
  color:var(--ink-soft);font-size:15.5px;line-height:1.6}

.fall__prov{
  margin-top:auto;padding-top:24px;border-top:1px solid var(--line);
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;
}
.fall__prov-label{color:var(--ink-faint);font-size:14px}
.fall__prov-wert{
  font-family:var(--font-display);font-weight:500;
  font-size:clamp(26px,2.6vw,36px);letter-spacing:-.02em;color:var(--accent-ink);
  font-variant-numeric:tabular-nums;
}


/* --- Leiste unten --- */
.faecher__leiste{display:flex;align-items:center;gap:clamp(16px,2.4vw,32px);margin-top:26px}
.faecher__zaehler{color:var(--ink-faint);font-size:13.5px;font-variant-numeric:tabular-nums}
.faecher__zaehler b{color:var(--ink);font-weight:500}
.faecher__bar{flex:1;height:1px;background:var(--line);position:relative;overflow:hidden}
.faecher__bar i{
  position:absolute;inset:0;transform-origin:left center;
  background:var(--accent-ink);scale:.2 1;
  transition:scale .72s cubic-bezier(.16,1,.3,1);
}
.faecher__pfeil{
  width:46px;height:46px;flex:none;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;color:var(--ink);
  background:transparent;border:1px solid var(--line);
  transition:background .4s var(--ease),border-color .4s var(--ease),color .4s var(--ease);
}
.faecher__pfeil svg{width:19px;height:19px}
.faecher__pfeil:hover{
  color:var(--accent-ink);border-color:rgba(var(--accent-rgb),.55);
  background:rgba(var(--accent-rgb),.10);
}

/* --- Schmale Bildschirme: kein Fächer, sondern gestapelte Karten --- */
@media(max-width:900px){
  .auftraege{padding-block:var(--sec-y)}
  .auftraege__track{height:auto}
  .auftraege__buehne{position:static;height:auto;display:block}
  .faecher__reihe{display:grid;grid-template-columns:1fr;gap:18px;height:auto;overflow:visible}
  /* Auch .is-aktiv treffen: die Regel oben ist staerker als ein blosses
     .astreifen und der offene Streifen behielt sonst seine Desktop-Breite. */
  .astreifen,.astreifen.is-aktiv{
    order:calc(var(--i) * 2);width:auto;height:clamp(200px,42vw,300px)}
  .astreifen__bild{width:100%;left:0;translate:0}
  .astreifen__name{display:none}
  .akarte{order:calc(var(--i) * 2 + 1);flex:none;width:auto;opacity:1;
    pointer-events:auto;margin-right:0;height:auto}
  .akarte__inner{width:auto;height:auto}
  .faecher__leiste{display:none}
}

@media(prefers-reduced-motion:reduce){
  .astreifen,.akarte,.faecher__bar i{transition:none}
}

/* ============ CTA-BANNER: erster Schritt ========================== *
 * Ein abgesetzter Block statt einer weiteren offenen Sektion — hier
 * soll der Blick hängenbleiben. Goldener Grundton mit dem gleichen
 * Punktraster wie die Methode-Karten, damit es zur Seite gehört und
 * nicht wie ein eingeklebtes Werbebanner wirkt.
 *
 * Das Bild sitzt links; in der Sektion „Es ist nicht Ihre Schuld"
 * steht es rechts. So wechselt die Seite die Richtung, statt zweimal
 * dasselbe Bild-Text-Muster zu zeigen.                               */

.schritt__banner{
  position:relative;overflow:hidden;
  border-radius:var(--r-lg);
  padding:clamp(28px,3.4vw,56px);
  background-color:rgba(var(--accent-rgb),.10);
  background-image:radial-gradient(rgba(20,18,15,.05) 1px,transparent 1px);
  background-size:16px 16px;
  border:1px solid rgba(var(--accent-rgb),.34);
  display:grid;gap:clamp(28px,3.6vw,60px);align-items:center;
  grid-template-columns:1fr;
}
@media(min-width:900px){
  .schritt__banner{grid-template-columns:minmax(0,.62fr) minmax(0,1fr)}
}

/* Bild und der versetzte Rahmen dahinter — dasselbe Motiv wie bei
   „Es ist nicht Ihre Schuld", nur zur anderen Seite gefächert. */
.schritt__media{
  position:relative;margin:0;justify-self:center;width:min(100%,360px);
  --fan:1;--par:0px;
}
.schritt__media::before{
  content:"";position:absolute;inset:0;
  border:1px solid rgba(var(--accent-rgb),.5);border-radius:var(--r-lg);
  transform-origin:50% 100%;
  transform:translate3d(calc(var(--fan) * 26px),calc(var(--fan) * 22px),0)
            rotate(calc(var(--fan) * 1.6deg));
  will-change:transform;
}
.schritt__bild{
  position:relative;aspect-ratio:4/5;border-radius:var(--r-lg);
  background-color:rgba(var(--accent-rgb),.16);
  background-size:cover;background-position:center top;
  transform-origin:50% 100%;
  transform:translate3d(calc(var(--fan) * -13px),var(--par),0)
            rotate(calc(var(--fan) * -0.7deg));
  will-change:transform;
}

.schritt__head{margin-top:0;line-height:1.12}
.schritt__lede{margin-top:20px;color:var(--ink-soft);
  font-size:clamp(15.5px,1.2vw,17px);line-height:1.6;max-width:56ch}
.schritt__cta{margin-top:30px}

/* ============ VERGLEICH: eine Tabelle, in der Mitte getrennt ====== *
 * Jede Zeile stellt einen Punkt direkt seinem Gegenstueck gegenueber.
 * `display:contents` an .vzeile loest deren eigene Box auf, sodass die
 * beiden Zellen im Raster der Tabelle liegen — nur so sitzen linke und
 * rechte Seite garantiert auf derselben Linie, egal wie lang der Text
 * ist. Zwei getrennte Spalten koennen das nicht.
 *
 * Links bleibt bewusst blass und flach: das Uebliche. Rechts traegt
 * Gold, das Punktraster der uebrigen Karten und einen kraeftigeren
 * Rand.                                                                */

.vergleich__head{text-align:center;margin-inline:auto;max-width:20ch}
.vergleich__lede{text-align:center;margin-inline:auto;max-width:62ch}

.vtab{
  position:relative;
  display:grid;grid-template-columns:1fr 1fr;
  margin-top:clamp(38px,4.6vw,64px);
  border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;
}
.vzeile{display:contents}

/* Trennlinie in der Mitte — zieht sich beim Einlaufen von oben auf. */
.vtab__mitte{
  position:absolute;top:0;bottom:0;left:50%;width:1px;z-index:2;
  background:linear-gradient(180deg,
    rgba(var(--accent-rgb),.10),rgba(var(--accent-rgb),.42) 18%,
    rgba(var(--accent-rgb),.42) 82%,rgba(var(--accent-rgb),.10));
  transform-origin:50% 0;scale:1 0;
  transition:scale 1.1s var(--ease) .18s;
}
.vtab.in .vtab__mitte{scale:1 1}

/* --- Koepfe --- */
.vkopf{
  font-family:var(--font-display);font-weight:500;
  font-size:clamp(19px,1.8vw,24px);letter-spacing:-.02em;
  padding:clamp(20px,2.2vw,28px) clamp(20px,2.4vw,34px);
  border-bottom:1px solid var(--line);
}
.vkopf--andere{background:rgba(20,18,15,.03);color:var(--ink-faint)}
.vkopf--wir{
  /* Dunkleres Gold als --accent-ink: auf dem goldenen Grund kaeme der
     Token nur auf 3,1:1 und ist bei 19px kein Grosstext mehr. */
  color:#826735;
  background-color:rgba(var(--accent-rgb),.13);
  border-bottom-color:rgba(var(--accent-rgb),.30);
}

/* --- Zellen --- */
.vzelle{
  display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:14px;align-items:start;
  padding:clamp(20px,2.2vw,28px) clamp(20px,2.4vw,34px);
  border-top:1px solid var(--line);
  transition:background .45s var(--ease);
}
.vzeile--kopf + .vzeile .vzelle{border-top:0}

.vzelle--andere{background:rgba(20,18,15,.03)}
.vzelle--wir{
  background-color:rgba(var(--accent-rgb),.07);
  background-image:radial-gradient(rgba(20,18,15,.05) 1px,transparent 1px);
  background-size:16px 16px;
  border-top-color:rgba(var(--accent-rgb),.22);
}

/* Die ganze Zeile hebt sich beim Ueberfahren hervor — man vergleicht
   ja immer beide Seiten miteinander, nicht eine allein. */
.vzeile:hover .vzelle--andere{background:rgba(20,18,15,.055)}
.vzeile:hover .vzelle--wir{background-color:rgba(var(--accent-rgb),.15)}

/* --- Zeichen --- */
.vzelle__marke{
  width:26px;height:26px;flex:none;margin-top:1px;
  display:grid;place-items:center;border-radius:50%;
  scale:.55;opacity:0;
  transition:scale .55s cubic-bezier(.34,1.56,.64,1) var(--d,0s),
             opacity .4s var(--ease) var(--d,0s),
             background .45s var(--ease);
}
.vzelle.in .vzelle__marke{scale:1;opacity:1}
.vzelle__marke svg{width:14px;height:14px;fill:none;
  stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.vzelle--andere .vzelle__marke{background:rgba(var(--warn-rgb),.12);color:var(--warn)}
.vzelle--wir .vzelle__marke{background:rgba(var(--accent-rgb),.22);color:var(--accent-ink)}
.vzeile:hover .vzelle--wir .vzelle__marke{background:rgba(var(--accent-rgb),.34)}

/* --- Text --- */
.vzelle__inhalt{display:block}
.vzelle__titel{display:block;font-weight:500;font-size:16px;
  letter-spacing:-.01em;line-height:1.35;color:var(--ink)}
.vzelle--andere .vzelle__titel{color:var(--ink-soft)}
.vzelle__text{display:block;margin-top:7px;
  color:var(--ink-soft);font-size:15px;line-height:1.55}
/* Eigener Ton statt --ink-faint: auf dem leicht dunkleren Grund der
   linken Spalte kaeme der Token nur auf 4,3:1. #6E6A61 erreicht 4,6:1
   und bleibt trotzdem sichtbar zurueckhaltend. */
.vzelle--andere .vzelle__text{color:#6E6A61}

/* Nur auf schmalen Bildschirmen sichtbar, wo die Koepfe entfallen. */
.vzelle__wer{display:none}

/* Die Zellen laufen aus ihrer jeweiligen Richtung zur Mitte hin ein.
   Ueberschreibt das senkrechte Standard-Reveal. */
.vzelle.reveal{transform:translateX(-20px)}
.vzelle--wir.reveal{transform:translateX(20px)}
.vzelle.reveal.in{transform:none}

/* --- Schmale Bildschirme: Paare untereinander --- */
@media(max-width:820px){
  .vtab{display:block;border-radius:var(--r-lg)}
  .vtab__mitte{display:none}
  .vzeile{display:block}
  /* Nach .vzeile, sonst gewinnt dessen display:block bei gleicher Staerke
     und die Spaltenkoepfe blieben stehen. */
  .vzeile--kopf{display:none}
  .vzelle{padding:clamp(18px,4vw,24px)}
  .vzelle--andere{border-top:1px solid var(--line)}
  .vzelle--wir{border-top:0}
  .vzelle.reveal,.vzelle--wir.reveal{transform:translateY(16px)}
  .vzelle__wer{
    display:block;grid-column:1 / -1;margin-bottom:10px;
    font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  }
  .vzelle--andere .vzelle__wer{color:var(--ink-faint)}
  .vzelle--wir .vzelle__wer{color:var(--accent-ink)}
}

@media(prefers-reduced-motion:reduce){
  .vzelle__marke,.vtab__mitte,.vzelle{transition:none}
}


/* ============ ÜBER MICH ========================================== *
 * Eine schmale Lesespalte statt der vollen Breite: Der Abschnitt ist
 * ein zusammenhängender Text, und über 1180px wären die Zeilen zu
 * lang. Am Ende die Pointe, groß gesetzt, darunter die Unterschrift.  */

/* Zwei Spalten: Lesespalte links, Portraet rechts. Das Bild klebt beim
   Lesen mit, damit es nicht schon nach dem ersten Absatz oben aus dem
   Bild wandert — die Textspalte ist deutlich hoeher als das Bild. */
.ueber__grid{display:grid;gap:clamp(30px,4vw,64px);grid-template-columns:1fr}
@media(min-width:900px){
  /* Mittig statt klebend: der Faecher und die Parallaxe leben davon, dass
     sich das Bild im Fenster bewegt — geklebt stuenden beide still.
     Die uebrigen Bildsektionen zentrieren ebenso. */
  .ueber__grid{grid-template-columns:minmax(0,1fr) minmax(0,.5fr);align-items:center}
}

/* Dieselbe Behandlung wie die uebrigen Bilder der Seite: ein versetzter
   Rahmen, der beim Hereinscrollen auffaechert, dazu eine ruhige
   Parallaxe auf dem Motiv. Richtung wie bei "Nicht Ihre Schuld", weil
   das Bild auch hier rechts steht.
   --fan und --par setzt js/main.js, dieselbe Steuerung wie dort. */
.ueber__portraet{
  position:relative;margin:0;justify-self:center;width:min(100%,380px);
  --fan:1;--par:0px;
}
.ueber__portraet::before{
  content:"";position:absolute;inset:0;
  border:1px solid rgba(var(--accent-rgb),.42);border-radius:var(--r-lg);
  transform-origin:50% 100%;
  transform:translate3d(calc(var(--fan) * -26px),calc(var(--fan) * 22px),0)
            rotate(calc(var(--fan) * -1.6deg));
  will-change:transform;
}
.ueber__bild{
  position:relative;aspect-ratio:4/5;border-radius:var(--r-lg);
  background-color:rgba(var(--accent-rgb),.14);
  background-size:cover;background-position:center top;
  transform-origin:50% 100%;
  transform:translate3d(calc(var(--fan) * 13px),var(--par),0)
            rotate(calc(var(--fan) * 0.7deg));
  will-change:transform;
}

/* Auf schmalen Bildschirmen zuerst das Bild, dann der Text. */
@media(max-width:899px){
  .ueber__portraet{order:-1;width:min(100%,320px)}
}

.ueber__head{margin-top:14px;max-width:24ch}
/* Gemessen, nicht in `ch` geraten: bei voller Spaltenbreite standen bis
   zu 97 Zeichen in einer Zeile, mit 68ch immer noch 87. Bei 640px sind
   es rund 75 — die uebliche Obergrenze fuer angenehmes Lesen. */
.ueber p{margin-top:18px;max-width:min(100%,640px);
  color:var(--ink-soft);font-size:16.5px;line-height:1.65}

.ueber__pointe{
  margin-top:34px!important;color:var(--ink)!important;
  font-size:clamp(20px,2.1vw,26px)!important;line-height:1.32!important;
  letter-spacing:-.02em;
}
.ueber__pointe em{
  font-family:var(--font-accent);font-style:italic;font-weight:400;
  color:var(--accent-ink);font-size:1.06em;letter-spacing:-.005em;
}

/* --- Unterschrift --- */
.signatur{margin:clamp(34px,4vw,52px) 0 0}

.signatur__zug{
  width:min(300px,62vw);aspect-ratio:5/2;
  background-image:url('assets/signatur.png');
  background-size:contain;background-repeat:no-repeat;background-position:left center;
  /* Läuft von links nach rechts auf, als würde sie geschrieben. Ohne
     JS und ohne SVG-Pfad — der Ausschnitt wandert einfach mit. */
  clip-path:inset(0 100% 0 0);
  transition:clip-path 1.5s cubic-bezier(.5,0,.25,1) .25s;
}
.signatur.in .signatur__zug{clip-path:inset(0 0 0 0)}

.signatur__name{
  margin-top:10px;color:var(--ink-faint);
  font-size:13px;letter-spacing:.1em;text-transform:uppercase;
}

.ueber__cta{margin-top:clamp(30px,3.4vw,44px)}

@media(prefers-reduced-motion:reduce){
  .signatur__zug{transition:none;clip-path:none}
}

/* Auf schmalen Bildschirmen faechern die Rahmen weiter auf — nur
   knapper. Mit den vollen 26px ragten sie aus ihrer Box und die Seite
   liess sich seitlich verschieben; bei 11px bleibt alles innerhalb der
   Seitenpolsterung. Die Regel greift trotz des inline gesetzten --fan:
   JS setzt nur die Variable, das transform steht hier. */
@media(max-width:899px){
  .akquise__media::before,.gefunden__media::before,.ueber__portraet::before{
    transform:translate3d(calc(var(--fan) * -11px),calc(var(--fan) * 9px),0)
              rotate(calc(var(--fan) * -0.8deg));
  }
  .schritt__media::before{
    transform:translate3d(calc(var(--fan) * 11px),calc(var(--fan) * 9px),0)
              rotate(calc(var(--fan) * 0.8deg));
  }
  .akquise__bild,.gefunden__bild,.ueber__bild{
    transform:translate3d(calc(var(--fan) * 5px),var(--par),0)
              rotate(calc(var(--fan) * 0.35deg));
  }
  .schritt__bild{
    transform:translate3d(calc(var(--fan) * -5px),var(--par),0)
              rotate(calc(var(--fan) * -0.35deg));
  }
}