:root {
  /* Werte 1:1 von vorschau--parijazz.netlify.app abgegriffen (JS getComputedStyle, 13.08.) —
       Hero-Section-Hintergrund #0A1A33, Gold-Akzent #C9A96E, CTA-Button-Verlauf #1D4FCE->#1234A0,
       Cream-Sektionshintergrund #F7F4EE, Fliesstext auf Dunkel = Cream bei 65-70% Deckkraft. */
  --navy: #0a1a33;
  --navy2: #0b1e3f;
  --navy3: #0f2547;
  --gold: #c9a96e;
  --gold-soft: #e6cfa0;
  --gold-dark: #8a6a2f;
  --cta: #2459e2;
  --cta-hi: #3f74f2;
  --cta-grad1: #1d4fce;
  --cta-grad2: #1234a0;
  --cream: #f7f4ee;
  --ink: #f4eee1;
  --muted: rgba(244, 238, 225, 0.65);
  --line: rgba(201, 169, 110, 0.28);
  --serif: 'Playfair Display', Georgia, serif;
  --sans: 'Inter', system-ui, -apple-system, Segoe UI, sans-serif;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
html,
body {
  margin: 0;
  padding: 0;
}
body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--navy);
  min-height: 100vh;
  overflow-x: hidden;
  line-height: 1.55;
}
a {
  color: inherit;
}
.wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 22px;
}

/* ---------- sticky header (kein Nav = kein Ausgang) ---------- */
header.bar {
  position: sticky;
  top: 0;
  z-index: 40;
  backdrop-filter: blur(9px);
  background: rgba(6, 18, 42, 0.78);
  border-bottom: 1px solid rgba(201, 169, 110, 0.14);
  transition:
    background 0.3s,
    box-shadow 0.3s;
}
header.bar.scrolled {
  background: rgba(5, 15, 34, 0.94);
  box-shadow: 0 10px 34px -20px rgba(0, 0, 0, 0.65);
}
.bar .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}
.logo {
  display: flex;
  align-items: center;
}
.logo img {
  height: 34px;
  width: auto;
  display: block;
}
/* Radius 6px, Grossbuchstaben, Verlauf — 1:1 vom echten "KONTAKT AUFNEHMEN"-Button abgegriffen */
.btn {
  font-family: var(--sans);
  cursor: pointer;
  border: none;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  transition: 0.22s;
  border-radius: 6px;
}
.btn.primary {
  background: linear-gradient(135deg, var(--cta-grad1), var(--cta-grad2));
  color: #fff;
  padding: 16px 30px;
  font-size: 15px;
  box-shadow: 0 10px 30px -10px rgba(29, 79, 206, 0.7);
}
.btn.primary:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}
.btn.ghost {
  background: transparent;
  color: var(--gold-soft);
  border: 1px solid var(--line);
  padding: 15px 28px;
  font-size: 14px;
}
.btn.ghost:hover {
  border-color: var(--gold);
  color: var(--ink);
}
.bar .btn.primary {
  padding: 12px 22px;
  font-size: 12.5px;
}
.bar-cta-label {
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ---------- hero (zweispaltig mit echtem Foto, 13.08.) ---------- */
.hero {
  position: relative;
  padding: 96px 0 84px;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(900px 520px at 78% -8%, #12305c 0%, transparent 58%),
    radial-gradient(760px 520px at 4% 118%, #0a1a34 0%, transparent 52%),
    linear-gradient(160deg, #050f22 0%, #06122a 46%, #081733 100%);
}
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.4;
  background-image:
    linear-gradient(rgba(201, 169, 110, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201, 169, 110, 0.05) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(ellipse at center, #000 52%, transparent 92%);
}
.hero > * {
  position: relative;
  z-index: 1;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  align-items: center;
  position: relative;
  z-index: 2;
}
.kicker {
  font-size: 11px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
  margin-bottom: 20px;
}
h1 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(32px, 4.6vw, 54px);
  line-height: 1.08;
  margin: 0 0 22px;
  letter-spacing: 0.4px;
}
h1 .em {
  color: var(--gold);
  font-style: italic;
  font-weight: 600;
}
/* Die Terminseite begann bei h2 — sie hatte gar keine erste Ueberschrift (Audit 30.08.).
     Jetzt traegt die Seitenueberschrift das h1, soll aber aussehen wie eine Abschnitts-
     ueberschrift und nicht wie der Hero: dieselbe Groesse und Zentrierung wie h2. */
.book-hero h1 {
  font-size: clamp(31px, 4.3vw, 50px);
  text-align: center;
  margin: 0 auto 16px;
  max-width: 20ch;
  letter-spacing: 0;
}
.lede {
  color: var(--muted);
  font-size: clamp(15px, 1.5vw, 17px);
  font-weight: 300;
  max-width: 52ch;
  margin: 0 0 34px;
}
.cta-row {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
}
.hero-text .cta-row {
  justify-content: flex-start;
}
.microcopy {
  margin-top: 16px;
  font-size: 12.5px;
  color: var(--muted);
  font-weight: 300;
  letter-spacing: 0.02em;
}
/* 2x2-Grid statt Flex-Wrap (Chris' Korrektur 13.08.: "6+ Jahre Erfahrung" verwaiste beim Umbruch —
     jetzt liegt es garantiert neben "50+ Partner", unabhaengig von der Textspaltenbreite). */
.trust {
  display: grid;
  grid-template-columns: repeat(4, auto);
  gap: 14px 34px;
  justify-content: center;
  margin-top: 52px;
  padding-top: 30px;
  border-top: 1px solid rgba(201, 169, 110, 0.14);
}
.hero-text .trust {
  grid-template-columns: repeat(2, auto);
  justify-content: start;
}
.trust .t {
  text-align: center;
}
.hero-text .trust .t {
  text-align: left;
}
.trust .n {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 26px;
  color: var(--gold-soft);
}
.trust .l {
  font-size: 11.5px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-top: 4px;
}
.hero-text {
  max-width: 600px;
}
/* Foto bleedet bis zum Viewport-Rand und blendet weich in Navy ueber (kein Kasten-Rand),
     wie auf vorschau--parijazz.netlify.app/ — kein border-radius/border/box-shadow mehr. */
/* Zweiter Anlauf (Chris' Korrektur 13.08., zweite Runde): eine Farb-Ueberlagerung ueber dem Foto kann NIE
     perfekt zum texturierten Hero-Hintergrund (radiale Glanzlichter in .hero::before) passen — genau das war
     die verbleibende harte Kante. Jetzt keine Overlay-Farbe mehr: die Maske macht das Foto selbst links
     durchsichtig, sodass der ECHTE Hero-Hintergrund durchscheint. Keine Farbwerte, die aneinanderstossen koennen. */
.hero-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
/* Pari kleiner und weiter rechts (Chris 16.08.: "noch ein bisschen kleiner, sodass es weiter
     rechts auftaucht" — der Text lag ihr sonst leicht auf Kinn und Schulter).

     Warum das ueber die BREITE des Elements laeuft und weder ueber object-position noch ueber scale:

     1. object-position ist am Desktop wirkungslos. Die Quelle ist 1100x970, der Hero-Kasten rund
        1668x911 — also breiter als das Bild. object-fit:cover skaliert dann auf die Breite und
        beschneidet nur oben/unten; horizontal gibt es nichts zu verschieben. (Auf dem Handy wirkt
        der Wert sehr wohl, dort ist der Kasten schmaler als das Bild.)
     2. transform:scale() war der erste Versuch und falsch: es verkleinert das ELEMENT, nicht den
        Bildinhalt. Bei scale(.9) entstand oben und unten ein 43px-Spalt, sichtbar als harte Naht
        quer durch den Hero.
     3. Schmaleres Element bei voller Hoehe, rechts angedockt: cover fuellt es weiterhin
        vollstaendig (gemessen: 0px Spalt oben, 0px unten, rechtsbuendig), das Motiv wird kleiner
        und rueckt nach rechts. Genau das war gewuenscht.

     object-position steht auf 32% statt 82%, weil zwischen etwa 860 und 1200px Fensterbreite der
     Kasten schmaler wird als das Bild — dort greift der Wert wieder, und 82% haette Pari erneut
     an den linken Rand gedrueckt. */
.hero-photo img {
  width: 66%;
  height: 100%;
  margin-left: auto;
  object-fit: cover;
  object-position: 32% 28%;
  display: block;
  /* Die Maske blendet die linke Kante des Fotos weich ins Navy, damit hinter dem Text keine harte
       Bildkante steht.
       HIER LAG DER EIGENTLICHE FEHLER (Chris 16.08.: "bis das Gesicht vollstaendig zu erkennen ist
       und nicht in das Blaue reinfaellt"): Die alte Blende erreichte volle Deckkraft erst bei 90%
       der Elementbreite. Paris Gesicht sass bei rund 45%, also bei etwa 40% Deckkraft — es war
       nicht verdeckt, sondern halbtransparent, der Navy-Hintergrund schien hindurch. Sie weiter
       nach rechts zu schieben haette das allein nie geloest, weil der Verlauf mitgewandert waere.
       Jetzt ist die Blende kurz: ab 52% voll deckend. Sie erfuellt weiter ihren Zweck (keine harte
       Kante links) und laesst das Gesicht in voller Deckkraft stehen.
       Wer den Verlauf wieder verlaengert, holt den blauen Schleier zurueck. */
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0, 0, 0, 0.18) 10%,
    rgba(0, 0, 0, 0.5) 22%,
    rgba(0, 0, 0, 0.8) 33%,
    rgba(0, 0, 0, 0.95) 42%,
    #000 52%
  );
  mask-image: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0, 0, 0, 0.18) 10%,
    rgba(0, 0, 0, 0.5) 22%,
    rgba(0, 0, 0, 0.8) 33%,
    rgba(0, 0, 0, 0.95) 42%,
    #000 52%
  );
}
.hero-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(6, 15, 34, 0.3) 0%,
    transparent 18%,
    transparent 76%,
    rgba(6, 15, 34, 0.62) 100%
  );
}
@media (max-width: 860px) {
  .hero-grid {
    text-align: center;
  }
  .hero-text {
    max-width: none;
  }
  .kicker {
    margin-left: auto;
    margin-right: auto;
  }
  h1 {
    margin: 0 auto 22px;
    max-width: 16ch;
  }
  .lede {
    margin: 0 auto 34px;
  }
  .hero-text .cta-row,
  .hero-text .trust {
    justify-content: center;
  }
  .hero-text .trust .t {
    text-align: center;
  }

  /* Mobiler Hero-Einstieg, 16.08. — Chris: "dass da direkt ein Versprechen kommt und nicht nur ein Foto".
       VORHER lag das Foto als 4:5-Karte (max-width 340px) im Textfluss OBERHALB der Ueberschrift. Gemessen:
       Header 65px + Fotokarte ~580px = die Zeile "Kein Kurs. Kein Coaching." begann erst nach dem ersten
       Wischen. Wer aus der Instagram-DM kommt, sah als Erstes ein Bild ohne Aussage.
       JETZT liegt das Foto wie am Desktop als Vollflaeche HINTER dem Text (.hero > * hat z-index:1,
       .hero-grid z-index:2 — das Foto mit z-index:0 bleibt darunter). Ueberschrift, Versprechen und
       CTA stehen damit im ersten Bildschirm, und der Hero wird ~580px kuerzer. */
  .hero {
    padding: 38px 0 56px;
  }
  .hero-photo {
    position: absolute;
    inset: 0;
    width: auto;
    max-width: none;
    aspect-ratio: auto;
    border-radius: 0;
    margin: 0;
  }
  /* Bildausschnitt waagerecht: 72% zeigte den rechten Teil des Fotos — Pari steht im Bild bei
       ~47% und rutschte damit an den linken Rand, halb angeschnitten (Chris, 30.08.). 46% zentriert
       sie. Senkrecht ist der Wert wirkungslos: cover skaliert hier ueber die Hoehe, es gibt keinen
       vertikalen Ueberstand. */
  /* Desktop-Einstellungen hier ZURUECKNEHMEN: mobil soll das Foto den Hero voll ausfuellen
       (74% Breite wuerden links einen Streifen frei lassen), und der Kasten ist schmaler als das
       Bild — da beschneidet cover horizontal und object-position steuert den Ausschnitt bereits. */
  .hero-photo img {
    -webkit-mask-image: none;
    mask-image: none;
    object-position: 46% 18%;
    width: 100%;
    margin-left: 0;
    transform: none;
    transform-origin: center;
  }
  /* Schleier als EIGENE Ebene ueber dem Foto. Erster Versuch lag bei .80/.68/.74/.93 — da war Pari
       praktisch verschwunden, und damit auch der Grund, warum ein Foto ueberhaupt dort steht.
       Jetzt deutlich duenner; die Lesbarkeit des Fliesstextes uebernimmt der text-shadow unten.
       Nach unten laeuft er trotzdem dicht zu, damit die Trust-Zahlen auf ruhigem Grund stehen. */
  .hero-photo::after {
    background: linear-gradient(
      180deg,
      rgba(6, 15, 34, 0.58) 0%,
      rgba(6, 15, 34, 0.44) 32%,
      rgba(6, 15, 34, 0.56) 66%,
      rgba(6, 15, 34, 0.92) 100%
    );
  }
  /* Die Lede steht in 300er Schnitt auf 65% Deckkraft — der Schnitt ist zu duenn, um sich allein
       gegen ein Foto zu behaupten. Der Schatten kostet optisch nichts und traegt sie ueber die
       hellen Regalflaechen. */
  .hero .lede {
    text-shadow:
      0 1px 14px rgba(6, 15, 34, 0.92),
      0 0 4px rgba(6, 15, 34, 0.7);
  }
  .hero h1,
  .hero .kicker {
    text-shadow: 0 2px 18px rgba(6, 15, 34, 0.75);
  }
  .hero .microcopy,
  .hero .trust {
    text-shadow: 0 1px 12px rgba(6, 15, 34, 0.9);
  }
}

/* ---------- Partner-/Tool-Logoleiste (echte Logos, Endlos-Scroll, auf Cream statt Navy — wie vorschau--parijazz.netlify.app, 13.08.) ---------- */
.marquee-wrap {
  background: var(--cream);
  border-top: 1px solid rgba(10, 26, 51, 0.08);
  border-bottom: 1px solid rgba(10, 26, 51, 0.08);
  padding: 36px 0;
  overflow: hidden;
}
.marquee-label {
  text-align: center;
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(10, 26, 51, 0.5);
  margin-bottom: 24px;
}
.marquee {
  display: flex;
  width: max-content;
  animation: marquee-scroll 34s linear infinite;
}
.marquee:hover {
  animation-play-state: paused;
}
.mset {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-right: 16px;
}
.logo-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid rgba(10, 26, 51, 0.08);
  border-radius: 14px;
  padding: 0 26px;
  height: 64px;
  box-shadow: 0 12px 28px -20px rgba(10, 26, 51, 0.3);
  transition:
    box-shadow 0.2s ease,
    transform 0.2s ease;
}
.logo-pill:hover {
  box-shadow: 0 18px 36px -18px rgba(10, 26, 51, 0.4);
  transform: translateY(-2px);
}
.marquee img {
  height: 26px;
  width: auto;
  max-width: 108px;
  object-fit: contain;
  -webkit-user-drag: none;
  display: block;
}
@keyframes marquee-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .marquee {
    animation: none;
  }
}

/* ---------- generic section ---------- */
section {
  position: relative;
}
.sec {
  padding: 74px 0;
}
.eyebrow {
  display: flex;
  align-items: center;
  width: fit-content;
  font-size: 10.5px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
  margin: 0 auto 18px;
  padding: 8px 18px;
  border: 1px solid rgba(201, 169, 110, 0.32);
  border-radius: 999px;
  background: rgba(201, 169, 110, 0.07);
}
h2 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(31px, 4.3vw, 50px);
  text-align: center;
  margin: 0 auto 16px;
  max-width: 20ch;
  line-height: 1.1;
}
h2 .em {
  color: var(--gold);
  font-style: italic;
  font-weight: 600;
}
.sub {
  color: var(--muted);
  font-weight: 300;
  text-align: center;
  max-width: 60ch;
  margin: 0 auto 40px;
  font-size: 15.5px;
}

/* ---------- notch (angeschnittene Kartenecke, akquise.de-Anleihe) ---------- */
.notch {
  clip-path: polygon(22px 0, 100% 0, 100% 100%, 0 100%, 0 22px);
}

/* ---------- Karten-Hover (leichtes Anheben beim Hover, gehoert zum dichteren Karten-Look) ---------- */
.card,
.pain .p {
  transition:
    transform 0.28s ease,
    box-shadow 0.28s ease;
}
.card:hover,
.pain .p:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 44px -24px rgba(6, 14, 30, 0.6);
}

/* ---------- Problem-Block: gefaecherter Karten-Spread statt flachem Grid (akquise.de-Anleihe, eigene Brand-Sprache — kein Poker/Filz, 13.08.) ---------- */
.problem {
  background: linear-gradient(180deg, #081832, #0a1c39);
  border-top: 1px solid rgba(201, 169, 110, 0.14);
  border-bottom: 1px solid rgba(201, 169, 110, 0.14);
}
.pain-stage {
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
  padding: 38px 0 6px;
}
.pain-stage::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(680px, 90vw);
  height: min(680px, 90vw);
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(201, 169, 110, 0.09), transparent 72%);
  border: 1px solid rgba(201, 169, 110, 0.12);
}
.pain {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 1;
}
.pain .p {
  position: relative;
  width: 226px;
  min-height: 226px;
  margin: 0 -6px;
  padding: 30px 22px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: linear-gradient(165deg, #0e2445, #0a1a34);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 30px 54px -26px rgba(0, 0, 0, 0.62);
  transition:
    transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 0.32s ease,
    z-index 0s;
}
.pain .p::before,
.pain .p::after {
  content: attr(data-idx);
  position: absolute;
  font-family: var(--serif);
  font-size: 12.5px;
  color: var(--gold);
  opacity: 0.6;
  letter-spacing: 0.04em;
}
.pain .p::before {
  top: 14px;
  left: 16px;
}
.pain .p::after {
  bottom: 14px;
  right: 16px;
  transform: rotate(180deg);
}
.pain .p .wm {
  position: absolute;
  inset: 0;
  background: url('phoenix-gold.png?v=6f2c77f0db') center 58% / 46% no-repeat;
  opacity: 0.07;
  pointer-events: none;
}

/* ---------- Kreislauf der neun Bausteine (29.08.) ----------
     Uebernommen von Paris eigener Seite, wo er unter den vier Karten steht.
     Die Aussage ist der Kreis selbst: faellt ein Baustein aus, steht alles.
     Deshalb ein Ring und keine Liste — eine Liste haette kein Ende und keinen Anfang. */
.kreislauf {
  margin-top: 74px;
  padding-top: 56px;
  border-top: 1px solid rgba(201, 169, 110, 0.14);
}
.kreislauf h3 {
  font-family: var(--serif);
  font-weight: 700;
  text-align: center;
  margin: 0 auto;
  font-size: clamp(31px, 4.3vw, 50px);
  line-height: 1.16;
  color: var(--ink);
  max-width: 24ch;
}
.kreislauf h3 .em {
  color: var(--gold-soft);
  font-style: italic;
  display: block;
}
.kreis-buehne {
  position: relative;
  width: 100%;
  max-width: 820px;
  height: 620px;
  margin: 26px auto 0;
}
.kreis-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 376px;
  height: 376px;
  margin: -188px 0 0 -188px;
  border: 1px solid rgba(201, 169, 110, 0.34);
  border-radius: 50%;
}
/* Der Laeufer zeigt, dass es ein Kreislauf ist und keine Aufzaehlung.
     Auf Paris eigener Seite zieht er eine leuchtende Spur hinter sich her — das macht
     die Bewegungsrichtung sichtbar, ein blosser Punkt tut das nicht. Nachgebaut mit
     einem Kegelverlauf, der auf die Ringbreite maskiert wird. */
.kreis-laeufer {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 376px;
  height: 376px;
  margin: -188px 0 0 -188px;
  animation: kreisel 18s linear infinite;
}
.kreis-laeufer .spur {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    rgba(230, 207, 160, 0.95) 0deg,
    rgba(201, 169, 110, 0.55) 14deg,
    rgba(201, 169, 110, 0.18) 46deg,
    rgba(201, 169, 110, 0) 96deg,
    rgba(201, 169, 110, 0) 360deg
  );
  -webkit-mask: radial-gradient(circle closest-side, transparent 98.4%, #000 98.4%);
  mask: radial-gradient(circle closest-side, transparent 98.4%, #000 98.4%);
  transform: scaleX(-1);
}
.kreis-laeufer i {
  position: absolute;
  left: 50%;
  top: 0;
  width: 9px;
  height: 9px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: var(--gold-soft);
  box-shadow: 0 0 14px 3px rgba(201, 169, 110, 0.6);
}
@keyframes kreisel {
  to {
    transform: rotate(360deg);
  }
}
.kreis-mitte {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 290px;
  text-align: center;
  font-size: 14.5px;
  font-weight: 300;
  line-height: 1.62;
  color: var(--muted);
}
.kreis-mitte b {
  color: var(--gold-soft);
  font-weight: 400;
}
.kreis-punkt {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 170px;
  margin: -26px 0 0 -85px;
  text-align: center;
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.32;
  color: var(--ink);
  transform: rotate(var(--a)) translateY(-252px) rotate(calc(-1 * var(--a)));
  transform-origin: 85px 26px;
}
@media (prefers-reduced-motion: reduce) {
  .kreis-laeufer {
    animation: none;
  }
}
.kreis-cta {
  text-align: center;
  margin-top: 14px;
}
.kreis-cta p {
  font-family: var(--serif);
  font-weight: 700;
  color: var(--ink);
  margin: 0 auto 22px;
  font-size: clamp(22px, 2.8vw, 31px);
  line-height: 1.28;
  max-width: 27ch;
}
.kreis-cta p .em {
  color: var(--gold-soft);
  font-style: italic;
}

/* Unter 860px traegt der Kreis nicht mehr — die Beschriftungen wuerden sich
     ueberlagern. Dann Raster, und die Aussage steht als Satz darueber. */
@media (max-width: 860px) {
  .kreis-buehne {
    height: auto;
    max-width: 520px;
  }
  .kreis-ring,
  .kreis-laeufer {
    display: none;
  }
  .kreis-cta {
    margin-top: 34px;
  }
  .kreis-mitte {
    position: static;
    transform: none;
    width: auto;
    margin: 0 auto 26px;
    max-width: 44ch;
  }
  .kreis-punkt {
    position: static;
    transform: none;
    width: auto;
    margin: 0;
    padding: 15px 12px;
    font-size: 14.5px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
  }
  .kreis-raster {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 11px;
  }
}
@media (min-width: 861px) {
  .kreis-raster {
    display: contents;
  }
}
@media (max-width: 560px) {
  .kreis-raster {
    grid-template-columns: repeat(2, 1fr);
  }
}
.pain .p .t {
  position: relative;
  font-size: 14.5px;
  color: var(--ink);
  font-weight: 650;
  line-height: 1.36;
  letter-spacing: 0.1px;
}
/* Do NOT use app --ink-soft (shadow token ~12% alpha). Subcopy must stay readable on navy cards. */
.pain .p .s {
  position: relative;
  font-size: 12.5px;
  color: var(--muted);
  font-weight: 400;
  line-height: 1.5;
}
.pain .p:nth-child(1) {
  transform: rotate(-9deg) translateY(20px);
  z-index: 1;
}
.pain .p:nth-child(2) {
  transform: rotate(-3deg) translateY(-6px);
  z-index: 2;
}
.pain .p:nth-child(3) {
  transform: rotate(3deg) translateY(-6px);
  z-index: 2;
}
.pain .p:nth-child(4) {
  transform: rotate(9deg) translateY(20px);
  z-index: 1;
}
.pain .p:hover {
  transform: translateY(-16px) rotate(0deg) scale(1.05);
  z-index: 5;
  box-shadow: 0 42px 74px -28px rgba(0, 0, 0, 0.72);
}
@media (max-width: 760px) {
  .pain-stage::before {
    display: none;
  }
  .pain {
    flex-direction: column;
    gap: 14px;
  }
  .pain .p {
    width: 100%;
    max-width: 360px;
    min-height: auto;
    margin: 0;
  }
  .pain .p:nth-child(n) {
    transform: none;
  }
  .pain .p:hover {
    transform: translateY(-4px);
  }
}

/* ---------- VSL ---------- */
.vsl {
  max-width: 840px;
  margin: 0 auto;
  aspect-ratio: 16/9;
  border-radius: 16px;
  position: relative;
  border: 1px solid var(--line);
  overflow: hidden;
  box-shadow: 0 40px 90px -40px #000;
  background: linear-gradient(135deg, #0c2144, #081832);
}
.vsl video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* ---------- promise / big domino ---------- */
.domino {
  background: linear-gradient(180deg, #081832, #0a1c39);
  border-top: 1px solid rgba(201, 169, 110, 0.14);
  border-bottom: 1px solid rgba(201, 169, 110, 0.14);
}
.domino .quote {
  font-family: var(--serif);
  font-size: clamp(22px, 2.8vw, 32px);
  font-weight: 600;
  text-align: center;
  max-width: 22ch;
  margin: 0 auto;
  line-height: 1.28;
  font-style: italic;
}
.domino .quote b {
  color: var(--gold-soft);
  font-style: normal;
  font-weight: 700;
}

/* ---------- Hinweis: Laufzeit/Preis faellt erst im Call ---------- */
.pricing-note {
  text-align: center;
  color: var(--muted);
  font-size: 12px;
  font-weight: 300;
  margin-top: 18px;
}

/* ---------- proof panels ---------- */
.proof {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.card {
  background: rgba(255, 255, 255, 0.028);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 26px 22px;
  position: relative;
}
.card .num {
  font-family: var(--serif);
  font-size: 12px;
  color: var(--gold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.75;
  margin-bottom: 10px;
}
/* Minimalistische Line-Icons statt farbiger Emojis (Chris' Korrektur 13.08.) */
.card .ic {
  width: 46px;
  height: 46px;
  margin-bottom: 14px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(201, 169, 110, 0.12);
  color: var(--gold);
}
.card .ic svg {
  width: 24px;
  height: 24px;
}
.card h3 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 19px;
  margin: 0 0 8px;
}
.card p {
  color: var(--muted);
  font-size: 13.5px;
  font-weight: 300;
  margin: 0;
}
.card ul {
  margin: 12px 0 16px;
  padding-left: 17px;
}
.card li {
  color: var(--ink);
  font-size: 13px;
  margin: 5px 0;
}
.card li::marker {
  color: var(--gold);
}
.card .outcome {
  border-top: 1px solid rgba(201, 169, 110, 0.18);
  padding-top: 12px;
  font-size: 12.5px;
  color: var(--gold-soft);
}
.card .outcome b {
  font-weight: 600;
  color: var(--gold);
}

/* ---------- Cream-Band (Rhythmuswechsel wie akquise.de, Farbwert von der Live-Seite) ---------- */
.proofband {
  background: var(--cream);
  color: var(--navy);
  border-top: 1px solid rgba(10, 26, 51, 0.08);
  border-bottom: 1px solid rgba(10, 26, 51, 0.08);
}
.proofband .eyebrow {
  color: var(--gold-dark);
  border-color: rgba(138, 106, 47, 0.32);
  background: rgba(138, 106, 47, 0.07);
}
.proofband h2 {
  color: var(--navy);
}
.proofband h2 .em {
  color: var(--gold-dark);
}
.proofband .sub {
  color: rgba(10, 26, 51, 0.62);
}
.proofband .card {
  background: #fff;
  border-color: rgba(10, 26, 51, 0.1);
  box-shadow: 0 18px 44px -32px rgba(10, 26, 51, 0.35);
}
.proofband .card .num {
  color: var(--gold-dark);
}
.proofband .card .ic {
  background: rgba(138, 106, 47, 0.1);
  color: var(--gold-dark);
}
.proofband .card h3 {
  color: var(--navy);
}
.proofband .card p {
  color: rgba(10, 26, 51, 0.62);
}
.proofband .card li {
  color: var(--navy);
}
.proofband .card li::marker {
  color: var(--gold-dark);
}
.proofband .card .outcome {
  border-top-color: rgba(10, 26, 51, 0.14);
  color: #6b5226;
}
.proofband .card .outcome b {
  color: var(--gold-dark);
}

/* ---------- 9-Module-Curriculum: Sticky-Stack (Inhalt 1:1 aus module-uebersicht.pdf, akquise.de-Saeulen-Anleihe 13.08.) ---------- */
.pillarband {
  background: var(--cream);
  color: var(--navy);
}
.pillarband .eyebrow {
  color: var(--gold-dark);
  border-color: rgba(138, 106, 47, 0.32);
  background: rgba(138, 106, 47, 0.07);
}
.pillarband h2 {
  color: var(--navy);
}
.pillarband h2 .em {
  color: var(--gold-dark);
}
.pillarband .sub {
  color: rgba(10, 26, 51, 0.62);
}

/* Seitenluft fuer die Geisterkarten: .pillar-card::after liegt um 27px nach rechts versetzt,
     plus Drehung sind das ~34px. Ohne Polster ragte der Stapel darum ueber den rechten Rand —
     die Seite liess sich auf dem Handy nach rechts schieben (Chris, 30.08.). */
.pillars {
  position: relative;
  max-width: 1080px;
  margin: 52px auto 0;
  padding: 0 38px 36px;
}
.pillar {
  position: sticky;
  top: 60px;
  padding-bottom: 22px;
}
/* Kartenstapel-Optik (akquise.de-Anleihe 13.08.: deutlich groessere Karten, zwei versetzte "Geister"-Kanten
     hinter der vorderen Karte deuten permanent einen physischen Stapel an, nicht nur den Sticky-Wechsel selbst). */
.pillar-card {
  background: #fff;
  border: 1px solid rgba(10, 26, 51, 0.07);
  border-radius: 26px;
  padding: 56px 60px;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 40px;
  align-items: center;
  min-height: 440px;
  position: relative;
  box-shadow:
    0 50px 90px -36px rgba(10, 26, 51, 0.45),
    0 1px 0 rgba(10, 26, 51, 0.05);
}
.pillar-card::before,
.pillar-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 26px;
  border: 1px solid rgba(10, 26, 51, 0.06);
  z-index: -1;
}
.pillar-card::before {
  background: #fbf9f5;
  transform: translate(14px, 18px) rotate(1.1deg);
  box-shadow: 0 34px 60px -38px rgba(10, 26, 51, 0.32);
}
.pillar-card::after {
  background: #f4f0e7;
  transform: translate(27px, 33px) rotate(-1.6deg);
  z-index: -2;
}
.pillar-cta {
  background: #fff;
  border: 1px solid rgba(10, 26, 51, 0.07);
  border-radius: 26px;
  padding: 46px 60px;
  text-align: center;
  position: relative;
  box-shadow:
    0 50px 90px -36px rgba(10, 26, 51, 0.45),
    0 1px 0 rgba(10, 26, 51, 0.05);
}
.pillar-cta .line {
  font-family: var(--serif);
  font-size: clamp(21px, 2.5vw, 28px);
  color: var(--navy);
  margin: 0 auto 20px;
  max-width: 28ch;
  line-height: 1.35;
}
.pillar-cta .line em {
  color: var(--gold-dark);
  font-style: italic;
}
.pillar-cta .note {
  font-size: 12px;
  color: rgba(10, 26, 51, 0.55);
  font-weight: 300;
  margin-top: 14px;
}
.pillar-text .mnum {
  display: inline-block;
  background: rgba(201, 169, 110, 0.16);
  color: var(--gold-dark);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
  margin-bottom: 18px;
}
.pillar-text h3 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 28px;
  margin: 0 0 20px;
  line-height: 1.18;
  color: var(--navy);
}
.pillar-text h3 em {
  color: var(--gold-dark);
  font-style: italic;
  font-weight: 600;
  display: block;
  font-size: 19px;
  margin-top: 4px;
}
.pillar-text ul {
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
}
.pillar-text ul li {
  display: flex;
  gap: 10px;
  align-items: baseline;
  color: var(--navy);
  font-size: 14.5px;
  line-height: 1.55;
  margin: 9px 0;
}
/* Bullet = kleiner, konsistenter linker Fluegel statt Kartensymbolen (Chris' Korrektur 13.08.) */
.pillar-text ul li .suit {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  margin-top: 3px;
  display: inline-block;
}
.pillar-text ul li .suit img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  opacity: 0.85;
}
.pillar-text ul li b {
  font-weight: 600;
}
.pillar-text .ergebnis-tag {
  position: relative;
  display: inline-block;
  background: #fff;
  border: 1px solid rgba(10, 26, 51, 0.12);
  border-radius: 12px;
  padding: 15px 20px;
  box-shadow: 4px 5px 0 rgba(201, 169, 110, 0.32);
  transform: rotate(-0.5deg);
}
.pillar-text .ergebnis-tag .lab {
  display: block;
  font-style: italic;
  color: var(--gold-dark);
  font-size: 12px;
  margin-bottom: 4px;
}
.pillar-text .ergebnis-tag p {
  margin: 0;
  color: rgba(10, 26, 51, 0.72);
  font-size: 13.5px;
  line-height: 1.55;
}
.pillar-visual {
  display: flex;
  justify-content: center;
}
.pv-card {
  width: 230px;
  height: 306px;
  border-radius: 20px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, var(--navy2), var(--navy));
  border: 1px solid rgba(201, 169, 110, 0.4);
  box-shadow: 0 32px 60px -24px rgba(10, 26, 51, 0.55);
}
.pv-index {
  position: absolute;
  top: 17px;
  left: 17px;
  font-family: var(--serif);
  font-size: 17px;
  color: var(--gold-soft);
  line-height: 1.15;
  text-align: center;
}
.pv-index.bottom {
  top: auto;
  bottom: 17px;
  right: 17px;
  left: auto;
  transform: rotate(180deg);
}

/* ---------- Bonus-Karte: farblich abgesetzt statt weiss (akquise.de-Anleihe 13.08.) ---------- */
.pillar-card.bonus {
  background: linear-gradient(155deg, var(--navy2), var(--navy) 62%, #0c2144);
  border-color: rgba(201, 169, 110, 0.35);
  color: var(--ink);
}
.pillar-card.bonus .mnum {
  background: rgba(201, 169, 110, 0.22);
  color: var(--gold-soft);
}
.pillar-card.bonus h3 {
  color: var(--ink);
}
.pillar-card.bonus h3 em {
  color: var(--gold-soft);
}
.pillar-card.bonus .pillar-text {
  color: var(--ink);
}
.pillar-card.bonus .pillar-text ul li {
  color: var(--ink);
}
.pillar-card.bonus .pillar-text ul li b {
  color: #fff;
}
.pillar-card.bonus .ergebnis-tag {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(201, 169, 110, 0.3);
  box-shadow: 4px 5px 0 rgba(201, 169, 110, 0.22);
}
.pillar-card.bonus .ergebnis-tag .lab {
  color: var(--gold-soft);
}
.pillar-card.bonus .ergebnis-tag p {
  color: rgba(244, 238, 225, 0.82);
}

/* ---------- Phoenix-Fluganimation: echtes Logo aus 3 Ebenen (Chris' Vorgabe 13.08., Assets von der Live-Seite) —
     jede Stack-Karte zeigt eine feste Fluegel-Pose; da beim Scrollen eine Karte die naechste ablöst, wirkt der Wechsel
     Ruhepose/leicht-gesenkt wie ein sanfter Fluegelschlag im Flug, ganz ohne Keyframe-Animation. ---------- */
.phoenix {
  position: relative;
  width: 148px;
  height: 149px;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.35));
}
.phoenix img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  -webkit-user-drag: none;
}
/* Drehpunkt sitzt genau auf der Fluegelwurzel (Bildpunkt 268/324 bzw. 373/324 von 642x648).
     Die drei Bilder wurden am 29.08. neu aufgeteilt: vorher steckten die Fluegelwurzeln als
     Rechtecke im Koerper und blieben beim Drehen stehen — es sah aus, als kapsle sich ein
     Stueck ab. Jetzt traegt jeder Fluegel seine Wurzel selbst. */
.phoenix .wing-l {
  transform-origin: 41.74% 50%;
}
.phoenix .wing-r {
  transform-origin: 58.1% 50%;
}
/* Koerper vor die Fluegel, damit die gerade Schnittkante am Ansatz verdeckt bleibt. */
.phoenix .p-body {
  z-index: 2;
}
.phoenix .p-wing {
  z-index: 1;
}
/* Drei Fluegel-Phasen im Kreislauf (Chris' zweite Korrektur 13.08.: die 2-Phasen-Version war "kaum zu erkennen".
     Jetzt wieder oben/mitte/unten mit klar sichtbarem Ausschlag — "oben" bewusst moderater als die allererste
     ±48°-Version, damit der Kopf frei bleibt; "mitte" ist die unrotierte Originalkunst (bereits die volle,
     legitime Spreizpose lt. Logo); "unten" schwingt über die Horizontale hinaus deutlich nach unten ab.) */
/* Die Fluegel standen je nach Modulposition unterschiedlich (34deg, 0deg, 80deg) —
     bei jedem dritten Modul klappten sie fast senkrecht nach unten. Pari will sie
     ueberall nach oben und in der urspruenglichen Form, so wie im Logo. Also
     keine Drehung mehr und kein versetzter Koerper: der Phoenix bleibt der Phoenix. */
.pillar .phoenix .p-body {
  transform: none;
}
.pillar .phoenix .wing-l,
.pillar .phoenix .wing-r {
  transform: none;
}
@media (max-width: 760px) {
  .pillars {
    padding: 0 20px 8px;
  } /* mobil sind die Geisterkarten nur 13px versetzt */
  .pillar {
    position: static;
    padding-bottom: 34px;
  }
  .pillar-card {
    grid-template-columns: 1fr;
    padding: 32px 26px;
    min-height: auto;
  }
  .pillar-cta {
    padding: 32px 24px;
  }
  .pillar-card::before {
    transform: translate(7px, 9px) rotate(1deg);
  }
  .pillar-card::after {
    transform: translate(13px, 16px) rotate(-1.4deg);
  }
  .pillar-text h3 {
    font-size: 24px;
  }
  .pillar-visual {
    order: -1;
  }
  .pv-card {
    width: 150px;
    height: 200px;
  }
  .phoenix {
    width: 98px;
    height: 99px;
  }
  /* Karten liegen leicht schraeg uebereinander, wie ein hingeworfener Stapel, statt gerade
       untereinander (Chris' Vorgabe 13.08.) — abwechselnd links/rechts gekippt.
       WICHTIG: die Rotation muss auf .pillar sitzen, NICHT auf .pillar-card — ein transform auf
       .pillar-card selbst erzeugt dort einen eigenen Stacking-Context, der die dahinterliegenden
       ::before/::after-"Geisterkarten" faelschlich VOR die eigentliche Kartenfarbe zieht (bei der
       Bonus-Karte z. B. cremefarben ueber Navy — Text dann unlesbar). Auf .pillar rotiert, bleibt
       .pillar-card selbst unangetastet und der Geister-Effekt funktioniert wie am Desktop. */
  .pillar {
    transition: transform 0.25s ease;
  }
  .pillar:nth-child(odd) {
    transform: rotate(-3.6deg);
  }
  .pillar:nth-child(even) {
    transform: rotate(3.6deg);
  }
}

/* ---------- comparison: zwei schraeg ueberlappende Duell-Karten (akquise.de-Anleihe 13.08.) ---------- */
.duel {
  position: relative;
  max-width: 860px;
  margin: 56px auto 28px;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.duel .side {
  border-radius: 18px;
  padding: 28px 30px;
  position: relative;
  box-shadow: 0 34px 64px -30px rgba(0, 0, 0, 0.6);
}
.duel .side.bad {
  background: linear-gradient(160deg, #13223f, #0a1730);
  border: 1px solid var(--line);
  transform: rotate(-2deg) translateX(16px);
  z-index: 1;
}
.duel .side.good {
  background: linear-gradient(160deg, #12305c, #0c2144);
  border: 1px solid var(--gold);
  transform: rotate(1.3deg) translateX(-16px);
  z-index: 2;
}
.duel .side-head {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 16px;
}
.duel .side.bad .side-head {
  color: #e79a9a;
}
.duel .side.good .side-head {
  color: var(--gold-soft);
}
.duel .side ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.duel .side li {
  font-size: 13.5px;
  padding: 10px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.duel .side li:first-child {
  border-top: none;
}
.duel .side.bad li {
  color: var(--muted);
}
.duel .side.bad li::before {
  content: '✕ ';
  color: #e79a9a;
  opacity: 0.85;
}
.duel .side.good li {
  color: var(--ink);
}
.duel .side.good li::before {
  content: '✓ ';
  color: var(--gold);
}
@media (max-width: 760px) {
  .duel {
    grid-template-columns: 1fr;
    gap: 22px;
    margin-top: 36px;
  }
  .duel .side.bad,
  .duel .side.good {
    transform: none;
  }
}

/* ---------- fuer wen / nicht fuer wen (echtes Zitat aus videos/fuer-wen-das-nicht-ist, 13.08.) ---------- */
.fitcheck {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  max-width: 900px;
  margin: 0 auto;
}
.fit {
  border-radius: 16px;
  padding: 30px 30px;
}
.fit h3 {
  font-family: var(--serif);
  font-size: 18px;
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.fit ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.fit li {
  font-size: 13.5px;
  line-height: 1.55;
  padding: 8px 0;
  display: flex;
  gap: 10px;
  align-items: baseline;
}
.fit.yes {
  background: rgba(201, 169, 110, 0.07);
  border: 1px solid var(--line);
}
.fit.yes h3::before {
  content: '✓';
  color: var(--gold);
  font-size: 15px;
}
.fit.yes li::before {
  content: '—';
  color: var(--gold);
  flex: 0 0 auto;
}
.fit.yes li {
  color: var(--ink);
}
.fit.no {
  background: rgba(180, 80, 80, 0.06);
  border: 1px solid rgba(180, 80, 80, 0.28);
}
.fit.no h3::before {
  content: '✕';
  color: #e79a9a;
  font-size: 14px;
}
.fit.no li::before {
  content: '—';
  color: #e79a9a;
  flex: 0 0 auto;
}
.fit.no li {
  color: var(--muted);
}
@media (max-width: 760px) {
  .fitcheck {
    grid-template-columns: 1fr;
  }
}

/* ---------- ueber pari (Fakten aus Reels/brand-brain/positioning.md, keine Erfindung, 13.08.) ---------- */
/* ---------- Bio: Foto neben Text, Phoenix-Rosetten in den Kartenecken (akquise.de-Anleihe: Tim-Krasenbrink-Bio mit
     schwebendem Foto + Logo-Badges in genoppten Ecken, 13.08.) ---------- */
.bio-wrap {
  display: grid;
  grid-template-columns: 0.86fr 1.14fr;
  gap: 54px;
  align-items: center;
  max-width: 980px;
  margin: 0 auto;
}
.bio-photo {
  position: relative;
  aspect-ratio: 4/5;
  overflow: hidden;
  clip-path: polygon(
    30px 0,
    100% 0,
    100% calc(100% - 30px),
    calc(100% - 30px) 100%,
    0 100%,
    0 30px
  );
  box-shadow: 0 44px 90px -32px rgba(0, 0, 0, 0.6);
}
/* etwas ueberskaliert, damit die Schwebe-Animation kein Loch am Rand aufreisst */
.bio-photo-img {
  width: 100%;
  height: 116%;
  margin-top: -8%;
  object-fit: cover;
  display: block;
}
.bio-photo-badge {
  position: absolute;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--navy2);
  border: 1px solid var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 22px -6px rgba(0, 0, 0, 0.55);
  z-index: 2;
}
.bio-photo-badge img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}
.bio-photo-badge.tl {
  top: -4px;
  left: -4px;
}
.bio-photo-badge.br {
  bottom: -4px;
  right: -4px;
}
.bio {
  max-width: none;
  margin: 0;
}
.bio p {
  color: var(--ink);
  font-size: 14.5px;
  font-weight: 300;
  line-height: 1.75;
  margin: 0 0 16px;
}
.bio p:last-child {
  margin-bottom: 0;
}
.bio .signoff {
  font-family: var(--serif);
  font-style: italic;
  color: var(--gold-soft);
  font-size: 16px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(201, 169, 110, 0.18);
}
@media (max-width: 760px) {
  .bio-wrap {
    grid-template-columns: 1fr;
    gap: 34px;
  }
  .bio-photo {
    max-width: 300px;
    margin: 0 auto;
  }
}

/* ---------- faq ---------- */
.faq {
  max-width: 760px;
  margin: 0 auto;
}
.faq details {
  border-bottom: 1px solid rgba(201, 169, 110, 0.16);
  padding: 18px 4px;
}
.faq details:first-of-type {
  border-top: 1px solid rgba(201, 169, 110, 0.16);
}
.faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary .chev {
  color: var(--gold);
  font-size: 19px;
  font-weight: 400;
  transition: transform 0.25s ease;
  flex: 0 0 auto;
}
.faq details[open] summary .chev {
  transform: rotate(45deg);
}
.faq .a {
  color: var(--muted);
  font-size: 13.5px;
  font-weight: 300;
  line-height: 1.65;
  margin: 12px 0 2px;
  max-width: 62ch;
}

/* ---------- Termin + Kalender (1:1 pari-jazz-vorschau.netlify.app/termin) ---------- */
.book {
  background: linear-gradient(180deg, #0a1c39, #06122a);
}
.calendly-inline-widget {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--line);
}
.pari-termin-root #calWidget {
  color-scheme: normal;
}

/* Calendly rendert das eingefärbte Inline-Widget über die vollständige Inline-Adresse. */

/* Buchungsbereich auf dem Handy: der Kalender bekommt die volle Breite eines
     360er-Displays (Terminseite, Direkt-Einbettung). */
@media (max-width: 760px) {
  .book-actions {
    padding: 18px 16px 4px;
  }
  .calendly-inline-widget {
    min-width: 0 !important;
  }
}
.book-actions {
  padding: 20px 30px 4px;
  text-align: center;
}
.consent {
  font-size: 11.5px;
  color: var(--muted);
  font-weight: 300;
  margin-top: 14px;
}

/* ---------- CTA-Baender im Seitenverlauf (16.08.)
     Gemessen an der Fassung vom 13.08.: zwischen dem CTA bei 3.316px und dem naechsten bei 17.895px
     lagen mobil 14.579px = 21 Bildschirme ohne Buchungsmoeglichkeit — genau die Strecke, auf der jemand
     ueberzeugt wird (Beweis, 9 Module, Vergleich, Fuer-wen, Bio, FAQ).
     Vorbild akquise.de, dort nachgemessen: 8 CTAs auf 14.460px, groesster Abstand 4.891px, immer derselbe
     Wortlaut, immer dasselbe Ziel. Kein Kasten, keine Extra-Farbe — nur Luft, eine Zeile, ein Knopf. ---------- */
.cta-band {
  text-align: center;
  padding: 6px 0 4px;
}
/* Dieselbe Groesse wie .kreis-cta p — es sind vier gleichrangige Zeilen im Verlauf, und drei
     davon liefen auf clamp(17,2.2vw,21), die vierte auf clamp(22,2.8vw,31). Am Desktop 21 gegen
     31px (Chris, 31.08.). Aendert man eine, muss die andere mit. */
.cta-band .line {
  font-family: var(--serif);
  font-size: clamp(22px, 2.8vw, 31px);
  color: var(--ink);
  margin: 0 auto 18px;
  max-width: 26ch;
  line-height: 1.35;
}
.cta-band .line em {
  color: var(--gold);
  font-style: italic;
}
.cta-band .note {
  font-size: 12px;
  color: var(--muted);
  font-weight: 300;
  margin-top: 13px;
}
/* auf den cremefarbenen Abschnitten (.proofband, .pillarband) muss die Zeile dunkel stehen */
.cta-band.on-cream .line {
  color: var(--navy);
}
.cta-band.on-cream .line em {
  color: var(--gold-dark);
}
.cta-band.on-cream .note {
  color: rgba(10, 26, 51, 0.55);
}

/* ---------- Sticky-CTA-Leiste, nur Handy (16.08.)
     akquise.de hat KEINE — dort loest Wiederholung allein das Problem. Hier zusaetzlich, weil der
     Kopf-CTA unter 760px auf display:none steht (siehe unten) und die Seite mobil 26,6 Bildschirme
     lang ist. Faehrt erst hoch, wenn der Hero-CTA aus dem Bild ist, und verschwindet wieder, sobald
     der Buchungsteil sichtbar wird — sonst konkurriert sie mit dem eigentlichen Abschluss. ---------- */
.mobile-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 16px calc(11px + env(safe-area-inset-bottom));
  background: rgba(5, 15, 34, 0.94);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(201, 169, 110, 0.22);
  box-shadow: 0 -12px 34px -22px rgba(0, 0, 0, 0.9);
  transform: translateY(115%);
  transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.mobile-cta.on {
  transform: translateY(0);
}
.mobile-cta .mc-text {
  text-align: left;
  line-height: 1.25;
  min-width: 0;
}
.mobile-cta .mc-text b {
  display: block;
  font-family: var(--serif);
  font-size: 14.5px;
  color: var(--ink);
  font-weight: 600;
}
.mobile-cta .mc-text span {
  display: block;
  font-size: 11px;
  color: var(--muted);
  font-weight: 300;
  letter-spacing: 0.02em;
}
.mobile-cta .btn.primary {
  padding: 13px 20px;
  font-size: 12.5px;
  white-space: nowrap;
  flex: 0 0 auto;
}
@media (max-width: 760px) {
  .mobile-cta {
    display: flex;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mobile-cta {
    transition: none;
  }
}

/* ---------- final cta ---------- */
.final {
  text-align: center;
  padding: 86px 0;
}
.final h2 {
  max-width: 24ch;
}

/* ---------- footer ---------- */
footer {
  border-top: 1px solid rgba(201, 169, 110, 0.14);
  background: #050f22;
}
footer .wrap {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  padding: 30px 22px;
  font-size: 12.5px;
  color: var(--muted);
}
footer a {
  text-decoration: none;
  color: var(--muted);
  margin-left: 16px;
}
footer a:hover {
  color: var(--gold-soft);
}
.ft .wrap {
  flex-direction: column;
  gap: 0;
  padding: 44px 22px 26px;
}
.ft-main {
  display: grid;
  grid-template-columns: 1.05fr 1fr 0.8fr;
  gap: 36px;
  align-items: start;
  padding-bottom: 30px;
}
.ft-persona {
  display: flex;
  align-items: center;
  gap: 16px;
}
.ft-portrait {
  width: 74px;
  height: 74px;
  flex: 0 0 74px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(201, 169, 110, 0.42);
  box-shadow: 0 0 0 5px rgba(201, 169, 110, 0.08);
}
.ft-name {
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 3px;
}
.ft-name em {
  color: var(--gold-soft);
  font-style: italic;
  font-weight: 600;
}
.ft-rolle {
  margin: 0 0 6px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.45;
}
.ft-zahlen {
  margin: 0;
  font-size: 11.5px;
  color: rgba(244, 238, 225, 0.45);
  letter-spacing: 0.01em;
}
.ft-zitat {
  margin: 0;
  padding: 0 0 0 16px;
  border-left: 1px solid var(--line);
  font-family: var(--serif);
  font-style: italic;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--gold-soft);
  max-width: 34ch;
}
.ft-spalten {
  display: flex;
  gap: 40px;
  justify-content: flex-end;
}
.ft-spalte {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.ft-kopf {
  font-family: var(--serif);
  font-style: italic;
  font-size: 13px;
  color: var(--gold-soft);
  margin-bottom: 2px;
}
.ft-spalte a {
  margin-left: 0;
  font-size: 13px;
}
.ft-unten {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  border-top: 1px solid rgba(201, 169, 110, 0.14);
  padding-top: 18px;
  font-size: 12.5px;
}
.ft-recht a:first-child {
  margin-left: 0;
}
@media (max-width: 900px) {
  .ft-main {
    grid-template-columns: 1fr;
    gap: 26px;
  }
  .ft-zitat {
    border-left: none;
    padding-left: 0;
    max-width: none;
  }
  .ft-spalten {
    justify-content: flex-start;
    gap: 48px;
  }
}

@media (max-width: 760px) {
  .proof {
    grid-template-columns: 1fr;
  }
  .bar .btn.primary {
    display: none;
  }
}

/* Vergleich: Schlusszeile (Paris Verkaufszeile, 28.08.2026) */
.duel-claim {
  max-width: 760px;
  margin: 34px auto 0;
  text-align: center;
  font-family: var(--serif);
  font-size: clamp(17px, 2.1vw, 23px);
  font-weight: 600;
  line-height: 1.45;
  color: var(--muted);
}
.duel-claim b {
  color: var(--gold-soft);
  font-weight: 700;
}

/* Acht Saeulen (28.08.2026) — Cremeflaeche wie proofband, damit der Block
     zwischen dem dunklen Vergleich und "Fuer wen" als eigene Station liest. */
.saeulenband {
  background: var(--cream);
  color: var(--navy);
  border-top: 1px solid rgba(10, 26, 51, 0.08);
  border-bottom: 1px solid rgba(10, 26, 51, 0.08);
}
.saeulenband .eyebrow {
  color: var(--gold-dark);
  border-color: rgba(138, 106, 47, 0.32);
  background: rgba(138, 106, 47, 0.07);
}
.saeulenband h2 {
  color: var(--navy);
}
.saeulenband h2 .em {
  color: var(--gold-dark);
}
.saeulenband .sub {
  color: rgba(10, 26, 51, 0.66);
}
.saeulen {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 38px;
}
.saeule {
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(10, 26, 51, 0.1);
  border-radius: 14px;
  padding: 22px 20px;
  transition:
    transform 0.28s ease,
    box-shadow 0.28s ease;
}
.saeule:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 44px -26px rgba(10, 26, 51, 0.42);
}
.saeule .ic {
  width: 42px;
  height: 42px;
  margin-bottom: 13px;
  border-radius: 12px;
  color: var(--gold-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(138, 106, 47, 0.09);
  border: 1px solid rgba(138, 106, 47, 0.22);
}
.saeule .ic svg {
  width: 22px;
  height: 22px;
}
.saeule h3 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 17px;
  margin: 0 0 7px;
  color: var(--navy);
}
.saeule p {
  margin: 0;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.55;
  color: rgba(10, 26, 51, 0.68);
}
@media (max-width: 980px) {
  .saeulen {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 560px) {
  .saeulen {
    grid-template-columns: 1fr;
  }
}

/* ---------- Kundenstimmen (29.08.) ----------
     Zwoelf echte Stimmen unterschiedlicher Laenge. Ein Raster mit fester Spaltenhoehe
     wuerde entweder die kurzen aufblasen oder die langen abschneiden — deshalb
     CSS-Spalten (Mauerwerk). Die langen Texte stehen vollstaendig da, nur eingeklappt:
     gekuerzt wird nichts, es sind fremde Worte. */
.stimmenband {
  background: linear-gradient(180deg, var(--navy) 0%, var(--navy2) 100%);
}
.stimmen {
  columns: 3;
  column-gap: 18px;
  margin-top: 40px;
}
.stimme {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 24px 23px 20px;
  margin: 0 0 18px;
  position: relative;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease;
}
.stimme:hover {
  transform: translateY(-4px);
  border-color: rgba(201, 169, 110, 0.45);
  box-shadow: 0 22px 48px -28px rgba(0, 0, 0, 0.75);
}
.stimme::before {
  content: '\201C';
  position: absolute;
  top: 6px;
  right: 16px;
  font-family: var(--serif);
  font-size: 52px;
  line-height: 1;
  color: rgba(201, 169, 110, 0.2);
}
.stimme .txt {
  margin: 0;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.68;
  color: var(--muted);
}
.stimme .txt + .txt {
  margin-top: 11px;
}
.stimme details {
  margin-top: 11px;
}
.stimme details .txt {
  margin-top: 11px;
}
.stimme summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--gold-soft);
  letter-spacing: 0.01em;
}
.stimme summary::-webkit-details-marker {
  display: none;
}
.stimme summary::after {
  content: '\203A';
  transform: rotate(90deg);
  transition: transform 0.2s ease;
  font-size: 15px;
  line-height: 1;
}
.stimme details[open] summary::after {
  transform: rotate(-90deg);
}
.stimme details[open] summary span::after {
  content: ' schliessen';
}
.stimme summary:hover {
  color: var(--gold);
}
.stimme .wer {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  padding-top: 15px;
  border-top: 1px solid rgba(201, 169, 110, 0.16);
}
/* Monogramm statt Platzhalterbild: die Fotofreigaben liegen vor, die Fotos selbst noch nicht.
     Ein leerer Bildrahmen sieht nach Fehler aus, ein Monogramm nach Absicht. */
.stimme .mono {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 14px;
  color: var(--gold-soft);
  background: rgba(201, 169, 110, 0.12);
  border: 1px solid rgba(201, 169, 110, 0.3);
}
.stimme .name {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 14.5px;
  color: var(--ink);
  line-height: 1.3;
}
@media (max-width: 980px) {
  .stimmen {
    columns: 2;
  }
}
@media (max-width: 620px) {
  .stimmen {
    columns: 1;
  }
}

/* [hidden] muss gegen display-Angaben gewinnen. .btn setzt inline-flex und hat damit
     dieselbe Gewichtung wie die Vorgabe von [hidden] — der Knopf blieb sichtbar,
     obwohl das Attribut gesetzt war (gefunden 28.08.2026 am Tor unter 5.000 EUR). */
[hidden] {
  display: none !important;
}

/* ---------- Nächste Schritte ---------- */
.schritteband {
  background: var(--cream);
  color: var(--navy);
  border-top: 1px solid rgba(10, 26, 51, 0.08);
  border-bottom: 1px solid rgba(10, 26, 51, 0.08);
}
.schritteband .eyebrow {
  color: var(--gold-dark);
  border-color: rgba(138, 106, 47, 0.32);
  background: rgba(138, 106, 47, 0.07);
}
.schritteband h2 {
  color: var(--navy);
}
.schritteband h2 .em {
  color: var(--gold-dark);
}
.schritteband .sub {
  color: rgba(10, 26, 51, 0.66);
}

.schritte {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 40px;
}
.sx-card {
  background: #fff;
  border: 1px solid rgba(10, 26, 51, 0.1);
  border-radius: 20px;
  padding: 24px 22px 30px;
  text-align: center;
  box-shadow: 0 26px 56px -36px rgba(10, 26, 51, 0.48);
}
.sx-panel {
  height: 320px;
  border-radius: 16px;
  padding: 18px 16px;
  margin-bottom: 22px;
  background: linear-gradient(168deg, #fbfaf7, #f1eee6);
  border: 1px solid rgba(10, 26, 51, 0.07);
  display: flex;
  overflow: hidden;
}
.sx-pill {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--gold-dark);
  background: rgba(138, 106, 47, 0.08);
  border: 1px solid rgba(138, 106, 47, 0.24);
  border-radius: 999px;
  padding: 6px 15px;
  margin-bottom: 15px;
}
.sx-title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 20.5px;
  line-height: 1.3;
  margin: 0;
  color: var(--navy);
  max-width: 19ch;
  margin-left: auto;
  margin-right: auto;
}
.sx-title em {
  color: var(--gold-dark);
  font-style: italic;
  font-weight: 600;
}

.sx-graph {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.sx-logo {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid rgba(138, 106, 47, 0.3);
  display: grid;
  place-items: center;
  box-shadow: 0 0 0 6px rgba(201, 169, 110, 0.1);
}
.sx-logo img {
  width: 30px;
  height: 30px;
  object-fit: contain;
}
.sx-wire {
  width: 1px;
  background: rgba(138, 106, 47, 0.34);
}
.sx-wire.a {
  height: 18px;
}
.sx-rail {
  width: 74%;
  height: 1px;
  background: rgba(138, 106, 47, 0.34);
}
.sx-chips {
  width: 74%;
  display: flex;
  justify-content: space-between;
}
.sx-chip {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.sx-chip::before,
.sx-chip::after {
  content: '';
  position: absolute;
  left: 50%;
  width: 1px;
  height: 13px;
  background: rgba(138, 106, 47, 0.34);
}
.sx-chip::before {
  top: -13px;
}
.sx-chip::after {
  bottom: -13px;
}
.sx-chip .ic {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid rgba(138, 106, 47, 0.26);
  display: grid;
  place-items: center;
  color: var(--gold-dark);
}
.sx-chip .ic svg {
  width: 17px;
  height: 17px;
}
.sx-chip .lab {
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(10, 26, 51, 0.48);
  margin-top: 6px;
  white-space: nowrap;
}
.sx-field {
  width: 84%;
  margin-top: 0;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(10, 26, 51, 0.11);
  padding: 10px 16px;
  font-size: 12.5px;
  color: var(--navy);
  display: flex;
  align-items: center;
}
.sx-field .ph {
  color: rgba(10, 26, 51, 0.4);
  font-style: italic;
}
.sx-caret {
  display: inline-block;
  width: 1.5px;
  height: 13px;
  background: var(--gold-dark);
  margin-left: 3px;
  animation: sxblink 1.1s step-end infinite;
}
@keyframes sxblink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

.sx-cal {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 12px;
  border: 1px solid rgba(10, 26, 51, 0.08);
  padding: 13px 13px 9px;
  box-shadow: 0 12px 28px -22px rgba(10, 26, 51, 0.5);
}
.sx-cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.sx-cal-head .m {
  font-weight: 600;
  font-size: 13px;
  color: var(--navy);
}
.sx-cal-head .nav {
  display: flex;
  gap: 5px;
}
.sx-cal-head .nav span {
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: rgba(10, 26, 51, 0.05);
  display: grid;
  place-items: center;
  font-size: 11px;
  color: rgba(10, 26, 51, 0.45);
}
.sx-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  font-size: 11px;
  margin: auto 0;
}
.sx-cal-grid .wd {
  font-size: 9px;
  color: rgba(10, 26, 51, 0.4);
  font-weight: 600;
  padding-bottom: 5px;
}
.sx-cal-grid span {
  height: 27px;
  display: grid;
  place-items: center;
  position: relative;
  color: rgba(10, 26, 51, 0.78);
  border-radius: 8px;
}
.sx-cal-grid .out,
.sx-cal-grid .past {
  color: rgba(10, 26, 51, 0.22);
}
.sx-cal-grid .free::after {
  content: '';
  position: absolute;
  bottom: 3px;
  left: 50%;
  transform: translateX(-50%);
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--gold-dark);
}
.sx-cal-grid .sel {
  background: var(--gold-dark);
  color: #fff;
  font-weight: 600;
}
.sx-cal-grid .sel::after {
  background: #fff;
}
.sx-cal-grid .hov {
  background: rgba(10, 26, 51, 0.06);
}

.sx-scan {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 12px;
  border: 1px solid rgba(10, 26, 51, 0.08);
  padding: 15px 15px 13px;
  text-align: left;
  box-shadow: 0 12px 28px -22px rgba(10, 26, 51, 0.5);
}
.sx-scan-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 12px;
}
.sx-scan-head .dots {
  color: rgba(10, 26, 51, 0.3);
  letter-spacing: 0.12em;
}
.sx-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 7px 0;
  font-size: 11.5px;
  color: rgba(10, 26, 51, 0.7);
}
.sx-meter {
  display: flex;
  gap: 4px;
}
.sx-meter i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(10, 26, 51, 0.12);
}
.sx-meter i.on {
  background: var(--gold-dark);
}
.sx-scan hr {
  border: none;
  border-top: 1px solid rgba(10, 26, 51, 0.09);
  margin: 13px 0 11px;
}
.sx-scan .lab {
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-dark);
  font-weight: 600;
  margin-bottom: 7px;
}
.sx-blur {
  display: block;
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(10, 26, 51, 0.78);
  filter: blur(4.5px);
  user-select: none;
  -webkit-user-select: none;
  margin: 3px 0;
}

@media (prefers-reduced-motion: reduce) {
  .sx-caret {
    animation: none;
  }
}
@media (max-width: 980px) {
  .schritte {
    grid-template-columns: 1fr;
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
    gap: 22px;
  }
}

.cal-hinweis {
  max-width: 640px;
  margin: 18px auto 0;
  text-align: center;
  font-size: 12px;
  line-height: 1.65;
  color: var(--muted);
}
.cal-hinweis b {
  color: var(--gold-soft);
  font-weight: 600;
}
.cal-hinweis a {
  color: var(--gold-soft);
}

/* ---------- Terminseite — Chrome (1:1 pari-jazz-vorschau.netlify.app/termin) ----------
     Stand 12.09. („leergeraeumt"): Überschrift, ein Satz, Kalender. Diese Regeln lagen
     auf der Netlify-Vorlage inline im <style> der Terminseite; hier wandern sie ins
     Site-Stylesheet, damit Route und Lane dieselbe Datei laden. */
.book-hero {
  padding: 76px 0 0;
  text-align: center;
}
.book-hero .eyebrow {
  margin-left: auto;
  margin-right: auto;
}
.book-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--muted);
  text-decoration: none;
  margin-bottom: 26px;
}
.book-back:hover {
  color: var(--gold-soft);
}
.termin-hinweis {
  max-width: 640px;
  margin: 26px auto 0;
  text-align: center;
  font-size: 13px;
  line-height: 1.65;
  color: var(--muted);
}
.termin-hinweis b {
  color: var(--gold-soft);
  font-weight: 600;
}

/* ---------- Rechtsseiten — dunkler Netlify-Legal-Chrome (LegalShell) ----------
     Typografie wie im Netlify-Vorbild: große Serifen-Überschrift (Playfair Display),
     goldene Zwischenüberschriften, Fließtext in Inter 300, Netlify-Abstände.
     Nur Darstellung — Impressumstext und Datenschutzerklärung bleiben Wortlaut-SSOT. */
.legal {
  max-width: 640px;
  margin: 0 auto;
  padding: 90px 0 100px;
}
.legal .eyebrow {
  margin-left: 0;
}
.legal h1 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(31px, 4.3vw, 50px);
  text-align: left;
  margin: 0 0 16px;
  max-width: none;
  line-height: 1.1;
}
.legal .legal-navlink {
  margin: -8px 0 0;
}
.legal .legal-navlink a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--muted);
  text-decoration: none;
}
.legal .legal-navlink a:hover {
  color: var(--gold-soft);
}
.legal .block {
  margin-top: 34px;
  color: var(--ink);
  font-size: 14.5px;
  font-weight: 300;
  line-height: 1.75;
}
.legal .block p {
  margin: 0 0 6px;
}
.legal .block h2 {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 700;
  color: var(--gold-soft);
  margin: 0 0 10px;
  text-align: left;
  max-width: none;
  line-height: 1.3;
}
.legal .block h3 {
  font-family: var(--serif);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--gold);
  margin: 16px 0 8px;
}
.legal .block ul {
  margin: 8px 0 0;
  padding-left: 20px;
}
.legal .block li {
  margin-bottom: 6px;
}
.legal .block a {
  color: var(--gold-soft);
}
.legal .stand {
  color: var(--muted);
  font-size: 12.5px;
  margin-top: 4px;
}
.legal-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--muted);
  text-decoration: none;
  margin-bottom: 26px;
}
.legal-back:hover {
  color: var(--gold-soft);
}