/* ===================================================================
   The Perfect Match — Workshop-Funnel
   Markentreu zu juliafrisch.com & go.juliafrisch.com:
   hell/weiß-dominant, rhythmische Sektions-Bänder (hell · Navy · Pink),
   Marken-Pink #EF6391 als CTA, Outfit + Instrument Sans + Inter.
   Eingebunden über: <link href="/styles.css">
   =================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800;900&family=Instrument+Sans:wght@400;500;600;700&family=Inter:wght@500;600;700;800&display=swap');

:root {
  /* Flächen */
  --jf-bg: #FFFFFF;
  --jf-tint: #F4F5F8;          /* sanftes Grau-Band */
  --jf-pink-wash: #FCEFF4;     /* zarter Pink-Schimmer (Hero) */
  --jf-navy: #06214D;
  --jf-indigo: #22244B;
  --jf-card: #FFFFFF;

  /* Akzente */
  --jf-pink: #EF6391;
  --jf-pink-deep: #D94E7C;
  --jf-pink-soft: #FCEBF1;
  --jf-gold: #C9A66B;
  --jf-gold-light: #E6CF9A;

  /* Text */
  --jf-text: #06214D;
  --jf-text-body: #3A414B;
  --jf-text-muted: #6B7280;

  /* Schatten */
  --jf-shadow-sm: 0 6px 22px rgba(6,33,77,.07);
  --jf-shadow-md: 0 18px 46px rgba(6,33,77,.12);
  --jf-shadow-lg: 0 30px 70px rgba(6,33,77,.16);
  --jf-shadow-pink: 0 14px 34px rgba(239,99,145,.34);

  --jf-radius: 18px;
  --jf-radius-lg: 28px;
  --jf-btn-radius: 40px;

  --font-display: 'Outfit', sans-serif;
  --font-headline: 'Outfit', sans-serif;
  --font-h2: 'Outfit', sans-serif;
  --font-body: 'Instrument Sans', sans-serif;
  --font-button: 'Inter', sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  background: var(--jf-bg);
  color: var(--jf-text-body);
  line-height: 1.65;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--font-display); color: var(--jf-text); line-height: 1.16; font-weight: 700; letter-spacing: -.015em; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--jf-pink-deep); text-decoration: none; transition: color .2s ease; }
strong { font-weight: 600; color: inherit; }

.container { max-width: 980px; margin: 0 auto; padding: 0 24px; }
.container-wide { max-width: 1180px; margin: 0 auto; padding: 0 24px; }

/* ===================== SECTION-BÄNDER (Rhythmus) ===================== */
.band { padding: clamp(56px, 8vw, 100px) 0; position: relative; }
.band-tight { padding: clamp(40px, 6vw, 72px) 0; position: relative; }
.band-light { background: var(--jf-bg); }
.band-tint  { background: var(--jf-tint); }
.band-navy  {
  background:
    radial-gradient(ellipse 75% 55% at 75% 0%, rgba(239,99,145,.14), transparent 62%),
    linear-gradient(180deg, #0A2A5E 0%, var(--jf-navy) 100%);
  color: #fff;
}
.band-navy h1, .band-navy h2, .band-navy h3 { color: #fff; }
.band-pinkwash { background: linear-gradient(180deg, var(--jf-pink-wash) 0%, var(--jf-bg) 100%); }

/* ===================== SCROLL-REVEAL ===================== */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1); will-change: opacity, transform; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal-d1 { transition-delay: .08s; } .reveal-d2 { transition-delay: .16s; } .reveal-d3 { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1 !important; transform: none !important; transition: none !important; } }

/* ===================== EYEBROW ===================== */
.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-button); font-weight: 700; font-size: 12.5px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--jf-pink-deep);
  background: var(--jf-pink-soft); border: 1px solid rgba(239,99,145,.22);
  padding: 8px 18px; border-radius: var(--jf-btn-radius);
}
.band-navy .eyebrow { color: #fff; background: rgba(239,99,145,.22); border-color: rgba(239,99,145,.4); }

/* ===================== HEADLINES ===================== */
.h-display { font-size: clamp(32px, 5.4vw, 54px); font-weight: 800; letter-spacing: -.025em; }
.h-section { font-size: clamp(26px, 3.8vw, 40px); font-weight: 700; letter-spacing: -.02em; }
.lead { font-size: clamp(17px, 2.1vw, 20px); color: var(--jf-text-muted); line-height: 1.6; }
.band-navy .lead { color: #c4d2e8; }
.center { text-align: center; }
.mw-head { max-width: 760px; margin-left: auto; margin-right: auto; }
.section-head { text-align: center; margin-bottom: clamp(34px, 5vw, 56px); }
.section-head .eyebrow { margin-bottom: 18px; }
.section-head .h-section { margin-bottom: 12px; }

/* ===================== BUTTONS ===================== */
.btn {
  font-family: var(--font-button); font-weight: 700; font-size: 16px; letter-spacing: .01em;
  border: none; border-radius: var(--jf-btn-radius);
  padding: 17px 40px; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  cursor: pointer; text-align: center; line-height: 1.2; position: relative; overflow: hidden;
  transition: transform .22s cubic-bezier(.16,1,.3,1), box-shadow .22s ease, background .22s ease;
}
.btn::after { content: ''; position: absolute; top: 0; left: -75%; width: 50%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.3), transparent); transform: skewX(-20deg); transition: left .6s ease; }
.btn:hover::after { left: 130%; }
.btn-primary { background: var(--jf-pink); color: #fff; box-shadow: var(--jf-shadow-pink); }
.btn-primary:hover { background: var(--jf-pink-deep); color: #fff; transform: translateY(-2px); box-shadow: 0 20px 44px rgba(239,99,145,.42); }
.btn-light { background: #fff; color: var(--jf-navy); box-shadow: var(--jf-shadow-md); }
.btn-light:hover { color: var(--jf-pink-deep); transform: translateY(-2px); }
.btn-lg { font-size: 17.5px; padding: 19px 46px; }

/* ===================== HERO (hell) ===================== */
.hero {
  background:
    radial-gradient(ellipse 70% 60% at 50% -10%, rgba(239,99,145,.22), transparent 60%),
    linear-gradient(180deg, var(--jf-pink-wash) 0%, var(--jf-bg) 78%);
  padding: clamp(56px, 8vw, 104px) 24px clamp(48px, 6vw, 80px);
  text-align: center; position: relative; overflow: hidden;
}
.hero .eyebrow { margin-bottom: 22px; }
.hero-h3 { font-family: var(--font-body); font-size: clamp(16px, 2.1vw, 20px); font-weight: 500; color: var(--jf-text-muted); margin-bottom: 12px; }
.hero-h1 { font-size: clamp(33px, 5.6vw, 56px); font-weight: 800; letter-spacing: -.025em; color: var(--jf-navy); }
.hero-h2 { font-size: clamp(28px, 4.8vw, 46px); font-weight: 700; letter-spacing: -.02em; color: var(--jf-navy); }
.hero-h1 em, .hero-h2 em { font-style: normal; color: inherit; }
.hero-sub { font-size: clamp(17px, 2vw, 20px); color: var(--jf-text-muted); max-width: 620px; margin: 22px auto 0; }

/* Success-check (DOI) */
.success-check {
  width: 88px; height: 88px; margin: 0 auto 26px; border-radius: 50%;
  background: linear-gradient(135deg, var(--jf-pink), var(--jf-pink-deep));
  display: grid; place-items: center;
  box-shadow: 0 18px 44px rgba(239,99,145,.4), 0 0 0 9px var(--jf-pink-soft);
  animation: pop .65s cubic-bezier(.16,1.4,.3,1) both;
}
.success-check svg { width: 42px; height: 42px; }
@keyframes pop { 0% { transform: scale(.5); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

/* ===================== STEP-CARD (Kalender) ===================== */
.step-card {
  background: var(--jf-card); border-radius: var(--jf-radius-lg);
  box-shadow: var(--jf-shadow-lg); padding: clamp(30px, 4.5vw, 52px);
  max-width: 720px; margin: 0 auto; text-align: center; position: relative;
  border: 1px solid rgba(6,33,77,.05);
}
.step-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--jf-navy); color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 19px;
  margin-bottom: 16px;
}
.step-card h2 { font-size: clamp(22px, 3vw, 30px); margin-bottom: 8px; }
.step-card p.sub { color: var(--jf-text-muted); margin-bottom: 28px; }
.cal-providers { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 30px; }
.cal-providers a {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--jf-tint); color: var(--jf-navy);
  font-family: var(--font-button); font-weight: 600; font-size: 13.5px;
  padding: 10px 17px; border-radius: var(--jf-btn-radius);
  border: 1px solid rgba(6,33,77,.07); transition: all .2s ease;
}
.cal-providers a:hover { background: #fff; border-color: var(--jf-pink); color: var(--jf-pink-deep); transform: translateY(-2px); box-shadow: var(--jf-shadow-sm); }
.cal-providers a img { width: 20px; height: 20px; object-fit: contain; display: block; }

/* ===================== VIDEO ===================== */
.video-wrap {
  position: relative; width: 100%; padding-top: 56.25%; max-width: 880px; margin: 0 auto;
  border-radius: var(--jf-radius-lg); overflow: hidden; box-shadow: var(--jf-shadow-lg); background: var(--jf-navy);
}
.video-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ===================== CHECK-LIST ===================== */
.checklist { list-style: none; display: grid; gap: 15px; text-align: left; }
.checklist li { display: flex; gap: 13px; align-items: flex-start; font-size: 16.5px; }
.checklist li::before {
  content: ''; flex: 0 0 23px; width: 23px; height: 23px; margin-top: 1px; border-radius: 50%;
  background: var(--jf-pink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/13px no-repeat;
  box-shadow: 0 4px 10px rgba(239,99,145,.28);
}
.band-navy .checklist li { color: #dbe4f1; }
.band-navy .checklist li strong { color: #fff; }

/* ===================== STORY-CARDS ===================== */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }
.story-card {
  background: #fff; border-radius: var(--jf-radius); box-shadow: var(--jf-shadow-sm);
  padding: 28px 26px; height: 100%; border: 1px solid rgba(6,33,77,.05);
  transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease;
}
.story-card:hover { transform: translateY(-4px); box-shadow: var(--jf-shadow-md); }
.story-card .ico { width: 50px; height: 50px; border-radius: 14px; display: grid; place-items: center; font-size: 23px; background: var(--jf-pink-soft); margin-bottom: 14px; }
.story-card p { color: var(--jf-text-muted); font-size: 15.5px; }
.story-group { margin-bottom: clamp(34px, 5vw, 56px); }
.story-group:last-child { margin-bottom: 0; }
.group-title { text-align: center; font-size: clamp(20px, 2.8vw, 28px); margin-bottom: 26px; font-weight: 700; }
.group-title .tag { display: inline-block; margin-left: 8px; }

/* ===================== TESTIMONIAL CARDS ===================== */
.tm-card {
  background: #fff; border-radius: var(--jf-radius); box-shadow: var(--jf-shadow-sm);
  padding: 32px 30px; height: 100%; border: 1px solid rgba(6,33,77,.05);
  transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease;
}
.tm-card:hover { transform: translateY(-4px); box-shadow: var(--jf-shadow-md); }
.tm-name { font-family: var(--font-display); font-weight: 700; font-size: 21px; color: var(--jf-navy); display: flex; align-items: center; gap: 11px; margin-bottom: 16px; }
.tm-name .av { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, var(--jf-pink), var(--jf-pink-deep)); display: grid; place-items: center; font-size: 19px; }
.tm-card p { color: var(--jf-text-muted); margin-bottom: 12px; font-size: 15.5px; }
.tm-card blockquote {
  margin-top: 16px; padding: 16px 20px; background: var(--jf-pink-soft);
  border-radius: 14px; border-left: 3px solid var(--jf-pink);
  font-family: var(--font-display); font-weight: 600; color: var(--jf-navy); font-size: 16.5px; line-height: 1.5;
}

/* Lead-Quote */
.lead-quote { text-align: center; max-width: 720px; margin: 0 auto; font-family: var(--font-display); font-weight: 600; font-size: clamp(20px, 2.9vw, 30px); color: var(--jf-navy); line-height: 1.35; }
.lead-quote .em { color: var(--jf-pink-deep); }
.lead-quote small { display: block; font-family: var(--font-button); font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--jf-pink-deep); margin-bottom: 14px; font-weight: 700; }

/* Intro-Card */
.intro-card { background: #fff; border-radius: var(--jf-radius-lg); box-shadow: var(--jf-shadow-md); padding: clamp(30px,4vw,46px); max-width: 720px; margin: 0 auto; text-align: center; border: 1px solid rgba(6,33,77,.05); }
.intro-card .q { font-family: var(--font-display); font-size: clamp(19px,2.5vw,24px); color: var(--jf-text-muted); margin-bottom: 20px; }
.intro-card .a { font-family: var(--font-display); font-weight: 600; font-size: clamp(18px,2.4vw,23px); color: var(--jf-navy); }
.intro-card .label { font-weight: 700; color: var(--jf-navy); margin-bottom: 6px; }

/* ===================== EVENT-BAND (Navy) — Countdown + Bonus ===================== */
.event-flag { font-family: var(--font-button); font-size: 12.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--jf-gold-light); margin-bottom: 14px; }
.event-date { font-family: var(--font-display); font-weight: 800; font-size: clamp(28px, 5vw, 48px); color: #fff; letter-spacing: -.02em; line-height: 1.1; }
.event-date em { font-style: normal; color: var(--jf-pink); }
.event-time { font-size: clamp(17px, 2.2vw, 21px); color: #c4d2e8; margin-top: 8px; }

/* Countdown — hochlesbar auf Navy */
.cd-head { display: flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--font-button); font-weight: 700; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--jf-gold-light); margin: 34px 0 18px; }
.cd-head .pulse { width: 9px; height: 9px; border-radius: 50%; background: var(--jf-pink); box-shadow: 0 0 0 0 rgba(239,99,145,.6); animation: pulse 1.8s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(239,99,145,.55); } 70% { box-shadow: 0 0 0 12px rgba(239,99,145,0); } 100% { box-shadow: 0 0 0 0 rgba(239,99,145,0); } }
.countdown { display: inline-flex; gap: 10px; justify-content: center; flex-wrap: nowrap; }
.cd-block { position: relative; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); border-radius: 16px; padding: 18px 12px 13px; min-width: 90px; font-variant-numeric: tabular-nums; box-shadow: inset 0 1px 0 rgba(255,255,255,.12); }
.cd-num { font-family: var(--font-display); font-weight: 800; font-size: clamp(34px, 6vw, 48px); color: #fff; line-height: 1; }
.cd-lab { font-family: var(--font-button); font-size: 11px; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; color: var(--jf-gold-light); margin-top: 9px; }
.cd-block:not(:last-child)::after { content: ':'; position: absolute; right: -10px; top: 50%; transform: translateY(-62%); font-family: var(--font-display); font-weight: 700; font-size: 26px; color: var(--jf-pink); opacity: .7; }

/* Bonus-Karte (auf Navy, helle Karte) */
.bonus-card {
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--jf-radius-lg); padding: clamp(28px, 4vw, 44px); max-width: 720px; margin: 0 auto; text-align: center;
}
.bonus-card .eyebrow { margin-bottom: 16px; }
.bonus-card h3 { font-size: clamp(22px, 3.2vw, 30px); color: #fff; margin-bottom: 14px; }
.bonus-card p { color: #c4d2e8; max-width: 560px; margin: 0 auto 26px; font-size: 16.5px; }
.bonus-card .pill-500 { color: var(--jf-navy); background: var(--jf-gold-light); font-weight: 700; padding: 2px 9px; border-radius: 6px; white-space: nowrap; }

/* ===================== SUMMARY ===================== */
.summary { background: #fff; border-radius: var(--jf-radius-lg); box-shadow: var(--jf-shadow-md); padding: clamp(32px, 4.5vw, 50px); max-width: 700px; margin: 0 auto; border: 1px solid rgba(6,33,77,.05); }
.summary h2 { text-align: center; font-size: clamp(21px, 2.9vw, 27px); margin-bottom: 26px; }
.sum-list li { color: var(--jf-text-muted); }
.sum-list li > div { line-height: 1.4; }
.sum-list li strong { display: block; color: var(--jf-navy); font-weight: 700; font-size: 17.5px; margin-bottom: 2px; }

/* ===================== FOOTER ===================== */
.footer { background: var(--jf-navy); color: #c4d2e8; padding: 56px 24px 40px; text-align: center; }
.footer .logo { font-family: var(--font-display); font-weight: 700; font-size: 23px; color: #fff; letter-spacing: .01em; }
.footer .tagline { font-size: 15.5px; color: #9fb0cb; margin: 12px auto 26px; max-width: 440px; }
.footer .socials { display: flex; gap: 13px; justify-content: center; margin-bottom: 24px; flex-wrap: wrap; }
.footer .socials a { width: 43px; height: 43px; border-radius: 50%; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.13); display: grid; place-items: center; color: #c4d2e8; transition: all .25s ease; }
.footer .socials a:hover { background: var(--jf-pink); border-color: var(--jf-pink); color: #fff; transform: translateY(-3px); }
.footer .socials svg { width: 19px; height: 19px; }
.footer .legal { display: flex; gap: 8px 22px; justify-content: center; flex-wrap: wrap; font-size: 14px; margin-bottom: 16px; }
.footer .legal a { color: #9fb0cb; }
.footer .legal a:hover { color: #fff; }
.footer .copy { font-size: 13px; color: #6f82a3; }

/* ===================== RESPONSIVE ===================== */
@media (max-width: 860px) { .grid-3 { grid-template-columns: 1fr; } .grid-2 { grid-template-columns: 1fr; } }
@media (max-width: 600px) {
  body { font-size: 16px; }
  .btn { width: 100%; }
  .countdown { gap: 7px; }
  .cd-block { min-width: 0; flex: 1; padding: 14px 6px 11px; border-radius: 13px; }
  .cd-num { font-size: clamp(25px, 9vw, 40px); }
  .cd-lab { font-size: 9.5px; letter-spacing: .08em; }
  .cd-block:not(:last-child)::after { right: -8px; font-size: 19px; }
}