/* ==========================================================================
   udokerzinger.de · Dachmarke — Komponenten
   Kopf · Hero · Drei-Welten-Rad · Hintergrundwelten · Scroll-Strecke ·
   verbindende Linie · Udo · Kontakt · Fuss · Mobile
   ========================================================================== */


/* ==========================================================================
   1 · Kopfzeile
   Bewusst keine Menuezeile. Nur der Name links, zwei stille Links rechts.
   ========================================================================== */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-header);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-md);
  padding: clamp(1.1rem, .8rem + 1vw, 1.9rem) var(--gutter);
  transition: background-color var(--t-slow) var(--ease-soft),
              box-shadow var(--t-slow) var(--ease-soft),
              backdrop-filter var(--t-slow) var(--ease-soft);
}

.site-header.is-stuck {
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  box-shadow: 0 1px 0 var(--line);
}

.wordmark {
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  white-space: nowrap;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, .4rem + 1.6vw, 2.25rem);
}

.site-nav a {
  font-size: var(--fs-small);
  text-decoration: none;
  color: var(--muted);
  position: relative;
  padding-block: .25rem;
  transition: color var(--t-base) var(--ease);
}

.site-nav a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-slow) var(--ease);
}

.site-nav a:hover { color: var(--ink); }
.site-nav a:hover::after,
.site-nav a:focus-visible::after { transform: scaleX(1); }


/* ==========================================================================
   2 · Hero
   ========================================================================== */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(6.5rem, 5rem + 6vw, 9rem) clamp(4rem, 2rem + 6vw, 6rem);
  overflow: hidden;
  isolation: isolate;
}

.hero__inner {
  display: grid;
  align-items: center;
  gap: clamp(2rem, 1rem + 4vw, 5rem);
  width: 100%;
}

@media (min-width: 1000px) {
  .hero__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  }
}


/* ---------- 2.1 Die Textbuehne: Ruhezustand und drei Weltenpanels --------
   Alle Ebenen liegen im selben Rasterfeld uebereinander. Dadurch bestimmt
   die hoechste Ebene die Hoehe und beim Wechsel springt nichts.          */

.hero__stage {
  display: grid;
  position: relative;
}

.hero__layer {
  grid-area: 1 / 1;
  align-self: center;
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  visibility: hidden;
  pointer-events: none;
  /* Der weichende Text geht schneller als der kommende kommt. Sonst stehen
     beide gleichzeitig halb sichtbar uebereinander und es flimmert. */
  transition: opacity var(--t-base) var(--ease),
              transform var(--t-base) var(--ease),
              visibility 0s linear var(--t-base);
}

.hero__layer.is-active {
  opacity: 1;
  transform: none;
  visibility: visible;
  pointer-events: auto;
  transition: opacity var(--t-slow) var(--ease) 90ms,
              transform var(--t-slow) var(--ease) 90ms,
              visibility 0s linear 0s;
}

/* Ruhezustand */
.hero__eyebrow { margin-bottom: clamp(1rem, .7rem + 1vw, 1.6rem); }

.hero__headline .line:last-child { color: var(--muted); }

/* Die Subline erdet die Markenidee. Sie steht direkt unter der Headline,
   damit „Drei Welten" nicht in der Luft hängt. */
.hero__subline {
  margin-top: clamp(1rem, .8rem + 1vw, 1.5rem);
  font-size: clamp(1.0625rem, .95rem + .5vw, 1.3125rem);
  font-weight: 500;
  line-height: var(--lh-snug);
  letter-spacing: -.01em;
  color: var(--ink);
  max-width: 26ch;
}

.hero__lead {
  margin-top: clamp(1rem, .8rem + 1vw, 1.4rem);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--muted);
  max-width: 46ch;
}

/* Kopfzeile eines Weltenpanels: Kategorie zuerst, damit sofort klar ist,
   worum es geht — vorher stand dort nur eine Frage. */
.hero__kicker {
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--accent-strong);
}

.hero__brand {
  margin-top: .3em;
  font-size: var(--fs-small);
  color: var(--muted);
}

.hero__hint {
  margin-top: clamp(1.8rem, 1.2rem + 2vw, 3rem);
  display: inline-flex;
  align-items: center;
  gap: .7em;
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--muted-soft);
}

.hero__hint::before {
  content: '';
  width: 2rem;
  height: 1px;
  background: currentColor;
  animation: hint-pulse 3.6s var(--ease-soft) infinite;
  transform-origin: left;
}

@keyframes hint-pulse {
  0%, 100% { transform: scaleX(.4); opacity: .5; }
  50%      { transform: scaleX(1);  opacity: 1; }
}

/* Weltenpanel */
/* Der Satz, der die Welt auf den Punkt bringt. Etwas kleiner als früher —
   er trägt jetzt einen ganzen Satz statt eines Wortes. */
.hero__answer {
  margin-top: clamp(.8rem, .6rem + .8vw, 1.2rem);
  font-family: var(--font-serif);
  font-size: clamp(2rem, 1.2rem + 3.4vw, 3.75rem);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: var(--ls-display);
  color: var(--accent-strong);
  max-width: 16ch;
  text-wrap: balance;
  transition: color var(--t-slow) var(--ease-soft);
}

.hero__text {
  margin-top: clamp(1.2rem, .9rem + 1.2vw, 1.9rem);
  font-size: var(--fs-lead);
  line-height: var(--lh-snug);
  max-width: 30ch;
  color: var(--ink);
}

.hero__actions {
  margin-top: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem);
  display: flex;
  align-items: center;
  gap: var(--sp-md);
  flex-wrap: wrap;
}

.hero__domain {
  font-size: var(--fs-micro);
  letter-spacing: .06em;
  color: var(--muted-soft);
}


/* ---------- 2.2 Scroll-Hinweis ------------------------------------------- */

.scroll-cue {
  position: relative;
  margin: clamp(2.5rem, 1rem + 4vw, 4rem) auto 0;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: .8rem;
  text-decoration: none;
  color: var(--muted-soft);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  transition: color var(--t-base) var(--ease);
}

.scroll-cue:hover { color: var(--ink); }

.scroll-cue__line {
  width: 1px;
  height: 3rem;
  background: linear-gradient(to bottom, transparent, currentColor);
  transform-origin: top;
  animation: cue-drop 2.8s var(--ease-soft) infinite;
}

@keyframes cue-drop {
  0%, 100% { transform: scaleY(.35); opacity: .4; }
  55%      { transform: scaleY(1);   opacity: 1; }
}


/* ==========================================================================
   3 · Die Hintergrundwelten
   Drei Ebenen uebereinander. Immer nur eine sichtbar. Der Wechsel dauert
   bewusst rund eine Sekunde: Crossfade + leichter Zoom + Weichzeichner.
   Fehlt die .webp-Datei, faellt die Ebene auf ihren Verlauf zurueck.
   ========================================================================== */

.worlds {
  position: absolute;
  inset: -6% -4%;
  z-index: var(--z-world);
  pointer-events: none;
  transform: translate3d(0, var(--world-shift, 0px), 0);
  will-change: transform;
}

.world {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1);
  filter: blur(16px) saturate(.9);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: opacity var(--t-world) var(--ease-soft),
              transform 1400ms var(--ease-soft),
              filter var(--t-world) var(--ease-soft);
  will-change: opacity, transform, filter;
}

.world.is-active {
  opacity: 1;
  transform: scale(1.04);
  filter: blur(0) saturate(1);
}

/* Platzhalterverläufe, solange keine Bilddatei vorliegt.
   --world-img wird aus content.js gesetzt. Solange die .webp-Datei fehlt,
   ueberspringt der Browser diese Ebene und der Verlauf bleibt stehen.
   Sobald die Datei da ist, liegt das Bild darueber — ohne Codeaenderung. */

.world--mind {
  background-image:
    var(--world-img, none),
    radial-gradient(120% 90% at 78% 18%, rgba(217, 195, 165, .95) 0%, rgba(217, 195, 165, 0) 62%),
    radial-gradient(95% 80% at 26% 82%, rgba(140, 155, 132, .70) 0%, rgba(140, 155, 132, 0) 64%),
    linear-gradient(152deg, #f2e6d6 0%, #e7d3bd 42%, #c8926f 100%);
}

/* Journey: Teal trägt, Gold setzt den Akzent, Navy gibt Tiefe. */
.world--journey {
  background-image:
    var(--world-img, none),
    radial-gradient(110% 85% at 22% 22%, rgba(181, 139, 50, .55) 0%, rgba(181, 139, 50, 0) 58%),
    radial-gradient(120% 95% at 84% 74%, rgba(16, 48, 58, .82) 0%, rgba(16, 48, 58, 0) 66%),
    linear-gradient(146deg, #dbe6e4 0%, #7fb0b0 38%, #17646b 74%, #10303a 100%);
}

/* Money Plan: ausschließlich die drei Blautöne der bestehenden Seite.
   Kein Gold, kein Grün — die Welt trägt die Farbe des echten Produkts. */
.world--money {
  background-image:
    var(--world-img, none),
    radial-gradient(110% 80% at 80% 16%, rgba(124, 168, 208, .60) 0%, rgba(124, 168, 208, 0) 60%),
    radial-gradient(120% 95% at 18% 88%, rgba(20, 49, 66, .84) 0%, rgba(20, 49, 66, 0) 68%),
    linear-gradient(155deg, #eef2f6 0%, #7ca8d0 34%, #4174a0 72%, #143142 100%);
}

/* Der Schleier haelt die Textseite lesbar, ohne das Bild zu erschlagen. */
.worlds__veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right,
      var(--paper) 0%,
      color-mix(in srgb, var(--paper) 88%, transparent) 34%,
      color-mix(in srgb, var(--paper) 40%, transparent) 62%,
      color-mix(in srgb, var(--paper) 18%, transparent) 100%),
    linear-gradient(to bottom,
      var(--paper) 0%,
      transparent 22%,
      transparent 74%,
      color-mix(in srgb, var(--paper) 92%, transparent) 100%);
  transition: opacity var(--t-world) var(--ease-soft);
}

/* Ohne aktive Welt ist der Schleier fast deckend — die Seite startet ruhig. */
:root:not([data-world]) .worlds__veil { opacity: 1; }

/* Auf dem Telefon steht der gesamte Hero-Inhalt vor der Welt — Ueberschrift,
   Rad und die drei Flaechen. Die Welt bleibt deshalb durchgehend eine
   Atmosphaere und wird nie zur Flaeche, gegen die Text ankaempfen muss. */
@media (max-width: 999px) {
  .worlds__veil {
    background:
      linear-gradient(to bottom,
        var(--paper) 0%,
        color-mix(in srgb, var(--paper) 80%, transparent) 22%,
        color-mix(in srgb, var(--paper) 76%, transparent) 44%,
        color-mix(in srgb, var(--paper) 88%, transparent) 68%,
        color-mix(in srgb, var(--paper) 97%, transparent) 100%);
  }
}


/* ==========================================================================
   4 · Das Drei-Welten-Rad
   Kein Bild. SVG, per JavaScript aus der Inhaltskonfiguration aufgebaut.
   ========================================================================== */

.wheel {
  position: relative;
  /* Die Deckelung auf 62svh war zu streng. Gemessen am 09.08.2026 in einem
     1536x674-Fenster: Rad 418 px breit, also Massstab 0,58 gegenueber der
     viewBox von 720. Damit landete der Claim in der Mitte bei 5,5 px und
     die Weltnamen bei 11,6 px — unlesbar.

     Der Deckel hat seinen Zweck ohnehin verfehlt: Der Hero war in
     demselben Fenster 939 px hoch, passte also lange nicht auf einen
     Bildschirm. Kleiner wurde das Rad trotzdem.

     Jetzt 80svh statt 62svh, Untergrenze 26rem statt 23rem, Obergrenze
     46rem statt 40rem. Zusammen mit den groesseren Schriftgroessen weiter
     unten liegt der kleinste Text damit ueber 9 px. */
  width: min(100%, 46rem, max(26rem, 80svh));
  margin-inline: auto;
  aspect-ratio: 1;
  z-index: var(--z-wheel);
  /* Sehr leichte Reaktion auf die Maus. Werte kommen aus main.js. */
  transform: translate3d(var(--tilt-x, 0px), var(--tilt-y, 0px), 0)
             rotate(var(--tilt-r, 0deg));
  transition: transform 520ms var(--ease);
  will-change: transform;
}

.wheel svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* ---------- Der duenne Kreis, der sich zuerst selbst zeichnet ------------ */

.wheel__guide {
  fill: none;
  stroke: var(--line-strong);
  stroke-width: 1;
  stroke-dasharray: var(--guide-len) var(--guide-len);
  stroke-dashoffset: var(--guide-len);
}

.wheel.is-ready .wheel__guide {
  animation: guide-draw 1150ms var(--ease-soft) forwards;
}

@keyframes guide-draw {
  from { stroke-dashoffset: var(--guide-len); }
  to   { stroke-dashoffset: 0; }
}

/* ---------- Segmente ----------------------------------------------------- */

/* Die aeussere Huelle traegt den einmaligen Aufbau ... */
.wheel__seg-in { opacity: 0; }

.wheel.is-ready .wheel__seg-in {
  animation: seg-in 900ms var(--ease) forwards;
  animation-delay: var(--seg-delay);
}

/* ... die innere Ebene die Deckkraft aus der Interaktion (per Skript). */
.wheel__seg {
  cursor: pointer;
  outline: none;
}

/* Praesentationsattribute im SVG koennen kein var(). Die Farbe der drei
   Verlaeufe kommt deshalb ueber CSS — der Geltungsbereich haengt am
   data-world-scope des jeweiligen Verlaufs. */
.wheel__grad stop:nth-child(1) { stop-color: var(--seg-1); stop-opacity: .94; }
.wheel__grad stop:nth-child(2) { stop-color: var(--seg-2); stop-opacity: .97; }
.wheel__grad stop:nth-child(3) { stop-color: var(--seg-3); stop-opacity: .99; }

@keyframes seg-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.wheel__fill {
  stroke: rgba(255, 255, 255, .5);
  stroke-width: 1;
  transition: filter var(--t-slow) var(--ease);
}

.wheel__seg:hover .wheel__fill { filter: saturate(1.08) brightness(1.03); }

/* Fokusring: outline ist im SVG browserabhaengig, deshalb ein eigener Pfad. */
.wheel__focus {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2;
  stroke-dasharray: 3 5;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-fast) var(--ease);
}

.wheel__seg:focus-visible .wheel__focus { opacity: .9; }

/* ---------- Beschriftungen ----------------------------------------------- */

.wheel__label {
  pointer-events: none;
  opacity: 0;
}

.wheel.is-ready .wheel__label {
  animation: label-in 800ms var(--ease) forwards;
  animation-delay: calc(var(--seg-delay) + 480ms);
}

@keyframes label-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Groessen in viewBox-Einheiten (720). Sie sind so gewaehlt, dass die
   Beschriftung auch an der engsten Stelle — den beiden unteren Segmenten —
   weder ueber die Innen- noch ueber die Aussenkante des Rings laeuft. */
.wheel__kicker {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-anchor: middle;
  fill: var(--accent-on);
  fill-opacity: .88;
}

.wheel__name {
  font-family: var(--font-serif);
  font-size: 23px;
  font-weight: 400;
  letter-spacing: -.01em;
  text-anchor: middle;
  fill: var(--accent-on);
}

.wheel__glyph {
  fill: none;
  stroke: var(--accent-on);
  stroke-opacity: .7;
  stroke-width: 1.35;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- Mitte --------------------------------------------------------
   Bleibt in jedem Zustand stehen. Nur der Claim darunter reagiert:
   das Wort der aktiven Welt tritt hervor, die beiden anderen treten zurueck. */

.wheel__center { pointer-events: none; }

.wheel__disc {
  fill: var(--paper);
  transition: fill var(--t-world) var(--ease-soft);
}

.wheel__hairline {
  fill: none;
  stroke: var(--line);
  stroke-width: 1;
}

.wheel__center-group {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

.wheel.is-ready .wheel__center-group {
  animation: center-in 900ms var(--ease) forwards;
  animation-delay: 1080ms;
}

@keyframes center-in {
  from { opacity: 0; transform: scale(.9); }
  to   { opacity: 1; transform: scale(1); }
}

.wheel__me {
  font-family: var(--font-sans);
  font-size: 27px;
  font-weight: 600;
  letter-spacing: .1em;
  text-anchor: middle;
  fill: var(--ink);
}

.wheel__divider { stroke: var(--line-strong); stroke-width: 1; }

/* Der kleinste Text im Rad. Er bestimmt, wie klein das Rad ueberhaupt
   werden darf — deshalb hier nicht sparen. */
.wheel__claim {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .08em;
  text-anchor: middle;
  fill: var(--muted-soft);
}

.wheel__claim tspan { transition: fill var(--t-slow) var(--ease-soft); }
.wheel__claim tspan.is-lit { fill: var(--accent-strong); }
.wheel__claim tspan.is-dim { fill: color-mix(in srgb, var(--muted-soft) 45%, transparent); }

/* Sofortzustand bei prefers-reduced-motion: der Aufbau entfaellt, das Rad
   steht fertig da. Die Deckkraft der Segmente bleibt ausgespart — sie kommt
   aus der Interaktion und darf hier nicht festgeschrieben werden. */
.wheel.is-instant .wheel__guide,
.wheel.is-instant .wheel__seg-in,
.wheel.is-instant .wheel__label,
.wheel.is-instant .wheel__center-group {
  animation: none !important;
}

.wheel.is-instant .wheel__guide { stroke-dashoffset: 0 !important; }

.wheel.is-instant .wheel__seg-in,
.wheel.is-instant .wheel__label { opacity: 1; }

.wheel.is-instant .wheel__center-group { opacity: 1; transform: none; }


/* ==========================================================================
   5 · Mobile Weltenauswahl
   Kein verkleinertes Desktop-Rad. Drei grosse Flaechen, die sich oeffnen.
   ========================================================================== */

.mworlds { margin-top: clamp(2rem, 1rem + 4vw, 3rem); }

.mworld {
  border-top: 1px solid var(--line);
}
.mworld:last-child { border-bottom: 1px solid var(--line); }

.mworld__head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  padding: clamp(1.25rem, 1rem + 1.6vw, 1.9rem) 0;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
}

.mworld__mark {
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--line-strong);
  transition: box-shadow var(--t-base) var(--ease),
              background-color var(--t-base) var(--ease);
}

.mworld.is-open .mworld__mark {
  background: var(--accent-wash);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.mworld__mark svg { width: 1.2rem; height: 1.2rem; }
.mworld__mark path { fill: none; stroke: var(--accent-strong); stroke-width: 1.4;
                     stroke-linecap: round; stroke-linejoin: round; }

.mworld__titles { flex: 1 1 auto; min-width: 0; }

.mworld__kicker {
  display: block;
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--muted);
}

.mworld__name {
  display: block;
  margin-top: .15em;
  font-family: var(--font-serif);
  font-size: clamp(1.35rem, 1.1rem + 1.2vw, 1.75rem);
  letter-spacing: -.015em;
  color: var(--ink);
}

.mworld__plus {
  flex: none;
  position: relative;
  width: 1.1rem;
  height: 1.1rem;
}

.mworld__plus::before,
.mworld__plus::after {
  content: '';
  position: absolute;
  inset: 50% 0 auto 0;
  height: 1px;
  background: var(--muted);
  transition: transform var(--t-slow) var(--ease),
              background-color var(--t-base) var(--ease);
}
.mworld__plus::after { transform: rotate(90deg); }
.mworld.is-open .mworld__plus::before { background: var(--accent-strong); }
.mworld.is-open .mworld__plus::after  { transform: rotate(0deg); background: var(--accent-strong); }

/* Weiches Aufklappen ohne feste Hoehen. */
.mworld__wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--t-slow) var(--ease);
}
.mworld.is-open .mworld__wrap { grid-template-rows: 1fr; }

.mworld__body { overflow: hidden; min-height: 0; }

.mworld__inner {
  padding: 0 0 clamp(1.5rem, 1rem + 2vw, 2.25rem) calc(2.25rem + var(--sp-sm));
  /* Auf schmalen Geräten weicht die Einrückung der Lesbarkeit: sonst
     bricht der Button in zwei Zeilen. */
  opacity: 0;
  transform: translate3d(0, 10px, 0);
  transition: opacity var(--t-slow) var(--ease) 60ms,
              transform var(--t-slow) var(--ease) 60ms;
}
.mworld.is-open .mworld__inner { opacity: 1; transform: none; }

@media (max-width: 520px) {
  .mworld__inner { padding-left: 0; }
}

.mworld__question {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  color: var(--muted);
}

.mworld__answer {
  margin-top: .1em;
  font-family: var(--font-serif);
  font-size: clamp(2rem, 1.4rem + 3.4vw, 2.75rem);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: var(--ls-display);
  color: var(--accent-strong);
}

.mworld__text {
  margin-top: var(--sp-sm);
  color: var(--ink);
  max-width: 34ch;
}

.mworld__cta { margin-top: var(--sp-md); }


/* ---------- Umschaltung Desktop / Mobil ---------------------------------- */

.only-desktop { display: none; }
.only-mobile  { display: block; }

@media (min-width: 1000px) {
  .only-desktop { display: block; }
  .only-mobile  { display: none; }
}

/* Unterhalb von 1000px ist das Rad reines Sinnbild: sichtbar, aber ohne
   Bedienfunktion. Die Bedienung uebernehmen die drei Flaechen darunter. */
@media (max-width: 999px) {
  .wheel {
    width: min(100%, 22rem);
    pointer-events: none;
  }

  /* Auf Tablets darf das Sinnbild größer stehen — sonst verliert es sich
     in der Fläche. */
  @media (min-width: 620px) {
    .wheel { width: min(100%, 30rem); }
  }
  .hero { min-height: auto; }
  .hero__inner { gap: clamp(1.5rem, 1rem + 3vw, 2.5rem); }

  /* Die Weltentexte des Hero werden hier nie gezeigt — die drei Flaechen
     uebernehmen. Sie muessen deshalb auch keine Hoehe mehr reservieren. */
  .hero__layer:not([data-layer='idle']) { display: none; }
}


/* ==========================================================================
   6 · Drei Fragen · Drei Wege — mit der verbindenden Linie
   ========================================================================== */

/* --rail-x sitzt auf der Sektion, damit sowohl die Wegzeilen als auch der
   Auslauf der Linie im Schlussbild auf derselben Achse stehen. */
.ways {
  position: relative;
  --rail-x: 1.125rem;
  --way-pad: 3.75rem;
  --way-py: clamp(2.5rem, 1.6rem + 4vw, 4.5rem);
}

@media (min-width: 900px) {
  .ways {
    --rail-x: 12rem;
    --way-pad: 16.5rem;
  }
}

.ways__head {
  margin-bottom: clamp(3rem, 2rem + 4vw, 5.5rem);
}

.ways__head .line:last-child { color: var(--muted); }

.ways__list { position: relative; }

/* ---------- Die Linie ----------------------------------------------------- */

.thread {
  position: absolute;
  left: var(--rail-x);
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--line);
  pointer-events: none;
}

.thread__fill {
  position: absolute;
  inset: 0 0 auto 0;
  width: 1px;
  height: calc(var(--thread, 0) * 100%);
  background: linear-gradient(to bottom,
    var(--accent-strong), color-mix(in srgb, var(--accent-strong) 35%, transparent));
  transition: height 120ms linear;
}

html.no-js .thread__fill { height: 100%; }

/* ---------- Eine Wegzeile ------------------------------------------------- */

.way {
  position: relative;
  padding: var(--way-py) 0 var(--way-py) var(--way-pad);
}

.way + .way { border-top: 1px solid var(--line); }

.way__node {
  position: absolute;
  left: var(--rail-x);
  top: calc(var(--way-py) + .55em);
  width: 9px;
  height: 9px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  transition: box-shadow var(--t-slow) var(--ease),
              background-color var(--t-slow) var(--ease),
              transform var(--t-slow) var(--ease);
}

.way.is-lit .way__node {
  background: var(--accent-strong);
  box-shadow: inset 0 0 0 1px var(--accent-strong),
              0 0 0 5px var(--accent-wash);
  transform: scale(1.15);
}

.way__word {
  position: absolute;
  left: 0;
  top: calc(var(--way-py) + .1em);
  width: calc(var(--rail-x) - 2.25rem);
  text-align: right;
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--muted-soft);
  transition: color var(--t-slow) var(--ease);
}

.way.is-lit .way__word { color: var(--accent-strong); }

@media (max-width: 899px) {
  .way__word { display: none; }
}

.way__brand {
  color: var(--accent-strong);
  transition: color var(--t-slow) var(--ease-soft);
}

.way__title {
  margin-top: .35em;
  font-family: var(--font-serif);
  font-size: var(--fs-h1);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: var(--ls-display);
}

.way__question {
  margin-top: clamp(1rem, .7rem + 1.2vw, 1.6rem);
  font-size: var(--fs-lead);
  line-height: var(--lh-snug);
  color: var(--ink);
  max-width: 30ch;
}

.way__tags {
  margin-top: clamp(1.1rem, .8rem + 1.2vw, 1.7rem);
  display: flex;
  flex-wrap: wrap;
  gap: .5rem .35rem;
  list-style: none;
  padding: 0;
}

.way__tags li {
  font-size: var(--fs-micro);
  color: var(--muted);
  padding: .35em .85em;
  border-radius: var(--r-pill);
  box-shadow: inset 0 0 0 1px var(--line);
}

.way__cta { margin-top: clamp(1.4rem, 1rem + 1.4vw, 2rem); }


/* ---------- Der Moment ---------------------------------------------------- */

.climax {
  position: relative;
  padding: clamp(4rem, 2.5rem + 6vw, 8rem) 0 0;
  text-align: center;
}

.climax__stem {
  position: absolute;
  left: var(--rail-x, 1.125rem);
  top: 0;
  width: 1px;
  height: clamp(2.5rem, 1.5rem + 4vw, 5rem);
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--accent-strong) 35%, transparent), transparent);
}

/* Drei Zeilen, eine Reise. Jede Zeile eine Stufe — die letzte trägt die
   Farbe der Welt, in der sie endet. */
.climax__line {
  font-family: var(--font-serif);
  font-size: clamp(1.75rem, 1.2rem + 2.4vw, 3rem);
  font-weight: 400;
  line-height: 1.16;
  letter-spacing: var(--ls-display);
  text-wrap: balance;
}

.climax__line .line { display: block; }
.climax__line .line:nth-child(2) { color: var(--muted); }
.climax__line .line:nth-child(3) { color: var(--muted-soft); }

.climax__note {
  margin: clamp(1.2rem, .8rem + 1.4vw, 1.8rem) auto 0;
  max-width: 46ch;
  color: var(--muted);
  font-size: var(--fs-lead);
  line-height: var(--lh-snug);
}


/* ==========================================================================
   7 · Udo
   ========================================================================== */

.udo {
  background: var(--paper-warm);
  border-block: 1px solid var(--line);
  transition: background-color var(--t-world) var(--ease-soft);
}

.udo__grid {
  display: grid;
  gap: clamp(2.5rem, 1.5rem + 5vw, 5rem);
  align-items: center;
}

@media (min-width: 900px) {
  .udo__grid { grid-template-columns: minmax(0, .82fr) minmax(0, 1fr); }
}

.udo__figure {
  position: relative;
  margin: 0;
}

.udo__figure picture { display: block; }

.udo__figure img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: var(--focal, 50% 30%);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-soft);
}

/* Auf dem Telefon steht das Bild allein in der Spalte. Ein breiterer
   Zuschnitt liest sich dort besser als ein hohes Hochformat. */
@media (max-width: 899px) {
  .udo__figure img { aspect-ratio: 4 / 3; }
}

/* Ein feiner versetzter Rahmen statt eines Schattens mit Attitüde. */
.udo__figure::after {
  content: '';
  position: absolute;
  inset: 1.1rem -1.1rem -1.1rem 1.1rem;
  border-radius: var(--r-lg);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  z-index: 0;
}

.udo__intro {
  margin-top: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem);
  color: var(--muted);
}

/* Die zwei Fragen, aus denen alles entstanden ist. Als Block zusammen,
   nicht als normaler Fließtext. */
.udo__questions {
  margin-top: var(--sp-md);
  padding-left: clamp(1rem, .7rem + 1vw, 1.5rem);
  border-left: 2px solid var(--accent-second);
  display: grid;
  gap: .6rem;
  max-width: 44ch;
}

.udo__questions p {
  font-family: var(--font-serif);
  font-size: var(--fs-h3);
  line-height: 1.3;
  color: var(--ink);
}

/* Der Schlusssatz. Groß, allein, ohne Rahmen — er ist die Pointe der
   ganzen Seite und braucht keine Verzierung, nur Platz. */
.udo__pull {
  margin-top: clamp(2rem, 1.5rem + 2.4vw, 3.25rem);
  font-family: var(--font-serif);
  font-size: clamp(1.75rem, 1.15rem + 2.6vw, 3rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: var(--ls-display);
  color: var(--ink);
  max-width: 20ch;
  text-wrap: balance;
}

/* Die erste Zeile nimmt zurück, die zweite trägt die Pointe. Ohne aktive
   Welt sind Akzent und Schriftfarbe identisch — der Kontrast muss also
   aus der Helligkeit kommen, nicht aus der Farbe. */
.udo__pull .line:first-child { color: var(--muted); }
.udo__pull .line:last-child  { color: var(--ink); }

.udo__prose { margin-top: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem); }
.udo__prose p { margin-top: var(--sp-md); max-width: 52ch; color: var(--muted); }
.udo__prose p:first-child { margin-top: 0; }

.udo__cta { margin-top: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem); }


/* ==========================================================================
   8 · Kontakt und Fuss
   ========================================================================== */

.kontakt__inner { max-width: 46ch; }
.kontakt__text { margin-top: var(--sp-md); color: var(--muted); }
.kontakt__cta {
  margin-top: clamp(1.6rem, 1.2rem + 1.6vw, 2.2rem);
  display: flex;
  align-items: center;
  gap: var(--sp-md) var(--sp-lg);
  flex-wrap: wrap;
}

/* Termin als dritter Weg — abgesetzt, nicht vorgedrängt. Die feine Linie
   trennt „schreib mir" von „buch dir was", ohne eine Hierarchie zu
   behaupten. */
/* Breiter als die Textspalte daneben: Der Kalender des Anbieters braucht
   Platz fuer Monatsansicht und Zeitliste nebeneinander. Unter rund 700 px
   stapelt er beides und wird sehr hoch. */
.kontakt__booking {
  margin-top: clamp(2.5rem, 2rem + 2.5vw, 3.5rem);
  padding-top: var(--sp-lg);
  border-top: 1px solid var(--line);
  max-width: 48rem;
}

.booking__title {
  margin-top: var(--sp-sm);
  font-family: var(--font-serif);
  font-size: var(--fs-h3);
  font-weight: 400;
  letter-spacing: var(--ls-head);
}

.booking__text {
  margin-top: var(--sp-sm);
  max-width: 56ch;
  color: var(--muted);
  font-size: var(--fs-body);
}

.booking__actions {
  margin-top: var(--sp-md);
  display: flex;
  align-items: center;
  gap: var(--sp-md) var(--sp-lg);
  flex-wrap: wrap;
}

.booking__note,
.booking__status {
  margin-top: var(--sp-md);
  max-width: 56ch;
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--muted-soft);
}

/* Der Rahmen bekommt keinen Schatten und keinen Kasten — er bringt seinen
   eigenen mit. Nur die Ecken werden mitgenommen. */
.booking__frame {
  display: block;
  margin-top: var(--sp-md);
  border-radius: var(--r-lg);
  background: var(--paper);
}

.booking__escape { margin-top: var(--sp-md); font-size: var(--fs-small); }

/* Die Pfeil-Links im Terminblock sind laenger als die anderen auf der
   Seite. Gemessen bei 390 px: 15 px Ueberlauf, weil sie nicht umbrechen
   duerfen. Hier duerfen sie. */
.kontakt__booking .arrow-link {
  display: inline;
  white-space: normal;
  overflow-wrap: break-word;
}

.kontakt__booking .arrow-link .arrow { white-space: nowrap; }

.site-footer {
  background: var(--ink-deep);
  color: var(--on-dark);
  padding-block: clamp(3rem, 2rem + 4vw, 5rem);
}

.footer__grid {
  display: grid;
  gap: clamp(2rem, 1.2rem + 3vw, 3.5rem);
}

@media (min-width: 800px) {
  .footer__grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: start; }
}

.footer__mark {
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.footer__claim {
  margin-top: .5rem;
  font-family: var(--font-serif);
  font-size: var(--fs-h3);
  color: var(--on-dark);
}

.footer__note {
  margin-top: var(--sp-md);
  max-width: 52ch;
  font-size: var(--fs-small);
  line-height: 1.62;
  color: var(--on-dark-muted);
}

.footer__links {
  display: grid;
  gap: 1.35rem;
  list-style: none;
  padding: 0;
}

.footer__links li { display: grid; gap: .15rem; }

.footer__domain {
  font-size: var(--fs-small);
  letter-spacing: .04em;
  color: var(--on-dark-muted);
}

.footer__links a {
  color: var(--on-dark);
  text-decoration: none;
  display: inline-flex;
  justify-self: start;
  align-items: baseline;
  gap: .55em;
  transition: opacity var(--t-base) var(--ease);
}
.footer__links a:hover { opacity: .72; }
.footer__links .arrow { transition: transform var(--t-base) var(--ease); }
.footer__links a:hover .arrow { transform: translateX(4px); }

.footer__bottom {
  margin-top: clamp(2.5rem, 1.6rem + 3vw, 4rem);
  padding-top: var(--sp-md);
  border-top: 1px solid var(--line-dark);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-sm) var(--sp-lg);
  align-items: center;
  justify-content: space-between;
  font-size: var(--fs-small);
  color: var(--on-dark-muted);
}

.footer__legal {
  display: flex;
  gap: var(--sp-md);
  list-style: none;
  padding: 0;
  flex-wrap: wrap;
}

.footer__legal a { color: var(--on-dark-muted); text-decoration: none; }
.footer__legal a:hover { color: var(--on-dark); }

/* Auf Touchgeraeten brauchen auch die kleinen Links eine greifbare Flaeche.
   Sie wachsen nach innen, das Schriftbild bleibt unveraendert. */
@media (hover: none) {
  .site-nav a     { padding-block: .6rem; }
  .footer__links a,
  .footer__legal a { padding-block: .5rem; }
}