/* 13-ratgeber — Ratgeber-Übersicht, Kategorieseiten (templates/home.html, category.html) und Beitrag (single.html).
   Umbau 19.09.2026 nach dem Vorbild bwhaustechnik.at/ratgeber/, übersetzt ins Das-Rad-Design:
   dunkler Seitenkopf, klebende Pillenleiste, ein breiter „Aktueller Beitrag“, darunter das Kartenraster.
   Markup entsteht in inc/ratgeber.php, nicht in den Vorlagen. */

/* Inhaltsbreite des Ratgebers (Kundenentscheidung 19.09.2026, „spuerbar mehr Rand"): 1200 statt 1460 px.
   Die Uebersicht rueckt damit deutlich vom Fensterrand weg und wirkt mit der Beitragsseite verwandt, behaelt
   aber ein mehrspaltiges Raster. Der Seitenrand muss mitgesetzt werden — .rad-shell rechnet aus BEIDEN Werten,
   und --vn-gutter wird auf :root mit der dortigen Breite (1460) aufgeloest. */
.rad-bhero,.rad-rchips,.rad-rlist,.rad-rmehr,
.rad-phead,.rad-ptitel,.rad-pbild,.rad-post,.rad-pautor{
  --vn-container-default:1200px;
  --vn-gutter:max(40px,calc((100vw - 1200px) / 2))}
@media(max-width:1000px){
  .rad-bhero,.rad-rchips,.rad-rlist,.rad-rmehr,
  .rad-phead,.rad-ptitel,.rad-pbild,.rad-post,.rad-pautor{--vn-gutter:32px}
}
@media(max-width:650px){
  .rad-bhero,.rad-rchips,.rad-rlist,.rad-rmehr,
  .rad-phead,.rad-ptitel,.rad-pbild,.rad-post,.rad-pautor{--vn-gutter:20px}
}

/* ---------- Seitenkopf (Übersicht + Kategorie) ---------- */
.rad-bhero{position:relative;padding:calc(var(--rad-header-h) + 72px) 0 max(56px,calc(72 * var(--rad-dpx)))}
.rad-bhero__crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 22px;font:400 var(--vn-text-sm)/1.4 var(--vn-font-body);color:var(--vn-color-on-dark-muted)}
.rad-bhero__crumbs a{padding-block:12px;margin-block:-12px;color:inherit;text-decoration:none}
@media(hover:hover){.rad-bhero__crumbs a:hover{color:var(--vn-color-on-dark)}}
.rad-bhero__crumbs i{font-style:normal;opacity:.6}
.rad-bhero__title{margin:0;max-width:14em;text-transform:none;font:var(--rad-w-display) var(--rad-fs-h1)/var(--rad-lh-h1) var(--vn-font-display);letter-spacing:var(--rad-ls-h1);color:var(--vn-color-on-dark);text-wrap:balance}
.rad-bhero__lead{margin:20px 0 0;max-width:38em;font:400 var(--vn-text-base)/1.65 var(--vn-font-body);color:color-mix(in srgb,var(--vn-color-on-dark) 86%,transparent);text-wrap:pretty}

/* ---------- Kategorieleiste ----------
   Klebt unter dem gescrollten Kopf. Der Balken darüber verdeckt die durchlaufenden Karten erst,
   sobald die Leiste wirklich klebt — sonst läge über dem Seitenkopf eine helle Fläche. */
.rad-rchips{position:sticky;top:var(--rad-header-h-scrolled);z-index:3;background:var(--vn-color-paper);padding:18px 0}
.rad-rchips::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:var(--rad-header-h-scrolled);background:var(--vn-color-paper);opacity:0;transition:opacity var(--vn-d-snap);pointer-events:none}
.rad-rchips.is-fest::before{opacity:1}
.rad-rchips::after{content:"";position:absolute;left:0;right:0;top:100%;height:1px;background:var(--vn-color-divider-light);opacity:0;transition:opacity var(--vn-d-snap)}
.rad-rchips.is-fest::after{opacity:1}
.rad-rchips__spur{width:min(var(--vn-container-default),calc(100% - 2*var(--vn-gutter)));margin-inline:auto;display:flex;gap:10px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.rad-rchips__spur::-webkit-scrollbar{display:none}
.rad-rchip{flex:0 0 auto;display:inline-flex;align-items:center;min-height:42px;padding:0 20px;border-radius:var(--vn-radius-full);border:1px solid var(--vn-color-divider-light);background:transparent;color:var(--vn-color-ink);font:500 var(--vn-text-sm)/1.2 var(--vn-font-body);text-decoration:none;white-space:nowrap;transition:background var(--vn-d-snap),border-color var(--vn-d-snap),color var(--vn-d-snap)}
@media(hover:hover){.rad-rchip:hover{border-color:var(--vn-color-ink)}}
.rad-rchip.is-aktiv{background:var(--vn-color-surface-dark);border-color:var(--vn-color-ink);color:var(--vn-color-on-dark)}

/* ---------- Liste ---------- */
.rad-rlist{padding-block:max(32px,calc(var(--vn-section-y) * .5)) var(--vn-section-y)}
.rad-rlist__gross,.rad-rlist__grid{margin:0;padding:0;list-style:none}
.rad-rlist__gross{margin-bottom:clamp(24px,3vw,40px)}
.rad-rlist__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.4vw,22px);--rad-stagger:60ms}

/* ---------- Beitragskarte ---------- */
.rad-rcard{display:flex;border-radius:var(--vn-radius-lg);overflow:hidden;background:#fff;box-shadow:var(--rad-card-shadow)}
.rad-rcard__link{display:flex;flex-direction:column;width:100%;color:inherit;text-decoration:none}
/* 3:2 statt 4:3 (19.09.2026): die Kacheln sollen kompakter sein, damit mehr Beitraege ins Bild passen. */
.rad-rcard__media{position:relative;display:flex;flex:0 0 auto;aspect-ratio:3/2;overflow:hidden;background:var(--vn-color-surface-light)}
.rad-rcard__media img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1400ms var(--vn-ease-out)}
@media(hover:hover){.rad-rcard__link:hover .rad-rcard__media img{transform:scale(1.05)}}
.rad-rcard__platzhalter{display:grid;place-items:center;width:100%;height:100%;background:var(--vn-color-surface-dark)}
.rad-rcard__platzhalter img{width:auto;height:46%;max-height:96px;object-fit:contain;opacity:.5;transform:none!important}
.rad-rcard__body{display:flex;flex:1 1 auto;flex-direction:column;gap:8px;padding:clamp(16px,1.15vw,20px)}
.rad-rcard__oben{display:flex;align-items:center;gap:12px}
.rad-rcard__kat{font:600 .625rem/1.2 var(--vn-font-body);letter-spacing:.09em;text-transform:uppercase;color:var(--vn-color-accent-ink)}
.rad-rcard__neu{font:400 .6875rem/1.2 var(--vn-font-body);letter-spacing:.04em;color:var(--vn-color-ink-muted)}
.rad-rcard__titel{font:600 max(.9375rem,calc(17 * var(--rad-dpx)))/1.32 var(--vn-font-body);letter-spacing:-.01em;color:var(--vn-color-ink);text-wrap:balance;transition:color var(--vn-d-snap)}
@media(hover:hover){.rad-rcard__link:hover .rad-rcard__titel{color:var(--vn-color-accent-ink)}}
.rad-rcard__text{-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word;font:400 max(.8125rem,calc(13.5 * var(--rad-dpx)))/1.55 var(--vn-font-body);color:var(--vn-color-ink-muted);
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.rad-rcard__fuss{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding-top:12px}
.rad-rcard__meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font:400 .75rem/1.3 var(--vn-font-body);color:var(--vn-color-ink-muted)}
.rad-rcard__meta i{font-style:normal;opacity:.5}
/* Markenzeichen in der Fusszeile (Kundenwunsch 20.09.2026): sie zeigen auf einen Blick, dass die Strecke zum
   Mitnehmen hinterlegt ist. Nur das Zeichen, kein Text — die Kachel ist schmal, und der Beitrag sagt den Rest. */
.rad-rcard__dienste{display:inline-flex;align-items:center;gap:6px;margin-left:auto;flex:0 0 auto}
.rad-rcard__dienst{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;
  background:color-mix(in srgb,var(--rad-marke) 12%,transparent)}
.rad-rcard__dienst svg{width:13px;height:13px;fill:var(--rad-marke)}
.rad-rcard__dienst--komoot{--rad-marke:#6AA127}
.rad-rcard__dienst--strava{--rad-marke:#FC4C02}
.rad-rcard__mehr{display:inline-flex;align-items:center;gap:8px;font:600 var(--vn-text-sm)/1.2 var(--vn-font-body);color:var(--vn-color-accent-ink);white-space:nowrap}
/* In der breiten Karte steht rechts schon „Beitrag lesen" — die Zeichen ruecken dann davor statt ganz nach rechts. */
.rad-rcard--breit .rad-rcard__dienste{margin-left:0}
.rad-rcard--breit .rad-rcard__mehr{margin-left:auto}
.rad-rcard__mehr .rad-arrow{width:20px;height:20px;transition:transform var(--vn-d-snap)}
@media(hover:hover){.rad-rcard__link:hover .rad-rcard__mehr .rad-arrow{transform:translateX(4px)}}

/* Der hervorgehobene Beitrag: Bild links, Text rechts, Bild trägt die halbe Breite. */
.rad-rcard--breit .rad-rcard__link{flex-direction:row;align-items:stretch}
.rad-rcard--breit .rad-rcard__media{flex:0 0 46%;aspect-ratio:auto}
.rad-rcard--breit .rad-rcard__body{gap:14px;padding:clamp(24px,3vw,48px);justify-content:center}
.rad-rcard--breit .rad-rcard__titel{font:var(--rad-w-display) clamp(1.5rem,calc(36 * var(--rad-dpx)),2.25rem)/1.15 var(--vn-font-display);letter-spacing:-.02em}
.rad-rcard--breit .rad-rcard__text{font:400 var(--vn-text-base)/1.65 var(--vn-font-body)}

.rad-rlist__leer{max-width:38em;padding:clamp(28px,3vw,44px);border-radius:var(--vn-radius-lg);background:#fff;margin:0;font:400 var(--vn-text-base)/1.7 var(--vn-font-body);color:var(--vn-color-ink-muted)}

/* ---------- Seitenzahlen ---------- */
.rad-rpager{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;margin-top:clamp(32px,4vw,56px);padding-top:28px;border-top:1px solid var(--vn-color-divider-light)}
.rad-rpager a,.rad-rpager span{display:inline-flex;align-items:center;gap:8px;min-width:44px;min-height:44px;padding:0 14px;justify-content:center;border-radius:var(--vn-radius-full);font:500 var(--vn-text-sm)/1.2 var(--vn-font-body);color:var(--vn-color-ink);text-decoration:none;transition:background var(--vn-d-snap),color var(--vn-d-snap)}
@media(hover:hover){.rad-rpager a:hover{background:color-mix(in srgb,var(--vn-color-surface-dark) 8%,transparent)}}
.rad-rpager .current{background:var(--vn-color-surface-dark);color:var(--vn-color-on-dark)}
.rad-rpager .dots{min-width:0;padding:0 4px;color:var(--vn-color-ink-muted)}
.rad-rpager .rad-arrow{width:20px;height:20px}

/* ---------- Beitrag: Kopf ----------
   19.09.2026 (Kundenwunsch): Die Ueberschrift steht in der hellen Flaeche. Oben bleibt ein schmales dunkles Band
   mit Brotkrume und Kategoriechip; Titel und Autorzeile folgen darunter auf Textbreite, buendig mit Bild und Text. */
.rad-phead{padding:calc(var(--rad-header-h) + 40px) 0 max(28px,calc(40 * var(--rad-dpx)))}
/* Brotkrume und Chip laufen auf derselben Textbreite wie Titel, Bild und Fliesstext — sonst springt die linke
   Kante zwischen dunklem Band und heller Flaeche. */
.rad-phead .rad-shell{max-width:min(var(--vn-container-default),46rem)}
.rad-phead__kat{display:inline-flex;align-items:center;min-height:32px;padding:0 14px;margin:18px 0 0;border-radius:var(--vn-radius-full);border:1px solid var(--vn-color-divider-dark);color:var(--vn-color-accent-on-dark);font:600 .6875rem/1.2 var(--vn-font-body);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;transition:border-color var(--vn-d-snap)}
@media(hover:hover){.rad-phead__kat:hover{border-color:var(--vn-color-accent-on-dark)}}

.rad-ptitel{background:var(--vn-color-paper);padding-block:clamp(36px,4.5vw,64px) clamp(24px,2.6vw,36px)}
.rad-ptitel .rad-shell{max-width:min(var(--vn-container-default),46rem)}
.rad-ptitel__title{margin:0;text-transform:none;font:var(--rad-w-display) var(--rad-fs-h1)/var(--rad-lh-h1) var(--vn-font-display);letter-spacing:var(--rad-ls-h1);color:var(--vn-color-ink);text-wrap:balance}
.rad-ptitel__meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:20px 0 0;font:400 var(--vn-text-sm)/1.4 var(--vn-font-body);color:var(--vn-color-ink-muted)}
.rad-ptitel__meta i{font-style:normal;opacity:.5}
.rad-ptitel__autor{color:var(--vn-color-ink)}
/* Ohne Beitragsbild folgt der Text direkt auf die Autorzeile — dann darf zwischen beiden nicht der Abstand
   stehen, der sonst das Bild umgibt. Der Geschwisterselektor greift nur, wenn wirklich kein Bild dazwischenliegt. */
.rad-ptitel + .rad-post{padding-block-start:clamp(6px,1vw,14px)}

/* Das Bild steht seit dem 19.09.2026 unter der Ueberschrift und damit ganz in der hellen Flaeche — die frühere
   Ueberlappung auf die dunkle Kante ist damit hinfaellig. */
.rad-pbild{background:var(--vn-color-paper);padding-bottom:clamp(8px,1vw,16px)}
/* 19.09.2026 (Kundenwunsch): Das Bild stand ueber die volle Shell-Breite und wurde vom festen 16:9 oben und unten
   beschnitten — bei einem freigestellten Rad ist das besonders auffaellig. Jetzt Textbreite, eigenes Seitenverhaeltnis
   und eine Hoehengrenze: width:auto statt 100 %, damit nie gestaucht und nie beschnitten wird. */
.rad-pbild .rad-shell{max-width:min(var(--vn-container-default),46rem)}
.rad-post{padding-block:clamp(24px,3vw,40px) var(--vn-section-y)}
/* 20.09.2026 (Kundenwunsch): Das Bild fuellt den Container vollstaendig — kein weisser Rahmen mehr. Die Hoehe
   gibt ein festes Seitenverhaeltnis vor, den Ausschnitt uebernimmt object-fit. Der Nachweis steht darunter,
   deshalb bleibt die Figur eine Spalte. */
.rad-pbild__figur{position:relative;margin:0;display:flex;flex-direction:column;
  border-radius:var(--vn-radius-lg);overflow:hidden;isolation:isolate;will-change:transform}
.rad-pbild__img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;
  border-radius:var(--vn-radius-lg)}

/* ---------- Beitrag: Fließtext ---------- */
.rad-post{padding-block:clamp(32px,4vw,56px) var(--vn-section-y)}
.rad-post .rad-shell{max-width:min(var(--vn-container-default),46rem)}
.rad-post__text{font:400 var(--vn-text-base)/1.75 var(--vn-font-body);color:var(--vn-color-ink)}
/* Die Abstaende brauchen die Sektionsklasse davor und margin-block-start statt margin-top: der Block-Editor gibt
   fuer .is-layout-flow eigene Randregeln aus, die sonst gewinnen und alle Absaetze aneinanderkleben lassen. */
.rad-post .rad-post__text>*+*{margin-block-start:1.15em}
.rad-post .rad-post__text>h2{margin-block-start:1.9em;text-transform:none;font:var(--rad-w-display) var(--rad-fs-h2-klein)/var(--rad-lh-h2-klein) var(--vn-font-display);letter-spacing:var(--rad-ls-h3);text-wrap:balance}
.rad-post .rad-post__text>h3{margin-block-start:1.7em;font:600 max(1.0625rem,calc(20 * var(--rad-dpx)))/1.35 var(--vn-font-body)}
.rad-post__text a{color:var(--vn-color-accent-ink);text-underline-offset:3px}
/* In den dunklen Bausteinen im Fliesstext gilt die Linkfarbe fuer helle Flaechen nicht — sonst steht der
   Telefonlink in der Handlungsaufforderung im dunklen Gold auf dunklem Grund, und das Aufleuchten der
   Radkacheln verschwindet im Verlauf. Die Regel schlaegt .rad-post__text a, ohne !important zu brauchen. */
.rad-post__text :is(.rad-pcta,.rad-tdaten,.rad-tourlinks) a{color:var(--vn-color-accent-on-dark)}
.rad-post__text .rad-pcta .rad-button{color:var(--vn-color-ink)}
.rad-post__text .rad-tdaten .rad-tdaten__rad{color:var(--vn-color-on-dark)}
.rad-post .rad-post__text ul,.rad-post .rad-post__text ol{padding-left:1.35em;list-style-position:outside}
.rad-post .rad-post__text ul{list-style-type:disc}
.rad-post .rad-post__text ol{list-style-type:decimal}
.rad-post .rad-post__text li+li{margin-block-start:.55em}
.rad-post__text li::marker{color:var(--vn-color-accent-strong)}
.rad-post__text img{display:block;width:100%;height:auto;border-radius:var(--vn-radius-md)}
.rad-post__text figcaption{margin-top:10px;font:400 .8125rem/1.5 var(--vn-font-body);color:var(--vn-color-ink-muted)}

/* Merksatz: der eine Satz, der hängen bleiben soll. Kein Zitat — deshalb keine Anführungszeichen.
   19.09.2026 (Kundenwunsch): als Bentobox mit Flächenverlauf, wie die übrigen dunklen Karten der Seite. */
.rad-pmerk{margin-block:1.7em!important;padding:clamp(22px,2.4vw,30px);border-radius:var(--vn-radius-lg);
  background:linear-gradient(160deg,var(--rad-card-top),var(--rad-card-bottom));
  font:var(--rad-w-display) clamp(1.125rem,calc(24 * var(--rad-dpx)),1.5rem)/1.4 var(--vn-font-display);
  letter-spacing:-.015em;color:var(--vn-color-on-dark);text-wrap:pretty}

/* Handlungsaufruf mitten im Text */
/* 19.09.2026 (Kundenwunsch): derselbe Flaechenverlauf wie Merksatz und Autorenbox, kein heller Kasten mehr.
   Die Farbmarken werden mitgedreht wie in .rad-dark — sonst bliebe der Telefonlink im dunklen Gold der hellen
   Flaeche stehen und der Fokusring waere auf dem Verlauf kaum zu sehen. */
.rad-pcta{margin-block:1.8em!important;padding:clamp(22px,2.4vw,32px);border-radius:var(--vn-radius-lg);border:0;
  background:linear-gradient(160deg,var(--rad-card-top),var(--rad-card-bottom));color:var(--vn-color-on-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-pcta__text{margin:0 0 18px;font:400 var(--vn-text-base)/1.6 var(--vn-font-body);color:var(--vn-color-on-dark)}
.rad-pcta__aktionen{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px}

/* ---------- Eckdaten einer Tour ----------
   Layout 20.09.2026 nach Kundenvorlage: Kopf mit Startort und Schwierigkeitsmarke, darunter die Kennzahlen in
   einer Reihe, der Startpunkt als eigene Fläche, dann Untergrund, passendes Rad und Saison, zum Schluss der
   Hinweis als Notiz. Getrennt wird durch Abstand, nicht durch Linien. Die beweglichen Teile laufen erst, wenn
   der Kasten im Bild ist — .rad-reveal setzt dafür .is-inview. */
.rad-tdaten{margin-block:1.7em!important;padding:clamp(24px,2.6vw,34px);border-radius:var(--vn-radius-lg);
  background:linear-gradient(160deg,var(--rad-card-top),var(--rad-card-bottom));color:var(--vn-color-on-dark);
  display:flex;flex-direction:column;gap:clamp(22px,2.4vw,30px);
  /* Farbmarken wie in .rad-dark: sonst leuchtet das Aufleuchten im Gold der hellen Flaechen und verschwindet. */
  --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)}

/* Kopf: Ortsname gross, Schwierigkeit als Marke rechts */
.rad-tdaten__kopf{display:flex;align-items:flex-start;justify-content:space-between;gap:14px 24px}
.rad-tdaten__kopftext{display:flex;flex-direction:column;gap:5px;min-width:0}
.rad-tdaten__oben{margin:0!important;font:600 .6875rem/1.2 var(--vn-font-body);letter-spacing:.1em;text-transform:uppercase;color:var(--vn-color-accent-on-dark)}
.rad-tdaten__ort{margin:0!important;font:var(--rad-w-display) clamp(1.5rem,calc(32 * var(--rad-dpx)),2rem)/1.15 var(--vn-font-display);
  letter-spacing:-.02em;color:var(--vn-color-on-dark);text-wrap:balance}
.rad-tdaten__unter{margin:0!important;font:400 max(.875rem,calc(15 * var(--rad-dpx)))/1.5 var(--vn-font-body);color:var(--vn-color-on-dark-muted)}
.rad-tdaten__chip{flex:0 0 auto;display:inline-flex;align-items:center;gap:9px;margin-top:2px;padding:8px 15px;border-radius:999px;
  background:color-mix(in srgb,var(--vn-color-paper) 9%,transparent);font:600 .8125rem/1 var(--vn-font-body);color:var(--vn-color-on-dark)}

/* Ampel: die Lampe der erreichten Stufe leuchtet, sobald der Kasten im Bild steht */
.rad-tdaten__ampel{display:flex;gap:5px;align-items:center}
.rad-tdaten__lampe{width:9px;height:9px;border-radius:50%;background:color-mix(in srgb,var(--vn-color-paper) 16%,transparent);
  transition:background 420ms var(--vn-ease-out),box-shadow 420ms var(--vn-ease-out)}
.rad-tdaten.is-inview .rad-tdaten__lampe--1.is-an{background:#6FBF73;box-shadow:0 0 0 3px color-mix(in srgb,#6FBF73 22%,transparent)}
.rad-tdaten.is-inview .rad-tdaten__lampe--2.is-an{background:var(--vn-color-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--vn-color-accent) 22%,transparent)}
.rad-tdaten.is-inview .rad-tdaten__lampe--3.is-an{background:#D9614C;box-shadow:0 0 0 3px color-mix(in srgb,#D9614C 22%,transparent)}

/* Kennzahlenreihe: Strecke, Dauer, Aufstieg, Abstieg — automatisch so viele Spalten, wie Werte da sind */
.rad-tdaten__zahlen{margin:0!important;padding:0!important;list-style:none;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:18px 22px}
.rad-tdaten__zahl{margin:0!important;display:flex;flex-direction:column;gap:7px;min-width:0}
.rad-tdaten__zlabel{margin:0!important;display:flex;align-items:center;gap:7px;font:600 .6875rem/1.2 var(--vn-font-body);
  letter-spacing:.08em;text-transform:uppercase;color:var(--vn-color-on-dark-muted)}
/* „ca.“ steht am Label, nicht unter der Zahl — dort stuende sonst ein nacktes „rund“ als eigene Zeile. */
.rad-tdaten__zlabel i{margin-left:-3px;font-style:normal;font-weight:400;opacity:.8}
.rad-tdaten__zeichen{flex:0 0 auto;display:inline-grid;place-items:center;width:16px;height:16px;color:var(--vn-color-accent-on-dark)}
.rad-tdaten__zeichen svg{width:100%;height:100%;display:block}
.rad-tdaten__zwert{margin:0!important;display:flex;align-items:baseline;gap:5px;min-width:0;color:var(--vn-color-on-dark)}
.rad-tdaten__zwert b{font:var(--rad-w-display) clamp(1.375rem,calc(28 * var(--rad-dpx)),1.75rem)/1 var(--vn-font-display);
  letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.rad-tdaten__zwert span{font:500 max(.8125rem,calc(14 * var(--rad-dpx)))/1 var(--vn-font-body);color:var(--vn-color-on-dark-muted)}
.rad-tdaten__zzusatz{margin:0!important;font:400 .8125rem/1.4 var(--vn-font-body);color:var(--vn-color-on-dark-muted)}

/* Startpunkt: eigene Fläche, Koordinaten klein darunter, rechts der Weg in die Kartenapp */
.rad-tdaten__start{display:flex;align-items:center;gap:clamp(12px,1.6vw,18px);
  padding:clamp(14px,1.6vw,18px) clamp(16px,1.8vw,20px);border-radius:var(--vn-radius-md);
  background:color-mix(in srgb,var(--vn-color-paper) 6%,transparent)}
.rad-tdaten__pin{flex:0 0 auto;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;
  background:color-mix(in srgb,var(--vn-color-accent-on-dark) 15%,transparent);color:var(--vn-color-accent-on-dark)}
.rad-tdaten__pin svg{width:21px;height:21px}
.rad-tdaten__starttext{flex:1 1 auto;display:flex;flex-direction:column;gap:4px;min-width:0}
.rad-tdaten__koord{margin:0!important;font:400 .8125rem/1.4 var(--vn-font-body);color:var(--vn-color-on-dark-muted);font-variant-numeric:tabular-nums}
.rad-tdaten__maps{flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:0 18px;border-radius:999px;
  background:var(--vn-color-paper);font:600 .8125rem/1 var(--vn-font-body);text-decoration:none;white-space:nowrap;
  transition:background 260ms var(--vn-ease-out),transform 260ms var(--vn-ease-out)}
.rad-tdaten__maps svg{width:15px;height:15px}
@media(hover:hover){.rad-tdaten__maps:hover{background:var(--vn-color-accent-on-dark);transform:translateY(-1px)}}
/* Der helle Knopf braucht dunkle Schrift — die Linkfarbe des Fliesstextes wuerde ihn sonst goldgelb auf Weiss setzen. */
.rad-post__text .rad-tdaten .rad-tdaten__maps{color:var(--vn-color-ink)}

/* Untere Zone: Untergrund links, passendes Rad rechts, darunter Saison und Einkehr */
.rad-tdaten__raster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,2.4vw,28px) clamp(20px,2.4vw,30px)}
.rad-tdaten__feld{display:flex;flex-direction:column;gap:8px;min-width:0}
.rad-tdaten__label{margin:0!important;display:flex;align-items:center;gap:7px;font:600 .6875rem/1.2 var(--vn-font-body);
  letter-spacing:.1em;text-transform:uppercase;color:var(--vn-color-accent-on-dark)}
.rad-tdaten__wert{margin:0!important;font:400 max(.9375rem,calc(16 * var(--rad-dpx)))/1.5 var(--vn-font-body);color:var(--vn-color-on-dark)}

/* Untergrund als Balken: die Abschnitte fahren beim Einblenden nacheinander auf ihren Anteil hoch.
   Kein Abstand zwischen den Abschnitten — mit Luecken saesse die Summe ueber 100 % und der letzte Anteil
   wuerde am Rand abgeschnitten. */
.rad-tdaten__balken{display:flex;height:10px;border-radius:999px;overflow:hidden;
  background:color-mix(in srgb,var(--vn-color-paper) 10%,transparent)}
.rad-tdaten__balken-teil{width:0;transition:width 900ms var(--vn-ease-out)}
.rad-tdaten.is-inview .rad-tdaten__balken-teil{width:var(--rad-anteil)}
.rad-tdaten__balken-teil--1{background:var(--vn-color-accent);transition-delay:180ms}
.rad-tdaten__balken-teil--2{background:#7FA8C9;transition-delay:300ms}
.rad-tdaten__balken-teil--3{background:#8FBF8A;transition-delay:400ms}
.rad-tdaten__balken-teil--4{background:#C98F7F;transition-delay:480ms}
.rad-tdaten__balken-teil--5{background:#9B8FC9;transition-delay:560ms}
.rad-tdaten__legende{margin:2px 0 0!important;padding:0!important;list-style:none;display:flex;flex-wrap:wrap;gap:6px 18px}
.rad-tdaten__legende li{display:flex;align-items:center;gap:7px;margin:0!important;font:400 .8125rem/1.4 var(--vn-font-body);color:var(--vn-color-on-dark-muted)}
.rad-tdaten__legende b{font-weight:600;color:var(--vn-color-on-dark);font-variant-numeric:tabular-nums}
.rad-tdaten__punkt{flex:0 0 auto;width:9px;height:9px;border-radius:3px}
.rad-tdaten__punkt--1{background:var(--vn-color-accent)}
.rad-tdaten__punkt--2{background:#7FA8C9}
.rad-tdaten__punkt--3{background:#8FBF8A}
.rad-tdaten__punkt--4{background:#C98F7F}
.rad-tdaten__punkt--5{background:#9B8FC9}

/* Passendes Rad: Miniatur der Kategorieseite, Name leuchtet beim Zeigen auf */
.rad-tdaten__raeder{display:flex;flex-wrap:wrap;gap:12px clamp(16px,2vw,26px)}
.rad-tdaten__rad{display:flex;align-items:center;gap:10px;padding:0;border:0;background:none;
  font:500 max(.875rem,calc(15 * var(--rad-dpx)))/1.3 var(--vn-font-body);text-decoration:none}
.rad-tdaten__rad-name{transition:color 260ms var(--vn-ease-out)}
.rad-tdaten__rad .rad-tdaten__rad-bild{transition:transform var(--vn-d-medium) var(--vn-ease-out)}
@media(hover:hover){.rad-tdaten__rad:hover .rad-tdaten__rad-bild{transform:translateY(-2px)}}
.rad-tdaten__rad-bild{flex:0 0 auto;display:grid;place-items:center;width:46px;height:34px;border-radius:var(--vn-radius-sm);background:#fff;overflow:hidden}
.rad-tdaten__rad-bild img{width:100%;height:100%;object-fit:contain}

/* Hinweis als Notiz am Fuss */
.rad-tdaten__notiz{display:flex;align-items:flex-start;gap:12px;padding:clamp(14px,1.6vw,18px) clamp(16px,1.8vw,20px);
  border-radius:var(--vn-radius-md);background:color-mix(in srgb,var(--vn-color-paper) 6%,transparent)}
.rad-tdaten__notiz > div{display:flex;flex-direction:column;gap:5px;min-width:0}
.rad-tdaten__notiz .rad-tdaten__zeichen{width:19px;height:19px;margin-top:1px}

@media (max-width:650px){
  .rad-tdaten{padding:20px}
  /* Die Marke rutscht ueber den Ortsnamen, statt ihn auf drei Zeilen zu quetschen. */
  .rad-tdaten__kopf{flex-direction:column-reverse;align-items:flex-start;gap:12px}
  .rad-tdaten__raster{grid-template-columns:1fr}
  .rad-tdaten__start{flex-wrap:wrap}
  .rad-tdaten__maps{width:100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .rad-tdaten__lampe,.rad-tdaten__balken-teil,.rad-tdaten__maps,.rad-tdaten__rad-bild,.rad-tdaten__rad-name{transition:none}
}

/* ---------- Beitrag: Abschluss ---------- */
/* 19.09.2026 (Kundenwunsch): dunkle Karte mit Flächenverlauf statt weisser Fläche, rundes Porträt statt Wappen,
   kein Schatten, oben und unten derselbe Abstand — und alles auf der Breite des Fliesstextes. */
.rad-pautor{padding-block:clamp(28px,3vw,44px)}
.rad-pautor .rad-shell{max-width:min(var(--vn-container-default),46rem)}
.rad-pautor__karte{display:flex;gap:clamp(20px,2.2vw,30px);align-items:center;padding:clamp(24px,2.4vw,32px);
  border-radius:var(--vn-radius-lg);background:linear-gradient(160deg,var(--rad-card-top),var(--rad-card-bottom));
  box-shadow:none;color:var(--vn-color-on-dark)}
.rad-pautor__portrait{flex:0 0 auto;width:96px;height:96px;border-radius:50%;object-fit:cover;
  box-shadow:0 0 0 1px color-mix(in srgb,var(--vn-color-accent) 45%,transparent)}
.rad-pautor__text{display:flex;flex-direction:column;gap:6px;min-width:0}
.rad-pautor__label{margin:0;font:600 .6875rem/1.2 var(--vn-font-body);letter-spacing:.1em;text-transform:uppercase;color:var(--vn-color-accent-on-dark)}
.rad-pautor__name{margin:0;font:600 max(1.0625rem,calc(19 * var(--rad-dpx)))/1.3 var(--vn-font-body);color:var(--vn-color-on-dark)}
.rad-pautor__bio{margin:0 0 6px;font:400 max(.9rem,calc(15 * var(--rad-dpx)))/1.6 var(--vn-font-body);color:var(--vn-color-on-dark-muted)}
.rad-pautor__wege{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 32px;margin-top:clamp(24px,2.6vw,36px);padding-top:clamp(24px,2.6vw,36px);border-top:1px solid var(--vn-color-divider-light)}
.rad-pautor__frage{margin:0;font:var(--rad-w-display) clamp(1.25rem,calc(28 * var(--rad-dpx)),1.75rem)/1.25 var(--vn-font-display);letter-spacing:-.02em;color:var(--vn-color-ink)}
.rad-pautor__aktionen{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px}
.rad-rmehr{padding-block:clamp(36px,4vw,56px)}
.rad-rmehr .rad-shell{max-width:min(var(--vn-container-default),46rem)}
.rad-rmehr .rad-rlist__grid{grid-template-columns:repeat(2,minmax(0,1fr));--rad-stagger:70ms}
/* Auf der schmaleren Spalte wirkt die grosse Sektionsueberschrift ueberdimensioniert — hier eine Stufe kleiner
   und in einer Zeile mit dem Link, statt Kopf und Link weit auseinanderzuziehen. */
.rad-rmehr .rad-head{margin-bottom:clamp(22px,2.4vw,30px);align-items:baseline;gap:20px}
.rad-rmehr .rad-head h2{font:var(--rad-w-display) var(--rad-fs-h2-klein)/var(--rad-lh-h2-klein) var(--vn-font-display);letter-spacing:var(--rad-ls-h3)}
.rad-rmehr .rad-head h2 br{display:none}
.rad-rmehr .rad-lslider__all{white-space:nowrap}

/* ---------- Schmalere Schirme ---------- */
@media (max-width:1000px){
  .rad-rlist__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rad-rcard--breit .rad-rcard__link{flex-direction:column}
  .rad-rcard--breit .rad-rcard__media{flex:0 0 auto;aspect-ratio:16/9}
  .rad-rcard--breit .rad-rcard__titel{font-size:clamp(1.375rem,4vw,1.75rem)}
  .rad-pautor__karte{flex-direction:column}
}
@media (max-width:650px){
  .rad-rlist__grid{grid-template-columns:1fr}
  .rad-rchips{padding:14px 0}
  .rad-pautor__wege{flex-direction:column;align-items:flex-start}
  .rad-rcard__fuss{flex-wrap:wrap}
}
@media (prefers-reduced-motion:reduce){
  .rad-rcard__media img,.rad-rcard__titel,.rad-rcard__mehr .rad-arrow{transition:none}
}

/* ---------- Tourenlinks (komoot, Strava) ----------
   Kundenwunsch 19.09.2026: je ein Knopf mit dem Zeichen des Dienstes. Form und Rhythmus wie unsere übrigen
   Knöpfe; die Hausfarbe steckt nur im Zeichen und wandert beim Hover in Rand und Grund. So bleiben die Dienste
   erkennbar, ohne dass Orange und Grün die Seite übernehmen. Sie sitzen direkt unter den Eckdaten. */
.rad-tourlinks{margin-block:-.4em 1.6em!important;display:flex;flex-direction:column;gap:12px}
.rad-tourlinks__label{margin:0!important;font:600 .6875rem/1.2 var(--vn-font-body);letter-spacing:.1em;text-transform:uppercase;color:var(--vn-color-ink-muted)}
.rad-tourlinks__reihe{display:flex;flex-wrap:wrap;gap:12px}
.rad-tourlink{--rad-marke:var(--vn-color-ink);
  display:inline-flex;align-items:center;gap:12px;min-height:50px;padding:0 20px 0 16px;
  border-radius:var(--vn-radius-full);border:1px solid var(--vn-color-divider-light);background:#fff;
  font:600 var(--vn-text-sm)/1.2 var(--vn-font-body);color:var(--vn-color-ink);text-decoration:none;
  transition:border-color var(--vn-d-snap),background var(--vn-d-snap),color var(--vn-d-snap)}
.rad-tourlink--komoot{--rad-marke:#6AA127}
.rad-tourlink--strava{--rad-marke:#FC4C02}
.rad-tourlink__icon{display:grid;place-items:center;width:26px;height:26px;flex:0 0 auto}
.rad-tourlink__icon svg{width:100%;height:100%;fill:var(--rad-marke)}
.rad-tourlink__extern{display:grid;place-items:center;width:15px;height:15px;flex:0 0 auto;color:var(--vn-color-ink-muted);transition:color var(--vn-d-snap),transform var(--vn-d-snap)}
.rad-tourlink__extern svg{width:100%;height:100%}
.rad-tourlink:focus-visible{border-color:var(--rad-marke);
  background:color-mix(in srgb,var(--rad-marke) 7%,#fff)}
@media(hover:hover){.rad-tourlink:hover{border-color:var(--rad-marke);
  background:color-mix(in srgb,var(--rad-marke) 7%,#fff)}}
.rad-tourlink:focus-visible .rad-tourlink__extern{color:var(--rad-marke);transform:translate(2px,-2px)}
@media(hover:hover){.rad-tourlink:hover .rad-tourlink__extern{color:var(--rad-marke);transform:translate(2px,-2px)}}
.rad-tourlink:focus-visible{outline:2px solid var(--rad-marke);outline-offset:2px}
/* Auf dunklem Grund (falls der Block einmal dort steht) kehrt sich die Fläche um. */
.rad-dark .rad-tourlink,.rad-deep .rad-tourlink{border-color:var(--vn-color-divider-dark);background:color-mix(in srgb,var(--vn-color-paper) 6%,transparent);color:var(--vn-color-on-dark)}
@media(hover:hover){.rad-dark .rad-tourlink:hover,.rad-deep .rad-tourlink:hover{background:color-mix(in srgb,var(--rad-marke) 18%,transparent)}}
@media (max-width:650px){
  .rad-tourlinks__reihe{flex-direction:column;align-items:stretch}
  .rad-tourlink{justify-content:flex-start}
}
@media (prefers-reduced-motion:reduce){.rad-tourlink,.rad-tourlink__extern{transition:none}}

/* ---------- Bilderschieber im Beitrag ----------
   Mehrere Aufnahmen als Eindruck einer Strecke. */
/* 20.09.2026 (Kundenwunsch): kleine Querformat-Kacheln (3:2) in einem Schieber statt des Bento-Rasters.
   Die Kachelbreite kommt aus --rad-bento-sicht (vom Kurzbefehl nach Bildanzahl gesetzt), damit genau so viele
   Kacheln in die Spur passen und die naechste angeschnitten daneben liegt. */
.rad-bento{margin-block:1.7em!important;--rad-bento-gap:12px;--rad-bento-sicht:3}
.rad-bento__kopf{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:12px}
.rad-bento__titel{margin:0!important;font:600 .6875rem/1.2 var(--vn-font-body);letter-spacing:.1em;text-transform:uppercase;color:var(--vn-color-ink-muted)}
.rad-bento__nav{display:flex;gap:8px;flex-shrink:0}
.rad-bento__nav[hidden]{display:none}
.rad-bento__btn{display:grid;place-items:center;width:34px;height:34px;padding:0;border-radius:50%;cursor:pointer;
  border:1px solid color-mix(in srgb,var(--vn-color-fg) 24%,transparent);background:none;color:var(--vn-color-fg);
  transition:background 240ms var(--vn-ease-out),color 240ms var(--vn-ease-out),border-color 240ms var(--vn-ease-out),transform 240ms var(--vn-ease-out)}
.rad-bento__btn svg{width:15px;height:15px}
@media(hover:hover){.rad-bento__btn:hover{background:var(--vn-color-fg);color:var(--vn-color-bg);border-color:var(--vn-color-fg)}}
.rad-bento__btn:active{transform:scale(.94)}
.rad-bento__btn:focus-visible{outline:2px solid var(--vn-color-accent);outline-offset:3px}
.rad-bento__btn[disabled]{opacity:.28;cursor:default;pointer-events:none}
/* Die Spur laeuft bis an den Rand des Textmasses; ueberstehende Kacheln werden angeschnitten statt gequetscht. */
/* „proximity“ statt „mandatory“: bei drei kleinen Kacheln nebeneinander zwaenge mandatory jeden Wisch in ein
   Raster, proximity rastet nur ein, wenn man ohnehin nah dran ist. */
.rad-bento__spur{display:flex;gap:var(--rad-bento-gap);margin:0!important;padding:2px 0;overflow-x:auto;
  scroll-snap-type:x proximity;scroll-behavior:smooth;overscroll-behavior-x:contain;
  scrollbar-width:none;-ms-overflow-style:none;--rad-stagger:70ms}
.rad-bento__spur::-webkit-scrollbar{display:none}
.rad-bento__spur:focus-visible{outline:2px solid var(--vn-color-accent);outline-offset:4px;border-radius:var(--vn-radius-md)}
.rad-bento__zelle{position:relative;flex:0 0 auto;scroll-snap-align:start;margin:0!important;
  width:calc((100% - (var(--rad-bento-sicht) - 1) * var(--rad-bento-gap)) / var(--rad-bento-sicht));
  aspect-ratio:3/2;border-radius:var(--vn-radius-md);overflow:hidden;background:var(--vn-color-surface-light)}
/* Ein einziges Bild ist kein Schieber — dann laeuft es ueber die volle Breite. */
.rad-bento--einzeln .rad-bento__zelle{width:100%;aspect-ratio:2/1}
.rad-bento__img{display:block;width:100%;height:100%;object-fit:cover;border-radius:0!important}
/* Nachweis liegt in der Kachel, lesbar über einem Verlauf — Bilder aus freien Quellen verlangen ihn oft. */
.rad-bildnachweis{position:absolute;left:0;right:0;bottom:0;padding:22px 10px 7px;pointer-events:none;
  font:400 .625rem/1.3 var(--vn-font-body);color:color-mix(in srgb,#fff 82%,transparent);text-align:right;
  background:linear-gradient(to top,color-mix(in srgb,#000 55%,transparent),transparent)}
.rad-bildnachweis a{color:inherit;text-decoration:none;pointer-events:auto}
@media(hover:hover){.rad-bildnachweis a:hover{color:#fff;text-decoration:underline}}
.rad-bento__zelle .rad-bildnachweis{padding:14px 8px 5px;font-size:.5625rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Unter dem Beitragsbild sitzt der Nachweis außerhalb des Bildes, dort ist die Fläche hell. */
.rad-pbild__figur .rad-bildnachweis{position:static;width:100%;padding:9px 2px 0;text-align:right;background:none;
  color:var(--vn-color-ink-muted)}
@media (max-width:650px){
  .rad-bento{--rad-bento-gap:10px}
  /* Mobil hoechstens zwei nebeneinander — drei waeren auf 360 px keine 110 px breit. */
  .rad-bento__zelle{width:calc((100% - var(--rad-bento-gap)) / 2)}
  .rad-bento--einzeln .rad-bento__zelle{width:100%}
  .rad-bento__btn{width:32px;height:32px}
}
@media (prefers-reduced-motion:reduce){
  .rad-bento__spur{scroll-behavior:auto}
  .rad-bento__btn{transition:none}
}

/* Touren auf den Regionsseiten ([das_rad_beitraege], 28.09.2026): dieselben Karten wie im Ratgeber, aber in der vollen
   Seitenbreite der Regionsseite (ohne die schmalere Ratgeber-Spalte von .rad-rlist). */
.rad-rtouren .rad-head{align-items:center}
@media(max-width:650px){.rad-rtouren .rad-head{flex-direction:column;align-items:flex-start;gap:14px}}