/* Der Männerguide – Landingpage Styles */

:root{
  --bg:#EBE1D3;
  --surface:#FBF7F0;
  --surface-2:#E1D5C3;
  /* Hellster Ton der Seite. Bewusst kein reines Weiß, das schlägt
     neben dem Kraftpapier ein Loch in die Fläche. */
  --weiss:#FDFBF7;
  --ink:#14181C;
  --ink-2:#4C525A;
  --ink-3:#82786B;
  --line:#D3C4B0;
  --line-soft:#E4D9C9;
  --navy:#1B2F49;
  --navy-2:#28405F;
  --gold:#A8801F;
  --gold-2:#C9A03C;
  --gold-soft:#F4E8C9;
  --ink-warm:#201913;
  --btn:#1B2F49;
  --btn-ink:#FBF7F0;
  --shadow:0 12px 32px -16px rgba(20,24,28,.28);
  --radius:14px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background-color:var(--bg);
  background-image:repeating-linear-gradient(115deg, rgba(20,24,28,.04) 0px, rgba(20,24,28,.04) 1px, transparent 1px, transparent 8px);
  color:var(--ink);
  font-family:"Montserrat","Segoe UI",system-ui,sans-serif;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}
.wrap-narrow{max-width:760px;margin:0 auto;padding:0 24px}
h1,h2,h3{font-family:"Montserrat",sans-serif;font-weight:800;margin:0;text-wrap:balance;letter-spacing:-.015em}
h1{font-size:clamp(34px,5.6vw,56px);line-height:1.04}
h2{font-size:clamp(26px,4vw,40px);line-height:1.1}
h3{font-size:19px;line-height:1.25;font-weight:700}
p{margin:0}
.lede{font-family:"Lora",Georgia,serif;font-size:clamp(16.5px,2vw,19px);line-height:1.6;color:var(--ink-2);max-width:38em}
.eyebrow{
  font-family:"IBM Plex Mono",monospace;font-size:12.5px;font-weight:500;
  letter-spacing:.06em;text-transform:uppercase;color:var(--gold);margin:0 0 14px;
}
.hl{color:var(--gold);font-weight:700}
.hl-ink{font-weight:700;color:var(--ink)}
section{padding:72px 0}

/* Kopfleiste */
.topbar{position:sticky;top:0;z-index:30;background:var(--navy)}
.topbar-inner{display:flex;align-items:center;gap:14px;min-height:54px;padding-top:8px;padding-bottom:8px}
.topbar .mark{
  width:34px;height:34px;border-radius:50%;flex:none;
  border:1.5px solid rgba(244,232,201,.35);
  background:var(--gold-soft) url("assets/braeutigam-frei.png") no-repeat 50% 4%;
  background-size:270%;
}
.topbar .titel{
  font-family:"Montserrat",sans-serif;font-weight:700;font-size:14.5px;color:#FBF7F0;
  text-decoration:none;line-height:1.25;letter-spacing:-.01em;
}
.topbar .titel b{color:var(--gold-soft);font-weight:700}
.topbar .titel .lang{font-weight:500;color:rgba(251,247,240,.82)}
.topbar .bar-cta{
  margin-left:auto;flex:none;font-family:"Montserrat",sans-serif;font-weight:700;font-size:13.5px;
  color:var(--navy);background:var(--gold-2);text-decoration:none;padding:9px 18px;border-radius:999px;
}
.topbar .bar-cta:hover{background:var(--gold-soft)}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:15px 30px;border-radius:999px;font-weight:700;font-size:16px;
  text-decoration:none;border:0;cursor:pointer;font-family:"Montserrat",sans-serif;
  transition:transform .15s ease, background .15s ease;
}
.btn-primary{background:var(--navy);color:var(--btn-ink);box-shadow:var(--shadow)}
.btn-primary:hover{transform:translateY(-1px)}
.btn-gold{background:var(--gold-2);color:var(--ink)}
.btn-gold:hover{background:var(--gold-soft);transform:translateY(-1px)}
.btn-block{width:100%}
.btn[disabled]{opacity:.6;cursor:default;transform:none}
.cta-sub{font-size:13.5px;color:var(--ink-3);margin-top:12px}
.cta-sub strong{color:var(--ink)}

/* Hero. Unten bleibt Kraftpapier stehen, bis der Bräutigam ausgelaufen ist,
   erst danach beginnt der helle Stimmen-Abschnitt. */
.hero{padding:56px 0 46px}
.hero-inner{display:grid;grid-template-columns:1.12fr .88fr;gap:40px;align-items:center}
/* Der Satz über der Schlagzeile: benennt die Lücke, bevor das Ergebnis kommt */
/* Gleiche Schrift wie der Fließtext darunter, aber in voller Textfarbe und
   etwas größer. Bewusst NICHT in Gold: über der Falte darf Gold genau einmal
   vorkommen, nämlich auf „weint". Der goldene Strich links reicht als Akzent. */
.vorzeile{
  font-family:"Lora",Georgia,serif;font-size:clamp(17px,2.1vw,20px);line-height:1.5;
  color:var(--ink);margin-bottom:22px;max-width:30em;
  padding-left:16px;border-left:3px solid var(--gold-2);
}
.hero h1{margin-bottom:18px}
.gold-wort{color:var(--gold)}
.hero-claim{
  margin-top:22px;font-family:"Lora",Georgia,serif;font-style:italic;
  font-size:clamp(19px,2.4vw,23px);color:var(--gold);
}
/* Knopf und Siegel sind ein Gespann. Es steht mittig unter „Wenig Aufwand.
   Großer Moment." und mittig zwischen dieser Zeile und der Unterkante
   der Kraftpapier-Fläche. Deshalb linksbündig ausgerichtet statt
   in der ganzen Spalte zentriert, und die Zeile darunter ist schmaler
   gehalten, damit das Gespann nicht breiter wird als der Satz darüber. */
.hero-cta{margin-top:90px;display:flex;justify-content:flex-start}
.cta-block{position:relative;text-align:center;margin-left:26px}
.cta-block .cta-sub{max-width:330px;margin-left:auto;margin-right:auto}
/* Das Bild ist freigestellt. Es endet innerhalb der Kraftpapier-Fläche und
   läuft nach unten weich aus, damit keine harte Kante an der Farbgrenze entsteht. */
.hero-visual{position:relative;justify-self:center;align-self:end}
.hero-visual img{
  max-height:660px;width:auto;margin-bottom:0;
  -webkit-mask-image:linear-gradient(to bottom, #000 78%, transparent 100%);
  mask-image:linear-gradient(to bottom, #000 78%, transparent 100%);
}

/* Beweis-Zeile */
.trust-strip{padding:34px 0 64px}
.trust-strip .row{
  display:flex;justify-content:center;gap:14px;flex-wrap:wrap;
}
.trust-strip .stat{
  flex:1 1 240px;text-align:center;background:var(--surface);
  border:1px solid var(--line-soft);border-radius:var(--radius);padding:22px 18px;
}
.trust-strip .stat b{
  display:block;font-family:"Montserrat",sans-serif;font-size:22px;color:var(--navy);font-weight:800;
  margin-bottom:6px;
}
.trust-strip .stat span{font-size:13.5px;color:var(--ink-2);line-height:1.45;display:block}

/* Sozialer Beweis direkt unter dem Hero, statt der alten Zahlenleiste */
.erststimmen{
  background:var(--surface);
  border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);
  padding:44px 0 40px;
}
.beweiszeile{
  text-align:center;margin-top:26px;font-family:"Lora",Georgia,serif;
  font-size:16px;line-height:1.55;color:var(--ink-2);max-width:46em;margin-inline:auto;
}
.beweiszeile strong{color:var(--ink)}

/* Volle Blau-Bänder, Stoffstruktur wie Krawatten-/Westenstoff */
.band{
  background-color:var(--navy);
  background-image:
    repeating-linear-gradient(58deg, rgba(255,255,255,.045) 0px, rgba(255,255,255,.045) 2px, transparent 2px, transparent 5px),
    repeating-linear-gradient(-58deg, rgba(0,0,0,.10) 0px, rgba(0,0,0,.10) 2px, transparent 2px, transparent 6px);
  color:#FBF7F0;text-align:center;padding:52px 0;
}
.band h2{color:#FBF7F0;margin-bottom:12px}
.band p.gross{
  font-family:"Montserrat",sans-serif;font-weight:700;font-size:clamp(19px,2.6vw,25px);
  line-height:1.3;max-width:24em;margin:0 auto 22px;text-wrap:balance;
}
.band p.klein{font-family:"Lora",Georgia,serif;font-size:16px;color:rgba(251,247,240,.78);max-width:34em;margin:0 auto 22px}
.band .cta-sub{color:rgba(251,247,240,.62);margin-top:14px}
.band .cta-sub strong{color:var(--gold-soft)}

/* Klare Reihenfolge fürs Auge: erst die große Frage, dann die kurze Antwort,
   dann die unterstrichene Zusage, dann der Knopf. Nicht alles gleich laut. */
.frage-oben{
  font-family:"Montserrat",sans-serif;font-weight:800;letter-spacing:-.02em;
  font-size:clamp(28px,4.4vw,44px);line-height:1.08;margin-bottom:14px;text-wrap:balance;
}
.band .frage-oben{color:#FBF7F0}
/* Nur wo eine große Frage darübersteht, tritt die Zeile darunter zurück */
.band .frage-oben + p.gross,
.beige-frame .frage-oben + p.gross{
  font-family:"Lora",Georgia,serif;font-weight:400;font-style:normal;
  font-size:clamp(16px,2vw,18.5px);line-height:1.5;
  max-width:30em;margin:0 auto 22px;
}
.band .frage-oben + p.gross{color:rgba(251,247,240,.8)}
/* Eigene Zeile, damit die Zusage nicht mit dem Knopf um Aufmerksamkeit kämpft */
.entscheid{
  display:block;width:fit-content;max-width:100%;margin:0 auto 26px;
  font-family:"Montserrat",sans-serif;font-weight:700;
  font-size:clamp(16px,2.1vw,19px);line-height:1.4;padding:10px 22px;border-radius:999px;
}
.band .entscheid{color:var(--gold-soft);background:rgba(244,232,201,.13);border:1.5px solid var(--gold-2)}

/* WhatsApp-Knopf: der Nutzer verschickt selbst, wir schreiben niemanden an */
.teilen{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;align-items:center}
.btn-wa{background:#FBF7F0;color:var(--navy);border:1px solid rgba(20,24,28,.12)}
.btn-wa:hover{background:#fff;transform:translateY(-1px)}
.wa-zeichen{width:21px;height:21px;flex:none;display:block}

/* Problem */
.problem{background:var(--surface);padding-bottom:160px}
.problem h2{text-align:center;margin-bottom:8px}
.problem .intro{text-align:center;color:var(--ink-2);font-family:"Lora",serif;font-size:17px;margin-bottom:38px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;position:relative}
.card{
  position:relative;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);
  padding:30px 26px 34px;
}
/* Platz unten, damit das Siegel nicht in den Text ragt. Bewusst knapp: Das
   Siegel behält seine Größe, es rutscht mit den kürzeren Karten nur nach oben. */
.problem .card{padding:24px 24px 28px}
/* Die Karten sind jetzt nur noch so hoch wie ihr Text. Damit das Siegel seine
   Größe behalten kann, hängt es weiter nach unten heraus statt in den Text zu
   rutschen. Es sitzt auf der unteren Ecke der dritten Karte auf. */
.problem .siegel{bottom:-136px}
.card h3{margin-bottom:10px;font-size:21px}
.card p{font-family:"Lora",serif;color:var(--ink-2);font-size:16px;line-height:1.5}
.card.mit-siegel{padding-bottom:58px}

/* Wachssiegel in Gold: unregelmäßiger Rand, Schimmer, geprägte Schrift */
.siegel{
  position:absolute;right:-6px;bottom:-78px;width:168px;height:168px;
  border-radius:46% 54% 51% 49% / 50% 46% 54% 50%;
  background:
    radial-gradient(circle at 32% 26%, rgba(255,246,214,.95) 0%, rgba(255,246,214,0) 38%),
    radial-gradient(circle at 72% 78%, rgba(90,64,10,.55) 0%, rgba(90,64,10,0) 42%),
    linear-gradient(128deg, #E8C368 0%, #C9A03C 26%, #9C761C 52%, #D8B45A 72%, #8A6716 100%);
  color:#FFF6DC;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;transform:rotate(-9deg);
  box-shadow:0 12px 26px -12px rgba(20,24,28,.6), inset 0 2px 6px rgba(255,246,214,.5), inset 0 -4px 10px rgba(80,56,8,.5);
  z-index:2;
}
.siegel::after{
  content:"";position:absolute;inset:11px;border-radius:inherit;
  border:1.5px solid rgba(90,64,10,.32);
  box-shadow:inset 0 1px 0 rgba(255,246,214,.35);
}
.siegel b{
  font-family:"Montserrat",sans-serif;font-size:32px;font-weight:800;line-height:1;
  text-shadow:0 1px 0 rgba(255,246,214,.45), 0 -1px 1px rgba(70,48,6,.65);
}
.siegel span{
  font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  margin-top:7px;line-height:1.25;max-width:9em;color:rgba(255,246,214,.9);
  text-shadow:0 -1px 1px rgba(70,48,6,.6);
}
/* Das Siegel liegt mit seiner Mitte auf der linken oberen Ecke des Knopfes.
   Der Bezugsrahmen ist die Knopf-Zeile, nicht der ganze Block, sonst
   richtet sich das Siegel an der breiteren Zeile darunter aus.
   Damit die Schrift frei bleibt, bekommt der Knopf links mehr Platz. */
.knopf-zeile{position:relative;display:inline-block}
.cta-block .btn-primary{padding-left:68px}
.cta-block .siegel.hero-siegel{
  position:absolute;left:-50px;top:-38px;right:auto;bottom:auto;
  width:102px;height:102px;transform:rotate(-12deg);z-index:4;
}
.cta-block .siegel.hero-siegel b{font-size:26px;line-height:1}
.cta-block .siegel.hero-siegel span{font-size:8px;margin-top:3px;letter-spacing:.07em;max-width:8em}
.cta-block .siegel.hero-siegel::after{inset:7px;border-width:1px}

/* Lösung */
.solution{text-align:center}
.solution-inner{max-width:760px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:20px}
.solution-mark{
  width:132px;height:132px;border-radius:50%;
  background:#FBF7F0 url("assets/braeutigam-frei.png") no-repeat 50% 16%;
  background-size:118%;
  border:5px solid var(--navy);box-shadow:0 0 0 1px var(--line);
}
.solution .gross{
  font-family:"Lora",Georgia,serif;font-size:clamp(17px,2.2vw,20px);line-height:1.6;color:var(--ink-2);
}
/* Der zweite Absatz steht bewusst etwas abgesetzt und dunkler. Er ist die
   Schlussfolgerung, nicht die Fortsetzung. */
.solution .gross.nach{margin-top:14px;color:var(--ink)}
/* Handgezogener Unterstrich: ein einziger Strich, der nach rechts läuft und
   etwas tiefer wieder nach links zurückgeführt wird, wie mit einem Stift.
   vector-effect hält die Strichstärke gleich, auch wenn die Grafik auf die
   Textbreite gezogen wird. */
/* Der Schlusssatz ist die Pointe des Abschnitts, deshalb steht er allein,
   mit Luft darüber und deutlich größer als der Absatz davor. Er bleibt aber
   unter der Größe der Überschrift, sonst kämpfen beide gegeneinander. */
.solution .schlusssatz{margin-top:6px}
.strich{
  position:relative;display:inline-block;
  font-family:"Lora",Georgia,serif;font-weight:700;color:var(--gold);
  font-size:clamp(20px,2.7vw,25px);line-height:1.45;
}
.strich::after{
  content:"";position:absolute;left:-8px;right:-8px;bottom:-10px;height:17px;
  pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 18' preserveAspectRatio='none'%3E%3Cpath d='M5 6C62 2 148 10 295 5C248 14 118 11 7 13' fill='none' stroke='%231B2F49' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") no-repeat center;
  background-size:100% 100%;
}

/* Die drei Wege */
/* Eigener, tieferer Kraftpapier-Ton. Vorher hatte dieser Abschnitt dieselbe
   Farbe wie „So läuft es ab" darüber, am Telefon lief dadurch beides
   ineinander. */
.ways{background:var(--surface-2)}
.ways h2{text-align:center}
.ways .intro{text-align:center;color:var(--ink-2);font-family:"Lora",serif;font-size:17px;margin:12px auto 38px;max-width:44em}
.ways-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.way{
  background:var(--surface);border:2px solid var(--navy);border-radius:var(--radius);padding:22px 18px;
  display:flex;flex-direction:column;gap:8px;position:relative;
}
/* Dieselbe Pillenform wie in der Zeichen-Legende, nur größer. Sie ist hier
   die Überschrift der Karte, deshalb fällt das alte "Weg 1" darüber weg. */
.weg-pille{
  align-self:flex-start;border-radius:99px;padding:4px 11px;
  font-family:"IBM Plex Mono",monospace;font-size:11.5px;font-weight:600;
  letter-spacing:.04em;margin-bottom:4px;
}
.weg-pille.uhr{background:var(--navy);color:var(--gold-2)}
.weg-pille.kern{background:#DBE2EB;color:var(--navy)}
/* Gefüllt war die Pille auf der hellen Karte eine große blasse Fläche.
   Als Umriss sagt sie dasselbe und nimmt sich zurück. */
.weg-pille.voll{background:transparent;color:#9A7419;border:1.5px solid var(--gold-2)}
.way.empfohlen{background:var(--navy);border-color:var(--navy)}
/* h3 ist hier die Pille und bringt ihre eigene Farbe mit. Stünde sie in dieser
   Regel, wäre die helle Pille auf der blauen Karte cremefarben auf Hellblau. */
.way.empfohlen .zeichen{color:#FBF7F0}
.way.empfohlen .zahlen{color:var(--gold-2)}
.way.empfohlen p{color:rgba(251,247,240,.82)}
.way .tag{
  position:absolute;top:-13px;left:22px;background:var(--gold-2);color:var(--ink);font-size:11px;font-weight:700;
  font-family:"Montserrat",sans-serif;letter-spacing:.04em;text-transform:uppercase;padding:5px 12px;border-radius:999px;
}
.way .zeichen{font-size:17px;line-height:1;color:var(--navy)}
.way.empfohlen .zeichen{color:var(--gold-2)}
.way .wegnr{
  display:flex;align-items:center;gap:8px;
  font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:-2px;
}
.way.empfohlen .wegnr{color:rgba(251,247,240,.6)}
.way h3{font-size:21px}
/* Zeit als große Zahl, damit man den Aufwand sofort sieht */
.way .zeit{display:flex;align-items:baseline;gap:8px;margin-top:6px}
.way .zeit b{
  font-family:"Montserrat",sans-serif;font-size:40px;font-weight:800;line-height:.9;color:var(--navy);
  font-variant-numeric:tabular-nums;letter-spacing:-.03em;
}
.way .zeit span{font-size:14px;font-weight:600;color:var(--ink-3)}
.way.empfohlen .zeit b{color:var(--gold-2)}
.way.empfohlen .zeit span{color:rgba(251,247,240,.75)}
.way .zeitbalken{height:7px;border-radius:99px;background:var(--surface-2);overflow:hidden;margin-top:12px}
.way .zeitbalken i{display:block;height:100%;background:var(--navy);border-radius:99px}
.way.empfohlen .zeitbalken{background:rgba(251,247,240,.18)}
.way.empfohlen .zeitbalken i{background:var(--gold-2)}
.way .fragen{
  font-family:"IBM Plex Mono",monospace;font-size:12.5px;color:var(--ink-3);
  font-variant-numeric:tabular-nums;margin-top:-2px;
}
.way.empfohlen .fragen{color:rgba(251,247,240,.62)}
.way p{font-family:"Lora",serif;font-size:15px;color:var(--ink-2);line-height:1.5}
.ways .hinweis{
  text-align:center;margin-top:26px;font-size:14.5px;color:var(--ink-2);font-family:"Lora",serif;
}

/* App-Funktionen */
.appfeat h2{text-align:center;margin-bottom:38px}
.appfeat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.feat{
  background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--radius);
  padding:26px 24px;display:flex;gap:18px;align-items:flex-start;
}
/* Gezeichnete Linien-Icons statt Emoji, ohne Kasten drumherum */
.feat .icon{
  flex:none;width:42px;height:42px;color:var(--navy);display:block;margin-top:2px;
}
.feat .icon svg{width:100%;height:100%;display:block}
.feat h3{margin-bottom:6px}
.feat p{font-family:"Lora",serif;font-size:15.5px;color:var(--ink-2);line-height:1.5}
/* „Blick in die App" hebt sich vom Rest ab: dunklerer Kraftpapierton ohne Nadelstreifen,
   dazu ein weicher Lichtkegel in der Mitte. Kein Blau als Fläche. */
.einblick{
  background-color:var(--weiss);
  background-image:none;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.einblick .intro{color:var(--ink-2)}
.shots{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;align-items:end;margin-top:44px}

/* Zeichen-Legende unter den Handys */
.legende{
  max-width:520px;margin:52px auto 0;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:24px 28px;
}
.legende-kopf{
  font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--gold);margin-bottom:16px;text-align:center;
}
.legende-reihe{display:flex;flex-direction:column;gap:12px}
.legende .lg{display:flex;align-items:center;gap:12px;font-size:15px;color:var(--ink-2)}
.legende .lg b{color:var(--ink)}
/* Gleiche Pillenform wie die Abzeichen auf den Handy-Bildern, nur lesbar groß.
   Feste Breite, damit die Erklärungen rechts auf einer Kante stehen. */
.legende .lg-pille{
  flex:none;width:126px;text-align:center;border-radius:99px;padding:5px 10px;
  font-family:"IBM Plex Mono",monospace;font-style:normal;font-size:11.5px;
  font-weight:600;letter-spacing:.03em;
}
.legende .lg-pille.kern{background:#DBE2EB;color:var(--navy)}
.legende .lg-pille.waere{background:var(--gold-soft);color:#9A7419}
.legende .lg-pille.bonus{background:var(--bg);color:var(--ink-3);border:1px solid var(--line)}
.legende .lg-pille.uhr{background:var(--navy);color:var(--gold-2)}
.legende-fuss{
  margin-top:18px;padding-top:16px;border-top:1px solid var(--line-soft);text-align:center;
  font-family:"Lora",serif;font-size:15px;color:var(--ink);font-style:italic;
}
.shot{display:flex;flex-direction:column;gap:14px;align-items:center;position:relative}
/* Echtes Gerät statt Zeichnung: leichte Raumkippung, polierte Kante,
   Titaniumrahmen mit hellen Kanten, Tasten, Spiegelung schräg übers Glas,
   dazu ein weicher Auflegeschatten. */
.shot .geraet{position:relative;width:100%;max-width:290px;perspective:1600px}
.phone{
  position:relative;width:100%;border-radius:38px;padding:10px 8px 10px;
  background:
    linear-gradient(106deg,
      #8d949d 0%, #c6ccd3 1.2%, #3a4047 3.4%, #191d23 14%,
      #0d1014 50%, #171b21 84%, #3d444b 96%, #c2c8cf 98.8%, #8d949d 100%);
  box-shadow:
    0 2px 0 rgba(255,255,255,.22) inset,
    0 -2px 0 rgba(255,255,255,.14) inset,
    0 40px 46px -30px rgba(20,24,28,.75),
    0 10px 18px -10px rgba(20,24,28,.45);
  display:flex;flex-direction:column;
  transform-style:preserve-3d;
}
/* Spiegelung auf dem Glas */
.phone::after{
  content:"";position:absolute;inset:10px 8px;border-radius:29px;pointer-events:none;
  background:
    linear-gradient(112deg,
      rgba(255,255,255,0) 4%, rgba(255,255,255,.5) 11%, rgba(255,255,255,.17) 23%,
      rgba(255,255,255,.02) 31%, rgba(255,255,255,0) 52%,
      rgba(255,255,255,.14) 60%, rgba(255,255,255,.02) 66%, rgba(255,255,255,0) 74%);
  z-index:5;
}
/* Tasten: links Lautstärke und Stummschalter, rechts der Einschalter */
.phone::before{
  content:"";position:absolute;left:-2.5px;top:96px;width:3px;height:62px;border-radius:2px;
  background:linear-gradient(90deg,#8a9199,#3a4047);
  box-shadow:
    0 -46px 0 -31px #7d848c,
    0 78px 0 0 #7d848c,
    calc(100% + 5px) 20px 0 0 #7d848c;
}
/* Auflegeschatten auf dem Untergrund */
.shot .geraet::after{
  content:"";position:absolute;left:6%;right:6%;bottom:-14px;height:26px;border-radius:50%;
  background:radial-gradient(ellipse at center, rgba(20,24,28,.34) 0%, rgba(20,24,28,.12) 46%, rgba(20,24,28,0) 74%);
  filter:blur(3px);z-index:-1;
}
/* Die äußeren liegen zur Mitte gedreht, das mittlere steht aufrecht und höher */
.shots .shot:first-child .geraet{transform:rotate(-2.2deg)}
.shots .shot:first-child .phone{transform:rotateY(7deg) rotateX(1.5deg)}
.shots .shot:last-child .geraet{transform:rotate(2.2deg)}
.shots .shot:last-child .phone{transform:rotateY(-7deg) rotateX(1.5deg)}
.shots .shot:nth-child(2){margin-bottom:30px}
.shots .shot:nth-child(2) .geraet{max-width:304px}
.shots .shot:nth-child(2) .phone{
  transform:rotateX(2deg);
  box-shadow:
    0 2px 0 rgba(255,255,255,.24) inset,
    0 -2px 0 rgba(255,255,255,.14) inset,
    0 54px 58px -30px rgba(20,24,28,.78),
    0 14px 22px -10px rgba(20,24,28,.5);
}
/* Dynamic Island und Home-Strich liegen auf dem Bild, nicht auf dem Rahmen.
   Genau daran erkennt das Auge ein echtes Telefon. */
.phone .notch{
  position:absolute;left:50%;top:19px;transform:translateX(-50%);
  width:84px;height:24px;border-radius:99px;margin:0;z-index:6;
  background:#07090b;box-shadow:0 1px 2px rgba(0,0,0,.6);
}
.phone .notch::after{
  content:"";position:absolute;right:9px;top:50%;transform:translateY(-50%);
  width:7px;height:7px;border-radius:50%;
  background:radial-gradient(circle at 35% 32%, #2f4a63 0%, #101c28 62%, #05080b 100%);
}
/* Das Glas sitzt vertieft im Rahmen, deshalb der harte Schatten an der Oberkante */
.phone .screen{
  background:#EBE1D3;border-radius:29px;overflow:hidden;min-height:508px;padding-bottom:22px;
  display:flex;flex-direction:column;flex:1;position:relative;
  box-shadow:
    inset 0 2px 5px rgba(0,0,0,.55),
    inset 0 -1px 3px rgba(0,0,0,.35),
    inset 2px 0 3px rgba(0,0,0,.28),
    inset -2px 0 3px rgba(0,0,0,.28);
}
.phone .home{
  position:absolute;left:50%;bottom:19px;transform:translateX(-50%);
  width:112px;height:5px;border-radius:99px;margin:0;z-index:6;
  background:rgba(20,24,28,.4);
}

/* Kapitel-Fahne, wie .flag in der App.
   Oben bleibt Platz für die Statusleiste, wie in einer echten App. */
.ph-flag{background:#1B2F49;color:#FBF7F0;padding:38px 12px 8px}
.ph-flag .bt{font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;font-weight:800;line-height:1.2}
.ph-flag .bs{font-size:9.5px;opacity:.78;margin-top:2px;line-height:1.3}

/* Fortschritt, wie .topbar in der App: Zeile, Goldbalken, Kapitelsegmente */
.ph-prog{padding:8px 12px 9px;border-bottom:1px solid #D3C4B0;background:#EBE1D3}
.ph-prow{display:flex;align-items:center;gap:8px}
.ph-prow .kap{font-size:10px;font-weight:600;color:#4C525A;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ph-prow .kap b{color:#14181C}
.ph-prow .pct{font-family:"IBM Plex Mono",monospace;font-size:10.5px;color:#A8801F;font-weight:500}
.ph-pbar{height:6px;background:#E1D5C3;border:1px solid #E4D9C9;border-radius:99px;overflow:hidden;margin-top:7px}
.ph-pbar i{display:block;height:100%;background:#A8801F}
.ph-chaprow{display:flex;gap:3px;margin-top:6px}
.ph-chaprow i{flex:1;height:5px;border-radius:2px;background:#E1D5C3;overflow:hidden;position:relative}
.ph-chaprow i b{position:absolute;inset:0 auto 0 0;background:#2E6B4F;display:block}
.ph-chaprow i.now{outline:1.5px solid #A8801F;outline-offset:1px}
.ph-saved{font-size:8.5px;color:#2E6B4F;margin-top:6px;letter-spacing:.05em;font-weight:700;text-transform:uppercase}

/* Fragekarte mit Wichtig-Kästchen rechts */
.ph-body{padding:12px;flex:1}
.ph-card{
  position:relative;background:#FBF7F0;border:1px solid #D3C4B0;border-left:4px solid #1B2F49;
  border-radius:12px;padding:13px 52px 13px 13px;
}
.ph-card.c2{border-left-color:#9A7419}
.ph-card::after{content:"";position:absolute;top:12px;bottom:12px;right:42px;width:1px;background:#E4D9C9}
.ph-mark{
  position:absolute;right:9px;top:13px;width:32px;display:flex;flex-direction:column;
  align-items:center;gap:4px;color:#82786B;
}
.ph-mark .box{
  width:24px;height:24px;border:1.5px solid #D3C4B0;border-radius:5px;background:#FBF7F0;
  display:grid;place-items:center;font-size:12px;color:transparent;
}
.ph-mark.an .box{background:#A8801F;border-color:#A8801F;color:#fff}
.ph-mark.an{color:#A8801F}
.ph-mark .cap{font-size:7.5px;line-height:1.15;text-align:center;letter-spacing:.04em;text-transform:uppercase;font-weight:800}
.ph-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:8px}
.ph-no{font-family:"IBM Plex Mono",monospace;font-size:10.5px;color:#A8801F;font-weight:600}
.ph-badge{
  font-family:"IBM Plex Mono",monospace;font-size:8.5px;letter-spacing:.04em;padding:2px 7px;
  border-radius:99px;background:#DBE2EB;color:#1B2F49;font-weight:500;
}
.ph-badge.c2{background:#F4E8C9;color:#9A7419}
.ph-block{font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;color:#82786B;font-weight:800}
.ph-q{font-family:"Lora",Georgia,serif;font-weight:500;font-size:14.5px;line-height:1.3;color:#14181C;margin:0}
.ph-hint{font-family:"Lora",Georgia,serif;font-style:italic;font-size:11px;color:#82786B;margin:7px 0 0;line-height:1.4}
.ph-selnote{
  display:inline-block;margin-top:9px;font-size:8.5px;letter-spacing:.07em;text-transform:uppercase;
  font-weight:800;color:#9A7419;
}
.ph-input{
  margin-top:9px;border:1px solid #D3C4B0;border-radius:8px;background:#FBF7F0;min-height:44px;
  padding:8px 9px;font-family:"Lora",serif;font-size:11.5px;color:#82786B;line-height:1.4;
}
.ph-mic{
  display:inline-flex;align-items:center;gap:6px;margin-top:9px;border-radius:99px;
  padding:7px 12px;font-family:"Montserrat",sans-serif;font-size:10.5px;font-weight:700;
  background:#9B2C2C;color:#fff;
}
.ph-mic .dot{width:6px;height:6px;border-radius:99px;background:#fff;flex:none}
.ph-mic .zeit{font-family:"IBM Plex Mono",monospace;font-weight:500;opacity:.85}
.ph-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px}
.ph-chip{
  border:1px solid #D3C4B0;background:#FBF7F0;color:#4C525A;padding:5px 9px;border-radius:99px;
  font-size:10.5px;font-family:"Montserrat",sans-serif;
}
.ph-chip.an{background:#1B2F49;border-color:#1B2F49;color:#FBF7F0;font-weight:600}
.ph-sld{margin-top:11px}
.ph-sld .sl{display:flex;justify-content:space-between;font-size:9.5px;font-weight:700;color:#82786B;margin-bottom:3px}
.ph-sld .track{height:4px;border-radius:99px;background:#E1D5C3;position:relative;margin-bottom:11px}
.ph-sld .track i{position:absolute;top:50%;width:13px;height:13px;border-radius:50%;background:#A8801F;transform:translate(-50%,-50%)}
.ph-note{
  margin-top:11px;padding-top:9px;border-top:1px solid #E4D9C9;font-size:9.5px;color:#82786B;line-height:1.45;
}
.ph-note b{color:#4C525A}
/* Auf dem Tischton braucht die Bildunterschrift mehr Kontrast */
.shot .bu{
  font-size:14px;color:#2B2119;text-align:center;font-family:"Lora",serif;max-width:26em;
  text-shadow:0 1px 0 rgba(255,255,255,.35);
}

/* Produktbild bei „Das bekommst du": Laptop mit Startbildschirm, das Heft davor */
/* Maßstab: Ein Blatt A4 ist 21 cm breit, ein Laptop rund 30 cm.
   Ein Blatt davor muss also gut zwei Drittel der Laptopbreite einnehmen,
   sonst wirkt es wie ein Zettel. */
.produkt-mockup{
  position:relative;left:34px;width:min(460px,100%);margin:76px auto 116px;padding-bottom:6px;
  filter:drop-shadow(0 26px 30px rgba(20,24,28,.17));
}
/* Das Heft liegt auf der unteren linken Hälfte der Fassungen,
   nicht mehr auf dem Laptop: der Bildschirmtext bleibt lesbar. */
.produkt-mockup .tisch-heft{
  position:absolute;left:-29%;bottom:-58px;margin:0;transform:translateX(-50%) rotate(-7deg);
  width:178px;padding:26px 18px;gap:12px;z-index:5;
}
.produkt-mockup .tisch-heft .k{font-size:9px}
.produkt-mockup .tisch-heft .t{font-size:16px}
.produkt-mockup .tisch-heft .l{width:38px}

/* Die vier Fassungen als PDF-Blätter, aufgefächert hinter dem Laptop */
.pm-blaetter{position:absolute;left:-178px;top:-66px;width:200px;height:270px;z-index:1}
/* Die drei ersten Fassungen in Silber, die vierte in Gold.
   Papierton statt Weiß, damit sie zum Kraftpapier der Seite gehören. */
.pm-blaetter .bl{
  position:absolute;left:0;top:0;width:142px;aspect-ratio:210/297;
  background:linear-gradient(176deg,#F7F2E8,#EDE4D5);
  border:1px solid #CBBEA9;border-left:3px solid #9AA0A6;border-radius:2px;
  padding:15px 13px;display:flex;flex-direction:column;gap:5px;
  box-shadow:0 12px 18px -12px rgba(20,24,28,.5);
  transform-origin:80% 100%;
}
.pm-blaetter .b1{transform:rotate(-16deg)}
.pm-blaetter .b2{transform:rotate(-10deg)}
.pm-blaetter .b3{transform:rotate(-4deg)}
.pm-blaetter .b4{
  transform:rotate(5deg);left:26px;top:36px;width:150px;z-index:4;
  background:linear-gradient(176deg,#FFFCF2,#F6EDD8);
  border:1px solid var(--gold-2);border-left:4px solid var(--gold-2);
  box-shadow:0 18px 26px -12px rgba(20,24,28,.65);
}
/* kleiner Goldpunkt oben rechts, damit die vierte sofort auffällt */
.pm-blaetter .b4::after{
  content:"";position:absolute;right:9px;top:9px;width:9px;height:9px;border-radius:50%;
  background:radial-gradient(circle at 34% 30%, #F0D287, #C9A03C 70%, #9C761C);
}
.pm-blaetter .bl-k{
  font-family:"Montserrat",sans-serif;font-weight:700;font-size:7px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink);margin-bottom:4px;
}
.pm-blaetter .bl-k.gold{color:var(--gold);font-weight:800}
.pm-blaetter .bl i{display:block;height:2.5px;border-radius:99px;background:#BFB29C}
.pm-blaetter .bl i.kurz{width:58%}
.pm-blaetter .b4 i{background:#A89878}

/* Sprechfassung als Zettel, liegt links unten auf der Tastatur.
   Leicht gestaucht und geschert, damit er flach auf dem Gerät liegt. */
.pm-zettel{
  position:absolute;left:5%;bottom:-16px;width:136px;z-index:7;
  background:linear-gradient(174deg,#FFFFFF,#F5F0E6);
  border:1px solid var(--line-soft);border-radius:2px;
  padding:9px 10px;
  transform:rotate(-4deg) skewX(-7deg) scaleY(.86);
  box-shadow:0 12px 18px -12px rgba(20,24,28,.7);
}
.pm-zettel .z-k{
  font-family:"IBM Plex Mono",monospace;font-size:5.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);margin-bottom:5px;
}
.pm-zettel .z-t{font-family:"Lora",Georgia,serif;font-size:7px;line-height:1.65;color:var(--ink-2)}
.pm-zettel .z-t b{color:var(--gold)}
.pm-zettel .z-f{
  margin-top:6px;font-family:"IBM Plex Mono",monospace;font-size:5px;color:var(--ink-3);
}

/* Handy rechts neben dem Laptop, leicht davor */
.pm-phone{
  position:absolute;right:-76px;bottom:-58px;width:124px;z-index:6;
  border-radius:17px;padding:4px;transform:rotate(3deg);
  background:linear-gradient(106deg,#8d949d 0%,#c6ccd3 1.6%,#22272d 12%,#0d1014 52%,#2a3037 90%,#c2c8cf 98.4%,#8d949d 100%);
  box-shadow:
    0 1.5px 0 rgba(255,255,255,.24) inset,
    0 -1.5px 0 rgba(255,255,255,.14) inset,
    0 22px 26px -16px rgba(20,24,28,.72);
}
.pm-phone::after{
  content:"";position:absolute;inset:4px;border-radius:14px;pointer-events:none;z-index:4;
  background:linear-gradient(112deg, rgba(255,255,255,0) 4%, rgba(255,255,255,.44) 11%, rgba(255,255,255,.12) 24%, rgba(255,255,255,0) 34%);
}
.pmp-insel{
  position:absolute;left:50%;top:10px;transform:translateX(-50%);
  width:34px;height:10px;border-radius:99px;background:#07090b;z-index:5;
}
.pmp-screen{
  background:#EBE1D3;border-radius:14px;overflow:hidden;aspect-ratio:9/19;position:relative;
  display:flex;flex-direction:column;gap:4px;padding-bottom:12px;
  box-shadow:inset 0 2px 4px rgba(0,0,0,.5);
}
.pmp-flag{background:#1B2F49;color:#FBF7F0;padding:17px 7px 5px}
.pmp-flag b{display:block;font-size:5.5px;letter-spacing:.11em;text-transform:uppercase}
.pmp-flag span{display:block;font-size:5px;opacity:.75;margin-top:1px}
.pmp-prog{display:flex;align-items:center;gap:4px;padding:0 7px}
.pmp-bar{flex:1;height:3px;background:#E1D5C3;border-radius:99px}
.pmp-bar i{display:block;height:100%;width:56%;background:#A8801F;border-radius:99px}
.pmp-pct{font-family:"IBM Plex Mono",monospace;font-size:4.5px;color:#A8801F}
.pmp-karte{
  margin:2px 7px;background:#FBF7F0;border:1px solid #E4D9C9;border-radius:5px;padding:6px 6px 7px;flex:1;
}
.pmp-nr{font-family:"IBM Plex Mono",monospace;font-size:4.5px;color:#A8801F;margin-bottom:3px}
.pmp-frage{font-family:"Montserrat",sans-serif;font-weight:700;font-size:6px;line-height:1.3;color:#14181C}
.pmp-antwort{
  margin-top:5px;background:#EBE1D3;border-radius:3px;padding:4px;
  font-family:"Lora",serif;font-size:5px;line-height:1.35;color:#4C525A;
}
.pmp-knopf{
  margin:0 7px;background:#9B2C2C;color:#FBF7F0;border-radius:99px;padding:3px 6px;
  font-size:4.5px;font-weight:700;text-align:center;
}
.pmp-home{
  position:absolute;left:50%;bottom:6px;transform:translateX(-50%);
  width:40px;height:2.5px;border-radius:99px;background:rgba(20,24,28,.38);z-index:5;
}

/* Laptop mit aufgeklappter Tastatur.
   Das Unterteil wird nach hinten weggekippt, deshalb sieht man die Tasten. */
.tisch-laptop{width:100%;flex:none;position:relative;z-index:3;perspective:1000px;perspective-origin:50% 0%}
.tisch-laptop .deckel{
  background:linear-gradient(160deg,#2b3036 0%,#14181C 42%,#0d1014 100%);
  border-radius:12px 12px 3px 3px;padding:10px 10px 12px;
  box-shadow:0 24px 34px -20px rgba(20,24,28,.55), inset 0 1px 0 rgba(255,255,255,.14);
}
.tisch-laptop .schirm{
  background:#EBE1D3;border-radius:4px;overflow:hidden;aspect-ratio:16/10;
  display:flex;flex-direction:column;position:relative;
}
.tisch-laptop .schirm::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(112deg, rgba(255,255,255,.3) 0%, rgba(255,255,255,.06) 22%, rgba(255,255,255,0) 44%);
}
.tisch-laptop .basis{
  position:relative;height:132px;width:100%;margin:0 0 -86px;
  transform-origin:top center;transform:rotateX(75deg);
  background:linear-gradient(#333940 0%,#20252c 22%,#14181d 70%,#0d1014 100%);
  border-radius:2px 2px 12px 12px;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.18), inset 0 -2px 0 rgba(255,255,255,.08);
}
.tisch-laptop .tasten{
  position:absolute;left:7%;right:7%;top:8%;height:47%;
  display:flex;flex-direction:column;gap:8%;
}
.tisch-laptop .tasten i{
  flex:1;border-radius:2px;
  background-image:repeating-linear-gradient(90deg, #2f353d 0 5.5%, transparent 5.5% 7.1%);
}
.tisch-laptop .tasten i.space{
  background-image:none;background:#2f353d;margin:0 24%;border-radius:2px;
}
.tisch-laptop .trackpad{
  position:absolute;left:50%;bottom:11%;transform:translateX(-50%);
  width:27%;height:27%;border-radius:4px;
  background:linear-gradient(#242a31,#181c22);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);
}

/* Das Heft für sie */
.tisch-heft{
  width:118px;flex:none;z-index:2;position:relative;
  aspect-ratio:210/297;background:var(--bg);border-left:5px solid var(--navy);
  border-radius:2px 6px 6px 2px;padding:20px 13px;
  box-shadow:0 16px 24px -14px rgba(20,24,28,.5);
  display:flex;flex-direction:column;justify-content:center;gap:9px;
}
.tisch-heft .k{
  font-family:"IBM Plex Mono",monospace;font-size:6.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);text-align:center;
}
.tisch-heft .t{
  font-family:"Lora",Georgia,serif;font-style:italic;font-size:11px;line-height:1.25;
  color:var(--ink);text-align:center;
}
.tisch-heft .l{height:1px;background:var(--gold);width:28px;margin:0 auto}

/* Startbildschirm mit dem Mann drauf */
.tisch-laptop .start{flex:1;display:flex;align-items:stretch;padding:0}
.tisch-laptop .s-text{
  flex:1;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
  gap:4px;padding:14px 4px 14px 18px;
}
/* Der Mann steht mittig zwischen Text und rechtem Laptoprand,
   damit das Handy davor ihn nicht verdeckt. */
.tisch-laptop .s-mann{
  width:34%;object-fit:contain;object-position:bottom;align-self:flex-end;max-height:100%;
  margin-right:13%;
}
.tisch-laptop .s-oben{
  font-family:"IBM Plex Mono",monospace;font-size:6.5px;letter-spacing:.16em;text-transform:uppercase;color:#A8801F;
}
.tisch-laptop .s-titel{font-family:"Montserrat",sans-serif;font-weight:800;font-size:15px;color:#14181C;letter-spacing:-.02em;line-height:1.1}
.tisch-laptop .s-unter{font-family:"Lora",Georgia,serif;font-size:8.5px;color:#82786B}
.tisch-laptop .s-cta{
  margin-top:5px;background:#1B2F49;color:#FBF7F0;border-radius:99px;padding:5px 13px;
  font-family:"Montserrat",sans-serif;font-size:7.5px;font-weight:700;
}


/* Bonus-Vorschau */
.bonus-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:36px}
.bonus-card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px 24px;display:flex;flex-direction:column;gap:16px;
}
.bonus-card .kopf{display:flex;align-items:center;gap:10px}
.bonus-card .tag{
  font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  background:var(--gold);color:#fff;padding:4px 10px;border-radius:99px;font-weight:600;
}
.bonus-card h3{font-size:20px}
.bonus-card p{font-family:"Lora",serif;font-size:15.5px;line-height:1.55;color:var(--ink-2)}
.bonus-card p + p{margin-top:11px}
/* Heft als Magazin */
.heft-wrap{display:flex;justify-content:center;padding:8px 0 4px}
.heft{
  width:210px;aspect-ratio:210/297;background:var(--bg);border-radius:3px 8px 8px 3px;
  border-left:6px solid var(--navy);padding:34px 24px;
  display:flex;flex-direction:column;justify-content:center;
  box-shadow:0 16px 30px -18px rgba(20,24,28,.6), 4px 0 0 -1px rgba(20,24,28,.06);
  transform:rotate(-2deg);
}
.heft .format{
  margin-top:auto;font-family:"IBM Plex Mono",monospace;font-size:8.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);text-align:center;
}
.heft .klein{
  font-family:"IBM Plex Mono",monospace;font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);text-align:center;margin-bottom:14px;
}
.heft .ht{
  font-family:"Lora",Georgia,serif;font-style:italic;font-size:21px;line-height:1.25;color:var(--ink);
  text-align:center;margin-bottom:16px;
}
.heft .linie{height:1px;background:var(--gold);width:46px;margin:0 auto 16px}
.heft .von{
  font-family:"Montserrat",sans-serif;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);text-align:center;
}
/* Spickzettel, ohne Kasten */
.spick{
  font-family:"Lora",Georgia,serif;font-size:16px;line-height:1.85;color:var(--ink);
  border-left:3px solid var(--gold);padding-left:18px;
}
.spick .mark-luft{color:var(--gold);font-weight:700}
.spick .gross{font-family:"Montserrat",sans-serif;font-weight:800;font-size:15.5px;letter-spacing:.02em}
.spick .hinw{
  display:block;margin-top:12px;font-family:"IBM Plex Mono",monospace;font-size:10.5px;
  color:var(--ink-3);letter-spacing:.05em;
}

/* Trenner */
.cut{height:1px;background:var(--line);max-width:1080px;margin:0 auto}

/* Abschnitts-Kopf, damit jeder Block klar für sich steht */
.sektion-kopf{
  text-align:center;font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--gold);margin-bottom:12px;
}
/* Wenn der Abschnittskopf selbst eine Aussage ist, darf er nicht flüstern */
.sektion-kopf.gross-kopf{
  font-family:"Montserrat",sans-serif;font-weight:800;font-size:16px;letter-spacing:.06em;
  color:var(--gold);margin-bottom:14px;
}

/* Großes Zitat, soll ins Auge springen */
.zitat-band .marke{
  display:block;width:52px;height:3px;background:var(--gold-2);margin:0 auto 26px;
}
.zitat-band{
  background-color:var(--navy);
  background-image:
    repeating-linear-gradient(58deg, rgba(255,255,255,.045) 0px, rgba(255,255,255,.045) 2px, transparent 2px, transparent 5px),
    repeating-linear-gradient(-58deg, rgba(0,0,0,.10) 0px, rgba(0,0,0,.10) 2px, transparent 2px, transparent 6px);
  padding:64px 0;
}
.zitat-band p{
  max-width:17em;margin:0 auto;text-align:center;color:#FBF7F0;
  font-family:"Lora",Georgia,serif;font-style:italic;font-size:clamp(26px,4.4vw,44px);line-height:1.28;
  text-wrap:balance;
}
.zitat-band em{font-style:italic;color:var(--gold-2)}
.zitat-band .wer{
  display:block;margin-top:22px;font-family:"Montserrat",sans-serif;font-style:normal;font-weight:700;
  font-size:13px;letter-spacing:.09em;text-transform:uppercase;color:var(--gold-2);
}

/* Value stack */
.stack{background:var(--surface)}
.stack-inner{max-width:760px;margin:0 auto}
.stack h2{text-align:center;margin-bottom:30px}
.stack-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.stack-list li{
  display:flex;gap:16px;align-items:flex-start;background:var(--bg);border:1px solid var(--line);
  border-radius:12px;padding:20px 22px;
}
.stack-list .check{
  flex:none;width:26px;height:26px;border-radius:50%;background:var(--navy);color:var(--gold-2);
  display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;margin-top:2px;
}
.stack-list strong{display:block;font-size:16.5px;margin-bottom:4px}
.stack-list span{font-family:"Lora",serif;font-size:15.5px;color:var(--ink-2);line-height:1.5}
.stack-list li.bonus{border-color:var(--gold);background:var(--gold-soft)}
.stack-list li.bonus .check{background:var(--gold);color:#fff}

/* Einwände als Schlagabtausch: sein Gedanke als Sprechblase,
   die Antwort versetzt darunter. Man sieht auf einen Blick, was hier passiert. */
.einwaende h2{text-align:center;margin-bottom:10px}
.einwaende .intro{
  text-align:center;font-family:"Lora",serif;font-size:17px;color:var(--ink-2);margin-bottom:40px;
}
/* Zwei Spalten, damit der Abschnitt halb so lang wird und nicht erschlägt */
.einwand-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:34px 40px;max-width:1000px;margin:0 auto}
.einwand{margin:0}
.einwand .frage{
  position:relative;display:inline-block;max-width:100%;
  background:var(--navy);color:#FBF7F0;
  font-family:"Montserrat",sans-serif;font-weight:700;font-size:16px;line-height:1.35;
  padding:12px 18px;border-radius:16px 16px 16px 3px;margin-bottom:0;
  box-shadow:0 8px 16px -12px rgba(20,24,28,.5);
}
/* kleine Spitze unten links, damit es als Gedanke lesbar ist */
.einwand .frage::after{
  content:"";position:absolute;left:0;bottom:-8px;width:12px;height:9px;
  background:var(--navy);
  clip-path:polygon(0 0, 100% 0, 0 100%);
}
.einwand .antwort{
  position:relative;margin:18px 0 0 26px;
  background:var(--surface);border:1px solid var(--line-soft);border-radius:3px 14px 14px 14px;
  padding:15px 18px 15px 20px;
  font-family:"Lora",serif;font-size:15px;line-height:1.55;color:var(--ink-2);
  box-shadow:0 12px 22px -20px rgba(20,24,28,.5);
}
.einwand .antwort::before{
  content:"";position:absolute;left:0;top:12px;bottom:12px;width:3px;border-radius:99px;
  background:var(--gold-2);
}
.einwand .antwort strong{color:var(--ink)}
/* Folge-Absätze einer Antwort: enger dran, ohne die Sprechblasen-Ecke und mit
   blassem Strich, damit der erste Absatz die Antwort anführt. */
.einwand .antwort + .antwort{margin-top:10px;border-radius:14px}
.einwand .antwort + .antwort::before{background:var(--line)}
@media (max-width:780px){
  .einwand-grid{grid-template-columns:1fr;gap:28px}
}

/* Schritte */
.how{background:var(--surface)}
.how h2{text-align:center;margin-bottom:38px}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:26px;max-width:800px;margin:0 auto}
.steps li{display:flex;gap:20px;align-items:flex-start}
.steps .no{
  flex:none;width:44px;height:44px;border-radius:50%;background:var(--navy);color:var(--gold-2);
  display:flex;align-items:center;justify-content:center;font-family:"IBM Plex Mono",monospace;
  font-weight:600;font-size:17px;
}
.steps li.extra .no{background:var(--gold);color:#fff}
.steps h3{margin-bottom:6px}
.steps p{font-family:"Lora",serif;color:var(--ink-2);font-size:16px;line-height:1.55}
/* Die drei Wege als hingelegte Blätter */
.blaetter{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
.blatt{
  background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:12px 16px;
  box-shadow:0 6px 14px -10px rgba(20,24,28,.5);transform:rotate(-1.2deg);
}
.blatt:nth-child(2){transform:rotate(.8deg)}
.blatt:nth-child(3){transform:rotate(-.4deg)}
.blatt.an{background:var(--navy);border-color:var(--navy)}
.blatt b{display:block;font-size:14.5px;font-family:"Montserrat",sans-serif;font-weight:700;color:var(--ink)}
.blatt.an b{color:#FBF7F0}
.blatt span{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--ink-3)}
.blatt.an span{color:rgba(251,247,240,.62)}
/* Die Minutenzahl ist die eigentliche Auskunft, die Fragenzahl nur Beiwerk.
   Deshalb steht sie größer, fett und in voller Farbe, der Rest tritt zurück.
   ".blatt span b" muss die Block-Regel von ".blatt b" überschreiben. */
.blatt span b.min{display:inline;font-size:13px;font-weight:700;color:var(--ink)}
.blatt.an span b.min{color:var(--gold-2)}

/* Stimmen: erster Block auf Marineblau, damit die Seite nicht durchgehend beige ist */
.voices.dunkel{
  background-color:var(--navy);
  background-image:
    repeating-linear-gradient(58deg, rgba(255,255,255,.04) 0px, rgba(255,255,255,.04) 2px, transparent 2px, transparent 5px),
    repeating-linear-gradient(-58deg, rgba(0,0,0,.10) 0px, rgba(0,0,0,.10) 2px, transparent 2px, transparent 6px);
}
.voices.dunkel h2{color:#FBF7F0}
.voices.dunkel .sub{color:rgba(251,247,240,.7)}
.voices.dunkel .sektion-kopf{color:var(--gold-2)}
/* Auf dem blauen Grund stehen die Karten hell, sonst versinkt alles */
.voices.dunkel .voice{
  background:var(--surface);border-color:rgba(244,232,201,.35);
  box-shadow:0 18px 30px -22px rgba(0,0,0,.6);
}
.voices.dunkel .voice .zitat{color:var(--ink)}
/* background-color statt der Kurzform background, sonst löscht diese Regel
   das Hintergrundbild der Porträts wieder weg. */
/* Die Monogramme im hellen und im dunklen Abschnitt sehen gleich aus:
   Marineblau mit Goldrand. Das helle Beige wirkte hier zu blass. */
.voices.dunkel .voice .foto{background:var(--navy);color:var(--gold-2);border-color:var(--gold)}
.voices.dunkel .voice .von b{color:var(--ink)}
.voices.dunkel .voice .von span{color:var(--ink-3)}
.voices h2{text-align:center;margin-bottom:8px}
.voices .sub{
  text-align:center;color:var(--ink-2);font-family:"Lora",serif;font-size:16px;
  margin:0 auto 34px;max-width:40em;
}
.voices-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.voice{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px 24px;display:flex;flex-direction:column;gap:16px;
}
/* Das große Anführungszeichen ersetzt das Bild als Blickfang. Es ist ein
   Gestaltungselement, keine Behauptung über eine Person. */
/* Die Anführungszeichen stehen im Text selbst, sind aber golden, fetter und
   etwas größer als der Satz. So sind sie Schmuck und Zeichensetzung zugleich.
   line-height:0 verhindert, dass die größere Schrift die Zeile auseinanderzieht. */
.voice .zitat .gz{
  color:var(--gold-2);font-weight:700;font-size:1.45em;line-height:0;
  vertical-align:-.06em;
}
.voice .zitat{font-family:"Lora",Georgia,serif;font-size:16.5px;line-height:1.55;color:var(--ink)}
.voice .von{display:flex;align-items:center;gap:12px;margin-top:auto}
/* Monogramm statt Foto: Anfangsbuchstabe in Marineblau mit Goldrand.
   Sieht gewollt aus und zeigt kein Gesicht, das es nicht gibt. */
.voice .foto{
  width:46px;height:46px;border-radius:50%;flex:none;
  background:var(--navy);color:var(--gold-2);
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:18px;letter-spacing:.02em;
  border:1px solid var(--gold);
}
.voice .von b{font-size:14.5px;display:block}
.voice .von span{font-size:12.5px;color:var(--ink-3)}
.platzhalter-hinweis{
  margin:0 auto 26px;max-width:700px;text-align:center;
  background:#FBE9C6;color:#6B4A0B;border:1px dashed var(--gold);border-radius:10px;
  padding:12px 16px;font-family:"IBM Plex Mono",monospace;font-size:12px;line-height:1.55;
}

/* CTA ohne Kasten, auf Weiß. Der harte Wechsel zum blauen Block darunter
   trennt die Männer-Stimmen oben von den Braut-Stimmen unten. */
.rahmen-sektion{
  background:var(--weiss);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.beige-frame{max-width:760px;margin:0 auto;text-align:center;display:flex;flex-direction:column;align-items:center}
.beige-frame .frage-oben{color:var(--ink)}
.beige-frame p.gross{
  font-family:"Montserrat",sans-serif;font-weight:700;font-size:clamp(19px,2.6vw,24px);
  margin:0 auto 22px;max-width:24em;line-height:1.3;text-wrap:balance;
}
.beige-frame .frage-oben + p.gross{color:var(--ink-2)}
.beige-frame .entscheid{color:#FBF7F0;background:var(--navy)}

/* Der Beweis: links Gekritzeltes, rechts das Ergebnis */
.beweis{background:var(--surface)}
.beweis .sektion-kopf{text-align:center}
.beweis h2{text-align:center;margin-bottom:44px;line-height:1.14}
/* Blau für das Wenige, Gold für das Viele. Die beiden Hausfarben stehen sich
   im Satz gegenüber, genau wie die beiden Spalten darunter. */
.blau-wort{color:var(--navy)}
/* Kleine Beschriftungen über den beiden Spalten, damit klar ist, was wo steht */
.beweis .bl-fuss{text-align:center}
.beweis-grid{
  display:grid;grid-template-columns:1fr 500px;gap:60px;align-items:start;
  max-width:1060px;margin:0 auto;
}
.fg{margin-bottom:20px}
.fg-kopf{
  font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--gold);margin-bottom:8px;
}
/* Frage in der Lesetype, seine Antwort darunter in Handschrift. Kein Kasten,
   nur eine dünne Linie, sonst wird die Seite unruhig. */
/* Bewusst kleiner als der fertige Text auf dem Blatt. Seine Stichworte sind
   die Zutat, das Ergebnis ist die Hauptsache und muss größer wirken. */
.fa{border-left:2px solid var(--line);padding-left:12px;margin-bottom:11px}
.fa-f{font-family:"Lora",Georgia,serif;font-size:12.5px;line-height:1.4;color:var(--ink-3)}
.fa-a{
  font-family:"Architects Daughter","Segoe Print",cursive;
  font-size:15.5px;line-height:1.4;color:#3B352C;margin-top:2px;
}
.bl-fuss{
  margin-top:18px;font-family:"IBM Plex Mono",monospace;font-size:11.5px;
  letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);
}

/* Rechts: ein Blatt im echten DIN-A4-Verhältnis, 210 zu 297. */
.blatt-a4{
  aspect-ratio:210 / 297;max-width:100%;
  background:#FFFDF8;border:1px solid var(--line);
  box-shadow:0 18px 34px -24px rgba(20,24,28,.6), 0 0 0 1px rgba(20,24,28,.04);
  padding:40px 42px 32px;display:flex;flex-direction:column;
}
.erg-text{flex:1}
.erg-text p{font-family:"Lora",Georgia,serif;font-size:12.5px;line-height:1.56;color:var(--ink)}
.erg-text p + p{margin-top:9px}
.erg-offen{color:var(--ink-3)}
/* Die Stellen, die wörtlich aus seinen Antworten stammen */
.aus{
  background:linear-gradient(to top, var(--gold-soft) 0 38%, transparent 38%);
  box-decoration-break:clone;-webkit-box-decoration-break:clone;
}
/* Berechnete Angaben, nicht abgeschrieben: eigene Markierung, damit der
   Unterschied zwischen "steht so da" und "hat die App ausgerechnet" sichtbar ist. */
.rech{border-bottom:1.5px dotted var(--navy)}
.erg-legende{
  margin-top:16px;padding-top:12px;border-top:1px solid var(--line-soft);
  font-family:"Lora",Georgia,serif;font-size:10.5px;line-height:1.5;color:var(--ink-3);
}

.beweis-schluss{
  text-align:center;margin:52px auto 0;max-width:24em;
  font-family:"Montserrat",sans-serif;font-weight:800;
  font-size:clamp(23px,3.4vw,33px);line-height:1.25;color:var(--navy);
}
.beweis-schluss strong{color:var(--gold)}
.beweis-nach{
  text-align:center;margin:18px auto 0;max-width:38em;
  font-family:"Lora",Georgia,serif;font-size:16.5px;line-height:1.55;color:var(--ink-2);
}
.beweis-frage{
  text-align:center;margin:20px auto 0;
  font-family:"Montserrat",sans-serif;font-weight:800;
  font-size:clamp(20px,2.8vw,27px);color:var(--ink);
}

/* Über Yvonne: weiß, damit der Abschnitt klar für sich steht */
.about{
  background:var(--surface);border-top:3px solid var(--gold-2);
}
.about h2{text-align:center;margin-bottom:8px}
.about .sub{
  text-align:center;color:var(--ink-2);font-family:"Lora",serif;font-size:16px;
  margin:0 auto 40px !important;max-width:40em;
}
/* "Das bin ich": Papierfläche, freigestelltes Foto mittig, handgeschriebene
   Notizen mit gezeichneten Pfeilen drumherum. Die Pfeil-SVGs sind alle
   identisch, nur per CSS gedreht/gespiegelt — ein Pfad, vier Richtungen. */
/* Zwei Spalten: links das Foto mit den handschriftlichen Notizen darüber,
   rechts der Text. Die Notizen stehen ÜBER dem Foto, damit die Pfeile in
   beiden Ansichten nach unten auf Yvonne zeigen und nicht ins Leere. */
/* Beide Spalten beginnen auf derselben Höhe. Vorher waren sie mittig
   zueinander zentriert — dadurch fing links etwas an, wo rechts nichts war,
   und die beiden Hälften wirkten nur nebeneinandergestellt. */
/* Mittig zueinander, dann noch ein Stück angehoben, damit das Foto auf Höhe
   des oberen Textdrittels sitzt und nicht in der geometrischen Mitte. */
.about-inner{display:grid;grid-template-columns:470px 1fr;gap:100px;align-items:center;max-width:1080px}
.about-bild{transform:translateY(-54px)}
/* Zwei Notizen oben, zwei unten, jeweils links und rechts nebeneinander.
   Dadurch zeigt jeder Pfeil von außen schräg auf Yvonne, statt dass die
   Notizen übereinander stapeln und der obere Pfeil im Nichts endet. */
.bin-ich{
  position:relative;margin:0;
  display:grid;grid-template-columns:1fr 1fr;column-gap:16px;row-gap:6px;
}
/* Grußformel am Ende des Textes. Der Satz trägt die Farbe, die Unterschrift
   die Form: echte Schreibschrift in Anthrazit, wie mit Tinte gesetzt.
   ".about-gruss" muss ".about p" überstimmen, deshalb zwei Klassen. */
.about .about-gruss{margin-top:22px;font-weight:700;color:var(--gold)}
/* Keine Schriftart, sondern Yvonnes echte Unterschrift: eingescannt,
   freigestellt und von Blau auf Anthrazit umgefärbt. */
/* "Deine" und der Namenszug stehen nebeneinander in einer Zeile, wie unter
   einem Brief. Untereinander wirkte es wie zwei getrennte Bausteine. */
.about .gruss-zeile{display:flex;align-items:center;gap:22px;margin-top:14px}
.about .gruss-zeile .deine{font-family:"Lora",Georgia,serif;font-size:16.5px;color:var(--ink-2)}
.unterschrift{width:168px;flex:none;margin:0 0 6px;transform:rotate(-2deg)}
/* Schmaler als die Spalte, damit links und rechts Luft bleibt und die Pfeile
   dicht an Yvonne heranreichen statt am Bildrand zu enden. */
/* Das Foto sieht aus wie ein Abzug, der mit zwei Klebestreifen aufs Blatt
   geklebt wurde. Dadurch stört die rechteckige Form nicht mehr, sie ist dann
   gewollt. Leicht schief, damit es nicht wie gesetzt wirkt. */
.bi-foto{
  /* Feste Breite, nicht prozentual: Die Spalte darf breiter werden, damit
     das Foto Luft bekommt, ohne selbst mitzuwachsen. */
  grid-column:1 / -1;grid-row:2;justify-self:center;width:288px;max-width:78%;
  margin:-4px 0 6px;position:relative;
  /* Das Bild bringt seinen weißen Polaroid-Rand selbst mit, deshalb hier
     kein zusätzliches Passepartout. */
  background:#FFFDF9;padding:0;
  box-shadow:0 14px 28px -18px rgba(20,24,28,.55), 0 0 0 1px rgba(20,24,28,.06);
  transform:rotate(-1.6deg);
}
.bi-foto img{width:100%;height:auto;display:block}
/* Die beiden Klebestreifen: milchig, leicht schräg, über die Ecken gelegt */
.bi-foto::before,.bi-foto::after{
  content:"";position:absolute;width:78px;height:25px;
  background:linear-gradient(105deg, rgba(232,224,208,.28), rgba(244,239,228,.72) 30%, rgba(236,229,214,.62) 70%, rgba(228,219,201,.3));
  border-left:1px solid rgba(255,255,255,.55);border-right:1px solid rgba(255,255,255,.55);
  box-shadow:0 1px 2px rgba(20,24,28,.12);
}
.bi-foto::before{top:-12px;left:-22px;transform:rotate(-42deg)}
.bi-foto::after{bottom:-12px;right:-22px;transform:rotate(-42deg)}
.bin-ich .notiz{position:relative;z-index:3;width:100%;display:flex;flex-direction:column}
.bin-ich .notiz p{
  margin:0;font-family:"Architects Daughter","Segoe Print",cursive;
  font-size:19px;line-height:1.38;color:#3B352C;
}
/* Die Begrüßung ist die lauteste Notiz, die drei Angaben darunter sind
   leiser. Vier gleich große Blöcke um ein Foto herum lesen sich als Unruhe. */
.bin-ich .n1 p{font-size:25px}
.bin-ich .notiz .pfeil{
  display:block;width:132px;height:auto;margin-top:2px;
  fill:none;stroke:#59503F;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round;
}
/* Die Pfeile sitzen an der Kante, die zum Foto zeigt, damit die Spitze dicht
   an Kopf und Körper heranreicht statt in der Luft zu enden. Links zeigt der
   Pfeil nach rechts unten, rechts ist er gespiegelt. */
/* Links oben, Pfeil zeigt nach rechts unten aufs Foto */
.bin-ich .n1{grid-column:1;grid-row:1;justify-self:start;align-self:end;transform:rotate(-3deg)}
.bin-ich .n1 .pfeil{margin:2px 0 0 auto;transform:rotate(16deg)}
/* Rechts darunter, gespiegelt, Pfeil zeigt nach links unten aufs Foto */
.bin-ich .n2{grid-column:2;grid-row:1;justify-self:end;align-self:end;text-align:right;transform:rotate(2.5deg)}
.bin-ich .n2 .pfeil{margin:2px auto 0 0;transform:scaleX(-1) rotate(16deg)}
/* Unter dem Foto: Pfeil steht über dem Text und zeigt nach oben.
   Dafür wird die Notiz umgekehrt gestapelt und derselbe Pfad gespiegelt. */
.bin-ich .n3{
  grid-column:1;grid-row:3;justify-self:start;transform:rotate(-2deg);
  flex-direction:column-reverse;margin-top:-14px;
}
.bin-ich .n3 .pfeil{margin:0 0 2px auto;transform:scaleY(-1) rotate(-16deg)}
.bin-ich .n4{
  grid-column:2;grid-row:3;justify-self:end;text-align:right;transform:rotate(2deg);
  flex-direction:column-reverse;margin-top:-14px;
}
.bin-ich .n4 .pfeil{margin:0 auto 2px 0;transform:scale(-1,-1) rotate(-16deg)}

.about-inner{margin:0 auto}
/* Bildunterschrift, keine Überschrift: kleiner Grad, dafür Großbuchstaben
   und Sperrung. Der goldene Strich darüber macht sie auffällig, ohne dass
   sie mit den echten Überschriften der Seite konkurriert. */
/* Berufsbezeichnung direkt unter dem Namen in der Abschnittsüberschrift */
/* Ohne diese Regel gewinnt ".about p" und die Zeile läuft in Lora statt in
   der Mono-Schrift, die alle anderen Abschnittslabels benutzen. */
.about .sektion-kopf{
  text-align:center;font-family:"IBM Plex Mono",monospace;
  font-size:12px;color:var(--gold);
}
/* Gleicher Aufbau wie in den anderen Abschnitten: kleine Mono-Zeile,
   Überschrift, darunter eine Zeile in der Lesetype. Vorher standen zwei
   Mono-Zeilen um die Überschrift herum, dadurch wirkte der Kopf gestaucht. */
.about .titelzeile{
  text-align:center;font-family:"Lora",Georgia,serif;font-size:17px;
  line-height:1.5;color:var(--ink);margin:14px auto 42px;max-width:32em;
}
/* Begrüßung an den Bräutigam: die Anrede des Briefs, etwas größer und
   dunkler als der Fließtext darunter. */
/* Dieselbe Schrift wie der Text darunter, nur größer und in Gold. Eine
   dritte Handschrift auf der Seite wäre eine zu viel. */
.about .hallo{
  font-size:24px;line-height:1.2;color:var(--ink);
  font-weight:600;margin-bottom:10px;
}
/* Gleicher Grad und gleiche Farbe wie der Fließtext darunter. Die Begrüßung
   ist schon durch das handschriftliche "Hallo!" abgesetzt, ein zweiter
   Unterschied macht daraus optisch zwei verschiedene Texte. */
.about .anrede{margin-bottom:14px}
/* Ein herausgestellter Satz mitten in der Spalte. Ohne ihn ist die rechte
   Seite eine gleichmäßige graue Fläche, an der das Auge nirgends hängenbleibt. */
.about .merksatz{
  font-family:"Lora",Georgia,serif;font-size:25px;line-height:1.35;
  color:var(--ink);margin:22px 0 22px;padding-left:20px;
  border-left:3px solid var(--gold-2);
}
.about .bild-name .name{
  font-family:"Montserrat",sans-serif;font-weight:700;font-size:17px;
  letter-spacing:.15em;text-transform:uppercase;color:var(--ink);
}
.about .bild-name .rolle{
  font-family:"IBM Plex Mono",monospace;font-size:12px;font-weight:500;
  letter-spacing:.05em;color:var(--gold);margin-top:8px;margin-bottom:0;
}
.about .name{font-family:"Montserrat",sans-serif;font-weight:800;font-size:26px;color:var(--ink)}
.about .rolle{font-size:14px;color:var(--gold);font-weight:600;margin-top:5px;margin-bottom:0}
.about p{font-family:"Lora",serif;font-size:16.5px;line-height:1.62;color:var(--ink-2);margin-bottom:12px}
.about-schluss{
  border-left:3px solid var(--gold);padding-left:16px;font-style:italic;color:var(--ink) !important;
  margin-bottom:0 !important;
}
.lede-gross{font-size:clamp(17px,2.3vw,21px) !important}

/* Warteliste: Frühbucher-Vorteil, Preis mit Anker, Wertliste */
.fruehbucher{
  position:relative;max-width:660px;margin:44px auto 0;background:var(--navy);color:#FBF7F0;
  border-radius:var(--radius);padding:36px 40px 36px 130px;border:2px solid var(--gold-2);
  text-align:left;
}
.fb-kopf{
  font-family:"IBM Plex Mono",monospace;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gold-2);margin-bottom:10px;
}
.fb-gross{font-family:"Montserrat",sans-serif;font-weight:700;font-size:clamp(22px,3.4vw,31px);line-height:1.2}
.fb-gross b{color:var(--gold-2);font-weight:800}
.fb-klein{margin-top:12px;font-family:"Lora",serif;font-size:15.5px;color:rgba(251,247,240,.78);line-height:1.5}

/* Stilisierter Fünf-Euro-Schein, bewusst kein Abbild eines echten Scheins.
   Hängt links aus dem Kasten heraus und liegt leicht schräg. */
.schein{
  position:absolute;left:-64px;top:50%;width:168px;height:94px;border-radius:5px;
  transform:translateY(-50%) rotate(-7deg);
  background-color:#E7EDF5;
  background-image:
    repeating-linear-gradient(58deg, rgba(120,150,190,.11) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(-58deg, rgba(120,150,190,.09) 0 1px, transparent 1px 7px),
    linear-gradient(125deg, #F4F7FB 0%, #DFE7F1 36%, #C4D1E2 66%, #EDF1F7 100%);
  border:1px solid rgba(20,24,28,.18);
  box-shadow:0 20px 26px -14px rgba(20,24,28,.65), inset 0 1px 0 rgba(255,255,255,.9);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  overflow:hidden;
}
/* Torbogen wie auf europäischen Scheinen, nur angedeutet */
.schein::before{
  content:"";position:absolute;right:13px;top:20px;width:34px;height:54px;
  border:2px solid rgba(80,116,164,.34);border-radius:17px 17px 2px 2px;
}
.schein::after{
  content:"5";position:absolute;left:28px;bottom:5px;
  font-family:"Montserrat",sans-serif;font-weight:800;font-size:15px;color:rgba(44,74,120,.55);
}
.sch-zahl{
  font-family:"Montserrat",sans-serif;font-weight:800;font-size:50px;line-height:.9;
  color:#2C4A78;letter-spacing:-.04em;margin-left:-16px;
}
.sch-eur{
  font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.26em;color:#43608C;
  margin-left:-16px;
}
.sch-band{
  position:absolute;left:0;top:0;bottom:0;width:21px;
  background:linear-gradient(180deg, rgba(172,190,214,.95), rgba(132,156,188,.9));
  border-right:1px solid rgba(255,255,255,.6);
}

.preis-block{max-width:620px;margin:0 auto}
.preis-anker{
  font-family:"Lora",Georgia,serif;font-size:16.5px;line-height:1.6;color:var(--ink-2);
}
.preis-anker strong{color:var(--ink)}
.preis-zahl{
  font-family:"Montserrat",sans-serif;font-weight:800;font-size:clamp(40px,7vw,62px);
  color:var(--navy);letter-spacing:-.03em;line-height:1;margin-top:16px;
}
.preis-abo{
  display:inline-block;margin-top:14px;
  font-family:"Montserrat",sans-serif;font-weight:800;font-size:clamp(17px,2.4vw,21px);
  letter-spacing:.02em;color:var(--navy);
  border-bottom:3px solid var(--gold-2);padding-bottom:3px;
}

.wert-liste{
  list-style:none;margin:30px auto 0;padding:0;max-width:520px;text-align:left;
  display:flex;flex-direction:column;gap:9px;
}
.wert-liste li{
  display:flex;gap:12px;align-items:flex-start;font-size:15.5px;color:var(--ink);line-height:1.45;
}
.wert-liste li .hk{
  flex:none;width:21px;height:21px;border-radius:50%;background:var(--navy);color:var(--gold-2);
  display:flex;align-items:center;justify-content:center;font-size:11px;margin-top:1px;
}
/* Der Text muss ein einziges Element sein, sonst reißt der Flex-Abstand
   Lücken zwischen fette und normale Wörter. */
.wert-liste li .tx{flex:1}

.feld-hinweis{margin-top:8px;font-size:13px;color:var(--ink-3);line-height:1.45}
.feld-hinweis strong{color:var(--ink-2)}

/* Argumente links, Formular rechts: wer auf „Kostenlos vormerken" klickt,
   sieht das Eintragefeld sofort und muss nicht erst suchen. */
.wl-grid{
  display:grid;grid-template-columns:1fr 420px;gap:48px;align-items:start;
  max-width:1020px;margin:44px auto 0;text-align:left;
}
.wl-argumente{text-align:center}
.wl-formular{
  background:var(--surface);border:2px solid var(--navy);border-radius:var(--radius);
  padding:30px 30px 26px;box-shadow:var(--shadow);
}
.form-kopf{
  font-family:"Montserrat",sans-serif;font-weight:800;font-size:21px;color:var(--navy);
  margin-bottom:10px;
}
.wl-formular .fineprint{text-align:left}
@media (max-width:900px){
  .wl-grid{grid-template-columns:1fr;gap:34px}
  /* Der Geldschein hängt am Telefon oben mittig in den Kasten hinein.
     Ohne zusätzlichen Kopfabstand liegt er auf der Überschrift. */
  .fruehbucher{padding:78px 24px 26px 24px;text-align:center;margin-top:78px}
  .schein{left:50%;top:-34px;transform:translateX(-50%) rotate(-7deg)}
}

/* FAQ, abgesetzt vom schraffierten Beige */
.faq{background:var(--surface);border-top:1px solid var(--line)}
.faq-inner{max-width:760px;margin:0 auto}
.faq h2{text-align:center;margin-bottom:26px}
.faq-item{border-bottom:1px solid var(--line);padding:8px 0}
/* Die Zeile selbst ist der Schalter, deshalb liegt der Abstand hier drin
   und nicht am Kasten. Sonst ist die Tippfläche am Telefon zu klein. */
.faq-item summary{
  cursor:pointer;font-weight:700;font-size:16.5px;list-style:none;display:flex;
  justify-content:space-between;align-items:center;gap:12px;padding:14px 0;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";font-size:24px;color:var(--gold);flex:none;line-height:1}
.faq-item[open] summary::after{content:"–"}
.faq-item p{font-family:"Lora",serif;color:var(--ink-2);font-size:16px;line-height:1.6;margin-top:12px}

/* Band-Variante mit Goldlinie oben, für den Geschenk-Abschnitt */
.band.geschenk{border-top:3px solid var(--gold-2)}
.band .gross-label{
  color:var(--gold-2);font-size:clamp(24px,3.4vw,34px);margin-bottom:18px;
}
.band .gelb{color:var(--gold-2)}

/* Warteliste */
.waitlist-inner{text-align:center;max-width:1020px;margin:0 auto}
.waitlist-inner > .eyebrow,
.waitlist-inner > h2,
.waitlist-inner > .lede{max-width:620px;margin-left:auto;margin-right:auto}
.waitlist h2{color:var(--ink)}
.waitlist .lede{margin:14px auto 0}
.countdown{
  display:flex;justify-content:center;gap:18px;margin:32px 0;
  background:var(--navy);border-radius:var(--radius);padding:24px 20px;
}
.countdown .unit{text-align:center}
.countdown .n{
  font-family:"IBM Plex Mono",monospace;font-size:clamp(28px,5vw,40px);font-weight:600;
  color:var(--gold-2);line-height:1;font-variant-numeric:tabular-nums;
}
.countdown .l{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:rgba(251,247,240,.65);margin-top:6px}

/* Das Formular sitzt im Kasten .wl-formular, braucht also selbst keinen Rahmen */
.wl-form{
  background:transparent;color:var(--ink);padding:0;
  text-align:left;display:flex;flex-direction:column;gap:16px;
}
.field label{display:block;font-size:14px;font-weight:700;margin-bottom:6px}
.field input[type="text"],
.field input[type="email"]{
  width:100%;padding:13px 14px;border-radius:9px;border:1.5px solid var(--line);
  background:var(--bg);color:var(--ink);font-family:"Montserrat",sans-serif;font-size:15px;
}
.field input:focus{outline:2px solid var(--gold);outline-offset:1px}
.radio-group{display:flex;flex-direction:column;gap:8px}
.radio-row{display:flex;align-items:center;gap:9px;font-size:15px}
.radio-row input{accent-color:var(--navy)}
.consent{display:flex;gap:9px;align-items:flex-start;font-size:13px;color:var(--ink-2);text-align:left}
.consent a{color:var(--ink)}
.consent input{margin-top:3px;accent-color:var(--navy)}
.form-msg{font-size:14px;padding:10px 12px;border-radius:8px;display:none}
.form-msg.show{display:block}
.form-msg.ok{background:#DCEBE2;color:#1E5B3F}
.form-msg.err{background:#F6E2E2;color:#8A2E2E}
.form-msg.info{background:var(--gold-soft);color:var(--ink-2)}
.fineprint{font-size:12.5px;color:var(--ink-3);margin-top:16px;max-width:44em;margin-left:auto;margin-right:auto}

/* Footer */
.site-footer{padding:36px 0;border-top:1px solid var(--line)}
.footer-inner{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;
  font-size:13.5px;color:var(--ink-3)}
.footer-inner nav{display:flex;gap:18px}
.footer-inner a{color:var(--ink-3);text-decoration:none}
.footer-inner a:hover{color:var(--ink)}
.ki-hinweis{margin-top:14px;font-size:12px;color:var(--ink-3)}

/* Rechtsseiten */
.legal{padding:64px 0 80px}
.legal .wrap{max-width:720px}
.legal h1{margin-bottom:8px}
.legal .stand{color:var(--ink-3);font-size:13.5px;margin-bottom:32px;display:block}
.legal h2{font-size:19px;margin-top:34px;margin-bottom:10px}
.legal p, .legal li{font-family:"Lora",serif;color:var(--ink-2);font-size:15.5px;line-height:1.65}
.legal ul{padding-left:20px}
.legal a{color:var(--navy)}
.back-link{display:inline-block;margin-bottom:26px;font-size:14px;color:var(--ink-2);text-decoration:none}

/* Responsive */
@media (max-width:900px){
  .hero-inner{grid-template-columns:1fr}
  /* Am Telefon steht die Schlagzeile oben, nicht das Foto.
     Sonst sieht man beim Öffnen nur ein Bild und keinen Satz. */
  .hero-visual{justify-self:center;order:0;max-width:300px;margin-top:8px}
  .hero-visual img{max-height:340px}
  .grid-3,.ways-grid,.voices-grid,.appfeat-grid,.shots{grid-template-columns:1fr}
  .shots{gap:44px}
  .phone{max-width:320px;margin:0 auto}
  .shots .shot:nth-child(2){margin-bottom:0}
  .shots .shot:nth-child(2) .phone{max-width:320px}
  .shots .shot:first-child .phone,
  .shots .shot:last-child .phone{transform:none}
  /* Am Telefon dürfen die Blätter und das Heft nicht über den linken Rand
     hinausragen, sonst werden sie abgeschnitten. Alles enger zusammen. */
  .produkt-mockup{width:min(226px,100%);left:42px;margin:44px auto 58px}
  .produkt-mockup .tisch-heft{
    left:-4%;bottom:-26px;width:84px;padding:12px 9px;gap:5px;
  }
  .produkt-mockup .tisch-heft .k{font-size:5px}
  .produkt-mockup .tisch-heft .t{font-size:8px}
  .pm-blaetter{left:-72px;top:-28px;transform:scale(.46);transform-origin:left top}
  .pm-phone{width:68px;right:-26px;bottom:-22px}
  .pm-zettel{width:88px;left:4%;bottom:-8px;padding:6px 7px}
  .pm-zettel .z-t{font-size:5px}
  .pm-zettel .z-f{font-size:4px}
  /* Auf dem Handy reicht die Fläche nicht für Notizen neben dem Foto.
     Also: Pfeile weg, alles untereinander, Reihenfolge Kopf → Foto → Notizen. */
  /* Am Telefon dieselbe Anordnung, nur einspaltig und etwas schmaler.
     Die Notizen stehen ohnehin schon über dem Foto, die Pfeile zeigen also
     auch hier nach unten auf Yvonne. */
  /* Am Telefon sitzt die Titelzeile zu weit über den Notizen und der Text
     zu dicht darunter. Gemessen waren es 116 Pixel oben und 31 unten. */
  .beweis-grid{grid-template-columns:1fr;gap:34px}
  .beweis-rechts{padding:24px 20px 22px}
  .about .titelzeile{margin-bottom:16px}
  .about-inner{grid-template-columns:1fr;gap:82px}
  .about-bild{max-width:400px;margin:0 auto;transform:none}
  /* Unter der Unterschrift stand zu viel leere Fläche vor dem Farbwechsel */
  .about{padding-bottom:30px}
  /* Schmal wird es eng: Die erste Notiz bleibt kurz, die zweite rückt nach
     unten statt hoch, sonst läuft der erste Pfeil in ihren Text. */
  .bin-ich .notiz p{font-size:19px}
  .bin-ich .notiz .pfeil{width:92px}
  .bin-ich .n1{max-width:60%}
  .bin-ich .n2{max-width:80%;margin-top:24px}
  .about-schluss{text-align:left}
  .bonus-grid{grid-template-columns:1fr}
  .topbar .titel .lang{display:none}
  .card.mit-siegel{padding-bottom:30px}
  /* Am Telefon steht das Siegel im Textfluss unter den Karten und hängt nicht
     mehr heraus. Der große Fußabstand von der Rechner-Ansicht wäre hier nur
     eine leere beige Fläche. */
  .problem{padding-bottom:56px}
  .siegel{position:static;margin:20px auto 0;transform:rotate(-6deg)}
  /* Am Telefon steht der Knopf mittig. Das Siegel hängt 44px links davon,
     deshalb bekommt der Block genau diese 44px als linken Rand: dann ist
     nicht der Knopf allein mittig, sondern Siegel und Knopf zusammen. */
  .hero-cta{justify-content:center}
  .cta-block{margin-left:44px}
  .cta-block .btn-primary{padding-left:58px}
  .cta-block .siegel.hero-siegel{position:absolute;left:-44px;top:-30px;margin:0;width:86px;height:86px;transform:rotate(-12deg)}
  .legende-reihe{flex-direction:column;align-items:flex-start;text-align:left}
  .legende{text-align:left}
  .legende-kopf{text-align:center}
}
@media (max-width:520px){
  /* Die lange E-Mail-Adresse hat die Fußzeile über den rechten Rand
     geschoben, dadurch ließ sich die ganze Seite seitlich wegschieben. */
  .site-footer nav{flex-wrap:wrap;justify-content:center}
  .site-footer nav a{overflow-wrap:anywhere}
  .wrap,.wrap-narrow{padding:0 18px}
  section{padding:52px 0}
  .hero{padding:40px 0 24px}
  .wl-form{padding:22px}
  .countdown{gap:10px;padding:18px 12px}
}

/* Hinweis unter dem Countdown: der 1. Dezember ist der späteste Termin,
   ein früherer Start ist möglich. Steht bewusst direkt am Zähler, weil
   dort die Erwartung entsteht. */
.cd-hinweis{
  margin:14px 0 0;font-size:13.5px;line-height:1.55;
  color:var(--ink-2);max-width:34em;
}

/* Markiert wie mit einem Textmarker: ein goldener Streifen liegt über dem
   unteren Drittel der Zeile. Damit erfasst man die Aussage einer Stimme,
   ohne sie ganz zu lesen. Bewusst kein Fettdruck, sonst wirkt das Zitat
   geschrien statt betont. */
.hl-stift{
  background-image:linear-gradient(to top, rgba(201,160,60,.46) 0 38%, transparent 38%);
  padding:0 .1em;
  border-radius:2px;
}
.voices.dunkel .hl-stift{
  background-image:linear-gradient(to top, rgba(201,160,60,.55) 0 38%, transparent 38%);
}

/* Fettungen im Text über Yvonne kräftiger machen. Vorher gingen sie in der
   Serifenschrift unter, deshalb zusätzlich die dunklere Textfarbe. */
.about-text strong{font-weight:700;color:var(--ink)}
.about-text .hl-stift{font-weight:700}

/* „Je echter, desto mehr Tränen" ist der Merksatz der ganzen Seite.
   Der Marineblau-Strich darunter ist leicht schräg und unterschiedlich dick,
   damit er nach Hand aussieht und nicht nach Unterstreichung. */
.strich-blau{
  position:relative;white-space:nowrap;
}
.strich-blau::after{
  content:"";position:absolute;left:-3px;right:-6px;bottom:-.17em;height:.40em;
  background:var(--navy);
  clip-path:polygon(0 42%, 12% 26%, 34% 48%, 58% 22%, 82% 44%, 100% 24%, 100% 72%, 76% 96%, 52% 70%, 28% 94%, 8% 72%, 0 88%);
  opacity:.9;
}


/* Weitergeben-Band in der Seitenmitte.
   Heller Papierton mit Goldlinien oben und unten. Bewusst NICHT das dunkle
   Beige: das stand direkt neben dem schraffierten Beige darueber und die
   beiden Toene haben sich gebissen. Und bewusst nicht Marineblau, weil die
   blauen Baender die Kauf-Aufforderungen sind. */
.teilen-band{
  background:var(--surface);
  border-top:2px solid var(--gold-2);border-bottom:2px solid var(--gold-2);
  text-align:center;padding:46px 0;
}
.teilen-band .frage-oben{
  font-family:"IBM Plex Mono",monospace;font-size:11.5px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin:0 0 12px;
}
.teilen-band .gross{
  font-family:"Montserrat",sans-serif;font-weight:800;
  font-size:clamp(19px,2.6vw,26px);line-height:1.28;color:var(--ink);
  max-width:22em;margin:0 auto 10px;text-wrap:balance;
}
.teilen-band .entscheid{
  font-family:"Lora",Georgia,serif;font-size:16.5px;color:var(--ink-2);
  max-width:26em;margin:0 auto 22px;text-wrap:balance;
}
/* Knopf mit WhatsApp-Zeichen */
.teilen-band .btn-wa{
  background:var(--navy);color:var(--gold-soft);border:none;
  display:inline-flex;align-items:center;gap:10px;
}
.teilen-band .btn-wa:hover{background:var(--navy-2)}
.btn-wa .wa-icon{width:19px;height:19px;flex:none;display:block}
.btn-wa .wa-icon path{fill:currentColor}
.teilen-band .cta-sub{margin-top:14px;color:var(--ink-3)}
.teilen-band .cta-sub strong{color:var(--ink-2)}


/* Die ersten Stimmen bekommen dieselbe Kopfzeile wie „Kennst du das?":
   große zentrierte Überschrift, darunter eine Zeile in der Serifenschrift.
   Die Variante mit Goldlinien links und rechts ist wieder raus, die kam
   sonst nirgends auf der Seite vor. */
.erststimmen h2{text-align:center;margin-bottom:8px}
.erststimmen .intro{
  text-align:center;color:var(--ink-2);font-family:"Lora",Georgia,serif;
  font-size:17px;margin:0 auto 34px;max-width:40em;
}

/* Abschluss der Seite: die Bitte ums Weitergeben.
   Marineblau mit derselben Stoffstruktur wie die Kauf-Baender, damit der
   Seitenfuss nicht in drei Beigetoenen hintereinander ausläuft. Schrift in
   Weiss und Gold. Der Knopf bleibt hell mit gruenem WhatsApp-Zeichen, der
   Kontrast macht ihn auf dem dunklen Grund zum Blickfang. */
.teilen-schluss{
  background-color:var(--navy);
  background-image:
    repeating-linear-gradient(58deg, rgba(255,255,255,.045) 0px, rgba(255,255,255,.045) 2px, transparent 2px, transparent 5px),
    repeating-linear-gradient(-58deg, rgba(0,0,0,.10) 0px, rgba(0,0,0,.10) 2px, transparent 2px, transparent 6px);
  border-top:3px solid var(--gold-2);
  color:#FBF7F0;text-align:center;padding:58px 0 62px;
}
.teilen-schluss .eyebrow{
  font-family:"IBM Plex Mono",monospace;font-size:11.5px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--gold-2);margin:0 0 16px;
}
.teilen-schluss h2{margin:0 0 12px;color:#fff;text-wrap:balance}
.teilen-schluss .tsch-satz{
  font-family:"Montserrat",sans-serif;font-weight:700;
  font-size:clamp(18px,2.3vw,22px);line-height:1.32;color:var(--gold-soft);
  max-width:24em;margin:0 auto 14px;text-wrap:balance;
}
.teilen-schluss .tsch-klein{
  font-family:"Lora",Georgia,serif;font-size:16.5px;color:rgba(251,247,240,.8);
  max-width:26em;margin:0 auto 28px;text-wrap:balance;
}
.teilen-schluss .tsch-klein strong{color:#fff}
/* Knopf wie bei „Auch als Geschenk": heller Grund, dunkler Text,
   gruenes WhatsApp-Zeichen. */
.teilen-schluss .btn-wa{
  background:#FBF7F0;color:var(--navy);border:none;
  display:inline-flex;align-items:center;gap:10px;
}
.teilen-schluss .btn-wa:hover{background:#fff;transform:translateY(-1px)}
.teilen-schluss .wa-zeichen{width:20px;height:20px;flex:none;display:block}

/* Fußzeile: vorher lief sie als vierter Beigeton ohne Kante aus. Jetzt ein
   eigener heller Streifen mit Goldlinie, klarer Aufteilung und dem
   Buchtitel als Anker links. */
.site-footer{
  padding:30px 0 34px;background:var(--surface);
  border-top:3px solid var(--gold-2);
}
.footer-inner{
  display:flex;flex-wrap:wrap;gap:16px 26px;align-items:center;
  justify-content:space-between;font-size:13.5px;color:var(--ink-3);
}
.footer-inner > p{
  margin:0;font-family:"Montserrat",sans-serif;font-weight:700;
  font-size:13.5px;color:var(--ink-2);
}
.footer-inner nav{display:flex;flex-wrap:wrap;gap:22px}
.footer-inner a{
  color:var(--ink-2);text-decoration:none;
  border-bottom:1px solid transparent;padding-bottom:2px;
}
.footer-inner a:hover{color:var(--ink);border-bottom-color:var(--gold-2)}
.ki-hinweis{
  margin:18px 0 0;padding-top:14px;border-top:1px solid var(--line);
  font-size:12px;color:var(--ink-3);
}

/* Nachjustiert: Überschrift eine Spur kleiner als die großen Abschnitts-
   überschriften, der Block ruhiger gesetzt. Dazu ein zweiter Knopf zum
   Kopieren, weil WhatsApp am Rechner oft nicht installiert ist. */
.teilen-schluss h2{
  font-size:clamp(21px,2.5vw,27px);line-height:1.22;
  margin:0 0 10px;color:#fff;text-wrap:balance;
}
.teilen-schluss .tsch-satz{
  font-family:"Lora",Georgia,serif;font-weight:400;font-style:italic;
  font-size:clamp(16px,1.9vw,19px);line-height:1.45;color:var(--gold-soft);
  max-width:26em;margin:0 auto 10px;
}
.teilen-schluss .tsch-klein{
  font-family:"Montserrat",sans-serif;font-size:14.5px;line-height:1.55;
  color:rgba(251,247,240,.72);max-width:28em;margin:0 auto 24px;
}
.teilen-schluss .tsch-klein strong{color:var(--gold-2);font-weight:700}
.teilen-knoepfe{
  display:flex;gap:12px;justify-content:center;align-items:center;flex-wrap:wrap;
}
.teilen-schluss .btn-kopie{
  background:transparent;color:var(--gold-soft);
  border:1px solid rgba(244,232,201,.42);cursor:pointer;font:inherit;
}
.teilen-schluss .btn-kopie:hover{border-color:var(--gold-2);color:#fff}
.teilen-schluss .tsch-hinweis{
  margin:16px 0 0;font-size:12.5px;color:rgba(251,247,240,.55);
}
.teilen-schluss .tsch-hinweis.geklappt{color:var(--gold-2);font-weight:600}