/* ═══════════════════════════════════════════════════════════
   CycloFine™ – Cellufine®   ·   ENTWURF „Editorial Apotheken-Moderne"
   Ein Wurf: Typografie traegt, Creme dominiert, EIN Akzent (Koralle),
   der Faden laeuft als Erzaehllinie von verheddert nach ruhig.
   Nur Vorschau — verlinkt nichts aus css/style.css.
   ═══════════════════════════════════════════════════════════ */

/* ---------- Fonts (selbst gehostet, absolute Pfade) ---------- */
@font-face { font-family:'Playfair Display'; src:url('/fonts/playfair-display-regular.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Playfair Display'; src:url('/fonts/playfair-display-italic.woff2') format('woff2'); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:'Playfair Display'; src:url('/fonts/playfair-display-600.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'Playfair Display'; src:url('/fonts/playfair-display-700.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'Lora'; src:url('/fonts/lora-regular.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Lora'; src:url('/fonts/lora-italic.woff2') format('woff2'); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:'Lora'; src:url('/fonts/lora-600.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'Inter'; src:url('/fonts/inter-regular.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Inter'; src:url('/fonts/inter-500.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Inter'; src:url('/fonts/inter-600.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; }

/* ---------- Tokens ---------- */
:root {
  --cream:      #FAF8F6;
  --cream-deep: #F3EFEA;
  --sage-soft:  #E9F1E7;
  --mist-soft:  #E8F0F5;
  --blush:      #F6D8CF;
  --blush-deep: #E4A493;   /* Linien, Marker, Zahlen auf dunklem Grund */
  --blush-text: #A85A44;   /* Zahlen und Akzenttext auf Creme */
  --ink:        #1A2233;
  --ink-70:     #4C5361;   /* Sekundaertext, 7,3:1 auf Creme */
  --ink-15:     rgba(26,34,51,.15);
  --ink-10:     rgba(26,34,51,.10);
  --cream-78:   rgba(250,248,246,.78);  /* Sekundaertext auf Ink, 7,8:1 */

  --font-display: 'Playfair Display', Georgia, serif;
  --font-accent:  'Lora', Georgia, serif;
  --font-ui:      'Inter', system-ui, sans-serif;

  --wrap: 1160px;

  /* Drei Fliesstextgroessen — mehr gibt es nicht. */
  --fs-text:  1.0625rem;   /* 17,0px */
  --fs-klein: .95rem;      /* 15,2px */
  --fs-lead:  1.22rem;     /* 19,5px */
}

/* ---------- Reset / Basis ---------- */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; scroll-padding-top:88px; -webkit-tap-highlight-color:transparent; }
body {
  font-family:var(--font-ui);
  font-size:var(--fs-text);
  line-height:1.65;
  color:var(--ink);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
}
img { max-width:100%; height:auto; display:block; }
a { color:inherit; }

.wrap { max-width:var(--wrap); margin-inline:auto; padding-inline:clamp(20px, 4vw, 40px); }
.wrap-narrow { max-width:780px; }
.center { text-align:center; }

/* ---------- A11y / Interaktion ---------- */
.skip-link {
  position:fixed; left:16px; top:-64px; z-index:100;
  background:var(--ink); color:var(--cream);
  padding:.6em 1.2em; border-radius:3px;
  font-size:var(--fs-klein); font-weight:600; text-decoration:none;
  transition:top .2s ease;
}
.skip-link:focus-visible { top:12px; }
:focus-visible { outline:2px solid var(--ink); outline-offset:3px; }
.claims :focus-visible, .cta-band :focus-visible { outline-color:var(--blush-deep); }
.btn, .nav-toggle { touch-action:manipulation; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } }
:target { scroll-margin-top:88px; }

/* ---------- Typografie ---------- */
h1, h2, h3 {
  font-family:var(--font-display); font-weight:600;
  line-height:1.06; letter-spacing:-.022em; text-wrap:pretty;
}
p, li, dd, dt, td, th { text-wrap:pretty; }
h1 { font-size:clamp(2.7rem, 6.2vw, 5rem); }
h2 { font-size:clamp(1.9rem, 4.4vw, 3.05rem); margin-bottom:.5em; }
/* Zeilen mit gesetztem Umbruch bleiben schmaler — sonst reissen sie auf kleinen
   Schirmen aus dem Satzspiegel. Unter 600px faellt der Umbruch weg (br.lb). */
.claims h2, .study h2, .survey h2 { font-size:clamp(1.75rem, 4.2vw, 2.9rem); }
h3 { font-size:1.3rem; }
h1 em, h2 em, h3 em { font-style:italic; font-weight:400; }
p  { max-width:62ch; }
.center > p, p.center { margin-inline:auto; }
@media (max-width:599px) { br.lb { display:none; } }

.eyebrow {
  font-family:var(--font-ui); font-size:var(--fs-klein); font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ink-70);
  margin-bottom:1.2em;
}
.eyebrow.light { color:var(--cream-78); }
/* Korallenstrich vor der Rubrik — die Handschrift der Seite */
.eyebrow-mark::before {
  content:''; display:inline-block; width:clamp(22px, 4vw, 40px); height:1px;
  background:var(--blush-deep); vertical-align:.35em; margin-right:.85em;
}
.eyebrow-mark.center::after {
  content:''; display:inline-block; width:clamp(22px, 4vw, 40px); height:1px;
  background:var(--blush-deep); vertical-align:.35em; margin-left:.85em;
}
/* Unter 600px: weniger Laufweite, sonst bricht die Rubrik auf zwei Zeilen. */
@media (max-width:599px) {
  .eyebrow { font-size:.88rem; letter-spacing:.14em; }
}

/* Fliesstext-Links: Koralle als Unterstrich, Text bleibt Ink */
.days a, .study a:not(.btn), .survey a:not(.btn), .warum a:not(.btn), .compare a,
.faq a:not(.btn) {
  text-decoration:none; border-bottom:1px solid var(--blush-deep); padding-bottom:1px;
}
.link-blush { color:var(--blush-deep); text-decoration:none; border-bottom:1px solid rgba(228,164,147,.5); }

/* ---------- Buttons (editorial: kaum gerundet, Inter 600) ---------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--font-ui); font-weight:600; font-size:var(--fs-text);
  letter-spacing:.005em;
  padding:.92em 1.8em; border-radius:3px; text-decoration:none;
  border:1px solid transparent;
  transition:transform .25s ease, background-color .25s ease, color .25s ease, border-color .25s ease;
}
.btn:hover { transform:translateY(-2px); }
.btn-ink    { background:var(--ink); color:var(--cream); }
.btn-ink:hover { background:#2A3550; }
.btn-ghost  { border-color:var(--ink-15); color:var(--ink); background:transparent; }
.btn-ghost:hover { border-color:var(--ink); }
.btn-cream  { background:var(--cream); color:var(--ink); }
.btn-cream:hover { background:var(--blush); }
.btn-outline-cream { border-color:rgba(250,248,246,.55); color:var(--cream); }
.btn-outline-cream:hover { border-color:var(--cream); background:rgba(250,248,246,.08); }
.btn-small  { padding:.62em 1.3em; font-size:var(--fs-klein); }

/* ---------- Header ---------- */
.site-head {
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--cream) 90%, transparent);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--ink-10);
}
.head-inner { display:flex; align-items:center; gap:24px; padding-block:14px; }
.brand-word {
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(1.15rem, 2.4vw, 1.4rem);
  letter-spacing:-.01em; color:var(--ink); text-decoration:none;
  line-height:1; white-space:nowrap;
  padding-block:7px;   /* Trefferflaeche >= 24px */
  display:inline-flex; align-items:center; gap:10px;
}
.brand-mark { height:32px; width:auto; }
.brand-word .tm { font-size:.5em; vertical-align:super; font-weight:400; color:var(--ink-70); }

.nav-toggle {
  width:42px; height:42px; flex-shrink:0;
  display:grid; place-content:center; gap:5px;
  background:transparent; border:1px solid var(--ink-15); border-radius:3px;
  cursor:pointer;
}
.nav-toggle span {
  display:block; width:16px; height:2px; border-radius:2px; background:var(--ink);
  transition:transform .25s ease, opacity .25s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

.main-nav {
  position:absolute; top:100%; left:0; right:0;
  display:flex; flex-direction:column; gap:2px;
  padding:10px clamp(20px, 4vw, 40px) 18px;
  background:var(--cream); /* Fallback: deckend, falls color-mix nicht greift (13.09.2026) */
  background:color-mix(in srgb, var(--cream) 97%, transparent);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--ink-10);
  visibility:hidden; opacity:0; translate:0 -8px; pointer-events:none;
  transition:opacity .25s ease, translate .25s ease, visibility 0s linear .25s;
}
.main-nav.open {
  visibility:visible; opacity:1; translate:0 0; pointer-events:auto;
  transition:opacity .25s ease, translate .25s ease, visibility 0s;
}
.main-nav a {
  font-size:var(--fs-klein); font-weight:500; text-decoration:none; color:var(--ink-70);
  padding-block:.7em; border-bottom:1px solid transparent;
  transition:color .2s ease, border-color .2s ease;
}
.main-nav a:hover { color:var(--ink); border-bottom-color:var(--blush-deep); }
.site-head .btn { margin-left:auto; }

/* 8 Nav-Punkte + Marke + Kaufen brauchen ~1080px — darunter Burger */
@media (min-width:1100px) {
  .nav-toggle { display:none; }
  .main-nav {
    position:static; flex-direction:row; gap:clamp(14px, 2.4vw, 28px); margin-left:auto;
    padding:0; background:transparent; backdrop-filter:none; border-bottom:none;
    visibility:visible; opacity:1; translate:none; pointer-events:auto;
  }
  .main-nav a { padding-block:.35em; }
  .site-head .btn { margin-left:0; }
}

/* ---------- Der Faden: Erzaehllinie der Seite ----------
   Oben verheddert, nach unten glatt. Immer im Fluss (nie hinter Text). */
.thread { display:block; width:100%; color:var(--ink-15); pointer-events:none; }
.thread-1 { height:clamp(78px, 9vw, 130px); margin-top:clamp(26px, 4vw, 48px); }
.thread-2 { height:clamp(62px, 7vw, 104px); margin-top:clamp(24px, 4vw, 44px); }
.thread-3 { height:clamp(54px, 6vw, 92px);  margin-top:clamp(22px, 3vw, 40px); }
.thread-4 { height:clamp(46px, 5vw, 78px);  margin-top:clamp(20px, 3vw, 36px); color:var(--ink-10); }
.thread-5 { height:clamp(36px, 4vw, 60px);  margin-top:clamp(18px, 3vw, 32px); color:var(--ink-10); }

/* ---------- Hero ---------- */
.hero { position:relative; overflow:clip; padding-block:clamp(36px, 6vw, 76px) clamp(14px, 3vw, 30px); }
.hero-grid { display:grid; gap:clamp(28px, 5vw, 44px); align-items:center; }
.hero-copy .lead {
  font-family:var(--font-accent); font-size:var(--fs-lead); line-height:1.6;
  color:var(--ink-70); max-width:50ch; margin-top:1.1em;
}
/* Lora hat nur 400 und 600 — ohne diese Regel synthetisiert der Browser einen Fettschnitt. */
.hero-copy .lead strong { font-weight:600; color:var(--ink); }
.hero-cta { display:flex; flex-wrap:wrap; gap:14px; margin-top:2em; }

/* Buehne: Editorial-Videoszene, radial in die Flaeche aufgeloest (Kimis Ansatz,
   gestrafft) — echte Rundung, damit die Ecke gezeichnet bleibt. */
.hero-art { display:grid; place-items:center; }
.bloom-stage { position:relative; width:min(78vw, 340px); aspect-ratio:768/1168; }
.editorial-szene {
  width:100%; height:auto; border-radius:14px;
  -webkit-mask-image:radial-gradient(ellipse 110% 105% at 50% 48%, #000 60%, transparent 100%);
  mask-image:radial-gradient(ellipse 110% 105% at 50% 48%, #000 60%, transparent 100%);
}
.editorial-still { display:none; }
@media (prefers-reduced-motion: reduce) {
  .editorial-video { display:none; }
  .editorial-still { display:block; }
}
@media (min-width:900px) {
  .hero-grid { grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); gap:clamp(24px, 3vw, 48px); }
  .bloom-stage { width:auto; height:clamp(430px, 33vw, 520px); }
}

/* ---------- Scroll-Story: Faden zeichnet sich, Blueten blenden um ----------
   Rein dekorativ. Der Fallback (kein scroll-driven animations / reduced
   motion) ist exakt der bisherige statische Zustand. */
@media (prefers-reduced-motion: no-preference) {
  @supports ((animation-timeline: view()) and (animation-range: entry)) {
    /* Der Faden spult sich beim Hereinscrollen ab (pathLength="1" im HTML). */
    .thread path {
      stroke-dasharray:1;
      stroke-dashoffset:1;
      animation:thread-draw auto ease-out forwards;
      animation-timeline:view();
      animation-range:entry 0% cover 30%;
    }
    @keyframes thread-draw {
      from { stroke-dashoffset:1; }
      to   { stroke-dashoffset:0; }
    }
  }
}

/* ---------- Beleg-Leiste ---------- */
.fakten { border-block:1px solid var(--ink-15); padding-block:1.15em; }
.fakten-liste {
  list-style:none;
  display:grid; grid-template-columns:1fr 1fr; gap:.5em 1.4em;
  font-size:var(--fs-klein); color:var(--ink-70); text-align:center;
  letter-spacing:.03em;
}
@media (min-width:761px) {
  .fakten-liste { display:flex; flex-wrap:wrap; justify-content:center; gap:.3em 0; }
  .fakten-liste li:not(:last-child)::after { content:'·'; margin-inline:1.1em; color:var(--blush-deep); }
}

/* ---------- Warum: typografische Komposition, keine Kacheln ---------- */
.warum { padding-block:clamp(56px, 8vw, 104px) 0; }
.warum-h2 { max-width:16ch; }
.warum-liste { display:grid; gap:clamp(38px, 6vw, 56px); margin-top:clamp(34px, 5vw, 60px); }
.warum-item { padding-top:clamp(16px, 2.4vw, 24px); border-top:1px solid var(--ink-15); }
.warum-item > p { max-width:44ch; }
.warum-1 h3 { font-size:clamp(1.2rem, 1.9vw, 1.45rem); line-height:1.3; max-width:24ch; letter-spacing:-.01em; }
/* Die Zahl ist der Held — Playfair, Koralle, gross. */
.warum-zahl {
  font-family:var(--font-display); font-weight:700; color:var(--blush-text);
  font-size:clamp(3.2rem, 7vw, 5.2rem); line-height:.92; letter-spacing:-.035em;
  font-variant-numeric:tabular-nums;
  display:flex; align-items:baseline; gap:.3em; margin-bottom:.18em;
}
.warum-zahl span {
  font-family:var(--font-ui); font-size:var(--fs-text); font-weight:500;
  color:var(--ink-70); letter-spacing:.02em;
}
.warum-2 h3, .warum-3 h3 { font-size:clamp(1.2rem, 1.9vw, 1.45rem); line-height:1.3; max-width:24ch; }
.warum-3 h3 + p { margin-top:.9em; color:var(--ink-70); }
.warum-3 p + p { margin-top:.9em; }
.warum-link { font-weight:600; }
@media (min-width:900px) {
  .warum-liste { grid-template-columns:repeat(12, 1fr); column-gap:clamp(24px, 3vw, 44px); row-gap:0; }
  .warum-1 { grid-column:1 / 7; }
  .warum-2 { grid-column:8 / 13; margin-top:clamp(44px, 5vw, 78px); }
  .warum-3 { grid-column:3 / 10; margin-top:clamp(52px, 6vw, 92px); }
}

/* ---------- Diese Tage: schmaler Zitat-Moment ---------- */
.days { padding-block:clamp(56px, 8vw, 100px) 0; }
.days h2 { margin-bottom:.55em; }
.days-text { font-family:var(--font-accent); font-size:var(--fs-lead); line-height:1.62; max-width:34ch; }
/* Initial: die Handschrift des Absatzes */
.days-text::first-letter {
  font-family:var(--font-display); font-weight:700; color:var(--blush-text);
  float:left; font-size:3.9em; line-height:.8; padding:.06em .1em 0 0;
}

/* ---------- Frauen-Zug: die Vorbeigehenden (Diese Tage) ---------- */
.frauen-buehne {
  margin-top:clamp(34px, 5vw, 56px);
  overflow-x:auto; overflow-y:hidden;
  scrollbar-width:none;
  scroll-snap-type:x proximity;
}
.frauen-buehne::-webkit-scrollbar { display:none; }
.frauen-zug {
  list-style:none; margin:0;
  display:flex; align-items:flex-start; gap:clamp(14px, 2vw, 26px);
  padding:0 clamp(20px, 4vw, 40px) clamp(20px, 3vw, 44px);
  width:max-content;
}
.frauen-zug li {
  flex:0 0 auto; width:clamp(160px, 46vw, 300px); scroll-snap-align:center;
  position:relative; overflow:hidden; border-radius:14px;
}
.frauen-zug li:nth-child(even) { margin-top:clamp(20px, 3vw, 44px); }
/* Cream-Schleier + leichte Entsaettigung: vereinheitlicht die Farbtemperaturen zum Band */
.frauen-zug li::after {
  content:''; position:absolute; inset:0; border-radius:inherit;
  background:color-mix(in srgb, var(--cream) 12%, transparent);
  pointer-events:none;
}
.frauen-zug img { width:100%; height:auto; filter:saturate(.88); }
/* Desktop: die Reihe zieht scroll-gebunden vorbei — per JavaScript (js/main.js),
   damit es in jedem Browser laeuft. Fallback ist die wischbare Reihe. */
.frauen-buehne[data-drift] { overflow:hidden; display:flex; justify-content:center; }

/* ---------- Magnesium-Claims: dunkler Anker ---------- */
/* Meerwasser-Textur (~10 % sichtbar) unter dem Ink — Magnesium aus Meerwasser.
   Bei Austausch des Bildes: Datei UMBENENNEN (url() wird nicht versioniert, immutable-Cache). */
.claims {
  background:
    linear-gradient(rgba(26,34,51,.92), rgba(26,34,51,.92)),
    url('../img/meer-band.webp') center / cover no-repeat,
    var(--ink);
  color:var(--cream); padding-block:clamp(64px, 9vw, 120px);
}
.claims h2 { color:var(--cream); }
.claims-list { list-style:none; max-width:780px; margin:clamp(34px, 5vw, 58px) auto 0; }
.claims-list li {
  display:grid; grid-template-columns:auto 1fr; column-gap:clamp(18px, 3vw, 34px);
  align-items:baseline;
  padding-block:1.35em;
  border-bottom:1px solid rgba(250,248,246,.16);
  font-family:var(--font-accent); font-size:var(--fs-lead); line-height:1.55;
}
.claims-list li:first-child { border-top:1px solid rgba(250,248,246,.16); }
.claims-list span {
  font-family:var(--font-display); font-weight:700; font-size:clamp(1.5rem, 3vw, 2.1rem);
  color:var(--blush-deep); letter-spacing:0; font-variant-numeric:tabular-nums;
}
.claims-list .when { font-style:normal; font-weight:600; color:var(--blush-deep); font-family:var(--font-ui); font-size:var(--fs-klein); letter-spacing:.06em; }
.claims-list strong { font-weight:600; color:#fff; }
.claims-foot {
  margin:clamp(30px, 4vw, 46px) auto 0; text-align:center;
  color:var(--cream-78); font-size:var(--fs-klein); max-width:56ch;
}

/* ---------- Studie: sachliche Datenzeile ---------- */
.study { padding-block:clamp(64px, 9vw, 120px) 0; }
.study-facts {
  display:grid; margin:clamp(34px, 5vw, 54px) auto 0; max-width:1000px;
  border-bottom:1px solid var(--ink-15);
}
.study-facts > div { padding:1.15em .2em 1.25em; border-top:1px solid var(--ink-15); }
.study-facts dt {
  font-size:var(--fs-klein); font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-70);
}
.study-facts dd { font-size:var(--fs-text); font-weight:500; margin-top:.4em; line-height:1.45; }
@media (min-width:561px) { .study-facts { grid-template-columns:1fr 1fr; column-gap:clamp(20px,3vw,40px); } }
@media (min-width:921px) {
  .study-facts { grid-template-columns:repeat(4, 1fr); column-gap:0; }
  .study-facts > div { padding-inline:clamp(14px, 1.7vw, 22px); border-left:1px solid var(--ink-15); }
  .study-facts > div:first-child { padding-left:0; border-left:none; }
  .study-facts > div:last-child { padding-right:0; }
}
.study-result-box {
  margin:clamp(30px, 4vw, 46px) auto 0; max-width:560px;
  padding:clamp(26px, 4vw, 38px) clamp(22px, 3vw, 34px);
  text-align:center; border-radius:14px;
  border:1px solid var(--blush); background:color-mix(in srgb, var(--blush) 28%, var(--cream));
}
.study-result-zahl {
  font-family:var(--font-display); font-weight:700; font-size:clamp(2.4rem, 5vw, 3.4rem);
  line-height:1; color:var(--blush-text);
}
.study-result-box p + p {
  margin-top:.55em; font-family:var(--font-accent); font-size:var(--fs-lead); line-height:1.6; color:var(--ink);
}
.study-attrib {
  margin:clamp(26px, 3vw, 38px) auto 0; text-align:center; max-width:62ch;
  font-size:var(--fs-klein); color:var(--ink-70);
  padding-top:1.2em; border-top:1px solid var(--ink-15);
}
.study-attrib strong { color:var(--ink); font-weight:600; }
.study-attrib em { font-style:italic; }
.kompakt-cta { text-align:center; margin-top:clamp(30px, 4vw, 44px); max-width:none; }

/* ---------- Vergleich: klare Tabelle, nur Haarlinien ---------- */
.compare { padding-block:clamp(56px, 8vw, 100px); }
.compare h2 { max-width:20ch; }
.table-scroll { overflow-x:auto; margin-top:clamp(28px, 4vw, 46px); }
.compare table {
  width:100%; border-collapse:collapse; background:transparent;
  font-size:var(--fs-text); min-width:560px; font-variant-numeric:tabular-nums;
}
.compare th, .compare td {
  padding:.95em 1.2em; text-align:left; border-bottom:1px solid var(--ink-15);
}
.compare thead th:not(:first-child), .compare tbody td { text-align:center; }
.compare thead th {
  font-family:var(--font-ui); font-size:var(--fs-klein); font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink-70);
  border-bottom:1px solid var(--ink);
  vertical-align:bottom;
}
.compare thead th.col-cf { color:var(--blush-text); border-bottom-color:var(--blush-deep); }
.compare tbody th[scope="row"] { font-weight:400; padding-left:0; }
.compare .col-cf { background:color-mix(in srgb, var(--blush) 22%, var(--cream)); font-weight:600; }
.compare tbody tr:last-child th, .compare tbody tr:last-child td { border-bottom:none; }

/* Unter 620px: beide Werte NEBENEINANDER, Merkmal darueber (abgenommenes Muster) */
@media (max-width: 620px) {
  .compare table { min-width:0; display:block; }
  .compare thead { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
  .compare tbody, .compare tr, .compare td, .compare th { display:block; width:auto; }
  .compare tbody tr {
    display:grid; grid-template-columns:1fr 1fr; gap:.6em .7em;
    padding:1em 0; border-bottom:1px solid var(--ink-15);
  }
  .compare tbody tr:last-child { border-bottom:none; }
  .compare tbody th[scope="row"] {
    grid-column:1 / -1; padding:0; border:none;
    font-weight:600; font-size:var(--fs-text); line-height:1.35;
  }
  .compare tbody td {
    display:flex; flex-direction:column; justify-content:space-between; gap:.1em;
    padding:.6em .7em; border:none; border-radius:3px;
    font-size:var(--fs-text); font-weight:600; text-align:left;
    background:var(--cream-deep);
  }
  .compare tbody td::before {
    content:attr(data-label);
    color:var(--ink-70); font-size:var(--fs-klein); font-weight:400;
  }
  .compare .col-cf { background:color-mix(in srgb, var(--blush) 34%, var(--cream)); }
  .table-scroll { overflow-x:visible; }
}

/* ---------- Umfrage: warme Flaeche direkt nach „Diese Tage" ---------- */
/* ---------- Zum Mitnehmen: Umfrage + Zyklustagebuch als Paar (Vorschau 13.09.2026) ---------- */
.mitnehmen { padding-block:clamp(56px, 8vw, 96px); }
.mitnehmen-grid { display:grid; gap:clamp(18px, 2.4vw, 28px); }
@media (min-width:900px) { .mitnehmen-grid { grid-template-columns:1fr 1fr; align-items:stretch; } }
.mitnehmen-block {
  padding:clamp(28px, 4vw, 52px); border-radius:14px; color:var(--ink);
  display:flex; flex-direction:column;
}
.block-umfrage { background:var(--blush); }
.block-tagebuch { background:var(--sage-soft); }
.mitnehmen-block h2 { font-size:clamp(1.6rem, 2.6vw, 2.2rem); margin-bottom:.55em; }
.mitnehmen-block p { margin-inline:0; max-width:none; }
.block-frage { margin-top:1em; font-family:var(--font-accent); font-size:var(--fs-lead); }
.block-note { margin-top:1.4em; font-size:var(--fs-klein); color:var(--ink-70); }
.block-cta { margin-top:auto; padding-top:1.6em; }            /* Button steht in beiden Bloecken unten auf gleicher Hoehe */
.block-note a { color:var(--ink); }

/* ---------- Fragen-Akkordeon (Muster aus css/style.css, /fragen/) ----------
   Die Startseite laedt nur start.css — die Regeln stehen deshalb hier noch
   einmal. Radius 14px statt --radius (das Token gibt es nur in style.css). */
.faq { padding-block:clamp(60px, 8vw, 120px) 0; }
.faq h2 { margin-bottom:clamp(20px, 3vw, 36px); }
.faq-lead { color:var(--ink-70); margin-top:-.2em; margin-bottom:clamp(20px, 3vw, 30px); }
.faq-item {
  border:1px solid var(--ink-10); border-radius:14px;
  background:#fff;
  margin-top:14px;
}
.faq-item summary {
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  cursor:pointer; list-style:none;
  padding:1.2em 1.5em; font-weight:600; font-size:var(--fs-text);
}
.faq-item summary::-webkit-details-marker { display:none; }
.summary-icon { position:relative; width:16px; height:16px; flex-shrink:0; }
.summary-icon::before, .summary-icon::after {
  content:''; position:absolute; background:var(--ink); border-radius:2px;
  transition:transform .3s ease;
}
.summary-icon::before { width:16px; height:2px; top:7px; }
.summary-icon::after  { width:2px; height:16px; left:7px; }
details[open] .summary-icon::after { transform:scaleY(0); }
.faq-item p { padding:0 1.5em 1.4em; color:var(--ink-70); }
.faq-item[open] summary { color:var(--ink); }
/* Punkte haengen aus, der Text steht auf der Fluchtlinie der Antwort-Absaetze */
.faq-liste { margin:0 1.5em 1.2em; padding-left:1.3em; color:var(--ink-70); }
.faq-liste li { padding-block:.15em; }
.faq-kontakt {
  margin:2em auto 0; text-align:center;
  font-size:var(--fs-klein); color:var(--ink-70);
}

/* ---------- Schluss-CTA: zweiter dunkler Anker ---------- */
.cta-band { background:var(--ink); color:var(--cream); padding-block:clamp(64px, 9vw, 110px); }
.cta-inner { display:grid; gap:clamp(30px, 5vw, 60px); align-items:center; }
.cta-art img {
  width:min(58vw, 290px); margin-inline:auto;
  background:var(--cream); padding:14px; border-radius:14px;
  /* Das Foto hat rechts rund 30 % weissen Rand — ohne Beschnitt stuende die Dose links. */
  aspect-ratio:658/1114; object-fit:cover; object-position:left center;
}
.cta-copy h2 { color:var(--cream); font-size:clamp(1.95rem, 4.2vw, 3.05rem); }
.cta-facts { color:var(--cream-78); margin-top:.7em; font-size:var(--fs-klein); }
.cta-buttons { display:flex; flex-wrap:wrap; gap:14px; margin-top:1.9em; }
.cta-note { margin-top:1.6em; font-size:var(--fs-klein); color:var(--cream-78); max-width:52ch; }
.cta-note a { text-decoration:none; border-bottom:1px solid var(--blush-deep); }

/* Haendlerauswahl unter dem Shop-Button. Die Marken-Logos stehen auf Creme —
   auf dem Ink-Band waere DocMorris (dunkelgruen) unsichtbar. Radius 3px wie
   .btn (das Token --radius gibt es nur in style.css). */
.haendler { margin-top:2em; }
.haendler-titel {
  font-family:var(--font-ui); font-size:var(--fs-klein); font-weight:600;
  color:var(--cream-78); margin-bottom:.9em;
}
.haendler-liste { list-style:none; display:flex; flex-wrap:wrap; gap:14px; padding:0; }
.haendler-kachel {
  display:inline-flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px; padding:14px 18px; border-radius:3px; text-decoration:none;
  background:var(--cream); color:var(--ink);
  transition:transform .25s ease, background-color .25s ease;
}
.haendler-kachel:hover { background:var(--blush); transform:translateY(-2px); }
.haendler-kachel img { width:auto; display:block; }
/* Die drei Marken sind unterschiedlich gross gezeichnet: bei gleicher Bildhoehe
   traegt DocMorris am dicksten auf (keine Unterlaengen), Amazon am duennsten.
   Die Hoehen sind gemessen so gewaehlt, dass die Wortmarken gleich schwer wirken.
   Amazon-Regel: Badge mindestens 140px breit — 30px Hoehe ergibt 170px. */
.haendler-logo-docmorris     { height:24px; }
.haendler-logo-shop-apotheke { height:29px; }
.haendler-logo-amazon        { height:30px; }
.haendler-name { font-size:var(--fs-klein); font-weight:600; }
@media (max-width:560px) {
  .haendler-liste > li { flex:1 1 100%; }
  .haendler-kachel { width:100%; }
}
@media (min-width:761px) {
  .cta-inner { grid-template-columns:.75fr 1.25fr; gap:clamp(40px, 6vw, 80px); }
}

/* ---------- Footer (MASTER, seit 13.09.2026) ----------
   Dieser Block ist woertlich identisch in css/start.css, css/style.css und in
   der Umfrage-CSS (Repo cyclofine-umfrage, css/style.css). Aenderungen immer
   in allen drei Dateien. Footer-Spaltenkoepfe sind bewusst KEINE Headings
   (keine H2-Dubletten je Seite). */
.site-foot { background:var(--cream); border-top:1px solid var(--ink-10); padding-block:clamp(46px, 6vw, 70px) 30px; font-size:var(--fs-klein); }
.foot-grid { display:grid; gap:32px; }
.site-foot .foot-titel {
  font-family:var(--font-ui); font-size:var(--fs-klein); font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; margin:0 0 .8em; color:var(--ink);
}
.site-foot .foot-h2-next { margin-top:1.6em; }
.site-foot p { color:var(--ink-70); }
.site-foot img { display:block; max-width:100%; height:auto; margin-bottom:14px; }
.site-foot a { color:inherit; text-decoration:none; border-bottom:1px solid var(--ink-15); }
.site-foot a:hover { border-bottom-color:var(--blush-deep); }
.foot-legal { margin-top:40px; padding-top:22px; border-top:1px solid var(--ink-10); }
.foot-legal p { font-size:var(--fs-klein); color:var(--ink-70); max-width:none; }
@media (min-width:761px) { .foot-grid { grid-template-columns:2fr 1fr 1fr; } }

/* Trefferflaeche von Navigations- und Fussnotenlinks >= 24px
   (Fliesstext-Links im Satz sind bewusst ausgenommen — WCAG 2.5.8) */
.site-foot a, .foot-legal a, .warum-link { display:inline-block; padding-block:.32em; }

/* ---------- Scroll-Reveals (CSS-only, wie im Bestand) ---------- */
@media (prefers-reduced-motion: no-preference) {
  @supports ((animation-timeline: view()) and (animation-range: entry)) {
    @keyframes rise-in {
      from { opacity:0; translate:0 28px; }
      to   { opacity:1; translate:0 0; }
    }
    .reveal {
      animation:rise-in auto ease-out backwards;
      animation-timeline:view();
      animation-range:entry 0% entry 66%;
    }
  }
}

/* On-hold-Claim-Zeile (im HTML auskommentiert — Stil bleibt vorbereitet) */
.claim-hold {
  margin-top:1.6em; padding:1.2em 0 1.2em 16px;
  border-left:2px solid var(--blush-deep);
  font-family:var(--font-accent); font-size:var(--fs-lead); max-width:none;
}
.claim-hold-label {
  display:block; font-family:var(--font-ui); font-size:var(--fs-klein); font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:var(--ink-70); margin-bottom:.4em;
}
.claim-hold-note {
  display:block; margin-top:.7em;
  font-family:var(--font-ui); font-size:var(--fs-klein); color:var(--ink-70);
}

/* ---------- Bewertung am Studienende (Werte mit Sternchen, Aufloesung im Seitenfuss) ---------- */
.zufrieden-h3 {
  margin:clamp(52px, 7vw, 84px) auto 0; max-width:26ch; text-align:center;
  font-size:clamp(1.55rem, 3.4vw, 2.3rem); font-weight:600; line-height:1.25;
}
.study-grid {
  display:grid; grid-template-columns:1fr;
  gap:clamp(22px, 3vw, 40px); margin-top:clamp(26px, 4vw, 44px);
  max-width:860px; margin-inline:auto;
}
@media (min-width:561px) { .study-grid { grid-template-columns:repeat(3, 1fr); } }
.study-stat { text-align:center; }
.stat-ring { width:min(46vw, 150px); margin-inline:auto; display:grid; place-items:center; }
.stat-ring svg { grid-area:1/1; width:100%; transform:rotate(-90deg); }
@property --shown { syntax:'<number>'; initial-value:0; inherits:true; }
.stat-ring { --shown:var(--pct); }
.stat-track, .stat-arc { fill:none; stroke-width:7; }
.stat-track { stroke:var(--ink-10); }
.stat-arc {
  stroke:var(--blush-deep); stroke-linecap:round;
  stroke-dasharray:calc(var(--shown) * 3.267) 326.7;
}
@media (prefers-reduced-motion: no-preference) {
  @supports ((animation-timeline: view()) and (animation-range: entry)) {
    .stat-ring {
      animation:ring-fill auto ease-out both;
      animation-timeline:view();
      animation-range:entry 10% entry 70%;
    }
    @keyframes ring-fill {
      from { --shown:0; }
      to   { --shown:var(--pct); }
    }
  }
}
.stat-ring span {
  grid-area:1/1; text-align:center;
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(1.2rem, 3.4vw, 1.9rem);
}
.stat-ring span sup { font-size:.55em; color:var(--ink-70); font-weight:400; }
.study-stat figcaption {
  margin-top:1em; font-size:var(--fs-klein); color:var(--ink-70);
  max-width:22ch; margin-inline:auto;
}

/* Bewertung direkt nach dem Hero — die Antwort auf den Studiensatz im Lead */
.zufrieden { padding-block:clamp(34px, 5vw, 64px) clamp(44px, 6vw, 78px); }