/* Thomas Pfeffer · Linkseite (Neubau 30.10.2026, vierte Fassung nach Feedback Thomas)
   Grundlage: ../../persona.md. Aufbau wie unsere Linkbäume: Kopf, Programme als Knöpfe, Resultate, Kennzahlen,
   Einstieg, Freebies, Kontakt, Fuß.
   - Schrift Inter (Canva fontRef YAFdJvSyp_k), Überschriften Bold Versal, Laufweite -0,04 bis -0,05 em wie seine Cover.
   - Farben aus seinen Karussells: Schwarz #000 (Cover), Orange #ff4f00 (Canva), Papier #ebe9e4 und Text #222220.
     Schwarz nur im Kopf (Thomas 30.10.), danach schiebt sich sein Papier als Blatt darüber.
   - Kopf: „Datenmodell“: IMG_4623 frontal (Canva-Freisteller), linke Hälfte im Seitenlicht, die rechte fällt in den
     Schatten und wird dort fließend zu Drahtgitter, Höhenlinien und Messnetz (tools/datenmodell.py); Messwerte aus der App,
     kleine Datenströme laufen über einige Linien (assets/stroeme.css).
   - Knöpfe mit eigener Form und Tiefe: Elite = er groß oben in der Karte (Ich/FullSizeRender 2), Text darunter;
     System = FORM App im iPhone, steht oben heraus; Projektion = Werkzeug im iPhone links mit Regler;
     Start Check = Deckblatt und kritischer Wert aus dem aktuellen Bericht schweben über der Karte.
     iPhones: tools/iphone.mjs (Rahmen Bauart iPhone 15 Pro, echte Statusleiste, Home-Balken unter der Tab-Leiste).
   - Resultate: nur Vorher-Nachher-Bilder aus seinem Story-Highlight „Resultate“. */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('fonts/inter-latin.woff2') format('woff2');
}

:root {
  --or: #ff4f00;
  --papier: #ebe9e4;
  --text: #222220;
  --grau: #6f6d68;
  --linie: rgba(34, 34, 32, .12);
  --hell: #f2f0ec;
  --mute: #9b9892;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; background: var(--papier); }
body { background: var(--papier); color: var(--text); font: 400 15px/1.45 'Inter', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
img { display: block; max-width: 100%; }

.wrap { max-width: 480px; margin: 0 auto; overflow: hidden; overflow: clip; background: #000; }   /* clip: kein Scroll-Container, sonst sehen die Scroll-Timelines das Scrollen nicht */

/* Kopf, nur hier Schwarz: Datenmodell, er frontal, die Schattenhälfte wird zum Modell seines Körpers (statisch) */
.buehne { position: relative; background: #000; color: var(--hell); overflow: hidden; }
/* Übergang Schwarz auf Papier: langer Verlauf, gleichmäßig in der Helligkeit (L*, smootherstep), Fassung 22 */
.buehne::after { content: ''; display: block; height: 150px; margin-top: -36px; background: linear-gradient(180deg, rgb(0,0,0) 0%, rgb(0,0,0) 5%, rgb(3,3,3) 10%, rgb(9,9,9) 15%, rgb(18,18,17) 20%, rgb(27,27,26) 25%, rgb(38,38,37) 30%, rgb(52,52,51) 35%, rgb(70,69,68) 40%, rgb(89,88,87) 45%, rgb(110,109,107) 50%, rgb(132,131,128) 55%, rgb(154,152,149) 60%, rgb(174,173,169) 65%, rgb(192,191,187) 70%, rgb(208,206,202) 75%, rgb(220,218,213) 80%, rgb(228,226,221) 85%, rgb(233,231,226) 90%, rgb(235,233,228) 95%, rgb(235,233,228) 100%); }
.held { position: relative; margin-top: 8px; }
.modell { position: relative; width: 100%; aspect-ratio: 1500 / 1490; container-type: inline-size; }
.modell img { width: 100%; height: auto; }
.m-et {
  --bw: 16.4cqw;
  position: absolute; width: var(--bw); transform: translateY(-9px); color: #fff;
  font: 400 10px/1.2 'Inter', system-ui, sans-serif; white-space: nowrap;
}
/* Fassung 19: klein und weiß: Messart über einer Haarlinie (dort endet die Leitung), leichte Ziffern, feine Anzeige,
   Region darunter. Zwei oben neben dem Kopf, zwei darunter neben dem Arm, Zeilen im gleichen Abstand */
.m-kopf {
  position: relative; display: block; padding-bottom: 3px; border-bottom: 1px solid rgba(255,255,255,.22);
  font-size: 5.8px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.72);
}
.m-kopf::after { content: ''; position: absolute; left: 0; bottom: -1px; width: 9px; height: 1px; background: #fff; }
.m-et b { display: block; margin-top: 5px; font-size: 16px; font-weight: 300; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.m-et em { font-style: normal; font-size: 7.5px; font-weight: 400; margin-left: 1.5px; letter-spacing: 0; color: rgba(255,255,255,.55); }
.m-et u { display: block; margin-top: 4px; text-decoration: none; font-size: 5.2px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.45); }
.m-zeile { display: flex; align-items: center; gap: 6px; margin-top: 5px; }
.m-zeile b { margin-top: 0; }
.m-ring { width: 16px; height: 16px; transform: rotate(-90deg); fill: none; stroke-width: 1.8; }
.m-ring circle { stroke: rgba(255,255,255,.16); }
.m-ring circle + circle { stroke: #fff; stroke-linecap: round; }
.m-spark { display: block; width: 100%; height: auto; margin-top: 4px; overflow: visible; }
.m-spark polyline { fill: none; stroke: #fff; stroke-width: 1.2; stroke-linejoin: round; stroke-linecap: round; }
.m-spark .m-fl { fill: url(#m-fl); }
.m-spark circle { fill: #fff; transform-box: view-box; transform-origin: 91.2px 3.5px; }
.m-naechte { display: block; width: 100%; height: 11px; margin-top: 4px; }
.m-naechte rect { fill: #fff; opacity: .78; transform-box: fill-box; transform-origin: 50% 100%; }
.m-skala { display: block; position: relative; width: 100%; height: 5px; margin-top: 6px;
  background: linear-gradient(rgba(255,255,255,.24), rgba(255,255,255,.24)) 0 100% / 100% 1px no-repeat,
    repeating-linear-gradient(90deg, rgba(255,255,255,.32) 0 1px, transparent 1px 6.4px) 0 100% / 100% 3px no-repeat; }
.m-skala i { position: absolute; left: 0; bottom: 0; width: 1.5px; height: 7px; margin-left: -.75px; background: #fff; border-radius: 1px;
  transform: translateX(calc(var(--wert) * var(--bw))); }
/* Anlauf beim Öffnen */
.m-ring { animation: m-dreh 1.5s cubic-bezier(.2,.7,.2,1) .5s both; }
.m-ring circle + circle { animation: m-fuell 1.5s cubic-bezier(.2,.7,.2,1) .5s both; }
.m-spark polyline { stroke-dasharray: 100; animation: m-zeichne 1.3s cubic-bezier(.4,0,.2,1) .7s both; }
.m-spark .m-fl { animation: m-ein .8s ease 1.4s both; }
.m-spark circle { animation: m-auf .35s ease-out 1.9s both; }
.m-naechte rect { animation: m-wachs .5s cubic-bezier(.2,.7,.2,1) calc(.8s + var(--i) * 22ms) both; }
.m-skala i { animation: m-regler 2s cubic-bezier(.45,0,.2,1) .9s both; }
/* Mit JS warten die Anzeigen, bis das Kopfbild geladen ist (.an setzt site.js) */
.js .modell:not(.an) :is(.m-ring, .m-ring circle, .m-spark polyline, .m-spark path, .m-spark circle, .m-naechte rect, .m-skala i) { animation-play-state: paused; }
/* Leitungen: feine Lichtimpulse (Kern hell, Glühen orange) nur auf den vier Leitungen zu den Anzeigen; Keyframes in assets/leitungen.css */
.m-leitungen { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.m-leitungen path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.m-leitungen .k { stroke: #ffe9dc; stroke-width: 2; }
.m-leitungen .g { stroke: #ff5a14; stroke-width: 6; stroke-opacity: .32; }
.m-leitungen .lf { fill: #ff7a2e; opacity: 0; }
@keyframes m-ein { from { opacity: 0; } }
@keyframes m-dreh { from { transform: rotate(-450deg); } to { transform: rotate(-90deg); } }
@keyframes m-fuell { from { stroke-dasharray: 0 100; } }
@keyframes m-zeichne { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes m-auf { from { opacity: 0; transform: scale(0); } }
@keyframes m-wachs { from { transform: scaleY(0); } }
@keyframes m-regler {
  0% { transform: translateX(0); } 30% { transform: translateX(calc(var(--bw) - 4px)); } 58% { transform: translateX(6px); }
  80% { transform: translateX(calc(var(--wert) * var(--bw) + 5px)); } 100% { transform: translateX(calc(var(--wert) * var(--bw))); }
}
.top { position: relative; z-index: 2; text-align: center; padding: 24px 20px 0; text-shadow: 0 2px 12px #000; }
.brand { font-weight: 800; font-size: 22px; line-height: 1; letter-spacing: -.045em; text-transform: uppercase; }
.role {
  margin-top: 8px; font-size: 10.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: #c9c6c0;
  display: flex; align-items: center; justify-content: center; gap: 10px;
}
.role i { width: 4px; height: 4px; border-radius: 50%; background: var(--or); }

.intro { position: relative; z-index: 2; margin-top: -12px; padding: 0 22px; text-align: center; }
h1 { font-weight: 800; font-size: clamp(30px, 8.6vw, 40px); line-height: 1; letter-spacing: -.05em; text-transform: uppercase; }
h1 span { display: block; color: var(--or); }
.sub { margin: 12px auto 0; color: var(--mute); font-size: 14.5px; max-width: 32ch; }
.sub b { color: #fff; font-weight: 700; letter-spacing: -.01em; }

/* Papier: schließt nahtlos an den Verlauf aus dem Schwarz an */
.papier {
  position: relative; z-index: 3; margin-top: -1px; background: var(--papier); color: var(--text); padding: 6px 18px 28px;
}
/* Erster Messpunkt sitzt schon im hellen Ende des Verlaufs, damit der längere Übergang keinen Leerraum macht */
.protokoll { position: relative; margin-top: -44px; }

/* Programme */
.angebote { display: grid; gap: 50px; padding-top: 0; }
.btn {
  position: relative; display: block; border-radius: 22px;
  box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 12px 24px -12px rgba(0,0,0,.35), 0 34px 60px -34px rgba(0,0,0,.45);
  transition: transform .3s cubic-bezier(.2,.7,.2,1);
}
.btn:active { transform: scale(.985); }
@media (hover: hover) {
  .btn:hover { transform: translateY(-3px); }
  .btn:hover .pill svg, .check .pill:hover svg { transform: translateX(3px); }
}
.btn-txt { position: relative; z-index: 2; display: block; }
.btn-k { display: block; font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.btn-t { display: block; margin-top: 8px; font-weight: 800; font-size: 27px; line-height: .95; letter-spacing: -.05em; text-transform: uppercase; }
.btn-d { display: block; margin-top: 9px; font-size: 13px; line-height: 1.4; }
.pill {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; height: 38px; padding: 0 15px 0 17px; border-radius: 999px;
  font-size: 13px; font-weight: 700; letter-spacing: -.01em; white-space: nowrap;
  box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 6px 14px -6px rgba(0,0,0,.45);
}
.pill svg { width: 14px; height: 14px; transition: transform .25s ease; }
/* Elite: er freigestellt rechts, sitzt in der Karte und ragt oben heraus; dahinter warmes Licht */
.btn-elite {
  margin-top: 44px; padding: 28px 47% 24px 20px; min-height: 262px; color: var(--hell);
  background: radial-gradient(120% 90% at 82% 30%, rgba(255,79,0,.32), rgba(255,79,0,0) 55%), linear-gradient(160deg, #1a1a1a, #050505 70%);
}
.btn-elite::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 0 0 1px rgba(255,255,255,.05);
}
/* Feste Größe, rechts von der Kartenkante angeschnitten (sitzt im Rahmen), damit der Text nie über ihm liegt */
.elite-figur {
  position: absolute; z-index: 1; right: -30px; bottom: 0; width: min(58%, 205px); display: block; clip-path: inset(-120px 30px 0 0);
  transition: transform 1s cubic-bezier(.2,.7,.2,1);
}
.elite-figur img { width: 100%; height: auto; }
.js .btn-elite .elite-figur { transform: translateY(18px); }
.js .btn-elite.in .elite-figur { transform: none; }
.btn-elite .btn-k { color: var(--or); }
.btn-elite .btn-t span { display: block; color: var(--or); }
.btn-elite .btn-d { color: #c9c6c0; font-size: 12.5px; }
.btn-elite .pill { background: var(--or); color: #fff; }

/* iPhone, steht oben aus dem Knopf heraus (Bild enthält Rahmen und transparenten Grund) */
.phone {
  position: absolute; z-index: 1; top: -30px; width: 118px; display: block;
  filter: drop-shadow(0 18px 22px rgba(0,0,0,.32));
  transition: transform .9s cubic-bezier(.2,.7,.2,1);
}
.phone img { width: 100%; height: auto; }

/* FORM System: Hauptprogramm ganz oben, Fortschritt-Dashboard im iPhone.
   Fassung 24 (Thomas 31.10.): dunkel statt orange; Fassung 25: Schwarz war zu dunkel, jetzt warmes Graphit aus dem Farbton
   des Papiers (#ebe9e4) abgeleitet, Messraster oben, warmes Licht hinter dem iPhone, Haarlinie als Rand; Orange nur als Akzent.
   Abgrenzung zu Elite: Elite bleibt tiefschwarz mit warmem Licht rechts und ihm selbst. */
.btn-system {
  margin-top: 34px; padding: 26px 20px 22px; color: var(--hell);
  background:
    radial-gradient(70% 55% at 88% 6%, rgba(255,110,40,.22), rgba(255,110,40,0) 70%),
    linear-gradient(180deg, rgba(42,40,37,0) 0%, #2a2825 62%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.045) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.045) 0 1px, transparent 1px 24px),
    linear-gradient(165deg, #3a3733 0%, #2a2825 55%, #22201e 100%);
}
.btn-system::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(150deg, rgba(255,150,95,.7) 0%, rgba(255,255,255,.16) 32%, rgba(255,255,255,.06) 62%, rgba(255,79,0,.4) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
}
.btn-system .phone { right: 14px; transform: rotate(6deg); filter: drop-shadow(0 18px 22px rgba(0,0,0,.45)); }
.js .btn-system .phone { transform: translateY(26px) rotate(2deg); }
.js .btn-system.in .phone { transform: rotate(6deg); }
.btn-system .btn-k, .btn-system .btn-t, .btn-system .btn-d { margin-right: 122px; }
.btn-system .btn-k { color: var(--or); }
.btn-system .btn-t span {
  background: linear-gradient(100deg, #ffe0cb 0%, #ffa56e 45%, #ff5a12 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.btn-system .btn-d { color: #d9d5ce; }
.btn-system .pill { background: linear-gradient(180deg, #ff6a1f, #ff4f00); color: #fff; box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 8px 20px -8px rgba(255,79,0,.65); }
.dm-hinweis { display: block; margin-top: 9px; font-size: 11px; color: #a7a39b; }
.sys-liste { display: grid; gap: 9px; margin: 22px 112px 0 0; }
.sys-liste span { position: relative; display: block; padding-left: 21px; font-size: 12.5px; line-height: 1.3; font-weight: 600; color: #f2efe9; }
.sys-liste span::before {
  content: ''; position: absolute; left: 1px; top: 1.5px; width: 13px; height: 13px; border-radius: 50%; box-sizing: border-box;
  border: 1px solid rgba(255,106,31,.85); background: rgba(255,79,0,.14);
}
.sys-liste span::after {
  content: ''; position: absolute; left: 5px; top: 4.8px; width: 5px; height: 3px; border: solid #ff7a33; border-width: 0 0 1.5px 1.5px; transform: rotate(-45deg);
}
/* Resultate: Vorher-Nachher */
.stimmen { margin-top: 46px; }
.rail {
  display: flex; gap: 12px; overflow-x: auto; margin: 0 -18px; padding: 0 18px 10px; scroll-snap-type: x mandatory; scroll-padding: 0 18px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.rail::-webkit-scrollbar { display: none; }
.vn { flex: 0 0 236px; scroll-snap-align: start; }
.vn-pic {
  position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden; background: #ddd9d2;
  box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 12px 24px -14px rgba(0,0,0,.4);
}
.vn-pic img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transition: transform .4s ease; }
.vn-pic i {
  position: absolute; bottom: 8px; padding: 4px 8px; border-radius: 999px; background: rgba(0,0,0,.72); color: #fff;
  font-style: normal; font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; line-height: 1;
}
.vn-pic i:first-of-type { left: 8px; }
.vn-pic i:last-of-type { right: 8px; background: var(--or); }
@media (hover: hover) { .vn:hover .vn-pic img, .g:hover .g-pic img { transform: scale(1.03); } }
.vn b { display: block; margin-top: 10px; font-size: 12.5px; line-height: 1.25; font-weight: 700; letter-spacing: -.01em; }

/* Kennzahlen */
.proof { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 30px; border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); }
.proof li { padding: 15px 6px 14px; text-align: center; }
.proof li + li { border-left: 1px solid var(--linie); }
.proof b { display: block; font-weight: 800; font-size: 22px; line-height: 1; letter-spacing: -.045em; }
.proof li > span { display: block; margin-top: 7px; font-size: 9px; font-weight: 700; letter-spacing: .08em; white-space: nowrap; text-transform: uppercase; color: var(--grau); }

/* Start Check: im iPhone blättert ein Beispielbericht, die Karte klappt in sich auf (Rest rutscht nach unten) */
.check {
  position: relative; display: block; margin-top: 64px; padding: 26px 20px 8px; border-radius: 22px; background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 10px 24px -12px rgba(0,0,0,.28), 0 30px 60px -34px rgba(0,0,0,.4);
}
.phone-check { right: 14px; top: -44px; width: 136px; transform: rotate(5deg); }
/* Schatten fest statt filter: drop-shadow, sonst zeichnet das blätternde Bild den Schatten in jedem Bild neu */
.phone-check { filter: none; }
.phone-check::before { content: ''; position: absolute; z-index: 0; left: 7%; right: 7%; top: 3%; bottom: 1%; border-radius: 16% / 8%; box-shadow: 0 18px 26px -6px rgba(0,0,0,.36), 0 6px 10px -4px rgba(0,0,0,.25); }
.phone-check .ph-bild { z-index: 1; }
.js .check .phone-check { transform: translateY(26px) rotate(1deg); }
.js .check.in .phone-check { transform: rotate(5deg); }
.ph-bild { position: absolute; left: 3.84%; top: 1.54%; width: 92.33%; height: 97.01%; overflow: hidden; border-radius: 15.2% / 7.01%; background: #111112; }
.ph-bild img { position: absolute; left: 0; width: 100%; height: auto; }
.ph-kopf { top: 0; z-index: 1; }
.ph-seiten { top: 12.32%; animation: c-blaettern 20.1s cubic-bezier(.65,0,.35,1) infinite; animation-play-state: paused; }
.check.in .ph-seiten { animation-play-state: running; }
.ph-rahmen { position: relative; z-index: 2; }
@keyframes c-blaettern{0.00%{transform:translateY(0.000%)}12.94%{transform:translateY(0.000%)}16.42%{transform:translateY(-16.723%)}29.35%{transform:translateY(-16.723%)}32.84%{transform:translateY(-33.446%)}45.77%{transform:translateY(-33.446%)}49.25%{transform:translateY(-50.168%)}62.19%{transform:translateY(-50.168%)}65.67%{transform:translateY(-66.891%)}78.61%{transform:translateY(-66.891%)}82.09%{transform:translateY(-83.614%)}95.02%{transform:translateY(-83.614%)}100%{transform:translateY(0)}}
.check-txt { display: block; position: relative; padding-right: 136px; }
.check .btn-k { color: var(--grau); }
.check-t { display: block; margin-top: 8px; font-weight: 800; font-size: 24px; line-height: .95; letter-spacing: -.05em; text-transform: uppercase; }
.check-t i { font-style: normal; color: var(--or); margin-left: 4px; white-space: nowrap; }
.check .btn-d { color: #55534e; }
.check .pill { background: #000; color: #fff; }
.check-auf {
  display: flex; align-items: center; justify-content: space-between; width: 100%; margin-top: 30px; padding: 14px 2px 12px;
  border: 0; border-top: 1px solid var(--linie); background: none; color: var(--text); cursor: pointer;
  font: inherit; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
}
.check-auf i { position: relative; width: 22px; height: 22px; border-radius: 50%; background: #f1efea; transition: transform .45s cubic-bezier(.2,.7,.2,1), background .3s; }
.check-auf i::before, .check-auf i::after { content: ''; position: absolute; left: 6px; right: 6px; top: 10.25px; height: 1.5px; border-radius: 1px; background: var(--text); }
.check-auf i::after { transform: rotate(90deg); transition: transform .45s cubic-bezier(.2,.7,.2,1); }
.check.auf .check-auf i { background: var(--or); }
.check.auf .check-auf i::before, .check.auf .check-auf i::after { background: #fff; }
.check.auf .check-auf i::after { transform: rotate(0); }
.check-mehr { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s cubic-bezier(.2,.7,.2,1); }
.check.auf .check-mehr { grid-template-rows: 1fr; }
.check-mehr-in { min-height: 0; overflow: hidden; opacity: 0; transition: opacity .35s ease; }
.check.auf .check-mehr-in { opacity: 1; transition-delay: .12s; }
.cm-titel { margin: 8px 0 12px; font-size: 10px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--grau); }
.cm-warum { list-style: none; counter-reset: w; display: grid; gap: 12px; margin-bottom: 26px; }
.cm-warum li { counter-increment: w; position: relative; padding-left: 34px; font-size: 13px; line-height: 1.42; color: #55534e; }
.cm-warum li::before {
  content: '0' counter(w); position: absolute; left: 0; top: 1px; font-size: 11px; font-weight: 800; letter-spacing: .02em; color: var(--or);
  font-variant-numeric: tabular-nums;
}
.cm-warum b { display: block; color: var(--text); font-size: 14px; letter-spacing: -.015em; }
.cm-teile { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 10px; }
.cm-teile figure { margin: 0; }
.cm-teile figure > span {
  display: flex; align-items: center; justify-content: center; aspect-ratio: 1.2; padding: 7px; border-radius: 12px; background: #090909;
  box-shadow: 0 1px 2px rgba(0,0,0,.12), 0 10px 20px -12px rgba(0,0,0,.45);
}
.cm-teile img { max-width: 100%; max-height: 100%; width: auto; height: auto; border-radius: 6px; }
.cm-teile figcaption { margin-top: 8px; font-size: 11.5px; line-height: 1.35; color: var(--grau); }
.cm-teile figcaption b { display: block; font-size: 12.5px; color: var(--text); letter-spacing: -.01em; }
.cm-fakten { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 22px; border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); }
.cm-fakten li { padding: 13px 4px 12px; text-align: center; font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--grau); }
.cm-fakten li + li { border-left: 1px solid var(--linie); }
.cm-fakten b { display: block; margin-bottom: 6px; font-size: 19px; font-weight: 800; letter-spacing: -.045em; text-transform: none; color: var(--text); }
.check-mehr .pill { margin: 18px 0 16px; }

/* ===== Fassung 23 „Messprotokoll“: Datenleitung, Messpunkte, Takt, Scan, Zeitleisten =====
   Standard = fertiger Zustand. Bewegung nur ohne „Bewegung reduzieren“: mit Scroll-Timeline (iOS 26+, Chrome) hängt sie am
   Scrollen, sonst läuft sie einmal beim Hineinscrollen (.in aus site.js). Bewegt werden nur transform und opacity. */
:root { --spitze: 34vh; }   /* die Spitze der Datenleitung läuft so weit über dem unteren Bildschirmrand mit */

/* Messraster: kaum sichtbares Millimeterpapier, blendet unter dem Verlauf ein */
.papier::before {
  content: ''; position: absolute; z-index: -1; inset: 0; pointer-events: none;
  background-image: linear-gradient(var(--papier), rgba(235,233,228,0) 220px),
    linear-gradient(rgba(34,34,32,.032) 1px, transparent 1px), linear-gradient(90deg, rgba(34,34,32,.032) 1px, transparent 1px);
  background-size: 100% 100%, 24px 24px, 24px 24px; background-position: 0 0, 6px -1px, 6px -1px; background-repeat: no-repeat, repeat, repeat;
}

/* Datenleitung links durch alle Abschnitte */
.leitung { position: absolute; left: -10px; top: 7px; bottom: 0; width: 1px; background: linear-gradient(rgba(34,34,32,0), rgba(34,34,32,.16) 60px, rgba(34,34,32,.16) calc(100% - 40px), rgba(34,34,32,0)); }
.leitung i { position: absolute; inset: 0; background: linear-gradient(rgba(255,79,0,0), var(--or) 60px, var(--or) calc(100% - 40px), rgba(255,79,0,0)); transform-origin: top; }

/* Messpunkt je Abschnitt: Nummer, Name, Haarlinie, Messwert */
.kap { position: relative; display: flex; align-items: center; gap: 9px; margin: 0 0 18px; font-variant-numeric: tabular-nums; line-height: 1; }
.kap::before {
  content: ''; position: absolute; left: -13px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%;
  background: var(--or); box-shadow: 0 0 0 1px var(--or), 0 0 0 5px rgba(255,79,0,.14);
}
.kap::after {   /* noch nicht erreichter Messpunkt: grauer Ring über dem orangen Punkt, blendet aus */
  content: ''; position: absolute; left: -14px; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%;
  background: var(--papier); box-shadow: inset 0 0 0 1px rgba(34,34,32,.3); opacity: 0;
}
.kap-nr { font-size: 10px; font-weight: 800; letter-spacing: .04em; color: var(--or); }
.kap-t { font-size: 10.5px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--text); white-space: nowrap; }
.kap > i { flex: 1; height: 1px; background: rgba(34,34,32,.2); transform-origin: left; }
.kap-meta { font-size: 9px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--grau); white-space: nowrap; }
.kap-check { margin-top: 44px; }
.stimmen .kap, .guides .kap { margin-right: 0; }

/* Takt der Programme über 12 Wochen: System 3 Anpassungen, Elite jede Woche */
.takt { display: block; margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.14); font-variant-numeric: tabular-nums; }
.takt-kopf { display: flex; align-items: baseline; gap: 8px; }
.takt-kopf b { font-size: 22px; font-weight: 800; letter-spacing: -.045em; line-height: 1; color: #fff; }
.takt-kopf em { font-style: normal; font-size: 12px; font-weight: 600; color: #d9d5ce; }
.takt-leiste { display: flex; align-items: flex-end; justify-content: space-between; height: 22px; margin-top: 12px; }
.takt-leiste i { flex: 0 0 3px; height: 8px; border-radius: 1.5px; background: rgba(255,255,255,.22); transform-origin: bottom; }
.takt-leiste i.an { height: 22px; background: linear-gradient(180deg, #fff, #ffc49e); box-shadow: 0 0 10px rgba(255,140,80,.45); }
.takt-achse { display: flex; justify-content: space-between; margin-top: 7px; font-size: 8.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #a7a39b; }
.takt-elite { margin-top: 16px; border-top-color: rgba(255,255,255,.12); }
.takt-elite .takt-kopf b { font-size: 16px; white-space: nowrap; }
.takt-elite .takt-achse { color: #9b9892; }
.takt-elite .takt-kopf em { color: #c9c6c0; }
.takt-elite .takt-leiste { height: 18px; margin-top: 10px; }
.takt-elite .takt-leiste i { background: rgba(255,255,255,.14); }
.takt-elite .takt-leiste i.an { height: 18px; background: var(--or); box-shadow: 0 0 8px rgba(255,79,0,.55); }
.takt-elite .takt-leiste b { align-self: center; margin-left: 4px; font-size: 12px; line-height: 1; color: var(--or); }

/* Resultate: Scan legt „Nachher“ frei, darunter die Dauer als Zeitleiste */
.vn-pic i { z-index: 2; }
.vn-scan { position: absolute; z-index: 1; top: 0; bottom: 0; left: var(--split, 50%); right: 0; background: rgba(14,14,14,.6); transform: translateX(101%); }
.vn-scan::before { content: ''; position: absolute; left: -1px; top: 0; bottom: 0; width: 2px; background: var(--or); box-shadow: 0 0 14px 2px rgba(255,79,0,.55); }
.vn-zeit { position: relative; display: block; height: 22px; margin-top: 7px; font-variant-numeric: tabular-nums; }
.vn-zeit::before { content: ''; position: absolute; left: 0; right: 0; top: 2px; height: 1px; background: rgba(34,34,32,.16); }
.vn-zeit i { position: absolute; left: 0; top: 1px; height: 3px; width: calc(var(--w) * 100%); border-radius: 2px; background: var(--or); transform-origin: left; }
.vn-zeit em { position: absolute; top: 10px; font-style: normal; font-size: 8.5px; font-weight: 700; letter-spacing: .06em; color: var(--grau); }
.vn-zeit em:first-of-type { left: 0; }
.vn-zeit em:last-of-type { left: calc(var(--w) * 100%); transform: translateX(-100%); color: var(--text); }

/* Kennzahlen: Grundlinie füllt sich */
.proof { position: relative; font-variant-numeric: tabular-nums; }
.proof::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--or); transform-origin: left; }

@keyframes p-zeichnen-y { from { transform: scaleY(0); } }
@keyframes p-zeichnen-x { from { transform: scaleX(0); } }
@keyframes p-knoten { from { opacity: 1; } to { opacity: 0; } }
@keyframes p-takt { from { transform: scaleY(.18); opacity: .35; } }
@keyframes p-scan { from { transform: translateX(0); } }
@keyframes p-aufrichten-s { from { transform: perspective(700px) translateY(54px) rotateX(26deg) rotate(15deg) scale(.9); } to { transform: perspective(700px) rotate(6deg); } }
@keyframes p-aufrichten-c { from { transform: perspective(700px) translateY(54px) rotateX(26deg) rotate(14deg) scale(.9); } to { transform: perspective(700px) rotate(5deg); } }

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .protokoll { view-timeline: --protokoll block; }
    .leitung i { animation: p-zeichnen-y linear both; animation-timeline: --protokoll; animation-range: cover var(--spitze) cover calc(100% - 100vh + var(--spitze)); }
    .kap::after { animation: p-knoten linear both; animation-timeline: view(); animation-range: entry var(--spitze) entry calc(var(--spitze) + 30px); }
    .kap > i { animation: p-zeichnen-x linear both; animation-timeline: view(); animation-range: entry var(--spitze) cover 55%; }
    .btn { view-timeline: --karte block; }
    .takt-leiste i { animation: p-takt linear both; animation-timeline: --karte; animation-range: entry calc(64% + var(--i) * 2.6%) entry calc(72% + var(--i) * 2.6%); }
    .btn-system .phone { animation: p-aufrichten-s linear both; animation-timeline: view(); animation-range: entry 0% cover 45%; }
    .phone-check { animation: p-aufrichten-c linear both; animation-timeline: view(); animation-range: entry 0% cover 45%; }
    .stimmen { view-timeline: --stimmen block; }   /* Karten liegen im waagrechten Scroller, darum die Timeline des Abschnitts */
    .vn-scan { animation: p-scan linear both; animation-timeline: --stimmen; animation-range: entry 55% cover 52%; }
    .vn-zeit i { animation: p-zeichnen-x linear both; animation-timeline: --stimmen; animation-range: entry 75% cover 58%; }
    .proof::after { animation: p-zeichnen-x linear both; animation-timeline: view(); animation-range: entry 80% cover 60%; }
  }
  @supports not (animation-timeline: view()) {
    .js .kap::after { opacity: 1; transition: opacity .45s ease; }
    .js .kap > i { transform: scaleX(0); transition: transform 1s cubic-bezier(.2,.7,.2,1) .15s; }
    .js .kap.in::after { opacity: 0; }
    .js .kap.in > i { transform: none; }
    .js .takt-leiste i { transform: scaleY(.18); opacity: .35; transition: transform .5s cubic-bezier(.2,.7,.2,1), opacity .5s; transition-delay: calc(var(--i) * 55ms + .25s); }
    .js .btn.in .takt-leiste i { transform: none; opacity: 1; }
    .js .vn-scan { transform: translateX(0); transition: transform 1.4s cubic-bezier(.6,0,.2,1) .3s; }
    .js .stimmen.in .vn-scan { transform: translateX(101%); }
    .js .vn-zeit i, .js .proof::after { transform: scaleX(0); transition: transform 1.2s cubic-bezier(.2,.7,.2,1) .5s; }
    .js .stimmen.in .vn-zeit i, .js .proof.in::after { transform: none; }
  }
}

/* Handy-Guides */
.guides { margin-top: 40px; }
.g { flex: 0 0 120px; scroll-snap-align: start; }
.g-pic { display: block; aspect-ratio: 4 / 5; border-radius: 12px; overflow: hidden; background: #111; box-shadow: 0 1px 2px rgba(0,0,0,.1), 0 10px 22px -12px rgba(0,0,0,.45); }
.g-pic img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.g b { display: block; margin-top: 9px; font-size: 12.5px; line-height: 1.25; font-weight: 700; letter-spacing: -.01em; }
.g small { display: block; margin-top: 3px; font-size: 10.5px; color: var(--grau); }

/* Kontakt */
.contact { margin-top: 38px; text-align: center; }
.contact h2 { font-weight: 800; font-size: 24px; line-height: 1; letter-spacing: -.045em; text-transform: uppercase; }
.contact h2 span { color: var(--or); }
.socials { display: flex; justify-content: center; gap: 10px; margin-top: 16px; }
.socials a {
  height: 44px; padding: 0 18px; display: inline-flex; align-items: center; gap: 9px; border-radius: 999px; background: #fff;
  font-size: 13.5px; font-weight: 700; box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 6px 14px -8px rgba(0,0,0,.25);
}
.socials svg { width: 16px; height: 16px; color: var(--or); }

/* Fuß */
footer { margin-top: 36px; padding-top: 18px; border-top: 1px solid var(--linie); text-align: center; }
.legal { font-size: 11.5px; color: var(--grau); line-height: 1.9; }
.copy { margin-top: 6px; font-size: 10.5px; color: var(--grau); }

/* Schmale Handys (360/375 px): Pille bleibt einzeilig */
@media (max-width: 379px) {
  .btn-system .btn-k, .btn-system .btn-t, .btn-system .btn-d { margin-right: 110px; }
  .sys-liste { margin: 36px 0 0; }
  .btn-system .phone { width: 104px; right: 10px; }
  .check-t { font-size: 22px; }
  .check-txt { padding-right: 132px; }
  .phone-check { width: 124px; }
}

@media (min-width: 520px) {
  body { padding: 24px 0; background: #dedbd5; }
  .wrap { border-radius: 28px; box-shadow: 0 30px 80px -40px rgba(0,0,0,.35); }
}

@media (prefers-reduced-motion: reduce) {
  .m-leitungen { display: none; }
  .m-ring, .m-ring circle + circle, .m-spark polyline, .m-spark path, .m-spark circle, .m-naechte rect, .m-skala i { animation: none !important; }
  .js .phone, .js .elite-figur, .check-mehr, .check-mehr-in, .check-auf i, .check-auf i::after { transition: none !important; }
  .ph-seiten { animation: none !important; }
}