:root{
--c0:#F4F1EB; --c1:#EAE6DC; --c2:#0D0E0B; --c3:#1B2218; --c4:#5C6751;
/* --teal2 war #247A95 und kam als Textfarbe auf --c0/--c1 nur auf 4,34:1 —
knapp unter den 4,5:1 fuer Text dieser Groesse. Gleicher Farbton (194°),
gleiche Saettigung, nur dunkler: jetzt 4,8-5,3:1. Wird ausschliesslich fuer
Text auf hellem Grund verwendet (.hero-studio, .hero-loc, .s-label). */
--teal:#68C4B5; --teal2:#1F6B83; --teal3:#78B8D4;
--gold:#C49A42; --gold2:#D9B468; --gold-pale:rgba(196,154,66,.10);
/* Antikgold — das Markengold, nur so weit abgedunkelt, dass es als Schriftfarbe
auf den hellen Flaechen traegt. --gold selbst kommt auf --c0 nur auf 2,31:1
und auf --c1 auf 2,09:1; das reisst sogar die 3:1 fuer grosse Schrift und ist
genau der Grund, warum hier frueher schon einmal auf Schwarz ausgewichen
wurde. --gold-deep liegt bei 4,47:1 bzw. 4,05:1 und erfuellt damit 3:1 fuer
die Titelgroessen mit Reserve. NUR fuer Text auf hellem Grund — auf dunklem
Grund bleibt --grad-gold richtig (siehe .contact-in .s-title strong). */
--gold-deep:#8A6A22;
/* ACHTUNG: --grad enthaelt bei 68% einen Creme-Stopp (#EAE5D5), der auf den
hellen Flaechen --c0/--c1 unsichtbar ist (Kontrast 1,01:1). NUR auf dunklem
Grund verwenden — dort stimmt er (z. B. .foot-brand auf #07080A, ~9,5:1).
Fuer helle Flaechen --grad-gold oder eine Volltonfarbe nehmen. */
--grad:linear-gradient(135deg,#68C4B5 0%,#78B8D4 35%,#EAE5D5 68%,#D9B468 100%);
--grad-gold:linear-gradient(135deg,#C49A42 0%,#D9B468 50%,#C49A42 100%);
--paper:rgba(244,241,235,.90);
--bdr:rgba(196,154,66,.16);
--bdr-t:rgba(104,196,181,.16);
--shadow:0 24px 80px rgba(18,22,15,.09);
--ease:cubic-bezier(.25,.46,.45,.94);
--ease-out:cubic-bezier(.23,1,.32,1);
--spring:cubic-bezier(.34,1.56,.64,1);
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;font-size:16px;}
body{font-family:'Inter',sans-serif;background:var(--c0);color:var(--c3);overflow-x:hidden;-webkit-font-smoothing:antialiased;}
img{display:block;max-width:100%;filter:brightness(1.01) contrast(.96) saturate(.88);}
a{text-decoration:none;}
button{cursor:pointer;}
::-webkit-scrollbar{width:3px;}
::-webkit-scrollbar-thumb{background:var(--gold);border-radius:2px;}
/* NAV */
#nav{position:fixed;top:0;left:0;right:0;z-index:500;display:flex;justify-content:space-between;align-items:center;padding:28px 72px;transition:padding .45s var(--ease),background .45s var(--ease),box-shadow .45s;}
#nav.scrolled{padding:16px 72px;background:rgba(244,241,235,.97);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-bottom:1px solid var(--bdr);box-shadow:0 6px 40px rgba(18,22,15,.06);}
/* Volltonfarbe statt --grad: die Nav liegt ueber dem hellen Hero bzw. auf
rgba(244,241,235,.97) — dort war das Logo nahezu unsichtbar. Gold geprueft
und verworfen (#C49A42 erreicht nur 2,31:1, zu schwach fuer diese Groesse). */
.nav-brand{font-family:'Montserrat',sans-serif;font-weight:700;font-size:1.05rem;letter-spacing:.36em;text-transform:uppercase;color:var(--c2);}
.nav-right{display:flex;align-items:center;gap:12px;}
/* gap 36px -> 28px (Sitzung 12): Der sechste Eintrag "Journal" kostet 39px.
Die 8px je Luecke geben 40px zurueck, damit die Nav bei 1280px denselben
Sicherheitsabstand behaelt wie vorher (gemessen: 72px statt 71px Rest). */
.nav-links{display:flex;align-items:center;gap:28px;list-style:none;}
.nav-links a{font-family:'Montserrat',sans-serif;font-size:.66rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--c4);transition:color .3s;position:relative;}
.nav-links a::after{content:'';position:absolute;bottom:-3px;left:0;width:0;height:1px;background:var(--gold);transition:width .3s var(--ease);}
.nav-links a:hover{color:var(--c2);}
.nav-links a:hover::after{width:100%;}
.nav-cta{display:flex;align-items:center;gap:7px;background:var(--c2)!important;color:#fff!important;-webkit-text-fill-color:#fff!important;padding:9px 20px;border-radius:2px;font-family:'Montserrat',sans-serif;font-size:.66rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;transition:background .3s,transform .3s!important;}
.nav-cta:hover{background:var(--gold)!important;transform:translateY(-2px)!important;}
.nav-cta svg{width:14px;height:14px;flex-shrink:0;}
.lang-sw{display:flex;gap:3px;background:rgba(255,255,255,.5);border:1px solid var(--bdr);border-radius:4px;padding:3px;backdrop-filter:blur(10px);}
.lang-btn{font-family:'Montserrat',sans-serif;font-size:.58rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:5px 8px;border-radius:2px;border:none;background:none;color:var(--c4);transition:all .25s;cursor:pointer;}
.lang-btn:hover{color:var(--gold);}
.lang-btn.active{background:var(--gold);color:#fff;}
/* HERO */
#hero{min-height:100vh;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;padding-top:90px;background:linear-gradient(180deg,rgba(255,253,248,.72),rgba(244,241,235,.88)),var(--c0);}
.hero-video{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;z-index:0;opacity:.28;pointer-events:none;}
#hero::before{content:'';position:absolute;inset:110px 6vw 70px;border:1px solid var(--bdr);border-radius:20px;background:linear-gradient(135deg,rgba(255,255,255,.22),rgba(196,154,66,.03));pointer-events:none;z-index:2;}
#hero::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:3;opacity:.018;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:200px 200px;}
.hero-center{display:flex;flex-direction:column;align-items:center;text-align:center;position:relative;z-index:4;padding:60px 20px 100px;max-width:100%;}
.portrait-wrap{position:relative;width:380px;height:380px;margin-bottom:42px;display:flex;align-items:center;justify-content:center;}
@keyframes ring-slow{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.portrait-ring{position:absolute;inset:-37px;border-radius:50%;border:2px solid rgba(196,154,66,.32);animation:ring-slow 70s linear infinite;pointer-events:none;}
.portrait-ring::before,.portrait-ring::after{content:'';position:absolute;width:5px;height:5px;border-radius:50%;background:var(--gold);opacity:.65;top:50%;left:-3.5px;transform:translateY(-50%);box-shadow:0 0 8px var(--gold);}
.portrait-ring::after{left:auto;right:-3.5px;}
.portrait-ring2{position:absolute;inset:-52px;border-radius:50%;border:1px dashed rgba(196,154,66,.09);animation:ring-slow 110s linear infinite reverse;pointer-events:none;}
.portrait{width:380px;height:380px;border-radius:50%;overflow:hidden;box-shadow:0 0 0 8px rgba(255,255,255,.72),0 28px 90px rgba(18,22,15,.14),0 0 0 10px var(--gold-pale);}
.portrait img{width:100%;height:100%;object-fit:cover;object-position:center top;filter:none;}
.hero-name{font-family:'Cormorant Garamond',serif;font-size:clamp(3rem,6.5vw,6.6rem);font-weight:300;letter-spacing:.05em;color:var(--c2);margin-bottom:6px;overflow:hidden;}
.hero-name span{display:inline-block;animation:char-in .8s var(--spring) forwards;opacity:0;}
@keyframes char-in{from{opacity:0;transform:translateY(60%)}to{opacity:1;transform:translateY(0)}}
@media (hover:hover) and (pointer:fine){
.hero-name{transition:text-shadow .4s var(--ease-out);}
.hero-name:hover{text-shadow:0 1px 16px rgba(196,154,66,.34),0 2px 42px rgba(196,154,66,.26),0 6px 90px rgba(217,180,104,.22);}
}
/* Erste Zeile, die ein Besucher ueber das Angebot liest — bleibt farbig, aber
lesbar. Der fruehere Verlauf (#4AABA0 -> #5B9EC2 -> #C49A42) kam auf dem
hellen Hero nur auf 2,44:1; bei 17,6px fett gilt die 4,5:1-Schwelle. */
.hero-studio{font-family:'Montserrat',sans-serif;font-size:1.1rem;font-weight:700;letter-spacing:.48em;text-transform:uppercase;color:var(--teal2);margin-bottom:14px;animation:fadeup .9s .5s var(--ease) forwards;opacity:0;}
.hero-sub2{font-family:'Inter',sans-serif;font-size:.65rem;font-weight:300;letter-spacing:.18em;text-transform:uppercase;color:var(--c4);margin-bottom:10px;opacity:.7;animation:fadeup .9s .75s var(--ease) forwards;opacity:0;}
.hero-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;animation:fadeup .9s 1s var(--ease) forwards;opacity:0;}
.hero-btn-muted{border-color:rgba(196,154,66,.28)!important;color:var(--c4)!important;}
.hero-ig{display:inline-flex;align-items:center;gap:6px;margin-top:14px;font-family:'Montserrat',sans-serif;font-size:.6rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:rgba(92,103,81,.6);transition:color .3s;animation:fadeup .9s 1.1s var(--ease) forwards;opacity:0;}
.hero-ig:hover{color:var(--gold);}
.hero-ig svg{width:14px;height:14px;}
.hero-div{width:40px;height:1px;background:var(--gold);margin:0 auto 14px;opacity:.45;animation:fadeup .9s .6s var(--ease) forwards;}
.hero-tagline{font-family:'Inter',sans-serif;font-size:.75rem;font-weight:300;letter-spacing:.16em;text-transform:uppercase;color:var(--c4);margin-bottom:6px;animation:fadeup .9s .7s var(--ease) forwards;opacity:0;}
.hero-loc{font-family:'Montserrat',sans-serif;font-size:.64rem;font-weight:500;letter-spacing:.24em;color:var(--teal2);margin-bottom:30px;animation:fadeup .9s .8s var(--ease) forwards;opacity:0;}
@keyframes fadeup{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.hero-stats{display:flex;align-items:stretch;background:rgba(255,255,255,.65);border:1px solid var(--gold);border-radius:2px;overflow:hidden;margin-bottom:32px;box-shadow:0 4px 28px rgba(18,22,15,.07),0 0 12px rgba(196,154,66,.14);animation:fadeup .9s .9s var(--ease) forwards;opacity:0;}
.hero-stat{padding:16px 28px;text-align:center;border-right:1px solid rgba(196,154,66,.5);position:relative;transition:background .3s var(--ease-out),box-shadow .3s var(--ease-out),transform .3s var(--ease-out);}
@media (hover:hover) and (pointer:fine){
.hero-stat:hover{background:rgba(196,154,66,.05);box-shadow:inset 0 0 0 1px rgba(196,154,66,.35),inset 0 0 16px rgba(217,180,104,.10);transform:scale(1.03);z-index:1;}
}
.hero-stat:last-child{border-right:none;}
.hero-stat strong{display:block;font-family:'Cormorant Garamond',serif;font-size:1.75rem;font-weight:600;color:var(--c2);line-height:1;margin-bottom:4px;}
.hero-stat span{display:block;font-family:'Montserrat',sans-serif;font-size:.54rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--c4);}
.hero-btn{display:inline-flex;align-items:center;gap:10px;background:transparent;color:var(--c2);padding:13px 32px;border-radius:2px;border:1px solid var(--bdr);font-family:'Montserrat',sans-serif;font-size:.72rem;font-weight:500;letter-spacing:.1em;transition:border-color .3s,color .3s,transform .3s,box-shadow .3s;animation:fadeup .9s 1s var(--ease) forwards;opacity:0;position:relative;overflow:hidden;}
.hero-btn::before{content:'';position:absolute;inset:0;background:var(--grad-gold);opacity:0;transition:opacity .4s;}
.hero-btn:hover{border-color:var(--gold);transform:translateY(-2px);box-shadow:0 8px 30px var(--gold-pale);}
.hero-btn:hover::before{opacity:.09;}
/* FLEET */
#fleet{padding:72px 0 64px;background:#0D0E0B;overflow:hidden;position:relative;}
#fleet::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent 0%,var(--gold) 30%,var(--gold2) 50%,var(--gold) 70%,transparent 100%);opacity:.38;}
#fleet::after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent 0%,var(--gold) 30%,var(--gold2) 50%,var(--gold) 70%,transparent 100%);opacity:.38;}
.fleet-head{text-align:center;margin-bottom:48px;position:relative;z-index:2;padding:0 40px;}
.fleet-head .s-label{color:var(--gold2);border-color:rgba(217,180,104,.22);background:rgba(217,180,104,.06);}
.fleet-head h2{font-family:'Cormorant Garamond',serif;font-weight:300;font-size:clamp(1.5rem,2.8vw,2.4rem);color:rgba(255,255,255,.82);letter-spacing:.06em;margin-top:10px;line-height:1.2;}
.fleet-head h2 em{font-style:italic;color:rgba(255,255,255,.55);}
.fleet-head h2 strong{font-weight:600;background:var(--grad-gold);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.fleet-sub{font-family:'Inter',sans-serif;font-size:.84rem;font-weight:300;color:rgba(255,255,255,.5);line-height:1.8;max-width:560px;margin:14px auto 0;}
.fleet-shell{position:relative;}
.fleet-shell::before,.fleet-shell::after{content:'';position:absolute;top:0;bottom:0;width:160px;z-index:3;pointer-events:none;}
.fleet-shell::before{left:0;background:linear-gradient(to right,#0D0E0B 0%,transparent 100%);}
.fleet-shell::after{right:0;background:linear-gradient(to left,#0D0E0B 0%,transparent 100%);}
.fleet-viewport{overflow:hidden;position:relative;padding:90px 0 48px;transition:padding .5s var(--ease-out);}
.fleet-viewport::-webkit-scrollbar{height:5px;}
.fleet-viewport::-webkit-scrollbar-track{background:rgba(255,255,255,.05);}
.fleet-viewport::-webkit-scrollbar-thumb{background:rgba(196,154,66,.5);border-radius:3px;}
#fleet.fleet-open .fleet-viewport{overflow-x:auto;overflow-y:hidden;padding:118px 0 72px;cursor:grab;scrollbar-width:thin;scrollbar-color:rgba(196,154,66,.5) rgba(255,255,255,.05);}
#fleet.fleet-open .fleet-viewport.dragging{cursor:grabbing;user-select:none;}
.fleet-hint{position:absolute;left:50%;bottom:22px;transform:translateX(-50%) translateY(8px);font-family:'Montserrat',sans-serif;font-size:.54rem;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:rgba(217,180,104,.6);opacity:0;transition:opacity .4s var(--ease-out),transform .4s var(--ease-out);pointer-events:none;z-index:4;white-space:nowrap;}
#fleet.fleet-open .fleet-hint{opacity:1;transform:translateX(-50%) translateY(0);}
@media (prefers-reduced-motion:reduce){
.fleet-track{animation:none;}
.fleet-viewport{overflow-x:auto;}
}
.fleet-track{display:flex;align-items:flex-end;gap:72px;width:max-content;animation:fleet-scroll 42s linear infinite;will-change:transform;padding:0 36px;}
@keyframes fleet-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.fleet-drone{display:flex;flex-direction:column;align-items:center;position:relative;cursor:pointer;flex-shrink:0;transition:transform .4s var(--spring);}
.fleet-drone img{filter:drop-shadow(0 6px 28px rgba(104,196,181,.22)) brightness(1.04);transition:filter .5s var(--ease),transform .5s var(--spring);display:block;}
.fleet-drone.paused-hover img,.fleet-drone.pinned img{filter:drop-shadow(0 16px 48px rgba(196,154,66,.6)) brightness(1.16);transform:translateY(-14px) scale(1.1);}
.fleet-drone::after{content:'';display:block;width:80%;height:6px;background:radial-gradient(ellipse,rgba(104,196,181,.25) 0%,transparent 70%);margin-top:8px;transition:opacity .4s;}
.fleet-drone.paused-hover::after,.fleet-drone.pinned::after{opacity:.5;}
.fleet-drone-name{font-family:'Montserrat',sans-serif;font-size:.56rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.38);margin-top:10px;transition:color .3s;}
.fleet-drone.paused-hover .fleet-drone-name,.fleet-drone.pinned .fleet-drone-name{color:var(--gold2);}
/* Taurus special */
.fleet-drone.taurus.paused-hover img,.fleet-drone.taurus.pinned img{transform:translateY(-18px) scale(1.22);}
.taurus-cta{overflow:hidden;max-height:0;opacity:0;text-align:center;transition:max-height .45s var(--ease),opacity .4s var(--ease);pointer-events:none;margin-top:0;display:block;text-decoration:none;}
.fleet-drone.taurus.paused-hover .taurus-cta,.fleet-drone.taurus.pinned .taurus-cta{max-height:72px;opacity:1;margin-top:10px;pointer-events:auto;}
.taurus-cta-l1{font-family:'Montserrat',sans-serif;font-size:.5rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--gold2);margin-bottom:5px;}
.taurus-cta-l2{font-family:'Cormorant Garamond',serif;font-size:1rem;font-weight:300;font-style:italic;color:rgba(255,255,255,.82);white-space:nowrap;}
.fleet-tooltip{position:absolute;bottom:calc(100% + 20px);left:50%;transform:translateX(-50%) translateY(10px);background:rgba(13,14,11,.94);border:1px solid rgba(196,154,66,.28);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:4px;padding:14px 18px;min-width:200px;text-align:center;opacity:0;pointer-events:none;transition:opacity .3s var(--ease),transform .3s var(--ease);z-index:20;white-space:nowrap;}
.fleet-drone:hover .fleet-tooltip,.fleet-drone.pinned .fleet-tooltip{opacity:1;transform:translateX(-50%) translateY(0);}
.fleet-tooltip::after{content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);border:6px solid transparent;border-top-color:rgba(196,154,66,.28);}
.fleet-tooltip strong{display:block;font-family:'Montserrat',sans-serif;font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.9);margin-bottom:5px;}
.fleet-tooltip span{font-family:'Inter',sans-serif;font-size:.64rem;color:var(--gold2);line-height:1.55;display:block;}
/* SHARED */
.s-label{display:inline-block;font-family:'Montserrat',sans-serif;font-size:.6rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--teal2);padding:5px 12px;border:1px solid var(--bdr-t);border-radius:2px;background:rgba(104,196,181,.05);margin-bottom:14px;}
.s-title{font-family:'Cormorant Garamond',serif;font-size:clamp(1.75rem,3vw,2.65rem);font-weight:300;line-height:1.2;color:var(--c2);margin-bottom:16px;text-wrap:balance;}
/* Hierarchie ueber Schriftschnitt UND Farbe: die leichte Kursive tritt in --c4
zurueck, die Aussage steht in Antikgold davor.
Zwei Vorgaenger, damit niemand einen davon erneut probiert:
1. --grad (Verlauf) lag hier urspruenglich — sein Creme-Stopp (#EAE5D5) ist vom
Seitenhintergrund (#EAE6DC) nicht zu unterscheiden (1,01:1). Unbrauchbar.
2. --c2 (Schwarzgruen) ersetzte ihn und war lesbar, aber als Titelfarbe zu hart
und ohne Bezug zur Markenfarbe.
Jetzt --gold-deep: derselbe Goldton wie das Markengold, nur tragfaehig auf
Creme (4,47:1 / 4,05:1 — Begruendung und Messwerte oben an der Variablen).
-webkit-text-fill-color muss mit, es schlaegt color. */
.s-title em{font-style:italic;font-weight:300;color:var(--c4);-webkit-text-fill-color:var(--c4);}
.s-title strong{font-weight:600;color:var(--gold-deep);-webkit-text-fill-color:var(--gold-deep);}
/* Gold als sparsamer Akzent statt als Schriftfarbe. Standard ist mittig, weil
fast alle Sektionstitel zentriert sind — so passt eine neue Sektion von
selbst. Nur die beiden linksbuendigen Spalten steigen aus. CSS kann nicht auf
text-align reagieren, daher die kurze Ausnahmeliste statt einer langen Liste
aller zentrierten Container (.s-head, .contact-in, .ig-in, ...). */
.s-title::after{content:'';display:block;width:44px;height:1px;background:var(--grad-gold);margin:18px auto 0;opacity:.8;}
.about-body .s-title::after,.brands-l .s-title::after{margin-left:0;}
.s-head{text-align:center;max-width:550px;margin:0 auto 52px;padding:0 30px;}
.s-head p{font-size:.88rem;color:var(--c4);line-height:1.84;font-weight:300;margin-top:10px;}
.reveal{opacity:0;transform:translateY(28px);transition:opacity .75s var(--ease),transform .75s var(--ease);}
.reveal.in{opacity:1;transform:none;}
.d1{transition-delay:.1s}.d2{transition-delay:.2s}.d3{transition-delay:.3s}
/* ABOUT */
#about{padding:120px 0;background:var(--c0);}
.about-in{max-width:1320px;margin:0 auto;padding:0 64px;display:grid;grid-template-columns:1.9fr 1fr;gap:72px;align-items:center;}
.about-img{position:relative;}
.about-frame{position:absolute;inset:-12px 12px 12px -12px;border:1px solid var(--bdr);border-radius:8px;z-index:-1;}
/* Natürliches Bildformat — kein Zuschnitt. Wird die Bilddatei ersetzt, passt sich die Höhe automatisch an. */
.about-photo{width:100%;height:auto;display:block;border-radius:6px;box-shadow:0 36px 100px rgba(18,22,15,.16);transition:transform .7s var(--ease);}
.about-img:hover .about-photo{transform:scale(1.012);}
.about-badge{position:absolute;bottom:20px;right:-14px;z-index:3;background:rgba(13,14,11,.92);border:1px solid var(--bdr);border-radius:4px;padding:10px 14px;display:flex;flex-direction:column;gap:6px;align-items:center;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);}
.badge-flags{display:flex;gap:8px;align-items:center;}
.badge-flag{display:flex;flex-direction:column;align-items:center;gap:3px;}
.badge-flags svg{width:26px;height:17px;border-radius:2px;overflow:hidden;}
.flag-lbl{font-family:'Montserrat',sans-serif;font-size:.46rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.5);}
.badge-sep{width:1px;height:28px;background:var(--bdr);}
.badge-txt{font-family:'Montserrat',sans-serif;font-size:.46rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold2);}
.about-body > p{font-size:.92rem;line-height:1.9;color:var(--c4);font-weight:300;margin-bottom:16px;}
.about-rows{margin-top:28px;}
.about-row{display:flex;align-items:center;gap:14px;padding:13px 0;border-top:1px solid rgba(196,154,66,.08);transition:background .3s;}
.about-row:last-child{border-bottom:1px solid rgba(196,154,66,.08);}
.about-row:hover{background:var(--gold-pale);}
.row-ic{width:38px;height:38px;flex-shrink:0;background:var(--gold-pale);border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:.95rem;transition:background .3s;color:var(--c2);}
.row-ic svg{width:18px;height:18px;}
.about-row:hover .row-ic{background:rgba(196,154,66,.18);}
.about-row strong{display:block;font-size:.84rem;font-weight:600;color:var(--c2);}
.about-row span{font-size:.78rem;color:var(--c4);}
/* SERVICES — auf der Startseite seit Sitzung 17 keine Kachelsektion mehr, sondern eine
einzige vollflaechig klickbare Ueberschrift, die auf den Hub /leistungen/ fuehrt.
ACHTUNG fuer den naechsten Durchgang: Von den .svc-*-Regeln weiter unten wird nur
noch .svc-more benutzt (18-mal, in leistungen/, journal/ und kontakt/). .svc-in,
.svc-grid, .svc-card samt .featured, .svc-ic und .svc-usp haben nach dem Entfernen
des Kachelgitters KEINEN Treffer mehr im Markup — nachgezaehlt, nicht vermutet. Sie
stehen vorerst noch da, weil an drei Stellen (353, 827, 909) Kommentare und
Media-Queries auf sie verweisen; das saubere Ausraeumen ist ein eigener Schritt. */
#services{
/* Bewusst schlichtes Blocklayout wie #why (651), NICHT display:grid: ein absolut
positioniertes Kind eines Grid-Containers bekommt trotz inset:0 nur seine
Shrink-to-fit-Breite — .gwarp mass dadurch 0 px breit, das Sternenfeld blieb aus.
Zentriert wird ueber text-align in .svc-hero-link, dafuer braucht es kein Grid. */
position:relative;overflow:hidden;
/* Aussenabstand bewusst klein und der Rest als Polsterung IM Link (unten): so ist
fast das ganze dunkle Band die Klickflaeche, nicht nur die Schriftzeile. */
padding:40px 0;
/* Sehr weiches Ausfaden nach --c0, dem Farbwert der Nachbarsektionen #why (651)
und #portfolio (356). Der erste Anlauf blendete auf 16 % der Sektionshoehe ab,
rund 84 px — das las als Kante, nicht als Uebergang. Jetzt sind es 34 % je Seite
und damit rund 220 px.
Die beiden Zwischenstopps sind kein Zierrat: eine reine Zweipunkt-Interpolation
von #F4F1EB nach #0D0E0B haelt sich oben zu lange hell und kippt dann sichtbar
weg. Der Stopp bei 12 % liegt bewusst HELLER als die lineare Mischung (#B4B0A8
statt rund #A3A19B), der bei 23 % etwas dunkler — zusammen ergibt das die
Ease-Kurve, die den Uebergang weich macht. Die Mitte bleibt --c2, ohne die weder
die weissen noch die goldenen Partikel der beiden Canvas-Effekte lesen. */
background:linear-gradient(to bottom,
var(--c0) 0%,#B4B0A8 12%,#4A4A44 23%,var(--c2) 34%,
var(--c2) 66%,#4A4A44 77%,#B4B0A8 88%,var(--c0) 100%);
}
/* Mount-Punkt des Sternenfelds (public/assets/glitter-warp.js), aufgebaut wie
.wavearcs (671): Canvas kommt aus dem JS, Tunables stehen hier als Variablen. */
.gwarp{
--gwarp-farbe1:#FFFFFF;
--gwarp-farbe2:#D9B468; /* --gold2 */
--gwarp-farbe3:#C49A42; /* --gold */
--gwarp-deckkraft:.85;
position:absolute;inset:0;z-index:0;pointer-events:none;
/* Laeuft dem Verlauf der Sektion etwas voraus (voll ab 30 % statt 34 %), damit die
Sterne bereits weg sind, wo der Grund aufhellt — sonst stehen weisse Punkte auf
hellem Creme und schneiden sichtbar ab. */
-webkit-mask-image:linear-gradient(to bottom,transparent 2%,#000 30%,#000 70%,transparent 98%);
mask-image:linear-gradient(to bottom,transparent 2%,#000 30%,#000 70%,transparent 98%);
}
.gwarp-canvas{display:block;width:100%;height:100%;}
/* Die Klickflaeche ist das , nicht ein JS-Handler: darf Flow-Content
enthalten, damit bleiben Tastaturbedienung, Mittelklick und Kontextmenue heil. */
/* Die grosszuegige Polsterung ist funktional, nicht dekorativ: sie liefert erstens
die Klickflaeche und zweitens den Raum, in dem particle-text.js sein Canvas ueber
die Schriftbox hinaus aufzieht (dort fliegen die Partikel ein). Zu knapp bemessen
schnitt der Effekt oben und unten ab. */
.svc-hero-link{position:relative;z-index:1;display:block;text-align:center;
padding:150px 24px;text-decoration:none;}
.svc-hero .s-label{color:var(--gold2);} /* --teal2 der Grundregel liest nicht auf --c2 */
.svc-hero-title{
/* Montserrat statt der sonst fuer Ueberschriften genutzten Cormorant Garamond:
der Partikeleffekt tastet die Buchstabenflaeche ab, und die Haarstriche und
Serifen der Garamond zerfallen dabei in unleserliche Punktwolken. Montserrat
liegt als Variable Font 100–900 bereits selbstgehostet vor (fonts.css). */
font-family:'Montserrat',sans-serif;font-weight:900;
/* Nachgemessen statt geschaetzt: "LEISTUNGEN" ist in Montserrat 900 mit dieser
Laufweite 6,96-mal so breit wie die Schriftgroesse. Bei 375 px Viewport ergab
das erste clamp(52px,11vw,148px) 52 px -> 362 px Text in einer 327 px breiten
Box, das Wort wurde von overflow:hidden abgeschnitten. Der vw-Term zieht die
48 px Polsterung von .svc-hero-link ab und laesst rund 8 % Reserve fuer laengere
Uebersetzungen; die Untergrenze greift erst unter 277 px Viewport.
Obergrenze von 148 auf 112 px zurueckgenommen: 148 px wirkten wuchtig und liessen
dem Partikeleffekt zu wenig Luft im Verhaeltnis zur Zeilenhoehe. */
font-size:clamp(28px,calc(11vw - 6px),112px);line-height:1;
white-space:nowrap;
letter-spacing:.02em;text-transform:uppercase;
color:#fff;margin:0;
--ptext-farben:#FFFFFF,#D9B468,#FFFFFF,#C49A42; /* Weiss doppelt: Gold funkelt nur dazwischen */
}
/* Setzt ausschliesslich particle-text.js, und nur wenn das Canvas wirklich steht.
visibility statt display: der Text behaelt seinen Platz, das Canvas liegt exakt
auf seiner Box. Ohne JS und unter reduzierter Bewegung bleibt der Text sichtbar. */
.svc-hero-title.ptext-off{visibility:hidden;}
.ptext-canvas{position:absolute;display:block;pointer-events:none;}
.svc-hero-more{display:inline-block;margin-top:26px;font-family:'Montserrat',sans-serif;
font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
color:var(--gold2);transition:color .3s var(--ease);}
.svc-hero-link:hover .svc-hero-more{color:#fff;}
.svc-hero-link:focus-visible{outline:2px solid var(--gold2);outline-offset:6px;border-radius:4px;}
/* Die Polsterung des Desktops (40 + 150 je Seite) ergab auf 375 px ein 635 px hohes
Band fuer ein einzelnes Wort — mehr als drei Viertel Leere auf einem 812-px-Schirm.
Der Anflugraum des Partikelfelds skaliert mit der Schriftgroesse (1,1 x Boxhoehe,
hier rund 39 px) und braucht die 150 px dort gar nicht. */
@media(max-width:899.98px){
#services{padding:24px 0;}
.svc-hero-link{padding:90px 24px;}
}
.svc-in{max-width:1180px;margin:0 auto;padding:0 64px;}
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
/* Ruhe-Schatten (Sitzung 14): #services liegt auf --c1 (#EAE6DC), die Kachel auf
--paper — der Helligkeitsunterschied allein traegt nicht. Geometrie ist die
verkleinerte Hausform (vgl. .why-card 0 14px 44px, --shadow 0 24px 80px): weit
gestreut, sehr transparent, damit er auf dem hellen Beige nicht schmutzig wirkt.
Farbe = dieselbe Tinte wie der Hover-Schatten, aber Alpha .05 statt .09 und 22
statt 60 px Streuung, damit der Hover deutlich staerker bleibt.
Die zweite Ebene mit Alpha 0 ist unsichtbar und nur dafuer da, dass :hover
(Schatten + goldener 1-px-Ring) ebenenweise sauber interpoliert.
ACHTUNG, bewusst NICHT geaendert: transform bleibt aus der Transition-Liste
heraus. Die Kacheln tragen .tilt-card, und app.js setzt bei mousemove einen
INLINE-transform (perspective + rotate + translateY(-6px)). Stuende transform
hier in der Liste, wuerde der Tilt dem Cursor 400 ms hinterherlaufen statt ihm
1:1 zu folgen. Aus demselben Grund gibt es hier keinen CSS-Hover-Lift: der
Inline-Style schlaegt jede Regel, die Kachel hebt sich bereits um 6 px. */
.svc-card{background:var(--paper);border-radius:4px;padding:36px 26px;border:1px solid var(--bdr);box-shadow:0 6px 22px rgba(18,22,15,.05),0 0 0 1px rgba(196,154,66,0);transition:box-shadow .4s,border-color .4s;position:relative;overflow:hidden;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transform-style:preserve-3d;}
.svc-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--grad-gold);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease);}
.svc-card:hover{box-shadow:0 20px 60px rgba(18,22,15,.09),0 0 0 1px var(--gold);border-color:var(--gold);}
.svc-card:hover::before{transform:scaleX(1);}
.svc-ic{width:46px;height:46px;border-radius:6px;background:var(--gold-pale);display:flex;align-items:center;justify-content:center;font-size:1.3rem;margin-bottom:18px;transition:background .35s,transform .35s;color:var(--c2);}
.svc-ic svg{width:22px;height:22px;}
.svc-card:hover .svc-ic{background:rgba(196,154,66,.18);transform:scale(1.08);}
.svc-card h3{font-family:'Montserrat',sans-serif;font-size:.86rem;font-weight:600;color:var(--c2);margin-bottom:8px;letter-spacing:.02em;}
.svc-card p{font-size:.8rem;color:var(--c4);line-height:1.72;font-weight:300;}
/* grid-column:span 2 stand hier, bis die 9. Kachel (Architekturfotografie) dazukam.
Bei 8 Kacheln ging .svc-grid (3 Spalten) exakt auf: 7x1 + 1x2 = 9 Einheiten = 3
volle Reihen. Mit 9 reguraeren Kacheln waeren es 10 Einheiten gewesen — eine
vierte Reihe mit einer einzelnen Kachel. Die breite Sonderstellung ist deshalb
entfallen; FPV bleibt weiterhin optisch hervorgehoben durch Rahmenfarbe und
Verlaufshintergrund, nur nicht mehr durch doppelte Breite. */
.svc-card.featured{border-color:rgba(196,154,66,.45);background:linear-gradient(135deg,rgba(196,154,66,.07) 0%,rgba(196,154,66,0) 55%),var(--paper);}
.svc-card.featured p{max-width:560px;}
/* Reduced Motion (Sitzung 14): hier steht bewusst KEINE Regel fuer .svc-card.
Der Ruhe-Schatten ist keine Bewegung und bleibt richtigerweise stehen. Die
einzige Bewegung der Kachel ist der Tilt aus app.js — der laeuft ueber einen
Inline-transform und laesst sich per CSS nicht abschalten. Das gehoert in
app.js (matchMedia-Guard) und ist als offener Punkt vermerkt. */
.svc-more{display:inline-block;margin-top:16px;font-family:'Montserrat',sans-serif;font-size:.64rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);border-bottom:1px solid rgba(196,154,66,.4);padding-bottom:3px;transition:color .3s,border-color .3s;}
.svc-more:hover{color:var(--c2);border-color:var(--c2);}
.svc-usp{display:inline-block;font-family:'Montserrat',sans-serif;font-size:.54rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);border:1px solid rgba(196,154,66,.35);padding:4px 10px;border-radius:2px;background:var(--gold-pale);margin-bottom:14px;}
/* BTS */
#bts{padding:120px 0;background:var(--c0);}
.bts-in{max-width:1180px;margin:0 auto;padding:0 64px;}
/* Masonry ueber CSS-Spalten: jedes Bild behaelt sein Originalformat (das Quadrat
2048×2048 neben den Hochformaten 1536×2752), ohne handgerechnete fr-Werte. */
.bts-mosaic{columns:4;column-gap:10px;}
.bts-cell{position:relative;border-radius:8px;overflow:hidden;background:#0D0E0B;box-shadow:var(--shadow);cursor:pointer;break-inside:avoid;margin-bottom:10px;}
.bts-cell img{width:100%;height:auto;display:block;transition:transform .7s var(--ease),filter .5s;}
.bts-cell:hover img{transform:scale(1.02);filter:brightness(.9) contrast(.98) saturate(.9);}
.bts-cell-lbl{position:absolute;bottom:0;left:0;right:0;padding:16px 20px 18px;background:linear-gradient(to top,rgba(13,14,11,.80) 0%,transparent 100%);color:rgba(255,255,255,.85);font-size:.6rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;font-family:'Montserrat',sans-serif;}
.bts-cell-lbl em{display:block;font-style:normal;font-size:.52rem;font-weight:400;color:var(--gold2);letter-spacing:.12em;margin-top:2px;}
/* EQUIPMENT SLIDER */
.equip-slider{position:relative;margin-top:48px;border-radius:12px;overflow:hidden;background:#b8c4b0;box-shadow:0 32px 90px rgba(18,22,15,.18),0 0 0 1px rgba(196,154,66,.12);cursor:pointer;user-select:none;}
.equip-slider-track{position:relative;width:100%;}
.equip-slide{position:absolute;inset:0;opacity:0;transition:opacity .7s var(--ease);pointer-events:none;}
.equip-slide.active{opacity:1;position:relative;pointer-events:auto;}
.equip-slide img{width:100%;height:auto;display:block;pointer-events:none;}
.equip-slide-lbl{position:absolute;bottom:0;left:0;right:0;padding:28px 36px 32px;background:linear-gradient(to top,rgba(13,14,11,.75) 0%,rgba(13,14,11,.2) 60%,transparent 100%);}
.equip-slide-name{font-family:'Cormorant Garamond',serif;font-size:clamp(1.4rem,2.5vw,2rem);font-weight:300;color:#fff;letter-spacing:.04em;margin-bottom:4px;}
.equip-slide-sub{font-family:'Montserrat',sans-serif;font-size:.58rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--gold2);}
.equip-arrow{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;background:rgba(13,14,11,.45);border:1px solid rgba(196,154,66,.3);color:rgba(255,255,255,.8);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .3s,border-color .3s,transform .3s;z-index:4;backdrop-filter:blur(8px);}
.equip-arrow:hover{background:rgba(196,154,66,.7);border-color:var(--gold);transform:translateY(-50%) scale(1.08);}
.equip-arrow svg{width:20px;height:20px;stroke:currentColor;stroke-width:2;fill:none;}
.equip-prev{left:18px;}.equip-next{right:18px;}
.equip-dots{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);display:flex;gap:8px;z-index:4;}
.equip-dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.35);transition:background .3s,transform .3s;cursor:pointer;}
.equip-dot.active{background:var(--gold);transform:scale(1.4);}
/* HOW I WORK */
#how{padding:100px 0;background:var(--c1);}
.how-in{max-width:1180px;margin:0 auto;padding:0 64px;}
.how-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:48px;}
/* Ruhe-Schatten (Sitzung 15), einebenig — Begruendung der Geometrie und des
Weglassens der Leerebene siehe .why-card.
Der Hover musste dafuer mit angehoben werden: er stand auf
0 4px 24px var(--gold-pale), also Gold bei Alpha .10 — auf dem hellen Beige
kaum sichtbar und ungefaehr so stark wie der neue Ruhe-Schatten. Der
Hover-Effekt waere damit verschwunden. Jetzt dieselbe Tinte und dasselbe
Alpha .09 wie .svc-card:hover, Geometrie zwischen .why-card:hover (14/44) und
.svc-card:hover (20/60). Einebenig wie zuvor, border-color bleibt.
Derselbe Wert steht bei .tst-card und .b-tile — aus vier gewachsenen
Einzelwerten werden damit zwei Hover-Stufen im Haus. */
.how-step{padding:32px 24px;border:1px solid var(--bdr);border-radius:4px;background:var(--paper);box-shadow:0 6px 22px rgba(18,22,15,.05);position:relative;transition:border-color .3s,box-shadow .3s;}
.how-step:hover{border-color:var(--gold);box-shadow:0 16px 48px rgba(18,22,15,.09);}
.how-num{font-family:'Cormorant Garamond',serif;font-size:3.2rem;font-weight:300;color:var(--gold);opacity:.35;line-height:1;margin-bottom:16px;}
.how-title{font-family:'Cormorant Garamond',serif;font-size:1.25rem;font-weight:500;color:var(--c2);margin-bottom:10px;letter-spacing:.02em;}
.how-desc{font-family:'Inter',sans-serif;font-size:.8rem;color:var(--c4);line-height:1.82;font-weight:300;}
.how-solo{display:inline-block;margin-top:14px;font-family:'Montserrat',sans-serif;font-size:.52rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);border:1px solid rgba(196,154,66,.3);border-radius:2px;padding:3px 9px;}
/* TESTIMONIALS */
#testimonials{padding:100px 0;background:var(--c1);}
.tst-in{max-width:1180px;margin:0 auto;padding:0 64px;}
/* Slider: Einzel-Slides, zwei je Ansicht auf Desktop, eine ab 900px abwaerts.
--tst-per-view haelt beides zusammen — das JS liest den Wert aus, statt ihn
aus gemessenen Breiten zu erraten (das war vom Layout-Zeitpunkt abhaengig und
ergab beim ersten Lauf eine falsche Seitenzahl). CSS bleibt die einzige
Stelle, an der der Umbruchpunkt steht. */
:root{--tst-per-view:2;}
.tst-slider{position:relative;margin-top:48px;}
/* Kein Innenabstand: clientWidth ist damit exakt die sichtbare Breite, worauf
sich die Endanschlag-Berechnung im JS stuetzt. */
.tst-viewport{overflow:hidden;}
.tst-track{display:flex;gap:24px;align-items:start;transition:transform .6s var(--ease-out);will-change:transform;}
.tst-slide{flex:0 0 calc((100% - 24px) / 2);}
/* Ruhe-Schatten + angehobener Hover (Sitzung 15), Werte und Begruendung wie
.how-step — Zeile fuer Zeile derselbe Fall, dieselbe Sektionsfarbe --c1.
Das eigene overflow:hidden clippt nur Kindelemente (das Anfuehrungszeichen in
::before), nicht den eigenen box-shadow. ACHTUNG dagegen der Slider-Rahmen:
.tst-viewport traegt overflow:hidden und darf laut Kommentar dort keinen
Innenabstand bekommen (clientWidth = Endanschlag-Rechnung im JS). Der
Ruhe-Schatten wird an der Viewport-Unterkante daher beschnitten — das galt
schon fuer den bisherigen Hover-Schatten und faellt jetzt nur staerker auf.
Eine Abhilfe waere moeglich gewesen (padding-bottom + negatives margin-bottom
auf .tst-viewport, beides ohne Einfluss auf clientWidth, die JS-Rechnung waere
intakt geblieben). ENTSCHIEDEN in Sitzung 16: bleibt so. Das Clipping galt
schon fuer den bisherigen Hover-Schatten, es ist also kein neuer Zustand,
sondern ein bekannter — und eine zusaetzliche Regel an einem Selektor, dessen
Geometrie das JS ausliest, ist den Zugewinn nicht wert. Nicht erneut
aufwerfen; der offene Punkt ist geschlossen, nicht vertagt. */
.tst-card{background:var(--paper);border:1px solid var(--bdr);border-radius:4px;padding:40px 36px;box-shadow:0 6px 22px rgba(18,22,15,.05);position:relative;overflow:hidden;transition:border-color .3s,box-shadow .3s;}
.tst-card:hover{border-color:var(--gold);box-shadow:0 16px 48px rgba(18,22,15,.09);}
.tst-card::before{content:'\201C';position:absolute;top:12px;left:24px;font-family:'Cormorant Garamond',serif;font-size:6rem;color:var(--gold);opacity:.1;line-height:1;pointer-events:none;}
.tst-stars{color:var(--gold);font-size:.85rem;letter-spacing:.18em;margin-bottom:20px;}
.tst-quote{font-family:'Cormorant Garamond',serif;font-size:1.12rem;font-weight:300;color:var(--c2);line-height:1.85;font-style:italic;margin-bottom:28px;}
.tst-author{font-family:'Montserrat',sans-serif;font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--c2);}
.tst-role{font-family:'Inter',sans-serif;font-size:.68rem;font-weight:300;color:var(--c4);margin-top:4px;}
/* Volltext ist im DOM vorhanden (uebersetzbar + von Suchmaschinen lesbar) und
wird nur ausgeblendet — kein Nachladen beim Aufklappen. */
.tst-full{display:none;}
.tst-card.open .tst-short{display:none;}
.tst-card.open .tst-full{display:block;}
.tst-full p + p{margin-top:14px;}
.tst-more{background:none;border:none;padding:0 0 5px;margin-bottom:22px;font-family:'Montserrat',sans-serif;font-size:.56rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--c2);border-bottom:1px solid var(--gold);cursor:pointer;transition:color .3s,border-color .3s;}
.tst-more:hover{color:var(--gold);border-color:var(--c2);}
.tst-more:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}
/* Steuerung: Pfeile ausserhalb der Karten, Dots darunter — bewusst KEINE
Auto-Rotation, ein wegspringendes Zitat waere beim Lesen stoerend. */
.tst-nav{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:32px;}
.tst-arrow{width:44px;height:44px;border-radius:50%;background:transparent;border:1px solid var(--bdr);color:var(--c4);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .3s,border-color .3s,color .3s,transform .3s;}
.tst-arrow:hover:not(:disabled){background:var(--gold);border-color:var(--gold);color:#fff;transform:scale(1.06);}
.tst-arrow:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}
.tst-arrow:disabled{opacity:.3;cursor:default;}
.tst-arrow svg{width:18px;height:18px;stroke:currentColor;stroke-width:2;fill:none;}
.tst-dots{display:flex;gap:8px;}
.tst-dot{width:7px;height:7px;padding:0;border:none;border-radius:50%;background:rgba(92,103,81,.28);transition:background .3s,transform .3s;cursor:pointer;}
.tst-dot.active{background:var(--gold);transform:scale(1.4);}
.tst-dot:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}
/* PORTFOLIO */
#portfolio{padding:120px 0;background:var(--c0);}
.pf-in{max-width:1240px;margin:0 auto;padding:0 64px;}
/* Video-Ueberschrift des Abschnitts (public/assets/video-text.js). Der Abstand nach
unten ist der der abgeloesten .s-head (app.css:177), damit der Rhythmus zu den
Regionsbloecken bleibt. position:relative an beiden: das Video wird absolut in
.pf-vhead-link gehaengt, das ist der offsetParent, den das Script ausmisst. */
.pf-vhead{position:relative;margin:0 auto 52px;text-align:center;}
/* Ohne seitliche Polsterung, anders als das Gegenstueck .svc-hero-link: dort ist sie
Klickflaeche und Anflugraum der Partikel, hier haette sie nur die Breite gekostet,
die das Wort braucht. Die Klickflaeche liefert schon die Zeilenhoehe der 128 px
grossen Schrift. */
.pf-vhead-link{position:relative;display:block;text-decoration:none;}
.pf-vtext{
/* Montserrat 900 statt der sonst fuer Ueberschriften genutzten Cormorant Garamond,
gleiche Begruendung wie bei .svc-hero-title: die Maske zeigt nur, was innerhalb
der Buchstabenflaeche liegt — von einem Video ist in den Haarstrichen und
Serifen einer Garamond schlicht nichts zu erkennen. */
font-family:'Montserrat',sans-serif;font-weight:900;
/* Nachgemessen statt geschaetzt, im Browser bei geladener Montserrat 900 ueber eine
Range um den Textknoten: "PORTFOLIO" ist mit dieser Laufweite 6,462-mal so breit
wie die Schriftgroesse (827,1 px bei 128 px). Der vw-Term muss gegen ZWEI
Innenabstaende bestehen, .pf-in schaltet bei 1100 px von 64 auf 32 px (app.css:969):
bis 1100 px nutzbar = vw - 64, erlaubt also (vw - 64) / 6,462
ab 1100 px nutzbar = min(1240,vw) - 128
15vw - 12px bleibt in beiden Baendern darunter: 375 px -> 44,3 px Schrift -> 286 px
Wort in 311 px nutzbarer Breite (8 % Reserve), 933 px -> Obergrenze greift, dort
stehen 827 px Wort in 869 px. Ab 1240 px ist .pf-in 1112 px breit, das Wort 827 px.
Erst unter 250 px Viewport gewinnt die Untergrenze und das Wort wuerde anstossen.
white-space:nowrap macht jeden zu grossen Wert sonst sofort zum Ueberlauf — und
ein Umbruch waere hier fatal, die Maske ist einzeilig. */
font-size:clamp(30px,calc(15vw - 12px),128px);line-height:1;
white-space:nowrap;letter-spacing:.02em;text-transform:uppercase;margin:0;
/* Der Zustand ohne Video: dieselbe Goldfuellung wie .s-title strong auf dunklem
Grund (app.css:636). Ohne JS, ohne clip-path-Unterstuetzung und bei reduzierter
Bewegung bleibt es dabei — der Ausfall ist unsichtbar statt fatal. */
background:var(--grad-gold);-webkit-background-clip:text;
-webkit-text-fill-color:transparent;background-clip:text;}
/* Setzt ausschliesslich video-text.js, und nur wenn das Video wirklich steht.
Anders als .ptext-off (visibility:hidden, app.css:285) wird hier nur die Farbe
durchsichtig: visibility:hidden nimmt den Text aus dem Accessibility-Tree, und
das waere hier ausgerechnet der zugaengliche Name des Links. Die Goldfuellung
muss dabei mit abgeschaltet werden, sonst bliebe der Verlauf ueber dem Video. */
.pf-vtext.vtext-off{background:none;color:transparent;-webkit-text-fill-color:transparent;}
.vtext-video{position:absolute;display:block;object-fit:cover;pointer-events:none;}
/* Liegt deckungsgleich ueber dem Video und traegt die Pixel, die unter dem Zeiger
aus den Buchstaben springen. In Ruhe ist es leer. pointer-events:none ist Pflicht:
es liegt ueber dem Link und wuerde sonst jeden Klick auf /referenzen/ schlucken. */
.vtext-canvas{position:absolute;display:block;pointer-events:none;}
.pf-vhead-more{display:inline-block;margin-top:22px;font-family:'Montserrat',sans-serif;
font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
color:var(--gold-deep);transition:color .3s var(--ease);}
.pf-vhead-link:hover .pf-vhead-more{color:var(--c2);}
.pf-vhead-link:focus-visible{outline:2px solid var(--gold);outline-offset:6px;border-radius:4px;}
.pf-region{margin-bottom:64px;}
.pf-region-label{display:flex;align-items:center;gap:16px;margin-bottom:32px;padding-bottom:16px;border-bottom:1px solid var(--bdr);}
.pf-region-flag{font-size:1.4rem;}
.pf-region-name{font-family:'Cormorant Garamond',serif;font-size:1.5rem;font-weight:300;color:var(--c2);letter-spacing:.04em;}
.pf-region-sub{font-family:'Montserrat',sans-serif;font-size:.56rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-left:auto;}
.pf-project{margin-bottom:48px;}
.pf-project:last-child{margin-bottom:0;}
.pf-proj-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid rgba(196,154,66,.08);}
.pf-proj-name{font-family:'Cormorant Garamond',serif;font-size:1.9rem;font-weight:300;color:var(--c2);letter-spacing:.04em;}
.pf-proj-cat{font-family:'Montserrat',sans-serif;font-size:.56rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);}
.pf-video-grid{display:grid;gap:10px;}
.pf-video-grid.cols-3{grid-template-columns:repeat(3,1fr);}
.pf-video-grid.cols-2{grid-template-columns:repeat(2,1fr);}
.pf-video-grid.cols-1{grid-template-columns:1fr;max-width:400px;}
.pf-video-grid.cols-4{grid-template-columns:repeat(4,1fr);}
/* Sekundaerreihe einer Region: die uebrigen Projekte, Hochformat */
.pf-video-grid.pf-secondary{grid-template-columns:repeat(3,1fr);gap:14px;}
/* SIGNATURE-PROJEKT — Hochformat-Kachel + redaktionelles Datenblatt */
.pf-signature{display:grid;grid-template-columns:minmax(0,338px) 1fr;gap:60px;align-items:center;margin-bottom:46px;}
.pf-signature.hidden{display:none;}
.pf-sig-badge{display:inline-flex;align-items:center;gap:10px;font-family:'Montserrat',sans-serif;font-size:.52rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:16px;}
.pf-sig-badge::before{content:'';width:28px;height:1px;background:var(--gold);}
.pf-sig-name{font-family:'Cormorant Garamond',serif;font-size:2.5rem;font-weight:300;color:var(--c2);letter-spacing:.02em;line-height:1.08;margin-bottom:7px;}
.pf-sig-loc{font-family:'Montserrat',sans-serif;font-size:.56rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--c4);margin-bottom:28px;}
.pf-specs{margin:0 0 28px;}
.pf-spec{display:grid;grid-template-columns:136px 1fr;gap:22px;padding:13px 0;border-top:1px solid var(--bdr);}
.pf-spec:last-child{border-bottom:1px solid var(--bdr);}
.pf-spec dt{font-family:'Montserrat',sans-serif;font-size:.52rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);padding-top:4px;}
.pf-spec dd{font-family:'Inter',sans-serif;font-size:.82rem;font-weight:300;line-height:1.65;color:var(--c3);margin:0;}
.pf-sig-tile{width:100%;}
.pf-sig-tile .pf-yt-item{box-shadow:0 26px 70px rgba(18,22,15,.2);}
.pf-sig-cta{font-family:'Montserrat',sans-serif;font-size:.56rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--c2);background:none;border:none;border-bottom:1px solid var(--gold);padding:0 0 7px;cursor:pointer;transition:color .3s,border-color .3s;}
.pf-sig-cta:hover{color:var(--gold);border-color:var(--c2);}
.pf-yt-item{position:relative;aspect-ratio:9/16;border-radius:6px;overflow:hidden;background:#0D0E0B;cursor:pointer;transition:box-shadow .4s,transform .4s;}
.pf-yt-item.hidden{display:none;}
.pf-yt-cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:38px 20px 16px;background:linear-gradient(to top,rgba(13,14,11,.93) 0%,rgba(13,14,11,.45) 55%,transparent 100%);pointer-events:none;}
.pf-yt-cap strong{display:block;font-family:'Cormorant Garamond',serif;font-size:1.3rem;font-weight:400;color:#fff;letter-spacing:.03em;line-height:1.15;}
.pf-yt-cap span{display:block;margin-top:4px;font-family:'Montserrat',sans-serif;font-size:.54rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--gold2);}
.pf-yt-item:hover{box-shadow:0 14px 50px rgba(18,22,15,.28),0 0 0 2px var(--gold);transform:translateY(-3px);}
/* Unscharfer Fuellhintergrund: faengt abweichende Thumbnail-Formate auf (9:16 vs. 16:9-Fallback) */
.pf-yt-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;filter:blur(26px) saturate(.65) brightness(.45);transform:scale(1.18);pointer-events:none;}
.pf-yt-thumb{position:relative;z-index:1;width:100%;height:100%;object-fit:contain;display:block;transition:transform .55s var(--ease),filter .4s;}
.pf-yt-item:hover .pf-yt-thumb{transform:scale(1.04);filter:brightness(.72);}
.pf-yt-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(to top,rgba(13,14,11,.6) 0%,transparent 55%);transition:background .3s;}
.pf-yt-item:hover .pf-yt-play{background:linear-gradient(to top,rgba(13,14,11,.75) 0%,transparent 55%);}
.pf-yt-play-btn{width:54px;height:54px;border-radius:50%;background:rgba(196,154,66,.88);display:flex;align-items:center;justify-content:center;transition:transform .35s var(--spring),background .3s;box-shadow:0 6px 28px rgba(0,0,0,.5);}
.pf-yt-item:hover .pf-yt-play-btn{transform:scale(1.14);background:var(--gold);}
.pf-yt-play-btn svg{width:22px;height:22px;fill:#fff;margin-left:4px;}
/* Lightbox */
.yt-lb{position:fixed;inset:0;z-index:900;display:flex;align-items:center;justify-content:center;background:rgba(13,14,11,.93);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);opacity:0;pointer-events:none;transition:opacity .35s var(--ease);}
.yt-lb.open{opacity:1;pointer-events:all;}
.yt-lb-wrap{position:relative;width:min(390px,88vw,calc(86vh * 9 / 16));aspect-ratio:9/16;max-height:86vh;border-radius:10px;overflow:hidden;box-shadow:0 40px 120px rgba(0,0,0,.65),0 0 0 1px rgba(196,154,66,.25);}
.yt-lb-wrap iframe{width:100%;height:100%;border:none;display:block;}
.yt-lb-wrap.failed iframe{visibility:hidden;}
/* Ladezustand */
.yt-lb-spin{position:absolute;top:50%;left:50%;width:34px;height:34px;margin:-17px 0 0 -17px;border:1.5px solid rgba(196,154,66,.22);border-top-color:var(--gold);border-radius:50%;animation:ytspin .8s linear infinite;z-index:2;}
@keyframes ytspin{to{transform:rotate(360deg);}}
.yt-lb-wrap.ready .yt-lb-spin,.yt-lb-wrap.failed .yt-lb-spin{display:none;}
/* Fallback, wenn YouTube die Einbettung verweigert (Fehler 101/150) */
.yt-lb-fb{position:absolute;inset:0;z-index:3;display:none;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:38px 28px;overflow:hidden;}
.yt-lb-wrap.failed .yt-lb-fb{display:flex;}
.yt-lb-fb-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(22px) brightness(.3) saturate(.55);z-index:-1;}
.yt-lb-fb h4{font-family:'Cormorant Garamond',serif;font-size:1.6rem;font-weight:300;color:#fff;letter-spacing:.02em;line-height:1.15;margin-bottom:13px;}
.yt-lb-fb p{font-family:'Inter',sans-serif;font-size:.78rem;font-weight:300;line-height:1.7;color:rgba(255,255,255,.66);margin-bottom:28px;max-width:28ch;}
.yt-lb-fb a{font-family:'Montserrat',sans-serif;font-size:.56rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#0D0E0B;background:var(--gold);padding:14px 26px;border-radius:2px;text-decoration:none;transition:background .3s;}
.yt-lb-fb a:hover{background:var(--gold2);}
.yt-lb-close{position:absolute;top:-52px;right:0;width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);color:rgba(255,255,255,.8);font-size:1.4rem;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .3s,color .3s;}
.yt-lb-close:hover{background:rgba(196,154,66,.5);color:#fff;}
/* VIDEO-LIGHTBOX (#why-Videos) — passt sich Hoch- und Querformat automatisch an */
.vid-lb{position:fixed;inset:0;z-index:900;display:flex;align-items:center;justify-content:center;background:rgba(13,14,11,.94);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);opacity:0;pointer-events:none;transition:opacity .35s var(--ease);padding:64px 24px 24px;}
.vid-lb.open{opacity:1;pointer-events:all;}
.vid-lb-wrap{position:relative;border-radius:10px;overflow:hidden;box-shadow:0 40px 120px rgba(0,0,0,.65),0 0 0 1px rgba(196,154,66,.25);transform:scale(.96);transition:transform .4s var(--ease-out);}
.vid-lb.open .vid-lb-wrap{transform:scale(1);}
.vid-lb-wrap video{display:block;max-width:min(1180px,92vw);max-height:82vh;width:auto;height:auto;background:#0D0E0B;}
.vid-lb-cap{position:absolute;left:0;right:0;bottom:0;padding:34px 22px 16px;background:linear-gradient(to top,rgba(13,14,11,.85) 0%,transparent 100%);font-family:'Montserrat',sans-serif;font-size:.56rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--gold2);pointer-events:none;}
.pf-vitem{position:relative;border-radius:6px;overflow:hidden;background:#0D0E0B;aspect-ratio:9/16;cursor:pointer;transition:box-shadow .4s;}
.pf-vitem:hover{box-shadow:0 14px 50px rgba(18,22,15,.22),0 0 0 1px var(--gold);}
.pf-vitem video{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s var(--ease);}
.pf-vitem:hover video{transform:scale(1.03);}
.pf-vov{position:absolute;inset:0;z-index:2;background:linear-gradient(to top,rgba(13,14,11,.7) 0%,transparent 55%);opacity:0;transition:opacity .4s;display:flex;align-items:flex-end;padding:16px;}
.pf-vitem:hover .pf-vov{opacity:1;}
.pf-vlbl{font-family:'Montserrat',sans-serif;color:rgba(255,255,255,.88);font-size:.6rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;}
.pf-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:46px;height:46px;border-radius:50%;background:rgba(196,154,66,.16);border:1.5px solid rgba(196,154,66,.5);display:flex;align-items:center;justify-content:center;transition:opacity .35s,background .3s;pointer-events:none;z-index:3;}
.pf-play svg{width:16px;height:16px;fill:rgba(255,255,255,.88);margin-left:3px;}
.pf-vitem:hover .pf-play{opacity:0;}
/* WHATSAPP BUTTON */
.wa-btn{position:fixed;bottom:28px;right:28px;z-index:600;width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,#25D366,#128C7E);box-shadow:0 6px 28px rgba(37,211,102,.38),0 2px 8px rgba(0,0,0,.18);display:flex;align-items:center;justify-content:center;transition:transform .35s var(--spring),box-shadow .35s;cursor:pointer;}
.wa-btn:hover{transform:scale(1.12);box-shadow:0 10px 38px rgba(37,211,102,.52),0 4px 12px rgba(0,0,0,.2);}
.wa-btn svg{width:30px;height:30px;fill:#fff;}
.wa-pulse{position:absolute;inset:0;border-radius:50%;background:rgba(37,211,102,.35);animation:wa-ping 2.2s ease-out infinite;}
@keyframes wa-ping{0%{transform:scale(1);opacity:.7}70%{transform:scale(1.55);opacity:0}100%{opacity:0}}
/* PORTFOLIO FILTER */
.pf-filter{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:40px;align-items:center;}
.pf-filter-group{display:flex;gap:6px;flex-wrap:wrap;}
.pf-filter-sep{width:1px;height:28px;background:var(--bdr);align-self:center;margin:0 4px;}
.pf-fbtn{font-family:'Montserrat',sans-serif;font-size:.58rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;padding:7px 16px;border-radius:2px;border:1px solid var(--bdr);background:transparent;color:var(--c4);cursor:pointer;transition:all .25s;}
.pf-fbtn:hover{border-color:var(--gold);color:var(--c2);}
.pf-fbtn.active{background:var(--c2);border-color:var(--c2);color:#fff;}
.pf-region{transition:opacity .35s,transform .35s;}
.pf-region.hidden{display:none;}
.pf-project{transition:opacity .35s,transform .35s;}
.pf-project.hidden{display:none;}
/* INSTAGRAM */
#instagram{padding:100px 0;background:var(--c0);}
.ig-in{max-width:1100px;margin:0 auto;padding:0 64px;text-align:center;}
.ig-desc{font-size:.88rem;color:var(--c4);line-height:1.84;font-weight:300;margin-bottom:0;}
.ig-profile-link{color:var(--gold);transition:color .3s;}
.ig-profile-link:hover{color:var(--gold2);}
.ig-btn{display:inline-flex;align-items:center;gap:10px;background:var(--c2);color:#fff;padding:14px 36px;border-radius:2px;font-family:'Montserrat',sans-serif;font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;transition:background .3s,transform .3s;margin-top:28px;}
.ig-btn:hover{background:var(--gold);transform:translateY(-2px);}
/* Instagram consent + embeds */
.ig-consent-box{background:linear-gradient(135deg,rgba(244,241,235,.6),rgba(234,230,220,.4));border:1px solid var(--bdr);border-radius:12px;padding:48px 40px;margin:36px 0 0;text-align:center;}
.ig-consent-icon{width:64px;height:64px;border-radius:18px;background:linear-gradient(45deg,#f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);display:flex;align-items:center;justify-content:center;margin:0 auto 20px;box-shadow:0 8px 28px rgba(188,24,136,.22);}
.ig-consent-icon svg{width:32px;height:32px;fill:#fff;}
.ig-consent-title{font-family:'Cormorant Garamond',serif;font-size:1.5rem;font-weight:300;color:var(--c2);margin-bottom:12px;letter-spacing:.04em;}
.ig-consent-text{font-size:.8rem;color:var(--c4);line-height:1.84;font-weight:300;max-width:520px;margin:0 auto 26px;}
.ig-consent-text button{background:none;border:none;color:var(--gold);text-decoration:underline;cursor:pointer;font-size:inherit;font-family:inherit;padding:0;}
.ig-load-btn{background:linear-gradient(45deg,#f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);color:#fff;border:none;padding:13px 32px;border-radius:2px;font-family:'Montserrat',sans-serif;font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;transition:opacity .3s,transform .3s;display:inline-flex;align-items:center;gap:9px;}
.ig-load-btn:hover{opacity:.86;transform:translateY(-2px);}
.ig-load-btn svg{width:16px;height:16px;fill:#fff;flex-shrink:0;}
.ig-embeds-grid{display:none;grid-template-columns:repeat(3,1fr);gap:16px;margin:36px 0 0;align-items:start;}
.ig-embeds-grid.active{display:grid;}
.ig-embeds-grid .instagram-media{margin:0!important;min-width:0!important;width:100%!important;border-radius:8px!important;}
.ig-note{font-size:.66rem;color:rgba(92,103,81,.45);letter-spacing:.1em;text-transform:uppercase;margin-top:14px;}
@media(max-width:900px){.ig-embeds-grid{grid-template-columns:repeat(2,1fr);}.ig-in{padding:0 32px;}}
@media(max-width:640px){.ig-embeds-grid{grid-template-columns:1fr;}.ig-consent-box{padding:32px 20px;}}
/* HAMBURGER + MOBILE MENU */
.hamburger{display:none;flex-direction:column;justify-content:center;gap:5px;background:none;border:none;padding:6px 4px;cursor:pointer;z-index:510;position:relative;}
.hamburger span{display:block;width:22px;height:1.5px;background:var(--c3);border-radius:1px;transition:transform .35s var(--ease),opacity .35s;}
.hamburger.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
.hamburger.open span:nth-child(2){opacity:0;transform:scaleX(0);}
.hamburger.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}
#mobile-menu{position:fixed;inset:0;z-index:490;background:rgba(244,241,235,.98);backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;transform:translateX(105%);transition:transform .42s var(--ease);pointer-events:none;}
#mobile-menu.open{transform:translateX(0);pointer-events:all;}
.mob-link{font-family:'Montserrat',sans-serif;font-size:.85rem;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--c3);padding:12px 0;border-bottom:1px solid var(--bdr);width:220px;text-align:center;transition:color .3s;background:none;border-left:none;border-right:none;border-top:none;cursor:pointer;}
.mob-link:hover,.mob-link:focus{color:var(--gold);}
/* Umschaltpunkt Desktop-Nav -> Hamburger. Bis Sitzung 12 stand er bei 640px und
war damit schlicht falsch: Gemessen braucht die Nav 1248px (Padding 72px) bzw.
1168px (Padding 32px ab <=1100px). Zwischen 641 und 1208px lief sie deshalb
nicht ueber, sondern brach INNEN um - "Ueber mich" rendete bei 1024px zweizeilig
(33px statt 13px hoch), der CTA ebenfalls. Ab 1280px bleiben nach dem Umbau
72px Rest, genau wie vorher. Darunter greift das vollstaendige Mobile-Menue. */
/* 1279.98 statt 1279: Bei Windows-Skalierung (125%/150%) ist die CSS-Viewport-
Breite gebrochen - hier gemessen 1279,52px bei innerWidth 1279. Ein glattes
max-width:1279px greift dort nicht und laesst die Desktop-Nav umbrechen. */
@media(max-width:1279.98px){
.nav-links{display:none;}
.hamburger{display:flex;}
.lang-sw{display:none;}
}
.mob-cta-link{display:inline-block;margin-top:10px;background:var(--c2);color:#fff;padding:13px 40px;border-radius:2px;font-family:'Montserrat',sans-serif;font-size:.7rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;transition:background .3s;}
.mob-cta-link:hover{background:var(--gold);}
.mob-lang{display:flex;gap:4px;margin-top:14px;background:rgba(255,255,255,.5);border:1px solid var(--bdr);border-radius:4px;padding:3px;}
/* LIGHTBOX */
#lb{position:fixed;inset:0;z-index:5000;background:rgba(13,14,11,.96);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);opacity:0;pointer-events:none;transition:opacity .4s;display:flex;align-items:center;justify-content:center;}
#lb.on{opacity:1;pointer-events:all;}
.lb-x{position:absolute;top:22px;right:30px;background:none;border:none;color:rgba(255,255,255,.38);font-size:2rem;line-height:1;transition:color .3s;cursor:pointer;}
.lb-x:hover{color:#fff;}
/* BRANDS */
#brands{padding:100px 0;background:var(--c1);}
.brands-in{max-width:1180px;margin:0 auto;padding:0 64px;display:grid;grid-template-columns:1fr 2fr;gap:72px;align-items:start;}
.brands-l p{font-size:.88rem;color:var(--c4);line-height:1.86;font-weight:300;margin-top:12px;}
.brands-cta{display:inline-flex;align-items:center;gap:8px;margin-top:24px;font-size:.76rem;font-weight:600;color:var(--gold);transition:gap .3s;}
.brands-cta:hover{gap:14px;}
.brands-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
/* Ruhe-Schatten + angehobener Hover (Sitzung 15), Werte und Begruendung wie
.how-step. Der bestehende Lift translateY(-3px) bleibt unangetastet.
BEWUSST NICHT GEAENDERT: transition:all .3s. Der neue box-shadow wird dadurch
automatisch mit-animiert, die Aenderung funktioniert also. Eine Umstellung
auf eine explizite Eigenschaftsliste waere eine zweite, sachlich unabhaengige
Aenderung an einer Regel, die wir ohnehin anfassen — und damit genau die Art
stiller Zusatzarbeit, die hier vermieden wird. Falls sie kommt, dann als
eigener Schritt mit eigener Begruendung. */
.b-tile{background:var(--paper);border:1px solid var(--bdr);border-radius:4px;padding:18px 14px;text-align:center;box-shadow:0 6px 22px rgba(18,22,15,.05);transition:all .3s;backdrop-filter:blur(12px);}
.b-tile:hover{border-color:var(--gold);box-shadow:0 16px 48px rgba(18,22,15,.09);transform:translateY(-3px);}
.b-tile p{font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--c2);}
.b-tile small{display:block;margin-top:3px;font-size:.62rem;color:var(--c4);}
/* CONTACT */
#contact{padding:120px 0;background:linear-gradient(135deg,#1B2218 0%,#0D0E0B 50%,#1B2218 100%);position:relative;overflow:hidden;}
#contact::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 50%,rgba(196,154,66,.05),transparent 70%);pointer-events:none;}
.contact-in{max-width:760px;margin:0 auto;padding:0 64px;text-align:center;position:relative;z-index:2;}
.contact-in .s-label{color:var(--gold2);border-color:rgba(217,180,104,.2);background:rgba(217,180,104,.05);}
.contact-in .s-title{color:rgba(255,255,255,.84);-webkit-text-fill-color:rgba(255,255,255,.84);}
/* Pflicht-Gegenstueck zur hellen Variante: .s-title em ist dort dunkelgruen
(--c4). Ohne diese Zeile stuende genau dieses Dunkelgruen hier auf fast
schwarzem Grund. -webkit-text-fill-color muss mit, es schlaegt color. */
.contact-in .s-title em{color:rgba(255,255,255,.55);-webkit-text-fill-color:rgba(255,255,255,.55);}
.contact-in .s-title strong{background:var(--grad-gold);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.contact-intro{font-size:.88rem;color:rgba(255,255,255,.42);line-height:1.88;font-weight:300;margin:14px 0 36px;}
.ct-call{display:none;align-items:center;justify-content:center;gap:18px;margin-top:28px;padding:20px 28px;border-radius:6px;border:1px solid rgba(196,154,66,.22);background:rgba(196,154,66,.05);backdrop-filter:blur(10px);}
.ct-call.visible{display:flex;}
.ct-call-text{text-align:left;}
.ct-call-label{font-family:'Cormorant Garamond',serif;font-size:1.25rem;font-weight:300;font-style:italic;color:rgba(255,255,255,.78);line-height:1.3;}
.ct-call-sub{font-family:'Montserrat',sans-serif;font-size:.54rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--gold2);margin-top:4px;}
.ct-call-tel{display:flex;align-items:center;gap:10px;background:var(--gold);color:#fff;padding:11px 22px;border-radius:3px;font-family:'Montserrat',sans-serif;font-size:.72rem;font-weight:600;letter-spacing:.08em;text-decoration:none;white-space:nowrap;transition:background .3s,transform .3s;flex-shrink:0;}
.ct-call-tel:hover{background:var(--gold2);transform:translateY(-2px);}
.ct-call-tel svg{width:16px;height:16px;fill:#fff;flex-shrink:0;}
.contact-cards{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-bottom:28px;}
.c-card{display:flex;align-items:center;gap:11px;background:rgba(255,255,255,.04);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--bdr);border-radius:4px;padding:15px 20px;color:rgba(255,255,255,.78);transition:background .3s,transform .3s,border-color .3s;}
.c-card:hover{background:rgba(196,154,66,.09);transform:translateY(-3px);border-color:var(--gold);}
.c-card svg{width:22px;height:22px;flex-shrink:0;}
.cc-t strong{display:block;font-size:.82rem;font-weight:600;color:rgba(255,255,255,.84);}
.cc-t span{font-size:.64rem;color:rgba(255,255,255,.38);}
.contact-note{font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.28);}
/* FOOTER */
footer{background:#07080A;padding:42px 64px;border-top:1px solid rgba(196,154,66,.09);}
.foot-in{max-width:1180px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;}
.foot-brand{font-family:'Montserrat',sans-serif;font-weight:700;font-size:.82rem;letter-spacing:.24em;text-transform:uppercase;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.foot-nav{display:flex;gap:26px;list-style:none;flex-wrap:wrap;}
.foot-nav a,.foot-nav button{font-size:.66rem;letter-spacing:.08em;color:rgba(255,255,255,.28);transition:color .3s;background:none;border:none;cursor:pointer;font-family:'Inter',sans-serif;padding:0;}
.foot-nav a:hover,.foot-nav button:hover{color:var(--gold2);}
.foot-copy{font-size:.64rem;letter-spacing:.05em;color:rgba(255,255,255,.28);}
.foot-nap{display:block;text-align:center;width:100%;font-style:normal;font-family:'Inter',sans-serif;font-size:.66rem;letter-spacing:.04em;color:rgba(255,255,255,.32);margin-top:22px;}
.foot-nap a{color:inherit;transition:color .3s;}
.foot-nap a:hover{color:var(--gold2);}
.foot-sub{text-align:center;width:100%;font-size:.58rem;letter-spacing:.1em;color:rgba(255,255,255,.18);margin-top:16px;border-top:1px solid rgba(196,154,66,.06);padding-top:16px;}
/* COOKIE BANNER */
#cookie-banner{position:fixed;bottom:0;left:0;right:0;z-index:9000;background:var(--c2);border-top:1px solid rgba(196,154,66,.20);padding:20px 40px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;transform:translateY(100%);transition:transform .5s var(--ease);box-shadow:0 -8px 40px rgba(0,0,0,.3);}
#cookie-banner.show{transform:translateY(0);}
.cookie-text{font-size:.78rem;color:rgba(255,255,255,.6);line-height:1.7;max-width:640px;}
.cookie-text-btn{background:none;border:none;color:var(--gold2);text-decoration:underline;cursor:pointer;font-size:inherit;font-family:inherit;}
.cookie-btns{display:flex;gap:10px;flex-shrink:0;}
.cookie-accept{background:var(--grad-gold);color:#fff;border:none;padding:10px 22px;border-radius:2px;font-family:'Montserrat',sans-serif;font-size:.68rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:opacity .3s;}
.cookie-accept:hover{opacity:.85;}
.cookie-decline{background:transparent;color:rgba(255,255,255,.4);border:1px solid rgba(255,255,255,.14);padding:10px 22px;border-radius:2px;font-family:'Montserrat',sans-serif;font-size:.68rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:border-color .3s,color .3s;}
.cookie-decline:hover{border-color:rgba(255,255,255,.3);color:rgba(255,255,255,.6);}
/* IMPRESSUM MODAL */
/* Wiederverwendete Typografie fuer eigenstaendige Rechtsseiten (/impressum/, /datenschutz/) —
ehemals .imp-body im jetzt entfernten Modal. */
.crumb{max-width:680px;margin:0 auto;padding:120px 28px 0;font-family:'Inter',sans-serif;font-size:.7rem;letter-spacing:.04em;color:var(--c4);}
.crumb a{color:var(--c4);text-decoration:underline;text-underline-offset:2px;}
.crumb a:hover{color:var(--teal2);}
.legal-content{max-width:680px;margin:0 auto;padding:24px 28px 80px;font-size:.9rem;color:var(--c4);line-height:1.84;font-weight:300;}
.legal-content h1{font-family:'Cormorant Garamond',serif;font-size:2.2rem;font-weight:400;color:var(--c2);margin:0 0 32px;}
.legal-content h2{font-family:'Cormorant Garamond',serif;font-size:1.2rem;font-weight:400;color:var(--c2);margin:28px 0 8px;}
.legal-content h2:first-of-type{margin-top:0;}
.legal-content p{margin-bottom:10px;}
.legal-content a{color:var(--gold);transition:color .3s;}
.legal-content a:hover{color:var(--gold2);}
/* ANFRAGE-MODAL */
#req-modal{position:fixed;inset:0;z-index:8000;background:rgba(13,14,11,.92);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);opacity:0;pointer-events:none;transition:opacity .4s var(--ease);display:flex;align-items:center;justify-content:center;padding:20px;}
#req-modal.on{opacity:1;pointer-events:all;}
.req-box{background:var(--c0);border:1px solid var(--bdr);border-radius:8px;max-width:600px;width:100%;max-height:92vh;overflow-y:auto;position:relative;padding:42px 40px 32px;box-shadow:0 40px 120px rgba(0,0,0,.5);}
.req-box::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--grad-gold);}
.req-close{position:absolute;top:16px;right:18px;background:none;border:none;font-size:1.6rem;color:var(--c4);cursor:pointer;line-height:1;transition:color .3s;}
.req-close:hover{color:var(--c2);}
.req-label{display:inline-block;font-family:'Montserrat',sans-serif;font-size:.56rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:10px;}
.req-title{font-family:'Cormorant Garamond',serif;font-size:1.9rem;font-weight:300;color:var(--c2);line-height:1.15;margin-bottom:10px;}
.req-intro{font-size:.84rem;color:var(--c4);line-height:1.8;font-weight:300;margin-bottom:26px;}
.req-hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;}
.req-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 14px;margin-bottom:18px;}
.req-field.req-wide{grid-column:1/-1;}
.req-field label{display:block;font-family:'Montserrat',sans-serif;font-size:.56rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--c4);margin-bottom:6px;}
.req-field input,.req-field select,.req-field textarea{width:100%;background:rgba(255,255,255,.62);border:1px solid var(--bdr);border-radius:3px;padding:11px 12px;font-family:'Inter',sans-serif;font-size:.86rem;font-weight:300;color:var(--c2);transition:border-color .3s,background .3s;-webkit-appearance:none;appearance:none;}
.req-field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%235C6751' stroke-width='1.4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:34px;}
.req-field textarea{resize:vertical;min-height:76px;}
.req-field input:focus,.req-field select:focus,.req-field textarea:focus{outline:none;border-color:var(--gold);background:rgba(255,255,255,.85);}
.req-send{width:100%;background:var(--grad-gold);color:#fff;border:none;border-radius:2px;padding:15px 20px;font-family:'Montserrat',sans-serif;font-size:.72rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;cursor:pointer;transition:transform .3s var(--ease),box-shadow .3s;}
.req-send:hover{transform:translateY(-2px);box-shadow:0 10px 32px rgba(196,154,66,.35);}
.req-send:disabled{opacity:.6;cursor:wait;transform:none;}
.req-privacy{font-size:.68rem;color:var(--c4);line-height:1.7;font-weight:300;margin-top:14px;text-align:center;}
.req-ds{background:none;border:none;padding:0;font:inherit;color:var(--gold);cursor:pointer;text-decoration:underline;text-underline-offset:2px;}
.req-note{font-family:'Montserrat',sans-serif;font-size:.56rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--c4);text-align:center;margin-top:12px;}
.req-error{border:1px solid rgba(196,154,66,.45);background:var(--gold-pale);border-radius:4px;padding:16px 18px;margin-bottom:16px;font-size:.8rem;color:var(--c2);line-height:1.7;}
.req-mailto{display:inline-block;margin-top:10px;font-family:'Montserrat',sans-serif;font-size:.62rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);border:1px solid var(--gold);border-radius:2px;padding:9px 18px;transition:background .3s,color .3s;}
.req-mailto:hover{background:var(--gold);color:#fff;}
.req-success{text-align:center;padding:26px 0 10px;}
.req-ok-line{width:56px;height:2px;background:var(--grad-gold);margin:0 auto 22px;}
.req-success h4{font-family:'Cormorant Garamond',serif;font-size:1.7rem;font-weight:300;color:var(--c2);margin-bottom:10px;}
.req-success p{font-size:.86rem;color:var(--c4);line-height:1.8;font-weight:300;max-width:380px;margin:0 auto 24px;}
.req-ok-close{background:var(--c2);color:#fff;border:none;border-radius:2px;padding:12px 30px;font-family:'Montserrat',sans-serif;font-size:.66rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;cursor:pointer;transition:opacity .3s;}
.req-ok-close:hover{opacity:.85;}
@media (max-width:640px){
.req-box{padding:34px 22px 26px;}
.req-grid{grid-template-columns:1fr;}
}
/* PRESS FEEDBACK */
.pf-fbtn:active,.lang-btn:active,.nav-cta:active{transform:scale(.96);}
/* ===== V2: CONVERSION & SHOWCASE ADDITIONS ===== */
.hero-name{font-size:clamp(1.9rem,4.4vw,3.8rem);line-height:1.14;max-width:960px;letter-spacing:.015em;}
.hero-sub{font-family:'Inter',sans-serif;font-size:clamp(.84rem,1.2vw,.98rem);font-weight:300;line-height:1.8;color:var(--c4);max-width:640px;margin:0 auto 28px;animation:fadeup .9s .75s var(--ease) forwards;opacity:0;}
.hero-btn-primary{background:var(--c2)!important;color:#fff!important;border-color:var(--c2)!important;box-shadow:0 10px 36px rgba(18,22,15,.22);}
.hero-btn-primary:hover{background:var(--gold)!important;border-color:var(--gold)!important;box-shadow:0 14px 44px rgba(196,154,66,.35);}
.hero-btns .hero-btn{padding:17px 38px;font-size:.78rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;}
/* Section CTA row */
.sect-cta{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:44px;}
.sect-cta a{display:inline-flex;align-items:center;gap:9px;padding:14px 32px;border-radius:2px;font-family:'Montserrat',sans-serif;font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;transition:background .3s,color .3s,transform .3s,border-color .3s,box-shadow .3s;}
.sect-cta .cta-solid{background:var(--c2);color:#fff;}
.sect-cta .cta-solid:hover{background:var(--gold);transform:translateY(-2px);box-shadow:0 10px 32px var(--gold-pale);}
.sect-cta .cta-line{border:1px solid var(--bdr);color:var(--c2);}
.sect-cta .cta-line:hover{border-color:var(--gold);color:var(--gold);transform:translateY(-2px);}
/* WHY DW STUDIO */
/* position:relative traegt die Bogenschar (.wavearcs), sonst ohne Wirkung. */
#why{padding:120px 0;background:var(--c0);position:relative;overflow:hidden;}
/* z-index:1 hebt Text, Videos und Kacheln ueber das Canvas. Ohne diese Zeile laege
der gesamte Abschnittsinhalt unter den Boegen — die Buehne selbst steht auf 0. */
.why-in{max-width:1180px;margin:0 auto;padding:0 64px;position:relative;z-index:1;}
/* BOGENSCHAR — Hintergrund von #why (public/assets/wave-arcs.js).
Farbe und Deckkraft stehen bewusst HIER und nicht im JS, damit sie bei der uebrigen
Palette liegen. Das Script liest beide Werte per getComputedStyle aus.
Warum --gold und nicht --teal: Gold ist die Markenfarbe und traegt bereits Raender,
Zahlen und CTA-Flaechen; Teal ist im Abschnitt ausschliesslich das .s-label. Eine
zweite grossflaechige Farbe waere eine dritte Stimme im Bild.
Warum .34 und nicht mehr: --gold erreicht auf --c0 nur 2,31:1 (siehe Kommentar bei
--gold-deep). Als DEKORATION ist das genau richtig — die Boegen bleiben Textur und
treten nicht gegen die Ueberschrift an. Gegengerechnet fuer den schlimmsten Fall:
eine volle Linie faerbt den Grund auf etwa #E4D5C0, die Ueberschrift in --c2
(#0D0E0B) steht darauf immer noch bei rund 15:1. Wer die Boegen kraeftiger will,
dreht --wave-deckkraft hoch oder setzt --wave-farbe auf --gold-deep (#8A6A22) —
beides ohne JS-Aenderung. */
.wavearcs{
--wave-farbe:#C49A42;
/* .45 statt der zuerst gesetzten .34: nach dem Nachziehen der Maske (siehe unten)
kamen unten nur noch 0,11–0,17 wirksame Deckkraft an — die dichteste Zone des
Canvas liegt bei rund 50–70 % und wurde von der Maske gedaempft. Gegengerechnet:
im Textbereich bleiben damit rund 0,07 wirksam, der Fliesstext steht bei 4,9:1
und damit weiter ueber 4,5:1. */
--wave-deckkraft:.45;
position:absolute;inset:0;z-index:0;pointer-events:none;
/* Die Boegen bluehen von der Unterkante auf (Ursprung liegt unter der Sektion),
unten sind sie also ohnehin am dichtesten — die Maske folgt dieser Richtung.
Die Stuetzstellen sind NACHGEMESSEN, nicht geschaetzt: `.s-head p` reicht bei
1280 px von 33,3 % bis 43,3 % der Sektionshoehe und sitzt als einziger Fliesstext
ohne Kachel direkt auf dem Grund. Die Rechnung (Gold ueber --c0, Text --c4) gibt
4,5:1 bis zu einer wirksamen Deckkraft von 0,21. Eine erste Fassung mit
`.30 24%, #000 55%` kam dort auf 0,25 und drueckte den Kontrast auf 4,36:1 —
unter die Grenze. Jetzt liegt die wirksame Deckkraft bei 43,3 % bei rund 0,06,
der Kontrast bleibt bei 5,1:1.
Das Kachelraster beginnt bei 50 %. Die Rampe endet deshalb bei 60 % und nicht,
wie zuerst gesetzt, bei 80 %: die dichteste Zone des Canvas liegt bei rund
50–70 %, und eine bis 80 % laufende Rampe hat genau sie weggedaempft (gemessen:
nur noch 0,11–0,17 wirksame Deckkraft unten, der Effekt war praktisch weg).
Ab 60 % laeuft er voll durch — dort liegt entweder freier Grund oder eine
.why-card, die als --paper mit 90 % Deckung ohnehin nur ein Zehntel durchlaesst. */
-webkit-mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.07) 44%,#000 60%);
mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.07) 44%,#000 60%);
}
.wavearcs-canvas{display:block;width:100%;height:100%;}
/* Siehe Abweichung 8 in wave-arcs.js: unter 900 px ist #why eine schmale, sehr hohe
Spalte (bei 375 px: 375 x 2454), in der die Bogenschar nicht liest. Das JS legt dort
erst gar kein Canvas an; diese Regel deckt den Fall ab, dass die Breite erst nach
dem Aufbau unterschritten wird. */
@media(max-width:899.98px){.wavearcs{display:none;}}
/* REICHWEITE-SEKTION (leistungen/social-media-content-immobilien/) — zweiter Einsatz
derselben Bogenschar, auf Nutzerwunsch. Eigener Host-Selektor .reach-sect statt einer
Regel auf .svp-sect.alt: Letzterer kommt 70x auf 22 Seiten vor (Tabellen, Checklisten,
Bilder) — eine Aenderung dort wuerde ueberall mitlaufen, hier soll sie nur an dieser
einen Stelle wirken. */
.reach-sect{position:relative;overflow:hidden;}
.reach-sect>.svp-in{position:relative;z-index:1;}
/* Andere Deckkraft als bei #why: .svp-sect.alt liegt auf --c1 (#EAE6DC), das ist
dunkler und naeher an --gold als --c0 (#F4F1EB) — die Ausgangskontraste sind hier
messbar knapper (Flieesstext ohne Boegen nur 4,80:1 statt 5,30:1 bei #why).
Nachgerechnet: Fliesstext und Kacheltext vertragen bis 0,092 wirksame Deckkraft,
bevor sie unter 4,5:1 fallen; das Label bis 0,102. Die Maske haelt sich mit ihrer
Rampe deshalb deutlich weiter zurueck als bei #why.
Andere Rampe als bei #why: Die Sektion hat keine hoch aufragende Kopfzeile, sondern
H2+Absatz (endet bei 44,6 % der Sektionshoehe) direkt ueber einer einzeiligen
Kachelreihe (.svp-grid3, beginnt bei 52,7 %) — beide liegen enger beieinander als
bei #why. Rampe beginnt daher erst bei 46 % (nach dem Text) und ist bei 62 % voll. */
.reach-sect .wavearcs{
--wave-deckkraft:.38;
-webkit-mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.04) 46%,#000 62%);
mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.04) 46%,#000 62%);
}
/* UEBERSICHT-SEKTION (leistungen/index.html) — dritter Einsatz der Bogenschar,
eigene Klasse statt .reach-sect: 9 Kacheln in 3 Reihen statt 3 in einer Reihe,
die Sektion ist entsprechend viel hoeher. Werte unten sind ein erster Ansatz,
im Browser gegen die tatsaechlich gerenderte Hoehe von .s-head und den Start
von .svp-grid3 nachgemessen (siehe PROJECT_STATUS.md fuer die Messung). */
.uebersicht-wavearcs{position:relative;overflow:hidden;}
.uebersicht-wavearcs>.svp-in{position:relative;z-index:1;}
/* top/height statt inset:0 (Basisregel): Boegen ueber alle drei Kachelreihen zu
ziehen haette den Effekt bis zur letzten Reihe verduennt (gleiche Boegenzahl auf
dreifacher Flaeche). Eine auf den Kopfbereich begrenzte Bande wirkt stattdessen
wie ein Uebergang vom Tunnel-Hero, ohne unter den Kacheln zu verblassen. */
.uebersicht-wavearcs .wavearcs{
top:0;left:0;right:0;bottom:auto;height:620px;
--wave-deckkraft:.38;
/* Nachgemessen bei 1280px: .s-head p endet bei 50,5% der 620px-Bande,
.svp-grid3 beginnt bei 58,9%. Fliesstext vertraegt bis 0,092 wirksame
Deckkraft (siehe PROJECT_STATUS.md) — die Rampe bleibt bis 52% bei 0,04
(0,04*.38=0,015, weit unter der Schwelle) und ist erst bei 68% voll, ein
Stueck hinter dem Kachelstart, wo .why-card (--paper, 90% Deckung) ohnehin
nur ein Zehntel durchlaesst. */
-webkit-mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.04) 52%,#000 68%);
mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.04) 52%,#000 68%);
}
/* Kein eigener Media-Query-Ausschluss noetig: die Basisregel
@media(max-width:899.98px){.wavearcs{display:none}} (oben) deckt auch dieses
dritte Vorkommen bereits ab. */
/* WEITERE EINSAETZE DER BOGENSCHAR — auf Nutzerwunsch sieben zusaetzliche Stellen.
Diesmal EINE gemeinsame Klasse statt sieben Einzelselektoren wie bei den ersten
drei: alle sieben Wirte liegen auf --c1 (#how und #testimonials per eigener Regel,
die uebrigen als .svp-sect.alt), also auf genau dem Grund, fuer den die Werte von
.reach-sect bereits nachgemessen sind — Deckkraft .38, Textgrenze 0,092 wirksame
Deckkraft. Sieben Kopien derselben Rechnung waeren nur sieben Stellen zum
Auseinanderlaufen. Die Wirte unterscheiden sich in genau einem Punkt, und dafuer
gibt es die Variante .arcs-band weiter unten.
.wavearcs muss ERSTES Kind der Sektion sein; der Inhaltscontainer holt sich mit
z-index:1 die Ebene darueber (wie .why-in, app.css:796). Ohne diese Zeile laege
der gesamte Abschnittsinhalt unter den Boegen. */
.arcs-sect{position:relative;overflow:hidden;}
.arcs-sect>.tst-in,.arcs-sect>.how-in,.arcs-sect>.svp-in{position:relative;z-index:1;}
.arcs-sect .wavearcs{
--wave-deckkraft:.38;
-webkit-mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.04) 46%,#000 62%);
mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.04) 46%,#000 62%);
}
/* Variante fuer die drei Abschnitte, die von oben bis unten Fliesstext tragen und
keine Kacheln (ablauf/ Schritt 02 und 04, journal/ "Naechster Schritt").
Die Grundfassung waere dort falsch herum: ihre Rampe dreht nach unten auf, weil
dort sonst Kacheln liegen, die als --paper mit 90 % Deckung nur ein Zehntel
durchlassen. Hier liegt unten blanker Fliesstext auf blankem Grund.
Eine Bande am Kopf war der erste Versuch und ist am Nachmessen gescheitert: die
.s-head sitzt bei 96-199 px, ihre Augenbraue also mitten in der Rampe, und die
vertraegt nach der Rechnung von .reach-sect nur 0,102 wirksame Deckkraft — sie
haette dort rund 0,265 bekommen.
Die Maske laeuft deshalb WAAGRECHT statt senkrecht. Nachgemessen bei 1280 px:
der Textblock ist 692 px breit und mittig, links und rechts stehen je rund 240 px
voellig frei. Das transparente Fenster ist mit 760 px gerade so viel breiter, dass
34 px Luft neben dem Text bleiben; ausserhalb duerfen die Boegen mit voller
Deckkraft laufen, weil dort nichts steht, was Kontrast braucht.
In px gerechnet und nicht in Prozent: die Textbreite ist eine feste max-width, ein
Prozentfenster waere am schmalen Fenster mitgewandert und haette den Text wieder
angeschnitten. Unter 900 px greift ohnehin die Grundregel display:none.
Keine zusaetzliche senkrechte Maske: die gibt es bei den anderen Einsaetzen nur,
um Text zu schuetzen. Hier steht in den Seitenstreifen keiner, und die Boegen
bluehen von der Unterkante ohnehin von selbst aus. */
.arcs-sect.arcs-seiten .wavearcs{
-webkit-mask-image:linear-gradient(to right,#000 0,transparent calc(50% - 380px),transparent calc(50% + 380px),#000 100%);
mask-image:linear-gradient(to right,#000 0,transparent calc(50% - 380px),transparent calc(50% + 380px),#000 100%);
}
.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:48px;}
/* Ruhe-Schatten (Sitzung 15, Ausrollen des Werts aus Sitzung 14). Reichweite:
55 Vorkommen auf 15 Seiten — die Leistungsseiten erben ihre Kacheloptik ueber
diesen Selektor. #why liegt auf --c0 (#F4F1EB), also auf einem noch helleren
Grund als .svc-card auf --c1; der Kontrast Karte/Flaeche ist hier am
geringsten und der Schatten wirkt am staerksten. Trotzdem derselbe Wert —
genau diese Wirkung ist gewollt, ein Sonderwert waere die naechste
Uneinheitlichkeit.
EINEBENIG, anders als .svc-card: die dortige zweite Ebene mit Alpha 0 gibt es
nur, weil .svc-card:hover zweiebenig ist (Schatten + goldener 1-px-Ring) und
gleiche Ebenenzahl sauber interpoliert. Der Hover hier ist einebenig, die
Leerebene waere toter Code.
Der Hover musste nachtraeglich mit angehoben werden (Nachmessung Sitzung 15,
Freigabe eingeholt). Er stand auf 0 14px 44px var(--gold-pale) und erreichte
damit nur 5,27 % Spitzenverdunkelung gegen 6,46 % des neuen Ruhe-Schattens —
der Hover war also SCHWAECHER als der Ruhezustand. Grund: die fast schwarze
Tinte bei Alpha .05 verdunkelt staerker als Gold bei Alpha .10, weil #C49A42
relativ zum hellen Beige heller ist, als es die Alpha-Werte nahelegen. Jetzt
derselbe Wert wie bei .how-step/.tst-card/.b-tile: 1,93 x statt 0,82 x.
Lift und border-color bleiben unangetastet. */
.why-card{background:var(--paper);border:1px solid var(--bdr);border-radius:4px;padding:34px 26px;box-shadow:0 6px 22px rgba(18,22,15,.05);transition:border-color .3s,box-shadow .3s,transform .3s;}
.why-card:hover{border-color:var(--gold);box-shadow:0 16px 48px rgba(18,22,15,.09);transform:translateY(-4px);}
.why-num{font-family:'Cormorant Garamond',serif;font-size:2.1rem;font-weight:300;color:var(--gold);opacity:.55;line-height:1;margin-bottom:14px;}
.why-card h3{font-family:'Montserrat',sans-serif;font-size:.84rem;font-weight:600;color:var(--c2);margin-bottom:9px;letter-spacing:.02em;}
.why-card p{font-size:.79rem;color:var(--c4);line-height:1.74;font-weight:300;}
/* WHY — Video-Kopfzeile: Hochformat links, Text mittig, Querformat rechts.
Videos laden erst beim Scrollen in den Viewport (preload="none" + IntersectionObserver). */
.why-hero{display:grid;grid-template-columns:.62fr 1.5fr 1fr;gap:40px;align-items:center;margin-bottom:56px;}
.why-hero .s-head{max-width:none;margin:0;padding:0;}
.why-vid{position:relative;border-radius:8px;overflow:hidden;background:#0D0E0B;box-shadow:0 26px 70px rgba(18,22,15,.16),0 0 0 1px rgba(196,154,66,.12);cursor:pointer;transition:transform .55s var(--ease-out),box-shadow .55s var(--ease-out);}
@media (hover:hover) and (pointer:fine){
.why-vid:hover{transform:scale(1.045);box-shadow:0 34px 88px rgba(18,22,15,.26),0 0 0 1px var(--gold);}
}
/* Lupe-Hinweis: macht die Klickbarkeit sichtbar, ohne das Bild zuzustellen */
.why-vid-zoom{position:absolute;top:12px;right:12px;z-index:3;width:32px;height:32px;border-radius:50%;background:rgba(13,14,11,.55);border:1px solid rgba(196,154,66,.35);display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(.9);transition:opacity .35s var(--ease-out),transform .35s var(--ease-out),background .3s;pointer-events:none;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);}
.why-vid:hover .why-vid-zoom,.why-vid:focus-visible .why-vid-zoom{opacity:1;transform:scale(1);}
.why-vid-zoom svg{width:15px;height:15px;stroke:var(--gold2);stroke-width:1.9;fill:none;stroke-linecap:round;stroke-linejoin:round;}
.why-vid:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}
.why-vid video{width:100%;height:100%;object-fit:cover;display:block;}
.why-vid-portrait{aspect-ratio:9/16;}
.why-vid-landscape{aspect-ratio:16/9;}
.why-vid-cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:30px 16px 12px;background:linear-gradient(to top,rgba(13,14,11,.82) 0%,transparent 100%);font-family:'Montserrat',sans-serif;font-size:.5rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--gold2);pointer-events:none;}
/* FAQ */
#faq{padding:120px 0;background:var(--c1);}
.faq-in{max-width:820px;margin:0 auto;padding:0 64px;}
.faq-list{margin-top:44px;}
.faq-item{background:var(--paper);border:1px solid var(--bdr);border-radius:4px;margin-bottom:10px;overflow:hidden;transition:border-color .3s,box-shadow .3s;}
.faq-item[open]{border-color:var(--gold);box-shadow:0 8px 32px var(--gold-pale);}
.faq-item summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:20px 26px;cursor:pointer;font-family:'Montserrat',sans-serif;font-size:.86rem;font-weight:600;color:var(--c2);transition:color .3s;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary:hover{color:var(--gold);}
.faq-item summary::after{content:'+';font-family:'Cormorant Garamond',serif;font-size:1.6rem;font-weight:300;color:var(--gold);flex-shrink:0;line-height:1;transition:transform .35s var(--ease);}
.faq-item[open] summary::after{transform:rotate(45deg);}
.faq-item p{padding:0 26px 22px;font-size:.83rem;color:var(--c4);line-height:1.86;font-weight:300;}
/* PORTFOLIO REFERENCE META */
.pf-yt-cap span.pf-result{color:rgba(255,255,255,.66);text-transform:none;letter-spacing:.03em;font-family:'Inter',sans-serif;font-weight:400;font-size:.66rem;margin-top:5px;}
/* V2 RESPONSIVE */
@media(max-width:1024px){
/* Text nach oben, beide Videos darunter nebeneinander — bleiben gemeinsam sichtbar */
.why-hero{grid-template-columns:.8fr 1.2fr;gap:24px;}
.why-hero .s-head{grid-column:1/-1;order:-1;margin:0 auto;max-width:620px;}
}
@media(max-width:900px){
.why-grid{grid-template-columns:repeat(2,1fr);}
.why-in,.faq-in{padding:0 32px;}
}
@media(max-width:640px){
.why-grid{grid-template-columns:1fr;}
/* Hochformat begrenzen, sonst fuellt es bei 375px fast den ganzen Bildschirm */
.why-hero{grid-template-columns:1fr;gap:18px;justify-items:center;}
.why-vid{width:100%;max-width:300px;}
.why-vid-landscape{max-width:100%;}
.faq-in,.why-in{padding:0 20px;}
.sect-cta{flex-direction:column;align-items:stretch;}
.sect-cta a{justify-content:center;}
.hero-name{font-size:clamp(1.35rem,6.4vw,1.9rem);white-space:normal;padding:0 6px;}
.faq-item summary{padding:17px 18px;font-size:.8rem;}
.faq-item p{padding:0 18px 18px;}
}
/* RESPONSIVE */
@media(max-width:1100px){
#nav,#nav.scrolled{padding:18px 32px;}
.about-in,.svc-in,.bts-in,.pf-in,.brands-in,.contact-in,.ig-in,footer,.foot-in{padding-left:32px;padding-right:32px;}
}
@media(max-width:900px){
.about-in{grid-template-columns:1fr;gap:48px;}
.svc-grid{grid-template-columns:repeat(2,1fr);}
/* .svc-card.featured{grid-column:span 1;} entfernt — seit .featured keinen span
mehr auf Desktop traegt (siehe dortiger Kommentar), tat diese Zeile nichts mehr. */
.how-grid{grid-template-columns:repeat(2,1fr);}
/* Eine Stimme pro Ansicht — zwei nebeneinander waeren hier zu schmal. */
:root{--tst-per-view:1;}
.tst-slide{flex:0 0 100%;}
.pf-video-grid.cols-3{grid-template-columns:repeat(2,1fr);}
.pf-video-grid.cols-4{grid-template-columns:repeat(2,1fr);}
.brands-in{grid-template-columns:1fr;gap:36px;}
/* Masonry bleibt, nur weniger Spalten - Originalformate ueberall erhalten */
.bts-mosaic{columns:2;}
.portrait{width:240px;height:240px;}
.portrait-wrap{width:240px;height:240px;}
.lang-sw{display:none;}
#cookie-banner{padding:16px 20px;flex-direction:column;align-items:flex-start;}
.pf-region-sub{display:none;}
/* Signature stapelt: Kachel zentriert, Datenblatt darunter */
.pf-signature{grid-template-columns:1fr;gap:32px;justify-items:center;}
.pf-sig-tile{width:min(300px,72vw);}
.pf-sig-body{width:100%;}
.pf-sig-name{font-size:2.1rem;}
}
@media(max-width:640px){
/* .nav-links / .hamburger / .lang-sw stehen jetzt im 1279px-Block weiter oben */
.pf-video-grid.cols-4,.pf-video-grid.cols-3,.pf-video-grid.cols-2{grid-template-columns:1fr;}
/* Hochformat-Kacheln bleiben zweispaltig - einspaltig waeren sie unbrauchbar hoch */
.pf-video-grid.pf-secondary{grid-template-columns:repeat(2,1fr);gap:8px;}
.pf-sig-tile{width:min(270px,68vw);}
.pf-spec{grid-template-columns:1fr;gap:5px;padding:11px 0;}
.pf-yt-cap{padding:30px 13px 12px;}
.pf-yt-cap strong{font-size:1rem;}
.pf-yt-cap span{font-size:.48rem;letter-spacing:.16em;}
.pf-yt-cap span.pf-result{display:none;}
.hero-name{font-size:clamp(1.5rem,7.5vw,2.1rem);letter-spacing:.01em;white-space:normal;overflow:visible;}
.hero-sub2{display:none;}
.hero-btns{flex-direction:column;width:100%;max-width:320px;}
.hero-btns .hero-btn{width:100%;justify-content:center;}
.hero-stats{flex-wrap:wrap;}
.hero-stat{flex:1;min-width:80px;padding:13px 14px;}
.svc-grid{grid-template-columns:1fr;}
.how-grid{grid-template-columns:1fr;}
.how-in,.tst-in{padding-left:20px;padding-right:20px;}
.tst-card{padding:32px 24px;}
.brands-grid{grid-template-columns:repeat(2,1fr);}
footer{padding:34px 18px;}
.foot-in{flex-direction:column;text-align:center;}
#hero::before{inset:90px 10px 60px;border-radius:16px;}
.bts-mosaic{columns:2;column-gap:8px;}
.bts-cell{margin-bottom:8px;}
}
/* ===== LEISTUNGSSEITEN-TEMPLATE (.svp-* = service page) =====
Rahmen fuer /leistungen/*. Bewusst klein gehalten: Karten (.why-card),
Ablauf-Schritte (.how-*), FAQ (#faq/.faq-item), Sektionskoepfe (.s-head/
.s-title/.s-label), CTA-Reihen (.sect-cta) und Kennzahlen (.hero-stats)
werden aus dem bestehenden System uebernommen, nicht nachgebaut. */
.svp-crumb{max-width:1180px;padding:118px 64px 0;}
.svp-hero{padding:34px 0 88px;background:var(--c0);}
.svp-hero-in{max-width:1180px;margin:0 auto;padding:0 64px;display:grid;grid-template-columns:1.35fr 1fr;gap:64px;align-items:center;}
.svp-h1{font-family:'Cormorant Garamond',serif;font-size:clamp(2rem,4vw,3.1rem);font-weight:300;line-height:1.14;color:var(--c2);margin:6px 0 18px;text-wrap:balance;}
/* Gleiche Behandlung wie .s-title strong, damit die H1 der 23 Unterseiten und die
167 Sektionstitel denselben Akzent tragen. Ohne die Farbe hier erbte strong
das --c2 der .svp-h1 und die Unterseiten waeren als einzige schwarz geblieben. */
.svp-h1 strong{font-weight:600;color:var(--gold-deep);-webkit-text-fill-color:var(--gold-deep);}
.svp-lead{font-size:.95rem;color:var(--c3);line-height:1.84;font-weight:300;max-width:560px;margin-bottom:26px;}
/* Kennzahlen-Leiste stammt aus dem Hero der Startseite. Dort steht sie mittig
ueber die volle Breite; in der schmaleren Textspalte hier waere eine Reihe zu
vier Werten gequetscht — deshalb 2x2 statt Umbruch mit haengenden Trennlinien.
Feste Rasterung statt flex-wrap, damit das auch auf den folgenden
Leistungsseiten mit laengeren Labels traegt. */
/* Die Einblend-Animation der Startseite (fadeup mit .9s Verzoegerung, Startwert
opacity:0) wird hier bewusst abgeschaltet: laeuft sie aus irgendeinem Grund
nicht an, bliebe der Vertrauensblock dauerhaft unsichtbar. Auf einer
Leistungsseite sind die Kennzahlen Beleg, kein Effekt. */
.svp-hero .hero-stats{display:grid;grid-template-columns:1fr 1fr;max-width:420px;margin:0 0 30px;animation:none;opacity:1;}
.svp-hero .hero-stat{border-bottom:1px solid rgba(196,154,66,.5);}
.svp-hero .hero-stat:nth-child(2n){border-right:none;}
.svp-hero .hero-stat:nth-child(n+3){border-bottom:none;}
.svp-hero .sect-cta{justify-content:flex-start;margin-top:0;}
.svp-hero-img{position:relative;}
/* height:auto ist Pflicht: die width/height-Attribute im HTML stehen fuer das
Seitenverhaeltnis (kein CLS), ohne die Regel bliebe die Attributhoehe stehen
und das Bild wuerde gestreckt. */
.svp-hero-img img{width:100%;height:auto;border-radius:6px;border:1px solid var(--bdr);}
.svp-hero-img figcaption{font-family:'Montserrat',sans-serif;font-size:.54rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--c4);margin-top:12px;text-align:center;}
.svp-sect{padding:96px 0;background:var(--c0);}
.svp-sect.alt{background:var(--c1);}
.svp-in{max-width:1180px;margin:0 auto;padding:0 64px;}
.svp-in.narrow{max-width:820px;}
.svp-body p{font-size:.9rem;color:var(--c4);line-height:1.88;font-weight:300;margin-bottom:16px;}
.svp-body p:last-child{margin-bottom:0;}
.svp-body strong{color:var(--c2);font-weight:600;}
.svp-body a{color:var(--gold);transition:color .3s;text-decoration:underline;text-underline-offset:3px;}
.svp-body a:hover{color:var(--gold2);}
.svp-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.svp-list{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:12px 28px;margin-top:40px;}
.svp-list li{position:relative;padding-left:28px;font-size:.85rem;color:var(--c4);line-height:1.8;font-weight:300;}
.svp-list li::before{content:'✓';position:absolute;left:0;top:0;color:var(--gold);font-size:.9rem;font-weight:600;}
.svp-list strong{display:block;font-family:'Montserrat',sans-serif;font-size:.78rem;font-weight:600;color:var(--c2);margin-bottom:2px;letter-spacing:.02em;}
.svp-case{display:grid;grid-template-columns:300px 1fr;gap:48px;align-items:center;margin-top:44px;}
.svp-case img{width:100%;height:auto;border-radius:6px;border:1px solid var(--bdr);}
.svp-case h3{font-family:'Cormorant Garamond',serif;font-size:1.9rem;font-weight:400;color:var(--c2);margin-bottom:6px;}
.svp-case .svp-case-loc{font-family:'Montserrat',sans-serif;font-size:.58rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:18px;}
.svp-price{background:var(--paper);border:1px solid var(--gold);border-radius:6px;padding:40px 36px;text-align:center;max-width:560px;margin:0 auto;box-shadow:0 14px 44px var(--gold-pale);}
.svp-price-num{font-family:'Cormorant Garamond',serif;font-size:2.9rem;font-weight:600;color:var(--c2);line-height:1;}
.svp-price-num em{font-style:normal;font-size:1.05rem;font-weight:400;color:var(--c4);display:block;margin-bottom:6px;letter-spacing:.02em;}
.svp-price-vat{font-family:'Montserrat',sans-serif;font-size:.56rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--c4);margin-top:10px;}
.svp-price p{font-size:.84rem;color:var(--c4);line-height:1.82;font-weight:300;margin-top:18px;}
.svp-trust{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:36px;}
.svp-trust span{font-family:'Montserrat',sans-serif;font-size:.6rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--c2);border:1px solid var(--bdr);border-radius:2px;padding:9px 16px;background:var(--paper);}
@media(max-width:1100px){
.svp-crumb,.svp-hero-in,.svp-in{padding-left:32px;padding-right:32px;}
}
@media(max-width:900px){
.svp-hero-in{grid-template-columns:1fr;gap:36px;}
.svp-hero-img{max-width:320px;margin:0 auto;}
.svp-grid3{grid-template-columns:repeat(2,1fr);}
.svp-case{grid-template-columns:1fr;gap:28px;justify-items:center;text-align:center;}
.svp-case img{max-width:280px;}
}
@media(max-width:640px){
.svp-crumb{padding:104px 20px 0;}
.svp-hero{padding:24px 0 60px;}
.svp-hero-in,.svp-in{padding-left:20px;padding-right:20px;}
.svp-sect{padding:68px 0;}
.svp-grid3{grid-template-columns:1fr;}
.svp-list{grid-template-columns:1fr;}
.svp-hero .sect-cta{align-items:stretch;}
.svp-price{padding:32px 22px;}
}
/* ---------- Ausruestungsseite (/ausruestung/) ----------------------------
Geraeteabschnitte. .svp-case waere die naheliegende Wiederverwendung, ist
aber auf 300px-HOCHformat-Bilder mit Rahmen/Radius ausgelegt; die Fleet-
Bilder sind freigestellte 520x293-Querformate (Alphakanal), die weder
Rahmen noch Radius vertragen. Deshalb ein eigener, bewusst minimaler Block.
height:auto ist zwingend — das globale img{} setzt es nicht, sonst bleibt
die HTML-height stehen und das Bild wird gestreckt (siehe Sitzung 5). */
.gear-row{display:grid;grid-template-columns:240px 1fr;gap:44px;align-items:center;padding:34px 0;border-top:1px solid var(--bdr);}
.gear-row:first-of-type{border-top:none;padding-top:10px;}
.gear-row img{width:100%;height:auto;display:block;}
.gear-row h3{font-family:'Cormorant Garamond',serif;font-size:1.7rem;font-weight:400;color:var(--c2);margin-bottom:6px;}
.gear-row p{font-size:.86rem;color:var(--c4);line-height:1.86;font-weight:300;margin-bottom:12px;}
.gear-row p:last-child{margin-bottom:0;}
.gear-row a{color:var(--gold);transition:color .3s;text-decoration:underline;text-underline-offset:3px;}
.gear-row a:hover{color:var(--gold2);}
.gear-tag{font-family:'Montserrat',sans-serif;font-size:.58rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:16px;}
/* Sprungmarken-Links in der Ablauf-Uebersicht: .how-title faerbt bereits, das
globale a{} setzt keine Farbe — nur der Hover-Hinweis fehlt. */
.how-title a{color:inherit;transition:color .3s;}
.how-title a:hover{color:var(--gold);}
/* Querverweis von #fleet auf /ausruestung/ — .fleet-sub liegt auf dunklem
Grund, deshalb Gold statt der geerbten hellen Textfarbe. */
.fleet-sub a{color:var(--gold);text-decoration:underline;text-underline-offset:3px;transition:color .3s;}
.fleet-sub a:hover{color:var(--gold2);}
@media(max-width:900px){
.gear-row{grid-template-columns:1fr;gap:20px;padding:28px 0;}
.gear-row img{max-width:300px;}
}
/* ---------- Journal (/journal/ + Artikel) --------------------------------
Fliesstext, Ueberschriften, Hero und Sektionen kommen komplett aus dem
.svp-*-System; .legal-content waere die naheliegende Alternative, ist aber
auf 680px schmale Rechtstexte ohne Sektionsrhythmus ausgelegt. Neu noetig
sind nur zwei Dinge: ein mitwachsendes Kartenraster fuer den Hub und eine
Tabelle — app.css hatte bis hierher keine einzige table/th/td-Regel.
.art-grid nutzt auto-fit, damit es von 2 auf 12 Artikel skaliert, ohne
dass diese Datei je wieder angefasst werden muss. */
.art-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;}
.art-meta{font-family:'Montserrat',sans-serif;font-size:.56rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:10px;}
/* Der Wrapper ist zwingend: ohne ihn sprengt die dreispaltige Vergleichs-
tabelle bei 375px den Viewport, statt in sich zu scrollen. */
.art-tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:36px 0 8px;border:1px solid var(--bdr);border-radius:6px;background:var(--paper);}
.art-table{width:100%;border-collapse:collapse;font-size:.82rem;color:var(--c4);font-weight:300;line-height:1.7;}
.art-table caption{caption-side:bottom;padding:14px 20px 16px;font-size:.72rem;color:var(--c4);text-align:left;font-weight:300;}
.art-table th,.art-table td{padding:14px 20px;text-align:left;vertical-align:top;border-bottom:1px solid var(--bdr);}
.art-table thead th{font-family:'Montserrat',sans-serif;font-size:.64rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--c2);background:var(--c1);}
.art-table tbody th{font-family:'Montserrat',sans-serif;font-size:.7rem;font-weight:600;letter-spacing:.02em;color:var(--c2);white-space:nowrap;}
.art-table tbody tr:last-child th,.art-table tbody tr:last-child td{border-bottom:none;}
.art-table strong{color:var(--c2);font-weight:600;}
.art-table a{color:var(--gold);text-decoration:underline;text-underline-offset:3px;transition:color .3s;}
.art-table a:hover{color:var(--gold2);}
@media(max-width:640px){
/* min-width statt Umbruch: lieber horizontal scrollen als Spalten auf 140px
quetschen. 680px ergibt bei 3 Spalten ~227px, bei 4 Spalten ~170px. */
.art-table{font-size:.76rem;min-width:680px;}
.art-table th,.art-table td{padding:11px 14px;}
.art-table tbody th{white-space:normal;}
}
/* ROUND CAROUSEL — Bilder auf einem stehenden 3D-Ring (public/assets/round-carousel.js).
Bisher nur auf /leistungen/immobilienfotografie/. Geometrie und Bewegung sitzen
im JS; hier steht die Buehne und das Aussehen einer Kachel.
Loest die frueher hier eingesetzte Ellipsenbahn (.spin-orbit) ab. */
/* margin-top: Das schwarze Band stiess ohne Abstand direkt an die Unterkante der
CTA-Schaltflaechen (gemessen: 0 px). Bei einem harten Hell-Dunkel-Wechsel faellt
das sofort auf; 44 px entsprechen dem Abstandsmass der uebrigen Hero-Elemente. */
.rcar{position:relative;width:100%;height:430px;margin-top:44px;display:flex;align-items:center;justify-content:center;overflow:hidden;
/* Hintergrund der Vorlage: #F4F1EB — identisch mit --c0, der Flaechenfarbe des
Heros. Der Ring sitzt dadurch randlos in der Seite statt als eigenes Band.
Als Variable gefuehrt, damit sich das an einer Stelle umstellen laesst. */
background:var(--rcar-bg,var(--c0));}
.rcar-tilt{transform-style:preserve-3d;}
.rcar-ring{position:relative;transform-style:preserve-3d;will-change:transform;}
.rcar-slot{position:absolute;inset:0;transform-style:preserve-3d;}
.rcar-face{position:absolute;inset:0;overflow:hidden;backface-visibility:hidden;background-size:cover;background-position:center;}
.rcar-front{box-shadow:0 10px 30px rgba(0,0,0,.35);}
.rcar-front img{display:block;width:100%;height:100%;object-fit:cover;user-select:none;-webkit-user-drag:none;}
/* Rueckseite: dasselbe Bild abgedunkelt, damit der Ring von innen Tiefe bekommt. */
.rcar-back{transform:rotateY(180deg);}
/* Abweichung 4 gegenueber der Vorlage: dort steht touch-action:none. Damit liesse
sich die Seite auf dem Telefon ueber dem Ring nicht mehr nach unten scrollen —
ein quer liegender Balken, an dem die Wischgeste haengen bleibt. pan-y laesst
das vertikale Scrollen durch und faengt nur die waagrechte Geste ab. */
.rcar-draggable{cursor:grab;touch-action:pan-y;}
.rcar-draggable.rcar-grabbing{cursor:grabbing;}
/* Die Buehnenhoehe wird bewusst NICHT verkleinert. Der Ringdurchmesser folgt der
Kachelbreite (305 px), nicht der Viewportbreite — die vertikale Ausdehnung der
Kacheln ist auf dem Telefon also dieselbe wie am Schreibtisch: gemessen rund
301 px, durch Kippung und Perspektive nach oben versetzt, was ~366 px Buehne
verlangt. Zwei Versuche mit kleineren Werten schnitten oben ab (290 px kappte
38 px, 340 px noch 13 px). Angepasst wird deshalb nur der Aussenabstand. */
@media (max-width:900px){
.rcar{margin-top:36px;}
}
@media (max-width:600px){
.rcar{margin-top:30px;}
}
/* Ohne rechtes Hero-Bild ist die zweite Rasterspalte leer und der Text braeche auf
halber Breite um. Der Modifier macht den Hero einspaltig. */
.svp-hero-solo .svp-hero-in{grid-template-columns:1fr;}
/* GALLERY TUNNEL — Korridor aus Bildflaechen (public/assets/gallery-tunnel.js).
Seit Sitzung 19 auf zwei Seiten: /leistungen/social-media-content-immobilien/ und
/leistungen/. Der Tunnel liegt hinter dem Hero-Text, nicht daneben:
.svp-hero-tunnel macht den Hero zur Buehne, .tun fuellt sie aus, der Text sitzt
per z-index darueber in der Nebelmitte. */
.svp-hero-tunnel{position:relative;overflow:hidden;}
/* Mehr Luft als das geerbte .svp-hero{padding:34px 0 88px}: Bei nur 34px oben klebte
die Buehne fast an der Breadcrumb, und der Korridor selbst (.tun{inset:0} fuellt
genau diese Padding-Box) hatte kaum Tiefe zum Wirken. Eigene, deutlich groessere
Werte NUR fuer die Tunnel-Variante — die 8 Leistungsseiten mit .svp-hero-img
bleiben bei 34/88, dort besteht das Problem nicht (dort steht neben dem Text ein
ruhiges Standbild statt einer Buehne, die Raum braucht). */
.svp-hero-tunnel{padding:76px 0 148px;}
.svp-hero-tunnel .svp-hero-in{position:relative;z-index:2;grid-template-columns:1fr;text-align:center;justify-items:center;}
.svp-hero-tunnel .svp-lead{margin-left:auto;margin-right:auto;}
.svp-hero-tunnel .sect-cta{justify-content:center;}
/* Diese Regel steht spaeter im Stylesheet als der allgemeine 640px-Block weiter
oben und gewinnt daher bei gleicher Spezifitaet auch auf schmalen Schirmen —
ohne einen eigenen Ruecknahme-Wert wuerde die Desktop-Groesse 76/148 ungewollt
bis auf 375px durchschlagen. Kleiner als Desktop, aber immer noch spuerbar mehr
Luft als die 24/60 der Nicht-Tunnel-Heros. */
@media(max-width:640px){.svp-hero-tunnel{padding:52px 0 96px;}}
.tun{position:absolute;inset:0;overflow:hidden;background:var(--c0);
/* Fluchtweite setzt das JS inline (1200px auf einer 960px-Buehne, darunter
massstaeblich weniger) — sie muss mit der uebrigen Geometrie mitskalieren,
sonst stimmt die Verkuerzung auf schmalen Schirmen nicht mehr. Der Wert hier
ist nur der Rueckfall, falls das Skript nicht laeuft. */
perspective:1200px;z-index:0;}
/* Nullpunkt in die Mitte der Buehne: die Flaechen rechnen mit Koordinaten um die
Korridorachse, nicht ab der linken oberen Ecke. */
.tun-scene{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d;}
/* transform-origin auf die linke obere Ecke — die Rechnung im JS setzt das voraus. */
.tun-slab{position:absolute;left:0;top:0;transform-origin:0 0;backface-visibility:visible;
background-size:cover;background-position:center;background-repeat:no-repeat;}
/* Das Gitternetz der Vorlage ist ersatzlos entfallen: 1px-Linien auf stark
verkuerzten Flaechen treffen das Pixelraster nie sauber und flimmerten in der
Bewegung sichtbar. Ebenso die Flaechen an Boden und Decke — oben und unten
bleibt frei. Beides auf ausdrueckliche Ansage nach dem ersten Bau. */
/* Nebel: In der Vorlage blendet ein Fog-Shader zur Hintergrundfarbe aus. Hier ein
Verlauf ueber der Szene. Der Fluchtpunkt liegt in der Mitte, dort deckt Creme
also am staerksten — die weit entfernten Bilder tauchen daraus auf, statt hart
zu erscheinen. Erwuenschte Nebenwirkung: der Hero-Text sitzt genau in dieser
Flaeche und bleibt lesbar, waehrend die Bilder aussen vorbeiziehen. */
.tun-fog{position:absolute;inset:0;z-index:1;pointer-events:none;
background:radial-gradient(ellipse 50% 72% at 50% 50%,var(--c0) 0%,var(--c0) 40%,rgba(244,241,235,.92) 62%,rgba(244,241,235,0) 88%);}
/* Keine Breakpoint-Regel fuer den Korridor: die gesamte Geometrie skaliert im JS
mit der Buehnenbreite (masse()), Fluchtweite eingeschlossen. Eine zusaetzliche
Media Query wuerde nur gegen diese Rechnung arbeiten. */
/* =====================================================================
CONSENT — dritter Banner-Knopf, Einstellungsdialog, YouTube-Panel
---------------------------------------------------------------------
#cookie-banner, .cookie-text, .cookie-accept und .cookie-decline sind
unveraendert weiter oben definiert und werden hier nur ergaenzt.
===================================================================== */
.cookie-prefs{background:transparent;color:rgba(255,255,255,.4);border:none;padding:10px 8px;font-family:'Montserrat',sans-serif;font-size:.68rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;text-decoration:underline;text-underline-offset:3px;transition:color .3s;}
.cookie-prefs:hover{color:rgba(255,255,255,.75);}
/* Widerruf im Seitenfuss. Als