/*
 * vorschaltseite.css – Teaser-Modus des Bunert-Themes (TEASER-MODUS-PLAN.md, 05.11.2026).
 *
 * Geladen NUR von templates/vorschaltseite.php (eigenes Dokument ohne main.css) und von der KI-Vorschau der Bausteine
 * vs-*. Deshalb steht jede Regel unter .be-vs (Body-Klasse der Vorschaltseite) und jede Animation heißt vs-*: In der
 * Vorschau liegt das Theme daneben.
 *
 * Herkunft: baustelle.css des Muss-Moduls bunert-baustelle 1.6.1 (Ruhrpott Halbmarathon), Regel für Regel übernommen,
 * Farben und Schriften als Tokens --vs-*. Die Vorgabewerte unten sind die geprüften Werte von ruhr (Kontrast gemessen
 * 04./05.11.2026). Ein neues Event setzt seine Tokens in seinem Markenlook (marke-<satz>.css), der NACH dieser Datei lädt.
 */
.be-vs {
  --vs-schrift-titel: var(--font-display, Impact, sans-serif);
  --vs-schrift-text: var(--font-body, system-ui, sans-serif);
  --vs-akzent-hover: #ff6a55; --vs-knopf-schrift: #121415; --vs-linie-dunkel: #4A4F53; --vs-fuss-linie: #3A3E41;
  --vs-marke-grund: rgba(246, 243, 236, .9); --vs-karte-text: #E4E6E8;
}
.be-vs {
  --vs-akzent: #FF4D35; --vs-akzent-text: #C8321D; --vs-papier: #F6F3EC; --vs-tinte: #25282A; --vs-linie: #B7BEC5;
  --vs-grau-text: #5B6166; --vs-karte: #FFFFFF; --vs-akzent-hell: #FF7A63; --vs-text-dunkel: #C9CDD1;
  --vs-pano-h: clamp(200px, 40vh, 440px);
  /* Inhaltsbreite wie im Bunert-Theme (main.css: --vs-breite, --vs-polster), damit Logo, Titel,
     Streckenband und Fuß auf einer Kante stehen (Dennis 04.11.2026). Für volle Bänder (Kopf, Fuß,
     Strecke) als Innenabstand gerechnet, damit der Hintergrund über die ganze Breite läuft. */
  --vs-breite: 1536px; --vs-polster: clamp(1rem, 5vw, 3rem);
  --vs-rand: max(var(--vs-polster), calc((100% - var(--vs-breite)) / 2 + var(--vs-polster)));
}
.be-vs * { box-sizing: border-box; }
html, .be-vs { margin: 0; }
.be-vs {
  min-height: 100svh; display: flex; flex-direction: column;
  background: var(--vs-papier); color: var(--vs-tinte);
  font: 400 1.0625rem/1.6 var(--vs-schrift-text);
}
.be-vs a { color: inherit; }
.be-vs :focus-visible { outline: 3px solid var(--vs-akzent-text); outline-offset: 3px; }
.be-vs .karte :focus-visible { outline-color: var(--vs-akzent); }  /* Koralle auf Papier nur 2,98:1 (Prüfer N7) */

.be-vs .buehne { position: relative; min-height: 100svh; display: flex; flex-direction: column;
  padding-bottom: calc(var(--vs-pano-h) * .88); }
.be-vs .kopf, .be-vs .inhalt { position: relative; z-index: 1; }
.be-vs .kopf { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: clamp(1rem, 3vw, 2rem) var(--vs-rand) 0; }
.be-vs .kopf__logo img { display: block; height: clamp(64px, 8.5vw, 112px); width: auto; }
.be-vs .kopf__marke { font: 600 .75rem/1 var(--vs-schrift-text); letter-spacing: .22em; text-transform: uppercase;
  color: var(--vs-grau-text); border: 1px solid var(--vs-linie); padding: .6rem .8rem; border-radius: 2px; white-space: nowrap; }

.be-vs .inhalt { display: grid; column-gap: clamp(2rem, 5vw, 5rem); row-gap: 2rem; align-items: start;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  grid-template-areas: "intro karte" "formate karte";
  align-content: start;
  padding: clamp(1.5rem, 4vh, 3.5rem) var(--vs-rand) clamp(1rem, 3vh, 2rem); width: 100%; }

.be-vs .vorzeile { font: 600 .8125rem/1.4 var(--vs-schrift-text); letter-spacing: .2em; text-transform: uppercase;
  color: var(--vs-grau-text); margin: 0 0 1rem; }
.be-vs .vorzeile b { color: var(--vs-akzent-text); font-weight: 700; }
.be-vs h1 { font: 400 clamp(3.2rem, min(6.4vw, 11vh), 6.4rem)/.92 var(--vs-schrift-titel); text-transform: uppercase;
  letter-spacing: .005em; margin: 0 0 1.4rem; }
.be-vs h1 .punkt { color: var(--vs-akzent); }
.be-vs .einleitung { font-size: clamp(1.0625rem, 1.4vw, 1.25rem); max-width: 34rem; margin: 0; }

.be-vs .intro { grid-area: intro; } .be-vs .karte { grid-area: karte; } .be-vs .formate { grid-area: formate; }
.be-vs .formate { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.be-vs .format { display: grid; gap: .25rem; line-height: 1.35; padding-top: .9rem; border-top: 3px solid var(--vs-tinte); }
.be-vs .format:first-child { border-top-color: var(--vs-akzent); }
.be-vs .format__km { font: 400 1.75rem/1 var(--vs-schrift-titel); }
.be-vs .format__km .ca { font: 600 .8125rem/1 var(--vs-schrift-text); margin-right: .2rem; vertical-align: .55em; }
.be-vs .format__km small { font: 600 .75rem/1 var(--vs-schrift-text); letter-spacing: .12em; margin-left: .2rem; }
.be-vs .format__name { font-weight: 700; display: block; }
.be-vs .format__weg { color: var(--vs-grau-text); font-size: .9375rem; }

.be-vs .karte { background: var(--vs-tinte); color: #fff; border-radius: 4px; padding: clamp(1.5rem, 3vw, 2.5rem);
  position: relative; overflow: hidden; }
.be-vs .karte::before { content: ""; position: absolute; inset: 0 auto auto 0; width: 100%; height: 5px; background: var(--vs-akzent); }
.be-vs .karte h2 { font: 400 clamp(1.8rem, 2.6vw, 2.3rem)/1.02 var(--vs-schrift-titel); text-transform: uppercase; margin: .3rem 0 .8rem; }
.be-vs .karte p { margin: 0 0 1.2rem; color: var(--vs-karte-text); }
.be-vs .formular { display: grid; gap: 1rem .6rem; grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "feld knopf" "zustimmung zustimmung"; align-items: end; }
.be-vs .formular .feld { grid-area: feld; margin: 0; } .be-vs .formular .zustimmung { grid-area: zustimmung; } .be-vs .formular .knopf { grid-area: knopf; }
.be-vs .formular__meldung { grid-column: 1 / -1; margin: 0; font-weight: 600; }
.be-vs .formular__meldung:empty { display: none; }
.be-vs .feld { display: grid; gap: .4rem; margin-bottom: 1rem; }
.be-vs .feld label { font-weight: 600; font-size: .9375rem; }
.be-vs .feld input { font: inherit; padding: 0 1rem; border-radius: 3px; border: 2px solid transparent; background: #fff; color: var(--vs-tinte); height: 54px; }
.be-vs .feld input:focus-visible { outline-offset: 2px; }
.be-vs .zustimmung { display: grid; grid-template-columns: 1.4rem 1fr; gap: .6rem; font-size: .875rem; line-height: 1.5; color: var(--vs-karte-text); margin: 0; }
.be-vs .zustimmung input { width: 1.25rem; height: 1.25rem; margin: .1rem 0 0; accent-color: var(--vs-akzent); }
.be-vs .zustimmung a { color: #fff; }
.be-vs .knopf { font: 700 1rem/1 var(--vs-schrift-text); letter-spacing: .04em; background: var(--vs-akzent); color: var(--vs-knopf-schrift);
  border: 0; border-radius: 3px; padding: 0 1.6rem; height: 54px; cursor: pointer; }
.be-vs .knopf:hover { background: var(--vs-akzent-hover); }
.be-vs .karte__fuss { font-size: .8125rem; color: var(--vs-text-dunkel); margin: 1rem 0 0; }

.be-vs .panorama { position: absolute; left: 0; right: 0; bottom: 0; z-index: 0; height: var(--vs-pano-h); overflow: hidden; }
.be-vs .panorama__ebene { position: absolute; left: 0; bottom: 0; height: 100%; width: calc(100% + var(--kachel));
  background-repeat: repeat-x; background-position: left bottom; background-size: var(--kachel) 100%;
  animation: vs-lauf var(--dauer) linear infinite; will-change: transform; }
.be-vs .panorama__ebene--fern { --kachel: calc(var(--vs-pano-h) * var(--verh-fern)); --dauer: 220s; height: 100%; }
.be-vs .panorama__ebene--mitte { --kachel: calc(var(--vs-pano-h) * .82 * var(--verh-mitte)); --dauer: 120s; height: 82%; }
.be-vs .panorama__ebene--nah { --kachel: calc(var(--vs-pano-h) * .42 * var(--verh-nah)); --dauer: 60s; height: 42%; }
@keyframes vs-lauf { to { transform: translateX(calc(-1 * var(--kachel))); } }
@media (prefers-reduced-motion: reduce) { .be-vs .panorama__ebene { animation: none; } }

.be-vs .fuss { background: var(--vs-tinte); color: var(--vs-text-dunkel); font-size: .875rem; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem;
  justify-content: space-between; align-items: center; padding: 1rem var(--vs-rand); }
.be-vs .fuss nav { display: flex; gap: 1.5rem; }
.be-vs .fuss a { display: inline-block; padding: .35rem 0; color: #fff; text-decoration-color: var(--vs-akzent); text-underline-offset: 3px; }

@media (max-width: 860px) {
  .be-vs .inhalt { grid-template-columns: 1fr; grid-template-areas: "intro" "karte" "formate"; }
  .be-vs .kopf__marke { display: none; }
  .be-vs .buehne { padding-bottom: var(--vs-pano-h); }
  .be-vs .formular { grid-template-columns: 1fr; grid-template-areas: "feld" "zustimmung" "knopf"; }
  .be-vs .knopf { width: 100%; }
  .be-vs .formate { grid-template-columns: 1fr; gap: .75rem; }
  .be-vs .format { grid-template-columns: 6rem 1fr; gap: 1rem; align-items: baseline; border-top-width: 1px; border-top-color: var(--vs-linie); }
  .be-vs .format:first-child { border-top-color: var(--vs-linie); }
}

/* Rechtstexte im selben Rahmen */
.be-vs .rechtstext { max-width: 46rem; margin: 0 auto; padding: clamp(1.5rem, 4vh, 3rem) clamp(1rem, 5vw, 4rem) 4rem; }
.be-vs .rechtstext h1 { font-size: clamp(2.4rem, 6vw, 4rem); }
.be-vs .rechtstext h2 { font: 400 1.6rem/1.1 var(--vs-schrift-titel); text-transform: uppercase; margin: 2.2rem 0 .6rem; }
.be-vs .rechtstext h3 { font-size: 1.125rem; margin: 1.6rem 0 .4rem; }
.be-vs .rechtstext a { color: var(--vs-akzent-text); }
.be-vs .zurueck { display: inline-block; margin-bottom: 1.5rem; font-weight: 600; color: var(--vs-akzent-text); }
.be-vs .ueberspringen { position: absolute; left: -9999px; }
.be-vs .ueberspringen:focus { left: 1rem; top: 1rem; background: #fff; padding: .6rem 1rem; z-index: 10; }

.be-vs .vorzeile--vs-karte { color: var(--vs-text-dunkel); }

/* Rechtstexte: kein Panorama, also auch kein freigehaltener Platz dafuer */
.be-vs .buehne.buehne--recht { padding-bottom: 0; min-height: calc(100svh - 3.5rem); }

.be-vs .formular :disabled { cursor: not-allowed; }
.be-vs .formular input:disabled { opacity: .85; }
.be-vs .formular .knopf:disabled { opacity: .7; }
.be-vs .formular__meldung { color: #fff; }

/* Streckenband: der dunkle Boden des Panoramas läuft weiter, die Koralle-Linie verbindet Start und Ziel */
.be-vs .strecke { position: relative; margin-top: -2px; background: var(--vs-tinte); color: #fff; padding: clamp(2.5rem, 6vw, 5rem) var(--vs-rand) clamp(3rem, 6vw, 5rem); }
.be-vs .strecke__innen { width: 100%; }
.be-vs .vorzeile--dunkel { color: var(--vs-akzent-hell); }
.be-vs .strecke h2 { font: 400 clamp(2.4rem, 5.5vw, 4.6rem)/.95 var(--vs-schrift-titel); text-transform: uppercase; margin: 0 0 clamp(2rem, 4vw, 3.5rem); }
.be-vs .strecke h2 .punkt { color: var(--vs-akzent); }
.be-vs .weg { --sym-h: clamp(80px, 10vw, 132px); position: relative; display: grid; gap: 1.5rem;
  grid-template-columns: minmax(0, 1fr) minmax(9rem, .8fr) minmax(0, 1fr); }
.be-vs .weg::before { content: ""; position: absolute; left: 0; right: 0; top: var(--sym-h); height: 4px; background: var(--vs-akzent); border-radius: 2px; }
.be-vs .weg__symbol { display: block; height: var(--sym-h); width: auto; max-width: 100%; }
.be-vs .weg__station--ziel { text-align: right; }
.be-vs .weg__station--ziel .weg__symbol { margin-left: auto; }
.be-vs .weg__marke { font: 600 .8125rem/1.4 var(--vs-schrift-text); letter-spacing: .2em; text-transform: uppercase; color: var(--vs-text-dunkel); margin: 1.6rem 0 .3rem; }
.be-vs .weg__name { font: 400 clamp(1.9rem, 3.6vw, 3.1rem)/1 var(--vs-schrift-titel); text-transform: uppercase; margin: 0 0 .5rem; }
.be-vs .weg__text { color: var(--vs-text-dunkel); margin: 0; max-width: 26rem; }
.be-vs .weg__station--ziel .weg__text { margin-left: auto; }
.be-vs .weg__mitte { text-align: center; padding-top: calc(var(--sym-h) - 3.4rem); }
.be-vs .weg__wert { font: 400 clamp(1.6rem, 2.6vw, 2.2rem)/1 var(--vs-schrift-titel); color: var(--vs-akzent-hell); margin: 0 0 1.9rem; }
.be-vs .punkte { list-style: none; padding: 0; margin: clamp(2.5rem, 5vw, 4rem) 0 0; display: grid; gap: 2rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.be-vs .punkte li { border-top: 1px solid var(--vs-linie-dunkel); padding-top: 1rem; display: grid; gap: .3rem; align-content: start; }
.be-vs .punkte strong { font-size: 1.0625rem; }
/* nur der Satz, nicht der Klick-Marker im Titel (Bildvergleich 05.11.2026: Titel grau statt weiß) */
.be-vs .punkte li > span { color: var(--vs-text-dunkel); }
.be-vs .fuss { border-top: 1px solid var(--vs-fuss-linie); }
@media (max-width: 860px) {
  .be-vs .weg { --sym-h: 64px; grid-template-columns: 1fr; gap: 0; padding-left: 2.75rem; }
  .be-vs .weg::before { left: .9rem; right: auto; top: .5rem; bottom: .5rem; width: 4px; height: auto; }
  .be-vs .weg__station--ziel { text-align: left; }
  .be-vs .weg__station--ziel .weg__symbol, .be-vs .weg__station--ziel .weg__text { margin-left: 0; }
  .be-vs .weg__marke { margin-top: 1rem; }
  .be-vs .weg__mitte { text-align: left; padding: 1.8rem 0; }
  .be-vs .weg__wert { margin-bottom: .3rem; }
  .be-vs .punkte { grid-template-columns: 1fr; gap: 1.25rem; }
  .be-vs .kopf__logo img { height: 60px; }
}

/* Formate: Zahl, Name und Art je Spalte auf derselben Höhe, egal ob „ca.“ davorsteht */
.be-vs .format__km { display: block; height: 2.1rem; line-height: 2.1rem; white-space: nowrap; overflow: hidden; }
.be-vs .format__km .ca { vertical-align: .55em; }  /* feste Zeilenhöhe: „ca.“ darf die Zeile nicht strecken */
.be-vs .format > span:last-child { display: grid; gap: .15rem; }
.be-vs .format { align-content: start; }  /* gleich hohe Karten: Überschuss nach unten, nicht zwischen Zahl und Name */

/* Hinweis auf den unteren Teil: Stationsring wie auf der Strecke, ein Punkt läuft die Linie hinab */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
/* Fest am unteren Bildschirmrand, weil das Streckenband je nach Fensterhöhe erst unter dem ersten Bild
   beginnt; blendet sich aus, sobald gescrollt wurde (Skript unten in der Vorlage). */
.be-vs .weiter { position: fixed; z-index: 5; left: 50%; bottom: 1.25rem; transform: translateX(-50%);
  display: flex; align-items: center; gap: .65rem; color: #fff; text-decoration: none; background: var(--vs-tinte);
  border-radius: 999px; padding: .6rem 1.1rem .6rem .75rem; box-shadow: 0 6px 20px rgba(0,0,0,.25);
  font: 700 .8125rem/1 var(--vs-schrift-text); letter-spacing: .16em; text-transform: uppercase;
  transition: opacity .3s ease, transform .3s ease; }
.be-vs .weiter--weg { opacity: 0; transform: translate(-50%, 12px); pointer-events: none; }
.be-vs .weiter:hover .weiter__text, .be-vs .weiter:focus-visible .weiter__text { color: var(--vs-akzent-hell); }
.be-vs .weiter:focus-visible { outline-color: var(--vs-akzent); }
.be-vs .weiter__ring { width: 16px; height: 16px; border-radius: 50%; border: 3px solid #fff; background: var(--vs-tinte); flex: none; }
.be-vs .weiter__text { order: 2; }
.be-vs .weiter__ring { order: 1; }
.be-vs .weiter__linie { order: 3; position: relative; width: 0; height: 20px; border-left: 2px dashed var(--vs-akzent); }
.be-vs .weiter__linie::after { content: ""; position: absolute; left: -5px; top: 0; width: 8px; height: 8px; border-radius: 50%;
  background: var(--vs-akzent); animation: vs-weiter-lauf 1.8s ease-in infinite; }
@keyframes vs-weiter-lauf { 0% { transform: translateY(-4px); opacity: 0; } 25% { opacity: 1; } 100% { transform: translateY(16px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .be-vs .weiter__linie::after { animation: none; top: 6px; } .be-vs .weiter { transition: none; } }
.be-vs .formular--fertig .feld, .be-vs .formular--fertig .zustimmung, .be-vs .formular--fertig .knopf { display: none; }
.be-vs .formular--fertig .formular__meldung { font-size: 1.125rem; }

/* Handy: nicht fest über dem Formular, sondern am Ende des Panoramas auf dem dunklen Boden.
   Nur bis 600 px: auf dem Tablet hochkant lag sie sonst unter dem ersten Bild (834 x 1194). */
@media (max-width: 600px) {
  .be-vs .weiter { position: absolute; bottom: calc(var(--vs-pano-h) * .06); box-shadow: none; border: 1px solid var(--vs-linie-dunkel); }
  .be-vs .weiter--weg { opacity: 1; transform: translateX(-50%); pointer-events: auto; }
}

/* Pause-Knopf unten rechts im Panorama, auf dem dunklen Boden (WCAG 2.2.2 Anhalten von Bewegung) */
.be-vs .pause { position: absolute; z-index: 3; right: var(--vs-rand); bottom: calc(var(--vs-pano-h) * .05); width: 44px; height: 44px;
  border-radius: 50%; border: 2px solid #fff; background: var(--vs-tinte); cursor: pointer; display: grid; place-items: center; padding: 0; }
.be-vs .pause span { width: 12px; height: 14px; border-left: 4px solid #fff; border-right: 4px solid #fff; box-sizing: border-box; }
.be-vs .pause[aria-pressed="true"] span { width: 0; height: 0; border-style: solid; border-width: 8px 0 8px 13px;
  border-color: transparent transparent transparent #fff; margin-left: 3px; }
.be-vs .pause:hover { border-color: var(--vs-akzent-hell); }
.be-vs .pause:focus-visible { outline: 3px solid var(--vs-akzent); outline-offset: 3px; }
.be-vs.panorama--steht .panorama__ebene { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .be-vs .pause { display: none; } }

/* Formate: Die Linien zeichnen sich beim Laden einmal von links nach rechts nach, nacheinander wie eine Strecke,
   ein Koralle-Punkt läuft an der Spitze mit (Dennis 04.11.2026). Endzustand = Ruhezustand: Die Linie ist ein
   eigenes Element über der (dann unsichtbaren) Oberkante; ohne Animation sieht alles aus wie vorher. */
.be-vs .format { position: relative; --linie: var(--vs-tinte); --linie-h: 3px; border-top-color: transparent; }
.be-vs .format:first-child { --linie: var(--vs-akzent); border-top-color: transparent; }
.be-vs .format::before { content: ""; position: absolute; left: 0; right: 0; top: calc(-1 * var(--linie-h)); height: var(--linie-h);
  background: var(--linie); transform-origin: left center; }
.be-vs .format::after { content: ""; position: absolute; top: calc(-1 * var(--linie-h) / 2 - 5px); left: 0; width: 10px; height: 10px;
  border-radius: 50%; background: var(--vs-akzent); opacity: 0; pointer-events: none; }
@media (max-width: 860px) {
  .be-vs .format, .be-vs .format:first-child { --linie: var(--vs-linie); --linie-h: 1px; border-top-color: transparent; }
}
@media (prefers-reduced-motion: no-preference) {
  .be-vs .format::before { animation: vs-format-linie .8s cubic-bezier(.65, 0, .35, 1) both; animation-delay: var(--start, .35s); }
  .be-vs .format::after { animation: vs-format-punkt .8s cubic-bezier(.65, 0, .35, 1) both; animation-delay: var(--start, .35s); }
  .be-vs .format:nth-child(2) { --start: 1.05s; }
  .be-vs .format:nth-child(3) { --start: 1.75s; }
}
@keyframes vs-format-linie { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes vs-format-punkt { 0% { left: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: calc(100% - 10px); opacity: 0; } }

/* Wegmarken im Panorama: Ring auf dem Bauwerk, Kilometer und Name daneben; laufen mit der hinteren Ebene */
.be-vs .panorama__marken { --kachel: calc(var(--vs-pano-h) * var(--verh-fern)); --dauer: 220s; height: 100%; background: none; }
.be-vs .wegmarke { position: absolute; display: flex; align-items: center; gap: 6px; transform: translate(-7px, -50%); white-space: nowrap; }
.be-vs .wegmarke__ring { width: 14px; height: 14px; border-radius: 50%; border: 3px solid var(--vs-akzent); background: var(--vs-papier); flex: none; }
.be-vs .wegmarke__text { font: 600 11.5px/1 var(--vs-schrift-text); letter-spacing: .06em; text-transform: uppercase; color: var(--vs-tinte);
  background: var(--vs-marke-grund); padding: 4px 7px; border-radius: 3px; }
.be-vs .wegmarke__text b { color: var(--vs-akzent-text); font-weight: 800; margin-right: 2px; }
@media (max-width: 600px) { .be-vs .wegmarke__text { font-size: 10px; padding: 3px 5px; } .be-vs .wegmarke__ring { width: 11px; height: 11px; border-width: 2px; } }

/* Unterwegs: die Bauwerke zwischen Start und Ziel, ruhig lesbar (auch für Vorleseprogramme, das Panorama ist ausgeblendet) */
/* Unterwegs (Dennis 05.11.2026: „Treppe“ bei vier Spalten mit verschieden langen Texten): 50:50 ab 861 px, großzügig.
   Jeder Punkt mit Linie oben, die Zeile streckt beide Zellen gleich hoch, so enden Linien und Zellen auf einer Höhe. */
.be-vs .unterwegs { margin-top: clamp(3rem, 6vw, 5rem); }
.be-vs .unterwegs__liste { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 2.25rem; }
@media (min-width: 861px) { .be-vs .unterwegs__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2.5rem, 6vw, 5.5rem); row-gap: clamp(2.5rem, 4vw, 3.5rem); } }
.be-vs .unterwegs__liste li { position: relative; padding: 1.5rem 0 0 2.1rem; border-top: 1px solid var(--vs-linie-dunkel); align-content: start; }
.be-vs .unterwegs__liste li::before { content: ""; position: absolute; left: 0; top: calc(1.5rem + .45rem); width: 16px; height: 16px; border-radius: 50%;
  border: 3px solid var(--vs-akzent); box-sizing: border-box; }
.be-vs .unterwegs__km { font: 400 clamp(1.6rem, 2.2vw, 2rem)/1 var(--vs-schrift-titel); color: var(--vs-akzent-hell); }
.be-vs .unterwegs__name { font: 400 clamp(1.7rem, 2.6vw, 2.3rem)/1.05 var(--vs-schrift-titel); text-transform: uppercase; margin: .5rem 0 .35rem; }
.be-vs .unterwegs__ort { font-size: .8125rem; letter-spacing: .12em; text-transform: uppercase; color: var(--vs-text-dunkel); margin: 0 0 .75rem; }
.be-vs .unterwegs__text { color: var(--vs-text-dunkel); margin: 0; max-width: 34rem; font-size: 1.0625rem; line-height: 1.65; }

/* Tippziele mindestens 48 x 48 px (Google, Lighthouse „Tippziele“; Dennis 05.11.2026). Verweise im Fließtext ausgenommen,
   beim Häkchen ist die ganze Zeile antippbar. */
.be-vs .fuss nav { gap: 1.25rem; }
.be-vs .fuss a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 .25rem; margin: 0 -.25rem; }
.be-vs .zurueck { display: inline-flex; align-items: center; min-height: 48px; }
.be-vs .ueberspringen:focus { min-height: 48px; display: inline-flex; align-items: center; }
.be-vs .weiter { min-height: 48px; }
.be-vs .pause { width: 48px; height: 48px; }


/* Die kurzen Punkte sind eine eigene Sektion (sec_vs_punkte) direkt unter der Strecke: Im Muss-Modul standen sie im
   Streckenband. Gleicher Abstand wie dort, ein Band ohne Naht. */
.be-vs .strecke:has(+ .strecke--punkte) { padding-bottom: 0; }
.be-vs .strecke--punkte { margin-top: 0; padding-top: 0; }

/* Rechtstexte im Teaser-Rahmen (Audit M12): Listen und Tabellen der erzeugten Texte lesbar ohne main.css. */
.be-vs .rechtstext ul, .be-vs .rechtstext ol { padding-left: 1.25rem; }
.be-vs .rechtstext li { margin: .25rem 0; }
.be-vs .rechtstext table { border-collapse: collapse; width: 100%; font-size: .9375rem; }
.be-vs .rechtstext th, .be-vs .rechtstext td { text-align: left; vertical-align: top; padding: .4rem .6rem .4rem 0; border-bottom: 1px solid var(--vs-linie); }

/* Doppelte Schriftgröße am Handy (WCAG 1.4.4, Prüfung 13 auf ruhr 05.11.2026): 1fr wuchs auf die Mindestbreite des
   breitesten Inhalts (448 statt 296 px bei 360 px). minmax(0, 1fr) und Umbruch langer Wörter. Bei normaler Schrift
   pixelgleich gemessen (390, 860, 1440 px). */
@media (max-width: 860px) {
  .be-vs .inhalt { grid-template-columns: minmax(0, 1fr); }
  .be-vs .format { grid-template-columns: minmax(0, 6rem) minmax(0, 1fr); }
  .be-vs .formular { grid-template-columns: minmax(0, 1fr); }
}
.be-vs h1, .be-vs h2, .be-vs h3, .be-vs .format__name, .be-vs .format__weg, .be-vs .vorzeile, .be-vs .kopf__marke { overflow-wrap: anywhere; }
.be-vs .format__km { overflow: hidden; }
.be-vs .feld, .be-vs .feld input { min-width: 0; width: 100%; }
.be-vs .zustimmung { grid-template-columns: 1.4rem minmax(0, 1fr); overflow-wrap: anywhere; }
@media (max-width: 860px) { .be-vs .weg { grid-template-columns: minmax(0, 1fr); } .be-vs .unterwegs__liste { grid-template-columns: minmax(0, 1fr); } }
.be-vs .weg__name, .be-vs .unterwegs__name, .be-vs .unterwegs__ort, .be-vs .weg__marke, .be-vs .weg__text, .be-vs .unterwegs__text { overflow-wrap: anywhere; }
.be-vs .fuss nav { flex-wrap: wrap; } .be-vs .fuss > span { overflow-wrap: anywhere; min-width: 0; }