/* assets/site.css — NUR Basis. Sektionsregeln liegen in assets/sections/NN-.css */ /* --------------------------------------------------------------------------- 1.1 Tokens (DESIGN-SPEC §1.1, wörtlich) --------------------------------------------------------------------------- */ :root{ --rad-glow-k:1; --rad-glow-r:7px; --rad-glow-b:15px; --rad-intro-offset:1250ms; --rad-card-on-dark:color-mix(in srgb,var(--vn-color-surface-raised-2) 88%,transparent); --rad-card-top:color-mix(in srgb,var(--vn-color-accent) 22%,var(--vn-color-surface-raised)); --rad-card-bottom:var(--vn-color-surface-darker); --rad-card-shadow:0 0 0 0 transparent; /* 30.09.2026 (Kundenwunsch): keine Schlagschatten an Karten */ --rad-tpx:calc(min(1vw,19.2px) / 19.2); --rad-dpx:calc(min(100vw,1440px) / 1440); --rad-head-gap:max(48px,calc(132 * var(--rad-tpx))); --rad-header-h:max(112px,calc(190 * var(--rad-tpx))); --rad-header-h-scrolled:88px; /* 28.09.2026 (Kundenwunsch): EINE Überschriften-Skala für die ganze Website — vorher 7 Größen für Seitentitel, 5 für H2 und 11 für H3. Werte @1440: H1 64 · H2 52 · H2 klein 32 (Zwischentitel im Fließtext, Karten-, Nachbar- köpfe) · H3 24 · H3 klein 19 (Karten- und Schritttitel). H1/H2 im Regular-Schnitt, H3 im Medium. */ --rad-fs-h1:clamp(2.25rem,calc(64 * var(--rad-dpx)),4rem); --rad-fs-h2:clamp(1.875rem,calc(52 * var(--rad-dpx)),3.25rem); --rad-fs-h2-klein:clamp(1.5rem,calc(32 * var(--rad-dpx)),2rem); --rad-fs-h3:clamp(1.25rem,calc(24 * var(--rad-dpx)),1.5rem); --rad-fs-h3-klein:clamp(1.0625rem,calc(19 * var(--rad-dpx)),1.1875rem); --rad-lh-h1:1.06; --rad-lh-h2:1.1; --rad-lh-h2-klein:1.18; --rad-lh-h3:1.28; --rad-ls-h1:-.025em; --rad-ls-h3:-.02em; --rad-w-h3:500; --rad-card-gap:16px; --rad-lh-tight:1.083; --rad-lh-head:1.12; --rad-lh-body:1.7; --rad-ls-hero:-.02em; --rad-ls-head:-.02em; --rad-ls-eyebrow:.16em; --rad-w-display:400; --rad-ease-wheel:cubic-bezier(.45,0,.15,1); --rad-reveal-y:18px; --rad-stagger:80ms; } /* --------------------------------------------------------------------------- 1.4 Reset und Grundtypografie --------------------------------------------------------------------------- */ *{box-sizing:border-box} html{scroll-padding-top:calc(var(--rad-header-h-scrolled) + 40px); /* +40 statt +24: das Wappen hängt ~30 px unter die gescrollte Leiste */color-scheme:light;-webkit-text-size-adjust:100%} /* Breitenschutz (19.09.2026, Kundenhinweis: die Mobilansicht sah beim Laden gelegentlich verschoben aus). Zwei Sicherungen, die unabhaengig voneinander greifen: 1. overflow-x:clip auf Wurzel UND Koerper — kein einzelnes Element kann die Seite jemals breiter machen als das Fenster. clip statt hidden, weil hidden position:sticky im Kopfbereich brechen wuerde. 2. Der Inhaltsfluss haelt immer die volle Fensterbreite, auch bevor Schriften, Bilder und Skripte fertig sind — sonst kann der Inhalt schmal bleiben, waehrend der fest stehende Kopf schon die ganze Breite einnimmt. */ html{overflow-x:clip} body{margin:0;overflow-x:clip;min-width:100%;background:var(--vn-color-bg);color:var(--vn-color-fg);font:var(--vn-text-base)/var(--rad-lh-body) var(--vn-font-body)} .wp-site-blocks,.rad-document{min-width:100%;box-sizing:border-box} body,button,input,select,textarea{font-family:var(--vn-font-body)} a{color:inherit;text-underline-offset:6px} img{max-width:100%;height:auto;display:block} figure,p,h1,h2,h3,h4,ul,ol,dl,dd{margin:0} ul,ol{padding:0;list-style:none} /* Überschriften: Syne 400 (Regular wie auf das-bike.at), h1 als Versalien-Hero */ h1,h2,h3,h4{font-family:var(--vn-font-display);font-weight:var(--rad-w-display);line-height:var(--rad-lh-head);letter-spacing:var(--rad-ls-head);text-wrap:balance} h1{font-size:var(--vn-text-hero);line-height:var(--rad-lh-tight);letter-spacing:var(--rad-ls-hero);text-transform:uppercase} h2{font-size:var(--rad-fs-h2);line-height:var(--rad-lh-h2);letter-spacing:var(--rad-ls-h1)} h3{font-size:var(--rad-fs-h3);line-height:var(--rad-lh-h3);font-weight:var(--rad-w-h3);letter-spacing:var(--rad-ls-h3)} h4{font-size:var(--vn-text-label);font-weight:600} /* Shell: WP-Core-Abstände neutralisieren, Container mit fluidem Gutter */ .wp-site-blocks{padding:0} .wp-site-blocks>*{margin-block-start:0!important} .rad-main{margin:0} .rad-main .wp-block-post-content>*{margin-block-start:0} .rad-shell{width:min(var(--vn-container-default),calc(100% - 2*var(--vn-gutter)));margin-inline:auto!important} .rad-section{padding-block:var(--vn-section-y)} /* Text-Utilities */ .rad-nowrap{white-space:nowrap} /* haelt Wortgruppen wie „E-Bikes“ zusammen: der Bindestrich waere sonst eine Trennstelle */ .rad-muted{color:var(--vn-color-muted)} .rad-small{font-size:var(--vn-text-sm)} .rad-eyebrow{font:600 var(--vn-text-xs)/1.4 var(--vn-font-body);letter-spacing:var(--rad-ls-eyebrow);text-transform:uppercase;color:var(--vn-color-accent-text-small)} .rad-lead{font-size:1.0625rem;line-height:1.65;max-width:34em;color:var(--vn-color-muted)} .rad-num{font-family:var(--vn-font-display);font-weight:400;font-variant-numeric:tabular-nums} /* Template-Zweizeiler links, runde Pfeil-Buttons rechts auf Höhe der 2. Zeile */ .rad-head{display:flex;align-items:end;justify-content:space-between;gap:32px;margin-bottom:var(--rad-head-gap)} .rad-head__nav{display:flex;gap:8px;flex-shrink:0;padding-bottom:.2em} /* Strichpfeil „→“ (Template: dünn, 36 px @1920) */ .rad-arrow{display:inline-block;width:27px;height:27px;flex-shrink:0;background:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 36 36' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 18h27M21 8l10 10-10 10' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 36 36' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 18h27M21 8l10 10-10 10' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") center/contain no-repeat; transition:transform var(--vn-d-snap) var(--vn-ease-out)} .rad-arrow--left{transform:scaleX(-1)} .rad-arrow--down{transform:rotate(90deg)} /* Runder Pfeil-Button (Template: schwarzer Kreis 34 px @1920 → 40 px für Touch-Ziel) */ .rad-circle-btn{width:40px;height:40px;border-radius:50%;border:0;padding:0;background:var(--vn-color-fg);color:var(--vn-color-bg);display:grid;place-items:center;cursor:pointer;transition:background var(--vn-d-snap),color var(--vn-d-snap),transform var(--vn-d-snap)} .rad-circle-btn .rad-arrow{width:18px;height:18px} /* 01.10.2026: Hover nur mit echter Maus. iOS wertet sonst den ersten Tipp auf Knöpfen mit Hover-Animation als Hover und löst keinen Klick aus (nachgewiesen am „Jetzt anrufen“-Knopf der Standortkarte: touchstart/touchend ja, click nein). */ @media(hover:hover){.rad-circle-btn:hover{background:var(--vn-color-accent);color:var(--vn-color-ink)}} .rad-circle-btn:active{transform:scale(.94)} .rad-circle-btn[disabled]{opacity:.35;cursor:default;transform:none;background:var(--vn-color-fg);color:var(--vn-color-bg)} .rad-circle-btn[aria-pressed=true]{background:var(--vn-color-accent);color:var(--vn-color-ink)} /* Primär-CTA (Pill, Gold auf Ink) · Sekundär (Hairline) · Textlink */ .rad-button,.rad-site .wp-block-button__link{display:inline-flex;align-items:center;justify-content:center;gap:16px;min-height:52px;padding:14px 22px 14px 26px;border-radius:var(--vn-radius-full);background:var(--vn-color-accent);color:var(--vn-color-ink);font:600 var(--vn-text-sm)/1.3 var(--vn-font-body);text-decoration:none;border:1px solid transparent;cursor:pointer;box-shadow:none;transition:background var(--vn-d-snap)} @media(hover:hover){.rad-button:hover,.rad-site .wp-block-button__link:hover{background:var(--vn-color-accent-on-dark)}} .rad-button .rad-arrow{width:22px;height:22px} @media(hover:hover){.rad-button:hover .rad-arrow{transform:translateX(4px)}} /* Kreisknopf (23.09.2026, Kundenvorlage „Get Started"): Pille mit dunklem Kreis rechts, darin ein Pfeil nach schräg oben. Beim Hovern/Fokus wandert der Kreis nach links, der Pfeil dreht sich nach rechts und der Text rückt nach rechts nach — die Gesamtbreite bleibt gleich (Innenabstände tauschen nur die Seiten). --k-h steuert die Höhe, alles andere folgt. */ .rad-kreisknopf{--k-h:56px;--k-kreis:calc(var(--k-h) - 12px);--k-dauer:520ms;position:relative;display:inline-flex;align-items:center;height:var(--k-h); padding:0 calc(var(--k-kreis) + 24px) 0 26px;border-radius:var(--vn-radius-full);background:var(--vn-color-accent);color:var(--vn-color-ink); font:600 var(--vn-text-sm)/1 var(--vn-font-body);white-space:nowrap;text-decoration:none; transition:padding var(--k-dauer) var(--vn-ease-in-out),background var(--vn-d-snap)} .rad-kreisknopf__kreis{position:absolute;top:6px;left:calc(100% - var(--k-kreis) - 6px);width:var(--k-kreis);height:var(--k-kreis);border-radius:50%; display:grid;place-items:center;background:var(--vn-color-surface-dark);color:var(--vn-color-on-dark);transition:left var(--k-dauer) var(--vn-ease-in-out)} .rad-kreisknopf__kreis svg{width:44%;height:44%;transform:rotate(-45deg);transition:transform var(--k-dauer) var(--vn-ease-in-out)} .rad-kreisknopf:focus-visible{background:var(--vn-color-accent-on-dark);padding:0 26px 0 calc(var(--k-kreis) + 24px)} .rad-kreisknopf:focus-visible .rad-kreisknopf__kreis{left:6px} .rad-kreisknopf:focus-visible .rad-kreisknopf__kreis svg{transform:none} @media(hover:hover){ .rad-kreisknopf:hover{background:var(--vn-color-accent-on-dark);padding:0 26px 0 calc(var(--k-kreis) + 24px)} .rad-kreisknopf:hover .rad-kreisknopf__kreis{left:6px} .rad-kreisknopf:hover .rad-kreisknopf__kreis svg{transform:none} } .rad-kreisknopf:focus-visible{outline:2px solid var(--vn-color-accent-on-dark);outline-offset:3px} @media(prefers-reduced-motion:reduce){.rad-kreisknopf,.rad-kreisknopf__kreis,.rad-kreisknopf__kreis svg{transition:none}} .rad-button--ghost{background:transparent;color:inherit;border-color:var(--vn-color-line)} @media(hover:hover){.rad-button--ghost:hover{background:color-mix(in srgb,currentColor 8%,transparent);border-color:currentColor}} .rad-text-link{display:inline-flex;align-items:center;gap:14px;min-height:44px;text-decoration:none;font:600 var(--vn-text-sm)/1.4 var(--vn-font-body)} .rad-text-link .rad-arrow{width:22px;height:22px} @media(hover:hover){.rad-text-link:hover .rad-arrow{transform:translateX(6px)}} /* --------------------------------------------------------------------------- 1.10 Farbschein beim Hover (Kundenwunsch 19.09.2026) — EINE Hover-Sprache für Menüpunkte, Karten-Titel, Textlinks, Footer-Links. Bis dahin wanderte ein Farbband durch die Glyphen; das ist ersetzt durch einen sehr weichen Schein in den Logofarben, der die Schrift von überall her umgibt. .rad-shine Textelement: die Schrift behält ihre Farbe, drum herum liegen mehrere drop-shadow-Lagen in den Logofarben — alle mit Versatz 0, es gibt also keinen Einfallswinkel. Die Deckkraft läuft über die registrierte Property --rad-shine-o, dadurch blendet der Schein weich ein und aus statt zu springen. .rad-shine-host Element, dessen Hover/Fokus alle .rad-shine darin auslöst (Karte, Textlink, Menüpunkt-Container). .rad-shine-frame Fläche (Menükarten): derselbe Schein als box-shadow um die Kachel, ebenfalls ohne Versatz. Kein JavaScript nötig — :hover und :focus-within tragen den Zustand, mit und ohne Skript identisch. --------------------------------------------------------------------------- */ @property --rad-shine-o{syntax:"";inherits:true;initial-value:0} /* 19.09.2026 (Kundenwunsch): Der rotierende Farbschatten an der Schrift ist wieder raus — vier gestaffelte drop-shadow-Lagen sind ein Filter, der die Textebene in JEDEM Bild neu zeichnet, und das war auf Seiten mit fuenfzig Trefferflaechen spuerbar. Geblieben ist ein schlichtes Aufleuchten: die Schrift nimmt die Akzentfarbe an und bekommt EINEN weichen Schein als text-shadow. Kein Filter, keine Animation, nur zwei Eigenschaften. */ .rad-shine{--rad-shine-o:0; transition:color 260ms var(--vn-ease-out),text-shadow 260ms var(--vn-ease-out)} :is(.rad-shine-host:focus-visible,.rad-shine-host:focus-within) .rad-shine, .rad-shine:focus-visible{color:var(--vn-color-accent-text); text-shadow:0 0 14px color-mix(in srgb,var(--vn-color-accent-text) 42%,transparent)} /* 28.09.2026: Hover nur mit echter Maus — Touch-Geräte halten :hover nach dem Tippen fest, der Schein blieb dann stehen */ @media(hover:hover){.rad-shine-host:hover .rad-shine,.rad-shine:hover{color:var(--vn-color-accent-text); text-shadow:0 0 14px color-mix(in srgb,var(--vn-color-accent-text) 42%,transparent)}} @media(prefers-reduced-motion:reduce){.rad-shine{transition:none}} .rad-shine-frame{--rad-shine-o:0;--rad-shine-k:1;--rad-shine-r:6px;--rad-shine-b:14px; box-shadow: calc(cos(var(--rad-glow-w)) * var(--rad-shine-r)) calc(sin(var(--rad-glow-w)) * var(--rad-shine-r)) var(--rad-shine-b) 0 color-mix(in srgb,#E5007E calc(var(--rad-shine-o) * var(--rad-shine-k) * 46%),transparent), calc(cos(var(--rad-glow-w) + 90deg) * var(--rad-shine-r)) calc(sin(var(--rad-glow-w) + 90deg) * var(--rad-shine-r)) var(--rad-shine-b) 0 color-mix(in srgb,#A24CD6 calc(var(--rad-shine-o) * var(--rad-shine-k) * 40%),transparent), calc(cos(var(--rad-glow-w) + 180deg) * var(--rad-shine-r)) calc(sin(var(--rad-glow-w) + 180deg) * var(--rad-shine-r)) var(--rad-shine-b) 0 color-mix(in srgb,#4F8DF0 calc(var(--rad-shine-o) * var(--rad-shine-k) * 34%),transparent), calc(cos(var(--rad-glow-w) + 270deg) * var(--rad-shine-r)) calc(sin(var(--rad-glow-w) + 270deg) * var(--rad-shine-r)) var(--rad-shine-b) 0 color-mix(in srgb,#2BD0C0 calc(var(--rad-shine-o) * var(--rad-shine-k) * 28%),transparent); animation:rad-glow-dreh 22s linear infinite;animation-play-state:paused; transition:--rad-shine-o 260ms var(--vn-ease-out)} /* 19.09.2026: zuegiger und ohne weichen Anlauf — der Schein soll mit dem Hover da sein */ .rad-shine-frame:is(:focus-visible,:focus-within){--rad-shine-o:1;animation-play-state:running} @media(hover:hover){.rad-shine-frame:hover{--rad-shine-o:1;animation-play-state:running}} @media(prefers-reduced-motion:reduce){.rad-shine,.rad-shine-frame{transition:none;animation:none}} .rad-hairline{border:0;height:1px;background:var(--vn-color-line);margin:0} .rad-cur{font-family:var(--vn-font-body);font-weight:600;font-size:.72em;margin-left:.08em} /* Währungszeichen in der Textschrift — das € der Displayschrift ist verschnörkelt */ /* Nummernkreis (Bild-4-Vokabular): 28 px, Ziffer 11 px */ .rad-dot{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--vn-color-fg);color:var(--vn-color-bg);font:600 var(--vn-text-2xs)/1 var(--vn-font-body);flex-shrink:0} .rad-dot--gold{background:var(--vn-color-accent);color:var(--vn-color-ink)} /* Fokus, Selektion, Skip-Link, visuell versteckt */ :focus-visible{outline:2px solid var(--vn-color-accent);outline-offset:4px} .rad-dark :focus-visible,.rad-deep :focus-visible{outline-color:var(--vn-color-accent-on-dark)} ::selection{background:var(--vn-color-accent);color:var(--vn-color-ink)} .rad-skip{position:fixed;top:-100px;left:24px;z-index:1000;padding:14px 20px;background:var(--vn-color-paper);color:var(--vn-color-ink);border-radius:var(--vn-radius-sm)} .rad-skip:focus{top:12px} .rad-visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;padding:0;margin:-1px} /* --------------------------------------------------------------------------- 1.5 Surface-Klassen (jede Sektion trägt genau eine; setzen die Rollen-Tokens) --------------------------------------------------------------------------- */ .rad-light{background:var(--vn-color-paper);color:var(--vn-color-ink);--vn-color-bg:var(--vn-color-paper);--vn-color-fg:var(--vn-color-ink);--vn-color-muted:var(--vn-color-ink-muted);--vn-color-line:var(--vn-color-divider-light);--vn-color-accent-text:var(--vn-color-accent-strong);--vn-color-accent-text-small:var(--vn-color-accent-ink)} .rad-light-2{background:var(--vn-color-surface-light);color:var(--vn-color-ink);--vn-color-bg:var(--vn-color-surface-light);--vn-color-fg:var(--vn-color-ink);--vn-color-muted:var(--vn-color-ink-muted);--vn-color-line:var(--vn-color-divider-light);--vn-color-accent-text:var(--vn-color-accent-strong);--vn-color-accent-text-small:var(--vn-color-accent-ink)} /* Auf dunklen Flächen trägt derselbe Schein weiter — dort schwächer. */ .rad-dark,.rad-deep{--rad-glow-k:.6;--rad-glow-r:5px;--rad-glow-b:11px} /* auf dunkel traegt Farbe weiter: schmaler und schwaecher */ .rad-dark{background:var(--vn-color-surface-dark);color:var(--vn-color-on-dark);--vn-color-bg:var(--vn-color-surface-dark);--vn-color-fg:var(--vn-color-on-dark);--vn-color-muted:var(--vn-color-on-dark-muted);--vn-color-line:var(--vn-color-divider-dark);--vn-color-accent-text:var(--vn-color-accent-on-dark);--vn-color-accent-text-small:var(--vn-color-accent-on-dark)} .rad-deep{background:var(--vn-color-surface-darker);color:var(--vn-color-on-dark);--vn-color-bg:var(--vn-color-surface-darker);--vn-color-fg:var(--vn-color-on-dark);--vn-color-muted:var(--vn-color-on-dark-muted);--vn-color-line:var(--vn-color-divider-dark);--vn-color-accent-text:var(--vn-color-accent-on-dark);--vn-color-accent-text-small:var(--vn-color-accent-on-dark)} /* 17.09.2026: Auf dunklen Flächen KEIN Kartenschatten. Ein 64-px-Weichschatten hat dort nur ~15 Helligkeitsstufen Spielraum, jede Stufe wird ~4 px breit und zeichnet sich als Kontur ab („Schatten mit Linien“). Die Karten heben sich über ihren Verlauf (Oberkante heller als der Grund) ab, das genügt. Auf hellen Flächen bleibt der Schatten. */ .rad-dark,.rad-deep{--rad-card-shadow:0 0 0 0 transparent} /* nicht "none": als Teil einer Schattenliste waere der ganze box-shadow ungueltig und auch der bunte Hover-Schein fiele aus. Unsichtbar ist es so oder so. */ /* --------------------------------------------------------------------------- 1.7 Breakpoints: site.css setzt nur Tokens; Sektions-CSS hat eigene Queries mit denselben Grenzen --------------------------------------------------------------------------- */ @media(max-width:1000px){:root{--vn-gutter:32px;--vn-section-y:80px;--rad-head-gap:56px;--rad-header-h:88px}} @media(max-width:650px){:root{--vn-gutter:20px;--vn-section-y:64px;--rad-head-gap:40px;--rad-header-h:80px;--rad-header-h-scrolled:72px}} /* --------------------------------------------------------------------------- 1.8 Scroll-Reveal (nur unter html.rad-js, gesetzt von 00-shell.js) und reduced-motion --------------------------------------------------------------------------- */ html.rad-js .rad-reveal{opacity:0;transform:translateY(var(--rad-reveal-y));transition:opacity var(--vn-d-slow) var(--vn-ease-out),transform var(--vn-d-slow) var(--vn-ease-out);transition-delay:calc(var(--i,0)*var(--rad-stagger))} html.rad-js .rad-reveal.is-inview{opacity:1;transform:none} /* 01.10.2026: In seitlichen Wischleisten nie verstecken — angeschnittene Kacheln erreichen die Einblendschwelle nicht und blieben leer (iOS-Prüfung) */ html.rad-js :is(.rad-lslider--karussell,.rad-bento__spur,.rad-pslider__spur,.rad-welt__spur,.rad-rchips__spur) .rad-reveal{opacity:1;transform:none} /* 01.10.2026: Zweimal schnell auf einen Knopf (z. B. Bewertungspfeil) zoomte iOS die ganze Seite heran. Auf Bedienelementen nur Tippen und Scrollen, Zwei-Finger-Zoom bleibt */ a,button,summary,label,select,input,textarea,[role=button]{touch-action:manipulation} /* Dezente Animationen (Kundenwunsch 17.09.2026): Überschriften in Reveal-Köpfen kommen aus leichter Unschärfe scharf, Karten/Kacheln/Kennzahlen laufen gestaffelt ein (--i je Element), Buttons heben beim Hover minimal. */ html.rad-js .rad-head.rad-reveal h2,html.rad-js .rad-reveal>h2{filter:blur(6px);transition:filter var(--vn-d-slower) var(--vn-ease-out) 60ms} html.rad-js .rad-head.rad-reveal.is-inview h2,html.rad-js .rad-reveal.is-inview>h2{filter:none} .rad-button,.rad-site .wp-block-button__link{transition:background var(--vn-d-snap),transform var(--vn-d-medium) var(--vn-ease-out)} @media(hover:hover){.rad-button:hover,.rad-site .wp-block-button__link:hover{transform:translateY(-1px)}} @media(prefers-reduced-motion:reduce){ :root{--vn-d-snap:0ms;--vn-d-medium:0ms;--vn-d-slow:0ms;--vn-d-slower:0ms;--rad-stagger:0ms;--rad-reveal-y:0px;--rad-intro-offset:0ms} html.rad-js .rad-reveal{opacity:1;transform:none;transition:none} html.rad-js .rad-head.rad-reveal h2,html.rad-js .rad-reveal>h2{filter:none} *,*::before,*::after{animation:none!important;transition-duration:0s!important;scroll-behavior:auto!important} } /* ---------- Bunter Hover-Schein: Registrierung, Drehung, gemeinsame Regeln ---------- */ @property --rad-glow-w{syntax:"";inherits:true;initial-value:0deg} @property --rad-glow-o{syntax:"";inherits:true;initial-value:0} @keyframes rad-glow-dreh{to{--rad-glow-w:360deg}} /* .rad-glow: alles, was den Schein tragen soll. Die Drehung steht still, solange nicht gehovert wird. */ .rad-glow, .rad-lslider--reihe .rad-lslider__link, .rad-worlds__tile, .rad-service__pack, .rad-hero__card{--rad-glow-o:0; /* Der Ausdruck MUSS hier stehen, nicht auf :root: eine abgeleitete Property wird dort ausgerechnet, wo sie deklariert ist — auf :root waere --rad-glow-o dauerhaft 0 und der Schein bliebe unsichtbar. */ --rad-glow-shadow: calc(cos(var(--rad-glow-w)) * var(--rad-glow-r)) calc(sin(var(--rad-glow-w)) * var(--rad-glow-r)) var(--rad-glow-b) -3px color-mix(in srgb,#E5007E calc(var(--rad-glow-o) * var(--rad-glow-k) * 36%),transparent), calc(cos(var(--rad-glow-w) + 90deg) * var(--rad-glow-r)) calc(sin(var(--rad-glow-w) + 90deg) * var(--rad-glow-r)) var(--rad-glow-b) -3px color-mix(in srgb,#A24CD6 calc(var(--rad-glow-o) * var(--rad-glow-k) * 34%),transparent), calc(cos(var(--rad-glow-w) + 180deg) * var(--rad-glow-r)) calc(sin(var(--rad-glow-w) + 180deg) * var(--rad-glow-r)) var(--rad-glow-b) -3px color-mix(in srgb,#2BD0C0 calc(var(--rad-glow-o) * var(--rad-glow-k) * 40%),transparent), calc(cos(var(--rad-glow-w) + 270deg) * var(--rad-glow-r)) calc(sin(var(--rad-glow-w) + 270deg) * var(--rad-glow-r)) var(--rad-glow-b) -3px color-mix(in srgb,#F2A03D calc(var(--rad-glow-o) * var(--rad-glow-k) * 40%),transparent); animation:rad-glow-dreh 22s linear infinite;animation-play-state:paused; /* Der Schein kommt und geht langsam und an beiden Enden weich (Kundenwunsch 19.09.2026): gleichmaessiger Lauf mit sanftem An- und Auslauf. Das Ausblenden dauert laenger als das Einblenden — der Grundzustand traegt die Aus-Zeit, die :hover-Regel die Ein-Zeit. Die box-shadow-Transition entfaellt: der Schatten aendert sich ausschliesslich ueber die Deckkraft-Property, eine zweite Interpolation waere nur Rechenaufwand. */ transition:--rad-glow-o 300ms cubic-bezier(.45,.05,.55,.95)} .rad-glow:is(:focus-visible),.rad-lslider--reihe .rad-lslider__link:is(:focus-visible),.rad-worlds__tile:is(:focus-visible),.rad-service__pack:is(:focus-visible){--rad-glow-o:1;animation-play-state:running; transition:--rad-glow-o 300ms cubic-bezier(.45,.05,.55,.95)} @media(hover:hover){.rad-glow:is(:hover,:focus-visible),.rad-lslider--reihe .rad-lslider__link:is(:hover,:focus-visible),.rad-worlds__tile:is(:hover,:focus-visible),.rad-service__pack:is(:hover,:focus-visible){--rad-glow-o:1;animation-play-state:running; transition:--rad-glow-o 300ms cubic-bezier(.45,.05,.55,.95)}} @media (prefers-reduced-motion:reduce){ .rad-glow,.rad-lslider--reihe .rad-lslider__link,.rad-worlds__tile,.rad-service__pack,.rad-hero__card{animation:none} }