/* Vorhang · finales Konzept, ohne Menü. Naht als Grundlage: Die Wortmarke ist ein Blatt, das an der Naht zwischen True und bound reißt.
   Hinter dem Riss liegt der Kopf von Wand: die schräge Wand aus Plakaten und Fotos (sechs Spalten zu vier Kacheln), sie fährt von selbst
   von rechts nach links, unabhängig vom Scrollen. Mittig im Spalt blendet die Überschrift „Naht“ ein: „Werbung, die man / nicht übersieht.“,
   die zweite Zeile kursiv mit Linie, darunter „Projekt anfragen“ und „Arbeiten ansehen“; 6 % der Bildschirmhöhe tiefer und 5 % größer als die Grundstellung.
   Hälften, Überschrift und Linie hängen am Scrollen und laufen beim Hochscrollen genau zurück. Oben die Leiste von Naht, links nur das Zeichen T|b;
   die ausgeschriebene Wortmarke steht groß auf dem Blatt und unten im Footer.
   Fest: Kalk & Tinte (Kalk trägt), Hellton Kalk, Farben nicht getauscht, Kante Nr. 12, Besley halbfett, Akzent Signalrot, Zeichen gezeichnet, Tiefe an.
   Abschnitte wechseln zwischen dunkler (--Dk) und heller Fläche (--P). */
:root{
  --f-d:Besley,"Iowan Old Style",Georgia,serif;
  --f-t:"Schibsted Grotesk","Helvetica Neue",Arial,sans-serif;
  --f-m:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --wt:600;
  --R:#ECE9E2;--L:#17191E;--P:#ECE9E2;--D:#17191E;--txR:#17191E;--txL:#ECE9E2;--mR:#676767;--mL:#8C8B8A;--lnR:#ACABA7;--lnL:#5B5C5D;
  --R2:#E1DFD8;--L2:#26282C;--R3:#DFDCD6;--L3:#0F1114;--rim:#D4D2CB;
  --Dk:#17191E;--Dk2:#26282C;--txDk:#ECE9E2;--mDk:#8C8B8A;--lnDk:#5B5C5D;--mP:#676767;--lnP:#ACABA7;
  --gut:clamp(16px,4.4vw,64px);--max:1400px;--sec:clamp(84px,10vw,160px);--cg:clamp(24px,3.6vw,60px);
  color-scheme:light;
}
html{background:var(--Dk)}
body{background:var(--Dk);color:var(--txDk);font:400 17px/1.55 var(--f-t)}
.wrap{max-width:var(--max);margin:0 auto;padding-left:max(var(--gut),env(safe-area-inset-left,0px));padding-right:max(var(--gut),env(safe-area-inset-right,0px))}
.ink,.ink2{--fg:var(--txDk);--mu:var(--mDk);--ln:var(--lnDk);--bgc:var(--Dk);background:var(--Dk);color:var(--txDk)}
.ink2{--bgc:var(--Dk2);background:var(--Dk2)}
.pap{--fg:var(--D);--mu:var(--mP);--ln:var(--lnP);--bgc:var(--P);background:var(--P);color:var(--D)}
a{color:inherit}
.label{display:block;margin:0;font:500 12.5px/1.25 var(--f-m);letter-spacing:.12em;text-transform:uppercase;color:var(--fg)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:15px 26px;border:0;background:var(--fg);color:var(--bgc);text-decoration:none;font:600 16.5px/1.1 var(--f-t);cursor:pointer;transition:background-color .2s,color .2s,transform .25s cubic-bezier(.2,.7,.2,1)}
.btn:hover{transform:rotate(-1.5deg) scale(1.03)}
.btn .ar{display:inline-block;transition:transform .2s}
.btn:hover .ar{transform:translateX(4px)}
.link{color:var(--fg);font-weight:500;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}
.sec{position:relative;padding-block:var(--sec)}
.sec-head{display:grid;gap:18px;justify-items:start;margin-bottom:clamp(44px,5.4vw,84px)}
.h2{margin:0;font:var(--wt) clamp(36px,5.2vw,82px)/1 var(--f-d);letter-spacing:-.024em;max-width:17ch;text-wrap:balance}
.h2 em{font-style:italic;font-weight:calc(var(--wt) - 100)}
.intro{margin:0;max-width:46ch;font-size:clamp(18px,1.45vw,20px);line-height:1.5}

/* ---------- Kopf: die Wortmarke reißt auf ---------- */
.intro-w{position:relative;background:var(--R)}
html.pin .intro-w{height:calc(100svh + 90svh)}
.stage{--barh:78px;--wl:max(var(--gut),calc(6vw + 64px));position:relative;height:100svh;min-height:600px;overflow:hidden;isolation:isolate;background:var(--R)}
html.pin .stage{position:sticky;top:0}
.nw{white-space:nowrap}
:lang(en) .mani-t .nw{white-space:normal}.mani-t .acc-ring{white-space:nowrap}
/* ---------- Hinter dem Riss: der Kopf von Wand ---------- */
.wall{position:absolute;inset:0;z-index:0;overflow:hidden;background:var(--L);color:var(--txL);perspective:1100px;perspective-origin:50% -12%;isolation:isolate}
.plane{position:absolute;left:50%;top:-6%;width:min(250vw,3400px);transform:translateX(-50%) rotateX(56deg) rotateZ(calc(-13deg + var(--mz,0deg))) translate3d(var(--mx,0px),0,0);transform-origin:50% 22%;will-change:transform}
/* sechs Spalten zu vier Kacheln, zweimal hintereinander; die Fahrt geht nach links und schließt nahtlos an */
.plane{--tg:clamp(18px,1.9vw,34px);--tw:calc((min(250vw,3400px) - 6 * var(--tg)) / 7)}
.track{display:grid;grid-auto-flow:column;grid-template-rows:repeat(4,auto);grid-auto-columns:var(--tw);gap:var(--tg);width:max-content;padding:var(--tg) var(--tg) var(--tg) 0;animation:driftx 96s linear infinite}
html.no-mo .track{animation:none;transform:translateX(-14%)}
@keyframes driftx{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.tl{position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--L2)}
.tl img{width:100%;height:100%;object-fit:cover}
.tl>div,.tl svg{width:100%;height:100%}
.tl .tg{position:absolute;left:8px;top:8px;padding:3px 6px 2px;background:var(--R);color:var(--txR);font:500 10px/1.2 var(--f-m);letter-spacing:.12em;text-transform:uppercase}
.tl.tx{display:flex;align-items:flex-end;padding:16px;background:var(--R);color:var(--txR);font:var(--wt) clamp(26px,2.2vw,40px)/1 var(--f-d);letter-spacing:-.02em}
.tl.mk{display:flex;align-items:center;justify-content:center;background:var(--A,var(--R));color:var(--onA,var(--txR));font-size:clamp(54px,5vw,90px);font-weight:var(--wt)}
html:not(.tb-acc) .tl.mk{background:var(--R);color:var(--txR)}
.tb-deep .tl{box-shadow:0 30px 40px -16px rgba(0,0,0,.6)}
.fog{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,var(--L) 0%,color-mix(in srgb,var(--L) 70%,transparent) 14%,transparent 36%,transparent 58%,color-mix(in srgb,var(--L) 82%,transparent) 100%)}
.claim{margin:0;display:grid;justify-items:start;gap:clamp(6px,.8vw,12px);font:var(--wt) calc(clamp(44px,7.2vw,124px) * var(--cs,1))/.98 var(--f-d);letter-spacing:-.03em}

/* Überschrift „Naht“: mittig im Spalt, zweite Zeile kursiv mit Linie; Farbe der Wand, damit sie lesbar bleibt.
   Lage und Größe wie im Menü eingestellt: 6 % der Bildschirmhöhe tiefer (--cy), 5 % größer (--cs). */
:root{--cy:6svh;--cs:1.05}
.gap-c{position:absolute;z-index:3;left:0;right:0;top:50%;text-align:center;color:var(--txL);opacity:var(--go,0);transform:translate3d(0,calc(-50% + var(--cy)),0)}
.gap-c .claim{display:block;justify-items:center;margin:0 auto;font:var(--wt) calc(clamp(40px,6.4vw,112px) * var(--cs,1))/.98 var(--f-d);letter-spacing:-.03em;text-wrap:balance;text-shadow:0 0 4px var(--L),0 0 26px var(--L),0 0 60px var(--L)}
/* zwei feste Zeilen wie bei Naht */
.gap-c .claim>span{display:block;white-space:nowrap}
/* weicher Hof in der Farbe der Wand hinter Satz und Knöpfen, damit sie auch über Fotos lesbar bleiben */
.gap-c::before{content:"";position:absolute;z-index:-1;left:50%;top:50%;width:min(1180px,100%);height:calc(100% + 28vh);transform:translate(-50%,-50%);background:radial-gradient(closest-side,var(--L),transparent);opacity:.8;pointer-events:none}
.gap-c .claim em{font-style:italic;font-weight:calc(var(--wt) - 100)}
.gap-c .claim .acc-under>.acc-mark{--mw:clamp(4px,.5vw,7px);bottom:-.2em;height:.3em}
.gap-c .ctas{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:14px 26px;margin-top:clamp(26px,3.4vw,44px)}
.gap-c .ctas .btn{--fg:var(--txL);--bgc:var(--L)}
.gap-c .ctas .link{--fg:var(--txL);text-shadow:0 0 3px var(--L),0 0 12px var(--L),0 0 26px var(--L)}
/* die Linie unter „nicht übersieht“ zeichnet sich mit dem Scrollen und verschwindet rückwärts wieder */
.stage .gap-c .acc-mark.tb-on path{transition:none;stroke-dashoffset:var(--rd,0)}
/* zwei Hälften eines Blatts */
.half{position:absolute;inset:0;z-index:2;pointer-events:none;will-change:transform}
.half .pw{position:absolute;inset:0}
.tb-deep .half.l .pw{filter:drop-shadow(8px 0 14px rgba(0,0,0,.5))}
.tb-deep .half.r .pw{filter:drop-shadow(-8px 0 14px rgba(0,0,0,.5))}
.half .rim,.half .pn{position:absolute;inset:0}
.half.l .pn{background:var(--L);color:var(--txL)}
.half.r .pn{background:var(--R);color:var(--txR)}
.half.l .rim{background:var(--rimL,#E9C49D)}
.half.r .rim{background:var(--rimR,#3E4046)}
.wm{position:absolute;left:0;top:var(--wmy,40%);width:100%;margin:0;text-align:center;white-space:nowrap;font:var(--wt) var(--wms,20vw)/.82 var(--f-d);letter-spacing:-.035em}
.wm span{display:inline-block}
.sub{position:absolute;top:calc(var(--wmy,40%) + var(--wmh,18vw) + 18px);font:500 12.5px/1.4 var(--f-m);letter-spacing:.12em;text-transform:uppercase}
.sub.a{left:max(var(--gut),env(safe-area-inset-left,0px))}
.bar{position:absolute;z-index:5;left:0;right:0;top:0;display:flex;align-items:center;gap:12px clamp(16px,2.2vw,32px);padding-top:max(22px,env(safe-area-inset-top,0px));mix-blend-mode:normal}
/* oben links nur das Zeichen T|b: die Wortmarke steht groß auf dem Blatt und unten im Footer */
.brand{margin-right:auto;display:inline-flex;font-size:clamp(28px,2.4vw,34px);font-weight:var(--wt);text-decoration:none;color:var(--txL)}
.nav ul{display:flex;gap:clamp(16px,1.8vw,28px);margin:0;padding:0;list-style:none}
.nav a{font:500 15px/1 var(--f-t);text-decoration:none;padding:8px 0;border-bottom:1px solid transparent;color:var(--txR)}
.nav a:hover{border-bottom-color:currentColor}
.bar .tb-lang{font:500 13px/1 var(--f-m);color:var(--txR)}
.bar .btn{min-height:42px;padding:10px 16px;font-size:14.5px;--fg:var(--txR);--bgc:var(--R)}
.menu-b{display:none;background:var(--txR);border:0;color:var(--R);padding:10px 14px;min-height:42px;font:600 14px/1 var(--f-t);cursor:pointer}
.mnav{position:absolute;z-index:8;top:calc(max(22px,env(safe-area-inset-top,0px)) + 54px);right:max(var(--gut),env(safe-area-inset-right,0px));min-width:230px;background:var(--R);color:var(--txR);border:1px solid var(--lnR);padding:8px 0}
.mnav a{display:block;padding:12px 18px;font:500 17px/1.2 var(--f-t);text-decoration:none}
.nav a,.bar .tb-lang,.menu-b{transition:color .25s,background-color .25s}
.nav a.on-l,.bar .tb-lang.on-l{color:var(--txL)}
.bar .btn.on-l{--fg:var(--txL);--bgc:var(--L)}
.menu-b.on-l{background:var(--txL);color:var(--L)}
.cue{position:absolute;z-index:4;left:50%;bottom:16px;transform:translateX(-50%);display:inline-flex;flex-direction:column;align-items:center;gap:8px;background:none;border:0;color:var(--txR);font:500 11px/1.2 var(--f-m);letter-spacing:.12em;text-transform:uppercase;cursor:pointer;opacity:var(--co,1)}
.cue i{display:block;width:1px;height:26px;background:currentColor;transform-origin:top;animation:cue 2.2s cubic-bezier(.6,0,.3,1) infinite}
@keyframes cue{0%{transform:scaleY(0)}45%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}

/* ---------- Haltung mit Markierungen ---------- */
.mani-t{margin:20px 0 0;font:var(--wt) clamp(34px,5.4vw,90px)/1.04 var(--f-d);letter-spacing:-.026em;max-width:18ch;text-wrap:balance}
.mani-t .acc-under>.acc-mark{--mw:clamp(3.5px,.42vw,6px)}
.mani-t .acc-ring>.acc-mark{--mw:clamp(3.5px,.42vw,6px)}
.mani-p{margin:clamp(30px,3.6vw,52px) 0 0;max-width:52ch;font-size:clamp(18px,1.45vw,21px);line-height:1.55}

/* ---------- Leistungen: Karten, die sich übereinanderlegen ---------- */
.stack{display:grid;gap:clamp(20px,3vw,40px)}
.card{position:sticky;top:calc(86px + var(--i) * 18px);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);min-height:min(76svh,620px);overflow:hidden;transform-origin:50% 0;will-change:transform}
.tb-deep .card{box-shadow:0 -14px 40px -12px rgba(0,0,0,.55)}
.card .cimg{position:relative;overflow:hidden}
.card .cimg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.card .ctx{display:flex;flex-direction:column;justify-content:space-between;gap:24px;padding:clamp(24px,3.4vw,52px)}
.card .cn{font:var(--wt) clamp(64px,8vw,132px)/.85 var(--f-d);letter-spacing:-.04em}
.card h3{margin:0;font:var(--wt) clamp(32px,3.8vw,62px)/1 var(--f-d);letter-spacing:-.022em}
.card p{margin:14px 0 0;max-width:40ch;font-size:clamp(17px,1.35vw,19px);line-height:1.55}
.card .tags{margin:18px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.card .tags li{padding:6px 9px 5px;background:color-mix(in srgb,var(--fg) 12%,transparent);font:500 12px/1.2 var(--f-m);letter-spacing:.08em;text-transform:uppercase}

/* ---------- Werbefilm: randlos, ohne Papier darüber und darunter ----------
   Die gerissene Unterkante der Leistungen und die gerissene Oberkante von „Vom Gespräch zur Kampagne.“ (je 22·G tief, G = Breite/420 zwischen 1,4 und 3,2)
   schneiden direkt in den Film, sodass er selbst abgerissen aussieht. */
.sec.film{padding:0;background:#000}
.film-w{position:relative}
.film-d{position:relative}
.film-sh{position:absolute;inset:0;pointer-events:none;opacity:.22}
.tb-deep .film-sh{box-shadow:0 44px 70px -30px rgba(0,0,0,.66),0 14px 26px -12px rgba(0,0,0,.42)}
.film-f{position:relative;aspect-ratio:16/8.7;overflow:hidden;background:var(--Dk);color:var(--txDk)}
.film-f.js{cursor:pointer}
.film-v{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;background:var(--Dk)}
/* großes Zeichen „Abspielen“, nur wenn der Film angehalten ist und nicht von selbst weiterläuft */
.film-play{position:absolute;left:50%;top:50%;z-index:1;display:grid;place-items:center;width:clamp(56px,6.4vw,104px);aspect-ratio:1;background:var(--A,#FF3214);color:var(--onA,#17191E);transform:translate(-50%,-50%);opacity:0;pointer-events:none;transition:opacity .3s}
.film-f.js.is-stopped .film-play{opacity:1}
.film-play svg{width:42%;height:42%;fill:currentColor;margin-left:6%}
/* Knopf Anhalten/Abspielen unten rechts im Film */
.film-b{position:absolute;z-index:2;right:max(clamp(10px,1.4vw,22px),env(safe-area-inset-right,0px));bottom:clamp(12px,1.5vw,24px);display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid rgba(236,233,226,.55);background:rgba(23,25,30,.58);color:#ECE9E2;cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:background-color .2s,border-color .2s}
.film-b[hidden]{display:none}
.film-b:hover{background:rgba(23,25,30,.84);border-color:#ECE9E2}
.film-b:focus-visible{outline:2px solid #ECE9E2;outline-offset:3px;box-shadow:0 0 0 6px rgba(23,25,30,.72)}
.film-b svg{display:block;width:18px;height:18px;fill:currentColor}
.film-b .i-play,.film-f.is-paused .film-b .i-pause{display:none}
.film-f.is-paused .film-b .i-play{display:block}
/* Solange es keinen Film gibt: schwarz mit Abspielknopf */
.film-off{background:#000}
.film-off .film-play{opacity:1}
@media (prefers-reduced-motion:reduce){.film-play{transition:none}}

/* ---------- Ablauf, Über uns, Fragen, Kontakt ---------- */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:30px var(--cg)}
.step{border-top:1.5px solid var(--fg);padding-top:18px}
.num{display:block;font:var(--wt) clamp(54px,6vw,96px)/.9 var(--f-d);letter-spacing:-.03em;font-variant-numeric:lining-nums tabular-nums}
.step h3{margin:18px 0 0;font:var(--wt) clamp(23px,2.1vw,30px)/1.1 var(--f-d)}
.step p{margin:10px 0 0;font-size:17px;line-height:1.55}
.about{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:40px var(--cg);align-items:end}
.about-big{margin:18px 0 0;font:var(--wt) clamp(40px,5.8vw,94px)/1 var(--f-d);letter-spacing:-.026em}
.about-big em{font-style:italic;font-weight:calc(var(--wt) - 100)}
.about-r p{margin:0;font-size:clamp(18px,1.4vw,20px);line-height:1.55;max-width:42ch}
.who-b{margin-top:clamp(36px,4vw,56px);padding-top:18px;border-top:1px solid var(--ln)}
.who{margin:12px 0 0;font-family:var(--f-d);font-weight:calc(var(--wt) - 100);font-size:clamp(24px,2.5vw,36px);line-height:1.22;text-wrap:balance}
.who i{font-style:normal;color:var(--mu);font-weight:400}
.faqs{background:var(--Dk2)}
.faq{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:20px var(--cg);align-items:start}
.faq .sec-head{margin-bottom:0}
.faq-l{border-bottom:1px solid var(--lnDk)}
.faq-l details{border-top:1px solid var(--lnDk)}
.faq-l summary{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 0;cursor:pointer;list-style:none;font:var(--wt) clamp(20px,1.8vw,26px)/1.2 var(--f-d)}
.faq-l summary::-webkit-details-marker{display:none}
.faq-l summary i{position:relative;flex:none;width:22px;height:22px}
.faq-l summary i::before,.faq-l summary i::after{content:"";position:absolute;left:50%;top:50%;width:16px;height:1.5px;background:currentColor;transform:translate(-50%,-50%)}
.faq-l summary i::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform .25s}
.faq-l details[open] summary i::after{transform:translate(-50%,-50%) rotate(0deg)}
.faq-l details p{margin:0 0 24px;max-width:56ch;font-size:17.5px;line-height:1.55}
.h2.xl{font-size:clamp(42px,6.6vw,110px);line-height:.96;max-width:13ch}
.k-head .acc-mark.k-ar{width:clamp(78px,8vw,120px);height:clamp(46px,4.8vw,72px);--mw:clamp(3px,.32vw,4.5px)}
.contact{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:44px var(--cg)}
/* Kontakt: Überschrift links, Formular rechts, darunter die Adresse */
.contact .k-head{margin-bottom:0}
.mail-alt{margin:22px 0 0;font-size:16.5px;color:var(--mu)}
.mail-alt a{display:block;width:max-content;max-width:100%;margin-top:6px;color:var(--A,var(--D));font:var(--wt) 24px/1.25 var(--f-d);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;overflow-wrap:anywhere}
.form{display:grid;gap:22px;align-content:start}
.field{display:grid;gap:8px}
.field label{font:500 12.5px/1.2 var(--f-m);letter-spacing:.1em;text-transform:uppercase}
.field input,.field textarea{width:100%;font:400 18px/1.4 var(--f-t);color:var(--fg);background:transparent;border:0;border-bottom:1.5px solid var(--fg);border-radius:0;padding:8px 0 9px}
.field textarea{min-height:120px;resize:vertical}
.field input:focus-visible,.field textarea:focus-visible{outline:none;border-bottom-width:3px;padding-bottom:7.5px}
.check{display:flex;gap:12px;align-items:flex-start;font-size:16px;line-height:1.45}
.check input{flex:none;width:20px;height:20px;margin:2px 0 0;accent-color:var(--fg)}
.form .btn{justify-self:start}
.tb-msg{font-size:16px}
.foot{padding-block:clamp(72px,9vw,140px) max(28px,env(safe-area-inset-bottom,0px))}
.foot .wrap{container-type:inline-size}
.foot .big{display:inline-flex;font-size:clamp(56px,16.2vw,252px);font-size:min(clamp(56px,16.2vw,252px),calc(100cqi / 5.06));font-weight:var(--wt);letter-spacing:-.025em;color:var(--txDk);max-width:100%;text-decoration:none}
.foot-row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 28px;margin-top:clamp(28px,4vw,48px);padding-top:18px;border-top:1px solid var(--lnDk);font-size:14.5px;color:var(--mDk)}
.foot-row nav{display:flex;flex-wrap:wrap;gap:8px 22px}
.foot-row a{color:var(--txDk);text-decoration:none;border-bottom:1px solid transparent}
.foot-row a:hover{border-bottom-color:currentColor}
html.tb-deep .tb-tear[data-side="t"]{clip-path:inset(-80px 0 0 0)}

@media (max-width:1099px){
  .nav,.cta-top{display:none}
  .menu-b{display:inline-flex}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:899px){
  .card{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(180px,34svh) auto;min-height:0}
  .about,.faq,.contact{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:759px){
  body{font-size:16.5px}
  .stage{min-height:560px;--barh:64px;--wl:max(var(--gut),calc(3.5vw + 30px))}
  .gap-c .claim{font-size:calc(clamp(30px,8.8vw,48px) * var(--cs,1))}
  /* am Handy bricht die erste Zeile einmal um („Werbung, / die man“), auf Englisch bleibt „Advertising you“ zusammen */
  .gap-c .claim>span:first-child{white-space:normal;max-width:12ch;margin:0 auto}
  html[lang=en] .gap-c .claim>span:first-child{white-space:nowrap;max-width:none}
  .sub{font-size:11px;letter-spacing:.1em}
  .card{top:calc(74px + var(--i) * 12px)}
  .card .cn{font-size:56px}
  .steps{grid-template-columns:minmax(0,1fr)}
  .num{font-size:56px}
  .foot-row{flex-direction:column;align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){.track{animation:none}.cue i{animation:none}.btn,.btn .ar{transition:none}}
/* Laufzeile „Papierstreifen“ (Stelle 3 aus der Werkbank Laufzeilen): Ein Streifen Papier mit gerissenen Kanten liegt schräg über der
   gerissenen Kante zwischen dem dunklen Ablauf und Über uns. Eingestellt: eigene Einträge, ohne Trenner, Tempo 70 px/s bei Größe 75 %,
   von links nach rechts, läuft immer und hält nur an, solange die Maus darauf liegt; bei reduzierter Bewegung steht er still. */
.lz{position:absolute;left:0;right:0;top:0;z-index:4;height:0}
.lz-clip{position:absolute;left:0;right:0;top:calc(-110px - clamp(14px,2.2vw,32px));height:220px;overflow:hidden;display:flex;align-items:center;pointer-events:none}
.lz-vp{position:relative;flex:none;width:116%;margin-left:-8%;transform:rotate(-2.2deg);padding-block:10.5px;pointer-events:auto}
.lz-bg{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 12px 14px rgba(0,0,0,.35))}
.lz-bg path{fill:var(--P)}
.lz-tk{position:relative;overflow:hidden;padding-block:2.25px}
.lz-tr{display:flex;width:max-content;will-change:transform}
.lz-set{display:flex;align-items:center;flex:none}
.lz-it{font:var(--wt) 27px/1.36 var(--f-d);letter-spacing:-.02em;color:var(--D);white-space:nowrap}
.lz-gap{flex:none;width:35.7px}

/* Website: Sprache als Links, Formular, Reihenfolge der Karten ohne Inline-Stil (CSP) */
.tb-lang a{display:inline-flex;align-items:center;justify-content:center;padding:4px 5px;min-height:32px;min-width:32px;color:inherit;text-decoration:none;letter-spacing:.06em;opacity:.55}
.tb-lang a[aria-current="page"]{opacity:1;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.tb-lang a:hover,.tb-lang a:focus-visible{opacity:1}
.form .hp{display:none!important}
.k-priv{margin:-6px 0 0;font-size:15px;line-height:1.45;color:var(--mu)}
.k-priv a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.form[aria-busy="true"] .btn{opacity:.6;cursor:progress}
.ci0{--i:0}.ci1{--i:1}.ci2{--i:2}.ci3{--i:3}