:root{
  --abyss:#020814;
  --abyss-2:#040d1c;
  --deep:#06182a;
  --trench:#09223a;
  --card:rgba(7,24,42,.74);
  --card-strong:rgba(9,32,55,.92);
  --line:rgba(103,232,249,.36);
  --line-soft:rgba(103,232,249,.14);
  --cyan:#67e8f9;
  --cyan-2:#22d3ee;
  --teal:#2dd4bf;
  --green:#7dd3a8;
  --violet:#a78bfa;
  --amber:#fbbf24;
  --orange:#fb923c;
  --red:#fb7185;
  --blue:#60a5fa;
  --text:#e6f7ff;
  --muted:#9db7c9;
  --dim:#5f819b;
  --border:rgba(103,232,249,.18);
  --border-strong:rgba(103,232,249,.42);
  --shadow:0 20px 80px rgba(0,0,0,.55), 0 0 48px rgba(34,211,238,.08);
  --mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  --sans:Inter,Manrope,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --display:"Chakra Petch",Orbitron,Inter,system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;background:var(--abyss)}
body{font-family:var(--sans);background:var(--abyss);color:var(--text);min-height:100vh;line-height:1.55;overflow-x:hidden}
body:before{content:"";position:fixed;inset:0;z-index:-4;background:
  radial-gradient(circle at 12% 12%,rgba(34,211,238,.13),transparent 32%),
  radial-gradient(circle at 82% 18%,rgba(167,139,250,.10),transparent 28%),
  radial-gradient(circle at 45% 78%,rgba(45,212,191,.10),transparent 34%),
  linear-gradient(180deg,#020814 0%,#05111f 45%,#071e31 100%)}
body:after{content:"";position:fixed;inset:0;z-index:-3;pointer-events:none;opacity:.14;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");mix-blend-mode:overlay}
.aurora{position:fixed;inset:-25%;z-index:-2;pointer-events:none;background:conic-gradient(from 180deg at 50% 50%, transparent, rgba(103,232,249,.08), transparent, rgba(45,212,191,.07), transparent, rgba(167,139,250,.06), transparent);filter:blur(35px);animation:slowspin 50s linear infinite;opacity:.8}
@keyframes slowspin{to{transform:rotate(360deg)}}
.grid-bg{position:fixed;inset:0;z-index:-1;opacity:.18;pointer-events:none;background-image:linear-gradient(rgba(103,232,249,.09) 1px, transparent 1px),linear-gradient(90deg,rgba(103,232,249,.09) 1px, transparent 1px);background-size:64px 64px;mask-image:linear-gradient(to bottom,transparent,black 12%,black 86%,transparent)}
.shell{max-width:1480px;margin:0 auto;padding:0 28px}
.topbar{position:sticky;top:0;z-index:50;background:rgba(2,8,20,.72);backdrop-filter:blur(18px);border-bottom:1px solid var(--border)}
.topbar-inner{height:74px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--text)}
.brand-mark{width:42px;height:42px;border:1px solid var(--border-strong);border-radius:50%;display:grid;place-items:center;position:relative;box-shadow:0 0 25px rgba(103,232,249,.12)}
.brand-mark:before,.brand-mark:after{content:"";position:absolute;inset:-8px;border:1px solid rgba(103,232,249,.25);border-radius:50%;animation:sonar 3.5s ease-out infinite}.brand-mark:after{animation-delay:1.75s}
@keyframes sonar{0%{opacity:.8;transform:scale(.7)}100%{opacity:0;transform:scale(1.55)}}
.brand-mark span{font-family:var(--display);font-weight:800;color:var(--cyan);font-size:15px;letter-spacing:.06em}.brand-name{font-family:var(--display);letter-spacing:.18em;font-size:17px;font-weight:750;text-transform:uppercase}.brand-name b{font-weight:400;color:var(--cyan)}
.nav{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.nav a{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);text-decoration:none;border:1px solid transparent;border-radius:999px;padding:8px 11px;transition:.2s}.nav a:hover{color:var(--cyan);border-color:var(--border);background:rgba(103,232,249,.05)}

.nav a {
  padding-bottom: 8px; /* Abstand für den Unterstrich */
  position: relative;
}

.nav a.active {
  color: var(--cyan);
  font-weight: 600;
}

.nav a.active::after {
  content: "";
  left: 10%;
  bottom: 0;
  position: absolute;
  width: 80%;
  height: 2px;

  background: var(--cyan);
  border-radius: 999px;
}

.hero{padding:82px 0 34px;position:relative}.eyebrow{display:flex;align-items:center;gap:12px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin-bottom:26px}.eyebrow:before{content:"";width:44px;height:1px;background:linear-gradient(90deg,var(--cyan),transparent);box-shadow:0 0 14px var(--cyan)}
h1{font-family:var(--display);font-size:clamp(43px,3.5vw,96px);line-height:.96;letter-spacing:-.045em;font-weight:600;max-width:1110px}.hero .accent{color:var(--cyan);font-weight:500;font-style:italic;text-shadow:0 0 32px rgba(103,232,249,.25)}.subtitle{margin-top:26px;max-width:830px;color:var(--muted);font-size:18px}.subtitle strong{color:var(--text);font-weight:650}
.hero-actions{
  display:flex;
  gap:20px;
  flex-wrap:wrap;
  margin-top:34px}
.btn{appearance:none;
  border:1px solid var(--border-strong);
  background:rgba(103,232,249,.08);
  color:var(--text);border-radius:999px;
  padding:11px 16px;
  font-family:var(--mono);
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.08em;
  text-decoration:none;
  cursor:pointer;
  transition:.2s;
  display:inline-flex;
  align-items:center;
  gap:10px}
.btn:hover{
  transform:translateY(-1px);
  border-color:var(--cyan);
  box-shadow:0 0 26px rgba(103,232,249,.13)
}.btn.secondary{background:rgba(7,24,42,.4);border-color:var(--border);color:var(--muted)}
.metric-strip{display:grid;grid-template-columns:repeat(7,1fr);gap:10px;margin:32px 0 42px}.metric{background:rgba(7,24,42,.5);border:1px solid var(--border);border-radius:14px;padding:14px 13px;min-height:86px;position:relative;overflow:hidden}.metric:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(103,232,249,.08),transparent 55%);opacity:.55}.metric span{font-family:var(--mono);font-size:10px;color:var(--dim);letter-spacing:.12em;text-transform:uppercase;position:relative}.metric b{display:block;font-family:var(--display);font-size:21px;margin-top:8px;color:var(--text);position:relative}.metric em{font-style:normal;color:var(--cyan)}
.section{margin:56px 0}.section-head{display:flex;justify-content:space-between;gap:24px;align-items:flex-end;margin-bottom:22px}
.kicker{
  font-family:var(--mono);
  font-size:16px;
  color:var(--cyan);
  letter-spacing:.16em;
  text-transform:uppercase;
  margin-bottom:9px;
  text-shadow: 0 0 10px var(--cyan)
}

.section h2{font-family:var(--display);font-size:clamp(26px,3.2vw,48px);line-height:1.05;letter-spacing:-.03em}.section-desc{max-width:680px;color:var(--muted)}
.panel{background:linear-gradient(160deg,rgba(7,24,42,.74),rgba(2,8,20,.58));border:1px solid var(--border);border-radius:26px;box-shadow:var(--shadow);overflow:hidden;position:relative}.panel:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 20% 0%,rgba(103,232,249,.08),transparent 42%),radial-gradient(circle at 100% 20%,rgba(45,212,191,.06),transparent 32%)}
.map-panel{padding:28px;min-height:720px}.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px;position:relative;z-index:3}.tab{border:1px solid var(--border);background:rgba(3,12,24,.62);border-radius:999px;color:var(--muted);font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:9px 12px;cursor:pointer}.tab.active,.tab:hover{color:var(--cyan);border-color:var(--border-strong);background:rgba(103,232,249,.08)}
.ecosystem-canvas{position:relative;z-index:2;display:grid;grid-template-columns:260px 1fr 260px;grid-template-rows:auto auto auto;gap:20px;align-items:stretch}.lane-title{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin-bottom:10px}.stack-col{display:flex;flex-direction:column;gap:14px}.component{border:1px solid var(--border);border-radius:20px;background:rgba(4,13,28,.72);padding:18px;position:relative;cursor:pointer;transition:.25s;min-height:158px;overflow:hidden}.component:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent,var(--cyan));box-shadow:0 0 18px var(--accent,var(--cyan))}.component:hover,.component.active{transform:translateY(-2px);border-color:var(--accent,var(--cyan));box-shadow:0 0 34px color-mix(in srgb,var(--accent,var(--cyan)) 18%,transparent)}.component.dimmed{opacity:.42;filter:saturate(.6)}
.comp-top{display:flex;align-items:center;justify-content:space-between;gap:12px}.comp-id{font-family:var(--display);letter-spacing:.08em;font-size:20px;font-weight:800}.comp-type{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);border:1px solid rgba(255,255,255,.08);border-radius:999px;padding:4px 7px;background:rgba(255,255,255,.03)}.component p{color:var(--muted);font-size:13px;margin-top:12px}.io{display:grid;grid-template-columns:1fr;gap:8px;margin-top:14px}.io div{font-family:var(--mono);font-size:10px;color:var(--dim);display:flex;gap:7px}.io strong{color:var(--text);font-weight:600}.tag-row{display:flex;gap:6px;flex-wrap:wrap;margin-top:14px}.tag{font-family:var(--mono);font-size:10px;padding:4px 7px;border-radius:6px;background:rgba(103,232,249,.06);border:1px solid rgba(103,232,249,.12);color:var(--muted)}
.core-map{min-height:620px;position:relative;border:1px solid var(--line-soft);border-radius:24px;background:radial-gradient(circle at 50% 50%,rgba(103,232,249,.09),transparent 40%),linear-gradient(180deg,rgba(4,13,28,.42),rgba(2,8,20,.28));overflow:hidden;padding:22px}.flow-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.92}.flow-path{fill:none;stroke:rgba(103,232,249,.33);stroke-width:2.2;stroke-linecap:round;stroke-dasharray:8 10;animation:dash 24s linear infinite}.flow-path.strong{stroke:rgba(45,212,191,.6);stroke-width:3}.flow-path.dim{opacity:.18}.flow-path.active{stroke:var(--cyan);stroke-width:4;filter:drop-shadow(0 0 8px rgba(103,232,249,.75));opacity:1}.arrow-dot{fill:var(--cyan);filter:drop-shadow(0 0 8px var(--cyan))}@keyframes dash{to{stroke-dashoffset:-360}}
.orbit{position:absolute;border:1px solid rgba(103,232,249,.14);border-radius:50%;inset:13%;animation:orbitPulse 6s ease-in-out infinite}.orbit.o2{inset:22%;animation-delay:1s;border-color:rgba(167,139,250,.13)}.orbit.o3{inset:32%;animation-delay:2s;border-color:rgba(45,212,191,.14)}@keyframes orbitPulse{50%{opacity:.35;transform:scale(1.015)}}
.node{position:absolute;transform:translate(-50%,-50%);width:164px;min-height:98px;border:1px solid var(--border);border-radius:18px;background:rgba(4,13,28,.86);backdrop-filter:blur(14px);padding:14px;text-align:center;transition:.25s;cursor:pointer}.node:hover,.node.active{border-color:var(--accent,var(--cyan));box-shadow:0 0 32px rgba(103,232,249,.18);transform:translate(-50%,-53%)}.node.dimmed{opacity:.35}.node b{display:block;font-family:var(--display);font-size:20px;letter-spacing:.08em;color:var(--text)}.node small{font-family:var(--mono);font-size:9px;text-transform:uppercase;letter-spacing:.14em;color:var(--dim)}.node .mini{margin-top:7px;color:var(--muted);font-size:11px}.n-kraken{left:10%;top:50%;--accent:var(--cyan)}.n-iim{left:39%;top:31%;--accent:var(--teal)}.n-modus{left:39%;top:69%;--accent:var(--violet)}.n-iimql{left:62%;top:20%;--accent:var(--blue)}.n-workbench{left:62%;top:43%;--accent:var(--green)}.n-mbrm{left:62%;top:66%;--accent:var(--amber)}.n-acdp{left:88%;top:50%;--accent:var(--orange)}.n-feedback{left:50%;top:91%;width:210px;--accent:var(--red)}
.center-legend{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:250px;min-height:132px;border:1px solid rgba(103,232,249,.22);border-radius:22px;background:rgba(2,8,20,.76);padding:18px;text-align:center;box-shadow:0 0 60px rgba(0,0,0,.35)}.center-legend b{font-family:var(--display);font-size:21px;letter-spacing:.04em}.center-legend p{font-size:12px;color:var(--muted);margin-top:9px}.center-legend code{font-family:var(--mono);font-size:10px;color:var(--cyan)}
.side-panel{
  border:1px solid var(--border);
  border-radius:22px;
  background:rgba(4,13,28,.72);
  padding:18px;
  min-height:620px;
  border-color: var(--inspector-accent, var(--border));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--inspector-accent, var(--cyan)) 35%, transparent),
    0 0 28px color-mix(in srgb, var(--inspector-accent, var(--cyan)) 16%, transparent);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.inspector-title{font-family:var(--display);font-size:27px;letter-spacing:.02em}.inspector-sub{font-family:var(--mono);font-size:11px;color:var(--cyan);text-transform:uppercase;letter-spacing:.12em;margin-top:4px}.inspector-body{color:var(--muted);font-size:13px;margin-top:16px}.inspector-body h4{font-family:var(--mono);font-size:11px;color:var(--text);letter-spacing:.12em;text-transform:uppercase;margin:18px 0 8px}.bullet-list{display:grid;gap:8px}.bullet-list li{list-style:none;padding-left:16px;position:relative}.bullet-list li:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--cyan);position:absolute;left:0;top:.65em;box-shadow:0 0 10px var(--cyan)}.flow-badges{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}.flow-badge{border:1px solid var(--border);border-radius:999px;padding:5px 8px;font-family:var(--mono);font-size:10px;color:var(--muted);background:rgba(103,232,249,.04)}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:18px}.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.card{background:rgba(4,13,28,.68);border:1px solid var(--border);border-radius:22px;padding:20px;position:relative;overflow:hidden}.card:before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--cyan),transparent);opacity:.4}.card h3{font-family:var(--display);font-size:22px;letter-spacing:-.01em}.card p{color:var(--muted);font-size:14px;margin-top:10px}.card code{font-family:var(--mono);font-size:12px;color:var(--cyan);background:rgba(103,232,249,.06);border:1px solid rgba(103,232,249,.12);border-radius:6px;padding:2px 5px}.pill-list{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}.pill{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);border:1px solid var(--border);background:rgba(103,232,249,.04);border-radius:999px;padding:7px 9px}.timeline{position:relative;display:grid;gap:14px;margin-top:8px}.step{display:grid;grid-template-columns:52px 1fr;gap:14px;align-items:start}
.step-no{width:42px;
  height:42px;
  border-radius:50%;
  display:grid;
  place-items:center;
  border:1px solid var(--border-strong);
  font-family:var(--display);
  color:var(--cyan);
  box-shadow:0 0 20px rgba(103,232,249,.08);
  margin: auto;
}
.step-body{border:1px solid var(--border);background:rgba(2,8,20,.42);border-radius:16px;padding:14px}.step-body b{font-family:var(--display);font-size:17px}.step-body p{margin-top:6px;color:var(--muted);font-size:13px}
.matrix{display:grid;grid-template-columns:1.1fr repeat(7,1fr);border:1px solid var(--border);border-radius:22px;overflow:hidden;background:rgba(4,13,28,.6)}.matrix div{padding:13px 10px;border-right:1px solid rgba(103,232,249,.12);border-bottom:1px solid rgba(103,232,249,.12);font-size:12px;color:var(--muted)}.matrix div:nth-child(8n){border-right:none}.matrix .head{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--cyan);background:rgba(103,232,249,.06)}.matrix .rowhead{font-family:var(--display);color:var(--text);font-weight:700}.dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--cyan);box-shadow:0 0 12px var(--cyan)}.dot.soft{opacity:.35}.dot.warn{background:var(--amber);box-shadow:0 0 12px var(--amber)}.dot.violet{background:var(--violet);box-shadow:0 0 12px var(--violet)}.dot.green{background:var(--teal);box-shadow:0 0 12px var(--teal)}
.query-box{background:#020814;border:1px solid rgba(103,232,249,.25);border-radius:18px;padding:18px;overflow:auto;box-shadow:inset 0 0 40px rgba(103,232,249,.03);margin-top:14px}.query-box pre{font-family:var(--mono);font-size:12px;color:#b7f7ff;line-height:1.7;white-space:pre-wrap}.query-box .comment{color:#6b92ae}.query-box .kw{color:#67e8f9}.query-box .str{color:#7dd3a8}.query-box .role{color:#fbbf24}
.footer{margin:70px 0 34px;color:var(--dim);font-family:var(--mono);font-size:11px}.source-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:18px}
.source{display:flex; align-items: center; border:1px solid var(--border);border-radius:14px;padding:12px;background:rgba(4,13,28,.48)}
.source a{color:var(--cyan);text-decoration:none}.source span{display:block;margin-top:4px;color:var(--dim)}

.map-layout{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:22px;align-items:start}
.flow-board{position:relative;border:1px solid var(--line-soft);border-radius:24px;background:linear-gradient(180deg,rgba(4,13,28,.5),rgba(2,8,20,.34));padding:24px;overflow:hidden}
.flow-board:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 15% 0%,rgba(103,232,249,.10),transparent 32%),radial-gradient(circle at 90% 20%,rgba(45,212,191,.08),transparent 28%)}
.flow-grid{position:relative;display:grid;gap:16px;z-index:2}
.flow-row{display:grid;gap:14px;justify-content:center}
.flow-row.row-1,.flow-row.row-4,.flow-row.row-5,.flow-row.row-relevance{grid-template-columns:minmax(280px,540px)}
.flow-row.row-2{grid-template-columns:repeat(2,minmax(220px,1fr))}
.flow-row.row-3{grid-template-columns:repeat(4,minmax(0,1fr))}
.flow-card{appearance:none;text-align:left;width:100%;border:1px solid var(--border);border-radius:20px;background:rgba(6,18,32,.9);padding:18px 18px 16px;cursor:pointer;position:relative;transition:.2s;box-shadow:0 10px 30px rgba(0,0,0,.22)}

.flow-card:hover{
    transform:translateY(-2px);
    border-color:var(--border-strong)
}

.flow-card.active{border-color:var(--accent,var(--cyan));box-shadow:0 0 0 1px var(--accent,var(--cyan)),0 0 28px color-mix(in srgb,var(--accent,var(--cyan)) 18%,transparent)}
.flow-card.soft-dim{opacity:.62;filter:saturate(.72)}

/* Updated */
.flow-card:before{
    content:"";
    position:absolute;
    inset:-2.5px 0 auto 0; /* changed inset top value */
    height:2px;
    background:linear-gradient(90deg,var(--accent,var(--cyan)),transparent 70%);
    opacity:.85
}

.flow-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;flex-wrap:wrap}
.flow-name{font-family:var(--display);font-size:29px;line-height:1;font-weight:800;letter-spacing:.03em;color:white;white-space:nowrap}
.flow-kind{flex:0 1 auto;font-family:var(--mono);font-size:10px;color:var(--dim);text-transform:uppercase;letter-spacing:.12em;border:1px solid rgba(255,255,255,.08);border-radius:999px;padding:4px 8px;background:rgba(255,255,255,.03)}
.flow-strap{margin-top:8px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan)}
.flow-copy{margin-top:11px;color:var(--muted);font-size:13px;min-height:58px}
.flow-mini{display:flex;flex-wrap:wrap;gap:7px;margin-top:13px}.flow-mini span{font-family:var(--mono);font-size:10px;padding:5px 8px;border-radius:999px;background:rgba(103,232,249,.05);border:1px solid rgba(103,232,249,.14);color:var(--muted)}
.connector{display:flex;justify-content:center;align-items:center;gap:14px;min-height:40px;position:relative;z-index:2}
.connector .shaft{width:2px;height:26px;background:linear-gradient(180deg,rgba(103,232,249,.85),rgba(103,232,249,.12));box-shadow:0 0 12px rgba(103,232,249,.35)}
.connector .label{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);border:1px solid rgba(103,232,249,.14);background:rgba(7,24,42,.72);padding:6px 10px;border-radius:999px}
.connector-split{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;align-items:center}
.connector-split .branch{display:flex;justify-content:center;align-items:center;gap:10px}
.connector-split .branch .shaft{width:2px;height:26px;background:linear-gradient(180deg,rgba(103,232,249,.8),rgba(103,232,249,.14))}
.connector-split .branch .label{font-family:var(--mono);font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:var(--dim);padding:6px 10px;border-radius:999px;border:1px solid rgba(103,232,249,.14);background:rgba(7,24,42,.72)}
.bridge-note{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:-2px}.bridge-note .note{font-family:var(--mono);font-size:10px;color:var(--dim);letter-spacing:.08em;text-transform:uppercase;padding:8px 10px;border-radius:12px;border:1px dashed rgb(103, 232, 249, .45);background:rgba(255,255,255,.02);text-align:center}
.feedback-return{display:flex;justify-content:center;align-items:center;gap:12px;color:var(--muted);font-size:13px;padding-top:4px}.feedback-return .loop{width:44px;height:44px;border-radius:50%;border:1px solid rgba(251,113,133,.35);display:grid;place-items:center;color:var(--red);box-shadow:0 0 16px rgba(251,113,133,.12)}
.feedback-return .loop svg{width:19px;height:19px}
.map-help{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}.map-help span{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);padding:7px 9px;border-radius:999px;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.06)}
.highlight-pill{color:var(--cyan);border-color:rgba(103,232,249,.24)!important;background:rgba(103,232,249,.08)!important}
@media(max-width:1180px){.map-layout{grid-template-columns:1fr}.flow-row.row-3{grid-template-columns:repeat(2,minmax(0,1fr))}.flow-row.row-2{grid-template-columns:1fr}.bridge-note{grid-template-columns:1fr}.connector-split{grid-template-columns:1fr}.connector-split .branch{justify-content:flex-start}.side-panel{min-height:auto}}

@media(max-width:1180px){.ecosystem-canvas{grid-template-columns:1fr}.side-panel{min-height:auto}.core-map{min-height:680px}.metric-strip{grid-template-columns:repeat(3,1fr)}.grid-3,.grid-2{grid-template-columns:1fr}.matrix{grid-template-columns:1fr}.matrix div{border-right:none}.matrix .head:not(:first-child){display:none}}
@media(max-width:760px){.shell{padding:0 16px}.topbar-inner{height:auto;padding:14px 0;align-items:flex-start;flex-direction:column}.nav{justify-content:flex-start}.hero{padding-top:48px}.metric-strip{grid-template-columns:1fr}.flow-row.row-3{grid-template-columns:1fr}.core-map{min-height:920px;padding:14px}.node{width:138px}.n-kraken{left:50%;top:8%}.n-iim{left:30%;top:25%}.n-modus{left:70%;top:25%}.n-iimql{left:25%;top:48%}.n-workbench{left:75%;top:48%}.n-mbrm{left:30%;top:72%}.n-acdp{left:70%;top:72%}.n-feedback{left:50%;top:91%}.center-legend{width:210px;top:50%}.source-grid{grid-template-columns:1fr}}


/* ===== v4 content fixes: Malwarebox logo + cleaner content blocks ===== */
.brand-mark{background:rgba(103,232,249,.04);border-radius:18px;width:48px;height:48px}
.brand-mark svg{width:32px;height:32px;display:block}
.brand-mark:before,.brand-mark:after{border-radius:18px}
.logo-watermark{position:absolute;right:4%;top:22px;width:min(260px,22vw);opacity:.08;filter:drop-shadow(0 0 28px rgba(103,232,249,.35));pointer-events:none}
.logo-watermark svg{width:100%;height:auto}
.info-band{display:grid;grid-template-columns:1.1fr .9fr;gap:22px;margin:32px 0 8px}
.info-card{background:linear-gradient(160deg,rgba(7,24,42,.72),rgba(2,8,20,.5));border:1px solid var(--border);border-radius:22px;padding:24px;position:relative;overflow:hidden}
.info-card:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 0 0,rgba(103,232,249,.08),transparent 40%);pointer-events:none}
.info-card h3{font-family:var(--display);font-size:24px;letter-spacing:-.02em;margin-bottom:12px;position:relative}
.info-card p{color:var(--muted);font-size:14px;position:relative}
.repo-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:16px;position:relative}
.repo-link{display:flex;justify-content:space-between;gap:12px;align-items:center;text-decoration:none;color:var(--text);border:1px solid var(--border);border-radius:14px;padding:12px 14px;background:rgba(103,232,249,.04);transition:.2s}
.repo-link:hover{border-color:var(--cyan);transform:translateY(-1px);box-shadow:0 0 22px rgba(103,232,249,.10)}
.repo-link b{font-family:var(--display);letter-spacing:.04em}
.repo-link span{font-family:var(--mono);font-size:10px;text-transform:uppercase;color:var(--dim)}
.component-link{color:inherit;text-decoration:none}
.component-link .card{min-height:255px}

/* added hover effect for component-link cards */
.component-link .card:hover{
    transform:translateY(-2px);
    border-color:var(--border-strong)
}
.card h3 a{color:inherit;text-decoration:none}.card h3 a:hover{color:var(--cyan)}
.badge-line{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}.badge-line span{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);border:1px solid var(--border);border-radius:999px;padding:6px 9px;background:rgba(103,232,249,.04)}
.principle-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.principle-card{background:rgba(7,24,42,.58);border:1px solid var(--border);border-radius:20px;padding:20px;position:relative;overflow:hidden}
.principle-card:after{content:attr(data-num);position:absolute;right:16px;top:8px;font-family:var(--display);font-size:52px;color:rgba(103,232,249,.05);font-weight:800}
.principle-card h3{font-family:var(--display);font-size:20px;margin-bottom:10px}.principle-card p{color:var(--muted);font-size:13px}
.public-private{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.layer-list{display:grid;gap:10px;margin-top:16px}.layer-item{display:flex;justify-content:space-between;gap:16px;align-items:center;border:1px solid var(--border);border-radius:14px;padding:12px 14px;background:rgba(255,255,255,.02)}.layer-item b{font-family:var(--display)}.layer-item span{font-family:var(--mono);font-size:10px;text-transform:uppercase;color:var(--dim)}

/* clickable layer-items: match the non-link cards, drop default link look */
a.layer-item{text-decoration:none;color:inherit;cursor:pointer;transition:.2s}
a.layer-item:hover{border-color:var(--border-strong);transform:translateY(-1px)}
a.layer-item b{color:inherit}

.footer-logo{display:flex;align-items:center;gap:14px}.footer-logo svg{width:38px;height:38px}
@media(max-width:980px){.info-band,.public-private,.principle-grid{grid-template-columns:1fr}.repo-links{grid-template-columns:1fr}.logo-watermark{display:none}}


/* ===== v5 lightening + footer cleanup ===== */
:root{
  --abyss:#071321;
  --abyss-2:#0b1a2b;
  --deep:#0d2237;
  --trench:#14314b;
  --card:rgba(13,34,55,.84);
  --card-strong:rgba(15,40,64,.96);
  --line:rgba(103,232,249,.42);
  --line-soft:rgba(103,232,249,.18);
  --text:#ecf7ff;
  --muted:#bdd0de;
  --dim:#7f9ab0;
  --border:rgba(103,232,249,.20);
  --border-strong:rgba(103,232,249,.46);
  --shadow:0 18px 60px rgba(0,0,0,.28), 0 0 38px rgba(34,211,238,.06);
}
html,body{background:var(--abyss)}
body:before{background:
  radial-gradient(circle at 12% 12%,rgba(34,211,238,.16),transparent 34%),
  radial-gradient(circle at 82% 18%,rgba(167,139,250,.12),transparent 30%),
  radial-gradient(circle at 45% 78%,rgba(45,212,191,.11),transparent 36%),
  linear-gradient(180deg,#071321 0%,#0a1a2c 42%,#10263b 100%)}
body:after{opacity:.10}
.topbar{background:rgba(7,19,33,.78)}
.hero{padding:78px 0 26px}
.subtitle{color:var(--muted)}
.metric{background:rgba(13,34,55,.72)}
.panel{background:linear-gradient(160deg,rgba(12,33,54,.86),rgba(8,20,34,.72))}
.card{background:rgba(12,31,50,.78)}
.step-body{background:rgba(9,24,40,.56)}
.component{background:rgba(10,27,45,.78)}
.flow-board{background:linear-gradient(180deg,rgba(11,30,49,.76),rgba(8,20,33,.62))}
.side-panel{background:linear-gradient(180deg,rgba(10,28,46,.92),rgba(8,20,34,.80))}
.flow-copy,.card p,.principle-card p,.info-card p,.section-desc,.component p,.step-body p{color:var(--muted)}
.repo-link,.layer-item,.principle-card,.info-card,.source{background:rgba(12,31,50,.62)}
.brand-mark{background:rgba(103,232,249,.06)}
.logo-watermark{opacity:.10}
/* cleaner links block */
#links .panel.card{padding:24px}
#links .repo-links{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
#links .repo-link{min-height:68px;border-radius:16px}
#links .repo-link b{font-size:18px}
/* footer cleanup */
.footer{margin:26px 0 34px;padding:22px 24px;background:linear-gradient(160deg,rgba(12,31,50,.72),rgba(8,20,34,.58));border:1px solid var(--border);border-radius:24px;color:var(--muted)}
.footer-logo{padding-bottom:16px;border-bottom:1px solid var(--border);margin-bottom:16px}
.footer-logo strong{display:block;font-family:var(--display);font-size:20px;letter-spacing:.01em;color:var(--text)}
.footer-logo span{color:var(--muted);font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase}
.source-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:0}
.source{padding:14px 14px 12px;border-radius:16px;background:rgba(255,255,255,.03)}
.source a{display:block;font-family:var(--display);font-size:17px;color:var(--text);margin-bottom:4px}
.source span{margin-top:0;color:var(--muted);font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase}

.source span.source-title{
  display: block;
  font-family: var(--display);
  font-size: 17px;
  color: var(--text);
  margin-bottom: 4px;
  text-transform: none
}

.source:hover{
    transform:translateY(-2px);
    border-color:var(--border-strong)
}

/* change selection hightlight color */
::selection {
  background: var(--cyan);
  color: black;
  text-shadow: none;
}

/* mozilla own selection api */
::-moz-selection{
  background: var(--cyan);
  color: black;
  text-shadow: none;
}

a.source{
  text-decoration: none;
}



@media(max-width:1180px){#links .repo-links,.source-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){#links .repo-links,.source-grid{grid-template-columns:1fr}.footer{padding:18px}.source a{font-size:16px}}


/*###################*/

/* Permanent glowing border only */
.btn.secondary.glow-on-hover {
  position: relative;
  z-index: 0;
  overflow: visible;
  padding:22px 32px;
  /* bleibt optisch ein normaler secondary button */
  background: rgba(7,24,42,.4);
  border-color: var(--border);
  border-radius: 30px;
}

/* Nur der äußere animierte Rahmen */
.btn.secondary.glow-on-hover::before {
  content: "";
  position: absolute;

  inset: -2px;
  padding: 4px;

  border-radius: inherit;

  background: linear-gradient(
    45deg,
    var(--cyan),
    var(--teal),
    var(--green),
    var(--blue),
    var(--violet),
    var(--cyan)
  );

  background-size: 400%;
  animation: glowing 20s linear infinite;

  pointer-events: none;
  z-index: -1;

  /* Das hier stanzt die Mitte aus */
  -webkit-mask:
    linear-gradient(#071321 0 0) content-box,
    linear-gradient(#071321 0 0);

  -webkit-mask-composite: xor;

  mask:
    linear-gradient(#071321 0 0) content-box,
    linear-gradient(#071321 0 0);

  mask-composite: exclude;
}

/* Keine innere Glow-Fläche */
.btn.secondary.glow-on-hover::after {
  display: none;
}

/* normalen Button-Hover für diesen Button neutralisieren */
.btn.secondary.glow-on-hover:hover {
  transform: none;
  border-color: var(--border);
  box-shadow: none;
}

@keyframes glowing {
  0% {
    background-position: 0 0;
  }

  50% {
    background-position: 400% 0;
  }

  100% {
    background-position: 0 0;
  }
}
/*###################*/

/* Holographic cyan hover sweep */
.btn.secondary.glow-on-hover {
  position: relative;
  isolation: isolate;
  overflow: visible;
}

/* Falls der Button-Text in span liegt */
.btn.secondary.glow-on-hover span {
  position: relative;
  z-index: 4;
}

/* Holo-Layer wieder aktivieren */
.btn.secondary.glow-on-hover::after {
  display: block;
  content: "";
  position: absolute;

  inset: 0;
  border-radius: inherit;

  pointer-events: none;
  z-index: 3;

  opacity: 0;

  background: linear-gradient(
    110deg,
    transparent 0%,
    transparent 28%,
    rgba(103, 232, 249, 0.08) 40%,
    rgba(103, 232, 249, 0.65) 50%,
    rgba(103, 232, 249, 0.12) 60%,
    transparent 72%,
    transparent 100%
  );

  background-size: 260% 100%;
  background-position: 140% 0;

  transition:
    opacity .2s ease,
    background-position .7s ease;
}

/* Hover: Holo-Sweep abspielen */
.btn.secondary.glow-on-hover:hover::after {
  opacity: 1;
  background-position: -140% 0;
}

/* Intensiver Cyan-Boxshadow beim Hover */
.btn.secondary.glow-on-hover:hover {
  transform: none;
  border-color: var(--cyan);

  background: rgba(7,24,42,.4);

  box-shadow:
    0 0 10px rgba(103, 232, 249, .55),
    0 0 24px rgba(103, 232, 249, .45),
    0 0 48px rgba(103, 232, 249, .25),
    0 0 80px rgba(103, 232, 249, .14);
}

/*###################*/
.btn-arrow-down {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;

  fill: none;
  stroke: var(--cyan);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;

  filter:
    drop-shadow(0 0 4px rgba(103, 232, 249, .75))
    drop-shadow(0 0 10px rgba(103, 232, 249, .35));

  transition:
    transform .25s ease,
    filter .25s ease;
}

.btn:hover .btn-arrow-down {
  transform: translateY(2px);
  filter:
    drop-shadow(0 0 6px rgba(103, 232, 249, .95))
    drop-shadow(0 0 16px rgba(103, 232, 249, .55));
}

/*########################*/
.source-icon {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;

  object-fit: contain;

  filter:
    drop-shadow(0 0 6px rgba(103, 232, 249, .45))
    drop-shadow(0 0 14px rgba(103, 232, 249, .18));

  transition:
    transform .2s ease,
    filter .2s ease,
    opacity .2s ease;
}

.source-text {
  display: block;
  min-width: 0;
  margin-left: 20px;
}

.source:hover .source-icon {
  transform: translateY(-1px) scale(1.04);
  filter:
    drop-shadow(0 0 8px rgba(103, 232, 249, .75))
    drop-shadow(0 0 18px rgba(103, 232, 249, .35));
}