/* 03-leistungen — Bild 3: Leistungsraster (3×2). Fahrradwelten seit 17.09.2026 als eigene Sektion (03b-fahrradwelten).
   Nur Rollen-/CI-Tokens aus site.css. Am 09.09.2026 vom Karussell auf ein statisches 3×2-Raster umgestellt
   (Kundenwunsch): sechs Leistungen, jede mit eigener Unterseite, flachere und breitere Karten statt schmaler
   Hochformate. Maße bei Inhaltsbreite 1160: Karte 371 × 331, Abstand 24 (Figma-Wert). */

/* ---------- Teil A: Leistungsraster ---------- */
.rad-services{--rad-services-pad:max(20px,calc(24 * var(--rad-dpx)))}
.rad-services .rad-head h2{max-width:14em}
.rad-services__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:0;padding:0;list-style:none;--rad-stagger:70ms}
.rad-services__card{position:relative;isolation:isolate;aspect-ratio:1.12;border-radius:var(--vn-radius-xl);overflow:hidden;background:var(--vn-color-surface-raised);box-shadow:var(--rad-card-shadow)}
.rad-services__link{position:absolute;inset:0;display:block;color:var(--vn-color-on-dark);text-decoration:none}

/* Foto füllt die Karte; je Motiv ein passender Bildausschnitt */
.rad-services__img{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;object-position:50% 50%;
  transition:transform var(--vn-d-slow) var(--vn-ease-out)}
.rad-services__card:nth-child(1) .rad-services__img{object-position:40% 50%}
.rad-services__card:nth-child(4) .rad-services__img{object-position:50% 40%}

/* Scrim: oben fast frei, unten in die Kartenfarbe (warm → tief, site.css-Token) — Titel + Text ≥ 7:1 */
.rad-services__shade{position:absolute;inset:0;z-index:2;transition:opacity var(--vn-d-medium) var(--vn-ease-out);
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--vn-color-surface-darker) 22%,transparent) 0%,
    color-mix(in srgb,var(--vn-color-surface-darker) 30%,transparent) 40%,
    color-mix(in srgb,var(--rad-card-top) 92%,transparent) 72%,
    var(--rad-card-bottom) 100%)}

/* Textblock unten: Titel + zwei Zeilen Beschreibung links, Pfeil rechts */
.rad-services__body{position:absolute;z-index:3;left:var(--rad-services-pad);right:var(--rad-services-pad);bottom:var(--rad-services-pad);
  display:grid;grid-template-columns:minmax(0,1fr);align-items:end;row-gap:6px}
.rad-services__title{grid-column:1;justify-self:start;font:500 max(1.0625rem,calc(20 * var(--rad-dpx)))/1.3 var(--vn-font-display);
  letter-spacing:-.02em;color:var(--vn-color-on-dark);text-wrap:balance}
.rad-services__desc{grid-column:1;font:500 max(.875rem,calc(15 * var(--rad-dpx)))/1.5 var(--vn-font-body);
  color:color-mix(in srgb,var(--vn-color-on-dark) 84%,transparent);
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
/* 3 Zeilen: die deutschen Texte brauchen bei 280 px Textbreite bis zu drei Zeilen; der Block ist unten
   verankert, deshalb fluchten alle Karten trotz unterschiedlicher Zeilenzahl an derselben Unterkante. */
/* Hover / Fokus (Kundenwunsch 17.09.2026): Foto zieht langsam auf, Scrim wird dichter, Titel schimmert + leuchtet (rad-shine, site.css 1.10) */
.rad-services__img{transition:transform 1400ms var(--vn-ease-out),filter 700ms var(--vn-ease-out)}
.rad-services__link:is(:focus-visible) .rad-services__img{transform:scale(1.06);filter:saturate(1.08)}
@media(hover:hover){.rad-services__link:is(:hover,:focus-visible) .rad-services__img{transform:scale(1.06);filter:saturate(1.08)}}
.rad-services__link:is(:focus-visible) .rad-services__shade{opacity:.96}
@media(hover:hover){.rad-services__link:is(:hover,:focus-visible) .rad-services__shade{opacity:.96}}
.rad-services__link:is(:focus-visible) .rad-services__desc{color:var(--vn-color-on-dark)}
@media(hover:hover){.rad-services__link:is(:hover,:focus-visible) .rad-services__desc{color:var(--vn-color-on-dark)}}
.rad-services__desc{transition:color var(--vn-d-slow)}

/* ---------- ≤1000: Raster zweispaltig, Teil B einspaltig ---------- */
@media (max-width:1000px){
  .rad-services{--rad-services-pad:22px}
  .rad-services__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
  .rad-services__card{aspect-ratio:1.3}
}

/* ---------- ≤650: Raster einspaltig, flachere Karten ---------- */
@media (max-width:650px){
  .rad-services .rad-head{flex-direction:column;align-items:stretch;gap:20px}
  .rad-services__grid{grid-template-columns:1fr;gap:16px}
  .rad-services__card{aspect-ratio:1.45}
  .rad-services__desc{-webkit-line-clamp:3}
}

/* Fokusring der Kartenlinks: Foto (z 1), Scrim (z 2) und Text (z 3) überdecken die Outline des Links —
   der Ring wird deshalb als Pseudo-Element OBEN aufgemalt. */
.rad-services__link:focus-visible{outline:none}
.rad-services__link:focus-visible::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;border-radius:var(--vn-radius-xl);box-shadow:inset 0 0 0 3px var(--vn-color-accent)}

/* ---------- Slider (Kundenwunsch 18.09.2026: Kacheln wie die „Bike Highlights“ des Shops) ----------
   Weiße Karten mit Bild oben und Text unten, horizontal blätterbar: nativer Scroll mit Snap, die Reihe läuft rechts bis
   zum Viewportrand (negativer Rand = Shell-Gutter), darunter ein Fortschrittsbalken (Daumen = sichtbarer Anteil) und zwei
   runde Knöpfe. Kopfzeile: Titel links, „Alle Leistungen ansehen“ mit Goldpunkt rechts. Das Raster oben bleibt für
   Unterseiten (rad-prelated, rad-barten) unverändert; hier gilt nur .rad-services--slider. */
.rad-services--slider{overflow-x:clip}
.rad-services--slider .rad-head{align-items:center}
.rad-lslider__all{display:inline-flex;align-items:center;gap:12px;flex-shrink:0;color:var(--vn-color-fg);text-decoration:none;
  font:500 max(.9375rem,calc(16 * var(--rad-dpx)))/1.2 var(--vn-font-body)}
.rad-lslider__dot{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--vn-color-accent);color:var(--vn-color-ink);
  transition:transform var(--vn-d-medium) var(--vn-ease-out),background var(--vn-d-snap)}
.rad-lslider__dot svg{width:12px;height:12px}
@media(hover:hover){.rad-lslider__all:hover .rad-lslider__dot{transform:translateX(4px);background:var(--vn-color-accent-on-dark)}}
.rad-lslider{container-type:inline-size;--rad-ls-gap:24px;--rad-ls-card:#fff}
.rad-lslider__track{display:flex;gap:var(--rad-ls-gap);margin:0 calc(-1 * var(--vn-gutter)) 0 0;padding:6px var(--vn-gutter) 6px 0;list-style:none;
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none}
.rad-lslider__track::-webkit-scrollbar{display:none}
.rad-lslider__card{flex:0 0 auto;width:calc((100cqw - 2 * var(--rad-ls-gap)) / 3.2);scroll-snap-align:start;--rad-stagger:70ms}
.rad-lslider__link{display:flex;flex-direction:column;height:100%;border-radius:var(--vn-radius-md);overflow:hidden;background:var(--rad-ls-card);color:var(--vn-color-fg);text-decoration:none;
  outline-offset:3px}
.rad-lslider__link:focus-visible{outline:2px solid var(--vn-color-accent)}
.rad-lslider__media{position:relative;display:block;aspect-ratio:1;overflow:hidden;background:var(--vn-color-surface-light)}
.rad-lslider__img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 50%;transition:transform 1400ms var(--vn-ease-out)}
.rad-lslider__card:nth-child(1) .rad-lslider__img{object-position:40% 50%}
.rad-lslider__card:nth-child(4) .rad-lslider__img{object-position:50% 40%}
.rad-lslider__link:is(:focus-visible) .rad-lslider__img{transform:scale(1.06)}
@media(hover:hover){.rad-lslider__link:is(:hover,:focus-visible) .rad-lslider__img{transform:scale(1.06)}}
/* Der Textblock ueberlappt das Bild um einen Pixel und liegt darueber. Beide Flaechen treffen sich in derselben
   Farbe, aber beim Scrollen landet die Kante auf Bruchteilen eines Pixels — dann blitzte dazwischen die dunklere
   Kartenfarbe durch (Kundenwunsch 19.09.2026). Mit der Ueberlappung kann dort kein Spalt mehr entstehen. */
.rad-lslider__body{position:relative;margin-top:-1px;display:flex;flex-direction:column;gap:8px;
  padding:clamp(20px,2vw,30px) clamp(20px,2vw,30px) clamp(24px,2.4vw,34px)}
.rad-lslider__title{font:600 max(1.0625rem,calc(18 * var(--rad-dpx)))/1.3 var(--vn-font-body);letter-spacing:-.01em;color:var(--vn-color-fg);text-wrap:balance}
.rad-lslider__desc{font:400 max(.9rem,calc(15 * var(--rad-dpx)))/1.5 var(--vn-font-body);color:var(--vn-color-muted)}
.rad-lslider.is-starr .rad-lslider__foot{display:none}
.rad-lslider__foot{display:flex;align-items:center;gap:40px;margin-top:clamp(24px,3vw,40px)}
.rad-lslider__bar{position:relative;flex:1;height:2px;background:var(--vn-color-line)}
.rad-lslider__thumb{position:absolute;top:0;left:0;height:100%;width:50%;background:var(--vn-color-fg);transition:left 320ms var(--vn-ease-out),width 320ms var(--vn-ease-out)}
.rad-lslider__nav{display:flex;gap:10px;flex-shrink:0}
.rad-lslider__btn{width:48px;height:48px;padding:0;border-radius:50%;border:1px solid color-mix(in srgb,var(--vn-color-fg) 28%,transparent);background:none;color:var(--vn-color-fg);
  display:grid;place-items:center;cursor:pointer;-webkit-appearance:none;appearance:none;
  transition:background var(--vn-d-snap),color var(--vn-d-snap),border-color var(--vn-d-snap),opacity var(--vn-d-medium),transform var(--vn-d-snap)}
.rad-lslider__btn svg{width:18px;height:18px}
@media (hover:hover){.rad-lslider__btn:hover{background:var(--vn-color-fg);color:var(--vn-color-bg);border-color:var(--vn-color-fg)}}
.rad-lslider__btn:active{transform:scale(.94)}
.rad-lslider__btn:focus-visible{outline:2px solid var(--vn-color-accent);outline-offset:3px}
.rad-lslider__btn[disabled]{opacity:.3;cursor:default;pointer-events:none}
@media (max-width:1000px){
  .rad-lslider__card{width:calc((100cqw - var(--rad-ls-gap)) / 2.15)}
}
@media (max-width:650px){
  .rad-services--slider .rad-head{flex-direction:column;align-items:flex-start;gap:14px}   /* Titel voll breit, Link darunter — nebeneinander ragte der Link über die Shell */
  .rad-lslider__all{font-size:var(--vn-text-sm)}
  .rad-lslider{--rad-ls-gap:16px}
  .rad-lslider__card{width:calc(100cqw - 44px)}
  .rad-lslider__foot{gap:20px}
  .rad-lslider__btn{width:44px;height:44px}
}
@media (prefers-reduced-motion:reduce){
  .rad-lslider__track{scroll-behavior:auto}
  .rad-lslider__img,.rad-lslider__thumb,.rad-lslider__dot,.rad-lslider__ki,.rad-lslider__ki-i,.rad-lslider__ki-t{transition:none}
}

/* ---------- Statische Reihe statt Slider (Kundenwunsch 18.09.2026) ----------
   Nach dem Zusammenlegen von Standard- und E-Bike-Service bleiben vier Kacheln — die passen nebeneinander, also
   entfaellt das Blaettern. Seit 19.09.2026 ist der Inhaltsrahmen der Website genau so breit wie diese Viererreihe
   (site.css: --vn-container-default), deshalb teilen die Kacheln einfach die Shell: Kopfzeile und Kacheln fluchten von selbst,
   ohne Sonderbreite. Auf Unterseiten stehen drei Kacheln — sie behalten dieselbe Groesse und stehen linksbuendig. */
.rad-lslider--reihe{container-type:normal}
.rad-lslider--reihe .rad-lslider__track{
  flex-wrap:wrap;justify-content:flex-start;row-gap:var(--rad-ls-gap);
  overflow:visible;scroll-snap-type:none;margin:0;padding:6px 0}
.rad-lslider--reihe .rad-lslider__card{max-width:100%;width:calc((100% - 3 * var(--rad-ls-gap)) / 4);scroll-snap-align:none}
@media (max-width:1359px){   /* vier nebeneinander waeren zu schmal: zwei Spalten */
  .rad-lslider--reihe .rad-lslider__card{width:calc((100% - var(--rad-ls-gap)) / 2)}
}
@media (max-width:650px){
  .rad-lslider--reihe .rad-lslider__card{width:100%}
}

/* ---------- KI-Kennzeichnung (Kundenwunsch 22.09.2026) ----------
   Die vier Leistungsbilder sind mit KI erzeugt. Das Zeichen (Kundendatei AI.svg, als Maske abgelegt, damit die
   Farbe aus dem CSS kommt) sitzt klein in der oberen rechten Bildecke und liegt bei 30 %. Beim direkten
   Ueberfahren — mobil beim Antippen, 03-leistungen.js setzt dafuer .is-offen — waechst es nach links zu einer
   Pille mit der Aufschrift „AI-Modified" und geht auf 90 %.
   Das Zeichen liegt bewusst NEBEN dem <a> und nicht darin: so loest es weder den Kartenhover noch einen
   Seitenwechsel aus, und es steht kein anklickbares Element in einem Link.
   Die Breite waechst ueber max-width des Textes (nicht ueber width:auto, das sich nicht animieren laesst). */
.rad-lslider__card{position:relative}
.rad-lslider__ki{position:absolute;z-index:3;top:max(10px,calc(12 * var(--rad-dpx)));right:max(10px,calc(12 * var(--rad-dpx)));
  display:inline-flex;align-items:center;gap:0;height:max(22px,calc(26 * var(--rad-dpx)));padding:0;
  border-radius:999px;color:var(--vn-color-on-dark);cursor:help;-webkit-tap-highlight-color:transparent;
  /* Alpha 0 statt „transparent“: sonst blendet Chrome beim Aufziehen ueber ein Grau. */
  background:color-mix(in srgb,var(--vn-color-surface-darker) 0%,transparent);opacity:.3;
  transition:opacity var(--vn-d-medium) var(--vn-ease-out),background-color var(--vn-d-slow) var(--vn-ease-out),
    padding var(--vn-d-slow) var(--vn-ease-out),gap var(--vn-d-slow) var(--vn-ease-out),
    box-shadow var(--vn-d-slow) var(--vn-ease-out)}
.rad-lslider__ki-i{flex:0 0 auto;width:max(22px,calc(26 * var(--rad-dpx)));height:100%;background:currentColor;
  -webkit-mask:url(../images/ki-badge.png) center/contain no-repeat;mask:url(../images/ki-badge.png) center/contain no-repeat;
  /* Ohne Pille braucht das Zeichen den Schatten, um auf hellen Bildstellen zu stehen; in der Pille stoert er. */
  filter:drop-shadow(0 1px 2px color-mix(in srgb,var(--vn-color-surface-darker) 55%,transparent));
  transition:filter var(--vn-d-medium) var(--vn-ease-out)}
.rad-lslider__ki-t{max-width:0;overflow:hidden;white-space:nowrap;opacity:0;
  font:600 max(9px,calc(10.5 * var(--rad-dpx)))/1 var(--vn-font-body);letter-spacing:.06em;
  transition:max-width var(--vn-d-slow) var(--vn-ease-out),opacity var(--vn-d-medium) var(--vn-ease-out)}
.rad-lslider__ki:is(:focus-visible,.is-offen){opacity:.9;
  background:color-mix(in srgb,var(--vn-color-surface-darker) 74%,transparent);
  padding-left:max(9px,calc(11 * var(--rad-dpx)));padding-right:max(2px,calc(3 * var(--rad-dpx)));
  gap:max(5px,calc(6 * var(--rad-dpx)))}
@media(hover:hover){.rad-lslider__ki:is(:hover,:focus-visible,.is-offen){opacity:.9;
  background:color-mix(in srgb,var(--vn-color-surface-darker) 74%,transparent);
  padding-left:max(9px,calc(11 * var(--rad-dpx)));padding-right:max(2px,calc(3 * var(--rad-dpx)));
  gap:max(5px,calc(6 * var(--rad-dpx)))}}
.rad-lslider__ki:is(:focus-visible,.is-offen) .rad-lslider__ki-t{max-width:10em;opacity:1}
@media(hover:hover){.rad-lslider__ki:is(:hover,:focus-visible,.is-offen) .rad-lslider__ki-t{max-width:10em;opacity:1}}
.rad-lslider__ki:is(:focus-visible,.is-offen) .rad-lslider__ki-i{filter:none}
@media(hover:hover){.rad-lslider__ki:is(:hover,:focus-visible,.is-offen) .rad-lslider__ki-i{filter:none}}

/* ---------- Kacheln im Kartenlook der Rezensionen (Kundenwunsch 19.09.2026) ----------
   Dieselbe Sprache wie .rad-reviews__card: kein Rand, grosser Radius, unter dem Foto laeuft warm angeleuchtetes
   Anthrazit ins Tiefschwarz aus, und das Foto blendet an seiner Unterkante in die Kartenfarbe. Inhalte bleiben,
   nur die Schrift steht jetzt hell auf dunkel. */
/* 22.09.2026 (Kundenwunsch): Verlauf in den Karten schwarz statt gold-angeleuchtet — die Kartenfarbe laeuft von
   ink-900 ins ink-950, ohne den Goldanteil von --rad-card-top. Nur hier, die Rezensionskarten behalten ihren Ton. */
:is(.rad-lslider--reihe,.rad-lslider--karussell) .rad-lslider__link{--rad-card-top:var(--vn-color-surface-dark);border-radius:var(--vn-radius-xl);color:var(--vn-color-on-dark);
  background:linear-gradient(180deg,var(--rad-card-top) 55%,var(--rad-card-bottom) 100%);
  box-shadow:var(--rad-glow-shadow)}
/* 23.09.2026 (Kundenwunsch „Verlauf viel weicher, Grenze weiter nach unten"): Statt einer Farbschicht, die an der
   Fotounterkante endet (harte Linie genau dort), laeuft das Foto jetzt 18 % unter den Textblock hinein und wird ueber
   eine MASKE mit langer, gleichmaessig abflachender Kurve ausgeblendet (Muster: reference_bildauslauf_maske).
   Die Kartenflaeche darunter ist ink-900 → ink-950, also genau der Ton, in den das Foto ausblendet.
   Prozentualer Rand bezieht sich auf die Breite — das Foto ist quadratisch, 18 % Breite = 18 % Fotohoehe. */
:is(.rad-lslider--reihe,.rad-lslider--karussell) .rad-lslider__media{position:relative;background:none;margin-bottom:-18%}
:is(.rad-lslider--reihe,.rad-lslider--karussell) .rad-lslider__img{
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 46%,rgba(0,0,0,.95) 54%,rgba(0,0,0,.86) 62%,rgba(0,0,0,.72) 70%,
    rgba(0,0,0,.54) 78%,rgba(0,0,0,.34) 86%,rgba(0,0,0,.16) 93%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 0%,#000 46%,rgba(0,0,0,.95) 54%,rgba(0,0,0,.86) 62%,rgba(0,0,0,.72) 70%,
    rgba(0,0,0,.54) 78%,rgba(0,0,0,.34) 86%,rgba(0,0,0,.16) 93%,transparent 100%)}
:is(.rad-lslider--reihe,.rad-lslider--karussell) .rad-lslider__media::after{content:none;position:absolute;inset:0;pointer-events:none;   /* 23.09.2026 ersetzt durch die Maske am Bild */
  /* Der Verlauf MUSS an der Fotounterkante die volle Kartenfarbe erreichen. Bei 88 % blieb das Foto dort zu 12 %
     sichtbar, waehrend der Textblock darunter voll deckt — genau das ergab die harte Linie.
     22.09.2026 (Kundenwunsch): Verlauf deutlich weiter nach unten gezogen. Vorher lag ab 72 % der Bildhoehe ein
     Schleier auf dem Foto und bei 40 % noch 38 % Deckung — zusammen mit dem Textblock war fast ein Drittel der
     Karte schwarz. Jetzt endet der Verlauf bei 32 %, der Hauptteil liegt in den unteren 18 %: die Kante zum
     Textblock bleibt nahtlos, darueber steht das Foto frei. */
  background:linear-gradient(0deg,var(--rad-card-top) 0%,color-mix(in srgb,var(--rad-card-top) 70%,transparent) 7%,
    color-mix(in srgb,var(--rad-card-top) 22%,transparent) 18%,transparent 32%)}
:is(.rad-lslider--reihe,.rad-lslider--karussell) .rad-lslider__body{z-index:1;background:none}
:is(.rad-lslider--reihe,.rad-lslider--karussell) .rad-lslider__title{color:var(--vn-color-on-dark)}
:is(.rad-lslider--reihe,.rad-lslider--karussell) .rad-lslider__desc{color:var(--vn-color-on-dark-muted)}

/* ---------- Wieder als Karussell (Kundenwunsch 30.09.2026) ----------
   Mit Zubehoer sind es fuenf Kacheln — Startseite und /leistungen/ blaettern deshalb wieder (Basisregeln oben: 3,2 Kacheln
   sichtbar, rechts bis zum Viewportrand). Die dunkle Kartenoptik der Reihe bleibt (:is-Selektoren oben). Fortschrittsbalken
   und Pfeile baut 03-leistungen.js; ohne JS bleibt das native seitliche Scrollen. Die Sektion schneidet den Ueberstand ab. */
.rad-section:has(.rad-lslider--karussell){overflow-x:clip}