/* =====================================================================
   Astromantie · Einzelanalyse · neues Seitendesign (Vorlage 06.10.2026, 3. Fassung)
   Rahmen: .ez im Seiteninhalt. Oben ein lila Himmel (Lila dunkel), der weich in das
   dunkle Universum auslaeuft; darunter Sterne, Boxen dunkel wie auf der Startseite,
   Kostprobe (Magenta/Indigo) und Fragen (Lavendel) mit eigenem, helleren Himmel. Schriften: Ueberschriften Fraunces, Text Hanken
   Grotesk (UI-Standard), Zahlen Cinzel. Bewegung aus ez.js.
   Ebenen: .ez ist ein eigener Stapel. Hintergruende der Abschnitte liegen auf -1 (unter
   den Sternen), der Sternenhimmel auf 0, Inhalte (.ez-wrap) darueber.
   ===================================================================== */

@property --ez-w {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

.ez {
  --ez-grund: #0b0618;
  --ez-hero: radial-gradient(55% 50% at 74% 40%, rgba(118, 64, 214, 0.28), rgba(118, 64, 214, 0) 70%),
             radial-gradient(42% 40% at 10% 80%, rgba(170, 80, 210, 0.14), rgba(170, 80, 210, 0) 70%),
             radial-gradient(60% 26% at 50% 78%, rgba(232, 201, 106, 0.06), rgba(232, 201, 106, 0) 70%),
             linear-gradient(180deg, #06030d 0%, #0f0724 42%, #120827 70%, #0b0618 100%);
  --ez-karte: rgba(16, 10, 36, 0.62);
  --ez-karte-fest: rgba(15, 9, 32, 0.95);
  --ez-tint: 124, 58, 237;

  --ez-gold: #e8c96a;
  --ez-gold-hell: #f6e3a1;
  --ez-text: #f4effe;
  --ez-mittel: rgba(238, 230, 255, 0.76);
  --ez-leise: rgba(238, 230, 255, 0.54);
  --ez-gold-verlauf: linear-gradient(135deg, #fbe9b0 0%, #e8c96a 48%, #c9993c 100%);
  --ez-titel-verlauf: linear-gradient(110deg, #c9b6ff 0%, #e8c96a 55%, #fbe9b0 75%, #c9b6ff 100%);
  --ez-weich: cubic-bezier(.2, .7, .2, 1);
  --ez-karte-bg: linear-gradient(160deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.012) 55%), var(--ez-karte);
  --ez-karte-rand: rgba(255, 255, 255, 0.09);
  --ez-karte-schatten: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 20px 50px rgba(0, 0, 0, 0.34);

  /* Kaufknopf: lila gefuellt (faellt am staerksten auf) mit umlaufendem Goldrand */
  --k-bg: linear-gradient(135deg, #6d28d9 0%, #8b5cf6 55%, #a78bfa 100%) padding-box,
          conic-gradient(from var(--ez-w), #a87a22, #fbe9b0, #e8c96a, #a87a22, #fbe9b0, #a87a22) border-box;
  --k-text: #ffffff;
  --k-sub: rgba(255, 255, 255, 0.84);
  --k-rand: 1.5px solid transparent;
  --k-schatten: 0 16px 44px -12px rgba(124, 58, 237, 0.85), 0 0 26px rgba(232, 201, 106, 0.2);
  --k-schatten-hover: 0 22px 56px -12px rgba(124, 58, 237, 1), 0 0 40px rgba(232, 201, 106, 0.42);
  --k-textschatten: 0 1px 2px rgba(30, 10, 60, 0.35);

  position: relative;
  isolation: isolate;
  overflow-x: clip;
  color: var(--ez-text);
  background: var(--ez-grund);
}

.ez *, .ez *::before, .ez *::after { box-sizing: border-box; }

/* Ende der Seite: weich in die Fusszeile */
.ez::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 220px;
  background: linear-gradient(180deg, rgba(8, 5, 26, 0), #08051a);
  pointer-events: none;
  z-index: -1;
}

/* ---------- Sternenhimmel: bleibt beim Scrollen stehen, endet mit dem Inhalt ---------- */
/* Die Sterne ziehen auf den Analyse-Seiten 5 % langsamer als sonst (global.js liest --astro-star-tempo) */
.ez-himmel {
  --astro-star-tempo: 0.95;
  position: sticky;
  top: 0;
  height: 100vh;
  margin-bottom: -100vh;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.ez > section { position: relative; }
.ez-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.ez-wrap { position: relative; width: min(1180px, calc(100% - 40px)); margin: 0 auto; }
.ez-abschnitt { padding: clamp(70px, 9vw, 120px) 0; }

/* ---------- Ueberschriften ---------- */
.ez-kopf { text-align: center; max-width: 780px; margin: 0 auto clamp(38px, 5vw, 60px); }
.ez-kicker {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ez-gold);
  text-shadow: 0 0 18px rgba(232, 201, 106, 0.4);
}
.ez .ez-h2 {
  font-weight: 400;
  font-size: clamp(2.1rem, 4.6vw, 3.5rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 16px 0 18px;
  color: #f8f3ff;
}
.ez-h2 em, .ez-h1 em {
  font-style: italic;
  /* Platz rechts, sonst schneidet der Verlauf das letzte, schraege Zeichen ab (z. B. "?") */
  padding-right: 0.14em;
  margin-right: -0.06em;
  background: var(--ez-titel-verlauf);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: ez-schimmer 10s ease-in-out infinite;
}
@keyframes ez-schimmer { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
.ez .ez-sub { font-size: clamp(1.02rem, 1.5vw, 1.15rem); line-height: 1.7; color: var(--ez-mittel); margin: 0 auto; max-width: 640px; }

/* ---------- Erscheinen ---------- */
.ez.ez-js .ez-rv {
  opacity: 0;
  transform: translate3d(0, 30px, 0);
  filter: blur(6px);
  transition: opacity 0.9s var(--ez-weich), transform 1.1s var(--ez-weich), filter 0.9s var(--ez-weich);
  transition-delay: calc(var(--v, 0) * 110ms);
}
.ez.ez-js .ez-rv.ist-da { opacity: 1; transform: none; filter: none; }
/* backwards statt both: nach dem Einblenden endet die Animation, das Element bleibt keine eigene Grafik-Ebene */
.ez-auf { animation: ez-auftauchen 1.1s var(--ez-weich) backwards; animation-delay: calc(var(--v, 0) * 120ms + 80ms); }
@keyframes ez-auftauchen { from { opacity: 0; transform: translate3d(0, 26px, 0); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes ez-umlauf { to { --ez-w: 360deg; } }
@keyframes ez-schweben { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes ez-atmen { 0%, 100% { opacity: 0.6; transform: scale(0.9); } 50% { opacity: 1; transform: scale(1.07); } }
@keyframes ez-kreisen { to { transform: rotate(360deg); } }

/* ---------- Kaufknoepfe ---------- */
.ez .ez-knopf, .ez .astro-btn-primary, .ez .ez-leiste a, .ez .aram-checkout-pay-btn {
  position: relative;
  overflow: hidden;
  border: var(--k-rand);
  background: var(--k-bg);
  color: var(--k-text);
  text-shadow: var(--k-textschatten);
  box-shadow: var(--k-schatten);
  animation: ez-umlauf 6s linear infinite;
  cursor: pointer;
  transition: transform 0.3s var(--ez-weich), box-shadow 0.3s;
}
.ez .ez-knopf:hover, .ez .astro-btn-primary:hover, .ez .aram-checkout-pay-btn:hover { transform: translateY(-2px); box-shadow: var(--k-schatten-hover); color: var(--k-text); }
.ez .ez-knopf::after, .ez .astro-btn-primary::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 40%;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0));
  transform: skewX(-18deg);
  animation: ez-glanz 5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes ez-glanz { 0%, 62% { left: -60%; } 100% { left: 135%; } }
.ez .ez-knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 30px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.01em;
  text-decoration: none;
}
/* Mini-Knopf "Leseprobe ansehen" (Formular und Schluss) */
.ez .ez-leseprobe {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 7px 6px 13px;
  border-radius: 999px;
  border: 1px solid rgba(232, 201, 106, 0.42);
  background: rgba(255, 255, 255, 0.04);
  color: #f1e8ff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: background 0.3s, border-color 0.3s, box-shadow 0.3s, color 0.3s;
}
.ez .ez-leseprobe:hover { color: #fff; background: rgba(232, 201, 106, 0.1); border-color: rgba(232, 201, 106, 0.85); box-shadow: 0 0 18px rgba(232, 201, 106, 0.24); }
.ez-leseprobe svg { flex: 0 0 17px; width: 17px; height: 17px; fill: none; stroke: var(--ez-gold); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ez .ez-leseprobe i { padding: 3px 8px; border-radius: 999px; background: rgba(232, 201, 106, 0.16); color: var(--ez-gold-hell); font-size: 10px; font-style: normal; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }
/* Noch ohne Muster-PDF: sichtbar, aber zurueckhaltend und ohne Download */
.ez .ez-leseprobe[aria-disabled="true"] { cursor: default; border-color: rgba(232, 201, 106, 0.28); color: #d9cff2; }
.ez .ez-leseprobe[aria-disabled="true"]:hover { background: rgba(255, 255, 255, 0.04); border-color: rgba(232, 201, 106, 0.4); box-shadow: none; color: #f1e8ff; }
.ez .ez-leseprobe[aria-disabled="true"] i { background: rgba(255, 255, 255, 0.08); color: var(--ez-mittel); }
.ez-leseprobe-hinweis { margin: 2px 0 0; text-align: center; font-size: 12.5px; line-height: 1.5; color: var(--ez-gold-hell); }
.ez-final-knoepfe .ez-leseprobe-hinweis { flex-basis: 100%; text-align: left; }

/* =====================================================================
   1. OBEN
   ===================================================================== */
.ez-hero { padding: clamp(24px, 3.5vw, 44px) 0 clamp(80px, 10vw, 130px); }
/* Lila Himmel: unter den Sternen, laeuft zum Ende des Abschnitts weich ins Dunkel aus */
.ez-hero::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -70px;
  bottom: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--ez-hero);
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 52%, rgba(0, 0, 0, 0.55) 74%, rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(180deg, #000 0, #000 52%, rgba(0, 0, 0, 0.55) 74%, rgba(0, 0, 0, 0) 100%);
}
.ez-hero-raster {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
  gap: clamp(36px, 5vw, 76px);
  align-items: start;
}
.ez-hero-raster > * { min-width: 0; }
.ez-hero-links { position: sticky; top: 100px; padding-top: clamp(6px, 2vw, 24px); }

.ez-pille {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(232, 201, 106, 0.08);
  border: 1px solid rgba(232, 201, 106, 0.34);
  color: var(--ez-gold-hell);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  box-shadow: inset 0 0 22px rgba(232, 201, 106, 0.1), 0 0 30px rgba(232, 201, 106, 0.1);
}
.ez .ez-h1 {
  font-weight: 300;
  font-size: clamp(2.5rem, 4.9vw, 3.95rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin: 22px 0 22px;
  color: #efe8ff;
}
.ez-h1 em { display: block; font-weight: 400; padding-bottom: 0.08em; }
.ez .ez-lead { font-size: clamp(1.06rem, 1.45vw, 1.2rem); line-height: 1.7; color: var(--ez-mittel); max-width: 33em; margin: 0 0 24px; }
.ez-vorteile { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 12px; }
.ez-vorteile li { position: relative; padding-left: 32px; color: #ece4ff; font-size: 15.5px; line-height: 1.55; }
.ez-vorteile li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 1px;
  width: 20px;
  height: 20px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23fbe9b0'/%3E%3Cstop offset='1' stop-color='%23d4a843'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M12 2l2.6 7.4L22 12l-7.4 2.6L12 22l-2.6-7.4L2 12l7.4-2.6z' fill='url(%23g)'/%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 0 6px rgba(232, 201, 106, 0.7));
}

/* Kleines Buch mit Eckdaten */
.ez-hero-schau { display: flex; align-items: center; gap: clamp(34px, 4vw, 60px); }
.ez-eckdaten { display: flex; flex-direction: column; gap: 12px; }
.ez-eckdaten div {
  display: flex;
  align-items: baseline;
  gap: 12px;
  min-width: 180px;
  padding: 12px 18px;
  border-radius: 16px;
  background: var(--ez-karte-bg);
  border: 1px solid var(--ez-karte-rand);
  box-shadow: var(--ez-karte-schatten);
}
.ez-eckdaten b {
  font-family: 'Cinzel', serif;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.1;
  background: var(--ez-gold-verlauf);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.ez-eckdaten span { font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ez-leise); }

.ez-minibuch {
  position: relative;
  flex: 0 0 auto;
  width: 188px;
  margin: 8px 0 34px 46px;
  perspective: 1600px;
  perspective-origin: 0% 50%;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  animation: ez-schweben 6s ease-in-out infinite;
}
.ez-mb-schein {
  position: absolute;
  inset: -32% -60%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(232, 201, 106, 0.3), rgba(var(--ez-tint), 0.16) 50%, rgba(var(--ez-tint), 0) 74%);
  animation: ez-atmen 5s ease-in-out infinite;
  pointer-events: none;
}
.ez-mb-b3 { position: relative; width: 100%; aspect-ratio: 2 / 3; transform-style: preserve-3d; transform: rotateY(-14deg) rotateX(5deg); transition: transform 0.9s var(--ez-weich); }
.ez-minibuch.ist-offen .ez-mb-b3 { transform: rotateY(-4deg) rotateX(3deg); }
.ez-mb-ruecken { position: absolute; inset: 0; border-radius: 4px 10px 10px 4px; background: #0b0920; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6); transform: translateZ(-14px); }
.ez-mb-seiten {
  position: absolute;
  top: 5px;
  bottom: 5px;
  left: 3px;
  right: 5px;
  border-radius: 2px 6px 6px 2px;
  transform: translateZ(-7px);
  overflow: hidden;
  box-shadow: inset 0 0 26px rgba(120, 80, 20, 0.35);
  background: repeating-linear-gradient(180deg, rgba(150, 110, 40, 0) 0 11px, rgba(150, 110, 40, 0.13) 11px 12px), radial-gradient(70% 60% at 50% 45%, #fff6dc, #ecd9a8 70%, #d9bf80);
}
.ez-mb-seiten svg { position: absolute; left: 50%; top: 50%; width: 80%; transform: translate(-50%, -50%); opacity: 0.85; }
/* Inhaltsverzeichnis statt Tierkreis: Papier ohne Linien, Schrift groesser */
.ez .ez-mb-seiten.ez-toc, .ez .ab-buch .ab-seiten.ez-toc { background: radial-gradient(75% 65% at 50% 42%, #fff8e4, #f0e0b8 70%, #dcc38a); }
.ez .ez-mb-seiten.ez-toc svg, .ez .ab-buch .ab-seiten.ez-toc svg { width: 92%; opacity: 1; }
.ez-mb-licht {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 380px;
  height: 380px;
  margin: -190px 0 0 -190px;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transform: translateZ(-6px);
  background: radial-gradient(circle, rgba(255, 246, 214, 0.75), rgba(246, 214, 140, 0.32) 28%, rgba(232, 201, 106, 0.08) 52%, rgba(232, 201, 106, 0) 70%);
  transition: opacity 0.8s ease 0.15s;
}
.ez-minibuch.ist-offen .ez-mb-licht { opacity: 1; }
.ez-mb-deckel { position: absolute; inset: 0; transform-origin: left center; transform-style: preserve-3d; transition: transform 1.05s cubic-bezier(0.45, 0.05, 0.25, 1); }
.ez-minibuch.ist-offen .ez-mb-deckel { transform: rotateY(-108deg); }
.ez-mb-vorne, .ez-mb-innen { position: absolute; inset: 0; border-radius: 4px 10px 10px 4px; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.ez-mb-vorne { overflow: hidden; box-shadow: 0 0 34px rgba(232, 201, 106, 0.28); }
.ez-mb-vorne svg { display: block; width: 100%; height: 100%; }
.ez-mb-vorne::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 14px; z-index: 1; background: linear-gradient(90deg, rgba(0, 0, 0, 0.55), rgba(255, 255, 255, 0.06) 60%, rgba(0, 0, 0, 0)); }
.ez-mb-vorne::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  padding: 1.5px;
  pointer-events: none;
  background: conic-gradient(from var(--ez-w), rgba(232, 201, 106, 0.28) 0deg, rgba(232, 201, 106, 0.28) 250deg, #e8c96a 305deg, #fffaf0 335deg, #e8c96a 348deg, rgba(232, 201, 106, 0.28) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  filter: drop-shadow(0 0 3px rgba(246, 214, 140, 0.7));
  animation: ez-umlauf 4.5s linear infinite;
}
.ez-mb-innen { transform: rotateY(180deg); background: linear-gradient(90deg, #120e2c, #1d1642); box-shadow: inset 0 0 0 8px rgba(232, 201, 106, 0.08); }
.ez-mb-funken { position: absolute; inset: -30px -40px; pointer-events: none; }
.ez-mb-funken i { position: absolute; bottom: 42%; left: var(--x); width: 4px; height: 4px; border-radius: 50%; background: #fff3c4; box-shadow: 0 0 8px 2px rgba(246, 214, 140, 0.9); opacity: 0; }
.ez-minibuch.ist-offen .ez-mb-funken i { animation: ez-mb-funke 2.6s ease-out infinite; animation-delay: var(--v); }
@keyframes ez-mb-funke { 0% { opacity: 0; transform: translate(0, 0) scale(0.6); } 20% { opacity: 1; } 70% { opacity: 0.8; } 100% { opacity: 0; transform: translate(var(--dx), -150px) scale(1); } }
.ez-mb-tipp { position: absolute; left: 50%; bottom: -30px; transform: translateX(-50%); white-space: nowrap; font-size: 11.5px; font-weight: 600; letter-spacing: 0.06em; color: var(--ez-gold); opacity: 0.8; transition: opacity 0.4s; pointer-events: none; }
.ez-mb-finger { display: none; }
@media (hover: none) { .ez-mb-maus { display: none; } .ez-mb-finger { display: inline; } }
.ez-minibuch.ist-offen .ez-mb-tipp { opacity: 0; }

/* Desktop: der obere Bereich fuellt den ersten Bildschirm und sitzt mittig wie auf der Startseite,
   mit etwas mehr Luft zwischen Text/Buch und Formular */
@media (min-width: 981px) {
  .ez-hero {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: calc(100vh - 85px);
    padding: clamp(56px, 8vh, 100px) 0 clamp(36px, 4.5vh, 60px);
  }
  .ez-hero > .ez-wrap { width: min(1240px, calc(100% - 40px)); }
  .ez-hero-raster { align-items: center; gap: clamp(56px, 7vw, 110px); }
  .ez-hero-links { position: relative; top: auto; padding-top: 0; }
  .ez .ez-rad-hero { top: 50%; margin-top: calc(min(860px, 80vw) / -2); }
}

/* Sternzeichen-Rad hinter dem Formular */
.ez-rad { position: absolute; pointer-events: none; z-index: -1; aspect-ratio: 1; }
.ez-rad svg { width: 100%; height: 100%; display: block; animation: ez-drehen-rad 220s linear infinite; }
.ez-rad-hero { width: min(860px, 80vw); right: max(-200px, calc(50% - 760px)); top: -40px; opacity: 0.16; }
@keyframes ez-drehen-rad { to { transform: rotate(360deg); } }

/* ---------- Formular (kompakt) ---------- */
.ez-formular { position: relative; scroll-margin-top: 86px; }
.ez-aura { position: relative; border-radius: 30px; padding: 1.5px; }
.ez-aura::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(from var(--ez-w), rgba(232, 201, 106, 0) 0deg, rgba(251, 233, 176, 0.95) 50deg, rgba(var(--ez-tint), 0.9) 120deg, rgba(var(--ez-tint), 0.4) 170deg, rgba(232, 201, 106, 0) 220deg, rgba(232, 201, 106, 0) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: ez-umlauf 7s linear infinite;
}
.ez-aura::after {
  content: '';
  position: absolute;
  inset: -50px -40px;
  z-index: -1;
  border-radius: 80px;
  background: radial-gradient(closest-side, rgba(var(--ez-tint), 0.32), rgba(var(--ez-tint), 0));
  pointer-events: none;
}

.ez .astro-product-form-card, .ez .aram-checkout-section {
  position: relative;
  max-width: none;
  margin: 0;
  padding: 24px 26px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 28.5px;
  background: linear-gradient(180deg, rgba(var(--ez-tint), 0.16), rgba(var(--ez-tint), 0.04) 60%), var(--ez-karte-fest);
  box-shadow: 0 40px 90px -24px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  overflow: visible;
}
.ez .astro-product-form-card::before, .ez .astro-product-form-card::after { display: none; }

.ez-form-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 16px; }
.ez .ez-form-kopf .astro-form-card-title { margin: 0; font-size: clamp(1.45rem, 2.2vw, 1.7rem); font-weight: 500; line-height: 1.15; color: #fff; text-align: left; }
.ez .ez-form-kopf .astro-form-card-subtitle { margin: 6px 0 0; font-size: 13.5px; color: var(--ez-leise); text-align: left; }
.ez-preis { text-align: right; flex: 0 0 auto; }
.ez-preis b {
  display: block;
  font-family: 'Cinzel', serif;
  font-size: 34px;
  font-weight: 600;
  line-height: 1;
  background: var(--ez-gold-verlauf);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 0 14px rgba(232, 201, 106, 0.35));
}
.ez-preis span { display: block; margin-top: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ez-leise); }

/* Die drei Schritte: 1 Daten, 2 Bezahlen, 3 Buch */
.ez-schritte { list-style: none; display: flex; gap: 6px; margin: 0 0 18px; padding: 0; }
.ez-schritte li {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 12px;
  font-weight: 600;
  color: var(--ez-leise);
  white-space: nowrap;
  transition: background 0.35s, border-color 0.35s, color 0.35s, box-shadow 0.35s;
}
.ez-schritte i {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-style: normal;
  font-size: 11px;
  font-weight: 800;
  color: #fff;
  background: rgba(255, 255, 255, 0.09);
  transition: background 0.35s, box-shadow 0.35s, color 0.35s;
}
.ez-schritte li.ist-aktiv { color: #fff; background: linear-gradient(135deg, rgba(var(--ez-tint), 0.4), rgba(var(--ez-tint), 0.14)); border-color: rgba(var(--ez-tint), 0.55); }
.ez-schritte li.ist-aktiv i { background: rgba(var(--ez-tint), 0.95); box-shadow: 0 0 0 1.5px rgba(232, 201, 106, 0.85), 0 0 14px rgba(232, 201, 106, 0.5); }
.ez-schritte li.ist-fertig { color: var(--ez-gold-hell); border-color: rgba(232, 201, 106, 0.35); cursor: pointer; }
.ez-schritte li.ist-fertig:hover { background: rgba(232, 201, 106, 0.08); }
.ez-schritte li.ist-fertig i { font-size: 0; background: rgba(232, 201, 106, 0.16); box-shadow: inset 0 0 0 1.5px rgba(232, 201, 106, 0.85); }
.ez-schritte li.ist-fertig i::after { content: '\2713'; font-size: 12px; color: var(--ez-gold); }
.ez-schritte li.ist-bereit { color: #fff; border-color: rgba(232, 201, 106, 0.55); animation: ez-bereit 2.2s ease-in-out infinite; }
.ez-schritte li.ist-bereit i { background: rgba(var(--ez-tint), 0.9); }
@keyframes ez-bereit { 0%, 100% { box-shadow: 0 0 0 rgba(232, 201, 106, 0); } 50% { box-shadow: 0 0 18px rgba(232, 201, 106, 0.4); } }

/* Karte als Raster: alles volle Breite, nur Geburtsort und E-Mail teilen sich eine Zeile */
.ez .astro-product-form-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 12px; align-items: start; }
.ez .astro-product-form-card > * { grid-column: 1 / -1; }
.ez .astro-product-form-card > .astro-form-row-place, .ez .astro-product-form-card > .astro-form-field:not(.aram-gender) { grid-column: auto; }
.ez .astro-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0; }
.ez .astro-form-row > div { position: relative; }
.ez .astro-form-row + .astro-form-row, .ez .astro-form-row ~ .astro-form-row { margin-top: 10px; }
.ez .aram-gender, .ez .astro-form-row-place, .ez .astro-form-field { margin: 10px 0 0; }
.ez .astro-input-label { display: block; margin: 0 0 5px; font-size: 12px; font-weight: 600; color: #ddd3fb; letter-spacing: 0.01em; }
.ez .astro-required { color: var(--ez-gold); margin-left: 2px; }
.ez .astro-optional { color: var(--ez-leise); font-weight: 500; }
.ez .astro-input {
  width: 100%;
  height: 46px;
  padding: 0 15px;
  border-radius: 12px;
  border: 1px solid rgba(206, 186, 255, 0.18);
  background-color: rgba(255, 255, 255, 0.05);
  color: #fff;
  font-size: 15px;
  transition: border-color 0.25s, box-shadow 0.25s, background-color 0.25s;
}
.ez .astro-input::placeholder { color: rgba(236, 229, 255, 0.4); }
.ez .astro-input:hover { border-color: rgba(206, 186, 255, 0.34); }
.ez .astro-input:focus { outline: none; border-color: rgba(232, 201, 106, 0.75); background-color: rgba(255, 255, 255, 0.08); box-shadow: 0 0 0 4px rgba(232, 201, 106, 0.13), 0 0 30px rgba(var(--ez-tint), 0.28); }
.ez .astro-input[type="time"] { color-scheme: dark; }
.ez .astro-input:disabled { opacity: 0.45; }
.ez .astro-input[data-aram-key$="geburtsort"] {
  padding-left: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e8c96a' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M16 16l4.5 4.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 14px center;
  background-size: 18px;
}
/* Wohnort (Kraftortanalyse, 11.10.2026): Ortsfeld wie der Geburtsort, mit Haus statt Lupe; die Erklaerung darunter
   steht immer da (sonst blendet .aram-place-hint aus), nur nicht neben einer Fehlermeldung */
.ez .astro-input[data-aram-key="wohnort"] {
  padding-left: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e8c96a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 11.5 12 5l8 6.5'/%3E%3Cpath d='M6.5 10v9h11v-9'/%3E%3Cpath d='M10.5 19v-5h3v5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 14px center;
  background-size: 18px;
}
.ez .ez-wohnort .aram-place-hint { display: block; }
.ez .ez-wohnort .astro-input.aram-field-error ~ .aram-place-hint { display: none; }

.ez .aram-gender-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; border-radius: 12px; }
.ez .aram-gd-opt {
  height: 46px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid rgba(206, 186, 255, 0.18);
  background: rgba(255, 255, 255, 0.045);
  color: #efe8ff;
  font-size: 15px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  transition: background 0.25s, border-color 0.25s, box-shadow 0.25s, color 0.25s;
}
.ez .aram-gd-opt:hover { border-color: rgba(206, 186, 255, 0.4); background: rgba(255, 255, 255, 0.07); }
.ez .aram-gd-opt[aria-checked="true"] { color: #fff; border-color: rgba(232, 201, 106, 0.75); background: linear-gradient(135deg, rgba(var(--ez-tint), 0.55), rgba(var(--ez-tint), 0.25)); box-shadow: 0 0 24px rgba(var(--ez-tint), 0.45); }
.ez .aram-gd-sym {
  font-family: 'Segoe UI Symbol', 'Apple Symbols', 'Noto Sans Symbols 2', 'Noto Sans Symbols', sans-serif;
  font-variant-emoji: text;
  font-size: 19px;
  line-height: 1;
  color: var(--ez-gold);
}
.ez .aram-gender-hint { display: none; }

/* "Geburtszeit unbekannt" als kleiner Schalter rechts neben der Beschriftung */
.ez .aram-time-unknown { position: absolute; top: -2px; right: 0; display: flex; align-items: center; gap: 6px; margin: 0; font-size: 11.5px; color: var(--ez-mittel); cursor: pointer; }
.ez .aram-time-unknown input { transform: scale(0.85); transform-origin: right center; }
.ez .aram-time-unknown input {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  flex: 0 0 34px;
  width: 34px;
  height: 20px;
  margin: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  cursor: pointer;
  transition: background 0.25s;
}
.ez .aram-time-unknown input::after { content: ''; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform 0.25s var(--ez-weich); }
.ez .aram-time-unknown input:checked { background: rgba(var(--ez-tint), 0.95); box-shadow: 0 0 0 1px rgba(232, 201, 106, 0.6); }
.ez .aram-time-unknown input:checked::after { transform: translateX(14px); }

.ez .aram-place-hint { display: none; margin: 6px 0 0; font-size: 12px; line-height: 1.5; color: var(--ez-leise); }
.ez .astro-form-row-place:focus-within .aram-place-hint:first-of-type { display: block; }
/* Ortsvorschlaege (09.10.2026, Wunsch Tobias): Die Liste klappt direkt unter dem Feld Geburtsort auf,
   im Design der Karte, auf allen Analyse-Seiten (Einzel, Partner, Firma, Kraftort, Kinder, Familie,
   Freundschaft). Ursache vorher: checkout.js und einzelanalyse.js legen beide <style id="aram-place-styles">
   an; es gewinnt der zuerst geladene Shop-Stil, und dem fehlt der Bezugsrahmen am Feld. Die Liste
   (position:absolute; top:100%) hing sich darum an die ganze Formularkarte und erschien grau (#1a1a2e)
   unter ihr. Jetzt: Rahmen am Feld, Liste an ihrer natuerlichen Stelle (top:auto = gleich unter dem
   Eingabefeld, auch wenn darunter noch Hinweis und Koordinaten-Knopf stehen). */
.ez .astro-form-row-place > div, .ez div:has(> .aram-place-results) { position: relative; }
/* Personen-Bloecke (Partner, Freundschaft, Familie) behalten nach der Einblende-Animation eine Transformation
   und bilden damit eine eigene Ebene; ohne Anheben malt sich der Kaufknopf darunter ueber die offene Liste. */
.ez .astro-product-form-card > :focus-within, .ez .ez-person:focus-within,
.ez .astro-product-form-card > :has(.aram-place-results[style*="block"]), .ez .ez-person:has(.aram-place-results[style*="block"]) { position: relative; z-index: 90; }
.ez .astro-product-form-card .aram-place-results {
  top: auto;
  left: 0;
  right: auto;
  width: max-content;
  min-width: 100%;
  max-width: calc(200% + 12px);
  z-index: 80;
  margin-top: 6px;
  max-height: min(304px, 48vh);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 6px;
  border-radius: 14px;
  border: 1px solid rgba(206, 186, 255, 0.28);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.015) 60%), rgba(21, 12, 46, 0.98);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 22px 48px rgba(0, 0, 0, 0.5), 0 0 32px rgba(var(--ez-tint), 0.24);
  scrollbar-width: thin;
  scrollbar-color: rgba(206, 186, 255, 0.35) transparent;
  animation: ez-orte-auf 0.18s var(--ez-weich) both;
}
@keyframes ez-orte-auf { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.ez .astro-product-form-card .aram-place-item {
  position: relative;
  padding: 10px 12px 10px 38px;
  border: 0;
  border-radius: 10px;
  color: var(--ez-mittel);
  font-size: 14px;
  line-height: 1.35;
  transition: background-color 0.15s, color 0.15s;
}
.ez .astro-product-form-card .aram-place-item + .aram-place-item { margin-top: 2px; }
.ez .astro-product-form-card .aram-place-item::before {
  content: '';
  position: absolute;
  left: 12px;
  top: 50%;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  opacity: 0.7;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e8c96a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-6.5-5.6-6.5-11a6.5 6.5 0 0 1 13 0c0 5.4-6.5 11-6.5 11z'/%3E%3Ccircle cx='12' cy='10' r='2.4'/%3E%3C/svg%3E");
  transition: opacity 0.15s;
}
.ez .astro-product-form-card .aram-place-item:first-child { color: #fff; }
.ez .astro-product-form-card .aram-place-item:hover { background: rgba(var(--ez-tint), 0.24); color: #fff; }
.ez .astro-product-form-card .aram-place-item:hover::before { opacity: 1; }
/* Halbe Spalte (Einzel, Firma, Kraftort, erste Person bei Partner und Freundschaft): Die Liste darf bis
   zur vollen Formularbreite wachsen (beide Spalten plus 12 px Abstand), damit jeder Ort in eine Zeile passt.
   Felder ueber die ganze Breite und das Handy (eine Spalte): nicht breiter als das Feld. */
.ez .ez-form-kind .aram-place-results, .ez .aram-fam-person .aram-place-results,
.ez .ez-person > .astro-form-row-place:last-child .aram-place-results { max-width: 100%; }
@media (max-width: 560px) { .ez .astro-product-form-card .aram-place-results { max-width: 100%; } }
@media (prefers-reduced-motion: reduce) { .ez .astro-product-form-card .aram-place-results { animation: none; } }
.ez .aram-koord { margin-top: 10px !important; }
.ez .aram-koord .aram-place-hint { display: block; }
.ez .ez-koord-schalter {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 7px;
  padding: 0;
  border: 0;
  background: none;
  color: #d9c9ff;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}
.ez .ez-koord-schalter::before { content: '+'; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; border: 1px solid rgba(232, 201, 106, 0.5); color: var(--ez-gold); font-size: 13px; line-height: 1; }
.ez .ez-koord-schalter:hover { color: #fff; }
.ez .aram-koord.ez-zu { display: none; }

.ez .aram-field-error-msg { margin-top: 6px; font-size: 12px; color: #ffb7c9; }
.ez .astro-input.aram-field-error, .ez .aram-gender.aram-field-error .aram-gd-opt, .ez .aram-gender-opts.aram-field-error .aram-gd-opt { border-color: rgba(255, 128, 160, 0.75); box-shadow: 0 0 0 3px rgba(255, 128, 160, 0.12); }
.ez .aram-form-error-summary { margin-top: 12px; border-radius: 12px; }

.ez .astro-form-privacy {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 14px 0;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
}
.ez .astro-privacy-check {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border-radius: 7px;
  border: 1.5px solid rgba(206, 186, 255, 0.5);
  background: rgba(255, 255, 255, 0.04);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.ez .astro-privacy-check .checkmark { opacity: 0; color: var(--ez-gold); font-size: 13px; font-weight: 900; line-height: 1; transition: opacity 0.2s; }
.ez .astro-privacy-check.checked { background: rgba(232, 201, 106, 0.14); border-color: rgba(232, 201, 106, 0.9); box-shadow: 0 0 14px rgba(232, 201, 106, 0.35); }
.ez .astro-privacy-check.checked .checkmark { opacity: 1; }
.ez .astro-privacy-text { margin: 0; font-size: 11px; line-height: 1.5; color: var(--ez-leise); }
.ez .astro-privacy-text a { color: #dccdff; text-decoration: underline; text-underline-offset: 2px; }

.ez .astro-form-ctas { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.ez .astro-btn-primary {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 15px 20px;
  border-radius: 18px;
}
.ez .astro-btn-primary .astro-btn-main { font-size: 17.5px; font-weight: 800; color: var(--k-text); letter-spacing: 0.01em; }
.ez .astro-btn-primary .astro-btn-sub { font-size: 12.5px; font-weight: 600; color: var(--k-sub); }
.ez .astro-payment-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin: 0; }
.ez .astro-payment-label { display: none; }
.ez .astro-pay-icon { height: 24px; width: auto; border-radius: 4px; opacity: 0.9; }
.ez .astro-divider { display: none; }
.ez .astro-form-ctas .ez-leseprobe { align-self: center; }

.ez-sicher { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; margin-top: 12px; font-size: 12px; color: var(--ez-mittel); }
.ez-sicher span { display: inline-flex; align-items: center; gap: 6px; }
.ez-sicher svg { width: 15px; height: 15px; fill: none; stroke: var(--ez-gold); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Mehrere Personen (Partner, Freundschaft, Familie): Reiter oben, je Person ein Feld-Block ---------- */
.ez-personen-rahmen { position: relative; margin: 0 0 4px; }
.ez-personen-wahl { display: flex; gap: 6px; margin: 0; padding: 4px; border-radius: 15px; background: rgba(0, 0, 0, 0.22); border: 1px solid rgba(255, 255, 255, 0.06); overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.ez-personen-wahl::-webkit-scrollbar { display: none; }
/* Mehr Personen als Platz: mit der Maus ziehbar, an den Raendern ein sanfter Verlauf und ein Pfeil */
.ez-personen-rahmen.kann-ziehen .ez-personen-wahl { cursor: grab; }
.ez-personen-rahmen.ist-gezogen .ez-personen-wahl { cursor: grabbing; user-select: none; -webkit-user-select: none; }
.ez-personen-rahmen.ist-gezogen .ez-personen-wahl button { pointer-events: none; }
.ez-personen-rahmen::before, .ez-personen-rahmen::after { content: ''; position: absolute; top: 1px; bottom: 1px; width: 56px; z-index: 1; pointer-events: none; opacity: 0; transition: opacity 0.25s; }
.ez-personen-rahmen::before { left: 1px; border-radius: 15px 0 0 15px; background: linear-gradient(90deg, #170e33 30%, rgba(23, 14, 51, 0)); }
.ez-personen-rahmen::after { right: 1px; border-radius: 0 15px 15px 0; background: linear-gradient(270deg, #170e33 30%, rgba(23, 14, 51, 0)); }
.ez-personen-rahmen.kann-links::before, .ez-personen-rahmen.kann-rechts::after { opacity: 1; }
.ez .ez-personen-pfeil { position: absolute; top: 50%; z-index: 2; width: 30px; height: 30px; margin-top: -15px; display: none; place-items: center; padding: 0; border-radius: 50%; border: 1px solid rgba(232, 201, 106, 0.6); background: rgba(23, 14, 51, 0.95); color: var(--ez-gold); font-size: 20px; line-height: 1; cursor: pointer; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45); }
.ez .ez-personen-pfeil:hover { background: rgba(232, 201, 106, 0.16); }
.ez .ez-pfeil-links { left: 6px; }
.ez .ez-pfeil-rechts { right: 6px; }
.ez-personen-rahmen.kann-links .ez-pfeil-links, .ez-personen-rahmen.kann-rechts .ez-pfeil-rechts { display: grid; }
.ez .ez-personen-wahl button {
  flex: 1 0 auto;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 14px;
  border: 0;
  border-radius: 11px;
  background: none;
  color: var(--ez-mittel);
  font-size: 13.5px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.3s, color 0.3s, box-shadow 0.3s;
}
.ez .ez-personen-wahl button:hover { color: #fff; background: rgba(255, 255, 255, 0.05); }
.ez .ez-personen-wahl button i { flex: 0 0 20px; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, 0.1); font-size: 10.5px; font-style: normal; font-weight: 800; color: #fff; }
.ez .ez-personen-wahl button.ist-aktiv { color: #fff; background: linear-gradient(135deg, rgba(var(--ez-tint), 0.55), rgba(var(--ez-tint), 0.22)); box-shadow: inset 0 0 0 1px rgba(232, 201, 106, 0.45), 0 6px 18px -8px rgba(var(--ez-tint), 0.9); }
.ez .ez-personen-wahl button.ist-aktiv i { background: rgba(var(--ez-tint), 0.95); box-shadow: 0 0 0 1.5px rgba(232, 201, 106, 0.85); }
.ez .ez-personen-wahl button.ist-fertig i { font-size: 0; background: rgba(232, 201, 106, 0.18); box-shadow: inset 0 0 0 1.5px rgba(232, 201, 106, 0.85); }
.ez .ez-personen-wahl button.ist-fertig i::after { content: '\2713'; font-size: 11px; color: var(--ez-gold); }
.ez .ez-personen-wahl button.hat-fehler i { background: rgba(255, 128, 160, 0.25); box-shadow: inset 0 0 0 1.5px rgba(255, 128, 160, 0.85); }
.ez .ez-personen-wahl .ez-person-plus { flex: 0 0 auto; color: var(--ez-gold-hell); border: 1px dashed rgba(232, 201, 106, 0.45); }
.ez .ez-personen-wahl .ez-person-plus:disabled { opacity: 0.35; cursor: default; }
.ez .ez-person { display: none; margin: 0; }
.ez .ez-person.ist-aktiv { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 12px; align-items: start; animation: ez-person-ein 0.35s ease both; }
@keyframes ez-person-ein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.ez .ez-person > * { grid-column: 1 / -1; }
.ez .ez-person > .astro-form-row-place, .ez .ez-person > .astro-form-field:not(.aram-gender) { grid-column: auto; }
.ez .ez-person > .astro-form-row-place:last-child, .ez .ez-person.aram-fam-person > .astro-form-field { grid-column: 1 / -1; }
.ez .ez-person-weiter { justify-self: end; display: inline-flex; align-items: center; gap: 6px; margin: 2px 0 0; padding: 4px 2px; border: 0; background: none; color: var(--ez-gold-hell); font-size: 13px; font-weight: 700; cursor: pointer; }
.ez .ez-person-weiter[hidden] { display: none; }
.ez .ez-person-weiter:hover { color: #fff; }
.ez .ez-person-weiter span { transition: transform 0.3s; }
.ez .ez-person-weiter:hover span { transform: translateX(3px); }

/* Familie (Bloecke aus familienanalyse.js): Zaehler als eine Zeile, Kopf und Preiszeile stehen schon oben */
.ez .aram-familie { display: grid; grid-template-columns: minmax(0, 1fr); }
.ez .aram-fam-zaehler { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin: 0 0 10px; padding: 8px 10px 8px 16px; border-radius: 15px; border: 1px solid rgba(255, 255, 255, 0.07); background: rgba(255, 255, 255, 0.03); }
.ez .aram-fam-zeile:first-child, .ez .aram-fam-preis, .ez .aram-fam-kopf { display: none; }
.ez .aram-fam-zeile { order: 1; gap: 14px; }
.ez .aram-fam-allein { order: 2; margin: 0; gap: 8px; font-size: 12.5px; color: var(--ez-mittel); }
.ez .aram-fam-allein .aram-fam-hilfe { display: none; }
.ez .aram-fam-titel { font-size: 13.5px; font-weight: 700; color: #fff; }
.ez .aram-fam-text .aram-fam-hilfe { display: none; }
.ez .aram-fam-btn { width: 32px; height: 32px; border-color: rgba(232, 201, 106, 0.6); color: var(--ez-gold); font-size: 18px; }
.ez .aram-fam-zahl { color: #fff; font-family: 'Cinzel', serif; font-size: 17px; }
.ez .aram-fam-person { margin: 0; padding: 0; border: 0; }
.ez .aram-fam-person .astro-form-field { margin-top: 10px; }
.ez .aram-familie > .ez-person-weiter { margin-top: 6px; }
.ez .aram-familie + .astro-form-row { margin-top: 14px; }

/* Ganze Breite fuer einzelne Felder (Firmenname), Geburtsort allein in seiner Zeile (Kinder) */
.ez .astro-product-form-card > .ez-voll, .ez .ez-form-kind > .astro-form-row-place { grid-column: 1 / -1; }
.ez .ez-form-kind > .astro-form-row ~ .astro-form-row { margin-top: 10px; }
.ez-kind-hinweis { margin: 8px 0 0; padding: 9px 12px; border-radius: 11px; background: rgba(232, 201, 106, 0.08); border: 1px solid rgba(232, 201, 106, 0.25); font-size: 12.5px; line-height: 1.5; color: var(--ez-gold-hell); }
.ez-kind-hinweis[hidden] { display: none; }

/* Zusatzfelder (Wunschregion, Frage, Details): erst ein kleiner Schalter, das Feld klappt auf */
.ez .ez-optional { margin: 8px 0 0; }
.ez .ez-optional-schalter { display: inline-flex; align-items: center; gap: 7px; padding: 0; border: 0; background: none; color: #d9c9ff; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.ez .ez-optional-schalter::before { content: '+'; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; border: 1px solid rgba(232, 201, 106, 0.5); color: var(--ez-gold); font-size: 13px; line-height: 1; }
.ez .ez-optional-schalter:hover { color: #fff; }
.ez .ez-optional .ez-optional-feld { display: none; margin: 0; }
.ez .ez-optional.ist-offen .ez-optional-schalter { display: none; }
.ez .ez-optional.ist-offen .ez-optional-feld { display: block; animation: ez-person-ein 0.3s ease both; }
.ez .astro-textarea { height: auto; min-height: 84px; padding: 12px 15px; line-height: 1.5; resize: vertical; }
.ez .astro-partner-section { margin: 0; }

/* ---------- Bezahlschritt (Stripe-Bereich aus checkout.js) ---------- */
.ez .aram-checkout-section { scroll-margin-top: 86px; }
.ez .aram-checkout-section .ez-schritte { margin-bottom: 14px; }
.ez .aram-checkout-header { padding: 0 0 12px; color: var(--ez-mittel); font-size: 13px; }
.ez .aram-checkout-back { color: #dccdff; padding: 6px 0; font-weight: 600; }
.ez .aram-checkout-back:hover { background: none; color: #fff; }
.ez .aram-checkout-trust svg { stroke: var(--ez-gold); }
.ez .aram-checkout-frame { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 18px; box-shadow: none; padding: 20px; }
.ez .aram-checkout-order-summary { color: #fff; border-bottom-color: rgba(255, 255, 255, 0.08); }
.ez .aram-checkout-order-price { color: var(--ez-gold-hell); font-family: 'Cinzel', serif; font-size: 18px; }
.ez .aram-checkout-pay-btn { width: 100%; margin-top: 16px; padding: 15px 20px; border-radius: 16px; font-size: 17px; font-weight: 800; }
.ez .aram-checkout-reassurance, .ez .aram-checkout-footer { color: var(--ez-leise); font-size: 12px; }
.ez .aram-checkout-footer { margin-top: 12px; text-align: center; }

/* =====================================================================
   2. WAS IN DEINEM BUCH STEHT (schon im dunklen Universum)
   ===================================================================== */
.ez-inhalt { padding-top: clamp(26px, 3vw, 46px); }
.ez-inhalt-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(46px, 6vw, 72px) clamp(26px, 4vw, 54px); }
.ez-merkmal { text-align: center; }
.ez-symbol {
  position: relative;
  width: 116px;
  height: 116px;
  margin: 0 auto 22px;
  display: grid;
  place-items: center;
  animation: ez-schweben 7s ease-in-out infinite;
  animation-delay: calc(var(--v, 0) * -1.15s);
}
.ez-symbol::before {
  content: '';
  position: absolute;
  inset: -22px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(232, 201, 106, 0.26), rgba(var(--ez-tint), 0.14) 55%, rgba(var(--ez-tint), 0) 75%);
  animation: ez-atmen 5s ease-in-out infinite;
  animation-delay: calc(var(--v, 0) * -0.8s);
}
.ez-symbol svg { position: relative; width: 78px; height: 78px; overflow: visible; filter: drop-shadow(0 0 7px rgba(232, 201, 106, 0.6)) drop-shadow(0 0 22px rgba(167, 139, 250, 0.35)); }
.ez-symbol svg * { fill: none; stroke: url(#ez-gold); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ez-symbol svg .ez-riss { stroke: #fff4cc; stroke-width: 2.3; }
.ez.ez-js .ez-symbol svg [pathLength] { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.2s var(--ez-weich); transition-delay: calc(var(--v, 0) * 120ms + 250ms); }
.ez.ez-js .ez-merkmal.ist-da .ez-symbol svg [pathLength] { stroke-dashoffset: 0; }
/* Der kreisende Lichtpunkt um die Symbole ist weg (Wunsch 07.10.2026); das Element bleibt im Seiteninhalt */
.ez-funke { display: none; }
.ez .ez-merkmal h3 { margin: 0 0 10px; font-size: clamp(1.25rem, 1.8vw, 1.45rem); font-weight: 500; color: #fbf7ff; }
.ez .ez-merkmal p { margin: 0 auto; max-width: 30ch; font-size: 15px; line-height: 1.65; color: var(--ez-mittel); }

/* =====================================================================
   3. KOSTPROBE: eigener Himmel (Nebel in Magenta und Indigo), weich abgesetzt
   ===================================================================== */
.ez-probe { padding-bottom: clamp(50px, 6vw, 70px); }
.ez-probe::before {
  content: '';
  position: absolute;
  inset: -40px 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(42% 46% at 20% 48%, rgba(176, 72, 206, 0.24), rgba(176, 72, 206, 0) 70%),
    radial-gradient(40% 46% at 82% 58%, rgba(70, 88, 214, 0.22), rgba(70, 88, 214, 0) 70%),
    linear-gradient(180deg, rgba(20, 10, 44, 0) 0%, #150a31 20%, #1a0d3b 50%, #150a31 80%, rgba(20, 10, 44, 0) 100%);
}
.ez-probe-reiter { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0 auto 28px; }
.ez .ez-probe-reiter button {
  position: relative;
  overflow: hidden;
  padding: 11px 24px;
  border-radius: 999px;
  border: 1px solid rgba(206, 186, 255, 0.24);
  background: rgba(255, 255, 255, 0.03);
  color: var(--ez-mittel);
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: color 0.3s, background 0.3s, border-color 0.3s, box-shadow 0.3s;
}
.ez .ez-probe-reiter button:hover { color: #fff; border-color: rgba(206, 186, 255, 0.5); }
.ez .ez-probe-reiter button[aria-selected="true"] { color: var(--ez-gold-hell); background: rgba(232, 201, 106, 0.12); border-color: rgba(232, 201, 106, 0.75); box-shadow: 0 0 24px rgba(232, 201, 106, 0.22), inset 0 0 14px rgba(232, 201, 106, 0.1); }
.ez .ez-probe-reiter button i { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; transform: scaleX(0); transform-origin: left center; background: var(--ez-gold); }
.ez .ez-probe-reiter button[aria-selected="true"] i { animation: ez-uhr var(--ez-takt, 9s) linear forwards; }
.ez .ez-probe-reiter.ist-pause button i { animation-play-state: paused; }
@keyframes ez-uhr { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.ez-probe-buehne {
  position: relative;
  max-width: 920px;
  margin: 0 auto;
  min-height: 270px;
  padding: clamp(38px, 5vw, 60px) clamp(26px, 6vw, 84px) clamp(30px, 4vw, 44px);
  border-radius: 30px;
  background: radial-gradient(110% 130% at 0% 0%, rgba(176, 72, 206, 0.16), rgba(176, 72, 206, 0) 55%), linear-gradient(160deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01) 55%), rgba(14, 7, 32, 0.72);
  border: 1px solid var(--ez-karte-rand);
  box-shadow: var(--ez-karte-schatten);
  overflow: hidden;
}
.ez-probe-buehne::before {
  content: '\201C';
  position: absolute;
  left: clamp(12px, 2.4vw, 28px);
  top: clamp(-6px, 0.5vw, 8px);
  font-family: 'Fraunces', serif;
  font-size: clamp(110px, 13vw, 170px);
  line-height: 1;
  background: var(--ez-gold-verlauf);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  opacity: 0.3;
  pointer-events: none;
}
/* Alle Beispiele liegen in derselben Zelle: die Buehne ist so hoch wie das laengste, nichts springt */
.ez-probe-saetze { display: grid; }
.ez-probe-satz {
  position: relative;
  grid-area: 1 / 1;
  margin: 0;
  font-family: 'Fraunces', serif;
  font-weight: 300;
  font-style: italic;
  font-size: clamp(1.2rem, 2.05vw, 1.72rem);
  line-height: 1.55;
  color: #fcf8ff;
}
.ez-probe-satz.ist-aus { visibility: hidden; }
.ez-probe-satz .w { display: inline-block; opacity: 0; filter: blur(8px); transform: translateY(10px); transition: opacity 0.6s var(--ez-weich), filter 0.6s var(--ez-weich), transform 0.6s var(--ez-weich); transition-delay: calc(var(--i) * 28ms); }
.ez-probe-satz.ist-da .w { opacity: 1; filter: none; transform: none; }
/* Die Konstellation (z. B. "Dein Jupiter steht im zweiten Haus") steht aufrecht in Gold */
.ez-probe-satz .w.gold { padding-right: 0.1em; margin-right: -0.1em; font-style: normal; font-weight: 400; background: var(--ez-gold-verlauf); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.ez-probe-quelle { display: flex; align-items: center; gap: 12px; margin-top: 26px; font-size: 12px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ez-gold); }
.ez-probe-quelle::before { content: ''; flex: 0 0 36px; height: 1px; background: var(--ez-gold); }
.ez-probe-quelle b { font-weight: inherit; }
.ez-probe-weiter { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 20px; margin-top: 30px; font-size: 16px; color: var(--ez-mittel); }

/* =====================================================================
   4. DIE REISE DURCH DEIN BUCH: aufgeschlagenes Buch (links Inhalt, rechts Kapitel)
   Bis 900 px Breite einseitig: zuerst das Inhaltsverzeichnis, dann blaettert man in die Kapitel.
   ===================================================================== */
.ez-reise { padding-top: clamp(40px, 5vw, 60px); }

/* Bedienung: Pfeile, Punkte und (einseitig) "Inhalt" */
.ez-rs-navi { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 36px; }
.ez .ez-rs-pfeil { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(232, 201, 106, 0.5); background: rgba(255, 255, 255, 0.03); color: var(--ez-gold); font-size: 24px; line-height: 1; cursor: pointer; transition: background 0.3s, box-shadow 0.3s; }
.ez .ez-rs-pfeil:hover { background: rgba(232, 201, 106, 0.12); box-shadow: 0 0 18px rgba(232, 201, 106, 0.3); }
.ez-rs-punkte { display: flex; align-items: center; gap: 8px; }
.ez .ez-rs-punkte button { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 6px; background: rgba(255, 255, 255, 0.22); cursor: pointer; transition: width 0.35s var(--ez-weich), background 0.35s, box-shadow 0.35s; }
.ez .ez-rs-punkte button.ist-aktiv { width: 24px; background: var(--ez-gold); box-shadow: 0 0 10px rgba(232, 201, 106, 0.6); }
.ez .ez-rb-inhalt-knopf { display: none; align-items: center; gap: 6px; height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(232, 201, 106, 0.5); background: rgba(255, 255, 255, 0.03); color: var(--ez-gold-hell); font-size: 14px; font-weight: 700; cursor: pointer; transition: opacity 0.3s; }
.ez .ez-rb-inhalt-knopf:disabled { opacity: 0.35; cursor: default; }

.ez-rs-buch { --rb-papier: radial-gradient(130% 100% at 50% 35%, #fdf6e1 0%, #f3e6c2 55%, #e5d09c 100%); }
.ez-rb-buch {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: 1000px;
  min-height: 540px;
  margin: 0 auto;
  /* grosse Perspektive: das Blatt ragt beim Umdrehen kaum ueber das Buch hinaus */
  perspective: 4000px;
  border-radius: 14px;
  touch-action: pan-y;
  /* Seitenstapel an den Aussenkanten */
  box-shadow: -5px 5px 0 -1px #eadab1, -9px 9px 0 -2px #d9c48f, 5px 5px 0 -1px #eadab1, 9px 9px 0 -2px #d9c48f;
}
/* Einband hinter den Seiten, mit Schein */
.ez-rb-buch::before {
  content: '';
  position: absolute;
  inset: -16px -20px -22px;
  z-index: -1;
  border-radius: 20px;
  background: linear-gradient(135deg, #2b1a52, #120a2c);
  box-shadow: inset 0 0 0 1px rgba(232, 201, 106, 0.4), 0 50px 90px -30px rgba(0, 0, 0, 0.85), 0 0 90px rgba(232, 201, 106, 0.14);
}
.ez-rb-seite { position: relative; padding: 44px 46px 38px; background: var(--rb-papier); color: #3a2810; overflow: hidden; }
.ez-rb-links { border-radius: 14px 3px 3px 14px; box-shadow: inset -30px 0 40px -24px rgba(110, 70, 20, 0.5), inset 0 0 0 1px rgba(150, 110, 40, 0.22); }
.ez-rb-rechts { display: grid; border-radius: 3px 14px 14px 3px; box-shadow: inset 30px 0 40px -24px rgba(110, 70, 20, 0.5), inset 0 0 0 1px rgba(150, 110, 40, 0.22); }
.ez-rb-falz { position: absolute; left: 50%; top: 0; bottom: 0; width: 70px; margin-left: -35px; z-index: 3; pointer-events: none; background: linear-gradient(90deg, rgba(80, 50, 10, 0), rgba(80, 50, 10, 0.22) 44%, rgba(60, 36, 6, 0.42) 50%, rgba(80, 50, 10, 0.22) 56%, rgba(80, 50, 10, 0)); }
.ez-rb-kopf { text-align: center; font-family: 'Cinzel', serif; font-size: 15px; font-weight: 600; letter-spacing: 0.34em; color: #8a5f1c; }
.ez-rb-kopf::after { content: '\2726'; display: block; margin-top: 6px; font-size: 11px; letter-spacing: 0; color: #b98a2e; }
.ez-rb-liste { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 3px; }
.ez .ez-rb-liste button {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: #3a2810;
  text-align: left;
  cursor: pointer;
  transition: background 0.3s, color 0.3s;
}
.ez .ez-rb-liste button::after { content: ''; flex: 1; min-width: 12px; margin-left: 4px; border-bottom: 1px dotted rgba(122, 82, 26, 0.45); transform: translateY(5px); }
.ez .ez-rb-liste button:hover { background: rgba(185, 138, 46, 0.12); }
.ez .ez-rb-liste button.ist-aktiv { background: linear-gradient(90deg, rgba(201, 153, 60, 0.3), rgba(201, 153, 60, 0.05)); color: #241504; }
.ez-rb-glyph {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(150, 105, 30, 0.5);
  color: #9a6c22;
  font-family: 'Segoe UI Symbol', 'Apple Symbols', 'Noto Sans Symbols 2', 'Noto Sans Symbols', sans-serif;
  font-variant-emoji: text;
  font-size: 15px;
  transition: background 0.3s, color 0.3s;
}
.ez-rb-liste button.ist-aktiv .ez-rb-glyph { background: #9a6c22; border-color: #9a6c22; color: #fff6dc; }
.ez-rb-name { font-family: 'Fraunces', serif; font-size: 17.5px; line-height: 1.25; white-space: nowrap; }
.ez-rb-mehr { margin-top: 16px; text-align: center; font-family: 'Fraunces', serif; font-style: italic; font-size: 14.5px; color: #8a5f1c; }

/* Kapitel liegen uebereinander. Das alte verschwindet sofort (das Blatt zeigt es beim Umdrehen).
   Der Text der neuen Seite (ez-rb-kommt) bleibt unsichtbar, bis das Blatt die Seite ganz
   freigegeben hat, und blendet erst dann ein. So stehen nie zwei Texte zugleich auf einer Seite. */
.ez-rb-kapitel {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  opacity: 0;
  visibility: hidden;
}
.ez-rb-kapitel.ist-aktiv { opacity: 1; visibility: visible; }
.ez-rb-kapitel.ez-rb-kommt, .ez-rb-links.ez-rb-kommt > * { animation: ez-rb-ein 0.45s ease 0.42s both; }
@keyframes ez-rb-ein { from { opacity: 0; } to { opacity: 1; } }
.ez-rb-zeichen {
  width: 94px;
  height: 94px;
  margin-bottom: 20px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1.5px solid #b98a2e;
  box-shadow: 0 0 0 7px rgba(185, 138, 46, 0.12), inset 0 0 22px rgba(185, 138, 46, 0.28);
  color: #9a6c22;
  font-family: 'Segoe UI Symbol', 'Apple Symbols', 'Noto Sans Symbols 2', 'Noto Sans Symbols', sans-serif;
  font-variant-emoji: text;
  font-size: 44px;
}
.ez-rb-bereich { font-size: 11.5px; font-weight: 800; letter-spacing: 0.3em; text-transform: uppercase; color: #a0782c; }
.ez .ez-rb-kapitel h3 { margin: 10px 0 14px; font-size: clamp(1.6rem, 2.5vw, 2.05rem); font-weight: 500; line-height: 1.15; color: #241504; }
.ez .ez-rb-kapitel p { margin: 0; max-width: 31ch; font-size: 16px; line-height: 1.7; color: #4a3518; }
.ez-rb-zier { display: flex; align-items: center; gap: 10px; margin-top: 22px; color: #b98a2e; font-size: 13px; }
.ez-rb-zier i { width: 46px; height: 1px; background: linear-gradient(90deg, rgba(185, 138, 46, 0), #b98a2e); }
.ez-rb-zier i:last-child { transform: scaleX(-1); }

/* Das umblaetternde Blatt: vorne die alte Seite, hinten das Inhaltsverzeichnis, auf dem es landet */
.ez-rb-blatt { position: absolute; top: 0; bottom: 0; left: 50%; width: 50%; z-index: 4; transform-origin: left center; transform-style: preserve-3d; pointer-events: none; visibility: hidden; }
.ez-rb-blatt.dreht { visibility: visible; animation: ez-blaettern 0.95s cubic-bezier(0.45, 0.05, 0.3, 1) forwards; }
.ez-rb-blatt-vorne, .ez-rb-blatt-hinten { position: absolute; inset: 0; overflow: hidden; background: var(--rb-papier); -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.ez-rb-blatt-vorne { display: grid; padding: 44px 46px 38px; border-radius: 3px 14px 14px 3px; box-shadow: inset 30px 0 40px -24px rgba(110, 70, 20, 0.5); }
.ez-rb-blatt-vorne.ist-inhalt { display: block; }
/* Kopie auf dem Blatt: Sichtbarkeit vom Blatt erben. Mit "visible" bliebe sie nach dem Umblaettern
   ueber der neuen Seite stehen, wenn das Blatt selbst schon unsichtbar ist. */
.ez-rb-blatt-vorne .ez-rb-kapitel { opacity: 1; visibility: inherit; animation: none; }
.ez-rb-blatt-hinten { transform: rotateY(180deg); padding: 44px 46px 38px; border-radius: 14px 3px 3px 14px; box-shadow: inset -30px 0 40px -24px rgba(110, 70, 20, 0.5), inset 0 0 0 1px rgba(150, 110, 40, 0.22); }
@keyframes ez-blaettern { from { transform: rotateY(0deg); } to { transform: rotateY(-180deg); } }
@keyframes ez-blaettern-einzeln { from { transform: rotateY(0deg); } to { transform: rotateY(-96deg); } }

/* Einseitig (Handy, Tablet hochkant): Inhaltsverzeichnis und Kapitel liegen auf derselben Seite,
   das Blatt dreht sich am linken Rand (Buchruecken) weg */
@media (max-width: 900px) {
  .ez-rb-buch { grid-template-columns: minmax(0, 1fr); width: calc(100% - 16px); max-width: 480px; min-height: 0; perspective: 3400px; box-shadow: 5px 5px 0 -1px #eadab1, 9px 9px 0 -2px #d9c48f; }
  .ez-rb-buch::before { inset: -10px -14px -14px -10px; border-radius: 16px; }
  .ez-rb-seite { grid-area: 1 / 1; padding: 30px 22px 28px; }
  .ez-rb-links, .ez-rb-rechts { border-radius: 4px 14px 14px 4px; box-shadow: inset 26px 0 34px -22px rgba(110, 70, 20, 0.5), inset 0 0 0 1px rgba(150, 110, 40, 0.22); }
  .ez-rb-rechts { min-height: 440px; }
  .ez-rb-falz { display: none; }
  .ez-rs-buch:not(.zeigt-inhalt) .ez-rb-links,
  .ez-rs-buch.zeigt-inhalt .ez-rb-rechts,
  .ez-rs-buch.zeigt-inhalt .ez-rb-rechts .ez-rb-kapitel { visibility: hidden; }
  .ez-rb-blatt { left: 0; width: 100%; }
  .ez-rb-blatt.dreht { animation: ez-blaettern-einzeln 0.62s cubic-bezier(0.4, 0, 0.6, 0.6) forwards; }
  .ez-rb-kapitel.ez-rb-kommt, .ez-rb-links.ez-rb-kommt > * { animation: ez-rb-ein 0.4s ease 0.6s both; }
  .ez-rb-blatt-vorne { padding: 30px 22px 28px; border-radius: 4px 14px 14px 4px; box-shadow: inset 26px 0 34px -22px rgba(110, 70, 20, 0.5), inset 0 0 0 1px rgba(150, 110, 40, 0.22); }
  .ez-rb-blatt-hinten { display: none; }
  .ez-rb-liste { margin-top: 14px; }
  .ez .ez-rb-liste button { gap: 10px; padding: 8px; }
  .ez .ez-rb-liste button::after { min-width: 0; }
  .ez-rb-name { font-size: 16px; white-space: normal; }
  .ez-rs-navi { gap: 10px; margin-top: 36px; }
  .ez .ez-rb-inhalt-knopf { display: inline-flex; }
}

/* ---------- Ende: +12 ---------- */
.ez-reise-ende { display: flex; flex-direction: column; align-items: center; text-align: center; margin-top: clamp(30px, 4vw, 46px); }
.ez-reise-plus {
  width: 84px;
  height: 84px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(var(--ez-tint), 0.55), var(--ez-karte-fest) 72%);
  border: 1px solid rgba(232, 201, 106, 0.9);
  box-shadow: 0 0 34px rgba(232, 201, 106, 0.5), 0 0 80px rgba(var(--ez-tint), 0.4);
  color: var(--ez-gold-hell);
  font-family: 'Cinzel', serif;
  font-size: 24px;
  font-weight: 600;
}
.ez .ez-reise-ende h3 { margin: 18px 0 8px; font-size: clamp(1.35rem, 2vw, 1.65rem); font-weight: 500; color: #fbf7ff; }
.ez .ez-reise-ende p { margin: 0; max-width: 520px; font-size: 15px; line-height: 1.65; color: var(--ez-mittel); }
.ez .ez-reise-ende .ez-knopf { margin-top: 20px; }

/* =====================================================================
   5. ZAHLEN (schmale Leiste)
   ===================================================================== */
.ez-zahlen { padding: clamp(10px, 2vw, 20px) 0 clamp(30px, 4vw, 50px); }
.ez-zahlen-band {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  max-width: 980px;
  margin: 0 auto;
  padding: 20px 16px;
  border-radius: 22px;
  background: linear-gradient(120deg, rgba(var(--ez-tint), 0.16), rgba(0, 0, 0, 0) 50%, rgba(232, 201, 106, 0.07)), var(--ez-karte-fest);
  box-shadow: 0 30px 70px -40px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  overflow: hidden;
}
.ez-zahlen-band::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(from var(--ez-w), rgba(232, 201, 106, 0) 0deg, rgba(251, 233, 176, 0.9) 60deg, rgba(var(--ez-tint), 0.85) 140deg, rgba(232, 201, 106, 0) 220deg, rgba(232, 201, 106, 0) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: ez-umlauf 9s linear infinite;
  pointer-events: none;
}
.ez-zahl-feld { position: relative; text-align: center; padding: 2px 8px; }
.ez-zahl-feld + .ez-zahl-feld::before { content: ''; position: absolute; left: 0; top: 12%; bottom: 12%; width: 1px; background: linear-gradient(180deg, rgba(232, 201, 106, 0), rgba(232, 201, 106, 0.4), rgba(232, 201, 106, 0)); }
.ez-zahl {
  display: block;
  font-family: 'Cinzel', serif;
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  background: var(--ez-gold-verlauf);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 0 16px rgba(232, 201, 106, 0.3));
}
.ez-zahl-feld span { display: block; margin-top: 8px; font-size: 12.5px; letter-spacing: 0.03em; color: var(--ez-mittel); }

/* =====================================================================
   6. FRAGEN: zur Abwechslung etwas heller, aber ruhig: ein feiner Lichtstreif als Trennung oben, darunter ein
   weicher Lavendel-Schein hinter der Ueberschrift, der zur Mitte der Fragen hin ausklingt (keine Farbflecken an
   den Seiten, nicht bis ganz nach unten; 07.10.2026)
   ===================================================================== */
.ez-faq { padding-top: clamp(40px, 4.5vw, 64px); padding-bottom: clamp(36px, 4vw, 50px); }
.ez-faq::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -30px;
  height: min(620px, 70%);
  z-index: -1;
  pointer-events: none;
  background:
    /* 09.10.2026: Mitte tiefer und kleiner, damit der Schein vor der Oberkante ausklingt (vorher bei 8 % hart abgeschnitten) */
    radial-gradient(50% 40% at 50% 34%, rgba(176, 146, 255, 0.24), rgba(176, 146, 255, 0) 72%),
    linear-gradient(180deg, rgba(36, 21, 82, 0) 0%, rgba(36, 21, 82, 0.82) 18%, rgba(36, 21, 82, 0.45) 60%, rgba(36, 21, 82, 0) 100%);
}
.ez-faq::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  width: min(720px, 78%);
  height: 1px;
  transform: translateX(-50%);
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(232, 201, 106, 0), rgba(232, 201, 106, 0.42) 30%, rgba(196, 165, 255, 0.5) 70%, rgba(196, 165, 255, 0));
}
.ez-faq-liste { max-width: 860px; margin: 0 auto; display: grid; gap: 12px; }
.ez-frage {
  border-radius: 20px;
  background: var(--ez-karte-bg);
  border: 1px solid var(--ez-karte-rand);
  box-shadow: var(--ez-karte-schatten);
  transition: background 0.35s, border-color 0.35s, box-shadow 0.35s;
}
.ez-frage:hover { border-color: rgba(255, 255, 255, 0.16); }
.ez-frage.ist-offen { background: linear-gradient(135deg, rgba(var(--ez-tint), 0.18), rgba(0, 0, 0, 0) 70%), var(--ez-karte-bg); border-color: rgba(232, 201, 106, 0.35); }
.ez .ez-frage button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 24px;
  border: 0;
  background: none;
  color: #fbf7ff;
  font-size: 16.5px;
  font-weight: 600;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
}
.ez-plus { position: relative; flex: 0 0 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(232, 201, 106, 0.5); transition: transform 0.45s var(--ez-weich), background 0.3s; }
.ez-plus::before, .ez-plus::after { content: ''; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.6px; margin: -0.8px 0 0 -6px; border-radius: 2px; background: var(--ez-gold); transition: transform 0.45s var(--ez-weich); }
.ez-plus::after { transform: rotate(90deg); }
.ez-frage.ist-offen .ez-plus { transform: rotate(180deg); background: rgba(232, 201, 106, 0.12); }
.ez-frage.ist-offen .ez-plus::after { transform: rotate(0deg); }
.ez-antwort { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.5s var(--ez-weich); }
.ez-frage.ist-offen .ez-antwort { grid-template-rows: 1fr; }
.ez-antwort > div { overflow: hidden; }
.ez .ez-antwort p { margin: 0; padding: 0 24px 22px; font-size: 15px; line-height: 1.7; color: #ffffff; }
.ez-faq-fuss { margin-top: 22px; text-align: center; font-size: 15px; color: var(--ez-mittel); }
.ez .ez-faq-fuss a { color: var(--ez-gold); text-decoration: underline; text-underline-offset: 4px; }

/* Kundenstimmen (Shortcode im Seiteninhalt, erscheint erst ab drei Bewertungen) */
.ez-stimmen:empty { display: none; }
.ez-stimmen { position: relative; width: min(1180px, calc(100% - 40px)); margin: 0 auto clamp(30px, 4vw, 50px); }

/* =====================================================================
   7. BEREIT? (Buch klappt auf)
   ===================================================================== */
.ez-final { padding-top: clamp(30px, 4vw, 50px); padding-bottom: clamp(100px, 12vw, 160px); }
.ez .ez-final .astro-plt-section { padding: 0; background: none; }
.ez .ez-final .astro-plt-flag {
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: clamp(26px, 4vw, 56px);
  padding: clamp(30px, 5vw, 60px);
  border-radius: 34px;
  background: radial-gradient(70% 90% at 85% 50%, rgba(232, 201, 106, 0.08), rgba(232, 201, 106, 0) 70%), var(--ez-karte-bg);
  border: 1px solid var(--ez-karte-rand);
  box-shadow: var(--ez-karte-schatten);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.ez .ez-final-text .ez-h2 { margin-top: 14px; }
.ez .ez-final-text .ez-sub { margin: 0; }
.ez .ez-final .astro-plt-flag ul { margin: 22px 0 6px; }
.ez-final-preis { display: flex; align-items: baseline; gap: 14px; margin: 24px 0 22px; }
.ez-final-preis b { font-family: 'Cinzel', serif; font-size: 44px; font-weight: 600; line-height: 1; background: var(--ez-gold-verlauf); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; filter: drop-shadow(0 0 16px rgba(232, 201, 106, 0.35)); }
.ez-final-preis span { font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ez-leise); }
.ez-final-knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 26px; }
.ez-final-zahlung { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.ez-final-zahlung img { height: 24px; width: auto; border-radius: 4px; opacity: 0.9; }

/* ---------- Leiste unten (Handy) ---------- */
.ez-leiste {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 90;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 10px 10px 18px;
  border-radius: 20px;
  background: var(--ez-karte-fest);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.6);
  transform: translateY(150%);
  transition: transform 0.5s var(--ez-weich);
}
.ez-leiste.ist-sichtbar { transform: none; }
.ez-leiste b { display: block; font-family: 'Fraunces', serif; font-size: 15.5px; font-weight: 500; color: #fff; }
.ez-leiste span { display: block; font-size: 11.5px; color: var(--ez-leise); }
.ez .ez-leiste a { flex: 0 0 auto; padding: 13px 18px; border-radius: 14px; font-size: 14px; font-weight: 800; text-decoration: none; white-space: nowrap; }

/* =====================================================================
   Kleinere Bildschirme
   ===================================================================== */
@media (max-width: 1080px) {
  .ez-hero-raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ez-minibuch { width: 140px; margin-left: 40px; }
}

@media (max-width: 980px) {
  .ez-hero-raster { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .ez-hero-links { position: static; padding-top: 0; text-align: center; }
  .ez .ez-lead { margin-left: auto; margin-right: auto; }
  .ez-vorteile { max-width: 520px; margin-left: auto; margin-right: auto; text-align: left; }
  .ez-hero-schau { justify-content: center; }
  .ez-eckdaten { text-align: left; }
  .ez-formular { max-width: 620px; margin: 0 auto; width: 100%; }
  .ez-rad-hero { width: 130vw; right: -65vw; top: 260px; opacity: 0.1; }
  .ez-inhalt-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ez-leiste { display: flex; }
  .ez .ez-final .astro-plt-flag { grid-template-columns: 1fr; text-align: center; }
  .ez-final-preis, .ez-final-knoepfe, .ez-final-zahlung { justify-content: center; }
  .ez-final-knoepfe .ez-leseprobe-hinweis { text-align: center; }
  .ez .ez-final .astro-plt-flag ul { text-align: left; max-width: 520px; margin-left: auto; margin-right: auto; }
}

@media (max-width: 760px) {
  .ez-zahlen-band { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 18px; }
  .ez-zahl-feld:nth-child(3)::before { display: none; }
}

@media (max-width: 560px) {
  .ez-wrap { width: calc(100% - 32px); }
  .ez .ez-h1 { font-size: clamp(2rem, 8.6vw, 2.5rem); margin: 18px 0 18px; }
  .ez-hero-schau { gap: 22px; }
  .ez-minibuch { width: 112px; margin: 6px 0 34px 30px; }
  .ez-eckdaten { gap: 8px; }
  .ez-eckdaten div { min-width: 0; padding: 9px 12px; gap: 8px; }
  .ez-eckdaten b { font-size: 19px; }
  .ez-eckdaten span { font-size: 10px; letter-spacing: 0.12em; }
  .ez-inhalt-raster { grid-template-columns: 1fr; }
  .ez .astro-form-row { grid-template-columns: 1fr; }
  .ez .astro-product-form-card, .ez .ez-person.ist-aktiv { grid-template-columns: minmax(0, 1fr); }
  .ez .ez-personen-wahl button { padding: 0 11px; font-size: 13px; }
  .ez-schritte li { flex-direction: column; justify-content: center; gap: 5px; padding: 9px 4px; font-size: 11px; line-height: 1.2; text-align: center; white-space: normal; }
  .ez-schritte i { flex-basis: auto; width: 20px; height: 20px; font-size: 10px; }
  .ez-form-kopf { gap: 10px; }
  .ez-preis b { font-size: 29px; }
  .ez .astro-product-form-card, .ez .aram-checkout-section { padding: 20px 18px; }
  .ez-probe-buehne { border-radius: 24px; }
  .ez .ez-frage button { padding: 18px 18px; font-size: 15.5px; }
  .ez .ez-antwort p { padding: 0 18px 20px; }
  .ez .ez-final .astro-plt-flag { border-radius: 26px; padding: 30px 20px; }
}

/* =====================================================================
   Handy und Tablet (Touch): Sparmodus fuer fluessiges Scrollen (08.10.2026)
   Abschnitte erschienen mit Weichzeichner, Dauer-Effekte (umlaufende Raender, Schimmer, Glanz, Goldstaub, Funken,
   flackernde Strahlen) musste das Handy jedes Bild neu malen; es ruckelte, und beim schnellen Scrollen blieben
   Formularfelder und Symbole leer, weil der Grafikspeicher nicht reichte. Hier steht alles gleich da und still; die
   Symbole schweben weiter, das Buch klappt weiter auf.
   ===================================================================== */
@media (hover: none) and (pointer: coarse) {
  @keyframes ez-auftauchen-leicht { from { opacity: 0; transform: translate3d(0, 18px, 0); } to { opacity: 1; transform: none; } }
  .ez-auf { animation-name: ez-auftauchen-leicht; }
  .ez.ez-js .ez-rv { opacity: 1; transform: none; filter: none; transition: none; }
  .ez.ez-js .ez-symbol svg [pathLength] { stroke-dashoffset: 0; transition: none; }
  .ez-symbol svg { filter: none; }
  .ez-probe-satz .w { filter: none; transition: opacity 0.5s var(--ez-weich), transform 0.5s var(--ez-weich); }
  .ez .ez-knopf, .ez .astro-btn-primary, .ez .ez-leiste a, .ez .aram-checkout-pay-btn,
  .ez .ez-knopf::after, .ez .astro-btn-primary::after, .ez-h2 em, .ez-h1 em,
  .ez-aura::before, .ez-zahlen-band::before, .ez-mb-vorne::after, .ez-rad svg, .ez-minibuch, .ez-mb-schein,
  .ez-schritte li.ist-bereit, .ez .astro-product-form-card { animation: none !important; }
  /* Schlussbuch (buch-buehne.js): Goldstaub und Funken weg, der grosse Stern steht still */
  .ez .ab-buch .ab-staub, .ez .ab-buch .ab-funken { display: none !important; }
  .ez .ab-buch .ab-vorne::after, .ez .astro-plt-flag .abs-strahlen, .ez .astro-plt-flag .abs-strahlen line, .ez .astro-plt-flag .abs-kern,
  .ez .astro-plt-flag .abs-funke, .ez .astro-plt-flag .abs-schein { animation: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .ez *, .ez *::before, .ez *::after { animation: none !important; }
  .ez.ez-js .ez-rv { opacity: 1; transform: none; filter: none; transition: none; }
  .ez.ez-js .ez-symbol svg [pathLength] { stroke-dashoffset: 0; transition: none; }
  .ez-probe-satz .w { opacity: 1; filter: none; transform: none; transition: none; }
  .ez-mb-deckel, .ez-mb-b3, .ez-mb-licht { transition: none; }
}