/* Herbst-Special fuer Frauen (/females) · Spec 031
   Design-Ebene ueber maenner-special.css (gleiche Klassen, andere Tokens): helle Creme- und Rosetoene,
   Fraunces-Serife fuer Ueberschriften, weiche Verlaeufe. Hausregeln wie auf /males. */

@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/fraunces-400.woff2") format("woff2"); }
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/fraunces-600.woff2") format("woff2"); }
@font-face { font-family: "Fraunces"; font-style: italic; font-weight: 400; font-display: swap; src: url("/assets/fonts/fraunces-italic-400.woff2") format("woff2"); }
@font-face { font-family: "Fraunces"; font-style: italic; font-weight: 600; font-display: swap; src: url("/assets/fonts/fraunces-italic-600.woff2") format("woff2"); }

.btw.mm.ff {
  --mm-bg: #fbf6f3;
  --mm-bg2: #ffffff;
  --mm-bg3: #fdf0ee;
  --mm-linie: rgba(43, 30, 38, 0.1);
  --mm-linie2: rgba(43, 30, 38, 0.22);
  --mm-text: #2b1e26;
  --mm-weich: #6f5c66;
  --mm-leise: #9c8a93;
  --mm-blau: #d3386c;
  --mm-blau-dunkel: #b52a58;
  --mm-gruen: #2f9e6a;
  --mm-hell-bg: #ffffff;
  --mm-hell-bg2: #fbf6f3;
  --mm-hell-linie: rgba(43, 30, 38, 0.1);
  --mm-hell-text: #2b1e26;
  --mm-hell-weich: #6f5c66;
  --mm-hell-leise: #9c8a93;
  --mm-font-kopf: "Fraunces", "Georgia", "Times New Roman", serif;
  --mm-rose: #f4dfe0;
  --mm-pfirsich: #f9e6d6;
}
.ff h1, .ff h2, .ff h3, .ff .mmf-frage, .ff .mm-karte__name, .ff .mm-zone__text b, .ff .mm-grund__text b, .ff .mm-uhr__z b,
.ff .mm-preis__zahl, .ff .mm-preis__monat, .ff .mm-preis__max b, .ff .mm-preis__rabatt, .ff .mm-karte__preis, .ff .mm-stufe__kopf b, .ff .mm-stufe__preis, .ff .mm-stufe__rabatt, .ff .mm-liste__rate, .ff .mm-karte__rabatt, .ff .mmf-schritte b {
  font-family: var(--mm-font-kopf); font-weight: 600; letter-spacing: -0.01em;
}
.ff .mm-hero h1 .mm-h1__zwei { font-style: italic; font-weight: 400; color: var(--mm-blau); }
.ff .mm-hero h1 { font-size: min(4.9rem, 9.2cqi); line-height: 1.02; }
@media (max-width: 40rem) { .ff .mm-hero h1 { font-size: min(2.7rem, 9.2cqi); } }
.ff .mm-kopfzeile h2 .mm-blau, .ff .mmf-kopf h2 .mm-blau, .ff .mm-schluss h2 .mm-blau { font-style: italic; font-weight: 400; }
.ff .mm-preis__zahl { letter-spacing: -0.02em; }

/* Flaechen: Creme mit Rose- und Pfirsichschimmer, nie ein Foto */
.ff .mm-hero {
  background: radial-gradient(70% 55% at 88% 0%, rgba(211, 56, 108, 0.14), transparent 68%),
    radial-gradient(55% 45% at 0% 100%, rgba(249, 200, 160, 0.4), transparent 70%), var(--mm-bg);
}
.ff .mm-zonen { border-block-start-color: var(--mm-linie); background: linear-gradient(180deg, var(--mm-bg), #fdf8f6); }
.ff .mm-hell { background: var(--mm-hell-bg); }
.ff .mm-hell .mm-film, .ff .mm-grund details, .ff .mm-liste__rahmen, .ff .mm-faq details { background: var(--mm-hell-bg2); }
.ff .mm-schluss {
  --mm-bg: #2b1e26; --mm-bg2: #382a33; --mm-text: #fbf6f3; --mm-weich: #d9c9d0; --mm-leise: #a8949e; --mm-linie: rgba(251, 246, 243, 0.14); --mm-linie2: rgba(251, 246, 243, 0.3);
  background: radial-gradient(60% 55% at 100% 100%, rgba(211, 56, 108, 0.3), transparent 70%), #2b1e26;
  border-block-start: 0;
}
.ff .mm-schluss .mm-blau { color: #ff8db1; }
.ff .mm-schluss .mm-uhr__label { color: #ff8db1; }
.ff .mm-schluss .mm-btn--blau { background: #ff6f9e; color: #2b1e26; }
.ff .mm-schluss .mm-btn--blau:hover { background: #ff8db1; color: #2b1e26; }
.ff .mm-schluss .mm-textlink { color: #fbf6f3; text-decoration-color: #ff8db1; }

/* Knoepfe und Karten */
.ff .mm-btn--blau:hover, .ff a.mm-btn--blau:hover { background: #e0497d; color: #fff; }
.ff .mm-btn--dunkel, .ff a.mm-btn--dunkel { background: var(--mm-text); color: #fff; }
.ff .mm-karte__box, .ff .mm-stufe__box, .ff .mm-zone__link, .ff .mm-film { box-shadow: 0 14px 34px -24px rgba(43, 30, 38, 0.35); }
.ff .mm-karte__badge { background: rgba(43, 30, 38, 0.72); }
.ff .mm-karte__bild, .ff .mm-zone__bild, .ff .mm-film__bild { background: var(--mm-rose); }
.ff .mmf-schritte li.is-aktiv button { background: rgba(211, 56, 108, 0.07); }
.ff .mm-stufe--tipp .mm-stufe__box { background: var(--mm-bg3); }
.ff .mm-fakten .mm-icon { color: var(--mm-blau); }
.ff .mm-film__start { background: rgba(43, 30, 38, 0.85); }
.ff .mm-wisch { color: var(--mm-weich); }
.ff .mm-lead b { color: var(--mm-text); }
.ff .mm-preis__statt s { text-decoration-color: var(--mm-blau); }

/* Mitlaufende Leiste hell */
.ff .mm-sticky { background: rgba(255, 255, 255, 0.96); border-block-start-color: var(--mm-linie); color: var(--mm-text); }
.ff .mm-sticky .btw-sticky__text b { color: var(--mm-text); }
.ff .mm-sticky .btw-sticky__text small { color: var(--mm-weich); }
.ff .mm-sticky .mm-btn--leer { color: var(--mm-text); box-shadow: inset 0 0 0 1.5px var(--mm-linie2); }

/* Kopfleiste bleibt die helle Standardleiste; Fuss ohne Abstand, kein Wabern */
body.ff-seite footer.footer { margin-top: 0; }
body.ff-seite::before { display: none; }

/* ============================ Design-Runde 2 (Jasper 24.09.2026): weicher, weiblicher ============================
   Keine horizontalen Kanten: Abschnitte gehen mit geschwungenen, weichgezeichneten Wellen ineinander ueber,
   die Kopfleiste liegt ohne Linie auf der Cremeflaeche, Icons als Bluete, Blatt, Mond, Herz, Funkeln. */
.btw.mm.ff {
  --mm-bg: #fdf7f5;
  --mm-bg2: #ffffff;
  --mm-bg3: #fdf0ee;
  --mm-linie: rgba(74, 31, 54, 0.09);
  --mm-linie2: rgba(74, 31, 54, 0.2);
  --mm-text: #3b2333;
  --mm-weich: #7a5f6d;
  --mm-leise: #a68e9a;
  --mm-blau: #d94f7c;
  --mm-blau-dunkel: #bf3f6a;
  --mm-hell-bg: #ffffff;
  --mm-hell-bg2: #fdf7f5;
  --mm-hell-linie: rgba(74, 31, 54, 0.09);
  --mm-hell-text: #3b2333;
  --mm-hell-weich: #7a5f6d;
  --mm-hell-leise: #a68e9a;
  --ff-blush: #fbeeee;
  --ff-rose: #f6d8de;
  --ff-pfirsich: #fbe3d6;
  --ff-beere: #4a1f36;
}
body.ff-seite { background: #fdf7f5; }
.ff h1, .ff h2, .ff .mmf-frage { color: var(--ff-beere); }
.ff .mm-hero h1 .mm-h1__zwei, .ff .mm-kopfzeile h2 .mm-blau, .ff .mmf-kopf h2 .mm-blau { color: var(--mm-blau); }

/* Kopfleiste ohne Kante, auf der Cremeflaeche */
body.ff-seite nav.nav { background: rgba(253, 247, 245, 0.72); border-block-end: 0; box-shadow: none; -webkit-backdrop-filter: blur(16px) saturate(1.1); backdrop-filter: blur(16px) saturate(1.1); }
body.ff-seite nav.nav .nav-links > li > button { color: #3b2333; }
body.ff-seite nav.nav .nav-links > li > button:hover,
body.ff-seite nav.nav .nav-links > li > button[aria-expanded="true"] { color: #d94f7c; }
body.ff-seite nav.nav a.nav-cta { background: #d94f7c; color: #fff; border-color: #d94f7c; }
body.ff-seite nav.nav a.nav-cta:hover { background: #e4668f; color: #fff; border-color: #e4668f; }
body.ff-seite nav.nav .lang-switch, body.ff-seite nav.nav .lang-switch-btn { color: #3b2333; background: transparent; border-color: rgba(74, 31, 54, 0.18); }
body.ff-seite nav.nav .nav-mobile-toggle { color: #3b2333; border-color: rgba(74, 31, 54, 0.18); }

/* Abschnittsfarben und Wellen */
.ff .mm-hero { background: radial-gradient(60% 50% at 90% 0%, rgba(217, 79, 124, 0.13), transparent 70%), radial-gradient(50% 45% at 5% 95%, rgba(251, 227, 214, 0.9), transparent 70%), var(--mm-bg); padding-block-end: clamp(7rem, 5rem + 8vw, 14rem); }
.ff .mm-zonen, .ff .mm-faq-sec, .ff .mm-raten, .ff .mm-warum { position: relative; }
.ff .ff-blush { --mm-bg: var(--ff-blush); --mm-hell-bg: var(--ff-blush); background: var(--ff-blush); }
.ff .mm-zonen { border-block-start: 0; background: var(--ff-blush); padding-block-end: clamp(7rem, 5rem + 8vw, 14rem); }
.ff .mm-hell.mm-warum { background: #fff; }
.ff .mm-hell.mm-raten { background: #fff; padding-block-end: clamp(7rem, 5rem + 8vw, 14rem); }
.ff .mm-hell.mm-faq-sec { background: var(--ff-blush); padding-block: clamp(3.5rem, 2.5rem + 3.5vw, 6rem) clamp(7rem, 5rem + 8vw, 14rem); }
.ff .mm-faq details, .ff .mm-faq details[open] { background: #fff; }
.ff .mm-schluss { border-block-start: 0; background: radial-gradient(60% 55% at 100% 100%, rgba(217, 79, 124, 0.35), transparent 70%), radial-gradient(45% 40% at 0% 0%, rgba(251, 227, 214, 0.12), transparent 70%), var(--ff-beere); --mm-bg: var(--ff-beere); }
body.ff-seite footer.footer { background: var(--ff-beere, #4a1f36); }
body.ff-seite footer.footer { background: #4a1f36; }

/* overflow hidden: die weichgezeichneten Lagen wuerden sonst unter die SVG-Kante in den naechsten Abschnitt bluten (waagerechte Bande) */
.ff .ff-welle { position: absolute; inset-inline: 0; inset-block-end: -1px; z-index: 1; inline-size: 100%; block-size: clamp(4.5rem, 2rem + 9vw, 12rem); pointer-events: none; overflow: hidden; display: block; }
.ff .ff-welle__hinten { fill: rgba(217, 79, 124, 0.16); }
.ff .ff-welle__mitte { fill: rgba(251, 227, 214, 0.9); }
.ff .ff-welle--hero .ff-welle__vorn { fill: var(--ff-blush); }
.ff .ff-welle--zonen .ff-welle__vorn { fill: #fff; }
.ff .ff-welle--zonen .ff-welle__mitte { fill: rgba(246, 216, 222, 0.9); }
.ff .ff-welle--raten .ff-welle__vorn { fill: var(--ff-blush); }
.ff .ff-welle--faq .ff-welle__vorn { fill: var(--ff-beere); }
.ff .ff-welle--faq .ff-welle__hinten { fill: rgba(74, 31, 54, 0.28); }
.ff .ff-welle--faq .ff-welle__mitte { fill: rgba(217, 79, 124, 0.55); }
.ff .mm-hero .lx-container, .ff .mm-zonen .lx-container, .ff .mm-raten .lx-container, .ff .mm-faq-sec .lx-container, .ff .mm-schluss .lx-container { position: relative; z-index: 2; }

/* Weiche Schwuenge (Verlaufsflecken) in Hero und Abschluss, nie ein Foto */
.ff .ff-schwung { position: absolute; z-index: 0; pointer-events: none; border-radius: 50%; filter: blur(60px); opacity: 0.75; }
.ff .ff-schwung--a { inset-block-start: -8rem; inset-inline-end: -6rem; inline-size: clamp(18rem, 40vw, 34rem); block-size: clamp(14rem, 30vw, 26rem); background: radial-gradient(closest-side, rgba(246, 216, 222, 0.95), rgba(246, 216, 222, 0)); }
.ff .ff-schwung--b { inset-block-end: 6rem; inset-inline-start: -10rem; inline-size: clamp(20rem, 44vw, 38rem); block-size: clamp(12rem, 26vw, 22rem); background: radial-gradient(closest-side, rgba(251, 227, 214, 0.95), rgba(251, 227, 214, 0)); }
.ff .ff-schwung--c { inset-block-start: -4rem; inset-inline-start: 30%; inline-size: clamp(16rem, 36vw, 30rem); block-size: clamp(10rem, 22vw, 18rem); background: radial-gradient(closest-side, rgba(217, 79, 124, 0.45), rgba(217, 79, 124, 0)); }
.ff .mm-hero, .ff .mm-schluss { overflow: hidden; }

/* Handgezeichneter Schwung unter der zweiten Schlagzeile */
.ff .ff-unterschwung { position: relative; display: inline-block; padding-block-end: 0.12em; }
.ff .ff-unterschwung__svg { position: absolute; inset-inline: 0; inset-block-end: -0.02em; inline-size: 100%; block-size: 0.22em; color: var(--mm-blau); opacity: 0.85; pointer-events: none; }

/* Label mit Bluete statt Strich, Icons in Rose */
.ff .mm-label__icon { inline-size: 1.35rem; block-size: 1.35rem; flex: none; color: var(--mm-blau); }
.ff .mm-fakten .mm-icon, .ff .mm-grund .mm-icon { color: var(--mm-blau); stroke-width: 1.6; }
.ff .mm-grund .mm-icon { inline-size: 1.85rem; block-size: 1.85rem; }

/* Funnel ohne Trennlinie, Schritte weich */
.ff .mmf { border-block-start: 0; margin-block-start: clamp(2rem, 1.4rem + 2.5vw, 3.6rem); padding-block-start: 0; }
.ff .mmf-balken { background: rgba(217, 79, 124, 0.14); }
.ff .mmf-schritte button { background: rgba(255, 255, 255, 0.55); }
.ff .mmf-schritte li.is-aktiv button { background: #fff; border-color: var(--mm-blau); }

/* Studio-Auswahl: kleine Zeilenkarten */
.ff .mmf-studios--klein { list-style: none; margin: 0; padding: 0.3rem 0 0.4rem; display: grid; grid-template-columns: 1fr; gap: 0.7rem; }
@media (min-width: 40rem) { .ff .mmf-studios--klein { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 60rem) { .ff .mmf-studios--klein { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.85rem; } }
.ff .mm-karte__box--zeile { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.85rem; padding: 0.6rem 0.75rem 0.6rem 0.6rem; }
.ff .mm-karte__mini { display: block; inline-size: 5.4rem; aspect-ratio: 4 / 3; border-radius: 6px; overflow: hidden; background: var(--ff-rose); }
.ff .mm-karte__mini img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
.ff .mm-karte__box--zeile .mm-karte__text { padding: 0; gap: 0.05rem; }
.ff .mm-karte__box--zeile .mm-karte__name { font-size: 1rem; }
.ff .mm-karte__box--zeile .mm-karte__stadt { font-size: 0.78rem; }
.ff .mm-karte__box--zeile small { font-size: 0.78rem; line-height: 1.3; }
.ff .mm-karte__box--zeile .mm-haken { position: static; inline-size: 1.6rem; block-size: 1.6rem; opacity: 0.18; transform: none; background: var(--ff-rose); color: var(--mm-blau); }
.ff .mm-karte--klein input:checked + .mm-karte__box--zeile .mm-haken { opacity: 1; background: var(--mm-blau); color: #fff; }

/* Karten und Kacheln: etwas weicher */
.ff .mm-karte__box, .ff .mm-stufe__box, .ff .mm-zone__link, .ff .mm-film, .ff .mm-grund details, .ff .mm-faq details { box-shadow: 0 18px 40px -28px rgba(74, 31, 54, 0.4); }
.ff .mm-karte__rabatt { background: var(--mm-blau); }
.ff .mm-btn--dunkel, .ff a.mm-btn--dunkel { background: var(--ff-beere); }
.ff .mm-sticky { background: rgba(253, 247, 245, 0.96); }
.ff .mm-hell .mm-liste__rahmen { background: #fff; }
.ff .mm-hell.mm-raten .mm-film { background: #fff; }
@media (prefers-reduced-motion: reduce) { .ff .ff-schwung { filter: blur(40px); } }