/* == FONTS: selbst gehostet, erzeugt von scripts/fetch-fonts.mjs — nicht von Hand ändern ==
   Archivo & IBM Plex: SIL Open Font License 1.1. Keine Laufzeit-Requests an Google (DSGVO). */
@font-face{font-family:'Archivo';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/archivo-var-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Archivo';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/archivo-var.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Archivo';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/archivo-var-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Archivo';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/archivo-var.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Archivo';font-style:normal;font-weight:800;font-display:swap;src:url('/fonts/archivo-var-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Archivo';font-style:normal;font-weight:800;font-display:swap;src:url('/fonts/archivo-var.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Archivo';font-style:normal;font-weight:900;font-display:swap;src:url('/fonts/archivo-var-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Archivo';font-style:normal;font-weight:900;font-display:swap;src:url('/fonts/archivo-var.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/ibm-plex-sans-var-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/ibm-plex-sans-var.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/ibm-plex-sans-var-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/ibm-plex-sans-var.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/ibm-plex-sans-var-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/ibm-plex-sans-var.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/ibm-plex-mono-400-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/ibm-plex-mono-400.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/ibm-plex-mono-500-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/ibm-plex-mono-500.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/ibm-plex-mono-600-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/ibm-plex-mono-600.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* == /FONTS == */
:root{
  --bg:#0a0e14;
  --bg-raised:#101722;
  --bg-card:#0d131d;
  --line:rgba(200,214,229,.09);
  --line-strong:rgba(200,214,229,.18);
  --text:#e8edf3;
  --muted:#8d99a8;
  --red:#d5232e;
  --red-bright:#ff4a54;
  --red-soft:rgba(213,35,46,.13);
  --green:#38d178;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --sans:'IBM Plex Sans',system-ui,sans-serif;
  --display:'Archivo',system-ui,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{background:var(--bg);color:var(--text);font-family:var(--sans);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}
::selection{background:var(--red);color:#fff}
a{color:inherit}
img{max-width:100%}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}

/* ---------- Header ---------- */
header{position:sticky;top:0;z-index:50;background:rgba(10,14,20,.72);backdrop-filter:blur(14px) saturate(1.3);border-bottom:1px solid var(--line);transition:background .25s,box-shadow .25s}
header::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--red) 18%,var(--red-bright) 50%,var(--red) 82%,transparent);opacity:.85}
header.scrolled{background:rgba(10,14,20,.92);box-shadow:0 12px 32px rgba(0,0,0,.45)}
.nav{display:flex;align-items:center;gap:26px;height:68px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand-mark{width:38px;height:38px;flex:none;transition:transform .35s cubic-bezier(.34,1.56,.64,1)}
.brand:hover .brand-mark{transform:rotate(90deg)}
.brand-name{font-family:var(--display);font-weight:900;font-size:19px;letter-spacing:.02em;line-height:1.05}
.brand-name span{color:var(--red-bright)}
.brand-sub{font-family:var(--mono);font-size:10px;color:var(--muted);letter-spacing:.14em;text-transform:uppercase}
nav.menu{display:flex;gap:2px;margin-left:auto}
nav.menu a{position:relative;text-decoration:none;color:var(--muted);font-size:14px;font-weight:500;padding:8px 12px;border-radius:9px;transition:color .18s,background .18s}
nav.menu a::after{content:"";position:absolute;left:12px;right:12px;bottom:4px;height:2px;border-radius:2px;background:var(--red-bright);transform:scaleX(0);transform-origin:left;transition:transform .22s ease}
nav.menu a:hover{color:var(--text)}
nav.menu a:hover::after{transform:scaleX(1)}
nav.menu a.active{color:var(--text);background:var(--red-soft)}
nav.menu a.active::after{transform:scaleX(1)}
nav.menu a.ext{color:var(--muted)}
nav.menu a.ext::before{content:"⇗";font-family:var(--mono);font-size:11px;margin-right:5px;color:var(--red-bright)}
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--sans);font-weight:600;font-size:14.5px;text-decoration:none;padding:11px 20px;border-radius:10px;border:1px solid transparent;transition:transform .15s,background .15s,border-color .15s;cursor:pointer}
.btn:active{transform:translateY(1px)}
.btn-red{background:var(--red);color:#fff}
.btn-red:hover{background:var(--red-bright);box-shadow:0 6px 20px rgba(213,35,46,.35)}
.btn-ghost{border-color:var(--line-strong);color:var(--text)}
.btn-ghost:hover{border-color:var(--red);color:#fff;background:var(--red-soft)}
.btn-sm{padding:9px 15px;font-size:13.5px;border-radius:9px}
.menu-toggle{display:none;margin-left:auto;background:none;border:1px solid var(--line-strong);border-radius:9px;color:var(--text);font-size:20px;width:42px;height:42px;cursor:pointer}

/* ---------- Hero ---------- */
.hero{position:relative;padding:84px 0 72px;overflow:hidden;border-bottom:1px solid var(--line)}
.hero::before{content:"";position:absolute;inset:0;background:
  radial-gradient(700px 420px at 78% 30%,rgba(213,35,46,.10),transparent 65%),
  radial-gradient(600px 400px at 8% 90%,rgba(56,110,209,.07),transparent 60%);pointer-events:none}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;position:relative}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line-strong);border-radius:999px;padding:7px 15px;margin-bottom:26px}
.eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green)}
h1{font-family:var(--display);font-weight:900;font-size:clamp(38px,5.2vw,62px);line-height:1.04;letter-spacing:-.015em;text-transform:uppercase}
h1 .accent{color:var(--red-bright)}
.hero p.lead{margin:24px 0 8px;font-size:18px;color:var(--muted);max-width:54ch}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}
.hero-tags{display:flex;flex-wrap:wrap;gap:9px;margin-top:36px}
.tag{font-family:var(--mono);font-size:12px;color:var(--muted);border:1px solid var(--line);border-radius:7px;padding:5px 11px;background:var(--bg-card)}

/* topology */
.topo{background:var(--bg-card);border:1px solid var(--line);border-radius:18px;padding:18px 18px 8px;box-shadow:0 30px 80px rgba(0,0,0,.45)}
.topo-head{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12px;color:var(--muted);padding:2px 6px 12px}
.topo-head .leds{display:flex;gap:6px;margin-right:6px}
.topo-head .leds i{width:9px;height:9px;border-radius:50%;background:#232c3a;display:block}
.topo-head .leds i:first-child{background:var(--red)}
.topo svg{width:100%;height:auto;display:block}
.topo text{font-family:var(--mono)}
.node-label{fill:var(--text);font-size:12.5px;font-weight:600}
.node-sub{fill:#8d99a8;font-size:10px}
.fiber{stroke:rgba(200,214,229,.22);stroke-width:1.5;fill:none}
.packet{fill:var(--red-bright)}
.packet2{fill:#8d99a8}
.core-ring{fill:none;stroke:var(--red);stroke-width:1.2;opacity:.5}

/* ---------- Stats strip ---------- */
.stats{border-bottom:1px solid var(--line);background:var(--bg-raised)}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line)}
.stat{background:var(--bg-raised);padding:26px 26px}
.stat b{display:block;font-family:var(--display);font-weight:800;font-size:26px;letter-spacing:-.01em}
.stat span{font-family:var(--mono);font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}

/* ---------- Sections ---------- */
section{padding:88px 0;border-bottom:1px solid var(--line)}
.sec-eyebrow{font-family:var(--mono);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--red-bright);margin-bottom:14px}
h2{font-family:var(--display);font-weight:800;font-size:clamp(28px,3.4vw,40px);line-height:1.1;letter-spacing:-.01em;text-transform:uppercase;max-width:22ch}
.sec-intro{color:var(--muted);max-width:66ch;margin-top:18px;font-size:16.5px}

/* Standorte */
.dc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:48px}
.dc{background:var(--bg-card);border:1px solid var(--line);border-radius:16px;padding:28px;display:flex;flex-direction:column;gap:16px;transition:border-color .2s,transform .2s}
.dc:hover{border-color:var(--line-strong);transform:translateY(-2px)}
.dc-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.dc h3{font-family:var(--display);font-weight:800;font-size:20px;letter-spacing:.005em}
.dc .dc-role{font-family:var(--mono);font-size:12px;color:var(--muted);margin-top:4px}
.status{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:11.5px;color:var(--green);border:1px solid rgba(56,209,120,.3);background:rgba(56,209,120,.07);padding:4px 10px;border-radius:999px;white-space:nowrap}
.status i{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green)}
.dc ul{list-style:none;display:grid;gap:8px}
.dc ul li{color:var(--muted);font-size:14.5px;padding-left:20px;position:relative}
.dc ul li::before{content:"";position:absolute;left:0;top:9px;width:9px;height:2px;background:var(--red)}
.dc-foot{margin-top:auto;display:flex;gap:10px;flex-wrap:wrap;padding-top:6px}

/* Peering policy */
.policy-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:48px}
.policy-card{background:var(--bg-card);border:1px solid var(--line);border-radius:16px;padding:28px}
.policy-card .icon{width:44px;height:44px;border-radius:12px;background:var(--red-soft);border:1px solid rgba(213,35,46,.3);display:flex;align-items:center;justify-content:center;margin-bottom:18px;color:var(--red-bright)}
.policy-card h3{font-family:var(--display);font-weight:800;font-size:17.5px;margin-bottom:10px}
.policy-card p{color:var(--muted);font-size:14.5px}

/* Marketplace */
.mp-grid{grid-template-columns:repeat(4,1fr)}
@media (max-width:980px){.mp-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:720px){.mp-grid{grid-template-columns:1fr}}

/* Technik / Tabellen */
.tech-block{margin-top:44px}
.tech-block h3{font-family:var(--display);font-weight:800;font-size:18px;margin-bottom:6px}
.tech-block .tb-sub{font-family:var(--mono);font-size:12.5px;color:var(--muted);margin-bottom:16px}
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:14px;background:var(--bg-card)}
table{width:100%;border-collapse:collapse;font-size:14px;min-width:640px}
th{font-family:var(--mono);font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);text-align:left;padding:14px 18px;border-bottom:1px solid var(--line-strong);background:var(--bg-raised)}
td{padding:13px 18px;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:13.5px}
tr:last-child td{border-bottom:none}
td .svc{font-family:var(--sans);font-weight:600;font-size:14px}
td a{color:var(--red-bright);text-decoration:none}
td a:hover{text-decoration:underline}
.chip{display:inline-block;font-family:var(--mono);font-size:11px;border:1px solid var(--line-strong);border-radius:6px;padding:2px 8px;color:var(--muted)}

/* FAQ */
.faq-list{margin-top:48px;display:grid;gap:12px;max-width:880px}
.faq-group{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--red-bright);margin:26px 0 2px;padding-left:2px}
.faq-group:first-child{margin-top:0}
details{background:var(--bg-card);border:1px solid var(--line);border-radius:14px;overflow:hidden}
details[open]{border-color:var(--line-strong)}
summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:16px;padding:20px 24px;font-weight:600;font-size:16px;user-select:none}
summary::-webkit-details-marker{display:none}
summary .q-mark{flex:none;width:26px;height:26px;border-radius:8px;background:var(--red-soft);color:var(--red-bright);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:15px;transition:transform .2s}
details[open] summary .q-mark{transform:rotate(45deg)}
.faq-a{padding:0 24px 22px 66px;color:var(--muted);font-size:15px}
.faq-a p+p{margin-top:10px}
.faq-a code{font-family:var(--mono);font-size:13px;background:var(--bg-raised);border:1px solid var(--line);border-radius:6px;padding:1px 7px}

/* Links */
.links-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:44px}
.link-card{background:var(--bg-card);border:1px solid var(--line);border-radius:16px;padding:26px;text-decoration:none;transition:border-color .2s,transform .2s;display:block}
.link-card:hover{border-color:var(--red);transform:translateY(-2px)}
.link-card b{font-family:var(--display);font-weight:800;font-size:17px;display:block;margin-bottom:6px}
.link-card span{font-family:var(--mono);font-size:12.5px;color:var(--muted);display:block}
.link-card .arrow{color:var(--red-bright);font-family:var(--mono);font-size:13px;margin-top:14px;display:inline-block}

/* Kontakt */
.contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;margin-top:48px;align-items:start}
.contact-card{background:var(--bg-card);border:1px solid var(--line);border-radius:16px;padding:30px}
.contact-card h3{font-family:var(--display);font-weight:800;font-size:18px;margin-bottom:16px}
.contact-list{display:grid;gap:12px}
.contact-row{display:flex;justify-content:space-between;align-items:center;gap:14px;border:1px solid var(--line);border-radius:12px;padding:14px 18px;background:var(--bg-raised)}
.contact-row b{font-size:14.5px;font-weight:600}
.contact-row span{font-family:var(--mono);font-size:11.5px;color:var(--muted);display:block}

/* Footer */
footer{padding:60px 0 40px;color:var(--muted);font-size:14px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;padding-bottom:40px;border-bottom:1px solid var(--line)}
.foot-grid h4{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--text);margin-bottom:14px}
.foot-grid ul{list-style:none;display:grid;gap:8px}
.foot-grid a{color:var(--muted);text-decoration:none}
.foot-grid a:hover{color:var(--text)}
.foot-bottom{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:26px;font-family:var(--mono);font-size:12.5px}
address{font-style:normal;line-height:1.8}

/* Partner note */
.partner-note{margin-top:22px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;border:1px dashed var(--line-strong);border-radius:14px;padding:18px 22px;background:var(--bg-card)}
.partner-note b{font-size:15px}
.partner-note span{display:block;color:var(--muted);font-size:13.5px;margin-top:3px}

/* Preise */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:48px}
.price-card{position:relative;background:var(--bg-card);border:1px solid var(--line);border-radius:16px;padding:30px;display:flex;flex-direction:column;gap:6px}
.price-card.featured{border-color:var(--red);box-shadow:0 20px 60px rgba(213,35,46,.12)}
.price-badge{position:absolute;top:-12px;right:22px;background:var(--red);color:#fff;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;border-radius:999px;padding:4px 12px}
.price-speed{font-family:var(--display);font-weight:900;font-size:30px;letter-spacing:-.01em}
.price-sub{font-family:var(--mono);font-size:12px;color:var(--muted)}
.price-amount{font-family:var(--display);font-weight:800;font-size:38px;margin:16px 0 10px}
.price-amount span{font-family:var(--mono);font-size:13px;color:var(--muted);font-weight:400;margin-left:4px}
.price-tiers{font-family:var(--mono);font-size:12px;color:var(--muted);margin:-6px 0 8px}
.price-card ul{list-style:none;display:grid;gap:8px;margin:8px 0 22px}
.price-card ul li{color:var(--muted);font-size:14px;padding-left:20px;position:relative}
.price-card ul li::before{content:"";position:absolute;left:0;top:9px;width:9px;height:2px;background:var(--red)}
.price-card .btn{margin-top:auto;justify-content:center}
.price-foot{margin-top:26px;color:var(--muted);font-size:14px;font-family:var(--mono)}

/* Wholesale */
.ws-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:22px;margin-top:48px}
.ws-card{background:var(--bg-card);border:1px solid var(--line);border-radius:16px;padding:30px;display:flex;flex-direction:column;gap:16px}
.ws-card h3{font-family:var(--display);font-weight:800;font-size:19px}
.ws-card p{color:var(--muted);font-size:14.5px}
.ws-card .btn{align-self:flex-start;margin-top:auto}
.ws-providers{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ws-provider{border:1px solid var(--line);border-radius:12px;padding:14px 16px;background:var(--bg-raised)}
.ws-provider b{font-family:var(--display);font-weight:800;font-size:15.5px;display:block}
.ws-provider span{font-family:var(--mono);font-size:11.5px;color:var(--muted)}
.ws-list{list-style:none;display:grid;gap:8px}
.ws-list li{color:var(--muted);font-size:14.5px;padding-left:20px;position:relative}
.ws-list li::before{content:"";position:absolute;left:0;top:9px;width:9px;height:2px;background:var(--red)}

/* VDX */
.vdx-sec{background:linear-gradient(180deg,rgba(213,35,46,.05),transparent 60%)}
.vdx-banner{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center;border:1px solid var(--line-strong);border-radius:20px;padding:44px;background:var(--bg-card)}
.vdx-facts{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px}
.vdx-fact{border:1px solid var(--line);border-radius:12px;padding:14px 20px;background:var(--bg-raised)}
.vdx-fact b{font-family:var(--display);font-weight:900;font-size:20px;display:block}
.vdx-fact span{font-family:var(--mono);font-size:11.5px;color:var(--muted)}
.vdx-term{background:#070b11;border:1px solid var(--line);border-radius:14px;padding:20px}
.vdx-term pre{font-family:var(--mono);font-size:12.5px;line-height:1.8;color:#c4ccd6;overflow-x:auto}
.t-green{color:var(--green)}
.t-mut{color:#5b6675}

.vdx-sub-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:22px}
.vdx-sub{background:var(--bg-card);border:1px solid var(--line);border-radius:16px;padding:28px;display:flex;flex-direction:column;gap:14px}
.vdx-sub h3{font-family:var(--display);font-weight:800;font-size:17.5px}
.vdx-sub p{color:var(--muted);font-size:14.5px}
.vdx-sub .btn{align-self:flex-start;margin-top:auto}

/* Callout (Transceiver) */
.callout{margin-top:26px;display:flex;align-items:center;gap:22px;flex-wrap:wrap;border:1px solid rgba(213,35,46,.45);border-radius:16px;padding:24px 26px;background:linear-gradient(90deg,rgba(213,35,46,.10),rgba(213,35,46,.03))}
.callout-icon{flex:none;width:48px;height:48px;border-radius:12px;background:var(--red-soft);border:1px solid rgba(213,35,46,.35);display:flex;align-items:center;justify-content:center;color:var(--red-bright)}
.callout>div:not(.callout-icon){flex:1;min-width:260px}
.callout b{font-family:var(--display);font-weight:800;font-size:16.5px;display:block;margin-bottom:4px}
.callout p{color:var(--muted);font-size:14.5px}
.callout p a{color:var(--red-bright);text-decoration:none}
.callout p a:hover{text-decoration:underline}

/* Beratung form */
.advice-card{margin-top:26px;background:var(--bg-card);border:1px solid var(--line-strong);border-radius:18px;padding:36px}
.advice-head h3{font-family:var(--display);font-weight:800;font-size:22px;margin-bottom:8px}
.advice-head p{color:var(--muted);font-size:15px;max-width:70ch}
.advice-form{margin-top:28px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.advice-form label{display:flex;flex-direction:column;gap:7px;font-size:13.5px;font-weight:600;color:var(--text)}
.advice-form label.full{margin-top:18px}
.advice-form input,.advice-form select,.advice-form textarea{font-family:var(--sans);font-size:14.5px;font-weight:400;color:var(--text);background:var(--bg-raised);border:1px solid var(--line-strong);border-radius:10px;padding:11px 14px;outline:none;transition:border-color .15s}
.advice-form input:focus,.advice-form select:focus,.advice-form textarea:focus{border-color:var(--red)}
.advice-form ::placeholder{color:#5b6675}
.advice-form select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238d99a8' stroke-width='2' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center}
.advice-form textarea{resize:vertical}
.advice-form label.check{flex-direction:row;align-items:flex-start;gap:12px;margin-top:20px;font-weight:400;color:var(--muted);font-size:13.5px;cursor:pointer}
.advice-form label.check input{width:17px;height:17px;margin-top:2px;accent-color:var(--red);flex:none}
.advice-form label.check a{color:var(--red-bright);text-decoration:none}
.advice-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:24px}
.advice-hint{font-family:var(--mono);font-size:11.5px;color:var(--muted)}

/* Peeria logo */
.peeria-logo{margin:18px 0 2px;color:var(--text)}
.peeria-logo svg{height:52px;width:auto;display:block;transition:color .2s}
.peeria-logo:hover{color:#fff}
.handily-logo{display:inline-flex;align-items:center;gap:12px;margin:18px 0 2px;color:var(--text);text-decoration:none;font-family:"Archivo",var(--sans,sans-serif);font-weight:700;font-size:17px;letter-spacing:-.01em}
.handily-logo img{width:44px;height:44px;display:block}
.handily-logo:hover span,.handily-logo:focus-visible span{color:#fff}

/* Socials */
.socials{display:flex;gap:10px;margin-top:18px}
.socials a{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border:1px solid var(--line-strong);border-radius:10px;color:var(--muted);transition:color .15s,border-color .15s,background .15s}
.socials a:hover{color:#fff;border-color:var(--red);background:var(--red-soft)}
.socials svg{width:17px;height:17px}

/* DC logos */
.dc-logo{display:flex;align-items:center;min-height:34px;margin-bottom:2px}
.logo-chip{display:inline-flex;align-items:center;background:#f4f6f9;border-radius:9px;padding:7px 14px}
.logo-chip img{height:20px;width:auto;display:block;max-width:170px}
.logo-ph{display:none;font-family:var(--display);font-weight:900;font-size:16px;letter-spacing:.01em;color:#16202e;background:#f4f6f9;border-radius:9px;padding:7px 14px;align-items:baseline;gap:7px}
.logo-ph em{font-family:var(--mono);font-style:normal;font-size:9px;color:#6b7686;letter-spacing:.08em;text-transform:uppercase}
.dc-logo.logo-fail .logo-chip{display:none}
.dc-logo.logo-fail .logo-ph{display:inline-flex}

/* Traffic graph */
.graph-card{background:var(--bg-card);border:1px solid var(--line);border-radius:14px;padding:16px 18px 10px}
.graph-head{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;font-family:var(--mono);font-size:11.5px;color:var(--muted);padding:0 4px 10px}
.graph-head .dot-red{display:inline-block;width:8px;height:8px;border-radius:2px;background:var(--red-bright);margin-right:7px;vertical-align:-1px}
.graph-meta{color:#5b6675}
.graph-card svg{width:100%;height:auto;display:block}
.g-grid{stroke:rgba(200,214,229,.08);stroke-width:1}
.g-ax{fill:#5b6675;font-family:var(--mono);font-size:9px}
.g-peak{fill:#e8edf3;font-family:var(--mono);font-size:9px}

/* a11y & motion */
:focus-visible{outline:2px solid var(--red-bright);outline-offset:2px;border-radius:6px}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
  /* SMIL-Animationen (animateMotion im Topologie-SVG) kümmert das nicht — die Pakete
     werden deshalb ausgeblendet statt angehalten. */
  .topo .packet,.topo .packet2{display:none}
}

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr;gap:44px}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .dc-grid,.policy-grid,.links-grid{grid-template-columns:1fr}
  .policy-grid{grid-template-columns:repeat(2,1fr)}
  .vdx-sub-grid{grid-template-columns:1fr 1fr}
  .contact-grid{grid-template-columns:1fr;gap:36px}
  .price-grid{grid-template-columns:1fr}
  .ws-grid{grid-template-columns:1fr}
  .vdx-banner{grid-template-columns:1fr;gap:32px;padding:30px}
  .vdx-sub-grid{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  .advice-card{padding:26px 22px}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  nav.menu{display:none;position:absolute;top:68px;left:0;right:0;background:rgba(10,14,20,.97);backdrop-filter:blur(14px);border-bottom:1px solid var(--line-strong);flex-direction:column;padding:14px 20px 22px;gap:2px;box-shadow:0 24px 48px rgba(0,0,0,.5)}
  nav.menu a::after{display:none}
  nav.menu a.active{border-left:2px solid var(--red-bright);border-radius:0 9px 9px 0}
  nav.menu.open{display:flex}
  nav.menu a{padding:12px 10px}
  .nav .btn{display:none}
  .menu-toggle{display:block}
  .policy-grid{grid-template-columns:1fr}
  .stats-grid{grid-template-columns:1fr 1fr}
  section{padding:64px 0}
  .faq-a{padding-left:24px}
  .foot-grid{grid-template-columns:1fr}
}

/* == ERGÄNZUNGEN — Projektumbau (CLAUDE.md P0/P2/P3). Nur bestehende Tokens, keine neuen Farben. ==
   Das Design der One-Page bleibt unverändert; hier stehen ausschließlich Regeln für die
   neuen Bausteine (Navigationspunkt „Verträge", vierte Footer-Spalte, Formular-Hinweise). */

/* Die Navigation trägt mit „Verträge" zehn Punkte. Gemessen brauchen Wortmarke, Menü und
   Knopf zusammen mehr Platz, als die 1180er-Spalte hergibt — Flexbox staucht dann die
   Wortmarke, deren Unterzeile umbricht und aus der 68px hohen Leiste ragt.
   Deshalb: Wortmarke unantastbar, Menü etwas enger, und unterhalb der vollen Spaltenbreite
   übernimmt das Burger-Menü (vorher erst ab 720px). */
.brand{flex:none}
.brand-sub{white-space:nowrap}
@media (min-width:1181px){
  nav.menu{gap:0}
  nav.menu a{padding:8px 8px;font-size:13px}
  nav.menu a::after{left:8px;right:8px}
}
@media (max-width:1180px){
  nav.menu{display:none;position:absolute;top:68px;left:0;right:0;background:rgba(10,14,20,.97);backdrop-filter:blur(14px);border-bottom:1px solid var(--line-strong);flex-direction:column;padding:14px 20px 22px;gap:2px;box-shadow:0 24px 48px rgba(0,0,0,.5)}
  nav.menu a::after{display:none}
  nav.menu a.active{border-left:2px solid var(--red-bright);border-radius:0 9px 9px 0}
  nav.menu.open{display:flex}
  nav.menu a{padding:12px 10px}
  .nav .btn{display:none}
  .menu-toggle{display:block}
}

/* Vierte Footer-Spalte „Rechtliches" */
.foot-grid{grid-template-columns:1.5fr 1fr 1fr 1fr}
.foot-note{font-family:var(--mono);font-size:11.5px;color:var(--muted)}
@media (max-width:1080px){.foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:720px){.foot-grid{grid-template-columns:1fr}}

/* hidden schlägt jede Layout-Regel. Ohne !important gewinnt z. B. .btn{display:inline-flex}
   gegen das UA-Stylesheet, und per JS ausgeblendete Elemente bleiben sichtbar. */
[hidden]{display:none !important}

/* Brotkrumen — auf Vertrags-, Anfrage- und Onboarding-Seiten gleichermaßen */
.breadcrumb{font-family:var(--mono);font-size:12px;color:var(--muted);margin-bottom:26px;display:flex;gap:8px;flex-wrap:wrap}
.breadcrumb a{color:var(--muted);text-decoration:none}
.breadcrumb a:hover{color:var(--text)}
.breadcrumb [aria-current]{color:var(--text)}

/* Auf schmalen Fenstern sprengte der VDX-Block die Seite: Grid-Kinder sind mindestens so breit
   wie ihr Inhalt, und im Terminal-Kasten steht vorformatierter Text mit langen Zeilen.
   Der Kasten scrollt jetzt für sich, statt die ganze Seite waagerecht zu schieben. */
.vdx-banner>*,.vdx-sub-grid>*,.hero-grid>*{min-width:0}
.vdx-term pre{overflow-x:auto}

/* Sichtbarer Fokus für Tastaturbedienung (A11y) */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{
  outline:2px solid var(--red-bright);outline-offset:3px;border-radius:6px
}

/* LOI-Callout mit zwei Aktionen und Hinweis auf das ausführliche Anfrage-Formular */
.callout .loi-actions{flex:none;min-width:0;display:flex;gap:10px;flex-wrap:wrap}
.advice-switch{margin-top:10px;font-size:14.5px;color:var(--muted)}
.advice-switch a{color:var(--red-bright)}