/* ===========================================================
   SH_SEITEN_V1 — Gemeinsames Stylesheet der Inhaltsseiten
   (Themen-Hub + Leitfäden). Übernimmt die Design-Sprache der
   Startseite: gleiche Tokens, gleiche Nav, gleiches Reveal,
   gleicher Ambient-Layer. Ergänzt Artikel-Typografie,
   Kapitel-Rail, Lesefortschritt und Tabellen.

   Wird zusammen mit sh-premium.css geladen, ist aber bewusst
   auch allein lauffähig — falls sh-premium.css einmal fehlt,
   sieht die Seite trotzdem richtig aus.
   =========================================================== */

:root{
  --bg:#0F151A; --panel:#161E26; --panel2:#1B242D; --raised:#202A34;
  --blue:#4A6E96; --blue-t:#86A6C6; --slate:#5E82A6;
  --olive:#6E7A45; --olive-t:#A8B86A; --ion:#A9DBF5;
  --white:#FFFFFF; --text:#C9D2DA; --soft:#8B96A1;
  /* #5E6A75 der Startseite erreicht nur 3,3:1 — für Kleintext zu wenig. */
  --muted:#7E8B98;
  --line:rgba(201,210,218,.12); --line-strong:rgba(201,210,218,.2);
  --disp:"Space Grotesk",system-ui,sans-serif;
  --mono:"Space Mono",ui-monospace,monospace;
  --body:"Inter",system-ui,sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
  --nav-h:92px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:110px}
body{font-family:var(--body);background:var(--bg);color:var(--text);
  -webkit-font-smoothing:antialiased;line-height:1.7;font-size:17px;overflow-x:clip}
h1,h2,h3,h4{font-family:var(--disp);font-weight:600;letter-spacing:-.02em;line-height:1.1;color:var(--white)}
a{color:inherit;text-decoration:none}
.wrap{max-width:1160px;margin:0 auto;padding:0 28px}
.col{max-width:790px}
.sh{color:var(--ion)}
br.db{display:inline}
@media(max-width:900px){br.db{display:none}}
.skip{position:absolute;left:-9999px}
.skip:focus{left:14px;top:14px;z-index:99;background:var(--ion);color:#08202f;padding:11px 18px;border-radius:9px;font-weight:600}

/* ---------- Ambient-Layer (identisch zur Startseite) ---------- */
.orb{position:fixed;border-radius:50%;filter:blur(120px);opacity:.4;pointer-events:none;z-index:0}
.orb1{width:600px;height:600px;background:radial-gradient(closest-side,rgba(74,110,150,.4),transparent);top:-200px;right:-160px;animation:drift1 34s var(--ease) infinite alternate}
.orb2{width:480px;height:480px;background:radial-gradient(closest-side,rgba(110,122,69,.24),transparent);bottom:4%;left:-180px;animation:drift2 40s var(--ease) infinite alternate}
.orb3{width:400px;height:400px;background:radial-gradient(closest-side,rgba(169,219,245,.12),transparent);top:36%;right:-120px;animation:drift1 46s var(--ease) infinite alternate}
@keyframes drift1{to{transform:translate(-40px,60px) scale(1.1)}}
@keyframes drift2{to{transform:translate(50px,-45px) scale(1.08)}}
.beam{position:fixed;top:-14%;right:6%;width:520px;height:1000px;pointer-events:none;z-index:0;
  background:radial-gradient(52% 44% at 50% 32%,rgba(169,219,245,.11),rgba(134,166,198,.05) 45%,transparent 72%);
  filter:blur(26px);transform:rotate(9deg);animation:beampulse 10s ease-in-out infinite}
@keyframes beampulse{0%,100%{opacity:.45}50%{opacity:.8}}
@media(max-width:900px){.beam{display:none}}
.grid-bg{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(120,150,180,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(120,150,180,.04) 1px,transparent 1px);
  background-size:52px 52px;mask-image:radial-gradient(circle at 50% 20%,#000,transparent 90%)}
.noise{position:fixed;inset:0;z-index:2;pointer-events:none;opacity:.035;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
main,nav,footer,header{position:relative;z-index:1}

/* ---------- Lesefortschritt ---------- */
#sh-progress{position:fixed;top:0;left:0;height:2px;width:100%;transform:scaleX(0);transform-origin:0 50%;z-index:60;
  background:linear-gradient(90deg,var(--blue),var(--ion) 55%,var(--olive-t));
  box-shadow:0 0 12px rgba(169,219,245,.55);will-change:transform}

/* ---------- Navigation (Startseiten-Verhalten) ---------- */
nav.top{position:fixed;top:0;left:0;right:0;z-index:40;transition:background .4s var(--ease),border-color .4s,backdrop-filter .4s}
nav.top.scrolled{background:rgba(15,21,26,.82);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:16px;height:var(--nav-h);max-width:1320px}
.logo-mark{height:54px;width:auto;display:block;flex:0 0 auto}
.nav-links{display:flex;gap:18px;font-size:14px;color:var(--soft)}
.nav-links a{position:relative;transition:color .25s;white-space:nowrap}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-5px;height:1.5px;width:0;background:var(--ion);transition:width .3s var(--ease)}
.nav-links a:hover{color:var(--white)}
.nav-links a:hover::after,.nav-links a.on::after{width:100%}
.nav-links a.on{color:var(--white)}
.nav-right{display:flex;align-items:center;gap:14px;flex:0 0 auto}
.langsw{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--muted);display:inline-flex;gap:8px}
.langsw a:hover{color:var(--ion)}
.langsw a.on{color:var(--ion)}
.btn{font-family:var(--mono);font-weight:700;font-size:13px;padding:12px 20px;border-radius:10px;
  display:inline-flex;align-items:center;gap:8px;border:1px solid transparent;cursor:pointer;
  transition:transform .2s var(--ease),box-shadow .3s,background .3s,border-color .3s}
.btn:hover{transform:translateY(-2px)}
.btn .arw{transition:transform .25s var(--ease)}
.btn:hover .arw{transform:translateX(4px)}
.btn-blue{background:linear-gradient(135deg,#547aa6,#41648c);color:#F4F8FB;
  box-shadow:0 0 0 1px rgba(169,219,245,.25),0 0 22px -8px rgba(169,219,245,.5)}
.btn-blue:hover{box-shadow:0 0 0 1px rgba(169,219,245,.45),0 0 34px -8px rgba(169,219,245,.75)}
.btn-ghost{background:transparent;color:var(--ion);border-color:rgba(169,219,245,.5)}
.btn-ghost:hover{border-color:var(--ion);background:rgba(169,219,245,.07)}
.burger{display:none;width:42px;height:42px;border:1px solid var(--line-strong);border-radius:11px;background:transparent;
  cursor:pointer;position:relative;flex:0 0 auto}
.burger span{position:absolute;left:11px;right:11px;height:1.5px;background:var(--text);border-radius:2px;transition:transform .3s var(--ease),opacity .2s}
.burger span:nth-child(1){top:14px}.burger span:nth-child(2){top:20px}.burger span:nth-child(3){top:26px}
body.menu-open .burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
body.menu-open .burger span:nth-child(2){opacity:0}
body.menu-open .burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media(max-width:1000px){
  :root{--nav-h:70px}
  .nav-links{position:fixed;inset:var(--nav-h) 0 auto 0;flex-direction:column;gap:0;
    background:rgba(15,21,26,.97);backdrop-filter:blur(18px);border-bottom:1px solid var(--line);
    padding:8px 28px 20px;font-size:16px;transform:translateY(-12px);opacity:0;pointer-events:none;
    transition:opacity .28s var(--ease),transform .28s var(--ease)}
  .nav-links a{padding:14px 0;border-bottom:1px solid var(--line)}
  .nav-links a::after{display:none}
  body.menu-open .nav-links{opacity:1;transform:none;pointer-events:auto}
  .burger{display:block}
  .logo-mark{height:38px}
  .nav-right .btn{display:none}
}

/* ---------- Reveal (Startseiten-Kurve) ---------- */
.reveal{opacity:0;transform:translateY(40px) scale(.985);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.07s}.reveal.d2{transition-delay:.14s}
.reveal.d3{transition-delay:.21s}.reveal.d4{transition-delay:.28s}

/* ---------- Kopfbereich ---------- */
.crumb{padding-top:calc(var(--nav-h) + 34px);font-family:var(--mono);font-size:12px;letter-spacing:.05em;color:var(--muted)}
.crumb a{color:var(--soft);transition:color .2s}
.crumb a:hover{color:var(--ion)}
.crumb i{font-style:normal;margin:0 9px;opacity:.5}
header.hero{padding:26px 0 46px;position:relative}
.eyebrow{font-family:var(--mono);font-size:19px;line-height:1.2;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ion);display:inline-flex;align-items:center;gap:11px;margin-bottom:22px}
.eyebrow::before{content:"›";color:var(--olive-t);font-weight:700}
.eyebrow.sh-scramble::after{content:"▊";margin-left:1px;opacity:.6;color:var(--ion)}
h1{font-size:clamp(34px,5.6vw,58px);margin:0 0 24px;max-width:16em}
.lead{font-size:clamp(18px,2.1vw,21.5px);color:var(--blue-t);line-height:1.62;max-width:44em}
.meta{display:flex;flex-wrap:wrap;gap:10px 0;margin-top:30px;font-family:var(--mono);font-size:11.5px;
  letter-spacing:.07em;color:var(--muted);text-transform:uppercase}
.meta span{padding-right:18px;margin-right:18px;border-right:1px solid var(--line)}
.meta span:last-child{border-right:0;margin-right:0;padding-right:0}

/* ---------- Inhaltsverzeichnis ---------- */
.toc{position:relative;border:1px solid var(--line);border-radius:18px;overflow:hidden;
  background:linear-gradient(180deg,var(--panel),var(--panel2));padding:26px 28px;margin:0 0 60px;max-width:790px}
.toc::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(169,219,245,.6),transparent)}
.toc b{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ion);margin-bottom:16px;font-weight:400}
.toc ol{list-style:none;counter-reset:t;display:grid;gap:2px}
.toc li{counter-increment:t}
.toc a{display:flex;gap:14px;align-items:baseline;padding:7px 10px;margin-left:-10px;border-radius:9px;
  color:var(--text);font-size:16px;transition:background .22s,color .22s}
.toc a::before{content:counter(t,decimal-leading-zero);font-family:var(--mono);font-size:11.5px;color:var(--muted);flex:0 0 auto;transition:color .22s}
.toc a:hover{background:rgba(169,219,245,.06);color:var(--white)}
.toc a:hover::before{color:var(--ion)}
.toc a.on{color:var(--white);background:rgba(169,219,245,.08)}
.toc a.on::before{color:var(--ion)}

/* ---------- Artikel ---------- */
article{max-width:790px}
article section{margin:0 0 66px;scroll-margin-top:110px;position:relative}
article h2{font-size:clamp(26px,3.5vw,36px);margin:0 0 22px;padding-left:64px;position:relative}
article h2::before{content:attr(data-n);position:absolute;left:0;top:.38em;font-family:var(--mono);font-size:12px;
  letter-spacing:.1em;color:var(--ion);opacity:0;transform:translateX(-8px);transition:opacity .6s var(--ease) .15s,transform .6s var(--ease) .15s}
article h2::after{content:"";position:absolute;left:2px;top:calc(.38em + 20px);width:1px;height:0;
  background:linear-gradient(180deg,var(--ion),transparent);transition:height .8s var(--ease) .3s}
article section.in h2::before{opacity:1;transform:none}
article section.in h2::after{height:26px}
article h3{font-size:clamp(19px,2.3vw,22px);margin:36px 0 14px;color:var(--blue-t)}
article p{margin:0 0 19px}
article ul,article ol{margin:0 0 22px;padding:0;list-style:none;display:grid;gap:12px}
article ul li{position:relative;padding-left:28px}
article ul li::before{content:"◇";position:absolute;left:0;top:0;color:var(--olive-t);font-size:14px}
article ol{counter-reset:o}
article ol li{position:relative;padding-left:44px;counter-increment:o}
article ol li::before{content:counter(o,decimal-leading-zero);position:absolute;left:0;top:2px;
  font-family:var(--mono);font-size:12.5px;color:var(--ion)}
article strong{color:var(--white);font-weight:600}
article em{color:var(--blue-t);font-style:normal}
article a[href]{color:var(--ion);border-bottom:1px solid rgba(169,219,245,.3);transition:border-color .2s,color .2s}
article a[href]:hover{border-bottom-color:var(--ion)}

/* ---------- Ablaufkette ----------
   Bewusst echtes HTML und kein Bild: Text bleibt durchsuchbar, vorlesbar
   und skaliert mit der Schriftgröße. Waagerecht am Rechner, senkrecht
   auf dem Telefon — sieben Kästchen nebeneinander wären dort unlesbar. */
figure.kette{margin:0 0 34px;border:1px solid var(--line);border-radius:18px;
  background:linear-gradient(180deg,var(--panel),var(--panel2));padding:28px 26px 24px;position:relative;overflow:hidden}
figure.kette::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(169,219,245,.55),transparent)}
figure.kette > figcaption{font-family:var(--mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ion);margin-bottom:22px}
/* Wichtig: article ol/li setzt eine eigene Zählung und Einrückung. Ohne diese
   Rücknahme erscheint jede Nummer doppelt — einmal aus dem Artikel-Zähler,
   einmal aus dem Kreis der Kette. */
article figure.kette ol{counter-reset:none}
article figure.kette li{counter-increment:none;padding-left:0}
article figure.kette li::before{content:none;display:none}
figure.kette ol{list-style:none;display:grid;gap:0;margin:0;padding:0;
  grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}
figure.kette li{position:relative;padding:0 12px;text-align:center;display:flex;flex-direction:column;gap:7px;align-items:center}
figure.kette li div{display:flex;flex-direction:column;gap:5px}
figure.kette li::after{content:"";position:absolute;top:15px;right:-50%;width:100%;height:1px;
  background:linear-gradient(90deg,rgba(169,219,245,.45),rgba(169,219,245,.12));z-index:0}
figure.kette li:last-child::after{display:none}
figure.kette li b{position:relative;z-index:1;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--mono);font-size:11.5px;font-weight:400;color:var(--ion);
  background:var(--bg);border:1px solid rgba(169,219,245,.45);box-shadow:0 0 14px -4px rgba(169,219,245,.6)}
figure.kette li span{font-family:var(--disp);font-weight:600;font-size:14.5px;color:var(--white);line-height:1.3}
figure.kette li em{font-style:normal;font-size:13px;color:var(--soft);line-height:1.45}
figure.kette li:last-child b{background:linear-gradient(135deg,#547aa6,#41648c);color:#F4F8FB;border-color:rgba(169,219,245,.7)}
@media(max-width:760px){
  figure.kette ol{grid-template-columns:1fr;gap:20px}
  figure.kette li{flex-direction:row;text-align:left;align-items:flex-start;gap:14px;padding:0}
  figure.kette li b{flex:0 0 auto}
  figure.kette li > div{display:flex;flex-direction:column;gap:4px}
  figure.kette li::after{top:34px;left:15px;right:auto;width:1px;height:calc(100% + 6px);
    background:linear-gradient(180deg,rgba(169,219,245,.45),rgba(169,219,245,.12))}
}

/* ---------- Gegenüberstellung ---------- */
figure.gegen{margin:0 0 34px;display:grid;grid-template-columns:1fr 1fr;gap:14px}
figure.gegen > figcaption{grid-column:1/-1;font-family:var(--mono);font-size:11px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ion);margin-bottom:4px}
figure.gegen .sp{border:1px solid var(--line);border-radius:18px;background:var(--panel);padding:24px 24px 20px;position:relative;overflow:hidden}
figure.gegen .sp.hell{background:linear-gradient(180deg,var(--panel),var(--panel2));border-color:rgba(169,219,245,.3)}
figure.gegen .sp.hell::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(169,219,245,.6),transparent)}
figure.gegen h4{font-size:17px;color:var(--white);margin:0 0 4px}
figure.gegen .sub{font-family:var(--mono);font-size:11px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted);margin-bottom:16px}
figure.gegen ul{margin:0;padding:0;list-style:none;display:grid;gap:10px}
figure.gegen li{position:relative;padding-left:24px;font-size:14.5px;color:var(--text);line-height:1.5}
figure.gegen li::before{content:"◇";position:absolute;left:0;top:0;color:var(--muted);font-size:13px}
figure.gegen .sp.hell li::before{content:"◆";color:var(--olive-t)}
@media(max-width:700px){figure.gegen{grid-template-columns:1fr}}

/* ---------- Hinweiskasten ---------- */
.call{position:relative;border:1px solid var(--line-strong);border-left:2px solid var(--ion);
  border-radius:0 16px 16px 0;background:linear-gradient(100deg,rgba(169,219,245,.07),rgba(169,219,245,.02));
  padding:24px 28px;margin:0 0 26px;overflow:hidden}
.call::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--ion);
  box-shadow:0 0 14px rgba(169,219,245,.7)}
.call b{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ion);margin-bottom:11px;font-weight:400}
.call p:last-child{margin-bottom:0}
.call.warn{border-left-color:var(--olive-t);background:linear-gradient(100deg,rgba(168,184,106,.08),rgba(168,184,106,.02))}
.call.warn::before{background:var(--olive-t);box-shadow:0 0 14px rgba(168,184,106,.6)}
.call.warn b{color:var(--olive-t)}

/* ---------- Tabellen ---------- */
.tbl{position:relative;overflow-x:auto;margin:0 0 28px;border:1px solid var(--line);border-radius:16px;background:var(--panel)}
.tbl::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(169,219,245,.55),transparent);z-index:1}
table{width:100%;border-collapse:collapse;font-size:15.5px;min-width:540px}
th,td{padding:15px 18px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
thead th{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ion);
  font-weight:400;background:rgba(255,255,255,.02)}
tbody tr{transition:background .25s,box-shadow .25s}
tbody tr:hover{background:rgba(169,219,245,.06);box-shadow:inset 3px 0 0 var(--ion)}
tbody tr:last-child td{border-bottom:0}
td.num{font-family:var(--mono);white-space:nowrap;color:var(--white)}

/* ---------- FAQ ---------- */
.faq-list{display:grid;gap:11px}
details{border:1px solid var(--line);border-radius:14px;background:var(--panel);overflow:hidden;
  transition:border-color .3s,background .3s}
details:hover{border-color:var(--line-strong)}
details[open]{border-color:rgba(169,219,245,.34);background:var(--panel2)}
summary{cursor:pointer;padding:19px 24px;font-family:var(--disp);font-weight:600;color:var(--white);font-size:17px;
  list-style:none;display:flex;justify-content:space-between;gap:18px;align-items:flex-start}
summary::-webkit-details-marker{display:none}
summary::after{content:"";flex:0 0 auto;width:13px;height:13px;margin-top:5px;position:relative;
  background:linear-gradient(var(--ion),var(--ion)) center/13px 1.5px no-repeat,
             linear-gradient(var(--ion),var(--ion)) center/1.5px 13px no-repeat;
  transition:transform .3s var(--ease)}
details[open] summary::after{transform:rotate(135deg)}
details .faq-a{padding:0 24px 22px;color:var(--text);animation:faqin .38s var(--ease)}
@keyframes faqin{from{opacity:0;transform:translateY(-6px)}}
details .faq-a p{margin:0 0 13px}
details .faq-a p:last-child{margin:0}

/* ---------- Handlungsaufruf ---------- */
.ctaband{position:relative;border:1px solid var(--line-strong);border-radius:22px;overflow:hidden;
  background:linear-gradient(140deg,var(--panel),var(--bg) 72%);padding:46px 40px;margin:64px 0 52px;text-align:center}
.ctaband::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 90% at 50% 0%,rgba(169,219,245,.13),transparent 70%)}
.ctaband::after{content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(169,219,245,.75),transparent)}
.ctaband>*{position:relative}
.ctaband h2{font-size:clamp(24px,3.2vw,33px);margin-bottom:16px}
.ctaband p{color:var(--soft);max-width:38em;margin:0 auto 28px}
.ctarow{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ---------- Vertrauensband ---------- */
.trust{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 52px}
.trust em{font-family:var(--mono);font-style:normal;font-size:11.5px;letter-spacing:.07em;color:var(--soft);
  border:1px solid var(--line);border-radius:999px;padding:8px 15px;transition:border-color .25s,color .25s}
.trust em:hover{border-color:rgba(169,219,245,.45);color:var(--ion)}

/* ---------- Karten (verwandte Themen + Hub) ---------- */
.rel{margin:0 0 72px}
/* Bewusst > b: sonst erbt der Kartentitel .card b die Versalien und die Sperrung. */
.rel > b{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ion);margin-bottom:18px;font-weight:400}
.cardgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:15px}
.card{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:9px;
  border:1px solid var(--line);border-radius:18px;background:var(--panel);padding:24px 26px 22px;
  transition:transform .35s var(--ease),border-color .35s,box-shadow .35s}
.card:hover{transform:translateY(-5px);border-color:rgba(169,219,245,.4);box-shadow:0 24px 50px -24px rgba(0,0,0,.7)}
.card i{font-style:normal;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.card b{font-family:var(--disp);font-weight:600;font-size:18px;color:var(--white);line-height:1.3}
.card span{font-size:14.5px;color:var(--soft);line-height:1.55}
.card u{text-decoration:none;font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--ion);margin-top:4px}
.shine{position:absolute;top:0;left:-70%;width:45%;height:100%;pointer-events:none;z-index:1;
  background:linear-gradient(100deg,transparent,rgba(169,219,245,.1),transparent);transform:skewX(-18deg);
  transition:left .7s var(--ease)}
.card:hover .shine{left:130%}

/* ---------- Hub ---------- */
/* Der Hub nutzt die volle Spaltenbreite — vier Karten nebeneinander statt zwei. */
article.hub{max-width:none}
article.hub section{margin:0 0 60px}
.hubsec{margin:0 0 66px}
.hubsec h2{font-size:clamp(25px,3.3vw,34px);margin:0 0 10px}
.hubsec>p{color:var(--soft);margin:0 0 26px;max-width:52em}

/* ---------- Kapitel-Rail (falls sh-premium.css fehlt) ---------- */
#sh-rail{position:fixed;top:50%;right:22px;z-index:45;transform:translateY(-50%) translateX(16px);
  opacity:0;transition:opacity .6s var(--ease),transform .6s var(--ease);display:grid;gap:2px;padding-right:18px;pointer-events:none}
#sh-rail.in{opacity:1;transform:translateY(-50%)}
.rail-track{position:absolute;right:7px;top:11px;bottom:11px;width:1.5px;border-radius:2px;background:rgba(169,219,245,.15)}
.rail-fill{position:absolute;right:7px;top:11px;width:1.5px;border-radius:2px;height:0;
  background:linear-gradient(180deg,var(--ion),var(--olive-t));box-shadow:0 0 8px rgba(169,219,245,.5)}
.rail-item{display:grid;grid-template-columns:1fr 16px;align-items:center;gap:12px;padding:5px 0;pointer-events:none}
.rail-item .lbl{justify-self:end;font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--soft);opacity:0;transform:translateX(6px);transition:opacity .3s,transform .3s,color .3s;pointer-events:auto;
  max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rail-item .dot{width:9px;height:9px;border-radius:50%;justify-self:center;background:transparent;
  border:1.5px solid rgba(169,219,245,.4);transition:background .3s,border-color .3s,box-shadow .3s,transform .3s;pointer-events:auto}
/* Beschriftungen erscheinen NUR beim Überfahren der Leiste. Zeigt man sie
   dauerhaft für den aktiven Punkt an, ragen sie bei 1440 px in die Karten
   der Inhaltsspalte hinein. Der aktive Abschnitt ist am Punkt erkennbar. */
#sh-rail:not(:hover) .rail-item .lbl{opacity:0}
#sh-rail:hover .rail-item .lbl{opacity:.5;transform:none}
#sh-rail:hover .rail-item.active .lbl{opacity:1;color:var(--white)}
.rail-item:hover .lbl{opacity:1 !important;color:var(--white)}
.rail-item:hover .dot{border-color:var(--ion);box-shadow:0 0 10px rgba(169,219,245,.6)}
.rail-item.active .dot{background:var(--ion);border-color:var(--ion);box-shadow:0 0 14px rgba(169,219,245,.85);transform:scale(1.18)}
@media(max-width:1360px){#sh-rail .rail-item .lbl{display:none}}
@media(max-width:1200px){#sh-rail{display:none}}

/* ---------- Fußzeile (Struktur der Startseite) ---------- */
footer{border-top:1px solid var(--line);padding:44px 0;color:var(--soft);font-size:14px}
.foot-in{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:22px}
.foot-links{display:flex;gap:24px;flex-wrap:wrap;font-family:var(--mono);font-size:12.5px}
.foot-links a{transition:color .2s}
.foot-links a:hover{color:var(--ion)}
.foot-co{font-family:var(--mono);font-size:11.5px;color:var(--muted);line-height:1.7}
.foot-legal{border-top:1px solid var(--line);margin-top:30px;padding-top:22px;
  font-family:var(--body);font-size:12.5px;line-height:1.65;color:var(--muted);max-width:74em}
.foot-legal p{margin:0 0 9px}
.foot-legal p:last-child{margin:0}
.foot-nav{border-top:1px solid var(--line);margin-top:22px;padding-top:20px;display:flex;
  justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;
  font-family:var(--mono);font-size:12px;color:var(--soft)}
.foot-nav .ll{display:flex;gap:22px;flex-wrap:wrap}
.foot-nav .ll a:hover{color:var(--ion)}
.foot-nav .cc{font-family:var(--mono);font-size:11px;color:var(--muted)}

/* ---------- Rücksicht ---------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1!important;transform:none!important;transition:none!important}
  .orb,.beam{animation:none}
  #sh-progress{display:none}
  article h2::before{opacity:1;transform:none}
  article h2::after{height:26px}
  *{transition-duration:.01ms!important;animation-duration:.01ms!important}
}
@media(max-width:640px){
  body{font-size:16px}
  .wrap{padding:0 22px}
  article h2{padding-left:0}
  article h2::before{position:static;display:block;margin-bottom:8px}
  article h2::after{display:none}
  .ctaband{padding:34px 24px}
  .call{padding:20px 22px}
}