/* ==========================================================================
PACfilms — Cream Editorial
#0a3c4d Petrol (Headlines) · #99d6d4 Signal · #f1eeeb Papier · #d1c9c1 Sand
Hatton (Display) · Muli (UI) · Paulina (Akzent)
========================================================================== */
/* ------------------------------- 1. Fonts -------------------------------- */
@font-face{font-family:"Hatton";src:url("../fonts/PPHatton-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Hatton";src:url("../fonts/PPHatton-RegularItalic.ttf") format("truetype");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Hatton";src:url("../fonts/PPHatton-Bold.ttf") format("truetype");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Hatton";src:url("../fonts/PPHatton-BoldItalic.ttf") format("truetype");font-weight:700;font-style:italic;font-display:swap}
@font-face{font-family:"Muli";src:url("../fonts/Muli-Light.ttf") format("truetype");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Muli";src:url("../fonts/Muli.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Muli";src:url("../fonts/Muli-SemiBold.ttf") format("truetype");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Muli";src:url("../fonts/Muli-Bold.ttf") format("truetype");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Paulina";src:url("../fonts/PaulinasSchrift-Regular.otf") format("opentype");font-weight:400;font-style:normal;font-display:swap}
/* ------------------------------- 2. Tokens ------------------------------- */
:root{
/* two background tones only: white is the canvas, cream the accent band.
(--paper = canvas, --sand = accent; names kept from the earlier system.) */
--paper:#FFFFFF;
--sand:#F1EEEB;
--petrol:#0A3C4D;
--petrol-deep:#062831;
--signal:#99D6D4;
--signal-deep:#6FBFBC;
/* Zwei dunklere Stufen derselben Aqua-Familie. --signal-deep erreicht auf
Weiß nur 2,1:1 und ist als Textfarbe unbrauchbar.
--signal-mid: 3,1:1, für große Display-Typo, hebt sich klar vom Petrol ab.
--signal-ink: 6,0:1, für kleine Versalien und Fließtext. */
--signal-mid:#4E9E9A;
--signal-ink:#2A6663;
--accent:#FF9900;
--ink:#16323C;
--mute:rgba(10,60,77,.66);
--mute-2:rgba(10,60,77,.44);
--line:rgba(10,60,77,.18);
--line-2:rgba(10,60,77,.09);
--gut:clamp(1.25rem,4vw,4.5rem);
--maxw:1560px;
/* Abschnittsrhythmus. Achtung: der sichtbare Abstand zwischen zwei
Abschnitten ist DOPPELT so gross — unten beim einen, oben beim naechsten.
Bei 17rem waren das 509 px auf breiten Schirmen, eine halbe Bildhoehe
Leere. 8rem ergibt rund 250 px und bleibt luftig. */
--sec:clamp(4.25rem,7.5vw,8rem);
--r:0; /* sharp edges: media is unframed */
/* --ease overshoots slightly, so it reads as weight settling rather than a
linear slide. --ease-out is the softer landing used for entrances. */
--ease:cubic-bezier(.22,1,.36,1);
--ease-out:cubic-bezier(.16,1,.3,1);
--dur:.9s;
--f-display:"Hatton",Georgia,serif;
--f-ui:"Muli",-apple-system,"Segoe UI",sans-serif;
--f-hand:"Paulina","Hatton",cursive;
}
/* ------------------------------- 3. Reset -------------------------------- */
*,*::before,*::after{box-sizing:border-box}
/* Das hidden-Attribut muss auch dann greifen, wenn ein Element eine eigene
display-Regel hat. Der Browser bringt display:none dafuer zwar mit, aber
jede Autorenregel schlaegt die Vorgabe — und .btn setzt inline-flex,
.fm__sum setzt grid. Ohne diese Zeile blieb der Knopf "Handbuch
herunterladen" nach jeder Kontaktanfrage, Buchung und Vormerkung stehen,
obwohl das Script ihn korrekt auf hidden gesetzt hatte. */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
margin:0;background:var(--paper);color:var(--ink);
font-family:var(--f-ui);font-weight:300;font-size:clamp(1rem,.95rem + .25vw,1.125rem);
line-height:1.62;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
overflow-x:clip;
}
h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--signal);color:var(--petrol)}
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:fixed;left:-9999px;top:0;z-index:999;background:var(--petrol);color:var(--paper);padding:.75rem 1.25rem}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--petrol);outline-offset:4px;border-radius:2px}
/* ---------------------------- 4. Type helpers ---------------------------- */
.eyebrow{
display:flex;align-items:center;gap:.75rem;
font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;font-weight:600;
color:var(--mute);margin-bottom:clamp(1.25rem,2.5vw,2rem);
}
.eyebrow img{width:1.5rem;height:1.5rem;object-fit:contain;flex:none}
.eyebrow em{font-style:italic;text-transform:none;letter-spacing:.02em;font-weight:400}
.sec-head{margin-bottom:clamp(3rem,7vw,6rem);max-width:min(100%,64rem)}
.sec-title{
font-family:var(--f-display);font-weight:400;color:var(--petrol);
font-size:clamp(2.1rem,5.4vw,4.8rem);line-height:1.06;letter-spacing:-.018em;
text-wrap:balance; /* no single-word orphan on the last line */
}
.sec-title em{font-style:italic}
.sec-lead{color:var(--mute);max-width:44ch;margin-top:clamp(1.25rem,2.5vw,2rem);text-wrap:pretty}
/* editorial detail: quote marks hang into the margin instead of indenting the
first line, so the text block keeps a straight left edge */
blockquote p{hanging-punctuation:first}
/* centred display heading with the section label set inline on the first line,
the way the VOIR reference does it — the label reads as a margin note */
.sec-head--center{max-width:none;text-align:center;margin-inline:auto}
.sec-head--center .sec-title{
font-size:clamp(2rem,5.6vw,5.2rem);line-height:1.08;
text-transform:uppercase;letter-spacing:-.01em;max-width:22ch;margin-inline:auto;
}
.sec-head--center .sec-lead{margin-inline:auto;text-align:center}
.mark-label{
display:inline-flex;align-items:center;gap:.6rem;vertical-align:.42em;
margin-right:1.1rem;
font-family:var(--f-ui);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
font-weight:600;color:var(--mute-2);
}
.mark-label::before{content:"";width:.55rem;height:.55rem;background:var(--accent);flex:none}
@media (max-width:700px){
.mark-label{display:flex;justify-content:center;margin:0 0 1.25rem;vertical-align:baseline}
}
/* year split around a mark, after the Genevieve reference */
.crest{display:flex;flex-direction:column;align-items:center;gap:.9rem;margin-bottom:clamp(2rem,4vw,3rem)}
.crest__row{display:flex;align-items:center;gap:clamp(1rem,2.5vw,2rem)}
.crest__row img{width:clamp(46px,5vw,74px);height:auto}
.crest__yr{
font-family:var(--f-ui);font-weight:600;color:var(--petrol);
font-size:clamp(.95rem,1.6vw,1.3rem);letter-spacing:.34em;
}
.crest__cap{
font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--mute-2);font-weight:600;
}
.crest__cap em{font-family:var(--f-hand);font-size:5em;letter-spacing:0;text-transform:none;color:var(--accent);vertical-align:-.42em;margin-inline:.2em;line-height:0}
/* ------------------------------ 5. Buttons ------------------------------- */
.btn{
position:relative;display:inline-flex;align-items:center;gap:.85rem;
padding:1.05rem 1.9rem;border-radius:100px;overflow:hidden;isolation:isolate;
background:var(--petrol);color:var(--paper);
font-weight:600;font-size:.84rem;letter-spacing:.06em;text-transform:uppercase;
transition:color .45s var(--ease);
}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--signal);transform:translateY(101%);transition:transform .55s var(--ease)}
.btn:hover{color:var(--petrol)}
.btn:hover::before{transform:translateY(0)}
/* the arrow grows by transform, not width: the shaft scales, the head slides.
Splitting them keeps the head square instead of stretching with the shaft. */
.btn i{position:relative;width:1.8rem;height:7px;flex:none}
.btn i::before{
content:"";position:absolute;left:0;top:3px;width:100%;height:1px;background:currentColor;
transform:scaleX(.6);transform-origin:left;transition:transform .45s var(--ease);
}
.btn i::after{
content:"";position:absolute;left:.65rem;top:0;width:7px;height:7px;
border-top:1px solid currentColor;border-right:1px solid currentColor;
transform:rotate(45deg);transition:transform .45s var(--ease);
}
.btn:hover i::before{transform:scaleX(1)}
.btn:hover i::after{transform:translateX(.7rem) rotate(45deg)}
.btn--sm{padding:.7rem 1.3rem;font-size:.72rem}
.btn--big{padding:1.25rem 2.3rem;font-size:.92rem}
.btn--line{background:transparent;color:var(--petrol);box-shadow:inset 0 0 0 1px var(--line)}
.btn--line:hover{color:var(--petrol)}
.btn--signal{background:var(--signal);color:var(--petrol)}
.btn--signal::before{background:var(--petrol)}
.btn--signal:hover{color:var(--paper)}
.ghost{
display:inline-flex;align-items:center;gap:.7rem;position:relative;
font-weight:600;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;
padding-bottom:.4rem;color:var(--petrol);
}
.ghost::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--line);transform-origin:right;transition:transform .5s var(--ease)}
.ghost::before{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--petrol);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease) .05s}
.ghost:hover::after{transform:scaleX(0)}
.ghost:hover::before{transform:scaleX(1)}
/* ----------------------------- 6. Preloader ------------------------------ */
.loader{
position:fixed;inset:0;z-index:200;background:var(--paper);
display:grid;place-items:center;
transition:opacity .7s var(--ease),visibility .7s;
animation:loaderBail 0s linear 6.2s forwards;
}
@keyframes loaderBail{to{opacity:0;visibility:hidden;pointer-events:none}}
.loader__inner{display:flex;flex-direction:column;align-items:center;gap:1.25rem}
.loader__inner img{width:clamp(44px,6vw,70px);height:auto;opacity:0;animation:lIn .7s var(--ease) .05s forwards}
.loader__word{
font-family:var(--f-display);font-weight:400;color:var(--petrol);
font-size:clamp(1.6rem,5vw,3.2rem);letter-spacing:-.02em;
opacity:0;animation:lIn .8s var(--ease) .18s forwards;
}
.loader__word em{font-style:italic;color:var(--signal-deep)}
.loader__bar{position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--line-2)}
.loader__bar i{display:block;height:100%;width:0;background:var(--signal-deep)}
@keyframes lIn{to{opacity:1}}
html.is-ready .loader{opacity:0;visibility:hidden;animation:none}
html.is-loading body{overflow:hidden}
/* ------------------------- 8. Grain + Progress --------------------------- */
.grain{
position:fixed;inset:-150%;z-index:100;pointer-events:none;opacity:.035;
background-image:url("data:image/svg+xml;utf8,");
animation:grain 8s steps(10) infinite;
}
@keyframes grain{
0%,100%{transform:translate(0,0)}10%{transform:translate(-2%,-3%)}20%{transform:translate(-4%,2%)}
30%{transform:translate(2%,-4%)}40%{transform:translate(-1%,3%)}50%{transform:translate(-3%,1%)}
60%{transform:translate(3%,0)}70%{transform:translate(0,3%)}80%{transform:translate(-3%,-1%)}90%{transform:translate(2%,2%)}
}
.progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:99;pointer-events:none}
.progress i{display:block;height:100%;width:0;background:var(--signal-deep)}
/* ------------------------------- 9. Nav ---------------------------------- */
/* viewport-fit=cover zieht die Seite bis unter Notch und Home-Indicator.
Ohne env() rutschen Marke und Schaltflaeche im Querformat darunter.
max() sorgt dafuer, dass sich auf Geraeten ohne Aussparung nichts
aendert: dort ist env() null und der bisherige Wert gewinnt. */
/* z-index über dem Menü (92): der Burger wird beim Öffnen optisch zum X, war
aber nicht antippbar. Sein eigenes z-index:95 wirkte nur innerhalb der
Navigation und kam über deren Stapelkontext nicht hinaus — an seiner Stelle
lag das Overlay. Auf Mobil zeigt die Navigation ohnehin nur Marke und
Burger; die Links und der Knopf erscheinen erst ab 1000 px, wo es kein Menü
gibt. */
.nav{
position:fixed;top:0;left:0;right:0;z-index:96;
display:flex;align-items:center;justify-content:space-between;gap:2rem;
padding:clamp(1rem,2vw,1.5rem) max(var(--gut),env(safe-area-inset-right))
clamp(1rem,2vw,1.5rem) max(var(--gut),env(safe-area-inset-left));
transition:transform .6s var(--ease),background .5s,backdrop-filter .5s,border-color .5s;
border-bottom:1px solid transparent;
}
.nav.is-stuck{background:rgba(241,238,235,.82);backdrop-filter:blur(14px);border-bottom-color:var(--line-2)}
.nav.is-hidden{transform:translateY(-110%)}
/* while sitting on the dark banner the nav has to invert; once it detaches and
gets its cream backdrop it returns to petrol */
.has-dark-hero .nav:not(.is-stuck) .nav__brand,
.has-dark-hero .nav:not(.is-stuck) .nav__links a{color:var(--paper)}
.has-dark-hero .nav:not(.is-stuck) .nav__brand img{filter:brightness(0) invert(1)}
.has-dark-hero .nav:not(.is-stuck) .nav__brand em{color:var(--signal)}
.has-dark-hero .nav:not(.is-stuck) .nav__links a::after{background:var(--signal)}
.has-dark-hero .nav:not(.is-stuck) .burger i{background:var(--paper)}
.has-dark-hero .nav:not(.is-stuck) .btn{background:var(--signal);color:var(--petrol)}
.has-dark-hero .nav:not(.is-stuck) .btn::before{background:var(--paper)}
/* mark only — no wordmark */
.nav__brand{display:flex;align-items:center}
.nav__brand img{width:clamp(52px,4.6vw,72px);height:auto;transition:opacity .35s}
.nav__brand:hover img{opacity:.7}
.nav__links{display:none;gap:2.2rem}
.nav__links a{position:relative;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;font-weight:600;color:var(--petrol)}
/* scaleX, not width: width animation forces layout on every frame */
.nav__links a::after{
content:"";position:absolute;left:0;bottom:-.4rem;height:1px;width:100%;
background:var(--petrol);transform:scaleX(0);transform-origin:left;
transition:transform .4s var(--ease);
}
.nav__links a:hover::after{transform:scaleX(1)}
.nav__cta{display:none}
@media (min-width:1000px){
.nav__links{display:flex}
.nav__cta{display:inline-flex}
.burger{display:none}
}
.burger{width:34px;height:22px;position:relative;z-index:95;flex:none}
.burger i{position:absolute;left:0;width:100%;height:1.5px;background:var(--petrol);transition:transform .5s var(--ease)}
.burger i:nth-child(1){top:4px}
.burger i:nth-child(2){bottom:4px}
html.menu-open .burger i:nth-child(1){transform:translateY(7px) rotate(45deg)}
html.menu-open .burger i:nth-child(2){transform:translateY(-7px) rotate(-45deg)}
/* Über dem dunklen Kopfbild stehen Marke und Burger in Weiß. Sobald die
Navigation über dem sandfarbenen Menü liegt, wäre das X unsichtbar —
deshalb im offenen Zustand zurück auf Petrol. Die Auswahl muss dabei
spezifischer sein als die Regel für das dunkle Kopfbild. */
html.menu-open .nav:not(.is-stuck) .burger i{background:var(--petrol)}
html.menu-open .nav:not(.is-stuck) .nav__brand img{filter:none}
.menu{
position:fixed;inset:0;z-index:92;background:var(--sand);
display:flex;flex-direction:column;justify-content:center;gap:3rem;
/* Das Menue fuellt inset:0, also auch die Systembereiche. Unten kommt
der Home-Indicator dazu, links und rechts im Querformat die Notch. */
padding:6rem max(var(--gut),env(safe-area-inset-right))
max(3rem,env(safe-area-inset-bottom)) max(var(--gut),env(safe-area-inset-left));
clip-path:inset(0 0 100% 0);transition:clip-path .8s var(--ease);
}
html.menu-open .menu{clip-path:inset(0 0 0 0)}
.menu__list{display:flex;flex-direction:column;gap:.35rem}
.menu__list a{
font-family:var(--f-display);font-weight:400;color:var(--petrol);
font-size:clamp(2rem,10vw,3.5rem);line-height:1.15;
display:flex;align-items:baseline;gap:1rem;
opacity:0;transform:translateY(28px);transition:opacity .6s var(--ease),transform .6s var(--ease);
}
.menu__list a span{font-family:var(--f-ui);font-size:.7rem;letter-spacing:.2em;color:var(--signal-deep);font-weight:600}
html.menu-open .menu__list a{opacity:1;transform:none}
html.menu-open .menu__list a:nth-child(1){transition-delay:.18s}
html.menu-open .menu__list a:nth-child(2){transition-delay:.24s}
html.menu-open .menu__list a:nth-child(3){transition-delay:.30s}
html.menu-open .menu__list a:nth-child(4){transition-delay:.36s}
html.menu-open .menu__list a:nth-child(5){transition-delay:.42s}
/* Mit den Kundenprojekten hat das Menü sechs Punkte, auf den Unterseiten
sieben. Ohne diese beiden Zeilen erschienen die letzten ohne Staffel. */
html.menu-open .menu__list a:nth-child(6){transition-delay:.48s}
html.menu-open .menu__list a:nth-child(7){transition-delay:.54s}
.menu__foot{display:flex;flex-wrap:wrap;gap:1.5rem;color:var(--mute);font-size:.9rem;border-top:1px solid var(--line);padding-top:1.5rem}
/* ------------------------------- 10. Hero -------------------------------- */
/* full-bleed footage with a warm cream veil, so the petrol type sits ON the
video and the whole thing still reads bright rather than cinematic-dark */
.hero{
position:relative;min-height:100svh;overflow:clip;
display:flex;flex-direction:column;justify-content:flex-end;
padding:clamp(6.5rem,11vw,8.5rem) 0 clamp(1.5rem,3vw,2.5rem);
}
.hero__bg{position:absolute;inset:0;z-index:0;overflow:hidden;will-change:transform}
.hero__bg video{width:100%;height:100%;object-fit:cover}
/* The banner is the one deliberately dark moment on an otherwise cream site:
the footage runs at full strength and the type sits IN it. The scrim is
petrol-tinted (not neutral black) so it reads warm, and the last 12% fades
to --paper so the hero hands off to the cream page without a hard edge. */
.hero__veil{
position:absolute;inset:0;
background:
linear-gradient(to top,
rgba(6,40,49,.90) 0%,
rgba(6,40,49,.74) 30%,
rgba(6,40,49,.42) 58%,
rgba(6,40,49,.28) 78%,
rgba(6,40,49,.62) 100%),
radial-gradient(130% 85% at 20% 100%, rgba(10,60,77,.55), transparent 68%),
linear-gradient(to top, var(--paper) 0%, rgba(241,238,235,0) 12%);
}
.hero__content{position:relative;z-index:2}
.hero__cue{
position:relative;z-index:2;width:100%;max-width:var(--maxw);
margin:clamp(2rem,4vw,3.5rem) auto 0;padding-inline:var(--gut);
display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;
}
.hero__kicker{
display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;
font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;font-weight:600;
color:var(--signal);margin-bottom:clamp(1.75rem,3.5vw,3rem);
opacity:0;transform:translateY(14px);transition:opacity .8s var(--ease),transform .8s var(--ease);
}
html.is-ready .hero__kicker{opacity:1;transform:none}
.hero__kicker .dot{width:7px;height:7px;border-radius:50%;background:var(--signal);flex:none;animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.65)}}
/* the whole point: type at maximum impact.
The cap is set by the longest line ("KOMMUNIKATION") against the content
width — go wider and it clips, so don't raise these numbers without
re-measuring that word. */
.hero__title{
font-family:var(--f-display);font-weight:400;color:var(--paper);
font-size:clamp(1.9rem,8.6vw,8.4rem);line-height:1.02;letter-spacing:-.015em;
}
/* the elegance comes from italic/caps contrast, not from weight or colour */
.hero__title em{font-style:italic;letter-spacing:-.005em}
/* one word gets a hand-drawn stroke, drawn on after the lines have landed */
.pen{position:relative;display:inline-block}
.pen::after{
content:"";position:absolute;left:-.04em;right:-.04em;bottom:-.12em;height:.3em;
background:no-repeat center/100% 100% url("data:image/svg+xml;utf8,");
clip-path:inset(0 100% 0 0);
transition:clip-path 1s var(--ease-out) 1.05s;
}
html.is-ready .pen::after{clip-path:inset(0 0 0 0)}
/* petrol stroke for use on cream backgrounds */
.pen--dark::after{
background-image:url("data:image/svg+xml;utf8,");
}
/* Hatton's ascenders and descenders sit outside a tight line box, so the
reveal mask needs slack on BOTH sides or it shears the glyphs. */
.mask{display:block;overflow:hidden;padding:.16em 0 .22em;margin:-.16em 0 -.22em}
.mask>span{display:block;transform:translateY(130%);transition:transform 1.15s var(--ease)}
html.is-ready .mask>span{transform:none}
html.is-ready .hero__title .mask:nth-child(1)>span{transition-delay:.08s}
html.is-ready .hero__title .mask:nth-child(2)>span{transition-delay:.16s}
html.is-ready .hero__title .mask:nth-child(3)>span{transition-delay:.24s}
html.is-ready .hero__title .mask:nth-child(4)>span{transition-delay:.32s}
.hero__foot{
display:grid;gap:clamp(1.75rem,3vw,3rem);
margin-top:clamp(2rem,4vw,3.5rem);padding-top:clamp(1.75rem,3vw,2.5rem);
border-top:1px solid rgba(241,238,235,.22);
}
.hero__foot p{color:rgba(241,238,235,.78);max-width:46ch}
.hero__actions{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(1rem,2.5vw,2.25rem)}
@media (min-width:900px){.hero__foot{grid-template-columns:1fr auto;align-items:center}}
/* light-on-dark variants of the controls, banner only */
.hero .btn{background:var(--signal);color:var(--petrol)}
.hero .btn::before{background:var(--paper)}
.hero .btn:hover{color:var(--petrol)}
.hero .ghost{color:var(--paper)}
.hero .ghost::after{background:rgba(241,238,235,.35)}
.hero .ghost::before{background:var(--signal)}
.hero .reel__tag{background:rgba(6,40,49,.5);border-color:rgba(241,238,235,.28);color:var(--paper);backdrop-filter:blur(10px)}
[data-fade]{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
html.is-ready [data-fade]{opacity:1;transform:none;transition-delay:.5s}
.reel__tag{
display:inline-flex;align-items:center;gap:.55rem;
font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600;
padding:.55rem 1rem;border-radius:100px;background:rgba(241,238,235,.85);
backdrop-filter:blur(8px);color:var(--petrol);border:1px solid var(--line-2);
}
.reel__tag i{width:7px;height:7px;border-radius:50%;background:#E2574C;animation:pulse 2s ease-in-out infinite}
/* ------------------------------- 11. Trust ------------------------------- */
.trust{padding:clamp(3.5rem,7vw,6rem) 0;overflow:hidden}
.trust__label{
text-align:center;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
font-weight:600;color:var(--mute-2);margin-bottom:clamp(2rem,4vw,3rem);
}
.marquee{overflow:hidden}
.marquee__row{display:flex;align-items:center;gap:clamp(2.5rem,6vw,6rem);width:max-content;animation:mq 48s linear infinite}
.marquee__row img{
height:clamp(56px,6.8vw,92px);width:auto;max-width:clamp(240px,30vw,420px);
object-fit:contain;flex:none;
filter:grayscale(1) opacity(.5);transition:filter .45s var(--ease),transform .45s var(--ease);
}
.marquee__row img:hover{filter:none;transform:scale(1.06)}
@keyframes mq{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.marquee:hover .marquee__row{animation-play-state:paused}
.badges{
display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
gap:clamp(1.75rem,5vw,4.5rem);margin-top:clamp(3rem,6vw,4.5rem);
}
/* no pill, no box — handwriting running into the mark, as in the reference */
.award{display:flex;align-items:center;gap:clamp(.75rem,1.6vw,1.25rem)}
.award__hand{
font-family:var(--f-hand);color:var(--petrol);
font-size:clamp(3.2rem,5.6vw,4.6rem);line-height:1;white-space:nowrap;
}
/* the source file is black on solid white; multiply drops the white into the
cream page so no cut-out asset is needed */
.award img{
height:clamp(22px,2.6vw,34px);width:auto;flex:none;mix-blend-mode:multiply;
}
/* the IHK recognition reads as a seal, so it keeps a hard outline */
.seal{
display:inline-flex;align-items:center;gap:.6rem;
padding:.85rem 1.6rem;border:1px solid var(--petrol);border-radius:100px;
font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600;
color:var(--petrol);white-space:nowrap;
transition:background .45s var(--ease),color .45s var(--ease);
}
.seal::before{content:"";width:.5rem;height:.5rem;border-radius:50%;background:var(--signal);flex:none}
.seal:hover{background:var(--petrol);color:var(--paper)}
/* the accent variant marks a risk-reversal promise, not a credential */
.seal--accent{border-color:var(--accent)}
.seal--accent::before{background:var(--accent)}
.seal--accent:hover{background:var(--accent);color:var(--paper)}
@media (max-width:420px){.seal{white-space:normal;text-align:center}}
/* seals sit in a row and wrap together on narrow screens */
.seals{display:flex;flex-wrap:wrap;gap:.6rem}
/* ------------------------------ 12. Manifest ----------------------------- */
.manifest{padding:var(--sec) 0}
.manifest__text{
font-family:var(--f-display);font-weight:400;text-align:center;
font-size:clamp(1.5rem,4.1vw,3.7rem);line-height:1.22;letter-spacing:-.012em;
max-width:26ch;margin-inline:auto;text-wrap:balance;
}
.manifest__text .w{color:rgba(10,60,77,.15);transition:color .35s linear}
.manifest__text .w.on{color:var(--petrol)}
.manifest__text .w.hl.on{color:var(--accent)}
/* small plate, large plate, narrow text column — the VOIR composition */
.manifest__plates{display:grid;gap:clamp(1rem,2vw,1.75rem);margin-top:clamp(3.5rem,8vw,7rem)}
@media (min-width:900px){
.manifest__plates{
grid-template-columns:minmax(0,.62fr) minmax(0,1.15fr) minmax(0,.78fr);
align-items:end;gap:clamp(1.25rem,2.5vw,2.5rem);
}
.manifest__plate--sm{margin-bottom:clamp(2rem,5vw,5rem)}
}
.manifest__plate{overflow:hidden;border-radius:var(--r);background:var(--sand)}
.manifest__plate--sm img{aspect-ratio:3/4}
.manifest__plate--lg img{aspect-ratio:4/3}
.manifest__plate img{width:100%;height:100%;object-fit:cover}
.manifest__side{padding-bottom:.5rem}
.manifest__side p{color:var(--mute);max-width:32ch;font-size:.98rem}
.manifest__note{
margin-top:1.25rem;font-family:var(--f-hand);color:var(--accent);
font-size:clamp(1.9rem,3.4vw,2.6rem);line-height:1.1;
}
/* the supporting paragraph carries the search terms without shouting */
.manifest__why{
max-width:52ch;margin:clamp(3rem,6vw,5rem) auto 0;text-align:center;
padding-top:clamp(2rem,4vw,3rem);border-top:1px solid var(--line-2);
}
.manifest__whyTitle{
font-family:var(--f-display);font-weight:400;color:var(--petrol);
font-size:clamp(1.15rem,2.1vw,1.65rem);letter-spacing:-.015em;margin-bottom:1rem;
}
.manifest__why p{color:var(--mute);text-wrap:pretty}
/* ---------------------------- 12b. Ausgangslage -------------------------- */
.problem{padding:0 0 var(--sec)}
.problem__head{max-width:64rem;margin-bottom:clamp(3rem,7vw,6rem)}
.problem__label{display:flex;margin:0 0 clamp(1.25rem,2.5vw,2rem);vertical-align:baseline}
.problem__title{
font-family:var(--f-display);font-weight:400;color:var(--petrol);
font-size:clamp(1.9rem,5vw,4.4rem);line-height:1.08;letter-spacing:-.02em;
}
.problem__title em{font-style:italic}
.problem__lead{color:var(--mute);max-width:46ch;margin-top:clamp(1.5rem,3vw,2.25rem)}
/* the headline lines ride up out of their mask once the block is reached */
.problem__title .mask>span{transform:translateY(130%);transition:transform 1.05s var(--ease)}
.problem__title.is-in .mask>span{transform:none}
.problem__title.is-in .mask:nth-child(2)>span{transition-delay:.12s}
/* Diagonal cascade: the three symptoms step down the page instead of sitting
in a flat row, stitched by a thread that draws itself on scroll. */
.cascade{position:relative}
.cascade__thread{
position:absolute;inset:0;width:100%;height:100%;
pointer-events:none;overflow:visible;display:none;
}
.cascade__thread path{
stroke-dasharray:var(--len,2400);stroke-dashoffset:var(--len,2400);
transition:stroke-dashoffset 1.8s var(--ease-out) .2s;
}
.cascade.is-in .cascade__thread path{stroke-dashoffset:0}
.cascade__list{display:grid;gap:clamp(3rem,6vw,5rem);position:relative;z-index:1}
.cascade__item{
opacity:0;transform:translateY(34px);
transition:opacity .9s var(--ease-out),transform 1s var(--ease-out);
}
.cascade.is-in .cascade__item{opacity:1;transform:none}
.cascade.is-in .cascade__item:nth-child(1){transition-delay:.15s}
.cascade.is-in .cascade__item:nth-child(2){transition-delay:.45s}
.cascade.is-in .cascade__item:nth-child(3){transition-delay:.75s}
@media (min-width:900px){
.cascade{padding-block:clamp(1rem,3vw,3rem)}
.cascade__thread{display:block}
.cascade__list{grid-template-columns:repeat(12,1fr);gap:0}
/* each step sits lower and further right than the last */
.cascade__item:nth-child(1){grid-column:1/5;grid-row:1}
.cascade__item:nth-child(2){grid-column:5/9;grid-row:1;margin-top:clamp(6rem,13vw,12rem)}
.cascade__item:nth-child(3){grid-column:9/13;grid-row:1;margin-top:clamp(12rem,26vw,24rem)}
}
.cascade__n{
display:block;font-family:var(--f-display);font-style:italic;
font-size:clamp(2.2rem,4vw,3.4rem);line-height:1;color:var(--accent);
margin-bottom:clamp(.75rem,1.6vw,1.25rem);
}
.cascade__item h3{
font-family:var(--f-display);font-weight:400;color:var(--petrol);
font-size:clamp(1.35rem,2.4vw,1.95rem);line-height:1.14;letter-spacing:-.02em;
max-width:16ch;text-wrap:balance;
}
.cascade__item p{color:var(--mute);margin-top:1rem;max-width:32ch;font-size:.95rem}
.problem__n{
display:block;font-family:var(--f-display);font-style:italic;
font-size:1rem;color:var(--accent);margin-bottom:clamp(2rem,4vw,3.5rem);
}
.problem__cols h3{
font-family:var(--f-display);font-weight:400;color:var(--petrol);
font-size:clamp(1.35rem,2.4vw,1.95rem);line-height:1.14;letter-spacing:-.02em;
max-width:16ch;
}
.problem__cols p{color:var(--mute);margin-top:1rem;max-width:34ch;font-size:.95rem}
/* ------------------------------- 13. Zahlen ------------------------------ */
.figures{background:var(--sand);padding:var(--sec) 0}
.figures__kicker{
font-family:var(--f-ui);font-weight:600;font-style:italic;
font-size:clamp(.95rem,1.5vw,1.15rem);letter-spacing:.02em;line-height:1.4;
color:var(--petrol);text-transform:uppercase;
margin-bottom:clamp(2rem,4vw,3.5rem);
}
.figures__kicker em{font-style:italic;color:var(--accent)}
/* the lead figure: numeral and unit on one optical line, label beside it */
.hero-stat{margin-bottom:clamp(3.5rem,8vw,7rem)}
.hero-stat__num{
display:block;font-family:var(--f-display);font-weight:400;color:var(--petrol);
font-size:clamp(7rem,26vw,24rem);line-height:.74;letter-spacing:-.05em;
font-variant-numeric:tabular-nums;
}
.hero-stat__num b{font-weight:400;font-size:.42em;letter-spacing:-.03em}
.hero-stat__label{
font-family:var(--f-display);color:var(--petrol);
font-size:clamp(1.6rem,4.4vw,3.6rem);line-height:1.1;letter-spacing:-.02em;
margin-top:clamp(.5rem,1.5vw,1rem);
}
.hero-stat__label .pen--sm{font-style:italic}
.hero-stat__body{color:var(--mute);max-width:44ch;margin-top:clamp(1.25rem,2.5vw,2rem)}
@media (min-width:1000px){
.hero-stat{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);gap:0 clamp(2rem,5vw,5rem);align-items:end}
.hero-stat__num{grid-row:1/3}
.hero-stat__label{align-self:end;margin-bottom:.4em}
.hero-stat__body{grid-column:2;margin-top:0}
.hero-stat .hand{grid-column:2}
}
.figures__row{display:grid;gap:clamp(2rem,4vw,3rem);border-top:1px solid rgba(10,60,77,.2);padding-top:clamp(2rem,4vw,3rem)}
@media (min-width:760px){.figures__row{grid-template-columns:repeat(3,1fr)}}
.figure__val{
display:block;font-family:var(--f-display);font-weight:400;color:var(--petrol);
font-size:clamp(3.5rem,8vw,7rem);line-height:.85;letter-spacing:-.04em;
font-variant-numeric:tabular-nums;
}
.figures__row b{
display:block;font-family:var(--f-display);font-weight:400;color:var(--petrol);
font-size:clamp(1.15rem,2vw,1.6rem);letter-spacing:-.02em;margin:.75rem 0 .5rem;
}
/* the unit rides with the numeral and carries the accent — must beat the
generic .figures__row b rule above */
.figures__row .figure__val b{display:inline;font-size:.5em;color:var(--accent);margin:0}
.figures__row p{color:var(--mute);max-width:34ch;font-size:.95rem}
/* handwriting, used sparingly as a margin note.
Paulina sits small on the em square — it needs roughly 1.8x the size of
Hatton/Muli to read as the same optical size. */
.hand{
font-family:var(--f-hand);color:var(--accent);
font-size:clamp(3.2rem,6.4vw,5rem);line-height:1.05;margin-top:1.5rem;
}
.pen--sm::after{bottom:-.05em;height:.22em}
/* ----------------------------- 14. Leistungen ---------------------------- */
/* stacked rows that slide in from alternating sides and settle flat */
.services{padding:var(--sec) 0 0}
/* Rows stack: each one sticks a little lower than the last, so the next slides
over it and they pile up like sheets. Each needs an opaque background or the
sheet underneath shows through. */
.rows{padding-bottom:clamp(4rem,10vw,10rem)}
.row{
display:grid;gap:.35rem 1.25rem;align-items:start;
grid-template-columns:auto 1fr;
padding:clamp(1.5rem,3vw,2.4rem) 0;
background:var(--paper);border-top:1px solid var(--line);
position:sticky;top:calc(5.5rem + var(--i,0) * 3.2rem);
transform:rotate(var(--tilt,0deg));transform-origin:left center;
}
.row:nth-child(1){--i:0;--tilt:0deg}
.row:nth-child(2){--i:1;--tilt:-.5deg}
.row:nth-child(3){--i:2;--tilt:.4deg}
.row:nth-child(4){--i:3;--tilt:-.3deg}
.row:last-child{border-bottom:1px solid var(--line)}
/* the stacked sheets need a soft edge so the pile reads as depth */
.row::after{
content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
box-shadow:0 -14px 26px -18px rgba(10,60,77,.35);pointer-events:none;
}
.row__n{
font-family:var(--f-ui);font-size:.6rem;letter-spacing:.2em;font-weight:600;
color:var(--mute-2);padding-top:.7em;
}
.row__icon{width:clamp(40px,3.4vw,52px);height:auto;grid-row:1;align-self:center}
.row__title{
font-family:var(--f-display);font-weight:400;color:var(--petrol);
font-size:clamp(1.3rem,2.9vw,2.4rem);line-height:1.08;letter-spacing:-.018em;
}
.row__title em{font-style:italic;color:var(--accent)}
.row__txt{grid-column:2}
.row__txt p{color:var(--mute);max-width:52ch;font-size:.92rem}
.row__note{margin-top:.7rem;font-size:.86rem!important;color:var(--mute-2)!important}
.row__note a{border-bottom:1px solid var(--line);padding-bottom:.1rem;color:var(--petrol)}
.row__list{margin-top:.85rem;display:flex;flex-wrap:wrap;gap:.35rem .5rem}
.row__list li{
font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;
padding:.32rem .65rem;border:1px solid var(--line-2);color:var(--mute);
}
.row__media{display:none}
@media (min-width:1000px){
.row{
/* Erste Spur ist das Icon, nicht die Nummer: das Icon ist per grid-row
gesetzt und wird deshalb vor der frei platzierten Nummer eingeordnet.
Die Spur muss also so breit sein wie das Icon, sonst wird es gequetscht. */
grid-template-columns:3.4rem 2.5rem minmax(0,1fr) minmax(0,1.6fr) minmax(0,12rem);
gap:0 clamp(1.25rem,2.4vw,2.5rem);align-items:center;
}
.row__n{padding-top:0}
.row__txt{grid-column:auto}
.row__media{display:block;overflow:hidden;background:var(--sand);aspect-ratio:16/11}
.row__media img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);transition:transform 1s var(--ease)}
.row:hover .row__media img{transform:scale(1)}
.row:hover .row__title{color:var(--accent)}
.row__title{transition:color .45s var(--ease)}
}
@media (max-width:999px){
.row{position:static;transform:none}
}
/* ----------------------------- 14a. Mediathek ---------------------------- */
/* The archive drifts behind the offer at a whisper; a circular mask tied to
the pointer uncovers it at full strength. */
.vault{
position:relative;overflow:clip;background:var(--sand);
min-height:100svh;display:grid;place-items:center;
padding:clamp(6rem,11vw,9rem) var(--gut);
}
.vault__layer{position:absolute;inset:0;pointer-events:none}
.vault__layer--ghost{opacity:.14}
.vault__layer--lit{
opacity:1;
--mx:50%; --my:40%;
-webkit-mask-image:radial-gradient(circle var(--r,230px) at var(--mx) var(--my),#000 0%,rgba(0,0,0,.55) 55%,transparent 78%);
mask-image:radial-gradient(circle var(--r,230px) at var(--mx) var(--my),#000 0%,rgba(0,0,0,.55) 55%,transparent 78%);
}
.vt{
position:absolute;object-fit:cover;
animation:float var(--dur,26s) ease-in-out var(--del,0s) infinite alternate;
will-change:transform;
}
@keyframes float{
from{transform:translate3d(0,0,0) rotate(var(--rot,0deg))}
to{transform:translate3d(var(--dx,14px),var(--dy,-22px),0) rotate(calc(var(--rot,0deg) + var(--dr,2deg)))}
}
.vt.v1 {left:3%; top:9%; width:clamp(76px,9.5vw,148px); aspect-ratio:9/16; --rot:-6deg;--dx:18px;--dy:-26px;--dur:24s;--del:-2s}
.vt.v2 {left:15%; top:54%; width:clamp(94px,12vw,196px); aspect-ratio:3/2; --rot:4deg; --dx:-16px;--dy:20px;--dur:31s;--del:-6s}
.vt.v3 {left:6%; top:77%; width:clamp(68px,8.5vw,128px); aspect-ratio:9/16; --rot:8deg; --dx:12px;--dy:-18px;--dur:27s;--del:-10s}
.vt.v4 {left:27%; top:5%; width:clamp(82px,10.5vw,164px);aspect-ratio:4/3; --rot:-3deg;--dx:-14px;--dy:24px;--dur:34s;--del:-4s}
.vt.v5 {right:4%; top:11%; width:clamp(76px,9.5vw,148px); aspect-ratio:9/16; --rot:7deg; --dx:-20px;--dy:22px;--dur:29s;--del:-8s}
.vt.v6 {right:17%;top:59%; width:clamp(94px,12vw,196px); aspect-ratio:3/2; --rot:-5deg;--dx:16px;--dy:-20px;--dur:33s;--del:-1s}
.vt.v7 {right:7%; top:79%; width:clamp(68px,8.5vw,128px); aspect-ratio:9/16; --rot:3deg; --dx:-12px;--dy:-24px;--dur:26s;--del:-12s}
.vt.v8 {right:28%;top:3%; width:clamp(82px,10.5vw,158px);aspect-ratio:4/5; --rot:6deg; --dx:14px;--dy:18px;--dur:30s;--del:-5s}
.vt.v9 {left:39%; top:85%; width:clamp(68px,8.5vw,120px); aspect-ratio:9/16; --rot:-8deg;--dx:-10px;--dy:-16px;--dur:28s;--del:-9s}
.vt.v10{right:39%;top:87%; width:clamp(82px,10vw,148px); aspect-ratio:3/2; --rot:5deg; --dx:18px;--dy:-14px;--dur:35s;--del:-3s}
.vault__card{
position:relative;z-index:2;text-align:center;
width:min(100%,40rem);
padding:clamp(2.25rem,4.5vw,3.75rem) clamp(1.5rem,3.5vw,3.25rem);
background:var(--paper);
box-shadow:0 50px 110px -60px rgba(10,60,77,.55);
}
.vault__card .eyebrow{justify-content:center;margin-bottom:1.25rem}
.vault__title{
font-family:var(--f-display);font-weight:400;color:var(--petrol);
font-size:clamp(1.9rem,4.4vw,3.4rem);line-height:1.06;letter-spacing:-.022em;
}
.vault__title em{font-style:italic}
.vault__lead{color:var(--mute);max-width:38ch;margin:clamp(1rem,2vw,1.5rem) auto 0;text-wrap:pretty}
.vault__card .price{justify-content:center;border-top-color:var(--line-2)}
.vault__hint{
margin-top:1.25rem;font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;
font-weight:600;color:var(--mute-2);
}
@media (hover:none){
/* no pointer to reveal with: show the archive at a readable level instead */
.vault__layer--ghost{opacity:.3}
.vault__layer--lit{display:none}
.vault__hint{display:none}
.vt.v2,.vt.v4,.vt.v6,.vt.v8,.vt.v9,.vt.v10{display:none}
}
@media (prefers-reduced-motion:reduce){
.vt{animation:none}
}
.price{
display:flex;align-items:baseline;gap:.75rem;flex-wrap:wrap;
margin:clamp(2rem,4vw,3rem) 0 clamp(1.75rem,3vw,2.5rem);
padding-top:clamp(1.5rem,3vw,2rem);border-top:1px solid var(--line);
}
.price__from{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--mute-2)}
.price__val{
font-family:var(--f-display);color:var(--petrol);
font-size:clamp(3.2rem,7vw,6rem);line-height:.9;letter-spacing:-.04em;
}
.price__val b{font-weight:400;font-size:.5em;color:var(--accent);margin-left:.1em}
.price__unit{font-size:.82rem;color:var(--mute);line-height:1.35}
.price__unit i{font-style:normal;color:var(--mute-2);font-size:.9em}
/* ------------------------------- 14b. Data ------------------------------- */
/* the claim starts oversized and bleeding off-screen, then scrolls down to its
settled size while the panels below fade up — scaled by transform so the
layout box never moves and nothing reflows per frame */
/* The one photographic section on the page: real footage behind glass panels,
so the campaign numbers read as a live dashboard rather than body copy. */
.data{
position:relative;
background:var(--petrol-deep) url("../assets/img/bts/bts-05.jpg") center/cover no-repeat;
background-attachment:scroll;
}
.data::before{
content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
background:
linear-gradient(160deg,rgba(6,40,49,.86),rgba(6,40,49,.62) 45%,rgba(10,60,77,.8)),
radial-gradient(120% 90% at 20% 0%,rgba(255,153,0,.16),transparent 60%);
}
/* min-height statt height: bei fester Höhe ragte das Metrik-Panel rund 280 px
in den folgenden Abschnitt hinein und überdeckte dessen Text. */
@media (min-width:1000px){.data{min-height:190vh}}
.data__stage{
position:sticky;top:0;height:100svh;display:flex;align-items:center;overflow:hidden;
z-index:1;
}
/* Unter 1000px steht der Claim still: die 1,55-fache Startgroesse ragte auf
dem iPad ueber den Rand und war nicht lesbar. */
@media (max-width:999px){
.data{height:auto;padding-top:var(--sec)}
.data__stage{position:static;height:auto;overflow:visible}
.data__claim{transform:none!important}
.data__after{margin-top:0;opacity:1!important;transform:none!important}
/* Der schräge Verlauf hat in der Mitte ein helles Band (62 %). Auf dem
Schreibtisch liegt dort nichts, auf dem Telefon steht genau da der
Fließtext — über den hellsten Stellen des Fotos blieben nur 5,2:1.
Gleichmäßig dunkler gibt Reserve, ohne das Foto zuzudecken. */
.data::before{
background:
linear-gradient(180deg,rgba(6,40,49,.9),rgba(6,40,49,.84) 45%,rgba(6,40,49,.92)),
radial-gradient(120% 60% at 20% 0%,rgba(255,153,0,.12),transparent 60%);
}
}
.data__kicker{
font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;font-weight:600;
color:rgba(241,238,235,.6);margin-bottom:clamp(1.25rem,2.5vw,2rem);
}
.data__kicker em{font-style:italic;color:var(--accent);text-transform:none;letter-spacing:.02em;font-size:1.15em}
.data__claim{
font-family:var(--f-display);font-weight:400;color:var(--paper);
font-size:clamp(1.8rem,4.2vw,3.4rem);line-height:1.08;letter-spacing:-.022em;
text-shadow:0 2px 30px rgba(6,40,49,.5);
/* scaled from the left edge at mid-height so the sentence grows sideways
into the gutter, never off the top or bottom of the stage */
transform-origin:0 50%;will-change:transform;
}
.data__claim em{font-style:italic}
/* on the photographic section the stroke needs the accent, not petrol */
.data .pen--dark::after{
background-image:url("data:image/svg+xml;utf8,");
}
.data__after{padding-bottom:var(--sec)}
@media (min-width:700px){
/* the panel slides up over the pinned claim: frosted, not opaque, so the
footage stays visible through it */
.data__after{
position:relative;z-index:2;
/* .55 reichte über den hellen Stellen des Fotos nicht: der Text darauf
verlor seinen Kontrast. .78 lässt die Aufnahme noch durch. */
background:rgba(6,40,49,.78);
backdrop-filter:blur(24px) saturate(130%);
-webkit-backdrop-filter:blur(24px) saturate(130%);
border-top:1px solid rgba(241,238,235,.18);
padding-top:clamp(3rem,7vw,6rem);
}
}
@media (prefers-reduced-transparency:reduce){
.data__after{background:rgba(6,40,49,.94);backdrop-filter:none;-webkit-backdrop-filter:none}
}
.metrics__intro{color:rgba(241,238,235,.85);max-width:44ch;margin-bottom:clamp(2rem,4vw,3rem)}
/* Real campaign figures, counted up on entry. The benchmark sits under each
number so the comparison is the point, not the number alone. */
/* Bento tiles at mixed sizes so the eye lands on the strongest figure first.
Corners stay square: the page has one shape system and this is not the
place to break it. */
.bento{display:grid;gap:clamp(.75rem,1.4vw,1.1rem)}
@media (min-width:620px){.bento{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1040px){
.bento{grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(0,auto)}
.bt--tall{grid-column:1;grid-row:1/3}
.bt--wide{grid-column:2/4;grid-row:1}
.bento .bt:nth-child(3){grid-column:4;grid-row:1}
.bento .bt:nth-child(4){grid-column:2/5;grid-row:2}
}
/* glass panels over the footage, after the Function reference */
.bt{
display:flex;flex-direction:column;
padding:clamp(1.4rem,2.4vw,2rem);
background:rgba(241,238,235,.10);
border:1px solid rgba(241,238,235,.22);
backdrop-filter:blur(18px) saturate(140%);
-webkit-backdrop-filter:blur(18px) saturate(140%);
box-shadow:inset 0 1px 0 rgba(241,238,235,.22), 0 24px 60px -40px rgba(0,0,0,.6);
min-height:clamp(11rem,18vw,15rem);
transition:transform .55s var(--ease-out),background .45s,border-color .45s;
}
.bt:hover{transform:translateY(-5px);background:rgba(241,238,235,.16);border-color:rgba(241,238,235,.34)}
/* the lead figure gets the brighter panel */
.bt--fill{background:rgba(241,238,235,.17);border-color:rgba(241,238,235,.3)}
.bt--tall{justify-content:space-between}
@media (prefers-reduced-transparency:reduce){
.bt{background:rgba(6,40,49,.9);backdrop-filter:none;-webkit-backdrop-filter:none}
}
.bt__ico{
width:clamp(28px,3vw,40px);height:auto;margin-bottom:auto;
fill:none;stroke:var(--accent);stroke-width:2.2;
stroke-linecap:round;stroke-linejoin:round;overflow:visible;
}
.bt__ico path{
stroke-dasharray:140;stroke-dashoffset:140;
transition:stroke-dashoffset 1.1s var(--ease-out) .25s;
}
.bt__ico path:nth-child(2){transition-delay:.5s}
.bt__ico path:nth-child(3){transition-delay:.62s}
.bt.is-in .bt__ico path{stroke-dashoffset:0}
.bt__val{
display:flex;align-items:baseline;gap:.12em;
font-family:var(--f-display);color:var(--paper);
font-size:clamp(3rem,6.4vw,5.4rem);line-height:.86;letter-spacing:-.045em;
margin-top:clamp(1.5rem,3vw,2.5rem);font-variant-numeric:tabular-nums;
}
.bt--tall .bt__val{font-size:clamp(3.6rem,8vw,6.6rem)}
.bt__val b{font-weight:400;font-size:.34em;letter-spacing:-.01em;color:var(--accent)}
.bt__cap{
font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
color:var(--paper);margin-top:.7rem;
}
.bt__sub{font-size:.78rem;color:rgba(241,238,235,.6);line-height:1.4;margin-top:.25rem}
.data__body{color:rgba(241,238,235,.72)}
@media (prefers-reduced-motion:reduce){
.bt__ico path{stroke-dashoffset:0}
}
/* Diese Regel stand nach der hellen Farbe weiter oben und hat sie überschrieben:
var(--mute) ist dunkles Petrol und war auf dem dunklen Foto unlesbar. */
.data__body{color:rgba(241,238,235,.9);max-width:44ch;margin-top:clamp(2.5rem,5vw,4rem)}
.hand--tight{display:block;margin-top:1.1rem;font-size:clamp(2.2rem,4.4vw,3.4rem);line-height:1}
/* ------------------------------ 14c. Reels ------------------------------- */
.reels{padding:var(--sec) 0;overflow:hidden}
.phones{
position:relative;height:clamp(360px,46vw,560px);
margin-top:clamp(2.5rem,5vw,4rem);
touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none;
}
.phones:focus-visible{outline:2px solid var(--petrol);outline-offset:8px}
.phones.is-dragging{cursor:grabbing}
/* Die Karten haengen alle an der Buehnenmitte; die Transform aus dem Script
schiebt sie von dort auf den Bogen. */
.phone{
position:absolute;left:50%;top:0;
width:clamp(148px,15vw,220px);margin-left:calc(clamp(148px,15vw,220px) / -2);
padding:7px;border-radius:26px;background:var(--petrol);
box-shadow:0 30px 60px -34px rgba(10,60,77,.75), inset 0 0 0 1px rgba(241,238,235,.16);
transform-origin:50% 120%;will-change:transform;
transition:box-shadow .5s var(--ease);
}
.phones.is-dragging .phone{transition:none}
.phone.is-front{box-shadow:0 44px 80px -34px rgba(10,60,77,.85), inset 0 0 0 1px rgba(241,238,235,.22)}
/* Handy-Rahmen: Notch und Seitentasten, damit die Clips als Telefonaufnahme
lesbar sind und nicht als beliebige Kacheln. */
.phone__notch{
position:absolute;top:14px;left:50%;transform:translateX(-50%);z-index:3;
width:30%;height:8px;border-radius:100px;background:rgba(6,40,49,.9);
}
.phone::before,.phone::after{
content:"";position:absolute;left:-2px;width:2px;border-radius:2px;
background:var(--petrol-deep);opacity:.8;
}
.phone::before{top:22%;height:8%}
.phone::after{top:34%;height:13%}
/* Fotos sitzen im selben Rahmen wie die Clips — die Akademie mischt beides. */
.phone video,.phone img{
width:100%;aspect-ratio:9/16;object-fit:cover;
border-radius:19px;background:rgba(10,60,77,.25);display:block;
pointer-events:none; /* der Zieh-Griff ist die Karte, nicht das Video */
}
.phone figcaption{
position:absolute;left:0;right:0;bottom:-2.1rem;text-align:center;
font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
color:var(--mute-2);opacity:0;transition:opacity .45s var(--ease);
}
.phone.is-front figcaption{opacity:1}
.phone figcaption i{font-style:normal;color:var(--accent);margin-inline:.2rem}
@media (max-width:767px){
.phones{height:clamp(320px,92vw,440px)}
.phone{width:clamp(140px,42vw,190px);margin-left:calc(clamp(140px,42vw,190px) / -2)}
}
@media (prefers-reduced-motion:reduce){
.phone{transition:none}
}
/* ---------------------------- 15. Impressionen --------------------------- */
.impressions{position:relative;height:320vh;background:var(--sand)}
.impressions__sticky{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;justify-content:center;gap:clamp(2rem,4vw,3.5rem);overflow:hidden}
.impressions__head{
font-family:var(--f-display);font-weight:400;color:var(--petrol);
font-size:clamp(1.9rem,5.4vw,4.4rem);line-height:1.05;letter-spacing:-.02em;max-width:16ch;
}
.impressions__head em{font-style:italic}
.impressions__track{display:flex;align-items:center;gap:clamp(1rem,2vw,2rem);padding-inline:var(--gut);will-change:transform}
.imp{flex:none;position:relative}
.imp video,.imp img{
height:clamp(190px,40vh,440px);width:auto;object-fit:cover;
border-radius:var(--r);background:rgba(10,60,77,.08);
}
.imp--v video{aspect-ratio:16/9}
.imp--p img{aspect-ratio:3/2}
.imp--tall video,.imp--tall img{height:clamp(230px,52vh,560px);aspect-ratio:4/5}
.imp figcaption{
margin-top:.8rem;font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;
font-weight:600;color:var(--mute-2);
}
@media (max-width:767px){
.impressions{height:auto}
.impressions__sticky{position:static;height:auto;padding-block:var(--sec)}
.impressions__track{
overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
padding-bottom:1rem;scroll-padding-left:var(--gut);transform:none!important;
}
.imp{scroll-snap-align:start}
.imp video,.imp img{height:clamp(170px,24vh,260px)}
.imp--tall video,.imp--tall img{height:clamp(200px,30vh,320px)}
}
/* ------------------------------ 16. Projekte ----------------------------- */
/* Pro Projekt: ein grosser Film, darauf eine weisse Karte, die ihn
anschneidet — und darunter die Ausbeute aus demselben Drehtag. */
.work{padding:var(--sec) 0;background:var(--sand)}
.projs{display:grid;gap:clamp(4.5rem,10vw,9rem);margin-top:clamp(3rem,6vw,5rem)}
.proj__stage{position:relative}
.proj__film{margin:0;overflow:hidden;background:var(--petrol-deep)}
.proj__film video{
width:100%;aspect-ratio:16/9;object-fit:cover;display:block;
transform:scale(1.02);transition:transform 1.4s var(--ease);
}
.proj__film:hover video{transform:scale(1)}
@media (max-width:700px){.proj__film video{aspect-ratio:4/3}}
/* Die Karte sitzt im Bild und schiebt sich unten heraus — dieselbe Geste
wie in der Referenz, aber in unserem Papier statt in Weiss auf Blau. */
.proj__card{
position:relative;z-index:2;background:var(--paper);
padding:clamp(1.5rem,3.2vw,2.75rem);
margin:clamp(-4rem,-6vw,-2rem) var(--gut) 0;
}
@media (min-width:900px){
.proj__card{
position:absolute;left:clamp(2rem,5vw,5rem);bottom:clamp(-2.5rem,-4vw,-1.5rem);
width:min(30rem,42%);margin:0;
box-shadow:0 40px 90px -50px rgba(6,40,49,.6);
}
/* jedes zweite Projekt spiegelt die Karte, damit die Reihe atmet */
.proj:nth-child(even) .proj__card{left:auto;right:clamp(2rem,5vw,5rem)}
/* Hier liegt die Karte im Bild: solange der Film läuft, macht sie Platz und
kommt bei Pause zurück. Darunter steht sie unter dem Film und stört nicht. */
.proj__card{transition:opacity .4s var(--ease-out),transform .5s var(--ease-out)}
.proj__stage.is-filmLaeuft .proj__card{opacity:0;transform:translateY(16px);pointer-events:none}
}
.proj__tag{
font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;font-weight:600;
color:var(--mute-2);margin-bottom:.9rem;
}
.proj__tag i{font-style:normal;color:var(--signal-deep);margin-inline:.3rem}
.proj__title{
font-family:var(--f-display);font-weight:400;color:var(--petrol);
font-size:clamp(1.35rem,2.5vw,2rem);line-height:1.12;letter-spacing:-.02em;
}
.proj__title em{font-style:italic}
.proj__desc{margin-top:1rem;color:var(--mute);font-size:.9rem;line-height:1.62}
.proj__meta{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1.25rem}
.proj__meta li{
font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
color:var(--mute);border:1px solid var(--line-2);padding:.35rem .7rem;
}
.proj__stripLabel{
margin:clamp(3.5rem,6vw,5rem) 0 1rem;padding-inline:var(--gut);
font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;font-weight:600;
color:var(--mute-2);
}
@media (min-width:900px){.proj__stripLabel{margin-top:clamp(4.5rem,7vw,6rem)}}
/* Die Ausbeute laeuft als Band, auf schmalen Schirmen scrollbar. */
.proj__strip{
display:flex;gap:clamp(.6rem,1.2vw,1rem);align-items:flex-end;
padding-inline:var(--gut);overflow-x:auto;scroll-snap-type:x proximity;
scroll-padding-left:var(--gut);padding-bottom:.5rem;
scrollbar-width:none;
}
.proj__strip::-webkit-scrollbar{display:none}
.proj__bit{
position:relative;flex:none;scroll-snap-align:start;
width:clamp(112px,11vw,168px);
transition:transform .5s var(--ease);
}
.proj__bit:hover{transform:translateY(-6px)}
.proj__bit video,.proj__bit img{
width:100%;aspect-ratio:4/3;object-fit:cover;display:block;
background:rgba(10,60,77,.08);
}
.proj__bit--v video{aspect-ratio:9/16}
.proj__bit--v{width:clamp(96px,9vw,140px)}
.proj__bit span{
display:block;margin-top:.55rem;
font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600;
color:var(--mute-2);
}
/* -------------------------------- 17. Flow ------------------------------- */
.flow{padding:var(--sec) 0;background:var(--sand)}
.flow__grid{display:grid;gap:clamp(2.5rem,5vw,5rem)}
@media (min-width:1000px){.flow__grid{grid-template-columns:1fr 1fr;gap:clamp(3rem,7vw,8rem);align-items:start}}
.flow__media{position:relative}
@media (min-width:1000px){.flow__media{position:sticky;top:20vh}}
.flow__frame{position:relative;aspect-ratio:4/5;border-radius:var(--r);overflow:hidden;background:var(--sand)}
@media (max-width:999px){.flow__frame{aspect-ratio:16/10}}
.flow__frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.06);transition:opacity .8s var(--ease),transform 1.2s var(--ease)}
.flow__frame video.is-active{opacity:1;transform:none}
.flow__badge{
position:absolute;left:1rem;bottom:1rem;z-index:3;
font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600;
padding:.5rem .95rem;border-radius:100px;background:rgba(241,238,235,.92);color:var(--petrol);
}
.flow__steps{display:grid;gap:clamp(2.5rem,5vw,4.5rem)}
.flow__step{padding-left:clamp(2.75rem,5vw,4.25rem);position:relative;opacity:.32;transition:opacity .6s var(--ease)}
.flow__step.is-on{opacity:1}
.flow__n{position:absolute;left:0;top:.35rem;font-family:var(--f-display);font-weight:400;font-size:1rem;color:var(--signal-deep)}
.flow__step::before{content:"";position:absolute;left:1.55rem;top:.4rem;bottom:-4.5rem;width:1px;background:var(--line-2)}
.flow__step:last-child::before{display:none}
@media (max-width:640px){.flow__step::before{display:none}}
.flow__step h3{font-family:var(--f-display);font-weight:400;color:var(--petrol);font-size:clamp(1.6rem,3.4vw,2.6rem);line-height:1.06;letter-spacing:-.025em}
.flow__step p{color:var(--mute);margin-top:.9rem;max-width:42ch}
/* -------------------------------- 18. Haus ------------------------------- */
.haus{padding:var(--sec) 0}
.haus__grid{display:grid;gap:clamp(2rem,4vw,4rem);align-items:center;margin-bottom:clamp(3rem,6vw,5rem)}
@media (min-width:900px){.haus__grid{grid-template-columns:.9fr 1.1fr}}
/* the clip is rendered on white; multiply drops that white out so the drawing
reads as a transparent line illustration on whatever sits behind it */
.haus__draw{background:transparent}
.haus__draw video{width:100%;aspect-ratio:4/3;object-fit:contain;mix-blend-mode:multiply}
.haus__title{font-family:var(--f-display);font-weight:400;color:var(--petrol);font-size:clamp(2.4rem,7vw,6rem);line-height:.94;letter-spacing:-.035em}
.haus__lead{color:var(--mute);max-width:46ch;margin-top:clamp(1.25rem,2.5vw,2rem)}
.haus__hand{font-family:var(--f-hand);color:var(--accent);font-size:clamp(2.8rem,5.4vw,4.2rem);margin-top:1.5rem}
.haus__mosaic{display:grid;gap:clamp(.75rem,1.5vw,1.25rem)}
@media (min-width:900px){
.haus__mosaic{grid-template-columns:repeat(12,1fr);align-items:start}
.haus__img--a{grid-column:1/7;aspect-ratio:4/3}
.haus__img--b{grid-column:7/11;margin-top:3rem;aspect-ratio:3/4}
.haus__img--c{grid-column:11/13;margin-top:1rem;aspect-ratio:3/4}
}
.haus__img{overflow:hidden;border-radius:var(--r);background:var(--sand);aspect-ratio:4/3}
.haus__img img{width:100%;height:100%;object-fit:cover;transform:scale(1.12);transition:transform 1.4s var(--ease)}
.haus__img.is-in img{transform:scale(1)}
/* ---------------------------- 18b. Reaktionen ---------------------------- */
.reactions{padding:var(--sec) 0;background:var(--sand)}
.reactions__grid{display:grid;gap:clamp(1rem,2.2vw,2rem)}
@media (min-width:900px){
.reactions__grid{grid-template-columns:repeat(12,1fr);align-items:start}
.re--a{grid-column:1/5}
.re--b{grid-column:5/9;margin-top:clamp(2rem,5vw,4.5rem)}
.re--c{grid-column:9/13}
.re--d{grid-column:2/6;margin-top:clamp(1rem,2vw,2rem)}
.re--e{grid-column:6/9;margin-top:clamp(3rem,6vw,5rem)}
.re-result{grid-column:9/13;align-self:center}
}
/* the screenshots are dark UI — a soft shadow lifts them off the cream */
.re img{width:100%;height:auto;box-shadow:0 18px 40px -28px rgba(10,60,77,.55)}
.re{transition:transform .6s var(--ease)}
.re:hover{transform:translateY(-6px)}
.re-result{border-left:2px solid var(--accent);padding-left:clamp(1.25rem,2.5vw,2rem)}
.re-result p{font-family:var(--f-display);color:var(--petrol);font-size:clamp(1.15rem,2vw,1.7rem);line-height:1.32}
.re-result em{font-style:italic;color:var(--accent)}
.re-result cite{display:flex;flex-direction:column;gap:.15rem;margin-top:1.25rem;font-style:normal;font-size:.8rem;color:var(--mute)}
.re-result cite b{color:var(--petrol);font-weight:600;letter-spacing:.05em}
/* ------------------------------- 19. Voices ------------------------------ */
.voices{padding:var(--sec) 0}
.voices__grid{display:grid;gap:clamp(1rem,2vw,1.5rem)}
@media (min-width:900px){
.voices__grid{grid-template-columns:repeat(3,1fr)}
.voice--lead{grid-column:span 3}
}
@media (min-width:1300px){
.voices__grid{grid-template-columns:1.4fr 1fr 1fr}
.voice--lead{grid-column:span 1;grid-row:span 2}
}
/* no card chrome — the quotes float on the canvas, separated by a hairline */
.voice{
padding:clamp(1.5rem,2.6vw,2.25rem) 0 0;background:transparent;
border-top:1px solid var(--line-2);display:flex;flex-direction:column;gap:1.25rem;
}
.voice__stars{color:var(--signal-deep);letter-spacing:.28em;font-size:.85rem}
.voice p{font-family:var(--f-display);color:var(--petrol);font-size:clamp(1.05rem,1.6vw,1.4rem);line-height:1.4;letter-spacing:-.01em}
.voice--lead p{font-size:clamp(1.2rem,2.1vw,1.85rem)}
.voice cite{margin-top:auto;font-style:normal;font-size:.8rem;color:var(--mute);display:flex;flex-direction:column;gap:.15rem}
.voice cite b{color:var(--petrol);font-weight:700;letter-spacing:.05em}
/* --------------------------- 20. Akademie-Teaser -------------------------- */
.aca-teaser{padding:var(--sec) 0}
.aca-teaser__grid{display:grid;gap:clamp(2rem,4vw,4rem);align-items:center}
@media (min-width:900px){.aca-teaser__grid{grid-template-columns:1.05fr .95fr}}
.aca-teaser__title{font-family:var(--f-display);font-weight:400;color:var(--petrol);font-size:clamp(1.8rem,4.2vw,3.4rem);line-height:1.08;letter-spacing:-.022em}
.aca-teaser__title em{font-style:italic}
.aca-teaser__lead{color:var(--mute);max-width:46ch;margin:clamp(1.25rem,2.5vw,2rem) 0 clamp(2rem,4vw,2.75rem)}
.aca-teaser__media{border-radius:var(--r);overflow:hidden;background:var(--sand)}
.aca-teaser__media img{width:100%;aspect-ratio:4/3;object-fit:cover}
/* ------------------------------ 21. Kontakt ------------------------------ */
.contact{padding:var(--sec) 0;background:var(--sand)}
.contact__title{
font-family:var(--f-display);font-weight:400;color:var(--petrol);
font-size:clamp(2.1rem,6.6vw,6.4rem);line-height:1.02;letter-spacing:-.02em;
margin-bottom:clamp(3rem,6vw,5rem);max-width:16ch;
}
.contact__title em{font-style:italic}
.contact__grid{display:grid;gap:clamp(2.5rem,5vw,5rem)}
@media (min-width:1000px){.contact__grid{grid-template-columns:1fr 1fr;gap:clamp(3rem,6vw,6rem);align-items:center}}
.contact__media{position:relative;border-radius:var(--r);overflow:hidden;background:rgba(10,60,77,.08);aspect-ratio:4/3}
@media (max-width:999px){.contact__media{aspect-ratio:16/9}}
.contact__media video{width:100%;height:100%;object-fit:cover}
.contact__sound{
position:absolute;right:1rem;bottom:1rem;z-index:2;
font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;
padding:.55rem 1rem;border-radius:100px;background:rgba(241,238,235,.9);color:var(--petrol);
transition:background .4s;
}
.contact__sound:hover{background:var(--signal)}
.contact__lead{color:var(--mute);max-width:46ch}
.contact__actions{margin-top:clamp(2rem,4vw,3rem)}
.contact__data{display:grid;gap:1.5rem;margin-top:clamp(2.5rem,5vw,4rem);padding-top:clamp(2rem,4vw,2.5rem);border-top:1px solid rgba(10,60,77,.2)}
@media (min-width:640px){.contact__data{grid-template-columns:repeat(3,1fr)}}
.contact__data dt{font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--mute-2);margin-bottom:.5rem}
.contact__data dd{color:var(--petrol)}
.contact__data dd a{border-bottom:1px solid var(--line);transition:border-color .4s,color .4s}
.contact__data dd a:hover{border-color:var(--accent)}
/* ------------------------------- 22. Footer ------------------------------ */
/* paper, so it doesn't merge into the sand contact section above it */
.foot{padding:clamp(4rem,8vw,7rem) 0 2rem;background:var(--paper);overflow:clip}
.foot__mark{
font-family:var(--f-display);font-weight:400;font-size:clamp(3.5rem,15vw,13rem);line-height:.85;
letter-spacing:-.045em;color:transparent;-webkit-text-stroke:1px rgba(10,60,77,.28);
margin-bottom:clamp(3rem,6vw,5rem);
}
.foot__mark em{font-style:italic;-webkit-text-stroke:1px rgba(10,60,77,.5)}
.foot__grid{display:grid;gap:clamp(2rem,4vw,3rem);padding-bottom:clamp(3rem,5vw,4rem)}
@media (min-width:700px){.foot__grid{grid-template-columns:repeat(4,1fr)}}
.foot__grid h4{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--mute-2);margin-bottom:1.15rem}
.foot__grid a,.foot__grid span{display:block;color:var(--mute);font-size:.92rem;padding:.28rem 0;transition:color .35s}
.foot__grid a:hover{color:var(--petrol)}
/* Die vier Kanaele als Symbolreihe. Sie stehen unter Mail und Telefon in
derselben Spalte, brauchen aber eine eigene Regel: .foot__grid a ist
display:block, das wuerde sie untereinander stellen. */
.foot__social{display:flex;gap:.55rem;margin-top:.9rem;flex-wrap:wrap}
.foot__grid .foot__social a{
display:grid;place-items:center;width:44px;height:44px;padding:0;
border-radius:100px;color:var(--mute);
box-shadow:inset 0 0 0 1px rgba(10,60,77,.16);
transition:color .35s var(--ease),box-shadow .35s var(--ease),background .35s var(--ease);
}
.foot__social svg{width:20px;height:20px;display:block}
.foot__grid .foot__social a:hover{
color:var(--petrol);background:var(--signal);
box-shadow:inset 0 0 0 1px transparent;
}
.foot__grid .foot__social a:focus-visible{outline:2px solid var(--petrol);outline-offset:3px}
.foot__award{height:26px;width:auto;margin-top:1.5rem;mix-blend-mode:multiply}
.foot__bar{
display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;
border-top:1px solid rgba(10,60,77,.16);padding-top:1.75rem;
font-size:.74rem;letter-spacing:.06em;color:var(--mute-2);
}
/* -------------------------------- 22a. FAQ -------------------------------- */
/* Frage links, Antwort rechts: die Spalte der Fragen bleibt scannbar, ohne
dass die Antworten hinter einem Klick verschwinden (auch besser für SEO). */
.faq{border-top:1px solid var(--line)}
.faq > div{
display:grid;gap:.75rem clamp(1.5rem,4vw,4rem);
padding:clamp(1.5rem,3.2vw,2.5rem) 0;border-bottom:1px solid var(--line-2);
}
@media (min-width:900px){.faq > div{grid-template-columns:.95fr 1.05fr;align-items:start}}
.faq dt{
font-family:var(--f-display);font-weight:400;color:var(--petrol);
font-size:clamp(1.1rem,2.1vw,1.6rem);line-height:1.22;letter-spacing:-.018em;
max-width:26ch;text-wrap:balance;
}
.faq dd{margin:0;color:var(--mute);font-size:.94rem;line-height:1.66;max-width:56ch}
.faq dd a{color:var(--petrol);text-decoration:underline;text-underline-offset:.18em;text-decoration-thickness:1px}
.faq dd a:hover{color:var(--signal-deep)}
/* ---------------------------- 22b. Einsatzgebiet -------------------------- */
/* Beantwortet "kommt ihr überhaupt zu uns?" direkt vor dem Kontakt-CTA und
trägt gleichzeitig die Ortsnamen als Fließtext, nicht als Keyword-Liste. */
.areas{padding:var(--sec) 0;background:var(--sand)}
.areas__head{display:grid;gap:clamp(1.5rem,3vw,2.5rem);margin-bottom:clamp(2.75rem,6vw,4.5rem)}
@media (min-width:960px){.areas__head{grid-template-columns:1.1fr .9fr;align-items:end}}
.areas__title{
font-family:var(--f-display);font-weight:400;color:var(--petrol);
font-size:clamp(1.85rem,5vw,3.9rem);line-height:1.05;letter-spacing:-.022em;
}
.areas__title em{font-style:italic}
.areas__lead{color:var(--mute);max-width:46ch}
.areas__list{display:grid;gap:0;border-top:1px solid var(--line)}
@media (min-width:860px){
.areas__list{grid-template-columns:repeat(3,1fr);gap:0 clamp(1.5rem,3vw,3rem)}
}
.areas__list li{padding:clamp(1.5rem,3vw,2.25rem) 0;border-bottom:1px solid var(--line-2)}
@media (min-width:860px){.areas__list li{border-bottom:0}}
.areas__list h3{
font-family:var(--f-display);font-weight:400;color:var(--petrol);
font-size:clamp(1.1rem,2vw,1.45rem);letter-spacing:-.015em;margin-bottom:.7rem;
}
.areas__list p{color:var(--mute);font-size:.9rem;line-height:1.6}
/* --------------------------- 23. Anfrage-Dialog --------------------------- */
/* Das