/* ==========================================================================================================
   MARC HAID — the shared system for every page beside the homepage.

   The homepage is one scroll-driven journey and keeps its own act CSS. Everything that is NOT an act lives
   here: the tokens, the chrome, the fullscreen menu, the type scale, the glass card, the accordion and the
   form. A subpage is one location in the same mountain world: a fixed plate behind a single editorial column,
   the same ink, the same burgundy, the same glass. No second design system.
   ========================================================================================================== */

:root {
  --ground: #0B0A0A; --ink: #ECECEC; --ink-dim: #8A8A8A; --ink-on-sky: #1A1A1A;
  --display: "Urbanist", "Jost", system-ui, sans-serif;
  --stone: #141312;
  --wine: #330008; --wine-deep: #1C0004; --wine-mid: #6A121D; --wine-light: #9B2B39;
  --wine-hover: rgb(150, 62, 70);   /* the burgundy above, 12 % more presence: same hue, same saturation */
  --cta: #5E1019; --cta-hover: #76141F; --cta-ink: #F8F4F2;
  --safe: 13vw;
  --hh: 0.5628vw;
}

*, *::before, *::after { box-sizing: border-box; }
/* Nutzer 2026-09-16: rechts zu viel Hintergrund sichtbar (Karten-Wischreihen korrekt abgeschnitten, aber
   dahinter zu breite Flaeche) - overflow-x:hidden stand bisher nur auf body, nicht auf html. document.
   documentElement.scrollWidth war messbar breiter als body.scrollWidth (733px statt 430px): body klemmt sein
   eigenes Overflow, aber #world (jetzt position:absolute mit Full-Bleed-Ueberstand) drueckte trotzdem durch die
   eigentliche Scroll-/Sichtflaeche (html) durch. Betrifft nur die unsichtbare Scroll-Breite, keine Karten,
   kein Design, keine #world-Komposition selbst. */
html { scroll-behavior: smooth; }
html, body { margin: 0; background: #CFCECC; color: var(--ink-on-sky); font-family: var(--display); font-size: 16px;
  line-height: normal; letter-spacing: normal; -webkit-font-smoothing: antialiased; }
  /* overscroll-behavior-y:none stand hier (Nutzer 2026-09-16: dachte, es verhindert einen hellen Gummiband-Blitzer),
     aber es kann Safaris automatisches Einklappen der Adressleiste beim Scrollen blockieren - vermutlich der Grund
     fuer den staendig "fetten" Balken. Nicht mehr noetig: html/body haben jetzt schon die richtige echte Farbe
     (siehe body.dark weiter unten), ein Bounce faellt also ohnehin auf die passende Farbe, nicht mehr auf helles Grau. */
body { overflow-x: hidden; }
/* 2026-09-17, Vergleich mit der Startseite: dort steht body auf overflow-x: clip (scrollcraft.css), hier auf hidden. hidden
   macht den Seitenueberlauf zum Scroll-Container des Bildschirms - auf den Unterseiten lief die Seite in Safari nie bis hinter
   Uhrzeit und Akku, auf der Startseite schon. Am Handy wie auf der Startseite: clip (schneidet genauso ab, ohne Scroll-Container).
   Dazu die zwei Reste, die es auf der Startseite nicht gibt: der unsichtbare dunkle Verlauf .ptop an der Oberkante der Kopfzeile. */
@media (max-width: 860px) { body { overflow-x: clip; } #chrome .ptop { display: none !important; } }
/* Nutzer 2026-09-16: heller Rand oben/unten auf dunklen Seiten (Store etc.) trotz korrektem theme-color: body.dark
   (Zeile ~80) faerbt nur die Schrift, nie den Hintergrund. Die Dunkelheit kam bisher nur von Bild-/Verlaufsebenen
   INNERHALB der Sections - an echten Raendern (Sicherheitsabstand hinter der Statusleiste, Overscroll-Bounce)
   blieb darunter die helle Grundfarbe sichtbar. Jetzt faerbt sich die echte Leinwand mit, nicht nur der Inhalt. */
body.dark, html:has(body.dark) { background: #0B0A0A; }
/* Nutzer 2026-09-16: heller Balken am unteren Rand NUR als installierte Home-Bildschirm-App (display-mode:
   standalone), nicht im normalen Safari-Tab: dort gibt es keine Browser-Leiste mehr, die den Sicherheitsabstand
   fuer die Wisch-Geste unten abdeckt - dieser Streifen bekommt in Alleinstellung offenbar nicht zuverlaessig
   die echte Hintergrundfarbe. Eigene feste Flaeche exakt in dieser Hoehe, in der richtigen Farbe, behebt das. */
@media (display-mode: standalone) {
  body::after { content: ""; position: fixed; left: 0; right: 0; bottom: 0; height: env(safe-area-inset-bottom, 0px);
    background: #CFCECC; z-index: 9999; pointer-events: none; }
  body.dark::after { background: #0B0A0A; }
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }

/* ---------------------------------------------------------------------------------- the world behind a page */
/* One plate, held still behind the column, drifting a little with the scroll. Bled 2px past the viewport for the
   same reason the homepage does it: a fixed box that ends exactly on the edge can leave a sub-pixel seam. */
#world { position: fixed; inset: -2px; z-index: 0; overflow: clip; background: #CFCECC; pointer-events: none; }
/* Desktop: #world-rahmen ist unsichtbar (display:contents), #world bleibt position:fixed. */
#world-rahmen { display: contents; }
/* Mobile: kein fixed-Layer und kein Skript beim Scrollen. #world ist position:sticky in einem Rahmen, der so hoch
   wie die ganze Seite ist - Safari bewegt es selbst im Scroll-Takt (kein Nachziehen per JS, kein Ruckeln), und
   weil es normaler Seiteninhalt ist, scheint es unter den Safari-Leisten durch. Der Rahmen ist so breit wie der
   Bildschirm und schneidet ab (overflow:clip, das macht ihn nicht zum Scroll-Container - sonst griffe sticky
   nicht). html darf deshalb kein overflow bekommen. 100lvh = Hoehe bei eingeklappter Leiste, reicht also auch
   bis hinter die Leiste. */
@media (max-width: 860px) {
  body { position: relative; }
  #world-rahmen { display: block; position: absolute; top: 0; left: 0; bottom: 0; width: 100%; overflow: clip;
    pointer-events: none; z-index: 0; }
  #world { position: sticky; inset: auto; top: 0; width: 100%;
    height: 100vh; height: 100lvh; }
}
/* Nutzer 2026-09-16: sticky scrollt sauber, aber Safari behandelt sticky genauso wie fixed als "am Bildschirm
   angeheftet" und legt unten wieder seinen eigenen Balken darueber. Der balkenfreie Zustand war #world als
   gewoehnlicher Seiteninhalt (absolute + translateY(scrollY)) - der ruckelte nur, weil JS nachgezogen hat.
   Dasselbe ohne JS: eine scroll-getriebene Animation, die Safari selbst im Scroll-Takt rechnet. translateY laeuft
   von 0 bis (Seitenhoehe - sichtbare Hoehe) = genau scrollY. --mh-doc (Seitenhoehe) setzt site.js nur, wenn sich
   die Seitenhoehe aendert, nie beim Scrollen. Browser ohne scroll-getriebene Animationen behalten sticky. */
@keyframes mh-welt-mit {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(0, calc(var(--mh-doc, 0px) - 100dvh), 0); }
}
@supports (animation-timeline: scroll()) {
  @media (max-width: 860px) {
    /* +90px: auf dem iPhone endet 100lvh ueber Safaris unterer Leiste (Nutzer-Screenshot 2026-09-16: dort
       dunkler Streifen). Das Bild reicht jetzt bis unter die Leiste. */
    /* Seitenende (Nutzer-Screenshot 2026-09-16): Impressum soll ganz unten direkt ueber Safaris Knopf stehen.
       Kein Zusatzplatz unter dem Footer, und dessen eigener Abstand nach unten (4vh + Sicherheitsabstand, rund
       70px) schrumpft auf einen kleinen Rest. */
    /* Nachgemessen an den iPhone-Screenshots (2000px hoch = 932pt, Faktor 2,15): ganz unten endet die Seite bei
       Safari IMMER ~14pt ueber der Oberkante des Adress-Knopfs (eingeklappt: Seitenende 1875px, Knopf 1903px;
       ausgeklappt: 1790px / 1825px). Darunter malt Safari selbst, nicht die Seite. Damit das Scrollen stoppt,
       wenn Impressum direkt ueber dem Knopf steht, darf unter Impressum fast kein Platz mehr sein: 6px. */
    body[class] .pfoot { padding-bottom: 6px; }
    /* am Seitenende nicht weiter federn - sonst zieht Safari die Seite ueber ihr Ende hinaus hoch und zeigt Schwarz */
    html, body { overscroll-behavior: none; }
    /* iPhone (Nutzer-Screenshot Coaching, 2026-09-16): in Safari lag der helle Nebel (::before/::after, eigene
       Ebenen wegen will-change) UEBER der dunklen Abdunkelung, obwohl die z-index hoeher hat - in Chrome korrekt.
       Abdunkelung, Schleier und Licht bekommen ebenfalls eine eigene Ebene, dann stimmt die Reihenfolge. */
    #world-rahmen #world .pscrim, #world-rahmen #world .pveil, #world-rahmen #world .pglow { will-change: transform; transform: translateZ(0); }
    /* Menue (Nutzer 2026-09-16: "im Menue auch noch dieser schwarze Balken"): wie #world gewoehnlicher Seiteninhalt,
       der per Scroll-Animation mitlaeuft und bis unter Safaris Leiste reicht; unten Platz, damit nichts darunter liegt */
    #menue-rahmen #qnav { position: absolute; top: 0; right: auto; bottom: auto; left: 0; width: 100%; height: calc(100lvh + 90px);
      padding-bottom: calc(8vh + 90px); box-sizing: border-box;
      animation: mh-welt-mit linear both; animation-timeline: scroll(root block); }
    /* 2026-09-17: exakt die Startseiten-Architektur (hero-test/index.html), fuer alle Unterseiten gemeinsam.
       1) Hintergrund reicht oben 70px ueber den Rand - Safari zeichnet beim Scrollen auch hinter der Statusleiste Seiteninhalt;
          vorher endete #world an der Oberkante, darueber lag nur die dunkle Seitenfarbe.
       2) Mitlaufen in gescrollten Pixeln 1:1 (mh-kopf) statt mit der Bildschirmhoehe, die Safari beim Leistenwechsel verzoegert meldet.
       3) Kopfzeile fixed, aber 0px hoch - nichts Festes beruehrt den unteren Rand; ihre Elemente bleiben exakt, wo sie sind. */
    #world-rahmen #world { position: absolute; top: -70px; left: 0; height: calc(100lvh + 90px + 70px);
      animation: mh-kopf linear both; animation-timeline: scroll(root block); animation-range: 0px var(--mh-doc, 100000px); will-change: transform; }
    #chrome { position: fixed; top: 0; left: 0; right: auto; bottom: auto; width: 100%; height: 0; overflow: visible; transform: translateZ(0); }
  }
}
@keyframes mh-kopf { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, var(--mh-doc, 100000px), 0); } }
/* Nutzer 2026-09-16, echte Diagnose statt weiterer Patches: #world liegt fest vor body und deckt den ganzen
   Schirm ab - seine eigene Basisfarbe blieb aber auf JEDER Seite hell (#CFCECC), auch auf body.dark. Ueberall,
   wo die Foto-Ebenen (.pw--far, .pw--near) den Rand von #world nicht exakt bis auf den Pixel abdecken - egal aus
   welchem genauen Grund - scheint diese hart codierte helle Flaeche durch, unabhaengig von jedem body/html-Fix,
   weil #world davor liegt. Das war die tatsaechliche Ursache der hellen Balken, nicht Safaris eigene UI. */
body.dark #world { background: #0B0A0A; }
/* max-width: 100% from the base rules for images was quietly capping every layer at the width of the frame,
   which is why the overscan had no effect on the sides and a mask fade landed inside the picture */
#world .pw, #world .pfog { max-width: none; }
#world .pw { position: absolute; object-fit: cover; object-position: var(--pw-pos, 50% 50%); will-change: transform; }
/* the distance: it barely moves and pushes in over the whole page — 1.12 leaves 6 % of headroom on every side,
   and the travel below never uses more than a third of it */
/* the distance: a box 10 % larger than the frame on every side, so its own edges are never in it. It holds
   almost still and pushes in across the page. */
#world .pw--far { inset: -10% -12%; width: 124%; height: 120%;
  transform: translate3d(0, calc(var(--pf, 0) * 1px), 0) scale(calc(1.03 + var(--pz, 0) * 0.13));
  transform-origin: 50% 44%; }
/* the ground: the same picture, kept only where the rock is, moving faster and growing faster. The mask has no
   edge of its own — it fades in across a third of the frame, so the two layers are one landscape */
/* the ground: the same picture, on a box 16 % wider and 15 % taller than the frame, kept only where the rock
   is. The mask is feathered on all four sides and composited, so it ends in nothing in every direction — no
   boundary can ever cross the frame. It travels further and grows faster than the distance. */
#world .pw--near { inset: -15% -16%; width: 132%; height: 130%;
  transform: translate3d(0, calc(var(--pn, 0) * 1px), 0) scale(calc(1.06 + var(--pz, 0) * 0.24));
  transform-origin: 50% 88%;
  -webkit-mask-image: linear-gradient(to bottom, transparent 22%, rgba(0, 0, 0, 0.35) 38%, rgba(0, 0, 0, 0.82) 56%, #000 72%, #000 88%, rgba(0, 0, 0, 0.55) 96%, transparent 100%),
    linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.6) 7%, #000 15%, #000 85%, rgba(0, 0, 0, 0.6) 93%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 22%, rgba(0, 0, 0, 0.35) 38%, rgba(0, 0, 0, 0.82) 56%, #000 72%, #000 88%, rgba(0, 0, 0, 0.55) 96%, transparent 100%),
    linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.6) 7%, #000 15%, #000 85%, rgba(0, 0, 0, 0.6) 93%, transparent 100%);
  -webkit-mask-composite: source-in; mask-composite: intersect; }
/* the air between them: one existing mist plate, wider than the frame, drifting sideways at a walking pace */
/* the air between them: wider than the frame by a quarter, faded out on every side, moving at a pace between
   the two rock layers */
#world .pfog { position: absolute; left: -24%; top: -10%; width: 148%; height: 104%; object-fit: cover; opacity: calc(0.3 + var(--pz, 0) * 0.12);
  transform: translate3d(calc(var(--pg, 0) * 1px), calc(var(--pgy, 0) * 1px), 0) scale(1.04);
  -webkit-mask-image: radial-gradient(72% 62% at 50% 46%, #000 0%, #000 46%, rgba(0, 0, 0, 0.55) 72%, transparent 100%);
  mask-image: radial-gradient(72% 62% at 50% 46%, #000 0%, #000 46%, rgba(0, 0, 0, 0.55) 72%, transparent 100%);
  will-change: transform; pointer-events: none; }
body.dark #world .pfog { opacity: calc(0.22 + var(--pz, 0) * 0.12); }
/* the light in the valley: a wash that only ever brightens the middle of the frame and reaches nothing at its
   own edges, so it can never draw a shape. It comes up as we move deeper in. */
#world .pglow { position: absolute; inset: -6%; pointer-events: none;
  background: radial-gradient(58% 42% at 50% 54%, rgba(246, 244, 241, 0.16) 0%, rgba(246, 244, 241, 0.07) 44%, rgba(246, 244, 241, 0.02) 72%, rgba(246, 244, 241, 0) 100%);
  opacity: calc(0.3 + var(--pz, 0) * 0.7); }
#world .pscrim { position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(238, 237, 235, 0.62) 0%, rgba(238, 237, 235, 0.42) 26%,
    rgba(238, 237, 235, 0.54) 58%, rgba(238, 237, 235, 0.74) 100%); }
#world .pveil { position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(238, 237, 235, 0.72) 0%, rgba(238, 237, 235, 0.44) 42%, rgba(238, 237, 235, 0.12) 78%, rgba(238, 237, 235, 0) 100%); }
/* the dark chapters hold their ink the other way round */
body.dark #world .pscrim { background: linear-gradient(to bottom, rgba(10, 10, 12, 0.52) 0%, rgba(10, 10, 12, 0.34) 30%,
  rgba(10, 10, 12, 0.46) 62%, rgba(10, 10, 12, 0.7) 100%); }
body.dark #world .pveil { background: linear-gradient(to right, rgba(10, 10, 12, 0.6) 0%, rgba(10, 10, 12, 0.36) 44%, rgba(10, 10, 12, 0.06) 80%, rgba(10, 10, 12, 0) 100%); }
body.dark { color: #F2F0ED; }

/* ---------------------------------------------------------------------------------------------- the chrome */
#chrome { position: fixed; inset: 0; z-index: 6; pointer-events: none; --d: 1; --dr: 1; }
#anfangen, #weiter { padding-top: 3.4vh; }
#waehlen { padding-top: 4.5vh; }
#chrome .ptop { position: absolute; left: 0; right: 0; top: 0; height: 13vh; pointer-events: none;
  background: linear-gradient(to bottom, rgba(246, 244, 241, 0.82) 0%, rgba(246, 244, 241, 0.44) 44%, rgba(246, 244, 241, 0) 100%);
  -webkit-backdrop-filter: blur(2.4px); backdrop-filter: blur(2.4px);
  -webkit-mask-image: linear-gradient(to bottom, #000 0 46%, rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(to bottom, #000 0 46%, rgba(0, 0, 0, 0) 100%); }
body.dark #anfangen, #weiter { padding-top: 3.4vh; }
#waehlen { padding-top: 4.5vh; }
#chrome .ptop { background: linear-gradient(to bottom, rgba(10, 10, 12, 0.78) 0%, rgba(10, 10, 12, 0.42) 44%, rgba(10, 10, 12, 0) 100%); }
/* TEMPORAeR, Nutzer 2026-09-16: isolierter Test - .ptop ist eine 78%-dunkle, geblurte Abdunkelung oben (fuer die
   Lesbarkeit der Kopfzeile ueber hellen Fotos), liegt auf z-index 6, komplett getrennt von #world. Kandidat fuer
   den oberen Block. Testweise ausgeblendet, danach je nach Ergebnis wieder rein oder gezielt reduziert. */
#chrome .ptop { opacity: 0 !important; }
#chrome a { pointer-events: auto; }
#chrome .c { position: absolute; display: block; margin: 0; white-space: nowrap; text-transform: uppercase; font-weight: 300; }
.ink2 { position: relative; }
.ink2 .l, .ink2 .k { display: block; }
.ink2 .k { position: absolute; left: 0; top: 0; }
.ink2 .l { color: var(--ink); opacity: calc(1 - var(--dd)); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7), 0 0 12px rgba(0, 0, 0, 0.4); }
.ink2 .k { color: var(--ink-on-sky); opacity: var(--dd); text-shadow: 0 1px 3px rgba(255, 255, 255, 0.85), 0 0 12px rgba(255, 255, 255, 0.6); }
#chrome .c, #chrome .c * { transition: opacity 420ms ease; }

#marc-haid { left: 2.4vw; top: calc(4.5 * var(--hh)); font-size: 1.37vw; letter-spacing: 0.42em; --dd: var(--d); }
#marc-haid .l, #marc-haid .k { display: flex; align-items: center; gap: 1.47vw; }
#marc-haid .l::after, #marc-haid .k::after { content: ""; display: block; width: 1.5vw; height: 1px; background: currentColor; opacity: 0.6;
  /* der Wortmarke haengt ihr Sperrsatz hinten an: der Strich rueckt um diesen Rest nach links,
     damit links und rechts von ihm optisch gleich viel Luft steht */
  margin-left: -0.21em; }
#menu { left: auto; right: 2.4vw; top: calc(4.9 * var(--hh)); font-size: 0.98vw; letter-spacing: 0.35em; --dd: var(--dr); }
#menu .l, #menu .k { display: flex; align-items: center; gap: 0.9vw; }
#menu .icon { display: block; width: 1.6vw; height: 0.9vw; position: relative; }
#menu .icon::before, #menu .icon::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: currentColor; }
#menu .icon::before { top: 0; } #menu .icon::after { bottom: 0; }
#lang { left: 2.4vw; right: auto; top: calc(8.9 * var(--hh)); font-size: 0.74vw; letter-spacing: 0.3em; --dd: var(--dr); }
#lang .l, #lang .k { display: flex; align-items: center; gap: 0.55vw; }
#lang a { text-decoration: none; color: inherit; opacity: 0.42; transition: opacity 300ms ease; padding: 0.3vw 0; }
#lang a:hover, #lang a.is-on { opacity: 1; }
#lang i { display: block; width: 1px; height: 0.9vw; background: currentColor; opacity: 0.35; }
/* Waehrung EUR | USD unter DE | EN, nur im englischen Modus und nur auf Seiten mit Preisen (Store, Coaching, Optionen) */
#chrome #waehrung { display: none; left: 2.4vw; right: auto; top: calc(11.9 * var(--hh)); font-size: 0.74vw; letter-spacing: 0.3em; --dd: var(--dr); }
html[lang="en"] #chrome #waehrung { display: block; }
#waehrung .l, #waehrung .k { display: flex; align-items: center; gap: 0.55vw; }
#waehrung a { text-decoration: none; color: inherit; opacity: 0.42; transition: opacity 300ms ease; padding: 0.3vw 0; }
#waehrung a:hover, #waehrung a.is-on { opacity: 1; }
#waehrung i { display: block; width: 1px; height: 0.9vw; background: currentColor; opacity: 0.35; }
#coach { left: calc(2.4vw + 15vw + 1.66vw); right: auto; top: calc(4.2 * var(--hh)); font-size: 0.86vw; letter-spacing: 0.32em; --dd: var(--dr); }
.coach-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px;
  padding: 0.5vw 1.15vw; isolation: isolate; transition: background 420ms ease, box-shadow 420ms ease;
  --light-width: 92px; --duration: 3.2s; --light-color: #8A1B2C; --border-width: 2px; }
/* the same travelling light the homepage carries: the halo is a filter on the PARENT of the mask, because a
   mask is applied after a filter and would otherwise cut the glow away */
.coach-halo { position: absolute; inset: 0; z-index: 1; border-radius: inherit; pointer-events: none;
  filter: drop-shadow(0 0 4px rgba(132, 24, 46, 1)) drop-shadow(0 0 12px rgba(120, 20, 40, 0.95)) drop-shadow(0 0 26px rgba(104, 14, 32, 0.78)) drop-shadow(0 0 58px rgba(88, 12, 26, 0.55)); }
.coach-band { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; padding: var(--border-width);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; }
.coach-light { position: absolute; left: 0; top: 0; width: var(--light-width); aspect-ratio: 1 / 1; pointer-events: none; opacity: 0;
  offset-path: var(--path); offset-distance: 0%; offset-anchor: 50% 50%; offset-rotate: 0deg;
  background: radial-gradient(ellipse at center, var(--light-color) 0%, color-mix(in srgb, var(--light-color) 62%, transparent) 22%,
    color-mix(in srgb, var(--light-color) 28%, transparent) 42%, color-mix(in srgb, var(--light-color) 8%, transparent) 62%, transparent 82%, transparent 100%);
  transition: opacity 420ms ease; }
.coach-ring { position: absolute; inset: 0; z-index: 2; border-radius: inherit; border: 1px solid currentColor; opacity: 0.72; pointer-events: none; }
.coach-face { position: relative; z-index: 3; }
#coach .l .coach-btn { --light-color: #A62335; }
#coach .l .coach-halo { filter: drop-shadow(0 0 4px rgba(190, 46, 66, 1)) drop-shadow(0 0 12px rgba(174, 38, 58, 0.95)) drop-shadow(0 0 26px rgba(152, 30, 48, 0.8)) drop-shadow(0 0 58px rgba(128, 22, 38, 0.6)); }
#coach .k .coach-btn { background: rgba(252, 251, 250, 0.06); }
#coach .l .coach-btn { background: rgba(18, 16, 16, 0.06); }
#coach:hover .coach-ring { opacity: 1; }
#coach:hover .coach-light { opacity: 1; animation: coaching-perimeter-light var(--duration) linear infinite; }
#coach:hover .coach-btn { box-shadow: 0 0 16px rgba(51, 0, 8, 0.28), 0 0 38px rgba(51, 0, 8, 0.16); }
@keyframes coaching-perimeter-light { 0% { offset-distance: 0%; } 100% { offset-distance: 100%; } }
@media (hover: none) { #coach:hover .coach-light { opacity: 0; animation: none; } }

/* --------------------------------------------------------------------------------------- the fullscreen menu */
#qnav { position: fixed; inset: 0; z-index: 7; background: rgba(11, 10, 10, 0.86); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); color: var(--ink);
  display: grid; grid-template-columns: 1.2fr 1fr; gap: 6vw; padding: 14vh 10vw 10vh; opacity: 0; visibility: hidden;
  transition: opacity 360ms ease, visibility 0s linear 360ms; }
#qnav.open { opacity: 1; visibility: visible; transition: opacity 360ms ease; }
#qnav .close { position: absolute; right: 8.4vw; top: calc(4.9 * var(--hh)); font-size: 0.98vw; letter-spacing: 0.35em; text-transform: uppercase; font-weight: 300; color: var(--ink); }
#qnav h4 { margin: 0 0 1.6rem; font-size: 0.66rem; letter-spacing: 0.34em; text-transform: uppercase; font-weight: 400; color: var(--ink-dim); }
#qnav ol, #qnav ul { list-style: none; margin: 0; padding: 0; }
#qnav li a { display: grid; grid-template-columns: 3.2rem 1fr; align-items: baseline; gap: 1rem; padding: 0.6rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1); font-weight: 200; font-size: clamp(22px, 2.4vw, 40px); line-height: 1.1; transition: color 250ms ease; }
#qnav li a:hover { color: var(--wine-hover); }
#qnav li a small { font-size: 0.7rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--ink-dim); font-weight: 400; }
#qnav li a .d { display: block; font-size: 0.72rem; letter-spacing: 0.06em; color: var(--ink-dim); font-weight: 300; margin-top: 0.2rem; }
#qnav .pages li a { grid-template-columns: 1fr; font-size: clamp(18px, 1.6vw, 26px); }
#qnav .pages li a.here { color: var(--wine-hover); }
.qnav-lang { position: absolute; left: 10vw; top: calc(4.9 * var(--hh)); display: flex; align-items: center; gap: 0.7rem; margin: 0; font-size: 0.68rem; letter-spacing: 0.3em; text-transform: uppercase; font-weight: 300; }
.qnav-lang a { color: var(--ink-dim); opacity: 0.7; transition: opacity 300ms ease, color 300ms ease; }
.qnav-lang a:hover, .qnav-lang a.is-on { opacity: 1; color: var(--ink); }
.qnav-lang i { display: block; width: 1px; height: 0.8rem; background: currentColor; opacity: 0.3; }
/* Waehrung EUR | USD rechts neben DE | EN im Menue, nur auf Englisch (Nutzer 2026-09-14: im Kopf war es zu viel) */
.qnav-cur { left: calc(10vw + 5.6rem); }
html:not([lang="en"]) .qnav-cur { display: none; }
/* dieselbe Wahl auch im Warenkorb ueber der Summe */
.korb-waehrung { display: flex; justify-content: flex-end; align-items: center; gap: 0.6rem; margin: 0 0 0.8rem;
  font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; font-weight: 500; }
.korb-waehrung a { color: #8F8882; text-decoration: none; transition: color 300ms ease; }
.korb-waehrung a:hover, .korb-waehrung a.is-on { color: #F4F1EE; }
.korb-waehrung i { display: block; width: 1px; height: 0.7rem; background: currentColor; opacity: 0.35; }
/* Menue neu gewichtet (Nutzer 2026-09-12): die Seiten sind die eigentliche Navigation und stehen vorne und gross, The Journey
   (Sprungmarken der Startseite) als kleinere zweite Spalte, auf dem Handy darunter und kompakt. Die Reihenfolge im Markup ist
   mitgetauscht (Tab-Reihenfolge, Handy); "body" gewichtet hoeher, damit das gegen die alten Groessen in allen Breiten gilt */
body #qnav .pages li a { font-size: clamp(22px, 2.4vw, 40px); }
body #qnav .journey li a { grid-template-columns: 2.6rem 1fr; gap: 0.8rem; padding: 0.5rem 0; font-size: clamp(16px, 1.3vw, 21px); }
body #qnav .journey li a small { font-size: 0.62rem; }
body #qnav .journey li a .d { font-size: 0.66rem; margin-top: 0.15rem; }
@media (max-width: 1024px) {
  body #qnav .pages li a { font-size: 24px; }
  body #qnav .journey li a { font-size: 18px; grid-template-columns: 2.4rem 1fr; }
  body #qnav .journey li a .d { display: none; }
}
@media (max-width: 860px) {
  body #qnav .pages li a { font-size: 22px; }
  body #qnav .journey li a { font-size: 17px; padding: 0.45rem 0; }
}

/* ------------------------------------------------------------------------------------------------- the type */
.eyebrow { font-size: 0.72rem; letter-spacing: 0.32em; text-transform: uppercase; font-weight: 500; color: var(--wine-mid); margin: 0 0 0.9rem; }
body.dark .eyebrow { color: #E8E4E0; }
.psec-head.kick .eyebrow { color: var(--wine-mid); font-size: 0.7rem; letter-spacing: 0.4em; text-indent: 0.42em;
  font-weight: 500; margin: 0 0 1rem; }
body.dark .psec-head.kick .eyebrow { color: #B02F3E; font-weight: 600;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 0 6px rgba(0, 0, 0, 0.35); }
.psec-head.kick .eyebrow::after { content: ""; display: block; width: 17px; height: 1px;
  margin: 0.85rem auto 0; background: var(--wine-light); opacity: 1; vertical-align: baseline;
  box-shadow: 0 0 8px rgba(155, 43, 57, 0.55); }
.psec-head.kick p.lede { max-width: 40ch; }
.eyebrow::after { content: ""; display: inline-block; width: 2.4vw; height: 1px; background: var(--wine-light); margin-left: 1vw; vertical-align: middle; }
h1.head, h2.head { margin: 0; font-weight: 100; font-size: clamp(30px, 3.3vw, 58px); line-height: 1.06; letter-spacing: 0.01em; text-wrap: balance; }
h1.head { font-size: clamp(34px, 4.4vw, 76px); }
h3.sub { margin: 0; font-weight: 200; font-size: clamp(20px, 1.75vw, 31px); line-height: 1.14; letter-spacing: 0.005em; }
p.lede { margin: 1.15rem 0 0; font-weight: 300; font-size: clamp(15px, 1.12vw, 20px); line-height: 1.55; letter-spacing: 0.01em; color: #3A3835; max-width: 46ch; }
body.dark p.lede { color: #D9D4CF; }
p.body { margin: 1rem 0 0; font-weight: 300; font-size: clamp(14px, 1vw, 17px); line-height: 1.62; color: #33302D; max-width: 62ch; }
body.dark p.body { color: #CFCAC5; }
.rule { width: 30px; height: 1px; background: var(--wine-light); margin: 1.2rem 0 0; }
.note { margin: 0.6rem 0 0; font-size: 0.66rem; letter-spacing: 0.22em; text-transform: uppercase; color: #6A6663; font-weight: 500; }
body.dark .note { color: #ADA6A1; }

/* --------------------------------------------------------------------------------------------- the sections */
main.page { position: relative; z-index: 1; }
.psec { position: relative; padding: 6.5vh var(--safe) 6.5vh; }
.psec--tight { padding-top: 4.5vh; padding-bottom: 4.5vh; }
.psec-head { max-width: 40ch; }
.psec-head.center { max-width: 46ch; margin: 0 auto; text-align: center; }
.psec-head.center .eyebrow::after { display: none; }
.psec-head.center .rule { margin-left: auto; margin-right: auto; }
.psec-head.center p.lede { margin-left: auto; margin-right: auto; }

/* the page hero: one screen, the title low in the frame, the way the chapters open on the homepage */
.phero { position: relative; min-height: 72vh; display: flex; flex-direction: column; justify-content: flex-end;
  padding: 20vh var(--safe) 8vh; }
.phero h1.head { max-width: 18ch; }
.phero p.lede { max-width: 40ch; }
.phero .kicker { margin: 2.4rem 0 0; display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; }
/* Knopf plus Textlink auch in Abschnitten als Zeile (Ueber mich, Tools): der Link bricht als Ganzes um, nicht in sich */
.psec .kicker { display: flex; align-items: center; gap: 1rem 1.3rem; flex-wrap: wrap; }
.kicker .textlink { white-space: nowrap; }
/* the one hero that carries a person: the portrait stands beside the copy, not behind it */
.phero--split { display: grid; grid-template-columns: 1.25fr 0.75fr; gap: 5vw; align-items: end; }
.phero--split .portrait { margin: 0; position: relative; }
.phero--split .portrait img { display: block; width: 100%; height: auto; border-radius: 18px;
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.75); filter: grayscale(0.15) contrast(1.02); }
@media (max-width: 860px) { .phero--split { grid-template-columns: minmax(0, 1fr); gap: 3vh; align-items: start; }
  .phero--split .portrait { max-width: 62vw; } }

/* -------------------------------------------------------------------------------------------- the glass card */
.card2 { position: relative; border-radius: 18px; padding: 1.7rem 1.6rem 1.6rem; color: var(--ink-on-sky);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.62) 0%, rgba(255, 255, 255, 0.3) 60%), rgba(244, 243, 241, 0.66);
  border: 1px solid rgba(52, 46, 44, 0.18);
  backdrop-filter: blur(12px) saturate(1.06); -webkit-backdrop-filter: blur(12px) saturate(1.06);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 30px 60px -34px rgba(38, 30, 26, 0.5), 0 4px 12px -6px rgba(38, 30, 26, 0.18); }
.card2 .step { display: flex; align-items: center; gap: 0.7rem; margin: 0; font-size: 0.6rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--wine-mid); font-weight: 500; }
.card2 .step::after { content: ""; flex: 1 1 auto; height: 1px; background: linear-gradient(to right, rgba(110, 31, 42, 0.35), rgba(110, 31, 42, 0)); }
.card2 h3 { margin: 0.85rem 0 0; font-weight: 200; font-size: clamp(19px, 1.55vw, 28px); line-height: 1.1; }
.card2 .claim { margin: 0.7rem 0 0; font-size: clamp(13px, 0.96vw, 17px); font-weight: 400; line-height: 1.35; color: var(--wine-mid); }
.card2 p { margin: 0.6rem 0 0; font-weight: 300; font-size: clamp(13px, 0.92vw, 16px); line-height: 1.55; color: #17150F; }
.card2 ul { list-style: none; margin: 1.2rem 0 0; padding: 1rem 0 0; border-top: 1px solid rgba(72, 62, 56, 0.14); position: relative; }
.card2 ul::before { content: ""; position: absolute; left: 0; top: -1px; width: 34px; height: 1px; background: var(--wine-mid); opacity: 0.55; }
.card2 li { display: flex; gap: 0.65rem; align-items: flex-start; padding: 0.42rem 0; font-size: clamp(12px, 0.84vw, 15px); line-height: 1.45; font-weight: 400; color: #17150F; }
.card2 li::before { content: ""; flex: 0 0 14px; width: 14px; height: 14px; margin-top: 0.12em; border-radius: 50%; border: 1px solid rgba(110, 31, 42, 0.45);
  background: radial-gradient(circle at 50% 50%, rgba(110, 31, 42, 0.5) 0 2px, transparent 2px); }
.card2 .price { margin: 1rem 0 0; font-weight: 200; font-size: clamp(18px, 1.4vw, 26px); line-height: 1; color: var(--ink-on-sky); }
/* the figure, in the register the homepage uses for its instruments: tabular, a shade heavier than the copy,
   the unit small and burgundy beside it */
.pricefig { display: flex; align-items: center; flex-wrap: wrap; gap: 0 0.45rem; margin: 1.3rem 0 0;
  --figsize: clamp(30px, 2.6vw, 46px); }
.pricefig .pre { font-size: 0.6rem; letter-spacing: 0.28em; text-transform: uppercase; color: inherit; opacity: 0.6; font-weight: 500; }
.pricefig .fig { font-size: var(--figsize); font-weight: 500; line-height: 1; letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums; color: inherit; }
.pricefig .u { font-family: system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; font-weight: 400;
  font-size: clamp(15px, 1.2vw, 22px); line-height: 1; letter-spacing: 0.02em; color: var(--wine-mid);
  }
.pricefig .per { font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase; color: inherit; opacity: 0.6; font-weight: 500; }
.pricefig .sum { flex: 1 0 100%; margin-top: 0.45rem; line-height: 1.6; font-size: 0.68rem; letter-spacing: 0.13em; text-transform: uppercase; color: inherit; opacity: 0.82; }
.pricefig .sum + .sum { margin-top: 0.18rem; }
/* "1:1" is set in a face whose one actually reads as a one — the same exception the homepage makes */
.onetoone { font-family: system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; font-weight: inherit; letter-spacing: 0.012em; font-size: 0.97em; }
/* the option rows on the detail step */
.opt { display: block; position: relative; }
.opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.opt .box { color: var(--ink-on-sky); display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0.6rem 1.4rem; cursor: pointer;
  border-radius: 16px; padding: 1.2rem 1.4rem; border: 1px solid rgba(52, 46, 44, 0.18);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.56) 0%, rgba(255, 255, 255, 0.26) 60%), rgba(244, 243, 241, 0.58);
  backdrop-filter: blur(12px) saturate(1.06); -webkit-backdrop-filter: blur(12px) saturate(1.06);
  transition: border-color 320ms ease, background 320ms ease, box-shadow 320ms ease; }
.opt .box:hover { border-color: rgba(110, 31, 42, 0.32); }
.opt input:checked + .box { border-color: rgba(110, 31, 42, 0.5);
  background: linear-gradient(rgba(51, 0, 8, 0.05), rgba(51, 0, 8, 0.05)), linear-gradient(160deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.3) 60%), rgba(244, 243, 241, 0.62);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 0 34px rgba(51, 0, 8, 0.12); }
.opt input:focus-visible + .box { outline: 2px solid rgba(110, 31, 42, 0.5); outline-offset: 2px; }
.opt .term { font-size: clamp(17px, 1.3vw, 22px); font-weight: 300; letter-spacing: 0.01em; }
.opt .term small { display: block; margin-top: 0.3rem; font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase; color: inherit; opacity: 0.62; font-weight: 500; }
.opt .pricefig { margin: 0; justify-content: flex-end; text-align: right; }
.opt .pricefig .sum { text-align: right; }
@media (max-width: 860px) {
  .opt .box { grid-template-columns: minmax(0, 1fr); padding: 1rem 1.1rem; }
  .opt .pricefig { justify-content: flex-start; } .opt .pricefig .sum { text-align: left; }
}
.card2 .price small { display: block; margin-top: 0.4rem; font-size: 0.6rem; letter-spacing: 0.28em; text-transform: uppercase; color: #7A7672; }
.card2--lift { transition: box-shadow 600ms ease, border-color 600ms ease, scale 500ms cubic-bezier(0.2, 0.7, 0.2, 1); transform-origin: 50% 50%; }
.card2--lift:hover { scale: 1.012; border-color: rgba(110, 31, 42, 0.34);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 44px 80px -34px rgba(30, 24, 20, 0.55), 0 0 44px rgba(51, 0, 8, 0.16); }
.card2--primary { border-color: rgba(110, 31, 42, 0.34);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 34px 66px -32px rgba(30, 24, 20, 0.55), 0 0 40px rgba(51, 0, 8, 0.14); }
@media (hover: none) { .card2--lift:hover { scale: 1; border-color: rgba(52, 46, 44, 0.18); } }

.grid { display: grid; gap: 1.4vw; }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ------------------------------------------------------------------------------------------- numbered steps */
.steps { list-style: none; margin: 2.6rem 0 0; padding: 0; display: grid; gap: 1.8rem; }
.steps li { display: grid; grid-template-columns: 3.4rem 1fr; gap: 0 1.2rem; align-items: baseline; }
.steps .n { font-size: 0.66rem; letter-spacing: 0.26em; color: var(--wine-mid); font-weight: 500; }
body.dark .steps .n { color: #C6BDB8; }
.steps h3 { margin: 0; font-weight: 400; font-size: clamp(15px, 1.1vw, 19px); letter-spacing: 0.02em; }
.steps p { grid-column: 2; margin: 0.4rem 0 0; font-weight: 300; font-size: clamp(13px, 0.94vw, 16px); line-height: 1.55; color: #3A3835; max-width: 54ch; }
body.dark .steps p { color: #CFCAC5; }

/* the quiet two-column fact list used for "what is included" and "who it is for" */
.facts { list-style: none; margin: 2rem 0 0; padding: 0; border-top: 1px solid rgba(72, 62, 56, 0.2); }
.facts li { display: grid; grid-template-columns: 12rem 1fr; gap: 1rem; padding: 0.75rem 0; border-bottom: 1px solid rgba(72, 62, 56, 0.14);
  font-size: clamp(13px, 0.9vw, 16px); line-height: 1.45; }
.facts b { font-weight: 400; letter-spacing: 0.04em; color: var(--ink-on-sky); }
.facts span { font-weight: 300; color: #33302D; }
body.dark .facts { border-color: rgba(255, 255, 255, 0.22); }
body.dark .facts li { border-color: rgba(255, 255, 255, 0.14); }
body.dark .facts b { color: #F2F0ED; } body.dark .facts span { color: #CFCAC5; }

/* ------------------------------------------------------------------------------------------------ the pills */
.pill { display: inline-block; padding: 0.62rem 1.15rem; border-radius: 999px; border: 1px solid rgba(72, 62, 56, 0.32);
  font-size: 0.68rem; letter-spacing: 0.24em; text-transform: uppercase; font-weight: 400; color: var(--ink-on-sky); white-space: nowrap;
  transition: background 300ms ease, color 300ms ease, border-color 300ms ease; }
.pill { position: relative; isolation: isolate; --light-width: 92px; --duration: 3.2s; --light-color: #8A1B2C; --border-width: 2px; }
/* the pill draws its own 1px border, so the band moves out onto it — the coaching button has none and sits
   at its outer edge, and the light has to run in exactly the same place */
.pill .coach-halo { inset: -1px; }
.pill { border-color: transparent; }
.pill .coach-ring { inset: -1px; }
.pill:hover .coach-ring { opacity: 1; }
.pill--go .coach-ring { display: none; }
.pill:hover { box-shadow: 0 0 16px rgba(51, 0, 8, 0.28), 0 0 38px rgba(51, 0, 8, 0.16); }
.pill:hover .coach-light { opacity: 1; animation: coaching-perimeter-light var(--duration) linear infinite; }
@media (hover: none) { .pill:hover .coach-light { opacity: 0; animation: none; } .pill:hover { box-shadow: none; } }
.pill--go { background: var(--cta); color: var(--cta-ink); border-color: transparent; font-weight: 500; }
.pill--go:hover { background: var(--cta-hover); }
.pill--go { --light-color: rgba(255, 244, 241, 0.5); }
.pill--go .coach-halo { filter: blur(2.2px) drop-shadow(0 0 7px rgba(255, 246, 243, 0.55)) drop-shadow(0 0 18px rgba(255, 244, 240, 0.4))
  drop-shadow(0 0 40px rgba(255, 241, 237, 0.24)); }
.pill--go:hover { box-shadow: 0 0 16px rgba(255, 246, 242, 0.28), 0 0 38px rgba(255, 246, 242, 0.15); }
body.dark .pill { color: #F2F0ED; border-color: rgba(255, 255, 255, 0.35); }
body.dark .pill--go { color: var(--cta-ink); border-color: transparent; }
.textlink { color: var(--wine-mid); border-bottom: 1px solid rgba(110, 31, 42, 0.4); padding-bottom: 0.15em; font-size: 0.68rem;
  letter-spacing: 0.24em; text-transform: uppercase; font-weight: 500; transition: border-color 300ms ease; }
.textlink:hover { border-bottom-color: var(--wine-mid); }
body.dark .textlink { color: #E8E4E0; border-bottom-color: rgba(232, 228, 224, 0.45); }

/* --------------------------------------------------------------------------------------------- the accordion */
.faq-list { display: grid; gap: 0.55rem; }
.faq-item { border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.65); transform-origin: 50% 50%;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.3) 60%), rgba(244, 243, 241, 0.6);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 18px 40px -30px rgba(38, 30, 26, 0.4);
  transition: border-color 400ms ease, box-shadow 400ms ease, transform 400ms cubic-bezier(0.2, 0.7, 0.2, 1); }
.faq-item:hover { transform: scale(1.008); border-color: rgba(110, 31, 42, 0.28); }
.faq-item.open { border-color: rgba(110, 31, 42, 0.32); }
/* over the mountain the glass may be thinner, and it answers with its own light instead of a shadow */
body.dark .faq-item { border-color: rgba(255, 255, 255, 0.5);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.46) 0%, rgba(255, 255, 255, 0.22) 60%), rgba(244, 243, 241, 0.42);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 18px 40px -30px rgba(20, 16, 14, 0.5); }
body.dark .faq-item:hover, body.dark .faq-item.open { border-color: rgba(255, 255, 255, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 18px 40px -30px rgba(20, 16, 14, 0.5),
              0 0 30px rgba(255, 255, 255, 0.22), 0 0 82px rgba(255, 255, 255, 0.1); }
.faq-q { width: 100%; display: grid; grid-template-columns: 2.6rem 1fr auto; align-items: baseline; gap: 0 0.6rem;
  padding: 1.05rem 1.3rem; margin: 0; background: none; border: 0; font: inherit; text-align: left; cursor: pointer; color: var(--ink-on-sky);
  font-size: clamp(14px, 1.02vw, 18px); font-weight: 400; }
.faq-q .n { font-size: 0.6rem; letter-spacing: 0.22em; color: var(--wine-mid); font-weight: 500; }
.faq-q .pm { position: relative; align-self: center; flex: 0 0 14px; width: 14px; height: 14px; }
.faq-q .pm::before, .faq-q .pm::after { content: ""; position: absolute; left: 0; top: 6.5px; width: 14px; height: 1px; background: var(--wine-mid);
  transition: transform 420ms cubic-bezier(0.2, 0.7, 0.2, 1); }
.faq-q .pm::after { transform: rotate(90deg); }
.faq-item.open .faq-q .pm::after { transform: rotate(0deg); }
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 460ms cubic-bezier(0.2, 0.7, 0.2, 1); }
.faq-item.open .faq-a { grid-template-rows: 1fr; }
.faq-a > div { overflow: hidden; }
.faq-a p { margin: 0; padding: 0 1.3rem 1.1rem 3.9rem; font-weight: 300; font-size: clamp(13px, 0.92vw, 16px); line-height: 1.6; color: #33302D; }
@media (hover: none) { .faq-item:hover { transform: none; border-color: rgba(255, 255, 255, 0.65); } }

/* --------------------------------------------------------------------------------------------------- the form */
form.karte-form, .karte-form { border-radius: 16px; padding: 1.7rem 1.8rem 1.9rem;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.2) 60%), rgba(244, 243, 241, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.7); backdrop-filter: blur(16px) saturate(1.1); -webkit-backdrop-filter: blur(16px) saturate(1.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 34px 66px -32px rgba(30, 24, 20, 0.5); color: var(--ink-on-sky); }
.karte-form .ident { display: flex; justify-content: space-between; font-size: 0.62rem; letter-spacing: 0.3em; text-transform: uppercase; color: #7A7672; margin-bottom: 1.1rem; }
.karte-form label, .karte-form .lbl { display: block; font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: #6A6663; margin-top: 0.9rem; }
.karte-form input, .karte-form select, .karte-form textarea { width: 100%; margin-top: 0.35rem; padding: 0.6rem 0; border: 0;
  border-bottom: 1px solid rgba(72, 62, 56, 0.3); background: transparent; font-size: 1rem; font-weight: 300; color: var(--ink-on-sky);
  border-radius: 0; font-family: inherit; }
.karte-form input:focus, .karte-form textarea:focus { outline: none; border-bottom-color: var(--wine-mid); }
.karte-form textarea { min-height: 3.2rem; resize: vertical; }
.karte-form button[type="submit"] { display: inline-flex; align-items: center; gap: 0.7rem; margin: 1.5rem 0 0; padding: 0.3rem 0; border: 0;
  background: none; color: var(--wine-mid); font-size: 0.72rem; letter-spacing: 0.28em; text-transform: uppercase; font-weight: 500; cursor: pointer; font-family: inherit; }
.karte-form button[type="submit"]::after { content: ""; width: 30px; height: 1px; background: var(--wine-mid); transition: width 300ms ease; }
.karte-form button[type="submit"]:hover::after { width: 46px; }
.karte-form [data-form-state] { color: var(--wine-mid); font-weight: 500; }
.karte-form .note { margin: 0.7rem 0 0; font-size: 0.66rem; color: #8A8682; letter-spacing: 0.04em; text-transform: none; font-weight: 300; }
.choice { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.6rem; }
.choice label { margin: 0; position: relative; }
.choice input { position: absolute; opacity: 0; pointer-events: none; width: 0; }
.choice span { display: inline-block; padding: 0.5rem 0.95rem; border-radius: 999px; border: 1px solid rgba(72, 62, 56, 0.26);
  font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; cursor: pointer; transition: background 260ms ease, border-color 260ms ease, color 260ms ease; }
.choice input:checked + span { background: rgba(110, 31, 42, 0.1); border-color: rgba(110, 31, 42, 0.5); color: var(--wine-mid); }
.choice input:focus-visible + span { outline: 2px solid rgba(110, 31, 42, 0.5); outline-offset: 2px; }

/* -------------------------------------------------------------------------------------------------- the foot */
/* Nutzer 2026-09-16: Leiste soll ueber dem Inhalt schweben, nicht eigenen Platz beanspruchen ("Webseite soll ganz
   unten anfangen") - wie bei apple.com (ac-globalfooter.built.css: padding-bottom: calc(9px + env(safe-area-
   inset-bottom))). Echter Inhalt muss bis in die Sicherheitszone reichen, sonst bleibt Safari im "Platz reservieren"-
   Modus statt die Leiste als durchsichtiges Overlay zu zeigen. */
.pfoot { position: relative; z-index: 1; padding: 8vh var(--safe) 5vh; padding-bottom: calc(5vh + env(safe-area-inset-bottom, 0px)); }
.pfoot .frow { display: flex; flex-wrap: wrap; gap: 1.6rem 2.6rem; align-items: baseline; justify-content: space-between;
  border-top: 1px solid rgba(72, 62, 56, 0.2); padding-top: 2rem; }
.pfoot nav { display: flex; flex-wrap: wrap; gap: 0.4rem 1.6rem; }
.pfoot a { font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase; color: #4E4A47; transition: color 260ms ease; }
.pfoot a:hover { color: var(--wine-mid); }
.pfoot .legal a { border-bottom: 1px solid rgba(72, 62, 56, 0.3); padding-bottom: 0.15em; }
.pfoot .claimline { font-size: 0.62rem; letter-spacing: 0.3em; text-transform: uppercase; color: #6A6663; }
body.dark .pfoot .frow { border-color: rgba(255, 255, 255, 0.2); }
body.dark .pfoot a { color: #C7C2BD; } body.dark .pfoot .claimline { color: #ADA6A1; }

/* --------------------------------------------------------------------------------------- the scroll entrance */
.rise { opacity: 0; transform: translate3d(0, 2.2vh, 0); transition: opacity 800ms ease, transform 900ms cubic-bezier(0.2, 0.7, 0.2, 1); }
.rise.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rise { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } }


/* ==========================================================================================================
   Section types, so a page has rhythm instead of a stack of cards. Each of these is a different KIND of block:
   an offer that takes room, a sequence that reads as one system, a path that is walked, questions that are
   asked, and an accordion that is only rules and type.
   ========================================================================================================== */

/* ---- the sequence: four parts of one system ------------------------------------------------------------- */
.seq { margin-top: 3.4rem; border-top: 1px solid rgba(72, 62, 56, 0.18); }
.seq-item { display: grid; grid-template-columns: 5.6rem 1fr; gap: 0 2vw; align-items: baseline;
  padding: 2.8rem 0 2.6rem; border-bottom: 1px solid rgba(72, 62, 56, 0.18); }
.seq-item .n { font-size: 0.68rem; letter-spacing: 0.28em; font-weight: 500; color: var(--wine-mid); }
.seq-item h3 { margin: 0; font-weight: 200; font-size: clamp(23px, 2.1vw, 38px); line-height: 1.08; letter-spacing: 0.01em; }
.seq-item p { margin: 0.9rem 0 0; font-weight: 300; font-size: clamp(14px, 1.02vw, 18px); line-height: 1.6; color: #3A3835; max-width: 52ch; }
body.dark .seq { border-color: rgba(255, 255, 255, 0.18); }
body.dark .seq-item { border-color: rgba(255, 255, 255, 0.14); }
body.dark .seq-item p { color: #CFCAC5; }
body.dark .seq-item .n { color: #C9BDB9; }

/* ---- the path: one line, the markers centred on it, drawn while it is walked ---------------------------- */
.path { position: relative; margin: 3.4rem auto 0; max-width: 56rem; --line: 1.15rem; --pad: 4.6rem; padding-left: var(--pad); }
.path::before, .path::after { content: ""; position: absolute; left: var(--line); margin-left: -0.5px; top: 1.4rem; width: 1px; }
.path::before { height: calc((100% - 2.8rem) * var(--pp, 0)); background: rgba(72, 62, 56, 0.22); }
.path::after { height: calc((100% - 2.8rem) * var(--pp, 0)); background: linear-gradient(to bottom, var(--wine-light), var(--wine-mid)); }
body.dark .path::before { background: rgba(255, 255, 255, 0.2); }
.path-step { position: relative; padding: 1.5rem 0 1.8rem;
  opacity: 0; transform: translate3d(0, 1.6vh, 0); transition: opacity 750ms ease, transform 850ms cubic-bezier(0.2, 0.7, 0.2, 1); }
.path-step.in { opacity: 1; transform: none; }
/* the dot is placed from the line, not from the text column, so it is always exactly on it */
.path-step::before { content: ""; position: absolute; left: calc(var(--line) - var(--pad) - 4.5px); top: 1.95rem;
  width: 9px; height: 9px; border-radius: 50%; background: var(--wine-light);
  box-shadow: 0 0 6px rgba(155, 43, 57, 0.45), 0 0 15px rgba(155, 43, 57, 0.22);
  opacity: 0.22; transform: scale(0.66); transition: opacity 700ms ease, transform 700ms cubic-bezier(0.2, 0.7, 0.2, 1); }
.path-step.in::before { opacity: 1; transform: none; }
.path-step .n { font-size: 0.66rem; letter-spacing: 0.28em; font-weight: 500; color: var(--wine-mid); }
body.dark .path-step .n { color: #C9BDB9; }
.path-step h3 { margin: 0.35rem 0 0; font-weight: 200; font-size: clamp(21px, 1.9vw, 34px); line-height: 1.1; }
.path-step p { margin: 0.7rem 0 0; font-weight: 300; font-size: clamp(13.5px, 1vw, 17px); line-height: 1.6; color: #3A3835; max-width: 50ch; }
body.dark .path-step p { color: #CFCAC5; }
@media (prefers-reduced-motion: reduce) { .path-step { opacity: 1; transform: none; transition: none; } }
.path .ridge { display: none; }
@media (min-width: 1000px) {
  .path--ridge { display: grid; grid-template-columns: repeat(var(--n, 6), minmax(0, 1fr)); gap: 0;
    max-width: none; --ridge-top: 118px; --rise: 14px; padding: var(--ridge-top) 0 0 6px; }
  .path--ridge::before, .path--ridge::after { display: none; }
  .path--ridge .ridge { display: block; position: absolute; left: 6px; right: 0; top: 0; height: 96px; pointer-events: none; }
  .path--ridge .ridge svg { display: block; width: 100%; height: 96px; overflow: visible; }
  .path--ridge .rl { fill: none; stroke: rgba(72, 62, 56, 0.22); stroke-width: 1; vector-effect: non-scaling-stroke; }
  body.dark .path--ridge .rl { stroke: rgba(255, 255, 255, 0.2); }
  .path--ridge .rp { fill: none; stroke: var(--wine-light); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
  .path--ridge .rc { transform: scaleX(var(--stop, 0.833)); transform-origin: 0 0; }
  .path--ridge .rcl { transform: none; }
  .path--ridge .ridge { --edge: 18%;
    -webkit-mask-image: linear-gradient(to right, #000 0 calc(var(--pp, 0) * (100% + var(--edge)) - var(--edge)), rgba(0, 0, 0, 0) calc(var(--pp, 0) * (100% + var(--edge))));
    mask-image: linear-gradient(to right, #000 0 calc(var(--pp, 0) * (100% + var(--edge)) - var(--edge)), rgba(0, 0, 0, 0) calc(var(--pp, 0) * (100% + var(--edge)))); }
  .path--ridge .path-step { padding: 0 2.2vw 0 0; margin-top: calc(var(--i) * var(--rise) * -1);
    transform: none; transition: opacity 420ms ease; }
  .path--ridge .path-step::before { transform: none; transition: opacity 420ms ease; }
  .path--ridge .path-step::before { left: -4.5px; top: calc(84px - var(--ridge-top) - 4.5px); }
  .path--ridge .path-step h3 { font-size: clamp(19px, 1.5vw, 27px); margin-top: 0.45rem; }
  .path--ridge .path-step p { font-size: clamp(12px, 0.83vw, 14.5px); line-height: 1.62; margin-top: 0.6rem; max-width: none; }
}

/* ---- mobile: these are laid out for the phone, not folded down from the desktop ------------------------- */
@media (max-width: 860px) {
  .seq { margin-top: 2rem; }
  .seq-item { grid-template-columns: 3.2rem 1fr; padding: 1.7rem 0 1.6rem; }
  .seq-item h3 { font-size: 21px; } .seq-item p { font-size: 13.5px; margin-top: 0.6rem; }
  .path { --line: 0.9rem; --pad: 3.2rem; margin-top: 2.2rem; }
  .path-step { padding: 0.8rem 0 0.95rem; }
  .path-step::before { top: 1.6rem; width: 8px; height: 8px; left: calc(var(--line) - var(--pad) - 4px); }
  .path-step h3 { font-size: 20px; } .path-step p { font-size: 13px; }
}


/* ---- the offers: two narrow, atmospheric columns that answer to the pointer ----------------------------- */
.offers { display: grid; grid-template-columns: 1fr 1fr; gap: 2vw; margin: 1.8rem auto 0; max-width: 50rem; align-items: stretch; }
.offer { position: relative; isolation: isolate; display: flex; flex-direction: column;
  border-radius: 17px; padding: 1.6rem 1.55rem 1.5rem; color: var(--ink-on-sky);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.34) 0%, rgba(255, 255, 255, 0.14) 62%), rgba(244, 243, 241, 0.3);
  border: 1px solid rgba(52, 46, 44, 0.13);
  backdrop-filter: blur(15px) saturate(1.06); -webkit-backdrop-filter: blur(15px) saturate(1.06);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 34px 70px -38px rgba(38, 30, 26, 0.5);
  --light-width: 190px; --duration: 4.6s; --light-color: #8A1B2C; --border-width: 2px;
  transform-origin: 50% 50%;
  transition: border-color 600ms ease, box-shadow 600ms ease, background 600ms ease, scale 500ms cubic-bezier(0.2, 0.7, 0.2, 1); }
/* the same interaction the homepage gives its coaching card: a light that travels the border, a burgundy
   breath over the glass and a little more depth. Nothing scales, nothing glows outward. */
.offer > * { position: relative; z-index: 1; }
.offer { border-color: transparent; }
.offer .card-halo { position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none;
  filter: drop-shadow(0 0 4px rgba(132, 24, 46, 0.9)) drop-shadow(0 0 12px rgba(120, 20, 40, 0.8))
          drop-shadow(0 0 26px rgba(104, 14, 32, 0.6)) drop-shadow(0 0 58px rgba(88, 12, 26, 0.42)); }
.offer .card-ring { position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none;
  border: 1px solid rgba(52, 46, 44, 0.13); transition: border-color 600ms ease; }
.offer:hover .card-ring { border-color: rgba(110, 31, 42, 0.5); }
.offer--premium .card-ring { border-color: rgba(110, 31, 42, 0.19); }
.offer .card-band { position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none; overflow: hidden; padding: var(--border-width);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; }
.offer .card-light { position: absolute; left: 0; top: 0; width: var(--light-width); aspect-ratio: 1 / 1; pointer-events: none; opacity: 0;
  offset-path: var(--path); offset-distance: 0%; offset-anchor: 50% 50%; offset-rotate: 0deg;
  background: radial-gradient(ellipse at center, var(--light-color) 0%, color-mix(in srgb, var(--light-color) 62%, transparent) 22%,
    color-mix(in srgb, var(--light-color) 28%, transparent) 42%, color-mix(in srgb, var(--light-color) 8%, transparent) 62%, transparent 82%, transparent 100%);
  transition: opacity 520ms ease; }
.offer:hover { scale: 1.014;
  background: linear-gradient(rgba(51, 0, 8, 0.052), rgba(51, 0, 8, 0.052)), linear-gradient(160deg, rgba(255, 255, 255, 0.38) 0%, rgba(255, 255, 255, 0.16) 62%), rgba(244, 243, 241, 0.32);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 44px 80px -34px rgba(30, 24, 20, 0.62), 0 0 48px rgba(51, 0, 8, 0.46), 0 0 128px rgba(51, 0, 8, 0.3); }
.offer:hover .card-light { opacity: 1; animation: coaching-perimeter-light var(--duration) linear infinite; }
@media (hover: none) { .offer:hover { scale: 1; } .offer:hover .card-ring { border-color: rgba(52, 46, 44, 0.13); } .offer:hover .card-light { opacity: 0; animation: none; } }
.m-only { display: none; }
.offer > .n { font-size: 0.66rem; letter-spacing: 0.3em; font-weight: 500; color: var(--wine-mid); }
.offer .head2 { margin: 0.6rem 0 0; font-weight: 200; font-size: clamp(19px, 1.55vw, 26px); line-height: 1.06; letter-spacing: 0.01em; }
.offer .said { margin: 0.75rem 0 0; font-weight: 300; font-size: clamp(12.5px, 0.86vw, 14.5px); line-height: 1.55; color: #33302D; max-width: 34ch; }
/* the contents: a quiet line mark, the row, a hairline. Neutral until the offer is pointed at. */
.offer .inc { list-style: none; margin: 0.85rem 0 0; padding: 0; border-top: 1px solid rgba(72, 62, 56, 0.14); }
.offer .inc li { display: grid; grid-template-columns: 1.5rem 1fr; gap: 0.75rem; align-items: baseline;
  padding: 0.48rem 0; border-bottom: 1px solid rgba(72, 62, 56, 0.1);
  font-size: clamp(11.5px, 0.75vw, 13px); font-weight: 400; line-height: 1.45; }
.offer .inc li .i { display: block; width: 11px; height: 11px; margin-top: 0.2em; color: #4B4743; transition: color 420ms ease; }
.offer .inc li .i svg { display: block; width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.1; }
.offer:hover .inc li .i { color: var(--wine-mid); }
.offer .plus { margin: 1.15rem 0 0.1rem; font-size: 0.58rem; letter-spacing: 0.3em; text-transform: uppercase; font-weight: 500; color: var(--wine-mid); }
.offer .inc--plus { margin-top: 0.15rem; border-top-color: rgba(110, 31, 42, 0.28); }
.offer .inc--plus li .i { color: var(--wine-mid);
  filter: drop-shadow(0 0 5px rgba(155, 43, 57, 0.35)); }
.offer .inc--plus li { font-weight: 400; }
.offer .close { margin-top: auto; padding-top: 1.35rem; position: relative; }
.offer .close::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(to right, rgba(110, 31, 42, 0.5), rgba(110, 31, 42, 0.06)); }
.offer .close .pricefig { margin: 0 0 1.3rem; --figsize: clamp(25px, 2.15vw, 38px); }
.offer .pricefig .u { font-size: clamp(13px, 1vw, 18px); }
.offer--premium .head2 { color: var(--wine-mid); }
.offer--premium {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78), 0 44px 84px -38px rgba(30, 24, 20, 0.56), 0 0 48px rgba(51, 0, 8, 0.06); }

/* ---- the four parts: tiles that answer to the pointer, two by two ---------------------------------------- */
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6vw; margin-top: 2.6rem; }
.tile { position: relative; border-radius: 20px; padding: 2.4rem 2.2rem 2.2rem; color: var(--ink-on-sky); overflow: hidden;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.42) 0%, rgba(255, 255, 255, 0.17) 62%), rgba(244, 243, 241, 0.36);
  border: 1px solid rgba(52, 46, 44, 0.13);
  backdrop-filter: blur(14px) saturate(1.06); -webkit-backdrop-filter: blur(14px) saturate(1.06);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72), 0 30px 62px -36px rgba(38, 30, 26, 0.48);
  transform-origin: 50% 50%;
  transition: border-color 600ms ease, box-shadow 600ms ease, background 600ms ease, scale 500ms cubic-bezier(0.2, 0.7, 0.2, 1); }
.tile::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 700ms ease;
  background: radial-gradient(58% 52% at 84% 8%, rgba(155, 43, 57, 0.12) 0%, rgba(155, 43, 57, 0.04) 46%, rgba(155, 43, 57, 0) 100%); }
.tile:hover { scale: 1.018; border-color: rgba(110, 31, 42, 0.28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 42px 82px -38px rgba(30, 24, 20, 0.58), 0 0 40px rgba(51, 0, 8, 0.1); }
.tile:hover::after { opacity: 1; }
body.dark .tile:hover { border-color: rgba(255, 255, 255, 0.55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 42px 82px -38px rgba(30, 24, 20, 0.58),
              0 0 26px rgba(255, 255, 255, 0.3), 0 0 70px rgba(255, 255, 255, 0.2),
              0 0 150px rgba(255, 255, 255, 0.12), 0 0 280px rgba(255, 255, 255, 0.06); }
@media (hover: none) { .tile:hover { scale: 1; border-color: rgba(52, 46, 44, 0.13); } .tile:hover::after { opacity: 0; } }
.tile .top { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.tile .n { font-weight: 200; font-size: clamp(30px, 2.6vw, 46px); line-height: 1; letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums; color: var(--wine-mid); opacity: 0.5;
  transition: opacity 600ms ease, color 600ms ease, text-shadow 600ms ease; }
.tile:hover .n { opacity: 1; color: var(--wine-mid); text-shadow: 0 0 14px rgba(155, 43, 57, 0.5), 0 0 38px rgba(155, 43, 57, 0.26); }
.tile .sym { width: 25px; height: 25px; color: #7A7672; transition: color 600ms ease; }
.tile .sym svg { display: block; width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.05;
  stroke-linecap: round; stroke-linejoin: round; }
.tile:hover .sym { color: var(--wine-mid); }
.tile h3 { margin: 1.6rem 0 0; font-weight: 200; font-size: clamp(22px, 1.95vw, 34px); line-height: 1.08; letter-spacing: 0.01em; }
.tile p { margin: 0.85rem 0 0; font-weight: 300; font-size: clamp(13px, 0.95vw, 16.5px); line-height: 1.6; color: #33302D; max-width: 40ch; }

/* ---- what you get: number, title, explanation — three fixed columns on one shared baseline ---------------
   align-items: baseline does the work no padding could do reliably: the first line of the explanation sits
   on the same writing line as its title, whatever either of them is scaled to. */
.mods { display: grid; margin-top: 2.4rem; max-width: none; border-top: 1px solid rgba(72, 62, 56, 0.18); }
body.dark .mods { border-color: rgba(255, 255, 255, 0.18); }
.mod { display: grid; grid-template-columns: 1.4rem minmax(0, 24rem) minmax(0, 1fr); column-gap: 2.6vw;
  align-items: baseline; align-content: start; min-height: 7.4rem;
  padding: 1.35rem 0 1.5rem; border-bottom: 1px solid rgba(72, 62, 56, 0.14); }
body.dark .mod { border-color: rgba(255, 255, 255, 0.14); }
.mod .i { grid-column: 1; display: block; width: 14px; height: 14px; color: var(--wine-mid); }
.mod .i svg { display: block; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.1;
  stroke-linecap: round; stroke-linejoin: round; }
body.dark .mod .i { color: var(--wine-light); }
.mod h3 { grid-column: 2; margin: 0; font-weight: 200; font-size: clamp(19px, 1.5vw, 27px); line-height: 1.18;
  letter-spacing: 0.01em; }
.mod p { grid-column: 3; margin: 0; font-weight: 300; font-size: clamp(13px, 0.92vw, 15.5px); line-height: 1.62;
  color: #3A3835; max-width: 66ch; }
body.dark .mod p { color: #C4BFBA; }
@media (max-width: 860px) {
  .mod { grid-template-columns: minmax(0, 1fr); column-gap: 0; row-gap: 0.34rem; padding: 0.85rem 0 0.95rem;
    align-items: start; }
  .mod .i, .mod h3, .mod p { grid-column: 1; }
  .mod .i { margin-bottom: 0.5rem; }
  .mod h3 { font-size: 19px; } .mod p { font-size: 13px; max-width: none; }
}

/* ---- is this for you: one statement at a time, the rest kept in the room -------------------------------- */
.recog { margin-top: 2.6rem; max-width: none; }
.recog-item { position: relative; display: grid; grid-template-columns: minmax(0, 6.5rem) minmax(0, 1fr);
  gap: 0 2vw; align-items: start; padding: 2.8vh 0 3vh;
  opacity: 0; transform: translate3d(0, 2.4vh, 0);
  transition: opacity 900ms ease, transform 1000ms cubic-bezier(0.2, 0.7, 0.2, 1); }
.recog-item.in { opacity: 0.78; transform: none; }
/* while one statement is read, the others step back — the effect belongs to the pointer, not to the scroll */
.recog:hover .recog-item.in { opacity: 0.52; }
.recog .recog-item.in:hover { opacity: 1; }
.recog-item + .recog-item { border-top: 1px solid rgba(72, 62, 56, 0.14); }
body.dark .recog-item + .recog-item { border-color: rgba(255, 255, 255, 0.13); }
/* the burgundy runs along under whichever statement is being read */
.recog-item::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: 0; max-width: 46%;
  background: linear-gradient(to right, var(--wine-light), rgba(155, 43, 57, 0));
  transition: width 1000ms cubic-bezier(0.2, 0.7, 0.2, 1); }
.recog-item:hover::after { width: 46%; }
.recog-item .n { margin-top: 0.9em; font-size: 0.66rem; letter-spacing: 0.28em; font-weight: 500;
  font-variant-numeric: tabular-nums; opacity: 0.5; transition: color 700ms ease, opacity 700ms ease, text-shadow 700ms ease; }
.recog-item:hover .n { opacity: 1; color: var(--wine-light); text-shadow: 0 0 14px rgba(155, 43, 57, 0.45); }
.recog-item p { margin: 0; font-weight: 200; font-size: clamp(16px, 1.45vw, 25px); line-height: 1.3;
  letter-spacing: 0.01em; max-width: 56ch; transform-origin: 0% 50%;
  transition: scale 1000ms cubic-bezier(0.2, 0.7, 0.2, 1); }
.recog-item:hover p { scale: 1.022; font-weight: 300; }
body.dark .recog-item:hover p { color: #FFFDFB; text-shadow: 0 0 24px rgba(246, 244, 241, 0.34), 0 0 60px rgba(246, 244, 241, 0.16); }
.recog-close { margin-top: 3.2rem; font-weight: 300; font-size: clamp(14px, 1.05vw, 18px); line-height: 1.6;
  color: #3A3835; max-width: 46ch; opacity: 0; transform: translate3d(0, 1.4vh, 0);
  transition: opacity 900ms ease, transform 1000ms cubic-bezier(0.2, 0.7, 0.2, 1); }
.recog-close.in { opacity: 1; transform: none; }
body.dark .recog-close { color: #CFCAC5; }
@media (max-width: 860px) {
  .recog { margin-top: 2.8rem; }
  .recog-item { grid-template-columns: 1fr; gap: 0.5rem 0; padding: 2.3vh 0 2.5vh; }
  .recog-item .n { margin-top: 0; }
  .recog-item p { max-width: none; }
  .recog-item.on::after, .recog-item::after { max-width: 62%; }
  .recog-item.on::after { width: 62%; }
  .recog-close { margin-top: 2.6rem; }
}
/* without a pointer the scroll position says which statement is being read — the same idea, other input */
@media (hover: none) {
  /* eine Aussage steht, die uebrigen halten sich zurueck — die naechste kommt schon mit, aber leise */
  .recog-item.in, .recog:hover .recog-item.in { opacity: 0.3; transform: translate3d(0, 0.5vh, 0);
    transition: opacity 680ms ease, transform 760ms cubic-bezier(0.2, 0.7, 0.2, 1); }
  .recog-item.in.lit, .recog:hover .recog-item.in.lit { opacity: 1; transform: none; }
  .recog-item::after { transition: width 760ms cubic-bezier(0.2, 0.7, 0.2, 1); }
  .recog-item.lit::after { width: 46%; }
  .recog-item .n { transition: color 680ms ease, opacity 680ms ease, text-shadow 680ms ease; }
  .recog-item.lit .n { opacity: 1; color: var(--wine-light); text-shadow: 0 0 14px rgba(155, 43, 57, 0.45); }
  .recog-item p { transition: scale 760ms cubic-bezier(0.2, 0.7, 0.2, 1), color 680ms ease, text-shadow 680ms ease; }
  .recog-item.lit p { scale: 1.015; }
  body.dark .recog-item.lit p { color: #FFFDFB; text-shadow: 0 0 22px rgba(246, 244, 241, 0.28); }
}
@media (prefers-reduced-motion: reduce) {
  .recog-item { opacity: 0.42; transform: none; transition: opacity 300ms ease; }
  .recog-item p { scale: 1 !important; transition: none; }
  .recog-close { opacity: 1; transform: none; transition: none; }
}

/* ---- two ways into the conversation: equal weight, one hairline between them ---------------------------- */
.routes { display: grid; grid-template-columns: 1fr 1fr; gap: 0 5vw; margin: 2.1rem auto 0; max-width: 62rem; }
.route { position: relative; padding-top: 1.6rem; text-align: center; }
.route::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(to right, rgba(110, 31, 42, 0), rgba(110, 31, 42, 0.5) 50%, rgba(110, 31, 42, 0)); }
.route + .route::after { content: ""; position: absolute; left: -2.5vw; top: 1.6rem; bottom: 0.4rem; width: 1px;
  background: rgba(72, 62, 56, 0.16); }
body.dark .route + .route::after { background: rgba(255, 255, 255, 0.14); }
.route .k { margin: 0; font-weight: 200; font-size: clamp(21px, 1.8vw, 32px); line-height: 1.1; letter-spacing: 0.01em; }
.route .dur { margin: 0.6rem 0 0; font-size: 0.64rem; letter-spacing: 0.26em; text-transform: uppercase;
  font-weight: 500; color: var(--wine-mid); }
body.dark .route .dur { color: #C0B2AE; }
.route .say { margin: 1rem auto 0; font-weight: 300; font-size: clamp(13px, 0.94vw, 16px); line-height: 1.62;
  color: #3A3835; max-width: 36ch; }
body.dark .route .say { color: #C4BFBA; }
.route .go { margin: 1.7rem 0 0; }
.route .note { margin-top: 0.9rem; }
.routes-back { margin: 1.2rem 0 0; text-align: center; }
/* der schriftliche Weg ist die leisere Alternative: eine Haarlinie trennt ihn, nichts an ihm ruft */
.route-alt { position: relative; }
.route-alt::before { content: ""; position: absolute; left: var(--safe); right: var(--safe); top: 0; height: 1px;
  background: rgba(72, 62, 56, 0.16); }
body.dark .route-alt::before { background: rgba(255, 255, 255, 0.13); }
.route-alt .psec-head .head { font-size: clamp(22px, 2.05vw, 34px); }
.route-alt .psec-head .lede { font-size: clamp(13.5px, 0.98vw, 17px); }
@media (max-width: 860px) {
  .routes { grid-template-columns: minmax(0, 1fr); gap: 2.2rem 0; margin-top: 2rem; }
  .route + .route::after { display: none; }
  .route .say { max-width: none; }
}

/* ---- how it continues: four stages across one composition — no line, no points, no cards ----------------
   The path section owns the ascent; this one is pure typography that lights up from left to right. */
.flow { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 3vw;
  margin-top: 2.2rem; }
.flow-stage { position: relative; padding-top: 1.5rem;
  transition: opacity 520ms ease, scale 520ms cubic-bezier(0.2, 0.7, 0.2, 1); }
.flow:hover .flow-stage { opacity: 0.5; }
.flow .flow-stage:hover { opacity: 1; }
/* the micro accent: a short burgundy stroke that grows under the pointer */
.flow-stage::before { content: ""; position: absolute; left: 0; top: 0; height: 1px; width: 1.6rem;
  background: var(--wine-light); opacity: 0.65;
  transition: width 620ms cubic-bezier(0.2, 0.7, 0.2, 1), opacity 480ms ease; }
.flow-stage:hover::before { width: 4.2rem; opacity: 1; }
.flow-stage .n { margin: 0; font-size: 0.64rem; letter-spacing: 0.26em; font-weight: 500;
  font-variant-numeric: tabular-nums; color: var(--wine-mid); transition: color 700ms ease; }
body.dark .flow-stage .n { color: #C0B2AE; }
body.dark .flow-stage:hover .n { color: #E4D9D6; }
.flow-stage h3 { margin: 1.1rem 0 0; font-weight: 200; font-size: clamp(21px, 2.05vw, 37px); line-height: 1.08;
  letter-spacing: 0.01em; }
.flow-stage p { margin: 0.9rem 0 0; font-weight: 300; font-size: clamp(12.5px, 0.88vw, 15px); line-height: 1.62;
  color: #3A3835; max-width: 26ch; }
body.dark .flow-stage p { color: #C4BFBA; }
@media (max-width: 1024px) {
  .flow { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 2.2rem; }
  .flow-stage { padding: 1.4rem 0 0; }
  .flow-stage + .flow-stage { margin-top: 1.9rem; }
  .flow-stage h3 { font-size: clamp(22px, 5.4vw, 30px); }
  .flow-stage p { font-size: 13.5px; max-width: 46ch; }
}
@media (hover: none) {
  .flow:hover .flow-stage { opacity: 0.5; }
  .flow-stage.near, .flow:hover .flow-stage.near { opacity: 1; }
  .flow-stage.near::before { width: 4.2rem; opacity: 1; }
  body.dark .flow-stage.near .n { color: #E4D9D6; }
}
@media (prefers-reduced-motion: reduce) { .flow-stage, .flow-stage::before { transition: none; } }

/* ---- the options page: one selection surface, no wizard -------------------------------------------------- */
.pick { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 29rem); gap: 4.2vw; align-items: start;
  margin: 1.8rem auto 0; max-width: 66rem; }
.pick .picks { grid-column: 1; grid-row: 1; }
.pick .pick-side { grid-column: 2; grid-row: 1 / span 2; }
.pick #pick-hint { grid-column: 1; grid-row: 2; margin-top: 2.4rem; max-width: 42ch; }
.seg { display: inline-flex; padding: 4px; border-radius: 999px; border: 1px solid rgba(52, 46, 44, 0.2);
  background: rgba(244, 243, 241, 0.34); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
body.dark .seg { border-color: rgba(255, 255, 255, 0.22); background: rgba(18, 16, 16, 0.24); }
.seg label { position: relative; margin: 0; }
.seg input { position: absolute; opacity: 0; width: 0; height: 0; }
.seg span { display: block; padding: 0.55rem 1.15rem; border-radius: 999px; cursor: pointer;
  font-size: 0.64rem; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 500; color: inherit; opacity: 0.62;
  transition: background 320ms ease, opacity 320ms ease, color 320ms ease; }
.seg input:checked + span { background: var(--cta); color: var(--cta-ink); opacity: 1; }
.seg input:focus-visible + span { outline: 2px solid rgba(110, 31, 42, 0.5); outline-offset: 2px; }
.pick-side { display: grid; gap: 1.6rem; }
.pick-panel .go { margin: 1.5rem 0 0; }
.pick-panel .note--go { margin-top: 0.85rem; text-align: center; text-transform: none; letter-spacing: 0.06em;
  font-size: 0.72rem; font-weight: 400; }
.pick-panel .go .pill { display: block; text-align: center; }
.pick-panel [data-booking-note] { margin-top: 0.8rem; text-align: center; }
.pick-panel { position: relative; border-radius: 20px; padding: 2.4rem 2.2rem 2rem; color: var(--ink-on-sky);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.34) 0%, rgba(255, 255, 255, 0.14) 62%), rgba(244, 243, 241, 0.3);
  border: 1px solid rgba(52, 46, 44, 0.13);
  backdrop-filter: blur(15px) saturate(1.06); -webkit-backdrop-filter: blur(15px) saturate(1.06);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 34px 70px -38px rgba(38, 30, 26, 0.5); }
.pick-panel .lbl2 { margin: 0; font-size: 0.66rem; letter-spacing: 0.3em; text-transform: uppercase;
  font-weight: 500; color: var(--wine-mid); }
.pick-panel h3 { margin: 0.8rem 0 0; font-weight: 200; font-size: clamp(23px, 1.95vw, 34px); line-height: 1.06; letter-spacing: 0.01em; }
.pick-panel .inc { list-style: none; margin: 1.8rem 0 0; padding: 0; border-top: 1px solid rgba(72, 62, 56, 0.14); }
.pick-panel .inc li { display: grid; grid-template-columns: 1.5rem 1fr; gap: 0.75rem; align-items: baseline;
  padding: 0.48rem 0; border-bottom: 1px solid rgba(72, 62, 56, 0.1);
  font-size: clamp(11.5px, 0.75vw, 13px); font-weight: 400; line-height: 1.45; }
.pick-panel .inc li .i { display: block; width: 11px; height: 11px; margin-top: 0.2em; color: var(--wine-mid); }
.pick-panel .inc li.is-plus .i { color: var(--wine-light);
  filter: drop-shadow(0 0 4px rgba(170, 46, 62, 0.95)) drop-shadow(0 0 11px rgba(155, 43, 57, 0.7)) drop-shadow(0 0 24px rgba(155, 43, 57, 0.4)); }
.pick-panel .inc li.is-plus { font-weight: 500; position: relative; }
.pick-panel .inc li.is-plus::before { content: ""; position: absolute; left: -1.15rem; top: 0.15rem; bottom: 0.15rem; width: 2px;
  border-radius: 1px; background: linear-gradient(to bottom, rgba(155, 43, 57, 0), var(--wine-light) 30%, var(--wine-light) 70%, rgba(155, 43, 57, 0));
  box-shadow: 0 0 8px rgba(155, 43, 57, 0.6); }
.pick-panel .inc li .i svg { display: block; width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.1; }
.pick-panel .why { margin: 1.1rem 0 0; font-size: 0.74rem; line-height: 1.55; letter-spacing: 0.02em;
  color: #4E4A46; font-weight: 400; }
.pick-panel .close { margin-top: 1.9rem; padding-top: 1.6rem; position: relative; }
.pick-panel .close::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(to right, rgba(110, 31, 42, 0.5), rgba(110, 31, 42, 0.06)); }
.pick-panel .close .pricefig { margin: 0; }
.pick-panel .note2 { margin: 0.85rem 0 0; font-size: 0.74rem; letter-spacing: 0.04em; line-height: 1.55;
  color: #45413E; font-weight: 400; }

@media (max-width: 1024px) {
  .pick { grid-template-columns: 1fr; gap: 1.7rem; max-width: none; }
  .pick .picks, .pick .pick-side, .pick #pick-hint { grid-column: 1; grid-row: auto; }
  .pick .picks { order: 1; } .pick .pick-side { order: 2; }
  .pick #pick-hint { order: 3; margin-top: 0; max-width: none; }
  .pick .eyebrow { margin-bottom: 0.7rem; }
  .pick .eyebrow[style] { margin-top: 1.6rem !important; }
  #pick-hint { margin-top: 0.45rem !important; max-width: none; }
  .pick-side { width: 90vw; margin-inline: calc((90vw - 100%) / -2); }
}
@media (max-width: 860px) {
  .offers { display: grid; grid-template-columns: 1fr 1fr; gap: 3vw; max-width: none;
    margin: 1.7rem calc(var(--safe) * -0.62) 0; }
  .offer, .offer--premium { padding: 1.05rem 0.9rem 1rem; border-radius: 15px; }
  .offer > .n { font-size: 0.56rem; letter-spacing: 0.24em; }
  .offer .head2 { margin: 0.5rem 0 0; font-size: 16px; line-height: 1.12; letter-spacing: 0; }
  .offer--premium .head2 { font-size: 16px; }
  .offer .said { margin: 0.5rem 0 0; font-size: 11.5px; line-height: 1.5; min-height: 7.5em; }
  .offer .inc { display: block; margin-top: 0.55rem; padding-top: 0.55rem;
    border-top: 1px solid rgba(72, 62, 56, 0.16); }
  .offer .inc li { grid-template-columns: 0.85rem 1fr; gap: 0.4rem; padding: 0.28rem 0;
    font-size: 10.5px; line-height: 1.35; border-bottom: 0; }
  .offer .inc li .i, .offer .inc li .i svg { width: 9px; height: 9px; }
  .offer .inc--plus { display: block; margin-top: 0.85rem; padding-top: 0.55rem; border-top: 1px solid rgba(110, 31, 42, 0.28); }
  .offer .inc--plus li { grid-template-columns: 0.85rem 1fr; gap: 0.4rem; padding: 0.28rem 0; font-size: 10.5px;
    line-height: 1.35; border-bottom: 0; font-weight: 400; }
  .offer .inc--plus li .i, .offer .inc--plus li .i svg { width: 9px; height: 9px; }
  .d-only { display: none; }
  .m-only { display: inline; }
  .offer .plus { margin: 0.8rem 0 0; font-size: 0.48rem; letter-spacing: 0.22em; }
  .offer .inc--plus { margin-top: 0.1rem; padding-top: 0.42rem; }
  .offer .close { padding-top: 0.85rem; }
  .offer .close .pricefig { min-height: 0; margin: 0 0 0.75rem; --figsize: 20.5px; gap: 0 0.3rem; }
  .offer .pricefig .pre, .offer .pricefig .per { font-size: 0.5rem; letter-spacing: 0.12em; }
  .offer .pricefig .u { font-size: 10px; }
  .offer .pricefig .sum { display: none; }
  .offer .pill { display: block; text-align: center; padding: 0.5rem 0.3rem; font-size: 0.52rem; letter-spacing: 0.12em; }
  .offer-dots { display: none; }
  .offer-dots, .row-dots { display: flex; justify-content: center; gap: 9px; margin-top: 1.2rem; }
  .offer-dots i, .row-dots i { display: block; width: 6px; height: 6px; border-radius: 50%; background: currentColor;
    opacity: 0.3; transition: opacity 320ms ease, background 320ms ease; }
  .offer-dots i.on, .row-dots i.on { opacity: 1; background: var(--wine-light); }
  .tiles { grid-auto-flow: column; grid-auto-columns: 78%; grid-template-columns: none; gap: 3.4vw; margin-top: 2.2rem;
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(var(--safe) * -1); padding-inline: 8vw; scroll-padding-inline: 8vw; }
  .tiles::-webkit-scrollbar { display: none; }
  .tile { scroll-snap-align: start; transition: border-color 420ms ease, box-shadow 420ms ease; }
  .tile.is-here { border-color: rgba(52, 46, 44, 0.24);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 30px 58px -32px rgba(30, 24, 20, 0.6); }
  body.dark .tile.is-here { border-color: rgba(255, 255, 255, 0.38);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88), 0 30px 58px -32px rgba(20, 16, 14, 0.62),
                0 0 26px rgba(255, 255, 255, 0.13); }
  .tile.is-here .sym { color: var(--wine-mid); }
  body.dark .tile.is-here .sym { color: var(--wine-light); }
  .tile.is-here .n { opacity: 1; }
  .offer .head2 { font-size: 26px; } .offer .said { font-size: 13.5px; max-width: none; }

  .tile { padding: 1.15rem 1.1rem 1.2rem; border-radius: 16px; }
  .tile .n { font-size: 30px; font-weight: 300; opacity: 0.72; } .tile h3 { font-size: 20px; margin-top: 0.8rem; }
  .tile p { font-size: 13px; line-height: 1.5; margin-top: 0.6rem; max-width: none; }
  .tile .sym, .tile .sym svg { width: 21px; height: 21px; }
  .mods { margin-top: 1.8rem; }
  .recog-item p { font-size: 18px; }
  .recog-close { font-size: 13.5px; }
  .seg span { padding: 0.48rem 0.7rem; font-size: 0.52rem; letter-spacing: 0.13em; }
  .pick-panel { padding: 1.5rem 1.4rem 1.5rem; border-radius: 18px; }
  .pick-panel h3 { font-size: 25px; margin-top: 0.6rem; }
  .pick-panel .inc { margin-top: 1.2rem; }
  .pick-panel .inc li { padding: 0.5rem 0; font-size: 13px; }
  .pick-panel .why { margin-top: 0.9rem; font-size: 12.5px; }
  .pick-panel .close { margin-top: 1.4rem; padding-top: 1.2rem; }
  .pick-panel .close .pricefig { --figsize: 38px; }
  .pick-panel .note2 { margin-top: 0.7rem; font-size: 12.5px; }
  .pick-panel .go { margin-top: 1.2rem; }
  .pick-panel .note--go { margin-top: 0.7rem; }
}

/* ============================================================================================ tablet + phone */
@media (max-width: 1024px) {
  :root { --safe: 9vw; --hh: 1vh; }
  #marc-haid { left: 5.5vw; top: 3.2vh; font-size: 14px; }
  #marc-haid .l, #marc-haid .k { gap: 1.9vw; } #marc-haid .l::after, #marc-haid .k::after { width: 2.4vw; }
  #menu { right: 5.5vw; top: 3.3vh; font-size: 12px; gap: 0.5rem; } #menu .icon { width: 19px; height: 11px; }
  #coach { left: calc(5.5vw + 158px + 1.9vw); right: auto; top: 2.85vh; font-size: 11px; }
  #coach .coach-btn { padding: 7px 14px; }
  #lang { left: 5.5vw; right: auto; top: 5.2vh; font-size: 10px; } #lang i { height: 10px; }
  #chrome #waehrung { left: 5.5vw; top: 7.7vh; font-size: 10px; } #waehrung i { height: 10px; }
  #qnav { grid-template-columns: 1fr; gap: 5vh; padding: 12vh 8vw 8vh; overflow: auto; }
  #qnav .close { right: 5.5vw; top: 3.3vh; font-size: 11px; }
  #qnav li a { font-size: 24px; grid-template-columns: 2.6rem 1fr; }
  #qnav .pages li a { font-size: 20px; }
  .psec { padding: 7vh var(--safe) 7vh; }
  .phero { min-height: 74vh; padding: 19vh var(--safe) 7vh; }
  .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts li { grid-template-columns: 9rem 1fr; }
}

@media (max-width: 860px) {
  :root { --safe: 13.5vw; }
  #marc-haid { font-size: 11.5px; top: 3.2vh; }
  #marc-haid .l, #marc-haid .k { gap: 1.9vw; } #marc-haid .l::after, #marc-haid .k::after { width: 1.8vw; }
  #menu { top: 3.3vh; font-size: 9px; } #menu .icon { width: 15px; height: 8px; }
  #coach { left: calc(5.5vw + 117px + 1.9vw); top: 2.85vh; font-size: 9.5px; }
  #coach .coach-btn { padding: 5px 10px; }
  #coach .coach-ring { opacity: 0.9; }
  #lang { top: 5.6vh; font-size: 8.5px; } #lang i { height: 8px; }
  #chrome #waehrung { top: 8.1vh; font-size: 8.5px; } #waehrung i { height: 8px; }
  #qnav li a { font-size: 22px; grid-template-columns: 2.4rem 1fr; }
  .psec { padding: 4.4vh var(--safe) 4.4vh; }
  .phero { min-height: 54vh; padding: 9vh var(--safe) 7vh; }
  .phero h1.head { max-width: none; }
  .grid { gap: 1.1rem; }
  .grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); }
  .card2 { padding: 1.15rem 1.2rem 1.25rem; border-radius: 16px; }
  .card2 h3 { font-size: 21px; } .card2 p { font-size: 13px; } .card2 li { font-size: 12.5px; }
  .facts li { grid-template-columns: minmax(0, 1fr); gap: 0.15rem; padding: 0.65rem 0; }
  .facts b { font-size: 13px; } .facts span { font-size: 13px; }
  .steps li { grid-template-columns: 2.6rem 1fr; }
  .steps p { font-size: 13px; }
  .faq-q { font-size: 13.5px; padding: 1rem 1rem; grid-template-columns: 1.9rem 1fr auto; }
  .faq-a p { font-size: 12.5px; padding: 0 1rem 0.95rem 2.9rem; }
  form.karte-form { padding: 1.2rem 1.25rem 1.3rem; }
  .karte-form input, .karte-form select, .karte-form textarea { font-size: 16px; }
  #world .pw { object-position: 38% 46% !important; }
  #world .pw--far { inset: -10% -26%; width: 152%; }
  #world .pw--near { inset: -15% -30%; width: 160%; }
  .pfoot { padding: 2.6vh var(--safe) 4vh; padding-bottom: calc(4vh + env(safe-area-inset-bottom, 0px)); }
  #waehlen { padding-top: 2.4vh; }
  .phero { padding-bottom: 4.5vh; }
  .pfoot .frow { display: block; padding-top: 1.35rem; }
  .pfoot nav { display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem 1.2rem; }
  .pfoot .claimline { margin: 1.8rem 0 0; padding-top: 1.4rem; text-align: center;
    border-top: 1px solid rgba(72, 62, 56, 0.16); }
  body.dark .pfoot .claimline { border-color: rgba(255, 255, 255, 0.13); }
  .pfoot .legal { display: flex; flex-wrap: wrap; gap: 0.7rem 1.4rem; margin-top: 1.4rem; }
  .pfoot a { font-size: 0.6rem; letter-spacing: 0.2em; }
}


/* ---- die Uebergaenge zwischen den grossen Abschnitten: ein gemeinsamer Takt --------------------------- */
@media (min-width: 1025px) {
  .page-coaching .phero { padding-bottom: 70px; }
  #worum { padding-top: 36px; padding-bottom: 32px; }
  #angebote { padding-top: 52px; padding-bottom: 55px; }
  #system { padding-top: 56px; padding-bottom: 52px; }
  #ablauf { padding-top: 52px; padding-bottom: 51px; }
  #konkret { padding-top: 32px; padding-bottom: 37px; }
  #fuer-dich { padding-top: 57px; padding-bottom: 57px; }
  #klarheit { padding-top: 57px; padding-bottom: 58px; }
  #anfangen { padding-top: 27px; }
}
@media (max-width: 860px) {
  .page-coaching .phero { padding-bottom: 32px; }
  #worum { padding-top: 33px; padding-bottom: 31px; }
  #angebote { padding-top: 30px; padding-bottom: 30px; }
  #system { padding-top: 30px; padding-bottom: 27px; }
  #ablauf { padding-top: 27px; padding-bottom: 32px; }
  #konkret { padding-top: 34px; padding-bottom: 32px; }
  #fuer-dich { padding-top: 32px; padding-bottom: 32px; }
  #klarheit { padding-top: 33px; padding-bottom: 35px; }
  #anfangen { padding-top: 28px; }
}

@media (max-width: 860px) {
  #angebote .note { margin-top: 1.8rem !important; }
  #angebote { padding-bottom: 25px; }
  #system { padding-top: 25px; }
  /* Auswahlkarte -> Wie es weitergeht, und von dort zum Erstgespraech */
  #waehlen { padding-bottom: 30px; }
  #weiter { padding-top: 30px; padding-bottom: 30px; }
  #erstgespraech { padding-top: 32px; }
}
@media (min-width: 1025px) { #anfangen { padding-top: 20px; } }


/* ---- Optionenseite: drei Uebergaenge enger, der Rest bleibt ------------------------------------------- */
@media (min-width: 1025px) {
  .page-optionen .phero { padding-bottom: 72px; }
  #waehlen { padding-top: 38px; padding-bottom: 38px; }
  #weiter { padding-top: 38px; padding-bottom: 54px; }
  #erstgespraech { padding-top: 34px; }
}

/* ---- der Fuss auf dem Desktop folgt der mobilen Ordnung ------------------------------------------------
   Navigation, darunter die Marke mittig auf eigener Zeile, darunter die Rechtslinks. Die Zeile war bisher
   rechts neben der Navigation und las sich wie ein weiterer Menuepunkt. */
@media (min-width: 1025px) {
  .pfoot .frow { display: block; }
  .pfoot nav { display: flex; flex-wrap: wrap; gap: 0.4rem 1.6rem; }
  .pfoot .claimline { margin: 2.1rem 0 0; text-align: center; }
  .pfoot .legal { display: flex; flex-wrap: wrap; gap: 0.7rem 1.6rem; margin-top: 2.1rem; }
}


/* ---- zwei Uebergaenge nachgezogen ---------------------------------------------------------------------
   Der Schluss der Optionenseite stand zu weit vom Fuss, und die Erkennung hielt die Fragen zu lange auf
   Abstand. Beides nur Polster zwischen Abschnitten, innen bleibt alles, wie es ist. */
@media (min-width: 1025px) {
  .page-optionen #anfrage { padding-bottom: 22px; }
  .page-optionen .pfoot { padding-top: 56px; }
  #fuer-dich { padding-bottom: 46px; }
  #klarheit { padding-top: 45px; }
}

@media (min-width: 1025px) {
  /* Worum es geht -> Die Modelle, und Plan-Hinweis -> Das System */
  #worum { padding-bottom: 24px; }
  #angebote { padding-top: 44px; padding-bottom: 46px; }
  #system { padding-top: 47px; }
}

@media (min-width: 1025px) {
  /* Das System -> Der Ablauf, und Was du bekommst -> Ist das fuer dich */
  #system { padding-bottom: 40px; }
  #ablauf { padding-top: 41px; }
  #konkret { padding-bottom: 30px; }
  #fuer-dich { padding-top: 48px; }
}

@media (min-width: 1025px) {
  /* letzter Ruf -> Footer-Linie: der Leerraum darunter war doppelt so hoch wie noetig */
  .page-coaching #anfangen { padding-bottom: 10px; }
  .page-coaching .pfoot { padding-top: 68px; }
}

@media (min-width: 1025px) {
  /* jeder Sektionswechsel, der in eine Eyebrow-Ueberschrift laeuft: 10 Prozent enger */
  .page-coaching .phero { padding-bottom: 64px; }
  .page-coaching #worum { padding-top: 31px; padding-bottom: 20px; }
  .page-coaching #angebote { padding-top: 39px; padding-bottom: 41px; }
  .page-coaching #system { padding-top: 43px; padding-bottom: 36px; }
  .page-coaching #ablauf { padding-top: 37px; padding-bottom: 47px; }
  .page-coaching #konkret { padding-top: 28px; padding-bottom: 26px; }
  .page-coaching #fuer-dich { padding-top: 44px; padding-bottom: 42px; }
  .page-coaching #klarheit { padding-top: 40px; padding-bottom: 54px; }
  .page-coaching #anfangen { padding-top: 16px; padding-bottom: 8px; }
  .page-coaching .pfoot { padding-top: 65px; }
}

@media (min-width: 1025px) {
  /* Kopfzeile -> COACHING: das leere Band darueber war zu hoch */
  .page-coaching .phero { min-height: 62vh; }
}

/* == RHYTHMUS: Element -> Ueberschrift, ein Wert == */
@media (min-width: 1025px) {
  body.page-coaching .phero { padding-bottom: 37px; }
  body.page-coaching #worum { padding-top: 38px; padding-bottom: 37px; }
  body.page-coaching #angebote { padding-top: 38px; padding-bottom: 37px; }
  body.page-coaching #system { padding-top: 41px; padding-bottom: 37px; }
  body.page-coaching #ablauf { padding-top: 38px; padding-bottom: 37px; }
  body.page-coaching #konkret { padding-top: 38px; padding-bottom: 37px; }
  body.page-coaching #fuer-dich { padding-top: 38px; padding-bottom: 37px; }
  body.page-coaching #klarheit { padding-top: 35px; padding-bottom: 37px; }
  body.page-coaching #anfangen { padding-top: 46px; }
  body.page-optionen .phero { padding-bottom: 32px; }
  body.page-optionen #waehlen { padding-top: 14px; padding-bottom: 37px; }
  body.page-optionen #weiter { padding-top: 38px; padding-bottom: 37px; }
  body.page-optionen #erstgespraech { padding-top: 38px; padding-bottom: 37px; }
  body.page-optionen #anfrage { padding-top: 38px; }
}
@media (min-width: 861px) and (max-width: 1024px) {
  body.page-coaching .phero { padding-bottom: 37px; }
  body.page-coaching #worum { padding-top: 38px; padding-bottom: 37px; }
  body.page-coaching #angebote { padding-top: 38px; padding-bottom: 37px; }
  body.page-coaching #system { padding-top: 41px; padding-bottom: 37px; }
  body.page-coaching #ablauf { padding-top: 38px; padding-bottom: 37px; }
  body.page-coaching #konkret { padding-top: 38px; padding-bottom: 37px; }
  body.page-coaching #fuer-dich { padding-top: 38px; padding-bottom: 37px; }
  body.page-coaching #klarheit { padding-top: 41px; padding-bottom: 37px; }
  body.page-coaching #anfangen { padding-top: 44px; }
  body.page-optionen .phero { padding-bottom: 32px; }
  body.page-optionen #waehlen { padding-top: 14px; padding-bottom: 37px; }
  body.page-optionen #weiter { padding-top: 38px; padding-bottom: 37px; }
  body.page-optionen #erstgespraech { padding-top: 38px; padding-bottom: 37px; }
  body.page-optionen #anfrage { padding-top: 38px; }
}
@media (max-width: 860px) {
  body.page-coaching .phero { padding-bottom: 37px; }
  body.page-coaching #worum { padding-top: 38px; padding-bottom: 37px; }
  body.page-coaching #angebote { padding-top: 38px; padding-bottom: 37px; }
  body.page-coaching #system { padding-top: 41px; padding-bottom: 37px; }
  body.page-coaching #ablauf { padding-top: 22px; padding-bottom: 37px; }
  body.page-coaching #konkret { padding-top: 52px; padding-bottom: 37px; }
  body.page-coaching #fuer-dich { padding-top: 38px; padding-bottom: 37px; }
  body.page-coaching #klarheit { padding-top: 36px; padding-bottom: 37px; }
  body.page-coaching #anfangen { padding-top: 86px; }
  body.page-optionen .phero { padding-bottom: 32px; }
  body.page-optionen #waehlen { padding-top: 14px; padding-bottom: 37px; }
  body.page-optionen #weiter { padding-top: 38px; padding-bottom: 37px; }
  body.page-optionen #erstgespraech { padding-top: 38px; padding-bottom: 37px; }
  body.page-optionen #anfrage { padding-top: 38px; }
}
/* == RHYTHMUS ENDE == */



@media (max-width: 860px) {
  /* Hero-Aktionen stehen in einer Reihe: enger gesetzt, Groesse und Hierarchie bleiben */
  body.page-coaching .phero .kicker { gap: 0.72rem; flex-wrap: nowrap; }
  body.page-coaching .phero .kicker .pill { padding-left: 0.86rem; padding-right: 0.86rem; letter-spacing: 0.15em; }
  body.page-coaching .phero .kicker .textlink { letter-spacing: 0.15em; white-space: nowrap; }
  /* Ablauf -> Was du bekommst: kuerzere Atempause */
  body.page-coaching #konkret { padding-top: 34px; }

  /* Tools-Hero (Nutzer 2026-09-15): "Zum Store" soll neben "Coaching ansehen" stehen, nicht darunter haengen */
  body.page-tools .phero .kicker, body.page-tools .psec .kicker { flex-wrap: nowrap; justify-content: center; gap: 0.72rem; }
  body.page-tools .phero .kicker .pill, body.page-tools .psec .kicker .pill { padding-left: 0.86rem; padding-right: 0.86rem; letter-spacing: 0.15em; }
  body.page-tools .phero .kicker .textlink, body.page-tools .psec .kicker .textlink { letter-spacing: 0.15em; white-space: nowrap; }
}

@media (max-width: 380px) {
  /* schmale Geraete: die Reihe bleibt eine Reihe */
  body.page-coaching .phero .kicker { gap: 0.5rem; }
  body.page-coaching .phero .kicker .pill { padding-left: 0.72rem; padding-right: 0.72rem; }
}





@media (max-width: 1024px) {
  /* schmalere Kopfzeile: der Sperrsatz der Wortmarke ist hier fest in px, der Ausgleich also auch */
  #marc-haid .l::after, #marc-haid .k::after { margin-left: calc(17.5px - 2.5vw); }
}
@media (max-width: 860px) {
  #marc-haid .l::after, #marc-haid .k::after { margin-left: calc(5.4px - 1.9vw); }
}



/* Waehrungszeichen und Zeiteinheit sitzen auf der optischen Mitte der Zahl, nicht auf der Mitte
   ihrer Zeilenkaesten — der Unterschied betraegt ein bis zwei Pixel und ist im Preis sichtbar */

/* Die Kopfzeile liegt fest ueber einer bewegten Welt und traegt einen Backdrop-Filter.
   Ohne eigene Compositing-Ebene zieht Chrome beim Scrollen kurz eine Kopie an den linken Rand.
   Die eigene Ebene beendet das, ohne am Aussehen etwas zu aendern. */
#chrome { transform: translateZ(0); }

/* Das Anfrage-Feld auf dunklem Grund: weniger Deckung, damit der Fels durchkommt —
   die Beschriftungen werden im selben Zug dunkler, sonst verliert die Karte ihre Lesbarkeit. */
body.dark .karte-form {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.34) 0%, rgba(255, 255, 255, 0.10) 60%), rgba(244, 243, 241, 0.30);
  border-color: rgba(255, 255, 255, 0.5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 34px 66px -34px rgba(20, 16, 14, 0.5);
}
body.dark .karte-form .ident { color: #5E5A57; }
body.dark .karte-form label, body.dark .karte-form .lbl { color: #4E4A47; }
body.dark .karte-form .note { color: #6E6A66; }

/* ------------------------------------------------------------------ die Auswahlliste hinter dem Ziel-Feld
   Wortgleich von der Startseite uebernommen, damit beide Formulare dieselbe Bedienung haben. */
.msel { position: relative; margin-top: 0.35rem; }
.msel-trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.62rem 0.85rem; border: 1px solid rgba(72, 62, 56, 0.3); border-radius: 10px; background: rgba(255, 255, 255, 0.45);
  font: inherit; font-size: 0.95rem; font-weight: 300; color: var(--ink-on-sky); text-align: left; cursor: pointer;
  transition: border-color 260ms ease, background 260ms ease; }
.msel-trigger:hover { border-color: rgba(110, 31, 42, 0.4); }
.msel-trigger:focus-visible { outline: 2px solid rgba(110, 31, 42, 0.5); outline-offset: 2px; }
.msel.open .msel-trigger { border-color: rgba(110, 31, 42, 0.45); background: rgba(255, 255, 255, 0.6); }
.msel-value { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msel:not(.chosen) .msel-value { color: #7A7672; }
.msel-chev { flex: 0 0 9px; width: 9px; height: 9px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
  transform: translateY(-2px) rotate(45deg); opacity: 0.55; transition: transform 300ms cubic-bezier(0.2, 0.7, 0.2, 1); }
.msel.open .msel-chev { transform: translateY(2px) rotate(-135deg); }
.msel-panel { position: absolute; left: 0; right: 0; top: calc(100% + 0.5rem); z-index: 30; padding: 0.5rem; border-radius: 12px;
  background: rgba(252, 251, 250, 0.97); border: 1px solid rgba(72, 62, 56, 0.14);
  box-shadow: 0 18px 40px -18px rgba(38, 30, 26, 0.35), 0 2px 8px -4px rgba(38, 30, 26, 0.2);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  opacity: 0; transform: translateY(-4px); transition: opacity 200ms ease, transform 240ms cubic-bezier(0.2, 0.7, 0.2, 1); }
.msel.open .msel-panel { opacity: 1; transform: none; }
.msel-group { margin: 0.3rem 0 0.5rem; padding: 0 0.65rem; font-size: 0.6rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--wine-mid); font-weight: 500; }
.msel-panel ul { list-style: none; margin: 0; padding: 0; }
.msel-panel li { position: relative; padding: 0.5rem 0.65rem 0.5rem 1.7rem; border-radius: 8px; font-size: 0.95rem; font-weight: 300; color: var(--ink-on-sky); cursor: pointer;
  transition: background 160ms ease, color 160ms ease; }
.msel-panel li:hover, .msel-panel li.active { background: rgba(38, 30, 26, 0.06); }
.msel-panel li::before { content: ""; position: absolute; left: 0.65rem; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%;
  background: var(--wine-mid); opacity: 0; transform: scale(0.4); transition: opacity 200ms ease, transform 240ms cubic-bezier(0.2, 0.7, 0.2, 1); }
.msel-panel li[aria-selected="true"] { color: var(--wine-mid); }
.msel-panel li[aria-selected="true"]::before { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .msel-panel, .msel-chev, .msel-panel li::before { transition: none; } }
@media (max-width: 860px) {
    .msel-trigger { padding: 0.5rem 0.8rem; font-size: 14px; }
}

/* Die getroffene Wahl: der Wert traegt den Akzent, nicht der Kasten. Derselbe Punkt, mit dem die Liste
   ihre Auswahl markiert, steht danach vor dem Wert — der Rand bleibt ruhig, damit das Feld nicht wie eine
   Fehlermeldung aussieht. */
.msel.chosen .msel-trigger { border-color: rgba(72, 62, 56, 0.34); background: rgba(255, 255, 255, 0.5); }
.msel.chosen .msel-value { color: var(--wine-mid); font-weight: 500; letter-spacing: 0.01em; }

/* Das Ziel-Feld ist eines von fuenf Feldern und darf nicht heller sein als die Karte, in der es liegt:
   dieselbe Linie wie die anderen Eingaben, kein weisser Block. Das Winkelzeichen sagt, dass es aufgeht. */
.karte-form .msel-trigger { padding: 0.6rem 0 0.6rem; border: 0; border-bottom: 1px solid rgba(72, 62, 56, 0.3);
  border-radius: 0; background: transparent; }
.karte-form .msel-trigger:hover { border-bottom-color: rgba(110, 31, 42, 0.4); }
.karte-form .msel.open .msel-trigger { border-bottom-color: rgba(110, 31, 42, 0.45); background: transparent; }
.karte-form .msel.chosen .msel-trigger { border-bottom-color: rgba(72, 62, 56, 0.34); background: transparent; }
.karte-form .msel-panel { top: calc(100% + 0.35rem); }

/* ---------------------------------------------------------------------------- der Preis als Satz, nicht als Schild
   Die Ziffer stand auf Plakatgroesse und war damit das lauteste Zeichen der Seite — bei einem Preis liest sich
   Lautstaerke als Rabatt. Sie geht auf Ueberschriftgroesse zurueck, das Euro-Zeichen waechst mit und behaelt
   seinen Burgunder: dort wird aus einer Zahl ein Preis. Die Haken bleiben. */
.pricefig { --figsize: clamp(24px, 1.75vw, 30px); }
/* die Ziffer traegt kein Fettgewicht mehr: schmal gesetzt liest sie sich als Angabe, nicht als Schild */
.pricefig .fig { font-weight: 200; letter-spacing: 0; }
.pricefig .u { font-size: calc(var(--figsize) * 0.72); }
.pricefig .sum { text-transform: none; letter-spacing: 0.02em; font-size: 0.8rem; font-weight: 300; opacity: 0.74; }
.offer .close .pricefig { --figsize: clamp(21px, 1.5vw, 26px); }
.offer .pricefig .u { font-size: calc(var(--figsize) * 0.72); }
@media (max-width: 860px) {
  .offer .close .pricefig { --figsize: 19px; }
  .offer .pricefig .u { font-size: calc(var(--figsize) * 0.74); }
  .pick-panel .close .pricefig { --figsize: 26px; }
}
/* der Kaufknopf traegt dieselbe Form wie jede andere Handlung auf der Seite, nicht die volle Breite */
.pick-panel .go { text-align: left; }
.pick-panel .go .pill { display: inline-block; width: auto; padding-left: 2.4rem; padding-right: 2.4rem; }

}

/* == MOBILER BILDAUSSCHNITT == */
@media (max-width: 860px) {
  #world .pw--far { inset: -10% -26%; height: 112.53%; object-position: 38.86% 46% !important; }
  #world .pw--near { inset: -15% -30%; height: 122.34%; object-position: 38.75% 46% !important; }
}
/* == MOBILER BILDAUSSCHNITT ENDE == */

/* Zwei Stufen, zwei Lautstaerken: dasselbe Burgunder, links schmaler, langsamer und mit weniger Streuung.
   Die Premiumkarte behaelt ihr Licht unveraendert. */
/* Auf den Karten laeuft kein Licht mehr am Rand: beim Hovern bleibt allein das Leuchten hinter der Karte,
   und das trennt die beiden Stufen ueber seine Staerke. */
.offer:hover .card-light { opacity: 0; animation: none; }

/* Beim Hovern trennen sich die beiden Listen ueber die Farbe: die Grundleistungen gehen ins gedeckte
   Burgunder, die Zusatzleistungen ins helle. Kein Schein, keine Streuung — nur Farbe. */
.offer .inc li .i, .offer .inc--plus li .i { transition: color 420ms ease; }
.offer .inc--plus li .i { filter: none; }
.offer:hover .inc--plus li .i { color: var(--wine-light); filter: none; }
.offer:not(.offer--premium) .card-halo {
  filter: drop-shadow(0 0 3px rgba(132, 24, 46, 0.6)) drop-shadow(0 0 8px rgba(120, 20, 40, 0.45))
          drop-shadow(0 0 18px rgba(104, 14, 32, 0.28)); }
/* Die Einstiegskarte leuchtet hell, die Premiumkarte burgunderrot: der Rang ist zu sehen, bevor man liest.
   Auf dem dunklen Fels traegt Weiss genug Kontrast — anders als auf der hellen Kante der Karte selbst. */
.offer:not(.offer--premium):hover {
  background: linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05)),
              linear-gradient(160deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.17) 62%), rgba(244, 243, 241, 0.34);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92), 0 44px 80px -34px rgba(30, 24, 20, 0.62),
              0 0 30px rgba(255, 250, 247, 0.34), 0 0 88px rgba(255, 246, 242, 0.2); }
.offer:not(.offer--premium):hover .card-ring { border-color: rgba(255, 255, 255, 0.55); }

/* Die Karten setzen die Zahl kleiner als das Panel; damit Waehrung und Einheit auch dort exakt auf der
   optischen Mitte der Ziffern sitzen, brauchen sie einen eigenen, gemessenen Versatz. */
@media (max-width: 860px) {
}

/* Waehrung, Einheit und das "ab" sitzen auf der optischen Mitte der Ziffern. Damit das bei jeder Groesse
   gleich bleibt, bekommen alle Teile eine Zeilenhoehe von genau 1 — sonst zentriert der Browser Zeilenkaesten
   unterschiedlicher Hoehe, und der Versatz waechst mit der Schriftgroesse mit. */
.pricefig .pre, .pricefig .u, .pricefig .per { line-height: 1; }
.pricefig .u { position: relative; top: 0.045em; }
.pricefig .per { position: relative; top: 0.09em; }
.pricefig .pre { position: relative; top: 0.09em; }

/* == PREIS: Waehrung und Einheit auf der Mitte der Ziffern == */
.pricefig .pre, .pricefig .u, .pricefig .per { line-height: 1; position: relative; }
.pricefig .u { top: -0.0482em; }
.pricefig .per { top: -0.0384em; }
.pricefig .pre { top: -0.0040em; }
/* Englisch (Nutzer 2026-09-11): Euro bleibt, aber englisch geschrieben, das Zeichen steht vor der Zahl ("from €300 / month",
   "€19.90"), eng an der Zahl statt mit dem vollen Abstand. Dezimalpunkt kommt aus site-i18n.js / site.js */
html[lang="en"] .pricefig .pre { order: -2; }
html[lang="en"] .pricefig .u { order: -1; margin-right: -0.3rem; }
/* == PREIS ENDE == */

/* ============================================================================================== der Store ==
   Zwei Teile je Stueck: ein Bildfenster, das nur eine feine Wortmarke traegt, und darunter der Satz.
   Das Fenster ist ein leerer Platz fuer ein spaeteres Motiv — es traegt data-bild="<schluessel>", und ein
   Austausch beruehrt weder Format noch Satz. Keine Kartenflaeche unter dem Text: der Satz steht frei. */
/* 4vw zwischen den Spalten: bei 1.5vw liefen die Trennlinien fast durch und "Mehr erfahren" stand direkt vor dem
   Preis der Nachbarkachel — der Preis las sich wie der des vorigen Produkts */
.regal { display: grid; gap: 2.2rem 4vw; margin-top: 2.6rem; align-items: start; }
/* drei gleichwertige Spalten: kein Produkt gewinnt mehr allein durch Bildhoehe */
.regal--plaene { grid-template-columns: repeat(3, 1fr); }
.regal--plaene .stueck-bild { aspect-ratio: 3 / 2; }
.regal--ebooks { grid-template-columns: repeat(auto-fill, minmax(18.5rem, 1fr)); }
.regal--gratis { grid-template-columns: repeat(3, 1fr); }
.regal--bunde { grid-template-columns: 1fr 1fr; }
.regal--bunde .stueck--gross { grid-column: 1 / span 2; }

.stueck { position: relative; }
.stueck-bild { position: relative; overflow: hidden; border-radius: 15px; isolation: isolate; aspect-ratio: 4 / 3;
  transition: transform 620ms cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 620ms ease; }
.regal--ebooks .stueck-bild { aspect-ratio: 9 / 10; }
.regal--gratis .stueck-bild { aspect-ratio: 16 / 10; }
.regal--bunde .stueck-bild { aspect-ratio: 16 / 9; }
.regal--bunde .stueck--gross .stueck-bild { aspect-ratio: 3 / 1; }
.stueck-bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
  /* 2026-09-11 Nutzer: Store "zu duester" -> Kacheln dunkeln nur noch leicht ab (vorher brightness 0.86) */
  filter: brightness(0.95) contrast(1.02) saturate(0.9);
  transition: transform 900ms cubic-bezier(0.2, 0.7, 0.2, 1), filter 620ms ease; }
.stueck-schleier { position: absolute; inset: 0; pointer-events: none;
  /* neutrales Schwarz ohne Burgunder-Ecke: der alte Verlauf (10,9,9 + Weinrot aus der Ecke) legte einen warmen,
     braunen Stich ueber jedes Produktbild */
  /* --sch (0..1, pro Kachel aus build-pages): Staerke des Verlaufs, gemessen an dem, was der Schriftzug braucht */
  background: linear-gradient(to top, rgb(10 10 10 / calc(0.72 * var(--sch, 1))) 0%, rgb(10 10 10 / calc(0.4 * var(--sch, 1))) 24%, rgb(10 10 10 / calc(0.08 * var(--sch, 1))) 56%, rgb(10 10 10 / calc(0.03 * var(--sch, 1))) 100%); }
/* jede zweite Marke sitzt oben — dann kippt der Verlauf mit, damit sie ihren Grund behaelt */
.stueck-marke--oben ~ .stueck-schleier, .stueck-bild:has(.stueck-marke--oben) .stueck-schleier {
  background: linear-gradient(to bottom, rgb(10 10 10 / calc(0.66 * var(--sch, 1))) 0%, rgb(10 10 10 / calc(0.34 * var(--sch, 1))) 26%, rgb(10 10 10 / calc(0.06 * var(--sch, 1))) 58%, rgb(10 10 10 / calc(0.03 * var(--sch, 1))) 100%); }
.stueck-rahmen { position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  border: 1px solid rgba(255, 255, 255, 0.16); transition: border-color 620ms ease; }

.stueck-marke { position: absolute; left: 1.35rem; right: 1.35rem; margin: 0; font-size: 0.56rem;
  letter-spacing: 0.26em; text-transform: uppercase; font-weight: 500; color: rgba(255, 247, 245, 0.78);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5); }
.stueck-marke--unten { bottom: 1.15rem; }
.stueck-marke--oben { top: 1.1rem; }

.stueck-satz { padding: 1.2rem 0.1rem 0; }
.stueck-kopf { margin: 0; }
.stueck-n { display: block; margin-bottom: 0.5rem; font-size: 0.6rem; letter-spacing: 0.3em; font-weight: 500;
  color: var(--wine-light); }
.stueck-titel { display: block; font-weight: 200; font-size: clamp(20px, 1.62vw, 30px); line-height: 1.04;
  color: #F4F1EE; }
.stueck-teile { margin: 0.6rem 0 0; font-size: 0.58rem; letter-spacing: 0.16em; line-height: 1.7;
  text-transform: uppercase; font-weight: 500; color: var(--wine-light); }
.stueck-zeile { margin: 0.72rem 0 0; font-weight: 300; font-size: clamp(13px, 0.92vw, 15.5px); line-height: 1.58;
  color: rgba(233, 229, 226, 0.94); max-width: 40ch; }
.stueck-fuss { display: flex; align-items: baseline; justify-content: space-between; gap: 1.2rem;
  margin: 1.05rem 0 0; padding-top: 0.85rem; border-top: 1px solid rgba(255, 255, 255, 0.13); }
.stueck-preis { margin: 0; --figsize: clamp(18px, 1.25vw, 23px); color: #F4F1EE; }
.stueck-preis .u { color: var(--wine-light); }
.stueck-preis--frei { font-size: 0.62rem; letter-spacing: 0.26em; text-transform: uppercase; font-weight: 500;
  color: var(--wine-light); }
.mehr { display: inline-flex; align-items: center; gap: 0.6rem; font-size: 0.6rem; letter-spacing: 0.26em;
  text-transform: uppercase; font-weight: 500; color: rgba(226, 221, 217, 0.62); transition: color 420ms ease; }
.mehr::after { content: ""; width: 20px; height: 1px; background: currentColor;
  transition: width 420ms ease, background 420ms ease; }

/* die Bundles legen zwei Blaetter hinter das Fenster: mehrere Baende, die zusammengehoeren */
.stueck--bund .stueck-bild { overflow: visible; }
.stueck--bund .stueck-bild > img { clip-path: inset(0 round 15px);
  transition: transform 900ms cubic-bezier(0.2, 0.7, 0.2, 1), filter 620ms ease, clip-path 900ms cubic-bezier(0.2, 0.7, 0.2, 1); }
/* das Fenster ist hier nicht abgeschnitten (die Blaetter ragen heraus), also schneidet das Bild sich selbst zu —
   beim Zoom (1.045) zieht der Zuschnitt im selben Takt nach innen, damit das Bild in seiner Kante bleibt */
.stueck--bund:has(:where(.stueck-bild, .stueck-titel, .mehr):hover) .stueck-bild > img { clip-path: inset(2.153% round 14.35px); }
.stueck--bund .stueck-schleier { border-radius: 15px; overflow: hidden; }
.blatt { position: absolute; top: 0; bottom: 0; border-radius: 15px; pointer-events: none;
  /* 2026-09-11 Nutzer: nur noch ein dezentes Blatt (zwei wirkten neben dem Karussell zu schwer) */
  border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(36, 34, 34, 0.5); /* neutral statt warmem Braungrau (wirkte gelblich) */
  box-shadow: 0 -6px 16px -10px rgba(0, 0, 0, 0.6);
  transition: transform 620ms cubic-bezier(0.2, 0.7, 0.2, 1), opacity 420ms ease; }
.blatt--2 { left: 18px; right: 18px; transform: translate3d(0, -8px, 0); }
.stueck--bund:has(:where(.stueck-bild, .stueck-titel, .mehr):hover) .blatt--2 { transform: translate3d(0, -11px, 0); }

/* Hover: das Bild atmet, der Rahmen geht ins Burgunder, der Weg verlaengert sich — mehr nicht */
/* Leuchten nach dem Rezept der Premium-Karte auf /coaching (#330008, dicht und weit), fuer die kleineren Kacheln
   etwas kuerzer — das alte 0.26 war auf dem hellen Store-Grund praktisch unsichtbar */
/* die ganze Kachel waechst ein wenig mit (Rahmen, Kante, Schriftzug), wie die Karten auf /coaching */
.stueck:has(:where(.stueck-bild, .stueck-titel, .mehr):hover) .stueck-bild { transform: translateY(-3px) scale(1.025);
  box-shadow: 0 40px 70px -38px rgba(8, 6, 6, 0.75), 0 0 34px rgba(51, 0, 8, 0.42), 0 0 90px rgba(51, 0, 8, 0.26); }
.stueck:has(:where(.stueck-bild, .stueck-titel, .mehr):hover) .stueck-bild img { transform: scale(1.045); filter: brightness(1) contrast(1.04) saturate(0.94); }
.stueck:has(:where(.stueck-bild, .stueck-titel, .mehr):hover) .stueck-rahmen { border-color: rgba(155, 43, 57, 0.55); }
.stueck:has(:where(.stueck-bild, .stueck-titel, .mehr):hover) .mehr { color: var(--wine-light); }
.stueck:has(:where(.stueck-bild, .stueck-titel, .mehr):hover) .mehr::after { width: 34px; }
/* Store (Nutzer 2026-09-11): Klick-Gefuehl ueber der ganzen Kachel samt Bild, der Strich neben "Mehr erfahren" wird
   beim Hover burgunder und etwas laenger, ohne Pfeilspitze. Die Schrift bleibt hell (Weinrot war auf dunklem Grund
   schlecht lesbar). Der Klick fuehrt noch nirgendwohin, die Produktseiten kommen mit dem Livegang. */
/* Reihenabstand (Nutzer: Preiszeile wirkte zugehoerig zur Kachel darunter). Gemessen vorher: Bild->eigener Titel 44 px,
   Preiszeile->naechstes Bild nur 35 px. Faustregel: Abstand zwischen Kacheln etwa doppelt so gross wie der groesste
   Abstand innerhalb einer Kachel. Gilt fuer alle Store-Raster (Plaene, Gratis, E-Books, Bundles). */
body.page-store .regal { row-gap: clamp(72px, 6vw, 96px); }
@media (max-width: 860px) { body.page-store .regal { row-gap: 64px; } }
/* Klick-Gefuehl nur ueber dem Bild und ueber "Mehr erfahren", nicht ueber Titel und Text (Nutzer) */
body.page-store .stueck-bild, body.page-store .stueck .mehr { cursor: pointer; }
/* Abschnittsstriche (Nutzer: bei BUNDLES rot, bei GRATIS/E-BOOKS grau): alle hatten dasselbe #9B2B39, aber 1 px Weinrot
   liest sich auf dunklem Himmel grau und nur ueber hellen Wolken rot. Im dunklen Store daher das hellere Marken-Burgunder
   der Kick-Titel (#B02F3E) mit einem feinen Schein, damit der Strich ueberall als Burgunder erkennbar ist */
body.page-store.dark .psec-head .eyebrow::after, body.page-store.dark .phero .eyebrow::after {
  background: #B02F3E; box-shadow: 0 0 8px rgba(176, 47, 62, 0.8); }
body.page-store.dark .stueck:has(:where(.stueck-bild, .stueck-titel, .mehr):hover) .mehr::after { width: 40px; background: var(--wine-light); }
@media (hover: none) { body.page-store.dark .stueck:has(:where(.stueck-bild, .stueck-titel, .mehr):hover) .mehr::after { width: 20px; background: currentColor; } }
@media (hover: none) {
  .stueck:has(:where(.stueck-bild, .stueck-titel, .mehr):hover) .stueck-bild { transform: none; box-shadow: none; }
  .stueck:has(:where(.stueck-bild, .stueck-titel, .mehr):hover) .stueck-bild img { transform: none; }
  .stueck--bund:has(:where(.stueck-bild, .stueck-titel, .mehr):hover) .stueck-bild > img { clip-path: inset(0 round 15px); }
  .stueck:has(:where(.stueck-bild, .stueck-titel, .mehr):hover) .stueck-rahmen { border-color: rgba(255, 255, 255, 0.16); }
  .stueck:has(:where(.stueck-bild, .stueck-titel, .mehr):hover) .mehr { color: rgba(226, 221, 217, 0.62); }
  .stueck:has(:where(.stueck-bild, .stueck-titel, .mehr):hover) .mehr::after { width: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .stueck-bild, .stueck-bild img, .stueck--bund .stueck-bild > img, .blatt, .mehr, .mehr::after { transition: none; }
}

/* ---- Bundle-Karussell (Nutzer 2026-09-11): beim Hover weicht das Motiv, die enthaltenen E-Books stehen gross in der
   Mitte, die Nachbarn dunkel und unscharf links und rechts. Pfeile, Punkte, Ziehen oder seitliches Scrollen blaettern,
   ein Klick auf eine Nachbarkarte holt sie in die Mitte. Die Karten sind Klone der E-Book-Kacheln (Bild, Schleier,
   Schriftzug), gebaut in site.js aus data-inhalt. Nur mit Maus; auf Touch bleibt die Kachel wie sie ist. */
.karussell { position: absolute; inset: 0; z-index: 4; border-radius: 15px; overflow: hidden; opacity: 0; visibility: hidden;
  background: radial-gradient(55% 80% at 50% 50%, rgba(51, 0, 8, 0.24), rgba(12, 11, 11, 0) 72%), rgba(12, 11, 11, 0.3);
  transition: opacity 480ms cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 480ms; user-select: none; }
/* ruhiger Uebergang (Nutzer: vom Motiv ins Karussell wirkte zu extrem): laengeres Einblenden, weniger Zoom und Unschaerfe,
   die Karten steigen nur ein kleines Stueck auf */
/* dritter Durchgang (Nutzer: 1.4 s war "viel zu langsam", es ging nur ums Abrupte): mittleres Tempo, dafuer ineinander
   laufend. Grund 0.7 s, Motiv verschwimmt 0.85 s, die Karten setzen nach 120 ms ein, solange das Motiv noch verschwimmt;
   durchgehend weiche Ein-/Auslaufkurven statt linearer Spruenge */
/* vierter Durchgang (Nutzer: "darf sofort passieren, nur nicht abrupt", Blatt soll zeitgleich mit dem Wachsen einfahren):
   keine Wartezeit mehr, alles laeuft im Takt des Kachel-Hovers (620 ms) mit derselben weichen Kurve */
/* (danach "wieder zu schnell, nur minimal langsamer": alle Zeiten rund ein Viertel laenger) */
.stueck-bild.k-offen .karussell { opacity: 1; visibility: visible; transition: opacity 700ms cubic-bezier(0.2, 0.7, 0.2, 1); }
.stueck-bild.k-offen > .stueck-marke, .stueck-bild.k-offen > .stueck-lockup,
.stueck-bild.k-offen > .stueck-schleier { opacity: 0; transition: opacity 520ms cubic-bezier(0.2, 0.7, 0.2, 1); }
/* das Motiv bleibt als weicher, abgedunkelter Grund stehen (Nutzer: fast schwarzer Grund war zu viel) */
/* Zuschnitt passend zum Zoom (1 - 1/1.06) / 2 = 2.83 %: sonst bleibt zwischen Bild und Kachelkante ein heller Rahmen stehen.
   Vom normalen Hover (1.045) aus ist das nur ein kleiner Schritt */
.stueck--bund .stueck-bild.k-offen > img { transform: scale(1.06); clip-path: inset(2.83% round 14.15px);
  filter: blur(10px) brightness(0.62) saturate(0.85);
  transition: transform 780ms cubic-bezier(0.2, 0.7, 0.2, 1), clip-path 780ms cubic-bezier(0.2, 0.7, 0.2, 1), filter 780ms cubic-bezier(0.2, 0.7, 0.2, 1); }
/* die Blaetter treten zurueck, solange das Karussell offen ist: es zeigt den Inhalt selbst, beides zusammen war zu viel */
.stueck--bund .stueck-bild.k-offen .blatt { transform: translate3d(0, 0, 0); opacity: 0; }
/* offen nur der duenne burgunder Rahmen, ohne den roten Schein ringsum (Nutzer: zusammen zu viel) */
.stueck--bund:has(:where(.stueck-bild, .stueck-titel, .mehr):hover) .stueck-bild.k-offen { box-shadow: 0 40px 70px -38px rgba(8, 6, 6, 0.75); }
.k-karte { position: absolute; left: 50%; top: 50%; height: 86%; aspect-ratio: 9 / 10; border-radius: 12px; overflow: hidden;
  container-type: inline-size; isolation: isolate; cursor: pointer; box-shadow: 0 26px 44px -24px rgba(0, 0, 0, 0.95);
  transition: transform 680ms cubic-bezier(0.2, 0.7, 0.2, 1), filter 680ms ease, opacity 650ms cubic-bezier(0.2, 0.7, 0.2, 1) 60ms,
    translate 780ms cubic-bezier(0.2, 0.7, 0.2, 1); }
.stueck-bild:not(.k-offen) .k-karte { translate: 0 8px; opacity: 0 !important;
  transition-duration: 680ms, 680ms, 380ms, 500ms; transition-delay: 0s; }
.karussell .k-karte img { transform: none !important; clip-path: none !important; -webkit-user-drag: none;
  filter: brightness(0.95) contrast(1.02) saturate(0.9) !important; }
.k-karte.ist-mitte { cursor: default; }
.karussell.k-ohne .k-karte { transition: none !important; }
/* nur ein burgunder Rahmen (Nutzer: doppelt war zu viel): die Kachel behaelt ihren Hover-Rahmen, die Karten bleiben neutral */
.stueck:has(:where(.stueck-bild, .stueck-titel, .mehr):hover) .karussell .stueck-rahmen { border-color: rgba(255, 255, 255, 0.16); }
.k-pfeil { position: absolute; top: 50%; z-index: 20; width: 34px; height: 34px; margin-top: -17px; padding: 0; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.28); background: rgba(18, 16, 16, 0.55);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); cursor: pointer;
  transition: border-color 320ms ease, background 320ms ease; }
.k-pfeil::before { content: ""; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px;
  border: solid #F4F1EE; border-width: 0 1px 1px 0; }
.k-pfeil--zurueck { left: 12px; }
.k-pfeil--zurueck::before { transform: translate(-25%, -50%) rotate(135deg); }
.k-pfeil--vor { right: 12px; }
.k-pfeil--vor::before { transform: translate(-75%, -50%) rotate(-45deg); }
.k-pfeil:hover { border-color: rgba(176, 47, 62, 0.85); background: rgba(51, 0, 8, 0.6); }
/* Punkte unter dem Fenster statt im Bild (Nutzer), nur solange das Karussell offen ist */
.k-punkte { position: absolute; left: 50%; bottom: -11px; z-index: 20; display: flex; gap: 6px; transform: translateX(-50%);
  opacity: 0; pointer-events: none; transition: opacity 500ms ease; }
.stueck-bild.k-offen .k-punkte { opacity: 1; transition: opacity 620ms ease 140ms; }
.k-punkte i { display: block; width: 5px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.35);
  transition: width 420ms ease, background 420ms ease; }
.k-punkte i.an { width: 16px; background: #B02F3E; }
/* das "x" braucht es nur, wo das Karussell per Tippen offen bleibt (Handy-Store blendet es ein) */
.k-zu { display: none; }
@media (prefers-reduced-motion: reduce) { .karussell, .k-karte, .k-punkte i { transition: none; } }

@media (max-width: 1024px) {
  .regal { gap: 2rem 3.6vw; }
  .regal--gratis { grid-template-columns: 1fr 1fr; }
  .regal--ebooks { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .regal { gap: 2.1rem 3.4vw; margin-top: 1.9rem; }
  .regal--plaene { grid-template-columns: 1fr; }
  .regal--plaene .stueck:nth-child(1), .regal--plaene .stueck:nth-child(2) { grid-column: 1; grid-row: auto; }
  .regal--plaene .stueck--gross { grid-column: 1; grid-row: auto; display: block; height: auto; }
  .regal--plaene .stueck--gross .stueck-bild { aspect-ratio: 4 / 3; min-height: 0; }
  .regal--plaene .stueck .stueck-bild { aspect-ratio: 3 / 2; }
  .regal--ebooks { grid-template-columns: 1fr 1fr; gap: 1.7rem 3.4vw; }
  .regal--gratis { grid-template-columns: 1fr 1fr; gap: 1.7rem 3.4vw; }
  .regal--gratis .stueck-bild { aspect-ratio: 4 / 3; }
  .regal--gratis .stueck:last-child { grid-column: 1 / span 2; }
  .regal--gratis .stueck:last-child .stueck-bild { aspect-ratio: 21 / 9; }
  .regal--gratis .stueck-titel { font-size: 16px; }
  .regal--bunde { grid-template-columns: 1fr; }
  .regal--bunde .stueck--gross { grid-column: 1; }
  .regal--bunde .stueck-bild, .regal--bunde .stueck--gross .stueck-bild { aspect-ratio: 16 / 9; }
  .stueck-bild { border-radius: 13px; }
  .stueck-marke { left: 1rem; right: 1rem; font-size: 0.5rem; letter-spacing: 0.22em; }
  .stueck-marke--unten { bottom: 0.85rem; }
  .stueck-marke--oben { top: 0.85rem; }
  .stueck-satz { padding-top: 0.85rem; }
  .stueck-n { margin-bottom: 0.35rem; font-size: 0.54rem; }
  .stueck-titel { font-size: 19px; }
  .regal--ebooks .stueck-titel { font-size: 16px; }
  .stueck-zeile { font-size: 12px; line-height: 1.45; }
  .regal--ebooks .stueck-zeile { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; }
  .stueck-fuss { margin-top: 0.8rem; padding-top: 0.65rem; gap: 0.6rem; }
  .stueck-preis { --figsize: 16px; }
  .regal--ebooks .mehr { font-size: 0.5rem; letter-spacing: 0.18em; gap: 0.4rem; }
  .regal--ebooks .mehr::after { width: 12px; }
}

/* == HANDY-STORE (Nutzer 2026-09-11: weniger Scrollen, mit dem Finger steuerbar) ==
   Plaene, Gratis und E-Books als seitlich wischbare Reihen: die naechste Kachel schaut rechts herein, Punkte darunter.
   Die Bundles bleiben untereinander (sonst laegen zwei Wischgesten ineinander), dafuer ist ihr Bild selbst wischbar:
   erst das Motiv, dann die E-Books darin. Alles nativ per Scroll-Snap, gebaut in site.js "Handy-Store". */
@media (max-width: 860px) {
  body.page-store .regal--plaene, body.page-store .regal--gratis, body.page-store .regal--ebooks {
    display: flex; gap: 14px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory;
    margin-left: calc(-1 * var(--safe)); margin-right: calc(-1 * var(--safe));
    /* mittig einrasten (Nutzer: linksbuendig wirkte schief, links und rechts ungleich viel Vorschau):
       Innenabstand so, dass auch die erste und letzte Karte in der Mitte stehen koennen */
    --karte: calc(100vw - var(--safe) - 58px);
    padding: 6px calc((100vw - var(--karte)) / 2) 10px;
    overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  body.page-store .regal--plaene::-webkit-scrollbar, body.page-store .regal--gratis::-webkit-scrollbar,
  body.page-store .regal--ebooks::-webkit-scrollbar { display: none; }
  /* Karussell-Charakter wie am Desktop (Nutzer: "sieht aus wie abgeschnitten", "verliert den Charakter"): die Reihe laeuft
     an den Raendern weich aus, die Nachbarkarten sind kleiner, dunkler und leicht unscharf (--d kommt aus site.js:
     0 = Karte steht vorne, 1 = eine Position daneben), beim ersten Sichtbarwerden stupst die Reihe einmal an */
  /* Nutzer 2026-09-16: Bild wird beim Swipen teilweise durchsichtig, Hintergrund scheint durch - die CSS-Maske
     (mask-image) fuer den weichen Randauslauf ist auf iOS Safari waehrend des Scrollens unzuverlaessig, auch mit
     erzwungener eigener Ebene. Ersatzlos entfernt statt weiter drumherum zu patchen: die Karten selbst werden
     durch --d (scale, opacity, blur) schon kleiner/dunkler/unscharf zum Rand hin, das reicht als Uebergang. */
  /* Nutzer 2026-09-16: Strich mitten durchs Bild beim Swipen, auch nach Entfernen der Maske noch da - das
     eigentliche Problem war dieses transform: scale() hier: auf iOS Safari reisst eine Ebene mit border-radius +
     overflow:hidden + isolation (das steckt in .stueck-bild direkt darunter) bei einem Nicht-1-Skalierungswert
     manchmal an der GPU-Kachelgrenze auf, genau als duenner Riss mitten im Bild. Kein Scale mehr, nur noch
     Abdunkeln - das Bild selbst bleibt unangetastet und bekommt nie eine krumme Skalierung verpasst. */
  body.page-store .regal--plaene > .stueck, body.page-store .regal--gratis > .stueck, body.page-store .regal--ebooks > .stueck {
    opacity: calc(1 - 0.35 * var(--d, 0) * var(--d, 0)); }
  body.page-store .regal--plaene > .stueck .stueck-bild, body.page-store .regal--gratis > .stueck .stueck-bild,
  /* quadratisch statt linear (Nutzer 2026-09-16: "kurz unscharf" beim Einrasten): so ist die Karte in den letzten
     ~30% des nativen Einrastens schon praktisch scharf, der Blur zeigt sich nur noch bei echten Nachbarkarten */
  body.page-store .regal--ebooks > .stueck .stueck-bild { filter: blur(calc(var(--d, 0) * var(--d, 0) * 1.6px)) brightness(calc(1 - 0.3 * var(--d, 0))); }
  /* vordere Karte: kein Filter, keine Deckkraft-Ebene (site.js setzt .vorn) - sonst malt Safari sie weich */
  body.page-store .regal > .stueck.vorn, body.page-store .regal > .stueck.vorn .stueck-bild { filter: none !important; opacity: 1 !important; }
  .produkt-seiten > .blatt-vorschau.vorn { transform: none !important; opacity: 1 !important; }
  .produkt-seiten > .blatt-vorschau.vorn .papier { filter: none !important; box-shadow: 0 18px 24px rgba(0, 0, 0, 0.55); }
  /* auch mit der Maus ziehbar (Vorschau-Fenster und schmale Desktop-Fenster schicken Maus statt Finger):
     kein Markieren von Text beim Ziehen, waehrend des Ziehens kein Einrasten (setzt site.js danach selbst) */
  body.page-store .regal--plaene, body.page-store .regal--gratis, body.page-store .regal--ebooks, .wisch {
    cursor: grab; -webkit-user-select: none; user-select: none; }
  body.page-store .regal--plaene img, body.page-store .regal--gratis img, body.page-store .regal--ebooks img, .wisch img { -webkit-user-drag: none; }
  body.page-store .regal.zieht, .wisch.zieht { scroll-snap-type: none !important; cursor: grabbing; }
  @keyframes reihe-stups { 0%, 100% { translate: 0 0; } 45% { translate: -38px 0; } 75% { translate: 5px 0; } }
  body.page-store .regal.stupst > .stueck { animation: reihe-stups 1200ms cubic-bezier(0.3, 0.6, 0.2, 1) 1; }
  body.page-store .regal--plaene > .stueck, body.page-store .regal--gratis > .stueck, body.page-store .regal--ebooks > .stueck {
    flex: 0 0 var(--karte); scroll-snap-align: center; grid-column: auto; grid-row: auto; cursor: pointer; }
  /* E-Books etwas schmaler (9:10 hoch), damit Titel und Preis noch auf den Schirm passen */
  body.page-store .regal--ebooks { --karte: calc(100vw - var(--safe) - 120px); }
  body.page-store .regal--plaene .stueck .stueck-bild, body.page-store .regal--plaene .stueck--gross .stueck-bild,
  body.page-store .regal--gratis .stueck-bild, body.page-store .regal--gratis .stueck:last-child .stueck-bild { aspect-ratio: 4 / 3; }
  body.page-store .regal--gratis .stueck-titel, body.page-store .regal--ebooks .stueck-titel { font-size: 19px; }
  body.page-store .regal--ebooks .mehr { font-size: 0.56rem; letter-spacing: 0.22em; gap: 0.6rem; }
  body.page-store .regal--ebooks .mehr::after { width: 20px; }
  .reihe-punkte { display: flex; justify-content: center; gap: 6px; margin: 16px 0 0; }
  .reihe-punkte i, .wisch-punkte i { display: block; width: 5px; height: 5px; border-radius: 3px;
    background: rgba(255, 255, 255, 0.35); transition: width 420ms ease, background 420ms ease; }
  .reihe-punkte i.an, .wisch-punkte i.an { width: 16px; background: #B02F3E; }
  /* Bundle-Bild: erste Seite durchsichtig (das Motiv darunter), danach je ein E-Book auf dunklem Grund */
  .wisch { position: absolute; inset: 0; z-index: 4; display: flex; overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory; border-radius: inherit; scrollbar-width: none; overscroll-behavior-x: contain; }
  .wisch::-webkit-scrollbar { display: none; }
  .wisch > div { position: relative; flex: 0 0 100%; scroll-snap-align: center; scroll-snap-stop: always; }
  /* 0.93: bei 0.86 schimmerte der Schriftzug des Motivs noch durch die E-Book-Seite */
  .wisch .w-folie { background: radial-gradient(55% 80% at 50% 50%, rgba(51, 0, 8, 0.24), rgba(12, 11, 11, 0) 72%), rgba(12, 11, 11, 0.93); }
  .w-karte { position: absolute; left: 50%; top: 50%; height: 86%; aspect-ratio: 9 / 10; transform: translate(-50%, -50%);
    border-radius: 11px; overflow: hidden; container-type: inline-size; isolation: isolate;
    box-shadow: 0 18px 30px -18px rgba(0, 0, 0, 0.9); }
  .w-karte img { transform: none !important; clip-path: none !important; filter: brightness(0.95) contrast(1.02) saturate(0.9) !important; }
  .wisch-punkte { position: absolute; left: 50%; bottom: -17px; z-index: 5; display: flex; gap: 6px; transform: translateX(-50%); }
  /* Hinweis auf dem Motiv (Nutzer: "ich weiss nicht, ob die Leute sofort wissen, was hier zu tun ist"): eine kleine Pille
     wie der COACHING-Knopf, "3 E-Books ansehen", tippen blaettert zur ersten Karte; verschwindet, sobald geblaettert wird.
     Dazu stupst das Bild beim ersten Sichtbarwerden einmal an, die erste E-Book-Seite schaut dabei kurz herein. */
  /* oben rechts: unten links steht der Schriftzug des Bundles, auf dem Handy lag die Pille darueber */
  .wisch-hinweis { position: absolute; right: 12px; top: 12px; z-index: 6; display: inline-flex; align-items: center; gap: 0.6em;
    padding: 0.62em 0.95em 0.62em 1.05em; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.42);
    background: rgba(18, 16, 16, 0.5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    color: #F4F1EE; font: inherit; font-size: 0.56rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase;
    line-height: 1; cursor: pointer; transition: opacity 320ms ease, border-color 320ms ease; }
  .wisch-hinweis::after { content: ""; width: 5px; height: 5px; margin-left: 0.1em; border: solid currentColor; border-width: 0 1px 1px 0;
    transform: rotate(-45deg); }
  .wisch-hinweis:active { border-color: rgba(176, 47, 62, 0.9); }
  .wisch-hinweis.weg, .stueck-bild.k-offen .wisch-hinweis { opacity: 0; pointer-events: none; }
  @keyframes hinweis-puls { 0%, 100% { box-shadow: 0 0 0 0 rgba(176, 47, 62, 0); } 45% { box-shadow: 0 0 0 7px rgba(176, 47, 62, 0.38); } }
  .wisch-hinweis.puls { animation: hinweis-puls 1300ms ease 2; }
  /* Karussell per Tippen: wischen statt Pfeile, "x" zum Schliessen, Punkte unter dem Bild */
  .karussell { touch-action: pan-y; }
  /* Nutzer 2026-09-17: Pfeile doch sichtbar, damit klar ist, dass man durchblaettern kann - klein und rot wie am Karten-Deck der Startseite */
  .k-pfeil { display: block; width: 36px; height: 44px; margin-top: -22px; border: 0; border-radius: 0; background: none;
    -webkit-backdrop-filter: none; backdrop-filter: none; -webkit-tap-highlight-color: transparent; }
  .k-pfeil::before { width: 13px; height: 13px; border-color: #D8445A; border-width: 0 2.2px 2.2px 0; filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.7)); }
  .k-pfeil--zurueck { left: 6px; } .k-pfeil--vor { right: 6px; }
  .k-pfeil:hover { background: none; }
  /* "x" kleiner (Nutzer): sichtbar ein 20-px-Kreis, die Tippflaeche bleibt 36 px gross */
  .k-zu { display: block; position: absolute; top: 5px; right: 5px; z-index: 21; width: 36px; height: 36px; padding: 0;
    border: 0; background: none; cursor: pointer; }
  .k-zu::before { content: ""; position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; box-sizing: border-box;
    transform: translate(-50%, -50%); border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.4);
    background: rgba(18, 16, 16, 0.5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
  .k-zu::after { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; transform: translate(-50%, -50%);
    /* duenne Striche wie die Pfeile am Desktop (bei 14 % Breite wirkte das x fett) */
    background: linear-gradient(45deg, transparent 46%, #F4F1EE 46%, #F4F1EE 54%, transparent 54%),
      linear-gradient(-45deg, transparent 46%, #F4F1EE 46%, #F4F1EE 54%, transparent 54%); }
  .k-punkte { bottom: -17px; }
  /* schmale Kachel: Karte etwas kleiner, damit die Nachbarn links und rechts sichtbar hereinschauen */
  .k-karte { height: 74%; }
  body.page-store .regal--bunde .stueck-satz { padding-top: 1.75rem; }
  /* Bundles nicht kleiner als die Karten der Reihen darueber (Nutzer: "Bundle-Bilder viel kleiner, macht das Sinn?"):
     4:3 statt 16:9, die E-Book-Karten im wischbaren Bild werden dadurch auch groesser */
  body.page-store .regal--bunde .stueck-bild, body.page-store .regal--bunde .stueck--gross .stueck-bild { aspect-ratio: 4 / 3; }
}
@media (min-width: 861px) { .reihe-punkte, .wisch, .wisch-punkte { display: none !important; } }
/* Bundle-Karussell am Desktop (Nutzer 2026-09-12): oeffnet nicht mehr beim Drueberfahren, die Kachel reagiert wie jede andere
   (Klick aufs Bild = Bundle-Seite). Die Pille "3 E-Books ansehen" erscheint beim Drueberfahren oben rechts und oeffnet das
   Karussell; "x" oben rechts, Klick daneben oder Esc schliessen, die Pfeile bleiben */
@media (min-width: 861px) {
  .wisch-hinweis { position: absolute; right: 14px; top: 14px; z-index: 6; display: inline-flex; align-items: center; gap: 0.6em;
    padding: 0.72em 1em 0.72em 1.1em; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.42);
    background: rgba(18, 16, 16, 0.5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    color: #F4F1EE; font: inherit; font-size: 0.6rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase;
    line-height: 1; cursor: pointer; opacity: 0; transform: translateY(-4px);
    transition: opacity 320ms ease, transform 420ms cubic-bezier(0.2, 0.7, 0.2, 1), border-color 320ms ease, background 320ms ease; }
  .wisch-hinweis::after { content: ""; width: 5px; height: 5px; margin-left: 0.1em; border: solid currentColor; border-width: 0 1px 1px 0;
    transform: rotate(-45deg); }
  .stueck-bild:hover .wisch-hinweis, .wisch-hinweis:focus-visible { opacity: 1; transform: none; }
  .wisch-hinweis:hover, .wisch-hinweis:focus-visible { border-color: #B02F3E; background: rgba(58, 5, 16, 0.75); outline: none; }
  .stueck-bild.k-offen .wisch-hinweis { opacity: 0; pointer-events: none; }
  .k-zu { display: block; position: absolute; top: 8px; right: 8px; z-index: 21; width: 36px; height: 36px; padding: 0;
    border: 0; background: none; cursor: pointer; }
  .k-zu::before { content: ""; position: absolute; left: 50%; top: 50%; width: 24px; height: 24px; box-sizing: border-box;
    transform: translate(-50%, -50%); border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.42);
    background: rgba(18, 16, 16, 0.5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: border-color 300ms ease; }
  .k-zu:hover::before { border-color: #B02F3E; }
  .k-zu::after { content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; transform: translate(-50%, -50%);
    background: linear-gradient(45deg, transparent 46%, #F4F1EE 46%, #F4F1EE 54%, transparent 54%),
      linear-gradient(-45deg, transparent 46%, #F4F1EE 46%, #F4F1EE 54%, transparent 54%); }
}
@media (min-width: 861px) and (hover: none) { .wisch-hinweis { opacity: 1; transform: none; } }
/* Complete Library "Was drin ist" am Desktop (Nutzer 2026-09-12: sechs grosse Kacheln untereinander "zu viel"): eine Reihe mit
   drei sichtbaren Buechern, Pfeile seitlich auf Bildhoehe, Seitenpunkte darunter (site.js "Reihe mit Pfeilen"). Innen Luft
   oben und unten, damit das Anheben und der Schatten beim Drueberfahren nicht abgeschnitten werden */
@media (min-width: 861px) {
  .hat-reihe { position: relative; }
  body.page-store .regal.regal--reihe { display: flex; gap: 4vw; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory;
    scrollbar-width: none; padding: 26px 10px 64px; margin: calc(2.6rem - 26px) -10px -64px; scroll-padding-inline: 10px; }
  body.page-store .regal.regal--reihe::-webkit-scrollbar { display: none; }
  body.page-store .regal--reihe > .stueck { flex: 0 0 calc((100% - 8vw) / 3); scroll-snap-align: start; }
  .reihe-pfeil { z-index: 5; }
  .reihe-pfeil[disabled] { opacity: 0.3; cursor: default; pointer-events: none; }
  .reihe-seiten { display: flex; justify-content: center; gap: 6px; margin: 22px 0 0; }
  .reihe-seiten i { display: block; width: 5px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.35);
    transition: width 420ms ease, background 420ms ease; }
  .reihe-seiten i.an { width: 16px; background: #B02F3E; }
  /* auch die Bundles mit drei Buechern (Nutzer: nebeneinander statt untereinander); passt alles hinein, keine Pfeile und Punkte */
  .reihe-passt .reihe-pfeil, .reihe-passt .reihe-seiten { display: none; }
  /* gleich hohe Kacheln, die Fusszeile unten: bei kuerzerem Satz (Regeneration) stand sie sonst hoeher als bei den Nachbarn */
  /* .regal setzt align-items: start, damit waren die Kacheln nur so hoch wie ihr Inhalt */
  body.page-store .regal.regal--reihe { align-items: stretch; }
  body.page-store .regal--reihe > .stueck { display: flex; flex-direction: column; }
  body.page-store .regal--reihe .stueck-satz { flex: 1 1 auto; display: flex; flex-direction: column; }
  body.page-store .regal--reihe .stueck-zeile { margin-bottom: 1.35rem; }
  body.page-store .regal--reihe .stueck .stueck-fuss { margin-top: auto; }
}
/* schmaler Desktop: drei Kacheln nebeneinander sind hier schmal, "19,90 €" und "Mehr erfahren" brachen um. Preis mit Knopf
   oben, "Mehr erfahren" darunter, beides einzeilig */
@media (min-width: 861px) and (max-width: 1199px) {
  body.page-store .regal--reihe .stueck .stueck-fuss { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 0.7rem; }
  body.page-store .regal--reihe .pricefig { flex-wrap: nowrap; white-space: nowrap; }
  body.page-store .regal--reihe .mehr { white-space: nowrap; }
}
@media (max-width: 860px) { .reihe-pfeil, .reihe-seiten { display: none !important; } }
/* == HANDY-STORE ENDE == */

/* == PRODUKTSEITE (E-Book-Vorlage, Nutzer 2026-09-11) ==
   Gleiche Welt wie der Store (body.page-store.dark): Wolkenplatte, helle Schrift mit dem Store-Schatten, Burgunder nur als
   Akzent. Aufbau: Cover + Kauf, Worum es geht, Kapitel, echte Seiten als Einblick, Arbeitsweise, Bundle, weitere E-Books. */
/* viel Fliesstext ueber hellen Wolken (Kapitel, Beschreibungen): die Platte liegt hier durchgehend im Abendlicht statt
   nur am Seitenende, damit auch kleine Zeilen lesbar bleiben; zum Fuss hin wird es dunkler */
body.page-store.page-produkt.dark #world .pscrim { opacity: 1;
  background: linear-gradient(to bottom, rgba(10, 10, 10, 0.4) 0%, rgba(10, 10, 10, 0.56) 40%, rgba(10, 10, 10, 0.7) 75%, rgba(10, 10, 10, 0.82) 100%); }
body.page-produkt .phero.produkt-hero { min-height: 0; justify-content: flex-start; padding-top: 15vh; padding-bottom: 5vh; }
.produkt-zurueck { align-self: flex-start; margin: 0 0 3.2vh; }
.produkt-kopf { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 5vw; align-items: center; }
.produkt-cover { margin: 0; }
.produkt-bild { aspect-ratio: 9 / 10; border-radius: 18px;
  box-shadow: 0 44px 90px -40px rgba(0, 0, 0, 0.9), 0 0 70px rgba(51, 0, 8, 0.28); }
.produkt-unter { margin: 0.9rem 0 0; font-size: 0.72rem; letter-spacing: 0.34em; text-transform: uppercase; font-weight: 500; color: #E6DFD8; }
.produkt-fakten, .produkt-bereiche { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem 0.55rem; padding: 0; margin: 1.7rem 0 0; }
.produkt-fakten li, .produkt-bereiche li { padding: 0.55em 0.95em; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 999px;
  font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 500; color: #E6DFD8;
  background: rgba(18, 16, 16, 0.32); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.produkt-kauf { display: flex; align-items: center; flex-wrap: wrap; gap: 1.2rem 2.2rem; margin: 2rem 0 0; padding-top: 1.7rem;
  border-top: 1px solid rgba(255, 255, 255, 0.16); }
.produkt-kauf .pricefig { margin: 0; color: #F4F1EE; --figsize: clamp(30px, 2.6vw, 44px); }
.produkt-kauf .kicker { margin: 0; display: flex; align-items: center; gap: 1.3rem; flex-wrap: wrap; }
.produkt-zwei { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 5vw; align-items: start; }
.produkt-worum p.body { margin-top: 0; margin-bottom: 1rem; }
.produkt-zitat { margin: 2.2rem 0 0; font-weight: 200; font-size: clamp(21px, 1.7vw, 30px); line-height: 1.3; color: #F4F1EE; }
.produkt-kapitel { list-style: none; padding: 0; margin: 2.8rem 0 0; border-top: 1px solid rgba(255, 255, 255, 0.16); }
.produkt-kapitel li { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) auto; gap: 1.6rem; align-items: baseline;
  padding: 1.55rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.16); }
/* Nummer hell (Burgunder als Schrift lag bei 1,4 bis 1,7:1 auf dem dunklen Grund), Burgunder bleibt als Strich darunter */
.produkt-kapitel .n { justify-self: start; padding-bottom: 0.4em; border-bottom: 1px solid #B02F3E;
  font-size: 0.66rem; letter-spacing: 0.28em; font-weight: 600; color: #E6DFD8; }
.produkt-kapitel h3 { margin: 0; font-weight: 200; font-size: clamp(21px, 1.75vw, 31px); line-height: 1.12; color: #F4F1EE; }
.produkt-kapitel p { margin: 0.5rem 0 0; font-weight: 300; font-size: clamp(13px, 0.95vw, 15.5px); line-height: 1.55; color: #D9D4CF; }
.produkt-kapitel .s { font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 500; color: #CFC8C1; white-space: nowrap; }
/* echte Seiten: leicht schraeg wie hingelegte Blaetter, unten ausgeblendet (nicht alles verraten) */
.produkt-seiten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3.2vw; margin-top: 3.4rem; }
.blatt-vorschau { margin: 0; }
/* Einblick (Nutzer: schraeg und unten ausgeblendet wirkte schwebend und zufaellig): gerade, ganze Seiten, gleich hoch.
   Die Lupe oeffnet die Grossansicht zum Lesen und Durchblaettern (site.js "Lupe") */
.blatt-vorschau .papier { position: relative; display: block; width: 100%; margin: 0; padding: 0; border: 0; background: none;
  cursor: zoom-in; filter: drop-shadow(0 24px 30px rgba(0, 0, 0, 0.55));
  transition: transform 600ms cubic-bezier(0.2, 0.7, 0.2, 1), filter 600ms ease; }
.blatt-vorschau .papier:hover { transform: translateY(-5px);
  filter: drop-shadow(0 32px 36px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 22px rgba(51, 0, 8, 0.35)); }
.blatt-vorschau img { display: block; width: 100%; height: auto; border-radius: 4px; }
.lupe-icon { position: absolute; right: 12px; bottom: 12px; width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.38); background: rgba(18, 16, 16, 0.72) center / 16px no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F4F1EE' stroke-width='1.4'%3E%3Ccircle cx='11' cy='11' r='6'/%3E%3Cpath d='M15.5 15.5L20 20M11 8.5v5M8.5 11h5'/%3E%3C/svg%3E");
  transition: background-color 300ms ease, border-color 300ms ease; }
.blatt-vorschau .papier:hover .lupe-icon { border-color: rgba(176, 47, 62, 0.9); background-color: rgba(51, 0, 8, 0.85); }
/* Grossansicht */
.lupe { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; background: rgba(8, 7, 7, 0.92);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; visibility: hidden;
  transition: opacity 360ms ease, visibility 0s linear 360ms;
  /* ein Finger wischt (Seite vor/zurueck), zwei Finger duerfen weiter zoomen, um die Seite zu lesen */
  touch-action: pinch-zoom; }
.lupe.offen { opacity: 1; visibility: visible; transition: opacity 360ms ease; }
.lupe figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 1.1rem; }
.lupe img { display: block; width: auto; height: auto; max-height: calc(100vh - 120px); max-width: min(92vw, 860px); border-radius: 4px;
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.9); transform: scale(0.97); transition: transform 420ms cubic-bezier(0.2, 0.7, 0.2, 1); }
.lupe.offen img { transform: none; }
.lupe figcaption { display: flex; gap: 1.8rem; font-size: 0.62rem; letter-spacing: 0.24em; text-transform: uppercase; font-weight: 500; color: #E6DFD8; }
.lupe figcaption .z { color: #ADA6A1; }
.lupe-knopf { position: absolute; width: 42px; height: 42px; padding: 0; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(18, 16, 16, 0.6); cursor: pointer; transition: border-color 300ms ease, background-color 300ms ease; }
.lupe-knopf:hover { border-color: rgba(176, 47, 62, 0.9); background-color: rgba(51, 0, 8, 0.7); }
.lupe-zu { top: 18px; right: 18px; }
.lupe-zu::before, .lupe-zu::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 1px; background: #F4F1EE; }
.lupe-zu::before { transform: translate(-50%, -50%) rotate(45deg); }
.lupe-zu::after { transform: translate(-50%, -50%) rotate(-45deg); }
.lupe-zurueck, .lupe-vor { top: 50%; margin-top: -21px; }
.lupe-zurueck { left: 3vw; }
.lupe-vor { right: 3vw; }
.lupe-zurueck::before, .lupe-vor::before { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px;
  border: solid #F4F1EE; border-width: 0 1px 1px 0; }
.lupe-zurueck::before { transform: translate(-25%, -50%) rotate(135deg); }
.lupe-vor::before { transform: translate(-75%, -50%) rotate(-45deg); }
@media (max-width: 860px) {
  .lupe-zurueck, .lupe-vor { display: none; }
  .lupe img { max-width: 94vw; max-height: calc(100vh - 110px); }
  .lupe-zu { top: 12px; right: 12px; width: 36px; height: 36px; }
}
.blatt-vorschau figcaption { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1.1rem;
  font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 500; color: #E6DFD8; }
/* 3 Stufen (Verstehen, Umsetzen, Anpassen) oder 4 Grundsaetze, je nach Workbook: --spalten setzt build-pages */
.flow.produkt-flow { grid-template-columns: repeat(var(--spalten, 3), minmax(0, 1fr)); margin-top: 3rem; }
/* Abstaende (Nutzer 2026-09-12, "wirken nicht richtig"): Nummer, Titel und Text stehen ueber alle Spalten auf gleicher Hoehe
   (subgrid, auch wenn ein Titel umbricht), mehr Luft zwischen den Spalten, der Text nutzt die Spalte statt 26 Zeichen
   (sonst blieben einzelne Woerter wie "Mythen." allein in der zweiten Zeile) */
@media (min-width: 1025px) {
  .flow.produkt-flow { column-gap: 4.6vw; grid-template-rows: auto auto auto; }
  .flow.produkt-flow .flow-stage { display: grid; grid-row: span 3; grid-template-rows: subgrid; align-content: start; }
  .flow.produkt-flow .flow-stage h3 { font-size: clamp(21px, 1.8vw, 32px); text-wrap: balance; }
  .flow.produkt-flow .flow-stage p:not(.n) { max-width: 34ch; text-wrap: pretty; }
}
.produkt-tipp { margin: 3.2rem 0 0; font-size: 0.7rem; letter-spacing: 0.3em; text-transform: uppercase; font-weight: 600; color: #F4F1EE; }
.produkt-tipp::before { content: ""; display: inline-block; width: 22px; height: 1px; margin-right: 0.9em; vertical-align: middle;
  background: #B02F3E; box-shadow: 0 0 8px rgba(176, 47, 62, 0.8); }
/* Weniger Striche (Nutzer 2026-09-12: "viel zu viele von diesen Strichen", danach: nicht alles entfernen, "Kopf verwenden"):
   weg nur, wo sie sich doppeln: Eyebrow in Karten (Rahmen, Titel und Knopf reichen), Nummer auf Kacheln (die Kachel hat schon
   "Mehr erfahren" mit Strich), der Tipp direkt unter den Ablauf-Strichen. Kapitel-Nummern mit rotem Strich, Abschnitts-Eyebrows
   und der Ablauf wie auf /coaching bleiben */
body.page-store .produkt-bundle .eyebrow::after, body.page-store .produkt-coaching .eyebrow::after,
body.page-store .produkt-tipp::before, body.page-store .stueck .stueck-n::after { display: none; }

/* ================================================== WARENKORB UND PRODUKT-FENSTER (Nutzer 2026-09-12) == */
.korb[hidden], .korb-grund[hidden], .fenster[hidden] { display: none !important; }
/* Kopf: Warenkorb-Symbol links neben MENU, im Store immer, sonst nur wenn etwas darin liegt */
/* Variante 2 (Nutzer 2026-09-12): feine Tasche im Strich der MENU-Linien, Anzahl als kleiner Burgunder-Punkt; Abstand zu MENU
   wie links zwischen dem Strich hinter MARC HAID und COACHING */
#chrome #korb { display: none; left: auto; right: calc(2.4vw + 8.4vw); top: calc(4.45 * var(--hh)); letter-spacing: 0; text-decoration: none; --dd: var(--dr); }
html.korb-da #chrome #korb { display: block; animation: korb-rein 520ms cubic-bezier(0.2, 0.7, 0.2, 1); }
@keyframes korb-rein { from { opacity: 0; transform: translateY(-4px); } }
#korb .l, #korb .k { display: block; }
.korb-tasche { position: relative; display: block; width: 1.55vw; height: 1.55vw; }
.korb-tasche svg { display: block; width: 100%; height: 100%; }
.korb-n { position: absolute; right: -0.55em; top: -0.35em; display: flex; align-items: center; justify-content: center; min-width: 1.55em; height: 1.55em;
  padding: 0 0.35em; border-radius: 999px; background: #7A1426; color: #F4F1EE; font-size: 0.62vw; font-weight: 500; line-height: 1;
  font-variant-numeric: tabular-nums; text-shadow: none; box-shadow: 0 0 10px rgba(122, 20, 38, 0.6); }

.korb-grund, .fenster-grund { position: fixed; inset: 0; background: rgba(8, 7, 7, 0.62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; transition: opacity 420ms ease; }
.korb-grund { z-index: 260; }
html.korb-offen .korb-grund, .fenster.offen .fenster-grund { opacity: 1; }
.korb { position: fixed; top: 0; right: 0; bottom: 0; z-index: 261; display: flex; flex-direction: column; width: min(440px, 100vw);
  background: rgba(18, 16, 16, 0.96); border-left: 1px solid rgba(255, 255, 255, 0.12); color: #F4F1EE;
  box-shadow: -40px 0 90px -40px rgba(0, 0, 0, 0.85); transform: translateX(100%); transition: transform 560ms cubic-bezier(0.2, 0.7, 0.2, 1); }
html.korb-offen .korb { transform: none; }
.korb-kopf { display: flex; align-items: center; justify-content: space-between; padding: 1.7rem 1.6rem 1.2rem; }
.korb-kopf h2 { margin: 0; display: flex; align-items: baseline; gap: 0.7rem; font-weight: 200; font-size: 30px; line-height: 1; }
.korb-anzahl { font-size: 0.62rem; letter-spacing: 0.2em; font-weight: 500; color: #E6DFD8; }
.korb-zu, .fenster-zu { position: relative; flex: none; width: 40px; height: 40px; padding: 0; border-radius: 50%; cursor: pointer; color: #F4F1EE;
  border: 1px solid rgba(255, 255, 255, 0.24); background: rgba(18, 16, 16, 0.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: border-color 300ms ease, background 300ms ease; }
.korb-zu:hover, .fenster-zu:hover, .korb-zu:focus-visible, .fenster-zu:focus-visible { border-color: rgba(176, 47, 62, 0.85); background: rgba(51, 0, 8, 0.6); outline: none; }
.korb-zu i::before, .korb-zu i::after, .fenster-zu i::before, .fenster-zu i::after { content: ""; position: absolute; left: 50%; top: 50%;
  width: 14px; height: 1px; margin: -0.5px 0 0 -7px; background: currentColor; transform: rotate(45deg); }
.korb-zu i::after, .fenster-zu i::after { transform: rotate(-45deg); }
.korb-meldung { margin: 0 1.6rem; font-size: 13px; line-height: 1.5; color: #F4F1EE; }
.korb-meldung:not(:empty) { margin-bottom: 0.9rem; padding: 0.8rem 1rem; border-radius: 12px; background: rgba(51, 0, 8, 0.5); border: 1px solid rgba(176, 47, 62, 0.4); }
.korb-liste { flex: 0 1 auto; margin: 0; padding: 0 1.6rem; list-style: none; overflow-y: auto; overscroll-behavior: contain; }
.korb-leer { padding: 1.4rem 0; font-weight: 300; font-size: 15px; color: #CFC8C1; }
.korb-teil { display: grid; grid-template-columns: 78px minmax(0, 1fr) auto; gap: 1rem; align-items: center; padding: 1rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.kt-bild { display: block; width: 78px; height: 56px; overflow: hidden; border-radius: 9px; border: 1px solid rgba(255, 255, 255, 0.12); }
.kt-bild img { display: block; width: 100%; height: 100%; object-fit: cover; }
.kt-art { display: block; font-size: 9.5px; letter-spacing: 0.26em; text-transform: uppercase; font-weight: 500; color: #CFC8C1; }
.kt-name { display: block; margin-top: 0.3rem; font-weight: 300; font-size: 17px; line-height: 1.2; color: #F4F1EE; text-decoration: none; }
.kt-name:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.kt-unter { display: block; margin-top: 0.2rem; font-weight: 300; font-size: 12px; color: #B9B1AB; }
.kt-bild--hoch { width: 50px; height: 56px; }
/* Preis rechts; beim Ueberfahren der Zeile (oder Tastatur-Fokus darin) rueckt er nach links und das Minus erscheint rechts.
   Die ganze Zeile loest aus, sonst verschwaende das Minus, sobald die Maus vom Preis zu ihm faehrt */
.kt-rechts { position: relative; display: flex; align-items: center; justify-content: flex-end; min-width: 96px; height: 32px; }
.kt-preis { font-weight: 400; font-size: 15px; white-space: nowrap; transition: transform 420ms cubic-bezier(0.2, 0.7, 0.2, 1); }
/* kleiner (Nutzer 2026-09-12): sichtbar 20 px, die Tippflaeche bleibt ueber ::after 36 px gross */
.kt-weg { position: absolute; right: 0; top: 50%; width: 20px; height: 20px; margin-top: -10px; padding: 0; border-radius: 50%; cursor: pointer;
  color: #F4F1EE; border: 1px solid #7A1426; background: #3A0510; opacity: 0; pointer-events: none; transform: translateX(6px) scale(0.9);
  transition: opacity 320ms ease, transform 420ms cubic-bezier(0.2, 0.7, 0.2, 1), border-color 300ms ease, box-shadow 300ms ease; }
.kt-weg::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; }
.kt-weg i::before { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 1.25px; margin: -0.625px 0 0 -4px; background: currentColor; border-radius: 1px; }
.korb-teil:hover .kt-preis, .korb-teil:focus-within .kt-preis { transform: translateX(-30px); }
.korb-teil:hover .kt-weg, .korb-teil:focus-within .kt-weg { opacity: 1; pointer-events: auto; transform: none; }
.kt-weg:hover, .kt-weg:focus-visible { border-color: #B02F3E; box-shadow: 0 0 12px rgba(176, 47, 62, 0.5); outline: none; }
@media (hover: none) {
  .kt-preis, .korb-teil:hover .kt-preis { transform: translateX(-30px); }
  .kt-weg { opacity: 1; pointer-events: auto; transform: none; }
}
.korb-tipps { padding: 0 1.6rem; }
.korb-tipp { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0.9rem 0 0; padding: 0.9rem 1rem;
  border-radius: 12px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.12); font-size: 13px; line-height: 1.45; color: #E6DFD8; }
.kt-wechsel { flex: none; padding: 0.55rem 0.95rem; border-radius: 999px; cursor: pointer; font: inherit; font-size: 10px; letter-spacing: 0.2em;
  text-transform: uppercase; font-weight: 500; color: #F4F1EE; border: 1px solid rgba(176, 47, 62, 0.75); background: rgba(51, 0, 8, 0.6); transition: background 300ms ease; }
.kt-wechsel:hover { background: rgba(92, 10, 24, 0.85); }
.korb-fuss { margin-top: auto; padding: 1.2rem 1.6rem 1.7rem; border-top: 1px solid rgba(255, 255, 255, 0.12); }
.korb-tipps { padding-bottom: 1.2rem; }
.korb-summe { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 1rem; font-size: 11px; letter-spacing: 0.26em;
  text-transform: uppercase; font-weight: 500; color: #CFC8C1; }
.korb-summe b { font-weight: 300; font-size: 26px; letter-spacing: 0; text-transform: none; color: #F4F1EE; }
.korb-kasse { display: block; width: 100%; text-align: center; font-family: inherit; border: 0; cursor: pointer; }
.korb-kasse[disabled] { opacity: 0.45; cursor: default; }
.korb-hinweis { margin: 0.8rem 0 0; font-size: 12px; line-height: 1.5; text-align: center; color: #B9B1AB; }
.korb-hinweis.blink { animation: korb-blink 900ms ease; }
@keyframes korb-blink { 30% { color: #F4F1EE; } }

/* Kacheln: Warenkorb-Knopf neben dem Preis (Nutzer 2026-09-12: gefuellter Kreis "ganz komisch"; dezent, erst hell wie
   "Mehr erfahren", beim Drueberfahren burgunder, mittig auf der Hoehe der Zeile). Die Flaeche bleibt 30 px zum Tippen,
   sichtbar ist nur die feine Tasche wie im Kopf; liegt das Produkt im Warenkorb, bleibt sie burgunder */
/* Nutzer danach: "fast zu wenig haptisch", also ein feiner Kreis; Preis und Knopf stehen als eine Gruppe in einer Zeile
   (.fuss-preis), auch auf dem Handy, wo Preis und "Mehr erfahren" untereinander stehen */
.fuss-preis { display: inline-flex; align-items: center; gap: 0.85rem; }
/* Preis und Waehrungszeichen nie untereinander (Nutzer 2026-09-16, iPhone: "149" und "€" in zwei Zeilen) */
.fuss-preis .stueck-preis { flex-wrap: nowrap; flex-shrink: 0; white-space: nowrap; }
/* Zustaende (Nutzer: "hell, und wenn man drueber geht, dunkel"): ruhig heller Kreis und helle Tasche, beim Drueberfahren
   dunkles Burgunder gefuellt; liegt das Produkt schon im Warenkorb, ebenfalls dunkel, aber mit Haekchen statt Tasche, damit
   es nicht wie ein Hover aussieht */
.stueck-korb { position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0; border-radius: 50%; cursor: pointer;
  color: #F4F1EE; border: 1px solid rgba(244, 241, 238, 0.55); background: transparent;
  transition: color 420ms ease, border-color 420ms ease, background 420ms ease, box-shadow 420ms ease; }
.stueck-korb svg { display: block; width: 15px; height: 15px; margin-top: -1px; }
.stueck-korb .sk-drin { display: none; margin-top: 0; }
.stueck-korb:hover, .stueck-korb:focus-visible, .stueck-korb.im-korb { color: #F4F1EE; border-color: #7A1426; background: #3A0510;
  box-shadow: 0 0 14px rgba(122, 20, 38, 0.55); outline: none; }
.stueck-korb.im-korb .sk-tasche { display: none; }
.stueck-korb.im-korb .sk-drin { display: block; }

/* Produkt-Fenster */
.fenster { position: fixed; inset: 0; z-index: 240; }
.fenster-panel { position: absolute; left: 50%; top: 50%; width: min(1180px, 92vw); height: min(88vh, 1000px); overflow: hidden; border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.16); background: #121010; opacity: 0; transform: translate(-50%, -47%) scale(0.985);
  box-shadow: 0 60px 120px -50px rgba(0, 0, 0, 0.9), 0 0 60px rgba(51, 0, 8, 0.35);
  transition: transform 620ms cubic-bezier(0.2, 0.7, 0.2, 1), opacity 420ms ease; }
.fenster.offen .fenster-panel { opacity: 1; transform: translate(-50%, -50%); }
.fenster-leiste { position: absolute; top: 0; left: 0; right: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px 22px 26px; background: linear-gradient(to bottom, rgba(12, 11, 11, 0.88), rgba(12, 11, 11, 0)); }
.fenster-rahmen { display: block; width: 100%; height: 100%; border: 0; opacity: 0; transition: opacity 420ms ease; }
.fenster.geladen .fenster-rahmen { opacity: 1; }
.fenster-lade { position: absolute; left: 50%; top: 50%; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18); border-top-color: #B02F3E; animation: fenster-dreh 900ms linear infinite; }
.fenster.geladen .fenster-lade { display: none; }
@keyframes fenster-dreh { to { transform: rotate(360deg); } }
@media (max-width: 860px) {
  .fenster-panel { left: 0; right: 0; top: auto; bottom: 0; width: 100%; height: 92vh; border-radius: 20px 20px 0 0; transform: translateY(8%); }
  .fenster.offen .fenster-panel { transform: none; }
  .fenster-leiste { padding: 10px 12px 18px 18px; }
  .korb-kopf { padding: 1.3rem 1.2rem 1rem; } .korb-liste, .korb-tipps { padding-left: 1.2rem; padding-right: 1.2rem; }
  .korb-meldung { margin-left: 1.2rem; margin-right: 1.2rem; } .korb-fuss { padding: 1rem 1.2rem 1.4rem; }
  .korb-teil { grid-template-columns: 64px minmax(0, 1fr) auto; gap: 0.8rem; } .kt-bild { width: 64px; height: 48px; } .kt-bild--hoch { width: 46px; height: 51px; }
}
/* Warenkorb-Symbol im Kopf auf Tablet und Handy: MENU ist dort in px gesetzt, das Symbol steht mit festem Abstand links davon */
@media (max-width: 1024px) {
  #chrome #korb { right: calc(5.5vw + 96px); top: 2.9vh; }
  .korb-tasche { width: 21px; height: 21px; } .korb-n { font-size: 9px; }
}
@media (max-width: 860px) {
  #chrome #korb { right: calc(5.5vw + 74px); top: 2.95vh; }
  .korb-tasche { width: 18px; height: 18px; } .korb-n { font-size: 8px; }
}
/* die Seite im Fenster: ohne Kopf, Menue, Fuss, "Zurueck" und "Weitere" */
html.im-fenster #chrome, html.im-fenster #qnav, html.im-fenster .pfoot, html.im-fenster .produkt-zurueck, html.im-fenster #weitere { display: none !important; }
/* der graue Browser-Scrollbalken schnitt die runde Ecke des Fensters an: duenn und dunkel */
html.im-fenster { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.22) transparent; }
/* Lupe im Fenster offen: das Fenster blendet "Ganze Seite oeffnen" und sein X aus, es bleibt nur das X der Lupe */
.fenster-leiste { transition: opacity 280ms ease; }
.fenster.lupe-offen .fenster-leiste { opacity: 0; pointer-events: none; }
/* im Fenster fuehrt das Kopfbild zur ganzen Seite (site.js) */
html.im-fenster .produkt-cover { cursor: pointer; }
.produkt-bundle { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 3.2vw; align-items: center;
  padding: 1.3rem; border-radius: 18px; border: 1px solid rgba(255, 255, 255, 0.16); color: inherit; text-decoration: none;
  background: rgba(16, 14, 14, 0.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: border-color 520ms ease, box-shadow 620ms ease, transform 620ms cubic-bezier(0.2, 0.7, 0.2, 1); }
.produkt-bundle:hover { border-color: rgba(155, 43, 57, 0.55); transform: translateY(-3px);
  box-shadow: 0 34px 60px -34px rgba(8, 6, 6, 0.8), 0 0 34px rgba(51, 0, 8, 0.42); }
.pb-bild { display: block; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; }
.pb-bild img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* E-Book-Motive sind hochkant (9:10): in der Karte ganz zeigen statt quer zuschneiden (Nutzer 2026-09-12: "schneidet der Frau
   den Kopf ab", lieber mehr sehen) */
.produkt-bundle--hoch { grid-template-columns: minmax(0, 0.34fr) minmax(0, 1.66fr); }
.produkt-bundle--hoch .pb-bild { aspect-ratio: 9 / 10; }
.pb-text { display: flex; flex-direction: column; align-items: flex-start; gap: 0.55rem; }
.pb-text .eyebrow { margin: 0; }
.pb-titel { font-weight: 200; font-size: clamp(24px, 2.1vw, 38px); line-height: 1.06; color: #F4F1EE; }
.pb-zeile { font-weight: 300; font-size: clamp(13.5px, 1vw, 16px); line-height: 1.55; color: #D9D4CF; }
.pb-preis { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.4rem 0.9rem; margin-top: 0.4rem; }
.pb-preis s { color: #ADA6A1; font-size: 0.95rem; }
.pb-preis b { font-weight: 500; font-size: clamp(20px, 1.6vw, 28px); color: #F4F1EE; }
/* Coaching-Hinweis als eigene Karte (Nutzer 2026-09-12: "hervorheben"): Glas wie die Bundle-Karte, Satz gross, gefuellter Knopf */
.produkt-coaching { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1.2rem 2.6rem;
  margin-top: 1.6rem; padding: 1.7rem 2rem; border-radius: 18px; border: 1px solid rgba(255, 255, 255, 0.16);
  background: radial-gradient(60% 120% at 0% 50%, rgba(51, 0, 8, 0.32), rgba(16, 14, 14, 0) 70%), rgba(16, 14, 14, 0.55);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: inherit; text-decoration: none;
  transition: border-color 520ms ease, box-shadow 620ms ease, transform 620ms cubic-bezier(0.2, 0.7, 0.2, 1); }
.produkt-coaching:hover { border-color: rgba(155, 43, 57, 0.55); transform: translateY(-3px);
  box-shadow: 0 34px 60px -34px rgba(8, 6, 6, 0.8), 0 0 34px rgba(51, 0, 8, 0.42); }
.pc-text { display: flex; flex-direction: column; align-items: flex-start; gap: 0.6rem; }
.pc-text .eyebrow { margin: 0; }
.pc-satz { font-weight: 200; font-size: clamp(20px, 1.7vw, 30px); line-height: 1.22; color: #F4F1EE; max-width: 32ch; text-wrap: balance;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.72), 0 0 4px rgba(0, 0, 0, 0.62); }
.produkt-coaching .pill { flex: none; }
.produkt-coaching:first-child { margin-top: 0; }
@media (max-width: 860px) { .produkt-coaching { padding: 1.4rem 1.3rem; } }
/* Complete Library als leise Zeile unter der Bundle-Karte */
.produkt-library { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.6rem 1.4rem; margin: 1.3rem 0 0 1.3rem;
  font-weight: 300; font-size: clamp(13px, 0.95vw, 15.5px); line-height: 1.55; color: #D9D4CF;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.72), 0 0 4px rgba(0, 0, 0, 0.62); }
@media (max-width: 860px) { .produkt-library { margin-left: 0; } }
.pb-preis em { font-style: normal; font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 600; color: #E6DFD8; }
body.page-produkt .produkt-zurueck, body.page-produkt .produkt-unter, body.page-produkt .produkt-fakten li, body.page-produkt .produkt-bereiche li,
body.page-produkt .produkt-zitat, body.page-produkt .produkt-kapitel h3, body.page-produkt .produkt-kapitel p, body.page-produkt .produkt-kapitel .n,
body.page-produkt .produkt-kapitel .s, body.page-produkt .blatt-vorschau figcaption, body.page-produkt .produkt-tipp, body.page-produkt p.body,
body.page-produkt .flow-stage h3, body.page-produkt .flow-stage p, body.page-produkt .flow-stage .n, body.page-produkt .pricefig {
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.72), 0 0 4px rgba(0, 0, 0, 0.62); }
@media (max-width: 860px) {
  body.page-produkt .phero.produkt-hero { padding-top: 13vh; }
  .produkt-kopf, .produkt-zwei { grid-template-columns: minmax(0, 1fr); gap: 3.5vh; }
  .produkt-cover { max-width: 78vw; }
  .produkt-kapitel li { grid-template-columns: 2.6rem minmax(0, 1fr); gap: 0.4rem 1rem; }
  .produkt-kapitel .s { grid-column: 2; }
  /* Einblick wie die Reihen im Store (Nutzer: "ich kann hier nicht nach rechts, nur die erste Seite groesser machen"):
     die vordere Seite steht mittig, die Nachbarseiten schauen kleiner und dunkler herein, mit Finger und Maus ziehbar,
     ein Tipp auf eine Nachbarseite holt sie in die Mitte, ein Tipp auf die vordere Seite oeffnet die Lupe.
     Punkte, Tiefe (--d) und das einmalige Anstupsen kommen aus site.js "Handy-Store". */
  /* Karte so breit wie die Textspalte (Nutzer: Ueberschrift links, Seite leicht eingerueckt wirkte versetzt): mittig
     eingerastet steht sie damit genau buendig mit der Ueberschrift, die Nachbarseite schaut im Seitenrand herein */
  .produkt-seiten { --karte: calc(100vw - 2 * var(--safe)); display: flex; gap: 12px; overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none;
    margin: 2.4rem calc(-1 * var(--safe)) 0; padding: 8px calc((100vw - var(--karte)) / 2) 12px;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
    cursor: grab; -webkit-user-select: none; user-select: none; }
  .produkt-seiten::-webkit-scrollbar { display: none; }
  .produkt-seiten.zieht { scroll-snap-type: none !important; cursor: grabbing; }
  .produkt-seiten img { -webkit-user-drag: none; }
  .blatt-vorschau { flex: 0 0 var(--karte); scroll-snap-align: center;
    transform: scale(calc(1 - 0.08 * var(--d, 0))); transform-origin: 50% 40%; opacity: calc(1 - 0.4 * var(--d, 0)); }
  .blatt-vorschau .papier { filter: drop-shadow(0 18px 24px rgba(0, 0, 0, 0.55)) brightness(calc(1 - 0.3 * var(--d, 0))); }
  .produkt-seiten.stupst > .blatt-vorschau { animation: reihe-stups 1200ms cubic-bezier(0.3, 0.6, 0.2, 1) 1; }
  /* kleine Lupe nur auf der vorderen Seite */
  .blatt-vorschau .lupe-icon { right: 9px; bottom: 9px; width: 28px; height: 28px; background-size: 14px; opacity: calc(1 - var(--d, 0)); }
  .blatt-vorschau figcaption { margin-top: 0.9rem; gap: 0.6rem; font-size: 0.54rem; letter-spacing: 0.2em; }
  /* Bereiche als ruhige Liste statt Pillen (Nutzer: "etwas aufraeumen", die Pillen brachen ungleichmaessig um):
     eine Zeile je Bereich, Burgunderstrich davor wie beim Tipp, Haarlinien wie im Kapitelverzeichnis */
  .produkt-bereiche { flex-direction: column; flex-wrap: nowrap; gap: 0; margin-top: 1.8rem; border-top: 1px solid rgba(255, 255, 255, 0.13); }
  .produkt-bereiche li { display: flex; align-items: center; gap: 0.95em; padding: 1.05em 0; border: 0; border-radius: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.13); background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .produkt-bereiche li::before { content: ""; flex: none; width: 16px; height: 1px; background: #B02F3E; box-shadow: 0 0 8px rgba(176, 47, 62, 0.8); }
  .flow.produkt-flow { grid-template-columns: minmax(0, 1fr); }
  .produkt-bundle { grid-template-columns: minmax(0, 1fr); }
}
/* "So arbeitest du damit" auf Tablet und Handy (Nutzer: 1:1 wie die Aussagen "Ist das fuer dich?" auf /coaching/):
   untereinander, die gerade gelesene Stufe steht hell, die anderen treten zurueck; beim Runterscrollen leuchtet die
   jeweilige Stufe auf (Nummer burgunder mit Schein, Text heller, Burgunderlinie waechst). Die Klasse .near setzt site.js
   ("without a pointer"), dort auch fuer schmale Fenster bis 1024 px. */
@media (max-width: 1024px) {
  .flow.produkt-flow { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 2.8rem; }
}
@media (hover: none), (max-width: 1024px) {
  .flow.produkt-flow .flow-stage, .flow.produkt-flow:hover .flow-stage { position: relative; margin: 0; padding: 2.3vh 0 2.5vh;
    opacity: 0.3; transform: translate3d(0, 0.5vh, 0);
    transition: opacity 680ms ease, transform 760ms cubic-bezier(0.2, 0.7, 0.2, 1); }
  .flow.produkt-flow .flow-stage + .flow-stage { border-top: 1px solid rgba(255, 255, 255, 0.13); }
  .flow.produkt-flow .flow-stage.near, .flow.produkt-flow:hover .flow-stage.near { opacity: 1; transform: none; }
  .flow.produkt-flow .flow-stage::before { display: none; }
  .flow.produkt-flow .flow-stage::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: 0; max-width: 62%;
    background: linear-gradient(to right, var(--wine-light), rgba(155, 43, 57, 0));
    transition: width 760ms cubic-bezier(0.2, 0.7, 0.2, 1); }
  .flow.produkt-flow .flow-stage.near::after { width: 62%; }
  .flow.produkt-flow .flow-stage .n { opacity: 0.5; transition: color 680ms ease, opacity 680ms ease, text-shadow 680ms ease; }
  .flow.produkt-flow .flow-stage.near .n { opacity: 1; color: var(--wine-light); text-shadow: 0 0 14px rgba(155, 43, 57, 0.45); }
  .flow.produkt-flow .flow-stage h3, .flow.produkt-flow .flow-stage p { transform-origin: 0% 50%;
    transition: scale 760ms cubic-bezier(0.2, 0.7, 0.2, 1), color 680ms ease, text-shadow 680ms ease; }
  .flow.produkt-flow .flow-stage.near h3, .flow.produkt-flow .flow-stage.near p { scale: 1.015; color: #FFFDFB;
    text-shadow: 0 0 22px rgba(246, 244, 241, 0.28); }
}
@media (prefers-reduced-motion: reduce) {
  .flow.produkt-flow .flow-stage { opacity: 1; transform: none; transition: none; }
  .flow.produkt-flow .flow-stage h3, .flow.produkt-flow .flow-stage p { scale: 1 !important; transition: none; }
}
/* == PRODUKTSEITE ENDE == */

/* == PRODUKTSEITEN II: Guides, Plaene, Bundles, Fragebogen (Nutzer 2026-09-11: "Store-Seite vollenden") ==
   Gleiche dunkle Welt wie die E-Book-Seiten. Plaene und Bundles haben Querformat-Motive, deshalb 4:3 statt 9:10.
   Formulare (Guide anfordern, Fragebogen) sind noch nicht verbunden: site.js zeigt beim Absenden nur den Hinweis. */
.produkt-bild--breit { aspect-ratio: 4 / 3; }
.produkt-gratis { margin: 0; font-weight: 200; font-size: clamp(30px, 2.6vw, 44px); line-height: 1; letter-spacing: 0.01em; color: #F4F1EE; }
.produkt-statt { flex: 1 0 100%; margin: -0.3rem 0 0; font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 500; color: #CFC8C1; }
body.page-produkt .produkt-gratis, body.page-produkt .produkt-statt, body.page-produkt .plan-fragen h3, body.page-produkt .plan-fragen li,
body.page-produkt .plan-hinweis, body.page-produkt .pf-feld > span, body.page-produkt .pf-label, body.page-produkt .pf-check,
body.page-produkt .pf-gruppe legend, body.page-produkt .pf-hinweis, body.page-produkt .pf-status {
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.72), 0 0 4px rgba(0, 0, 0, 0.62); }
/* Fragebogen-Uebersicht auf der Planseite */
.plan-fragen { display: grid; grid-template-columns: repeat(var(--spalten, 3), minmax(0, 1fr)); gap: 2rem 3.2vw; margin-top: 2.8rem; }
.plan-fragen h3 { margin: 0 0 1rem; padding-bottom: 0.8rem; border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  font-weight: 200; font-size: clamp(21px, 1.75vw, 31px); line-height: 1.12; color: #F4F1EE; }
.plan-fragen ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
/* Punkte statt Strichen (Nutzer: Striche sassen nicht mittig; 1-px-Striche wirkten je nach Pixelraster rot oder grau) */
.plan-fragen li { display: flex; align-items: center; gap: 0.85em; font-weight: 300; font-size: clamp(13px, 0.95vw, 15.5px); line-height: 1.5; color: #D9D4CF; }
.plan-fragen li::before { content: ""; flex: none; width: 5px; height: 5px; border-radius: 50%; background: #B02F3E; box-shadow: 0 0 6px rgba(176, 47, 62, 0.6); }
.plan-hinweis { margin: 2.4rem 0 0; max-width: 62ch; font-weight: 300; font-size: 13.5px; line-height: 1.6; color: #CFC8C1; }
.plan-link { margin: 1.4rem 0 0; }
/* Formulare auf dunklem Grund */
.pform { max-width: 60rem; }
.pform--guide { display: grid; gap: 1.3rem; max-width: 34rem; }
.pf-gruppe { margin: 0; padding: 2.2rem 0 0; border: 0; border-top: 1px solid rgba(255, 255, 255, 0.16); min-width: 0; }
.pf-gruppe + .pf-gruppe { margin-top: 2.8rem; }
.pf-gruppe legend { float: left; width: 100%; padding: 0; margin: 0 0 1.5rem; font-weight: 200; font-size: clamp(22px, 1.8vw, 32px); line-height: 1.1; color: #F4F1EE; }
.pf-raster { clear: both; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.3rem 2.2rem; }
.pf-feld { display: flex; flex-direction: column; gap: 0.55rem; min-width: 0; }
.pf-feld--breit { grid-column: 1 / -1; }
.pf-feld > span, .pf-label { font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 500; color: #E6DFD8; }
.pform input[type="text"], .pform input[type="email"], .pform input[type="number"], .pform select, .pform textarea {
  width: 100%; box-sizing: border-box; font: inherit; font-size: 15px; font-weight: 300; color: #F4F1EE;
  background: rgba(16, 14, 14, 0.55); border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 12px; padding: 0.8em 0.95em;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: border-color 300ms ease, box-shadow 300ms ease; }
.pform select { -webkit-appearance: none; appearance: none; padding-right: 2.6em; background-repeat: no-repeat; background-position: right 1em center; background-size: 10px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='none' stroke='%23E6DFD8' stroke-width='1.2'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E"); }
.pform select option { color: #1A1A1A; background: #F4F1EE; }
.pform textarea { resize: vertical; min-height: 5.5em; line-height: 1.5; }
.pform input:focus, .pform select:focus, .pform textarea:focus { outline: none; border-color: rgba(176, 47, 62, 0.9); box-shadow: 0 0 0 3px rgba(176, 47, 62, 0.25); }
.pf-wahl { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.pf-wahl label { position: relative; cursor: pointer; }
.pf-wahl input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.pf-wahl span { display: inline-block; padding: 0.75em 1.15em; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.28);
  font-size: 0.64rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 500; color: #E6DFD8; background: rgba(18, 16, 16, 0.4);
  transition: border-color 300ms ease, background-color 300ms ease, color 300ms ease; }
.pf-wahl input:checked + span { border-color: #B02F3E; background: rgba(51, 0, 8, 0.72); color: #FFFDFB; }
.pf-wahl input:focus-visible + span { box-shadow: 0 0 0 3px rgba(176, 47, 62, 0.35); }
.pf-check { display: flex; gap: 0.85rem; align-items: flex-start; font-size: 13.5px; font-weight: 300; line-height: 1.55; color: #D9D4CF; cursor: pointer; }
.pf-check input { flex: none; width: 18px; height: 18px; margin: 0.15em 0 0; accent-color: #9B2B39; }
.pf-hinweis { margin: 0; font-size: 12.5px; font-weight: 300; line-height: 1.55; color: #ADA6A1; }
/* Einwilligung beim Guide (ersetzt den Haken): im selben Weiss und derselben Groesse wie der Text daneben, nicht als graues
   Kleingedrucktes (Nutzer 2026-09-12); gut lesbar ist auch fuer die Wirksamkeit der Einwilligung wichtig */
body.page-produkt .pf-einwilligung { font-size: 13.5px; color: #D9D4CF; }
.pf-senden { margin: 2rem 0 0; }
.pform button.pill { font: inherit; font-size: 0.7rem; letter-spacing: 0.24em; text-transform: uppercase; cursor: pointer; }
.pf-status { margin: 1rem 0 0; font-size: 13.5px; font-weight: 300; line-height: 1.55; color: #E6DFD8; }
/* "Weitere Plaene": zwei Kacheln nebeneinander statt der Store-Anordnung mit der grossen dritten Kachel */
@media (min-width: 861px) { body.page-produkt .regal--plaene.regal--zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  .plan-fragen { grid-template-columns: minmax(0, 1fr); }
  .pf-raster { grid-template-columns: minmax(0, 1fr); }
  .produkt-bild--breit { aspect-ratio: 4 / 3; }
}
/* Handy aufgeraeumt (Nutzer 2026-09-12: Training + Ernaehrung "etwas zu viel gescrollt", 6,3 Bildschirme). Nebeneinander nur,
   wo die Inhalte kurz genug sind: Fragebogen-Stichworte und die vier Ablauf-Schritte mit Ein-Wort-Titeln */
@media (max-width: 860px) {
  .plan-fragen { gap: 1.9rem; margin-top: 2rem; }
  .plan-fragen h3 { margin-bottom: 0.8rem; padding-bottom: 0.6rem; }
  .plan-fragen ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem 1rem; }
  .plan-fragen li { align-items: flex-start; font-size: 13px; line-height: 1.4; }
  .plan-fragen li::before { margin-top: 0.5em; }
  /* So laeuft es ab (nur die Plaene haben #ablauf): 2 x 2 statt vier Stufen untereinander */
  body.page-produkt #ablauf .flow.produkt-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.2rem; }
  body.page-produkt #ablauf .flow.produkt-flow .flow-stage + .flow-stage { border-top: 0; }
  body.page-produkt #ablauf .flow.produkt-flow .flow-stage:nth-child(n+3) { border-top: 1px solid rgba(255, 255, 255, 0.13); }
  body.page-produkt #ablauf .flow.produkt-flow .flow-stage h3 { font-size: 19px; }
  body.page-produkt #ablauf .flow.produkt-flow .flow-stage p:not(.n) { font-size: 13px; line-height: 1.45; }
  /* site.js hellt beim Scrollen eine Stufe auf (.near); im 2 x 2 steht sie neben ihrem Partner, der sonst blass daneben blieb.
     Beide Stufen einer Zeile leuchten zusammen */
  body.page-produkt #ablauf .flow-stage:nth-child(odd).near + .flow-stage,
  body.page-produkt #ablauf .flow-stage:nth-child(odd):has(+ .flow-stage.near) { opacity: 1; transform: none; }
  body.page-produkt #ablauf .flow-stage:nth-child(odd).near + .flow-stage .n,
  body.page-produkt #ablauf .flow-stage:nth-child(odd):has(+ .flow-stage.near) .n { opacity: 1; color: var(--wine-light); text-shadow: 0 0 14px rgba(155, 43, 57, 0.45); }
  body.page-produkt #ablauf .flow-stage:nth-child(odd).near + .flow-stage :is(h3, p),
  body.page-produkt #ablauf .flow-stage:nth-child(odd):has(+ .flow-stage.near) :is(h3, p) { scale: 1.015; color: #FFFDFB; text-shadow: 0 0 22px rgba(246, 244, 241, 0.28); }
  body.page-produkt #ablauf .flow-stage:nth-child(odd).near + .flow-stage::after,
  body.page-produkt #ablauf .flow-stage:nth-child(odd):has(+ .flow-stage.near)::after { width: 62%; }
  /* Was drin ist auf den Plan-Seiten: etwas engere Zeilen */
  body.page-produkt:has(#fragebogen) .produkt-kapitel li { padding: 1.1rem 0; }
  /* Coaching-Karte (Nutzer: auf dem Handy "sieht komisch aus"): Satz kleiner, Knopf ueber die ganze Kartenbreite */
  .produkt-coaching { padding: 1.35rem 1.25rem 1.3rem; gap: 1.1rem; }
  .produkt-coaching .pc-text { flex: 1 1 100%; gap: 0.5rem; }
  .pc-satz { font-size: 18px; line-height: 1.3; max-width: none; }
  .produkt-coaching .pill { flex: 1 1 100%; text-align: center; }
  /* Footer zentriert (Nutzer): Seitenlinks und Rechtliches auf derselben Achse wie der Claim */
  .pfoot nav { justify-items: center; justify-content: center; text-align: center; }
  .pfoot .legal { justify-content: center; }
}
/* Auswahlliste im Fragebogen: dieselbe .msel wie auf Startseite und /starten/ (Nutzer), in der dunklen Fassung der Felder */
.pform .msel { margin-top: 0; }
.pform .msel-trigger { padding: 0.8em 0.95em; border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 12px; background: rgba(16, 14, 14, 0.55);
  font-size: 15px; color: #F4F1EE; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.pform .msel-trigger:hover { border-color: rgba(176, 47, 62, 0.6); }
.pform .msel-trigger:focus-visible { outline: none; border-color: rgba(176, 47, 62, 0.9); box-shadow: 0 0 0 3px rgba(176, 47, 62, 0.25); }
.pform .msel.open .msel-trigger { border-color: rgba(176, 47, 62, 0.8); background: rgba(16, 14, 14, 0.7); }
.pform .msel:not(.chosen) .msel-value { color: #ADA6A1; }
.pform .msel.chosen .msel-trigger { border-color: rgba(255, 255, 255, 0.3); background: rgba(16, 14, 14, 0.62); }
.pform .msel.chosen .msel-value { color: #FFFDFB; font-weight: 400; }
.pform .msel-chev { color: #E6DFD8; }
.pform .msel-panel { background: rgba(20, 18, 18, 0.96); border-color: rgba(255, 255, 255, 0.14);
  box-shadow: 0 24px 50px -20px rgba(0, 0, 0, 0.85), 0 0 30px rgba(51, 0, 8, 0.25); }
.pform .msel-panel li { color: #E6DFD8; font-size: 14.5px; }
.pform .msel-panel li:hover, .pform .msel-panel li.active { background: rgba(255, 255, 255, 0.07); color: #FFFDFB; }
.pform .msel-panel li::before { background: #B02F3E; }
.pform .msel-panel li[aria-selected="true"] { color: #FFFDFB; }
/* Zusatzfeld unter "Gemischt": .pf-feld setzt display:flex, das haette das hidden-Attribut ueberstimmt */
.pf-zusatz[hidden] { display: none; }
.pf-zusatz em.pf-hinweis { font-style: normal; }
/* eigene Fehlermeldung statt der orangen Browser-Blase (Nutzer): burgunder Rand, heller Hinweis mit Burgunder-Punkt darunter
   (rote Schrift auf dunklem Grund waere zu schwach oder kippte ins Rosa) */
.pf-fehler input[type="text"], .pf-fehler input[type="email"], .pf-fehler input[type="number"], .pf-fehler textarea {
  border-color: #B02F3E; box-shadow: 0 0 0 3px rgba(176, 47, 62, 0.22); }
.pf-meldung { display: flex; align-items: center; gap: 0.6em; margin-top: 0.1rem; font-size: 12.5px; font-weight: 400; line-height: 1.4;
  letter-spacing: 0.01em; text-transform: none; color: #E6DFD8; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.7); }
.pf-meldung::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: #B02F3E; box-shadow: 0 0 6px rgba(176, 47, 62, 0.7); }
.pf-check.pf-fehler { flex-wrap: wrap; }
.pf-check.pf-fehler input { outline: 2px solid #B02F3E; outline-offset: 2px; }
.pf-check .pf-meldung { flex-basis: 100%; margin-left: calc(18px + 0.85rem); }
.pf-feld--breit.pf-fehler .pf-wahl span { border-color: rgba(176, 47, 62, 0.75); }
/* Pflichtauswahl beim Absenden leer: der Rand wird burgunder, bis gewaehlt ist */
.pform .msel.fehlt .msel-trigger { border-color: #B02F3E; box-shadow: 0 0 0 3px rgba(176, 47, 62, 0.22); }

/* Kacheltitel mit eigener Seite sind Links (Nutzer: bei Bundles liegt auf dem Bild das Karussell, der Weg zur Seite ist der
   Titel, ueberall gleich): gleiche Schrift, beim Hover eine feine Linie darunter */
a.stueck-titel { color: inherit; text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1px;
  text-underline-offset: 0.18em; transition: text-decoration-color 320ms ease; }
a.stueck-titel:hover, a.stueck-titel:focus-visible { text-decoration-color: rgba(176, 47, 62, 0.85); outline: none; }
/* == PRODUKTSEITEN II ENDE == */

/* == TINTE: sichtbarer Abstand Element -> Ueberschrift == */
@media (min-width: 1025px) {
  body.page-coaching .phero { padding-bottom: 37px; }
  body.page-coaching #worum { padding-top: 36px; padding-bottom: 37px; }
  body.page-coaching #angebote { padding-top: 31px; padding-bottom: 37px; }
  body.page-coaching #system { padding-top: 38px; padding-bottom: 37px; }
  body.page-coaching #ablauf { padding-top: 35px; padding-bottom: 37px; }
  body.page-coaching #konkret { padding-top: 34px; padding-bottom: 37px; }
  body.page-coaching #fuer-dich { padding-top: 37px; padding-bottom: 37px; }
  body.page-coaching #klarheit { padding-top: 17px; padding-bottom: 37px; }
  body.page-coaching #anfangen { padding-top: 37px; }
  body.page-optionen .phero { padding-bottom: 32px; }
  body.page-optionen #waehlen { padding-top: 11px; padding-bottom: 37px; }
  body.page-optionen #weiter { padding-top: 36px; padding-bottom: 37px; }
  body.page-optionen #erstgespraech { padding-top: 32px; padding-bottom: 37px; }
  body.page-optionen #anfrage { padding-top: 38px; }
}
@media (min-width: 861px) and (max-width: 1024px) {
  body.page-coaching .phero { padding-bottom: 37px; }
  body.page-coaching #worum { padding-top: 36px; padding-bottom: 37px; }
  body.page-coaching #angebote { padding-top: 31px; padding-bottom: 37px; }
  body.page-coaching #system { padding-top: 38px; padding-bottom: 37px; }
  body.page-coaching #ablauf { padding-top: 35px; padding-bottom: 37px; }
  body.page-coaching #konkret { padding-top: 33px; padding-bottom: 37px; }
  body.page-coaching #fuer-dich { padding-top: 37px; padding-bottom: 37px; }
  body.page-coaching #klarheit { padding-top: 21px; padding-bottom: 37px; }
  body.page-coaching #anfangen { padding-top: 37px; }
  body.page-optionen .phero { padding-bottom: 32px; }
  body.page-optionen #waehlen { padding-top: 9px; padding-bottom: 37px; }
  body.page-optionen #weiter { padding-top: 30px; padding-bottom: 37px; }
  body.page-optionen #erstgespraech { padding-top: 29px; padding-bottom: 37px; }
  body.page-optionen #anfrage { padding-top: 38px; }
}
@media (max-width: 860px) {
  body.page-coaching .phero { padding-bottom: 37px; }
  body.page-coaching #worum { padding-top: 36px; padding-bottom: 37px; }
  body.page-coaching #angebote { padding-top: 32px; padding-bottom: 37px; }
  body.page-coaching #system { padding-top: 38px; padding-bottom: 32px; }
  body.page-coaching #ablauf { padding-top: 6px; padding-bottom: 37px; }
  body.page-coaching #konkret { padding-top: 17px; padding-bottom: 37px; }
  body.page-coaching #fuer-dich { padding-top: 37px; padding-bottom: 37px; }
  body.page-coaching #klarheit { padding-top: 21px; padding-bottom: 37px; }
  body.page-coaching #anfangen { padding-top: 37px; }
  body.page-optionen .phero { padding-bottom: 32px; }
  body.page-optionen #waehlen { padding-top: 6px; padding-bottom: 37px; }
  body.page-optionen #weiter { padding-top: 29px; padding-bottom: 37px; }
  body.page-optionen #erstgespraech { padding-top: 32px; padding-bottom: 37px; }
  body.page-optionen #anfrage { padding-top: 38px; }
}
/* == TINTE ENDE == */



/* == HERO: Kopfzeile -> Ueberschrift == */
@media (min-width: 1025px) {
  body.page-coaching .phero { min-height: 60.90vh !important; padding-top: max(12vh, 170px) !important; }
  body.page-optionen .phero { min-height: 43.00vh !important; padding-top: max(12vh, 170px) !important; }
  body.page-store .phero { min-height: 46.20vh !important; padding-top: max(12vh, 170px) !important; }
}
@media (min-width: 861px) and (max-width: 1024px) {
  body.page-coaching .phero { min-height: 42.75vh !important; padding-top: max(12vh, 170px) !important; }
  body.page-optionen .phero { min-height: 30.50vh !important; padding-top: max(12vh, 170px) !important; }
  body.page-store .phero { min-height: 33.17vh !important; padding-top: max(12vh, 170px) !important; }
}
@media (max-width: 860px) {
  body.page-coaching .phero { min-height: 62.97vh !important; padding-top: max(12vh, 120px) !important; }
  body.page-optionen .phero { min-height: 46.77vh !important; padding-top: max(12vh, 120px) !important; }
  body.page-store .phero { min-height: 43.16vh !important; padding-top: max(12vh, 120px) !important; }
}
/* == HERO ENDE == */

/* == TINTE STORE == */
@media (min-width: 1025px) {
  body.page-store .phero { padding-bottom: 65px; }
  body.page-store #plaene { padding-top: 6px; padding-bottom: 4px; }
  body.page-store #gratis { padding-top: 66px; padding-bottom: 47px; }
  body.page-store #ebooks { padding-top: 24px; padding-bottom: 47px; }
  body.page-store #bundles { padding-top: 24px; }
}
@media (min-width: 861px) and (max-width: 1024px) {
  body.page-store .phero { padding-bottom: 65px; }
  body.page-store #plaene { padding-top: 6px; padding-bottom: 4px; }
  body.page-store #gratis { padding-top: 66px; padding-bottom: 47px; }
  body.page-store #ebooks { padding-top: 24px; padding-bottom: 47px; }
  body.page-store #bundles { padding-top: 24px; }
}
@media (max-width: 860px) {
  body.page-store .phero { padding-bottom: 38px; }
  body.page-store #plaene { padding-top: 33px; padding-bottom: 37px; }
  body.page-store #gratis { padding-top: 33px; padding-bottom: 37px; }
  body.page-store #ebooks { padding-top: 34px; padding-bottom: 37px; }
  body.page-store #bundles { padding-top: 34px; }
}
/* == TINTE STORE ENDE == */

/* ---------------------------------------------------------------- Store: die Platte erst einmal roh sehen
   Kein Nebelblatt, kein Schleier, kein Verlauf — nur das Bild. Zum Abschalten diesen Block entfernen. */
body.page-store #world .pglow,
body.page-store #world .pscrim,
body.page-store #world .pveil { display: none !important; }
/* Nutzer 2026-09-16: Coaching als Referenz verglichen - dort deckt .pscrim/.pveil IMMER die ganze Flaeche ab
   (nur die Deckkraft aendert sich), bei Store lief bisher nur .pscrim und nur ganz am Seitenende (--ende,
   JS-gesteuert). Store hatte sonst KEINE durchgehende Sicherheits-Ebene - an echten Raendern (wo das rohe Foto
   an #worlds Kante endet) blieb nichts Verlaessliches dahinter. .pveil war frei, bekommt jetzt Coachings Technik:
   durchgehende, dezente dunkle Toenung ueber der ganzen Flaeche, nicht an Scrollposition gekoppelt. */
body.page-store.dark #world .pveil { display: block !important; z-index: 3;
  background: linear-gradient(to bottom, rgba(10, 10, 10, 0.4) 0%, rgba(10, 10, 10, 0.24) 30%, rgba(10, 10, 10, 0.32) 62%, rgba(10, 10, 10, 0.44) 100%); }
/* Die Welt legt dasselbe Motiv zweimal uebereinander — vorn und hinten, leicht versetzt. Getrennt werden
   sie sonst vom Nebelblatt; ohne das liest sich das als Doppelbelichtung. Im Rohmodus bleibt eine Platte. */
body.page-store #world .pw--near { display: none !important; }
/* Rohmodus: die Platte so weit aufziehen, dass fast das ganze Motiv im Fenster steht.
   Der Rest ist Reserve fuer die Bewegung — ohne sie liefe die Bildkante ins Bild. */
/* kaum spuerbare Bewegung: 6 % Rand ringsum, darin steigt die Platte ueber die ganze Seite um hoechstens
   20 px und waechst von 1,02 auf 1,05 — genug, dass der Grund lebt, zu wenig, dass man es bemerkt */
body.page-store #world .pw--far { inset: -6% !important; width: 112% !important; height: 112% !important;
  transform: translate3d(0, calc(var(--pf, 0) * 0.35px), 0) scale(calc(1.02 + var(--pz, 0) * 0.14)) !important;
  transform-origin: 50% 50% !important; }
/* Nutzer 2026-09-16: zurueckgenommen - war eine Kompositionsaenderung, keine reine Rendering-Korrektur.
   .pw--far deckt #worlds eigene Box unabhaengig von deren Groesse bereits vollstaendig ab (112% einer 100%-Box
   uebersteigt diese immer, unabhaengig vom Seitenverhaeltnis); die tatsaechliche Korrektur ist jetzt #worlds
   eigene Groesse per JS (site.js), nicht ein staerkerer Crop des vorhandenen Fotos. */

/* ----------------------------------------------------------------- Store auf hellem Grund: dunkle Tinte
   Dieselben Werte wie auf den anderen hellen Seiten (Lede #3A3835, Fliesstext #33302D, Hinweis #6A6663,
   Akzent wine-mid). Die Werte fuer den dunklen Modus oben bleiben unberuehrt. Die Wortmarke im Bild
   bleibt hell — sie liegt auf ihrem eigenen Verlauf, nicht auf dem Seitengrund. */
body:not(.dark) .stueck-n { color: var(--wine-mid); }
body:not(.dark) .stueck-titel { color: #1E1C1B; }
body:not(.dark) .stueck-teile { color: var(--wine-mid); }
body:not(.dark) .stueck-zeile { color: #33302D; }
body:not(.dark) .stueck-fuss { border-top-color: rgba(40, 34, 30, 0.2); }
body:not(.dark) .stueck-preis { color: #1E1C1B; }
body:not(.dark) .stueck-preis .u { color: var(--wine-mid); }
body:not(.dark) .stueck-preis--frei { color: var(--wine-mid); }
body:not(.dark) .mehr { color: #4E4A47; }
body:not(.dark) .stueck:has(:where(.stueck-bild, .stueck-titel, .mehr):hover) .mehr { color: var(--wine-mid); }
@media (hover: none) { body:not(.dark) .stueck:has(:where(.stueck-bild, .stueck-titel, .mehr):hover) .mehr { color: #4E4A47; } }

/* Dunkle Tinte ueber einer rohen Platte mit wechselnden Grauwerten: derselbe helle Halo, den die Kopfzeile
   fuer dunkle Tinte ueber dem Himmel traegt (.ink2 .k). Er haelt die Schrift ueber mittelgrauen Graten
   lesbar, ohne eine Flaeche unter den Text zu legen. Fliesstext eine Stufe dunkler als auf ruhigem Grund. */
body.page-store:not(.dark) .phero .eyebrow, body.page-store:not(.dark) .psec-head .eyebrow,
body.page-store:not(.dark) .phero .head, body.page-store:not(.dark) .psec-head .head,
body.page-store:not(.dark) .phero .lede, body.page-store:not(.dark) .psec-head .lede,
body.page-store:not(.dark) .stueck-n, body.page-store:not(.dark) .stueck-titel,
body.page-store:not(.dark) .stueck-teile, body.page-store:not(.dark) .stueck-zeile,
body.page-store:not(.dark) .stueck-preis, body.page-store:not(.dark) .stueck-preis--frei,
body.page-store:not(.dark) .mehr, body.page-store:not(.dark) .psec > .note {
  text-shadow: 0 0 6px rgba(246, 244, 241, 0.42); }
/* grosse Ueberschriften ganz ohne Schein: bei dieser Schriftgroesse liest sich jeder Halo als Leuchten */
body.page-store:not(.dark) .phero .head, body.page-store:not(.dark) .psec-head .head { text-shadow: none; }
body.page-store:not(.dark) .phero .lede, body.page-store:not(.dark) .psec-head .lede { color: #2A2826; }
body.page-store:not(.dark) .stueck-zeile { color: #2A2826; }
body.page-store:not(.dark) .mehr { color: #3A3633; }
body.page-store:not(.dark) .psec > .note { color: #4A4643; }

/* Kopfband: site.css setzt fuer alle Unterseiten den dunklen Verlauf. Auf dem hellen Store traegt die
   Kopfzeile dunkle Tinte — dahinter gehoert der helle Verlauf, mit dem das Band urspruenglich gebaut war. */
body.page-store:not(.dark) #chrome .ptop {
  background: linear-gradient(to bottom, rgba(246, 244, 241, 0.82) 0%, rgba(246, 244, 241, 0.44) 44%, rgba(246, 244, 241, 0) 100%); }

/* die zwei kleinsten Schriften auf hellem Store-Grund eine Stufe dunkler — sie lagen knapp unter 4,5:1 */
body.page-store:not(.dark) .mehr { color: #2E2A28; }
body.page-store:not(.dark) .psec > .note { color: #3A3633; }
/* Wortmarke im Produktbild: auf Mobil ist sie am kleinsten und liegt oft auf hellen Bildstellen —
   der Verlauf unter ihr wird dort etwas dichter, die Marke selbst ganz deckend */
@media (max-width: 860px) {
  .stueck-marke { color: #FFF8F6; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.7), 0 0 2px rgba(0, 0, 0, 0.5); }
  /* mobil ist der Schriftzug kleiner: der Verlauf folgt --sch, geht aber nie unter 60 % */
  .stueck-schleier { background: linear-gradient(to top, rgb(10 10 10 / calc(0.82 * max(var(--sch, 1), 0.6))) 0%, rgb(10 10 10 / calc(0.5 * max(var(--sch, 1), 0.6))) 28%, rgb(10 10 10 / calc(0.12 * max(var(--sch, 1), 0.6))) 60%, rgb(10 10 10 / calc(0.04 * max(var(--sch, 1), 0.6))) 100%); }
  .stueck-bild:has(.stueck-marke--oben) .stueck-schleier {
    background: linear-gradient(to bottom, rgb(10 10 10 / calc(0.78 * max(var(--sch, 1), 0.6))) 0%, rgb(10 10 10 / calc(0.46 * max(var(--sch, 1), 0.6))) 28%, rgb(10 10 10 / calc(0.1 * max(var(--sch, 1), 0.6))) 60%, rgb(10 10 10 / calc(0.04 * max(var(--sch, 1), 0.6))) 100%); }
}

/* == STORE ATMOSPHAERE ==
   Drei Tiefen, jede mit eigenem Tempo, alle nur vom Scrollen getrieben — keine Schleife, keine Maus.
   Berge (Platte): 14 % Zoom (Motiv Nr. 5 soll spuerbar naeherkommen), 12 px Steigen.
   Nebel hinten: helle Schwaden unter dem Horizont (store-maske-kante: ohne Himmel, ohne die nahen Baeume).
   Ueber dem Wolkenmeer verschwinden sie, sichtbar werden sie erst, wo sie ueber Stein ziehen.
   Nebel vorn: ein weicher Wolkenschatten, der nur ueber das helle Wolkenmeer wandert (store-maske-meer),
   gegenlaeufig und mit anderem Takt.
   Beide Masken sitzen fest auf der Platte — gleiche Box, gleiche Bewegung, gleicher Ausschnitt — und geben
   nur eine Flaeche frei; die Form kommt allein aus der Nebeltextur, die darin wandert. Deshalb zeichnet
   nichts eine Bergkontur nach, und es liegt kein Schleier auf der ganzen Platte. */
body.page-store #world .pfog { display: none !important; }
body.page-store #world::before, body.page-store #world::after { content: ""; position: absolute; pointer-events: none;
  left: -6%; top: -6%; width: 112%; height: 112%;
  transform: translate3d(0, calc(var(--pf, 0) * 0.35px), 0) scale(calc(1.02 + var(--pz, 0) * 0.14));
  transform-origin: 50% 50%; will-change: transform, mask-position;
  -webkit-mask-repeat: repeat-x, no-repeat; mask-repeat: repeat-x, no-repeat;
  -webkit-mask-composite: source-in; mask-composite: intersect;
  --maske-pos: 50% 50%; }
body.page-store #world::before { z-index: 1; background: #F7F5F2; opacity: 1;
  -webkit-mask-image: url("/assets/store-nebel-hinten.webp"), url("/assets/store-maske-kante-v11.webp");
  mask-image: url("/assets/store-nebel-hinten.webp"), url("/assets/store-maske-kante-v11.webp");
  -webkit-mask-size: auto 120%, cover; mask-size: auto 120%, cover;
  -webkit-mask-position: calc(50% + var(--pg, 0) * -5px) calc(50% + var(--pgy, 0) * 1.2px), var(--maske-pos);
  mask-position: calc(50% + var(--pg, 0) * -5px) calc(50% + var(--pgy, 0) * 1.2px), var(--maske-pos); }
body.page-store #world::after { z-index: 2; background: #3A3634; opacity: 0.24;
  -webkit-mask-image: url("/assets/store-nebel-vorn.webp"), url("/assets/store-maske-meer-v11.webp");
  mask-image: url("/assets/store-nebel-vorn.webp"), url("/assets/store-maske-meer-v11.webp");
  -webkit-mask-size: auto 130%, cover; mask-size: auto 130%, cover;
  -webkit-mask-position: calc(50% + var(--pg, 0) * 4px) calc(50% + var(--pgy, 0) * -2.4px), var(--maske-pos);
  mask-position: calc(50% + var(--pg, 0) * 4px) calc(50% + var(--pgy, 0) * -2.4px), var(--maske-pos); }
/* dunkler Store (Platte v12): die hellen Schwaden nur als Hauch — voll deckend legten sie helle Flecken hinter die helle
   Schrift (Abschnittstitel 1,7:1, mit 0.18 gemessen 5,7:1) */
/* 2026-09-11: laut Nutzer "fast gar nicht" sichtbar. Gemessen (gen/nebel-diff.cjs): Schwaden im Mittel 3.9 von 255,
   Schatten 0 — die Kanten-Maske liess Schwaden nur ueber das helle Wolkenmeer, wo helles Weiss nicht sichtbar ist,
   und ueber die ganze Seite wanderten sie nur rund 300 px. Auf der dunklen Platte deshalb:
   zwei helle Schwadenlagen, gegenlaeufig und rund dreimal so weit bewegt, damit man den Nebel beim Scrollen ziehen sieht.
   Nutzer danach: ueber das ganze Bild zu extrem, oben ist Himmel -> nur unter dem Horizont (Kanten- und Meer-Maske, die
   der Platte folgen, auch mobil ueber --maske-pos), Deckkraft etwa halb so stark. */
body.page-store.dark #world::before { opacity: 0.34;
  -webkit-mask-position: calc(50% + var(--pg, 0) * -14px) calc(50% + var(--pgy, 0) * 3px), var(--maske-pos);
  mask-position: calc(50% + var(--pg, 0) * -14px) calc(50% + var(--pgy, 0) * 3px), var(--maske-pos); }
body.page-store.dark #world::after { background: #EDE8E3; opacity: 0.2;
  -webkit-mask-image: url("/assets/store-nebel-vorn.webp"), url("/assets/store-maske-kante-v11.webp");
  mask-image: url("/assets/store-nebel-vorn.webp"), url("/assets/store-maske-kante-v11.webp");
  -webkit-mask-position: calc(50% + var(--pg, 0) * 10px) calc(50% + var(--pgy, 0) * -4px), var(--maske-pos);
  mask-position: calc(50% + var(--pg, 0) * 10px) calc(50% + var(--pgy, 0) * -4px), var(--maske-pos); }
/* dunkler Store: die kleinen Zeilen in --wine-light (#9B2B39) lagen dunkel auf dunkel (gemessen 1,1 bis 2,1:1).
   Ein helleres Burgunder kippt ins Rosa — deshalb warmes, fast weisses Grau; Burgunder bleibt fuer Linien und Akzente */
body.page-store.dark .stueck-n, body.page-store.dark .stueck-teile, body.page-store.dark .stueck-preis .u,
body.page-store.dark .stueck-preis--frei { color: #E6DFD8; }
body.page-store.dark .mehr, body.page-store.dark .stueck:has(:where(.stueck-bild, .stueck-titel, .mehr):hover) .mehr { color: #DDD6CF; }
body.page-store.dark .psec > .note { color: #D2CBC4; }
/* Weg 3 (Platte v13b leicht abgedunkelt): ein weicher dunkler Schatten direkt an den Buchstaben traegt die helle Schrift
   ueber den hellgrauen Wolken — keine Flaeche hinter dem Text, nur die Buchstabenkante */
body.page-store.dark .eyebrow, body.page-store.dark .phero .head, body.page-store.dark .phero .lede,
body.page-store.dark .psec-head .head, body.page-store.dark .psec-head .lede, body.page-store.dark .stueck-n,
body.page-store.dark .stueck-titel, body.page-store.dark .stueck-teile, body.page-store.dark .stueck-zeile,
body.page-store.dark .stueck-preis, body.page-store.dark .mehr, body.page-store.dark .psec > .note {
  /* 2026-09-11: Platte heller (v13c) -> Schatten an den Buchstaben etwas dichter, damit die kleine Schrift ueber
     hellen Wolken lesbar bleibt (vorher 12px .6 / 3px .5) */
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.72), 0 0 4px rgba(0, 0, 0, 0.62); }
/* mobil schneidet die Platte anders zu — die Masken folgen genau diesem Ausschnitt */
@media (max-width: 860px) {
  body.page-store #world::before, body.page-store #world::after { --maske-pos: 38.86% 46%; }
}
@media (prefers-reduced-motion: reduce) {
  body.page-store #world .pw--far, body.page-store #world::before, body.page-store #world::after { transform: none !important; }
}
/* Seitenende (Nutzer 2026-09-11: Schrift ganz unten nicht lesbar; gemessen Hinweis 1,1:1, Claim 1,0:1, Links ab 1,9:1
   ueber den hellen Wolken). Die Platte laeuft auf den letzten 700 px ins Dunkel aus: ueber die ganze Breite, ohne Kante,
   als Teil des Bildes statt als Flaeche hinter dem Text. --ende setzt site.js. Ueber dem Nebel (z-index 1 und 2). */
body.page-store.dark #world .pscrim { display: block !important; z-index: 3;
  background: linear-gradient(to bottom, rgba(10, 10, 10, 0) 0%, rgba(10, 10, 10, 0) 28%, rgba(10, 10, 10, 0.5) 48%,
    rgba(10, 10, 10, 0.82) 66%, rgba(10, 10, 10, 0.9) 100%);
  opacity: var(--ende, 0); }
body.page-store.dark .pfoot a { color: #E6DFD8; }
body.page-store.dark .pfoot .claimline { color: #D2CBC4; }
body.page-store.dark .pfoot a, body.page-store.dark .pfoot .claimline {
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.72), 0 0 4px rgba(0, 0, 0, 0.62); }
/* == STORE ATMOSPHAERE ENDE == */


/* == COACHING ATMOSPHAERE ==
   Derselbe leichte Nebel wie im Store, fuer die dunklen Seiten Coaching und Optionen. Zwei Unterschiede:
   Hier liegen zwei Platten mit eigenem Tempo uebereinander — eine Maske aus dem Bild saesse nie auf beiden —,
   deshalb gibt eine weiche Flaeche den Nebel frei: unten und in der Mitte, wo das Tal schon Nebel traegt.
   Und beide Schichten sind hell und liegen UNTER Scrim und Schleier, damit die helle Schrift ihren dunklen
   Grund behaelt. Die Form kommt wieder allein aus der wandernden Textur. */
body.page-coaching #world .pglow, body.page-coaching #world .pscrim, body.page-coaching #world .pveil,
body.page-optionen #world .pglow, body.page-optionen #world .pscrim, body.page-optionen #world .pveil { z-index: 3; }
body.page-coaching #world::before, body.page-coaching #world::after,
body.page-optionen #world::before, body.page-optionen #world::after { content: ""; position: absolute; pointer-events: none;
  left: -6%; top: -6%; width: 112%; height: 112%; background: #F2F0ED;
  transform: translate3d(0, calc(var(--pf, 0) * 0.6px), 0); will-change: transform, mask-position;
  -webkit-mask-repeat: repeat-x, no-repeat; mask-repeat: repeat-x, no-repeat;
  -webkit-mask-composite: source-in; mask-composite: intersect; }
body.page-coaching #world::before, body.page-optionen #world::before { z-index: 1; opacity: 0.65;
  -webkit-mask-image: url("/assets/store-nebel-hinten.webp"), linear-gradient(to bottom, rgba(0, 0, 0, 0) 28%, rgba(0, 0, 0, 0.6) 52%, #000 72%);
  mask-image: url("/assets/store-nebel-hinten.webp"), linear-gradient(to bottom, rgba(0, 0, 0, 0) 28%, rgba(0, 0, 0, 0.6) 52%, #000 72%);
  -webkit-mask-size: auto 120%, 100% 100%; mask-size: auto 120%, 100% 100%;
  -webkit-mask-position: calc(50% + var(--pg, 0) * -5px) calc(50% + var(--pgy, 0) * 1.2px), 0 0;
  mask-position: calc(50% + var(--pg, 0) * -5px) calc(50% + var(--pgy, 0) * 1.2px), 0 0; }
body.page-coaching #world::after, body.page-optionen #world::after { z-index: 2; opacity: 0.36;
  -webkit-mask-image: url("/assets/store-nebel-vorn.webp"), linear-gradient(to bottom, rgba(0, 0, 0, 0) 40%, #000 78%);
  mask-image: url("/assets/store-nebel-vorn.webp"), linear-gradient(to bottom, rgba(0, 0, 0, 0) 40%, #000 78%);
  -webkit-mask-size: auto 130%, 100% 100%; mask-size: auto 130%, 100% 100%;
  -webkit-mask-position: calc(50% + var(--pg, 0) * 4px) calc(50% + var(--pgy, 0) * -2.4px), 0 0;
  mask-position: calc(50% + var(--pg, 0) * 4px) calc(50% + var(--pgy, 0) * -2.4px), 0 0; }
@media (prefers-reduced-motion: reduce) {
  body.page-coaching #world::before, body.page-coaching #world::after,
  body.page-optionen #world::before, body.page-optionen #world::after { transform: none !important; }
}
/* die zweite, schnellere Platte war dasselbe Bild noch einmal, ueber einen Verlauf halb durchsichtig
   eingeblendet — sie las sich als durchsichtiges "Geistergebirge" im Vordergrund. Die Tiefe tragen jetzt
   die zwei Nebelschichten, wie im Store. */
body.page-coaching #world .pw--near, body.page-optionen #world .pw--near { display: none !important; }
/* ohne die zweite Platte fehlte auf Mobil der dunkle Fels hinter der Schrift (Hero-Lede Optionen 2,42 → 2,16).
   Der vorhandene Scrim wird dort eine Stufe dichter — gemessen auf beiden Seiten besser als vorher
   (Optionen Hero-Lede 2,82, Coaching Hero-Lede 3,83). */
@media (max-width: 860px) {
  body.page-coaching #world .pscrim, body.page-optionen #world .pscrim {
    background: linear-gradient(to bottom, rgba(10, 10, 12, 0.58) 0%, rgba(10, 10, 12, 0.44) 30%, rgba(10, 10, 12, 0.54) 62%, rgba(10, 10, 12, 0.74) 100%); }
  /* Nutzer 2026-09-16 (iPhone-Screenshot Coaching unten): "die ganze untere Haelfte ist hell". Das sind diese
     beiden Nebelschichten - ihre Maske blendet sie erst ab der Bildmitte ein. Auf dem Handy nur noch ein Hauch. */
  /* Nutzer 2026-09-16 (spaeter): "null Nebel am Handy" - wieder sichtbarer, aber unter dem alten Wert (0.65 / 0.36) */
  body.page-coaching #world::before, body.page-optionen #world::before { opacity: 0.9; }
  body.page-coaching #world::after, body.page-optionen #world::after { opacity: 0.4; z-index: 4; }  /* ueber der Abdunkelung, sonst kommt "heller" nicht an */
}
/* == COACHING ATMOSPHAERE ENDE == */

/* == NEUE PLATTEN WISSEN · ERGEBNISSE · TOOLS == erste Uebernahme (2026-09-10)
   Eigene Fassungen der Motive aus Marcs Auswahl: Wissen = heller Himmel mit Nebelband, Ergebnisse = der
   Gipfel, der als Einziges ins Licht ragt, Tools = Schwarz mit dem Gebirge ganz unten. Nur die ferne Platte —
   die zweite, halb durchsichtige Kopie wuerde wieder als Geistergebirge lesen. Auf Mobil sitzt der Ausschnitt
   auf dem Gipfel; die allgemeine Mobilposition (38,86 %) wuerde ihn abschneiden. */
body.page-wissen #world .pw--near, body.page-ergebnisse #world .pw--near, body.page-tools #world .pw--near { display: none !important; }
@media (max-width: 860px) {
  body.page-ergebnisse #world .pw--far { object-position: 74% 50% !important; }
  body.page-wissen #world .pw--far { object-position: 64% 50% !important; }
  body.page-tools #world .pw--far { object-position: 65% 50% !important; }
}
/* == NEUE PLATTEN ENDE == */

/* == TRAININGSPLAN ERSTER DURCHGANG ==
   Nur dieses eine Produkt, damit es direkt neben den anderen verglichen werden kann. Gilt es, reicht es,
   den Selektor auf .stueck zu weiten. */
.stueck .stueck-marke { font-size: 0.58rem; letter-spacing: 0.3em; }

/* == LOCKUP IM BILD == erster Versuch, nur am Trainingsplan
   Drei Ebenen wie ein Cover, als ein Satz gelesen: klein gesperrt oben, ein grosses duennes Wort, klein unter dessen
   Ende. Echte Schrift in Lexend Giga — breit, duenn, geometrisch wie Marcs Vorlage; nur auf der Store-Seite geladen.
   In der ruhigen dunklen Zone unten links. Die Groesse haengt an der Kachelbreite, damit das Wort auf jeder Breite
   dasselbe Verhaeltnis zum Bild hat. Ersetzt dort Wortmarke und Nummer. */
.stueck-bild:has(.stueck-lockup) { container-type: inline-size; }
.stueck-lockup { position: absolute; left: 1.35rem; bottom: 1.05rem; margin: 0; display: grid; width: max-content;
  max-width: calc(100% - 2.7rem); color: #FFF8F6; pointer-events: none; text-shadow: 0 1px 14px rgba(0, 0, 0, 0.45);
  font-family: "Lexend Giga", var(--display); }
.stueck-lockup .lk-oben, .stueck-lockup .lk-rechts { font-size: max(8px, 2.1cqi); letter-spacing: 0.26em;
  text-transform: uppercase; font-weight: 300; line-height: 1.2; opacity: 0.88; }
.stueck-lockup .lk-oben { margin: 0 0 0.6em 0.08em; }
.stueck-lockup .lk-wort { font-size: 8.7cqi; font-weight: 200; line-height: 0.95; letter-spacing: 0.02em;
  text-transform: uppercase; margin-left: -0.03em; }
.stueck-lockup .lk-rechts { justify-self: end; margin: 0.95em -0.26em 0 0; }
/* die Nummer steht jetzt im Bild ("Plan 01"); unter dem Bild haelt sie nur ihren Platz, damit die Titel der Reihe
   auf einer Linie bleiben, solange nur ein Stueck den Lockup traegt */
.stueck:has(.stueck-lockup) .stueck-n { visibility: hidden; }
/* Wassereinlagerungen ("Schwankungen mit · LOGIK · statt Sorge"): die untere Zeile linksbuendig unter dem Wortanfang,
   nicht rechtsbuendig unter dem Wortende — so auf Wunsch des Nutzers, ein Ueberlappen mit dem Glas ist in Ordnung */
[data-bild="frei-wasser"] .stueck-lockup .lk-rechts { justify-self: start; margin: 0.95em 0 0 0.08em; }
/* Bundles (zweistufig): Wortgroesse wie in den Plan-Kacheln (~28 px), sonst waeren die Woerter in den breiten Bundle-Kacheln
   fast doppelt so gross. Nur der eigene Lockup (> ), nicht die geklonten E-Book-Karten im Karussell */
.regal--bunde .stueck-bild > .stueck-lockup .lk-wort { font-size: 5.6cqi; }
.regal--bunde .stueck-bild > .stueck-lockup .lk-oben { font-size: max(8px, 1.45cqi); }
.regal--bunde .stueck--gross .stueck-bild > .stueck-lockup .lk-wort { font-size: 2.9cqi; }
.regal--bunde .stueck--gross .stueck-bild > .stueck-lockup .lk-oben { font-size: max(8px, 0.78cqi); }
@media (max-width: 860px) {
  .regal--bunde .stueck--gross .stueck-bild > .stueck-lockup .lk-wort { font-size: 8.7cqi; }
  .regal--bunde .stueck--gross .stueck-bild > .stueck-lockup .lk-oben { font-size: max(8px, 2.1cqi); }
  .regal--bunde .stueck-bild > .stueck-lockup .lk-wort { font-size: 8.7cqi; }
  .regal--bunde .stueck-bild > .stueck-lockup .lk-oben { font-size: max(8px, 2.1cqi); }
}
/* sehr kleine Kacheln (zweispaltige Gratis-Reihe auf dem Handy, rund 130 px breit): nur das grosse Wort. Die kleinen
   Zeilen halten 8 px Mindestgroesse und lagen dort ueber Glas und Haenden. */
@container (max-width: 200px) {
  .stueck-lockup .lk-oben, .stueck-lockup .lk-rechts { display: none; }
  .stueck-lockup { left: 0.8rem; bottom: 0.7rem; }
}
/* == LOCKUP IM BILD ENDE == */
.stueck .stueck-satz { padding-top: 1.35rem; }
.stueck .stueck-n { display: flex; align-items: center; margin-bottom: 0.7rem;
  font-size: 0.62rem; letter-spacing: 0.34em; }
.stueck .stueck-n::after { content: ""; width: 22px; height: 1px; margin-left: 0.85em;
  background: var(--wine-light); }
.stueck .stueck-titel { font-size: clamp(24px, 1.95vw, 34px); line-height: 1.02; letter-spacing: -0.005em; }
/* 34ch brach "Muskelaufbau" in drei Zeilen; breiter, damit alle Kacheln bei zwei Zeilen und gleichem Abstand zur
   Abschlusslinie bleiben, ohne den Text zu kuerzen */
/* mindestens zwei Zeilen Hoehe: ein Satz, der in eine Zeile passt (Training Bundle), setzte seine Trennlinie sonst
   hoeher als die Nachbarn in derselben Reihe */
.stueck .stueck-zeile { margin-top: 0.8rem; max-width: 42ch; line-height: 1.6; min-height: 3.2em; }
.stueck .stueck-fuss { margin-top: 1.35rem; padding-top: 1rem; }
.stueck .stueck-preis { --figsize: clamp(20px, 1.4vw, 25px); }
@media (max-width: 860px) {
  .stueck .stueck-titel { font-size: 22px; }
  .stueck .stueck-zeile { font-size: 13px; }
  .stueck .stueck-satz { padding-top: 1rem; }
  .stueck .stueck-fuss { margin-top: 1rem; padding-top: 0.8rem; }
}
/* == TRAININGSPLAN ERSTER DURCHGANG ENDE == */

/* == TONKURVE HINTER DER SCHRIFT ==
   Die Platte bleibt unangetastet. Nur hinter jedem Textblock liegt eine Tonkurve, die Helles stehen laesst und
   Dunkles anhebt: contrast(0.36) brightness(1.47) bildet Weiss auf Weiss ab, Nebel bei 230 auf etwa 242,
   dunklen Fels bei 26 auf etwa 133. Ueber Nebel aendert sich also fast nichts — dort sieht man sie nicht —,
   ueber Fels wird der Grund genau unter den Woertern weich. Der Rand laeuft weich aus, es gibt keine Form. */
/* Entscheidung: nur auf Mobil. Auf Desktop traegt die dunkle Tinte allein, das Bild bleibt ohne Spuren. */
@media (max-width: 860px) {
body.page-store:not(.dark) .psec-head,
body.page-store:not(.dark) .phero .lede,
body.page-store:not(.dark) .phero .head,
body.page-store:not(.dark) .phero .eyebrow,
body.page-store:not(.dark) .stueck-satz,
body.page-store:not(.dark) .psec > .note { position: relative; isolation: isolate; }
body.page-store:not(.dark) .psec-head::before,
body.page-store:not(.dark) .phero .lede::before,
body.page-store:not(.dark) .phero .head::before,
body.page-store:not(.dark) .phero .eyebrow::before,
body.page-store:not(.dark) .stueck-satz::before,
body.page-store:not(.dark) .psec > .note::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset: -3.2rem -2.6rem -3.2rem -2.6rem;
  -webkit-backdrop-filter: contrast(0.42) brightness(1.4);
  backdrop-filter: contrast(0.42) brightness(1.4);
  /* kein Plateau: die Wirkung nimmt von der Mitte an stetig ab, so gibt es keinen Rand, der ueber den Fels laeuft */
  -webkit-mask-image: radial-gradient(farthest-side, #000 0%, rgba(0, 0, 0, 0.85) 30%, rgba(0, 0, 0, 0.45) 62%, rgba(0, 0, 0, 0.14) 84%, rgba(0, 0, 0, 0) 100%);
  mask-image: radial-gradient(farthest-side, #000 0%, rgba(0, 0, 0, 0.85) 30%, rgba(0, 0, 0, 0.45) 62%, rgba(0, 0, 0, 0.14) 84%, rgba(0, 0, 0, 0) 100%); }
body.page-store:not(.dark) .stueck-satz::before { inset: 0.2rem -2.2rem -2.8rem -2.2rem; }
}
/* == TONKURVE HINTER DER SCHRIFT ENDE == */

/* == DUNKELSTE TINTE STORE ==
   Unsichtbarste Massnahme ueberhaupt: die Schrift selbst auf die dunkelsten Werte des Markensystems.
   Eyebrows und Nummern von wine-mid (#6A121D) auf wine (#330008) — gleiche Farbfamilie, fast doppelter
   Kontrast. Fliesstext, Preis und Weg auf #1E1C1B. */
body.page-store:not(.dark) .phero .eyebrow,
body.page-store:not(.dark) .psec-head .eyebrow,
body.page-store:not(.dark) .stueck-n,
body.page-store:not(.dark) .stueck-teile,
body.page-store:not(.dark) .stueck-preis .u,
body.page-store:not(.dark) .stueck-preis--frei { color: var(--wine); }
body.page-store:not(.dark) .phero .lede,
body.page-store:not(.dark) .psec-head .lede,
body.page-store:not(.dark) .stueck-zeile,
body.page-store:not(.dark) .mehr,
body.page-store:not(.dark) .psec > .note { color: #1E1C1B; }
body.page-store:not(.dark) .stueck:has(:where(.stueck-bild, .stueck-titel, .mehr):hover) .mehr { color: var(--wine); }
@media (hover: none) { body.page-store:not(.dark) .stueck:has(:where(.stueck-bild, .stueck-titel, .mehr):hover) .mehr { color: #1E1C1B; } }
/* Trainingsplan mobil: Wortmarke bleibt einzeilig — Sperrung enger */
@media (max-width: 860px) {
  .regal--plaene .stueck-marke, .regal--bunde .stueck-marke { white-space: nowrap; letter-spacing: 0.2em; font-size: 0.5rem; }
}
/* == DUNKELSTE TINTE STORE ENDE == */

/* Uebertragung auf alle Produkte: die schmalen zweispaltigen Regale auf Mobil behalten ihre kleineren Groessen,
   sonst bricht z. B. "Body Recomposition" auf 150 px Breite in zwei Zeilen */
@media (max-width: 860px) {
  .regal--ebooks .stueck .stueck-titel, .regal--gratis .stueck .stueck-titel { font-size: 16px; }
  .regal--ebooks .stueck .stueck-zeile { font-size: 12px; }
  .regal--ebooks .stueck .stueck-n, .regal--gratis .stueck .stueck-n { margin-bottom: 0.45rem; }
  .regal--ebooks .stueck .stueck-n::after, .regal--gratis .stueck .stueck-n::after { width: 14px; }
}

/* == KNOPF AUF HELLEM GRUND ==
   Auf hellen Seiten ist die dunkle Tintenebene (.k) sichtbar. Ihr Leuchten war fuer dunklen Grund gebaut:
   vier Schatten bis 58 px in fast deckendem Dunkelburgunder und beim Hover eine Schattenwolke in rgba(51,0,8).
   Auf Hell kann dunkles Rot nicht leuchten, es faerbt nur. Hier: zwei enge Schatten, das hellere Burgunder der
   dunklen Seiten fuer das Wanderlicht, und beim Hover eine feine Lichtkante am Ring statt einer Wolke. */
#coach .k .coach-btn { --light-color: #A62335; }
#coach .k .coach-halo { filter: drop-shadow(0 0 2px rgba(166, 35, 53, 0.85)) drop-shadow(0 0 6px rgba(166, 35, 53, 0.35)); }
#coach:hover .k .coach-btn { box-shadow: 0 0 0 1px rgba(166, 35, 53, 0.22), 0 0 10px rgba(166, 35, 53, 0.12); }
/* == KNOPF AUF HELLEM GRUND ENDE == */

/* == SCHMALE DECKEL MOBIL ==
   Nach der Uebertragung auf alle Produkte war der Preis auch in den zweispaltigen Regalen gross — das € brach
   unter die Zahl, "Mehr erfahren" in zwei Zeilen, und eine Spalte drueckte sich ueber den Rand. */
@media (max-width: 860px) {
  .regal--ebooks, .regal--gratis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .regal--ebooks .stueck, .regal--gratis .stueck { min-width: 0; }
  .regal--ebooks .stueck .stueck-preis, .regal--gratis .stueck .stueck-preis { --figsize: 15px; flex-wrap: nowrap; }
  /* Preis und Weg untereinander, jeder einzeilig — statt beide halb umzubrechen */
  .regal--ebooks .stueck .stueck-fuss, .regal--gratis .stueck .stueck-fuss {
    flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 0.45rem; }
  .regal--ebooks .stueck .mehr, .regal--gratis .stueck .mehr { white-space: nowrap; font-size: 0.5rem; letter-spacing: 0.16em; }
  .regal--ebooks .stueck .mehr::after, .regal--gratis .stueck .mehr::after { width: 12px; }
}
/* == SCHMALE DECKEL MOBIL ENDE == */

/* == UEBER MICH v2 (Nutzer 2026-09-14: "links oben viel zu viel Freiraum", "nur ein Blog", Zielsatz nicht als Ueberschrift) ==
   Hero als zwei Spalten mittig statt Text am unteren Rand; Foto im Low-Key-Grade laeuft ohne Rahmen in die Seite aus.
   Danach wechseln zweispaltige Abschnitte mit einer grossen Leitsatz-Zeile und einer vierspaltigen Themenreihe. */
body.page-ueber #world .pw--near { display: none !important; }
body.page-ueber .ue-hero { position: relative; min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 4vw; align-items: center; padding: 15vh var(--safe) 6vh; box-sizing: border-box; }
body.page-ueber .ue-hero h1.head { max-width: 15ch; }
body.page-ueber .ue-hero p.lede { max-width: 40ch; }
body.page-ueber .ue-zahlen { list-style: none; margin: 3.2rem 0 0; padding: 1.7rem 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem; max-width: 38rem; border-top: 1px solid rgba(255, 255, 255, 0.16); }
body.page-ueber .ue-zahlen b { display: block; font-weight: 200; font-size: clamp(36px, 3.4vw, 60px); line-height: 1; color: #F6F3F0; letter-spacing: -0.01em; }
body.page-ueber .ue-zahlen span { display: block; margin-top: 0.8rem; font-size: 0.6rem; letter-spacing: 0.2em; line-height: 1.6; text-transform: uppercase; color: #CFC8C2; font-weight: 500; }
body.page-ueber .ue-bild { margin: 0; justify-self: end; width: min(100%, 33rem); }
body.page-ueber .ue-bild img { display: block; width: 100%; height: auto; max-height: 84vh; object-fit: cover; object-position: 50% 12%;
  /* coach-v4 (Nutzer 2026-09-14: "man erkennt die Person nicht gut"): freigestellt per recraft remove-background, helles Schwarzweiss.
     Nur unten und an den angeschnittenen Armen weich auslaufend; der Schatten trennt die Person vom Hintergrund. */
  -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent 97%), linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom, #000 70%, transparent 97%), linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
  mask-composite: intersect; filter: drop-shadow(0 26px 48px rgba(0, 0, 0, 0.5)); }

body.page-ueber .ue-zwei { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: 5vw; align-items: start; }
body.page-ueber .ue-zwei > .psec-head { position: sticky; top: 16vh; }
body.page-ueber .ue-spalte .body { max-width: 62ch; }
body.page-ueber .ue-spalte .body + .body { margin-top: 1.2rem; }
body.page-ueber #weg .ue-erster { font-size: clamp(18px, 1.4vw, 25px); line-height: 1.5; font-weight: 300; color: #F2EEEA; }
body.page-ueber #weg .note { margin-top: 2rem; }

body.page-ueber #leitsatz { text-align: center; padding-top: 15vh; padding-bottom: 15vh; }
body.page-ueber .ue-satz { margin: 1.6rem auto 0; font-weight: 200; font-size: clamp(46px, 7.4vw, 136px); line-height: 0.98; letter-spacing: -0.015em; color: #F6F3F0; }
body.page-ueber #leitsatz .body { margin: 2.6rem auto 0; max-width: 58ch; }

body.page-ueber .ue-prinzipien { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem 3.4vw; }
body.page-ueber .ue-prinzipien li { padding-top: 1.4rem; border-top: 1px solid rgba(255, 255, 255, 0.18); }
body.page-ueber .ue-prinzipien .n { display: block; font-size: 0.62rem; letter-spacing: 0.26em; color: #B02F3E; font-weight: 600; }
body.page-ueber .ue-prinzipien h3 { margin: 0.9rem 0 0; font-weight: 300; font-size: clamp(20px, 1.6vw, 29px); line-height: 1.15; color: #F4F1EE; }
body.page-ueber .ue-prinzipien p { margin: 0.75rem 0 0; font-weight: 300; font-size: clamp(13.5px, 0.95vw, 16px); line-height: 1.6; color: #CFCAC5; max-width: 40ch; }

body.page-ueber .ue-themen { list-style: none; margin: 3rem 0 0; padding: 2.2rem 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 3vw; border-top: 1px solid rgba(255, 255, 255, 0.18); }
body.page-ueber .ue-themen b { display: block; font-weight: 200; font-size: clamp(24px, 2.2vw, 40px); line-height: 1.05; color: #F4F1EE; }
body.page-ueber .ue-themen span { display: block; margin-top: 0.9rem; font-weight: 300; font-size: clamp(13.5px, 0.95vw, 16px); line-height: 1.6; color: #CFCAC5; }

body.page-ueber .ue-ziel { margin: 2.4rem 0; padding: 0.3rem 0 0.3rem 1.6rem; border-left: 1px solid #B02F3E; font-weight: 200;
  font-size: clamp(24px, 2.1vw, 38px); line-height: 1.22; color: #F6F3F0; max-width: 26ch; }

@media (max-width: 860px) {
  body.page-ueber .ue-hero { grid-template-columns: minmax(0, 1fr); min-height: 0; gap: 0; padding-top: 11vh; padding-bottom: 2vh; }
  body.page-ueber .ue-bild { order: -1; justify-self: center; width: 100%; max-width: 26rem; }
  body.page-ueber .ue-bild img { max-height: 60vh; }
  body.page-ueber .ue-text { position: relative; margin-top: -9vh; }
  body.page-ueber .ue-zahlen { margin-top: 2.2rem; padding-top: 1.3rem; gap: 1rem; }
  body.page-ueber .ue-zahlen b { font-size: 34px; }
  body.page-ueber .ue-zahlen span { font-size: 9px; letter-spacing: 0.14em; }
  body.page-ueber .ue-zwei { grid-template-columns: minmax(0, 1fr); gap: 1.8rem; }
  body.page-ueber .ue-zwei > .psec-head { position: static; }
  body.page-ueber .ue-prinzipien { grid-template-columns: minmax(0, 1fr); gap: 1.8rem; }
  body.page-ueber .ue-themen { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1.4rem; }
  body.page-ueber .ue-satz { font-size: clamp(40px, 12vw, 64px); }
  body.page-ueber #leitsatz { padding-top: 9vh; padding-bottom: 9vh; }
  body.page-ueber .ue-ziel { font-size: 24px; }
}

/* == RECHNER auf /tools/ (Nutzer 2026-09-14: ein Rechner, Situation eingeben, der Rest rechnet sich) == */
.rechner { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 2.4vw; margin-top: 3rem; align-items: start; }
.rechner [hidden] { display: none !important; }
.rechner-eingabe, .rechner-ergebnis { border-radius: 18px; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(14, 13, 13, 0.6);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); padding: clamp(1.4rem, 2.2vw, 2.4rem); box-sizing: border-box; }
.rechner-eingabe { max-width: none; display: grid; gap: 1.6rem; }
.rechner-eingabe .pf-raster { gap: 1.4rem 1.6rem; }
.rechner-ergebnis { position: sticky; top: 13vh; }
.rechner .pf-feld > .r-mit, .rechner .pf-feld > .r-paar { font-size: inherit; letter-spacing: normal; text-transform: none; font-weight: inherit; color: inherit; }
.rechner .r-mit { position: relative; display: flex; align-items: center; }
.rechner .r-mit input { width: 100%; box-sizing: border-box; padding-right: 3.4em; }
.rechner .r-mit em { position: absolute; right: 1em; font-style: normal; font-size: 12px; letter-spacing: 0.08em; color: #ADA6A1; pointer-events: none; }
.rechner .r-paar { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; }
.rechner input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.rechner input[type="number"]::-webkit-inner-spin-button, .rechner input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.rechner .pf-hinweis { margin-top: 0.4rem; }
.rechner .r-tage span { min-width: 2.9em; text-align: center; box-sizing: border-box; }
.re-leer { margin: 0; font-weight: 300; font-size: clamp(15px, 1.1vw, 19px); line-height: 1.55; color: #CFCAC5; }
.re-titel { margin: 1.9rem 0 0; font-size: 0.6rem; letter-spacing: 0.26em; text-transform: uppercase; color: #E6DFD8; font-weight: 500; }
.re-voll > .re-titel:first-child { margin-top: 0; }
.re-gross { margin: 0.7rem 0 0; display: flex; align-items: baseline; gap: 0.9rem; flex-wrap: wrap; }
.re-gross span { font-weight: 200; font-size: clamp(56px, 5.4vw, 96px); line-height: 0.95; color: #F6F3F0; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.re-gross small { font-size: 0.64rem; letter-spacing: 0.24em; text-transform: uppercase; color: #CFC8C2; }
.re-satz { margin: 1rem 0 0; font-weight: 300; font-size: clamp(13.5px, 0.95vw, 16px); line-height: 1.6; color: #CFCAC5; max-width: 48ch; }
.re-zeile { margin: 1.8rem 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; padding: 1.2rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.14); border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
.re-zeile div { min-width: 0; }
.re-zeile dt { font-size: 0.56rem; letter-spacing: 0.2em; text-transform: uppercase; color: #ADA6A1; font-weight: 500; }
.re-zeile dd { margin: 0.5rem 0 0; font-weight: 300; font-size: clamp(16px, 1.25vw, 22px); color: #F2EEEA; font-variant-numeric: tabular-nums; white-space: nowrap; }
.re-balken { display: flex; gap: 3px; height: 6px; margin: 1rem 0 0; }
.re-balken i { display: block; height: 100%; border-radius: 99px; transition: flex-basis 500ms ease; min-width: 0; }
.re-balken i:nth-child(1) { background: #B02F3E; }
.re-balken i:nth-child(2) { background: #6E1F2A; }
.re-balken i:nth-child(3) { background: #D9D4CF; }
.re-makros { list-style: none; margin: 1.1rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.re-makros li { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
.re-makros b { font-weight: 300; font-size: clamp(22px, 1.8vw, 32px); line-height: 1; color: #F4F1EE; font-variant-numeric: tabular-nums; }
.re-makros span { display: flex; align-items: center; gap: 0.5rem; font-size: 0.58rem; letter-spacing: 0.18em; text-transform: uppercase; color: #CFC8C2; font-weight: 500; }
.re-makros span::before { content: ""; flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.re-makros em { font-style: normal; font-size: 12px; color: #ADA6A1; }
.re-chart { display: block; width: 100%; height: auto; margin-top: 0.8rem; overflow: visible; }
.re-chart text { font-family: inherit; font-size: 9px; fill: #ADA6A1; letter-spacing: 0.04em; }
.re-chart .rc-wert { fill: #F2EEEA; font-size: 10px; }
.re-chart .rc-ziel { fill: #CFC8C2; }
.re-hinweis { margin: 1rem 0 0; font-size: 12.5px; line-height: 1.55; color: #ADA6A1; font-weight: 300; }
.re-weg { margin-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, 0.14); padding-top: 1rem; }
.re-weg summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center;
  font-size: 0.6rem; letter-spacing: 0.24em; text-transform: uppercase; color: #E6DFD8; font-weight: 500; }
.re-weg summary::-webkit-details-marker { display: none; }
.re-weg summary::after { content: "+"; font-size: 17px; letter-spacing: 0; color: #B02F3E; line-height: 1; }
.re-weg[open] summary::after { content: "\2212"; }
.re-weg ol { margin: 1rem 0 0; padding: 0 0 0 1.1rem; display: grid; gap: 0.55rem; }
.re-weg li { font-size: 13px; line-height: 1.55; color: #CFCAC5; font-variant-numeric: tabular-nums; }
.re-weg li b { font-weight: 500; color: #F2EEEA; }
@media (max-width: 860px) {
  .rechner { grid-template-columns: minmax(0, 1fr); gap: 1.2rem; }
  .rechner-ergebnis { position: static; }
  .re-gross span { font-size: 60px; }
  .re-zeile { gap: 0.6rem; }
  .re-zeile dd { font-size: 15px; }
  .re-zeile dt { font-size: 8.5px; letter-spacing: 0.14em; }
  .re-makros b { font-size: 22px; }
}

/* Rechner Handy Feinschliff (2026-09-14): Karten fast randlos, Kennzahlen als Zeilen, Makros als Zeilen mit Wert rechts */
@media (max-width: 860px) {
  .rechner { margin-left: calc(16px - var(--safe)); margin-right: calc(16px - var(--safe)); }
  .re-zeile { grid-template-columns: minmax(0, 1fr); gap: 0.6rem; }
  .re-zeile div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
  .re-zeile dd { margin: 0; font-size: 16px; }
  .re-zeile dt { font-size: 9.5px; letter-spacing: 0.18em; }
  .re-makros { grid-template-columns: minmax(0, 1fr); gap: 0.75rem; }
  .re-makros li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: baseline; column-gap: 0.7rem; }
  .re-makros span { grid-column: 1; grid-row: 1; }
  .re-makros em { grid-column: 2; grid-row: 1; }
  .re-makros b { grid-column: 3; grid-row: 1; font-size: 22px; text-align: right; }
}

/* Ausbildung unter "Mein Weg" (Nutzer 2026-09-14: Zertifikate der Flexyfit Sports Academy), ruhig, ohne Noten und Logos */
body.page-ueber .ue-diplome { margin-top: 2.6rem; padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, 0.16); max-width: 62ch; }
body.page-ueber .ue-diplome-titel { margin: 0; font-size: 0.6rem; letter-spacing: 0.26em; text-transform: uppercase; color: #B02F3E; font-weight: 600; }
body.page-ueber .ue-diplome ul { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 0.5rem; }
body.page-ueber .ue-diplome li { font-weight: 300; font-size: clamp(15px, 1.12vw, 19px); line-height: 1.35; color: #F2EEEA; }
body.page-ueber .ue-diplome-quelle { margin: 1rem 0 0; font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; color: #ADA6A1; font-weight: 500; }

/* Neue dunkle Platten 2026-09-14 (Nutzer): Ergebnisse = beleuchteter Gipfel dunkel, Starten = Laeufer auf der Strasse zum Berg, FAQ = Nebelwald am Hang.
   Die halbtransparente Nahebene erzeugt Doppelbilder, daher wie auf Store, Coaching und Tools ausgeblendet. */
body.page-faq #world .pw--near, body.page-starten #world .pw--near { display: none !important; }

/* Nutzer 2026-09-14 zu Ueber mich: "fast etwas zu dunkel". Schleier etwas leichter, dafuer ein weicher Schatten unter der Schrift
   (wie die freigegebene Store-Ausnahme); ganz leichter Schleier machte kleine Schrift ueber dem Nebel unleserlich. */
body.page-ueber #world .pscrim { opacity: 0.74; }
body.page-ueber #world .pveil { opacity: 0.78; }
body.page-ueber main :is(h1, h2, h3, p, li, b, span, a) { text-shadow: 0 1px 18px rgba(0, 0, 0, 0.55), 0 0 3px rgba(0, 0, 0, 0.3); }
body.page-ueber main .body { color: #E4DFDA; }

/* Formular-Karte auf der dunklen Starten-Seite (seit 2026-09-14 dunkel): dunkles Glas statt heller Kasten, helle Beschriftung */
body:is(.page-starten, .page-recht).dark .karte-form { background: rgba(14, 13, 13, 0.36); -webkit-backdrop-filter: blur(18px) saturate(1.05); backdrop-filter: blur(18px) saturate(1.05); border-color: rgba(255, 255, 255, 0.14); color: #F2EEEA;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 34px 66px -32px rgba(0, 0, 0, 0.7); }
body:is(.page-starten, .page-recht).dark .karte-form .ident { color: #ADA6A1; }
body:is(.page-starten, .page-recht).dark .karte-form label, body:is(.page-starten, .page-recht).dark .karte-form .lbl { color: #E6DFD8; }
body:is(.page-starten, .page-recht).dark .karte-form input, body:is(.page-starten, .page-recht).dark .karte-form select, body:is(.page-starten, .page-recht).dark .karte-form textarea { color: #F4F1EE; border-bottom-color: rgba(255, 255, 255, 0.26); }
body:is(.page-starten, .page-recht).dark .karte-form input::placeholder, body:is(.page-starten, .page-recht).dark .karte-form textarea::placeholder { color: #8F8883; }
body:is(.page-starten, .page-recht).dark .karte-form input:focus, body:is(.page-starten, .page-recht).dark .karte-form textarea:focus { border-bottom-color: #B02F3E; }
body:is(.page-starten, .page-recht).dark .karte-form button[type="submit"], body:is(.page-starten, .page-recht).dark .karte-form [data-form-state] { color: #F2EEEA; }
body:is(.page-starten, .page-recht).dark .karte-form button[type="submit"]::after { background: #B02F3E; }
body:is(.page-starten, .page-recht).dark .karte-form .note { color: #ADA6A1; }
body:is(.page-starten, .page-recht).dark .karte-form .note a { color: #F2EEEA; }
body:is(.page-starten, .page-recht).dark .karte-form .msel-trigger { color: #F4F1EE; border-color: rgba(255, 255, 255, 0.26); background: transparent; }
body:is(.page-starten, .page-recht).dark .karte-form .msel.open .msel-trigger, body:is(.page-starten, .page-recht).dark .karte-form .msel.chosen .msel-trigger { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.36); }
body:is(.page-starten, .page-recht).dark .karte-form .msel:not(.chosen) .msel-value { color: #8F8883; }
body:is(.page-starten, .page-recht).dark .karte-form .msel.chosen .msel-value { color: #F4F1EE; }
body:is(.page-starten, .page-recht).dark .karte-form .msel-panel { background: rgba(20, 18, 18, 0.96); border-color: rgba(255, 255, 255, 0.14); }
body:is(.page-starten, .page-recht).dark .karte-form .msel-panel li { color: #E6DFD8; }
body:is(.page-starten, .page-recht).dark .karte-form .msel-panel li:hover, body:is(.page-starten, .page-recht).dark .karte-form .msel-panel li.active { background: rgba(255, 255, 255, 0.07); color: #FFFDFB; }
body:is(.page-starten, .page-recht).dark .karte-form .msel-panel li[aria-selected="true"] { color: #FFFDFB; }
body:is(.page-starten, .page-recht).dark .karte-form .msel-group { color: #B02F3E; }

/* Kleine Beschriftungen ueber dem Nebel (Ueber mich) und Hinweis unter der Starten-Karte: heller bzw. kraeftigerer Schatten */
body.page-ueber .ue-diplome-titel { color: #E6DFD8; }
body.page-ueber main :is(.eyebrow, .n, .note, .ue-zahlen span, .ue-diplome-quelle) { text-shadow: 0 0 10px rgba(0, 0, 0, 0.75), 0 1px 3px rgba(0, 0, 0, 0.5); }
body.page-starten.dark .kicker, body.page-starten.dark .psec .note { color: #CFC8C2; }

/* Tools Handy: Ausschnitt nach links auf den dunklen Hang, sonst liegt der helle Nebel hinter Titel und Einleitung (gemessen 3:1, jetzt 7:1) */
/* (Tools ist seit 2026-09-14 hell mit neuem Motiv; die Verschiebung auf den dunklen Hang entfaellt) */

/* Hellere Unterseiten wie im Store (Nutzer 2026-09-14: "fast zu duester"): hellere Platten, leichterer Schleier,
   Lesbarkeit ueber einen weichen Schatten unter der Schrift ausserhalb von Karten, Formular und Rechner */
/* gemessen: Schleier links voll lassen (Text steht links), nur den Verlauf von oben nach unten leichter; 0.5/0.55 fiel auf 2.2 bis 3:1 */
body:is(.page-tools, .page-faq, .page-starten, .page-recht) #world .pscrim { opacity: 0.62; }
body:is(.page-tools, .page-faq, .page-starten, .page-recht) main :is(.phero, .psec-head, .steps, .facts, .kicker, .psec > .note) :is(h1, h2, h3, p, li, b, span, a) {
  text-shadow: 0 1px 18px rgba(0, 0, 0, 0.55), 0 0 3px rgba(0, 0, 0, 0.32); }

/* Handy: heller Dunst hinter der Schrift (gemessen). Anfrage: voller Schleier und das Bild eine Spur tiefer, Ergebnisse: dichterer Schleier */
@media (max-width: 860px) {
  body.page-starten #world .pscrim { opacity: 1; }
  body.page-starten #world .pw--far { filter: brightness(0.86); }
}

/* Anfrage: ganze Strasse sichtbar (Nutzer 2026-09-14: "lieber weniger von oben"). Das Bild sitzt unten am Fenster statt mittig;
   5 % Reserve unten, weil die Platte beim Scrollen um bis zu 34 px steigt, und die Vergroesserung waechst von unten. */
/* Nutzer 2026-09-14: unten die ganze Strasse UND oben der Gipfel. Kaum Ueberstand (2 % oben, 5 % unten fuer das Steigen um 34 px),
   nur 3 % seitlich, damit breite Fenster weniger von oben abschneiden; das Hineinzoomen ist hier klein. */
body.page-starten #world .pw--far { top: -2%; bottom: auto; height: 107%; left: -3%; right: auto; width: 106%; object-position: 50% 100%; transform-origin: 50% 96%;
  transform: translate3d(0, calc(var(--pf, 0) * 1px), 0) scale(calc(1.01 + var(--pz, 0) * 0.04)); }

/* Anfrage: Karte schmaler und nach rechts (Nutzer 2026-09-14), damit Laeufer und Strasse in der Mitte frei zu sehen sind */
@media (min-width: 861px) {
  /* Spalten an der Bildmitte ausgerichtet: Text endet 4rem vor der Mitte, die Karte beginnt 8rem danach, dazwischen Laeufer und Strasse */
  body.page-starten .psec .grid--2 { grid-template-columns: minmax(0, min(40rem, calc(50vw - var(--safe) - 4rem))) minmax(0, min(25rem, calc(50vw - var(--safe) - 8rem))); justify-content: space-between; }
  body.page-starten .karte-form { justify-self: end; width: 100%; box-sizing: border-box; }
}

/* Tools hell (Nutzer 2026-09-14: zwei Seiten hell wie die Journey der Startseite). Rechner als helles Glas mit dunkler Schrift.
   Die Linie im Verlauf nutzt currentColor (rechner.js), die Farbe kommt von hier. */
.re-chart { color: #F2EEEA; }
body:not(.dark) .re-chart { color: #1E1C1B; }
body:not(.dark) .rechner-eingabe, body:not(.dark) .rechner-ergebnis {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.62) 0%, rgba(255, 255, 255, 0.3) 60%), rgba(244, 243, 241, 0.55);
  border-color: rgba(255, 255, 255, 0.75); color: #1E1C1B;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 34px 66px -34px rgba(30, 24, 20, 0.35); }
body:not(.dark) .rechner .pf-feld > span { color: #5E5A57; }
body:not(.dark) .rechner input[type="number"] { color: #1E1C1B; background: rgba(255, 255, 255, 0.6); border-color: rgba(72, 62, 56, 0.22); }
body:not(.dark) .rechner input::placeholder { color: #A29C97; }
body:not(.dark) .rechner .r-mit em { color: #8A8682; }
body:not(.dark) .rechner .pf-wahl span { color: #3A3835; border-color: rgba(72, 62, 56, 0.26); background: rgba(255, 255, 255, 0.45); }
body:not(.dark) .rechner .pf-wahl input:checked + span { border-color: #330008; background: #330008; color: #FFFDFB; }
body:not(.dark) .rechner .pf-hinweis { color: #6A6663; }
body:not(.dark) .re-leer, body:not(.dark) .re-satz { color: #3A3835; }
body:not(.dark) .re-titel { color: #5E5A57; }
body:not(.dark) .re-gross span { color: #1E1C1B; }
body:not(.dark) .re-gross small { color: #6A6663; }
body:not(.dark) .re-zeile { border-color: rgba(72, 62, 56, 0.16); }
body:not(.dark) .re-zeile dt { color: #7A7672; }
body:not(.dark) .re-zeile dd { color: #1E1C1B; }
body:not(.dark) .re-balken i:nth-child(3) { background: #BDB6B0; }
body:not(.dark) .re-makros li:nth-child(3) span::before { background: #BDB6B0; }
body:not(.dark) .re-makros b { color: #1E1C1B; }
body:not(.dark) .re-makros span { color: #5E5A57; }
body:not(.dark) .re-makros em, body:not(.dark) .re-hinweis { color: #6A6663; }
body:not(.dark) .re-chart text { fill: #7A7672; }
body:not(.dark) .re-chart .rc-wert { fill: #1E1C1B; }
body:not(.dark) .re-chart .rc-ziel { fill: #5E5A57; }
body:not(.dark) .re-weg { border-color: rgba(72, 62, 56, 0.16); }
body:not(.dark) .re-weg summary, body:not(.dark) .re-weg li { color: #3A3835; }
body:not(.dark) .re-weg li b { color: #1E1C1B; }

/* Ergebnisse hell: Hinweiszeile dunkler (gemessen 3:1 am Handy) */
body.page-ergebnisse:not(.dark) .note { color: #4A4744; }

/* Tools Handy dunkel: Ausschnitt auf die Steinmaennchen und dichterer Schleier (gemessen: Einleitung 2.7:1, jetzt 5 bis 6:1) */
@media (max-width: 860px) {
  body.page-tools #world .pw--far { object-position: 62% 50% !important; }

}

/* Anfrage-Karte etwas nach links (Nutzer 2026-09-14), Laeufer bleibt frei */
@media (min-width: 861px) { body.page-starten .karte-form { margin-right: 3vw; } }
/* Ergebnisse: heller Dunst hinter dem Text (gemessen). Desktop: Schleier 0.8, Bild eine Spur tiefer; Handy: voller Schleier, Ausschnitt auf den Hang */
@media (max-width: 860px) {
}

/* Haltung als Wort statt Gegenwort (Nutzer 2026-09-14: "01 02 03 04" zu gewoehnlich), in der Sprache der Store-Lockups:
   das Wort gross, darunter "statt" und das Gegenwort mit einem burgunderroten Strich durchgestrichen */
body.page-ueber .ue-statt { gap: 3.2rem 4vw; }
body.page-ueber .ue-statt li { border-top: 0; padding-top: 0; }
body.page-ueber .ue-statt h3 { margin: 0; font-weight: 200; font-size: clamp(34px, 3.3vw, 58px); line-height: 1; letter-spacing: -0.01em; color: #F6F3F0; }
body.page-ueber .ue-gegen { margin: 0.7rem 0 0; font-size: 0.66rem; letter-spacing: 0.24em; text-transform: uppercase; font-weight: 500; color: #ADA6A1; }
body.page-ueber .ue-gegen del { color: #D9D2CC; text-decoration: line-through; text-decoration-color: #B02F3E; text-decoration-thickness: 1.5px; }
body.page-ueber .ue-statt li > p:last-child { margin-top: 1.1rem; }
@media (max-width: 860px) { body.page-ueber .ue-statt h3 { font-size: 38px; } body.page-ueber .ue-statt { gap: 2.4rem; } }

/* == STORE-PRINZIP fuer Tools und Ergebnisse (Nutzer 2026-09-14: "so wie die Store-Seite, dasselbe Prinzip") ==
   helle Platte ohne Schleier und ohne Verlauf; nur auf den letzten 700 px dunkelt das Bild aus (--ende aus site.js);
   Lesbarkeit ueber den Store-Schatten direkt an den Buchstaben, keine Flaeche hinter dem Text */
body:is(.page-nie) #world .pglow, body:is(.page-tools, .page-ergebnisse) #world .pveil,
body:is(.page-tools, .page-ergebnisse) #world .pfog { display: none !important; }
body:is(.page-nie).dark #world .pscrim { display: block !important; z-index: 3;
  background: linear-gradient(to bottom, rgba(10, 10, 10, 0) 0%, rgba(10, 10, 10, 0) 28%, rgba(10, 10, 10, 0.5) 48%,
    rgba(10, 10, 10, 0.82) 66%, rgba(10, 10, 10, 0.9) 100%);
  opacity: var(--ende, 0); }
body:is(.page-nie).dark main :is(.phero, .psec-head, .steps, .facts, .kicker, .psec > .note, .grid) :is(h1, h2, h3, p, li, b, span, a),
body:is(.page-tools, .page-ergebnisse).dark .pfoot :is(a, .claimline) {
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.72), 0 0 4px rgba(0, 0, 0, 0.62); }
body:is(.page-tools, .page-ergebnisse).dark .card2 :is(h3, p, li, span, b) { text-shadow: none; }

/* == NEBEL fuer Ueber mich und FAQ (Nutzer 2026-09-14: "ganz wenig Rauch- oder Nebel-Effekt") ==
   dieselben zwei wandernden Schwaden wie auf Coaching, nur schwaecher; unter Scrim und Schleier, damit die Schrift ihren Grund behaelt */
body:is(.page-ueber, .page-faq) #world .pglow, body:is(.page-ueber, .page-faq) #world .pscrim, body:is(.page-ueber, .page-faq) #world .pveil { z-index: 3; }
body:is(.page-ueber, .page-faq) #world .pfog { display: none !important; }
body:is(.page-ueber, .page-faq) #world::before, body:is(.page-ueber, .page-faq) #world::after { content: ""; position: absolute; pointer-events: none;
  left: -6%; top: -6%; width: 112%; height: 112%; background: #F2F0ED;
  transform: translate3d(0, calc(var(--pf, 0) * 0.6px), 0); will-change: transform, mask-position;
  -webkit-mask-repeat: repeat-x, no-repeat; mask-repeat: repeat-x, no-repeat;
  -webkit-mask-composite: source-in; mask-composite: intersect; }
body:is(.page-ueber, .page-faq) #world::before { z-index: 1; opacity: 0.42;
  -webkit-mask-image: url("/assets/store-nebel-hinten.webp"), linear-gradient(to bottom, rgba(0, 0, 0, 0) 26%, rgba(0, 0, 0, 0.6) 50%, #000 72%);
  mask-image: url("/assets/store-nebel-hinten.webp"), linear-gradient(to bottom, rgba(0, 0, 0, 0) 26%, rgba(0, 0, 0, 0.6) 50%, #000 72%);
  -webkit-mask-size: auto 120%, 100% 100%; mask-size: auto 120%, 100% 100%;
  -webkit-mask-position: calc(50% + var(--pg, 0) * -5px) calc(50% + var(--pgy, 0) * 1.2px), 0 0;
  mask-position: calc(50% + var(--pg, 0) * -5px) calc(50% + var(--pgy, 0) * 1.2px), 0 0; }
body:is(.page-ueber, .page-faq) #world::after { z-index: 2; opacity: 0.24;
  -webkit-mask-image: url("/assets/store-nebel-vorn.webp"), linear-gradient(to bottom, rgba(0, 0, 0, 0) 40%, #000 78%);
  mask-image: url("/assets/store-nebel-vorn.webp"), linear-gradient(to bottom, rgba(0, 0, 0, 0) 40%, #000 78%);
  -webkit-mask-size: auto 130%, 100% 100%; mask-size: auto 130%, 100% 100%;
  -webkit-mask-position: calc(50% + var(--pg, 0) * 4px) calc(50% + var(--pgy, 0) * -2.4px), 0 0;
  mask-position: calc(50% + var(--pg, 0) * 4px) calc(50% + var(--pgy, 0) * -2.4px), 0 0; }
@media (prefers-reduced-motion: reduce) { body:is(.page-ueber, .page-faq) #world::before, body:is(.page-ueber, .page-faq) #world::after { transform: none !important; } }

/* == Ueber mich: Zahlen zu zweit, Haltung als klare Saetze (ohne Durchstreichen) == */
body.page-ueber .ue-zahlen { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 40rem; }
body.page-ueber .ue-saetze { gap: 3rem 4vw; }
body.page-ueber .ue-saetze li { border-top: 0; padding-top: 0; }
body.page-ueber .ue-saetze h3 { margin: 0; font-weight: 200; font-size: clamp(22px, 1.9vw, 34px); line-height: 1.18; color: #F6F3F0; max-width: 20ch; }
body.page-ueber .ue-saetze p { margin: 0.9rem 0 0; }

/* == Breitere Textkoepfe auf allen Seiten (Nutzer 2026-09-14: "warum so viel Platz freilassen", "zusammengeknuellt") ==
   Der Kopf war auf 40 Zeichen der kleinen Grundschrift begrenzt (rund 350 px), grosse Ueberschriften brachen deshalb in drei Zeilen. */
.psec-head { max-width: min(100%, 62rem); }
.psec-head .head { max-width: 22ch; }
.psec-head p.lede { max-width: 56ch; }
.phero h1.head { max-width: 22ch; }
.phero p.lede { max-width: 52ch; }
body.page-ueber .ue-hero h1.head { max-width: 18ch; }
body.page-ueber .ue-hero p.lede { max-width: 46ch; }

/* Haltung: grosse Konturziffern statt kleiner 01 02 03 04 (Nutzer 2026-09-14), die Ziffer steht ueber dem Satz */
body.page-ueber .ue-nr { display: block; margin: 0 0 0.5rem; font-weight: 200; font-size: clamp(54px, 4.8vw, 86px); line-height: 0.9; letter-spacing: -0.02em;
  color: transparent; -webkit-text-stroke: 1px rgba(242, 238, 234, 0.42); text-shadow: none; }
body.page-ueber .ue-saetze li:hover .ue-nr { -webkit-text-stroke-color: rgba(176, 47, 62, 0.85); transition: -webkit-text-stroke-color 400ms ease; }
@media (max-width: 860px) { body.page-ueber .ue-nr { font-size: 52px; } body.page-ueber .ue-zahlen span { font-size: 8.5px; } }

/* == RECHTSSEITEN: Kontakt, Impressum, Datenschutz (Nutzer 2026-09-14) ==
   hell, eine ruhige Wolkenmeer-Platte fuer alle drei, weil es Leseseiten sind; offene Angaben sichtbar als Platzhalter */
body.page-recht #world .pw--near { display: none !important; }
body.page-recht .recht { max-width: 62rem; }
body.page-recht .recht-abschnitt { padding: 2rem 0; border-top: 1px solid rgba(72, 62, 56, 0.16); }
body.page-recht .recht-abschnitt:first-child { border-top: 0; padding-top: 0; }
body.page-recht .recht-abschnitt h2 { margin: 0 0 0.8rem; font-weight: 300; font-size: clamp(20px, 1.6vw, 28px); line-height: 1.2; color: #1E1C1B; }
body.page-recht .recht-abschnitt p { margin: 0.6rem 0 0; font-weight: 300; font-size: clamp(14px, 1vw, 17px); line-height: 1.7; color: #33302D; max-width: 72ch; }
body.page-recht .recht a, body.page-recht .kontakt-mail a { color: #330008; text-decoration: none; border-bottom: 1px solid rgba(51, 0, 8, 0.35); }
body.page-recht .recht-daten { margin: 0; display: grid; gap: 0.8rem; }
body.page-recht .recht-daten div { display: grid; grid-template-columns: 14rem minmax(0, 1fr); gap: 1rem; align-items: baseline; }
body.page-recht .recht-daten dt { font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase; color: #6A6663; font-weight: 500; }
body.page-recht .recht-daten dd { margin: 0; font-weight: 300; font-size: clamp(14px, 1vw, 17px); line-height: 1.6; color: #1E1C1B; }
body.page-recht .recht-offen { color: #8A8682; font-style: italic; }
body.page-recht .recht-stand { margin-top: 2rem; }
body.page-recht .kontakt-wege { display: grid; gap: 2.6rem; }
body.page-recht .kontakt-mail { margin: 0.7rem 0 0; font-weight: 200; font-size: clamp(24px, 2.4vw, 42px); line-height: 1.2; }
@media (max-width: 860px) {
  body.page-recht .recht-daten div { grid-template-columns: minmax(0, 1fr); gap: 0.2rem; }
  body.page-recht .kontakt-mail { font-size: 22px; overflow-wrap: anywhere; }
}

/* Rechtsseiten dunkel auf dem ersten Store-Bild (Nutzer 2026-09-14: die helle Platte "viel zu hell", lieber das Bild vom Anfang des Stores),
   Behandlung wie FAQ und Anfrage; Schrift hell */
body.page-recht.dark .recht-abschnitt { border-top-color: rgba(255, 255, 255, 0.16); }
body.page-recht.dark .recht-abschnitt h2 { color: #F4F1EE; }
body.page-recht.dark .recht-abschnitt p { color: #D9D4CF; }
body.page-recht.dark .recht-daten dt { color: #ADA6A1; }
body.page-recht.dark .recht-daten dd { color: #F2EEEA; }
body.page-recht.dark .recht-offen { color: #A39C97; }
body.page-recht.dark .recht a, body.page-recht.dark .kontakt-mail a { color: #F6F3F0; border-bottom-color: rgba(176, 47, 62, 0.7); }
body.page-recht.dark main :is(.recht-abschnitt, .recht-daten, .kontakt-wege) :is(h2, p, dt, dd, a, span) { text-shadow: 0 1px 18px rgba(0, 0, 0, 0.55), 0 0 3px rgba(0, 0, 0, 0.32); }

/* Kontakt: weniger Striche, Bild in voller Aufloesung (Nutzer 2026-09-14): kein Hineinzoomen der Platte auf den Rechtsseiten,
   E-Mail in normaler Groesse ohne Unterstrich, keine Striche an den Zwischentiteln und am Senden-Knopf */
body.page-recht #world .pw--far { inset: 0 !important; left: 0; top: 0; width: 100%; height: 100%; transform: none !important; }
body.page-recht .kontakt-wege .eyebrow::after { display: none !important; }
body.page-recht .kontakt-mail { font-size: clamp(16px, 1.2vw, 20px); font-weight: 300; line-height: 1.5; }
body.page-recht .kontakt-mail a, body.page-recht.dark .kontakt-mail a { border-bottom: 0 !important; }
body.page-recht .karte-form button[type="submit"]::after { display: none !important; }

/* Ziffern wie bei 1:1 (Nutzer 2026-09-14: jede 1 soll aussehen wie in "1:1 Coaching", auch bei 17; Doppelpunkt nicht so tief).
   Dieselbe Systemschrift wie .onetoone fuer alle grossen Zahlen: Zahlenleiste, Haltungsziffern, Preise, Rechner */
body.page-ueber .ue-zahlen b, body.page-ueber .ue-nr, .pricefig .fig, .re-gross span, .re-makros b, .re-zeile dd {
  font-family: system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; letter-spacing: 0.005em; }
body.page-ueber .ue-zahlen b { font-weight: 200; font-size: clamp(34px, 3.1vw, 56px); }
body.page-ueber .ue-nr { font-weight: 200; }

/* 1:1: der untere Punkt des Doppelpunkts sass auf der Grundlinie und wirkte zu tief (Nutzer 2026-09-14), jetzt angehoben */
/* die Beschriftungsregel .ue-zahlen span (Block, klein, Versalien) traf auch den Doppelpunkt und brach 1:1 in drei Zeilen */
.kolon { display: inline !important; position: relative; top: -0.1em; padding: 0 0.03em; margin: 0 !important; font: inherit !important; letter-spacing: inherit !important; text-transform: none !important; color: inherit !important; line-height: inherit !important; }
/* Impressum und Datenschutz: E-Mail nur fett, ohne Unterstrich (Nutzer 2026-09-14) */
body.page-recht .recht a, body.page-recht.dark .recht a { border-bottom: 0 !important; font-weight: 600; text-decoration: none; }

/* FAQ Handy: etwas rausgezoomt und auf das Tal in der Mitte (Nutzer 2026-09-14: "Handy langweilig", "in der Mitte sieht man das Tal") */
@media (max-width: 860px) {
  body.page-faq #world .pw--far { inset: 0 !important; left: 0; top: 0; width: 100%; height: 100%; transform: none !important; object-position: 50% 55% !important; }
}

/* Tools und Ergebnisse wie das letzte Bild der Startseite (Nutzer 2026-09-14): helles Bild mit etwas natuerlicher Farbe,
   dunkle Schrift wie dort, kein heller Schleier ueber dem Bild; ein weicher heller Hof an den Buchstaben traegt die Schrift */
body:is(.page-tools, .page-ergebnisse):not(.dark) #world .pscrim { display: none !important; }
body:is(.page-tools, .page-ergebnisse):not(.dark) main :is(.phero, .psec-head, .steps, .facts, .kicker, .psec > .note) :is(h1, h2, h3, p, li, b, span, a) {
  text-shadow: 0 0 14px rgba(246, 244, 241, 0.7), 0 0 4px rgba(246, 244, 241, 0.6); }

/* Kopfband hell auf Tools und Ergebnisse (wie auf dem hellen Store), sonst lag ein dunkler Streifen ueber dem hellen Bild */
body:is(.page-tools, .page-ergebnisse):not(.dark) #chrome .ptop {
  background: linear-gradient(to bottom, rgba(246, 244, 241, 0.82) 0%, rgba(246, 244, 241, 0.44) 44%, rgba(246, 244, 241, 0) 100%); }
/* Handy: Ausschnitt ueber dem hellen Wolkenmeer bzw. Nebel, damit die dunkle Schrift nicht auf dem Hang liegt */
@media (max-width: 860px) {
  body.page-tools:not(.dark) #world .pw--far { object-position: 16% 50% !important; }
  body.page-ergebnisse:not(.dark) #world .pw--far { object-position: 10% 45% !important; }
}

/* FAQ voll rausgezoomt (Nutzer 2026-09-14): das Originalbild ohne Hineinzoomen und ohne Mitfahren, auf allen Groessen */
body.page-faq #world .pw--far { inset: 0 !important; width: 100% !important; height: 100% !important; transform: none !important; object-position: 50% 50% !important; }
@media (max-width: 860px) { body.page-faq #world .pw--far { object-position: 50% 55% !important; } }

/* Ergebnisse (Nutzer 2026-09-14): hell mit dunkler Schrift wie das letzte Startseitenbild, ohne Hof um die Buchstaben;
   Beispiel und Dokumentation entfernt, stattdessen Platz fuer Vorher-Nachher-Bilder, die mit Freigabe folgen */
body.page-ergebnisse:not(.dark) main * { text-shadow: none !important; }
.vn-raster { margin-top: 2.6rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4vw; }
.vn-karte { aspect-ratio: 4 / 3; border-radius: 16px; display: grid; grid-template-columns: 1fr 1fr; overflow: hidden;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.22) 60%), rgba(244, 243, 241, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.7); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.vn-karte span { display: flex; align-items: flex-end; padding: 1rem; font-size: 0.58rem; letter-spacing: 0.24em; text-transform: uppercase; color: #5E5A57; font-weight: 500; }
.vn-karte span + span { border-left: 1px solid rgba(72, 62, 56, 0.14); }
@media (max-width: 860px) { .vn-raster { grid-template-columns: minmax(0, 1fr); gap: 1rem; } }

/* Ergebnisse, "Woran wir Fortschritt messen" als Wochenkarte (Nutzer 2026-09-14: Option 3, ohne Verlaufslinien, ohne "Woche 12") */
.wochenkarte { margin-top: 3rem; max-width: 46rem; border-radius: 18px; padding: 0.5rem 2rem; box-sizing: border-box;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.62) 0%, rgba(255, 255, 255, 0.3) 60%), rgba(244, 243, 241, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.75); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 34px 66px -34px rgba(30, 24, 20, 0.35);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.wk-zeile { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 1.2rem; align-items: baseline; padding: 1.2rem 0; }
.wk-zeile + .wk-zeile { border-top: 1px solid rgba(72, 62, 56, 0.14); }
.wk-punkt { width: 8px; height: 8px; border-radius: 50%; background: #330008; transform: translateY(-2px); }
.wochenkarte h3 { margin: 0; font-weight: 300; font-size: clamp(19px, 1.5vw, 26px); line-height: 1.2; color: #1E1C1B; }
.wochenkarte p { margin: 0.3rem 0 0; font-size: clamp(13.5px, 0.95vw, 15.5px); line-height: 1.5; color: #3A3835; font-weight: 300; }
@media (max-width: 860px) {
  .wochenkarte { max-width: none; margin-left: calc(16px - var(--safe)); margin-right: calc(16px - var(--safe)); padding: 0.4rem 1.3rem; }
  .wk-zeile { gap: 0.9rem; padding: 1rem 0; }
}

/* Anfrage: Zoom beim Scrollen etwas mehr auf den Laeufer (Nutzer 2026-09-14: "nicht extrem, aber etwas").
   Der Laeufer steht in der Platte bei 50 % / 66 %, im Rahmen je nach Fenster bei 64 bis 66 %: dort liegt jetzt der Ursprung,
   die Vergroesserung waechst von 4 auf 8 %, damit der Gipfel oben stehen bleibt. */
body.page-starten #world .pw--far { transform-origin: 50% 65%; transform: translate3d(0, calc(var(--pf, 0) * 1px), 0) scale(calc(1.01 + var(--pz, 0) * 0.08)); }
/* Handy: die allgemeine Handy-Position (38 % 46 %) schob den Laeufer genau an den rechten Rand; hier steht er mittig im Zoom */
@media (max-width: 860px) { body.page-starten #world .pw--far { object-position: 50% 46% !important; } }

/* Ergebnisse: jeder Fall mit Ausgangslage, Zeitraum, Veraenderung (Nutzer 2026-09-14). Werte kommen erst mit echten, freigegebenen Faellen,
   bis dahin stehen dort nur ruhige Platzhalter-Balken */
.vn-fall { margin: 0; min-width: 0; }
.vn-fall .vn-karte { width: 100%; }
.vn-info { margin: 1.2rem 0 0; display: grid; gap: 0.7rem; }
.vn-info div { display: grid; grid-template-columns: 7.6rem minmax(0, 1fr); gap: 0.9rem; align-items: center; }
.vn-info dt { font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 500; color: #5E5A57; }
.vn-info dd { margin: 0; height: 7px; border-radius: 4px; background: rgba(72, 62, 56, 0.13); }
.vn-info div:nth-child(1) dd { width: 78%; } .vn-info div:nth-child(2) dd { width: 36%; } .vn-info div:nth-child(3) dd { width: 62%; }

/* Rechtsseiten: Bild bleibt beim Scrollen gleich (Nutzer 2026-09-14: "dass das blasser wird, macht keinen Sinn").
   Blasser wurde es durch den hellen Schein (.pglow 0.3 auf 1) und den wandernden Nebel (.pfog 0.22 auf 0.34) aus site.js; beide bleiben jetzt auf dem Anfangswert stehen */
body.page-recht #world .pglow { opacity: 0.3 !important; }
body.page-recht #world .pfog { opacity: 0.22 !important; transform: scale(1.04) !important; }
/* Die Angaben unter jedem Fall stehen auf demselben hellen Glas wie die Bildkarte, sonst verschwinden sie ueber dem dunklen Hang */
.vn-info { margin-top: 0.5rem; padding: 0.9rem 1.1rem; border-radius: 12px; box-sizing: border-box;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.62) 0%, rgba(255, 255, 255, 0.3) 60%), rgba(244, 243, 241, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.75); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.vn-info dt { color: #4A4643; }
/* Ergebnisse: ohne den Massstab-Abschnitt rueckt der Schluss auf den dunklen Hang; links steht er im hellen Nebel, buendig mit den anderen Koepfen */
body.page-ergebnisse main .psec--tight .psec-head.center { text-align: left !important; margin-left: 0 !important; margin-right: auto !important; }

/* Ueber mich, Haltung: Variante B (Nutzer 2026-09-14). Ziffer klein als Kontur links neben dem Satz statt gross darueber; kein roetlicher Hover mehr */
body.page-ueber .ue-saetze li { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr); column-gap: 1.1rem; align-items: start; }
body.page-ueber .ue-saetze li > *:not(.ue-nr) { grid-column: 2; }
body.page-ueber .ue-saetze .ue-nr { grid-column: 1; grid-row: 1 / span 2; margin: 0; font-size: clamp(34px, 2.6vw, 46px); line-height: 1;
  -webkit-text-stroke: 1px rgba(242, 238, 234, 0.34); transform: translateY(0.12em); }
body.page-ueber .ue-saetze li:hover .ue-nr { -webkit-text-stroke-color: rgba(242, 238, 234, 0.6); }

/* Tools: Steg im Nebelsee (Nutzer 2026-09-14, Pinterest-Bild 12, Lichterkette entfernt, eine Laterne am Steg-Ende).
   Handy: der Steg steht bei rund 54 % der Bildbreite, dort sitzt jetzt auch der Ausschnitt */
@media (max-width: 860px) { body.page-tools.dark #world .pw--far { object-position: 54% 50% !important; } }

/* Tools (Nutzer 2026-09-14): "mehr von den Bergen und vom Hintergrund, warum so reingezoomt". Rahmen = Fenster, kein Zoom, kein Steigen;
   auf breiten Fenstern sitzt der Ausschnitt hoeher, damit die Berge oben nicht abgeschnitten werden */
body.page-tools #world .pw--far { inset: 0 !important; width: 100% !important; height: 100% !important; transform: none !important; object-position: 50% 30% !important; }
/* Ueber mich, Haltung B: der rote Hover darf bleiben (Nutzer 2026-09-14) */
body.page-ueber .ue-saetze li:hover .ue-nr { -webkit-text-stroke-color: rgba(176, 47, 62, 0.85); transition: -webkit-text-stroke-color 400ms ease; }

/* Ergebnisse (Nutzer 2026-09-14: "zu schnell reingezoomt, wenig Berg"): Desktop fast ganz heraus, nur 3 % Zoom beim Scrollen,
   4 % Reserve unten fuer das Steigen um 34 px; Handy-Ausschnitt 35 %, damit unten rechts der Hang zu sehen ist und die Schrift im Nebel bleibt */
body.page-ergebnisse #world .pw--far { top: 0 !important; left: 0 !important; right: auto !important; bottom: auto !important; width: 100% !important; height: 104% !important;
  object-position: 50% 50%; transform-origin: 50% 40%; transform: translate3d(0, calc(var(--pf, 0) * 1px), 0) scale(calc(1 + var(--pz, 0) * 0.03)) !important; }
@media (max-width: 860px) { body.page-ergebnisse:not(.dark) #world .pw--far { object-position: 35% 45% !important; } }

/* Tools Desktop: heller Steg-Hintergrund, Schrift links wurde zu schwach (gemessen 2.5 bis 3.2:1). Dunkler Schleier nur links hinter dem Text,
   Steg, Laterne und Berge in der Mitte und rechts bleiben so hell wie vorher */
@media (min-width: 861px) {
  body.page-tools #world .pveil { display: block !important; z-index: 3;
    background: linear-gradient(to right, rgba(10, 10, 12, 0.62) 0%, rgba(10, 10, 12, 0.42) 34%, rgba(10, 10, 12, 0.08) 62%, rgba(10, 10, 12, 0) 80%) !important; }
}

/* Anfrage: "Noch eine Spur kraeftiger" (Nutzer 2026-09-14). Kein Grauwerden beim Scrollen (heller Schein aus, Nebel bleibt auf dem Anfangswert),
   Bild mit etwas mehr Kontrast, weniger Abdunklung. Gilt wie in der Vorschau auch auf dem Handy. */
body.page-starten #world .pglow { opacity: 0 !important; }
body.page-starten #world .pfog { opacity: 0.22 !important; }
body.page-starten #world .pw--far { filter: contrast(1.14) saturate(1.6) brightness(1.03) !important; }
body.page-starten #world .pscrim { opacity: 0.46 !important; }
/* Handy: dort laeuft die Schrift ueber die ganze Breite und das helle Bild; mit 0.46 fiel sie auf 2.5 bis 2.7:1. Etwas mehr Abdunklung nur hier */
@media (max-width: 860px) { body.page-starten #world .pscrim { opacity: 0.72 !important; } }

/* Tools: leichter Zoom beim Scrollen wie auf den anderen Seiten (Nutzer 2026-09-15: "die einzige Seite, wo nichts passiert").
   Bleibt fast ganz heraus: 4 % Reserve unten fuers Steigen um 34 px, nur 4 % Zoom, Ursprung bei der Laterne, damit die Berge oben stehen bleiben */
body.page-tools #world .pw--far { height: 104% !important; transform-origin: 58% 62%;
  transform: translate3d(0, calc(var(--pf, 0) * 1px), 0) scale(calc(1 + var(--pz, 0) * 0.04)) !important; }

/* Optionen, Anfrage (Nutzer 2026-09-15): die gewaehlte Kombination steht sichtbar oben im Formular */
.karte-form .auswahl-zeile { margin: 0 0 1.3rem; line-height: 1.35; }
.karte-form .auswahl-zeile span { display: block; margin-bottom: 0.35rem; font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 500; opacity: 0.72; }
.karte-form .auswahl-zeile b { font-weight: 400; font-size: clamp(15px, 1.05vw, 17px); color: inherit; }

/* == HANDY: EIN ABSTAND OBEN FUER ALLE UNTERSEITEN (Nutzer 2026-09-15: "ueberall denselben Abstand wie bei Tools") ==
   Vorher stand der Seitenkopf unten in einem Kasten mit Mindesthoehe (teils inline, teils seitenweise mit !important),
   der erste Inhalt landete je nach Textlaenge zwischen 76 und 495 px. Jetzt beginnt der erste Inhalt (Text,
   Zurueck-Link oder Portrait) immer gleich weit oben: 16 % der Fensterhoehe, bei 375x812 rund 130 px (Nutzer: "so einen Abstand" wie Coaching auf dem Handy).
   Die Abstaende nach unten bleiben unveraendert (padding-bottom je Seite). body[class] hebt die Spezifitaet ueber die
   seitenweisen !important-Regeln (body.page-coaching .phero). */
@media (max-width: 860px) {
  body[class] main .phero, body[class] main .ue-hero { min-height: 0 !important; justify-content: flex-start !important; padding-top: clamp(110px, 16vh, 150px) !important; }
}

/* == MOBILE KOMPOSITION (Nutzer 2026-09-16) ==================================================================
   1. Hintergrund: das Foto fuellt #world (Bildschirmgroesse) mit dem kleinstmoeglichen Zoom, der noch voll deckt -
      so viel Szene wie im Hochformat ueberhaupt sichtbar sein kann. Vorher lagen seitenweise Ueberstaende von
      112% bis 160% plus Parallax-Skalierung darauf, das wirkte auf dem Handy wie ein Close-up. Kein Parallax-Scale
      auf Mobile (ruhiges Bild, nichts, was Safari beim Scrollen neu zusammensetzen muss). Bildausschnitt
      (object-position) je Seite bleibt, wie er ist.
   2. Inhalt: weniger Seitenrand, Schrift und Abstaende moderat kleiner, damit mehr gleichzeitig im Bild ist und
      nichts gequetscht wirkt. Wischreihen behalten ihre Kartenbreiten-Logik (78% bzw. --karte). */
@media (max-width: 860px) {
  html body[class] #world img.pw.pw--far { inset: -4% !important; width: 108% !important; height: 108% !important; }
  /* Nutzer 2026-09-16: Ueber mich - der Steinweg steht im Foto genau mittig, der allgemeine Handy-Ausschnitt (38 %)
     schob ihn nach rechts. Ergebnisse - statt Nebel (35 %) der Berg mit dem Pfad rechts im Foto. */
  html body.page-ueber #world img.pw.pw--far { object-position: 50% 46% !important; }  html body.page-ergebnisse #world img.pw.pw--far { object-position: 74% 50% !important; }
  /* Ergebnisse unten (Nutzer 2026-09-16: "Text unten nicht mehr lesbar"): Schluss und Footer liegen jetzt auf dem dunklen
     Hang - dort helle Schrift mit dunklem Schatten, oben im hellen Nebel bleibt die dunkle */
  body.page-ergebnisse:not(.dark) main .psec--tight .head, body.page-ergebnisse:not(.dark) main .psec--tight .lede,
  body.page-ergebnisse:not(.dark) main .psec--tight .eyebrow,
  body.page-ergebnisse:not(.dark) .pfoot a, body.page-ergebnisse:not(.dark) .pfoot .claimline {
    color: #F2EFEC !important; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.75), 0 0 14px rgba(0, 0, 0, 0.55) !important; }
  body.page-ergebnisse:not(.dark) .pfoot a { border-bottom-color: rgba(242, 239, 236, 0.4) !important; }
  /* Ueber mich, Haltung: beim Durchscrollen leuchtet die Ziffer des Satzes in der Bildschirmmitte (site.js), wie der
     Hover am Desktop - sonst aendert sich nichts */
  body.page-ueber .ue-saetze .ue-nr { transition: -webkit-text-stroke-color 400ms ease; }
  body.page-ueber .ue-saetze li.leuchtet .ue-nr { -webkit-text-stroke-color: rgba(176, 47, 62, 0.85); }
}
@media (max-width: 600px) {
  :root { --safe: 8vw; }
  /* der ganze Seiteninhalt (Texte, Kacheln, Karten, Abstaende) gleichmaessig kleiner: zoom statt transform,
     damit das Layout neu umbricht und wirklich mehr auf den Bildschirm passt. Proportionen bleiben wie im Design.
     Kopfzeile/Menue und Hintergrund liegen ausserhalb und bleiben unveraendert. */
  main.page, .pfoot { zoom: 0.82; }
  /* Wischreihen: schmalere Karten, damit von der naechsten mehr hereinschaut */
  .tiles { grid-auto-columns: 64%; }
  /* Coaching, Angebotskarten (Nutzer 2026-09-16): "Online Coaching" passte in eine Zeile, "Premium Coaching" (211px bei
     26px) auf schmaleren iPhones nicht (Karte ~190px). Beide Titel einheitlich einzeilig, gleich gross, mit Luft fuer
     Safaris etwas breitere Schrift */
  .offer .head2, .offer--premium .head2 { white-space: nowrap; font-size: min(26px, 5.3vw); }
  body.page-store .regal--plaene, body.page-store .regal--gratis { --karte: calc(100vw - var(--safe) - 130px); }
  body.page-store .regal--ebooks { --karte: calc(100vw - var(--safe) - 180px); }
  /* Textbloecke ohne Zeichen-Maximalbreite: sonst bleibt durch die Verkleinerung rechts ein leerer Spalt */
  main.page .psec-head, main.page .head, main.page p.lede, main.page p.body, main.page .phero h1.head,
  main.page .phero p.lede, main.page .psec-head .head, main.page .psec-head p.lede { max-width: none; }
}
/* == MOBILE KOMPOSITION ENDE == */
/* Ergebnisse, Desktop (Nutzer 2026-09-17): der Footer liegt dort ebenfalls ueber dem dunklen Hang - Links und Claim hell mit
   dunklem Schatten, wie am Handy. Nur die Footer-Schrift, nichts sonst. */
@media (min-width: 861px) {
  body.page-ergebnisse:not(.dark) .pfoot a, body.page-ergebnisse:not(.dark) .pfoot .claimline {
    color: #F2EFEC !important; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.75), 0 0 14px rgba(0, 0, 0, 0.55) !important; }
  body.page-ergebnisse:not(.dark) .pfoot a { border-bottom-color: rgba(242, 239, 236, 0.4) !important; }
  body.page-ergebnisse:not(.dark) .pfoot .frow, body.page-ergebnisse:not(.dark) .pfoot { border-color: rgba(242, 239, 236, 0.25) !important; }
}

/* Store-Raster am Desktop (2026-09-17, "Daily Routine & Maintenance" bricht in zwei Zeilen): Preiszeilen einer Reihe stehen auf
   gleicher Hoehe, egal wie lang Titel und Text der einzelnen Karte sind. Handy (Wischreihen) unberuehrt. */
@media (min-width: 861px) {
  body.page-store .regal { align-items: stretch; }
  body.page-store .regal > .stueck { display: flex; flex-direction: column; }
  body.page-store .regal > .stueck > .stueck-satz { flex: 1 1 auto; display: flex; flex-direction: column; }
  body.page-store .regal > .stueck > .stueck-satz > .stueck-fuss { margin-top: auto; }
}