/* Skillbeast – Design-Tokens: Farben, Schrift und Abstände zentral hier ändern */
@font-face { font-family: "Montserrat"; src: url("fonts/montserrat.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --paper: #f8f6f2;
  --sand: #ece5db;
  --hero: #e6c9b1;
  --blend: #f5ebe1;            /* Startfoto verläuft in diese Farbe */
  --deep: #dbcdbd;
  --lime: #e2f56b;             /* PMP-Farben aus dem Mitgliederbereich */
  --lavender: #d9c3ea;
  --cream: #f1e7dd;
  --white: #ffffff;
  --ink: #282828;
  --ink-soft: #6b655c;
  --on-dark: #f8f6f2;
  --on-dark-soft: #c9c3b9;
  --orange: #f8981b;           /* Erkennungsfarbe: nur für Login-Button und kleine Akzente */
  --line: rgba(40, 40, 40, .16);
  --line-dark: rgba(248, 246, 242, .24);
  --font: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --gutter: clamp(16px, calc(3 * var(--vw)), 44px);
  --section: clamp(44px, calc(5.4 * var(--vw)), 76px);
  --radius: 16px;
  --gap: clamp(8px, calc(1 * var(--vw)), 14px);
  --bar-h: 56px;
  --bar-top: 12px;
  --header-space: calc(var(--bar-h) + var(--bar-top) + clamp(24px, calc(3 * var(--vw)), 40px));
}

* { box-sizing: border-box; }
html { overflow-x: clip; scroll-padding-top: calc(var(--bar-h) + var(--bar-top) + 16px); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 clamp(15px, calc(1.05 * var(--vw)), 17px)/1.6 var(--font); overflow-x: clip; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; border-radius: 4px; }

h1, h2, h3 { font-weight: 800; margin: 0; letter-spacing: -.035em; text-wrap: balance; overflow-wrap: break-word; hyphens: manual; }
h1 { font-size: clamp(2.1rem, calc(4.6 * var(--vw)), 4.2rem); line-height: 1.04; }
h2 { font-size: clamp(1.5rem, calc(2.5 * var(--vw)), 2.3rem); line-height: 1.12; }
h3 { font-size: clamp(1.05rem, calc(1.35 * var(--vw)), 1.25rem); line-height: 1.22; letter-spacing: -.025em; font-weight: 800; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
.lead { font-size: clamp(1.05rem, calc(1.35 * var(--vw)), 1.22rem); line-height: 1.45; letter-spacing: -.01em; }
.muted { color: var(--ink-soft); }

/* Abschnitts-Titel mit Punkt */
.eyebrow { display: flex; width: fit-content; align-items: center; gap: 10px; margin-bottom: clamp(14px, calc(1.8 * var(--vw)), 22px); font-size: clamp(1rem, calc(1.25 * var(--vw)), 1.15rem); font-weight: 700; letter-spacing: .01em; line-height: 1.25; color: var(--ink); }
.eyebrow::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--orange); }

.wrap { max-width: 1320px; margin-inline: auto; padding-inline: var(--gutter); }
.narrow { max-width: 780px; margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section); }
.section-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 14px 40px; margin-bottom: clamp(20px, calc(2.6 * var(--vw)), 34px); }
.section-head > * { max-width: 760px; }
.section-head p { max-width: 50ch; margin: 0; }
.bg-white { background: var(--white); }
.bg-sand, .bg-stone { background: var(--sand); }
.bg-ink { background: var(--ink); color: var(--on-dark); }
.bg-ink .muted { color: var(--on-dark-soft); }
.bg-ink .eyebrow { color: var(--on-dark); }
.bg-blend { background: var(--blend); }
.bg-deep { background: var(--deep); }
.bg-light { background: var(--sand); }

/* Erster Bereich jeder Seite läuft unter die schwebende Kopfzeile */
main > section:first-child { padding-top: var(--header-space); }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .55em; min-height: 42px; padding: 9px 20px; border-radius: 999px; border: 1px solid var(--ink); background: var(--ink); color: var(--on-dark); font: 600 .84rem/1.2 var(--font); text-decoration: none; text-align: center; cursor: pointer; transition: background-color .18s ease, color .18s ease, border-color .18s ease; }
.btn:hover { background: transparent; color: var(--ink); }
.btn + .btn { background: transparent; color: var(--ink); }
.btn + .btn:hover { background: var(--ink); color: var(--on-dark); }
.btn-accent, .btn + .btn-accent { background: var(--orange); border-color: var(--orange); color: var(--ink); }
.btn-accent:hover, .btn + .btn-accent:hover { background: var(--ink); border-color: var(--ink); color: var(--on-dark); }
.bg-ink .btn, .on-photo .btn { background: var(--on-dark); border-color: var(--on-dark); color: var(--ink); }
.bg-ink .btn:hover, .on-photo .btn:hover { background: transparent; color: var(--on-dark); }
.bg-ink .btn + .btn, .on-photo .btn + .btn { background: transparent; color: var(--on-dark); }
.bg-ink .btn + .btn:hover, .on-photo .btn + .btn:hover { background: var(--on-dark); color: var(--ink); }
.on-photo .btn-accent { background: var(--orange); border-color: var(--orange); color: var(--ink); }
.btn-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.link-arrow { font-weight: 600; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.link-arrow:hover { text-decoration-color: var(--orange); }

/* Schwebende Kopfzeile */
.site-header { position: fixed; top: var(--bar-top); left: var(--gutter); right: var(--gutter); z-index: 50; max-width: calc(1320px - 2 * var(--gutter)); margin-inline: auto; border-radius: 999px; background: rgba(255, 255, 255, .9); box-shadow: 0 1px 0 rgba(40, 40, 40, .06), 0 6px 22px rgba(40, 40, 40, .07); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: var(--bar-h); padding-inline: 20px 8px; }
.logo { position: relative; z-index: 2; }
.logo img { width: clamp(110px, calc(9.5 * var(--vw)), 134px); filter: brightness(0) saturate(100%); }
.main-nav > ul { display: flex; align-items: center; gap: clamp(0px, calc(.3 * var(--vw)), 4px); list-style: none; margin: 0; padding: 0; }
.main-nav a { text-decoration: none; }
.nav-top { display: block; padding: 7px 10px; font-size: .82rem; font-weight: 500; white-space: nowrap; border-radius: 999px; }
.nav-top:hover, .has-sub:hover > .nav-top { background: var(--sand); }
[aria-current="page"].nav-top { background: var(--sand); }
.has-sub { position: relative; }
.submenu { position: absolute; top: calc(100% + 6px); left: 0; min-width: 220px; margin: 0; padding: 6px; list-style: none; background: var(--white); color: var(--ink); border-radius: 14px; box-shadow: 0 10px 30px rgba(40, 40, 40, .12); opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity .15s ease, transform .15s ease, visibility .15s; }
.submenu::before { content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 8px; }
.has-sub:hover .submenu, .has-sub:focus-within .submenu { opacity: 1; visibility: visible; transform: none; }
.submenu a { display: block; padding: 8px 12px; border-radius: 9px; font-size: .84rem; font-weight: 500; }
.submenu a:hover, .submenu a[aria-current="page"] { background: var(--sand); }
.header-actions { position: relative; z-index: 2; display: flex; align-items: center; gap: 8px; }
.btn-login { min-height: 40px; padding: 8px 16px; font-size: .8rem; white-space: nowrap; }
.menu-toggle { display: none; width: 40px; height: 40px; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; }
.menu-toggle span { display: block; width: 22px; height: 1.5px; margin: 6px auto; background: currentColor; transition: transform .2s ease, opacity .2s ease; }
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
.mobile-bar { display: none; }

@media (max-width: 820px) {
  :root { --bar-h: 52px; --bar-top: 8px; }
  .site-header { left: 8px; right: 8px; max-width: none; }
  .header-inner { padding-inline: 16px 6px; }
  .menu-toggle { display: block; }
  .header-actions .btn-login { display: none; }
  .main-nav { position: fixed; inset: 0; z-index: 1; padding: calc(var(--bar-h) + var(--bar-top) + 14px) var(--gutter) 100px; background: var(--paper); color: var(--ink); overflow-y: auto; visibility: hidden; opacity: 0; transition: opacity .15s ease, visibility .15s; }
  .main-nav.open { visibility: visible; opacity: 1; }
  .main-nav > ul { display: block; }
  .main-nav > ul > li { border-bottom: 1px solid var(--line); }
  .nav-top { padding: 12px 0; font-size: 1.3rem; letter-spacing: -.02em; white-space: normal; border-radius: 0; }
  .nav-top:hover, .has-sub:hover > .nav-top, [aria-current="page"].nav-top { background: none; }
  [aria-current="page"].nav-top::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 9px; border-radius: 50%; background: var(--orange); vertical-align: middle; }
  .submenu { position: static; min-width: 0; padding: 0 0 10px; background: none; box-shadow: none; opacity: 1; visibility: inherit; transform: none; }
  .submenu::before { display: none; }
  .submenu a { padding: 6px 0; font-size: .98rem; }
  .submenu a:hover, .submenu a[aria-current="page"] { background: none; text-decoration: underline; }
  .mobile-bar { position: fixed; inset: auto 0 0; z-index: 60; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); background: var(--paper); border-top: 1px solid var(--line); }
  [data-page="home"] .mobile-bar { grid-template-columns: 1fr; }
  [data-page="home"] .mobile-bar .btn:not(.btn-accent) { display: none; }
  body { padding-bottom: 60px; }
}

/* Startseite: Hero, Foto verläuft nach unten in den nächsten Abschnitt */
.home-hero { position: relative; display: flex; flex-direction: column; min-height: clamp(560px, calc(48 * var(--vw)), 720px); padding: 0 !important; background: linear-gradient(180deg, var(--hero) 0%, var(--hero) 55%, var(--blend) 100%); overflow: hidden; isolation: isolate; }
.hero-photo { position: absolute; top: 0; right: 0; bottom: 0; z-index: -2; width: 62%; height: 100%; object-fit: cover; object-position: 50% 8%; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16%), linear-gradient(180deg, #000 58%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 16%), linear-gradient(180deg, #000 58%, transparent 100%); -webkit-mask-composite: source-in; mask-composite: intersect; }
.hero-copy { width: 100%; max-width: 1320px; margin: auto; padding: calc(var(--bar-h) + var(--bar-top) + 24px) var(--gutter) 24px; }
.home-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(90deg, rgba(92, 60, 36, .42) 0%, rgba(92, 60, 36, .24) 38%, rgba(92, 60, 36, 0) 62%); -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 100%); mask-image: linear-gradient(180deg, #000 62%, transparent 100%); }
.hero-copy { color: #fff; }
.hero-copy h1 { font-size: clamp(2.9rem, calc(6.3 * var(--vw)), 6rem); font-weight: 900; line-height: .98; letter-spacing: -.03em; hyphens: none; text-shadow: 0 2px 26px rgba(70, 44, 24, .28); }
.hero-copy p { max-width: 34ch; margin: clamp(14px, calc(1.6 * var(--vw)), 22px) 0 0; font-size: clamp(1.02rem, calc(1.4 * var(--vw)), 1.25rem); font-weight: 700; line-height: 1.35; text-shadow: 0 1px 14px rgba(70, 44, 24, .35); }
@media (max-width: 820px) {
  .home-hero { min-height: 0; }
  .hero-copy { order: 1; padding-bottom: 20px; }
  .hero-photo { position: static; order: 2; width: 100%; height: auto; aspect-ratio: 1 / 1; object-position: 50% 4%; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 62%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 62%, transparent 100%); -webkit-mask-composite: source-over; mask-composite: add; }
}

/* Collage: Über mich */
.collage { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.25fr) minmax(0, .8fr); grid-template-areas: "title title right" "left text right"; gap: clamp(18px, calc(2.4 * var(--vw)), 34px) clamp(20px, calc(3 * var(--vw)), 44px); }
.collage-title { grid-area: title; max-width: 18ch; }
.collage-text { grid-area: text; align-self: center; }
.collage-left { grid-area: left; }
.collage-right { grid-area: right; }
.collage-img { position: relative; }
.collage-img img { width: 100%; height: 100%; border-radius: var(--radius); object-fit: cover; }
.collage-left img { aspect-ratio: 1 / 1; object-position: 50% 45%; }
.collage-right img { min-height: 100%; max-height: 460px; object-position: 50% 20%; }
.stat { position: absolute; padding: 9px 14px; background: var(--white); border-radius: 12px; box-shadow: 0 6px 20px rgba(40, 40, 40, .09); }
.stat b { display: block; font-size: 1.15rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.stat span { display: block; font-size: .68rem; line-height: 1.25; color: var(--ink-soft); }
.stat-a { top: -14px; left: 12px; }
.stat-b { top: 18px; left: -18px; }
@media (max-width: 820px) {
  .collage { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "title title" "text text" "left right"; }
  .collage-title { max-width: none; }
  .collage-left img, .collage-right img { aspect-ratio: 4 / 5; min-height: 0; max-height: none; }
  .stat-b { left: 8px; top: 8px; }
  .stat { padding: 6px 10px; }
  .stat b { font-size: .95rem; }
  .stat span { font-size: .62rem; }
  .stat-a { left: 8px; top: 8px; }
}

/* Reiter */
.tablist { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); margin-bottom: clamp(16px, calc(2 * var(--vw)), 26px); padding: 4px; background: var(--white); border-radius: 999px; }
.tablist button { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 42px; padding: 8px 18px; border: 0; border-radius: 999px; background: none; color: var(--ink-soft); font: 500 .84rem/1.2 var(--font); text-align: left; cursor: pointer; transition: background-color .18s ease, color .18s ease; }
.tablist button:hover { color: var(--ink); }
.tablist button[aria-selected="true"] { background: var(--ink); color: var(--on-dark); }
.tablist button small { font-size: .7rem; opacity: .7; }
.tab-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: clamp(18px, calc(3 * var(--vw)), 44px); align-items: end; }
.tab-panel[hidden] { display: none; }
.tab-panel img { width: 100%; height: clamp(220px, calc(25 * var(--vw)), 340px); border-radius: var(--radius); object-fit: cover; }
.tab-panel h3 { font-size: clamp(1.3rem, calc(2 * var(--vw)), 1.8rem); font-weight: 800; margin: 8px 0 10px; letter-spacing: -.03em; }
.tab-panel p { max-width: 42ch; }
@media (max-width: 720px) {
  .tablist button { padding: 8px 12px; font-size: .78rem; }
  .tablist button small { display: none; }
  .tablist button { justify-content: center; text-align: center; }
  .tab-panel { grid-template-columns: minmax(0, 1fr); }
  .tab-panel img { order: -1; height: 220px; }
}

/* Vier kleine Programm-Kacheln */
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.grid-4 .card-media { aspect-ratio: 4 / 3; }
.grid-4 h3 { font-size: clamp(1rem, calc(1.2 * var(--vw)), 1.12rem); }
.grid-4 p { font-size: .88rem; line-height: 1.45; }
@media (max-width: 820px) { .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) { .grid-4 { grid-template-columns: minmax(0, 1fr); } }
.card-link::after { content: ""; position: absolute; inset: 0; }

/* Abschluss-Banner mit Foto */
.photo-banner { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: clamp(260px, calc(26 * var(--vw)), 360px); padding: clamp(20px, calc(3 * var(--vw)), 36px); border-radius: var(--radius); background: var(--ink); color: var(--on-dark); overflow: hidden; isolation: isolate; }
.photo-banner img { position: absolute; top: 0; right: 0; bottom: 0; z-index: -2; width: 58%; height: 100%; object-fit: cover; object-position: 50% 24%; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%); mask-image: linear-gradient(90deg, transparent 0, #000 22%); }
.photo-banner p { max-width: 36ch; margin: 10px 0 0; }
@media (max-width: 720px) { .photo-banner { justify-content: flex-start; } .photo-banner img { position: static; order: 3; width: calc(100% + 2 * clamp(20px, calc(3 * var(--vw)), 36px)); max-width: none; height: 200px; margin: 18px calc(-1 * clamp(20px, calc(3 * var(--vw)), 36px)) calc(-1 * clamp(20px, calc(3 * var(--vw)), 36px)); -webkit-mask-image: none; mask-image: none; } }

/* Foto-Kopf auf Unterseiten */
.photo-hero { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: clamp(380px, calc(34 * var(--vw)), 480px); padding: var(--header-space) var(--gutter) clamp(24px, calc(3 * var(--vw)), 40px) !important; background: var(--ink); color: var(--on-dark); overflow: hidden; isolation: isolate; }
.photo-hero > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; }
.photo-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(30, 26, 20, .8) 0%, rgba(30, 26, 20, .45) 50%, rgba(30, 26, 20, .05) 85%); }
.photo-hero > div { width: 100%; max-width: calc(1320px - 2 * var(--gutter)); margin-inline: auto; }
.photo-hero .eyebrow { color: var(--on-dark); }
.photo-hero .lead { max-width: 44ch; margin-top: 14px; }

/* Im Bearbeiten-Modus gesetzte Werte. Sie vererben sich nicht, sonst würden Kinder mitwandern. */
@property --mx { syntax: "<number>"; inherits: false; initial-value: 0; }
@property --my { syntax: "<number>"; inherits: false; initial-value: 0; }
@property --rot { syntax: "<number>"; inherits: false; initial-value: 0; }
@property --size { syntax: "<number>"; inherits: false; initial-value: 1; }
@property --ox { syntax: "<number>"; inherits: false; initial-value: 50; }
[style*="--fw"], [style*="--fw"] * { font-weight: var(--fw) !important; }

/* Verschieben, Drehen und Größe: nur am Desktop, am Handy bleibt alles an seinem Platz */
@media (min-width: 821px) {
  [style*="--mx"], [style*="--rot"], [style*="--size"] { transform: translate(calc(var(--mx) * calc(1 * var(--vw))), calc(var(--my) * calc(1 * var(--vw)))) rotate(calc(var(--rot) * 1deg)) scale(var(--size)); transform-origin: calc(var(--ox) * 1%) 50%; }
  a.link-arrow[style*="--mx"], .mark[style*="--mx"], a[style*="--rot"], a[style*="--size"], span[style*="--rot"], span[style*="--size"] { display: inline-block; }
}

/* Über mich */
.about-split { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(24px, calc(5 * var(--vw)), 72px); align-items: center; }
.about-photo img { width: auto; max-width: 100%; max-height: min(66vh, 480px); border-radius: var(--radius); }
@media (max-width: 820px) { .about-split { grid-template-columns: minmax(0, 1fr); } .about-split .order-first { order: -1; justify-self: center; } .about-photo img { max-height: 340px; } }

/* Unterseiten-Kopf ohne Foto */
.page-hero-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 14px clamp(24px, calc(5 * var(--vw)), 72px); align-items: end; }
.page-hero-split .lead { margin-top: 0; }
@media (max-width: 820px) { .page-hero-split { grid-template-columns: minmax(0, 1fr); } }
.page-hero { padding-bottom: clamp(28px, calc(3.4 * var(--vw)), 44px); background: var(--sand); }
.page-hero .lead { max-width: 52ch; margin-top: 14px; }

/* Zwei Spalten */
.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(22px, calc(4 * var(--vw)), 60px); align-items: center; }
.split.top { align-items: start; }
.split-img img { width: 100%; max-height: 440px; border-radius: var(--radius); object-fit: cover; object-position: 50% 25%; }
.ratio-45 img { aspect-ratio: 1 / 1; }
.ratio-32 img { aspect-ratio: 3 / 2; }
.ratio-11 img { aspect-ratio: 1; }
@media (max-width: 820px) { .split { grid-template-columns: minmax(0, 1fr); } .split-img img { max-height: 320px; } .split .order-first { order: -1; } }

/* Karten */
.grid-3, .grid-2 { display: grid; gap: var(--gap); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 820px) { .grid-3 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 720px) { .grid-2 { grid-template-columns: minmax(0, 1fr); } }

.card { position: relative; display: flex; flex-direction: column; background: var(--white); border-radius: var(--radius); overflow: hidden; }
.card-media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--sand); }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.card:hover .card-media img { transform: scale(1.03); }
.card-body { display: flex; flex-direction: column; flex: 1; gap: 8px; padding: clamp(14px, calc(1.5 * var(--vw)), 20px); }
.card-body .btn, .card-body .link-arrow, .card-body .btn-row { margin-top: auto; align-self: flex-start; }
.card .eyebrow { margin-bottom: 2px; font-size: .78rem; }
.card .eyebrow::before { width: 6px; height: 6px; }
.card-body p:has(+ .btn), .card-body p:has(+ .link-arrow) { margin-bottom: 12px; }
.price { display: inline-block; font-weight: 600; font-size: .78rem; }
.price::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 7px; border-radius: 50%; background: var(--orange); vertical-align: 1px; }
.bg-ink .card { background: #343230; }

/* Programm-Reihen */
.program { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); background: var(--white); border-radius: var(--radius); overflow: hidden; }
.program + .program { margin-top: var(--gap); }
.program-media { position: relative; min-height: clamp(200px, calc(21 * var(--vw)), 290px); background: var(--sand); }
.program-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.program-body { align-self: center; padding: clamp(18px, calc(2.6 * var(--vw)), 36px); }
.program-body h2 { font-size: clamp(1.25rem, calc(2 * var(--vw)), 1.8rem); margin-bottom: 10px; }
.program-body p { max-width: 50ch; }
@media (max-width: 820px) { .program { grid-template-columns: minmax(0, 1fr); } .program-media { min-height: 0; aspect-ratio: 16 / 9; } }

/* Noch fehlender Text */
.todo { margin: 0 0 14px; padding: 10px 14px; border: 1px dashed var(--ink-soft); border-radius: 10px; color: var(--ink); font-size: .88rem; }
.todo strong { display: block; font-size: .68rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }

/* Listen */
.checks { list-style: none; margin: 0; padding: 0; }
.checks li { padding: 9px 0; border-top: 1px solid var(--line); }
.checks li:last-child { border-bottom: 1px solid var(--line); }
.bg-ink .checks li { border-color: var(--line-dark); }

/* Instagram */
.ig-row .eyebrow { margin: 0 auto 18px; }
.ig-grid { max-width: 860px; margin-inline: auto; }
.ig-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.ig-grid a { display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 12px; background: var(--sand); }
.ig-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.ig-grid a:hover img { transform: scale(1.03); }
@media (max-width: 480px) { .ig-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Presse */
.press { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(16px, calc(3 * var(--vw)), 48px); align-items: center; }
.press a, .press span { display: flex; align-items: center; justify-content: center; height: 48px; }
.press img { max-height: 28px; width: auto; object-fit: contain; filter: grayscale(1) contrast(1.15); mix-blend-mode: multiply; opacity: .75; transition: opacity .2s ease; }
.press a:hover img { opacity: 1; }
@media (max-width: 720px) { .press { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 20px; } .press img { max-height: 24px; } }

/* Kalender */
.calendar-shell { background: var(--white); border-radius: var(--radius); padding: clamp(6px, calc(1.2 * var(--vw)), 18px); min-height: 640px; }
.calendar-note { margin-top: 14px; font-size: .9rem; }

/* Galerie */
.gallery { columns: 4; column-gap: var(--gap); }
.gallery img { width: 100%; margin-bottom: var(--gap); border-radius: 12px; break-inside: avoid; }
@media (max-width: 820px) { .gallery { columns: 2; } }

/* PMP */
.member-hint { margin-top: 14px; font-size: .9rem; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.tags li { padding: 6px 13px; background: var(--white); border-radius: 999px; font-size: .86rem; font-weight: 500; }
.expert img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: 50% 15%; }
.expert .role { font-size: .68rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.num-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: var(--gap); list-style: none; margin: 0; padding: 0; counter-reset: n; }
.num-list li { display: flex; flex-direction: column; padding: clamp(14px, calc(1.4 * var(--vw)), 18px); background: var(--white); border-radius: 12px; counter-increment: n; font-size: .9rem; line-height: 1.45; }
.num-list li::before { content: "0" counter(n); padding-bottom: 16px; font-size: .72rem; font-weight: 600; color: var(--ink-soft); }
.num-list strong { display: block; font-size: 1rem; font-weight: 600; letter-spacing: -.01em; line-height: 1.25; margin-bottom: 4px; }
.plan { display: flex; flex-direction: column; gap: 12px; padding: clamp(16px, calc(1.8 * var(--vw)), 26px); background: var(--white); color: var(--ink); border-radius: var(--radius); }
.plan .amount { font-size: clamp(2rem, calc(3.2 * var(--vw)), 2.8rem); font-weight: 800; line-height: 1; letter-spacing: -.04em; }
.plan .btn { margin-top: auto; background: var(--ink); border-color: var(--ink); color: var(--on-dark); }
.plan .btn:hover { background: transparent; color: var(--ink); }
.plan .checks { margin-bottom: 12px; font-size: .92rem; }

.video-consent { display: grid; place-items: center; width: 100%; aspect-ratio: 16 / 9; padding: 20px; border: 0; border-radius: var(--radius); background: var(--ink); color: var(--on-dark); font: inherit; text-align: center; cursor: pointer; }
.video-consent .play { display: grid; place-items: center; width: 56px; height: 56px; border: 1px solid var(--on-dark); border-radius: 50%; font-size: 1rem; transition: background-color .2s ease, color .2s ease; }
.video-consent:hover .play { background: var(--on-dark); color: var(--ink); }
.video-consent strong { font-weight: 600; }
.video-consent small { display: block; max-width: 44ch; margin-top: 4px; opacity: .75; font-size: .76rem; line-height: 1.35; }
.video-frame { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--radius); }

/* FAQ */
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; justify-content: space-between; gap: 20px; padding: 14px 0; font-weight: 500; font-size: clamp(.98rem, calc(1.15 * var(--vw)), 1.08rem); letter-spacing: -.01em; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; font-size: 1.3rem; font-weight: 400; line-height: 1; transition: transform .2s ease; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .answer { padding: 0 0 18px; max-width: 70ch; }
.faq ul { margin: 8px 0; padding-left: 20px; }

/* Formulare */
.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.form label { display: block; font-size: .86rem; font-weight: 500; }
.form .full { grid-column: 1 / -1; }
.form input[type=text], .form input[type=email], .form textarea { display: block; width: 100%; margin-top: 5px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 10px; background: var(--white); color: var(--ink); font: 400 1rem/1.4 var(--font); }
.form textarea { min-height: 130px; resize: vertical; }
.form .check { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; }
.form .check input { width: 18px; height: 18px; margin-top: 1px; flex: none; accent-color: var(--orange); }
.form .hp { position: absolute; left: -9999px; }
.form-status { grid-column: 1 / -1; margin: 0; font-weight: 500; }
.form-status:empty { display: none; }
.form button { justify-self: start; }
@media (max-width: 560px) { .form { grid-template-columns: minmax(0, 1fr); } }

/* Rechtstexte */
.legal h2 { font-size: clamp(1.1rem, calc(1.6 * var(--vw)), 1.35rem); margin: 2em 0 .5em; line-height: 1.25; letter-spacing: -.02em; }
.legal h2:first-child { margin-top: 0; }
.legal h3 { font-size: .98rem; letter-spacing: 0; margin: 1.5em 0 .4em; }
.legal p, .legal li { overflow-wrap: anywhere; }

/* Fußzeile */
.site-footer { background: var(--ink); color: var(--on-dark); padding-top: clamp(32px, calc(4 * var(--vw)), 52px); overflow: hidden; font-size: .92rem; }
.footer-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 28px 24px; }
.site-footer .logo-foot { width: 130px; margin-bottom: 14px; }
.site-footer h2 { font-size: .68rem; font-weight: 600; line-height: 1.3; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 12px; color: var(--on-dark-soft); }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 5px; }
.site-footer a:not(.btn) { text-decoration: none; }
.site-footer a:not(.btn):hover { text-decoration: underline; text-underline-offset: 3px; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; margin-top: 30px; padding-top: 14px; border-top: 1px solid var(--line-dark); font-size: .8rem; color: var(--on-dark-soft); }
.footer-mark { margin: 14px 0 -.2em; font-size: clamp(4rem, calc(19.5 * var(--vw)), 19rem); font-weight: 500; letter-spacing: -.05em; line-height: .95; text-align: center; white-space: nowrap; color: rgba(248, 246, 242, .07); user-select: none; }
@media (max-width: 820px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer-brand { grid-column: 1 / -1; } }

/* Perimenopower: Farben aus dem PMP-Mitgliederbereich */
[data-page="pmp"] { background: var(--cream); }
.pmp-hero { position: relative; overflow: hidden; background: var(--cream); isolation: isolate; }
.pmp-hero::before, .pmp-hero::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; filter: blur(70px); }
.pmp-hero::before { width: 460px; height: 460px; right: 4%; top: -60px; background: var(--lavender); }
.pmp-hero::after { width: 380px; height: 380px; left: -90px; bottom: -130px; background: var(--lime); opacity: .85; }
.pmp-hero-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(24px, calc(4 * var(--vw)), 60px); align-items: center; }
.pmp-logo { width: clamp(132px, calc(12 * var(--vw)), 176px); margin-bottom: clamp(16px, calc(2 * var(--vw)), 26px); }
.pmp-hero h1 { font-size: clamp(2.3rem, calc(4.8 * var(--vw)), 4.4rem); font-weight: 900; }
.pmp-hero-img img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; border-radius: var(--radius); }
@media (max-width: 820px) { .pmp-hero-grid { grid-template-columns: minmax(0, 1fr); } }
.mark { padding: 0 .14em; border-radius: .14em; background: var(--lime); color: var(--ink); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.mark-lav { background: var(--lavender); }
.btn-pmp { background: var(--orange); border-color: var(--orange); color: var(--ink); font-weight: 700; }
.btn-pmp:hover { background: var(--ink); border-color: var(--ink); color: var(--on-dark); }
.bg-lime { background: var(--lime); }
.bg-lavender { background: var(--lavender); }
.bg-cream { background: var(--cream); }
.bg-orange { background: var(--orange); }
.pmp-band { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px clamp(24px, calc(4 * var(--vw)), 60px); align-items: end; }
.pmp-band .tag { display: inline-block; justify-self: end; padding: 7px 14px; border-radius: 999px; background: var(--lavender); color: var(--ink); font-size: .84rem; font-weight: 600; }
@media (max-width: 760px) { .pmp-band { grid-template-columns: minmax(0, 1fr); } .pmp-band .tag { justify-self: start; } }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { min-height: 44px; padding: 8px 16px; border: 1.5px solid var(--ink); border-radius: 999px; background: var(--white); color: var(--ink); font: 500 .92rem/1.2 var(--font); cursor: pointer; transition: background-color .15s ease; }
.chip:hover { background: var(--cream); }
.chip[aria-pressed="true"] { background: var(--lime); font-weight: 700; }
.chip[aria-pressed="true"]::before { content: "✓ "; }
.chip-result { min-height: 1.6em; margin: 14px 0 0; font-weight: 600; }
.checks-pmp li { position: relative; padding: 10px 0 10px 34px; border-color: rgba(40, 40, 40, .2); }
.checks-pmp li::before { content: "✓"; position: absolute; left: 0; top: 10px; display: grid; place-items: center; width: 23px; height: 23px; border-radius: 50%; background: var(--lime); font-size: .78rem; font-weight: 700; }
.bg-ink .checks-pmp li { border-color: var(--line-dark); }
.pmp-tile { padding: clamp(18px, calc(2 * var(--vw)), 28px); border-radius: var(--radius); color: var(--ink); }
.pmp-tile h3 { margin-bottom: 10px; font-size: clamp(1.15rem, calc(1.6 * var(--vw)), 1.45rem); font-weight: 700; }
.pmp-tile.lime, .num-list li.lime { background: var(--lime); }
.pmp-tile.lav, .num-list li.lav { background: var(--lavender); }
.pmp-tile.orange, .num-list li.orange { background: var(--orange); }
.num-list li.dark { background: var(--lime); }
[data-page="pmp"] .num-list li::before { color: inherit; opacity: .7; }
[data-page="pmp"] .expert .role { align-self: flex-start; padding: 4px 10px; border-radius: 999px; background: var(--lavender); color: var(--ink); }
[data-page="pmp"] .expert h3 { font-weight: 700; }
.plan.p-lime { background: var(--lime); }
.plan.p-lav { background: var(--lavender); }
.plan.p-lime .checks li, .plan.p-lav .checks li { border-color: rgba(40, 40, 40, .22); }
.plan-price .amount { margin-right: 8px; }
.plan-note { margin: -4px 0 0; font-size: .86rem; font-weight: 600; }
[data-page="pmp"] .faq details { border-color: rgba(40, 40, 40, .22); }
[data-page="pmp"] .video-consent { background: var(--lavender); color: var(--ink); }
[data-page="pmp"] .video-consent .play { background: var(--orange); border-color: var(--orange); color: var(--ink); }
[data-page="pmp"] .video-consent:hover .play { background: var(--ink); border-color: var(--ink); color: var(--on-dark); }
[data-page="pmp"] .site-footer { background: #5e5850; }
[data-page="pmp"] .site-footer h2, [data-page="pmp"] .footer-bottom { color: #e6e0d6; }
.pmp-part2-tags .tag { padding: 7px 14px; border-radius: 999px; background: var(--white); color: var(--ink); font-size: .88rem; font-weight: 500; }
.pmp-part2-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
@media (max-width: 820px) { [data-page="pmp"] .mobile-bar { grid-template-columns: 1fr; } [data-page="pmp"] .mobile-bar .btn:not(.btn-accent) { display: none; } }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; } }

/* Im Bearbeiten-Modus entfernte Elemente (bleiben in der Quelle und sind dort wiederherstellbar) */
:root:not(.edit-mode) [data-removed] { display: none !important; }
.card:has(> [style*="--mx"], > [style*="--rot"], > [style*="--size"]) { overflow: visible; }
.card-media[style*="--mx"] { border-radius: var(--radius); }

/* Weicher Übergang von den Leistungen zu den Programmen */
.fade-to-paper { padding-bottom: calc(var(--section) + clamp(50px, calc(7 * var(--vw)), 110px)); background: linear-gradient(180deg, var(--deep) 0%, var(--deep) calc(100% - clamp(90px, calc(13 * var(--vw)), 200px)), var(--paper) 100%); }

/* Bewegung beim Scrollen. Die Klasse setzt site.js, ohne JavaScript bleibt alles sichtbar. */
.has-motion .reveal { opacity: 0; translate: 0 26px; transition: opacity .75s cubic-bezier(.2, .7, .2, 1) var(--d, 0s), translate .75s cubic-bezier(.2, .7, .2, 1) var(--d, 0s), scale .75s cubic-bezier(.2, .7, .2, 1) var(--d, 0s); }
.has-motion .chip.reveal { translate: 0 16px; scale: .82; }
.has-motion .reveal.in { opacity: 1; translate: none; scale: none; }
.has-motion .mark { background: linear-gradient(var(--lime), var(--lime)) no-repeat 0 0 / 0% 100%; transition: background-size 1s cubic-bezier(.2, .7, .2, 1) .35s; }
.has-motion .mark-lav { background-image: linear-gradient(var(--lavender), var(--lavender)); }
.has-motion .mark.in { background-size: 100% 100%; }
.has-motion .tab-panel:not([hidden]) { animation: panel-in .45s ease; }
@keyframes panel-in { from { opacity: 0; translate: 0 10px; } to { opacity: 1; translate: none; } }

/* Farbflächen, die beim Scrollen mitwandern */
[data-page="pmp"] .bg-lavender { position: relative; overflow: hidden; isolation: isolate; }
[data-page="pmp"] .bg-lavender::before, [data-page="pmp"] .bg-lavender::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; filter: blur(60px); pointer-events: none; }
[data-page="pmp"] .bg-lavender::before { width: 420px; height: 420px; left: -8%; top: -30%; background: var(--lime); opacity: .55; translate: calc(var(--sy, 0) * .05px) calc(var(--sy, 0) * -.06px); }
[data-page="pmp"] .bg-lavender::after { width: 380px; height: 380px; right: -6%; bottom: -40%; background: #fff; opacity: .6; translate: calc(var(--sy, 0) * -.05px) calc(var(--sy, 0) * -.09px); }
.pmp-hero::before { translate: 0 calc(var(--sy, 0) * .12px); }
.pmp-hero::after { translate: 0 calc(var(--sy, 0) * -.1px); }
@media (prefers-reduced-motion: reduce) { [data-page="pmp"] .bg-lavender::before, [data-page="pmp"] .bg-lavender::after, .pmp-hero::before, .pmp-hero::after { translate: none; } }

/* Kopfzeile ohne Hintergrund: oben frei, beim Scrollen eine warme, durchscheinende Fläche */
.site-header { top: 0; left: 0; right: 0; max-width: none; border-radius: 0; background: none; box-shadow: none; color: var(--ink); transition: color .25s ease; }
.site-header::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(62, 46, 34, .52); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); opacity: 0; transition: opacity .25s ease; pointer-events: none; }
.site-header.scrolled::before { opacity: 1; }
.header-inner { max-width: 1320px; margin-inline: auto; padding-inline: var(--gutter); min-height: calc(var(--bar-h) + 10px); }
.logo img { transition: filter .25s ease; }
.nav-top { position: relative; padding: 7px 10px; font-weight: 600; border-radius: 0; background: none !important; }
.nav-top::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 2px; height: 1.5px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .25s ease; }
.nav-top:hover::after, .has-sub:hover > .nav-top::after, [aria-current="page"].nav-top::after { transform: scaleX(1); }
.site-header.scrolled, [data-page="home"] .site-header, body:has(main > .lx-sub:first-child) .site-header { color: #fff; }
.site-header.scrolled .logo img, [data-page="home"] .logo img, body:has(main > .lx-sub:first-child) .logo img { filter: none; }
@media (max-width: 820px) {
  .site-header:has(.main-nav.open) { color: var(--ink); }
  .site-header:has(.main-nav.open)::before { opacity: 0; }
  .site-header:has(.main-nav.open) .logo img { filter: brightness(0) saturate(100%); }
  .nav-top { padding: 12px 0; font-weight: 500; }
  .nav-top::after { display: none; }
}

/* Startseite im Collage-Stil */
body:not([data-page="pmp"]) { --paper: #f4ecdf; --beige: #e9dcc7; --sand: #e9dcc7; background: var(--paper); }
[data-page="home"] main h2, [data-page="home"] main h3, [data-page="home"] main h4 { font-weight: 900; }

.lx-hero { position: relative; height: calc(100svh - 0px); min-height: 520px; max-height: 980px; padding: 0 !important; overflow: hidden; background: var(--hero); isolation: isolate; }
.lx-hero-img { position: absolute; inset: 44px 0 0; z-index: -2; width: min(100%, 118vh); height: calc(100% - 44px); margin-inline: auto; object-fit: cover; object-position: 50% 19%; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16%, #000 84%, transparent 100%), linear-gradient(180deg, transparent 0, #000 70px); mask-image: linear-gradient(90deg, transparent 0, #000 16%, #000 84%, transparent 100%), linear-gradient(180deg, transparent 0, #000 70px); -webkit-mask-composite: source-in; mask-composite: intersect; }
.lx-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(62, 40, 24, .42) 0, rgba(62, 40, 24, 0) 20%, rgba(62, 40, 24, 0) 45%, rgba(62, 40, 24, .55) 100%); }
.lx-hero-copy { position: absolute; left: 0; right: 0; bottom: 0; color: #fff; text-align: center; }
.lx-hero-copy p { margin: 0 0 clamp(8px, calc(1 * var(--vw)), 14px); font-size: clamp(.92rem, calc(1.25 * var(--vw)), 1.15rem); font-weight: 700; }
.lx-welcome { font-size: .46em; letter-spacing: -.035em; }
.lx-hero-copy h1 { margin: 0 0 -.15em; font-size: calc(17.2 * var(--vw)); font-weight: 900; line-height: .86; letter-spacing: -.045em; hyphens: none; white-space: nowrap; }

.lx-about { padding-top: clamp(40px, calc(5 * var(--vw)), 72px); overflow: hidden; }
.lx-about-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(20px, calc(3 * var(--vw)), 48px); align-items: end; }
.lx-about-text { position: relative; z-index: 3; align-self: center; padding-bottom: clamp(24px, calc(3 * var(--vw)), 48px); }
.lx-about-title { margin: 0 0 14px; font-size: clamp(1.6rem, calc(3 * var(--vw)), 2.7rem); line-height: 1.04; letter-spacing: -.04em; }
.lx-about-text .lead { margin: 0; font-size: clamp(1.02rem, calc(1.4 * var(--vw)), 1.24rem); font-weight: 500; line-height: 1.5; }
.lx-mark { background: linear-gradient(rgba(248, 152, 27, .38), rgba(248, 152, 27, .38)) no-repeat 0 100% / 100% 100%; }
.has-motion .lx-mark { background-size: 0% 100%; transition: background-size 1s cubic-bezier(.2, .7, .2, 1) .35s; }
.has-motion .lx-mark.in { background-size: 100% 100%; }
.lx-sign { margin: 10px 0 20px; font-weight: 800; }
.lx-stats { display: flex; flex-wrap: wrap; gap: 12px 30px; margin: 26px 0 0; padding: 0; list-style: none; font-size: .82rem; }
.lx-stats b { display: block; font-size: 1.05rem; font-weight: 900; }
.lx-about-visual { position: relative; display: flex; justify-content: flex-end; min-height: clamp(380px, calc(40 * var(--vw)), 580px); }
.lx-cut { position: absolute; right: 0; bottom: 0; z-index: 2; width: min(56%, 420px); height: auto; filter: drop-shadow(0 8px 18px rgba(60, 44, 30, .22)); }
.lx-polaroid { position: absolute; z-index: 3; width: clamp(104px, calc(13 * var(--vw)), 176px); margin: 0; padding: 7px 7px 26px; background: #fbf8f2; box-shadow: 0 8px 22px rgba(60, 44, 30, .24); }
.lx-polaroid img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.lx-pol-a { left: 2%; top: 14%; rotate: -7deg; }
.lx-pol-b { left: 16%; bottom: 7%; rotate: 6deg; }

.sticker { position: absolute; z-index: 4; display: block; rotate: calc(var(--r, 0deg) + var(--p, 0) * var(--dr, 0) * 1deg); translate: calc(var(--p, 0) * var(--dx, 0) * 1px) calc(var(--p, 0) * var(--dy, 0) * 1px); }
.has-motion .sticker { opacity: 0; scale: .5; transition: opacity .5s ease, scale .6s cubic-bezier(.3, 1.5, .5, 1); }
.has-motion .sticker.in { opacity: 1; scale: 1; }
.sticker-text { padding: 7px 14px; background: #edb3d9; border: 2.5px solid #1d1d1b; border-radius: 6px; box-shadow: 0 0 0 7px #edb3d9; font-size: clamp(.95rem, calc(1.5 * var(--vw)), 1.3rem); font-weight: 900; letter-spacing: -.02em; line-height: 1; white-space: nowrap; }

.lx-press { position: relative; z-index: 3; padding: 14px 0; background: var(--beige); }
.lx-press .wrap { display: flex; align-items: center; gap: clamp(16px, calc(3 * var(--vw)), 44px); }
.lx-press-title { flex: none; margin: 0; font-size: .74rem; font-weight: 800 !important; letter-spacing: .02em; }
.lx-press .press { flex: 1; gap: clamp(12px, calc(2.4 * var(--vw)), 36px); }
.lx-press .press a, .lx-press .press span { height: 30px; }
.lx-press .press img { max-height: 20px; }

.lx-offers-sec { position: relative; padding: clamp(52px, calc(6.5 * var(--vw)), 96px) 0; overflow: hidden; isolation: isolate; background: #6b5848; }
.lx-offers-bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.lx-offers-sec::after { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(66, 48, 34, .42); }
.lx-center { text-align: center; }
.lx-white { color: #fff; }
.lx-offers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, calc(1.4 * var(--vw)), 20px); max-width: 1060px; margin: clamp(22px, calc(3 * var(--vw)), 40px) auto 0; }
.lx-offer { display: flex; flex-direction: column; align-items: flex-start; padding: clamp(18px, calc(2 * var(--vw)), 28px); border-radius: var(--radius); background: var(--beige); }
.lx-offer h3 { margin: 6px 0 8px; font-size: clamp(1.1rem, calc(1.5 * var(--vw)), 1.35rem); line-height: 1.12; }
.lx-offer p { margin: 0 0 18px; font-size: .9rem; line-height: 1.45; }
.lx-offer .btn { margin-top: auto; }
.lx-price { font-size: .78rem; font-weight: 700; }
/* Beim Hereinscrollen öffnen sich die Felder von der Mitte nach links und rechts */
.has-motion .lx-offer { opacity: 0; transition: opacity .6s ease, translate 1s cubic-bezier(.2, .8, .2, 1), scale 1s cubic-bezier(.2, .8, .2, 1); }
.has-motion .lx-offer:nth-child(1) { translate: calc(100% + clamp(10px, calc(1.4 * var(--vw)), 20px)) 0; scale: .94; }
.has-motion .lx-offer:nth-child(2) { position: relative; z-index: 1; scale: .94; }
.has-motion .lx-offer:nth-child(3) { translate: calc(-100% - clamp(10px, calc(1.4 * var(--vw)), 20px)) 0; scale: .94; }
.has-motion .lx-offers.open .lx-offer { opacity: 1; translate: none; scale: none; }

.lx-slogan-sec { padding: clamp(44px, calc(5.4 * var(--vw)), 80px) 0 clamp(44px, calc(5.4 * var(--vw)), 76px); overflow: hidden; }
.lx-slogan { position: relative; max-width: 980px; margin-inline: auto; padding: clamp(36px, calc(5 * var(--vw)), 70px) 0; text-align: center; }
.lx-slogan h2 { font-size: clamp(1.9rem, calc(4.6 * var(--vw)), 4rem); line-height: 1.02; letter-spacing: -.04em; }
.st-a { width: clamp(76px, calc(10 * var(--vw)), 140px); left: 1%; top: 2%; }
.st-b { width: clamp(52px, calc(7 * var(--vw)), 96px); right: 4%; top: 0; }
.st-c { width: clamp(50px, calc(6.6 * var(--vw)), 90px); left: 7%; bottom: 0; }
.st-d { width: clamp(76px, calc(10 * var(--vw)), 142px); right: 0; bottom: 3%; }
.st-e { width: clamp(30px, calc(3.8 * var(--vw)), 52px); left: 66%; top: -4%; }
.st-f { width: clamp(28px, calc(3.6 * var(--vw)), 50px); left: 33%; bottom: -5%; }
.st-g { right: 28%; bottom: -1%; }

.lx-prog-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-top: clamp(26px, calc(3 * var(--vw)), 44px); }
.lx-prog-head h3 { font-size: clamp(1.15rem, calc(1.8 * var(--vw)), 1.6rem); letter-spacing: -.03em; }
.lx-progs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); margin-top: 14px; }
.lx-prog { display: block; color: inherit; text-decoration: none; }
.lx-prog img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; transition: scale .35s ease; }
.lx-prog:hover img { scale: 1.02; }
.lx-prog h4 { margin: 10px 0 2px; font-size: .95rem; line-height: 1.15; letter-spacing: -.02em; }
.lx-prog p { margin: 0; font-size: .8rem; line-height: 1.35; color: var(--ink-soft); }

@media (max-width: 820px) {
  .lx-hero { height: calc(100svh - 64px); }
  .lx-about-grid { grid-template-columns: minmax(0, 1fr); }
  .lx-about-text { padding-bottom: 0; }
  .lx-about-visual { min-height: 380px; }
  .lx-cut { width: 78%; right: -4%; }
  .lx-hero-img { top: 30px; height: calc(100% - 30px); object-position: 50% 0; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 50px); mask-image: linear-gradient(180deg, transparent 0, #000 50px); }
  .lx-pol-a { left: 0; top: 2%; }
  .lx-pol-b { left: 0; bottom: 6%; }
  .lx-press .wrap { display: block; }
  .lx-press-title { margin-bottom: 8px; text-align: center; }
  .lx-offers { grid-template-columns: minmax(0, 1fr); }
  .has-motion .lx-offer:nth-child(1), .has-motion .lx-offer:nth-child(3) { translate: -60px 0; }
  .has-motion .lx-offer:nth-child(2) { translate: 60px 0; }
  .has-motion .lx-offer.in { opacity: 1; translate: none; scale: none; }
  .lx-slogan { padding: 64px 0 74px; }
  .st-e { left: 60%; top: 2%; }
  .st-f { left: 40%; bottom: 0; }
  .st-g { right: auto; left: 28%; bottom: 8%; display: none; }
  .lx-progs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 10px; }
}

/* Unterseiten im Stil der Startseite (Perimenopower behält seine eigenen Farben) */
body:not([data-page="pmp"]):not([data-page="home"]) main h1, body:not([data-page="pmp"]):not([data-page="home"]) main h2 { font-weight: 400; letter-spacing: -.04em; }
body:not([data-page="pmp"]) .bg-white { background: #faf5ec; }
body:not([data-page="pmp"]) .bg-stone, body:not([data-page="pmp"]) .bg-light { background: var(--beige); }
body:not([data-page="pmp"]) .bg-ink { background: var(--beige); color: var(--ink); }
body:not([data-page="pmp"]) .bg-ink .muted { color: var(--ink-soft); }
body:not([data-page="pmp"]) main .btn, body:not([data-page="pmp"]) main .bg-ink .btn { background: var(--orange); border-color: var(--orange); color: var(--ink); }
body:not([data-page="pmp"]) main .btn:hover, body:not([data-page="pmp"]) main .bg-ink .btn:hover { background: var(--ink); border-color: var(--ink); color: var(--on-dark); }
body:not([data-page="pmp"]) main .btn + .btn:not(.btn-accent) { background: transparent; border-color: var(--ink); color: var(--ink); }
body:not([data-page="pmp"]) main .btn + .btn:not(.btn-accent):hover { background: var(--ink); color: var(--on-dark); }
body:not([data-page="pmp"]) .card { background: var(--beige); }
body:not([data-page="pmp"]) .tags li { background: var(--beige); border-radius: 8px; }
body:not([data-page="pmp"]) .calendar-shell { background: #faf5ec; }

/* Kopf der Unterseiten: Foto mit großem Titel, unten leicht abgeschnitten */
.lx-sub { position: relative; height: clamp(380px, 66vh, 640px); padding: 0 !important; overflow: hidden; background: var(--hb, var(--hero)); isolation: isolate; }
.lx-sub-img { position: absolute; inset: 40px 0 0; z-index: -2; width: min(100%, 118vh); height: calc(100% - 40px); margin-inline: auto; object-fit: cover; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16%, #000 84%, transparent 100%), linear-gradient(180deg, transparent 0, #000 60px); mask-image: linear-gradient(90deg, transparent 0, #000 16%, #000 84%, transparent 100%), linear-gradient(180deg, transparent 0, #000 60px); -webkit-mask-composite: source-in; mask-composite: intersect; }
.lx-sub-cover .lx-sub-img { inset: 0; width: 100%; height: 100%; -webkit-mask-image: none; mask-image: none; }
.lx-sub::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(62, 40, 24, .42) 0, rgba(62, 40, 24, 0) 24%, rgba(62, 40, 24, 0) 42%, rgba(62, 40, 24, .55) 100%); }
.lx-sub h1 { position: absolute; left: 0; right: 0; bottom: 0; margin: 0 0 -.14em; color: #fff; font-size: var(--fs, calc(12 * var(--vw))); line-height: .9; text-align: center; white-space: nowrap; hyphens: none; }

.lx-sub h1.lx-desc { margin-bottom: -.01em; }

.lx-stick { position: relative; overflow: clip; }
.lx-stick .sticker { width: var(--w, 80px); }
.sticker.at-tl { top: 8%; left: 3%; }
.sticker.at-tr { top: 8%; right: 3%; }
.sticker.at-bl { bottom: 6%; left: 2%; }
.sticker.at-br { bottom: 8%; right: 3%; }
.lx-lead-sec { padding-block: clamp(36px, calc(4.6 * var(--vw)), 64px); }
.lx-lead { text-align: center; }
.lx-lead .btn-row { justify-content: center; }
.lx-lead .price { margin-bottom: 10px; }

/* Fotos als Polaroid */
.split-img, .lx-framed { padding: 8px 8px 30px; background: #fbf8f2; box-shadow: 0 8px 22px rgba(60, 44, 30, .2); rotate: -1.5deg; }
.split-img img, .lx-framed img { border-radius: 0; }
.wrap.split:not(.top) > div:first-child.split-img { rotate: 1.5deg; }
.lx-framed { width: fit-content; rotate: 2deg; }
[data-page="pmp"] .split-img { padding: 0; background: none; box-shadow: none; rotate: none; }
.gallery img { padding: 6px; background: #fbf8f2; box-shadow: 0 4px 14px rgba(60, 44, 30, .16); border-radius: 0; }
.gallery img:nth-child(odd) { rotate: -1deg; }
.gallery img:nth-child(even) { rotate: 1deg; }

/* Karten auf der Leistungen-Seite öffnen sich wie auf der Startseite */
.lx-offers-cards { max-width: 1320px; margin-top: 0; }
.card.lx-offer { padding: 0; align-items: stretch; }
.lx-cards .card-body p { font-size: .88rem; line-height: 1.45; }
.lx-cards .btn-row { gap: 6px; }

@media (max-width: 820px) {
  .lx-sub { height: calc(62svh - 40px); min-height: 340px; }
  .lx-sub-img { inset: 26px 0 0; height: calc(100% - 26px); -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 44px); mask-image: linear-gradient(180deg, transparent 0, #000 44px); }
  .lx-sub-cover .lx-sub-img { inset: 0; height: 100%; }
  .lx-stick .sticker { width: calc(var(--w, 80px) * .72); }
  .sticker.at-tl, .sticker.at-tr { top: 10px; }
  .sticker.at-bl, .sticker.at-br { bottom: 10px; }
  .lx-lead-sec { padding-block: 66px; }
  .lx-cards { grid-template-columns: minmax(0, 1fr); }
  .split-img { rotate: none !important; }
}

/* Handy und Tablet: Login oben statt Leiste unten */
@media (max-width: 820px) {
  .mobile-bar { display: none !important; }
  body { padding-bottom: 0 !important; }
  .header-actions .btn-login { display: inline-flex; min-height: 34px; padding: 5px 13px; font-size: .74rem; }
}

/* Handy: kompakter, Felder zum Wischen statt langer Stapel */
@media (max-width: 820px) {
  :root { --section: 40px; }
  .lx-hero { height: min(92svh, 720px); min-height: 500px; }
  .lx-hero-img { top: 24px; height: calc(112% - 24px); object-position: 50% 0; }
  .lx-hero::after { background: linear-gradient(180deg, rgba(62, 40, 24, .42) 0, rgba(62, 40, 24, 0) 18%, rgba(62, 40, 24, 0) 58%, rgba(62, 40, 24, .62) 100%); }
  .lx-about { padding-top: 34px; }
  .lx-about-grid { gap: 14px; }
  .lx-about-text .lead { font-size: 1rem; }
  .lx-sign { margin: 8px 0 14px; }
  .lx-stats { flex-wrap: nowrap; gap: 20px; margin-top: 20px; }
  .lx-stats li { flex: 1; }
  .lx-about-visual { min-height: 340px; }
  .lx-polaroid { width: 104px; padding: 5px 5px 18px; }
  .lx-press { padding: 12px 0; }
  .lx-press .press { gap: 2px 14px; }
  .lx-press .press a, .lx-press .press span { height: 26px; }
  .lx-press .press img { max-height: 15px; }

  .lx-offers-sec { padding: 36px 0 34px; }
  .lx-offers, .wrap.lx-offers-cards, .wrap.lx-cards, .ig-grid { display: flex; max-width: none; gap: 10px; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .wrap.lx-offers-cards, .wrap.lx-cards { margin-inline: 0; }
  .lx-offers::-webkit-scrollbar, .wrap.lx-cards::-webkit-scrollbar, .ig-grid::-webkit-scrollbar { display: none; }
  .lx-offers > *, .wrap.lx-cards > * { flex: 0 0 min(80%, 320px); scroll-snap-align: start; }
  .ig-grid > * { flex: 0 0 56%; scroll-snap-align: start; }
  .lx-offer { padding: 18px; }
  .lx-offer p { margin-bottom: 14px; }
  .has-motion .lx-offer:nth-child(n) { translate: 36px 0; scale: none; }
  .has-motion .lx-offer.in:nth-child(n) { translate: none; }

  .lx-slogan-sec { padding: 26px 0 40px; }
  .lx-slogan { padding: 66px 0 70px; }
  .lx-slogan .st-e { left: 50%; top: 2%; }
  .lx-slogan .sticker { --dy: 0 !important; }
  .lx-prog-head { margin-top: 10px; }
  .lx-prog p { font-size: .76rem; }
  .photo-banner { min-height: 0; }
  .footer-grid { gap: 22px 16px; }
  .footer-mark { display: none; }
  .lx-sub { height: 58svh; min-height: 320px; }
}

@media (max-width: 820px) {
  .site-header:has(.main-nav.open) { color: var(--ink) !important; }
  .site-header:has(.main-nav.open) .logo img { filter: brightness(0) saturate(100%) !important; }
}
@media (max-width: 820px) {
  .about-split { grid-template-columns: minmax(0, 1fr); }
  .about-split .order-first { order: 2; }
  .about-photo.lx-framed { margin-inline: auto; padding: 6px 6px 22px; }
  .about-photo.lx-framed img { max-height: 300px; }
}

/* Im Bearbeiten-Modus fürs Handy gesetzte Werte. Sie gelten nur am Handy, die Desktop-Werte nur am Desktop. */
@property --mmx { syntax: "<number>"; inherits: false; initial-value: 0; }
@property --mmy { syntax: "<number>"; inherits: false; initial-value: 0; }
@property --mrot { syntax: "<number>"; inherits: false; initial-value: 0; }
@property --msize { syntax: "<number>"; inherits: false; initial-value: 1; }
@property --mox { syntax: "<number>"; inherits: false; initial-value: 50; }
@media (max-width: 820px) {
  [style*="--mmx"], [style*="--mrot"], [style*="--msize"] { transform: translate(calc(var(--mmx) * calc(1 * var(--vw))), calc(var(--mmy) * calc(1 * var(--vw)))) rotate(calc(var(--mrot) * 1deg)) scale(var(--msize)); transform-origin: calc(var(--mox) * 1%) 50%; }
  a[style*="--mmx"], a[style*="--mrot"], a[style*="--msize"], span[style*="--mmx"], span[style*="--mrot"], span[style*="--msize"] { display: inline-block; }
  [style*="--mfw"], [style*="--mfw"] * { font-weight: var(--mfw) !important; }
  :root:not(.edit-mode) [data-removed-m] { display: none !important; }
}

/* Desktop skaliert als Ganzes mit dem Fenster: gerechnet wird immer für 1920 x 950, zoom passt es an (--z setzt das Skript im Head).
   So bleiben alle Abstände und gespeicherten Positionen gleich und nichts überlappt. Am Handy gilt weiter die eigene Ansicht. */
:root { --vw: 1vw; }
@media (min-width: 821px) {
  :root { --vw: 19.2px; }
  main, .site-header, .site-footer { zoom: var(--z, 1); }
  .lx-hero { height: 950px; min-height: 0; max-height: none; }
  .lx-sub { height: 627px; }
  .lx-hero-img, .lx-sub-img { width: min(100%, 1121px); }
  .about-photo img { max-height: 480px; }
}

/* Perimenopower: Einblick in den Mitgliederbereich */
.pmp-insight-grid { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 44px; align-items: center; }
.pmp-insight figure { margin: 0; }
.pmp-browser { overflow: hidden; border-radius: 14px; background: #fff; box-shadow: 0 18px 44px rgba(60, 44, 30, .2); }
.pmp-browser-bar { display: flex; align-items: center; gap: 7px; padding: 11px 16px; background: #f7f3ee; }
.pmp-browser-bar i { width: 10px; height: 10px; border-radius: 50%; background: #d9d2c8; }
.pmp-browser-bar span { margin-left: 10px; font-size: .72rem; color: var(--ink-soft); }
.pmp-browser img { display: block; width: 100%; height: auto; }
.pmp-phone { padding: 9px; border-radius: 40px; background: #1d1d1b; box-shadow: 0 18px 44px rgba(60, 44, 30, .3); }
.pmp-phone video { display: block; width: 100%; height: auto; border-radius: 32px; background: var(--cream); }
@media (max-width: 820px) {
  .pmp-insight-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .pmp-phone { justify-self: center; width: min(66%, 250px); }
}

/* Perimenopower: Worauf PMP fachlich basiert */
.pmp-basis, .pmp-basis-note { padding: 28px 30px; border-radius: var(--radius); color: var(--ink); }
.pmp-basis { background: var(--cream); }
.pmp-basis-note { width: min(100%, 310px); background: var(--lavender); font-size: .9rem; line-height: 1.5; }

/* Perimenopower: Kennzeichnung auf der Expertinnen-Karte, sitzt auf der Kante zwischen Bild und Text */
.expert-tag { position: relative; z-index: 2; display: block; width: fit-content; height: 26px; margin: -13px 0 -13px 22px; padding: 0 12px; border-radius: 999px; background: var(--lime); color: var(--ink); font-size: .7rem; font-weight: 800; letter-spacing: .06em; line-height: 26px; text-transform: uppercase; }