/* ══════════════════════════════════════════════════════
   Metabolic Boost — gemeinsames Design aller Seiten
   Dr. med. Natalie Wiesen
   Farben und Schriften wie Ratgeber-, Webinar- und Sensortool-Seite.
   ══════════════════════════════════════════════════════ */

/* ── Schriften ─────────────────────────────────────────
   Liegen unter /assets/fonts/ auf dem eigenen Server.
   Bewusst NICHT von Google: Eine Einbindung über
   fonts.googleapis.com schickt beim Seitenaufruf die
   IP-Adresse jeder Besucherin an Google — in Deutschland
   ein bekannter Abmahngrund (LG München, 20.01.2022).
   Zwei variable Schriften, Gewichtsbereich 300–600;
   genau die Schnitte, die vorher von Google kamen.
   Lizenz und Herkunft: assets/fonts/LIZENZ.txt
   ────────────────────────────────────────────────────── */
@font-face{
  font-family:"Cormorant Garamond";font-style:normal;font-weight:300 600;
  font-display:swap;src:url(/assets/fonts/cormorant.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:"Cormorant Garamond";font-style:normal;font-weight:300 600;
  font-display:swap;src:url(/assets/fonts/cormorant-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:"Cormorant Garamond";font-style:italic;font-weight:300 400;
  font-display:swap;src:url(/assets/fonts/cormorant-kursiv.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:"Cormorant Garamond";font-style:italic;font-weight:300 400;
  font-display:swap;src:url(/assets/fonts/cormorant-kursiv-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:"Jost";font-style:normal;font-weight:300 600;
  font-display:swap;src:url(/assets/fonts/jost.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:"Jost";font-style:normal;font-weight:300 600;
  font-display:swap;src:url(/assets/fonts/jost-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;
}

:root{
  --navy:#1A2744;
  --navy-soft:rgba(26,39,68,.84);
  /* Mehrfach nachgeschärft: .46 und .64 waren als Kleinschrift auf dem Cremeton
     zu blass — auf Handydisplays praktisch unlesbar. */
  --navy-faint:rgba(26,39,68,.74);
  --gold:#C9A475;              /* Linien, Punkte, Deko — nie für kleinen Text auf hellem Grund */
  --gold-text:#855D2E;         /* dunkles Antikgold: dasselbe Motiv, aber lesbar */
  --gold-light:#E3CFB0;        /* Gold auf dunklem Grund */
  --cream:#F4EDE4;
  --cream-deep:#EBE1D4;
  --bordeaux:#6B2D3E;
  --white:#FFFFFF;
  --line:rgba(26,39,68,.12);
  --serif:"Cormorant Garamond",Georgia,serif;
  --sans:"Jost",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --wrap:1180px;
  --pad:clamp(1.5rem,5vw,4rem);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--cream);color:var(--navy);
  font-family:var(--sans);font-weight:400;font-size:1.14rem;line-height:1.72;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}

/* ── Bausteine ─────────────────────────────── */
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--pad)}
.narrow{max-width:760px}
section{padding-block:clamp(4.5rem,10vw,8.5rem)}

.eyebrow{
  font-size:.78rem;font-weight:500;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold-text);margin:0 0 1.35rem;display:flex;align-items:center;gap:.9rem;
}
.eyebrow::after{content:"";height:1px;flex:1;max-width:64px;background:var(--gold);opacity:.5}
.eyebrow.center{justify-content:center}
.eyebrow.center::before{content:"";height:1px;flex:1;max-width:64px;background:var(--gold);opacity:.5}

h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.14;letter-spacing:-.01em;margin:0;text-wrap:balance}
h1{font-size:clamp(2.3rem,6.2vw,4.4rem)}
h2{font-size:clamp(1.9rem,4.4vw,3.1rem)}
h3{font-size:clamp(1.25rem,2.2vw,1.5rem);line-height:1.3}
p{text-wrap:pretty}
/* Bei kurzen Absätzen zieht `pretty` Wörter vorzeitig in die nächste Zeile,
   um Schlusswaisen zu vermeiden — dabei bleiben sichtbare Lücken stehen
   ("und ob es in Ihren | Einkaufswagen gehört"). Dort normal umbrechen. */
.schritt p,.card p,.path p,.werkzeug p,.stat .l,.number .l{text-wrap:auto}
.lead{font-size:clamp(1.16rem,1.8vw,1.32rem);color:var(--navy-soft);font-weight:400}
/* Silbentrennung erst bei sehr schmalen Spalten. Bei normaler Handybreite
   erzeugte sie Trennungen wie "zu-gänglich" mitten im Absatz — auf einer
   Seite, die ruhig wirken soll, ist das ein sichtbarer Makel. */
@media(max-width:340px){
  .prose p,.card p,.path p{hyphens:auto}
}

.btn{
  display:inline-flex;align-items:center;gap:.7rem;
  font-family:var(--sans);font-size:.82rem;font-weight:500;
  letter-spacing:.17em;text-transform:uppercase;text-decoration:none;
  padding:1.05rem 2rem;border:1px solid transparent;cursor:pointer;
  transition:background .35s ease,color .35s ease,border-color .35s ease,transform .35s ease;
}
.btn-primary{background:var(--navy);color:var(--cream);border-bottom:2px solid var(--gold)}
.btn-primary:hover{background:#122036;transform:translateY(-2px)}
.btn-ghost{border:1px solid var(--line);color:var(--navy)}
.btn-ghost:hover{border-color:var(--navy);background:rgba(26,39,68,.03)}
.btn-light{border:1px solid rgba(244,237,228,.32);color:var(--cream)}
.btn-light:hover{background:rgba(244,237,228,.08);border-color:var(--gold)}
.btn .arw{transition:transform .35s ease}
.btn:hover .arw{transform:translateX(5px)}

/* ── Kopfzeile ─────────────────────────────── */
header{
  position:fixed;inset:0 0 auto;z-index:100;
  padding-block:1.1rem;
  transition:background .4s ease,box-shadow .4s ease,padding .4s ease;
}
header.stuck{background:rgba(244,237,228,.94);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line);padding-block:.7rem}
.nav{display:flex;align-items:center;justify-content:space-between;gap:2rem}
/* Das Markenlogo — zwei Fassungen, hell für dunkle Flächen */
.brand{display:block;line-height:0;position:relative;z-index:3;text-decoration:none}
.brand img{height:clamp(30px,4.4vw,40px);width:auto;display:block}
.brand .hell{display:none}

/* Auf großen Bildschirmen eine schlichte Zeile — die Menü-Hülle
   verhält sich dabei, als wäre sie gar nicht da. */
.nav-links{display:flex;align-items:center;gap:2.1rem}
.menue-inner{display:contents}
.menue-liste{display:flex;align-items:center;gap:2.1rem;list-style:none;margin:0;padding:0}
.menue-liste .nr{display:none}
.menue-fuss{display:none}
.nav-links a{
  font-size:.84rem;font-weight:400;letter-spacing:.1em;text-decoration:none;
  color:var(--navy-soft);position:relative;padding-block:.3rem;transition:color .3s ease;
}
.nav-links a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--gold);transition:width .35s ease}
.nav-links a:hover{color:var(--navy)}
.nav-links a:hover::after{width:100%}
.nav-links a.hier{color:var(--navy)}
.nav-links a.hier::after{width:100%}
.nav-cta{border:1px solid var(--line);padding:.6rem 1.15rem;font-size:.78rem;letter-spacing:.13em;text-transform:uppercase}
.nav-cta::after{display:none}
.nav-cta:hover{border-color:var(--gold)}
.burger{display:none;background:none;border:0;padding:.4rem;cursor:pointer;position:relative;z-index:3}
.burger span{display:block;width:24px;height:1.5px;background:var(--navy);margin:5px 0;transition:transform .3s ease,opacity .3s ease,background .35s ease}
.burger.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* ══ Menü auf kleinen Bildschirmen ═══════════════════════
   Dunkelblaue Vollfläche. Die Marke bleibt oben stehen, damit man
   nicht in einer leeren Fläche landet. Einträge linksbündig mit
   Ordnungszahlen — ein Inhaltsverzeichnis, keine schwebende Liste. */
@media(max-width:900px){
  .burger{display:block}
  body.menue-offen .brand .dunkel{display:none}
  body.menue-offen .brand .hell{display:block}
  body.menue-offen .burger span{background:var(--cream)}
  body.menue-offen header.stuck{background:transparent;box-shadow:none;backdrop-filter:none}

  .nav-links{
    position:fixed;inset:0;z-index:1;display:block;
    background:var(--navy);
    opacity:0;pointer-events:none;transition:opacity .4s ease;
  }
  .nav-links.open{opacity:1;pointer-events:auto}

  .menue-inner{
    display:flex;flex-direction:column;height:100%;
    padding:clamp(6.5rem,20vw,8.5rem) var(--pad) clamp(2rem,7vw,3rem);
  }
  /* Die Liste sitzt mittig im freien Raum zwischen Marke und Fußbereich,
     sonst klafft bei wenigen Einträgen ein Loch in der Mitte. */
  .menue-liste{
    display:flex;flex-direction:column;justify-content:center;flex:1;
    /* align-items und gap MÜSSEN zurückgesetzt werden — sonst wirken die Werte
       aus der waagerechten Desktop-Leiste weiter und zentrieren die Einträge. */
    align-items:stretch;gap:0;
    border-top:1px solid rgba(244,237,228,.14);
  }
  .menue-liste li{border-bottom:1px solid rgba(244,237,228,.14)}
  .nav-links .menue-liste a{
    display:flex;align-items:baseline;gap:1.1rem;
    font-family:var(--serif);font-size:clamp(1.5rem,6.5vw,2.1rem);
    font-weight:400;letter-spacing:0;text-transform:none;
    color:var(--cream);padding-block:clamp(1.15rem,4vw,1.7rem);
    /* Einträge laufen beim Öffnen nacheinander ein */
    opacity:0;transform:translateY(14px);
    transition:opacity .5s ease,transform .5s ease,color .3s ease;
  }
  .nav-links.open .menue-liste a{opacity:1;transform:none}
  .nav-links.open .menue-liste li:nth-child(1) a{transition-delay:.10s}
  .nav-links.open .menue-liste li:nth-child(2) a{transition-delay:.16s}
  .nav-links.open .menue-liste li:nth-child(3) a{transition-delay:.22s}
  .nav-links.open .menue-liste li:nth-child(4) a{transition-delay:.28s}
  .nav-links .menue-liste a::after{display:none}
  .nav-links .menue-liste a.hier{color:var(--gold-light)}
  .menue-liste .nr{
    display:block;font-family:var(--sans);font-size:.68rem;font-weight:500;
    letter-spacing:.2em;color:var(--gold);flex:none;min-width:1.6rem;
  }
  /* Der Webinar-Eintrag ist im Menü ein Eintrag wie jeder andere */
  .nav-links .menue-liste .nav-cta{border:0;padding-inline:0}

  .menue-fuss{
    display:flex;flex-direction:column;gap:.15rem;
    padding-top:clamp(1.6rem,5vw,2.2rem);
    opacity:0;transform:translateY(12px);
    transition:opacity .5s ease .34s,transform .5s ease .34s;
  }
  .nav-links.open .menue-fuss{opacity:1;transform:none}
  .menue-fuss .titel{
    font-size:.68rem;font-weight:500;letter-spacing:.24em;text-transform:uppercase;
    color:var(--gold);margin-bottom:.7rem;
  }
  /* zweiter Titel im selben Block ("Folgen") braucht Luft nach oben */
  .menue-fuss .titel + .titel,
  .menue-fuss a + .titel{margin-top:1.5rem}
  .nav-links .menue-fuss a{
    font-family:var(--sans);font-size:1.04rem;font-weight:400;letter-spacing:.02em;
    text-transform:none;color:rgba(244,237,228,.72);padding-block:.42rem;
  }
  .nav-links .menue-fuss a::after{display:none}
}

/* ── Karten ────────────────────────────────── */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(268px,100%),1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.card{background:var(--cream);padding:clamp(1.9rem,3.5vw,2.7rem);transition:background .4s ease}
.card:hover{background:var(--white)}
.card .k{font-family:var(--serif);font-size:1.02rem;font-weight:500;color:var(--gold-text);margin-bottom:1.5rem;letter-spacing:.08em}
.card h3{margin-bottom:.85rem}
.card p{margin:0;font-size:1.04rem;color:var(--navy-soft)}

/* ── Abschluss-Block ───────────────────────── */
.close{background:var(--cream-deep);text-align:center}
.close h2{max-width:19ch;margin:0 auto 1.6rem}
.close .lead{max-width:52ch;margin:0 auto 2.6rem}

/* ── Fuß ───────────────────────────────────── */
footer{background:var(--navy);color:rgba(244,237,228,.6);padding-block:clamp(3.2rem,6vw,4.5rem) 2rem;font-size:.94rem}
/* Vier Spalten, seit „Folgen" dazugekommen ist. min-width:0 auf den Kindern,
   sonst lässt sich die Seite auf schmalen Geräten seitlich schieben. */
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr .9fr;gap:2.5rem;padding-bottom:2.8rem;border-bottom:1px solid rgba(244,237,228,.13)}
.foot-grid > *{min-width:0}
.foot-brand{line-height:0}
.foot-brand img{height:clamp(38px,5vw,50px);width:auto}
.foot-grid p{margin:1rem 0 0;max-width:38ch;font-size:.96rem;line-height:1.68}
.foot-col h4{font-family:var(--sans);font-size:.72rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin:0 0 1.1rem}
/* zweite Gruppe in derselben Spalte ("Mehr von mir") braucht Luft nach oben */
.foot-col a + h4{margin-top:1.9rem}
.foot-col a{display:block;text-decoration:none;color:rgba(244,237,228,.6);padding-block:.34rem;transition:color .3s ease}
.foot-col a:hover{color:var(--cream)}
.foot-bar{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;padding-top:1.8rem;font-size:.82rem;color:rgba(244,237,228,.62)}
.foot-bar a{text-decoration:none;color:inherit;transition:color .3s ease}
.foot-bar a:hover{color:var(--cream)}
.foot-bar .set{display:flex;gap:1.6rem;flex-wrap:wrap}
@media(max-width:780px){.foot-grid{grid-template-columns:1fr;gap:2.2rem}}

/* ── Einwilligungsabfrage ──
   Verhalten steht in assets/einwilligung.js, das Aussehen hier.

   WICHTIG — nicht "verbessern": „Ablehnen" und „Einverstanden" sind ABSICHTLICH
   gleich gestaltet. Gleiche Größe, gleiche Farbe, gleicher Rahmen, gleiche
   Schrift, nebeneinander auf derselben Ebene. Sobald eine der beiden auffälliger
   wird — gefüllt statt umrandet, größer, in Gold —, ist die Einwilligung
   angreifbar. Der Reiz, „Einverstanden" hervorzuheben, ist genau der Fehler. */
.ew{
  position:fixed;left:0;right:0;bottom:0;z-index:200;
  padding:clamp(.8rem,2vw,1.5rem);
  display:flex;justify-content:center;pointer-events:none;
  opacity:0;transform:translateY(14px);
  transition:opacity .45s ease,transform .45s ease;
}
.ew.offen{opacity:1;transform:none}
.ew:not(.offen){visibility:hidden;transition:opacity .35s ease,transform .35s ease,visibility 0s linear .35s}
.ew-inner{
  pointer-events:auto;width:100%;max-width:560px;
  background:var(--cream);border:1px solid var(--line);
  border-top:2px solid var(--gold);
  padding:clamp(1.4rem,3vw,1.9rem);
  box-shadow:0 24px 60px -30px rgba(26,39,68,.55);
}
.ew h2{
  font-family:var(--serif);font-size:clamp(1.3rem,2.4vw,1.6rem);
  margin:0 0 .8rem;color:var(--navy);
}
.ew p{margin:0 0 1.3rem;font-size:1.04rem;line-height:1.68;color:var(--navy-soft)}

.ew-knoepfe{display:flex;gap:.8rem;flex-wrap:wrap}
.ew-btn{
  flex:1 1 0;min-width:0;
  font-family:var(--sans);font-size:.82rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;
  padding:.95rem 1rem;cursor:pointer;
  background:transparent;color:var(--navy);border:1px solid var(--navy);
  transition:background .3s ease,color .3s ease;
}
.ew-btn:hover{background:var(--navy);color:var(--cream)}
.ew-btn:focus-visible{outline:2px solid var(--gold-text);outline-offset:2px}

/* Hier standen bis 13.09.2026 die Klassen für eine Einzelauswahl
   (.ew-mehr, .ew-detail, .ew-wahl*, .ew-btn-schmal). Sie sind entfallen, weil
   nur noch EIN Werkzeug übrig ist — bei einer einzigen Kategorie sind die zwei
   Schaltflächen bereits die vollständige Wahl. Kommt ein zweiter Dienst dazu,
   müssen diese Klassen zusammen mit der Einzelauswahl in einwilligung.js
   zurück; der Hinweis dort beschreibt, was alles dazugehört. */

.ew-recht{
  margin:1.2rem 0 0!important;padding-top:.9rem;border-top:1px solid var(--line);
  display:flex;gap:.7rem;flex-wrap:wrap;font-size:.9rem!important;
}
.ew-recht a{color:var(--gold-text);text-decoration:underline;text-underline-offset:.18em}
.ew-recht span{color:var(--navy-faint)}

@media(prefers-reduced-motion:reduce){
  .ew{transition:none}
}

/* ── Kanäle (Instagram · Facebook · YouTube) ──
   Symbol UND Wort, nie Symbol allein. Zielgruppe 45+: ein nacktes Zeichen muss
   man kennen, um es zu erkennen, und bei 17px auf dunklem Grund ist das Raten.
   Das Symbol macht die Zeile scanbar, das Wort macht sie eindeutig — und der
   Screenreader liest ohnehin nur das Wort.

   Die Zeichnungen stehen als Maske hier im CSS, nicht als SVG im HTML: so liegen
   sie an EINER Stelle statt fünfmal in jeder Seite, und `currentColor` färbt sie
   samt Hover-Wechsel automatisch mit. Wo Masken nicht unterstützt werden, bleibt
   das Wort allein stehen — es trägt die Bedeutung. */
.kanaele{display:flex;flex-direction:column}
.kanaele a{display:flex;align-items:center;gap:.6rem}
.kanaele a::before{content:none}

@supports ((-webkit-mask-image:url("")) or (mask-image:url(""))){
  .kanaele a::before{
    content:"";width:17px;height:17px;flex:none;background:currentColor;
    -webkit-mask:var(--zeichen) center/contain no-repeat;
            mask:var(--zeichen) center/contain no-repeat;
  }
}
.k-instagram{--zeichen:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9'%3E%3Crect x='3.2' y='3.2' width='17.6' height='17.6' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4.1'/%3E%3Ccircle cx='17.3' cy='6.7' r='1.15' fill='%23000' stroke='none'/%3E%3C/svg%3E")}
.k-facebook{--zeichen:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='8.9' fill='none' stroke='%23000' stroke-width='1.9'/%3E%3Cpath fill='%23000' d='M13.25 20.8v-6.55h2.2l.33-2.55h-2.53v-1.63c0-.74.2-1.24 1.26-1.24h1.35V6.66c-.23-.03-1.03-.1-1.96-.1-1.94 0-3.27 1.18-3.27 3.36v1.88H8.42v2.55h2.21v6.55z'/%3E%3C/svg%3E")}
.k-youtube{--zeichen:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='2.6' y='5.6' width='18.8' height='12.8' rx='4' fill='none' stroke='%23000' stroke-width='1.9'/%3E%3Cpath fill='%23000' d='M10.4 9.5l5 2.5-5 2.5z'/%3E%3C/svg%3E")}

/* ── Einblenden ────────────────────────────── */
/* Startzustand nur, wenn JavaScript nachweislich läuft (html.js).
   Ohne JS bleibt der Inhalt normal sichtbar. */
html.js .rv{opacity:0;transform:translateY(26px);transition:opacity .9s cubic-bezier(.22,.61,.36,1),transform .9s cubic-bezier(.22,.61,.36,1)}
html.js .rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  html.js .rv{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* ══ LEITMOTIV: Glukosekurve ═════════════════════════════
   Eine feine Goldlinie zieht sich durch die Seite — der Verlauf,
   den ein Sensor aufzeichnet. Zeichnet sich beim Scrollen selbst.
   Bewusst zurückhaltend: Es ist ein Motiv, kein Schmuck. */
.kurve{display:block;width:100%;height:auto;overflow:visible;pointer-events:none}
.kurve path{
  fill:none;stroke:var(--gold);
  stroke-linecap:round;stroke-linejoin:round;
  /* KEIN vector-effect:non-scaling-stroke — das rechnet die Strichlänge im
     Bildschirmraum, die Zeichenanimation aber im Kurvenraum. Ergebnis war
     eine Linie, die mittendrin abbrach. Stattdessen skaliert der Strich mit
     und wird auf kleinen Geräten über die Breite unten nachgeführt. */
  stroke-width:1.7;
}
/* Alle Kurven haben viewBox-Breite 1200 — daher lässt sich die Strichstärke
   über die Anzeigebreite hochrechnen, damit sie überall gleich fein wirkt. */
@media(max-width:1100px){.kurve path{stroke-width:2.2}}
@media(max-width:900px){.kurve path{stroke-width:3}}
@media(max-width:600px){.kurve path{stroke-width:4.4}}

/* Auf dunklem Grund etwas heller */
.brakes .kurve path,.feature .kurve path{stroke:var(--gold-light)}

/* Die Kurve zeichnet sich immer wieder von vorn: von links aufbauen,
   kurz stehen lassen, nach links hinauslaufen — und von Neuem.
   Weil Anfang und Ende beide unsichtbar sind, ist der Übergang nahtlos. */
html.js .kurve.rv{opacity:1;transform:none}
html.js .kurve.in .linie{
  animation:aufzeichnen var(--takt,11s) cubic-bezier(.36,.06,.24,1) infinite;
}
@keyframes aufzeichnen{
  0%   {stroke-dashoffset:var(--laenge,1400)}   /* leer */
  38%  {stroke-dashoffset:0}                    /* fertig gezeichnet */
  66%  {stroke-dashoffset:0}                    /* steht einen Moment */
  100% {stroke-dashoffset:calc(var(--laenge,1400) * -1)}  /* läuft links hinaus */
}

@media(prefers-reduced-motion:reduce){
  html.js .kurve.in .linie{animation:none;stroke-dasharray:none !important;stroke-dashoffset:0 !important}
}

/* ══ DER MOMENT ══════════════════════════════════════════
   Eine Fläche, die nichts verkauft. Nur ein Satz.
   Dunkelblau statt Creme: auf hellem Grund verschwand der Satz zwischen
   den übrigen Abschnitten. Er soll ein Bruch sein, keine weitere Seite. */
.moment{
  min-height:60svh;display:flex;align-items:center;
  background:var(--navy);color:var(--cream);
  padding-block:clamp(4.5rem,11vw,8rem);position:relative;overflow:hidden;
}
.moment::before{
  content:"";position:absolute;top:-25%;left:-15%;
  width:70vw;height:70vw;max-width:900px;max-height:900px;
  background:radial-gradient(circle,rgba(201,164,117,.13) 0%,rgba(201,164,117,0) 66%);
  pointer-events:none;
}
.moment .wrap{width:100%;position:relative}
.moment p{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(3.4rem,11.5vw,6.6rem);line-height:1.02;
  letter-spacing:-.02em;color:var(--cream);margin:0;max-width:15ch;
  text-wrap:balance;
}
/* Kurzer Goldstrich als Anker — sonst schwebt der Satz frei im Raum */
.moment p::before{
  content:"";display:block;width:56px;height:2px;background:var(--gold);
  margin-bottom:clamp(1.6rem,5vw,2.6rem);
}
.moment .akzent{color:var(--gold-light);font-style:italic}