/* Schriften lokal (keine Verbindung zu Google beim Seitenaufruf) – OFL-lizenziert */
@font-face { font-family: "Jost"; src: url("../fonts/jost-300-500.woff2") format("woff2"); font-weight: 300 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("../fonts/cormorant-garamond-italic-500.woff2") format("woff2"); font-weight: 500; font-style: italic; font-display: swap; }

/* =========================================================
   Simple Glow – Basis-Stylesheet
   Farben & Schriften nach «Design-Richtlinien» (15.10.2026)
   Mobile first: Basis = Handy, Breakpoints ab 600 / 900 / 1200 px
   ========================================================= */

:root {
  --rose: #B76E79;          /* Rose Gold – einzige Akzentfarbe */
  --rose-dark: #8C5560;     /* H2 / Text-Akzent (AA auf Creme) */
  --rose-light: #C98A8F;    /* nur auf dunklem Grund */
  --ink: #2B2426;           /* Warm-Schwarz */
  --ink-soft: #5E5457;
  --cream: #F7F1EE;
  --cream-2: #EFE5E0;
  --white: #FFFFFF;
  --line: rgba(43, 36, 38, .12);
  --dark-bg: #2B2426;       /* bleibt dunkel: Hero, dunkle Sektionen, Footer */
  --on-dark: #F7F1EE;       /* Text auf dunklem Grund */
  --header-bg: rgba(255,255,255,.96);
  --header-bg-scrolled: rgba(255,255,255,.62);
  --header-fade: rgba(255,255,255,.55);
  color-scheme: light;

  --sans: "Jost", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif: "Cormorant Garamond", Georgia, serif;

  --gutter: clamp(1rem, 4vw, 2.5rem);
  --max: 1200px;
  --radius: 4px;
  --section: clamp(4rem, 10vw, 8rem);
  --header-h: 68px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 1rem); }
body {
  margin: 0;
  font-family: var(--sans);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, video, iframe { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--rose); outline-offset: 3px; }

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

/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.narrow { max-width: 760px; }
.section { padding-block: var(--section); }
.section--cream { background: var(--cream); }
.section--dark { background: var(--dark-bg); color: var(--on-dark); }
.grid-2 { display: grid; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
@media (min-width: 900px) { .grid-2 { grid-template-columns: 1fr 1fr; } .grid-2--flip > :first-child { order: 2; } }

/* ---------- Typografie ---------- */
.eyebrow, h2.eyebrow {
  display: block;
  font-size: .75rem; font-weight: 500; letter-spacing: .26em; text-transform: uppercase;
  color: var(--rose-dark); margin: 0 0 1rem;
}
.section--dark .eyebrow { color: var(--rose-light); }
h1, .h1 {
  font-weight: 300; text-transform: uppercase; letter-spacing: .14em;
  font-size: clamp(1.75rem, 5.5vw, 3.25rem); line-height: 1.15; margin: 0 0 1.25rem;
}
h2, .h2 {
  font-weight: 300; text-transform: uppercase; letter-spacing: .12em;
  font-size: clamp(1.4rem, 3.6vw, 2.25rem); line-height: 1.2; margin: 0 0 1.25rem;
}
h3 { font-weight: 500; font-size: 1.125rem; letter-spacing: .02em; margin: 0 0 .5rem; }
p { margin: 0 0 1rem; }
.lead { font-size: clamp(1.05rem, 2vw, 1.2rem); color: var(--ink-soft); max-width: 60ch; }
.section--dark .lead { color: rgba(247, 241, 238, .8); }
.accent { font-family: var(--serif); font-style: italic; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--rose); }
.section--dark .accent { color: var(--rose-light); }
.quote { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: clamp(1.4rem, 3vw, 1.75rem); line-height: 1.35; color: var(--rose-dark); margin: 0 0 1rem; }
.center { text-align: center; }
.center .lead { margin-inline: auto; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 48px; padding: .85rem 1.6rem;
  font-size: .82rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; text-align: center;
  border: 1px solid var(--rose); border-radius: var(--radius);
  background: var(--rose); color: var(--white); cursor: pointer;
  transition: background .2s, color .2s, border-color .2s, transform .2s;
}
.btn:hover { background: var(--rose-dark); border-color: var(--rose-dark); }
.btn:active { transform: translateY(1px); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.section--dark .btn--ghost, .hero .btn--ghost { color: var(--on-dark); border-color: rgba(247,241,238,.7); }
.section--dark .btn--ghost:hover, .hero .btn--ghost:hover { background: var(--on-dark); color: var(--dark-bg); }
.btn--block { width: 100%; }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }
.center .btn-row { justify-content: center; }
.microcopy { font-size: .85rem; color: var(--ink-soft); margin-top: .75rem; }
.section--dark .microcopy, .hero .microcopy { color: rgba(247,241,238,.75); }
.link-arrow { font-size: .8rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; color: var(--rose-dark); border-bottom: 1px solid currentColor; padding-bottom: 2px; }

/* ---------- Header / Navigation ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--header-bg); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header .container { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); gap: 1rem; }
.logo { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; color: var(--ink); }
.logo__mark { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 1.9rem; line-height: 1; color: var(--rose); letter-spacing: -.04em; }
.logo__word { font-size: .78rem; letter-spacing: .32em; text-transform: uppercase; white-space: nowrap; }
.logo__word b { font-weight: 500; color: var(--rose); }

.nav { display: none; }
.nav a { text-decoration: none; font-size: .78rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; padding: .5rem 0; border-bottom: 1px solid transparent; }
.nav a:hover, .nav a[aria-current="page"] { border-color: var(--rose); }
.header-cta { display: none; }

.burger { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin-right: -12px; background: none; border: 0; cursor: pointer; }
.burger span, .burger span::before, .burger span::after { display: block; width: 22px; height: 1.5px; background: var(--ink); position: relative; transition: transform .25s, background .25s; }
.burger span::before, .burger span::after { content: ""; position: absolute; left: 0; }
.burger span::before { top: -7px; } .burger span::after { top: 7px; }
.menu-open .burger span { background: transparent; }
.menu-open .burger span::before { transform: translateY(7px) rotate(45deg); }
.menu-open .burger span::after { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu {
  position: fixed; inset: var(--header-h) 0 0 0; z-index: 49;
  background: var(--cream); padding: 2rem var(--gutter) calc(2rem + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: .25rem; overflow-y: auto;
  transform: translateY(-8px); opacity: 0; visibility: hidden; transition: opacity .25s, transform .25s, visibility .25s;
}
.menu-open .mobile-menu { opacity: 1; transform: none; visibility: visible; }
.mobile-menu a:not(.btn) { text-decoration: none; font-size: 1.15rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 300; padding: .9rem 0; border-bottom: 1px solid var(--line); }
.mobile-menu .btn { margin-top: 1.5rem; }
.mobile-menu .socials { margin-top: 1.5rem; }
.menu-open { overflow: hidden; }

@media (min-width: 1080px) {
  .nav { display: flex; gap: 1.75rem; }
  .header-cta { display: inline-flex; min-height: 42px; padding: .6rem 1.2rem; }
  .burger, .mobile-menu { display: none; }
}

/* ---------- Mobile Sticky-CTA ---------- */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; gap: .5rem; padding: .6rem var(--gutter) calc(.6rem + env(safe-area-inset-bottom));
  background: var(--header-bg); border-top: 1px solid var(--line);
  transform: translateY(110%); transition: transform .3s;
}
.sticky-cta.is-visible { transform: none; }
.sticky-cta .btn { flex: 1; min-height: 46px; padding-inline: .75rem; font-size: .74rem; }
.sticky-cta .btn--wa { flex: 0 0 52px; padding: 0; background: var(--white); color: var(--ink); border-color: var(--line); }
@media (min-width: 900px) { .sticky-cta { display: none; } }
body { padding-bottom: 0; }
@media (max-width: 899px) { .site-footer { padding-bottom: calc(5rem + env(safe-area-inset-bottom)); } }

/* ---------- Hero ---------- */
.hero { position: relative; color: var(--on-dark); background: var(--dark-bg); overflow: hidden; }
.hero__media { position: absolute; inset: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 20%; }
.hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(43,36,38,.15) 0%, rgba(43,36,38,.55) 45%, rgba(43,36,38,.92) 100%); }
.hero .container { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: min(88svh, 820px); padding-block: 6rem 3rem; }
.hero h1 { max-width: 16ch; }
.hero .lead { color: rgba(247,241,238,.88); }
.hero .eyebrow { color: var(--rose-light); }
@media (min-width: 900px) {
  .hero__media::after { background: linear-gradient(90deg, rgba(43,36,38,.92) 0%, rgba(43,36,38,.7) 40%, rgba(43,36,38,.1) 75%); }
  .hero__media img { object-position: 70% 25%; }
  .hero .container { justify-content: center; padding-block: 8rem; }
}
.hero--page .container { min-height: min(60svh, 560px); }

.trust-strip { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid rgba(247,241,238,.2); font-size: .82rem; letter-spacing: .06em; color: rgba(247,241,238,.85); }
.trust-strip span::before { content: "·"; color: var(--rose-light); margin-right: .5rem; }

/* ---------- Karten / Listen ---------- */
.cards { display: grid; gap: 1rem; }
@media (min-width: 600px) { .cards--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .cards--3 { grid-template-columns: repeat(3, 1fr); } .cards--2 { gap: 1.5rem; } }
@media (min-width: 600px) and (max-width: 899px) { .cards--3 { grid-template-columns: repeat(2, 1fr); } }
.card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.5rem, 3vw, 2.25rem); }
.section--cream .card { border-color: transparent; }
.card__num { font-family: var(--serif); font-style: italic; font-size: 1.6rem; color: var(--rose); line-height: 1; margin-bottom: .75rem; display: block; }
.card p:last-child { margin-bottom: 0; }

.offer { display: flex; flex-direction: column; background: var(--white); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
.offer__img { aspect-ratio: 4 / 3; overflow: hidden; }
.offer__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.offer:hover .offer__img img { transform: scale(1.03); }
.offer__body { padding: clamp(1.5rem, 3vw, 2.25rem); display: flex; flex-direction: column; flex: 1; }
.offer__body .btn-row { margin-top: auto; padding-top: 1.25rem; }
.tag { display: inline-block; font-size: .7rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--rose-dark); border: 1px solid currentColor; border-radius: 99px; padding: .2rem .75rem; margin-bottom: 1rem; align-self: flex-start; }

.checklist { list-style: none; padding: 0; margin: 0 0 1.5rem; display: grid; gap: .8rem; }
.checklist li { position: relative; padding-left: 1.9rem; }
.checklist li::before { content: ""; position: absolute; left: 0; top: .35em; width: 1.1rem; height: 1.1rem; border-radius: 50%; border: 1px solid var(--rose); background: radial-gradient(circle, var(--rose) 0 3px, transparent 3.5px); }
.section--dark .checklist li::before { border-color: var(--rose-light); background: radial-gradient(circle, var(--rose-light) 0 3px, transparent 3.5px); }
.checklist--no li::before { background: none; border-color: var(--ink-soft); }
.checklist--no li::after { content: ""; position: absolute; left: .3rem; top: calc(.35em + .53rem); width: .5rem; height: 1px; background: var(--ink-soft); }

/* Bilder */
.img-frame { border-radius: var(--radius); overflow: hidden; background: var(--cream-2); }
.img-frame img { width: 100%; height: 100%; object-fit: cover; }
.ratio-45 { aspect-ratio: 4 / 5; }
.ratio-43 { aspect-ratio: 4 / 3; }
.ratio-169 { aspect-ratio: 16 / 9; }

/* ---------- Schritte ---------- */
.steps { list-style: none; padding: 0; margin: 2.5rem 0 0; display: grid; gap: 0; counter-reset: step; }
.steps li { display: grid; grid-template-columns: 3.25rem 1fr; gap: 1rem; padding: 1.5rem 0; border-top: 1px solid var(--line); counter-increment: step; }
.section--dark .steps li { border-color: rgba(247,241,238,.15); }
.steps li::before { content: "0" counter(step); font-family: var(--serif); font-style: italic; font-size: 1.9rem; line-height: 1; color: var(--rose); }
.section--dark .steps li::before { color: var(--rose-light); }
.steps p { margin: 0; color: var(--ink-soft); }
.section--dark .steps p { color: rgba(247,241,238,.75); }
@media (min-width: 1000px) {
  .steps { grid-template-columns: repeat(5, 1fr); gap: 1.5rem; }
  .steps li { grid-template-columns: 1fr; gap: .75rem; }
}

/* ---------- Testimonials / Ergebnisse ---------- */
.testimonial { display: flex; flex-direction: column; gap: 1rem; }
.testimonial blockquote { margin: 0; font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 1.3rem; line-height: 1.4; }
.testimonial cite { font-style: normal; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.placeholder {
  display: grid; place-items: center; text-align: center; gap: .5rem;
  border: 1px dashed rgba(183,110,121,.6); background: repeating-linear-gradient(135deg, var(--cream) 0 12px, var(--cream-2) 12px 24px);
  color: var(--rose-dark); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; padding: 2rem; border-radius: var(--radius);
}
.section--dark .placeholder { background: rgba(247,241,238,.05); color: var(--rose-light); border-color: rgba(201,138,143,.5); }
.video-ph { aspect-ratio: 16/9; position: relative; overflow: hidden; border-radius: var(--radius); background: var(--dark-bg); color: var(--on-dark); }
.video-ph img { width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.video-ph__inner { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 1rem; text-align: center; padding: 1rem; }
.play { width: 72px; height: 72px; border-radius: 50%; border: 1px solid var(--on-dark); display: grid; place-items: center; }
.play svg { width: 22px; margin-left: 4px; fill: var(--on-dark); }
.video-ph small { font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; }

.stat { font-family: var(--serif); font-style: italic; font-size: clamp(2.5rem, 6vw, 3.5rem); color: var(--rose); line-height: 1; }

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 1rem; align-items: center; padding: 1.25rem 0; font-weight: 500; font-size: 1.05rem; min-height: 48px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 12px; height: 12px; border-right: 1.5px solid var(--rose); border-bottom: 1.5px solid var(--rose); transform: rotate(45deg) translateY(-3px); transition: transform .25s; }
.faq details[open] summary::after { transform: rotate(225deg) translateY(-3px); }
.faq details p { color: var(--ink-soft); padding-bottom: 1.25rem; margin: 0; max-width: 65ch; }

/* ---------- CTA-Band ---------- */
.cta-band { text-align: center; }
.cta-band h2 { max-width: 22ch; margin-inline: auto; }

/* ---------- Formulare ---------- */
.form { display: grid; gap: 1.1rem; }
.form-row { display: grid; gap: 1.1rem; }
@media (min-width: 600px) { .form-row--2 { grid-template-columns: 1fr 1fr; } }
.field label, .field legend { display: block; font-size: .78rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; margin-bottom: .45rem; padding: 0; }
.field input, .field select, .field textarea {
  width: 100%; min-height: 50px; padding: .8rem 1rem; font-size: 1rem; /* 16px verhindert iOS-Zoom */
  background: var(--white); border: 1px solid rgba(43,36,38,.25); border-radius: var(--radius);
  -webkit-appearance: none; appearance: none;
}
.field select { background-image: linear-gradient(45deg, transparent 50%, var(--rose) 50%), linear-gradient(135deg, var(--rose) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 2.5rem; }
.field textarea { min-height: 110px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--rose); box-shadow: 0 0 0 3px rgba(183,110,121,.18); }
fieldset.field { border: 0; margin: 0; padding: 0; min-width: 0; }
.choice-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip span { display: inline-flex; align-items: center; min-height: 44px; padding: .55rem 1.1rem; border: 1px solid rgba(43,36,38,.25); border-radius: 99px; cursor: pointer; font-size: .95rem; transition: all .2s; }
.chip input:checked + span { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.chip input:focus-visible + span { outline: 2px solid var(--rose); outline-offset: 2px; }
.consent { display: flex; gap: .75rem; align-items: flex-start; font-size: .88rem; color: var(--ink-soft); }
.consent input { width: 20px; height: 20px; margin-top: .15rem; accent-color: var(--rose); flex: none; }
.form-note { font-size: .82rem; color: var(--ink-soft); }
.form-success { display: none; padding: 1.5rem; background: var(--cream); border-left: 2px solid var(--rose); }
.form.is-sent { display: none; }
.form.is-sent + .form-success { display: block; }

/* ---------- Quiz ---------- */
.quiz { background: var(--white); border-radius: var(--radius); border: 1px solid var(--line); padding: clamp(1.5rem, 4vw, 3rem); max-width: 760px; margin-inline: auto; }
.quiz__progress { height: 2px; background: var(--cream-2); margin-bottom: 2rem; position: relative; overflow: hidden; }
.quiz__bar { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--rose); transition: width .35s; }
.quiz__count { font-size: .75rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: .75rem; }
.quiz__step { display: none; animation: fade .35s ease; }
.quiz__step.is-active { display: block; }
.quiz__q { font-size: clamp(1.25rem, 3vw, 1.6rem); font-weight: 400; line-height: 1.3; margin: 0 0 1.5rem; text-transform: none; letter-spacing: 0; }
.quiz__options { display: grid; gap: .65rem; }
.quiz__opt { display: flex; align-items: center; gap: 1rem; width: 100%; text-align: left; min-height: 56px; padding: .9rem 1.1rem; background: var(--white); border: 1px solid rgba(43,36,38,.2); border-radius: var(--radius); cursor: pointer; transition: border-color .2s, background .2s; font-size: 1rem; }
.quiz__opt::before { content: ""; flex: none; width: 18px; height: 18px; border-radius: 50%; border: 1px solid rgba(43,36,38,.35); }
.quiz__opt:hover { border-color: var(--rose); }
.quiz__opt.is-selected { border-color: var(--rose); background: var(--cream); }
.quiz__opt.is-selected::before { border-color: var(--rose); background: radial-gradient(circle, var(--rose) 0 5px, transparent 5.5px); }
.quiz__nav { display: flex; justify-content: space-between; align-items: center; margin-top: 1.75rem; gap: 1rem; }
.quiz__back { background: none; border: 0; padding: .75rem 0; cursor: pointer; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.quiz__back[hidden] { visibility: hidden; display: block; }
.quiz__result { display: none; animation: fade .4s ease; }
.quiz__result.is-active { display: block; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- Kalender / Karte ---------- */
.embed { border-radius: var(--radius); overflow: hidden; background: var(--white); border: 1px solid var(--line); }
.embed--calendar { min-height: 680px; }
.embed--map { aspect-ratio: 4 / 3; }
.embed--map iframe { width: 100%; height: 100%; border: 0; filter: grayscale(.6) sepia(.15); }
@media (min-width: 900px) { .embed--map { aspect-ratio: 16 / 10; } }

/* ---------- Social ---------- */
.socials { display: flex; gap: .5rem; flex-wrap: wrap; }
.socials a { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid currentColor; color: var(--ink); transition: background .2s, color .2s, border-color .2s; }
.socials a:hover { background: var(--rose); border-color: var(--rose); color: var(--white); }
.socials svg { width: 18px; height: 18px; fill: currentColor; }
.section--dark .socials a, .site-footer .socials a { color: var(--on-dark); border-color: rgba(247,241,238,.35); }

/* ---------- Footer ---------- */
.site-footer { background: var(--dark-bg); color: rgba(247,241,238,.8); padding-block: 4rem 2rem; font-size: .92rem; }
.site-footer .logo { color: var(--on-dark); }
.site-footer .logo__mark { color: var(--rose-light); }
.site-footer .logo__word b { color: var(--rose-light); }
.footer-grid { display: grid; gap: 2.5rem; }
@media (min-width: 700px) { .footer-grid { grid-template-columns: 1.5fr 1fr 1fr; } }
.footer-grid h4 { font-size: .72rem; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--rose-light); margin: 0 0 1rem; }
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.footer-grid a { text-decoration: none; }
.footer-grid a:hover { color: var(--on-dark); text-decoration: underline; text-underline-offset: 4px; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid rgba(247,241,238,.15); font-size: .8rem; }
.footer-bottom a { text-decoration: none; margin-right: 1.25rem; }

/* ---------- Scroll-Reveal ---------- */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-in { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }

/* ---------- Hilfen ---------- */
.mt-0 { margin-top: 0; } .mt-2 { margin-top: 2rem; } .mt-3 { margin-top: 3rem; }
.mb-0 { margin-bottom: 0; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 0; background: var(--ink); color: var(--cream); padding: .75rem 1rem; z-index: 100; }
.skip:focus { left: 1rem; }
.todo { background: #fff4d6; color: #6b4e00; font-size: .78rem; padding: .1rem .4rem; border-radius: 3px; }

/* Nachträge */
.btn svg:not([fill="none"]) { fill: currentColor; }
.section--dark .card { background: transparent; border-color: rgba(247,241,238,.15); }
.section--dark .card p { color: rgba(247,241,238,.75); }
.offer .h2 { font-size: 1.5rem; }
.placeholder > svg { width: 34px; height: 34px; color: var(--rose); }
.quiz__result .socials a { color: var(--ink); border-color: var(--line); }
@media (min-width: 600px) and (max-width: 899px) { .cards--3 > :last-child:nth-child(odd) { grid-column: 1 / -1; } }
@media (min-width: 1600px) { :root { --max: 1360px; } body { font-size: 1.0625rem; } }
/* Desktop-Hero: Foto rechts, Text links – damit das Gesicht nicht hinter dem Text liegt */
@media (min-width: 900px) {
  .hero__media { left: 48%; }
  .hero__media img { object-position: 50% 22%; }
  .hero__media::after { background: linear-gradient(90deg, var(--dark-bg) 0%, rgba(43,36,38,.35) 22%, rgba(43,36,38,0) 45%); }
  .hero .container > * { max-width: 46%; }
  .hero .trust-strip { max-width: 46%; }
}
@media (min-width: 900px) and (max-width: 1100px) { .hero .container > *, .hero .trust-strip { max-width: 50%; } }

/* Calendly – direkt eingebettet */
.embed--calendar { position: relative; min-height: 0; height: 1050px; }
@media (min-width: 700px) { .embed--calendar { height: 760px; } }
@media (min-width: 1000px) { .embed--calendar { height: 720px; } }
.embed--calendar iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; opacity: 0; transition: opacity .4s; }
.embed--calendar.is-loaded iframe { opacity: 1; }
.calendar-loading { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 1rem; text-align: center; color: var(--ink-soft); padding: 1rem; }
.embed--calendar.is-loaded .calendar-loading { display: none; }
.spinner { width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--cream-2); border-top-color: var(--rose); animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ===== Anpassungen Runde 2 ===== */

/* Logo: Wortmarke optisch mittig zum Monogramm */
.logo { align-items: center; line-height: 1; }
.logo__mark, .logo__word { display: block; line-height: 1; }
/* Wortmarke optisch auf die Mitte von «SG» setzen – browserunabhängig (ohne text-box) */
.logo__word { position: relative; top: .07em; }

/* Header: höher, beim Scrollen transparenter mit weichem Übergang */
:root { --header-h: 76px; }
@media (min-width: 1080px) { :root { --header-h: 92px; } }
.site-header {
  background: var(--header-bg);
  border-bottom-color: var(--line);
  transition: background-color .45s ease, border-color .45s ease, backdrop-filter .45s ease;
}
.site-header::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 28px; pointer-events: none;
  background: linear-gradient(to bottom, var(--header-fade), transparent);
  opacity: 0; transition: opacity .45s ease;
}
.site-header.is-scrolled {
  background: var(--header-bg-scrolled);
  border-bottom-color: transparent;
  backdrop-filter: saturate(1.5) blur(16px); -webkit-backdrop-filter: saturate(1.5) blur(16px);
}
.site-header.is-scrolled::after { opacity: 1; }

/* Hero: beide Buttons gleich breit */
.hero .btn-row { display: grid; grid-template-columns: 1fr; gap: .75rem; max-width: 640px; }
.hero .btn-row .btn { width: 100%; }
@media (min-width: 600px) { .hero .btn-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Hero: drei Punkte links / mittig / rechts */
.trust-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; font-size: .75rem; line-height: 1.4; }
.trust-strip span::before { display: none; }
.trust-strip span:nth-child(1) { text-align: left; }
.trust-strip span:nth-child(2) { text-align: center; }
.trust-strip span:nth-child(3) { text-align: right; }
@media (min-width: 600px) { .trust-strip { font-size: .82rem; } }

/* Trustpilot */
.tp-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 3rem; margin-bottom: 1.25rem; }
.tp-brand { display: inline-flex; align-items: center; gap: .5rem; font-weight: 500; letter-spacing: .02em; }
.tp-stars { display: inline-flex; gap: 3px; }
.tp-stars i { width: 20px; height: 20px; background: #00b67a; display: grid; place-items: center; }
.tp-stars i::before { content: ""; width: 13px; height: 13px; background: #fff; clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.tp-card .tp-stars { margin-bottom: 1rem; }
.tp-card blockquote { font-family: var(--sans); font-style: normal; font-size: 1rem; line-height: 1.6; color: var(--ink-soft); }

/* Abschluss-Sektion: Eyebrow einzeilig, Buttons mittig */
.cta-band h2.eyebrow { max-width: none; }
.cta-band .btn-row { justify-content: center; }
figure.card { margin: 0; }

/* ===== Trustpilot-Laufband (rechts → links, weiche Fade-Ränder) ===== */
.tp-marquee {
  position: relative; overflow: hidden; padding-block: .5rem;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
}
@media (max-width: 599px) {
  .tp-marquee { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%); }
}
.tp-track { display: flex; gap: 1rem; width: max-content; animation: tp-scroll var(--tp-duration, 80s) linear infinite; will-change: transform; }
.tp-marquee:hover .tp-track, .tp-marquee:focus-within .tp-track { animation-play-state: paused; }
@keyframes tp-scroll { from { transform: translateX(0); } to { transform: translateX(calc(-1 * var(--tp-shift, 50%))); } }
.tp-review {
  flex: none; width: 300px; margin: 0; display: flex; flex-direction: column; gap: .9rem;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem;
}
@media (min-width: 900px) { .tp-review { width: 360px; padding: 1.75rem; } }
.tp-review blockquote { margin: 0; font-size: .98rem; line-height: 1.6; color: var(--ink); flex: 1; }
.tp-review figcaption { font-size: .8rem; letter-spacing: .04em; color: var(--ink-soft); }
.tp-review figcaption b { font-weight: 500; color: var(--ink); }
.tp-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 1.5rem; }
.tp-foot .tp-brand { text-decoration: none; font-size: .92rem; }
.tp-foot .tp-brand b { font-weight: 500; }
.tp-stars i { width: 18px; height: 18px; }
.tp-stars i::before { width: 12px; height: 12px; }
@media (prefers-reduced-motion: reduce) {
  .tp-marquee { overflow-x: auto; scroll-snap-type: x mandatory; }
  .tp-track { animation: none; }
  .tp-review { scroll-snap-align: start; }
}


/* ===== Hero: Querformat-Bild, kräftiger dunkler Fade von links ===== */
.hero__media img { object-position: 62% 30%; }
.hero__media::after { background: linear-gradient(180deg, rgba(43,36,38,.25) 0%, rgba(43,36,38,.6) 40%, rgba(43,36,38,.95) 100%); }
@media (min-width: 900px) {
  .hero__media { left: 22%; }
  .hero__media img { object-position: 60% 30%; }
  .hero__media::after {
    background: linear-gradient(90deg,
      var(--dark-bg) 0%, rgba(43,36,38,.97) 25%, rgba(43,36,38,.86) 39%,
      rgba(43,36,38,.58) 53%, rgba(43,36,38,.24) 66%, rgba(43,36,38,0) 80%);
  }
}

/* ===== Dark Mode ===== */
[data-theme="dark"] {
  --white: #1C1719;
  --cream: #241E20;
  --cream-2: #2F2729;
  --ink: #F2EAE6;
  --ink-soft: #BDB1AE;
  --line: rgba(242, 234, 230, .14);
  --rose-dark: #D9A3A8;
  --dark-bg: #141012;
  --header-bg: rgba(28,23,25,.94);
  --header-bg-scrolled: rgba(28,23,25,.6);
  --header-fade: rgba(28,23,25,.55);
  color-scheme: dark;
}
[data-theme="dark"] .accent { color: var(--rose-light); }
[data-theme="dark"] .btn { background: #B76E79; border-color: #B76E79; color: #fff; }
[data-theme="dark"] .btn:hover { background: #A35E69; border-color: #A35E69; }
[data-theme="dark"] .btn--ghost { background: transparent; color: var(--ink); border-color: rgba(242,234,230,.6); }
[data-theme="dark"] .btn--ghost:hover { background: var(--ink); color: #1C1719; border-color: var(--ink); }
[data-theme="dark"] .logo__mark, [data-theme="dark"] .logo__word b { color: var(--rose-light); }
[data-theme="dark"] .card__num, [data-theme="dark"] .steps li::before, [data-theme="dark"] .stat { color: var(--rose-light); }
[data-theme="dark"] .quote { color: var(--rose-light); }
[data-theme="dark"] .chip input:checked + span { color: #1C1719; }
[data-theme="dark"] .todo { background: #4a3b12; color: #ffe08a; }
[data-theme="dark"] .embed--map iframe { filter: grayscale(.6) invert(.9) hue-rotate(180deg); }
[data-theme="dark"] img { filter: brightness(.92); }
html { transition: background-color .3s ease; }

/* Theme-Schalter */
.theme-toggle {
  display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none;
  border: 1px solid var(--line); border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer;
  transition: border-color .2s, color .2s, background .2s;
}
.theme-toggle:hover { border-color: var(--rose); color: var(--rose); }
.theme-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.theme-toggle .i-sun { display: none; }
[data-theme="dark"] .theme-toggle .i-sun { display: block; }
[data-theme="dark"] .theme-toggle .i-moon { display: none; }
.header-actions { display: flex; align-items: center; gap: .6rem; }
.nav a, .header-cta { white-space: nowrap; }
@media (min-width: 1080px) { .nav { gap: clamp(1rem, 1.6vw, 1.75rem); } .nav a { font-size: .74rem; letter-spacing: .12em; } }
@media (min-width: 1080px) and (max-width: 1239px) { .logo__word { display: none; } }
@media (max-width: 899px) { .hero__media img { object-position: 46% 12%; } }
@media (max-width: 899px) {
  .hero__media { position: relative; inset: auto; aspect-ratio: 4 / 3.4; }
  .hero__media img { object-position: 52% 18%; }
  .hero__media::after { background: linear-gradient(180deg, rgba(43,36,38,0) 45%, rgba(43,36,38,.75) 80%, var(--dark-bg) 100%); }
  .hero .container { min-height: 0; padding-block: 0 2.5rem; margin-top: -4.5rem; }
}

/* ===== Runde 4 ===== */
/* Hero-Buttons: einzeilig, beide gleich breit (Breite = längerer Button) */
.hero .container > .btn-row { max-width: none; }
.hero .btn-row { display: grid; grid-template-columns: 1fr; width: 100%; }
.hero .btn-row .btn { white-space: nowrap; }
@media (max-width: 420px) { .hero .btn-row .btn { letter-spacing: .08em; font-size: .76rem; padding-inline: .9rem; } }
@media (min-width: 760px) {
  .hero .btn-row { grid-template-columns: repeat(2, 1fr); width: max-content; max-width: 100%; }
}
/* Hero-Bildausschnitt für DSC_5216 (Dahwi rechts im Bild) */
.hero__media img { object-position: 70% 30%; }
@media (min-width: 900px) { .hero__media img { object-position: 62% 32%; } }
@media (max-width: 899px) { .hero__media img { object-position: 72% 25%; } }
/* Rechtstexte */
.legal h2 { font-size: 1.1rem; font-weight: 500; text-transform: none; letter-spacing: .01em; margin: 2.5rem 0 .75rem; }
.legal h2:first-child { margin-top: 0; }
.legal ul { padding-left: 1.2rem; margin: 0 0 1rem; display: grid; gap: .6rem; }
.legal p, .legal li { color: var(--ink-soft); }
.legal b { color: var(--ink); font-weight: 500; }

/* ===== Textblöcke vertikal mittig in jedem Streifen ===== */
/* Abstand oben und unten pro Sektion ist gleich – dafür dürfen erstes/letztes Element keinen Extra-Rand haben */
.section > .container > :first-child,
.section > .container > :first-child > :first-child,
.section .grid-2 > * > :first-child { margin-top: 0; }
.section > .container > :last-child,
.section > .container > :last-child > :last-child,
.section .grid-2 > * > :last-child,
.section .center > :last-child,
.section .narrow > :last-child { margin-bottom: 0; }
/* Sektionen ohne Bild-Spalten: Inhalt im Streifen mittig ausrichten */
.section > .container { display: flow-root; }

/* Dark Mode: Footer klar vom letzten (hellen) Block abgrenzen */
[data-theme="dark"] .site-footer { border-top: 1px solid var(--line); }
.cta-band p:last-child { margin-bottom: 0; }

/* Buchungsbereich: ein Block – Text über und unter dem Kalender jeweils vertikal mittig
   (Abstand Blockrand ↔ Text = Abstand Text ↔ Kalender) */
.termin { --termin-gap: clamp(3rem, 7vw, 5rem); padding-block: var(--termin-gap); }
.termin__cal { margin-block: var(--termin-gap); text-align: left; }
.termin__intro > :last-child, .termin__alt > :last-child { margin-bottom: 0; }
.termin__alt p { margin-bottom: 1rem; }

/* ===== Transformationen: Slider (Startseite) & Galerie (Erfolge) ===== */
.tf-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.tf-title { font-weight: 300; text-transform: uppercase; letter-spacing: .12em; font-size: clamp(1.05rem, 2.4vw, 1.35rem); margin: 0; }
.tf-title .accent { font-size: 1.15em; }
.tf-nav { display: flex; gap: .5rem; flex: none; }
.tf-btn { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line); background: var(--white); color: var(--ink); cursor: pointer; transition: border-color .2s, color .2s, opacity .2s; }
.tf-btn:hover { border-color: var(--rose); color: var(--rose); }
.tf-btn:disabled { opacity: .35; cursor: default; }
.tf-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tf-track {
  --edge: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter)));
  display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding: .25rem var(--edge) 1rem; scroll-padding-inline: var(--edge);
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
}
.tf-track::-webkit-scrollbar { display: none; }
.tf-track:focus-visible { outline-offset: -2px; }
.tf-item { flex: none; width: min(78vw, 320px); margin: 0; scroll-snap-align: start; }
@media (min-width: 900px) { .tf-item { width: 300px; } }
.tf-open { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: 6px; overflow: hidden; box-shadow: 0 1px 2px rgba(43,36,38,.06), 0 8px 24px rgba(43,36,38,.08); transition: transform .3s ease, box-shadow .3s ease; }
.tf-open:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(43,36,38,.08), 0 14px 32px rgba(43,36,38,.12); }
.tf-open img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.tf-note { margin-top: .5rem; }
.tf-grid { display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 700px) { .tf-grid { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } }
@media (min-width: 1100px) { .tf-grid { grid-template-columns: repeat(4, 1fr); } }
.tf-grid .tf-item { width: auto; }
@media (prefers-reduced-motion: reduce) { .tf-track { scroll-behavior: auto; } .tf-open { transition: none; } }

/* Lightbox */
.lightbox { border: 0; padding: 0; background: transparent; max-width: none; max-height: none; width: 100vw; height: 100dvh; margin: 0; }
.lightbox::backdrop { background: rgba(20,16,18,.88); }
.lightbox[open] { display: grid; place-items: center; }
.lightbox img { max-width: min(92vw, 720px); max-height: 86dvh; width: auto; height: auto; border-radius: 6px; box-shadow: 0 20px 60px rgba(0,0,0,.4); }
.lightbox button { position: fixed; width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(247,241,238,.4); background: rgba(20,16,18,.4); color: #F7F1EE; display: grid; place-items: center; cursor: pointer; }
.lightbox button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lightbox .lb-close { top: max(1rem, env(safe-area-inset-top)); right: 1rem; }
.lightbox .lb-prev { left: 1rem; top: 50%; transform: translateY(-50%); }
.lightbox .lb-next { right: 1rem; top: 50%; transform: translateY(-50%); }
@media (max-width: 599px) { .lightbox .lb-prev, .lightbox .lb-next { top: auto; bottom: max(1rem, env(safe-area-inset-bottom)); transform: none; } }

/* ===== Transformationen v2: eigene Vorher/Nachher-Karten ===== */
.tf-section .tf-head { align-items: flex-end; margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.tf-section .tf-head .lead { margin-bottom: 0; }
.tf-item { width: min(84vw, 360px); }
@media (min-width: 900px) { .tf-item { width: 380px; } }
.tf-open { border-radius: 10px; background: var(--white); padding: 6px; cursor: zoom-in; }
.tf-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.tf-pic { position: relative; display: block; border-radius: 6px; overflow: hidden; background: var(--cream-2); }
.tf-pic img { display: block; width: 100%; height: auto; aspect-ratio: 443 / 866; object-fit: cover; }
.tf-open img { aspect-ratio: 443 / 866; }
.tf-tag {
  position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%);
  font-size: .62rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap;
  color: #fff; background: rgba(43,36,38,.82); padding: .35rem .8rem; border-radius: 99px;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.tf-tag--after { background: var(--rose); }
.tf-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; margin-top: 1.25rem; }
.tf-foot .form-note { margin: 0; max-width: 46ch; }
.tf-foot .btn-row { margin-top: 0; }
@media (max-width: 699px) { .tf-section .tf-nav { display: none; } .tf-foot .btn-row { width: 100%; } .tf-foot .btn-row .btn { flex: 1 1 100%; } }
.tf-grid .tf-open { padding: 5px; }
.tf-grid { grid-template-columns: 1fr; }
@media (min-width: 560px) { .tf-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .tf-grid { grid-template-columns: repeat(3, 1fr); } }

/* Lightbox mit Bildpaar */
.lb-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: min(92vw, 760px); }
.lb-pair figure { margin: 0; position: relative; border-radius: 8px; overflow: hidden; }
.lb-pair img { display: block; width: 100%; height: auto; max-height: 84dvh; object-fit: contain; max-width: none; box-shadow: none; border-radius: 0; }
.lb-pair .tf-tag { font-size: .7rem; bottom: 14px; }
.section > .container.tf-head, .section > .container.tf-foot { display: flex; }

/* ===== Transformationen v3: kompakt, zentriert, Endlos-Laufband ===== */
.tf-section { padding-block: clamp(3rem, 6vw, 4.5rem); }
.tf-intro .lead { margin: 0 auto; max-width: 52ch; }
.tf-intro .h2 { margin-bottom: .75rem; }
.tf-marquee { margin-block: clamp(1.5rem, 3vw, 2.25rem); }
.tf-marquee .tf-item { width: 300px; scroll-snap-align: none; }
@media (min-width: 900px) { .tf-marquee .tf-item { width: 340px; } }
.tf-marquee .tf-open:hover { transform: none; }
.tf-outro .btn-row { justify-content: center; margin-top: 0; }
.tf-outro .form-note { margin: 1rem auto 0; }
@media (max-width: 599px) { .tf-outro .btn-row .btn { flex: 1 1 100%; } }

/* Transformationen: Text oben mittig im oberen Streifen, Hinweis direkt unter den Bildern,
   Buttons mittig im unteren Streifen (gleiche Abstände --tf-gap) */
.tf-section { --tf-gap: clamp(2.5rem, 5vw, 3.5rem); padding-block: var(--tf-gap); }
.tf-section .tf-marquee { margin-top: var(--tf-gap); margin-bottom: 0; }
.tf-section .tf-note { margin: .75rem auto 0; max-width: none; }
.tf-section .tf-outro { margin-top: var(--tf-gap); }
.tf-section .tf-outro .form-note { display: none; }

/* ===== Trustpilot-Bewertungswand (Erfolge) ===== */
.rv-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.rv-head .h2 { margin-bottom: 0; }
.rv-badge { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; font-size: .92rem; padding: .6rem 1rem; border: 1px solid var(--line); border-radius: 99px; background: var(--white); }
.rv-badge b { font-weight: 500; }
.rv-wall { columns: 1; column-gap: 1rem; }
@media (min-width: 700px) { .rv-wall { columns: 2; column-gap: 1.25rem; } }
@media (min-width: 1100px) { .rv-wall { columns: 3; } }
.rv-card { break-inside: avoid; display: flex; flex-direction: column; gap: .75rem; margin: 0 0 1rem; padding: clamp(1.25rem, 2.5vw, 1.75rem); background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); }
@media (min-width: 700px) { .rv-card { margin-bottom: 1.25rem; } }
.rv-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.rv-top time { font-size: .78rem; color: var(--ink-soft); letter-spacing: .04em; }
.rv-title { font-size: 1.05rem; font-weight: 500; margin: 0; line-height: 1.35; }
.rv-text { color: var(--ink-soft); font-size: .96rem; line-height: 1.65; }
.rv-text p { margin: 0 0 .6rem; }
.rv-text p:last-child { margin-bottom: 0; }
.rv-card.is-long:not(.is-open) .rv-text { max-height: 9.9em; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent); mask-image: linear-gradient(to bottom, #000 60%, transparent); }
.rv-more { align-self: flex-start; background: none; border: 0; padding: .25rem 0; cursor: pointer; font-size: .76rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--rose-dark); border-bottom: 1px solid currentColor; }
.rv-name { font-size: .82rem; font-weight: 500; letter-spacing: .06em; color: var(--ink); padding-top: .25rem; }
.rv-actions { justify-content: center; margin-top: clamp(1rem, 2vw, 1.5rem); }
/* Transformationen: Buttons im oberen Bereich, unten Laufband + Hinweis */
.tf-intro .tf-btns { justify-content: center; margin-top: 1.5rem; }
@media (max-width: 599px) { .tf-intro .tf-btns .btn { flex: 1 1 100%; } }

/* Akzent-Schrift (Cormorant kursiv) in Überschriften optisch an die Jost-Versalien angleichen:
   Cormorant-x-Höhe ≈ 40 % vs. Jost-Versalhöhe ≈ 70 % → 1,3-fach wirkt gleich gross, ohne die Zeilenhöhe zu ändern */
h1 .accent, h2 .accent, .h2 .accent, .tf-title .accent { font-size: 1.3em; line-height: .85; letter-spacing: 0; }

/* ===== Aufzählungen v2: feines Häkchen in Rose Gold, einzeilig ===== */
.checklist { gap: .85rem; }
.checklist li { padding-left: 2.1rem; line-height: 1.5; min-height: 1.5rem; display: flex; align-items: center; }
.checklist li::before,
.checklist--no li::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 1.35rem; height: 1.35rem; border: 0; border-radius: 50%;
  background: rgba(183,110,121,.14);
}
.checklist li::after {
  content: ""; position: absolute; left: .3rem; top: 50%; transform: translateY(-50%);
  width: .75rem; height: .75rem; background: var(--rose);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.checklist--no li::before { background: rgba(43,36,38,.07); }
.checklist--no li::after {
  left: .38rem; width: .6rem; height: .6rem; background: var(--ink-soft);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M5 5l14 14M19 5L5 19'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M5 5l14 14M19 5L5 19'/%3E%3C/svg%3E");
}
.section--dark .checklist li::before { background: rgba(201,138,143,.18); border: 0; }
.section--dark .checklist li::after { background: var(--rose-light); }
[data-theme="dark"] .checklist li::before { background: rgba(201,138,143,.16); }
[data-theme="dark"] .checklist li::after { background: var(--rose-light); }
[data-theme="dark"] .checklist--no li::before { background: rgba(242,234,230,.08); }
[data-theme="dark"] .checklist--no li::after { background: var(--ink-soft); }

/* Navigation: alle Elemente auf einer gemeinsamen Mittellinie.
   Unterstreichung belegt keinen Platz mehr (vorher 1 px Rand → Text 0,5 px zu hoch) */
.site-header .container { align-items: center; }
.nav { align-items: center; }
.nav a { position: relative; display: inline-flex; align-items: center; line-height: 1; padding: .6rem 0; border-bottom: 0; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: .15rem; height: 1px; background: var(--rose); transform: scaleX(0); transform-origin: left; transition: transform .25s ease; }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.header-cta { line-height: 1; }
.header-actions { align-items: center; }
@media (max-width: 360px) { .checklist li { font-size: .95rem; } }

/* ===== Leichter Schlagschatten für Bilder (website-weit) ===== */
:root {
  --shadow-img: 0 1px 2px rgba(43,36,38,.05), 0 10px 22px -10px rgba(43,36,38,.22);
  --shadow-img-hover: 0 2px 4px rgba(43,36,38,.06), 0 14px 28px -10px rgba(43,36,38,.26);
}
[data-theme="dark"] {
  --shadow-img: 0 1px 2px rgba(0,0,0,.25), 0 10px 22px -10px rgba(0,0,0,.55);
  --shadow-img-hover: 0 2px 4px rgba(0,0,0,.3), 0 14px 28px -10px rgba(0,0,0,.6);
}
.img-frame, .video-ph, .offer { box-shadow: var(--shadow-img); }
.tf-open { box-shadow: var(--shadow-img); }
.tf-open:hover { box-shadow: var(--shadow-img-hover); }

/* Transformations-Laufband: genug Platz, damit der Schatten nicht abgeschnitten wird
   (Polster +10 px oben/unten, per Margin ausgeglichen → Abstände im Block bleiben gleich) */
.tf-section .tf-marquee { padding-block: 22px; margin-top: calc(var(--tf-gap) - 14px); }
.tf-section .tf-note { margin-top: calc(.75rem - 14px); }

/* Header: kein Verlauf mehr unter der Leiste beim Scrollen */
.site-header::after, .site-header.is-scrolled::after { display: none; }

/* ===== Mobile: alle Buttons zentriert ===== */
@media (max-width: 899px) {
  .btn-row { justify-content: center; }
  .offer__body .btn-row { justify-content: center; }
  .link-arrow { display: table; margin-inline: auto; }
  .form > .btn, .form button[type="submit"] { width: 100%; }
  .card > .btn, .termin__alt .btn { margin-inline: auto; }
}

/* ===== Burger: zwei Striche → X ===== */
.burger span { position: relative; width: 24px; height: 12px; background: none !important; }
.burger span::before, .burger span::after {
  content: ""; position: absolute; left: 0; width: 24px; height: 1.5px; background: var(--ink); border-radius: 1px;
  transition: top .25s ease .15s, transform .25s ease 0s;
}
.burger span::before { top: 2px; }
.burger span::after  { top: 9px; }
.menu-open .burger span::before, .menu-open .burger span::after { top: 5.25px; transition: top .25s ease 0s, transform .25s ease .2s; }
.menu-open .burger span::before { transform: rotate(45deg); }
.menu-open .burger span::after  { transform: rotate(-45deg); }
@media (prefers-reduced-motion: reduce) { .burger span::before, .burger span::after { transition: none; } }

/* ===== Mobile-Menü als Vollbild ===== */
.mobile-menu {
  inset: 0; z-index: 49; padding: calc(var(--header-h) + 1.5rem) var(--gutter) calc(1.5rem + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; justify-content: center; gap: 0;
  overflow-y: auto; overscroll-behavior: contain; background: var(--cream);
}
.mobile-menu a:not(.btn) { text-align: center; border-bottom: 0; padding: .7rem 0; font-size: 1.2rem; }
.mobile-menu .btn { margin: 1.75rem auto 0; width: 100%; max-width: 360px; }
.mobile-menu .socials { justify-content: center; margin-top: 1.5rem; }
.mobile-menu > * { opacity: 0; transform: translateY(8px); transition: opacity .3s ease, transform .3s ease; }
.menu-open .mobile-menu > * { opacity: 1; transform: none; }
.menu-open .mobile-menu > *:nth-child(2) { transition-delay: .03s; } .menu-open .mobile-menu > *:nth-child(3) { transition-delay: .06s; }
.menu-open .mobile-menu > *:nth-child(4) { transition-delay: .09s; } .menu-open .mobile-menu > *:nth-child(5) { transition-delay: .12s; }
.menu-open .mobile-menu > *:nth-child(6) { transition-delay: .15s; } .menu-open .mobile-menu > *:nth-child(7) { transition-delay: .18s; }
.menu-open .mobile-menu > *:nth-child(8) { transition-delay: .21s; } .menu-open .mobile-menu > *:nth-child(n+9) { transition-delay: .24s; }
/* Header bleibt über dem Menü sichtbar (Logo + X), ohne Transparenz */
.menu-open .site-header { background: var(--cream); border-bottom-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
.menu-open .sticky-cta { transform: translateY(110%); }
/* Seite dahinter gesperrt (zusätzlich per JS fixiert, damit es auch auf iOS hält) */
html.menu-lock, html.menu-lock body { overflow: hidden; }
.menu-open .site-header { position: fixed; top: 0; left: 0; right: 0; }
.mobile-menu .btn { white-space: nowrap; letter-spacing: .1em; font-size: .78rem; }
@media (max-height: 700px) { .mobile-menu a:not(.btn) { padding: .5rem 0; font-size: 1.05rem; } .mobile-menu .btn { margin-top: 1.1rem; } .mobile-menu .socials { margin-top: 1rem; } }
@media (max-height: 580px) { .mobile-menu a:not(.btn) { padding: .35rem 0; font-size: .98rem; } }

/* ===== Mobile-Feinschliff ===== */
.nowrap { white-space: nowrap; }
.accent { white-space: nowrap; }
.br-m { display: none; }
@media (max-width: 599px) {
  /* Hero: «Abnehmen,» / «das in deinen Alltag passt» – zweite Zeile passt immer in die Breite */
  .hero h1 { font-size: clamp(1.2rem, 6.4vw, 1.9rem); letter-spacing: .1em; }
  /* Drei Punkte: je genau zwei Zeilen, gleichmässig */
  .br-m { display: inline; }
  .trust-strip { font-size: clamp(.66rem, 3.1vw, .78rem); gap: .5rem; letter-spacing: .02em; }
  .trust-strip span { white-space: nowrap; }
  /* Footer mittig */
  .site-footer { text-align: center; }
  .site-footer .logo { justify-content: center; }
  .site-footer .footer-grid > div > p { margin-inline: auto; }
  .site-footer .socials { justify-content: center; }
  .footer-bottom { flex-direction: column; align-items: center; text-align: center; gap: .75rem; }
  .footer-bottom a { margin: 0 .6rem; }
}

/* ===== Ablauf als Zeitstrahl =====
   Handy/Tablet: senkrechte Linie links, Kreise mit Nummern
   Desktop: waagrechte Linie, Kreise oben, Text darunter zentriert */
.steps { --tl-dot: 2.75rem; --tl-bg: var(--white); --tl-line: rgba(183,110,121,.45); gap: 0; margin-top: 2.5rem; }
.section--cream .steps { --tl-bg: var(--cream); }
.section--dark .steps { --tl-bg: var(--dark-bg); --tl-line: rgba(201,138,143,.45); }
.steps li {
  position: relative; display: grid; grid-template-columns: var(--tl-dot) 1fr; column-gap: 1.1rem;
  padding: 0 0 1.75rem; border-top: 0; counter-increment: step;
}
.steps li:last-child { padding-bottom: 0; }
.steps li::before {
  content: counter(step); position: relative; z-index: 1;
  width: var(--tl-dot); height: var(--tl-dot); border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--rose); background: var(--tl-bg);
  font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 1.35rem; line-height: 1; color: var(--rose);
}
.section--dark .steps li::before { border-color: var(--rose-light); color: var(--rose-light); }
.steps li::after {
  content: ""; position: absolute; left: calc(var(--tl-dot) / 2); top: var(--tl-dot); bottom: 0; width: 1px;
  background: var(--tl-line); transform: translateX(-.5px);
}
.steps li:last-child::after { display: none; }
.steps li > div { padding-top: .55rem; }
.steps h3 { margin-bottom: .25rem; }
@media (min-width: 1000px) {
  .steps { grid-template-columns: repeat(5, 1fr); column-gap: 1.5rem; }
  .steps li { grid-template-columns: 1fr; justify-items: center; text-align: center; row-gap: 1rem; padding: 0; }
  .steps li::after {
    left: calc(50% + var(--tl-dot) / 2); right: calc(-50% - 1.5rem + var(--tl-dot) / 2);
    top: calc(var(--tl-dot) / 2); bottom: auto; width: auto; height: 1px; transform: translateY(-.5px);
  }
  .steps li > div { padding-top: 0; max-width: 22ch; }
}
[data-theme="dark"] .steps { --tl-line: rgba(201,138,143,.4); }
.steps li { align-content: start; }
@media (min-width: 1000px) { .steps li { grid-template-rows: var(--tl-dot) auto; } }

/* ===== Trustpilot: Karten verlinkt auf die einzelne Bewertung ===== */
.tp-link { display: flex; flex-direction: column; gap: .9rem; height: 100%; color: inherit; text-decoration: none; }
.tp-review { transition: border-color .2s, box-shadow .2s; }
.tp-review:hover { border-color: var(--rose); box-shadow: var(--shadow-img); }
.tp-link:focus-visible { outline: 2px solid var(--rose); outline-offset: 6px; border-radius: 2px; }
.rv-card { position: relative; transition: border-color .2s, box-shadow .2s; }
.rv-card:hover, .rv-card:focus-within { border-color: var(--rose); box-shadow: var(--shadow-img); }
.rv-link { color: inherit; text-decoration: none; }
.rv-link::after { content: ""; position: absolute; inset: 0; z-index: 0; }
.rv-link:focus-visible { outline: none; }
.rv-more { position: relative; z-index: 1; }
.rv-name { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.rv-tp { display: inline-flex; align-items: center; gap: .35rem; font-size: .72rem; font-weight: 400; letter-spacing: .06em; color: var(--ink-soft); }
.rv-tp .ext { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.rv-card:hover .rv-tp { color: var(--rose-dark); }
/* Online-Coaching-Hero (DSC_5291): Dahwi rechts im Bild */
.hero--oc .hero__media img { object-position: 80% 6%; }
@media (min-width: 900px) { .hero--oc .hero__media img { object-position: 70% 8%; } }

/* Zeitstrahl: Ziffern exakt in der Kreismitte.
   Versalziffern (lnum) statt Mediävalziffern → alle gleich hoch, vertikal mittig.
   Horizontal: optische Korrektur je Ziffer, aus der Schriftdatei berechnet (Tintenmitte vs. Laufweite). */
.steps li::before { font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1; line-height: 1; padding: 0; }
.steps li:nth-child(1)::before { padding-left: calc(.034em); }
.steps li:nth-child(2)::before { padding-left: calc(.020em); }
.steps li:nth-child(3)::before { padding-right: calc(.004em); }
.steps li:nth-child(4)::before { padding-left: calc(.030em); }
.steps li:nth-child(5)::before { padding-right: calc(.048em); }
/* Personal-Training-Hero (DSC_5410): Dahwis Kopf liegt weit oben im Bild */
.hero--pt .hero__media img { object-position: 72% 4%; }
@media (min-width: 900px) { .hero--pt .hero__media img { object-position: 66% 4%; } }

/* Akzent-Schrift: Grossbuchstaben exakt so hoch wie die der normalen Schrift.
   Versalhöhe Jost = 0,700 em, Cormorant kursiv = 0,625 em → Faktor 0,700 / 0,625 = 1,12 */
h1 .accent, h2 .accent, .h2 .accent, .tf-title .accent, .h1 .accent { font-size: 1.12em; line-height: 1; }

/* Bewertungen (Erfolge): Sterne-Pille immer rechtsbündig */
.rv-badge { margin-left: auto; }
/* Buttons unter der Bewertungs-Wand: mittig zwischen letzter Karte und Ende des Blocks */
.rv-wall { margin-bottom: -1rem; }
@media (min-width: 700px) { .rv-wall { margin-bottom: 0; } }
#bewertungen .rv-actions { margin-top: var(--section); }
/* Bereich unter der Bewertungs-Wand niedriger: gleicher, kleinerer Abstand über und unter den Buttons */
#bewertungen { --rv-gap: clamp(2.25rem, 4.5vw, 3.25rem); padding-bottom: var(--rv-gap); }
#bewertungen .rv-actions { margin-top: var(--rv-gap); }

/* Abstand zwischen normaler Schrift und Akzent-Schrift optisch angleichen:
   die gesperrten Versalien + kursive Schrift lassen die Lücke grösser wirken → Akzent näher heran */
h1 .accent, h2 .accent, .h2 .accent, .tf-title .accent { margin-left: -.18em; margin-right: -.06em; }
h1 .accent--start, h2 .accent--start, .h2 .accent--start { margin-left: 0; }

/* Abstands-Helfer gewinnen immer (vorher z. B. von h2.eyebrow auf 0 gesetzt) */
.mt-0 { margin-top: 0 !important; } .mt-2 { margin-top: 2rem !important; } .mt-3 { margin-top: 3rem !important; }
.mb-0 { margin-bottom: 0 !important; }

/* ===== Cookie-Banner & Einwilligung ===== */
.cookie-banner {
  position: fixed; z-index: 60; left: 50%; bottom: max(1rem, env(safe-area-inset-bottom));
  width: min(560px, calc(100% - 2rem)); transform: translate(-50%, calc(100% + 2rem));
  background: var(--white); color: var(--ink); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 2px 6px rgba(43,36,38,.06), 0 24px 48px -12px rgba(43,36,38,.28);
  padding: clamp(1.25rem, 3vw, 1.75rem); visibility: hidden; transition: transform .35s ease, visibility .35s;
}
.cookie-banner.is-visible { transform: translate(-50%, 0); visibility: visible; }
@media (min-width: 900px) { .cookie-banner { left: auto; right: 1.5rem; bottom: 1.5rem; transform: translateY(calc(100% + 2rem)); } .cookie-banner.is-visible { transform: none; } }
.cookie-banner__eyebrow { font-size: .7rem; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--rose-dark); margin: 0 0 .4rem; }
.cookie-banner__title { font-size: 1.15rem; font-weight: 400; letter-spacing: .02em; text-transform: none; margin: 0 0 .6rem; }
.cookie-banner__text { font-size: .88rem; line-height: 1.6; color: var(--ink-soft); margin: 0 0 1.1rem; }
.cookie-banner__text a { color: var(--ink); }
.cookie-banner__actions { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; align-items: center; }
.cookie-banner__actions .btn { min-height: 44px; padding: .7rem 1rem; font-size: .74rem; white-space: nowrap; }
.cookie-banner__more { grid-column: 1 / -1; justify-self: center; background: none; border: 0; padding: .4rem; cursor: pointer; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); text-decoration: underline; text-underline-offset: 4px; }
.cookie-banner__actions [data-cb="save"] { grid-column: 1 / -1; }
.cookie-banner__panel { display: grid; gap: .6rem; margin: 0 0 1rem; }
.cookie-banner__panel[hidden] { display: none; }
.cookie-opt { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem .9rem; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; }
.cookie-opt b { display: block; font-weight: 500; font-size: .9rem; }
.cookie-opt small { display: block; font-size: .78rem; color: var(--ink-soft); line-height: 1.45; margin-top: .15rem; }
.cookie-opt input { position: absolute; opacity: 0; pointer-events: none; }
.cookie-opt i { position: relative; flex: none; width: 42px; height: 24px; border-radius: 99px; background: rgba(43,36,38,.18); transition: background .2s; }
.cookie-opt i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: transform .2s; }
.cookie-opt input:checked + i { background: var(--rose); }
.cookie-opt input:checked + i::after { transform: translateX(18px); }
.cookie-opt input:disabled + i { opacity: .55; }
.cookie-opt input:focus-visible + i { outline: 2px solid var(--rose); outline-offset: 2px; }
body.has-cookie-banner .sticky-cta { transform: translateY(110%); }
@media (max-width: 380px) { .cookie-banner__actions { grid-template-columns: 1fr; } }

/* Platzhalter für Karte / Kalender ohne Einwilligung */
.consent-ph { height: 100%; min-height: inherit; display: grid; place-content: center; justify-items: center; gap: .6rem; text-align: center; padding: 1.5rem; background: var(--cream); }
.embed--calendar .consent-ph { min-height: 420px; position: absolute; inset: 0; }
.consent-ph > svg { width: 30px; height: 30px; fill: none; stroke: var(--rose); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.consent-ph__title { font-weight: 500; margin: 0; }
.consent-ph__text { font-size: .85rem; color: var(--ink-soft); max-width: 40ch; margin: 0; }
.consent-ph__text a { color: var(--ink); }
.consent-ph__actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .5rem 1rem; margin-top: .4rem; }
.consent-ph__always { background: none; border: 0; padding: .5rem; cursor: pointer; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--rose-dark); text-decoration: underline; text-underline-offset: 4px; }
.embed--map:has(.consent-ph) { aspect-ratio: auto; min-height: 300px; }

/* Footer: «Cookie-Einstellungen» wie die anderen Links */
.footer-link { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; color: inherit; margin-right: 1.25rem; }
.footer-link:hover { color: var(--on-dark); text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 599px) { .footer-bottom .footer-link { margin: 0 .6rem; } }
.cookie-banner [hidden] { display: none !important; }

/* H1: engere Wortabstände (Laufweite wirkt sonst auch auf Leerzeichen).
   Wort zu Wort und Hauptschrift zu Highlight jeweils ca. 0.24em */
h1, .h1 { word-spacing: -.2em; }
h1 .accent, .h1 .accent { word-spacing: -.05em; margin-left: 0; margin-right: 0; }

/* ---------- Video (Vorstellung) ---------- */
.video { position: relative; max-width: 960px; margin: clamp(2rem, 4vw, 3rem) auto 0; aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; background: #1c1718; box-shadow: 0 18px 50px rgba(0,0,0,.28); }
.video video { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.video__play { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 1rem; width: 100%; padding: 1rem; border: 0; cursor: pointer; color: #fff;
  background: linear-gradient(180deg, rgba(43,36,38,0) 35%, rgba(43,36,38,.55)); font: inherit; }
.video__play .play { width: clamp(64px, 9vw, 88px); height: clamp(64px, 9vw, 88px); border: 0; background: var(--rose); box-shadow: 0 10px 30px rgba(183,110,121,.45); transition: transform .25s ease, background .25s ease; }
.video__play .play svg { width: 26%; fill: #fff; }
.video__play small { font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,.4); }
.video__play:hover .play, .video__play:focus-visible .play { transform: scale(1.06); background: var(--rose-dark); }
.video__play:focus-visible { outline: 2px solid var(--rose-light); outline-offset: -6px; border-radius: inherit; }
.video.is-playing .video__play { display: none; }
.video-section .btn-row { justify-content: center; }
@media (max-width: 599px) { .video { border-radius: 12px; margin-inline: -.25rem; } }
.video__play { place-content: end center; padding-bottom: clamp(1rem, 6%, 2.5rem); }
/* Startseite: schmaler Streifen unter dem Video, Button mittig */
.video-section:has(.video-cta) { padding-bottom: clamp(2.5rem, 5vw, 3.25rem); }
.video-cta { margin-top: clamp(2.5rem, 5vw, 3.25rem) !important; }

/* ---------- Freigestelltes Porträt (Startseite «Hi, ich bin Dahwi») ---------- */
.cutout { position: relative; aspect-ratio: 4 / 5; display: flex; align-items: flex-end; justify-content: center; }
.cutout::before { content: ""; position: absolute; inset: 16% 4% 0; border-radius: 999px 999px 18px 18px;
  background: linear-gradient(180deg, var(--cream) 0%, #EED9D8 100%); box-shadow: var(--shadow-img); }
.cutout img { position: relative; height: 100%; width: auto; max-width: 100%; object-fit: contain; object-position: bottom; }
[data-theme="dark"] .cutout::before { background: linear-gradient(180deg, rgba(201,138,143,.14), rgba(201,138,143,.30)); }

.video__play .play { box-shadow: 0 8px 24px rgba(43,36,38,.25); }

/* Kein rosa Aufblitzen beim Scrollen: Hover-Effekte (auch im Calendly-Kalender) erst nach dem Scrollen */
body.is-scrolling main, body.is-scrolling .site-footer { pointer-events: none; }
.tp-review:hover, .rv-card:hover, .rv-card:focus-within, .quiz__opt:hover { border-color: rgba(43,36,38,.28); }
[data-theme="dark"] .tp-review:hover, [data-theme="dark"] .rv-card:hover, [data-theme="dark"] .rv-card:focus-within, [data-theme="dark"] .quiz__opt:hover { border-color: rgba(242,234,230,.3); }

/* Footer unten: «Impressum» bündig mit der Spalte «Kontakt», «Cookie-Einstellungen» bündig mit dem rechten Rand */
@media (min-width: 700px) {
  .footer-bottom { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 1rem 2.5rem; align-items: start; }
  .footer-bottom > span:last-child { grid-column: 3; display: flex; flex-wrap: wrap; justify-content: space-between; gap: .4rem .5rem; }
  .footer-bottom > span:last-child a, .footer-bottom > span:last-child .footer-link { margin: 0; white-space: nowrap; }
}
/* Alle vier Links in einer Zeile: gleiche Abstände dazwischen */
@media (min-width: 1158px) { .footer-bottom > span:last-child { flex-wrap: nowrap; } }
/* Schmaler: «Cookie-Einstellungen» in zweiter Zeile, rechtsbündig; die drei anderen mit gleichen Abständen */
@media (min-width: 700px) and (max-width: 1157px) {
  .footer-bottom > span:last-child { justify-content: flex-start; gap: .4rem .75rem; }
  .footer-bottom > span:last-child .footer-link { flex-basis: 100%; text-align: right; }
}

/* Erfolge: zwei gegenläufige Transformations-Laufbänder (oben rechts→links, unten links→rechts) */
.tp-marquee--reverse .tp-track { animation-direction: reverse; }
.tf-row { padding-block: 14px; margin-block: 0; }
.tf-row:not(.tp-marquee--reverse) { margin-top: clamp(1.25rem, 3vw, 2rem); }
.tf-row + .tf-row { margin-top: 0; }
.tf-rows-note { margin-top: .5rem; }
/* Erfolge-Laufbänder: kompakter Abschnitt, grössere Bilder, kein dunkler Platzhalter */
.tf-rows-section { padding-block: clamp(2.5rem, 5vw, 3.5rem); }
.tf-row .tf-pic { background: transparent; }
.tf-row .tf-item { width: 320px; }
@media (min-width: 900px) { .tf-row .tf-item { width: 410px; } }

/* Laufbänder: Fade links und rechts genau so breit wie der Weissraum bis zur Textkante */
.tp-marquee {
  --fade: max(6%, calc(max(0px, (100% - var(--max)) / 2) + var(--gutter)));
  /* stärkerer, kürzerer Übergang: aussen fast unsichtbar, eingeblendet wird erst nahe der Textkante */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,.06) calc(var(--fade) * .45), #000 var(--fade), #000 calc(100% - var(--fade)), rgba(0,0,0,.06) calc(100% - var(--fade) * .45), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,.06) calc(var(--fade) * .45), #000 var(--fade), #000 calc(100% - var(--fade)), rgba(0,0,0,.06) calc(100% - var(--fade) * .45), transparent 100%);
}

/* Hero-Vorteile: auf dem Handy drei zentrierte Spalten mit Icon und feinen Trennlinien */
.ts-txt { font-weight: inherit; }
.ts-ico { display: none; }
@media (max-width: 599px) {
  .hero .trust-strip { grid-template-columns: repeat(3, 1fr); gap: 0; padding-top: 1.25rem; font-size: .74rem; letter-spacing: .02em; line-height: 1.35; }
  .hero .trust-strip > span { display: flex; flex-direction: column; align-items: center; gap: .5rem; text-align: center; white-space: normal; padding-inline: .35rem; }
  .hero .trust-strip > span + span { border-left: 1px solid rgba(247,241,238,.16); }
  .hero .ts-ico { display: block; width: 22px; height: 22px; fill: none; stroke: var(--rose-light); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
}

/* Über mich, Handy: Überschrift und Mission zuerst, dann das Bild, dann Geschichte, Zitat und Button */
@media (max-width: 899px) {
  .about-intro { display: flex; flex-direction: column; gap: 0; }
  .about-intro > div:not(.img-frame) { display: contents; }
  .about-intro > div > * { order: 2; }
  .about-intro > div > .eyebrow, .about-intro > div > h1, .about-intro > div > .lead { order: 0; }
  .about-intro > .img-frame { order: 1; margin: .5rem 0 2rem; }
}

/* Startseite «Für wen»: Button zum 2-Minuten-Check bewusst linksbündig, auch auf dem Handy */
.btn-row.btn-row--left { justify-content: flex-start; }

/* ---------- Druckansicht (z. B. Rechtstexte als PDF) ---------- */
@media print {
  @page { size: A4; margin: 18mm 18mm 20mm; }
  html, body { background: #fff !important; color: #2B2426 !important; }
  .site-header, .site-footer, .sticky-cta, .cookie-banner, .mobile-menu, .skip-link, .theme-toggle { display: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .section { padding-block: 0 !important; background: #fff !important; }
  .section + .section { margin-top: 6mm; }
  .container { max-width: none !important; padding-inline: 0 !important; }
  h1 { font-size: 22pt; margin-bottom: 4mm; }
  .legal h2 { font-size: 11.5pt; margin: 6mm 0 2mm; break-after: avoid; }
  .legal p, .legal li { font-size: 9.5pt; line-height: 1.5; color: #2B2426 !important; }
  .legal .card { border: 1px solid #ccc; box-shadow: none; break-inside: avoid; }
  a { color: inherit !important; text-decoration: none; }
}

/* Bewertungen (Erfolge): echte Spalten, oben und unten bündig */
.rv-wall.is-masonry { columns: auto; display: flex; align-items: stretch; gap: 1rem; margin-bottom: 0; }
@media (min-width: 700px) { .rv-wall.is-masonry { gap: 1.25rem; } }
.rv-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 1rem; }
@media (min-width: 700px) { .rv-col { gap: 1.25rem; } }
.rv-col > .rv-card { margin: 0; flex-grow: 1; }
.rv-col > .rv-card > :last-child { margin-top: auto; }

/* 404-Seite */
.nf { min-height: calc(100svh - var(--header-h)); display: flex; align-items: center; }
.nf .container { width: 100%; }
.nf .btn-row { justify-content: center; }
.nf-links { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem 1.75rem; margin-top: 2.25rem; }
.nf .lead { text-align: center; }

/* Hinweise: Bildpaare und Trustpilot-Auszüge */
.tf-cap { margin-top: .5rem; text-align: center; font-size: .72rem; letter-spacing: .04em; color: var(--ink-soft); }
.rv-note { margin: .75rem 0 0; max-width: 60ch; }
.tp-note { margin: 1rem 0 0; }
.rv-note a, .tp-note a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
/* Cookie-Banner: «Alle akzeptieren» und «Nur notwendige» gleich gross und gleich sichtbar */
.cookie-banner__actions [data-cb="all"], .cookie-banner__actions [data-cb="none"] { width: 100%; }

/* Cookie-Wahl: Seite bis zur Entscheidung abgedunkelt und unscharf (nicht auf den Rechtsseiten) */
body.consent-lock { overflow: hidden; }
body.consent-lock > :not(.cookie-banner) { filter: blur(6px); pointer-events: none; user-select: none; }
body.consent-lock::after { content: ""; position: fixed; inset: 0; z-index: 55; background: rgba(43, 36, 38, .35); }
@media (prefers-reduced-motion: no-preference) { body.consent-lock::after { animation: fade .3s ease; } }

/* Trustpilot: Original-Logo und Original-Sterne */
.tp-stars-img { display: block; height: 18px; width: auto; }
.tp-brand { display: inline-flex; align-items: center; gap: .5rem; }
.tp-brand .tp-stars-img { height: 20px; }
.tp-logo { display: block; height: 20px; width: auto; }
.tp-logo--dunkel { display: none; }
[data-theme="dark"] .tp-logo--hell, .section--dark .tp-logo--hell { display: none; }
[data-theme="dark"] .tp-logo--dunkel, .section--dark .tp-logo--dunkel { display: block; }
.rv-badge { gap: .7rem; }
.rv-badge .tp-logo { height: 22px; }
.rv-badge .tp-stars-img { height: 22px; }
/* Sterne nie strecken (in Karten mit Flex-Layout) */
.tp-stars-img { align-self: flex-start; flex: none; width: auto; max-width: none; object-fit: contain; }
.tp-brand { gap: .75rem; }
.tp-brand .tp-logo { height: 22px; }
.tp-brand .tp-stars-img { height: 22px; align-self: center; }

/* Calendly ohne Detailspalte: Rahmen so schmal wie der Kalender (Platz für Uhrzeiten daneben bleibt) */
.embed--calendar { max-width: 780px; margin-inline: auto; }
/* Kalender-Rahmen im selben Beige wie Calendly */
.embed--calendar { background: var(--cream); }

/* ---------- Terminbuchung: Text links, Kalender rechts (Calendly randlos auf Beige) ---------- */
.booking, .section > .container.booking { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
@media (min-width: 900px) { .booking { grid-template-columns: minmax(0, 1fr) minmax(0, 540px); } }
.booking__text .h2 { margin-bottom: 1rem; }
.booking__text .lead { margin-bottom: 1.25rem; }
.booking__text .checklist { margin-bottom: 1.25rem; }
.booking__alt { margin-top: 1.75rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.booking__alt p { margin: 0 0 .9rem; }
.booking__alt .btn-row, .booking .booking__alt { text-align: left; }
.booking__steps { list-style: none; counter-reset: st; margin: 0 0 1.25rem; padding: 0; display: grid; gap: 1rem; }
.booking__steps li { counter-increment: st; display: grid; grid-template-columns: 2.25rem 1fr; column-gap: .9rem; align-items: start; }
.booking__steps li::before { content: counter(st); grid-row: span 2; width: 2.25rem; height: 2.25rem; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--rose); color: var(--rose-dark); font-size: .9rem; }
.booking__steps b { font-weight: 500; }
.booking__steps span { color: var(--ink-soft); font-size: .95rem; }
.booking .embed--calendar { max-width: none; margin: 0; border: 0; border-radius: var(--radius); background: var(--cream); height: 600px; }
@media (max-width: 899px) {
  .booking .embed--calendar { height: 560px; }
  .booking__text { text-align: left; }
}

/* Kalender als weisse Karte auf dem Abschnitt (dunkel: dunkle Karte); Höhe passt sich per Calendly-Meldung an */
.booking .embed--calendar { background: #FFFFFF; border-radius: 16px; box-shadow: 0 1px 2px rgba(43,36,38,.05), 0 18px 40px -18px rgba(43,36,38,.25); transition: height .25s ease; }
[data-theme="dark"] .booking .embed--calendar { background: #1C1719; box-shadow: 0 18px 40px -18px rgba(0,0,0,.6); }
.booking .embed--calendar .consent-ph { border-radius: inherit; }

/* ---------- Social-Media-Kreise: überall sauber (im Handy-Menü nicht von Menü-Links überschreiben) ---------- */
.socials a, .mobile-menu .socials a { box-sizing: border-box; width: 44px; height: 44px; padding: 0 !important; border: 1px solid currentColor !important; border-radius: 50%; font-size: 0; letter-spacing: 0; line-height: 0; flex: none; }
.socials svg { display: block; }
.mobile-menu .socials a { color: var(--ink); border-color: rgba(43,36,38,.35) !important; }
[data-theme="dark"] .mobile-menu .socials a { color: var(--on-dark); border-color: rgba(247,241,238,.35) !important; }
.section--dark .socials a, .site-footer .socials a { border-color: rgba(247,241,238,.35) !important; }
.quiz__result .socials a { border-color: var(--line) !important; }
.socials a:hover { border-color: var(--rose) !important; }

/* ---------- Handy: Bilder nicht zuerst und nicht zuletzt, sondern nach Überschrift und Einleitung ---------- */
@media (max-width: 899px) {
  /* Bild-Text-Abschnitte */
  .grid-2:has(> .img-frame, > .cutout, > .video-ph) { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .grid-2:has(> .img-frame, > .cutout, > .video-ph) > :not(.img-frame):not(.cutout):not(.video-ph) { display: contents; }
  .grid-2:has(> .img-frame, > .cutout, > .video-ph) > * > * { order: 2; }
  .grid-2:has(> .img-frame, > .cutout, > .video-ph) > * > :is(.eyebrow, h1, h2, .h2, .lead) { order: 0; }
  .grid-2:has(> .img-frame, > .cutout, > .video-ph) > :is(.img-frame, .cutout, .video-ph) { order: 1; margin: .75rem 0 1.75rem; }
  /* Startseite Transformationen: Text, Laufband, Hinweis, Buttons */
  /* Terminbuchung: Text bis «Kostenlos & unverbindlich», Kalender, dann «Kein passender Termin» */
  .booking, .section > .container.booking { display: flex; flex-direction: column; gap: 0; }
  .booking__text { display: contents; }
  .booking__text > * { order: 0; }
  .booking__cal { order: 1; margin: .75rem 0 0; }
  .booking__alt { order: 2; }
  /* Karte Trainingsort: Einleitung, Karte, Links */
  .map-block, .section > .container.map-block { display: flex; flex-direction: column; }
  .map-block > * { order: 0; }
  .map-block > .embed { order: 1; margin-top: .75rem !important; }
  .map-block > .btn-row { order: 2; margin-top: 1.25rem !important; }
}
.site-footer .socials a:hover, .section--dark .socials a:hover { border-color: var(--rose) !important; }

/* Handy: Buttons immer einzeilig */
@media (max-width: 599px) {
  .btn { white-space: nowrap; }
}
@media (max-width: 374px) {
  .btn { font-size: .7rem; letter-spacing: .08em; padding-inline: .9rem; }
}

/* Handy: Buttons untereinander immer gleich breit (gefüllter = wichtiger, umrandeter = zweitrangig) */
@media (max-width: 599px) {
  .btn-row:has(> .btn + .btn) { flex-direction: column; align-items: stretch; width: 100%; }
  .btn-row:has(> .btn + .btn) > .btn { width: 100%; justify-content: center; }
}

/* ---------- Handy-Feinschliff ---------- */
@media (max-width: 899px) {
  /* Bilder in Text-Abschnitten: immer Luft darüber und darunter */
  .grid-2:has(> .img-frame, > .cutout, > .video-ph) > :is(.img-frame, .cutout, .video-ph) { margin: 1rem 0 2rem !important; }
  /* Terminbereich: alles auf voller Breite, linksbündig */
  .booking, .section > .container.booking { align-items: stretch; }
  .booking__cal { width: 100%; margin: 1.25rem 0 0 !important; }
  .booking .checklist { margin-inline: 0; justify-self: start; }
  .booking .microcopy { text-align: left; }
  .booking__alt { width: 100%; margin-top: 2rem; }
  .booking__alt .btn { width: 100%; justify-content: center; }
}
@media (max-width: 599px) {
  /* Leistungskarten: Button über die Kartenbreite, damit beide Karten gleich aussehen */
  .offer .btn-row { justify-content: stretch; }
  .offer .btn-row .btn { width: 100%; justify-content: center; }
  /* Trustpilot-Zeile: alles mittig untereinander */
  .tp-note { text-align: center; }
  .tp-foot { flex-direction: column; align-items: center; gap: .9rem; }
}

/* Startseite Transformationen: Buttons nur unter dem Laufband, mittig */
.section > .container.tf-btns-bottom { display: block; margin-top: 1.5rem; }
.tf-btns-bottom .btn-row { margin-top: 0; justify-content: center; }
/* Kalender-Platzhalter auf der weissen Karte ebenfalls weiss */
.booking .embed--calendar .consent-ph { background: transparent; }
[data-theme="dark"] .booking .embed--calendar .consent-ph { background: transparent; }
@media (max-width: 899px) { .rv-head .rv-badge { align-self: flex-start; margin-inline: 0; } }
/* Handy: «Vollständiges Profil auf Trustpilot» in eigener Zeile */
@media (max-width: 599px) {
  .tp-note a, .rv-note a { display: table; margin: .35rem auto 0; }
  .rv-note a { margin-left: 0; }
}

/* ---------- Erstgespräch: Kalender sofort sichtbar ---------- */
.booking-hero { padding-block: clamp(1.75rem, 4vw, 3rem) clamp(3rem, 6vw, 4.5rem); }
.booking-hero .booking, .section.booking-hero > .container.booking { align-items: center; }
.booking-hero h1 { margin-bottom: .75rem; }
.booking-hero .lead { margin-bottom: 1.5rem; }
.booking-hero .booking__sub { margin: 1.5rem 0 .75rem; }
@media (max-width: 899px) {
  .booking-hero .lead { margin-bottom: 0; }
  .booking-hero .booking__text > :not(.eyebrow):not(h1):not(.lead) { order: 2; }
  .booking-hero .booking__text > .booking__sub { order: 2; }
  .booking-hero .booking__alt { order: 3; }
  .booking-hero .booking__cal { margin: 1.25rem 0 .5rem !important; }
}
/* Erstgespräch, Handy: Einleitung, «So buchst du», Kalender, «Kein passender Termin», dann Gesprächsthemen */
@media (max-width: 899px) {
  .booking-hero .booking__how, .booking-hero .booking__steps { order: 1; }
  .booking-hero .booking__how { margin-top: 1.75rem; }
  .booking-hero .booking__cal { order: 2; }
  .booking-hero .booking__alt { order: 3; }
  .booking-hero .booking__topics { order: 4; }
  .booking-hero h2.booking__topics { margin-top: 2rem; }
}
@media (max-width: 899px) {
  .section.booking-hero > .container.booking { align-items: stretch; }
  .booking-hero .booking__text > :is(.eyebrow:not(.booking__sub), h1, .lead) { order: 0 !important; }
  .booking-hero .booking__how, .booking-hero .booking__steps { order: 1 !important; }
  .booking-hero .booking__cal { order: 2 !important; }
  .booking-hero .booking__alt { order: 3 !important; }
  .booking-hero .booking__topics { order: 4 !important; }
  .booking-hero .booking__text > * { text-align: left; }
}
/* Erstgespräch, Handy: «Darüber sprechen wir» vor den Schritten */
@media (max-width: 899px) {
  .booking-hero .booking__topics { order: 1 !important; }
  .booking-hero .booking__how, .booking-hero .booking__steps { order: 2 !important; }
  .booking-hero .booking__cal { order: 3 !important; }
  .booking-hero .booking__alt { order: 4 !important; }
  .booking-hero h2.booking__topics { margin-top: 1.75rem; }
}
/* Calendly: leeren Streifen unten abschneiden (Iframe behält seine volle Höhe, Rahmen ist kürzer) */
:root { --cal-trim: 64; }
.booking .embed--calendar { overflow: hidden; }
.booking .embed--calendar iframe { bottom: auto; }
/* Highlight am Zeilenanfang (per Skript erkannt): bündig mit dem Text */
h1 .accent.accent--wrap, h2 .accent.accent--wrap, .h2 .accent.accent--wrap, .tf-title .accent.accent--wrap { margin-left: 0 !important; }

/* Handy: alle Buttons mittig */
@media (max-width: 599px) {
  .btn-row, .btn-row.btn-row--left { justify-content: center; margin-inline: auto; }
  .btn-row:not(:has(> .btn + .btn)) { width: 100%; }
}
/* Buttons mittig, sobald das Layout einspaltig ist (Handy und schmale Fenster/Tablets) */
@media (max-width: 899px) {
  .btn-row, .btn-row.btn-row--left { justify-content: center; margin-inline: auto; }
}

/* ---------- Navigation: «Coaching» mit Dropdown (Online Coaching, Personal Training) ---------- */
.nav-drop { position: relative; display: flex; align-items: center; }
.nav-drop__btn { position: relative; display: inline-flex; align-items: center; gap: .35rem; background: none; border: 0; padding: .6rem 0; cursor: pointer; font: inherit; font-size: .78rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: inherit; line-height: 1; white-space: nowrap; }
@media (min-width: 1080px) { .nav-drop__btn { font-size: .74rem; letter-spacing: .12em; } }
.nav-drop__btn svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; transition: transform .2s ease; }
.nav-drop__btn::after { content: ""; position: absolute; left: 0; right: 0; bottom: .15rem; height: 1px; background: var(--rose); transform: scaleX(0); transform-origin: left; transition: transform .25s ease; }
.nav-drop.is-active .nav-drop__btn::after, .nav-drop:hover .nav-drop__btn::after { transform: scaleX(1); }
.nav-drop__menu {
  position: absolute; top: 100%; left: 50%; min-width: 220px; padding: .5rem; margin-top: .5rem;
  display: grid; gap: .1rem; background: var(--white); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 18px 40px -18px rgba(43,36,38,.35);
  opacity: 0; visibility: hidden; transform: translate(-50%, 6px); transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.nav-drop__menu::before { content: ""; position: absolute; left: 0; right: 0; top: -.75rem; height: .75rem; } /* Hover-Brücke */
.nav-drop:hover .nav-drop__menu, .nav-drop:focus-within .nav-drop__menu, .nav-drop.is-open .nav-drop__menu { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.nav-drop:hover .nav-drop__btn svg, .nav-drop.is-open .nav-drop__btn svg { transform: rotate(180deg); }
.nav .nav-drop__menu a { display: block; padding: .75rem .9rem; border-radius: 6px; font-size: .74rem; }
.nav .nav-drop__menu a::after { display: none; }
.nav .nav-drop__menu a:hover, .nav .nav-drop__menu a[aria-current="page"] { background: var(--cream); color: var(--rose-dark); }
[data-theme="dark"] .nav-drop__menu { background: #1C1719; border-color: rgba(247,241,238,.12); }