/*
  Ueberzeugung-Funnel (Workbook "5 Ueberzeugungen"): nutzt die geteilten
  Design-Tokens und Komponenten aus ../style.css (Farben, Radius, .btn,
  .check-list, .faq, .grad, ...). Diese Datei enthaelt nur, was auf der
  Hauptseite kein Gegenstueck hat - gleicher Aufbau wie bei claudetastik/.
*/

/* Alte Funnel-Farbnamen auf die zentralen Website-Tokens gemappt,
   damit bestehende Klassen und Inline-Styles weiter funktionieren. */
:root {
  --weinrot:    var(--accent-a);
  --weinrot-dk: #6a0047;
  --gold:       var(--accent-b);
  --gold-lt:    var(--accent-b);
  --creme:      var(--soft);
  --creme-dk:   #F5ECD8;
  --weiss:      var(--white);
  --grau-lt:    rgba(0, 0, 0, 0.08);
  --grau-mid:   #999090;
  --text:       var(--gray);
  --text-dk:    var(--black);
}

img { max-width: 100%; }

/* Absatz-Abstaende (das zentrale CSS setzt sie nur in .article-body/.flow) */
p { margin-bottom: 1rem; }
p:last-child { margin-bottom: 0; }

/* ── LAYOUT ── */
.container { max-width: 1100px; margin: 0 auto; padding: 0 28px; }
.container--sm { max-width: 760px; }
.text-center { text-align: center; }

/* ── HEADER (wie claudetastik) ── */
.site-header {
  background: var(--white);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  padding: 20px 0;
  text-align: center;
}
.site-header__name {
  font-family: 'Lora', serif;
  color: var(--accent-a);
  font-size: 1.3rem;
  font-weight: 700;
  text-decoration: none;
}
.site-header__sub {
  font-family: 'Mulish', sans-serif;
  font-variant: small-caps;
  color: var(--grau-mid);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  margin-top: 2px;
}

/* ── KURSIV-AKZENTE in Headlines: Gradient wie auf der Hauptseite ── */
h1 em, h2 em {
  font-style: italic;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ── HERO ── */
.hero {
  background: var(--white);
  padding: 90px 0 80px;
  max-width: none;
  margin: 0;
}
.hero h1 {
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  max-width: 860px;
  margin: 0 auto 24px;
}
.hero__eyebrow {
  display: inline-block;
  background: var(--white);
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: 100px;
  color: var(--accent-a);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 10px 24px;
  margin-bottom: 30px;
}
.hero__sub {
  color: var(--gray);
  font-size: 1.2rem;
  max-width: 620px;
  margin: 0 auto 40px;
}
.hero__cta-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.hero__disclaimer {
  font-size: 0.8rem;
  color: var(--grau-mid);
  letter-spacing: 0.04em;
}

/* ── SEKTIONEN ── */
.section { padding: 80px 0; }
.section--creme { background: var(--soft); }
.section--weiss { background: var(--white); }

.section__eyebrow {
  font-family: 'Mulish', sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-a);
  margin-bottom: 18px;
}
.section__title { margin-bottom: 20px; }
.section__intro {
  color: var(--gray);
  font-size: 1.1rem;
  max-width: 600px;
  margin: 0 auto 44px;
}

/* ── ZITAT-BOX (Bio-Quote) ── */
.bio-quote {
  background: var(--soft);
  border-radius: var(--radius);
  padding: 26px 30px;
  margin: 28px 0;
}
.section--creme .bio-quote { background: var(--white); }
.bio-quote p {
  font-family: 'Lora', serif;
  font-style: italic;
  font-size: 1.1rem;
  color: var(--black);
  margin: 0;
}

/* ── GOLD-LINIE ── */
.gold-line {
  width: 56px;
  height: 3px;
  border-radius: 3px;
  background: var(--grad);
  margin: 18px auto 36px;
}
.gold-line--left { margin-left: 0; }

/* ── WORKBOOK ── */
.workbook-grid {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 64px;
  align-items: start;
}
.workbook-cover {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.12);
  position: sticky;
  top: 24px;
}
.workbook-cover img { width: 100%; display: block; }

.benefit-num-list { list-style: none; margin: 28px 0; padding: 0; }
.benefit-num-list li {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding: 18px 0;
}
.benefit-num-list li + li { border-top: 1px solid rgba(0, 0, 0, 0.07); }
.benefit-num {
  min-width: 44px;
  width: 44px;
  height: 44px;
  background: var(--grad);
  color: var(--white);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.9rem;
  flex-shrink: 0;
  margin-top: 2px;
}
.benefit-text strong {
  display: block;
  color: var(--black);
  font-size: 1.05rem;
  margin-bottom: 3px;
}
.benefit-text span { font-size: 0.95rem; color: var(--gray); }

/* ── BIO ── */
.bio-grid {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 72px;
  align-items: start;
}
.bio-photo {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  object-position: top;
  border-radius: var(--radius);
  transform: scaleX(-1);
}
.bio-text h2 { margin-bottom: 20px; }
.bio-signature {
  font-family: 'Lora', serif;
  font-style: italic;
  font-size: 1.2rem;
  color: var(--accent-a);
  margin-top: 8px;
}
.bio-sub {
  font-size: 0.82rem;
  color: var(--grau-mid);
  margin-top: 2px;
}

/* ── TESTIMONIAL-STREIFEN (wie claudetastik) ── */
.testimonial-stripe {
  background: var(--dark);
  padding: 60px 0;
  text-align: center;
}
.testimonial-stripe blockquote {
  font-family: 'Lora', serif;
  font-style: italic;
  color: var(--white);
  font-size: 1.3rem;
  max-width: 680px;
  margin: 0 auto 14px;
  line-height: 1.6;
}
.testimonial-stripe cite {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: 0.08em;
  font-style: normal;
}

/* ── OPT-IN ── */
.optin-section {
  background: var(--soft);
  padding: 80px 0;
}
.optin-wrap {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.optin-card {
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.1);
  display: grid;
  grid-template-columns: 220px 1fr;
  text-align: left;
}
.optin-card__image {
  background: var(--creme-dk);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 36px 28px;
}
.optin-card__image img {
  max-width: 200px;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}
.optin-card__form { padding: 40px 44px; }
.optin-card__tagline {
  font-family: 'Lora', serif;
  font-weight: 600;
  font-size: 1.2rem;
  color: var(--black);
  margin-bottom: 8px;
}
.optin-card__title {
  font-family: 'Lora', serif;
  font-style: italic;
  font-size: 0.95rem;
  color: var(--accent-a);
  line-height: 1.5;
  margin-bottom: 24px;
}
.form-privacy {
  font-size: 0.78rem;
  color: var(--grau-mid);
  margin-top: 14px;
  line-height: 1.6;
  text-align: center;
}

/* ── FINALES CTA: Gradient-Flaeche wie der Promo-Banner der Startseite ── */
.cta-section {
  background: var(--grad);
  padding: 80px 0;
  text-align: center;
}
.cta-section h2 { color: var(--white); margin-bottom: 14px; }
.cta-section h2 em {
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--white);
}
.cta-section p {
  color: rgba(255, 255, 255, 0.92);
  margin: 0 auto 32px;
  max-width: 540px;
}
.cta-section .btn { background: var(--white); color: var(--dark); }
.cta-section .btn:hover { background: rgba(255, 255, 255, 0.92); }

/* ── FOOTER: hell, wie auf der Hauptseite ── */
.site-footer {
  background: var(--white);
  border-top: 1px solid rgba(0, 0, 0, 0.07);
  padding: 34px 0;
  text-align: center;
}
.site-footer__links {
  display: flex;
  justify-content: center;
  gap: 28px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.site-footer a {
  font-size: 0.9rem;
  color: var(--gray);
  text-decoration: none;
}
.site-footer a:hover { color: var(--accent-a); }
.site-footer__copy { font-size: 0.82rem; color: var(--gray); }

/* ── BESTAETIGUNGS-SEITE ── */
.confirm-hero {
  background: var(--white);
  padding: 80px 0 48px;
  text-align: center;
}
.confirm-hero h1 {
  font-size: clamp(2rem, 4.5vw, 3rem);
  max-width: 640px;
  margin: 0 auto 16px;
}
.confirm-hero p {
  font-family: 'Lora', serif;
  font-style: italic;
  color: var(--gray);
}
.steps-section { background: var(--soft); padding: 0 0 80px; }
.steps-container { max-width: 640px; margin: 0 auto; padding: 0 28px; }
.step-item {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.06);
  padding: 22px 26px;
  margin-bottom: 12px;
}
.step-num {
  min-width: 38px;
  width: 38px;
  height: 38px;
  background: var(--grad);
  color: var(--white);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.9rem;
  flex-shrink: 0;
}
.step-text { font-size: 0.95rem; color: var(--gray); line-height: 1.6; padding-top: 7px; }
.step-text strong { color: var(--black); }
.wait-box {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.06);
  padding: 34px 38px;
  text-align: center;
  margin-top: 32px;
}
.wait-box h3 { color: var(--accent-a); margin-bottom: 12px; }
.wait-box p { font-size: 0.95rem; color: var(--gray); font-style: italic; }
.belief-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 18px;
}
.belief-tag {
  background: var(--soft);
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: 100px;
  padding: 8px 18px;
  font-size: 0.82rem;
  font-style: italic;
  color: var(--gray);
}

/* ── DANKE/DOWNLOAD-SEITE ── */
.download-section {
  background: var(--white);
  padding: 90px 0;
  text-align: center;
}
.download-check {
  width: 64px;
  height: 64px;
  margin: 0 auto 24px;
  background: var(--grad);
  color: var(--white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  font-weight: 700;
}
.download-section h1 {
  font-size: clamp(2rem, 4.5vw, 3rem);
  max-width: 640px;
  margin: 0 auto 14px;
}
.download-section p { margin-bottom: 36px; }
.btn-download {
  display: inline-block;
  background: var(--dark);
  color: var(--white);
  text-decoration: none;
  font-weight: 600;
  font-size: 1.05rem;
  padding: 16px 38px;
  border-radius: 100px;
  transition: transform 0.2s, box-shadow 0.2s;
}
.btn-download:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(135, 0, 89, 0.35);
  color: var(--white);
}
.upsell-section { background: var(--soft); padding: 0 0 90px; }
.upsell-card {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.1);
  padding: 48px;
  max-width: 860px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 48px;
  align-items: start;
}
.upsell-badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 14px;
}
.upsell-card h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: 16px; }
.upsell-card p { font-size: 0.97rem; color: var(--gray); }
.upsell-list { list-style: none; margin: 20px 0 24px; padding: 0; }
.upsell-list li { padding: 7px 0 7px 30px; position: relative; font-size: 0.97rem; color: var(--gray); }
.upsell-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  width: 18px;
  height: 18px;
  background: var(--grad);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-1.2 14.4-4-4 1.4-1.4 2.6 2.6 5.6-5.6 1.4 1.4-7 7z'/%3E%3C/svg%3E") center/contain no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-1.2 14.4-4-4 1.4-1.4 2.6 2.6 5.6-5.6 1.4 1.4-7 7z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.upsell-price {
  font-family: 'Lora', serif;
  font-weight: 700;
  font-size: 2.2rem;
  color: var(--black);
  margin-bottom: 4px;
}
.upsell-price span { font-size: 1rem; font-weight: 400; color: var(--grau-mid); font-family: 'Mulish', sans-serif; }
.upsell-note { font-size: 0.8rem; color: var(--grau-mid); margin-bottom: 24px; }
.btn-upsell {
  display: inline-block;
  background: var(--dark);
  color: var(--white);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.98rem;
  padding: 15px 32px;
  border-radius: 100px;
  transition: transform 0.2s, box-shadow 0.2s;
  border: none;
  cursor: pointer;
}
.btn-upsell:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(135, 0, 89, 0.35);
  color: var(--white);
}
.upsell-photo { width: 100%; height: auto; border-radius: var(--radius); display: block; }
.closing-section {
  background: var(--white);
  padding: 60px 0;
  text-align: center;
}
.closing-text { font-family: 'Lora', serif; font-style: italic; font-size: 1.15rem; color: var(--gray); }
.closing-name {
  font-family: 'Lora', serif;
  font-style: italic;
  font-size: 1.5rem;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-top: 4px;
}

/* ── MAILERLITE-OVERRIDES: Formular im Website-Look ── */
#mlb2-40747616.ml-form-embedContainer { display:block; margin:0; width:100% !important; }
#mlb2-40747616.ml-form-embedContainer .ml-form-embedWrapper { background-color:transparent !important; border:none !important; border-radius:0 !important; display:block !important; width:100% !important; max-width:100% !important; }
#mlb2-40747616.ml-form-embedContainer .ml-form-embedWrapper.embedForm { max-width:100% !important; }
#mlb2-40747616.ml-form-embedContainer .ml-form-align-center { text-align:left !important; }
#mlb2-40747616.ml-form-embedContainer .ml-form-embedBody { padding:0 !important; }
#mlb2-40747616.ml-form-embedContainer .ml-form-embedContent { margin-bottom:0 !important; }
#mlb2-40747616.ml-form-embedContainer .ml-form-formContent { margin-bottom:0 !important; }
#mlb2-40747616.ml-form-embedContainer .ml-form-fieldRow { margin-bottom:12px !important; }
#mlb2-40747616.ml-form-embedContainer .ml-form-fieldRow.ml-last-item { margin-bottom:0 !important; }
#mlb2-40747616.ml-form-embedContainer .ml-form-embedBody .ml-form-fieldRow input {
  background-color:#fff !important; color:#505050 !important;
  border:1px solid rgba(0,0,0,0.15) !important; border-radius:14px !important;
  font-family:'Mulish',sans-serif !important; font-size:0.98rem !important;
  padding:14px 18px !important; width:100% !important;
  box-sizing:border-box !important; line-height:1.5 !important; height:auto !important;
}
#mlb2-40747616.ml-form-embedContainer .ml-form-embedBody .ml-form-fieldRow input:focus { border-color:#870059 !important; outline:none; }
#mlb2-40747616.ml-form-embedContainer .ml-form-embedBody .ml-form-fieldRow input::placeholder { color:#999090 !important; }
#mlb2-40747616.ml-form-embedContainer .ml-form-embedBody .ml-form-embedSubmit { margin:12px 0 0 !important; }
#mlb2-40747616.ml-form-embedContainer .ml-form-embedBody .ml-form-embedSubmit button {
  background-color:#870059 !important; border:none !important; border-radius:100px !important;
  font-family:'Mulish',sans-serif !important; font-size:1rem !important;
  font-weight:600 !important;
  padding:16px 24px !important; width:100% !important; color:#fff !important; cursor:pointer;
  transition: box-shadow 0.2s;
}
#mlb2-40747616.ml-form-embedContainer .ml-form-embedBody .ml-form-embedSubmit button:hover { box-shadow:0 12px 30px rgba(135,0,89,0.35); }
#mlb2-40747616.ml-form-embedContainer .ml-form-successBody { padding:0 !important; }
#mlb2-40747616.ml-form-embedContainer .ml-form-successContent h4 { font-family:'Lora',serif !important; color:#870059 !important; font-size:1.2rem !important; }
#mlb2-40747616.ml-form-embedContainer .ml-form-successContent p { font-family:'Mulish',sans-serif !important; color:#505050 !important; }
#mlb2-40747616.ml-form-embedContainer .ml-field-group label { display:none !important; }

/* ── RESPONSIVE ── */
@media (max-width: 760px) {
  .workbook-grid { grid-template-columns: 1fr; gap: 40px; }
  .workbook-cover { max-width: 240px; margin: 0 auto; position: static; }
  .bio-grid { grid-template-columns: 1fr; gap: 36px; }
  .bio-photo { aspect-ratio: 4/3; max-width: 360px; margin: 0 auto; }
  .optin-card { grid-template-columns: 1fr; }
  .optin-card__image { padding: 28px; }
  .optin-card__image img { max-width: 170px; }
  .optin-card__form { padding: 32px 26px; }
  .upsell-card { grid-template-columns: 1fr; padding: 34px 26px; }
  .upsell-photo { max-width: 300px; }
  .section { padding: 60px 0; }
  .hero { padding: 60px 0 56px; }
}
@media (max-width: 480px) {
  /* Formularfelder auf Mobile besser lesbar */
  #mlb2-40747616.ml-form-embedContainer .ml-form-embedBody .ml-form-fieldRow input {
    border:2px solid #999090 !important;
    color:#2a2020 !important;
    font-size:1rem !important;
    padding:16px 18px !important;
  }
  #mlb2-40747616.ml-form-embedContainer .ml-form-embedBody .ml-form-fieldRow input::placeholder {
    color:#707070 !important;
  }
  #mlb2-40747616.ml-form-embedContainer .ml-form-embedBody .ml-form-fieldRow input:focus {
    border-color:#870059 !important;
  }
}