/* 15-bikeinfo — Produktinfo-Seite eines Rads (Kundenwunsch 21.09.2026).
   Gegenstueck zur Kaufansicht in 14-produkte.css: hier steht die Erklaerung im Vordergrund, nicht der
   Abschluss. Deshalb grosse Bilder, Flaechenwechsel je Thema und ein Preis, der als Orientierung
   danebensteht statt als Angebot zu schreien.
   Auf .rad-dark liegen bewusst KEINE Kartenschatten — ein Weichschatten zoege auf dieser Flaeche
   Konturlinien (Banding), siehe site.css. Getragen wird dort allein von Linie und Abstand. */

.rad-binfo{--binfo-rand:clamp(18px,2vw,28px)}

/* ------------------------------------------------------------------ Kopf */
.rad-binfo__kopf{padding-block:calc(var(--rad-header-h) + clamp(24px,3vw,48px)) clamp(48px,6vw,96px)}
.rad-binfo__crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:clamp(24px,3vw,40px);
  font:500 var(--vn-text-sm)/1.4 var(--vn-font-body);color:var(--vn-color-muted)}
.rad-binfo__crumbs a{padding-block:12px;margin-block:-12px;color:var(--vn-color-muted);text-decoration:none}
@media(hover:hover){.rad-binfo__crumbs a:hover{color:var(--vn-color-fg)}}
.rad-binfo__crumbs i{font-style:normal;opacity:.5}
.rad-binfo__crumbs [aria-current]{color:var(--vn-color-fg)}

.rad-binfo__kopfraster{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:clamp(32px,4vw,64px);align-items:center}
.rad-binfo__eyebrow{margin:0;font:500 var(--vn-text-xs)/1 var(--vn-font-body);
  letter-spacing:var(--rad-ls-eyebrow);text-transform:uppercase;color:var(--vn-color-accent-text-small)}
/* site.css setzt h1 global auf Versalien — ein Modellname gehoert nicht in Grossbuchstaben. */
.rad-binfo__titel{margin:16px 0 0;text-transform:none;
  font-size:var(--rad-fs-h1);line-height:var(--rad-lh-h1);letter-spacing:var(--rad-ls-h1)}
.rad-binfo__lead{margin:clamp(16px,1.6vw,22px) 0 0;max-width:52ch;
  font:400 max(1rem,calc(18 * var(--rad-dpx)))/1.65 var(--vn-font-body);color:var(--vn-color-muted)}

.rad-binfo__zahlen{margin:clamp(24px,2.6vw,36px) 0 0;padding:clamp(20px,2vw,26px) 0 0;list-style:none;
  display:flex;flex-wrap:wrap;gap:clamp(20px,2.6vw,44px);border-top:1px solid var(--vn-color-line)}
.rad-binfo__zahlen li{display:flex;flex-direction:column;gap:4px;min-width:0}
.rad-binfo__zahlen strong{font:600 clamp(1.5rem,calc(34 * var(--rad-dpx)),2.125rem)/1 var(--vn-font-display);
  letter-spacing:var(--rad-ls-head);color:var(--vn-color-fg)}
.rad-binfo__zahlen span{font:500 var(--vn-text-sm)/1.3 var(--vn-font-body);color:var(--vn-color-muted)}

.rad-binfo__aktionen{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(14px,1.6vw,24px);
  margin-top:clamp(26px,3vw,40px)}
.rad-binfo__preis{margin:clamp(18px,2vw,26px) 0 0;display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;
  font:600 1.375rem/1.2 var(--vn-font-body);color:var(--vn-color-fg)}
.rad-binfo__preis span{font:400 var(--vn-text-micro)/1.4 var(--vn-font-body);color:var(--vn-color-muted)}

.rad-binfo__kopfbild{min-width:0}
.rad-binfo__held{display:block;width:100%;height:auto;border-radius:var(--vn-radius-lg)}

/* ----------------------------------------------------------- Ausstattung */
.rad-binfo__hinweis{margin:0;max-width:44ch;font:400 var(--vn-text-sm)/1.6 var(--vn-font-body);color:var(--vn-color-muted)}
/* Ausstattung als helle Kacheln auf dunkler Flaeche — dieselbe Machart wie die Markensektion auf /bikes/
   (Kundenwunsch 21.09.2026), nur OHNE deren Scroll-Animation: die Flaeche steht fest im Karten-Verlauf,
   nichts blendet beim Scrollen um. Die Kacheln tragen sich selbst, Schatten braucht es dafuer keinen. */
.rad-binfo__flaeche{background:linear-gradient(160deg,var(--rad-card-top) 0%,var(--rad-card-bottom) 100%)}
.rad-binfo__flaeche > *{position:relative;z-index:1}

/* Umgekehrt zur ersten Fassung (Kundenwunsch 21.09.2026): die Flaeche ist hell, der Flaechenverlauf
   steckt in den Karten. Auf heller Flaeche darf die Karte auch einen Schatten tragen — das Banding,
   das Weichschatten auf dunklem Grund erzeugen, tritt hier nicht auf. */
/* Dieselbe Kartenbreite wie vor der Teilung (Kundenwunsch 21.09.2026): schmal und eher hoch, nicht
   breit und flach. In der rechten Spalte ergibt das drei Karten nebeneinander. */
.rad-binfo__kacheln{margin:0;padding:0;list-style:none;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,228px),1fr));gap:clamp(10px,1.2vw,16px)}
.rad-binfo__kachel{display:flex;flex-direction:column;gap:10px;padding:clamp(18px,1.8vw,24px);
  border-radius:var(--vn-radius-md);min-width:0;
  background:linear-gradient(160deg,var(--rad-card-top) 0%,var(--rad-card-bottom) 100%);
  box-shadow:var(--rad-card-shadow)}
/* Das Symbol laeuft als Maske, nicht als Bild: so nimmt es die Textfarbe an und bleibt bei jeder
   Flaechenfarbe stimmig — dasselbe Verfahren wie bei den Markenlogos. */
/* Etwas groesser als zunaechst: die Symbole sind Strichzeichnungen und tragen erst ab dieser Groesse.
   Das Feld ist breiter als hoch, damit die flachen Zeichnungen (Lenker) nicht winzig geraten. */
.rad-binfo__ksymbol{display:block;width:42px;height:34px;margin-bottom:3px;
  background:var(--vn-color-paper);
  -webkit-mask:var(--symbol) left center / contain no-repeat;
  mask:var(--symbol) left center / contain no-repeat}
.rad-binfo__kname{font:500 var(--vn-text-2xs)/1 var(--vn-font-body);letter-spacing:var(--rad-ls-eyebrow);
  text-transform:uppercase;color:var(--vn-color-accent-on-dark)}
.rad-binfo__kwert{font:500 max(.9375rem,calc(17 * var(--rad-dpx)))/1.45 var(--vn-font-body);
  color:var(--vn-color-on-dark)}

.rad-binfo__teile{margin:clamp(20px,2.4vw,32px) 0 0;padding:0;list-style:none;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,420px),1fr));
  gap:0 clamp(24px,3vw,48px)}
.rad-binfo__teile li{display:flex;gap:16px;justify-content:space-between;padding:13px 0;
  border-bottom:1px solid var(--vn-color-line);font:400 var(--vn-text-sm)/1.5 var(--vn-font-body)}
.rad-binfo__teile li span:first-child{flex:0 0 auto;color:var(--vn-color-muted)}
.rad-binfo__teile li span:last-child{text-align:right;color:var(--vn-color-fg)}
.rad-binfo__fussnote{margin:clamp(20px,2.2vw,30px) 0 0;max-width:72ch;
  font:400 var(--vn-text-micro)/1.6 var(--vn-font-body);color:var(--vn-color-muted)}

/* --------------------------------------------------------------- Technik */
.rad-binfo__baender{display:flex;flex-direction:column;gap:clamp(40px,5vw,88px)}
.rad-binfo__band{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(24px,3.4vw,64px);align-items:center}
/* Jedes zweite Band spiegelt — sonst laeuft die Seite als Kolonne gleicher Bloecke durch. */
.rad-binfo__band:nth-child(even) .rad-binfo__bandbild{order:2}
.rad-binfo__band.is-ohnebild{grid-template-columns:minmax(0,1fr);max-width:62ch}
.rad-binfo__bandbild{min-width:0;border-radius:var(--vn-radius-lg);overflow:hidden;background:var(--vn-color-surface-light)}
.rad-binfo__bandbild img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.rad-binfo__bandtext{min-width:0}
.rad-binfo__bandtext h3{margin:0}
.rad-binfo__bandtext p{margin:14px 0 0;max-width:52ch;
  font:400 max(.9375rem,calc(17 * var(--rad-dpx)))/1.7 var(--vn-font-body);color:var(--vn-color-muted)}

/* ------------------------------------------------------------- Geometrie */
.rad-binfo__geozeichnung{margin-bottom:clamp(24px,3vw,40px);border-radius:var(--vn-radius-lg);overflow:hidden;
  background:#fff}
.rad-binfo__geobild{display:block;width:100%;height:auto}
/* Gedreht dargestellt (siehe inc/bike-info.php): eine Spalte je Rahmengroesse statt 18 Massspalten.
   Auf schmalen Schirmen scrollt sie trotzdem seitlich, die Massbezeichnung bleibt dabei stehen. */
.rad-binfo__tabelle{overflow-x:auto;border:1px solid var(--vn-color-line);border-radius:var(--vn-radius-md);
  background:var(--vn-color-paper);-webkit-overflow-scrolling:touch}
.rad-binfo__tabelle table{width:100%;border-collapse:collapse;
  font:400 var(--vn-text-sm)/1.4 var(--vn-font-body);white-space:nowrap}
.rad-binfo__tabelle th,.rad-binfo__tabelle td{padding:11px 16px;text-align:right;
  border-bottom:1px solid var(--vn-color-line)}
.rad-binfo__tabelle thead th{text-align:right;font:600 var(--vn-text-sm)/1.3 var(--vn-font-body);
  color:var(--vn-color-fg);background:var(--vn-color-surface-light)}
.rad-binfo__tabelle tbody th{position:sticky;left:0;text-align:left;font-weight:500;color:var(--vn-color-muted);
  background:var(--vn-color-paper);min-width:168px}
.rad-binfo__tabelle thead th:first-child{position:sticky;left:0;z-index:2;text-align:left;
  background:var(--vn-color-surface-light)}
/* Zebra: bei zwoelf Massreihen verrutscht man sonst leicht in der Zeile. */
.rad-binfo__tabelle tbody tr:nth-child(even) th,.rad-binfo__tabelle tbody tr:nth-child(even) td{
  background:color-mix(in srgb,var(--vn-color-surface-dark) 3%,var(--vn-color-paper))}
.rad-binfo__tabelle tbody tr:last-child th,.rad-binfo__tabelle tbody tr:last-child td{border-bottom:0}

/* --------------------------------------------------------------- Details */
.rad-binfo__draster{margin:0;padding:0;list-style:none;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:clamp(24px,2.6vw,40px)}
.rad-binfo__dkarte{min-width:0}
.rad-binfo__dbild{margin-bottom:16px;border-radius:var(--vn-radius-md);overflow:hidden;background:var(--vn-color-surface-light)}
.rad-binfo__dbild img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.rad-binfo__dkarte h3{margin:0;font:var(--rad-w-h3) var(--rad-fs-h3-klein)/var(--rad-lh-h3) var(--vn-font-display);letter-spacing:var(--rad-ls-h3)}
.rad-binfo__dkarte p{margin:8px 0 0;font:400 var(--vn-text-sm)/1.65 var(--vn-font-body);color:var(--vn-color-muted)}

/* ----------------------------------------------------------------- Video */
.rad-binfo__player{position:relative;border-radius:var(--vn-radius-lg);overflow:hidden;
  background:var(--vn-color-surface-dark);aspect-ratio:16/9}
.rad-binfo__player img,.rad-binfo__player iframe{display:block;width:100%;height:100%;object-fit:cover;border:0}
.rad-binfo__abspielen{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:16px;width:100%;padding:0;border:0;cursor:pointer;color:var(--vn-color-on-dark);
  background:color-mix(in srgb,var(--vn-color-surface-darker) 34%,transparent);
  font:500 var(--vn-text-nav)/1.3 var(--vn-font-body);transition:background .25s ease}
@media(hover:hover){.rad-binfo__abspielen:hover{background:color-mix(in srgb,var(--vn-color-surface-darker) 16%,transparent)}}
.rad-binfo__pfeil{width:clamp(56px,6vw,76px);aspect-ratio:1;border-radius:50%;
  background:var(--vn-color-paper);position:relative;transition:transform .25s ease}
.rad-binfo__pfeil::after{content:"";position:absolute;top:50%;left:54%;transform:translate(-50%,-50%);
  border-style:solid;border-width:11px 0 11px 18px;border-color:transparent transparent transparent var(--vn-color-ink)}
@media(hover:hover){.rad-binfo__abspielen:hover .rad-binfo__pfeil{transform:scale(1.06)}}
.rad-binfo__vhinweis{position:absolute;left:0;right:0;bottom:0;margin:0;padding:12px 16px;text-align:center;
  font:400 var(--vn-text-micro)/1.4 var(--vn-font-body);color:var(--vn-color-on-dark-muted);
  background:color-mix(in srgb,var(--vn-color-surface-darker) 72%,transparent)}
.rad-binfo__player.is-an .rad-binfo__abspielen,.rad-binfo__player.is-an .rad-binfo__vhinweis{display:none}
/* 24.09.2026 (Kundenhinweis „Video spielt nicht ab"): der Player lag im Fluss UNTER dem Vorschaubild und wurde vom
   overflow:hidden des 16:9-Rahmens abgeschnitten — man sah weiter nur das Standbild. Jetzt liegt er deckend darüber. */
.rad-binfo__player iframe{position:absolute;inset:0;z-index:2}
.rad-binfo__player.is-an img{visibility:hidden}

/* ---------------------------------------------------------------- Presse */
.rad-binfo__praster{margin:0;padding:0;list-style:none;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:clamp(20px,2.4vw,32px)}
.rad-binfo__pkarte{padding:clamp(22px,2.2vw,30px);border:1px solid var(--vn-color-line);
  border-radius:var(--vn-radius-md);background:var(--vn-color-bg)}
.rad-binfo__ptitel{margin:0 0 12px;font:600 var(--vn-text-sm)/1.35 var(--vn-font-body);color:var(--vn-color-accent-text-small)}
.rad-binfo__pkarte blockquote{margin:0;font:400 max(.9375rem,calc(16 * var(--rad-dpx)))/1.65 var(--vn-font-body);
  color:var(--vn-color-fg)}

/* ------------------------------------------------------------- Abschluss */
.rad-binfo__schlusstext{max-width:58ch}
.rad-binfo__schlusstext p{margin:16px 0 0;
  font:400 max(1rem,calc(18 * var(--rad-dpx)))/1.7 var(--vn-font-body);color:var(--vn-color-muted)}
.rad-binfo__quelle{margin:clamp(36px,4vw,56px) 0 0;padding-top:clamp(20px,2.2vw,28px);
  border-top:1px solid var(--vn-color-line);font:400 var(--vn-text-micro)/1.6 var(--vn-font-body);color:var(--vn-color-muted)}
.rad-binfo__quelle a{color:var(--vn-color-muted);text-underline-offset:3px}
@media(hover:hover){.rad-binfo__quelle a:hover{color:var(--vn-color-fg)}}

/* ----------------------------------------------------------- schmalere Schirme */
@media (max-width:1000px){
  .rad-binfo__kopfraster{grid-template-columns:minmax(0,1fr);gap:clamp(24px,4vw,36px)}
  /* Zuerst das Rad, dann der Text: auf dem Telefon soll man sofort sehen, worum es geht. */
  .rad-binfo__kopfbild{order:-1}
  .rad-binfo__band,.rad-binfo__band:nth-child(even) .rad-binfo__bandbild{grid-template-columns:minmax(0,1fr);order:0}
  .rad-binfo__band{gap:20px}
}
@media (max-width:700px){
  .rad-binfo__kopf{padding-block:calc(var(--rad-header-h-scrolled) + 20px) 40px}
  /* Jede Sektion setzt den Umbruch des Kopfes selbst — .rad-head bleibt sonst nebeneinander. */
  .rad-binfo__daten .rad-head,.rad-binfo__geo .rad-head{flex-direction:column;align-items:stretch;gap:16px}
  .rad-binfo__hinweis{max-width:none}
  .rad-binfo__zahlen{gap:18px 26px}
  .rad-binfo__aktionen{gap:14px}
  .rad-binfo__aktionen .rad-button{flex:1 1 100%;justify-content:center}
  .rad-binfo__teile li{flex-direction:column;gap:3px}
  .rad-binfo__teile li span:last-child{text-align:left}
}

/* ============================================================ Umbau 21.09.2026
   Kopfsektion mit vollflaechigem Titelbild. Darauf steht nur der Name und ein Zweizeiler; der
   ausfuehrliche Text, die Kennzahlen und die Wege zur Beratung stehen in der Sektion darunter. */
.rad-binfo__kopf.has-bild{position:relative;isolation:isolate;display:flex;align-items:flex-end;
  min-height:max(min(84vh,860px),calc(100vw / 2.1));padding-block:0 clamp(40px,5vw,72px);overflow:hidden}
.rad-binfo__titelbild{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;
  object-position:50% 46%}
/* Zwei Verlaeufe statt einer flaechigen Abdunklung: oben, damit die Kopfleiste traegt, unten als Bett
   fuer die Schrift. Das Bild bleibt in der Mitte unberuehrt.
   Der letzte Haltepunkt ist NICHT ink-900, sondern genau der Ton, mit dem die Sektion darunter beginnt
   (--rad-card-top). Dadurch treffen sich beide Flaechen in derselben Farbe und der Uebergang ist
   nahtlos — vorher stand dort eine sichtbare Kante (Kundenwunsch 21.09.2026). */
.rad-binfo__kopf.has-bild{background:var(--rad-card-top)}
.rad-binfo__kopf.has-bild::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(to bottom,
    color-mix(in srgb,var(--vn-color-surface-darker) 72%,transparent) 0%,
    color-mix(in srgb,var(--vn-color-surface-darker) 22%,transparent) 26%,
    color-mix(in srgb,var(--vn-color-surface-darker) 10%,transparent) 48%,
    color-mix(in srgb,var(--rad-card-top) 72%,transparent) 84%,
    color-mix(in srgb,var(--rad-card-top) 94%,transparent) 94%,
    var(--rad-card-top) 100%)}
.rad-binfo__kopf.has-bild .rad-shell{width:min(var(--vn-container-default),calc(100% - 2*var(--vn-gutter)))}
.rad-binfo__kopf.has-bild .rad-binfo__crumbs{position:absolute;top:calc(var(--rad-header-h) + 18px);
  left:0;right:0;margin:0 auto;width:min(var(--vn-container-default),calc(100% - 2*var(--vn-gutter)))}
.rad-binfo__kopftext{max-width:60ch}
.rad-binfo__kopf.has-bild .rad-binfo__lead{max-width:56ch;color:var(--vn-color-on-dark);
  text-shadow:0 1px 24px color-mix(in srgb,var(--vn-color-surface-darker) 60%,transparent)}

/* Einstieg: Fliesstext und Wege links, Kennzahlen als eigene Spalte rechts. */
.rad-binfo__eraster{display:grid;grid-template-columns:minmax(0,1.32fr) minmax(0,.68fr);
  gap:clamp(32px,4vw,72px);align-items:start}
.rad-binfo__fliess{margin:0;max-width:60ch;
  font:400 max(1rem,calc(18 * var(--rad-dpx)))/1.72 var(--vn-font-body);color:var(--vn-color-muted)}
.rad-binfo__einstieg .rad-binfo__aktionen{margin-top:clamp(26px,3vw,38px)}
/* Kennzahlen untereinander: als Spalte neben dem Text liest sich jede Zahl einzeln,
   nebeneinander wuerden sie in dieser Breite zusammenlaufen. */
.rad-binfo__einstieg .rad-binfo__zahlen{flex-direction:column;gap:0;margin:0;padding:0;border-top:0}
.rad-binfo__einstieg .rad-binfo__zahlen li{flex-direction:row;align-items:baseline;
  justify-content:space-between;gap:18px;padding:15px 0;border-bottom:1px solid var(--vn-color-line)}
.rad-binfo__einstieg .rad-binfo__zahlen li:first-child{padding-top:0}
.rad-binfo__einstieg .rad-binfo__zahlen li:last-child{border-bottom:0}
.rad-binfo__einstieg .rad-binfo__zahlen span{order:-1;font-size:var(--vn-text-sm)}

@media (max-width:1000px){
  .rad-binfo__eraster{grid-template-columns:minmax(0,1fr);gap:28px}
  .rad-binfo__einstieg .rad-binfo__zahlen{flex-direction:row;flex-wrap:wrap;gap:18px 32px;
    padding-top:22px;border-top:1px solid var(--vn-color-line)}
  .rad-binfo__einstieg .rad-binfo__zahlen li{flex-direction:column;justify-content:flex-start;
    gap:4px;padding:0;border-bottom:0}
  .rad-binfo__einstieg .rad-binfo__zahlen span{order:1}
}
@media (max-width:700px){
  /* Hochkant braucht der Kopf weniger Hoehe, sonst schiebt das Bild den Text aus dem Bild. */
  .rad-binfo__kopf.has-bild{min-height:max(74vh,calc(100vw / 0.92));padding-bottom:32px}
  .rad-binfo__titelbild{object-position:50% 42%}
  .rad-binfo__kopf.has-bild .rad-binfo__crumbs{top:calc(var(--rad-header-h) + 26px)}   /* 01.10.2026: unter dem Wappen, nicht dahinter */
}

/* ------------------------------------------------------------- Diagramm
   Messkurven des Herstellers, neu gezeichnet als SVG: bei jeder Groesse scharf, Beschriftung als echter
   Text, Farben aus der Palette. Die Linien zeichnen sich beim Hereinscrollen von links nach rechts.
   Hierarchie ueber die Farbe: das beworbene Rad in Gold, die Vergleiche zurueckgenommen. */
.rad-dia{--dia-held:var(--vn-color-accent-on-dark);--dia-vergleich:color-mix(in srgb,var(--vn-color-on-dark) 72%,transparent);
  --dia-alt:color-mix(in srgb,var(--vn-color-on-dark) 34%,transparent)}
.rad-dia__kopf h3{margin:0;font-size:clamp(1.375rem,calc(34 * var(--rad-dpx)),2.125rem)}
.rad-dia__kopf p{margin:12px 0 0;max-width:56ch;
  font:400 max(.9375rem,calc(17 * var(--rad-dpx)))/1.65 var(--vn-font-body);color:var(--vn-color-muted)}
/* Auf dem Schreibtisch nimmt die Grafik nicht mehr die volle Schalenbreite ein (Kundenwunsch
   21.09.2026) — sie wirkt sonst wie ein Datenblatt statt wie ein Beleg zum Text daneben. Damit rechts
   daneben keine leere Flaeche stehen bleibt, ruecken Titel, Erklaerung und Legende in eine eigene
   Spalte davor. Auf schmalen Schirmen laeuft alles wieder untereinander, dort zaehlt die Breite. */
.rad-dia{display:grid;grid-template-columns:minmax(0,.4fr) minmax(0,.6fr);
  gap:clamp(24px,3vw,56px);align-items:center}
.rad-dia__flaeche{grid-column:2;grid-row:1 / span 3;margin:0;min-width:0}
.rad-dia__bild{display:block;width:100%;height:auto;overflow:visible}
.rad-dia__kopf{grid-column:1;align-self:end}
.rad-dia__legende{grid-column:1;align-self:start}
.rad-dia__quelle{grid-column:1;align-self:start}

.rad-dia__gitter line{stroke:color-mix(in srgb,var(--vn-color-on-dark) 13%,transparent);stroke-width:1}
.rad-dia__gitter line.is-achse{stroke:color-mix(in srgb,var(--vn-color-on-dark) 34%,transparent)}
/* Etwas groesser als zuvor: die Grafik selbst ist schmaler geworden, die Beschriftung soll dabei
   lesbar bleiben (sie skaliert mit dem viewBox mit). */
.rad-dia__mass{fill:var(--vn-color-muted);font:500 20px/1 var(--vn-font-body)}
.rad-dia__achse{fill:var(--vn-color-on-dark);font:600 22px/1 var(--vn-font-body)}

/* Das Koordinatensystem baut sich zuerst auf: die Achsen wachsen aus dem Nullpunkt, danach ziehen die
   Gitterlinien nach, zuletzt erscheint die Beschriftung. Erst dann laufen die Kurven los (siehe unten).
   pathLength="1" macht die Laufzeit unabhaengig von der tatsaechlichen Linienlaenge. */
[data-diagramm] .rad-dia__gitter line{stroke-dasharray:1;stroke-dashoffset:1}
[data-diagramm] .rad-dia__mass{opacity:0}
/* Die Staffelung braucht denselben Element-Selektor wie die Sammelregel darueber — sonst ist jene
   spezifischer und setzt die Verzoegerung wieder auf null, das Gitter erschiene auf einen Schlag. */
[data-diagramm].is-an .rad-dia__gitter line{stroke-dashoffset:0;
  transition:stroke-dashoffset 620ms var(--vn-ease-out)}
[data-diagramm].is-an .rad-dia__gitter line.rad-dia__waag{transition-delay:calc(240ms + var(--nr) * 55ms)}
[data-diagramm].is-an .rad-dia__gitter line.rad-dia__senk{transition-delay:calc(300ms + var(--nr) * 45ms)}
[data-diagramm].is-an .rad-dia__gitter line.is-achse{transition-delay:0ms}
[data-diagramm].is-an .rad-dia__mass{opacity:1;
  transition:opacity 420ms var(--vn-ease-out);transition-delay:calc(560ms + var(--nr) * 40ms)}

/* KEIN vector-effect:non-scaling-stroke — es rechnet stroke-dasharray in Bildschirmpixeln statt in
   pathLength-Einheiten und schneidet die Linien dadurch mitten im Verlauf ab. Die Strichstaerke
   skaliert stattdessen mit der Grafik, was hier ohnehin das ruhigere Bild ergibt. */
/* Schmaler als zuvor und mit einem Schein in der eigenen Farbe (SVG-Filter, siehe inc/bike-info.php).
   Der Schein sitzt unter der Linie, nicht darum herum — dadurch leuchtet sie, statt einen Rand zu tragen. */
.rad-dia__linie{stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.rad-dia__linie.is-held{stroke:var(--dia-held);stroke-width:3.2}
.rad-dia__linie.is-vergleich{stroke:var(--dia-vergleich);stroke-width:2.4}
.rad-dia__linie.is-alt{stroke:var(--dia-alt);stroke-width:2.2;stroke-dasharray:.007 .011}
.rad-dia__punkt{r:5}
.rad-dia__punkt.is-held{fill:var(--dia-held)}
.rad-dia__punkt.is-vergleich{fill:var(--dia-vergleich)}
.rad-dia__punkt.is-alt{fill:var(--dia-alt)}

/* Ruhezustand: Linien noch nicht gezeichnet. pathLength="1" macht die Laenge unabhaengig von der
   tatsaechlichen Pfadlaenge — dadurch brauchen alle drei gleich lang, egal wie weit sie reichen.
   Die gestrichelte Alt-Linie kann kein Dash-Verfahren nutzen (ihr Muster ist schon ein Dash),
   sie blendet stattdessen ein. */
[data-diagramm] .rad-dia__linie:not(.is-alt){stroke-dasharray:1;stroke-dashoffset:1}
[data-diagramm] .rad-dia__linie.is-alt,[data-diagramm] .rad-dia__punkt{opacity:0}
/* 900 ms Vorlauf: so lange baut sich das Koordinatensystem auf. */
[data-diagramm].is-an .rad-dia__linie:not(.is-alt){stroke-dashoffset:0;
  transition:stroke-dashoffset 1500ms var(--vn-ease-out);transition-delay:calc(900ms + var(--nr) * 260ms)}
[data-diagramm].is-an .rad-dia__linie.is-alt{opacity:1;
  transition:opacity 900ms var(--vn-ease-out);transition-delay:calc(900ms + var(--nr) * 260ms)}
[data-diagramm].is-an .rad-dia__punkt{opacity:1;
  transition:opacity 500ms var(--vn-ease-out);transition-delay:calc(900ms + var(--nr) * 260ms + 1250ms)}

.rad-dia__legende{margin:clamp(20px,2.2vw,28px) 0 0;padding:0;list-style:none;display:grid;
  grid-template-columns:minmax(0,1fr);gap:clamp(12px,1.4vw,18px)}
.rad-dia__legende li{display:grid;grid-template-columns:26px 1fr;gap:4px 12px;align-items:center}
.rad-dia__strich{grid-row:span 2;width:26px;height:4px;border-radius:2px;background:var(--dia-vergleich)}
.rad-dia__legende .is-held .rad-dia__strich{background:var(--dia-held);height:5px}
.rad-dia__legende .is-alt .rad-dia__strich{background:repeating-linear-gradient(90deg,
  var(--dia-alt) 0 5px,transparent 5px 9px)}
.rad-dia__lname{align-self:end;font:600 max(.9375rem,calc(17 * var(--rad-dpx)))/1.2 var(--vn-font-body);
  color:var(--vn-color-fg)}
.rad-dia__lwert{align-self:start;font:400 var(--vn-text-sm)/1.3 var(--vn-font-body);color:var(--vn-color-muted)}
.rad-dia__quelle{margin:clamp(20px,2.2vw,28px) 0 0;
  font:400 var(--vn-text-micro)/1.5 var(--vn-font-body);color:var(--vn-color-muted)}

@media (max-width:1000px){
  .rad-dia{grid-template-columns:minmax(0,1fr)}
  .rad-dia__flaeche{grid-column:1;grid-row:auto;margin-top:clamp(20px,3vw,32px)}
  .rad-dia__kopf,.rad-dia__legende,.rad-dia__quelle{grid-column:1}
  .rad-dia__legende{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
}
@media (max-width:700px){
  /* Die Schrift steht in viewBox-Einheiten und schrumpft mit der Grafik mit. Auf dem Telefon ist die
     Grafik nur noch ein gutes Drittel so breit wie am Schreibtisch — ohne kraeftige Anhebung waere die
     Beschriftung dort keine 9 Pixel hoch. */
  .rad-dia__mass{font-size:34px}
  .rad-dia__achse{font-size:36px}
  /* Der gedrehte Achsentitel entfaellt: er braucht Platz, den die groesseren Zahlen benoetigen — und die
     Einheit steht ohnehin an jeder Zahl. Die waagrechte Achse behaelt ihren Titel. */
  .rad-dia__bild .rad-dia__achse[transform]{display:none}
  .rad-dia__legende li{grid-template-columns:22px 1fr}
}
@media (prefers-reduced-motion:reduce){
  /* Sofort fertig gezeichnet — die Aussage steht, nicht die Bewegung. */
  [data-diagramm] .rad-dia__linie,[data-diagramm] .rad-dia__gitter line{stroke-dashoffset:0}
  [data-diagramm] .rad-dia__linie.is-alt,[data-diagramm] .rad-dia__punkt,
  [data-diagramm] .rad-dia__mass{opacity:1}
  [data-diagramm] .rad-dia__linie,[data-diagramm] .rad-dia__punkt,
  [data-diagramm] .rad-dia__gitter line,[data-diagramm] .rad-dia__mass{transition:none}
}


/* Der Buchstabe verknuepft die Tabellenzeile mit der Zeichnung darueber (Treks eigene Zuordnung). */
.rad-binfo__zeichen{display:inline-grid;place-items:center;width:22px;height:22px;margin-right:10px;
  border-radius:50%;background:var(--vn-color-surface-dark);color:var(--vn-color-on-dark);
  font:600 var(--vn-text-2xs)/1 var(--vn-font-body);vertical-align:middle}
/* Groesse der Geometriezeichnung (Kundenwunsch 21.09.2026). Sie ist eine Uebersicht, kein Messmittel —
   in voller Breite stand sie fast bildschirmhoch da, bevor die Tabelle mit den eigentlichen Werten
   ueberhaupt begann. Die Staffelung steht bewusst NACH der Grundregel, sonst ueberschriebe diese die
   engeren Werte wieder (gleiche Spezifitaet, spaeter im Dokument gewinnt). */
.rad-binfo__geozeichnung{max-width:min(100%,620px);margin-inline:auto}
@media (max-width:1000px){
  .rad-binfo__geozeichnung{max-width:min(100%,500px)}
}
@media (max-width:700px){
  .rad-binfo__geozeichnung{max-width:min(100%,340px)}
}


/* Nahtstelle Kopfbild -> Einstieg (Kundenwunsch 21.09.2026).
   Der Flaechenverlauf der Sektion laeuft schraeg (160°, wie in der Markensektion) und ist deshalb an
   der rechten Oberkante bereits deutlich dunkler als an der linken. Der Kopf darueber endet aber ueber
   die ganze Breite im selben Ton — genau daraus entstand die sichtbare Kante.
   Dieser Schleier legt den Startton noch einmal waagrecht ueber die Oberkante und blendet ihn nach
   unten in den schraegen Verlauf aus. Die Sektion behaelt ihren Verlauf, die Naht verschwindet. */
.rad-binfo__einstieg{position:relative;isolation:isolate}
.rad-binfo__einstieg::before{content:"";position:absolute;inset:0 0 auto 0;z-index:-1;height:min(46%,260px);
  pointer-events:none;
  background:linear-gradient(to bottom,var(--rad-card-top) 0%,
    color-mix(in srgb,var(--rad-card-top) 62%,transparent) 42%,transparent 100%)}

/* ------------------------------------------------- Ausstattung, zweigeteilt (21.09.2026)
   Links die Aufnahmen zum Oeffnen, rechts die Ausstattung. Das loest den frueheren Bildslider ab:
   Bilder, die man ansehen WILL, klickt man an — sie muessen nicht von selbst vorbeiziehen. */
.rad-binfo__split{display:grid;grid-template-columns:minmax(0,.44fr) minmax(0,.56fr);
  gap:clamp(24px,3vw,56px);align-items:start}

.rad-binfo__bilder{margin:0;padding:0;list-style:none;display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(10px,1.2vw,16px)}
.rad-binfo__bild{position:relative;display:block;width:100%;padding:0;border:0;cursor:zoom-in;
  border-radius:var(--vn-radius-md);overflow:hidden;background:#fff;aspect-ratio:4/3;
  box-shadow:var(--rad-card-shadow)}
.rad-binfo__bild img{display:block;width:100%;height:100%;object-fit:cover;
  transition:transform var(--vn-d-slow) var(--vn-ease-out)}
@media(hover:hover){.rad-binfo__bild:hover img{transform:scale(1.04)}}
.rad-binfo__bild:focus-visible{outline:2px solid var(--vn-color-accent);outline-offset:3px}
/* Lupe als Hinweis, dass sich hier etwas oeffnet — erst beim Daraufzeigen, damit sie das Bild nicht verdeckt. */
.rad-binfo__lupe-zeichen{position:absolute;right:10px;bottom:10px;width:30px;height:30px;border-radius:50%;
  background:color-mix(in srgb,var(--vn-color-surface-darker) 68%,transparent);opacity:0;
  transition:opacity var(--vn-d-medium) var(--vn-ease-out)}
.rad-binfo__lupe-zeichen::before,.rad-binfo__lupe-zeichen::after{content:"";position:absolute;
  background:var(--vn-color-paper)}
.rad-binfo__lupe-zeichen::before{left:9px;top:14px;width:12px;height:2px;border-radius:1px}
.rad-binfo__lupe-zeichen::after{left:14px;top:9px;width:2px;height:12px;border-radius:1px}
.rad-binfo__bild:focus-visible .rad-binfo__lupe-zeichen{opacity:1}
@media(hover:hover){.rad-binfo__bild:hover .rad-binfo__lupe-zeichen{opacity:1}}

.rad-binfo__daten-spalte{min-width:0}
.rad-binfo__daten .rad-binfo__teile li span:last-child{color:var(--vn-color-fg)}

/* ------------------------------------------------------------------ Grossansicht */
.rad-binfo__gross{width:min(94vw,1180px);max-width:none;max-height:92vh;padding:0;border:0;
  background:transparent;color:var(--vn-color-on-dark);overflow:visible}
.rad-binfo__gross::backdrop{background:color-mix(in srgb,var(--vn-color-surface-darker) 88%,transparent)}
.rad-binfo__gross-feld{margin:0;display:flex;flex-direction:column;gap:14px}
.rad-binfo__gross-bild{display:block;width:100%;max-height:78vh;object-fit:contain;
  border-radius:var(--vn-radius-md);background:#fff}
.rad-binfo__gross-text{text-align:center;font:500 var(--vn-text-sm)/1.4 var(--vn-font-body);
  color:var(--vn-color-on-dark-muted)}
.rad-binfo__gross-knopf,.rad-binfo__gross-zu{position:absolute;z-index:2;display:grid;place-items:center;
  padding:0;border:0;cursor:pointer;border-radius:50%;color:var(--vn-color-on-dark);
  background:color-mix(in srgb,var(--vn-color-surface-darker) 64%,transparent);
  transition:background var(--vn-d-medium) var(--vn-ease-out)}
.rad-binfo__gross-knopf{top:calc(50% - 30px);width:clamp(42px,4vw,54px);aspect-ratio:1}
.rad-binfo__gross-knopf--zurueck{left:clamp(-8px,-1vw,0px);translate:-50% 0}
.rad-binfo__gross-knopf--vor{right:clamp(-8px,-1vw,0px);translate:50% 0}
.rad-binfo__gross-knopf--zurueck .rad-arrow{rotate:180deg}
.rad-binfo__gross-zu{top:-14px;right:-14px;width:42px;height:42px}
.rad-binfo__gross-zu::before,.rad-binfo__gross-zu::after{content:"";position:absolute;
  width:17px;height:2px;border-radius:1px;background:currentColor}
.rad-binfo__gross-zu::before{rotate:45deg}
.rad-binfo__gross-zu::after{rotate:-45deg}
@media(hover:hover){.rad-binfo__gross-knopf:hover,.rad-binfo__gross-zu:hover{background:var(--vn-color-surface-darker)}}
.rad-binfo__gross-knopf:focus-visible,.rad-binfo__gross-zu:focus-visible{
  outline:2px solid var(--vn-color-accent-on-dark);outline-offset:3px}

@media (max-width:900px){
  /* Untereinander: zwei schmale Spalten liessen weder die Bilder noch die Werte zur Geltung kommen. */
  .rad-binfo__split{grid-template-columns:minmax(0,1fr);gap:28px}
  .rad-binfo__bilder{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:560px){
  .rad-binfo__bilder{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rad-binfo__gross{width:96vw}
  .rad-binfo__gross-zu{top:-12px;right:0}
  .rad-binfo__gross-knopf{top:auto;bottom:-6px;translate:0 0}
  .rad-binfo__gross-knopf--zurueck{left:8px}
  .rad-binfo__gross-knopf--vor{right:8px}
}