/* 10-seiten — Bausteine der Leistungs-Unterseiten (seit 17.09.2026): Seiten-Hero, Intro mit drei Punkten, Umfang-Checkliste,
   Ablauf (Roadmap-Komponente 00-road), Kundenstimmen, weitere Leistungen. Lesefluss je Seite: Versprechen (Hero) → Warum/Was (Intro) →
   Details (Umfang) → Wie (Ablauf) → Vertrauen (Stimmen) → Fragen (FAQ, Klassen aus 08-faq) → Handlung (CTA, 08b) → Weiter (Verwandte).
   Alle Karten in der Kartensprache der Seite (Verlauf warm → tief, kein Rand, Schatten, Schimmer auf Titeln), keine Eyebrows, keine Nummern. */

/* Hero: Foto randlos, Scrim links/unten, Inhalt unten links; der transparente Header liegt darüber (Template landing) */
.rad-phero{position:relative;isolation:isolate;overflow:hidden;min-height:min(78vh,760px);display:flex;align-items:flex-end;padding:calc(var(--rad-header-h) + 48px) 0 max(48px,calc(64 * var(--rad-dpx)))}
.rad-phero__bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:50% 50%;transform:scale(1.06);transition:transform 7000ms var(--vn-ease-out)}
.rad-phero.is-inview .rad-phero__bg{transform:none}
/* 30.09.2026 (Kundenwunsch „nicht so krass abdunkeln, zumindest bis zur Mitte"): am Desktop dunkelt nur noch die
   linke Textseite ab, ab 62 % der Breite ist das Foto frei; der Verlauf von unten reicht nur noch bis 38 % Höhe.
   Tablet (Kundenwunsch): ebenso hell, der Verlauf reicht dort weiter nach rechts, weil der Text breiter steht.
   Am Handy steht der Text über die ganze Breite — dort bleibt die volle Abdunklung (Media-Query unten). */
.rad-phero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,color-mix(in srgb,var(--vn-color-surface-darker) 78%,transparent) 0%,color-mix(in srgb,var(--vn-color-surface-darker) 60%,transparent) 28%,color-mix(in srgb,var(--vn-color-surface-darker) 22%,transparent) 50%,transparent 62%)}
.rad-phero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,color-mix(in srgb,var(--vn-color-surface-darker) 62%,transparent) 0%,transparent 38%)}
@media(max-width:1000px){
  .rad-phero::before{background:linear-gradient(90deg,color-mix(in srgb,var(--vn-color-surface-darker) 78%,transparent) 0%,color-mix(in srgb,var(--vn-color-surface-darker) 60%,transparent) 38%,color-mix(in srgb,var(--vn-color-surface-darker) 24%,transparent) 66%,transparent 84%)}
  .rad-phero::after{background:linear-gradient(0deg,color-mix(in srgb,var(--vn-color-surface-darker) 66%,transparent) 0%,transparent 45%)}
}
@media(max-width:650px){
  .rad-phero::before{background:linear-gradient(90deg,color-mix(in srgb,var(--vn-color-surface-darker) 82%,transparent) 0%,color-mix(in srgb,var(--vn-color-surface-darker) 58%,transparent) 48%,color-mix(in srgb,var(--vn-color-surface-darker) 28%,transparent) 100%)}
  .rad-phero::after{background:linear-gradient(0deg,color-mix(in srgb,var(--vn-color-surface-darker) 80%,transparent) 0%,transparent 55%)}
}
.rad-phero__crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:22px;font:400 var(--vn-text-sm)/1.4 var(--vn-font-body);color:var(--vn-color-on-dark-muted)}
.rad-phero__crumbs a{padding-block:12px;margin-block:-12px;color:inherit;text-decoration:none}
@media(hover:hover){.rad-phero__crumbs a:hover{color:var(--vn-color-on-dark)}}
.rad-phero__crumbs span[aria-current]{color:var(--vn-color-on-dark)}
.rad-phero__crumbs i{font-style:normal;opacity:.6}
.rad-phero__title{max-width:12em;font:var(--rad-w-display) var(--rad-fs-h1)/var(--rad-lh-h1) var(--vn-font-display);letter-spacing:var(--rad-ls-h1);text-transform:none;color:var(--vn-color-on-dark);text-wrap:balance}   /* Normalschrift: die Versalien gehören dem Startseiten-Slogan (site.css h1) */
.rad-phero__lead{margin-top:20px;max-width:34em;font:400 var(--vn-text-base)/1.65 var(--vn-font-body);color:color-mix(in srgb,var(--vn-color-on-dark) 88%,transparent);text-wrap:pretty}
/* Preis im Hero (Kundenvorgabe 17.09.2026): Betrag groß in Gold, Bezeichnung daneben, optionaler Zusatz als Chip */
.rad-phero__price{margin-top:28px;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px}
.rad-phero__amount{font:var(--rad-w-display) clamp(2rem,calc(44 * var(--rad-dpx)),2.75rem)/1 var(--vn-font-display);letter-spacing:-.02em;color:var(--vn-color-accent-on-dark);font-variant-numeric:tabular-nums}
.rad-phero__pricelabel{font:400 var(--vn-text-base)/1.4 var(--vn-font-body);color:color-mix(in srgb,var(--vn-color-on-dark) 88%,transparent)}
.rad-phero__extra{display:inline-flex;align-items:baseline;gap:6px;padding:8px 14px;border-radius:var(--vn-radius-full);border:1px solid color-mix(in srgb,var(--vn-color-accent) 55%,transparent);
  font:400 var(--vn-text-sm)/1.3 var(--vn-font-body);color:color-mix(in srgb,var(--vn-color-on-dark) 88%,transparent)}
.rad-phero__extra strong{font-weight:600;color:var(--vn-color-accent-on-dark)}
.rad-phero__actions{margin-top:28px;display:flex;flex-wrap:wrap;align-items:center;gap:16px 32px}
.rad-phero__actions .rad-text-link{color:var(--vn-color-on-dark)}

/* Intro: Statement links, Text rechts, darunter drei Punkte als Karten */
.rad-pintro__grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.rad-pintro__text{font-size:var(--vn-text-base);line-height:1.7;max-width:36em;padding-top:.6em}
.rad-pintro__points{margin:56px 0 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.rad-pintro__point{padding:26px 28px 28px;border-radius:var(--vn-radius-xl);background:linear-gradient(160deg,var(--rad-card-top),var(--rad-card-bottom));box-shadow:var(--rad-card-shadow);color:var(--vn-color-on-dark)}
.rad-pintro__point h3{font:var(--rad-w-h3) var(--rad-fs-h3-klein)/var(--rad-lh-h3) var(--vn-font-display);letter-spacing:var(--rad-ls-h3);color:var(--vn-color-on-dark)}
.rad-pintro__point p{margin-top:8px;font:400 var(--vn-text-sm)/1.6 var(--vn-font-body);color:var(--vn-color-on-dark-muted)}
/* Icon je Box (30.09.2026, Kundenwunsch): goldene Linien-Icons aus assets/icons/boxen/ als Maske auf getönter Kachel; das Motiv steht im Inhalt als data-icon */
.rad-pintro__point[data-icon]{position:relative;padding-top:100px}
.rad-pintro__point[data-icon]::before{content:"";position:absolute;top:26px;left:28px;width:54px;height:54px;border-radius:15px;background:color-mix(in srgb,var(--vn-color-accent) 24%,transparent)}
.rad-pintro__point[data-icon]::after{content:"";position:absolute;top:39px;left:41px;width:28px;height:28px;background:var(--vn-color-accent-on-dark,var(--vn-color-accent-text));-webkit-mask:var(--rad-box-icon) center/contain no-repeat;mask:var(--rad-box-icon) center/contain no-repeat}
.rad-pintro__point[data-icon=akku]{--rad-box-icon:url(../icons/boxen/akku.svg)}
.rad-pintro__point[data-icon=aktentasche]{--rad-box-icon:url(../icons/boxen/aktentasche.svg)}
.rad-pintro__point[data-icon=beratung]{--rad-box-icon:url(../icons/boxen/beratung.svg)}
.rad-pintro__point[data-icon=berg]{--rad-box-icon:url(../icons/boxen/berg.svg)}
.rad-pintro__point[data-icon=blitz]{--rad-box-icon:url(../icons/boxen/blitz.svg)}
.rad-pintro__point[data-icon=brille]{--rad-box-icon:url(../icons/boxen/brille.svg)}
.rad-pintro__point[data-icon=buegel]{--rad-box-icon:url(../icons/boxen/buegel.svg)}
.rad-pintro__point[data-icon=diagnose]{--rad-box-icon:url(../icons/boxen/diagnose.svg)}
.rad-pintro__point[data-icon=einkauf]{--rad-box-icon:url(../icons/boxen/einkauf.svg)}
.rad-pintro__point[data-icon=einstellen]{--rad-box-icon:url(../icons/boxen/einstellen.svg)}
.rad-pintro__point[data-icon=einstieg]{--rad-box-icon:url(../icons/boxen/einstieg.svg)}
.rad-pintro__point[data-icon=firma]{--rad-box-icon:url(../icons/boxen/firma.svg)}
.rad-pintro__point[data-icon=geld]{--rad-box-icon:url(../icons/boxen/geld.svg)}
.rad-pintro__point[data-icon=gepaeck]{--rad-box-icon:url(../icons/boxen/gepaeck.svg)}
.rad-pintro__point[data-icon=gruppe]{--rad-box-icon:url(../icons/boxen/gruppe.svg)}
.rad-pintro__point[data-icon=helm]{--rad-box-icon:url(../icons/boxen/helm.svg)}
.rad-pintro__point[data-icon=herz]{--rad-box-icon:url(../icons/boxen/herz.svg)}
.rad-pintro__point[data-icon=kalender]{--rad-box-icon:url(../icons/boxen/kalender.svg)}
.rad-pintro__point[data-icon=kind]{--rad-box-icon:url(../icons/boxen/kind.svg)}
.rad-pintro__point[data-icon=licht]{--rad-box-icon:url(../icons/boxen/licht.svg)}
.rad-pintro__point[data-icon=messen]{--rad-box-icon:url(../icons/boxen/messen.svg)}
.rad-pintro__point[data-icon=passt]{--rad-box-icon:url(../icons/boxen/passt.svg)}
.rad-pintro__point[data-icon=rad]{--rad-box-icon:url(../icons/boxen/rad.svg)}
.rad-pintro__point[data-icon=reifen]{--rad-box-icon:url(../icons/boxen/reifen.svg)}
.rad-pintro__point[data-icon=route]{--rad-box-icon:url(../icons/boxen/route.svg)}
.rad-pintro__point[data-icon=schichten]{--rad-box-icon:url(../icons/boxen/schichten.svg)}
.rad-pintro__point[data-icon=schild]{--rad-box-icon:url(../icons/boxen/schild.svg)}
.rad-pintro__point[data-icon=schule]{--rad-box-icon:url(../icons/boxen/schule.svg)}
.rad-pintro__point[data-icon=shirt]{--rad-box-icon:url(../icons/boxen/shirt.svg)}
.rad-pintro__point[data-icon=sonne]{--rad-box-icon:url(../icons/boxen/sonne.svg)}
.rad-pintro__point[data-icon=stoppuhr]{--rad-box-icon:url(../icons/boxen/stoppuhr.svg)}
.rad-pintro__point[data-icon=strasse]{--rad-box-icon:url(../icons/boxen/strasse.svg)}
.rad-pintro__point[data-icon=tropfen]{--rad-box-icon:url(../icons/boxen/tropfen.svg)}
.rad-pintro__point[data-icon=uhr]{--rad-box-icon:url(../icons/boxen/uhr.svg)}
.rad-pintro__point[data-icon=wald]{--rad-box-icon:url(../icons/boxen/wald.svg)}
.rad-pintro__point[data-icon=wechsel]{--rad-box-icon:url(../icons/boxen/wechsel.svg)}
.rad-pintro__point[data-icon=werkzeug]{--rad-box-icon:url(../icons/boxen/werkzeug.svg)}
.rad-pintro__point[data-icon=zahnrad]{--rad-box-icon:url(../icons/boxen/zahnrad.svg)}
.rad-pintro__point[data-icon=zug]{--rad-box-icon:url(../icons/boxen/zug.svg)}

/* Umfang/Kriterien (Kundenwunsch 30.09.2026): ruhige Checkliste statt Kartencollage. Eine Spalte, goldenes Haekchen,
   feine Linien wie bei den Bikefitting-Schritten. Keine Flaechen, keine Rahmen, keine Nummern. */
.rad-pscope__grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:64px;align-items:start}
.rad-pscope__lead{margin-top:18px;max-width:26em;line-height:1.7}
.rad-pscope__list{margin:0;padding:0;list-style:none;border-top:1px solid var(--vn-color-line)}
.rad-pscope__list li{min-width:0;display:flex;align-items:flex-start;gap:18px;padding:18px 0;border-bottom:1px solid var(--vn-color-line);
  font:var(--rad-w-display) clamp(1.1875rem,1.7vw,1.5rem)/1.3 var(--vn-font-display);letter-spacing:var(--rad-ls-head);color:var(--vn-color-fg);
  text-wrap:pretty;overflow-wrap:break-word}
.rad-pscope__list li::before{content:"";flex:0 0 22px;height:22px;margin-top:calc((1.3em - 22px) / 2);background:var(--vn-color-accent);
  -webkit-mask:url(../icons/haken.svg) center/contain no-repeat;mask:url(../icons/haken.svg) center/contain no-repeat}

/* Erklaersektion (Kundenwunsch 19.09.2026, /leistungen/bikefitting/): Bild links, drei Schritte rechts.
   Das Motiv ist eine Studioaufnahme auf Tiefschwarz — es sitzt deshalb in einer dunklen Karte in der Hausfuellung,
   damit die Kanten nicht gegen die helle Flaeche stossen. Die Schritte laufen gestaffelt ein (--i), das Bild zieht
   dabei leicht auf: eine Transformation, einmalig, kein Dauerlaeufer. */
.rad-bfit__head{align-items:flex-start;margin-bottom:var(--rad-head-gap)}
.rad-bfit__lead{max-width:34em;line-height:1.65}
.rad-bfit__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,4vw,64px);align-items:start}
.rad-bfit__bild{margin:0;display:flex;flex-direction:column;gap:14px}
.rad-bfit__bild img{display:block;width:100%;height:auto;border-radius:var(--vn-radius-xl);
  background:var(--rad-card-bottom);box-shadow:var(--rad-card-shadow);
  transform:scale(.97);transition:transform var(--vn-d-slower) var(--vn-ease-out)}
html.rad-js .rad-bfit__bild.is-inview img{transform:none}
.rad-bfit__bild figcaption{font:400 var(--vn-text-micro)/1.55 var(--vn-font-body);color:var(--vn-color-muted)}
.rad-bfit__schritte{margin:0;padding:0;list-style:none;display:grid;gap:0}
.rad-bfit__schritt{padding:26px 0;border-top:1px solid var(--vn-color-line)}
.rad-bfit__schritt:first-child{padding-top:0;border-top:0}
.rad-bfit__titel{margin:0;font:var(--rad-w-h3) var(--rad-fs-h3)/var(--rad-lh-h3) var(--vn-font-display);letter-spacing:var(--rad-ls-h3);
  letter-spacing:var(--rad-ls-head);color:var(--vn-color-fg);text-wrap:balance}
.rad-bfit__text{margin:10px 0 0;font:400 var(--vn-text-base)/1.7 var(--vn-font-body);color:var(--vn-color-muted);text-wrap:pretty}

/* Ablauf: Kopf + Roadmap */
.rad-pflow .rad-road{margin-top:48px}

/* Kundenstimmen: drei Karten, Zitat wörtlich, Autor = Initialen, Quelle Listen360 */
.rad-pquotes__grid{margin:48px 0 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.rad-pquote{min-width:0;display:flex;flex-direction:column;gap:16px;padding:28px 28px 26px;border-radius:var(--vn-radius-xl);background:linear-gradient(160deg,var(--rad-card-top),var(--rad-card-bottom));box-shadow:var(--rad-card-shadow);color:var(--vn-color-on-dark)}
.rad-pquote__stars{display:flex;gap:2px}
.rad-pquote__stars svg{width:14px;height:14px;fill:var(--vn-color-accent-on-dark)}
.rad-pquote__text{flex:1 1 auto;min-width:0;overflow-wrap:anywhere;font:400 var(--vn-text-base)/1.65 var(--vn-font-body);color:var(--vn-color-on-dark)}
.rad-pquote__text--short{font:500 1.25rem/1.4 var(--vn-font-display);letter-spacing:-.01em}
.rad-pquote__meta{font:400 var(--vn-text-sm)/1.5 var(--vn-font-body);color:var(--vn-color-on-dark-muted)}
.rad-pquote__meta strong{display:block;font-weight:600;color:var(--vn-color-on-dark)}

/* Weitere Leistungen: Kartenraster aus 03-leistungen (drei Karten) */
.rad-prelated{--rad-services-pad:max(20px,calc(24 * var(--rad-dpx)))}   /* 17.09.2026: die Variable war nur in .rad-services gesetzt — hier saß der Text darum oben links ohne Abstand */
.rad-prelated .rad-services__grid{margin-top:48px}

@media(max-width:1000px){
  .rad-phero{min-height:min(70vh,640px);padding-bottom:40px}
  .rad-pintro__grid,.rad-pscope__grid{grid-template-columns:1fr;gap:28px}
  .rad-bfit__grid{grid-template-columns:minmax(0,1fr);gap:32px}
  .rad-bfit__head{flex-direction:column;align-items:stretch;gap:18px}
  .rad-bfit__lead{max-width:none}
  .rad-pintro__text{padding-top:0}
  /* minmax(0,1fr) statt 1fr: bei 320 px wuchs die Spalte sonst mit dem längsten Wort über die Shell hinaus (1 px Querüberlauf) */
  .rad-pintro__points,.rad-pquotes__grid{grid-template-columns:minmax(0,1fr);gap:16px}
  .rad-prelated .rad-services__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:650px){
  .rad-phero{padding-top:calc(var(--rad-header-h) + 32px)}
  .rad-phero__actions .rad-button{width:100%}
  .rad-phero__actions{justify-content:center}   /* 24.09.2026 (Kundenwunsch): Textlink mit Telefonnummer mittig unter dem breiten Knopf */
  .rad-pscope__list li{padding:16px 0;gap:14px}
  .rad-prelated .rad-services__grid{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){.rad-phero__bg{transform:none;transition:none}
  .rad-bfit__bild img{transform:none;transition:none}}

/* ---------- Seitenkopf mit Gruppenbild (Über uns, 21.09.2026) ----------
   Der normale Seitenkopf ist deutlich flacher als ein 1,94:1-Foto und schneidet es mit object-fit:cover
   oben und unten an — bei einem Gruppenbild fehlen dann Köpfe und Füße. Deshalb wächst die Kopfhöhe hier
   mit der Fensterbreite mit, sobald das Bild mehr Platz braucht als der Standardkopf hergibt. */
.rad-phero--gruppe{min-height:max(min(78vh,760px),calc(100vw / 1.94))}

@media (max-width:700px){
  /* Schmale Schirme: Der Kopf ist hochformatig, das Bild quer — als Hintergrund blieben von der Gruppe nur
     die mittleren 34 % übrig. Hier steht das Foto deshalb als eigener Block über dem Text, vollständig
     und unbeschnitten; die beiden Verläufe des Standardkopfs entfallen, sie lägen sonst über dem Nichts. */
  .rad-phero--gruppe{min-height:0;display:block;padding:0 0 max(40px,calc(48 * var(--rad-dpx)));
    background:var(--vn-color-surface-darker)}
  .rad-phero--gruppe::before,.rad-phero--gruppe::after{display:none}
  .rad-phero--gruppe .rad-phero__bg{position:relative;inset:auto;z-index:0;width:100%;height:auto;
    aspect-ratio:1.94;object-fit:cover;transform:none;margin-top:var(--rad-header-h-scrolled)}
  .rad-phero--gruppe .rad-shell{padding-top:26px}
}