/* assets/sections/00-shell.css — Header (fixiert, transparent über dem Hero), Menüpanel ≤1000, Footer. Besitzer: Shell-Agent.
   Nur Rollen-/CI-Tokens aus site.css, keine Hex-Werte. Bewegung: nur transform/opacity/height/background-color, reduced-motion über die Basis-Tokens. */

/* ---------------------------------------------------------------------------
   Header — Wappen mittig (groß in Ruhe, klein gescrollt), Ausklappmenüs, Telefon-Pill
   17.09.2026: Ruhe-Leiste höher (site.css --rad-header-h) und Wappen 150 px mit warmem Schein dahinter, damit es auf dem
   dunklen Hero sichtbar ist; gescrollt schrumpft es auf 50 px (Kundenwunsch „ca. 50 % kleiner“) in einer 88-px-Leiste,
   deren Fläche nach unten transparent ausläuft. „Leistungen“ und „Bikes“ klappen beim Hover aus (Vorbild bwhaustechnik.at).
   --------------------------------------------------------------------------- */
.rad-header{
  position:fixed;inset:0 0 auto;z-index:50;height:var(--rad-header-h);
  --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-logo-h:max(112px,calc(150 * var(--rad-dpx)));   /* 150 @≥1440 */
  --rad-logo-h-scrolled:72px;   /* 28.09.2026 (Kundenwunsch): vorher 50, Wappen wirkte neben der Menüschrift zu klein */
  color:var(--vn-color-fg);
  background:linear-gradient(180deg,color-mix(in srgb,var(--vn-color-surface-darker) 62%,transparent) 0%,color-mix(in srgb,var(--vn-color-surface-darker) 26%,transparent) 60%,transparent 100%);
  transition:height var(--vn-d-medium) var(--vn-ease-in-out)
}
/* Fläche im gescrollten Zustand: Verlauf UND Blur laufen über dieselbe Maske nach unten aus (auf dem Header selbst würde die
   Maske das hängende Wappen mit abschneiden). Kein Schatten — der widerspräche dem Auslaufen. */
.rad-header::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;pointer-events:none;
  background:linear-gradient(180deg,color-mix(in srgb,var(--rad-card-top) 96%,transparent) 0%,color-mix(in srgb,var(--rad-card-bottom) 92%,transparent) 48%,color-mix(in srgb,var(--rad-card-bottom) 55%,transparent) 76%,transparent 100%);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  -webkit-mask-image:linear-gradient(180deg,#000 50%,transparent 100%);mask-image:linear-gradient(180deg,#000 50%,transparent 100%);
  transition:opacity var(--vn-d-medium) var(--vn-ease-in-out)}
.rad-header__inner{display:flex;align-items:center;gap:28px;height:100%}   /* kein position:relative — Wappen und Mega-Panels beziehen sich auf den Header (position:fixed) */
.rad-header.is-scrolled::before,
.rad-site.rad-menu-open .rad-header::before{opacity:1}
.rad-header.is-scrolled{height:var(--rad-header-h-scrolled)}
.rad-site:not(.home):not(.page-template-preview):not(.page-template-landing) .rad-header::before{opacity:1}
.rad-site:not(.home):not(.page-template-preview):not(.page-template-landing) .rad-document{padding-top:calc(var(--rad-header-h) + 72px);padding-bottom:var(--vn-section-y)}
.admin-bar .rad-header{top:32px}
@media(max-width:782px){.admin-bar .rad-header{top:46px}}

/* Intro: Overlay über allem, Wappen mittig; CSS-Zeitplan (auch ohne JS): 0–700 ms Erscheinen, ab 1300 ms Ausblenden nach oben,
   1750 ms Wappen im Header da. Mit JS: 00-shell.js hebt die CSS-Ausblendung auf und fliegt das Wappen exakt auf die Header-Position. */
.rad-intro{position:fixed;inset:0;z-index:60;display:grid;place-items:center;background:var(--vn-color-surface-darker);
  animation:rad-intro-out 420ms var(--vn-ease-in-out) 900ms both}
.rad-intro::before{content:"";position:absolute;left:50%;top:50%;width:min(80vw,620px);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--vn-color-accent) 20%,transparent),transparent 70%);animation:rad-intro-glow 1000ms var(--vn-ease-out) both}
.rad-intro__crest{position:relative;height:min(40vh,250px);width:auto;transform-origin:50% 50%;
  animation:rad-intro-crest-in 520ms var(--vn-ease-out) both,rad-intro-crest-out 420ms var(--vn-ease-in-out) 900ms both}
html.rad-js .rad-intro{animation:rad-intro-out 420ms var(--vn-ease-in-out) 5s both}   /* Notausgang, falls das Skript nie aufräumt (01.10.2026) */
html.rad-js .rad-intro__crest{animation:rad-intro-crest-in 520ms var(--vn-ease-out) both}
html.rad-js .rad-intro.is-flying{background:transparent;transition:background-color 550ms var(--vn-ease-in-out) 120ms;pointer-events:none}
/* Rueckkehr (Kundenwunsch 19.09.2026): das Wappen erscheint nicht in der Mitte, sondern hebt sich von der Stelle,
   an der es im Header sitzt, heraus und kehrt dorthin zurueck. Der dunkle Vorhang bleibt dabei (Kundenwunsch
   19.09.2026, Nachtrag) — er lueftet sich erst auf dem Rueckweg, genau wie beim ersten Aufruf. Nur das Einblenden
   in der Mitte faellt weg, sonst blitzte das Wappen dort kurz auf, bevor es losfliegt. */
html.rad-intro-zurueck .rad-intro{animation:rad-intro-out 420ms var(--vn-ease-in-out) 5s both}
html.rad-intro-zurueck .rad-intro__crest{animation:none;opacity:0}
html.rad-intro-zurueck .rad-intro__crest.is-bereit{opacity:1}
html.rad-js .rad-intro.is-flying::before{opacity:0;animation:none;transition:opacity 500ms var(--vn-ease-in-out)}   /* Schein blendet mit dem Flug aus statt beim Aufräumen zu springen */
@keyframes rad-intro-out{to{opacity:0;visibility:hidden}}
@keyframes rad-intro-glow{from{opacity:0;transform:translate(-50%,-50%) scale(.6)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes rad-intro-crest-in{from{opacity:0;transform:scale(.82) translateY(14px)}to{opacity:1;transform:none}}
@keyframes rad-intro-crest-out{to{opacity:0;transform:scale(.55) translateY(-45vh)}}
/* Wappen im Header erscheint erst, wenn das Intro landet (JS setzt es zusätzlich exakt beim Flugende) */
.rad-header__brand{animation:rad-brand-in 1ms linear var(--rad-intro-offset) both}
/* Ohne Intro (Produktseiten) gibt es nichts, worauf das Wappen warten muesste. */
.rad-header--sofort .rad-header__brand{animation:none}
@keyframes rad-brand-in{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.rad-intro{display:none}.rad-header__brand{animation:none}}

/* Wappen: mittig; in Ruhe 150 px, vertikal mittig in der Leiste (1920: 190/150 → 20 px; 1440: 142/150 → −4 → min 4 px, ragt 12 px
   unter die Leiste); dahinter ein warmer Schein (Pseudo-Element, hinter dem Bild, verschwindet gescrollt).
   Gescrollt 50 px, mittig in der 88er-Leiste. */
.rad-header__brand{position:absolute;left:50%;top:max(4px,calc((var(--rad-header-h) - var(--rad-logo-h)) / 2));transform:translateX(-50%);display:block;height:var(--rad-logo-h);
  filter:drop-shadow(0 10px 22px color-mix(in srgb,var(--vn-color-surface-darker) 55%,transparent));
  transition:height var(--vn-d-medium) var(--vn-ease-in-out),top var(--vn-d-medium) var(--vn-ease-in-out)}
.rad-header__brand::before{content:"";position:absolute;left:50%;top:50%;width:260%;height:150%;transform:translate(-50%,-50%);z-index:-1;pointer-events:none;border-radius:50%;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--vn-color-accent) 22%,transparent),color-mix(in srgb,var(--vn-color-accent) 6%,transparent) 60%,transparent);
  transition:opacity var(--vn-d-medium) var(--vn-ease-in-out)}
.rad-header__brand picture{display:block;height:100%}
.rad-header__crest{position:relative;display:block;height:100%;width:auto}
.rad-header.is-scrolled .rad-header__brand{height:var(--rad-logo-h-scrolled);top:calc((var(--rad-header-h-scrolled) - var(--rad-logo-h-scrolled)) / 2)}
.rad-header.is-scrolled .rad-header__brand::before{opacity:0}

/* Navigation: Versalien 13 px links; „Leistungen“, „Service“ und „Bikes“ mit Chevron und Mega-Panel in voller Breite (17.09.2026).
   Nav und Eintrag füllen die Headerhöhe, damit das Panel (top:100 % des Headers) den Eintrag ohne Lücke berührt — die Maus kann
   vom Link senkrecht ins Panel fahren, :hover bleibt erhalten (Panel ist Nachfahre). */
.rad-navigation{display:flex;align-items:center;gap:max(12px,calc(20 * var(--rad-tpx)));height:100%}
.rad-nav__item{display:flex;align-items:center;height:100%}
.rad-nav__link{position:relative;display:inline-flex;align-items:center;min-height:44px;font:500 .9rem/1.2 var(--vn-font-body);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;white-space:nowrap;color:var(--vn-color-on-dark);opacity:.9;
  transition:opacity var(--vn-d-snap),color 260ms var(--vn-ease-out),text-shadow 260ms var(--vn-ease-out)}
/* transition ist eine Kurzschrift: ohne color und text-shadow faellt hier das Aufleuchten aus site.css 1.10 weg. */
.rad-nav__link:focus-visible,.rad-nav__item--menu.is-open .rad-nav__link{opacity:1;
  transition:opacity var(--vn-d-snap),color 260ms var(--vn-ease-out),text-shadow 260ms var(--vn-ease-out)}
@media(hover:hover){.rad-nav__link:hover{opacity:1;
  transition:opacity var(--vn-d-snap),color 260ms var(--vn-ease-out),text-shadow 260ms var(--vn-ease-out)}}
.rad-nav__item--menu.is-open .rad-nav__link{color:var(--vn-color-accent-text);text-shadow:0 0 14px color-mix(in srgb,var(--vn-color-accent-text) 42%,transparent)}
.rad-nav__toggle{display:inline-grid;place-items:center;width:26px;height:44px;margin-left:-2px;border:0;padding:0;background:none;color:inherit;cursor:pointer;opacity:.7;transition:opacity var(--vn-d-snap)}
.rad-nav__toggle svg{width:12px;height:12px;transition:transform var(--vn-d-medium) var(--vn-ease-out)}
.rad-nav__item--menu.is-open .rad-nav__toggle{opacity:1}
.rad-nav__item--menu.is-open .rad-nav__toggle svg{transform:rotate(45deg)}   /* 28.09.2026 (Kundenwunsch): Plus statt Pfeil, offen wird es zum Kreuz */
/* Mega-Panel: volle Breite, hängt unter dem Header, unten gerundet; schließt mit 120 ms Verzögerung.
   28.09.2026 (Kundenwunsch): schlichtes Schwarz ohne Verlauf — dieselbe Fläche wie die Insel der Leiste, deshalb auch kein Blur mehr. */
.rad-nav__panel{position:absolute;top:0;left:0;right:0;z-index:5;padding:var(--rad-header-h) 0 0;
  background:var(--vn-color-surface-darker);border-radius:0 0 28px 28px;box-shadow:none;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity var(--vn-d-medium) var(--vn-ease-out) 120ms,transform var(--vn-d-medium) var(--vn-ease-out) 120ms,visibility 0s linear calc(var(--vn-d-medium) + 120ms)}
.rad-nav__item--menu.is-open .rad-nav__panel{opacity:1;visibility:visible;transform:none;transition-delay:0s,0s,0s}
/* 17.09.2026: Megamenü nur per Klick (kein Hover). Das Panel beginnt am oberen Rand (top:0, oben so viel Innenabstand wie die
   Leiste hoch ist) und ist damit EINE Fläche mit der Leiste — nichts blendet in zwei Stufen ein, kein Spalt. Links, Wappen und
   Telefon liegen per z-index über dem Panel. */
.rad-header.is-scrolled .rad-nav__panel{padding-top:var(--rad-header-h-scrolled)}
.rad-header.has-panel{background:none}
.rad-nav__link,.rad-nav__toggle{position:relative;z-index:6}
.rad-header__phone{position:relative;z-index:7}
.rad-header__brand{z-index:8}
.rad-nav__mega{display:grid;grid-template-columns:minmax(220px,.9fr) 3fr;gap:40px;padding:34px 0 38px;align-items:start}
.rad-nav__intro{display:flex;flex-direction:column;gap:10px;padding-right:8px}
.rad-nav__intro-title{font:500 1.375rem/1.25 var(--vn-font-display);letter-spacing:-.02em;color:var(--vn-color-on-dark)}
.rad-nav__intro-text{font:400 var(--vn-text-sm)/1.6 var(--vn-font-body);color:var(--vn-color-on-dark-muted);max-width:24em}
.rad-nav__intro .rad-text-link{margin-top:8px;color:var(--vn-color-on-dark)}
.rad-nav__cards{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.rad-nav__item--bikes .rad-nav__cards{grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.rad-nav__item--zubehoer .rad-nav__cards{grid-template-columns:repeat(4,minmax(0,1fr))}
.rad-nav__card{position:relative;display:flex;flex-direction:column;gap:12px;padding:10px;border-radius:18px;color:var(--vn-color-on-dark);text-decoration:none;transition:background var(--vn-d-snap)}
.rad-nav__card:focus-visible{background:color-mix(in srgb,var(--vn-color-paper) 7%,transparent)}
@media(hover:hover){.rad-nav__card:hover{background:color-mix(in srgb,var(--vn-color-paper) 7%,transparent)}}
.rad-nav__card-media{display:block;overflow:hidden;border-radius:12px;aspect-ratio:3/2}
.rad-nav__card-img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1200ms var(--vn-ease-out)}
@media(hover:hover){.rad-nav__card:hover .rad-nav__card-img{transform:scale(1.06)}}
/* 19.09.2026: Die Bikes-Karten zeigen freigestellte Produktfotos — die duerfen nicht beschnitten werden und
   brauchen die weisse Flaeche, auf der sie fotografiert wurden. */
/* 22.09.2026 (Kundenwunsch): Die Bikes-Karten im Menue tragen jetzt dieselben dunklen Studiobilder wie die
   Kategorie-Kacheln der Startseite (assets/images/welten/karte-<slug>). Der weisse Kasten mit Innenabstand
   stammte von den freigestellten Shopbildern und faellt damit weg — das Bild fuellt die Kachel randlos.
   Der 3:2-Ausschnitt der Kachel schneidet oben und unten je 6 % des 4:3-Bildes weg; das Rad steht mit Rand
   in der Mitte und bleibt dabei vollstaendig sichtbar. */
.rad-nav__card--produkt .rad-nav__card-media{background:var(--vn-color-surface-darker)}
.rad-nav__card-body{display:flex;flex-direction:column;gap:4px;padding:0 4px 4px}
.rad-nav__card-title{font:500 1rem/1.3 var(--vn-font-display);letter-spacing:-.02em;text-transform:none}
.rad-nav__item--bikes .rad-nav__card-title{font-size:.9375rem}
.rad-nav__card-text{font:400 .8125rem/1.5 var(--vn-font-body);color:var(--vn-color-on-dark-muted)}

/* Rechts: Telefon als Pill (Gold-Hairline, füllt sich beim Hover), Burger nur ≤1000 */
.rad-header__phone{margin-left:auto;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:44px;padding:0 18px 0 14px;
  border-radius:var(--vn-radius-full);border:1px solid color-mix(in srgb,var(--vn-color-accent) 55%,transparent);background:color-mix(in srgb,var(--vn-color-surface-darker) 28%,transparent);
  color:var(--vn-color-on-dark);text-decoration:none;font:600 var(--vn-text-sm)/1 var(--vn-font-body);white-space:nowrap;
  transition:background var(--vn-d-snap),color var(--vn-d-snap),border-color var(--vn-d-snap)}
.rad-header__phone svg{width:18px;height:18px;flex-shrink:0}
.rad-header__phone:is(:focus-visible){background:var(--vn-color-accent);border-color:var(--vn-color-accent);color:var(--vn-color-ink)}
@media(hover:hover){.rad-header__phone:is(:hover,:focus-visible){background:var(--vn-color-accent);border-color:var(--vn-color-accent);color:var(--vn-color-ink)}}
.rad-menu-toggle{display:none;width:44px;height:44px;padding:10px;border:0;border-radius:var(--vn-radius-sm);background:transparent;color:inherit;cursor:pointer}
/* Burger → Kreuz (23.09.2026): drei Striche, die beim Öffnen zum X zusammenlaufen. */
.rad-menu-toggle__bars{position:relative;display:block;width:22px;height:14px}
.rad-menu-toggle__bars i{position:absolute;left:0;right:0;height:1.5px;border-radius:2px;background:currentColor;
  transition:transform var(--vn-d-medium) var(--vn-ease-out),opacity var(--vn-d-snap) var(--vn-ease-out)}
.rad-menu-toggle__bars i:nth-child(1){top:0}
.rad-menu-toggle__bars i:nth-child(2){top:calc(50% - .75px)}
.rad-menu-toggle__bars i:nth-child(3){bottom:0}
.rad-menu-toggle[aria-expanded=true] .rad-menu-toggle__bars i:nth-child(1){transform:translateY(6.25px) rotate(45deg)}
.rad-menu-toggle[aria-expanded=true] .rad-menu-toggle__bars i:nth-child(2){opacity:0}
.rad-menu-toggle[aria-expanded=true] .rad-menu-toggle__bars i:nth-child(3){transform:translateY(-6.25px) rotate(-45deg)}
/* Abschlussblock gibt es nur im mobilen Menü */
.rad-nav__extra{display:none}

/* ≥1001 (17.09.2026): Leiste als Raster um das Wappen — links Leistungen · Bikes · Service, rechts Über uns · Kontakt, Telefon außen.
   Die Nav selbst löst sich auf (display:contents), ihre zwei Gruppen werden Rasterzellen; die Mittelspalte hält den Platz des Wappens frei. */
@media(min-width:1001px){
  .rad-header__inner{display:grid;grid-template-columns:minmax(0,1fr) calc(var(--rad-logo-h) * .78 + 64px) minmax(0,1fr);align-items:center;gap:0;
    transition:grid-template-columns var(--vn-d-medium) var(--vn-ease-in-out)}
  .rad-header.is-scrolled .rad-header__inner{grid-template-columns:minmax(0,1fr) calc(var(--rad-logo-h-scrolled) * .78 + 64px) minmax(0,1fr)}
  .rad-navigation{display:contents}
  .rad-nav__group{display:flex;align-items:center;gap:max(12px,calc(20 * var(--rad-tpx)));height:100%;min-width:0}
  .rad-nav__group--links{grid-column:1;grid-row:1;justify-self:end}   /* beide Gruppen schmiegen sich spiegelgleich ans Wappen */
  .rad-nav__group--rechts{grid-column:3;grid-row:1;justify-self:start}
  .rad-header__phone{grid-column:3;grid-row:1;justify-self:end;margin-left:0}
  .rad-menu-toggle{display:none}
}

/* 28.09.2026 (Kundenwunsch, Test „A mit Goldpille“ freigegeben): Die Leiste ist ≥1001 eine dunkle Insel, die vom oberen
   Rand herabhängt und unter dem Wappen als Anhänger ausläuft (Vorbild „Adaptive Notch Navigation“). 00-shell.js zeichnet
   die Form als SVG aus den gemessenen Kästen von Menügruppen und Wappen; erst wenn sie steht (.hat-insel),
   verschwinden Edgars Verlauf und die gescrollte Fläche — ohne Skript bleibt alles wie vorher. Eine gold getönte Pille
   gleitet zum Menüpunkt unter der Maus bzw. im Fokus und ruht auf dem Punkt der aktuellen Seite oder dem offenen Menü;
   sie ersetzt in der Leiste das Aufleuchten (rad-shine), damit es nur EINE Hover-Geste gibt.
   Nachtrag 28.09.2026 (Kundenwunsch): kein Telefon in der Desktop-Leiste (am Rechner ruft niemand per Klick an; die Nummer
   steht im Footer, auf der Kontaktseite und im mobilen Menü); der Anhänger folgt dem Umriss des Wappens. */
@property --rad-insel-h{syntax:"<length>";inherits:true;initial-value:68px}
/* Nachtrag 28.09.2026 (Kundenwunsch): mobil keine Leiste (dort steht kein Menü) — nur das Wappen hängt mit seinem Umriss vom
   oberen Rand, der Menüknopf hat einen eigenen Reiter; das Telefon-Symbol entfällt (die Nummer steht im geöffneten Menü),
   das Wappen ist größer. */
.rad-header{--rad-insel-h:68px;transition:height var(--vn-d-medium) var(--vn-ease-in-out),--rad-insel-h var(--vn-d-medium) var(--vn-ease-in-out)}
.rad-header.is-scrolled{--rad-insel-h:60px}
.rad-header.hat-insel{background:none}
.rad-header.hat-insel::before{display:none}
.rad-header.hat-insel .rad-header__brand::before{opacity:0}   /* der warme Schein war fürs dunkle Startbild; auf hellen Seiten lag er als Hof um den Anhänger */
.rad-kopf-form{position:absolute;top:0;left:0;z-index:1;width:100%;height:320px;overflow:visible;pointer-events:none}
.rad-kopf-form path{fill:var(--vn-color-surface-darker)}
.rad-kopf-pille{display:none}
@media(max-width:1000px){
  .rad-header{--rad-insel-h:56px}
  .rad-header.is-scrolled{--rad-insel-h:48px}
  html.rad-js .rad-header__inner{align-items:start}
  /* 28.09.2026 (Kundenwunsch): Wappen und Menüknopf nicht mehr verbunden — das Wappen schwarz umrandet (00-shell.js), der
     Knopf ein eigener Kreis, gold mit schwarzem Symbol, mittig auf Höhe des Wappens (Wappen oben 3 px, gescrollt mittig). */
  html.rad-js .rad-menu-toggle{margin-top:calc(3px + var(--rad-logo-h) / 2 - 22px);transition:margin-top var(--vn-d-medium) var(--vn-ease-in-out)}
  html.rad-js .rad-header.is-scrolled .rad-menu-toggle{margin-top:calc(var(--rad-header-h-scrolled) / 2 - 22px)}
  .rad-menu-toggle{border:0;border-radius:var(--vn-radius-full);background:var(--vn-color-accent);color:var(--vn-color-ink)}
  .rad-header__phone{display:none}
}
@media(min-width:1001px){
  .rad-header__inner{align-items:start}
  .rad-nav__group{gap:max(16px,calc(26 * var(--rad-dpx)))}
  .rad-nav__group{align-self:start;height:var(--rad-insel-h)}
  .rad-header__phone{display:none}
  .rad-header .rad-nav__link,.rad-header .rad-nav__link:is(:focus-visible),.rad-header .rad-nav__item--menu.is-open .rad-nav__link{text-shadow:none;color:var(--vn-color-on-dark)}
  @media(hover:hover){.rad-header .rad-nav__link:is(:hover,:focus-visible){text-shadow:none;color:var(--vn-color-on-dark)}}
  .rad-header .ist-unter-pille,.rad-header .ist-unter-pille .rad-nav__link,.rad-header .rad-nav__link.ist-unter-pille:is(:focus-visible),.rad-header .ist-unter-pille .rad-nav__link:is(:focus-visible),.rad-header .rad-nav__item--menu.is-open.ist-unter-pille .rad-nav__link{color:var(--vn-color-accent-on-dark)}
  @media(hover:hover){.rad-header .rad-nav__link.ist-unter-pille:is(:hover,:focus-visible),.rad-header .ist-unter-pille .rad-nav__link:is(:hover,:focus-visible){color:var(--vn-color-accent-on-dark)}}
  .rad-kopf-pille{display:block;position:absolute;top:0;left:0;z-index:5;width:0;height:0;border-radius:var(--vn-radius-full);pointer-events:none;opacity:0;
    background:color-mix(in srgb,var(--vn-color-accent) 26%,transparent);
    transition:transform 420ms var(--vn-ease-out),width 420ms var(--vn-ease-out),height 420ms var(--vn-ease-out),opacity 220ms var(--vn-ease-out)}
  .rad-kopf-pille.ist-sichtbar{opacity:1}
  .rad-kopf-pille.ohne-gleiten{transition:opacity 220ms var(--vn-ease-out)}
}
@media(prefers-reduced-motion:reduce){.rad-kopf-pille{transition:none}}

/* ≤1000: Telefon-Icon links, Wappen mittig, Burger rechts; Nav wird zum Panel, Untermenüs als Akkordeon (nur per Plus-Knopf, kein Hover) */
@media(max-width:1000px){
  .rad-header{--rad-logo-h:100px;--rad-logo-h-scrolled:50px}   /* 28.09.2026 (Kundenwunsch): größer, vorher 66/40 */
  .rad-header__brand{top:3px}
  .rad-header__brand::before{display:none}
  .rad-header.is-scrolled .rad-header__brand{top:calc((var(--rad-header-h-scrolled) - var(--rad-logo-h-scrolled)) / 2)}
  .rad-header__phone{order:1;margin-left:0;width:44px;padding:0;border-color:transparent;background:transparent}
  .rad-header__phone-text{display:none}
  .rad-menu-toggle{display:grid;place-items:center;order:3;margin-left:auto;position:relative;z-index:7}
  /* 23.09.2026 (Kundenwunsch): Das Menü ist EINE Fläche mit der Leiste — dieselbe Idee wie das Mega-Panel am Desktop
     (warmer Kartenverlauf, unten gerundet). Es beginnt am oberen Rand (top:0) mit so viel Innenabstand, wie die Leiste
     hoch ist; Wappen, Telefon und Kreuz liegen per z-index darüber. Vorher hing das Menü UNTER der transparenten Leiste
     (top:100 % + Trennlinie) — dort schien das Hero-Bild durch, das war der Spalt um das Wappen. */
  .rad-navigation{display:none;order:4;position:absolute;top:0;left:0;right:0;z-index:5;margin:0;gap:0;
    height:auto;max-height:100svh;overflow-y:auto;overscroll-behavior:contain;
    padding:calc(var(--rad-header-h) + 6px) 32px 28px;border-radius:0 0 28px 28px;
    background:var(--vn-color-surface-darker)}   /* 28.09.2026: schwarz ohne Verlauf wie das Desktop-Panel */
  .rad-header.is-scrolled .rad-navigation{padding-top:calc(var(--rad-header-h-scrolled) + 6px)}
  .rad-navigation.is-open{display:flex;flex-direction:column;align-items:stretch;animation:rad-mnav-in var(--vn-d-medium) var(--vn-ease-out) both}
  /* Die Leiste geht in der Menüfläche auf: kein eigener Verlauf, kein Blur-Streifen. */
  .rad-site.rad-menu-open .rad-header{background:none}
  .rad-site.rad-menu-open .rad-header::before{visibility:hidden}   /* visibility statt opacity: auf Unterseiten hält eine stärkere Regel opacity:1 */
  /* Seite dahinter abgedunkelt; ein Tipp darauf schließt (site.js). ::after liegt im Stapelkontext des Headers
     unter dem Menü, aber über der Seite. */
  .rad-header::after{content:"";position:fixed;inset:0;z-index:-2;background:color-mix(in srgb,var(--vn-color-surface-darker) 64%,transparent);
    opacity:0;visibility:hidden;transition:opacity var(--vn-d-medium) var(--vn-ease-out),visibility 0s linear var(--vn-d-medium)}
  .rad-site.rad-menu-open .rad-header::after{opacity:1;visibility:visible;transition-delay:0s}
  .rad-site.rad-menu-open{overflow:hidden}
  .rad-nav__group{display:contents}
  .rad-nav__group>*+*,.rad-nav__group--rechts>*:first-child{border-top:1px solid color-mix(in srgb,var(--vn-color-on-dark) 10%,transparent)}
  .rad-nav__item{display:flex;flex-wrap:wrap;align-items:center;height:auto}
  .rad-nav__link{flex:1 1 auto;display:flex;min-height:60px;padding-block:14px;font:500 1.5rem/1.2 var(--vn-font-display);letter-spacing:-.02em;text-transform:none;opacity:1;white-space:normal;animation:rad-nav-in var(--vn-d-medium) var(--vn-ease-out) both}
  .rad-nav__group>*:nth-child(2) .rad-nav__link,.rad-nav__group>a:nth-child(2){animation-delay:40ms}
  .rad-nav__group>*:nth-child(3) .rad-nav__link,.rad-nav__group>a:nth-child(3){animation-delay:80ms}
  .rad-nav__group--rechts>*:nth-child(1) .rad-nav__link,.rad-nav__group--rechts>a:nth-child(1){animation-delay:120ms}
  .rad-nav__group--rechts>*:nth-child(2) .rad-nav__link,.rad-nav__group--rechts>a:nth-child(2){animation-delay:160ms}
  .rad-nav__group--rechts>*:nth-child(3) .rad-nav__link{animation-delay:200ms}
  .rad-nav__toggle{width:48px;height:60px;margin:0 -12px 0 0;opacity:.9}
  .rad-nav__toggle svg{width:16px;height:16px}
  /* Akkordeon: Untermenü klappt über grid-template-rows 0fr → 1fr weich auf. Der gewählte Punkt leuchtet golden (wie am Desktop). */
  .rad-nav__panel{position:static;flex-basis:100%;width:100%;display:grid;grid-template-rows:0fr;padding:0;
    opacity:1;visibility:hidden;transform:none;background:none;border-radius:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;
    transition:grid-template-rows var(--vn-d-medium) var(--vn-ease-out),visibility 0s linear var(--vn-d-medium)}
  .rad-nav__item--menu.is-open .rad-nav__panel{grid-template-rows:1fr;visibility:visible;transition-delay:0s}
  .rad-header.is-scrolled .rad-nav__panel{padding-top:0}   /* Desktop-Regel (Panel ab Oberkante) würde hier sonst 72–88 px Leerraum unter jeden Punkt legen */
  .rad-nav__mega{display:flex;flex-direction:column;min-height:0;overflow:hidden;padding:0;width:auto;gap:0}
  /* 23.09.2026: overflow:hidden (fürs Aufklappen) schnitt den Hover-Schein der Kacheln ab — der ragt ~20 px über die Kachel
     (rad-shine-frame: 6 px Kreis + 14 px Weichzeichnung). Der Clip-Bereich wird deshalb oben und seitlich um 20 px nach außen
     verlegt (negativer Rand) und der Inhalt um dieselben 20 px eingerückt; das Layout bleibt gleich. Der überstehende Streifen
     liegt über der Menüzeile darüber — pointer-events:none, damit er ihr keine Tipps wegnimmt. */
  .rad-nav__mega.rad-nav__mega{margin:-20px -20px 0 !important;pointer-events:none}
  .rad-nav__mega a{pointer-events:auto}
  .rad-nav__cards{order:1;margin:0;padding:22px 20px 0}
  .rad-nav__cards,.rad-nav__item--bikes .rad-nav__cards,.rad-nav__item--zubehoer .rad-nav__cards{grid-template-columns:1fr;gap:4px}
  /* Service / Über uns: Zeile mit Bild und Kurztext */
  .rad-nav__card{flex-direction:row;align-items:center;gap:14px;padding:6px;border-radius:14px;background:color-mix(in srgb,var(--vn-color-paper) 4%,transparent)}
  .rad-nav__card-media{width:84px;aspect-ratio:3/2;border-radius:9px;flex-shrink:0}
  .rad-nav__card-body{padding:0;gap:2px}
  .rad-nav__card-text{font-size:.78rem;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  /* Bikes (28.09.2026, Kundenwunsch „Menü bugfixen und verbessern“): kompakte Zeilen mit kleinem Foto, feste Spalten —
     2 am Handy, 3 am Tablet. Vorher große Bildkacheln per auto-fill; Safari rechnete die Spaltenzahl im aufklappenden Panel
     falsch und stellte eine halbbreite Spalte dar (sechs Bildschirme Scrollen). */
  .rad-nav__item--bikes .rad-nav__cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .rad-nav__item--bikes .rad-nav__card{flex-direction:row;align-items:center;gap:10px;padding:5px;min-height:52px}
  .rad-nav__item--bikes .rad-nav__card-media{width:52px;aspect-ratio:4/3;border-radius:8px}
  .rad-nav__item--bikes .rad-nav__card-body{padding:0;min-width:0}
  .rad-nav__item--bikes .rad-nav__card-title{font:500 .8125rem/1.25 var(--vn-font-body);letter-spacing:0;hyphens:auto;-webkit-hyphens:auto}
  .rad-nav__item--menu.is-open .rad-nav__link{text-shadow:none}
  /* Vom Intro bleibt nur der Link („Alle Kategorien“, „Termin anfragen“, „Unsere Geschichte“) — der Menüpunkt selbst klappt ja nur auf. */
  .rad-nav__intro{display:block;order:2;padding:8px 22px 18px}
  .rad-nav__intro-title,.rad-nav__intro-text{display:none}
  .rad-nav__intro .rad-text-link{margin:0;color:var(--vn-color-accent-text)}
  /* Abschluss: Anfrage + Telefon */
  .rad-nav__extra{display:flex;flex-direction:column;align-items:stretch;gap:6px;margin-top:10px;padding-top:22px;
    border-top:1px solid color-mix(in srgb,var(--vn-color-on-dark) 10%,transparent);animation:rad-nav-in var(--vn-d-medium) var(--vn-ease-out) 240ms both}
  .rad-nav__extra .rad-button{justify-content:space-between}
  .rad-nav__extra-phone{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;color:var(--vn-color-on-dark);text-decoration:none;font:600 var(--vn-text-sm)/1 var(--vn-font-body)}
  html:not(.rad-js) .rad-menu-toggle{display:none}
  html:not(.rad-js) .rad-header{position:static;height:auto;min-height:var(--rad-header-h);background:var(--vn-color-surface-dark)}
  html:not(.rad-js) .rad-header::before{opacity:0}
  html:not(.rad-js) .rad-site:not(.home):not(.page-template-preview):not(.page-template-landing) .rad-document{padding-top:48px}
  html:not(.rad-js) .rad-header__inner{flex-wrap:wrap;row-gap:0;padding-bottom:12px}
  html:not(.rad-js) .rad-header__brand{position:static;transform:none;order:2;margin-inline:auto}
  html:not(.rad-js) .rad-nav__panel{display:block;visibility:visible}
  html:not(.rad-js) .rad-navigation{display:flex;flex-direction:column;align-items:stretch;order:4;flex-basis:100%;position:static;padding:0;border:0;background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
  html:not(.rad-js) .rad-nav__link{animation:none}
  html:not(.rad-js) .rad-nav__panel{display:block}
  html:not(.rad-js) .rad-nav__toggle{display:none}
}
@keyframes rad-nav-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes rad-mnav-in{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}

@media(max-width:650px){
  .rad-header{--rad-logo-h:88px;--rad-logo-h-scrolled:44px}   /* 28.09.2026 (Kundenwunsch): größer, vorher 60/36 */
  .rad-nav__item--bikes .rad-nav__cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rad-navigation{padding-inline:20px;padding-bottom:22px}
}

/* ---------------------------------------------------------------------------
   Footer — .rad-deep, Holo-Linie mit Leuchten oben
   --------------------------------------------------------------------------- */
.rad-footer{position:relative;padding:88px 0 28px}
/* Holo-Kante über dem Footer (18.09.2026 kräftiger + laufend, Kundenwunsch): 3 px hohe Leiste, deren Farbband dauerhaft von
   links nach rechts wandert. Der Verlauf ist ZYKLISCH (--vn-gradient-holo-loop endet auf der Anfangsfarbe) und doppelt so breit wie
   die Leiste — dadurch gibt es an der Wiederholung keine harte Farbkante (Kundenhinweis 18.09.2026). Ein weicher Schein
   darunter gibt der Kante Tiefe, ohne den Footer aufzuhellen. */
.rad-footer::before,.rad-footer::after{content:"";position:absolute;left:0;right:0;pointer-events:none;
  background:var(--vn-gradient-holo-loop);background-size:200% 100%;background-repeat:repeat-x;animation:rad-holo-lauf 9s linear infinite}
.rad-footer::before{top:0;height:2px;opacity:.95;z-index:1}
/* Leuchten wie auf der bisherigen Live-Seite (30.09.2026, Kundenwunsch): weichgezeichneter Streifen unter der Linie, der ruhig pulsiert */
.rad-footer::after{top:-2px;height:6px;filter:blur(7px);opacity:.55;animation:rad-holo-lauf 9s linear infinite,rad-holo-schein 4.5s ease-in-out infinite}
@keyframes rad-holo-lauf{from{background-position:0 0}to{background-position:200% 0}}
@keyframes rad-holo-schein{0%,100%{opacity:.38}50%{opacity:.75}}
@media (prefers-reduced-motion:reduce){.rad-footer::before,.rad-footer::after{animation:none}}

.rad-footer__laufband{overflow:hidden;margin-bottom:64px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.rad-footer__lauf{display:flex;width:max-content;animation:rad-footer-lauf 60s linear infinite}
@keyframes rad-footer-lauf{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.rad-footer__lauf{animation:none}}
.rad-footer__claim{font:var(--rad-w-display) clamp(2.25rem,5vw,4.5rem)/1.1 var(--vn-font-display);letter-spacing:-.03em;color:var(--vn-color-fg);margin:0;padding-right:.8em;white-space:nowrap}
.rad-footer__rechts{display:flex;align-items:center;gap:16px}
.rad-footer__social{display:flex;gap:10px;flex-shrink:0}
.rad-footer__social a{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:color-mix(in srgb,var(--vn-color-paper) 8%,transparent);color:var(--vn-color-fg);transition:background var(--vn-d-snap),color var(--vn-d-snap),transform var(--vn-d-medium) var(--vn-ease-out)}
.rad-footer__social a:is(:focus-visible){background:var(--vn-color-accent-text);color:var(--vn-color-bg,#0c0c0a);transform:translateY(-2px)}
@media(hover:hover){.rad-footer__social a:is(:hover,:focus-visible){background:var(--vn-color-accent-text);color:var(--vn-color-bg,#0c0c0a);transform:translateY(-2px)}}
.rad-footer__claim-accent{color:var(--vn-color-accent-text)}

.rad-footer__grid{display:grid;grid-template-columns:1.5fr .9fr 1fr .8fr;gap:48px;padding-bottom:56px}
.rad-footer__titel{margin:0 0 16px;font:600 var(--vn-text-micro)/1.4 var(--vn-font-body);letter-spacing:.14em;text-transform:uppercase;color:var(--vn-color-accent-text)}
.rad-footer__liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.rad-footer__kontakt{margin-top:20px}
.rad-footer__badge{display:inline-flex;align-items:center;gap:9px;margin-top:20px;padding:6px 13px 6px 9px;border-radius:11px;background:color-mix(in srgb,var(--vn-color-paper) 7%,transparent);color:var(--vn-color-fg);text-decoration:none;white-space:nowrap;transition:background var(--vn-d-snap),transform var(--vn-d-medium) var(--vn-ease-out)}
.rad-footer__badge:is(:focus-visible){background:color-mix(in srgb,var(--vn-color-paper) 12%,transparent);transform:translateY(-2px)}
@media(hover:hover){.rad-footer__badge:is(:hover,:focus-visible){background:color-mix(in srgb,var(--vn-color-paper) 12%,transparent);transform:translateY(-2px)}}
.rad-footer__badge-g{flex-shrink:0;display:block}
.rad-footer__badge-note{font:var(--rad-w-display) 1.25rem/1 var(--vn-font-display);letter-spacing:-.02em}
.rad-footer__badge-text{display:flex;flex-direction:column;gap:2px;font-size:.6875rem;line-height:1.25;color:var(--vn-color-muted)}
.rad-footer__sterne{color:var(--vn-color-accent-text);letter-spacing:.08em;font-size:.6875rem;line-height:1}
.rad-footer{--rad-footer-logo:72px}
.rad-footer__crest{height:var(--rad-footer-logo);width:auto;display:block}
.rad-footer__tagline{font-size:var(--vn-text-sm);line-height:1.7;color:var(--vn-color-muted)}
/* Logo-Reihe (18.09.2026): links das eigene Wappen, rechts das Partnerlogo Das Bike — gleiche Höhe, eine Grundlinie.
   Das Wort „Partner“ steht als Bildunterschrift unter dem rechten Logo, damit klar ist, wem es gehört. */
.rad-footer__logos{display:flex;align-items:flex-start;gap:clamp(20px,2.5vw,32px);margin-bottom:24px}
.rad-footer__partner{display:inline-flex;flex-direction:column;align-items:flex-start;gap:8px;text-decoration:none;
  transition:transform var(--vn-d-medium) var(--vn-ease-out)}
.rad-footer__partner-logo{display:block;width:auto;height:var(--rad-footer-logo);border-radius:var(--vn-radius-sm);opacity:.9;transition:opacity var(--vn-d-medium) var(--vn-ease-out)}
.rad-footer__partner-label{margin:0;font:600 var(--vn-text-micro)/1.4 var(--vn-font-body);letter-spacing:.12em;text-transform:uppercase;color:var(--vn-color-muted);transition:color var(--vn-d-snap)}
.rad-footer__partner:is(:focus-visible){transform:translateY(-2px)}
@media(hover:hover){.rad-footer__partner:is(:hover,:focus-visible){transform:translateY(-2px)}}
.rad-footer__partner:is(:focus-visible) .rad-footer__partner-logo{opacity:1}
@media(hover:hover){.rad-footer__partner:is(:hover,:focus-visible) .rad-footer__partner-logo{opacity:1}}
.rad-footer__partner:is(:focus-visible) .rad-footer__partner-label{color:var(--vn-color-fg)}
@media(hover:hover){.rad-footer__partner:is(:hover,:focus-visible) .rad-footer__partner-label{color:var(--vn-color-fg)}}
.rad-footer__partner:focus-visible{outline:2px solid var(--vn-color-accent);outline-offset:4px;border-radius:var(--vn-radius-sm)}
@media (prefers-reduced-motion:reduce){.rad-footer__partner{transition:none}.rad-footer__partner:is(:focus-visible){transform:none}
@media(hover:hover){.rad-footer__partner:is(:hover,:focus-visible){transform:none}}}

.rad-footer__address{font-size:var(--vn-text-sm);line-height:1.85;color:var(--vn-color-muted)}
.rad-footer__contact{font-size:var(--vn-text-sm);line-height:1.85;margin-top:8px;color:var(--vn-color-fg)}
.rad-footer__hours{font-size:var(--vn-text-micro);line-height:1.7;margin-top:12px;color:var(--vn-color-muted);text-wrap:pretty}
/* Zeitblöcke bleiben zusammen, Umbruch nur an den „·“-Trennern (kein Einzelwort „geschlossen“ in der letzten Zeile) */
.rad-footer__hours-part{white-space:nowrap}

/* Link-Hover wie im Header: Schimmer + Schein (rad-shine im Markup), keine Unterstreichung mehr */
.rad-footer__liste a,.rad-footer__contact a,.rad-footer__legal a,.rad-footer__einwilligung{position:relative;display:inline-block;font-size:var(--vn-text-sm);line-height:1.7;color:var(--vn-color-fg);text-decoration:none}

.rad-footer__bottom{display:flex;justify-content:space-between;align-items:center;gap:24px;padding-top:22px;font-size:var(--vn-text-xs);line-height:1.6;color:var(--vn-color-muted)}
.rad-footer__legal{display:flex;gap:20px}
.rad-footer__legal a,.rad-footer__einwilligung{font-size:var(--vn-text-xs);line-height:1.6;color:var(--vn-color-muted)}
.rad-footer__einwilligung{margin:0;padding:0;border:0;background:none;font-family:inherit;cursor:pointer}
/* „Made by Vision Nine Studio“-Badge (identische SVG wie auf bwhaustechnik.at): gedämpft, beim Hover voll */
.rad-footer__credit{display:inline-flex;align-items:center;color:var(--vn-color-muted);transition:color var(--vn-d-snap)}
.rad-footer__credit:focus-visible{color:var(--vn-color-fg)}
@media(hover:hover){.rad-footer__credit:hover{color:var(--vn-color-fg)}}
.rad-footer__credit svg{height:2.25rem;width:auto;display:block}

@media(max-width:1000px){
  .rad-footer{--rad-footer-logo:64px}
  .rad-footer__grid{grid-template-columns:repeat(3,1fr);gap:48px 40px}
  .rad-footer__col--brand{grid-column:1/-1}
}
@media(max-width:650px){
  .rad-footer{padding:56px 0 24px}
  .rad-footer__laufband{margin-bottom:44px}
  .rad-footer__grid{grid-template-columns:1fr 1fr;gap:36px 24px;padding-bottom:40px}
  .rad-footer__bottom{flex-direction:column;align-items:flex-start;gap:12px}
  .rad-footer__legal{flex-wrap:wrap;gap:8px 20px}
}
.cmplz-fmail-domain{display:none}