/* We Frame – gemeinsames CSS (Header, Hero-Video, Formular, Footer-Rahmen)
Layout: editorial clean, weisser Grund, pinke Akzente, Mono-Labels. Blöcke bringen ihr eigenes CSS mit. */
:root{
--pink:#E71D73;
--pink-dark:#c4005e;
--ink:#0a0908;
--dim:#666;
--line:#e8e8e8;
--bg:#ffffff;
--bg2:#f7f6f4;
--font:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
--mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
--header-h:68px;
--gutter:2.5rem;
--maxw:1240px;
--space:5.5rem;
}
@media(max-width:900px){:root{--gutter:1.8rem;--header-h:62px;--space:4rem}}
@media(max-width:700px){:root{--gutter:1.4rem;--header-h:58px;--space:4.2rem}}
@media(max-width:380px){:root{--gutter:1.2rem;--space:3.8rem}}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 8px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased;overflow-x:clip}
img,video{max-width:100%}
main{display:block}
:focus-visible{outline:2px solid var(--pink);outline-offset:3px}
::selection{background:var(--pink);color:#fff}
.skip-link{position:absolute;left:1rem;top:-100px;z-index:10001;background:var(--ink);color:#fff;padding:.7rem 1rem;font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;text-decoration:none}
.skip-link:focus{top:1rem}
/* ---------- Buttons ---------- */
.btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:44px;padding:.95rem 1.6rem;border:0;border-radius:999px;background:var(--pink);color:#fff;font-family:var(--font);font-size:.82rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:background .2s,transform .2s}
.btn-primary:hover{background:var(--pink-dark)}
.btn-primary:active{transform:translateY(1px)}
/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:1000;border-bottom:1px solid transparent;transition:border-color .25s,box-shadow .25s}
/* Unschärfe auf eigener Ebene: backdrop-filter direkt am Header würde das fixe Handy-Menü auf Header-Höhe einsperren */
.site-header::before{content:'';position:absolute;inset:0;z-index:-1;background:rgba(255,255,255,.92);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px)}
body.menu-open .site-header::before{background:#fff}
.site-header.is-scrolled{border-bottom-color:var(--line)}
.site-header__inner{max-width:var(--maxw);margin:0 auto;height:var(--header-h);padding:0 var(--gutter);display:flex;align-items:center;gap:2rem}
.site-logo{display:flex;align-items:center;flex:none}
.site-logo img{display:block;height:34px;width:auto}
.site-nav{margin-left:auto}
.site-nav ul{display:flex;gap:.35rem;list-style:none;margin:0;padding:0}
.site-nav a{position:relative;display:block;padding:.6rem .75rem;font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);text-decoration:none;transition:color .2s}
.site-nav a::before{content:'+';position:absolute;left:-.05rem;color:var(--pink);opacity:0;transform:translateX(4px);transition:opacity .2s,transform .2s}
.site-nav a:hover{color:var(--pink)}
.site-nav a[aria-current="page"]{color:var(--pink)}
.site-nav a[aria-current="page"]::before,.site-nav a:hover::before{opacity:1;transform:none}
.site-cta{flex:none;display:inline-flex;align-items:center;gap:.4rem;min-height:40px;padding:.6rem 1.15rem;border-radius:999px;background:var(--pink);color:#fff;font-size:.74rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;text-decoration:none;transition:background .2s}
.site-cta:hover{background:var(--pink-dark)}
.site-burger{display:none;margin-left:auto;width:44px;height:44px;border:0;background:transparent;cursor:pointer;position:relative;color:var(--ink)}
.site-burger span{position:absolute;left:11px;right:11px;height:2px;background:currentColor;transition:transform .3s,top .3s}
.site-burger span:first-child{top:17px}
.site-burger span:last-child{top:25px}
.site-burger[aria-expanded="true"] span:first-child{top:21px;transform:rotate(45deg)}
.site-burger[aria-expanded="true"] span:last-child{top:21px;transform:rotate(-45deg)}
.site-mobile{position:fixed;inset:var(--header-h) 0 0 0;z-index:1001;height:calc(100dvh - var(--header-h));background:#fff;padding:1.5rem var(--gutter) calc(2rem + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;justify-content:space-between;overflow-y:auto;border-top:1px solid var(--line)}
.site-mobile[hidden]{display:none}
.site-mobile ul{list-style:none;margin:0;padding:0}
.site-mobile li{border-bottom:1px solid var(--line)}
.site-mobile li a{display:flex;align-items:baseline;gap:1rem;padding:1rem 0;font-size:clamp(1.9rem,9vw,2.6rem);font-weight:900;letter-spacing:-.035em;line-height:1;color:var(--ink);text-decoration:none}
.site-mobile li a .n{font-family:var(--mono);font-size:.62rem;font-weight:400;letter-spacing:.15em;color:var(--pink)}
.site-mobile li a[aria-current="page"]{color:var(--pink)}
.site-mobile__foot{display:flex;flex-direction:column;align-items:flex-start;gap:.9rem;padding-top:2rem}
.site-mobile__mail{font-weight:700;color:var(--ink);text-decoration:none}
.site-mobile__meta{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
body.menu-open{overflow:hidden}
@media(max-width:1060px){.site-nav a{padding:.6rem .5rem;letter-spacing:.1em}.site-header__inner{gap:1.2rem}}
@media(max-width:900px){
.site-nav,.site-cta{display:none}
.site-burger{display:block}
.site-logo img{height:30px}
}
@media(max-width:380px){.site-logo img{height:26px}}
/* ---------- Hero-Video (alle Seiten gleich) ---------- */
.hero-video{position:relative;width:100%;aspect-ratio:21/9;max-height:calc(78vh - var(--header-h));min-height:280px;overflow:hidden;background:var(--ink)}
.hero-video video{position:absolute;inset:-2px;width:calc(100% + 4px);height:calc(100% + 4px);max-width:none;transform:scale(1.006);object-fit:cover;object-position:var(--hero-pos,center);display:block}
.hero-video::after{content:'';position:absolute;inset:auto 0 0 0;height:30%;background:linear-gradient(180deg,transparent,rgba(10,9,8,.28));pointer-events:none}
.hero-video__down{position:absolute;left:50%;bottom:1.4rem;z-index:2;width:46px;height:46px;margin-left:-23px;border-radius:50%;background:var(--pink);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 20px rgba(231,29,115,.35);transition:transform .25s,background .2s;animation:wf-bob 2.4s ease-in-out infinite}
.hero-video__down:hover{background:var(--pink-dark)}
@keyframes wf-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
@media(max-width:700px){
.hero-video{aspect-ratio:4/3;min-height:0;max-height:62vh}
.hero-video__down{width:40px;height:40px;margin-left:-20px;bottom:1rem}
}
/* ---------- Kontakt (Originalblock «Lass uns reden» + Formular) ---------- */
.wf-form{background:var(--bg2);border-top:1px solid var(--line)}
.wf-form__wrap{max-width:var(--maxw);margin:0 auto;padding:5rem var(--gutter);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:4rem;align-items:start}
.wf-eyebrow{display:block;margin-bottom:1rem;font-family:var(--mono);font-size:.65rem;letter-spacing:.2em;text-transform:uppercase;color:var(--pink)}
.wf-form__title{margin:0 0 1.6rem;font-weight:900;text-wrap:balance;color:var(--pink);text-transform:none;letter-spacing:-.04em;line-height:.95;font-size:clamp(2.5rem,6vw,4.5rem)}
.wf-form__title span{color:inherit}
.wf-form__info{display:flex;flex-direction:column;align-items:flex-start;gap:1.4rem;max-width:400px}
.wf-form__info p{margin:0;font-size:.95rem;line-height:1.5;color:#555}
.wf-form__info p strong{color:var(--ink)}
.wf-form__info .wf-form__direct{width:100%}
.wf-form__formhead{grid-column:1/-1;margin:0;font-size:.95rem;line-height:1.5;color:var(--dim)}
.wf-form__formhead .wf-eyebrow{margin-bottom:.5rem}
.wf-form__lead{margin:0 0 2rem;max-width:34ch;font-size:1rem;line-height:1.65;color:var(--dim)}
.wf-form__lead a{color:var(--ink);font-weight:700;text-decoration:none;border-bottom:1px solid var(--pink)}
.wf-form__direct{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.wf-form__direct li{display:flex;justify-content:space-between;gap:1rem;padding:.8rem 0;border-bottom:1px solid var(--line);font-size:.92rem}
.wf-form__direct span{font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);align-self:center}
.wf-form__direct a{color:var(--ink);text-decoration:none;font-weight:700;font-variant-numeric:tabular-nums}
.wf-form__direct a:hover{color:var(--pink)}
.wf-form__form{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem 1.6rem;background:#fff;border:1px solid var(--line);padding:2.2rem}
.wf-field{display:flex;flex-direction:column;gap:.45rem;min-width:0;margin:0;padding:0;border:0}
.wf-field--full{grid-column:1/-1}
.wf-field label,.wf-field legend{font-family:var(--mono);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);padding:0}
.wf-field legend{margin-bottom:.7rem}
.wf-field input,.wf-field textarea{width:100%;font:inherit;font-size:1rem;color:var(--ink);background:transparent;border:0;border-bottom:1.5px solid #d6d4d0;border-radius:0;padding:.55rem 0;transition:border-color .2s}
.wf-field textarea{resize:vertical;min-height:7.5rem;line-height:1.55}
.wf-field input:focus,.wf-field textarea:focus{outline:none;border-bottom-color:var(--pink)}
.wf-field input:focus-visible,.wf-field textarea:focus-visible{outline:none;box-shadow:0 2px 0 0 var(--pink)}
.wf-field.is-invalid input,.wf-field.is-invalid textarea{border-bottom-color:#c4005e}
.wf-chips{display:flex;flex-wrap:wrap;gap:.45rem}
.wf-chips label{position:relative;cursor:pointer;font-family:var(--font);font-size:.82rem;letter-spacing:0;text-transform:none;color:var(--ink)}
.wf-chips input{position:absolute;opacity:0;width:1px;height:1px}
.wf-chips span{display:inline-block;padding:.5rem .85rem;border:1px solid #d6d4d0;border-radius:999px;transition:all .2s}
.wf-chips label:hover span{border-color:var(--ink)}
.wf-chips input:checked+span{background:var(--ink);border-color:var(--ink);color:#fff}
.wf-chips input:focus-visible+span{outline:2px solid var(--pink);outline-offset:2px}
.wf-form__submit{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;padding-top:.4rem}
.wf-form__privacy{margin:0;max-width:40ch;font-size:.78rem;line-height:1.5;color:var(--dim)}
.wf-form__privacy a{color:var(--ink)}
.wf-form__submit .btn-primary[disabled]{opacity:.6;cursor:progress}
.wf-form__status{margin:0;min-height:1.2em;font-weight:700;font-size:.92rem}
.wf-form__status.is-ok{color:#13795b}
.wf-form__status.is-err{color:#c4005e}
.wf-form__form.is-sent .wf-field,.wf-form__form.is-sent .wf-form__submit{display:none}
.wf-form__form.is-sent .wf-form__status{font-size:1.25rem;font-weight:800;letter-spacing:-.01em;color:var(--ink);padding:2rem 0}
.wf-hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
@media(max-width:900px){
.wf-form__wrap{grid-template-columns:1fr;gap:2.4rem;padding:3.2rem var(--gutter)}
}
@media(max-width:700px){
.wf-form__wrap{padding:2.6rem var(--gutter)}
.wf-form__form{grid-template-columns:1fr;padding:1.4rem 1.2rem;gap:1.3rem}
.wf-form__title{font-size:2.4rem}
.wf-form__info{gap:1.1rem;max-width:none}
.wf-form__submit{flex-direction:column-reverse;align-items:stretch}
.wf-form__submit .btn-primary{width:100%}
}
/* ---------- 404 ---------- */
.wf-404{max-width:var(--maxw);margin:0 auto;padding:7rem var(--gutter) 6rem;min-height:60vh}
.wf-404__code{font-size:clamp(6rem,26vw,18rem);font-weight:900;letter-spacing:-.06em;line-height:.8;color:var(--pink)}
.wf-404 h1{margin:2rem 0 1rem;font-size:clamp(1.8rem,4vw,3rem);font-weight:900;letter-spacing:-.03em;line-height:1}
.wf-404 p{margin:0 0 2rem;color:var(--dim);font-size:1.05rem;line-height:1.6;max-width:46ch}
.wf-404__links{display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;align-items:center}
.wf-404__links a:not(.btn-primary){font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);text-decoration:none}
.wf-404__links a:not(.btn-primary)::before{content:'+ ';color:var(--pink)}
.wf-404__links a:not(.btn-primary):hover{color:var(--pink)}
/* ---------- Vereinheitlichung (Phase 3b) ----------
Eine Inhaltsbreite und ein Seitenrand für alle Blöcke, statt 1100/1140/1200/1300/1400/1500 px */
body [class^="blk-"] .wrap{padding-left:var(--gutter);padding-right:var(--gutter);margin-left:auto;margin-right:auto}
body [class^="blk-"]:not(.blk-home-05) .wrap,body .blk-glambot-01 .hero{padding-left:var(--gutter)!important;padding-right:var(--gutter)!important}
@media(min-width:701px){body .blk-home-05 .wrap{padding-left:var(--gutter)!important;padding-right:var(--gutter)!important}}
body [class^="blk-"] .wrap,body .blk-glambot-01 .hero{max-width:var(--maxw)}
/* Rechtstexte & Rental: gleiche linke Kante wie der Rest, Lesebreite bleibt schmal */
:is(.page-impressum,.page-datenschutz,.page-agb,.page-rental) [class^="blk-"] .wrap>*{max-width:900px}
body .blk-home-01 .hero{padding-left:max(var(--gutter),calc((100% - var(--maxw))/2 + var(--gutter)));padding-right:max(var(--gutter),calc((100% - var(--maxw))/2 + var(--gutter)))}
body .blk-footer-00 .footer{max-width:var(--maxw);padding-left:var(--gutter);padding-right:var(--gutter)}
/* Showreel: zwei Clips gross (je 2x2) + 8 kleine = genau 4 volle Reihen à 4 */
body .blk-home-05 .grid{grid-template-columns:repeat(4,1fr)}
body .blk-home-05 .reel:nth-child(-n+2){grid-column:span 2;grid-row:span 2;aspect-ratio:16/9}
body .blk-home-05 .reel:nth-child(-n+2) .reel-title{font-size:1.6rem}
body .blk-home-05 .reel:nth-child(-n+2) .play{width:64px;height:64px}
@media(max-width:1100px){
body .blk-home-05 .grid{grid-template-columns:repeat(2,1fr)!important}
body .blk-home-05 .reel:nth-child(-n+2){grid-row:auto;aspect-ratio:16/9}
}
@media(max-width:700px){
body .blk-home-05 .grid{grid-template-columns:none!important}
body .blk-home-05 .reel:nth-child(-n+2){grid-column:auto;aspect-ratio:16/9!important}
body .blk-home-05 .reel:nth-child(-n+2) .reel-title{font-size:1.05rem}
}
.blk-home-05 .reel-title{text-wrap:balance}
/* Content-Ablauf: Tablet – Nummer + Titel oben, Text darunter über die volle Breite */
@media(min-width:701px) and (max-width:900px){
body .blk-content-03 .proc-row{grid-template-columns:70px 1fr;row-gap:.6rem}
body .blk-content-03 .proc-text{grid-column:2}
}
/* Content-Beispiele: Projekt-Label auf dem Handy nicht über dem Eyebrow */
@media(max-width:600px){
body .blk-content-04 .case-box{padding-top:3rem}
body .blk-content-04 .case-box-label{position:static;display:block;text-align:center;margin-bottom:.6rem}
}
/* Studio: Feinschliff (Fehler waren schon im Original) */
@media(max-width:900px){
body .blk-studio-01 .tool-box{padding-top:3.2rem}
body .blk-studio-01 .tool-img-mini-label{display:none}
body .blk-studio-01 .dim-tag{justify-self:start;width:max-content;max-width:100%}
}
body .blk-studio-01 .mosaic{grid-auto-flow:dense}
body .blk-studio-01 .tool-img img{max-width:92%;max-height:100%}
body .blk-studio-01 .tool-box{overflow:clip}
body .blk-studio-01 .box-rent-num{width:auto;white-space:nowrap}
@media(max-width:700px){
body .blk-studio-01 .imp-stats{display:grid;grid-template-columns:repeat(2,1fr);justify-items:center;gap:1.4rem 1rem}
}
/* Footer Tablet: Kontakt · Sitemap · Legal nebeneinander */
@media(min-width:701px) and (max-width:900px){body .blk-footer-00 .footer-grid{grid-template-columns:repeat(3,1fr)}}
/* ---------- Freigestellt statt Kästen ----------
Roboter, Kamera, Grundriss und Storyboards stehen frei auf Weiss: kein Rand, kein Grau, keine Pink-Ecken */
body .blk-studio-01 :is(.tool-box,.plan-box),body .blk-content-04 .case-box{background:transparent;border:0;padding-left:0;padding-right:0}
body .blk-studio-01 :is(.tool-box,.plan-box)::before,body .blk-studio-01 :is(.tool-box,.plan-box)::after,
body .blk-content-04 .case-box::before,body .blk-content-04 .case-box::after{display:none}
body .blk-studio-01 :is(.tool-box-label,.plan-label),body .blk-content-04 .case-box-label{right:0}
body .blk-studio-01 .tool-box{padding-top:2.4rem}
body .blk-content-04 .case-box{border-top:1px solid var(--line);padding-top:3rem}
/* Nur das freigestellte Bild: kein Schimmer, kein Schatten */
body .blk-studio-01 .tool-img::before,body .blk-studio-01 .tool-img::after{display:none}
body .blk-studio-01 .tool-img img{filter:none}
/* Phantom-Kamera waagrecht statt 10° schräg */
/* Kamera vertikal mittig zwischen «Direkt-Transfer …» und «Trigger-Programmierung am Set» */
@media(min-width:901px){
body .blk-studio-01 #phantom .box-single{align-items:stretch}
body .blk-studio-01 #phantom .tool-card:last-child{display:flex;flex-direction:column;justify-content:center;align-items:stretch;padding-top:4.15rem}
body .blk-studio-01 #phantom .img-phantom{height:auto;width:100%;margin:0;align-items:center}
body .blk-studio-01 #phantom .img-phantom img{max-height:none;max-width:100%}
body .blk-studio-01 #phantom .tool-img-mini-label{transform:translateY(-300%)}
}
body .blk-studio-01 .img-phantom img{transform:none}
body .blk-studio-01 .img-phantom:hover img{transform:scale(1.03)}
/* ---------- Handy: reduziert auf das Wichtigste ---------- */
@media(max-width:700px){
/* doppelte Kontakt-Aufrufe – dafür gibt es die feste Leiste unten */
body :is(.blk-home-04,.blk-content-02) .cta-bar,
body .blk-studio-01 .box-cta{display:none!important}
/* Bildstrecken kürzen */
body .blk-home-03 .cell:nth-child(n+5){display:none}
body .blk-content-05 .cta-bar,body .blk-content-04 .case-box+.case-box .step-block:first-child{display:none!important}
body .blk-home-03 .strip{grid-template-columns:repeat(2,1fr)!important;gap:.6rem!important}
body .blk-studio-01 .mosaic-item:nth-child(n+7){display:none}
/* Footer: Sitemap steckt schon im Menü */
body .blk-footer-00 .footer-grid>div:nth-child(3){display:none}
/* Hero-Meta-Zeile auf der Startseite */
body .blk-home-01 .hero-meta{display:none}
/* mehr Luft im Text */
body [class^="blk-"] p{line-height:1.65}
body .blk-content-04 .case-box{padding-top:2.4rem}
}
/* Videos randlos: keine Haarlinie vom schwarzen Rahmen-Hintergrund */
body .blk-home-05 .reel-thumb{inset:-2px;width:calc(100% + 4px);height:calc(100% + 4px);max-width:none}
.hero-video{background:transparent}
body [class^="blk-"] :is(.video-portrait,.video-landscape):not(.playing) video{transform:scale(1.02)}
body [class^="blk-"] .video-portrait:not(.playing):hover video{transform:scale(1.04)}
body [class^="blk-"] .video-landscape:not(.playing):hover video{transform:scale(1.03)}
/* Startseite: kein WF-Wasserzeichen im Hero */
body .blk-home-01 .deco{display:none}
/* ---------- QA-Korrekturen 13.10.2026 ---------- */
/* Studio: Abstand nur einmal (Sektion hatte eigenes Padding zusätzlich zum Container) */
body .blk-studio-01 .section,body .blk-studio-01 .hero-section{padding-top:0;padding-bottom:0}
/* Studio-Bildstrecke: Köpfe nicht abschneiden */
body .blk-studio-01 .mosaic-item img{object-position:center 22%}
/* Grundriss antippbar (gross öffnen) */
body .blk-studio-01 .plan-zoom{display:block;cursor:zoom-in}
@media(max-width:700px){body .blk-studio-01 .plan-zoom::after{content:'Antippen zum Vergrössern';display:block;margin-top:.5rem;font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);text-align:center}}
/* Glambot-Karten am Handy: Text bündig statt 40 px eingerückt */
@media(max-width:700px){
body .blk-glambot-01 .product{padding:1.6rem 0}
body .blk-glambot-01 .product:first-child{padding:1.6rem 1rem}
}
/* Überschriften ohne einzelnes Wort in der letzten Zeile */
body [class^="blk-"] :is(h1,h2,h3),.wf-form__title{text-wrap:balance}
/* Antipp-Flächen am Handy mind. 44 px */
@media(max-width:700px){
body .blk-footer-00 .col-item a,body .blk-footer-00 .social a{display:inline-flex;align-items:center;min-height:44px}
body .blk-footer-00 .col-item{margin-bottom:0}
body .blk-home-07 a[href^="tel"],body .blk-home-07 a[href^="mailto"]{display:inline-flex;align-items:center;min-height:44px}
.wf-form__direct a{display:inline-flex;align-items:center;min-height:44px}
.wf-chips span{padding:.75rem 1rem}
}
/* Kleinste Labels lesbar (vorher 8–9.6 px) */
.wf-field label,.wf-field legend{font-size:.68rem}
body .blk-studio-01 .mosaic-idx,body [class^="blk-"] .idx{font-size:.62rem;background:rgba(10,9,8,.55);padding:.15rem .35rem}
/* Handy-Tab «01 Content» bei 320 px nicht abschneiden */
@media(max-width:380px){body .blk-home-04 .mob-tab{letter-spacing:0;font-size:.58rem;text-overflow:clip}}
/* Handy-Leiste ausser Sicht nicht fokussierbar */
@media(max-width:700px){.mbar{visibility:hidden;transition:transform .35s cubic-bezier(.2,.7,.2,1),visibility .35s}body.mbar-on .mbar{visibility:visible}}
/* Hero-Video: Pause-Knopf */
.hero-video__pause{position:absolute;z-index:2;left:var(--gutter);bottom:1.4rem;width:40px;height:40px;border-radius:50%;border:1.5px solid rgba(255,255,255,.85);background:rgba(10,9,8,.25);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:background .2s}
.hero-video__pause:hover{background:rgba(10,9,8,.5)}
.hero-video__pause span{width:12px;height:12px;border-left:3px solid #fff;border-right:3px solid #fff}
.hero-video__pause.is-paused span{width:0;height:0;border:0;border-style:solid;border-width:7px 0 7px 11px;border-color:transparent transparent transparent #fff;margin-left:3px}
@media(max-width:700px){.hero-video__pause{width:36px;height:36px;bottom:1rem}}
/* Tabs auf dem Handy gross genug zum Tippen */
@media(max-width:700px){body .blk-home-04 .mob-tab{min-height:44px;font-size:.62rem;letter-spacing:.05em;padding-left:.2rem;padding-right:.2rem}}
/* Einheitlicher Sektionsrhythmus */
body [class^="blk-"] .wrap{padding-top:var(--space);padding-bottom:var(--space)}
body .wf-form__wrap{padding-top:calc(var(--space) * 1.1);padding-bottom:calc(var(--space) * 1.1)}
/* Buttons: ein Verhalten für alle pinken Pills */
body :is(.btn-primary,.site-cta,.mbar__book),body [class^="blk-"] :is(.btn-p,.cta-link,.btn){transition:background .2s,transform .2s,box-shadow .2s}
body :is(.btn-primary,.site-cta),body [class^="blk-"] :is(.btn-p,.cta-link,.btn){will-change:transform}
@media(hover:hover){
body :is(.btn-primary,.site-cta):hover,body [class^="blk-"] :is(.btn-p,.cta-link,.btn):hover{transform:translateY(-2px);box-shadow:0 10px 24px -8px rgba(231,29,115,.55)}
}
/* Sanftes Einblenden der Sektionen (nur unterhalb des ersten Bildschirms, nur mit JS) */
.wf-pre{opacity:0;transform:translateY(28px)}
.wf-show{opacity:1;transform:none;transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
/* Showreel: Vorschau beim Überfahren */
@media(hover:hover){body .blk-home-05 .reel.is-preview .reel-thumb{filter:brightness(1.02) contrast(1.08)}}
/* Handy: feste Kontaktleiste */
.mbar{display:none}
@media(max-width:700px){
.mbar{position:fixed;left:0;right:0;bottom:0;z-index:999;display:grid;grid-template-columns:auto 1fr;gap:.6rem;padding:.6rem var(--gutter) calc(.6rem + env(safe-area-inset-bottom,0px));background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-top:1px solid var(--line);transform:translateY(110%);transition:transform .35s cubic-bezier(.2,.7,.2,1)}
body.mbar-on .mbar{transform:none}
body.menu-open .mbar{transform:translateY(110%)}
.mbar a{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;min-height:46px;border-radius:999px;font-size:.78rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;text-decoration:none}
.mbar__call{padding:0 1.1rem;border:1.5px solid var(--ink);color:var(--ink)}
.mbar__book{background:var(--pink);color:#fff}
body{padding-bottom:calc(66px + env(safe-area-inset-bottom,0px))}
}
/* Blöcke: Reveal nicht unsichtbar lassen, falls JS fehlt */
.no-js .reveal{opacity:1!important;transform:none!important}
@media (prefers-reduced-motion: reduce){
html{scroll-behavior:auto}
*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
/* ==========================================================
QA 11 – Struktur-System + Handy-Text (13.10.2026)
Nur CSS, kein Text geändert.
========================================================== */
:root{--pink-text:#D11766} /* Text-Pink mit 5.2:1 Kontrast (siehe QA 09) */
/* ---------- S1 Sektionsbänder: was zusammengehört, teilt eine Fläche ---------- */
/* Home: Intro weiss · Behind the Scenes Band · Leistungen weiss · Showreel dunkel · Kunden Band · Team weiss · Kontakt Band */
body .blk-home-03,body .blk-home-06{background:var(--bg2)}
/* Content: Intro weiss · Pakete Band · Ablauf weiss · Beispiele Band · FAQ weiss · Kontakt Band */
body .blk-content-02,body .blk-content-04{background:var(--bg2)}
body .blk-content-02 .pkg:not(.featured){background:#fff} /* Preiskarten heben sich als Gruppe ab */
body .blk-content-04 .case-box{border-top-color:#e2dfda} /* Linie auf dem Band sichtbar */
/* Studio: Hero weiss · Tools 01–03 EIN Band · Location + Impressionen weiss · Buchung + FAQ weiss · Kontakt Band */
body .blk-studio-01 :is(#moco,#trigger,#phantom){background:var(--bg2);border-bottom-color:#e2dfda}
body .blk-studio-01 #phantom{border-bottom:0} /* Band endet ohne Doppellinie */
/* Glambot: Hero weiss · Produkte Band (Karten weiss) · Ablauf weiss · Kontakt Band */
body .blk-glambot-01>.section:nth-of-type(2){background:var(--bg2)}
body .blk-glambot-01 .product:not(.featured){background:#fff}
body .blk-glambot-01>.section:nth-of-type(2)>.wrap{padding-top:var(--space)!important} /* Wrap hat inline padding-top:0 */
@media(max-width:700px){body .blk-glambot-01 .product{padding:1.6rem 1.2rem}} /* weisse Karte braucht Innenabstand */
/* ---------- S2 Eine Überschriften-Skala für alle Sektions-H2 ---------- */
body [class^="blk-"] h2:not(.wf-form__title),body .blk-home-06 .title{
font-size:clamp(1.85rem,3.6vw,3.2rem)!important; /* 30 px Handy · 51 px Desktop (vorher 24–80 px); !important wegen Inline-Styles */
font-weight:800!important;letter-spacing:-.03em!important;line-height:1.02!important;text-transform:none!important}
.wf-form__title{font-size:clamp(2.2rem,4.4vw,4rem)} /* Kontakt bleibt der grösste Abschluss, aber nicht 72 px */
/* Farbe: Zeile 1 schwarz, Zeile 2 pink – auch dort, wo im HTML nur
statt steht */
body :is(.blk-content-02,.blk-glambot-01) h2{color:var(--pink)!important}
body :is(.blk-content-02,.blk-glambot-01) h2::first-line{color:var(--ink)}
/* ---------- S3 Eyebrow = Sektionsmarke: überall gleich ---------- */
body [class^="blk-"] .eyebrow,.wf-form .wf-eyebrow{
font-family:var(--mono)!important;font-size:.7rem!important;letter-spacing:.18em!important;
text-transform:uppercase;color:var(--pink-text)!important;margin-bottom:.9rem!important;display:block}
/* ---------- S4 Lead-Texte: eine Stimme (keine Mono-Versalien als Fliesstext) ---------- */
body .blk-home-04 .intro,body .blk-glambot-01 .hero-sub{
font-family:var(--font)!important;text-transform:none!important;letter-spacing:0!important;
font-size:1rem!important;line-height:1.6!important;color:var(--dim)!important}
/* ---------- S5 Doppelte Startseiten-Headline weg (bleibt für Google im HTML) ---------- */
body .blk-home-02 .sec-top{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
body .blk-home-02 .wrap{padding-top:calc(var(--space)*.6)} /* Intro schliesst an den Hero an */
/* ---------- S6 Kundenliste lesbar (vorher #e8e8e8 = fast unsichtbar) ---------- */
body .blk-home-06 .flow{color:#c9c3bb} /* auf dem Band sichtbar, bleibt Textur; Hover pink bleibt */
/* ---------- S7 Studio: Kontakt-Zeile nur einmal am Ende der Tools ---------- */
body .blk-studio-01 :is(#moco,#trigger,#studio) .box-cta{display:none}
/* ---------- S7b Studio: Doppel-Titel in den Tool-Karten weg (H2 + Eyebrow sagen es schon) ---------- */
body .blk-studio-01 :is(#trigger,#phantom) :is(.tool-name,.tool-sub){display:none}
/* ---------- S8 Handy: Bänder trennen schon, Abstände dürfen kleiner werden ---------- */
@media(max-width:700px){:root{--space:3.4rem}}
/* ==========================================================
Handy-Text halbieren (≤ 700 px). HTML bleibt, Google liest alles.
========================================================== */
@media(max-width:700px){
/* Alle Seiten: Formular-Einleitung doppelt zur Kontaktliste */
.wf-form__formhead{display:none}
/* Home */
body .blk-home-02 .intro-body p.mobile-only~p.mobile-only{display:none} /* nur der 1. Absatz bleibt */
body .blk-home-03 .head .sub{display:none} /* die Bilder sprechen */
/* Content */
body .blk-content-01 .steps{display:none} /* 4 Claims – der Lead sagt es schon, Preise rücken hoch */
body .blk-content-04 .step-cap{display:none} /* Bildunterschriften unter Storyboard/Spots */
body .blk-content-05 .top .lead{display:none} /* FAQ-Intro */
/* Studio */
body .blk-studio-01 .top-tags{display:none} /* Meta-Zeile wie auf Home (.hero-meta) */
body .blk-studio-01 :is(.imp-head,.process-top,.faq-top) .lead{display:none}
body .blk-studio-01 :is(#trigger,#phantom) .tool-desc{display:none} /* wiederholt den Lead */
body .blk-studio-01 #moco .tool-desc{display:none} /* LIAM/AVA: Name + «The big/compact one» + Specs reichen */
/* Glambot */
body .blk-glambot-01 .product:not(.featured) .product-desc{display:none} /* die 4-Punkte-Liste bleibt */
body .blk-glambot-01 .cta-desc{display:none} /* Button sagt «glambot.ch öffnen» */
body .blk-glambot-01 .process-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem} /* nur Titel → 2×2 */
body .blk-glambot-01 .proc-step{border:0;border-bottom:1px solid var(--line);padding:1.2rem 0}
/* «Mehr lesen» – greift nur, wenn das JS die Klassen setzt (ohne JS bleibt alles sichtbar) */
.wf-clamp{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden;margin-bottom:0!important}
body .blk-studio-01 :is(.sec-head,.studio-top) .wf-clamp{-webkit-line-clamp:2;line-clamp:2} /* Sektions-Leads: 2 Zeilen */
.wf-clamp.is-open{display:block;-webkit-line-clamp:unset;overflow:visible}
.wf-fold:not(.is-open) .proc-text{display:none} /* Ablauf: nur Schritt-Titel */
.wf-more{display:inline-flex;align-items:center;min-height:44px;margin:.2rem 0 1rem;padding:0;border:0;background:none;
font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--pink-text);cursor:pointer}
.wf-more::after{content:' +';white-space:pre}
.wf-more[aria-expanded="true"]::after{content:' –'}
}
@media(min-width:701px){.wf-more{display:none}} /* Desktop: nie Buttons, nie gekürzt */
/* Kundenblock «Marken, die wir geframed haben» kleiner (Wunsch Saro 13.10.2026) */
body .blk-home-06 .title{font-size:clamp(1.5rem,2.6vw,2.3rem)!important}
body .blk-home-06 .flow{font-size:clamp(1rem,2vw,1.6rem);line-height:1.55}
body .blk-home-06 .wrap{padding-top:calc(var(--space)*.7);padding-bottom:calc(var(--space)*.7)}