/* ZAB Studio v13 · Bühnen statt Hochschieben, Handy zuerst – baut auf styles.css + v9.css + v10.css + v11.css auf
   Runde 2: alles hängt am Scrollen, keine Linien/Hinweise im Intro, Widgets 1 + 2 neu, Handy deutlich leichter */

/* ---------- Himmel: immer volle Höhe (auch wenn die Adressleiste am Handy verschwindet), ohne teure Filter ---------- */
.v13 #sky{bottom:auto;height:100vh;height:100lvh}
.v13 .sky__imgs img{filter:none}
.v13 .sky__imgs img,.v13 .sky__imgs .g{transform-origin:50% 86%;will-change:auto}
.v13 .sky__imgs .vis{will-change:opacity,scale}

/* ---------- Intro: kein „Scroll · tauch ein“, keine Fortschrittslinie (sie wanderten beim Scrollen mit nach oben) ---------- */
.v13 .intro__bar{display:none!important}

/* ---------- Bühnen: Abschnitte überlappen genau um eine Bildschirmhöhe.
   So bleibt der Bildschirm stehen, der alte Inhalt blendet aus, der neue blendet an derselben Stelle ein. ---------- */
.v13 .intro__stick{height:100vh;height:100lvh}
.v13 .rot{height:340vh;margin-top:-100vh;margin-top:-100lvh;position:relative;z-index:2}
.v13 .stand{height:240vh;margin-top:-100vh;margin-top:-100svh;position:relative;z-index:3}
.v13 .rot__card,.v13 .rot__lbl{opacity:0;will-change:opacity,transform}

/* ---------- herausstechen: alles hängt am Scrollen (v13.js), nichts läuft von allein ab ---------- */
.v13 .stand__pre,.v13 .stand__post,.v13 .stand__p,.v13 .stand .pills{opacity:0;transition:none!important;filter:none;transform:none!important}
.v13 .stand__stick{height:100svh}
/* das Leuchten des Wortes hat Platz nach allen Seiten – vorher schnitt die Schreib-Maske den Schein als Kasten ab */
.v13 .stand__h em.stand__w{padding:90px 100px 90px 90px;margin:-90px -100px -90px -90px;
  -webkit-mask-image:linear-gradient(90deg,#000 calc(90px + (100% - 190px) * var(--w,-10) / 100 - 24px),transparent calc(90px + (100% - 190px) * var(--w,-10) / 100 + 14px));
  mask-image:linear-gradient(90deg,#000 calc(90px + (100% - 190px) * var(--w,-10) / 100 - 24px),transparent calc(90px + (100% - 190px) * var(--w,-10) / 100 + 14px))}
/* der dunkle Verlauf hinter dem Text verschwindet mit dem Text – sonst zieht er beim Weiterscrollen eine Kante mit */
.v13 .stand .stand__stick::before,.v13 .stand.on .stand__stick::before{opacity:calc(var(--vis,0) * (1 - var(--out,0)))!important;transition:none!important}

/* ---------- Kapitel 02 als Bühne ---------- */
.v13 #warum.stage{height:330vh;margin-top:-100vh;margin-top:-100svh;padding:0!important;position:relative;z-index:4}
.v13 #warum.stage .stage__in{position:sticky;top:0;height:100vh;height:100svh;display:flex;flex-direction:column;justify-content:center;padding-top:clamp(70px,9vh,96px);padding-bottom:clamp(12px,3vh,28px);box-sizing:border-box}
.v13 #warum.stage .stage__in>.label,.v13 #warum.stage .bento>.w{opacity:0}
.v13 #warum .stage__in>.label{transition:none!important}
/* Neigen und Anheben beim Drüberfahren bleibt weich (vorher war jede Bewegung abgeschaltet → Springen von Widget zu Widget) */
.v13 #warum .bento>.w{transition:transform .65s var(--ease),box-shadow .45s,border-color .45s!important}
.v13 #warum h2{margin-top:10px}
.v13 #warum .lead{margin-top:12px;max-width:720px}
.v13 #warum .bento{margin-top:clamp(14px,3vh,32px)}
.v13 #warum .bento>.w{min-height:0}
/* Desktop: alles passt auf einen Bildschirm – Überschrift links, Text rechts, darunter die vier Widgets */
@media (min-width:701px){
  .v13 #warum .stage__in{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);grid-template-rows:auto auto auto;column-gap:clamp(24px,4vw,64px);align-content:center}
  .v13 #warum .stage__in>.label{grid-column:1/-1}
  .v13 #warum h2{grid-column:1;font-size:clamp(40px,4.4vw,70px);margin:8px 0 0}
  .v13 #warum .lead{grid-column:2;align-self:end;margin:0 0 6px;font-size:clamp(15px,1.15vw,17px)}
  .v13 #warum .bento{grid-column:1/-1;height:calc(100svh - 270px);min-height:420px;max-height:680px;grid-template-rows:repeat(2,minmax(0,1fr));margin-top:clamp(16px,3vh,30px)}
  .v13 #warum .w{overflow:hidden;padding:clamp(16px,2.2vh,24px) 22px;gap:10px}
  .v13 #warum .w h3{font-size:clamp(22px,1.9vw,30px)}
  .v13 #warum .w p{font-size:14px;line-height:1.45;margin-top:4px}
}
.stage__dots{display:none}

/* Widget 1: viele gleiche Seiten, eine wird beim Scrollen immer heller */
.sites{--lit:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px;width:min(100%,460px)}
.sites i{position:relative;aspect-ratio:4/3;border-radius:10px;padding:11% 10%;display:flex;flex-direction:column;gap:9%;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.13);
  opacity:calc(1 - var(--lit) * .45);translate:0 calc(var(--h,0) * -5px);transition:translate .5s var(--ease),border-color .4s}
.sites i b{display:block;height:44%;border-radius:4px;background:rgba(255,255,255,.16)}
.sites i s{display:block;height:9%;width:78%;border-radius:3px;background:rgba(255,255,255,.16);text-decoration:none}
.sites i s+s{width:52%}
.sites i:nth-child(n+11){display:none}
.sites i.me{opacity:1;z-index:1;scale:calc(1 + var(--lit) * .12);border-color:rgba(255,214,150,calc(.13 + var(--lit) * .6));
  box-shadow:0 0 calc(var(--lit) * 26px) rgba(255,170,80,calc(var(--lit) * .55)),0 10px 24px -12px rgba(0,0,0,calc(var(--lit) * .5))}
.sites i.me::before{content:"";position:absolute;inset:0;border-radius:inherit;opacity:var(--lit);background:radial-gradient(120% 90% at 30% 0%,rgba(255,226,170,.55),transparent 60%),linear-gradient(160deg,rgba(255,197,107,.35),rgba(255,138,61,.18))}
.sites i.me b{position:relative;background:linear-gradient(135deg,rgba(255,226,170,calc(.16 + var(--lit) * .84)),rgba(255,138,61,calc(.16 + var(--lit) * .84)))}
.sites i.me s{position:relative;background:rgba(255,255,255,calc(.16 + var(--lit) * .6))}
.v13 #warum .b1{justify-content:space-between}

/* Widget 2: ein Handy mit einer Seite, die hängen bleibt – Knopf mittig, kein leerer Platz */
.b2__in{display:flex;gap:18px;align-items:stretch;justify-content:space-between;flex:1;min-height:0}
.b2__in>.w__txt{align-self:flex-end;min-width:0}
.ph2{flex:none;align-self:stretch;aspect-ratio:9/16;max-height:260px;border-radius:24px;padding:6px;background:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,.06));border:1px solid rgba(255,255,255,.26);box-shadow:0 24px 40px -22px rgba(0,0,0,.6);transform:rotate(3deg);transition:transform .7s var(--ease)}
.w:hover .ph2{transform:rotate(0deg) translateY(-4px)}
@media (min-width:701px){
  .v13 #warum .b2 .b2__in>.w__txt{max-width:56%}
  .v13 #warum .b2 .ph2{position:absolute;right:clamp(28px,6%,72px);bottom:-20%;height:116%;max-height:none;transform:rotate(5deg)}
  .v13 #warum .b2 .ph2__save{display:flex}
  .v13 #warum .b2:hover .ph2{transform:rotate(1deg) translateY(-8px)}
  .v13 #warum .b2 .ph2__ttl{font-size:clamp(20px,1.7vw,26px)}
  .v13 #warum .b2 .ph2__btn{font-size:12.5px;min-height:36px}
  .v13 #warum .b2 .ph2__sc{padding:14px 12px 76px}
}
.ph2__sc{position:relative;height:100%;border-radius:18px;background:center/cover no-repeat;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;gap:9px;padding:11px}
.ph2__sc::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,11,20,.4),transparent 30%,transparent 42%,rgba(7,11,20,.78))}
.ph2__top{position:absolute;top:11px;left:11px;right:11px;display:flex;align-items:center;gap:6px;font:400 8.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#fff}
.ph2__top i{width:6px;height:6px;border-radius:50%;background:#FF8A3D;box-shadow:0 0 8px #FF8A3D}
.ph2__ttl{position:relative;font:400 19px/1.02 var(--serif2);color:#fff;text-align:center}
.ph2__ttl em{font-family:var(--serif3);font-style:italic;color:#FFD9A0}
.ph2__save{display:none;position:absolute;left:-58%;top:16%;z-index:2;align-items:center;gap:7px;padding:9px 13px;border-radius:99px;white-space:nowrap;font:400 12px var(--sans);color:#0B1220;background:rgba(255,255,255,.88);box-shadow:0 12px 30px -12px rgba(0,0,0,.5);transform:rotate(-6deg)}
.ph2__save i{color:#FF8A3D;font-style:normal}
.ph2__btn{position:relative;display:flex;align-items:center;justify-content:center;text-align:center;min-height:32px;padding:0 6px;white-space:nowrap;border-radius:11px;background:#FF8A3D;color:#1b0d03;font:500 11px/1.1 var(--sans);box-shadow:0 6px 18px -6px rgba(255,138,61,.8)}

/* ---------- Intro: Text etwas größer, bei B weiter rechts; Logo reagiert ganz ---------- */
.v13 .intro__copy h1{font-size:clamp(56px,8.9vw,140px)}
.v13 .intro__copy .sub{font-size:clamp(16.5px,1.5vw,21px);max-width:600px}
@media (min-width:701px){.v13 [data-variant="b"] .intro__copy{left:max(24px,9vw)}}
.v13 #wmDot{transition:box-shadow .35s;scale:calc(1 + var(--mg,0) * .35);box-shadow:0 0 calc(.25em + var(--mg,0) * .5em) rgba(255,138,61,.85),0 0 calc(.7em + var(--mg,0) * 1.6em) rgba(255,170,90,calc(.35 + var(--mg,0) * .45)),0 0 .7em rgba(47,95,208,.45)}
.v13 .ttl__main .wm__s .ch,.v13 .about2__h .ch{display:inline-block}
/* „zab“: die schräge Schrift ragt über den Buchstaben hinaus – Platz geben, sonst wird das b abgeschnitten */
.v13 .ttl__main .wm__z .ch{padding:0 .12em .06em;margin:0 -.12em -.06em}
.v13 .ttl__main .wm__z{padding-right:.1em}
.v13 .ttl__main .wm__s{font-size:.19em;letter-spacing:.36em}

/* ---------- Absätze: Wort für Wort, von unten nach oben (v13.js steuert Deckkraft und Versatz) ---------- */
.v13 .rvw .wd{display:inline-block;transform:none!important;filter:none;transition:color .25s,text-shadow .25s!important}

/* ---------- Leistungen: etwas mehr Luft zwischen den Websites ---------- */
.v13 #websites .track{gap:26px}
.v13 #content .track{gap:14px}

/* ---------- Kapitel 04: Raum je Branche ---------- */
.v13 #branchen{position:relative;--rc:#c9a27c}
.v13 #branchen::before{content:"";position:absolute;inset:-10% 0;background-color:var(--rc);opacity:.2;pointer-events:none;transition:background-color 1.2s;-webkit-mask:radial-gradient(70% 60% at 60% 60%,#000,transparent 75%);mask:radial-gradient(70% 60% at 60% 60%,#000,transparent 75%)}
.v13 #branchen .wrap{position:relative}
.room{position:relative;margin-top:26px}
.room__chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.v13 .room__chips .chip{padding:11px 18px;border-radius:99px;font:400 15px/1 var(--sans);cursor:pointer;color:#0B1220;transition:background .35s,color .35s,transform .35s var(--ease)}
.v13 .room__chips .chip:hover{transform:translateY(-2px)}
.room__stage{position:relative;border-radius:30px;overflow:hidden;aspect-ratio:16/9;max-height:76svh;width:100%;isolation:isolate;box-shadow:0 40px 90px -40px color-mix(in srgb,var(--rc) 70%,#000),0 0 0 1px rgba(255,255,255,.5)}
.room__imgs{position:absolute;inset:0;z-index:-1;background:color-mix(in srgb,var(--rc) 60%,#fff)}
.room__imgs img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 50%;opacity:0;scale:1.06;transition:opacity 1s var(--ease),scale 6s var(--ease)}
.room__imgs img.on{opacity:1;scale:1}
.room__tag{position:absolute;right:16px;top:16px;font:400 10px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#fff;background:rgba(7,11,20,.35);padding:7px 10px;border-radius:99px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.room__card{position:absolute;left:20px;top:20px;bottom:20px;width:min(420px,36%);padding:26px 26px 22px;border-radius:24px;display:flex;flex-direction:column;gap:10px;overflow:auto;scrollbar-width:none}
.room__card h3{font-size:clamp(26px,2.4vw,38px);line-height:1.05;letter-spacing:-.02em;margin:2px 0 0}
.v13 #branchen .room__card h3 em{color:#B65F22}
.room__card p{margin:0;font-size:15px;line-height:1.5}
.room__card>*{opacity:0}
.room__card.in>*{animation:roomIn .75s var(--ease) both}
.room__card.in>*:nth-child(2){animation-delay:.07s}.room__card.in>*:nth-child(3){animation-delay:.14s}.room__card.in>*:nth-child(4){animation-delay:.21s}.room__card.in>*:nth-child(5){animation-delay:.28s}
@keyframes roomIn{from{opacity:0;transform:translate3d(0,10px,0)}to{opacity:1;transform:none}}
.room__acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto;padding-top:6px}
.room__acts .btn{font-size:14px;padding:12px 16px}
.rui{background:rgba(255,255,255,.62);border:1px solid rgba(255,255,255,.9);border-radius:18px;padding:12px 14px 10px;box-shadow:0 10px 30px -18px rgba(41,37,36,.35);font-size:14px;color:#0B1220}
.rui__h{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.rui__h b{font:400 18px/1.1 var(--serif3);font-style:italic}
.rui__h span{font:400 9.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#8a93a3}
.rui__r{display:flex;align-items:baseline;gap:8px;padding:5px 0}
.rui__r i{flex:1;border-bottom:1px dotted rgba(11,18,32,.25);transform:translateY(-3px)}
.rui__r b{font-weight:500}
.rui__f{display:flex;align-items:center;gap:8px;margin-top:6px;padding-top:8px;border-top:1px solid rgba(11,18,32,.08);font-size:13px;color:#33405a}
.rui__dot{width:8px;height:8px;border-radius:50%;background:#3fbf6b;box-shadow:0 0 0 4px rgba(63,191,107,.18)}

/* ---------- Kapitel 07: Bild genau von der ersten bis zur letzten Frage (Werte misst v13.js) ---------- */
.v13 .faq2{align-items:start}
@media (min-width:1000px){.v13 .chatart{height:var(--ch,560px)!important;min-height:0!important;margin-top:var(--cm,0)!important;transition:height .45s var(--ease)}}

.hint-m{display:none}.hint-d,.hint-m{font-weight:inherit}
/* ---------- Handy ---------- */
@media (max-width:700px){
  /* flüssig: keine Dauer-Animationen hinter dem Inhalt; Glas ohne Live-Unschärfe (die kostet beim Scrollen am meisten) */
  .v13 .sky__imgs img,.v13 .sky__imgs .g .fl,.v13 .sky__imgs .g i{animation:none!important}
  .v13 .sky__imgs img{inset:0;width:100%;height:100%}
  .v13 .sky__imgs img:nth-child(-n+3){will-change:opacity}
  .v13 .sky__imgs .vis:not(:nth-child(-n+3)){will-change:opacity}
  .v13 .sky__mark{mix-blend-mode:normal;animation:none}
  html,body{overflow-x:clip}
  .v13 .rot__lead1 .wd,.v13 .rot__txt .dots3{display:inline-block}
  .v13 .sky__imgs .g i{filter:blur(60px)}
  .v13 .glass:not(.claim__txt):not(.rot__panel):not(.chat){backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
  html.v13[data-theme="dark"] section:not([data-ink]) .glass:not(.claim__txt):not(.rot__panel):not(.rot__card):not(.chat):not(.scard){background:linear-gradient(145deg,rgba(12,20,38,.62),rgba(12,20,38,.46))!important}
  .v13 .intro__copy{bottom:calc(64px + 100lvh - 100svh)}
  .v13 .intro{height:290vh;height:290lvh}

  /* Satz und Kapitel 01 im selben Glas: gleiche Stelle, gleiche Größe – der Text wechselt, das Glas bleibt */
  .v13 #claim{display:block}
  html.v13 #claimTxt,html.v13 .rot__card .rot__panel.glass{position:absolute;left:16px;right:16px;top:47svh;translate:0 -50%;height:250px;max-width:520px;margin:0 auto;box-sizing:border-box;
    display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px 22px!important;border-radius:30px!important;
    background:rgba(7,11,20,.26)!important;border:1px solid rgba(255,255,255,.22)!important;box-shadow:none!important;backdrop-filter:blur(12px)!important;-webkit-backdrop-filter:blur(12px)!important}
  html.v13 #claimTxt::before,html.v13 #claimTxt::after,html.v13 .rot__panel::before,html.v13 .rot__panel::after{display:none!important}
  html.v13 #claimTxt{font-size:34px;line-height:1.1;transform:none!important}
  .v13 #claimTxt>span:not(.glare),.v13 #claimTxt>em{opacity:calc(1 - var(--cout,0));filter:blur(calc(var(--cout,0) * 8px))}
  .v13 .rot{height:300vh}
  .v13 .rot__right,.v13 .rot__lead,.v13 .rot .dots{display:none!important}
  .v13 .rot__stick{padding:0!important}
  html.v13 .rot__card{position:absolute;inset:0;width:auto;height:auto!important;min-height:0!important;max-height:none!important;margin:0;padding:0;background:none!important;border:0!important;box-shadow:none!important;display:block!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;transform:none!important}
  .v13 .rot__card .ringb{display:none}
  .v13 .rot__left{display:block!important;padding:0!important;position:static!important}
  html.v13 .rot__card .rot__panel.glass{transform:none!important}
  .v13 .rot__txt{font-size:clamp(38px,11vw,54px)!important;line-height:1.05!important;color:#fff;opacity:0}
  .v13 .rot__lbl{display:none!important}

  /* herausstechen: Text oben, die Box klein und direkt darunter – die leuchtende Blume bleibt frei */
  .v13 .stand__stick{height:100lvh}
  .v13 .stand__col{top:11vh}
  .v13 .stand__p{margin-top:14px!important;padding:12px 15px!important;font-size:14px!important;line-height:1.45!important;max-width:330px;background:rgba(5,7,13,.5)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;border-radius:18px!important}
  .v13 .stand__p .stand__more{display:none}
  .v13 .stand .pills{margin-top:10px}
  .v13 .stand .pills .pill{font-size:12px;padding:7px 11px}

  /* Kapitel 02: Bühne wie vorher – die Karten kommen nacheinander nach vorn; die Punkte stehen senkrecht (zeigt: weiter nach unten, nicht zur Seite) */
  .v13 #warum.stage{height:520vh;height:520svh}
  .v13 #warum .stage__in{padding:76px 16px 18px;justify-content:flex-start}
  .v13 #warum h2{font-size:clamp(34px,10vw,46px);margin-top:8px}
  .v13 #warum .lead{font-size:15.5px;line-height:1.5}
  .v13 #warum .bento{position:relative;display:block;flex:1;min-height:300px;max-height:420px;margin:16px 18px 0 0}
  .v13 #warum .bento>.w{position:absolute;inset:0;margin:0;width:auto!important;grid-column:auto!important;display:flex;flex-direction:column;justify-content:space-between;padding:20px;overflow:hidden;transition:none!important}
  .v13 #warum .bento .w h3{font-size:24px}
  .v13 #warum .bento .w p{font-size:14.5px}
  .sites{grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;width:100%;max-width:330px;margin:4px auto 0}
  .sites i:nth-child(n+11){display:flex}
  .b2__in{gap:14px}
  .ph2{max-height:230px}
  .ph2__ttl{font-size:17px}
  .ph2__btn{font-size:10.5px;min-height:30px;white-space:nowrap;padding:0 6px}
  .v13 #warum .stage__in{position:sticky}
  .stage__dots{display:flex!important;flex-direction:column;gap:7px;position:absolute;right:16px;bottom:calc(18px + 160px)}
  .stage__dots i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.3);transition:background .3s,height .3s}
  .stage__dots i.on{height:18px;border-radius:9px;background:#FFC56B}

  /* Leistungen: seitlich wischen mit Einrasten */
  .v13 .hs{height:auto!important;margin-top:0!important}
  .v13 .hs__stick{position:relative!important;top:auto!important;height:auto!important;padding:70px 0 28px!important;display:block!important}
  .v13 .hs .scard{transform:none!important;margin:0 10px}
  .v13 .hs .trackwrap{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;overscroll-behavior-x:contain;margin:0 -14px;padding:12px 0 16px;-webkit-mask:none;mask:none}
  .v13 .hs .trackwrap::-webkit-scrollbar{display:none}
  .v13 .hs .track{transform:none!important;width:max-content;padding:0 14px;gap:12px}
  .v13 .hs .tile{scroll-snap-align:center;height:auto;width:80vw;aspect-ratio:16/11}
  .v13 .hs .tile.v{width:64vw;height:auto;aspect-ratio:9/16}
  .v13 .hs .tile:hover{transform:none}
  .v13 .hs .tile video{display:none}
  .v13 .sfoot .label{font-size:10px}
  .hint-d{display:none}.hint-m{display:inline;color:#FFC56B}

  /* Kapitel 03: das Porträt steht still (kein Mitziehen beim Scrollen) */
  .v13 .focus2 .base{filter:none;opacity:.62;transform:scale(1.04)}

  /* Kapitel 04: Bild im Querformat, darunter die Karte – alles auf einen Blick */
  .room__chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -16px 10px;padding:2px 16px;scroll-snap-type:x proximity}
  .room__chips::-webkit-scrollbar{display:none}
  .v13 .room__chips .chip{flex:none;scroll-snap-align:start;font-size:14px;padding:10px 15px}
  .room{margin-top:18px}
  .room__stage{aspect-ratio:auto;max-height:none;overflow:visible;border-radius:0;box-shadow:none}
  .room__imgs{position:relative;aspect-ratio:3/2;border-radius:22px;overflow:hidden;box-shadow:0 26px 50px -30px color-mix(in srgb,var(--rc) 70%,#000)}
  .room__imgs img{object-position:50% 50%}
  .room__tag{top:12px;right:12px;font-size:9px;padding:6px 9px}
  .room__card{position:relative;inset:auto;width:auto;margin-top:10px;padding:16px 16px 14px;gap:7px;overflow:visible}
  html.v13 #branchen .room__card.glass{background:linear-gradient(160deg,rgba(255,252,247,.94),rgba(250,244,236,.9))!important;border-color:rgba(255,255,255,.95)!important}
  .room__card h3{font-size:24px}
  .room__card p{font-size:14px;line-height:1.42}
  .rui{padding:10px 12px 8px;font-size:13px;border-radius:16px}
  .rui__h{margin-bottom:3px}
  .rui__r{padding:3px 0}
  .rui__f{font-size:12px;margin-top:4px;padding-top:6px}
  .room__acts{padding-top:4px}
  .room__acts .btn{flex:1 1 auto;justify-content:center;padding:11px 12px;font-size:13.5px}

  /* Kapitel 05: kein Aufleuchten nacheinander, sondern ein ruhiger Verlauf – 1 zart, 4 am hellsten */
  .v13 #ablauf .step,.v13 #ablauf .step .n{transition:none!important}
  .v13 #ablauf .step.on,.v13 #ablauf .step{transform:none!important}
  .v13 #ablauf .step:nth-of-type(1){--a:.28}.v13 #ablauf .step:nth-of-type(2){--a:.52}.v13 #ablauf .step:nth-of-type(3){--a:.76}.v13 #ablauf .step:nth-of-type(4){--a:1}
  html.v13 #ablauf .step,html.v13 #ablauf .step.on{border-color:rgba(255,170,90,calc(var(--a) * .55))!important;box-shadow:0 18px 40px -26px rgba(182,95,34,calc(var(--a) * .55))!important}
  html.v13 #ablauf .step .n,html.v13 #ablauf .step.on .n{transform:none!important;color:#1b0d03;border-color:transparent;background:rgba(255,170,90,calc(.18 + var(--a) * .82));box-shadow:0 0 0 6px rgba(255,197,107,calc(var(--a) * .22))}
  html.v13 #ablauf .step.on h3{color:inherit}
  .v13 #ablauf .steps svg{display:none}

  /* Kapitel 07: großes Blumenbild, der Chat liegt unten darin; geöffnet wächst nur der Chat (bis zur Bildhöhe), das Bild bleibt gleich */
  .v13 #faqList,.v13 #faq .lead{display:none!important}
  html.v13 .chatart{position:relative!important;height:74svh!important;min-height:480px!important;max-height:720px;margin-top:18px!important;padding:0!important;overflow:hidden!important;border-radius:26px!important;aspect-ratio:auto}
  html.v13 .chatart>img{position:absolute!important;inset:0;width:100%;height:100%;object-fit:cover;border-radius:0}
  html.v13 .chat{position:absolute!important;left:10px!important;right:10px!important;bottom:10px!important;top:auto!important;margin:0!important;height:auto!important;max-height:calc(100% - 20px)!important;display:flex!important;flex-direction:column}
  html.v13 .chat .chat__log{flex:0 0 auto}
  html.v13 .chat.open .chat__log{flex:1 1 auto!important;height:auto!important;min-height:90px;max-height:none!important;overflow-y:auto;padding:14px 16px!important}
  html.v13 .chat .chat__quick,html.v13 .chat.open .chat__quick{flex:none;flex-wrap:wrap!important;overflow:visible!important;max-height:none!important;gap:6px;padding:10px 12px 14px!important}
  html.v13 .chat:not(.open) .chat__quick{display:none!important}
  html.v13 .chat__quick button{flex:none;white-space:nowrap!important;padding:8px 12px;height:auto!important;font-size:13px}
}
@media (prefers-reduced-motion:reduce){.v13 .rot__card,.v13 .rot__lbl,.v13 #warum .stage__in>*,.v13 #warum .bento>.w,.v13 .rot__txt{opacity:1!important}}

/* ---------- Kapitel 03: Porträt mit Licht am Scroll (Video über dem Standbild), Desktop optional mit Glas-Fokus ---------- */
.f3{background:#1d3f9e}
.f3>.sharp,.f3>.f3vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;clip-path:none!important}
.f3>.f3vid{opacity:0;transition:opacity .5s}
.f3.has-vid:not(.still)>.f3vid{opacity:1}
.f3 .f3glass{position:absolute;top:0;bottom:0;left:var(--fx,52%);right:0;z-index:2;pointer-events:none;opacity:0;transition:opacity .5s,left .6s var(--ease);
  backdrop-filter:blur(7px) saturate(1.1);-webkit-backdrop-filter:blur(7px) saturate(1.1);background:linear-gradient(90deg,rgba(255,255,255,.1),rgba(255,255,255,.04));border-left:1px solid rgba(255,255,255,.35);box-shadow:inset 1px 0 0 rgba(255,255,255,.15)}
.f3.fokus .f3glass{opacity:1}
.f3 .f3fx{position:absolute;right:14px;top:44px;z-index:4;font:400 10px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#fff;padding:7px 11px;border-radius:99px;background:rgba(7,11,20,.3);border:1px solid rgba(255,255,255,.3);cursor:pointer;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.f3.fokus .f3fx{background:#fff;color:#0B1220}
.f3 .f2l{z-index:3}
@media (max-width:700px),(pointer:coarse){.f3 .f3fx,.f3 .f3glass{display:none}}
@media (max-width:700px){.f3 .f2l.tr{display:none}}

/* ---------- Runde 4: Scroll-Hinweis im Intro, Kernaussage bei den Websites, Preise ohne Zahlen ---------- */
.scrollcue{display:flex;align-items:center;gap:14px;margin-top:26px;font:400 15px/1.35 var(--sans);color:#E6ECF3;letter-spacing:.01em}
.scrollcue__m{flex:none;width:26px;height:40px;border-radius:14px;border:1.5px solid rgba(255,255,255,.75);position:relative}
.scrollcue__m i{position:absolute;left:50%;top:8px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:#FFC56B;animation:cueDot 1.8s var(--ease) infinite}
@keyframes cueDot{0%{opacity:0;transform:translateY(0)}25%{opacity:1}80%{opacity:0;transform:translateY(12px)}100%{opacity:0}}
.hs__you{margin-top:10px;font:400 italic clamp(17px,1.5vw,22px)/1.3 var(--serif3);color:#FFD9A0}
.plans.plans--2{grid-template-columns:repeat(2,minmax(0,1fr));max-width:1000px}
.plan .price.ask{font:300 clamp(26px,2.4vw,34px)/1.1 var(--sans);letter-spacing:-.02em;margin:4px 0 6px}
@media (max-width:700px){.plans.plans--2{grid-template-columns:1fr}.scrollcue{font-size:14.5px;margin-top:18px}}
/* Handy: statt Maus-Symbol ein wippender Pfeil nach unten */
@media (max-width:700px),(pointer:coarse){
  .scrollcue__m{width:30px;height:30px;border-radius:50%;border-color:rgba(255,255,255,.6)}
  .scrollcue__m i{top:7px;width:8px;height:8px;margin-left:-4px;border-radius:0;background:none;border-right:2px solid #FFC56B;border-bottom:2px solid #FFC56B;transform:rotate(45deg);animation:cueArrow 1.6s var(--ease) infinite}
  @keyframes cueArrow{0%,100%{translate:0 -2px;opacity:.5}50%{translate:0 4px;opacity:1}}
  .v13 .intro__copy .scrollcue{flex-direction:row;justify-content:flex-start}
}

/* ---------- Leistung 02: Widgets zum Wischen ---------- */
.svc{position:relative;flex:1;min-height:0;margin:10px -10px 0;overflow:hidden;touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:grab}
.svc:active{cursor:grabbing}
.svc__track{position:relative;height:100%;min-height:380px}
.svcw{position:absolute;left:50%;top:50%;width:min(520px,40vw);margin:0;translate:-50% -50%;display:flex;flex-direction:column;gap:8px;padding:16px 16px 18px;border-radius:24px;text-decoration:none;color:#EEF2F6;
  background:linear-gradient(150deg,rgba(18,28,52,.92),rgba(10,16,30,.88));border:1px solid rgba(255,255,255,.14);box-shadow:0 30px 60px -30px rgba(0,0,0,.7);will-change:transform,opacity;-webkit-tap-highlight-color:transparent}
.svcw.c{border-color:rgba(255,197,107,.45);box-shadow:0 30px 70px -30px rgba(0,0,0,.75),0 0 50px -20px rgba(255,170,90,.4)}
.svcw .label{color:#FFC56B;opacity:.9;margin-top:6px}
.svcw h3{font-size:clamp(22px,2vw,30px);line-height:1.05;margin:0}
.svcw h3 em{font-family:var(--serif3);font-style:italic;color:#FFD9A0}
.svcw p{font-size:14px;line-height:1.45;color:#C5CDD8;margin:0}
.svcw__more{font:400 13px var(--sans);color:#FFC56B;margin-top:2px}
.svcw__vis{position:relative;height:190px;border-radius:16px;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:10px;background:rgba(255,255,255,.04)}
.svcw__vis .tg{position:absolute;font:400 9px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#fff;background:rgba(7,11,20,.55);padding:5px 8px;border-radius:99px;z-index:2}
.svcw__vis .tg.l{left:8px;top:8px}.svcw__vis .tg.r{right:8px;top:8px}
.svcw__vis .arr{font:300 22px var(--sans);color:#FFC56B;flex:none}
/* vorher/nachher Bild */
.svcw__ba{position:relative;flex:1;height:100%;background:center/cover no-repeat}
.svcw__ba.vorher{filter:grayscale(.55) brightness(.72) contrast(.82)}
/* Speisekarte vorher/nachher */
.svcw__menu{flex:1;height:84%;border-radius:10px;padding:30px 12px 26px;display:flex;flex-direction:column;gap:6px;font-size:11px}
.svcw__menu.alt{background:#f2f0ea;color:#333;font-family:'Times New Roman',serif}
.svcw__menu.alt b{font-weight:700;font-size:13px;text-decoration:underline}
.svcw__menu.alt span{display:flex;justify-content:space-between;border-bottom:1px dashed #bbb}
.svcw__menu.neu{background:linear-gradient(160deg,#fffaf2,#f6ecdf);color:#0B1220}
.svcw__menu.neu b{font:400 italic 16px/1 var(--serif3);color:#B65F22}
.svcw__menu.neu span{display:flex;gap:6px;align-items:baseline}.svcw__menu.neu span i{flex:1;border-bottom:1px dotted rgba(11,18,32,.3)}
/* Bild → Video, Social */
.svcw__reel{position:relative;height:92%;aspect-ratio:9/16;border-radius:12px;background:center/cover no-repeat;box-shadow:0 10px 24px -10px rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.3)}
.svcw__reel .pl{position:absolute;left:50%;top:50%;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;background:rgba(7,11,20,.45);border:1px solid rgba(255,255,255,.6)}
.svcw__reel .pl::after{content:"";position:absolute;left:13px;top:10px;border-left:11px solid #fff;border-top:7px solid transparent;border-bottom:7px solid transparent}
.svcw__reel .bar{position:absolute;left:8px;right:8px;bottom:8px;height:3px;border-radius:2px;background:rgba(255,255,255,.35);overflow:hidden}
.svcw__reel .bar::after{content:"";position:absolute;inset:0;width:45%;background:#FFC56B}
.svcw__reel .ic{position:absolute;right:6px;bottom:22px;display:flex;flex-direction:column;gap:6px;font-size:13px;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.6)}
.svcw__photo{height:80%;aspect-ratio:1;border-radius:10px;background:center/cover no-repeat;border:1px solid rgba(255,255,255,.25)}
.svc__nav{position:absolute;top:50%;translate:0 -50%;z-index:200;width:46px;height:46px;border-radius:50%;font:300 18px var(--sans);color:#fff;background:rgba(10,16,30,.5);border:1px solid rgba(255,255,255,.22);cursor:pointer}
.svc__nav.prev{left:14px}.svc__nav.next{right:14px}
.svc__dots{display:flex;justify-content:center;gap:7px;margin-top:6px}
.svc__dots i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.3);transition:width .3s,background .3s}
.svc__dots i.on{width:20px;border-radius:9px;background:#FFC56B}
@media (max-width:700px){
  .svc{margin:8px -14px 0;flex:none;height:470px}
  .svc__track{min-height:470px}
  .svcw{width:78vw;padding:14px 14px 16px}
  .svcw__vis{height:200px}
  .svc__nav{display:none}
}

/* ---------- Runde 6: Referenz-Websites als Kacheln (Vorschaubild hat selbst Schrift -> Name unten auf dunklem Verlauf) ---------- */
.tile.ref::before{background:linear-gradient(180deg,rgba(7,11,20,.28),transparent 22%,transparent 46%,rgba(7,11,20,.9) 88%)}
.tile.ref .bot{align-items:flex-end}
.tile.ref .bot>span:first-child{display:flex;flex-direction:column;gap:4px;min-width:0}
.tile.ref .bot .nm{font-size:clamp(21px,1.9vw,28px)}
.tile.ref .bot small{font-size:13.5px;opacity:.86;line-height:1.35}
.tile.ref .bot .pill{flex:none}

/* Runde 7: Website-Kacheln als Mini-Browser. Drüberfahren = die echte Seite scrollt langsam durch (kein Zoom, kein Video). Handy: Standbild, mittig */
.tile.ref .media img{transform:none!important;transition:none}
.tile.ref .strip{position:absolute;inset:0;overflow:hidden;opacity:0;transition:opacity .4s}
.tile.ref .strip img{position:absolute;left:0;top:0;width:100%;height:auto;display:block;translate:0 0;transition:translate .9s var(--ease)}
.tile.ref.ld .strip{opacity:1}
.tile.ref.go .strip img{translate:0 calc(-100% * (var(--n,6) - 1) / var(--n,6));transition:translate calc(var(--n,6) * 1.7s) cubic-bezier(.42,0,.4,1)}
.tile.ref .browser{z-index:3}
.tile.ref.go .browser{opacity:1}
@media (max-width:700px){
  .v13 .hs #websites .track,.v13 #websites .track{padding:0 10vw}
  .v13 #websites .tile{aspect-ratio:16/10}
  .tile.ref .strip{display:none}
}

/* Runde 8: Scroll-Aufnahme statt Bildstreifen */
.tile.ref video.rec{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .45s;z-index:0}
.tile.ref.ld video.rec{opacity:1}
@media (max-width:700px){.tile.ref video.rec{display:none}}

/* Runde 8: Leistung 02 wie Leistung 01 – Desktop fährt die Spur beim Scrollen nach rechts durch, Handy wischt (gleiche Regeln wie #websites) */
.v13 #content .track.svct{gap:22px;align-items:stretch}
.track.svct .svcw{position:relative;left:auto;top:auto;translate:none;flex:none;width:min(460px,34vw);opacity:1!important;transform:none;z-index:auto;filter:none}
.track.svct .svcw:hover{border-color:rgba(255,197,107,.45);box-shadow:0 30px 70px -30px rgba(0,0,0,.75),0 0 50px -20px rgba(255,170,90,.4)}
.track.svct .svcw__vis{height:min(230px,26vh)}
@media (max-width:700px){
  .v13 #content .track.svct{padding:0 10vw;gap:12px}
  .track.svct .svcw{width:80vw;scroll-snap-align:center}
  .track.svct .svcw__vis{height:190px}
}
.svcw.soon .svcw__vis{filter:saturate(.7) brightness(.85)}
.svcw.soon .svcw__more{color:rgba(238,242,246,.6)}