/* ==========================================================================
   CoreLabs Promoseite, Designsystem
   Farben, Verlaeufe, Radien und Schatten stammen aus dem Brandguide 2026
   sowie der base.css der bestehenden CoreLabs Seite. Bewusst ohne Tailwind
   CDN und ohne fremde Bibliotheken, damit beim Seitenaufruf keine Verbindung
   zu Dritten aufgebaut wird und kein Einwilligungsbanner noetig ist.
   ========================================================================== */

@import url('/assets/fonts/fonts.css');

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Marke */
  --teal-light: #58bcaf;
  --teal: #35d1bb;
  --teal-deep: #00737e;

  --plum-light: #b15ab0;
  --plum: #934492;
  --plum-mid: #944493;
  --plum-deep: #581081;
  --plum-night: #29072c;
  --plum-grad-end: #27102b;

  /* Flaechen */
  --cream: #faf8f5;
  --paper: #f5f2ec;
  --surface: #ffffff;
  --surface-2: #f3eef0;

  /* Text und Linien */
  --ink: #1b0a1d;
  --ink-soft: #3a1f3d;
  --line: rgba(27, 10, 29, 0.08);
  --line-strong: rgba(27, 10, 29, 0.16);

  /* Status */
  --ok: #22c55e;
  --warn: #f59e0b;
  --alert: #ef4444;

  /* Verlaeufe, laut Brandguide nicht mischen */
  --grad-plum: linear-gradient(135deg, #944493 0%, #27102b 100%);
  --grad-plum-text: linear-gradient(90deg, #b15ab0 0%, #581081 60%, #29072c 100%);
  --grad-mint-dark: linear-gradient(135deg, #58bcaf 0%, #27102b 100%);
  --grad-mint-text: linear-gradient(90deg, #58bcaf 0%, #00737e 100%);

  /* Schriften */
  --font-sans: 'Outfit', 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-display: 'Instrument Serif', Georgia, serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, monospace;

  /* Radien */
  --r-sm: 0.75rem;
  --r-md: 1.25rem;
  --r-lg: 2rem;
  --r-xl: 2.5rem;
  --r-pill: 999px;

  /* Schatten, immer in Plum Night statt neutralem Schwarz */
  --shadow-sm: 0 2px 8px rgba(41, 7, 44, 0.06);
  --shadow-md: 0 12px 40px rgba(41, 7, 44, 0.08);
  --shadow-lg: 0 30px 80px rgba(41, 7, 44, 0.12);

  /* Raster */
  --container: 1200px;
  --container-px: 1.25rem;

  --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-pop: cubic-bezier(0.34, 1.3, 0.4, 1);
}

@media (min-width: 768px) {
  :root { --container-px: 2rem; }
}

/* --------------------------------------------------------------------------
   2. Reset und Grundlagen
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

/* Sprungabstaende, nachgemessen.
   Wichtig: scroll-padding am Wurzelelement und scroll-margin am Ziel addieren
   sich. Mit 6.5rem hier und 7rem dort kamen 216 Pixel zusammen, dazu der
   Innenabstand des Abschnitts von 120 Pixeln. Die Ueberschrift stand dadurch
   254 Pixel unter der Leiste, also erst im zweiten Drittel des Bildschirms.
   Abschnitte bringen ihren Innenabstand selbst mit und brauchen daher fast
   keinen zusaetzlichen. Der Anmeldeblock hat keinen und braucht den vollen. */
section[id] { scroll-margin-top: 0.5rem; }
#main { scroll-margin-top: 7rem; }

/* Der Anmeldeblock steht in der einspaltigen Ansicht unter der Titelzeile und
   braucht dort einen echten Sprung. In der zweispaltigen Ansicht steht er
   dagegen ganz oben und ist vom Seitenanfang aus vollstaendig sichtbar.
   Nachgemessen lag er beim Laden 134 Pixel unter der Leiste, nach einem Sprung
   nur noch 30. Derselbe Bereich sah also je nach Weg unterschiedlich aus. Ein
   Sprungabstand groesser als der Abstand zum Seitenanfang laesst den Browser
   dorthin scrollen, damit bleibt die Ansicht in beiden Faellen gleich. */
#signup-top { scroll-margin-top: 7rem; }
@media (min-width: 1024px) {
  #signup-top { scroll-margin-top: 100vh; }
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.6;
  letter-spacing: -0.01em;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Feines Rauschen ueber der gesamten Seite. Ohne diese Schicht wirken die
   Verlaeufe flach, sie ist Bestandteil des Markenbildes. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.04;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }
p { margin: 0; }

h1, h2, h3, h4, h5 {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.05;
}

::selection { background: var(--plum-light); color: #fff; }

:focus-visible {
  outline: 3px solid var(--plum-deep);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10000;
  padding: 0.9rem 1.4rem;
  background: var(--ink);
  color: var(--cream);
  border-radius: 0 0 var(--r-sm) 0;
}
.skip-link:focus { left: 0; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

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

.section { position: relative; padding: 6rem 0; }
@media (max-width: 768px) { .section { padding: 4rem 0; } }

.section--paper { background: var(--paper); }
.section--before-footer { padding-bottom: 8rem; }
@media (min-width: 768px) { .section--before-footer { padding-bottom: 10rem; } }

/* Reihenfolge beachten: die Regel fuer das breitere Fenster muss hinter der
   fuer das schmalere stehen, sonst gewinnt bei gleicher Gewichtung die
   zuletzt notierte und die Spalten bleiben zu zweit. */
.grid { display: grid; gap: 1.5rem; }
@media (min-width: 640px)  { .grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 640px)  { .grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  { .grid--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 640px)  { .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .grid--4 { grid-template-columns: repeat(4, 1fr); } }

/* --------------------------------------------------------------------------
   4. Typografie
   -------------------------------------------------------------------------- */
.serif {
  font-family: var(--font-display);
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.02em;
  line-height: 0.98;
}

.text-plum {
  background: var(--grad-plum-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.text-mint {
  background: var(--grad-mint-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Die Titelzeile steht neben dem Anmeldeblock und hat deshalb nur die halbe
   Breite zur Verfuegung. Ab der zweispaltigen Ansicht faellt sie kleiner aus,
   damit "Deine Blutwerte." auf einer Zeile bleibt. */
.h1 {
  font-size: clamp(2.6rem, 8vw, 4.4rem);
  line-height: 1.03;
  letter-spacing: -0.035em;
}
@media (min-width: 1024px) {
  .h1 { font-size: clamp(3.4rem, 4.2vw, 4.6rem); }
}

.h2 {
  font-size: clamp(2.1rem, 5vw, 3.6rem);
  line-height: 1.03;
  letter-spacing: -0.03em;
}

.h3 { font-size: 1.25rem; letter-spacing: -0.025em; }
.h4 { font-size: 1.05rem; letter-spacing: -0.02em; }

.lead {
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  line-height: 1.62;
  color: rgba(27, 10, 29, 0.68);
}

.body-sm { font-size: 0.9rem; line-height: 1.6; color: rgba(27, 10, 29, 0.66); }
.muted { color: rgba(27, 10, 29, 0.6); }
.balance { text-wrap: balance; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.9rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.72);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.eyebrow .dot {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--plum);
  box-shadow: 0 0 0 4px rgba(147, 68, 146, 0.18);
  animation: pulse 2.4s ease-in-out infinite;
}

.eyebrow--light {
  border-color: rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.82);
}
.eyebrow--light .dot {
  background: var(--teal);
  box-shadow: 0 0 0 4px rgba(53, 209, 187, 0.2);
}

/* Kopfbereich einer Sektion, zweizeilig: Serifenzeile mit Verlauf */
.sec-head { margin-bottom: 3.25rem; }
.sec-head .eyebrow { margin-bottom: 1.5rem; }
.sec-head .lead { margin-top: 1.25rem; max-width: 46ch; }

.sec-head--split {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
@media (min-width: 1024px) {
  .sec-head--split { flex-direction: row; align-items: flex-end; justify-content: space-between; }
  /* 32ch stauchte den Text auf vier schmale Zeilen. Breiter gesetzt laeuft er
     in drei und steht ruhiger neben der Ueberschrift. */
  .sec-head--split .lead { margin-top: 0; max-width: 46ch; flex-shrink: 0; }
}

.sec-head--center { text-align: center; max-width: 44rem; margin-inline: auto; }
.sec-head--center .lead { margin-inline: auto; }

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.95rem 1.6rem;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  isolation: isolate;
  --bx: 50%;
  --by: 50%;
  transition:
    transform 0.45s var(--ease-pop),
    box-shadow 0.5s ease,
    color 0.35s ease,
    background 0.4s ease,
    border-color 0.35s ease;
}

.btn::before {
  content: '';
  position: absolute;
  left: var(--bx);
  top: var(--by);
  width: 280%;
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%) scale(0);
  border-radius: var(--r-pill);
  opacity: 0;
  z-index: 0;
  pointer-events: none;
  transition:
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.35s ease,
    left 0.25s ease,
    top 0.25s ease;
}

.btn > span, .btn svg { position: relative; z-index: 1; }
.btn:hover { transform: translateY(-3px); }
.btn:hover::before { transform: translate(-50%, -50%) scale(1); opacity: 1; }
.btn:active { transform: translateY(-1px) scale(0.98); }

.btn--plum {
  background: var(--grad-plum);
  color: #fff;
  box-shadow: 0 14px 32px -10px rgba(88, 16, 129, 0.45);
}
.btn--plum::before { background: radial-gradient(circle, #c373c2 0%, #944493 35%, transparent 70%); }
.btn--plum:hover { box-shadow: 0 24px 44px -10px rgba(88, 16, 129, 0.6); }

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-strong);
}
.btn--ghost::before { background: radial-gradient(circle, #2c1430 0%, var(--ink) 50%, transparent 75%); }
.btn--ghost:hover { color: #fff; border-color: transparent; }

.btn--light {
  background: #fff;
  color: var(--ink);
  box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.25);
}
.btn--light::before { background: radial-gradient(circle, #fbe9fa 0%, #f5dcf5 35%, transparent 70%); }

.btn--sm { padding: 0.65rem 1.2rem; font-size: 0.875rem; }
.btn--block { width: 100%; }

.btn[disabled], .btn[aria-disabled='true'] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.btn[disabled]::before, .btn[aria-disabled='true']::before { opacity: 0; }

.link-underline { position: relative; display: inline-block; transition: color 0.25s ease; }
.link-underline::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s var(--ease);
}
.link-underline:hover::after { transform: scaleX(1); transform-origin: left; }

/* --------------------------------------------------------------------------
   6. Karten und Chips
   -------------------------------------------------------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: 1.75rem;
}

.card--lift { transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease); }
.card--lift:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }

.icon-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: 1.25rem;
  border-radius: 1rem;
  background: var(--grad-plum);
  color: #fff;
  flex-shrink: 0;
}
.icon-tile svg { width: 1.25rem; height: 1.25rem; }

.icon-tile--soft { background: var(--paper); color: var(--plum-deep); }
.icon-tile--mint { background: var(--grad-mint-dark); color: #fff; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.8rem;
  border-radius: var(--r-pill);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.2;
  background: rgba(88, 16, 129, 0.08);
  color: var(--plum-deep);
  border: 1px solid rgba(88, 16, 129, 0.18);
}
.chip--mint {
  background: rgba(53, 209, 187, 0.16);
  color: var(--teal-deep);
  border-color: rgba(0, 115, 126, 0.2);
}
.chip--solid { background: var(--grad-plum); color: #fff; border-color: transparent; }

.check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: var(--r-pill);
  background: var(--grad-plum);
  color: #fff;
  flex-shrink: 0;
  margin-top: 0.18rem;
}
.check svg { width: 0.7rem; height: 0.7rem; }

.list-check { display: flex; flex-direction: column; gap: 0.85rem; }
.list-check li { display: flex; gap: 0.75rem; align-items: flex-start; font-size: 0.95rem; line-height: 1.55; }

/* --------------------------------------------------------------------------
   7. Aurora Orbs und Hero
   -------------------------------------------------------------------------- */
.aurora-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
  will-change: transform;
  /* Der Zeigerversatz kommt aus dem Skript und wird auf die Schwebebewegung
     aufgeschlagen, statt sie zu ersetzen. */
  --mx: 0px;
  --my: 0px;
  translate: var(--mx) var(--my);
  transition: translate 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  animation: orb-drift 18s ease-in-out infinite alternate;
}
.aurora-orb:nth-of-type(2n) { animation: orb-drift-alt 22s ease-in-out infinite alternate; }
.aurora-orb:nth-of-type(3n) { animation: orb-drift-slow 26s ease-in-out infinite alternate; }

.hero {
  position: relative;
  overflow: hidden;
  /* Luft unter der schwebenden Leiste, unten dafuer weniger, damit der
     Abschnitt nicht insgesamt hoeher wird. Gemessen bleiben ueber dem
     Anmeldeblock rund 100 Pixel bis zur Unterkante der Leiste. */
  padding: 9.5rem 0 3.5rem;
  background:
    radial-gradient(60% 60% at 80% 25%, rgba(177, 90, 176, 0.3), transparent 70%),
    radial-gradient(45% 45% at 15% 85%, rgba(88, 16, 129, 0.28), transparent 70%),
    linear-gradient(180deg, #fdfcf9 0%, #f3e9f1 60%, #ecd9eb 100%);
}
@media (min-width: 768px) { .hero { padding: 11.5rem 0 4rem; } }

.hero__inner { position: relative; z-index: 1; }
.hero__grid { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 1024px) { .hero__grid { grid-template-columns: 1.05fr 0.95fr; gap: 4rem; } }

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}

.hero__proof {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 2rem;
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
}
.hero__proof-item { display: flex; align-items: center; gap: 0.6rem; font-size: 0.875rem; color: var(--ink-soft); }
.hero__proof-item svg { width: 1.05rem; height: 1.05rem; color: var(--plum-deep); flex-shrink: 0; }

/* --------------------------------------------------------------------------
   8. Anmeldeformular
   -------------------------------------------------------------------------- */
.signup {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-xl);
  padding: 2rem;
  background: var(--grad-plum);
  color: #fff;
  box-shadow: 0 30px 70px -20px rgba(88, 16, 129, 0.5);
}
@media (min-width: 768px) { .signup { padding: 2.5rem; } }

.signup__inner { position: relative; z-index: 1; }
.signup h2, .signup h3 { color: #fff; }
.signup .lead { color: rgba(255, 255, 255, 0.75); }

.field { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 0.9rem; }
.field label { font-size: 0.8rem; font-weight: 500; color: rgba(255, 255, 255, 0.8); }
.field .optional { font-weight: 400; color: rgba(255, 255, 255, 0.55); }

.field input[type='email'],
.field input[type='text'] {
  width: 100%;
  padding: 0.9rem 1.1rem;
  border-radius: var(--r-md);
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font: inherit;
  font-size: 1rem;
  transition: border-color 0.25s ease, background 0.25s ease;
}
.field input::placeholder { color: rgba(255, 255, 255, 0.45); }
.field input:focus {
  outline: none;
  border-color: var(--teal);
  background: rgba(255, 255, 255, 0.16);
}
.field input[aria-invalid='true'] { border-color: #ffb4b4; }

/* Honigtopf. Fuer Menschen unsichtbar, Bots fuellen ihn aus. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.consent {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  margin: 1.1rem 0 1.4rem;
  font-size: 0.8rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.75);
}
.consent input[type='checkbox'] {
  width: 1.15rem;
  height: 1.15rem;
  margin: 0.1rem 0 0;
  accent-color: var(--teal);
  flex-shrink: 0;
  cursor: pointer;
}
.consent a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }

.form-note {
  margin-top: 1rem;
  font-size: 0.75rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.55);
}

.form-msg {
  display: none;
  margin-top: 1rem;
  padding: 0.9rem 1.1rem;
  border-radius: var(--r-md);
  font-size: 0.875rem;
  line-height: 1.55;
}
.form-msg.is-visible { display: block; }
.form-msg--ok {
  background: rgba(53, 209, 187, 0.18);
  border: 1px solid rgba(53, 209, 187, 0.4);
  color: #eafffb;
}
.form-msg--err {
  background: rgba(239, 68, 68, 0.16);
  border: 1px solid rgba(255, 180, 180, 0.45);
  color: #ffe9e9;
}
.form-msg a { color: inherit; text-decoration: underline; }

/* --------------------------------------------------------------------------
   9. Ablauf, Marker, Ampel
   -------------------------------------------------------------------------- */
.step { position: relative; }
.step__num {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 3.6rem;
  line-height: 1;
  margin-bottom: 0.6rem;
  background: var(--grad-plum-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.marker-item {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: #fff;
  overflow: hidden;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.marker-item:hover { border-color: rgba(88, 16, 129, 0.25); }
.marker-item[open] {
  border-color: rgba(88, 16, 129, 0.35);
  box-shadow: 0 8px 24px -12px rgba(88, 16, 129, 0.25);
}

.marker-item summary,
.faq-item summary {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1.1rem 1.2rem;
  cursor: pointer;
  list-style: none;
  font-weight: 500;
}
.marker-item summary::-webkit-details-marker,
.faq-item summary::-webkit-details-marker { display: none; }

.acc-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  margin-left: auto;
  border-radius: var(--r-pill);
  background: var(--paper);
  color: var(--ink-soft);
  flex-shrink: 0;
  transition: transform 0.35s ease, background 0.35s ease, color 0.35s ease;
}
.acc-icon svg { width: 0.9rem; height: 0.9rem; }
details[open] > summary .acc-icon {
  transform: rotate(45deg);
  background: var(--grad-plum);
  color: #fff;
}

.acc-body {
  padding: 0 1.2rem 1.25rem;
  font-size: 0.92rem;
  line-height: 1.65;
  color: rgba(27, 10, 29, 0.7);
}
.acc-body p + p { margin-top: 0.8rem; }

.faq-item {
  border-bottom: 1px solid var(--line);
  background: transparent;
}
.faq-item summary { padding: 1.35rem 0.25rem; font-size: 1.02rem; letter-spacing: -0.02em; }
.faq-item .acc-body { padding: 0 3.2rem 1.5rem 0.25rem; }

.faq-group + .faq-group { margin-top: 3rem; }
.faq-group__title {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 0.5rem;
  padding-bottom: 0.9rem;
  border-bottom: 2px solid var(--line-strong);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.35rem;
  color: var(--plum-deep);
}

/* Wertedarstellung mit Ampel.
   Der Farbverlauf zeigt den Zielbereich aus Leitlinien, die gestrichelten
   Linien markieren die Grenzen des Referenzbereichs des Labors. */
.band-wrap { padding: 2rem 0 0.5rem; }

.band {
  position: relative;
  height: 10px;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg,
    var(--alert) 0%, var(--warn) 16%, var(--ok) 32%,
    var(--ok) 62%, var(--warn) 80%, var(--alert) 100%);
}

/* Gestrichelte Grenze des Referenzbereichs des Labors */
.band__limit {
  position: absolute;
  top: -13px;
  bottom: -13px;
  width: 0;
  border-left: 2px dashed var(--ink);
  opacity: 0.55;
  transform: translateX(-1px);
}

.band-dot {
  position: absolute;
  top: 50%;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: #fff;
  border: 5px solid var(--plum-deep);
  transform: translate(-50%, -50%);
  box-shadow: 0 4px 14px rgba(88, 16, 129, 0.35);
  z-index: 2;
}

.band-scale {
  display: flex;
  justify-content: space-between;
  margin-top: 1.5rem;
  font-size: 0.75rem;
  color: rgba(27, 10, 29, 0.5);
}

.legend { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.5rem; }
.legend-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.75rem;
  border-radius: var(--r-pill);
  background: rgba(27, 10, 29, 0.05);
  font-size: 0.78rem;
  font-weight: 500;
}
.legend-chip .swatch { width: 10px; height: 10px; border-radius: var(--r-pill); flex-shrink: 0; }
.legend-chip .swatch--dashed {
  width: 14px; height: 0;
  border-radius: 0;
  border-top: 2px dashed var(--ink);
  opacity: 0.6;
}

/* --------------------------------------------------------------------------
   10. Navigation
   -------------------------------------------------------------------------- */
.nav { position: fixed; top: 1rem; inset-inline: 0; z-index: 100; }

.nav__pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 0.85rem 0.6rem 1.25rem;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--line);
  box-shadow: 0 4px 20px -8px rgba(41, 7, 44, 0.18);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  transition: box-shadow 0.4s ease;
}
.nav.is-scrolled .nav__pill { box-shadow: 0 18px 50px -22px rgba(41, 7, 44, 0.35); }

.nav__logo img { height: 2rem; width: auto; }
@media (min-width: 768px) { .nav__logo img { height: 2.25rem; } }

.nav__links { display: none; align-items: center; gap: 2rem; font-size: 0.9rem; }
@media (min-width: 1024px) { .nav__links { display: flex; } }
.nav__links a { color: rgba(27, 10, 29, 0.75); }
.nav__links a:hover { color: var(--ink); }

.nav__actions { display: flex; align-items: center; gap: 0.5rem; }
.nav__cta { display: none; }
@media (min-width: 640px) { .nav__cta { display: inline-flex; } }

.nav__burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem; height: 2.5rem;
  border-radius: var(--r-pill);
  background: #fff;
  border: 1px solid var(--line-strong);
}
@media (min-width: 1024px) { .nav__burger { display: none; } }
.nav__burger svg { width: 1.15rem; height: 1.15rem; }

.nav__mobile { display: none; margin-top: 0.75rem; }
.nav__mobile.is-open { display: block; }
@media (min-width: 1024px) { .nav__mobile, .nav__mobile.is-open { display: none; } }
.nav__mobile .card { display: flex; flex-direction: column; gap: 1rem; padding: 1.4rem; }
.nav__mobile a:not(.btn) { font-size: 1rem; font-weight: 500; }

/* --------------------------------------------------------------------------
   12. Rechtsseiten
   -------------------------------------------------------------------------- */
.legal { padding: 9rem 0 5rem; }
/* Volle Inhaltsbreite wie auf der Startseite. Mit 48rem stand der Text
   deutlich schmaler als die Leiste darueber und wirkte gestaucht. */
.legal__inner {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--container-px);
}
.legal h1 { font-size: clamp(2.2rem, 5vw, 3rem); margin-bottom: 0.75rem; }
.legal h2 {
  font-size: 1.35rem;
  margin: 2.75rem 0 0.9rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--line);
}
.legal h3 { font-size: 1.05rem; margin: 1.75rem 0 0.6rem; }
.legal p, .legal li { font-size: 0.98rem; line-height: 1.75; color: var(--ink-soft); }
.legal p + p { margin-top: 1rem; }
.legal ul { list-style: disc; padding-left: 1.35rem; margin: 1rem 0; display: flex; flex-direction: column; gap: 0.5rem; }
/* Schaltflaechen sind ausgenommen, sonst faerbt diese Regel ihre Beschriftung
   um und unterstreicht sie. Dieselbe Falle wie bei .footer a. */
.legal a:not(.btn) { color: var(--plum-deep); text-decoration: underline; text-underline-offset: 2px; }
.legal .stand { font-size: 0.85rem; color: rgba(27, 10, 29, 0.5); margin-bottom: 2.5rem; }
.legal address { font-style: normal; line-height: 1.75; color: var(--ink-soft); }

/* --------------------------------------------------------------------------
   13. Bewegung
   -------------------------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(24px); }
.reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.55; transform: scale(1.25); }
}

@keyframes orb-drift {
  0%   { transform: translate(0, 0) scale(1); }
  25%  { transform: translate(80px, -50px) scale(1.18); }
  50%  { transform: translate(120px, 60px) scale(1.05); }
  75%  { transform: translate(-40px, 90px) scale(0.92); }
  100% { transform: translate(-90px, -40px) scale(1.12); }
}

@keyframes orb-drift-alt {
  0%   { transform: translate(0, 0) scale(1); }
  30%  { transform: translate(-110px, 70px) scale(1.2); }
  60%  { transform: translate(60px, -90px) scale(0.88); }
  100% { transform: translate(90px, 50px) scale(1.1); }
}

@keyframes orb-drift-slow {
  0%   { transform: translate(0, 0) scale(0.95); }
  35%  { transform: translate(70px, 100px) scale(1.15); }
  70%  { transform: translate(-80px, -50px) scale(1.08); }
  100% { transform: translate(40px, -90px) scale(1); }
}

@keyframes spin { to { transform: rotate(360deg); } }

.spinner {
  display: inline-block;
  width: 1rem; height: 1rem;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

/* Wer im Betriebssystem weniger Bewegung eingestellt hat, bekommt sie nicht. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .aurora-orb { animation: none; }
}

/* --------------------------------------------------------------------------
   14. Hilfsklassen
   -------------------------------------------------------------------------- */
.stack { display: flex; flex-direction: column; }
.gap-sm { gap: 0.5rem; }
.gap-md { gap: 1rem; }
.gap-lg { gap: 1.5rem; }
.row { display: flex; flex-wrap: wrap; align-items: center; }
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }
.mt-6 { margin-top: 3rem; }
.text-center { text-align: center; }
.relative { position: relative; z-index: 1; }

/* ==========================================================================
   15. Erweiterungen aus der Ueberarbeitung
   ========================================================================== */

/* --- Handlungsaufforderung unter einem Abschnitt --- */
.cta-row {
  display: flex;
  justify-content: center;
  margin-top: 3rem;
}

/* --- Formular: zwei Felder nebeneinander, Ueberschrift ueber den Feldern --- */
.form-legend {
  margin: 0 0 0.9rem;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

.field-row { display: grid; gap: 0 0.75rem; }
@media (min-width: 420px) { .field-row { grid-template-columns: 1fr 1fr; } }

/* --- Ablaufschritte --- */
.step__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.step__num {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 2.6rem;
  line-height: 1;
  background: var(--grad-plum-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.step__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--r-sm);
  flex-shrink: 0;
}
.step__icon svg { width: 1.2rem; height: 1.2rem; }
.step__icon--plum  { background: rgba(88, 16, 129, 0.1);  color: var(--plum-deep); }
.step__icon--mint  { background: rgba(0, 115, 126, 0.12); color: var(--teal-deep); }
.step__icon--amber { background: rgba(245, 158, 11, 0.16); color: #b45309; }
.step__icon--red   { background: rgba(239, 68, 68, 0.13); color: #b91c1c; }

/* --- Farbige Kacheln --- */
.icon-tile--sun   { background: linear-gradient(135deg, #fde6cf 0%, #f8c98a 100%); color: #b45309; }
.icon-tile--amber { background: linear-gradient(135deg, #fef3c7 0%, #fbbf24 100%); color: #92400e; }
.icon-tile--red   { background: linear-gradient(135deg, #fde2e2 0%, #fca5a5 100%); color: #b91c1c; }

/* --- Karte mit Kachel neben dem Text --- */
.feature { display: flex; gap: 1.15rem; align-items: flex-start; }
.feature .icon-tile { margin-bottom: 0; }

/* --- Markerliste --- */
.marker-item summary { gap: 0.8rem; }
.marker-name { flex: 1; }

.marker-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 0.7rem;
  flex-shrink: 0;
}
.marker-icon svg { width: 1.05rem; height: 1.05rem; }
.marker-icon--plum  { background: rgba(88, 16, 129, 0.1);   color: var(--plum-deep); }
.marker-icon--mint  { background: rgba(0, 115, 126, 0.12);  color: var(--teal-deep); }
.marker-icon--amber { background: rgba(245, 158, 11, 0.18); color: #b45309; }
.marker-icon--red   { background: rgba(239, 68, 68, 0.13);  color: #b91c1c; }

.marker-item--sm summary { padding: 0.8rem 1rem; font-size: 0.92rem; }
.marker-item--sm .acc-body { padding: 0 1rem 1rem; font-size: 0.86rem; }

/* In den Erweiterungen faellt das Symbol kleiner aus. Acht Eintraege in voller
   Groesse machten die mitlaufende Spalte so hoch, dass sie ihr Mitlaufen
   verliert, siehe die Hoehenpruefung in assets/js/main.js. */
.marker-item--sm .marker-icon { width: 1.8rem; height: 1.8rem; border-radius: 0.6rem; }
.marker-item--sm .marker-icon svg { width: 0.95rem; height: 0.95rem; }

.acc-range {
  margin-top: 0.7rem;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--plum-deep);
}

/* --- Werteraster mit mitlaufender Seitenspalte --- */
.werte-grid { display: grid; gap: 1.5rem; align-items: start; }
@media (min-width: 1024px) {
  .werte-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
}

.is-sticky { position: static; }
@media (min-width: 1024px) {
  .is-sticky { position: sticky; top: 6.5rem; }
  /* Ist die Spalte hoeher als das Fenster, schaltet das Skript das Kleben ab. */
  .is-sticky[data-sticky-off] { position: static; }
}

/* --- Zielgruppen mit Bild --- */
.persona {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  isolation: isolate;
  min-height: 24rem;
}

.persona img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  transition: transform 0.7s var(--ease);
}
.persona:hover img { transform: scale(1.05); }

.persona::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(41, 7, 44, 0.15) 20%, rgba(13, 10, 16, 0.92) 100%);
}

.persona__body {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  min-height: 24rem;
  padding: 1.75rem;
  color: #fff;
}
.persona__body h3 { color: #fff; margin-bottom: 0.5rem; }
.persona__body p { font-size: 0.92rem; line-height: 1.6; color: rgba(255, 255, 255, 0.82); }

/* --- Reiter im Fragenbereich --- */

/* Die Leiste bleibt einreihig. Unterhalb der Desktopbreite laesst sie sich
   seitlich schieben, darueber steht sie mittig und passt vollstaendig hinein.
   safe center faellt bei Ueberlauf auf den linken Rand zurueck, sonst waere
   der erste Reiter nicht mehr erreichbar. */
.tabs__nav {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.5rem;
  justify-content: flex-start;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* Das seitliche Schieben beschneidet auch oben und unten. Ohne diese
     Polsterung schnitte der Fokusrahmen der Reiter ab, ebenso ihr Schatten. */
  padding-block: 0.75rem;
  margin-bottom: 1.25rem;
}
.tabs__nav::-webkit-scrollbar { display: none; }
@media (min-width: 1024px) {
  .tabs__nav {
    justify-content: center;
    justify-content: safe center;
  }
}

.tabs__btn {
  flex: 0 0 auto;
  white-space: nowrap;
  padding: 0.55rem 1.05rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-strong);
  background: #fff;
  color: var(--ink-soft);
  font-size: 0.875rem;
  font-weight: 500;
  transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.tabs__btn:hover { border-color: var(--ink); color: var(--ink); }
.tabs__btn.is-active {
  background: var(--grad-plum);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 10px 24px -12px rgba(88, 16, 129, 0.5);
}

/* Die Lesebreite sitzt jetzt am Panel, damit die Reiterleiste den vollen
   Seitenrahmen nutzen kann und einreihig bleibt. */
.tabs__panel { animation: fade-in 0.35s var(--ease); max-width: 56rem; margin-inline: auto; }
.tabs__panel[hidden] { display: none; }

@keyframes fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* --- Aktiver Punkt in der Navigation --- */
.nav__links a.is-current { color: var(--plum-deep); font-weight: 500; }
.nav__links a.is-current::after { transform: scaleX(1); transform-origin: left; }

/* --- Footer: Flaeche ueber die volle Breite, Inhalt im Seitenrahmen ---
   Die dunkle Flaeche liegt am Element selbst, der Inhalt sitzt in einem
   container und behaelt damit dieselbe Breite wie jede andere Sektion. */
.footer {
  position: relative;
  z-index: 2;
  margin-top: -3rem;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  background: linear-gradient(180deg, #1f1d24 0%, #1a1820 100%);
  color: rgba(255, 255, 255, 0.85);
  overflow: hidden;
  isolation: isolate;
}
@media (min-width: 768px) { .footer { margin-top: -4rem; border-radius: 3rem 3rem 0 0; } }

.footer::before {
  content: '';
  position: absolute;
  bottom: -50%;
  left: 50%;
  width: 140%;
  height: 80%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center,
    rgba(147, 68, 146, 0.45) 0%, rgba(88, 16, 129, 0.28) 30%, transparent 70%);
  filter: blur(60px);
  z-index: -1;
  pointer-events: none;
  animation: orb-drift 24s ease-in-out infinite alternate;
}

.footer::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  z-index: -1;
  background: linear-gradient(90deg, transparent, rgba(147, 68, 146, 0.45), transparent);
}

/* Nur oben und unten polstern. Die Kurzschreibweise padding mit vier Werten
   setzt auch die Seiten auf null und nimmt dem container seine 2rem. Der
   Inhalt des Fussbereichs stand dadurch 32 Pixel weiter aussen als die
   Navigationsleiste und jeder andere Abschnitt. */
.footer__main { padding-block: 5rem 4rem; }
@media (min-width: 768px) { .footer__main { padding-block: 6rem 4rem; } }

.footer__grid { display: grid; gap: 2.5rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .footer__grid { grid-template-columns: 2fr 1fr 1fr; } }

.footer__logo img { height: 2.5rem; width: auto; }
.footer h4 { color: #fff; font-size: 1rem; margin-bottom: 1.25rem; }
.footer ul { display: flex; flex-direction: column; gap: 0.75rem; }
/* Schaltflaechen sind ausgenommen. Der Selektor .footer a waere sonst
   gewichtiger als .btn--light und faerbte dessen Beschriftung weiss auf
   weissem Grund. */
.footer a:not(.btn) { color: rgba(255, 255, 255, 0.65); }
.footer a:not(.btn):hover { color: #fff; }

.footer__disclaimer {
  margin-top: 3.5rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.82rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.55);
  /* Ohne Begrenzung. Mit 62rem endete der Text 208 Pixel vor dem rechten
     Rand und der ganze Block wirkte dadurch nach links gerueckt. */
}
.footer__disclaimer strong { color: rgba(255, 255, 255, 0.85); }

.footer__bottom {
  background: linear-gradient(180deg, #15131a 0%, #100e15 100%);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.footer__bottom .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-block: 1.75rem;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.55);
}
@media (min-width: 768px) { .footer__bottom .container { flex-direction: row; } }