/* System-Linie 05.11.2026 (Voransicht, nicht live).
   CD-TAUSCH: Alle Farben dieser Datei laufen ueber die --sys-* Tokens unten.
   Nach Thomas' CD-Wahl nur diesen Block (und ggf. farben.css) anpassen. Kein Blau. */
:root{
  --sys-accent:var(--gold);          /* Akzentflaeche (Stufen-Nummern, Linien, Punkte) */
  --sys-accent-text:var(--accent);   /* Akzent als Schrift */
  --sys-accent-soft:var(--accent-soft);
  --sys-ink:var(--ink);
  --sys-surface:var(--card);
  --sys-surface-2:var(--bg2);
  --sys-dark:#111213;                /* dunkle Flaeche (Erweiterung, Clip-Platzhalter) */
  --sys-on-dark:#fcfcfb;
  --sys-radius:20px;
  --sys-ease:cubic-bezier(.2,.7,.2,1);
}

/* Navigation: 4 Stufen mit Nummer */
.menu .n{font:600 11px/1 var(--sans);color:var(--sys-accent-text);margin-right:6px;letter-spacing:.04em}
.nav-cta{display:none}
@media (min-width:861px){.nav-cta{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border-radius:999px;background:var(--sys-accent);color:var(--on-gold);font-weight:600;font-size:14.5px;text-decoration:none;margin-left:6px}
  .nav-cta:hover{background:var(--accent-hover)}}
@media (max-width:860px){.menu li.m-cta a{font-weight:600;color:var(--ink)}}
@media (min-width:861px){.menu li.m-cta{display:none}}

/* Hero */
.sys-hero{padding-block:clamp(48px,9vw,112px) clamp(32px,6vw,64px)!important}
.sys-hero .grid{display:grid;gap:40px;align-items:center}
@media (min-width:960px){.sys-hero .grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:56px}}
.sys-hero h1{font-size:clamp(38px,6.4vw,72px);line-height:1.03;letter-spacing:-.03em;margin:0;text-wrap:balance;max-width:17ch}
.sys-hero h1 em{display:block;font-style:normal;color:var(--muted);font-weight:500;font-size:clamp(20px,2.4vw,28px);line-height:1.3;letter-spacing:-.01em;margin-top:.6em;max-width:32ch}
.sys-hero .kern{font-size:clamp(17px,2vw,20px);color:var(--ink2);max-width:58ch;margin:22px 0 0;line-height:1.55}
.sys-hero .b2b-line{margin-top:14px;font-size:14px;color:var(--muted)}
.sys-hero .btn-ghost{background:transparent!important;color:var(--ink)!important;border:1.5px solid var(--hair2)!important}

/* Animierte System-Illustration (SVG) */
.sys-ill{margin:0;position:relative}
.sys-ill svg{width:100%;height:auto;overflow:visible}
.sys-ill .layer{transform-box:fill-box;transform-origin:center;opacity:0;transform:translateY(14px)}
.sys-ill.in .layer{animation:sysUp .7s var(--sys-ease) forwards}
.sys-ill.in .l2{animation-delay:.25s}.sys-ill.in .l3{animation-delay:.5s}.sys-ill.in .l4{animation-delay:.75s}
.sys-ill .pulse{transform-box:fill-box;transform-origin:center;animation:sysPulse 2.6s ease-in-out infinite}
.sys-ill .flow{stroke-dasharray:4 7;animation:sysDash 1.6s linear infinite}
.sys-ill .lbl{font:600 13px/1 var(--sans);fill:var(--sys-ink)}
.sys-ill .sub{font:500 11px/1 var(--sans);fill:var(--muted)}
.sys-ill .num{font:700 11px/1 var(--sans);fill:var(--on-gold)}
.sys-ill figcaption{font-size:13px;color:var(--muted);margin-top:10px}
@keyframes sysUp{to{opacity:1;transform:none}}
@keyframes sysPulse{0%,100%{opacity:.35;transform:scale(1)}50%{opacity:1;transform:scale(1.25)}}
@keyframes sysDash{to{stroke-dashoffset:-22}}

/* Stufen-Leiste (Inhaltsverzeichnis der System-Linie) */
.sys-steps{list-style:none;margin:clamp(36px,6vw,56px) 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;counter-reset:s}
@media (min-width:900px){.sys-steps{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}}
.sys-steps a{display:flex;flex-direction:column;gap:4px;height:100%;padding:14px 16px;border:1px solid var(--hair);border-radius:16px;background:var(--sys-surface);text-decoration:none;color:var(--ink);transition:border-color .2s,transform .2s var(--sys-ease)}
.sys-steps a:hover{border-color:var(--sys-accent);transform:translateY(-2px)}
.sys-steps .k{font:700 12px/1 var(--sans);letter-spacing:.08em;color:var(--sys-accent-text);text-transform:uppercase}
.sys-steps strong{font-family:var(--display);font-size:17px;font-weight:600;line-height:1.2}
.sys-steps span.d{font-size:13.5px;color:var(--muted);line-height:1.35}

/* Stufen-Sektionen */
.stage{position:relative}
.stage-head{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.stage-no{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--sys-accent);color:var(--on-gold);font:700 15px/1 var(--sans)}
.stage-head .eyebrow{margin:0}
.stage h2{max-width:22ch}
.stage .lead{max-width:62ch}
.stage-grid{display:grid;gap:clamp(28px,5vw,56px);margin-top:clamp(24px,4vw,40px)}
@media (min-width:960px){.stage-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}}
.more{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:600;color:var(--ink);text-decoration:underline;text-decoration-color:var(--sys-accent);text-decoration-thickness:2px;text-underline-offset:5px}
.more svg{width:18px;height:18px;transition:transform .18s var(--sys-ease)}
.more:hover svg{transform:translateX(3px)}
.stage .checks{margin-top:8px}

/* Fundament gross */
.stage-main{padding-block:clamp(72px,11vw,136px)!important}
.stage-main h2{font-size:clamp(34px,5vw,56px)}
.tiers{display:grid;gap:12px;margin-top:8px}
@media (min-width:640px){.tiers{grid-template-columns:repeat(3,minmax(0,1fr))}}
.tiers-xl{margin-top:clamp(24px,4vw,36px)}
.tiers-xl .tier{padding:22px 22px 24px}
.tiers-xl .tier b{font-size:clamp(28px,3vw,36px)}
.tier{display:flex;flex-direction:column;gap:6px;padding:18px;border:1px solid var(--hair);border-radius:16px;background:var(--sys-surface)}
.tier.hl{border:2px solid var(--sys-accent);box-shadow:0 14px 34px -22px rgba(17,18,19,.4)}
.tier .t{font:600 12px/1.2 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--sys-accent-text)}
.tier b{font-family:var(--display);font-size:26px;font-weight:600;color:var(--ink);letter-spacing:-.02em}
.tier span{font-size:14px;color:var(--muted);line-height:1.45}
.mini-note{font-size:14px;color:var(--muted);margin:12px 0 0}
.mini-note a{color:var(--ink)}
.proof{margin:0}
.proof img{width:100%;height:auto;border-radius:18px;border:1px solid var(--hair);background:var(--bg2)}
.proof figcaption{font-size:13px;color:var(--muted);margin-top:8px}

/* Clip-Platz (Erklaerclips je Stufe folgen nach CD) */
.clip-slot{position:relative;aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:var(--sys-dark);color:var(--sys-on-dark);display:flex;flex-direction:column;justify-content:flex-end;padding:18px 20px;border:1px solid var(--hair)}
.clip-slot::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 80% at 80% 10%,color-mix(in srgb,var(--sys-accent) 35%,transparent),transparent 60%)}
.clip-slot>*{position:relative}
.clip-slot .play{position:absolute;top:50%;left:50%;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;border:2px solid color-mix(in srgb,var(--sys-on-dark) 60%,transparent);display:grid;place-items:center}
.clip-slot .play::after{content:"";border-left:14px solid var(--sys-on-dark);border-top:9px solid transparent;border-bottom:9px solid transparent;margin-left:4px;opacity:.8}
.clip-slot .k{font:700 11px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--sys-accent)}
.clip-slot strong{font-family:var(--display);font-size:17px;margin-top:6px}
.clip-slot small{font-size:12.5px;opacity:.7;margin-top:2px}

/* Findbarkeit: Datenfluss-Illustration */
.geo-ill{margin:0;padding:20px;border:1px solid var(--hair);border-radius:18px;background:var(--sys-surface)}
.geo-ill svg{width:100%;height:auto}
.geo-ill .flow{stroke-dasharray:5 8;animation:sysDash 1.8s linear infinite}
.geo-ill text{font:600 12.5px/1 var(--sans);fill:var(--sys-ink)}
.geo-ill .sub{font:500 11px/1 var(--sans);fill:var(--muted)}
.geo-ill figcaption{font-size:13px;color:var(--muted);margin-top:10px}

/* Erweiterung: dunkle Flaeche, klar abgesetzt */
.stage-dark{background:var(--sys-dark);color:#d4d4d2}
.stage-dark h2,.stage-dark h3,.stage-dark strong{color:var(--sys-on-dark)}
.stage-dark h2 em,.stage-dark .lead{color:#a2a2a0}
.stage-dark .eyebrow{color:#a2a2a0}
.stage-dark .checks li{border-color:rgba(255,255,255,.12)}
.stage-dark .checks li::before{border-color:var(--sys-accent)}
.stage-dark .more{color:var(--sys-on-dark)}
.stage-dark .btn-ghost{color:var(--sys-on-dark);border-color:rgba(255,255,255,.3)}
.uses{display:grid;gap:12px;margin:0;padding:0;list-style:none}
@media (min-width:640px){.uses{grid-template-columns:1fr 1fr}}
.uses li{padding:16px 18px;border:1px solid rgba(255,255,255,.12);border-radius:16px;background:rgba(255,255,255,.03)}
.uses li strong{display:block;font-size:16px;margin-bottom:4px}
.uses li span{font-size:14.5px;color:#a2a2a0;line-height:1.45}
.bg-light .uses li{border-color:var(--hair);background:var(--sys-surface)}
.bg-light .uses li span{color:var(--muted)}

/* Preise: 4 Karten in Stufen-Reihenfolge */
.pgrid.sys4{grid-template-columns:1fr}
@media (min-width:760px){.pgrid.sys4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1180px){.pgrid.sys4{grid-template-columns:repeat(4,minmax(0,1fr))}}
.pgrid.sys4 .pcard.hl{border:2px solid var(--sys-accent)}
.pcard .pcta{margin-top:14px;font-weight:600;color:var(--ink);text-decoration:underline;text-decoration-color:var(--sys-accent);text-underline-offset:4px;min-height:44px;display:inline-flex;align-items:center}
.plist li.sub span,.plist li.sub b{font-size:13.5px;color:var(--muted);font-weight:500}

/* Naechster Schritt (Unterseiten) */
.next-step{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;justify-content:space-between;padding:22px 24px;border:1px solid var(--hair);border-radius:var(--sys-radius);background:var(--sys-surface);margin-top:8px}
.next-step p{margin:0;color:var(--muted);font-size:15px}
.next-step strong{display:block;color:var(--ink);font-family:var(--display);font-size:19px}
.stage-tag{display:inline-flex;align-items:center;gap:8px;font:600 12px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--sys-accent-text);margin-bottom:14px}
.stage-tag i{font-style:normal;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--sys-accent);color:var(--on-gold);letter-spacing:0}

/* Fluessige Reveal-Animation: Karten leicht gestaffelt */
.js .tiers .reveal:nth-child(2),.js .pgrid .reveal:nth-child(2),.js .sys-steps .reveal:nth-child(2){--rd:80ms}
.js .tiers .reveal:nth-child(3),.js .pgrid .reveal:nth-child(3),.js .sys-steps .reveal:nth-child(3){--rd:160ms}
.js .pgrid .reveal:nth-child(4),.js .sys-steps .reveal:nth-child(4){--rd:240ms}
@media (prefers-reduced-motion:reduce){.sys-ill .layer{opacity:1;transform:none}.sys-ill .pulse,.sys-ill .flow,.geo-ill .flow{animation:none}}
/* Mobil: Preisstufen kompakt (Preis rechts), weniger Scrollen */
@media (max-width:639px){.tier{display:grid;grid-template-columns:1fr auto;column-gap:14px;row-gap:4px;padding:14px 16px}
  .tier .t{grid-column:1}.tier b{grid-column:2;grid-row:1 / span 2;align-self:center;font-size:22px}.tier span:not(.t){grid-column:1}
  .tiers-xl .tier b{font-size:24px}}
.clip-slot .play{top:38%}
@media (max-width:480px){.clip-slot .play{width:44px;height:44px;margin:-22px 0 0 -22px;top:32%}}

/* Hero v2 Video (05.11.2026 ~22:22, lokal Voransicht) */
.sys-hero .hero-benefits{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 18px;max-width:52ch}
.sys-hero .hero-benefits li{position:relative;padding-left:14px;font-size:15px;color:var(--ink2);line-height:1.4}
.sys-hero .hero-benefits li::before{content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;border-radius:50%;background:var(--sys-accent)}
.sys-hero .hero-video{margin:0;border-radius:18px;overflow:hidden;border:1px solid var(--hair);background:var(--sys-dark);box-shadow:0 1px 2px rgba(17,18,19,.04)}
.sys-hero .hero-video video{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:#111213}
.sys-hero .hero-video figcaption{font-size:13px;color:var(--muted);padding:10px 14px 12px;background:var(--sys-surface)}

/* Claim "Klar. Sichtbar. Fertig." (21:02): kurz und groß */
.sys-hero h1{font-size:clamp(44px,8vw,92px);max-width:none}