/*
Theme Name: SEFETO
Theme URI: https://sefeto.com
Author: SEFETO
Description: Landing Page für SEFETO – The Sovereign Compute Company. Secure Blockchain Hosting. Corporate Design Violett/Aubergine.
Version: 2.0.0
Requires at least: 6.0
Requires PHP: 8.0
Text Domain: sefeto
*/

:root{
  --bg:#0a0510; --bg-2:#0f0a1e; --panel:rgba(255,255,255,.04); --panel-2:rgba(165,15,229,.08);
  --brand:#a50fe5; --brand-2:#c875f4; --brand-3:#7a1fb0;
  --ink:#efe9f6; --ink-2:#ab9ebd; --line:rgba(200,117,244,.16); --line-2:rgba(200,117,244,.32);
  --maxw:1280px; --radius:20px;
  --grad:linear-gradient(110deg,#d680f7,#a50fe5 52%,#7a1fb0);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:92px}
body{margin:0;background:var(--bg);color:var(--ink);font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
h1,h2,h3{line-height:1.1;letter-spacing:-.02em;margin:0;font-weight:800}

.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(20px,4vw,48px)}
section{padding:clamp(64px,7vw,116px) 0;position:relative}
.eyebrow{display:inline-block;text-transform:uppercase;letter-spacing:.24em;font-size:.76rem;font-weight:700;color:var(--brand-2);margin:0 0 18px}
.section-title{font-size:clamp(2rem,4vw,3.1rem)}
.section-head{max-width:820px}
.section-head.center{margin-inline:auto;text-align:center}
.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{color:var(--ink-2);font-size:clamp(1.05rem,1.6vw,1.25rem);margin-top:20px;max-width:68ch}
.pill{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--brand-2);background:var(--panel-2);border:1px solid var(--line);padding:.34rem .8rem;border-radius:999px;margin-bottom:16px}

.btn{display:inline-flex;align-items:center;gap:.55rem;font-weight:600;font-size:1rem;padding:.9rem 1.6rem;border-radius:999px;border:1px solid transparent;cursor:pointer;transition:transform .15s,box-shadow .15s,background .15s,border-color .15s}
.btn-primary{background:var(--grad);color:#fff;box-shadow:0 16px 44px -14px rgba(165,15,229,.75)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 22px 56px -14px rgba(165,15,229,.95)}
.btn-ghost{border-color:var(--line-2);color:var(--ink)}
.btn-ghost:hover{border-color:var(--brand-2);background:var(--panel-2)}

.nav{position:sticky;top:0;z-index:60;background:rgba(10,5,16,.72);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.nav-inner{display:flex;align-items:center;gap:28px;height:74px}
.brand{display:flex;align-items:center;gap:12px;margin-right:auto}
.brand .wm{font-weight:800;letter-spacing:.18em;font-size:1.15rem}
.nav-links{display:flex;gap:32px;font-size:.96rem;color:var(--ink-2)}
.nav-links a:hover{color:var(--ink)}
.nav-cta{color:var(--brand-2);font-weight:600;font-size:.96rem}
.nav-cta:hover{color:#fff}
.logo-chip{height:46px;width:46px;border-radius:13px;background:#fff;display:grid;place-items:center;padding:7px;box-shadow:0 8px 22px -8px rgba(0,0,0,.6);flex:none}
.logo-chip img{max-width:100%;max-height:100%;width:auto;height:auto}

.hero{padding:clamp(56px,7vw,104px) 0 clamp(64px,7vw,108px);overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:-1;background:radial-gradient(70% 60% at 72% -5%,rgba(165,15,229,.30),transparent 62%),radial-gradient(48% 50% at 8% 20%,rgba(122,31,176,.26),transparent 60%),radial-gradient(55% 50% at 96% 88%,rgba(200,117,244,.12),transparent 60%)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(36px,5vw,76px);align-items:center}
.hero h1{font-size:clamp(2.4rem,4.7vw,4.1rem)}
.hero .lead{font-size:clamp(1.1rem,1.7vw,1.3rem);max-width:54ch}
.hero-badges{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.badge{font-size:.82rem;color:var(--brand-2);border:1px solid var(--line);background:var(--panel-2);padding:.44rem .9rem;border-radius:999px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:36px}
.hero-visual{display:flex;justify-content:center}
.hero-logo{background:#fff;border-radius:24px;padding:clamp(26px,3vw,42px);box-shadow:0 36px 90px -30px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.06);position:relative}
.hero-logo::after{content:"";position:absolute;inset:-34% -12% 50% -12%;background:radial-gradient(50% 100% at 50% 0,rgba(165,15,229,.5),transparent 72%);z-index:-1;filter:blur(26px)}
.hero-logo img{width:100%;max-width:420px;height:auto}

.grid{display:grid;gap:clamp(18px,2vw,26px);margin-top:clamp(36px,4vw,56px)}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(24px,2.4vw,36px);transition:border-color .2s,transform .2s}
.card:hover{border-color:var(--line-2);transform:translateY(-3px)}
.card h3{font-size:1.35rem;margin-bottom:12px}
.card p{color:var(--ink-2);margin:0}
.tick{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:12px}
.tick li{position:relative;padding-left:30px;color:var(--ink-2)}
.tick li::before{content:"";position:absolute;left:0;top:.5em;width:12px;height:12px;border-radius:4px;background:var(--grad);box-shadow:0 0 14px rgba(165,15,229,.7)}
.tick strong{color:var(--ink)}

.layer{position:relative;overflow:hidden}
.layer .lnum{font-size:.78rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--brand-2)}
.layer h3{font-size:clamp(1.45rem,2.4vw,2rem);margin:10px 0 12px}
.layer::before{content:attr(data-n);position:absolute;top:-22px;right:8px;font-size:8rem;font-weight:900;line-height:1;color:rgba(200,117,244,.06)}

.konsulat .kn{font-family:ui-monospace,monospace;font-size:.84rem;color:var(--brand-2);margin-bottom:10px}
.stream .vt{font-weight:700;color:var(--brand-2);font-size:.82rem;letter-spacing:.08em;text-transform:uppercase}
.stream-variant{margin-top:20px;padding-top:20px;border-top:1px solid var(--line)}

.compare{margin-top:clamp(36px,4vw,52px);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.compare-row{display:grid;grid-template-columns:minmax(0,280px) minmax(0,1fr);gap:24px;padding:clamp(18px,2vw,26px) clamp(20px,2.4vw,34px);border-top:1px solid var(--line);align-items:center}
.compare-row:first-child{border-top:0}
.compare-row .who{font-weight:700;font-size:1.05rem}
.compare-row .who span{display:block;color:var(--ink-2);font-weight:400;font-size:.85rem;margin-top:3px}
.compare-row .what{color:var(--ink-2)}
.compare-row.win{background:linear-gradient(90deg,rgba(165,15,229,.18),rgba(165,15,229,.02))}
.compare-row.win .who{color:var(--brand-2)}
.compare-row.win .what{color:var(--ink)}

.feat{display:flex;gap:18px;align-items:flex-start}
.feat .ic{flex:none;width:50px;height:50px;border-radius:14px;display:grid;place-items:center;background:var(--panel-2);border:1px solid var(--line);color:var(--brand-2)}
.feat h3{font-size:1.12rem;margin-bottom:6px}
.feat p{color:var(--ink-2);font-size:.96rem;margin:0}

.invest{text-align:center;background:radial-gradient(70% 130% at 50% 0%,rgba(165,15,229,.22),transparent 70%);border:1px solid var(--line);border-radius:28px;padding:clamp(48px,6vw,82px) clamp(24px,4vw,48px)}
.invest .lock{height:54px;width:54px;margin:0 auto 20px;display:grid;place-items:center;border-radius:16px;background:var(--grad);color:#fff;box-shadow:0 16px 44px -14px rgba(165,15,229,.8)}
.invest .lead{margin-inline:auto}
.invest .hero-cta{justify-content:center;margin-top:30px}

.footer{border-top:1px solid var(--line);padding:clamp(40px,5vw,64px) 0}
.footer-inner{display:flex;justify-content:space-between;gap:28px;flex-wrap:wrap;align-items:center;color:var(--ink-2)}
.footer .logo-chip{height:42px;width:42px}
.footer-links{display:flex;gap:24px;font-size:.94rem}
.footer-links a:hover,.footer a:hover{color:var(--ink)}
.footer-copy{width:100%;text-align:center;color:var(--ink-2);font-size:.86rem;border-top:1px solid var(--line);padding-top:24px;margin-top:28px}

main.page{max-width:820px;margin-inline:auto;padding:clamp(96px,10vw,140px) clamp(20px,4vw,48px) 100px;min-height:50vh}
main.page h1{font-size:clamp(2rem,4vw,2.8rem);margin-bottom:24px}
main.page .entry,main.page .entry p{color:var(--ink-2)}
main.page .post-password-form{margin-top:20px;display:flex;flex-wrap:wrap;gap:12px;align-items:center}
main.page .post-password-form input[type=password]{background:var(--panel);border:1px solid var(--line);color:var(--ink);padding:.7rem 1rem;border-radius:10px;min-width:240px}
main.page .post-password-form input[type=submit]{background:var(--grad);color:#fff;border:0;padding:.72rem 1.4rem;border-radius:999px;font-weight:600;cursor:pointer}

@media(max-width:960px){
  .hero-grid{grid-template-columns:1fr;gap:40px;text-align:center}
  .hero .lead{margin-inline:auto}
  .hero-grid .hero-badges,.hero-grid .hero-cta{justify-content:center}
  .hero-visual{order:-1}
  .hero-logo img{max-width:340px}
  .grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
  .nav-links{display:none}
  .grid-2,.grid-3{grid-template-columns:1fr}
  .compare-row{grid-template-columns:1fr;gap:6px}
  .layer::before{display:none}
}

/* === QA-Fixes (Review-Workflow) === */
:root{--maxw:clamp(1280px,90vw,1500px)}
:where(a,button,input,textarea,select,.btn,summary,[tabindex]):focus-visible{outline:3px solid var(--brand-2);outline-offset:3px;border-radius:10px}
.btn-primary{background:linear-gradient(110deg,#9d22d2,#8a0fc0 55%,#6f1aa0);text-shadow:0 1px 2px rgba(0,0,0,.4)}
.compare-row{grid-template-columns:minmax(0,clamp(170px,22vw,280px)) minmax(0,1fr)}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}.card:hover,.btn-primary:hover{transform:none}}
@media(max-width:900px){.grid-2{grid-template-columns:1fr}}
.nav-mobile{display:none}
/* 820 statt 760: Der Menuepunkt "Produkte" verbreitert .nav-links um rund 100px.
   Zwischen 761 und etwa 815px sprengte das Band dadurch seine feste Hoehe von
   74px — "Investoren-Bereich" brach zweizeilig um, .nav-actions wuchs von 26 auf
   53px. Das Ausklappmenue traegt diesen Bereich sauber, also uebernimmt es
   frueher. Betrifft nur die Navigation; die Rasterregeln im 760er-Block
   darueber (style.css:129) bleiben unveraendert. */
@media(max-width:820px){
  .nav-links,.nav-actions{display:none}
  .nav-mobile{display:block;position:relative;margin-left:auto}
  .nav-mobile>summary{list-style:none;cursor:pointer;font-size:1.6rem;line-height:1;color:var(--ink);padding:4px 10px}
  .nav-mobile>summary::-webkit-details-marker{display:none}
  .nav-panel{position:absolute;right:0;top:calc(100% + 12px);background:#140c24;border:1px solid var(--line-2);border-radius:14px;padding:8px;min-width:215px;display:flex;flex-direction:column;box-shadow:0 26px 64px -20px rgba(0,0,0,.85);z-index:80}
  .nav-panel a{padding:.7rem 1rem;color:var(--ink-2)}
  .nav-panel a:hover{color:var(--ink)}
}

/* === Sprachumschalter === */
.lang-switch{display:flex;align-items:center;gap:5px;font-size:.85rem;font-weight:600;color:var(--ink-2);flex:none}
.lang-switch a{color:var(--ink-2);padding:3px 5px;border-radius:7px;line-height:1}
.lang-switch a:hover{color:var(--ink)}
.lang-switch a.active{color:var(--brand-2)}
.lang-switch span{opacity:.4}

/* Sprachumschalter: aktiver Zustand (span.active) vs. Trenner */
.lang-switch .active{opacity:1;color:var(--brand-2);font-weight:700;padding:3px 5px;line-height:1}
.lang-switch span[aria-hidden]{opacity:.4}

/* === Investoren: Sub-Navigation === */
.inv-subnav{position:sticky;top:74px;z-index:50;background:rgba(10,5,16,.82);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.inv-subnav-inner{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding-block:11px}
.inv-subnav a{padding:.42rem .85rem;border-radius:999px;font-size:.9rem;color:var(--ink-2);border:1px solid transparent;white-space:nowrap;transition:color .15s,background .15s,border-color .15s}
.inv-subnav a:hover{color:var(--ink);background:var(--panel);border-color:var(--line-2)}
.inv-subnav a.dl{color:var(--brand-2);background:var(--panel-2);border-color:var(--line-2);font-weight:600}
@media(max-width:760px){
  .inv-subnav-inner{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .inv-subnav-inner::-webkit-scrollbar{display:none}
  .inv-subnav a.dl{margin-left:0}
}

/* === Investoren: Download-Liste === */
.doc-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:8px}
.doc{display:flex;align-items:center;gap:15px;padding:15px 18px;border:1px solid var(--line);border-radius:14px;background:var(--panel);transition:border-color .15s,transform .15s,background .15s}
.doc:hover{border-color:var(--line-2);background:var(--panel-2);transform:translateY(-2px)}
.doc-ic{flex:none;width:42px;height:42px;display:grid;place-items:center;border-radius:11px;background:var(--panel-2);border:1px solid var(--line);color:var(--brand-2)}
.doc-meta{display:flex;flex-direction:column;min-width:0;flex:1}
.doc-title{font-weight:700;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.doc-sub{font-size:.8rem;color:var(--ink-2);letter-spacing:.06em;text-transform:uppercase}
.doc-dl{flex:none;color:var(--ink-2);transition:color .15s,transform .15s}
.doc:hover .doc-dl{color:var(--brand-2);transform:translateY(2px)}
.dl-all{margin-top:24px}
@media(max-width:680px){.doc-list{grid-template-columns:1fr}}

/* === Investoren: Login === */
.inv-login{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:22px}
.inv-login input[type=password]{background:var(--panel);border:1px solid var(--line);color:var(--ink);padding:.8rem 1rem;border-radius:10px;min-width:260px;font-size:1rem}
.inv-login input[type=password]:focus{outline:none;border-color:var(--brand-2)}
.login-err{color:#ff9a9a;background:rgba(255,80,80,.08);border:1px solid rgba(255,80,80,.32);padding:.6rem .9rem;border-radius:10px;margin-top:16px;font-size:.95rem}

/* === Investoren: Userbar (eingeloggt) === */
.inv-userbar{border-bottom:1px solid var(--line);background:var(--panel-2)}
.inv-userbar-inner{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-block:9px;font-size:.9rem;color:var(--ink-2)}
.inv-userbar strong{color:var(--ink)}
.inv-logout{color:var(--brand-2);font-weight:600}
.inv-logout:hover{color:var(--ink)}

/* === Investoren: Statistik-Dashboard === */
.stats-table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:14px;margin-top:8px}
.stats-table{width:100%;border-collapse:collapse;font-size:.95rem}
.stats-table th,.stats-table td{text-align:left;padding:.7rem 1rem;border-bottom:1px solid var(--line)}
.stats-table th{color:var(--brand-2);text-transform:uppercase;letter-spacing:.08em;font-size:.74rem}
.stats-table tbody tr:last-child td{border-bottom:0}
.stats-table td:nth-child(2){font-weight:700;color:var(--ink)}
.stats-logh{margin:26px 0 10px;font-size:1rem;color:var(--ink-2)}
.stats-log{border:1px solid var(--line);border-radius:14px;background:#0c0718;max-height:340px;overflow:auto}
.stats-log pre{margin:0;padding:14px 16px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.78rem;color:var(--ink-2);white-space:pre;line-height:1.5}

/* === Investoren: Sprach-Indikator an Dokument-Kacheln === */
.doc-lang{flex:none;font-size:.68rem;font-weight:800;letter-spacing:.12em;color:var(--brand-2);background:var(--panel-2);border:1px solid var(--line-2);border-radius:7px;padding:.22rem .5rem;line-height:1}

/* === Produktseiten === */
/* Fruehere Fassung setzte zusaetzlich die Klasse "page". main.page ist aber die
   PROSA-Regel (max-width:820px) fuer Impressum und Datenschutz — dadurch steckten
   alle .container der Produktseiten in 820px statt 1280px fest und die Inhaltsachse
   lag 286px neben der von Kopf- und Fusszeile. Die Klasse ist entfernt; was von ihr
   gebraucht wurde, steht jetzt hier. */
main.product{min-height:50vh}
/* Der Entwurfshinweis steht ausserhalb jeder section und braucht daher eigenen
   Abstand zur Navigation. */
main.product > .container:first-child{padding-top:clamp(22px,3vw,34px)}
/* Der Produkt-Hero ist einspaltig (kein hero-grid), deshalb etwas flacher als
   der Hero der Startseite. Alles Weitere kommt aus den bestehenden Klassen. */
.product .hero-compact{padding:clamp(44px,5vw,76px) 0 clamp(40px,4.5vw,64px)}
.product .hero-compact h1{font-size:clamp(2.1rem,4vw,3.4rem)}
.product .hero-compact .lead{max-width:62ch}
.product section:last-of-type:not(:first-of-type){padding-top:0}

/* Entwurfshinweis — nur sichtbar, solange draft => true in build.php steht. */
.draft-note{margin:0;margin-top:clamp(18px,2.4vw,30px);border:1px dashed var(--brand-2);border-radius:12px;background:var(--panel-2);color:var(--brand-2);padding:.8rem 1.1rem;font-size:.86rem;font-weight:600;letter-spacing:.02em}

/* === Investorenbereich: Etappen ======================================== */
/* Die grosse Nummer ist dieselbe Idee wie .layer::before auf der Startseite,
   hier aber lesbar statt als Schatten: sie ist Orientierung, nicht Dekor.
   Die Nummern sitzen als Knoten auf einer durchgehenden Linie — damit ist der
   Weg durch die Unterlagen zu sehen und nicht nur behauptet. Die Linie laeuft
   ueber die ganze Etappenhoehe; der Knoten deckt sie mit der Seitenfarbe ab. */

/* Zwei klebende Leisten uebereinander (Hauptnavigation 74px + Etappenleiste),
   deshalb mehr Vorlauf beim Sprung auf einen Anker. */
html:has(.inv-subnav){scroll-padding-top:146px}

/* --- Klebende Etappenleiste ------------------------------------------- */
.subnav-lead{font-size:.74rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2);opacity:.7;margin-right:6px;white-space:nowrap}
.inv-subnav a{display:inline-flex;align-items:baseline;gap:.5rem}
.subnav-n{font-variant-numeric:tabular-nums;font-weight:700;color:var(--brand-2)}
.inv-subnav a.here{color:var(--ink);background:var(--panel-2);border-color:var(--line-2)}
.inv-subnav a.here .subnav-n{color:#fff}
@media(max-width:1180px){.subnav-label{display:none}}

/* --- Lichtstimmung hinter dem Intro ------------------------------------ */
/* Gleiche Machart wie .hero-bg auf der Startseite, nur ruhiger. */
.inv-intro{overflow:hidden}
.inv-intro::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(52% 72% at 18% 34%,rgba(165,15,229,.24),transparent 64%),
             radial-gradient(44% 62% at 92% 4%,rgba(200,117,244,.13),transparent 62%)}

/* --- Etappen: Strang und Knoten ---------------------------------------- */
.stages-sec{padding-top:clamp(6px,1.4vw,18px)}
.stages{--rail:clamp(66px,7.6vw,116px);--num:clamp(2.5rem,5.4vw,4rem);--pad:clamp(34px,4vw,54px)}
.stage{position:relative;padding:var(--pad) 0 var(--pad) var(--rail)}
.stage:first-child{padding-top:0}

.stage::before{content:"";position:absolute;left:calc((var(--rail) - 22px) / 2);top:0;bottom:0;width:1px;
  background:linear-gradient(180deg,var(--line-2),var(--line) 55%,var(--line-2))}
.stage:last-child::before{display:none}

.stage-node{position:absolute;left:0;top:var(--pad);width:calc(var(--rail) - 22px);display:flex;justify-content:center;background:var(--bg);padding-block:4px 12px}
.stage:first-child .stage-node{top:0}
.stage-n{font-size:var(--num);font-weight:900;line-height:.86;letter-spacing:-.045em;font-variant-numeric:tabular-nums;filter:drop-shadow(0 0 26px rgba(165,15,229,.4))}
.stage:last-child .stage-n{filter:drop-shadow(0 0 32px rgba(200,117,244,.6))}

.stage-head{display:flex;align-items:flex-start;gap:clamp(14px,1.6vw,20px);margin-bottom:clamp(20px,2.4vw,30px)}
/* Etappensymbol GEFUELLT, Dokumentsymbol umrandet — daran haengt die ganze
   Hierarchie. Vorher waren beide brand-2 auf panel-2 und damit dasselbe Objekt
   auf zwei Ebenen. Gefuellt gegen umrandet ist dieselbe Unterscheidung, die
   .invest .lock auf der Startseite und .btn-primary gegen .btn-ghost treffen.
   Der Verlauf ist der dunklere der Schaltflaechen, nicht --grad: auf dessen
   hellem Ende (#d680f7) haette das weisse Symbol zu wenig Kontrast. */
.stage-ic{flex:none;width:52px;height:52px;display:grid;place-items:center;border-radius:16px;border:0;
  background:linear-gradient(135deg,#9d22d2,#8a0fc0 58%,#6f1aa0);color:#fff;
  box-shadow:0 16px 44px -16px rgba(165,15,229,.9),inset 0 1px 0 rgba(255,255,255,.22)}
/* Die letzte Etappe traegt den Abschluss — ihr Symbol leuchtet etwas staerker. */
.stage:last-child .stage-ic{box-shadow:0 20px 54px -14px rgba(200,117,244,.95),inset 0 1px 0 rgba(255,255,255,.3)}
.stage-txt{min-width:0}
.stage-title{font-size:clamp(1.35rem,2.4vw,1.95rem);margin:0}
.stage-lead{color:var(--ink-2);margin:.5rem 0 0;max-width:62ch;font-size:clamp(.98rem,1.3vw,1.08rem)}

/* Einblenden beim Scrollen. Die Klasse .reveal setzt erst das Skript — ohne
   JavaScript ist damit alles von vornherein sichtbar. */
.stage.reveal{opacity:0;transform:translateY(16px)}
.stage.reveal.in{opacity:1;transform:none;transition:opacity .6s ease,transform .6s cubic-bezier(.2,.75,.3,1)}

/* --- Dokumentkachel ----------------------------------------------------- */
/* Traegt jetzt einen Einzeiler: oben ausgerichtet statt zentriert, Titel darf
   umbrechen, und beim Ueberfahren leuchtet eine Kante in der Markenfarbe auf. */
.doc{align-items:flex-start;position:relative;overflow:hidden}
.doc::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--grad);opacity:0;transition:opacity .18s}
.doc:hover::before{opacity:1}
.doc:hover{transform:translateY(-3px);box-shadow:0 20px 46px -24px rgba(165,15,229,.85)}
.doc-ic{margin-top:2px}
.doc-title{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.3}
.doc-desc{color:var(--ink-2);font-size:.92rem;line-height:1.5;margin-top:.34rem}
.doc-sub{margin-top:.45rem}
.doc-lang,.doc-dl{margin-top:2px}
.doc-list:has(.doc:only-child){grid-template-columns:minmax(0,1fr)}

/* --- Abschluss ---------------------------------------------------------- */
.stage-cta{margin-top:clamp(24px,3vw,36px);border:1px solid var(--line-2);border-radius:var(--radius);padding:clamp(26px,3.2vw,44px);
  background:radial-gradient(86% 150% at 50% 0%,rgba(165,15,229,.2),transparent 72%);
  box-shadow:0 34px 90px -56px rgba(165,15,229,.95),inset 0 1px 0 rgba(255,255,255,.05)}
.cta-title{font-size:clamp(1.25rem,2.1vw,1.7rem);margin:0;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.cta-text{color:var(--ink-2);margin:.7rem 0 1.5rem;max-width:62ch}
.cta-all{color:var(--ink-2);font-size:.9rem;margin:1.8rem 0 .7rem}
.stage-cta .dl-all{margin-top:0;display:flex;gap:12px;flex-wrap:wrap}

/* Admin-Dashboard steht am Seitenende und wird optisch abgesetzt. */
.inv-admin{border-top:1px solid var(--line);background:rgba(255,255,255,.015)}

@media(max-width:760px){
  /* Kein Platz fuer eine Schiene: Nummer wandert ueber die Ueberschrift. */
  .stages{--rail:0px}
  .stage{padding-left:0}
  .stage::before{display:none}
  .stage-node{position:static;width:auto;justify-content:flex-start;background:none;padding:0 0 10px}
  .stage-n{font-size:2.5rem}
  .stage-head{gap:14px}
}

/* === VARIANTE "Boxen" (?v=boxen, nur Staging) ==========================
   Statt der senkrechten Schiene mit Knoten trennt hier ein eigener Rahmen je
   Etappe die Phasen voneinander. Die Nummer bleibt das Orientierungsmerkmal,
   wandert aber in die obere rechte Ecke der Box — vor der Ueberschrift stuende
   sie dem Etappensymbol im Weg, das die Hierarchie traegt.
   Alles hier ist auf .stages-boxed gehaengt; die bestehende Fassung bleibt
   unveraendert erreichbar. */

.stages-boxed{--rail:0px}
.stages-boxed .stage{
  padding:clamp(26px,3vw,42px);
  border:1px solid var(--line-2);
  border-radius:var(--radius);
  background:var(--panel);
  margin-bottom:clamp(16px,2vw,26px);
}
.stages-boxed .stage:first-child{padding-top:clamp(26px,3vw,42px)}
.stages-boxed .stage:last-child{margin-bottom:0}

/* Die Schiene ist der Kern der anderen Fassung — hier faellt sie ganz weg. */
.stages-boxed .stage::before{display:none}

/* Nummer in die Ecke. Hoehere Spezifitaet als die 760px-Regeln der Grundfassung,
   damit sie auch dort greift; fuer schmale Fenster weiter unten korrigiert. */
.stages-boxed .stage-node{
  position:absolute;left:auto;right:clamp(18px,2.2vw,32px);top:clamp(16px,1.9vw,26px);
  width:auto;background:none;padding:0;
}
.stages-boxed .stage-n{font-size:clamp(1.9rem,3.6vw,2.9rem);opacity:.55;filter:none}
.stages-boxed .stage:last-child .stage-n{filter:none}

/* Platz freihalten, damit die Ueberschrift nicht unter die Nummer laeuft. */
.stages-boxed .stage-head{padding-right:clamp(48px,6.5vw,84px)}

/* Die letzte Etappe traegt den Abschluss — Rahmen in Markenfarbe statt Glow. */
.stages-boxed .stage:last-child{border-color:rgba(165,15,229,.42)}

@media(max-width:760px){
  /* In der Ecke wird es zu eng: Nummer zurueck in den Fluss ueber die Ueberschrift. */
  .stages-boxed .stage-node{position:static;width:auto;justify-content:flex-start;padding:0 0 8px}
  .stages-boxed .stage-n{font-size:2.2rem}
  .stages-boxed .stage-head{padding-right:0}
}

/* Umschalter zwischen den Varianten — existiert nur auf Staging. */
.variant-switch{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:clamp(20px,2.6vw,32px)}
.vs-lead{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);margin-right:4px}
.vs-opt{font-size:.86rem;font-weight:600;color:var(--ink-2);border:1px solid var(--line);background:var(--panel-2);
  padding:.4rem .9rem;border-radius:999px;text-decoration:none;transition:color .15s,border-color .15s}
.vs-opt:hover{color:var(--ink);border-color:var(--line-2)}
.vs-opt.is-on{color:#fff;border-color:transparent;background:linear-gradient(135deg,#9d22d2,#8a0fc0 58%,#6f1aa0)}

/* === Produktübersicht === */
/* Die Kachel ist ein Link, .card ist es nicht: Flow-Layout statt Textfluss,
   damit "Mehr erfahren" unabhängig von der Teaser-Länge unten sitzt. */
.prod-card{display:flex;flex-direction:column;color:inherit}
.prod-card .prod-kicker{margin:0 0 10px;font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--brand-2)}
.prod-card p{flex:1}
.prod-card .prod-more{margin-top:16px;font-weight:600;font-size:.92rem;color:var(--brand-2);transition:transform .15s}
.prod-card:hover .prod-more{color:var(--ink)}
.prod-card:hover h3{color:var(--brand-2)}

/* Befehlsnamen im Fließtext der Produktseiten (npm install, git push …).
   In der Überschrift ohne Rahmen und ohne negatives Tracking, sonst kippt
   die Zeile optisch gegenüber dem übrigen h3. */
.product code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.92em;background:var(--panel-2);border:1px solid var(--line);border-radius:6px;padding:.08em .38em}
.product h3 code{font-size:.9em;font-weight:800;letter-spacing:0;background:none;border:0;padding:0;color:var(--brand-2)}



/* ==== Produktuebersicht /produkte/ — Schichtbild (Anwendungen ueber Fundament) ====
   LIVE: diese Regeln tragen die freigegebene Seite /produkte/. Praefix .va- .
   Entstanden 2026-08-22 als einer von drei Entwuerfen; die uebrigen wurden
   entfernt, dieser Block blieb in Benutzung. NICHT loeschen. */
/* === Produktübersicht: Schichtbild ========
   Wird ans Ende von style.css angehängt. Alle eigenen Klassen tragen das
   Präfix va-, damit die drei Entwurfsvarianten sich im gemeinsamen
   Stylesheet nicht gegenseitig überschreiben. Farben, Radien, Verläufe und
   Abstände kommen ausschließlich aus den bestehenden Variablen — neu ist die
   Anordnung, nicht die Optik. */

/* --- Zwei Korrekturen am Sektionsrhythmus, nur auf dieser Seite ---------
   style.css:232 `.product section:last-of-type:not(:first-of-type){padding-top:0}`
   zielt auf eine Position im Dokument, nicht auf eine Beziehung. Gemeint war
   „die Sektion direkt nach dem Hero"; bei sechs Sektionen trifft die Regel
   stattdessen den Abschlussblock und reißt ihm das Kopfpolster weg (0 statt
   101px bei 1440px). Statt die Zeile in style.css umzuschreiben — das änderte
   auch /chat/, /forge/ und /registry/ — wird sie hier zurechtgerückt.

   Der Haken :has(.va-stack) ist der Grund, warum das niemanden sonst trifft:
   .product.products tragen ALLE Entwurfsvarianten, das Schichtbild nur diese.
   Dieselbe Technik benutzt style.css schon bei html:has(.inv-subnav). Fällt
   :has() aus, greift wieder der Grundstand — die Seite bleibt benutzbar. */
main.products:has(.va-stack) > section:last-of-type{padding-top:clamp(64px,7vw,116px)}
main.products:has(.va-stack) > .hero-compact + section{padding-top:clamp(28px,3.4vw,52px)}

/* Der Entwurfshinweis ist ein Marker, kein Banner: über die volle
   Containerbreite gezogen wäre er das Auffälligste auf der Seite. Er braucht
   ausserdem Abstand nach unten — .draft-note hat margin-bottom:0, weil der
   Hinweis bisher allein in einem eigenen .container stand und keinen Nachbarn
   hatte. Im Hero folgt jetzt direkt die Rubrik. */
main.products:has(.va-stack) .draft-note{max-width:58ch;margin-bottom:clamp(20px,2.6vw,32px)}

/* --- Das Schichtbild ---------------------------------------------------
   Oben die Anwendungen, unten das Fundament, dazwischen die Vererbung.
   Gebaut aus Grid und Rahmen; das einzige SVG ist ein Pfeil ohne Text und
   damit sprachneutral. */
.va-stack{
  margin-top:clamp(36px,4vw,56px);
  padding:clamp(18px,2.2vw,30px);
  border:1px solid var(--line-2);
  border-radius:calc(var(--radius) + 8px);
  background:radial-gradient(92% 130% at 50% 122%,rgba(165,15,229,.20),transparent 68%),var(--panel);
  box-shadow:0 40px 110px -60px rgba(165,15,229,.9);
  overflow:hidden;
}

/* Beschriftung einer Ebene — ruhiger als .eyebrow, das gehört dem Abschnitt. */
.va-label{
  margin:0 0 clamp(12px,1.5vw,18px);
  font-size:.72rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-2);
}

/* Obere Ebene: die drei Anwendungen. */
.va-apps{display:grid;gap:clamp(12px,1.4vw,18px);grid-template-columns:repeat(3,minmax(0,1fr))}
.va-app{
  display:flex;flex-direction:column;gap:7px;min-width:0;
  padding:clamp(16px,1.8vw,24px);
  border:1px solid var(--line);border-radius:var(--radius);
  background:var(--panel-2);
}
.va-app-kicker{font-size:.67rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--brand-2)}
.va-app-name{font-size:1.05rem;font-weight:800;letter-spacing:-.01em;line-height:1.25;overflow-wrap:break-word}
.va-app-role{color:var(--ink-2);font-size:.9rem;line-height:1.5}

/* Die offene Position ist KEIN viertes Produkt, sondern der Platz, auf den
   Kundenanwendungen ziehen. Gestrichelt, ohne Fläche und quer über die
   Reihe — als vierte Kachel neben den drei Produkten würde sie als eines
   gelesen und nähme den Produktkacheln außerdem ein Viertel ihrer Breite. */
.va-open{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;
  margin-top:clamp(12px,1.4vw,18px);
  padding:clamp(13px,1.4vw,18px) clamp(16px,1.8vw,24px);
  border:1px dashed var(--line-2);border-radius:var(--radius);
}
.va-open .va-app-kicker,.va-open .va-app-name{color:var(--ink-2)}
.va-open .va-app-name{font-size:1rem}

/* Übergang: was unten gebaut ist, erben oben alle. */
.va-inherit{display:flex;align-items:center;gap:clamp(12px,1.6vw,18px);margin:clamp(16px,2vw,24px) 0}
.va-inherit::before,.va-inherit::after{content:"";height:1px;flex:1;min-width:10px}
.va-inherit::before{background:linear-gradient(90deg,transparent,var(--line-2))}
.va-inherit::after{background:linear-gradient(90deg,var(--line-2),transparent)}
.va-arrow{
  flex:none;width:34px;height:34px;display:grid;place-items:center;border-radius:11px;
  background:linear-gradient(135deg,#9d22d2,#8a0fc0 58%,#6f1aa0);color:#fff;
  box-shadow:0 12px 32px -12px rgba(165,15,229,.85);
}
.va-inherit p{margin:0;text-align:center;color:var(--ink-2);font-size:.94rem}

/* Untere Ebene: das Fundament. Die Oberkante ist die Traglinie — sie trägt
   sichtbar, was darüber steht. */
.va-base{
  position:relative;overflow:hidden;
  padding:clamp(22px,2.6vw,34px);
  border:1px solid var(--line-2);border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(165,15,229,.17),rgba(165,15,229,.05));
}
.va-base::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--grad)}
.va-base-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 16px}
.va-base h3{font-size:clamp(1.2rem,2vw,1.62rem);margin:0}
.va-base-sub{margin:10px 0 0;max-width:64ch;color:var(--ink-2);font-size:.98rem}

/* Die Pfeiler des Fundaments. */
.va-pillars{display:grid;gap:clamp(12px,1.4vw,18px);grid-template-columns:repeat(3,minmax(0,1fr));margin-top:clamp(18px,2.2vw,28px)}
.va-pillar{display:flex;flex-direction:column;min-width:0;padding:clamp(14px,1.6vw,20px);border:1px solid var(--line);border-radius:14px;background:rgba(10,5,16,.34)}
.va-pillar h4{margin:0 0 8px;font-size:1rem;font-weight:800;letter-spacing:-.01em;line-height:1.25;overflow-wrap:break-word}
.va-pillar p{flex:1;margin:0;color:var(--ink-2);font-size:.9rem;line-height:1.55}

/* Was noch nicht läuft, sieht auch nicht so aus wie das, was läuft:
   gestrichelt und ohne Fläche — dieselbe Unterscheidung, mit der zwei Reihen
   darüber schon die offene Position von den drei Produkten getrennt wird.
   Ohne diesen Unterschied liest sich das Bild so, als sei die Hardware-Ebene
   heute Teil des Fundaments. */
.va-pillar.is-soon{border-style:dashed;border-color:var(--line-2);background:none}
.va-pillar.is-soon h4{color:var(--ink-2)}

/* Reifegrad je Pfeiler. Gefüllt = live, gestrichelt umrandet = Ausbau —
   dieselbe Unterscheidung, die .btn-primary gegen .btn-ghost trifft. */
.va-state{
  align-self:flex-start;margin-top:14px;
  font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:.28rem .72rem;border-radius:999px;
  border:1px solid var(--line-2);color:var(--ink-2);
}
.va-state.is-live{border-color:transparent;background:linear-gradient(135deg,#9d22d2,#8a0fc0 58%,#6f1aa0);color:#fff}
.va-state.is-soon{border-style:dashed}

/* Auflösungs- und Einordnungssätze unter Bild und Beweisraster. */
.va-note{margin:clamp(20px,2.4vw,30px) 0 0;max-width:78ch;color:var(--ink-2);font-size:.94rem}
.va-note + .va-note{margin-top:14px}

/* --- Reifegrad an der Produktkachel ------------------------------------
   .pill bringt margin-bottom:16px mit, gedacht über einer Überschrift; in der
   Kachel steht er unter dem Namen und braucht den Abstand oben.
   .prod-card p{flex:1} (style.css:392) trifft auch den Kicker, weil der ein
   <p> ist — bei ungleich langen Teasern wächst dadurch der Kicker mit und die
   Produktnamen sitzen auf verschiedenen Grundlinien. Dehnen soll nur der
   Teaser. */
main.products:has(.va-stack) .prod-card .prod-kicker{flex:none;margin:0 0 10px}
main.products:has(.va-stack) .prod-card h3{margin-bottom:0}
main.products:has(.va-stack) .prod-card .pill{flex:none;margin:12px 0 0;font-size:.68rem;letter-spacing:.08em}
main.products:has(.va-stack) .prod-card p{margin-top:14px}

/* --- Beweisraster ------------------------------------------------------
   Nummerierter Kicker wie .konsulat .kn auf der Startseite, nur ohne
   Monospace: hier zählt die Reihenfolge 01/02/03, nicht der Code-Ton. */
.va-proof .va-pnum{margin-bottom:12px;font-size:.72rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--brand-2)}
.va-proof h3{font-size:1.18rem}

/* Im Abschlussblock sitzt die Überschrift direkt über dem Lead. */
.va-cta-title{margin-bottom:6px}

/* --- Schmale Fenster ---------------------------------------------------
   Das Schichtbild muss bei 768px dasselbe sagen wie bei 1440px: drei Kacheln
   auf einem Band. Deshalb bleiben die Anwendungen so lange wie möglich eine
   Reihe; ab 900px wird daraus 2+1 (die dritte Kachel spannt), erst ab 600px
   eine Spalte. So bleibt die Ebene als Ebene erkennbar, statt zu einer Liste
   zu zerfallen. */
@media(max-width:900px){
  .va-apps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .va-apps > :last-child{grid-column:1 / -1}
  .va-pillars{grid-template-columns:1fr}
}
@media(max-width:600px){
  .va-apps{grid-template-columns:1fr}
  .va-apps > :last-child{grid-column:auto}
  .va-inherit::before,.va-inherit::after{display:none}
  .va-inherit p{text-align:left}
}


/* ==== Produktuebersicht /produkte/ — Geruest, Vergleichsmuster, Nachweiskarten ====
   LIVE: diese Regeln tragen die freigegebene Seite /produkte/. Praefix .vb- .
   Entstanden 2026-08-22 als einer von drei Entwuerfen; die uebrigen wurden
   entfernt, dieser Block blieb in Benutzung. NICHT loeschen. */
/* === Produktuebersicht: Geruest und Vergleichsmuster ===================
   Vier Deklarationen. Alles andere auf der Seite kommt aus bestehenden,
   erprobten Klassen: .hero/.hero-bg/.hero-compact, .section-head/
   .section-title/.eyebrow/.lead/.grad, .compare/.compare-row/.compare-row.win,
   .grid/.grid-3, .card, .prod-card/.prod-more, .pill, .badge, .invest,
   .btn/.btn-primary/.btn-ghost, .product code.
   Kein neuer Breakpoint, keine neue Komponente, kein Eingriff an main.page.
   Ans Ende von style.css, in den Block "=== Produktuebersicht ===" (ab :387).
   ===================================================================== */

/* .compare, .compare-row und .compare-row.win (style.css:87-95 und :140) waren
   totes CSS — im Stylesheet vorhanden, aber von keinem Template je gerendert.
   Beim ersten Rendern kam ein Fehler heraus, den nie jemand sehen konnte:
   style.css:132 klappt die Zeile ab 760px einspaltig um, aber der spaetere
   QA-Fix in style.css:140 setzt grid-template-columns erneut — gleiche
   Spezifitaet, weiter hinten im Stylesheet, also gewinnt er auch INNERHALB der
   Media Query. Ergebnis bei 390px: das Raster bleibt zweispaltig, die Marke
   belegt 170px und dem Text bleiben 132px — vier bis fuenf Zeichen je Zeile.
   Die eine Regel stellt her, was style.css:132 immer gemeint hat. Sie wirkt
   nur auf .compare, und .compare kommt ausser auf dieser Seite nirgends vor. */
@media(max-width:760px){.compare-row{grid-template-columns:1fr;gap:6px}}

/* Der Reifegrad-Marker in der Produktkachel. .prod-card ist eine Flex-Spalte
   (style.css:390); Flex-Kinder strecken sich standardmaessig ueber die volle
   Breite, und .pill ist zwar inline-block, wird als Flex-Item aber
   blockifiziert — der Chiprahmen liefe sonst von Kante zu Kante und waere kein
   Chip mehr (gemessen ohne die Zeile: 313,3px statt 130,8px). */
.prod-card>.pill{align-self:flex-start}

/* Der Beweissatz fuehrt den Kachel-Absatz an und muss lesbar vorne stehen.
   .card p setzt --ink-2 (style.css:72); ohne diese Zeile waere das Fett nur ein
   gedaempftes Fett. Dieselbe Unterscheidung trifft .tick strong (style.css:76)
   auf der Startseite bereits. */
.prod-card p strong{color:var(--ink)}

/* Der Entwurfshinweis steht auf dieser Seite IM Hero-Container statt
   freistehend davor: dort traegt die Sektion den Vorlauf, und das Umschalten
   von draft auf false verschiebt den Seitenanfang nicht mehr. Sein margin-top
   ist fuer den freistehenden Fall gedacht (style.css:235); im Hero braucht er
   nur noch Abstand zur Rubrik darunter — .eyebrow hat kein margin-top
   (style.css:28). Wirkt ausschliesslich auf Hinweise INNERHALB eines .hero;
   der freistehende Hinweis der Einzelproduktseiten bleibt unveraendert. */
.hero .draft-note{margin-top:0;margin-bottom:clamp(18px,2.4vw,30px)}

/* style.css:232 (.product section:last-of-type:not(:first-of-type)) zielt auf
   eine POSITION im Dokument statt auf eine Beziehung; gemeint war "die Sektion
   direkt nach dem Hero". Bei zwei Sektionen stimmt das zufaellig, diese Seite
   hat fuenf — der Abschlussblock verlaere sonst sein Kopfpolster und klebte an
   der Sektion darueber (gemessen: 0px statt 116px). Der Fix haengt an der ID
   dieser Variante, damit er weder die Einzelproduktseiten noch die anderen
   Entwuerfe beruehrt; der Wert ist der Sektionsvorgabewert aus style.css:27. */
#vb-gespraech{padding-top:clamp(64px,7vw,116px)}


/* ==== Produktuebersicht /produkte/ — Produktbloecke ueber volle Satzbreite ====
   LIVE: diese Regeln tragen die freigegebene Seite /produkte/. Praefix .vc- .
   Entstanden 2026-08-22 als einer von drei Entwuerfen; die uebrigen wurden
   entfernt, dieser Block blieb in Benutzung. NICHT loeschen. */
/* ======================================================================
   Produktbloecke der Uebersicht
   Ans ENDE von style.css anhaengen. Keine bestehende Zeile wird geaendert.

   Es entsteht KEINE neue Komponente. Sichtbar ist ausschliesslich, was das
   Stylesheet schon kann: .card .grid .tick .feat .pill .konsulat .layer
   .invest .badge .btn .eyebrow .section-head .lead. Neu sind nur
   Modifikatoren (.vc-prod, .vc-base, .vc-frame …) und Korrekturen an
   Rhythmus und Lesemass.

   Alles haengt an .vc-* bzw. an section.vc. Damit bleiben Startseite,
   Produktdetailseiten, /produkte/ und die Nachbarvarianten unberuehrt,
   auch wenn deren CSS-Bloecke in derselben Datei stehen.
   ====================================================================== */

/* --- 1. Abschnittsrhythmus -------------------------------------------
   "Dicht" heisst hier: die Sektionen atmen weniger als auf der Startseite
   (dort clamp(64px,7vw,116px)), weil sechs Kapitel hintereinander sonst
   zum Scrollweg werden. Der Hero behaelt seine eigenen Abstaende.        */
.products section.vc:not(.hero){padding-block:clamp(48px,5.2vw,86px)}

/* style.css:232 '.product section:last-of-type:not(:first-of-type)' meint
   "die Kartensektion direkt nach dem Hero" — auf /chat/ trifft das zu, auf
   einer Seite mit sechs Sektionen nimmt es dem Abschluss sein Kopfpolster
   und klebt ihn an "Warum jetzt". Nur fuer diese Seite zuruecknehmen;
   /chat/, /forge/, /registry/ und /produkte/ bleiben exakt wie heute.     */
main.product.products section.vc:last-of-type{padding-top:clamp(48px,5.2vw,86px)}

/* Zwischen Hero und erstem Kapitel darf es enger zugehen: der Hero endet
   bereits mit zwei Karten, eine volle Sektionsluft waere ein Loch.        */
.products section.vc.vc-tight{padding-top:clamp(30px,3.4vw,52px)}

/* --- 2. Entwurfshinweis ----------------------------------------------
   Steht ab jetzt IM Hero-Container statt in einem eigenen .container
   davor. Damit haengt der vertikale Rhythmus der Seite nicht mehr daran,
   ob draft an oder aus ist, und der Hinweis schrumpft auf seine Textbreite,
   statt als Band ueber die volle Spalte zu laufen: Marker, nicht Schlagzeile. */
/* display:block mit width:max-content — inline-block wuerde sich die Zeile
   mit der folgenden .eyebrow teilen (die ist ebenfalls inline-block). */
.vc-head .draft-note{display:block;width:max-content;max-width:100%;margin-top:0;margin-bottom:clamp(16px,1.8vw,24px);font-size:.8rem}

/* Ueberschriften duerfen ihre Zeilen selbst ausgleichen, statt eine letzte
   Zeile mit einem Wort stehen zu lassen. Ohne Unterstuetzung wirkungslos. */
.vc h1,.vc .section-title{text-wrap:balance}

/* --- 3. Sprungmarken im Hero -----------------------------------------
   .badge ist als <span> gebaut; als <a> braucht es einen sichtbaren
   Anfassbarkeitshinweis.                                                 */
.vc-head .hero-badges a.badge{transition:color .15s,border-color .15s,background .15s}
.vc-head .hero-badges a.badge:hover{color:var(--ink);border-color:var(--brand-2)}

/* --- 4. Die Klammer im Hero ------------------------------------------
   Statt eines eigenen Abschnitts: eine redaktionelle Linie unter dem
   Aufmacher, darunter das Prinzip, zweimal angewandt. Die Zwischen-
   ueberschrift muss der h1 den Vortritt lassen.                          */
.vc-frame{margin-top:clamp(38px,4.6vw,68px);padding-top:clamp(30px,3.6vw,50px);border-top:1px solid var(--line)}
main.products .vc-frame-head .section-title{font-size:clamp(1.4rem,2.4vw,2.05rem)}
main.products .vc-frame-head .lead{max-width:74ch}
.vc-frame .grid{margin-top:clamp(26px,3vw,40px)}
/* Grosse Bloecke sollen beim Ueberfahren nicht springen — die Randfarbe
   aus .card:hover bleibt, der Versatz entfaellt.                         */
.vc-frame .card:hover,.vc-prod:hover,.vc-base:hover,.vc-check:hover{transform:none}

/* --- 5. Fundament als Grundflaeche (Modifikator von .card) ------------ */
.card.vc-base{background:linear-gradient(180deg,rgba(165,15,229,.10),rgba(165,15,229,.02));border-color:var(--line-2)}
.card.vc-base>.grid{margin-top:clamp(24px,2.6vw,34px)}
/* .feat traegt hier h4 statt h3, damit die Kette h1>h2>h3>h4 stimmt; h4
   ist vom Reset in style.css:24 nicht erfasst und braucht die Angaben selbst. */
.vc-base .feat h4{font-size:1.12rem;line-height:1.2;letter-spacing:-.02em;font-weight:800;margin:0 0 6px}
.vc-base .feat .pill{margin-bottom:10px}
/* Ehrlicher Reifegrad: was live ist, traegt die Markenfarbe; was erst
   kommt, steht bewusst gedaempft daneben und ist nicht zu verwechseln.   */
.pill.vc-pill-next{color:var(--ink-2);background:rgba(255,255,255,.05);border-color:var(--line)}

/* --- 6. Produktblock (Modifikator von .card) — das Kernstueck ---------
   Ein .card ueber die volle Satzbreite, innen zweispaltig: links Reifegrad,
   Name, Einordnung, Weg zur Detailseite; rechts die belegten Kernpunkte.
   .grid bringt margin-top:clamp(36px,4vw,56px) mit — im Karteninneren
   waere das ein zweiter Innenabstand.                                    */
.vc-rows{gap:clamp(16px,1.8vw,22px)}
.vc-prod{scroll-margin-top:110px}
.vc-prod>.grid{margin-top:0}
.vc-prod h3{font-size:clamp(1.5rem,2.6vw,2.05rem);margin:0 0 14px}
.vc-prod .vc-face>p{max-width:52ch}
/* Die Belegspalte ist regelmaessig hoeher als die Einordnung. Der Weg zur
   Detailseite sitzt deshalb am Fuss der linken Spalte, auf einer Linie mit
   dem Ende der Kernpunkte, statt eine Restflaeche offen zu lassen. */
.vc-prod .vc-face{display:flex;flex-direction:column;align-items:flex-start}
.vc-prod .vc-face h3,.vc-prod .vc-face>p{align-self:stretch}
.vc-prod .btn{margin-top:clamp(20px,2.2vw,28px)}
@media(min-width:901px){.vc-prod .btn{margin-top:auto}.vc-prod .vc-face>p{margin-bottom:clamp(20px,2.2vw,28px)}}
/* Die Kernpunkte sind die Belegspalte — eine Haarlinie trennt sie von der
   Einordnung, wie die Randspalte eines Dossiers.                         */
.vc-prod .vc-points{padding-left:clamp(20px,2.4vw,36px);border-left:1px solid var(--line)}
.vc-prod .vc-points .tick{margin-top:0}

/* --- 7. Nachweis und Datumskarten ------------------------------------ */
.vc-check .tick+.vc-note{margin-top:22px}
/* Das Datum ist die Orientierung dieser Karte und darf groesser sein als
   eine gewoehnliche Rubrik.                                              */
.vc-date .eyebrow{font-size:.95rem;letter-spacing:.1em;font-variant-numeric:tabular-nums;margin-bottom:12px}

/* --- 8. Abschluss ----------------------------------------------------- */
.vc .invest .section-title{font-size:clamp(1.7rem,3.2vw,2.5rem);margin-bottom:6px}

/* --- 9. Zwei Stellen, die schmal kippen ------------------------------
   a) style.css:123 setzt ab 960px 'margin-inline:auto' auf jeden .lead im
      Hero. Auf der Startseite ist das stimmig, weil .hero-grid dort
      mitzentriert (text-align:center). Der Produkt-Hero hat kein
      .hero-grid: der Text bleibt linksbuendig, der Absatz rutscht aber in
      die Mitte — gemessen 61px Versatz bei 768px. Nur fuer diese Seite
      zuruecknehmen.
   b) Unter 900px klappt .grid-2 auf eine Spalte (style.css:142); aus der
      senkrechten Trennlinie der Belegspalte wird dann eine waagerechte.   */
@media(max-width:960px){
  .hero.vc-head .lead{margin-inline:0}
}
/* c) Zwischen 961 und 1200px steht das Dreierraster der Pfeiler noch, die
      Textspalte neben dem Symbol schrumpft dort aber auf 215px (gemessen bei
      1024px) und der Absatz wird zur Schlucht. Das Symbol wandert dann ueber
      den Text und gibt die volle Spaltenbreite frei — gemessen 291px.
      Unter 961px klappt .grid-3 ohnehin auf zwei Spalten (style.css:127).   */
@media(min-width:961px) and (max-width:1200px){
  .vc-base .feat{flex-direction:column;gap:14px}
}
@media(max-width:900px){
  .vc-prod .vc-points{padding-left:0;border-left:0;padding-top:clamp(18px,2.4vw,26px);border-top:1px solid var(--line)}
  .vc-prod .vc-face>p{max-width:none}
}