/* SR Base — Premium-Frontend-Kit (SR_BASE_APP_v3 · Brand Navy #00044E)
Reines CSS, kein Framework. Motion über native CSS-Scroll-Timelines
(progressive enhancement: ohne Support einfach sichtbar). */
/* ---- Tokens (Kurzaliasse auf die theme.json-Presets) ----
Flächen/Linien hängen an den Presets, damit Style-Variations (Dark Mode)
Karten, Formulare & Co. automatisch mitfärben. */
:root{
--sr-brand:var(--wp--preset--color--brand,#00044E);
--sr-accent:var(--wp--preset--color--accent,#2f6bff);
--sr-ink:var(--wp--preset--color--contrast,#0b1230);
--sr-bg:var(--wp--preset--color--base,#ffffff);
--sr-surface:var(--wp--preset--color--surface,#f3f6fc);
--sr-line:rgba(11,18,48,.10);
}
@supports (color: color-mix(in srgb, red 50%, blue)){
:root{--sr-line:color-mix(in srgb, var(--sr-ink) 12%, transparent)}
}
/* ---- Scrollbar im Markenblau ---- */
html{scrollbar-color:var(--sr-accent) var(--sr-surface,#eef2fb);scrollbar-width:thin}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:var(--sr-surface,#eef2fb)}
::-webkit-scrollbar-thumb{background:var(--sr-accent);border-radius:8px;border:3px solid var(--sr-surface,#eef2fb)}
::-webkit-scrollbar-thumb:hover{background:var(--wp--preset--color--accent-dark,#1b46c9)}
/* ---- Smooth Scrolling + Anker-Versatz für den sticky Header ----
Momentum-Scroll läuft jetzt in-house (assets/smooth.js, SR_SMOOTH_v1);
ohne JS/Touch greift natives scroll-behavior. ---- */
html{scroll-behavior:smooth;scroll-padding-top:96px}
.admin-bar{scroll-padding-top:128px}
@media (max-width:781px){.admin-bar{scroll-padding-top:142px}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* ---- Eyebrow / Kicker ---- */
.sr-eyebrow{display:inline-block;font-family:var(--wp--preset--font-family--display);font-size:.8rem;letter-spacing:3px;text-transform:uppercase;font-weight:700;color:var(--sr-accent);margin-bottom:.5rem}
.sr-eyebrow.on-dark{color:#8fb0ff}
/* Zentrierte Eyebrows als Block, damit die Box (nicht nur der Text) mittig sitzt */
.sr-eyebrow.has-text-align-center{display:block}
/* Akzent-Wort im Fließtext einer Headline */
.sr-grad{background:linear-gradient(100deg,#5b8bff 0%,#2f6bff 50%,#9db8ff 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
/* ---- Pill-Badges (Scarcity / Trust) ---- */
.sr-pill{display:inline-flex;align-items:center;gap:.5rem;font-size:.86rem;font-weight:600;padding:.4rem .9rem;border-radius:999px;border:1px solid var(--sr-line);background:var(--sr-bg)}
.sr-pill.on-dark{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.22);color:#dfe7ff}
.sr-pill .dot{width:8px;height:8px;border-radius:50%;background:#16c172;box-shadow:0 0 0 4px rgba(22,193,114,.18)}
/* ====================================================================
HERO — Markennavy mit Aurora-Glow
==================================================================== */
.sr-hero{position:relative;overflow:hidden;isolation:isolate}
.sr-hero.is-brand{background:var(--sr-brand);color:#fff}
.sr-hero .wp-block-cover__image-background{transform:scale(1.03)}
@media (prefers-reduced-motion:no-preference){
.sr-hero .wp-block-cover__image-background{animation:srKenburns 22s ease-out forwards}
@keyframes srKenburns{from{transform:scale(1.03)}to{transform:scale(1.14)}}
}
/* weiche Farbnebel im Hintergrund */
.sr-aurora{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.sr-aurora::before,.sr-aurora::after{content:"";position:absolute;width:55vw;height:55vw;border-radius:50%;filter:blur(90px);opacity:.55}
.sr-aurora::before{background:radial-gradient(circle,#2f6bff,transparent 60%);top:-18%;left:-10%}
.sr-aurora::after{background:radial-gradient(circle,#143aa6,transparent 60%);bottom:-22%;right:-12%}
@media (prefers-reduced-motion:no-preference){
.sr-aurora::before{animation:srFloatA 18s ease-in-out infinite alternate}
.sr-aurora::after{animation:srFloatB 22s ease-in-out infinite alternate}
@keyframes srFloatA{to{transform:translate(8%,10%) scale(1.12)}}
@keyframes srFloatB{to{transform:translate(-7%,-9%) scale(1.1)}}
}
/* feines Punkt-Raster über dem Navy */
.sr-grid-overlay{position:absolute;inset:0;z-index:-1;background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1px);background-size:34px 34px;mask-image:radial-gradient(ellipse 80% 60% at 50% 35%,#000 40%,transparent 100%)}
.sr-scrollcue{display:block;width:26px;height:42px;margin:2.4rem auto 0;border:2px solid rgba(255,255,255,.5);border-radius:14px;position:relative}
.sr-scrollcue::after{content:"";position:absolute;left:50%;top:8px;width:4px;height:8px;background:#fff;border-radius:2px;transform:translateX(-50%)}
@media (prefers-reduced-motion:no-preference){
.sr-scrollcue::after{animation:srCue 1.7s ease-in-out infinite}
@keyframes srCue{0%,100%{opacity:0;transform:translate(-50%,0)}50%{opacity:1;transform:translate(-50%,9px)}}
}
/* ---- Logo-/Trust-Strip ---- */
.sr-logos{display:flex;flex-wrap:wrap;gap:2.2rem 3rem;align-items:center;justify-content:center;opacity:.8}
.sr-logos img{height:30px;width:auto;filter:grayscale(1);opacity:.7;transition:filter .25s,opacity .25s}
@media (hover:hover) and (pointer:fine){
.sr-logos img:hover{filter:none;opacity:1}
}
.sr-trust .wp-block-column{border-left:1px solid var(--sr-line)}
.sr-trust .wp-block-column:first-child{border-left:0}
@media(max-width:781px){.sr-trust .wp-block-column{border-left:0}}
/* ====================================================================
PILLARS — die drei großen Leistungssäulen
==================================================================== */
.sr-pillar{position:relative;overflow:hidden;border:1px solid var(--sr-line);border-radius:20px;background:var(--sr-bg);transition:transform .35s cubic-bezier(.4,0,.2,1),box-shadow .35s ease,border-color .35s}
.sr-pillar::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(135deg,rgba(47,107,255,.5),transparent 45%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .35s}
.sr-pillar .sr-ico{display:inline-grid;place-items:center;width:60px;height:60px;border-radius:16px;background:linear-gradient(135deg,#eaf0ff,#dbe6ff);color:var(--sr-accent);font-size:1.7rem;margin-bottom:1rem}
/* ---- Kompetenz-Karten (kleineres Grid) ---- */
/* Der Schatten liegt auf ::after und wird über opacity ein-/ausgeblendet — das
läuft auf dem Compositor. Ein transition auf box-shadow selbst würde bei jedem
Frame neu rastern (auf Seiten mit ~30 Karten spürbar). */
.sr-card{position:relative;overflow:hidden;border:1px solid var(--sr-line);border-radius:16px;background:var(--sr-bg);transition:transform .3s cubic-bezier(.4,0,.2,1)}
.sr-card::before{content:"";position:absolute;left:0;top:0;height:3px;width:100%;background:var(--sr-accent);transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.4,0,.2,1);z-index:1}
.sr-card::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:0 24px 46px rgba(11,18,48,.14);opacity:0;transition:opacity .3s ease;pointer-events:none}
.sr-num{font-family:var(--wp--preset--font-family--display);font-size:.95rem;font-weight:700;color:var(--sr-accent);letter-spacing:1px}
/* Hover-Zustände NUR für echte Zeigegeräte. Auf Touch bleibt der :hover sonst
nach dem Antippen kleben — die Karte hängt dann angehoben da, bis man
woanders hintippt. will-change wird erst bei Hover-Absicht gesetzt (spart
Speicher auf Seiten mit vielen Karten). */
@media (hover:hover) and (pointer:fine){
.sr-card,.sr-pillar{will-change:auto}
.sr-card:hover,.sr-pillar:hover{will-change:transform}
.sr-pillar:hover,.sr-pillar:focus-within{transform:translateY(-10px);box-shadow:0 30px 60px rgba(11,18,48,.16);border-color:transparent}
.sr-pillar:hover::after,.sr-pillar:focus-within::after{opacity:1}
.sr-card:hover,.sr-card:focus-within{transform:translateY(-8px)}
.sr-card:hover::before,.sr-card:focus-within::before{transform:scaleX(1)}
.sr-card:hover::after,.sr-card:focus-within::after{opacity:1}
}
/* Tastatur-Navigation: Karten heben sich auch beim Durchtabben hervor
(funktioniert auf Touch-Geräten mit externer Tastatur ebenfalls). */
.sr-card:focus-within::before{transform:scaleX(1)}
.sr-pillar:focus-within::after{opacity:1}
/* Bewegungsempfindliche Nutzer: Farbe/Schatten ja, Verschieben nein. */
@media (prefers-reduced-motion:reduce){
.sr-card,.sr-pillar{transition:none}
.sr-card:hover,.sr-card:focus-within,
.sr-pillar:hover,.sr-pillar:focus-within{transform:none}
}
/* ====================================================================
KENNZAHLEN-BAND mit Count-up
==================================================================== */
.sr-stat-num{font-family:var(--wp--preset--font-family--display);font-weight:700;font-size:clamp(2.4rem,5vw,3.4rem);line-height:1;color:#fff}
.sr-stat-lbl{color:#c4d2ff;font-size:.98rem;margin-top:.35rem}
/* ====================================================================
TESTIMONIALS
==================================================================== */
.sr-quote{border:1px solid var(--sr-line);border-radius:18px;background:var(--sr-bg);padding:1.8rem;box-shadow:0 12px 30px rgba(11,18,48,.05);position:relative}
.sr-quote::before{content:"\201C";position:absolute;top:.2rem;left:1.1rem;font-family:var(--wp--preset--font-family--display);font-size:3.2rem;line-height:1;color:rgba(47,107,255,.25)}
.sr-quote .sr-stars{color:#f5a524;letter-spacing:2px;margin-bottom:.5rem}
.sr-quote .sr-by{display:flex;align-items:center;gap:.7rem;margin-top:1.1rem;font-size:.9rem}
.sr-quote .sr-av{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,#2f6bff,#00044E);color:#fff;display:grid;place-items:center;font-weight:700;font-family:var(--wp--preset--font-family--display)}
/* ---- Google-Rating-Badge ---- */
.sr-grating{display:inline-flex;align-items:center;gap:.85rem;background:var(--sr-bg);border:1px solid var(--sr-line);border-radius:999px;padding:.6rem 1.3rem;box-shadow:0 10px 30px rgba(11,18,48,.08);font-size:.98rem}
.sr-grating .g{width:22px;height:22px;flex:none}
.sr-grating .score{font-family:var(--wp--preset--font-family--display);font-weight:700;font-size:1.25rem;color:var(--sr-ink);line-height:1}
.sr-grating .gstars{color:#f5a524;letter-spacing:1px}
.sr-grating .cnt{color:var(--wp--preset--color--muted)}
.sr-grating a,.sr-grating .cnt a{color:var(--sr-accent);text-decoration:none;font-weight:600}
/* ---- Bewertungs-Wall (Masonry über CSS-Columns) ---- */
.sr-wall{columns:3 300px;column-gap:1.5rem;margin-top:2.4rem}
.sr-wall .sr-quote{break-inside:avoid;margin:0 0 1.5rem;display:inline-block;width:100%}
.sr-quote .sr-date{font-size:.8rem;color:var(--wp--preset--color--muted);margin-left:auto}
.sr-quote .sr-by{justify-content:flex-start}
.sr-quote .sr-by .gmark{margin-left:auto;display:inline-flex;align-items:center;gap:.3rem;font-size:.74rem;color:var(--wp--preset--color--muted)}
.sr-quote .sr-by .gmark svg{width:14px;height:14px}
/* ====================================================================
LEAD-FORMULAR
==================================================================== */
.sr-form{display:grid;gap:.85rem}
.sr-form .row{display:grid;grid-template-columns:1fr 1fr;gap:.85rem}
@media(max-width:600px){.sr-form .row{grid-template-columns:1fr}}
.sr-form input,.sr-form textarea{width:100%;padding:.85rem 1rem;border:1px solid var(--sr-line);border-radius:12px;background:var(--sr-bg);font:inherit;color:var(--sr-ink);transition:border-color .2s,box-shadow .2s}
.sr-form input:focus,.sr-form textarea:focus{outline:none;border-color:var(--sr-accent);box-shadow:0 0 0 4px rgba(47,107,255,.14)}
.sr-form .check{display:flex;gap:.55rem;align-items:flex-start;font-size:.84rem;color:var(--wp--preset--color--muted)}
.sr-form button{appearance:none;border:0;cursor:pointer;background:var(--sr-accent);color:#fff;font-weight:700;font-size:1rem;padding:.95rem 1.4rem;border-radius:12px;transition:transform .2s,background .2s,box-shadow .2s}
@media (hover:hover) and (pointer:fine){
.sr-form button:hover{background:var(--wp--preset--color--accent-dark);transform:translateY(-2px);box-shadow:0 12px 26px rgba(47,107,255,.32)}
}
.sr-form button:focus-visible{outline:none;background:var(--wp--preset--color--accent-dark);box-shadow:0 0 0 4px rgba(47,107,255,.32)}
.sr-form button:active{transform:translateY(0)}
/* ---- Prozess-Stepper ---- */
.sr-steps{display:flex;flex-wrap:wrap;gap:.55rem;justify-content:center;align-items:center}
.sr-step{display:inline-flex;align-items:center;gap:.55rem;background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:.5rem 1.05rem;font-size:.95rem;font-weight:600;backdrop-filter:blur(2px)}
/* ====================================================================
CINEMATIC SCROLL-FX (JS-getrieben, mit reduced-motion-Fallback)
==================================================================== */
/* Fortschrittsbalken */
.sr-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:1000;transform:scaleX(0);transform-origin:0 50%;background:linear-gradient(90deg,#2f6bff,#9db8ff 60%,#2f6bff);box-shadow:0 0 12px rgba(47,107,255,.5)}
/* Reveals — fade + rise + leichtes Scale, mit Stagger über --i.
Versteckt NUR wenn JS aktiv ist (.sr-js am ) — sonst bleibt Inhalt sichtbar. */
.sr-js [data-reveal],.sr-js .sr-reveal{opacity:0;transform:translateY(38px) scale(.985);transition:opacity .85s cubic-bezier(.16,.84,.44,1),transform .85s cubic-bezier(.16,.84,.44,1);transition-delay:calc(var(--i,0)*85ms);will-change:opacity,transform}
.sr-js [data-reveal].is-in,.sr-js .sr-reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.sr-js [data-reveal],.sr-js .sr-reveal{opacity:1;transform:none;transition:none}}
/* Parallax-Ebenen werden per JS via translate3d bewegt */
[data-parallax]{will-change:transform}
/* Ghost-Wordmark im Hero (große, driftende Marken-Typo im Hintergrund) */
.sr-ghost{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);z-index:-1;font-family:var(--wp--preset--font-family--display);font-weight:700;font-size:min(34vw,30rem);line-height:.8;letter-spacing:-.04em;color:rgba(255,255,255,.04);white-space:nowrap;pointer-events:none;user-select:none}
/* ====================================================================
GEPINNTE SCROLLYTELLING-SZENE ([data-scene] liefert --p 0..1)
==================================================================== */
.sr-scene{position:relative;background:var(--sr-brand);color:#fff}
.sr-scene-sticky{position:sticky;top:0;min-height:100vh;display:flex;align-items:center;overflow:hidden}
.sr-scene-sticky>.sr-aurora{opacity:.5}
.sr-scene-inner{position:relative;z-index:1;width:100%;max-width:1200px;margin:0 auto;padding:clamp(3rem,8vh,6rem) clamp(1rem,4vw,4rem);display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
@media(max-width:900px){.sr-scene-inner{grid-template-columns:1fr;gap:2rem}}
.sr-scene-head .sr-eyebrow{color:#8fb0ff}
.sr-scene-head h2{color:#fff;font-size:clamp(1.9rem,3.4vw,2.8rem);margin:.2rem 0 1.6rem}
.sr-scene-steps{position:relative;padding-left:1.6rem}
.sr-rail{position:absolute;left:0;top:.3rem;bottom:.3rem;width:3px;border-radius:3px;background:rgba(255,255,255,.16);overflow:hidden}
.sr-rail>span{position:absolute;left:0;top:0;width:100%;height:calc(var(--p,0)*100%);background:linear-gradient(180deg,#2f6bff,#9db8ff)}
.sr-step-item{padding:.9rem 0;opacity:.32;transform:translateY(6px);transition:opacity .45s ease,transform .45s ease}
.sr-step-item.is-active{opacity:1;transform:none}
.sr-step-item .n{font-family:var(--wp--preset--font-family--display);font-size:.85rem;font-weight:700;letter-spacing:2px;color:#8fb0ff}
.sr-step-item h3{color:#fff;font-size:clamp(1.3rem,2.4vw,1.7rem);margin:.2rem 0 .35rem}
.sr-step-item p{color:#c4d2ff;margin:0;max-width:38ch}
/* Visual: Analytics-Panel, dessen Kurve sich mit --p zeichnet + Balken wachsen */
.sr-scene-visual{position:relative;border-radius:22px;background:linear-gradient(160deg,rgba(255,255,255,.10),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(6px);padding:1.4rem;box-shadow:0 30px 80px rgba(0,0,0,.4);aspect-ratio:4/3}
.sr-scene-visual .cap{display:flex;justify-content:space-between;align-items:center;color:#c4d2ff;font-size:.82rem;margin-bottom:.7rem}
.sr-scene-visual .cap b{color:#fff;font-family:var(--wp--preset--font-family--display)}
.sr-chart{position:relative;width:100%;height:78%}
.sr-chart svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.sr-chart .grid line{stroke:rgba(255,255,255,.10);stroke-width:1}
.sr-chart .area{fill:url(#srArea);opacity:calc(.25 + var(--p,0)*.75)}
.sr-chart .line{fill:none;stroke:#9db8ff;stroke-width:2.5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--p,0));filter:drop-shadow(0 0 6px rgba(47,107,255,.6))}
.sr-chart .dot{transform:translateX(calc(var(--p,0)*100%));transition:none}
.sr-chart .dot circle{fill:#fff;filter:drop-shadow(0 0 8px #2f6bff)}
.sr-bars{position:absolute;left:0;right:0;bottom:0;display:flex;gap:6px;align-items:flex-end;height:30%}
.sr-bars i{flex:1;border-radius:4px 4px 0 0;background:linear-gradient(180deg,#2f6bff,#143aa6);height:calc((var(--b)*0.4 + var(--p,0)*var(--b)*0.6)*1%)}
/* ---- Netzwerk-Karte (DACH-Pins) ---- */
.sr-net{position:relative;max-width:1180px;margin:0 auto}
.sr-net>img{width:100%;height:auto;display:block;filter:drop-shadow(0 12px 34px rgba(0,0,0,.45))}
.sr-net-pin{position:absolute;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--sr-accent);box-shadow:0 0 0 3px rgba(47,107,255,.22);cursor:pointer}
.sr-net-pin::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid var(--sr-accent)}
.sr-net-pin.is-hq{width:17px;height:17px;margin:-8.5px 0 0 -8.5px;background:#fff;box-shadow:0 0 0 4px var(--sr-accent)}
.sr-net-tip{position:absolute;bottom:150%;left:50%;transform:translateX(-50%) translateY(5px);background:#fff;color:#0b1230;font-size:.8rem;font-weight:700;white-space:nowrap;padding:.34rem .64rem;border-radius:8px;opacity:0;pointer-events:none;transition:opacity .18s,transform .18s;box-shadow:0 8px 22px rgba(0,0,0,.28)}
.sr-net-pin:hover{z-index:5}
.sr-net-pin:hover .sr-net-tip{opacity:1;transform:translateX(-50%) translateY(0)}
@media (prefers-reduced-motion:no-preference){
.sr-net-pin::after{animation:srPulse 2.2s ease-out infinite}
@keyframes srPulse{0%{transform:scale(.6);opacity:.85}100%{transform:scale(2.6);opacity:0}}
}
/* ---- Buttons premium ---- */
.wp-block-button__link{transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease;will-change:transform}
.wp-block-button__link:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(47,107,255,.28)}
.wp-block-button.is-style-outline .wp-block-button__link:hover{box-shadow:0 12px 26px rgba(11,18,48,.14)}
/* ====================================================================
VIDEO-SHOWCASE (Facade: Poster + Play, lädt Vimeo erst beim Klick)
==================================================================== */
.sr-video{position:relative;max-width:980px;margin:2.4rem auto 0;aspect-ratio:16/9;border-radius:22px;overflow:hidden;border:1px solid rgba(255,255,255,.16);box-shadow:0 40px 90px rgba(0,0,0,.5),0 0 0 6px rgba(47,107,255,.08);background:#00031f;cursor:pointer;isolation:isolate}
.sr-video::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(135deg,rgba(47,107,255,.7),transparent 40%,rgba(157,184,255,.4));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;z-index:3}
.sr-video img,.sr-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.sr-video img{object-fit:cover;transition:transform .6s cubic-bezier(.4,0,.2,1),filter .4s;filter:saturate(1.05)}
.sr-video:hover img{transform:scale(1.04)}
.sr-video .veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,4,40,.15),rgba(0,4,40,.55));z-index:1}
.sr-video-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;width:84px;height:84px;border:0;border-radius:50%;cursor:pointer;background:rgba(255,255,255,.16);backdrop-filter:blur(6px);box-shadow:0 0 0 1px rgba(255,255,255,.4);display:grid;place-items:center;transition:transform .25s,background .25s}
.sr-video-play::before{content:"";display:block;width:0;height:0;margin-left:5px;border-style:solid;border-width:13px 0 13px 22px;border-color:transparent transparent transparent #fff}
.sr-video-play::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid rgba(255,255,255,.5)}
.sr-video:hover .sr-video-play{transform:translate(-50%,-50%) scale(1.08);background:var(--sr-accent)}
.sr-video .dur{position:absolute;right:14px;bottom:12px;z-index:2;background:rgba(0,4,40,.6);color:#fff;font-size:.78rem;font-weight:600;padding:.25rem .6rem;border-radius:999px;backdrop-filter:blur(4px)}
@media (prefers-reduced-motion:no-preference){
.sr-video-play::after{animation:srPulse 2.4s ease-out infinite}
}
.sr-video.is-playing .sr-video-play,.sr-video.is-playing .veil,.sr-video.is-playing img,.sr-video.is-playing .dur{display:none}
/* ---- Abschnitts-Trenner (sanfte Welle als Hommage ans Original) ---- */
.sr-wave{display:block;width:100%;height:60px;line-height:0}
.sr-wave svg{width:100%;height:100%;display:block}
/* ====================================================================
ANIMATIONS-KIT v3 (SR_BASE_FX_v3): Text-Split, Tilt, Magnetic
==================================================================== */
/* Text-Split: scroll-fx.js zerlegt .sr-split-Headlines in Wort-Spans.
Versteckt wird NUR wenn JS läuft (.sr-js) UND das Zerlegen geklappt hat
(.is-split) — doppeltes Sicherheitsnetz gegen unsichtbare Headlines.
Bewusst ohne overflow-Maske: bei line-height 1.1 würden Unterlängen clippen. */
.sr-split .w{display:inline-block}
.sr-split .w>span{display:inline-block}
.sr-js .sr-split.is-split .w>span{opacity:0;transform:translateY(.6em);filter:blur(8px);transition:opacity .7s cubic-bezier(.16,.84,.44,1),transform .7s cubic-bezier(.16,.84,.44,1),filter .7s ease;transition-delay:calc(var(--wi,0)*45ms)}
.sr-js .sr-split.is-split.is-in .w>span{opacity:1;transform:none;filter:none}
@media (prefers-reduced-motion:reduce){.sr-js .sr-split.is-split .w>span{opacity:1;transform:none;filter:none;transition:none}}
/* Tilt: Karten neigen sich zur Maus (scroll-fx.js setzt --rx/--ry, außerdem
--mx/--my in % für eigene Glanz-Effekte). Nur auf hover:hover-Geräten aktiv;
ersetzt auf .sr-card/.sr-pillar den Hover-Lift (ein Transform gewinnt). */
.sr-tilt-on{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .18s ease-out;transform-style:preserve-3d;will-change:transform}
/* Magnetic: Button/CTA folgt dem Cursor ein Stück (JS setzt inline-transform,
hier nur das weiche Zurückfedern). */
.sr-magnetic-on{transition:transform .35s cubic-bezier(.2,.8,.3,1.35);will-change:transform;display:inline-block}
@media (prefers-reduced-motion:reduce){.sr-tilt-on,.sr-magnetic-on{transform:none!important;transition:none}}
/* ====================================================================
NEXT-LEVEL-KIT v4 (SR_BASE_NL_v1) — Research 07/2026
Instant-Navigation, CLS-freie Fonts, moderne CSS-Features, neue
Sektions-Bausteine. Alles Progressive Enhancement + reduced-motion-safe.
==================================================================== */
/* ---- Cross-Document View Transitions: Seitenwechsel als sanfter Fade.
Zusammen mit Prerender (Bridge hebt WP-Speculation-Rules auf prerender/
moderate) fühlt sich Navigation an wie ein Tab-Wechsel. Der sticky Header
hat view-transition-name (theme.json) und bleibt dadurch stehen. ---- */
@media (prefers-reduced-motion: no-preference){
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:200ms}
}
/* ---- CLS-Schutz: Fallback-Fonts mit angepassten Metriken. Solange die
woff2 laden, rendert Arial in Inter-/Grotesk-Metrik — kein Layout-Sprung
beim Font-Swap (font-display:swap bleibt dadurch "gratis"). ---- */
@font-face{font-family:'Inter Fallback';src:local('Arial');size-adjust:107%;ascent-override:90.5%;descent-override:22.5%;line-gap-override:0%}
@font-face{font-family:'Grotesk Fallback';src:local('Arial');size-adjust:105.5%;ascent-override:93%;descent-override:25%;line-gap-override:0%}
/* ---- Typo-Polish: ausgewogene Headlines, keine Hurenkinder im Fließtext.
Degradiert in älteren Browsern einfach zu nichts. ---- */
h1,h2,h3,.wp-block-heading{text-wrap:balance}
p{text-wrap:pretty}
/* ---- FAQ-Accordions (core/details) endlich WEICH öffnen — CSS-only.
::details-content + interpolate-size; ohne Support: harter Toggle wie bisher. ---- */
:root{interpolate-size:allow-keywords}
.wp-block-details summary{cursor:pointer}
.wp-block-details::details-content{height:0;overflow:clip;transition:height .35s ease,content-visibility .35s allow-discrete}
.wp-block-details[open]::details-content{height:auto}
@media (prefers-reduced-motion:reduce){.wp-block-details::details-content{transition:none}}
/* ---- Header versteckt sich beim Runterscrollen, kommt beim Hochscrollen
sofort wieder (scroll-fx.js setzt .sr-nav-hidden am ). ---- */
.sr-js.sr-nav-hidden .wp-site-blocks > header{transform:translateY(-110%)}
/* Tastatur-Fokus darf nie im ausgeblendeten Header landen: sobald ein Nav-Link
(o. a. Element im Header) Fokus hat, fährt der Header sofort wieder ein. */
.sr-js.sr-nav-hidden .wp-site-blocks > header:focus-within{transform:none}
@media (prefers-reduced-motion:reduce){.sr-js.sr-nav-hidden .wp-site-blocks > header{transform:none}}
/* ---- Logo-/Referenzen-Marquee (CSS-only, endlos). Markup:
---- */
.sr-marquee{display:flex;overflow:hidden;gap:3rem;mask-image:linear-gradient(to right,transparent,#000 5rem,#000 calc(100% - 5rem),transparent);-webkit-mask-image:linear-gradient(to right,transparent,#000 5rem,#000 calc(100% - 5rem),transparent)}
.sr-marquee-track{display:flex;align-items:center;gap:3rem;flex-shrink:0;min-width:100%;justify-content:space-around}
.sr-marquee-track img{height:34px;width:auto;filter:grayscale(1);opacity:.65;transition:filter .25s,opacity .25s}
.sr-marquee-track img:hover{filter:none;opacity:1}
.sr-logotxt{font-family:var(--wp--preset--font-family--display);font-weight:700;font-size:1.15rem;color:var(--wp--preset--color--muted,#5b6884);white-space:nowrap;opacity:.75}
@media (prefers-reduced-motion:no-preference){
.sr-marquee-track{animation:srMarquee 32s linear infinite}
.sr-marquee:hover .sr-marquee-track{animation-play-state:paused}
@keyframes srMarquee{to{transform:translateX(calc(-100% - 3rem))}}
}
@media (prefers-reduced-motion:reduce){.sr-marquee{overflow-x:auto}}
/* ---- Testimonial-/Karten-Slider: scroll-snap, touch-nativ, 0 JS.
Auf Chromium/Safari mit nativen Dots (::scroll-marker) als Bonus. ---- */
.sr-slider{display:flex;gap:1.5rem;overflow-x:auto;scroll-snap-type:x mandatory;padding:.5rem .25rem 1.25rem;scrollbar-width:thin;scroll-marker-group:after}
.sr-slider>*{flex:0 0 min(420px,86%);scroll-snap-align:center}
.sr-slider::scroll-marker-group{display:flex;justify-content:center;gap:.5rem;margin-top:.75rem}
.sr-slider>*::scroll-marker{content:'';width:9px;height:9px;border-radius:50%;background:var(--sr-line)}
.sr-slider>*::scroll-marker:checked{background:var(--sr-accent)}
/* Sichtbarer Fokusring, wenn der Slider per Tastatur fokussiert wird (scroll-fx.js
setzt tabindex/role/aria-label und macht die Pfeiltasten scroll-wirksam). */
.sr-slider:focus-visible{outline:3px solid var(--sr-accent);outline-offset:4px;border-radius:12px}
/* ---- Vorher/Nachher-Vergleich (Range-Input = tastatur- & touch-fähig;
scroll-fx.js schreibt den Wert in --pos). Markup:
---- */
.sr-compare{--pos:50%;position:relative;overflow:hidden;border-radius:18px;aspect-ratio:16/9}
.sr-compare img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;margin:0}
.sr-compare img.after{clip-path:inset(0 0 0 var(--pos))}
.sr-compare::after{content:"";position:absolute;top:0;bottom:0;left:var(--pos);width:2px;background:#fff;box-shadow:0 0 12px rgba(0,0,0,.5);pointer-events:none}
.sr-compare input[type=range]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
/* ---- Bento-Grid für Feature-Storytelling (asymmetrische Karten). ---- */
.sr-bento{display:grid;gap:1.25rem;grid-template-columns:repeat(6,1fr)}
.sr-bento>*{grid-column:span 2;margin:0!important}
.sr-bento>.is-wide{grid-column:span 4}
.sr-bento>.is-tall{grid-row:span 2}
@media(max-width:900px){.sr-bento{grid-template-columns:1fr 1fr}.sr-bento>*,.sr-bento>.is-wide{grid-column:span 2}}
/* ---- Feines Noise-Korn über dunklen Sektionen (Anti-Banding, Tiefe). ---- */
.sr-noise{position:relative;isolation:isolate}
.sr-noise::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
/* ---- Scroll-Driven-Bonus: sanftes Bild-Parallax OHNE JS, wo unterstützt
(Chromium/Safari; Firefox bekommt schlicht kein Parallax). ---- */
@supports (animation-timeline: view()){
@media (prefers-reduced-motion:no-preference){
.sr-drift{animation:srDrift linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
@keyframes srDrift{from{transform:translateY(4%) scale(1.08)}to{transform:translateY(-4%) scale(1.08)}}
}
}
/* ====================================================================
PREMIUM-MOBILMENÜ (SR_BASE_NAV_v1) — WP-Navigation-Overlay veredelt
Das native WP-Overlay (overlayMenu:"mobile") war komplett ungestylt
(weißes Default-Fullscreen). Hier: gebrandetes Navy-Overlay mit Aurora,
Backdrop-Blur, großen gestaffelt einfliegenden Links, eigener Hamburger
und X. Rein CSS — WP-Core toggelt is-menu-open selbst, kein Extra-JS.
==================================================================== */
/* ---- Hamburger-Trigger (in der Kopfleiste) — eigener 3-Balken-Look ---- */
/* WICHTIG: display NICHT anfassen — WP zeigt den Button nur unterhalb des
Overlay-Breakpoints (overlayMenu:"mobile"). Nur Aussehen + zentrieren. */
.sr-header .wp-block-navigation__responsive-container-open{
width:44px;height:44px;border-radius:12px;align-items:center;justify-content:center;
background:color-mix(in srgb,var(--sr-brand) 8%,transparent);
border:1px solid var(--sr-line);transition:background .25s,border-color .25s,transform .25s}
@media (hover:hover){.sr-header .wp-block-navigation__responsive-container-open:hover{
background:color-mix(in srgb,var(--sr-accent) 12%,transparent);border-color:color-mix(in srgb,var(--sr-accent) 40%,transparent)}}
.sr-header .wp-block-navigation__responsive-container-open svg{display:none} /* Default-Icon aus */
.sr-header .wp-block-navigation__responsive-container-open::before{
content:"";width:22px;height:2px;border-radius:2px;background:var(--sr-brand);
box-shadow:0 -7px 0 var(--sr-brand),0 7px 0 var(--sr-brand)}
.wp-site-blocks > header:has(.wp-block-navigation__responsive-container.is-menu-open){
backdrop-filter:none!important;-webkit-backdrop-filter:none!important;transform:none!important;background:transparent!important;box-shadow:none!important}
/* ---- Overlay offen ---- */
.wp-block-navigation__responsive-container.is-menu-open{
background:linear-gradient(160deg,#00044E 0%,#050a3a 55%,#0a1a6e 100%);
padding:clamp(1.5rem,6vw,4rem);backdrop-filter:none;animation:srNavFade .4s ease both}
@keyframes srNavFade{from{opacity:0}to{opacity:1}}
/* Aurora-Schimmer im Overlay */
.wp-block-navigation__responsive-container.is-menu-open::before{
content:"";position:absolute;width:70vw;height:70vw;border-radius:50%;top:-25%;right:-20%;
background:radial-gradient(circle,rgba(47,107,255,.45),transparent 60%);filter:blur(70px);pointer-events:none;z-index:0}
.wp-block-navigation__responsive-container.is-menu-open::after{
content:"";position:absolute;width:60vw;height:60vw;border-radius:50%;bottom:-25%;left:-20%;
background:radial-gradient(circle,rgba(20,58,166,.5),transparent 60%);filter:blur(80px);pointer-events:none;z-index:0}
@media (prefers-reduced-motion:no-preference){
.wp-block-navigation__responsive-container.is-menu-open::before{animation:srFloatA 16s ease-in-out infinite alternate}
.wp-block-navigation__responsive-container.is-menu-open::after{animation:srFloatB 20s ease-in-out infinite alternate}
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content{
position:relative;z-index:1;display:flex;flex-direction:column;justify-content:center;align-items:center;
min-height:100dvh;width:100%;padding:max(4rem,env(safe-area-inset-top)) 0 max(2rem,env(safe-area-inset-bottom))}
.wp-block-navigation__responsive-container.is-menu-open{display:flex;flex-direction:column}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog{
display:flex;flex-direction:column;flex:1 1 auto;width:100%;min-height:0}
/* ---- Schließen-X ---- */
.wp-block-navigation__responsive-container-close{
top:1.5rem;right:1.5rem;width:46px;height:46px;border-radius:12px;color:#fff;
background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);
display:grid;place-items:center;transition:background .25s,transform .25s}
@media (hover:hover){.wp-block-navigation__responsive-container-close:hover{
background:rgba(255,255,255,.16);transform:rotate(90deg)}}
.wp-block-navigation__responsive-container-close svg{width:26px;height:26px}
/* ---- Links im Overlay: groß, Display-Font, gestaffelt einfliegend ---- */
.is-menu-open .wp-block-navigation__responsive-container-content{gap:0}
.is-menu-open .wp-block-navigation__container.wp-block-navigation{
flex-direction:column;align-items:center;gap:.35rem;width:100%}
.is-menu-open .wp-block-navigation-item{width:100%;max-width:520px}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content{
display:block;text-align:center;color:#eaf0ff!important;font-family:var(--wp--preset--font-family--display);
font-weight:700;font-size:clamp(1.6rem,7vw,2.3rem);letter-spacing:-.02em;line-height:1.15;
padding:.55rem 1rem;border-radius:14px;width:100%;
transition:color .2s,background .2s}
@media (hover:hover){.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover{
color:#fff!important;background:rgba(255,255,255,.06)}}
/* Default-Underline-After im Overlay aus (kommt aus theme.json Nav-Styles) */
.is-menu-open .sr-header .wp-block-navigation-item__content::after{display:none}
/* CTA im Overlay als Vollbutton */
.is-menu-open .wp-block-navigation-item.sr-cta{margin-top:1rem}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.sr-cta .wp-block-navigation-item__content{
background:var(--sr-cta-bg,var(--wp--preset--color--accent))!important;color:#fff!important;
box-shadow:0 14px 34px rgba(47,107,255,.4)}
/* Stagger: Links fliegen nacheinander von unten ein */
@media (prefers-reduced-motion:no-preference){
.is-menu-open .wp-block-navigation-item{opacity:0;transform:translateY(26px);
animation:srNavItem .5s cubic-bezier(.16,.84,.44,1) forwards}
@keyframes srNavItem{to{opacity:1;transform:none}}
.is-menu-open .wp-block-navigation-item:nth-child(1){animation-delay:.06s}
.is-menu-open .wp-block-navigation-item:nth-child(2){animation-delay:.12s}
.is-menu-open .wp-block-navigation-item:nth-child(3){animation-delay:.18s}
.is-menu-open .wp-block-navigation-item:nth-child(4){animation-delay:.24s}
.is-menu-open .wp-block-navigation-item:nth-child(5){animation-delay:.30s}
.is-menu-open .wp-block-navigation-item:nth-child(6){animation-delay:.36s}
.is-menu-open .wp-block-navigation-item:nth-child(7){animation-delay:.42s}
}
/* ====================================================================
POLISH (SR_BASE_POLISH_v1) — Fokusringe, Selektion, Bild-Rendering
==================================================================== */
/* Einheitlicher, markenfarbener Fokusring auf allen interaktiven Elementen
(Tastatur-Navigation sichtbar & premium — WCAG 2.4.7). */
a:focus-visible,button:focus-visible,summary:focus-visible,
input:focus-visible,textarea:focus-visible,select:focus-visible,
.wp-block-button__link:focus-visible,[tabindex]:focus-visible{
outline:3px solid var(--sr-accent);outline-offset:3px;border-radius:6px}
/* Markierter Text im Markenblau */
::selection{background:color-mix(in srgb,var(--sr-accent) 82%,#000);color:#fff}
/* Bilder nie verzerrt / scharf skaliert */
img{image-rendering:auto}
/* Reduzierte Bewegung: alle Deko-Loops global anhalten (Sicherheitsnetz) */
@media (prefers-reduced-motion:reduce){
.sr-aurora::before,.sr-aurora::after,.sr-hero .wp-block-cover__image-background,
.sr-scrollcue::after,.sr-net-pin::after,.sr-video-play::after{animation:none!important}
}