/* ─────────────────────────────────────────────────────────────
   felixrohlfing.dev — MQL4/MQL5 & Algorithmic Trading Developer
   Premium FinTech: tiefes Navy, Electric Blue, sparsames Gold.
   Keine externen Fonts (DSGVO), keine Frameworks.
   ───────────────────────────────────────────────────────────── */

:root{
  --bg:#070b14;
  --bg-2:#0a1020;
  --surface:#0e1526;
  --surface-2:#121b2f;
  --line:rgba(255,255,255,.07);
  --line-strong:rgba(255,255,255,.14);
  --tx:#e7ecf4;
  --tx-dim:#97a3b8;
  --tx-faint:#66738b;
  --acc:#3d8bff;
  --acc-2:#1f5fd8;
  --acc-glow:rgba(61,139,255,.22);
  --gold:#c9a961;
  --r:14px;
  --wrap:1180px;
  --ease:cubic-bezier(.22,.68,.32,1)}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:84px}
body{
  margin:0;background:var(--bg);color:var(--tx);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,Roboto,sans-serif;
  font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;line-height:1.14;letter-spacing:-.022em;font-weight:650}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:4px}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 26px}
.skip{min-height:44px;display:inline-flex;align-items:center;position:absolute;left:-9999px}
.skip:focus{left:16px;top:16px;z-index:300;background:var(--acc);color:#04101f;padding:10px 16px;border-radius:8px}

/* ── Buttons ───────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:13px 24px;border-radius:10px;font-size:15px;font-weight:600;letter-spacing:-.01em;
  border:1px solid transparent;cursor:pointer;white-space:nowrap;
  transition:transform .22s var(--ease),background .22s,border-color .22s,box-shadow .22s,color .22s}
.btn-primary{position:relative;overflow:hidden;color:#04101f;
  background:linear-gradient(135deg,#5c9dff,var(--acc) 44%,var(--acc-2));
  box-shadow:0 12px 30px -12px rgba(61,139,255,.6),inset 0 1px 0 rgba(255,255,255,.34)}
.btn-primary:hover{transform:translateY(-2px);
  box-shadow:0 18px 40px -12px rgba(61,139,255,.75),inset 0 1px 0 rgba(255,255,255,.4)}
.btn-pfeil{width:17px;height:17px;margin-left:8px;fill:none;stroke:currentColor;stroke-width:1.9;
           stroke-linecap:round;stroke-linejoin:round;transition:transform .22s var(--ease)}
.btn-primary:hover .btn-pfeil{transform:translateX(3px)}
/* Sekundaer: Glas, ruhiger als der Primaerknopf */
.btn-glas{color:var(--tx);border-color:var(--line-strong);
  background:linear-gradient(160deg,rgba(255,255,255,.075),rgba(255,255,255,.02));
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09)}
.btn-glas:hover{transform:translateY(-2px);border-color:rgba(61,139,255,.55);color:#cfe2ff;
  background:linear-gradient(160deg,rgba(61,139,255,.16),rgba(61,139,255,.05))}
.btn-ghost{background:transparent;border-color:var(--line-strong);color:var(--tx)}
.btn-ghost:hover{transform:translateY(-2px);border-color:var(--acc);color:var(--acc)}
.btn-sm{padding:9px 17px;font-size:14px;background:rgba(255,255,255,.06);border-color:var(--line-strong)}
.btn-sm:hover{background:var(--acc);color:#04101f;border-color:var(--acc)}

/* ── Nav ───────────────────────────────────────────────────── */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;
     transition:background .3s,border-color .3s}
.nav.stuck{backdrop-filter:blur(16px) saturate(150%);
           -webkit-backdrop-filter:blur(16px) saturate(150%);border-bottom-color:var(--line)}
.nav-in{display:flex;align-items:center;gap:20px;height:72px}
.brand{font-weight:650;letter-spacing:-.02em;font-size:16px}


.nav-links{margin-left:auto}
.nav-links a{border-radius:8px}
.nav-links a:hover{background:rgba(255,255,255,.05)}

/* Sprachumschalter */
.lang{display:flex;gap:2px;padding:3px;border-radius:9px;
      background:rgba(255,255,255,.045);border:1px solid var(--line)}
.lang button{padding:5px 11px;min-height:40px;min-width:44px;border:0;border-radius:6px;cursor:pointer;background:transparent;
             color:var(--tx-faint);font:inherit;font-size:12.5px;font-weight:600;letter-spacing:.03em;
             transition:background .2s,color .2s}
.lang button:hover{color:var(--tx)}
.lang button.aktiv{background:var(--acc);color:#04101f}
.mobile-menu .lang{margin:14px 0 4px;align-self:flex-start}

/* Antippflaeche mindestens 44x44 — padding allein reichte nicht,
   der Inhalt (zwei 2px-Striche) ist nur 10px hoch. Gemessen: 34px. */
.burger{display:none;background:none;border:0;padding:8px;cursor:pointer;
  min-width:44px;min-height:44px;align-items:center;justify-content:center;flex-direction:column}
.burger span{display:block;width:22px;height:2px;background:var(--tx);border-radius:2px;
             transition:transform .3s var(--ease)}
.burger span+span{margin-top:6px}
.burger[aria-expanded="true"] span:first-child{transform:translateY(4px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-4px) rotate(-45deg)}
.mobile-menu{display:none;flex-direction:column;padding:8px 26px 22px;gap:2px;
             background:rgba(7,11,20,.97);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.mobile-menu.open{display:flex}
.mobile-menu a{padding:13px 4px;color:var(--tx-dim);border-bottom:1px solid var(--line);font-size:16px}
.mobile-menu a:last-child{border-bottom:0;color:var(--acc);font-weight:600}

/* ── Hero ──────────────────────────────────────────────────── */
.hero{position:relative;padding:130px 0 0;overflow:hidden;isolation:isolate}
.hero-bg{position:absolute;inset:0;z-index:-1;pointer-events:none}

/* Feines Raster, zur Mitte hin ausgeblendet */
.hero-bg .hb-grid{
  position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);
  background-size:46px 46px;
  mask-image:radial-gradient(ellipse 84% 74% at 50% -4%,#000 22%,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 84% 74% at 50% -4%,#000 22%,transparent 78%)}
/* Sehr dezente Datenanmutung: waagerechte Kursebenen auf der rechten Haelfte */
.hero-bg .hb-daten{
  position:absolute;inset:0;
  background-image:repeating-linear-gradient(180deg,rgba(255,255,255,.03) 0 1px,transparent 1px 42px);
  mask-image:linear-gradient(90deg,transparent 46%,#000 74%,transparent 100%);
  -webkit-mask-image:linear-gradient(90deg,transparent 46%,#000 74%,transparent 100%)}
.hero-bg .hb-glow{position:absolute;top:-380px;left:50%;transform:translateX(-50%);
                  width:1120px;height:700px;border-radius:50%;
                  background:radial-gradient(circle,rgba(61,139,255,.16),transparent 66%);filter:blur(34px)}
.hero-bg .hb-glow2{position:absolute;top:14%;right:-6%;width:640px;height:640px;border-radius:50%;
                   background:radial-gradient(circle,rgba(61,139,255,.15),rgba(31,95,216,.05) 42%,transparent 70%);
                   filter:blur(46px)}
/* Feines Korn — nimmt dem Verlauf das Digitale */
.hero-bg .hb-korn{
  position:absolute;inset:0;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23n)'/%3E%3C/svg%3E")}
.hero-bg::after{content:"";position:absolute;left:0;right:0;bottom:0;height:220px;
                background:linear-gradient(transparent,var(--bg))}

.hero-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.86fr);
         gap:48px;align-items:center}
.hero-txt{max-width:640px}
.hero-name{font-size:12.5px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;
           color:var(--tx-faint);margin-bottom:20px;display:flex;align-items:center;gap:12px}
.hero-name::after{content:"";flex:1;height:1px;max-width:120px;
                  background:linear-gradient(90deg,var(--line-strong),transparent)}
.hero h1{font-size:clamp(2.15rem,4.6vw,3.65rem);letter-spacing:-.04em;line-height:1.08;margin-bottom:20px}
.hero h1 em{font-style:normal;color:var(--acc);
            background:linear-gradient(100deg,#5a9dff 12%,#a8ccff 52%,#3d8bff 92%);
            -webkit-background-clip:text;background-clip:text;
            -webkit-text-fill-color:transparent}
.hero-sub{font-size:clamp(.92rem,1.35vw,1.02rem);color:var(--gold);font-weight:500;
          letter-spacing:.01em;margin-bottom:24px}
.lead{font-size:clamp(1rem,1.5vw,1.12rem);color:var(--tx-dim);max-width:600px}
.lead-2{margin-top:13px;color:var(--tx-faint);font-size:clamp(.94rem,1.35vw,1.02rem)}
.cta-row{display:flex;flex-wrap:wrap;gap:13px;margin-top:32px}
.hero-stack{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.hero-stack li{font-size:11.5px;font-weight:600;letter-spacing:.1em;color:var(--tx-faint);
               font-family:'JetBrains Mono','SF Mono',Consolas,monospace;
               padding:6px 12px;border:1px solid var(--line);border-radius:7px;
               background:rgba(255,255,255,.022)}

/* ── Trust-Leiste im Hero ──────────────────────────────────── */
.hero-proof{display:grid;grid-template-columns:repeat(4,1fr);gap:0;
            margin-top:54px;border-top:1px solid var(--line)}
.hero-proof li{position:relative;padding:24px 24px 28px 0;border-right:1px solid var(--line)}
.hero-proof li:last-child{border-right:0}
.hero-proof li:not(:first-child){padding-left:24px}
.hero-proof li::before{content:"";position:absolute;top:-1px;left:0;width:26px;height:2px;
                       background:var(--acc);border-radius:2px}
.hero-proof li:not(:first-child)::before{left:24px}
.proof-key{display:block;font-size:1.06rem;font-weight:650;letter-spacing:-.02em;color:var(--tx);margin-bottom:6px}
.proof-key i{font-style:normal}
.proof-val{display:block;font-size:13.5px;color:var(--tx-faint);line-height:1.5}

/* ── 3D-Emblem ─────────────────────────────────────────────── */
.hero-visual{position:relative;width:100%;display:flex;align-items:center;justify-content:center}
.emblem{--rx:0deg;--ry:0deg;position:relative;width:100%;max-width:540px;aspect-ratio:56/50}
.em-stage{position:absolute;inset:0;transform-style:preserve-3d;
          transform:perspective(1200px) rotateX(var(--rx)) rotateY(var(--ry));
          transition:transform .55s var(--ease)}
.em-float{position:absolute;inset:0;transform-style:preserve-3d;
          animation:em-schweben 9.5s ease-in-out infinite}
.em-l{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
/* Gegen-Skalierung: haelt die Ebenen trotz Perspektive deckungsgleich */
.em-a{transform:translateZ(-70px) scale(1.0583)}
.em-b{transform:translateZ(-30px) scale(1.025)}
.em-c{transform:translateZ(0)}
.em-d{transform:translateZ(34px) scale(.9717)}
.em-defs{position:absolute;width:0;height:0;overflow:hidden}

@keyframes em-schweben{
  0%,100%{transform:translate3d(0,-11px,0) rotate(-.55deg)}
  50%    {transform:translate3d(0,13px,0)  rotate(.55deg)}
}
@keyframes em-glanz{
  0%   {transform:translateX(0);opacity:0}
  7%   {opacity:.9}
  40%  {opacity:.9}
  50%  {transform:translateX(1040px);opacity:0}
  100% {transform:translateX(1040px);opacity:0}
}
@keyframes em-impuls{
  0%   {stroke-dashoffset:480;opacity:0}
  9%   {opacity:.95}
  40%  {opacity:.95}
  50%  {stroke-dashoffset:-40;opacity:0}
  100% {stroke-dashoffset:-40;opacity:0}
}
@keyframes em-lit{0%,72%,100%{opacity:0}82%{opacity:.42}}

.em-glanz{animation:em-glanz 8.5s var(--ease) infinite}
.em-impuls{stroke-dasharray:32 480;stroke-dashoffset:480;opacity:0;
           animation:em-impuls 6.8s linear infinite}
.em-lit{opacity:0;animation:em-lit 6.4s ease-in-out infinite}
.k2 .em-lit{animation-delay:.45s}
.k3 .em-lit{animation-delay:.9s}

.em-chip{position:absolute;white-space:nowrap;
  font:600 11px/1 'JetBrains Mono','SF Mono',Consolas,monospace;letter-spacing:.09em;
  color:#cfe0f8;padding:8px 12px;border-radius:9px;
  background:linear-gradient(150deg,rgba(26,41,70,.74),rgba(11,18,35,.6));
  border:1px solid rgba(120,170,255,.2);
  box-shadow:0 12px 30px -14px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.07);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.em-chip::before{content:"";position:absolute;left:-1px;top:24%;bottom:24%;width:2px;
                 border-radius:2px;background:var(--acc)}
.c1{top:5%;left:-4%;animation:em-chip-a 11s ease-in-out infinite}
.c2{top:42%;right:-3%;animation:em-chip-b 13s ease-in-out infinite}
.c3{bottom:4%;left:1%;animation:em-chip-c 12s ease-in-out infinite}
@keyframes em-chip-a{0%,100%{transform:translate3d(0,0,96px)}50%{transform:translate3d(-6px,-13px,96px)}}
@keyframes em-chip-b{0%,100%{transform:translate3d(0,4px,122px)}50%{transform:translate3d(7px,-9px,122px)}}
@keyframes em-chip-c{0%,100%{transform:translate3d(0,-4px,78px)}50%{transform:translate3d(-5px,10px,78px)}}

/* ── Sections ──────────────────────────────────────────────── */
.sec{padding:104px 0;position:relative}
.sec-alt{background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sec-head{max-width:680px;margin-bottom:56px}
.kicker{font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
        color:var(--acc);margin-bottom:14px}
.kicker.gold{color:var(--gold)}
.sec h2{font-size:clamp(1.8rem,3.5vw,2.5rem);letter-spacing:-.03em;margin-bottom:16px}
.sec-sub{color:var(--tx-dim);font-size:16.5px}
.sec-sub+.sec-sub{margin-top:16px}

/* ── About ─────────────────────────────────────────────────── */
.about-grid{display:grid;grid-template-columns:1.35fr .75fr;gap:60px;align-items:start}
.about-list{display:flex;flex-wrap:wrap;gap:8px;align-content:flex-start;
            background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:24px}
.about-list li{font-size:13.5px;color:var(--tx-dim);padding:7px 13px;border-radius:8px;
               background:rgba(255,255,255,.04);border:1px solid var(--line)}

/* ── Service cards ─────────────────────────────────────────── */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
      padding:30px 28px;position:relative;overflow:hidden;
      transition:transform .3s var(--ease),border-color .3s,background .3s}
.card::after{content:"";position:absolute;inset:0;border-radius:var(--r);pointer-events:none;
  background:radial-gradient(520px circle at var(--mx,50%) var(--my,0%),rgba(61,139,255,.10),transparent 42%);
  opacity:0;transition:opacity .35s}
.card:hover{transform:translateY(-4px);border-color:var(--line-strong);background:var(--surface-2)}
.card:hover::after{opacity:1}
.card-ico{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;margin-bottom:19px;
          background:rgba(61,139,255,.10);border:1px solid rgba(61,139,255,.24)}
.card-ico svg{width:21px;height:21px;fill:none;stroke:var(--acc);stroke-width:1.8;
              stroke-linecap:round;stroke-linejoin:round}
.card h3{font-size:1.1rem;margin-bottom:11px}
.card p{color:var(--tx-dim);font-size:15px;line-height:1.62}

/* ── Case studies ──────────────────────────────────────────── */
.case{background:var(--surface);border:1px solid var(--line);border-radius:18px;
      padding:34px;margin-bottom:22px;transition:border-color .3s}
.case:hover{border-color:var(--line-strong)}
.case:last-child{margin-bottom:0}
.case-head{display:flex;gap:20px;align-items:flex-start;margin-bottom:26px;
           padding-bottom:24px;border-bottom:1px solid var(--line)}
.case-no{font-family:'JetBrains Mono','SF Mono',Consolas,monospace;font-size:13px;font-weight:600;
         color:var(--acc);padding:8px 12px;border:1px solid rgba(61,139,255,.28);border-radius:9px;
         background:rgba(61,139,255,.07);flex:0 0 auto;letter-spacing:.04em}
.case-tag{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
          color:var(--tx-faint);margin-bottom:9px}
.case h3{font-size:1.42rem;letter-spacing:-.025em}
.case-body{display:grid;grid-template-columns:1.15fr .85fr;gap:38px;margin-bottom:28px}
.case-col h4{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
             color:var(--acc);margin-bottom:11px}
.case-col h4:not(:first-child){margin-top:24px}
.case-col p{color:var(--tx-dim);font-size:15.2px;line-height:1.66}

/* Pipeline-Grafik */
.flow{counter-reset:f;position:relative;padding-left:4px}
.flow li{position:relative;padding:11px 0 11px 38px;font-size:14.5px;color:var(--tx-dim);
         counter-increment:f}
.flow li::before{content:counter(f);position:absolute;left:0;top:11px;width:24px;height:24px;
  border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:600;
  color:var(--acc);background:rgba(61,139,255,.10);border:1px solid rgba(61,139,255,.3)}
.flow li:not(:last-child)::after{content:"";position:absolute;left:11.5px;top:35px;bottom:-4px;
  width:1px;background:linear-gradient(var(--acc),rgba(61,139,255,.15))}

.feature-list li{position:relative;padding:9px 0 9px 24px;font-size:14.5px;color:var(--tx-dim);
                 border-bottom:1px solid var(--line)}
.feature-list li:last-child{border-bottom:0}
.feature-list li::before{content:"";position:absolute;left:2px;top:17px;width:7px;height:7px;
  border-radius:50%;background:var(--acc);opacity:.75}

.case-shot{margin:0 0 24px;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:#060a12}
.case-shot img{width:100%;cursor:zoom-in;transition:transform .5s var(--ease)}
.case-shot img:hover{transform:scale(1.015)}
.case-shot figcaption{padding:13px 18px;font-size:13px;color:var(--tx-faint);
                      border-top:1px solid var(--line);background:var(--surface-2);line-height:1.55}

/* Platzhalter fuer noch fehlende Assets */
.case-shot-missing{margin-bottom:24px;padding:30px;border:1px dashed var(--line-strong);border-radius:12px;
  background:repeating-linear-gradient(45deg,rgba(255,255,255,.016) 0 11px,transparent 11px 22px);text-align:center}
.case-shot-missing p{color:var(--tx-faint);font-size:14px;margin-bottom:6px}
.case-shot-missing strong{color:var(--gold)}
.case-shot-missing code{display:inline-block;margin-top:10px;font-size:12px;color:var(--tx-faint);
  font-family:'JetBrains Mono','SF Mono',Consolas,monospace;padding:5px 11px;border-radius:6px;
  background:rgba(255,255,255,.04);border:1px solid var(--line)}

.case-foot{display:flex;flex-direction:column;gap:15px;padding-top:22px;border-top:1px solid var(--line)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips li{font-size:12.5px;color:var(--tx-dim);padding:5px 11px;border-radius:7px;
          background:rgba(255,255,255,.045);border:1px solid var(--line)}
.case-status{font-size:14px;color:var(--tx-dim);line-height:1.6}
.case-status strong{display:block;font-size:11.5px;font-weight:600;letter-spacing:.12em;
                    text-transform:uppercase;color:var(--tx-faint);margin-bottom:5px}
.case-note{font-size:13.5px;color:var(--tx-faint);line-height:1.6;padding-left:14px;
           border-left:2px solid rgba(201,169,97,.4)}

/* ── Zertifikate ───────────────────────────────────────────── */
.certs{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px}
.cert{margin:0;background:var(--surface);border:1px solid var(--line);border-radius:14px;
      overflow:hidden;display:flex;flex-direction:column;transition:transform .3s var(--ease),border-color .3s}
.cert:hover{transform:translateY(-3px);border-color:rgba(201,169,97,.45)}
/* Einheitlicher Bildrahmen: die Zertifikate haben verschiedene Formate
   (Apex hochkant 900x1248, Instant Funding quer 900x578, drei quadratisch).
   Ohne festen Rahmen stehen die Karten unterschiedlich hoch. Das Bild wird
   EINGEPASST, nie beschnitten und nie verzerrt — Invariante 12. */
.cert-btn{display:flex;align-items:center;justify-content:center;padding:12px;border:0;
  background:#05080f;cursor:zoom-in;width:100%;aspect-ratio:4/3}
.cert-btn img{width:auto;height:auto;max-width:100%;max-height:100%;
  object-fit:contain;transition:transform .5s var(--ease)}
.cert:hover .cert-btn img{transform:scale(1.02)}
.cert figcaption{padding:18px;display:flex;flex-direction:column;gap:5px;
                 border-top:1px solid var(--line);flex:1}
.cert-firm{font-size:14.5px;font-weight:650;color:var(--tx);letter-spacing:-.01em}
.cert-what{font-size:13.5px;color:var(--tx-dim);line-height:1.5}
.cert-date{font-size:12px;color:var(--gold);font-family:'JetBrains Mono','SF Mono',Consolas,monospace;
           letter-spacing:.03em;margin-top:3px}
.cert-note{font-size:11.5px;color:var(--tx-faint);line-height:1.5;margin-top:7px;
           padding-top:9px;border-top:1px solid var(--line)}
.certs-note{margin-top:26px;font-size:13.5px;color:var(--tx-faint);line-height:1.6;
            padding-left:14px;border-left:2px solid rgba(201,169,97,.4);max-width:760px}

/* ── Why it matters ────────────────────────────────────────── */
.why-grid{display:grid;grid-template-columns:1.3fr .8fr;gap:60px;align-items:start}
.why-list{display:flex;flex-wrap:wrap;gap:8px;align-content:flex-start}
.why-list li{font-size:13.5px;color:var(--tx-dim);padding:9px 15px;border-radius:9px;
             background:var(--surface);border:1px solid var(--line);transition:border-color .25s,color .25s}
.why-list li:hover{border-color:rgba(61,139,255,.4);color:var(--tx)}



.steps li{border:1px solid var(--line);border-radius:var(--r);
          transition:border-color .3s}
.steps li:hover{border-color:var(--line-strong)}
.steps .num{display:block;font-family:'JetBrains Mono','SF Mono',Consolas,monospace;font-size:12.5px;
            color:var(--acc);letter-spacing:.1em;margin-bottom:15px}
.steps h3{font-size:1.04rem;margin-bottom:10px}


/* ── Tech stack ────────────────────────────────────────────── */
.stack-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px}
.stack-item{padding:26px 24px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
            transition:border-color .3s,transform .3s var(--ease)}
.stack-item:hover{border-color:rgba(61,139,255,.38);transform:translateY(-3px)}
.stack-lbl{display:block;font-size:11.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
           color:var(--tx-faint);margin-bottom:10px}
.stack-val{display:block;font-size:15.5px;font-weight:600;color:var(--tx);letter-spacing:-.015em;line-height:1.45}

/* ── Quality principles ────────────────────────────────────── */
.quality{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:12px}
.quality li{position:relative;padding:17px 20px 17px 46px;font-size:15px;color:var(--tx-dim);
            background:var(--surface);border:1px solid var(--line);border-radius:11px}
.quality li::before{content:"";position:absolute;left:20px;top:50%;transform:translateY(-50%);
  width:14px;height:14px;border-radius:50%;border:1.5px solid var(--acc);
  background:radial-gradient(circle,var(--acc) 0 3px,transparent 3px)}

/* ── Contact ───────────────────────────────────────────────── */
.contact{padding-bottom:120px}
.contact-box{text-align:center;max-width:720px;margin:0 auto;padding:66px 40px;
  border:1px solid var(--line-strong);border-radius:20px;position:relative;overflow:hidden;
  background:radial-gradient(760px circle at 50% -30%,rgba(61,139,255,.13),transparent 62%),
             linear-gradient(180deg,var(--surface),var(--bg-2))}
.contact-box h2{font-size:clamp(1.65rem,3.2vw,2.3rem);margin-bottom:16px}
.contact-box>p{color:var(--tx-dim);margin-bottom:32px;font-size:16.5px}
.contact-box .cta-row{justify-content:center;margin-top:0}
.micro{margin-top:22px;font-size:13.5px;color:var(--tx-faint)}
.upwork-badge{display:inline-flex;align-items:center;gap:9px;padding:9px 17px;border-radius:100px;
  background:rgba(61,139,255,.09);border:1px solid rgba(61,139,255,.3);
  font-size:13.5px;font-weight:600;color:var(--acc);margin-bottom:24px}
.upwork-badge::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--acc);
  box-shadow:0 0 0 0 var(--acc-glow);animation:puls 2.4s infinite}
@keyframes puls{0%{box-shadow:0 0 0 0 rgba(61,139,255,.5)}70%{box-shadow:0 0 0 9px rgba(61,139,255,0)}
                100%{box-shadow:0 0 0 0 rgba(61,139,255,0)}}

/* Upwork-Fassung: Hinweis statt Kontaktknopf */
.upwork-cta{
  display:inline-block;margin-top:6px;padding:15px 26px;border-radius:12px;
  font-size:16px;font-weight:600;color:var(--tx);
  background:rgba(61,139,255,.08);border:1px solid rgba(61,139,255,.28)}

/* ── Footer ────────────────────────────────────────────────── */
.foot{border-top:1px solid var(--line);padding:34px 0;background:var(--bg-2)}
.foot-in{display:flex;justify-content:space-between;align-items:center;gap:22px;flex-wrap:wrap}
.foot-brand{display:flex;align-items:center;gap:13px}
.foot-brand img{width:34px;height:34px;border-radius:50%}
.foot-name{display:block;font-size:15px;font-weight:650;letter-spacing:-.015em}
.foot-role{display:block;font-size:13px;color:var(--tx-faint);margin-top:2px}
.foot-meta{display:flex;gap:20px;align-items:center;flex-wrap:wrap;font-size:13.5px;color:var(--tx-faint)}
.foot-meta a{display:inline-flex;align-items:center;min-height:40px}
.foot-meta a:hover{color:var(--acc)}

/* ── Lightbox ──────────────────────────────────────────────── */
/* WICHTIG: display:none ist der Grundzustand. Frueher stand hier display:grid,
   das schlug das hidden-Attribut und legte einen dauerhaften Schleier ueber die
   ganze Seite. Nie wieder auf display:grid im Grundzustand aendern. */
.lightbox{position:fixed;inset:0;z-index:200;display:none;place-items:center;padding:40px;
          background:rgba(4,6,11,.94);backdrop-filter:blur(8px)}
.lightbox.offen{display:grid}
.lightbox[hidden]{display:none}
.lightbox img{max-width:100%;max-height:88vh;border-radius:11px;border:1px solid var(--line-strong)}
.lb-close{position:absolute;top:22px;right:26px;width:44px;height:44px;border-radius:50%;
  background:rgba(255,255,255,.08);border:1px solid var(--line-strong);color:var(--tx);
  font-size:26px;line-height:1;cursor:pointer;transition:background .2s}
.lb-close:hover{background:rgba(255,255,255,.16)}

/* ── Reveal ────────────────────────────────────────────────── */
/* Ausblenden NUR wenn JS laeuft - sonst bliebe die Seite bei JS-Fehler leer. */
html.js .reveal{opacity:0;transform:translateY(12px);
                transition:opacity .45s var(--ease),transform .45s var(--ease)}
html.js .reveal.in{opacity:1;transform:none}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width:1100px){
  .hero-in{gap:32px}
  .em-chip{font-size:10px;padding:7px 10px}
  .c1{left:-3%}
}
@media (max-width:1000px){
  .hero-proof{grid-template-columns:repeat(2,1fr)}
  .hero-proof li{border-bottom:1px solid var(--line)}
  .hero-proof li:nth-child(2n){border-right:0}
  .hero-proof li:nth-child(n+3){border-bottom:0}
  .hero-proof li:nth-child(3)::before,.hero-proof li:nth-child(4)::before{display:none}
  .case-body{grid-template-columns:1fr;gap:26px}
}
@media (max-width:900px){
  .nav-links,.nav-in .btn-sm{display:none}
  
  .nav-in .lang{margin-left:auto}
  .hero{padding:118px 0 0}
  /* Emblem wandert unter den Text und wird ruhiger */
  .hero-in{grid-template-columns:1fr;gap:12px}
  .hero-txt{max-width:none}
  /* Kein "margin:auto" hier: automatische Seitenraender heben das Strecken
     des Grid-Elements auf, die Box faellt auf Inhaltsbreite 0 zusammen
     (alle Emblem-Ebenen sind absolut positioniert) — das Emblem verschwand. */
  .hero-visual{width:100%;margin:6px 0 0}
  .emblem{max-width:400px}
  .em-stage{transform:none!important;transition:none}
  .about-grid,.why-grid{grid-template-columns:1fr;gap:34px}
  .sec{padding:76px 0}
  .case{padding:26px}
  .case-head{gap:15px}
  .contact-box{padding:48px 26px}
  .hero-proof{margin-top:44px}
}
@media (max-width:560px){
  body{font-size:16px}
  .wrap{padding:0 20px}
  .cta-row .btn{width:100%}
  .hero-proof{grid-template-columns:1fr}
  .hero-proof li{border-right:0;padding:22px 0 22px 0!important;border-bottom:1px solid var(--line)}
  
  .hero-proof li::before{display:none}
  .hero-proof li:nth-child(n+3){border-bottom:1px solid var(--line)}
  .hero-proof li:last-child{border-bottom:0}
  .emblem{max-width:320px}
  /* Auf schmalen Geraeten nur ein Chip — sonst wird es eng */
  .c1,.c2{display:none}
  .c3{bottom:6%;left:0}
  .em-glanz,.em-lit{animation:none}
  .certs{grid-template-columns:1fr}
  .foot-in{flex-direction:column;align-items:flex-start;text-align:left}
  .case-head{flex-direction:column}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01ms!important}
  html.js .reveal{opacity:1;transform:none}
  html{scroll-behavior:auto}
  .em-impuls{opacity:.9;stroke-dashoffset:0;stroke-dasharray:none;stroke-width:0}
  .em-stage{transform:none!important}
}
/* Ohne aspect-ratio (aeltere Browser) faellt das Emblem sonst auf 0 Hoehe */
@supports not (aspect-ratio:1/1){
  .emblem{height:0;padding-bottom:89.3%}
}

/* ═══════════════════════════════════════════════════════════════
   MEHRSEITIGKEIT — Bausteine der Unterseiten
   Das Designsystem wird wiederverwendet, die Seitenkompositionen
   NICHT: jede Route hat eigenen Hero, eigenes Visual, eigenen Aufbau.
   ═══════════════════════════════════════════════════════════════ */

/* ── Aktiver Menuepunkt ─────────────────────────────────────── */
.nav-links a.ist-hier{background:rgba(61,139,255,.12)}
.nav-links a.ist-hier::after{content:"";display:block;height:2px;margin:5px 2px -6px;
  border-radius:2px;background:var(--acc)}

/* ── Kleiner Hero fuer Unterseiten ──────────────────────────── */
.hero-klein{padding:132px 0 56px}
.hero-klein-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.52fr);
  gap:44px;align-items:center}
.hero-klein h1{font-size:clamp(1.95rem,3.6vw,2.9rem);letter-spacing:-.035em;margin-bottom:18px}
.hero-ruhig{padding:130px 0 44px}
.hero-ruhig h1{font-size:clamp(2rem,3.8vw,3.05rem)}
.hero-fall{padding:120px 0 46px}
.hero-fall h1{font-size:clamp(1.85rem,3.4vw,2.7rem);max-width:20ch;margin-bottom:18px}
.hero-kontakt{padding-bottom:60px}
.lead-breit{max-width:62ch}

/* Seiteneigene Visuals — bewusst klein und ruhig.
   Der grosse 3D-Hero gehoert allein auf die Startseite. */
.schichten,.fluss-vis,.risiko-vis{width:100%;max-width:330px;height:auto;justify-self:end;
  filter:drop-shadow(0 24px 50px rgba(0,0,0,.55))}
.sl{animation:sl-heb 7s ease-in-out infinite}
.sl-b{animation-delay:.5s}
.sl-c{animation-delay:1s}
@keyframes sl-heb{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}

/* ── Brotkrumen ─────────────────────────────────────────────── */
.brotkrumen{display:flex;gap:10px;align-items:center;font-size:13.5px;
  color:var(--tx-faint);margin-bottom:22px}
.brotkrumen a{color:var(--acc)}
.brotkrumen a:hover{text-decoration:underline}

/* ── Abschnittskopf mit Knopf rechts ────────────────────────── */
.sec-kopf{display:flex;align-items:flex-end;justify-content:space-between;
  gap:24px;flex-wrap:wrap;margin-bottom:34px}
.sec-sub-wide{max-width:70ch;margin-bottom:26px}

/* ── Startseite: Teaser-Raster ──────────────────────────────── */
.teaser-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:52px;align-items:start}
.teaser-grid .btn{margin-top:24px}
.teaser-list{display:flex;flex-wrap:wrap;gap:9px;align-content:flex-start}
.teaser-list li{font-size:14px;color:var(--tx-dim);padding:9px 15px;border-radius:9px;
  border:1px solid var(--line);background:rgba(255,255,255,.025)}

/* ── Kompakte Karten (Leistungen, Projektarten) ─────────────── */
/* 300px erzwingt drei Spalten: 5 Karten brechen 3+2 statt 4+1,
   6 Karten (Kontaktseite) 3+3. 4+1 sieht nach Versehen aus. */
.mini-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
.mini-card{padding:24px;border:1px solid var(--line);border-radius:var(--r);
  background:linear-gradient(165deg,var(--surface),var(--bg-2));
  transition:border-color .25s,transform .25s var(--ease)}
.mini-card:hover{border-color:rgba(61,139,255,.35);transform:translateY(-3px)}
.mini-card h3{font-size:1.02rem;margin-bottom:9px}
.mini-card p{font-size:14px;color:var(--tx-faint);line-height:1.6}

/* ── Startseite: Projektkarten ──────────────────────────────── */
.proj-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}
.proj-card{display:block;padding:30px 28px 26px;border:1px solid var(--line);border-radius:var(--r);
  background:linear-gradient(165deg,var(--surface),var(--bg-2));position:relative;
  transition:border-color .25s,transform .25s var(--ease)}
.proj-card:hover{border-color:rgba(61,139,255,.4);transform:translateY(-4px)}
.proj-no{display:block;font:600 12px/1 'JetBrains Mono','SF Mono',Consolas,monospace;
  letter-spacing:.12em;color:var(--acc);margin-bottom:14px}
.proj-card h3{font-size:1.12rem;margin-bottom:11px}
.proj-card p{font-size:14.5px;color:var(--tx-faint);line-height:1.62;margin-bottom:18px}
.proj-mehr{font-size:13.5px;font-weight:600;color:var(--acc)}
.proj-mehr::after{content:" →";transition:opacity .2s}
.proj-card:hover .proj-mehr::after{opacity:.6}

/* ── Startseite: Anbieter-Zeile ─────────────────────────────── */
.firm-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:0;
  border-top:1px solid var(--line)}
.firm-row li{padding:22px 20px 22px 0;border-right:1px solid var(--line)}
.firm-row li:last-child{border-right:0}
.firm-row li:not(:first-child){padding-left:20px}
.firm-name{display:block;font-weight:650;font-size:1rem;margin-bottom:5px}
.firm-what{display:block;font-size:13px;color:var(--tx-faint);line-height:1.5}

/* ── Leistungsseite ─────────────────────────────────────────── */
.dienst{padding:36px 0;border-top:1px solid var(--line)}
.dienst:first-child{border-top:0;padding-top:8px}
.dienst-kopf{display:flex;align-items:baseline;gap:16px;margin-bottom:14px}
.dienst-no{font:600 13px/1 'JetBrains Mono','SF Mono',Consolas,monospace;
  letter-spacing:.1em;color:var(--acc);flex:0 0 auto}
.dienst h2{font-size:clamp(1.25rem,2.1vw,1.6rem)}
.dienst .sec-sub{max-width:72ch;margin-bottom:20px}
.dienst-liste{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:9px 22px}
.dienst-liste li{position:relative;padding-left:20px;font-size:14.5px;color:var(--tx-dim)}
.dienst-liste li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;
  border-radius:2px;background:var(--acc);opacity:.8}
.dienst-betont{border-left:2px solid var(--acc);padding-left:26px;
  background:linear-gradient(90deg,rgba(61,139,255,.05),transparent 45%)}
.dienst-kommend{opacity:.9}
.dienst-liste-blass li{color:var(--tx-faint)}
.dienst-liste-blass li::before{background:var(--tx-faint);opacity:.55}

/* Einschraenkender Hinweis — gehoert zu Risiko, Backtest, Prop-Firm.
   Invariante: nie streichen. */
.hinweis{margin-top:18px;padding:13px 16px;border-left:2px solid var(--gold);
  background:rgba(201,169,97,.06);font-size:13.5px;color:var(--tx-dim);line-height:1.62;
  border-radius:0 8px 8px 0}

/* ── Projektseite: grosse Projektblöcke ─────────────────────── */
.projekt-liste{display:flex;flex-direction:column;gap:60px}
.projekt{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:center}
.projekt-gedreht .projekt-bild{order:2}
.projekt-ohne-bild{grid-template-columns:minmax(0,1fr);max-width:74ch}
.projekt-bild img{width:100%;height:auto;border-radius:var(--r);
  border:1px solid var(--line-strong);box-shadow:0 26px 60px -26px rgba(0,0,0,.85)}
.projekt-no{display:block;font:600 12px/1 'JetBrains Mono','SF Mono',Consolas,monospace;
  letter-spacing:.12em;color:var(--acc);margin-bottom:13px}
.projekt-text h2,.projekt-text h3{font-size:clamp(1.2rem,2.1vw,1.55rem);margin-bottom:13px}
.projekt-text>p{color:var(--tx-dim);font-size:15px;line-height:1.68;margin-bottom:18px}
.projekt-text .chips{margin-bottom:20px}
.projekt-text .flow,.projekt-text .feature-list{margin-bottom:18px}

/* ── Fallbeispiel-Seiten ────────────────────────────────────── */
.fall-wrap{max-width:var(--wrap)}
.fall-wrap>*{max-width:820px}
.fall-block{margin-bottom:44px}
.fall-block h2{font-size:clamp(1.18rem,2vw,1.45rem);margin-bottom:14px}
.fall-block p{color:var(--tx-dim);font-size:15.5px;line-height:1.72;margin-bottom:14px}
.fall-block .flow,.fall-block .feature-list{margin-top:18px}
.fall-klarstellung{padding:26px 28px;border:1px solid rgba(61,139,255,.24);border-radius:var(--r);
  background:linear-gradient(165deg,rgba(61,139,255,.07),rgba(61,139,255,.02))}
.fall-klarstellung h2{color:var(--acc)}
.fall-klarstellung p{margin-bottom:0}
.fall-bild{margin:0 0 44px}
.fall-bild img{width:100%;height:auto;border-radius:var(--r);
  border:1px solid var(--line-strong);box-shadow:0 26px 60px -26px rgba(0,0,0,.85)}
.fall-bild figcaption{margin-top:12px;font-size:13px;color:var(--tx-faint)}
.fall-weiter{display:flex;flex-wrap:wrap;gap:13px;padding-top:12px;border-top:1px solid var(--line)}
.chips-gross li{font-size:13px;padding:8px 14px}

/* ── Über-mich-Seite ────────────────────────────────────────── */
.ab-wrap{max-width:var(--wrap)}
.ab-wrap>*{max-width:820px}
.ab-text{color:var(--tx-dim);font-size:16px;line-height:1.76;margin-bottom:18px}
.zwei-spalten{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:40px;
  margin-bottom:44px}
.spalte h2{font-size:1.1rem;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.ab-liste li{position:relative;padding-left:20px;font-size:14.5px;color:var(--tx-dim);margin-bottom:9px}
.ab-liste li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;
  border-radius:2px;background:var(--acc);opacity:.75}

/* ── Ablauf-Seite ───────────────────────────────────────────── */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:2px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.steps li{padding:28px 26px;background:var(--bg)}
.step-no{display:block;font:600 12px/1 'JetBrains Mono','SF Mono',Consolas,monospace;
  letter-spacing:.14em;color:var(--acc);margin-bottom:13px}
.steps h2{font-size:1.05rem;margin-bottom:9px}
.steps p{font-size:14px;color:var(--tx-faint);line-height:1.62}

/* FAQ — <details> funktioniert ohne JavaScript. */
.faq{border-top:1px solid var(--line);margin-top:26px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{padding:19px 40px 19px 0;cursor:pointer;font-weight:600;font-size:15.5px;
  position:relative;list-style:none;min-height:44px;display:flex;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);
  font-size:20px;font-weight:400;color:var(--acc);transition:transform .25s var(--ease)}
.faq details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq summary:hover{color:var(--acc)}
.faq p{padding:0 0 20px;font-size:14.5px;color:var(--tx-dim);line-height:1.7;max-width:72ch}

/* ── Kontaktseite ───────────────────────────────────────────── */
.btn-mail{font-family:'JetBrains Mono','SF Mono',Consolas,monospace;font-size:14.5px;
  letter-spacing:-.01em}

/* ── Fuss ───────────────────────────────────────────────────── */
.foot-nav{display:flex;flex-wrap:wrap;gap:6px 20px}
.foot-nav a{font-size:14px;color:var(--tx-faint);padding:4px 0;transition:color .2s;
  display:inline-flex;align-items:center;min-height:44px}
.foot-nav a:hover{color:var(--acc)}
.foot-upwork{font-size:14px;color:var(--acc);font-weight:600}
.nav-upwork{border-radius:8px;border:1px solid rgba(61,139,255,.3);
  background:rgba(61,139,255,.09)}
.mm-upwork{display:block;padding:14px 4px;color:var(--acc);font-weight:600;font-size:16px}

/* ═══════════════════════════════════════════════════════════════
   GERAETE
   Bruchstellen kommen aus dem Layout, nicht aus Vorgabewerten:
   1240 Luft raus · 1080 Seitenvisual kleiner · 1000 zweispaltig
   zu eng · 900 Hero stapelt · 760 Karten einspaltig · 560 Telefon
   · 380 kleines Telefon · Querformat mit wenig Hoehe eigens.
   ═══════════════════════════════════════════════════════════════ */

@media (max-width:1240px){
  .teaser-grid{gap:40px}
  .projekt{gap:32px}
}

@media (max-width:1080px){
  .schichten,.fluss-vis,.risiko-vis{max-width:270px}
  .hero-klein-in{gap:32px}
}

@media (max-width:1000px){
  /* Tablet quer: Seitenvisual unter den Text statt daneben quetschen */
  .hero-klein-in{grid-template-columns:1fr;gap:26px}
  .schichten,.fluss-vis,.risiko-vis{justify-self:start;max-width:240px}
  .teaser-grid{grid-template-columns:1fr;gap:30px}
  .projekt{grid-template-columns:1fr;gap:24px}
  .projekt-gedreht .projekt-bild{order:0}
}

@media (max-width:760px){
  .mini-cards{grid-template-columns:1fr}
  .proj-grid{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .firm-row{grid-template-columns:1fr}
  .firm-row li{border-right:0;border-bottom:1px solid var(--line);padding:18px 0!important}
  .firm-row li:last-child{border-bottom:0}
  .dienst-liste{grid-template-columns:1fr}
  .sec-kopf{flex-direction:column;align-items:flex-start;gap:16px}
  .dienst-betont{padding-left:18px}
  .fall-weiter .btn,.sec-kopf .btn{width:100%}
}

@media (max-width:560px){
  .hero-klein,.hero-ruhig,.hero-fall{padding-top:112px}
  .hero-klein{padding-bottom:40px}
  .zwei-spalten{gap:28px}
  .fall-klarstellung{padding:20px}
  .foot-nav{gap:4px 16px}
}

/* Kleine Telefone (320–380): Typografie und Abstaende eigens. */
@media (max-width:380px){
  .wrap{padding:0 16px}
  .hero h1{font-size:1.85rem;letter-spacing:-.03em}
  .hero-klein h1,.hero-ruhig h1,.hero-fall h1{font-size:1.65rem}
  .hero-name{letter-spacing:.18em;font-size:11.5px}
  .hero-stack li{font-size:10.5px;padding:5px 9px}
  .emblem{max-width:270px}
  .mini-card,.proj-card{padding:20px}
  .dienst{padding:28px 0}
  .brotkrumen{font-size:12.5px}
}

/* Telefon/Tablet im Querformat: wenig Hoehe, viel Breite.
   Ohne diese Regel schiebt der hohe Hero den Inhalt aus dem Bild. */
/* Telefon/Tablet quer: wenig Hoehe, viel Breite. Typografie und Abstaende
   werden hier eigens gestaffelt, damit die Knoepfe ueber der Falz bleiben.
   Gemessen bei 900x420: ohne diese Regel lag die Handlungsaufforderung unten raus.
   Kein Inhalt wird versteckt — nur enger gesetzt. */
@media (max-height:560px) and (orientation:landscape){
  .hero{padding:84px 0 0}
  .hero-klein,.hero-ruhig,.hero-fall{padding:84px 0 28px}
  .hero-name{margin-bottom:12px}
  .hero h1{font-size:clamp(1.5rem,3.2vw,2.05rem);margin-bottom:12px}
  .hero-klein h1,.hero-ruhig h1,.hero-fall h1{font-size:clamp(1.4rem,2.8vw,1.85rem)}
  .hero-sub{margin-bottom:14px;font-size:.9rem}
  .lead{font-size:.95rem}
  .lead-2{margin-top:8px;font-size:.9rem}
  .cta-row{margin-top:20px}
  .hero-stack{margin-top:20px}
  .hero-proof{margin-top:30px}
  .hero-proof li{padding-top:16px;padding-bottom:18px}
  .emblem{max-width:280px}
  .sec{padding:52px 0}
}

/* ── Touch: nichts darf Hover voraussetzen, Ziele mindestens 44 px ── */
@media (hover:none){
  .nav-links a{min-height:44px;display:flex;align-items:center}
  .lang button{padding:11px 15px}
  .mobile-menu a{min-height:48px;display:flex;align-items:center}
  .burger{padding:12px}
  .foot-nav a{min-height:40px;display:flex;align-items:center}
  .cert-btn{min-height:44px}
  /* Hover-Effekte, die auf Touch haengen bleiben wuerden, abschalten */
  .mini-card:hover,.proj-card:hover,.btn:hover,.cert-btn:hover{transform:none}
  .card::before{opacity:0!important}
}

/* Schema des Testverfahrens — steht anstelle eines Screenshots.
   Bewusst ein Diagramm: ein Bild mit Zahlen waere erfunden. */
.oos-vis{width:100%;height:auto;border:1px solid var(--line);border-radius:var(--r);
  background:linear-gradient(165deg,var(--surface),var(--bg-2));padding:8px}
.fall-schema .oos-vis{max-width:560px}
.fall-schema figcaption{color:var(--tx-faint)}

/* ══════════════════════════════════════════════════════════════
   DASHBOARD — EA-CORE (Referenzbilder 1 + 2)
   Alles ab hier ist neu. Die alten .hero-/.em-*-Regeln daruber
   bleiben stehen: /upwork benutzt sie weiter.
   ══════════════════════════════════════════════════════════════ */

:root{
  --wrap-weit:1400px;
  --chrom-hell:#e8eef8;
  --chrom:#aebbd0;
  --chrom-dunkel:#5d6b83;
  --glas:rgba(14,22,40,.72);
  --kante:rgba(150,180,225,.30)}

/* ── Navigation: EINE Kapsel, ueberall gleiche Geometrie ───────
   Beim Scrollen kommt NUR Glas/Blur dazu. Hoehe, Abstaende, Logo
   und CTA bleiben unveraendert - sonst springt die Seite. */
.nav{padding:14px 0 0;background:none;border-bottom:0}
.nav .wrap{max-width:var(--wrap-weit)}
.nav-kapsel{
  display:flex;align-items:center;gap:18px;height:64px;padding:0 10px 0 14px;
  border-radius:16px;border:1px solid rgba(150,180,225,.16);
  background:linear-gradient(180deg,rgba(20,31,54,.62),rgba(9,14,26,.72));
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 18px 44px -26px rgba(0,0,0,.9);
  transition:border-color .35s var(--ease),box-shadow .35s var(--ease),background .35s var(--ease)}
.nav.stuck{background:none;border-bottom:0}
.nav.stuck .nav-kapsel{
  background:linear-gradient(180deg,rgba(16,26,46,.88),rgba(7,11,20,.92));
  backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);
  border-color:rgba(150,180,225,.26);
  box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 20px 50px -24px rgba(0,0,0,.95)}

.brand{display:flex;align-items:center;gap:11px;min-height:44px;flex:0 0 auto}
.brand-mark{display:grid;place-items:center;width:42px;height:42px;border-radius:11px;
  background:linear-gradient(160deg,rgba(61,139,255,.20),rgba(255,255,255,.03));
  border:1px solid rgba(150,180,225,.22);flex:0 0 42px}
.brand-logo{width:30px;height:30px;flex:0 0 30px;border-radius:0;
  transition:transform .3s var(--ease),filter .3s}
.brand:hover .brand-logo{transform:scale(1.07);filter:drop-shadow(0 0 10px var(--acc-glow))}
.brand-txt{display:flex;flex-direction:column;line-height:1.12}
.brand-txt b{font-size:15.5px;font-weight:650;letter-spacing:-.015em;color:var(--tx)}
/* margin-top: die Unterlaenge des g in "Rohlfing" reichte bei
   line-height 1.12 bis in das R von "EA DEVELOPER" (Felix,
   30.08.2026). Nicht die Zeilenhoehe erhoehen - die gilt fuer beide
   Zeilen und wuerde den Namen mitverschieben. */
.brand-txt i{font-style:normal;font-size:9.5px;font-weight:600;letter-spacing:.26em;
  margin-top:3px;text-transform:uppercase;color:var(--acc)}

.nav-links{display:flex;align-items:center;gap:0;margin:0 auto}
.nav-links a{position:relative;display:flex;align-items:center;min-height:44px;
  padding:0 20px;font-size:12.5px;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--tx-dim);white-space:nowrap;
  transition:color .22s}
.nav-links a+a::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:1px;height:16px;background:rgba(150,180,225,.20)}
.nav-links a::after{content:"";position:absolute;left:50%;bottom:2px;transform:translateX(-50%);
  width:0;height:2px;border-radius:2px;background:var(--acc);
  box-shadow:0 0 12px 2px var(--acc-glow);transition:width .3s var(--ease)}
.nav-links a:hover{color:var(--tx)}
.nav-links a:hover::after{width:26px}
.nav-links a.ist-hier{color:#fff}
.nav-links a.ist-hier::after{width:34px}

.nav-rechts{display:flex;align-items:center;gap:12px;flex:0 0 auto}
.nav-cta{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0 20px;
  border-radius:12px;border:1px solid rgba(61,139,255,.55);color:#dce9ff;
  font-size:12.5px;font-weight:650;letter-spacing:.13em;text-transform:uppercase;white-space:nowrap;
  background:linear-gradient(180deg,rgba(61,139,255,.16),rgba(61,139,255,.05));
  box-shadow:0 0 0 rgba(61,139,255,0);transition:box-shadow .3s,border-color .3s,color .3s}
.nav-cta:hover{color:#fff;border-color:var(--acc);box-shadow:0 0 22px -4px var(--acc-glow)}
.cta-ikon{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;flex:0 0 17px}
.nav-upwork{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gold);white-space:nowrap;padding:0 6px}

/* ── Feste Hintergrundwelt der Dashboard-Seite ─────────────────
   position:fixed - damit endet sie NICHT am Hero-Rand, sondern
   traegt die ganze Seite. Beim Scrollen wird sie nur schwaecher
   (.tief), nie abgeschnitten. Kein Element hier ist klickbar. */
.dash-welt{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:clip}
.dash-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.dash-glow{position:absolute;top:-30vh;left:50%;
  width:150vw;max-width:1800px;height:120vh;border-radius:50%;
  background:radial-gradient(closest-side,rgba(61,139,255,.15),rgba(61,139,255,.045) 55%,transparent 78%)}
.dash-korn{position:absolute;inset:0;opacity:.32}
.dash-welt::after{content:"";position:absolute;left:0;right:0;bottom:0}


/* Alles Sichtbare der Seite liegt UEBER der Welt. */
body:has(.dash-welt) main,body:has(.dash-welt) .foot{position:relative;z-index:1}

/* ══ HERO ═════════════════════════════════════════════════════ */
.ea-hero{position:relative;z-index:1;padding:118px 0 8px;isolation:isolate;
  overflow-x:clip}
.ea-hero .wrap{max-width:var(--wrap-weit)}

/* Weicher Schleier hinter der Ueberschrift: der Chart laeuft jetzt
   auch durch diesen Bereich, der Text muss trotzdem klar lesbar
   bleiben. Kein Kasten - eine unsichtbare Ellipse. */
.ea-kopf{position:relative;text-align:center}
.ea-kopf::before{content:"";position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);width:140%;height:230%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(7,11,20,.88),rgba(7,11,20,.55) 58%,transparent 82%)}
.ea-kopf>*{position:relative}
.ea-eyebrow{font-size:10.5px;font-weight:700;letter-spacing:.34em;text-transform:uppercase;
  color:var(--acc);margin-bottom:10px}
.ea-h1{font-size:clamp(1.4rem,2.7vw,2.15rem);letter-spacing:-.025em;line-height:1.15;
  font-weight:600;color:var(--chrom-hell)}
.ea-h1 em{font-style:normal;
  background:linear-gradient(180deg,#fff,var(--chrom) 62%,var(--chrom-dunkel));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.ea-sub{margin-top:9px;font-size:14.5px;color:var(--tx-dim)}

/* ── Der Bogen ────────────────────────────────────────────────
   perspective steht am ELTERN-Element, die Karten drehen sich
   einzeln. Bewusst KEIN preserve-3d hier: sobald eine Ebene
   opacity/filter/overflow:hidden bekaeme, faellt sonst der ganze
   Stapel flach. Die Luecken zwischen den Karten sind echt - der
   Chart dahinter laeuft dort sichtbar vorbei. */
.ea-buehne{position:relative}
.ea-bogen{display:grid;grid-template-columns:repeat(6,minmax(0,1fr))}
/* Die Bogenlage steht in --tf, NICHT direkt in transform. Sonst
   wuerde die spaetere :hover-Regel (gleiche Spezifitaet) den ganzen
   Bogen ueberschreiben und die Karten faelen flach nebeneinander. */
.ea-mod{position:relative;transform-origin:50% 100%;
  transform:var(--tf);transition:transform .5s var(--ease)}








/* Karte: aussen Chromrahmen, innen dunkles Glas. Die Fase ist
   links/rechts spiegelgleich definiert - sonst kippt der Bogen
   optisch zur Seite. */
.ea-mod-in{
  position:relative;display:flex;flex-direction:column;padding:0}

.ea-mod-in>*{position:relative;z-index:1}


.ea-num{display:grid;place-items:center;
  border-radius:50%;flex:0 0 auto}
.ea-mod-t{margin:11px 10px 0;text-align:center;font-size:clamp(11px,.86vw,13px);
  min-height:2.5em;display:grid;place-items:center;
  font-weight:700;letter-spacing:.11em;text-transform:uppercase;line-height:1.25}
.ea-ikon{display:block;fill:none;
  stroke-linecap:round;stroke-linejoin:round}
.ea-mod-l{margin:auto 0 0;padding:12px clamp(8px,.9vw,15px) 16px;display:grid;gap:5px}
.ea-mod-l li{position:relative;padding-left:12px;font-size:clamp(10px,.78vw,12px);
  line-height:1.35;letter-spacing:.005em}
.ea-mod-l li::before{content:"";position:absolute;left:2px;top:.48em;width:4px;height:4px;
  border-radius:50%;background:var(--acc)}

/* Zeigefinger/Maus: Karte tritt vor, Nachbarn bleiben stehen. */
@media (hover:hover){
  .ea-mod:hover{transform:var(--tf) translateY(-9px) scale(1.035);z-index:3}
  .ea-mod:hover .ea-mod-in{box-shadow:0 34px 74px -30px rgba(0,0,0,.95),
    0 0 46px -12px rgba(61,139,255,.42)}
}
.ea-mod:focus-within{z-index:3}





.ea-sockel{position:absolute;pointer-events:none}
.ea-sockel::before{content:"";position:absolute;transform:translate(-50%,-50%);border-radius:50%}
.ea-ring{position:absolute;left:50%;
  border-radius:50%;border:1.5px solid rgba(110,175,255,.55)}




.ea-plate-kante,.ea-plate{
  --fase:34px;
  clip-path:polygon(var(--fase) 0,calc(100% - var(--fase)) 0,100% 32%,100% 68%,
                    calc(100% - var(--fase)) 100%,var(--fase) 100%,0 68%,0 32%)}
.ea-plate-kante{position:absolute}
.ea-plate{position:relative;overflow:hidden}
.ea-hex{position:absolute;inset:0;pointer-events:none}
.ea-plate::after{content:"";position:absolute;inset:0;pointer-events:none}

/* Lockup: Emblem — Schrift — Emblem. Das rechte Emblem ist
   DASSELBE Bild, nur per scaleX(-1) gespiegelt. Exakter kann
   Symmetrie nicht sein, und es bleibt Felix' echtes Logo. */
.ea-lockup picture,.brand picture,.foot-brand picture{display:flex;flex:0 0 auto}
.ea-lockup{position:relative;z-index:1;display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;align-items:center;
  gap:clamp(10px,2.4vw,40px)}
.ea-emblem{height:auto;flex:0 0 auto;
  border-radius:50%;
  background:linear-gradient(150deg,#ffffff,#8598b6 38%,#2f3b52 58%,#c9d5e8 84%,#ffffff)}
.ea-lockup-txt{display:grid;justify-items:center;text-align:center;gap:2px;min-width:0}
.ea-l1{font-weight:800;letter-spacing:.02em;line-height:1;white-space:nowrap}
.ea-l1 i{font-style:normal;color:var(--acc);-webkit-text-fill-color:var(--acc);
  margin:0 .22em;font-size:.74em;vertical-align:.1em;
  filter:drop-shadow(0 0 8px var(--acc-glow))}
.ea-l2{font-weight:600;letter-spacing:.30em;
  text-transform:uppercase;white-space:nowrap;
  text-indent:.30em}
.ea-l3{font-weight:700;letter-spacing:.34em;
  text-transform:uppercase;color:var(--acc);white-space:nowrap;text-indent:.34em}

.ea-url{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;
  gap:clamp(10px,1.6vw,20px);margin:0;width:100%;
  padding:9px 18px;
  font-size:clamp(9.5px,1.05vw,13px);font-weight:600;letter-spacing:.30em;
  text-transform:lowercase;white-space:nowrap}
.ea-globus{width:clamp(12px,1.3vw,17px);height:clamp(12px,1.3vw,17px);flex:0 0 auto;
  fill:none;stroke:var(--acc);stroke-width:1.4;opacity:.85}

.ea-scroll{display:flex;flex-direction:column;align-items:center;gap:6px;
  margin:clamp(12px,1.8vh,22px) auto 0;width:max-content;min-height:44px;
  font-size:10px;font-weight:700;letter-spacing:.32em;text-transform:uppercase;
  color:var(--tx-faint);transition:color .25s}
.ea-scroll:hover{color:var(--acc)}
.ea-scroll svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;animation:eaWink 2.6s var(--ease) infinite}
@keyframes eaWink{0%,100%{transform:translateY(0);opacity:.55}50%{transform:translateY(5px);opacity:1}}






.fokus{position:relative;z-index:1;overflow-x:clip;
  padding:clamp(26px,4vh,52px) 0 clamp(56px,9vh,110px)}
.fokus .wrap{max-width:var(--wrap-weit)}
.fokus-kopf{position:relative;text-align:center;margin-bottom:clamp(28px,4.4vh,52px)}
.fokus-kopf::before{content:"";position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);width:130%;height:210%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(7,11,20,.82),rgba(7,11,20,.42) 60%,transparent 84%)}
.fokus-kopf>*{position:relative}
.fokus-kicker{font-size:10.5px;font-weight:700;letter-spacing:.38em;text-transform:uppercase;
  color:var(--acc);margin-bottom:12px}
.fokus-h2{font-size:clamp(1.7rem,4vw,3rem);font-weight:700;letter-spacing:-.02em;line-height:1.08;
  text-transform:uppercase;
  background:linear-gradient(180deg,#fff 10%,#dae3f2 40%,#94a6c0 78%,#e9eff8);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.fokus-sub{margin-top:12px;font-size:15px;color:var(--tx-dim)}

.karten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(16px,1.8vw,28px);align-items:stretch}

.karte{position:relative;perspective:1200px}
.karte-in{
  position:relative;height:100%;display:flex;flex-direction:column;
  transition:transform .55s var(--ease),box-shadow .55s var(--ease)}
.karte-in::before{content:"";position:absolute;z-index:0}
.karte-in>*{position:relative;z-index:1}
@media (hover:hover){
  .karte:hover .karte-in{transform:translateY(-10px) rotateX(2deg);
    box-shadow:0 44px 84px -38px rgba(0,0,0,.98),0 0 60px -16px rgba(61,139,255,.34)}
}

.karte-kopf{display:flex;align-items:center;gap:14px}
.karte-num{display:grid;place-items:center;
  clip-path:polygon(50% 0,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%);
  border:0;font-weight:800}
.karte-kopf h3{font-size:clamp(1.05rem,1.5vw,1.4rem);font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:#fff;line-height:1.1}
.karte-sub{margin-top:4px;font-size:12.5px;font-weight:600;letter-spacing:.02em;color:var(--acc)}
.karte-body{flex:1;display:grid;grid-template-columns:minmax(0,.96fr) minmax(0,1fr);
  gap:16px 18px;align-content:center}
/* Karte 2 laeuft einspaltig: der Hinweis zu den Zertifikaten gehoert
   UNTER die Belege, nicht als schmale Spalte daneben. */
.karte-body-eins{grid-template-columns:minmax(0,1fr);gap:12px}
.karte-fuss{display:flex;flex-direction:column;gap:3px;margin:0 26px;padding:13px 0 0;
  border-top:1px solid rgba(150,180,225,.16)}
.karte-fuss b{font-size:13px;font-weight:700;letter-spacing:.16em;color:#dbe5f4}
.karte-fuss i{font-style:normal;font-size:11.5px;color:var(--tx-faint);letter-spacing:.04em}
.karte-btn{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 18px;
  clip-path:polygon(12px 0,calc(100% - 12px) 0,100% 50%,calc(100% - 12px) 100%,12px 100%,0 50%);
  font-size:12px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:#dce9ff;
  transition:background .28s,color .28s}
.karte-btn:hover{color:#fff}
.karte-btn svg{width:18px;height:18px;flex:0 0 18px;fill:none;stroke:currentColor;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* Karten-Innenleben */

.haken{display:grid;gap:7px;align-content:start}
.haken li{position:relative;padding-left:21px;font-size:12.5px;line-height:1.35;color:#c8d4e6}
.haken li::before{content:"";position:absolute;left:0;top:.12em;width:14px;height:14px;
  border-radius:50%;border:1px solid rgba(61,139,255,.6);
  background:radial-gradient(circle at 40% 34%,rgba(61,139,255,.5),rgba(61,139,255,.12))}
.haken li::after{content:"";position:absolute;left:4.2px;top:.44em;width:5px;height:2.6px;
  border-left:1.6px solid #eaf2ff;border-bottom:1.6px solid #eaf2ff;transform:rotate(-45deg)}

.belege{display:grid;gap:8px;align-content:start}
.belege li{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:2px 12px;
  padding:10px 13px;border:1px solid rgba(150,180,225,.18);border-radius:10px}
.bl-firm{grid-column:1;grid-row:1;font-size:13px;font-weight:700;letter-spacing:.04em;
  color:#fff;white-space:nowrap}
.bl-was{grid-column:2;grid-row:1;font-size:11.5px;color:var(--tx-dim);line-height:1.3}
.bl-ok{grid-column:3;grid-row:1;width:20px;height:20px;fill:none;stroke:var(--acc);
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.belege-note{font-size:11px;line-height:1.45;color:var(--tx-faint)}

.fluss{display:grid;gap:0;align-content:start;padding-left:15px;
  border-left:1px solid rgba(61,139,255,.28)}
.fluss li{position:relative;padding:5px 0;font-size:11px;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;color:#b6c5dc}
.fluss li::before{content:"";position:absolute;left:-19px;top:.72em;width:7px;height:7px;
  border-radius:50%;background:var(--acc);box-shadow:0 0 9px var(--acc-glow)}

.marken{display:flex;flex-wrap:wrap;gap:6px;margin:0 26px;padding-top:13px;
  border-top:1px solid rgba(150,180,225,.16)}
.marken li{padding:6px 10px;border-radius:7px;border:1px solid rgba(150,180,225,.2);
  background:rgba(255,255,255,.04);font-size:10.5px;font-weight:600;letter-spacing:.08em;
  color:#bccbe0}

/* ── Zusammenarbeit ──────────────────────────────────────────── */
.zusammen{margin-top:clamp(20px,3vh,36px)}
.zusammen-in{--fase:26px;
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;
  gap:clamp(16px,2.4vw,34px);
  clip-path:polygon(var(--fase) 0,calc(100% - var(--fase)) 0,100% var(--fase),
                    100% calc(100% - var(--fase)),calc(100% - var(--fase)) 100%,
                    var(--fase) 100%,0 calc(100% - var(--fase)),0 var(--fase));
  border:0;
  background:
    linear-gradient(180deg,rgba(61,139,255,.16),transparent 40%),
    linear-gradient(178deg,rgba(18,29,50,.96),rgba(8,13,24,.99))}
.zu-ikon{display:grid;place-items:center;
  clip-path:polygon(50% 0,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%);
  background:linear-gradient(160deg,rgba(61,139,255,.34),rgba(10,17,32,.9))}
.zu-ikon svg{width:30px;height:30px;fill:none;stroke:#dcebff;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}
.zu-kicker{font-size:10px;font-weight:700;letter-spacing:.34em;text-transform:uppercase;
  color:var(--acc);margin-bottom:7px}
.zusammen-txt h2{font-size:clamp(1.2rem,2.3vw,1.85rem);font-weight:700;letter-spacing:-.015em;
  color:#fff;line-height:1.12}
.zu-lead{margin-top:9px;font-size:13.5px;line-height:1.5;color:var(--tx-dim);max-width:62ch}
.zu-btn{display:inline-flex;align-items:center;gap:12px;min-height:52px;padding:0 26px;
  clip-path:polygon(13px 0,calc(100% - 13px) 0,100% 50%,calc(100% - 13px) 100%,13px 100%,0 50%);
  background:linear-gradient(180deg,var(--acc),var(--acc-2));color:#04101f;
  font-size:12.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;white-space:nowrap;
  transition:filter .25s,transform .25s var(--ease)}
.zu-btn:hover{filter:brightness(1.14);transform:translateY(-2px)}
.zu-btn svg{width:18px;height:18px;flex:0 0 18px;fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ══ TABLET ═══════════════════════════════════════════════════ */
@media (max-width:1180px){
  .nav-links a{padding:10px 13px;letter-spacing:.08em}
  .nav-kapsel{gap:12px;padding:0 8px 0 12px}
  .nav-cta{padding:0 15px}
}
@media (max-width:1000px){
  /* Sechs Module in zwei Reihen zu dritt - der Bogen bleibt, wird
     nur flacher. Kein gequetschter Text, keine Mini-Schrift. */
  .ea-bogen{grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch}
  
  
  
  
  .ea-mod-t{font-size:12px}
  .ea-mod-l li{font-size:11.5px}
  
  

  .karten{grid-template-columns:minmax(0,1fr);gap:20px}
  .karte-body{grid-template-columns:minmax(0,.8fr) minmax(0,1fr)}
  .zusammen-in{grid-template-columns:auto minmax(0,1fr);row-gap:20px}
  .zu-btn{grid-column:1/-1;justify-content:center}
}
@media (max-width:900px){
  .nav-links{display:none}
  .burger{display:flex;order:3}
  .nav-kapsel{gap:10px}
  .nav-rechts{margin-left:auto}
  .lang button{padding:5px 9px;font-size:12px}
}

/* ══ MOBILE ═══════════════════════════════════════════════════
   KEINE geschrumpfte Desktopfassung: der Hero wird zu einer
   eigenen senkrechten Komposition. Die Module erscheinen beim
   Scrollen nacheinander 1 -> 6 (Klasse .an aus app.js). */
@media (max-width:820px){
  
  
  
  

  
  
  .ea-mod{--tf:none !important}
  
  
  
  html.js .ea-mod.an .ea-mod-in::after{animation:eaPuls .9s var(--ease) 1}
  @keyframes eaPuls{0%{opacity:.2}45%{opacity:1;box-shadow:0 0 26px 5px var(--acc-glow)}100%{opacity:1}}

  /* Waagerechte Zeile: Nummer + Titel links, Icon rechts, Liste unten */
  .ea-mod-in{gap:0 12px}
  .ea-num{grid-area:num}
  .ea-mod-t{grid-area:titel}
  .ea-ikon{grid-area:ikon}
  
  
  

  
  
  
  .ea-lockup{grid-template-columns:auto minmax(0,1fr) auto}
  
  
  
  
  .ea-url{max-width:100%}

  .fokus{padding:34px 0 60px}
  .fokus-kopf{text-align:left}
  
  .karte-body{grid-template-columns:minmax(0,1fr);gap:18px}
  
  
  .zusammen-in{grid-template-columns:minmax(0,1fr);text-align:left;padding:22px 20px}
  .zu-ikon{width:52px;height:52px;flex:0 0 52px}
  .dash-korn{opacity:.2}

}

/* Fingerbedienung: alles bis Tablet-Breite bekommt echte 44 px. */
@media (max-width:1024px){
  .lang button{min-height:44px;min-width:46px}
  .foot-nav a,.mobile-menu a{display:flex;align-items:center;min-height:44px;min-width:44px}
  .foot-meta a{min-height:44px;min-width:44px;display:inline-flex;align-items:center}
}
@media (max-width:560px){
  
  .nav-cta span{display:none}
  .nav-cta{padding:0 13px}
  .brand{min-width:44px}
  .brand-mark{width:44px;height:44px;flex:0 0 44px}
  .brand-txt{display:none}
  .nav-kapsel{gap:8px;padding:0 7px 0 8px}
  .lang{padding:2px}
  .lang button{padding:5px 9px;min-width:44px}
  .burger{min-width:44px}
  
  
}

/* ══ REDUZIERTE BEWEGUNG ══════════════════════════════════════
   Kein Scroll-Umbau, kein laufender Chart, nichts versteckt.
   Der Inhalt ist vollstaendig da - die Animation trug nie
   Information, sondern nur Wirkung. */
@media (prefers-reduced-motion:reduce){
  html.js .reveal-tief,html.js .ea-mod{opacity:1 !important;transform:var(--tf,none) !important;
    transition:none !important}
  .ea-scroll svg{animation:none}
  .ea-mod,.karte-in,.nav-kapsel,.dash-welt{transition:none !important}
  .ea-hero .ea-buehne{transform:none !important;opacity:1 !important}
  @media (max-width:820px){html.js .ea-mod{transform:none !important}}
}
/* Fein-Zeiger fehlt (Touch): keine Hover-Zustaende erzwingen - und
   jedes Ziel, das ein Finger treffen muss, bekommt seine 44 px.
   Gemessen waren es vorher 30-31 px bei DE/EN und im Fuss. */
@media (hover:none){
  .ea-mod:hover,.karte:hover .karte-in{transform:var(--tf,none)}
  .lang button{min-height:44px;min-width:46px}
  .foot-nav a,.mobile-menu a{display:flex;align-items:center;min-height:44px;min-width:44px}
  .foot-meta a,.foot-meta span{min-height:44px;min-width:44px;display:inline-flex;align-items:center}
}

/* ══ UEBERNOMMENE GESTALTUNGS-VARIANTEN ══════════════════════
   Angehaengt, nicht eingearbeitet: genau dieser Text stand beim
   Abnahme-Screenshot in der Seite. Reihenfolge zaehlt.
   ══════════════════════════════════════════════════════════════ */

/* ── Variante v1 ──────────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════
   v1 — TIEFE UND BUEHNE
   Aus der Reihe von sechs Kacheln wird eine Buehne, auf der
   Bauteile STEHEN. Drei Bausteine:
     1. Kamera  — echte Perspektive je Panel, EIN gemeinsamer
                  Horizont, Groessenstaffelung, Verdeckung,
                  Verschattung zwischen den Nachbarn.
     2. Buehne  — Plattform mit liegender Oberseite (Deck) und
                  hoher Frontplatte; die Panels sinken sichtbar
                  hinter die Deckkante, sie STEHEN darauf.
     3. Boden   — Raster in Perspektive + Ringe am Fuss.
   Kein preserve-3d auf .ea-bogen (Invariante): die Perspektive
   steht als perspective()-Funktion IM transform jedes Panels.
   Der Horizont ist bei 30 % der Panelhoehe — bei ALLEN gleich,
   deshalb fluchten die Kanten auf denselben Punkt und die Fuesse
   liegen auf einer Bodenlinie statt jeder fuer sich zu kippen.
   ═══════════════════════════════════════════════════════════════ */

/* ── 1 · KAMERA ─────────────────────────────────────────────── */

.ea-hero{padding-top:100px}
.ea-kopf{margin-bottom:clamp(12px,2vh,24px)}

.ea-buehne{
  perspective:1150px;
  perspective-origin:50% 24%;
  padding-bottom:clamp(16px,2.6vh,42px)}

/* Boden: echtes Raster in Perspektive. Direktes Kind von
   .ea-buehne, also greift dessen perspective. z-index:-1 haelt es
   hinter Panels und Plattform, bleibt aber in .ea-buehne. */
.ea-buehne::after{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  left:50%;bottom:-40px;width:240%;height:900px;
  transform:translateX(-50%) rotateX(80deg);
  transform-origin:50% 100%;
  background:
    repeating-linear-gradient(90deg,rgba(125,180,255,.30) 0 1.5px,transparent 1.5px 88px),
    repeating-linear-gradient(0deg,rgba(125,180,255,.24) 0 1.5px,transparent 1.5px 88px);
  -webkit-mask-image:radial-gradient(56% 66% at 50% 100%,#000 0%,rgba(0,0,0,.62) 40%,transparent 74%);
  mask-image:radial-gradient(56% 66% at 50% 100%,#000 0%,rgba(0,0,0,.62) 40%,transparent 74%)}

/* Panels: hoeher, schmaler, enger beieinander. */
.ea-bogen{
  gap:clamp(6px,.95vw,15px);
  padding:0 clamp(6px,6.2vw,120px);
  align-items:end}
.ea-mod{--fase:15px}
.ea-mod-in{min-height:clamp(272px,40vh,406px)}
/* Fussraum: darauf liegt die Bodenverschattung, damit sie keine
   Zeile schluckt. */
.ea-mod-l{padding-bottom:40px}

/* Der Bogen. Reihenfolge im transform: perspective -> translateY
   (holt den Fuss zurueck auf die Bodenlinie, den das Verkleinern
   um den Horizont angehoben hat) -> rotateY -> scale.
   Die aeusseren drehen um ihre INNERE Kante: sie schwenken nach
   hinten weg und bleiben am Nachbarn angedockt — daraus entsteht
   die echte Verdeckung. */
.ea-mod:nth-child(1){
  transform-origin:100% 30%;z-index:1}
.ea-mod:nth-child(6){
  transform-origin:0 30%;z-index:1}
.ea-mod:nth-child(2){
  transform-origin:93% 30%;z-index:2}
.ea-mod:nth-child(5){
  transform-origin:7% 30%;z-index:2}
.ea-mod:nth-child(3){
  transform-origin:72% 30%;z-index:3}
.ea-mod:nth-child(4){
  transform-origin:28% 30%;z-index:3}

/* Verschattung: das jeweils HINTERE Panel wird an der Kante
   dunkel, die dem vorderen Nachbarn zugewandt ist — plus eine
   schmale Bodenverschattung an der Unterkante. Liegt UEBER dem
   Glas (z-index 5), damit es wie Licht wirkt und nicht wie ein
   zweiter Rahmen. Die Bodenverschattung endet bei 10 %: sie
   deckt nur den Fussraum, nie eine Textzeile. */
.ea-mod::before{inset:0;
  clip-path:polygon(15px 0,calc(100% - 15px) 0,100% 15px,100% calc(100% - 7px),
                    calc(100% - 7px) 100%,7px 100%,0 calc(100% - 7px),0 15px)}
.ea-mod:nth-child(1)::before{background:
  linear-gradient(272deg,rgba(1,4,10,.82),rgba(1,4,10,.36) 22%,transparent 58%),
  linear-gradient(0deg,rgba(2,6,14,.9),rgba(2,6,14,0) 11%)}
.ea-mod:nth-child(6)::before{background:
  linear-gradient(88deg,rgba(1,4,10,.82),rgba(1,4,10,.36) 22%,transparent 58%),
  linear-gradient(0deg,rgba(2,6,14,.9),rgba(2,6,14,0) 11%)}
.ea-mod:nth-child(2)::before{background:
  linear-gradient(272deg,rgba(1,4,10,.58),rgba(1,4,10,.20) 18%,transparent 50%),
  linear-gradient(0deg,rgba(2,6,14,.88),rgba(2,6,14,0) 10%)}
.ea-mod:nth-child(5)::before{background:
  linear-gradient(88deg,rgba(1,4,10,.58),rgba(1,4,10,.20) 18%,transparent 50%),
  linear-gradient(0deg,rgba(2,6,14,.88),rgba(2,6,14,0) 10%)}

/* Aufsetzschatten: liegt hinter dem Glas (z-index -1 in .ea-mod),
   aber ueber der Plattform - dadurch bekommt jeder Fuss einen
   eigenen Schatten auf dem Deck. */
.ea-mod::after{
  filter:blur(6px)}
.ea-mod:nth-child(1)::after,.ea-mod:nth-child(6)::after{left:-8%;right:-8%;
  background:radial-gradient(58% 50% at 50% 22%,rgba(0,0,0,.90),rgba(0,0,0,.5) 46%,transparent 82%)}
.ea-mod:nth-child(2)::after,.ea-mod:nth-child(5)::after{
  bottom:-11px;height:34px;left:-10%;right:-10%}

/* Luftperspektive: was hinten steht, verliert Kontrast. */
.ea-mod:nth-child(1)::before,.ea-mod:nth-child(6)::before{
  box-shadow:inset 0 0 0 999px rgba(13,26,50,.17)}
.ea-mod:nth-child(2)::before,.ea-mod:nth-child(5)::before{
  box-shadow:inset 0 0 0 999px rgba(13,26,50,.08)}





/* ── 2 · PLATTFORM MIT DICKE ────────────────────────────────── */

/* Breiter als bisher: die Buehne traegt jetzt wirklich alle sechs
   Panels. z-index ueber den Panels — dadurch verschwinden ihre
   Fuesse HINTER dem Deck, sie stehen darauf. */
.ea-platte{
  --deck:clamp(58px,9vh,112px);
  position:relative;z-index:0;
  max-width:min(1120px,95%);
  margin:calc(var(--deck) * -.34) auto 0;
  padding-top:var(--deck)}

/* Liegende Oberseite (Deck): KEIN gemaltes Trapez, sondern eine
   echte Flaeche, die per perspective()+rotateX nach hinten kippt.
   Dadurch verjuengt sie sich von selbst, und das Raster darauf
   fluchtet mit — genau das macht den Unterschied zwischen "Platte
   mit Farbverlauf" und "Flaeche, auf der etwas steht".
   Hoehe x3.5 und rotateX(70deg) ergeben projiziert wieder --deck. */
.ea-platte::before{
  content:"";position:absolute;z-index:0;pointer-events:none;
  left:34px;right:34px;top:calc(var(--deck) * -2.5);height:calc(var(--deck) * 3.5);
  transform:perspective(900px) rotateX(70deg);
  transform-origin:50% 100%;
  background:
    /* Schattenspuren der sechs Panels, nach vorn auslaufend */
    radial-gradient(15% 62% at 0% 0,rgba(0,0,0,.46),transparent 76%),
    radial-gradient(13% 66% at 18% 0,rgba(0,0,0,.50),transparent 76%),
    radial-gradient(12% 70% at 39% 0,rgba(0,0,0,.54),transparent 76%),
    radial-gradient(12% 70% at 61% 0,rgba(0,0,0,.54),transparent 76%),
    radial-gradient(13% 66% at 82% 0,rgba(0,0,0,.50),transparent 76%),
    radial-gradient(15% 62% at 100% 0,rgba(0,0,0,.46),transparent 76%),
    /* Raster auf dem Deck - fluchtet mit, weil die Flaeche kippt */
    repeating-linear-gradient(0deg,rgba(170,212,255,.30) 0 1px,transparent 1px 26px),
    repeating-linear-gradient(90deg,rgba(170,212,255,.22) 0 1px,transparent 1px 48px),
    /* Lichtpfuetze vorn mittig */
    radial-gradient(72% 52% at 50% 100%,rgba(130,185,255,.30),transparent 74%),
    linear-gradient(90deg,rgba(0,0,0,.55),transparent 18%,transparent 82%,rgba(0,0,0,.55)),
    linear-gradient(180deg,#0a1120 0%,#15203a 20%,#243357 46%,#3c4f77 68%,#5c7199 85%,
                    #8298bd 95%,#a3b6d4 100%)}
/* Hinterkante des Decks: dort setzen die Panels auf. */
.ea-platte::before{
  box-shadow:inset 0 1px 0 rgba(150,195,255,.34)}

/* Bruchkante Deck -> Frontplatte: schmaler heller Grat, an den
   Enden ausgeblendet, damit es nicht wie ein aufgesetzter Strich
   aussieht. */
.ea-platte::after{
  content:"";position:absolute;z-index:1;pointer-events:none;
  left:34px;right:34px;top:calc(var(--deck) - 2px);
  height:3px;
  background:linear-gradient(90deg,transparent,rgba(190,215,250,.55) 8%,
             rgba(244,250,255,.95) 50%,rgba(190,215,250,.55) 92%,transparent);
  box-shadow:0 0 14px 2px rgba(130,185,255,.34)}



.ea-plate{
  min-height:clamp(154px,20vh,218px)}

.ea-lockup{padding:clamp(16px,2.6vw,34px) clamp(16px,3.4vw,54px) clamp(10px,1.4vw,18px)}
.ea-l1{font-size:clamp(1.6rem,5vw,3.9rem)}
.ea-l2{font-size:clamp(.74rem,2vw,1.5rem)}
.ea-l3{font-size:clamp(.62rem,1.45vw,1.1rem)}
.ea-emblem{width:clamp(42px,6vw,86px)}

/* ── 3 · BODEN: RINGE AM FUSS ───────────────────────────────── */
.ea-sockel{
  left:50%;top:auto;bottom:-64px;transform:translateX(-50%);
  width:132%;height:210px}
.ea-sockel::before{
  left:50%;top:42%;width:98%;height:170%;
  background:radial-gradient(closest-side,rgba(61,139,255,.40),rgba(61,139,255,.11) 56%,transparent 78%)}
.ea-ring{transform:translate(-50%,-50%);top:42%;
  border-color:rgba(125,185,255,.62);
  box-shadow:0 0 44px rgba(61,139,255,.5),inset 0 0 54px rgba(61,139,255,.24)}
.ea-ring-1{width:100%;height:168px;border-width:1.5px}
.ea-ring-2{width:79%;height:124px;border-color:rgba(200,228,255,.80);
  box-shadow:0 0 50px rgba(130,190,255,.58),inset 0 0 40px rgba(130,190,255,.26)}
.ea-ring-3{width:56%;height:80px;border-color:rgba(61,139,255,.48)}

/* ══ TABLET: Bogen bleibt, nur flacher ══════════════════════ */
@media (max-width:1000px){
  .ea-bogen{padding:0 clamp(4px,2vw,26px);gap:12px 14px}
  .ea-mod-in{min-height:240px}
  .ea-mod-l{padding-bottom:26px}
  .ea-mod:nth-child(1),.ea-mod:nth-child(4){
    --tf:perspective(700px) translateY(14px) rotateY(15deg) scale(.93);
    transform-origin:100% 30%;z-index:1}
  .ea-mod:nth-child(3),.ea-mod:nth-child(6){
    --tf:perspective(700px) translateY(14px) rotateY(-15deg) scale(.93);
    transform-origin:0 30%;z-index:1}
  .ea-mod:nth-child(2),.ea-mod:nth-child(5){
    --tf:perspective(950px) rotateY(0deg);transform-origin:50% 30%;z-index:3}
  .ea-mod:nth-child(1)::before,.ea-mod:nth-child(4)::before{background:
    linear-gradient(272deg,rgba(1,4,10,.62),transparent 44%),
    linear-gradient(0deg,rgba(2,6,14,.86),transparent 12%)}
  .ea-mod:nth-child(3)::before,.ea-mod:nth-child(6)::before{background:
    linear-gradient(88deg,rgba(1,4,10,.62),transparent 44%),
    linear-gradient(0deg,rgba(2,6,14,.86),transparent 12%)}
  .ea-mod:nth-child(2)::before,.ea-mod:nth-child(5)::before{background:
    linear-gradient(0deg,rgba(2,6,14,.86),transparent 12%)}
  /* Luftperspektive gehoert hier auf die aeusseren SPALTEN,
     nicht mehr auf 1/6 und 2/5 wie im Sechserbogen. */
  .ea-mod:nth-child(2)::before,.ea-mod:nth-child(5)::before{box-shadow:none}
  .ea-mod:nth-child(1)::before,.ea-mod:nth-child(3)::before,
  .ea-mod:nth-child(4)::before,.ea-mod:nth-child(6)::before{
    box-shadow:inset 0 0 0 999px rgba(11,22,44,.10)}
  /* Aufsetzschatten auch hier - jede Reihe steht auf ihrer Ebene. */
  .ea-mod::after{left:-10%;right:-10%;bottom:-14px;height:34px;
    background:radial-gradient(closest-side,rgba(0,0,0,.80),rgba(0,0,0,.4) 54%,transparent 80%);
    filter:blur(7px)}
  .ea-platte{max-width:min(780px,97%)}
  .ea-platte::before{transform:perspective(660px) rotateX(70deg);background:
    radial-gradient(22% 74% at 17% 0,rgba(0,0,0,.74),transparent 72%),
    radial-gradient(20% 80% at 50% 0,rgba(0,0,0,.82),transparent 72%),
    radial-gradient(22% 74% at 83% 0,rgba(0,0,0,.74),transparent 72%),
    repeating-linear-gradient(0deg,rgba(150,200,255,.15) 0 1px,transparent 1px 22px),
    repeating-linear-gradient(90deg,rgba(150,200,255,.12) 0 1px,transparent 1px 42px),
    radial-gradient(70% 46% at 50% 100%,rgba(120,175,255,.19),transparent 72%),
    linear-gradient(90deg,rgba(0,0,0,.5),transparent 16%,transparent 84%,rgba(0,0,0,.5)),
    linear-gradient(180deg,#070c17 0%,#0b1322 26%,#141e34 56%,#22304c 78%,#3a4a6b 92%,#4d5f80 100%)}
  .ea-buehne::after{height:620px;transform:translateX(-50%) rotateX(81.5deg)}
}

/* ══ HANDY: gleiche Bildwelt, Plattform bleibt Buehne ═══════ */
@media (max-width:820px){
  .ea-buehne{padding-bottom:24px}
  .ea-buehne::after{height:420px;width:300%;bottom:-24px;
    transform:translateX(-50%) rotateX(82deg)}
  
  .ea-mod{--fase:13px}
  
  /* Bodenverschattung hier nur als schmaler Saum — sonst frisst
     sie die letzte Listenzeile. */
  .ea-mod::before,
  .ea-mod:nth-child(1)::before,.ea-mod:nth-child(2)::before,
  .ea-mod:nth-child(3)::before,.ea-mod:nth-child(4)::before,
  .ea-mod:nth-child(5)::before,.ea-mod:nth-child(6)::before{
    clip-path:polygon(13px 0,calc(100% - 13px) 0,100% 13px,100% calc(100% - 6px),
                      calc(100% - 6px) 100%,6px 100%,0 calc(100% - 6px),0 13px);
    background:linear-gradient(0deg,rgba(2,6,14,.62),rgba(2,6,14,0) 9%)}
  .ea-mod-l{padding-bottom:4px}
  .ea-platte{--deck:42px}
  .ea-platte::before{
    transform:perspective(520px) rotateX(70deg)}
  .ea-platte::after{left:18px;right:18px}
  /* Kein Bogen, aber jede Kachel liegt auf dem Boden auf. */
  .ea-mod::after{
    filter:blur(6px)}
  .ea-mod:nth-child(1)::before,.ea-mod:nth-child(2)::before,
  .ea-mod:nth-child(5)::before,.ea-mod:nth-child(6)::before{box-shadow:none}
  .ea-plate-kante{top:calc(42px - 3px)}
  .ea-plate{min-height:0}
  .ea-sockel{bottom:-46px}
  
  
  
  
}

/* ══ REDUZIERTE BEWEGUNG ═══════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  .ea-buehne::after{transform:translateX(-50%) rotateX(80deg) !important}
}

/* ── Variante v2 ──────────────────────────────────────────── */
/* ══════════════════════════════════════════════════════════════
   v2 — MATERIAL UND LICHT AM BAUTEIL
   Schwerpunkt: Oberflaeche. Perspektive und Anordnung bleiben.

   Kerngedanke: der Chromrahmen ist KEIN Verlauf ueber die ganze
   Kontur (das liest aus zwei Metern nur als grauer Strich),
   sondern drei getrennte Lagen mit eigener Lichtlogik:
     1. aeusserer Rand  — Licht von oben: helle Oberkante,
                          dunkle Unterkante, seitlich der Umschlag
     2. innerer Absatz  — UMGEKEHRT beleuchtet (oben dunkel, unten
                          hell), weil die Kehle nach oben zeigt.
                          Genau dieser Wechsel macht "gefraest".
     3. Innenkante      — duenne Lichtlinie am Glasrand

   Wichtig: clip-path beschneidet auch box-shadow. Die bisherigen
   Schlagschatten der Karten wurden weggeschnitten und waren NIE
   sichtbar — darum stand alles wie aufgeklebt in der Flaeche.
   Schatten kommen jetzt per filter:drop-shadow(), das die
   beschnittene Silhouette benutzt.
   ══════════════════════════════════════════════════════════════ */

/* ══ PANEL ════════════════════════════════════════════════════ */

.ea-mod{ --halo:.85; --kante:#ffffff}
.ea-mod:nth-child(1),.ea-mod:nth-child(6){ --halo:.55; --kante:#e8eef9}
.ea-mod:nth-child(2),.ea-mod:nth-child(5){ --halo:.68; --kante:#eef3fb}
.ea-mod:nth-child(1) .ea-mod-in{--lw:170deg}
.ea-mod:nth-child(2) .ea-mod-in{--lw:175deg}
.ea-mod:nth-child(3) .ea-mod-in{--lw:178deg}
.ea-mod:nth-child(4) .ea-mod-in{--lw:182deg}
.ea-mod:nth-child(5) .ea-mod-in{--lw:185deg}
.ea-mod:nth-child(6) .ea-mod-in{--lw:190deg}

/* Weicher Schein nach aussen — liegt HINTER dem Bauteil. */
.ea-mod::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  left:-16px;right:-16px;top:-18px;bottom:-4px;opacity:var(--halo);
  background:
    radial-gradient(64% 19% at 50% 4%,rgba(112,180,255,.55),rgba(61,139,255,.15) 44%,transparent 74%),
    radial-gradient(46% 62% at 50% 52%,rgba(45,100,195,.13),transparent 72%)}
/* Aufsetzschatten auf der Plattform. */
.ea-mod::after{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  left:4%;right:4%;bottom:-14px;height:30px;
  background:radial-gradient(closest-side,rgba(0,0,0,.88),rgba(0,0,0,.34) 62%,transparent 82%)}
.ea-mod:nth-child(1)::after,.ea-mod:nth-child(6)::after{opacity:.45;bottom:-9px;height:20px}

/* ── Lage 1: aeusserer Rand ─────────────────────────────────── */
.ea-mod-in{
  --rim:5px;            /* aeusserer Rand  */
  --stp:3px;            /* innerer Absatz  */
  --fase:16px;
  --fusz:10px;
  --refl:.38;          /* Staerke des Glanzstreifens */
  --refla:128deg;      /* Neigung des Glanzstreifens  */
  clip-path:polygon(var(--fase) 0,calc(100% - var(--fase)) 0,100% var(--fase),
                    100% calc(100% - var(--fusz)),calc(100% - var(--fusz)) 100%,
                    var(--fusz) 100%,0 calc(100% - var(--fusz)),0 var(--fase));
  background:
    /* helle Oberkante */
    linear-gradient(90deg,rgba(255,255,255,.30),var(--kante) 20%,var(--kante) 80%,rgba(255,255,255,.30))
      no-repeat 0 0/100% 1.7px,
    /* dunkle Unterkante */
    linear-gradient(90deg,rgba(2,4,9,.70),#02040a 24%,#02040a 76%,rgba(2,4,9,.70))
      no-repeat 0 100%/100% 2.4px,
    /* Absatz oben — Kehle zeigt nach unten, also dunkel */
    linear-gradient(180deg,#04070d,#0e1626 55%,#26314a)
      no-repeat 0 var(--rim)/100% var(--stp),
    /* Absatz unten — Kehle zeigt nach oben, also hell */
    linear-gradient(180deg,#8b9bb6,#e6eefa 42%,#7b8ba7)
      no-repeat 0 calc(100% - var(--rim))/100% var(--stp),
    /* Absatz links */
    linear-gradient(180deg,#c3d0e4,#5d6b84 44%,#222b3e)
      no-repeat var(--rim) 0/var(--stp) 100%,
    /* Absatz rechts — Licht kommt von links oben, also dunkler */
    linear-gradient(180deg,#8b9ab3,#3d4759 44%,#161d2c)
      no-repeat calc(100% - var(--rim)) 0/var(--stp) 100%,
    /* Grundmetall des aeusseren Randes: Licht von oben */
    linear-gradient(var(--lw,180deg),#f7faff 0%,#ccd8ea 3%,#93a3be 8%,#63738f 20%,
                    #3e4b64 42%,#29334a 64%,#1a2233 84%,#38455e 95%,#7a8aa6 100%);
  filter:
    drop-shadow(0 2px 2px rgba(0,0,0,.70))
    drop-shadow(0 22px 26px rgba(0,0,0,.72))
    drop-shadow(0 0 16px rgba(61,139,255,.22));
  box-shadow:none}

/* ── Lage 2: das eingesetzte Glas ───────────────────────────── */
.ea-mod-in::before{
  content:"";position:absolute;z-index:0;
  inset:calc(var(--rim) + var(--stp));
  clip-path:polygon(8px 0,calc(100% - 8px) 0,100% 8px,
                    100% calc(100% - 2px),calc(100% - 2px) 100%,
                    2px 100%,0 calc(100% - 2px),0 8px);
  background:
    /* Neonschein von der Oberkante ins Glas */
    linear-gradient(180deg,rgba(94,168,255,.36),rgba(61,139,255,.10) 32%,transparent 60%)
      no-repeat 0 0/100% 92px,
    /* senkrechte Kanten als duenne Lichtlinien */
    linear-gradient(180deg,rgba(214,235,255,.95),rgba(96,168,255,.42) 38%,rgba(61,139,255,.10) 72%,transparent 92%)
      no-repeat 0 0/2.2px 100%,
    linear-gradient(180deg,rgba(214,235,255,.95),rgba(96,168,255,.42) 38%,rgba(61,139,255,.10) 72%,transparent 92%)
      no-repeat 100% 0/2.2px 100%,
    /* Bodenlicht der Plattform spiegelt sich unten ins Glas */
    linear-gradient(0deg,rgba(92,152,238,.21),rgba(61,139,255,.07) 16%,transparent 34%),
    /* Vignette — loescht den Glanzstreifen nach unten aus */
    linear-gradient(180deg,transparent 4%,rgba(7,12,22,.30) 22%,rgba(6,10,19,.68) 48%,rgba(4,8,15,.90) 100%),
    /* Glanzstreifen: schmal, schraeg, oben deutlich */
    linear-gradient(var(--refla),transparent 25%,rgba(255,255,255,.05) 29.5%,
                    rgba(240,248,255,var(--refl)) 32.5%,rgba(255,255,255,.04) 35.5%,transparent 40%)
      no-repeat calc(var(--i,0) * -8%) 0/132% 100%,
    /* Lichtverlauf von oben */
    linear-gradient(180deg,rgba(120,175,255,.26),rgba(52,96,175,.07) 24%,transparent 46%),
    /* Grundglas */
    linear-gradient(178deg,rgba(20,33,57,.96),rgba(6,11,20,.99));
  box-shadow:
    inset 0 0 0 1px rgba(150,190,245,.18),
    inset 0 -5px 7px -4px rgba(0,0,0,.92)}

/* ── Lage 3: die satte Neon-Oberkante ───────────────────────── */
.ea-mod-in::after{
  content:"";position:absolute;z-index:2;
  left:7%;right:7%;top:calc(var(--rim) + var(--stp) + .5px);height:3px;
  border-radius:2px;
  background:linear-gradient(90deg,transparent,#2f7fff 7%,#5aa6ff 21%,#d6ecff 50%,
                             #5aa6ff 79%,#2f7fff 93%,transparent);
  box-shadow:0 0 4px rgba(200,230,255,1),0 0 13px 2px rgba(80,160,255,.95),0 0 32px 8px rgba(61,139,255,.52)}

/* ── Nummer: eingelassenes, beleuchtetes Bauteil ────────────── */
/* Der Chromring MUSS ueber border-box laufen. Ein ::before mit
   z-index:-1 liegt in derselben Stapelschicht UEBER dem eigenen
   Hintergrund - dann wird aus dem Ring eine silberne Scheibe. */
.ea-num{
  position:relative;width:35px;height:35px;margin:19px auto 0;
  border:2.2px solid transparent;
  font-size:14px;
  box-shadow:
    inset 0 2.5px 3px -1px rgba(0,0,0,.98),
    inset 0 -1.5px 0 rgba(164,207,255,.38),
    0 1px 0 rgba(255,255,255,.10),
    0 2px 6px -2px rgba(0,0,0,.9)}

/* ── Strichsymbol: flache Nische, kein Knopf ────────────────── */
.ea-ikon{
  width:clamp(44px,3.8vw,58px);height:clamp(44px,3.8vw,58px);
  margin:17px auto 2px;padding:8px;border-radius:8px;opacity:1;
  stroke:#a2cdff;stroke-width:1.55;
  background:linear-gradient(180deg,rgba(0,0,0,.46),rgba(0,0,0,.30) 58%,rgba(12,26,50,.22));
  box-shadow:
    inset 0 1.6px 2px -.6px rgba(0,0,0,.9),
    inset 1px 0 1.5px -1px rgba(0,0,0,.7),
    inset 0 -1px 0 rgba(158,202,252,.20),
    0 1px 0 rgba(190,220,255,.07);
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.85)) drop-shadow(0 0 13px rgba(61,139,255,.68))}

.ea-mod-t{color:#f2f7ff;text-shadow:0 1px 0 rgba(0,0,0,.8),0 0 20px rgba(61,139,255,.38)}
.ea-mod-l li{color:#c1cfe4}
.ea-mod-l li::before{box-shadow:0 0 7px rgba(61,139,255,.85)}





.ea-plate{
  background:
    /* breiter Lichtzug ueber die Frontplatte */
    linear-gradient(102deg,transparent 24%,rgba(180,214,255,.07) 38%,rgba(226,240,255,.13) 47%,
                    rgba(180,214,255,.06) 56%,transparent 70%),
    /* Lichtkante der Oberseite */
    linear-gradient(180deg,rgba(176,214,255,.30),rgba(61,139,255,.06) 9%,transparent 22%),
    /* seitliche Abdunklung */
    linear-gradient(90deg,rgba(4,8,15,.55),transparent 16%,transparent 84%,rgba(4,8,15,.62)),
    linear-gradient(180deg,rgba(31,49,80,.97),rgba(15,25,43,.98) 44%,rgba(6,11,20,.99));
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.22),
    inset 0 -3px 8px -3px rgba(0,0,0,.95)}
/* Waben leicht praegen statt nur zeichnen. */
.ea-hex{filter:drop-shadow(0 1px 0 rgba(0,0,0,.85))}
.ea-plate::after{
  background:
    linear-gradient(180deg,rgba(61,139,255,.15),transparent 38%,rgba(61,139,255,.09))}

/* ── Embleme: in die Platte eingelassen ─────────────────────── */
.ea-lockup picture{
  position:relative;padding:5px;border-radius:50%;
  background:conic-gradient(from 205deg,#ffffff 0deg,#a3b3cd 44deg,#3f4a61 88deg,
             #dde6f4 138deg,#6b7b97 186deg,#313c53 230deg,#c7d2e5 288deg,
             #7e8ea9 328deg,#ffffff 360deg)}
.ea-lockup picture::before{
  content:"";position:absolute;z-index:-1;inset:-8px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(4,8,14,.94) 76%,rgba(4,8,14,.72) 92%,transparent);
  box-shadow:
    inset 0 3.5px 4px -1.5px rgba(0,0,0,1),
    inset 0 -2.5px 3px -1.5px rgba(176,214,255,.34),
    0 0 0 1px rgba(126,166,220,.24),
    0 2px 0 -1px rgba(255,255,255,.10),
    0 14px 26px -14px rgba(0,0,0,.95)}
.ea-emblem{
  padding:2px;
  box-shadow:0 0 0 1px rgba(5,9,16,.92),0 0 18px -4px rgba(61,139,255,.6),
             0 4px 10px -5px rgba(0,0,0,.95)}

/* ── Typografie mit Tiefe ───────────────────────────────────── */
.ea-l1{
  background:linear-gradient(180deg,#ffffff 0%,#d7e2f2 24%,#93a3be 46%,#2f3a51 50.5%,
                             #6f809c 58%,#cdd9ec 78%,#ffffff 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.95)) drop-shadow(0 3px 6px rgba(0,0,0,.8))
         drop-shadow(0 0 20px rgba(61,139,255,.20))}
.ea-l2{color:#dbe5f4;text-shadow:0 1px 0 rgba(0,0,0,.85),0 0 16px rgba(150,190,245,.20)}
.ea-l3{text-shadow:0 1px 0 rgba(0,0,0,.85),0 0 16px rgba(61,139,255,.75)}

.ea-url{
  border-top:1px solid rgba(160,195,240,.26);
  background:linear-gradient(180deg,rgba(61,139,255,.13),rgba(4,8,15,.80));
  box-shadow:inset 0 1px 0 rgba(0,0,0,.9),inset 0 2.5px 5px -3px rgba(0,0,0,.95),
             inset 0 -1px 0 rgba(170,208,255,.20);
  color:#cfdcee}

/* ══ KARTEN DARUNTER (Referenzbild 2) ═════════════════════════
   Dieselbe Materialsprache wie oben - sonst zerfaellt die Seite in
   zwei Welten. Auch hier wurde der box-shadow vom clip-path
   weggeschnitten; darum filter:drop-shadow(). */
.karte-in{
  --rim:6px; --stp:3px;
  filter:
    drop-shadow(0 2px 2px rgba(0,0,0,.65))
    drop-shadow(0 26px 30px rgba(0,0,0,.70))
    drop-shadow(0 0 18px rgba(61,139,255,.16))}
.karte-in::before{
  box-shadow:
    inset 0 0 0 1px rgba(150,190,245,.15),
    inset 0 -6px 8px -5px rgba(0,0,0,.9)}
/* Neon-Oberkante der Karte. */
.karte-in::after{
  left:10%;right:10%;top:calc(var(--rim) + var(--stp) + .5px);height:2.6px;border-radius:2px;
  background:linear-gradient(90deg,transparent,#2f7fff 7%,#5aa6ff 21%,#d6ecff 50%,
                             #5aa6ff 79%,#2f7fff 93%,transparent)}
/* Wabenkoerper der Nummer: eingelassen statt aufgesetzt. */
.karte-num{
  filter:drop-shadow(0 1px 0 rgba(190,220,255,.35)) drop-shadow(0 -1px 0 rgba(0,0,0,.9))
         drop-shadow(0 0 14px rgba(61,139,255,.5));
  color:#eaf3ff}

/* ══ TABLET ═══════════════════════════════════════════════════ */
@media (max-width:1000px){
  .ea-mod-in{--rim:4px;--stp:2.5px;--fase:14px;--fusz:9px;--refl:.32}
  .ea-mod::before{left:-12px;right:-12px;top:-14px}
  .ea-ikon{width:44px;height:44px;padding:6px;margin:11px auto 0}
}

/* ══ HANDY ════════════════════════════════════════════════════ */
@media (max-width:820px){
  .ea-mod-in{--rim:3px;--stp:2px;--fusz:8px;--refl:.24;--refla:112deg}
  .karte-in{--rim:4px;--stp:2.5px}
  .karte-in::before{clip-path:polygon(19px 0,calc(100% - 19px) 0,100% 19px,100% calc(100% - 19px),calc(100% - 19px) 100%,19px 100%,0 calc(100% - 19px),0 19px)}
  
  
  .ea-mod::before{left:-10px;right:-10px;top:-10px;bottom:-2px}
  .ea-mod::after{opacity:.7}
  
  /* Die harte Chrom-Horizontlinie sauft bei kleiner Schrift ab. */
  .ea-l1{background:linear-gradient(180deg,#ffffff 0%,#dde6f5 32%,#a6b6cf 60%,#f0f5fd 100%);
    -webkit-background-clip:text;background-clip:text}
  .ea-ikon{padding:5px;border-radius:10px}
}

/* ══ REDUZIERTE BEWEGUNG ══════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  .ea-mod-in::after{animation:none !important}
}

/* ── Variante v3l ─────────────────────────────────────────── */
/* Aus v3 uebernommen: Lichtdom ueber der Buehne, dickerer Chromrand
   der Platte, kraeftigere Waben. NICHT uebernommen: v3s Plattform-
   geometrie (sie verdeckt die Oberseite, auf der die Panels stehen)
   und v3s Lockup (dort war "Felix Rohlfing" kaum noch lesbar).
   Alles an .dash-welt gehoert u1 - geteilte Pseudo-Ebenen fuehren
   sonst zu einem Ergebnis, das von der Reihenfolge abhaengt. */

.ea-hero::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  left:50%;top:-34%;transform:translateX(-50%);
  width:min(1760px,146%);height:132%;
  background:
    radial-gradient(42% 46% at 50% 22%,rgba(170,210,255,.20),rgba(105,165,255,.07) 44%,transparent 72%),
    radial-gradient(70% 40% at 50% 62%,rgba(120,175,255,.10),transparent 70%);
  filter:blur(26px)}
/* Seitliche Abdunklung: Mitte hell, Raender tief. */

.ea-plate-kante{
  top:calc(var(--deck) - 3px);
  background:linear-gradient(158deg,#ffffff 0%,#dae4f6 7%,#7b8daa 19%,#ffffff 30%,
             #4a5871 44%,#222d43 52%,#6b7d9b 62%,#f6f9ff 74%,#8496b4 86%,#e4ecfa 94%,#ffffff 100%);
  filter:drop-shadow(0 28px 48px rgba(0,0,0,.88)) drop-shadow(0 12px 34px rgba(61,139,255,.34))}

.ea-hex{background-image:var(--v3-hex);background-size:44px 25.4px;opacity:.5;
  -webkit-mask-image:radial-gradient(150% 190% at 50% 34%,#000 68%,rgba(0,0,0,.7) 100%);
  mask-image:radial-gradient(150% 190% at 50% 34%,#000 68%,rgba(0,0,0,.7) 100%)}

/* ── Variante fix ─────────────────────────────────────────── */
/* fix — Korrekturschicht NACH v1, v2 und dem Licht aus v3.
   Alles hier steht, weil ich es auf den Screenshots der Einzelentwuerfe
   gesehen habe, nicht weil es theoretisch besser waere. */

/* 1) v1 dreht die aeusseren Panels 38 Grad und verkleinert sie auf .82.
      Der Bogen liest dadurch hervorragend - aber "Session Data" und
      "Trade Management" sind kaum noch zu entziffern. Text, den man
      schraeg nicht mehr lesen kann, ist kein Effekt, sondern ein Mangel.
      Die perspective()-Funktion IM transform bleibt (das war v1s Fund:
      am Elternteil erreicht sie den Enkel .ea-mod gar nicht). */
.ea-mod:nth-child(1){--tf:perspective(880px) translateY(30px) rotateY(26deg)  scale(.885)}
.ea-mod:nth-child(6){--tf:perspective(880px) translateY(30px) rotateY(-26deg) scale(.885)}
.ea-mod:nth-child(2){--tf:perspective(980px) translateY(11px) rotateY(13deg)  scale(.962)}
.ea-mod:nth-child(5){--tf:perspective(980px) translateY(11px) rotateY(-13deg) scale(.962)}
.ea-mod:nth-child(3){--tf:perspective(1150px) rotateY(4deg)  scale(1)}
.ea-mod:nth-child(4){--tf:perspective(1150px) rotateY(-4deg) scale(1)}

/* Der Tiefenschleier auf den aeusseren Panels frisst zusaetzlich Kontrast.
   Die Schrift dort bekommt ihn zurueck. */
.ea-mod:nth-child(1) .ea-mod-l li,.ea-mod:nth-child(6) .ea-mod-l li,
.ea-mod:nth-child(2) .ea-mod-l li,.ea-mod:nth-child(5) .ea-mod-l li{color:#c6d4ea}
.ea-mod .ea-mod-t{color:#fff}

/* 2) v2 setzt die Nummer in eine dunkle Vertiefung mit Chromring. Die
      Fassung ist richtig, aber die Ziffer selbst verschwindet darin -
      und 1..6 ist die Lesereihenfolge der ganzen Grafik. */
.ea-num{
  color:#fff;font-weight:800;
  text-shadow:0 0 13px rgba(125,190,255,.95),0 0 4px rgba(0,0,0,.95),0 1px 0 rgba(0,0,0,.9);
  background:
    linear-gradient(180deg,rgba(140,190,255,.24),transparent 54%),
    radial-gradient(circle at 50% 122%,rgba(61,139,255,.52),transparent 62%),
    linear-gradient(180deg,#101a2c,#080e19)}

/* 3) v3s Waben und Chromrand sind kraeftiger als v1s - aber v3 setzt sie
      auf seine eigene, breitere Plattform. Auf v1s Platte sitzt der Rand
      dadurch zu weit aussen. Zurechtruecken. */
.ea-plate-kante{left:-3px;right:-3px;bottom:-3px}

/* 4) Gemessen: die Aufzaehlung der aeusseren Panels kommt durch scale(.885)
      effektiv mit 10,2 px auf dem Schirm an, die mittleren mit 11,8. Das ist
      Kleingedrucktes, nicht der erste Eindruck einer Premium-Seite.
      Grundgroesse so anheben, dass aussen rund 11 px ankommen. */
@media (min-width:1001px){
  .ea-mod-l li{font-size:12.6px;line-height:1.4}
  .ea-mod-t{font-size:13.5px}
}

/* ── Variante m1 ──────────────────────────────────────────── */
/* ══════════════════════════════════════════════════════════════
   m1 — MOBILE KOMPOSITION: "Bogen bleibt"
   NUR Regeln in @media (max-width:820px) und darunter.
   Desktop, Laptop und Tablet (834px) bleiben unberuehrt.
   ══════════════════════════════════════════════════════════════ */

@media (max-width:820px){

  /* ── Kopf enger: Bogen UND Platte sollen aufs erste Bild ───── */
  .ea-hero{padding:88px 0 14px}
  .ea-hero .wrap{padding:0 10px}
  .ea-kopf{text-align:center;margin-bottom:13px}
  .ea-eyebrow{font-size:9px;letter-spacing:.26em;margin-bottom:7px}
  .ea-h1{font-size:clamp(1.3rem,6vw,1.7rem);line-height:1.12}
  .ea-sub{font-size:12.5px;margin-top:7px}

  /* ── Buehne: dieselbe 3D-Sprache wie Desktop, nur kompakter ── */
  .ea-buehne{perspective:660px;perspective-origin:50% 48%}
  .ea-bogen{position:relative;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:26px 8px;align-items:stretch;padding:0}

  /* Bodenlicht unter der Bogenwand */
  .ea-bogen::after{content:"";position:absolute;left:-8%;right:-8%;bottom:-10px;
    height:34px;pointer-events:none;z-index:0;
    background:radial-gradient(56% 100% at 50% 0,rgba(61,139,255,.22),transparent 72%)}

  /* Der Bogen: aussen gedreht und deutlich zurueckgesetzt.
     Lage steht in --tf (nie in transform), sonst frisst sie :hover.
     !important, weil die Grundregel dort --tf:none !important setzt. */
  .ea-mod{position:relative;transform-origin:50% 100%}
  /* translateX steht VORN und faengt genau das ab, was translateZ
     hinter einer Drehung anrichtet: es schiebt die Karte sonst um
     z*sin(Winkel) nach aussen - bei 390px faellt sie aus dem Bild. */
  .ea-mod:nth-child(1),.ea-mod:nth-child(4){
    --tf:translateX(22px) rotateY(26deg) translateZ(-56px) translateY(12px) !important}
  .ea-mod:nth-child(2),.ea-mod:nth-child(5){
    --tf:translateZ(14px) translateY(-2px) !important}
  .ea-mod:nth-child(3),.ea-mod:nth-child(6){
    --tf:translateX(-22px) rotateY(-26deg) translateZ(-56px) translateY(12px) !important}

  /* Aussenkarten stehen hinten: Luft davor nimmt Licht und Farbe */
  .ea-mod:nth-child(1) .ea-mod-in,.ea-mod:nth-child(4) .ea-mod-in,
  .ea-mod:nth-child(3) .ea-mod-in,.ea-mod:nth-child(6) .ea-mod-in{
    filter:brightness(.9) saturate(.94)
           drop-shadow(0 10px 12px rgba(0,0,0,.82))
           drop-shadow(0 0 9px rgba(76,146,255,.26))}

  /* Schlagschatten auf dem Boden - macht die Staffelung sichtbar */
  .ea-mod::after{content:"";position:absolute;left:6%;right:6%;bottom:-13px;
    height:14px;border-radius:50%;pointer-events:none;z-index:0;
    background:radial-gradient(closest-side,rgba(2,5,11,.92),rgba(2,5,11,.4) 60%,transparent 80%)}

  /* Glanzstreifen auf dem Glas - liegt UEBER dem Inhalt, eigene
     Ebene, damit Rahmen und Text davon unberuehrt bleiben. */
  .ea-mod::before{content:"";position:absolute;z-index:3;pointer-events:none;
    inset:3px;
    clip-path:polygon(9px 0,calc(100% - 9px) 0,100% 9px,100% calc(100% - 5px),
                      calc(100% - 5px) 100%,5px 100%,0 calc(100% - 5px),0 9px);
    background:linear-gradient(112deg,
      transparent 14%,rgba(196,222,255,.17) 30%,rgba(255,255,255,.09) 37%,
      transparent 49%,transparent 100%)}
  /* Das Licht faellt von vorn-oben: jede Saeule des Bogens faengt
     es an einer anderen Stelle - sonst wirken alle drei gleich. */
  .ea-mod:nth-child(1)::before,.ea-mod:nth-child(4)::before{
    background:linear-gradient(104deg,transparent 30%,rgba(196,222,255,.20) 52%,
      rgba(255,255,255,.10) 60%,transparent 74%)}
  .ea-mod:nth-child(3)::before,.ea-mod:nth-child(6)::before{
    background:linear-gradient(-104deg,transparent 30%,rgba(196,222,255,.20) 52%,
      rgba(255,255,255,.10) 60%,transparent 74%)}

  /* Einblendung darf den Bogen NICHT flachlegen */
  html.js .ea-mod{opacity:0;transform:var(--tf) translateY(18px);
    transition:opacity .5s var(--ease),transform .5s var(--ease)}
  html.js .ea-mod.an{opacity:1;transform:var(--tf)}

  /* ── Karte: hochformatig, Chromrahmen mit Hell-Dunkel-Kante ── */
  .ea-mod-in{display:flex;flex-direction:column;align-items:stretch;
    grid-template-areas:none;grid-template-columns:none;
    min-height:clamp(190px,49vw,296px);padding:0;--fase:11px;
    background:linear-gradient(163deg,
      #ffffff 0%,#d7e2f3 7%,#7e8fab 17%,#f0f5fc 26%,#4c5b74 40%,
      #222c3f 54%,#63748f 66%,#eaf0f9 78%,#8496b2 88%,#ffffff 100%);
    /* box-shadow bringt hier NICHTS: clip-path schneidet den
       Schatten mit weg. Nur drop-shadow folgt der Fase - und macht
       den Bogen erst plastisch. */
    box-shadow:0 0 0 1px rgba(5,9,17,.92);
    filter:drop-shadow(0 12px 14px rgba(0,0,0,.8))
           drop-shadow(0 0 10px rgba(76,146,255,.34))}
  .ea-mod-in::before{inset:3.5px;
    clip-path:polygon(8.5px 0,calc(100% - 8.5px) 0,100% 8.5px,100% calc(100% - 4.5px),
                      calc(100% - 4.5px) 100%,4.5px 100%,0 calc(100% - 4.5px),0 8.5px);
    background:
      linear-gradient(180deg,rgba(120,180,255,.34),rgba(61,139,255,.06) 26%,transparent 46%),
      linear-gradient(90deg,rgba(61,139,255,.34),transparent 11%,transparent 89%,rgba(61,139,255,.34)),
      linear-gradient(178deg,rgba(24,38,64,.95),rgba(8,13,24,.985))}
  .ea-mod-in::after{left:12%;right:12%;top:3.5px;height:2.5px;
    background:linear-gradient(90deg,transparent,#8fc0ff 18%,#ffffff 50%,#8fc0ff 82%,transparent);
    box-shadow:0 0 18px 5px rgba(61,139,255,.7)}

  .ea-num{margin:clamp(11px,2.8vw,18px) auto 0;
    width:clamp(25px,6.6vw,34px);height:clamp(25px,6.6vw,34px);
    font-size:clamp(11px,2.9vw,15px);
    border-color:rgba(170,200,240,.55)}
  .ea-mod-t{margin:8px 4px 0;text-align:center;font-size:clamp(9px,2.35vw,13px);
    letter-spacing:.08em;line-height:1.2;min-height:2.4em}
  .ea-ikon{margin:clamp(9px,2.4vw,16px) auto 1px;
    width:clamp(27px,7.2vw,44px);height:clamp(27px,7.2vw,44px);stroke-width:1.6}
  .ea-mod-l{position:relative;grid-area:auto;margin:auto 0 0;
    padding:clamp(10px,2.6vw,15px) clamp(5px,1.8vw,13px) clamp(11px,3vw,17px);
    grid-template-columns:minmax(0,1fr);gap:3px}
  .ea-mod-l::before{content:"";position:absolute;left:20%;right:20%;top:0;height:1px;
    background:linear-gradient(90deg,transparent,rgba(130,180,255,.5),transparent)}
  .ea-mod-l li{font-size:clamp(9px,2.15vw,12px);line-height:1.28;
    padding-left:clamp(8px,2.2vw,13px);letter-spacing:0;color:#c2d0e6}
  .ea-mod-l li::before{left:1px;top:.44em;width:3px;height:3px}

  /* ── Plattform: massiv, mit sichtbarer Oberseite ───────────── */
  .ea-platte{max-width:100%;margin-top:22px;padding-top:21px}
  /* Perspektivische Oberseite - man schaut leicht von oben drauf */
  .ea-platte::before{content:"";position:absolute;left:5%;right:5%;top:0;height:21px;
    pointer-events:none;z-index:0;
    clip-path:polygon(9% 0,91% 0,100% 100%,0 100%);
    background:linear-gradient(180deg,rgba(176,203,244,.42),rgba(74,98,138,.34) 30%,
      rgba(24,40,68,.86) 66%,rgba(9,16,30,.96));
    box-shadow:0 -1.5px 0 rgba(214,231,255,.6) inset,
               0 5px 16px -9px rgba(61,139,255,.45)}
  .ea-plate-kante,.ea-plate{--fase:22px}
  .ea-plate-kante{left:-3px;right:-3px;bottom:-3px;
    background:linear-gradient(152deg,#f7faff,#8ba0bd 22%,#28344a 50%,#9db0ca 74%,#f7faff)}
  .ea-plate::before{content:"";position:absolute;left:0;right:0;top:0;height:1.5px;
    z-index:2;pointer-events:none;
    background:linear-gradient(90deg,transparent,rgba(150,200,255,.85) 25%,#eaf3ff 50%,rgba(150,200,255,.85) 75%,transparent)}
  .ea-sockel{width:130%;height:156%;top:-8%}

  .ea-lockup{gap:10px;padding:17px 12px 13px}
  .ea-emblem{width:46px}
  .ea-l1{font-size:clamp(1.55rem,9.6vw,2.4rem)}
  .ea-l2{font-size:clamp(.68rem,3.6vw,.98rem);letter-spacing:.22em;text-indent:.22em}
  .ea-l3{font-size:clamp(.6rem,2.9vw,.82rem);letter-spacing:.26em;text-indent:.26em}
  .ea-url{padding:12px;font-size:10px;letter-spacing:.14em}
  .ea-globus{width:14px;height:14px}

  /* Die tote Zone zwischen Platte und naechstem Abschnitt raus */
  /* Auf dem dunklen Chart war der Hinweis praktisch unsichtbar */
  .ea-scroll{margin-top:14px;min-height:44px;justify-content:center;
    color:rgba(178,198,226,.9);font-size:9.5px;letter-spacing:.3em}
  .ea-scroll svg{stroke-width:1.7;filter:drop-shadow(0 0 8px rgba(61,139,255,.5))}
  .fokus{padding-top:24px}

  /* Der Boden soll unter der Platte hervorleuchten - sonst schwebt sie */
  .ea-ring{border-width:1.6px}
  .ea-ring-1{width:106%;height:82%;border-color:rgba(120,180,255,.62);
    box-shadow:0 0 32px rgba(61,139,255,.55),inset 0 0 40px rgba(61,139,255,.26)}
  .ea-ring-2{width:90%;height:68%;border-color:rgba(206,230,255,.85);
    box-shadow:0 0 36px rgba(130,185,255,.58),inset 0 0 30px rgba(120,180,255,.26)}
  .ea-ring-3{width:72%;height:52%;border-color:rgba(61,139,255,.5)}

  /* Untere Reihe steht tiefer im Licht: minimal weniger Oberlicht.
     Zu viel davon zerreisst die Wand - darum nur ein Hauch. */
  .ea-mod:nth-child(4) .ea-mod-in::after,
  .ea-mod:nth-child(5) .ea-mod-in::after,
  .ea-mod:nth-child(6) .ea-mod-in::after{opacity:.82}


  /* ── Grosses Handy / kleines Tablet (561-820px) ──────────────
     Dieselbe Komposition, nur ist die Karte hier viel breiter:
     flacherer Winkel, groessere Tiefe, ruhigere Perspektive. */
  @media (min-width:561px){
    .ea-hero .wrap{padding:0 18px}
    .ea-buehne{perspective:1000px;perspective-origin:50% 46%}
    .ea-bogen{gap:34px 16px}
    .ea-mod:nth-child(1),.ea-mod:nth-child(4){
      --tf:translateX(30px) rotateY(19deg) translateZ(-84px) translateY(18px) !important}
    .ea-mod:nth-child(2),.ea-mod:nth-child(5){
      --tf:translateZ(18px) translateY(-4px) !important}
    .ea-mod:nth-child(3),.ea-mod:nth-child(6){
      --tf:translateX(-30px) rotateY(-19deg) translateZ(-84px) translateY(18px) !important}
    .ea-mod-in{--fase:15px}
    .ea-mod::after{bottom:-18px;height:18px}
    .ea-platte{margin-top:34px;padding-top:28px;max-width:min(640px,96%)}
    .ea-platte::before{height:28px}
    .ea-lockup{gap:16px;padding:22px 20px 16px}
    .ea-emblem{width:60px}
    .ea-sub{max-width:46ch;margin-left:auto;margin-right:auto}
  }

  /* Reduzierte Bewegung: Bogen bleibt stehen, nichts versteckt */
  @media (prefers-reduced-motion:reduce){
    html.js .ea-mod{opacity:1 !important;transform:var(--tf) !important}
  }
}

/* ── Sehr schmal (390 px und weniger) ───────────────────────── */
@media (max-width:560px){
  .ea-mod-l{grid-template-columns:minmax(0,1fr)}
  .ea-lockup{padding:15px 9px 12px}
  .ea-emblem{width:42px}
}

/* ── Variante u1 ──────────────────────────────────────────── */
/* ══════════════════════════════════════════════════════════════
   u1 — SCROLL-UEBERGANG UND HINTERGRUNDWELT
   Ziel: nicht "oben Bereich A / unten Bereich B", sondern EINE
   Umgebung, durch die man faehrt.

   Beruehrt NUR:  .dash-welt · .dash-canvas · .dash-karte ·
                  .dash-glow · .dash-korn · .ea-hero (Uebergang) ·
                  .ea-scroll · .fokus · .reveal-tief
   Kein .ea-mod, kein .ea-plate - damit sich der Entwurf mit jedem
   anderen zusammenlegen laesst.

   Es werden KEINE Elemente eingefuegt: die vorhandene, bisher
   ungenutzte Ebene .dash-karte wird zum Bodenlicht der Naht,
   .dash-welt::before zur durchlaufenden Lichtlinie.
   ══════════════════════════════════════════════════════════════ */

:root{
  --u1-welt:1;      /* Staerke der ganzen Hintergrundwelt             */
  --u1-glow:1;      /* Staerke des grossen Lichtbogens                */
  --u1-veil:0;      /* Abdunklung, die den Hero zuruecktreten laesst  */
  --u1-blur:0px;    /* Tiefenunschaerfe-Andeutung, in Stufen          */
  --u1-tiefe:0;     /* Schein, aus dem der naechste Bereich steigt    */
  --u1-naht:140vh;  /* Hero-Unterkante in Bildkoordinaten             */
  --u1-naht-o:0;    /* Sichtbarkeit des Bodenlichts an der Naht       */
  --u1-drift:0px;   /* langsame Eigenbewegung des Lichtbogens         */
}

/* ── 1. Die Welt lebt weiter, sie wird nur schwaecher ──────────
   Vorher war das ein harter Sprung: app.js schaltet bei 55 %
   .tief und die Deckkraft fiel in einem Satz von 1 auf 0.30.
   Jetzt lesen BEIDE Zustaende dieselbe Laufvariable - der Schalter
   bleibt harmlos, die Abschwaechung laeuft stufenlos mit. */
.dash-welt{opacity:var(--u1-welt,1);transition:opacity .2s linear}
.dash-welt.tief{opacity:var(--u1-welt,.56)}
.dash-welt.tief .dash-glow{opacity:var(--u1-glow,.5)}

/* Der Lichtbogen driftet beim Scrollen langsamer als die Seite.
   Das ist der eigentliche Tiefenhinweis: was weit weg ist, wandert
   weniger. */
.dash-glow{
  transform:translate3d(-50%,var(--u1-drift,0px),0);
  transition:opacity .2s linear;
  will-change:transform}

/* Der Bodennebel darf die Welt nicht zuklappen. Vorher: 34vh und
   bei 92 % schon volles --bg, also ein sauberer Deckel unter dem
   Hero. Jetzt laenger und laenger durchsichtig - das Raster
   verliert sich, statt abgeschnitten zu werden. */
.dash-welt::after{
  height:64vh;
  background:linear-gradient(to bottom,
    rgba(7,11,20,0) 0%,rgba(7,11,20,.14) 34%,
    rgba(7,11,20,.36) 62%,rgba(7,11,20,.58) 84%,rgba(7,11,20,.70) 100%)}

/* Feines Korn bekommt eine Vignette dazu: die Raender sacken ab,
   die Mitte bleibt offen. Kostet nichts und nimmt der Flaeche das
   Tapetenhafte. */
.dash-korn{
  background-image:
    radial-gradient(rgba(255,255,255,.055) 1px,transparent 1px),
    radial-gradient(120% 90% at 50% 42%,transparent 44%,rgba(4,7,14,.55) 100%);
  background-size:3px 3px,100% 100%}

/* ── 2. Das Bodenlicht an der Naht ─────────────────────────────
   .dash-karte stand als leere Ebene im HTML und war ungenutzt.
   Sie wird jetzt zu dem Licht, auf dem die Plattform steht und
   aus dem der naechste Bereich heraufkommt. Sie haengt an der
   Hero-Unterkante und wandert mit ihr durchs Bild - dadurch gibt
   es keine Kante zwischen den Abschnitten, sondern einen Ort. */
.dash-karte{
  position:absolute;left:50%;top:0;
  width:200vw;max-width:2600px;height:70vh;margin-top:-35vh;
  pointer-events:none;
  transform:translate3d(-50%,var(--u1-naht,140vh),0);
  opacity:var(--u1-naht-o,0);
  background:
    radial-gradient(58% 44% at 50% 50%,rgba(61,139,255,.26),rgba(61,139,255,.07) 44%,transparent 72%);
  will-change:transform,opacity}
/* Der harte Kern des Bodenlichts - eine flache, breite Lichtpfuetze,
   nicht ein Strich. Ein Strich waere genau die Trennkante, die hier
   verschwinden soll. */
.dash-karte::before{
  content:"";position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);
  width:min(1400px,82vw);height:22vh;
  background:radial-gradient(50% 50% at 50% 50%,rgba(140,192,255,.30),rgba(90,160,255,.10) 42%,transparent 70%)}

/* ── 3. Die Lichtlinie beim Uebertritt ─────────────────────────
   Laeuft EINMAL durch das Raster, wenn man den Hero verlaesst -
   und ist wieder scharf, sobald man weit genug zurueckgescrollt
   ist. Nur transform und opacity, also reine Compositor-Arbeit,
   endliche Dauer, keine Dauerschleife.

   Es ist keine nackte Linie, sondern eine LICHTFRONT: unten die
   scharfe helle Kante, darueber ein nachziehender Schweif. Erst
   dadurch sieht man, dass sie durch das Raster faehrt, statt es
   nur zu ueberqueren. Die z-Ebene 2 hebt sie ueber das Canvas -
   sonst zeichnet das Raster darueber. */
.dash-welt::before{
  content:"";position:absolute;left:-6%;right:-6%;top:0;height:260px;z-index:2;
  pointer-events:none;opacity:0;
  transform:translate3d(0,-30vh,0);
  background:linear-gradient(180deg,
    rgba(61,139,255,0) 0%,rgba(61,139,255,.045) 44%,
    rgba(80,150,255,.15) 76%,rgba(126,180,255,.30) 92%,
    rgba(170,206,255,.52) 97.4%,rgba(206,230,255,.70) 98.8%,
    rgba(150,196,255,.26) 99.6%,rgba(150,196,255,0) 100%);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 20%,#000 80%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 20%,#000 80%,transparent 100%);
  mix-blend-mode:screen}
.dash-welt.u1-blitz::before{animation:u1Strahl 2.1s cubic-bezier(.42,.14,.36,.94) 1}
@keyframes u1Strahl{
  0%{opacity:0;transform:translate3d(0,-30vh,0) scaleY(.55)}
  8%{opacity:1}
  78%{opacity:.9}
  100%{opacity:0;transform:translate3d(0,122vh,0) scaleY(1.3)}
}

/* ── 4. Der Hero tritt zurueck, statt wegzuscrollen ────────────
   Nur Uebergangs-Eigenschaften: ein Tiefenschleier ueber der
   ganzen Buehne. Bewusst KEIN filter am .ea-hero selbst - das
   wuerde jeden preserve-3d-Stapel darin flachlegen. Der Schleier
   ist ein eigenes Pseudo-Element, die Unschaerfe eine
   backdrop-filter darauf. Weil .ea-hero isolation:isolate traegt,
   endet dieser Backdrop am Hero: die Welt dahinter bleibt scharf,
   nur der Hero-Inhalt weicht auf. */
.ea-hero::after{
  content:"";position:absolute;inset:-2px 0 -20vh;z-index:9;
  pointer-events:none;opacity:var(--u1-veil,0);
  background:linear-gradient(180deg,
    rgba(4,7,14,.86) 0%,rgba(5,8,16,.60) 42%,
    rgba(6,10,18,.26) 74%,rgba(7,11,20,0) 100%);
  transition:opacity .16s linear}
html.u1-uebergang .ea-hero::after{
  -webkit-backdrop-filter:blur(var(--u1-blur,0px));
  backdrop-filter:blur(var(--u1-blur,0px))}

/* ── 5. Der Hinweis wird zum Lichtschacht ──────────────────────
   Vorher endete der Hero mit einem Wort und einem Pfeil. Jetzt
   laeuft ein duenner Lichtstrahl von dort nach unten weiter und
   verbindet die beiden Abschnitte optisch. */
.ea-scroll{position:relative;padding-bottom:8px}
.ea-scroll::after{
  content:"";position:absolute;left:50%;top:100%;width:2px;
  height:clamp(80px,15vh,190px);transform:translateX(-50%);
  pointer-events:none;border-radius:2px;
  background:linear-gradient(180deg,rgba(150,200,255,.60),rgba(61,139,255,.22) 42%,rgba(61,139,255,0));
  box-shadow:0 0 14px 2px rgba(61,139,255,.20)}

/* ── 6. Der naechste Bereich kommt aus der Tiefe ───────────────
   perspective am Abschnitt, damit die Karten wirklich von HINTEN
   heraufkommen und nicht von unten hereingeschoben werden. */
.fokus{perspective:1500px;perspective-origin:50% 0%}
.fokus::before{
  content:"";position:absolute;left:50%;top:0;z-index:0;
  transform:translate(-50%,-56%);
  width:min(1700px,124%);height:min(48vh,440px);
  pointer-events:none;opacity:var(--u1-tiefe,0);
  background:radial-gradient(54% 58% at 50% 50%,
    rgba(61,139,255,.17),rgba(61,139,255,.05) 46%,transparent 74%);
  transition:opacity .3s linear}
.fokus>*{position:relative;z-index:1}

/* Aus der Tiefe: weiter weg (negatives Z), leicht nach hinten
   gekippt und unscharf - kommt dann in die Bildebene. Der
   html.js-Schutz bleibt: ohne JavaScript ist alles sichtbar. */
html.js .reveal-tief{
  opacity:0;
  transform:translate3d(0,64px,-300px) rotateX(7deg);
  transform-origin:50% 130%;
  filter:blur(4px) brightness(.6);
  /* Bewusst NICHT var(--ease): die Grundkurve ist so kopflastig, dass
     die Bewegung nach einem knappen Drittel schon vorbei ist - gemessen
     war der Weg nach 330 ms zu 99,97 % abgefahren. Eine Masse, die aus
     der Tiefe kommt, faengt langsam an. */
  transition:opacity 1.05s cubic-bezier(.3,.12,.3,1),
             transform 1.35s cubic-bezier(.36,.05,.2,1),
             filter 1s cubic-bezier(.3,.12,.3,1);
  transition-delay:calc(var(--k,0) * 150ms)}
html.js .reveal-tief.in{
  opacity:1;transform:none;filter:blur(0) brightness(1)}

/* ── 7. Schmale Geraete ────────────────────────────────────────
   Auf dem Handy klafft zwischen Plattform und naechstem Bereich
   eine groessere leere Strecke als am Rechner - der Kerzenchart
   des Canvas liegt dort im oberen Drittel und laesst das untere
   Drittel leer. Das Bodenlicht wird deshalb hoeher und etwas
   kraeftiger, damit die Strecke Raum bleibt und nicht Loch wird. */
@media (max-width:820px){
  .dash-karte{height:88vh;margin-top:-44vh}
  .dash-karte::before{width:88vw;height:26vh;
    background:radial-gradient(50% 50% at 50% 50%,rgba(140,192,255,.34),rgba(90,160,255,.13) 44%,transparent 72%)}
  .ea-scroll::after{height:clamp(56px,9vh,110px)}
}

/* ── 8. Reduzierte Bewegung: gar keine Scroll-Verwandlung ──────
   Keine Lichtlinie, kein Schleier, keine Tiefe - und nichts
   versteckt. */
@media (prefers-reduced-motion:reduce){
  :root{--u1-welt:1;--u1-glow:1;--u1-veil:0;--u1-blur:0px;--u1-tiefe:0;--u1-naht-o:0;--u1-drift:0px}
  .dash-welt,.dash-welt.tief{opacity:1 !important;transition:none !important}
  .dash-welt::before{animation:none !important;opacity:0 !important}
  .dash-karte{opacity:0 !important}
  .ea-hero::after{opacity:0 !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important}
  .fokus::before{opacity:.35 !important}
  html.js .reveal-tief{opacity:1 !important;transform:none !important;
    filter:none !important;transition:none !important}
}

/* ── Variante k1 ──────────────────────────────────────────── */
/* k1 — die drei Karten des Fokus-Bereichs (Referenzbild 2).
   Heute: dunkle Flaeche mit Haarlinie drum. Ziel: gefraestes Bauteil mit
   klarer Fase, umlaufendem Chromumschlag, Neonkante und vertieftem Inneren. */

/* ── Rahmen ───────────────────────────────────────────────────
   KEGELVERLAUF, kein linearer. Ein linearer Verlauf macht zwei Ecken
   hell und zwei dunkel; das Metall bricht aber an JEDER Kante. Der
   Kegelverlauf folgt der Kontur und liefert oben hell, unten dunkel,
   seitlich den Umschlag - genau wie ein gefraester Rand. */
.karte-in{
  --fase:30px;
  padding:3.5px;
  clip-path:polygon(var(--fase) 0,calc(100% - var(--fase)) 0,100% var(--fase),
                    100% calc(100% - var(--fase)),calc(100% - var(--fase)) 100%,
                    var(--fase) 100%,0 calc(100% - var(--fase)),0 var(--fase));
  background:
    conic-gradient(from 210deg at 50% 50%,
      #5c6d88 0deg,  #c8d5e8 24deg, #ffffff 44deg, #eef3fb 62deg,
      #93a4bf 96deg, #4a5872 130deg,#2a3550 160deg,#212b44 190deg,
      #46536e 218deg,#9fb0c8 250deg,#f4f8ff 286deg,#ffffff 302deg,
      #b3c1d7 322deg,#6a7b95 344deg,#5c6d88 360deg);
  box-shadow:
    0 0 0 1px rgba(4,8,16,.95),
    0 36px 78px -40px rgba(0,0,0,.98),
    0 0 58px -14px rgba(61,139,255,.38)}
/* Innenabsatz: schmale dunkle Stufe, damit der Rand Dicke bekommt. */
.karte-in::after{
  content:"";position:absolute;inset:3.5px;z-index:2;pointer-events:none;
  clip-path:polygon(27px 0,calc(100% - 27px) 0,100% 27px,100% calc(100% - 27px),
                    calc(100% - 27px) 100%,27px 100%,0 calc(100% - 27px),0 27px);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.34),
             inset 0 -1.5px 0 rgba(0,0,0,.9),
             inset 0 0 0 1px rgba(6,11,20,.92),
             inset 0 26px 46px -30px rgba(120,180,255,.55)}
/* Glasflaeche: blauer Lichtanfall von oben, nach unten tief. */
.karte-in::before{
  inset:4.5px;
  clip-path:polygon(26px 0,calc(100% - 26px) 0,100% 26px,100% calc(100% - 26px),
                    calc(100% - 26px) 100%,26px 100%,0 calc(100% - 26px),0 26px);
  background:
    linear-gradient(180deg,rgba(125,180,255,.26),rgba(61,139,255,.05) 18%,transparent 38%),
    radial-gradient(130% 62% at 50% -8%,rgba(150,195,255,.20),transparent 64%),
    linear-gradient(177deg,rgba(22,34,58,.97),rgba(8,13,24,.995))}

/* ── Kopfzeile: Nummer als beleuchtetes Bauteil ──────────────── */
.karte-num{
  width:50px;height:50px;flex:0 0 50px;font-size:16px;
  background:linear-gradient(158deg,rgba(120,180,255,.55),rgba(61,139,255,.28) 42%,rgba(8,14,26,.95));
  box-shadow:0 0 26px -4px rgba(61,139,255,.75),inset 0 1px 0 rgba(255,255,255,.35);
  text-shadow:0 0 12px rgba(140,195,255,.9)}
.karte-kopf{padding:26px 28px 14px}
.karte-kopf h3{text-shadow:0 0 22px rgba(61,139,255,.30)}

/* ── Inhalt sitzt in einer Vertiefung ─────────────────────────
   Ohne diese Stufe schwebt der Text auf der Glasflaeche und die Karte
   wirkt wie eine Textbox statt wie ein Geraet. */
.karte-body{
  position:relative;margin:0 22px;padding:16px 16px 18px;border-radius:10px;
  background:linear-gradient(178deg,rgba(6,11,21,.45),rgba(6,11,21,0) 78%);
  box-shadow:inset 0 1px 0 rgba(0,0,0,.6),inset 0 -1px 0 rgba(255,255,255,.05)}
/* Auf schmalen Bildschirmen faellt die Vertiefung weg - dort ist der Rand
   ohnehin knapp und eine zweite Kante frisst nur Platz. */
@media (max-width:820px){
  .karte-body{margin:0 18px;padding:12px 12px 14px;background:none;box-shadow:none}
  .karte-fuss,.marken{margin:0 18px}
  .karte-btn{margin:14px 16px 20px}
  .karte-kopf{padding:20px 20px 12px}
  .karte-num{width:44px;height:44px;flex:0 0 44px;font-size:14px}
  .karte-in{--fase:22px}
  /* Sonst bricht "Trading-Erfahrung ansehen" auf zwei Zeilen um. */
  .karte-btn{letter-spacing:.09em;font-size:11.5px;padding:0 14px}
}

/* ── Bauteile im Inneren ─────────────────────────────────────── */
.belege li{
  background:linear-gradient(178deg,rgba(255,255,255,.075),rgba(255,255,255,.018));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.13),0 6px 14px -10px rgba(0,0,0,.9)}
.marken li{box-shadow:inset 0 1px 0 rgba(255,255,255,.10)}

/* ── Knopf: eigenes Bauteil mit Kante, nicht nur eine Flaeche ── */
.karte-btn{
  margin:16px 22px 24px;min-height:52px;
  background:linear-gradient(180deg,rgba(94,164,255,.34),rgba(61,139,255,.10) 52%,rgba(30,70,140,.20));
  box-shadow:inset 0 1px 0 rgba(190,220,255,.45),inset 0 -1px 0 rgba(0,0,0,.7),
             0 0 24px -10px rgba(61,139,255,.7);
  text-shadow:0 0 14px rgba(120,180,255,.5)}
.karte-btn:hover{
  background:linear-gradient(180deg,rgba(120,185,255,.55),rgba(61,139,255,.22) 52%,rgba(40,90,175,.30));
  box-shadow:inset 0 1px 0 rgba(210,232,255,.6),inset 0 -1px 0 rgba(0,0,0,.7),
             0 0 34px -8px rgba(61,139,255,.85)}
.karte-fuss,.marken{margin:0 22px}

/* ── Zusammenarbeit: derselbe Rahmen, damit der Bereich zusammengehoert ── */
.zusammen-in{
  padding:clamp(24px,3.2vw,38px) clamp(24px,3.6vw,46px);
  box-shadow:0 0 0 3.5px transparent inset,
             0 0 0 1px rgba(4,8,16,.9),
             0 30px 70px -44px rgba(0,0,0,.98),
             0 0 54px -16px rgba(61,139,255,.30),
             inset 0 1.5px 0 rgba(255,255,255,.22),
             inset 0 0 0 2px rgba(150,180,225,.26)}
.zu-ikon{width:66px;height:66px;flex:0 0 66px;
  box-shadow:0 0 28px -4px rgba(61,139,255,.7)}

/* ── Variante fix2 ────────────────────────────────────────── */
/* fix2 — letzte Korrekturen, steht GANZ hinten.
   fix.css liegt vor m1; was m1 fuer schmale Schirme setzt, gewinnt dort
   sonst. Diese Datei muss darum nach allen anderen kommen. */

/* Gemessen bei 360 px: das rechte Emblem ueberdeckt "MQL4 . MQL5" um 14 px,
   bei 390 px um 3 px. Die Symmetrie stimmt exakt (14/14 bzw. 33/33) - zu
   gross ist nur der Schriftzug. */
@media (max-width:560px){
  .ea-l1{font-size:min(8.2vw,2rem)}
  .ea-lockup{gap:clamp(4px,2vw,10px)}
}
@media (max-width:400px){
  .ea-l1{font-size:min(7.6vw,1.85rem)}
}

/* Was beim Laden schon im Bild steht, blendet nicht ein - es IST da.
   app.js setzt dafuer .ohne-blende. Ohne diese Regel liefe trotzdem die
   0,5-Sekunden-Ueberblendung und der Hero waere kurz leer. */
html.js .ea-mod.ohne-blende{transition:none}


/* ══════════════════════════════════════════════════════════════
   NACH DEN REFERENZBILDERN — 28.08.2026
   Felix hat seine zwei Vorlagen erneut geschickt: "so sollte es
   eigentlich aussehen". Inhalt und Anordnung stimmten schon, die
   AUSFUEHRUNG wich ab. Diese Schicht schliesst genau diese Luecken;
   jeder Block nennt die Stelle der Vorlage, die er nachzieht.
   Begruendung Punkt fuer Punkt: _konzept-3d-hero/REFERENZBILDER.md
   Steht bewusst GANZ HINTEN — sie korrigiert alle Vorschichten.
   ══════════════════════════════════════════════════════════════ */

/* ══ HERO — REFERENZBILD 2 ════════════════════════════════════ */

/* ── 1 · Die Buehne ist eine Ellipse, kein Kasten ─────────────
   Vorlage: zwei kraeftige konzentrische Leuchtringe um die
   Plattform, dazu ein Bodenschein. Die Ringe waren da, aber so
   schwach, dass die Platte im Nichts stand. */
.ea-sockel{bottom:-78px;width:146%;height:250px}
.ea-sockel::before{
  top:44%;width:104%;height:190%;
  background:radial-gradient(closest-side,
    rgba(61,139,255,.52),rgba(61,139,255,.18) 52%,transparent 79%)}
.ea-ring{top:44%;border-width:2px}
.ea-ring-1{width:104%;height:200px;
  border-color:rgba(125,190,255,.72);
  box-shadow:0 0 62px rgba(61,139,255,.62),
             inset 0 0 76px rgba(61,139,255,.30)}
.ea-ring-2{width:82%;height:150px;border-width:2.2px;
  border-color:rgba(214,236,255,.92);
  box-shadow:0 0 66px rgba(140,196,255,.70),
             inset 0 0 54px rgba(140,196,255,.32)}
.ea-ring-3{width:58%;height:96px;border-width:1.6px;
  border-color:rgba(61,139,255,.58);
  box-shadow:0 0 34px rgba(61,139,255,.42)}
/* Der Boden wirft die Ringe schwach zurueck — erst dadurch steht
   die Buehne auf etwas, statt zu schweben. */
.ea-sockel::after{
  content:"";position:absolute;left:50%;top:58%;
  width:88%;height:120px;transform:translateX(-50%);
  pointer-events:none;filter:blur(9px);
  background:radial-gradient(60% 100% at 50% 0,
    rgba(124,184,255,.24),transparent 72%)}

/* ── 2 · Neon-Kantenlicht an den senkrechten Raendern ─────────
   Der staerkste Einzeleffekt der Vorlage. Eigene Ebene ueber der
   Fase, damit die Chromkante darunter erhalten bleibt. */
.ea-mod-in{isolation:isolate}
.ea-kante{
  position:absolute;z-index:4;pointer-events:none;
  top:calc(var(--fase) + 2px);bottom:calc(var(--fusz) + 2px);width:2.4px;
  border-radius:3px;
  background:linear-gradient(180deg,
    transparent,rgba(150,205,255,.55) 8%,#9fd0ff 26%,#e8f5ff 50%,
    #9fd0ff 74%,rgba(150,205,255,.55) 92%,transparent);
  box-shadow:0 0 12px rgba(90,175,255,.95),
             0 0 26px rgba(61,139,255,.62),
             0 0 46px rgba(61,139,255,.34)}
.ea-kante-l{left:2px}
.ea-kante-r{right:2px}

/* ── 3 · Die Symbole sind gross und plastisch ─────────────────
   Vorlage: farbige Verlaeufe mit Glanz, die die obere Modulhaelfte
   fuellen — keine duennen einfarbigen Strichsymbole. Die Zeichnung
   steckt in ea-hero.html, hier nur Groesse und Licht. */
.ea-ikon{
  width:clamp(44px,4.4vw,72px);height:clamp(44px,4.4vw,72px);
  margin:clamp(9px,1.3vw,17px) auto 2px;padding:0;
  border:0;background:none;border-radius:0;overflow:visible;
  stroke:none;
  filter:drop-shadow(0 3px 7px rgba(0,0,0,.75))
         drop-shadow(0 0 15px rgba(61,139,255,.5))}

/* Die Nummer sitzt in einem duennen Ring, nicht auf einer
   gefuellten Scheibe. */
.ea-num{
  background:radial-gradient(circle at 50% 34%,
    rgba(20,36,64,.96),rgba(8,14,26,.98));
  border:1.6px solid rgba(170,214,255,.85);
  color:#eaf4ff;
  box-shadow:0 0 16px rgba(61,139,255,.6),
             inset 0 1px 0 rgba(255,255,255,.30),
             inset 0 0 14px rgba(61,139,255,.26)}

/* ══ FOKUS-BEREICH — REFERENZBILD 1 ═══════════════════════════ */

/* ── 4 · Lichtstreifen an der Ueberschrift ────────────────────
   Vorlage: je ein waagerechter Streifen links und rechts, der
   nach aussen auslaeuft, plus eine feine zweite Linie darunter. */
.fokus-h2{position:relative;display:inline-block;padding:0 clamp(10px,2.4vw,28px)}
.fokus-h2::before,.fokus-h2::after{
  content:"";position:absolute;top:50%;pointer-events:none;
  width:clamp(50px,16vw,240px);height:2px;border-radius:2px;
  transform:translateY(-50%);
  background:linear-gradient(90deg,transparent,#3d8bff 38%,#bfe0ff);
  box-shadow:0 0 14px rgba(61,139,255,.75)}
.fokus-h2::before{right:100%}
.fokus-h2::after{left:100%;transform:translateY(-50%) scaleX(-1)}

/* ── 5 · Metallrahmen mit blauen Leuchtpunkten ────────────────
   Das Erkennungsmerkmal der Karten in der Vorlage. Eigene Ebene:
   ein Hintergrundbild auf .karte-in selbst wuerde vom clip-path
   beschnitten (siehe geschuetzte Zeile "clip-path schneidet
   box-shadow mit weg"). */
.karte-leds{position:absolute;inset:0;z-index:3;pointer-events:none}
.karte-leds i{
  position:absolute;width:5px;height:5px;border-radius:50%;
  background:radial-gradient(circle,#fff 18%,#7cc0ff 46%,#2f7fff 72%,transparent);
  box-shadow:0 0 9px rgba(120,190,255,.95),0 0 20px rgba(61,139,255,.68)}
/* Die Werte folgen der Fase (--fase:30px): die Punkte sitzen AUF
   dem Rahmen, nicht daneben. */
.karte-leds i:nth-child(1){left:8px;top:34px}
.karte-leds i:nth-child(2){right:8px;top:34px}
.karte-leds i:nth-child(3){left:8px;bottom:34px}
.karte-leds i:nth-child(4){right:8px;bottom:34px}
.karte-leds i:nth-child(5){left:34px;top:7px}
.karte-leds i:nth-child(6){right:34px;top:7px}
.karte-leds i:nth-child(7){left:34px;bottom:7px}
.karte-leds i:nth-child(8){right:34px;bottom:7px}
.karte-leds i:nth-child(9){left:50%;top:5px;margin-left:-3px;width:6px;height:6px}
.karte-leds i:nth-child(10){left:50%;bottom:5px;margin-left:-3px;width:6px;height:6px}

/* ── 6 · Karte 01: isometrischer Plattenstapel ────────────────
   Vorlage: fuenf beschriftete Platten mit sichtbarer Dicke,
   schraeg in den Raum gelegt. Als SVG gezeichnet — CSS-Transforms
   haetten die Schrift mitgekippt und unlesbar gemacht. */
.stapel-vis{width:100%;height:auto;max-width:272px;justify-self:center;
  filter:drop-shadow(0 14px 26px rgba(0,0,0,.75))}
.stapel-vis text{font-family:inherit;font-weight:700;
  letter-spacing:.02em;fill:#dfeaf9}

/* ── 7 · Karte 02: Abzeichen-Kacheln statt Textzeilen ─────────
   Vorlage: Anbieter-Kacheln nebeneinander mit Status und Haken.
   Es bleiben ALLE VIER echten Belege stehen (2x2) — die Vorlage
   zeigt drei, aber Instant Funding wegzulassen waere Auswahl
   nach Optik. Der Verlaufschart der Vorlage bleibt bewusst weg
   (Invariante 8: er waere erfunden). */
.belege{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px;padding:0 20px}
.belege li{
  /* EINE Spalte. Die fruehere Zeilenform hatte hier drei
     (auto 1fr auto); in der Kachel schob das den Haken nach
     draussen und quetschte den Text daneben. */
  display:grid;grid-template-columns:minmax(0,1fr);
  gap:3px;justify-items:center;text-align:center;
  padding:13px 8px 11px;border-radius:11px;
  background:linear-gradient(168deg,rgba(148,190,246,.15),rgba(255,255,255,.02) 46%,
    rgba(6,12,24,.5));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.20),
             inset 0 0 0 1px rgba(150,190,245,.16),
             0 8px 18px -12px rgba(0,0,0,.95)}
/* Die fruehere Zeilenform stellte firm/was/haken per grid-column in
   DREI Spalten. Die Kachel hat nur eine — ohne dieses Zuruecksetzen
   quillt der Text seitlich aus der Kachel heraus. */
.bl-firm,.bl-was,.bl-ok{grid-column:auto;grid-row:auto}
.bl-firm{font-size:clamp(12px,1.05vw,15px);font-weight:800;letter-spacing:.03em;
  color:#fff;line-height:1.15}
.bl-was{font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--tx-faint);line-height:1.3}
.bl-ok{width:19px;height:19px;margin-top:3px;fill:none;stroke:#5aa6ff;
  stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 0 7px rgba(61,139,255,.75))}

/* ── 8 · Chrom-Kacheln statt Text-Chips ───────────────────────
   Vorlage: die Technik-Reihe unter Karte 03 sind Kacheln mit
   Symbol und Beschriftung, nicht flache Chips. */
.marken{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  gap:7px;margin:0 20px}
.marken li{
  display:grid;place-items:center;gap:3px;
  min-height:44px;padding:8px 3px;border-radius:9px;
  font-size:10.5px;font-weight:700;letter-spacing:.06em;color:#c6d6ee;
  background:linear-gradient(170deg,rgba(160,198,248,.17),rgba(255,255,255,.02) 52%,
    rgba(6,12,24,.46));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),
             inset 0 0 0 1px rgba(150,190,245,.14),
             0 6px 14px -10px rgba(0,0,0,.9)}
.marken svg{width:17px;height:17px;fill:none;stroke:#7fbcff;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
/* Karte 02 traegt vier Merkmale statt fuenf Techniken. */
.karte:nth-child(2) .marken{grid-template-columns:repeat(4,minmax(0,1fr))}

/* ── 9 · Karte 03: Drahtgitter-Kopf ───────────────────────────
   Vorlage: blaues Profil mit Knotenpunkten zwischen den beiden
   Listen. Er traegt die Aussage "Idee wird zu System". */
/* Feste Spurbreite statt "auto": mit width:100% in einer auto-Spur
   rechnet der Browser die SVG-Breite aus sich selbst und der Kopf
   legte sich ueber die Ablaufliste daneben. */
.kopf-vis{width:clamp(92px,8.6vw,128px);height:auto;justify-self:center;align-self:center;
  filter:drop-shadow(0 0 16px rgba(61,139,255,.5))}
.karte:nth-child(3) .karte-body{
  grid-template-columns:minmax(0,1fr) clamp(92px,8.6vw,128px) minmax(0,.62fr);
  gap:8px;align-items:center}

/* ── 10 · Zusammenarbeit als breite Metallleiste ──────────────
   Vorlage: eine Leiste ueber die volle Breite mit abgeschraegten
   Ecken, links das Handschlag-Symbol, rechts der Knopf. */
.zusammen-in{
  --fase:26px;
  clip-path:polygon(var(--fase) 0,calc(100% - var(--fase)) 0,100% 50%,
                    calc(100% - var(--fase)) 100%,var(--fase) 100%,0 50%)}

/* ── 11 · Merkmalsleiste ganz unten ───────────────────────────
   Vorlage: fuenf Symbol-Paare nebeneinander, rechts abgesetzt die
   Wortmarke. Sie schliesst den Bereich ab, statt ihn auslaufen
   zu lassen. */
.leiste{
  margin-top:clamp(18px,2.6vh,34px);
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr)) auto;
  align-items:center;gap:clamp(8px,1.4vw,22px);
  padding:14px clamp(14px,2vw,26px);
  --fase:20px;
  clip-path:polygon(var(--fase) 0,calc(100% - var(--fase)) 0,100% 50%,
                    calc(100% - var(--fase)) 100%,var(--fase) 100%,0 50%);
  background:linear-gradient(180deg,rgba(150,188,244,.19),rgba(10,18,34,.78));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24),
             inset 0 0 0 1px rgba(150,190,245,.20),
             inset 0 -8px 14px -10px rgba(0,0,0,.9),
             0 16px 34px -26px rgba(0,0,0,.95)}
.leiste li{display:flex;align-items:center;gap:10px;min-width:0}
.leiste svg{width:26px;height:26px;flex:0 0 26px;fill:none;stroke:#5aa6ff;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 0 8px rgba(61,139,255,.6))}
.leiste b{display:block;font-size:11.5px;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:#dbe6f6;line-height:1.2}
.leiste i{display:block;font-style:normal;font-size:10px;letter-spacing:.05em;
  color:var(--tx-faint);line-height:1.3}
.leiste-marke{display:flex;align-items:center;gap:10px;padding-left:clamp(8px,1.4vw,20px);
  border-left:1px solid rgba(150,190,245,.16)}
.leiste-marke b{color:#8fa3bd;letter-spacing:.16em}
.leiste-marke i{color:var(--acc);letter-spacing:.2em}

/* ══ SCHMALE SCHIRME ══════════════════════════════════════════ */
@media (max-width:1000px){
  .marken{grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}
  .marken li{font-size:9.5px;padding:7px 2px}
  .marken svg{width:15px;height:15px}
  .leiste{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:12px}
  .leiste-marke{grid-column:1/-1;border-left:0;padding-left:0;
    border-top:1px solid rgba(150,190,245,.16);padding-top:12px;justify-content:center}
}
@media (max-width:820px){
  .karte:nth-child(3) .karte-body{grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:none}
  .kopf-vis{max-width:112px}
}
@media (max-width:560px){
  .ea-sockel{bottom:-40px;height:170px}
  .ea-ring-1{height:132px}
  .ea-ring-2{height:98px}
  .ea-ring-3{height:62px}
  .ea-kante{width:2px}
  .belege{padding:0 14px;gap:7px}
  .bl-firm{font-size:12.5px}
  .bl-was{font-size:9.5px;letter-spacing:.09em}
  .marken{grid-template-columns:repeat(5,minmax(0,1fr));margin:0 14px;gap:4px}
  .marken li{font-size:9px;letter-spacing:.02em;padding:7px 1px}
  .karte:nth-child(3) .karte-body{grid-template-columns:1fr;justify-items:center}
  .kopf-vis{max-width:132px;margin:4px 0}
  .leiste{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 10px;padding:14px}
  .leiste b{font-size:10.5px}
  .leiste svg{width:22px;height:22px;flex:0 0 22px}
  .fokus-h2{padding:0}
  .fokus-h2::before,.fokus-h2::after{display:none}
}

/* ══ REDUZIERTE BEWEGUNG ══════════════════════════════════════
   Die Leuchtpunkte und Kantenlichter sind statisch — sie
   brauchen hier nichts. Nur der Bodenschein wird ruhiger. */
@media (prefers-reduced-motion:reduce){
  .ea-sockel::after{filter:none}
}

/* ── Bauteile des Plattenstapels (Karte 01) ───────────────────
   Deckflaeche dunkel, zwei Seitenflaechen als sichtbare Dicke,
   Vorderkante als Lichtlinie. So liest sich die Platte als
   Koerper und nicht als Rechteck. */
.pl-deck{fill:url(#plDeck)}
.pl-seite{fill:#0c1526}
.pl-seite2{fill:#0a1120}
.pl-kante{fill:none;stroke:#7fbcff;stroke-width:1.6;
  filter:drop-shadow(0 0 5px rgba(61,139,255,.8))}
.stapel-vis text{font-size:13px;letter-spacing:.06em}
.stapel-vis .pl{opacity:.97}

/* ══ PRODUKTIONSREIFE — 28.08.2026 ════════════════════════════
   Gemessene Fehler, keine Geschmacksfragen. Jeder Block nennt den
   Messwert, der ihn ausgeloest hat.
   ══════════════════════════════════════════════════════════════ */

/* Gemessen bei 390 px auf /upwork: der Burger sass bei x=386..430,
   also 40 px AUSSERHALB des Bildes und war nicht antippbar. Ursache
   ist die Textmarke daneben - sie traegt white-space:nowrap und
   schrumpft nicht. Auf der normalen Seite loest .nav-cta span das
   ueber display:none; fuer .nav-upwork fehlte die Entsprechung.
   Der Hinweis geht nicht verloren: .mm-upwork steht im Klappmenue. */
@media (max-width:700px){
  .nav-upwork{display:none}
}

/* Tippziele: gemessen 44x40 (DE/EN), 40x44 (Fussnavigation) und
   132x40 (E-Mail im Fuss). Die 44-px-Regeln standen nur in der
   560-px-Abfrage - auf Desktop und Tablet galten sie nie. Ein
   Tippziel ist auf jedem Geraet ein Tippziel. */
.lang button{min-height:44px;min-width:44px}
.foot-nav a,.foot-meta a{min-height:44px;display:inline-flex;align-items:center}
.foot-nav a{min-width:44px;justify-content:center}


/* ══════════════════════════════════════════════════════════════
   UNTERSEITEN AUF STARTSEITEN-NIVEAU — 28.08.2026
   Befund vor dieser Schicht: die Startseite war Premium, die zehn
   Unterseiten fielen auf flache Textboxen zurueck — genau der
   "generische SaaS-Look", der ausgeschlossen ist. Gemessen:
   zwischen Hero-Unterkante und erstem Abschnitt standen 160 px
   Leere (132 px Hero-Fuss + 104 px Abschnitts-Kopf, minus Fuge);
   /about und /contact hatten ueberhaupt kein Hero-Visual.

   Diese Schicht traegt die Materialsprache der Startseite und der
   Vorlagen (gebuerstetes Metall, Fase, blaue Lichtkante) auf die
   Unterseiten — sie erfindet KEINE neue Gestaltung.
   ══════════════════════════════════════════════════════════════ */

/* ── 1 · Eine Welt ueber ALLE Seiten ──────────────────────────
   Bisher lebte die Hintergrundwelt nur auf der Startseite
   (.dash-welt). Dadurch wirkte jede Unterseite wie eine andere
   Website. Hier dieselbe Idee in ruhig: festes Raster plus ein
   Lichtkegel von oben, damit Kopf und Fuss dieselbe Umgebung
   teilen. position:fixed — sie endet nicht am Hero-Rand. */
html:not([data-seite="start"]) body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(72% 46% at 50% -6%,rgba(61,139,255,.16),transparent 68%),
    radial-gradient(38% 30% at 88% 8%,rgba(61,139,255,.09),transparent 72%),
    linear-gradient(90deg,rgba(120,165,235,.055) 1px,transparent 1px) 0 0/86px 86px,
    linear-gradient(180deg,rgba(120,165,235,.055) 1px,transparent 1px) 0 0/86px 86px;
  mask-image:linear-gradient(180deg,#000 0,#000 42%,transparent 88%);
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 42%,transparent 88%)}
/* Inhalt und Fuss MUESSEN darueber liegen, sonst legt sich das
   Raster ueber die Schrift. */
html:not([data-seite="start"]) main,
html:not([data-seite="start"]) .foot,
html:not([data-seite="start"]) .nav{position:relative;z-index:1}

/* ── 2 · Die tote Zone unter dem Hero ────────────────────────
   Gemessen 160 px Leere. Der Hero endet jetzt dichter, und der
   erste Abschnitt darunter faengt frueher an. Weiter unten bleibt
   der grosse Abstand — dort trennt er wirklich Themen. */
.hero-klein{padding:126px 0 26px}
.hero-ruhig{padding:126px 0 22px}
.hero-fall{padding:118px 0 24px}
.hero-klein+.sec,.hero-ruhig+.sec,.hero-fall+.sec,
.hero-kontakt+.sec{padding-top:44px}
/* Der 220-px-Verlauf unter dem Hero zog die Leere optisch noch
   weiter auf. */
.hero-bg::after{height:120px}

/* ── 3 · Der Hero bekommt einen Boden ────────────────────────
   Vorlage: unter dem Kopfbereich sitzt eine Chromkante mit
   Lichtpunkten. Sie schliesst den Hero ab, statt ihn ausfransen
   zu lassen, und stellt die Verbindung zur Startseite her. */
.hero-klein,.hero-ruhig,.hero-fall{position:relative}
.hero-klein::after,.hero-ruhig::after,.hero-fall::after{
  content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:min(100% - 2*var(--rand,24px),var(--wrap));height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(120,175,255,.5) 18%,
    rgba(200,228,255,.85) 50%,rgba(120,175,255,.5) 82%,transparent);
  box-shadow:0 0 12px rgba(61,139,255,.45)}

/* ── 4 · Das Panel-Material ──────────────────────────────────
   Dieselbe Rezeptur wie .karte-in auf der Startseite: aussen eine
   Fase aus Metall, innen dunkles Glas. Nur kleiner, weil hier
   mehrere nebeneinander stehen.
   drop-shadow statt box-shadow — clip-path schneidet box-shadow
   mit weg (geschuetzte Zeile). */
.mini-card,.stack-item,.cert,.fall-klarstellung,.ab-panel{
  --fase:16px;
  position:relative;padding:2.5px;border:0;border-radius:0;
  clip-path:polygon(var(--fase) 0,calc(100% - var(--fase)) 0,100% var(--fase),
                    100% calc(100% - var(--fase)),calc(100% - var(--fase)) 100%,
                    var(--fase) 100%,0 calc(100% - var(--fase)),0 var(--fase));
  background:
    conic-gradient(from 210deg at 50% 50%,
      #55647d 0deg,#b9c8dd 26deg,#f6f9ff 46deg,#dee7f4 64deg,
      #8496b1 98deg,#45526b 132deg,#26304a 162deg,#1e2740 192deg,
      #414e67 220deg,#94a5be 252deg,#eef4ff 288deg,#ffffff 304deg,
      #a8b7cd 324deg,#63738d 346deg,#55647d 360deg);
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.6))
         drop-shadow(0 18px 26px rgba(0,0,0,.62))
         drop-shadow(0 0 14px rgba(61,139,255,.12))}
/* Innen: das dunkle Glas. Traegt den eigentlichen Inhalt. */
.mini-card::before,.stack-item::before,.cert::before,.fall-klarstellung::before,.ab-panel::before{
  content:"";position:absolute;inset:2.5px;z-index:0;
  clip-path:polygon(calc(var(--fase) - 2px) 0,calc(100% - var(--fase) + 2px) 0,
                    100% calc(var(--fase) - 2px),100% calc(100% - var(--fase) + 2px),
                    calc(100% - var(--fase) + 2px) 100%,calc(var(--fase) - 2px) 100%,
                    0 calc(100% - var(--fase) + 2px),0 calc(var(--fase) - 2px));
  background:linear-gradient(168deg,#16233c 0%,#101a2e 46%,#0a1120 100%);
  box-shadow:inset 0 1px 0 rgba(190,215,250,.22),
             inset 0 -8px 12px -8px rgba(0,0,0,.9)}
.mini-card>*,.stack-item>*,.cert>*,.ab-panel>*{position:relative;z-index:1}
/* Neon-Oberkante — wie bei den Startseiten-Karten. */
.mini-card::after,.stack-item::after,.cert::after,.fall-klarstellung::after,.ab-panel::after{
  content:"";position:absolute;left:14%;right:14%;top:4px;height:2px;z-index:2;
  border-radius:2px;pointer-events:none;
  background:linear-gradient(90deg,transparent,#2f7fff 12%,#a9d4ff 50%,#2f7fff 88%,transparent)}
/* Innenabstand muss neu gesetzt werden — die Fase frisst den alten. */
.mini-card{padding:2.5px}
.mini-card>*{padding-inline:22px}
.mini-card>*:first-of-type{padding-top:24px}
.mini-card>*:last-child{padding-bottom:24px}
.stack-item>*{padding-inline:22px}
.stack-item>*:first-child{padding-top:24px}
.stack-item>*:last-child{padding-bottom:24px}
@media (hover:hover){
  .mini-card:hover,.stack-item:hover,.ab-kern:hover{
    transform:translateY(-4px);
    filter:drop-shadow(0 2px 2px rgba(0,0,0,.6))
           drop-shadow(0 26px 34px rgba(0,0,0,.7))
           drop-shadow(0 0 22px rgba(61,139,255,.30))}
}

/* ── 5 · Leistungen: Rack-Platten statt Trennlinien ──────────
   Sechs identische Bloecke mit nur einer Oberlinie lasen sich als
   eine lange Liste. Jetzt ist jeder Block eine Platte im Rack:
   Chromschiene links, Nummer im Sechseck, Glaskoerper. */
.dienst{
  position:relative;margin:0 0 20px;padding:26px 28px 26px 34px;border-top:0;
  --fase:18px;
  clip-path:polygon(var(--fase) 0,100% 0,100% calc(100% - var(--fase)),
                    calc(100% - var(--fase)) 100%,0 100%,0 var(--fase));
  background:linear-gradient(172deg,rgba(146,186,242,.13),rgba(255,255,255,.015) 40%,
    rgba(7,13,26,.62));
  box-shadow:inset 0 1px 0 rgba(190,215,250,.20),
             inset 0 0 0 1px rgba(150,190,245,.10),
             0 18px 34px -28px rgba(0,0,0,.95)}
/* Die Chromschiene an der linken Kante. */
.dienst::before{
  content:"";position:absolute;left:0;top:var(--fase);bottom:0;width:3px;
  background:linear-gradient(180deg,#eaf2ff,#6f8bb5 34%,#243a5e 70%,#9fb4d2);
  box-shadow:0 0 12px rgba(61,139,255,.5)}
.dienst-kopf{align-items:center;gap:14px;margin-bottom:12px}
.dienst-no{
  display:grid;place-items:center;width:34px;height:38px;flex:0 0 34px;
  clip-path:polygon(50% 0,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%);
  background:linear-gradient(160deg,rgba(120,170,240,.4),rgba(20,34,60,.9));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3);
  font-size:12.5px;color:#dceaff;border:0;top:0}
.dienst-liste li{color:#b9c7dc}

/* ── 6 · Zertifikate: kein Loch mehr in der zweiten Reihe ────
   Fuenf Zertifikate in einem auto-fit-Raster mit drei Spalten
   ergaben 3 + 2 + eine leere Zelle. Feste Spaltenbreite plus
   zentrierte Reihe fuellt die letzte Zeile mittig. */
.certs{grid-template-columns:repeat(auto-fit,minmax(250px,296px));
  justify-content:center;gap:20px}
.cert-btn{background:transparent;border-radius:0}
.cert figcaption{padding:0 20px 20px}

/* ── 7 · Screenshots bekommen einen Rahmen ───────────────────
   Vorher schwebten die Aufnahmen als nackte Rechtecke. Jetzt
   sitzen sie in einer Fassung aus demselben Metall wie alles
   andere — sie wirken als Geraet, nicht als Bilddatei. */
.projekt-bild,.fall-bild{
  position:relative;padding:8px;border-radius:14px;
  background:linear-gradient(168deg,rgba(160,198,248,.22),rgba(255,255,255,.03) 46%,
    rgba(8,14,28,.7));
  box-shadow:inset 0 1px 0 rgba(200,224,255,.3),
             inset 0 0 0 1px rgba(150,190,245,.16),
             0 26px 50px -34px rgba(0,0,0,.98)}
.projekt-bild img,.fall-bild img{border-radius:8px;
  box-shadow:0 0 0 1px rgba(0,0,0,.6)}
/* Die Lichtkante oben — dasselbe Bauteil wie bei den Karten. */
.projekt-bild::after,.fall-bild::after{
  content:"";position:absolute;left:16%;right:16%;top:2px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent,#2f7fff 14%,#a9d4ff 50%,#2f7fff 86%,transparent)}

/* ── 8 · Knoepfe im gleichen Material ────────────────────────
   .btn-glas war eine graue Flaeche mit duennem Rand — sie fiel
   gegen die Startseiten-Knoepfe deutlich ab. */
.btn-glas{
  background:linear-gradient(172deg,rgba(150,190,245,.17),rgba(10,18,34,.72));
  border-color:rgba(150,190,245,.26);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.20),
             0 12px 24px -18px rgba(0,0,0,.95)}
.btn-glas:hover{
  background:linear-gradient(172deg,rgba(160,200,255,.26),rgba(12,22,42,.78));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),
             0 0 24px -6px rgba(61,139,255,.5)}

/* ── 9 · Chips ───────────────────────────────────────────────── */
.chips li{
  background:linear-gradient(170deg,rgba(150,190,245,.15),rgba(10,18,34,.6));
  border:1px solid rgba(150,190,245,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16)}

/* ══ SCHMALE SCHIRME ══════════════════════════════════════════ */
@media (max-width:900px){
  .hero-klein{padding:112px 0 22px}
  .hero-ruhig{padding:112px 0 18px}
  .hero-fall{padding:108px 0 20px}
  .hero-klein+.sec,.hero-ruhig+.sec,.hero-fall+.sec,
  .hero-kontakt+.sec{padding-top:36px}
}
@media (max-width:560px){
  .hero-klein,.hero-ruhig,.hero-fall{padding:88px 0 18px}
  .hero-klein+.sec,.hero-ruhig+.sec,.hero-fall+.sec,
  .hero-kontakt+.sec{padding-top:30px}
  .dienst{padding:22px 20px 22px 26px;margin-bottom:16px}
  .mini-card>*,.stack-item>*{padding-inline:18px}
  .certs{grid-template-columns:minmax(0,1fr)}
}

/* Gemessen auf den drei Fallbeispiel-Seiten: der Brotkrumen-Link
   "Projekte" war 49x22 px — unter dem 44-px-Tippziel. Er ist der
   einzige Rueckweg auf diesen Seiten, also gerade der Link, den
   man auf dem Handy trifft. */
.brotkrumen a{display:inline-flex;align-items:center;min-height:44px}

/* Der Abschluss-Kasten stand auf JEDER Unterseite noch als
   schlichtes Rechteck da, waehrend daneben schon Metall lag. Er
   bekommt dieselbe Fase und dasselbe Material wie die
   Zusammenarbeit-Leiste der Startseite. */
.contact-box{
  --fase:26px;
  border:0;border-radius:0;
  clip-path:polygon(var(--fase) 0,calc(100% - var(--fase)) 0,100% 50%,
                    calc(100% - var(--fase)) 100%,var(--fase) 100%,0 50%);
  background:linear-gradient(178deg,rgba(150,188,244,.16),rgba(9,16,30,.82));
  box-shadow:inset 0 1px 0 rgba(200,224,255,.26),
             inset 0 0 0 1px rgba(150,190,245,.16);
  filter:drop-shadow(0 26px 52px rgba(0,0,0,.85))}

/* Hero-Visual von /about und /contact: gebuerstete Metallscheiben
   zwischen den Klammern aus Felix' Logo, mit Lichtachse. Beide
   Seiten hatten vorher gar kein Visual - die rechte Haelfte des
   Kopfbereichs stand leer und die Seite wirkte unfertig.
   Motiv aus Felix' eigener Lookdev-Vorlage. */
.hv{width:100%;max-width:330px;height:auto;justify-self:end;
  filter:drop-shadow(0 26px 52px rgba(0,0,0,.7))
         drop-shadow(0 0 30px rgba(61,139,255,.22))}
.hv-sch{animation:hvHeb 7.5s ease-in-out infinite}
.hv-sch:nth-of-type(2){animation-delay:.35s}
.hv-sch:nth-of-type(3){animation-delay:.7s}
.hv-sch:nth-of-type(4){animation-delay:1.05s}
.hv-sch:nth-of-type(5){animation-delay:1.4s}
@keyframes hvHeb{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@media (max-width:900px){
  .hv{max-width:240px;justify-self:center;margin-top:4px}
}
@media (prefers-reduced-motion:reduce){
  .hv-sch{animation:none}
}

/* Der Fliesstext auf /about und den Fallbeispielen ist auf 820 px
   Zeilenlaenge begrenzt (gut lesbar), stand aber links im 1180 px
   breiten Rahmen — daneben lag eine leere Bildschirmhaelfte.
   Die 820 px bleiben, wo sie sind: an den KINDERN. Am Rahmen selbst
   haetten sie den bekannten Fehler zurueckgebracht, dass Ueberschrift
   und Text unterschiedlich weit einruecken (geschuetzte Zeile). */
.ab-wrap>*,.fall-wrap>*{margin-inline:auto}

/* Die Karte "Ergaenzend" traegt nur einen Eintrag. Streckten sich
   alle Karten auf dieselbe Hoehe, stand darin ein grosses Loch.
   Jede Karte ist jetzt so hoch wie ihr Inhalt. */
.stack-grid{align-items:start}

/* Fuenf Zertifikate in einem Raster mit drei Spalten liessen in der
   zweiten Reihe eine Zelle leer — die Seite sah unfertig aus.
   Ein Raster kann eine unvollstaendige letzte Reihe nicht zentrieren,
   ein Flex-Container schon. Darum hier Flex statt Grid. */
.certs{display:flex;flex-wrap:wrap;justify-content:center;gap:20px}
.certs>.cert{flex:0 1 296px;min-width:250px}
@media (max-width:560px){
  .certs>.cert{flex:1 1 100%}
}

/* ── Die Wabenstruktur der Plattform ──────────────────────────
   `.ea-hex` benutzte seit dem Hero-Umbau `var(--v3-hex)` — die
   Variable wurde aber NIE gesetzt, in keiner Fassung. Damit fiel
   `background-image` still auf nichts zurueck und die Waben, die
   Referenzbild 2 auf der Platte zeigt, waren nie zu sehen.
   Die alte Pruefung meldete trotzdem "Waben decken 1120x227 von
   1120x227" — sie hat die GROESSE der Ebene gemessen, nicht ob
   darin etwas gezeichnet wird.
   Die Kachel ist so gebaut, dass sie nahtlos aneinander passt. */
:root{
  --v3-hex:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill='none' stroke='%2385bcff' stroke-opacity='0.5' stroke-width='1'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5z'/%3E%3Cpath d='M0 24.25l1 .58v15L0 40.4M28 40.4l-1-.58v-15l1-.57'/%3E%3Cpath d='M14 0l13 7.5-13 7.5L1 7.5 14 0zM14 34l13 7.5L14 49 1 41.5 14 34z'/%3E%3C/g%3E%3C/svg%3E")}
.ea-hex{background-size:34px 59px;background-repeat:repeat;opacity:.42}
@media (max-width:560px){
  .ea-hex{background-size:22px 38px;opacity:.34}
}

/* Gemessen nach dem Uebersetzen: "POSITIONSVERWALTUNG" lief bei
   157 px Modulbreite rechts aus dem Panel heraus und wurde
   abgeschnitten. Ein einzelnes langes Wort bricht von sich aus
   nicht um. Der Titel darf jetzt an jeder Stelle brechen —
   das gilt fuer jede kuenftige Uebersetzung mit, nicht nur fuer
   dieses eine Wort. */
.ea-mod-t{overflow-wrap:anywhere;hyphens:auto}

/* ── Kontrast: gemessen, nicht geschaetzt ─────────────────────
   `--tx-faint` war #66738b. Auf dem Seitengrund #070b14 ergibt das
   gemessene 4,11:1 — WCAG AA verlangt 4,5:1 fuer Text unter 18,7 px.
   Betroffen war genau die kleine Schrift: die Statuszeilen der
   Beleg-Kacheln (11 px), "Weiter scrollen" (10 px), die
   Kartenfuesse (12 px), die Brotkrumen und die ganze Fussnavigation
   (14 px). Der neue Wert misst 4,77:1 und bleibt trotzdem deutlich
   zurueckgenommen — die Abstufung zu --tx-dim bleibt erhalten. */
:root{--tx-faint:#737f95}

/* ── Kontrast, zweite Runde: am gerenderten Bild gemessen ─────
   Gemessen wird jetzt der Untergrund aus den echten Pixeln und die
   Schriftfarbe aus dem CSS (_pruef/zugaenglich.js). Damit kamen
   vier Stellen heraus, die vorher keine Pruefung gefunden hatte,
   weil sie auf HELLEN Ebenen sitzen, nicht auf dem dunklen Grund. */

/* 1) Die blaue Unterzeile der Fokus-Karten (12,5 px) sass mit
      #3d8bff auf dem aufgehellten Kartenkopf: gemessen 2,98:1.
      Der Akzentton der Marke bleibt, aber hier in der helleren
      Stufe — auf dunklem Grund waere er zu grell, auf diesem
      hellblauen Kopf ist er genau richtig. */
.karte-sub{color:#a8cfff}

/* 2) "Weiter scrollen" (10 px) liegt ueber dem Leuchtsockel der
      Plattform — der hellste Punkt der ganzen Seite. Gemessen
      2,33:1. Weiss plus dunkler Saum, damit es auf hellem UND
      dunklem Untergrund traegt. */
.ea-scroll{color:#eaf3ff;text-shadow:0 1px 3px rgba(0,0,0,.9)}

/* 3) Die nicht gewaehlte Sprache ("EN") sitzt auf der aufgehellten
      Umschalt-Kapsel, nicht auf dem Seitengrund: gemessen 3,94:1.
      Sie soll zurueckhaltend bleiben, aber lesbar sein. */
.lang button{color:#a4b0c6}

/* 4) Fliesstext auf den Metallplatten (/contact, /about) lag bei
      4,36:1 — die Platte ist heller als der Seitengrund, deshalb
      reicht --tx-faint dort nicht. */
.mini-card p,.stack-item p,.cert figcaption .cert-what{color:#9aa8bf}

/* ── Kontrast, dritte Runde ───────────────────────────────────
   Die Messung laeuft jetzt zweigeteilt (mitscrollender Inhalt am
   Ganzseitenbild, fixierte Navigation am Sichtfenster). Damit
   blieben genau die Stellen uebrig, an denen der Akzentton oder
   die zurueckgenommene Schrift auf einer AUFGEHELLTEN Flaeche
   sitzt — dort reicht beides nicht.

   Neu ist die Trennung: --acc ist die Farbe fuer FLAECHEN
   (Knoepfe, Linien, Leuchten), --acc-text die fuer SCHRIFT auf
   dunklem Grund. Derselbe Markenton, nur eine Stufe heller.
   Ohne diese Trennung muesste man --acc anheben — und damit
   waeren alle Knopfflaechen zu grell. */
:root{
  --acc-text:#7db4ff;
  --tx-faint:#838fa6}

/* Akzentschrift auf dunklen Platten (gemessen 3,60–4,11:1). */
.ea-l3,.ea-l1 i,.nav-upwork,.mm-upwork,.kicker,.fokus-kicker,.zu-kicker{color:var(--acc-text)}

/* Der Punkt zwischen MQL4 und MQL5 ist 46 px gross und braucht
   darum nur 3:1 — gemessen waren es 2,64:1. */
.ea-l1 i{color:#8ec2ff}

/* Die E-Mail-Schaltflaeche lag bei 4,49:1 und damit um 0,01 unter
   der Schwelle. Dunklere Schrift statt hellerer Flaeche: der
   Knopf soll seine Signalwirkung behalten. */
.btn-mail{color:#000913}

/* Letzte zwei Messbefunde:
   - .upwork-badge stand mit dem Flaechen-Blau auf einer
     aufgehellten Kapsel (4,12:1). Der Leuchtpunkt davor bleibt im
     kraeftigen Ton — er ist eine Flaeche, kein Text.
   - "Projekt starten" ist derselbe Knopf-Fall wie die E-Mail. */
.upwork-badge{color:var(--acc-text)}
.zu-btn{color:#000913}


/* ══════════════════════════════════════════════════════════════
   DASHBOARD IST EINE BILDSCHIRMSEITE — 28.08.2026
   Felix: "Der untere Teil kann weg. Meine Schwerpunkte unten, das
   kann alles weg. Die Seite ist nicht zum Scrollen. Man kann oben
   ueber die Reiter zu den anderen Seiten gehen."

   Der Fokus-Bereich ist aus start.html raus. Damit die Startseite
   danach WIRKLICH ohne Scrollen auskommt, muss der Hero die
   verbleibende Hoehe fuellen — gemessen fehlten sonst je nach
   Fenster 187 bis 591 px.

   Warum Flex-Spalte und nicht "height:calc(100svh - 161px)":
   die Fusshoehe ist nicht konstant (161 px auf Desktop, 317 px auf
   dem Handy). Ein fester Abzug waere auf jeder zweiten Groesse
   falsch. In einer Flex-Spalte nimmt der Hero automatisch genau
   das, was der Fuss uebrig laesst.

   Alles hier ist auf [data-seite="start"] eingegrenzt — die zehn
   anderen Seiten scrollen weiterhin ganz normal.
   ══════════════════════════════════════════════════════════════ */

html[data-seite="start"] body{
  min-height:100svh;display:flex;flex-direction:column}

/* Das Scrollen wird NICHT gesperrt. Ein overflow:hidden auf der
   Seite haette den Inhalt unerreichbar gemacht, sobald ein Fenster
   doch einmal zu niedrig ist (sehr kleine Laptops, eingeblendete
   Browserleisten, groessere Schrift). Stattdessen wird die Ursache
   behoben: die Seite ist von sich aus nicht hoeher als das Fenster.

   Gemessen war sie 70 px zu hoch, und zwar durch .dash-karte - die
   Weltkarte in der festen Hintergrundebene reicht absichtlich weit
   nach rechts (inset ... -1917px) und nach unten. overflow:clip am
   Elternteil schneidet sie zwar sichtbar ab, haelt sie aber nicht
   aus der Scrollhoehe des Dokuments heraus. overflow:hidden tut es.
   Hier unbedenklich: in dieser Ebene liegt nichts Klebendes, sie
   enthaelt nur Deko. (Fuer .ea-hero und .fokus gilt weiterhin clip
   statt hidden - dort wuerde hidden position:sticky toeten.) */
[data-seite="start"] .dash-welt{overflow:hidden}
[data-seite="start"] main{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
[data-seite="start"] .foot{flex:0 0 auto}

[data-seite="start"] .ea-hero{
  flex:1 1 auto;min-height:0;
  padding-top:clamp(74px,11vh,100px);padding-bottom:4px;
  display:flex;flex-direction:column}
[data-seite="start"] .ea-hero>.wrap{
  flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
[data-seite="start"] .ea-kopf{flex:0 0 auto}

/* Die Buehne bekommt den Rest: Module oben flexibel, Plattform
   unten in ihrer natuerlichen Hoehe. */
[data-seite="start"] .ea-buehne{
  flex:1 1 auto;min-height:0;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding-bottom:0}
[data-seite="start"] .ea-bogen{flex:1 1 auto;min-height:0;align-items:stretch}
[data-seite="start"] .ea-mod{min-height:0}
[data-seite="start"] .ea-mod-in{min-height:0;height:100%}
[data-seite="start"] .ea-platte{flex:0 0 auto}

/* Der Fuss auf dem Dashboard: eine schmale Zeile. Die
   Seitenlinks daneben waeren doppelt gemoppelt — genau dafuer
   sind die Reiter oben da (Felix' eigenes Argument). Die
   E-Mail bleibt, sie ist der Kontaktweg. */
[data-seite="start"] .foot{padding:10px 0}
[data-seite="start"] .foot-nav,
[data-seite="start"] .foot-brand{display:none}
[data-seite="start"] .foot-in{display:none}
[data-seite="start"] .foot-meta{justify-content:center;gap:18px;font-size:12.5px}
[data-seite="start"] .foot-meta a{min-height:34px}

/* ── Hoehe knapp: die Buehne schrumpft mit ────────────────────
   Reihenfolge der Opfer: erst Abstaende, dann Symbolgroesse, dann
   Schrift. Die sechs Module und ihre Listen bleiben IMMER
   vollstaendig — lieber kleiner als abgeschnitten. */
@media (max-height:900px){
  [data-seite="start"] .ea-kopf{margin-bottom:clamp(6px,1.2vh,14px)}
  [data-seite="start"] .ea-ikon{
    width:clamp(34px,5.2vh,60px);height:clamp(34px,5.2vh,60px);
    margin:clamp(5px,1vh,12px) auto 1px}
  [data-seite="start"] .ea-lockup{padding-top:clamp(14px,2.6vh,34px)}
}
/* Schwelle 01.09.2026 von 780 auf 830 angehoben. Grund: die Startseite
   traegt seither die schmale Rechtszeile (Impressum/Datenschutz, Pflicht
   nach § 5 DDG). Die kostet 35 px, und bei genau 800 px Fensterhoehe
   griff die Schrumpfung noch nicht — die Seite scrollte um 21 px und
   brach damit die Invariante "EIN Bildschirm". Gemessen, nicht geschaetzt:
   live 800px -> 800px, mit Rechtszeile 800px -> 821px.
   NACHKORRIGIERT auf 900: mit 830 wanderte der Bruch nur nach oben
   (860px -> 879px). Zwischen 830 und 900 griff weder die Schrumpfung
   noch reichte der Platz. 900 deckt den ganzen knappen Bereich ab;
   darueber ist ohnehin Luft (gemessen bis 1080px). */
@media (max-height:900px){
  [data-seite="start"] .ea-h1{font-size:clamp(1.35rem,3.4vw,2.3rem)}
  [data-seite="start"] .ea-sub{font-size:clamp(.78rem,1.1vw,.95rem)}
  [data-seite="start"] .ea-mod-t{font-size:clamp(10px,1.35vh,12.5px);min-height:2.3em;
    margin-top:clamp(6px,1.1vh,11px)}
  [data-seite="start"] .ea-mod-l{gap:clamp(2px,.5vh,5px);padding-bottom:clamp(8px,1.6vh,16px)}
  [data-seite="start"] .ea-mod-l li{font-size:clamp(9px,1.25vh,12px);line-height:1.28}
  [data-seite="start"] .ea-l1{font-size:clamp(1.5rem,4.4vw,2.6rem)}
  [data-seite="start"] .ea-l2{font-size:clamp(.66rem,1.5vw,1.05rem)}
  [data-seite="start"] .ea-l3{font-size:clamp(.58rem,1.15vw,.85rem)}
  [data-seite="start"] .ea-url{padding:7px;font-size:9.5px}
  [data-seite="start"] .ea-emblem{width:clamp(34px,7vh,64px)}
  [data-seite="start"] .ea-num{width:22px;height:22px;font-size:11px}
}
@media (max-height:660px){
  [data-seite="start"] .ea-hero{padding-top:clamp(64px,9.5vh,84px)}
  [data-seite="start"] .ea-ikon{width:clamp(28px,4.6vh,42px);height:clamp(28px,4.6vh,42px)}
  [data-seite="start"] .ea-mod-l li{font-size:clamp(8.5px,1.2vh,10.5px)}
  [data-seite="start"] .ea-lockup{padding-top:clamp(10px,2vh,20px)}
  [data-seite="start"] .ea-sub{display:none}
  [data-seite="start"] .ea-sockel{bottom:-40px;height:150px}
}

/* ── Handy: der Bogen laeuft zweizeilig, das kostet Hoehe ─────
   Auf dem Handy stehen die sechs Module in zwei Reihen zu dritt.
   Damit beide Reihen plus Plattform in EIN Bild passen, wird hier
   frueher und staerker gekuerzt als auf dem Desktop. */
@media (max-width:560px){
  [data-seite="start"] .foot-meta{gap:10px;font-size:11px}
  [data-seite="start"] .ea-mod-l{padding-left:8px;padding-right:8px}
}

/* Gemessen durch Ausschluss: der Ueberstand von 70 px kommt NICHT
   von der Hintergrundwelt, sondern aus dem Hero selbst — die
   Bodendekoration (Leuchtsockel, Aufsetzschatten, Bodenraster
   .ea-buehne::after mit bottom:-24px) reicht unter seine Kante.
   `.ea-hero` trug bisher nur `overflow-x:clip`; senkrecht lief
   alles ungehindert weiter und blaehte die Seitenhoehe auf.

   clip, NICHT hidden — hidden erzeugt einen Scroll-Container und
   kann position:sticky toeten (geschuetzte Zeile). Gilt nur auf
   dem Dashboard: die anderen Seiten sollen scrollen. */
[data-seite="start"] .ea-hero{overflow:clip}

/* ── Dashboard auf Tablet und Handy ──────────────────────────
   Dort stehen die sechs Module in ZWEI Reihen zu dritt. Zwei
   Reihen plus Kopf plus Plattform waren gemessen 111 px (Tablet)
   bzw. 133 px (Handy) zu hoch fuer eine Bildschirmseite.
   Gekuerzt wird in derselben Reihenfolge wie oben: erst Abstaende,
   dann Symbole, dann Schrift. Alle sechs Module und ihre Listen
   bleiben vollstaendig. */
@media (max-width:1000px){
  [data-seite="start"] .ea-mod-in{min-height:0}
  [data-seite="start"] .ea-kopf{margin-bottom:clamp(4px,1vh,12px)}
  [data-seite="start"] .ea-h1{font-size:clamp(1.25rem,4.4vw,1.95rem);line-height:1.12}
  [data-seite="start"] .ea-sub{font-size:clamp(.74rem,2.4vw,.9rem);line-height:1.35}
  [data-seite="start"] .ea-bogen{gap:clamp(5px,1.1vh,11px) clamp(5px,1.2vw,12px)}
  [data-seite="start"] .ea-ikon{
    width:clamp(26px,4.4vh,44px);height:clamp(26px,4.4vh,44px);
    margin:clamp(4px,.9vh,10px) auto 1px}
  [data-seite="start"] .ea-mod-t{font-size:clamp(9.5px,1.3vh,12px);min-height:2.2em;
    margin:clamp(5px,1vh,9px) 6px 0}
  [data-seite="start"] .ea-mod-l{gap:clamp(1px,.4vh,4px);
    padding:clamp(5px,1vh,10px) 8px clamp(6px,1.2vh,12px)}
  [data-seite="start"] .ea-mod-l li{font-size:clamp(8.5px,1.15vh,11px);line-height:1.25}
  [data-seite="start"] .ea-num{width:20px;height:20px;font-size:10px}
  [data-seite="start"] .ea-lockup{padding:clamp(8px,1.8vh,16px) 10px clamp(6px,1.2vh,12px)}
  [data-seite="start"] .ea-l1{font-size:clamp(1.2rem,6.6vw,2rem)}
  [data-seite="start"] .ea-l2{font-size:clamp(.6rem,2.8vw,.85rem)}
  [data-seite="start"] .ea-l3{font-size:clamp(.54rem,2.3vw,.74rem)}
  [data-seite="start"] .ea-emblem{width:clamp(28px,5.4vh,48px)}
  [data-seite="start"] .ea-url{padding:clamp(5px,1vh,9px);font-size:9px;letter-spacing:.1em}
  [data-seite="start"] .ea-globus{width:11px;height:11px}
}

/* Handy: die letzten 42 bis 56 px. Der Kopfabstand richtet sich
   nach der echten Hoehe der Navigationskapsel (rund 60 px auf
   dem Handy), nicht nach dem Desktop-Wert. */
@media (max-width:560px){
  [data-seite="start"] .ea-hero{padding-top:clamp(66px,9.2vh,80px);padding-bottom:2px}
  [data-seite="start"] .ea-kopf{margin-bottom:clamp(2px,.7vh,8px)}
  [data-seite="start"] .ea-mod-l{padding:clamp(3px,.7vh,7px) 6px clamp(4px,.9vh,9px)}
  [data-seite="start"] .ea-mod-t{min-height:2em;margin-top:clamp(3px,.7vh,7px)}
  [data-seite="start"] .ea-lockup{padding:clamp(6px,1.3vh,12px) 8px clamp(4px,.9vh,9px)}
  [data-seite="start"] .foot{padding:7px 0}
  [data-seite="start"] .foot-meta a{min-height:30px}
}

/* Sehr niedriges Handyfenster (z. B. 360x640 mit eingeblendeten
   Browserleisten): die letzten 25 px. Hier faellt die Unterzeile
   weg — die Ueberschrift sagt bereits, worum es geht. */
@media (max-width:560px) and (max-height:680px){
  [data-seite="start"] .ea-sub{display:none}
  [data-seite="start"] .ea-hero{padding-top:clamp(62px,9vh,72px)}
  [data-seite="start"] .ea-mod-t{min-height:1.9em}
}

/* ── Der Fuss entfaellt auf dem Dashboard ────────────────────
   Gemessen: die Navigationskapsel endet bei 78 px. Mein Hero
   begann bei 62–68 px — die Kicker-Zeile lag damit HINTER der
   Navigation. Der Abstand nach oben ist nicht verhandelbar.

   Die 45–55 px dafuer kommen aus dem Fuss. Auf einer Seite, die
   bewusst EIN Bild ist, war er ohnehin doppelt: die Seitenlinks
   stehen als Reiter oben, und der Kontaktweg ist der Knopf
   "Zusammenarbeit" in der Navigation, der auf /contact/ fuehrt —
   dort steht die E-Mail gross. Auf allen ZEHN anderen Seiten
   bleibt der Fuss unveraendert.
   Wenn Felix die E-Mail auch hier sehen will: diese eine Regel
   entfernen, dann kommt die schmale Zeile zurueck. */
/* GEAENDERT 01.09.2026 — hier stand [data-seite="start"] .foot{display:none}.
   Impressum und Datenschutz muessen von JEDER Seite in einem Klick
   erreichbar sein (§ 5 DDG, Art. 13 DSGVO). Ein Link, der nur im
   Quelltext steht und 0x0 Pixel gross ist, erfuellt das nicht — genau
   so gemessen am 01.09.2026 auf der Live-Startseite.
   Der Ein-Bild-Charakter bleibt trotzdem: statt des ganzen Fusses steht
   hier NUR die Rechtszeile. E-Mail, Domain und Copyright bleiben aus —
   die E-Mail steht ohnehin gross auf /contact/, wohin der Knopf in der
   Navigation fuehrt. Kostet rund 30 px statt der frueheren 45-55. */
[data-seite="start"] .foot{padding:4px 0}
[data-seite="start"] .foot-meta>span{display:none}
[data-seite="start"] .foot-meta a[href^="mailto"]{display:none}
[data-seite="start"] .foot-meta a{min-height:26px;font-size:11.5px;opacity:.72}
[data-seite="start"] .foot-meta a:hover{opacity:1}

/* Abstand nach oben: raeumt die Navigationskapsel (Unterkante
   78 px) in jedem Fall frei. max() statt clamp() — der untere
   Wert darf nie unter die Kapsel rutschen. */
[data-seite="start"] .ea-hero{padding-top:max(92px,11vh)}
@media (max-width:560px){
  [data-seite="start"] .ea-hero{padding-top:max(90px,10vh)}
}

/* Die Unterzeile bleibt: sie traegt die Positionierung. Auf
   niedrigen Fenstern wird sie kleiner, nicht ausgeblendet. */
@media (max-height:660px){
  [data-seite="start"] .ea-sub{display:block;font-size:clamp(.72rem,1vw,.86rem)}
}
@media (max-width:560px) and (max-height:680px){
  [data-seite="start"] .ea-sub{display:block;font-size:clamp(.68rem,2.2vw,.8rem)}
}

/* Die Leuchtringe der Buehne sitzen normalerweise 78 px UNTER der
   Plattform. Auf dem Dashboard endet die Seite dort — der neue
   overflow:clip schnitt sie mitten durch. Sie ruecken darum nach
   oben, statt gekappt zu werden: die Ellipse bleibt vollstaendig,
   sie liegt nur enger an der Platte.
   Referenzbild 2 zeigt genau das: zwei geschlossene Ringe um die
   Plattform, keine angeschnittenen Boegen. */
[data-seite="start"] .ea-hero{padding-bottom:clamp(10px,2.4vh,26px)}
[data-seite="start"] .ea-sockel{bottom:-8px;height:clamp(120px,26vh,210px)}
@media (max-width:560px){
  [data-seite="start"] .ea-hero{padding-bottom:clamp(6px,1.6vh,14px)}
  [data-seite="start"] .ea-sockel{bottom:-4px;height:clamp(90px,20vh,150px)}
}

/* Sehr kleines Handy (360x640 und kleiner): hier wird die
   Unterzeile doch geopfert. Auf dem Laptop war das falsch — dort
   traegt sie die Positionierung und es ist Platz. Auf einem
   640-px-Fenster gewinnt "alles auf einen Blick". */
@media (max-width:560px) and (max-height:660px){
  [data-seite="start"] .ea-sub{display:none}
  /* 1 px fehlte noch: der Innenabstand nach unten geht auf 0 und
     die Buehne verliert ihren letzten Rest. Gemessen: 641 statt
     640 - genau eine Zeile Rundung. */
  [data-seite="start"] .ea-hero{padding-bottom:0}
  [data-seite="start"] .ea-buehne{padding-bottom:0}
  [data-seite="start"] .ea-mod-l li{font-size:clamp(8px,1.1vh,10px)}
}

/* ══════════════════════════════════════════════════════════════
   MEHR BEWEGUNG — 28.08.2026
   Felix: "mach mal noch mehr Animationen ... Punkte, die sich
   bewegen, irgendwas Grafisches noch ... noch krasser."

   Regel dabei: alles laeuft ueber `opacity` und `transform`. Das
   sind die beiden Eigenschaften, die der Compositor allein
   erledigt — ohne Layout, ohne Neuzeichnen. Animierte Schatten,
   Filter oder Groessen waeren an derselben Stelle ein Vielfaches
   teurer, und der Hero ist auf dem Dashboard seit heute IMMER
   sichtbar; er kann nicht mehr aus dem Bild gescrollt werden.

   Datenpunkte und Kursmarke liegen NICHT hier, sondern im Canvas
   (app.js) — dort laeuft die Schleife ohnehin.
   ══════════════════════════════════════════════════════════════ */

/* ── 1 · Datenleitung zwischen den Modulen ────────────────────
   Referenzbild 2 zeigt feine Verbindungen zwischen den Modulen.
   Die Linie liegt hinter dem Bogen, der Impuls wandert darauf
   entlang — wie ein Signal, das durch die Kette laeuft.

   Beide Ebenen sind `position:absolute`. Das ist hier keine
   Kosmetik: `.ea-bogen` ist ein Grid und `.ea-buehne` ein
   Flex-Container — ein Pseudo-Element IM FLUSS wuerde dort zu
   einem weiteren Raster- bzw. Flex-Kind und die sechs Spalten
   sprengen. Absolut positioniert ist es aus dem Fluss heraus. */
@media (min-width:1001px){
  .ea-buehne::before,.ea-buehne::after{
    content:"";position:absolute;z-index:0;pointer-events:none;
    left:7%;right:7%;top:46%;height:1px}
  .ea-buehne::before{
    background:linear-gradient(90deg,transparent,rgba(120,180,255,.30) 10%,
      rgba(120,180,255,.30) 90%,transparent)}
  .ea-buehne::after{
    right:auto;width:120px;border-radius:2px;
    background:linear-gradient(90deg,transparent,#bfe0ff,transparent);
    box-shadow:0 0 12px rgba(120,190,255,.8);
    animation:eaSignal 7s cubic-bezier(.5,0,.5,1) infinite}
  @keyframes eaSignal{
    0%   {transform:translateX(0);opacity:0}
    6%   {opacity:1}
    94%  {opacity:1}
    100% {transform:translateX(calc(86vw - 120px));opacity:0}
  }
}

/* ── 2 · Die Modulkanten atmen ────────────────────────────────
   Versetzt ueber die Reihe, damit es wie eine durchlaufende Welle
   wirkt und nicht wie ein Blinken. Der Versatz kommt aus --i,
   das im HTML ohnehin an jedem Modul steht. */
.ea-kante{animation:eaAtem 4.2s ease-in-out infinite;
  animation-delay:calc(var(--i,0) * .28s);
  /* Ohne diese Zeile zeichnet der Browser die drei Leuchtschatten
     der Kante (12/26/46 px Unschaerfe) bei JEDEM Bild neu -
     gemessen 1,5 Prozentpunkte, gedrosselt 17. Mit ihr liegt die
     Kante als fertige Ebene im Compositor und nur ihre Deckkraft
     aendert sich. */
  will-change:opacity}
@keyframes eaAtem{
  0%,100%{opacity:.62}
  50%    {opacity:1}
}

/* ── 3 · Die Ringe der Buehne pulsieren ───────────────────────
   Nur `opacity` — ein animierter box-shadow wuerde bei diesen
   Unschaerferadien (bis 66 px) jedes Bild neu zeichnen. */
.ea-ring-1{animation:eaRing 7.5s ease-in-out infinite}
.ea-ring-2{animation:eaRing 7.5s ease-in-out infinite .9s}
.ea-ring-3{animation:eaRing 7.5s ease-in-out infinite 1.8s}
@keyframes eaRing{
  0%,100%{opacity:.7}
  50%    {opacity:1}
}

/* ── 4 · Die Nummern glimmen nach ─────────────────────────────
   ⚠️ GEMESSEN, NICHT GESCHAETZT: der erste Versuch animierte den
   `box-shadow` der Nummer direkt. Das kostete 5,8 von 7,9
   Prozentpunkten CPU — auf einem 6-fach gedrosselten Geraet
   56 von 70. Ein Schatten mit 26 px Unschaerfe wird bei jedem
   einzelnen Bild neu gezeichnet, sechsmal parallel.

   Richtig: der Schatten steht STILL auf einer eigenen Ebene, und
   nur deren Deckkraft wird bewegt. `will-change:opacity` hebt sie
   in den Compositor, dort kostet die Aenderung praktisch nichts. */
.ea-num{position:relative}
.ea-num::after{
  content:"";position:absolute;inset:-3px;border-radius:50%;
  pointer-events:none;
  box-shadow:0 0 26px rgba(61,139,255,.85);
  will-change:opacity;
  animation:eaGlimm 5.5s ease-in-out infinite;
  animation-delay:calc(var(--i,0) * .34s)}
@keyframes eaGlimm{
  0%,100%{opacity:0}
  50%    {opacity:1}
}

/* ── 5 · Reduzierte Bewegung: alles aus ───────────────────────
   Pflicht. Die Komposition bleibt vollstaendig stehen — nur
   still. Gemessen wird das in _pruef/ruhig.js. */
@media (prefers-reduced-motion:reduce){
  .ea-buehne::after,.ea-kante,.ea-ring-1,.ea-ring-2,.ea-ring-3,
  .ea-num,.ea-num::after{
    animation:none !important;will-change:auto !important}
  .ea-buehne::after,.ea-num::after{opacity:0 !important}
}


/* ══════════════════════════════════════════════════════════════
   EINE WELT FUER ALLE SEITEN                        28.08.2026
   ══════════════════════════════════════════════════════════════
   Vorher lief das Canvas nur auf dem Dashboard. Die Unterseiten
   bekamen ein statisches CSS-Raster als Ersatz - aehnlich, aber
   eben nicht dieselbe Umgebung: kein Zug, keine Tiefe, keine
   Weltkarte. Deshalb zerfiel die Website optisch in Startseite
   und "der Rest".

   Jetzt steht .dash-welt in layout.html und gilt ueberall. Diese
   Schicht regelt nur noch, wie stark sie je Seite auftritt.
   ══════════════════════════════════════════════════════════════ */

/* ── 1 · Das alte Ersatz-Raster faellt weg ────────────────────
   Das Canvas zeichnet das Raster jetzt selbst - und zwar mit
   Perspektive und Horizont. Bliebe das CSS-Raster stehen, laegen
   zwei verschieden dichte Raster uebereinander (Moire).
   Der Lichtkegel bleibt: er traegt auch dann, wenn JavaScript
   klemmt und gar kein Canvas kommt. */
html:not([data-seite="start"]) body::before{
  background:
    radial-gradient(72% 46% at 50% -6%,rgba(61,139,255,.15),transparent 68%),
    radial-gradient(38% 30% at 88% 8%,rgba(61,139,255,.08),transparent 72%)}

/* ── 2 · Auf Unterseiten tritt die Welt zurueck ───────────────
   Die Deckkraft macht das Canvas selbst (app.js, INT = 0.70) -
   das ist billiger als eine zweite Compositor-Ebene. Hier kommt
   nur der senkrechte Abfall dazu: oben volle Buehne, unten ruhig,
   damit lange Textstrecken nicht auf Raster liegen.
   Die Ebene ist position:fixed - die Maske haengt also am
   Bildschirm, nicht am Dokument, und wandert beim Scrollen nicht
   mit. Genau das ist gewollt. */
html:not([data-seite="start"]) .dash-welt{
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 64%,rgba(0,0,0,.55) 100%);
  mask-image:linear-gradient(180deg,#000 0,#000 64%,rgba(0,0,0,.55) 100%)}

/* .dash-karte ist das Bodenlicht der Naht zwischen Hero und
   Folgebereich. Diese Naht gibt es nur auf dem Dashboard. Ohne
   u1.js bliebe --u1-naht-o ungesetzt und die Ebene damit ohnehin
   unsichtbar - hier steht es trotzdem ausdruecklich, damit ein
   spaeterer Standardwert sie nicht versehentlich einblendet. */
html:not([data-seite="start"]) .dash-karte{display:none}

/* ── 3 · Der Kopfbereich bekommt seinen Lichtkegel zurueck ────
   .dash-glow sass bisher fest ueber dem Dashboard-Hero. Auf
   Unterseiten ist der Kopf niedriger; ohne Korrektur leuchtete
   es an der Nase vorbei. */
html:not([data-seite="start"]) .dash-glow{
  top:-38vh;opacity:.72}

/* ── 4 · Inhalt liegt IMMER ueber der Welt ────────────────────
   Bisher galt das ueber :has(.dash-welt) nur dort, wo die Welt im
   HTML stand. Jetzt steht sie ueberall, aber .nav war in dieser
   Regel nie enthalten - sie hat ihre eigene z-Ebene (100) und
   liegt schon richtig. Der Vollstaendigkeit halber alle drei. */
body:has(.dash-welt) main,
body:has(.dash-welt) .foot,
body:has(.dash-welt) .nav{position:relative;z-index:1}
.nav{z-index:100}

/* ── 5 · Reduzierte Bewegung ──────────────────────────────────
   Das Canvas zeichnet in diesem Fall genau EIN Bild und haelt
   dann an (app.js: ruhig.matches). Die Welt bleibt also sichtbar,
   sie steht nur still - eine leere Flaeche waere der schlechtere
   Tausch. Hier wird nur sichergestellt, dass keine CSS-Ebene der
   Welt noch von sich aus laeuft. */
@media (prefers-reduced-motion:reduce){
  .dash-welt,.dash-glow,.dash-korn{animation:none !important}
}


/* ══════════════════════════════════════════════════════════════
   LEISTUNGEN: TIEFE UND HIERARCHIE                  28.08.2026
   ══════════════════════════════════════════════════════════════ */

/* ── 1 · Der Schatten, der nie zu sehen war ───────────────────
   .dienst und .ea-platte::before setzen clip-path fuer die Fase
   und daneben einen aeusseren box-shadow. clip-path beschneidet
   den kompletten Malbereich - ein aeusserer Schatten liegt
   ausserhalb der Box und wird restlos weggeschnitten. Die Regel
   stand also im Blatt und hatte null Wirkung; die Platten lagen
   flach auf dem Hintergrund.

   filter:drop-shadow folgt der BESCHNITTENEN Silhouette. Das ist
   dieselbe Loesung wie bei .mini-card, .stack-item und .cert -
   damit ist das Verfahren im ganzen Blatt einheitlich.
   GESCHUETZT: hier nie wieder auf box-shadow zurueckstellen. */
.dienst{
  box-shadow:inset 0 1px 0 rgba(190,215,250,.20),
             inset 0 0 0 1px rgba(150,190,245,.10);
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.55))
         drop-shadow(0 22px 30px rgba(0,0,0,.6));
  transition:filter .4s var(--ease),transform .4s var(--ease)}
.ea-platte::before{
  box-shadow:0 -1.5px 0 rgba(214,231,255,.6) inset;
  filter:drop-shadow(0 4px 10px rgba(61,139,255,.35))}

/* Anfassen soll sich anfuehlen wie auf der Startseite: die Platte
   hebt sich, das blaue Licht darunter wird staerker. */
@media (hover:hover) and (pointer:fine){
  .dienst:hover{
    transform:translateY(-3px);
    filter:drop-shadow(0 2px 2px rgba(0,0,0,.55))
           drop-shadow(0 26px 34px rgba(0,0,0,.66))
           drop-shadow(0 0 22px rgba(61,139,255,.26))}
}

/* ── 2 · Zwei gross, vier daneben ─────────────────────────────
   Sechs strukturgleiche Bloecke untereinander sind eine Liste,
   keine Gestaltung. Die beiden Hauptleistungen bleiben in voller
   Breite; die vier ergaenzenden bilden ein Feld. Damit sieht man
   die Gewichtung, bevor man ein Wort gelesen hat. */
.dienst-raster{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px;margin-top:4px}
.dienst-raster .dienst{margin-bottom:0;height:100%}

/* Die kleinen Platten tragen dieselbe Materialsprache, nur eine
   Stufe leiser: kleinere Fase, kleinere Ueberschrift, engere
   Stichpunkte. Gleiche Welt, andere Lautstaerke. */
.dienst-klein{--fase:14px;padding:22px 22px 22px 28px}
.dienst-klein h2{font-size:clamp(1.08rem,1.5vw,1.28rem)}
.dienst-klein .sec-sub{margin-bottom:16px;font-size:14.5px}
.dienst-klein .dienst-liste{grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:7px 18px}
.dienst-klein .dienst-liste li{font-size:13.8px}
.dienst-klein .dienst-no{width:29px;height:33px;flex:0 0 29px;font-size:11.5px}

/* Die beiden grossen bekommen etwas mehr Luft, damit der
   Groessenunterschied nicht nur an der Breite haengt. */
.dienst:not(.dienst-klein){padding:30px 32px 30px 38px}

/* Ab Tablet abwaerts stapeln sich die vier wieder - zwei Spalten
   auf 760 px waeren zwei zu schmale Spalten, keine Gestaltung. */
@media (max-width:860px){
  .dienst-raster{grid-template-columns:1fr;gap:16px}
  .dienst-klein{--fase:14px;padding:22px 20px 22px 26px}
  .dienst:not(.dienst-klein){padding:24px 22px 24px 28px}
}


/* ══════════════════════════════════════════════════════════════
   EINHEITLICHE HANDSCHRIFT UEBER ALLE SEITEN        28.08.2026
   ══════════════════════════════════════════════════════════════
   Ergebnis einer Konsistenzpruefung aller elf Seiten. Es geht hier
   NICHT um neue Gestaltung, sondern darum, dass dieselbe Sache
   ueberall gleich aussieht. Jede Regel unten schliesst eine Stelle,
   an der eine Seite aus der Reihe fiel.
   ══════════════════════════════════════════════════════════════ */

/* ── 1 · Der Hero-Fuss arbeitete gegen die neue Welt ──────────
   .hero-bg::after blendete auf 120 px zum DECKENDEN --bg ab. Das
   war richtig, solange jede Seite ihren eigenen Hintergrund hatte.
   Seit die Canvas-Welt durchlaeuft, legt sich dort ein dunkles
   Band ueber sie, und direkt darunter taucht sie wieder auf.
   Jetzt laeuft der Verlauf nach transparent aus - die Umgebung
   bleibt durchgehend. */
html:not([data-seite="start"]) .hero-bg::after{
  background:linear-gradient(180deg,transparent,rgba(7,11,20,.55))}

/* ── 2 · Jeder Abschnittswechsel traegt dieselbe Kante ────────
   Es gab genau EINE echte Kante je Seite: die Chromkante unter dem
   Hero. Jeder weitere Wechsel war eine 7-%-Haarlinie auf fast
   schwarzem Grund - praktisch unsichtbar. Jetzt tragen alle
   Wechsel dasselbe Bauteil, nur schwaecher als am Hero. */
.sec-alt{position:relative;border-top-color:transparent;border-bottom-color:transparent}
.sec-alt::before,.sec-alt::after{
  content:"";position:absolute;left:50%;transform:translateX(-50%);
  width:min(100% - 2*var(--rand,24px),var(--wrap));height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(120,175,255,.30) 20%,
    rgba(186,220,255,.50) 50%,rgba(120,175,255,.30) 80%,transparent);
  box-shadow:0 0 9px rgba(61,139,255,.26)}
.sec-alt::before{top:0}
.sec-alt::after{bottom:0}

/* ── 3 · Tote Regeln, die nichts mehr trafen ─────────────────
   .cert:hover und .stack-item:hover setzten border-color auf
   Karten, deren Rand die Material-Schicht laengst auf 0 gestellt
   hat. Sie sahen im Blatt nach einem Hover aus, den es nicht gab.
   Die Zertifikatskarten bekommen jetzt denselben echten Hover wie
   alle anderen Panels: anheben, Licht darunter staerker. */
.cert:hover,.stack-item:hover{border-color:transparent}
@media (hover:hover) and (pointer:fine){
  .cert{transition:transform .4s var(--ease),filter .4s var(--ease)}
  .cert:hover{
    transform:translateY(-4px);
    filter:drop-shadow(0 2px 2px rgba(0,0,0,.6))
           drop-shadow(0 26px 34px rgba(0,0,0,.7))
           drop-shadow(0 0 22px rgba(61,139,255,.30))}
}

/* ── 4 · Die Ueberschrift ohne Regel ─────────────────────────
   .stack-item h3 kam im ganzen Blatt nicht vor und fiel damit auf
   die Browser-Vorgabe zurueck: groesser als die h2 derselben
   Seite und ohne Abstand nach unten. Gleiche Werte wie
   .mini-card h3, damit materialgleiche Panels gleich aussehen. */
.stack-item h3{font-size:1.02rem;margin-bottom:9px}

/* ── 5 · Leistungen: zwei Kollisionen ────────────────────────
   a) .dienst:first-child (Spezifitaet 0,2,0) schlug die spaetere
      Plattenregel (0,1,0) - Block 01 hatte oben 8 px statt 26 px
      Innenabstand und klebte sichtbar an seiner Fase.
   b) .dienst-betont hatte dieselbe Spezifitaet wie .dienst und
      verlor. Uebrig blieb eine 2-px-Kante direkt neben der
      3-px-Chromschiene - eine Doppelkante, die wie ein Fehler
      aussah. Die Hervorhebung sitzt jetzt dort, wo sie hingehoert:
      in der Schiene und im Glasverlauf. */
.dienst:first-child{padding-top:26px}
.dienst-betont{border-left:0;padding-left:34px;
  background:linear-gradient(172deg,rgba(120,175,255,.20),rgba(255,255,255,.02) 40%,
    rgba(9,17,34,.68))}
.dienst-betont.dienst-klein{padding-left:28px}
.dienst-betont::before{
  background:linear-gradient(180deg,#ffffff,#9fc4f5 30%,#2f5f9e 70%,#cfe0f8);
  box-shadow:0 0 16px rgba(61,139,255,.75)}

/* ── 6 · Die Nummer sieht ueberall gleich aus ────────────────
   /services/ hatte ein Sechseck aus Metall, /projects/ schlichten
   Mono-Text fuer dieselbe Sache. Das Sechseck ist zugleich die
   Form der Modulnummern auf der Startseite - also gilt sie. */
.projekt-no{
  display:grid;place-items:center;width:34px;height:38px;flex:0 0 34px;margin-bottom:14px;
  clip-path:polygon(50% 0,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%);
  background:linear-gradient(160deg,rgba(120,170,240,.4),rgba(20,34,60,.9));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3);
  font-size:12.5px;color:#dceaff;letter-spacing:0}

/* ── 7 · Ablauf-Seite: die Kerben im Raster ──────────────────
   Ein alter Regelblock gab jeder Zelle 1 px Rahmen und 14 px
   Radius, obwohl das Raster seine Trennlinien schon ueber
   gap:2px auf hellem Grund zieht. Zwischen zwei Zellen lagen
   dadurch 4 px, und die Radien rissen an jeder Kreuzung eine
   helle Kerbe auf. */
.steps li{border:0;border-radius:0}
.steps li:hover{border-color:transparent}
/* Die Schritt-Titel waren mit festen 1.05rem die kleinsten h2 der
   Website - kleiner als h3 auf Nebenkacheln anderer Seiten.
   Jetzt dieselbe Groessenklasse wie .fall-block h2. */
.steps h2{font-size:clamp(1.18rem,2vw,1.45rem);margin-bottom:10px}
/* Die Nummer als Sechseck wie ueberall sonst. */
.step-no{
  display:grid;place-items:center;width:30px;height:34px;margin-bottom:14px;
  clip-path:polygon(50% 0,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%);
  background:linear-gradient(160deg,rgba(120,170,240,.4),rgba(20,34,60,.9));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3);
  font-size:11.5px;color:#dceaff;letter-spacing:0}

/* Der Abschnitt "Was ich von dir brauche" hatte 44 px mehr Unter-
   als Oberrand: .zwei-spalten sass direkt auf dem .wrap und
   schlug seinen margin-bottom auf das Abschnitts-Padding drauf. */
.sec>.wrap.zwei-spalten{margin-bottom:0}

/* ── 8 · FAQ: die Trennlinie mit Handschrift ─────────────────
   Nackte Haarlinien; jetzt dieselbe Lichtkante wie an den
   Abschnittswechseln, nur noch einmal schwaecher. */
.faq{border-top:0;position:relative}
.faq details{border-bottom:0;position:relative}
.faq details::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,rgba(120,175,255,.26),rgba(150,195,255,.10) 60%,transparent)}

/* ── 9 · Etiketten: EIN Material statt drei ──────────────────
   .chips trugen laengst Glas mit Innenlichtkante, .why-list,
   .hero-stack und .teaser-list waren flache Umrandungs-Pillen
   geblieben. Drei Etikettenstile auf einer Seite lesen sich als
   Unfall, nicht als Absicht. */
.why-list li,.hero-stack li,.teaser-list li{
  background:linear-gradient(170deg,rgba(150,190,245,.15),rgba(10,18,34,.6));
  border:1px solid rgba(150,190,245,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16)}
.why-list li:hover{border-color:var(--acc);color:var(--tx)}

/* ── 10 · Upwork: die Vertrauensleiste bekommt Material ──────
   Sie sitzt an der prominentesten Stelle der Seite und bestand
   aus nackten 1-px-Trennlinien. Der kleine Strich oben wird zur
   Lichtkante - dasselbe Bauteil wie an den Bildfassungen. */
.hero-proof li::before{
  height:2px;width:30px;
  background:linear-gradient(90deg,#2f7fff,#a9d4ff);
  box-shadow:0 0 10px rgba(61,139,255,.6)}
.hero-proof li{border-right-color:rgba(150,190,245,.14)}

/* Das CTA-Feld war die einzige Handlungsaufforderung der Website
   ohne Knopf-Material. Es ist kein Link (auf /upwork/ darf keiner
   stehen) - aber aussehen soll es wie die Hauptaktion. */
/* Der Selektor MUSS .contact-box mitnennen: .contact-box p faerbt
   alle Absaetze darin auf --tx-dim und schlaegt ein blankes
   .upwork-cta in der Spezifitaet. Gemessen kam dabei grauer Text
   auf blauem Knopf heraus - Kontrast 1,21 statt der noetigen 4,5.
   GESCHUETZT: Klasse nie allein stehen lassen. */
.contact-box .upwork-cta{
  background:linear-gradient(135deg,#5c9dff,var(--acc) 55%,var(--acc-2));
  border:0;color:#fff;
  box-shadow:0 12px 30px -12px rgba(61,139,255,.6),
             inset 0 1px 0 rgba(255,255,255,.34)}

/* Im Navigationsfeld sass ein kleineres Pille-Label statt der
   44-px-Kapsel, die auf jeder anderen Seite dort steht. */
.nav-upwork{
  min-height:44px;padding:0 20px;border-radius:12px;
  display:inline-flex;align-items:center;
  border:1px solid rgba(61,139,255,.3)}

/* Gold traegt auf dieser Website eine Sonderrolle: Nachweis-Datum,
   Risiko-Hinweis, Trading-Kicker. Die Unterzeile im Upwork-Hero
   war die einzige goldene Fliesszeile und entwertete das. */
.hero-sub{color:var(--acc-text)}

/* ── 11 · Bilder in Fassungen ────────────────────────────────
   Das Schema-SVG bringt eigenen Rand, eigene Rundung, eigenen
   Verlauf und noch einmal Innenabstand mit - INNERHALB der
   Metallfassung, die daneben Fotos randlos fuellt. Doppelte
   Fassung. Ausserhalb einer Fassung behaelt es seinen Rahmen. */
.projekt-bild .oos-vis,.fall-bild .oos-vis{
  border:0;border-radius:8px;padding:0;background:transparent}
/* Die Fassung um das Testschema war auf volle Textbreite
   aufgezogen, das SVG darin auf 560 px gedeckelt und nirgends
   zentriert - rechts blieb leeres Metall stehen. */
.fall-schema>div{display:flex;justify-content:center}

/* ── 12 · Kontakt: ein Einstiegspunkt ────────────────────────
   Sechs formgleiche Kacheln ohne Hervorhebung geben dem Blick
   keinen Anfang. Die zwei haeufigsten Auftragsarten bekommen eine
   kraeftigere Lichtkante - dieselbe Logik wie .dienst-betont. */
.mini-card-betont::after{
  left:8%;right:8%;height:2.5px;
  background:linear-gradient(90deg,transparent,#4d92ff 10%,#d6ebff 50%,#4d92ff 90%,transparent);
  box-shadow:0 0 14px rgba(61,139,255,.55)}
.mini-card-betont::before{
  background:linear-gradient(168deg,#1b2c4b 0%,#132038 46%,#0b1424 100%)}


/* ══════════════════════════════════════════════════════════════
   NACHTRAG ZU DEN NEUEN BAUTEILEN                   28.08.2026
   ══════════════════════════════════════════════════════════════ */

/* ── 1 · Kopf-Visuals der Fallstudien und der Ablauf-Seite ────
   Sie nutzen dieselbe Klasse .hv wie /about/ und /contact/ und
   damit dieselbe Groesse, denselben Schatten, dasselbe Verhalten
   auf schmalen Schirmen. Neue Motive, kein neues Bauteil. */
.hv-ablauf,.hv-strecke,.hv-grenze,.hv-fenster,.hv-verteil{opacity:.95}

/* Die Ueberschrift der Fallstudien hatte eine feste Breitenbremse
   von 20ch. Die war noetig, solange sie ueber die volle Seite lief -
   jetzt steht sie in einer Spalte, und die Bremse laesst sie nur
   unnoetig schmal umbrechen, waehrend der Lead-Absatz daneben
   breiter laeuft. Zwei verschiedene rechte Kanten im selben Kopf. */
.hero-fall-in h1{max-width:none}

/* ── 2 · Drei Ueberschriftenstufen statt einer ────────────────
   Nach der h1 folgten auf den Fallseiten fuenf- bis sechsmal
   gleich grosse h2 - "Das Problem" sah aus wie "Technologien".
   Jetzt: Kernbloecke gross, Nebenbloecke als Etikett. */
.fall-block h2{font-size:clamp(1.35rem,2.5vw,1.85rem);margin-bottom:14px}
.fall-block-neben{margin-bottom:30px}
.fall-block-neben h2{
  font-size:.82rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--tx-faint);margin-bottom:12px}

/* ── 3 · Der Ausgang aus einem Leistungsblock ────────────────
   Jeder Block war eine Sackgasse. Zwei von ihnen haben eine
   ausfuehrliche Fallstudie - der Verweis sieht aus wie die
   Weiter-Links auf der Startseite. */
.dienst-mehr{margin-top:16px}
.dienst-mehr a{
  display:inline-flex;align-items:center;gap:8px;min-height:44px;
  font-size:14px;font-weight:600;color:var(--acc-text);text-decoration:none}
.dienst-mehr a::after{
  content:"";width:14px;height:8px;flex:0 0 14px;
  background:currentColor;
  clip-path:polygon(0 3px,9px 3px,9px 0,14px 4px,9px 8px,9px 5px,0 5px);
  transition:transform .3s var(--ease)}
.dienst-mehr a:hover{color:#a9d4ff}
.dienst-mehr a:hover::after{transform:translateX(4px)}

/* ── 4 · Das Schema im dritten Upwork-Block ──────────────────
   Es sitzt in derselben Metallfassung wie die Fotos daneben, ist
   aber ein SVG - ohne feste Hoehe wuerde es die Fassung sprengen. */
.oos-klein{width:100%;max-width:340px;height:auto;display:block;margin:0 auto}

/* ── 5 · Der Abschluss-Kasten auf den Fallseiten ─────────────
   .fall-wrap deckelt seine Kinder auf 820 px. Der Kasten soll
   diese Breite ausfuellen, nicht schmaler stehen als der Text
   darueber. */
.fall-wrap>.contact-box{max-width:820px;width:100%}
.fall-weiter{margin-top:26px}


/* ══════════════════════════════════════════════════════════════
   KONTRAST DER HAUPTKNOEPFE                          28.08.2026
   ══════════════════════════════════════════════════════════════
   Gemessen: fast schwarze Schrift (#04101f) auf dem alten Verlauf
   ergab am dunklen Ende 3,32:1 - AA verlangt 4,5. Die Schrift ist
   schon fast schwarz, reines Schwarz braechte nur 3,65. Also wird
   der Verlauf angehoben; seine Spanne bleibt, damit der Knopf
   weiter gewoelbt aussieht statt flach.
   GESCHUETZT: der dunkelste Stopp darf nicht unter #3a7ff2 fallen,
   sonst faellt die Hauptaktion der ganzen Website unter AA.
   Pruefgriff: node _pruef/knopf-kontrast.js
   ══════════════════════════════════════════════════════════════ */
.btn-primary,
.contact-box .upwork-cta{
  color:#04101f;
  background:linear-gradient(135deg,#7db4ff,#4d95ff 44%,#3a7ff2)}
.btn-primary:hover{
  background:linear-gradient(135deg,#93c3ff,#5da0ff 44%,#4489f5)}

/* Der Upwork-Hinweis ist KEIN Link (auf /upwork/ darf kein
   Kontaktweg stehen) - er soll nur aussehen wie die Hauptaktion.
   Darum dieselbe Flaeche, aber kein Hover und kein Anheben. */
.contact-box .upwork-cta{
  box-shadow:0 12px 30px -12px rgba(61,139,255,.6),
             inset 0 1px 0 rgba(255,255,255,.34);
  border:0}


/* ══════════════════════════════════════════════════════════════
   DIE UEBERSCHRIFTEN-LEITER                          28.08.2026
   ══════════════════════════════════════════════════════════════
   Gemessen bei 1440 px: h1 der Unterseiten 46 px, Abschnitts-h2
   40 px. Sechs Pixel Unterschied - das liest sich nicht als
   Rangfolge, sondern als zwei gleich wichtige Titel direkt
   untereinander. Auf /services/ standen dadurch "Womit du mich
   beauftragen kannst" und "Zwei Hauptleistungen, vier
   Ergaenzungen" fast gleich gross uebereinander.

   Neue Leiter, jede Stufe deutlich unter der vorigen:
     Seitentitel   h1   46 px
     Abschnitt     h2   33 px
     Block         h2   26 px
     Karte         h3   16 px
   ══════════════════════════════════════════════════════════════ */
.sec h2{font-size:clamp(1.5rem,2.8vw,2.05rem)}
.sec-head{margin-bottom:40px}
/* Der Abschluss-Kasten ist kein Abschnitt, sondern ein Bauteil -
   seine Ueberschrift gehoert auf die Blockstufe. */
.contact-box h2{font-size:clamp(1.35rem,2.4vw,1.75rem)}


/* ── BLOCKSTUFE WIEDERHERSTELLEN ─────────────────────────────
   Die Regel ".sec h2" darueber hat dieselbe Spezifitaet (0,1,1)
   wie ".dienst h2", ".fall-block h2" und ".steps h2" - und steht
   spaeter. Damit hat sie alle Block-Ueberschriften mit auf
   Abschnittsgroesse gezogen; auf /services/ war die Ueberschrift
   des ersten Blocks anschliessend groesser als der Abschnittskopf
   darueber. Die Leiter stand wieder auf dem Kopf.

   Hier stehen die Blockgroessen mit ZWEI Klassen im Selektor
   (0,2,1). Das schlaegt ".sec h2" unabhaengig von der Reihenfolge -
   eine spaeter angehaengte Schicht kann es nicht erneut kippen.
   GESCHUETZT: Spezifitaet nie auf eine Klasse zurueckdrehen. */
.sec .dienst h2{font-size:clamp(1.25rem,2.1vw,1.6rem)}
.sec .dienst-klein h2{font-size:clamp(1.08rem,1.5vw,1.28rem)}
/* 1.85rem ergab auf /about/ 29,6 px direkt unter einem
   Abschnittskopf von 32,8 px - nur 11 Prozent Unterschied, also
   keine sichtbare Rangfolge. Gemessen mit _pruef/schriftleiter.js.
   1.75rem ist zugleich die Groesse von .contact-box h2: beide sind
   Bloecke, beide sollen gleich gross sein. */
.sec .fall-block h2{font-size:clamp(1.3rem,2.4vw,1.75rem);margin-bottom:14px}
.sec .fall-block-neben h2{
  font-size:.82rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--tx-faint);margin-bottom:12px}
.sec .steps h2{font-size:clamp(1.18rem,2vw,1.45rem);margin-bottom:10px}
.sec .contact-box h2{font-size:clamp(1.35rem,2.4vw,1.75rem)}


/* ── ABLAUF-RASTER ALS BAUTEIL ───────────────────────────────
   Die sechs Schritte sind bewusst KEINE sechs schwebenden Platten -
   das waere sechsmal derselbe Rahmen und mehr Unruhe als Aussage.
   Sie bleiben ein Raster; aber der Rahmen darum bekommt dieselbe
   Sprache wie jedes andere Bauteil: Fase, Lichtkante, Tiefe.

   Die Lichtkante liegt als Hintergrundbild oben auf, NICHT als
   ::before. .steps ist display:grid - ein Pseudo-Element wuerde
   dort zur siebten Zelle und das Raster verschieben.

   clip-path schneidet aeussere box-shadow weg, darum drop-shadow
   (geschuetzte Zeile, siehe _pruef/schatten-pruefen.js). */
.steps{
  --fase:18px;border:0;border-radius:0;
  clip-path:polygon(var(--fase) 0,calc(100% - var(--fase)) 0,100% var(--fase),
                    100% calc(100% - var(--fase)),calc(100% - var(--fase)) 100%,
                    var(--fase) 100%,0 calc(100% - var(--fase)),0 var(--fase));
  background:
    linear-gradient(90deg,transparent,#2f7fff 14%,#a9d4ff 50%,#2f7fff 86%,transparent)
      top center/62% 2px no-repeat,
    rgba(150,190,245,.17);
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.55))
         drop-shadow(0 22px 32px rgba(0,0,0,.62))}
/* Innen dasselbe dunkle Glas wie in den Panels - vorher war es die
   flache Seitenfarbe var(--bg). */
.steps li{background:linear-gradient(168deg,#16233c 0%,#101a2e 46%,#0a1120 100%)}


/* ══════════════════════════════════════════════════════════════
   DIE PLATTFORM, AUF DER DIE KARTEN STEHEN          28.08.2026
   ══════════════════════════════════════════════════════════════
   Vorher: eine Platte, die schmaler war als die Kartenreihe. Die
   sechs Module standen links und rechts darueber hinaus und
   schwebten sichtbar in der Luft - die Plattform trug sie nicht,
   sie lag nur darunter. Dazu weiche Verlaufskanten, die an den
   Ecken ausfransten.

   Jetzt: die Flaeche ist BREITER als die Kartenreihe und reicht
   weit genug nach oben, dass die Karten mit ihrem Fuss darauf
   aufsetzen. Und sie hat eine echte Kante.

   Zwei Formen zur Auswahl (Schalter im Kopf von layout.html):
     Vorgabe                  -> rund
     ?plattform=eckig         -> viereckig
   ══════════════════════════════════════════════════════════════ */

/* ── 1 · Die Karten liegen UEBER der Plattform ────────────────
   Beide stehen im selben Flex-Container. Ohne eigene z-Ebene malt
   die Plattform als spaeteres Geschwister ueber die Karten - dann
   verschwinden deren Fuesse dahinter statt darauf zu stehen. */
[data-seite="start"] .ea-bogen{position:relative;z-index:1}
[data-seite="start"] .ea-platte{position:relative;z-index:0}

/* ── 2 · Groesse: breiter als die Kartenreihe ─────────────────
   --ueber sagt, wie weit die Flaeche hinter die Karten hochreicht.
   Genau daraus entsteht "die Karten stehen darauf": ihre Fuesse
   liegen dann innerhalb der Flaeche, nicht davor. */
.ea-platte{
  --deck:clamp(52px,8vh,96px);
  --ueber:calc(var(--deck) * 1.05);
  max-width:min(1320px,100%);
  margin-top:calc(var(--ueber) * -1)}

/* ══ FORM 1 · RUND (Vorgabe) ══════════════════════════════════
   Ein Zylinder aus zwei Teilen: eine liegende Ellipse als Deck und
   darunter die Wand. Die Wand ist ein Rechteck, dessen UNTERE Kante
   mit demselben Radius nach unten ausbaucht wie die Ellipse - so
   schliesst der Koerper unten rund ab. Ihre gerade Oberkante wird
   von der vorderen Haelfte der Deck-Ellipse verdeckt; sichtbar
   bleibt deren Bogen. Das ergibt einen echten Zylinder, keine
   gemalte Andeutung. */
.ea-platte::before{
  left:0;right:0;top:0;height:calc(var(--deck) * 2);
  transform:none;
  border-radius:50%;
  background:
    radial-gradient(58% 74% at 50% 40%,rgba(140,190,255,.20),transparent 72%),
    repeating-linear-gradient(90deg,rgba(170,212,255,.13) 0 1px,transparent 1px 46px),
    linear-gradient(180deg,#8ea4c6 0%,#4d6289 16%,#26355a 44%,#141f38 72%,#0b1324 100%);
  box-shadow:
    inset 0 1.5px 0 rgba(214,234,255,.62),
    inset 0 0 0 1px rgba(150,195,255,.20),
    0 0 42px rgba(61,139,255,.20)}

/* Die Bruchkante Deck->Wand ist beim Zylinder der vordere Bogen der
   Ellipse. Der alte gerade Grat wuerde quer durch den Bogen laufen. */
.ea-platte::after{display:none}

/* Die Wand. overflow:hidden haelt Waben und Schild in der Form. */
.ea-plate{
  clip-path:none;
  border-radius:0 0 50% 50% / 0 0 var(--deck) var(--deck);
  min-height:clamp(150px,19vh,208px);
  background:linear-gradient(180deg,#1b273f 0%,#131d33 40%,#0c1425 78%,#080e1a 100%);
  box-shadow:
    inset 0 0 0 1px rgba(150,195,255,.16),
    inset 0 -22px 44px -26px rgba(0,0,0,.95)}
/* Die metallene Aussenkante der Wand. */
.ea-plate-kante{
  clip-path:none;
  border-radius:0 0 50% 50% / 0 0 calc(var(--deck) + 3px) calc(var(--deck) + 3px)}

/* Waben laufen als Wandtextur weiter, aber leiser als vorher -
   sie sollen die Wand strukturieren, nicht mit dem Schild
   konkurrieren. */
.ea-hex{opacity:.26}

/* ── 3 · Das Schild an der Wand ───────────────────────────────
   Eigene Platte mit eigener Fase, eigener Lichtkante und eigenem
   Schlagschatten - dadurch liest man, dass es AN der Wand haengt.
   drop-shadow statt box-shadow: clip-path schneidet aeussere
   Schatten weg (geschuetzte Zeile, Pruefgriff
   node _pruef/schatten-pruefen.js). */
.ea-schild{
  position:relative;z-index:2;
  width:min(74%,760px);
  margin:clamp(14px,2.4vh,30px) auto clamp(16px,2.6vh,34px);
  --fase:18px;
  clip-path:polygon(var(--fase) 0,calc(100% - var(--fase)) 0,100% var(--fase),
                    100% calc(100% - var(--fase)),calc(100% - var(--fase)) 100%,
                    var(--fase) 100%,0 calc(100% - var(--fase)),0 var(--fase));
  background:linear-gradient(168deg,#31456b 0%,#1d2b47 30%,#121d33 68%,#0d1526 100%);
  box-shadow:
    inset 0 1.5px 0 rgba(206,230,255,.40),
    inset 0 0 0 1px rgba(150,195,255,.20),
    inset 0 -14px 26px -18px rgba(0,0,0,.9);
  filter:drop-shadow(0 3px 3px rgba(0,0,0,.75))
         drop-shadow(0 16px 24px rgba(0,0,0,.6))}
/* Neon-Oberkante wie an jedem anderen Panel der Seite. */
.ea-schild::before{
  content:"";position:absolute;left:12%;right:12%;top:4px;height:2px;z-index:3;
  border-radius:2px;pointer-events:none;
  background:linear-gradient(90deg,transparent,#2f7fff 12%,#a9d4ff 50%,#2f7fff 88%,transparent)}
/* Vier Nieten - sie machen "angeschraubt" sichtbar. Ein einzelnes
   Hintergrundbild mit vier Positionen, kein viertes Element. */
.ea-schild::after{
  content:"";position:absolute;inset:11px 14px auto;height:calc(100% - 22px);z-index:3;
  pointer-events:none;
  background-image:
    radial-gradient(circle,rgba(226,240,255,.85) 0 1.4px,rgba(60,86,126,.9) 1.4px 2.6px,transparent 2.7px),
    radial-gradient(circle,rgba(226,240,255,.85) 0 1.4px,rgba(60,86,126,.9) 1.4px 2.6px,transparent 2.7px),
    radial-gradient(circle,rgba(226,240,255,.85) 0 1.4px,rgba(60,86,126,.9) 1.4px 2.6px,transparent 2.7px),
    radial-gradient(circle,rgba(226,240,255,.85) 0 1.4px,rgba(60,86,126,.9) 1.4px 2.6px,transparent 2.7px);
  background-size:8px 8px;
  background-repeat:no-repeat;
  background-position:left top,right top,left bottom,right bottom}

.ea-lockup{padding:clamp(12px,2vw,24px) clamp(16px,3vw,44px) clamp(6px,1vw,12px)}

/* ── 4 · Die Ringe am Boden liegen konzentrisch ───────────────
   Bei der eckigen Platte sassen runde Ringe unter einer eckigen
   Flaeche - das war der "Kreisel", der komisch aussah. Unter einer
   runden Plattform gehoeren sie hin. */
.ea-sockel{width:124%}
.ea-ring-1{width:96%}
.ea-ring-2{width:74%}
.ea-ring-3{width:52%}

/* ══ FORM 2 · VIERECKIG (?plattform=eckig) ════════════════════
   Dieselbe Groesse und dasselbe Schild, nur mit gerader Kante:
   ein Deck, das nach hinten wegkippt, und eine gerade Wand mit
   abgeschraegten Ecken. */
.ea-platte::before{
  border-radius:0;
  height:calc(var(--deck) * 3.4);
  top:calc(var(--deck) * -2.4);
  left:26px;right:26px;
  transform:perspective(1000px) rotateX(71deg);
  transform-origin:50% 100%;
  background:
    repeating-linear-gradient(0deg,rgba(170,212,255,.24) 0 1px,transparent 1px 28px),
    repeating-linear-gradient(90deg,rgba(170,212,255,.18) 0 1px,transparent 1px 52px),
    radial-gradient(70% 54% at 50% 100%,rgba(130,185,255,.26),transparent 74%),
    linear-gradient(180deg,#0a1120 0%,#15203a 22%,#243357 48%,#3c4f77 70%,#6d84ab 90%,#9db0d0 100%);
  box-shadow:inset 0 1px 0 rgba(150,195,255,.34)}
/* Bei der eckigen Form braucht es den hellen Grat an der
   Bruchkante wieder - dort trifft Deck auf Wand. */
.ea-platte::after{
  display:block;left:26px;right:26px;top:calc(var(--deck) - 2px);height:3px;
  background:linear-gradient(90deg,transparent,rgba(190,215,250,.55) 6%,
             rgba(246,251,255,.98) 50%,rgba(190,215,250,.55) 94%,transparent);
  box-shadow:0 0 14px 2px rgba(130,185,255,.34)}
.ea-plate{
  --fase:26px;
  border-radius:0;
  clip-path:polygon(0 0,100% 0,100% calc(100% - var(--fase)),
                    calc(100% - var(--fase)) 100%,var(--fase) 100%,0 calc(100% - var(--fase)))}
.ea-plate-kante{
  border-radius:0;
  clip-path:polygon(0 0,100% 0,100% calc(100% - var(--fase)),
                    calc(100% - var(--fase)) 100%,var(--fase) 100%,0 calc(100% - var(--fase)))}

/* ── 5 · Schmale Schirme ──────────────────────────────────────
   Unter 900 px steht die Kartenreihe nicht mehr nebeneinander;
   eine Plattform, die sie tragen soll, ergibt dort keinen Sinn
   mehr. Sie wird darum wieder zur reinen Standflaeche unter dem
   Block - kein Ueberlappen, keine negative Verschiebung. */
@media (max-width:900px){
  .ea-platte{--deck:clamp(34px,6vh,58px);--ueber:0px;max-width:min(560px,96%)}
  .ea-schild{width:min(90%,460px)}
  .ea-schild::after{inset:9px 10px auto;height:calc(100% - 18px)}
}


/* ── SCHILD: BREITE UND SCHRIFT ───────────────────────────────
   Mit 74 Prozent Breite lief die Wortmarke unter das rechte Emblem
   und wurde sichtbar abgeschnitten ("MQL4 - MQL!"). Breiter allein
   reicht nicht - beim naechsten laengeren Wort waere es wieder zu
   eng. Darum breiter UND eine Stufe kleiner, und die Wortmarke
   bekommt eine harte Grenze statt aus dem Schild zu laufen. */
.ea-schild{width:min(90%,980px)}
.ea-schild .ea-lockup{
  padding:clamp(10px,1.8vw,20px) clamp(14px,2.4vw,32px) clamp(6px,.9vw,10px);
  gap:clamp(10px,2vw,28px)}
.ea-schild .ea-l1{font-size:clamp(1.3rem,3.9vw,3rem)}
.ea-schild .ea-l2{font-size:clamp(.66rem,1.6vw,1.22rem)}
.ea-schild .ea-l3{font-size:clamp(.58rem,1.2vw,.94rem)}
.ea-schild .ea-emblem{width:clamp(36px,4.8vw,68px)}
/* Die Wortmarke darf das Schild nicht sprengen. */
.ea-schild .ea-lockup-txt{min-width:0;max-width:100%}
.ea-schild .ea-l1{white-space:nowrap;overflow-wrap:normal}


/* ── BREITE DER PLATTFORM ─────────────────────────────────────
   Gemessen mit node _pruef/buehne-messen.js: die Plattform war
   594 px breit, die Kartenreihe 1348 px - 754 px zu schmal. Die
   Ursache war NICHT max-width (das stand korrekt auf 1320 px),
   sondern die fehlende Breite: .ea-platte ist ein Flex-Kind von
   .ea-buehne und richtete sich damit nach seinem Inhalt, dem
   Schild. Es waechst nicht von selbst auf die Elternbreite.

   Mit width:100% traegt die Flaeche die Kartenreihe wirklich - und
   das Schild bekommt dadurch genug Platz, sodass die Wortmarke
   nicht mehr unter das rechte Emblem laeuft (gemessen waren es
   59 px Ueberlauf).
   GESCHUETZT: width:100% nie entfernen, sonst schrumpft die
   Plattform wieder auf Schildbreite. */
.ea-platte{width:100%}
/* Das Schild bleibt schmaler als die Plattform - es haengt an der
   Wand, es IST nicht die Wand. */
.ea-schild{width:min(58%,860px)}


/* ── DIE SCHEIBE MUSS ALS SCHEIBE ZU LESEN SEIN ───────────────
   Bei 1320 px Breite und 96 px Deckhoehe ist die Ellipse zwar
   geometrisch richtig, aber so flach, dass sie wie ein gerader
   Balken aussieht. Zwei Griffe dagegen:
   1. mehr Deckhoehe - der vordere Bogen bekommt sichtbaren Durchhang
   2. eine SCHARFE Kante statt eines auslaufenden Verlaufs. Genau
      das meinte Felix mit "die Kanten sind nicht richtig": eine
      runde Flaeche erkennt man am Rand, nicht an der Fuellung. */
.ea-platte{--deck:clamp(74px,12vh,148px)}

/* Der helle Rand der Scheibe. Ein eigener Ring statt nur einer
   Innenkante - er faehrt einmal um die ganze Ellipse und macht die
   Woelbung erst lesbar. */
.ea-platte::after{
  display:block;content:"";position:absolute;z-index:2;pointer-events:none;
  left:0;right:0;top:0;height:calc(var(--deck) * 2);
  border-radius:50%;
  border:1.5px solid rgba(196,226,255,.55);
  box-shadow:0 0 26px rgba(61,139,255,.34),
             inset 0 0 34px rgba(61,139,255,.14);
  background:none}
/* Bei der eckigen Fassung ist dieser Ring falsch - dort greift
   weiter unten wieder der gerade Grat. */
.ea-platte::after{
  border:0;border-radius:0;box-shadow:0 0 14px 2px rgba(130,185,255,.34)}

/* Die Wand faengt tiefer an, damit von der Scheibe oben wirklich
   etwas zu sehen ist statt nur ihrer vorderen Kante. */
.ea-plate{margin-top:calc(var(--deck) * .34)}


/* ── SCHEIBE OHNE ZUSAETZLICHE HOEHE ──────────────────────────
   Invariante 18 sagt: das Dashboard ist EINE Bildschirmseite. Der
   erste Anlauf mit der hoeheren Scheibe hat sie gebrochen - gemessen
   scrollten 4 von 6 Groessen, auf dem Laptop um 88 px.

   Ursache war nicht die Scheibe selbst, sondern der Abstand
   .ea-plate{margin-top:.34*deck}: der ADDIERT Hoehe. Die Scheibe
   darf nur nach OBEN wachsen, hinter die Karten - dort kostet sie
   nichts, weil die negative Verschiebung --ueber sie dorthin zieht.

   Pruefgriff nach jeder Aenderung hier: node _pruef/eine-seite.js
   Alle sechs Groessen muessen "passt" melden. */
.ea-plate{margin-top:0}
.ea-platte{--deck:clamp(64px,10vh,132px);--ueber:calc(var(--deck) * 1.34)}
.ea-plate{min-height:clamp(132px,17vh,190px)}


/* ── NIEDRIGE FENSTER ─────────────────────────────────────────
   Auf einem 1366x768-Laptop bleiben nach Browserleisten nur rund
   625 px Hoehe. Dort scrollte die Seite noch um 45 px. Die
   Plattform ist der einzige Teil, der sich ohne Verlust straffen
   laesst - Karten und Ueberschrift nicht.
   Gemessen mit node _pruef/eine-seite.js. */
@media (max-height:820px){
  .ea-platte{--deck:clamp(50px,7.6vh,92px)}
  .ea-plate{min-height:clamp(104px,13.5vh,146px)}
  .ea-schild{margin-top:clamp(8px,1.3vh,16px);margin-bottom:clamp(10px,1.7vh,20px)}
  .ea-schild .ea-lockup{padding-top:clamp(8px,1.2vw,14px);padding-bottom:clamp(4px,.7vw,8px)}
}


/* ── DIE LETZTEN 29 PIXEL ─────────────────────────────────────
   Auf 1366x768 fehlten noch 29 px. Sie kommen nicht aus einer
   weiteren Kuerzung, sondern aus --ueber: je weiter die Plattform
   HINTER die Karten gezogen wird, desto weniger Hoehe kostet sie -
   und desto tiefer stehen die Karten in der Flaeche, was ohnehin
   richtiger aussieht. Die Scheibe wird dabei nicht kleiner. */
@media (max-height:820px){
  .ea-platte{--ueber:calc(var(--deck) * 1.95)}
  .ea-url{padding-top:5px;padding-bottom:5px}
}


/* ── DAS SCHILD MUSS FREI STEHEN ──────────────────────────────
   Um die Ein-Bildschirm-Regel zu halten, wurde die Plattform immer
   weiter hinter die Karten gezogen (--ueber bis 1.95). Das hat die
   Hoehe gerettet und dabei das Schild verdeckt: "MQL4 - MQL5" lag
   hinter den Karten.

   Richtig ist die andere Reihenfolge - erst das Schild so klein
   machen, dass es passt, dann nur so weit hochziehen, dass die
   Scheibe hinter den Karten sichtbar wird. Die Hoehe kommt aus dem
   Schild, nicht aus der Verschiebung.
   GESCHUETZT: --ueber nie wieder ueber 0.7 setzen, sonst
   verschwindet die Wortmarke hinter der Kartenreihe.
   Pruefgriffe: node _pruef/eine-seite.js · node _pruef/buehne-messen.js */
.ea-platte{--ueber:calc(var(--deck) * .58)}
.ea-plate{min-height:0}
.ea-schild{
  width:min(52%,720px);
  margin-top:clamp(6px,1vh,14px);
  margin-bottom:clamp(8px,1.2vh,18px)}
.ea-schild .ea-lockup{
  padding:clamp(8px,1.2vw,16px) clamp(12px,2vw,26px) clamp(4px,.6vw,8px);
  gap:clamp(8px,1.5vw,20px)}
.ea-schild .ea-l1{font-size:clamp(1.15rem,2.6vw,2.1rem)}
.ea-schild .ea-l2{font-size:clamp(.6rem,1.15vw,.9rem)}
.ea-schild .ea-l3{font-size:clamp(.52rem,.9vw,.72rem)}
.ea-schild .ea-emblem{width:clamp(30px,3.4vw,50px)}
.ea-url{padding:6px 14px;font-size:clamp(9px,.85vw,11px)}

@media (max-height:820px){
  .ea-platte{--ueber:calc(var(--deck) * .62)}
}


/* ── KURZE FENSTER ───────────────────────────────────────────
   Erster Anlauf hier hat die Scheibe UND das Schild auf einmal
   angefasst und dabei Mobil um 16 px verschlechtert, statt es zu
   verbessern - zwei Stellschrauben gleichzeitig, Wirkung nicht mehr
   zuzuordnen. Jetzt nur EINE: die Scheibe wird flacher.
   Pruefgriff: node _pruef/eine-seite.js */
@media (max-height:820px){
  .ea-platte{--deck:clamp(34px,5.2vh,64px)}
}


/* ── DIE ADRESSZEILE IST DER VERZICHTBARE POSTEN ──────────────
   Schild sichtbar UND alles auf einem Bildschirm - beides zusammen
   geht auf niedrigen Fenstern nur, wenn etwas weicht. Von allem auf
   dem Schild ist die Adresszeile "www.felixrohlfing.dev" das
   Entbehrlichste: sie steht auf jedem Geraet ohnehin oben in der
   Adressleiste des Browsers. Wortmarke, Name und Rolle bleiben.
   Sie kostet rund 30 px - genau die, die fehlen. */
@media (max-height:700px){
  .ea-url{display:none}
}
@media (max-width:900px){
  .ea-url{display:none}
  .ea-platte{--deck:clamp(26px,4vh,46px)}
  .ea-schild{width:min(86%,430px);margin-top:6px;margin-bottom:8px}
  .ea-schild .ea-lockup{padding:8px 12px 6px;gap:10px}
  .ea-schild .ea-emblem{width:clamp(26px,7vw,38px)}
}


/* ── KLEINSTES HANDY (360x740) ────────────────────────────────
   Dort fehlten zuletzt 13 px. Geholt werden sie am Schild, nicht an
   der Scheibe: eine Scheibe unter 22 px Hoehe waere keine Scheibe
   mehr, ein zwei Punkt kleinerer Schriftzug faellt niemandem auf. */
@media (max-width:400px){
  /* Die letzten 5 px: das Schild sitzt enger in der Wand. Unter
     dem Schild steht dort nichts mehr (die Adresszeile ist auf
     schmalen Geraeten ausgeblendet), der Rand traegt also nichts. */
  .ea-schild{width:min(92%,340px);margin-top:2px;margin-bottom:2px}
  .ea-schild .ea-lockup{padding:6px 10px 4px;gap:8px}
  .ea-schild .ea-l1{font-size:1rem}
  .ea-schild .ea-emblem{width:26px}
  .ea-platte{--deck:clamp(22px,3.4vh,38px)}
}


/* ══════════════════════════════════════════════════════════════
   PLATTFORM UND SCHILD ALS EIN STUECK               29.08.2026
   ══════════════════════════════════════════════════════════════ */

/* ── 1 · Die gerade Metallkante faellt weg ────────────────────
   .ea-plate-kante ist 3 px groesser als die Wand und hat oben eine
   GERADE Kante. Ueber einer runden Scheibe stand sie als heller
   Strich quer durchs Bild - der auffaelligste Grund, warum
   Plattform und Schild wie zwei Teile aussahen. Der metallene Rand
   kommt bei der runden Fassung vom Ring der Scheibe.
   Bei der eckigen Fassung gehoert sie weiterhin dazu. */
.ea-plate-kante{display:none}
.ea-plate-kante{display:block}

/* ── 2 · Der Ring der Scheibe wird leiser ─────────────────────
   Mit 55 Prozent Deckkraft und 1,5 px war er eine gezogene weisse
   Linie statt einer Materialkante. Eine Kante aus Metall ist oben
   hell und unten dunkel, nicht ringsum gleich. */
.ea-platte::after{
  border-width:1px;
  border-color:rgba(196,226,255,.34);
  border-top-color:rgba(214,236,255,.62);
  border-bottom-color:rgba(120,164,225,.22);
  box-shadow:0 0 22px rgba(61,139,255,.22),
             inset 0 0 30px rgba(61,139,255,.10)}

/* ── 3 · Das Schild sitzt IN der Wand, nicht darauf ───────────
   Kein Schlagschatten mehr: ein Bauteil, das zum Koerper gehoert,
   wirft keinen Schatten auf ihn. Stattdessen eine gefraeste Nut -
   oben innen dunkel (dort faellt kein Licht hinein), unten aussen
   eine feine Lichtkante (dort trifft es auf die Stufe). Genau so
   liest man ein eingelassenes Typenschild. */
.ea-schild{
  filter:none;
  background:linear-gradient(170deg,#26375a 0%,#1a2740 34%,#111b30 72%,#0d1526 100%);
  box-shadow:
    /* die Nut: oben Schatten der Stufe */
    inset 0 3px 6px -2px rgba(0,0,0,.85),
    inset 0 1px 0 rgba(0,0,0,.6),
    /* innen umlaufend eine feine Materialkante */
    inset 0 0 0 1px rgba(150,195,255,.16),
    /* unten die Lichtkante der Stufe - sie macht die Tiefe */
    inset 0 -1.5px 0 rgba(198,226,255,.30),
    /* und aussen eine hauchduenne Aufhellung, wo die Wand wieder
       nach vorn kommt */
    0 1px 0 rgba(198,226,255,.13)}

/* Die Woelbung unten folgt der Wand - beide Formen sprechen damit
   dieselbe Sprache. Oben bleibt es gerade, dort schneidet die
   Scheibe ab. */
.ea-schild{
  --fase:14px;
  clip-path:none;
  border-radius:3px 3px 34% 34% / 3px 3px calc(var(--deck) * .34) calc(var(--deck) * .34)}
.ea-schild{border-radius:3px}

/* Die Neonkante war die Oberkante eines aufgesetzten Panels. In
   einer Nut sitzt sie falsch - dort ist Schatten. */
.ea-schild::before{display:none}

/* Die Nieten bleiben, aber leiser: sie sagen "angebracht", und das
   soll man sehen, ohne dass es das erste ist, was auffaellt. */
.ea-schild::after{
  opacity:.5}

/* ── 4 · Die Wand bekommt die Nut ─────────────────────────────
   Damit die Vertiefung glaubwuerdig ist, muss die Wand rund um das
   Schild einen Hauch heller sein - dort steht sie vor. */
.ea-plate{
  background:
    radial-gradient(120% 90% at 50% 0%,rgba(150,196,255,.10),transparent 62%),
    linear-gradient(180deg,#1d2a44 0%,#141f36 40%,#0c1425 78%,#080e1a 100%)}


/* ══════════════════════════════════════════════════════════════
   DIE PLATTFORM IST EINE FORM                        29.08.2026
   ══════════════════════════════════════════════════════════════ */

/* ── 1 · Die Waben fallen weg ─────────────────────────────────
   Sie lagen als Rechteck ueber einer runden Scheibe und brachen
   links und rechts vom Schild als Flicken auf. Eine runde Flaeche
   mit einem eckigen Muster darauf kann nie einheitlich wirken.
   GESCHUETZT: nicht als "Textur" wieder einschalten, ohne sie
   vorher an die Form der Scheibe zu binden. */
.ea-hex{display:none}

/* ── 2 · Das Schild IST die Vorderseite ───────────────────────
   Vorher: Wand 1320 px, Schild 686 px - ein kleines Rechteck auf
   einer grossen Flaeche, also sichtbar zwei Teile. Jetzt laeuft die
   Namensflaeche von Rand zu Rand und uebernimmt die Rundung der
   Wand. Damit gibt es nur noch EINE Silhouette.
   GESCHUETZT: dem Schild nie wieder eine eigene Breite geben. */
.ea-schild{
  width:100%;
  margin:0;
  padding:clamp(10px,1.6vh,22px) 0 clamp(8px,1.2vh,16px);
  border-radius:0 0 50% 50% / 0 0 var(--deck) var(--deck);
  background:none;
  box-shadow:none;
  filter:none}
/* Die Nieten sassen an den Ecken eines Schildes, das es nicht mehr
   gibt. An den Ecken der ganzen Plattform waeren sie sinnlos. */
.ea-schild::after{display:none}

/* Die Wand traegt jetzt das Material der Namensflaeche selbst:
   oben die Stufe unter der Scheibe, unten die Lichtkante, wo sie
   sich zum Boden hin woelbt. */
.ea-plate{
  background:
    linear-gradient(180deg,rgba(0,0,0,.55) 0,transparent 14px),
    radial-gradient(140% 120% at 50% 0%,rgba(126,176,246,.16),transparent 66%),
    linear-gradient(180deg,#22314e 0%,#16223a 34%,#0d1728 72%,#080e1a 100%);
  box-shadow:
    inset 0 0 0 1px rgba(150,195,255,.13),
    inset 0 -2px 0 rgba(198,226,255,.20)}

/* Eine umlaufende Fraesnut, parallel zur Kante. Sie sagt "hier ist
   ein Feld eingelassen", OHNE ein zweites Rechteck einzufuehren -
   sie folgt derselben Rundung wie die Wand. */
.ea-plate::after{
  content:"";position:absolute;z-index:0;pointer-events:none;
  left:clamp(14px,2vw,34px);right:clamp(14px,2vw,34px);
  top:clamp(8px,1.2vh,16px);bottom:clamp(8px,1.2vh,16px);
  border-radius:0 0 50% 50% / 0 0 calc(var(--deck) * .8) calc(var(--deck) * .8);
  background:none;
  box-shadow:
    inset 0 1px 0 rgba(0,0,0,.55),
    inset 0 0 0 1px rgba(150,195,255,.10),
    inset 0 -1px 0 rgba(198,226,255,.16)}

/* ── 3 · Die Kartenschatten ───────────────────────────────────
   .ea-mod::after ist ein schwarzer Verlauf mit blur(6px), der bis
   zur Kartenunterkante reicht - auf der hellen Plattform stand er
   als dunkler Klecks unter jeder Karte. Eine Karte braucht einen
   Aufsetzschatten, aber einen schmalen und weichen: er zeigt, wo
   sie den Boden beruehrt, nicht wo sie endet. */
[data-seite="start"] .ea-mod::after{
  opacity:.34;
  filter:blur(11px)}
[data-seite="start"] .ea-mod-in{
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.5))
         drop-shadow(0 14px 20px rgba(0,0,0,.42))}


/* ── DER INHALT BLEIBT MITTIG ─────────────────────────────────
   Seit die Namensflaeche von Rand zu Rand laeuft, spannt auch das
   Raster darin ueber die volle Breite - die beiden Embleme wurden
   dadurch an die Aussenkanten gedrueckt und standen zusammenhanglos
   in den Ecken. Die FLAECHE soll durchlaufen, der INHALT nicht. */
.ea-schild .ea-lockup{
  max-width:min(920px,72%);
  margin-inline:auto}
.ea-url{max-width:min(920px,72%);margin-inline:auto}


/* ── KLEINSTES HANDY: DIE NAMENSFLAECHE ───────────────────────
   Seit die Flaeche von Rand zu Rand laeuft, arbeitet sie mit
   padding statt mit Aussenabstaenden - die alten margin-Werte im
   400-px-Block laufen darum ins Leere. Auf 360x740 fehlten dadurch
   14 px. Hier derselbe Gedanke mit dem richtigen Hebel.
   Pruefgriff: node _pruef/eine-seite.js */
@media (max-width:400px){
  .ea-schild{padding:2px 0 2px}
  .ea-platte::after{top:2px}
  .ea-schild .ea-lockup{max-width:96%}
}


/* ══════════════════════════════════════════════════════════════
   VIERECKIGE PLATTFORM                               29.08.2026
   ══════════════════════════════════════════════════════════════
   Felix hat sich fuer die eckige Form entschieden, und der Grund
   traegt: auf einer runden Scheibe gibt es keine gerade Flaeche,
   auf die ein rechteckiges Schild passt. Jeder Versuch war ein
   Kompromiss. Hier ist die Vorderseite eine gerade Wand - darauf
   sitzt ein Schild ohne Widerspruch.

   Die runde Fassung liegt unter _pruef/style.css.mit-runder-
   plattform, falls sie je wieder gebraucht wird.
   ══════════════════════════════════════════════════════════════ */

/* ── 1 · Nichts ist mehr rund ─────────────────────────────────
   Diese Regeln machten die Scheibe. Sie muessen ausdruecklich
   zurueckgenommen werden, sonst runden sie die eckige Plattform an
   den Ecken wieder ab. */
.ea-platte::before{border-radius:0}
.ea-platte::after{border-radius:0;border:0}
.ea-plate{border-radius:0}
.ea-plate::after{border-radius:0}
.ea-schild{border-radius:0}

/* ── 2 · Die Wand ─────────────────────────────────────────────
   Eine gerade Front mit angeschraegten unteren Ecken - dieselbe
   Fase wie an jedem anderen Bauteil der Seite. */
.ea-plate{
  --fase:26px;
  clip-path:polygon(0 0,100% 0,100% calc(100% - var(--fase)),
                    calc(100% - var(--fase)) 100%,var(--fase) 100%,0 calc(100% - var(--fase)));
  background:
    linear-gradient(180deg,rgba(0,0,0,.5) 0,transparent 12px),
    linear-gradient(180deg,#22314e 0%,#16223a 36%,#0d1728 74%,#080e1a 100%);
  box-shadow:inset 0 0 0 1px rgba(150,195,255,.13)}
/* Die metallene Aussenkante gehoert zur eckigen Fassung - bei der
   runden war sie der stoerende gerade Strich, hier ist sie richtig. */
.ea-plate-kante{
  display:block;
  clip-path:polygon(0 0,100% 0,100% calc(100% - var(--fase)),
                    calc(100% - var(--fase)) 100%,var(--fase) 100%,0 calc(100% - var(--fase)))}

/* ── 3 · Das Schild sitzt vorn auf der Wand ───────────────────
   Jetzt darf es wieder eine eigene Platte sein: gerade Flaeche,
   gerades Schild, kein Formkonflikt. Fase, Lichtkante oben,
   Schlagschatten - dieselbe Rezeptur wie bei den Panels der
   Unterseiten, damit es sich einreiht. */
.ea-schild{
  width:min(62%,820px);
  margin:clamp(12px,1.8vh,24px) auto clamp(10px,1.5vh,20px);
  padding:clamp(10px,1.4vw,18px) clamp(16px,2.4vw,34px) clamp(6px,.9vw,12px);
  --fase:16px;
  clip-path:polygon(var(--fase) 0,calc(100% - var(--fase)) 0,100% var(--fase),
                    100% calc(100% - var(--fase)),calc(100% - var(--fase)) 100%,
                    var(--fase) 100%,0 calc(100% - var(--fase)),0 var(--fase));
  background:linear-gradient(168deg,#31456b 0%,#1d2b47 32%,#121d33 70%,#0d1526 100%);
  box-shadow:
    inset 0 1.5px 0 rgba(206,230,255,.42),
    inset 0 0 0 1px rgba(150,195,255,.20),
    inset 0 -12px 22px -16px rgba(0,0,0,.9);
  /* clip-path schneidet aeussere box-shadow weg - darum drop-shadow.
     GESCHUETZT, Pruefgriff: node _pruef/schatten-pruefen.js */
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.7))
         drop-shadow(0 12px 18px rgba(0,0,0,.55))}
/* Die Lichtkante oben - wie an jedem Panel der Website. */
.ea-schild::before{
  display:block;content:"";position:absolute;left:14%;right:14%;top:3px;height:2px;z-index:3;
  border-radius:2px;pointer-events:none;
  background:linear-gradient(90deg,transparent,#2f7fff 12%,#a9d4ff 50%,#2f7fff 88%,transparent)}
.ea-schild::after{display:none}
.ea-schild .ea-lockup{max-width:100%;margin-inline:0}
.ea-url{max-width:100%;margin-inline:auto}

/* Die umlaufende Fraesnut war fuer die runde Fassung gedacht, in
   der es kein eigenes Schild mehr gab. Jetzt gibt es wieder eins. */
.ea-plate::after{display:none}

/* ── 4 · Die Schatten um die Karten fallen weg ────────────────
   .ea-mod::after war ein schwarzer Verlauf unter jeder Karte. Auf
   der Plattform stand er als dunkler Klecks - Felix hat sie an
   mehreren Karten eingekreist. Ersatzlos.

   Die Karte selbst behaelt einen KNAPPEN Eigenschatten: ohne ihn
   liegt sie flach auf dem Hintergrund. Er ist jetzt so eng, dass
   nichts mehr auf die Plattform ausblutet. */
[data-seite="start"] .ea-mod::after{display:none}
[data-seite="start"] .ea-mod-in{
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.45))
         drop-shadow(0 6px 9px rgba(0,0,0,.34))}


/* ── ECKIGE PLATTFORM AUF NIEDRIGEN FENSTERN ──────────────────
   Das Schild ist wieder eine eigene Platte und bringt damit
   Aussenabstand UND Innenabstand mit - zusammen rund 38 px, die es
   in der randlosen Fassung nicht gab. Auf 1366x768 und dem kleinen
   Handy fehlten dadurch wieder 34 bzw. 33 px.
   Gekuerzt wird am Schild, nicht an der Plattform: die Fase und die
   Lichtkante bleiben erhalten, nur die Luft drumherum wird knapper.
   Pruefgriff: node _pruef/eine-seite.js (alle sechs "passt") */
@media (max-height:820px){
  .ea-schild{margin:6px auto 6px;padding:6px 20px 4px}
  .ea-platte{--ueber:calc(var(--deck) * .86)}
}
@media (max-width:400px){
  /* Die letzten 6 px auf 360x740: der Rand des Schildes, nicht
     seine Fase - die Form bleibt, nur die Luft geht. */
  .ea-schild{margin:2px auto 2px;padding:4px 12px 2px;width:min(92%,340px)}
  .ea-platte{--ueber:calc(var(--deck) * 1.05)}
}


/* ══════════════════════════════════════════════════════════════
   DAS SCHILD AUS DEM MATERIAL DER WAND               29.08.2026
   ══════════════════════════════════════════════════════════════ */

/* ── 1 · Die Boegen fallen weg ────────────────────────────────
   .ea-ring-1/2/3 sind Ellipsen (border-radius:50%). Sie gehoerten
   zur runden Plattform. Um eine viereckige Platte herum sind sie
   falsch - Felix hat sie links und rechts als Boegen gesehen.
   Das weiche Bodenlicht (.ea-sockel::before) bleibt: das ist kein
   Bogen, sondern der Schein, in dem die Platte steht. */
.ea-ring{display:none}

/* ── 2 · Der weisse Rahmen faellt weg ─────────────────────────
   .ea-plate-kante ist ein Verlauf, der bei reinem Weiss beginnt und
   drei Pixel ueber die Wand hinausragt. Gedacht war gebuerstetes
   Metall, gerendert war es ein weisser Strich um alles herum.
   Die Kante macht jetzt die Wand selbst - oben Licht, unten
   Schatten, so wie eine echte Materialkante aussieht.
   GESCHUETZT: nie wieder als weisser Aussenrahmen zurueckholen. */
.ea-plate-kante{display:none}
.ea-plate{
  box-shadow:
    inset 0 1px 0 rgba(196,224,255,.30),
    inset 0 -1px 0 rgba(0,0,0,.75),
    inset 1px 0 0 rgba(255,255,255,.05),
    inset -1px 0 0 rgba(0,0,0,.45)}

/* ── 3 · Das Schild ist die Wand, eine Stufe heller ───────────
   Es hatte eine andere Farbfamilie, einen eigenen Rahmen und eine
   blaue Neonkante - drei Signale, die alle sagen "ich gehoere nicht
   hierher". Jetzt: dasselbe Material, nur heller, weil es vorsteht
   und mehr Licht abbekommt. Die Kante ist eine echte Fase, oben
   hell und unten dunkel. Kein Rahmen, keine Neonlinie. */
.ea-schild{
  background:linear-gradient(180deg,#2c3e63 0%,#22314f 38%,#1a2740 72%,#15203a 100%);
  box-shadow:
    inset 0 1px 0 rgba(206,230,255,.38),
    inset 0 -1px 0 rgba(0,0,0,.7),
    inset 1px 0 0 rgba(255,255,255,.07),
    inset -1px 0 0 rgba(0,0,0,.45);
  /* Ein KURZER Schatten auf die Wand - er sagt "das sitzt davor".
     Ein langer wuerde es wieder schweben lassen.
     drop-shadow statt box-shadow, weil clip-path aeussere Schatten
     wegschneidet. Pruefgriff: node _pruef/schatten-pruefen.js */
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.62))}
/* Die blaue Neonkante war das dritte "ich bin ein Fremdkoerper". */
.ea-schild::before{display:none}

/* ── 4 · Die Adresszeile ohne eigenen Kasten ──────────────────
   Sie hatte Rahmen und Hintergrund und war damit ein vierter
   Kasten im Kasten. Jetzt nur eine Haarlinie darueber - sie trennt,
   ohne ein neues Bauteil aufzumachen. */
.ea-url{
  background:none;
  border:0;
  border-top:1px solid rgba(150,195,255,.14);
  border-radius:0;
  margin-top:clamp(6px,.9vh,12px);
  padding-top:clamp(6px,.9vh,10px)}


/* ══════════════════════════════════════════════════════════════
   EIN BLOCK, EINE FARBE                              29.08.2026
   ══════════════════════════════════════════════════════════════ */

/* ── 1 · Der "Sichtrahmen" ────────────────────────────────────
   .ea-sockel::after ist ein Radialverlauf in einer Box von x -106
   bis 1530 mit blur(9px). Der Verlauf wird an den Boxkanten
   abgeschnitten; die Unschaerfe macht daraus ein weiches RECHTECK
   quer ueber den halben Bildschirm - kein Schein, ein Rahmen.
   GESCHUETZT: einen geblurrten Verlauf nie so gross aufziehen, dass
   er seine eigene Box beruehrt. Dann sieht man die Box. */
.ea-sockel::after{display:none}
/* Das verbleibende Bodenlicht wird kleiner als seine Box und
   verschwindet dadurch, bevor es an eine Kante stoesst. */
.ea-sockel::before{
  left:50%;top:auto;bottom:-10px;width:74%;height:120px;
  background:radial-gradient(closest-side,rgba(61,139,255,.34),rgba(61,139,255,.08) 52%,transparent 76%)}

/* ── 2 · Der Block hat ueberall dieselbe Farbe ────────────────
   Vorher: Deckflaeche hell (#9db0d0), Wand dunkel (#22314e) - zwei
   Farbfamilien an einem Koerper. Jetzt EIN Material. Der
   Unterschied zwischen oben und vorne kommt nur noch aus der
   Lichtmenge, so wie an einem echten Block: die waagerechte
   Deckflaeche faengt mehr Licht als die senkrechte Wand.
   GESCHUETZT: nie wieder zwei Farbfamilien an einem Koerper. */
.ea-platte::before{
  background:
    repeating-linear-gradient(90deg,rgba(226,240,255,.10) 0 1px,transparent 1px 54px),
    repeating-linear-gradient(0deg,rgba(226,240,255,.08) 0 1px,transparent 1px 30px),
    linear-gradient(180deg,#6d82a8 0%,#61769c 46%,#586d92 100%);
  filter:none}
.ea-plate{
  background:linear-gradient(180deg,#54688d 0%,#4d6084 62%,#475a7c 100%);
  box-shadow:
    inset 0 1px 0 rgba(232,242,255,.42),
    inset 0 -1px 0 rgba(0,0,0,.42)}

/* ── 3 · Das Schild: dunkle Platte, scharfe Kante ─────────────
   Auf einem hellen Block ist ein helles, weiches Schild nicht zu
   sehen. Jetzt eine dunkle Platte mit gerader Kante, direkt auf der
   Wand - kein Verlauf ueber vier Stopps, keine Fase, kein weicher
   Schlagschatten. Die Wortmarke steht damit klar drauf, und der
   Kontrast der Schrift steigt statt zu fallen.
   Pruefgriff: node _pruef/zugaenglich.js */
.ea-schild{
  clip-path:none;
  border-radius:2px;
  background:linear-gradient(180deg,#16223a 0%,#111a2e 100%);
  box-shadow:
    inset 0 1px 0 rgba(186,214,255,.22),
    0 1px 0 rgba(232,242,255,.30),
    0 2px 4px rgba(0,0,0,.5);
  filter:none}
.ea-schild::before{display:none}
.ea-schild::after{display:none}

/* Die Adresszeile bleibt auf der dunklen Platte - dort ist sie
   lesbar, ohne einen eigenen Kasten zu brauchen. */
.ea-url{border-top-color:rgba(150,195,255,.20)}


/* ══════════════════════════════════════════════════════════════
   SOCKEL UND FRONTSCHILD, NEU KONSTRUIERT            29.08.2026
   ══════════════════════════════════════════════════════════════
   Ein Koerper aus zwei Flaechen, die sich EINE Vorderkante teilen:
   oben ein Trapez, vorn ein Rechteck. Die Perspektive ist gezeichnet
   (clip-path), nicht gerechnet (rotateX) - deshalb kann keine
   Flaeche mehr ueber die andere hinausragen.
   ══════════════════════════════════════════════════════════════ */

/* ── 1 · Die Deckflaeche ──────────────────────────────────────
   Trapez: hinten um 7 Prozent je Seite eingezogen, vorn auf voller
   Breite. Kein transform, keine Perspektivrechnung - damit steht
   die Silhouette fest und erzeugt keine Zipfel.
   GESCHUETZT: nie wieder rotateX auf diese Flaeche. Eine gekippte
   Flaeche projiziert breiter als ihre Grundflaeche; genau das waren
   die seitlichen Auswuechse. */
.ea-platte::before{
  left:0;right:0;top:0;
  height:var(--deck);
  transform:none;
  border-radius:0;
  clip-path:polygon(7% 0,93% 0,100% 100%,0 100%);
  background:
    repeating-linear-gradient(0deg,rgba(226,240,255,.07) 0 1px,transparent 1px 26px),
    linear-gradient(180deg,#5d7096 0%,#687da3 52%,#7288ae 100%);
  box-shadow:none;
  filter:none}

/* Die Vorderkante des Koerpers: dort trifft die waagerechte
   Deckflaeche auf die senkrechte Front. An dieser Kante bricht das
   Licht - eine schmale helle Linie, sonst nichts. */
.ea-platte::after{
  display:block;content:"";position:absolute;z-index:2;pointer-events:none;
  left:0;right:0;top:calc(var(--deck) - 1px);height:2px;
  border:0;border-radius:0;background:none;
  background-image:linear-gradient(90deg,
    rgba(232,242,255,.30),rgba(240,247,255,.85) 12%,
    rgba(240,247,255,.85) 88%,rgba(232,242,255,.30));
  box-shadow:0 1px 10px rgba(120,180,255,.30)}

/* ── 2 · Die Frontflaeche ─────────────────────────────────────
   Setzt genau an der Vorderkante an, volle Breite, gerade Seiten.
   Dasselbe Material wie oben, nur weniger Licht - eine senkrechte
   Flaeche faengt weniger als eine waagerechte. Das ist der ganze
   Unterschied; die Farbe ist dieselbe. */
.ea-plate{
  clip-path:none;
  border-radius:0;
  background:linear-gradient(180deg,#4c5f83 0%,#465877 58%,#3f5069 100%);
  box-shadow:inset 0 -1px 0 rgba(0,0,0,.42)}

/* ── 3 · Das Frontschild ──────────────────────────────────────
   Eine duenne Fassung aus demselben Material wie der Sockel, eine
   Stufe heller, weil sie vorsteht. Darin ein vertieftes dunkles
   Feld - dort steht die Schrift, und dort ist sie auch lesbar.
   Zusammen liest man "montiertes Schild", nicht "Kasten davor". */
.ea-schild{
  position:relative;
  width:min(54%,760px);
  margin:clamp(12px,1.8vh,22px) auto clamp(12px,1.8vh,22px);
  padding:clamp(9px,1.2vw,14px);
  clip-path:none;
  border-radius:3px;
  background:linear-gradient(180deg,#728cb4 0%,#5f7499 46%,#54688d 100%);
  box-shadow:
    inset 0 1px 0 rgba(236,245,255,.55),
    inset 0 -1px 0 rgba(0,0,0,.45),
    0 2px 5px rgba(0,0,0,.45);
  filter:none}

/* Das vertiefte Feld. Als Pseudo-Element, damit das HTML gleich
   bleibt; der Inhalt liegt per z-index darueber. */
.ea-schild::before{
  display:block;content:"";position:absolute;z-index:0;
  inset:clamp(9px,1.2vw,14px);
  border-radius:2px;
  background:linear-gradient(180deg,#131e33 0%,#0e1728 100%);
  box-shadow:
    inset 0 2px 5px rgba(0,0,0,.75),
    inset 0 -1px 0 rgba(186,214,255,.16);
  left:clamp(9px,1.2vw,14px);right:clamp(9px,1.2vw,14px);
  top:clamp(9px,1.2vw,14px);bottom:clamp(9px,1.2vw,14px)}
.ea-schild .ea-lockup,.ea-schild .ea-url{position:relative;z-index:1}

/* Vier Nieten in der Fassung - sie sagen "angeschraubt". Klein und
   ruhig: sie sollen zu sehen sein, nicht auffallen. */
.ea-schild::after{
  display:block;content:"";position:absolute;z-index:2;pointer-events:none;
  inset:4px;
  background-image:
    radial-gradient(circle,rgba(240,247,255,.9) 0 1.1px,rgba(40,58,88,.9) 1.1px 2.1px,transparent 2.2px),
    radial-gradient(circle,rgba(240,247,255,.9) 0 1.1px,rgba(40,58,88,.9) 1.1px 2.1px,transparent 2.2px),
    radial-gradient(circle,rgba(240,247,255,.9) 0 1.1px,rgba(40,58,88,.9) 1.1px 2.1px,transparent 2.2px),
    radial-gradient(circle,rgba(240,247,255,.9) 0 1.1px,rgba(40,58,88,.9) 1.1px 2.1px,transparent 2.2px);
  background-size:6px 6px;
  background-repeat:no-repeat;
  background-position:left top,right top,left bottom,right bottom;
  opacity:.8}

/* Die Adresszeile sitzt im vertieften Feld und braucht dort keine
   eigene Einfassung mehr. */
.ea-url{
  border:0;border-top:1px solid rgba(150,195,255,.16);
  margin-top:clamp(5px,.8vh,10px);padding:clamp(5px,.8vh,9px) 14px 0}

/* ── 4 · Die Karten stehen auf der Flaeche ────────────────────
   Sie sollen die Deckflaeche beruehren, nicht darueber schweben.
   --ueber zieht den Sockel so weit hoch, dass die Kartenfuesse
   INNERHALB der Deckflaeche liegen.
   Pruefgriff: node _pruef/buehne-messen.js */
.ea-platte{--ueber:calc(var(--deck) * .62)}


/* ── DAS VERTIEFTE FELD BRAUCHT height:auto ───────────────────
   Gemessen war das Feld 684 x 2 px statt 684 x 136. Ursache: eine
   fruehere Schicht setzte auf demselben Pseudo-Element
   .ea-schild::before die blaue Neonkante mit height:2px. Ein
   explizites height schlaegt den bottom-Abstand aus inset - das
   Feld war also da, nur zwei Pixel hoch, und im Bild sah man davon
   nur einen Strich quer ueber das Schild.
   GESCHUETZT: height und width hier ausdruecklich auf auto stellen.
   inset allein reicht nicht, solange eine aeltere Regel eine feste
   Hoehe gesetzt hat.
   Gefunden mit getComputedStyle(el,'::before') - im Bild war es
   nicht zu erkennen, nur zu messen. */
.ea-schild::before{width:auto;height:auto}


/* ── SOCKEL AUF NIEDRIGEN FENSTERN ────────────────────────────
   Die Fassung des Schildes kostet 4 x 14 px, dazu die Deckflaeche.
   Auf kurzen Fenstern wird beides knapper - die Form bleibt. */
@media (max-height:820px){
  .ea-platte{--deck:clamp(30px,4.6vh,58px)}
  .ea-schild{
    margin:8px auto 8px;
    padding:8px}
  .ea-schild::before{inset:8px}
  .ea-schild::after{inset:3px}
  .ea-url{margin-top:5px;padding-top:5px}
}
@media (max-width:900px){
  .ea-platte{--deck:clamp(26px,4vh,46px)}
  .ea-schild{width:min(88%,440px);margin:6px auto 6px;padding:7px}
  .ea-schild::before{inset:7px}
}
@media (max-width:400px){
  .ea-platte{--deck:clamp(22px,3.4vh,36px)}
  .ea-schild{width:min(94%,350px);margin:4px auto 4px;padding:6px}
  .ea-schild::before{inset:6px}
  .ea-schild::after{inset:2px}
}


/* ── ADRESSZEILE WEICHT WIEDER ────────────────────────────────
   Auf niedrigen Fenstern fehlten zuletzt 12 bzw. 15 px. Von allem
   im Schild ist die Adresszeile das Entbehrlichste: sie steht auf
   jedem Geraet oben in der Adressleiste des Browsers. Wortmarke,
   Name und Rolle bleiben - die tragen das Schild.
   Pruefgriff: node _pruef/eine-seite.js */
@media (max-height:760px){
  .ea-url{display:none}
}
@media (max-width:900px){
  .ea-url{display:none}
}


/* ── WORTMARKE EINE STUFE KLEINER ─────────────────────────────
   Auf niedrigen Fenstern fehlten noch 12 bzw. 15 px. Die
   Adresszeile war dort laengst aus (aeltere Schicht ab 700 px
   Hoehe) - der Posten sitzt in der Wortmarke und der Fassung.
   Pruefgriff: node _pruef/eine-seite.js */
@media (max-height:760px){
  .ea-schild{margin:5px auto 5px;padding:6px}
  .ea-schild::before{inset:6px}
  .ea-schild .ea-l1{font-size:clamp(1.05rem,2.1vw,1.62rem)}
  .ea-schild .ea-lockup{padding:6px 14px 4px}
  .ea-platte{--deck:clamp(26px,4vh,50px)}
}
@media (max-width:400px){
  .ea-schild{margin:3px auto 3px;padding:5px}
  .ea-schild::before{inset:5px}
  .ea-schild .ea-l1{font-size:.95rem}
  .ea-schild .ea-lockup{padding:5px 8px 3px;gap:7px}
  .ea-schild .ea-emblem{width:24px}
}


/* ── LETZTE SECHS PIXEL AUF DEM KLEINSTEN HANDY ───────────────
   360x740, real 640 px nutzbar. Der Sockel wird dort noch einmal
   flacher. Unter 20 px waere es keine Deckflaeche mehr, mit 20
   setzen die Karten weiterhin sichtbar auf.
   Pruefgriff: node _pruef/eine-seite.js */
@media (max-width:400px){
  .ea-platte{--deck:clamp(20px,3vh,32px);--ueber:calc(var(--deck) * .74)}
}


/* ── KLEINSTES HANDY: DIE ROLLENZEILE ─────────────────────────
   Am Sockel war nichts mehr zu holen - ihn noch flacher zu machen
   ergab durch Rundung sogar einen Pixel MEHR. Der Posten sitzt im
   Schildinhalt. Von den drei Zeilen ist "EA DEVELOPER" die
   entbehrlichste: sie steht auf jeder Seite schon in der Kopfzeile
   unter der Wortmarke. Wortmarke und Name bleiben.
   Pruefgriff: node _pruef/eine-seite.js */
@media (max-width:400px){
  .ea-schild .ea-l3{display:none}
  .ea-platte{--deck:clamp(22px,3.4vh,36px);--ueber:calc(var(--deck) * .62)}
}


/* ══════════════════════════════════════════════════════════════
   DER SOCKEL BEKOMMT DAS MATERIAL DER SZENE          29.08.2026
   ══════════════════════════════════════════════════════════════
   NUR Farbe, Licht und Material. Keine Groesse, kein clip-path,
   kein Abstand - die Geometrie von vorhin bleibt unberuehrt.
   ══════════════════════════════════════════════════════════════ */

/* ── 1 · Die Deckflaeche ──────────────────────────────────────
   Vorher #5d7096…#7288ae - helles Graublau, rund viermal so hell
   wie die Szene. Jetzt dieselbe Familie wie die Modulkarten
   (#16233c…#0a1120), nur eine Spur heller, damit sie als Flaeche
   liest und nicht mit dem Hintergrund verschmilzt.

   Vier Ebenen, von unten nach oben:
     1. der Grundton
     2. eine Lichtpfuetze vorn mittig - dort steht der Betrachter
     3. ein feines technisches Raster, das mit der Flucht laeuft
     4. ein flacher Glanz ueber die vordere Kante */
.ea-platte::before{
  background:
    linear-gradient(178deg,rgba(140,190,255,.10) 0,transparent 34%),
    repeating-linear-gradient(0deg,rgba(150,196,255,.055) 0 1px,transparent 1px 22px),
    repeating-linear-gradient(90deg,rgba(150,196,255,.04) 0 1px,transparent 1px 46px),
    radial-gradient(58% 120% at 50% 118%,rgba(61,139,255,.20),transparent 66%),
    linear-gradient(180deg,#182741 0%,#152238 46%,#111c2f 100%)}

/* ── 2 · Die Frontflaeche ─────────────────────────────────────
   Eine senkrechte Flaeche faengt weniger Licht als eine
   waagerechte - sie ist darum dunkler, aber aus demselben Ton.
   Dazu eine sehr zurueckhaltende Panelfuge alle 12,5 Prozent: sie
   gibt der Flaeche Massstab, ohne sie zu mustern. */
.ea-plate{
  background:
    repeating-linear-gradient(90deg,
      transparent 0 calc(12.5% - 1px),
      rgba(150,196,255,.05) calc(12.5% - 1px) 12.5%),
    linear-gradient(180deg,rgba(255,255,255,.035) 0,transparent 18px),
    linear-gradient(180deg,#101a2c 0%,#0d1524 58%,#0a1120 100%);
  box-shadow:
    /* Fase oben: dort trifft das Licht der Deckflaeche auf */
    inset 0 1px 0 rgba(186,214,255,.20),
    /* die beiden Seitenkanten - sie machen aus der Flaeche einen Koerper */
    inset 1px 0 0 rgba(150,196,255,.10),
    inset -1px 0 0 rgba(0,0,0,.55),
    /* unten die Aufsetzkante */
    inset 0 -1px 0 rgba(0,0,0,.7)}

/* ── 3 · Die Kante zwischen oben und vorn ─────────────────────
   Das hellste Element des ganzen Sockels - und das einzige, das
   hell sein DARF. Licht gehoert an die Kante, nicht auf die
   Flaeche. Kuehler als vorher, damit es zur Akzentfarbe passt. */
.ea-platte::after{
  background-image:linear-gradient(90deg,
    rgba(140,190,255,.22),rgba(214,234,255,.80) 10%,
    rgba(214,234,255,.80) 90%,rgba(140,190,255,.22));
  box-shadow:0 1px 12px rgba(61,139,255,.34)}

/* ── 4 · Das Frontschild ──────────────────────────────────────
   Die Fassung ist die Frontflaeche, eine Stufe heller, weil sie
   vorsteht - nicht heller als die Deckflaeche, sonst springt sie
   aus dem Koerper heraus. Das Feld darin ist dunkler als alles
   andere: es liegt vertieft, dort kommt am wenigsten Licht an.
   Nebeneffekt: die Wortmarke steht auf dem dunkelsten Punkt der
   ganzen Buehne und ist damit am besten lesbar. */
.ea-schild{
  background:linear-gradient(180deg,#1c2c49 0%,#16233a 52%,#121d30 100%);
  box-shadow:
    inset 0 1px 0 rgba(196,222,255,.30),
    inset 0 -1px 0 rgba(0,0,0,.6),
    inset 1px 0 0 rgba(150,196,255,.09),
    inset -1px 0 0 rgba(0,0,0,.45),
    /* der kurze Schatten auf die Frontflaeche - er sagt "montiert" */
    0 2px 5px rgba(0,0,0,.55),
    0 1px 0 rgba(150,196,255,.10)}
.ea-schild::before{
  background:linear-gradient(180deg,#0a111e 0%,#070d18 100%);
  box-shadow:
    inset 0 2px 6px rgba(0,0,0,.9),
    inset 0 -1px 0 rgba(150,196,255,.13)}
/* Die Nieten sitzen jetzt auf dunklem Metall - sie duerfen leiser
   sein, sonst sind sie das Erste, was auffaellt. */
.ea-schild::after{
  opacity:.55;
  background-image:
    radial-gradient(circle,rgba(206,228,255,.75) 0 1px,rgba(18,30,50,.95) 1px 2px,transparent 2.1px),
    radial-gradient(circle,rgba(206,228,255,.75) 0 1px,rgba(18,30,50,.95) 1px 2px,transparent 2.1px),
    radial-gradient(circle,rgba(206,228,255,.75) 0 1px,rgba(18,30,50,.95) 1px 2px,transparent 2.1px),
    radial-gradient(circle,rgba(206,228,255,.75) 0 1px,rgba(18,30,50,.95) 1px 2px,transparent 2.1px)}

/* ── 5 · Der Kontakt zum Boden ────────────────────────────────
   Bisher stand der Sockel ohne Aufsetzpunkt im Raum. Zwei Dinge
   machen daraus einen Kontakt: ein schmaler, dunkler Kernschatten
   direkt unter der Vorderkante, und darunter das blaue Bodenlicht,
   in dem er steht. Beide bleiben deutlich KLEINER als ihre Box -
   ein geblurrter Verlauf, der seine Box beruehrt, wird als
   Rechteck sichtbar (der Fehler von heute Mittag). */
.ea-platte{filter:drop-shadow(0 14px 22px rgba(2,5,12,.75))}
.ea-sockel::before{
  bottom:-6px;width:66%;height:104px;
  background:radial-gradient(closest-side,rgba(61,139,255,.30),rgba(61,139,255,.07) 50%,transparent 74%)}

/* ── 6 · Die Karten setzen sichtbar auf ───────────────────────
   Ein knapper, dunkler Kernschatten dort, wo die Karte die Flaeche
   beruehrt - nicht der grosse weiche Klecks von frueher, sondern
   die schmale dunkle Linie unter dem Fuss. */
[data-seite="start"] .ea-mod-in{
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.55))
         drop-shadow(0 5px 7px rgba(2,5,12,.5))}


/* ══════════════════════════════════════════════════════════════
   KLARE FLAECHEN, KEIN NEBEL                         29.08.2026
   ══════════════════════════════════════════════════════════════ */

/* ── 1 · Die Linien auf der Plattform ─────────────────────────
   Sie scheinen nicht durch - ich habe sie in der letzten Runde
   selbst aufgetragen (repeating-linear-gradient alle 22 px oben,
   Panelfuge alle 12,5 Prozent vorn). Gedacht als Massstab, gelesen
   als durchscheinendes Bodenraster, weil Richtung und Abstand dem
   Raster dahinter aehneln.
   GESCHUETZT: keine wiederholenden Verlaeufe auf Deckflaeche oder
   Front. Eine Flaeche, die glatt wirken soll, braucht keine
   Struktur - ihre Qualitaet kommt aus der Kante. */
.ea-platte::before{
  background:
    linear-gradient(178deg,rgba(140,190,255,.09) 0,transparent 30%),
    radial-gradient(56% 118% at 50% 120%,rgba(61,139,255,.17),transparent 64%),
    linear-gradient(180deg,#182741 0%,#152238 48%,#111c2f 100%)}
.ea-plate{
  background:
    linear-gradient(180deg,rgba(255,255,255,.03) 0,transparent 16px),
    linear-gradient(180deg,#101a2c 0%,#0d1524 58%,#0a1120 100%)}

/* ── 2 · Die Aura ueber den mittleren Karten ──────────────────
   section.ea-hero::before war ein Radialverlauf bei 50 % 22 % -
   genau ueber der Kartenreihe - mit blur(26px) obendrauf. Ein
   Radialverlauf ist von sich aus weich; die Unschaerfe machte
   daraus Nebel.

   Das Licht bleibt, es wandert nur nach oben hinter die
   Ueberschrift, wird kleiner und verliert die Unschaerfe.
   Nebenbei faellt damit ein blur(26px) ueber die halbe Seite weg -
   der teuerste Filter im Hero.
   GESCHUETZT: hier nie wieder blur auf einen Verlauf legen. */
[data-seite="start"] .ea-hero::before{
  filter:none;
  background:radial-gradient(34% 22% at 50% 9%,rgba(130,180,255,.12),transparent 72%)}

/* Die Karten werfen nur noch einen knappen Kontaktschatten. Zwei
   gestapelte drop-shadows ergaben zusammen den weichen Hof; einer,
   eng und dunkel, sagt dasselbe praeziser. */
[data-seite="start"] .ea-mod-in{
  filter:drop-shadow(0 2px 3px rgba(2,5,12,.7))}

/* Der Schein hinter den Modulnummern war 26 px unscharf. Auf einer
   Karte, die scharf wirken soll, ist das der zweite Nebel. Kleiner
   und enger - er markiert die Nummer, statt sie einzuhuellen.
   Die Bewegung bleibt (nur opacity, siehe geschuetzte Zeile
   "niemals box-shadow animieren"). */
[data-seite="start"] .ea-num::after{
  box-shadow:0 0 12px rgba(61,139,255,.55)}

/* ── 3 · Klarere Trennung der Ebenen ──────────────────────────
   Ohne den Nebel steht die Kartenreihe direkt vor dem Raum. Ein
   ruhiger, dunkler Verlauf hinter ihr gibt ihr Grund - eine
   Flaeche, keine Wolke: kein blur, harte Ausdehnung, nur unten
   auslaufend. Dadurch heben sich die Karten ab, ohne zu leuchten. */
[data-seite="start"] .ea-hero::after{
  background:linear-gradient(180deg,
    rgba(4,7,14,.90) 0%,
    rgba(4,7,14,.62) 26%,
    rgba(4,7,14,.30) 52%,
    rgba(4,7,14,.10) 74%,
    transparent 100%)}

/* Die Kanten der Karten duerfen jetzt schaerfer sein - vorher
   verschwammen sie im Hof. */
[data-seite="start"] .ea-kante{
  filter:none}


/* ══════════════════════════════════════════════════════════════
   DAS EINGELASSENE FRONTMODUL                        29.08.2026
   ══════════════════════════════════════════════════════════════
   NUR Farbe, Licht, Material. Keine Groesse, kein clip-path, kein
   Abstand - die Geometrie bleibt unberuehrt.
   ══════════════════════════════════════════════════════════════ */

/* ── 1 · Die Plattformfront ───────────────────────────────────
   Dunkler und kuehler als bisher, Richtung Stahlblau. Dazu drei
   GESETZTE Bauteile statt eines Musters:
     · eine Sockelleiste 20 px ueber der Unterkante
     · zwei Endkappen bei 3,4 und 96,6 Prozent
     · ein flacher Lichtabfall von der Mitte nach aussen
   GESCHUETZT: keine wiederholenden Verlaeufe. Gleichmaessige
   Linien liest man als durchscheinendes Bodenraster (Felix,
   29.08.), gesetzte Kanten als Konstruktion. */
.ea-plate{
  background:
    /* Endkappen - zwei Fugen, symmetrisch, sonst nichts */
    linear-gradient(90deg,
      transparent 0 3.4%,
      rgba(158,200,255,.11) 3.4% calc(3.4% + 1px),
      rgba(0,0,0,.30) calc(3.4% + 1px) calc(3.4% + 2px),
      transparent calc(3.4% + 2px) 96.6%,
      rgba(158,200,255,.11) 96.6% calc(96.6% + 1px),
      rgba(0,0,0,.30) calc(96.6% + 1px) calc(96.6% + 2px),
      transparent calc(96.6% + 2px)),
    /* Sockelleiste: Lichtkante, darunter ein dunklerer Streifen */
    linear-gradient(180deg,
      transparent 0 calc(100% - 20px),
      rgba(158,200,255,.10) calc(100% - 20px) calc(100% - 19px),
      rgba(0,0,0,.26) calc(100% - 19px) 100%),
    /* das Licht faellt in der Mitte auf die Front */
    radial-gradient(64% 130% at 50% 0%,rgba(120,172,240,.10),transparent 62%),
    /* der Grundton: tiefes Stahlblau */
    linear-gradient(180deg,#0e1728 0%,#0b1322 60%,#090f1c 100%);
  box-shadow:
    inset 0 1px 0 rgba(186,216,255,.20),
    inset 1px 0 0 rgba(158,200,255,.08),
    inset -1px 0 0 rgba(0,0,0,.6),
    inset 0 -1px 0 rgba(0,0,0,.75)}

/* Die Deckflaeche eine Spur dunkler und kuehler, damit Front und
   Oberseite als ein Material lesen. */
.ea-platte::before{
  background:
    linear-gradient(178deg,rgba(150,196,255,.10) 0,transparent 32%),
    radial-gradient(54% 120% at 50% 122%,rgba(61,139,255,.16),transparent 62%),
    linear-gradient(180deg,#152337 0%,#121e30 50%,#0e1827 100%)}

/* ── 2 · Die Blende ───────────────────────────────────────────
   Sie ist KEIN aufgesetztes Schild mehr, sondern der Rahmen der
   Aussparung: dasselbe Material wie die Front, minimal erhaben.
   Der entscheidende Unterschied zu vorher - es gibt keinen
   aeusseren Schatten mehr. Nach aussen wirft ein eingelassenes
   Bauteil nichts; sichtbar ist nur die Fuge zur Front.
   GESCHUETZT: nie wieder einen aeusseren box-shadow hier. Genau
   der liess das Schild aufgeklebt wirken. */
.ea-schild{
  background:linear-gradient(180deg,#16233a 0%,#121c2e 55%,#0f1826 100%);
  box-shadow:
    /* die erhabene Lippe der Blende */
    inset 0 1px 0 rgba(196,222,255,.26),
    inset 0 -1px 0 rgba(0,0,0,.55),
    inset 1px 0 0 rgba(158,200,255,.07),
    inset -1px 0 0 rgba(0,0,0,.45),
    /* die Fuge, mit der die Blende in der Front sitzt: aussen eine
       dunkle Linie, darunter eine feine Lichtkante */
    0 0 0 1px rgba(0,0,0,.55),
    0 2px 0 rgba(158,200,255,.09)}

/* ── 3 · Die Vertiefung ───────────────────────────────────────
   Der Boden der Aussparung. Oben der harte Schlagschatten der
   Oeffnungskante, unten eine Lichtkante - daraus liest man Tiefe.
   Der dunkelste Punkt der ganzen Buehne; die Wortmarke steht damit
   auf dem besten Kontrast. */
.ea-schild::before{
  background:
    radial-gradient(80% 120% at 50% 100%,rgba(61,139,255,.09),transparent 68%),
    linear-gradient(180deg,#080f1b 0%,#060b15 100%);
  box-shadow:
    inset 0 4px 9px -3px rgba(0,0,0,.95),
    inset 0 1px 0 rgba(0,0,0,.9),
    inset 0 -1px 0 rgba(170,206,255,.17),
    inset 1px 0 0 rgba(0,0,0,.7),
    inset -1px 0 0 rgba(150,190,240,.07)}

/* ── 4 · Die Schrauben ────────────────────────────────────────
   Sie sitzen in der Blende, nicht im Feld - dort waeren sie
   konstruktiv sinnlos. Klein und dunkel: sie sollen zu sehen sein,
   wenn man hinsieht, nicht vorher. */
.ea-schild::after{
  opacity:.62;
  background-image:
    radial-gradient(circle,rgba(198,222,255,.7) 0 .9px,rgba(10,18,32,.95) .9px 1.9px,transparent 2px),
    radial-gradient(circle,rgba(198,222,255,.7) 0 .9px,rgba(10,18,32,.95) .9px 1.9px,transparent 2px),
    radial-gradient(circle,rgba(198,222,255,.7) 0 .9px,rgba(10,18,32,.95) .9px 1.9px,transparent 2px),
    radial-gradient(circle,rgba(198,222,255,.7) 0 .9px,rgba(10,18,32,.95) .9px 1.9px,transparent 2px)}

/* ── 5 · Die Kante zwischen Deckflaeche und Front ─────────────
   Sie bleibt das hellste Element des Sockels, wird aber schmaler
   und kuehler: eine geschliffene Kante, kein Leuchtstreifen. */
.ea-platte::after{
  background-image:linear-gradient(90deg,
    rgba(130,180,240,.16),rgba(206,230,255,.72) 8%,
    rgba(206,230,255,.72) 92%,rgba(130,180,240,.16));
  box-shadow:0 1px 9px rgba(61,139,255,.28)}


/* ══════════════════════════════════════════════════════════════
   EIN MATERIAL, KEIN HOF                             29.08.2026
   ══════════════════════════════════════════════════════════════
   Zwei Befunde aus dem Ausschlussverfahren, nicht aus dem Gefuehl.
   Werkzeuge: _pruef/ablation.js (schaltet jede Ebene einzeln ab und
   misst) und _pruef/profil.js (senkrechter Helligkeitsschnitt).
   ══════════════════════════════════════════════════════════════ */

/* ── 1 · Die Front war ein anderes Material als die Deckflaeche ──
   Gemessen an den zwei Stellen, wo weder eine Karte noch das Schild
   davorsteht (x = 316 und x = 1102), Hintergrundwelt angehalten,
   Helligkeit 0…255:

       Deckflaeche   30,0   28,4
       Front         19,4   19,4      →  Stufe 10,5 / 9,1

   Die Front war also rund ein Drittel dunkler - und zwar nicht
   durch Schatten, sondern durch einen EIGENEN Grundton:

       Deck   #152337 → #121e30 → #0e1827
       Front  #0e1728 → #0b1322 → #090f1c

   Zwei Farbfamilien an einem Bauteil ergeben zwei Bloecke. Genau
   das war "der untere Block ist dunkler".

   Dazu kam eine harte waagerechte Stufe 20 px ueber der Unterkante:
   die Sockelleiste trug unter ihrer Lichtkante ein rgba(0,0,0,.26)
   ueber die volle Breite. Gemessen fiel die Helligkeit dort von
   15,7 auf 11,7 - durch Abschalten genau dieser einen Verlaufslage
   nachgewiesen (ohne sie: 15,5 statt 11,7).

   Jetzt tragen Deckflaeche und Front DENSELBEN Grundton. Der
   Unterschied zwischen oben und vorn kommt nur noch aus dem
   Lichteinfall (die Deckflaeche faengt Licht von oben, die Front
   einen flachen Schein aus der Mitte) und aus den Kanten.

   GESCHUETZT: Deck und Front teilen sich die Farbstufen #131e31 /
   #111a2b / #0f1826. Wer eine Flaeche umfaerbt, faerbt beide um -
   sonst faellt der Block wieder in zwei Bloecke auseinander.
   Pruefgriff: node _pruef/profil.js --ohne-halo 316 1102
   Die Zeile STUFE muss nahe 0 stehen. */
.ea-platte::before{
  background:
    linear-gradient(178deg,rgba(150,196,255,.10) 0,transparent 32%),
    radial-gradient(54% 120% at 50% 122%,rgba(61,139,255,.14),transparent 62%),
    linear-gradient(180deg,#131e31 0%,#111a2b 50%,#0f1826 100%)}

.ea-plate{
  background:
    /* Endkappen - zwei Fugen, symmetrisch, sonst nichts */
    linear-gradient(90deg,
      transparent 0 3.4%,
      rgba(158,200,255,.11) 3.4% calc(3.4% + 1px),
      rgba(0,0,0,.30) calc(3.4% + 1px) calc(3.4% + 2px),
      transparent calc(3.4% + 2px) 96.6%,
      rgba(158,200,255,.11) 96.6% calc(96.6% + 1px),
      rgba(0,0,0,.30) calc(96.6% + 1px) calc(96.6% + 2px),
      transparent calc(96.6% + 2px)),
    /* HIER STAND DIE SOCKELLEISTE - und sie ist raus (Felix,
       30.08.2026: "die Linie nervt mich"). Eine Lichtkante 20 px
       ueber der Unterkante laeuft ueber die volle Breite und wird
       vom Schild in zwei Haelften geteilt; genau das las sich als
       Strich quer durch die Plattform. Die Unterkante der Front
       zeichnet ohnehin schon (inset 0 -1px rgba(0,0,0,.75)), eine
       zweite Kante 20 px darueber erklaert nichts.
       GESCHUETZT: keine waagerechte Linie mehr in der Front. */
    /* das Licht faellt in der Mitte auf die Front */
    radial-gradient(64% 130% at 50% 0%,rgba(120,172,240,.10),transparent 62%),
    /* DERSELBE Grundton wie die Deckflaeche, nur flacher verlaufend:
       eine senkrechte Wand faengt weniger Licht als eine Oberseite,
       aber sie ist aus demselben Material. */
    linear-gradient(180deg,#131e31 0%,#111b2c 58%,#101927 100%)}

/* ── 2 · Der Hof um die Karten war .ea-mod::before ───────────────
   Der weiche dunkle Nebel zwischen, unter und neben den Karten kam
   NICHT von einem Schatten an der Karte selbst und nicht vom
   gemeinsamen Rahmen, sondern von einer eigenen Ebene HINTER jeder
   Karte, die ueber deren Rand hinausragt:

       .ea-mod::before   left:-16px  right:-16px  top:-18px  bottom:-4px

   Sie traegt bei den Karten 1, 2, 5 und 6 fast schwarze Verlaeufe
   (rgba(1,4,10,.82) zur Seite, rgba(2,6,14,.9) nach oben aus der
   Unterkante) und zusaetzlich einen flaechigen Schleier
   (box-shadow: inset 0 0 0 999px rgba(13,26,50,.17)).

   Gemessen: schaltet man nur diese eine Ebene ab, wird die
   Deckflaeche unter den Karten um bis zu 15,1 heller und der
   Streifen unter der Kartenreihe um 13,3. Keine andere Ebene im
   Hero veraendert diese Stellen ueberhaupt - .ea-hero::before,
   .ea-hero::after, .ea-buehne::before/::after, .ea-mod-in und
   .ea-num::after wurden einzeln abgeschaltet und blieben ohne
   Wirkung (.ea-hero::after steht ohnehin auf opacity 0).

   Weil die Ebene VOLLSTAENDIG hinter der Karte liegt, ist ihr
   sichtbarer Teil ausschliesslich der Ueberstand - also genau der
   Hof. Der Vorher-Nachher-Vergleich bestaetigt es: Kartenkoerper,
   Metallkanten, Innenlicht und Spiegelungen sind Bildpunkt fuer
   Bildpunkt unveraendert, nur die Luecken werden frei.

   GESCHUETZT: hier nie wieder eine Ebene ueber den Kartenrand
   hinausziehen. Ein Schein, der groesser ist als das Bauteil, ist
   von aussen immer nur Nebel. Wer Tiefe will, nimmt die Kante.
   Pruefgriff: node _pruef/ablation.js - die Zeile
   "mod::before (halo)" muss ueberall auf "·" stehen. */
[data-seite="start"] .ea-mod::before{display:none}


/* ══════════════════════════════════════════════════════════════
   UEBER MICH IN DER WELT DES DASHBOARDS             30.08.2026
   ══════════════════════════════════════════════════════════════
   Die Seite bestand aus einer Textwand und vier Chip-Kaesten. Sie
   war nicht falsch, sie war nur aus anderem Material als der Rest.

   Diese Schicht baut sie aus den Teilen, die es schon gibt:
   .ab-panel steht MIT IN DER MATERIAL-REGEL von .mini-card /
   .stack-item / .cert - es ist kein Nachbau, sondern dasselbe
   Bauteil. Deshalb aendert sich alles mit, wenn das Material
   irgendwann angefasst wird.

   Bewegung: nur transform und opacity, je EINE Ebene, beide mit
   will-change. Kein animierter box-shadow (geschuetzte Zeile),
   kein Weichzeichner ueber die Flaeche.
   ══════════════════════════════════════════════════════════════ */

/* ── 1 · Der Kopfbereich ──────────────────────────────────────
   Links die Aussage, rechts das Bauteil. Die rechte Spalte ist
   breiter als bei den anderen Unterseiten (.52fr), weil dort kein
   Symbol steht, sondern ein Panel mit drei Zeilen Inhalt. */
.ab-hero{padding-bottom:64px}
.ab-hero-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.82fr);
  gap:clamp(28px,4vw,60px);align-items:center}
.ab-intro .lead{margin-bottom:16px}
.ab-lead2{color:var(--tx-faint);font-size:15.5px;line-height:1.7;max-width:56ch}
.ab-marker{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.ab-marker li{font:600 11.5px/1 'JetBrains Mono','SF Mono',Consolas,monospace;
  letter-spacing:.09em;color:#9fc4f2;padding:9px 13px;border-radius:7px;
  background:linear-gradient(168deg,rgba(120,175,255,.11),rgba(255,255,255,.015));
  border:1px solid rgba(120,175,255,.20)}

/* ── 2 · Das Identitaets-Panel ────────────────────────────────
   Material kommt aus der gemeinsamen Regel. Hier nur der Inhalt.
   Die Fase frisst den Innenabstand - er wird an den Kindern neu
   gesetzt, genau wie bei .mini-card. */
.ab-id{align-self:center}
.ab-id>*{padding-inline:clamp(20px,2.2vw,28px)}
.ab-id>*:first-of-type{padding-top:26px}
.ab-id>*:last-child{padding-bottom:22px}

.ab-id-kopf{display:flex;align-items:center;gap:15px;
  padding-bottom:20px;margin-bottom:2px}
.ab-id-mark{flex:0 0 auto;display:grid;place-items:center;width:56px;height:56px;
  border-radius:14px;background:linear-gradient(168deg,#1b2b47,#0b1322);
  box-shadow:inset 0 1px 0 rgba(190,215,250,.26),inset 0 -1px 0 rgba(0,0,0,.6)}
.ab-id-mark img{width:38px;height:38px}
.ab-id-txt{display:flex;flex-direction:column;gap:5px;min-width:0}
.ab-id-txt b{font-size:1.12rem;font-weight:650;letter-spacing:-.02em;color:var(--tx)}
.ab-id-txt i{font-style:normal;font:600 10.5px/1 'JetBrains Mono','SF Mono',Consolas,monospace;
  letter-spacing:.24em;text-transform:uppercase;color:var(--acc-text)}

/* Die drei Lagen. Eine feine Linie trennt sie - dieselbe Farbe wie
   die Fugen auf dem Dashboard-Sockel. */
.ab-id-lagen{display:flex;flex-direction:column}
.ab-id-lagen li{display:grid;grid-template-columns:auto 1fr;gap:2px 13px;
  align-items:baseline;padding:15px 0;border-top:1px solid rgba(150,190,245,.13)}
.ab-id-no{grid-row:span 2;align-self:center;
  font:600 11px/1 'JetBrains Mono','SF Mono',Consolas,monospace;letter-spacing:.1em;
  color:var(--acc-text);opacity:.85}
.ab-id-lagen b{font-size:14.5px;font-weight:650;color:var(--tx);letter-spacing:-.01em}
.ab-id-lagen em{font-style:normal;font-size:12.5px;color:var(--tx-faint);line-height:1.5}
.ab-id-fuss{margin-top:16px;padding-top:15px;border-top:1px solid rgba(150,190,245,.13)}
.ab-id-fuss span{font:600 10.5px/1 'JetBrains Mono','SF Mono',Consolas,monospace;
  letter-spacing:.19em;color:var(--tx-faint)}

/* Der Lichtstreifen. EIN Element, nur transform und opacity, in den
   Compositor gehoben. Er laeuft langsam von oben nach unten - das
   ist die einzige Dauerbewegung auf dieser Seite. */
.ab-id-scan{position:absolute;left:2.5px;right:2.5px;top:0;height:120px;z-index:2;
  pointer-events:none;opacity:0;will-change:transform,opacity;
  background:linear-gradient(180deg,transparent,rgba(150,200,255,.09) 55%,
    rgba(190,225,255,.16) 82%,transparent);
  animation:abScan 9s cubic-bezier(.45,0,.25,1) infinite}
@keyframes abScan{
  0%{transform:translateY(-120px);opacity:0}
  14%{opacity:1}
  76%{opacity:1}
  92%,100%{transform:translateY(420px);opacity:0}
}

/* ── 3 · Der Weg: sechs Stationen in einer Reihe ──────────────
   Derselbe Rhythmus wie die sechs Module auf dem Dashboard. Die
   Schiene liegt auf halber Knotenhoehe, die Knoten stehen darueber. */
.ab-reise-sec .sec-head{margin-bottom:44px}
.ab-reise{position:relative;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
  gap:clamp(10px,1.4vw,22px);list-style:none;margin:0;padding:0}
.ab-schiene{position:absolute;left:8.33%;right:8.33%;top:14px;height:2px;z-index:0;
  overflow:hidden;border-radius:2px;pointer-events:none;
  background:linear-gradient(90deg,rgba(120,175,255,.10),rgba(150,200,255,.34) 12%,
    rgba(150,200,255,.34) 88%,rgba(120,175,255,.10))}
.ab-impuls{position:absolute;top:0;left:0;width:120px;height:100%;
  will-change:transform;
  background:linear-gradient(90deg,transparent,rgba(200,230,255,.95),transparent);
  animation:abImpuls 7s linear infinite}
@keyframes abImpuls{
  0%{transform:translateX(-140px)}
  100%{transform:translateX(calc(100vw + 140px))}
}
.ab-stat{position:relative;z-index:1;text-align:left}
.ab-stat-no{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  font:600 11px/1 'JetBrains Mono','SF Mono',Consolas,monospace;letter-spacing:.04em;
  color:#dbe9ff;margin-bottom:15px;
  background:linear-gradient(168deg,#1a2942,#0a1120);
  box-shadow:inset 0 1px 0 rgba(190,215,250,.30),0 0 0 1px rgba(120,175,255,.30),
             0 0 14px rgba(61,139,255,.22)}
.ab-stat h3{font-size:.98rem;letter-spacing:-.01em;margin-bottom:7px;color:var(--tx)}
.ab-stat p{font-size:13px;line-height:1.55;color:var(--tx-faint)}
@media (hover:hover) and (pointer:fine){
  .ab-stat{transition:transform .32s var(--ease)}
  .ab-stat:hover{transform:translateY(-3px)}
  .ab-stat:hover .ab-stat-no{color:#fff;
    box-shadow:inset 0 1px 0 rgba(190,215,250,.34),0 0 0 1px rgba(150,200,255,.55),
               0 0 20px rgba(61,139,255,.42)}
}

/* ── 4 · Die drei Kernbereiche ────────────────────────────────
   Gleiches Bauteil, unterschiedlicher Auftritt: die Neon-Oberkante
   der Material-Regel bekommt je Panel eine andere Breite und
   Staerke, und das Innenlicht faellt aus einer anderen Richtung.
   Zusammengehoerig, aber nicht dreimal dasselbe. */
.ab-kerne{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:clamp(14px,1.6vw,20px);align-items:stretch}
.ab-kern{display:flex;flex-direction:column}
.ab-kern>*{padding-inline:clamp(20px,2vw,26px)}
.ab-kern>*:first-of-type{padding-top:26px}
.ab-kern>*:last-child{padding-bottom:26px}
.ab-kern-kopf{display:flex;align-items:center;justify-content:space-between;gap:14px;
  margin-bottom:16px}
.ab-kern-no{font:600 11.5px/1 'JetBrains Mono','SF Mono',Consolas,monospace;
  letter-spacing:.12em;color:var(--acc-text)}
.ab-ikon{width:36px;height:36px;flex:0 0 auto;
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.6))}
.ab-kern h3{font-size:1.06rem;letter-spacing:-.015em;margin-bottom:9px}
.ab-kern>p{font-size:14px;line-height:1.62;color:var(--tx-dim);margin-bottom:16px}
.ab-liste{display:flex;flex-direction:column;gap:8px;margin-top:auto}
.ab-liste li{position:relative;padding-left:17px;font-size:13.5px;color:var(--tx-faint)}
.ab-liste li::before{content:"";position:absolute;left:0;top:.52em;width:6px;height:6px;
  border-radius:2px;background:var(--acc);opacity:.8}
/* die drei Auftritte */
.ab-kern-1::after{left:10%;right:10%}
.ab-kern-2::after{left:22%;right:22%;
  background:linear-gradient(90deg,transparent,#5aa6ff 14%,#dbeeff 50%,#5aa6ff 86%,transparent)}
.ab-kern-3::after{left:34%;right:34%;
  background:linear-gradient(90deg,transparent,#2f7fff 18%,#8fc4ff 50%,#2f7fff 82%,transparent)}
.ab-kern-1::before{background:linear-gradient(168deg,#17253f 0%,#101a2e 46%,#0a1120 100%)}
.ab-kern-2::before{background:linear-gradient(184deg,#16233c 0%,#101a2e 50%,#0a1120 100%)}
.ab-kern-3::before{background:linear-gradient(200deg,#152139 0%,#0f192b 50%,#0a1120 100%)}

/* ── 5 · Wie ich arbeite: ein Blatt, keine zweite Zeitleiste ──
   Bewusst anders als der Weg oben: zwei Spalten, nummerierte
   Zeilen, kein Knoten, keine Schiene. Es soll wie ein Arbeitsblatt
   lesen. */
.ab-weg-wrap{max-width:var(--wrap)}
.ab-weg>*{padding:clamp(22px,2.4vw,32px) clamp(20px,2.4vw,32px)}
.ab-weg-liste{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
  gap:2px clamp(24px,3vw,46px);list-style:none;margin:0}
.ab-weg-liste li{display:grid;grid-template-columns:auto 1fr;gap:2px 14px;
  align-items:baseline;padding:15px 0;border-top:1px solid rgba(150,190,245,.11)}
.ab-weg-liste li:first-child,.ab-weg-liste li:nth-child(2){border-top:0}
.ab-weg-no{grid-row:span 2;align-self:center;
  font:600 11.5px/1 'JetBrains Mono','SF Mono',Consolas,monospace;letter-spacing:.1em;
  color:var(--acc-text)}
.ab-weg-liste b{font-size:14.5px;font-weight:650;color:var(--tx)}
.ab-weg-liste em{font-style:normal;font-size:13.5px;line-height:1.6;color:var(--tx-faint)}

/* ── 6 · Praxis-Band ──────────────────────────────────────────
   Kein Kontakt-Kasten - der ist auf allen Unterseiten weg. Nur die
   Bruecke zur Trading-Seite, wo die Nachweise wirklich stehen. */
.ab-praxis{display:flex;align-items:center;justify-content:space-between;
  gap:clamp(20px,3vw,48px);flex-wrap:wrap}
.ab-praxis-txt{max-width:64ch}
.ab-praxis h2{font-size:clamp(1.3rem,2.4vw,1.85rem);margin-bottom:12px}
.ab-praxis .sec-sub{font-size:15px}
.ab-praxis-btn{flex:0 0 auto}

/* ── 7 · Schmalere Fenster ────────────────────────────────────
   Bewusst gestaltet, nicht zusammengeschoben: der Kopf wird
   einspaltig, die Reise kippt auf eine senkrechte Schiene links -
   sechs Spalten waeren auf dem Handy sechs Streifen. */
@media (max-width:1080px){
  .ab-hero-in{grid-template-columns:1fr;gap:34px}
  .ab-id{max-width:560px}
  .ab-reise{grid-template-columns:repeat(3,minmax(0,1fr));gap:26px 18px}
  .ab-schiene{display:none}
}
@media (max-width:720px){
  .ab-reise{grid-template-columns:1fr;gap:0;padding-left:2px}
  .ab-schiene{display:block;left:14px;right:auto;top:16px;bottom:16px;
    width:2px;height:auto;
    background:linear-gradient(180deg,rgba(120,175,255,.10),rgba(150,200,255,.32) 10%,
      rgba(150,200,255,.32) 90%,rgba(120,175,255,.10))}
  .ab-impuls{width:100%;height:110px;
    background:linear-gradient(180deg,transparent,rgba(200,230,255,.9),transparent);
    animation:abImpulsHoch 7s linear infinite}
  .ab-stat{display:grid;grid-template-columns:auto 1fr;gap:2px 16px;
    padding:14px 0;align-items:start}
  .ab-stat-no{grid-row:span 2;margin-bottom:0}
  .ab-stat h3{margin-bottom:4px;align-self:center}
  .ab-hero{padding-bottom:44px}
  .ab-praxis{flex-direction:column;align-items:flex-start}
  .ab-praxis-btn{width:100%;text-align:center;justify-content:center}
}
@keyframes abImpulsHoch{
  0%{transform:translateY(-130px)}
  100%{transform:translateY(calc(100vh + 130px))}
}
@media (max-width:560px){
  .ab-marker li{font-size:11px;padding:9px 11px}
  .ab-id-kopf{gap:12px}
  .ab-id-mark{width:48px;height:48px}
  .ab-id-mark img{width:32px;height:32px}
  .ab-id-txt b{font-size:1.02rem}
}

/* ── 8 · Reduzierte Bewegung ──────────────────────────────────
   Beide Dauerbewegungen halten an. Die Bauteile bleiben vollstaendig
   sichtbar - eine leere Flaeche waere der schlechtere Tausch. */
@media (prefers-reduced-motion:reduce){
  .ab-id-scan{animation:none;opacity:.55;transform:translateY(150px)}
  .ab-impuls{animation:none;opacity:.5}
}


/* ══════════════════════════════════════════════════════════════
   UEBER MICH: VIER KORREKTUREN                      30.08.2026
   ══════════════════════════════════════════════════════════════ */

/* ── 1 · Die Schiene traf die Knotenmitte nicht ───────────────
   left/right:8.33 % ist die SPALTENmitte. Die Knoten stehen aber
   linksbuendig in ihrer Spalte, ihre Mitte liegt bei 15 px. Die
   Schiene lief dadurch links zu weit rechts los und rechts ueber
   den letzten Knoten hinaus.
   Jetzt aus der echten Spaltenbreite gerechnet: Abstand rechts =
   eine Spalte minus dem halben Knoten.
   GESCHUETZT: --rgap wird von gap UND von der Schiene benutzt.
   Wer den Abstand aendert, muss die Variable aendern, nicht das
   gap - sonst wandert die Schiene wieder aus. */
.ab-reise{--rgap:clamp(10px,1.4vw,22px);--rspalte:calc((100% - 5 * var(--rgap)) / 6);
  gap:var(--rgap)}
.ab-schiene{left:15px;right:calc(var(--rspalte) - 15px)}

/* ── 2 · Das Arbeitsblatt zog eine Linie in die erste Reihe ───
   Die Trennlinien haengen an border-top; ausgenommen waren nur die
   ersten ZWEI Zeilen. Bei drei Spalten steht die dritte Zeile aber
   ebenfalls oben und bekam eine Linie ueber sich - mitten in die
   Kopfreihe hinein. Die Spaltenzahl wird jetzt gesetzt statt
   geraten, und die Ausnahme passt dazu. */
.ab-weg-liste{grid-template-columns:repeat(3,minmax(0,1fr))}
.ab-weg-liste li:nth-child(-n+3){border-top:0}
@media (max-width:1000px){
  .ab-weg-liste{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ab-weg-liste li:nth-child(3){border-top:1px solid rgba(150,190,245,.11)}
  .ab-weg-liste li:nth-child(-n+2){border-top:0}
}
@media (max-width:640px){
  .ab-weg-liste{grid-template-columns:1fr}
  .ab-weg-liste li:nth-child(2),.ab-weg-liste li:nth-child(3){
    border-top:1px solid rgba(150,190,245,.11)}
  .ab-weg-liste li:first-child{border-top:0}
}

/* ── 3 · Zwei Abstaende waren zu gross ───────────────────────
   Die Stationen sind kurz; darunter blieb eine Leerflaeche von der
   Groesse eines halben Bildschirms stehen. Der Abschnitt bekommt
   unten weniger Luft als ein Textabschnitt - er ist eine Zeile,
   kein Kapitel. */
.ab-reise-sec{padding-bottom:clamp(40px,5vw,64px)}
.ab-praxis-sec{padding-top:clamp(44px,5vw,70px);padding-bottom:clamp(44px,5vw,70px)}

/* ── 4 · Die Kernpanels standen zu luftig ────────────────────
   Zwischen Symbolzeile und Ueberschrift lagen zwei Abstaende
   uebereinander (Kopfzeile + h3-Vorgabe). Einer reicht. */
.ab-kern-kopf{margin-bottom:10px}
.ab-kern>p{margin-bottom:18px}


/* ══════════════════════════════════════════════════════════════
   DER LICHTSTREIFEN STEHT STILL                     30.08.2026
   ══════════════════════════════════════════════════════════════
   GESCHUETZT: in .ab-panel (und in jedem anderen Bauteil mit
   filter: drop-shadow) darf NICHTS dauerhaft animiert werden -
   auch nicht transform/opacity. Der Filter am Vorfahren holt die
   Ebene aus dem Compositor zurueck in den Maler; gemessen 7,8
   Prozentpunkte CPU auf einem 6-fach gedrosselten Geraet.
   Prüfgriff: ROUTE=/about/ node _pruef/bewegungskosten.js
   ══════════════════════════════════════════════════════════════ */

/* Das Licht bleibt - es wandert nur nicht mehr. Ein stehender
   Verlauf ueber dem oberen Drittel des Panels kostet einmal beim
   Zeichnen und danach nichts. */
.ab-id-scan{
  position:absolute;left:2.5px;right:2.5px;top:2.5px;height:38%;z-index:2;
  pointer-events:none;opacity:1;transform:none;animation:none;will-change:auto;
  background:linear-gradient(180deg,rgba(170,210,255,.10),rgba(150,200,255,.045) 42%,transparent)}

/* Beim Zeigen darf es kurz aufleuchten - eine einmalige Ueberblendung
   ist etwas anderes als eine Dauerschleife. */
@media (hover:hover) and (pointer:fine){
  .ab-id{transition:filter .45s var(--ease)}
  .ab-id-scan{transition:opacity .45s var(--ease)}
  .ab-id:hover .ab-id-scan{opacity:.55}
}

@media (prefers-reduced-motion:reduce){
  .ab-id-scan{opacity:1;transform:none}
}


/* ══════════════════════════════════════════════════════════════
   DIE WELT LAEUFT DURCH                             30.08.2026
   ══════════════════════════════════════════════════════════════
   Felix: "Der Hintergrund soll ueberall gleich bleiben. Hier ist
   auf einmal alles dunkelblau."

   GEMESSEN, nicht geraten (node _pruef/hintergrund.js /about/):
   Genau ZWEI Ebenen deckten die Hintergrundwelt zu, beide mit
   vollflaechigem rgb(10,16,32):

     section.sec-alt   y 1105…1954  und  y 2544…2850
     footer.foot       y 2850…3011

   Alle anderen Ebenen des Rumpfes sind bereits durchsichtig -
   deshalb war der Sternenhimmel oberhalb sichtbar und darunter
   schlagartig weg. Die Naht lag exakt an der Oberkante des ersten
   .sec-alt-Abschnitts.

   Der Wechsel zwischen den Abschnitten geht dabei NICHT verloren:
   .sec-alt traegt seit dem 28.08. oben und unten eine eigene
   Lichtkante (.sec-alt::before / ::after). Die war bisher nur
   schwer zu sehen, weil der Farbwechsel danebenstand. Jetzt macht
   sie die Arbeit allein - dieselbe Kante wie unter dem Hero.

   GESCHUETZT: kein deckender Hintergrund mehr im Rumpf einer
   Unterseite. Wer einen Abschnitt absetzen will, nimmt die Kante
   oder ein Panel, nie eine Vollflaeche - sonst zerfaellt die
   Website wieder in "Startseite" und "der Rest" (Invariante 19).
   Pruefgriff: node _pruef/hintergrund.js <route>
   Die Liste "GROSSE DECKENDE EBENEN" darf ausser der Navigation
   und dem Fuss nichts enthalten.
   ══════════════════════════════════════════════════════════════ */

/* Der Abschnittswechsel ohne Farbwechsel. */
html:not([data-seite="start"]) .sec-alt{background:transparent}

/* Der Fuss bleibt ein Boden, wird aber durchlaessig: die Welt
   laeuft sichtbar dahinter weiter, der Abschluss bleibt trotzdem
   als Zone erkennbar. Kein Weichzeichner - der waere pro Bild
   teuer und die Flaeche ist gross. */
html:not([data-seite="start"]) .foot{
  background:linear-gradient(180deg,rgba(10,16,32,.34),rgba(10,16,32,.62))}


/* ══════════════════════════════════════════════════════════════
   KEIN FILM UEBER DEM KOPFBEREICH                   30.08.2026
   ══════════════════════════════════════════════════════════════
   Felix: "Oben ist noch so ein Schleier drauf. In der Mitte
   heller, oben und unten dunkler, und man sieht die Kanten." -
   und zwar auf JEDER Unterseite.

   GEMESSEN (node _pruef/schleier.js /about/): senkrechter Schnitt
   am linken Rand, Welt angehalten, jede verdaechtige Ebene einzeln
   abgeschaltet. Ein "Sprung" ist eine Helligkeitsaenderung ueber
   4 px - genau das sieht das Auge als Kante.

     Ausgangswert                    135 Kanten
     ohne .hb-korn                    83 Kanten   (-52), bis -7,36 hell
     ohne .hero-bg (Korn + Schein)    80 Kanten   (-55)
     ohne .hero-bg::after            137 Kanten   bis +5,21 hell
     ohne .hb-glow                   135 Kanten   0,00
     ohne body::before               135 Kanten   0,00

   Zwei Taeter, beide in .hero-bg:
     1. .hb-korn - eine Rauschtextur ueber dem GANZEN Kopfbereich.
        Sie hellte die Flaeche auf und endete hart an der Hero-
        Unterkante. Das war der helle Kasten in der Mitte.
     2. .hero-bg::after - ein Abblendverlauf nach rgba(7,11,20,.55)
        am unteren Hero-Rand. Das war "unten drunter wieder dunkler".

   .hb-glow und der Lichtkegel body::before aendern gemessen NICHTS
   und bleiben unberuehrt - sie waren nur verdaechtig, nicht schuldig.

   Der ganze .hero-bg faellt auf Unterseiten weg. Er stammt aus der
   Zeit, als jede Seite ihren eigenen Hintergrund hatte; seit die
   Canvas-Welt durchlaeuft (Invariante 19) ist er eine zweite
   Hintergrundschicht ueber der ersten - und genau das sieht man.

   GESCHUETZT: keine flaechige Textur und kein Abblendverlauf mehr
   ueber dem Kopfbereich einer Unterseite. Die Chromkante unter dem
   Hero (.hero-klein::after) bleibt - die sitzt auf .hero, nicht auf
   .hero-bg, und ist eine Kante, kein Film.
   Pruefgriff: node _pruef/schleier.js <route>
   ══════════════════════════════════════════════════════════════ */

html:not([data-seite="start"]) .hero-bg{display:none}


/* ══════════════════════════════════════════════════════════════
   ZWEI LEINWAENDE STATT EINER                       30.08.2026
   ══════════════════════════════════════════════════════════════
   #dashStatik traegt den Raum und wird nur bei Groessenwechsel neu
   gezeichnet; die Parallaxe verschiebt sie per transform. will-change
   hebt sie dafuer in eine eigene Compositor-Ebene.
   ══════════════════════════════════════════════════════════════ */
.dash-statik{will-change:transform}


/* ══════════════════════════════════════════════════════════════
   PROJEKTE: EIN EINSTIEG, ZWEI GLEICHE BLOECKE     30.08.2026
   ══════════════════════════════════════════════════════════════
   Felix: "oben stehen doppelte bzw. unnoetige Ueberschriften",
   "auf beiden Projekten dieselbe Struktur verwenden".

   Zwei Dinge sind im Markup passiert, nicht hier:
   1. Die zweite Ueberschrift (.sec-head "Auswahl" / "Systeme aus
      dem eigenen Arbeitsablauf") ist ersatzlos raus. Sie stand
      direkt unter der Hero-Ueberschrift und sagte dasselbe.
   2. .projekt-gedreht ist raus. Die Bilder wechselten die Seite;
      bei zwei Bloecken sieht das nicht nach Rhythmus aus, sondern
      nach Unentschlossenheit.

   Neu ist hier NUR die kurze Headline unter dem Projekttitel.
   Sie ist bewusst KEINE Ueberschrift: die Ueberschriftenleiter
   (h1 -> h2) bliebe sonst nicht sauber, und _pruef/schriftleiter.js
   wuerde die Seite zu Recht anmeckern. Sie ist eine Zeile in der
   Akzentfarbe --acc-text (die kontrastgeprueft helle, nicht --acc).

   GESCHUETZT: die Reihenfolge im Textblock ist auf beiden Bloecken
   gleich - Nummer, Titel, Headline, Beschreibung, Tags, Knopf.
   Pruefgriff: node _pruef/eine-seite.js bzw. ein Blick auf
   /projects/ - beide Bilder muessen links stehen.
   ══════════════════════════════════════════════════════════════ */

.projekt-text .projekt-kopf{
  margin:-4px 0 14px;
  color:var(--acc-text);
  font-size:15.5px;line-height:1.45;font-weight:500;letter-spacing:-.006em}

@media (max-width:760px){
  .projekt-text .projekt-kopf{font-size:14.5px;margin:-2px 0 12px}
}


/* ══════════════════════════════════════════════════════════════
   EA FACTORY ALS CASE STUDY                        30.08.2026
   ══════════════════════════════════════════════════════════════
   Vier Bauteile, alle aus vorhandenem Material - kein neuer Stil:

   1. .fall-block .kicker  - jeder Abschnitt bekommt eine kleine
      Label-Zeile ueber der Ueberschrift, wie auf den anderen
      Seiten auch. Bisher trug nur .sec-head einen Kicker.

   2. .leitsatz - das hervorgehobene Statement. Bewusst KEINE
      Ueberschrift: es ist ein Satz, keine Gliederungsstufe, und
      als h2 wuerde es die Ueberschriftenleiter verbiegen. Material
      ist exakt die Panel-Rezeptur der Seite (Metallfase, dunkles
      Glas, Neon-Oberkante) - dieselbe wie bei .projekt-bild.
      GESCHUETZT: die Spezifitaet ".fall-block .leitsatz" (0,2,0)
      muss ueber ".fall-block p" (0,1,1) liegen, sonst zieht der
      Absatz-Stil Groesse und Farbe zurueck.

   3. .fall-knoepfe - die zwei Abschluss-Knoepfe nebeneinander.
      Das ist NICHT die frueher entfernte, auf jeder Seite
      wiederholte CTA-Leiste, sondern der Schluss genau dieser
      einen Seite (Felix hat beide Knoepfe ausdruecklich benannt).

   4. Die Logo-Kachel auf /projects/ braucht KEIN eigenes CSS.
      Erster Versuch war eine dunkle Platte plus mix-blend-mode:
      screen, damit der schwarze Logo-Grund verschwindet. Das ging
      schief - JPEG und WebP heben reines Schwarz leicht an, screen
      macht daraus wieder Helligkeit, und das schwarze Quadrat war
      sichtbar im Bild zu sehen. GESCHUETZT: der Kachelgrund wird
      ins BILD gebacken (node bild-varianten.js --seite=16:10), nie
      per Blendmodus im CSS. Dann kann zwischen Logo-Untergrund und
      Kachel gar keine Kante entstehen.
   ══════════════════════════════════════════════════════════════ */

.fall-block .kicker{margin-bottom:11px}
/* .why-list bringt selbst keinen Abstand mit - im Fliesstext
   klebten die Pillen sonst am naechsten Absatz. */
.fall-block .why-list{margin:18px 0 20px}

.leitsatz,.fall-block .leitsatz{
  /* margin-inline MUSS auto bleiben: .fall-wrap>* zentriert seine
     Kinder (Zeile ~2998). Mit "margin:0 0 44px" stand der Kasten
     links, waehrend der Text daneben zentriert war - am 30.08.2026
     im Screenshot aufgefallen. */
  position:relative;margin:0 auto 44px;padding:30px 34px;border-radius:var(--r);
  font-size:clamp(1.16rem,2.2vw,1.6rem);line-height:1.44;font-weight:600;
  letter-spacing:-.018em;color:#dce9fb;
  background:linear-gradient(168deg,rgba(160,198,248,.17),rgba(255,255,255,.03) 46%,
    rgba(8,14,28,.68));
  box-shadow:inset 0 1px 0 rgba(200,224,255,.28),
             inset 0 0 0 1px rgba(150,190,245,.15),
             0 26px 50px -34px rgba(0,0,0,.96)}
.leitsatz::after{
  content:"";position:absolute;left:16%;right:16%;top:2px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent,#2f7fff 14%,#a9d4ff 50%,#2f7fff 86%,transparent)}
.leitsatz-klein,.fall-block .leitsatz-klein{
  font-size:clamp(1.02rem,1.7vw,1.22rem);padding:22px 26px;margin:6px auto 0}

.fall-knoepfe{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}


@media (max-width:760px){
  .leitsatz,.fall-block .leitsatz{padding:24px 22px;margin:0 auto 34px}
  .leitsatz-klein,.fall-block .leitsatz-klein{padding:19px 20px}
  .fall-knoepfe .btn{width:100%}
}

/* ── Rechtsseiten (Impressum, Datenschutz) ──────────────────────
   Anschriftsblock mit weiterem Zeilenabstand, damit die Zeilen
   einer Adresse nicht wie Fliesstext zusammenlaufen. .mono nur
   fuer den einen Speicherschluessel, der woertlich genannt wird. */
.imp-block{color:var(--tx-dim);font-size:15.5px;line-height:1.95;margin-bottom:16px}
.imp-block a{color:var(--tx)}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.94em;color:var(--tx)}