@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:300 700;font-display:swap;src:url(fonts/SpaceGrotesk-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:300 700;font-display:swap;src:url(fonts/SpaceGrotesk-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{color-scheme:light;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}html{scroll-padding-top:env(safe-area-inset-top,0px)}body{margin:0;padding:0;font:14px -apple-system,BlinkMacSystemFont,sans-serif;background:#fff;color:#000}img{max-width:100%}[hidden]:not([hidden=until-found i]){display:none!important}

@font-face{font-family:"Satoshi";src:url("fonts/Satoshi-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Satoshi";src:url("fonts/Satoshi-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Satoshi";src:url("fonts/Satoshi-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Satoshi";src:url("fonts/Satoshi-Black.woff2") format("woff2");font-weight:900;font-style:normal;font-display:swap}
/* Layout: viewfinder frames. Two formats (16:9 Erklärvideo, 9:16 Social Branding) carry the whole site; everything else stays quiet on off-black. */
:root{
  --bg:#050607; --bg-2:#0e0f10; --bg-3:#16171a;
  --line:rgba(242,238,230,.12); --line-2:rgba(242,238,230,.22);
  --fg:#f2eee6; --fg-2:#c4bfb5; --fg-3:#8f8a80;
  --accent:#ff9e0a; --accent-2:#ffb547; --ink:#1a1000;
  --note:#ffe27a; --note-ink:#2a2200;
  --chip-bg:rgba(255,255,255,.055); --chip-line:rgba(255,255,255,.14);
  --chip-bg-2:rgba(255,255,255,.1); --chip-line-2:rgba(255,255,255,.28);
  --ease:cubic-bezier(.2,.7,.2,1);
  --display:"Space Grotesk",system-ui,sans-serif;
  --body:"Satoshi",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Space Grotesk",system-ui,sans-serif;
  --wrap:1240px;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--fg);font-family:var(--body);font-size:17.5px;line-height:1.62;font-stretch:100%;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--bg)}
img{max-width:100%;display:block}
a{color:inherit}
::selection{background:var(--accent);color:var(--ink)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
#stars{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:.55}
.grain{position:fixed;inset:-50%;z-index:1;pointer-events:none;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
main,header,footer{position:relative;z-index:2}

/* type */
h1,h2,h3{font-family:var(--display);font-stretch:112%;font-weight:800;letter-spacing:-.025em;line-height:1.02;margin:0;text-wrap:balance}
h1{font-size:clamp(2.4rem,calc(6.2 * var(--vw,1vw)),5.4rem)}
h2{font-size:clamp(1.9rem,calc(4 * var(--vw,1vw)),3.3rem)}
h3{font-size:clamp(1.15rem,calc(1.7 * var(--vw,1vw)),1.4rem);font-stretch:100%;font-weight:700;letter-spacing:-.01em;line-height:1.2}
p{margin:0;text-wrap:pretty}
.lead{font-size:clamp(1.08rem,calc(1.5 * var(--vw,1vw)),1.28rem);color:var(--fg-2);max-width:58ch;line-height:1.55}
.muted{color:var(--fg-2)}
.small{font-size:.9375rem}
.mono{font-family:var(--mono);font-size:.875rem;font-weight:600;font-stretch:108%;letter-spacing:.07em;text-transform:uppercase;color:var(--fg-3);font-variant-numeric:tabular-nums}
.hl{color:var(--accent)}
.measure{max-width:62ch}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:.6em;font:600 1rem/1 var(--body);padding:1rem 1.35rem;border-radius:4px;border:1px solid transparent;text-decoration:none;cursor:pointer;transition:transform .2s ease,background .2s ease,color .2s ease,border-color .2s ease}
.btn:active{transform:translateY(1px) scale(.985)}
.btn-primary{background:var(--accent);color:var(--ink)}
.btn-primary:hover{background:var(--accent-2)}
.btn-ghost{border-color:var(--line-2);color:var(--fg);background:transparent}
.btn-ghost:hover{border-color:var(--fg)}
.btn .arr{transition:transform .2s ease}
.btn:hover .arr{transform:translateX(3px)}
.tlink{color:var(--fg);text-decoration:none;font-weight:600;border-bottom:1px solid var(--accent);padding-bottom:2px;transition:color .2s}
.tlink:hover{color:var(--accent)}
.row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* header */
.hdr{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;transition:background .25s ease,border-color .25s ease;border-bottom:1px solid transparent}
.hdr.solid{background:rgba(5,6,7,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-color:var(--line)}
.hdr .wrap{display:flex;align-items:center;gap:24px;min-height:68px}
.logo{display:flex;align-items:center;text-decoration:none}
.logo img{height:22px;width:auto}
.nav{display:flex;gap:4px;margin-left:auto;align-items:center}
.nav a{font-size:.93rem;font-weight:500;color:var(--fg-2);text-decoration:none;padding:.5rem .7rem;border-radius:4px;transition:color .2s}
.nav a:hover{color:var(--fg)}
.nav a[aria-current="page"]{color:var(--fg)}
.nav a[aria-current="page"]::after{content:"";display:block;height:2px;background:var(--accent);margin-top:4px}
.lang{display:flex;border:1px solid var(--line-2);border-radius:4px;overflow:hidden;font-family:var(--mono);font-size:.875rem;font-weight:600}
.lang button{background:transparent;color:var(--fg-3);border:0;padding:.45rem .6rem;cursor:pointer;font:inherit}
.lang button[aria-pressed="true"]{background:var(--fg);color:var(--bg)}
.hdr .btn{padding:.72rem 1rem;font-size:.92rem}
.burger{display:none;margin-left:auto;background:none;border:0;color:var(--fg);padding:10px;cursor:pointer}
.burger svg{display:block}
@media (max-width:980px){
  .nav,.hdr .btn-primary{display:none}
  .burger{display:block;margin-left:2px;padding:10px 6px 10px 10px}
  .hdr .wrap{gap:12px}
  .hdr .lang{margin-left:auto;font-size:.8125rem}
  .hdr .lang button{padding:.5rem .55rem .5rem .5rem;min-height:40px}
  .hdr.open .nav{display:flex;position:absolute;left:12px;right:12px;top:68px;flex-direction:column;align-items:stretch;background:rgba(18,20,24,.97);border:1px solid var(--line);border-radius:10px;padding:10px;backdrop-filter:blur(14px)}
  .hdr.open .nav a{padding:.95rem 1rem;font-size:1.05rem;border-bottom:1px solid var(--line)}
  .hdr.open .nav a[aria-current="page"]::after{display:none}
  .hdr.open .nav a[aria-current="page"]{color:var(--accent)}
  .hdr.open .nav .m-only{display:flex}
  .hdr .nav a[data-nav="kontakt"]{display:none}
}
.m-only{display:none}
@media (max-width:360px){.hdr .lang button::before{display:none}.hdr .lang button{padding:.5rem .6rem}}

/* sections */
section{padding-block:clamp(64px,calc(8.5 * var(--vw,1vw)),116px);position:relative}
/* Section rhythm: A = night sky (transparent, fixed stars show through), B = studio (solid anthracite that slides over the sky like a screen), C = spotlight for the closing call to action. Alternation is automatic per page. */
.page > section:nth-of-type(even){
  background:linear-gradient(180deg,rgba(255,255,255,.07) 0%,rgba(255,255,255,.03) 26%,rgba(255,255,255,.022) 74%,rgba(255,255,255,.045) 100%),rgba(5,6,7,.4);
  border-top:1px solid rgba(255,255,255,.14);border-bottom:1px solid rgba(255,255,255,.07);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  --bg-2:rgba(255,255,255,.05); --bg-3:rgba(255,255,255,.08);
}
.page > section:has(> .wrap > .cta-band){
  background:radial-gradient(70% 90% at 82% 0%,rgba(255,158,10,.12) 0%,rgba(255,158,10,0) 62%),rgba(5,6,7,.55);
  border-block:1px solid rgba(255,255,255,.08);
  --bg-2:rgba(255,255,255,.04);
}
.page > section:has(> .wrap > .cta-band) .cta-band{background-color:rgba(255,255,255,.025);background-image:radial-gradient(120% 140% at 100% 0%,rgba(255,158,10,.12) 0%,rgba(255,158,10,0) 45%),linear-gradient(155deg,rgba(255,255,255,.09) 0%,rgba(255,255,255,.025) 45%,rgba(255,255,255,.045) 100%)}
.page > section:last-child{border-bottom:0}
.sec-head{display:grid;gap:18px;margin-bottom:clamp(36px,calc(5 * var(--vw,1vw)),64px)}
@media (max-width:640px){.sec-head{grid-template-columns:1fr!important}}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,calc(5 * var(--vw,1vw)),80px);align-items:start}
.split > *{min-width:0}
@media (max-width:860px){.split{grid-template-columns:1fr}}
.rule{border:0;border-top:1px solid var(--line);margin:0}

/* viewfinder frame */
.vf{position:relative;border-radius:6px;overflow:hidden;background:var(--bg-3);isolation:isolate}
.vf img{width:100%;height:100%;object-fit:cover}
.vf::after{content:"";position:absolute;inset:10px;z-index:2;pointer-events:none;
  background:
   linear-gradient(var(--fg),var(--fg)) top left/18px 1.5px no-repeat,
   linear-gradient(var(--fg),var(--fg)) top left/1.5px 18px no-repeat,
   linear-gradient(var(--fg),var(--fg)) top right/18px 1.5px no-repeat,
   linear-gradient(var(--fg),var(--fg)) top right/1.5px 18px no-repeat,
   linear-gradient(var(--fg),var(--fg)) bottom left/18px 1.5px no-repeat,
   linear-gradient(var(--fg),var(--fg)) bottom left/1.5px 18px no-repeat,
   linear-gradient(var(--fg),var(--fg)) bottom right/18px 1.5px no-repeat,
   linear-gradient(var(--fg),var(--fg)) bottom right/1.5px 18px no-repeat;opacity:.75}
.vf .shade{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(11,12,14,.35) 0%,rgba(11,12,14,0) 30%,rgba(11,12,14,0) 55%,rgba(11,12,14,.85) 100%)}
.vf .osd{position:absolute;z-index:3;left:22px;right:22px;display:flex;justify-content:space-between;gap:10px;font-family:var(--mono);font-size:.8125rem;font-weight:600;letter-spacing:.06em;color:var(--fg);font-variant-numeric:tabular-nums;text-shadow:0 1px 6px rgba(0,0,0,.5)}
.vf .osd.top{top:20px}.vf .osd.bot{bottom:20px;align-items:flex-end}
.rec{display:inline-flex;align-items:center;gap:6px}
.rec::before{content:"";width:7px;height:7px;border-radius:50%;background:#ff4b3a;animation:blink 1.6s steps(2,start) infinite}
@keyframes blink{to{visibility:hidden}}

/* HERO (home) */
.hero{padding-top:clamp(40px,calc(7 * var(--vw,1vw)),88px);padding-bottom:clamp(56px,calc(8 * var(--vw,1vw)),100px)}
.hero h1 .l2{display:block;color:var(--fg-3)}
.hero-grid{display:grid;grid-template-columns:1.62fr .62fr;gap:clamp(14px,calc(2 * var(--vw,1vw)),24px);margin-top:clamp(36px,calc(5 * var(--vw,1vw)),60px);align-items:end}
.hero-grid > a{text-decoration:none;color:inherit;display:block;min-width:0}
.frame-169{aspect-ratio:16/9}
.frame-916{aspect-ratio:9/16}
.hero-grid .vf{transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.hero-grid a:hover .vf{transform:translateY(-4px)}
.frame-cap{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:14px;flex-wrap:wrap}
.frame-cap strong{font-family:var(--display);font-stretch:110%;font-size:1.25rem;font-weight:750}
.frame-cap span{color:var(--fg-2);font-size:.95rem}
.frame-cap .go{color:var(--accent);font-weight:600;white-space:nowrap}
.sub{position:absolute;z-index:3;left:12px;right:12px;bottom:54px;text-align:center;font-family:var(--display);font-stretch:100%;font-weight:800;font-size:clamp(.95rem,calc(1.1 * var(--vw,1vw)),1.05rem);line-height:1.25}
.sub span{background:var(--fg);color:var(--bg);padding:.12em .35em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.sub span.k{background:var(--accent);color:var(--ink)}
.hero-intro{display:grid;grid-template-columns:1fr auto;gap:32px;align-items:end;margin-top:28px}
.hero-intro > *{min-width:0}
@media (max-width:860px){
  .hero-grid{grid-template-columns:1fr 1fr;align-items:start}
  .hero-grid > :first-child{grid-column:1/-1}
  .hero-grid > :last-child{grid-column:1/2}
  .hero-intro{grid-template-columns:1fr}
}
.hero-side{grid-column:2/3;grid-row:2/3;display:none}
@media (max-width:860px){.hero-side{display:block;align-self:center}}
@keyframes rise{from{transform:translateY(12px)}to{transform:none}}
.rise{animation:rise .8s cubic-bezier(.2,.8,.2,1) both}
.rise.d1{animation-delay:.08s}.rise.d2{animation-delay:.16s}.rise.d3{animation-delay:.24s}

/* logos */
.logos{padding-block:30px;border-block:1px solid var(--line);--k:1}
.logos-in{display:grid;grid-template-columns:minmax(0,1fr);align-items:center}
.logos-lab{color:var(--fg-2);font-size:.98rem;line-height:1.45;padding-right:32px;border-right:1px solid var(--line)}
.marq{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.logos .track{display:flex;gap:56px;align-items:center;width:max-content;min-height:64px;animation:marq 56s linear infinite}
.logos:hover .track{animation-play-state:paused}
/* Each logo gets its own height so all of them carry about the same visual weight: wide wordmarks lower, compact marks taller.
   --h is the image height at desktop size (it already includes the empty margin inside each file), --k scales the whole row. */
.logos img{height:calc(var(--h,32px) * var(--k));width:auto;flex:none;filter:brightness(0) invert(1);opacity:.88;transition:opacity .3s ease}
.logos img:hover{opacity:1}
@media (max-width:760px){.logos-in{grid-template-columns:1fr;gap:20px}.logos-lab{border-right:0;padding-right:0}.logos{--k:.84}.logos .track{gap:44px}}
@keyframes marq{to{transform:translateX(-50%)}}

/* two paths */
.paths{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:6px;overflow:hidden}
.path{padding:clamp(24px,calc(3.5 * var(--vw,1vw)),48px);display:grid;gap:18px;align-content:start;background:transparent;min-width:0}
.path + .path{border-left:1px solid var(--line)}
.path .fmt{display:flex;align-items:center;gap:12px}
.fmt-box{border:1.5px solid var(--fg-2);border-radius:2px}
.path ul{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.path li{display:grid;grid-template-columns:18px 1fr;gap:10px;color:var(--fg-2)}
.path li::before{content:"";width:8px;height:8px;margin-top:.55em;background:var(--accent);border-radius:1px}
.path .for{border-top:1px solid var(--line);padding-top:18px;font-size:1rem;color:var(--fg-2)}
.path .for b{color:var(--fg);font-weight:600}
@media (max-width:860px){.paths{grid-template-columns:1fr}.path + .path{border-left:0;border-top:1px solid var(--line)}}

/* chooser */
.chooser{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(20px,calc(4 * var(--vw,1vw)),56px);align-items:start}
.chooser > *{min-width:0}
.opts{display:grid;gap:10px}
.opt{text-align:left;background:transparent;border:1px solid var(--line-2);color:var(--fg);border-radius:6px;padding:18px 20px;font:500 1.05rem/1.4 var(--body);cursor:pointer;display:grid;grid-template-columns:22px 1fr;gap:14px;align-items:start;transition:border-color .2s,background .2s}
.opt:hover{border-color:var(--fg-2)}
.opt .dot{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--fg-3);margin-top:2px;display:grid;place-items:center}
.opt[aria-checked="true"]{border-color:var(--accent);background:rgba(255,158,10,.07)}
.opt[aria-checked="true"] .dot{border-color:var(--accent)}
.opt[aria-checked="true"] .dot::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent)}
.result{border-radius:6px;background:var(--bg-2);border:1px solid var(--line);padding:clamp(22px,calc(3 * var(--vw,1vw)),36px);display:grid;gap:16px}
.result .tag{display:inline-flex;gap:8px;align-items:center}
@media (max-width:860px){.chooser{grid-template-columns:1fr}}

/* quotes */
.quotes{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:clamp(16px,calc(2 * var(--vw,1vw)),28px)}
.quotes > *{min-width:0}
.q{border-top:1px solid var(--line-2);padding-top:22px;display:grid;gap:18px;align-content:start}
.q blockquote{margin:0;font-family:var(--display);font-stretch:100%;font-weight:400;font-size:clamp(1.05rem,calc(1.4 * var(--vw,1vw)),1.25rem);line-height:1.38;letter-spacing:-.005em}
.q:first-child blockquote{font-size:clamp(1.25rem,calc(2 * var(--vw,1vw)),1.7rem);font-weight:600}
.q cite{font-style:normal;color:var(--fg-2);font-size:.92rem}
.q cite b{color:var(--fg);font-weight:600;display:block}
.stars{color:var(--accent);letter-spacing:2px;font-size:.9rem}
@media (max-width:860px){.quotes{grid-template-columns:1fr}}
.rating{color:var(--fg-2);font-size:.95rem;display:inline-flex;gap:10px;align-items:center;flex-wrap:wrap}
.testis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,calc(2.4 * var(--vw,1vw)),32px)}
.testi{margin:0;display:grid;gap:16px;align-content:start}
.testi .vf{aspect-ratio:16/9;display:block;text-decoration:none;color:var(--fg)}
.testi .vf img{transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.testi .vf:hover img{transform:scale(1.03)}
.testi .play i{width:56px;height:56px}
.testi .play i::after{border-left-width:15px;border-top-width:9px;border-bottom-width:9px;margin-left:4px}
.testi blockquote{margin:0;font-family:var(--display);font-stretch:100%;font-weight:400;font-size:clamp(1.08rem,calc(1.35 * var(--vw,1vw)),1.22rem);line-height:1.5;color:var(--fg)}
.testi figcaption{color:var(--fg-2);font-size:.92rem;display:grid;gap:2px}
.testi figcaption b{color:var(--fg);font-weight:500}
@media (max-width:860px){.testis{grid-template-columns:1fr}}
.contact-card{border:1px solid var(--line-2);border-radius:6px;background:rgba(11,12,14,.55);padding:clamp(20px,calc(2.6 * var(--vw,1vw)),30px);display:grid;gap:18px;align-content:center}
/* contact card: two founders as colour portraits in a light glass frame (rectangular, softly rounded) */
.duo{display:grid;grid-template-columns:repeat(2,minmax(0,150px));gap:14px;margin-bottom:6px}
.duo figure{margin:0;display:grid;gap:8px}
.glassframe{padding:5px;border-radius:14px;background:linear-gradient(155deg,rgba(255,255,255,.16),rgba(255,255,255,.04) 45%,rgba(255,255,255,.08));border:1px solid rgba(255,255,255,.18);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 14px 30px -18px rgba(0,0,0,.9)}
.glassframe img{display:block;width:100%;aspect-ratio:4/5;height:auto;object-fit:cover;object-position:50% 25%;border-radius:10px}
.duo figcaption{font-size:.9375rem;font-weight:500;color:var(--fg)}
/* (unused) founders as a small row of portrait frames with first names, not an overlapping avatar stack; neutral grey so the orange studio backdrop does not glow */
.avatars{display:grid;grid-template-columns:repeat(4,minmax(0,64px));gap:10px}
.avatars figure{margin:0;display:grid;gap:6px}
.avatars img{width:100%;aspect-ratio:4/5;height:auto;border-radius:3px;object-fit:cover;object-position:50% 22%;filter:grayscale(1) contrast(1.05) brightness(.95);border:1px solid var(--line)}
.avatars figcaption{font-size:.875rem;color:var(--fg-2);line-height:1.2}
.contact-card p{color:var(--fg-2);font-size:1rem}
.contact-card dl{margin:0;display:grid;gap:0;border-top:1px solid var(--line)}
.contact-card dl > div{display:grid;grid-template-columns:72px minmax(0,1fr);gap:12px;padding:11px 0;border-bottom:1px solid var(--line)}
.contact-card dt{color:var(--fg-3);font-size:.9375rem}
.contact-card dd{margin:0;color:var(--fg);font-weight:600;user-select:all;overflow-wrap:anywhere}

/* missions */
.mgrid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(12px,calc(1.6 * var(--vw,1vw)),20px)}
.mcard{grid-column:span 4;text-decoration:none;color:inherit;display:grid;gap:12px;align-content:start;min-width:0}
.mcard .vf{aspect-ratio:4/3}
.mcard .vf img{transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.mcard:hover .vf img{transform:scale(1.04)}
.mcard.big{grid-column:span 6}
.mcard.big .vf{aspect-ratio:16/10}
.mcard .meta{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.mcard h3{font-size:1.12rem}
.mcard p{color:var(--fg-2);font-size:1rem}
.mcard[hidden]{display:none}
@media (max-width:900px){.mcard,.mcard.big{grid-column:span 6}}
@media (max-width:560px){.mcard,.mcard.big{grid-column:span 12}}
.vf.logo-only{display:grid;place-items:center;background:var(--bg-2)}
.vf.logo-only img{width:52%;height:auto;object-fit:contain;filter:brightness(0) invert(1);opacity:.8}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.chip{background:transparent;color:var(--fg-2);border:1px solid var(--line-2);border-radius:999px;padding:.5rem .95rem;font:500 .9rem/1 var(--body);cursor:pointer;transition:all .2s}
.chip:hover{color:var(--fg);border-color:var(--fg-2)}
.chip[aria-pressed="true"]{background:var(--fg);color:var(--bg);border-color:var(--fg)}

/* team strip */
.team-feature{display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(24px,calc(4 * var(--vw,1vw)),64px);align-items:center}
.team-feature > *{min-width:0}
.team-feature .vf{aspect-ratio:16/10}
.facts{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border-top:1px solid var(--line);margin-top:8px}
.facts > div{padding:18px 0;border-bottom:1px solid var(--line);display:grid;gap:4px;align-content:start}
.facts > div:nth-child(odd){padding-right:16px}
.facts b{font-family:var(--display);font-stretch:110%;font-size:1.6rem;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.facts span{color:var(--fg-2);font-size:.9375rem}
@media (max-width:860px){.team-feature{grid-template-columns:1fr}}

/* CTA band */
.cta-band{border:1px solid var(--line);border-radius:8px;background:radial-gradient(120% 140% at 100% 0%,rgba(255,158,10,.16) 0%,rgba(255,158,10,0) 45%),var(--bg-2);padding:clamp(28px,calc(5 * var(--vw,1vw)),64px);display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(28px,calc(4 * var(--vw,1vw)),56px);align-items:center}
.cta-band > *{min-width:0}
.cta-band .contact-lines{display:grid;gap:6px;font-size:1rem;color:var(--fg-2)}
.cta-band .contact-lines b{color:var(--fg);font-weight:600;user-select:all}
@media (max-width:860px){.cta-band{grid-template-columns:1fr}}

/* page hero (subpages) */
.phero{padding-top:clamp(36px,calc(6 * var(--vw,1vw)),80px);padding-bottom:clamp(48px,calc(7 * var(--vw,1vw)),90px)}
.phero-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(28px,calc(5 * var(--vw,1vw)),72px);align-items:center}
.phero-grid > *{min-width:0}
.phero .crumb{margin-bottom:22px;display:flex;gap:10px;align-items:center}
.phero h1{font-size:clamp(2.2rem,calc(5 * var(--vw,1vw)),4.3rem)}
.keyfacts{display:flex;flex-wrap:wrap;gap:0;margin-top:30px;border-top:1px solid var(--line)}
.keyfacts div{padding:16px 22px 0 0;margin-right:22px;display:grid;gap:2px}
.keyfacts b{font-family:var(--display);font-stretch:110%;font-weight:800;font-size:1.35rem;font-variant-numeric:tabular-nums}
.keyfacts span{font-size:.9375rem;color:var(--fg-2)}
@media (max-width:860px){.phero-grid{grid-template-columns:1fr}}
.play{position:absolute;z-index:3;inset:0;display:grid;place-items:center;text-decoration:none}
.play i{width:76px;height:76px;border-radius:50%;background:rgba(242,238,230,.92);display:grid;place-items:center;transition:transform .25s ease}
.play i::after{content:"";border-left:20px solid var(--bg);border-top:12px solid transparent;border-bottom:12px solid transparent;margin-left:6px}
.play:hover i{transform:scale(1.07)}
.phone{width:min(330px,78%);margin-inline:auto;aspect-ratio:9/16;border-radius:30px;border:8px solid #1f2227;box-shadow:0 0 0 1px var(--line-2),0 40px 80px -30px rgba(255,158,10,.25);position:relative;overflow:hidden;background:var(--bg-3)}
.phone img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.phone .sub{bottom:96px;font-size:1.05rem}
.phone .ui{position:absolute;z-index:3;right:12px;bottom:110px;display:grid;gap:16px;justify-items:center;font-family:var(--mono);font-size:.62rem;color:var(--fg)}
.phone .ui span{display:grid;justify-items:center;gap:4px}
.phone .ui span::before{content:"";width:30px;height:30px;border-radius:50%;background:rgba(242,238,230,.18);border:1px solid rgba(242,238,230,.35)}
.phone .who{position:absolute;z-index:3;left:14px;right:60px;bottom:26px;display:grid;gap:4px;font-size:.78rem;line-height:1.35}
.phone .who b{font-size:.86rem}
.phone .bar{position:absolute;z-index:3;left:14px;right:14px;bottom:14px;height:2px;background:rgba(242,238,230,.25);overflow:hidden;border-radius:2px}
.phone .bar i{display:block;height:100%;width:0;background:var(--fg);animation:prog 12s linear infinite}
@keyframes prog{to{width:100%}}

/* tabs (problems / formats) */
.tabs{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(20px,calc(4 * var(--vw,1vw)),56px);align-items:start}
.tablist{display:grid;gap:0;border-top:1px solid var(--line)}
.tab{background:none;border:0;border-bottom:1px solid var(--line);color:var(--fg-2);text-align:left;padding:20px 0;font:600 1.12rem/1.35 var(--body);cursor:pointer;display:grid;grid-template-columns:minmax(0,1fr) 20px;gap:16px;align-items:center;transition:color .2s}
.tab::after{content:"→";color:var(--fg-3);transition:transform .2s,color .2s}
.tab:hover{color:var(--fg)}
.tab[aria-selected="true"]{color:var(--fg)}
.tab[aria-selected="true"]::after{color:var(--accent);transform:translateX(4px)}
.panel{background:var(--bg-2);border:1px solid var(--line);border-radius:6px;padding:clamp(22px,calc(3 * var(--vw,1vw)),40px);display:grid;gap:18px}
.panel .pair{display:grid;gap:6px;padding-top:16px;border-top:1px solid var(--line)}
@media (max-width:860px){.tabs{grid-template-columns:1fr}}

/* formats */
.formats{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,calc(2 * var(--vw,1vw)),24px)}
.formats > *{min-width:0}
.format{display:grid;gap:14px;align-content:start}
.format .vf{aspect-ratio:4/3}
.format p{color:var(--fg-2);font-size:1rem}
@media (max-width:860px){.formats{grid-template-columns:1fr}}

/* process */
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:0;border-top:1px solid var(--line-2);counter-reset:s}
.step{padding:22px 18px 0 0;display:grid;gap:10px;align-content:start;position:relative;min-width:0}
.step::before{counter-increment:s;content:counter(s,decimal-leading-zero);font-family:var(--mono);font-size:.875rem;font-weight:600;color:var(--fg-3);font-variant-numeric:tabular-nums}
.step::after{content:"";position:absolute;top:-5px;left:0;width:9px;height:9px;border-radius:50%;background:var(--accent)}
.step p{color:var(--fg-2);font-size:1rem}
@media (max-width:980px){.steps{grid-template-columns:1fr;border-top:0;border-left:1px solid var(--line-2);padding-left:22px;gap:28px}.step{padding:0}.step::after{left:-27px;top:4px}}

/* packages */
.pkgs{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,calc(2 * var(--vw,1vw)),22px);align-items:stretch}
.pkg{border:1px solid var(--line);border-radius:6px;padding:clamp(22px,calc(2.6 * var(--vw,1vw)),32px);display:flex;flex-direction:column;gap:18px;background:var(--bg-2);min-width:0}
.pkg.rec{border-color:var(--accent)}
.pkg .top{display:flex;justify-content:space-between;align-items:center;gap:8px;min-height:24px}

.pkg ul{list-style:none;margin:0;padding:0;display:grid;gap:9px;font-size:1rem;color:var(--fg-2)}
.pkg li{display:grid;grid-template-columns:16px 1fr;gap:10px}
.pkg li::before{content:"";width:10px;height:6px;border-left:1.5px solid var(--accent);border-bottom:1.5px solid var(--accent);transform:rotate(-45deg);margin-top:.45em}
.pkg li.plus{color:var(--fg);font-weight:600}
.pkg li.plus::before{border:0;content:"+";transform:none;margin:0;color:var(--accent);font-weight:700;width:auto;height:auto;line-height:1.5}
.pkg .price{font-family:var(--display);font-stretch:110%;font-weight:800;font-size:1.5rem;letter-spacing:-.02em}
.pkg .price small{font-family:var(--body);font-weight:500;font-size:.9375rem;color:var(--fg-2);letter-spacing:0;display:block;margin-top:4px}
.pkg .btn{margin-top:auto;justify-content:center}
@media (max-width:900px){.pkgs{grid-template-columns:1fr}}

/* faq */
.faq{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(24px,calc(4 * var(--vw,1vw)),64px)}
.faq > div{padding:24px 0;border-top:1px solid var(--line);display:grid;gap:10px;min-width:0}
.faq h3{font-size:1.1rem}
.faq p{color:var(--fg-2);font-size:1rem}
@media (max-width:860px){.faq{grid-template-columns:1fr}}

/* testimonial videos */
.tvids{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,calc(2 * var(--vw,1vw)),22px)}
.tvids > a{text-decoration:none;color:inherit;display:grid;gap:10px;min-width:0}
.tvids .vf{aspect-ratio:16/9}
.tvids .play i{width:54px;height:54px}
.tvids .play i::after{border-left-width:15px;border-top-width:9px;border-bottom-width:9px;margin-left:4px}
@media (max-width:860px){.tvids{grid-template-columns:1fr}}

/* social branding specifics */
.compare{border:1px solid var(--line);border-radius:6px;overflow:hidden}
.seg{display:inline-flex;border:1px solid var(--line-2);border-radius:6px;padding:4px;gap:4px;margin-bottom:22px;flex-wrap:wrap}
.seg button{background:transparent;color:var(--fg-2);border:0;border-radius:4px;padding:.7rem 1rem;font:600 .95rem/1 var(--body);cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--fg);color:var(--bg)}
.ctable{display:grid}
.ctable > div{display:grid;grid-template-columns:200px 1fr;gap:20px;padding:16px clamp(16px,calc(2.5 * var(--vw,1vw)),28px);border-top:1px solid var(--line)}
.ctable > div:first-child{border-top:0}
.ctable dt{padding-top:0}
.ctable dd{margin:0;color:var(--fg)}
@media (max-width:640px){.ctable > div{grid-template-columns:1fr;gap:4px}}
.month{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--line);border-radius:6px;overflow:hidden}
.week{padding:clamp(18px,calc(2.2 * var(--vw,1vw)),26px);display:grid;gap:12px;align-content:start;background:transparent;min-width:0}
.week + .week{border-left:1px solid var(--line)}
.week .you,.week .us{display:grid;gap:4px;font-size:1rem}
.week .you{color:var(--fg)}
.week .us{color:var(--fg-2)}
.tbar{height:6px;border-radius:3px;background:var(--bg-3);overflow:hidden}
.tbar i{display:block;height:100%;background:var(--accent)}
@media (max-width:860px){.month{grid-template-columns:1fr 1fr}.week:nth-child(3){border-left:0}.week:nth-child(n+3){border-top:1px solid var(--line)}}
@media (max-width:520px){.month{grid-template-columns:1fr}.week + .week{border-left:0;border-top:1px solid var(--line)}}
.timebig{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.timebig b{font-family:var(--display);font-stretch:118%;font-weight:900;font-size:clamp(3.4rem,calc(8 * var(--vw,1vw)),6.5rem);letter-spacing:-.04em;line-height:.9;color:var(--accent);font-variant-numeric:tabular-nums}
.levels{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:clamp(20px,calc(4 * var(--vw,1vw)),56px);align-items:start}
.lvl-out{border:1px solid var(--line);border-radius:6px;background:var(--bg-2);padding:clamp(22px,calc(3 * var(--vw,1vw)),36px);display:grid;gap:20px}
.counts{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-block:1px solid var(--line)}
.counts > div{padding:16px 10px 16px 0;display:grid;gap:2px}
.counts b{font-family:var(--display);font-stretch:112%;font-weight:850;font-size:clamp(2rem,calc(4 * var(--vw,1vw)),2.8rem);letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1}
.counts span{font-size:.9375rem;color:var(--fg-2)}
.lvl-extras{list-style:none;padding:0;margin:0;display:grid;gap:8px;color:var(--fg-2);font-size:1rem}
.lvl-extras li{display:grid;grid-template-columns:16px 1fr;gap:10px}
.lvl-extras li::before{content:"+";color:var(--accent);font-weight:700}
@media (max-width:860px){.levels{grid-template-columns:1fr}}
.bricks{display:flex;flex-wrap:wrap;gap:8px}
.brick{border:1px solid var(--line-2);border-radius:6px;padding:.5rem .75rem;font-size:.9375rem;color:var(--fg-2);transition:color .25s,border-color .25s,background .25s}
.brick:hover{color:var(--fg);border-color:var(--chip-line-2);background:var(--chip-bg)}
.objections{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(24px,calc(4 * var(--vw,1vw)),64px)}
.objections > div{padding:24px 0;border-top:1px solid var(--line);display:grid;gap:10px;min-width:0}
.objections h3{font-family:var(--display);font-stretch:100%;font-weight:700;font-size:1.15rem}
.objections h3::before{content:"„";color:var(--accent)}
.objections h3::after{content:"“";color:var(--accent)}
.objections p{color:var(--fg-2)}
@media (max-width:860px){.objections{grid-template-columns:1fr}}
.notincl{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,calc(2 * var(--vw,1vw)),22px)}
.notincl > div{border-top:2px solid var(--line-2);padding-top:16px;display:grid;gap:8px;min-width:0}
.notincl p{color:var(--fg-2);font-size:1rem}
@media (max-width:860px){.notincl{grid-template-columns:1fr}}

/* team page */
.people{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,calc(1.6 * var(--vw,1vw)),20px)}
.person{display:grid;gap:12px;min-width:0}
.person .vf{aspect-ratio:3/4}
.person .vf img{object-position:50% 20%}
.person h3{font-size:1.1rem}
@media (max-width:860px){.people{grid-template-columns:1fr 1fr}}
.awards{display:grid;gap:0;border-top:1px solid var(--line)}
.awards > div{display:grid;grid-template-columns:172px minmax(0,1fr);gap:20px;align-items:baseline;padding:18px 0;border-bottom:1px solid var(--line)}
@media (max-width:560px){.awards > div{grid-template-columns:1fr;gap:4px}}

/* contact */
.form{display:grid;gap:18px}
.form .two{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.form .two > *{min-width:0}
@media (max-width:640px){.form .two{grid-template-columns:1fr}}
.field{display:grid;gap:8px}
.field label,.field legend{font-size:.9375rem;font-weight:600;color:var(--fg)}
.field .req{color:var(--accent)}
.field input,.field select,.field textarea{width:100%;background:var(--bg-2);border:1px solid var(--line-2);color:var(--fg);border-radius:4px;padding:.85rem .95rem;font:400 1rem/1.4 var(--body);transition:border-color .2s}
.field textarea{min-height:140px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent)}
.field .err{color:#ff8a7a;font-size:.9375rem;display:none}
.field.bad .err{display:block}
.field.bad input,.field.bad select,.field.bad textarea{border-color:#ff8a7a}
fieldset{border:0;padding:0;margin:0;min-width:0}
.pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.pills label{position:relative;cursor:pointer}
.pills input{position:absolute;opacity:0;pointer-events:none}
.pills span{display:inline-block;border:1px solid var(--line-2);border-radius:999px;padding:.6rem 1rem;font-size:.94rem;color:var(--fg-2);transition:all .2s}
.pills input:checked + span{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.pills input:focus-visible + span{outline:2px solid var(--accent);outline-offset:2px}
.check{display:grid;grid-template-columns:22px 1fr;gap:10px;font-size:1rem;color:var(--fg-2);align-items:start}
.check input{width:18px;height:18px;margin-top:3px;accent-color:var(--accent)}
.sent{border:1px solid var(--accent);border-radius:6px;padding:20px;background:rgba(255,158,10,.07)}
.after{display:grid;gap:0;border-top:1px solid var(--line)}
.after > div{display:grid;grid-template-columns:48px minmax(0,1fr);gap:12px;align-items:start;padding:16px 0;border-bottom:1px solid var(--line)}

/* legal */
.legal{max-width:760px}
.legal h1{font-size:clamp(1.75rem,calc(4 * var(--vw,1vw)),3rem);margin-bottom:28px;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
h1,h2,h3{overflow-wrap:break-word}
.legal h2{font-size:1.3rem;font-stretch:105%;margin:40px 0 12px;letter-spacing:-.01em}
.legal h3{font-size:1.05rem;margin:22px 0 8px}
.legal p,.legal li{color:var(--fg-2);font-size:1rem}
.legal p + p{margin-top:12px}
.legal ul{padding-left:1.2em;display:grid;gap:6px}
.legal address{font-style:normal;color:var(--fg);line-height:1.7}
.ph{background:rgba(255,226,122,.14);color:var(--note);border-radius:3px;padding:0 .3em}

/* footer */
.ftr{border-top:1px solid var(--line);padding-block:56px 40px;margin-top:0}
.ftr-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px}
.ftr-grid > *{min-width:0}
.ftr h4{font-family:var(--mono);font-size:.875rem;letter-spacing:0;text-transform:none;color:var(--fg-2);font-weight:600;margin:0 0 14px}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ftr a{text-decoration:none;color:var(--fg-2);transition:color .2s}
.ftr a:hover{color:var(--fg)}
.ftr address{font-style:normal;color:var(--fg-2);line-height:1.7}
.ftr .bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:44px;padding-top:22px;border-top:1px solid var(--line);color:var(--fg-3);font-size:.9375rem}
.ftr button.linkish{background:none;border:0;padding:0;color:var(--fg-2);font:inherit;cursor:pointer}
@media (max-width:860px){.ftr-grid{grid-template-columns:1fr 1fr}}

/* label chips: quiet boxes for every small label (no orange; orange is reserved for actions and accents) */
.awards .mono,.ctable dt,.after .mono,.week .mono,.panel .pair .mono,.path .fmt .mono,.crumb .mono,.mcard .meta .mono,.step .mono,.result .tag,.lvl-out .mono,address .mono,.flag{
  display:inline-flex;align-items:center;gap:.4em;justify-self:start;align-self:start;width:max-content;max-width:100%;
  font-family:var(--body);font-size:.875rem;font-weight:600;font-stretch:104%;letter-spacing:.015em;text-transform:none;line-height:1.25;
  color:var(--fg);background:var(--chip-bg);border:1px solid var(--chip-line);border-radius:6px;padding:.36rem .62rem;
  white-space:normal;transition:background .3s ease,border-color .3s ease,color .3s ease}
.after .mono{justify-content:center;width:auto;min-width:38px;font-variant-numeric:tabular-nums}
.flag{background:var(--chip-bg-2);border-color:var(--chip-line-2)}
.mcard .meta .mono{flex:none;color:var(--fg-2)}
.awards > div:hover .mono,.ctable > div:hover dt,.after > div:hover .mono,.week:hover > .mono,.mcard:hover .meta .mono,.step:hover .mono,.panel .pair:hover .mono,.path:hover .fmt .mono,address:hover .mono{background:var(--chip-bg-2);border-color:var(--chip-line-2);color:var(--fg)}

/* hover states */
.awards > div,.ctable > div,.after > div{transition:background .3s ease}
.ctable > div:hover{background:rgba(255,255,255,.025)}
.path{transition:background .4s ease}
.path:hover{background:rgba(255,255,255,.07)}
.pkg{transition:transform .45s var(--ease),border-color .3s ease,background .3s ease,box-shadow .45s var(--ease)}
.pkg:hover{transform:translateY(-4px);border-color:var(--line-2);background-color:rgba(255,255,255,.05);box-shadow:inset 0 1px 0 rgba(255,255,255,.24),inset 0 -1px 0 rgba(255,255,255,.05),0 30px 64px -34px rgba(0,0,0,.95)}
.pkg.rec:hover{border-color:var(--accent)}
.week{transition:background .35s ease}
.week:hover{background:rgba(255,255,255,.075)}
.faq > div,.notincl > div{position:relative}
.faq > div::before{content:"";position:absolute;left:0;top:-1px;height:1px;width:100%;background:var(--fg-2);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
.faq > div:hover::before{transform:scaleX(1)}
.faq h3,.notincl h3{transition:transform .4s var(--ease)}
.faq > div:hover h3,.notincl > div:hover h3{transform:translateX(4px)}
.notincl > div{transition:border-color .4s ease}
.notincl > div:hover{border-top-color:var(--fg-2)}
.format .vf img,.format .vf video,.person .vf img,.tvids .vf img,.team-feature .vf img{transition:transform .8s var(--ease)}
.format:hover .vf img,.format:hover .vf video,.person:hover .vf img,.tvids a:hover .vf img{transform:scale(1.04)}
.tvids .play i,.testi .play i{transition:transform .3s ease}
.tvids a:hover .play i,.testi .vf:hover .play i{transform:scale(1.08)}
/* viewfinder brackets close in a little on hover, like a camera finding focus */
.vf::after{transition:inset .5s var(--ease),opacity .5s ease}
.mcard:hover .vf::after,.testi .vf:hover::after,.tvids a:hover .vf::after,.hero-grid a:hover .vf::after,.format:hover .vf::after,.person:hover .vf::after,.hero-grid .vf:hover::after{inset:5px;opacity:1}
.contact-card{transition:border-color .3s ease}
.contact-card:hover{border-color:rgba(255,255,255,.3)}
.btn-primary{box-shadow:0 0 0 0 rgba(255,158,10,0);transition:transform .2s ease,background .2s ease,color .2s ease,border-color .2s ease,box-shadow .35s ease}
.btn-primary:hover{box-shadow:0 10px 30px -12px rgba(255,158,10,.55)}

/* liquid glass (subtle): cards are a little see-through, blur what lies behind, carry a light top edge and a faint diagonal sheen. Neutral white only, no tint. */
.paths,.pkg,.panel,.result,.lvl-out,.contact-card,.month,.compare,.cta-band{
  background-color:rgba(255,255,255,.025);
  background-image:linear-gradient(155deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,.035) 38%,rgba(255,255,255,.015) 62%,rgba(255,255,255,.05) 100%);
  border-color:rgba(255,255,255,.13);
  -webkit-backdrop-filter:brightness(1.3);backdrop-filter:brightness(1.3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 -1px 0 rgba(255,255,255,.04),0 24px 60px -36px rgba(0,0,0,.85)}
.cta-band{background-image:radial-gradient(120% 140% at 100% 0%,rgba(255,158,10,.12) 0%,rgba(255,158,10,0) 45%),linear-gradient(155deg,rgba(255,255,255,.09) 0%,rgba(255,255,255,.025) 45%,rgba(255,255,255,.045) 100%)}
.pkg.rec{border-color:var(--accent)}
/* moving glass: sections glide over the fixed sky (JS sets transform, radius and --sp); a soft light band
   travels across them with the scroll, and cards catch a small light where the pointer is (--mx/--my) */
.page > section.glide.glide{transform-origin:50% 0;will-change:transform;overflow:clip;
  background-image:linear-gradient(105deg,rgba(255,255,255,0) 35%,rgba(255,255,255,.035) 50%,rgba(255,255,255,0) 65%),linear-gradient(180deg,rgba(255,255,255,.07) 0%,rgba(255,255,255,.03) 26%,rgba(255,255,255,.022) 74%,rgba(255,255,255,.045) 100%);
  background-size:300% 100%,100% 100%;background-position:calc(100% - var(--sp,0) * 100%) 0,0 0;background-repeat:no-repeat}
.page > section.glide:has(> .wrap > .cta-band){background-image:linear-gradient(105deg,rgba(255,255,255,0) 35%,rgba(255,255,255,.03) 50%,rgba(255,255,255,0) 65%),radial-gradient(70% 90% at 82% 0%,rgba(255,158,10,.12) 0%,rgba(255,158,10,0) 62%)}
@media (hover:hover){
  .paths,.pkg,.panel,.result,.lvl-out,.contact-card,.month,.compare{background-image:radial-gradient(360px circle at var(--mx,-400px) var(--my,-400px),rgba(255,255,255,.07),rgba(255,255,255,0) 70%),linear-gradient(155deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,.035) 38%,rgba(255,255,255,.015) 62%,rgba(255,255,255,.05) 100%)}
  .page > section:has(> .wrap > .cta-band) .cta-band,.cta-band{background-image:radial-gradient(360px circle at var(--mx,-400px) var(--my,-400px),rgba(255,255,255,.06),rgba(255,255,255,0) 70%),radial-gradient(120% 140% at 100% 0%,rgba(255,158,10,.12) 0%,rgba(255,158,10,0) 45%),linear-gradient(155deg,rgba(255,255,255,.09) 0%,rgba(255,255,255,.025) 45%,rgba(255,255,255,.045) 100%)}
}
/* ---------- scroll scenes (all scroll-linked, all off without JS or with reduced motion) ---------- */
/* kinetic band: two rows of big words that slide sideways with the scroll, in opposite directions */
.kin{overflow:hidden;padding-block:clamp(36px,calc(6 * var(--vw,1vw)),80px);display:grid;gap:clamp(4px,calc(1 * var(--vw,1vw)),12px);pointer-events:none;user-select:none}
.kin-row{display:flex;gap:.5em;white-space:nowrap;width:max-content;font-family:var(--display);font-weight:850;font-stretch:112%;font-size:clamp(2.6rem,calc(8.5 * var(--vw,1vw)),7.5rem);line-height:1;letter-spacing:-.02em;will-change:transform}
.kin-row span{color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.28)}
.kin-row span.solid{color:var(--fg);-webkit-text-stroke:0}
.kin-row i{font-style:normal;color:var(--accent);-webkit-text-stroke:0}
.kin-row.r2{margin-left:-calc(30 * var(--vw,1vw))}
/* statement: words of a lead paragraph light up one after another while it scrolls through the screen */
.scrub .sw{color:var(--fg);opacity:calc(.22 + var(--lit,1) * .78);transition:opacity .2s linear}
/* headings: words rise out of a mask when they come into view */
.hw{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.hw > span{display:inline-block;transition:transform 1s var(--ease);transition-delay:calc(var(--i) * 55ms)}
.rise-h:not(.in) .hw > span{transform:translate3d(0,105%,0)}
/* images drift inside their frame for depth */
.vf img.par{scale:1.12;translate:0 var(--py,0px)}
/* hero steps back as the page scrolls over it */
.curtain{will-change:transform,opacity;transform-origin:50% 0}

/* Social-Branding hero: same 9:16 viewfinder as on the home page instead of a phone bezel */
.sb-frame{margin:0 auto;width:min(340px,80%);display:block}
.sb-frame .vf img{object-position:50% 30%}
.sb-frame .sub{bottom:58px;font-size:clamp(.95rem,calc(1.3 * var(--vw,1vw)),1.1rem)}
.sb-frame .rec::before{animation:none}
.sb-frame .frame-cap{margin-top:14px}

/* scroll reveal: only elements below the first screen start faded, and only when JS is running */
.rv{transition:opacity .9s var(--ease) var(--d,0s),transform .9s var(--ease) var(--d,0s)}
.rv.pre{opacity:0;transform:translate3d(0,22px,0)}
/* swapped panel content (tabs, chooser, comparison) fades up */
@keyframes swapin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.swap > *{animation:swapin .5s var(--ease) both}
.swap > :nth-child(2){animation-delay:.05s}.swap > :nth-child(3){animation-delay:.1s}.swap > :nth-child(4){animation-delay:.15s}.swap > :nth-child(5){animation-delay:.2s}.swap > :nth-child(n+6){animation-delay:.25s}

/* de-template pass (V23): remove the common "generated website" tells, keep what is specific to a film studio */
.arr{display:none}
.tab::after{content:none}
.crumb .mono,.path .fmt .mono{background:none;border:0;padding:0;color:var(--fg-2);font-weight:500}
.after > div{grid-template-columns:minmax(0,1fr)}
.after > div > .mono{display:none}
.rec::before{animation:none}
.pkg.rec::before{content:none;display:none}
.pkg li::before{content:"–";border:0;transform:none;width:auto;height:auto;margin:0;color:var(--fg-3);line-height:inherit}
.pkg li.plus::before{content:"+";color:var(--fg-2)}
.lvl-extras li::before{color:var(--fg-2)}
.pkg:hover{transform:none}
.faq > div:hover h3,.notincl > div:hover h3{transform:none}
.btn-primary:hover{box-shadow:none}
.page > section:has(> .wrap > .cta-band){background-image:none}
.page > section.glide:has(> .wrap > .cta-band){background-image:linear-gradient(105deg,rgba(255,255,255,0) 35%,rgba(255,255,255,.03) 50%,rgba(255,255,255,0) 65%)}
.page > section:has(> .wrap > .cta-band) .cta-band,.cta-band{background-image:linear-gradient(155deg,rgba(255,255,255,.09) 0%,rgba(255,255,255,.025) 45%,rgba(255,255,255,.045) 100%)}
.paths,.pkg,.panel,.result,.lvl-out,.contact-card,.month,.compare{background-image:linear-gradient(155deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,.035) 38%,rgba(255,255,255,.015) 62%,rgba(255,255,255,.05) 100%)}

/* =====================================================================
   V32 art direction: "film poster, not template"
   - neutral greys (no warm tint), one orange accent
   - headlines set like a poster billing: Archivo squeezed to its narrowest width, caps, tight leading
   - body stays at normal width, so the contrast between narrow display and open text carries the look
   - fewer boxes: editorial spreads, a collage hero, one featured quote, credits in the footer
   ===================================================================== */
:root{--fg:#f2f2f2;--fg-2:#bdbdbd;--fg-3:#8c8c8c;--line:rgba(255,255,255,.12);--line-2:rgba(255,255,255,.24)}
h1,h2{font-stretch:68%;font-weight:800;text-transform:uppercase;letter-spacing:-.004em;line-height:.9}
h1{font-size:clamp(3rem,calc(9 * var(--vw,1vw)),8.6rem)}
.hero h1{font-size:clamp(3.2rem,calc(10.2 * var(--vw,1vw)),9.8rem);max-width:15ch}
.phero h1{font-size:clamp(2.8rem,calc(6.6 * var(--vw,1vw)),6.2rem)}
.legal h1{font-size:clamp(2.4rem,calc(6 * var(--vw,1vw)),4.6rem)}
h2{font-size:clamp(2.5rem,calc(6 * var(--vw,1vw)),5.4rem)}
.legal h2{font-size:clamp(1.6rem,calc(3 * var(--vw,1vw)),2.2rem);text-transform:none;font-stretch:100%;line-height:1.15}
h3{font-stretch:100%}
.frame-cap strong,.pkg .price,.timebig b,.counts b,.facts b{font-stretch:72%}
.frame-cap strong{text-transform:uppercase;font-size:1.5rem;letter-spacing:0}
.btn{border-radius:2px}
.hdr .btn{border-radius:2px}

/* section heads become a two-column spread: big title left, text right on the baseline */
.sec-head:has(> .lead){grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);align-items:end;column-gap:clamp(24px,calc(5 * var(--vw,1vw)),88px)}
.sec-head:has(> .lead) > .lead{padding-bottom:.4em}
@media (max-width:860px){.sec-head:has(> .lead){grid-template-columns:1fr}}

/* home hero: collage. The 9:16 reel lies on top of the showreel, offset down, like prints on a desk */
.hero{padding-top:clamp(28px,calc(4 * var(--vw,1vw)),56px)}
.hero-intro{margin-top:clamp(24px,calc(3 * var(--vw,1vw)),40px)}
.hero-grid{grid-template-columns:repeat(12,minmax(0,1fr));align-items:start;margin-top:clamp(44px,calc(6 * var(--vw,1vw)),88px);column-gap:0}
.hero-grid > :first-child{grid-column:1 / span 10;grid-row:1}
.hero-grid > a{grid-column:10 / span 3;grid-row:1;margin-top:clamp(140px,calc(17 * var(--vw,1vw)),250px);position:relative;z-index:3;padding-left:clamp(10px,calc(1.4 * var(--vw,1vw)),18px)}
.hero-grid > a .vf{box-shadow:0 0 0 clamp(5px,calc(.6 * var(--vw,1vw)),8px) var(--bg),0 40px 80px -30px rgba(0,0,0,.95)}
.hero-grid > :first-child .frame-cap{padding-right:28%}
@media (max-width:760px){
  .hero-grid > :first-child{grid-column:1 / -1}
  .hero-grid > a,.hero-grid > a:last-child{grid-column:6 / -1;grid-row:2;margin-top:-56px;padding-left:0}
  .hero h1{font-size:clamp(2.3rem,calc(11.2 * var(--vw,1vw)),3.4rem);max-width:none}
  h1,h2{overflow-wrap:break-word;hyphens:manual}
  .phero h1{font-size:clamp(2.3rem,calc(10.4 * var(--vw,1vw)),3.2rem)}
  .hero-grid > :first-child .frame-cap{padding-right:46%}
}

/* the two offers: no box, a ruled spread with poster titles */
.paths{border:0;border-radius:0;border-top:1px solid var(--line-2);background:none!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;overflow:visible}
.path{padding:clamp(26px,calc(3 * var(--vw,1vw)),40px) clamp(0px,calc(3 * var(--vw,1vw)),48px) 0 0}
.path + .path{padding-left:clamp(20px,calc(3 * var(--vw,1vw)),48px);padding-right:0}
.path h3[style]{font-stretch:68%!important;text-transform:uppercase;font-size:clamp(2.2rem,calc(4 * var(--vw,1vw)),3.6rem)!important;line-height:.92;letter-spacing:0}
@media (max-width:860px){.path{padding-right:0}.path + .path{padding-left:0;margin-top:32px;padding-top:32px}}

/* home: two missions, deliberately unequal */
.page[data-page="start"] .mgrid > .mcard.big:nth-child(1){grid-column:span 7}
.page[data-page="start"] .mgrid > .mcard.big:nth-child(2){grid-column:span 5;margin-top:clamp(48px,calc(9 * var(--vw,1vw)),140px)}
.page[data-page="start"] .mgrid > .mcard.big:nth-child(2) .vf{aspect-ratio:4/5}
@media (max-width:900px){.page[data-page="start"] .mgrid > .mcard.big:nth-child(n){grid-column:span 12;margin-top:0}.page[data-page="start"] .mgrid > .mcard.big:nth-child(2) .vf{aspect-ratio:16/10}}

/* testimonials: one featured interview with a large quote, two smaller below */
.testis{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:clamp(44px,calc(5 * var(--vw,1vw)),80px)}
.testi:first-child{grid-column:1 / -1;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);column-gap:clamp(24px,calc(4 * var(--vw,1vw)),72px);align-items:center}
.testi:first-child .vf{grid-row:1 / span 2}
.testi:first-child blockquote{font-size:clamp(1.55rem,calc(2.7 * var(--vw,1vw)),2.4rem);line-height:1.22;letter-spacing:-.01em;font-stretch:88%}
@media (max-width:860px){.testis{grid-template-columns:1fr}.testi:first-child{grid-template-columns:1fr}.testi:first-child .vf{grid-row:auto}}

/* closing call: no box, the line itself is the poster */
.cta-band{border:0!important;border-radius:0!important;background:none!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;padding:0!important;align-items:end}
.cta-band h2{font-size:clamp(3rem,calc(7.4 * var(--vw,1vw)),7rem)}

/* footer credits, like the end of a film */
.credits{text-align:center;padding-block:clamp(56px,calc(8 * var(--vw,1vw)),112px);border-bottom:1px solid var(--line);margin-bottom:clamp(40px,calc(5 * var(--vw,1vw)),64px);display:grid;gap:clamp(18px,calc(2.4 * var(--vw,1vw)),28px);justify-items:center}
.credits p{color:var(--fg-3);font-size:.9375rem;font-stretch:118%;letter-spacing:.01em}
.credits ul{list-style:none;margin:0;padding:0;display:grid;gap:.12em;font-family:var(--display);font-stretch:68%;font-weight:800;text-transform:uppercase;font-size:clamp(2.2rem,calc(5.4 * var(--vw,1vw)),4.6rem);line-height:.95}
.credits .credits-end{color:var(--fg-2);font-size:1rem;font-stretch:100%}
.ftr-grid address{overflow-wrap:anywhere}
@media (max-width:560px){.ftr-grid > :has(address){grid-column:1 / -1}}


/* hero statement like the big studios (BUCK, Giant Ant): title left, one plain sentence top right, no decoration */
.hero-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,19rem);column-gap:clamp(24px,calc(4 * var(--vw,1vw)),64px);align-items:start}
.hero-top > h1{margin:0}
.hero-top .hero-intro{display:block;margin:0;padding-top:.5em}
.hero-lead{font-size:clamp(1.12rem,calc(1.35 * var(--vw,1vw)),1.28rem);line-height:1.45;color:var(--fg);font-weight:400;letter-spacing:-.005em;margin:0;max-width:none}
.hero-top .hero-intro > .row{margin-top:22px}
@media (min-width:861px){.hero-top .hero-intro > .row{display:none}.hero-top > h1{font-size:clamp(3.2rem,calc(8.3 * var(--vw,1vw)),8.4rem);max-width:none}}
@media (max-width:860px){.hero-top{grid-template-columns:1fr}.hero-top .hero-intro{padding-top:24px}}

/* home hero like Filmdudes: the showreel fills the first screen edge to edge, header floats on it, title and statement follow */
.hero.hero-reel{padding-top:0}
.reel-full{position:relative;margin-top:calc(-68px - env(safe-area-inset-top,0px));height:calc(100 * var(--vh,1vh));min-height:480px;max-height:1100px}
.reel-full .vf{position:absolute;inset:0;border-radius:0}
.reel-full .vf img{width:100%;height:100%;object-fit:cover}
.reel-full .vf{background:transparent;--m:linear-gradient(180deg,#000 0,#000 calc(var(--edge,100%) - var(--fl,42%)),transparent var(--edge,100%));-webkit-mask-image:var(--m);mask-image:var(--m)}
.reel-full.pinned .vf{position:fixed;top:0;left:0;right:0;bottom:auto;height:var(--rh,calc(100 * var(--vh,1vh)));z-index:0}
.reel-full .vf img{translate:none !important;scale:1 !important}
.hero-reel > .wrap{position:relative;z-index:1}
.reel-full .vf .shade{background:linear-gradient(180deg,rgba(5,6,7,.55) 0,rgba(5,6,7,0) 22%)}
.reel-full .vf::after{display:none}
.reel-down{position:absolute;left:50%;bottom:max(26px,calc(3.4 * var(--vh,1vh)));width:14px;height:14px;margin-left:-7px;border-right:1.5px solid var(--fg);border-bottom:1.5px solid var(--fg);transform:rotate(45deg);opacity:var(--down-o,.8);z-index:4}
@media (prefers-reduced-motion:no-preference){.reel-down{animation:reelDown 2.4s ease-in-out infinite}}
@keyframes reelDown{0%,100%{translate:0 0}50%{translate:0 6px}}
.hero-reel > .wrap{padding-top:clamp(56px,calc(8 * var(--vw,1vw)),120px)}
.hero-reel .hero-top{grid-template-columns:1fr}
.hero-reel .hero-top > h1{font-size:clamp(2.3rem,calc(8.6 * var(--vw,1vw)),8.8rem);max-width:none}
.hero-reel .hero-top .hero-intro{padding-top:clamp(24px,calc(3 * var(--vw,1vw)),44px)}
.hero-reel .hero-lead{font-size:clamp(1.2rem,calc(2.1 * var(--vw,1vw)),1.9rem);line-height:1.32;max-width:42ch;letter-spacing:-.012em}
@media (max-width:860px){.hero-reel .hero-top > h1{font-size:clamp(2.3rem,calc(11.2 * var(--vw,1vw)),3.4rem)}.reel-full{height:calc(72 * var(--vh,1vh));min-height:420px}}

/* compact hero text under the reel: title left, sentence and button right, one band instead of a full screen */
.hero.hero-reel{padding-bottom:clamp(40px,calc(5 * var(--vw,1vw)),72px)}
.hero-reel > .wrap{padding-top:clamp(24px,calc(3 * var(--vw,1vw)),44px)}
.hero-reel .hero-top{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);column-gap:clamp(28px,calc(5 * var(--vw,1vw)),88px);align-items:end}
.hero-reel .hero-top > h1{font-size:clamp(2.1rem,calc(4.5 * var(--vw,1vw)),4.5rem);line-height:.92;max-width:none}
.hero-reel .hero-top .hero-intro{padding-top:0;padding-bottom:.3em}
.hero-reel .hero-lead{font-size:clamp(1rem,calc(1.15 * var(--vw,1vw)),1.1rem);line-height:1.5;color:var(--fg-2);max-width:40ch;letter-spacing:0}
.hero-reel .hero-top .hero-intro > .row{display:flex;margin-top:20px}
@media (max-width:860px){
  .hero-reel .hero-top{grid-template-columns:1fr}
  .hero-reel .hero-top > h1{font-size:clamp(2rem,calc(9.6 * var(--vw,1vw)),2.9rem)}
  .hero-reel .hero-top .hero-intro{padding-top:18px}
}

/* "Was wir für dich machen" as a scroll stage: one film frame stays in place and turns from 16:9 (Erklärvideo)
   into 9:16 (Social Branding) while the two offers scroll past. The format change is the story of the section. */
.fs-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(32px,calc(6 * var(--vw,1vw)),110px);border-top:1px solid var(--line-2);margin-top:clamp(28px,calc(4 * var(--vw,1vw)),48px)}
.fs-stage{position:sticky;top:calc(12 * var(--vh,1vh));height:calc(76 * var(--vh,1vh));display:flex;align-items:center;justify-content:center}
.fs-frame{display:block;cursor:pointer;position:relative;width:100%;aspect-ratio:16/9;border-radius:8px;overflow:hidden;background:var(--bg-3);box-shadow:0 50px 90px -40px rgba(0,0,0,.9);will-change:width,height,transform}
.fs-grid.js .fs-frame{aspect-ratio:auto}
.fs-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fs-frame .fs-b{opacity:var(--fb,0);object-position:50% 40%}
.fs-frame::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,6,7,0) 55%,rgba(5,6,7,.7) 100%)}
.fs-tag,.fs-cap{position:absolute;z-index:2;display:grid}
.fs-tag{top:14px;right:16px;font-size:.875rem;font-weight:600;letter-spacing:.02em}
.fs-cap{left:18px;bottom:16px;font-family:var(--display);font-stretch:72%;font-weight:800;text-transform:uppercase;font-size:clamp(1.3rem,calc(2 * var(--vw,1vw)),1.8rem);line-height:1}
.fs-tag b,.fs-cap b{grid-area:1/1;font-weight:inherit;transition:opacity .35s ease,translate .45s cubic-bezier(.2,.8,.2,1)}
.fs-t2{opacity:0;translate:0 10px}
.fs-grid.two .fs-t1{opacity:0;translate:0 -10px}
.fs-grid.two .fs-t2{opacity:1;translate:0 0}
.fs-steps{display:grid;min-width:0}
.fs-steps .path{min-height:calc(76 * var(--vh,1vh));align-content:center;padding:clamp(28px,calc(4 * var(--vw,1vw)),56px) 0!important;border:0!important}
.fs-steps .path + .path{border-top:1px solid var(--line)!important}
.fs-inline{display:none}
/* the offer that is in focus is lit, the other one steps back; list points arrive one after another */
.fs-grid.js .fs-step > *{transition:opacity .5s ease,translate .6s cubic-bezier(.2,.8,.2,1)}
.fs-grid.js .fs-step:not(.on) > *{opacity:.22}
.fs-grid.js .fs-step li{transition:opacity .45s ease,translate .55s cubic-bezier(.2,.8,.2,1)}
.fs-grid.js .fs-step:not(.on) li{opacity:0;translate:-14px 0}
.fs-grid.js .fs-step.on li:nth-child(2){transition-delay:.08s}
.fs-grid.js .fs-step.on li:nth-child(3){transition-delay:.16s}
.fs-grid.js .fs-step .for{position:relative;border-top-color:transparent}
.fs-grid.js .fs-step .for::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--line-2);transform-origin:0 50%;scale:var(--ln,0) 1;transition:scale .8s cubic-bezier(.2,.8,.2,1) .15s}
.fs-grid.js .fs-step.on .for::before{--ln:1}
@media (max-width:860px){
  .fs-grid{grid-template-columns:1fr}
  .fs-stage{display:none}
  .fs-steps .path{min-height:0}
  .fs-inline{display:block;position:relative;border-radius:6px;overflow:hidden;background:var(--bg-3)}
  .fs-inline img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .fs-inline-169{aspect-ratio:16/9}
  .fs-inline-916{aspect-ratio:9/16;width:62%}
}
@media (prefers-reduced-motion:reduce){.fs-grid.js .fs-step li,.fs-grid.js .fs-step > *{transition:none}}
/* ===== V43 ===== */
/* Google rating under the home headline */
.g-rate{display:inline-flex;align-items:center;gap:10px;margin:18px 0 0;color:var(--fg-2);font-size:.95rem}
.g-rate b{color:var(--fg);font-weight:600}
.g-stars{color:var(--accent);letter-spacing:3px;font-size:.95rem}
/* logo band: endless, right to left */
.logos .track.loop{animation:marq 48s linear infinite}
.logos .track.loop{padding-right:56px}
@media (max-width:760px){.logos .track.loop{padding-right:44px;animation-duration:36s}}
.hero-reel .hero-top > .g-rate{grid-column:1;grid-row:2;justify-self:start}
.hero-reel .hero-top > .hero-intro{grid-column:2;grid-row:1 / span 2}
@media (max-width:860px){.hero-reel .hero-top > .g-rate,.hero-reel .hero-top > .hero-intro{grid-column:1;grid-row:auto}}
@media (prefers-reduced-motion:reduce){.logos .track{animation:none!important;width:auto;flex-wrap:wrap;justify-content:center;row-gap:28px}}
/* Erklärvideo hero: whole words, clean video frame */
.phero h1.h-ev{font-size:clamp(2.1rem,calc(4.5 * var(--vw,1vw)),4.6rem);overflow-wrap:normal;hyphens:manual;max-width:none}
@media (max-width:860px){.phero h1.h-ev{font-size:clamp(2.1rem,calc(9.6 * var(--vw,1vw)),3.4rem);max-width:none}}
.vf.clean::after,.kunden .vf::after{display:none}
/* stage text column: calmer focus, more air, no box */
.fs-steps .path{gap:22px;padding-left:clamp(22px,calc(2.6 * var(--vw,1vw)),40px)!important;position:relative}
.fs-steps .path:hover{background:transparent}
.fs-steps .path::before{content:"";position:absolute;left:0;top:clamp(28px,calc(4 * var(--vw,1vw)),56px);bottom:clamp(28px,calc(4 * var(--vw,1vw)),56px);width:2px;background:var(--line);border-radius:2px}
.fs-steps .path::after{content:"";position:absolute;left:0;top:clamp(28px,calc(4 * var(--vw,1vw)),56px);bottom:clamp(28px,calc(4 * var(--vw,1vw)),56px);width:2px;background:var(--accent);border-radius:2px;transform-origin:50% 0;scale:1 0;transition:scale .7s cubic-bezier(.2,.8,.2,1)}
.fs-grid.js .fs-step.on::after{scale:1 1}
.fs-grid:not(.js) .fs-step::after{display:none}
.fs-k{margin:0;display:flex;gap:12px;align-items:baseline;color:var(--fg-3);font-size:.9rem;font-weight:500;letter-spacing:.02em}
.fs-k span{color:var(--fg);font-weight:700;font-variant-numeric:tabular-nums}
.fs-steps .path h3{margin-top:-6px}
.crumb-k{margin-bottom:20px}
.fs-steps .path > p.muted{font-size:1.06rem;line-height:1.6;max-width:44ch}
.fs-steps .path ul{gap:12px}
.fs-steps .path .for{padding-top:22px;max-width:46ch;line-height:1.55}
.fs-steps .tlink{justify-self:start}
.fs-grid.js .fs-step:not(.on) > *{opacity:.32}
@media (max-width:860px){.fs-steps .path{padding-left:20px!important}.fs-steps .path::before,.fs-steps .path::after{top:0;bottom:0}.fs-steps .path::after{scale:1 1}}
/* pain points: notes land on the table, get struck through, then VOID */
.pain{padding-block:clamp(64px,calc(9 * var(--vw,1vw)),120px)}
.pain-in{display:grid;gap:clamp(28px,calc(4 * var(--vw,1vw)),48px)}
.pain-head{display:grid;gap:14px;max-width:640px}
.pain-board{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px}
.pnote{position:relative;background:#ececea;color:#111214;border-radius:3px;padding:20px 22px 22px;display:grid;gap:10px;box-shadow:0 18px 40px -18px rgba(0,0,0,.85),0 2px 0 rgba(0,0,0,.25);rotate:calc((var(--i) - 2.5) * .8deg)}
.pwho{font-size:.78rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#5c5d60}
.ptxt{font-family:var(--display);font-stretch:96%;font-weight:600;font-size:clamp(1.05rem,calc(1.5 * var(--vw,1vw)),1.3rem);line-height:1.3;position:relative}
.pnote::after{content:"";position:absolute;left:14px;right:14px;top:58%;height:3px;border-radius:2px;background:var(--accent);rotate:-3deg;transform-origin:0 50%;scale:var(--s,0) 1}
.pain-fix{display:grid;gap:12px;max-width:680px}
.pfx-k{margin:0;color:var(--fg-3);font-size:.95rem;font-weight:500}
.pain-fix h2{font-size:clamp(4rem,calc(12 * var(--vw,1vw)),10rem);line-height:.85}
.pain-fix h2 span{color:var(--accent)}
/* scroll version (JS on, motion allowed) */
.pain.js{padding-block:0}
.pain.js .pain-run{height:calc(340 * var(--vh,1vh));position:relative}
.pain.js .pain-pin{position:sticky;top:0;height:calc(100 * var(--vh,1vh));height:calc(100 * var(--vh,1vh));display:flex;align-items:center;overflow:hidden}
.pain.js .pain-in{width:100%;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);grid-template-rows:auto 1fr;align-items:center;column-gap:clamp(24px,calc(4 * var(--vw,1vw)),64px);row-gap:0}
.pain.js .pain-head{grid-column:1;grid-row:1 / span 2;align-self:center;transition:opacity .4s ease}
.pain.js .pain-board{grid-column:2;grid-row:1 / span 2;display:block;position:relative;height:min(calc(72 * var(--vh,1vh)),620px)}
.pain.js .pnote{position:absolute;width:min(320px,48%);left:var(--x);top:var(--y);opacity:var(--a,0);transform:translate3d(calc((1 - var(--a,0)) * var(--dx) * 1px),calc((1 - var(--a,0)) * 70px + var(--d,0) * 30px),0) scale(calc(1.08 - var(--a,0) * .08));rotate:var(--r);filter:brightness(calc(1 - var(--d,0) * .55))}
.pain.js .pnote:nth-child(1){--x:0%;--y:2%;--r:-4deg;--dx:-160}
.pain.js .pnote:nth-child(2){--x:51%;--y:6%;--r:3deg;--dx:160}
.pain.js .pnote:nth-child(3){--x:4%;--y:30%;--r:2deg;--dx:-160}
.pain.js .pnote:nth-child(4){--x:50%;--y:36%;--r:-3deg;--dx:160}
.pain.js .pnote:nth-child(5){--x:1%;--y:60%;--r:-1.5deg;--dx:-160}
.pain.js .pnote:nth-child(6){--x:52%;--y:66%;--r:4deg;--dx:160}
.pain.js .pain-fix{grid-column:1;grid-row:1 / span 2;align-self:center;opacity:var(--q,0);transform:translate3d(0,calc((1 - var(--q,0)) * 40px),0);pointer-events:none;z-index:2}
.pain.js.solved .pain-head{opacity:0}
.pain.js.solved .pain-fix{pointer-events:auto}
@media (max-width:860px){
  .pain.js .pain-run{height:calc(380 * var(--vh,1vh))}
  .pain.js .pain-in{grid-template-columns:1fr;grid-template-rows:auto 1fr;row-gap:18px}
  .pain.js .pain-head{grid-row:1;align-self:end}
  .pain.js .pain-head .lead{display:none}
  .pain.js .pain-board{grid-column:1;grid-row:2;height:calc(68 * var(--vh,1vh))}
  .pain.js .pnote{width:78%;padding:14px 16px 16px;gap:6px}
  .pain.js .pnote .ptxt{font-size:1rem}
  .pain.js .pnote:nth-child(odd){--x:0%}
  .pain.js .pnote:nth-child(even){--x:22%}
  .pain.js .pnote:nth-child(1){--y:0%}.pain.js .pnote:nth-child(2){--y:16%}.pain.js .pnote:nth-child(3){--y:32%}
  .pain.js .pnote:nth-child(4){--y:48%}.pain.js .pnote:nth-child(5){--y:64%}.pain.js .pnote:nth-child(6){--y:80%}
  .pain.js .pain-fix{grid-row:1 / span 2;align-self:center}
  .pain.js .pnote{opacity:calc(var(--a,0) * (1 - var(--d,0) * .97))}
}
/* three clients: logo on top, video right below */
.kunden{padding-block:clamp(40px,calc(5 * var(--vw,1vw)),72px)}
.kv{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,calc(2.4 * var(--vw,1vw)),32px)}
.kv-i{display:grid;gap:18px;justify-items:center;min-width:0}
.kv-logo{height:44px;display:flex;align-items:center;justify-content:center}
.kv-logo img{height:var(--h,36px);width:auto;filter:brightness(0) invert(1);opacity:.88}
.kv-logo img{max-width:100%;object-fit:contain}
.kv .vf{display:block;width:100%;aspect-ratio:16/9}
.kv .vf::after{display:none}
.kv .vf img{transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.kv .vf:hover img{transform:scale(1.03)}
.kv .play i{width:52px;height:52px}
.kv .play i::after{border-left-width:14px;border-top-width:8px;border-bottom-width:8px;margin-left:4px}
@media (max-width:760px){.kv{grid-template-columns:1fr;gap:36px}.kv-i{gap:14px}}
/* ===== V44 ===== */
/* contact portraits: plain photos, no glass frame */
.glassframe{padding:0;border:0;border-radius:0;background:none;box-shadow:none}
.glassframe img{border-radius:4px}
.duo{gap:12px}
/* scroll reveals (JS adds .rv.pre only below the first screen; without JS or with reduced motion all stays visible) */
.rv{transition:opacity 1s var(--ease) var(--d,0s),transform 1.1s cubic-bezier(.16,1,.3,1) var(--d,0s),clip-path 1.2s cubic-bezier(.16,1,.3,1) var(--d,0s)}
.rv.pre{opacity:0;transform:translate3d(0,48px,0)}
/* headings rise out of their own line box */
h2.rv.pre,h1.rv.pre{opacity:1;clip-path:inset(0 0 100% 0);transform:translate3d(0,.35em,0)}
h2.rv,h1.rv{clip-path:inset(0 0 -.2em 0)}
/* images open like a camera frame: inset crop widens, picture settles */
.vf.rv.pre{opacity:1;transform:none;clip-path:inset(14% 10% 14% 10% round var(--r-img))}
.vf.rv{clip-path:inset(0 0 0 0 round var(--r-img))}
.vf.rv img{transition:scale 1.4s cubic-bezier(.16,1,.3,1) var(--d,0s)}
.vf.rv.pre img{scale:1.25}
/* rows and list items slide in from the side */
.awards > div.rv.pre,.faq > div.rv.pre,.tablist > .rv.pre,.opts > .rv.pre{transform:translate3d(-40px,0,0)}
.step.rv.pre{transform:translate3d(0,36px,0) scale(.96)}
.brick.rv.pre{transform:translate3d(0,18px,0) scale(.9)}
/* scroll-linked drift: section titles slide in a little from the right while they travel up the screen */
.drift{translate:calc(var(--dr,0) * calc(6 * var(--vw,1vw))) 0}
@media (max-width:760px){.drift{translate:calc(var(--dr,0) * calc(10 * var(--vw,1vw))) 0}}
/* contact card: everything centred in the box */
.contact-card{justify-items:center;text-align:center}
.contact-card .duo{justify-content:center;margin-inline:auto}
.contact-card dl{width:100%}
.contact-card dl > div{grid-template-columns:1fr;gap:2px;justify-items:center}
/* ===== V45: two typefaces only =====
   Space Grotesk: headlines, labels, numbers (technical, a bit quirky = the creative spark)
   Satoshi: all running text, buttons, forms (calm, very readable)
   Space Grotesk has no narrow width, so headlines are set in sentence case and a little smaller than the old condensed caps. */
*{font-stretch:normal!important}
body{font-family:var(--body)}
h1,h2,h3,.fs-cap,.frame-cap strong,.pain-fix h2,.timebig b,.counts b,.pkg .price{font-family:var(--display)}
h1,h2{text-transform:none;font-weight:700;letter-spacing:-.035em;line-height:1}
h3{font-weight:600;letter-spacing:-.02em}
h1{font-size:clamp(2.4rem,calc(5.4 * var(--vw,1vw)),5rem)}
h2{font-size:clamp(2rem,calc(4.2 * var(--vw,1vw)),3.7rem)}
.phero h1{font-size:clamp(2.2rem,calc(4.3 * var(--vw,1vw)),4.1rem)}
.phero h1.h-ev{font-size:clamp(2.1rem,calc(4 * var(--vw,1vw)),3.9rem)}
.hero-reel .hero-top > h1{font-size:clamp(2rem,calc(3.7 * var(--vw,1vw)),3.7rem);line-height:1.02}
.cta-band h2{font-size:clamp(2.4rem,calc(5 * var(--vw,1vw)),4.6rem)}
.legal h1{font-size:clamp(2.1rem,calc(4.6 * var(--vw,1vw)),3.6rem)}
.path h3[style],.fs-steps .path h3{text-transform:none!important;font-weight:700!important;font-size:clamp(1.9rem,calc(3 * var(--vw,1vw)),2.7rem)!important;letter-spacing:-.03em!important;line-height:1}
.fs-cap{text-transform:none;font-weight:700;letter-spacing:-.02em}
.frame-cap strong{text-transform:none}
.pain-fix h2{font-size:clamp(4rem,calc(11 * var(--vw,1vw)),9rem);letter-spacing:-.05em}
.ptxt{font-family:var(--body);font-weight:700}
.pwho,.mono,.fs-k,.g-rate,.crumb-k{font-family:var(--mono)}
.mono{letter-spacing:.04em}
.btn,input,select,textarea,button{font-family:var(--body)}
@media (max-width:760px){
  h1{font-size:clamp(2.1rem,calc(9 * var(--vw,1vw)),2.8rem)}
  h2{font-size:clamp(1.9rem,calc(8 * var(--vw,1vw)),2.6rem)}
  .phero h1,.phero h1.h-ev{font-size:clamp(2rem,calc(8.4 * var(--vw,1vw)),2.6rem)}
  .hero-reel .hero-top > h1{font-size:clamp(1.9rem,calc(8 * var(--vw,1vw)),2.5rem)}
  .cta-band h2{font-size:clamp(2.1rem,calc(9 * var(--vw,1vw)),2.8rem)}
}
/* problem tabs: heading with text right below, tabs rotate on their own */
.sec-head.stack{grid-template-columns:1fr!important;max-width:760px;align-items:start}
.sec-head.stack > .lead{padding-bottom:0}
.tab{position:relative}
.tab::before{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--accent);transform-origin:0 50%;transform:scaleX(0)}
.tab[aria-selected="true"]::before{transform:scaleX(1)}
.tabs.auto .tab[aria-selected="true"]::before{animation:tabfill 6s linear both}
.tabs.auto.paused .tab[aria-selected="true"]::before{animation-play-state:paused}
@keyframes tabfill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
/* ===== V47: for whom (editorial, no label table) ===== */
.fw-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(24px,calc(5 * var(--vw,1vw)),80px);align-items:end;padding-bottom:clamp(28px,calc(4 * var(--vw,1vw)),48px);border-bottom:1px solid var(--line)}
.fw-head .lead{max-width:460px;justify-self:end}
@media (max-width:760px){
  .fw-head{grid-template-columns:1fr;align-items:start}
  .fw-head .lead{justify-self:start}
}
/* ===== V48: for whom as five columns ===== */
.forwho .fw-head{border-bottom:0;padding-bottom:0}
.fw-cols{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(18px,calc(2.2 * var(--vw,1vw)),32px);margin-top:clamp(36px,calc(4.5 * var(--vw,1vw)),64px)}
.fw-cols > div{border-top:1px solid var(--line-2);padding-top:18px;min-width:0;transition:border-color .3s ease}
.fw-cols > div:hover{border-top-color:var(--fg-2)}
.fw-cols h3{font-family:var(--display);font-size:.8rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--fg-3);margin:0 0 12px}
.fw-cols p{margin:0;color:var(--fg);font-size:1.02rem;line-height:1.5;hyphens:auto}
@media (max-width:1000px){.fw-cols{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:32px}.fw-cols > div:last-child{grid-column:1 / -1}}
@media (max-width:560px){.fw-cols{grid-template-columns:1fr;row-gap:24px}}
/* ===== V49: onboarding as four columns ===== */
.onb{margin-top:clamp(56px,calc(7 * var(--vw,1vw)),96px)}
.onb-head{align-items:start}
.onb-head h3{font-size:clamp(1.4rem,calc(2 * var(--vw,1vw)),1.75rem);margin:0}
.onb-head .muted{max-width:460px;justify-self:end;margin:0}
.fw-cols.four{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:clamp(24px,calc(3 * var(--vw,1vw)),40px)}
.fw-cols h4{font-family:var(--display);font-size:.8rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--fg-3);margin:0 0 12px}
@media (max-width:1000px){.fw-cols.four{grid-template-columns:repeat(2,minmax(0,1fr))}.fw-cols.four > div:last-child{grid-column:auto}}
@media (max-width:760px){.onb-head .muted{justify-self:start}}
@media (max-width:560px){.fw-cols.four{grid-template-columns:1fr}}
/* ===== V50: onboarding as a 4-step path ===== */
.onb-steps{--g:clamp(20px,calc(2.6 * var(--vw,1vw)),40px);list-style:none;margin:clamp(32px,calc(4 * var(--vw,1vw)),52px) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--g)}
.onb-steps li{position:relative;padding-top:36px;min-width:0}
.onb-steps li::before{content:"";position:absolute;top:0;left:0;width:12px;height:12px;border-radius:50%;box-sizing:border-box;border:2px solid var(--fg-2);background:var(--bg);transition:background .3s ease,border-color .3s ease}
.onb-steps li::after{content:"";position:absolute;top:6px;left:22px;right:calc(var(--g) * -1 + 10px);height:1px;background:var(--line-2)}
.onb-steps li:last-child::after{display:none}
.onb-steps li:hover::before{background:var(--accent);border-color:var(--accent)}
.onb-steps h4{font-family:var(--display);font-size:clamp(1.1rem,calc(1.4 * var(--vw,1vw)),1.3rem);font-weight:600;letter-spacing:-.01em;color:var(--fg);margin:0 0 8px}
.onb-steps p{margin:0;color:var(--fg-2);font-size:1rem;line-height:1.55;max-width:300px}
@media (max-width:760px){
  .onb-steps{grid-template-columns:1fr;--g:28px}
  .onb-steps li{padding:0 0 0 34px}
  .onb-steps li::before{top:.3em}
  .onb-steps li::after{top:calc(.3em + 20px);bottom:calc(var(--g) * -1 + 8px);left:5px;right:auto;width:1px;height:auto}
}
/* ===== V51: compact contact card ===== */
.cta-band:has(> .contact-card){grid-template-columns:minmax(0,1fr) minmax(0,340px)}
.contact-card{width:100%;max-width:340px;justify-self:end;padding:22px 22px 14px;gap:12px}
.contact-card .duo{grid-template-columns:repeat(2,92px);gap:18px;margin:0}
.contact-card .duo figure{gap:8px;justify-items:center}
.contact-card .glassframe img{aspect-ratio:1/1;border-radius:22px;object-position:50% 18%}
.contact-card figcaption{font-size:.85rem}
.contact-card p{font-size:.9rem;margin:0}
.contact-card dl > div{padding:8px 0;gap:0}
.contact-card dl > div:last-child{border-bottom:0}
.contact-card dt{font-size:.75rem}
.contact-card dd{font-size:.95rem}
@media (max-width:860px){.cta-band:has(> .contact-card){grid-template-columns:1fr}.contact-card{justify-self:start;max-width:380px}}
/* ===== V52: awards as a big list ===== */
.aw-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:12px 40px}
.aw-head .lead{max-width:440px}
.aw-list{list-style:none;margin:clamp(28px,calc(3.5 * var(--vw,1vw)),48px) 0 0;padding:0;border-top:1px solid var(--line-2)}
.aw-list li{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:clamp(16px,calc(3 * var(--vw,1vw)),48px);align-items:baseline;padding:clamp(18px,calc(2.2 * var(--vw,1vw)),28px) 0;border-bottom:1px solid var(--line)}
.aw-k{font-family:var(--display);font-weight:600;font-size:clamp(1.6rem,calc(2.8 * var(--vw,1vw)),2.6rem);letter-spacing:-.03em;line-height:1;color:var(--fg-3);transition:color .3s ease}
.aw-t{font-size:clamp(1.05rem,calc(1.5 * var(--vw,1vw)),1.3rem);line-height:1.4;color:var(--fg)}
.aw-list li:hover .aw-k{color:var(--fg)}
@media (max-width:760px){.aw-list li{grid-template-columns:1fr;gap:8px}}
/* ===== V53: headlines in capitals (Space Grotesk caps are wide, so sizes are a bit smaller) ===== */
h1,h2,.path h3[style],.fs-steps .path h3,.fs-cap,.frame-cap strong{text-transform:uppercase!important}
h1,h2{letter-spacing:-.02em;line-height:.98}
h1{font-size:clamp(2.1rem,calc(4.6 * var(--vw,1vw)),4.3rem)}
h2{font-size:clamp(1.75rem,calc(3.6 * var(--vw,1vw)),3.2rem)}
.phero h1{font-size:clamp(1.9rem,calc(3.7 * var(--vw,1vw)),3.5rem)}
.phero h1.h-ev{font-size:clamp(1.8rem,calc(3.4 * var(--vw,1vw)),3.3rem)}
.hero-reel .hero-top > h1{font-size:clamp(1.8rem,calc(3.2 * var(--vw,1vw)),3.2rem)}
.cta-band h2{font-size:clamp(2rem,calc(4.2 * var(--vw,1vw)),3.9rem)}
.path h3[style],.fs-steps .path h3{font-size:clamp(1.6rem,calc(2.6 * var(--vw,1vw)),2.3rem)!important;letter-spacing:-.02em!important}
.legal h1{font-size:clamp(1.8rem,calc(4 * var(--vw,1vw)),3rem)}
.legal h2{text-transform:none!important}
.onb-head h3{text-transform:none}
@media (max-width:760px){
  h1{font-size:clamp(1.8rem,calc(7.6 * var(--vw,1vw)),2.4rem)}
  h2{font-size:clamp(1.6rem,calc(6.8 * var(--vw,1vw)),2.2rem)}
  .phero h1,.phero h1.h-ev{font-size:clamp(1.7rem,calc(7 * var(--vw,1vw)),2.2rem)}
  .hero-reel .hero-top > h1{font-size:clamp(1.65rem,calc(6.8 * var(--vw,1vw)),2.1rem)}
  .cta-band h2{font-size:clamp(1.8rem,calc(7.6 * var(--vw,1vw)),2.4rem)}
}
/* ===== V55: language switch with tiny round flags ===== */
.lang button{display:inline-flex;align-items:center;gap:7px;padding:.45rem .65rem .45rem .55rem}
.lang button::before{content:"";width:13px;height:13px;flex:none;border-radius:50%;background-position:center;background-size:cover;box-shadow:0 0 0 1px rgba(255,255,255,.22);transition:transform .25s var(--ease),opacity .25s ease}
.lang .fl-de::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 3' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M0 0h5v1H0z'/%3E%3Cpath fill='%23D00' d='M0 1h5v1H0z'/%3E%3Cpath fill='%23FFCE00' d='M0 2h5v1H0z'/%3E%3C/svg%3E");background-size:100% 100%}
.lang .fl-en::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30' preserveAspectRatio='xMidYMid slice'%3E%3CclipPath id='t'%3E%3Cpath d='M30 15h30v15zv15H0zH0V0zV0h30z'/%3E%3C/clipPath%3E%3Cpath fill='%23012169' d='M0 0h60v30H0z'/%3E%3Cpath stroke='%23fff' stroke-width='6' d='M0 0l60 30m0-30L0 30'/%3E%3Cpath stroke='%23C8102E' stroke-width='4' clip-path='url(%23t)' d='M0 0l60 30m0-30L0 30'/%3E%3Cpath stroke='%23fff' stroke-width='10' d='M30 0v30M0 15h60'/%3E%3Cpath stroke='%23C8102E' stroke-width='6' d='M30 0v30M0 15h60'/%3E%3C/svg%3E");background-size:auto 100%}
.lang button[aria-pressed="false"]{color:var(--fg-2)}
.lang button[aria-pressed="false"]::before{opacity:.75}
.lang button[aria-pressed="true"]::before{box-shadow:0 0 0 1px rgba(0,0,0,.18)}
.lang button:hover::before{opacity:1;transform:scale(1.12)}
/* ===== V56 ===== */
.kv-logo{height:64px}
.mcard .vf .osd.top span{background:rgba(5,6,7,.55);padding:4px 8px;border-radius:3px}
/* Germany map */
.demap{margin:0;display:grid;place-items:center;padding:clamp(8px,calc(2 * var(--vw,1vw)),24px) 0}
.demap-svg{width:100%;max-width:520px;height:auto;overflow:visible}
.demap .states path{fill:rgba(255,255,255,.045);stroke:rgba(255,255,255,.2);stroke-width:.8;stroke-linejoin:round;transition:fill .3s ease}
.demap .states path:hover{fill:rgba(255,255,255,.09)}
.demap .pin{transform:translate(var(--x),var(--y));cursor:pointer;outline:none}
.demap .pin .dot{fill:var(--accent);stroke:var(--bg);stroke-width:2}
.demap .pin .ring{fill:none;stroke:var(--accent);stroke-width:1.2;opacity:.45;transform-box:fill-box;transform-origin:center;transition:transform .35s var(--ease),opacity .35s ease}
.demap .pin.main .ring{opacity:.7}
.demap .pin .lbl{font-family:var(--display);font-weight:600;font-size:17px;fill:var(--fg-2);transition:fill .25s ease}
.demap .pin .sub{font-family:var(--body);font-size:12.5px;fill:var(--fg-3)}
.demap .pin.main .lbl{fill:var(--fg)}
.demap .pin:hover .ring,.demap .pin:focus-visible .ring,.demap .pin.on .ring{transform:scale(1.7);opacity:1}
.demap .pin:hover .lbl,.demap .pin:focus-visible .lbl,.demap .pin.on .lbl{fill:var(--fg)}
@keyframes pinring{0%{transform:scale(1);opacity:.7}70%{transform:scale(2.4);opacity:0}100%{transform:scale(2.4);opacity:0}}
@keyframes pindrop{from{opacity:0;transform:translate(0,-18px)}to{opacity:1;transform:none}}
.demap .pin > *{animation:pindrop .7s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(.3s + var(--i) * .15s)}
.demap.rv.pre .pin > *{animation:none;opacity:0}
.demap .pin.main .ring{animation:pindrop .7s cubic-bezier(.16,1,.3,1) both .3s,pinring 2.8s ease-out 1.2s infinite}
.demap .pin.main:hover .ring{animation:none}
@media (prefers-reduced-motion:reduce){.demap .pin > *,.demap .pin.main .ring{animation:none!important;opacity:1}}
@media (max-width:860px){.demap-svg{max-width:420px}}
@media (max-width:560px){.demap .pin .lbl{font-size:25px}.demap .pin .sub{font-size:18px;transform:translateY(5px)}.demap .pin .dot{transform:scale(1.35);transform-box:fill-box;transform-origin:center}}
/* ===== V59: pain notes with a short fact line ===== */
.pnote .pfact{font-family:var(--body);font-size:.78rem;line-height:1.35;color:rgba(17,18,20,.58);border-top:1px solid rgba(17,18,20,.12);padding-top:8px;margin-top:2px}
.pnote::after{top:calc(18px + 1.2em + 10px + .55lh)}
@media (min-width:861px){.pain.js .pain-board{height:min(calc(80 * var(--vh,1vh)),700px)}.pain.js .pnote{padding:16px 18px 16px;gap:8px}.pain.js .ptxt{font-size:clamp(1rem,calc(1.25 * var(--vw,1vw)),1.15rem)}.pain.js .pnote:nth-child(3){--y:34%}.pain.js .pnote:nth-child(4){--y:38%}.pain.js .pnote:nth-child(5){--y:67%}.pain.js .pnote:nth-child(6){--y:70%}}
@media (max-width:860px){.pain.js .pnote .pfact{display:none}.pain.js .pain-board{height:calc(72 * var(--vh,1vh))}.pain.js .pnote{width:88%;padding:12px 14px 14px}.pain.js .pnote:nth-child(even){--x:12%}.pain.js .pnote .ptxt{font-size:.95rem;line-height:1.25}}
.chap{display:flex;align-items:center;gap:12px;margin:0 0 20px;font-family:var(--mono);font-size:.8125rem;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3)}
.chap span{color:var(--accent);font-weight:600}
.chap::after{content:"";flex:0 0 48px;height:1px;background:var(--line-2)}
.ev-facts{max-width:880px;margin-bottom:clamp(40px,calc(5 * var(--vw,1vw)),64px)}
.route-stick{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:4px}
.route-stick::-webkit-scrollbar{display:none}
.route{list-style:none;margin:0;padding:0;display:flex;gap:0;width:max-content}
.route > li{position:relative;flex:0 0 min(340px,calc(78 * var(--vw,1vw)));padding:34px 40px 0 0;scroll-snap-align:start;display:grid;align-content:start;gap:10px}
.route > li::before{content:"";position:absolute;top:5px;left:0;right:0;height:1px;background:var(--line-2);transition:background .35s}
.route > li:last-child::before{right:40px}
.route > li::after{content:"";position:absolute;top:5px;left:0;right:0;height:1px;background:var(--accent);transform-origin:0 50%;transform:scaleX(var(--f,0))}
.route > li:last-child::after{display:none}
.route-pin:not(.is-pinned) .route > li::after{transform:none}
.route-pin:not(.is-pinned) .route > li:last-child::after{display:none}
.route .dot{position:absolute;top:-1px;left:-1px;width:13px;height:13px;border-radius:50%!important;background:var(--bg);box-shadow:inset 0 0 0 1.5px var(--fg-3);z-index:1;transition:background .3s,box-shadow .3s}
.route > li.on .dot{background:var(--accent);box-shadow:inset 0 0 0 1.5px var(--accent),0 0 0 4px rgba(255,158,10,.16)}
.route{padding-top:6px}
.route-pin.is-pinned .route-stick{padding-left:12px;margin-left:-12px}
.route .when{font-family:var(--mono);font-size:.8125rem;letter-spacing:.04em;color:var(--fg-3);transition:color .3s}
.route > li.on .when{color:var(--fg)}
.route h3{margin:0 0 8px}
.route p{margin:0;color:var(--fg-2);font-size:1.0625rem;line-height:1.55}
.route .you{display:inline-block;margin-top:16px;padding:5px 12px;border:1px solid var(--line-2);border-radius:999px;font-family:var(--mono);font-size:.8125rem;color:var(--fg-2)}
.route .you b{color:var(--fg);font-weight:600}
.route-foot{display:none}
.route-pin.is-vert .route-stick{overflow:visible;scroll-snap-type:none;padding:0;margin:0}
.route-pin.is-vert .route{flex-direction:column;width:auto;padding-top:0;transform:none!important}
.route-pin.is-vert .route > li{flex:none;padding:0 0 34px 34px;gap:8px}
.route-pin.is-vert .route > li:last-child{padding-bottom:0}
.route-pin.is-vert .route > li::before{top:6px;bottom:-6px;left:6px;right:auto;width:1px;height:auto}
.route-pin.is-vert .route > li::after{display:block;top:6px;bottom:-6px;left:6px;right:auto;width:1px;height:auto;transform-origin:50% 0;transform:scaleY(var(--f,0))}
.route-pin.is-vert .route > li:last-child::before,.route-pin.is-vert .route > li:last-child::after{display:none}
.route-pin.is-vert .route .dot{top:0;left:0}
.route-pin.is-vert .route .when{display:block}
.route-pin.is-pinned .route-stick{position:sticky;top:max(90px,calc(calc(50 * var(--vh,1vh)) - var(--sh,300px) / 2));overflow:hidden;scroll-snap-type:none;padding-bottom:0}
.route-pin.is-pinned .route{will-change:transform}
.route-pin.is-pinned .route-foot{display:flex;align-items:center;gap:16px;margin-top:clamp(28px,calc(4 * var(--vw,1vw)),44px)}
.route-n{white-space:nowrap;font-family:var(--mono);font-size:.8125rem;color:var(--fg-2);font-variant-numeric:tabular-nums}
.route-bar{position:relative;height:1px;flex:0 1 280px;background:var(--line)}
.route-bar i{position:absolute;inset:0 auto 0 0;width:calc(var(--rp,0) * 100%);background:var(--fg-2)}
@media (max-width:640px){.ev-facts b{font-size:1.7rem}.route > li{padding-right:28px}.route > li:last-child::before{right:28px}}
#lvlseg{justify-self:start;width:max-content;max-width:100%}
/* V80 brand thumbnails */
.vf.brand{display:grid;place-items:center;container-type:inline-size;background:radial-gradient(110% 85% at 18% 0%,var(--b2),transparent 62%),radial-gradient(90% 80% at 100% 100%,var(--b3),transparent 65%),var(--b1)}
.vf.brand::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.18),transparent 30%,transparent 70%,rgba(0,0,0,.28));pointer-events:none}
.vf.brand > img{position:relative;inset:auto;width:var(--w);height:auto;max-height:44%;object-fit:contain;filter:drop-shadow(0 2px 12px rgba(0,0,0,.18))}
.vf.brand .wm{position:relative;color:#fff;font-family:var(--display,inherit);font-weight:700;letter-spacing:.08em;font-size:clamp(1.6rem,11cqw,4rem);line-height:1}
.vf.brand .wm-lulatsch{letter-spacing:.01em;font-style:italic;font-weight:600}
/* V85 device stage + quotes */
.kunden .wrap{position:relative}
.kv-dev{--p:1;grid-template-columns:minmax(0,1fr) minmax(0,.44fr) minmax(0,1fr);grid-template-rows:auto auto;column-gap:0;row-gap:22px;align-items:end;perspective:1800px;position:relative;isolation:isolate}
.kv-dev::before{content:"";position:absolute;left:8%;right:8%;bottom:-40px;height:46%;z-index:-1;background:radial-gradient(50% 60% at 50% 100%,rgba(255,158,10,.13),transparent 70%),radial-gradient(60% 80% at 50% 100%,rgba(255,255,255,.05),transparent 70%);filter:blur(10px);pointer-events:none}
.kv-dev .kv-i{grid-row:span 2;grid-template-rows:subgrid;gap:22px;min-width:0}
.kv-dev .kv-logo{height:68px;align-self:end}
.kv-dev .kv-i > .dev{align-self:end}
.kv-dev{padding-inline:clamp(0px,calc(4 * var(--vw,1vw)),56px)}.kv-l{z-index:1;margin-right:-7%}
.kv-r{z-index:1;margin-left:-7%}
.kv-phone{z-index:2}
.dev{position:relative;width:100%;transform-style:preserve-3d}
.dev-screen{display:block;position:relative;overflow:hidden;background:#000}
.dev-screen::after{display:none}
.dev-screen img,.dev-screen video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.dev-screen video{opacity:0;transition:opacity .8s ease}
.dev-screen.live video{opacity:1}
.dev-screen .glare{position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(118deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,.03) 28%,transparent 46%)}
.dev-screen .play{z-index:3;opacity:0;transition:opacity .35s ease}
/* V113: no play icon on laptop/phone (they lead to Missionen) */
.dev-screen .play i{display:none}
/* V113: showreel plays by itself, the icon only shows while the still image is up; the whole reel stays clickable (opens with sound) */
/* V114: every self-starting video hides its play icon while it runs; the area still opens the full video with sound */
.vf .play i{transition:opacity .4s ease,transform .25s ease}
.vf.live > .play i{opacity:0}
/* laptop */
.dev-pc .lid{position:relative;padding:2.3% 2.3% 3.2%;border-radius:14px 14px 4px 4px;background:linear-gradient(180deg,#26282c,#121316);box-shadow:inset 0 0 0 1px rgba(255,255,255,.10),inset 0 1px 0 rgba(255,255,255,.18),0 50px 80px -40px rgba(0,0,0,.95)}
.dev-pc .lid::before{content:"";position:absolute;top:.9%;left:50%;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:#0b0c0d;box-shadow:0 0 0 1px rgba(255,255,255,.08)}
.dev-pc .dev-screen{aspect-ratio:16/10;border-radius:4px}
.dev-pc .base{display:block;position:relative;height:clamp(9px,calc(1.1 * var(--vw,1vw)),14px);margin:0 -8%;border-radius:2px 2px 16px 16px;background:linear-gradient(180deg,#45484e 0%,#2a2c30 35%,#141517 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 24px 30px -14px rgba(0,0,0,.9)}
.dev-pc .base::before{content:"";position:absolute;top:0;left:50%;width:16%;height:38%;transform:translateX(-50%);border-radius:0 0 8px 8px;background:linear-gradient(180deg,#17181a,#2b2d31)}
/* phone */
.dev-phone{max-width:250px;margin-inline:auto}
.dev-phone .body{position:relative;padding:3.6%;border-radius:clamp(30px,calc(3.4 * var(--vw,1vw)),42px);background:linear-gradient(150deg,#3b3e43,#141518 45%,#232528);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),inset 0 0 0 3px #0a0a0b,0 60px 90px -40px rgba(0,0,0,1),0 0 90px -30px rgba(255,158,10,.30)}
.dev-phone .body::after{content:"";position:absolute;right:-2px;top:24%;width:3px;height:13%;border-radius:2px;background:linear-gradient(90deg,#2c2e32,#4a4d52)}
.dev-phone .dev-screen{aspect-ratio:9/19.5;border-radius:clamp(24px,calc(2.8 * var(--vw,1vw)),34px)}
.dev-phone .island{position:absolute;z-index:4;top:5.2%;left:50%;width:30%;height:3.2%;transform:translateX(-50%);border-radius:20px;background:#000}
/* motion: scroll-linked (JS sets --p from 0 to 1) */
@media (prefers-reduced-motion:no-preference){
  .kv-l .dev{transform-origin:100% 60%;transform:perspective(1400px) rotateY(calc(30deg - var(--p) * 18deg)) translateX(calc((1 - var(--p)) * -5%))}
  .kv-r .dev{transform-origin:0% 60%;transform:perspective(1400px) rotateY(calc(-30deg + var(--p) * 18deg)) translateX(calc((1 - var(--p)) * 5%))}
  .kv-phone .dev{transform:translateY(calc((1 - var(--p)) * 70px)) scale(calc(.92 + var(--p) * .08))}
  .kv-phone .body{animation:phoneFloat 7s ease-in-out infinite}
  .dev-pc{transition:translate .5s cubic-bezier(.2,.8,.2,1)}
  .dev-pc:hover{translate:0 -6px}
}
.kv-dev .dev-phone .body{padding:8px;border-radius:40px}.kv-dev .dev-phone .dev-screen{border-radius:32px!important}.kv-dev .dev-pc .dev-screen{border-radius:4px!important}
@keyframes phoneFloat{0%,100%{translate:0 0}50%{translate:0 -8px}}
@media (max-width:760px){
  .kv-dev{grid-template-columns:1fr;grid-template-rows:none;row-gap:48px;perspective:none}
  .kv-dev{padding-inline:0}.kv-dev .kv-i{grid-row:auto;grid-template-rows:none;gap:16px;margin:0}
  .kv-dev .kv-i > .dev{transform:none!important}
  .kv-phone{order:-1}
  .dev-phone{max-width:220px}
  .dev-pc .base{margin:0 -5%}
}
/* V138: phones keep the device composition (phone in front, laptops tilted behind) instead of a tall stack */
@media (max-width:1000px){
  .kv-dev{grid-template-columns:minmax(0,1fr) minmax(0,.8fr) minmax(0,1fr);grid-template-rows:none;column-gap:0;row-gap:0;align-items:end;padding-inline:0}
  .kv-dev .kv-i{grid-row:auto;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:10px;margin:0}
  .kv-phone{order:0;z-index:2}
  .kv-l{margin-right:-26%;z-index:1}
  .kv-r{margin-left:-26%;z-index:1}
  .kv-dev .kv-i > .dev{width:100%}
  .kv-dev .kv-l > .dev{transform:perspective(900px) rotateY(16deg)!important;transform-origin:100% 60%}
  .kv-dev .kv-r > .dev{transform:perspective(900px) rotateY(-16deg)!important;transform-origin:0% 60%}
  .kv-dev .dev-phone{max-width:none}
  .kv-dev .dev-phone .body{padding:5px;border-radius:22px}
  .kv-dev .dev-phone .dev-screen{border-radius:18px!important}
  .kv-dev .dev-pc .base{margin:0 -6%}
  .kv-dev .kv-logo{height:auto}
  .kv-dev .kv-logo img{height:calc(var(--h,36px) * .7)}
}
@media (max-width:560px){.kv-dev .kv-logo img{height:calc(var(--h,36px) * .45)}}
/* V140: phones: one laptop, phone in front of its right corner */
@media (max-width:760px){
  .kv-dev{grid-template-columns:minmax(0,1fr) minmax(0,.42fr);align-items:end}
  .kv-dev .kv-r{display:none}
  .kv-dev .kv-l{grid-column:1 / -1;grid-row:1;margin:0 18% 0 0;align-items:flex-start}
  .kv-dev .kv-phone{grid-column:2;grid-row:1;align-items:flex-end;margin-bottom:-18px}
  .kv-dev .kv-l > .dev,.kv-dev .kv-phone > .dev{transform:none!important}
  .kv-dev .dev-pc .base{margin:0 -4%}
  .kv-dev .kv-logo img{height:calc(var(--h,36px) * .5)}
  .kv-dev .kv-l .kv-logo{align-self:stretch;justify-content:flex-start}
  .kv-dev .kv-phone .kv-logo{align-self:stretch;justify-content:flex-end}
}
/* V138: drifting section titles never cause sideways scrolling (tablets) */
body{overflow-x:clip}
/* V138: comfortable tap targets on touch screens */
@media (hover:none),(max-width:760px){
  .ftr-social a{display:inline-block;padding-block:10px}
  .tlink{display:inline-block;padding-block:8px 4px}
}
.tgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,calc(2.4 * var(--vw,1vw)),28px)}
.tcard{margin:0;display:grid;gap:14px;align-content:start}
.tcard .vf{display:block;aspect-ratio:16/9;position:relative}
.tcard .vf img{transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.tcard .vf:hover img{transform:scale(1.04)}
.tcard .play i{width:54px;height:54px}
.tcard .dur{position:absolute;right:12px;bottom:12px;z-index:3;font-family:var(--mono);font-size:.78rem;font-weight:600;letter-spacing:.05em;padding:3px 8px;border-radius:4px;background:rgba(5,6,7,.7);color:var(--fg)}
.tcard figcaption{display:grid;gap:2px;font-size:.95rem;color:var(--fg-2)}
.tcard figcaption b{color:var(--fg);font-weight:600;font-size:1.05rem}
@media (max-width:900px){.tgrid{grid-template-columns:1fr}}
/* V141: five testimonials: 3 + 2 centred on desktop, 2 + 2 + 1 on tablets, swipe row on phones */
.tgrid.t5{grid-template-columns:repeat(6,minmax(0,1fr));row-gap:clamp(28px,calc(3.4 * var(--vw,1vw)),44px)}
.tgrid.t5 > .tcard{grid-column:span 2}
.tgrid.t5 > .tcard:nth-child(4){grid-column:2 / span 2}
.tdots{display:none}
@media (max-width:900px){
  .tgrid.t5{grid-template-columns:repeat(4,minmax(0,1fr))}
  .tgrid.t5 > .tcard:nth-child(4){grid-column:span 2}
  .tgrid.t5 > .tcard:nth-child(5){grid-column:2 / span 2}
}
@media (max-width:760px){
  .tgrid.t5{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--pad,20px);margin-inline:calc(-1 * var(--pad,20px));padding:0 var(--pad,20px) 6px;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
  .tgrid.t5::-webkit-scrollbar{display:none}
  .tgrid.t5 > .tcard{flex:0 0 84%;scroll-snap-align:start}
  .tdots{display:flex;justify-content:center;gap:8px;margin-top:16px}
  .tdots i{width:7px;height:7px;border-radius:50%;background:var(--line-2,rgba(255,255,255,.25));transition:background .25s,transform .25s}
  .tdots i.on{background:var(--accent,#ff9e0a);transform:scale(1.25)}
}
.qgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,calc(2.4 * var(--vw,1vw)),28px)}
.qcard{margin:0;display:grid;gap:18px;align-content:start;padding:clamp(22px,calc(2.6 * var(--vw,1vw)),32px);border:1px solid var(--line);border-radius:var(--r-card,6px);background:rgba(255,255,255,.02)}
.qcard .stars{color:var(--accent,#ff9e0a);letter-spacing:.18em;font-size:.95rem}
.qcard blockquote{margin:0;font-family:var(--display);font-weight:500;font-size:clamp(1.08rem,calc(1.35 * var(--vw,1vw)),1.24rem);line-height:1.45;color:var(--fg)}
.qcard figcaption{display:grid;gap:2px;font-size:.92rem;color:var(--fg-2);margin-top:auto}
.qcard figcaption b{color:var(--fg);font-weight:600}
@media (max-width:900px){.qgrid{grid-template-columns:1fr}}
/* V112 autoplay videos (muted, start by themselves; still image stays without JS or with reduced motion) */
.vf video.autobg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .9s ease;pointer-events:none}
.vf.live video.autobg{opacity:1}
.reel-full video.autobg{top:3px;height:calc(100% - 3px)}
/* V115: self-starting videos never show the play icon (only the still image with reduced motion does); Missionen page calmer: no corner frames, no video type label */
.vf:has(> video.autobg) > .play i{opacity:0!important}
@media (prefers-reduced-motion: reduce){.vf:has(> video.autobg) > .play i{opacity:1!important}}
.page[data-page="missionen"] .mcard .vf::after{display:none}
.page[data-page="missionen"] .mcard .vf .osd.bot{display:none}
/* V117: scroll animations measure the real zoom factor of the browser (WQHD/4K in Safari, Firefox, older Chrome) */
/* V116: third-party overlays (Borlabs cookie box + widget) undo the big-screen zoom, so they fit the screen */
#BorlabsCookieBox,#BorlabsCookieWidget{zoom:var(--iz,1)}
/* ===== MITTEL-VARIANTE: halfway between square and round ===== */
:root{--r-card:14px;--r-img:12px;--r-small:8px}
.vf,.mcard .vf,.kv .vf,.team-feature .vf,.phero-grid .vf,.fs-frame,.fs-inline,.phone{border-radius:var(--r-img);overflow:hidden}
.vf::after{inset:12px}
.reel-full .vf{border-radius:0}
.cta-band,.page > section:has(> .wrap > .cta-band) .cta-band{border-radius:20px!important}
.contact-card,.panel,.result,.lvl-out,.month,.compare,.pkg,.paths,.opt,.brick,.toast,.sent,.seg{border-radius:var(--r-card)!important}
.contact-card .glassframe img{border-radius:16px}
.glassframe,.glassframe img{border-radius:var(--r-img)}
.seg button{border-radius:8px}
.seg{padding:4px}
.btn,.hdr .btn{border-radius:10px!important}
.lang{border-radius:10px}
.nav a{border-radius:8px}
.hdr.open .nav{border-radius:14px}
.field input,.field select,.field textarea{border-radius:var(--r-small)}
.field textarea{border-radius:10px}
.tbar{border-radius:999px}
.pnote,.ph,.avatars img,.fmt-box{border-radius:6px}
.mcard .vf .osd.top span{border-radius:6px}
.awards .mono,.ctable dt,.after .mono,.week .mono,.panel .pair .mono,.path .fmt .mono,.crumb .mono,.mcard .meta .mono,.step .mono,.result .tag,.lvl-out .mono,address .mono,.flag{border-radius:6px!important}
.fw-cols > div,.onb-steps li{border-radius:0}
.tablist .tab{border-radius:8px}
.panel{overflow:hidden}
body.review .note,body.review .seo{border-radius:8px}
:focus-visible{border-radius:6px}
/* review notes */
.note{display:none}
body.review .note{display:block;background:var(--note);color:var(--note-ink);border-radius:4px;padding:12px 14px;font-size:.88rem;line-height:1.45;margin-block:14px;max-width:70ch;font-family:var(--body)}
body.review .note::before{content:"Team-Notiz, ";font-weight:700}
body.review .note b{font-weight:700}
.seo{display:none}
body.review .seo{display:block;background:var(--bg-3);border:1px dashed var(--note);color:var(--fg-2);border-radius:4px;padding:12px 14px;font-size:.84rem;margin-bottom:24px;font-family:var(--mono);line-height:1.55;overflow-wrap:anywhere}
body.review .seo b{color:var(--note);font-weight:500}
.dock{position:fixed;z-index:70;right:max(16px,env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));display:flex;gap:8px;align-items:center}
.dock button{background:var(--note);color:var(--note-ink);border:0;border-radius:999px;padding:.75rem 1.05rem;font:600 .9rem/1 var(--body);cursor:pointer;box-shadow:0 10px 30px -10px rgba(0,0,0,.6)}
body.review .dock button{background:var(--fg);color:var(--bg)}
.toast{position:fixed;z-index:80;left:50%;bottom:calc(84px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--fg);color:var(--bg);padding:.85rem 1.1rem;border-radius:6px;font-size:.92rem;max-width:min(calc(92 * var(--vw,1vw)),460px);text-align:center}
.page[hidden]{display:none!important}

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

/* V119 liquid-glass video window */
.vmodal{position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:clamp(12px,3vw,40px)}
.vmodal[hidden]{display:none}
.vm-scrim{position:absolute;inset:0;background:rgba(3,4,6,.38);-webkit-backdrop-filter:blur(22px) saturate(150%);backdrop-filter:blur(22px) saturate(150%);opacity:0;transition:opacity .4s ease}
.vmodal.on .vm-scrim{opacity:1}
.vm-glass{--g:var(--b2,#3a4a6a);position:relative;isolation:isolate;width:min(1120px,100%,calc((var(--vmh,100vh) - var(--vres,250px)) * 16 / 9 + 44px));min-width:min(100%,320px);max-height:100%;overflow:auto;overscroll-behavior:contain;scrollbar-width:none;padding:clamp(12px,1.6vw,20px);border-radius:30px;
  background:linear-gradient(140deg,rgba(255,255,255,.16),rgba(255,255,255,.05) 38%,rgba(255,255,255,.03) 62%,rgba(255,255,255,.1));
  border:1px solid rgba(255,255,255,.2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 1px 0 0 rgba(255,255,255,.12),inset 0 -1px 0 rgba(255,255,255,.08),inset 0 0 40px rgba(255,255,255,.04),0 50px 140px rgba(0,0,0,.6),0 8px 30px rgba(0,0,0,.35);
  -webkit-backdrop-filter:blur(44px) saturate(190%) brightness(1.08);backdrop-filter:blur(44px) saturate(190%) brightness(1.08);
  opacity:0;transform:translateY(28px) scale(.95);transition:opacity .4s ease,transform .6s cubic-bezier(.2,.9,.25,1)}
.vm-glass::-webkit-scrollbar{display:none}
.vmodal.on .vm-glass{opacity:1;transform:none}
.vm-glass::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:radial-gradient(110% 70% at 12% -12%,rgba(255,255,255,.2),transparent 55%),radial-gradient(90% 80% at 92% 115%,color-mix(in srgb,var(--g) 70%,transparent),transparent 72%),radial-gradient(60% 50% at 0% 100%,color-mix(in srgb,var(--b3,#222) 40%,transparent),transparent 70%)}
.vm-glass.vert{width:min(460px,100%,calc((var(--vmh,100vh) - 200px) * 9 / 16 + 44px))}
.vm-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:4px 4px 14px 8px}
.vm-head h3{font-size:clamp(1.15rem,1.6vw,1.45rem);line-height:1.15;margin:4px 0 0}
.vm-head .mono{color:var(--fg-2);font-size:.78rem}
.vm-tag{display:inline-block;margin-left:10px;padding:3px 9px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14)}
.vm-x{flex:none;width:44px;height:44px;border-radius:999px;display:grid;place-items:center;cursor:pointer;color:var(--fg);
  background:linear-gradient(160deg,rgba(255,255,255,.22),rgba(255,255,255,.06));border:1px solid rgba(255,255,255,.24);box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 6px 18px rgba(0,0,0,.3);transition:transform .25s,background .25s}
.vm-x:hover{transform:rotate(90deg);background:linear-gradient(160deg,rgba(255,255,255,.3),rgba(255,255,255,.1))}
.vm-x svg{width:18px;height:18px}
.vm-stage{position:relative;aspect-ratio:16/9;border-radius:20px;overflow:hidden;background:#000;box-shadow:0 0 0 1px rgba(255,255,255,.1),0 20px 50px rgba(0,0,0,.45)}
.vert .vm-stage{aspect-ratio:9/16}
.vm-stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000}
.vm-tabs{display:flex;gap:10px;padding:14px 2px 2px;overflow-x:auto;scrollbar-width:none}
.vm-tabs::-webkit-scrollbar{display:none}
.vm-tab{flex:1 0 200px;display:flex;align-items:center;gap:12px;padding:8px;border-radius:18px;cursor:pointer;text-align:left;color:var(--fg-2);font:inherit;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);transition:background .25s,border-color .25s,color .25s}
.vm-tab:hover{background:rgba(255,255,255,.1);color:var(--fg)}
.vm-tab[aria-selected="true"]{color:var(--fg);background:linear-gradient(150deg,rgba(255,255,255,.2),rgba(255,255,255,.07));border-color:rgba(255,255,255,.3);box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
.vm-th{flex:none;width:88px;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:#000}
.vm-th img{width:100%;height:100%;object-fit:cover;display:block}
.vm-tab b{display:block;font-weight:600;font-size:.98rem}
.vm-tab .mono{font-size:.72rem}
.mcard[data-videos]{cursor:pointer}
.mcard .vf .mprev{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .45s ease;pointer-events:none;z-index:1}
.mcard .vf.prev-on .mprev{opacity:1}
.mcard .vf .osd{z-index:2}
.mcard[data-vert] .vf .mprev{inset:6% auto auto 50%;width:auto;height:88%;aspect-ratio:9/16;object-fit:cover;border-radius:12px;box-shadow:0 18px 44px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.08);transform:translate(-50%,10px) scale(.96);transition:opacity .45s ease,transform .6s cubic-bezier(.2,.8,.2,1)}
.mcard[data-vert] .vf.prev-on .mprev{transform:translate(-50%,0) scale(1)}
.mcard[data-vert] .vf > img{transition:transform .6s cubic-bezier(.2,.8,.2,1),opacity .45s ease}
.mcard[data-vert] .vf.prev-on > img{opacity:0}
@media (max-width:560px){.vm-glass{border-radius:24px}.vm-stage{border-radius:14px}.vm-tab{flex-basis:170px}.vm-th{width:64px}}
@media (prefers-reduced-motion:reduce){.vm-glass,.vm-scrim{transition:opacity .2s}.vm-glass{transform:none}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.vm-glass{background:rgba(22,24,30,.94)}.vm-scrim{background:rgba(3,4,6,.85)}}

/* V122 inline video player: plays in place, glass control bar on hover */
button.play{border:0;background:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;width:100%}
.vp{cursor:pointer}
.vp video.vpv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000;z-index:1}
.vp.vp-on > .play,.vp.vp-on > .dur{opacity:0;pointer-events:none}
.vp.vp-on > .play{pointer-events:auto}
.vp.vp-on > .play i{opacity:0!important}
.vp-bar{position:absolute;left:14px;right:14px;bottom:14px;z-index:6;display:flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;color:#fff;cursor:default;
  background:linear-gradient(150deg,rgba(255,255,255,.18),rgba(255,255,255,.05));border:1px solid rgba(255,255,255,.2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 12px 30px rgba(0,0,0,.35);
  -webkit-backdrop-filter:blur(18px) saturate(170%);backdrop-filter:blur(18px) saturate(170%);
  opacity:0;transform:translateY(10px);transition:opacity .25s ease,transform .3s cubic-bezier(.2,.9,.25,1);pointer-events:none}
.vp.show .vp-bar,.vp:has(:focus-visible) .vp-bar{opacity:1;transform:none;pointer-events:auto}
.vp-bar button{flex:none;width:36px;height:36px;border:0;border-radius:999px;background:transparent;color:inherit;display:grid;place-items:center;cursor:pointer;padding:0;transition:background .2s}
.vp-bar button:hover{background:rgba(255,255,255,.16)}
.vp-bar button:focus-visible,.vp-bar input:focus-visible{outline:2px solid #fff;outline-offset:2px}
.vp-bar svg{width:18px;height:18px;display:block}
.vp-t{flex:none;font:600 .75rem/1 var(--mono);letter-spacing:.04em;font-variant-numeric:tabular-nums;white-space:nowrap;opacity:.92;padding-inline:4px}
.vp-bar input[type=range]{-webkit-appearance:none;appearance:none;height:18px;background:transparent;cursor:pointer;margin:0;--p:0%}
.vp-bar input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:4px;background:linear-gradient(90deg,#fff var(--p),rgba(255,255,255,.28) var(--p))}
.vp-bar input[type=range]::-moz-range-track{height:4px;border-radius:4px;background:linear-gradient(90deg,#fff var(--p),rgba(255,255,255,.28) var(--p))}
.vp-bar input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:#fff;margin-top:-4px;box-shadow:0 1px 4px rgba(0,0,0,.4)}
.vp-bar input[type=range]::-moz-range-thumb{width:12px;height:12px;border:0;border-radius:50%;background:#fff}
.vp-seek{flex:1 1 auto;min-width:30px}
.vp-vol{flex:none;width:70px}
.vp-snd{position:absolute;z-index:5;right:14px;top:14px;display:flex;align-items:center;gap:8px;padding:7px 12px 7px 10px;border-radius:999px;font:600 .78rem/1 var(--body);color:#fff;border:1px solid rgba(255,255,255,.2);cursor:pointer;
  background:linear-gradient(150deg,rgba(255,255,255,.18),rgba(255,255,255,.05));box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 8px 24px rgba(0,0,0,.3);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  opacity:0;transform:translateY(-6px);transition:opacity .25s,transform .3s;pointer-events:none}
.vp-snd svg{width:16px;height:16px}
.vp.show.vp-muted .vp-snd{opacity:1;transform:none;pointer-events:auto}
.vp:not(.vp-on) .vp-bar,.vp:not(.vp-on) .vp-snd{opacity:0!important;pointer-events:none!important}
.vp:fullscreen{border-radius:0}
.vp:fullscreen video{object-fit:contain!important}
.vp:-webkit-full-screen video{object-fit:contain!important}
.reel-full .vp-bar{left:max(14px,calc(50% - 560px));right:max(14px,calc(50% - 560px));bottom:clamp(70px,9vh,110px)}
.reel-full .vp-snd{top:auto;bottom:calc(clamp(70px,9vh,110px) + 60px);right:max(14px,calc(50% - 560px))}
@media (hover:none){.vp-vol{display:none}}
@media (max-width:560px){.vp-bar{left:8px;right:8px;bottom:8px;padding:3px 6px;gap:2px}.vp-t{display:none}.vp-bar button{width:32px;height:32px}.vp-snd{right:8px;top:8px}}

/* V123: when a video file cannot play on the page, the still image and play icon stay and a click opens the video in a new tab */
.vp.vp-fail .vp-bar,.vp.vp-fail .vp-snd{display:none}
.vf.vp.vp-fail > .play i{opacity:1!important}
.vp.vp-fail.vp-on > .play{opacity:1}
.vp.vp-fail video{opacity:0!important}
.vm-fall{display:none;position:absolute;inset:0;z-index:2;place-items:center;align-content:center;gap:10px;color:#fff;font:600 1rem/1.2 var(--body);text-decoration:underline;text-underline-offset:4px;background:rgba(0,0,0,.55)}
.vmodal.fail .vm-fall{display:grid}

/* WordPress theme additions */
.note,.seo,.dock{display:none!important}
.ftr-social a{color:inherit}
.ftr-social a:hover{color:var(--accent)}
.hp-field{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.p404{min-height:70vh;display:grid;place-items:center;text-align:center;padding:160px 20px 80px}
.p404 h1{font-size:clamp(2.2rem,calc(6 * var(--vw,1vw)),5rem)}
.p404 p{color:var(--fg-2);margin:16px auto 28px;max-width:40ch}