/* ============================================================
   Komponenten-Layout (Stand Mockup v0.26) — Struktur:
   .start (Landing) > .ltop / .top / .tiles > .tile > .content (Sektions-Seite)
   + .house (Formel/Referenzen) + .lfoot + .menu (Overlay)
   ============================================================ */

/* --- Landing / Chooser --- */
/* Landing-Glow: DREI Sparten-Glows (Banner-Technik) — gelb links, blau mitte, gruen rechts */
.start{position:relative;min-height:100vh;display:flex;flex-direction:column;overflow:hidden;
  background:
    radial-gradient(30% 48% at 12% -8%, color-mix(in srgb, var(--yellow) 34%, transparent) 0%, transparent 62%),
    radial-gradient(30% 48% at 50% -10%, color-mix(in srgb, var(--blue) 40%, transparent) 0%, transparent 62%),
    radial-gradient(30% 48% at 88% -8%, color-mix(in srgb, var(--green) 36%, transparent) 0%, transparent 62%),
    var(--ink)}
/* Subpage (expanded): Landing-Glow oben raus — kein „Glow-Balken", Header bleibt ruhig/stabil */
.start.expanded{background:var(--ink)}
.ltop{position:relative;z-index:3;display:flex;justify-content:space-between;align-items:center;padding:14px 4% 0}
.start.expanded .ltop{display:none}
.top{position:relative;z-index:2;padding:24px 40px 16px;display:flex;flex-direction:column;align-items:center;text-align:center;max-height:280px;overflow:hidden}
.start.expanded .top{opacity:0;max-height:0;padding-top:0;padding-bottom:0}
.master{display:flex;flex-direction:column;align-items:center;gap:9px;margin-bottom:16px}
.master img{height:50px}
.master .mband{width:150px;height:6px;border-radius:3px;background:var(--band)}
.top h1{font:700 clamp(1.9rem,4.2vw,3.1rem)/1.03 var(--disp);letter-spacing:-.015em;max-width:20ch}
.top .sub{margin-top:10px;font:400 clamp(.95rem,1.2vw,1.1rem)/1.5 var(--body);color:#d7dadd;max-width:58ch}

/* --- 3 Diagonal-Kacheln --- */
.tiles{position:relative;z-index:1;flex:1;display:flex;min-height:380px;margin:30px 0 34px}
.tile{position:relative;flex:1 1 0;min-width:0;clip-path:var(--clip);cursor:pointer}
.tile+.tile{margin-left:-60px}
.t1{--clip:polygon(0 0,100% 0,calc(100% - 60px) 100%,0 100%);background:var(--yellow)}
.t2{--clip:polygon(60px 0,100% 0,calc(100% - 60px) 100%,0 100%);background:var(--blue)}
.t3{--clip:polygon(60px 0,100% 0,100% 100%,0 100%);background:var(--green)}
.fw{position:absolute;inset:8px;clip-path:var(--clip);overflow:hidden;z-index:0;background:#0a0a0a}
.fw .photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.8) contrast(1.04);z-index:0}
.fw .scrim{position:absolute;inset:0;z-index:1;background:radial-gradient(52% 44% at 50% 52%, rgba(0,0,0,.34) 0%, transparent 72%),linear-gradient(180deg,rgba(0,0,0,.30) 0%,rgba(0,0,0,.10) 40%,rgba(0,0,0,.72) 100%)}
.label{position:absolute;top:24px;left:0;right:0;z-index:3;text-align:center;font:700 .88rem var(--body);letter-spacing:.2em;text-transform:uppercase}
.t1 .label{color:var(--yellow)}.t2 .label{color:var(--blue)}.t3 .label{color:var(--green)}
.brand{position:absolute;left:0;right:0;top:44%;transform:translateY(-50%);z-index:3;text-align:center}
.brand img{height:104px}
.tagline{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:26px 30px 30px;text-align:center;font:700 1.02rem/1.35 var(--disp);color:#fff}
.t1 .tagline b{color:var(--yellow)}.t2 .tagline b{color:var(--blue)}.t3 .tagline b{color:var(--green)}

/* --- Expanded-State (Endzustand GANZFLÄCHIG — Animation: animations.css) --- */
.start.expanded .tiles{min-height:100vh}
.start.expanded .tile+.tile{margin-left:0}
.start.expanded .tile.active{flex-grow:999;z-index:6}
.start.expanded .tile.active .fw{inset:0}
.start.expanded .tile:not(.active){pointer-events:none}
.start.expanded .tile.active .label,.start.expanded .tile.active .brand,.start.expanded .tile.active .tagline{opacity:0}

/* --- Sektions-Header (SoMe links · Sprache/Übersicht/Menü rechts) --- */
.shead{position:absolute;top:0;left:0;right:0;z-index:9;display:flex;align-items:center;justify-content:space-between;padding:14px 4%;opacity:0;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.65),transparent)}
.tile.active .shead{opacity:1;pointer-events:auto}
.shl{display:flex;gap:16px;align-items:center}
.shl .slogo{height:44px}
.shl .slogo.round{height:48px;width:48px}
.soc{display:flex;gap:8px}
.soc a{width:36px;height:36px;border:1.5px solid rgba(255,255,255,.4);border-radius:50%;display:flex;align-items:center;justify-content:center;font:700 .72rem var(--body);color:#fff;cursor:pointer;text-decoration:none}
.soc a svg{width:19px;height:19px;display:block}
.shr{display:flex;gap:10px;align-items:center}
.lang{font:700 .85rem var(--body);color:rgba(255,255,255,.65)}
.lang b{color:#fff}
.swbtn{display:flex;align-items:center;gap:8px;background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.3);color:#fff;font:700 .78rem var(--body);padding:8px 14px;border-radius:999px;cursor:pointer}
.swbtn .swsvg{width:26px;height:18px;display:block}
.menubtn{background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.3);color:#fff;font:700 .82rem var(--body);padding:9px 15px;border-radius:999px;cursor:pointer}

/* --- Sektions-Seite (volle Single Page in der Kachel) --- */
.content{position:absolute;inset:0;z-index:4;background:var(--ink);color:#fff;opacity:0;pointer-events:none;overflow-y:auto}
.tile.active .content{opacity:1;pointer-events:auto}
.shero{position:relative;min-height:max(56vh,400px);display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden;padding:84px 0 44px;box-sizing:border-box}
.shero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.42);z-index:0}
.sheroscrim{position:absolute;inset:0;z-index:1;background:radial-gradient(80% 90% at 50% 55%,rgba(0,0,0,.35),rgba(0,0,0,.72))}
.sheroin{position:relative;z-index:2;padding:0 24px}
.sheroin .clogo{height:92px;margin-bottom:22px}
.sheroin .clogo.fxlogo{height:249px;margin-bottom:42px}
.content[data-sec="c"] .sheroin .clogo.fxlogo{height:215px;margin-top:11px;margin-bottom:58px}
.content[data-sec="d"] .sheroin .clogo.fxlogo{height:330px;margin-top:-37px;margin-bottom:9px}
@media(max-width:720px){.sheroin .clogo.fxlogo{height:160px;margin-bottom:30px}.content[data-sec="c"] .sheroin .clogo.fxlogo{height:138px;margin-top:7px;margin-bottom:38px}.content[data-sec="d"] .sheroin .clogo.fxlogo{height:212px;margin-top:-24px;margin-bottom:18px}}
.shero h1,.shero .sh1{font:700 clamp(2rem,4vw,3.2rem)/1.08 var(--disp);letter-spacing:-.01em;color:#fff}
.shero .chip{margin-top:20px;font:700 .98rem var(--body);letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.75)}
.content[data-sec="c"] .shero .chip{color:var(--yellow)}
.content[data-sec="d"] .shero .chip{color:var(--blue)}
.content[data-sec="e"] .shero .chip{color:var(--green)}

/* Farbflächen-Dramaturgie: dunkel / weiß / Divisionsfarbe */
.sblock{padding:76px 5%;background:var(--ink);color:#fff}
.sblock.white{background:#fff;color:var(--ink-soft)}
.sblock.ybg{background:var(--yellow);color:var(--ink-soft)}
.sblock.bbg{background:var(--blue);color:#fff}
.sblock.gbg{background:var(--green);color:var(--ink-soft)}
.win{max-width:1180px;margin:0 auto}
.win.two{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:start}
.win.two.rev{grid-template-columns:.95fr 1.05fr}
.win.two.rev .wtxt{order:2} .win.two.rev .media{order:1}
/* Layout-Typ B: zentrierter Kopf, Breite = Inhalt/Grid darunter (kein Sonder-Einzug) */
.whead{text-align:center;max-width:none;margin:0 auto 32px}
.whead p{margin-left:auto;margin-right:auto;max-width:780px}
.sblock h2{font:700 clamp(1.5rem,2.6vw,2.1rem)/1.15 var(--disp);margin-bottom:16px}
.sblock p{font:400 1.06rem/1.65 var(--body);max-width:58ch;opacity:.92}
.sblock p b{opacity:1}
.wtxt p+p,.oscard p+p{margin-top:12px}
p.ctr{text-align:center;margin:26px auto 0} p.big{font-size:1.2rem}

/* Media-Slots (Fotos/Diagramme) */
.media{position:relative;border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,.16);min-height:320px;background:#0a0a0a;display:flex;align-items:center;justify-content:center}
.sblock.white .media,.sblock.ybg .media,.sblock.gbg .media{border-color:rgba(0,0,0,.15);background:#f4f5f5}
.media>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.media.empty{background:repeating-linear-gradient(45deg,#121316,#121316 14px,#1a1b1f 14px,#1a1b1f 28px)}
.sblock.white .media.empty{background:repeating-linear-gradient(45deg,#eceeef,#eceeef 14px,#f4f5f5 14px,#f4f5f5 28px)}
.media .mph{font-size:3rem;color:rgba(127,127,127,.4)}
.media .mcap{position:absolute;bottom:10px;left:0;right:0;text-align:center;font:700 .62rem var(--body);letter-spacing:.1em;text-transform:uppercase;color:rgba(127,127,127,.85);z-index:2}
.media.icmedia{background:#101010}
.media.icmedia.light{background:#f4f5f5}
.media .bigic{position:relative;width:56%;max-width:300px;height:auto;object-fit:contain;z-index:1}
.media .bigsvg{position:relative;width:92%;height:auto;z-index:1;padding:12px 0 22px}

/* Icon-Grids */
.igrid{display:grid;gap:16px}
.igrid.i1{grid-template-columns:1fr}
.igrid.i4{grid-template-columns:repeat(4,1fr)} .igrid.i3{grid-template-columns:repeat(3,1fr)} .igrid.i2{grid-template-columns:repeat(2,1fr)}
.igrid.left .ic{text-align:left;align-items:flex-start}
/* KACHEL-FARB-REGEL (Karsten 2026-07-10): Kacheln nie in Hintergrundfarbe —
   Sparten-Farbe auf Schwarz · WEISS auf Sparten-Farbfeld · gray-05 auf Weiss */
.ic{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;border-radius:14px;padding:18px 16px}
.content[data-sec="c"] .sblock:not(.white):not(.ybg) .ic{background:var(--yellow);color:var(--ink-soft)}
.content[data-sec="d"] .sblock:not(.white):not(.bbg) .ic{background:var(--blue);color:#fff}
.content[data-sec="e"] .sblock:not(.white):not(.gbg) .ic{background:var(--green);color:var(--ink-soft)}
/* Sparten-Glow auf dunklen Sektionen (Banner-Technik, dezent) */
.content[data-sec="c"] .sblock:not(.white):not(.ybg){background:radial-gradient(44% 60% at 94% -10%, color-mix(in srgb, var(--yellow) 32%, transparent) 0%, transparent 64%), var(--ink)}
.content[data-sec="d"] .sblock:not(.white):not(.bbg){background:radial-gradient(44% 60% at 94% -10%, color-mix(in srgb, var(--blue) 38%, transparent) 0%, transparent 64%), var(--ink)}
.content[data-sec="e"] .sblock:not(.white):not(.gbg){background:radial-gradient(44% 60% at 94% -10%, color-mix(in srgb, var(--green) 32%, transparent) 0%, transparent 64%), var(--ink)}
.sblock.ybg .ic,.sblock.bbg .ic,.sblock.gbg .ic{background:#fff;color:var(--ink-soft)}
.sblock.white .ic{background:#f4f5f5;color:var(--ink-soft);border:1px solid rgba(0,0,0,.08)}
.ic a{color:inherit;text-decoration:none;font-weight:700}
.ic a:hover{text-decoration:underline}
.ic img{width:88px;height:88px;object-fit:contain}
.ic img.pimg{width:132px;height:132px;object-fit:cover;border-radius:12px}
.ict{font:700 1rem/1.3 var(--disp)}
.icrole{font:600 .82rem/1.3 var(--body);letter-spacing:.06em;text-transform:uppercase;opacity:.75}
.icd{font:400 .88rem/1.45 var(--body);opacity:.8}

.flow{display:flex;flex-wrap:wrap;gap:10px 6px;align-items:center;font:700 .95rem var(--disp);margin-top:8px}
.flow span{border:1.5px solid currentColor;border-radius:999px;padding:9px 15px;opacity:.9}
.flow i{font-style:normal;color:var(--blue);font-size:1.1rem}
.flow.big{justify-content:center;font-size:1.15rem;gap:14px 10px}
.flow.big span{padding:14px 24px;border:2px solid var(--blue);color:var(--ink-soft)}
.flow.big i.loop{color:#6b7075;font-size:.9rem;flex-basis:100%;text-align:center;margin-top:6px}
.steps{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font:700 1.02rem var(--disp);margin-bottom:14px}
.steps i{font-style:normal;opacity:.6;font-size:1.1rem}
.steps .sy{color:var(--yellow)} .steps .sb{color:var(--blue)} .steps .sg{color:var(--green)}
.steps.chips span{padding:9px 16px;border-radius:999px;font-size:.98rem}
.steps.chips .sy{background:var(--yellow);color:var(--ink-soft)}
.steps.chips .sb{background:var(--blue);color:#fff}
.steps.chips .sg{background:var(--green);color:var(--ink-soft)}
.steps.chips i{color:var(--ink-soft);opacity:.55}
.cta{display:inline-flex;margin-top:24px;background:var(--yellow);color:#101112;font:700 1rem var(--body);padding:14px 24px;border-radius:999px;text-decoration:none}
.cta.blue{background:var(--blue);color:#fff} .cta.green{background:var(--green);color:#101112}

/* Jerry OS (Service, digital) */
.osh1{font:700 clamp(1.9rem,3.2vw,2.6rem)/1.08 var(--disp);margin-bottom:4px}
.osh2{font:700 1.15rem/1.4 var(--disp);color:var(--blue);margin-bottom:14px}
.sblock .osh2{opacity:1}
.oslist{list-style:none;margin:6px 0 14px;display:flex;flex-direction:column;gap:12px}
.oslist li{position:relative;padding-left:22px;font:400 1rem/1.55 var(--body);max-width:60ch}
.oslist li::before{content:"";position:absolute;left:0;top:.5em;width:10px;height:10px;background:var(--blue)}
/* Jerry-OS-Teaser: WEISSE Kachel (Karsten-Ausnahme 10.07.) */
/* B6: oscard auf definierte Breite gezogen (Regel 7 / Typ-B-Band statt 820px-Sonderbreite); Listen bleiben links lesbar */
.oscard{border-radius:16px;padding:36px 38px;max-width:720px;margin:0 auto;text-align:left;background:#fff;color:var(--ink-soft)}
.oscard .eyebrow{color:var(--blue)!important}
.oscard .cta{background:var(--blue);color:#fff}
.oscard h2{margin-top:2px}
.oscard p{margin-bottom:4px}
.backlink{font:700 .85rem var(--body);color:var(--blue);text-decoration:none;display:inline-block;margin-top:14px}
.backlink:hover{text-decoration:underline}

/* Sektions-Footer (zentriert) */
.sfoot{padding:26px 24px;background:#000;border-top:1px solid rgba(255,255,255,.14);display:flex;gap:20px;justify-content:center;flex-wrap:wrap;font:600 .82rem var(--body);color:rgba(255,255,255,.55)}
.sfoot a{color:rgba(255,255,255,.72);text-decoration:none}
.sfoot a:hover{color:#fff}

/* Show Cases (digital, dunkle Sektion → blaue Karten) */
.casegrid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.case{background:var(--blue);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;text-decoration:none;cursor:pointer;transition:transform .25s var(--ease),box-shadow .25s}
.case:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(0,45,255,.25)}
.case img{width:100%;height:150px;object-fit:cover;display:block;filter:grayscale(1);transition:filter .3s}
.case:hover img{filter:none}
.caseph{height:150px;display:flex;align-items:center;justify-content:center;font-size:2rem;color:rgba(255,255,255,.4);background:#0c1027}
.casecap{position:relative;padding:14px 16px 16px;color:#fff}
.casecap b{display:block;font:700 .95rem/1.25 var(--disp);margin-bottom:4px}
.casecap span{font:400 .78rem/1.4 var(--body);opacity:.85}
.vbadge{position:absolute;top:-14px;right:12px;font:700 .62rem var(--body);letter-spacing:.06em;background:#fff;color:var(--ink-soft);border-radius:999px;padding:5px 10px;font-style:normal}
@media (max-width:900px){.casegrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.casegrid{grid-template-columns:1fr}}

/* Kontakt: Sparten-Akzente (Karsten 10.07.: nicht nur schwarz) */
.kontakt{border-top:6px solid transparent}
.content[data-sec="c"] .kontakt{border-top-color:var(--yellow)}
.content[data-sec="d"] .kontakt{border-top-color:var(--blue)}
.content[data-sec="e"] .kontakt{border-top-color:var(--green)}
.content[data-sec="c"] .kontakt .eyebrow{color:var(--yellow)}
.content[data-sec="d"] .kontakt .eyebrow{color:var(--blue)}
.content[data-sec="e"] .kontakt .eyebrow{color:var(--green)}
.content[data-sec="c"] .kontakt .pimg{outline:3px solid var(--yellow);outline-offset:5px}
.content[data-sec="d"] .kontakt .pimg{outline:3px solid var(--blue);outline-offset:5px}
.content[data-sec="e"] .kontakt .pimg{outline:3px solid var(--green);outline-offset:5px}
.content[data-sec="c"] .kontakt .maillink{color:var(--yellow)}
.content[data-sec="d"] .kontakt .maillink{color:var(--blue)}
.content[data-sec="e"] .kontakt .maillink{color:var(--green)}

/* Kontakt: Portraits KREISFÖRMIG, keine Kacheln (Karsten 10.07.) */
.kontakt .ic{background:none!important;border:none!important;color:#fff!important}
.kontakt .ic img.pimg{width:150px;height:150px;border-radius:50%;object-fit:cover}
.kontakt .icd a{font-weight:600;color:#fff}
/* Telefon in Body-Font (Mono wirkte wie Formatfehler — Karsten 10.07.) */
.maillink{color:inherit;font-weight:700}
.shero::after{content:'';position:absolute;top:-120px;right:-120px;width:520px;height:520px;border-radius:50%;pointer-events:none;filter:blur(10px);opacity:.20;background:radial-gradient(circle,var(--glow,transparent) 0%,transparent 62%)}
.tile.t1 .shero::after{--glow:#ffcc33}.tile.t2 .shero::after{--glow:#002dff}.tile.t3 .shero::after{--glow:#4cd494}
.shero .sub2{margin:28px auto 0;font:600 clamp(1.15rem,1.7vw,1.4rem)/1.55 var(--body);color:#f0f2f3;max-width:52ch}
.shero .proofchips{margin-top:34px}

/* --- Haus-Streifen (Landing, unter den Kacheln) --- */
.fstrip{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;justify-content:center;padding:24px 5% 20px;background:#0b0b0b;font:700 1.1rem var(--disp);color:#fff;text-align:center}
.fstrip i{font-style:normal;opacity:.55}
.fs.dy{color:var(--yellow)} .fs.dbb{color:var(--blue)} .fs.dgk{color:var(--green)}
.fsline{flex-basis:100%;font:400 .9rem var(--body);color:#b7bcc0;margin-top:2px}
.refstrip{display:flex;flex-wrap:nowrap;gap:6px 14px;align-items:center;justify-content:flex-start;padding:16px 5%;background:#fff;font:700 .8rem var(--body);color:#8a8d90;overflow-x:auto;scrollbar-width:none}
.refstrip::-webkit-scrollbar{display:none}
.reflab{font:700 .64rem var(--body);letter-spacing:.14em;text-transform:uppercase;color:#6b7075;margin-right:6px;white-space:nowrap}
.refmini{display:flex;align-items:center;justify-content:center;padding:0 14px}
.refmini img{height:47px;width:auto;max-width:130px;object-fit:contain}
.refmini img.tall{height:47px}
.refmini.reftxt{font:700 .72rem var(--disp);color:#000;letter-spacing:.02em;white-space:nowrap}
.start.expanded .house{display:none}

/* --- Landing-Footer (zentriert; Impressum von der Startseite erreichbar = Pflicht) --- */
.lfoot{position:relative;z-index:2;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 20px;padding:12px 5%;background:#000;border-top:1px solid rgba(255,255,255,.12);font:600 .8rem var(--body);color:rgba(255,255,255,.55)}
.lfoot a{color:rgba(255,255,255,.72);text-decoration:none}
.start.expanded .lfoot{display:none}

/* --- Vollbild-Menü (rechtsbündig, pro Sektion eigene Anker + Haus-Gruppe) --- */
.menu{position:fixed;inset:0;z-index:30;background:rgba(6,6,6,.975);display:flex;flex-direction:column;justify-content:center;align-items:flex-end;text-align:right;padding:0 6%;opacity:0;pointer-events:none;--acc:var(--green)}
.menu.open{opacity:1;pointer-events:auto}
.menu a{text-decoration:none;cursor:pointer;color:#fff}
.menu .mtitle{font:700 clamp(1.7rem,3.2vw,2.5rem) var(--disp);margin-top:2px}
.menu .mtitle:hover{color:var(--acc)}
.menu .msub{display:flex;flex-direction:column;align-items:flex-end;gap:1px;margin:5px 0 12px}
.menu .msub a{font:700 1.1rem var(--body);color:rgba(255,255,255,.8)}
.menu .msub a:hover{color:var(--acc)}
.menu .mbig{display:block;font:700 clamp(1.7rem,3.2vw,2.5rem) var(--disp);margin-top:3px}
.menu .mbig:hover{color:var(--acc)}
.menu .mbig[data-section="0"]:hover{color:var(--yellow)}
.menu .mbig[data-section="1"]:hover{color:var(--blue)}
.menu .mbig[data-section="2"]:hover{color:var(--green)}
.msocial{display:flex;gap:12px;margin-top:24px}
.msocial a{width:38px;height:38px;border:1.5px solid rgba(255,255,255,.4);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff}
.msocial a svg{width:18px;height:18px}
.mlegal{position:absolute;bottom:26px;left:0;right:0;display:flex;gap:18px;justify-content:center}
.mlegal a{font:700 .85rem var(--body);color:rgba(255,255,255,.6)}
.mlang{position:absolute;top:34px;right:96px;font:700 1rem var(--body);color:rgba(255,255,255,.6)}
.mlang b{color:#fff}
.mclose{position:absolute;top:22px;right:30px;background:none;border:1px solid rgba(255,255,255,.3);color:#fff;width:44px;height:44px;border-radius:50%;font-size:1.5rem;cursor:pointer}

/* --- Responsive --- */
@media (max-width:900px){
  .tiles{flex-direction:column;min-height:0}
  .tile{clip-path:none!important;margin-left:0!important;min-height:220px}
  .fw{clip-path:none!important;inset:0;border:7px solid;border-radius:2px}
  .t1 .fw{border-color:var(--yellow)}.t2 .fw{border-color:var(--blue)}.t3 .fw{border-color:var(--green)}
  .start.expanded .tile.active{min-height:88vh}
  .start.expanded .tile:not(.active){min-height:0}
  .win.two,.win.two.rev{grid-template-columns:1fr;gap:26px}
  .win.two.rev .wtxt{order:1} .win.two.rev .media{order:2}
  .igrid.i4,.igrid.i3{grid-template-columns:repeat(2,1fr)} .igrid.i2{grid-template-columns:1fr}
  .menu a{font-size:1.4rem}
  .soc{display:none}
}
@media (max-width:560px){.igrid.i4,.igrid.i3{grid-template-columns:1fr}}

/* --- Case-Lightbox (Overlay) --- */
.lb{position:fixed;inset:0;z-index:40;background:rgba(4,4,4,.92);display:none;align-items:center;justify-content:center;padding:4vh 4vw}
.lb.open{display:flex}
.lbin{background:#fff;color:var(--ink-soft);border-radius:16px;max-width:860px;width:100%;max-height:90vh;overflow-y:auto;position:relative}
.lbin .lbmedia img,.lbin video{width:100%;max-height:52vh;object-fit:cover;display:block}
.lbthumbs{display:flex;gap:8px;padding:10px 14px 0;flex-wrap:wrap}
.lbthumbs img{width:86px;height:56px;object-fit:cover;border-radius:6px;cursor:pointer;border:2px solid transparent}
.lbthumbs img:hover{border-color:var(--blue)}
.lbtxt{padding:18px 28px 28px}
.lbtxt b{display:block;font:700 1.3rem var(--disp);margin-bottom:4px}
.lbsub{display:block;font:700 .85rem var(--body);color:var(--blue);margin-bottom:10px}
.lbdesc{font:400 .98rem/1.6 var(--body);color:#3a3e42}
.lbnote{margin-top:10px;font:600 .72rem var(--body);letter-spacing:.06em;text-transform:uppercase;color:#8a8d90}
.lbx{position:absolute;top:12px;right:12px;z-index:2;width:38px;height:38px;border-radius:50%;border:none;background:rgba(0,0,0,.55);color:#fff;font-size:1.2rem;cursor:pointer}

/* ---- Dach-Overlays: Kontakt / Impressum / Datenschutz (Mockup; Produktion = echte Routen) ---- */
.ovl{position:fixed;inset:0;z-index:60;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.72);padding:4vh 4vw}
.ovl.open{display:flex}
.ovlin{position:relative;background:#fff;color:var(--ink-soft);border-radius:14px;max-width:680px;width:100%;max-height:88vh;overflow:auto;padding:34px 38px 38px}
.ovlband{height:6px;border-radius:3px;margin-bottom:22px;background:linear-gradient(90deg,var(--yellow) 0 33.4%,var(--blue) 33.4% 66.7%,var(--green) 66.7% 100%)}
.ovlin h3{font:700 1.5rem/1.2 var(--disp);color:var(--ink);margin-bottom:14px}
.ovlin p{font:400 1rem/1.6 var(--body);margin-top:12px}
.ovlin a{color:var(--blue);font-weight:600;text-decoration:none}
.ovlin a:hover{text-decoration:underline}
.ovlin h4{font:700 1.05rem/1.3 var(--disp);color:var(--ink);margin-top:22px}
.ovlstand{font:400 .85rem var(--body);opacity:.6;margin-top:20px}
.ovlx{position:absolute;top:12px;right:14px;border:0;background:none;font:400 1.7rem var(--body);color:var(--ink);cursor:pointer;line-height:1}
.ovlmail a{font:700 1.25rem var(--disp)}
.ovljump a{margin-right:18px;font-weight:700}
.pend{margin-bottom:16px;padding:9px 12px;border-radius:8px;background:var(--yellow);color:var(--ink);font:700 .8rem/1.4 var(--body);letter-spacing:.04em;text-transform:uppercase}

/* ---- Calendly Click-to-Load (Muster jerry-engine-Teaser) ---- */
.calbox.center{max-width:720px;margin-left:auto;margin-right:auto;text-align:center}
.calbox.center .cal-sub,.calbox.center .cal-note{margin-left:auto;margin-right:auto}
.calbox{margin-top:26px;padding:22px 24px;border:1px solid rgba(0,0,0,.12);border-radius:14px;background:#f4f5f5}
.calbox .cal-h{font:700 1.1rem var(--disp);color:var(--ink)}
.calbox .cal-sub{font:400 .95rem/1.55 var(--body);margin-top:6px;max-width:58ch}
.calbox .cal-load{margin-top:14px;border:0;cursor:pointer}
.calbox .cal-note{font:400 .8rem/1.5 var(--body);opacity:.7;margin-top:10px}
.calbox .cal-note a{color:var(--blue);font-weight:600}
.calbox .calmount{margin-top:14px}
.calbox .calmount .calendly-inline-widget{min-width:0;width:100%;height:660px}

.tlink{color:var(--ink);font-weight:700;text-decoration:underline}

.kontakt .pimg{margin-bottom:10px}

.vcflink{display:inline-block;margin-top:8px;font:700 .82rem var(--body);letter-spacing:.04em;text-transform:uppercase;opacity:.85}

.qrbox{display:flex;flex-direction:column;align-items:center;gap:8px;background:#fff;padding:14px 14px 12px;border-radius:12px;width:272px;margin:16px auto 0}
.qrbox img{width:244px;height:244px;display:block;image-rendering:pixelated}
.qrbox span{font:600 .68rem/1.3 var(--body);color:var(--ink-soft);text-align:center;letter-spacing:.03em}

.flywheel{margin-top:18px;text-align:center;font-size:14px;color:#3a3e42;font-style:italic}

/* Warum-jetzt-Statistiken + Sektions-Abbinder + Phasen-Meta */
.secfoot{margin-top:26px;text-align:center;font-size:15.5px;line-height:1.6}
.icmeta{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;opacity:.65;margin:2px 0 8px}
.shead .slogo{cursor:pointer}

/* Geräte-Render (transparentes PNG, komplett zeigen) */
.media.device{background:transparent;border:none;overflow:visible;min-height:0;display:block;padding:22px 22px 18px}
.media.device>img{position:static;width:100%;height:auto;object-fit:contain}
.media.device .mcap{position:static;margin:16px 0 6px;text-align:center}


/* Härtegrade web-nativ (Engine-Vorbild) + Engine-Baum + große CTA */
.hgwrap{display:grid;grid-template-columns:1.7fr 1fr;gap:30px;margin-top:34px;align-items:start;text-align:left}
.hgrows{display:grid;gap:14px}
.hgrow{display:flex;gap:18px;align-items:center;border-radius:14px;padding:18px 22px;border:1.5px solid #101112;background:#fff}
.hgrow img{width:46px;height:46px;flex:none}
.hgrow b{letter-spacing:.12em;font-size:14.5px}
.hgrow p{margin:4px 0 0;font-size:13.5px;line-height:1.5}
.hgrow.r2{background:#d7f5e9;width:78%}
.hgrow.r3{background:#4cd494;width:58%}
.hgrow.r3 p{font-size:12.5px}
.kpipanel{border:1.5px solid rgba(0,0,0,.12);border-radius:14px;padding:18px;display:grid;gap:8px;background:#fff}
.kpipanel b{font-size:16px}
.kpipanel span{font-family:Manrope,Arial,sans-serif;font-weight:600;font-size:13px;border:1px solid rgba(0,0,0,.1);border-radius:8px;padding:8px 10px;background:#fafafa}
.kpipanel .k2{background:#d7f5e9}
.kpipanel .k1{background:#4cd494}
.cta.big{font-size:19px;padding:16px 32px}
@media(max-width:860px){.hgwrap{grid-template-columns:1fr}.hgrow.r2{width:88%}.hgrow.r3{width:76%}}

/* Pitch-Highlight + einheitlicher Tiefe-Link */
.pitchbox{margin-top:22px;background:#edfbf6;border-left:4px solid #4cd494;border-radius:0 14px 14px 0;padding:20px 24px}
.pitchbox .pb-k{display:block;font-weight:800;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:#1c8a5e;margin-bottom:8px}
.pitchbox p{margin:0;font-size:17px;line-height:1.65}
p.deeplink{margin-top:76px!important;text-align:center}
.deeplink a{display:inline-block;background:#fff;border:1.5px solid #101112;border-radius:999px;padding:10px 24px;font-weight:700;font-size:14px;color:#101112;text-decoration:none;box-shadow:0 4px 14px -8px rgba(0,0,0,.3);transition:background .15s}
.deeplink a:hover{background:#d7f5e9}

/* Sektions-Band REVIDIERT (Karsten 13.07.): Corporate OHNE Trennbalken; Verlaufs-Bänder nur jerry-engine (Produktseite) */
/* Fließtext-Regel: mehrzeilige Absätze linksbündig (Headlines bleiben zentriert) */
/* Typ B: EINE Mittelachse — Text zentriert, Boxen im 720px-Fokus-Band (== calbox) */
.whead p{text-align:center;max-width:780px;margin-left:auto;margin-right:auto}
.sblock .win>p{text-align:center;max-width:780px;margin-left:auto;margin-right:auto}
.whead p.km-under,.whead p.km-edge,.whead p.km-big,.sblock .win>p.km-under{max-width:940px}
.sblock .win>p.ctr{text-align:center}
.igrid .icd{text-align:left}
.secfoot{text-align:center}

/* Kontakt-Karte: Portrait | Daten (linksbündig) | QR — Owner: Corporate-Session */
.kwrap{display:grid;grid-template-columns:auto 1fr auto;gap:40px;align-items:center;max-width:820px;margin:30px auto 0;text-align:left}
.kwrap .pimg{width:150px;height:150px;border-radius:50%;object-fit:cover}
.kdata{display:grid;gap:6px}
.kdata .ict{font-size:22px}
.kdata a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.25);width:max-content}
.content[data-sec="c"] .kdata a:hover{border-color:var(--yellow)}
.content[data-sec="d"] .kdata a:hover{border-color:#6f8dff}
.content[data-sec="e"] .kdata a:hover{border-color:var(--green)}
.kdata .vcflink{margin-top:8px;font-weight:700;border:none}
.content[data-sec="c"] .kdata .vcflink{color:var(--yellow)}
.content[data-sec="d"] .kdata .vcflink{color:#6f8dff}
.content[data-sec="e"] .kdata .vcflink{color:var(--green)}
@media(max-width:760px){.kwrap{grid-template-columns:1fr;justify-items:center;text-align:center;gap:22px}.kdata{justify-items:center}}

/* Jerry OS: rechte Spalte = Schema + Calendly gestapelt */
.oscol{display:grid;gap:22px;align-content:start}

.acc{font-style:normal;color:#2bb277}
.punch{margin-top:20px;font-size:16.5px;line-height:1.6}

/* Wertschöpfungs-Kette (Sektion 1): Markt → Engine → Team → Impact */
.vchain{display:grid;gap:0;text-align:center;align-self:start;margin-top:6px}
.vc{border:1.5px solid #101112;border-radius:14px;padding:12px 18px 10px;background:#fff}
.vc img{height:118px;display:block;margin:0 auto 6px}
.vc.eng img{height:96px;padding:6px 0}
.vc b{display:block;font-size:15.5px;letter-spacing:.04em}
.vc-out{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.vc-out img{height:96px}
.vc.eng{background:#edfbf6}
.vc.imp{background:#4cd494}
.vc.imp p{color:#101112}
.vc-arr{width:2px;height:20px;background:#4cd494;margin:0 auto;position:relative}
.vc-arr::after{content:"";position:absolute;left:-5px;bottom:-2px;border-left:6px solid transparent;border-right:6px solid transparent;border-top:8px solid #4cd494}

/* RSG-Kacheln: Verbindlichkeits-Stufen (weiß→tint→grün, analog Härtegrade) */
#ablauf .ic.rsg1{background:#fff;color:#101112}
#ablauf .ic.rsg2{background:#d7f5e9;color:#101112}
#ablauf .ic.rsg3{background:#4cd494;color:#101112}
#ablauf .ic.rsg1 .icd,#ablauf .ic.rsg2 .icd,#ablauf .ic.rsg3 .icd{color:#101112}
#ablauf .ic.rsg1 .icmeta,#ablauf .ic.rsg2 .icmeta,#ablauf .ic.rsg3 .icmeta{opacity:.6}

/* wasistdas-align */
#wasistdas .win.two{align-items:start}

/* Zentrier-Ausnahmen mit Spezifität über der Fließtext-Linksregel */
.sblock .win>p.secfoot{text-align:center}
.sblock .win>p.deeplink{text-align:center}

/* wasistdas: linke Spalte streckt sich, Zahlen&Quellen-Pill bündig mit Ketten-Unterkante */
#wasistdas .wtxt{align-self:stretch;display:flex;flex-direction:column}
#wasistdas .wtxt>*{flex:none}
#wasistdas p.deeplink{margin-top:auto!important;padding-top:40px}

/* Formel-Strip: Auflösung + größere Maguire-Zeile */
.fsline{width:100%;font:600 1.05rem var(--body);opacity:.95;margin-top:6px}
.fsres{width:100%;font:500 .88rem/1.6 var(--body);color:#b7bcc0;margin-top:6px;letter-spacing:.02em;max-width:820px;margin-left:auto;margin-right:auto}
.fsres b{color:#fff;font-weight:700}
/* Logoleiste mobil: umbrechen statt unsichtbarem Scroll */
@media(max-width:720px){.refstrip{flex-wrap:wrap;justify-content:center;overflow-x:visible;padding:18px 6%}.reflab{width:100%;text-align:center;margin-bottom:4px}}

/* Formel-Block strukturiert: Label · Chips · 2 Film-Karten · System-Zeile */
.fchips{display:flex;gap:10px 18px;align-items:center;justify-content:center;flex-wrap:wrap;width:100%}
.fchips i{font-style:normal;opacity:.55}
@media(max-width:720px){.fcards{grid-template-columns:1fr}}

.fsres .fg{color:#4cd494}
.fsline{margin-top:2px}

/* Referenz-Leiste als laufendes Band */
.refstrip.marquee{overflow:hidden;flex-wrap:nowrap}
.mq{overflow:hidden;flex:1;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.mqtrack{display:flex;align-items:center;width:max-content;animation:mqscroll 46s linear infinite}
.mqtrack:hover{animation-play-state:paused}
@keyframes mqscroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.mqtrack{animation:none}}
@media(max-width:720px){.refstrip.marquee{flex-wrap:nowrap;overflow:hidden}.refstrip.marquee .reflab{width:auto}}

/* LOGO-LEISTE LAPTOP: auf 13-15" dezenter (kleiner + ruhiger) */
.mqtrack img{opacity:.82}
@media(max-width:1512px){.refmini img{height:38px}.refmini img.tall{height:38px}.refstrip{padding:12px 5%}}
@media(max-width:1280px){.refmini img{height:34px}.refmini img.tall{height:34px}}

/* Beweis-Block (Zahlen + Fakten-Leiste) */
.bignum{font-family:Poppins,Arial,sans-serif;font-weight:700;font-size:clamp(28px,3vw,38px);line-height:1.05;margin-bottom:6px}
.factrow{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:26px}
.fact{border:1.5px solid #4cd494;border-radius:999px;padding:9px 18px;font-weight:700;font-size:13.5px;color:#fff}
/* Landing-Pledge */
.pledge{font:600 clamp(1.05rem,1.6vw,1.3rem)/1.5 var(--body);color:#fff;max-width:640px;margin:10px auto 6px}
.pledge b{color:#4cd494}
/* Formel-Fußnote */
.fstrip.mini{padding:14px 5%;gap:8px 16px;font:700 .9rem var(--disp)}
.fstrip.mini .fsres{margin-top:0;font-size:.8rem;width:auto}
/* 8. Prinzip-Kachel */
.ic.acht{background:var(--yellow);display:flex;align-items:center;justify-content:center;text-align:center}
.ic.acht .ict{color:#101112;font-size:1.05rem}
/* j-Disc mit Ink-Ring (Icon-Stil-Parität) */
.vc.eng img{height:96px;width:96px;padding:0;border:3px solid #101112;border-radius:50%}
/* Karten auf Grünfläche: Ink-Outline (Konsistenz zu Härtegrade-Karten) */
.sblock.gbg .ic{border:1.5px solid #101112}
/* KPI-Panel: Zeilen nicht umbrechen */
.kpipanel span{white-space:nowrap;font-size:11.5px}

/* v2: Proof-Chips (Landing) · Kachel-Badge · OS-Impact */
.proofchips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:14px auto 4px}
.proofchips span{border:1.5px solid rgba(255,255,255,.28);border-radius:999px;padding:8px 16px;font:600 .82rem var(--body);color:#d7dadd}
.proofchips b{color:inherit;font-weight:800}
.tilebadge{position:absolute;top:16px;right:16px;z-index:4;background:#4cd494;color:#101112;font:800 .68rem var(--body);letter-spacing:.08em;text-transform:uppercase;border-radius:999px;padding:6px 12px}
.osimpact{border-left:4px solid #3d5bff;padding-left:16px}

/* === V3 VISUAL === Bold-Typo · Bento · Bänder · Motion (cookiefrei) */
.win.wide{max-width:1240px}
/* GG.2 Eine Headline-Skala site-weit (giant == plain) */
.sblock h2{font-size:clamp(2rem,3.8vw,3.05rem);line-height:1.13}
h2.giant{font-size:clamp(2rem,3.8vw,3.05rem);letter-spacing:-.01em}
.bento{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:34px;text-align:left}
.bcell{background:#141514;border:1px solid rgba(255,255,255,.09);border-radius:18px;padding:26px 26px 22px;transition:transform .25s,border-color .25s}
.bcell:hover{transform:translateY(-4px);border-color:rgba(76,212,148,.45)}
.bcell .bignum{font-family:Poppins,Arial,sans-serif;font-weight:700;font-size:clamp(40px,4.6vw,64px);line-height:1;color:#fff}
.bcell .bunit{font-size:.45em;font-weight:700;color:#9aa0a5}
.bcell .blab{font:700 .95rem var(--body);color:#4cd494;margin:8px 0 6px}
.bcell p{margin:0;font:400 .88rem/1.55 var(--body);color:#b7bcc0;max-width:none}
.bbig{grid-column:span 2;grid-row:span 1;background:linear-gradient(135deg,#141514 55%,rgba(76,212,148,.14))}
.bgreen{background:linear-gradient(160deg,#12241b,#101112);border-color:rgba(76,212,148,.35)}
.bwide{grid-column:1/-1;background:transparent;border-style:dashed}
.bclaim{font:600 1.02rem/1.7 var(--body);color:#e8eaec;text-align:center}
.stmtband{background:#0b0b0b;position:relative;overflow:hidden;padding:56px 5%;text-align:center}
.stmtband::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 120% at 50% 0%,rgba(76,212,148,.16),transparent 70%)}
.stmtband span{position:relative;font-family:Poppins,Arial,sans-serif;font-weight:700;font-size:clamp(1.6rem,3.6vw,2.8rem);color:#fff}
.stmtband b{color:#4cd494}
/* Scroll-Reveal + Hover-Lift (JS setzt .in) */
.rv{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
.rv.in{opacity:1;transform:none}
.igrid .ic{transition:transform .25s,box-shadow .25s}
.igrid .ic:hover{transform:translateY(-4px);box-shadow:0 18px 40px -24px rgba(0,0,0,.45)}
.cta{font-size:1.05rem;padding:15px 30px;border-radius:999px;transition:transform .2s}
.cta:hover{transform:translateY(-2px)}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}.bcell,.igrid .ic,.cta{transition:none}}
@media(max-width:900px){.bento{grid-template-columns:1fr 1fr}.bbig{grid-column:1/-1}}
@media(max-width:560px){.bento{grid-template-columns:1fr}}

/* ===== V4: Formen-Vokabular (Marker · Bänder · Nummern · Versatz) ===== */
.mark{background:var(--green);color:var(--ink-soft);padding:.04em .16em;-webkit-box-decoration-break:clone;box-decoration-break:clone;border-radius:6px}
.sblock.gbg .mark{background:var(--ink);color:#fff}
.content[data-sec="c"] .mark{background:var(--yellow);color:var(--ink-soft)}
.content[data-sec="c"] .sblock.ybg .mark{background:var(--ink);color:var(--yellow)}
.content[data-sec="d"] .mark{background:var(--blue);color:#fff}
.content[data-sec="d"] .sblock.bbg .mark{background:#fff;color:var(--blue)}
.stmtband.green{background:var(--green)}
.stmtband.green::before{background:radial-gradient(60% 120% at 50% 0%,rgba(0,0,0,.12),transparent 70%)}
.stmtband.green span{color:var(--ink-soft)}
.stmtband.green b{background:var(--ink);color:var(--green);padding:.04em .22em;border-radius:6px}
.stmtband.yellow{background:var(--yellow)}
.stmtband.yellow::before{background:radial-gradient(60% 120% at 50% 0%,rgba(0,0,0,.10),transparent 70%)}
.stmtband.yellow span{color:var(--ink-soft)}
.stmtband.yellow b{background:var(--ink);color:var(--yellow);padding:.04em .22em;border-radius:6px}
.stmtband.blue{background:var(--blue)}
.stmtband.blue::before{background:radial-gradient(60% 120% at 50% 0%,rgba(0,0,0,.22),transparent 70%)}
.stmtband.blue b{background:#fff;color:var(--blue);padding:.04em .22em;border-radius:6px}
.secnum{font-family:Poppins,Arial,sans-serif;font-weight:800;font-size:2.3rem;line-height:1;color:var(--green)}
.ic .secnum{margin-bottom:2px}
.content[data-sec="c"] .secnum{color:transparent;-webkit-text-stroke:1.6px rgba(0,0,0,.45)}
/* B7 (Karsten 15.07.): Stagger-Versatz entfernt — Oberkanten bündig, ruhiges Raster (site-weit) */
#maschine .ic{background:#fff;color:#101112;text-align:left;align-items:flex-start}
#maschine .ic .icd,#maschine .ic .ict{color:#101112}
#maschine .ic img{width:60px;height:60px}
@media(min-width:900px){.bcell.b2{grid-column:span 2}}

/* ===== V5: System-Kette als versetzter Flow · acht-Kachel-Invert · Chips auf Farbflächen ===== */
.vchain{gap:8px}
.vchain>.vc{transform:skew(-8deg);border-width:2px;border-radius:10px;width:76%}
.vchain>.vc img,.vchain>.vc b{transform:skew(8deg)}
.vchain>.vc.eng{margin-left:24%;background:#101112;border-color:var(--green)}
.vchain>.vc.eng b{color:#fff}
.vchain>.vc.eng img{border-color:var(--green)}
.vchain>.vc-arr{height:30px;width:3px}
.vchain>.vc-arr:nth-child(2){margin-left:52%;transform:rotate(-26deg)}
.vchain>.vc-arr:nth-child(4){margin-left:44%;transform:rotate(26deg)}
.vchain>.vc-arr:nth-child(6){margin-left:40%;transform:rotate(-14deg)}
.vc-out .vc{transform:skew(-8deg)}
.vc-out .vc img,.vc-out .vc b,.vc-out .vc p{transform:skew(8deg)}
@media(max-width:760px){.vchain>.vc{width:100%;margin-left:0!important}.vchain>.vc-arr{margin-left:auto!important;transform:none!important}}
.sblock.ybg .ic.acht{background:#101112}
.sblock.ybg .ic.acht .ict{color:var(--yellow)}
.sblock.gbg .proofchips span{border-color:#101112;color:#101112}
.sblock.white .proofchips span{border-color:rgba(0,0,0,.35);color:#101112}

/* ===== V6: Produkt-Karten (Ready·Set·Go) · Kompetenz-Diagramm · Kette-Caption · warumd 7. Karte ===== */
.jny{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:30px}
.jcard{position:relative;background:#fff;color:#101112;border-radius:14px;padding:24px 20px 20px;display:flex;flex-direction:column;gap:12px}
.jcard.p2{background:#e2f6ec}
.jcard.p3{background:var(--green)}
.jbadge{position:absolute;top:-13px;right:14px;background:#101112;color:#fff;border-radius:999px;padding:6px 13px;font:700 .72rem/1 var(--body);letter-spacing:.06em}
.jbadge.free{background:var(--green);color:#101112;border:2px solid #101112}
.jbadge.go{background:#101112;color:var(--green)}
.jhead{display:flex;gap:14px;align-items:center}
.jnum{font-family:Poppins,Arial,sans-serif;font-weight:800;font-size:2.1rem;line-height:1;color:var(--green)}
.jcard.p3 .jnum{color:#101112}
.jst{display:block;font:800 1.2rem/1.1 Poppins,Arial,sans-serif}
.jnm{display:block;font:600 .9rem var(--body);opacity:.75}
.jtag{font:600 .8rem var(--body);opacity:.7;margin:-4px 0 0}
.jlbl{display:block;font:700 .68rem var(--body);letter-spacing:.09em;text-transform:uppercase;opacity:.55;margin-bottom:5px}
.jsec p{font-size:.92rem;line-height:1.45}
.jchips{display:flex;flex-wrap:wrap;gap:6px}
.jchips span{border:1.5px solid rgba(0,0,0,.4);border-radius:999px;padding:5px 11px;font:600 .78rem var(--body)}
@media(max-width:900px){.jny{grid-template-columns:1fr;gap:22px}}
.media.diag{padding:20px;background:#fff}
.media.diag svg{width:100%;height:auto;display:block}
.chaincap{font:700 .74rem/1 var(--body);letter-spacing:.12em;text-transform:uppercase;color:#101112;opacity:.65;text-align:center;margin-bottom:8px}
@media(min-width:900px){#warumd .igrid .ic:nth-child(7){grid-column:2}}

/* ===== V7: snackable Bausteine · Fakten-Reihe · Scroll-Reveal je Kachel ===== */
.usplist{margin-top:14px}
.usplist p{margin:7px 0;font-weight:600}
.dhead{font:800 1.1rem Poppins,Arial,sans-serif;margin-bottom:12px}
.dlist{display:grid;grid-template-columns:1fr 1fr;gap:2px 30px;text-align:left}
.dlist div{position:relative;padding:11px 0 11px 26px;border-bottom:1px solid rgba(255,255,255,.16);font:600 .95rem var(--body)}
.dlist div::before{content:"";position:absolute;left:0;top:16px;width:12px;height:12px;background:var(--yellow);transform:skew(-12deg);border-radius:2.5px}
@media(max-width:720px){.dlist{grid-template-columns:1fr}}
.sciline{font-size:1.02rem}
.factrow{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin:22px 0 6px}
.fact{background:#101112;color:#fff;border-radius:12px;padding:16px 12px;text-align:center}
.fact b{display:block;font:800 1.65rem/1.1 Poppins,Arial,sans-serif;color:var(--green)}
.fact span{font:600 .78rem var(--body);opacity:.9}
@media(max-width:900px){.factrow{grid-template-columns:1fr 1fr}.fact:last-child{grid-column:span 2}}
.bcell.big .bclaim{font:800 1.45rem/1.4 Poppins,Arial,sans-serif}
.bsub{opacity:.65;font:600 .85rem var(--body);margin-top:10px}
.steps4{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;margin:14px 0 4px;font:700 .95rem Poppins,Arial,sans-serif}
.steps4 i{color:var(--green);font-style:normal;font-weight:800}
.steps4 b{color:var(--green);margin-right:2px}
.prodpeek{margin-top:28px}
.mcap{font:600 .78rem var(--body);letter-spacing:.06em;text-transform:uppercase;opacity:.6;margin-top:10px;text-align:center}
@media(min-width:900px){.casegrid .case:nth-child(even){margin-top:18px}.casegrid{margin-bottom:18px}}
#warumd .igrid.i4 .ic:nth-child(7){grid-column:auto}
.igrid .ic:hover{transform:none;box-shadow:none}
.bcell:hover{transform:none}
.igrid .ic.rv,.jcard.rv{transition:opacity .55s ease,transform .55s ease}
.igrid .ic:nth-child(2),.jcard:nth-child(2),.case:nth-child(2){transition-delay:.06s}
.igrid .ic:nth-child(3),.jcard:nth-child(3),.case:nth-child(3){transition-delay:.12s}
.igrid .ic:nth-child(4),.case:nth-child(4){transition-delay:.18s}
.igrid .ic:nth-child(5),.case:nth-child(5){transition-delay:.24s}
.igrid .ic:nth-child(6),.case:nth-child(6){transition-delay:.3s}
.igrid .ic:nth-child(7),.case:nth-child(7){transition-delay:.36s}
.igrid .ic:nth-child(8),.case:nth-child(8){transition-delay:.42s}
/* V7.1: Produkt-Peek — Render unbeschnitten, Caption unter dem Bild */
.media.prodpeek{display:block;min-height:0;padding:14px 14px 4px}
.sblock.gbg .media.prodpeek,.media.prodpeek{background:#0b0b0b;border-color:rgba(0,0,0,.35)}
.media.prodpeek>img{position:static;width:100%;height:auto;object-fit:contain;border-radius:8px;display:block}
.media.prodpeek .mcap{position:static;margin:10px 0 8px;color:rgba(255,255,255,.7)}

/* ===== V8: Highlight-System · Check-Listen · Treppe · Icon-Kette ===== */
.hlq{border-left:6px solid var(--green);padding:6px 0 6px 18px;margin:18px 0;font:700 1.1rem/1.5 Poppins,Arial,sans-serif}
.content[data-sec="c"] .hlq{border-color:var(--yellow)}
.content[data-sec="d"] .hlq{border-color:var(--blue)}
/* R2-G.1: Unterstreichung als Linie MIT Abstand (deckt keine Unterlängen mehr ab) */
.hlu{padding:0 .05em;font-weight:800;text-decoration:underline;text-decoration-thickness:.12em;text-underline-offset:.22em;text-decoration-skip-ink:none;text-decoration-color:var(--green)}
.content[data-sec="c"] .hlu{text-decoration-color:var(--yellow)}
.content[data-sec="d"] .hlu{text-decoration-color:rgba(0,45,255,.5)}
.klist{display:grid;gap:2px;margin-top:12px;text-align:left}
.klist span{position:relative;padding:8px 0 8px 24px;font:600 .92rem/1.45 var(--body);border-bottom:1px solid rgba(0,0,0,.12)}
.klist span:last-child{border-bottom:none}
.klist span::before{content:"";position:absolute;left:0;top:13px;width:11px;height:11px;background:var(--green);transform:skew(-12deg);border-radius:2.5px}
.klist.y span::before{background:var(--yellow)}
.klist.y span{border-color:rgba(0,0,0,.1)}
.content[data-sec="e"] .sblock:not(.white):not(.gbg) .ic .klist span::before{background:#101112}
.bsrc{display:block;margin-top:10px;font:600 .7rem var(--body);font-style:normal;letter-spacing:.04em;opacity:.5;text-transform:uppercase}
.treppe{display:grid;gap:10px;margin-top:30px}
.trow{display:flex;justify-content:space-between;align-items:center;gap:14px;border:1.5px solid #101112;border-radius:10px;padding:13px 20px;background:#fff;font:700 .98rem Poppins,Arial,sans-serif}
.trow small{font:700 .68rem var(--body);letter-spacing:.08em;text-transform:uppercase;opacity:.6;text-align:right}
.trow.t5{width:52%}.trow.t4{width:64%}.trow.t3{width:76%}
.trow.t2{width:88%;background:#e2f6ec}
.trow.t1{width:100%;background:var(--green)}
.trow.t1 small,.trow.t2 small{opacity:.75}
@media(max-width:760px){.trow{width:100%!important}}
.tfoot{margin-top:20px;font-size:.95rem;opacity:.85}
.vchain>.vc.eng{background:#e2f6ec;border:2.5px solid #101112}
.vchain>.vc.eng b{color:#101112}
.vchain>.vc.eng img{border:none;border-radius:0;height:112px;width:auto;padding:0}
.media.prodpeek.light{background:#f4f5f5;border-color:rgba(0,0,0,.15)}
.media.prodpeek.light .mcap{color:rgba(0,0,0,.55)}
.igrid{align-items:start}
.sblock.bbg .ic.acht{background:#101112}
.sblock.bbg .ic.acht .ict{color:#fff}
/* V8.1: Balken-Kollision — mehr Luft in Giant-Headlines mit Mark */
h2.giant{line-height:1.24}
.giant .mark,h2 .mark{padding:.02em .18em}

/* ===== V9: größere Highlights · kompakte Bento · Zwei-Spalten-Treppe · Für-wen neu · Animationen ===== */
.hlbig{font:800 1.32rem/1.5 Poppins,Arial,sans-serif;margin:16px 0}
.klist.b span::before{background:var(--blue)}
.content[data-sec="c"] .ic .klist span::before{background:#101112}
.content[data-sec="c"] .ic .klist span{border-color:rgba(0,0,0,.18)}
.dhead{font-size:1.5rem}
.dlist div{font:600 1.03rem var(--body);padding:13px 0 13px 30px}
.dlist div::before{width:14px;height:14px;top:18px}
.mark{padding:.08em .2em .12em}
h2.giant{line-height:1.28}
.bcell{padding:18px 18px 14px}
.bcell .bignum{font-size:2.5rem}
.bcell p{font-size:.88rem}
.bcell .blab{font-size:.9rem}
@media(min-width:900px){.bento .bcell:nth-child(even){margin-top:12px}}
.hgwrap2{display:grid;grid-template-columns:1.35fr 1fr;gap:34px;align-items:center;margin-top:26px}
@media(max-width:900px){.hgwrap2{grid-template-columns:1fr}}
.fw2{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-top:6px}
@media(max-width:820px){.fw2{grid-template-columns:1fr}}
.fwhead{display:flex;align-items:center;gap:14px;margin:6px 0}
.fwhead img{width:64px;height:64px}
.fwhead b{display:block;font:800 1.3rem/1.2 Poppins,Arial,sans-serif}
.fwhead span{font:600 .9rem var(--body);opacity:.7}
.fwlead{font:700 1.05rem/1.5 Poppins,Arial,sans-serif;margin:2px 0 12px}
.fwbox{background:#f4f5f5;border:1px solid rgba(0,0,0,.08);border-radius:14px;padding:8px 18px}
.mcap.dark{color:rgba(0,0,0,.55)}
/* Systemkette: flacher */
.vchain{gap:5px}
.vc{padding:8px 14px 6px}
.vc img{height:92px}
.vchain>.vc.eng img{height:100px}
.vchain>.vc-arr{height:22px}
/* Aufbau-Animationen (nur bei aktivem Reveal, reduced-motion-sicher) */
.vchain.rv>*{opacity:0}
.vchain.rv.in>*{animation:vfade .5s ease both}
.vchain.rv.in>*:nth-child(2){animation-delay:.1s}
.vchain.rv.in>*:nth-child(3){animation-delay:.2s}
.vchain.rv.in>*:nth-child(4){animation-delay:.3s}
.vchain.rv.in>*:nth-child(5){animation-delay:.4s}
.vchain.rv.in>*:nth-child(6){animation-delay:.5s}
.vchain.rv.in>*:nth-child(7){animation-delay:.6s}
.vchain.rv.in>*:nth-child(8){animation-delay:.7s}
@keyframes vfade{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.treppe.rv .trow{opacity:0}
.treppe.rv.in .trow{animation:tslide .45s ease both}
.treppe.rv.in .trow:nth-child(2){animation-delay:.1s}
.treppe.rv.in .trow:nth-child(3){animation-delay:.2s}
.treppe.rv.in .trow:nth-child(4){animation-delay:.3s}
.treppe.rv.in .trow:nth-child(5){animation-delay:.42s}
@keyframes tslide{from{opacity:0;transform:translateX(-20px)}to{opacity:1;transform:none}}
.media.diag.rv .dn,.media.diag.rv .di,.media.diag.rv .os-client,.media.diag.rv .os-base,.media.diag.rv .os-agents,.media.diag.rv .os-arr{opacity:0}
.media.diag.rv.in .dn1,.media.diag.rv.in .os-base{animation:vfade .5s ease both}
.media.diag.rv.in .dn2,.media.diag.rv.in .os-client{animation:vfade .5s .18s ease both}
.media.diag.rv.in .dn3,.media.diag.rv.in .os-agents{animation:vfade .5s .36s ease both}
.media.diag.rv.in .di,.media.diag.rv.in .os-arr{animation:impop .55s .6s ease both}
@keyframes impop{from{opacity:0;transform:scale(.88)}to{opacity:1;transform:none}}
.media.diag.rv .da{stroke-dasharray:260;stroke-dashoffset:260}
.media.diag.rv.in .da{animation:dadraw .7s .45s ease forwards}
@keyframes dadraw{to{stroke-dashoffset:0}}
.media.diag svg g{transform-box:fill-box;transform-origin:center}
.osicon{width:92px;height:92px;display:block;margin-bottom:10px}
.oshrow{display:flex;align-items:center;gap:16px}
.oshrow .osicon{margin-bottom:0}

/* ===== V10: Key-Message-System größer · Duo-Panels · Leistungs-Wolke ===== */
.hlbig{font-size:1.55rem;line-height:1.45}
.hlq{font-size:1.2rem}
.fwlead{font-size:1.15rem}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:start}
@media(max-width:820px){.duo{grid-template-columns:1fr;gap:44px}}
.dpanel{position:relative;background:var(--yellow);border-radius:16px;transform:skew(-6deg);padding:30px 34px 26px;margin-top:26px}
.dpanel.off{margin-top:64px}
@media(max-width:820px){.dpanel.off{margin-top:26px}}
.dpanel .dpin{transform:skew(6deg)}
.dpanel .dpi{position:absolute;top:-42px;right:26px;width:104px;height:104px;transform:skew(6deg)}
.dpanel h3{font:800 1.7rem/1.1 Poppins,Arial,sans-serif;color:#101112;margin:0 0 14px}
.dpanel h3 em{font-style:italic}
.dpanel p{margin:9px 0;font:600 1.02rem/1.5 var(--body);color:#101112}
.dcloud{font:800 1.4rem/1.75 Poppins,Arial,sans-serif;color:#fff;max-width:1040px}
.dcloud i{font-style:normal;color:var(--yellow);padding:0 .3em}
.sblock .win>p.dcloud,.sblock .win .dcloud{font:800 1.4rem/1.8 Poppins,Arial,sans-serif;color:#fff;max-width:1040px;margin:0 auto;text-align:left}

/* ===== V11: Balken-Clipping-Fix · BI-Treffen-Animation · OS-Icon rechts ===== */
.mark,h2 .mark,.giant .mark{padding:.01em .2em .12em}
h2.giant{line-height:1.34}
.whead h2,.wtxt h2{line-height:1.34}
.oscard{position:relative}
.oscard .osicon.corner{position:absolute;top:26px;right:30px;width:84px;height:84px;margin:0}
.oscard h2{padding-right:104px}
@media(max-width:640px){.oscard .osicon.corner{position:static;margin-bottom:8px}.oscard h2{padding-right:0}}
/* BI trifft Know-how: Felder gleiten aufeinander zu, Schnittmenge → Impact steigt auf */
.media.diag.rv .bi1,.media.diag.rv .bi2,.media.diag.rv .bimeet,.media.diag.rv .biimp,.media.diag.rv .bicap{opacity:0}
.media.diag.rv.in .bi1{animation:bislidel .8s ease both}
.media.diag.rv.in .bi2{animation:bislider .8s ease both}
.media.diag.rv.in .bimeet{animation:bimerge .5s .75s ease both}
.media.diag.rv.in .biimp{animation:birise .6s 1.1s ease both}
.media.diag.rv.in .bicap{animation:vfade .5s 1.5s ease both}
@keyframes bislidel{from{opacity:0;transform:translateX(-140px)}to{opacity:1;transform:none}}
@keyframes bislider{from{opacity:0;transform:translateX(140px)}to{opacity:1;transform:none}}
@keyframes bimerge{from{opacity:0;transform:scaleY(.4)}to{opacity:.95;transform:none}}
@keyframes birise{from{opacity:0;transform:translateY(26px) scale(.9)}to{opacity:1;transform:none}}

/* ===== V12: Key-Message-Statements — XL, fett, variierende Formen ===== */
.content{--acc:var(--green)}
.content[data-sec="c"]{--acc:var(--yellow)}
.content[data-sec="d"]{--acc:var(--blue)}
.km-edge{font:800 clamp(1.45rem,2.2vw,1.95rem)/1.4 Poppins,Arial,sans-serif;border-left:12px solid var(--acc);padding:12px 0 12px 26px;margin:32px 0;letter-spacing:-.01em}
.km-big{font:800 clamp(1.6rem,2.6vw,2.25rem)/1.35 Poppins,Arial,sans-serif;margin:32px 0;letter-spacing:-.015em}
.km-box{margin:32px 0}
.km-box>span{display:inline-block;background:#101112;color:#fff;font:800 clamp(1.35rem,2.1vw,1.8rem)/1.45 Poppins,Arial,sans-serif;padding:20px 28px;border-radius:12px;transform:skew(-4deg)}
.km-box>span b{color:var(--acc)}
/* G11.4 zweite Zeile (Beleg) in derselben schwarzen Kachel */
.km-box>span .kmnote{display:block;margin-top:14px;font:700 .72em/1.5 var(--body);opacity:.94;font-style:normal}
.content[data-sec="d"] .km-box>span b{color:#7d97ff}
.km-under{font:800 clamp(1.45rem,2.2vw,1.95rem)/1.5 Poppins,Arial,sans-serif;margin:32px 0;letter-spacing:-.01em}
.whead p.km-under,.whead p.km-edge,.whead p.km-side{margin-top:38px}
.km-under .u{font-style:normal;text-decoration:underline;text-decoration-thickness:.12em;text-underline-offset:.22em;text-decoration-skip-ink:none;text-decoration-color:var(--acc)}
.sblock.ybg .km-under .u{text-decoration-color:#101112}
.content[data-sec="d"] .km-under .u{text-decoration-color:rgba(0,45,255,.55)}
.sblock:not(.white):not(.ybg):not(.gbg):not(.bbg) .content .km-under .u{text-decoration-color:var(--acc)}
.km-side{font:800 clamp(1.35rem,2vw,1.7rem)/1.45 Poppins,Arial,sans-serif;margin:32px 0 32px auto;max-width:560px;text-align:right;border-right:12px solid var(--acc);padding:10px 26px 10px 0}
/* Auf dunklen Sektionen: Statements weiß */
.sblock:not(.white) .km-edge,.sblock:not(.white) .km-big,.sblock:not(.white) .km-under,.sblock:not(.white) .km-side{color:#fff}
.sblock.white .km-edge,.sblock.white .km-big,.sblock.white .km-under,.sblock.white .km-side,.sblock.ybg .km-big,.sblock.gbg .km-big{color:#101112}
.sblock .win p.km-edge,.sblock .win p.km-big,.sblock .win p.km-under,.sblock .win p.km-side,.wtxt p.km-edge,.wtxt p.km-big,.wtxt p.km-under,.wtxt p.km-side,.oscard p.km-big{font-family:Poppins,Arial,sans-serif;font-weight:800}
.wtxt p.km-edge,.sblock .win p.km-edge{font-size:clamp(1.45rem,2.2vw,1.95rem);line-height:1.4}
.wtxt p.km-big,.sblock .win p.km-big,.oscard p.km-big{font-size:clamp(1.6rem,2.6vw,2.25rem);line-height:1.35}
.wtxt p.km-under,.sblock .win p.km-under{font-size:clamp(1.45rem,2.2vw,1.95rem);line-height:1.5}
.wtxt p.km-side,.sblock .win p.km-side{font-size:clamp(1.35rem,2vw,1.7rem);line-height:1.45}

/* ===== V13 (Go-Paket): Raster · Statements · Landing · System-Flow · Regeln ===== */
/* (7) Einheitliches Raster: Karten-Container auf Textblock-Breite, Gesprächskachel strukturiert */
.calbox{max-width:none;padding:30px 34px}
.calbox .cal-h{font:800 1.3rem/1.2 Poppins,Arial,sans-serif;margin-bottom:8px}
.calbox .cal-sub{max-width:640px}
.calbox .cta{margin:14px 0 6px}
.calbox .cal-note{font-size:.75rem;opacity:.7}
/* B6: max-width:none-Override entfernt — oscard bleibt im 720px-Band (Regel 7) */
/* (1) Zweispaltige Giant-Headlines: max 2 Zeilen */
/* GG.2: Split-Spalten-Sonderskala entfernt — eine H2-Skala überall */
.kmsub{font:600 .95rem var(--body);opacity:.85;margin:-16px 0 0 10px}
/* (4) Ergebnis-Subline zentriert gefasst */
#bekommst .km-under{text-align:center;max-width:880px;margin-left:auto;margin-right:auto}
/* (5) Prinzipien-H2 einzeilig + Wortmarke in acht-Kachel */
/* GG.2: private #wie-Headline-Schrumpfung entfernt — einheitliche H2-Skala */
.achtlogo{height:30px;display:inline-block;margin-top:10px;vertical-align:middle}
.ic.acht img.impicon{width:74px;height:74px;margin:0 auto 4px}
/* B8: Akzent je Sektionsfarbe — Gelb nur auf c; auf d Weiß + Blau-Unterstreichung (Muster wie km-box) */
.content[data-sec="c"] .ic.acht .ict b{color:var(--yellow)}
.content[data-sec="d"] .ic.acht .ict b{color:#fff;text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:.18em;text-decoration-color:var(--blue)}
/* B8: Icon-Größe der Abschluss-Kachel an Standard angleichen */
.ic.acht img:not(.achtlogo):not(.impicon){width:80px;height:80px;margin:0 auto 8px}
.ic.acht img:not(.achtlogo){width:56px;height:56px;margin:0 auto 8px}
/* (2) Story: farbige Sparten-Verweise */
.cherz{color:var(--yellow);font-weight:700}
a.cref{font-weight:700;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
a.cref.kopf{color:#7d97ff}
a.cref.sys{color:var(--green)}
/* (3) Liefer-Block klar abgesetzt */
.dblock{margin-top:48px;padding-top:34px;border-top:1px solid rgba(255,255,255,.18)}
/* (9) Teaser-Icon kleiner, mehr Luft */
.oscard .osicon.corner.sm{width:104px;height:104px;top:22px;right:26px}
/* B4: OS-Karten-H2 — Zeilenhöhe so, dass umbrechende Mark-Balken keine Oberlängen schneiden; B5: Platz fürs größere Icon */
.oscard h2{padding-right:132px;line-height:1.42}
/* (10a) km-box-Akzent auf Blau-Route: weiß statt blau */
.content[data-sec="d"] .km-box>span b{color:#fff;text-decoration:underline;text-decoration-thickness:3px;text-decoration-color:var(--blue)}
/* (11) Weiße Statement-Kachel */
.km-card{margin:32px 0}
.km-card>span{display:inline-block;background:#fff;color:#101112;font:800 clamp(1.35rem,2.1vw,1.8rem)/1.45 Poppins,Arial,sans-serif;padding:20px 28px;border-radius:12px;transform:skew(-4deg)}
.km-card>span b{color:var(--blue)}
/* (13) Systemkette gerade + Kontrast auf Grünfläche */
.vchain.straight>.vc{transform:none;width:82%;margin-left:0}
.vchain.straight>.vc img,.vchain.straight>.vc b{transform:none}
.vchain.straight>.vc.eng{margin-left:18%}
.vchain.straight>.vc-arr:nth-child(2){margin-left:46%;transform:rotate(-22deg)}
.vchain.straight>.vc-arr:nth-child(4){margin-left:46%;transform:rotate(22deg)}
.vchain.straight>.vc-arr:nth-child(6){margin-left:41%;transform:rotate(-12deg)}
.sblock.gbg .vc{border-color:#101112}
.sblock.gbg .vc-arr{background:#101112}
.sblock.gbg .vc-arr::after{border-top-color:#101112}
.sblock.gbg .vchain>.vc.eng{background:#fff;border-color:#101112}
.km-big.ctrd,.sciline.ctrd{text-align:center;margin-left:auto;margin-right:auto}
/* (15) System-Flow: 5 Stationen */
.sysflow{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin:30px 0 10px}
.sstep{position:relative;background:#fff;border-radius:12px;padding:18px 16px;text-align:left}
.sstep b{display:block;font:800 1.02rem/1.25 Poppins,Arial,sans-serif;margin:6px 0 8px}
.sstep p{font:500 .82rem/1.5 var(--body);margin:0}
.sstep .secnum{font-size:1.7rem}
.sstep::after{content:"→";position:absolute;right:-14px;top:44%;font:800 1.1rem Poppins;color:#101112;z-index:2}
.sstep:last-child::after{content:""}
@media(max-width:980px){.sysflow{grid-template-columns:1fr}.sstep::after{content:"↓";right:auto;left:24px;top:auto;bottom:-20px}}
/* (16) Archetyp: Display größer */
.win.two.arch{grid-template-columns:1fr 1.3fr}
@media(max-width:900px){.win.two.arch{grid-template-columns:1fr}}
/* (17) Treppe: kräftigerer Aufbau */
@keyframes tslide{from{opacity:0;transform:translateX(-26px) scaleX(.55);transform-origin:left center}to{opacity:1;transform:none}}
/* (19) Bullet-Kontrast-Regel + Karten-Kontrast auf Weiß */
.jcard.p3 .klist span::before{background:#101112}
.jcard.p3 .klist span{border-color:rgba(0,0,0,.25)}
.sblock.white .jcard.p1{border:1.5px solid rgba(0,0,0,.15)}
/* (4b/8b) Reveal-Stagger deutlicher */
.igrid .ic:nth-child(2),.jcard:nth-child(2),.case:nth-child(2),.sstep:nth-child(2){transition-delay:.12s}
.igrid .ic:nth-child(3),.jcard:nth-child(3),.case:nth-child(3),.sstep:nth-child(3){transition-delay:.24s}
.igrid .ic:nth-child(4),.case:nth-child(4),.sstep:nth-child(4){transition-delay:.36s}
.igrid .ic:nth-child(5),.case:nth-child(5),.sstep:nth-child(5){transition-delay:.48s}
.igrid .ic:nth-child(6),.case:nth-child(6){transition-delay:.6s}
.igrid .ic:nth-child(7),.case:nth-child(7){transition-delay:.72s}
.igrid .ic:nth-child(8),.case:nth-child(8){transition-delay:.84s}
/* (8b) BI-Animation: kräftig, Felder gleiten INEINANDER, Strahlen pulsen */
@keyframes bislidel{from{opacity:0;transform:translateX(-260px)}70%{opacity:1;transform:translateX(26px)}to{opacity:1;transform:translateX(18px)}}
@keyframes bislider{from{opacity:0;transform:translateX(260px)}70%{opacity:1;transform:translateX(-26px)}to{opacity:1;transform:translateX(-18px)}}
@keyframes bimerge{from{opacity:0;transform:scaleY(.2)}60%{opacity:1;transform:scaleY(1.12)}to{opacity:.96;transform:none}}
.media.diag.rv .birays{opacity:0}
.media.diag.rv.in .birays{animation:raypulse 1s .95s ease both}
@keyframes raypulse{0%{opacity:0;transform:scale(.6)}45%{opacity:1;transform:scale(1.12)}100%{opacity:.9;transform:none}}
.media.diag.rv.in .biimp{animation:birise .55s 1.15s cubic-bezier(.2,1.4,.4,1) both}
/* (21/22/23) Landing: Klammer, CTA, Kachel-Leben */
.agentline{font:700 1.05rem/1.6 Poppins,Arial,sans-serif;color:#fff;margin:14px auto 0;max-width:760px}
.agentline b{color:var(--green)}
.agentline .hum{color:rgba(255,255,255,.85);font-weight:600}
.lcta{margin:18px 0 4px}
.top .pledge{font-size:clamp(1.15rem,1.9vw,1.5rem);font-weight:700}
@media(min-width:900px){.tiles .tile:nth-child(2){margin-top:16px}.tiles .tile:nth-child(3){margin-top:32px}}
.heroCta{margin-top:16px}
/* V13.1: Landing-Hero braucht Platz für Klammer+Chips+CTA */
.top{max-height:480px}
.top h1{font-size:clamp(1.9rem,3.6vw,2.9rem)}
.top .proofchips{margin:10px auto 0}
.top .proofchips span{padding:6px 13px;font-size:.78rem}
.agentline{margin-top:10px;font-size:.98rem}
.lcta{margin:12px 0 2px}
.lcta .cta{padding:12px 22px}
.sblock .win>p.sciline.ctrd{text-align:center}
/* GG.2: #beweis-Sonderskala entfernt — eine H2-Skala überall */

/* ===== V13.2 HOTFIX: Kontrast-Bugs + Landing-Rückbau + Überfahr-Effekt ===== */
/* (B) Treppe: Stufen-Text IMMER ink — unabhängig von Sektionsfarbe */
.trow{color:#101112}
.trow small{color:#101112}
/* (C) Kachel-Farb-Regel: Kacheln nie in Hintergrundfarbe (alle Farben) */
.sblock.gbg .vc.imp{background:#fff}
.sblock.gbg .vc.imp p,.sblock.gbg .vc.imp b{color:#101112}
.sblock.gbg .bcell.bgreen,.sblock.ybg .ic.acht .achtwrap{background:#fff}
/* (A) Landing: Kacheln gleich groß + Überfahr-Effekt beim Hover */
@media(min-width:900px){.tiles .tile:nth-child(2),.tiles .tile:nth-child(3){margin-top:0}}
@media(min-width:900px){
  .start:not(.expanded) .tile:hover{transform:scale(1.035);z-index:6}
}
.top{max-height:340px}
/* V14: letzte Kontrast-/Ausrichtungs-Reste (Regel 3–5) */
.sblock.ybg .km-side,.sblock.ybg .km-big,.sblock.ybg .km-under,.sblock.ybg .km-edge{color:#101112}
.sblock.ybg .km-side{border-right-color:#101112}
.sblock.ybg .km-edge{border-left-color:#101112}
.sblock.bbg .km-under .u{text-decoration-color:rgba(255,255,255,.5)}
.sblock.gbg .hlq{border-left-color:#101112}
.sblock.gbg .km-edge{border-left-color:#101112}
.sblock .win>p.km-big.ctrd{text-align:center}

/* ===== V15 · Station Landing ===== */
.top h1{max-width:34ch}
.top .pledge{font-size:clamp(1.3rem,2.3vw,1.75rem);max-width:1100px}
.hlu-tri{background:linear-gradient(90deg,var(--yellow),var(--blue) 50%,var(--green));background-size:100% .26em;background-position:0 94%;background-repeat:no-repeat;padding:0 .1em .06em;font-weight:800}
.tiles{min-height:340px}
.fstrip.mini{padding:30px 5% 26px;gap:12px 22px}
.fstrip.mini .fchips{font-size:1.5rem;letter-spacing:.02em}
.fstrip.mini .fchips i{padding:0 .3em}
.fstrip.mini .fsres{font-size:1rem;width:100%;font-weight:600;opacity:.95}
/* V15.1: Formel-Zeile volle Breite, Pledge-Bold */
.fstrip.mini .fsres{max-width:none;font-size:1rem}
.top .pledge b{font-weight:800}
/* V15.6: Beim Öffnen rutscht unten nichts sichtbar nach — Zonen faden schnell aus */
.fstrip,.refstrip,.lfoot{transition:opacity .3s ease}
.start.expanded .fstrip,.start.expanded .refstrip,.start.expanded .lfoot{opacity:0;pointer-events:none}

/* V15.9: Öffnen-Effekt als Overlay-Fahrt — pixelgenau, responsive, kein Überschießen */
.tile.fly{top:0!important;left:0!important;width:100vw!important;height:100vh!important;
  --clip:polygon(0 0,100% 0,100% 100%,0 100%);
  transition:top 1.4s cubic-bezier(.6,0,.18,1),left 1.4s cubic-bezier(.6,0,.18,1),width 1.4s cubic-bezier(.6,0,.18,1),height 1.4s cubic-bezier(.6,0,.18,1),clip-path 1.4s cubic-bezier(.6,0,.18,1)!important}
/* V15.14: Unterseiten wirklich GLATT — Rechteck + keine durchblitzenden Nachbar-Schrägen.
   Gilt nur auf echten Routen (routeIndex >= 0), die Landing-Fahrt bleibt unberührt. */
body:not([data-route-index="-1"]) .tile.active{--clip:polygon(0 0,100% 0,100% 100%,0 100%)}
body:not([data-route-index="-1"]) .start.expanded .tile:not(.active){display:none}

/* ===== V16 (Runde 2 Karsten 15.07.): Pep · Bullets · Parallax · Reveal-Staffelung ===== */
/* R2-10.2/10.3: Hero-Pep — Akzentwort in H1, Pillen-Keywords in Sektionsfarbe */
.content[data-sec="c"] .sh1 .acc{color:var(--yellow)}
.content[data-sec="c"] .proofchips b{color:var(--yellow)}
.content[data-sec="c"] .proofchips span{border-color:rgba(255,204,51,.45)}
/* Transfer Gelb→Grün: Pillen-Keywords in Sektionsfarbe.
   B3 (Karsten): KEIN aufgehelltes Blau auf Schwarz — Blau-Pillen bleiben Weiß-bold, Brand-Blau nur auf hellen Flächen. */
.content[data-sec="d"] .proofchips b{color:#fff}
.content[data-sec="e"] .proofchips b{color:var(--green)}
.content[data-sec="e"] .proofchips span{border-color:rgba(76,212,148,.45)}
/* R2-14.1: Parallelogramm-Bullets in gelben Mehrwerte-Kacheln (Kontrast: Ink; ruhig, ohne Trennlinien) */
.dpanel .klist{margin-top:6px;gap:0}
.dpanel .klist span{font:600 1.02rem/1.5 var(--body);color:#101112;border-bottom:none;padding:7px 0 7px 26px}
.dpanel .klist span::before{background:#101112;top:50%;margin-top:-5px;width:11px;height:11px;transform:skew(-12deg)}
/* R2-14.2: Leistungskatalog als Parallelogramm-Raster (auf Schwarz: gelbe Bullets) */
.dgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:4px 44px;margin-top:14px;text-align:left}
.dgrid span{position:relative;padding:10px 0 10px 26px;font:700 1.08rem/1.5 Poppins,Arial,sans-serif;color:#fff;border-bottom:1px solid rgba(255,255,255,.14)}
.dgrid span:nth-last-child(-n+2){border-bottom:none}
.dgrid span::before{content:"";position:absolute;left:0;top:17px;width:12px;height:12px;background:var(--yellow);transform:skew(-12deg)}
@media(max-width:820px){.dgrid{grid-template-columns:1fr}.dgrid span:nth-last-child(2){border-bottom:1px solid rgba(255,255,255,.14)}}
/* R2-12.3: Bild füllt Split-Spalte (keine tote Fläche) */
.win.two .media.fill{align-self:stretch}
.media.fill img{width:100%;height:100%;min-height:320px;object-fit:cover}
/* R2-G.3: Parallax (transform-basiert; js/app.js steuert --par) */
.media img,.shero>img{will-change:transform}
.media.fill img,.win.two .media img{transform:translateY(var(--par,0)) scale(1.10)}
.shero>img{transform:translateY(var(--parh,0)) scale(1.06)}
@media(prefers-reduced-motion:reduce){.media.fill img,.win.two .media img,.shero>img{transform:none}}
/* R2-G.2: Reveal-Staffelung innerhalb von Grids (js setzt --rvd) */
.rv{transition-delay:var(--rvd,0s)}
/* R2-12: Agent-Klammer-Schluss hervorgehoben (Karsten: bold in Gelb) */
.content[data-sec="c"] .agclose{font-weight:700;color:var(--yellow);font-size:1.12rem}
.content[data-sec="c"] .agclose b{color:var(--yellow)}
/* R2-17.2 (Runde 4): CTA UNTER der Grafik-Kachel (außerhalb) */
.mediacol{display:flex;flex-direction:column;align-items:center;gap:20px}
.mediacol .media{width:100%}

/* B1: BILD-SLOTS — sichtbare Flächen mit Motiv-Beschreibung (Interim, bis echtes Asset/Briefing vorliegt) */
.imgslot{position:relative;border-radius:16px;min-height:360px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;padding:36px;border:1.5px dashed rgba(255,255,255,.32);background:repeating-linear-gradient(-45deg,rgba(255,255,255,.05) 0 16px,transparent 16px 32px);color:#fff}
.imgslot .slotlbl{font:800 .68rem Poppins,Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;border:1.5px solid currentColor;border-radius:999px;padding:6px 14px;opacity:.85}
.imgslot .slotdesc{font:600 1.02rem/1.6 var(--body);max-width:56ch;opacity:.88}
.imgslot .slotspec{font:700 .7rem var(--body);letter-spacing:.09em;text-transform:uppercase;opacity:.55}
.sblock.white .imgslot,.sblock.ybg .imgslot,.sblock.gbg .imgslot{border-color:rgba(0,0,0,.32);background:repeating-linear-gradient(-45deg,rgba(0,0,0,.05) 0 16px,transparent 16px 32px);color:#101112}
.imgslot.band{margin-top:38px}

/* ===== V17 (Grün-Runde GR1–GR17 + Formen-Grammatik, Karsten 15.07. abends) ===== */
/* GG-FORM: weiches Jerry-Parallelogramm — Radien für alle Mini-Skews */
.dgrid span::before{border-radius:3px}
.dpanel .klist span::before{border-radius:2.5px}
/* GR1: Statements im Typ-B-Kopf dürfen breiter; Claim-Mark bricht nicht mittendrin */
.sblock .win>p.km-big{max-width:920px}
@media(min-width:760px){.km-big .mark{white-space:nowrap}}
/* GR4: kompakte Prozess-Kette (#socialengine) */
.vc img{height:74px}
.vchain{gap:6px}
.vchain>.vc{padding:10px 14px 8px}
.vchain>.vc-arr{height:22px}
/* GR7/GR8: Beweis in zwei erzählenden Gruppen */
.bglbl{font:800 .72rem Poppins,Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--green);margin:36px 0 -20px;text-align:left}
.bento.b2col{grid-template-columns:repeat(2,1fr)}
.bento.b3col{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.bento.b2col,.bento.b3col{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.bento.b2col,.bento.b3col{grid-template-columns:1fr}}
/* GR10: Abschluss-Statement aufs Statement-System */
.bclaim{font:800 clamp(1.3rem,2vw,1.7rem)/1.5 Poppins,Arial,sans-serif;color:#fff;text-align:center}
.bsub{font:600 .95rem/1.6 var(--body);opacity:.85;text-align:center;margin-top:10px}
/* GR12: Zahlen-Kacheln in Kräfte-Gruppen */
.factrow.grouped{display:flex;gap:30px;justify-content:center;flex-wrap:wrap;margin-top:30px}
.fgroup{display:flex;flex-direction:column;gap:9px;align-items:center}
.fgroup .frow{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.fglbl{font:800 .66rem Poppins,Arial,sans-serif;font-style:normal;letter-spacing:.13em;text-transform:uppercase;color:#101112;opacity:.75}
/* GR13: Produktnamen fließen im Satz — keine Artikel-Waisen */
.sstep p b{display:inline;font:inherit;font-weight:800}
/* GR15: Produkt-Render näher (Asset 1:1, nur Darstellung gezoomt) */
.media.prodpeek img{transform:translateY(var(--par,0)) scale(1.5);transform-origin:50% 42%}
/* GR16: Für-wen-Spalten bündig, egal wie die Intro umbricht */
@media(min-width:900px){.fwlead{min-height:3.2em}}
/* GR17: Garantie-Qualifier als sichtbarer Treppen-Fuß */
.tfoot{font:700 1.02rem/1.6 var(--body);text-align:center;margin-top:26px;opacity:.95}
.tfoot b{color:var(--green)}
/* GR14 (aus jerry-engine-Teaser adaptiert): Flywheel-Rückführungs-Schleife unter dem System-Flow */
.fd-return{position:relative;height:38px;margin:30px 12% 8px;border:2.2px solid #101112;border-top:none;border-radius:0 0 14px 14px}
.fd-return::before{content:"";position:absolute;left:-6px;top:-11px;width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:11px solid #101112}
.fd-return .rlabel{position:absolute;left:50%;bottom:-11px;transform:translateX(-50%);padding:0 14px;background:var(--green);font:700 13.5px Poppins,Arial,sans-serif;color:#101112;white-space:nowrap}
@media(max-width:980px){.fd-return{display:none}}
/* GR19a: Produktname prominent (System vs. Produkt-Ebene) */
.prodname{font:800 clamp(1.3rem,1.8vw,1.7rem)/1.2 Poppins,Arial,sans-serif;color:#101112;margin:2px 0 12px;letter-spacing:-.01em}
.prodname b{background:#101112;color:var(--green);border-radius:6px;padding:.04em .18em}
/* GR19b: Prozess-Kette flacher */
.vchain.straight .vc img{height:52px;margin-bottom:4px}
.vchain.straight>.vc{padding:8px 12px 6px}
.vchain.straight{gap:4px}
.vchain.straight>.vc-arr{height:16px}
.vc b{font-size:.92rem}
/* GR19c: Jerry-Engine-Kachel hervorheben (Piktogramm-Offset-Ästhetik, Kontrast-Regel-konform) */
.vchain.straight>.vc.eng{background:#fff;border:2.5px solid #101112;box-shadow:7px 7px 0 rgba(16,17,18,.22)}
.vchain.straight>.vc.eng b{font-weight:800}
/* G1: erstes generiertes Foto-Band (Variante C, Karsten 16.07.) */
.photoband{position:relative;border-radius:16px;overflow:hidden;margin-top:38px}
.photoband img{display:block;width:100%;height:auto}

/* KI-Kennzeichnung (EU AI Act Art. 50) — dezenter Marker an KI-generierten Bildern.
   Token-pur: Manrope · Ink-Fläche + weiss (kein Hellblau) · gerundet (Formen-Grammatik). Wortlaut faktisch, Counsel-vorläufig. */
.aimark{position:absolute;right:10px;bottom:10px;z-index:3;display:inline-flex;align-items:center;gap:6px;
  font-family:var(--body);font-weight:600;font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;
  color:#fff;background:rgba(10,10,10,.62);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);
  padding:5px 9px;border-radius:7px;border:1px solid rgba(255,255,255,.20);line-height:1;pointer-events:none}
.aimark::before{content:"";width:6px;height:6px;border-radius:50%;background:#4cd494}
@media(max-width:640px){.aimark{font-size:9.5px;padding:4px 7px;right:8px;bottom:8px}}

/* rs-edge — Tri-Color-Segment-Oberkante (Band-Grammatik „harte Segmente = Kante", 869e6r5h6).
   Trennt den weißen Trust-Abschnitt sauber vom angrenzenden dunklen/weißen Block. */
.rs-edge{border-top:6px solid transparent;border-image:linear-gradient(90deg,#ffcc33 0 33.3%,#002dff 33.3% 66.6%,#4cd494 66.6% 100%) 1}
/* Beweis-Runde-2 (16.07.): Kern-Message prominenter · Bento-Parallax-Drift */
.bcell.bwide.big{padding:34px 30px}
.bclaim{font:800 clamp(1.5rem,2.4vw,2.05rem)/1.5 Poppins,Arial,sans-serif}
.bento,.bglbl{transform:translateY(var(--pardrift,0));will-change:transform}
@media(prefers-reduced-motion:reduce){.bento,.bglbl{transform:none}}
/* System-Flow-Karten mit Icons (Vorbild jerry-engine-Illustration, 16.07.) —
   Icon oben rechts in der Ecke: spart Höhe, füllt die Leerfläche neben der Nummer */
.sstep .sicon{position:absolute;top:12px;right:12px;width:46px;height:46px;margin:0}
.sstep .secnum{position:relative;z-index:1}

/* ===== Grün-Feinschliff Runde 3 (Karsten 16.07. ~09:00) ===== */
/* Diagramm baut sich SCHRITT FÜR SCHRITT auf: Marke → Pfeil → Jerry Engine → Pfeil → Team → Pfeil → Outputs */
.vchain.rv.in>*{animation-duration:.55s}
.vchain.rv.in>*:nth-child(1){animation-delay:0s}
.vchain.rv.in>*:nth-child(2){animation-delay:.55s}
.vchain.rv.in>*:nth-child(3){animation-delay:1.1s}
.vchain.rv.in>*:nth-child(4){animation-delay:1.65s}
.vchain.rv.in>*:nth-child(5){animation-delay:2.2s}
.vchain.rv.in>*:nth-child(6){animation-delay:2.75s}
.vchain.rv.in>*:nth-child(7){animation-delay:3.3s}
/* Jerry-Engine-Kachel leicht grün gefüllt */
.vchain.straight>.vc.eng{background:#e2f6ec;border:2.5px solid #101112;box-shadow:7px 7px 0 rgba(16,17,18,.22)}
/* Impact-/Output-Kacheln setzen sich ab: Ink auf Grün (Kontrast-Matrix-konform) */
.vc-out .vc{background:#101112;border-color:#101112;color:#fff}
/* „Planbar statt Glückssache" größer, Ink statt Weiß auf Grün */
.sblock.gbg .km-edge{color:#101112;border-left-color:#101112;font-size:clamp(1.7rem,2.6vw,2.25rem)}
.wtxt p.km-edge{max-width:none}
/* Foto-Band flacher */
.photoband{max-height:430px}
.photoband img{width:100%;height:100%;max-height:430px;object-fit:cover}
/* „Mehr Budget denn je…" größer und in Grün */
.bclaim{font:800 clamp(1.6rem,2.6vw,2.2rem)/1.5 Poppins,Arial,sans-serif;color:var(--green)}
/* „Diesen Stack gibt es kein zweites Mal." in Weiß (Karsten-Direktive) */
.content[data-sec="e"] .sblock.gbg .win p.km-big{color:#fff}
/* Produkt-Render passt in die Kachel (Screen war größer als Kachel) */
.media.prodpeek{overflow:hidden;align-items:center}
.media.prodpeek img{transform:translateY(var(--par,0)) scale(1.16);transform-origin:50% 50%}
/* Engine-Icon im Knoten etwas größer (optische Parität zu den Nachbar-Icons) */
.vchain.straight>.vc.eng img{height:60px}
/* Beweis-Kernbotschaft DOMINANT: freistehend statt Kachel, XXL (Karsten 16.07.) */
.bcell.bwide.big{background:transparent;border:none;box-shadow:none;padding:26px 0 6px}
.bclaim{font:800 clamp(1.9rem,3vw,2.6rem)/1.5 Poppins,Arial,sans-serif;color:var(--green)}
/* Reihenfolge-Umbau 16.07.: #socialengine jetzt WEISS — Kacheln gray-05 (Kachel-Regel), Mark bleibt Ink/Weiß */
.vchain.straight>.vc{background:#f4f5f5;border-color:#101112}
.content[data-sec="e"] #socialengine .mark{background:var(--ink);color:#fff}
.content[data-sec="e"] .km-edge{font-size:clamp(1.7rem,2.6vw,2.25rem)}
.content[data-sec="e"] .sblock.white .km-edge,.content[data-sec="e"] .sblock.gbg .km-edge,.content[data-sec="e"] .sblock.ybg .km-edge{color:#101112;border-left-color:#101112}
.content[data-sec="e"] .sblock:not(.white):not(.gbg):not(.ybg) .km-edge{color:#fff;border-left-color:var(--green)}

/* Referenzen-Block Gelb (Karsten 16.07.): personengebundener Track-Record, 5 Kategorien, ehrliche Klammer */
.refblock{max-width:1180px;margin:52px auto 0;text-align:left}
.refblock .dhead{text-align:center}
.refclaim{font:600 1.02rem/1.6 var(--body);color:#3a3e42;text-align:center;max-width:780px;margin:10px auto 26px}
.refrow{display:flex;gap:18px;align-items:baseline;border-top:1px solid rgba(0,0,0,.1);padding:14px 0}
.reflbl{font:800 .7rem Poppins,Arial,sans-serif;font-style:normal;letter-spacing:.12em;text-transform:uppercase;color:#6b7075;min-width:230px;flex-shrink:0}
.refchips{display:flex;flex-wrap:wrap;gap:8px}
.refchips span{border:1.5px solid rgba(0,0,0,.3);border-radius:999px;padding:6px 14px;font:600 .85rem var(--body);color:#101112}
.refcoop{font:800 clamp(1.1rem,1.6vw,1.35rem)/1.55 Poppins,Arial,sans-serif;color:#101112;text-align:center;margin:26px auto 0;max-width:780px;border-top:1px solid rgba(0,0,0,.1);padding-top:22px}
@media(max-width:820px){.refrow{flex-direction:column;gap:8px}.reflbl{min-width:0}}
/* Mandats-Leiste nach Hero (Zahlen-Beweis der Perspektiven; FIKTIV bis Karsten-Zählung) */
.mandate{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-bottom:16px}
.mnd{background:#141514;border:1px solid rgba(255,255,255,.09);border-radius:18px;padding:22px 18px 18px;text-align:left;transition:transform .25s}
.mnd:hover{transform:translateY(-4px)}
.mnd b{display:block;font:800 2.3rem/1.1 Poppins,Arial,sans-serif;color:#fff}
.mnd .mlbl{display:block;font:700 .7rem/1.35 var(--body);letter-spacing:.06em;text-transform:uppercase;color:#ffcc33;margin-top:6px}
.mnd .mex{display:block;font:700 .76rem/1.45 var(--body);font-style:normal;color:rgba(255,255,255,.85);margin-top:8px;text-transform:uppercase;letter-spacing:.04em}
.mnd .msvc{display:block;font:600 .7rem/1.4 var(--body);font-style:normal;color:rgba(255,255,255,.45);margin-top:5px;text-transform:uppercase;letter-spacing:.04em}
@media(max-width:980px){.mandate{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.mandate{grid-template-columns:1fr}}
.mndclaim{font:600 .95rem/1.55 var(--body);color:#3a3e42;text-align:center;max-width:none;white-space:nowrap;margin:0 auto 40px}
@media(max-width:1100px){.mndclaim{white-space:normal;max-width:720px}}

/* ===== LANDING-DRAFT v2 (Karsten 16.07.): Vollhöhen-Felder · zentrales Master-Logo + Farbband über allen Feldern ===== */
.top{max-height:none;padding:20px 40px 12px}
.top h1{font-size:clamp(1rem,1.35vw,1.2rem);font-weight:700;letter-spacing:.03em;color:#e8eaec;max-width:none}
.top .pledge{margin-top:3px;font-size:.88rem;color:#9aa0a5}
.tiles{position:relative}
.brandover{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;pointer-events:none}
.brandover img{width:min(44vw,620px);filter:drop-shadow(0 10px 44px rgba(0,0,0,.5))}
.brandover .mband2{width:min(28vw,400px);height:10px;border-radius:5px;background:var(--band)}
.start.expanded .brandover{opacity:0;transition:opacity .35s}
/* Sparten-Wortmarken in den Feldern weichen dem zentralen Master (Label oben + Tagline unten tragen die Sparte) */
body[data-route-index="-1"] .tile .brand,body:not([data-route-index]) .tile .brand{display:none}
/* Info-Audit 16.07.: Abschluss-Impact-Kachel volle Breite unter dem 4er-How-Raster */
.igrid .ic.acht.wide{grid-column:1/-1;flex-direction:row;justify-content:center;align-items:center;gap:26px;padding:22px 16px}
.igrid .ic.acht.wide .ict{display:flex;align-items:center;gap:26px;margin:0}
.igrid .ic.acht.wide .ict br{display:none}
.igrid .ic.acht.wide .achtlogo{margin:0}
.igrid .ic.acht.wide img.impicon{margin:0}
.igrid .ic.acht.wide .ict{white-space:nowrap}

/* B7 (16.07.): OS-Teaser vom schmalen "Würfel" zum breiten blauen Skew-Highlight-Panel (Parallelogramm-Kachel wie Gelb-dpanel).
   Formen-Grammatik: dies ist die EINE Skew-Geste der Sektion; gerundet. .oswrap = Reveal-Hülle (Panel-Transform nie in .rv!) */
.oswrap{padding:34px 0 6px}
.ospanel{position:relative;background:var(--blue);border-radius:14px;transform:skewX(-6deg);margin:0 34px;padding:38px 46px 34px}
.ospanel .ospin{transform:skewX(6deg)}
.ospanel .eyebrow{color:#cfd8ff}
.ospanel h2{color:#fff;margin-top:2px;padding-right:150px;line-height:1.42}
.ospanel .mark{background:#fff;color:var(--blue)}
.ospanel p{color:#eef1ff;max-width:900px;margin-bottom:4px}
.ospanel p b{color:#fff}
.ospanel .cta{background:#fff;color:var(--blue);margin-top:20px;display:inline-block}
.ospanel .ospi{position:absolute;top:-30px;right:40px;width:104px;height:104px;padding:16px;background:#fff;border-radius:16px;box-shadow:0 10px 26px rgba(0,0,0,.16);transform:skewX(6deg)}
@media(max-width:720px){.oswrap{padding-top:44px}.ospanel{transform:none;margin:0;padding:30px 24px 26px}.ospanel .ospin{transform:none}.ospanel .ospi{transform:none;top:-38px;right:18px;width:84px;height:84px;padding:12px}.ospanel h2{padding-right:0}}

/* B8 (16.07.): Impact-Zeile in Show-Case-Kacheln (Zulieferung Karsten 16.07. — reale Ergebnisse je Case) */
.casecap .cimp{display:block;font:600 .76rem/1.45 var(--body);font-style:normal;color:#fff;margin-top:10px;padding-top:9px;border-top:1px solid rgba(255,255,255,.28)}
.casecap .cimp b{font-weight:800}
/* Foto-Caption unter photoband (BMW-Case-Einordnung) */
.pbcap{font:500 .82rem/1.5 var(--body);color:#8a8f98;margin:10px 4px 0;text-align:center}
.pbcap b{color:#c9cdd4;font-weight:700}
/* B9 (16.07.): BMW-Original-Foto — Grade NUR per CSS (Datei bleibt unangetastet, Karsten: nie manipulieren); zieht Richtung gedämpfte Bildsprache Gelb/Grün */
.photoband.graded img{filter:saturate(.8) contrast(1.04) brightness(.97)}
/* B10 (16.07.): Flow-Umbau Blau — Warum-Sektion dunkel, BI-Diagramm behält helle Box */
.content[data-sec="d"] .sblock:not(.white) .media.diag{background:#f4f5f5;border-color:rgba(0,0,0,.15)}
/* B10b: Warum-Diagramm vertikal zentrieren (leere Dunkelfläche vermeiden) */
#warumd .media.diag{align-self:center}

/* B11 (16.07.): Impact deutlich sichtbar — weißer Impact-Chip mit Jerry-Impact-Icon (Karten) + Lightbox-Impact-Zeile */
.casecap .cimp{display:block;position:relative;background:#fff;color:var(--ink-soft);border-radius:9px;padding:10px 12px 10px 46px;margin-top:12px;border-top:none;font:600 .78rem/1.45 var(--body);font-style:normal}
.casecap .cimp::before{content:"";position:absolute;left:12px;top:10px;width:24px;height:24px;background:url(../assets/icons/jerry-impact_blau.svg?v=2) center/contain no-repeat}
.casecap .cimp b{color:var(--blue);font-weight:800}
.lbtxt .lbimp{display:block;position:relative;background:#eef1ff;border-radius:10px;padding:12px 14px 12px 52px;margin-top:14px;font:600 .9rem/1.5 var(--body);color:var(--ink-soft)}
.lbtxt .lbimp::before{content:"";position:absolute;left:14px;top:12px;width:26px;height:26px;background:url(../assets/icons/jerry-impact_blau.svg?v=2) center/contain no-repeat}
.lbtxt .lbimp b{color:var(--blue);font-weight:800}

/* B12 (16.07.): Diagramm-Upgrade Blau — Impact-Icon + Funken im BI-Diagramm; OS-Diagramm mit Agenten-Sequenz + Human in the Loop.
   ⚠ SVG: Positions-translate NUR als Attribut auf WRAPPER-g (CSS-Animation auf innerem g, sonst löscht transform die Position). */
.media.diag.rv .bisparks,.media.diag.rv .bilines{opacity:0}
.media.diag.rv.in .bisparks{animation:sparkpop .45s 1.55s cubic-bezier(.2,1.6,.4,1) both;transform-box:fill-box;transform-origin:0% 100%}
.media.diag.rv.in .bilines{animation:bilinesin .4s 1.5s ease both}
@keyframes sparkpop{0%{opacity:0;transform:scale(.3) rotate(-12deg)}100%{opacity:1;transform:none}}
@keyframes bilinesin{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:none}}
.osdiag.rv .os-base,.osdiag.rv .os-client,.osdiag.rv .os-arr,.osdiag.rv .os-agent,.osdiag.rv .os-human,.osdiag.rv .os-work,.osdiag.rv .os-hline,.osdiag.rv .os-lbl,.osdiag.rv .os-lbl2{opacity:0}
.osdiag.rv.in .os-base{animation:osup .55s ease both}
.osdiag.rv.in .os-client{animation:osup .55s .35s ease both}
.osdiag.rv.in .os-agent{transform-box:fill-box;transform-origin:center;animation:agentpop .5s cubic-bezier(.2,1.5,.4,1) both,agentbob 3.2s 2.2s ease-in-out infinite}
.osdiag.rv.in .a1{animation-delay:.8s,2.2s}
.osdiag.rv.in .a2{animation-delay:.95s,2.6s}
.osdiag.rv.in .a3{animation-delay:1.1s,3s}
.osdiag.rv.in .os-lbl{animation:osfade .4s 1.15s ease both}
.osdiag.rv.in .os-human{transform-box:fill-box;transform-origin:center;animation:agentpop .5s 1.3s cubic-bezier(.2,1.5,.4,1) both}
.osdiag.rv.in .os-lbl2{animation:osfade .4s 1.5s ease both}
.osdiag.rv.in .os-work{animation:osfade .35s 1.5s ease both}
.osdiag.rv.in .os-hline{animation:osfade .35s 1.6s ease both}
.osdiag.rv.in .os-work line,.osdiag.rv.in .os-hline line{animation:osmarch 1.1s 1.6s linear infinite}
.osdiag.rv.in .os-arr{animation:osfade .5s 1.9s ease both}
@keyframes osup{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes agentpop{0%{opacity:0;transform:scale(.3)}100%{opacity:1;transform:none}}
@keyframes agentbob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes osfade{from{opacity:0}to{opacity:1}}
@keyframes osmarch{to{stroke-dashoffset:-24}}

/* B13 (16.07.): Hero-Pillen Blau — blaue Kernbegriffe + blauer Rahmen (Ton aus dem EINEN Blau-Token gemischt, lesbar auf Schwarz) */
.content[data-sec="d"] .proofchips b{color:color-mix(in srgb, var(--blue) 42%, #fff)}
.content[data-sec="d"] .proofchips span{border-color:color-mix(in srgb, var(--blue) 55%, rgba(255,255,255,.3))}

/* ===== V17-L (Ansage Karsten 16.07.): Landing — Kacheln volle Screen-Höhe, gerundete Parallelogramme (JS-path-Clip),
   Kopf-Inhalte liegen ÜBER den Kacheln (wie wirsindjerry.de) ===== */
body[data-route-index="-1"] .tiles{height:100vh;min-height:100vh;margin:0}
body[data-route-index="-1"] .ltop{position:absolute;top:0;left:0;right:0;z-index:6}
body[data-route-index="-1"] .top{position:absolute;top:16px;left:50%;transform:translateX(-50%);z-index:6;padding:0;pointer-events:none;max-height:none;overflow:visible}
body[data-route-index="-1"] .start.expanded .top{opacity:0}
/* V17-L: Overlay-Entzerrung auf der Vollhöhen-Landing — Labels unter den Kicker, Badge unter die Sprachwahl */
body[data-route-index="-1"] .label{top:92px}
body[data-route-index="-1"] .tilebadge{top:92px;right:20px}

/* ===== V17-L2 (Karsten 16.07.): Landing-Aufbau über den Kacheln =====
   „hallo, wir sind" → Master-Lockup (Verlaufs-Band IM Logo, dicker, zwischen j und y) → Claim.
   Hover: Wortmarken-Zone über der Kachel färbt sich in Kachelfarbe (Mask + JS-Zonen-Clip);
   Kachelbild wechselt s/w → farbig (kolorierte Hero-Motive, reine CSS-Filter — keine neuen Assets). */
body[data-route-index="-1"] .top{display:none}
.brandover .hallo{font:600 clamp(.92rem,1.5vw,1.2rem)/1 var(--body);letter-spacing:.18em;color:#e8eaec}
.brandover .wm{position:relative;width:min(42vw,600px)}
.brandover .wm>img{width:100%;display:block;filter:drop-shadow(0 10px 44px rgba(0,0,0,.5))}
.brandover .wmc{position:absolute;left:0;top:0;width:100%;height:80.6%;opacity:0;transition:opacity .35s;
  -webkit-mask:url(../assets/logos/jerry_wortmarke_white.svg) 0 0/100% 100% no-repeat;mask:url(../assets/logos/jerry_wortmarke_white.svg) 0 0/100% 100% no-repeat}
.brandover .wmc.c1{background:var(--yellow)}
.brandover .wmc.c2{background:var(--blue)}
.brandover .wmc.c3{background:var(--green)}
.tiles:has(.t1:hover) .brandover .wmc.c1{opacity:1}
.tiles:has(.t2:hover) .brandover .wmc.c2{opacity:1}
.tiles:has(.t3:hover) .brandover .wmc.c3{opacity:1}
.brandover .lclaim{font:700 clamp(1.15rem,2vw,1.7rem)/1.2 var(--disp);color:#fff;text-shadow:0 4px 24px rgba(0,0,0,.5)}
body[data-route-index="-1"] .tagline{font:700 1.05rem var(--body)}
body[data-route-index="-1"] .t1 .tagline{color:var(--yellow)}
body[data-route-index="-1"] .t2 .tagline{color:color-mix(in srgb,var(--blue) 55%,#fff)}
body[data-route-index="-1"] .t3 .tagline{color:var(--green)}
body[data-route-index="-1"] .fw .photo{filter:grayscale(1);transition:filter .5s ease}
body[data-route-index="-1"] .tile:hover .fw .photo{filter:none}
/* V17-L2: Logo bleibt IMMER präsent — über dem Hover-Pop der Kacheln (z6) */
body[data-route-index="-1"] .brandover{z-index:8}

/* V17-L3 (Karsten 17:06): hallo dick in Poppins · Labels raus · Taglines größer+sichtbar ·
   Farb-Hover in s/w-Belichtung · nichts mehr unter den Kacheln · Farbzonen randscharf (Maske = identisches Lockup-SVG) */
body[data-route-index="-1"] .label{display:none}
.brandover .hallo{font:800 clamp(1.25rem,2.1vw,1.8rem)/1 var(--disp);letter-spacing:.02em;color:#fff}
body[data-route-index="-1"] .tagline{font:800 clamp(1.15rem,1.7vw,1.5rem)/1.3 var(--disp);bottom:26px;padding:0 30px}
body[data-route-index="-1"] .fw .photo{filter:grayscale(1) brightness(.8) contrast(1.04)}
body[data-route-index="-1"] .tile:hover .fw .photo{filter:grayscale(0) brightness(.8) contrast(1.04)}
body[data-route-index="-1"] .fstrip,body[data-route-index="-1"] .refstrip,body[data-route-index="-1"] .lfoot{display:none}
.brandover .wmc{height:100%;-webkit-mask:url(../assets/logos/jerry_master_lockup_v2_dark.svg) 0 0/100% 100% no-repeat;mask:url(../assets/logos/jerry_master_lockup_v2_dark.svg) 0 0/100% 100% no-repeat}

/* V17-L4 (Karsten 17:18): kompaktes Lockup (Band DIREKT zwischen j und y → mehr Platz unten) · Claims höher ·
   Blau-Tagline dunkler · Hover etwas entsättigt (Bildsprache) · Responsive-Absicherung */
.brandover .wmc{-webkit-mask:url(../assets/logos/jerry_wortmarke_white.svg) 0 0/100% 100% no-repeat;mask:url(../assets/logos/jerry_wortmarke_white.svg) 0 0/100% 100% no-repeat}
body[data-route-index="-1"] .tagline{bottom:48px}
body[data-route-index="-1"] .t2 .tagline{color:color-mix(in srgb,var(--blue) 72%,#fff)}
body[data-route-index="-1"] .tile:hover .fw .photo{filter:grayscale(0) saturate(.85) brightness(.8) contrast(1.04)}
@media (max-height:780px){.brandover .wm{width:min(36vw,500px)}.brandover{gap:18px}.brandover .lclaim{font-size:clamp(1.05rem,1.7vw,1.4rem)}}
@media (max-height:620px){.brandover .wm{width:min(30vw,400px)}.brandover .hallo{font-size:1.1rem}}
/* V17-L4: Stapel-Layout (≤900px) — Brandover als eigener Block ÜBER den Kacheln statt Overlay (Kollision Claim/Taglines) */
@media (max-width:900px){
  body[data-route-index="-1"] .tiles{height:auto;min-height:100vh}
  body[data-route-index="-1"] .brandover{position:static;inset:auto;padding:64px 16px 26px;gap:16px}
  body[data-route-index="-1"] .brandover .wm{width:min(72vw,420px)}
  body[data-route-index="-1"] .brandover .wmc{display:none}
  body[data-route-index="-1"] .tile{min-height:46vh}
  body[data-route-index="-1"] .tagline{bottom:20px}
  body[data-route-index="-1"] .fw .photo{filter:grayscale(0) saturate(.85) brightness(.8) contrast(1.04)}
}
.brandover .lclaim,.brandover .hallo{text-align:center}
/* V17-L5 (Karsten 17:30, mobil): Felder flacher · Motive zentriert · Wordings höher (liefen fast aus dem Fenster) */
@media (max-width:900px){
  body[data-route-index="-1"] .tile{min-height:31vh}
  body[data-route-index="-1"] .tagline{bottom:34px}
  body[data-route-index="-1"] .t1 .fw .photo{object-position:50% 32%}
  body[data-route-index="-1"] .t2 .fw .photo{object-position:66% 45%}
  body[data-route-index="-1"] .t3 .fw .photo{object-position:50% 30%}
}

/* V17-L6 (Karsten 17:31): weißer Rand beim Einfärben ENDGÜLTIG weg — keine Farb-Ebene ÜBER weißen Lettern mehr:
   die Wortmarke besteht aus 3 Zonen-Layern (Maske=Wortmarke), die per Hover selbst von Weiß auf Kachelfarbe wechseln.
   Band = exakt positioniertes CSS-Element (Lockup-Koordinaten 21.24/53.89/63.14/9.84 von 118.44×63.70). */
.brandover .wm{aspect-ratio:118.44/63.70;filter:drop-shadow(0 10px 44px rgba(0,0,0,.5))}
.brandover .wmz{position:absolute;inset:0;background:#fff;transition:background-color .35s;
  -webkit-mask:url(../assets/logos/jerry_wortmarke_white.svg) 0 0/100% 100% no-repeat;mask:url(../assets/logos/jerry_wortmarke_white.svg) 0 0/100% 100% no-repeat}
.brandover .wband{position:absolute;left:17.93%;top:84.6%;width:53.31%;height:15.45%;border-radius:999px;
  background:linear-gradient(90deg,#ffcc33 0%,#ffcc33 11%,#002dff 51%,#4cd494 89%,#4cd494 100%)}
.tiles:has(.t1:hover) .brandover .wmz.z1{background:var(--yellow)}
.tiles:has(.t2:hover) .brandover .wmz.z2{background:var(--blue)}
.tiles:has(.t3:hover) .brandover .wmz.z3{background:var(--green)}
@media (max-width:900px){body[data-route-index="-1"] .brandover .wmz{clip-path:none!important}}
/* V17-L7 (Karsten 17:35): Kacheln nicht randlos — Luft rundum, damit der Hover-Pop sichtbar wächst und der Rahmen im Sichtfeld bleibt */
body[data-route-index="-1"] .tiles{padding:22px 26px;box-sizing:border-box}
@media (max-width:900px){body[data-route-index="-1"] .tiles{padding:0 14px 14px}}
/* V17-L8 (Karsten 17:41): SoMe-Icons frei vom Rahmen · Impressum/Datenschutz ab Start sichtbar · Claim mit mehr Abstand zum Logo */
body[data-route-index="-1"] .ltop{padding:36px 46px 0}
.brandover .lclaim{margin-top:26px}
.legalmini{display:none}
body[data-route-index="-1"] .legalmini{position:absolute;bottom:3px;left:0;right:0;z-index:7;display:flex;justify-content:center;gap:22px;font:600 .72rem var(--body)}
body[data-route-index="-1"] .legalmini a{color:#9aa0a6;text-decoration:none}
body[data-route-index="-1"] .legalmini a:hover{color:#fff}
@media (max-width:900px){body[data-route-index="-1"] .ltop{padding:16px 18px 0}body[data-route-index="-1"] .legalmini{position:static;padding:12px 0 16px}}
/* V17-L9 (Karsten 17:45): Tagline Blau = DAS Token-Blau #002dff, keine Mischung */
body[data-route-index="-1"] .t2 .tagline{color:var(--blue)}
/* V17-L10 (Karsten 20:59): Kursiv-Zusatz unterm Claim — Agent(en)-Doppeldeutigkeit */
.brandover .lclaim2{margin-top:10px;font:600 italic clamp(.95rem,1.4vw,1.25rem)/1.2 var(--disp);color:#cfd3d8;letter-spacing:.04em;text-align:center}
.brandover .lclaim2 em{color:#e8eaec}
/* V18 (Karsten 21:35): Impact-Balken Gelb — Satz ohne Lücke, größer; consult-Logo raus (Icon trägt die Marke) */
.igrid .ic.acht.wide .ict{display:block;font-size:1.35rem;white-space:nowrap}

/* V18-2 (Karsten 21:56): Landing Boxer weiter links · Hover = GANZES Logo in Sektionsfarbe · Kachel-Versatz-Regel */
body[data-route-index="-1"] .t1 .fw .photo{object-position:26% 50%}
.tiles:has(.t1:hover) .brandover .wmz{background:var(--yellow)}
.tiles:has(.t2:hover) .brandover .wmz{background:var(--blue)}
.tiles:has(.t3:hover) .brandover .wmz{background:var(--green)}
/* Kachel-Versatz (Formen-Grammatik-Ergänzung): Icon-Kacheln sichtbar versetzt statt oberkantenbündig (wie Show-Cases) */
@media(min-width:900px){.igrid .ic:nth-child(even){margin-top:18px}.igrid{margin-bottom:18px}}
@media (max-width:900px){body[data-route-index="-1"] .legalmini{order:99}}

/* V18-3 (Karsten 22:14): echtes Impact-Logo im BI-Diagramm + coolere Sequenz · Boxer-Ausschnitt Schiri+Arme ·
   Band nur zum weißen Logo (Hover blendet es aus) · Kacheln individuell versetzt */
.media.diag.rv .biicon2{opacity:0}
.media.diag.rv.in .biicon2{transform-box:fill-box;transform-origin:center;animation:impopin .6s 1.5s cubic-bezier(.2,1.6,.4,1) both,impfloat 3.6s 3s ease-in-out infinite}
.media.diag.rv.in .biimp{animation:birise .55s 1.15s cubic-bezier(.2,1.4,.4,1) both,impfloat 4.2s 2.4s ease-in-out infinite}
.media.diag.rv.in .bimeet{animation:bimerge .5s .75s ease both,meetpulse 2.8s 2.6s ease-in-out infinite}
@keyframes impopin{0%{opacity:0;transform:scale(.2) rotate(-16deg)}70%{opacity:1;transform:scale(1.08) rotate(3deg)}100%{opacity:1;transform:none}}
@keyframes impfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes meetpulse{0%,100%{transform:none;opacity:1}50%{transform:scaleY(1.05);opacity:.92}}
body[data-route-index="-1"] .t1 .fw .photo{object-position:58% 38%}
.brandover .wband{transition:opacity .3s}
.tiles:has(.tile:hover) .brandover .wband{opacity:0}
@media(min-width:900px){
  .igrid .ic:nth-child(4n+1){margin-top:0}
  .igrid .ic:nth-child(4n+2){margin-top:22px}
  .igrid .ic:nth-child(4n+3){margin-top:8px}
  .igrid .ic:nth-child(4n){margin-top:28px}
  .igrid{margin-bottom:28px}
}

/* V18-4 (Karsten 22:22): NEUE Impact-Dramaturgie — Kollision → Schockwelle → Icon schießt heraus → Kachel entfaltet sich */
.media.diag.rv .bishock{opacity:0}
.media.diag.rv.in .bi1{animation:bislidel .7s cubic-bezier(.3,1.2,.4,1) both}
.media.diag.rv.in .bi2{animation:bislider .7s cubic-bezier(.3,1.2,.4,1) both}
.media.diag.rv.in .bimeet{transform-box:fill-box;transform-origin:center;animation:meetflash .35s .65s cubic-bezier(.2,1.8,.4,1) both,meetpulse 3s 3.2s ease-in-out infinite}
.media.diag.rv.in .bishock{transform-box:fill-box;transform-origin:center;animation:bishockw .7s .78s ease-out both}
.media.diag.rv.in .birays{animation:raypulse .5s .85s ease both}
.media.diag.rv.in .biicon2{transform-box:fill-box;transform-origin:center;animation:impfly .85s 1.05s cubic-bezier(.3,1.5,.5,1) both,impfloat 3.6s 3.4s ease-in-out infinite}
.media.diag.rv.in .biimp{transform-box:fill-box;transform-origin:15% 100%;animation:biunfold .5s 1.7s cubic-bezier(.2,1.4,.4,1) both,impfloat 4.2s 3.6s ease-in-out infinite}
.media.diag.rv.in .bisparks{animation:sparkpop .45s 2.1s cubic-bezier(.2,1.6,.4,1) both}
@keyframes meetflash{0%{opacity:0;transform:scaleY(.15)}60%{opacity:1;transform:scaleY(1.18)}100%{opacity:1;transform:none}}
@keyframes bishockw{0%{opacity:.85;transform:scale(.15)}100%{opacity:0;transform:scale(3.4)}}
@keyframes impfly{0%{opacity:0;transform:translate(215px,185px) scale(.12) rotate(-45deg)}55%{opacity:1;transform:translate(-16px,-12px) scale(1.14) rotate(7deg)}100%{opacity:1;transform:none}}
@keyframes biunfold{0%{opacity:0;transform:scaleX(.05)}100%{opacity:1;transform:none}}

/* Landing: Hover = Sparten-Logo komplett (Farbe + Wort statt Band) · Badge-Position · Claims größer */
.brandover .wword{position:absolute;left:17.93%;top:84.6%;width:53.31%;height:15.45%;display:flex;align-items:center;justify-content:center;font:700 clamp(1.2rem,2.1vw,1.9rem)/1 var(--disp);letter-spacing:.3em;padding-left:.3em;text-transform:lowercase;opacity:0;transition:opacity .3s}
.brandover .wword.w1{color:var(--yellow)}
.brandover .wword.w2{color:var(--blue)}
.brandover .wword.w3{color:var(--green)}
.tiles:has(.t1:hover) .brandover .wword.w1{opacity:1}
.tiles:has(.t2:hover) .brandover .wword.w2{opacity:1}
.tiles:has(.t3:hover) .brandover .wword.w3{opacity:1}
body[data-route-index="-1"] .tilebadge{top:66px;right:28px}
.brandover .lclaim{font-size:clamp(1.35rem,2.4vw,2.05rem)}
.brandover .lclaim2{font-size:clamp(1.1rem,1.7vw,1.5rem)}
/* V18-5 (Karsten 22:34): Hover-Wording logo-konform (Maße aus jerry_consult_portrait: Wortzone=Bandzone,
   Versalhöhe ~12% der Logo-Höhe, weite Sperrung) · E-Sportler mittig · Blau-Kacheln wilder */
.brandover .wword{font:700 clamp(1.6rem,2.9vw,2.55rem)/1 var(--disp);letter-spacing:.42em;padding-left:.42em;top:83.5%;height:16.5%}
body[data-route-index="-1"] .t2 .fw .photo{object-position:70% 50%}
@media(min-width:900px){
  .content[data-sec="d"] .igrid .ic:nth-child(6n+1){margin-top:0}
  .content[data-sec="d"] .igrid .ic:nth-child(6n+2){margin-top:34px}
  .content[data-sec="d"] .igrid .ic:nth-child(6n+3){margin-top:12px}
  .content[data-sec="d"] .igrid .ic:nth-child(6n+4){margin-top:46px}
  .content[data-sec="d"] .igrid .ic:nth-child(6n+5){margin-top:6px}
  .content[data-sec="d"] .igrid .ic:nth-child(6n){margin-top:26px}
  .content[data-sec="d"] .igrid{margin-bottom:46px}
}
body[data-route-index="-1"] .t2 .fw .photo{object-position:82% 50%}

/* V19 (Karsten 17.07. 06:19): Lösungs-Kacheln WEISS + gleich groß · Cases gleich groß · Sprache verankert ·
   Hover-Wording füllt die Band-Zone (Blocksatz wie in den echten Lockups → alle drei exakt gleiche Größe/Dicke) */
.content[data-sec="d"] #leistungen .igrid .ic{background:#fff;color:var(--ink-soft)}
.content[data-sec="d"] #leistungen .igrid .ic .ict{color:#101112}
.content[data-sec="d"] #leistungen .igrid{grid-auto-rows:1fr}
.casegrid{grid-auto-rows:1fr}
body[data-route-index="-1"] .ltop{align-items:center}
body[data-route-index="-1"] .ltop .lang{display:flex;align-items:center;height:34px;padding:0 14px;border:1.5px solid rgba(255,255,255,.25);border-radius:999px}
.brandover .wword{display:block;height:auto;top:85.2%;letter-spacing:normal;padding:0;text-align-last:justify;-moz-text-align-last:justify;line-height:1}
/* V19-2: Versatz via top statt margin — Kacheln bleiben EXAKT gleich groß (Raster streckt alle auf Zeilenhöhe) */
@media(min-width:900px){
  .igrid .ic,.casegrid .case{position:relative}
  .igrid .ic:nth-child(4n+2),.igrid .ic:nth-child(4n+3),.igrid .ic:nth-child(4n),
  .content[data-sec="d"] .igrid .ic:nth-child(6n+2),.content[data-sec="d"] .igrid .ic:nth-child(6n+3),
  .content[data-sec="d"] .igrid .ic:nth-child(6n+4),.content[data-sec="d"] .igrid .ic:nth-child(6n+5),
  .content[data-sec="d"] .igrid .ic:nth-child(6n),
  .casegrid .case:nth-child(even){margin-top:0}
  .igrid .ic:nth-child(4n+2){top:22px}
  .igrid .ic:nth-child(4n+3){top:8px}
  .igrid .ic:nth-child(4n){top:28px}
  .content[data-sec="d"] .igrid .ic:nth-child(6n+1){top:0}
  .content[data-sec="d"] .igrid .ic:nth-child(6n+2){top:34px}
  .content[data-sec="d"] .igrid .ic:nth-child(6n+3){top:12px}
  .content[data-sec="d"] .igrid .ic:nth-child(6n+4){top:46px}
  .content[data-sec="d"] .igrid .ic:nth-child(6n+5){top:6px}
  .content[data-sec="d"] .igrid .ic:nth-child(6n){top:26px}
  .casegrid .case:nth-child(even){top:18px}
  .igrid{grid-auto-rows:1fr;margin-bottom:52px}
  .casegrid{grid-auto-rows:1fr;padding-bottom:20px}
}
/* V19-3: gleich groß braucht Stretch — align-items:start (Z.660) galt noch */
@media(min-width:900px){.igrid{align-items:stretch}}
/* V19-4: Spalten-Kollision (34→6) — Zeile-2-Offsets so, dass jede Spalte Luft behält */
@media(min-width:900px){.content[data-sec="d"] .igrid .ic:nth-child(6n+5){top:40px}}

/* ===== V19-5 (17.07., Karsten-Prüfauftrag): Landing-Hover = ECHTES Sparten-Lockup =====
   Befund: Die Wörter der echten Lockups sind unterschiedlich breit, in der vektorisierten Logo-Schrift
   und größer als jeder Poppins-Nachbau → Nachbau (wmz/wword/wband) ersetzt durch die freigegebenen SVGs.
   Alle vier Lockups teilen identische jerry-Pfade + Breite 118.44 → oben ausgerichtet = deckungsgleich. */
.brandover .wm>img{position:absolute;top:0;left:0;width:100%;height:auto;display:block;filter:drop-shadow(0 10px 44px rgba(0,0,0,.5))}
.brandover .wm .wmaster{position:relative;opacity:1;transition:opacity .3s}
.brandover .wm .wsp{opacity:0;transition:opacity .3s;pointer-events:none}
.tiles:has(.t1:hover) .brandover .wmaster,.tiles:has(.t2:hover) .brandover .wmaster,.tiles:has(.t3:hover) .brandover .wmaster{opacity:0}
.tiles:has(.t1:hover) .brandover .wsp.s1{opacity:1}
.tiles:has(.t2:hover) .brandover .wsp.s2{opacity:1}
.tiles:has(.t3:hover) .brandover .wsp.s3{opacity:1}
/* V20 (Karsten 17.07. 06:54): Lösungs-Kacheln EXAKT wie Show-Cases — gleiche Größe, gleicher ruhiger 18px-Versatz */
@media(min-width:900px){
  .content[data-sec="d"] #leistungen .igrid .ic:nth-child(n){top:0}
  .content[data-sec="d"] #leistungen .igrid .ic:nth-child(even){top:18px}
  .content[data-sec="d"] #leistungen .igrid{grid-auto-rows:1fr;align-items:stretch;margin-bottom:38px}
}
/* V20-EN: Sprachumschalter klickbar */
.lang,.mlang{cursor:pointer}

/* ===== V21 (Karsten 17.07. 07:48) =====
   A) 3-Spalten-Raster: Versatz PRO SPALTE (nth-child(3n+x)) statt even/odd.
      Grund: bei ungerader Spaltenzahl wandert even/odd pro Zeile → Zeile 2 läuft GEGEN Zeile 1 → mittlere Kacheln kollidierten.
      Jetzt: leichte Treppe 0/14/28px, Zeile 2 exakt parallel dazu. */
@media(min-width:900px){
  .content[data-sec="d"] #leistungen .igrid .ic:nth-child(n){top:0}
  .content[data-sec="d"] #leistungen .igrid .ic:nth-child(3n+2){top:14px}
  .content[data-sec="d"] #leistungen .igrid .ic:nth-child(3n+3){top:28px}
  .content[data-sec="d"] #leistungen .igrid{margin-bottom:40px}
}
/* B) Logo-Laufband in der gelben Sektion: langsamer, mehr Luft zwischen den Logos, auf Weiß */
.refstrip.slow .mqtrack{animation-duration:96s}
.refstrip.slow .refmini{padding:0 34px}
.win.reffull{margin-bottom:30px}
.win.reffull .refstrip{padding:14px 0;border-radius:14px}
.win.reffull .reflab{color:#8a8d90}
/* V21-fix: Die Sektions-Leiste ist NICHT die Landing-Leiste — alte Ausblend-Regeln (V15.6 .start.expanded ·
   V17-L3 Landing display:none) gelten nur fuer die house-Leiste, nicht fuer .win.reffull */
.start.expanded .win.reffull .refstrip,
body[data-route-index="-1"] .win.reffull .refstrip{opacity:1!important;pointer-events:auto!important;display:flex!important}
/* V21: ALTRA ist extrem breit (Ratio 3.7) und wirkt dadurch groesser als die Nachbarn → optischer Ausgleich */
.refmini img[alt="ALTRA"]{max-width:104px}

/* ===== FAQ-Accordion (Task 869e5x6xx · 18.07.) — kuratiert, zugeklappt, über dem Kontakt.
   CI: Poppins-Frage (var--disp) · Manrope-Antwort (var--body) · Sparten-Akzent je data-sec.
   Formen-Grammatik: rund führt — kein Skew (die eine Skew-Geste der Seite bleibt reserviert); runder grüner Marker. */
.faqsec .faqlist{max-width:820px;margin:0 auto}
.faqnav{max-width:820px;margin:0 auto 18px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.faqnav .fnl{font:700 .95rem/1 var(--disp);letter-spacing:.01em;text-decoration:none;padding:9px 15px;border:1.5px solid currentColor;border-radius:999px;white-space:nowrap;transition:background .2s,color .2s}
/* fn-b: gefüllt #002dff + weiß — #6e8bff war kein Token (raus 20.07., Karsten); kleines #002dff auf Schwarz unlesbar */
.faqnav .fn-y{color:#ffcc33}.faqnav .fn-b{background:#002dff;border-color:#002dff;color:#fff}.faqnav .fn-g{color:#4cd494}
.faqnav .fn-y:hover{background:#ffcc33;color:#1a1400}.faqnav .fn-b:hover{background:#fff;border-color:#fff;color:#002dff}.faqnav .fn-g:hover{background:#4cd494;color:#062018}
/* Kunden-Logo-Leiste: Altra (sehr breite Wortmarke) angleichen */
.refmini img[alt="ALTRA"]{height:31px}
.faqi{border-bottom:1px solid rgba(0,0,0,.12)}
.faqi:first-child{border-top:1px solid rgba(0,0,0,.12)}
.faqi>summary{list-style:none;cursor:pointer;display:flex;align-items:flex-start;gap:14px;padding:20px 44px 20px 0;position:relative;
  font:700 clamp(1.05rem,1.6vw,1.25rem)/1.4 var(--disp);color:var(--ink);transition:color .2s}
.faqi>summary::-webkit-details-marker{display:none}
.faqi>summary::before{content:"";flex:0 0 11px;width:11px;height:11px;margin-top:.5em;border-radius:2.5px;transform:skew(-12deg);background:var(--acc,var(--green))}
.faqi>summary::after{content:"+";position:absolute;right:6px;top:16px;font:400 1.7rem/1 var(--disp);color:var(--acc,var(--green));transition:transform .25s}
.faqi[open]>summary::after{content:"–"}
.faqi>summary:hover{color:var(--acc,var(--green))}
.faqa{padding:0 0 22px 25px;font:400 1rem/1.65 var(--body);color:var(--ink-soft);max-width:72ch}
/* Full-Service / One-Face-Leistungsübersicht (System-Seite) */
.fsgrid{display:grid;grid-template-columns:1fr 1fr;gap:18px 40px;margin-top:6px}
@media(max-width:760px){.fsgrid{grid-template-columns:1fr;gap:16px 0}}
.fsitem{position:relative;padding-left:24px}
.fsitem::before{content:"";position:absolute;left:0;top:.4em;width:12px;height:12px;background:var(--acc,var(--green));transform:skew(-12deg);border-radius:2.5px}
.fsitem b{display:block;font:700 1.04rem/1.35 var(--disp)}
.fsitem span{display:block;font:400 .92rem/1.5 var(--body);color:rgba(255,255,255,.72);margin-top:3px}
.sblock.white .fsitem span{color:var(--ink-soft)}
/* FAQ-Antwort-Listen: kleine runde Parallelogramme in Sparten-Akzent (Formen-Grammatik) */
.faqa ul{list-style:none;margin:10px 0 4px;padding:0}
.faqa ul li{position:relative;padding-left:20px;margin:6px 0}
.faqa ul li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:9px;background:var(--acc,var(--green));transform:skew(-12deg);border-radius:2px}
.faqa b{font-weight:700}
/* Sparten-Akzent aus der Sektionsfarbe */
.content[data-sec="c"] .faqsec{--acc:var(--yellow)}
.content[data-sec="d"] .faqsec{--acc:var(--blue)}
.content[data-sec="e"] .faqsec{--acc:var(--green)}
.faqsec .eyebrow{color:var(--acc,var(--green))}
/* FAQ liegt auf dunkler Sektion (erbt data-sec-Hintergrund) → Text hell */
.faqsec .faqi>summary{color:#fff}
.faqsec .faqa{color:#c9cdd2}
.faqsec .faqi,.faqsec .faqi:first-child{border-color:rgba(255,255,255,.16)}

/* Landing Trust-Signale (18.07.) — HONEST, kein Zertifikats-Claim (ISO/DSGVO erst nach exali+Metzner) */
.brandover .ltrust{margin-top:14px;font:700 .68rem/1 var(--body);letter-spacing:.16em;text-transform:uppercase;color:#8a9099;text-align:center}
@media(max-width:900px){body[data-route-index="-1"] .brandover .ltrust{margin-top:10px}}

/* ===== V22 (Karsten 18.07.) — Mobile-Optimierung Landing + NEU-Badge ===== */
/* #3 Sparten-Logo je gestapelter Kachel (echte Lockups, die es schon gibt) — Mobil hat kein Hover */
@media (max-width:900px){
  body[data-route-index="-1"] .tile .brand{display:block;top:40%}
  body[data-route-index="-1"] .tile .brand img{height:clamp(58px,16vw,80px);filter:drop-shadow(0 3px 16px rgba(0,0,0,.75))}
  /* digital-Blau auf Dunkel lesbar halten: dezente Plate hinter dem Logo */
  body[data-route-index="-1"] .t2 .brand{background:radial-gradient(60% 120% at 50% 50%,rgba(0,0,0,.55),transparent 70%)}
  /* #4 Motive mittig + heller (waren zu dunkel/abgeschnitten) */
  body[data-route-index="-1"] .fw .photo{filter:grayscale(0) saturate(.9) brightness(.96) contrast(1.03)}
  body[data-route-index="-1"] .t1 .fw .photo{object-position:55% 28%}
  body[data-route-index="-1"] .t2 .fw .photo{object-position:76% 42%}
  body[data-route-index="-1"] .t3 .fw .photo{object-position:50% 26%}
  /* Tagline etwas tiefer, damit Logo Mitte + Tagline unten sauber trennen */
  body[data-route-index="-1"] .tagline{bottom:26px}
  /* #2 NEU-Badge sauber in die obere Ecke der Engine-Kachel (statt mitten aufs Foto) */
  body[data-route-index="-1"] .tilebadge{top:14px;right:14px}
}
/* #2 Desktop: NEU-Badge klar in die Engine-Kachel, unter die Nav */
@media (min-width:901px){
  body[data-route-index="-1"] .tilebadge{top:96px;right:26px}
}

/* ===== V23 (Karsten 18.07.): Landing-Bilder EINHEITLICH (datenbasiert normalisiert) =====
   Messung: t1 L25/S.63 · t2 L23/S.23 · t3 L74/S.46 → gemeinsames Ziel L~41/S~.44.
   Per-Tile Brightness/Saturate gleicht Helligkeit + Sättigung an; Motiv je zentriert; contrast hält Tiefe.
   Nur Landing-Kacheln (.fw .photo) — Subpage-Heroes (.shero) unberührt. */
body[data-route-index="-1"] .t1 .fw .photo{--br:1.55;--sa:.72;object-position:55% 32%}
body[data-route-index="-1"] .t2 .fw .photo{--br:1.65;--sa:1.40;object-position:74% 42%}
body[data-route-index="-1"] .t3 .fw .photo{--br:.60;--sa:.95;object-position:50% 26%}
/* Desktop: grayscale-Default (Helligkeit angeglichen), Hover = Farbe (auch angeglichen) */
body[data-route-index="-1"] .fw .photo{filter:grayscale(1) brightness(var(--br,1)) contrast(1.08)}
body[data-route-index="-1"] .tile:hover .fw .photo{filter:grayscale(0) brightness(var(--br,1)) saturate(var(--sa,1)) contrast(1.08)}
/* Mobil: Farbe, einheitlich angeglichen (kein Hover) */
@media (max-width:900px){
  body[data-route-index="-1"] .fw .photo{filter:grayscale(0) brightness(var(--br,1)) saturate(var(--sa,1)) contrast(1.06)!important}
}