/* ============================================================
   entdecken2.css — /entdecken im Stil der Startseite v15.
   Entwurf 06.10.2026 (techq-83). Auftrag Fabrizio, 05.10.2026: «unter
   entdecken ist es auch noch nicht perfekt, hat noch teils altes Design,
   das überarbeiten». Freigegebene Richtung: Texte und Funktionen bleiben,
   die Bausteine kommen auf v15 wie Startseite und /panel.

   WIE DIESE DATEI ARBEITET
   Sie ist das LETZTE Blatt der Seite und ueberschreibt nur, was
   entdecken.css anders gestaltet als v15. Geometrie, Massstab, Sequenz und
   Tabelle rechnet weiter entdecken.css mit entdecken.js. Die zehn
   --w-Marken an .wsp zeigen hell auf die v15-Marken (--s15-* aus
   start2.css). Dunkel setzt hell-dunkel.css (Teil 40-entdecken) dieselben
   Marken auf dieselben Werte, mit hoeherem Gewicht. Was hell-dunkel.css
   darueber hinaus einzeln faerbt (Leiste, Karten, Schatten, Band), wird
   hier mit mindestens gleichem Gewicht nachgezogen; die Regeln stehen
   jeweils unter «dunkel».

   GEWICHT
   Die meisten Regeln tragen `body.wsp-seite` vorn (0,1,1). Damit stechen
   sie entdecken.css (meist 0,1,0), shop-mobil.css (`html .x`, 0,1,1, hier
   spaeter geladen) und die Dunkel-Regeln in hell-dunkel.css
   (`html[data-theme="dark"] .x`, 0,2,1, gleiches Gewicht, hier spaeter).

   WAS SICH AENDERT
   - Kopfzeile des Auftritts oben (rollt weg), darunter die Leiste als
     einzige klebende Zeile: Seitenname, Massstab, «Bestellen».
   - Etiketten wie die Oberzeile der Startseite (.s15-ueber: 17 px,
     halbfett, grau) statt Grossbuchstaben in Sperrung.
   - Knoepfe als Pille: Hauptknopf blau (--s15-cta), Nebenknopf grau.
   - Karten ohne Rahmen und Schatten, Rundung 28 px wie .s15-karte.
   - Wahl-Elemente (Massstab, Wahlschalter): Umriss mit 3:1-Rand
     (--s15-feld-rand), gewaehlt blauer Umriss auf zartem Blau.
   - Keine Schrift unter 12 px.
   ============================================================ */

/* ── 0 · Kopfzeile ───────────────────────────────────────────
   Wie auf den Produktseiten von Apple: die Kopfzeile des Auftritts rollt
   mit weg, die Leiste der Seite klebt. Zwei klebende Zeilen uebereinander
   nahmen am Telefon 117 px vom Bild. Ist das Handymenue offen, setzt
   kopfzeile.css die Kopfzeile fest — dann gilt seine Regel, darum
   :not(.kz-menue-offen). Das !important braucht es gegen das
   style="position:sticky" im Markup. */
html:not(.kz-menue-offen) body.wsp-seite > header{position:relative !important;}
/* Sie schrumpft beim Scrollen nicht: kopfzeile.js (Teil 2) verkleinert sie,
   damit eine KLEBENDE Leiste weniger Platz nimmt. Hier rollt sie weg; die
   beiden Groessen sind darum dieselbe, und der Ausgleichsabstand
   (--kz-h-voll minus --kz-h-klein) wird 0. */
body.wsp-seite{--kz-h-klein:var(--kz-h-voll);--kz-logo-klein:var(--kz-logo-voll);}

/* ── 1 · Marken ──────────────────────────────────────────────── */
body.wsp-seite .wsp{
  --w-papier:var(--s15-bg);
  --w-nebel:var(--s15-bg2);
  --w-tinte:var(--s15-text);
  --w-graphit:var(--s15-text2);
  --w-leise:var(--s15-text3);
  --w-linie:var(--s15-line);
  --w-linie-f:var(--s15-card2);
  --w-blau:var(--s15-cta);
  --w-blau-t:var(--s15-link);
  --w-blau-h:var(--s15-kc-tint);
  --w-messe:1180px;
  font-family:inherit;
}
/* Dunkel: dieselben Werte wie hell-dunkel.css, damit die Marke nicht an
   der Reihenfolge haengt. */
html[data-theme="dark"] body.wsp-seite .wsp{
  --w-papier:var(--s15-bg);
  --w-nebel:var(--s15-bg2);
  --w-tinte:var(--s15-text);
  --w-graphit:var(--s15-text2);
  --w-leise:var(--s15-text3);
  --w-linie:var(--s15-line);
  --w-linie-f:var(--s15-card2);
  --w-blau:var(--s15-link);
  --w-blau-t:var(--s15-link);
  --w-blau-h:var(--s15-kc-tint);
}

/* ── 2 · Leiste (klebt, unter der Kopfzeile) ─────────────────── */
body.wsp-seite .wsp-leiste{
  position:sticky;
  inset:auto;
  top:0;
  /* Unter der Kopfzeile (50) und ihrer Produkte-Flaeche: oben auf der Seite
     liegt die Leiste direkt unter der Kopfzeile, die Flaeche klappt ueber
     sie. */
  z-index:40;
  grid-template-columns:1fr minmax(0,460px) 1fr;
  padding:0 max(22px, calc((100% - 1180px) / 2));
  border-bottom:1px solid var(--kz-linie);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
}
body.wsp-seite .wsp-leiste,
html[data-theme="dark"] body.wsp-seite .wsp-leiste,
html[data-theme="dark"] body.wsp-seite .wsp-leiste.ist-unterwegs{background:var(--kz-grund);}
body.wsp-seite .wsp-leiste.ist-unterwegs{background:var(--kz-grund);border-bottom-color:var(--kz-linie);}

/* Der Seitenname (Apple: Produktname links in der Produktleiste). */
body.wsp-seite .wsp-leiste__name{
  grid-column:1;
  justify-self:start;
  display:inline-flex;align-items:center;
  min-height:44px;
  font-size:21px;font-weight:600;letter-spacing:-0.012em;
  color:var(--s15-text);
  white-space:nowrap;
  text-decoration:none;
}
body.wsp-seite .wsp-leiste__name:hover{color:var(--s15-text);text-decoration:none;}

/* «Bestellen»: kleine blaue Pille wie der Kaufknopf einer Produktleiste. */
body.wsp-seite .wsp-leiste__cta{
  position:relative;
  height:32px;padding:0 16px;
  border-radius:980px;
  background:var(--s15-cta);color:#fff;
  font-size:14px;font-weight:400;letter-spacing:-0.01em;
  transition:background-color .2s ease;
}
body.wsp-seite .wsp-leiste__cta:hover,
html[data-theme="dark"] body.wsp-seite .wsp-leiste__cta:hover{background:var(--s15-ctah);color:#fff;transform:none;}
body.wsp-seite .wsp-leiste__cta:active{transform:none;}
/* Trefferflaeche 44 px hoch, die Pille bleibt 32 px (die Leiste misst 52). */
body.wsp-seite .wsp-leiste__cta::after{content:'';position:absolute;left:0;right:0;top:-6px;bottom:-6px;}

/* ── 3 · Massstab ───────────────────────────────────────────── */
body.wsp-seite .wsp-mass__stopp{
  background:transparent;
  border:1px solid var(--s15-feld-rand);
  border-radius:14px;
  color:var(--s15-text);
  padding:8px 14px 7px;
  gap:4px;
}
body.wsp-seite .wsp-mass__kurz{font-family:inherit;font-size:14px;font-weight:600;letter-spacing:0;}
body.wsp-seite .wsp-mass__gb{font-family:inherit;font-size:12px;letter-spacing:0;color:var(--s15-text2);}
body.wsp-seite .wsp-mass__stopp:hover{border-color:var(--s15-text);color:var(--s15-text);}
/* Gewaehlt: blauer Umriss (2 px, der zweite als Schatten innen — ein
   breiterer Rand verschoebe die Beschriftung) auf zartem Blau. */
body.wsp-seite .wsp-mass__stopp[aria-selected="true"]{
  border-color:var(--w-blau);
  box-shadow:inset 0 0 0 1px var(--w-blau);
  background:var(--s15-kc-tint);
  color:var(--s15-link);
}
body.wsp-seite .wsp-mass__stopp[aria-selected="true"] .wsp-mass__gb{color:var(--s15-link);}
.wsp .wsp-mass__stopp:focus-visible{border-radius:14px;}

/* Die Klammer «Unsere Empfehlung» und der Hinweis «Weiter»: Text wie
   Kleingedrucktes, nicht in Grossbuchstaben. */
body.wsp-seite .wsp-mass__klammer{border-color:var(--s15-line);}
body.wsp-seite .wsp-mass__klammer-text{
  font-family:inherit;font-size:12px;font-weight:500;letter-spacing:0;text-transform:none;
  color:var(--s15-text2);
}
body.wsp-seite .wsp-auf__hinab{
  font-family:inherit;font-size:12px;letter-spacing:0;text-transform:none;color:var(--s15-text3);
}

/* Die Blase «Groesse antippen»: umgekehrte Pille wie der Schlussknopf der
   Startseite (hell dunkel, dunkel hell). */
body.wsp-seite .wsp-mass__wink-blase{
  background:var(--s15-inv);color:var(--s15-invtext);
  font-size:13px;font-weight:500;letter-spacing:-0.01em;
}
body.wsp-seite .wsp-mass__wink-blase::after{background:var(--s15-inv);}
/* SHOP-53: Die Blase ist antippbar (entdecken.js raeumt sie damit ab), war
   aber nur 30 px hoch. Die Trefferflaeche reicht jetzt 7 px darueber und
   darunter, also 44 px; das Bild bleibt gleich. */
body.wsp-seite .wsp-mass__wink-blase::before{content:'';position:absolute;left:0;right:0;top:-7px;bottom:-7px;}

/* Fassung in der Leiste: leise Reiter wie die Verweise einer Produktleiste —
   ohne Umriss, nur die gewaehlte Groesse traegt eine Flaeche. Der Laeufer
   darueber zeigt die Wahl zusaetzlich. (hell-dunkel.css legte die Pillen
   dunkel deckend auf #161617; hier sind sie durchsichtig.) */
body.wsp-seite .wsp-mass--leiste .wsp-mass__stopp{
  padding:3px 9px 2px;border-radius:980px;
  border-color:transparent;background:transparent;box-shadow:none;
  color:var(--s15-text2);
}
body.wsp-seite .wsp-mass--leiste .wsp-mass__stopp:hover{color:var(--s15-text);border-color:transparent;}
body.wsp-seite .wsp-mass--leiste .wsp-mass__stopp[aria-selected="true"]{
  border-color:transparent;box-shadow:none;
  background:var(--s15-kc-tint);color:var(--s15-link);
}
body.wsp-seite .wsp-mass--leiste .wsp-mass__kurz{font-size:12px;}
.wsp .wsp-mass--leiste .wsp-mass__stopp:focus-visible{border-radius:980px;}

/* ── 4 · Szenen und Schrift ─────────────────────────────────── */
body.wsp-seite .wsp-szene{padding:clamp(88px,10vw,150px) 22px;}
body.wsp-seite .wsp-szene--eng{padding-top:clamp(64px,7vw,100px);}
body.wsp-seite .wsp-seq{padding-bottom:0;}

/* Etikett ueber jeder Szene = Oberzeile der Startseite (.s15-ueber). */
body.wsp-seite .wsp-augenbraue,
body.wsp-seite .wsp-auf__wort{
  display:inline-block;
  font-family:inherit;font-size:17px;font-weight:600;letter-spacing:-0.01em;text-transform:none;
  color:var(--s15-text2);
}
body.wsp-seite .wsp-augenbraue::before{content:none;}
body.wsp-seite .wsp-augenbraue i{font-style:normal;font-weight:inherit;letter-spacing:inherit;color:inherit;}
body.wsp-seite .wsp-kopf > .wsp-augenbraue + .wsp-h2{margin-top:12px;}

body.wsp-seite .wsp-h1{
  font-size:clamp(40px,5.4vw,76px);line-height:1.04;letter-spacing:-0.034em;
}
body.wsp-seite .wsp-h2{
  font-size:clamp(40px,5.6vw,72px);line-height:1.04;letter-spacing:-0.03em;
}
body.wsp-seite .wsp-lead{
  font-size:clamp(17px,1.5vw,21px);line-height:1.45;letter-spacing:-0.01em;color:var(--s15-text2);
}
body.wsp-seite .wsp-text{
  font-size:17px;line-height:1.47;letter-spacing:-0.01em;color:var(--s15-text2);
}
body.wsp-seite .wsp-klein{font-size:14px;line-height:1.5;color:var(--s15-text3);}

/* ── 5 · Aufmacher ───────────────────────────────────────────
   Erster Bildschirm = Kopfzeile + Leiste + Aufmacher. Vorher lag die
   Leiste fest UEBER dem Aufmacher, und sein oberes Polster hielt sie frei.
   Jetzt steht sie im Fluss; der Aufmacher fuellt den Rest des Fensters. */
body.wsp-seite .wsp-auf{
  min-height:calc(100vh - var(--kz-h-voll, 64px) - 1px - var(--w-leiste));
  min-height:calc(100svh - var(--kz-h-voll, 64px) - 1px - var(--w-leiste));
  padding:clamp(40px,6vh,72px) 22px clamp(32px,4vh,46px);
}

/* ── 6 · Die lebende Karte ───────────────────────────────────── */
body.wsp-seite .wsp-karte{
  border:0;border-radius:28px;
  background:var(--s15-tile);
  box-shadow:none;
  padding:clamp(28px,3.4vw,40px) clamp(24px,3vw,36px);
}
/* Das Band «Unsere Empfehlung»: in v15 heisst so etwas wie «Neu» auf der
   Startseite — ein farbiges Wort ueber dem Namen, keine Pille auf der
   Kartenkante. Seinen Platz behaelt es, auch wenn die gewaehlte Groesse
   keine Empfehlung traegt (sonst spraenge die Karte). unterseite2.css faerbt
   es mit (1,2,0); darum hier :not(#_). */
.t15 .wsp .wsp-karte__band:not(#_){
  position:static;display:block;
  height:auto;margin:0 0 6px;padding:0;
  border-radius:0;
  background:none;
  font-family:inherit;font-size:14px;font-weight:600;letter-spacing:0;text-transform:none;
  color:var(--s15-new);
}
body.wsp-seite .wsp-karte__name{
  display:block;
  font-family:inherit;font-size:28px;font-weight:600;letter-spacing:-0.022em;text-transform:none;
  color:var(--s15-text);
}
body.wsp-seite .wsp-karte__satz{
  margin-top:8px;
  font-size:17px;font-weight:400;line-height:1.4;letter-spacing:-0.01em;
  color:var(--s15-text2);
  min-height:2.8em;
}
body.wsp-seite .wsp-karte__werte{
  margin-top:28px;padding-top:24px;
  border-top:1px solid var(--s15-line);
  gap:22px 18px;
}
body.wsp-seite .wsp-wert{gap:5px;}
body.wsp-seite .wsp-wert__zahl{
  font-family:inherit;font-size:clamp(26px,2.6vw,32px);font-weight:600;letter-spacing:-0.03em;
}
body.wsp-seite .wsp-wert__zahl--wort{font-size:clamp(21px,2vw,24px);letter-spacing:-0.015em;}
body.wsp-seite .wsp-wert__bez{font-size:14px;line-height:1.35;color:var(--s15-text2);}
body.wsp-seite .wsp-wert__bez i{color:var(--s15-text3);}
body.wsp-seite .wsp-karte__gleich{
  margin-top:22px;padding-top:18px;border-top:1px solid var(--s15-line);
  font-size:14px;color:var(--s15-text2);
}
body.wsp-seite .wsp-karte__fuss{margin-top:24px;padding-top:22px;border-top:1px solid var(--s15-line);}
body.wsp-seite .wsp-preis__waehrung{font-family:inherit;font-size:14px;letter-spacing:0;color:var(--s15-text2);}
body.wsp-seite .wsp-preis__zahl{font-family:inherit;font-size:clamp(32px,3.4vw,40px);font-weight:600;letter-spacing:-0.03em;}
body.wsp-seite .wsp-preis__takt{font-size:14px;color:var(--s15-text2);}

/* ── 7 · Knoepfe ─────────────────────────────────────────────── */
body.wsp-seite .wsp-knopf{
  height:auto;min-height:44px;
  padding:12px 22px;
  border:0;border-radius:980px;
  background:var(--s15-cta);color:#fff;
  font-size:17px;font-weight:400;letter-spacing:-0.01em;
  transition:background-color .2s ease;
}
body.wsp-seite .wsp-knopf:hover,
html[data-theme="dark"] body.wsp-seite .wsp-knopf:not(.wsp-knopf--leise):hover{background:var(--s15-ctah);color:#fff;transform:none;}
body.wsp-seite .wsp-knopf:active{transform:none;}
/* Nebenknopf: graue Pille wie .btn-ghost auf den Unterseiten v15. */
body.wsp-seite .wsp-knopf--leise{background:var(--s15-card2);color:var(--s15-text);}
body.wsp-seite .wsp-knopf--leise:hover{background:var(--s15-chip);color:var(--s15-text);}
html[data-theme="dark"] body.wsp-seite .wsp-knopf--leise{box-shadow:inset 0 0 0 1px var(--s15-feld-rand);}

/* ── 8 · In jedem Paket gleich / Umzug ───────────────────────── */
/* Offen, ohne Rahmen und ohne Fuellung (entdecken_figur_pruefstand B). */
body.wsp-seite .wsp-gleich__titel{font-size:17px;font-weight:600;letter-spacing:-0.01em;color:var(--s15-text);}
body.wsp-seite .wsp-gleich__text{font-size:14px;line-height:1.5;color:var(--s15-text2);}
body.wsp-seite .wsp-gleich__text a{color:var(--s15-link);}

body.wsp-seite .wsp-schluss__wege{border-top:1px solid var(--s15-line);}
body.wsp-seite .wsp-weg__titel{font-size:17px;font-weight:400;letter-spacing:-0.01em;color:var(--s15-link);}
body.wsp-seite .wsp-weg__titel:hover{color:var(--s15-link);text-decoration:underline;text-underline-offset:3px;}
body.wsp-seite .wsp-weg__text{font-size:14px;color:var(--s15-text2);}

/* ── 9 · Empfehlung ──────────────────────────────────────────── */
body.wsp-seite .wsp-tipp{
  border:0;border-radius:28px;
  background:var(--s15-tile);
  padding:clamp(28px,3.4vw,40px) clamp(24px,3vw,36px);
  gap:14px;
}
body.wsp-seite .wsp-tipp:hover,
html[data-theme="dark"] body.wsp-seite .wsp-tipp:hover{transform:none;box-shadow:none;}
body.wsp-seite .wsp-tipp__nr{
  font-family:inherit;font-size:14px;font-weight:600;letter-spacing:0;text-transform:none;
  color:var(--s15-text2);
}
body.wsp-seite .wsp-tipp--empfohlen .wsp-tipp__nr{color:var(--s15-new);}
body.wsp-seite .wsp-tipp__name{font-size:clamp(32px,3.4vw,40px);letter-spacing:-0.03em;}
body.wsp-seite .wsp-tipp__fuer{font-size:17px;font-weight:600;letter-spacing:-0.01em;}
body.wsp-seite .wsp-tipp__liste li{font-size:15px;color:var(--s15-text2);}
body.wsp-seite .wsp-tipp__liste li b{color:var(--s15-text);font-weight:600;}
body.wsp-seite .wsp-tipp__fuss{border-top:1px solid var(--s15-line);gap:18px;flex-wrap:wrap;}
body.wsp-seite .wsp-tipp__fuss .wsp-klein,
body.wsp-seite .wsp-nachsatz a{font-size:15px;}

/* ── 10 · Tabelle ────────────────────────────────────────────── */
body.wsp-seite .wsp-tab-rahmen{border:0;border-radius:0;background:transparent;}
body.wsp-seite .wsp-tab{font-size:15px;}
body.wsp-seite .wsp-tab th,
body.wsp-seite .wsp-tab td{padding:14px 16px;border-bottom:1px solid var(--s15-line);}
body.wsp-seite .wsp-tab thead th{border-bottom:1px solid var(--s15-line);}
body.wsp-seite .wsp-tab thead th[scope="col"]{
  font-family:inherit;font-size:15px;font-weight:600;letter-spacing:-0.01em;text-transform:none;
  color:var(--s15-text);
}
body.wsp-seite .wsp-tab th[scope="row"]{color:var(--s15-text2);}
body.wsp-seite .wsp-tab td{font-family:inherit;color:var(--s15-text);}
body.wsp-seite .wsp-tab .wsp-tab__spalte-aktiv{background:var(--s15-kc-tint);}
body.wsp-seite .wsp-tab thead th.wsp-tab__spalte-aktiv{color:var(--s15-link);}
body.wsp-seite .wsp--js .wsp-tab thead th[data-p]:hover:not(.wsp-tab__spalte-aktiv){background:var(--s15-bg2);color:var(--s15-link);}
html[data-theme="dark"] body.wsp-seite .wsp--js .wsp-tab thead th[data-p]:hover:not(.wsp-tab__spalte-aktiv){background:var(--s15-card);}
body.wsp-seite .wsp-tab tfoot td,
body.wsp-seite .wsp-tab tfoot th{border-top:1px solid var(--s15-line);border-bottom:0;}
body.wsp-seite .wsp-tab__knopf{
  height:36px;padding:0 16px;
  border:0;border-radius:980px;
  background:var(--s15-card2);color:var(--s15-text);
  font-family:inherit;font-size:14px;font-weight:500;
}
body.wsp-seite .wsp-tab__knopf:hover{background:var(--s15-chip);color:var(--s15-text);}
body.wsp-seite .wsp-tab__knopf--empfohlen,
html[data-theme="dark"] body.wsp-seite .wsp-tab__knopf--empfohlen{background:var(--s15-cta);color:#fff;}
body.wsp-seite .wsp-tab__knopf--empfohlen:hover,
html[data-theme="dark"] body.wsp-seite .wsp-tab__knopf--empfohlen:hover{background:var(--s15-ctah);color:#fff;}
html[data-theme="dark"] body.wsp-seite .wsp-tab__knopf:not(.wsp-tab__knopf--empfohlen){box-shadow:inset 0 0 0 1px var(--s15-feld-rand);}
body.wsp-seite .wsp-tab-hinweis{margin-top:18px;font-size:14px;color:var(--s15-text2);}

/* ── 11 · Sequenz «Gleich weit auseinander» ─────────────────── */
body.wsp-seite .wsp-seq__marke{
  font-family:inherit;font-size:17px;font-weight:600;letter-spacing:-0.01em;text-transform:none;
  color:var(--s15-link);
}
body.wsp-seite .wsp-seq__kurz{font-family:inherit;font-size:13px;font-weight:600;letter-spacing:0;}
body.wsp-seite .wsp-seq__wert,
body.wsp-seite .wsp-seq__haupt span{font-family:inherit;font-size:12px;}
body.wsp-seite .wsp-seq__bedarf-wort,
body.wsp-seite .wsp-seq__zone-wort{
  font-family:inherit;font-size:12px;font-weight:500;letter-spacing:0;text-transform:none;
}
body.wsp-seite .wsp-seq__zone-klammer{border-color:var(--s15-line);}
body.wsp-seite .wsp-seq[data-seite="links"] [data-zone="links"] .wsp-seq__zone-klammer,
body.wsp-seite .wsp-seq[data-seite="rechts"] [data-zone="rechts"] .wsp-seq__zone-klammer{border-color:var(--w-blau);}
body.wsp-seite .wsp-seq__wink{font-family:inherit;font-size:13px;letter-spacing:0;text-transform:none;color:var(--s15-text2);}
body.wsp-seite .wsp-seq__fenster{
  border:0;border-radius:18px;
  background:var(--s15-card);
  padding:16px 26px 14px;
}
body.wsp-seite .wsp-seq__fenster-zahl{font-family:inherit;}
body.wsp-seite .wsp-seq__fenster-einheit{font-family:inherit;font-size:14px;color:var(--s15-text2);}
body.wsp-seite .wsp-seq__fenster-name{
  font-family:inherit;font-size:12px;letter-spacing:0;text-transform:none;color:var(--s15-text2);
}
body.wsp-seite .wsp-seq__befund > span{font-size:15px;color:var(--s15-text2);}
body.wsp-seite .wsp-seq__schluss{font-size:17px;color:var(--s15-text2);}

/* Wahlschalter (Ruhefassung): dieselbe Sprache wie der Massstab. */
body.wsp-seite .wsp-seq__schalter-wort{
  font-family:inherit;font-size:14px;letter-spacing:0;text-transform:none;color:var(--s15-text2);
}
body.wsp-seite .wsp-seq__schalter button{
  min-height:40px;padding:9px 18px;
  border:1px solid var(--s15-feld-rand);border-radius:980px;
  background:transparent;color:var(--s15-text);
  font-size:15px;font-weight:400;
}
body.wsp-seite .wsp-seq__schalter button:hover{border-color:var(--s15-text);color:var(--s15-text);}
body.wsp-seite .wsp-seq__schalter button[aria-pressed="true"]{
  border-color:var(--w-blau);box-shadow:inset 0 0 0 1px var(--w-blau);
  background:var(--s15-kc-tint);color:var(--s15-link);
}
body.wsp-seite .wsp-seq__schalter-weg{font-size:15px;color:var(--s15-link);}

/* ── 12 · Schluss: das Schlussfeld der v15-Seiten ────────────────
   Feld, Schein, Titel, Text und Umkehrpille kommen aus start2.css
   (.s15-schluss*, `s15` steht am Abschnitt). Hier nur die Knopfgruppe wie
   .w15-schluss__knoepfe auf /ueberuns/werte — die Umkehrpille und der
   Textverweis nebeneinander, die Pille ohne ihr eigenes margin-top — und
   die drei Wege ruhig darunter. */
body.wsp-seite .wsp-schluss__knoepfe{
  margin-top:32px;display:flex;gap:18px 28px;
  align-items:center;justify-content:center;flex-wrap:wrap;
}
body.wsp-seite .wsp-schluss__knoepfe a.s15-schluss__knopf{margin-top:0;}
body.wsp-seite .wsp-schlussfeld .wsp-schluss__wege{margin-top:44px;padding-top:28px;}
body.wsp-seite .wsp-schlussfeld .wsp-weg__titel{font-size:15px;}
body.wsp-seite .wsp-schlussfeld .wsp-weg__text{font-size:13px;}

/* ── 13 · Schmal ─────────────────────────────────────────────── */
@media (max-width:700px){
  /* Fingerziele 44 px (shop-mobil.css hob «Bestellen» sichtbar auf 44 px;
     hier traegt die Trefferflaeche die Hoehe, die Pille bleibt 32). */
  body.wsp-seite .wsp-leiste__cta{height:32px;padding:0 14px;}
  body.wsp-seite .wsp-tab__knopf{height:44px;}
  body.wsp-seite .wsp-weg__titel{display:inline-flex;align-items:center;justify-content:center;min-height:44px;}
  body.wsp-seite .wsp-seq__schalter button{min-height:44px;}
  body.wsp-seite .wsp-tipp__fuss .wsp-klein{display:inline-flex;align-items:center;min-height:44px;}
}
@media (max-width:700px){
  /* Leiste am Telefon: die Groessen als 44-px-Reiter (Fingerziel) ohne
     Schiene — mit Schiene ragten sie 18 px unter die 52-px-Leiste. Die
     Flaeche der gewaehlten Groesse ist 28 px hoch und liegt mittig im
     Ziel; der Laeufer faellt hier weg, die Flaeche zeigt die Wahl. Die
     Schiene bleibt im Baum (nur unsichtbar und ohne Hoehe): entdecken.js
     misst an ihr die Spanne. */
  body.wsp-seite .wsp-mass--leiste .wsp-mass__schiene{visibility:hidden;height:0;margin:0;}
  body.wsp-seite .wsp-mass--leiste .wsp-mass__stopps{height:44px;}
  body.wsp-seite .wsp-mass--leiste .wsp-mass__stopp{
    height:44px;min-height:44px;min-width:34px;padding:0 6px;justify-content:center;
    isolation:isolate;
  }
  body.wsp-seite .wsp-mass--leiste .wsp-mass__stopp[aria-selected="true"]{background:transparent;}
  body.wsp-seite .wsp-mass--leiste .wsp-mass__stopp[aria-selected="true"]::before{
    content:'';position:absolute;left:0;right:0;top:8px;bottom:8px;z-index:-1;
    border-radius:980px;background:var(--s15-kc-tint);
  }
  body.wsp-seite .wsp-mass--leiste .wsp-mass__stopp::after{inset:0;}
}
@media (max-width:620px){
  body.wsp-seite .wsp-auf{padding-top:32px;gap:26px;}
  /* Sechs Pillen auf 350 px: enger, sonst stossen sie aneinander. */
  body.wsp-seite .wsp-mass__stopp{padding:6px 6px 5px;border-radius:12px;}
  body.wsp-seite .wsp-mass__kurz{font-size:13px;}
  body.wsp-seite .wsp-leiste{grid-template-columns:auto minmax(0,1fr) auto;gap:10px;}
  body.wsp-seite .wsp-leiste__name{font-size:19px;}
  /* Ist der Massstab in der Leiste, braucht er die Breite: der Name geht. */
  body.wsp-seite .wsp-leiste.ist-unterwegs .wsp-leiste__name{display:none;}
}
@media (max-width:380px){
  body.wsp-seite .wsp-mass__stopp{padding:5px 5px 4px;}
}