/* ===========================
   Brand & Theme (Edit here)
   =========================== */
:root{
  --nav-gap: 24px;
  --nav-h: 84px;
  /* Phantomcrew CD */
  --brand-text-dark: #000436;
  --brand-accent:    #FF5050;
  --brand-struct:    #ECEBED;
  --brand-basic:     #ACACAC;
  --brand-standard:  #1D3A69;
  --brand-premium:   #C99443;

  /* Site theme (Dark Glass) */
  --bg:             radial-gradient(1200px 800px at 20% 10%, rgba(255,255,255,0.06), transparent 60%),
                     radial-gradient(900px 700px at 80% 30%, rgba(255,80,80,0.08), transparent 60%),
                     linear-gradient(180deg, #0c1424 0%, #0a0f1e 60%, #070b16 100%);
  --text:           #ECEBED;
  --muted:          #cfd2da;
  --link:           #FF9B9B;
  --shadow:         0 10px 30px rgba(0,0,0,.35);

  /* Glass */
  --glass-bg:       rgba(255,255,255,.06);
  --glass-brd:      rgba(255,255,255,.18);
  --glass-blur:     14px;
  --glass-radius:   18px;
  --glass-inset:    inset 0 1px 0 rgba(255,255,255,.06);

  /* Typography */
  --font-serif:     "Adelle Light", "Lora", "Georgia", serif;
  --font-sans:      "Adelle Sans Semibold", "Inter", "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Spacing scale */
  --space-1: .375rem;
  --space-2: .75rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 4.5rem;
  --maxw: 1200px;

  /* Motion tuning */
  --dur-fast: .18s;
  --dur: .35s;
  --dur-slow: .65s;
  --ease: cubic-bezier(.2,.7,.2,1);
  --ease-spring: cubic-bezier(.16,1,.3,1);

  --nav-gap: 20px;
}

/* Base */
* { box-sizing: border-box; }
html, body {
  padding-top: calc(var(--nav-h) + var(--nav-gap)); height: 100%; }
html { scroll-behavior: smooth; 
  scroll-padding-top: calc(var(--nav-h) + var(--nav-gap));
}
body{
  margin:0; color:var(--text); background:var(--bg);
  font-family: var(--font-sans); line-height:1.5; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
a{ color:var(--link); text-decoration:none; transition:opacity var(--dur-fast) var(--ease); }
a:hover{ text-decoration:underline; opacity:1; }
img, video{ max-width:100%; height:auto; display:block; }
.container{ width: min(100% - 2rem, var(--maxw)); margin-inline:auto; }

/* Utility */
.btn{
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; gap:.6em;
  padding:.9rem 1.2rem; border-radius:14px; border:1px solid rgba(255,255,255,.18);
  background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06));
  backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur));
  color: var(--text); font-weight:700; letter-spacing:.2px;
  transition: transform var(--dur-fast) var(--ease-spring), box-shadow var(--dur-fast) var(--ease), background var(--dur) var(--ease);
  box-shadow: var(--shadow);
  will-change: transform;
}
.btn:hover{ transform: translateY(-2px); box-shadow: 0 14px 34px rgba(0,0,0,.45); }
.btn--accent{ background: linear-gradient(180deg, rgba(255,80,80,.95), rgba(255,80,80,.78)); border-color: rgba(0,0,0,.25); color:#111; }
.btn--ghost{ background: rgba(255,255,255,.05); }
.chip{ display:inline-block; padding:.45rem .7rem; border-radius:999px; border:1px solid var(--glass-brd); background:var(--glass-bg);
       backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-size:.85rem; color:var(--muted); margin:.25rem .35rem .35rem 0; }

.glass{
  background: var(--glass-bg);
  border: 1px solid var(--glass-brd);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  border-radius: var(--glass-radius);
  box-shadow: var(--glass-inset), var(--shadow);
  transition: transform var(--dur) var(--ease-spring), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.glass:hover{
  transform: translateY(-4px);
  border-color: rgba(255,255,255,.28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 18px 40px rgba(0,0,0,.48);
}

/* Animated gradient shimmer on body */
body::before{
  content:""; position:fixed; inset:-20%; z-index:-3;
  background: radial-gradient(600px 400px at 20% 30%, rgba(255,80,80,.10), transparent 60%),
              radial-gradient(700px 500px at 80% 10%, rgba(29,58,105,.12), transparent 60%);
  filter: blur(30px) saturate(120%);
  animation: drift 24s linear infinite;
  opacity:.7; pointer-events:none;
}
@keyframes drift{ to{ transform: translate3d(2%, -1%, 0) rotate(0.001turn); } }

/* Header / Nav */
.nav{width:100%;right:0;left:0;
  position: fixed; top:0; z-index: 999; padding:1.35rem 0; transition: backdrop-filter var(--dur) var(--ease), background var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  background: rgba(13,18,34,.35);
  border-bottom: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.nav--scrolled{ background: rgba(10,15,32,.6); box-shadow: 0 10px 30px rgba(0,0,0,.3); }
.nav-inner{ display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.brand{ display:flex; align-items:center; gap:.75rem; text-transform:uppercase; letter-spacing:.14em; font-weight:800; }

.brand__text{ font-family: var(--font-sans); font-weight:800; }

.menu{ display:flex; gap:1.2rem; align-items:center; }
.menu a{ color:var(--text); opacity:.86; font-weight:600; position:relative; }
.menu a::after{ content:""; position:absolute; left: 0; right:100%; bottom:-6px; height:2px; background:currentColor; opacity:.8; transition: right var(--dur) var(--ease); }
.menu a:hover{ opacity:1; }
.menu a:hover::after{ right:0; }

.hamburger{ display:none; background:none; border:0; color:var(--text); font-size:1.4rem; }

/* Hero */
.hero{ position:relative;  display:grid; align-items:center; overflow:hidden; 
  margin-top: var(--nav-h);
}
.hero__bg{ position:absolute; inset:0; z-index:-2; pointer-events:none; opacity:.54; mix-blend-lighten; transform: translateZ(0); will-change: transform; }
.hero__overlay{ position:absolute; inset:0; z-index:-1; background: radial-gradient(800px 400px at 20% 80%, rgba(255,80,80,.08), transparent 60%), linear-gradient(180deg, rgba(29,58,105,.25), rgba(0,0,0,.55)); }
.hero__content{ max-width:800px; padding: calc(var(--space-6) + clamp(6px, 1vmin, 16px)) 0 var(--space-5); }
.eyebrow{ color:var(--brand-basic); letter-spacing:.2em; text-transform:uppercase; font-size:.85rem; }
h1{ font-size: clamp(2rem, 3.8vw + .8rem, 4rem); line-height:1.05; margin:.4rem 0 var(--space-3); }
p.lead{ font-size: clamp(1.05rem, .7vw + 1rem, 1.35rem); color:var(--muted); margin:0 0 var(--space-4); max-width: 60ch; }
.cta{ display:flex; gap: .8rem; flex-wrap:wrap; }

/* Sections */
section{ padding: var(--space-7) 0; }
.section-head{ display:flex; align-items:end; justify-content:space-between; gap:1rem; margin-bottom: var(--space-5); }
.section-head h2{ font-size: clamp(1.6rem, 1.8vw + 1rem, 2.4rem); margin:0; }
.grid{ display:grid; gap:1rem; }
.grid--cards{ grid-template-columns: repeat(12, 1fr); }
.card{ grid-column: span 4; padding:1.25rem; position:relative; overflow:hidden; transform-style: preserve-3d; }
.card__icon{ width:44px; height:44px; border-radius:12px; display:grid; place-items:center; margin-bottom:.6rem; background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.05)); border:1px solid var(--glass-brd); transition: transform var(--dur-fast) var(--ease); will-change: transform; }
.card .badge{ position:absolute; top:.75rem; right:.75rem; font-size:.73rem; padding:.35rem .55rem; border-radius:999px; border:1px solid rgba(255,255,255,.22); background:rgba(201,148,67,.16); color:#f4e5c9; }
.card h3{ margin:.2rem 0 .4rem; font-size:1.2rem; }
.card p{ color:var(--muted); margin:0 0 .6rem; }

/* Showreel */
.reel{ position:relative; border-radius: var(--glass-radius); overflow:hidden; border:1px solid var(--glass-brd); box-shadow: var(--shadow); }
.reel video, .reel iframe{ aspect-ratio: 16 / 9; width:100%; background:#000; }

/* Projects */
.projects{ grid-template-columns: repeat(12, 1fr); gap:1rem; }
.tile{ grid-column: span 4; position:relative; border-radius:16px; overflow:hidden; border:1px solid var(--glass-brd); background:rgba(255,255,255,.03); transform-style:preserve-3d; transition: transform var(--dur) var(--ease-spring), box-shadow var(--dur) var(--ease); will-change: transform; }
.tile:hover{ box-shadow: 0 18px 50px rgba(0,0,0,.45); }
.tile__img{ aspect-ratio:16/9; object-fit:cover; width:100%; filter:saturate(105%) contrast(105%); transition: transform var(--dur) var(--ease); }
.tile:hover .tile__img{ transform: scale(1.03); }
.tile__meta{ position:absolute; inset:auto 0 0 0; padding: .65rem .8rem; display:flex; align-items:center; justify-content:space-between; background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.55)); }
.pill{ font-size:.78rem; padding:.28rem .5rem; border-radius:999px; background: rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.18); }

/* Studio strip */
.strip{ display:grid; grid-template-columns: 1fr 1fr; gap:1rem; align-items:stretch; }
.fact{ padding:1rem 1.2rem; }
.fact strong{ color:#fff; }
.fact small{ color:var(--muted); display:block; }

/* Contact */
.contact{ display:grid; grid-template-columns: 1.1fr .9fr; gap:1rem; align-items:start; }
form.glass{ padding:1rem; }
.field{ margin-bottom:.9rem; }
.field label{ font-size:.9rem; color:var(--muted); display:block; margin-bottom:.35rem; }
.field input, .field textarea{ width:100%; padding:.9rem 1rem; border-radius:12px; border:1px solid var(--glass-brd); background: rgba(255,255,255,.06); color:var(--text); outline:none; transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
.field input::placeholder, .field textarea::placeholder{ color:#bfc4cf; }
.field textarea{ min-height:140px; resize:vertical; }
.field input:focus, .field textarea:focus{ border-color: rgba(255,255,255,.35); box-shadow: 0 0 0 3px rgba(255,255,255,.08), 0 10px 20px rgba(0,0,0,.25) inset; }

/* Footer */
footer{ padding: 2.25rem 0 2.5rem; color:#c7cada; border-top:1px solid rgba(255,255,255,.08); background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.00)); }
.foot{ display:flex; flex-wrap:wrap; gap:1rem 2rem; align-items:center; justify-content:space-between; }
.foot small, .foot a{ color:#c7cada; opacity:.95; }
.foot__links{ display:flex; gap:1rem; flex-wrap:wrap; }

/* Scroll reveal */
.reveal{ opacity:0; transform: translateY(18px) scale(.98); filter: blur(2px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), filter var(--dur) var(--ease); }
.reveal.is-visible{ opacity:1; transform: none; filter: none; }

/* Responsive */
@media (max-width: 1000px){
  .card{ grid-column: span 6; }
  .projects .tile{ grid-column: span 6; }
  .contact{ grid-template-columns: 1fr; }
  .strip{ grid-template-columns: 1fr; }
}
@media (max-width: 720px){
  .menu{ display:none; position:absolute; right:1rem; top:64px; flex-direction:column; padding: .75rem; width:min(90vw, 340px); }
  .menu.glass{ background: rgba(10,15,32,.8); }
  .hamburger{ display:inline-grid; place-items:center; }
  .card{ grid-column: 1 / -1; }
  .projects .tile{ grid-column: 1 / -1; }
  .section-head{ flex-direction:column; align-items:flex-start; }
}

/* Graceful fallback when no backdrop-filter */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .glass, .btn, .chip, .menu.glass{ background: rgba(255,255,255,.08); }
}

/* Motion preference */
@media (prefers-reduced-motion: reduce){
  *{ animation:none!important; transition:none!important; }
}

/* Pointer glow */
.pointer-glow{ position:fixed; z-index:1; inset:auto auto 0 0; width:36vmax; height:36vmax; pointer-events:none; border-radius:50%; opacity:.12; filter: blur(60px) saturate(150%); background: radial-gradient(closest-side, rgba(255,80,80,.8), rgba(29,58,105,.6), transparent 70%); mix-blend-mode: screen; transform: translate(-50%,-50%); }

/* ===== Logo-Fixes (nur für das <img class="brand__logo">) ===== */
.brand__logo{
  height: 52px !important;         /* NAV-Höhe */
  width: auto !important;
  display: block;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  background: none !important;      /* alte Platzhalter-Grafik aus */
  border-radius: 0 !important;
  box-shadow: none !important;
  filter: none !important;          /* globale img-Filter neutralisieren */
}

/* Footer-Variante etwas kleiner */
footer .brand__logo{
  height: 52px !important;
}

/* Schriftzug im Brand ausblenden (falls noch vorhanden) */
.brand .brand__text{ display:none !important; }
footer .brand .brand__text{ display:none !important; }


/* Consent checkbox styling */
.field.consent { margin:.9rem 0 1rem; }
.field.consent .checkbox{ display:flex; gap:.6rem; align-items:flex-start; font-size:.9rem; color:var(--muted); }
.field.consent input[type="checkbox"]{ margin-top:.15rem; width:1rem; height:1rem; accent-color: var(--brand-accent); }
.field.consent a{ color:var(--link); text-decoration: underline; }

/* === Patch: full-bleed hero video === */
html, body { margin: 0; padding: 0; }
.hero { width: 100%; }
.hero__bg { width: 100%; height: 100%; object-fit: cover; }

/* === Patch: Mehr linker Innenabstand im Top-Menü (nur Desktop) === */
@media (min-width: 721px){
  .menu{ padding-left: 1.25rem; }
}

/* === Patch: Fixierter Verlauf ohne Mitscrollen, Optik wie vorher (auf <html>) === */
html{
  background: var(--bg);
  background-attachment: fixed, fixed, fixed;
}
body{ background: transparent !important; }
body::before{ content: none !important; }

/* === Patch: Menü-Glas Hover ohne Versatz === */
.menu.glass:hover{ transform: none; }

/* ===== EDL Suite (design-matching) ===== */
.edl-grid{ grid-template-columns: repeat(12, 1fr); align-items:center; gap: var(--space-5); }
.edl-col{ grid-column: 1 / -1; }
@media (min-width: 860px){
  .edl-col--text{ grid-column: span 7; }
  .edl-col--phone{ grid-column: span 5; justify-self:end; }
}

.edl-list{ margin: var(--space-3) 0 var(--space-4); padding:0; list-style:none; display:grid; gap:.6rem; }
.edl-list li{ display:flex; align-items:flex-start; gap:.6rem; color:var(--text); }
.edl-list .edl-dot{
  width:.8rem; height:.8rem; flex:0 0 .8rem; margin-top:.35rem;
  border-radius:999px; background: var(--brand-accent);
  box-shadow: 0 0 0 4px rgba(255,80,80,.14);
}

/* Smartphone dummy */
.edl-col--phone{ position:relative; }
.edl-col--phone::before{content:"";position:absolute;right:6%;top:4%;width:180px;height:180px;border-radius:999px;background:radial-gradient(closest-side, rgba(255,80,80,.12), transparent 65%);filter:blur(1px);transform:translate(8px,4px);}
.device{
  width: min(40vw, 340px);
  aspect-ratio: 9 / 19.5;
  border-radius: 28px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-brd);
  box-shadow: var(--glass-inset, inset 0 1px 0 rgba(255,255,255,.06)), var(--shadow);
  position:relative; overflow:hidden; padding: 10px; display:grid; place-items:center;
}
.device__notch{
  position:absolute; top:8px; left:50%; transform:translateX(-50%);
  width: 120px; height: 18px; border-radius: 0 0 16px 16px;
  background: rgba(0,0,0,.5); border:1px solid rgba(255,255,255,.08);
}
.device__screen{
  width:100%; height:100%; border-radius: 22px;
  background: #0d1322;
  background-image: var(--edl-screenshot);
  background-size: cover; background-position: center;
  border: 1px solid rgba(255,255,255,.06);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.3);
}
/* ===== /EDL Suite ===== */


/* === EDL Suite tweak v2 === */
.edl-grid{ 
  display:grid; 
  grid-template-columns: repeat(12, 1fr); 
  align-items:center; 
  gap: var(--space-5, 32px); 
  padding-inline: clamp(12px, 3vw, 28px);
}
.edl-col{ grid-column: 1 / -1; }
@media (min-width: 860px){
  .edl-col--text{ grid-column: 1 / span 7; }
  .edl-col--phone{ grid-column: 8 / span 5; }
}
.edl-col--phone{ display:flex; justify-content:center; align-items:center; }
.device{ margin-inline: auto; }


/* ===========================
   Phantomcrew Netzwerk
   =========================== */
#netzwerk { position: relative; }
#netzwerk .lead { max-width: 60ch; }
.network{
  position: relative;
  width: 100%;
  aspect-ratio: 5 / 3;
  min-height: 460px;
  border-radius: 24px;
  background:
    radial-gradient(60% 80% at 50% 30%, rgba(255,255,255,.04), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0));
  box-shadow: 0 10px 40px rgba(0,0,0,.3) inset, 0 15px 30px rgba(0,0,0,.25);
  overflow: hidden;
  isolation: isolate;
}
.network__svg{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  filter: drop-shadow(0 2px 8px rgba(255,255,255,.08));
}
.network__nodes{ position: absolute; inset: 0; }

.node{
  --size: 78px;
  --float-amplitude: 10px;
  --float-duration: 12s;
  --ring-size: 0px;
  position: absolute;
  width: var(--size); height: var(--size);
  border-radius: 50%;
  display: grid; place-items: center;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.2), rgba(255,255,255,.06) 35%, rgba(0,0,0,.3) 65%);
  background-blend-mode: screen;
  box-shadow: 0 6px 14px rgba(0,0,0,.35), 0 1px 2px rgba(255,255,255,.08) inset;
  transform: translate(-50%, -50%);
  cursor: pointer;
  outline: none; border: 0;
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
  animation: floatY var(--float-duration) var(--ease-smooth) infinite alternate,
             floatX calc(var(--float-duration) * 1.3) var(--ease-smooth) infinite alternate;
}
.node::before{
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  background-image: var(--img);
  background-size: cover; background-position: center;
  filter: saturate(1.05) contrast(1.05);
  opacity: .96;
}
.node::after{
  /* white animated frame */
  content: "";
  position: absolute; inset: calc(-1 * var(--ring-size));
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.85);
  opacity: 0;
  transform: scale(.9);
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
  pointer-events: none;
}
.node:hover, .node:focus{
  box-shadow: 0 10px 24px rgba(0,0,0,.45), 0 1px 2px rgba(255,255,255,.12) inset;
  transform: translate(-50%, -50%) scale(1.04);
}
.node:hover::after, .node:focus::after{
  opacity: 1;
  transform: scale(1);
}
.node .label{
  position: absolute;
  bottom: calc(-1 * (var(--size) * .18) - 18px);
  left: 50%; transform: translateX(-50%);
  font-size: .9rem; line-height: 1.1;
  text-align: center;
  padding: 6px 10px; border-radius: 12px;
  background: rgba(10, 15, 30, .7);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 6px 20px rgba(0,0,0,.35);
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
  white-space: nowrap;
}
.node .label .name{ color: #fff; font-weight: 700; letter-spacing: .2px; }
.node .label .info{ color: var(--muted); font-size: .8rem; display:block; margin-top:2px; }
.node:hover .label, .node:focus .label{ opacity: 1; transform: translate(-50%, -2px); }

.node--lead{ --size: 120px; --ring-size: 5px; }
.node--lead .label{ font-size: 1rem; }

/* Fallback visuals when no image is available */
.node .initials{
  position:absolute; inset:0; display:grid; place-items:center;
  font-weight:800; font-size: calc(var(--size) * .34);
  color: rgba(255,255,255,.85);
  text-shadow: 0 2px 10px rgba(0,0,0,.4);
  mix-blend-mode: normal;
}

/* Connections */
.network path.edge{
  fill: none;
  stroke: rgba(255,255,255,.35);
  stroke-width: 1.5;
  stroke-linecap: round;
  opacity: .8;
  transition: stroke var(--dur-fast) var(--ease);
}
.network .edge--accent{ stroke: var(--brand-accent); opacity: .9; }

@keyframes floatY{
  from{ transform: translate(-50%, calc(-50% - var(--float-amplitude))); }
  to  { transform: translate(-50%, calc(-50% + var(--float-amplitude))); }
}
@keyframes floatX{
  from{ left: calc(var(--anchor-x) - var(--float-amplitude)); }
  to  { left: calc(var(--anchor-x) + var(--float-amplitude)); }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .node{ animation: none; }
}


/* Netzwerk tweaks (visibility + slower float + hover border) */
.node{ --float-amplitude: 22px; --float-duration: 18s; }
.node::before{ z-index: 1; }
.node::after{ z-index: 2; box-shadow: 0 0 20px rgba(255,255,255,.25); }
.node:hover::after, .node:focus::after{
  animation: ringPop .35s var(--ease) forwards;
}
@keyframes ringPop{
  0%   { opacity: 0; transform: scale(.84); }
  60%  { opacity: 1; transform: scale(1.04); }
  100% { opacity: 1; transform: scale(1); }
}
/* Backup outline for older browsers */
.node:hover, .node:focus{
  outline: 0; 
  box-shadow: 0 10px 24px rgba(0,0,0,.45), 0 1px 2px rgba(255,255,255,.12) inset, 0 0 0 2px rgba(255,255,255,.9);
}


/* Netzwerk: Fotos statt Initialen, keine Rahmen, JS-Drift */
.node{ 
  animation: none !important; 
  box-shadow: 0 10px 24px rgba(0,0,0,.35); /* remove inner inset line */
}
.node::after{ display: none !important; } /* no white ring */
.node:hover, .node:focus{ 
  box-shadow: 0 16px 32px rgba(0,0,0,.45); 
  outline: none; 
}
/* Hide initials overlay now that we use photos */
.node .initials{ display: none !important; }


/* Hard override: no borders/outline on nodes */
.node, .node::before, .node::after { border: 0 !important; }
.node:hover, .node:focus { outline: none !important; box-shadow: 0 16px 32px rgba(0,0,0,.45) !important; }


/* Netzwerk photo element to ensure images render reliably */
.node .photo{
  position:absolute; inset:0;
  border-radius:50%;
  background-image: var(--img);
  background-size: cover;
  background-position: center;
  z-index: 1;
}
.node .label{ z-index: 2; }

html{ scroll-padding-top: calc(var(--nav-h) + var(--nav-gap)); }
@media (max-width: 720px){ :root{ --nav-h: 64px; 
  --nav-gap: 16px;}
  --nav-gap: 14px;
} }












@supports (height: 100svh){ .hero{ min-height: 100svh; } }
@supports (height: 100dvh){ .hero{ min-height: 100dvh; } }