/* =========================================================
Wahibs Fahrschule, Gütersloh
Helles Theme. Markengrün #2E4719 aus der Bestandsseite.
Seit 24.09.2026 bunter: das Farbspektrum der Regenbogenwand
(--p1 bis --p9) ist zweite Designfarbe auf der ganzen Seite,
Hero als Regenbogen-Vorhang. Buttons bleiben im Markengrün,
Gold ausschließlich für Google-Sterne. Radius-System: Pillen für Interaktives,
30px Außenschale, 22px Innenkern, 14px Kleinteile.
========================================================= */
:root{
--paper:#FFFFFF;
--mist:#F5F7F1;
--mist-2:#EDF1E6;
--ink:#14180F;
--ink-2:#5C6654;
--line:rgba(20,24,15,.09);
--line-2:rgba(20,24,15,.17);
--green:#2E4719; /* Markengrün */
--green-2:#3D6021; /* Hover */
--green-3:#68913F; /* helle Variante für Flächen */
--green-tint:#EAF1E1;
--gold:#FBBC04;
--night:#0B1108;
--night-2:#131F0E;
/* Farbspektrum, direkt aus brand_assets/"Über uns.jpg" gemessen
(Regenbogenhintergrund des Gruppenfotos, Reihenfolge links nach
rechts). Nur in der Sektion "Über uns" im Einsatz, das Band endet
bewusst im Markengruen. */
--p1:#1785B0; --p2:#323C86; --p3:#643E71; --p4:#932D72; --p5:#C02581;
--p6:#C2302E; --p7:#BC7249; --p8:#C9C837; --p9:#88B844;
--prism:linear-gradient(90deg,var(--p1),var(--p2),var(--p3),var(--p4),var(--p5),var(--p6),var(--p7),var(--p8),var(--p9),var(--green));
/* Leuchtende Fassung fuer den Hero-Vorhang, gleiche Reihenfolge wie
die Wand im Laden: Tuerkis, Blau, Lila, Magenta, Pink, Rot, Orange,
Gelb, Gruen */
--vivid:linear-gradient(90deg,#12A3D8 0%,#2B3FB8 13%,#6A2FA0 25%,#B02D9A 37%,#E0338F 47%,#D8243A 58%,#E8652E 69%,#F2C230 80%,#8CC63F 91%,#2E8B3A 100%);
--dusk:#0A0B12;
--r-shell:30px;
--r-core:22px;
--r-sm:14px;
--ease:cubic-bezier(.32,.72,0,1);
--ease-soft:cubic-bezier(.16,1,.3,1);
--pad:clamp(20px,5vw,60px);
--maxw:1320px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
margin:0;background:var(--paper);color:var(--ink);
font-family:'Manrope',ui-sans-serif,system-ui,sans-serif;
font-size:17px;line-height:1.65;overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:8px}
/* ---------- Typografie ---------- */
.display{
font-family:'Archivo',ui-sans-serif,system-ui,sans-serif;
font-variation-settings:'wdth' 100,'wght' 700;
font-weight:700;line-height:1.02;letter-spacing:-.035em;margin:0;
}
h1.display{font-size:clamp(2.05rem,3.4vw,3.15rem)}
h2.display{font-size:clamp(1.95rem,3.6vw,3.1rem)}
h3{
font-family:'Archivo',sans-serif;font-variation-settings:'wdth' 100,'wght' 700;
font-weight:700;letter-spacing:-.02em;line-height:1.14;margin:0;
font-size:clamp(1.12rem,1.6vw,1.42rem);
}
p{margin:0}
.lead{font-size:clamp(1rem,1.2vw,1.14rem);color:var(--ink-2);max-width:min(60ch,100%)}
.kicker{
display:inline-flex;align-items:center;gap:9px;
font-family:'Archivo',sans-serif;font-variation-settings:'wght' 600;
font-size:11px;text-transform:uppercase;letter-spacing:.2em;
color:var(--ink);background:var(--paper);
border:1px solid var(--line);border-radius:999px;padding:7px 16px;
}
/* Jeder Kicker traegt den Farbpunkt im Spektrum */
.kicker::before{content:"";width:10px;height:10px;border-radius:999px;flex:none;background:var(--prism)}
.g-green{color:var(--green)}
/* ---------- Doppelrand ---------- */
.shell{
padding:8px;border-radius:var(--r-shell);
background:var(--paper);border:1px solid var(--line);
box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 30px 64px -34px rgba(24,44,12,.35);
}
.core{border-radius:var(--r-core);overflow:hidden;position:relative;background:var(--mist)}
/* ---------- Layout ---------- */
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}
section{position:relative}
.sec{padding-block:clamp(72px,10vw,142px)}
.sec-mist{background:var(--mist)}
.sec-head{display:grid;gap:18px;max-width:min(54ch,100%);margin-bottom:clamp(34px,4.4vw,58px)}
/* ---------- Buttons ---------- */
.btn{
display:inline-flex;align-items:center;gap:12px;white-space:nowrap;
font-family:'Archivo',sans-serif;font-variation-settings:'wght' 700;
font-size:15px;border-radius:999px;padding:11px 24px 11px 12px;
transition:transform .5s var(--ease),background-color .5s var(--ease),border-color .5s var(--ease),color .5s var(--ease);
}
.btn:active{transform:scale(.975)}
.btn .ico{width:34px;height:34px;border-radius:999px;display:grid;place-items:center;flex:none;
transition:transform .55s var(--ease),background-color .5s var(--ease)}
.btn .ico svg{width:16px;height:16px}
.btn-primary{background:var(--green);color:#fff;border:1px solid var(--green)}
.btn-primary .ico{background:rgba(255,255,255,.18)}
.btn-primary:hover{background:var(--green-2)}
.btn-primary:hover .ico{transform:translate(3px,-3px) scale(1.06);background:rgba(255,255,255,.26)}
.btn-ghost{background:var(--paper);color:var(--ink);border:1px solid var(--line-2)}
.btn-ghost .ico{background:var(--green-tint);color:var(--green)}
.btn-ghost:hover{border-color:var(--green);color:var(--green)}
.btn-ghost:hover .ico{transform:translate(3px,-3px) scale(1.06)}
.btn-sm{font-size:13.5px;padding:8px 18px 8px 9px}
.btn-sm .ico{width:28px;height:28px}
.btn-sm .ico svg{width:14px;height:14px}
.btn-xl{font-size:clamp(15px,1.15vw,17px);padding:13px 30px 13px 13px}
.btn-xl .ico{width:42px;height:42px}
.btn-xl .ico svg{width:19px;height:19px}
[dir="rtl"] .btn .ico svg{transform:scaleX(-1)}
/* ---------- Zielflaggen-Motiv ---------- */
.flagband{
height:12px;width:100%;
background-image:
linear-gradient(45deg,currentColor 25%,transparent 25%,transparent 75%,currentColor 75%),
linear-gradient(45deg,currentColor 25%,transparent 25%,transparent 75%,currentColor 75%);
background-size:12px 12px;background-position:0 0,6px 6px;opacity:.16;
}
/* =========================================================
Navigation
========================================================= */
.nav{position:fixed;inset:0 0 auto 0;z-index:60;padding-top:16px;transition:padding-top .6s var(--ease)}
.nav.compact{padding-top:8px}
.nav-inner{
width:min(var(--maxw),calc(100% - 28px));margin:0 auto;
display:flex;align-items:center;gap:14px;
padding:9px 9px 9px 18px;border-radius:999px;
background:rgba(255,255,255,.82);border:1px solid var(--line);
backdrop-filter:blur(20px) saturate(170%);-webkit-backdrop-filter:blur(20px) saturate(170%);
box-shadow:0 14px 40px -26px rgba(24,44,12,.5);
transition:background-color .6s var(--ease),box-shadow .6s var(--ease);
}
.nav.compact .nav-inner{background:rgba(255,255,255,.95);box-shadow:0 18px 44px -26px rgba(24,44,12,.55)}
.brand{display:flex;align-items:center;gap:11px;flex:none}
.brand img{height:30px;width:auto}
.brand-txt{display:flex;flex-direction:column;line-height:1}
.brand-txt b{font-family:'Archivo',sans-serif;font-variation-settings:'wght' 700;font-size:13.5px;letter-spacing:-.01em;text-transform:uppercase}
.brand-txt span{font-size:9.5px;color:var(--ink-2);letter-spacing:.14em;text-transform:uppercase;margin-top:3px}
.nav-links{display:flex;align-items:center;gap:2px;margin-inline-start:auto}
.nav-links a{position:relative;padding:8px 13px;border-radius:999px;font-size:14.5px;color:var(--ink-2);
transition:color .4s var(--ease),background-color .4s var(--ease)}
.nav-links a:hover{color:var(--ink);background:var(--mist)}
.nav-cta{display:flex;align-items:center;gap:8px;flex:none}
.nav-tel{display:none;width:40px;height:40px;border-radius:999px;place-items:center;
background:var(--green-tint);border:1px solid rgba(46,71,25,.16);color:var(--green)}
.nav-tel svg{width:17px;height:17px}
.burger{display:none;width:42px;height:42px;border-radius:999px;flex:none;
background:var(--mist);border:1px solid var(--line-2);position:relative}
.burger i{position:absolute;inset-inline-start:12px;width:18px;height:1.8px;background:var(--ink);border-radius:2px;
transition:transform .55s var(--ease)}
.burger i:nth-child(1){top:17px}
.burger i:nth-child(2){top:23px}
body.menu-open .burger i:nth-child(1){transform:translateY(3px) rotate(45deg)}
body.menu-open .burger i:nth-child(2){transform:translateY(-3px) rotate(-45deg)}
/* ---------- Sprachumschalter ---------- */
.lang{position:relative;flex:none}
.lang-btn{display:flex;align-items:center;gap:8px;padding:7px 12px 7px 9px;border-radius:999px;
border:1px solid var(--line-2);background:var(--paper);
transition:border-color .4s var(--ease),background-color .4s var(--ease)}
.lang-btn:hover{border-color:var(--green);background:var(--green-tint)}
.lang-btn .flag{width:22px;height:16px;border-radius:3px;overflow:hidden;flex:none;box-shadow:0 0 0 1px rgba(20,24,15,.1) inset}
.lang-btn .code{font-family:'Archivo',sans-serif;font-variation-settings:'wght' 700;font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.lang-btn .car{width:12px;height:12px;color:var(--ink-2);transition:transform .45s var(--ease)}
.lang[data-open="1"] .lang-btn .car{transform:rotate(180deg)}
.lang-menu{
position:absolute;inset-inline-end:0;top:calc(100% + 10px);min-width:196px;
background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:6px;
box-shadow:0 26px 60px -28px rgba(24,44,12,.5);
opacity:0;visibility:hidden;transform:translateY(-8px) scale(.98);transform-origin:top right;
transition:opacity .35s var(--ease),transform .35s var(--ease),visibility .35s;
z-index:5;
}
[dir="rtl"] .lang-menu{transform-origin:top left}
.lang[data-open="1"] .lang-menu{opacity:1;visibility:visible;transform:none}
.lang-menu button{display:flex;align-items:center;gap:11px;width:100%;padding:9px 12px;border-radius:12px;
font-size:14.5px;text-align:start;transition:background-color .3s var(--ease)}
.lang-menu button:hover{background:var(--mist)}
.lang-menu button[aria-current="true"]{background:var(--green-tint);color:var(--green);
font-family:'Archivo',sans-serif;font-variation-settings:'wght' 600}
.lang-menu .flag{width:24px;height:17px;border-radius:3px;overflow:hidden;flex:none;box-shadow:0 0 0 1px rgba(20,24,15,.1) inset}
/* ---------- Vollbildmenü ---------- */
.menu{position:fixed;inset:0;z-index:55;display:grid;align-content:center;justify-items:stretch;padding:var(--pad);
background:rgba(255,255,255,.94);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility .5s}
body.menu-open .menu{opacity:1;visibility:visible}
.menu a{display:block;overflow-wrap:break-word;font-family:'Archivo',sans-serif;font-variation-settings:'wght' 700;
font-size:clamp(1.8rem,8vw,3rem);line-height:1.12;letter-spacing:-.035em;padding:6px 0;
opacity:0;transform:translateY(30px);
transition:opacity .6s var(--ease),transform .6s var(--ease),color .3s var(--ease)}
.menu a:hover{color:var(--green)}
body.menu-open .menu a{opacity:1;transform:none}
body.menu-open .menu a:nth-child(1){transition-delay:.08s}
body.menu-open .menu a:nth-child(2){transition-delay:.14s}
body.menu-open .menu a:nth-child(3){transition-delay:.2s}
body.menu-open .menu a:nth-child(4){transition-delay:.26s}
body.menu-open .menu a:nth-child(5){transition-delay:.32s}
.menu-foot{margin-top:34px;display:flex;flex-wrap:wrap;gap:12px;min-width:0;opacity:0;transform:translateY(18px);
transition:opacity .6s var(--ease) .38s,transform .6s var(--ease) .38s}
body.menu-open .menu-foot{opacity:1;transform:none}
/* =========================================================
Hero
========================================================= */
.hero{position:relative;min-height:100dvh;display:flex;align-items:center;
padding-top:150px;padding-bottom:clamp(56px,7vw,96px);overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.1fr .9fr;
gap:clamp(30px,4vw,64px);align-items:center;width:100%}
.hero-grid > *{min-width:0}
.hero-copy{max-width:640px}
.hero h1{margin-top:22px}
.hero .lead{margin-top:22px;max-width:min(44ch,100%)}
/* Bewertungszeile im Hero, Aufbau: Sterne, Gesichter, Google, Text */
.stars{display:inline-flex;gap:1px}
.stars svg{width:15px;height:15px;fill:var(--gold)}
.gbadge{display:inline-flex;align-items:center;column-gap:10px;row-gap:7px;flex-wrap:wrap}
.gbadge + h1{margin-top:16px}
.gbadge .stars{gap:2px}
.gbadge .stars svg{width:17px;height:17px}
.gbadge .glogo{width:19px;height:19px;flex:none}
.gbadge .txt{font-size:clamp(.88rem,.98vw,1rem);color:var(--ink);line-height:1.35;white-space:nowrap}
.avatars{display:flex;align-items:center}
.avatars img{width:31px;height:31px;border-radius:999px;flex:none;
border:2px solid var(--paper);box-shadow:0 2px 8px -2px rgba(24,44,12,.35);background:var(--mist)}
.avatars img + img{margin-inline-start:-11px}
[dir="rtl"] .avatars{flex-direction:row-reverse}
[dir="rtl"] .avatars img + img{margin-inline-start:0;margin-inline-end:-11px}
/* Theoriezeiten direkt unter der Beschreibung */
.hero-fact{display:flex;align-items:flex-start;gap:11px;margin-top:16px;
font-size:clamp(.9rem,1vw,1rem);color:var(--ink);
font-family:'Archivo',sans-serif;font-variation-settings:'wght' 600;letter-spacing:-.005em}
.hero-fact__dot{width:9px;height:9px;border-radius:999px;flex:none;background:var(--green);
margin-top:.5em;box-shadow:0 0 0 4px var(--green-tint)}
/* CTA-Block */
.cta-box{margin-top:32px;display:inline-grid;gap:10px;justify-items:start;
padding:9px 9px 13px;border-radius:calc(var(--r-shell) - 4px);
background:var(--paper);border:1px solid var(--line);
box-shadow:0 22px 50px -32px rgba(24,44,12,.45)}
.cta-box .note{font-size:13px;color:var(--ink-2);padding-inline:14px}
.cta-box .note b{color:var(--ink);font-family:'Archivo',sans-serif;font-variation-settings:'wght' 700}
.hero-actions{margin-top:20px;display:flex;flex-wrap:wrap;gap:12px;align-items:flex-start}
.hero-actions > .btn{margin-top:9px}
/* Video-Karte, 16:9 */
.video-card .core{aspect-ratio:16/9;background:var(--mist-2)}
/* Hochformat, 9:16. Die drei Kundenvideos sind 478x850. */
.video-card--tall .core{aspect-ratio:9/16}
.video-card--tall .play{width:62px;height:62px}
.video-card--tall .play svg{width:21px;height:21px}
.video-card video,.video-card .poster{width:100%;height:100%;object-fit:cover}
.video-card .poster{position:absolute;inset:0}
.vc-tools{position:absolute;top:14px;inset-inline-end:14px;z-index:3;display:flex;gap:8px}
.vc-btn{width:44px;height:44px;border-radius:999px;display:grid;place-items:center;flex:none;
background:rgba(11,17,8,.62);color:#fff;border:1px solid rgba(255,255,255,.22);
backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
transition:transform .45s var(--ease),background-color .45s var(--ease)}
.vc-btn:hover{transform:scale(1.07);background:rgba(11,17,8,.85)}
.vc-btn svg{width:19px;height:19px}
/* Nur eines der beiden Ton-Symbole ist sichtbar, gesteuert ueber aria-pressed */
.vc-btn .ic{grid-area:1/1}
[data-sound] .ic-on{display:none}
[data-sound][aria-pressed="true"] .ic-off{display:none}
[data-sound][aria-pressed="true"] .ic-on{display:block}
[data-sound][aria-pressed="true"]{background:var(--green);border-color:var(--green)}
.vc-sound{position:absolute;top:14px;inset-inline-end:14px;width:44px;height:44px;border-radius:999px;
display:grid;place-items:center;background:rgba(11,17,8,.7);color:#fff;
backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
transition:transform .45s var(--ease),background-color .45s var(--ease)}
.vc-sound:hover{transform:scale(1.07);background:rgba(11,17,8,.85)}
.vc-sound svg{width:19px;height:19px}
.play{position:absolute;inset:0;margin:auto;width:74px;height:74px;border-radius:999px;display:grid;place-items:center;
background:var(--green);color:#fff;box-shadow:0 0 0 0 rgba(46,71,25,.4);
animation:pulse 3.2s var(--ease-soft) infinite;transition:transform .5s var(--ease),background-color .5s var(--ease)}
.play svg{width:24px;height:24px;margin-inline-start:4px}
.play:hover{transform:scale(1.07);background:var(--green-2)}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(46,71,25,.38)}70%{box-shadow:0 0 0 24px rgba(46,71,25,0)}100%{box-shadow:0 0 0 0 rgba(46,71,25,0)}}
.vc-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 16px 6px}
.vc-foot p{font-family:'Archivo',sans-serif;font-variation-settings:'wght' 700;font-size:13.5px;letter-spacing:-.01em}
.vc-foot small{display:block;color:var(--ink-2);font-family:'Manrope',sans-serif;font-weight:500;font-size:12.5px;margin-top:3px}
/* =========================================================
Flottenband, laufende Kia-Logos
Slotbreite = Logo + Abstand = 20vw, damit auf einem normalen
Laptop rund fuenf Logos gleichzeitig im Band stehen. Die zweite
.fleet__set ist die identische Kopie, deshalb ist -50% genau eine
Setbreite und der Lauf schlaegt ohne Sprung um.
========================================================= */
.fleet{
background:var(--paper);overflow:hidden;
border-block:1px solid var(--line);
padding-block:clamp(26px,3.4vw,44px);
--fleet-gap:clamp(58px,11vw,190px);
-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.fleet__track{display:flex;width:max-content;animation:fleetRun 52s linear infinite;will-change:transform}
.fleet__set{display:flex;align-items:center;gap:var(--fleet-gap);padding-inline-end:var(--fleet-gap)}
.fleet__logo{width:clamp(72px,9vw,150px);height:auto;flex:none}
@keyframes fleetRun{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
/* =========================================================
Leistungen, Bento
========================================================= */
.bento{display:grid;grid-template-columns:repeat(12,1fr);gap:14px}
.cell{position:relative;overflow:hidden;border-radius:var(--r-shell);border:1px solid var(--line);
background:var(--paper);display:flex;flex-direction:column;justify-content:flex-end;
min-height:230px;padding:26px;
box-shadow:0 20px 48px -36px rgba(24,44,12,.5);
transition:transform .7s var(--ease),box-shadow .7s var(--ease),border-color .7s var(--ease)}
.cell:hover{transform:translateY(-6px);box-shadow:0 34px 60px -34px rgba(24,44,12,.5);border-color:var(--line-2)}
.cell-media{position:absolute;inset:0;z-index:0}
.cell-media img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.cell:hover .cell-media img{transform:scale(1.05)}
.cell-media::after{content:"";position:absolute;inset:0;
background:linear-gradient(to top,rgba(255,255,255,.98) 0%,rgba(255,255,255,.92) 34%,rgba(255,255,255,.45) 72%,rgba(255,255,255,.1) 100%)}
/* Foto-Variante: dunkler Verlauf statt weissem, Text in Weiss.
Die hellen SVG-Platzhalter brauchten den weissen Verlauf, die
echten Fotos sind dunkel und tragen weisse Schrift deutlich besser. */
.cell.photo{background:var(--night);border-color:rgba(20,24,15,.2)}
.cell.photo .cell-media img{filter:saturate(1.08) contrast(1.06)}
.cell.photo .cell-media::after{
background:linear-gradient(to top,rgba(8,13,6,.92) 0%,rgba(8,13,6,.74) 30%,rgba(8,13,6,.26) 64%,rgba(8,13,6,.04) 100%)}
.cell.photo .cell-body{color:#fff}
.cell.photo .cell-body p{color:rgba(255,255,255,.8)}
.cell-body{position:relative;z-index:1}
.cell-body p{color:var(--ink-2);font-size:14.5px;margin-top:10px;max-width:min(40ch,100%);line-height:1.55}
.c-a{grid-column:span 12;min-height:clamp(320px,36vw,470px)}
.c-f{grid-column:span 12;min-height:0;background:var(--green);border-color:var(--green);color:#fff}
.cell-tint{background:var(--green-tint);border-color:rgba(46,71,25,.14)}
.banner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;padding:6px 0}
.banner h3{max-width:min(24ch,100%)}
.banner p{color:rgba(255,255,255,.78);margin-top:10px;max-width:min(48ch,100%);font-size:15px}
.c-f .btn-ghost{background:#fff;border-color:#fff}
.c-f .btn-ghost .ico{background:var(--green-tint);color:var(--green)}
.c-f .btn-ghost:hover{background:var(--green-tint);border-color:var(--green-tint)}
/* ---------- Unsere Vorteile ---------- */
.vorteile{margin-top:clamp(60px,7vw,96px)}
.vorteile-head{display:grid;gap:16px;justify-items:start;margin-bottom:clamp(26px,3.4vw,40px)}
.vorteile-head h3{font-size:clamp(1.5rem,2.6vw,2.15rem)}
.vorteile-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.vt{border-radius:var(--r-shell);border:1px solid rgba(46,71,25,.14);background:var(--green-tint);
padding:clamp(24px,2.6vw,32px);
transition:transform .7s var(--ease),box-shadow .7s var(--ease)}
.vt:hover{transform:translateY(-5px);box-shadow:0 30px 56px -36px rgba(24,44,12,.5)}
.vt-ico{width:44px;height:44px;border-radius:var(--r-sm);display:grid;place-items:center;
background:var(--paper);color:var(--green);border:1px solid rgba(46,71,25,.16);margin-bottom:18px}
.vt-ico svg{width:20px;height:20px}
.vt h4{margin:0;font-family:'Archivo',sans-serif;font-variation-settings:'wdth' 100,'wght' 700;
font-weight:700;letter-spacing:-.02em;font-size:clamp(1.05rem,1.4vw,1.28rem)}
.vt p{color:var(--ink-2);font-size:14.5px;margin-top:10px;line-height:1.55}
/* =========================================================
Über uns
========================================================= */
/* Farbebene nur fuer diese Sektion. Zwei weich gezeichnete Flaechen
in den Tonwerten des Gruppenfotos plus eine Haarlinie im Spektrum. */
.about-sec{overflow:hidden}
.about-sec::before{content:"";position:absolute;inset-inline:0;top:0;height:3px;background:var(--prism);opacity:.9;z-index:2}
.about-sec > .wrap{position:relative;z-index:1}
.prism{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.55}
.prism::before,.prism::after{content:"";position:absolute;border-radius:50%;filter:blur(94px)}
.prism::before{
width:54vw;height:54vw;max-width:700px;max-height:700px;top:-18%;inset-inline-start:-13%;
background:radial-gradient(circle,rgba(23,133,176,.5),rgba(50,60,134,.3) 46%,transparent 71%)}
.prism::after{
width:60vw;height:60vw;max-width:780px;max-height:780px;bottom:-24%;inset-inline-end:-15%;
background:radial-gradient(circle,rgba(192,37,129,.36),rgba(201,200,55,.26) 48%,transparent 73%)}
.kicker-prism{background:var(--paper);border-color:var(--line);color:var(--ink)}
.kicker-prism::before{content:"";width:10px;height:10px;border-radius:999px;flex:none;background:var(--prism)}
.prism-rule{display:block;width:136px;height:4px;border-radius:999px;background:var(--prism);margin:22px 0 2px}
.shell-prism{background:var(--prism);border-color:transparent;
box-shadow:0 30px 64px -32px rgba(60,20,70,.4)}
.about{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(34px,5vw,80px);align-items:center}
.about > *{min-width:0}
.about-facts{margin-top:32px;display:grid;gap:0}
.about-facts div{display:flex;gap:18px;align-items:baseline;padding:15px 0;border-top:1px solid var(--line)}
.about-facts dt{flex:none;width:106px;font-family:'Archivo',sans-serif;font-variation-settings:'wght' 600;
font-size:11px;letter-spacing:.17em;text-transform:uppercase;color:var(--green)}
.about-facts dd{margin:0;font-size:15.5px}
.about-stack{position:relative}
.about-stack .shot{transform:rotate(-1.5deg)}
.about-stack .shot .core{aspect-ratio:3/2}
.about-stack .shot img{width:100%;height:100%;object-fit:cover}
/* Claim-Karte sitzt wieder auf der unteren Ecke des Gruppenfotos */
.float-card{position:absolute;inset-inline-end:-6px;bottom:-44px;width:min(310px,70%);
padding:22px 24px;border-radius:var(--r-shell);background:var(--green);color:#fff;
box-shadow:0 34px 66px -34px rgba(24,44,12,.75);transform:rotate(1.8deg)}
.float-card b{display:block;font-family:'Archivo',sans-serif;font-variation-settings:'wght' 700;
font-size:clamp(1.3rem,2.2vw,1.72rem);line-height:1.05;letter-spacing:-.03em}
.float-card span{display:block;color:rgba(255,255,255,.8);font-size:13.5px;margin-top:9px;line-height:1.5}
/* Zweite Reihe: gleiche Spalten wie .about, das Video steht damit direkt
unter dem Text, der Begleittext rechts daneben unter dem Foto. Der obere
Abstand ist so gross, dass die Eckkarte (ragt 44px ueber das Foto) frei bleibt. */
.about-row{margin-top:clamp(88px,9vw,124px);display:grid;grid-template-columns:.95fr 1.05fr;
gap:clamp(34px,5vw,80px);align-items:center}
.about-row > *{min-width:0}
.about-row .video-card--tall{width:min(260px,100%)}
.about-note{max-width:46ch}
.about-note h3{margin-top:18px;font-size:clamp(1.4rem,2.4vw,2rem)}
.about-note p{color:var(--ink-2);font-size:clamp(.98rem,1.1vw,1.06rem);margin-top:14px;line-height:1.65}
/* ---------- Foto-Laufband ----------
Echter Scroll-Container statt CSS-Marquee: so laeuft er von selbst,
laesst sich aber gleichzeitig mit den Pfeilen, per Wischen und mit
der Tastatur bedienen. Der Inhalt steht zweimal drin, app.js setzt
die Scrollposition beim Umschlagen zurueck. */
.rail-nav{display:flex;gap:8px}
.rail-btn{width:46px;height:46px;border-radius:999px;display:grid;place-items:center;flex:none;
background:var(--paper);border:1px solid var(--line-2);color:var(--ink);
transition:background-color .45s var(--ease),color .45s var(--ease),border-color .45s var(--ease),transform .2s var(--ease)}
.rail-btn:hover{background:var(--green);color:#fff;border-color:var(--green)}
.rail-btn:active{transform:scale(.94)}
.rail-btn svg{width:17px;height:17px}
.galrail-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px;
margin-top:clamp(78px,9vw,130px);margin-bottom:22px}
.galrail-title{margin:0;font-family:'Archivo',sans-serif;font-variation-settings:'wdth' 100,'wght' 700;
font-weight:700;letter-spacing:-.025em;font-size:clamp(1.4rem,2.4vw,2rem)}
.galrail{display:flex;gap:14px;overflow-x:auto;overscroll-behavior-x:contain;
scrollbar-width:none;-ms-overflow-style:none;padding-bottom:4px;
-webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);
mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent)}
.galrail::-webkit-scrollbar{display:none}
.galtile{flex:0 0 clamp(168px,19vw,248px);aspect-ratio:4/5;margin:0;overflow:hidden;
border-radius:var(--r-core);border:1px solid var(--line);background:var(--paper);
box-shadow:0 20px 46px -34px rgba(24,44,12,.5)}
.galtile img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.galtile:hover img{transform:scale(1.06)}
.team{margin-top:clamp(68px,8vw,116px);display:grid;grid-template-columns:repeat(3,minmax(0,330px));gap:18px}
.person .core{aspect-ratio:4/5;background:var(--mist)}
.person img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.person:hover img{transform:scale(1.04)}
.person .core::after{content:"";position:absolute;inset:0;
background:linear-gradient(to top,rgba(11,17,8,.82) 0%,rgba(11,17,8,.1) 42%,transparent 62%)}
.person-tba .core{display:grid;place-items:center;background:var(--mist-2);
background-image:
linear-gradient(45deg,rgba(20,24,15,.055) 25%,transparent 25%,transparent 75%,rgba(20,24,15,.055) 75%),
linear-gradient(45deg,rgba(20,24,15,.055) 25%,transparent 25%,transparent 75%,rgba(20,24,15,.055) 75%);
background-size:26px 26px;background-position:0 0,13px 13px}
/* Die Platzhalterkarte ist hell, also dunkle Schrift statt weisser */
.person-tba .core::after{background:linear-gradient(to top,rgba(245,247,241,.97) 0%,rgba(245,247,241,.74) 30%,transparent 56%)}
.person-tba .person-name b{color:var(--ink)}
.person-tba .person-name span{color:var(--ink-2)}
.tba-mark{width:58px;height:58px;border-radius:999px;border:1.5px dashed var(--line-2);
display:block;position:relative}
.tba-mark::before,.tba-mark::after{content:"";position:absolute;background:var(--line-2)}
.tba-mark::before{inset-inline-start:50%;top:19px;width:1.5px;height:20px;transform:translateX(-50%)}
.tba-mark::after{inset-inline-start:19px;top:50%;width:20px;height:1.5px;transform:translateY(-50%)}
.tba-label{position:absolute;top:18px;inset-inline-start:18px;z-index:2;
font-family:'Archivo',sans-serif;font-variation-settings:'wght' 600;
font-size:10.5px;letter-spacing:.17em;text-transform:uppercase;color:var(--ink-2);
background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:6px 12px}
.person-name{position:absolute;inset-inline-start:20px;bottom:18px;z-index:2;color:#fff}
.person-name b{display:block;font-family:'Archivo',sans-serif;font-variation-settings:'wght' 700;font-size:17px;letter-spacing:-.02em}
.person-name span{display:block;color:rgba(255,255,255,.76);font-size:11px;letter-spacing:.16em;text-transform:uppercase;margin-top:5px;
font-family:'Archivo',sans-serif;font-variation-settings:'wght' 600}
/* =========================================================
Warum wir
Links das Fuhrpark-Video, das beim Scrollen stehen bleibt,
rechts die Gruende als nummerierte Liste. Die fruehere
horizontale Kartenreihe ist ersatzlos raus.
========================================================= */
.why-grid{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);
gap:clamp(36px,5vw,84px);align-items:start}
.why-media{position:sticky;top:112px}
.why-copy > .kicker{margin-bottom:18px}
.why-copy h2{margin-bottom:18px}
.why-copy .lead{margin-bottom:clamp(26px,3vw,40px)}
.reasons{list-style:none;margin:0 0 clamp(32px,4vw,48px);padding:0;
border-top:1px solid var(--line)}
.reason{display:flex;gap:clamp(18px,2.4vw,32px);align-items:flex-start;
padding:clamp(20px,2.4vw,30px) clamp(10px,1.4vw,18px);
border-bottom:1px solid var(--line);border-radius:var(--r-sm);
transition:background-color .5s var(--ease)}
.reason:hover{background:var(--green-tint)}
.reason__no{flex:none;width:44px;
font-family:'Archivo',sans-serif;font-variation-settings:'wdth' 100,'wght' 700;
font-size:clamp(1.5rem,2.2vw,2.1rem);line-height:1;letter-spacing:-.04em;
color:var(--line-2);font-variant-numeric:tabular-nums;
transition:color .5s var(--ease)}
.reason:hover .reason__no{color:var(--green)}
.reason__no::before{content:"0"}
.reason__body{min-width:0}
.reason h3{font-size:clamp(1.08rem,1.5vw,1.36rem)}
.reason p{color:var(--ink-2);font-size:15px;margin-top:9px;line-height:1.6;max-width:56ch}
/* =========================================================
Bewertungen, dunkler Block mit laufender Bilderwand
========================================================= */
.bst{position:relative;overflow:hidden;background:var(--night);color:#fff;
padding-block:clamp(56px,6vw,88px) clamp(26px,3vw,40px)}
.bst__wall{position:absolute;inset:-18% -14%;z-index:0;display:flex;gap:16px;transform:rotate(-8deg);pointer-events:none}
.bst__col{flex:1;display:flex;flex-direction:column;gap:16px;animation:wallUp 56s linear infinite;will-change:transform}
.bst__col:nth-child(even){animation-name:wallDown;animation-duration:68s}
.bst__col:nth-child(3n){animation-duration:80s}
@keyframes wallUp{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-50%,0)}}
@keyframes wallDown{from{transform:translate3d(0,-50%,0)}to{transform:translate3d(0,0,0)}}
.bst__tile{border-radius:16px;overflow:hidden;flex:none;box-shadow:0 10px 30px -14px rgba(0,0,0,.7)}
.bst__tile img{width:100%;height:auto;display:block}
.bst__veil{position:absolute;inset:0;z-index:1;pointer-events:none;
/* Heller als vorher: die Fotos sollen sichtbar bleiben. Dunkler nur
direkt hinter Ueberschrift und Karten, zu den Raendern hin offen. */
/* 25.09.2026: auf Wunsch nochmal leicht aufgehellt (je rund 0,07 weniger
Schleier), unten laeuft es weiter ganz ins Dunkle fuer den Anschluss. */
background:
radial-gradient(60% 40% at 50% 26%, rgba(10,11,18,.8) 0%, rgba(10,11,18,.55) 55%, rgba(10,11,18,.14) 100%),
linear-gradient(180deg, rgba(10,11,18,.72) 0%, rgba(10,11,18,.42) 26%, rgba(10,11,18,.48) 68%, var(--dusk) 100%)}
.bst__head{position:relative;z-index:2;display:grid;gap:14px;justify-items:center;text-align:center;
max-width:760px;margin:0 auto clamp(26px,3vw,40px)}
.bst__head .kicker{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2);color:#D8E8C4}
.bst__head h2{font-size:clamp(1.8rem,3.6vw,3rem);text-transform:uppercase;letter-spacing:-.03em}
.bst__head p{color:rgba(255,255,255,.76);font-size:clamp(1rem,1.2vw,1.14rem);max-width:min(58ch,100%)}
.rating{display:inline-flex;align-items:center;gap:12px;padding:11px 20px 11px 14px;border-radius:999px;
background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.2);
backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
transition:background-color .5s var(--ease),transform .5s var(--ease)}
.rating:hover{background:rgba(255,255,255,.16);transform:translateY(-2px)}
.rating .glogo{width:21px;height:21px;flex:none}
.rating b{font-family:'Archivo',sans-serif;font-variation-settings:'wght' 700;font-size:18px}
.rating span{color:rgba(255,255,255,.72);font-size:13.5px}
.rating .go{width:15px;height:15px;color:rgba(255,255,255,.72)}
.bst__rail{position:relative;z-index:2;overflow:hidden;
-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.bst__track{display:flex;gap:16px;width:max-content;animation:slide 72s linear infinite}
.bst__rail:hover .bst__track{animation-play-state:paused}
@keyframes slide{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.bst__card{flex:0 0 336px;border-radius:22px;border:1px solid rgba(255,255,255,.16);
background:rgba(14,14,24,.62);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
padding:22px;display:flex;flex-direction:column;gap:13px}
.bst__who{display:flex;align-items:center;gap:12px}
.bst__ava{width:42px;height:42px;border-radius:999px;display:grid;place-items:center;flex:none;
font-family:'Archivo',sans-serif;font-variation-settings:'wght' 700;font-size:14px;color:#0B1108}
.bst__who b{display:block;font-size:14.5px;font-family:'Archivo',sans-serif;font-variation-settings:'wght' 600}
.bst__who time{display:block;color:rgba(255,255,255,.6);font-size:12.5px;margin-top:2px}
.bst__card p{font-size:14.5px;line-height:1.6;color:rgba(255,255,255,.88)}
.bst__src{display:flex;align-items:center;gap:8px;color:rgba(255,255,255,.62);font-size:12px;margin-top:auto;padding-top:2px}
.bst__src svg{width:14px;height:14px}
.bst__note{position:relative;z-index:2;margin-top:18px;text-align:center;color:rgba(255,255,255,.7);font-size:13px;text-shadow:0 1px 8px rgba(0,0,0,.6)}
/* =========================================================
Grossansicht der Videos (Lightbox)
Kein echtes Vollbild: das Video steht zentriert und deutlich groesser
auf einem unscharfen Hintergrund. Die Groesse folgt dem Seitenverhaeltnis
--r (Breite / Hoehe), das app.js aus dem Video liest. Hochformat wird
ueber die Hoehe begrenzt, Querformat ueber die Breite, so bleibt 9:16
immer 9:16 und nichts wird beschnitten oder gestreckt.
========================================================= */
.lb{position:fixed;inset:0;z-index:100;display:grid;place-items:center;
padding:clamp(14px,3vw,44px);
opacity:0;visibility:hidden;
transition:opacity .4s var(--ease),visibility 0s linear .4s}
.lb.open{opacity:1;visibility:visible;transition:opacity .4s var(--ease)}
.lb__bg{position:absolute;inset:0;cursor:zoom-out;
background:rgba(8,13,6,.58);
-webkit-backdrop-filter:blur(22px) saturate(1.1);backdrop-filter:blur(22px) saturate(1.1)}
.lb__box{position:relative;overflow:hidden;background:#000;
border-radius:var(--r-shell);
aspect-ratio:var(--r,1.7778);
box-shadow:0 50px 120px -30px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.12);
transform:translateY(14px) scale(.95);
transition:transform .55s var(--ease)}
.lb.open .lb__box{transform:none}
/* Querformat: Breite begrenzt, Hoehe folgt */
.lb__box[data-tall="0"]{width:min(94vw,calc(86dvh * var(--r,1.7778)),1240px)}
/* Hochformat: Hoehe begrenzt, Breite folgt */
.lb__box[data-tall="1"]{height:min(90dvh,calc(94vw / var(--r,.5625)),980px)}
.lb__box video{position:absolute;inset:0;width:100%;height:100%;display:block;
object-fit:contain;background:#000}
.lb__close{position:absolute;z-index:2;top:clamp(12px,2vw,26px);inset-inline-end:clamp(12px,2vw,26px);
width:48px;height:48px}
.lb__close svg{width:20px;height:20px}
body.lb-open{overflow:hidden}
@media (prefers-reduced-motion:reduce){
.lb,.lb.open,.lb__box{transition-duration:.001ms}
.lb__box{transform:none}
}
@media (prefers-reduced-transparency:reduce){
.lb__bg{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(8,13,6,.94)}
}
/* =========================================================
Kontakt
========================================================= */
/* Sektion mit Foto-Hintergrund. Das Bild liegt als eigenes ![]()
darin statt als background-image, damit es lazy laedt und der
Browser es wie jedes andere Bild behandelt. */
.sec-shot{position:relative;overflow:hidden;background:var(--night);color:#fff}
.shot-bg{position:absolute;inset:0;z-index:0}
.shot-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 42%}
.shot-bg::after{content:"";position:absolute;inset:0;
background:
radial-gradient(75% 60% at 50% 30%, rgba(8,13,6,.72) 0%, rgba(8,13,6,.86) 55%, rgba(8,13,6,.94) 100%),
linear-gradient(180deg, rgba(8,13,6,.9) 0%, rgba(8,13,6,.8) 35%, rgba(8,13,6,.95) 100%)}
.sec-shot > .wrap{position:relative;z-index:1}
.sec-shot .lead{color:rgba(255,255,255,.78)}
.sec-shot .info-ico{background:rgba(255,255,255,.1);color:#D8E8C4;border-color:rgba(255,255,255,.2)}
.sec-shot .info-row b{color:rgba(255,255,255,.62)}
.sec-shot .info-row a:hover{color:#D8E8C4}
.sec-shot .hours{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16);
backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.sec-shot .hours h4{color:#D8E8C4}
.sec-shot .hours-group + .hours-group{border-top-color:rgba(255,255,255,.14)}
.sec-shot .hours-line span:first-child{color:rgba(255,255,255,.7)}
.sec-shot .shell{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.18);
box-shadow:0 40px 80px -40px rgba(0,0,0,.8)}
.contact{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(32px,4.5vw,64px);align-items:start}
.contact > *{min-width:0}
.info-block{display:grid;gap:20px}
.info-row{display:flex;gap:16px;align-items:flex-start}
.info-ico{width:42px;height:42px;border-radius:var(--r-sm);display:grid;place-items:center;flex:none;
background:var(--green-tint);color:var(--green);border:1px solid rgba(46,71,25,.14)}
.info-ico svg{width:18px;height:18px}
.info-row b{display:block;font-size:11px;letter-spacing:.17em;text-transform:uppercase;color:var(--ink-2);
font-family:'Archivo',sans-serif;font-variation-settings:'wght' 600;margin-bottom:5px}
.info-row a,.info-row p{font-size:16.5px;font-family:'Archivo',sans-serif;font-variation-settings:'wght' 600;letter-spacing:-.015em}
.info-row a{transition:color .35s var(--ease)}
.info-row a:hover{color:var(--green)}
.hours{margin-top:28px;border-radius:var(--r-shell);border:1px solid var(--line);background:var(--mist);padding:24px}
.hours h4{margin:0;font-family:'Archivo',sans-serif;font-variation-settings:'wght' 600;
font-size:11px;letter-spacing:.17em;text-transform:uppercase;color:var(--green)}
.hours-group + .hours-group{margin-top:20px;padding-top:20px;border-top:1px solid var(--line)}
.hours-line{display:flex;justify-content:space-between;gap:16px;font-size:15px;margin-top:9px}
.hours-line span:first-child{color:var(--ink-2)}
.hours-line span:last-child{font-family:'Archivo',sans-serif;font-variation-settings:'wght' 600;font-variant-numeric:tabular-nums}
form{display:grid;gap:18px}
.field{display:grid;gap:8px}
.field label{font-size:11px;letter-spacing:.17em;text-transform:uppercase;color:var(--ink-2);
font-family:'Archivo',sans-serif;font-variation-settings:'wght' 600}
.field input,.field textarea,.field select{
width:100%;padding:14px 16px;border-radius:var(--r-sm);
background:var(--paper);border:1px solid var(--line-2);color:var(--ink);
font-family:'Manrope',sans-serif;font-size:15.5px;
transition:border-color .4s var(--ease),box-shadow .4s var(--ease)}
.field textarea{min-height:130px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:#8C9584}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--green);
box-shadow:0 0 0 3px rgba(46,71,25,.12)}
.field .hint{font-size:12.5px;color:var(--ink-2)}
.field .err{font-size:12.5px;color:#B23B1E;display:none}
.field.invalid input,.field.invalid textarea{border-color:#B23B1E}
.field.invalid .err{display:block}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.consent{display:flex;gap:12px;align-items:flex-start;font-size:13.5px;color:var(--ink-2);line-height:1.55}
.consent input{width:18px;height:18px;flex:none;margin-top:3px;accent-color:var(--green)}
.consent a{color:var(--green);text-decoration:underline;text-underline-offset:2px}
.hp{position:absolute;inset-inline-start:-9999px;width:1px;height:1px;overflow:hidden}
.form-state{display:none;font-size:14.5px;padding:14px 16px;border-radius:var(--r-sm);
background:var(--green-tint);border:1px solid rgba(46,71,25,.2);color:var(--ink)}
.form-state.show{display:block}
.info-shot{margin:20px 0 0}
.info-shot .core{aspect-ratio:16/9}
.info-shot img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.info-shot:hover img{transform:scale(1.04)}
.map{margin-top:clamp(40px,5vw,70px)}
.map .core{aspect-ratio:12/5;background:var(--night-2)}
.map iframe{width:100%;height:100%;border:0;display:block}
.map-gate{position:absolute;inset:0;display:grid;place-items:center;text-align:center;
padding:clamp(24px,4vw,44px);
background:
radial-gradient(60% 60% at 50% 50%, rgba(46,71,25,.3) 0%, transparent 70%),
repeating-linear-gradient(135deg, rgba(255,255,255,.045) 0 2px, transparent 2px 13px),
var(--night-2)}
.map-gate__in{display:grid;gap:13px;justify-items:center;max-width:44ch}
.map-gate .kicker{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2);color:#D8E8C4}
.map-gate b{font-family:'Archivo',sans-serif;font-variation-settings:'wght' 700;
font-size:clamp(1.05rem,1.7vw,1.4rem);letter-spacing:-.02em;color:#fff}
.map-gate p{color:rgba(255,255,255,.66);font-size:14px;line-height:1.55}
.map-gate .btn{margin-top:4px}
.map-alt{color:rgba(255,255,255,.6);font-size:13px;text-decoration:underline;text-underline-offset:3px}
.map-alt:hover{color:#fff}
/* =========================================================
Footer
========================================================= */
footer{background:var(--night);color:#fff;padding-block:clamp(48px,6vw,80px) 26px}
footer .brand-txt span{color:rgba(255,255,255,.55)}
.foot-top{display:flex;flex-wrap:wrap;gap:30px;justify-content:space-between;align-items:flex-start}
.foot-nav{display:flex;flex-wrap:wrap;gap:24px}
.foot-nav a{color:rgba(255,255,255,.66);font-size:14.5px;transition:color .35s var(--ease)}
.foot-nav a:hover{color:#fff}
.foot-bot{margin-top:40px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12);
display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;color:rgba(255,255,255,.55);font-size:13px}
.foot-bot a:hover{color:#fff}
/* =========================================================
Rechtliche Unterseiten
========================================================= */
.legal{padding-top:160px;padding-bottom:clamp(64px,8vw,116px)}
.legal .shell{max-width:840px;margin-top:32px}
.legal .core{padding:clamp(24px,3.5vw,40px);background:var(--paper)}
.legal h2{font-family:'Archivo',sans-serif;font-variation-settings:'wght' 700;font-size:1.02rem;
letter-spacing:.01em;margin:26px 0 8px;text-transform:uppercase}
.legal h2:first-child{margin-top:0}
.legal p{color:var(--ink-2);font-size:15.5px;max-width:min(66ch,100%)}
.legal h3{font-family:'Archivo',sans-serif;font-variation-settings:'wght' 600;font-size:1rem;margin:20px 0 6px}
.legal a{color:var(--green);text-decoration:underline;text-underline-offset:2px;overflow-wrap:anywhere}
.legal ul{margin:0 0 1em;padding-inline-start:1.3em;color:var(--ink-2);font-size:15.5px;max-width:min(66ch,100%)}
.legal li{margin-bottom:.4em}
.legal .todo{border-inline-start:3px solid var(--green);padding:14px 0 14px 18px;margin-top:22px;
background:linear-gradient(90deg,var(--green-tint),transparent);border-radius:0 var(--r-sm) var(--r-sm) 0}
.legal .todo b{display:block;color:var(--green);font-family:'Archivo',sans-serif;
font-variation-settings:'wght' 600;font-size:11px;letter-spacing:.17em;text-transform:uppercase;margin-bottom:7px}
/* =========================================================
Scroll-Reveal
========================================================= */
.rv{opacity:0;transform:translateY(34px);
transition:opacity .9s var(--ease-soft),transform .9s var(--ease-soft)}
.rv.in{opacity:1;transform:none}
.rv[data-d="1"]{transition-delay:.08s}
.rv[data-d="2"]{transition-delay:.16s}
.rv[data-d="3"]{transition-delay:.24s}
.rv[data-d="4"]{transition-delay:.32s}
/* =========================================================
Responsive
========================================================= */
@media (max-width:1080px){
.hero-grid{grid-template-columns:1fr;gap:40px}
.about{grid-template-columns:1fr;gap:56px}
/* Medienspalte und Warum-wir nebeneinander wird zu eng */
.about-row{grid-template-columns:1fr;gap:28px}
.why-grid{grid-template-columns:1fr;gap:44px}
.why-media{position:static;max-width:340px}
.float-card{position:static;width:100%;transform:none;margin-top:18px}
.contact{grid-template-columns:1fr}
.vorteile-grid{grid-template-columns:1fr 1fr}
.reason__no{width:38px}
.team{grid-template-columns:repeat(2,minmax(0,330px))}
.c-a,.c-b,.c-c{grid-column:span 12}
.c-d,.c-e{grid-column:span 6}
.c-a,.c-b{min-height:290px}
}
@media (max-width:900px){
.nav-links{display:none}
.nav-tel{display:grid}
.burger{display:block}
.nav-cta .btn-primary{display:none}
.nav-inner{padding-inline-start:15px;gap:8px}
.lang-btn .code{display:none}
.lang-btn{padding:8px 10px}
}
@media (max-width:460px){
/* Auf schmalen Telefonen lief die Kopfzeile ueber: Logo-Schriftzug,
Sprachwahl, Telefon und Burger passten nicht nebeneinander und der
Burger rutschte aus dem Bild. Der Schriftzug entfaellt, die
Bildmarke traegt die Marke allein. */
.brand-txt{display:none}
.nav-inner{gap:6px;padding-inline:12px}
}
@media (max-width:720px){
body{font-size:16px}
.gbadge .txt{white-space:normal}
.wrap > *,.cell,.bst__card,.shell,.person,.hours{max-width:100%}
h1.display,h2.display,h3{overflow-wrap:break-word}
.hero{padding-top:118px;min-height:auto}
.cta-box{width:100%;justify-items:stretch}
.cta-box .btn{justify-content:flex-start}
.hero-actions .btn{width:100%}
.vorteile-grid{grid-template-columns:1fr}
.galrail-head .rail-nav{display:flex}
.galtile{flex-basis:clamp(150px,44vw,200px)}
.cell{padding:22px;min-height:200px}
.team{grid-template-columns:1fr;max-width:370px}
.map .core{aspect-ratio:3/4}
.about-row .video-card--tall{width:min(260px,100%)}
.why-media{max-width:none}
.reason{gap:14px;padding-inline:4px}
.reason__no{width:32px;font-size:1.3rem}
.grid-2{grid-template-columns:1fr}
.why-media{position:static}
.bst__card{flex-basis:78vw}
.about-facts dt{width:92px}
.map .core{aspect-ratio:4/3}
.play{width:60px;height:60px}
.play svg{width:20px;height:20px}
}
/* =========================================================
Reduzierte Bewegung und Transparenz
========================================================= */
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
transition-duration:.001ms !important}
.rv{opacity:1;transform:none}
.bst__track,.bst__col,.fleet__track{animation:none;transform:none}
.about-stack .shot,.float-card{transform:none}
}
@media (prefers-reduced-transparency:reduce){
.nav-inner,.menu{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(255,255,255,.98)}
.bst__card,.rating{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(255,255,255,.12)}
}
/* =========================================================
FARBRUNDE 24.09.2026
Wunsch: lebendiger und bunter, aber professionell. Vorbild ist
die Regenbogenwand im Laden (Hintergrund des Gruppenfotos) und
das Streifenmotiv, das Phil als Referenz geschickt hat.
========================================================= */
/* ---------- Hero: Regenbogen-Vorhang ---------- */
.hero{background:var(--dusk);color:#fff}
/* Farbschicht: Spektrum plus feine senkrechte Lichtstreifen */
.hero-bg::before{content:"";position:absolute;inset:0;
background:
linear-gradient(180deg, rgba(255,255,255,.2) 0%, rgba(255,255,255,0) 34%),
repeating-linear-gradient(90deg,
rgba(255,255,255,.13) 0 2px, transparent 2px 11px,
rgba(0,0,0,.2) 11px 14px, transparent 14px 26px,
rgba(255,255,255,.07) 26px 27px, transparent 27px 41px,
rgba(0,0,0,.12) 41px 47px, transparent 47px 63px),
var(--vivid)}
[dir="rtl"] .hero-bg::before{transform:scaleX(-1)}
/* Abdunklung: unten wie im Referenzbild ins Dunkle, links hinter dem
Text so viel, dass weisse Schrift sicher lesbar bleibt */
.hero-bg::after{content:"";position:absolute;inset:0;
background:
linear-gradient(180deg, rgba(10,11,18,.08) 0%, rgba(10,11,18,.2) 42%, rgba(10,11,18,.78) 82%, var(--dusk) 100%),
linear-gradient(90deg, rgba(10,11,18,.62) 0%, rgba(10,11,18,.44) 38%, rgba(10,11,18,.08) 64%, rgba(10,11,18,0) 100%)}
[dir="rtl"] .hero-bg::after{transform:scaleX(-1)}
/* Fallende Lichtstreifen, gebaut in app.js (buildSparks) */
.hero-sparks{position:absolute;inset:0;z-index:1;overflow:hidden;mix-blend-mode:screen}
.hero-sparks i{position:absolute;top:-40px;width:3px;border-radius:2px;opacity:0;
box-shadow:0 0 8px 1px rgba(255,255,255,.35);
animation:spark 10s linear infinite}
@keyframes spark{
0%{transform:translate3d(0,0,0);opacity:0}
12%{opacity:.95}
70%{opacity:.55}
100%{transform:translate3d(0,82vh,0);opacity:0}}
/* Schrift im Hero auf dunklem Grund */
.hero .lead{color:rgba(255,255,255,.86)}
.hero .gbadge .txt{color:#fff}
.hero .avatars img{border-color:#1A1B26}
.hero-fact{color:#fff}
.hero-fact__dot{background:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.18),0 0 0 7px rgba(242,194,48,.35)}
.hero h1{text-shadow:0 2px 30px rgba(10,11,18,.35)}
.hero .g-green{color:#fff} /* seit 25.09.2026 ganz weiss, vorher Verlaufsschrift */
.hero .cta-box{background:rgba(255,255,255,.96);border-color:rgba(255,255,255,.6);
box-shadow:0 30px 60px -28px rgba(0,0,0,.7)}
/* ---------- Hero: Vorstellungsvideo ----------
Hochformat-Karte mit Glasrahmen auf dem Regenbogen. Links daneben,
unten buendig, steht nur die Benennung des Videos. So steht links oben
die H1 und rechts unten das Video mit seiner Beschriftung. */
.hvideo{position:relative;justify-self:end;display:flex;align-items:flex-end;gap:clamp(14px,1.8vw,26px);margin-block:4px 10px}
.hvideo::before{content:"";position:absolute;z-index:-1;inset:8% -12% 14% 30%;border-radius:50%;
background:radial-gradient(closest-side,rgba(255,255,255,.26),transparent);filter:blur(30px)}
.hvideo__card{flex:none;width:clamp(250px,24vw,318px);transform:rotate(-1.5deg);
background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.4);
-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
box-shadow:0 50px 100px -36px rgba(0,0,0,.8)}
.hvideo__label{flex:0 1 250px;min-width:150px;margin:0 0 34px;display:grid;justify-items:end;gap:10px;text-align:end;color:#fff}
.hvideo__kicker{display:inline-flex;align-items:center;gap:9px;
font-family:'Archivo',sans-serif;font-variation-settings:'wght' 600;
font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.86);white-space:nowrap}
.hvideo__dur{padding:3px 9px;border-radius:999px;background:#fff;color:var(--ink);letter-spacing:.04em;font-size:11px}
.hvideo__title{font-family:'Archivo',sans-serif;font-variation-settings:'wdth' 100,'wght' 700;
font-size:clamp(1.15rem,1.7vw,1.55rem);line-height:1.08;letter-spacing:-.03em;
text-shadow:0 2px 20px rgba(10,11,18,.5)}
.hvideo__arrow{width:74px;height:auto;color:rgba(255,255,255,.8);margin-top:2px}
[dir="rtl"] .hvideo__arrow{transform:scaleX(-1)}
/* ---------- Sprachumschalter: zwei Flaggen fuer Aramaeisch ---------- */
.lang-btn .flag.flag--duo,.lang-menu .flag.flag--duo{width:auto;height:auto;display:flex;gap:3px;
overflow:visible;box-shadow:none;border-radius:0}
.flag--duo svg{border-radius:3px;box-shadow:0 0 0 1px rgba(20,24,15,.14)}
.lang-btn .flag--duo svg{width:22px;height:16px}
.lang-menu .flag--duo svg{width:24px;height:17px}
.lang-menu{min-width:220px}
/* ---------- Flottenband: Spektrumkante zum Hero ---------- */
.fleet{position:relative;border-top:0}
.fleet::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:var(--vivid)}
/* ---------- Leistungen ---------- */
#leistungen{overflow:hidden}
#leistungen::before,#leistungen::after{content:"";position:absolute;z-index:0;pointer-events:none;
border-radius:50%;filter:blur(90px);opacity:.28}
#leistungen::before{width:520px;height:520px;top:4%;inset-inline-end:-160px;
background:radial-gradient(circle,#E0338F,transparent 70%)}
#leistungen::after{width:560px;height:560px;bottom:-6%;inset-inline-start:-200px;
background:radial-gradient(circle,#12A3D8,transparent 70%)}
#leistungen > .wrap{position:relative;z-index:1}
/* Anmelde-Streifen im Spektrum statt einfarbig gruen */
.c-f{border-color:transparent;
background:
linear-gradient(90deg, rgba(10,11,18,.34), rgba(10,11,18,.12) 60%, rgba(10,11,18,.28)),
linear-gradient(100deg,#1785B0 0%,#323C86 22%,#932D72 46%,#C02581 60%,#C2302E 78%,#BC7249 100%)}
.c-f .banner p{color:rgba(255,255,255,.88)}
/* Vorteile: jede Karte in einem eigenen Ton der Wand */
.vt{--c:var(--green);--ct:var(--green-tint);background:var(--ct);border-color:rgba(20,24,15,.06);position:relative;overflow:hidden}
.vt::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:var(--c)}
.vt:nth-child(1){--c:#1785B0;--ct:#E6F4FA}
.vt:nth-child(2){--c:#C02581;--ct:#FBE8F2}
.vt:nth-child(3){--c:#D2771B;--ct:#FDF1E1}
.vt-ico{background:var(--c);color:#fff;border-color:transparent;
box-shadow:0 12px 24px -12px var(--c)}
/* Button auf der Autoführerschein-Karte, fuehrt zu leistungen.html */
.cell-cta{margin-top:18px;background:#fff;border-color:#fff;color:var(--ink)}
.cell-cta .ico{background:var(--green);color:#fff}
.cell-cta:hover{background:var(--green-tint);border-color:var(--green-tint);color:var(--green)}
/* Gruener Anmelde-Pfeil neben den Team-Karten in "Ueber uns" */
.team{grid-template-columns:repeat(3,minmax(0,330px)) auto;align-items:center}
.team-cta{display:grid;justify-items:center;gap:14px;padding:12px 8px;color:var(--green);text-align:center}
.team-cta__arrow{width:clamp(84px,7vw,104px);height:clamp(84px,7vw,104px);border-radius:999px;display:grid;place-items:center;
background:var(--green);color:#fff;box-shadow:0 22px 44px -18px rgba(46,71,25,.7);
animation:pulse 3.2s var(--ease-soft) infinite;
transition:transform .55s var(--ease),background-color .5s var(--ease)}
.team-cta__arrow svg{width:42%;height:42%;transition:transform .55s var(--ease)}
.team-cta:hover .team-cta__arrow{transform:scale(1.07);background:var(--green-2)}
.team-cta:hover .team-cta__arrow svg{transform:translateX(4px)}
[dir="rtl"] .team-cta__arrow svg{transform:scaleX(-1)}
[dir="rtl"] .team-cta:hover .team-cta__arrow svg{transform:scaleX(-1) translateX(4px)}
.team-cta__txt{font-family:'Archivo',sans-serif;font-variation-settings:'wght' 700;font-size:clamp(1rem,1.3vw,1.15rem);
letter-spacing:-.01em;white-space:nowrap}
/* ---------- Warum wir: Nummern im Spektrum ---------- */
.reason{--c:var(--green)}
.reason:nth-child(1){--c:#1785B0}
.reason:nth-child(2){--c:#323C86}
.reason:nth-child(3){--c:#932D72}
.reason:nth-child(4){--c:#C02581}
.reason:nth-child(5){--c:#C2302E}
.reason:nth-child(6){--c:#BC7249}
.reason__no{color:var(--c)}
.reason:hover{background:var(--mist)}
.reason:hover .reason__no{color:var(--c)}
.why{background:
radial-gradient(40% 30% at 100% 0%, rgba(242,194,48,.14), transparent 70%),
radial-gradient(40% 36% at 0% 100%, rgba(18,163,216,.12), transparent 70%)}
/* ---------- Bewertungen ---------- */
.bst{background:var(--dusk)}
.bst::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;z-index:3;background:var(--vivid)}
.bst__tile img{filter:saturate(1.06) brightness(.98)}
.bst__head h2,.bst__head p{text-shadow:0 2px 20px rgba(0,0,0,.55)}
.bst__head .kicker{background:rgba(10,11,18,.5);border-color:rgba(255,255,255,.24);color:#fff}
/* Google-Marke ganz oben in der Bewertungssektion */
.gmark{display:inline-flex;align-items:center;gap:12px;padding:11px 22px 11px 15px;border-radius:999px;
background:#fff;color:var(--ink);box-shadow:0 24px 50px -20px rgba(0,0,0,.75)}
.gmark .glogo{width:30px;height:30px;flex:none}
.gmark__word{display:flex;font-family:'Archivo',sans-serif;font-variation-settings:'wdth' 100,'wght' 600;
font-size:27px;line-height:1;letter-spacing:-.025em}
.gmark__word i{font-style:normal}
.gmark__word .b{color:#4285F4}.gmark__word .r{color:#EA4335}.gmark__word .y{color:#FBBC05}.gmark__word .g{color:#34A853}
.gmark__sep{width:1px;height:26px;background:var(--line-2)}
.gmark__txt{font-family:'Archivo',sans-serif;font-variation-settings:'wght' 600;font-size:15px;color:var(--ink-2)}
@media (max-width:720px){
.gmark{gap:10px;padding:9px 17px 9px 12px}
.gmark .glogo{width:24px;height:24px}
.gmark__word{font-size:22px}
.gmark__txt{font-size:13.5px}
}
/* Fotoreihe "Frisch bestanden": rund 7,5 Kacheln sichtbar, Rahmen im Spektrum */
/* Eigene Sektion "Frisch bestanden": dunkle Buehne, die nahtlos an die
Bewertungen anschliesst. Hinter der Fotoreihe liegt ein weich
gezeichnetes Regenbogen-Leuchten, die Kacheln stehen darauf wie auf
einem beleuchteten Regal. Laeuft nach rechts. (Die helle Pastell-
Variante vom 24.09. hat Phil nicht gefallen.) */
.sband{position:relative;overflow:hidden;background:var(--dusk);color:#fff;
padding-block:clamp(26px,3vw,40px) clamp(48px,5vw,76px)}
.sband::before{content:"";position:absolute;z-index:0;inset-inline:-10%;bottom:4%;height:58%;
background:var(--vivid);filter:blur(70px);opacity:.58;border-radius:50%}
.sband::after{content:"";position:absolute;z-index:0;inset-inline:6%;bottom:clamp(38px,4vw,62px);height:2px;
background:var(--vivid);opacity:.8;filter:blur(.5px)}
.sband > *{position:relative;z-index:1}
.sband .srail-head{margin-top:0;margin-bottom:16px}
.sband .srail-title{color:#fff;text-shadow:none}
.sband .srail-sub{margin-top:4px;color:rgba(255,255,255,.74);text-shadow:none}
.sband .rail-btn{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.28);color:#fff}
.sband .rail-btn:hover{background:#fff;color:var(--ink);border-color:#fff}
.sband .stile{background:#1A1B26;box-shadow:0 24px 44px -20px rgba(0,0,0,.9)}
.srail-head{position:relative;z-index:2;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
gap:18px;margin-top:clamp(52px,6vw,84px);margin-bottom:20px}
.srail-title{margin:0;font-family:'Archivo',sans-serif;font-variation-settings:'wdth' 100,'wght' 700;
font-weight:700;letter-spacing:-.025em;font-size:clamp(1.5rem,2.6vw,2.2rem);color:#fff;
text-shadow:0 2px 18px rgba(0,0,0,.6)}
.srail-sub{margin-top:6px;color:rgba(255,255,255,.86);font-size:15px;text-shadow:0 1px 10px rgba(0,0,0,.6)}
.rail-nav--dark .rail-btn{background:rgba(10,11,18,.5);border-color:rgba(255,255,255,.34);color:#fff;
backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.rail-nav--dark .rail-btn:hover{background:#fff;color:var(--ink);border-color:#fff}
.srail{position:relative;z-index:2;display:flex;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;
scrollbar-width:none;-ms-overflow-style:none;padding-block:8px;
-webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);
mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent)}
.srail::-webkit-scrollbar{display:none}
.srail:focus-visible{outline-offset:-3px}
.stile{--c:#fff;flex:0 0 max(128px,calc((100vw - 7 * 12px) / 7.5));aspect-ratio:3/4;margin:0;overflow:hidden;
border-radius:18px;border:3px solid var(--c);background:#1A1B26;
box-shadow:0 18px 40px -20px rgba(0,0,0,.85)}
.stile img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.stile:hover img{transform:scale(1.06)}
.stile:nth-child(9n+1){--c:#4FC3F0}
.stile:nth-child(9n+2){--c:#8C95F0}
.stile:nth-child(9n+3){--c:#C58BD8}
.stile:nth-child(9n+4){--c:#F07BC4}
.stile:nth-child(9n+5){--c:#FF8A7A}
.stile:nth-child(9n+6){--c:#F7B27E}
.stile:nth-child(9n+7){--c:#F2E45E}
.stile:nth-child(9n+8){--c:#BDEB7A}
.stile:nth-child(9n+9){--c:#7FD69A}
/* ---------- Social Media: Instagram und TikTok in Markenfarben ---------- */
.social{padding-block:clamp(56px,7vw,100px);background:var(--mist)}
.social-head{display:grid;gap:14px;justify-items:start;margin-bottom:clamp(26px,3vw,40px)}
.social-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.soc{position:relative;overflow:hidden;display:flex;align-items:center;gap:clamp(14px,1.8vw,22px);
padding:clamp(20px,2.4vw,30px);border-radius:var(--r-shell);color:#fff;
box-shadow:0 30px 60px -34px rgba(20,24,40,.7);
transition:transform .6s var(--ease),box-shadow .6s var(--ease)}
.soc:hover{transform:translateY(-5px);box-shadow:0 40px 70px -34px rgba(20,24,40,.75)}
/* Instagram: der offizielle Verlauf des App-Icons */
.soc--ig{background:radial-gradient(circle at 30% 107%,#FDF497 0%,#FDF497 5%,#FD5949 45%,#D6249F 60%,#285AEB 90%)}
/* leichte Abdunklung links, damit weisse Schrift auch auf dem Gelb lesbar bleibt */
.soc--ig::before{content:"";position:absolute;inset:0;pointer-events:none;
background:linear-gradient(90deg,rgba(60,10,40,.2) 0%,rgba(60,10,40,.08) 50%,rgba(60,10,40,0) 75%)}
.soc--ig .soc__txt{text-shadow:0 1px 10px rgba(60,10,40,.45)}
.soc--ig .soc__txt span{color:#fff;font-weight:600}
/* TikTok: Schwarz mit Tuerkis und Rot aus dem Logo */
.soc--tt{background:#010101}
.soc--tt::before,.soc--tt::after{content:"";position:absolute;width:260px;height:260px;border-radius:50%;filter:blur(70px);opacity:.45;pointer-events:none}
.soc--tt::before{background:#25F4EE;top:-120px;inset-inline-start:-80px}
.soc--tt::after{background:#FE2C55;bottom:-130px;inset-inline-end:-60px}
.soc > *{position:relative;z-index:1}
.soc__icon{flex:none;width:clamp(56px,5vw,68px);height:clamp(56px,5vw,68px);border-radius:20px;display:grid;place-items:center;
background:#fff;box-shadow:0 12px 26px -12px rgba(0,0,0,.45)}
.soc__icon svg{width:58%;height:58%}
.soc--tt .soc__icon{background:#000;border:1px solid rgba(255,255,255,.16)}
.soc--tt .soc__icon svg{width:56%;height:56%}
.soc__txt{flex:1;min-width:0;display:grid;gap:3px}
.soc__txt b{font-family:'Archivo',sans-serif;font-variation-settings:'wght' 700;font-size:clamp(1.2rem,1.8vw,1.5rem);letter-spacing:-.02em;line-height:1.1}
.soc__txt span{font-size:14.5px;color:rgba(255,255,255,.86);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.soc__cta{flex:none;display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border-radius:999px;
font-family:'Archivo',sans-serif;font-variation-settings:'wght' 700;font-size:14.5px;
transition:transform .5s var(--ease)}
.soc__cta svg{width:15px;height:15px}
.soc:hover .soc__cta{transform:scale(1.05)}
.soc--ig .soc__cta{background:#fff;color:#C13584}
/* TikToks Folgen-Button ist genau dieses Rot */
.soc--tt .soc__cta{background:#FE2C55;color:#fff}
/* ---------- Kontakt: Symbole im Spektrum ---------- */
.info-row{--c:#D8E8C4}
.info-row:nth-child(1){--c:#4FC3F0}
.info-row:nth-child(2){--c:#C58BD8}
.info-row:nth-child(3){--c:#F07BC4}
.info-row:nth-child(4){--c:#F7B27E}
.sec-shot .info-ico{color:var(--c);background:rgba(255,255,255,.08);border-color:var(--c)}
.sec-shot::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;z-index:2;background:var(--vivid)}
/* ---------- Unterseite: Kopf im Regenbogen-Vorhang ---------- */
.hero.subhero{min-height:0;display:block;padding-top:clamp(128px,14vw,170px);padding-bottom:clamp(54px,6vw,86px)}
.subhero .wrap{position:relative;z-index:1}
.subhero .kicker{background:rgba(10,11,18,.4);border-color:rgba(255,255,255,.28);color:#fff}
.subhero h1{margin-top:18px;font-size:clamp(2.2rem,5vw,4rem)}
.subhero .lead{margin-top:16px}
.back-link{display:inline-flex;align-items:center;gap:8px;margin-bottom:22px;color:rgba(255,255,255,.86);font-size:14.5px}
.back-link svg{width:16px;height:16px}
.back-link:hover{color:#fff}
[dir="rtl"] .back-link svg{transform:scaleX(-1)}
/* ---------- Footer ---------- */
.prism-line{height:4px;width:100%;border-radius:999px;background:var(--vivid)}
/* ---------- Responsive ---------- */
@media (max-width:1080px){
.hero-grid{grid-template-columns:1fr}
.hvideo{justify-self:center}
.team{grid-template-columns:repeat(2,minmax(0,330px))}
.team-cta{grid-column:1/-1;margin-top:8px}
/* einspaltig liegt der Text ueber allen Farben, also gleichmaessig abdunkeln */
.hero-bg::after{background:
linear-gradient(180deg, rgba(10,11,18,.4) 0%, rgba(10,11,18,.5) 45%, rgba(10,11,18,.82) 85%, var(--dusk) 100%)}
.stile{flex-basis:calc((100vw - 5 * 12px) / 5.5)}
}
@media (max-width:720px){
/* Handy: Leistungen kompakt, ohne Untertexte (Wunsch 24.09.2026) */
.c-a .cell-body p,.c-f .banner p{display:none}
.c-a{min-height:230px}
.c-f{min-height:0;padding:14px 14px 14px 20px;justify-content:center}
.c-f .banner{flex-wrap:nowrap;gap:14px;padding:0}
.c-f .banner h3{font-size:1.02rem;line-height:1.2}
.c-f .btn{font-size:13px;padding:7px 14px 7px 7px;gap:9px}
.c-f .btn .ico{width:28px;height:28px}
.c-f .btn .ico svg{width:13px;height:13px}
.social-grid{grid-template-columns:1fr}
.team{grid-template-columns:1fr}
.cell-cta{margin-top:14px}
.soc{padding:16px;gap:12px}
.soc__icon{width:48px;height:48px;border-radius:15px}
.soc__txt b{font-size:1.1rem}
.soc__txt span{font-size:13px}
.soc__cta{padding:8px 12px;font-size:13px;gap:6px}
.soc__cta svg{width:13px;height:13px}
.hvideo__card{width:min(270px,72vw)}
/* auf dem Handy steht die Beschriftung unter dem Video */
.hvideo{flex-direction:column-reverse;align-items:center}
.hvideo__label{flex:none;margin:0;justify-items:center;text-align:center}
.hvideo__arrow{display:none}
.stile{flex-basis:calc((100vw - 3 * 10px) / 3.3);border-radius:14px}
.srail{gap:10px}
.srail-head{align-items:flex-start}
#leistungen::before,#leistungen::after{display:none}
}
@media (prefers-reduced-motion:reduce){
.hero-sparks{display:none}
.hvideo__card{transform:none}
}
/* =========================================================
DETAILRUNDE 25.09.2026
Wunsch: mehr Details, mehr Bewegung, Smooth- und Parallax-
Scrolling, nichts soll steril wirken, alles handytauglich.
- Parallax laeuft ueber CSS-Scroll-Timelines, also weiter ohne
scroll-Listener. Nur wo der Browser das kann (@supports) und nur
ohne "weniger Bewegung". Sonst steht alles ruhig da.
- Smooth-Scroll per Mausrad baut app.js (initSmoothScroll), nur auf
Geraeten mit Maus, auf dem Handy bleibt natives Scrollen.
========================================================= */
@property --ang{syntax:'';inherits:false;initial-value:0deg}
@keyframes angSpin{to{--ang:360deg}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes wave{50%{transform:skewY(-6deg) scaleX(.93)}}
@keyframes bob{50%{translate:0 -9px}}
@keyframes dash26{to{background-position:-26px 0}}
@keyframes dash64{to{background-position:-64px 0}}
html.smooth{scroll-behavior:auto}
/* ---------- Scroll-Fortschritt ganz oben, im Spektrum ---------- */
.sprog{position:fixed;inset:0 0 auto 0;height:3px;z-index:80;pointer-events:none}
.sprog i{display:block;height:100%;background:var(--vivid);transform-origin:0 50%;transform:scaleX(0);
box-shadow:0 0 14px rgba(224,51,143,.5)}
[dir="rtl"] .sprog i{transform-origin:100% 50%}
@keyframes sprog{to{transform:scaleX(1)}}
@supports (animation-timeline: scroll()){
.sprog i{animation:sprog linear both;animation-duration:auto;animation-timeline:scroll(root block)}
}
@supports not (animation-timeline: scroll()){ .sprog{display:none} }
/* ---------- Kicker: der Farbpunkt dreht sich langsam ---------- */
.kicker::before,.kicker-prism::before{
background:conic-gradient(#12A3D8,#6A2FA0,#E0338F,#E8652E,#F2C230,#8CC63F,#12A3D8);
animation:spin 5s linear infinite}
/* ---------- Ueberschriften: Woerter steigen nacheinander auf ----------
app.js zerlegt die H2 in Woerter (data-split) und setzt die Verzoegerung. */
[data-split].rv{opacity:1;transform:none}
[data-split] .w{display:inline-block;opacity:0;transform:translate3d(0,.5em,0) rotate(2deg);
transition:opacity .8s var(--ease-soft),transform 1s var(--ease-soft)}
[data-split].in .w{opacity:1;transform:none}
/* ---------- Buttons: shiny wie auf der PRE-Fahrschule-Seite (Runde 2, 25.09.2026) ----------
Uebernommen aus PRE (input.css, .btn-accent): dauerhafter Glanz auf der
oberen Haelfte (::before) und ein Lichtstrahl, der alle 3,4 s drueberlaeuft
(::after), beim Hovern leicht anheben mit farbigem Schein. Hier fuer alle
Buttons. Weisse Buttons bekommen statt Weiss auf Weiss einen zarten
Regenbogen-Schimmer, passend zum Spektrum der Seite. Das Anheben laeuft
ueber translate, damit es nicht mit dem Einblenden (.rv, transform) kollidiert. */
@keyframes btnSweep{0%{transform:translateX(0) skewX(-20deg)}35%,100%{transform:translateX(460%) skewX(-20deg)}}
@keyframes socSweep{to{transform:translateX(560%) skewX(-18deg)}}
.btn,.team-cta__arrow,.soc__cta{position:relative;isolation:isolate;overflow:hidden}
.btn::before,.team-cta__arrow::before,.soc__cta::before{content:"";position:absolute;inset:0;z-index:-1;
border-radius:inherit;pointer-events:none;
background:linear-gradient(180deg,rgba(255,255,255,.4) 0%,rgba(255,255,255,.1) 40%,rgba(255,255,255,0) 60%)}
.btn::after,.team-cta__arrow::after,.soc__cta::after,.sochip::after{content:"";position:absolute;z-index:-1;
top:0;bottom:0;left:-75%;width:45%;pointer-events:none;
background:linear-gradient(115deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.72) 50%,rgba(255,255,255,0) 100%);
transform:skewX(-20deg);animation:btnSweep 3.4s ease-in-out infinite}
.btn{transition:translate .3s cubic-bezier(.34,1.56,.64,1),transform .5s var(--ease),box-shadow .35s var(--ease),
filter .35s var(--ease),background-color .5s var(--ease),border-color .5s var(--ease),color .5s var(--ease)}
.btn:hover{translate:0 -2px;filter:brightness(1.06)}
.btn:active{translate:0 0}
/* Gruen: leichter Verlauf fuer Tiefe, bleibt im Markengruen */
.btn-primary{background:linear-gradient(135deg,#557F30 0%,var(--green) 52%,#1F3310 100%);border-color:#263D14;
box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 10px 22px -12px rgba(46,71,25,.75)}
.btn-primary:hover{background:linear-gradient(135deg,#5E8C36 0%,#34521C 52%,#243B13 100%);
box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 1px 2px rgba(46,71,25,.35),0 18px 34px -12px rgba(104,145,63,.75)}
/* Weiss: Glanz plus Regenbogen-Schimmer */
.btn-ghost{background:linear-gradient(180deg,#FFFFFF 0%,#F1F4EC 100%);
box-shadow:inset 0 1px 0 #fff,0 10px 22px -16px rgba(24,44,12,.55)}
.btn-ghost::before{background:linear-gradient(180deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,0) 55%)}
.btn-ghost::after,.soc--ig .soc__cta::after{
background:linear-gradient(115deg,rgba(255,255,255,0) 0%,rgba(18,163,216,.22) 30%,rgba(224,51,143,.24) 50%,rgba(242,194,48,.24) 70%,rgba(255,255,255,0) 100%)}
.btn-ghost:hover{box-shadow:inset 0 1px 0 #fff,0 16px 30px -14px rgba(24,44,12,.45)}
/* WhatsApp: Original-Gruen nur links und im Logo, der Textbereich im
dunkleren WhatsApp-Gruen, damit weisse Schrift lesbar bleibt (5:1). */
.btn-wa{background:linear-gradient(135deg,#25D366 0%,#12946A 30%,#0F7E62 55%,#0C6B5B 100%);color:#fff;
border:1px solid #0E7A5E;text-shadow:0 1px 1px rgba(0,50,35,.35);
box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 10px 22px -12px rgba(15,126,98,.75)}
.btn-wa .ico{background:#fff;color:#25D366;box-shadow:0 2px 6px -2px rgba(0,60,40,.45)}
.btn-wa .ico svg{width:18px;height:18px}
.btn-xl.btn-wa .ico svg{width:22px;height:22px}
.btn-wa:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 1px 2px rgba(37,211,102,.35),0 18px 34px -12px rgba(37,211,102,.6)}
.btn-wa:hover .ico{transform:rotate(-10deg) scale(1.08)}
.btn-wa::after{animation-delay:.45s}
[dir="rtl"] .btn-wa .ico svg{transform:none}
/* Hero: Anmelden und WhatsApp nebeneinander in der weissen Box */
.cta-row{display:flex;flex-wrap:wrap;gap:10px}
/* Buttons im Handy-Menue: .menu a (grosse Menueschrift) hat sie bisher mit
aufgeblasen (83 px hoch) und beim Hovern gruen auf gruen gefaerbt.
Zurueck auf normale Buttongroesse, untereinander in voller Breite. */
.menu .menu-foot .btn{display:inline-flex;flex:1 1 220px;font-size:15px;line-height:1.3;letter-spacing:0;
padding:11px 24px 11px 12px}
.menu .menu-foot .btn-primary,.menu .menu-foot .btn-wa{color:#fff}
.menu .menu-foot .btn-ghost{color:var(--ink)}
/* Kontakt: WhatsApp dort, wo bis 25.09.2026 das Schaufenster-Foto stand */
.kontakt-wa{margin-top:22px}
/* runder Anmelde-Pfeil in Ueber uns bekommt denselben Glanz */
.team-cta__arrow{background:linear-gradient(135deg,#557F30 0%,var(--green) 52%,#1F3310 100%)}
/* ---------- Lichtkegel, der dem Mauszeiger folgt (app.js setzt --mx/--my) ---------- */
.spot{--mx:50%;--my:50%}
.spot::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;
background:radial-gradient(420px circle at var(--mx) var(--my),rgba(255,255,255,.17),transparent 62%);
opacity:0;transition:opacity .5s var(--ease)}
.spot:hover::after{opacity:1}
/* ---------- Navigation: aktiver Bereich bekommt Pille und Farbpunkt ---------- */
.nav-links a.is-active,.nav-links a[aria-current="page"]{color:var(--ink);background:var(--mist)}
.nav-links a.is-active::after,.nav-links a[aria-current="page"]::after{content:"";position:absolute;left:50%;bottom:3px;
width:5px;height:5px;border-radius:999px;transform:translateX(-50%);
background:conic-gradient(#12A3D8,#E0338F,#F2C230,#8CC63F,#12A3D8)}
/* ---------- Siegel: drehender Schriftring mit Symbol in der Mitte ---------- */
.seal{position:absolute;display:grid;place-items:center;width:var(--s,112px);height:var(--s,112px);
border-radius:999px;pointer-events:none}
.seal__ring{position:absolute;inset:0;width:100%;height:100%;animation:spin 20s linear infinite}
.seal__ring text{font-family:'Archivo',sans-serif;font-variation-settings:'wght' 700;font-size:11.5px;letter-spacing:.12em;fill:currentColor}
.seal__core{position:relative;width:44%;height:44%;border-radius:999px;display:grid;place-items:center;
background:var(--green);color:#fff;box-shadow:0 10px 24px -8px rgba(0,0,0,.55)}
.seal__core svg{width:54%;height:54%;transition:transform .9s var(--ease)}
.flag-cloth{transform-box:fill-box;transform-origin:0 50%;animation:wave 2.4s ease-in-out infinite}
/* =========================================================
Autofuehrerschein-Karte (Startseite und Leistungen)
Foto bleibt, dazu: drehender Spektrum-Rand, Siegel mit Lenkrad,
Fakten-Chips, Strasse mit fahrendem Auto, Lichtkegel.
========================================================= */
.lcard{isolation:isolate;padding-bottom:50px}
.lcard .cell-body{z-index:3}
.lcard h3{font-size:clamp(1.55rem,2.7vw,2.5rem);letter-spacing:-.035em;line-height:1}
.lcard .cell-media{transform:scale(1.1);transition:transform 1.8s var(--ease-soft)}
.lcard.in .cell-media{transform:none}
.lcard__ring{position:absolute;inset:0;z-index:4;pointer-events:none;border-radius:inherit;padding:2px;
background:conic-gradient(from var(--ang),#12A3D8,#2B3FB8,#6A2FA0,#E0338F,#D8243A,#E8652E,#F2C230,#8CC63F,#12A3D8);
-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
-webkit-mask-composite:xor;mask-composite:exclude;
opacity:.6;animation:angSpin 7s linear infinite paused;transition:opacity .6s var(--ease)}
.lcard:hover .lcard__ring{opacity:1;animation-play-state:running}
.lcard__chips{position:absolute;z-index:3;top:24px;inset-inline-start:24px;max-width:calc(100% - 190px);
margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.lcard__chips li{--c:#1785B0;display:inline-flex;align-items:center;gap:8px;padding:7px 14px 7px 7px;border-radius:999px;
background:rgba(255,255,255,.93);color:var(--ink);font-family:'Archivo',sans-serif;font-variation-settings:'wght' 600;
font-size:13px;line-height:1.1;box-shadow:0 14px 28px -16px rgba(0,0,0,.7);
opacity:0;transform:translateY(-10px);transition:opacity .7s var(--ease-soft) .5s,transform .7s var(--ease-soft) .5s}
.lcard__chips li:nth-child(2){--c:#C02581;transition-delay:.62s}
.lcard__chips li:nth-child(3){--c:#E8652E;transition-delay:.74s}
.lcard.in .lcard__chips li{opacity:1;transform:none}
.lcard__chips i{width:22px;height:22px;border-radius:999px;display:grid;place-items:center;flex:none;background:var(--c);color:#fff}
.lcard__chips svg{width:12px;height:12px}
.lcard__seal{--s:118px;top:22px;inset-inline-end:22px;z-index:3;color:#fff;
background:rgba(10,11,18,.3);border:1px solid rgba(255,255,255,.3);
-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.lcard:hover .seal__core svg{transform:rotate(-100deg)}
/* Strasse mit Mittelstreifen und fahrendem Auto am unteren Rand */
.lcard__road{position:absolute;z-index:2;inset-inline:26px;bottom:12px;height:24px;pointer-events:none;container-type:inline-size;
overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.lcard__road::before{content:"";position:absolute;left:0;right:-26px;bottom:3px;height:2px;border-radius:2px;opacity:.75;
background:repeating-linear-gradient(90deg,rgba(255,255,255,.7) 0 14px,transparent 14px 26px);
animation:dashMove26 1.6s linear infinite}
@keyframes dashMove26{to{transform:translateX(-26px)}}
.car-ico{position:absolute;bottom:4px;inset-inline-start:0;width:44px;height:auto;
filter:drop-shadow(0 5px 6px rgba(0,0,0,.55));animation:drive 13s linear infinite}
@keyframes drive{0%{transform:translateX(-56px)}58%,100%{transform:translateX(calc(100cqw + 12px))}}
@keyframes driveRtl{0%{transform:translateX(56px) scaleX(-1)}58%,100%{transform:translateX(calc(-100cqw - 12px)) scaleX(-1)}}
[dir="rtl"] .car-ico{animation-name:driveRtl}
/* =========================================================
Leistungen-Unterseite
========================================================= */
.subhero__grid{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:clamp(24px,4vw,64px)}
.subhero__copy{min-width:0}
.subhero__copy .kicker{margin-top:4px}
.subhero .lead{max-width:min(56ch,100%)}
.subhero__chips{display:flex;flex-wrap:wrap;gap:10px;margin:28px 0 0;padding:0;list-style:none}
.subhero__chips a{display:inline-flex;align-items:center;gap:9px;padding:8px 16px 8px 8px;border-radius:999px;
background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.3);color:#fff;
font-family:'Archivo',sans-serif;font-variation-settings:'wght' 600;font-size:14px;line-height:1.1;
-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
transition:background-color .45s var(--ease),transform .45s var(--ease),border-color .45s var(--ease)}
.subhero__chips a:hover{background:rgba(255,255,255,.24);border-color:rgba(255,255,255,.6);transform:translateY(-3px)}
.subhero__chips i{width:24px;height:24px;border-radius:999px;display:grid;place-items:center;flex:none;background:#fff;color:var(--green)}
.subhero__chips svg{width:13px;height:13px}
.subhero__seal{--s:clamp(150px,14vw,196px);position:relative;color:#fff;margin-bottom:6px;
background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.26);
-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.subhero__seal .seal__core{background:#fff;color:var(--ink)}
.subhero__seal .seal__ring text{font-size:11px}
/* Fahrbahnmarkierung am unteren Rand des Kopfs */
.subhero__road{position:absolute;z-index:1;inset-inline:0;bottom:clamp(16px,2.2vw,28px);height:3px;pointer-events:none;overflow:hidden;
-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
/* ---------- Unsere Vorteile: grosse Nummer, Symbol mit Schwung, Haken ---------- */
.vorteile-head .lead{margin-top:2px}
.vt{background:
radial-gradient(90% 70% at 100% 0%,color-mix(in srgb,var(--c) 16%,transparent),transparent 62%),
var(--ct);
padding-top:clamp(28px,3vw,38px)}
.vt > *{position:relative;z-index:2}
.vt.spot::after{background:radial-gradient(340px circle at var(--mx) var(--my),color-mix(in srgb,var(--c) 20%,transparent),transparent 64%)}
.vt-no{position:absolute;z-index:1;top:8px;inset-inline-end:18px;pointer-events:none;
font-family:'Archivo',sans-serif;font-variation-settings:'wdth' 100,'wght' 800;font-size:clamp(3.4rem,5vw,4.8rem);
line-height:1;letter-spacing:-.05em;color:var(--c);opacity:.13;
transition:opacity .6s var(--ease),transform .9s var(--ease)}
.vt:hover .vt-no{opacity:.26;transform:translateY(-5px) rotate(-4deg)}
.vt-ico{width:54px;height:54px;border-radius:18px;transition:transform .8s var(--ease)}
.vt-ico svg{width:24px;height:24px}
.vt:hover .vt-ico{transform:rotate(-9deg) scale(1.08)}
.vt-tag{display:inline-flex;align-items:center;gap:8px;margin-top:20px;padding:6px 13px 6px 6px;border-radius:999px;
background:#fff;color:var(--c);border:1px solid color-mix(in srgb,var(--c) 24%,transparent);
font-family:'Archivo',sans-serif;font-variation-settings:'wght' 600;font-size:12.5px;line-height:1.1}
.vt-tag i{width:22px;height:22px;border-radius:999px;display:grid;place-items:center;flex:none;background:var(--c);color:#fff}
.vt-tag svg{width:12px;height:12px}
.vt-tag path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .8s var(--ease-soft) .7s}
.vt.in .vt-tag path{stroke-dashoffset:0}
/* ---------- Laufschrift (bewegt sich beim Scrollen seitwaerts) ---------- */
.bigtext{overflow:hidden;padding-block:clamp(26px,4vw,54px);pointer-events:none;user-select:none;direction:ltr;
-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.bigtext__track{display:flex;align-items:center;gap:clamp(18px,2.4vw,40px);width:max-content;white-space:nowrap;
font-family:'Archivo',sans-serif;font-variation-settings:'wdth' 100,'wght' 800;font-weight:800;
font-size:clamp(2.6rem,7.6vw,7rem);line-height:1.08;letter-spacing:-.045em;text-transform:uppercase}
.bigtext__track span{color:transparent;-webkit-text-stroke:1.5px rgba(20,24,15,.24)}
.bigtext__track span.f{background:var(--vivid);-webkit-background-clip:text;background-clip:text;-webkit-text-stroke:0;color:transparent}
.bigtext__track i{flex:none;width:.26em;height:.26em;border-radius:999px;background:var(--vivid)}
@keyframes marquee{to{transform:translateX(-50%)}}
@keyframes bigShift{from{transform:translateX(0)}to{transform:translateX(-18%)}}
/* ---------- Ablauf: Dein Weg zum Fuehrerschein ---------- */
.steps-sec{background:
radial-gradient(circle at 1px 1px,rgba(20,24,15,.075) 1px,transparent 0) 0 0/22px 22px,
var(--mist)}
.steps-head{display:grid;gap:16px;justify-items:start;margin-bottom:clamp(38px,4.6vw,64px)}
.steps{--dot:58px;--dir:1;position:relative;list-style:none;margin:0;padding:0;
display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,2vw,26px);
view-timeline:--steps block}
[dir="rtl"] .steps{--dir:-1}
.step{--c:#1785B0;position:relative;z-index:1;min-width:0}
.step:nth-child(2){--c:#932D72}
.step:nth-child(3){--c:#C02581}
.step:nth-child(4){--c:#E8652E}
.step__dot{position:relative;width:var(--dot);height:var(--dot);border-radius:999px;display:grid;place-items:center;
background:#fff;border:2.5px solid var(--c);color:var(--c);
font-family:'Archivo',sans-serif;font-variation-settings:'wght' 800;font-size:1.3rem;
box-shadow:0 0 0 7px var(--mist),0 18px 32px -16px var(--c);transition:transform .6s var(--ease)}
.step:hover .step__dot{transform:scale(1.08) rotate(-6deg)}
.step__body{margin-top:22px;padding:clamp(18px,2vw,24px);border-radius:var(--r-core);background:var(--paper);
border:1px solid var(--line);box-shadow:0 22px 44px -34px rgba(24,44,12,.5);position:relative;overflow:hidden;
transition:transform .6s var(--ease),box-shadow .6s var(--ease)}
.step__body::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--c)}
.step:hover .step__body{transform:translateY(-4px);box-shadow:0 30px 54px -34px rgba(24,44,12,.55)}
.step h3{font-size:clamp(1.05rem,1.4vw,1.28rem)}
.step p{color:var(--ink-2);font-size:14.5px;line-height:1.6;margin-top:8px}
.steps-road{position:absolute;z-index:0;top:calc(var(--dot) / 2 - 2px);inset-inline-start:calc(var(--dot) / 2);inset-inline-end:14px;
height:4px;border-radius:4px;container-type:inline-size;
background:repeating-linear-gradient(90deg,rgba(20,24,15,.2) 0 12px,transparent 12px 22px)}
.steps-road__fill{position:absolute;inset:0;border-radius:inherit;background:var(--vivid);transform-origin:0 50%}
[dir="rtl"] .steps-road__fill{transform-origin:100% 50%}
.steps-car{position:absolute;inset-inline-start:0;bottom:3px;width:48px;line-height:0}
.steps-car svg{width:100%;height:auto;filter:drop-shadow(0 6px 8px rgba(24,44,12,.35))}
[dir="rtl"] .steps-car svg{transform:scaleX(-1)}
.steps-flag{position:absolute;inset-inline-end:-18px;bottom:-2px;width:34px;height:34px;max-width:none;color:var(--ink)}
[dir="rtl"] .steps-flag{transform:scaleX(-1)}
.steps-cta{margin-top:clamp(40px,5vw,64px);display:flex;flex-wrap:wrap;gap:12px;align-items:center}
/* =========================================================
Ueber uns: Details
========================================================= */
/* Fakten mit bunten Symbolen */
.about-facts div{--c:#1785B0;align-items:center;transition:background-color .5s var(--ease)}
.about-facts div:nth-child(1){--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-6.1 7-11a7 7 0 1 0-14 0c0 4.9 7 11 7 11Z'/%3E%3Ccircle cx='12' cy='10' r='2.6'/%3E%3C/svg%3E")}
.about-facts div:nth-child(2){--c:#C02581;--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.2'/%3E%3Cpath d='M3 20c0-3.3 2.7-6 6-6s6 2.7 6 6'/%3E%3Ccircle cx='17' cy='9' r='2.5'/%3E%3Cpath d='M16 14.2c2.9.3 5 2.7 5 5.8'/%3E%3C/svg%3E")}
.about-facts div:nth-child(3){--c:#E8652E;--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='2.5'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E")}
.about-facts dt{width:auto;min-width:142px;display:flex;align-items:center;gap:12px}
.about-facts dt::before{content:"";flex:none;width:34px;height:34px;border-radius:12px;
background:var(--c) var(--i) center/17px no-repeat;box-shadow:0 10px 20px -12px var(--c);
transition:transform .6s var(--ease)}
.about-facts div:hover dt::before{transform:rotate(-9deg) scale(1.08)}
/* Linie unter der Ueberschrift waechst und schimmert */
.prism-rule{background:linear-gradient(90deg,var(--p1),var(--p3),var(--p5),var(--p7),var(--p9),var(--p1));
background-size:200% 100%;animation:ruleRun 6s linear infinite}
@keyframes ruleRun{to{background-position:-200% 0}}
.prism-rule.rv{transform:scaleX(.08);transform-origin:0 50%;transition:opacity .9s var(--ease-soft),transform 1.3s var(--ease-soft)}
[dir="rtl"] .prism-rule.rv{transform-origin:100% 50%}
.prism-rule.rv.in{transform:none}
/* Farbflaechen im Hintergrund treiben langsam */
@keyframes drift1{to{transform:translate3d(7vw,5vw,0) scale(1.12)}}
@keyframes drift2{to{transform:translate3d(-6vw,-4vw,0) scale(1.08)}}
.prism::before{animation:drift1 22s ease-in-out infinite alternate}
.prism::after{animation:drift2 26s ease-in-out infinite alternate}
/* Siegel "Frisch bestanden" auf der Bildecke */
.seal--fresh{--s:clamp(104px,9vw,126px);top:-34px;inset-inline-start:-30px;z-index:3;color:var(--ink);
background:#fff;box-shadow:0 22px 44px -20px rgba(24,44,12,.55)}
.seal--fresh .seal__core{background:var(--prism)}
/* Claim-Karte schwebt leicht, Zielflagge oben dran */
.float-card{animation:bob 6s ease-in-out infinite}
/* doppelte Klasse, weil .float-card span sonst Farbe und display ueberschreibt */
.float-card .float-card__flag{position:absolute;top:-20px;inset-inline-end:24px;width:44px;height:44px;border-radius:999px;margin:0;
display:grid;place-items:center;background:#fff;color:var(--ink);box-shadow:0 14px 30px -14px rgba(0,0,0,.5)}
.float-card__flag svg{width:24px;height:24px}
[dir="rtl"] .float-card__flag svg{transform:scaleX(-1)}
/* Instagram und TikTok in Ueber uns */
.about-social{position:relative;overflow:hidden;margin-top:clamp(88px,8.5vw,124px);
display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px 28px;
padding:clamp(18px,2.2vw,26px) clamp(20px,2.6vw,32px);border-radius:var(--r-shell);
background:rgba(255,255,255,.78);border:1px solid var(--line);
-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 26px 60px -40px rgba(24,44,12,.5)}
.about-social::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--vivid)}
.about-social__txt{display:grid;gap:4px;min-width:0;flex:1 1 300px}
.about-social__txt b{font-family:'Archivo',sans-serif;font-variation-settings:'wght' 700;
font-size:clamp(1.2rem,1.8vw,1.5rem);letter-spacing:-.02em;line-height:1.15}
.about-social__txt span{color:var(--ink-2);font-size:15px;line-height:1.5}
.about-social__links{display:flex;flex-wrap:wrap;gap:10px}
.sochip{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;gap:11px;
padding:7px 16px 7px 7px;border-radius:999px;color:#fff;
box-shadow:0 18px 32px -18px rgba(20,24,40,.85);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.sochip:hover{transform:translateY(-3px);box-shadow:0 26px 40px -20px rgba(20,24,40,.85)}
.sochip--ig{background:radial-gradient(circle at 30% 107%,#FDF497 0%,#FDF497 5%,#FD5949 45%,#D6249F 60%,#285AEB 90%)}
.sochip--ig::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(60,10,40,.28),rgba(60,10,40,.06))}
.sochip--tt{background:#010101}
.sochip--tt::before{content:"";position:absolute;inset:0;z-index:-1;
background:radial-gradient(70% 140% at 0% 0%,rgba(37,244,238,.42),transparent 62%),radial-gradient(70% 140% at 100% 100%,rgba(254,44,85,.5),transparent 62%)}
.sochip__ico{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;flex:none;background:#fff;
transition:transform .6s var(--ease)}
.sochip:hover .sochip__ico{transform:rotate(-8deg) scale(1.06)}
.sochip--tt .sochip__ico{background:#000;border:1px solid rgba(255,255,255,.2)}
.sochip__ico svg{width:60%;height:60%}
.sochip__txt{display:grid;line-height:1.2;min-width:0}
.sochip__txt b{font-family:'Archivo',sans-serif;font-variation-settings:'wght' 700;font-size:14.5px}
.sochip__txt span{font-size:12.5px;opacity:.92;text-shadow:0 1px 8px rgba(0,0,0,.3)}
.sochip__go{width:15px;height:15px;flex:none;transition:transform .5s var(--ease)}
.sochip:hover .sochip__go{transform:translate(2px,-2px)}
.about-social + .galrail-head{margin-top:clamp(52px,5.5vw,76px)}
/* Foto-Laufband wie Polaroids: weisser Rand, leicht gekippt */
.galrail{padding-block:14px 20px;overflow-y:hidden}
.galtile{padding:7px;background:#fff;transform:rotate(-1.3deg);
transition:transform .7s var(--ease),box-shadow .7s var(--ease)}
.galtile:nth-child(even){transform:rotate(1.2deg) translateY(5px)}
.galtile:nth-child(3n){transform:rotate(-.5deg) translateY(-3px)}
.galtile img{border-radius:15px}
.galtile:hover{transform:rotate(0) translateY(-6px);box-shadow:0 34px 56px -32px rgba(24,44,12,.6)}
/* Team: Spektrum-Ring und wachsende Linie beim Hovern */
.person{position:relative;transition:transform .7s var(--ease),opacity .9s var(--ease-soft)}
.person::after{content:"";position:absolute;inset:-1px;z-index:3;pointer-events:none;border-radius:var(--r-shell);padding:2px;
background:conic-gradient(from var(--ang),#12A3D8,#6A2FA0,#E0338F,#E8652E,#F2C230,#8CC63F,#12A3D8);
-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
-webkit-mask-composite:xor;mask-composite:exclude;
opacity:0;animation:angSpin 6s linear infinite paused;transition:opacity .5s var(--ease)}
.person:hover{transform:translateY(-8px)}
.person:hover::after{opacity:1;animation-play-state:running}
.person-name::before{content:"";display:block;width:26px;height:3px;border-radius:3px;margin-bottom:9px;
background:var(--vivid);transition:width .7s var(--ease)}
.person:hover .person-name::before{width:62px}
.person-tba .person-name::before{opacity:.6}
/* =========================================================
Bewertungen, Frisch bestanden, Warum wir, Social, Kontakt
========================================================= */
.bst__card{transition:transform .5s var(--ease),background-color .5s var(--ease),border-color .5s var(--ease)}
.bst__card:hover{transform:translateY(-5px);background:rgba(22,22,36,.74);border-color:rgba(255,255,255,.3)}
/* Bewertungen, 26.09.2026: alle Karten bleiben so gross wie bisher (vier
Zeilen Text). Laengere Texte blenden unten aus und klappen ueber den
kleinen Link "Mehr lesen" auf (app.js, initReviewToggle). Solange eine
Karte offen ist, steht das Band. flex-start, damit nur die offene Karte
waechst und nicht die ganze Reihe. */
.bst__track{align-items:flex-start}
.bst__rail.is-open .bst__track,.bst__rail.is-held .bst__track{animation-play-state:paused}
.bst__text{white-space:pre-line;height:calc(1.6em * 4);overflow:hidden;transition:height .55s var(--ease)}
.bst__card.is-clamped .bst__text{
-webkit-mask-image:linear-gradient(180deg,#000 45%,transparent);mask-image:linear-gradient(180deg,#000 45%,transparent)}
.bst__card.is-open .bst__text{height:var(--full);-webkit-mask-image:none;mask-image:none}
/* sehr lange Bewertungen: aufgeklappt gedeckelt, der Rest scrollt in der Karte */
.bst__card.is-open.is-scroll .bst__text{overflow-y:auto;padding-inline-end:8px;
scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.4) transparent}
.bst__foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding-top:2px}
.bst__foot .bst__src{margin-top:0;padding-top:0}
/* kleiner Link statt Button-Optik; das Polster vergroessert nur die Trefferflaeche */
.bst__more{flex:none;padding:8px 0;margin:-8px 0;font-family:'Archivo',sans-serif;font-variation-settings:'wght' 600;
font-size:12.5px;line-height:1.2;color:#fff;text-decoration:underline;text-decoration-color:rgba(255,255,255,.45);
text-underline-offset:3px;transition:color .3s var(--ease),text-decoration-color .3s var(--ease)}
.bst__more:hover{color:#D8E8C4;text-decoration-color:currentColor}
.bst__more[hidden]{display:none}
/* Jede Kachel in "Frisch bestanden" traegt einen kleinen Haken in ihrer Farbe */
.stile{position:relative}
.stile::after{content:"";position:absolute;top:8px;inset-inline-end:8px;width:24px;height:24px;border-radius:999px;
background:var(--c) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A0B12' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.2 4.2L19 7'/%3E%3C/svg%3E") center/13px no-repeat;
box-shadow:0 6px 14px -6px rgba(0,0,0,.7);transition:transform .5s var(--ease)}
.stile:hover::after{transform:scale(1.15) rotate(-10deg)}
/* Warum wir: Fortschrittslinie links an der Liste, Nummern federn */
.reasons{position:relative;view-timeline:--reasons block}
.reasons::before{content:"";position:absolute;top:0;bottom:0;inset-inline-start:-2px;width:3px;border-radius:3px;
background:linear-gradient(180deg,#1785B0,#323C86,#932D72,#C02581);transform-origin:50% 0}
.reason__no{display:inline-block;transition:transform .6s var(--ease),color .5s var(--ease)}
.reason:hover .reason__no{transform:scale(1.14) rotate(-6deg)}
/* Social unten: Lichtkante beim Hovern (nur Instagram, TikTok nutzt ::after
schon fuer das rote Leuchten), Symbol kippt */
.soc--ig::after{content:"";position:absolute;top:-30%;bottom:-30%;inset-inline-start:-40%;width:30%;z-index:1;pointer-events:none;
background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent);transform:skewX(-18deg)}
.soc--ig:hover::after{animation:socSweep 1.1s var(--ease-soft)}
.soc__icon{transition:transform .6s var(--ease)}
.soc:hover .soc__icon{transform:rotate(-8deg) scale(1.06)}
/* Kontakt: Symbole heben sich beim Hovern */
.info-ico{transition:transform .5s var(--ease)}
.info-row:hover .info-ico{transform:translateY(-3px) rotate(-6deg)}
/* ---------- Footer: grosse Wortmarke im Spektrum ---------- */
.foot-mark{margin-top:clamp(26px,4vw,46px);text-align:center;white-space:nowrap;
font-family:'Archivo',sans-serif;font-variation-settings:'wdth' 100,'wght' 800;font-weight:800;
font-size:clamp(3rem,12.6vw,11.6rem);line-height:.86;letter-spacing:-.055em;padding-bottom:.04em;
background:var(--vivid);-webkit-background-clip:text;background-clip:text;color:transparent;
-webkit-mask-image:linear-gradient(180deg,#000 45%,rgba(0,0,0,.25));mask-image:linear-gradient(180deg,#000 45%,rgba(0,0,0,.25))}
/* =========================================================
Parallax und scrollgebundene Bewegung
========================================================= */
@media (prefers-reduced-motion:no-preference){
@supports (animation-timeline: view()){
@keyframes pxBg{to{translate:0 32%}}
@keyframes pxCopy{to{translate:0 -70px;opacity:.12}}
@keyframes pxLift{to{translate:0 -130px}}
@keyframes pxImg{from{translate:0 -6%}to{translate:0 6%}}
@keyframes pxImgBig{from{translate:0 -7%}to{translate:0 7%}}
@keyframes pxWall{from{translate:0 -70px}to{translate:0 70px}}
@keyframes pxPrism{from{translate:0 -80px}to{translate:0 80px}}
@keyframes fillX{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes fillY{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes carX{from{translate:0 0}to{translate:calc(var(--dir,1) * (100cqw - 48px)) 0}}
@keyframes carY{from{translate:0 0}to{translate:0 calc(100cqh - 48px)}}
@keyframes markUp{from{translate:0 38%;opacity:0}to{translate:0 0;opacity:1}}
/* Hero und Unterseitenkopf: Hintergrund bleibt zurueck, Text zieht weg */
.hero{view-timeline:--hero block}
.hero-bg,.hero-copy,.subhero__copy,.hvideo,.subhero__seal{animation-timing-function:linear;animation-fill-mode:both;
animation-duration:auto;animation-timeline:--hero;animation-range:exit 0% exit 100%}
.hero-bg{animation-name:pxBg}
.hero-copy,.subhero__copy{animation-name:pxCopy}
.hvideo,.subhero__seal{animation-name:pxLift}
/* Fotos wandern im Rahmen */
.lcard .cell-media img,.about-stack .shot img{scale:1.14;animation:pxImg linear both;animation-duration:auto;animation-timeline:view()}
.shot-bg img{scale:1.18;animation:pxImgBig linear both;animation-duration:auto;animation-timeline:view()}
/* Ueber uns: Farbflaechen, Bewertungen: Bilderwand */
.about-sec{view-timeline:--about block}
.prism{animation:pxPrism linear both;animation-duration:auto;animation-timeline:--about}
.bst{view-timeline:--bst block}
.bst__wall{animation:pxWall linear both;animation-duration:auto;animation-timeline:--bst}
/* Warum wir: Linie fuellt sich mit dem Lesen */
.reasons::before{animation:fillY linear both;animation-duration:auto;animation-timeline:--reasons;animation-range:cover 12% cover 62%}
/* Ablauf: Strasse fuellt sich, Auto faehrt mit */
.steps-road__fill{animation:fillX linear both;animation-duration:auto;animation-timeline:--steps;animation-range:cover 15% cover 54%}
.steps-car{animation:carX linear both;animation-duration:auto;animation-timeline:--steps;animation-range:cover 15% cover 54%}
/* Wortmarke steigt aus dem Footer */
.foot-mark{animation:markUp linear both;animation-duration:auto;animation-timeline:view();animation-range:entry 0% entry 100%}
}
}
/* ---------- Responsive ---------- */
@media (max-width:1080px){
.lcard{min-height:clamp(380px,52vw,470px)}
.seal--fresh{inset-inline-start:-12px}
.steps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:34px}
/* zweispaltig passt eine durchgehende Strasse nicht, also senkrecht wie auf dem Handy */
}
@media (max-width:1080px) and (min-width:721px){
.steps-road{display:none}
}
@media (max-width:900px){
/* Sprachwahl, Telefon und Burger gehoeren an den rechten Rand. Vorher
standen sie direkt hinter dem Logo, weil die ausgeblendeten
Menuepunkte das margin-inline-start:auto getragen haben. */
.nav-cta{margin-inline-start:auto}
.subhero__grid{grid-template-columns:1fr}
.subhero__seal{--s:128px;justify-self:end;margin:-6px 0 0}
}
@media (max-width:720px){
/* Karte bleibt auf dem Handy kompakt: ohne Chips, kleineres Siegel */
.lcard{min-height:260px;padding-bottom:44px}
.lcard__chips{display:none}
.lcard__seal{--s:84px;top:14px;inset-inline-end:14px}
.lcard__seal .seal__ring text{font-size:12.5px}
.lcard__road{inset-inline:22px;bottom:9px}
.car-ico{width:38px}
.seal--fresh{--s:88px;top:-26px;inset-inline-start:-4px}
.seal--fresh .seal__ring text{font-size:12.5px}
.float-card .float-card__flag{width:38px;height:38px;top:-16px}
.about-facts dt{min-width:124px;gap:10px}
.about-facts dt::before{width:30px;height:30px;border-radius:10px;background-size:15px}
.about-social{padding:18px;gap:14px}
.about-social__txt span{font-size:14px}
.sochip{flex:1 1 230px}
.galtile{padding:5px}
.galtile img{border-radius:11px}
/* Siegel sitzt oben rechts neben "Zur Startseite", relativ zum .wrap */
.subhero__seal{--s:92px;position:absolute;top:-6px;inset-inline-end:var(--pad);margin:0}
.subhero__seal .seal__ring text{font-size:12.5px}
.subhero__chips{gap:8px;margin-top:22px}
.subhero__chips a{font-size:13px;padding:6px 13px 6px 6px}
.subhero__chips i{width:22px;height:22px}
.vt-no{font-size:3.2rem}
.bigtext__track span{-webkit-text-stroke-width:1.2px}
/* Ablauf senkrecht: Punkte links, Strasse und Auto fahren nach unten */
.steps{--dot:46px;grid-template-columns:1fr;row-gap:18px}
.step{display:grid;grid-template-columns:var(--dot) minmax(0,1fr);column-gap:16px;align-items:start}
.step__dot{font-size:1.1rem;box-shadow:0 0 0 6px var(--mist),0 14px 26px -14px var(--c)}
.step__body{margin-top:0}
.steps-road{display:block;top:calc(var(--dot) / 2);bottom:26px;inset-inline-start:calc(var(--dot) / 2 - 2px);inset-inline-end:auto;
width:4px;height:auto;container-type:size;
background:repeating-linear-gradient(180deg,rgba(20,24,15,.2) 0 12px,transparent 12px 22px)}
.steps-road__fill{transform-origin:50% 0}
.steps-car{bottom:auto;top:0;inset-inline-start:-22px;width:48px;rotate:90deg}
[dir="rtl"] .steps-car svg{transform:none}
.steps-flag{inset-inline-end:auto;inset-inline-start:-4px;bottom:-30px;width:30px;height:30px}
.steps-cta .btn{width:100%}
.foot-mark{font-size:15.4vw}
}
@media (max-width:380px){
/* schmale Androids: Siegel im Kopf etwas kleiner, damit es den Kicker nicht beruehrt */
.subhero__seal{--s:78px}
}
@media (max-width:720px) and (prefers-reduced-motion:no-preference){
@supports (animation-timeline: view()){
.steps-road__fill{animation-name:fillY;animation-range:cover 22% cover 66%}
.steps-car{animation-name:carY;animation-range:cover 22% cover 66%}
/* Parallax auf dem Handy etwas ruhiger */
.hvideo{animation-name:none}
}
}
@media (hover:none){
/* ohne Maus kein Lichtkegel, der Ring der Karte bleibt sichtbar */
.spot::after{display:none}
}
@media (prefers-reduced-motion:reduce){
.btn::after,.team-cta__arrow::after,.soc__cta::after,.sochip::after{animation:none;display:none}
.float-card,.seal__ring,.flag-cloth,.car-ico,.lcard__ring,.prism::before,.prism::after,
.subhero__road,.lcard__road::before,.prism-rule{animation:none}
.car-ico{display:none}
.lcard .cell-media,.prism-rule.rv{transform:none}
[data-split] .w{opacity:1;transform:none}
}
/* =========================================================
Hero-Video: kleine Flaggen fuer die Sprachfassung (26.09.2026)
Oben links auf der Videokarte, gegenueber von Ton und Grossansicht.
Aktive Fassung voll deckend mit heller Pille, die anderen gedimmt.
========================================================= */
.vc-langs{position:absolute;top:14px;inset-inline-start:14px;z-index:3;display:flex;align-items:center;gap:3px;padding:5px;
border-radius:999px;background:rgba(11,17,8,.55);border:1px solid rgba(255,255,255,.22);
-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.vc-lang{display:flex;align-items:center;justify-content:center;gap:2px;height:32px;min-width:32px;padding:0 6px;
border-radius:999px;opacity:.55;
transition:opacity .3s var(--ease),background-color .3s var(--ease),transform .3s var(--ease)}
.vc-lang svg{width:20px;height:14px;flex:none;border-radius:2.5px;box-shadow:0 0 0 1px rgba(255,255,255,.3)}
.vc-lang:hover{opacity:1;transform:translateY(-1px)}
.vc-lang[aria-pressed="true"]{opacity:1;background:rgba(255,255,255,.22)}
@media (max-width:720px){
.vc-langs{top:12px;inset-inline-start:12px;gap:2px;padding:4px}
.vc-lang{height:30px;min-width:30px;padding:0 5px}
.vc-lang svg{width:18px;height:13px}
}
/* =========================================================
RUNDE 26.09.2026: Foto-Grossansicht, groessere Schuelerfotos
auf dem Handy, Menue als Schublade, WhatsApp oben rechts
========================================================= */
/* ---------- Fotos in den Baendern sind anklickbar ---------- */
.tile-zoom{display:block;width:100%;height:100%;padding:0;border:0;background:none;border-radius:inherit;
overflow:hidden;cursor:zoom-in}
.galtile .tile-zoom{border-radius:15px}
/* ---------- Grossansicht (gleiche Optik wie beim Video) ---------- */
.ib{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:clamp(12px,3vw,40px);
opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility 0s linear .35s}
.ib.open{opacity:1;visibility:visible;transition:opacity .35s var(--ease)}
.ib__bg{position:absolute;inset:0;cursor:zoom-out;background:rgba(8,13,6,.72);
-webkit-backdrop-filter:blur(22px) saturate(1.1);backdrop-filter:blur(22px) saturate(1.1)}
.ib__fig{position:relative;margin:0;display:grid;justify-items:center;gap:12px;pointer-events:none;
transform:translateY(14px) scale(.96);transition:transform .5s var(--ease)}
.ib.open .ib__fig{transform:none}
.ib__img{display:block;width:auto;height:auto;max-width:min(88vw,1400px);max-height:calc(100dvh - 130px);
border-radius:var(--r-core);background:#15161f;pointer-events:auto;
box-shadow:0 50px 120px -30px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.14);transition:opacity .3s var(--ease)}
.ib.is-loading .ib__img{opacity:.35}
.ib__count{padding:5px 12px;border-radius:999px;background:rgba(11,17,8,.55);border:1px solid rgba(255,255,255,.18);
font-family:'Archivo',sans-serif;font-variation-settings:'wght' 600;font-size:12.5px;letter-spacing:.08em;color:rgba(255,255,255,.85)}
.ib__btn{position:absolute;z-index:2;width:48px;height:48px}
.ib__btn svg{width:20px;height:20px}
.ib__close{top:clamp(12px,2vw,26px);inset-inline-end:clamp(12px,2vw,26px)}
.ib__prev,.ib__next{top:50%;margin-top:-24px}
.ib__prev{inset-inline-start:clamp(10px,2vw,28px)}
.ib__next{inset-inline-end:clamp(10px,2vw,28px)}
[dir="rtl"] .ib__prev svg,[dir="rtl"] .ib__next svg{transform:scaleX(-1)}
@media (max-width:720px){
/* Handy: Foto fast bildschirmbreit, Pfeile unten links und rechts neben dem Zaehler */
.ib{padding:12px}
.ib__img{max-width:calc(100vw - 24px);max-height:calc(100dvh - 150px);border-radius:16px}
.ib__fig{margin-bottom:28px}
.ib__prev,.ib__next{top:auto;bottom:16px;margin-top:0}
}
/* ---------- "Frisch bestanden": Fotos mehr hervorheben ---------- */
.sband .stile{box-shadow:0 20px 42px -20px rgba(0,0,0,.9),0 0 24px -10px var(--c)}
@media (max-width:720px){
/* vorher 3,3 Fotos nebeneinander (rund 110 px), jetzt gut 2 (rund 170 px) */
.srail{gap:12px;padding-block:12px}
.stile{flex-basis:calc((100vw - 2 * 12px) / 2.15);border-width:4px;border-radius:20px}
.sband .stile{box-shadow:0 22px 44px -18px rgba(0,0,0,.9),0 0 28px -8px var(--c)}
.stile::after{width:28px;height:28px;top:10px;inset-inline-end:10px;background-size:15px}
}
/* ---------- Menue als Schublade von rechts (Handy/Tablet) ----------
Gut die Haelfte des Bildschirms, links bleibt die Seite sichtbar und
scrollbar (keine Scroll-Sperre mehr, siehe setMenu in app.js). */
.menu{inset:0 auto 0 auto;inset-inline-end:0;width:clamp(230px,58vw,380px);
display:block;align-content:start;padding:104px 22px 28px;overflow-y:auto;overscroll-behavior:contain;
background:rgba(255,255,255,.97);border-inline-start:1px solid var(--line);
box-shadow:-34px 0 70px -30px rgba(10,11,18,.45);
opacity:1;visibility:hidden;transform:translateX(100%);
transition:transform .55s var(--ease),visibility 0s linear .55s}
body.menu-open .menu{visibility:visible;transform:none;transition:transform .55s var(--ease)}
[dir="rtl"] .menu{transform:translateX(-100%);box-shadow:34px 0 70px -30px rgba(10,11,18,.45)}
[dir="rtl"] body.menu-open .menu{transform:none}
.menu .wrap{padding-inline:0;max-width:none}
.menu .wrap > a{font-size:clamp(1.25rem,5.4vw,1.7rem);line-height:1.15;padding:11px 0;border-bottom:1px solid var(--line)}
.menu .wrap > a[aria-current="page"]{color:var(--green)}
.menu-foot{margin-top:22px;gap:10px}
.menu .menu-foot .btn{flex:1 1 100%;font-size:14px;padding:9px 16px 9px 9px}
.menu .menu-foot .btn .ico{width:30px;height:30px}
/* ---------- Oben rechts: WhatsApp statt Telefon ---------- */
.nav-wa{position:relative;overflow:hidden;isolation:isolate;color:#fff;border-color:#0E7A5E;
background:linear-gradient(135deg,#25D366 0%,#12946A 55%,#0F7E62 100%);
box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 8px 18px -10px rgba(15,126,98,.8)}
.nav-wa svg{width:19px;height:19px}
.nav-wa::after{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:-75%;width:45%;pointer-events:none;
background:linear-gradient(115deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.6) 50%,rgba(255,255,255,0) 100%);
transform:skewX(-20deg);animation:btnSweep 3.4s ease-in-out infinite .9s}
@media (prefers-reduced-motion:reduce){
.nav-wa::after{animation:none;display:none}
.menu{transition:none}
}
/* =========================================================
EINBLENDEN (26.09.2026)
Wunsch: auffaelliger, cooler, hochwertiger, vor allem bei Fotos.
Varianten per data-rev, Zuordnung in app.js (REVEAL_VARIANTS).
Alles laeuft ueber opacity, translate/scale/rotate (einzelne
Transform-Eigenschaften), filter und clip-path. So bleiben die
eigenen transform-Werte der Elemente (Hover, Kippung) unberuehrt.
Vorzustand steht immer unter :not(.in), der Endzustand ist einfach
"nichts gesetzt". Ohne "weniger Bewegung" -> siehe app.js (alles sofort da).
========================================================= */
:root{--spring:cubic-bezier(.34,1.42,.52,1);--wipe-ease:cubic-bezier(.72,0,.18,1)}
/* waehrend app.js die Varianten setzt, keine Uebergaenge (markReveals) */
html.rv-prep .rv,html.rv-prep .rv *{transition:none !important}
@property --wipe{syntax:'';inherits:true;initial-value:100%}
/* ---------- Standard: weich und unscharf aufsteigen ---------- */
.rv{transform:none;
transition:opacity .9s var(--ease-soft),translate 1.15s var(--ease-soft),filter .9s var(--ease-soft),
scale 1.15s var(--ease-soft),rotate 1.15s var(--ease-soft),clip-path 1.4s var(--wipe-ease),
transform .7s var(--ease),box-shadow .6s var(--ease),background-color .5s var(--ease),
border-color .5s var(--ease),color .4s var(--ease)}
.rv:not(.in){opacity:0;translate:0 46px}
.rv.rv-done{transition-delay:0s}
/* Buttons behalten nach dem Einblenden ihr schnelles Hover-Verhalten */
.btn.rv.rv-done{transition:translate .3s cubic-bezier(.34,1.56,.64,1),transform .5s var(--ease),box-shadow .35s var(--ease),
filter .35s var(--ease),background-color .5s var(--ease),border-color .5s var(--ease),color .5s var(--ease)}
/* Ueberschriften: nur die Woerter bewegen sich, jetzt mit Unschaerfe */
[data-split].rv:not(.in){opacity:1;translate:none;filter:none}
[data-split] .w{transition:opacity .8s var(--ease-soft),transform 1s var(--ease-soft)}
.prism-rule.rv:not(.in){translate:none;filter:none}
/* ---------- wipe: Ueber-uns-Foto erscheint von oben nach unten ----------
Eine Maske faehrt nach unten auf (--wipe 0 -> 100 %), vorne laeuft eine
leuchtende Kante im Spektrum mit, das Foto zoomt dabei leicht zurueck.
Danach springen Claim-Karte und Siegel federnd ins Bild. */
.about-stack.rv{transition:--wipe 1.5s var(--wipe-ease)}
.about-stack.rv[data-rev="wipe"]:not(.in){opacity:1;translate:none;filter:none;--wipe:0%}
.about-stack .shot{position:relative;clip-path:inset(-90px -90px calc(100% - var(--wipe)) -90px)}
.about-stack.rv-done .shot{clip-path:none}
.about-stack .shot img{transition:transform 1.9s var(--ease-soft)}
.about-stack.rv:not(.in) .shot img{transform:scale(1.24)}
.about-stack .shot::after{content:"";position:absolute;z-index:4;left:-3%;right:-3%;height:6px;top:calc(var(--wipe) - 8px);
border-radius:6px;pointer-events:none;background:var(--vivid);opacity:0;
box-shadow:0 0 26px 7px rgba(224,51,143,.5),0 0 60px 12px rgba(18,163,216,.3)}
.about-stack.in:not(.rv-done) .shot::after{animation:wipeLine 1.5s var(--wipe-ease) both}
@keyframes wipeLine{0%{opacity:0}8%{opacity:1}82%{opacity:1}100%{opacity:0}}
.about-stack .float-card,.about-stack .seal--fresh{
transition:opacity .6s var(--ease-soft) 1.25s,scale 1s var(--spring) 1.25s,rotate 1s var(--spring) 1.25s}
.about-stack .seal--fresh{transition-delay:1.5s}
.about-stack.rv:not(.in) .float-card{opacity:0;scale:.55;rotate:-12deg}
.about-stack.rv:not(.in) .seal--fresh{opacity:0;scale:.2;rotate:-150deg}
/* ---------- card: Autofuehrerschein-Karte steigt federnd auf, das Foto zoomt zurueck ----------
(vorher ein Zuschnitt "wie ein Fenster": der wurde bei jedem Bild neu
gezeichnet und hat vor allem auf der Leistungsseite geruckelt) */
.rv[data-rev="card"]{transition:opacity .8s ease,translate 1.25s var(--spring),scale 1.25s var(--spring),
transform .7s var(--ease),box-shadow .7s var(--ease),border-color .7s var(--ease)}
.rv[data-rev="card"]:not(.in){opacity:0;translate:0 70px;scale:.93}
.lcard.rv:not(.in) .cell-media{transform:scale(1.22)}
/* ---------- mask: H1 steigt aus einer unsichtbaren Kante ---------- */
.rv[data-rev="mask"]:not(.in){opacity:1;translate:none}
.h1-in{display:block;clip-path:inset(-30% -8% -40% -8%);
transition:clip-path 1.2s var(--wipe-ease) .1s,translate 1.2s var(--ease-soft) .1s}
.rv[data-rev="mask"]:not(.in) .h1-in{clip-path:inset(100% -8% -40% -8%);translate:0 .5em}
.rv-done .h1-in{clip-path:none}
/* ---------- badge: Bewertungszeile im Hero, Gesichter und Sterne ploppen nacheinander ---------- */
.rv[data-rev="badge"]:not(.in){opacity:1;translate:none;filter:none}
.gbadge .avatars img,.gbadge .stars svg{transition:scale .7s var(--spring),rotate .7s var(--spring),opacity .4s ease}
.gbadge:not(.in) .avatars img{scale:0;opacity:0}
.gbadge:not(.in) .stars svg{scale:0;rotate:-120deg}
.gbadge .stars svg:nth-child(2){transition-delay:.06s}.gbadge .stars svg:nth-child(3){transition-delay:.12s}
.gbadge .stars svg:nth-child(4){transition-delay:.18s}.gbadge .stars svg:nth-child(5){transition-delay:.24s}
.gbadge .avatars img:nth-child(1){transition-delay:.3s}.gbadge .avatars img:nth-child(2){transition-delay:.37s}
.gbadge .avatars img:nth-child(3){transition-delay:.44s}.gbadge .avatars img:nth-child(4){transition-delay:.51s}
.gbadge .avatars img:nth-child(5){transition-delay:.58s}
.gbadge .glogo,.gbadge .txt{transition:opacity .7s ease .6s,translate .8s var(--ease-soft) .6s}
.gbadge:not(.in) .glogo,.gbadge:not(.in) .txt{opacity:0;translate:14px 0}
/* ---------- video: Karten kippen aus der Tiefe, federn nach, Lichtstreif ---------- */
.rv[data-rev="video"],.hvideo__card{
transition:opacity .8s ease,translate 1.35s var(--spring),scale 1.35s var(--spring),rotate 1.35s var(--spring),
filter 1s var(--ease-soft),transform .7s var(--ease),box-shadow .6s var(--ease)}
.rv[data-rev="video"]:not(.in),.hvideo.rv:not(.in) .hvideo__card{
opacity:0;translate:0 80px;scale:.82;rotate:-8deg}
.rv[data-rev="video-wrap"]:not(.in){opacity:1;translate:none;filter:none}
.hvideo__card{transition-delay:.15s}
/* Beschriftung neben dem Hero-Video gleitet hinterher */
.hvideo__label{transition:opacity .8s ease .55s,translate 1s var(--ease-soft) .55s}
.hvideo.rv:not(.in) .hvideo__label{opacity:0;translate:-40px 0}
[dir="rtl"] .hvideo.rv:not(.in) .hvideo__label{translate:40px 0}
/* Knoepfe im Video kommen nach der Karte */
.video-card .vc-tools,.video-card .vc-langs{transition:opacity .6s ease 1s,translate .8s var(--spring) 1s}
.rv[data-rev="video"]:not(.in) .vc-tools,.hvideo.rv:not(.in) .vc-tools,
.rv[data-rev="video"]:not(.in) .vc-langs,.hvideo.rv:not(.in) .vc-langs{opacity:0;translate:0 -16px}
.video-card .play{transition-property:transform,background-color,scale;transition-duration:.5s,.5s,.9s;
transition-timing-function:var(--ease),var(--ease),var(--spring);transition-delay:0s,0s,.95s}
.rv[data-rev="video"]:not(.in) .play,.hvideo.rv:not(.in) .play{scale:0}
/* ein Lichtstreif laeuft einmal ueber das Video, wenn es angekommen ist */
.video-card .core::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.42) 50%,transparent 68%);transform:translateX(-140%)}
.video-card.in .core::after,.hvideo.in .video-card .core::after{animation:vSweep 1.5s var(--ease-soft) 1.05s both}
@keyframes vSweep{to{transform:translateX(140%)}}
/* ---------- tiles: Fotos in den Baendern werden wie Karten ausgeteilt ---------- */
.rv[data-rev="tiles"]:not(.in){opacity:1;translate:none;filter:none}
.galtile,.stile{--td:0s;
transition:transform .7s var(--ease),box-shadow .7s var(--ease),opacity .7s ease var(--td),
translate 1.1s var(--spring) var(--td),scale 1.1s var(--spring) var(--td),rotate 1.1s var(--spring) var(--td)}
.rv-done .galtile,.rv-done .stile{--td:0s}
.galrail:not(.in) .galtile,.srail:not(.in) .stile{opacity:0;translate:0 70px;scale:.78;rotate:9deg}
.galrail:not(.in) .galtile:nth-child(even),.srail:not(.in) .stile:nth-child(even){rotate:-9deg}
.galtile:nth-child(2),.stile:nth-child(2){--td:.07s}.galtile:nth-child(3),.stile:nth-child(3){--td:.14s}
.galtile:nth-child(4),.stile:nth-child(4){--td:.21s}.galtile:nth-child(5),.stile:nth-child(5){--td:.28s}
.galtile:nth-child(6),.stile:nth-child(6){--td:.35s}.galtile:nth-child(7),.stile:nth-child(7){--td:.42s}
.galtile:nth-child(8),.stile:nth-child(8){--td:.49s}.galtile:nth-child(9),.stile:nth-child(9){--td:.56s}
.galtile:nth-child(n+10),.stile:nth-child(n+10){--td:.6s}
/* ---------- rise-tilt: Team-Karten schwingen gekippt herein ---------- */
.rv[data-rev="rise-tilt"]{transition:opacity .8s ease,translate 1.25s var(--spring),rotate 1.25s var(--spring),
scale 1.25s var(--spring),filter .9s var(--ease-soft),transform .7s var(--ease),box-shadow .6s var(--ease)}
.rv[data-rev="rise-tilt"]:not(.in){opacity:0;translate:0 90px;rotate:6deg;scale:.9}
.rv[data-rev="rise-tilt"]:nth-child(even):not(.in){rotate:-6deg}
/* ---------- flip: Vorteile und Schritte klappen nach oben auf ---------- */
.vorteile-grid,.steps{perspective:1400px}
.rv[data-rev="flip"]{transform-origin:50% 100%;
transition:opacity .8s ease,rotate 1.2s var(--ease-soft),translate 1.2s var(--ease-soft),filter .9s var(--ease-soft),
transform .7s var(--ease),box-shadow .7s var(--ease)}
.rv[data-rev="flip"]:not(.in){opacity:0;rotate:x 62deg;translate:0 36px}
/* ---------- from-start / from-end: gleiten seitlich herein ---------- */
.rv[data-rev="from-start"]:not(.in){opacity:0;translate:-64px 0;rotate:-2deg}
.rv[data-rev="from-end"]:not(.in){opacity:0;translate:64px 0;rotate:2deg}
[dir="rtl"] .rv[data-rev="from-start"]:not(.in){translate:64px 0;rotate:2deg}
[dir="rtl"] .rv[data-rev="from-end"]:not(.in){translate:-64px 0;rotate:-2deg}
/* ---------- pop: kleine Elemente federn auf ---------- */
.rv[data-rev="pop"]{transition:opacity .5s ease,scale .9s var(--spring),rotate .9s var(--spring),
transform .55s var(--ease),background-color .5s var(--ease),border-color .5s var(--ease),color .4s var(--ease)}
.rv[data-rev="pop"]:not(.in){opacity:0;scale:.5;rotate:-8deg;translate:none;filter:none}
/* ---------- rise-scale: Bloecke steigen auf und wachsen dabei ---------- */
.rv[data-rev="rise-scale"]{transition:opacity .8s ease,translate 1.2s var(--spring),scale 1.2s var(--spring),
filter .9s var(--ease-soft),transform .6s var(--ease),box-shadow .5s var(--ease),background-color .5s var(--ease)}
.rv[data-rev="rise-scale"]:not(.in){opacity:0;translate:0 60px;scale:.9}
.btn.rv[data-rev="rise-scale"].rv-done{transition:translate .3s cubic-bezier(.34,1.56,.64,1),transform .5s var(--ease),
box-shadow .35s var(--ease),filter .35s var(--ease),background-color .5s var(--ease)}
/* Seitlich hereingleitende Elemente (from-start/-end) ragten vor ihrem
Auftritt auf dem Handy 46 px ueber den Rand, man konnte seitlich wischen.
clip statt hidden: schneidet nur ab, ohne Scroll-Container zu werden,
deshalb bleibt das mitlaufende Video in "Warum wir" (sticky) intakt. */
main{overflow-x:clip}
.subhero__road::before{content:"";position:absolute;inset:0 -64px 0 0;
background:repeating-linear-gradient(90deg,rgba(255,255,255,.42) 0 34px,transparent 34px 64px);
animation:dashMove64 2.6s linear infinite}
@keyframes dashMove64{to{transform:translateX(-64px)}}
/* =========================================================
RUCKEL-FIX 26.09.2026
Milchglas (backdrop-filter) ueber bewegtem Hintergrund muss der Browser
bei jedem Bild neu berechnen: Funken im Kopf, laufende Bilderwand,
Parallax-Fotos, treibende Farbflaechen. Dort jetzt etwas deckendere
Flaechen ohne Milchglas. Die Optik bleibt fast gleich, Scrollen wird ruhig.
========================================================= */
.hvideo__card{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(255,255,255,.2)}
.bst__card{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(14,14,24,.84)}
.bst__card:hover{background:rgba(22,22,36,.92)}
.rating{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(14,14,24,.6)}
.sec-shot .hours{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(255,255,255,.08)}
.lcard__seal{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(10,11,18,.5)}
.subhero__chips a{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(255,255,255,.16)}
.subhero__chips a:hover{background:rgba(255,255,255,.28)}
.subhero__seal{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(255,255,255,.12)}
.about-social{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(255,255,255,.9)}
/* Farbflaechen hinter "Ueber uns": ohne blur(94px). Der Filter wurde bei
jeder Bewegung (Treiben + Parallax) neu gerechnet und hat am Desktop
geruckelt. Weiche Verlaeufe mit mehr Stufen sehen fast gleich aus. */
.prism::before,.prism::after{filter:none}
.prism::before{background:radial-gradient(circle,rgba(23,133,176,.34) 0%,rgba(40,90,160,.24) 28%,rgba(50,60,134,.13) 48%,rgba(50,60,134,.05) 62%,transparent 72%)}
.prism::after{background:radial-gradient(circle,rgba(192,37,129,.26) 0%,rgba(196,110,95,.19) 30%,rgba(201,200,55,.12) 50%,rgba(201,200,55,.04) 64%,transparent 74%)}
/* =========================================================
26.09.2026: Team als Laufband (Handy), Kontakt ohne Formular
========================================================= */
/* Am Desktop/Tablet unsichtbarer Container: die Karten stehen wie bisher im Raster */
.team-cards{display:contents}
.person--clone{display:none}
@media (max-width:720px){
/* Handy: kleinere Karten in einer Reihe, laufen nach rechts (app.js, initTeamRail).
Abstand per margin statt gap, damit die Schleife genau eine Haelfte springt. */
.team{grid-template-columns:minmax(0,1fr);max-width:none;gap:22px}
.team-cards{display:flex;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;
scrollbar-width:none;padding-block:10px 16px;
-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.team-cards::-webkit-scrollbar{display:none}
.team-cards .person{display:block;flex:0 0 clamp(160px,48vw,210px);margin-inline-end:14px}
.team-cards .person-name b{font-size:15px}
.team-cards .person-name span{font-size:10px}
.team-cards .tba-label{top:12px;inset-inline-start:12px;font-size:9.5px;padding:5px 10px}
/* im Band kein Einzel-Einblenden der Karten (sie fahren ohnehin herein) */
.team-cards .person.rv:not(.in){opacity:1;translate:none;rotate:none;scale:none}
.team-cta{margin-top:0}
}
/* Kontakt: links die Kontaktwege, rechts Oeffnungszeiten und WhatsApp */
.contact{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}
.contact-side{display:grid;justify-items:start;gap:22px;min-width:0}
.contact-side .hours{margin-top:0;width:100%;max-width:520px}
.contact-side .kontakt-wa{margin-top:0}
@media (max-width:1080px){
.contact{grid-template-columns:minmax(0,1fr);gap:30px}
}
@media (max-width:720px){
/* Name und Rolle duerfen in der kleineren Karte umbrechen statt abgeschnitten zu werden */
.team-cards .person-name{inset-inline:16px 14px;bottom:16px}
.team-cards .person-name span{letter-spacing:.1em;line-height:1.35}
}
/* =========================================================
26.09.2026: Leistungen mit allen Klassen, Fuhrpark-Pfeil
========================================================= */
/* Hero: "Kostenlos und unverbindlich beraten" ist raus, Box ohne Unterzeile */
.hero .cta-box{padding:9px}
/* ---------- zwei weitere Fotokarten (Anhaenger, Sonstiges) im Stil der Autofuehrerschein-Karte ---------- */
.c-h{grid-column:span 6;min-height:clamp(300px,30vw,400px)}
.scard{isolation:isolate}
.scard .cell-body{z-index:3}
.scard h3{font-size:clamp(1.35rem,2.1vw,1.95rem);letter-spacing:-.03em;line-height:1.05}
.scard .lcard__chips{max-width:calc(100% - 48px)}
.scard .cell-media{transform:scale(1.1);transition:transform 1.8s var(--ease-soft)}
.scard.in .cell-media{transform:none}
.scard.rv:not(.in) .cell-media{transform:scale(1.22)}
.scard.in .lcard__chips li{opacity:1;transform:none}
.scard:hover .lcard__ring{opacity:1;animation-play-state:running}
/* ---------- Klassen als Chips: Kuerzel im farbigen Feld, dazu kurz, was es ist ---------- */
.lcard__chips--classes li{padding:5px 13px 5px 5px;gap:9px}
.lcard__chips--classes b{display:grid;place-items:center;min-width:34px;height:26px;padding:0 9px;border-radius:999px;
background:var(--c);color:#fff;font-family:'Archivo',sans-serif;font-variation-settings:'wght' 800;font-size:12.5px;letter-spacing:.01em}
.lcard__chips--classes li:nth-child(1){--c:#1785B0}
.lcard__chips--classes li:nth-child(2){--c:#C02581}
.lcard__chips--classes li:nth-child(3){--c:#E8652E}
.lcard__chips--classes li:nth-child(4){--c:#6A2FA0}
.scard .lcard__chips--classes li:nth-child(1){--c:#E8652E}
.scard .lcard__chips--classes li:nth-child(2){--c:#C2302E}
/* ---------- kleiner Pfeil "Unser Fuhrpark" (oeffnet alle Auto-Fotos gross) ---------- */
.fleet-row{margin-top:16px;display:flex;justify-content:flex-end}
.fleet-link{display:inline-flex;align-items:center;gap:16px;padding:8px 8px 8px 14px;border-radius:999px;
background:var(--paper);border:1px solid var(--line-2);color:var(--ink);text-align:start;
box-shadow:0 18px 36px -24px rgba(24,44,12,.55);
transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .5s var(--ease)}
.fleet-link:hover{transform:translateY(-3px);border-color:var(--green);box-shadow:0 26px 44px -24px rgba(24,44,12,.6)}
.fleet-link__thumbs{display:flex;padding-inline:4px}
.fleet-link__thumbs img{width:40px;height:50px;object-fit:cover;border-radius:10px;border:2px solid #fff;
box-shadow:0 6px 14px -6px rgba(0,0,0,.45);transition:transform .6s var(--spring)}
.fleet-link__thumbs img + img{margin-inline-start:-14px}
.fleet-link__thumbs img:nth-child(1){transform:rotate(-9deg)}
.fleet-link__thumbs img:nth-child(2){transform:translateY(-3px) rotate(2deg);position:relative;z-index:1}
.fleet-link__thumbs img:nth-child(3){transform:rotate(10deg)}
.fleet-link:hover .fleet-link__thumbs img:nth-child(1){transform:translateX(-7px) rotate(-15deg)}
.fleet-link:hover .fleet-link__thumbs img:nth-child(3){transform:translateX(7px) rotate(16deg)}
.fleet-link__txt{display:grid;line-height:1.2}
.fleet-link__txt b{font-family:'Archivo',sans-serif;font-variation-settings:'wght' 700;font-size:15px;letter-spacing:-.01em}
.fleet-link__txt span{font-size:12.5px;color:var(--ink-2)}
.fleet-link__arrow{width:40px;height:40px;border-radius:999px;display:grid;place-items:center;flex:none;color:#fff;
background:linear-gradient(135deg,#557F30 0%,var(--green) 52%,#1F3310 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
.fleet-link__arrow svg{width:17px;height:17px;transition:transform .5s var(--ease)}
.fleet-link:hover .fleet-link__arrow svg{transform:translateX(3px)}
[dir="rtl"] .fleet-link__arrow svg{transform:scaleX(-1)}
[dir="rtl"] .fleet-link:hover .fleet-link__arrow svg{transform:scaleX(-1) translateX(3px)}
/* ---------- Leistungsseite: alle Klassen einzeln ---------- */
.klassen{margin-top:clamp(60px,7vw,96px)}
.klassen-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;perspective:1400px}
.kl{--c:#1785B0;--ct:#E6F4FA;position:relative;overflow:hidden;border-radius:var(--r-shell);
padding:clamp(22px,2.4vw,30px);border:1px solid rgba(20,24,15,.06);
background:radial-gradient(90% 70% at 100% 0%,color-mix(in srgb,var(--c) 16%,transparent),transparent 62%),var(--ct)}
.kl::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:var(--c)}
.kl > *{position:relative;z-index:2}
.kl.spot::after{background:radial-gradient(340px circle at var(--mx) var(--my),color-mix(in srgb,var(--c) 20%,transparent),transparent 64%)}
.kl:hover{transform:translateY(-5px);box-shadow:0 30px 56px -36px rgba(24,44,12,.5)}
.kl__code{display:inline-grid;place-items:center;min-width:66px;height:50px;padding:0 14px;border-radius:15px;
background:var(--c);color:#fff;font-family:'Archivo',sans-serif;font-variation-settings:'wght' 800;
font-size:1.4rem;letter-spacing:-.02em;box-shadow:0 12px 24px -12px var(--c);transition:transform .7s var(--ease)}
.kl:hover .kl__code{transform:rotate(-6deg) scale(1.06)}
.kl__tag{position:absolute;top:clamp(22px,2.4vw,30px);inset-inline-end:clamp(18px,2vw,26px);z-index:2;
padding:5px 11px;border-radius:999px;background:#fff;color:var(--c);border:1px solid color-mix(in srgb,var(--c) 24%,transparent);
font-family:'Archivo',sans-serif;font-variation-settings:'wght' 600;font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.kl h3{margin-top:18px;font-size:clamp(1.05rem,1.4vw,1.25rem)}
.kl p{color:var(--ink-2);font-size:14.5px;margin-top:8px;line-height:1.55}
.kl:nth-child(1){--c:#1785B0;--ct:#E6F4FA}
.kl:nth-child(2){--c:#323C86;--ct:#EAECF8}
.kl:nth-child(3){--c:#6A2FA0;--ct:#F2EAF8}
.kl:nth-child(4){--c:#932D72;--ct:#F8EAF3}
.kl:nth-child(5){--c:#E8652E;--ct:#FDF0E8}
.kl:nth-child(6){--c:#C2302E;--ct:#FBEAEA}
@media (prefers-reduced-motion:no-preference){
@supports (animation-timeline: view()){
.scard .cell-media img{scale:1.14;animation:pxImg linear both;animation-duration:auto;animation-timeline:view()}
}
}
@media (max-width:1080px){
.klassen-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:720px){
.c-h{grid-column:span 12;min-height:250px}
/* Klassen auch auf dem Handy zeigen, aber nur die Kuerzel (B, BF17, ...) */
.lcard__chips.lcard__chips--classes{display:flex;top:16px;inset-inline-start:16px;gap:6px;max-width:calc(100% - 120px)}
.scard .lcard__chips.lcard__chips--classes{max-width:calc(100% - 32px)}
.lcard__chips--classes li{padding:4px}
.lcard__chips--classes li span{display:none}
.lcard__chips--classes b{height:24px;min-width:30px;font-size:12px}
.fleet-row{justify-content:stretch}
.fleet-link{width:100%}
.fleet-link__arrow{margin-inline-start:auto}
.klassen-grid{grid-template-columns:minmax(0,1fr)}
}
/* =====================================================================
RUNDE 03.10.2026: Facebook neben Instagram und TikTok
Facebook-Blau #0866FF (aktuelle Markenfarbe), Logo-Pfad aus Simple Icons (CC0).
===================================================================== */
.social-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.soc--fb{background:#0866FF}
.soc--fb::before{content:"";position:absolute;width:280px;height:280px;border-radius:50%;filter:blur(70px);opacity:.5;
pointer-events:none;background:#5AA2FF;top:-130px;inset-inline-end:-90px}
.soc--fb .soc__cta{background:#fff;color:#0866FF}
.soc--fb .soc__icon svg{width:62%;height:62%}
.sochip--fb{background:#0866FF}
.sochip--fb::before{content:"";position:absolute;inset:0;z-index:-1;
background:radial-gradient(70% 140% at 100% 0%,rgba(140,190,255,.45),transparent 62%)}
.sochip--fb .sochip__ico svg{width:64%;height:64%}
/* drei Karten nebeneinander: Symbol und Folgen-Pille oben, Name und Handle darunter,
damit die Handles nicht abgeschnitten werden. Ab Tablet abwaerts untereinander wie bisher. */
@media (min-width:901px){
.social-grid .soc{flex-wrap:wrap;row-gap:18px}
.social-grid .soc__txt{order:3;flex:1 1 100%}
.social-grid .soc__cta{margin-inline-start:auto}
}
@media (max-width:900px){
.social-grid{grid-template-columns:1fr}
}
/* Das neue Autofuehrerschein-Foto traegt Logo und Slogan selbst, das Siegel
"2 für 1 Ziel" laege sonst doppelt und genau ueber der Telefonnummer im Bild. */
.lcard .lcard__seal{display:none}
/* Autofuehrerschein-Foto vollstaendig (03.10.2026, Wunsch): die Karte hat das
Seitenverhaeltnis des Banners (oben bis zum Logo gekuerzt, 1599 x 789), das Foto ist nur minimal
hineingezoomt, ohne dunklen Verlauf, ohne Parallax- und Hover-Zoom.
Lesbarkeit der weissen Schrift kommt allein ueber einen Textschatten. */
.lcard{aspect-ratio:1599/789;min-height:0}
.lcard .cell-media::after{display:none}
.lcard .cell-media img,.cell.photo.lcard .cell-media img{filter:none;scale:1.03;animation:none}
.cell.lcard:hover .cell-media img{transform:none}
.lcard .cell-body h3{text-shadow:0 2px 18px rgba(0,0,0,.55),0 1px 3px rgba(0,0,0,.5)}
.lcard .cell-body p{color:#fff;text-shadow:0 1px 12px rgba(0,0,0,.7),0 1px 2px rgba(0,0,0,.6)}
/* Tablet und Handy: Foto als ganzer Block oben, Klassen-Chips, Titel und Button
darunter auf dunklem Grund. Ueber dem Bild waeren Text und Chips auf dem hellen
Himmel des Banners schlecht lesbar und verdeckten Web-Adresse und Telefon. */
@media (max-width:1080px){
.lcard{aspect-ratio:auto;min-height:0;padding:0 0 50px;justify-content:flex-start}
.lcard .cell-media{position:relative;inset:auto;aspect-ratio:1599/789}
.lcard .lcard__chips{position:relative;top:auto;inset-inline-start:auto;max-width:none;margin:20px 26px 0}
.lcard .cell-body{padding:16px 26px 0}
.lcard .cell-body h3,.lcard .cell-body p{text-shadow:none}
.lcard .cell-body p{color:rgba(255,255,255,.8)}
}
@media (max-width:720px){
.lcard{padding-bottom:44px}
.lcard .lcard__chips{display:flex;margin:16px 20px 0}
.lcard .cell-body{padding:12px 20px 0}
}
/* Klassen-Chips auf der Autofuehrerschein-Karte etwas tiefer (Bild beginnt jetzt am Logo) */
@media (min-width:1081px){ .lcard .lcard__chips{top:44px} }
/* ---------- Kleiner Pfeil auf jeder Leistungskarte (03.10.2026) ----------
Ersetzt den Button "Jetzt Leistungen ansehen". Der Link liegt ueber der ganzen
Karte (Chips sind reine Anzeige), sichtbar ist nur der runde Pfeil unten. */
.card-go{position:absolute;inset:0;z-index:5;border-radius:inherit}
.card-go:focus-visible{outline:3px solid #fff;outline-offset:-6px}
.card-go__arrow{position:absolute;bottom:22px;inset-inline-end:22px;width:46px;height:46px;border-radius:999px;
display:grid;place-items:center;background:#fff;color:var(--green);
box-shadow:0 14px 28px -14px rgba(0,0,0,.75);
transition:transform .5s var(--ease),background-color .4s var(--ease),color .4s var(--ease)}
.card-go__arrow svg{width:19px;height:19px;transition:transform .5s var(--ease)}
[dir=rtl] .card-go__arrow svg{transform:scaleX(-1)}
.cell:hover .card-go__arrow,.card-go:focus-visible .card-go__arrow{background:var(--green);color:#fff;transform:scale(1.08)}
.cell:hover .card-go__arrow svg{translate:3px 0}
[dir=rtl] .cell:hover .card-go__arrow svg{translate:-3px 0}
.lcard .card-go__arrow{bottom:52px}
/* Text haelt Abstand zum Pfeil */
.lcard .cell-body,.scard .cell-body{padding-inline-end:64px}
@media (max-width:720px){
.card-go__arrow{width:40px;height:40px;bottom:16px;inset-inline-end:16px}
.card-go__arrow svg{width:17px;height:17px}
.lcard .card-go__arrow{bottom:46px}
.lcard .cell-body,.scard .cell-body{padding-inline-end:56px}
}
/* Handy: Autofuehrerschein zeigt die Beschreibung wie die anderen Karten (03.10.2026) */
@media (max-width:720px){ .c-a.lcard .cell-body p{display:block} }
/* ---------- Aramaeisch (syrische Schrift, 03.10.2026) ----------
Syrisch ist eine verbundene Schrift: Sperrung (letter-spacing) wuerde die Buchstaben
auseinanderreissen. Die Zeichen sind etwas kleiner gezeichnet, daher mehr Zeilenhoehe. */
html[lang="syc"] body *{letter-spacing:0 !important}
html[lang="syc"] .lead,html[lang="syc"] .cell-body p,html[lang="syc"] p{line-height:1.75}
/* =====================================================================
EIGENE SEITE PRO LEISTUNG (03.10.2026): autofuehrerschein.html,
anhaengerfuehrerschein.html, erste-hilfe-sehtest-passbild.html
===================================================================== */
/* Foto rechts im Seitenkopf statt Siegel */
.subhero--svc .subhero__grid{align-items:center}
.subhero__shot{width:clamp(280px,36vw,520px);border-radius:26px;overflow:hidden;
border:4px solid rgba(255,255,255,.9);box-shadow:0 40px 80px -36px rgba(0,0,0,.8);rotate:1.5deg}
.subhero__shot img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover}
.subhero__shot--wide img{aspect-ratio:1599/789}
[dir="rtl"] .subhero__shot{rotate:-1.5deg}
@media (max-width:900px){
.subhero__shot{width:100%;max-width:560px;rotate:none;margin-top:8px}
}
/* vier bzw. zwei Klassen: zwei Spalten statt drei */
.klassen-grid--two{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:720px){ .klassen-grid--two{grid-template-columns:minmax(0,1fr)} }
#klassen .fleet-row{margin-top:22px}
/* "Weitere Leistungen": Anmelde-Streifen oben, darunter die beiden anderen Leistungen */
.svc-more__head{margin:clamp(44px,5vw,70px) 0 clamp(20px,2.4vw,30px)}
/* Autofuehrerschein als kleine Karte: Banner unten ausrichten, damit die Autos zu sehen sind */
.scard--auto .cell-media img{object-position:center 70%}
/* Startseite: "Entdecke alle Leistungen" links neben "Unser Fuhrpark" */
.fleet-row--split{justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
@media (max-width:720px){
.fleet-row--split{flex-direction:column;align-items:stretch}
.fleet-row--split .leist-all{justify-content:center}
}
/* Handy: Anmelde-Streifen, Text bricht um statt den Button abzuschneiden (03.10.2026) */
@media (max-width:720px){
.c-f .banner > div{min-width:0;flex:1 1 auto}
.c-f .banner .btn{flex:none;white-space:nowrap}
}
/* ---------- Laufschrift auf der Leistungsseite (03.10.2026) ----------
Laeuft dauerhaft nach links, dunkles Band mit Spektrumkanten, Woerter
abwechselnd weiss und im Spektrum. Die Kanten blenden ins Dunkle aus. */
.bigtext{position:relative;background:var(--dusk);-webkit-mask-image:none;mask-image:none;
border-block:3px solid;border-image:var(--vivid) 1}
.bigtext::before,.bigtext::after{content:"";position:absolute;top:0;bottom:0;width:clamp(40px,8vw,140px);z-index:1;pointer-events:none}
.bigtext::before{left:0;background:linear-gradient(90deg,var(--dusk),transparent)}
.bigtext::after{right:0;background:linear-gradient(-90deg,var(--dusk),transparent)}
.bigtext__track span{color:#fff;-webkit-text-stroke:0}
.bigtext__track span.f{background:var(--vivid);-webkit-background-clip:text;background-clip:text;color:transparent}
@media (prefers-reduced-motion:no-preference){
.bigtext__track{animation:marquee 60s linear infinite}
}
/* Abstand auch hinter dem letzten Punkt, damit -50% exakt einen Satz verschiebt (nahtlose Schleife) */
.bigtext__track{padding-inline-end:clamp(18px,2.4vw,40px)}