/* Brand Vanessa Schmidt – Kit "Soft Confidence" (2026-07-30) – Referenz: micro products/brand-vanessa-schmidt.md
   Papier Creme/Sand/Taupe/Salbei/Ink/Farn · Cormorant Garamond + Karla + JetBrains Mono
   Variablennamen aus dem Vorgaenger-Kit bleiben (--clay = Farn, --blush = Taupe),
   nur die Werte wurden getauscht, um Umbenennungen an allen Einsatzstellen zu vermeiden. */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,400&family=Karla:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --creme: #F7F3EE;
  --sand: #ECE3D8;
  --ink: #4B433F;
  --ink-soft: #3A332E;
  --muted: #6E655E;
  --clay: #5B6B52;
  --clay-dark: #3F4A38;
  --blush: #DCCDBF;
  --sage: #AEB9A5;
  --line: #DECEBD;
  --clay-light: #8A9481;

  --terra: #C15A38;
  --terra-dark: #A8492C;

  /* Ein Radius, ein Schatten-Rezept fuer alle "weichen Karten" auf hellem
     Grund, eins fuer frei schwebende Elemente auf dunklem Grund. Vorher
     hatte fast jede Box ihren eigenen Wert (12-20px, 7 verschiedene
     Schatten) - das war der Hauptgrund fuers "zusammengewuerfelt"-Gefuehl. */
  --radius-card: 16px;
  /* Geschichtete Schatten (enger dunkler Kernschatten + weicher Ambient-Schatten),
     wie auf vs-ecom-consulting.com. Ein einzelner flacher Schatten wirkt platt. */
  --shadow-soft: 0 8px 12px -4px rgba(46, 36, 34, 0.09), 0 20px 32px -8px rgba(46, 36, 34, 0.1);
  --shadow-deep: 0 10px 16px -4px rgba(0, 0, 0, 0.35), 0 24px 48px -10px rgba(0, 0, 0, 0.35);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: 'Karla', system-ui, sans-serif;
  background: var(--creme);
  color: var(--ink);
  line-height: 1.65;
  font-size: 18px;
}

.wrap { max-width: 820px; margin: 0 auto; padding: 0 1.5rem; }

header.site { padding: 2rem 0 1rem; }
header.site .brand {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 1rem;
  color: var(--ink);
  text-decoration: none;
}

main { padding: 2rem 0 4rem; }

h1 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 400;
  font-size: 44px;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0.5rem 0 1.5rem;
}
h2 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 400;
  font-size: 36px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 2.5rem 0 0.9rem;
}
@media (min-width: 700px) {
  h1 { font-size: 64px; }
  h2 { font-size: 44px; }
}
p { margin: 0 0 1rem; max-width: 62ch; }
strong { font-weight: 600; }
h3 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 500;
  font-size: 26px;
  line-height: 1.25;
  color: var(--ink);
  margin: 2rem 0 0.8rem;
}

/* Overline-Stil (Karla 500, gesperrt, upper) */
.pre-headline {
  font-family: 'Karla', sans-serif;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--clay);
}

.subheadline p { font-size: 1rem; line-height: 1.5; }

/* Visual: einheitlicher Platzhalter-Stil (gestrichelt = "wird noch ersetzt"),
   identisch zu .story-visual */
.visual {
  margin: 2rem auto 0;
  border: 1px dashed var(--clay);
  border-radius: var(--radius-card);
  padding: 3rem 1.5rem;
  text-align: center;
  color: var(--muted);
  background: var(--sand);
  box-shadow: var(--shadow-soft);
}
.visual img { max-width: 100%; height: auto; border-radius: 12px; }

/* Fertiges Komposit-Mockup: eigener Creme-Hintergrund passt exakt zur Seite,
   kein Rahmen/Schatten noetig, fuegt sich nahtlos ein */
.hero-mockup { margin: 2rem auto 0; max-width: 1000px; }
.hero-mockup img { display: block; width: 100%; height: auto; }

.cta-block { margin: 2.5rem 0; text-align: center; }
.btn {
  display: inline-block;
  background: var(--terra);
  color: var(--creme);
  font-family: 'Karla', sans-serif;
  font-weight: 600;
  font-size: 1.1rem;
  padding: 0.95rem 2.3rem;
  border-radius: 10px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  text-align: center;
}
.btn { box-shadow: 0 4px 8px -2px rgba(91, 107, 82, 0.35), 0 12px 24px -6px rgba(91, 107, 82, 0.3); }
.btn:hover { background: var(--terra-dark); }
.cta-note { font-size: 14px; color: var(--muted); margin-top: 0.6rem; }
.legal-note { font-size: 12px; color: var(--muted); opacity: 0.75; margin-top: 0.8rem; max-width: 46ch; margin-left: auto; margin-right: auto; }
section.band-ink .legal-note { color: var(--sand); }

a { color: var(--clay); }

/* Karten auf Sand-Ebene */
.card {
  border: 1px solid var(--line);
  background: var(--sand);
  border-radius: var(--radius-card);
  padding: 1.5rem;
  margin: 1.5rem 0;
  box-shadow: var(--shadow-soft);
}
.card a.title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 500;
  color: var(--ink);
  font-size: 1.5rem;
  text-decoration: none;
}

/* Hero: breite, zentrierte Buehne (Vivien-Prinzip) */
.wrap-wide { max-width: 1150px; margin: 0 auto; padding: 0 1.5rem; }
.hero {
  background: linear-gradient(160deg, #59524B 0%, #4B433F 45%, #3A332E 100%);
  color: var(--creme);
  padding: 2rem 0 2rem;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 5% 120%, rgba(91, 107, 82, 0.4), transparent 40%),
    radial-gradient(circle at 88% 0%, rgba(91, 107, 82, 0.2), transparent 50%);
  pointer-events: none;
}
.hero .wrap-wide { position: relative; z-index: 1; }
.hero-grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: center; }
/* Bewusster Bruch mit dem Brand Kit (auf Wunsch): reines Weiss nur hier im Hero */
.hero h1 { color: #FFFFFF; }
.hero h1 i { font-style: italic; }
.hero h1 b { font-weight: 600; color: var(--clay-light); }
.hero .pre-headline { color: #FFFFFF; text-align: center; }
.hero-copy .subheadline p { max-width: 52ch; color: #E4E1DC; }
.hero-copy .cta-block { text-align: left; margin: 2rem 0 0; }
.hero .cta-note { color: rgba(255, 255, 255, 0.65); }
.hero h1 { font-size: 30px; }
@media (min-width: 700px) {
  .hero h1 { font-size: 48px; }
  .hero { padding: 4.5rem 0 4rem; }
}
@media (min-width: 900px) {
  .hero-grid { grid-template-columns: 1.3fr 0.9fr; gap: 3.5rem; }
  .hero h1 { font-size: 54px; line-height: 1.08; }
}

/* Mobil: Bild zwischen Headline und Fliesstext (Anna-Referenz), statt
   erst ein langer Textblock und das Bild ganz am Schluss.
   Kleineres Grid-Gap: 2.5rem war fuer den 2-Spalten-Desktop-Abstand gedacht,
   gilt hier aber zwischen JEDEM der 5 entpackten Elemente - zu viel Luft. */
@media (max-width: 899px) {
  .hero-grid { gap: 1.1rem; }
  .hero-copy { display: contents; }
  .hero .pre-headline { order: 1; margin-bottom: 0.25rem; }
  .hero-copy h1 { order: 2; margin: 0 0 0.25rem; }
  .hero-shot { order: 3; margin-bottom: 0.25rem; }
  .hero-copy .subheadline { order: 4; }
  .hero-copy .subheadline p { margin-bottom: 0.6rem; }
  .hero-copy .cta-block { order: 5; margin-top: 0.5rem; }
}

/* Vollbreite Sektions-Baender (Elementor-Prinzip): Farbe fuellt den Bildschirm,
   Text bleibt in der .wrap-Spalte */
section.band { padding: 3.25rem 0; }
@media (min-width: 700px) { section.band { padding: 4.875rem 0; } }
section.band h2 { text-align: center; }
section.band .hero-copy h1 { text-align: left; }
section.band-sand { background: var(--sand); }
section.band-blush { background: var(--blush); }
section.band-ink {
  background: linear-gradient(160deg, #59524B 0%, #4B433F 45%, #3A332E 100%);
  color: var(--creme);
}
section.band-ink h2 { color: var(--creme); }
section.band-ink p { color: var(--creme); }
section.band-ink .cta-note { color: var(--sand); }
section.band-ink { text-align: center; }
section.band-ink p { margin-left: auto; margin-right: auto; }
section.band-sand .visual, section.band-blush .visual { background: var(--creme); }
section.band-sand .card { background: var(--creme); }

footer.site {
  border-top: 1px solid var(--line);
  padding: 1.5rem 0 2.5rem;
  font-size: 14px;
  color: var(--muted);
}
footer.site a { color: var(--muted); }

/* Consent-Banner */
#consent-banner {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--sand);
  border-top: 1.5px solid var(--clay);
  padding: 1rem 1.25rem;
  font-size: 14px;
  display: none;
  z-index: 100;
}
#consent-banner.visible { display: block; }
#consent-banner .consent-actions { margin-top: 0.6rem; display: flex; gap: 0.75rem; }
#consent-banner button {
  font-family: 'Karla', sans-serif;
  font-weight: 500;
  font-size: 14px;
  padding: 0.45rem 1.1rem;
  border-radius: 8px;
  cursor: pointer;
  border: 1px solid var(--clay);
}
#consent-banner .accept { background: var(--clay); color: var(--creme); }
#consent-banner .decline { background: transparent; color: var(--clay); }

.legal h2 { font-size: 26px; }
.legal p { font-size: 15px; }


/* Ticker-Leiste: statischer, zentrierter Hinweis (kein Laufband) */
.ticker {
  background: var(--blush);
  color: var(--ink);
  padding: 0.7rem 1.5rem;
  text-align: center;
}
.ticker p {
  margin: 0;
  max-width: none;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Kein Creme-Spalt zwischen Ticker und Hero (Header entfernt) */
main:has(> .hero) { padding-top: 0; }

/* "So funktioniert's": gerahmte 3-Spalten-Box mit Trennlinien statt loser Absaetze */
.steps-grid {
  display: grid;
  margin-top: 1.5rem;
  background: var(--sand);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}
.step { text-align: center; padding: 2.2rem 1.6rem; border-bottom: 1px solid var(--line); }
.step:last-child { border-bottom: none; }
.step p { max-width: none; }
.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 100px 100px 8px 8px;
  background: var(--creme);
  border: 1.5px solid var(--clay);
  color: var(--clay);
  font-family: 'JetBrains Mono', monospace;
  font-weight: 500;
  letter-spacing: 0.03em;
  font-size: 1rem;
  margin-bottom: 0.8rem;
}
@media (min-width: 760px) {
  .steps-grid { grid-template-columns: repeat(3, 1fr); }
  .step { border-bottom: none; border-right: 1px solid var(--line); }
  .step:last-child { border-right: none; }
}

/* Story: zweispaltig mit Foto-Platzhalter */
.story-grid { display: grid; gap: 2.5rem; align-items: center; }
.story-copy p { max-width: none; }
section.band .story-copy h2 { text-align: left; }
.story-visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.story-visual img {
  display: block;
  width: 100%;
  max-width: 380px;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 200px 200px 12px 12px;
  box-shadow: var(--shadow-soft);
}
.story-caption {
  margin-top: 1rem;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.1rem;
  color: var(--ink);
}
@media (min-width: 900px) {
  .story-grid { grid-template-columns: 0.85fr 1.15fr; gap: 3.5rem; }
}

/* FAQ als Akkordeon (natives <details>, kein JS noetig) */
.faq-list { margin-top: 1.5rem; }
.faq-item {
  border-bottom: 1px solid var(--line);
  padding: 1.1rem 0;
}
.faq-item summary {
  cursor: pointer;
  list-style: none;
  font-family: 'Karla', sans-serif;
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--ink);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '›';
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.6rem;
  color: var(--clay);
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.faq-item[open] summary::after { transform: rotate(90deg); }
.faq-item p { margin: 0.9rem 0 0; }

/* Ehrlicher Beweis: Salbei als Ruhepol-Checkliste (bisher ungenutzte Markenfarbe) */
.proof-list { list-style: none; margin: 0 0 1.5rem; padding: 0; }
.proof-list li {
  position: relative;
  background: var(--sage);
  border-radius: var(--radius-card);
  padding: 1rem 1.2rem 1rem 3rem;
  margin-bottom: 0.9rem;
  max-width: 62ch;
  color: var(--ink);
}
.proof-list li::before {
  content: '✓';
  position: absolute;
  left: 1.1rem;
  top: 1rem;
  font-weight: 700;
  color: var(--ink-soft);
}

/* Callout: schlankes Zitat-Format statt weiterer gefuellter Box (Farn-Linie reicht als Akzent) */
.callout {
  border-left: 3px solid var(--clay);
  padding: 0.2rem 0 0.2rem 1.5rem;
  margin: 2rem auto;
}
.callout p { margin: 0; max-width: 58ch; }

/* Wert-Karte: Container fuer den finalen Preis-CTA, statt loser Text auf dem dunklen Band */
.value-card {
  max-width: 640px;
  margin: 0 auto;
  padding: 3rem 2.25rem;
  border-radius: var(--radius-card);
  background: rgba(247, 243, 238, 0.05);
  border: 1px solid rgba(247, 243, 238, 0.15);
  box-shadow: var(--shadow-deep);
}
.value-card p { margin-left: auto; margin-right: auto; }

/* "Das bekommst du": 3 Produkt-Karten mit echten Mockups statt Fliesstext-Liste */
.offer-grid {
  display: grid;
  gap: 1.5rem;
  margin: 1.5rem auto 0;
}
@media (min-width: 760px) {
  .offer-grid { grid-template-columns: repeat(3, 1fr); }
}
.offer-card {
  position: relative;
  background: var(--sand);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 1.25rem;
  box-shadow: var(--shadow-soft);
}
.offer-card img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  margin-bottom: 1rem;
  box-shadow: 0 8px 20px rgba(46, 36, 34, 0.15);
}
.offer-card .ipad-frame { margin-bottom: 1rem; }
.offer-card .ipad-frame img { margin-bottom: 0; box-shadow: none; }
.offer-card h3 { font-size: 21px; margin: 0 0 0.5rem; }
.offer-card p { font-size: 15px; max-width: none; margin: 0; color: var(--muted); }
.offer-card-bonus { background: var(--sage); border-color: var(--sage); }

/* iPad-Mockup: echtes Geraetefoto (transparenter Hintergrund), Schatten ist im Bild */
.ipad-frame {
  max-width: 380px;
  margin: 0 auto;
}
.ipad-frame img {
  display: block;
  width: 100%;
  height: auto;
}
.bonus-badge {
  position: absolute;
  top: -0.7rem;
  left: 1.25rem;
  background: var(--clay);
  color: var(--creme);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.35rem 0.7rem;
  border-radius: 6px;
}

/* Preis-Anker */
.price-line { display: flex; align-items: center; justify-content: center; gap: 0.7rem; max-width: none; margin: 0 0 0.3rem; line-height: 1; }
.price-old { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.7rem; line-height: 1; color: var(--sand); opacity: 0.65; text-decoration: line-through; }
.price-now { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 500; font-size: 3.4rem; line-height: 1; color: var(--creme); }

/* Eingebettete Screenshots (ersetzen die Platzhalter) */
.shot-frame { margin: 2.25rem auto 0; max-width: 760px; }
.shot-frame .ipad-frame { max-width: 480px; }
.shot-caption { text-align: center; font-size: 14px; color: var(--muted); margin: 0.7rem 0 0; max-width: none; }

/* Hero-Chat-Mockup: zwei frei schwebende Sprechblasen, kein umschliessender Kasten */
.hero-shot { min-width: 0; }
.chat-window {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}
.hero-bubble {
  position: relative;
  max-width: 88%;
  background: var(--creme);
  border-radius: 16px;
  padding: 0.9rem 1.1rem;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
  box-shadow: var(--shadow-deep);
}
.hero-bubble p { margin: 0 0 0.6rem; max-width: none; font-size: inherit; line-height: inherit; }
.hero-bubble ul { margin: 0 0 0.9rem; padding-left: 1.1rem; }
.hero-bubble li { margin-bottom: 0.35rem; }
.hero-bubble li:last-child { margin-bottom: 0; }
.hero-bubble p:last-child, .hero-bubble ul:last-child { margin-bottom: 0; }
.hero-bubble-user {
  align-self: flex-end;
  border-bottom-right-radius: 4px;
}
.hero-bubble-user::after {
  content: '';
  position: absolute;
  right: -7px;
  bottom: 0;
  width: 14px;
  height: 14px;
  background: var(--creme);
  clip-path: polygon(0 0, 0% 100%, 100% 100%);
}
.hero-bubble-claude {
  align-self: flex-start;
  border-bottom-left-radius: 4px;
}
.hero-bubble-claude::after {
  content: '';
  position: absolute;
  left: -7px;
  bottom: 0;
  width: 14px;
  height: 14px;
  background: var(--creme);
  clip-path: polygon(100% 0, 0% 100%, 100% 100%);
}

/* Fix: schmalere Absaetze/Listen in .wrap-Sektionen hingen links statt
   als Block zentriert zu sein, waehrend die Ueberschrift drueber volle
   Breite zentriert ist. Dadurch wirkte alles schief. Text bleibt linksbuendig,
   nur die Box selbst wird jetzt zentriert. */
.wrap p,
.wrap ul,
.wrap .proof-list li {
  margin-left: auto;
  margin-right: auto;
}

/* Warteliste /warteliste-claude: schmale, ruhige Ein-Formular-Seite.
   Kein Bild, keine zweite Sektion - nur Text und der Brevo-Embed. */
.waitlist { max-width: 620px; }
.waitlist .pre-headline { display: block; margin-bottom: 0.6rem; }
.waitlist .form-intro { margin-top: 1.75rem; }
.brevo-embed { margin: 1.5rem 0 1.25rem; }
/* Rahmen geht auf schmalen Screens voll mit (Brief: width 100% zusaetzlich zu max-width) */
.brevo-embed iframe { width: 100%; max-width: 540px; border: 0; }
.waitlist .fine-print { font-size: 13px; color: var(--muted); max-width: 54ch; }
/* Handy: Hoehe nach oben freigeben statt Inhalt abzuschneiden */
@media (max-width: 600px) {
  .brevo-embed iframe { height: 460px; }
}

/* ============================================================
   Salespage v2 (2026-08-01) – Zusaetze fuer die neue Dramaturgie
   ============================================================ */

/* 1. Text-Hero: kein Visual mehr, zentrierte Ein-Spalten-Buehne
   (ersetzt das alte hero-grid-Layout mit Chat-Mockup rechts) */
.hero-text { text-align: center; }
.hero-text h1 { text-align: center; margin-left: auto; margin-right: auto; max-width: 20ch; }
.hero-text .subheadline { margin-top: 1.5rem; }
.hero-text .subheadline p {
  max-width: 58ch;
  margin-left: auto;
  margin-right: auto;
  color: #E4E1DC;
}
.hero-text .cta-block { text-align: center; margin: 2.25rem 0 0; }
@media (min-width: 700px) {
  .hero-text h1 { font-size: 52px; }
}
@media (min-width: 900px) {
  .hero-text h1 { font-size: 58px; }
}

/* 5. Chat-Blasen jetzt auf hellem Creme-Band ("Der Morgen danach"):
   dunkle Buehnen-Schatten weg, Blasen bekommen sichtbaren Kontrast
   gegen den hellen Grund (User = Sand, Claude = Weiss). */
.chat-window-light {
  max-width: 560px;
  margin: 2rem auto 0.5rem;
}
.chat-window-light .hero-bubble { box-shadow: var(--shadow-soft); }
.chat-window-light .hero-bubble-user,
.chat-window-light .hero-bubble-user::after { background: var(--sand); }
.chat-window-light .hero-bubble-claude,
.chat-window-light .hero-bubble-claude::after { background: #FFFFFF; }

/* 1b. Heller Hero (Variante A, 2026-08-01, Vanessas Entscheidung):
   Papier-Look statt dunkler Buehne. Der dunkle Verlauf stammte noch vom
   alten Zwei-Spalten-Hero mit Chat-Blasen; ohne Visual wirkte er als
   Fremdkoerper zum Creme/Sand/Farn-Look der restlichen Seite. */
.hero-text { background: var(--creme); }
.hero-text::before { background: radial-gradient(circle at 88% -10%, var(--sand), transparent 55%), radial-gradient(circle at 0% 120%, rgba(91, 107, 82, 0.10), transparent 45%); }
.hero-text .wrap { position: relative; z-index: 1; }
.hero-text h1 { color: var(--ink); }
.hero-text h1 b { color: var(--clay); }
.hero-text .pre-headline { color: var(--terra); }
.hero-text .subheadline p { color: var(--muted); }
.hero-text .cta-note { color: var(--muted); }


/* ---- STIMMEN (Testimonials) ---- */
.stimmen { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-top: 1.9rem; }
@media (max-width: 700px) { .stimmen { grid-template-columns: 1fr; } }
.stimme {
  background: var(--creme);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 1.6rem 1.7rem;
  box-shadow: var(--shadow-soft);
  margin: 0;
}
.stimme blockquote { margin: 0; }
.stimme blockquote p { font-size: 17px; line-height: 1.65; color: var(--ink); margin: 0 0 0.8rem 0; }
.stimme blockquote p:last-child { margin-bottom: 0; }
.stimme figcaption { margin-top: 1.1rem; padding-top: 0.9rem; border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); }
.stimme figcaption strong { display: block; color: var(--ink); font-weight: 600; font-size: 15px; }
.stimmen-note { font-size: 13px; color: var(--muted); margin-top: 1.2rem; }

/* ---- LESEPROBE / OPT-IN (2026-08-08) ---- */
.leseprobe-card {
  background: var(--creme);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 2.4rem 2.2rem 2rem;
  box-shadow: var(--shadow-soft);
  text-align: center;
}
.leseprobe-card .pre-headline { display: block; margin-bottom: 0.5rem; color: var(--terra); }
.leseprobe-card h2 { margin-top: 0; }
.leseprobe-card p { margin-left: auto; margin-right: auto; }
.leseprobe-card .brevo-embed { margin: 1.9rem 0 1.1rem; }
.leseprobe-card .fine-print {
  font-size: 13px;
  color: var(--muted);
  max-width: 54ch;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 600px) {
  .leseprobe-card { padding: 1.9rem 1.3rem 1.6rem; }
}

/* Platzhalter, solange das Brevo-Formular noch nicht drin ist.
   Bewusst auffaellig, damit er nicht versehentlich live geht. */
.form-placeholder {
  border: 2px dashed var(--terra);
  border-radius: 12px;
  padding: 1.6rem 1.2rem;
  background: rgba(193, 90, 56, 0.06);
  max-width: 540px;
  margin: 0 auto;
}
.form-placeholder strong {
  display: block;
  color: var(--terra-dark);
  font-size: 16px;
  margin-bottom: 0.35rem;
}
.form-placeholder span { font-size: 14px; color: var(--muted); }

/* ---- LESEPROBE-LANDINGPAGE (eigene Seite, /leseprobe) ---- */
.lp { max-width: 660px; }
.lp .pre-headline { display: block; margin-bottom: 0.6rem; }
.lp h1 { margin-top: 0; }
.lp .lp-list { list-style: none; margin: 1.6rem 0; padding: 0; }
.lp .lp-list li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: 0.7rem;
  line-height: 1.6;
}
.lp .lp-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--clay);
}
.lp .form-intro { margin-top: 1.9rem; font-weight: 600; }
.lp .fine-print { font-size: 13px; color: var(--muted); max-width: 54ch; }
.lp .lp-alt {
  margin-top: 2.4rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  font-size: 15px;
  color: var(--muted);
}

/* ---- 14-TAGE-GELD-ZURUECK-GARANTIE (eingefuegt 2026-08-08) ----
   Siegel-Block auf dem dunklen Preis-Band, direkt unter der Wert-Karte.
   Bewusst KEINE Karte in Karte: der Block steht frei auf dem Ink-Verlauf,
   damit er als eigenes Versprechen liest und nicht als Fussnote zum Preis. */
.guarantee {
  max-width: 640px;
  margin: 1.6rem auto 0;
  padding: 1.9rem 1.8rem;
  border: 1px solid rgba(247, 243, 238, 0.22);
  border-radius: var(--radius-card);
  background: rgba(247, 243, 238, 0.05);
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
  text-align: left;
}
.guarantee-seal {
  flex: 0 0 84px;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  border: 2px solid var(--sage);
  color: var(--creme);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.guarantee-seal-num {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 34px;
  font-weight: 500;
}
.guarantee-seal-unit {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-top: 0.25rem;
  color: var(--sage);
}
.guarantee-copy { flex: 1 1 auto; }
section.band-ink .guarantee-copy h3 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 500;
  font-size: 1.35rem;
  line-height: 1.3;
  color: var(--creme);
  margin: 0 0 0.6rem;
}
section.band-ink .guarantee-copy p {
  margin: 0;
  margin-left: 0;
  margin-right: 0;
  max-width: none;
  text-align: left;
  font-size: 16px;
  color: var(--sand);
}
section.band-ink .guarantee-copy p a { color: var(--sage); }
section.band-ink .guarantee-copy .guarantee-fine {
  margin-top: 0.7rem;
  font-size: 12px;
  opacity: 0.7;
}
@media (max-width: 600px) {
  .guarantee {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.7rem 1.3rem;
  }
  section.band-ink .guarantee-copy p,
  section.band-ink .guarantee-copy h3 { text-align: center; }
}

/* Garantie-Zeile unter einem CTA (Schluss-CTA auf dem Ink-Band) */
.cta-guarantee {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 0.9rem;
}
section.band-ink .cta-guarantee { color: var(--sage); }

/* Weicher Sekundaer-Link unter einem CTA (z.B. Leseprobe-Anker im Hero).
   Bewusst kein Button: soll als leiser zweiter Weg lesen, nicht als
   gleichwertige Alternative zum Kauf. */
.soft-link {
  margin-top: 1rem;
  font-size: 15px;
}
.soft-link a {
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  padding-bottom: 2px;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.soft-link a::after { content: " \2193"; }
.soft-link a:hover {
  color: var(--clay);
  border-color: var(--clay);
}

/* Positiver Gegenpart zur Kosten-Rechnung in der Wert-Karte:
   erst was ein weiterer Monat kostet, dann was der Kauf bringt. */
section.band-ink .value-gain {
  margin-top: 1.1rem;
  color: var(--creme);
}