/* ═══════════════════════════════════════════════════════════
   CycloFine™ – Cellufine®
   Palette: Cream / Sage / Blush / Mist Blue / Deep Ink
   Typo: Playfair Display (Display) · Lora (Akzent) · Inter (UI)
   ═══════════════════════════════════════════════════════════ */

/* ---------- Fonts (selbst gehostet) ---------- */
@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:       #D9E6D6;
  --sage-soft:  #E9F1E7;
  --blush:      #F6D8CF;
  --blush-soft: #FBEAE5;
  --blush-deep: #E4A493;   /* dekorativ: Ringe, Punkte, Linien */
  --blush-text: #A85A44;   /* Textfarbe auf hellem Grund (4,99:1 auf Weiss) */
  --mist:       #D6E4EC;
  --mist-soft:  #E8F0F5;
  --ink:        #1A2233;
  --ink-70:     #4C5361;   /* Sekundaertext, 7,30:1 auf Cream (war rgba .7 = 5,77:1) */
  --ink-15:     rgba(26,34,51,.15);
  --ink-10:     rgba(26,34,51,.10);

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

  --wrap: 1160px;
  --radius: 22px;

  /* Drei Schriftgroessen — mehr gibt es nicht. */
  --fs-text:  1.0625rem;   /* 17,0px — Fliesstext, Listen, Tabellen */
  --fs-klein: .95rem;      /* 15,2px — Labels, Fussnoten, Sekundaertext */
  --fs-lead:  1.22rem;     /* 19,5px — Lora-Intros und die Magnesium-Claims */
}

/* ---------- Reset / Basis ---------- */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; scroll-padding-top:90px; -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;
  overflow-x:clip;
}
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:820px; }
.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:999px;
  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, summary { touch-action:manipulation; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
}

/* ---------- Typo ---------- */
/* pretty statt balance: balance verteilt auf gleich lange Zeilen und bricht
   dadurch um, obwohl die Zeile noch halb frei ist. pretty vermeidet nur Schusterjungen. */
h1, h2, h3 { font-family:var(--font-display); font-weight:600; line-height:1.12; letter-spacing:-.01em; text-wrap:pretty; }
/* Einzelne Woerter sollen nie allein auf der letzten Zeile stehen */
p, li, dd, dt, td, th, figcaption, summary { text-wrap:pretty; }
h1 { font-size:clamp(2.6rem, 7vw, 4.6rem); }
h2 { font-size:clamp(1.9rem, 4.6vw, 3rem); margin-bottom:.6em; }
h3 { font-size:1.35rem; }
h1 em, h2 em { font-style:italic; font-weight:400; }
p  { max-width:62ch; }
/* Absaetze haben max-width — beim Zentrieren muss auch die BOX mittig sitzen,
   sonst wird der Text nur innerhalb eines linksbuendigen Kastens zentriert. */
.center > p, p.center, .center { margin-inline:auto; }

.eyebrow {
  font-family:var(--font-ui); font-size:var(--fs-klein); font-weight:600;
  letter-spacing:.22em; text-transform:uppercase; color:var(--ink-70);
  margin-bottom:1.1em;
}
.eyebrow.light { color:rgba(250,248,246,.72); }

/* ---------- Buttons ---------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--font-ui); font-weight:600; font-size:var(--fs-text);
  padding:.9em 1.9em; border-radius:999px; text-decoration:none;
  border:1.5px 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,.5); color:var(--cream); }
.btn-outline-cream:hover { border-color:var(--cream); background:rgba(250,248,246,.08); }
.btn-small  { padding:.6em 1.4em; font-size:var(--fs-klein); }

/* ---------- Header ---------- */
.site-head {
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--cream) 88%, transparent);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--ink-10);
}
.head-inner { display:flex; align-items:center; gap:26px; padding-block:14px; }

/* Wortmarke im Kopfbereich — Text kann anders als das alte Logo-Bild nicht
   schrumpfen, daher waechst sie mit dem Viewport (94px schmal, 114px breit). */
.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;
  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); }

/* Burger-Toggle (nur mobil sichtbar) */
.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:999px;
  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); }

/* Navigation: mobil Dropdown-Panel, ab 761px Zeile */
.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) 96%, 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;
  transition:color .2s ease;
}
.main-nav a:hover { color:var(--ink); }
.site-head .btn { margin-left:auto; }
.skip-link { font-size:var(--fs-klein); }

/* 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:0; }
  .site-head .btn { margin-left:0; }
}

/* ---------- Hero ---------- */
.hero { position:relative; padding-block:clamp(48px, 8vw, 110px) clamp(70px, 9vw, 130px); overflow:clip; }
.hero-bg {
  position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(46% 42% at 82% 18%, var(--sage-soft) 0%, transparent 70%),
    radial-gradient(38% 42% at 88% 72%, var(--blush-soft) 0%, transparent 72%),
    radial-gradient(34% 38% at 12% 84%, var(--mist-soft) 0%, transparent 70%),
    var(--cream);
}
.hero-grid { display:grid; gap:40px; align-items:center; }
.hero-cta { display:flex; flex-wrap:wrap; gap:14px; margin-top:2em; }

/* Hero-Buehne: Illustrationen hinten, Aquarellflaeche, Dose vorn */
.hero-art { display:grid; place-items:center; }
.bloom-stage { position:relative; width:min(76vw, 330px); aspect-ratio:802/1114; }
/* Sehr helle Aquarellflaeche hinter der Dose — ohne sie verschwindet die
   weisse Dose im ohnehin hellen Hero. */
.bloom-stage::before {
  content:''; position:absolute; z-index:2; inset:-14% -28%;
  background:radial-gradient(ellipse 50% 47% at 50% 50%, var(--sage-soft) 30%, transparent 80%);
}
/* Illustrationen tragen echte Alphakanäle (weiß→transparent) — kein Blend-Modus nötig.
   Sie liegen angeschnitten hinter der Dose: verheddert links, geöffnet rechts —
   Leserichtung verheddert → Dose → geöffnet. */
.bloom { position:absolute; z-index:1; width:62%; height:auto; }
.bloom-tangled { left:-28%; top:20%; opacity:.25; }
.bloom-open    { right:-24%; top:-12%; opacity:.4; }
/* Die Dose steht vorn. Der Fotogrund ist reinweiß — die Maske laesst ihn zu den
   Raendern hin auslaufen; Etikett und Dosenkoerper bleiben voll deckend.
   Zwei gekreuzte Verlaeufe statt eines radialen: die Dose steht im Foto so knapp
   am Rand (links 7,4 %, oben 5,4 % Luft), dass eine Ellipse sie mit anloest.
   Die Dose sitzt im Foto links der Mitte, das Verschieben zentriert sie. */
.packshot {
  position:relative; z-index:3; width:100%;
  translate:11% 0;
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, #000 8%, #000 72%, transparent 97%),
    linear-gradient(to bottom, transparent 0%, #000 6.5%, #000 90%, transparent 100%);
  mask-image:
    linear-gradient(to right, transparent 0%, #000 8%, #000 72%, transparent 97%),
    linear-gradient(to bottom, transparent 0%, #000 6.5%, #000 90%, transparent 100%);
  -webkit-mask-composite:source-in;
  mask-composite:intersect;
}

@media (min-width:761px) {
  .hero-grid { grid-template-columns:1.05fr .95fr; gap:20px; }
  .bloom-stage { width:auto; height:clamp(440px, 34vw, 500px); }
}

/* ---------- Fadenlinien (Thread) ---------- */
.thread { position:absolute; left:0; right:0; width:100%; color:var(--ink-15); pointer-events:none; }
.thread-hero { bottom:-30px; height:160px; }
.thread-compose { bottom:-20px; height:120px; color:var(--ink-10); }

/* ---------- Beleg-Leiste ---------- */
/* Schmales Band direkt unter dem Hero: Herkunfts- und Vertrauensfakten,
   bewusst ohne die Zahlen der Warum-Karten. */
.fakten { background:var(--cream-deep); border-block:1px solid var(--ink-10); padding-block:1.1em; }
.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;
}
@media (min-width:761px) {
  .fakten-liste { display:flex; flex-wrap:wrap; justify-content:center; gap:.3em 0; }
  /* Trennpunkt am ENDE des Eintrags — beim Umbruch beginnt sonst eine Zeile mit ihm. */
  .fakten-liste li:not(:last-child)::after { content:'·'; margin-inline:1.1em; }
}

/* ---------- Timing ---------- */
.timing { padding-block:clamp(70px, 10vw, 130px); background:linear-gradient(180deg, var(--cream) 0%, var(--mist-soft) 55%, var(--cream) 100%); }
.timing-grid { display:grid; gap:44px; align-items:center; }
.timing-ring svg { width:min(70vw, 340px); margin-inline:auto; display:block; }
.ring-label-big  { font-family:var(--font-display); font-size:32px; fill:var(--ink); }
.ring-label-small{ font-family:var(--font-ui); font-size:15px; fill:var(--ink-70); }
.timing-copy h2 { margin-bottom:.5em; }
.timing-copy p + p { margin-top:1em; }
/* Rechtsseiten: mehrere Absaetze je Abschnitt (seit 13.09.2026) */
.legal-page p + p, .legal-page p + ul, .legal-page ul + p { margin-top:.8em; }
@media (min-width:761px) {
  .timing-grid { grid-template-columns:.85fr 1.15fr; gap:60px; }
}

/* ---------- Diese Tage ---------- */
.days { padding-block:clamp(60px, 8vw, 110px); background:linear-gradient(180deg, var(--cream), var(--blush-soft) 70%, var(--cream)); }
.days h2 { margin-bottom:.6em; }
.days-pivot { margin-top:1.4em; padding-left:14px; border-left:2px solid var(--blush-deep); font-size:var(--fs-text); }
.claims-list .when { font-style:normal; font-weight:600; color:var(--blush-deep); }

/* ---------- Zusammensetzung ---------- */
.compose { position:relative; padding-block:clamp(70px, 10vw, 140px); }
.compose-grid { display:grid; gap:22px; margin-top:clamp(34px, 5vw, 56px); }
.compose-card {
  border-radius:var(--radius); padding:clamp(26px, 4vw, 42px);
  border:1px solid var(--ink-10);
}
.card-sage { background:linear-gradient(150deg, var(--sage-soft), var(--sage) 130%); }
.card-mist { background:linear-gradient(150deg, var(--mist-soft), var(--mist) 130%); }
.compose-amount {
  font-family:var(--font-display); font-size:clamp(2.4rem, 5vw, 3.4rem);
  font-weight:700; line-height:1; letter-spacing:-.02em;
}
.compose-card h3 { margin-top:.35em; }
.compose-sub { font-size:var(--fs-klein); font-weight:500; color:var(--ink-70); margin:.4em 0 1em; }
.compose-note { margin-top:2em; text-align:center; color:var(--ink-70); font-size:var(--fs-klein); margin-inline:auto; }
@media (min-width:761px) {
  .compose-grid { grid-template-columns:1fr 1fr; }
}

/* ---------- Claims (dunkles Band) ---------- */
.claims {
  background:var(--ink); color:var(--cream);
  padding-block:clamp(70px, 10vw, 140px);
  position:relative; overflow:clip;
}
.claims::before, .claims::after {
  content:''; position:absolute; border-radius:50%;
  border:1px solid rgba(250,248,246,.12); pointer-events:none;
}
.claims::before { width:520px; height:520px; top:-260px; right:-160px; }
.claims::after  { width:380px; height:380px; bottom:-190px; left:-120px; }
.claims h2 { color:var(--cream); }
.claims-list { list-style:none; max-width:760px; margin:clamp(36px, 5vw, 60px) auto 0; }
.claims-list li {
  display:flex; gap:22px; align-items:baseline;
  padding-block:1.35em;
  border-bottom:1px solid rgba(250,248,246,.14);
  font-family:var(--font-accent); font-size:var(--fs-lead);
}
.claims-list li:first-child { border-top:1px solid rgba(250,248,246,.14); }
.claims-list span {
  font-family:var(--font-ui); font-size:var(--fs-klein); font-weight:600;
  color:var(--blush-deep); letter-spacing:.1em; flex-shrink:0;
}
.claims-list strong { font-weight:600; color:#fff; }
.claims-foot {
  margin:clamp(30px, 4vw, 46px) auto 0; text-align:center;
  color:rgba(250,248,246,.82); font-size:var(--fs-klein); max-width:56ch;
}

/* ---------- Studie ---------- */
.study { padding-block:clamp(70px, 10vw, 140px); }
.study-grid {
  display:grid; grid-template-columns:1fr;
  gap:clamp(22px, 3vw, 40px); margin-top:clamp(36px, 5vw, 60px);
  max-width:860px; margin-inline:auto;
}
/* Drei nebeneinander erst, wenn dafuer Platz ist */
@media (min-width:561px) { .study-grid { grid-template-columns:repeat(3, 1fr); } }
.study-stat { text-align:center; }
/* Ring und Beschriftung liegen in derselben Rasterzelle uebereinander —
   so bleibt die Zahl normaler Fliesstext und das Sternchen sitzt daneben. */
.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); }
/* Ringe ziehen beim Reinscrollen auf (0 → Zielwert); Fallback: statisch */
@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);
}
.study-stat figcaption {
  margin-top:1em; font-size:var(--fs-klein); color:var(--ink-70);
  max-width:22ch; margin-inline:auto;
}
.study-foot { margin:clamp(34px, 5vw, 50px) auto 0; text-align:center; font-size:var(--fs-klein); color:var(--ink-70); max-width:56ch; }
.study-lead { font-family:var(--font-accent); font-size:var(--fs-lead); color:var(--ink-70); max-width:58ch; }
/* Quellenzeile: exakt dieselbe Typografie wie .study-foot, nur enger darunter */
.study-source { margin:.7em auto 0; text-align:center; font-size:var(--fs-klein); color:var(--ink-70); max-width:56ch; }
.study-source a { color:var(--ink-70); }
.study-facts {
  display:grid; gap:1px; margin:clamp(34px, 5vw, 52px) auto 0; max-width:860px;
  background:var(--ink-10); border:1px solid var(--ink-10); border-radius:var(--radius); overflow:hidden;
}
.study-facts > div { background:var(--cream); padding:1.2em 1.4em; }
.study-facts dt { font-size:var(--fs-klein); font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-70); }
/* Datenwerte sind Fliesstext, keine Ueberschriften: UI-Schrift statt Display-Serife */
.study-facts dd { font-family:var(--font-ui); font-size:var(--fs-text); font-weight:500; margin-top:.35em; line-height:1.45; }
@media (min-width:561px) { .study-facts { grid-template-columns:1fr 1fr; } }
@media (min-width:921px) { .study-facts { grid-template-columns:repeat(4, 1fr); } }
.study-grid-single { grid-template-columns:1fr; max-width:280px; }
.study-result {
  margin:clamp(30px, 4vw, 44px) auto 0; max-width:58ch;
  text-align:center; font-size:var(--fs-lead); font-family:var(--font-accent);
}
.study-attrib {
  margin:clamp(30px, 4vw, 44px) auto 0; text-align:center; max-width:60ch;
  font-size:var(--fs-klein); color:var(--ink-70);
  padding:.9em 1.4em; border-radius:999px;
  background:color-mix(in srgb, var(--blush) 26%, var(--cream));
  border:1px solid var(--ink-10);
}
.pillars { display:grid; gap:20px; margin-top:clamp(26px, 4vw, 40px); }
.pillar {
  background:#fff; border:1px solid var(--ink-10); border-radius:var(--radius);
  padding:clamp(24px, 3vw, 34px);
}
.pillar-kicker { font-size:var(--fs-klein); font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--blush-text); }
.pillar h3 { margin:.4em 0 .8em; }
.pillar ul { list-style:none; }
.pillar li {
  font-size:var(--fs-text); color:var(--ink-70);
  padding:.75em 0 .75em 1.1em; position:relative;
  border-top:1px solid var(--ink-10);
}
.pillar li:first-child { border-top:none; padding-top:0; }
.pillar li::before {
  content:''; position:absolute; left:0; top:1.35em;
  width:5px; height:5px; border-radius:50%; background:var(--blush-deep);
}
.pillar li:first-child::before { top:.6em; }
.pillar strong { color:var(--ink); font-weight:600; font-size:1em; }
/* Drei Spalten erst ab 921px — bei 768px werden sie sonst zu schmal */
@media (min-width:761px) and (max-width:920px) { .pillars { grid-template-columns:1fr 1fr; } }
@media (min-width:921px) { .pillars { grid-template-columns:repeat(3, 1fr); } }

/* ---------- Vergleich ---------- */
.compare { padding-block:clamp(60px, 8vw, 110px); background:linear-gradient(180deg, var(--cream), var(--sage-soft) 60%, var(--cream)); }
.table-scroll { overflow-x:auto; margin-top:clamp(30px, 4vw, 48px); border-radius:var(--radius); }
.compare table, .declare-body table {
  width:100%; border-collapse:collapse; background:var(--cream);
  border:1px solid var(--ink-10); border-radius:var(--radius); overflow:hidden;
  font-size:var(--fs-text); min-width:560px; font-variant-numeric:tabular-nums;
}
.compare th, .compare td, .declare-body th, .declare-body td {
  padding:.95em 1.2em; text-align:left; border-bottom:1px solid var(--ink-10);
}
/* Werte stehen mittig unter ihrer Spaltenueberschrift, nur das Merkmal bleibt links */
.compare thead th:not(:first-child), .compare tbody td,
.declare-body thead th:not(:first-child), .declare-body tbody td { text-align:center; }
.compare thead th { font-family:var(--font-ui); font-size:var(--fs-klein); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-70); }
.compare tbody th[scope="row"] { font-weight:500; }
.compare .col-cf { background:color-mix(in srgb, var(--blush) 30%, var(--cream)); font-weight:600; }
.compare tbody tr:last-child th, .compare tbody tr:last-child td { border-bottom:none; }

/* ---------- Volldeklaration ---------- */
.declare { padding-block:clamp(30px, 4vw, 60px) clamp(60px, 8vw, 100px); }
.declare-box, .faq-item {
  border:1px solid var(--ink-10); border-radius:var(--radius);
  background:#fff;
}
.declare-box summary, .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);
}
.declare-box summary::-webkit-details-marker, .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); }
.declare-body { padding:0 1.5em 1.5em; }
.declare-body p { margin-top:1em; font-size:var(--fs-text); }
.declare-body .table-scroll { margin-top:0; }
.declare-legal { color:var(--ink-70); font-size:var(--fs-klein) !important; }

/* ---------- FAQ ---------- */
.faq { padding-block:clamp(60px, 8vw, 120px); }
.faq-item { margin-top:14px; }
.faq h2 { margin-bottom:clamp(20px, 3vw, 36px); }
.faq-item p { padding:0 1.5em 1.4em; color:var(--ink-70); }
.faq-item[open] summary { color:var(--ink); }

/* ---------- Schluss-CTA ---------- */
.cta-band {
  background:linear-gradient(160deg, var(--ink) 0%, #232E48 100%);
  color:var(--cream);
  padding-block:clamp(70px, 9vw, 120px);
  position:relative; overflow:clip;
}
.cta-band::before {
  content:''; position:absolute; width:640px; height:640px; border-radius:50%;
  border:1px solid rgba(250,248,246,.1); top:-320px; left:50%; translate:-50% 0;
}
.cta-inner { display:grid; gap:40px; align-items:center; }
.cta-art img {
  width:min(60vw, 300px); margin-inline:auto;
  border-radius:var(--radius);
  background:var(--cream);
  padding:14px;
  /* Das Foto hat rechts rund 30 % weissen Rand — ohne Beschnitt stuende die
     Dose sichtbar links in der Karte. */
  aspect-ratio:658/1114; object-fit:cover; object-position:left center;
}
.cta-copy h2 { color:var(--cream); }
.cta-facts { color:rgba(250,248,246,.85); margin-top:.6em; font-size:var(--fs-klein); }
.cta-buttons { display:flex; flex-wrap:wrap; gap:14px; margin-top:1.8em; }
.cta-note { margin-top:2em; font-size:var(--fs-klein); color:rgba(250,248,246,.55); max-width:52ch; }
@media (min-width:761px) {
  .cta-inner { grid-template-columns:.8fr 1.2fr; gap:70px; }
}

/* ---------- 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; } }

/* ---------- Wiki ---------- */
.breadcrumbs { font-size:var(--fs-klein); color:var(--ink-70); padding-top:26px; }
.breadcrumbs a { color:inherit; text-decoration:none; }
.breadcrumbs a:hover { color:var(--ink); text-decoration:underline; }
.breadcrumbs span[aria-hidden] { margin-inline:.5em; }

.wiki-head { padding-block:clamp(36px, 6vw, 70px) clamp(30px, 4vw, 50px); }
.wiki-head h1 { font-size:clamp(2.2rem, 5.5vw, 3.6rem); }
/* H1 der Belegseiten behaelt die Optik der frueheren H2 */
.page-h1 { font-size:clamp(1.9rem, 4.6vw, 3rem); margin-bottom:.6em; }
.wiki-head .lead { font-family:var(--font-accent); font-size:var(--fs-lead); color:var(--ink-70); margin-top:1em; }

.tile-grid { display:grid; gap:18px; padding-bottom:clamp(60px, 8vw, 100px); }
.tile {
  display:flex; flex-direction:column; gap:.5em;
  background:#fff; border:1px solid var(--ink-10); border-radius:var(--radius);
  padding:clamp(22px, 3vw, 32px); text-decoration:none;
  transition:transform .25s ease, border-color .25s ease, background-color .25s ease;
}
.tile:hover { transform:translateY(-4px); border-color:var(--blush-deep); }
.tile-kicker { font-size:var(--fs-klein); font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--blush-text); }
.tile h2 { font-size:1.3rem; margin:0; }
.tile p { font-size:var(--fs-text); color:var(--ink-70); }
.tile-more { margin-top:auto; padding-top:.8em; font-size:var(--fs-klein); font-weight:600; }
@media (min-width:561px)  { .tile-grid { grid-template-columns:1fr 1fr; } }
@media (min-width:921px)  { .tile-grid { grid-template-columns:1fr 1fr 1fr; } }

/* ---------- Zyklustagebuch-Karte (13.09.2026) ----------
   Dieselbe Karte wie in css/start.css (Umfrage-Sektion der Startseite) und auf
   der Dankeseite der Umfrage; hier mit --radius wie die Kacheln darunter.
   Ueberschrift ist h2, weil ueber der Karte nur die H1 des Hubs steht — ein h3
   wuerde die Ebene ueberspringen; die Optik bleibt die eines h3.
   Kein margin-top: der Abstand nach oben kommt aus .wiki-head. */
.tagebuch-karte {
  margin-bottom:clamp(36px, 5vw, 56px);
  padding:clamp(22px, 3vw, 34px);
  background:var(--cream);
  border:1px solid var(--ink-10);
  border-radius:var(--radius);
  text-align:left;
}
.tagebuch-karte h2 { font-size:1.35rem; margin-bottom:.55em; }
.tagebuch-karte p { margin-inline:0; }
.tagebuch-karte .tagebuch-cta {
  display:flex; flex-wrap:wrap; align-items:center; gap:14px 24px;
  max-width:none; margin-top:clamp(20px, 2.6vw, 28px);
}

.article { padding-bottom:clamp(60px, 8vw, 100px); }
.article-body { max-width:720px; }
.article-body h2 { font-size:clamp(1.5rem, 3vw, 1.9rem); margin-top:1.8em; }
.article-body p { margin-top:1em; }
.article-body ul, .article-body ol { margin:1em 0 0 1.3em; }
.article-body li { margin-top:.45em; }
.kurz {
  background:linear-gradient(150deg, var(--sage-soft), var(--mist-soft));
  border:1px solid var(--ink-10); border-radius:var(--radius);
  padding:clamp(20px, 3vw, 28px); margin-top:clamp(24px, 4vw, 36px);
}
.kurz strong:first-child { display:block; font-size:var(--fs-klein); letter-spacing:.2em; text-transform:uppercase; margin-bottom:.6em; color:var(--ink-70); }
/* ---------- Umfrage-Einstieg ---------- */
.survey {
  padding-block:clamp(56px, 8vw, 100px);
  background:linear-gradient(180deg, var(--cream), var(--sage-soft) 55%, var(--cream));
  text-align:center;
}
.survey p { margin-inline:auto; }
.survey-cta { margin-top:1.8em; }

/* On-hold-Claim-Zeile (aktuell im HTML auskommentiert, siehe index.html) */
.claim-hold {
  margin-top:1.6em; padding:1.2em 1.5em;
  background:#fff; border:1px solid var(--ink-10);
  border-left:3px solid var(--blush-deep); border-radius:14px;
  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);
}

.claim-table {
  width:100%; border-collapse:collapse; margin-top:1.4em;
  border:1px solid var(--ink-10); border-radius:var(--radius); overflow:hidden;
  font-size:var(--fs-text); background:#fff;
}
.claim-table th, .claim-table td { padding:.85em 1.1em; text-align:left; border-bottom:1px solid var(--ink-10); vertical-align:top; }
.claim-table th { font-weight:600; width:34%; background:var(--cream); }
.claim-table tr:last-child th, .claim-table tr:last-child td { border-bottom:none; }
@media (max-width:560px) {
  .claim-table th, .claim-table td { display:block; width:auto; }
  .claim-table th { border-bottom:none; padding-bottom:.2em; }
}
.article-cta {
  margin-top:clamp(40px, 6vw, 60px); padding:clamp(24px, 4vw, 36px);
  background:var(--ink); color:var(--cream); border-radius:var(--radius);
  display:flex; flex-wrap:wrap; gap:20px; align-items:center; justify-content:space-between;
}
.article-cta p { font-family:var(--font-accent); font-size:var(--fs-lead); max-width:40ch; }
.wiki-next { margin-top:clamp(34px, 5vw, 50px); font-size:var(--fs-text); }
.wiki-next a { font-weight:600; }
.wiki-stand { margin-top:clamp(22px, 3vw, 32px); font-size:var(--fs-klein); color:var(--ink-70); }

/* ---------- Scroll-Reveals ---------- */
@media (prefers-reduced-motion: no-preference) {
  @supports ((animation-timeline: view()) and (animation-range: entry)) {
    @keyframes rise-in {
      from { opacity:0; translate:0 34px; }
      to   { opacity:1; translate:0 0; }
    }
    .reveal {
      animation:rise-in auto ease-out backwards;
      animation-timeline:view();
      animation-range:entry 0% entry 68%;
    }
    /* 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; }
    }
  }
}

/* Zahlenspalten gleich breit setzen (Vergleich, Deklaration, Studienwerte) */
.compare td, .compare th, .declare-body td, .pillar strong, .stat-ring span, .compose-amount {
  font-variant-numeric: tabular-nums;
}
/* Anker unter dem klebenden Kopf freistellen */
:target { scroll-margin-top: 90px; }

/* ---------- Tabellen auf kleinen Schirmen ----------
   Unter 620px werden die Tabellen zu gestapelten Karten: das Merkmal als
   Zeile, darunter die Werte mit ihrer Spaltenbeschriftung. Kein seitliches
   Scrollen, keine 4-Zeichen-Spalten mehr. */
@media (max-width: 620px) {
  .compare table, .declare-body table { min-width:0; display:block; }
  .compare thead, .declare-body thead { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
  .compare tbody, .compare tr, .compare td, .compare th,
  .declare-body tbody, .declare-body tr, .declare-body td, .declare-body th { display:block; width:auto; }

  .compare tbody tr, .declare-body tbody tr {
    padding:1em 1.1em;
    border-bottom:1px solid var(--ink-10);
  }
  .compare tbody tr:last-child, .declare-body tbody tr:last-child { border-bottom:none; }

  .compare tbody th[scope="row"], .declare-body tbody th[scope="row"] {
    padding:0 0 .6em; border:none;
    font-weight:600; font-size:var(--fs-text); line-height:1.35;
  }
  /* Deklarationstabelle: Label-Wert-Paare, gestapelt lesbar */
  .declare-body tbody td {
    display:flex; align-items:baseline; justify-content:space-between; gap:1.2em;
    padding:.5em 0; border:none; font-size:var(--fs-text); text-align:left;
  }
  .declare-body tbody td::before {
    content:attr(data-label);
    color:var(--ink-70); font-size:var(--fs-klein); flex-shrink:0;
  }

  /* Vergleichstabelle: ein Vergleich braucht beide Werte NEBENEINANDER.
     Merkmal als Ueberschrift, darunter zwei Boxen Seite an Seite. */
  .compare tbody tr {
    display:grid; grid-template-columns:1fr 1fr; gap:.6em .7em;
  }
  .compare tbody th[scope="row"] { grid-column:1 / -1; padding-bottom:0; }
  .compare tbody td {
    display:flex; flex-direction:column; justify-content:space-between; gap:.1em;
    padding:.6em .7em; border:none; border-radius:10px;
    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; }
}

/* Trefferflaeche von Navigations-, Fussnoten- und Listenlinks auf >= 24px
   (Fliesstext-Links im Satz sind davon bewusst ausgenommen — WCAG 2.5.8) */
.breadcrumbs a, .site-foot a, .wiki-next a, .foot-legal a, .tile-more {
  display:inline-block;
  padding-block:.32em;
}

/* Dekorative Fadenlinie ragt geometrisch ueber den Abschnitt hinaus — abschneiden */
.compose { overflow:clip; }

/* ---------- BloomEase-Komplex: Aufschluesselung ---------- */
.compose-lead {
  font-family:var(--font-accent); font-size:var(--fs-lead); color:var(--ink-70);
  max-width:60ch; margin-inline:auto;
}
.komplex {
  list-style:none; counter-reset:none;
  display:grid; gap:1px; margin:clamp(30px, 4vw, 46px) auto 0; max-width:760px;
  background:var(--ink-10); border:1px solid var(--ink-10);
  border-radius:var(--radius); overflow:hidden;
}
.komplex li {
  background:var(--cream); padding:1.1em 1.4em;
  display:grid; grid-template-columns:auto 1fr; column-gap:1.2em; align-items:baseline;
}
.komplex-anteil {
  font-family:var(--font-display); font-size:1.25rem; font-weight:700;
  font-variant-numeric:tabular-nums; grid-row:span 2; align-self:center;
  min-width:5.5ch;
}
.komplex strong { font-size:var(--fs-text); }
.komplex em { font-style:normal; font-size:var(--fs-klein); color:var(--ink-70); grid-column:2; }

/* Bezugsgroesse jedes Studienwerts (Innerhalb-Gruppe vs. Placebo-Vergleich) */
.pillar .bezug { font-style:normal; color:var(--ink-70); }

/* ---------- Qualität & Herstellung ---------- */
.quality {
  padding-block:clamp(70px, 10vw, 130px);
  background:linear-gradient(180deg, var(--cream), var(--mist-soft) 45%, var(--cream));
}
.quality-lead {
  font-family:var(--font-accent); font-size:var(--fs-lead); color:var(--ink-70);
  max-width:62ch; margin-inline:auto;
}
.quality-h3 {
  text-align:center; font-size:1.25rem; margin-top:clamp(40px, 6vw, 64px);
}
.quality-foot {
  margin:clamp(34px, 5vw, 48px) auto 0; text-align:center;
  font-size:var(--fs-klein); color:var(--ink-70); max-width:66ch;
}

/* Herstellungsweg */
.prozess {
  list-style:none; display:grid; gap:12px;
  margin:clamp(24px, 3vw, 34px) auto 0; max-width:1000px;
}
.prozess li {
  background:#fff; border:1px solid var(--ink-10); border-radius:16px;
  padding:1em 1.2em;
  display:grid; grid-template-columns:auto 1fr; column-gap:1em; align-items:baseline;
}
.prozess span {
  font-family:var(--font-display); font-weight:700; font-size:1.1rem;
  color:var(--blush-text); grid-row:span 2; align-self:center;
  width:1.6em; text-align:center;
}
.prozess strong { font-size:var(--fs-text); }
.prozess li > strong + * { grid-column:2; }
.prozess li { position:relative; }
.prozess li::after { content:''; }
.prozess strong ~ *, .prozess li { }
@media (min-width:561px) { .prozess { grid-template-columns:1fr 1fr; } }
@media (min-width:921px) { .prozess { grid-template-columns:1fr 1fr 1fr 1fr; } }

/* Spezifikationskarten */
.spec-grid { display:grid; gap:20px; margin-top:clamp(40px, 6vw, 64px); }
@media (min-width:761px) { .spec-grid { grid-template-columns:1fr 1fr; } }
.spec-card {
  background:#fff; border:1px solid var(--ink-10); border-radius:var(--radius);
  padding:clamp(24px, 3vw, 34px);
}
.spec-card h3 { margin-bottom:.25em; }
.spec-sub { font-size:var(--fs-klein); color:var(--ink-70); margin-bottom:1.2em; }
.spec-fuss { margin-top:1.2em; font-size:var(--fs-klein); color:var(--ink-70); }

.spec-liste { display:grid; }
.spec-liste > div {
  display:grid; grid-template-columns:1fr auto; column-gap:1.4em; align-items:baseline;
  padding:.75em 0; border-top:1px solid var(--ink-10);
}
.spec-liste > div:first-child { border-top:none; padding-top:0; }
.spec-liste dt { font-size:var(--fs-text); }
.spec-liste dd {
  font-weight:600; font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap;
}
.spec-liste dd span {
  display:block; font-weight:400; font-size:var(--fs-klein); color:var(--ink-70);
  white-space:normal;
}

.spec-haken { list-style:none; }
.spec-haken li {
  padding:.75em 0 .75em 1.8em; border-top:1px solid var(--ink-10);
  position:relative; font-size:var(--fs-text);
}
.spec-haken li:first-child { border-top:none; padding-top:0; }
.spec-haken li::before {
  content:'✓'; position:absolute; left:0; top:.7em;
  color:var(--blush-text); font-weight:700;
}
.spec-haken li:first-child::before { top:0; }
.spec-haken span {
  display:block; font-size:var(--fs-klein); color:var(--ink-70); margin-top:.15em;
}

/* Sehr schmale Schirme: Wert unter die Bezeichnung statt daneben,
   sonst erzwingt der nicht umbrechende Wert eine zu breite Karte. */
.spec-liste dt { min-width:0; overflow-wrap:break-word; }
@media (max-width: 430px) {
  .spec-liste > div { grid-template-columns:1fr; }
  .spec-liste dd { text-align:left; white-space:normal; margin-top:.15em; }
  .spec-liste dd span { display:inline; margin-left:.4em; }
}

/* Zufriedenheitswerte der Teilnehmerinnen */
.zufrieden-h3 { text-align:center; font-size:1.35rem; margin-top:clamp(44px, 6vw, 70px); }
.study .study-grid { margin-top:clamp(26px, 4vw, 38px); }

/* Sternchen an den Zufriedenheitswerten und zugehoerige Fusszeile */
.stat-ring span sup {
  font-size:.5em; font-weight:400; color:var(--ink-70);
}


/* ---------- Studien-Säulen: Gestaltung ---------- */
.pillars-h3 {
  text-align:center; font-size:1.35rem;
  margin-top:clamp(38px, 5vw, 56px); margin-bottom:clamp(20px, 3vw, 28px);
}
.pillar { padding:0; overflow:hidden; }
.pillar-kopf {
  padding:clamp(20px, 3vw, 26px) clamp(24px, 3vw, 34px) clamp(16px, 2vw, 20px);
  border-bottom:1px solid var(--ink-10);
}
.pillar-1 .pillar-kopf { background:linear-gradient(160deg, var(--blush-soft), color-mix(in srgb, var(--blush) 45%, #fff)); }
.pillar-2 .pillar-kopf { background:linear-gradient(160deg, var(--mist-soft), color-mix(in srgb, var(--mist) 45%, #fff)); }
.pillar-3 .pillar-kopf { background:linear-gradient(160deg, var(--sage-soft), color-mix(in srgb, var(--sage) 45%, #fff)); }
.pillar-kopf .pillar-kicker { color:var(--ink-70); margin-bottom:.35em; }
.pillar-kopf h3 { margin:0; font-size:1.4rem; }
.pillar ul { padding:clamp(6px, 1vw, 10px) clamp(24px, 3vw, 34px) clamp(22px, 3vw, 30px); }
.pillar li { padding:.9em 0 .9em 1.2em; }
.pillar li::before { width:6px; height:6px; top:1.5em; }
.pillar li:first-child::before { top:.75em; }
.pillar strong { font-size:1em; }

/* ---------- Ergebnistabelle der Studie (Muster: .compare / .declare-body) ---------- */
.ergebnis-tabelle {
  width:100%; border-collapse:collapse; background:var(--cream);
  border:1px solid var(--ink-10); border-radius:var(--radius); overflow:hidden;
  font-size:var(--fs-text); min-width:560px; font-variant-numeric:tabular-nums;
}
.ergebnis-tabelle caption { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.ergebnis-tabelle th, .ergebnis-tabelle td {
  padding:.95em 1.2em; text-align:left; border-bottom:1px solid var(--ink-10);
}
.ergebnis-tabelle thead th {
  font-family:var(--font-ui); font-size:var(--fs-klein); letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-70); vertical-align:bottom;
}
.ergebnis-tabelle tbody th[scope="row"] { font-weight:600; }
.ergebnis-tabelle tbody tr:last-child th, .ergebnis-tabelle tbody tr:last-child td { border-bottom:none; }
.ergebnis-hinweis {
  margin:1.4em auto 0; text-align:center;
  font-size:var(--fs-klein); color:var(--ink-70); max-width:62ch;
}

/* Unter 620px gestapelte Karten — Label-Wert-Paare wie in .declare-body */
@media (max-width: 620px) {
  .ergebnis-tabelle { min-width:0; display:block; }
  .ergebnis-tabelle thead { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
  .ergebnis-tabelle tbody, .ergebnis-tabelle tr, .ergebnis-tabelle td, .ergebnis-tabelle th { display:block; width:auto; }
  .ergebnis-tabelle tbody tr { padding:1em 1.1em; border-bottom:1px solid var(--ink-10); }
  .ergebnis-tabelle tbody tr:last-child { border-bottom:none; }
  .ergebnis-tabelle tbody th[scope="row"] {
    padding:0 0 .6em; border:none;
    font-weight:600; font-size:var(--fs-text); line-height:1.35;
  }
  .ergebnis-tabelle tbody td {
    display:flex; align-items:baseline; justify-content:space-between; gap:1.2em;
    padding:.5em 0; border:none; font-size:var(--fs-text); text-align:left;
  }
  .ergebnis-tabelle tbody td::before {
    content:attr(data-label);
    color:var(--ink-70); font-size:var(--fs-klein); flex-shrink:0;
  }
}

/* Sternchen-Fussnote im Seitenfuss */
.fussnote-stern { font-size:var(--fs-klein); color:var(--ink-70); margin-bottom:.8em; }
.fussnote-stern a { color:var(--ink); }

/* ═══════ Hero: EIN Fliesstextmass unterhalb der H1 ═══════ */
.hero .lead {
  font-family:var(--font-accent);
  font-size:var(--fs-lead);
  line-height:1.6;
  color:var(--ink-70);
  max-width:52ch;
}
.hero .lead { margin-top:1.15em; }
/* Lora hat nur 400 und 600 — ohne diese Regel synthetisiert der Browser
   ein Fettschnitt-Imitat, das kaum vom Fliesstext zu unterscheiden ist. */
.hero .lead strong { font-weight:600; color:var(--ink); }

/* ═══════ Warum-Karten und Kompakt-Anrisse der Startseite ═══════ */
/* Drei Karten direkt unter dem Hero — Muster der compose-Karten. */
.warum { padding-block:clamp(50px, 7vw, 90px); }
.warum .compose-grid { margin-top:0; }
@media (min-width:961px) { .warum .compose-grid { grid-template-columns:repeat(3, 1fr); } }
.card-blush { background:linear-gradient(150deg, var(--blush-soft), var(--blush) 130%); }
.warum .compose-card p + p { margin-top:.8em; }
.warum h3 em { font-style:italic; font-weight:400; }
/* Die Zahl ist der Held jeder Karte — gleiche Inszenierung wie compose-amount */
.warum-zahl {
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(2.6rem, 5vw, 3.4rem); line-height:1;
  display:flex; align-items:baseline; gap:.25em;
}
.warum-zahl span { font-family:var(--font-ui); font-size:var(--fs-text); font-weight:500; color:var(--ink-70); }
.warum .compose-card h3 { margin-top:.35em; font-size:1.2rem; }
/* Karte 1 traegt nur den Satz — er bekommt das Gewicht der Zahlen und steht mittig */
.warum .card-sage { display:grid; align-content:center; }
.warum .card-sage h3 { margin-top:0; font-size:clamp(1.5rem, 2.4vw, 1.85rem); line-height:1.25; }
.warum-link { font-weight:600; }

/* Kurze Faktenlisten der Anrisse: mittig gesetzt, gleiche Breite wie die Fliesstexte. */
.kompakt-liste { max-width:44rem; margin:clamp(30px, 4vw, 44px) auto 0; }
.kompakt-cta { text-align:center; margin-top:clamp(28px, 4vw, 40px); }

/* ---------- Wer dahinter steht ---------- */
.person { padding-block:clamp(60px, 9vw, 110px); background:var(--cream-deep); }
.person-grid { display:grid; gap:clamp(28px, 4vw, 54px); align-items:center; }
@media (min-width:761px) { .person-grid { grid-template-columns:auto 1fr; } }
.person-bild {
  width:clamp(140px, 18vw, 210px); aspect-ratio:1; border-radius:50%;
  background:linear-gradient(150deg, var(--sage), var(--mist));
  display:grid; place-items:center; margin-inline:auto;
}
.person-bild span {
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(2.4rem, 4vw, 3.2rem); color:var(--ink); opacity:.55;
}
.person-zitat { margin-top:1.4em; padding-left:16px; border-left:2px solid var(--blush-deep); }
.person-zitat p { font-family:var(--font-accent); font-size:var(--fs-lead); font-style:italic; }
.person-zitat cite { display:block; margin-top:.7em; font-style:normal; font-size:var(--fs-klein); color:var(--ink-70); }
.person-service { margin-top:1.6em; font-size:var(--fs-klein); color:var(--ink-70); }
.person-service a { font-weight:600; color:var(--ink); }

/* Anleitung Zyklustagebuch: prominenter Weg zur Vorlage (13.09.2026) */
.article-cta-row { margin:1.6em 0 2em; }
/* Zwei Buttons in einer Zeile (PDF + App): bei schmalen Viewports brechen sie
   untereinander um und braeuchten sonst keinen Abstand zueinander. */
.article-cta-row .btn { margin:.35em .7em .35em 0; }
.article-cta-row + .print-hinweis { margin-top:-1.4em; margin-bottom:2em; }
.cta-note { display:inline-block; margin-left:.6em; font-size:var(--fs-klein); color:var(--ink-70); }
@media (max-width:560px) { .cta-note { display:block; margin:.6em 0 0; } }

/* Zyklustagebuch: Hinweis zum PDF unter dem Button (14.09.2026) */
.print-hinweis { font-size:var(--fs-klein); color:var(--ink-70); }
@media print { .print-hinweis { display:none; } }

/* ═══════════════════════════════════════════════════════════
   Installationsseite Tagebuch-App (/tagebuch/installieren/, 14.09.2026)
   Store-Eintrag der PWA: Icon + Titel + Buttons, drei Telefon-Screenshots,
   Funktionsliste, drei Installationswege. Das Inline-JS der Seite setzt auf
   dem erkannten Weg die Klasse .aktiv und blendet dort "Dein Geraet" ein.
   Nur Tokens dieser Seite, kein Text unter 15px.
   ═══════════════════════════════════════════════════════════ */
.app-seite { padding-bottom:clamp(60px, 8vw, 100px); }
.app-seite h2 { font-size:clamp(1.5rem, 3vw, 1.9rem); margin-bottom:.5em; }

/* Kopf im Store-Stil: Icon links, Titel und Buttons rechts */
.app-hero { display:grid; gap:clamp(20px, 3vw, 38px); align-items:center; }
@media (min-width:681px) { .app-hero { grid-template-columns:auto 1fr; } }
.app-icon {
  width:160px; height:160px; border-radius:22%;
  box-shadow:0 10px 30px rgba(26,34,51,.14);
}
.app-hero h1 { font-size:clamp(2.1rem, 5vw, 3.2rem); }
.app-meta { margin-top:.7em; font-size:var(--fs-klein); color:var(--ink-70); }
.app-buttons {
  display:flex; flex-wrap:wrap; gap:12px 16px;
  margin-top:1.5em; max-width:none;
}
/* <button> erbt weder Cursor noch Rand-Reset des Links-Buttons */
button.btn { cursor:pointer; }
#install-hint { margin-top:1em; }
#install-hint:empty { display:none; }

/* Drei Screenshots in schmalen Telefonrahmen */
.app-shots {
  display:grid; gap:clamp(22px, 3vw, 30px);
  justify-items:center; margin-top:clamp(40px, 6vw, 66px);
}
@media (min-width:761px) { .app-shots { grid-template-columns:repeat(3, 1fr); align-items:start; } }
.app-shot { max-width:290px; }
.app-rahmen {
  padding:8px; background:var(--cream-deep);
  border:1px solid var(--ink-15); border-radius:26px;
  box-shadow:0 12px 32px rgba(26,34,51,.12);
}
.app-rahmen img { width:100%; border-radius:19px; }
.app-shot figcaption {
  margin-top:.9em; text-align:center;
  font-size:var(--fs-klein); color:var(--ink-70);
}

/* Was die App kann */
.app-kann { margin-top:clamp(48px, 7vw, 84px); }
.app-kann ul { list-style:none; margin:0; padding:0; display:grid; gap:12px; max-width:720px; }
.app-kann li {
  padding:clamp(16px, 2.2vw, 20px) clamp(18px, 2.4vw, 22px);
  background:#fff; border:1px solid var(--ink-10); border-radius:14px;
}
.app-kann li strong { display:block; }

/* Drei Installationswege — der erkannte bekommt .aktiv */
.app-wege-block { margin-top:clamp(48px, 7vw, 84px); }
.app-wege-intro { margin-bottom:clamp(20px, 3vw, 28px); }
.app-wege { display:grid; gap:clamp(16px, 2.4vw, 22px); }
@media (min-width:861px) { .app-wege { grid-template-columns:repeat(3, 1fr); align-items:start; } }
.app-weg {
  padding:clamp(20px, 3vw, 26px);
  background:#fff; border:1px solid var(--ink-10); border-radius:var(--radius);
}
.app-weg.aktiv { border-color:var(--blush-deep); box-shadow:0 0 0 2px var(--blush); }
.app-weg h3 { font-size:1.2rem; }
.app-weg ol { margin:.9em 0 0 1.2em; padding:0; }
.app-weg li { margin-top:.45em; }
/* Kennzeichnung des erkannten Geraets — nicht allein ueber die Farbe.
   [hidden] muss mit: das display hier gewaenne sonst gegen die Browser-Regel. */
.app-weg-jetzt[hidden] { display:none; }
.app-weg-jetzt {
  display:inline-block; margin-top:.7em; padding:.25em .85em;
  background:var(--blush); color:var(--ink); border-radius:999px;
  font-size:var(--fs-klein); font-weight:600;
}

/* Deine Daten */
.app-daten {
  margin-top:clamp(48px, 7vw, 84px);
  padding:clamp(22px, 3.4vw, 32px);
  background:linear-gradient(150deg, var(--sage-soft), var(--mist-soft));
  border:1px solid var(--ink-10); border-radius:var(--radius);
}
.app-daten p { margin-top:.8em; }
.app-daten a { font-weight:600; }