/* Gestaltung für alle Seiten des Funnels (Stand 09.08.2026)

   Diese Datei ist am 09.08.2026 aus der Entwurfsfassung hervorgegangen,
   nachdem Natalie sich für die neue Gestaltung entschieden hat. Die
   vorherige Fassung liegt in _sicherung-live/gestaltung-alt-2026-08-09.css.
   Wartelisten-Seite und Verkaufsseite laden diese Datei.

   Der Unterschied zur bisherigen Gestaltung in einem Satz: weg von weißen
   Kästen mit dünnen Rahmen, hin zu großen Flächen, viel Luft und echten
   Schriften.

   Aufbau dieser Datei:
     1. Schriften
     2. Farben und Grundlagen
     3. Bausteine, die überall gebraucht werden
     4. Die Abschnitte der Seite, in der Reihenfolge der Seite
     5. Bewegung und Rücksicht auf kleine Bildschirme

   Zwei Regeln, die durchgehend gelten:
   - Volle Breite entsteht über eigenständige Abschnitte, nicht über 100vw.
     Sonst schiebt die Scrollleiste die Seite seitlich hinaus.
   - Jede Ziffer, die ein Mensch abliest, steht in Lato. Sorts Mill Goudy
     setzt Mediävalziffern, die in einer Uhr und bei einem Preis tanzen.   */


/* ============================================================
   1. SCHRIFTEN
   Lokal im Projekt, es geht keine Anfrage an Google hinaus.
   Lizenz und Herkunft: schriften/HERKUNFT.md
   ============================================================ */

@font-face{
  font-family:'Lato';font-style:normal;font-weight:400;font-display:swap;
  src:url('/schriften/lato-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Lato';font-style:normal;font-weight:400;font-display:swap;
  src:url('/schriften/lato-400-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Lato';font-style:normal;font-weight:700;font-display:swap;
  src:url('/schriften/lato-700-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Lato';font-style:normal;font-weight:700;font-display:swap;
  src:url('/schriften/lato-700-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Lato';font-style:normal;font-weight:900;font-display:swap;
  src:url('/schriften/lato-900-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Lato';font-style:normal;font-weight:900;font-display:swap;
  src:url('/schriften/lato-900-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Sorts Mill Goudy';font-style:normal;font-weight:400;font-display:swap;
  src:url('/schriften/goudy-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Sorts Mill Goudy';font-style:normal;font-weight:400;font-display:swap;
  src:url('/schriften/goudy-400-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Sorts Mill Goudy';font-style:italic;font-weight:400;font-display:swap;
  src:url('/schriften/goudy-400-italic-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Sorts Mill Goudy';font-style:italic;font-weight:400;font-display:swap;
  src:url('/schriften/goudy-400-italic-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}


/* ============================================================
   2. FARBEN UND GRUNDLAGEN
   ============================================================ */

:root{
  /* Die Palette des Salons, unverändert */
  --creme:#faf5ef;
  --bordeaux:#6e1f2e;
  --bordeaux-hell:#8a2434;
  --bordeaux-tief:#4a1420;
  --gold:#b8944f;

  /* Neue Flächentöne. Sie sollen erst beim Hinsehen auffallen. */
  --cremeweiss:#fffdfa;
  --creme-tief:#f4ebe0;
  --rose:#fbeff0;
  --champagner:#f9f2e4;

  /* Schrift. Warmes Braun statt hartem Schwarz. */
  --tinte:#33272a;
  --tinte-leise:#6f5f5a;
  --tinte-auf-dunkel:rgba(255,255,255,.86);

  --linie:#e8dcd0;
  --gold-zart:#e6d5b2;
  --gruen:#2f7a56;

  --serif:'Sorts Mill Goudy',Georgia,'Times New Roman',serif;
  --sans:'Lato',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;

  /* Schatten statt Rahmen. Warm getönt, damit nichts grau wirkt. */
  --schatten-klein:0 2px 10px rgba(74,20,32,.05);
  --schatten:0 18px 44px rgba(74,20,32,.09);
  --schatten-gross:0 30px 70px rgba(74,20,32,.14);

  --rund:26px;
  --rund-klein:16px;
}

*{box-sizing:border-box;margin:0;padding:0}
img{max-width:100%;height:auto;display:block}
html{scroll-behavior:smooth}

body{
  font-family:var(--sans);
  background:var(--creme);
  color:var(--tinte);
  font-size:18px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* Jeder Abschnitt geht über die volle Fensterbreite, der Inhalt darin sitzt
   in einer ruhigen Spalte. Deshalb braucht es kein 100vw und keine negativen
   Ränder, und die Scrollleiste kann nichts verschieben. */
.inhalt{max-width:1160px;margin:0 auto;padding:0 24px}
.inhalt.schmal{max-width:900px}
.inhalt.eng{max-width:760px}

section{padding:clamp(60px,8vw,110px) 0}

/* Die Flächen, die der Seite ihre Kapitel geben */
.flaeche-creme{background:var(--creme-tief)}
.flaeche-weiss{background:var(--cremeweiss)}
.flaeche-dunkel{background:var(--bordeaux);color:var(--tinte-auf-dunkel)}
.flaeche-dunkel h2,.flaeche-dunkel h3,.flaeche-dunkel .gross{color:#fff}


/* ============================================================
   3. BAUSTEINE
   ============================================================ */

h1,h2,h3,.gross{
  font-family:var(--serif);
  font-weight:400;
  color:var(--bordeaux);
  letter-spacing:-.01em;
}
h1{font-size:clamp(36px,4.5vw,58px);line-height:1.08;letter-spacing:-.02em}
h2{font-size:clamp(29px,3.8vw,46px);line-height:1.12;margin-bottom:18px;text-wrap:balance}
h3{font-size:clamp(22px,2.5vw,29px);line-height:1.22;margin-bottom:12px}
.gross{font-size:clamp(26px,3.4vw,40px);line-height:1.2}

/* Die kleine Zeile über einer Überschrift */
.oberzeile{
  font-family:var(--sans);font-size:11.5px;font-weight:700;
  letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold);margin-bottom:16px;
}
.oberzeile.dunkel{color:var(--bordeaux-hell)}

.mitte{text-align:center}
.lead{
  font-size:clamp(18px,2vw,21px);color:var(--tinte-leise);
  max-width:660px;line-height:1.65;
}
.mitte .lead{margin-left:auto;margin-right:auto}

/* Zahlen stehen immer in Lato und auf gleicher Höhe */
.zahl{
  font-family:var(--sans);font-weight:900;
  font-variant-numeric:lining-nums tabular-nums;
  font-feature-settings:'lnum' 1,'tnum' 1;
}

.knopf{
  display:inline-block;font-family:var(--sans);
  background:var(--bordeaux);color:#fff;text-decoration:none;
  font-size:17px;font-weight:700;line-height:1.2;letter-spacing:.005em;
  padding:20px 40px;border:none;border-radius:999px;cursor:pointer;
  box-shadow:0 10px 26px rgba(74,20,32,.24);
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
  min-height:58px;text-align:center;
}
.knopf:hover{background:var(--bordeaux-tief);box-shadow:0 14px 34px rgba(74,20,32,.32);transform:translateY(-2px)}
.knopf:active{transform:translateY(0)}
.knopf.breit{width:100%}
.knopf.hell{background:#fff;color:var(--bordeaux);box-shadow:0 10px 26px rgba(0,0,0,.18)}
.knopf.hell:hover{background:var(--champagner);color:var(--bordeaux-tief)}
.knopf-unter{font-size:14px;color:var(--tinte-leise);line-height:1.5;margin-top:14px;max-width:30em}

/* Eine feine Goldlinie als Trenner, sparsam eingesetzt */
.goldstrich{width:64px;height:2px;background:var(--gold);border:none;margin:0 0 26px}
.mitte .goldstrich{margin-left:auto;margin-right:auto}


/* ============================================================
   4. DIE ABSCHNITTE
   ============================================================ */

/* ---------- Kopfzeile ---------- */
.kopf{padding:26px 0 0}
.kopf .inhalt{display:flex;align-items:center;justify-content:space-between;gap:16px}
.kopf-logo{display:flex;align-items:center;gap:13px;text-decoration:none}
.kopf-logo img{width:52px;height:52px;border-radius:50%;box-shadow:var(--schatten-klein)}
.kopf-logo span{
  font-family:var(--serif);font-size:19px;color:var(--bordeaux);line-height:1.15;
}
.kopf-rechts{
  font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--tinte-leise);
}
@media(max-width:700px){.kopf-rechts{display:none}}


/* ---------- 1. HERO ----------
   Links 55 Prozent Text, rechts 45 Prozent ein stehendes Foto. Der Countdown
   steht bewusst nicht hier oben, sondern erst unten am Formular. Auf einer
   Warteliste ist die Uhr noch kein Grund zur Eile. */
.hero{padding:clamp(38px,5vw,64px) 0 clamp(70px,9vw,120px)}
.hero-raster{display:grid;grid-template-columns:1fr;gap:44px;align-items:center}
@media(min-width:960px){
  .hero-raster{grid-template-columns:57fr 43fr;gap:56px}
}
/* Die Feststellung steht oben, die Frage darunter in einem anderen Ton.
   Vorher liefen beide Sätze ineinander und man las sie als einen. */
.h1-fest{display:block}
.h1-frage{
  display:block;font-style:italic;color:var(--bordeaux-hell);
  margin-top:.16em;
}
@media(min-width:760px){.h1-frage{margin-top:.1em}}

/* Der Umbruch nach dem ersten Satz ist gewollt: die Feststellung steht für
   sich, die Frage darunter. Auf schmalen Bildschirmen bricht die Zeile
   ohnehin, dort wäre der harte Umbruch nur eine Lücke. */
.nur-breit{display:none}
@media(min-width:960px){.nur-breit{display:inline}}

/* Kein balance hier: es verteilt den Satz auf vier kurze Zeilen, statt drei
   volle zu füllen. pretty verhindert nur den einzelnen Rest in der Schlusszeile. */
.hero h1{margin-bottom:26px;text-wrap:pretty;font-size:clamp(34px,3.7vw,52px)}
.hero-sub{font-size:clamp(18px,1.9vw,21px);color:var(--tinte);max-width:33em;margin-bottom:18px}
.hero-sub b{font-weight:700;color:var(--bordeaux)}
.hero-ohne{font-size:17px;color:var(--tinte-leise);max-width:33em;margin-bottom:30px}

.vertrauen{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;
  font-size:13.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--tinte-leise);margin-bottom:32px;
}
.vertrauen span{display:inline-flex;align-items:center;gap:16px}
.vertrauen span::after{
  content:"";width:5px;height:5px;border-radius:50%;background:var(--gold);
}
.vertrauen span:last-child::after{display:none}
/* Auf dem Handy bricht die Zeile um, dann hängt ein Trennpunkt am Zeilenende
   in der Luft. Dort stehen die drei Angaben lieber ohne Punkte. */
@media(max-width:620px){
  .vertrauen{gap:6px 18px}
  .vertrauen span::after{display:none}
}

.hero-bild-halter{position:relative}
.hero-bild{
  width:100%;aspect-ratio:4/5;object-fit:cover;object-position:56% center;
  border-radius:var(--rund);box-shadow:var(--schatten-gross);
}
/* Der Leitsatz schwebt auf dem Foto. Auf schmalen Bildschirmen rutscht er
   darunter, sonst verdeckt er das halbe Bild. */
.leitsatz{
  background:var(--cremeweiss);border-radius:var(--rund-klein);
  padding:20px 24px;box-shadow:var(--schatten);
  border-top:2px solid var(--gold);
  font-family:var(--serif);font-size:19px;line-height:1.35;color:var(--bordeaux);
  margin-top:-34px;margin-left:18px;margin-right:18px;position:relative;
}
@media(min-width:960px){
  .leitsatz{
    position:absolute;left:-38px;bottom:44px;max-width:310px;
    margin:0;font-size:20px;padding:22px 26px;
  }
}


/* Das Formular gleich im Hero. Vorher stand hier ein Knopf, der zum
   Anmeldeblock in der Seitenmitte gesprungen ist. Wer sich eintragen will,
   soll das sofort können und nicht erst irgendwohin gerissen werden.
   Der Block weiter unten bleibt für alle, die vorher alles lesen wollen. */
.hero-form{
  background:var(--cremeweiss);border-radius:var(--rund-klein);
  padding:22px;box-shadow:var(--schatten);border-top:2px solid var(--gold);
  max-width:30em;margin-bottom:14px;
}
.hero-form .feldpaar{display:grid;grid-template-columns:1fr;gap:10px;margin-bottom:12px}
@media(min-width:560px){.hero-form .feldpaar{grid-template-columns:1fr 1.25fr}}
.hero-form input[type=text],.hero-form input[type=email]{
  font-size:16px;padding:14px 16px;min-height:52px;border-radius:12px;
}
.hero-form .knopf{font-size:16.5px;padding:16px 28px;min-height:54px}
.hero-form .haken{margin-top:14px;gap:6px 16px;font-size:13.5px}
.hero .knopf-unter{max-width:30em;font-size:13.5px}

/* ---------- 2. DER UEBERGANG ----------
   Viel Freiraum. Die Nachrichten aus dem Alltag schweben versetzt, statt in
   einer Liste zu stehen. */
.uebergang{text-align:center}
.uebergang .auftakt{
  font-size:15px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);margin-bottom:22px;
}
.uebergang .satz{
  font-family:var(--serif);font-size:clamp(25px,3.4vw,40px);line-height:1.24;
  color:var(--bordeaux);max-width:16em;margin:0 auto 18px;
}
.uebergang .dazu{font-size:17px;color:var(--tinte-leise);margin-bottom:8px}

.schwebend{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:14px 16px;max-width:820px;margin:38px auto 40px;
}
.schwebend span{
  background:var(--cremeweiss);border-radius:20px 20px 20px 6px;
  padding:14px 22px;font-size:16.5px;color:var(--tinte);line-height:1.4;
  box-shadow:var(--schatten-klein);
}
.schwebend span:nth-child(2n){
  background:var(--rose);border-radius:20px 20px 6px 20px;transform:translateY(12px);
}
.schwebend span:nth-child(3n){transform:translateY(-9px)}
@media(max-width:620px){
  .schwebend span,.schwebend span:nth-child(2n),.schwebend span:nth-child(3n){transform:none}
}

.uebergang .schluss{
  font-family:var(--serif);font-size:clamp(22px,2.8vw,32px);line-height:1.3;
  color:var(--bordeaux);max-width:20em;margin:0 auto 34px;
}
.ansatz{
  display:inline-block;font-family:var(--serif);
  font-size:clamp(20px,2.4vw,26px);color:var(--bordeaux);
  padding:16px 34px;border-top:2px solid var(--gold);border-bottom:2px solid var(--gold);
}


/* ---------- 3. DIE DREI GESCHICHTEN ----------
   Text und Bild wechseln die Seite, damit beim Scrollen Bewegung entsteht.
   Die Bilder gehen randlos bis an die Kanten der Karte. */
.geschichten{display:flex;flex-direction:column;gap:clamp(28px,4vw,44px)}
.geschichte{
  border-radius:var(--rund);overflow:hidden;
  box-shadow:var(--schatten);border-top:2px solid var(--gold);
  display:grid;grid-template-columns:1fr;
  background:var(--cremeweiss);
}
.geschichte.ton-rose{background:var(--rose)}
.geschichte.ton-champagner{background:var(--champagner)}
@media(min-width:900px){
  .geschichte{grid-template-columns:60fr 40fr;align-items:stretch}
  .geschichte.gedreht{grid-template-columns:40fr 60fr}
  .geschichte.gedreht .g-text{order:2}
  .geschichte.gedreht .g-bild{order:1}
}
.g-text{padding:clamp(30px,3.6vw,52px)}
.g-bild{overflow:hidden;min-height:260px;background:var(--creme-tief)}
.g-bild img{width:100%;height:100%;object-fit:cover;min-height:260px}

.marke{
  display:inline-block;font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  font-weight:700;color:var(--bordeaux);background:rgba(110,31,46,.08);
  padding:7px 15px;border-radius:999px;margin-bottom:18px;
}
.g-text h3{margin-bottom:14px}
.zuspitzung{
  font-family:var(--serif);font-size:clamp(21px,2.4vw,26px);line-height:1.32;
  color:var(--bordeaux);margin-bottom:22px;
}
.g-text p{color:var(--tinte-leise);margin-bottom:14px;font-size:17.5px}
.g-text p:last-child{margin-bottom:0}

/* Stichpunkte in den Geschichten. Sie brechen die langen Absätze auf,
   damit keine Textwand entsteht. */
.stichpunkte{list-style:none;margin:4px 0 16px}
.stichpunkte li{
  position:relative;padding:6px 0 6px 26px;font-size:17px;line-height:1.5;
  color:var(--tinte);
}
.stichpunkte li::before{
  content:"";position:absolute;left:4px;top:16px;width:8px;height:2px;
  background:var(--gold);
}
.g-text .zuspitzung i{font-style:italic;color:var(--bordeaux-hell)}

/* Die abgesetzte Fläche am Fuss jeder Geschichte */
.aendert-sich{
  margin-top:26px;padding:22px 26px;border-radius:var(--rund-klein);
  background:rgba(110,31,46,.055);border-left:3px solid var(--gold);
}
.aendert-sich .titel{
  font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;
  color:var(--bordeaux);margin-bottom:8px;
}
.aendert-sich p{color:var(--tinte);font-size:17px;margin:0}


/* ---------- 4. HEUTE UND NACHHER ---------- */
.wende{display:grid;grid-template-columns:1fr;gap:20px;align-items:stretch;margin-top:44px}
@media(min-width:860px){
  .wende{grid-template-columns:1fr 64px 1fr;gap:0}
}
.spalte{
  background:var(--cremeweiss);border-radius:var(--rund);
  padding:clamp(26px,3vw,40px);box-shadow:var(--schatten-klein);
}
.spalte.heute{background:transparent;box-shadow:none;border:1px dashed var(--linie)}
.spalte.nachher{box-shadow:var(--schatten);border-top:2px solid var(--gold)}
.spalte .kopfzeile{
  font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;
  margin-bottom:20px;
}
.spalte.heute .kopfzeile{color:var(--tinte-leise)}
.spalte.nachher .kopfzeile{color:var(--gold)}
.spalte ul{list-style:none}
.spalte li{
  position:relative;padding:13px 0 13px 30px;font-size:17px;line-height:1.5;
  border-bottom:1px solid var(--linie);
}
.spalte li:last-child{border-bottom:none}
.spalte.heute li{color:var(--tinte-leise)}
.spalte.heute li::before{
  content:"";position:absolute;left:4px;top:22px;
  width:12px;height:1.5px;background:var(--tinte-leise);opacity:.5;
}
.spalte.nachher li{color:var(--tinte)}
.spalte.nachher li::before{
  content:"✓";position:absolute;left:0;top:12px;color:var(--gruen);font-weight:700;
}
.pfeil{display:flex;align-items:center;justify-content:center;color:var(--gold)}
.pfeil svg{width:34px;height:34px}
@media(max-width:859px){.pfeil{transform:rotate(90deg);padding:4px 0}}


/* ---------- 5. DER BEWEIS ----------
   Dunkles Band über die volle Breite. Foto neben der Überschrift, darunter
   die Belege. Die eine echte Zahl steht groß. */
.beweis-kopf{display:grid;grid-template-columns:1fr;gap:36px;align-items:center}
@media(min-width:900px){
  .beweis-kopf{grid-template-columns:1fr 430px;gap:60px}
}
.beweis-kopf .oberzeile{color:var(--gold-zart)}
.beweis-kopf p{color:var(--tinte-auf-dunkel);font-size:18px;max-width:30em}
.signatur{
  font-family:var(--serif);font-style:italic;font-size:20px;
  color:var(--gold-zart);
}
.beweis-bild{
  width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--rund);
  box-shadow:0 24px 60px rgba(0,0,0,.32);
}

.zahlen{display:grid;grid-template-columns:1fr;gap:18px;margin:48px 0 40px}
@media(min-width:760px){.zahlen{grid-template-columns:repeat(3,1fr)}}
.zahlkachel{
  background:rgba(255,255,255,.07);border-radius:var(--rund-klein);
  padding:26px 24px;border-top:2px solid var(--gold);
}
.zahlkachel .wert{
  font-size:clamp(32px,4vw,44px);line-height:1;color:#fff;margin-bottom:10px;
}
.zahlkachel .wort{font-family:var(--serif);font-size:26px;color:#fff;margin-bottom:10px;line-height:1.1}
.zahlkachel p{font-size:15.5px;line-height:1.5;color:var(--tinte-auf-dunkel);margin:0}

.belege{list-style:none;display:grid;grid-template-columns:1fr;gap:0}
@media(min-width:860px){.belege{grid-template-columns:1fr 1fr;gap:0 46px}}
.belege li{
  position:relative;padding:14px 0 14px 32px;font-size:16.5px;line-height:1.55;
  color:var(--tinte-auf-dunkel);border-bottom:1px solid rgba(255,255,255,.13);
}
.belege li b{color:#fff;font-weight:700}
/* Die unterste Linie jeder Spalte weglassen, sonst hängt sie frei im Raum.
   Einspaltig ist das nur der letzte Eintrag, zweispaltig sind es die beiden
   letzten, weil das Raster zeilenweise füllt. */
.belege li:last-child{border-bottom:none}
@media(min-width:860px){
  .belege li:nth-last-child(-n+2){border-bottom:none}
}
.belege li::before{
  content:"✓";position:absolute;left:4px;top:14px;color:var(--gold);font-weight:700;
}
.beweis-schluss{
  margin-top:30px;padding-top:24px;border-top:1px solid rgba(255,255,255,.22);
  font-size:16.5px;line-height:1.6;color:var(--tinte-auf-dunkel);max-width:50em;
}


/* ---------- 6. DAS BILD ueber die volle Breite ---------- */
.trennbild{
  width:100%;height:clamp(260px,46vw,560px);object-fit:cover;object-position:center 12%;
  display:block;
}
.trennbild-text{
  background:var(--cremeweiss);padding:clamp(34px,4vw,54px) 0;
}
.trennbild-text p{font-size:clamp(18px,2vw,20px);color:var(--tinte-leise);margin-bottom:16px}
.trennbild-text p:last-child{margin-bottom:0}
.trennbild-text b{color:var(--tinte);font-weight:700}
h2.links{text-align:left;margin-bottom:26px}
.eckdaten{list-style:none;margin:0 0 26px}
.eckdaten li{
  position:relative;padding:13px 0 13px 34px;font-size:17.5px;line-height:1.55;
  color:var(--tinte-leise);border-bottom:1px solid var(--linie);
}
.eckdaten li:last-child{border-bottom:none}
.eckdaten li b{color:var(--tinte)}
.eckdaten li::before{
  content:"";position:absolute;left:6px;top:22px;width:12px;height:2px;
  background:var(--gold);
}
/* Der eine Satz, der die Erwartung geradezieht */
.kernsatz{
  font-family:var(--serif);font-size:clamp(19px,2.2vw,24px);line-height:1.4;
  color:var(--bordeaux);padding:22px 26px;border-left:3px solid var(--gold);
  background:var(--champagner);border-radius:0 var(--rund-klein) var(--rund-klein) 0;
}
.kernsatz b{font-weight:400;font-family:var(--sans);font-size:.86em}


/* ---------- 7. WAS DU DIR AUFBAUST ---------- */
.ergebnisse{display:grid;grid-template-columns:1fr;gap:18px;margin-top:46px}
@media(min-width:700px){.ergebnisse{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.ergebnisse{grid-template-columns:repeat(3,1fr)}}
.ergebnis{
  background:var(--cremeweiss);border-radius:var(--rund-klein);
  padding:28px 26px;box-shadow:var(--schatten-klein);
  border-top:2px solid var(--gold-zart);
}
.ergebnis .titel{
  font-family:var(--serif);font-size:21px;line-height:1.25;
  color:var(--bordeaux);margin-bottom:8px;
}
.ergebnis p{font-size:16px;color:var(--tinte-leise);line-height:1.55;margin:0}
@media(min-width:1000px){
  .ergebnisse .ergebnis:last-child{
    grid-column:1 / -1;display:grid;grid-template-columns:1fr 2fr;
    gap:8px 34px;align-items:baseline;
  }
}
.ergebnis-schluss{
  font-family:var(--serif);font-size:clamp(20px,2.4vw,26px);line-height:1.35;
  color:var(--bordeaux);text-align:center;margin-top:42px;
}


/* ---------- 8. DIE VIER WOCHEN ALS WEG ---------- */
.weg{margin-top:52px;position:relative}
.woche{
  display:grid;grid-template-columns:auto 1fr;gap:22px;
  padding-bottom:clamp(34px,4vw,54px);position:relative;
}
@media(min-width:840px){
  .woche{grid-template-columns:130px 1fr;gap:44px}
}
.woche:last-child{padding-bottom:0}
/* Die Linie läuft durch die Ziffernspalte, endet aber vor der letzten Woche */
.woche::before{
  content:"";position:absolute;left:26px;top:74px;bottom:0;
  width:1px;background:linear-gradient(var(--gold-zart),rgba(230,213,178,.15));
}
@media(min-width:840px){.woche::before{left:65px;top:96px}}
.woche:last-child::before{display:none}
.nummer{
  font-size:clamp(38px,6vw,72px);line-height:.9;color:var(--gold);
  text-align:left;font-weight:900;letter-spacing:-.04em;
}
@media(min-width:840px){.nummer{text-align:center}}
.woche-inhalt{padding-bottom:6px}
.woche-titel{
  font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;
  color:var(--bordeaux-hell);margin-bottom:10px;
}
.woche-kopf{display:grid;grid-template-columns:1fr;gap:24px;align-items:start}
@media(min-width:1000px){.woche-kopf{grid-template-columns:1fr 270px}}
.woche-bild{
  width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:var(--rund-klein);
  box-shadow:var(--schatten-klein);
}
.woche-inhalt p{color:var(--tinte-leise);margin-bottom:14px;font-size:17.5px}
.woche-inhalt p b{color:var(--tinte);font-weight:700}
.drin{list-style:none;margin:18px 0}
.drin li{
  position:relative;padding:7px 0 7px 26px;font-size:16.5px;color:var(--tinte);
  line-height:1.5;
}
.drin li::before{
  content:"";position:absolute;left:6px;top:17px;width:7px;height:7px;
  border-radius:50%;background:var(--gold);
}
.am-ende{
  margin-top:22px;padding:18px 24px;border-radius:var(--rund-klein);
  background:var(--champagner);font-size:17px;line-height:1.5;color:var(--bordeaux);
}
.am-ende b{font-weight:700}


/* ---------- 9. DER ANMELDEBLOCK ---------- */
.anmelden-raster{display:grid;grid-template-columns:1fr;gap:36px;align-items:start}
@media(min-width:960px){
  .anmelden-raster{grid-template-columns:1fr 440px;gap:60px}
}
.anmelden-text .oberzeile{color:var(--gold-zart)}
.anmelden-text p{color:var(--tinte-auf-dunkel);font-size:18px;margin-bottom:16px;max-width:34em}
.anmelden-text p:last-of-type{margin-bottom:0}
/* Die drei Gründe, warum sich das Eintragen lohnt. Sie stehen vor jedem
   Datum, weil ein Datum allein niemanden überzeugt. */
.vorzuege{list-style:none;counter-reset:vorzug;margin:20px 0 26px}
.vorzuege li{
  position:relative;counter-increment:vorzug;
  padding:14px 0 14px 52px;font-size:17.5px;line-height:1.55;
  color:var(--tinte-auf-dunkel);
}
.vorzuege li b{color:#fff;font-weight:700}
.vorzuege li::before{
  content:counter(vorzug);position:absolute;left:0;top:12px;
  width:34px;height:34px;border-radius:50%;
  background:rgba(184,148,79,.22);border:1px solid var(--gold);
  color:var(--gold);font-family:var(--sans);font-weight:900;font-size:15px;
  display:flex;align-items:center;justify-content:center;
}

/* Die Rechnung steht etwas leiser als der Fließtext darüber, sie ist ein
   Beleg und kein Versprechen. */
.rechnung{
  font-size:16px;line-height:1.6;color:rgba(255,255,255,.72);
  padding-left:16px;border-left:2px solid var(--gold);
}
.anmelden-text p.rechnung{margin-top:20px}
.rechnung .wert{color:#fff;font-weight:700;white-space:nowrap}
.drin-liste{list-style:none;margin-top:30px}
.drin-liste li{
  position:relative;padding:12px 0 12px 32px;font-size:16.5px;line-height:1.5;
  color:var(--tinte-auf-dunkel);border-bottom:1px solid rgba(255,255,255,.13);
}
.drin-liste li:last-child{border-bottom:none}
.drin-liste li::before{
  content:"✓";position:absolute;left:4px;top:12px;color:var(--gold);font-weight:700;
}

/* Formular und Uhr stehen zusammen in der rechten Spalte. */
.form-spalte{display:flex;flex-direction:column;gap:22px}
.formkasten{
  background:var(--cremeweiss);border-radius:var(--rund);
  padding:clamp(28px,3vw,38px);box-shadow:0 26px 60px rgba(0,0,0,.28);
  color:var(--tinte);
}
.formkasten .kopfzeile{
  font-family:var(--serif);font-size:24px;line-height:1.25;
  color:var(--bordeaux);margin-bottom:6px;
}
.formkasten .unterzeile{font-size:15.5px;color:var(--tinte-leise);margin-bottom:24px;line-height:1.5}

.feldpaar{display:grid;grid-template-columns:1fr;gap:12px;margin-bottom:14px}
input[type=text],input[type=email]{
  width:100%;font-family:var(--sans);font-size:17px;color:var(--tinte);
  padding:16px 18px;border:1.5px solid var(--linie);border-radius:14px;
  background:#fff;min-height:56px;transition:border-color .16s ease;
}
input::placeholder{color:#a89890}
input:focus{outline:none;border-color:var(--bordeaux-hell);box-shadow:0 0 0 3px rgba(138,36,52,.1)}
.honig{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.haken{
  display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:18px;
  font-size:14.5px;color:var(--tinte-leise);
}
.haken span{position:relative;padding-left:20px}
.haken span::before{
  content:"✓";position:absolute;left:0;top:0;color:var(--gruen);font-weight:700;
}
.form-klein{font-size:13.5px;color:var(--tinte-leise);margin-top:16px;line-height:1.55}
.form-klein a{color:var(--bordeaux);text-decoration:underline;display:inline-block;padding:12px 6px;min-height:44px}
.preishinweis{
  margin-top:20px;padding-top:18px;border-top:1px solid var(--linie);
  font-size:15px;color:var(--tinte-leise);line-height:1.5;
}
.preis-zeile{display:block;margin-bottom:6px}
.preis-neu{
  font-family:var(--sans);font-weight:900;font-size:30px;color:var(--bordeaux);
  letter-spacing:-.02em;font-variant-numeric:lining-nums tabular-nums;
}
.preis-alt{
  font-family:var(--sans);font-size:18px;color:var(--tinte-leise);
  text-decoration:line-through;margin-left:8px;
}
.preishinweis b{color:var(--bordeaux);font-weight:700}
.meldung{
  margin-top:16px;padding:16px 18px;border-radius:14px;font-size:15.5px;
  font-weight:600;display:none;line-height:1.5;
}
.meldung.gut{background:#e8f5ee;color:var(--gruen);border:1px solid #b9ddc9;display:block}
.meldung.schlecht{background:var(--rose);color:var(--bordeaux);border:1px solid #f0cdd3;display:block}

/* Der Countdown. Alle Ziffern in Lato, sonst tanzen sie. */
.countdown{
  margin-top:22px;padding:22px 24px;border-radius:var(--rund-klein);
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);
  max-width:none;
}
.cd-titel{
  font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;
  color:var(--gold-zart);margin-bottom:14px;
}
.cd-uhr{display:flex;gap:14px}
.cd-feld{min-width:60px}
.cd-zahl{font-size:clamp(28px,4vw,36px);line-height:1;color:#fff;letter-spacing:-.03em}
.cd-name{
  font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;
  color:rgba(255,255,255,.6);margin-top:7px;
}
.cd-unter{font-size:14px;color:var(--tinte-auf-dunkel);margin-top:14px;line-height:1.5}
.cd-unter b{color:#fff;font-weight:700}
.countdown.abgelaufen .cd-uhr{display:none}
.countdown.abgelaufen .cd-titel{margin-bottom:0}


/* ---------- 10. UEBER MICH ---------- */
.ueber-raster{display:grid;grid-template-columns:1fr;gap:38px;align-items:center}
@media(min-width:900px){
  .ueber-raster{grid-template-columns:440px 1fr;gap:64px}
}
.ueber-bild{
  width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--rund);
  box-shadow:var(--schatten-gross);
}
.ueber-text p{color:var(--tinte-leise);font-size:17.5px;margin-bottom:16px}
.ueber-text p:last-of-type{margin-bottom:0}
.ueber-text b{color:var(--tinte);font-weight:700}
.punkte{display:flex;flex-direction:column;gap:12px;margin-top:30px}
.punkte div{
  position:relative;padding-left:28px;font-size:16.5px;color:var(--tinte);
  font-weight:700;
}
.punkte div::before{
  content:"";position:absolute;left:0;top:9px;width:9px;height:9px;
  border-radius:50%;background:var(--gold);
}


/* ---------- 11. FAQ ---------- */
.faq{max-width:800px;margin:44px auto 0}
details{
  border-bottom:1px solid var(--linie);background:transparent;
}
details:first-child{border-top:1px solid var(--linie)}
summary{
  cursor:pointer;list-style:none;padding:22px 48px 22px 0;
  font-family:var(--serif);font-size:20px;line-height:1.3;color:var(--bordeaux);
  position:relative;min-height:60px;display:flex;align-items:center;
}
summary::-webkit-details-marker{display:none}
summary::after{
  content:"";position:absolute;right:8px;top:50%;
  width:11px;height:11px;margin-top:-7px;
  border-right:1.5px solid var(--gold);border-bottom:1.5px solid var(--gold);
  transform:rotate(45deg);transition:transform .2s ease;
}
details[open] summary::after{transform:rotate(-135deg);margin-top:-2px}
details[open] summary{color:var(--bordeaux-hell)}
details .antwort{padding:0 20px 26px 0;font-size:17px;color:var(--tinte-leise)}


/* ---------- 12. ABSCHLUSS ----------
   Zurück zum Leitsatz aus dem Hero, auf einem ruhigen Bild. */
.abschluss{position:relative;overflow:hidden;background:var(--bordeaux-tief)}
.abschluss-bild{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center 22%;
}
/* Der Schleier macht den Text lesbar und nimmt dem Bild die Unruhe. */
.abschluss::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(74,20,32,.64),rgba(74,20,32,.88));
}
.abschluss .inhalt{position:relative;z-index:1;text-align:center;padding-top:clamp(60px,8vw,100px);padding-bottom:clamp(60px,8vw,100px)}
.abschluss .gross{
  color:#fff;font-size:clamp(28px,3.8vw,44px);line-height:1.2;
  max-width:15em;margin:0 auto 30px;text-shadow:0 2px 24px rgba(0,0,0,.35);
}
.abschluss p{color:rgba(255,255,255,.9);max-width:34em;margin:0 auto 34px;font-size:18px}

.gruss{
  text-align:center;font-family:var(--serif);font-size:20px;
  color:var(--bordeaux);line-height:1.8;padding:clamp(40px,5vw,60px) 0 0;
}

footer{
  text-align:center;padding:44px 0;font-size:13.5px;
  color:var(--tinte-leise);line-height:1.8;
}
footer a{color:var(--bordeaux);text-decoration:underline;margin:0 4px;display:inline-block;padding:12px 6px}
.ki-hinweis{margin-top:10px;font-size:12.5px;opacity:.85}


/* ---------- Der mitlaufende Knopf ---------- */
.mitlauf{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  background:rgba(250,245,239,.95);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-top:1px solid var(--linie);
  padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));
  transform:translateY(120%);transition:transform .28s ease;
  box-shadow:0 -6px 24px rgba(74,20,32,.10);
}
.mitlauf.sichtbar{transform:translateY(0)}
.mitlauf-inhalt{
  max-width:1160px;margin:0 auto;display:flex;align-items:center;
  justify-content:space-between;gap:18px;
}
.mitlauf-text{font-size:14.5px;color:var(--tinte);line-height:1.35}
.mitlauf-text b{color:var(--bordeaux);font-weight:700}
.mitlauf .knopf{font-size:15.5px;padding:14px 28px;min-height:48px;white-space:nowrap}
@media(max-width:640px){
  .mitlauf-text{display:none}
  .mitlauf-inhalt{justify-content:center}
  .mitlauf .knopf{width:100%}
}


/* ============================================================
   5. BEWEGUNG
   ============================================================ */

.zeigt{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease}
.zeigt.da{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .zeigt{opacity:1;transform:none;transition:none}
  .mitlauf{transition:none}
  .knopf{transition:none}
  .knopf:hover{transform:none}
}

/* ============================================================
   6. NUR DIE VERKAUFSSEITE
   Kaufkasten, Preis, die beiden Kaesten fuer Zugabe und Garantie,
   und was nach dem Anmeldeschluss verschwindet.
   ============================================================ */

/* Der Kaufkasten ist der helle Zwilling des Anmeldeformulars. */
.kaufkasten{text-align:center}
.kaufkasten .kopfzeile{margin-bottom:18px}
.preisblock{margin-bottom:24px}
.preis-alt-gross{
  display:block;font-family:var(--sans);font-size:19px;color:var(--tinte-leise);
  text-decoration:line-through;margin-bottom:2px;
}
.preis-alt-gross.aus{display:none}
.preis-gross{
  display:block;font-size:clamp(54px,8vw,76px);line-height:1;
  color:var(--bordeaux);letter-spacing:-.04em;
}
.preis-was{display:block;font-size:15.5px;color:var(--tinte-leise);margin-top:10px}
.knopf-unter.mitte{text-align:center;max-width:none;margin-left:auto;margin-right:auto}

/* Die Fristzeile steht unter der Liste und traegt die Knappheit. */
.frist{
  margin-top:26px;padding:18px 22px;border-radius:var(--rund-klein);
  background:rgba(255,255,255,.1);border-left:3px solid var(--gold);
  font-size:16.5px;line-height:1.55;color:#fff;font-weight:700;
}

/* Zugabe und Garantie. Ein Kasten mit farbiger Oberkante, sonst ruhig. */
.kasten{
  background:var(--cremeweiss);border-radius:var(--rund);
  padding:clamp(28px,3.4vw,44px);box-shadow:var(--schatten);
  border-top:2px solid var(--gold);
}
.kasten-marke{
  display:inline-block;font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  font-weight:700;color:var(--bordeaux);background:var(--champagner);
  padding:7px 15px;border-radius:999px;margin-bottom:16px;
}
.kasten h3{margin-bottom:14px}
.kasten p{font-size:17.5px;color:var(--tinte-leise);margin-bottom:14px}
.kasten p:last-child{margin-bottom:0}
.kasten b{color:var(--tinte);font-weight:700}
.kasten .klein{font-size:14.5px;line-height:1.55}
.kasten.garantie{border-top-color:var(--gruen)}
.kasten.garantie .kasten-marke{background:#e8f5ee;color:var(--gruen)}

/* Der helle Knopf im Abschluss braucht darunter helle Schrift. */
.knopf-unter.auf-dunkel{
  color:rgba(255,255,255,.8);text-align:center;max-width:34em;
  margin-left:auto;margin-right:auto;
}

/* ---------- Nach dem Anmeldeschluss ----------
   Ab dem 15. September verschwinden Preis, alle Knoepfe und der mitlaufende
   Balken. Es bleibt der Satz, dass die Anmeldung zu ist. */
/* Der ganze Kaufkasten verschwindet, sonst bliebe ein leerer weißer
   Kasten mit einer Ueberschrift stehen. Die Uhr bleibt und traegt die
   Meldung, dass die Anmeldung zu ist. */
body.geschlossen .kaufkasten,
body.geschlossen .knopf,
body.geschlossen .mitlauf,
body.geschlossen .preisblock,
body.geschlossen .knopf-unter,
body.geschlossen .frist{display:none}
body.geschlossen .countdown{background:var(--cremeweiss);border-color:var(--linie)}
body.geschlossen .cd-titel{
  color:var(--bordeaux);font-size:16px;letter-spacing:0;text-transform:none;
}
body.geschlossen .cd-unter{color:var(--tinte-leise)}