/* ============================================================
   components.css — Buttons, Karten, Preise, Formular,
   Testimonials, Akkordeon, Pulslinie, Chips (Zustände lt. 09)
   ============================================================ */

/* ---- Pulslinie (Signatur-Motiv) ---- */
.pulse-line { width: min(320px, 70%); height: 40px; color: var(--rot); }
.pulse-line svg { width: 100%; height: 100%; overflow: visible; }
.pulse-line path {
  stroke: currentColor; stroke-width: 2.5; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
}
/* Ruhepuls: heller Impuls wandert periodisch durch die Linie (EKG-Monitor).
   Reine CSS-Animation — läuft auch ohne JS; reduced-motion schaltet ab. */
.bg-dunkel .pulse-line .puls-lauf, .footer .pulse-line .puls-lauf, .hero .pulse-line .puls-lauf,
.hero-klein .pulse-line .puls-lauf { --puls-lauf: #A9DFF5; }
.hero .pulse-line .puls-lauf { --puls-lauf: #FFD2D2; } /* auf Foto-Hero: sehr helles Rot */
.pulse-line .puls-lauf {
  stroke: var(--puls-lauf);
  opacity: 0;
  stroke-dasharray: 0.14 1;
  stroke-dashoffset: 1.14;
  animation: puls-lauf 3.8s linear infinite;
  animation-delay: 1.2s; /* erst nach dem Draw-on */
}
@keyframes puls-lauf {
  0%   { stroke-dashoffset: 1.14;  opacity: 0; }
  4%   { opacity: 0.9; }
  30%  { stroke-dashoffset: -0.14; opacity: 0.9; }
  34%  { stroke-dashoffset: -0.14; opacity: 0; }
  100% { stroke-dashoffset: -0.14; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .pulse-line .puls-lauf { animation: none; opacity: 0; }
}
.pulse-line-voll { width: 100%; height: 32px; }
.pulse-marker { display: inline-block; width: 26px; height: 13px; color: var(--rot); flex-shrink: 0; }
.bg-dunkel .pulse-marker { color: var(--blau); }

/* Section-Trenner mit Pulslinie */
.puls-trenner { display: flex; justify-content: flex-start; padding-block: var(--s-2); color: var(--rot); }
.puls-trenner .pulse-line { width: 100%; max-width: none; }

/* ---- Buttons ---- */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  font-weight: 600; font-size: 1.0625rem; text-decoration: none;
  padding: 13px 28px; min-height: 48px;
  border-radius: var(--radius-s);
  transition: background-color var(--t-ui) var(--ease-out), color var(--t-ui) var(--ease-out), border-color var(--t-ui) var(--ease-out);
  cursor: pointer;
}
/* Puls-Sweep: eine Linie zeichnet sich unter dem Label — Echo des Signatur-Motivs */
.btn::after {
  content: ""; position: absolute; left: 26px; right: 26px; bottom: 9px;
  height: 2px; background: currentColor; border-radius: 1px;
  transform: scaleX(0); transform-origin: left center;
  transition: transform 200ms var(--ease-out);
}
.btn:hover::after, .btn:focus-visible::after { transform: scaleX(1); }
.btn:disabled::after { display: none; }
.btn-primaer { background: var(--rot); color: var(--weiss); }
.btn-primaer:hover { background: var(--rot-tief); }
.btn-primaer:active { background: var(--rot-aktiv); }
.btn-primaer:disabled { background: var(--nebel); color: var(--grau); cursor: not-allowed; }

.btn-sekundaer { background: transparent; color: var(--nacht); border: 2px solid var(--nacht); }
.btn-sekundaer:hover { background: var(--nacht); color: var(--licht); }
.bg-dunkel .btn-sekundaer { color: var(--licht); border-color: var(--licht); }
.bg-dunkel .btn-sekundaer:hover { background: var(--licht); color: var(--nacht); }

/* ---- Angebots-Karte ---- */
.karte {
  position: relative;
  display: flex; flex-direction: column; gap: var(--s-3);
  background: var(--weiss);
  border: 1px solid var(--nebel); border-radius: var(--radius-m);
  padding: var(--s-6) var(--s-5);
  transition: transform var(--t-ui) var(--ease-out), border-color var(--t-ui) var(--ease-out);
}
.karte:hover, .karte:focus-within { transform: translateY(-4px); border-color: var(--grau); }
.karte h3 a { text-decoration: none; color: var(--nacht); }
.karte h3 a::after { content: ""; position: absolute; inset: 0; } /* ganze Karte klickbar */
.karte .karte-preis { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; color: var(--rot-tief); margin-top: auto; }
.karte .karte-pfeil {
  color: var(--rot-tief); font-weight: 600;
  transition: transform 200ms var(--ease-out);
}
.karte:hover .karte-pfeil, .karte:focus-within .karte-pfeil { transform: translateX(6px); }

/* ---- Preisblock „Beleg-Stil" ---- */
.preisblock { background: var(--weiss); border: 1px solid var(--nebel); border-radius: var(--radius-m); overflow: hidden; }
.preisblock-kopf {
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4);
  justify-content: space-between; align-items: baseline;
  padding: var(--s-5); border-bottom: 1px solid var(--nebel);
}
.preisblock-kopf h3, .preisblock-kopf h4 { font-family: var(--font-display); font-weight: 600; font-size: 1.4rem; }
.preis {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.1rem);
  color: var(--rot-tief); white-space: nowrap;
}
.preis small { font-family: var(--font-text); font-size: 0.9rem; font-weight: 500; color: var(--grau); }
.preisblock ul { padding: var(--s-3) var(--s-5); }
.preisblock li {
  display: flex; gap: var(--s-3); align-items: baseline;
  padding-block: var(--s-3);
}
.preisblock li + li { border-top: 1px solid var(--flaeche); }
.preisblock li:nth-child(even) { background: transparent; }
.preis-hinweis {
  display: flex; gap: var(--s-3); align-items: baseline;
  margin-top: var(--s-6); max-width: none;
  font-size: var(--fs-lead); font-weight: 600;
}
.preisblock-fuss { padding: var(--s-4) var(--s-5); background: var(--flaeche); font-size: var(--fs-meta); color: var(--grau); }

/* Segment-Auswahl (Radio-Chips für Laufzeit-Varianten) */
.segmente { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-block: var(--s-4); }
.segmente label {
  border: 1.5px solid var(--grau); border-radius: var(--radius-s);
  padding: var(--s-2) var(--s-4); font-weight: 500; cursor: pointer;
  transition: background-color var(--t-ui) var(--ease-out), color var(--t-ui) var(--ease-out);
}
.segmente input { position: absolute; opacity: 0; }
.segmente input:checked + span { font-weight: 600; }
.segmente label:has(input:checked) { background: var(--nacht); color: var(--licht); border-color: var(--nacht); }
.segmente label:has(input:focus-visible) { outline: 3px solid var(--nacht); outline-offset: 2px; }

/* ---- Beweis-Band ---- */
.beweise { display: grid; gap: var(--s-6); text-align: left; }
@media (min-width: 640px) { .beweise { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .beweise { grid-template-columns: repeat(4, 1fr); } }
.beweis-zahl {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.4rem, 1.6rem + 3vw, 3.6rem);
  color: var(--blau); line-height: 1;
}
.beweis-text { margin-top: var(--s-2); color: var(--nebel); font-size: var(--fs-meta); max-width: 24ch; }
.beweis-zahl small { font-size: 0.42em; font-weight: 600; margin-left: 0.2em; color: var(--nebel); letter-spacing: 0.02em; }
@media (min-width: 960px) {
  .beweise-3 { grid-template-columns: repeat(3, 1fr); gap: 0; }
  .beweise-3 > div { padding-inline: var(--s-6); }
  .beweise-3 > div:first-child { padding-left: 0; }
  .beweise-3 > div + div { border-left: 1px solid var(--linie-dunkel); }
  .beweise-3 .beweis-zahl { font-size: clamp(3rem, 1.6rem + 4vw, 5.2rem); }
}

/* ---- Testimonials ---- */
.testimonials { display: grid; gap: var(--s-5); }
@media (min-width: 960px) { .testimonials { grid-template-columns: repeat(3, 1fr); } }
.testimonials-2 { display: grid; gap: var(--s-5); }
@media (min-width: 960px) { .testimonials-2 { grid-template-columns: repeat(2, 1fr); } }
.testimonial {
  display: flex; flex-direction: column; gap: var(--s-4);
  background: var(--weiss); border: 1px solid var(--nebel);
  border-radius: var(--radius-m); padding: var(--s-6) var(--s-5);
}
.testimonial blockquote {
  font-family: var(--font-display); font-weight: 500;
  font-size: 1.3rem; line-height: 1.4;
}
.testimonial figcaption { margin-top: auto; }
.testimonial .t-name { font-weight: 600; }
.testimonial .t-ort { color: var(--grau); font-size: var(--fs-meta); }

/* ---- Akkordeon (natives details/summary) ---- */
.akkordeon { border-top: 1px solid var(--nebel); }
.akkordeon details { border-bottom: 1px solid var(--nebel); }
.akkordeon summary {
  display: flex; justify-content: space-between; align-items: center; gap: var(--s-4);
  padding: var(--s-4) var(--s-2); min-height: 48px;
  font-weight: 600; cursor: pointer; list-style: none;
}
.akkordeon summary::-webkit-details-marker { display: none; }
.akkordeon summary::after {
  content: "+"; font-family: var(--font-display); font-size: 1.6rem; font-weight: 600;
  color: var(--rot-tief); line-height: 1;
  transition: transform 200ms var(--ease-out);
}
.akkordeon details[open] summary::after { transform: rotate(45deg); }
.akkordeon .akkordeon-inhalt { padding: 0 var(--s-2) var(--s-5); }

/* ---- Schritte (Konzept / Ablauf) ---- */
.schritte { display: grid; gap: var(--s-5); counter-reset: schritt; }
@media (min-width: 960px) { .schritte { grid-template-columns: repeat(var(--schritte-n, 3), 1fr); } }
.schritt { counter-increment: schritt; position: relative; padding-top: var(--s-5); }
.schritt::before {
  content: counter(schritt, decimal-leading-zero);
  font-family: var(--font-display); font-weight: 700; font-style: italic;
  font-size: 2.6rem; line-height: 1; color: var(--rot);
  display: block; margin-bottom: var(--s-3);
}
.schritt h3 { font-size: 1.3rem; margin-bottom: var(--s-2); }

/* ---- Listen mit Puls-Marker ---- */
.puls-liste { display: grid; gap: var(--s-3); }
.puls-liste li { display: flex; gap: var(--s-3); align-items: baseline; }
.puls-liste .pulse-marker { transform: translateY(1px); }

/* ---- Formular ---- */
.formular { display: grid; gap: var(--s-5); background: var(--weiss); border: 1px solid var(--nebel); border-radius: var(--radius-m); padding: var(--s-6) var(--s-5); }
@media (min-width: 640px) { .formular { padding: var(--s-7); } }
.feld { display: grid; gap: var(--s-2); }
.feld label { font-size: var(--fs-meta); font-weight: 500; letter-spacing: 0.02em; }
.feld input, .feld select, .feld textarea {
  width: 100%; min-height: 48px;
  background: var(--weiss); border: 1.5px solid var(--grau); border-radius: var(--radius-s);
  padding: 12px 14px;
  transition: border-color var(--t-ui) var(--ease-out), box-shadow var(--t-ui) var(--ease-out);
}
.feld textarea { min-height: 140px; resize: vertical; }
.feld input:focus-visible, .feld select:focus-visible, .feld textarea:focus-visible {
  outline: none; border-color: var(--rot); box-shadow: 0 0 0 3px var(--fokus-ring);
}
.feld:focus-within > label { color: var(--rot-tief); }
.feld.hat-fehler input, .feld.hat-fehler select, .feld.hat-fehler textarea { border-color: var(--rot-tief); }
.feld-fehler { display: none; color: var(--rot-tief); font-size: var(--fs-meta); font-weight: 500; }
.feld.hat-fehler .feld-fehler { display: flex; gap: var(--s-2); align-items: baseline; }
.feld-checkbox { display: flex; gap: var(--s-3); align-items: flex-start; }
.feld-checkbox input { width: 24px; height: 24px; min-height: 24px; margin-top: 2px; accent-color: var(--rot); flex-shrink: 0; }
.feld-checkbox label { font-size: var(--fs-body); font-weight: 400; letter-spacing: 0; }
.formular-hinweis { font-size: var(--fs-meta); color: var(--grau); }
.formular-versandfehler:not([hidden]) { display: block; margin-top: var(--s-3); }
.formular-erfolg { display: grid; gap: var(--s-4); justify-items: start; background: var(--flaeche); border: 1px solid var(--nebel); border-radius: var(--radius-m); padding: var(--s-7) var(--s-6); }

/* ---- Partner ---- */
.partner-grid { display: grid; gap: var(--s-5); }
@media (min-width: 640px) { .partner-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .partner-grid { grid-template-columns: repeat(3, 1fr); } }
.partner-karte { background: var(--weiss); border: 1px solid var(--nebel); border-radius: var(--radius-m); padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-3); }
.partner-karte h3 { font-size: 1.25rem; }
.code-chip {
  display: inline-flex; align-items: center; gap: var(--s-2);
  border: 1.5px dashed var(--grau); border-radius: var(--radius-s);
  padding: var(--s-2) var(--s-3);
  font-family: var(--font-text); font-weight: 600; font-size: var(--fs-meta);
  cursor: pointer; align-self: start;
  transition: border-color var(--t-ui) var(--ease-out), background-color var(--t-ui) var(--ease-out);
}
.code-chip:hover { border-color: var(--nacht); background: var(--licht); }
a.code-chip { color: inherit; text-decoration: none; }
.partner-logo-band { display: flex; flex-wrap: wrap; gap: var(--s-5) var(--s-7); align-items: center; justify-content: center; }
.partner-logo-band img { height: 34px; width: auto; filter: grayscale(1) opacity(0.65); }

/* ---- Beweis-Chips (Badges, nur belegte) ---- */
.chip { display: inline-flex; align-items: center; gap: var(--s-2); border: 1px solid var(--grau); border-radius: var(--radius-s); padding: var(--s-1) var(--s-3); font-size: var(--fs-meta); font-weight: 500; }

/* ---- Blog ---- */
.blog-grid { display: grid; gap: var(--s-5); }
@media (min-width: 640px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .blog-grid { grid-template-columns: repeat(3, 1fr); } }
.blog-karte { position: relative; background: var(--weiss); border: 1px solid var(--nebel); border-radius: var(--radius-m); overflow: hidden; display: flex; flex-direction: column; }
.blog-karte .blog-bild { overflow: hidden; aspect-ratio: 3 / 2; }
.blog-karte img { width: 100%; height: 100%; object-fit: cover; transition: transform 300ms var(--ease-out); }
.blog-karte:hover img, .blog-karte:focus-within img { transform: scale(1.04); }
.blog-karte-text { padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-2); flex: 1; }
.blog-karte h3 { font-size: 1.3rem; }
.blog-karte h3 a {
  text-decoration: none; color: var(--nacht);
  background-image: linear-gradient(var(--rot), var(--rot));
  background-size: 0% 2px; background-position: 0 100%; background-repeat: no-repeat;
  transition: background-size 250ms var(--ease-out);
}
.blog-karte:hover h3 a, .blog-karte:focus-within h3 a { background-size: 100% 2px; }
.blog-karte h3 a::after { content: ""; position: absolute; inset: 0; }
.blog-karte .meta { margin-top: auto; }

/* Autoren-Box */
.autor-box { display: flex; gap: var(--s-4); align-items: center; background: var(--flaeche); border-radius: var(--radius-m); padding: var(--s-5); }
.autor-box img { width: 64px; height: 64px; object-fit: cover; border-radius: var(--radius-m); }

/* ---- Video ---- */
.video-rahmen { position: relative; border-radius: var(--radius-m); overflow: hidden; background: var(--nacht); }
.video-rahmen video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

/* ---- Zitat-Band ---- */
.zitat-band { padding-block: var(--s-7); }
.zitat-band p { font-family: var(--font-display); font-weight: 700; font-style: italic; text-transform: uppercase; font-size: clamp(1.5rem, 1rem + 2.4vw, 2.4rem); line-height: 1.2; max-width: none; }

/* ---- CTA-Block ---- */
.cta-block { display: grid; gap: var(--s-4); justify-items: start; }
.cta-aktionen { display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: center; }
.cta-tel { display: inline-flex; align-items: center; gap: var(--s-2); font-weight: 600; text-decoration: none; color: var(--nacht); min-height: 48px; }
.cta-tel:hover { color: var(--rot-tief); text-decoration: underline; text-underline-offset: 3px; }
.bg-dunkel .cta-tel { color: var(--licht); }

/* ============================================================
   v2-Bausteine (DESIGN.md, 2026-09-29) — „Ein Takt für alles"
   ============================================================ */

.nur-js { display: none; }
.js .nur-js { display: revert; }

/* ---- Prosa: Artikeltext, Rhythmus ohne Inline-Styles ---- */
.prosa { font-size: 1.125rem; line-height: 1.7; }
.prosa > * + * { margin-top: var(--s-4); }
.prosa > h2 { margin-top: var(--s-7); font-size: clamp(1.55rem, 1.2rem + 1.4vw, 2.05rem); line-height: 1.15; }
.prosa > h2 + * { margin-top: var(--s-3); }
.prosa > .lead { font-size: var(--fs-lead); line-height: 1.55; }
.prosa strong { font-weight: 600; }
.prosa .puls-liste { gap: var(--s-3); }
.prosa > .kurz-box, .prosa > .zitat { margin-top: var(--s-6); }
.prosa > .kurz-box + *, .prosa > .zitat + * { margin-top: var(--s-6); }
.prosa > .hinweis {
  margin-top: var(--s-7); padding-top: var(--s-4);
  border-top: 1px solid var(--nebel);
  font-size: var(--fs-meta); color: var(--grau);
}
.kurz-box {
  background: var(--flaeche);
  padding: var(--s-5) var(--s-6);
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%); /* Stencil-Eckschnitt statt Akzentkante */
}
.kurz-box-titel {
  display: flex; align-items: center; gap: var(--s-2);
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--fs-kicker); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--grau);
}
.kurz-box-titel::before { content: ""; width: 26px; height: 13px; flex-shrink: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 13'%3E%3Cpath d='M0 6.5h8l2.5 0 2-5 2.5 9.5 2-4.5H26' stroke='%23F04848' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain; }
.kurz-box .puls-liste { margin-top: var(--s-3); gap: var(--s-2); font-size: 1.0625rem; font-weight: 500; line-height: 1.5; }
.zitat::before { content: ""; display: block; width: 40px; height: 20px; margin-bottom: var(--s-3); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 13'%3E%3Cpath d='M0 6.5h8l2.5 0 2-5 2.5 9.5 2-4.5H26' stroke='%23F04848' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat left center / contain; }
.zitat p { font-family: var(--font-display); font-weight: 700; font-style: italic; font-size: clamp(1.4rem, 1.1rem + 1.1vw, 1.85rem); line-height: 1.25; max-width: 30ch; }

/* Artikel-Abschluss: Autorenbox, „Passend dazu", Kontakt */
.artikel-ende { padding-bottom: var(--s-8); }
.artikel-passend { margin-top: var(--s-5); }
.artikel-cta {
  margin-top: var(--s-5); padding: var(--s-5) var(--s-6);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3) var(--s-5);
  background: var(--nacht); color: var(--licht);
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
}
.artikel-cta p { font-family: var(--font-display); font-weight: 600; font-size: 1.35rem; color: var(--weiss); }
.artikel-cta :focus-visible { outline-color: var(--blau); }

/* ---- V10 Lesefortschritt: Linie unter dem Header, der Puls reitet an der Spitze ---- */
.lesefortschritt { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none; }
.lesefortschritt::before {
  content: ""; position: absolute; inset: 0; background: var(--rot);
  transform-origin: left center; transform: scaleX(var(--fortschritt, 0));
}
.lesefortschritt-kopf {
  position: absolute; left: 0; bottom: -5px; width: 26px; height: 12px; color: var(--rot);
  transform: translateX(calc(var(--fortschritt, 0) * (100vw - 26px)));
}

/* ---- V8 Video-Poster mit Play-Puls ---- */
.video-poster {
  position: absolute; inset: 0; z-index: 1;
  display: grid; place-items: center;
  padding: 0; border: 0; cursor: pointer;
  background: var(--nacht); color: var(--weiss);
}
.video-poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-medium) var(--ease-out); }
.video-poster::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(20 24 29 / 0) 40%, rgb(20 24 29 / 0.66) 100%); }
.video-poster:hover img, .video-poster:focus-visible img { transform: scale(1.03); }
.video-play {
  position: relative; z-index: 2; width: 76px; height: 76px;
  display: grid; place-items: center;
  background: var(--rot); color: var(--weiss);
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
  transition: background-color var(--t-ui) var(--ease-out), transform var(--t-ui) var(--ease-out);
}
.video-poster:hover .video-play, .video-poster:focus-visible .video-play { background: var(--rot-tief); transform: scale(1.06); }
.video-play svg { width: 26px; height: 26px; margin-left: 4px; }
.video-play-ring {
  position: absolute; z-index: 1; width: 76px; height: 76px;
  border: 2px solid var(--rot);
  top: 50%; left: 50%; margin: -38px 0 0 -38px;
  animation: ring-puls var(--takt) var(--ease-out) var(--takt-start) infinite;
}
@keyframes ring-puls {
  0%, 7% { transform: scale(1); opacity: 0.9; }
  24%    { transform: scale(1.7); opacity: 0; }
  100%   { transform: scale(1.7); opacity: 0; }
}
.video-poster-text {
  position: absolute; z-index: 2; left: var(--s-5); right: var(--s-5); bottom: var(--s-4);
  text-align: left; font-weight: 600; font-size: 1rem; line-height: 1.35;
}
.video-poster-text small { display: block; font-size: var(--fs-meta); font-weight: 500; color: var(--nebel); }
.video-rahmen.ist-aktiv .video-poster { display: none; }

/* ---- V5 Energie-Check ---- */
/* Mobil: Kopf, Akku (klebt oben), Sätze, Fazit — der Akku reagiert sichtbar beim Antippen.
   Desktop: Sätze links, Akku rechts über die ganze Höhe. */
.energie-check { display: grid; row-gap: var(--s-5); grid-template-areas: "kopf" "akku" "liste" "fazit" "cta"; }
.check-kopf { grid-area: kopf; }
.check-liste { grid-area: liste; display: grid; gap: var(--s-3); list-style: none; margin: 0; padding: 0; }
.check-fazit { grid-area: fazit; }
.energie-check .akku { grid-area: akku; }
.check-mobil-cta { grid-area: cta; display: grid; gap: var(--s-3); justify-items: start; }
.check-mobil-cta[hidden] { display: none; }
@media (min-width: 960px) {
  .energie-check {
    grid-template-columns: 7fr 5fr; column-gap: var(--s-8); align-items: start;
    grid-template-areas: "kopf akku" "liste akku" "fazit akku";
  }
  .check-mobil-cta { display: none !important; }
}
.check-satz {
  width: 100%; display: flex; gap: var(--s-4); align-items: center; text-align: left;
  padding: var(--s-4) var(--s-5);
  background: var(--weiss); color: var(--nacht);
  border: 1.5px solid var(--nebel); border-radius: var(--radius-m);
  font-size: var(--fs-lead); font-weight: 500; line-height: 1.4;
  cursor: pointer;
  transition: border-color var(--t-ui) var(--ease-out), background-color var(--t-ui) var(--ease-out), transform 200ms var(--ease-out);
}
.check-satz:hover { border-color: var(--grau); transform: translateX(4px); }
.check-satz:disabled { cursor: default; }
.check-satz:disabled:hover { border-color: var(--nebel); transform: none; }
.check-satz:disabled .check-box { display: none; }
.check-satz[aria-pressed="true"] { border-color: var(--rot); background: #FFF5F5; }
.check-box {
  flex-shrink: 0; width: 28px; height: 28px;
  display: grid; place-items: center;
  border: 2px solid var(--grau); border-radius: var(--radius-s); color: var(--weiss);
  transition: background-color var(--t-ui) var(--ease-out), border-color var(--t-ui) var(--ease-out);
}
.check-box svg { width: 18px; height: 18px; opacity: 0; transform: scale(0.5); transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out); }
.check-satz[aria-pressed="true"] .check-box { background: var(--rot); border-color: var(--rot); }
.check-satz[aria-pressed="true"] .check-box svg { opacity: 1; transform: none; }
.akku {
  background: var(--nacht); color: var(--licht);
  border-radius: var(--radius-m); padding: var(--s-6) var(--s-5);
  clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 0 100%);
}
@media (min-width: 960px) {
  .akku { position: sticky; top: calc(var(--header-h-klein) + var(--s-6)); padding: var(--s-7) var(--s-6); }
}
@media (max-width: 959px) {
  .akku {
    position: sticky; top: calc(var(--header-h) + var(--s-2)); z-index: 5;
    display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: var(--s-4);
    padding: var(--s-4) var(--s-5);
    clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
  }
  .akku-label { grid-column: 1 / -1; }
  .akku .akku-wert { font-size: 2.4rem; margin-top: var(--s-1); }
  .akku .akku-balken { margin-top: var(--s-1); }
  .akku .akku-text { grid-column: 1 / -1; min-height: 0; margin-top: var(--s-2); font-size: 1rem; }
  /* Handlung und Hinweis stehen mobil unter den Sätzen (.check-mobil-cta), damit der klebende Akku kompakt bleibt */
  .akku .akku-aktion, .akku .akku-fuss { display: none; }
}
.akku-label { font-size: var(--fs-kicker); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--nebel); }
.akku-wert {
  margin-top: var(--s-2);
  font-family: var(--font-display); font-weight: 700; line-height: 1;
  font-size: clamp(3.2rem, 2.2rem + 3vw, 4.8rem);
  color: var(--blau); font-variant-numeric: tabular-nums;
  transition: color var(--t-medium) var(--ease-out);
}
.akku-wert small { font-size: 0.45em; margin-left: 2px; }
.akku-balken {
  margin-top: var(--s-4); height: 14px;
  background: var(--nacht-2); border: 1px solid var(--linie-dunkel); border-radius: var(--radius-s);
  overflow: hidden;
}
.akku-fuellung {
  height: 100%; background: var(--blau);
  transform-origin: left center; transform: scaleX(var(--akku, 1));
  transition: transform var(--t-medium) var(--ease-out), background-color var(--t-medium) var(--ease-out);
}
.akku[data-stufe="niedrig"] .akku-wert { color: var(--rot); }
.akku[data-stufe="niedrig"] .akku-fuellung { background: var(--rot); }
.akku-text { margin-top: var(--s-4); color: var(--licht); font-size: 1.0625rem; font-weight: 500; min-height: 3.2em; }
.akku-aktion { margin-top: var(--s-5); display: grid; gap: var(--s-3); justify-items: start; }
.akku-aktion a:not(.btn) { color: var(--licht); text-decoration-color: var(--blau); }
.akku-fuss { margin-top: var(--s-5); padding-top: var(--s-3); border-top: 1px solid var(--linie-dunkel); font-size: var(--fs-meta); color: var(--nebel); }

/* ---- V4 Ablauf mit Puls-Schiene ---- */
.ablauf { display: grid; gap: var(--s-7); }
@media (min-width: 960px) {
  .ablauf { grid-template-columns: 5fr 7fr; gap: var(--s-8); align-items: start; }
  .ablauf-kopf { position: sticky; top: calc(var(--header-h-klein) + var(--s-7)); }
}
.schiene { position: relative; display: grid; gap: var(--s-8); margin: 0; list-style: none; }
ol.schiene { padding: 0 0 0 56px; } /* schlägt ol[class] aus reset.css */
.schiene::before, .schiene::after {
  content: ""; position: absolute; left: 11px; top: 14px; bottom: 14px; width: 2px; border-radius: 1px;
}
.schiene::before { background: var(--nebel); }
.schiene::after { background: var(--rot); transform-origin: top center; transform: scaleY(var(--schiene, 1)); }
.schiene-schritt { position: relative; }
.schiene-knoten { position: absolute; left: -56px; top: 3px; width: 24px; height: 24px; display: grid; place-items: center; }
.schiene-knoten::before, .schiene-knoten::after {
  content: ""; grid-area: 1 / 1; width: 13px; height: 13px; transform: rotate(45deg);
}
.schiene-knoten::before { background: var(--weiss); border: 2px solid var(--nebel); transition: background-color 200ms var(--ease-out), border-color 200ms var(--ease-out); }
.schiene-knoten::after { border: 2px solid var(--rot); opacity: 0; }
html:not(.js) .schiene-knoten::before,
.schiene-schritt.ist-erreicht .schiene-knoten::before { background: var(--rot); border-color: var(--rot); }
.schiene-schritt.ist-erreicht .schiene-knoten::after { animation: knoten-schlag 900ms var(--ease-out) 1; }
@keyframes knoten-schlag {
  0%   { opacity: 0.9; transform: rotate(45deg) scale(1); }
  100% { opacity: 0;   transform: rotate(45deg) scale(2.6); }
}
.schiene-nr { font-family: var(--font-display); font-weight: 700; font-style: italic; font-size: 1.25rem; line-height: 1; color: var(--rot); }
.schiene-schritt h3 { margin-top: var(--s-2); font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); }
.schiene-schritt p:last-child { margin-top: var(--s-3); color: var(--grau); max-width: 52ch; }

/* ---- Angebotskarte mit Bild + Mini-Puls ---- */
.karte-bild { padding: 0; gap: 0; overflow: hidden; }
.karte-medien { aspect-ratio: 16 / 9; overflow: hidden; background: var(--flaeche); }
/* Weiche 7fr/5fr: die schmale Karte bekommt 4:3, damit beide Bilder gleich hoch enden */
@media (min-width: 960px) { .weiche > .karte-bild:nth-child(2) .karte-medien { aspect-ratio: 4 / 3; } }
.karte-medien img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease-out); }
.karte:hover .karte-medien img, .karte:focus-within .karte-medien img { transform: scale(1.04); }
.karte-inhalt { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-6) var(--s-5); flex: 1; }
@media (min-width: 640px) { .karte-inhalt { padding: var(--s-6); } }
.karte-kopf { display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); }
.karte-puls { width: 64px; height: 18px; flex-shrink: 0; color: var(--nebel); }
.karte-puls path { stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.karte-puls .karte-puls-zug {
  stroke: var(--rot); stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset 520ms linear;
}
.karte:hover .karte-puls-zug, .karte:focus-within .karte-puls-zug { stroke-dashoffset: 0; }

/* ---- Testimonials: erstes Zitat groß ---- */
@media (min-width: 960px) {
  .testimonials-featured { grid-template-columns: 7fr 5fr; }
  .testimonials-featured .testimonial:first-of-type { grid-row: span 2; justify-content: center; background: var(--nacht); border-color: var(--nacht); color: var(--licht); padding: var(--s-8) var(--s-7); }
  .testimonials-featured .testimonial:first-of-type blockquote { font-size: clamp(1.6rem, 1.1rem + 1.2vw, 2.2rem); line-height: 1.3; font-weight: 600; }
  .testimonials-featured .testimonial:first-of-type .pulse-marker { color: var(--blau); width: 40px; height: 20px; }
  .testimonials-featured .testimonial:first-of-type .t-ort { color: var(--nebel); }
}

/* ---- V6 HRV-Monitor ---- */
.monitor {
  background: var(--nacht); color: var(--licht);
  border-radius: var(--radius-m); padding: var(--s-5);
  clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 0 100%);
}
@media (min-width: 640px) { .monitor { padding: var(--s-6); } }
.monitor-kopf {
  display: flex; justify-content: space-between; gap: var(--s-4);
  font-size: var(--fs-kicker); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--nebel);
}
.monitor-live { display: inline-flex; align-items: center; gap: var(--s-2); }
.monitor-live::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--rot);
  animation: live-blink var(--takt) steps(1, end) var(--takt-start) infinite;
}
@keyframes live-blink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0.25; } }
.monitor-flaeche {
  position: relative; overflow: hidden; margin-top: var(--s-4);
  height: clamp(130px, 22vw, 180px);
  background-color: var(--nacht-2);
  background-image:
    linear-gradient(var(--linie-dunkel) 1px, transparent 1px),
    linear-gradient(90deg, var(--linie-dunkel) 1px, transparent 1px);
  background-size: 100% 25%, 12.5% 100%;
  border-radius: var(--radius-s);
}
.monitor-spur { position: absolute; inset: 0; width: 200%; display: flex; animation: monitor-lauf calc(var(--takt) * 2) linear infinite; }
.monitor-spur svg { width: 50%; height: 100%; flex-shrink: 0; }
.monitor-spur path { stroke: var(--blau); stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
@keyframes monitor-lauf { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.monitor figcaption { margin-top: var(--s-4); font-size: var(--fs-meta); color: var(--nebel); line-height: 1.5; }
.monitor figcaption strong { color: var(--licht); font-weight: 600; }

/* ---- V7 Slogan-Band mit Video-Loop ---- */
.slogan-band {
  position: relative; overflow: hidden;
  display: grid; align-items: center;
  min-height: clamp(380px, 68vh, 700px);
  background: var(--nacht); color: var(--weiss);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--diagonale)), 0 100%);
}
.slogan-band-medien { position: absolute; inset: 0; }
.slogan-band-medien img, .slogan-band-medien video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.slogan-band-medien video { opacity: 0; transition: opacity 900ms var(--ease-out); }
.slogan-band-medien video.laeuft { opacity: 1; }
.slogan-band-medien::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgb(20 24 29 / 0.86) 0%, rgb(20 24 29 / 0.6) 50%, rgb(20 24 29 / 0.3) 100%);
}
.slogan-band-inhalt { position: relative; z-index: 1; padding-block: var(--s-9) calc(var(--s-9) + var(--diagonale)); }
.slogan-mega {
  font-family: var(--font-display); font-weight: 700; font-style: italic;
  text-transform: uppercase; font-size: var(--fs-mega); line-height: 0.9;
  letter-spacing: -0.005em; max-width: 11ch;
}
.slogan-mega .akzent { color: var(--rot); }
.slogan-band .pulse-line { width: min(520px, 86%); margin-top: var(--s-5); color: var(--rot); }
.band-pause {
  position: absolute; z-index: 2; right: var(--gutter); bottom: calc(var(--diagonale) + var(--s-4));
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: 44px; padding: 0 var(--s-3);
  background: rgb(20 24 29 / 0.6); color: var(--licht);
  border: 1px solid var(--linie-dunkel); border-radius: var(--radius-s);
  font-size: var(--fs-meta); font-weight: 600; cursor: pointer;
}
.band-pause:hover { border-color: var(--licht); }
.band-pause svg { width: 14px; height: 14px; }

/* ---- V9 Partner-Laufband ---- */
.partner-band { overflow: hidden; }
.partner-band-kopf { display: grid; gap: var(--s-3); justify-items: start; }
@media (min-width: 960px) {
  .partner-band-kopf { grid-template-columns: 1fr auto; align-items: end; gap: var(--s-3) var(--s-7); }
  .partner-band-kopf p { grid-column: 1; }
  .partner-band-kopf .pfeil-link { grid-column: 2; grid-row: 1 / span 2; align-self: end; }
}
.pfeil-link { font-weight: 600; color: var(--rot-tief); text-decoration: none; white-space: nowrap; }
.pfeil-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.logo-band {
  position: relative; margin-top: var(--s-7);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.logo-band-spur {
  display: flex; align-items: center; gap: var(--s-8); width: max-content;
  padding-block: var(--s-3);
  animation: band-lauf 70s linear infinite;
}
.logo-band:hover .logo-band-spur, .logo-band.ist-pausiert .logo-band-spur { animation-play-state: paused; }
.logo-band img {
  flex-shrink: 0; filter: grayscale(1); opacity: 0.62;
  mix-blend-mode: multiply;
  transition: filter 250ms var(--ease-out), opacity 250ms var(--ease-out);
}
.logo-band img:hover { filter: none; opacity: 1; }
@keyframes band-lauf { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.logo-band-steuerung { margin-top: var(--s-4); display: flex; justify-content: flex-end; }
.logo-band-pause {
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: 44px; padding: 0 var(--s-3);
  background: transparent; color: var(--grau);
  border: 1px solid var(--nebel); border-radius: var(--radius-s);
  font-size: var(--fs-meta); font-weight: 600; cursor: pointer;
}
.logo-band-pause:hover { color: var(--nacht); border-color: var(--grau); }
.logo-band-pause svg { width: 12px; height: 12px; }

/* ---- Partner-Karte v2 ---- */
.partner-karte { gap: var(--s-3); padding: var(--s-5); transition: border-color var(--t-ui) var(--ease-out), transform var(--t-ui) var(--ease-out); }
.partner-karte:hover { border-color: var(--grau); transform: translateY(-2px); }
.partner-logo {
  height: 88px; margin: calc(-1 * var(--s-5)) calc(-1 * var(--s-5)) var(--s-2);
  display: flex; align-items: center; padding-inline: var(--s-5);
  border-bottom: 1px solid var(--flaeche);
}
.partner-logo img { display: block; max-width: 100%; height: auto; }
.partner-wortmarke { font-family: var(--font-display); font-weight: 700; font-size: 1.6rem; letter-spacing: 0.01em; color: var(--nacht); }
.partner-kontext { color: var(--grau); }
.partner-aktion { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); margin-top: var(--s-1); }
.partner-vorteil {
  display: inline-flex; align-items: center; min-height: 32px; padding: 0 var(--s-3);
  background: var(--nacht); color: var(--weiss); border-radius: var(--radius-s);
  font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
}
.partner-link { margin-top: auto; padding-top: var(--s-2); font-weight: 600; color: var(--rot-tief); text-decoration: none; align-self: start; }
.partner-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.code-chip { min-height: 44px; font-family: var(--font-text); letter-spacing: 0.02em; }
.code-chip-label { font-weight: 500; color: var(--grau); text-transform: uppercase; font-size: 0.72rem; letter-spacing: 0.08em; }
.code-chip.ist-kopiert { border-style: solid; border-color: var(--rot); color: var(--rot-tief); }
.partner-fussnote { margin-top: var(--s-6); }
.partner-liste-fallback { display: grid; gap: var(--s-2); }
@media (min-width: 960px) { .partner-grid-institute { grid-template-columns: repeat(2, 1fr); max-width: 820px; } }

/* ---- Blog-Karte v2 ---- */
.blog-karte-teaser { color: var(--grau); font-size: 1rem; line-height: 1.5; }
.blog-karte .meta { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); }
@media (min-width: 960px) {
  .blog-grid-gross > .blog-karte:first-child { grid-column: span 2; display: grid; grid-template-columns: 1.15fr 1fr; }
  .blog-grid-gross > .blog-karte:first-child .blog-bild { aspect-ratio: auto; min-height: 100%; }
  .blog-grid-gross > .blog-karte:first-child .blog-karte-text { padding: var(--s-6); justify-content: center; }
  .blog-grid-gross > .blog-karte:first-child h3 { font-size: clamp(1.6rem, 1.1rem + 1.1vw, 2.1rem); }
}

/* ---- Finale: großer Schlussakkord vor dem Footer ---- */
.finale { position: relative; background: var(--nacht); color: var(--licht); padding-block: var(--s-9) var(--s-8); overflow: hidden; }
@media (min-width: 960px) { .finale { padding-block: var(--s-10) var(--s-9); } }
.finale-titel { font-size: var(--fs-mega); font-weight: 700; line-height: 0.95; letter-spacing: -0.01em; color: var(--weiss); max-width: 12ch; }
.finale .punkt { color: var(--rot); }
.finale-text { margin-top: var(--s-5); font-size: var(--fs-lead); color: var(--licht); max-width: 40ch; }
.finale .cta-aktionen { margin-top: var(--s-6); }
.finale .eyebrow { color: var(--nebel); margin-bottom: var(--s-4); }
main:has(> .finale:last-child) + .footer { margin-top: 0; }

/* ---- V12 Bewegungs-Schalter ---- */
.bewegung-schalter {
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: 44px; padding: 0 var(--s-3); margin-left: var(--s-4);
  background: none; color: var(--nebel);
  border: 1px solid var(--linie-dunkel); border-radius: var(--radius-s);
  font-size: var(--fs-meta); font-weight: 500; cursor: pointer;
}
.bewegung-schalter:hover { color: var(--weiss); border-color: var(--nebel); }
.bewegung-schalter svg { width: 12px; height: 12px; }

/* ============================================================
   v3 „Jede Seite hat einen Moment" (DESIGN.md V13–V22, 2026-09-29)
   Unterseiten auf das Niveau von Hero, Energie-Check und Slogan-Band
   ============================================================ */

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

/* ---- V16 Hintergrund-Spur: leise HRV-Linie in dunklen Kopf- und Schlussbändern ---- */
.hero-klein.bg-dunkel { overflow: hidden; }
.finale > .container { position: relative; z-index: 1; }
.hintergrund-spur {
  position: absolute; left: 0; right: 0; bottom: 10%; z-index: 0;
  height: clamp(90px, 20vw, 220px);
  pointer-events: none; opacity: 0.2;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
}
.hintergrund-spur-lauf { display: flex; width: 200%; height: 100%; animation: monitor-lauf calc(var(--takt) * 4) linear infinite; }
.hintergrund-spur svg { width: 50%; height: 100%; flex-shrink: 0; }
.hintergrund-spur path { stroke: var(--blau); stroke-width: 1.5; fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }

/* ---- V13 Puls-Raster: Aufzählungen als Kacheln, Marker zeichnen sich nacheinander ---- */
.puls-raster { display: grid; gap: var(--s-6) var(--s-7); margin: 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .puls-raster { grid-template-columns: repeat(2, 1fr); } }
.puls-raster > li {
  position: relative; display: grid; grid-template-columns: 52px 1fr; gap: var(--s-4); align-items: start;
  padding-top: var(--s-5); border-top: 1px solid var(--nebel);
}
.puls-raster > li::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px;
  background: var(--nacht); transform-origin: left center;
}
.raster-chip {
  width: 52px; height: 52px; display: grid; place-items: center;
  background: var(--nacht); color: var(--blau);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
}
.raster-chip svg { width: 30px; height: 15px; overflow: visible; }
.raster-chip path { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.puls-raster p { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.6rem); line-height: 1.25; color: var(--nacht); padding-top: 2px; }
.puls-raster p small { display: block; margin-top: var(--s-2); font-family: var(--font-text); font-size: var(--fs-body); font-weight: 400; line-height: 1.55; color: var(--grau); }
@media (hover: hover) { .puls-raster > li:hover .raster-chip path { animation: marker-neu 560ms linear; } }
@keyframes marker-neu { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.js .puls-raster.folge-bereit > li { opacity: 0; transform: translateY(14px); }
.js .puls-raster.folge-bereit > li::before { transform: scaleX(0); }
.js .puls-raster.folge-bereit .raster-chip path { stroke-dashoffset: 1; }
.js .puls-raster.folge-los > li {
  opacity: 1; transform: none;
  transition: opacity var(--t-reveal) var(--ease-out) calc(var(--i, 0) * 140ms), transform var(--t-reveal) var(--ease-out) calc(var(--i, 0) * 140ms);
}
.js .puls-raster.folge-los > li::before { transform: scaleX(1); transition: transform var(--t-lang) var(--ease-out) calc(var(--i, 0) * 140ms); }
.js .puls-raster.folge-los .raster-chip path { stroke-dashoffset: 0; transition: stroke-dashoffset 520ms linear calc(var(--i, 0) * 140ms + 260ms); }

/* Puls-Listen allgemein: Marker schlagen beim Erscheinen nacheinander an */
.js .puls-liste.folge-bereit .pulse-marker path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .puls-liste.folge-los .pulse-marker path { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 420ms linear calc(var(--i, 0) * 150ms + 100ms); }

/* ---- V14 Puls-Zeitachse: Schritte auf einer Linie, die sich beim Scrollen füllt ---- */
.zeitachse { --fortschritt: 1; position: relative; display: grid; gap: var(--s-6); margin: 0; list-style: none; }
ol.zeitachse { padding: 0 0 0 52px; } /* schlägt ol[class] aus reset.css */
.zeitachse::before, .zeitachse::after { content: ""; position: absolute; left: 11px; top: 12px; bottom: 12px; width: 2px; border-radius: 1px; }
.zeitachse::before { background: var(--nebel); }
.zeitachse::after { background: var(--rot); transform-origin: top center; transform: scaleY(var(--fortschritt)); }
.zeitachse-schritt { position: relative; }
.zeitachse-knoten { position: absolute; left: -52px; top: 0; width: 24px; height: 24px; display: grid; place-items: center; }
.zeitachse-knoten::before, .zeitachse-knoten::after { content: ""; grid-area: 1 / 1; width: 13px; height: 13px; transform: rotate(45deg); }
.zeitachse-knoten::before { background: var(--weiss); border: 2px solid var(--nebel); transition: background-color 200ms var(--ease-out), border-color 200ms var(--ease-out); }
.zeitachse-knoten::after { border: 2px solid var(--rot); opacity: 0; }
html:not(.js) .zeitachse-knoten::before,
.zeitachse-schritt.ist-erreicht .zeitachse-knoten::before { background: var(--rot); border-color: var(--rot); }
.zeitachse-schritt.ist-erreicht .zeitachse-knoten::after { animation: knoten-schlag 900ms var(--ease-out) 1; }
.zeitachse-nr { font-family: var(--font-display); font-weight: 700; font-style: italic; font-size: 1.25rem; line-height: 1; color: var(--rot); }
.zeitachse-schritt h3 { margin-top: var(--s-2); font-size: clamp(1.3rem, 1.1rem + 0.7vw, 1.6rem); }
.zeitachse-schritt h3 + p { margin-top: var(--s-2); color: var(--grau); max-width: 38ch; }
@media (min-width: 960px) {
  .zeitachse:not(.zeitachse-kompakt) { grid-template-columns: repeat(var(--n, 4), 1fr); gap: var(--s-6); padding: 52px 0 0; }
  .zeitachse:not(.zeitachse-kompakt)::before,
  .zeitachse:not(.zeitachse-kompakt)::after { left: 0; right: 0; top: 11px; bottom: auto; width: auto; height: 2px; }
  .zeitachse:not(.zeitachse-kompakt)::after { transform-origin: left center; transform: scaleX(var(--fortschritt)); }
  .zeitachse:not(.zeitachse-kompakt) .zeitachse-knoten { left: 0; top: -52px; }
}
/* auf dunkel: Linie und Knoten in Datenblau */
.bg-dunkel .zeitachse::before { background: var(--linie-dunkel); }
.bg-dunkel .zeitachse::after { background: var(--blau); }
.bg-dunkel .zeitachse-knoten::before { background: var(--nacht); border-color: var(--linie-dunkel); }
.bg-dunkel .zeitachse-knoten::after { border-color: var(--blau); }
html:not(.js) .bg-dunkel .zeitachse-knoten::before,
.bg-dunkel .zeitachse-schritt.ist-erreicht .zeitachse-knoten::before { background: var(--blau); border-color: var(--blau); }
.bg-dunkel .zeitachse-nr { color: var(--blau); }
.bg-dunkel .zeitachse-schritt h3 + p { color: var(--nebel); }
/* kompakt (Kontakt-Kopf): immer senkrecht, füllt sich einmal beim Laden */
.zeitachse-kompakt { gap: var(--s-4); }
ol.zeitachse-kompakt { padding-left: 44px; }
.zeitachse-kompakt .zeitachse-knoten { left: -44px; top: -2px; }
.zeitachse-kompakt .zeitachse-schritt { display: grid; grid-template-columns: 2.2rem 1fr; align-items: baseline; }
.zeitachse-kompakt .zeitachse-schritt > p:last-child { font-weight: 500; }
.zeitachse-kompakt::after { animation: achse-fuellen 1.6s var(--ease-out) 500ms both; }
.zeitachse-kompakt .zeitachse-knoten::before { animation: knoten-an 300ms var(--ease-out) calc(700ms + var(--i, 0) * 420ms) both; }
/* kompakt mit data-zeitachse (Ratgeber, weiter unten auf der Seite): füllt sich beim Scrollen statt beim Laden */
.zeitachse-kompakt[data-zeitachse]::after, .zeitachse-kompakt[data-zeitachse] .zeitachse-knoten::before { animation: none; }
@keyframes achse-fuellen { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes knoten-an { from { background: var(--nacht); border-color: var(--linie-dunkel); } to { background: var(--blau); border-color: var(--blau); } }

/* ---- V15 Finale auf allen Unterseiten ---- */
.finale-titel-lang { font-size: var(--fs-display); max-width: 17ch; line-height: 1; }
.finale .pulse-line { width: min(520px, 86%); margin-top: var(--s-5); color: var(--rot); }
.finale .finale-hinweis { margin-top: var(--s-6); max-width: 62ch; font-size: var(--fs-meta); color: var(--nebel); }

/* ---- FAQ redaktionell: Kopf klebt links, Fragen rechts ---- */
.faq { display: grid; gap: var(--s-6); }
@media (min-width: 960px) {
  .faq { grid-template-columns: 5fr 7fr; gap: var(--s-8); align-items: start; }
  .faq-kopf { position: sticky; top: calc(var(--header-h-klein) + var(--s-7)); }
}
.faq-kopf .section-kopf-text a { font-weight: 600; white-space: nowrap; }
.akkordeon summary { transition: color var(--t-ui) var(--ease-out); }
.akkordeon summary:hover { color: var(--rot-tief); }
.akkordeon details[open] .akkordeon-inhalt { animation: faq-auf 320ms var(--ease-out); }
@keyframes faq-auf { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ---- Zwei Stimmen: erste groß und dunkel ---- */
@media (min-width: 960px) { .testimonials-duo { grid-template-columns: 7fr 5fr; } }
.testimonials-duo .testimonial:first-of-type { background: var(--nacht); border-color: var(--nacht); color: var(--licht); justify-content: center; }
.testimonials-duo .testimonial:first-of-type blockquote { font-size: clamp(1.45rem, 1.1rem + 1vw, 2rem); line-height: 1.3; font-weight: 600; }
.testimonials-duo .testimonial:first-of-type .pulse-marker { color: var(--blau); width: 40px; height: 20px; }
.testimonials-duo .testimonial:first-of-type .t-ort { color: var(--nebel); }
@media (min-width: 960px) { .testimonials-duo .testimonial:first-of-type { padding: var(--s-7); } }

/* ---- Preisblock: Stencil-Ecke, Zeilen „drucken" sich nacheinander ---- */
.preisblock { clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%); }
.js .preisblock .puls-liste.folge-bereit li { opacity: 0; transform: translateY(6px); }
.js .preisblock .puls-liste.folge-los li {
  opacity: 1; transform: none;
  transition: opacity 260ms var(--ease-out) calc(var(--i, 0) * 90ms), transform 260ms var(--ease-out) calc(var(--i, 0) * 90ms);
}

/* ---- Drei Worte (Phasen, Arbeitsweise) ---- */
.phasen { display: grid; gap: var(--s-6); margin: var(--s-7) 0 0; padding: 0; list-style: none; }
@media (min-width: 768px) {
  .phasen { grid-template-columns: repeat(3, 1fr); gap: 0; }
  .phasen > li { padding-inline: var(--s-6); }
  .phasen > li:first-child { padding-left: 0; }
  .phasen > li + li { border-left: 1px solid var(--nebel); }
}
.phasen-nr { font-family: var(--font-display); font-weight: 700; font-style: italic; font-size: 1.15rem; color: var(--rot); }
.phasen-wort { margin-top: var(--s-2); font-family: var(--font-display); font-weight: 700; font-size: clamp(2.3rem, 1.4rem + 3vw, 3.5rem); line-height: 1; letter-spacing: -0.01em; color: var(--nacht); }
.phasen-wort + p { margin-top: var(--s-3); color: var(--grau); max-width: 32ch; }

/* ---- Grenz-Box: ehrliche Abgrenzung, ruhig und klar ---- */
.grenze {
  background: var(--flaeche); padding: var(--s-6) var(--s-5);
  clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 0 100%);
}
@media (min-width: 640px) { .grenze { padding: var(--s-7); } }
.grenze h2, .grenze h3 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem); }
.bg-flaeche .grenze { background: var(--weiss); }

/* ---- V18 Der Beleg: alle Preise auf einem Kassenzettel, der sich ausdruckt ---- */
.beleg-layout { display: grid; gap: var(--s-7); align-items: center; }
@media (min-width: 960px) { .beleg-layout { grid-template-columns: 6fr 5fr; gap: var(--s-8); } }
.beleg-layout .statement { max-width: 12ch; }
.beleg-drucker { width: 100%; max-width: 460px; justify-self: center; }
.beleg-schlitz {
  position: relative; z-index: 2; height: 18px; margin-inline: -12px;
  background: linear-gradient(#2B323B, #1C2128); border: 1px solid rgb(245 248 250 / 0.22); border-radius: var(--radius-m);
}
.bg-dunkel .beleg p { color: var(--nacht); } /* schlägt .bg-dunkel p: der Beleg ist Papier */
.bg-dunkel .beleg .beleg-fuss { color: var(--grau); }
.beleg-schlitz::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: 5px; height: 2px; border-radius: 1px; background: #07090B; }
.beleg-schacht { overflow: hidden; margin-top: -8px; padding: 0 14px 28px; margin-inline: -14px; }
.beleg {
  position: relative; background: var(--weiss); color: var(--nacht);
  padding: var(--s-7) var(--s-5) var(--s-7);
  font-variant-numeric: tabular-nums;
  transform: rotate(-1.2deg); transform-origin: top center;
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 16px 100%;
          mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 16px 100%;
}
@media (min-width: 640px) { .beleg { padding-inline: var(--s-6); } }
.beleg-kopf {
  text-align: center; font-family: var(--font-display); font-weight: 700; font-size: 1.35rem;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--nacht);
  padding-bottom: var(--s-4); border-bottom: 1.5px dashed var(--grau);
}
.beleg-kopf span { display: block; margin-top: var(--s-1); font-family: var(--font-text); font-weight: 500; font-size: var(--fs-kicker); letter-spacing: 0.04em; text-transform: none; color: var(--grau); }
.beleg-posten { margin: var(--s-3) 0 0; }
.beleg-posten > div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); padding-block: 7px; font-size: 0.975rem; }
.beleg-posten dt { flex: 1; min-width: 0; }
.beleg-posten dt a { color: var(--nacht); text-decoration: none; }
.beleg-posten dt a:hover { color: var(--rot-tief); text-decoration: underline; text-underline-offset: 3px; }
.beleg-posten dd { margin: 0; font-weight: 600; white-space: nowrap; }
.beleg-posten dd small { font-weight: 500; color: var(--grau); }
.beleg-summe { margin-top: var(--s-3); padding-top: var(--s-4) !important; border-top: 1.5px dashed var(--grau); font-family: var(--font-display); font-size: 1.35rem !important; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; }
.beleg-summe dd { color: var(--rot-tief); font-weight: 700; }
.beleg-fuss { margin-top: var(--s-5); text-align: center; font-size: var(--fs-meta); color: var(--grau); line-height: 1.5; }
.beleg-puls { display: block; width: 72%; height: 26px; margin: var(--s-4) auto 0; color: var(--rot); overflow: visible; }
.beleg-puls path { fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.js .beleg-drucker.folge-bereit .beleg { transform: translateY(-101%) rotate(0deg); }
.js .beleg-drucker.folge-los .beleg { transform: translateY(0) rotate(-1.2deg); transition: transform 1.8s cubic-bezier(0.3, 0.08, 0.25, 1) 150ms; }

/* ---- V17 Wegweiser: zwei Fragen, eine Richtung (Schwester des Energie-Checks) ---- */
.wegweiser { display: grid; row-gap: var(--s-6); grid-template-areas: "kopf" "fragen" "ergebnis"; }
.wegweiser-kopf { grid-area: kopf; }
.weg-fragen { grid-area: fragen; display: grid; gap: var(--s-6); }
.weg-ergebnis { grid-area: ergebnis; }
@media (min-width: 960px) {
  .wegweiser { grid-template-columns: 7fr 5fr; column-gap: var(--s-8); align-items: start; grid-template-areas: "kopf ergebnis" "fragen ergebnis"; }
  .weg-ergebnis { position: sticky; top: calc(var(--header-h-klein) + var(--s-6)); }
}
.weg-frage { margin: 0; padding: 0; border: 0; min-width: 0; }
.weg-frage legend { display: flex; align-items: center; gap: var(--s-3); padding: 0; margin-bottom: var(--s-4); font-family: var(--font-display); font-weight: 600; font-size: clamp(1.35rem, 1.1rem + 0.9vw, 1.7rem); }
.weg-nr { display: grid; place-items: center; width: 32px; height: 32px; flex-shrink: 0; background: var(--nacht); color: var(--weiss); font-size: 1rem; clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%); }
.weg-optionen { display: grid; gap: var(--s-3); }
@media (min-width: 640px) { .weg-optionen { grid-template-columns: 1fr 1fr; } }
.weg-option {
  position: relative; display: flex; gap: var(--s-4); align-items: center;
  padding: var(--s-4) var(--s-5); min-height: 64px;
  background: var(--weiss); border: 1.5px solid var(--nebel); border-radius: var(--radius-m);
  font-size: var(--fs-lead); font-weight: 500; line-height: 1.35; cursor: pointer;
  transition: border-color var(--t-ui) var(--ease-out), background-color var(--t-ui) var(--ease-out), transform 200ms var(--ease-out);
}
.weg-option:hover { border-color: var(--grau); transform: translateX(4px); }
.weg-option input { position: absolute; opacity: 0; pointer-events: none; }
.weg-option::before {
  content: ""; flex-shrink: 0; width: 22px; height: 22px; border: 2px solid var(--grau); border-radius: 50%;
  transition: border-width 200ms var(--ease-out), border-color 200ms var(--ease-out);
}
.weg-option:has(input:checked) { border-color: var(--rot); background: #FFF5F5; }
.weg-option:has(input:checked)::before { border: 7px solid var(--rot); }
.weg-option:has(input:focus-visible) { outline: 3px solid var(--nacht); outline-offset: 2px; }
.weg-ergebnis {
  background: var(--nacht); color: var(--licht);
  border-radius: var(--radius-m); padding: var(--s-6) var(--s-5);
  clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 0 100%);
  min-height: 300px;
}
@media (min-width: 960px) { .weg-ergebnis { padding: var(--s-7) var(--s-6); } }
.weg-ergebnis .pulse-line { width: 100%; height: 32px; margin-top: var(--s-3); color: var(--blau); }
.weg-inhalt { margin-top: var(--s-4); }
.weg-inhalt.ist-neu { animation: weg-ein var(--t-medium) var(--ease-out); }
@keyframes weg-ein { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.weg-leer { color: var(--nebel); font-size: var(--fs-lead); }
.weg-name { font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem, 1.5rem + 1.6vw, 2.8rem); line-height: 1.02; color: var(--weiss); }
.weg-preis { margin-top: var(--s-2); font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; color: var(--blau); font-variant-numeric: tabular-nums; }
.weg-preis small { font-family: var(--font-text); font-size: 0.9rem; font-weight: 500; color: var(--nebel); }
.weg-text { margin-top: var(--s-3); color: var(--licht); }
.weg-aktion { margin-top: var(--s-5); display: grid; gap: var(--s-3); justify-items: start; }
.weg-aktion a:not(.btn) { color: var(--licht); text-decoration-color: var(--blau); text-underline-offset: 3px; }
.weg-extra { margin-top: var(--s-5); padding-top: var(--s-3); border-top: 1px solid var(--linie-dunkel); font-size: var(--fs-meta); color: var(--nebel); }
.weg-extra a { color: var(--licht); }
.weg-ergebnis :focus-visible { outline-color: var(--blau); }

/* ---- V19 Trainingswoche: Beispielwoche wie in der App, drei Phasen umschaltbar ---- */
.woche {
  background: var(--nacht); color: var(--licht);
  border-radius: var(--radius-m); padding: var(--s-5);
  clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 0 100%);
}
@media (min-width: 640px) { .woche { padding: var(--s-6); } }
.woche-phasen { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); }
.woche-phase {
  min-height: 44px; padding: 0 var(--s-4);
  background: transparent; color: var(--nebel);
  border: 1px solid var(--linie-dunkel); border-radius: var(--radius-s);
  font-size: var(--fs-meta); font-weight: 600; letter-spacing: 0.02em; cursor: pointer;
  transition: background-color var(--t-ui) var(--ease-out), color var(--t-ui) var(--ease-out), border-color var(--t-ui) var(--ease-out);
}
.woche-phase:hover { color: var(--weiss); border-color: var(--nebel); }
.woche-phase[aria-pressed="true"] { background: var(--licht); color: var(--nacht); border-color: var(--licht); }
.woche :focus-visible { outline-color: var(--blau); }
.woche-flaeche {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--s-2);
  margin-top: var(--s-5); padding: var(--s-4) var(--s-3) var(--s-3);
  background-color: var(--nacht-2);
  background-image: linear-gradient(var(--linie-dunkel) 1px, transparent 1px);
  background-size: 100% 25%;
  border-radius: var(--radius-s);
}
.woche-tag { display: grid; gap: var(--s-2); justify-items: center; --l: 0; --h: 0; }
.woche-saeule { position: relative; width: 100%; max-width: 38px; height: clamp(120px, 18vw, 170px); }
.woche-saeule > span { position: absolute; left: 0; right: 0; bottom: 0; height: 100%; border-radius: 2px 2px 0 0; transform-origin: bottom center; transition: transform 650ms var(--ease-out) calc(var(--t, 0) * 45ms); }
.woche-locker { background: var(--blau); transform: scaleY(var(--l)); }
.woche-hart { background: var(--rot); transform: translateY(calc(-100% * var(--l))) scaleY(var(--h)); }
.woche-name { font-size: var(--fs-kicker); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--nebel); }
.woche-saeule::after { content: ""; position: absolute; left: 50%; bottom: 6px; width: 12px; height: 2px; margin-left: -6px; background: var(--grau); opacity: 0; transition: opacity 300ms var(--ease-out); }
.woche-tag.ist-ruhe .woche-saeule::after { opacity: 1; }
.woche-saeule > .woche-marke { position: absolute; top: auto; right: auto; left: 50%; height: auto; bottom: calc((var(--l) + var(--h)) * 100% + 4px); transform: translateX(-50%); font-size: 0.7rem; font-weight: 700; line-height: 1; letter-spacing: 0.06em; text-transform: uppercase; color: var(--rot); opacity: 0; transition: opacity 300ms var(--ease-out) 300ms, bottom 650ms var(--ease-out) calc(var(--t, 0) * 45ms); white-space: nowrap; }
@media (max-width: 479px) { .woche-saeule > .woche-marke { font-size: 0.6rem; letter-spacing: 0.03em; } }
.woche-tag.ist-rennen .woche-marke, .woche-tag.ist-markiert .woche-marke { opacity: 1; }
.woche-tag.marke-neutral .woche-marke { color: var(--licht); }
.woche-legende { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin-top: var(--s-4); font-size: var(--fs-meta); color: var(--nebel); }
.woche-legende span { display: inline-flex; align-items: center; gap: var(--s-2); }
.woche-legende span::before { content: ""; width: 12px; height: 12px; border-radius: 2px; background: var(--blau); }
.woche-legende .leg-hart::before { background: var(--rot); }
.woche-legende .leg-ruhe::before { height: 2px; background: var(--grau); }
.woche figcaption { margin-top: var(--s-4); font-size: var(--fs-meta); color: var(--nebel); line-height: 1.5; }
.woche figcaption strong { color: var(--licht); font-weight: 600; }

/* ---- V20 Wochen-Akku: zwölf Segmente laden sich entlang der Schiene ---- */
.wochen-akku {
  margin-top: var(--s-6); background: var(--nacht); color: var(--licht);
  padding: var(--s-4) var(--s-5);
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
}
.wochen-akku-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4); font-size: var(--fs-kicker); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--nebel); }
.wochen-akku-kopf b { font-family: var(--font-display); font-size: 1.7rem; letter-spacing: 0; color: var(--blau); font-variant-numeric: tabular-nums; }
.wochen-akku-segmente { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; height: 22px; margin-top: var(--s-3); }
.wochen-akku-segmente span { background: var(--nacht-2); border: 1px solid var(--linie-dunkel); border-radius: 1px; transition: background-color 200ms var(--ease-out), border-color 200ms var(--ease-out); }
.wochen-akku-segmente span.ist-voll { background: var(--blau); border-color: var(--blau); }
.wochen-akku-segmente span.ist-aktuell { animation: segment-schlag 700ms var(--ease-out) 1; }
@keyframes segment-schlag { 0% { transform: scaleY(1); } 30% { transform: scaleY(1.45); } 100% { transform: scaleY(1); } }
.wochen-akku-fuss { display: flex; justify-content: space-between; margin-top: var(--s-2); font-size: var(--fs-kicker); color: var(--nebel); }
@media (max-width: 959px) {
  .ablauf-wochen { row-gap: 0; }
  .ablauf-wochen .ablauf-kopf { display: contents; }
  .ablauf-wochen .wochen-akku { position: sticky; top: calc(var(--header-h) + var(--s-2)); z-index: 5; margin-block: var(--s-5) var(--s-7); }
}

/* ---- V21 Laktatkurve: Schema mit Schwellen, Zeiger per Regler ---- */
.laktat {
  background: var(--nacht); color: var(--licht);
  border-radius: var(--radius-m); padding: var(--s-5);
  clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 0 100%);
}
@media (min-width: 640px) { .laktat { padding: var(--s-6); } }
.laktat-flaeche { margin-top: var(--s-4); background: var(--nacht-2); border-radius: var(--radius-s); }
.laktat-grafik { display: block; width: 100%; height: auto; overflow: visible; }
.laktat-grafik .zone-locker { fill: rgb(80 176 216 / 0.1); }
.laktat-grafik .zone-mitte { fill: rgb(245 248 250 / 0.05); }
.laktat-grafik .zone-hart { fill: rgb(240 72 72 / 0.13); }
.laktat-grafik .achse { stroke: var(--nebel); stroke-width: 1.5; opacity: 0.55; }
.laktat-grafik .schwelle { stroke: var(--licht); stroke-width: 1; stroke-dasharray: 4 5; opacity: 0.5; }
.laktat-grafik text { fill: var(--nebel); font-family: var(--font-text); font-size: 13px; font-weight: 600; letter-spacing: 0.04em; }
.laktat-grafik .zonen-text { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.8; }
@media (max-width: 639px) {
  /* SVG-Einheiten: auf dem Handy wird die Grafik ~0,5-fach gezeigt, Beschriftung bleibt lesbar */
  .laktat-grafik text { font-size: 22px; }
  .laktat-grafik .zonen-text { font-size: 19px; letter-spacing: 0.04em; }
}
.laktat-grafik .hf-kurve { fill: none; stroke: var(--nebel); stroke-width: 1.5; stroke-dasharray: 6 5; opacity: 0.55; }
.laktat-grafik .laktat-kurve { fill: none; stroke: var(--blau); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.laktat-grafik .stufe { fill: var(--nacht-2); stroke: var(--blau); stroke-width: 2; }
.laktat-grafik .zeiger-linie { stroke: var(--licht); stroke-width: 1; stroke-dasharray: 3 4; }
.laktat-grafik .zeiger-punkt { fill: var(--rot); stroke: var(--licht); stroke-width: 2; }
.laktat-zeiger { opacity: 0; transition: opacity 300ms var(--ease-out); }
.laktat.ist-aktiv .laktat-zeiger { opacity: 1; }
.js .laktat.zeichnen-bereit .laktat-kurve { stroke-dashoffset: 1; }
.js .laktat.zeichnen-bereit .stufe { opacity: 0; }
.js .laktat.zeichnen-los .laktat-kurve { stroke-dashoffset: 0; transition: stroke-dashoffset 1.3s cubic-bezier(0.45, 0, 0.55, 1); }
.js .laktat.zeichnen-los .stufe { opacity: 1; transition: opacity 250ms var(--ease-out) calc(var(--i, 0) * 150ms + 200ms); }
.laktat-steuerung, .saison-steuerung { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: var(--s-4); margin-top: var(--s-5); }
.laktat-steuerung label, .saison-steuerung label { font-size: var(--fs-kicker); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--nebel); }
.laktat-steuerung input[type="range"], .saison-steuerung input[type="range"] { width: 100%; height: 44px; accent-color: var(--rot); background: transparent; cursor: pointer; }
.laktat-anzeige { margin-top: var(--s-3); min-height: 4.6em; color: var(--licht); }
.laktat-anzeige strong { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.45rem; color: var(--weiss); }
.laktat[data-zone="hart"] .laktat-anzeige strong { color: var(--rot); }
.laktat[data-zone="locker"] .laktat-anzeige strong { color: var(--blau); }
.laktat figcaption { margin-top: var(--s-4); padding-top: var(--s-3); border-top: 1px solid var(--linie-dunkel); font-size: var(--fs-meta); color: var(--nebel); }
.laktat :focus-visible { outline-color: var(--blau); }

/* ---- V22 Sauerstoff-Monitor (IHHT): Wechsel aus wenig und viel O₂ ---- */
.monitor-spur .o2-tief { stroke: var(--rot); stroke-width: 2.5; }
.monitor-spur .o2-hoch { stroke: var(--blau); stroke-width: 2.5; }
.o2-label { position: absolute; left: var(--s-3); z-index: 1; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.o2-label-hoch { top: 12%; color: var(--blau); }
.o2-label-tief { bottom: 12%; color: var(--rot); }
.o2-legende { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin-top: var(--s-3); font-size: var(--fs-meta); color: var(--nebel); }
.o2-legende span { display: inline-flex; align-items: center; gap: var(--s-2); }
.o2-legende span::before { content: ""; width: 18px; height: 3px; border-radius: 2px; background: var(--rot); }
.o2-legende .leg-hoch::before { background: var(--blau); }

/* ---- Mess-Menü (Diagnostik): drei Messwege als Einstiege ---- */
.mess-menue { display: grid; gap: var(--s-4); margin-top: var(--s-7); }
@media (min-width: 768px) { .mess-menue { grid-template-columns: repeat(3, 1fr); } .mess-kachel { min-height: 210px; } }
.mess-kachel {
  position: relative; display: grid; gap: var(--s-2); align-content: start;
  padding: var(--s-5);
  background: var(--nacht); color: var(--licht); text-decoration: none;
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
  transition: transform var(--t-ui) var(--ease-out), background-color var(--t-ui) var(--ease-out);
}
.mess-kachel:hover, .mess-kachel:focus-visible { transform: translateY(-4px); background: #1A1F25; }
.mess-kachel:focus-visible { outline: 3px solid var(--blau); outline-offset: 3px; }
.mess-spur { width: 100%; height: 48px; margin-bottom: var(--s-3); color: var(--blau); overflow: visible; }
@media (max-width: 767px) { .mess-spur { height: 36px; margin-bottom: var(--s-2); } }
.mess-spur path { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.mess-kachel:hover .mess-spur path, .mess-kachel:focus-visible .mess-spur path { animation: marker-neu 700ms linear; }
.mess-preis { font-size: var(--fs-kicker); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--nebel); }
.mess-kachel strong { font-family: var(--font-display); font-weight: 700; font-size: 2.3rem; line-height: 1; color: var(--weiss); }
.mess-kachel .mess-was { color: var(--licht); }
.mess-kachel .mess-pfeil { margin-top: auto; padding-top: var(--s-3); font-weight: 600; color: var(--blau); transition: transform 200ms var(--ease-out); }
.mess-kachel:hover .mess-pfeil { transform: translateX(6px); }
section[id] { scroll-margin-top: calc(var(--header-h-klein) + var(--s-4)); }

/* ---- Werdegang auf der Schiene + Rennprotokoll ---- */
.schiene-werdegang { gap: var(--s-5); }
.schiene-werdegang .schiene-nr { font-size: 1.45rem; }
.werdegang-text { margin-top: var(--s-1); font-size: var(--fs-lead); font-weight: 500; line-height: 1.45; max-width: 46ch; }
.rennprotokoll { margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--linie-dunkel); }
.rennprotokoll > li {
  display: grid; grid-template-columns: 1fr auto; grid-template-areas: "zeit wert" "titel wert";
  align-items: center; gap: var(--s-1) var(--s-4); padding-block: var(--s-4);
  border-top: 1px solid var(--linie-dunkel);
}
@media (min-width: 768px) {
  .rennprotokoll > li { grid-template-columns: 6rem 1fr auto; grid-template-areas: "zeit titel wert"; padding-block: var(--s-5); }
}
.rp-zeit { grid-area: zeit; font-family: var(--font-display); font-weight: 700; font-style: italic; font-size: 1.15rem; color: var(--nebel); }
.rp-titel { grid-area: titel; font-size: var(--fs-lead); font-weight: 600; color: var(--weiss); line-height: 1.3; }
.rp-titel small { display: block; font-size: var(--fs-meta); font-weight: 500; color: var(--nebel); }
.rp-wert { grid-area: wert; justify-self: end; text-align: right; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.5rem, 1rem + 2vw, 2.6rem); line-height: 1; color: var(--blau); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rp-wert.rp-text { font-size: clamp(1.2rem, 1rem + 1vw, 1.7rem); }
.js .rennprotokoll.folge-bereit > li { opacity: 0; transform: translateX(-12px); }
.js .rennprotokoll.folge-los > li { opacity: 1; transform: none; transition: opacity var(--t-reveal) var(--ease-out) calc(var(--i, 0) * 110ms), transform var(--t-reveal) var(--ease-out) calc(var(--i, 0) * 110ms); }

/* ---- Vortragsthemen als große Liste ---- */
.themen-liste { margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--nebel); }
.themen-liste > li { position: relative; display: grid; gap: var(--s-2) var(--s-6); padding-block: var(--s-6); border-top: 1px solid var(--nebel); }
@media (min-width: 960px) { .themen-liste > li { grid-template-columns: 5rem minmax(0, 1.25fr) minmax(0, 1fr); align-items: baseline; padding-block: var(--s-7); } }
.themen-liste > li::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--nacht); transform-origin: left center; }
.js .themen-liste > li.anim-bereit::before { transform: scaleX(0); }
.js .themen-liste > li.anim-los::before { transform: scaleX(1); transition: transform var(--t-lang) var(--ease-out) 80ms; }
.themen-nr { font-family: var(--font-display); font-weight: 700; font-style: italic; font-size: 1.25rem; color: var(--rot); }
.themen-liste h3 { font-size: clamp(2rem, 1.1rem + 3.4vw, 3.6rem); line-height: 1; letter-spacing: -0.01em; }
.themen-liste h3 + p { font-size: var(--fs-lead); color: var(--grau); }

/* ---- Kontakt-Kacheln ---- */
.kontakt-kacheln { display: grid; gap: var(--s-3); margin: var(--s-4) 0 0; padding: 0; list-style: none; }
.kontakt-kachel {
  display: grid; grid-template-columns: 44px 1fr; gap: var(--s-1) var(--s-4); align-items: center;
  padding: var(--s-4) var(--s-5); min-height: 76px;
  background: var(--nacht); color: var(--licht); text-decoration: none;
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
  transition: background-color var(--t-ui) var(--ease-out), transform var(--t-ui) var(--ease-out);
}
.kontakt-kachel:hover, .kontakt-kachel:focus-visible { background: #1A1F25; transform: translateX(4px); }
.kontakt-kachel:focus-visible { outline: 3px solid var(--blau); outline-offset: 3px; }
.kontakt-kachel .raster-chip { grid-row: span 2; width: 44px; height: 44px; background: var(--nacht-2); }
.kontakt-kachel:hover .raster-chip path { animation: marker-neu 560ms linear; }
.kachel-label { font-size: var(--fs-kicker); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--nebel); }
.kachel-wert { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.2rem, 1rem + 0.8vw, 1.5rem); line-height: 1.2; color: var(--weiss); overflow-wrap: anywhere; }

/* ---- Slogan-Band als Zitat (Über mich) ---- */
.slogan-zitat {
  font-family: var(--font-display); font-weight: 700; font-style: italic; text-transform: uppercase;
  font-size: clamp(2.1rem, 1rem + 4.6vw, 4.6rem); line-height: 0.98; letter-spacing: -0.005em; max-width: 17ch;
}
.slogan-zitat .akzent { color: var(--rot); }

/* ============================================================
   Ratgeber (2026-09-30): Leseseite mit Inhalt-Puls (V24) und Saisonplaner (V23)
   ============================================================ */
/* Text bleibt in der Lesespalte (bündig mit Kopf und Bild); ab 1280px steht
   das Inhaltsverzeichnis links daneben und liest mit. */
.ratgeber-layout { display: grid; gap: var(--s-6); max-width: var(--container-text); margin: var(--s-7) auto 0; padding-inline: var(--gutter); }
@media (min-width: 1280px) {
  .ratgeber-layout {
    max-width: 1440px; align-items: start; column-gap: var(--s-7);
    grid-template-columns: minmax(0, 1fr) minmax(0, calc(var(--container-text) - 2 * var(--gutter))) minmax(0, 1fr);
  }
  .ratgeber-layout > .inhalt { grid-column: 1; grid-row: 1; justify-self: end; width: 100%; max-width: 240px; }
  .ratgeber-layout > .prosa { grid-column: 2; grid-row: 1; }
}
.prosa h2[id] { scroll-margin-top: calc(var(--header-h-klein) + var(--s-5)); }
.prosa > h3 { margin-top: var(--s-6); font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.45rem); line-height: 1.2; }
.prosa > h3 + * { margin-top: var(--s-2); }
.prosa > figure.woche, .prosa > figure.saisonplaner { margin-top: var(--s-6); }
.prosa > figure.woche + *, .prosa > figure.saisonplaner + * { margin-top: var(--s-6); }
.prosa .akkordeon summary { font-size: 1.0625rem; }
.prosa .akkordeon-inhalt p { font-size: 1.0625rem; }

/* V24 Inhalt-Puls: Inhaltsverzeichnis, das mitliest */
.inhalt {
  background: var(--flaeche); padding: 0 var(--s-5);
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
}
.inhalt summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  min-height: 52px; cursor: pointer; list-style: none;
  font-size: var(--fs-kicker); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--grau);
}
.inhalt summary::-webkit-details-marker { display: none; }
.inhalt summary::after { content: "+"; font-family: var(--font-display); font-size: 1.5rem; line-height: 1; color: var(--rot-tief); transition: transform 200ms var(--ease-out); }
.inhalt[open] summary::after { transform: rotate(45deg); }
.inhalt ol { margin: 0; padding: 0 0 var(--s-4); list-style: none; counter-reset: inhalt; }
.inhalt li { counter-increment: inhalt; }
.inhalt a {
  display: grid; grid-template-columns: 30px 1fr; gap: var(--s-2); align-items: baseline;
  padding-block: 6px; color: var(--grau); text-decoration: none; font-size: 0.95rem; line-height: 1.35;
  transition: color var(--t-ui) var(--ease-out);
}
.inhalt a::before { content: counter(inhalt, decimal-leading-zero); font-family: var(--font-display); font-weight: 700; font-style: italic; color: var(--grau); opacity: 0.7; }
.inhalt a:hover { color: var(--nacht); }
.inhalt a[aria-current] { color: var(--nacht); font-weight: 600; }
.inhalt a[aria-current]::before {
  content: ""; align-self: center; width: 24px; height: 12px; opacity: 1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 13'%3E%3Cpath d='M0 6.5h8l2.5 0 2-5 2.5 9.5 2-4.5H26' stroke='%23F04848' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat left center / contain;
}
@media (min-width: 1280px) {
  .inhalt { position: sticky; top: calc(var(--header-h-klein) + var(--s-6)); background: transparent; padding: 0; clip-path: none; }
  .inhalt summary { pointer-events: none; min-height: 0; margin-bottom: var(--s-3); padding-bottom: var(--s-3); border-bottom: 1px solid var(--nebel); }
  .inhalt summary::after { display: none; }
}

/* V23 Saisonplaner: Regler für die Wochen bis zum Ziel, Phasen als Balken mit „x bis y Wochen vor dem Ziel“ (Schema, ohne Kalenderdaten) */
.saisonplaner {
  background: var(--nacht); color: var(--licht);
  border-radius: var(--radius-m); padding: var(--s-5);
  clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 0 100%);
}
@media (min-width: 640px) { .saisonplaner { padding: var(--s-6); } }
.saisonplaner :focus-visible { outline-color: var(--blau); }
.saison-wochen { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--s-3); margin-top: var(--s-5); font-size: var(--fs-lead); font-weight: 500; line-height: 1.3; color: var(--licht); }
.saison-wochen b { font-family: var(--font-display); font-size: clamp(2.6rem, 2rem + 2vw, 3.4rem); font-weight: 700; line-height: 1; color: var(--blau); font-variant-numeric: tabular-nums; }
.saison-balken { display: flex; gap: 3px; height: 22px; margin-top: var(--s-4); }
.saison-balken .seg { flex: var(--w, 1) 1 0; min-width: 0; border-radius: 2px; transition: flex-grow var(--t-medium) var(--ease-out); }
.saison-achse { display: flex; justify-content: space-between; margin-top: var(--s-2); font-size: var(--fs-kicker); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--nebel); }
.seg-grundlage, .saison-legende .leg-grundlage::before { background: var(--blau); }
.seg-aufbau, .saison-legende .leg-aufbau::before { background: rgb(240 72 72 / 0.55); }
.seg-spezifisch, .saison-legende .leg-spezifisch::before { background: var(--rot); }
.seg-feinschliff, .saison-legende .leg-feinschliff::before { background: var(--licht); }
.saison-legende { display: grid; gap: var(--s-2); margin: var(--s-4) 0 0; padding: 0; list-style: none; font-size: var(--fs-meta); line-height: 1.4; color: var(--nebel); }
@media (min-width: 640px) { .saison-legende { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); column-gap: var(--s-5); } }
.saison-legende li { display: flex; align-items: baseline; gap: var(--s-2); }
.saison-legende li::before { content: ""; flex-shrink: 0; width: 12px; height: 12px; border-radius: 2px; transform: translateY(1px); }
.saison-legende b { color: var(--licht); font-weight: 600; }
.saison-legende li.ist-jetzt b { color: var(--weiss); }
.saison-jetzt { margin-top: var(--s-5); padding: var(--s-4); background: var(--nacht-2); border-left: 3px solid var(--blau); border-radius: var(--radius-s); font-size: 1rem; line-height: 1.5; color: var(--licht); }
.saison-jetzt strong { color: var(--weiss); font-weight: 600; }
.saisonplaner figcaption { margin-top: var(--s-4); font-size: var(--fs-meta); line-height: 1.5; color: var(--nebel); }

/* V25 Stufentest: der Laktattest läuft Stufe für Stufe ab (Schema, Farben wie V21) */
.stufentest {
  background: var(--nacht); color: var(--licht);
  border-radius: var(--radius-m); padding: var(--s-5);
  clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 0 100%);
}
@media (min-width: 640px) { .stufentest { padding: var(--s-6); } }
.stufentest :focus-visible { outline-color: var(--blau); }
.prosa > figure.stufentest { margin-top: var(--s-6); }
.prosa > figure.stufentest + * { margin-top: var(--s-6); }
.stufentest-anzeige { margin-top: var(--s-4); min-height: 3.1em; font-size: 1rem; line-height: 1.45; color: var(--licht); }
.stufentest-anzeige b { display: block; font-family: var(--font-display); font-size: 1.4rem; font-weight: 700; line-height: 1.15; color: var(--weiss); font-variant-numeric: tabular-nums; }
.stufentest-flaeche { margin-top: var(--s-3); background: var(--nacht-2); border-radius: var(--radius-s); }
.stufentest-grafik { display: block; width: 100%; height: auto; overflow: visible; }
.stufentest-grafik .zone-locker { fill: rgb(80 176 216 / 0.1); }
.stufentest-grafik .zone-mitte { fill: rgb(245 248 250 / 0.05); }
.stufentest-grafik .zone-hart { fill: rgb(240 72 72 / 0.13); }
.stufentest-grafik .achse { stroke: var(--nebel); stroke-width: 1.5; opacity: 0.55; }
.stufentest-grafik .schwelle { stroke: var(--licht); stroke-width: 1; stroke-dasharray: 4 5; opacity: 0.5; }
.stufentest-grafik text { fill: var(--nebel); font-family: var(--font-text); font-size: 13px; font-weight: 600; letter-spacing: 0.04em; }
.stufentest-grafik .zonen-text { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.8; }
@media (max-width: 639px) {
  .stufentest-grafik text { font-size: 22px; }
  .stufentest-grafik .zonen-text { font-size: 19px; letter-spacing: 0.04em; }
}
.stufentest-grafik .st-laktat { fill: none; stroke: var(--blau); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.stufentest-grafik .st-hf { fill: none; stroke: var(--nebel); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; opacity: 0.6; }
.stufentest-grafik .st-punkt { fill: var(--nacht-2); stroke: var(--blau); stroke-width: 2; transform-box: fill-box; transform-origin: center; }
.stufentest-grafik .st-hf-punkt { fill: var(--nebel); opacity: 0.7; }
.stufentest-stufen { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; margin: var(--s-3) 3.34% 0 8%; padding: 0; list-style: none; } /* bündig mit der Diagrammfläche (x 48–580 von 600) */
.stufentest-stufen li { display: grid; gap: 6px; justify-items: center; font-size: var(--fs-kicker); font-weight: 600; color: var(--nebel); font-variant-numeric: tabular-nums; transition: color 200ms var(--ease-out); }
.stufentest-stufen li::before { content: ""; width: 100%; height: 10px; border-radius: 1px; transition: background-color 300ms var(--ease-out); }
.stufentest-stufen .st-locker::before { background: var(--blau); }
.stufentest-stufen .st-mitte::before { background: rgb(245 248 250 / 0.55); }
.stufentest-stufen .st-hart::before { background: var(--rot); }
.stufentest-fuss { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); margin-top: var(--s-3); font-size: var(--fs-meta); color: var(--nebel); }
.stufentest-fuss span { display: inline-flex; align-items: center; gap: var(--s-2); }
.stufentest-fuss .leg-laktat::before { content: ""; width: 18px; height: 3px; border-radius: 2px; background: var(--blau); }
.stufentest-fuss .leg-hf::before { content: ""; width: 18px; height: 2px; background: var(--nebel); opacity: 0.6; }
.stufentest-fuss .stufentest-einheit { margin-left: auto; font-size: var(--fs-kicker); letter-spacing: 0.06em; text-transform: uppercase; }
.stufentest-steuerung { margin-top: var(--s-4); }
.stufentest figcaption { margin-top: var(--s-4); padding-top: var(--s-3); border-top: 1px solid var(--linie-dunkel); font-size: var(--fs-meta); line-height: 1.5; color: var(--nebel); }
/* Ablauf mit JS: leer → Stufe für Stufe → Auswertung. Ohne JS steht das Endbild. */
.js .stufentest.st-bereit .st-laktat, .js .stufentest.st-bereit .st-hf { stroke-dashoffset: 1; opacity: 0; transition: stroke-dashoffset 700ms linear, opacity 0s; } /* opacity: runde Linienenden zeigen sonst Punkte */
.js .stufentest.st-bereit .st-laktat.ist-da { stroke-dashoffset: 0; opacity: 1; }
.js .stufentest.st-bereit .st-hf.ist-da { stroke-dashoffset: 0; opacity: 0.6; }
.js .stufentest.st-bereit .st-punkt, .js .stufentest.st-bereit .st-hf-punkt { opacity: 0; transition: opacity 250ms var(--ease-out); }
.js .stufentest.st-bereit .st-punkt.ist-da { opacity: 1; animation: st-pop 450ms var(--ease-out); }
.js .stufentest.st-bereit .st-hf-punkt.ist-da { opacity: 0.7; }
.js .stufentest.st-bereit .st-auswertung { opacity: 0; transition: opacity 500ms var(--ease-out); }
.js .stufentest.st-bereit.ist-ausgewertet .st-auswertung { opacity: 1; }
.js .stufentest.st-bereit .stufentest-stufen li::before { background: rgb(245 248 250 / 0.08); }
.js .stufentest.st-bereit .stufentest-stufen li.ist-da::before { background: var(--licht); }
.js .stufentest.st-bereit .stufentest-stufen li.ist-aktuell { color: var(--weiss); }
.js .stufentest.st-bereit.ist-ausgewertet .stufentest-stufen .st-locker::before { background: var(--blau); }
.js .stufentest.st-bereit.ist-ausgewertet .stufentest-stufen .st-mitte::before { background: rgb(245 248 250 / 0.55); }
.js .stufentest.st-bereit.ist-ausgewertet .stufentest-stufen .st-hart::before { background: var(--rot); }
@keyframes st-pop { 0% { transform: scale(0.3); } 60% { transform: scale(1.35); } 100% { transform: scale(1); } }

/* V26 Trainings-Ampel: Faustregel bei Erkältung. Ohne JS die ganze Liste, mit JS hebt die Wahl eine Zeile hervor */
.ampel {
  background: var(--nacht); color: var(--licht);
  border-radius: var(--radius-m); padding: var(--s-5);
  clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 0 100%);
}
@media (min-width: 640px) { .ampel { padding: var(--s-6); } }
.ampel :focus-visible { outline-color: var(--blau); }
.prosa > figure.ampel { margin-top: var(--s-6); }
.prosa > figure.ampel + * { margin-top: var(--s-6); }
.ampel-fragen { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); }
.ampel-liste { display: grid; gap: var(--s-3); margin: var(--s-5) 0 0; padding: 0; list-style: none; }
.ampel-liste li {
  display: grid; gap: var(--s-1); padding: var(--s-4) var(--s-4) var(--s-4) var(--s-5);
  background: var(--nacht-2); border-left: 4px solid var(--farbe); border-radius: var(--radius-s);
  transition: opacity 250ms var(--ease-out), transform 250ms var(--ease-out);
}
.ampel-liste b { font-family: var(--font-display); font-size: 1.4rem; font-weight: 700; line-height: 1.1; color: var(--farbe); }
.ampel-liste .ampel-wann { font-size: var(--fs-meta); font-weight: 600; line-height: 1.4; color: var(--weiss); }
.ampel-liste .ampel-was { font-size: 1rem; line-height: 1.5; color: var(--licht); }
.ampel-pause { --farbe: var(--rot); }
.ampel-locker { --farbe: var(--licht); }
.ampel-plan { --farbe: var(--blau); }
.ampel[data-auswahl] .ampel-liste li:not(.ist-gewaehlt) { opacity: 0.35; }
.ampel[data-auswahl] .ampel-liste li.ist-gewaehlt { transform: translateX(6px); }
.ampel figcaption { margin-top: var(--s-4); padding-top: var(--s-3); border-top: 1px solid var(--linie-dunkel); font-size: var(--fs-meta); line-height: 1.5; color: var(--nebel); }

/* V27 HRV-Verlauf: vier Wochen Beispielwerte, Tageswerte gegen Wochenschnitt, persönlicher Normalbereich (Schema) */
.verlauf, .atemtakt {
  background: var(--nacht); color: var(--licht);
  border-radius: var(--radius-m); padding: var(--s-5);
  clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 0 100%);
}
@media (min-width: 640px) { .verlauf, .atemtakt { padding: var(--s-6); } }
.verlauf :focus-visible, .atemtakt :focus-visible { outline-color: var(--blau); }
.prosa > figure.verlauf, .prosa > figure.atemtakt { margin-top: var(--s-6); }
.prosa > figure.verlauf + *, .prosa > figure.atemtakt + * { margin-top: var(--s-6); }
.verlauf-ansichten { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); }
.verlauf-flaeche { margin-top: var(--s-4); background: var(--nacht-2); border-radius: var(--radius-s); }
.verlauf-grafik { display: block; width: 100%; height: auto; overflow: visible; }
.verlauf-grafik .band { fill: rgb(80 176 216 / 0.12); }
.verlauf-grafik .band-rand { stroke: var(--blau); stroke-width: 1; stroke-dasharray: 4 5; opacity: 0.55; }
.verlauf-grafik .achse { stroke: var(--nebel); stroke-width: 1.5; opacity: 0.55; }
.verlauf-grafik .tage { fill: none; stroke: var(--nebel); stroke-width: 1.2; opacity: 0.45; }
.verlauf-grafik .tag { fill: var(--nebel); opacity: 0.8; }
.verlauf-grafik .schnitt { fill: none; stroke: var(--blau); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.verlauf-grafik .ereignis { stroke: var(--rot); stroke-width: 1; stroke-dasharray: 3 4; opacity: 0.75; }
.verlauf-grafik text { fill: var(--nebel); font-family: var(--font-text); font-size: 13px; font-weight: 600; letter-spacing: 0.04em; }
.verlauf-grafik .ereignis-text { fill: var(--licht); }
@media (max-width: 639px) { .verlauf-grafik text { font-size: 20px; } .verlauf-grafik .wochen-text { font-size: 18px; } }
.verlauf-grafik .tage, .verlauf-grafik .tag, .verlauf-grafik .schnitt { transition: opacity 300ms var(--ease-out); }
.verlauf[data-ansicht="tage"] .schnitt { opacity: 0.15; }
.verlauf[data-ansicht="schnitt"] .tage, .verlauf[data-ansicht="schnitt"] .tag { opacity: 0.12; }
.verlauf-legende { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin-top: var(--s-3); font-size: var(--fs-meta); color: var(--nebel); }
.verlauf-legende span { display: inline-flex; align-items: center; gap: var(--s-2); }
.verlauf-legende span::before { content: ""; width: 18px; height: 3px; border-radius: 2px; }
.verlauf-legende .leg-tage::before { height: 8px; width: 8px; border-radius: 50%; background: var(--nebel); }
.verlauf-legende .leg-schnitt::before { background: var(--blau); }
.verlauf-legende .leg-band::before { height: 12px; background: rgb(80 176 216 / 0.25); border: 1px dashed var(--blau); }
.verlauf-text { margin-top: var(--s-4); min-height: 3em; font-size: 1rem; line-height: 1.5; color: var(--licht); }
.verlauf figcaption, .atemtakt figcaption { margin-top: var(--s-4); padding-top: var(--s-3); border-top: 1px solid var(--linie-dunkel); font-size: var(--fs-meta); line-height: 1.5; color: var(--nebel); }

/* V28 Atem-Takt: 4 Sekunden ein, 6 aus (Marios Übung), drei Minuten */
.atemtakt-flaeche { position: relative; display: grid; place-items: center; height: clamp(220px, 40vw, 280px); margin-top: var(--s-4); background: var(--nacht-2); border-radius: var(--radius-s); overflow: hidden; }
.atemtakt-kreis {
  grid-area: 1 / 1; width: min(62%, 220px); aspect-ratio: 1; border-radius: 50%;
  border: 2px solid var(--blau); background: radial-gradient(circle, rgb(80 176 216 / 0.28), rgb(80 176 216 / 0.06) 70%);
  transform: scale(0.5); animation: atem 10s linear infinite; animation-play-state: paused;
}
.atemtakt.laeuft .atemtakt-kreis { animation-play-state: running; }
@keyframes atem {
  0% { transform: scale(0.5); animation-timing-function: var(--ease-inout); }
  40% { transform: scale(1); animation-timing-function: var(--ease-inout); }
  100% { transform: scale(0.5); }
}
.atemtakt-wort { grid-area: 1 / 1; font-family: var(--font-display); font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem); font-weight: 700; color: var(--weiss); }
.atemtakt-steuerung { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); margin-top: var(--s-4); }
.atemtakt-zeit { font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; color: var(--blau); font-variant-numeric: tabular-nums; }

/* V29 Müdigkeits-Wegweiser: sechs Sätze in drei Gruppen → wo du zuerst hinschauen solltest (kein Test) */
.muede {
  background: var(--nacht); color: var(--licht);
  border-radius: var(--radius-m); padding: var(--s-5);
  clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 0 100%);
}
@media (min-width: 640px) { .muede { padding: var(--s-6); } }
.muede :focus-visible { outline-color: var(--blau); }
.prosa > figure.muede { margin-top: var(--s-6); }
.prosa > figure.muede + * { margin-top: var(--s-6); }
.muede-gruppen { display: grid; gap: var(--s-4); margin-top: var(--s-4); }
.muede-gruppe { display: grid; gap: var(--s-2); }
.muede-kopf { font-size: var(--fs-kicker); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--nebel); }
.muede-satz {
  display: flex; align-items: flex-start; gap: var(--s-3); width: 100%; min-height: 44px;
  padding: var(--s-3) var(--s-4); text-align: left;
  background: var(--nacht-2); color: var(--licht); border: 1px solid var(--linie-dunkel); border-radius: var(--radius-s);
  font: inherit; font-size: 1rem; line-height: 1.4; cursor: pointer;
  transition: border-color var(--t-ui) var(--ease-out), color var(--t-ui) var(--ease-out);
}
.muede-satz::before { content: ""; flex-shrink: 0; width: 18px; height: 18px; margin-top: 1px; border: 2px solid var(--nebel); border-radius: 3px; }
.muede-satz:hover:not(:disabled) { border-color: var(--nebel); }
.muede-satz[aria-pressed="true"] { border-color: var(--blau); color: var(--weiss); }
.muede-satz[aria-pressed="true"]::before {
  border-color: var(--blau);
  background: var(--blau) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M3.5 9.5l3.5 3.5 7.5-8' stroke='%2314181D' stroke-width='2.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.muede-satz:disabled { cursor: default; }
.muede-ergebnis { margin-top: var(--s-5); padding: var(--s-4); background: var(--nacht-2); border-left: 3px solid var(--blau); border-radius: var(--radius-s); }
.muede-titel { font-family: var(--font-display); font-size: 1.35rem; font-weight: 700; line-height: 1.15; color: var(--weiss); }
.muede-text { margin-top: var(--s-2); font-size: 1rem; line-height: 1.5; color: var(--licht); }
.muede-links { margin-top: var(--s-3); font-size: var(--fs-meta); font-weight: 600; }
.muede-links a { color: var(--licht); text-underline-offset: 3px; }
.muede-links a + a::before { content: "·"; display: inline-block; margin-inline: var(--s-2); color: var(--nebel); }
.muede figcaption { margin-top: var(--s-4); padding-top: var(--s-3); border-top: 1px solid var(--linie-dunkel); font-size: var(--fs-meta); line-height: 1.5; color: var(--nebel); }

/* V30 Versprechen-Check: Aussagen über IHHT antippen → Einordnung nach Studienlage (stimmt · teils · stimmt nicht).
   Ohne JS stehen alle Einordnungen offen da. */
.versprechen {
  background: var(--nacht); color: var(--licht);
  border-radius: var(--radius-m); padding: var(--s-5);
  clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 0 100%);
}
@media (min-width: 640px) { .versprechen { padding: var(--s-6); } }
.versprechen :focus-visible { outline-color: var(--blau); }
.prosa > figure.versprechen, .prosa > figure.monitor { margin-top: var(--s-6); }
.prosa > figure.versprechen + *, .prosa > figure.monitor + * { margin-top: var(--s-6); }
.versprechen-liste { display: grid; gap: var(--s-2); margin: var(--s-4) 0 0; padding: 0; list-style: none; }
.versprechen-zeile {
  --farbe: var(--linie-dunkel);
  background: var(--nacht-2); border-left: 4px solid var(--farbe); border-radius: var(--radius-s);
  transition: border-color var(--t-ui) var(--ease-out);
}
.versprechen-zeile[data-urteil="ja"] { --farbe: var(--blau); }
.versprechen-zeile[data-urteil="teils"] { --farbe: var(--licht); }
.versprechen-zeile[data-urteil="nein"] { --farbe: var(--rot); }
.js .versprechen-zeile:not(.ist-offen) { border-left-color: var(--linie-dunkel); }
.versprechen-aussage {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  width: 100%; min-height: 52px; margin: 0; padding: var(--s-3) var(--s-4);
  background: none; border: 0; color: var(--weiss); text-align: left;
  font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; line-height: 1.2; cursor: pointer;
}
.versprechen-aussage::after {
  content: "+"; flex-shrink: 0; display: grid; place-items: center; width: 28px; height: 28px;
  border: 1px solid var(--linie-dunkel); border-radius: 50%;
  font-family: var(--font-text); font-size: 1.1rem; font-weight: 400; line-height: 1; color: var(--nebel);
  transition: transform var(--t-ui) var(--ease-out), border-color var(--t-ui) var(--ease-out);
}
.versprechen-aussage:hover:not(:disabled)::after { border-color: var(--nebel); }
.versprechen-aussage[aria-expanded="true"]::after { transform: rotate(45deg); }
.versprechen-aussage:disabled { cursor: default; }
.versprechen-aussage:disabled::after { display: none; }
.versprechen-antwort { padding: 0 var(--s-4) var(--s-4); }
.versprechen-antwort p { margin: 0; font-size: 1rem; line-height: 1.5; color: var(--licht); }
.versprechen-antwort .versprechen-quelle { margin-top: var(--s-2); font-size: var(--fs-meta); color: var(--nebel); }
.versprechen-urteil {
  display: inline-block; margin-right: var(--s-2); padding: 1px 8px; border-radius: var(--radius-s);
  font-family: var(--font-text); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  vertical-align: 2px; color: var(--nacht); background: var(--farbe);
}
.js .versprechen-zeile.ist-offen .versprechen-urteil { animation: st-pop 450ms var(--ease-out); }
html.bewegung-aus .versprechen-urteil { animation: none !important; }
.versprechen-alle { margin-top: var(--s-4); }
.versprechen figcaption { margin-top: var(--s-4); padding-top: var(--s-3); border-top: 1px solid var(--linie-dunkel); font-size: var(--fs-meta); line-height: 1.5; color: var(--nebel); }

/* Pflichtkasten bei Gesundheitsthemen: „Wann zuerst zum Arzt?“ */
.arzt-box { padding: var(--s-5); background: var(--weiss); border: 1px solid var(--nebel); border-left: 4px solid var(--rot); border-radius: var(--radius-s); }
.prosa > .arzt-box { margin-top: var(--s-6); }
.prosa > .arzt-box + * { margin-top: var(--s-6); }
.arzt-box-titel { font-family: var(--font-display); font-size: 1.35rem; font-weight: 700; line-height: 1.15; color: var(--nacht); }
.arzt-box .puls-liste { margin-top: var(--s-3); gap: var(--s-2); font-size: 1.0625rem; line-height: 1.5; }
.arzt-box .arzt-box-fuss { margin-top: var(--s-4); font-size: var(--fs-meta); color: var(--grau); }

/* Ratgeber-Übersicht: weitere Ratgeber als Zeilen mit Vorschaubild */
.ratgeber-liste { margin: var(--s-4) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--nebel); }
.ratgeber-liste li { border-bottom: 1px solid var(--nebel); }
.ratgeber-zeile { display: grid; grid-template-columns: 104px 1fr; gap: var(--s-4); align-items: center; padding-block: var(--s-4); color: var(--nacht); text-decoration: none; }
@media (min-width: 640px) { .ratgeber-zeile { grid-template-columns: 176px 1fr; gap: var(--s-5); } }
.ratgeber-zeile img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius-s); }
.ratgeber-zeile-text { display: grid; gap: var(--s-1); }
.ratgeber-zeile-text b { font-family: var(--font-display); font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem); line-height: 1.15; }
.ratgeber-zeile-text span { font-size: 0.95rem; line-height: 1.45; color: var(--grau); }
.ratgeber-zeile-text small { font-size: var(--fs-kicker); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--grau); }
.ratgeber-zeile:hover b, .ratgeber-zeile:focus-visible b { color: var(--rot-tief); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 479px) { .ratgeber-zeile-text span { display: none; } }

.artikel-byline { margin-top: var(--s-4); color: var(--nebel); }

/* Quellenliste am Ende eines Ratgebers */
.prosa .quellen { margin: 0; padding-left: 1.4em; font-size: var(--fs-meta); line-height: 1.55; color: var(--grau); }
.prosa .quellen li + li { margin-top: var(--s-2); }
.prosa .quellen a { overflow-wrap: anywhere; }

/* Ratgeber-Übersicht: Aufmacher und Themen-Spalten */
.ratgeber-aufmacher .split-bild img { aspect-ratio: 3 / 2; }
.ratgeber-aufmacher h2 { font-size: clamp(1.9rem, 1.3rem + 2vw, 2.8rem); line-height: 1.05; }
.ratgeber-aufmacher h2 a { color: inherit; text-decoration: none; background-image: linear-gradient(var(--rot), var(--rot)); background-size: 0% 2px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size 250ms var(--ease-out); }
.ratgeber-aufmacher h2 a:hover, .ratgeber-aufmacher h2 a:focus-visible { background-size: 100% 2px; }
.ratgeber-aufmacher .puls-liste { margin-top: var(--s-5); }
.themen-spalten { display: grid; gap: var(--s-7); }
@media (min-width: 960px) { .themen-spalten { grid-template-columns: repeat(3, 1fr); gap: var(--s-6); } }
.themen-spalten h3 { padding-top: var(--s-4); border-top: 2px solid var(--nacht); font-size: 1.35rem; }
.themen-spalten ul { margin: var(--s-4) 0 0; padding: 0; list-style: none; display: grid; gap: var(--s-5); }
.themen-spalten li a { font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; line-height: 1.2; color: var(--nacht); text-decoration: none; }
.themen-spalten li a:hover { color: var(--rot-tief); text-decoration: underline; text-underline-offset: 3px; }
.themen-spalten li p { margin-top: var(--s-1); font-size: 0.95rem; line-height: 1.5; color: var(--grau); }
.marke-ratgeber { display: inline-block; padding: 2px 6px; font-family: var(--font-text); font-size: 0.7rem; font-weight: 700; line-height: 1.4; letter-spacing: 0.06em; text-transform: uppercase; color: var(--weiss); background: var(--nacht); border-radius: var(--radius-s); }
.themen-spalten .marke-ratgeber { margin-left: var(--s-2); vertical-align: 3px; }

/* ---- Anreise (Kontakt): Orte mit Fahrzeit, tabellarisch ---- */
.anreise { display: grid; gap: 0 var(--s-6); margin: var(--s-4) 0 0; }
@media (min-width: 640px) { .anreise { grid-template-columns: 1fr 1fr; } }
.anreise > div { display: flex; justify-content: space-between; gap: var(--s-3); padding-block: var(--s-2); border-bottom: 1px solid var(--nebel); }
.anreise dt { font-weight: 600; }
.anreise dd { margin: 0; color: var(--grau); font-variant-numeric: tabular-nums; white-space: nowrap; }
.footer-region { margin-top: var(--s-3); max-width: 30ch; font-size: var(--fs-meta); line-height: 1.5; color: var(--nebel); }

/* ---- H1-Kicker: der Suchbegriff steht in der H1, sieht aus wie die Eyebrow-Zeile ---- */
h1 .h1-kicker {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: var(--s-3);
  font-family: var(--font-text); font-size: var(--fs-kicker); font-weight: 600; font-style: normal;
  line-height: 1.4; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--nebel);
}
h1 .h1-kicker::before { content: ""; width: 18px; height: 2px; flex-shrink: 0; background: var(--rot); border-radius: 1px; }
.hero h1 .h1-kicker { color: var(--licht); }

/* ---- Brotkrumen im Seitenkopf (sichtbare Fassung der BreadcrumbList) ---- */
.brotkrumen { margin-bottom: var(--s-4); font-size: var(--fs-meta); line-height: 1.4; }
.brotkrumen ol { display: flex; flex-wrap: wrap; align-items: center; margin: 0; padding: 0; list-style: none; }
.brotkrumen li { display: inline-flex; align-items: center; color: var(--nebel); }
.brotkrumen li + li::before { content: "/"; margin-inline: var(--s-2); color: var(--nebel); opacity: 0.6; }
.brotkrumen a { display: inline-block; padding-block: 4px; color: var(--licht); text-decoration: none; }
.brotkrumen a:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 639px) {
  /* mobil steht der Seitenname ohnehin in der H1; bei nur zwei Ebenen bliebe ein einsames „Start" */
  .brotkrumen li[aria-current] { display: none; }
  .brotkrumen:not(:has(li:nth-child(3))) { display: none; }
}

/* ---- Blog: Artikelbild, Grafiken aus dem Bestand, Hebel-Liste ---- */
.hero-mit-bild .hero-inhalt { padding-bottom: calc(var(--s-7) + clamp(48px, 9vw, 120px)); }
.artikel-bild { position: relative; z-index: 1; max-width: 1040px; margin: calc(-1 * clamp(48px, 9vw, 120px)) auto 0; padding-inline: var(--gutter); }
.artikel-bild img {
  width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: var(--nacht-2);
  clip-path: polygon(0 0, calc(100% - 40px) 0, 100% 40px, 100% 100%, 0 100%);
  animation: bild-wipe var(--t-lang) var(--ease-out) 120ms both;
}
@media (min-width: 640px) { .artikel-bild img { aspect-ratio: 16 / 9; } }
.artikel-bild figcaption { margin-top: var(--s-2); font-size: var(--fs-meta); color: var(--grau); }
.artikel-bild + .section { padding-top: var(--s-7); }
.prosa > .prosa-grafik { margin-top: var(--s-6); }
.prosa > .prosa-grafik + * { margin-top: var(--s-6); }
.prosa-grafik img {
  width: 100%; height: auto; background: var(--weiss); border: 1px solid var(--nebel);
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
}
.prosa-grafik figcaption { display: flex; gap: var(--s-3); align-items: baseline; margin-top: var(--s-3); font-size: var(--fs-meta); line-height: 1.5; color: var(--grau); }
.prosa-grafik figcaption::before { content: ""; flex-shrink: 0; width: 22px; height: 11px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 13'%3E%3Cpath d='M0 6.5h8l2.5 0 2-5 2.5 9.5 2-4.5H26' stroke='%23F04848' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain; }
.hebel-liste { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--nebel); }
.hebel-liste li { display: grid; grid-template-columns: 64px 1fr; gap: var(--s-4); align-items: center; padding-block: var(--s-3); border-bottom: 1px solid var(--nebel); }
.hebel-liste img { width: 64px; height: 64px; }