/* ============================================================
   Startseite (seit 06.10.2026) - teile/05-startseite-probe.php
   und die oeffentlichen Seiten im selben Kleid (teile/06-oeffentlich.php)
   ------------------------------------------------------------
   Eine eigene, abgeschlossene Gestaltung. Die Farben stehen bewusst
   HIER und nicht in den --wlt-* Merkmalen des Lerntrainers: die
   Seite ist dunkel gewollt (Anthrazit) und weiss vom Hell- und
   Dunkelmodus des Lernbereichs nichts.

   Eine Farbwelt: Anthrazit. Die helle Ansicht ("als Spielerei", mit
   Schalter in Tour und Fuss) gibt es seit 17.10.2026 nicht mehr, und
   alles, was vorher dunkler als der Grund war (Fuss, ruhige Abschnitte,
   Preiskarte) oder mit Lichtverlaeufen arbeitete, steht jetzt flach auf
   demselben Anthrazit (Johannes: "alles auf Anthrazit" - der Wechsel
   zwischen Anthrazit und Schwarz sah nicht gut genug aus). Abgesetzt
   wird mit Linien und leicht helleren Karten, nicht mit Schwarz.
     --ws-vorn      Schrift, und die Flaeche des Hauptknopfs
     --ws-auf-vorn  Schrift auf dem Hauptknopf
     --ws-rgb       fuer halbdurchsichtige Linien und Lichter

   Bewusst ohne neuere CSS-Funktionen an tragenden Stellen
   (Container-Einheiten, aspect-ratio): auf Schul-PCs laufen oft
   alte Browser. Seitenverhaeltnisse kommen aus padding-top.
   ============================================================ */
:root {
  --ws-grund: #1c1f22;        /* Anthrazit: der Seitengrund */
  --ws-grund-tief: #1c1f22;   /* frueher dunkler (Fuss) - jetzt derselbe Grund */
  --ws-flaeche: #23272b;      /* Karten */
  --ws-flaeche-2: #2a2e33;
  --ws-vorn: #f5f5f7;
  --ws-auf-vorn: #111316;
  /* Zivi: die Markenfarbe fuer den Hauptknopf und das Zeichen im Logo.
     Weisse Schrift darauf 4,7:1, gegen den Grund 3,5:1. */
  --ws-marke: #d7373e;
  --ws-auf-marke: #fff;
  --ws-rgb: 255, 255, 255;
  --ws-grau: rgba(245, 245, 247, .7);
  --ws-grau-2: rgba(245, 245, 247, .48);
  --ws-blass: rgba(245, 245, 247, .5);
  --ws-linie: rgba(255, 255, 255, .1);
  --ws-linie-2: rgba(255, 255, 255, .2);
  --ws-glas: rgba(28, 31, 34, .86);
  --ws-schatten: rgba(0, 0, 0, .55);
  /* Der Hintergrund des Programms - wo das Bild nicht bis an den
     Rand reicht, geht es in dieser Farbe weiter. */
  --ws-app: #1c1f22;
  --ws-leiste: #202327;
  --ws-logo: brightness(0) invert(1);
  --ws-schrift: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  --ws-rand: 48px;
  --ws-kopf: 64px;
  --ws-weich: cubic-bezier(.2, .7, .2, 1);
  --ws-gleiten: cubic-bezier(.65, 0, .35, 1);
  color-scheme: dark;
}
@media (max-width: 899px) { :root { --ws-rand: 24px; } }
@media (max-width: 499px) { :root { --ws-rand: 16px; } }

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--ws-grund); scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body.ws {
  margin: 0;
  background: var(--ws-grund);
  color: var(--ws-vorn);
  font-family: var(--ws-schrift);
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
.ws a { color: inherit; }
.ws :focus-visible { outline: 2px solid var(--ws-vorn); outline-offset: 3px; border-radius: 6px; }
.ws-sprung { position: absolute; left: 12px; top: -60px; z-index: 60; padding: 10px 14px; border-radius: 10px; background: var(--ws-vorn); color: var(--ws-auf-vorn); text-decoration: none; }
.ws-sprung:focus { top: 12px; }
/* Das schwebende Symbol des Cookie-Banners ist auf der ganzen Website
   aus; zurueck kommt man ueber "Cookie-Einstellungen" im Fuss. */
#cmplz-manage-consent { display: none !important; }
/* Das Banner im Kleid der Seite - ueber die Variablen von Complianz,
   Wortlaut und Gewichtung der Knoepfe bleiben, wie sie eingestellt
   sind (Zustimmen hervorgehoben, Ablehnen gleich gross daneben). */
body.ws .cmplz-cookiebanner {
  --cmplz_banner_background_color: #2a2e33;
  --cmplz_banner_border_color: rgba(255, 255, 255, .14);
  --cmplz_banner_border_width: 1px 1px 1px 1px;
  --cmplz_text_color: #f5f5f7;
  --cmplz_hyperlink_color: #c9d4e3;
  --cmplz_button_accept_background_color: #f5f5f7;
  --cmplz_button_accept_border_color: #f5f5f7;
  --cmplz_button_accept_text_color: #111316;
  --cmplz_button_deny_background_color: #34393f;
  --cmplz_button_deny_border_color: rgba(255, 255, 255, .16);
  --cmplz_button_deny_text_color: #f5f5f7;
  --cmplz_button_settings_background_color: #34393f;
  --cmplz_button_settings_border_color: rgba(255, 255, 255, .16);
  --cmplz_button_settings_text_color: #f5f5f7;
  --cmplz_slider_active_color: #f5f5f7;
  --cmplz_slider_bullet_color: #1c1f22;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .5) !important;
}
body.ws .cmplz-cookiebanner .cmplz-close svg path { fill: #f5f5f7; }

/* ---- Kopf ------------------------------------------------- */
.ws-kopf {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  display: flex; align-items: center;
  height: var(--ws-kopf); padding: 0 var(--ws-rand);
  border-bottom: 1px solid transparent;
  transition: background .35s ease, border-color .35s ease;
}
.ws-kopf.ist-gescrollt, .ws-kopf.ist-offen {
  background: var(--ws-glas);
  -webkit-backdrop-filter: saturate(140%) blur(16px);
  backdrop-filter: saturate(140%) blur(16px);
  border-bottom-color: var(--ws-linie);
}
.ws-marke { display: inline-flex; align-items: center; text-decoration: none; font-weight: 600; margin-right: auto; }
/* Das Logo ist blau auf durchsichtig - im Dunkeln wird es weiss. */
.ws-marke img, .ws-fuss-logo { display: block; height: 30px; width: auto; filter: var(--ws-logo); }
/* Zivi: Zeichen in der Markenfarbe, Name als Text (folgt wiso_marke()). */
.ws-zeichen { display: block; flex: none; margin-right: 9px; color: var(--ws-marke); }
.ws-marke-name { color: var(--ws-vorn); font-size: 18px; font-weight: 700; letter-spacing: -.02em; white-space: nowrap; }
.ws-fuss-marke { margin: 0 0 12px; }
.ws-nav { display: flex; margin-right: 24px; }
.ws-nav a { margin-left: 26px; color: var(--ws-grau); text-decoration: none; font-size: 14.5px; font-weight: 500; transition: color .2s; }
.ws-nav a:hover, .ws-nav a[aria-current="page"] { color: var(--ws-vorn); }
.ws-menue { display: none; }

/* ---- Knoepfe ---------------------------------------------- */
.ws-knopf {
  display: inline-flex; align-items: center; justify-content: center;
  height: 50px; padding: 0 24px; border-radius: 999px;
  background: var(--ws-marke); color: var(--ws-auf-marke) !important;
  font-size: 15.5px; font-weight: 600; letter-spacing: -.01em; text-decoration: none; white-space: nowrap;
  border: 1px solid transparent; cursor: pointer; font-family: inherit;
  transition: transform .25s var(--ws-weich), background .25s, border-color .25s, color .25s, opacity .25s;
}
.ws-knopf:hover { transform: translateY(-1px); opacity: .92; }
.ws-knopf-rand { background: transparent; color: var(--ws-vorn) !important; border-color: var(--ws-linie-2); }
.ws-knopf-rand:hover { background: rgba(var(--ws-rgb), .06); border-color: rgba(var(--ws-rgb), .5); opacity: 1; }
.ws-knopf-klein { height: 38px; padding: 0 16px; font-size: 13.5px; }
.ws-knoepfe { display: flex; flex-wrap: wrap; justify-content: center; margin: -6px; }
.ws-knoepfe > * { margin: 6px; }


/* ---- Einstieg --------------------------------------------- */
.ws-held {
  position: relative; min-height: 76vh;
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 116px var(--ws-rand) 48px; overflow: hidden;
}
/* Das Punkteraster - ein Anklang an die gepunktete Karte der Vorlage. */
.ws-raster {
  position: absolute; top: -40px; left: -40px; right: -40px; bottom: -40px; z-index: 0;
  background-image: radial-gradient(rgba(var(--ws-rgb), .16) 1px, transparent 1.5px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 42%, #000 10%, transparent 72%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 42%, #000 10%, transparent 72%);
  animation: ws-raster 60s linear infinite;
}
/* Wo die Maus steht, leuchten die Punkte auf. */
.ws-raster-hell {
  position: absolute; top: -40px; left: -40px; right: -40px; bottom: -40px; z-index: 0; pointer-events: none;
  background-image: radial-gradient(rgba(var(--ws-rgb), .85) 1px, transparent 1.6px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(200px circle at var(--mx, -999px) var(--my, -999px), #000, transparent 75%);
  mask-image: radial-gradient(200px circle at var(--mx, -999px) var(--my, -999px), #000, transparent 75%);
  animation: ws-raster 60s linear infinite;
  opacity: 0; transition: opacity .5s;
}
.ws-held.hat-maus .ws-raster-hell { opacity: 1; }
@keyframes ws-raster { to { background-position: 26px 260px; } }

.ws-held-innen { position: relative; z-index: 1; max-width: 1060px; }
.ws-titel { margin: 0 0 22px; font-weight: 600; }
/* Das Suchwort steht in der Ueberschrift, aber klein darueber -
   gross steht der Satz, den man sich merken soll. */
.ws-titel-zeile {
  display: block; margin-bottom: 14px;
  color: var(--ws-grau); font-size: 15px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
}
.ws-titel-grau { color: var(--ws-blass); }
.ws-vorspann {
  max-width: 640px; margin: 0 auto 30px;
  color: var(--ws-grau); font-size: 19px; line-height: 1.55;
}

/* ---- Der Titel -------------------------------------------
   Beim Laden steigen die beiden Zeilen aus einer unsichtbaren Kante
   hoch, die zweite kurz nach der ersten. Bis 07.10.2026 schlug sich
   hier ein Buch auf (Johannes: "too much - einfach was Einfaches,
   nicht zu Auffaelliges").

   Laeuft auch bei "Bewegung reduzieren" - Schulrechner melden das
   von Haus aus, und es ist eine einzige, kurze Bewegung ohne
   Schleife. Ohne Skript steht der Text einfach da. */
.ws-gross-titel {
  display: block;
  font-size: 128px; line-height: .95; letter-spacing: -.055em;
}
/* Die Kante: unten etwas Luft, damit "y" nicht abgeschnitten wird. */
.ws-maske { display: block; overflow: hidden; padding: 0 .06em .1em; margin-bottom: -.1em; white-space: nowrap; }
.ws-hoch { display: inline-block; }
.mit-js .ws-hoch {
  -webkit-transform: translateY(105%); transform: translateY(105%);
  animation: ws-hoch .95s cubic-bezier(.2, .7, .1, 1) forwards;
  animation-delay: calc(var(--v, 0) * 120ms + 150ms);
}
@keyframes ws-hoch { to { -webkit-transform: none; transform: none; } }

/* Nacheinander herein - nur die Zugabe, ohne Skript ist alles da. */
.mit-js .ws-auf { opacity: 0; transform: translateY(18px); animation: ws-auf 1s var(--ws-weich) forwards; animation-delay: calc(var(--v, 0) * 110ms + 100ms); }
@keyframes ws-auf { to { opacity: 1; transform: none; } }

/* ============================================================
   Die Tour
   ------------------------------------------------------------
   Gesteuert vom Scrollen: die Strecke (.ws-tour-strecke) ist so
   lang wie die Schritte, die Buehne klebt darin oben, und der
   Scrollweg waehlt den Schritt. Was IM Schritt passiert - Zeiger,
   Klick, Bildwechsel - laeuft in fester Zeit ab, unabhaengig davon,
   wie schnell jemand scrollt. Der Balken am Schritt zeigt, wie weit
   es bis zum naechsten ist.

   Ab 1100 px: links der aktive Schritt gross, darunter die Striche;
   rechts das Programmfenster. Darunter: oben die Striche, darunter
   der aktive Schritt, darunter das Fenster. Am
   Telefon statt eines Fensters der Bildschirm des Programms, randlos.
   ============================================================ */
.ws-tour { padding: 96px 0 40px; border-top: 1px solid var(--ws-linie); }
.ws-tour-kopf { margin-bottom: 8px; }
.ws-tour-strecke { position: relative; }
.ws-tour-buehne {
  display: grid; grid-template-columns: minmax(320px, .74fr) minmax(0, 1.6fr);
  -ms-grid-columns: 1fr 1.6fr;
  grid-gap: 64px; gap: 64px; align-items: center;
  width: 1360px; max-width: calc(100% - 2 * var(--ws-rand)); margin: 0 auto;
}
/* Mit Skript: lange Strecke, klebende Buehne. --n kommt aus der Seite. */
.mit-js .ws-tour-strecke { height: calc(var(--n, 9) * 60vh + 100vh - var(--ws-kopf)); }
.mit-js .ws-tour-buehne {
  position: -webkit-sticky; position: sticky; top: var(--ws-kopf);
  height: calc(100vh - var(--ws-kopf)); padding: 24px 0;
}
.ws-tour-text { display: flex; flex-direction: column; min-width: 0; }

/* Ein Schritt steht gross da; die anderen liegen unsichtbar an
   derselben Stelle und blenden beim Wechsel ueber. (Bis 07.10.2026
   standen hier alle Schritte als Liste - "der Text daneben hat mir
   beim ersten Mal besser gefallen".) */
.ws-schritte { list-style: none; margin: 0; padding: 0; }
.mit-js .ws-schritte { display: grid; }
.mit-js .ws-schritt {
  grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity .4s ease, transform .55s var(--ws-weich), visibility 0s linear .4s;
}
.mit-js .ws-schritt.ist-aktiv { opacity: 1; visibility: visible; transform: none; transition: opacity .4s ease .05s, transform .55s var(--ws-weich) .05s; }
/* Am Schreibtisch nimmt nur der aktive Schritt Platz ein; die anderen
   liegen absolut darueber. Vorher lagen alle im selben Rasterfeld, das
   so hoch war wie der laengste Schritt - unter einem kurzen Text klaffte
   bis zu den Strichen eine Luecke (Johannes, 17.10.2026). Die Spalte
   steht oben buendig mit dem Programmfenster, damit der Titel beim
   Wechsel nicht springt; nur die Striche ruecken mit dem Text. */
@media (min-width: 1100px) {
  .mit-js .ws-tour-buehne { align-content: center; }
  .mit-js .ws-schritte { display: block; position: relative; }
  .mit-js .ws-schritt { position: absolute; top: 0; left: 0; right: 0; }
  .mit-js .ws-schritt.ist-aktiv { position: relative; }
  .mit-js .ws-tour-text { align-self: start; padding-top: 30px; }
  .mit-js .ws-tour-fuss { margin-top: 26px; }
}
.ws-nr { margin: 0; color: var(--ws-grau-2); font-size: 12.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; font-variant-numeric: tabular-nums; }
.ws-nr i { font-style: normal; opacity: .6; }
.ws-schritt h3 { margin: 14px 0; color: var(--ws-vorn); font-size: 44px; line-height: 1.05; letter-spacing: -.035em; font-weight: 600; text-wrap: balance; }
.ws-lang { margin: 0; max-width: 30em; color: var(--ws-grau); font-size: 18px; line-height: 1.55; }
.ws-kurz { display: none; margin: 0; }
.mit-js .ws-schritt-bild { display: none; }

/* Darunter: die Schritte als kurze Striche (der aktive fuellt sich mit
   dem Scrollweg bis zum naechsten), hell/dunkel, Ueberspringen. */
.ws-tour-fuss { display: none; }
.mit-js .ws-tour-fuss { display: flex; flex-wrap: wrap; align-items: center; margin-top: 34px; }
.ws-punkte { display: flex; align-items: center; margin-right: 24px; }
.ws-punkt { position: relative; width: 18px; height: 24px; margin: 0 4px 0 0; padding: 0; border: 0; background: none; cursor: pointer; transition: width .45s var(--ws-weich); }
.ws-punkt i { position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px; border-radius: 2px; overflow: hidden; background: rgba(var(--ws-rgb), .2); transition: background .3s; }
.ws-punkt:hover i, .ws-punkt.ist-vorbei i { background: rgba(var(--ws-rgb), .45); }
.ws-punkt.ist-aktiv { width: 40px; }
.ws-punkt.ist-aktiv i { background: rgba(var(--ws-rgb), .3); }
.ws-punkt i::after { content: ""; position: absolute; top: 0; left: 0; bottom: 0; width: 100%; background: var(--ws-vorn); transform-origin: 0 50%; transform: scaleX(0); transition: transform .12s linear; }
.ws-punkt.ist-aktiv i::after { transform: scaleX(var(--p, 0)); }
.ws-tour-steuerung { display: flex; align-items: center; }
.ws-ueberspringen { color: var(--ws-grau-2) !important; font-size: 13px; text-decoration: none; white-space: nowrap; transition: color .2s; }
.ws-ueberspringen:hover { color: var(--ws-vorn) !important; }

/* Das Programmfenster */
.ws-geraet { position: relative; min-width: 0; }
.ws-rahmen {
  position: relative; z-index: 1; overflow: hidden; background: var(--ws-app);
  border-radius: 14px; border: 1px solid rgba(var(--ws-rgb), .14);
  box-shadow: 0 40px 110px var(--ws-schatten), 0 0 0 1px rgba(0, 0, 0, .2);
}
.ws-rahmen-leiste { display: flex; align-items: center; height: 36px; padding: 0 14px; background: var(--ws-leiste); border-bottom: 1px solid var(--ws-linie); }
.ws-rahmen-leiste > i { width: 10px; height: 10px; margin-right: 7px; border-radius: 50%; background: rgba(var(--ws-rgb), .16); }
.ws-rahmen-leiste span { margin-left: 12px; padding: 3px 11px; border-radius: 7px; background: rgba(var(--ws-rgb), .05); color: var(--ws-grau-2); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-rahmen-leiste b { font-weight: 500; color: var(--ws-grau); }
/* 16 : 10 wie die Aufnahmen - ueber padding-top, das kennt jeder Browser. */
.ws-bildflaeche { position: relative; height: 0; padding-top: 62.5%; overflow: hidden; background: var(--ws-app); }

/* Die Bildwelt rechnet in Bildpunkten der Aufnahme; das Skript setzt
   Massstab und Verschiebung. Zeiger und Hinweis wohnen darin und
   halten mit --gegen ihre Groesse auf dem Bildschirm. */
.ws-bildwelt {
  position: absolute; left: 0; top: 0; width: 1440px; height: 900px;
  transform-origin: 0 0;
  transform: translate(calc(var(--tx, 0) * 1px), calc(var(--ty, 0) * 1px)) scale(var(--s, .5));
  transition: transform .85s var(--ws-gleiten);
}
.ws-ebene { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .38s ease; -webkit-user-select: none; user-select: none; }
.ws-ebene.ist-oben { opacity: 1; }
.ws-ebene:not([src]) { visibility: hidden; }

.ws-zeiger {
  position: absolute; left: 0; top: 0; z-index: 6; pointer-events: none;
  transform-origin: 0 0;
  transform: translate(calc(var(--zx, 720) * 1px), calc(var(--zy, 640) * 1px)) scale(var(--gegen, 2));
  transition: transform .75s var(--ws-gleiten);
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .55));
}
.ws-zeiger svg { display: block; margin: -3px 0 0 -5px; overflow: visible; }
.ws-zeiger path { fill: #fff; stroke: #000; stroke-width: 1.3; stroke-linejoin: round; }
.ws-ring { position: absolute; left: -18px; top: -18px; width: 36px; height: 36px; border-radius: 50%; border: 2px solid #fff; opacity: 0; }
.ws-zeiger.klickt .ws-ring { animation: ws-ring .55s ease-out; }
.ws-zeiger.klickt svg { animation: ws-druck .3s ease; }
@keyframes ws-ring { 0% { opacity: .9; transform: scale(.3); } 100% { opacity: 0; transform: scale(1.5); } }
@keyframes ws-druck { 50% { transform: scale(.86); } }
/* Am Telefon tippt man: ein Kreis statt eines Pfeils. */
.ist-tipp .ws-zeiger svg { display: none; }
.ist-tipp .ws-zeiger::before {
  content: ""; position: absolute; left: -16px; top: -16px; width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255, 255, 255, .3); border: 2px solid rgba(255, 255, 255, .92);
}
.ist-tipp .ws-zeiger.klickt::before { animation: ws-tipp .4s ease; }
@keyframes ws-tipp { 40% { transform: scale(.72); background: rgba(255, 255, 255, .6); } }

/* Die kurze Erklaerung am Ziel. */
.ws-hinweis {
  position: absolute; left: 0; top: 0; z-index: 7; pointer-events: none;
  transform-origin: 0 0;
  transform: translate(calc(var(--hx, 0) * 1px), calc(var(--hy, 0) * 1px)) scale(var(--gegen, 2));
  white-space: nowrap; max-width: 280px; padding: 7px 12px; border-radius: 10px;
  background: var(--ws-vorn); color: var(--ws-auf-vorn);
  font-size: 13px; font-weight: 600; line-height: 1.3;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .4);
  opacity: 0; transition: opacity .3s ease;
}
.ws-hinweis.ist-da { opacity: 1; }

/* ============================================================
   Abschnitte darunter
   ============================================================ */
.ws-abschnitt { padding: 84px 0; border-top: 1px solid var(--ws-linie); }
.ws-breite { width: 1200px; max-width: calc(100% - 2 * var(--ws-rand)); margin-left: auto; margin-right: auto; }
.ws-kopfzeile { max-width: 920px; margin-bottom: 36px; }
.ws-tour-kopf { width: 1360px; max-width: calc(100% - 2 * var(--ws-rand)); }
.ws-zeile { margin: 0 0 14px; color: var(--ws-grau-2); font-size: 12.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.ws-gross { margin: 0; font-size: 52px; line-height: 1.04; letter-spacing: -.042em; font-weight: 600; text-wrap: balance; }
.ws-unterzeile { margin: 14px 0 0; color: var(--ws-grau); font-size: 18px; }
.ws-unterzeile a, .ws-faq details a, .ws-haken a { color: var(--ws-vorn); text-decoration: none; border-bottom: 1px solid rgba(var(--ws-rgb), .32); transition: border-color .2s; }
.ws-unterzeile a:hover, .ws-faq details a:hover, .ws-haken a:hover { border-bottom-color: var(--ws-vorn); }

/* Pruefungsgebiete */
.ws-karten3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-gap: 16px; gap: 16px; }
.ws-gebiet {
  position: relative; display: flex; flex-direction: column;
  padding: 24px 24px 26px; border-radius: 20px;
  background: var(--ws-flaeche);
  border: 1px solid var(--ws-linie);
  transition: border-color .3s, transform .5s var(--ws-weich);
}
.ws-gebiet:hover { border-color: var(--ws-linie-2); transform: translateY(-3px); }
.ws-gebiet-kopf { display: flex; align-items: center; justify-content: space-between; color: var(--ws-grau-2); font-size: 13px; font-weight: 600; letter-spacing: .06em; }
.ws-gebiet-zahl { padding: 3px 10px; border-radius: 999px; background: rgba(var(--ws-rgb), .08); color: var(--ws-grau); letter-spacing: 0; font-weight: 500; }
.ws-gebiet h3 { margin: 18px 0 8px; font-size: 22px; line-height: 1.2; letter-spacing: -.02em; font-weight: 600; }
.ws-gebiet p { margin: 0 0 18px; color: var(--ws-grau); font-size: 15.5px; line-height: 1.55; }
.ws-chips { list-style: none; margin: auto -3px -3px; padding: 0; display: flex; flex-wrap: wrap; }
.ws-chips li { margin: 3px; padding: 4px 11px; border-radius: 999px; border: 1px solid var(--ws-linie); color: var(--ws-grau); font-size: 13px; }

/* Was drin ist: ein Raster aus Haarlinien */
.ws-kacheln { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--ws-linie); border-left: 1px solid var(--ws-linie); }
.ws-kacheln li { padding: 24px 24px 26px; border-right: 1px solid var(--ws-linie); border-bottom: 1px solid var(--ws-linie); transition: background .3s; }
.ws-kacheln li:hover { background: rgba(var(--ws-rgb), .03); }
.ws-kacheln svg { display: block; color: var(--ws-grau); }
.ws-kacheln b { display: block; margin: 16px 0 4px; font-size: 18px; font-weight: 600; letter-spacing: -.015em; }
.ws-kacheln span { display: block; color: var(--ws-grau); font-size: 15px; line-height: 1.5; }
.ws-fussnote { margin: 18px 0 0; color: var(--ws-grau-2); font-size: 14px; }

/* Preis */
.ws-preiskarte {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-gap: 64px; gap: 64px; align-items: center;
  padding: 48px; border-radius: 24px;
  border: 1px solid var(--ws-linie-2);
  background: var(--ws-flaeche);
}
.ws-preis-links h2 { margin: 0; font-size: 44px; line-height: 1.05; letter-spacing: -.04em; font-weight: 600; }
.ws-preis-zahl { display: flex; align-items: baseline; flex-wrap: wrap; margin: 20px 0 26px; }
.ws-preis-zahl b { margin-right: 14px; font-size: 80px; line-height: 1; letter-spacing: -.05em; font-weight: 600; }
.ws-preis-zahl span { color: var(--ws-grau); font-size: 16px; }
.ws-preis-links .ws-knoepfe { justify-content: flex-start; }
.ws-haken { list-style: none; margin: 0; padding: 0; }
.ws-haken li { position: relative; padding: 11px 0 11px 30px; border-bottom: 1px solid var(--ws-linie); font-size: 16px; }
.ws-haken li:first-child { border-top: 1px solid var(--ws-linie); }
.ws-haken li::before { content: ""; position: absolute; left: 3px; top: 17px; width: 12px; height: 6px; border-left: 1.8px solid var(--ws-vorn); border-bottom: 1.8px solid var(--ws-vorn); transform: rotate(-45deg); }

/* Haeufige Fragen */
.ws-faq-raster { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); grid-gap: 72px; gap: 72px; align-items: start; }
.ws-faq .ws-kopfzeile { position: -webkit-sticky; position: sticky; top: 96px; margin-bottom: 0; }
.ws-faq .ws-gross { font-size: 42px; }
.ws-faq details { border-top: 1px solid var(--ws-linie); }
.ws-faq details:last-child { border-bottom: 1px solid var(--ws-linie); }
.ws-faq summary { display: flex; align-items: center; justify-content: space-between; padding: 19px 0; cursor: pointer; list-style: none; font-size: 19px; font-weight: 500; letter-spacing: -.015em; }
.ws-faq summary::-webkit-details-marker { display: none; }
.ws-faq summary::after { content: ""; flex: 0 0 14px; height: 14px; margin-left: 20px; background: linear-gradient(var(--ws-vorn), var(--ws-vorn)) center / 14px 1.5px no-repeat, linear-gradient(var(--ws-vorn), var(--ws-vorn)) center / 1.5px 14px no-repeat; transition: transform .4s var(--ws-weich); }
.ws-faq details[open] summary::after { transform: rotate(45deg); }
.ws-faq details p { margin: -4px 0 22px; max-width: 40em; color: var(--ws-grau); line-height: 1.6; }

/* Schluss */
.ws-schluss { position: relative; padding: 84px 0; border-top: 1px solid var(--ws-linie); text-align: center; overflow: hidden; }
.ws-schluss-innen { position: relative; }
.ws-schluss h2 { margin: 0 0 26px; font-size: 64px; line-height: 1.02; letter-spacing: -.048em; font-weight: 600; text-wrap: balance; color: var(--ws-vorn); }

/* ---- Fuss ------------------------------------------------- */
.ws-fuss { border-top: 1px solid var(--ws-linie); padding: 48px 0 28px; background: var(--ws-grund-tief); color: var(--ws-grau); font-size: 14.5px; }
.ws-fuss-reihe { display: grid; grid-template-columns: minmax(0, 1.7fr) repeat(3, minmax(0, 1fr)); grid-gap: 40px; gap: 40px; }
.ws-fuss-reihe p { max-width: 26em; margin: 16px 0 0; color: var(--ws-grau-2); }
.ws-fuss nav { display: flex; flex-direction: column; align-items: flex-start; }
.ws-fuss nav a { margin-bottom: 9px; color: var(--ws-grau); text-decoration: none; }
.ws-fuss-reihe .ws-fuss-titel { margin: 0 0 12px; color: var(--ws-vorn); font-size: 14px; font-weight: 600; }
.ws-fuss nav a:hover { color: var(--ws-vorn); }
.ws-copy { display: flex; align-items: center; justify-content: space-between; margin-top: 32px; color: var(--ws-grau-2); font-size: 13px; }

/* ---- Einblenden beim Scrollen ----------------------------- */
.mit-js [data-einblenden] { opacity: 0; transform: translateY(22px); transition: opacity .8s ease, transform .9s var(--ws-weich), border-color .3s; transition-delay: calc(var(--v, 0) * 60ms); }
.mit-js [data-einblenden].ist-da { opacity: 1; transform: none; }
.mit-js .ws-gebiet[data-einblenden].ist-da:hover { transform: translateY(-3px); transition-delay: 0s; }

/* ============================================================
   Schmaler
   ============================================================ */
@media (max-width: 1240px) {
  .ws-gross-titel { font-size: 9.6vw; }
  .ws-gross { font-size: 4.3vw; }
  .ws-schluss h2 { font-size: 5vw; }
}
/* Unter 1100 px: Segmente oben, nur der aktive Schritt, Fenster
   darunter - so breit, wie die Hoehe des Bildschirms es erlaubt. */
@media (max-width: 1099px) {
  .ws-tour-buehne { grid-template-columns: minmax(0, 1fr); -ms-grid-columns: 1fr; grid-gap: 18px; gap: 18px; }
  .mit-js .ws-tour-buehne { align-content: center; }
  /* Die Striche oben ueber die ganze Breite, darunter der Schritt. */
  .mit-js .ws-tour-fuss { order: -1; flex-wrap: nowrap; margin: 0 0 16px; }
  .ws-punkte { flex: 1 1 auto; margin-right: 16px; }
  .ws-punkt, .ws-punkt.ist-aktiv { flex: 1 1 0; width: auto; }
  .ws-schritt h3 { margin: 10px 0 8px; font-size: 32px; }
  .ws-lang { max-width: 46em; font-size: 16.5px; }
  /* Drei schmale Karten nebeneinander: die Chips nicht an den Boden
     druecken, sonst klafft in der Karte mit dem kuerzesten Text eine
     Luecke (halber Bildschirm, 07.10.2026). */
  .ws-chips { margin-top: 2px; }
  /* Fenster: Hoehe des Bildschirms minus Kopf, Text und Abstaende;
     das Fenster ist 1,6-mal so breit wie sein Bild hoch ist. */
  .mit-js .ws-geraet { width: 100%; max-width: calc((100vh - var(--ws-kopf) - 300px) * 1.6); margin: 0 auto; }
}
@media (max-width: 899px) {
  .ws-nav { display: none; }
  .ws-kopf > .ws-knopf-klein { margin-right: 6px; }
  /* Das Menue am Telefon: drei Striche, darunter die Liste. */
  .ws-menue {
    display: block; position: relative; width: 44px; height: 44px; margin-right: -10px; padding: 0;
    border: 0; background: none; cursor: pointer; color: var(--ws-vorn);
  }
  .ws-menue span, .ws-menue span::before, .ws-menue span::after {
    position: absolute; left: 12px; width: 20px; height: 2px; border-radius: 2px; background: currentColor;
    transition: transform .3s var(--ws-weich), opacity .2s;
  }
  .ws-menue span { top: 21px; }
  .ws-menue span::before, .ws-menue span::after { content: ""; left: 0; }
  .ws-menue span::before { top: -6px; }
  .ws-menue span::after { top: 6px; }
  .ist-offen .ws-menue span { background: transparent; }
  .ist-offen .ws-menue span::before { transform: translateY(6px) rotate(45deg); }
  .ist-offen .ws-menue span::after { transform: translateY(-6px) rotate(-45deg); }
  .ist-offen .ws-nav {
    display: flex; flex-direction: column; position: absolute; top: var(--ws-kopf); left: 0; right: 0; margin: 0;
    padding: 8px var(--ws-rand) 20px; background: var(--ws-grund); border-bottom: 1px solid var(--ws-linie);
    box-shadow: 0 30px 60px var(--ws-schatten);
  }
  .ist-offen .ws-nav a { margin: 0; padding: 13px 0; font-size: 17px; color: var(--ws-vorn); border-bottom: 1px solid var(--ws-linie); }
  .ist-offen .ws-nav a:last-child { border-bottom: 0; }

  .ws-gross { font-size: 34px; }
  .ws-faq .ws-gross { font-size: 30px; }
  .ws-schluss h2 { font-size: 36px; }
  .ws-zeile { font-size: 11.5px; letter-spacing: .12em; }
  .ws-karten3 { grid-template-columns: minmax(0, 1fr); grid-gap: 12px; gap: 12px; }
  .ws-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ws-preiskarte { grid-template-columns: minmax(0, 1fr); grid-gap: 28px; gap: 28px; padding: 26px; }
  .ws-preis-links h2 { font-size: 34px; }
  .ws-preis-zahl b { font-size: 60px; }
  .ws-faq-raster { grid-template-columns: minmax(0, 1fr); grid-gap: 24px; gap: 24px; }
  .ws-faq .ws-kopfzeile { position: static; }
  .ws-fuss-reihe { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-gap: 28px; gap: 28px; }
  .ws-fuss-reihe > div:first-child { grid-column: 1 / -1; }
  .ws-abschnitt, .ws-schluss { padding: 64px 0; }
  .ws-tour { padding: 64px 0 24px; }
}
/* Schmales Telefon: drei Spalten waeren je ~110 px - "Vertrag
   widerrufen" braeche um. Angebot und Unternehmen nebeneinander,
   Rechtliches darunter ueber die volle Breite in zwei Spalten. */
@media (max-width: 559px) {
  .ws-fuss-reihe { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ws-fuss-reihe > nav:last-child { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-column-gap: 28px; column-gap: 28px; }
  .ws-fuss-reihe > nav:last-child .ws-fuss-titel { grid-column: 1 / -1; }
}
/* ---- Telefon ----
   Kein Telefon im Telefon: der Bildschirm des Programms steht
   randlos und fast in Originalgroesse da (Massstab ~0,92 statt
   0,69 im Telefonrahmen) - lesbar, und die Kamera faehrt mit, wenn
   das Ziel weiter unten liegt, als wuerde man im Programm scrollen.
   Oben die Striche der Schritte, Titel und ein Satz; der
   Bildschirm nimmt den Rest der Hoehe. */
@media (max-width: 699px) {
  .ws-held { min-height: 0; padding: 100px var(--ws-rand) 52px; }
  .ws-titel-zeile { font-size: 12.5px; letter-spacing: .1em; }
  /* "mit System." muss in eine Zeile passen. */
  .ws-gross-titel { font-size: 12.2vw; }
  .ws-vorspann { font-size: 17px; }
  .ws-knoepfe .ws-knopf { width: 100%; }

  .ws-tour .ws-gross { font-size: 30px; }
  .ws-tour-kopf { margin-bottom: 0; }
  .mit-js .ws-tour-strecke { height: calc(var(--n, 9) * 52vh + 100vh - var(--ws-kopf)); }
  .mit-js .ws-tour-buehne {
    display: flex; flex-direction: column; grid-gap: 0; gap: 0;
    padding: 10px 0 14px;
  }
  .mit-js .ws-tour-text { flex: 0 0 auto; }
  .mit-js .ws-tour-fuss { margin-bottom: 10px; }
  .ws-punkte { margin-right: 10px; }
  .ws-tour-steuerung .ws-ueberspringen { display: none; }
  .ws-nr { font-size: 11px; letter-spacing: .12em; }
  .ws-schritt h3 { margin: 6px 0 6px; font-size: 24px; line-height: 1.12; letter-spacing: -.025em; }
  .mit-js .ws-tour-buehne .ws-lang { display: none; }
  .mit-js .ws-kurz { display: block; color: var(--ws-grau); font-size: 14.5px; line-height: 1.45; }

  .mit-js .ws-geraet {
    flex: 1 1 auto; min-height: 0; max-width: none; margin-top: 14px;
    -ms-touch-action: pan-y; touch-action: pan-y;
  }
  .mit-js .ws-rahmen { height: 100%; border-radius: 22px; box-shadow: 0 24px 60px var(--ws-schatten); }
  .mit-js .ws-rahmen-leiste { display: none; }
  .mit-js .ws-bildflaeche { height: 100%; padding-top: 0; }

  .ws-kacheln { grid-template-columns: minmax(0, 1fr); }
  .ws-kacheln li { display: grid; grid-template-columns: 22px minmax(0, 1fr); grid-gap: 2px 16px; gap: 2px 16px; padding: 18px 18px 20px; }
  .ws-kacheln svg { grid-row: span 2; margin-top: 1px; }
  .ws-kacheln b { margin: 0; font-size: 17px; }
  .ws-gebiet { padding: 20px 20px 22px; }
  .ws-haken li { font-size: 15.5px; }
  .ws-copy { flex-direction: column; align-items: flex-start; }
}
/* Telefone: die Hoehe ohne die Leisten des Browsers (svh), sonst
   rutscht der untere Rand des Bildschirms unter die Adressleiste. */
@supports (height: 1svh) {
  .mit-js .ws-tour-buehne { height: calc(100svh - var(--ws-kopf)); }
  @media (max-width: 699px) {
    .mit-js .ws-tour-strecke { height: calc(var(--n, 9) * 52svh + 100svh - var(--ws-kopf)); }
  }
  @media (max-width: 1099px) {
    .mit-js .ws-geraet { max-width: calc((100svh - var(--ws-kopf) - 300px) * 1.6); }
  }
  @media (max-width: 699px) {
    .mit-js .ws-geraet { max-width: none; }
  }
}

/* ---- Ohne Skript: die Tour als Liste mit Bildern ---------- */
.ohne-js .ws-geraet, .ohne-js .ws-tour-fuss { display: none; }
.ohne-js .ws-tour-buehne { display: block; max-width: 1100px; }
.ohne-js .ws-schritt { padding: 8px 0 40px; }
.ohne-js .ws-schritt h3 { font-size: 30px; }
.ws-schritt-bild { margin: 22px 0 0; }
.ws-schritt-bild img { display: block; width: 100%; max-width: 1000px; height: auto; border-radius: 12px; border: 1px solid var(--ws-linie-2); }
@media (max-width: 699px) { .ws-schritt-bild img { max-width: 320px; } }

/* ---- Wer "Bewegung reduzieren" eingestellt hat ------------
   Schul- und Firmenrechner haben das oft von Haus aus (Windows:
   "Animationen anzeigen" aus, auch bei Fernsitzungen). Die Tour
   laeuft trotzdem: der Zeiger IST dort der Inhalt, kein Schmuck.
   Der Titel auch (siehe oben). Was nur schmueckt, faellt weg: das
   wandernde Raster, das Aufsteigen der Abschnitte. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ws-raster, .ws-raster-hell { animation: none !important; }
  .mit-js .ws-auf { transform: none; animation: ws-nur-blenden .6s ease forwards; animation-delay: calc(var(--v, 0) * 80ms); }
  .mit-js [data-einblenden] { transform: none !important; }
  .ws-gebiet:hover, .ws-knopf:hover { transform: none; }
}
@keyframes ws-nur-blenden { from { opacity: 0; } to { opacity: 1; } }

/* Pruefmodus (?schritt=n&nur=tour): nur die Tour, ohne Einstieg -
   damit sich jeder Schritt fotografieren laesst, ohne zu scrollen. */
.nur-tour .ws-held { display: none; }
.nur-tour .ws-tour { padding-top: var(--ws-kopf); border-top: 0; }
.nur-tour .ws-tour-kopf { display: none; }
.nur-rest .ws-held, .nur-rest .ws-tour { display: none; }

/* ============================================================
   Telefon (bis 699 px): die Tour als Karten zum Wischen
   ------------------------------------------------------------
   Seit 18.10.2026. Vorher klebte auch am Telefon die Buehne oben,
   der Scrollweg waehlte den Schritt und ein Bild in Bildschirm-
   groesse wurde vom Zeiger abgefahren. Am Telefon hiess das: lange
   Strecke ohne sichtbares Weiterkommen, ein unscharfes Bild (1x
   auf 3x-Bildschirmen) und Text, der neben dem Programm kaum Platz
   hatte (Johannes: "schaut immer noch nicht gut aus").

   Jetzt: neun Karten nebeneinander, die naechste schaut am Rand
   herein. Je Karte Nummer, Titel, ein Satz und der Ausschnitt des
   Programms, um den es geht (Aufnahme in doppelter Aufloesung),
   mit Ring und Hinweis an der Stelle. Die Seite scrollt normal
   weiter; gewischt wird nur seitlich. Ohne Skript geht das Wischen
   genauso, das Skript setzt nur Punkte und Pfeile darunter.
   ============================================================ */
@media (max-width: 699px) {
  .ws-tour { padding: 56px 0 44px; }
  .ws-tour-kopf { margin-bottom: 20px; }
  .ws-tour-strecke, .mit-js .ws-tour-strecke { height: auto; }
  .ws-tour-buehne, .mit-js .ws-tour-buehne, .ohne-js .ws-tour-buehne {
    position: static; display: block; width: auto; max-width: none; height: auto; margin: 0; padding: 0;
  }
  .ws-geraet, .mit-js .ws-geraet { display: none; }
  .ws-tour-text, .mit-js .ws-tour-text { display: flex; flex-direction: column; padding: 0; }

  .ws-schritte, .mit-js .ws-schritte {
    display: flex; overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    scroll-padding-left: var(--ws-rand);
    padding: 2px var(--ws-rand) 4px; margin: 0;
    scrollbar-width: none;
  }
  .ws-schritte::-webkit-scrollbar { display: none; }
  /* Hinter der letzten Karte der Rand, sonst klebt sie an der Kante. */
  .ws-schritte::after { content: ""; flex: 0 0 1px; }
  .ws-schritt, .mit-js .ws-schritt, .mit-js .ws-schritt.ist-aktiv, .ohne-js .ws-schritt {
    position: relative; flex: 0 0 84%; display: flex; flex-direction: column; min-width: 0;
    margin: 0 12px 0 0; padding: 20px 20px 0;
    opacity: 1; visibility: visible; transform: none; transition: none;
    scroll-snap-align: start;
    background: var(--ws-flaeche); border: 1px solid var(--ws-linie); border-radius: 22px; overflow: hidden;
  }
  .ws-nr { font-size: 11px; letter-spacing: .12em; }
  .ws-schritt h3, .ohne-js .ws-schritt h3 { margin: 8px 0 8px; font-size: 23px; line-height: 1.13; letter-spacing: -.022em; }
  /* Der lange Text bleibt fuer Vorleseprogramme da, sichtbar ist der kurze. */
  .ws-schritt .ws-lang, .mit-js .ws-tour-buehne .ws-lang {
    display: block; position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .ws-kurz, .mit-js .ws-kurz { display: block; margin: 0 0 18px; color: var(--ws-grau); font-size: 15px; line-height: 1.45; }

  /* Der Ausschnitt: 390 x 520 Bildpunkte der Aufnahme (390 x 844),
     senkrecht so verschoben, dass die Stelle drin ist (--y aus der
     Seite). Unten buendig mit der Karte, oben gerundet - als schaue
     das Programm aus der Karte heraus. */
  .ws-schritt-bild, .mit-js .ws-schritt-bild {
    display: block; position: relative; margin: auto 0 0;
    height: 0; padding-top: 133.333%; overflow: hidden;
    border: 1px solid var(--ws-linie-2); border-bottom: 0; border-radius: 14px 14px 0 0;
    background: var(--ws-app);
  }
  .ws-schritt-bild picture { display: block; }
  .ws-schritt-bild img {
    position: absolute; left: 0; top: 0; width: 100%; height: 100%; max-width: none;
    border: 0; border-radius: 0; object-fit: cover; object-position: 50% var(--y, 0%);
  }
  .ws-karte-ring {
    display: block; position: absolute; z-index: 2; left: var(--rx, 50%); top: var(--ry, 50%);
    width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .95); background: rgba(255, 255, 255, .22);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .45);
  }
  .ws-karte-ring::after {
    content: ""; position: absolute; left: -2px; top: -2px; right: -2px; bottom: -2px; border-radius: 50%;
    border: 2px solid #fff; opacity: 0;
  }
  .ist-sichtbar .ws-karte-ring::after { animation: ws-karte-puls 2.2s ease-out .4s infinite; }
  @keyframes ws-karte-puls { 0% { opacity: .8; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(2.1); } }
  .ws-karte-hinweis {
    display: block; position: absolute; z-index: 3; top: var(--ry, 50%);
    max-width: 92%; padding: 6px 11px; border-radius: 9px;
    background: var(--ws-vorn); color: var(--ws-auf-vorn);
    width: -webkit-max-content; width: max-content;
    font-size: 12.5px; font-weight: 600; line-height: 1.3; white-space: normal;
    box-shadow: 0 10px 26px rgba(0, 0, 0, .45);
  }
  /* So breit, wie bis zum Rand der Karte Platz ist (8 px Luft). */
  .ws-karte-hinweis.ist-links { left: calc(var(--rx, 50%) - 14px); max-width: calc(100% - var(--rx, 50%) + 6px); }
  .ws-karte-hinweis.ist-rechts { right: calc(100% - var(--rx, 50%) - 14px); max-width: calc(var(--rx, 50%) + 6px); }
  .ws-karte-hinweis.ist-unten { margin-top: 26px; }
  .ws-karte-hinweis.ist-oben { -webkit-transform: translateY(-100%); transform: translateY(-100%); margin-top: -26px; }

  /* Darunter: Punkte und Pfeile (nur mit Skript). */
  .mit-js .ws-tour-fuss {
    order: 2; display: flex; flex-wrap: nowrap; align-items: center;
    margin: 18px 0 0; padding: 0 var(--ws-rand);
  }
  .ws-punkte { flex: 1 1 auto; margin-right: 14px; }
  .ws-punkt, .ws-punkt.ist-aktiv { flex: 1 1 0; width: auto; height: 28px; }
  .ws-punkt.ist-aktiv i::after { transform: scaleX(1); }
  .ws-tour-steuerung .ws-ueberspringen { display: none; }
  .ws-pfeil {
    display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 0 0 0 8px; padding: 0;
    border: 1px solid var(--ws-linie-2); border-radius: 50%; background: none; color: var(--ws-vorn); cursor: pointer;
    transition: opacity .2s, background .2s;
  }
  .ws-pfeil:active { background: rgba(var(--ws-rgb), .08); }
  .ws-pfeil[disabled] { opacity: .3; cursor: default; }
  .ws-pfeil svg { display: block; width: 18px; height: 18px; }
}
/* Ring und Hinweis gehoeren nur zur Karte am Telefon; Pfeile auch. */
@media (min-width: 700px) {
  .ws-karte-ring, .ws-karte-hinweis, .ws-pfeil { display: none; }
}
@media (max-width: 699px) and (prefers-reduced-motion: reduce) {
  .ws-schritte { scroll-behavior: auto; }
  .ist-sichtbar .ws-karte-ring::after { animation: none; }
}