/* teamsarah.de — Sarah Scholz
   Brand: Offwhite #F7F7F5 · Dunkel #0F0D10 · Pink #DD2368 · Gold #D8BC82
   Konfetti-Regel 90/10: 90% ruhig, 10% Pink. */

:root{
  /* Offwhite statt Creme (22.08.2026) — macht die Schwarz-Weiss-Abfolge
     klarer. Die Variablennamen bleiben, damit nichts anderes bricht. */
  --creme:#F7F7F5;        /* Offwhite, Hauptflaeche hell */
  --creme-warm:#EEEDEA;   /* eine Spur tiefer, fuer den Wechsel */
  --papier:#FFFFFF;       /* reines Weiss fuer Kaesten */
  --dunkel:#0F0D10;
  --dunkel-weich:#1a161b;
  --grau:#6b6870;
  --grau-hell:#c6c3c9;
  --pink:#DD2368;
  --pink-dunkel:#8a3a5a;
  --gold:#D8BC82;
  --gold-dunkel:#A9803A;

  --serif:'Instrument Serif',Georgia,serif;   /* 22.08.: war Cormorant Garamond */
  --serif-alt:'Playfair Display',Georgia,serif;
  --sans:'Mulish',system-ui,-apple-system,sans-serif;
  --jost:'Jost',system-ui,sans-serif;

  --max:1120px;
  --schmal:720px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--creme);
  color:var(--dunkel);
  font-family:var(--sans);
  font-size:18px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--pink);text-decoration:none}
a:hover{text-decoration:underline}

.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
.schmal{max-width:var(--schmal);margin:0 auto}

/* Instrument Serif hat keinen Fettschnitt. Ein font-weight:600 wuerde der
   Browser selbst verfetten (faux bold) — das sieht matschig aus. Also 400. */
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.1;margin:0 0 .48em}
h1{font-size:clamp(2.6rem,6.5vw,4.6rem);letter-spacing:-.01em}
h2{font-size:clamp(2rem,4.4vw,3.1rem)}
h3{font-size:clamp(1.3rem,2.4vw,1.7rem)}
p{margin:0 0 1.1em}

.kicker{
  font-family:var(--jost);
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:.72rem;
  font-weight:500;
  color:var(--pink);
  margin:0 0 1.4em;
}
.kicker--hell{color:var(--gold)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-block;
  background:var(--pink);
  color:#fff;
  font-family:var(--jost);
  font-weight:500;
  font-size:1rem;
  letter-spacing:.02em;
  padding:17px 34px;
  border:0;
  border-radius:2px;
  cursor:pointer;
  transition:background .18s ease,transform .18s ease;
  text-align:center;
}
.btn:hover{background:#b81a53;text-decoration:none;transform:translateY(-1px)}
.btn--gross{padding:20px 44px;font-size:1.08rem}
.btn--linie{
  background:transparent;color:var(--dunkel);
  border:1px solid var(--dunkel);
}
.btn--linie:hover{background:var(--dunkel);color:var(--creme)}

/* ---------- Kopf ---------- */
.kopf{
  position:sticky;top:0;z-index:50;
  background:rgba(247,247,245,.94);
  backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(15,13,16,.07);
}
.kopf__inner{display:flex;align-items:center;justify-content:space-between;gap:24px;height:72px}
.logo{font-family:var(--serif);font-size:1.5rem;font-weight:400;color:var(--dunkel);letter-spacing:-.01em}
.logo:hover{text-decoration:none;color:var(--pink)}
.logo span{color:var(--pink)}
.nav{display:flex;align-items:center;gap:30px}
.nav a{
  font-family:var(--jost);font-size:.92rem;color:var(--dunkel);
  letter-spacing:.02em;
}
.nav a:hover{color:var(--pink);text-decoration:none}
.nav .btn{color:#fff;padding:11px 22px;font-size:.88rem}
.nav__toggle{display:none;background:none;border:0;font-size:1.6rem;cursor:pointer;color:var(--dunkel);line-height:1}

/* ---------- Hero ---------- */
.hero{background:var(--dunkel);color:var(--creme);overflow:hidden}
.hero__grid{
  display:grid;grid-template-columns:1.05fr .95fr;
  align-items:center;gap:56px;
  padding:84px 24px;
}
.hero h1{color:var(--creme)}
.hero h1 em{font-style:italic;color:var(--pink)}
.hero__text p{color:var(--grau-hell);font-size:1.16rem;max-width:34em}
.hero__cta{margin-top:34px;display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.hero__mini{
  font-family:var(--jost);font-size:.82rem;color:rgba(199,189,196,.8);
  margin-top:18px;letter-spacing:.02em;
}
.hero__bild{position:relative}
.hero__bild img{border-radius:3px}

/* ---------- Track-Record-Leiste ---------- */
.beleg{background:var(--dunkel-weich);color:var(--grau-hell);padding:34px 0;border-top:1px solid rgba(255,255,255,.06)}
.beleg__zeile{
  font-family:var(--jost);text-align:center;font-size:.78rem;
  text-transform:uppercase;letter-spacing:.15em;color:var(--gold);margin-bottom:16px;
}
.beleg__namen{
  display:flex;flex-wrap:wrap;justify-content:center;gap:14px 38px;
  font-family:var(--serif);font-size:1.28rem;color:var(--creme);
}
.beleg__namen span{opacity:.86}

/* ---------- Abschnitte ---------- */
.abschnitt{padding:96px 0}
.abschnitt--creme{background:var(--creme)}
.abschnitt--warm{background:var(--creme-warm)}
.abschnitt--papier{background:var(--papier)}
.abschnitt--dunkel{background:var(--dunkel);color:var(--creme)}
.abschnitt--dunkel h2{color:var(--creme)}
.abschnitt--dunkel p{color:var(--grau-hell)}

.zentriert{text-align:center}
.zentriert p{margin-left:auto;margin-right:auto}

/* ---------- Kennst du das ---------- */
.karten{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:52px}
.karte{
  background:var(--papier);
  border:1px solid rgba(15,13,16,.08);
  border-top:3px solid var(--pink);
  padding:34px 30px;
  border-radius:2px;
}
.karte p{margin:0;font-size:1.05rem}
.karte__nr{
  font-family:var(--serif);font-size:2.2rem;color:var(--gold-dunkel);
  line-height:1;display:block;margin-bottom:14px;
}
.merksatz{
  font-family:var(--serif);
  font-size:clamp(1.5rem,3vw,2.1rem);
  line-height:1.35;
  text-align:center;
  max-width:20em;margin:60px auto 0;
}
.merksatz em{font-style:italic;color:var(--pink)}

/* ---------- Über mich ---------- */
.ueber__grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:64px;align-items:center}
.ueber__bild img{border-radius:3px}
.signatur{
  font-family:var(--serif);font-style:italic;font-size:1.35rem;
  color:var(--pink);margin-top:8px;
}

/* ---------- Zahlen ---------- */
.zahlen{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;text-align:center}
/* Die Werte sind nicht alle kurze Zahlen — "Mehrfache Millionen" braucht
   Platz und darf umbrechen, sonst sprengt es die Spalte. */
.zahl{font-family:var(--serif);font-size:clamp(1.9rem,3.4vw,2.7rem);
  color:var(--gold);line-height:1.08;display:block;text-wrap:balance}
.zahl__text{font-family:var(--jost);font-size:.92rem;letter-spacing:.05em;color:var(--grau-hell);margin-top:12px;display:block}

/* ---------- Stimmen ---------- */
.stimmen{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;margin-top:52px}
.stimme{
  background:var(--papier);
  padding:34px 32px;
  border-left:3px solid var(--pink);
  border-radius:2px;
}
.stimme blockquote{
  margin:0 0 16px;font-family:var(--serif);font-size:1.32rem;line-height:1.45;font-style:italic;
}
.stimme cite{font-family:var(--jost);font-size:.84rem;font-style:normal;color:var(--grau);letter-spacing:.04em}

/* ---------- Freebie ---------- */
.freebie{background:var(--dunkel);color:var(--creme)}
.freebie h2{color:var(--creme)}
.freebie h2 em{font-style:italic;color:var(--pink)}
.freebie__box{max-width:600px;margin:0 auto}
.liste{list-style:none;padding:0;margin:0 0 36px;text-align:left;max-width:26em;margin-left:auto;margin-right:auto}
.liste li{position:relative;padding-left:30px;margin-bottom:13px;color:var(--grau-hell)}
.liste li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:9px;height:9px;background:var(--pink);border-radius:50%;
}
.formular{display:flex;flex-direction:column;gap:12px;max-width:440px;margin:0 auto}
.formular input{
  font-family:var(--sans);font-size:1rem;
  padding:16px 18px;border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.05);color:var(--creme);border-radius:2px;
}
.formular input::placeholder{color:rgba(199,189,196,.6)}
.formular input:focus{outline:none;border-color:var(--pink);background:rgba(255,255,255,.09)}
.formular .btn{margin-top:6px}
.kleingedruckt{font-size:.8rem;color:rgba(199,189,196,.72);margin:18px auto 0;max-width:36em;line-height:1.6}
.kleingedruckt a{color:var(--grau-hell);text-decoration:underline}
.meldung{margin-top:16px;font-size:.95rem;min-height:1.4em}
.meldung--ok{color:var(--gold)}
.meldung--fehler{color:#ff8fa8}

/* ---------- Blog-Teaser ---------- */
.blog__box{
  border:1px solid rgba(15,13,16,.12);
  padding:56px 44px;text-align:center;border-radius:2px;
  background:var(--papier);
}

/* ---------- Fuß ---------- */
.fuss{background:var(--dunkel);color:rgba(199,189,196,.65);padding:64px 0 40px;border-top:1px solid rgba(255,255,255,.07)}
.fuss__grid{display:flex;flex-wrap:wrap;justify-content:space-between;gap:36px;align-items:flex-start}
.fuss__logo{font-family:var(--serif);font-size:1.6rem;font-weight:400;color:var(--creme)}
.fuss__logo span{color:var(--pink)}
.fuss__spruch{font-family:var(--serif);font-style:italic;color:var(--gold);margin-top:6px;font-size:1.08rem}
.fuss__links{display:flex;flex-wrap:wrap;gap:12px 26px;font-family:var(--jost);font-size:.9rem}
.fuss__links a{color:var(--grau-hell)}
.fuss__unten{
  margin-top:44px;padding-top:22px;border-top:1px solid rgba(255,255,255,.07);
  font-size:.82rem;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;
}

/* ---------- Rechtstexte ---------- */
.recht{padding:72px 0 96px}
.recht h1{font-size:clamp(2rem,4.4vw,3rem);margin-bottom:1em}
.recht h2{font-size:1.5rem;margin-top:2em}
.recht h3{font-size:1.15rem;font-family:var(--sans);font-weight:700;margin-top:1.6em}
.recht p,.recht li{font-size:.98rem;line-height:1.75}

/* ---------- Mobil ---------- */
@media (max-width:900px){
  .hero__grid{grid-template-columns:1fr;gap:40px;padding:48px 24px 60px}
  .hero__bild{order:-1;max-width:420px}
  .ueber__grid{grid-template-columns:1fr;gap:36px}
  .ueber__bild{max-width:360px}
  .karten,.stimmen{grid-template-columns:1fr}
  .zahlen{grid-template-columns:1fr;gap:34px}
  .abschnitt{padding:68px 0}
  .nav{
    display:none;position:absolute;top:72px;left:0;right:0;
    background:var(--creme);flex-direction:column;align-items:stretch;
    gap:0;padding:12px 24px 22px;
    border-bottom:1px solid rgba(15,13,16,.1);
  }
  .nav.offen{display:flex}
  .nav a{padding:13px 0;border-bottom:1px solid rgba(15,13,16,.07)}
  .nav .btn{margin-top:14px;border-bottom:0}
  .nav__toggle{display:block}
  .blog__box{padding:40px 26px}
  body{font-size:17px}
}

/* ================= BLOG ================= */

/* ---------- Übersicht ---------- */
.liste__blog{display:flex;flex-direction:column;gap:4px}
.liste__eintrag{
  display:block;padding:34px 0;color:var(--dunkel);
  border-bottom:1px solid rgba(15,13,16,.12);
}
.liste__eintrag:first-child{border-top:1px solid rgba(15,13,16,.12)}
.liste__eintrag:hover{text-decoration:none}
.liste__eintrag:hover .liste__titel{color:var(--pink)}
.liste__datum{
  font-family:var(--jost);font-size:.76rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--gold-dunkel);display:block;margin-bottom:10px;
}
.liste__titel{
  font-family:var(--serif);font-size:clamp(1.5rem,3.2vw,2.1rem);
  line-height:1.2;margin:0 0 10px;transition:color .18s ease;
}
.liste__text{margin:0 0 12px;color:var(--grau);font-size:1rem;max-width:40em}
.liste__mehr{font-family:var(--jost);font-size:.88rem;color:var(--pink)}

/* ---------- Artikel ---------- */
.artikel{padding:64px 24px 76px}
.artikel__datum{
  font-family:var(--jost);font-size:.8rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--grau);margin-bottom:18px;
}
.artikel__datum a{color:var(--grau)}
.artikel h1{font-size:clamp(2.1rem,4.8vw,3.3rem);margin-bottom:.6em}
.artikel h2{
  font-size:clamp(1.6rem,3.2vw,2.15rem);
  margin-top:2em;margin-bottom:.5em;scroll-margin-top:90px;
}
.artikel h3{
  font-family:var(--sans);font-weight:700;font-size:1.12rem;
  margin-top:1.9em;margin-bottom:.5em;line-height:1.4;
}
.artikel p{font-size:1.08rem;line-height:1.78}
.artikel hr{
  border:0;height:1px;background:rgba(15,13,16,.12);
  margin:2.8em auto;width:100%;max-width:220px;
}
.artikel ul{padding-left:0;list-style:none;margin:0 0 1.4em}
.artikel li{position:relative;padding-left:28px;margin-bottom:11px;font-size:1.06rem;line-height:1.7}
.artikel li::before{
  content:"";position:absolute;left:2px;top:.66em;
  width:8px;height:8px;background:var(--pink);border-radius:50%;
}
.artikel blockquote{
  margin:2em 0;padding:4px 0 4px 26px;border-left:3px solid var(--pink);
}
.artikel blockquote p{
  font-family:var(--serif);font-style:italic;
  font-size:1.35rem;line-height:1.45;margin:0;
}

/* ---------- Kurzfassung oben (auch für KI-Suchen) ---------- */
.kurzfassung{
  background:var(--creme-warm);
  border-left:3px solid var(--gold-dunkel);
  padding:26px 28px;margin:0 0 2.4em;border-radius:2px;
}
.kurzfassung__titel{
  font-family:var(--jost);font-size:.74rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold-dunkel);margin:0 0 10px;
}
.kurzfassung p:last-child{margin:0;font-size:1.06rem}

/* ---------- Häufige Fragen ---------- */
.fragen{
  margin-top:3.2em;padding-top:2.2em;
  border-top:1px solid rgba(15,13,16,.12);
}
.fragen h3{margin-top:1.7em}

/* ---------- CTA im Artikel ---------- */
.artikel__cta{
  background:var(--dunkel);color:var(--creme);
  padding:48px 40px;margin:3.6em 0 0;border-radius:2px;text-align:center;
}
.artikel__cta h2{color:var(--creme);margin-top:0;font-size:clamp(1.7rem,3.4vw,2.3rem)}
.artikel__cta p{color:var(--grau-hell)}
.artikel__cta p:last-child{margin-bottom:0;margin-top:26px}

/* ---------- Weiterlesen ---------- */
.weiter{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:26px}
.weiter--drei{grid-template-columns:repeat(3,1fr);text-align:left}
.weiter--drei .weiter__karte{padding:22px 20px}
.weiter--drei .weiter__titel{font-size:1.06rem}
.weiter--drei .weiter__datum{font-size:.64rem;letter-spacing:.08em;white-space:nowrap}
.weiter__karte{
  display:block;background:var(--papier);padding:26px 24px;
  border:1px solid rgba(15,13,16,.1);border-top:3px solid var(--pink);
  border-radius:2px;color:var(--dunkel);
}
.weiter__karte:hover{text-decoration:none}
.weiter__karte:hover .weiter__titel{color:var(--pink)}
.weiter__datum{
  font-family:var(--jost);font-size:.72rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--gold-dunkel);display:block;margin-bottom:8px;
}
.weiter__titel{
  font-family:var(--serif);font-size:1.24rem;line-height:1.25;
  display:block;transition:color .18s ease;
}

@media (max-width:900px){
  .artikel{padding:48px 24px 60px}
  .artikel__cta{padding:38px 26px}
  .weiter,
  .weiter--drei{grid-template-columns:1fr}
  .kurzfassung{padding:22px 22px}
}

/* ============================================================
   DESIGN-BAUSTEINE (übernommen aus Vorschlag Fassung 2, 22.08.2026)
   Liniengeometrie, Papier-Korn, Gold-Handschrift, Zeitungs-Abschnitt.
   ============================================================ */

/* ---------- Träger für Hintergrundgrafiken ---------- */
.buehne{position:relative;overflow:hidden;isolation:isolate}
.grafik,.korn{
  position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;
}
.grafik{z-index:0}
.korn{z-index:1}
.buehne > *:not(.grafik):not(.korn):not(.geist){position:relative;z-index:3}

.grafik--netz{color:var(--gold);opacity:.5}
.grafik--metatron{
  color:var(--gold);opacity:.34;
  inset:auto -150px -230px auto;width:640px;height:640px;
}
.hell .grafik--netz,.hell .grafik--metatron{color:var(--gold-dunkel);opacity:.28}
.mittig .grafik--metatron{
  inset:50% auto auto 50%;transform:translate(-50%,-50%);
  width:520px;height:520px;opacity:.2;
}

/* ---------- Gold mit echtem Verlauf ---------- */
.gold{
  color:var(--gold);                     /* Rückfall für sehr alte Browser */
  background-image:linear-gradient(101deg,
    #8a6a2f 0%, #c9a55a 16%, #f4e6bb 33%, #d8bc82 48%,
    #fbf0cd 62%, #cba960 78%, #8f6f33 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  text-shadow:0 1px 0 rgba(0,0,0,.28);
}
/* Auf Hell deutlich dunkleres Gold — die helle Mischung war auf Offwhite
   zu kontrastarm, und die Zeile traegt echten Inhalt, nicht nur Deko. */
.hell .gold,.abschnitt--creme .gold,.abschnitt--papier .gold,.abschnitt--warm .gold{
  background-image:linear-gradient(101deg,
    #5f4315 0%, #8a6a24 15%, #b8964a 32%, #8f6f28 47%,
    #c2a45c 61%, #866620 77%, #5f4315 100%);
  text-shadow:none;
}

/* ---------- Handschrift ---------- */
/* Akzentzeile: Playfair Display kursiv (Sarahs Wunsch 22.08.) — keine
   Handschrift mehr, sondern die geschwungene Kursive aus ihren Carousels. */
.hs{
  font-family:var(--serif-alt);
  font-style:italic;font-weight:400;
  font-size:clamp(2.1rem,4.8vw,3.3rem);
  line-height:1.14;margin:0 0 .04em;display:block;
  letter-spacing:-.005em;
}
.hs--klein{font-size:clamp(1.6rem,3.2vw,2.2rem)}

/* ---------- Zeitungs-Abschnitt ---------- */
.zeitung{
  background:var(--papier);color:#17151a;
  position:relative;overflow:hidden;isolation:isolate;
  padding:82px 40px;
}
.zeitung .korn{mix-blend-mode:multiply}
.geist{
  position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;
  transform:scaleX(-1);opacity:.11;
}
.geist p{
  font-family:'Playfair Display',Georgia,serif;font-size:15px;line-height:1.45;
  color:#17151a;margin:0;padding:26px 30px;text-align:justify;
  column-count:2;column-gap:34px;hyphens:auto;
}
.zeitung > *:not(.geist):not(.korn){position:relative;z-index:2}
.zeitung__satz{
  font-family:'Playfair Display',Georgia,serif;font-weight:700;
  font-size:clamp(1.9rem,4.4vw,3.2rem);line-height:1.12;
  letter-spacing:-.015em;margin:0 0 .45em;color:#17151a;
}
.zeitung__satz em{font-style:italic;font-weight:400}
.zeitung__unter{
  font-family:var(--jost);font-weight:500;font-size:1.06rem;
  color:#4a4650;margin:0;max-width:34em;
}
/* Marker als Hintergrund-Streifen statt Pseudo-Element: nur so laeuft er
   sauber ueber einen Zeilenumbruch mit. */
.marker{
  display:inline;
  padding:0 .1em;
  background-image:linear-gradient(#F4A6C6,#F4A6C6);
  background-repeat:no-repeat;
  background-size:100% 64%;
  background-position:0 78%;
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
}

/* ---------- Freigestelltes Hero-Foto ---------- */
.hero__bild--frei img{
  border-radius:0;
  filter:drop-shadow(0 26px 46px rgba(0,0,0,.5));
}

@media (max-width:900px){
  .zeitung{padding:56px 24px}
  .geist p{column-count:1}
  .grafik--metatron{width:440px;height:440px;inset:auto -110px -170px auto}
}

/* ============================================================
   NACHBESSERUNG 22.08.2026
   Kein flaches Schwarz mehr, kürzerer Hero, Geometrie als Fläche.
   ============================================================ */

/* ---------- Dunkle Flächen: leichter Verlauf statt einfarbig ----------
   Drei sehr blasse Lichter (Pink, Gold, kühles Stahlblau) über einem
   dunklen Verlauf. Kein Lila, kein Orange. Alles unter 20 % Deckkraft,
   damit es schimmert statt zu leuchten. */
.hero,
.abschnitt--dunkel,
.freebie,
.artikel__cta{
  background:
    radial-gradient(78% 62% at 10% 6%,   rgba(221,35,104,.16) 0%, rgba(221,35,104,0) 58%),
    radial-gradient(66% 58% at 90% 94%,  rgba(216,188,130,.12) 0%, rgba(216,188,130,0) 60%),
    radial-gradient(86% 76% at 72% 22%,  rgba(58,74,96,.20)   0%, rgba(58,74,96,0)   64%),
    linear-gradient(166deg, #16131b 0%, #0D0B10 48%, #110E15 100%);
}
.beleg{
  background:
    radial-gradient(60% 90% at 50% 0%, rgba(216,188,130,.07) 0%, rgba(216,188,130,0) 70%),
    #131017;
}

/* Feines Korn über die dunklen Flächen — verhindert Streifenbildung
   im Verlauf und nimmt dem Schwarz das Digitale. */
.hero::after,
.abschnitt--dunkel::after,
.freebie::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  opacity:.5;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'>\
<filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3'/>\
<feColorMatrix type='saturate' values='0'/></filter>\
<rect width='140' height='140' filter='url(%23n)' opacity='0.16'/></svg>");
}

/* ---------- Hero: deutlich kompakter ---------- */
.hero__grid{padding:52px 24px 58px;gap:40px}
.hero .kicker{margin-bottom:1em}
.hero h1{margin-bottom:.34em}
.hero__text p{font-size:1.1rem;max-width:31em}
.hero__cta{margin-top:26px}
.hero__mini{margin-top:14px}
.hero__bild--frei img{
  max-height:72vh;width:auto;margin:0 0 0 auto;
}
/* Das Foto wurde von der Spaltenbreite begrenzt, nicht von der Hoehe —
   deshalb bringt max-height allein nichts. Bildspalte kriegt mehr Anteil
   und darf ein Stueck ueber den Rand hinausragen. */
/* WICHTIG eingegrenzt: diese Regel stand vorher hinter der Handy-Regel
   und hat sie ueberschrieben — dadurch blieb das Layout auch am Handy
   zweispaltig und das Foto wurde winzig. */
@media (min-width:901px){
  .hero__grid{grid-template-columns:1fr 1.38fr;gap:34px}
  .hero__bild--frei{margin-right:-44px}
}

/* ---------- Geometrie als Fläche, nicht als Fleck in der Ecke ---------- */
.grafik--metatron{
  color:var(--gold);opacity:.2;
  inset:50% auto auto 50%;
  transform:translate(-50%,-50%);
  width:min(1180px,132%);height:auto;aspect-ratio:1;
}
.hell .grafik--metatron{color:var(--gold-dunkel);opacity:.15}

@media (max-width:900px){
  .hero__grid{padding:40px 24px 48px;gap:30px}
  .hero__bild--frei img{max-height:44vh;margin:0 auto}
  .grafik--metatron{width:150%}
}

/* ---------- Einwände ---------- */
.einwand{
  padding:26px 0 24px;
  border-bottom:1px solid rgba(15,13,16,.12);
}
.einwand:first-of-type{border-top:1px solid rgba(15,13,16,.12);margin-top:28px}
.einwand__frage{
  font-family:var(--serif);font-size:clamp(1.35rem,2.6vw,1.75rem);
  line-height:1.25;margin:0 0 .5em;color:var(--dunkel);
}
.einwand p:last-child{margin:0;color:var(--grau);font-size:1.02rem;max-width:40em}

/* ---------- Drei Schritte ("So sieht das aus") ---------- */
.schritt{
  display:grid;grid-template-columns:auto 1fr;gap:26px;
  padding:28px 0;border-bottom:1px solid rgba(15,13,16,.12);
  align-items:start;
}
.schritt:first-of-type{border-top:1px solid rgba(15,13,16,.12);margin-top:28px}
.schritt__nr{
  font-family:var(--serif);font-size:2.2rem;line-height:1;
  color:var(--gold-dunkel);
}
.schritt h3{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(1.3rem,2.4vw,1.7rem);margin:0 0 .35em;line-height:1.2;
}
.schritt p{margin:0;color:var(--grau);font-size:1.02rem;max-width:38em}
.merkzeile{
  font-family:var(--serif);font-size:clamp(1.3rem,2.6vw,1.8rem);
  line-height:1.35;text-align:center;margin:44px auto 0;max-width:24em;
}
.merkzeile strong{font-weight:400;color:var(--pink)}
@media (max-width:600px){
  .schritt{grid-template-columns:1fr;gap:8px}
  .schritt__nr{font-size:1.6rem}
}

/* ---------- Lange Über-mich-Fassung ---------- */
.lang p{font-size:1.08rem;line-height:1.78;max-width:38em}
.lang h2.lang__h2{
  font-size:clamp(1.7rem,3.4vw,2.4rem);
  margin-top:1.9em;margin-bottom:.5em;
}
.lang h2.lang__h2:first-child{margin-top:0}
.lang strong{font-weight:700}
.lang em{font-style:italic}
.lang blockquote{
  margin:1.8em 0;padding:4px 0 4px 24px;border-left:3px solid var(--pink);
}
.lang blockquote p{
  font-family:var(--serif-alt);font-style:italic;
  font-size:1.28rem;line-height:1.45;margin:0 0 .3em;
}
.lang__strich{
  border:0;border-top:1px solid rgba(15,13,16,.14);
  margin:3em 0 2.6em;
}
/* Der Hero-Block der langen Fassung steht schon im Kopf der Seite */
.lang > p:first-child{font-size:1.16rem}
@media (max-width:900px){
  .lang p{font-size:1.04rem}
}

/* ---------- Über mich: Kapitel auf dunklem Grund ---------- */
.abschnitt--dunkel .lang p{color:var(--grau-hell)}
.abschnitt--dunkel .lang strong{color:var(--creme)}
.abschnitt--dunkel .lang h2.lang__h2{color:var(--creme)}
.abschnitt--dunkel .lang blockquote{border-left-color:var(--pink)}
.abschnitt--dunkel .lang blockquote p{color:var(--creme)}
.abschnitt--dunkel .lang__strich{border-top-color:rgba(255,255,255,.14)}
.lang__foto{
  width:100%;max-width:420px;border-radius:2px;margin:2.4em 0 0;
  filter:drop-shadow(0 18px 34px rgba(0,0,0,.35));
}

/* Presse-Block am Ende der Über-mich-Seite: sachlicher, kleiner */
.lang--presse .lang p{font-size:.98rem;color:var(--grau)}
.lang--presse .lang h2.lang__h2{font-size:clamp(1.3rem,2.4vw,1.7rem)}

/* Aufzählungen in den langen Seiten — wie im Blog, mit Pink-Punkt */
.lang ul{list-style:none;padding-left:0;margin:0 0 1.4em}
.lang li{position:relative;padding-left:28px;margin-bottom:11px;
  font-size:1.06rem;line-height:1.7;max-width:38em}
.lang li::before{content:"";position:absolute;left:2px;top:.66em;
  width:8px;height:8px;background:var(--pink);border-radius:50%}
.abschnitt--dunkel .lang li{color:var(--grau-hell)}
/* Der Link am Ende eines Angebots-Kapitels wird ein Knopf */
.lang p > a[href^="https://wa.me"]{
  display:inline-block;background:var(--pink);color:#fff;
  font-family:var(--jost);font-size:1rem;letter-spacing:.02em;
  padding:16px 30px;border-radius:2px;margin-top:.6em;
  transition:background .18s ease;
}
.lang p > a[href^="https://wa.me"]:hover{background:#b81a53;text-decoration:none}


/* ============================================================
   HELLER LOOK — 31.08.2026
   Warmes Creme statt Fast-Schwarz, Aubergine statt Schwarz,
   Regenbogen-Verlauf (Beere -> Rose -> Bernstein) auf den
   Akzentzeilen. Uebernommen vom Taskade-Entwurf.

   Alles steht in EINEM Block am Dateiende. Diesen Block
   loeschen = der alte dunkle Look ist zurueck.
   ============================================================ */

:root{
  /* Flaechen: warm statt kuehl */
  --creme:#FAF7F5;        /* war #F7F7F5 Offwhite */
  --creme-warm:#F4EDEA;
  --rose:#EDDEE3;         /* NEU — Rose fuer die Verlaufsflaechen */
  --papier:#FFFFFF;

  /* Schrift: Aubergine statt Fast-Schwarz. Weicher fuer die Augen,
     und es nimmt der Seite das Technische. */
  --dunkel:#36293D;       /* war #0F0D10 */
  --dunkel-weich:#4a3a52;
  --grau:#77677E;
  /* --grau-hell hiess so, weil es auf DUNKLEM Grund stand. Die Flaechen
     sind jetzt hell, also muss der Ton mitwandern — sonst waere der Text
     unsichtbar. Der Name bleibt, damit nichts anderes bricht. */
  --grau-hell:#6f6376;

  /* Pink bleibt Sarahs #DD2368. Der Taskade-Beere-Ton war #D22D64 —
     praktisch derselbe, also kein Grund zu wechseln. */
  --pink:#DD2368;
  --rosa:#FB7185;         /* NEU — mittlerer Stopp */
  --bernstein:#FBBF24;    /* NEU — dritter Stopp */
}

/* ---------- Der Regenbogen ---------- */
/* Grosse Akzentzeilen: drei Stopps. Das Bernstein liegt bewusst ganz
   hinten, damit es nur die letzten Buchstaben faerbt — dort traegt es
   keinen Inhalt mehr und darf hell sein. */
.regenbogen,
.hs.gold{
  color:var(--pink);                    /* Rueckfall fuer alte Browser */
  background-image:linear-gradient(100deg,
    #DD2368 0%, #EE4A78 26%, #FB7185 54%, #F59E0B 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  text-shadow:none;
}
/* Kleine Zeilen: nur zwei Stopps. Bei kleiner Schrift wuerde das
   Bernstein auf Creme zu blass. */
.hs--klein.gold,
.regenbogen--klein{
  background-image:linear-gradient(100deg, #DD2368 0%, #F0517F 46%, #FB7185 100%);
}
/* Die alten Gold-Sonderregeln fuer helle Abschnitte ausser Kraft setzen —
   sonst schlagen sie den Regenbogen wieder tot. */
.hell .gold,
.abschnitt--creme .gold,
.abschnitt--papier .gold,
.abschnitt--warm .gold{
  background-image:linear-gradient(100deg,
    #DD2368 0%, #EE4A78 26%, #FB7185 54%, #F59E0B 100%);
  text-shadow:none;
}
.hell .hs--klein.gold,
.abschnitt--creme .hs--klein.gold,
.abschnitt--papier .hs--klein.gold,
.abschnitt--warm .hs--klein.gold{
  background-image:linear-gradient(100deg, #DD2368 0%, #F0517F 46%, #FB7185 100%);
}

/* ---------- Grosse Flaechen: dunkel wird hell ---------- */
.hero{
  background:
    radial-gradient(70% 62% at 10% 4%,  rgba(221,35,104,.10) 0%, rgba(221,35,104,0) 60%),
    radial-gradient(62% 56% at 92% 96%, rgba(251,191,36,.13) 0%, rgba(251,191,36,0) 62%),
    linear-gradient(168deg, #FBF2ED 0%, #FAF7F5 44%, #F1E3E7 100%);
  color:var(--dunkel);
}
.abschnitt--dunkel,
.freebie,
.artikel__cta{
  background:
    radial-gradient(64% 70% at 88% 8%, rgba(221,35,104,.06) 0%, rgba(221,35,104,0) 62%),
    linear-gradient(170deg, #FCF5F2 0%, #F6EAEC 100%);
  color:var(--dunkel);
}
.beleg{
  background:linear-gradient(180deg, #F3E7E9 0%, #EDDEE3 100%);
  color:var(--grau);
  border-top:1px solid rgba(54,41,61,.07);
}

/* Das Korn war dafuer da, dem Schwarz das Digitale zu nehmen.
   Auf Creme sieht es nur schmutzig aus. */
.hero::after,
.abschnitt--dunkel::after,
.freebie::after{display:none}

/* ---------- Text, der vorher hell auf dunkel stand ---------- */
.hero h1,
.abschnitt--dunkel h2,
.freebie h2,
.artikel__cta h2,
.abschnitt--dunkel .lang h2.lang__h2{color:var(--dunkel)}

.hero h1 em,
.freebie h2 em{color:var(--pink)}

.hero__text p,
.abschnitt--dunkel p,
.freebie p,
.artikel__cta p,
.abschnitt--dunkel .lang p,
.abschnitt--dunkel .lang li,
.liste li{color:var(--grau-hell)}

.abschnitt--dunkel .lang strong{color:var(--dunkel)}
.abschnitt--dunkel .lang blockquote p{color:var(--dunkel)}
.abschnitt--dunkel .lang__strich{border-top-color:rgba(54,41,61,.14)}

.hero__mini{color:rgba(54,41,61,.62)}
.kicker--hell{color:var(--gold-dunkel)}

.beleg__zeile{color:var(--gold-dunkel)}
.beleg__namen{color:var(--dunkel)}
.zahl{color:var(--pink)}
.zahl__text{color:var(--grau)}

.kleingedruckt{color:rgba(54,41,61,.66)}
.kleingedruckt a{color:var(--grau)}
.meldung--ok{color:#0f8f68}
.meldung--fehler{color:#c02a48}

/* Formularfelder: weisse Karten statt durchscheinender Kaesten */
.formular input{
  background:#fff;
  border:1px solid rgba(54,41,61,.16);
  color:var(--dunkel);
  border-radius:12px;
}
.formular input::placeholder{color:rgba(54,41,61,.42)}
.formular input:focus{border-color:var(--pink);background:#fff}

/* ---------- Fuss ---------- */
.fuss{
  background:linear-gradient(180deg, #F1E3E7 0%, #EAD8DE 100%);
  color:rgba(54,41,61,.66);
  border-top:1px solid rgba(54,41,61,.08);
}
.fuss__logo{color:var(--dunkel)}
.fuss__spruch{color:var(--gold-dunkel)}
.fuss__links a{color:var(--grau)}
.fuss__unten{border-top-color:rgba(54,41,61,.12)}

/* ---------- Kopf ---------- */
.kopf{
  background:rgba(250,247,245,.92);
  border-bottom:1px solid rgba(54,41,61,.08);
}

/* ---------- Geometrie: Sternenhimmel wird Wasserzeichen ---------- */
/* Auf Dunkel war das Netz ein Sternenhimmel — genau das "Spacige".
   Auf Creme laeuft es als ganz blasses Muster mit, mehr nicht. */
.grafik--netz{color:var(--gold-dunkel);opacity:.16}
.grafik--metatron{color:var(--gold-dunkel);opacity:.10}
.hell .grafik--netz{color:var(--gold-dunkel);opacity:.16}
.hell .grafik--metatron{color:var(--gold-dunkel);opacity:.10}

/* ---------- Knoepfe: Pille mit Verlauf ---------- */
.btn{
  background-image:linear-gradient(100deg, #DD2368 0%, #F0517F 100%);
  background-color:var(--pink);
  border-radius:999px;
  box-shadow:0 6px 18px rgba(221,35,104,.22);
  padding:16px 34px;
}
.btn:hover{
  background-image:linear-gradient(100deg, #C41B59 0%, #DD2368 100%);
  background-color:#c41b59;
  box-shadow:0 9px 24px rgba(221,35,104,.30);
  transform:translateY(-1px);
}
.btn--linie{
  background-image:none;background-color:transparent;
  color:var(--dunkel);
  border:1px solid rgba(54,41,61,.30);
  box-shadow:none;
}
.btn--linie:hover{
  background-image:none;background-color:var(--dunkel);
  color:#fff;box-shadow:none;
}
.lang p > a[href^="https://wa.me"]{
  background-image:linear-gradient(100deg, #DD2368 0%, #F0517F 100%);
  border-radius:999px;
  box-shadow:0 6px 18px rgba(221,35,104,.22);
}

/* ---------- Kaesten: runder und weicher ---------- */
.karte,
.stimme,
.blog__box,
.weiter__karte,
.kurzfassung,
.artikel__cta{
  border-radius:18px;
}
.karte{
  border:1px solid rgba(54,41,61,.08);
  border-top:3px solid var(--pink);
  box-shadow:0 2px 14px rgba(54,41,61,.05);
}
.stimme{
  border-left:3px solid var(--pink);
  box-shadow:0 2px 14px rgba(54,41,61,.05);
}
.weiter__karte{border:1px solid rgba(54,41,61,.09);border-top:3px solid var(--pink)}
.blog__box{border:1px solid rgba(54,41,61,.10)}
.artikel__cta{padding:48px 40px}

/* Trennlinien und Punkte auf den neuen Aubergine-Ton */
.einwand,.einwand:first-of-type,
.schritt,.schritt:first-of-type,
.fragen,
.liste__eintrag,.liste__eintrag:first-child{border-color:rgba(54,41,61,.12)}

/* ---------- Freigestelltes Hero-Foto ---------- */
/* Der harte schwarze Schlagschatten kam vom dunklen Grund. Auf Creme
   braucht das Foto einen warmen, weichen Schatten. */
.hero__bild--frei img{
  filter:drop-shadow(0 22px 40px rgba(54,41,61,.20));
}
.lang__foto{filter:drop-shadow(0 16px 30px rgba(54,41,61,.16));border-radius:14px}

/* ---------- Mobil ---------- */
@media (max-width:900px){
  .nav{
    background:var(--creme);
    border-bottom:1px solid rgba(54,41,61,.10);
  }
  .nav a{border-bottom:1px solid rgba(54,41,61,.07)}
}

/* ---------- Nachjustiert 31.08.2026 ---------- */
/* Die Abschnitte im Fliesstext bleiben fast creme (oben geaendert).
   Die beiden Kauf-Momente duerfen dagegen kraeftiger Rose sein —
   sie sollen sich abheben, nicht mitschwimmen. */
.freebie,
.artikel__cta{
  background:
    radial-gradient(70% 66% at 12% 6%,  rgba(221,35,104,.10) 0%, rgba(221,35,104,0) 60%),
    radial-gradient(58% 54% at 90% 94%, rgba(251,191,36,.12) 0%, rgba(251,191,36,0) 62%),
    linear-gradient(170deg, #F8EDEB 0%, #EFDFE4 100%);
}

/* Der Fuss war genauso rosa wie der Block darueber — die Seite hoerte
   nicht auf, sie verlief sich. Jetzt ein Ton tiefer mit klarer Kante. */
.fuss{
  background:linear-gradient(180deg, #EBDBE0 0%, #E2CCD5 100%);
  border-top:1px solid rgba(54,41,61,.14);
}

/* ---------- Der Verlauf muss auf dem TEXT liegen, nicht auf der Spalte ----------
   .hs ist ein Block ueber die volle Spaltenbreite. Der Verlauf spannt sich
   ueber die Box — bei "das Konfettihirn" waren das 245px Text in einer
   580px-Box, also sah man nur die ersten 42 % vom Regenbogen und das
   Bernstein landete im Nichts. fit-content laesst die Box den Text umfassen. */
.hs.gold,
.regenbogen{
  width:fit-content;
  max-width:100%;
}
/* In zentrierten Abschnitten muss die geschrumpfte Box wieder mittig. */
.zentriert .hs.gold,
.zentriert .regenbogen{
  margin-left:auto;
  margin-right:auto;
}

/* ---------- Lesbarkeit nachgezogen ----------
   Diese vier Toene waren als helle Schrift auf Schwarz gedacht. Da reicht
   wenig Deckkraft. Auf Creme kippen sie unter den lesbaren Wert (4,5:1),
   gerade fuer Augen ueber 40. Nachgemessen und angehoben:
     Fuss-Text        3,84 -> 5,43
     Fuss-Links       3,44 -> 5,24
     Kleingedrucktes  4,13 -> 6,13
     Hero-Kleinzeile  3,85 -> 5,73                                        */
.fuss{color:rgba(54,41,61,.80)}
.fuss__links a{color:#5A4C61}
.kleingedruckt{color:rgba(54,41,61,.80)}
.kleingedruckt a{color:#5A4C61}
.hero__mini{color:rgba(54,41,61,.76)}

/* ---------- Blog-Bilder ---------- */
/* Titelbild oben im Artikel */
.artikel__bild{
  display:block;width:100%;height:auto;border-radius:14px;
  margin:34px 0 -6px;
}

/* Uebersicht: Eintraege mit Vorschaubild werden zweispaltig */
.liste__eintrag--bild{
  display:grid;grid-template-columns:300px 1fr;gap:30px;align-items:center;
}
.liste__bild{
  width:100%;height:auto;border-radius:11px;display:block;
  transition:opacity .18s ease;
}
.liste__eintrag--bild:hover .liste__bild{opacity:.88}
.liste__text-teil{display:block}

@media (max-width:720px){
  .liste__eintrag--bild{grid-template-columns:1fr;gap:16px}
  .artikel__bild{border-radius:10px;margin:24px 0 -4px}
}

/* ---------- Prompt-Box zum Kopieren (Guides) ---------- */
.prompt{
  margin:2.4rem 0;
  border:1px solid rgba(15,13,16,.12);
  border-radius:14px;
  overflow:hidden;
  background:#fff;
}
.prompt__kopf{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.85rem 1.1rem;
  background:var(--dunkel,#0F0D10);
}
.prompt__titel,.artikel .prompt__titel{
  margin:0;color:#fff;font-size:.78rem;line-height:1.35;letter-spacing:.12em;
  text-transform:uppercase;font-weight:700;font-family:var(--sans);
}
.prompt__knopf{
  flex:none;cursor:pointer;border:0;border-radius:999px;
  padding:.45rem 1.1rem;
  background:var(--pink,#DD2368);color:#fff;
  font:inherit;font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
}
.prompt__knopf:hover{filter:brightness(1.08)}
.prompt__text{
  margin:0;padding:1.3rem 1.4rem;
  white-space:pre-wrap;word-break:break-word;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.86rem;line-height:1.65;color:#25222a;
  max-height:30rem;overflow:auto;
}
@media (max-width:640px){
  .prompt__text{font-size:.8rem;padding:1rem}
  .prompt__titel,.artikel .prompt__titel{font-size:.7rem}
}

/* ============================================================
   GUIDE-SEITEN (18.09.2026)
   Aufbau nach Vorbild learnaiwithmariah.com/guides — breiter farbiger
   Kopf, riesiger Titel, kursive Unterzeile, jede Ueberschrift als
   eigenes Band, runde Schritt-Nummern, dunkle Kopier-Box.
   In Sarahs Farben: Pink-Verlauf statt Rot, Aubergine statt Schwarz.
   Kein Datum — Guides sind zum Nachschlagen.
   ============================================================ */

/* ---------- Kopf ---------- */
.g-kopf{
  background:
    radial-gradient(60% 80% at 88% 10%, rgba(251,191,36,.28) 0%, rgba(251,191,36,0) 60%),
    linear-gradient(120deg, #C81D5E 0%, #DD2368 38%, #EE4A78 72%, #FB7185 100%);
  color:#fff;text-align:center;
}
.g-kopf .grafik--netz{color:#fff;opacity:.16}
.g-kopf__inner{padding:54px 24px 74px;max-width:1040px}
.g-zurueck{margin:0 0 30px}
.g-zurueck a,
.g-autorin{
  font-family:var(--jost);font-size:.74rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:#fff;
}
.g-zurueck a:hover{text-decoration:none;opacity:.8}
.g-autorin{opacity:.92;margin:0 0 26px}
.g-autorin strong{font-weight:700}
.g-autorin a{color:#fff;margin-left:14px;white-space:nowrap}
.g-autorin a:hover{text-decoration:none;opacity:.75}
.g-kopf h1{
  color:#fff;margin:0 auto .12em;max-width:15em;
  font-size:clamp(2.7rem,7.4vw,5.6rem);line-height:.98;letter-spacing:-.015em;
}
.g-unter{
  font-family:var(--serif);font-style:italic;color:#fff;
  font-size:clamp(1.55rem,3.4vw,2.5rem);line-height:1.15;margin:0 auto .7em;max-width:22em;
}
.g-kopf__text{
  color:rgba(255,255,255,.92);font-size:1.06rem;line-height:1.65;
  max-width:38em;margin:0 auto;
}

/* ---------- Rumpf ---------- */
.artikel.g-artikel{padding:0 0 76px}
.g-kurz{padding-top:56px}
.g-kurz .kurzfassung{margin-bottom:0}
.g-abschnitt{padding:0}
.g-abschnitt--start{padding-top:48px}
.g-band{
  background:linear-gradient(170deg, #FCF1EF 0%, #F6E6EA 100%);
  border-top:1px solid rgba(54,41,61,.08);
  border-bottom:1px solid rgba(54,41,61,.08);
  margin:64px 0 40px;padding:44px 0 38px;
}
.g-abschnitt--start + .g-abschnitt .g-band{margin-top:56px}
.artikel .g-band h2{
  margin:0;font-size:clamp(2rem,4.6vw,3.2rem);line-height:1.04;
  letter-spacing:-.01em;color:var(--dunkel);
}
/* Erster Absatz eines Abschnitts: kursive Einleitungszeile */
.artikel .g-text > p:first-child{
  font-family:var(--serif);font-style:italic;
  font-size:clamp(1.4rem,2.6vw,1.75rem);line-height:1.32;color:var(--dunkel);
  margin-bottom:.9em;
}
.artikel .g-text > p:first-child strong{font-weight:400}

/* ---------- Nummerierte Schritte ---------- */
.artikel ol.schritte{list-style:none;padding:0;margin:1.6em 0 1.8em;counter-reset:schritt}
.artikel ol.schritte > li{
  counter-increment:schritt;position:relative;
  padding:4px 0 0 64px;margin-bottom:22px;min-height:44px;
  font-size:1.06rem;line-height:1.7;
}
.artikel ol.schritte > li::before{
  content:counter(schritt, decimal-leading-zero);
  position:absolute;left:0;top:0;width:44px;height:44px;border-radius:50%;
  background:var(--pink);color:#fff;
  font-family:var(--jost);font-size:.8rem;font-weight:600;letter-spacing:.04em;
  display:flex;align-items:center;justify-content:center;
}

/* ---------- Kopier-Box dunkel ---------- */
.g-artikel .prompt{background:#2A2030;border:0;box-shadow:0 14px 34px rgba(54,41,61,.18)}
.g-artikel .prompt__kopf{background:#2A2030;border-bottom:1px solid rgba(255,255,255,.08)}
.g-artikel .prompt__text{color:#F3ECEF;background:#2A2030}

/* ---------- Mobil ---------- */
@media (max-width:700px){
  .g-kopf__inner{padding:36px 16px 54px}
  .g-autorin a{display:inline-block;margin:8px 7px 0}
  .g-band{margin:48px 0 30px;padding:32px 0 28px}
  .artikel ol.schritte > li{padding-left:54px}
  .artikel ol.schritte > li::before{width:38px;height:38px}
}

/* ============================================================
   COOKIE-BANNER (18.09.2026) — Logik in js/cookies.js
   Beide Hauptknoepfe gleich gross und gleich auffaellig:
   "Nur notwendige" darf nicht versteckter sein als "Alle erlauben".
   ============================================================ */
.ks-banner{
  position:fixed;z-index:200;left:16px;right:16px;bottom:16px;
  max-width:460px;margin-left:auto;
  background:#fff;color:var(--dunkel);
  border:1px solid rgba(54,41,61,.10);border-top:3px solid var(--pink);
  border-radius:18px;box-shadow:0 18px 50px rgba(54,41,61,.20);
  padding:22px 22px 16px;font-size:.95rem;line-height:1.55;
  max-height:calc(100vh - 32px);overflow:auto;
}
.ks-titel{font-family:var(--serif);font-size:1.5rem;line-height:1.1;margin:0 0 .35em}
.ks-text{margin:0 0 14px;color:var(--grau)}
.ks-text a{color:var(--pink)}
.ks-knoepfe{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ks-knopf{
  cursor:pointer;border:0;border-radius:999px;padding:13px 12px;
  background:var(--pink);color:#fff;
  font-family:var(--jost);font-size:.92rem;font-weight:500;letter-spacing:.02em;
}
.ks-knopf:hover{filter:brightness(1.07)}
.ks-mehr{
  display:block;margin:12px auto 0;background:none;border:0;cursor:pointer;
  font-family:var(--jost);font-size:.84rem;color:var(--grau);text-decoration:underline;
}
.ks-auswahl{margin:0 0 14px;display:grid;gap:10px}
.ks-auswahl[hidden]{display:none}
.ks-gruppe{display:flex;gap:10px;align-items:flex-start;font-size:.86rem;color:var(--grau);cursor:pointer}
.ks-gruppe strong{color:var(--dunkel)}
.ks-gruppe input{margin-top:4px;accent-color:var(--pink);width:16px;height:16px;flex:none}
.ks-gruppe--fest{cursor:default}

.ks-platzhalter{
  background:linear-gradient(170deg,#FCF1EF 0%,#F6E6EA 100%);
  border-radius:14px;padding:44px 24px;text-align:center;margin:0 0 1.4em;
}
.ks-platzhalter p{color:var(--grau);max-width:28em;margin:0 auto 18px}