/* Lotfaden KI (Vorlage) · Landingpage 8 „Inselwelt“
   Zwei neutrale Grundtöne (Papier hell, Nacht dunkel) im Wechsel, genau ein Akzent: Gold #E8C547 (Farben der Vorlage, Schrift-Gold auf hellem Grund #C9A21F).
   Akzent auf Hell nur als Fläche (Knopf, Balken, Unterstreichung), auf Dunkel auch als Schrift.
   Radien: 28 px große Flächen, 16 px mittlere, Knöpfe rund. Schrift: Manrope, ohne Kursive. */

:root{
  /* Farben der Vorlage: Weiß, helles Grau, fast Schwarz, Gold */
  --paper:#FFFFFF;
  --paper-2:#F5F5F4;
  --white:#FFFFFF;
  --ink:#111111;
  --ink-2:#55554F;
  --night:#111111;
  --night-2:#1C1C1B;
  --on-night:#FFFFFF;
  --on-night-2:#CFCFCB;
  --acc:#E8C547;
  --acc-text:#C9A21F;   /* Gold als Schrift auf hellem Grund */
  --on-acc:#111111;
  --line:rgba(17,17,17,.12);
  --line-d:rgba(255,255,255,.14);

  /* Insel-Szene (Effekt 58): Tonmodell, Wasser im Akzent */
  /* Insel oben: Originalfarben des Effekts 58, der Rest der Seite bleibt in Gold */
  --isl-sky-top:#FDE2E4;
  --isl-sky-bot:#E2ECE9;
  --isl-water:#8ECAE6;
  --isl-sun:#FFB703;
  --isl-grass:#90BE6D;
  --isl-acc:#4CC9F0;
  --isl-navy:#1D3557;

  --r-lg:28px;
  --r-md:16px;
  --navh:72px;
  --pad:clamp(20px,5vw,72px);
  --font:"Manrope Variable","Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ease:cubic-bezier(.2,.8,.2,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--paper)}
body{margin:0;font-family:var(--font);color:var(--ink);background:var(--paper);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:clip}
h1,h2,h3,h4,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
em{font-style:normal}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:6px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:fixed;left:16px;top:-80px;z-index:200;background:var(--ink);color:var(--on-night);padding:12px 18px;border-radius:999px;text-decoration:none;font-weight:700;transition:top .2s}
.skip:focus{top:12px}
.wrap{width:100%;max-width:1360px;margin:0 auto;padding:0 var(--pad)}

.h2{font-size: clamp(36px, 4.64vw, 80px);line-height:.98;letter-spacing:-.055em;font-weight:800;text-wrap:balance}
.lead{font-size:clamp(17px,1.4vw,21px);line-height:1.55;color:var(--ink-2);max-width:46ch;text-wrap:pretty}
.eyebrow{font-size:13px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);margin-bottom:22px;display:flex;align-items:center;gap:12px}
.eyebrow::before{content:"";width:28px;height:3px;border-radius:3px;background:var(--acc)}
[data-dark]{background:var(--night);color:var(--on-night)}
[data-dark] .lead{color:var(--on-night-2)}

/* ---------- Knöpfe ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:14px 28px;border-radius:999px;
  font:700 16px/1.2 var(--font);letter-spacing:-.005em;text-decoration:none;white-space:nowrap;cursor:pointer;border:0;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),background-color .3s,color .3s}
.btn i{font-size:18px;transition:transform .45s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn:hover i{transform:translateX(3px)}
.btn--acc{background:var(--acc);color:var(--on-acc);box-shadow:0 18px 40px -20px rgba(232,197,71,.9)}
.btn--acc:hover{box-shadow:0 24px 50px -18px rgba(232,197,71,1)}
.btn--line{color:var(--ink);box-shadow:inset 0 0 0 1.5px rgba(17,17,17,.35);background:rgba(255,255,255,.35)}
.btn--line:hover{box-shadow:inset 0 0 0 1.5px var(--ink);background:rgba(255,255,255,.7)}
.btn--sm{min-height:42px;padding:10px 18px;font-size:14.5px}
.btn--lg{min-height:62px;padding:18px 34px;font-size:17.5px}

/* ---------- Navigation ---------- */
.nav{position:fixed;inset:0 0 auto 0;z-index:100;padding:12px var(--pad) 0;pointer-events:none}
.nav__inner{pointer-events:auto;max-width:1260px;margin:0 auto;height:56px;display:flex;align-items:center;gap:28px;padding:0 7px 0 22px;border-radius:999px;
  background:rgba(255,255,255,.62);box-shadow:inset 0 0 0 1px rgba(17,17,17,.07),0 12px 30px -24px rgba(17,17,17,.5);color:var(--ink);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);transition:background-color .4s,color .4s,box-shadow .4s}
.nav.is-solid .nav__inner{background:rgba(255,255,255,.86)}
.nav.is-dark .nav__inner{background:rgba(23,26,31,.78);color:var(--on-night);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 12px 30px -24px #000}
.brand{font-weight:800;font-size:22px;letter-spacing:-.05em;text-decoration:none;white-space:nowrap}
.brand span{color:var(--acc-text)}
.nav__links{display:flex;gap:28px;margin-left:auto}
.nav__links a{text-decoration:none;font-weight:600;font-size:15px;padding:6px 0;position:relative;opacity:.72;transition:opacity .25s}
.nav__links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;background:var(--acc);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.nav__links a:hover,.nav__links a.is-current{opacity:1}
.nav__links a.is-current::after,.nav__links a:hover::after{transform:scaleX(1)}
.nav__toggle{display:none;margin-left:auto;width:44px;height:44px;border-radius:999px;border:0;background:var(--acc);color:var(--on-acc);font-size:20px;cursor:pointer;align-items:center;justify-content:center}
.nav__panel{pointer-events:auto;max-width:1260px;margin:8px auto 0;padding:14px;border-radius:var(--r-lg);background:rgba(255,255,255,.97);color:var(--ink);
  box-shadow:0 24px 50px -24px rgba(17,17,17,.45);display:flex;flex-direction:column;gap:2px}
.nav__panel[hidden]{display:none}
.nav__panel a:not(.btn){padding:14px 12px;border-radius:12px;text-decoration:none;font-weight:700;font-size:19px}
.nav__panel a:not(.btn):hover{background:var(--paper-2)}
.nav__panel .btn{margin-top:8px}
@media (max-width:900px){
  .nav__links,.nav__cta{display:none}
  .nav__toggle{display:inline-flex}
  .nav__inner{padding:0 6px 0 20px}
}

/* =====================================================================
   EINSTIEG + MITTE · eine Bühne: Insel (58), dann Bild zerfällt (09)
   Ohne JS oder WebGL und bei reduzierter Bewegung: zwei normale Abschnitte.
   ===================================================================== */
.welt{position:relative;background:var(--night)}
.welt__stage{position:relative}
.hero{position:relative;min-height:100vh;min-height:100svh;overflow:clip;isolation:isolate;
  background:linear-gradient(180deg,var(--isl-sky-top) 0%,var(--isl-sky-bot) 100%);display:flex;align-items:flex-end}
.hero__gl{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:-1;cursor:grab;touch-action:pan-y}
.hero__gl.is-drag{cursor:grabbing}
.hero__content{position:relative;width:100%;max-width:1360px;margin:0 auto;padding:140px var(--pad) 72px;will-change:opacity,transform}
.hero__title{font-size: clamp(32px, 6.4vw, 122px);line-height:.92;letter-spacing:-.06em;font-weight:800;max-width:15ch;text-wrap:balance}
.hero__title em{background:linear-gradient(var(--acc),var(--acc)) 0 92%/100% .11em no-repeat;padding-bottom:.02em}
.hero__sub{margin-top:clamp(20px,2.4vw,34px);font-size:clamp(17px,1.4vw,21px);line-height:1.55;color:var(--ink-2);max-width:40ch;text-wrap:pretty}
.hero__ctas{margin-top:clamp(24px,2.8vw,38px);display:flex;flex-wrap:wrap;gap:12px}

.lage{position:relative;background:var(--night);color:var(--on-night);padding:clamp(96px,12vw,170px) var(--pad);display:flex;flex-direction:column;align-items:center;text-align:center;gap:clamp(36px,5vw,64px)}
.lage__pic,.lage__gl,.lage__veil{display:none}
.lage__statement{font-size: clamp(31px, 3.68vw, 64px);line-height:1;letter-spacing:-.05em;font-weight:800;max-width:17ch;text-wrap:balance}
.lage__final{display:flex;flex-direction:column;align-items:center}
.lage__head{font-size: clamp(40px, 5.92vw, 102px);line-height:.95;letter-spacing:-.06em;font-weight:800;max-width:11ch;text-wrap:balance;
  background:linear-gradient(90deg,var(--on-night) 25%,var(--acc) 92%);-webkit-background-clip:text;background-clip:text;color:transparent}
.lage__sub{margin-top:clamp(20px,2.4vw,32px);font-size:clamp(17px,1.4vw,21px);line-height:1.55;color:var(--on-night-2);max-width:50ch;text-wrap:pretty}

/* Lebendige Fassung: 540svh Strecke, eine klebende Bühne, beide Abschnitte übereinander */
.welt.is-live{height:540vh;height:540svh}
.welt.is-live .welt__stage{position:sticky;top:0;height:100vh;height:100svh;overflow:clip;isolation:isolate;background:var(--night)}
.welt.is-live .hero{position:absolute;inset:0;min-height:0;display:block;background:none}
.welt.is-live .hero__content{position:absolute;left:0;right:0;bottom:0;padding:0 var(--pad) clamp(40px,8svh,88px);margin:0 auto}
.welt.is-live .lage{position:absolute;inset:0;padding:0;background:none;display:block;pointer-events:none;z-index:2}
.welt.is-live .lage__pic{display:block;position:absolute;inset:0;visibility:hidden;--a:-30%;--b:-2%;
  -webkit-mask-image:linear-gradient(100deg,transparent var(--a),#000 var(--b));mask-image:linear-gradient(100deg,transparent var(--a),#000 var(--b))}
.welt.is-live .lage__pic canvas{display:block;width:100%;height:100%}
.welt.is-live .lage__gl{display:block;position:absolute;inset:0;width:100%;height:100%}
.welt.is-live .lage__veil{display:block;position:absolute;left:0;right:0;top:0;height:62%;opacity:0;
  background:linear-gradient(180deg,rgba(246,245,242,.96) 0%,rgba(246,245,242,.82) 45%,rgba(246,245,242,0) 100%)}
.welt.is-live .lage__statement{position:absolute;left:0;right:0;top:calc(var(--navh) + clamp(16px,5svh,56px));margin:0 auto;padding:0 var(--pad);max-width:19ch;box-sizing:content-box;
  color:var(--ink);opacity:0;will-change:opacity,transform}
.welt.is-live .lage__final{position:absolute;inset:0;justify-content:center;padding:calc(var(--navh) + 16px) var(--pad) 48px}
.welt.is-live .lage__head,.welt.is-live .lage__sub{opacity:0;will-change:opacity,transform}
@media (min-width:768px){
  .welt.is-live .hero__content{padding-bottom:clamp(48px,9svh,96px)}
  .welt.is-live .hero__content::before{content:"";position:absolute;left:-10vw;right:30%;top:-4%;bottom:0;z-index:-1;pointer-events:none;
    background:radial-gradient(ellipse 70% 75% at 30% 70%,rgba(255,255,255,.9) 0%,rgba(255,255,255,.6) 45%,rgba(255,255,255,0) 75%)}
}
@media (max-width:767px){
  .hero__title{max-width:none;font-size:12vw}
  .hero__ctas .btn{flex:1 1 auto}
  .welt.is-live .hero__content::before{content:"";position:absolute;inset:-56px 0 0;z-index:-1;pointer-events:none;
    background:linear-gradient(to top,rgba(236,234,230,.97) 58%,rgba(236,234,230,0))}
}

/* =====================================================================
   LEISTUNGEN: 3D-Karussell (aus LP 7, Farben der Vorlage)
   Ohne JS oder bei reduzierter Bewegung: einfaches Raster aus neun Karten (vier Leistungen, vier Schulungsformate, Ansprechpartner).
   ===================================================================== */
.services{position:relative;padding:clamp(100px,13vw,200px) 0 clamp(80px,10vw,150px);background:var(--paper)}
.lk__stage{position:relative;padding:0 var(--pad)}
.lk__head{max-width:1360px;margin:0 auto clamp(40px,6vw,72px)}
.lk__title{max-width:14ch}
.lk__lead{margin-top:18px}
.lk__index{display:none;list-style:none}
.lk__ring{max-width:1360px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;list-style:none}
.lkc{position:relative;font-size:16px}
.lkc__face{position:relative;height:100%;background:var(--white);border-radius:var(--r-lg);overflow:hidden;
  box-shadow:inset 0 0 0 1px var(--line),0 2.2em 3.4em -1.8em rgba(17,17,17,.35)}
.lkc__back{display:none}
/* Kartenfarben aus der Insel-Palette: je Karte Band, Linie und Schrift-Ton */
.c-gold{--c-a:#FAF0CC;--c-b:#FFFCF2;--c-line:rgba(232,197,71,.6);--c-ink:#B8901A;--c-kick:#846508}
.c-blau{--c-a:#D6ECF6;--c-b:#F1F8FC;--c-line:rgba(142,202,230,.7);--c-ink:#1E7CA6;--c-kick:#17698E}
.c-gruen{--c-a:#DCEFCB;--c-b:#F3FAEC;--c-line:rgba(144,190,109,.7);--c-ink:#4C8A2B;--c-kick:#3D7022}
.c-koralle{--c-a:#F9DBD1;--c-b:#FDF3EF;--c-line:rgba(224,122,95,.55);--c-ink:#B6503A;--c-kick:#9E4230}
.c-navy{--c-a:#DCE3F0;--c-b:#F2F5FA;--c-line:rgba(29,53,87,.35);--c-ink:#1D3557}
.lkc__band{position:relative;height:6.6em;padding:1em 1.2em;display:flex;justify-content:space-between;align-items:flex-start;
  background:linear-gradient(160deg,var(--c-a,#FAF0CC) 0%,var(--c-b,#FFFCF2) 100%);border-bottom:1px solid var(--c-line,rgba(232,197,71,.55))}
/* Kicker etwas dunkler als die Kartenfarbe: Kontrast mindestens 4,5 : 1 auf dem hellen Band */
.lkc__kicker{font-size:.72em;letter-spacing:.16em;text-transform:uppercase;color:var(--c-kick,var(--c-ink,var(--acc-text)));font-weight:800}
/* Schulungskarten: unter dem Kicker die Dauer, gut lesbar, ohne Großbuchstaben */
.lkc__dauer{display:block;margin-top:.55em;font-size:1.5em;line-height:1.1;letter-spacing:-.01em;text-transform:none;font-weight:800;color:var(--ink)}
.lkc__glyph{font-size:2.8em;line-height:1;color:var(--c-ink,var(--acc-text))}
.lkc__body{padding:1.2em 1.2em 1.3em}
.lkc h3{font-size:1.5em;line-height:1.08;letter-spacing:-.035em;font-weight:800;color:var(--ink)}
.lkc p{margin-top:.6em;font-size:.95em;line-height:1.5;color:var(--ink-2)}
.lkc__chips{display:flex;flex-wrap:wrap;gap:.4em;margin-top:.95em;list-style:none}
.lkc__chips li{font-size:.68em;font-weight:700;letter-spacing:.04em;padding:.45em .75em;border-radius:999px;background:var(--paper-2);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink-2)}
.lk__bar,.lk__floor{display:none}

.services.is-3d{padding:0}
/* Neun Stufen: je Karte rund 80 svh Scrollweg, vorne Ruhe, gedreht wird im mittleren Teil */
.services.is-3d .lk__track{position:relative;height:740vh;height:740svh}
.services.is-3d .lk__stage{--rx:64%;position:sticky;top:0;height:100vh;height:100svh;min-height:560px;padding:0;overflow:hidden;isolation:isolate;
  background:radial-gradient(55% 45% at var(--rx) 30%,rgba(255,255,255,1) 0%,transparent 70%),linear-gradient(180deg,var(--white) 0%,var(--paper-2) 58%,#EEEEEC 100%)}
.services.is-3d .lk__head{position:absolute;z-index:4;left:max(var(--pad),calc((100% - 1360px) / 2 + var(--pad)));top:clamp(96px,15svh,150px);width:min(400px,31vw);margin:0}
.services.is-3d .lk__title{font-size:clamp(30px,2.7vw,46px);max-width:none}
.services.is-3d .lk__lead{font-size:16px;line-height:1.5;max-width:34ch;margin-top:14px}
.services.is-3d .lk__index{display:grid;gap:0;margin-top:24px}
.lk__index li{position:relative;padding:5px 0 5px 24px;font-size:15px;font-weight:700;letter-spacing:-.01em;color:var(--ink-2);transition:color .4s ease}
.lk__index li::before{content:"";position:absolute;left:0;top:50%;width:12px;height:2px;border-radius:2px;background:var(--line);transform-origin:left;
  transition:transform .5s var(--ease),background-color .4s}
.lk__index li.is-on{color:var(--ink)}
.lk__index li.is-on::before{background:var(--c-ink,var(--acc));transform:scaleX(1.5)}
/* Gruppen in der Liste: dezente Überschrift, kein Strich davor */
.lk__index .lk__grp{padding:0 0 4px;font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);opacity:.7}
.lk__index .lk__grp::before{display:none}
.lk__index li:not(.lk__grp) + .lk__grp,.lk__index .lk__solo{margin-top:14px}
.services.is-3d .lk__floor{display:block;position:absolute;left:var(--rx);width:min(1300px,150vw);height:240px;transform:translate(-50%,-50%);z-index:0;pointer-events:none;
  background:radial-gradient(closest-side,rgba(17,17,17,.16),rgba(17,17,17,.05) 55%,transparent)}
.services.is-3d .lk__scene{position:absolute;inset:0;perspective:1400px;z-index:1}
.services.is-3d .lk__rig{position:absolute;left:var(--rx);top:50%;width:0;height:0;transform-style:preserve-3d}
.services.is-3d .lk__ring,.lk__mirror{position:absolute;left:0;top:0;width:0;height:0;margin:0;display:block;transform-style:preserve-3d;list-style:none}
.services.is-3d .lkc{position:absolute;left:0;top:0;width:var(--cw,300px);height:var(--ch,390px);
  margin:calc(var(--ch,390px) / -2) 0 0 calc(var(--cw,300px) / -2);transform-style:preserve-3d;font-size:var(--cfs,calc(var(--cw,300px) / 18.5))}
/* Inhalt unter dem Farbband senkrecht mittig, gleich viel Luft oben und unten (Ring und Handy-Bogen);
   im vollen Ring (ab 768 px) zusätzlich ein höheres Farbband */
.services.is-3d .lkc__front{display:flex;flex-direction:column}
.services.is-3d .lkc__band{flex:none}
.services.is-ring .lkc__band{height:7.4em}
.services.is-3d .lkc__body{flex:1;display:flex;flex-direction:column;justify-content:center;padding:1.2em}
.services.is-3d .lkc__chips{align-self:stretch}
.services.is-ring .lk__mirror .lkc__face{-webkit-mask-image:linear-gradient(to top,rgba(0,0,0,.18),rgba(0,0,0,0) 38%);mask-image:linear-gradient(to top,rgba(0,0,0,.18),rgba(0,0,0,0) 38%)}
.services.is-3d .lkc__face{position:absolute;inset:0;height:auto;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.services.is-3d .lkc__face::after{content:"";position:absolute;inset:0;background:var(--paper-2);opacity:var(--dim,0);pointer-events:none;border-radius:inherit}
.services.is-3d .lkc__back{display:grid;place-items:center;transform:rotateY(180deg);background:linear-gradient(160deg,var(--c-b,#F5F5F4),var(--c-a,#E9E9E6))}
.services.is-3d .lkc__back i{font-size:5.5em;color:var(--c-ink,#C9A21F);opacity:.3}
.lk__mirror .lkc__face{-webkit-mask-image:linear-gradient(to top,rgba(0,0,0,.18),rgba(0,0,0,0) 50%);mask-image:linear-gradient(to top,rgba(0,0,0,.18),rgba(0,0,0,0) 50%);box-shadow:none}
.services.is-3d .lk__bar{display:block;position:absolute;left:max(var(--pad),calc((100% - 1360px) / 2 + var(--pad)));right:max(var(--pad),calc((100% - 1360px) / 2 + var(--pad)));bottom:22px;height:2px;border-radius:2px;z-index:4;background:var(--line);pointer-events:none}
.lk__bar i{display:block;height:100%;border-radius:inherit;background:var(--acc);transform-origin:left;transform:scaleX(0)}
/* Niedrige Bildschirme: Liste mit neun Einträgen rückt enger, die Unterzeile entfällt, damit nichts auf den Fortschrittsbalken rutscht */
@media (min-width:768px) and (max-height:760px){
  .services.is-3d .lk__head{top:92px}
  .services.is-3d .lk__lead{display:none}
  .lk__index li{padding-top:3px;padding-bottom:3px}
}
@media (max-width:767px){
  .services.is-3d .lk__head{top:88px;right:var(--pad);width:auto}
  .services.is-3d .lk__lead{display:none}
  .services.is-3d .lk__index{display:none}
  .services.is-3d .lk__stage{--rx:50%}
}

/* =====================================================================
   BEISPIELE · dunkel, Raster mit ungleichen Kacheln
   ===================================================================== */
.examples{padding:clamp(100px,12vw,190px) 0}
.examples__head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:40px;align-items:end;margin-bottom:clamp(40px,5vw,72px)}
.bento{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
.ex{background:var(--night-2);border-radius:var(--r-lg);padding:clamp(24px,2.6vw,38px);box-shadow:inset 0 0 0 1px var(--line-d);
  display:flex;flex-direction:column;gap:12px;grid-column:span 2;min-height:260px;transition:box-shadow .4s}
.ex:hover{box-shadow:inset 0 0 0 1px rgba(232,197,71,.55)}
.ex--wide{grid-column:span 4}
.ex--tall{grid-column:span 2;grid-row:span 2}
.ex--strip{grid-column:span 6;min-height:0;display:grid;grid-template-columns:minmax(0,3fr) minmax(0,4fr) minmax(0,5fr);align-items:center;gap:12px 32px}
.ex--strip .ex__name{margin-top:0}
.ex__top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.ex__top i{font-size:30px;color:var(--acc)}
.ex__tag{font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--on-night-2);padding:6px 11px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line-d)}
.ex__name{font-size: clamp(22px, 1.84vw, 29px);line-height:1.05;letter-spacing:-.04em;font-weight:800;margin-top:auto}
.ex__text{color:var(--on-night-2);max-width:42ch}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.chips li{padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px var(--line-d);font-size:14.5px;font-weight:600}
.flow{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.flow li{display:flex;align-items:center;gap:12px;padding:13px 16px;border-radius:var(--r-md);background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px var(--line-d);font-weight:700;font-size:15px}
.flow i{font-size:20px;color:var(--acc)}

/* =====================================================================
   SCHULUNGEN · hell, dunkle Formatkarten fahren seitwärts
   ===================================================================== */
.training{padding-top:clamp(100px,12vw,190px);background:var(--paper)}
.training__head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:clamp(32px,5vw,80px);align-items:end}
.training__head .eyebrow{grid-column:1 / -1}
.training__title{max-width:13ch}
.rail-wrap{position:relative;margin-top:clamp(48px,6vw,90px);padding-bottom:clamp(72px,9vw,130px)}
.rail-top{display:flex;align-items:baseline;justify-content:space-between;gap:24px;margin-bottom:26px}
.rail-top__title{font-size:22px;font-weight:800;letter-spacing:-.03em}
.rail-marks{display:flex;gap:24px;font-size:14.5px;font-weight:700}
.rail-marks li{opacity:.4;transition:opacity .3s}
.rail-marks li.is-on{opacity:1}
.rail{display:flex;flex-direction:column;gap:16px;padding:0 var(--pad);max-width:1360px;margin:0 auto}
.fmt{background:var(--night);color:var(--on-night);border-radius:var(--r-lg);padding:clamp(26px,3.2vw,48px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,3vw,48px);align-items:stretch}
.fmt__body{display:flex;flex-direction:column;gap:14px}
.fmt__meta{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:15px;color:var(--acc)}
.fmt__name{font-size: clamp(29px, 3.04vw, 51px);line-height:1;letter-spacing:-.05em;font-weight:800;margin-top:auto}
.fmt__text{font-size:clamp(17px,1.35vw,20px);color:var(--on-night-2);max-width:30ch}
.fmt__time{display:flex;flex-direction:column;justify-content:flex-end;gap:18px}
.fmt__big{font-size:clamp(96px,13vw,230px);line-height:.8;letter-spacing:-.07em;font-weight:800;color:var(--acc);display:flex;align-items:baseline;gap:.08em}
.fmt__big small{font-size:.2em;letter-spacing:-.02em;color:var(--on-night)}
.fmt__big--word{font-size:clamp(56px,7vw,124px);letter-spacing:-.06em}
.fmt__day{position:relative;height:10px;border-radius:999px;background:rgba(255,255,255,.1);overflow:hidden}
.fmt__day i{position:absolute;left:0;top:0;bottom:0;width:calc(var(--to) * 100%);border-radius:999px;background:var(--acc)}
.fmt__weeks{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.fmt__weeks i{height:10px;border-radius:999px;background:var(--acc)}
.fmt__weeks i:nth-child(even){opacity:.45}
.rail-progress{display:none;position:relative}
.rail-progress::before{content:"";position:absolute;left:var(--pad);right:var(--pad);top:0;height:3px;border-radius:3px;background:var(--line)}
.rail-progress span{position:relative;display:block;height:3px;border-radius:3px;background:var(--ink);transform-origin:left;transform:scaleX(0)}

/* Computer mit Bewegung (Klasse .is-d aus main.js): Bühne klebt, die Karten wandern schräg nach links oben.
   Die Spur ist 12 Grad gegen die Senkrechte geneigt; jede Karte steht ein Stück weiter rechts als die vorige
   und bleibt selbst waagrecht. Handy und reduzierte Bewegung: Karten normal untereinander. */
.rail-wrap.is-d{padding-bottom:0;--fmt-w:clamp(340px,40vw,600px)}
.rail-wrap.is-d .rail-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:clip;padding-top:var(--navh)}
.rail-wrap.is-d .rail-top{position:relative;z-index:2;padding-top:12px}
.rail-wrap.is-d .rail-top::before{content:"";position:absolute;z-index:-1;left:-50vw;right:-50vw;top:-200px;bottom:-40px;pointer-events:none;
  background:linear-gradient(180deg,var(--paper) calc(100% - 40px),rgba(255,255,255,0))}
.rail-wrap.is-d .rail{position:absolute;z-index:1;top:0;left:calc(50% - var(--fmt-w) / 2);width:var(--fmt-w);max-width:none;margin:0;padding:0;gap:24px;will-change:transform}
.rail-wrap.is-d .fmt{width:var(--fmt-w);height:clamp(360px,56svh,540px)} /* Kartengröße wie die Leistungskarten von Entwurf 1 */
.rail-wrap.is-d .fmt__big{font-size:clamp(72px,9vw,120px)}
.rail-wrap.is-d .fmt__big--word{font-size:clamp(40px,4.6vw,60px)}
.rail-wrap.is-d .fmt__name{font-size:clamp(26px,2.6vw,40px)}
@media (max-width:900px){.rail-wrap.is-d .fmt__big{font-size:72px}.rail-wrap.is-d .fmt__big--word{font-size:40px}}
.rail-wrap.is-d .rail-progress{display:block;position:absolute;z-index:2;left:0;right:0;bottom:28px}
@media (max-width:767px){
  .rail-marks{display:none}
  .fmt{grid-template-columns:1fr}
  .rail{padding:0 16px}
  .fmt__big{font-size:96px}
  .fmt__big--word{font-size:60px}
  .fmt{min-width:0}
}

/* =====================================================================
   VORGEHEN · dunkel, klebender Kartenstapel
   ===================================================================== */
.process{padding:clamp(100px,12vw,190px) 0 clamp(90px,10vw,150px)}
.process__grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(36px,5vw,80px);align-items:start}
.process__head{position:sticky;top:120px;min-width:0;container-type:inline-size;display:flex;flex-direction:column;gap:24px;align-items:flex-start}
.process__head .h2{font-size:min(clamp(2rem,1.2rem + 2.6vw,3.4rem),12cqi)} /* Größen wie Entwurf 1 */
.steps{display:flex;flex-direction:column;gap:18px}
.step__card{position:relative;overflow:hidden;border-radius:var(--r-lg);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(20px,2.4vw,36px);
  padding:clamp(1.5rem,3vw,2.75rem);min-height:clamp(260px,40vh,380px);transform-origin:50% 0;will-change:transform;background:var(--night-2);
  box-shadow:inset 0 0 0 1px var(--line-d),0 -30px 60px -40px #000}
.step__body{min-width:0;container-type:inline-size;display:flex;flex-direction:column;gap:14px;padding:clamp(6px,1.2vw,16px)}
.step__meta{font-weight:700;font-size:16px;color:var(--acc)}
.step__name{font-size:min(clamp(2.1rem,1.3rem + 3.2vw,4.4rem),15cqi);overflow-wrap:break-word;hyphens:auto;line-height:.95;letter-spacing:-.055em;font-weight:800}
.step__text{margin-top:auto;font-size:clamp(1.05rem,1rem + .35vw,1.25rem);color:var(--on-night-2);max-width:30ch}
.step__media{border-radius:var(--r-md);overflow:hidden;min-height:240px;background:#000}
.step__media img{width:100%;height:100%;object-fit:cover}
.step__shade{position:absolute;inset:0;background:#000;opacity:0;pointer-events:none;border-radius:inherit}
.stack-on .step{position:sticky;top:calc(108px + var(--i) * 14px)}
.stack-on .steps{gap:14svh}

/* =====================================================================
   ÜBER UNS · hell
   ===================================================================== */
.about{padding:clamp(100px,12vw,190px) 0 clamp(80px,9vw,140px);background:var(--paper)}
/* Querformat-Foto über die volle Breite, darunter Text links und Grundsätze rechts */
.about__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(40px,5vw,80px);align-items:start}
.about__photo{position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:2/1;background:var(--paper-2)}
.about__photo img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.about__body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:clamp(36px,6vw,110px);align-items:start}
.about__body > .h2,.about__body > .lead{grid-column:1}
.about__body > .values{grid-column:2;grid-row:1 / span 2;margin-top:0}
.about__photo figcaption{position:absolute;left:16px;bottom:16px;background:var(--paper);color:var(--ink);padding:9px 15px;border-radius:999px;font-size:14px;font-weight:700}
.about .h2{font-size:clamp(2rem,1.2rem + 3.4vw,4rem)} /* Größen wie Entwurf 1 */
.about__body .lead{margin-top:1.5rem;font-size:clamp(1.1rem,1rem + .45vw,1.35rem);max-width:46ch}
.values{margin-top:clamp(2.5rem,5vw,4rem);border-top:1.5px solid var(--ink)}
.values li{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:10px 1.5rem;padding:1.5rem 0;border-bottom:1px solid var(--line)}
.values h3{font-size:clamp(1.1rem,1rem + .3vw,1.3rem);line-height:1.25;letter-spacing:-.015em;font-weight:800}
.values p{color:var(--ink-2);font-size:clamp(1rem,.95rem + .2vw,1.0625rem);line-height:1.55}

/* =====================================================================
   FAQ · hell
   ===================================================================== */
.faq{padding:clamp(60px,8vw,120px) 0 clamp(100px,12vw,180px);background:var(--paper)}
.faq__inner{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,90px);align-items:start}
.faq__title{position:sticky;top:120px}
.faq__item{border-bottom:1px solid var(--line)}
.faq__item:first-child{border-top:1.5px solid var(--ink)}
.faq__item summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:28px 0;
  font-size: clamp(18px, 1.44vw, 21px);font-weight:800;letter-spacing:-.03em}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary i{flex:none;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;box-shadow:inset 0 0 0 1.5px var(--ink);font-size:18px;transition:transform .4s var(--ease),background-color .3s,box-shadow .3s}
.faq__item[open] summary i{transform:rotate(45deg);background:var(--acc);box-shadow:none}
.faq__item p{padding:0 60px 28px 0;color:var(--ink-2);max-width:56ch}

/* =====================================================================
   SCHLUSS · Punkte-Globus (Effekt 42), dunkel
   ===================================================================== */
.finale{position:relative;min-height:100vh;min-height:100svh;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:center;overflow:clip;isolation:isolate}
.finale__gl,.finale__fx{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.finale__gl{z-index:-2}
.finale__fx{z-index:-1}
.finale__copy{position:relative;z-index:1;padding:130px 0 110px max(var(--pad),calc((100vw - 1360px) / 2 + var(--pad)))}
.finale__title{font-size: clamp(41px, 5.12vw, 90px);line-height:.92;letter-spacing:-.06em;font-weight:800;max-width:9ch;text-wrap:balance}
.finale__title em{color:var(--acc)}
.finale__sub{margin-top:28px;font-size:clamp(17px,1.45vw,21px);line-height:1.5;color:var(--on-night-2);max-width:34ch}
.finale__cta{margin-top:38px}
.finale__note{margin-top:30px;display:flex;align-items:center;gap:10px;font-size:15px;font-weight:600;color:var(--on-night-2)}
.finale__note i{font-size:22px;color:var(--acc)}
.finale__globe{position:relative;height:100vh;height:100svh;pointer-events:none}
.finale.no-gl .finale__globe{background:radial-gradient(closest-side,rgba(232,197,71,.18),rgba(232,197,71,.05) 70%,transparent 72%) center/min(80%,560px) no-repeat}
@media (max-width:899px){
  .finale{grid-template-columns:minmax(0,1fr);align-items:start;align-content:start}
  .finale__globe{order:-1;height:min(54svh,100vw);margin-top:var(--navh)}
  .finale__copy{padding:0 16px 72px;max-width:none}
  .finale__title{max-width:10ch}
}

/* =====================================================================
   FUSS · dunkel, setzt den Schluss fort
   ===================================================================== */
.site-footer{background:var(--night);color:var(--on-night);border-top:1px solid var(--line-d)}
.footer__inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 32px;padding-top:30px;padding-bottom:18px}
.footer__line,.footer__links{font-size:15px;color:var(--on-night-2)}
.footer__line a,.footer__links a{color:var(--on-night);text-underline-offset:3px}
.brand--small{font-size:17px;color:var(--on-night)}
.fuss-zeile{width:100%;max-width:none;margin:0;padding:8px 16px 26px;text-align:center;font-size:12.5px;color:var(--on-night-2)}
.fuss-zeile a{color:inherit}

/* =====================================================================
   Kleine Bildschirme
   ===================================================================== */
@media (max-width:900px){
  .services__head,.process__grid,.about__grid,.faq__inner,.examples__head,.training__head{grid-template-columns:minmax(0,1fr)}
  .services__head{gap:20px}
  .training__head .lead{margin-top:22px}
  .process__head,.faq__title{position:relative;top:auto}
  .bento{grid-template-columns:minmax(0,1fr)}
  .ex,.ex--wide,.ex--tall,.ex--strip{grid-column:auto;grid-row:auto;min-height:0}
  .ex--strip{display:flex;align-items:stretch}
  .ex__name{margin-top:10px}
  .about__photo{aspect-ratio:1672/941}
  .about__photo figcaption{left:10px;bottom:10px;padding:6px 11px;font-size:12.5px}
  .about__body{grid-template-columns:minmax(0,1fr);grid-template-rows:none}
  .about__body > .values{grid-column:auto;grid-row:auto;margin-top:clamp(2.5rem,5vw,4rem)}
  .values li{grid-template-columns:1fr}
}
@media (max-width:767px){
  .step__card{grid-template-columns:minmax(0,1fr)}
  .step__media{aspect-ratio:4/3;min-height:0}
  .faq__item p{padding-right:0}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
}