/* ============================================
   Kysana Onepager · Style
   Fonts: Instrument Sans (Headlines, Sub, Labels)
          Plus Jakarta Sans (Body im UI-Kontext)
   Palette: siehe Kysana_Styles.md
============================================ */

@font-face {
  font-family: 'Instrument Sans';
  src: url('assets/fonts/InstrumentSans/InstrumentSans-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Instrument Sans';
  src: url('assets/fonts/InstrumentSans/InstrumentSans-Medium.ttf') format('truetype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Instrument Sans';
  src: url('assets/fonts/InstrumentSans/InstrumentSans-SemiBold.ttf') format('truetype');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Instrument Sans';
  src: url('assets/fonts/InstrumentSans/InstrumentSans-Bold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('assets/fonts/PlusJakartaSans/PlusJakartaSans-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('assets/fonts/PlusJakartaSans/PlusJakartaSans-Medium.ttf') format('truetype');
  font-weight: 500; font-style: normal; font-display: swap;
}

:root {
  /* Colors */
  --primary: #22B573;
  --primary-soft: #DCF3E5;
  --primary-dark: #1A9D64;
  --secondary: #5A49FF;
  --secondary-soft: #F2F1FF;
  --secondary-dark: #4635E5;
  --ink: #111827;
  --body: #374151;
  --muted: #6B7280;
  --muted-soft: #7A7A7A;
  --line: #E5E7EB;
  --bg: #F9FAFB;
  --paper: #FFFFFF;
  --warm: #FEF3C7;
  --amber: #F59E0B;
  --danger: #C84A4A;

  /* Gradient (Waitlist-CTA) */
  --grad-cta: linear-gradient(90deg, #5A49FF 0%, #C13EE0 50%, #FF7A1A 100%);

  /* Typography */
  --font-head: 'Instrument Sans', 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-body: 'Plus Jakarta Sans', 'Instrument Sans', 'Inter', system-ui, sans-serif;
  --font-label: 'Instrument Sans', 'Inter', system-ui, sans-serif;

  /* Spacing */
  --gap-xs: 4px;
  --gap-sm: 8px;
  --gap-md: 16px;
  --gap-lg: 24px;
  --gap-xl: 40px;
  --gap-2xl: 64px;
  --gap-3xl: 96px;
  --gap-4xl: 128px;

  /* Layout */
  --container: 1200px;
  --container-narrow: 900px;
  --radius: 14px;
  --radius-sm: 8px;
  --radius-lg: 24px;

  --shadow-sm: 0 1px 2px rgba(17, 24, 39, 0.04);
  --shadow: 0 4px 14px rgba(17, 24, 39, 0.06);
  --shadow-lg: 0 12px 40px rgba(17, 24, 39, 0.08);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
a { color: var(--secondary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- Typography ---------- */
h1, h2, h3, h4 { font-family: var(--font-head); color: var(--ink); font-weight: 700; letter-spacing: -0.01em; margin: 0 0 var(--gap-md); }
h1 { font-size: clamp(2.4rem, 5vw, 3.6rem); line-height: 1.05; letter-spacing: -0.02em; }
h2 { font-size: clamp(1.8rem, 3.5vw, 2.5rem); line-height: 1.15; letter-spacing: -0.015em; }
h3 { font-size: clamp(1.25rem, 2.5vw, 1.55rem); line-height: 1.3; }
h4 { font-size: 1.05rem; line-height: 1.35; font-weight: 600; }
p { margin: 0 0 var(--gap-md); color: var(--body); }
.eyebrow {
  font-family: var(--font-label);
  font-weight: 500;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--primary);
  display: inline-block;
  margin-bottom: var(--gap-md);
}
.eyebrow--secondary { color: var(--secondary); }
.eyebrow--muted { color: var(--muted); }

/* ---------- Layout ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}
.container--narrow { max-width: var(--container-narrow); }

section { padding: var(--gap-3xl) 0; }
section.section--tight { padding: var(--gap-2xl) 0; }
section.section--dark { background: var(--ink); color: #E5E7EB; }
section.section--dark h1, section.section--dark h2, section.section--dark h3 { color: #FFFFFF; }
section.section--soft { background: var(--paper); }
section.section--secondary-soft { background: var(--secondary-soft); }
section.section--primary-soft { background: var(--primary-soft); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 26px;
  border-radius: 999px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 15px;
  border: none;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  text-decoration: none;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); text-decoration: none; }
.btn--primary { background: var(--grad-cta); color: #FFFFFF; box-shadow: 0 6px 20px rgba(90, 73, 255, 0.25); }
.btn--primary:hover { box-shadow: 0 10px 28px rgba(90, 73, 255, 0.35); }
.btn--solid { background: var(--primary); color: #FFFFFF; }
.btn--solid:hover { background: var(--primary-dark); }
.btn--outline { background: transparent; color: var(--ink); border: 1.5px solid var(--line); }
.btn--outline:hover { border-color: var(--ink); }
.btn--secondary { background: var(--secondary); color: #FFFFFF; }
.btn--secondary:hover { background: var(--secondary-dark); }
.btn--sm { padding: 10px 18px; font-size: 14px; }
.link-cta { color: var(--secondary); font-weight: 600; }
.link-cta:hover { text-decoration: underline; }

/* ---------- Navigation ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(249, 250, 251, 0.85);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid rgba(17, 24, 39, 0.06);
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-lg);
  padding: 14px 24px;
  max-width: 1360px;
  margin: 0 auto;
}
.nav__logo { display: flex; align-items: center; gap: 10px; }
.nav__logo img { height: 30px; width: auto; }
.nav__links {
  display: flex;
  gap: var(--gap-lg);
  align-items: center;
}
.nav__links a {
  color: var(--body);
  font-size: 14.5px;
  font-weight: 500;
}
.nav__links a:hover { color: var(--ink); text-decoration: none; }
.nav__actions { display: flex; align-items: center; gap: var(--gap-md); }
.nav__lang {
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 2px;
  text-transform: uppercase;
  font-family: var(--font-label);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 2px;
}
.nav__lang a {
  color: var(--body);
  padding: 4px 8px;
  border-radius: 4px;
  transition: color 0.15s ease, background 0.15s ease;
  text-decoration: none;
  cursor: pointer;
  font-weight: 500;
  display: inline-block;
}
.nav__lang a:hover { color: var(--ink); background: rgba(17, 24, 39, 0.06); text-decoration: none; }
.nav__lang a.active { color: var(--ink); font-weight: 700; background: rgba(34, 181, 115, 0.08); }
.nav__lang a.active:hover { cursor: default; background: rgba(34, 181, 115, 0.08); }
.nav__lang .divider { color: var(--line); padding: 0 4px; pointer-events: none; }
@media (max-width: 900px) {
  .nav__links { display: none; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: var(--gap-3xl) 0;
  background: var(--bg);
}
.hero__grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: var(--gap-2xl);
  align-items: center;
}
.hero__eyebrow { color: var(--primary); }
.hero__headline {
  font-size: clamp(2.6rem, 5.2vw, 4rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
  margin-bottom: var(--gap-lg);
}
.hero__sub {
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  color: var(--body);
  max-width: 540px;
  margin-bottom: var(--gap-xl);
}
.hero__ctas {
  display: flex;
  gap: var(--gap-md);
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: var(--gap-xl);
}
.hero__image {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  aspect-ratio: 4/5;
  background: var(--primary-soft);
}
.hero__image img { width: 100%; height: 100%; object-fit: cover; }
.hero__trust {
  display: flex;
  align-items: flex-start;
  gap: var(--gap-lg);
  flex-wrap: wrap;
  margin-top: var(--gap-lg);
  padding-top: var(--gap-lg);
  border-top: 1px solid var(--line);
  min-height: 78px;
}
.hero__trust-label {
  font-family: var(--font-label);
  font-size: 11px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  padding-top: 8px;
}
.hero__trust-items {
  display: inline-flex;
  gap: 36px;
  color: var(--body);
  font-size: 14px;
  font-weight: 500;
  flex-wrap: wrap;
  align-items: flex-start;
  line-height: 1;
  row-gap: 18px;
}
.hero__trust-items > * {
  display: inline-flex;
  align-items: flex-start;
  line-height: 1;
  flex-shrink: 0;
}
.hero__trust-items img {
  width: auto;
  opacity: 0.9;
  transition: opacity 0.2s ease;
  display: block;
  object-fit: contain;
}
/* Individuelle Höhen — sodass die Hauptwortmarke bei allen ~20px hoch erscheint */
.hero__trust-items a[title="Hochschule Luzern"] img { height: 44px; display: block; }
.hero__trust-items a[title="Rehaklinik Tschugg"] img { height: 40px; }
.hero__trust-items a[title="Università di Pavia"] img { height: 20px; }
.hero__trust-items a { color: var(--body); text-decoration: none; }
.hero__trust-items a:hover { color: var(--ink); }
.hero__trust-items a:hover img { opacity: 1; }
.hero__trust-dot { display: none; }
.hero__trust-items a { color: var(--body); }
.hero__trust-items a:hover img { opacity: 1; }
.hero__trust-items a:hover { color: var(--ink); text-decoration: none; }
.hero__trust-dot {
  color: var(--line);
  font-weight: 400;
}
.hero__micro {
  color: var(--muted);
  font-size: 13px;
  font-style: italic;
  margin-top: var(--gap-md);
}
@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__image { aspect-ratio: 4/3; max-height: 400px; }
  .hero { min-height: auto; }
}

/* ---------- Pain-Mirror ---------- */
.pain__question {
  font-family: var(--font-head);
  font-size: clamp(2.4rem, 5vw, 3.8rem);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0 0 var(--gap-2xl);
  max-width: 900px;
}
.pain__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-lg);
  margin-bottom: var(--gap-2xl);
}
.pain__quote {
  background: var(--paper);
  padding: var(--gap-xl) var(--gap-xl) var(--gap-lg);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  position: relative;
  font-family: var(--font-head);
  font-size: 1.1rem;
  line-height: 1.45;
  color: var(--ink);
  font-weight: 500;
}
.pain__quote-mark {
  display: block;
  width: 26px;
  height: 20px;
  margin-bottom: var(--gap-md);
}
.pain__quote-mark path { fill: var(--primary); }
.pain__closing {
  font-family: var(--font-head);
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.015em;
  line-height: 1.15;
  margin: 0;
}
.pain__closing span { color: var(--primary); }
@media (max-width: 800px) {
  .pain__grid { grid-template-columns: 1fr; }
}

/* ---------- Qualifier / Diagnosis Chips ---------- */
.qualifier__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: var(--gap-lg) 0 var(--gap-lg);
}
.chip {
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 14px;
  color: var(--body);
  font-weight: 500;
}
.qualifier__closing { color: var(--muted); font-size: 1.05rem; max-width: 700px; }

/* ---------- USP Pillars ---------- */
.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-xl);
  margin-top: var(--gap-2xl);
}
.pillar {
  padding: var(--gap-xl);
  background: var(--paper);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
}
.pillar__icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--primary-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  margin-bottom: var(--gap-md);
  font-size: 22px;
  font-weight: 700;
}
.pillar h3 { margin-bottom: 8px; }
.pillar p { color: var(--body); font-size: 15px; margin: 0; }
.pillar__flag {
  margin-top: var(--gap-2xl);
  text-align: center;
  color: var(--muted);
  font-family: var(--font-label);
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
@media (max-width: 900px) {
  .pillars { grid-template-columns: 1fr; }
}

/* ---------- Steps ---------- */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-xl);
  margin-top: var(--gap-2xl);
}
.step {
  position: relative;
}
.step__num {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 3rem;
  color: var(--primary);
  line-height: 1;
  margin-bottom: var(--gap-md);
  letter-spacing: -0.03em;
}
.step h3 { margin-bottom: 8px; }
.step p { color: var(--body); font-size: 15px; }
.step__img {
  width: 100%;
  aspect-ratio: 4/3;
  border-radius: var(--radius);
  background: var(--primary-soft);
  margin-bottom: var(--gap-md);
  overflow: hidden;
}
.step__img img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) {
  .steps { grid-template-columns: 1fr; }
}

/* ---------- Hero Stories ---------- */
.stories {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-xl);
  margin-top: var(--gap-2xl);
}
.story {
  background: var(--paper);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.story__photo {
  width: 100%;
  aspect-ratio: 4/3;
  background: var(--primary-soft);
  overflow: hidden;
}
.story__photo img { width: 100%; height: 100%; object-fit: cover; }
.story__body { padding: var(--gap-lg) var(--gap-xl) var(--gap-xl); flex: 1; display: flex; flex-direction: column; }
.story__lead {
  font-family: var(--font-head);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: var(--gap-md);
  line-height: 1.35;
}
.story__label {
  font-family: var(--font-label);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--primary);
  font-weight: 600;
  margin-top: var(--gap-md);
  margin-bottom: 4px;
}
.story__label--wend { color: var(--amber); }
.story__label--today { color: var(--secondary); }
.story__text { font-size: 14.5px; color: var(--body); margin: 0 0 0; }
.story--placeholder {
  background: var(--secondary-soft);
  border: 1.5px dashed var(--secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--gap-2xl);
  text-align: center;
  min-height: 380px;
}
.story--placeholder p {
  font-family: var(--font-head);
  color: var(--secondary);
  font-weight: 600;
  font-size: 1rem;
  margin: 0;
}
.story--own {
  background: var(--secondary-soft);
  border: 2px solid var(--secondary);
}
.story--own .story__photo { background: var(--secondary-soft); }
.story--own .story__lead,
.story--own .story__text { color: var(--secondary); }
@media (max-width: 900px) {
  .stories { grid-template-columns: 1fr; }
}

/* ---------- Science / Proof ---------- */
.science__grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--gap-2xl);
  margin-top: var(--gap-xl);
}
.science__stat {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--gap-xl);
}
.science__stat-kicker {
  font-family: var(--font-label);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--primary);
  font-weight: 600;
  display: block;
  margin-bottom: var(--gap-lg);
}
.science__stat-row {
  display: flex;
  align-items: center;
  gap: var(--gap-lg);
  padding: var(--gap-md) 0;
}
.science__stat-row + .science__stat-row {
  border-top: 1px solid var(--line);
}
.science__stat-num {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 3.2rem;
  color: var(--primary);
  line-height: 1;
  letter-spacing: -0.03em;
  min-width: 118px;
  flex-shrink: 0;
}
.science__stat-num small { font-size: 1.5rem; color: var(--ink); }
.science__stat-caption { color: var(--body); font-size: 15px; margin: 0; line-height: 1.5; }
@media (max-width: 800px) {
  .science__stat-row { gap: var(--gap-md); }
  .science__stat-num { font-size: 2.6rem; min-width: 96px; }
}
.science__quote {
  background: var(--ink);
  color: #E5E7EB;
  padding: var(--gap-xl);
  border-radius: var(--radius-lg);
  font-family: var(--font-head);
}
.science__quote p { color: #E5E7EB; font-size: 1.15rem; font-weight: 500; line-height: 1.4; }
.science__quote-source {
  font-size: 12px;
  color: #9CA3AF;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 600;
  margin-top: var(--gap-md);
}
.science__study {
  margin-top: var(--gap-lg);
  padding: var(--gap-lg);
  background: var(--primary-soft);
  border-radius: var(--radius);
  color: var(--ink);
  font-size: 14.5px;
  font-weight: 500;
}
@media (max-width: 900px) {
  .science__grid { grid-template-columns: 1fr; }
}

/* ---------- Product / App Preview ---------- */
.product__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--gap-lg);
  margin-top: var(--gap-2xl);
}
.product__card {
  background: var(--paper);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  overflow: hidden;
}
.product__mock {
  width: 100%;
  aspect-ratio: 4/5;
  background: var(--primary-soft);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--gap-lg);
}
.product__mock img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.product__caption {
  padding: var(--gap-lg);
}
.product__caption h4 { color: var(--ink); margin-bottom: 4px; }
.product__caption p { font-size: 13.5px; color: var(--muted); margin: 0; }
.product__data-note {
  margin-top: var(--gap-lg);
  text-align: center;
  font-size: 13px;
  color: var(--muted);
}
@media (max-width: 900px) {
  .product__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 500px) {
  .product__grid { grid-template-columns: 1fr; }
}

/* ---------- Coach / Begleitung Section ---------- */
.coach {
  background: linear-gradient(180deg, var(--bg) 0%, var(--primary-soft) 100%);
}
.coach__intro {
  max-width: 780px;
  margin: 0 auto var(--gap-2xl);
  text-align: center;
}
.coach__chevron {
  width: 100%;
  margin: var(--gap-xl) 0 var(--gap-2xl);
  background: var(--paper);
  border-radius: var(--radius-lg);
  padding: var(--gap-2xl) var(--gap-xl);
  border: 1px solid var(--line);
}
.coach__chevron img { width: 100%; height: auto; }
.coach__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap-lg);
  margin-bottom: var(--gap-2xl);
}
.coach__card {
  background: var(--paper);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  padding: var(--gap-xl);
  display: flex;
  gap: var(--gap-md);
  align-items: flex-start;
}
.coach__icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--primary-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  font-weight: 700;
  flex-shrink: 0;
  font-size: 18px;
}
.coach__card h4 { color: var(--ink); margin-bottom: 6px; }
.coach__card p { font-size: 14.5px; color: var(--body); margin: 0; }

/* Coach-Punkte (Auflistungs-Variante, statt Cards) */
.coach__points {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap-lg) var(--gap-2xl);
  margin: var(--gap-2xl) 0;
}
.coach__point {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.coach__point .coach__icon {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 10px;
  background: var(--primary-soft);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}
.coach__point h4 { color: var(--ink); margin: 0 0 4px; font-size: 16px; font-weight: 700; }
.coach__point p { font-size: 14.5px; color: var(--muted); margin: 0; line-height: 1.5; }
@media (max-width: 800px) {
  .coach__points { grid-template-columns: 1fr; gap: var(--gap-lg); }
}
.coach__notice {
  background: var(--warm);
  border: 1px solid rgba(245, 158, 11, 0.35);
  color: var(--ink);
  border-radius: var(--radius);
  padding: 18px 26px;
  margin: var(--gap-xl) 0;
  display: flex;
  align-items: center;
  gap: 20px;
  text-align: left;
}
.coach__notice-icon { color: var(--amber); }
.coach__notice-icon {
  flex-shrink: 0;
  color: var(--ink);
  margin: 0;
  display: flex;
  align-items: center;
}
.coach__notice-icon svg { width: 28px; height: 28px; display: block; }
.coach__notice p {
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.45;
  margin: 0;
  flex: 1;
  max-width: none;
}
.coach__cta {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
  margin: 0;
  flex-wrap: nowrap;
}
.coach__notice .btn--solid {
  background: var(--ink);
  color: #FFFFFF;
  padding: 10px 20px;
  font-size: 13.5px;
  white-space: nowrap;
}
.coach__notice .btn--solid:hover { background: #000000; }
.coach__notice .link-cta {
  color: var(--ink) !important;
  font-weight: 600;
  font-size: 13.5px;
  white-space: nowrap;
}
.coach__notice .link-cta:hover { text-decoration: underline; }
@media (max-width: 800px) {
  .coach__notice { flex-direction: column; text-align: center; padding: 20px; gap: 14px; }
  .coach__cta { justify-content: center; margin-top: 4px; }
}

/* ---------- Science quote with portrait ---------- */
.science__quote-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--gap-lg);
}
.science__quote-portrait {
  flex-shrink: 0;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  overflow: hidden;
  background: rgba(255,255,255,0.06);
  border: 3px solid rgba(255,255,255,0.15);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.science__quote-portrait img { width: 100%; height: 100%; object-fit: cover; }
.science__quote-body { max-width: 480px; }
.science__quote-body p { font-size: 1.2rem; }

@media (max-width: 800px) {
  .science__quote-inner {
    flex-direction: row;
    align-items: center;
    text-align: left;
    gap: var(--gap-md);
  }
  .science__quote-portrait {
    width: 84px;
    height: 84px;
    border-width: 2px;
  }
  .science__quote-body { max-width: none; flex: 1; min-width: 0; }
  .science__quote-body p { font-size: 1rem; line-height: 1.4; }
  .science__quote-body .science__quote-source { font-size: 11px; margin-top: 8px; }
}

/* ---------- Swiss flag inline ---------- */
.flag-ch {
  display: inline-block;
  vertical-align: -0.12em;
  width: 1.05em;
  height: 1.05em;
  margin-right: 0.4em;
  border-radius: 2px;
}
@media (max-width: 800px) {
  .coach__grid { grid-template-columns: 1fr; }
}

/* ---------- Kliniken Teaser ---------- */
.kliniken {
  background: var(--secondary-soft);
}
.kliniken__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-2xl);
  align-items: center;
}
.kliniken__image {
  aspect-ratio: 4/3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--paper);
}
.kliniken__image img { width: 100%; height: 100%; object-fit: cover; }
.kliniken h2 { color: var(--secondary-dark); }
.kliniken__ctas { display: flex; gap: var(--gap-md); align-items: center; flex-wrap: wrap; margin-top: var(--gap-lg); }
@media (max-width: 900px) {
  .kliniken__inner { grid-template-columns: 1fr; }
}

/* ---------- FAQ ---------- */
.faq { max-width: var(--container-narrow); margin: 0 auto; }
.faq details {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: var(--gap-md);
  padding: 0;
  overflow: hidden;
}
.faq summary {
  padding: 20px 24px;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-md);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+';
  font-size: 22px;
  color: var(--primary);
  font-weight: 300;
  transition: transform 0.2s ease;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p {
  padding: 0 24px 20px;
  color: var(--body);
  font-size: 15.5px;
  margin: 0;
}

/* ---------- Team & Mission ---------- */
.team__portraits {
  display: grid;
  grid-template-columns: 1fr;          /* mobile: one per row */
  gap: var(--gap-xl);
  margin-top: var(--gap-2xl);
}
/* Visual order Astrid · Lucas · Simone · Arber, independent of DOM order.
   Lucas is the temporary 4th portrait; when it is removed the founders
   keep their order. */
.team__portrait:nth-child(1) { order: 1; }
.team__portrait:nth-child(2) { order: 3; }
.team__portrait:nth-child(3) { order: 4; }
.team__portrait:nth-child(4) { order: 2; }
.team__portrait {
  text-align: center;
}
.team__portrait img {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto var(--gap-md);
  background: var(--primary-soft);
  border: 3px solid var(--paper);
  box-shadow: var(--shadow);
}
.team__portrait h4 { color: var(--ink); margin-bottom: 4px; }
.team__portrait small {
  font-family: var(--font-label);
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-weight: 600;
  display: block;
  margin-bottom: 4px;
}
.team__portrait p { font-size: 14px; color: var(--body); margin: 0; }

/* Two per row: Astrid · Lucas / Simone · Arber */
@media (min-width: 560px) {
  .team__portraits { grid-template-columns: repeat(2, 1fr); }
}
/* Three per row. With four people the lead sits centered on top and the
   other three go below, so no one breaks onto a row alone. With three
   people (temp portrait removed) it is a normal single row of three. */
@media (min-width: 820px) {
  .team__portraits { grid-template-columns: repeat(3, 1fr); }
  .team__portraits:has(.team__portrait:nth-child(4)) .team__portrait:nth-child(1) {
    grid-column: 2;
    grid-row: 1;
  }
  .team__portraits:has(.team__portrait:nth-child(4)) .team__portrait:nth-child(n+2) {
    grid-row: 2;
  }
}

/* ---------- Final CTA ---------- */
.final { background: var(--ink); color: #FFFFFF; }
.final h2 { color: #FFFFFF; text-align: center; }
.final p { color: #E5E7EB; text-align: center; max-width: 640px; margin: 0 auto var(--gap-xl); }
.final__form {
  max-width: 560px;
  margin: 0 auto;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  padding: var(--gap-2xl);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(20px);
}
.final__form label {
  display: block;
  font-family: var(--font-label);
  color: #9CA3AF;
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 8px;
  margin-top: var(--gap-md);
}
.final__form input[type="email"],
.final__form select {
  width: 100%;
  padding: 14px 16px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 10px;
  color: #FFFFFF;
  font-family: var(--font-body);
  font-size: 15px;
  outline: none;
  transition: border-color 0.15s ease;
}
.final__form input:focus, .final__form select:focus { border-color: var(--primary); }
.final__form input::placeholder { color: #6B7280; }
.final__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.final__chip-input { display: none; }
.final__chip-label {
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.15);
  cursor: pointer;
  font-size: 13px;
  color: #E5E7EB;
  transition: all 0.15s ease;
}
.final__chip-input:checked + .final__chip-label {
  background: var(--primary);
  border-color: var(--primary);
  color: #FFFFFF;
}
.final__consent {
  margin-top: var(--gap-lg);
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 13.5px;
  color: #9CA3AF;
}
.final__consent a { color: #FFFFFF; text-decoration: underline; }
.final__submit { margin-top: var(--gap-lg); width: 100%; justify-content: center; }
.final__thanks {
  text-align: center;
  padding: var(--gap-2xl);
  display: none;
}
.final__thanks h3 { color: #FFFFFF; }
.final__thanks p { color: #E5E7EB; }
.final__form.submitted .final__form-fields { display: none; }
.final__form.submitted .final__thanks { display: block; }

/* ---------- Footer ---------- */
footer.footer {
  background: var(--ink);
  color: #9CA3AF;
  padding: var(--gap-2xl) 0 var(--gap-xl);
  border-top: 1px solid rgba(255,255,255,0.06);
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--gap-2xl);
  margin-bottom: var(--gap-xl);
}
.footer__brand img { height: 32px; margin-bottom: var(--gap-md); }
.footer__brand p { color: #9CA3AF; font-size: 14px; max-width: 260px; }
.footer h5 {
  color: #FFFFFF;
  font-family: var(--font-head);
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin: 0 0 var(--gap-md);
  font-weight: 600;
}
.footer ul { list-style: none; padding: 0; margin: 0; }
.footer li { margin-bottom: 10px; font-size: 14px; }
.footer a { color: #D1D5DB; }
.footer a:hover { color: #FFFFFF; }
.footer__bottom {
  border-top: 1px solid rgba(255,255,255,0.06);
  padding-top: var(--gap-lg);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--gap-md);
  color: #6B7280;
  font-size: 13px;
}
@media (max-width: 900px) {
  .footer__grid { grid-template-columns: 1fr 1fr; gap: var(--gap-xl); }
}
@media (max-width: 500px) {
  .footer__grid { grid-template-columns: 1fr; }
}

/* ---------- Ease-in (No pressure) ---------- */
.ease {
  background: linear-gradient(180deg, var(--primary-soft) 0%, var(--bg) 100%);
  padding: var(--gap-2xl) 0;
}
.ease__inner {
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
  padding: 0 24px;
}
.ease h2 {
  font-size: clamp(1.6rem, 2.8vw, 2.2rem);
  margin-bottom: var(--gap-md);
}
.ease p {
  color: var(--body);
  font-size: 1.05rem;
  max-width: 620px;
  margin: 0 auto var(--gap-lg);
}
.ease__badges {
  display: flex;
  gap: var(--gap-md);
  justify-content: center;
  flex-wrap: wrap;
  margin-top: var(--gap-lg);
}
.ease__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 13px;
  color: var(--body);
  font-weight: 500;
}
.ease__badge span.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary);
  display: inline-block;
}

/* ---------- App Store Badges ---------- */
.appstore {
  display: flex;
  gap: var(--gap-md);
  justify-content: center;
  margin-top: var(--gap-lg);
  flex-wrap: wrap;
}
.appstore__badge {
  padding: 10px 20px;
  border-radius: 10px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.15);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-family: var(--font-body);
  transition: background 0.15s ease, border-color 0.15s ease;
}
.appstore__badge:hover { background: rgba(255,255,255,0.09); border-color: rgba(255,255,255,0.25); text-decoration: none; }
.appstore__badge svg { width: 24px; height: 24px; }
.appstore__badge-text { display: flex; flex-direction: column; line-height: 1.1; }
.appstore__badge-text small { font-size: 10.5px; letter-spacing: 1px; color: #9CA3AF; text-transform: uppercase; }
.appstore__badge-text strong { font-size: 15px; font-weight: 600; }

/* ---------- Utility: image placeholder ---------- */
.placeholder-block {
  width: 100%;
  height: 100%;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: repeating-linear-gradient(45deg, var(--primary-soft), var(--primary-soft) 12px, var(--paper) 12px, var(--paper) 24px);
  color: var(--primary-dark);
  font-family: var(--font-label);
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 600;
}

/* ---------- Coaches Page ---------- */
.coaches-hero {
  background: linear-gradient(180deg, var(--bg) 0%, var(--secondary-soft) 100%);
  padding: var(--gap-3xl) 0 var(--gap-2xl);
  text-align: center;
}
.coaches-hero h1 { max-width: 780px; margin: 0 auto var(--gap-md); }
.coaches-hero p { max-width: 620px; margin: 0 auto; color: var(--body); font-size: 1.1rem; }
.coaches-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-xl);
  margin-top: var(--gap-2xl);
}
.coach-card {
  background: var(--paper);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.coach-card__photo {
  width: 100%;
  aspect-ratio: 1/1;
  background: var(--primary-soft);
  overflow: hidden;
}
.coach-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.coach-card__body { padding: var(--gap-xl); flex: 1; display: flex; flex-direction: column; }
.coach-card__body h3 { margin: 0 0 4px; color: var(--ink); }
.coach-card__body small {
  font-family: var(--font-label);
  color: var(--primary);
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 600;
  display: block;
  margin-bottom: var(--gap-md);
}
.coach-card__body p { font-size: 14.5px; color: var(--body); margin-bottom: var(--gap-lg); }
.coach-card__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.coach-card__actions .btn { flex: 1; justify-content: center; min-width: 0; }
.coach-card__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; margin-bottom: var(--gap-md); }
.coach-card__tag {
  background: var(--primary-soft);
  color: var(--primary-dark);
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 500;
}
.coach-card--placeholder {
  border: 1.5px dashed var(--secondary);
  background: var(--secondary-soft);
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--gap-xl);
  text-align: center;
}
.coach-card--placeholder h3 { color: var(--secondary); margin-bottom: 8px; }
.coach-card--placeholder p { color: var(--secondary); font-size: 14px; margin: 0; }
@media (max-width: 900px) { .coaches-grid { grid-template-columns: 1fr; } }

/* ---------- Keto Phasen (Chevron-Reihe) ---------- */
.phases {
  display: flex;
  align-items: stretch;
  gap: 4px;
  margin: var(--gap-2xl) 0;
}
.phase {
  flex: 1;
  min-height: 260px;
  padding: 28px 20px 28px 44px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 50%, calc(100% - 22px) 100%, 0 100%, 22px 50%);
}
.phase:first-child {
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 50%, calc(100% - 22px) 100%, 0 100%);
  padding-left: 24px;
}
.phase--1 { background: #E5E7EB; color: var(--ink); }
.phase--2 { background: #C5EAD1; color: var(--ink); }
.phase--3 { background: #7AC896; color: #FFFFFF; }
.phase--4 { background: #3EA36B; color: #FFFFFF; }
.phase--5 { background: var(--secondary); color: #FFFFFF; }
.phase--3 .phase__title,
.phase--4 .phase__title,
.phase--5 .phase__title { color: #FFFFFF; }
.phase--3 .phase__body,
.phase--4 .phase__body,
.phase--5 .phase__body { color: rgba(255,255,255,0.92); }
.phase--3 .phase__metric-value,
.phase--4 .phase__metric-value,
.phase--5 .phase__metric-value { color: #FFFFFF; }
.phase--1 .phase__title,
.phase--2 .phase__title { color: var(--ink); }

.phase__label {
  font-size: 11px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  font-weight: 600;
  opacity: 0.85;
}
.phase__title {
  font-size: 21px;
  font-weight: 700;
  line-height: 1.15;
  margin: 8px 0 12px;
}
.phase__body {
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 20px;
  opacity: 0.92;
  flex-grow: 1;
}
.phase__metric { display: flex; flex-direction: column; gap: 3px; }
.phase__metric-label {
  font-size: 10.5px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  font-weight: 600;
  opacity: 0.7;
}
.phase__metric-value {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.2px;
}

/* Tablet: kleinere Chevrons, alle sichtbar */
@media (max-width: 1024px) {
  .phase { padding: 22px 16px 22px 36px; min-height: 220px; }
  .phase:first-child { padding-left: 20px; }
  .phase__title { font-size: 17px; }
  .phase__body { font-size: 13px; margin-bottom: 16px; }
}

/* Mobile: gestapelte Cards, minimalistisch */
@media (max-width: 720px) {
  .phases { flex-direction: column; gap: 6px; margin: var(--gap-xl) 0; }
  .phase, .phase:first-child {
    clip-path: none;
    min-height: auto;
    padding: 14px 18px;
    border-radius: 10px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "label title metric";
    align-items: center;
    gap: 4px 14px;
  }
  .phase__label {
    grid-area: label;
    font-size: 10px;
    letter-spacing: 1.2px;
    min-width: 78px;
  }
  .phase__title {
    grid-area: title;
    font-size: 15px;
    margin: 0;
    font-weight: 600;
  }
  .phase__body { display: none; }
  .phase__metric {
    grid-area: metric;
    align-items: flex-end;
  }
  .phase__metric-label { display: none; }
  .phase__metric-value {
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
  }
}

/* ---------- Preise-Sektion ---------- */
.prices {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap-lg);
  margin-top: var(--gap-2xl);
}
.price {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--gap-xl);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm);
}
.price--featured {
  background: linear-gradient(180deg, var(--paper) 0%, var(--primary-soft) 100%);
  border-color: var(--primary);
  border-width: 2px;
}
.price__label {
  font-family: var(--font-label);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}
.price__value {
  font-family: var(--font-head);
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1;
  margin: var(--gap-sm) 0;
}
.price__value small {
  font-size: 0.9rem;
  color: var(--muted);
  font-weight: 500;
  margin-left: 4px;
}
.price__num { color: var(--ink); }
.price--featured .price__num { color: var(--primary); }
.price__note {
  color: var(--muted);
  font-size: 13.5px;
}
@media (max-width: 720px) {
  .prices { grid-template-columns: 1fr; }
}

/* ============================================
   Vorher-Nachher-Slider (V2/V3) — konsolidiert
   Struktur: .ba-slider > .ba-slider__frame (geclippt: Bilder, Linie, Labels)
                        > .ba-slider__handle (ungeclippt: Button)
============================================ */
.hero__image:has(.ba-slider) {
  overflow: visible;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}
.ba-slider {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 400px;
  cursor: default;
  user-select: none;
}
.ba-slider__frame {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--primary-soft);
  box-shadow: var(--shadow-lg);
}
.ba-slider__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 20%;
  display: block;
  pointer-events: none;
}
.ba-slider__img--before { filter: saturate(0.35); }
.ba-slider__after {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
/* Linie: im Frame geclippt, läuft exakt von Bildkante zu Bildkante */
.ba-slider__line {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 3px;
  background: rgba(255, 255, 255, 0.95);
  transform: translateX(-50%);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  z-index: 2;
}
/* Handle: nur der Button, ragt frei über den Frame hinaus */
.ba-slider__handle {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 54px;
  transform: translateX(-50%);
  z-index: 4;
  outline: none;
  cursor: ew-resize;
}
.ba-slider__button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 54px;
  height: 54px;
  background: #FFFFFF;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
  animation: ba-pulse 3s ease-in-out infinite;
}
.ba-slider--engaged .ba-slider__button { animation: none; }
@keyframes ba-pulse {
  0%, 100% { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2), 0 0 0 0 rgba(90, 73, 255, 0.4); }
  50%      { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2), 0 0 0 7px rgba(90, 73, 255, 0); }
}
.ba-slider__handle:focus-visible .ba-slider__button {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2), 0 0 0 3px var(--secondary);
}
/* Logo: rotiert + entsättigt, on hover: +45° weiter, Farbe + volle Opacity */
/* Hohe Spezifität nötig: .hero__image img (width/height 100%) würde sonst gewinnen */
.hero__image .ba-slider__button img.ba-slider__logo {
  width: 16px;
  height: 16px;
  object-fit: contain;
  display: block;
  filter: saturate(0.15) brightness(0.85);
  opacity: 0.75;
  transform: rotate(45deg);
  transition: transform 0.45s cubic-bezier(0.34, 1.4, 0.64, 1), filter 0.35s ease, opacity 0.35s ease;
  pointer-events: none;
}
/* Spark-Partikel: subtile Transformations-Andeutung beim Sliden */
.ba-slider__sparks {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: var(--radius-lg);
  pointer-events: none;
  z-index: 3;
}
.ba-spark {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  animation: ba-spark-fly var(--dur, 700ms) ease-out forwards;
}
@keyframes ba-spark-fly {
  0%   { opacity: 0.85; transform: translate(0, 0) scale(1); }
  100% { opacity: 0;    transform: translate(var(--dx, 20px), var(--dy, -20px)) scale(0.15); }
}
@media (prefers-reduced-motion: reduce) {
  .ba-spark { display: none; }
}
.hero__image .ba-slider__handle:hover img.ba-slider__logo,
.hero__image .ba-slider__handle:focus-visible img.ba-slider__logo {
  transform: rotate(90deg);
  filter: none;
  opacity: 1;
}
.ba-slider__label {
  position: absolute;
  top: var(--gap-md);
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(17, 24, 39, 0.7);
  color: #FFFFFF;
  font-family: var(--font-label);
  font-size: 10px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  font-weight: 600;
  z-index: 3;
  pointer-events: none;
}
.ba-slider__label--before { left: var(--gap-md); }
.ba-slider__label--after { right: var(--gap-md); background: rgba(90, 73, 255, 0.85); }
@media (prefers-reduced-motion: reduce) {
  .ba-slider__button { animation: none; }
  .ba-slider__logo { transition: none; }
}

/* ---------- Store-Badges auf hellem Grund (CTA mit Verlauf) ---------- */
.ease .appstore__badge {
  background: var(--ink);
  border-color: var(--ink);
  color: #FFFFFF;
}
.ease .appstore__badge:hover { background: #1F2937; border-color: #1F2937; }

/* ---------- About-Seite ---------- */
.about-people {
  display: flex;
  flex-direction: column;
  gap: var(--gap-2xl);
  margin-top: var(--gap-2xl);
  max-width: 880px;
}
.about-person {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: var(--gap-xl);
  align-items: start;
}
.about-person__photo {
  aspect-ratio: 3 / 4;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--primary-soft);
}
.about-person__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.about-person__photo .placeholder-block { height: 100%; }
.about-person__photo--round {
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: transparent;
}
.about-person__photo--round img { object-fit: cover; }
.about-person h3 { margin: 0 0 4px; }
.about-person small {
  display: block;
  color: var(--muted);
  font-weight: 500;
  letter-spacing: 0.4px;
  margin-bottom: var(--gap-md);
}
.about-person p { color: var(--body); }
.about-hslu {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: var(--gap-2xl);
  align-items: center;
  margin-top: var(--gap-2xl);
}
.about-hslu__image {
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height: 320px;
  background: var(--primary-soft);
}
.about-hslu__image .placeholder-block { height: 100%; min-height: 320px; }
.about-hslu__image img { width: 100%; height: 100%; min-height: 320px; object-fit: cover; display: block; }
.about-hslu__logo {
  height: 44px;
  width: auto;
  margin-bottom: var(--gap-lg);
  display: block;
}
.about-hslu__body p { color: var(--body); margin-bottom: var(--gap-lg); }
@media (max-width: 720px) {
  .about-person { grid-template-columns: 1fr; }
  .about-person__photo { max-width: 260px; }
  .about-hslu { grid-template-columns: 1fr; }
}

/* ---------- Legal-Seiten ---------- */
.legal { padding: calc(var(--gap-2xl) + 40px) 0 var(--gap-2xl); }
.legal h1 { margin-bottom: var(--gap-sm); }
.legal .legal__stand { color: var(--muted); font-size: 13.5px; margin-bottom: var(--gap-2xl); }
.legal h3 { margin-top: var(--gap-xl); margin-bottom: var(--gap-sm); }
.legal h4 { margin-top: var(--gap-lg); margin-bottom: 6px; }
.legal p { color: var(--body); margin-bottom: var(--gap-md); }