/* Femina Integralis – Stylesheet der Website.
   Werte aus dem Design-System (tokens.json, https://claude.ai/artifact/9ZmECwTz5URJwAwfkYxqds)
   und 03-medien/fi/markenprofil.md. Nur Gilda Display und Quicksand, Ersatz Arial.
   Keine Schatten, keine Verläufe. Kontraste siehe Design-System, Abschnitt Kontraste.
   Seit 2026-10-12 Farben, Aufbau und Bilder wie die alte systeme.io-Seite (Michael,
   nur Website, siehe fi/kanaele/website.md): Navy, Terrakotta, Fläche #FEF8F3,
   weiße Karten mit Schatten, Seidenhintergrund. Schrift bleibt. */

@font-face {
  font-family: "Gilda Display";
  src: url("/dateien/GildaDisplay-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Quicksand";
  src: url("/dateien/Quicksand-VariableFont_wght.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --canvas-creme: #F7F5F0;
  --sand: #F3E7C8;
  --soft-blush: #EEDCD8;
  --medical-slate: #2F4858;
  --deep-terra: #A65D57;
  --lumina-gold: #CBA156;
  --cta-orange: #FF6600;
  --white: #FFFFFF;
  --logo-hell: #EBEBEB;
  /* alte Seite (systeme.io), 2026-10-12 */
  --navy: #14252C;
  --terrakotta: #B26054;
  --flaeche: #FEF8F3;

  --display: "Gilda Display", Arial, sans-serif;
  --sans: "Quicksand", Arial, sans-serif;

  --space-2: 8px;
  --space-4: 16px;
  --space-6: 24px;
  --space-12: 48px;
  --space-20: 80px;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-pill: 999px;

  --breite-text: 1280px; /* Text in voller Inhaltsbreite wie bei Nadi Life, mehrspaltig im Einzelfall (Michael, 2026-10-01) */
  --breite-rahmen: 1280px; /* Inhaltsbreite aller Websites (Michael, 2026-10-01) */
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--flaeche);
  color: var(--navy);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 27px;
  font-weight: 500;
}

img { max-width: 100%; height: auto; }

/* Überschriften: Gilda Display nur Regular, nie fett oder kursiv gefälscht */
h1, h2, h3, h4, .display {
  font-family: var(--display);
  font-weight: 400;
  font-style: normal;
  font-synthesis: none;
  color: var(--navy);
  margin: 0 0 var(--space-6);
}
.display { font-size: clamp(38px, 7vw, 56px); line-height: 1.07; }
h1 { font-size: clamp(32px, 5vw, 40px); line-height: 1.15; }
h2 { font-size: clamp(26px, 4vw, 30px); line-height: 1.2; }
h3 { font-size: 22px; line-height: 28px; }
h4 { font-family: var(--sans); font-size: 17px; line-height: 27px; font-weight: 700; }

p, ul, ol, table { margin: 0 0 var(--space-6); }
strong { font-weight: 700; }

a { color: var(--terrakotta); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--navy); }

:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }

.sprungmarke {
  position: absolute; left: var(--space-4); top: -60px;
  background: var(--medical-slate); color: var(--white); padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm); z-index: 10;
}
.sprungmarke:focus { top: var(--space-4); }

.rahmen { max-width: var(--breite-rahmen); margin-inline: auto; padding-inline: var(--space-4); }

/* Kopfzeile wie bei Michael Quarz und Nadi Life (Michael, 2026-10-13):
   fixiert, durchscheinend mit Unschärfe, ohne Linie am unteren Rand;
   Desktop Logo links, Menü rechts; mobil Logo mittig mit Menüknopf. */
:root { --kopf: 104px; }
html { scroll-padding-top: var(--kopf); }
body { padding-top: var(--kopf); }
.kopf {
  position: fixed; top: 0; left: 0; right: 0; z-index: 10; height: var(--kopf);
  background: rgba(254, 248, 243, .72);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
}
.kopf-innen { height: var(--kopf); display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); }
.marke { display: block; line-height: 0; }
.marke img { width: 260px; height: auto; }
.kopf nav { display: flex; gap: var(--space-12); }
.kopf nav a { text-decoration: none; font-weight: 500; font-size: 19px; padding-block: 4px; color: var(--terrakotta); }
.kopf nav a:hover, .kopf nav a[aria-current="page"] { color: var(--navy); }
.menue-knopf { display: none; }
@media (max-width: 1000px) { .kopf nav { gap: var(--space-6); } }

/* Mobil wie bei Michael Quarz: Hamburger öffnet eine Fläche über der
   Seite, große Einträge untereinander, die nacheinander einblenden */
@media (max-width: 800px) {
  :root { --kopf: 88px; }
  .kopf-innen { display: grid; grid-template-columns: 1fr auto 1fr; gap: 0; padding-inline: 0; }
  .marke { grid-column: 2; }
  .marke img { width: 220px; }
  .menue-knopf { grid-column: 3; justify-self: center; display: block; position: relative; width: 44px; height: 44px; padding: 0; border: 0; background: none; color: var(--navy); cursor: pointer; }
  .menue-knopf span { position: absolute; left: 12px; width: 20px; height: 1.5px; background: currentColor; border-radius: 1px; transition: transform .3s ease, top .3s ease; }
  .menue-knopf span:first-child { top: 18px; }
  .menue-knopf span:last-child { top: 25px; }
  .menue-offen .menue-knopf span:first-child { top: 21.5px; transform: rotate(45deg); }
  .menue-offen .menue-knopf span:last-child { top: 21.5px; transform: rotate(-45deg); }
  .kopf nav { position: absolute; top: var(--kopf); left: 0; right: 0; bottom: 0; flex-direction: column; gap: 0;
    padding: var(--space-6) 40px var(--space-12); overflow-y: auto;
    opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s; }
  .kopf nav a { padding: 6px 0; font-family: var(--display); font-weight: 400; font-size: 28px; line-height: 1.3;
    opacity: 0; transform: translateY(-6px); transition: opacity .3s ease, transform .3s ease; }
  .menue-offen .kopf { height: 100vh; height: 100dvh; }
  .menue-offen body { overflow: hidden; }
  .menue-offen .kopf nav { opacity: 1; visibility: visible; }
  .menue-offen .kopf nav a { opacity: 1; transform: none; }
  .menue-offen .kopf nav a:nth-child(2) { transition-delay: .03s; }
  .menue-offen .kopf nav a:nth-child(3) { transition-delay: .06s; }
  .menue-offen .kopf nav a:nth-child(4) { transition-delay: .09s; }
  .menue-offen .kopf nav a:nth-child(n+5) { transition-delay: .12s; }
}
@media (max-width: 800px) and (prefers-reduced-motion: reduce) {
  .kopf nav, .kopf nav a, .menue-knopf span { transition: none; }
}

/* Inhalt: Abschnitte als Bänder, lose Elemente (z. B. Rechtstexte) in Lesebreite */
.inhalt { padding-bottom: var(--space-20); }
.inhalt > :not(section) { max-width: var(--breite-text); margin-inline: auto; padding-inline: var(--space-4); }
.inhalt > :first-child:not(section) { margin-top: var(--space-12); }
.inhalt > section { padding: var(--space-20) var(--space-4) 0; }
.inhalt > section > * { max-width: var(--breite-text); margin-inline: auto; }
.inhalt > section > .raster { max-width: var(--breite-rahmen); }
.inhalt > section.band { padding-bottom: var(--space-20); margin-top: var(--space-20); }
/* Seidenhintergrund wie auf der alten Seite: Bild steht fest im Fenster,
   der Abschnitt schneidet es zu (clip-path), so wirkt es über mehrere
   Abschnitte wie ein Hintergrund. Als <img>, weil Rasterbilder nur über die
   Bildverarbeitung ausgeliefert werden (website-aufbau). */
.inhalt > section.seide { position: relative; clip-path: inset(0); padding-bottom: var(--space-20); }
.inhalt > section.seide + section.seide { margin-top: 0; padding-top: 0; }
.seide > picture, .seide > .seide-bild { position: fixed; inset: 0; max-width: none !important; margin: 0 !important; z-index: -1; }
.seide .seide-bild { width: 100vw; height: 100vh; object-fit: cover; }
.inhalt > section.band + section { margin-top: 0; }

.einstieg { text-align: center; padding-top: 0 !important; }
.einstieg .titelbild { display: block; width: 100%; max-width: 1260px; height: auto; margin: 0 auto var(--space-12); }
.einstieg .display { margin-bottom: var(--space-6); }
.einstieg p { font-size: 22px; line-height: 34px; max-width: 900px; margin-inline: auto; }
.einstieg .knopf { margin-top: var(--space-4); }
/* Zweiter Satz auf dem Desktop als eigener Absatz, auf dem Handy im selben
   Absatz, dazu kleinere Schrift: weniger Textwüste (Michael, 2026-10-14) */
.einstieg .absatz { display: block; margin-top: var(--space-6); }
@media (max-width: 600px) {
  .einstieg .display { font-size: clamp(28px, 8.3vw, 32px); }
  .einstieg p { font-size: clamp(15.5px, 4.42vw, 17px); line-height: 1.53; }
  .einstieg .absatz { display: inline; margin: 0; }
}

.zwischentitel { text-align: center; margin-bottom: var(--space-12); }

/* Karten: Abgrenzung über die Fläche, ohne Rahmen und Schatten */
.raster {
  display: grid; gap: var(--space-6);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
/* Karten wie auf der alten Seite: weiß, runde Ecken, leichter Schatten, zentriert */
.karte { background: var(--white); border-radius: 25px; padding: 20px 25px 30px; box-shadow: 0 1px 5px rgba(0, 0, 0, .2); text-align: center; }
.karte h3 { font-size: 28px; line-height: 36px; }
.karte > :last-child { margin-bottom: 0; }
.karte h3 { margin-bottom: var(--space-4); }
.karte img.icon { width: 56px; height: 56px; display: block; margin: 0 auto var(--space-4); }
/* Mittig gesetzter Abschnitt, Listen ohne Punkte (Michael, 2026-10-14) */
.mitte { text-align: center; }
.mitte ul { list-style: none; padding-left: 0; }

.box { background: var(--white); box-shadow: 0 1px 5px rgba(0, 0, 0, .2); border-radius: var(--radius-md); padding: var(--space-6); }
.box > :last-child { margin-bottom: 0; }
.aufruf { text-align: center; }

.hervorhebung { font-family: var(--display); font-size: 24px; line-height: 32px; color: var(--terrakotta); }

/* Knopf wie auf der alten Seite: Terrakotta, weiße Schrift (4,7:1) */
.knopf {
  display: inline-block; background: var(--terrakotta); color: var(--white);
  font-family: var(--sans); font-size: 19px; line-height: 24px; font-weight: 600;
  text-decoration: none; padding: 15px 30px; border-radius: 50px;
}
.knopf:hover { color: var(--white); }

/* Tabellen (Preise) */
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 12px 8px; border-bottom: 1px solid rgba(178, 96, 84, .35); vertical-align: top; }
th { font-weight: 700; }
td:last-child, th:last-child { text-align: right; white-space: nowrap; }
/* Preisseite wie bei Nadi Life: Titel und Erklärung links, Tabelle rechts,
   auf dem Handy untereinander (Michael, 2026-10-14) */
.preisblock { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 0 var(--space-12); margin-block: var(--space-12); }
.preisblock h2 { margin-top: 0; }
.preisblock td:first-child { overflow-wrap: anywhere; hyphens: auto; }
@media (max-width: 800px) { .preisblock { grid-template-columns: 1fr; margin-block: var(--space-6); } }

hr { border: 0; border-top: 1px solid rgba(178, 96, 84, .35); margin: var(--space-12) auto; }

/* Fußzeile wie auf der alten Seite: Navy, alles zentriert, Links Terrakotta
   (heller gesetzt für Kontrast auf Navy) */
.fuss { background: var(--navy); color: var(--canvas-creme); font-weight: 500; text-align: center; }
.fuss a { color: #D98B7F; text-decoration: none; }
.fuss a:hover { color: var(--white); }
.fuss :focus-visible { outline-color: var(--canvas-creme); }
.fuss-innen {
  display: grid; gap: var(--space-12); padding-block: var(--space-12);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); align-items: center;
}
/* Logo so breit wie der Claim darunter in einer Zeile (344 px bei Quicksand 17 px SemiBold), Michael 2026-10-01 */
.fuss img { display: block; width: 280px; max-width: 100%; height: auto; margin-inline: auto; }
.claim { margin-top: var(--space-4); }
/* Farbwechsel wie auf der alten Seite: Claim und Zusatzsatz goldgelb */
.fuss .claim, .fuss .gold { color: #E0C075; }
.fuss-titel { font-family: var(--display); font-weight: 400; font-size: 30px; line-height: 38px; margin-bottom: var(--space-4); }
.fuss .knopf, .fuss .knopf:hover { color: var(--white); }
.fuss-recht {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2) var(--space-6);
  border-top: 1px solid rgba(235, 235, 235, 0.3); padding-block: var(--space-6);
  font-size: 14px; line-height: 21px;
}

/* Sprachweiche */
.weiche { max-width: var(--breite-text); margin: var(--space-20) auto; padding-inline: var(--space-4); text-align: center; }

@media (max-width: 600px) {
  .inhalt > section { padding-top: var(--space-12); }
  .inhalt > section.band { padding-bottom: var(--space-12); margin-top: var(--space-12); }
}

/* Linkseite unter /lp/ */
.links { max-width: 480px; margin: 0 auto; text-align: center; }
.links .knopf { display: block; margin: 0 0 14px; }
.links .profile { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; margin-top: 28px; }


/* Pfeil nach oben wie bei Nadi Life (Michael, 2026-10-01), Schatten als
   bewusste Ausnahme von „keine Schatten“ freigegeben: erscheint nach
   etwa 500 px Scrollen, mittig am unteren Rand, klebt per sticky am
   Bildschirmrand und bleibt am Seitenende über der Fußzeile stehen. */
html { scroll-behavior: smooth; }
.nach-oben-halter { position: sticky; bottom: 1rem; z-index: 5; height: 0; display: flex; justify-content: center; pointer-events: none; }
.nach-oben { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-top: -60px; border-radius: 50%;
  color: var(--navy); background: rgba(255, 255, 255, .85); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .18); opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s; pointer-events: auto; }
.nach-oben.sichtbar { opacity: 1; visibility: visible; transform: translateY(0); }
.nach-oben:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(0, 0, 0, .22); }
.nach-oben:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .nach-oben { transition: none; } .nach-oben:hover { transform: none; } }

/* Aufruf als Band über die volle Breite mit Fläche soft-blush, schließt
   bündig an die Fußzeile an (Michael, 2026-10-01) */
.inhalt > section.aufruf-band { background: var(--flaeche); text-align: center; margin-top: var(--space-20); padding-bottom: var(--space-20); }
.inhalt > section.band + section.aufruf-band, .inhalt > section.seide + section.aufruf-band { margin-top: 0; }
.inhalt > section.aufruf-band:last-child { margin-bottom: calc(-1 * var(--space-20)); }
@media (max-width: 600px) { .inhalt > section.aufruf-band { padding-bottom: var(--space-12); } }

/* Knöpfe: kein Unterstrich und kein Farbwechsel beim Überfahren, stattdessen
   leichtes Anheben mit Schatten wie bei Nadi Life (Michael, 2026-10-01) */
.knopf { transition: transform .15s ease, box-shadow .15s ease; }
.knopf:hover { text-decoration: none; filter: none; transform: translateY(-2px); box-shadow: 0 6px 14px rgba(20, 37, 44, .28); }
.knopf:active { transform: translateY(0); box-shadow: 0 2px 6px rgba(20, 37, 44, .25); }
@media (prefers-reduced-motion: reduce) { .knopf { transition: none; } .knopf:hover, .knopf:active { transform: none; } }

/* Burn Vulva Burn (/lp/burn-vulva-burn): Layout der alten Seite, Werte von
   systeme.io gemessen (Michael, 2026-10-14). Hero zweispaltig, danach
   Farbbänder über die volle Breite, Text 1000 px breit, orange Knöpfe.
   Schriften wie auf der übrigen neuen Seite. */
.inhalt > section.bvb { margin: 0; padding: var(--space-20) var(--space-4); }
.inhalt > section.bvb > * { max-width: 1000px; }
.bvb h2 { font-size: clamp(32px, 4.5vw, 50px); line-height: 1.2; text-align: center; margin-bottom: var(--space-12); }
.bvb h3 { font-size: 25px; line-height: 35px; }
.bvb p, .bvb li { font-size: 20px; line-height: 30px; }
.bvb-aufruf { text-align: center; margin-top: var(--space-12); margin-bottom: 0; }
.bvb-knopf {
  display: inline-block; padding: 15px 25px; border: 2px solid var(--terrakotta); border-radius: 50px;
  background: #FF6600; color: var(--navy); font-family: var(--display); font-size: 25px; line-height: 33px;
  text-decoration: none; transition: transform .15s ease;
}
.bvb-knopf:hover { color: var(--navy); transform: translateY(-2px); }
.bvb-knopf.bvb-zweit { background: #F7F5F0; border-color: rgba(20, 37, 44, .5); color: rgba(20, 37, 44, .6); }
@media (prefers-reduced-motion: reduce) { .bvb-knopf { transition: none; } .bvb-knopf:hover { transform: none; } }

.inhalt > section.bvb-hero { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-12); align-items: center; max-width: 1200px; margin-inline: auto; padding-top: var(--space-12); }
.inhalt > section.bvb-hero > * { max-width: none; margin: 0; }
.bvb-hero-text { text-align: center; }
.bvb-hero h1 { font-size: clamp(64px, 10vw, 130px); line-height: .93; color: var(--terrakotta); margin: var(--space-4) 0; }
.bvb-hero .bvb-ober { font-family: var(--display); font-size: clamp(24px, 2.8vw, 35px); line-height: 1.2; margin-bottom: 0; }
.bvb-hero .bvb-unter { font-family: var(--display); font-size: 25px; line-height: 30px; }
.bvb-knoepfe { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-4); margin: var(--space-6) 0 0; }
.bvb-hero img { width: 100%; height: auto; display: block; }

.inhalt > section.bvb-navy { background: rgba(20, 37, 44, .75); text-align: center; }
.bvb-navy h2, .bvb-navy strong { color: var(--white); }
.bvb-navy p { color: rgba(255, 255, 255, .7); }
.inhalt > section.bvb-gold { background: rgba(224, 192, 117, .5); }
.inhalt > section.bvb-ocker { background: rgba(203, 161, 86, .5); }
.inhalt > section.bvb-creme { background: var(--flaeche); }
.bvb-akzenttitel h2, .bvb-akzent { color: var(--terrakotta); }
.inhalt > section.bvb-terrakotta { background: var(--terrakotta); }
.bvb-terrakotta h2, .bvb-terrakotta p, .bvb-terrakotta strong { color: var(--flaeche); }
.bvb-schluss { text-align: center; }
.bvb-schluss p { font-size: 25px; line-height: 35px; color: #EBDCDC; }
.inhalt > section.bvb-schluss { margin-bottom: calc(-1 * var(--space-20)); }
.bvb-schluss .bvb-hand { font-size: 48px; line-height: 1; text-align: right; margin: 0; }

@media (max-width: 800px) {
  .inhalt > section.bvb-hero { grid-template-columns: 1fr; }
  .inhalt > section.bvb { padding-block: var(--space-12); }
  .bvb p, .bvb li { font-size: 17px; line-height: 26px; }
  .bvb-knopf { font-size: 20px; line-height: 26px; padding: 12px 22px; }
  .bvb-schluss p { font-size: 20px; line-height: 30px; }
  .inhalt > section.bvb-schluss { margin-bottom: calc(-1 * var(--space-20)); }
}