/* BoringWise – Website. Aufbau nach dem Muster großer Produktseiten:
   weißer Grund, graue Kacheln, fette zentrierte Überschriften, eine Akzentfarbe. */

:root {
  --bg: #ffffff;
  --tile: #f5f5f7;
  --tile-dark: #1d1d1f;
  --text: #1d1d1f;
  --text-2: #6e6e73;
  --text-3: #86868b;
  --on-dark: #f5f5f7;
  --on-dark-2: #a1a1a6;
  --line: #d2d2d7;
  --accent: #aaff02;
  --accent-hover: #9bea00;
  --link: #0066cc;
  --mint: #cfede7;

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
    "Helvetica Neue", Helvetica, Arial, sans-serif;

  --t-hero: clamp(2.5rem, 1.2rem + 5vw, 5rem);
  --t-h2: clamp(2rem, 1.2rem + 2.8vw, 3rem);
  --t-statement: clamp(1.1875rem, 1rem + 0.8vw, 1.5rem);
  --t-body: 1.0625rem;
  --t-small: 0.875rem;
  --t-legal: 0.75rem;

  --w-page: 980px;
  --w-text: 692px;
  --gap: 20px;
  --r-tile: 28px;
  --r-pill: 980px;
  --nav-h: 52px;
  --space-section: clamp(72px, 9vw, 140px);

  --hairline: #e8e8ed; /* Trennlinien und Hover auf Grau */
  --text-strong: #424245; /* Fließtext, der mehr tragen muss als --text-2 */
  --on-dark-line: #48484a;
  --hero-ground: #ededee; /* schließt an den Studiogrund der Fotos an */
  --bubble: #e9e9eb;

  --r-card: 18px;
  --r-inset: 22px; /* Innenfläche in einer 28-px-Kachel */
  --r-chip: 12px;
  --r-focus: 6px;
  --shadow-float: 0 1px 2px rgba(0, 0, 0, 0.12), 0 8px 16px -6px rgba(0, 0, 0, 0.2), 0 24px 48px -16px rgba(0, 0, 0, 0.28);

  --h-btn: 56px;
  --h-btn-md: 48px;
  --h-btn-sm: 32px;
  --h-btn-xs: 28px;
  --h-tap: 44px;

  --t-title-sm: 1.3125rem;
  --t-lead: 1.1875rem;
  --d-draw: 800ms;

  --ease: cubic-bezier(0.25, 0.1, 0.25, 1); /* Farbe, Deckkraft */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1); /* alles, was kommt oder geht */
  --d-press: 120ms;
  --d-fast: 180ms;
  --d-enter: 250ms;
  --d-exit: 150ms;
  --d-reveal: 500ms;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--t-body);
  line-height: 1.47;
  letter-spacing: -0.022em;
  -webkit-font-smoothing: antialiased;
  font-optical-sizing: auto;
  overflow-x: clip;
}

h1,
h2,
h3,
p,
figure,
ul,
ol,
dl,
dd {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: var(--link);
  text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
  a:hover {
    text-decoration: underline;
  }
}

:focus-visible {
  outline: 3px solid var(--link);
  outline-offset: 3px;
}

/* Ring folgt der Form: nur Elemente ohne eigenen Radius bekommen einen */
a:focus-visible {
  border-radius: var(--r-focus);
}

.btn:focus-visible,
.seg button:focus-visible {
  border-radius: var(--r-pill);
}

.skip {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: var(--r-pill);
  background: var(--text);
  color: var(--on-dark);
  transform: translateY(-200%);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip:focus-visible {
  transform: none;
}

.wrap {
  width: min(var(--w-page), 100% - 44px);
  margin-inline: auto;
}

.wrap-text {
  width: min(var(--w-text), 100% - 44px);
  margin-inline: auto;
}

/* ── Lokale Navigation ──────────────────────────────────────────────────── */
.localnav {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--nav-h);
  background: rgba(255, 255, 255, 0.8);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

.localnav-in {
  display: flex;
  align-items: center;
  gap: clamp(10px, 3vw, 24px);
  height: 100%;
}

.localnav-title {
  display: flex;
  align-items: center;
  min-height: var(--h-tap);
  gap: 9px;
  margin-right: auto;
  color: var(--text);
  font-size: var(--t-title-sm);
  font-weight: 600;
  letter-spacing: -0.01em;
}

@media (hover: hover) and (pointer: fine) {
  .localnav-title:hover {
    text-decoration: none;
  }
}

@media (max-width: 419px) {
  .localnav-title {
    min-width: 0;
    font-size: 1.125rem;
  }
}

@media (max-width: 359px) {
  .localnav-in {
    gap: 8px;
  }

  .localnav-title {
    font-size: 1rem;
  }

  .localnav-title img {
    display: none;
  }
}

.localnav-title img {
  width: 26px;
  height: 26px;
  border-radius: var(--r-focus);
}

.localnav-links {
  display: none;
  gap: 24px;
  font-size: var(--t-legal);
}

.localnav-links a {
  display: inline-flex;
  align-items: center;
  min-height: var(--h-tap);
  color: var(--text);
  opacity: 0.8;
  transition: opacity var(--d-fast) var(--ease);
}

@media (hover: hover) and (pointer: fine) {
  .localnav-links a:hover {
    opacity: 1;
    text-decoration: none;
  }
}

@media (min-width: 834px) {
  .localnav-links {
    display: flex;
  }
}

/* Handy: Abschnitte als aufklappbares Menü unter der Leiste */
.localnav-menu {
  position: static;
}

.localnav-menu summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--h-tap);
  list-style: none;
  cursor: pointer;
  font-size: var(--t-legal);
}

.localnav-menu summary::-webkit-details-marker {
  display: none;
}

.localnav-menu summary::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--d-fast) var(--ease);
}

.localnav-menu[open] summary::after {
  transform: translateY(2px) rotate(-135deg);
}

.localnav-panel {
  position: absolute;
  top: var(--nav-h);
  left: 0;
  right: 0;
  display: grid;
  padding: 8px 22px 16px;
  background: var(--bg);
  box-shadow: 0 24px 40px -24px rgba(0, 0, 0, 0.25);
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  transform-origin: 50% 0;
}

.localnav-panel {
  transition: opacity var(--d-fast) var(--ease-out), transform var(--d-fast) var(--ease-out);
}

@starting-style {
  .localnav-menu[open] .localnav-panel {
    opacity: 0;
    transform: translateY(-6px);
  }
}

.localnav-panel a {
  display: flex;
  align-items: center;
  min-height: var(--h-btn-md);
  border-top: 1px solid var(--hairline);
  color: var(--text);
  font-size: var(--t-body);
}

.localnav-panel a:first-child {
  border-top: 0;
}

@media (min-width: 834px) {
  .localnav-menu {
    display: none;
  }
}

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--h-btn);
  padding: 0 30px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--text);
  font: inherit;
  font-weight: 600;
  letter-spacing: -0.022em;
  cursor: pointer;
  transition: background-color var(--d-fast) var(--ease),
    transform var(--d-fast) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .btn:hover {
    background: var(--accent-hover);
    text-decoration: none;
  }
}

.btn:active {
  transform: scale(0.96);
  transition-duration: var(--d-press);
}

.btn-sm {
  white-space: nowrap;
  min-height: var(--h-btn-xs);
  padding: 0 12px;
  font-size: var(--t-legal);
  font-weight: 500;
  position: relative;
}

/* 44-px-Klickfläche um die kleine Pille */
.btn-sm::after {
  content: "";
  position: absolute;
  inset: -8px -4px;
}

.btn-dark {
  background: var(--text);
  color: var(--on-dark);
}

@media (hover: hover) and (pointer: fine) {
  .btn-dark:hover {
    background: #3a3a3d;
  }
}

.link-more {
  display: inline-flex;
  align-items: center;
  min-height: var(--h-tap);
  font-size: var(--t-body);
}

.link-more::after {
  content: "›";
  margin-left: 0.3em;
  font-size: 1.2em;
  line-height: 1;
  transition: transform var(--d-fast) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .link-more:hover {
    text-decoration: none;
  }

  .link-more:hover::after {
    transform: translateX(3px);
  }
}

/* ── Hinweisband ────────────────────────────────────────────────────────── */
.ribbon a {
  text-decoration: underline;
  text-underline-offset: 2px;
  display: inline-block;
  padding: 12px 0;
}

.ribbon {
  letter-spacing: -0.016em;
  background: var(--tile);
  padding: 2px 22px;
  text-align: center;
  font-size: var(--t-small);
}

/* ── Abschnitte ─────────────────────────────────────────────────────────── */
.section {
  padding-top: var(--space-section);
}

.section-head {
  width: min(var(--w-text), 100% - 44px);
  margin: 0 auto clamp(36px, 5vw, 64px);
  text-align: center;
}

.section-head h2,
.h2 {
  font-size: var(--t-h2);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.section-head p {
  margin-top: 16px;
  color: var(--text-2);
  font-size: var(--t-statement);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0.009em;
}

/* Kernphrase der Einleitung: schwarzer Text auf neongrünem Textmarker-Strich. Bei Apple Health ist die Phrase
   farbig gesetzt; hier bleibt der Akzent Fläche. */
.key {
  color: var(--text);
  font-weight: inherit;
  background: linear-gradient(transparent 64%, var(--accent) 64%, var(--accent) 94%, transparent 94%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

@media (forced-colors: active) {
  .key {
    background: none;
    text-decoration: underline;
  }
}

/* ── Mail-Hinweis (mailto gibt keine Rückmeldung) ───────────────────────── */
.mailnote {
  position: fixed;
  left: 50%;
  bottom: 76px;
  z-index: 60;
  width: min(560px, 100% - 32px);
  padding: 16px 20px;
  border-radius: var(--r-card);
  background: var(--tile-dark);
  color: var(--on-dark);
  font-size: var(--t-small);
  line-height: 1.4;
  box-shadow: var(--shadow-float);
  visibility: hidden;
  opacity: 0;
  transform: translate(-50%, 12px);
  pointer-events: none;
  transition: opacity var(--d-exit) var(--ease-out), transform var(--d-exit) var(--ease-out), visibility 0s linear var(--d-exit);
}

.mailnote.on {
  visibility: visible;
  transition-duration: var(--d-enter);
  transition-delay: 0s;
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}

.mailnote b {
  user-select: all;
}

.mailnote-copy {
  display: inline-flex;
  align-items: center;
  min-height: var(--h-btn-sm);
  margin-top: 10px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--text);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  position: relative;
}

.mailnote-copy::after {
  content: "";
  position: absolute;
  inset: -6px 0;
}

.mailnote-copy:active {
  transform: scale(0.96);
}

/* ── Scroll-Insel ───────────────────────────────────────────────────────── */
.island {
  position: fixed;
  left: 50%;
  bottom: 18px;
  z-index: 55;
  display: none;
  align-items: center;
  gap: 12px;
  padding: 8px 8px 8px 12px;
  border-radius: var(--r-pill);
  background: rgba(29, 29, 31, 0.92);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  color: var(--on-dark);
  font-size: var(--t-small);
  font-weight: 600;
  white-space: nowrap;
  box-shadow: var(--shadow-float);
  opacity: 0;
  transform: translate(-50%, 16px) scale(0.96);
  pointer-events: none;
  transform-origin: 50% 100%;
  transition: opacity var(--d-exit) var(--ease-out), transform var(--d-exit) var(--ease-out);
}

.js .island {
  display: flex;
}

.island.on {
  transition-duration: var(--d-enter);
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}

.island-ring {
  --p: 0;
  width: 22px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, #1d1d1f 62%, transparent 64%),
    conic-gradient(var(--accent) calc(var(--p) * 100%), var(--on-dark-line) 0);
}

.island-label {
  min-width: 6.5em;
}

.island .btn-sm {
  min-height: var(--h-btn-sm);
  padding: 0 14px;
}

/* ── Footer ─────────────────────────────────────────────────────────────── */
.footer {
  margin-top: 0;
  padding: 36px 0 44px;
  background: var(--tile);
  color: var(--text-2);
  font-size: var(--t-legal);
  line-height: 1.34;
  letter-spacing: -0.01em;
}

.footer-brand {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 24px;
  padding: 20px 0 28px;
  color: var(--text);
  font-size: 1.0625rem;
  font-weight: 600;
}

.footer-links {
  font-size: var(--t-small);
}

.footnotes {
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

.footnotes li + li,
.footnotes p {
  margin-top: 9px;
}

.footnotes ol {
  list-style: decimal;
  padding-left: 1.4em;
}

.fn-back {
  display: inline-block;
  min-width: 24px;
  min-height: 24px;
  text-decoration: none;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 22px;
  padding-top: 8px;
}

.footer-links a {
  display: inline-flex;
  align-items: center;
  min-height: var(--h-tap);
  color: var(--text-strong);
}

.footer-copy {
  margin-top: 4px;
}

/* ── Größenabhängige Laufweite (große Schrift enger,
kleine offener) ─────── */
.hero-note,
.plan-note,
.chart-note,
.plans-fine,
.checks,
.meters,
.stages-legend,
.prose-toc,
.mailnote {
  letter-spacing: -0.016em;
}

.pill,
.chart-tip,
.chat-tag,
.localnav-links,
.btn-sm {
  letter-spacing: -0.01em;
}

/* ── Material je nach Systemeinstellung ─────────────────────────────────── */
@media (prefers-reduced-transparency: reduce) {
  .localnav,
  .island {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .localnav {
    background: var(--bg);
  }

  .island {
    background: var(--tile-dark);
  }
}

@media (prefers-contrast: more) {
  :root {
    --text-2: #424245;
    --text-3: #515154;
    --line: #6e6e73;
  }

  .localnav {
    background: var(--bg);
    border-bottom-color: var(--text);
  }

  .tile,
  .rim,
  .rim > *,
  .faq details {
    border: 1px solid var(--line);
  }
}

/* ── Der große Moment: „Normwerte kennen dich nicht.“ ───────────────────── */
.range .section-head h2 {
  font-size: clamp(2.5rem, 1rem + 5vw, 4.5rem);
  line-height: 1.04;
  letter-spacing: -0.025em;
}

/* ── Trefferflächen (Checkliste ui-ux-pro-max): Fußnotenziffern und Menü ── */
sup a {
  display: inline-block;
  margin: -12px -10px;
  padding: 12px 10px;
}

.localnav-menu summary {
  min-width: 44px;
  justify-content: center;
}

a,
button,
summary {
  touch-action: manipulation;
}

/* ── Robustheit: lange Komposita, große Schrift, Fokus auf dunklen Flächen ── */
h1,
h2,
h3 {
  overflow-wrap: break-word;
  hyphens: auto;
}

.statcards > *,
.tiles > *,
.chart-grid > *,
.plans > * {
  min-width: 0;
}

.mailnote :focus-visible,
.island :focus-visible,
.tile-dark :focus-visible {
  outline-color: #fff;
}

/* Ohne JavaScript sind die Umschalter wirkungslos, also gar nicht erst zeigen */
html:not(.js) .seg {
  display: none;
}

/* BoringWise – Website: sections. Tokens stehen in base.css. */

/* ── Hero: Foto über die volle Breite, Text im freien Raum links ─────────── */
.hero {
  position: relative;
  display: grid;
  overflow: hidden;
  background: var(--hero-ground);
}

.hero-photo,
.hero-copy {
  grid-area: 1 / 1;
}

.hero-photo {
  display: block;
  min-height: 100%;
}

.hero-photo img {
  width: 100%;
  height: 100%;
  min-height: clamp(520px, 52vw, 820px);
  max-height: 820px;
  object-fit: cover;
  object-position: 72% 50%;
}

/* Motiv nach rechts rücken, damit links Platz für die Überschrift bleibt */
@media (min-width: 734px) {
  .hero-photo img {
    width: 114%;
    max-width: none;
  }

  .hero h1 {
    max-width: 50%;
    font-size: clamp(2.5rem, 1rem + 4.2vw, 4.5rem);
  }
}

.js .hero-photo img {
  animation: hero-drift 1400ms var(--ease-out) both;
}

@keyframes hero-drift {
  from {
    transform: scale(1.03);
  }
}

.hero-copy {
  position: relative;
  padding-block: 56px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  text-align: left;
}

.hero-copy > * {
  max-width: min(32rem, 46%);
}

.hero-mark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--t-title-sm);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.hero-mark img {
  width: 34px;
  height: 34px;
  border-radius: 9px;
}

.hero h1 {
  margin-top: 14px;
  font-size: var(--t-hero);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.025em;
}

.hero-sub {
  margin-top: 18px;
  color: var(--text-strong);
  font-size: var(--t-statement);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0.009em;
}

.hero-cta {
  margin-top: 28px;
}

.hero-note {
  margin-top: 14px;
  color: var(--text-strong);
  font-size: var(--t-small);
}

@media (max-width: 733px) {
  .hero {
    display: flex;
    flex-direction: column-reverse;
  }

  .hero-photo {
    min-height: 0;
  }

  .hero-photo img {
    height: auto;
    min-height: 0;
    aspect-ratio: 5 / 4;
    object-position: 78% 50%;
  }

  .hero-copy {
    align-items: center;
    padding: 48px 0 8px;
    text-align: center;
  }

  .hero-copy > * {
    max-width: 34rem;
  }
}

.hero-phones {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(12px, 3vw, 40px);
  height: clamp(360px, 48vw, 600px);
  padding-top: clamp(48px, 6vw, 88px);
  box-sizing: content-box;
  overflow: hidden;
  background: linear-gradient(180deg, var(--bg) 0%, var(--tile) 100%);
}

.hero-phones .phone {
  flex: none;
  width: clamp(220px, 31vw, 350px);
}

.hero-phones .phone:nth-child(1),
.hero-phones .phone:nth-child(3) {
  width: clamp(180px, 26vw, 290px);
  margin-top: clamp(48px, 7vw, 96px);
}

@media (max-width: 599px) {
  .hero-phones .phone:nth-child(1),
  .hero-phones .phone:nth-child(3) {
    display: none;
  }

  .hero-phones .phone {
    width: min(260px, 70vw);
  }
}

/* ── iPhone-Rahmen ──────────────────────────────────────────────────────────
   Der Rand hängt an der Gerätebreite (cqw). Prozent-Padding würde sich auf den
   umgebenden Container beziehen und den Rahmen auf breiten Bildschirmen aufblähen. */
/* Gerät nach dem Vorbild der Apple-Produktbilder: Titan-Kante, schwarzer Displayrand, Dynamic Island mit
   Kameralinse, Seitentasten. Alle Maße in cqw (Anteil der Gerätebreite), damit das Gerät in jeder Größe stimmt:
   1 pt des 402-pt-Displays sind 0,23 cqw. Die Statusleiste (09:41) steckt in den Bildern selbst. */
.phone {
  container-type: inline-size;
  position: relative;
  isolation: isolate;
  border-radius: 16.8% / 7.9%;
  background: linear-gradient(135deg, #5a5a5f 0%, #2a2a2d 22%, #1c1c1e 50%, #2e2e31 78%, #55555a 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22), 0 2px 4px rgba(0, 0, 0, 0.1), 0 12px 24px -10px rgba(0, 0, 0, 0.2),
    0 36px 64px -28px rgba(0, 0, 0, 0.3);
}

/* Tasten: links Aktionstaste und Lautstärke, rechts die Seitentaste */
.phone::before,
.phone::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 1.1cqw;
  border-radius: 0.5cqw;
}

.phone::before {
  left: -0.7cqw;
  top: 25cqw;
  height: 40cqw;
  background: linear-gradient(#3a3a3d 0 6.500cqw, transparent 6.500cqw 13cqw, #3a3a3d 13cqw 24cqw, transparent 24cqw 28cqw, #3a3a3d 28cqw 39cqw, transparent 39cqw);
}

.phone::after {
  right: -0.7cqw;
  top: 40cqw;
  height: 18cqw;
  background: #3a3a3d;
}

.phone-pair {
  display: grid;
}

.phone-pair picture {
  grid-area: 1 / 1;
}

.phone picture {
  position: relative;
  display: block;
  margin: 0.9cqw;
  padding: 2.6cqw;
  border-radius: 16cqw;
  background: #000;
}

/* Dynamic Island: 126 × 37 pt, 11 pt unter der Displaykante, mit angedeuteter Kameralinse */
.phone picture::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 5.15cqw;
  left: 50%;
  width: 28.5cqw;
  height: 8.4cqw;
  margin-left: -14.25cqw;
  border-radius: 4.2cqw;
  background: radial-gradient(circle at 79% 50%, #15152a 0 0.9cqw, #0a0a12 0.95cqw 1.5cqw, #000 1.55cqw);
}

.phone img {
  display: block;
  width: 100%;
  border-radius: 13.4cqw;
  background: #000;
}

/* ── Kernaussagen ───────────────────────────────────────────────────────── */
.statements {
  padding-top: clamp(64px, 8vw, 110px);
  text-align: center;
}

.statements > p {
  color: var(--text-2);
  font-size: var(--t-statement);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.009em;
  text-wrap: balance;
}

.statements > p + p {
  margin-top: 1.4em;
}

.statements strong {
  color: var(--text);
  font-weight: 600;
}

/* ── Galerie (Muster: Apple Health) ─────────────────────────────────────── */
/* Ab 734 px ist die Hülle unsichtbar und die Kacheln stehen im Raster wie bisher. Darunter werden sie zur
   wischbaren Reihe: natives Scrollen mit Einrasten, die nächste Karte ragt über den Rand. Ohne JS bleibt
   alles erreichbar, die Pfeilknöpfe kommen erst mit main.js dazu. */
.gallery {
  display: contents;
}

.gallery-nav {
  display: none;
}

@media (max-width: 733px) {
  .gallery {
    grid-column: 1 / -1;
    display: flex;
    gap: 12px;
    margin-inline: -22px;
    padding-inline: 22px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 22px;
    scrollbar-width: none;
  }

  .gallery::-webkit-scrollbar {
    display: none;
  }

  .gallery > .tile {
    flex: 0 0 84%;
    scroll-snap-align: start;
  }

  .gallery:focus-visible {
    outline: 2px solid var(--link);
    outline-offset: -2px;
    border-radius: var(--r-focus);
  }

  .gallery-nav {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: -4px;
  }

  .gallery-nav button {
    display: grid;
    place-items: center;
    width: var(--h-tap);
    height: var(--h-tap);
    border: 0;
    border-radius: 50%;
    background: var(--tile);
    color: var(--text);
    cursor: pointer;
    transition: opacity var(--d-fast) var(--ease-out), transform var(--d-press) var(--ease-out);
  }

  .gallery-nav button:active {
    transform: scale(0.96);
  }

  .gallery-nav button[aria-disabled="true"] {
    opacity: 0.35;
    cursor: default;
  }

  .gallery-nav svg {
    width: 12px;
    height: 12px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
}

/* ── Sektionston: jeder Themenabschnitt hat eine eigene, leise Farbe ────── */
/* Nur die vier Themenabschnitte tragen einen Ton. Zugang, Preise und FAQ bleiben weiß (dort wird gehandelt, nicht
   erzählt), #bereich behält seine graue Fläche. Das Muster stammt von Apple Health, die Farben nicht: Training aus
   dem Neongrün der Marke, Coach aus dem Mint des Manifests, dazu ein kühles Violett und ein warmes Pfirsich. */
/* Ein weiches Band hinter dem Abschnittskopf, oben und unten wieder Weiß: keine harte Kante zur Nachbarsektion. */
.tone {
  /* Der Farbscheitel wandert mit dem Abschnittsabstand (72 bis 140 px) mit und liegt so auf jeder Breite hinter
     Zeichen und Überschrift. Das Band endet vor der ersten Kachel, damit neben ihr keine Tonkante steht. */
  --tone-peak: calc(var(--space-section) + 70px);
  background: linear-gradient(180deg, var(--bg) 0, var(--tone) var(--tone-peak), var(--bg) calc(var(--tone-peak) + 200px)) no-repeat;
}

.tone-training {
  --tone: #f3fadc;
  --tone-ink: #3d7a00;
  --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M3 12h3v8H3zM7 8h5v16H7zM20 8h5v16h-5zM26 12h3v8h-3zM12 14h8v4h-8z'/%3E%3C/svg%3E");
}

.tone-gesundheit {
  --tone: #ecebf8;
  --tone-ink: #5546b8;
  --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M21 3a13 13 0 1 0 8 18A11 11 0 0 1 21 3z'/%3E%3C/svg%3E");
}

.tone-ernaehrung {
  --tone: #fbeee6;
  --tone-ink: #a04a14;
  --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M3 13h26a13 13 0 0 1-9 12.400V29h-8v-3.600A13 13 0 0 1 3 13zM15 3h2v7h-2z'/%3E%3C/svg%3E");
}

.tone-coach {
  --tone: #e2f3ef;
  --tone-ink: #0f6b5c;
  --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M6 5h20a3 3 0 0 1 3 3v12a3 3 0 0 1-3 3H14l-7 6v-6H6a3 3 0 0 1-3-3V8a3 3 0 0 1 3-3z'/%3E%3C/svg%3E");
}

/* Auf den Tönen braucht der graue Einleitungstext eine Stufe mehr Kontrast: 5,0:1 statt 4,46:1 (WCAG 1.4.3) */
.tone .section-head p {
  color: #66666b;
}

/* Das Zeichen des Abschnitts kommt als Maske aus dem Stylesheet: kein Byte im HTML, acht Sprachfassungen unberührt */
.tone .section-head::before {
  content: "";
  display: block;
  width: 32px;
  height: 32px;
  margin: 0 auto 14px;
  background: var(--tone-ink);
  -webkit-mask: var(--glyph) center / contain no-repeat;
  mask: var(--glyph) center / contain no-repeat;
}

@media (prefers-contrast: more) {
  .tone {
    background: none;
  }
}

/* ── Angebotsspalten ────────────────────────────────────────────────────── */
.offers {
  display: grid;
  gap: 40px;
  margin-top: clamp(56px, 7vw, 90px);
  text-align: center;
}

@media (min-width: 734px) {
  .offers {
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
  }
}

.offers h3 {
  font-size: var(--t-title-sm);
  font-weight: 600;
  letter-spacing: 0.011em;
}

.offers p {
  margin-top: 10px;
  color: var(--text-2);
  font-weight: 600;
  line-height: 1.24;
}

/* Zugang in drei Schritten: dieselben Spalten, als nummerierte Liste */
.steps {
  list-style: none;
  padding: 0;
  margin-top: 0;
  counter-reset: step;
}

.steps > li {
  counter-increment: step;
}

.steps h3::before {
  content: counter(step) ". ";
}

/* ── Kacheln ────────────────────────────────────────────────────────────── */
.tiles {
  display: grid;
  gap: var(--gap);
}

@media (min-width: 734px) {
  .tiles {
    grid-template-columns: repeat(2, 1fr);
  }
}

.tile {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-tile);
  background: var(--tile);
}

.tile-copy {
  padding: 40px 30px;
}

.tile-stack {
  display: flex;
  flex-direction: column;
}

.widget-inset {
  margin: auto 30px 30px;
  border-radius: var(--r-inset);
  background: var(--bg);
}

.tile-copy h3 {
  display: inline;
  font: inherit;
  font-weight: 600;
  color: var(--text);
}

.tile-copy h3 + p {
  display: inline;
}

.tile-copy p {
  text-wrap: pretty;
  color: var(--text-2);
  font-weight: 600;
  line-height: 1.24;
}

.tile-copy strong {
  color: var(--text);
  font-weight: 600;
}


.tile-media {
  display: flex;
  justify-content: center;
  padding: 0 30px;
}

.tile-media .phone {
  width: min(270px, 78%);
}

/* hohe Kachel: Bild oben, Text darunter; Gerät unten angeschnitten */
.tile-tall {
  display: flex;
  flex-direction: column;
}

.tile-tall .tile-media {
  order: -1;
  height: clamp(300px, 40vw, 420px);
  padding-top: 40px;
  overflow: hidden;
  align-items: flex-start;
}

/* breite Kachel: Text links, Gerät rechts angeschnitten */
@media (min-width: 734px) {
  .tile-wide {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    min-height: 480px;
  }

  .tile-wide .tile-copy {
    padding: 50px;
  }

  .tile-wide .tile-media {
    align-self: stretch;
    align-items: flex-start;
    padding-top: 56px;
    max-height: 480px;
  }

  .tile-wide .tile-media .phone {
    width: min(300px, 80%);
  }

  .tile-wide.rev .tile-copy {
    order: 2;
  }
}

@media (max-width: 733px) {
  .tile-wide .tile-media {
    height: 340px;
    overflow: hidden;
    align-items: flex-start;
  }
}

.tile-dark {
  background: var(--tile-dark);
  color: var(--on-dark);
}

.tile-dark .tile-copy p {
  color: var(--on-dark-2);
}

.tile-dark .tile-copy h3,
.tile-dark .tile-copy strong {
  color: var(--on-dark);
}

/* ── Foto-Kacheln ───────────────────────────────────────────────────────── */
.tile-photo {
  min-height: 320px;
}

.tile-photo picture,
.tile-photo img {
  display: block;
  width: 100%;
  height: 100%;
}

.tile-photo img {
  object-fit: cover;
}

/* Reines Schwarz als Kontur: getönte Konturen wirken auf Fotos wie Schmutz */
.tile-photo,
.closing,
.tile-split {
  position: relative;
}

.tile-photo::after,
.closing::after,
.tile-split::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
  pointer-events: none;
}

.tile-photo-wide {
  grid-column: 1 / -1;
  width: 100vw;
  height: clamp(320px, 56vw, 72vh);
  min-height: 0;
  margin-inline: calc(50% - 50vw);
  border-radius: 0;
}

.tile-photo-wide img {
  object-position: 50% 58%;
}

/* Kachel, deren rechte Hälfte ein Foto füllt */
.tile-cover,
.tile-cover img {
  display: block;
  width: 100%;
  height: 100%;
}

.tile-cover img {
  min-height: 320px;
  object-fit: cover;
  object-position: 50% 30%;
}

@media (min-width: 734px) {
  .tile-split {
    align-items: stretch;
  }

  .tile-split .chat {
    padding: 50px;
  }
}

/* ── Datengrafik: große Ziffern, Herz, Balken ───────────────────────────── */
.datatype {
  display: grid;
  gap: 10px;
  align-content: center;
  padding: 40px 30px;
}

@media (min-width: 734px) {
  .datatype {
    padding: 50px;
  }
}

.datatype-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 12px;
  line-height: 0.95;
}

.datatype-num {
  font-size: clamp(4.5rem, 2rem + 8vw, 8rem);
  font-weight: 600;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}

.datatype-num.dim {
  color: var(--text-3);
}

.datatype-unit {
  font-size: clamp(1.5rem, 1rem + 2vw, 2.75rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.datatype-cap {
  color: var(--text-2);
  font-weight: 600;
}

.heart {
  align-self: center;
  width: clamp(44px, 6vw, 76px);
  fill: #ff2330; /* Herz-Rot aus dem Rad der Bereiche */
  transform-origin: 50% 60%;
}

.js .reveal .heart {
  opacity: 0;
  transform: scale(0.9);
}

.js .reveal.in .heart {
  opacity: 1;
  transform: none;
  transition: opacity 400ms var(--ease-out) 400ms, transform 400ms var(--ease-out) 400ms;
}

.datatype-bar {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 52px;
  margin-top: 18px;
  padding: 0 20px;
  border-radius: var(--r-pill);
  background: var(--hairline);
  font-weight: 600;
  overflow: hidden;
}

.datatype-bar::before {
  content: "";
  position: absolute;
  inset: 0;
  width: calc(var(--v) * 1%);
  border-radius: var(--r-pill);
  background: var(--accent);
  transform-origin: 0 50%;
}

.datatype-bar > * {
  position: relative;
}

.datatype-bar b {
  font-size: var(--t-title-sm);
  font-variant-numeric: tabular-nums;
}

.stages {
  display: flex;
  gap: 4px;
  height: 22px;
  margin-top: 22px;
  transform-origin: 0 50%;
}

.stages i {
  flex: var(--w) 0 0;
  border-radius: var(--r-focus);
  background: var(--c);
}

.stages-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.stages-legend i {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--c);
}

.stages-legend {
  display: flex;
  gap: 18px;
  color: var(--text-2);
  font-size: var(--t-small);
  font-weight: 600;
}

.js .reveal .stages,
.js .reveal .datatype-bar::before {
  transform: scaleX(0);
}

.js .reveal.in .stages,
.js .reveal.in .datatype-bar::before {
  transform: none;
  transition: transform var(--d-draw) var(--ease-out) var(--d-fast);
}

/* ── Coach-Dialog ───────────────────────────────────────────────────────── */
.chat {
  display: grid;
  gap: 10px;
  padding: 40px 30px;
  align-content: center;
}

.bubble {
  max-width: 86%;
  padding: 12px 16px;
  border-radius: var(--r-card);
  background: var(--bubble);
  font-size: 1rem;
  line-height: 1.35;
}

.bubble.me {
  justify-self: end;
  background: var(--text);
  color: var(--on-dark);
}

.chat-tag {
  color: var(--text-2);
  font-size: var(--t-legal);
  font-weight: 600;
}

/* ── Mint-Band „Warum boring“ ───────────────────────────────────────────── */
.manifesto {
  margin-top: var(--space-section);
  padding: clamp(80px, 11vw, 160px) 0;
  background: radial-gradient(90% 80% at 50% 45%, #ddf3ee 0%, var(--mint) 72%);
}

.manifesto-kicker {
  color: rgba(29, 29, 31, 0.66);
  font-size: var(--t-small);
  font-weight: 600;
}

.manifesto-text {
  max-width: 18ch;
  margin-top: 16px;
  font-size: clamp(2.25rem, 1rem + 5vw, 5rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.012em;
}

.manifesto-text .w {
  color: rgba(29, 29, 31, 0.52);
  transition: color var(--d-exit) var(--ease);
}

.manifesto-text .w.on {
  color: var(--text);
}

/* ── Abschluss: Foto mit Text im freien Raum links ──────────────────────── */
.closing {
  position: relative;
  overflow: hidden;
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  background: var(--hero-ground);
}

.closing-photo img {
  width: 100%;
  height: clamp(420px, 56vw, 80vh);
  object-fit: cover;
  object-position: 80% 50%;
}

.closing-copy {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 0 clamp(28px, 5vw, 64px);
}

.closing-copy > * {
  max-width: min(26rem, 52%);
}

.closing-copy p {
  margin: 16px 0 28px;
  color: var(--text-strong);
  font-size: var(--t-statement);
  font-weight: 600;
  line-height: 1.25;
}

@media (max-width: 733px) {
  .closing {
    display: flex;
    flex-direction: column-reverse;
  }

  .closing-photo img {
    height: auto;
    aspect-ratio: 4 / 3;
  }

  .closing-copy {
    position: static;
    align-items: center;
    padding: 44px 24px 12px;
    text-align: center;
  }

  .closing-copy > * {
    max-width: 30rem;
  }
}


/* ── Zwischen-CTA ───────────────────────────────────────────────────────── */
.mid-cta {
  display: grid;
  justify-items: center;
  gap: 14px;
  margin-top: clamp(56px, 7vw, 96px);
  color: var(--text-2);
  font-size: var(--t-small);
  text-align: center;
}

/* ── Dunkle Bühne für die großen Ziffern: der eine Kontrastmoment je Abschnitt ── */
@media (min-width: 734px) {
  .tile-stage {
    min-height: 560px;
  }
}

.tile-stage .datatype-num.dim,
.tile-stage .datatype-cap,
.tile-stage .stages-legend {
  color: var(--on-dark-2);
}

.tile-stage .datatype-bar {
  background: #2c2c2e;
  color: var(--on-dark);
}

.tile-stage .datatype-bar span {
  color: var(--text);
}

/* ── Randlose Fotos brechen den Kachelrhythmus ──────────────────────────── */
@media (min-width: 734px) {
  .closing-copy {
    padding-inline: max(22px, calc(50vw - var(--w-page) / 2));
  }
}

/* ── Rad der Bereiche ───────────────────────────────────────────────────── */
/* Form, Reihenfolge und Farben stammen aus der App (HealthWheelLayout, HealthWheelPalette). Das Rad selbst ist
   eine eigene SVG-Datei (assets/wheel.svg): im HTML kostet es nur ein <img>. Die Legende färbt ihre Punkte per
   :nth-child in derselben Reihenfolge, also ohne Inline-Stile. */
/* Block statt Grid oder Flex: in einer zentrierten Grid-Zelle löste sich "100%" gegen eine schrumpfende Spur auf,
   das Rad wurde auf dem Telefon briefmarkenklein (Nutzerbefund 20.09.2026). */
.tile-wheel .tile-media {
  position: relative;
  display: block;
  height: auto;
  max-height: none;
  padding: 8px 30px 44px;
  overflow: visible;
}

.wheel {
  display: block;
  width: min(340px, 100%);
  height: auto;
  margin-inline: auto;
}

.tile-wheel .pill {
  position: absolute;
  top: -14px;
  right: 30px;
}

.wheel-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 22px;
  padding: 0;
  list-style: none;
  font-size: var(--t-small);
  font-weight: 600;
  color: var(--text);
}

.wheel-legend li {
  display: flex;
  align-items: center;
  gap: 7px;
}

.wheel-legend li::before,
.area::before,
.datacard-area::before {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  background: var(--c);
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}

/* Reihenfolge wie im Rad. Farbe und Symbol je Bereich: dieselben Motive wie in der App (dort SF Symbols, hier eigene
   Zeichnungen, weil Apples Symbole im Web nicht lizenziert sind). Quelle der Pfade: assets/gen/area-icons.json */
.wheel-legend li:nth-child(1),
.area-recovery {
  --c: #1dd6d5;
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 2a8 8 0 0 0-8 8c0 2.600 1.200 4.800 3 6.300V22h8v-3h2a2 2 0 0 0 2-2v-3l2-.800-2-3.700A8 8 0 0 0 12 2zM11.500 6a2 2 0 0 1 2 1 2.500 2.500 0 0 1 0 5h-2a3 3 0 0 1 0-6z'/%3E%3C/svg%3E");
}

.wheel-legend li:nth-child(2),
.area-nutrition {
  --c: #9ee05d;
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M6 2v7a2 2 0 0 0 1.500 1.940V22h2V10.940A2 2 0 0 0 11 9V2H9.800v6H9V2H8v6h-.800V2zM17 2c-2 1.500-3 4-3 7v4h2v9h2V2z'/%3E%3C/svg%3E");
}

.wheel-legend li:nth-child(3),
.area-activity {
  --c: #ef9b73;
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M13 5.500a2 2 0 1 0 0-4 2 2 0 0 0 0 4zM11 7L7 9.500V14h2v-3.300l1.500-.900L9 17l-3 4.500 1.700 1.100L11 17.700l1-2.700 2 2v6h2v-7l-2.200-2.600.700-3.100c1 1.300 2.500 2.100 4.500 2.200v-2c-1.700-.100-2.900-.900-3.600-2.200l-1-1.600c-.500-.800-1.500-1.200-2.400-.900z'/%3E%3C/svg%3E");
}

.wheel-legend li:nth-child(4),
.area-heart {
  --c: #ff2330;
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 21C5 15.500 2 12 2 8.200 2 5.300 4.200 3 7 3c2 0 3.700 1 5 2.800C13.300 4 15 3 17 3c2.800 0 5 2.300 5 5.200 0 3.800-3 7.300-10 12.800z'/%3E%3C/svg%3E");
}

.wheel-legend li:nth-child(5),
.area-fitness {
  --c: #b43ff0;
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 6a2.200 2.200 0 1 0 0-4.400A2.200 2.200 0 0 0 12 6zM2.500 7.500l.500-2L10 7h4l7-1.500.500 2L15 9.200V22h-2v-6h-2v6H9V9.200z'/%3E%3C/svg%3E");
}

.wheel-legend li:nth-child(6),
.area-sleep {
  --c: #5d47fa;
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M3 5h2v7h16a1 1 0 0 1 1 1v6h-2v-2H4v2H2V6a1 1 0 0 1 1-1zM7 8h4a1 1 0 0 1 1 1v2H6V9a1 1 0 0 1 1-1zM14 8h4a1 1 0 0 1 1 1v2h-6V9a1 1 0 0 1 1-1z'/%3E%3C/svg%3E");
}

.wheel-legend li:nth-child(7),
.area-training {
  --c: #209cfa;
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M2 10h2v4H2zM5 7h3v10H5zM16 7h3v10h-3zM20 10h2v4h-2zM8 11h8v2H8z'/%3E%3C/svg%3E");
}

@media (min-width: 734px) {
  .tile-wheel .tile-media {
    align-self: center;
    max-height: none;
    padding: 40px 50px 40px 0;
  }

  .tile-wheel .pill {
    top: 24px;
    right: 28px;
  }

  .wheel {
    width: min(420px, 100%);
  }
}

/* ── Bereichsmarke ──────────────────────────────────────────────────────── */
/* Das Rad ist der Schlüssel: jede Gesundheits- und Trainingskachel nennt ihren Bereich mit demselben kleinen
   Symbol in derselben Farbe wie im Rad. */
.tile-copy .area {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 10px;
  font-size: var(--t-small);
  font-weight: 600;
  color: var(--text);
}

/* Auf der dunklen Bühne würde das satte Indigo versinken: dort eine hellere Mischung derselben Farbe */
.tile-dark .tile-copy .area {
  color: var(--on-dark);
}

.tile-dark .area::before {
  background: color-mix(in srgb, var(--c) 62%, white);
}

/* ── Datenkarten um eine Überschrift ────────────────────────────────────── */
/* Ein Tag in Zahlen: fünf Karten in den Farben des Rads schweben um Überschrift und Knopf (Muster aus einem Reel
   von builtbylatitude, 20.09.2026). Alle Werte stehen auch anderswo auf der Seite. Unter 900 px ein Zweierraster. */
.orbit {
  position: relative;
  width: min(1180px, 100% - 44px);
  margin: var(--space-section) auto 0;
  padding: clamp(56px, 8vw, 120px) 0;
  border-radius: var(--r-tile);
  background: var(--tile);
  overflow: hidden;
}

.orbit-copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  width: min(30rem, 100% - 44px);
  margin-inline: auto;
  text-align: center;
}

.orbit-copy p {
  text-wrap: balance;
  margin: 16px 0 28px;
  color: var(--text-strong);
  font-size: var(--t-statement);
  font-weight: 600;
  line-height: 1.25;
}

.orbit > .pill {
  position: absolute;
  top: 22px;
  right: 24px;
  z-index: 1;
}

.orbit-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin: 40px 22px 0;
  padding: 0;
  list-style: none;
}

.datacard {
  padding: 16px 18px 18px;
  border-radius: var(--r-card);
  background: var(--bg);
  box-shadow: var(--shadow-float);
}

.datacard-area {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: var(--t-small);
  font-weight: 600;
}

.datacard-num {
  margin-top: 6px;
  font-size: clamp(30px, 3.4vw, 44px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}

.datacard-num span {
  margin-left: 5px;
  color: var(--text-2);
  font-size: 0.42em;
  font-weight: 600;
  letter-spacing: 0;
}

.datacard-cap {
  margin-top: 4px;
  color: var(--text-2);
  font-size: var(--t-small);
  font-weight: 600;
}

/* Band und Kurve der HRV-Karte: Bild aus dem Stylesheet, damit das HTML klein bleibt (Farben = Erholung) */
.datacard-spark {
  height: 32px;
  margin-top: 10px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 32' preserveAspectRatio='none'%3E%3Crect y='9' width='120' height='14' rx='7' fill='%23cdf5f5'/%3E%3Cpath d='M2 18l12-4 12 6 12-9 12 5 12 3 12-8 12 6 12-5 12 2 10-3' fill='none' stroke='%23149695' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

.datacard-stages,
.datacard-bar {
  display: flex;
  gap: 2px;
  height: 8px;
  margin-top: 12px;
}

.datacard-stages i,
.datacard-bar i {
  flex: var(--w) 0 0;
  border-radius: 4px;
  background: var(--c);
}

.datacard-stages i:nth-child(1) { opacity: 1; }
.datacard-stages i:nth-child(2) { opacity: 0.6; }
.datacard-stages i:nth-child(3) { opacity: 0.35; }
.datacard-stages i:nth-child(4) { opacity: 0.18; }

.datacard-bar {
  border-radius: 4px;
  background: color-mix(in srgb, var(--c) 22%, white);
}

.datacard-bar i {
  flex: 0 0 calc(var(--w) * 1%);
}

/* Ab 900 px schweben die Karten um die Überschrift: leicht gedreht, versetzt, nie über dem Text */
@media (min-width: 900px) {
  .orbit {
    min-height: 720px;
    display: grid;
    align-items: center;
  }

  .orbit-cards {
    position: absolute;
    inset: 0;
    display: block;
    margin: 0;
  }

  .datacard {
    position: absolute;
    width: 218px;
    transform: rotate(var(--r, 0deg));
  }

  .datacard:nth-child(1) { left: 5%; top: 11%; --r: -4deg; }
  .datacard:nth-child(2) { right: 4.500%; top: 8%; --r: 3deg; width: 236px; }
  .datacard:nth-child(3) { left: 9%; bottom: 10%; --r: 3deg; width: 190px; }
  .datacard:nth-child(4) { right: 8%; bottom: 9%; --r: -3deg; }
  .datacard:nth-child(5) { left: 50%; bottom: 5%; --r: 1deg; width: 230px; margin-left: -115px; display: none; }
}

@media (min-width: 1180px) {
  .datacard:nth-child(5) { display: block; left: 50%; bottom: 5%; margin-left: -115px; }
  .orbit-copy { margin-top: -70px; }
}

/* Einmaliger Auftritt, sobald der Abschnitt ins Bild kommt: die Karten kommen gestaffelt an ihren Platz.
   Mit reduzierter Bewegung stehen sie einfach da. */
@media (prefers-reduced-motion: no-preference) {
  .js .orbit .datacard {
    opacity: 0;
    transform: rotate(var(--r, 0deg)) scale(0.94);
  }

  .js .orbit.in .datacard {
    opacity: 1;
    transform: rotate(var(--r, 0deg));
    transition: opacity var(--d-reveal) var(--ease-out), transform var(--d-reveal) var(--ease-out);
    transition-delay: calc(120ms + var(--i, 0) * 70ms);
  }

  .datacard:nth-child(2) { --i: 1; }
  .datacard:nth-child(3) { --i: 2; }
  .datacard:nth-child(4) { --i: 3; }
  .datacard:nth-child(5) { --i: 4; }
}

/* BoringWise – Website: charts. Tokens stehen in base.css. */

/* ── Großes Visual: Dein Bereich ────────────────────────────────────────── */
.range {
  margin-top: var(--space-section);
  padding: clamp(64px, 8vw, 120px) 0;
  background: var(--tile);
  text-align: center;
}

/* Karten wie die Kacheln: eine Fläche, kein Rahmen. Auf Weiß grau, auf Grau weiß. */
.rim {
  --card: var(--tile);
  border-radius: var(--r-tile);
}

.rim > * {
  height: 100%;
  border-radius: var(--r-tile);
  background: var(--card);
}

.range .rim {
  --card: var(--bg);
}

.range .rim > * {
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.18);
}

/* Der Pro-Plan trägt als einzige Karte einen Akzentring (Fläche, keine Linie) */
.rim-accent {
  padding: 6px;
  background: var(--accent);
}

.rim-accent > * {
  border-radius: var(--r-inset);
  background: var(--bg);
}

.pill {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 10px;
  border-radius: var(--r-pill);
  background: var(--tile);
  color: var(--text-2);
  font-size: var(--t-legal);
  font-weight: 600;
  letter-spacing: 0;
}

.pill-accent {
  background: var(--accent);
  color: var(--text);
}

.statcards {
  display: grid;
  gap: var(--gap);
  margin-top: clamp(40px, 6vw, 72px);
  text-align: left;
}

@media (min-width: 734px) {
  .statcards {
    grid-template-columns: repeat(3, 1fr);
  }
}

.statcard {
  position: relative;
  padding: 28px;
  overflow: hidden;
}

.figure-num {
  margin-top: 18px;
  font-size: clamp(3.5rem, 2rem + 5vw, 6rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.figure-unit {
  margin-top: 6px;
  font-size: var(--t-lead);
  font-weight: 600;
}

.statcard p:last-child {
  margin-top: 10px;
  color: var(--text-2);
  font-size: var(--t-small);
  line-height: 1.43;
}

/* ── Diagramme ──────────────────────────────────────────────────────────── */
.range .wrap:first-of-type {
  margin-top: clamp(32px, 5vw, 56px);
  text-align: left;
}

.chart-grid {
  display: grid;
  gap: var(--gap);
  margin-top: var(--gap);
}

@media (min-width: 834px) {
  .chart-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .chart-span {
    grid-column: 1 / -1;
  }
}

.chart {
  padding: 22px 22px 18px;
}

.chart figcaption {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.chart-title {
  font-size: var(--t-lead);
  font-weight: 600;
}

.chart-plot {
  cursor: crosshair;
  position: relative;
  margin-top: 14px;
  border-radius: var(--r-chip);
  touch-action: pan-y;
}

.chart-plot svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.chart-wide .chart-plot svg {
  max-height: 420px;
}

.chart-plot:focus-visible {
  border-radius: var(--r-chip);
}

.chart-note {
  text-wrap: pretty;
  margin-top: 12px;
  color: var(--text-2);
  font-size: var(--t-small);
  line-height: 1.43;
}

.c-grid {
  stroke: rgba(0, 0, 0, 0.08);
  stroke-width: 1;
}

.c-tick {
  fill: var(--text-2);
  font-family: var(--font);
  font-size: var(--t-small);
  font-variant-numeric: tabular-nums;
}

.c-label {
  fill: var(--text);
  font-family: var(--font);
  font-size: var(--t-small);
  font-weight: 600;
  paint-order: stroke;
  stroke: var(--card, var(--bg));
  stroke-width: 4px;
  stroke-linejoin: round;
}

.c-band {
  fill: var(--accent);
}

.c-mean {
  stroke: var(--text-3);
  stroke-width: 1;
}

.c-line {
  fill: none;
  stroke: var(--c);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Fläche läuft zur abgeschnittenen Achse hin aus (Verlauf steht im SVG) */

.c-dot,
.c-focus {
  fill: var(--c);
  stroke: var(--card, var(--bg));
  stroke-width: 2;
}

.c-bar,
.c-seg {
  fill: var(--c);
}

.c-bar-soft {
  fill-opacity: 0.45;
}

/* Breite Diagramme: eigene Fassung für schmale Bildschirme, damit die Schrift lesbar bleibt */
.chart-plot .c-narrow {
  display: none;
}

@media (max-width: 733px) {
  .chart-plot .c-wide {
    display: none;
  }

  .chart-plot .c-narrow {
    display: block;
  }
}

.c-bar {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transition: fill-opacity var(--d-fast) var(--ease);
}

.chart.is-active .c-bar {
  fill-opacity: 0.3;
}

.chart.is-active .c-bar.is-on {
  fill-opacity: 1;
}

.c-cross {
  stroke: var(--text-3);
  stroke-width: 1;
}

.c-cross,
.c-focus {
  opacity: 0;
}

.chart.is-active .c-cross,
.chart.is-active .c-focus {
  opacity: 1;
}

.chart-tip {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  display: grid;
  gap: 4px;
  min-width: 132px;
  padding: 10px 12px;
  border-radius: var(--r-chip);
  background: var(--tile-dark);
  color: var(--on-dark);
  font-size: var(--t-legal);
  line-height: 1.3;
  white-space: nowrap;
  box-shadow: var(--shadow-float);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--d-exit) var(--ease);
}

.chart.is-active .chart-tip {
  opacity: 1;
}

.chart-tip .tip-label {
  color: var(--on-dark-2);
}

.chart-tip .tip-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.chart-tip .tip-key {
  width: 12px;
  height: 2px;
  border-radius: 2px;
  background: var(--k, transparent);
}

.chart-tip .tip-value {
  min-width: 4.5em;
  font-size: var(--t-small);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.chart-tip .tip-name {
  margin-left: auto;
  color: var(--on-dark-2);
}

.chart-table {
  margin-top: 10px;
  font-size: var(--t-legal);
}

.chart-table summary {
  display: inline-flex;
  align-items: center;
  min-height: var(--h-tap);
  color: var(--link);
  cursor: pointer;
}

.chart-table table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.chart-table caption {
  padding: 6px 0;
  color: var(--text-2);
  text-align: left;
}

.chart-table th,
.chart-table td {
  padding: 5px 8px 5px 0;
  border-top: 1px solid var(--hairline);
  text-align: left;
}

/* Einmalige Animation, sobald die Karte ins Bild kommt (Zweck: Erklärung) */
.js .reveal .c-line {
  stroke-dasharray: var(--len, 3000);
  stroke-dashoffset: var(--len, 3000);
}

.js .reveal.in .c-line {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset var(--d-draw) var(--ease-out);
}

.js .reveal .c-band,
.js .reveal .c-area,
.js .reveal .c-dot,
.js .reveal .c-label {
  opacity: 0;
}

.js .reveal.in .c-band,
.js .reveal.in .c-area {
  opacity: 1;
  transition: opacity 500ms var(--ease-out) 100ms;
}

.js .reveal.in .c-dot,
.js .reveal.in .c-label {
  opacity: 1;
  transition: opacity var(--d-enter) var(--ease-out) 700ms;
}

.js .reveal .c-bar {
  transform: scaleY(0);
}

.js .reveal.in .c-bar {
  transform: none;
  transition: transform var(--d-reveal) var(--ease-out) calc(100ms + var(--i) * 18ms),
    fill-opacity var(--d-fast) var(--ease);
}

.js .reveal .c-wipe {
  clip-path: inset(0 100% 0 0);
}

.js .reveal.in .c-wipe {
  clip-path: inset(0 0 0 0);
  transition: clip-path var(--d-draw) var(--ease-out) 100ms;
}

.widget {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 22px;
}

.widget-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
}

.widget-num {
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.widget-num small {
  color: var(--text-2);
  font-size: var(--t-small);
  font-weight: 600;
  letter-spacing: 0;
}

.meters {
  display: grid;
  gap: 14px;
  font-size: var(--t-small);
}

.meters li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 12px;
  color: var(--text-2);
}

.meters b {
  font-variant-numeric: tabular-nums;
  color: var(--text);
  font-weight: 600;
}

.meters i {
  grid-column: 1 / -1;
  height: 8px;
  border-radius: var(--r-pill);
  background: linear-gradient(var(--accent), var(--accent)) 0 0 / calc(var(--v) * 1%) 100% no-repeat var(--tile);
}


/* Diagrammkarten im Raster schweben wie die HRV-Karte im Abschnitt #bereich: sie sind das, was man anfassen kann */
.chart-grid .rim > * {
  box-shadow: var(--shadow-float);
}

/* BoringWise – Website: Umschalter, Preise, FAQ, Textseiten. Tokens stehen in base.css. */

/* ── Umschalter ─────────────────────────────────────────────────────────── */
.seg {
  display: flex;
  width: max-content;
  max-width: 100%;
  margin: 0 auto clamp(28px, 4vw, 40px);
  padding: 4px;
  border-radius: var(--r-pill);
  background: var(--tile);
}

.seg button {
  min-height: var(--h-tap);
  padding: 0 22px;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--text-2);
  font: inherit;
  font-size: var(--t-small);
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--d-fast) var(--ease), color var(--d-fast) var(--ease);
}

@media (hover: hover) and (pointer: fine) {
  .seg button:hover {
    color: var(--text);
  }
}

@media (max-width: 380px) {
  .seg {
    width: 100%;
  }

  .seg button {
    flex: 1;
    padding: 0 8px;
  }
}

.seg button:active {
  transform: scale(0.97);
}

/* Ohne JavaScript färbt sich der gewählte Knopf selbst; mit JavaScript gleitet ein Indikator */
.seg:not(.has-indicator) button[aria-pressed="true"] {
  background: var(--accent);
}

.seg button[aria-pressed="true"] {
  color: var(--text);
}

.seg {
  position: relative;
  isolation: isolate;
}

.seg-indicator {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 0;
  z-index: -1;
  width: var(--w, 0);
  border-radius: var(--r-pill);
  background: var(--accent);
  transform: translateX(var(--x, 0));
  transition: transform var(--d-fast) var(--ease-out), width var(--d-fast) var(--ease-out);
}

/* ── Preise ─────────────────────────────────────────────────────────────── */
.plans {
  display: grid;
  gap: var(--gap);
  width: min(720px, 100%);
  margin: 0 auto;
}

@media (min-width: 734px) {
  .plans {
    grid-template-columns: repeat(2, 1fr);
  }
}

.plan {
  display: flex;
  flex-direction: column;
  padding: 28px;
}

.plan h3 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  min-height: 24px;
  font-size: var(--t-lead);
  font-weight: 600;
}

.plan-price {
  margin-top: 22px;
  font-size: clamp(2.5rem, 2rem + 1.8vw, 3.25rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.plan-price small {
  color: var(--text-2);
  font-size: var(--t-small);
  font-weight: 600;
  letter-spacing: 0;
}

.plan-note {
  min-height: 2.86em; /* zwei Zeilen: der Preiswechsel verschiebt den Knopf nicht */
  font-variant-numeric: tabular-nums;
  margin: 12px 0 28px;
  color: var(--text-2);
  font-size: var(--t-small);
  line-height: 1.43;
}

.plan .btn {
  margin-top: auto;
  min-height: var(--h-btn-md);
}

/* Ohne JavaScript stehen beide Preise untereinander */
[data-show],
.faq details {
  transition: opacity var(--d-fast) var(--ease-out), filter var(--d-fast) var(--ease-out), background-color var(--d-fast) var(--ease);
}

@starting-style {
  [data-show],
  .faq details {
    opacity: 0;
    filter: blur(2px);
  }
}

.js [data-billing="year"] [data-show="month"],
.js [data-billing="month"] [data-show="year"] {
  display: none;
}

.checks {
  display: grid;
  gap: 18px 32px;
  margin-top: clamp(40px, 5vw, 64px);
  font-size: var(--t-small);
  line-height: 1.43;
  color: var(--text-2);
}

@media (min-width: 734px) {
  .checks {
    grid-template-columns: repeat(3, 1fr);
  }
}

.checks li {
  position: relative;
  padding-left: 30px;
}

.checks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--accent)
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M5.5 10.4l3 3 6-6.4' fill='none' stroke='%231d1d1f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>")
    center / contain no-repeat;
}

.checks b {
  color: var(--text);
  font-weight: 600;
}

.plans-fine {
  width: min(var(--w-text), 100%);
  margin: 32px auto 0;
  color: var(--text-2);
  font-size: var(--t-small);
  text-align: center;
}

/* ── FAQ ────────────────────────────────────────────────────────────────── */
.faq {
  display: grid;
  gap: 8px;
}

.faq details {
  border-radius: var(--r-card);
  background: var(--tile);
}

.faq details[open] {
  background: var(--bg);
}

.js .faq[data-faq="zugang"] details:not([data-cat="zugang"]),
.js .faq[data-faq="abo"] details:not([data-cat="abo"]),
.js .faq[data-faq="daten"] details:not([data-cat="daten"]) {
  display: none;
}

.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  min-height: 60px;
  padding: 12px 16px 12px 22px;
  list-style: none;
  cursor: pointer;
  font-weight: 600;
  line-height: 1.24;
}

.faq summary:active {
  opacity: 0.7;
}

@media (hover: hover) and (pointer: fine) {
  .faq details:not([open]):hover {
    background: var(--hairline);
  }
}

.faq summary:focus-visible {
  border-radius: var(--r-card);
}

.faq details p {
  text-wrap: pretty;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "";
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(var(--text), var(--text)) center / 12px 2px no-repeat,
    linear-gradient(var(--text), var(--text)) center / 2px 12px no-repeat;
  transition: transform var(--d-fast) var(--ease), background-color var(--d-fast) var(--ease);
}

.faq details[open] summary::after {
  background-color: var(--accent);
  transform: rotate(45deg);
}

.faq details p {
  padding: 0 56px 22px 22px;
  color: var(--text-2);
}

/* ── Textseiten: Rechtliches und Hilfe ──────────────────────────────────── */
.page-head {
  padding-top: clamp(56px, 8vw, 104px);
}

.prose-layout {
  padding-top: clamp(48px, 7vw, 96px);
}

@media (min-width: 1024px) {
  .prose-layout.has-toc {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 64px;
    align-items: start;
  }

  .prose-toc {
    position: sticky;
    top: calc(var(--nav-h) + 24px);
    max-height: calc(100vh - var(--nav-h) - 48px);
    overflow-y: auto;
  }
}

.prose-toc {
  margin-bottom: 40px;
  padding: 20px 22px;
  border-radius: var(--r-card);
  background: var(--tile);
  font-size: var(--t-small);
  line-height: 1.35;
}

.prose-toc p {
  margin-bottom: 8px;
  font-weight: 600;
}

.prose-toc ol {
  display: grid;
}

.prose-toc a {
  display: flex;
  align-items: center;
  min-height: 36px;
  color: var(--text-2);
}

@media (hover: hover) and (pointer: fine) {
  .prose-toc a:hover {
    color: var(--text);
    text-decoration: none;
  }
}

.prose {
  max-width: 44rem;
  color: var(--text-strong);
}

.prose h1 {
  color: var(--text);
  font-size: var(--t-h2);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.012em;
}

.prose .meta {
  margin-top: 14px;
  color: var(--text-2);
  font-size: var(--t-small);
}

.prose h2 {
  margin-top: 2.4em;
  color: var(--text);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.17;
  letter-spacing: 0.009em;
  scroll-margin-top: calc(var(--nav-h) + 20px);
}

.prose h3 {
  margin-top: 1.8em;
  color: var(--text);
  font-size: var(--t-lead);
  font-weight: 600;
}

.prose p,
.prose ul,
.prose ol,
.prose .table-scroll {
  margin-top: 1em;
}

.prose ul,
.prose ol {
  padding-left: 1.3em;
}

.prose ul {
  list-style: disc;
}

.prose ol {
  list-style: decimal;
}

.prose li + li {
  margin-top: 0.5em;
}

.prose strong {
  color: var(--text);
  font-weight: 600;
}

.prose a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.prose code {
  padding: 2px 6px;
  border-radius: var(--r-focus);
  background: var(--tile);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em;
}

.table-scroll {
  overflow-x: auto;
  border: 1px solid var(--hairline);
  border-radius: var(--r-chip);
}

.prose table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: var(--t-small);
  line-height: 1.4;
}

.prose th,
.prose td {
  padding: 12px 14px;
  border-top: 1px solid var(--hairline);
  text-align: left;
  vertical-align: top;
}

.prose tr:first-child th {
  border-top: 0;
  background: var(--tile);
  color: var(--text);
  font-weight: 600;
}

@media print {
  .reveal,
  .reveal *,
  .hero-phones .phone {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    translate: none !important;
    animation: none !important;
  }

  .c-line {
    stroke-dashoffset: 0 !important;
  }

  .ribbon {
    display: none;
  }

  .localnav,
  .prose-toc,
  .island,
  .mailnote,
  .footer-links {
    display: none;
  }
}

/* Textseiten: Abstand zum Footer (auf der Startseite schließt das randlose Abschlussfoto direkt an) */
.prose-layout,
.page-head ~ .section:last-child,
.page-head:last-child {
  margin-bottom: var(--space-section);
}

/* Erklärblock im grauen Abschnitt #bereich: dieselbe Klappzeile wie in der FAQ, aber weiß auf Grau */
.explain {
  margin-top: var(--gap);
  text-align: left;
}

.explain details {
  background: var(--bg);
}

/* BoringWise – Website: motion. Tokens stehen in base.css. */

/* ── Einblenden ─────────────────────────────────────────────────────────── */
.js .reveal {
  opacity: 0;
  transform: translateY(12px);
}

.js .reveal.in {
  opacity: 1;
  transform: none;
  transition: opacity var(--d-reveal) var(--ease-out), transform var(--d-reveal) var(--ease-out);
}

/* Raster gestaffelt,
höchstens drei Stufen: nach 600 ms steht alles */
.js .tiles > .reveal:nth-child(2n).in,
.js .gallery > .reveal:nth-child(2).in,
.js .chart-grid > .reveal:nth-child(2).in,
.js .statcards > .reveal:nth-child(2).in,
.js .plans > .reveal:nth-child(2).in,
.js .offers > .reveal:nth-child(2).in {
  transition-delay: 50ms;
}

.js .statcards > .reveal:nth-child(3).in,
.js .offers > .reveal:nth-child(3).in {
  transition-delay: 100ms;
}

.js .hero-phones .phone {
  opacity: 0;
  transform: translateY(60px);
}

.js .hero-phones.in .phone {
  opacity: 1;
  transform: none;
  transition: opacity 600ms var(--ease-out), transform var(--d-draw) var(--ease-out);
}

.js .hero-phones.in .phone:nth-child(1) {
  transition-delay: 120ms;
}

.js .hero-phones.in .phone:nth-child(3) {
  transition-delay: 200ms;
}

/* Hero-Geräte: die äußeren wandern beim Scrollen leicht gegen das mittlere.
   Reine Scroll-Zeitleiste, ohne JavaScript; ohne Unterstützung stehen sie still. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero-phones.in .phone:nth-child(1),
    .hero-phones.in .phone:nth-child(3) {
      animation: phone-drift linear both;
      animation-timeline: view();
      animation-range: entry 20% exit 80%;
    }

    @keyframes phone-drift {
      from {
        translate: 0 36px;
      }
      to {
        translate: 0 -36px;
      }
    }
  }
}

/* ── Coach-Dialog: erst die Frage, dann die Antwort (Erklärung, einmalig) ── */
.js .reveal .bubble {
  opacity: 0;
  transform: translateY(8px);
}

.js .reveal.in .bubble {
  opacity: 1;
  transform: none;
  transition: opacity var(--d-enter) var(--ease-out), transform var(--d-enter) var(--ease-out);
}

.js .reveal.in .bubble:nth-child(2) {
  transition-delay: 300ms;
}

.js .reveal.in .bubble:nth-child(3) {
  transition-delay: 550ms;
}

.js .reveal.in .bubble:nth-child(4) {
  transition-delay: 900ms;
}

.js .reveal.in .bubble:nth-child(5) {
  transition-delay: 1150ms;
}

/* ── Kennzahlen: die Zahl steht vor dem Text ────────────────────────────── */
.js .reveal .figure-num {
  clip-path: inset(0 0 100% 0);
  transform: translateY(16px);
}

.js .reveal.in .figure-num {
  clip-path: inset(0 0 0 0);
  transform: none;
  transition: clip-path 500ms var(--ease-out) 100ms, transform 500ms var(--ease-out) 100ms;
}

/* ── Scroll-Zeitleisten: nur mit Unterstützung und ohne Bewegungsverzicht ── */
/* Der Textmarker-Strich der Kernphrase zieht sich einmal von links nach rechts, während der Abschnittskopf
   ins Bild kommt. Animiert wird nur die Breite des Hintergrunds, der Text selbst steht von Anfang an da.
   Ohne Scroll-Timelines oder mit reduzierter Bewegung bleibt der Strich einfach voll sichtbar. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .section-head .key {
      background-repeat: no-repeat;
      animation: key-wipe linear both;
      animation-timeline: view();
      animation-range: entry 40% cover 32%;
    }

    @keyframes key-wipe {
      from {
        background-size: 0% 100%;
      }

      to {
        background-size: 100% 100%;
      }
    }
  }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* Geräte fahren aus dem Anschnitt hoch */
    .tile-media .phone {
      animation: phone-rise linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 35%;
    }

    @keyframes phone-rise {
      from {
        translate: 0 48px;
      }
    }

    /* Breite Fotos: leichte Tiefe, das Bild ist dafür 8 % größer als sein Rahmen */
    .tile-photo-wide img {
      scale: 1.08;
      animation: photo-depth linear both;
      animation-timeline: view();
      animation-range: cover;
    }

    @keyframes photo-depth {
      from {
        translate: 0 -3%;
      }
      to {
        translate: 0 3%;
      }
    }

    /* HRV: ein Tipp legt den Ruhepuls darüber. Rückwärts scrollen blendet zurück. */
    .phone-over {
      animation: overlay-in linear both;
      animation-timeline: view();
      animation-range: cover 40% cover 60%;
    }

    @keyframes overlay-in {
      from {
        opacity: 0;
      }
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .js .reveal,
  .js .hero-phones .phone {
    transform: none;
  }

  .js .reveal .bubble,
  .js .reveal .figure-num {
    transform: none;
    clip-path: none;
  }

  .js .reveal.in .bubble,
  .js .reveal.in .bubble:nth-child(n) {
    transition: opacity var(--d-fast) ease;
    transition-delay: 0ms;
  }

  .js .tiles > .reveal:nth-child(n).in,
  .js .chart-grid > .reveal:nth-child(n).in,
  .js .statcards > .reveal:nth-child(n).in,
  .js .plans > .reveal:nth-child(n).in,
  .js .offers > .reveal:nth-child(n).in,
  .js .gallery > .reveal:nth-child(n).in,
  .js .hero-phones.in .phone:nth-child(n) {
    transition-delay: 0ms;
  }

  .faq summary::after,
  .localnav-menu summary::after,
  .chart-tip {
    transition: none;
  }

  .js .reveal.in,
  .js .hero-phones.in .phone {
    transition: opacity var(--d-fast) ease;
    transition-delay: 0ms;
  }

  .manifesto-text .w {
    color: var(--text);
    transition: none;
  }

  .localnav-panel {
    transition: none;
  }

  .seg-indicator,
  .link-more::after,
  [data-show],
  .faq details {
    transition: none;
  }

  .btn,
  .mailnote,
  .island,
  .gallery-nav button,
  .seg button {
    transition: none;
  }

  .js .reveal .stages,
  .js .reveal .datatype-bar::before {
    transform: none;
    transition: none;
  }

  .js .hero-photo img {
    animation: none;
  }

  .js .reveal .heart {
    transform: none;
  }

  .js .reveal .c-line {
    stroke-dashoffset: 0;
  }

  .js .reveal .c-band,
  .js .reveal .c-area,
  .js .reveal .c-dot,
  .js .reveal .c-label {
    opacity: 1;
  }

  .js .reveal .c-bar {
    transform: none;
  }

  .js .reveal .c-wipe {
    clip-path: none;
  }

  .js .reveal.in .c-line,
  .js .reveal.in .c-bar,
  .js .reveal.in .c-wipe {
    transition: none;
  }
}