/* ===== Verenas Herzcoaching – Kartenlegen · Premium Stylesheet (Design A) ===== */
/* Pink-Hintergrund · Schrift Hellblau/Silber · Buttons Dunkelblau · Karten Dunkelblau + Gold */

:root {
  /* --- Pink (Hauptfarbe, ~60 %) --- */
  --pink:        #EC5AA6;
  --pink-deep:   #C2136F;
  --pink-soft:   #F7B8D6;
  --pink-bg:     #EA5AA5;   /* Pink (etwas heller) */
  --pink-bg2:    #D63E93;

  /* --- Dunkelblau / Petrol (~30 %) --- */
  --petrol-dark: #16255A;   /* dunkle Bänder & Karten-Überschriften (Dunkelblau, Petrol raus) */
  --petrol:      #24468C;   /* Sekundär-Dunkelblau (früher Petrol) */
  --navy:        #123463;   /* Dunkelblau für Buttons */
  --navy-2:      #0E2447;
  /* Petrol aufgehoben – aktuell ungenutzt, evtl. später (z. B. Coaching) wieder aufgreifen */
  --petrol-keep-dark: #0E3B47;
  --petrol-keep:      #1C5A6B;
  --blue-dark:   #16255A;   /* Alias */
  --blue:        #24468C;   /* Alias */

  /* --- Akzente (~10 %) --- */
  --blue-light:  #7FC3E0;   /* Hellblau */
  --blue-lighter:#BFE3EC;
  --panel-bg:    #E4F1FB;   /* Kaesten: Pink-Seiten hellblau (Blau-Seiten setzen hellrosa) */
  --gold:        #CBA14B;
  --gold-soft:   #F0DBA6;
  --silver:      #DCE0E6;

  --ink:         #2A2230;   /* Text in weißen Karten */
  --heading:     #16255A;   /* Überschriften IN weißen Karten (Dunkelblau) */
  --on-pink:     #9FD6EF;   /* Design A: Überschriften auf Pink (Hellblau) */
  --on-pink-soft:#E9F5FC;   /* Fließtext auf Pink (Silber/Weiß) */
  --muted:       #6E6577;
  --white:       #ffffff;
  --card-ink:    #E4C55C;   /* Gold-Symbol auf den dunkelblauen Karten */

  --radius:      18px;
  --radius-lg:   26px;
  --radius-xl:   34px;
  --shadow:      0 26px 60px -22px rgba(90,8,52,.5);
  --shadow-pink: 0 22px 52px -18px rgba(120,10,66,.5);
  --shadow-blue: 0 22px 52px -18px rgba(14,30,70,.5);
  --maxw:        1320px;
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans:  "Inter", system-ui, -apple-system, sans-serif;
  --ease:  cubic-bezier(.22, 1, .36, 1);
  /* Karten Dunkelblau (wie die Buttons) */
  --card-grad: linear-gradient(160deg, #2A5CA6 0%, #123463 100%);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body {
  font-family: var(--sans); color: var(--on-pink-soft); line-height: 1.7; font-weight: 300;
  overflow-x: hidden; -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(120% 90% at 12% 0%, #F59BCB 0%, transparent 55%),
    radial-gradient(115% 85% at 100% 8%, #EF69AF 0%, transparent 55%),
    linear-gradient(180deg, #EA5AA5 0%, #D63E93 100%);
  background-attachment: fixed;
  min-height: 100vh;
}
.container { width: min(100% - 44px, var(--maxw)); margin-inline: auto; }
h1,h2,h3 { font-family: var(--serif); font-weight: 600; line-height: 1.1; }
h1,h2 { color: var(--on-pink); }       /* Überschriften auf Pink: Hellblau */
h3 { color: var(--heading); }          /* Überschriften in weißen Karten: Petrol */
em { font-style: italic; }
a { color: inherit; text-decoration: none; }
.hl-blue { color: var(--blue-light); font-style: italic; }

/* ===== Bewegliche blaue Schrift (hell ↔ dunkel bei Hover) ===== */
.mvblue {
  font-style: italic;
  background: linear-gradient(90deg, #5aa9cf 0%, #bfe8f7 30%, #ffffff 50%, #bfe8f7 70%, #5aa9cf 100%);
  background-size: 220% 100%;
  background-position: 0% 50%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  transition: background-position 1.1s var(--ease);
}
.mvblue:hover, h1:hover .mvblue, h2:hover .mvblue, a:hover .mvblue { background-position: 100% 50%; }
.section--dark .mvblue, .section--cta .mvblue { background: linear-gradient(90deg, var(--blue-light), #eafaff, var(--blue-light)); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* ===== Scroll-Progress & Cursor ===== */
.scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0%; background: linear-gradient(90deg, var(--blue-light), #fff); z-index: 200; box-shadow: 0 0 12px rgba(255,255,255,.5); transition: width .1s linear; }
.cursor-glow { position: fixed; top: 0; left: 0; width: 460px; height: 460px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.14), transparent 62%); transform: translate(-50%,-50%); pointer-events: none; z-index: 1; opacity: 0; transition: opacity .4s ease; }

/* ===== Fliegende Karten (globale Ebene) ===== */
.flying-cards { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.fcard { position: absolute; width: 42px; height: 60px; border-radius: 7px; background: var(--card-grad); box-shadow: 0 8px 22px -8px rgba(11,42,58,.55); display: flex; align-items: center; justify-content: center; color: var(--card-ink); font-size: 1.1rem; border: 1.5px solid rgba(203,161,75,.85); opacity: .0; will-change: transform, opacity; }
.fcard::after { content: ""; position: absolute; inset: 4px; border-radius: 4px; border: 1px solid rgba(203,161,75,.35); }
@keyframes flyAcross { 0% { opacity: 0; transform: translate(-12vw, 0) rotate(-20deg); } 8% { opacity: .9; } 92% { opacity: .9; } 100% { opacity: 0; transform: translate(112vw, -60px) rotate(200deg); } }

/* ===== Buttons ===== */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--sans); font-weight: 600; font-size: .98rem; padding: 15px 30px; border-radius: 999px; cursor: pointer; overflow: hidden; border: 1.5px solid transparent; white-space: nowrap; letter-spacing: .2px; transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .35s; }
.btn svg { transition: transform .35s var(--ease); }
.btn:hover svg { transform: translateX(4px); }
.btn--lg { padding: 18px 38px; font-size: 1.05rem; }
.btn--small { padding: 10px 22px; font-size: .9rem; }
.btn::after { content: ""; position: absolute; inset: 0; border-radius: 999px; background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.5) 50%, transparent 70%); transform: translateX(-120%); transition: transform .8s var(--ease); }
.btn:hover::after { transform: translateX(120%); }
/* Dunkelblaue Buttons */
.btn--pink { background: linear-gradient(135deg, #2A5CA6 0%, #123463 100%); color: #fff; box-shadow: var(--shadow-blue); border-color: rgba(255,255,255,.35); }
.btn--pink:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 26px 50px -14px rgba(14,30,70,.7); }
.btn--blue { background: linear-gradient(135deg, #1E4E92 0%, #0E2447 100%); color: #fff; box-shadow: var(--shadow-blue); }
.btn--blue:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 26px 50px -14px rgba(14,30,70,.7); }
.btn--ghost { border-color: rgba(255,255,255,.55); color: var(--on-pink-soft); background: rgba(255,255,255,.08); backdrop-filter: blur(6px); }
.btn--ghost:hover { border-color: #fff; background: #fff; color: var(--navy); transform: translateY(-3px); }
.btn--ghost-light { border-color: rgba(255,255,255,.6); color: #fff; }
.btn--ghost-light:hover { background: #fff; color: var(--navy); transform: translateY(-3px); }
.btn--outline { border-color: rgba(255,255,255,.6); color: var(--on-pink-soft); background: transparent; }
.btn--outline:hover { background: #fff; color: var(--navy); transform: translateY(-3px); box-shadow: var(--shadow-blue); }

/* ===== Navigation ===== */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: 80px; display: flex; align-items: center; background: rgba(200,38,128,.92); backdrop-filter: blur(14px); border-bottom: 1px solid rgba(255,255,255,.16); transition: background .4s, box-shadow .4s, height .4s; }
.nav.is-scrolled { background: rgba(200,38,128,.96); backdrop-filter: blur(16px); height: 66px; box-shadow: 0 6px 30px -18px rgba(90,8,52,.55); border-bottom: 1px solid rgba(255,255,255,.2); }
.nav__inner { display: flex; align-items: center; justify-content: space-between; width: min(100% - 44px, var(--maxw)); margin-inline: auto; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand__text { font-family: var(--serif); font-size: 1.35rem; color: #F4FAFE; font-weight: 500; }
.brand__text strong { color: #ffffff; font-weight: 700; }
.nav.is-scrolled .brand__text { font-size: 1.2rem; }
/* Karten-Logo, das sich beim Hover dreht */
.brand__card { width: 30px; height: 42px; perspective: 600px; display: inline-block; }
.brand__card-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .8s var(--ease); }
.brand:hover .brand__card-inner { transform: rotateY(180deg); }
.brand__face { position: absolute; inset: 0; border-radius: 6px; display: flex; align-items: center; justify-content: center; backface-visibility: hidden; border: 1.5px solid rgba(255,255,255,.7); background: var(--card-grad); color: var(--card-ink); font-size: 1rem; box-shadow: 0 6px 16px -6px rgba(11,42,58,.55); }
.brand__face--back { transform: rotateY(180deg); }
.nav__links { display: flex; align-items: center; gap: 24px; }
/* Menüpunkte mit Karten-Flip */
.navlink { position: relative; display: inline-flex; align-items: center; gap: 8px; font-size: .95rem; font-weight: 500; color: #EAF6FC; transition: color .25s; }
.navlink__flip { width: 16px; height: 22px; border-radius: 4px; background: var(--card-grad); border: 1px solid rgba(255,255,255,.7); transform: rotateY(0deg); transform-style: preserve-3d; transition: transform .7s var(--ease); box-shadow: 0 4px 10px -4px rgba(11,42,58,.55); }
.navlink:hover .navlink__flip { transform: rotateY(180deg); }
.navlink:hover { color: #fff; }
.navlink__t::after { content: ""; position: absolute; left: 24px; right: 0; bottom: -5px; height: 2px; width: 0; background: linear-gradient(90deg,#fff,var(--blue-light)); transition: width .3s var(--ease); }
.navlink:hover .navlink__t::after { width: calc(100% - 24px); }
.nav__toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 8px; z-index: 101; }
.nav__toggle span { width: 26px; height: 2px; background: #fff; border-radius: 2px; transition: .3s var(--ease); }
.nav__toggle.is-open span:nth-child(1){ transform: translateY(7px) rotate(45deg);} .nav__toggle.is-open span:nth-child(2){opacity:0;} .nav__toggle.is-open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg);}

/* ===== HERO ===== */
.hero { position: relative; min-height: 100svh; display: flex; align-items: center; overflow: hidden; padding: 120px 0 80px; isolation: isolate; }
.hero--compact { min-height: auto; padding: 150px 0 70px; }
.hero__bg { position: absolute; inset: 0; z-index: -2; background: transparent; }
.hero__mesh { position: absolute; inset: -20%; background:
  radial-gradient(40% 50% at 18% 28%, rgba(255,150,205,.34), transparent 60%),
  radial-gradient(45% 55% at 82% 22%, rgba(127,195,224,.3), transparent 60%),
  radial-gradient(50% 60% at 62% 82%, rgba(240,219,166,.18), transparent 60%),
  radial-gradient(45% 55% at 12% 86%, rgba(120,10,66,.28), transparent 60%);
  filter: blur(30px); animation: meshFloat 18s ease-in-out infinite alternate; }
@keyframes meshFloat { 0%{ transform: translate3d(0,0,0) scale(1);} 100%{ transform: translate3d(2%,-2%,0) scale(1.08);} }
.hero__orb { position: absolute; border-radius: 50%; filter: blur(8px); opacity: .5; }
.hero__orb--1 { width: 320px; height: 320px; top: 8%; right: 6%; background: radial-gradient(circle, rgba(255,170,215,.5), transparent 70%); animation: floatY 9s ease-in-out infinite; }
.hero__orb--2 { width: 220px; height: 220px; bottom: 12%; left: 4%; background: radial-gradient(circle, rgba(127,195,224,.45), transparent 70%); animation: floatY 11s ease-in-out infinite reverse; }
.hero__orb--3 { width: 160px; height: 160px; top: 40%; left: 46%; background: radial-gradient(circle, rgba(240,219,166,.4), transparent 70%); animation: floatY 7s ease-in-out infinite; }
@keyframes floatY { 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-28px);} }
.hero__grain { position: absolute; inset: 0; opacity: .04; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.hero__inner { position: relative; z-index: 2; max-width: 820px; }
.hero__eyebrow { text-transform: uppercase; letter-spacing: 2.5px; font-size: .76rem; color: var(--on-pink); font-weight: 700; margin-bottom: 24px; }
.hero__title { font-size: clamp(2.6rem, 6vw, 5.2rem); font-weight: 700; letter-spacing: -1px; color: var(--on-pink); }
.hero__title em { color: #ffffff; font-style: italic; }
.reveal-line { display: block; overflow: hidden; }
.reveal-line > span { display: block; transform: translateY(115%); animation: lineUp 1s var(--ease) forwards; }
.reveal-line:nth-child(1)>span{animation-delay:.35s;} .reveal-line:nth-child(2)>span{animation-delay:.5s;} .reveal-line:nth-child(3)>span{animation-delay:.65s;}
@keyframes lineUp { to { transform: translateY(0);} }
.hero__lead { font-size: clamp(1.1rem, 2.1vw, 1.35rem); color: var(--on-pink-soft); max-width: 620px; margin: 26px 0 36px; }
.hero__lead strong { color: #ffffff; font-weight: 700; }
.hero__cta { display: flex; gap: 14px; flex-wrap: wrap; }
.hero__trust { display: flex; gap: 36px; margin-top: 50px; flex-wrap: wrap; }
.hero__trust div { display: flex; flex-direction: column; }
.hero__trust strong { font-family: var(--serif); font-size: 1.8rem; color: var(--on-pink); font-weight: 700; }
.hero__trust span { font-size: .85rem; color: rgba(233,245,252,.8); }
/* Karten-Fächer im Hero */
.hero__deck { position: absolute; right: 4%; top: 50%; transform: translateY(-50%); width: 340px; height: 420px; z-index: 1; display: none; }
.deckcard { position: absolute; left: 50%; top: 50%; width: 120px; height: 172px; margin: -86px 0 0 -60px; border-radius: 14px; background: var(--card-grad); border: 2px solid rgba(255,255,255,.7); box-shadow: 0 24px 50px -18px rgba(11,42,58,.6); display: flex; align-items: center; justify-content: center; transform-origin: bottom center; animation: deckFloat 6s ease-in-out infinite; }
.deckcard__face { font-size: 2.2rem; color: var(--card-ink); }
.deckcard::after { content:""; position:absolute; inset:8px; border-radius:9px; border:1px solid rgba(203,161,75,.3);}
.deckcard--1 { transform: rotate(-30deg) translateY(6px); animation-delay:.0s;}
.deckcard--2 { transform: rotate(-15deg); animation-delay:.4s;}
.deckcard--3 { transform: rotate(0deg) translateY(-6px); animation-delay:.8s;}
.deckcard--4 { transform: rotate(15deg); animation-delay:1.2s;}
.deckcard--5 { transform: rotate(30deg) translateY(6px); animation-delay:1.6s;}
@keyframes deckFloat { 0%,100%{ translate: 0 0;} 50%{ translate: 0 -14px;} }
.hero__scroll { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); width: 26px; height: 42px; border: 2px solid rgba(255,255,255,.5); border-radius: 14px; display: flex; justify-content: center; padding-top: 8px; z-index: 2; }
.hero__scroll-dot { width: 4px; height: 8px; border-radius: 2px; background: #fff; animation: scrollDot 1.6s var(--ease) infinite; }
@keyframes scrollDot { 0%{opacity:0;transform:translateY(0);}40%{opacity:1;}100%{opacity:0;transform:translateY(14px);} }

/* ===== UVP ===== */
.uvp { background: linear-gradient(120deg, var(--petrol-dark), #24468C); color: #fff; padding: clamp(50px,7vw,90px) 0; position: relative; overflow: hidden; }
.uvp::before { content:""; position:absolute; inset:0; background: radial-gradient(60% 120% at 50% 0%, rgba(127,195,224,.22), transparent 60%);}
.uvp__text { position: relative; font-family: var(--serif); font-size: clamp(1.5rem,3.4vw,2.5rem); line-height: 1.4; text-align: center; max-width: 960px; margin-inline: auto; font-weight: 500; }
.uvp__accent { display: inline; }

/* ===== Sections ===== */
.section { padding: clamp(70px,9vw,120px) 0; position: relative; z-index: 1; }
.section--tint { background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(200,38,128,.12)); }
.section--dark { background: linear-gradient(150deg, var(--petrol-dark) 0%, #24468C 130%); color: #fff; }
.section--cta { background: linear-gradient(150deg, #16255A 0%, var(--petrol) 200%); color: #fff; text-align: center; }
.kicker { text-transform: uppercase; letter-spacing: 2.5px; font-size: .75rem; font-weight: 700; color: #F1F8FD; margin-bottom: 16px; }
.kicker--light { color: var(--gold-soft); }
.section__head { max-width: 760px; margin-bottom: 56px; }
.section h2 { font-size: clamp(2rem,4.6vw,3.1rem); }
.h2--light { color: #fff; }
.section__intro { font-size: 1.12rem; color: var(--on-pink-soft); margin-top: 18px; }
.section--dark .section__intro { color: rgba(255,255,255,.82); }
.lead-text { font-size: 1.2rem; color: var(--on-pink-soft); margin: 22px 0 16px; font-weight: 400; }

/* ===== Reveal ===== */
.reveal { opacity: 0; transform: translateY(38px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: calc(var(--i,0)*90ms); }
.reveal.is-visible { opacity: 1; transform: none; }

/* ===== Container: Zoom + Schatten bei Hover ===== */
.tilt { transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s; will-change: transform; }
.tilt:hover { transform: scale(1.045) translateY(-6px); box-shadow: var(--shadow); z-index: 3; }

/* ===== Angebote (Offers) / weiße Info-Karten ===== */
.offers { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
.offer { position: relative; background: rgba(255,255,255,.94); color: var(--ink); border: 1px solid rgba(255,255,255,.6); border-radius: var(--radius-lg); padding: 34px 26px; display: flex; flex-direction: column; overflow: hidden; }
.offer__card { width: 46px; height: 64px; perspective: 600px; display: inline-block; margin-bottom: 20px; }
.offer__card-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .8s var(--ease); }
.offer:hover .offer__card-inner { transform: rotateY(180deg); }
.offer__cf { position: absolute; inset: 0; border-radius: 8px; display: flex; align-items: center; justify-content: center; backface-visibility: hidden; background: var(--card-grad); border: 1.5px solid rgba(255,255,255,.7); color: var(--card-ink); font-size: 1.3rem; box-shadow: 0 8px 18px -8px rgba(11,42,58,.5); }
.offer__cf--back { transform: rotateY(180deg); }
.offer__tag { font-size: .74rem; text-transform: uppercase; letter-spacing: 1px; color: var(--petrol); font-weight: 700; margin-bottom: 12px; }
.offer h3 { font-size: 1.3rem; margin-bottom: 12px; }
.offer p { color: var(--muted); font-size: .95rem; flex-grow: 1; }
.offer__link { margin-top: 20px; color: var(--navy); font-weight: 600; font-size: .92rem; align-self: flex-start; transition: color .3s; }
.offer__link:hover { color: var(--pink-deep); }
.offer--feature { background: linear-gradient(160deg, var(--petrol-dark), #24468C); border: none; color: #fff; }
.offer--feature .offer__tag { color: var(--gold-soft); }
.offer--feature h3 { color: #fff; }
.offer--feature p { color: rgba(255,255,255,.82); }
.offer--feature .offer__link { color: var(--blue-light); }
.offer__ribbon { position: absolute; top: 16px; right: -30px; transform: rotate(45deg); background: linear-gradient(135deg, var(--gold), #b8862f); color: #fff; font-size: .7rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; padding: 5px 36px; }

/* ===== Für Frauen & Männer ===== */
.fmcards { display: grid; grid-template-columns: repeat(2,1fr); gap: 24px; }
.fmcard { position: relative; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16); border-radius: var(--radius-lg); padding: 40px 34px; overflow: hidden; }
.fmcard__glyph { font-size: 2.6rem; color: var(--gold-soft); display: inline-block; margin-bottom: 14px; }
.fmcard h3 { color: #fff; font-size: 1.5rem; margin-bottom: 10px; }
.fmcard p { color: rgba(255,255,255,.82); }

/* ===== Themen / weiße Karten ===== */
.themes { display: grid; grid-template-columns: repeat(4,1fr); gap: 22px; }
.theme { background: rgba(255,255,255,.94); color: var(--ink); border: 1px solid rgba(255,255,255,.6); border-radius: var(--radius-lg); padding: 34px 28px; }
.theme__icon { display: inline-flex; width: 54px; height: 54px; align-items: center; justify-content: center; border-radius: 14px; background: var(--card-grad); font-size: 1.5rem; color: var(--card-ink); margin-bottom: 18px; box-shadow: 0 6px 16px -8px rgba(11,42,58,.5); }
.theme h3 { font-size: 1.3rem; margin-bottom: 10px; }
.theme p { color: var(--muted); font-size: .96rem; }

/* ===== Ablauf / Steps ===== */
.steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.step { position: relative; background: rgba(255,255,255,.94); color: var(--ink); border: 1px solid rgba(255,255,255,.6); border-radius: var(--radius-xl); padding: 44px 32px 36px; overflow: hidden; }
.step::before { content:""; position:absolute; top:0; left:0; right:0; height:4px; background: linear-gradient(90deg,var(--navy),var(--blue-light)); transform: scaleX(0); transform-origin:left; transition: transform .5s var(--ease);}
.step:hover::before { transform: scaleX(1);}
.step__num { width: 52px; height: 52px; border-radius: 50%; background: linear-gradient(135deg, var(--navy), var(--petrol)); color: #fff; font-family: var(--serif); font-size: 1.5rem; font-weight: 700; display: flex; align-items: center; justify-content: center; margin-bottom: 18px; box-shadow: var(--shadow-blue); }
.step h3 { font-size: 1.35rem; margin-bottom: 10px; }
.step p { color: var(--muted); }

/* ===== Über mich ===== */
.about__grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(36px,6vw,80px); align-items: center; }
.about__fan { position: relative; height: 320px; display: flex; align-items: center; justify-content: center; }
.fancard { position: absolute; width: 150px; height: 214px; border-radius: 16px; background: var(--card-grad); border: 2px solid rgba(255,255,255,.7); box-shadow: 0 24px 50px -18px rgba(11,42,58,.6); display: flex; align-items: center; justify-content: center; transform-origin: bottom center; transition: transform .5s var(--ease); }
.fancard span { font-size: 2.6rem; color: var(--card-ink); }
.fancard::after { content:""; position:absolute; inset:9px; border-radius:11px; border:1px solid rgba(203,161,75,.3);}
.fancard--a { transform: rotate(-18deg) translateX(-40px); }
.fancard--b { transform: rotate(0deg) translateY(-10px); z-index: 2; }
.fancard--c { transform: rotate(18deg) translateX(40px); }
.about__visual:hover .fancard--a { transform: rotate(-26deg) translateX(-64px) translateY(-6px); }
.about__visual:hover .fancard--c { transform: rotate(26deg) translateX(64px) translateY(-6px); }

/* ===== Quotes ===== */
.quotes { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.quote { background: rgba(255,255,255,.95); color: var(--ink); border: 1px solid rgba(255,255,255,.6); border-radius: var(--radius-lg); padding: 34px 30px; box-shadow: var(--shadow-blue); }
.quote__stars { color: var(--gold); letter-spacing: 3px; margin-bottom: 16px; }
.quote blockquote { font-family: var(--serif); font-size: 1.3rem; line-height: 1.45; color: var(--heading); margin-bottom: 16px; }
.quote figcaption { font-size: .9rem; color: var(--muted); font-weight: 500; }

/* ===== FAQ ===== */
.faq { max-width: 820px; }
.faq__item { background: rgba(255,255,255,.95); color: var(--ink); border: 1px solid rgba(255,255,255,.6); border-radius: var(--radius); padding: 4px 24px; margin-bottom: 12px; transition: box-shadow .3s, transform .3s; }
.faq__item:hover { box-shadow: var(--shadow-blue); }
.faq__item summary { cursor: pointer; list-style: none; padding: 18px 0; font-weight: 600; color: var(--heading); position: relative; padding-right: 30px; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: "+"; position: absolute; right: 0; top: 16px; font-size: 1.4rem; color: var(--navy); transition: transform .3s; }
.faq__item[open] summary::after { transform: rotate(45deg); }
.faq__item p { color: var(--muted); padding: 0 0 18px; }

/* ===== Coaching-Teaser (helle Insel auf Pink) ===== */
.coachteaser__inner { display: flex; align-items: center; justify-content: space-between; gap: 30px; background: rgba(255,255,255,.94); color: var(--ink); border: 1px solid rgba(255,255,255,.6); border-radius: var(--radius-xl); padding: clamp(34px,5vw,54px); flex-wrap: wrap; box-shadow: var(--shadow); }
.coachteaser__inner h2 { color: var(--heading); }
.coachteaser__inner .kicker { color: var(--navy); }
.coachteaser__inner .mvblue { background: linear-gradient(90deg,#16255A,#2A5CA6,#16255A); background-size:220% 100%; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.coachteaser__inner p { color: #4a4453; max-width: 560px; margin-top: 10px; }

/* ===== CTA ===== */
.cta { max-width: 760px; margin-inline: auto; }
.cta h2 { font-size: clamp(2.1rem,5vw,3.4rem); }
.cta__intro { color: rgba(255,255,255,.85); font-size: 1.14rem; margin: 20px auto 34px; max-width: 560px; }
.cta__buttons { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 20px; }
.cta__note { font-size: .9rem; color: rgba(255,255,255,.66); }

/* ===== Footer ===== */
.footer { background: var(--petrol-dark); color: rgba(255,255,255,.8); padding: 60px 0 32px; position: relative; z-index: 1; }
.footer__inner { display: grid; grid-template-columns: 1.4fr 1fr; gap: 30px; align-items: start; }
.footer__brand .brand__text { color: #fff; font-size: 1.4rem; }
.footer__brand .brand__text strong { color: var(--gold-soft); }
.footer__brand p { margin-top: 10px; font-size: .94rem; color: rgba(255,255,255,.64); }
.footer__links { display: flex; flex-wrap: wrap; gap: 14px 26px; justify-self: end; }
.footer__links a { font-size: .93rem; transition: color .25s; }
.footer__links a:hover { color: var(--gold-soft); }
.footer__copy { grid-column: 1/-1; border-top: 1px solid rgba(255,255,255,.14); padding-top: 22px; margin-top: 14px; font-size: .84rem; color: rgba(255,255,255,.52); }

/* ===== WhatsApp FAB ===== */
.wa-fab { position: fixed; bottom: 26px; right: 26px; z-index: 90; width: 60px; height: 60px; border-radius: 50%; background: #25D366; color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 12px 30px -6px rgba(37,211,102,.6); transition: transform .3s var(--ease); }
.wa-fab::before { content:""; position:absolute; inset:0; border-radius:50%; border:2px solid #25D366; animation: pulse 2.4s ease-out infinite;}
@keyframes pulse { 0%{transform:scale(1);opacity:.7;}100%{transform:scale(1.7);opacity:0;} }
.wa-fab:hover { transform: scale(1.1); }

/* ===== Interaktives: Karte ziehen ===== */
.draw { max-width: 900px; margin-inline: auto; text-align: center; }
.deck-switch { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 6px; padding: 6px; border-radius: 999px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.3); margin-bottom: 32px; }
.deck-switch button { border: none; background: transparent; color: var(--on-pink-soft); font-family: var(--sans); font-weight: 600; font-size: .95rem; padding: 10px 18px; border-radius: 999px; cursor: pointer; transition: background .3s, color .3s; }
.deck-switch button.is-active { background: #fff; color: var(--navy); }
.draw__stage { perspective: 1200px; display: flex; justify-content: center; margin-bottom: 30px; }
.drawcard { width: 210px; height: 320px; position: relative; transform-style: preserve-3d; transition: transform .8s var(--ease); }
.drawcard.is-flipped { transform: rotateY(180deg); }
.drawcard__face { position: absolute; inset: 0; border-radius: 18px; backface-visibility: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 22px; border: 2px solid rgba(255,255,255,.8); box-shadow: 0 30px 60px -22px rgba(11,42,58,.65); }
.drawcard__back { background: var(--card-grad); color: var(--card-ink); }
.drawcard__back::after { content:""; position:absolute; inset:12px; border-radius:12px; border:1px solid rgba(203,161,75,.3); }
.drawcard__back-glyph { font-size: 3.4rem; }
.drawcard__front { background: linear-gradient(165deg,#ffffff, #eaf6fc 60%, #d6ecfa); color: var(--heading); transform: rotateY(180deg); text-align: center; }
.drawcard__num { font-size: .8rem; letter-spacing: 1px; text-transform: uppercase; color: var(--navy); font-weight: 700; }
.drawcard__symbol { font-size: 3rem; margin: 6px 0 8px; }
.drawcard__name { font-family: var(--serif); font-size: 1.5rem; line-height: 1.1; color: var(--heading); }
.drawcard__kern { margin-top: 12px; font-size: .95rem; color: #4a4453; font-style: italic; }
.draw__meanings { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin-top: 8px; text-align: left; opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.draw__meanings.is-visible { opacity: 1; transform: none; }
.meaning { background: rgba(255,255,255,.94); color: var(--ink); border-radius: var(--radius-lg); padding: 26px 24px; border: 1px solid rgba(255,255,255,.6); }
.meaning h3 { display: flex; align-items: center; gap: 8px; font-size: 1.15rem; margin-bottom: 10px; }
.meaning h3 span { font-size: 1.3rem; }
.meaning p { color: #4a4453; font-size: .96rem; }

/* ===== Mondkalender ===== */
.moon-now { display: grid; grid-template-columns: auto 1fr; gap: clamp(24px,4vw,48px); align-items: center; background: linear-gradient(160deg, #eaf6fc, #d6ecfa); color: var(--ink); border-radius: var(--radius-xl); padding: clamp(28px,4vw,44px); border: 1px solid rgba(127,195,224,.5); box-shadow: var(--shadow); }
.moon-disc { width: 130px; height: 130px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fdfbf4, #d9d2c0); box-shadow: inset -18px -10px 34px rgba(20,20,40,.55), 0 10px 30px -12px rgba(11,42,58,.4); position: relative; overflow: hidden; }
.moon-disc__shadow { position: absolute; inset: 0; border-radius: 50%; background: #14213a; }
.moon-now__phase { font-family: var(--serif); font-size: 1.9rem; color: var(--heading); line-height: 1.1; }
.moon-now__meta { color: var(--navy); font-weight: 600; margin: 6px 0 12px; }
.moon-now__text { color: #4a4453; }
.moon-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; }
.moonphase { background: linear-gradient(160deg, #eaf6fc, #d6ecfa); color: var(--ink); border-radius: var(--radius-lg); padding: 26px 22px; border: 1px solid rgba(127,195,224,.5); transition: box-shadow .3s, transform .3s; }
.moonphase.is-current { border: 2px solid var(--navy); box-shadow: var(--shadow-blue); }
.moonphase__emoji { font-size: 2.2rem; }
.moonphase h3 { font-size: 1.15rem; margin: 8px 0 8px; }
.moonphase p { color: #4a4453; font-size: .92rem; margin-bottom: 8px; }
.moonphase .mp-label { display: inline-block; font-size: .72rem; text-transform: uppercase; letter-spacing: .5px; font-weight: 700; color: var(--navy); margin-top: 6px; }
.mp-fm { display: grid; gap: 6px; margin-top: 4px; }
.mp-fm span { font-size: .9rem; color: #4a4453; }
.mp-fm b { color: var(--pink-deep); }

/* ===== Responsive ===== */
@media (min-width: 1080px){ .hero__deck { display: block; } .hero__inner { max-width: 640px; } }
@media (max-width: 960px){ .offers,.themes,.moon-grid { grid-template-columns: repeat(2,1fr);} .about__grid { grid-template-columns: 1fr;} .about__visual{max-width:360px;margin-inline:auto;} .draw__meanings{ grid-template-columns:1fr;} .moon-now{ grid-template-columns:1fr; text-align:center; justify-items:center;} }
@media (max-width: 860px){
  .nav__toggle { display: flex; }
  .nav__links { position: fixed; inset: 0 0 0 auto; width: min(82vw,330px); flex-direction: column; align-items: flex-start; justify-content: center; gap: 24px; padding: 40px; background: rgba(200,38,128,.97); backdrop-filter: blur(16px); box-shadow: -20px 0 60px -20px rgba(90,8,52,.6); transform: translateX(100%); transition: transform .45s var(--ease); }
  .nav__links.is-open { transform: translateX(0); }
  .navlink { font-size: 1.15rem; }
  .steps { grid-template-columns: 1fr;}
}
/* Mobil: die hellen Rosa-Glows zuruecknehmen. Sie sind in % bemessen und liegen
   auf background-attachment: fixed, also viewport-relativ – auf schmalen Screens
   deckten sie fast die ganze Flaeche ab und wuschen das kraeftige Pink zu Rosa aus
   (Fliesstext-Kontrast nur 1.8:1). Basis-Pink traegt hier den Hintergrund. */
@media (max-width: 860px){
  body {
    background:
      radial-gradient(140% 50% at 50% 0%, rgba(245,155,203,.10) 0%, transparent 58%),
      linear-gradient(180deg, #B01F70 0%, #A3115E 100%);
    background-attachment: fixed;
  }
  .hero__mesh { opacity: .28; }
  .hero__orb--1 { opacity: .15; }
}
@media (max-width: 560px){
  .offers,.themes,.quotes,.fmcards,.moon-grid { grid-template-columns: 1fr; }
  .hero__trust { gap: 22px; }
  .btn { white-space: normal; text-align: center; line-height: 1.25; }
  .btn--lg { width: 100%; padding: 16px 22px; }
  .footer__inner { grid-template-columns: 1fr; } .footer__links { justify-self: start; }
  .coachteaser__inner { flex-direction: column; align-items: flex-start; }
}

.offer, .theme, .step, .quote, .faq__item, .meaning, .prose, .card-white { background: var(--panel-bg) !important; }

/* ===== Reduced Motion ===== */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .reveal { opacity:1; transform:none;} .reveal-line>span{transform:none;} .cursor-glow,.flying-cards{display:none;}
}

/* === Felder: weisse Panels einfaerben (Hellblau Standard; Coaching-Seiten Hellrosa via --panel-bg) === */
:root{ --panel-bg:#E4F1FB; }
.offer, .theme, .step, .quote, .faq__item, .coachteaser__inner, .meaning,
.prose, .card-white, .legal .container{ background: var(--panel-bg) !important; }


/* ===== Dropdown-Untermenue (Nav) ===== */
.navdrop { position: relative; }
.navdrop__label { display: inline-flex; align-items: center; font-size: .95rem; font-weight: 500; color: #EAF6FC; cursor: pointer; transition: color .25s; }
.navdrop:hover .navdrop__label { color: #fff; }
.navdrop__label--static { cursor: default; }
.navdrop__toggle { margin-left: 5px; width: 16px; height: 16px; padding: 0; border: none; background: none; cursor: pointer; }
.navdrop__toggle::before { content: ""; display: block; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; color: #EAF6FC; transform: rotate(45deg); margin: -4px auto 0; transition: transform .3s var(--ease); }
.navdrop:hover .navdrop__toggle::before, .navdrop.is-open .navdrop__toggle::before { transform: rotate(225deg); color: #fff; }
.navdrop__menu { position: absolute; top: calc(100% + 12px); left: 0; min-width: 215px; display: flex; flex-direction: column; gap: 2px; padding: 8px; border-radius: 14px; background: rgba(200,38,128,.97); backdrop-filter: blur(16px); box-shadow: 0 20px 44px -18px rgba(90,8,52,.6); border: 1px solid rgba(255,255,255,.2); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s; z-index: 120; }
.navdrop:hover .navdrop__menu, .navdrop:focus-within .navdrop__menu { opacity: 1; visibility: visible; transform: translateY(0); }
.navdrop::after { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 14px; }
.navdrop__menu a { display: block; padding: 9px 14px; border-radius: 9px; font-size: .92rem; color: #EAF6FC; white-space: nowrap; transition: background .2s, color .2s; }
.navdrop__menu a:hover { background: rgba(255,255,255,.14); color: #fff; }
@media (max-width: 860px){
  .navdrop { width: 100%; flex-wrap: wrap; align-items: center; gap: 8px; }
  .navdrop__label { padding: 0; }
  .navdrop__toggle { width: 34px; height: 34px; margin-left: auto; }
  .navdrop__menu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: none; background: rgba(255,255,255,.08); backdrop-filter: none; margin-top: 10px; width: 100%; max-height: 0; overflow: hidden; padding: 0 10px; transition: max-height .35s var(--ease), padding .3s; }
  .navdrop.is-open .navdrop__menu { max-height: 320px; padding: 8px 10px; }
  .navdrop::after { display: none; }
}