:root {
  --obsidian: #050505;
  --obsidian-deep: #090A0C;
  --graphite: #111214;
  --chrome-dark: #25272A;
  --brushed: #8F949B;
  --chrome: #C9CDD2;
  --liquid: #E7E9EC;
  --white: #FFFFFF;
  --text-2: #92969D;
  --border: rgba(220, 225, 232, 0.13);
  --border-strong: rgba(220, 225, 232, 0.35);
  --chrome-gradient: linear-gradient(
    180deg,
    #FFFFFF 0%,
    #E7E9EC 22%,
    #8F949B 48%,
    #C9CDD2 58%,
    #F4F5F7 78%,
    #7C8188 100%
  );
  --steel: #1B2535;
  --steel-soft: #232F43;
  --accent: #8FA8D0;
  --radius: 10px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  background:
    radial-gradient(ellipse 80% 55% at 50% -5%, rgba(143, 168, 208, 0.22), transparent 70%),
    radial-gradient(ellipse 60% 40% at 90% 60%, rgba(70, 95, 135, 0.18), transparent 70%),
    radial-gradient(ellipse 60% 40% at 50% 100%, rgba(143, 148, 155, 0.12), transparent 70%),
    linear-gradient(rgba(231, 233, 236, 0.04) 1px, transparent 1px) 0 0 / 56px 56px,
    linear-gradient(90deg, rgba(231, 233, 236, 0.04) 1px, transparent 1px) 0 0 / 56px 56px,
    var(--obsidian);
  background-attachment: fixed;
  color: var(--liquid);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

h1, h2, h3 {
  margin: 0 0 0.5em;
  color: var(--liquid);
  font-weight: 600;
  letter-spacing: -0.02em;
}

h1 { font-size: clamp(2.6rem, 6vw, 5rem); line-height: 1.05; font-weight: 700; }
h2 { font-size: clamp(1.8rem, 3.5vw, 2.6rem); }
h3 { font-size: 1.2rem; }

p { margin: 0 0 1em; }
.muted { color: var(--text-2); }
.small { font-size: 0.85rem; }

.eyebrow {
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1rem;
}

/* ---------- Navigation ---------- */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  background: rgba(5, 5, 5, 0.4);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  transition: background 0.4s var(--ease), border-color 0.4s var(--ease);
}
.nav.is-scrolled {
  background: rgba(5, 5, 5, 0.6);
  border-bottom-color: rgba(220, 225, 232, 0.2);
}
.nav__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0.9rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 2rem;
}
.nav__links {
  display: flex;
  gap: 1.75rem;
  margin-left: auto;
}
.nav__links a {
  color: var(--chrome);
  font-size: 0.92rem;
  position: relative;
  transition: color 0.3s var(--ease);
}
.nav__links a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--liquid), transparent);
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}
.nav__links a:hover { color: var(--white); }
.nav__links a:hover::after { opacity: 1; }
.nav__actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.lang {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px;
}
.lang button {
  background: none;
  border: 0;
  color: var(--text-2);
  font: inherit;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  padding: 0.3rem 0.6rem;
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.3s var(--ease), background 0.3s var(--ease);
}
.lang button:hover { color: var(--liquid); }
.lang button.is-active {
  background: var(--chrome-gradient);
  color: var(--obsidian);
  font-weight: 600;
}

/* ---------- Logo ---------- */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}
.logo__mark {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: var(--chrome-gradient);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.5),
    0 0 14px rgba(231, 233, 236, 0.18);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  border-radius: 0;
}
.logo__text {
  font-weight: 700;
  letter-spacing: 0.18em;
  font-size: 0.95rem;
  background: var(--chrome-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.logo__text span { font-weight: 300; }

/* ---------- Buttons ---------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.7rem 1.4rem;
  border-radius: var(--radius);
  font: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease),
    border-color 0.35s var(--ease), background 0.35s var(--ease);
}
.btn::before {
  /* Lichtreflex: schmaler, heller Streifen, der beim Hover über die Fläche gleitet */
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: -60%;
  width: 40%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.7), transparent);
  transform: skewX(-18deg);
  opacity: 0;
  z-index: -1;
  transition: left 0.8s var(--ease), opacity 0.3s var(--ease);
}
.btn:hover::before { left: 120%; opacity: 1; }
.btn:hover { transform: translateY(-1px); }
.btn:focus-visible { outline: 1px solid var(--liquid); outline-offset: 3px; }

.btn--silver {
  background: var(--chrome-gradient);
  color: #0A0B0D;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    inset 0 -1px 0 rgba(0, 0, 0, 0.35),
    0 6px 18px rgba(0, 0, 0, 0.6);
}
.btn--silver:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -1px 0 rgba(0, 0, 0, 0.35),
    0 10px 28px rgba(0, 0, 0, 0.7),
    0 0 18px rgba(231, 233, 236, 0.15);
}

.btn--ghost {
  background: var(--obsidian-deep);
  color: var(--chrome);
  border: 1px solid transparent;
  background-image:
    linear-gradient(var(--obsidian-deep), var(--obsidian-deep)),
    linear-gradient(180deg, #E7E9EC, #6F747B 60%, #C9CDD2);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  border: 1px solid transparent;
}
.btn--ghost:hover {
  color: var(--white);
  background-image:
    linear-gradient(#15171A, #15171A),
    linear-gradient(180deg, #FFFFFF, #8F949B 60%, #E7E9EC);
}

.btn--sm { padding: 0.5rem 1rem; font-size: 0.85rem; }
.btn--lg { padding: 0.9rem 1.8rem; font-size: 1rem; }
.btn--block { width: 100%; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: 8rem 1.5rem 5.2rem;
  overflow: hidden;
  background:
    radial-gradient(ellipse 52% 58% at 75% 47%, rgba(64, 94, 145, 0.13), transparent 72%),
    radial-gradient(ellipse 58% 55% at 18% 51%, rgba(143, 168, 208, 0.09), transparent 72%);
}
.hero::before,
.hero::after {
  content: "";
  position: absolute;
  pointer-events: none;
}
.hero::before {
  inset: 0;
  opacity: 0.23;
  background-image: radial-gradient(rgba(190, 207, 232, 0.36) 0.65px, transparent 0.65px);
  background-size: 28px 28px;
  mask-image: linear-gradient(90deg, transparent 3%, black 42%, black 100%);
}
.hero::after {
  left: 50%;
  bottom: 0;
  width: min(1000px, 90vw);
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(157, 180, 217, 0.34), transparent);
}
.hero__chrome {
  position: absolute;
  right: -16%;
  top: 48%;
  transform: translateY(-50%);
  width: min(69vw, 900px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(from 210deg, #050505 0deg, #8F949B 40deg, #FFFFFF 70deg, #25272A 120deg, #C9CDD2 170deg, #050505 220deg, #E7E9EC 280deg, #3A3D42 330deg, #050505 360deg);
  -webkit-mask: radial-gradient(circle, transparent 46%, #000 47%, #000 70%, transparent 71%);
          mask: radial-gradient(circle, transparent 46%, #000 47%, #000 70%, transparent 71%);
  opacity: 0.15;
  filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.8));
  animation: hero-ring-turn 90s linear infinite;
}
.hero__chrome::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, 0.35) 48%, transparent 58%);
  mix-blend-mode: screen;
}
.hero__content {
  position: relative;
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  column-gap: clamp(1.5rem, 3vw, 2.75rem);
  align-items: center;
  text-align: left;
}
.hero__copy { position: relative; z-index: 2; min-width: 0; max-width: 100%; }
.hero__eyebrow { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 1.35rem; }
.hero__eyebrow-mark {
  display: inline-block;
  width: 8px;
  height: 8px;
  border: 1px solid #AAC0E1;
  transform: rotate(45deg);
  box-shadow: 0 0 12px rgba(143, 168, 208, 0.45);
}
.hero__title {
  max-width: 11ch;
  margin: 0;
  font-size: clamp(3rem, 5.2vw, 5rem);
  line-height: 0.98;
  letter-spacing: -0.07em;
  overflow-wrap: normal;
  hyphens: none;
  background: linear-gradient(155deg, #FFFFFF 0%, #E5E8EE 50%, #AEB6C3 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-wrap: balance;
}
.hero__sub {
  max-width: 49ch;
  margin: 1.5rem 0 2rem;
  color: #9AA3B1;
  font-size: clamp(1rem, 1.5vw, 1.12rem);
  line-height: 1.8;
}
.hero__cta { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 0.8rem; }
.hero__cta .btn--silver { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 8px 28px rgba(92, 122, 172, 0.18); }
.hero__proof { display: flex; flex-wrap: wrap; gap: 1.3rem; margin-top: 1.6rem; }
.hero__proof span { display: flex; align-items: center; gap: 0.45rem; color: #8D98A9; font-size: 0.72rem; letter-spacing: 0.04em; }
.hero__proof i { display: block; width: 5px; height: 5px; border-radius: 50%; background: #9EB9E2; box-shadow: 0 0 9px rgba(143, 168, 208, 0.62); }
.hero__network {
  position: relative;
  z-index: 1;
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  width: 100%;
  min-width: 0;
  transform: none;
  border: 1px solid rgba(158, 180, 215, 0.22);
  border-radius: 15px;
  background: linear-gradient(145deg, rgba(20, 27, 39, 0.87), rgba(8, 11, 17, 0.91) 68%);
  box-shadow: 0 35px 100px rgba(0, 0, 0, 0.48), 0 0 65px rgba(61, 94, 151, 0.11), inset 0 1px rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(16px);
  overflow: hidden;
  animation: network-panel-enter 0.9s var(--ease) both;
}
.hero__network::before { content: ""; position: absolute; top: 0; left: 8%; right: 8%; height: 1px; background: linear-gradient(90deg, transparent, rgba(211, 226, 249, 0.52), transparent); }
.network-panel__top,
.network-panel__bottom { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.network-panel__top { height: 52px; padding: 0 1.15rem; border-bottom: 1px solid rgba(185, 202, 226, 0.1); }
.network-panel__label { display: flex; align-items: center; gap: 0.55rem; color: #B7C4D7; font-size: 0.59rem; font-weight: 700; letter-spacing: 0.16em; }
.network-panel__mark { width: 21px; height: 21px; display: grid; place-items: center; border: 1px solid rgba(167, 193, 229, 0.4); border-radius: 6px; color: #E0EAF9; font-size: 0.7rem; }
.network-panel__divider { color: #536276; }
.network-panel__status { display: flex; align-items: center; gap: 0.45rem; color: #91A0B4; font-size: 0.55rem; font-weight: 600; letter-spacing: 0.11em; }
.network-panel__status i,
.network-panel__live i { width: 6px; height: 6px; display: inline-block; border-radius: 50%; background: #80CDA8; box-shadow: 0 0 9px rgba(128, 205, 168, 0.65); }
.network-panel__map { position: relative; height: clamp(270px, 29vw, 345px); overflow: hidden; }
.network-panel__grid { position: absolute; inset: 0; opacity: 0.3; background-image: linear-gradient(rgba(153, 179, 215, 0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(153, 179, 215, 0.08) 1px, transparent 1px); background-size: 34px 34px; mask-image: radial-gradient(ellipse at center, black, transparent 85%); }
.network-panel__glow { position: absolute; width: 55%; aspect-ratio: 1; left: 48%; top: 48%; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, rgba(82, 117, 176, 0.19), rgba(82, 117, 176, 0.05) 48%, transparent 72%); }
.network-panel__routes { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.network-route { fill: none; stroke-linecap: round; }
.network-route--base { stroke: rgba(127, 158, 205, 0.32); stroke-width: 1.5; stroke-dasharray: 3 7; }
.network-route--pulse { stroke: #B6D0F4; stroke-width: 2; stroke-dasharray: 18 320; filter: drop-shadow(0 0 5px rgba(155, 194, 247, 0.9)); animation: data-route-flow 5s linear infinite; }
.network-route--branch { stroke: rgba(127, 158, 205, 0.27); stroke-width: 1.2; stroke-dasharray: 2 7; }
.network-route__node { fill: #BDD2EF; filter: drop-shadow(0 0 5px rgba(155, 194, 247, 0.85)); }
.network-orb { position: absolute; left: 53.8%; top: 36.1%; width: 30px; height: 30px; transform: translate(-50%, -50%); border: 1px solid rgba(164, 190, 228, 0.28); border-radius: 50%; box-shadow: 0 0 25px rgba(93, 133, 198, 0.22), inset 0 0 16px rgba(115, 151, 206, 0.15); animation: core-pulse 4s ease-in-out infinite; }
.network-orb span { position: absolute; inset: 5px; border: 1px solid rgba(184, 207, 239, 0.28); border-radius: 50%; }
.network-orb span:nth-child(2) { inset: -6px; border-color: rgba(164, 190, 228, 0.15); }
.network-orb span:nth-child(3) { inset: -13px; border-color: rgba(164, 190, 228, 0.09); }
.network-node { position: absolute; display: flex; align-items: center; gap: 0.55rem; padding: 0.55rem 0.68rem; border: 1px solid rgba(162, 185, 220, 0.2); border-radius: 7px; background: rgba(8, 13, 21, 0.88); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.25); animation: node-hover 5s ease-in-out infinite; }
.network-node__dot { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: #9EBCE8; box-shadow: 0 0 10px rgba(143, 168, 208, 0.8); }
.network-node__name { color: #D1DCEC; font-size: 0.59rem; font-weight: 700; letter-spacing: 0.1em; white-space: nowrap; }
.network-node__name small { display: block; margin-top: 0.16rem; color: #74849A; font-size: 0.49rem; font-weight: 500; letter-spacing: 0.09em; }
.network-node--ams { left: 10%; top: 57%; }
.network-node--fra { right: 9%; top: 54%; animation-delay: -2.3s; }
.network-node--core { left: 44%; top: 24%; animation-delay: -1.1s; }
.network-node--core .network-node__dot { background: #81CDA7; box-shadow: 0 0 10px rgba(128, 205, 168, 0.75); }
.network-node--edge { right: 17%; top: 19%; padding: 0.55rem; border-radius: 50%; animation-delay: -3.7s; }
.network-panel__coords { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); color: #69798F; font-size: 0.49rem; letter-spacing: 0.1em; white-space: nowrap; }
.network-panel__coords span { color: #9EB9E2; padding: 0 0.3rem; }
.network-panel__bottom { min-height: 67px; justify-content: flex-start; padding: 0 1.15rem; border-top: 1px solid rgba(185, 202, 226, 0.1); }
.network-panel__metric { display: flex; align-items: center; gap: 0.55rem; }
.network-panel__metric-icon { width: 29px; height: 29px; display: grid; place-items: center; border: 1px solid rgba(151, 177, 215, 0.19); border-radius: 7px; color: #B7CBE9; font-size: 1rem; }
.network-panel__metric strong,
.network-panel__metric small { display: block; }
.network-panel__metric strong { color: #C7D2E1; font-size: 0.59rem; font-weight: 600; }
.network-panel__metric small { color: #748196; font-size: 0.53rem; }
.network-panel__bottom-sep { width: 1px; height: 27px; margin: 0 1rem; background: rgba(185, 202, 226, 0.12); }
.network-panel__live { display: flex; align-items: center; gap: 0.4rem; margin-left: auto; color: #8391A4; font-size: 0.56rem; font-weight: 600; letter-spacing: 0.12em; }
.hero__stats {
  grid-column: 1;
  grid-row: 2;
  list-style: none;
  padding: 1.25rem 0 0;
  margin: 2.1rem 0 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  text-align: left;
  gap: clamp(1.5rem, 3vw, 3rem);
  border-top: 1px solid rgba(220, 225, 232, 0.13);
  max-width: 650px;
}
.hero__stats li { position: relative; padding-left: 0.85rem; }
.hero__stats li::before { content: ""; position: absolute; left: 0; top: 0.48rem; bottom: 0.4rem; width: 1px; background: linear-gradient(transparent, rgba(156, 181, 219, 0.65), transparent); }
.hero__stats strong { display: block; color: #DDE4EF; font-size: 1.28rem; line-height: 1.2; font-weight: 600; letter-spacing: -0.025em; }
.hero__stats span { color: #788496; font-size: 0.64rem; letter-spacing: 0.04em; }
.hero__scroll { position: absolute; right: 2rem; bottom: 2rem; display: flex; align-items: center; gap: 0.6rem; color: #687487; font-size: 0.57rem; font-weight: 600; letter-spacing: 0.15em; }
.hero__scroll > span:first-child { position: relative; display: inline-block; width: 22px; height: 32px; border: 1px solid rgba(166, 186, 216, 0.36); border-radius: 12px; }
.hero__scroll > span:first-child::after { content: ""; position: absolute; left: 50%; top: 6px; width: 2px; height: 5px; transform: translateX(-50%); border-radius: 2px; background: #ADC3E4; animation: scroll-nudge 1.6s ease-in-out infinite; }

/* ---------- Sections ---------- */
.section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 6rem 1.5rem;
}
.section--tint {
  max-width: none;
  background:
    radial-gradient(ellipse 70% 60% at 50% 0%, rgba(143, 168, 208, 0.12), transparent 70%),
    linear-gradient(180deg, var(--steel) 0%, var(--steel-soft) 100%);
  border-top: 1px solid rgba(143, 168, 208, 0.18);
  border-bottom: 1px solid rgba(143, 168, 208, 0.18);
}
.section--tint > * {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}
.section--tint .card {
  background: linear-gradient(180deg, #1F2A3D 0%, #141C2A 100%);
  border-color: rgba(143, 168, 208, 0.22);
}
.section__head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 3.5rem;
}
.section__head .muted { margin: 0; }

.grid {
  display: grid;
  gap: 1.5rem;
}
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

/* ---------- Cards ---------- */
.card {
  position: relative;
  background: linear-gradient(180deg, #15181D 0%, #0B0C0E 100%);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 2rem;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 24px 48px -20px rgba(0, 0, 0, 0.9);
  transition: transform 0.5s var(--ease), border-color 0.5s var(--ease), box-shadow 0.5s var(--ease);
  overflow: hidden;
}
.card::before {
  /* Metallische Reflexion an der oberen Kante */
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(231, 233, 236, 0.7), transparent);
  opacity: 0.6;
  transition: opacity 0.5s var(--ease);
}
.card:hover {
  transform: translateY(-4px);
  border-color: var(--border-strong);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.08) inset,
    0 32px 60px -20px rgba(0, 0, 0, 1),
    0 0 0 1px rgba(231, 233, 236, 0.04);
}
.card:hover::before { opacity: 1; }
.card--flat { padding: 1.75rem; }

.card__icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: linear-gradient(160deg, #1A1C1F, #0A0A0B);
  color: var(--chrome);
  margin-bottom: 1.5rem;
}
.card__icon svg { width: 22px; height: 22px; }

.specs {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 0;
  border-top: 1px solid var(--border);
}
.specs li {
  display: flex;
  justify-content: space-between;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.92rem;
  color: var(--text-2);
}
.specs b {
  color: var(--liquid);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* ---------- Pricing ---------- */
.tier { display: flex; flex-direction: column; }
.tier h3 { margin-top: 0.5rem; }
.tier p { min-height: 3rem; }
.price {
  font-size: 3.2rem;
  font-weight: 300;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  background: var(--chrome-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1.1;
  margin: 1rem 0 1.5rem;
}
.price span {
  font-size: 1.4rem;
  vertical-align: top;
  margin-right: 0.15rem;
  font-weight: 400;
}
.price small {
  font-size: 0.9rem;
  color: var(--text-2);
  font-weight: 400;
  margin-left: 0.25rem;
  -webkit-text-fill-color: var(--text-2);
}
.features {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem;
  flex: 1;
}
.features li {
  padding: 0.55rem 0 0.55rem 1.6rem;
  position: relative;
  color: var(--chrome);
  font-size: 0.94rem;
}
.features li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.05rem;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--chrome-gradient);
}
.tier--featured {
  border: 1px solid var(--border-strong);
  background:
    linear-gradient(180deg, rgba(231, 233, 236, 0.06), transparent 40%),
    linear-gradient(180deg, #111214 0%, #070708 100%);
  box-shadow:
    0 0 0 1px rgba(231, 233, 236, 0.12),
    0 30px 60px -24px rgba(0, 0, 0, 1);
}
.badge {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.3rem 0.6rem;
  border-radius: 999px;
  background: var(--chrome-gradient);
  color: #0A0B0D;
  font-weight: 700;
}

/* ---------- Feature cards ---------- */
#features h3 { font-size: 1.05rem; }

/* ---------- Standorte ---------- */
.divider {
  max-width: 1200px;
  height: 1px;
  margin: 0 auto;
  background: linear-gradient(90deg, transparent, rgba(231, 233, 236, 0.45), transparent);
}
.os {
  margin-top: 4rem;
  text-align: center;
}
.os__title { margin-bottom: 0.25rem; }
.os .small { margin-bottom: 1.5rem; }
.chips {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
}
.chips li {
  padding: 0.45rem 1.1rem;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  font-size: 0.9rem;
  color: var(--chrome);
  background: linear-gradient(180deg, #15171A, #0A0B0D);
}

/* ---------- FAQ ---------- */
.faq__list {
  max-width: 760px;
  margin: 0 auto;
}
.faq__item {
  border-bottom: 1px solid var(--border-strong);
  padding: 1.1rem 0;
}
.faq__item summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--chrome);
  list-style: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "+";
  float: right;
  color: var(--text-2);
}
.faq__item[open] summary::after { content: "−"; }
.faq__item p { margin: 0.75rem 0 0; }

/* ---------- CTA band ---------- */
.cta-band {
  position: relative;
  text-align: center;
  padding: 7rem 1.5rem;
  margin: 2rem 0 0;
  border-top: 1px solid var(--border);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(143, 168, 208, 0.2), transparent 60%),
    linear-gradient(180deg, var(--steel) 0%, var(--obsidian-deep) 100%);
}
.cta-band h2 { max-width: 20ch; margin: 0 auto 1rem; }
.cta-band p { margin: 0 auto 2rem; }

/* ---------- Footer ---------- */
.footer {
  border-top: 1px solid var(--border);
  padding: 3rem 1.5rem;
  background: var(--obsidian);
}
.footer__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem 2.5rem;
}
.footer__inner .muted { margin: 0 0 0 auto; }
.footer__links {
  display: flex;
  gap: 1.5rem;
}
.footer__links a {
  color: var(--text-2);
  font-size: 0.9rem;
  transition: color 0.3s var(--ease);
}
.footer__links a:hover { color: var(--liquid); }

/* ---------- Pricing categories ---------- */
.pricing-note { text-align: center; margin: -1rem 0 2.5rem; }
.pricing-cat {
  font-size: 1.35rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 2.5rem 0 1.25rem;
}
.tier h4 { font-size: 1.1rem; margin: 0.5rem 0 0.25rem; }

/* ---------- Kundenportal ---------- */
.portal-body {
  min-height: 100vh;
  background:
    radial-gradient(ellipse at 80% 0%, rgba(231, 233, 236, 0.05), transparent 55%),
    var(--obsidian);
}

.login {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  min-height: 100svh;
  width: min(1500px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(350px, 430px);
  align-items: center;
  gap: clamp(3rem, 7vw, 8rem);
  padding: clamp(2rem, 5vw, 5rem);
  overflow: hidden;
}
.login::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: min(74vw, 950px);
  aspect-ratio: 1;
  left: -15%;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(50, 78, 125, 0.2), rgba(26, 44, 76, 0.09) 42%, transparent 70%);
  filter: blur(16px);
  pointer-events: none;
}
.login__visual {
  position: relative;
  min-width: 0;
  min-height: min(790px, calc(100svh - 4rem));
  display: grid;
  grid-template-rows: auto minmax(290px, 1fr) auto auto;
  align-content: center;
}
.login__visual-top,
.login__visual-foot,
.network-stat,
.network-state,
.login__secure {
  display: flex;
  align-items: center;
}
.login__visual-top {
  justify-content: space-between;
  gap: 1rem;
  color: #A8B3C4;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.18em;
}
.network-state { gap: 0.5rem; color: #7F8998; letter-spacing: 0.12em; }
.network-state i,
.network-pulse,
.globe-tag i {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #9AB7E8;
  box-shadow: 0 0 12px rgba(143, 168, 208, 0.8);
}
.network-state i { width: 6px; height: 6px; background: #80CDA8; box-shadow: 0 0 10px rgba(128, 205, 168, 0.75); }
.login__globe-wrap {
  position: relative;
  min-height: 0;
  display: grid;
  place-items: center;
  overflow: visible;
  isolation: isolate;
}
.globe-aura {
  position: absolute;
  z-index: -1;
  width: 82%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(106, 147, 212, 0.15), rgba(61, 94, 151, 0.07) 48%, transparent 72%);
  filter: blur(8px);
}
.globe-orbit {
  position: absolute;
  pointer-events: none;
  border: 1px solid rgba(143, 168, 208, 0.2);
  border-radius: 50%;
}
.globe-orbit--one {
  width: 83%;
  aspect-ratio: 1;
  box-shadow: inset 0 0 35px rgba(102, 141, 201, 0.035), 0 0 30px rgba(102, 141, 201, 0.035);
  animation: orbit-breathe 7s ease-in-out infinite;
}
.globe-orbit--two {
  width: 100%;
  aspect-ratio: 2.15 / 1;
  border-color: rgba(143, 168, 208, 0.24);
  transform: rotate(-24deg);
  animation: orbit-turn 46s linear infinite;
}
.globe {
  position: relative;
  z-index: 1;
  display: block;
  width: min(100%, 570px);
  height: auto;
  aspect-ratio: 1;
  pointer-events: none;
  opacity: 0.92;
  filter: drop-shadow(0 0 30px rgba(73, 113, 180, 0.14));
}
.globe-tag {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.65rem;
  border: 1px solid rgba(165, 190, 226, 0.18);
  border-radius: 6px;
  background: rgba(9, 13, 20, 0.76);
  color: #D6E0EF;
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22), inset 0 1px rgba(255, 255, 255, 0.035);
  backdrop-filter: blur(10px);
}
.globe-tag i { width: 5px; height: 5px; }
.globe-tag small { color: #8997AA; font-size: 0.55rem; font-weight: 500; letter-spacing: 0.08em; }
.globe-tag--ams { left: 5%; top: 29%; animation: tag-float 5s ease-in-out infinite; }
.globe-tag--fra { right: 3%; bottom: 25%; animation: tag-float 5s ease-in-out -2.5s infinite; }
.globe-tag--eu {
  left: 50%;
  bottom: 5%;
  transform: translateX(-50%);
  border: 0;
  background: transparent;
  color: #8397B5;
  font-size: 0.58rem;
  letter-spacing: 0.2em;
  box-shadow: none;
  backdrop-filter: none;
}
.login__story { max-width: 620px; padding: 0.5rem 0 1.25rem; }
.login__story .eyebrow { display: flex; align-items: center; gap: 0.65rem; margin-bottom: 1.15rem; font-size: 0.67rem; }
.eyebrow-line { display: inline-block; width: 23px; height: 1px; background: var(--accent); }
.login__story h1 {
  margin: 0 0 1rem;
  font-size: clamp(2.8rem, 5.2vw, 5rem);
  line-height: 0.98;
  letter-spacing: -0.065em;
  color: #F2F5FA;
}
.login__story h1 span {
  background: linear-gradient(100deg, #E9EDF4 5%, #9BAFCB 48%, #687FA4 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.login__story > p:last-child { max-width: 47ch; margin: 0; color: #929EAF; font-size: 0.97rem; line-height: 1.8; }
.login__visual-foot {
  justify-content: space-between;
  gap: 1rem;
  border-top: 1px solid rgba(220, 225, 232, 0.1);
  padding-top: 1.15rem;
}
.network-stat { gap: 0.7rem; }
.network-stat__icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(143, 168, 208, 0.22);
  border-radius: 8px;
  color: #AFC5E6;
  background: rgba(75, 103, 150, 0.1);
}
.network-stat strong,
.network-stat small { display: block; }
.network-stat strong { color: #C7D0DE; font-size: 0.72rem; font-weight: 600; }
.network-stat small { color: #707B8B; font-size: 0.65rem; }
.network-coords { color: #687587; font-size: 0.58rem; letter-spacing: 0.08em; white-space: nowrap; }
.network-coords i { color: #9AB7E8; font-style: normal; padding: 0 0.25rem; }
.login__card { z-index: 1; background: rgba(12, 12, 14, 0.86); backdrop-filter: blur(18px); }
.login__card { border-color: rgba(194, 207, 228, 0.22); box-shadow: 0 32px 90px -24px rgba(0, 0, 0, 0.86), 0 0 50px rgba(77, 108, 158, 0.07), 0 1px 0 rgba(255, 255, 255, 0.07) inset; }
.login__card::before { background: linear-gradient(90deg, transparent, rgba(186, 208, 240, 0.72), transparent); }
.auth-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.25rem;
  padding: 0.25rem;
  margin-bottom: 1.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #060607;
}
.auth-switch__btn {
  font: inherit;
  font-size: 0.85rem;
  color: var(--text-2);
  background: transparent;
  border: 0;
  border-radius: calc(var(--radius) - 2px);
  padding: 0.55rem 0.5rem;
  cursor: pointer;
  transition: color 0.3s var(--ease), background 0.3s var(--ease);
}
.auth-switch__btn.is-active {
  color: var(--obsidian);
  background: var(--chrome-gradient);
}
.field[hidden] { display: none; }
.login__card {
  width: min(420px, 100%);
  padding: 2.5rem 2.25rem;
}
.login__card {
  position: relative;
  overflow: hidden;
  border-color: var(--border-strong);
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(231, 233, 236, 0.04) inset;
}
.login__card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--liquid), transparent);
}
.login__card .logo { margin-bottom: 2.25rem; }
.login__eyebrow { margin-bottom: 0.65rem; }
.login__secure {
  gap: 0.55rem;
  margin: -0.35rem 0 1.25rem;
  color: #8491A3;
  font-size: 0.59rem;
  font-weight: 600;
  letter-spacing: 0.15em;
}
.secure-icon { color: #A9BEE0; font-size: 0.85rem; }
.secure-line { height: 1px; flex: 1; background: linear-gradient(90deg, rgba(143, 168, 208, 0.25), transparent); }
.secure-lock { color: #81BE9C; font-size: 0.52rem; text-shadow: 0 0 10px rgba(129, 190, 156, 0.5); }
.password-wrap {
  position: relative;
  display: block;
  width: 100%;
}
.password-wrap input {
  display: block;
  width: 100%;
  padding-right: 3rem;
}
.password-toggle {
  position: absolute;
  top: 50%;
  right: 0.55rem;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  transform: translateY(-50%);
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #9AA6B7;
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease;
}
.password-toggle:hover { color: #E7E9EC; background: rgba(143, 168, 208, 0.1); }
.password-toggle:focus-visible { outline: 1px solid var(--accent); outline-offset: 1px; }
.password-toggle svg { display: block; width: 18px; height: 18px; }
.login__card .login-submit-arrow { font-size: 1.2rem; line-height: 1; transition: transform 0.25s var(--ease); }
.login__card .btn:hover .login-submit-arrow { transform: translateX(4px); }
.login__legal { margin: 1.1rem 0 0; color: #707782; text-align: center; font-size: 0.67rem; }
.login__legal a { color: #A9B7CB; text-decoration: underline; text-decoration-color: rgba(169, 183, 203, 0.35); text-underline-offset: 3px; }
.login__legal a:hover { color: #E7E9EC; }
.login__card .btn--block {
  padding: 0.85rem 1rem;
  font-size: 0.95rem;
  margin-top: 0.4rem;
}
.login__card .field input:hover { border-color: var(--border-strong); }
.login__title { font-size: 1.6rem; margin-bottom: 0.4rem; }
.login__card > p { margin-bottom: 1.75rem; }
.login__note { margin: 1.5rem 0 0; text-align: center; }

.form {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-size: 0.85rem;
  color: var(--text-2);
}
.field input,
.field select,
.field textarea {
  font: inherit;
  font-size: 0.95rem;
  color: var(--liquid);
  background: #060607;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.7rem 0.9rem;
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--border-strong);
  box-shadow: 0 0 0 3px rgba(231, 233, 236, 0.08);
}
.field textarea {
  resize: vertical;
  min-height: 3.5rem;
}
.field select {
  appearance: none;
}

.form__error {
  margin: 0;
  font-size: 0.85rem;
  color: #E5484D;
}
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.dash__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--border);
  background: rgba(5, 5, 5, 0.85);
  position: sticky;
  top: 0;
  z-index: 10;
}
.dash__user {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.dash__main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 4rem;
}
.dash__head { margin-bottom: 2rem; }
.dash__title { font-size: clamp(1.8rem, 3vw, 2.4rem); margin: 0; }

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}
.stat {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.stat strong {
  font-size: 1.9rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--liquid);
}

.table-card { padding: 0; overflow: hidden; }
.table-card__head {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--border);
}
.table-card__head h2 { font-size: 1.05rem; margin: 0; }
.notification-center { padding: 0; margin-bottom: 2rem; border-color: rgba(143, 168, 208, 0.2); }
.notification-center__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-right: 1.25rem; border-bottom: 1px solid var(--border); }
.notification-center__head .table-card__head { display: flex; align-items: center; flex-wrap: wrap; gap: 0.75rem; min-width: 0; padding: 1.1rem 1.5rem; border: 0; }
.notification-count { padding: 0.2rem 0.55rem; border: 1px solid rgba(143, 168, 208, 0.24); border-radius: 999px; color: #B8CBE8; background: rgba(64, 88, 128, 0.13); font-size: 0.68rem; font-variant-numeric: tabular-nums; }
.notification-list { display: grid; gap: 0.65rem; padding: 0.85rem 1rem; }
.notification-item { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; align-items: center; gap: 0.8rem; padding: 0.8rem 0.9rem; border: 1px solid rgba(143, 168, 208, 0.15); border-radius: 10px; background: linear-gradient(120deg, rgba(27, 38, 57, 0.5), rgba(8, 10, 14, 0.7)); }
.notification-item.is-unread { border-color: rgba(143, 168, 208, 0.3); background: linear-gradient(120deg, rgba(33, 49, 75, 0.62), rgba(8, 10, 14, 0.75)); }
.notification-item.is-read { opacity: 0.72; }
.notification-item__marker { width: 7px; height: 7px; border-radius: 50%; background: transparent; }
.notification-item.is-unread .notification-item__marker { background: #9EB9E2; box-shadow: 0 0 10px rgba(143, 168, 208, 0.65); }
.notification-item__body { min-width: 0; }
.notification-item__top { display: flex; align-items: baseline; justify-content: space-between; gap: 0.8rem; }
.notification-item__top strong { color: #DCE6F5; font-size: 0.84rem; font-weight: 600; }
.notification-item__top time { flex: 0 0 auto; color: #78869B; font-size: 0.68rem; }
.notification-item__body p { margin: 0.2rem 0 0; color: #9DAABD; font-size: 0.8rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.notification-item .btn { white-space: nowrap; }
.notification-item .btn:disabled { color: #78869B; }
.notification-list > .admin-empty { border: 0; padding: 0.7rem; }
.table-wrap { overflow-x: auto; }
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}
.table th {
  text-align: left;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-2);
  padding: 0.85rem 1.5rem;
  border-bottom: 1px solid var(--border);
}
.table td {
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--border);
  color: var(--chrome);
  vertical-align: middle;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr { transition: background 0.3s var(--ease); }
.table tbody tr:hover { background: rgba(231, 233, 236, 0.025); }
.table td strong { color: var(--liquid); font-weight: 600; }

.status {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--chrome);
}
.status::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--chrome-gradient);
  box-shadow: 0 0 8px rgba(231, 233, 236, 0.35);
}
.status--offline { color: var(--text-2); }
.status--offline::before {
  background: #3A3D42;
  box-shadow: none;
}
.status--pending::before {
  background: #8F949B;
  animation: pulse 1.4s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 1; }
}

.meter {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.meter__bar {
  width: 90px;
  height: 6px;
  border-radius: 999px;
  background: #15171A;
  border: 1px solid var(--border);
  overflow: hidden;
}
.meter__fill {
  display: block;
  height: 100%;
  background: var(--chrome-gradient);
  transition: width 0.6s var(--ease);
}
.meter__value {
  font-size: 0.82rem;
  color: var(--text-2);
  min-width: 2.8rem;
}

.row-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}
.row-actions .btn { padding: 0.4rem 0.8rem; font-size: 0.8rem; }
.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

@media (max-width: 960px) {
  .login { grid-template-columns: minmax(0, 1fr) minmax(330px, 390px); gap: clamp(2rem, 4vw, 3.5rem); padding-inline: clamp(1.5rem, 4vw, 3rem); }
  .login__visual { min-height: 690px; }
  .globe { width: min(100%, 470px); }
  .globe-tag--ams { left: 0; }
  .globe-tag--fra { right: 0; }
  .network-coords { display: none; }
}
@media (max-width: 720px) {
  .login { grid-template-columns: 1fr; gap: 1rem; padding: 1.5rem 1.1rem 2.5rem; align-content: start; }
  .login__visual { min-height: 0; grid-template-rows: auto minmax(230px, 56vw) auto; }
  .login__visual-top { font-size: 0.57rem; }
  .login__globe-wrap { grid-row: 2; }
  .globe { width: min(100%, 390px); }
  .globe-orbit--one { width: min(82%, 330px); }
  .globe-orbit--two { width: min(100%, 410px); }
  .globe-tag--ams { left: 2%; top: 18%; }
  .globe-tag--fra { right: 1%; bottom: 18%; }
  .globe-tag--eu { bottom: 1%; }
  .login__story { padding: 0.5rem 0 1.25rem; }
  .login__story h1 { font-size: clamp(2.55rem, 9vw, 3.5rem); }
  .login__story > p:last-child { font-size: 0.9rem; }
  .login__visual-foot { display: none; }
  .login__card { justify-self: center; margin-top: 0.25rem; }
}
@media (max-width: 600px) {
  .notification-center__head { align-items: flex-start; flex-direction: column; gap: 0; padding: 0.8rem 1rem 1rem; }
  .notification-center__head .table-card__head { padding: 0.35rem 0; }
  .notification-list { padding: 0.7rem; }
  .notification-item { grid-template-columns: 8px minmax(0, 1fr); }
  .notification-item > .btn { grid-column: 2; justify-self: start; }
  .notification-item__top { align-items: flex-start; flex-direction: column; gap: 0.1rem; }
}

@media (max-width: 520px) {
  .dash__user .muted { display: none; }
  .login__card { padding: 2rem 1.4rem; }
  .login__card .logo { margin-bottom: 1.6rem; }
  .network-state { font-size: 0.52rem; }
  .globe-tag { font-size: 0.55rem; padding: 0.42rem 0.5rem; }
  .globe-tag small { font-size: 0.48rem; }
}

/* ---------- Responsive & motion ---------- */
@media (max-width: 1080px) {
  .hero__content { max-width: 1080px; column-gap: clamp(1.5rem, 3vw, 2.25rem); }
  .hero__title { font-size: clamp(2.75rem, 4.8vw, 4rem); }
  .hero__sub { font-size: 0.98rem; }
  .network-panel__map { height: 300px; }
  .network-node--ams { left: 6%; }
  .network-node--fra { right: 5%; }
  .hero__chrome { right: -26%; opacity: 0.12; }
}
@media (max-width: 860px) {
  .nav__links { display: none; }
  .nav__inner { gap: 1rem; }
  .hero { min-height: auto; padding-top: 8rem; }
  .hero__content { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); column-gap: 1.25rem; }
  .hero__title { font-size: clamp(2.5rem, 4.4vw, 3.3rem); }
  .hero__network { width: 100%; min-width: 0; }
  .network-panel__top { padding-inline: 0.8rem; }
  .network-panel__bottom { padding-inline: 0.8rem; }
  .network-panel__bottom-sep { margin-inline: 0.65rem; }
  .hero__stats { gap: 1.1rem; }
  .hero__stats span { max-width: 11ch; }
}
@media (max-width: 640px) {
  .hero__content { display: flex; flex-direction: column; align-items: stretch; }
  .hero__title { font-size: clamp(2.6rem, 10.5vw, 4.1rem); }
  .hero__network { margin-top: 2.25rem; }
  .hero__stats { width: 100%; }
}
@media (max-width: 720px) {
  .hero { min-height: auto; align-items: flex-start; padding: 7.5rem 1.2rem 4.5rem; }
  .hero__content { display: flex; flex-direction: column; align-items: stretch; }
  .hero__copy { max-width: 100%; }
  .hero__title { max-width: 11ch; font-size: clamp(3.4rem, 12vw, 5.3rem); overflow-wrap: normal; }
  .hero__sub { max-width: 50ch; margin: 1.2rem 0 1.5rem; font-size: 0.97rem; }
  .hero__proof { gap: 0.8rem 1.1rem; margin-top: 1.25rem; }
  .hero__proof span { font-size: 0.66rem; }
  .hero__network { position: relative; top: auto; right: auto; width: 100%; min-width: 0; margin-top: 2.5rem; transform: none; animation: none; }
  .network-panel__map { height: clamp(245px, 69vw, 330px); }
  .network-node--ams { left: 5%; }
  .network-node--fra { right: 4%; }
  .network-panel__bottom { min-height: 60px; }
  .network-panel__metric-icon { width: 26px; height: 26px; }
  .network-panel__metric strong { font-size: 0.55rem; }
  .network-panel__metric small { font-size: 0.5rem; }
  .hero__stats { order: 3; max-width: none; justify-content: space-between; gap: 0.8rem; margin-top: 1.5rem; padding-top: 1rem; }
  .hero__stats strong { font-size: 1.1rem; }
  .hero__stats span { font-size: 0.58rem; }
  .hero__scroll { display: none; }
}
@media (max-width: 520px) {
  .hero__title { font-size: clamp(3rem, 13vw, 4.5rem); }
  .hero__cta { gap: 0.6rem; }
  .hero__cta .btn { padding: 0.75rem 1rem; font-size: 0.86rem; }
  .hero__network { margin-top: 2rem; }
  .network-panel__top { height: 46px; padding-inline: 0.65rem; }
  .network-panel__label { gap: 0.35rem; font-size: 0.52rem; }
  .network-panel__mark { width: 18px; height: 18px; }
  .network-panel__status { font-size: 0.47rem; }
  .network-panel__map { height: 250px; }
  .network-node { gap: 0.4rem; padding: 0.45rem 0.5rem; }
  .network-node__name { font-size: 0.5rem; }
  .network-node__name small { font-size: 0.43rem; }
  .network-panel__coords { font-size: 0.43rem; }
  .network-panel__bottom { gap: 0.4rem; padding-inline: 0.6rem; }
  .network-panel__metric { gap: 0.35rem; }
  .network-panel__metric-icon { display: none; }
  .network-panel__bottom-sep { margin-inline: 0.35rem; }
  .network-panel__live { font-size: 0.5rem; }
  .hero__stats { gap: 0.6rem; }
  .hero__stats li { padding-left: 0.55rem; }
  .hero__stats strong { font-size: 0.98rem; }
  .hero__stats span { font-size: 0.52rem; }
  .nav__actions .btn--ghost { display: none; }
  .nav__actions { gap: 0.4rem; }
  .nav__inner { padding: 0.9rem 1rem; }
  .lang button { padding: 0.3rem 0.45rem; }
  .footer__inner .muted { margin-left: 0; }
}
@keyframes hero-ring-turn { to { transform: translateY(-50%) rotate(360deg); } }
@keyframes network-panel-enter { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: translateX(0); } }
@keyframes data-route-flow { to { stroke-dashoffset: -338; } }
@keyframes core-pulse { 0%, 100% { box-shadow: 0 0 18px rgba(93, 133, 198, 0.15), inset 0 0 12px rgba(115, 151, 206, 0.1); } 50% { box-shadow: 0 0 30px rgba(93, 133, 198, 0.32), inset 0 0 18px rgba(115, 151, 206, 0.22); } }
@keyframes node-hover { 0%, 100% { translate: 0 0; } 50% { translate: 0 -4px; } }
@keyframes scroll-nudge { 0%, 100% { translate: 0 0; opacity: 0.45; } 55% { translate: 0 6px; opacity: 1; } }

@keyframes orbit-breathe {
  0%, 100% { opacity: 0.55; transform: scale(0.98); }
  50% { opacity: 1; transform: scale(1.015); }
}
@keyframes orbit-turn { to { transform: rotate(336deg); } }
@keyframes tag-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -5px; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Admin control center ---------- */
.admin-body { min-height: 100vh; }
.admin-shell { width: min(1120px, 100%); margin: 0 auto; padding: 1.25rem clamp(1rem, 4vw, 2.5rem) 3rem; }
.admin-topbar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.5rem 0 1.2rem; border-bottom: 1px solid var(--border); }
.admin-topbar__status { display: inline-flex; align-items: center; gap: 0.55rem; color: #8D9BB0; font-size: 0.62rem; font-weight: 600; letter-spacing: 0.16em; }
.admin-topbar__status i { width: 7px; height: 7px; border-radius: 50%; background: #80CDA8; box-shadow: 0 0 10px rgba(128, 205, 168, 0.65); }
.admin-login { width: min(480px, 100%); margin: clamp(3rem, 12vh, 8rem) auto; padding: clamp(1.5rem, 5vw, 2.5rem); background: rgba(12, 14, 19, 0.92); border-color: rgba(158, 180, 215, 0.22); }
.admin-login h1,.admin-heading h1 { margin: 0 0 0.6rem; font-size: clamp(2rem, 5vw, 3rem); }
.admin-login > p.muted { margin-bottom: 1.7rem; }
.admin-login__note { margin: 1rem 0 0; color: #737F90; font-size: 0.72rem; text-align: center; }
.admin-login .field input { display: block; width: 100%; margin-top: 0.4rem; }
.admin-login .btn { margin-top: 0.25rem; }
.admin-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5rem; padding: 3rem 0 1.5rem; }
.admin-heading .muted { margin: 0; }
.admin-heading__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.admin-section { margin-top: 1.4rem; }
.admin-section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 0.8rem; }
.admin-section__head .eyebrow { margin: 0 0 0.25rem; font-size: 0.63rem; }
.admin-section__head h2 { margin: 0; font-size: 1.35rem; }
.admin-count { color: #B4C7E2; font-size: 1.2rem; font-variant-numeric: tabular-nums; }
.admin-filter select { padding: 0.55rem 0.75rem; color: var(--liquid); border: 1px solid var(--border-strong); border-radius: 8px; background: #0A0C10; font: inherit; }
.admin-list { display: grid; gap: 0.7rem; }
.admin-item,.admin-panel,.admin-notice { border: 1px solid var(--border); border-radius: 12px; background: linear-gradient(145deg, rgba(21, 27, 37, 0.9), rgba(8, 10, 14, 0.94)); box-shadow: inset 0 1px rgba(255,255,255,0.035); }
.admin-item { display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; padding: 1rem 1.1rem; }
.admin-item__main { min-width: 0; }
.admin-item__title { display: flex; align-items: center; flex-wrap: wrap; gap: 0.65rem; }
.admin-item__title h3 { margin: 0; font-size: 1rem; }
.admin-item__meta { margin: 0.35rem 0 0; color: #8995A7; font-size: 0.78rem; overflow-wrap: anywhere; }
.admin-status { display: inline-flex; padding: 0.18rem 0.5rem; border: 1px solid rgba(158,185,226,.2); border-radius: 999px; color: #AFC4E2; font-size: 0.65rem; }
.admin-status--open { color: #E7C788; border-color: rgba(231,199,136,.28); }
.admin-status--approved,.admin-status--online { color: #8FD0AD; border-color: rgba(143,208,173,.26); }
.admin-status--rejected,.admin-status--offline { color: #9AA3B1; }
.admin-item__actions { display: flex; flex: 0 0 auto; flex-wrap: wrap; gap: 0.5rem; }
.admin-empty { margin: 0; padding: 1.1rem; border: 1px dashed rgba(158,180,215,.22); border-radius: 10px; color: #8F9BAC; font-size: 0.86rem; }
.admin-panel { padding: 1.2rem; }
.admin-panel > p { margin: 0 0 1rem; font-size: 0.85rem; }
.admin-renew-form { display: grid; grid-template-columns: minmax(0,1fr) auto auto; align-items: end; gap: 0.8rem 1rem; }
.admin-renew-form .field input { display: block; width: 100%; margin-top: 0.35rem; }
.admin-confirm { display: flex; align-items: center; gap: 0.5rem; color: #9AA6B7; font-size: 0.78rem; }
.admin-confirm input { accent-color: #AFC5E6; }
.admin-notice { padding: 1.2rem; border-color: rgba(231, 199, 136, 0.25); background: linear-gradient(110deg, rgba(51, 42, 26, 0.28), rgba(12, 13, 16, 0.85)); }
.admin-notice strong { color: #E6D2A8; }
.admin-notice p { margin: 0.4rem 0 0.8rem; color: #A8A5A0; font-size: 0.84rem; }
.admin-notice a { color: #C1D2EC; font-size: 0.82rem; text-decoration: underline; text-underline-offset: 3px; }
.admin-message { margin: 0.8rem 0 0; padding: 0.8rem 1rem; border: 1px solid rgba(143,208,173,.24); border-radius: 9px; color: #A9D7BB; background: rgba(36,75,55,.16); font-size: 0.85rem; overflow-wrap: anywhere; }
.admin-message.is-error { color: #F0A2A2; border-color: rgba(229,72,77,.28); background: rgba(80,25,28,.2); }
.admin-footer { display: flex; justify-content: space-between; gap: 1rem; margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid var(--border); color: #7C8797; font-size: 0.75rem; }
.admin-footer a { color: #AFC2E0; }
.admin-shell [hidden] { display: none !important; }
@media (max-width: 700px) {
  .admin-heading { align-items: flex-start; flex-direction: column; padding-top: 2rem; }
  .admin-item { align-items: flex-start; flex-direction: column; }
  .admin-item__actions { width: 100%; }
  .admin-item__actions .btn { flex: 1 1 auto; }
  .admin-renew-form { grid-template-columns: 1fr; }
  .admin-confirm { min-height: 2rem; }
  .admin-footer { flex-direction: column; }
}

/* ---------- Legal and information pages ---------- */
.legal-body { min-height: 100vh; }
.legal-nav { background: rgba(5, 5, 5, 0.78); }
.legal-nav__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.6rem 1.5rem;
  margin-left: auto;
}
.legal-nav__links a,
.legal-related a {
  color: var(--text-2);
  font-size: 0.88rem;
  transition: color 0.25s var(--ease);
}
.legal-nav__links a:hover,
.legal-related a:hover { color: var(--liquid); }
.legal-nav__links a[aria-current="page"] { color: var(--liquid); }
.legal-page {
  min-height: calc(100vh - 140px);
  padding: 8.5rem 1.5rem 5rem;
}
.legal-page__inner { width: min(820px, 100%); margin: 0 auto; }
.legal-back { display: inline-flex; margin-bottom: 2.5rem; color: #AFC2E0; font-size: 0.86rem; }
.legal-back:hover { color: var(--white); }
.legal-eyebrow { margin-bottom: 0.8rem; }
.legal-eyebrow span { color: #687587; padding: 0 0.35rem; }
.legal-page h1 { margin-bottom: 0.8rem; font-size: clamp(2.5rem, 7vw, 4.4rem); overflow-wrap: anywhere; }
.legal-intro { max-width: 62ch; margin-bottom: 2rem; color: #A0A9B7; font-size: 1.05rem; }
.legal-notice {
  margin: 2rem 0;
  padding: 1.2rem 1.35rem;
  border: 1px solid rgba(143, 168, 208, 0.3);
  border-left: 2px solid #9EB9E2;
  border-radius: 10px;
  background: linear-gradient(110deg, rgba(39, 57, 84, 0.48), rgba(10, 12, 16, 0.68));
  color: #D5DCE7;
}
.legal-notice strong { display: block; margin-bottom: 0.35rem; color: #E5ECF7; font-size: 0.9rem; }
.legal-notice p { margin: 0; color: #A0AABB; font-size: 0.88rem; }
.legal-card {
  margin-top: 1rem;
  padding: clamp(1.2rem, 3vw, 1.7rem);
  border: 1px solid var(--border);
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(22, 27, 36, 0.9), rgba(8, 9, 12, 0.94));
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.18), inset 0 1px rgba(255, 255, 255, 0.035);
}
.legal-card h2 { margin: 0 0 0.65rem; font-size: 1.05rem; letter-spacing: -0.01em; }
.legal-card p,
.legal-card address { margin: 0; color: #A4ADBA; font-size: 0.92rem; font-style: normal; overflow-wrap: anywhere; }
.legal-card p + p { margin-top: 0.85rem; }
.legal-card a { color: #B8C9E4; text-decoration: underline; text-decoration-color: rgba(184, 201, 228, 0.35); text-underline-offset: 3px; }
.legal-related { display: flex; flex-wrap: wrap; gap: 0.75rem 1.4rem; margin-top: 2rem; }
.legal-footer .footer__inner { justify-content: space-between; }
.legal-footer .footer__inner .muted { margin-left: 0; }

@media (max-width: 640px) {
  .legal-nav .nav__inner { flex-wrap: wrap; }
  .legal-nav__links { width: 100%; justify-content: flex-start; margin-left: 0; gap: 0.4rem 1rem; }
  .legal-nav__links a { font-size: 0.8rem; }
  .legal-page { min-height: calc(100vh - 120px); padding: 8.7rem 1.1rem 3.5rem; }
  .legal-back { margin-bottom: 2rem; }
  .legal-footer .footer__inner { align-items: flex-start; }
}

/* ---------- Server configurator ---------- */
.configurator {
  position: relative;
  margin: 2.25rem 0 3rem;
  padding: clamp(1.25rem, 3vw, 2.2rem);
  overflow: hidden;
  border: 1px solid rgba(143, 168, 208, 0.28);
  border-radius: 16px;
  background: radial-gradient(ellipse at 10% 0%, rgba(93, 124, 174, 0.2), transparent 55%), linear-gradient(145deg, rgba(23, 31, 44, 0.96), rgba(8, 10, 14, 0.98));
  box-shadow: 0 24px 65px rgba(0, 0, 0, 0.32), inset 0 1px rgba(255, 255, 255, 0.05);
}
.configurator::before { content: ""; position: absolute; top: 0; left: 8%; right: 8%; height: 1px; background: linear-gradient(90deg, transparent, rgba(211, 226, 249, 0.48), transparent); }
.configurator__head { max-width: 690px; margin-bottom: 1.6rem; }
.configurator__head .eyebrow { margin-bottom: 0.45rem; }
.configurator__head h3 { margin-bottom: 0.45rem; font-size: clamp(1.35rem, 3vw, 1.8rem); }
.configurator__head .muted { margin: 0; font-size: 0.9rem; }
.configurator__fields { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.9rem; }
.configurator .field { min-width: 0; }
.configurator .field > span { display: block; margin-bottom: 0.4rem; color: #B5C1D2; font-size: 0.75rem; font-weight: 600; }
.configurator select {
  width: 100%; min-height: 48px; padding: 0.7rem 2rem 0.7rem 0.8rem;
  border: 1px solid rgba(170, 190, 220, 0.22); border-radius: 8px;
  color: var(--liquid); background: #0C1017; font: inherit; font-size: 0.82rem;
}
.configurator select:focus-visible { outline: 2px solid #9EB9E2; outline-offset: 2px; }
.configurator__result { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; margin-top: 1.4rem; padding: 1.15rem 1.2rem; border: 1px solid rgba(170, 190, 220, 0.14); border-radius: 11px; background: rgba(3, 5, 8, 0.48); }
.configurator__label { margin: 0 0 0.3rem; color: #8191A8; font-size: 0.64rem; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; }
.configurator__summary h4 { margin: 0 0 0.25rem; color: #E1E8F2; font-size: 1rem; }
.configurator__summary .muted { margin: 0; font-size: 0.77rem; }
.configurator__checkout { display: flex; flex: 0 0 auto; flex-direction: column; align-items: flex-end; gap: 0.4rem; }
.configurator__price { display: flex; align-items: baseline; gap: 0.35rem; margin: 0; color: #E7E9EC; font-size: 1.6rem; font-variant-numeric: tabular-nums; }
.configurator__price small { color: #8F9BAC; font-size: 0.75rem; }
.configurator__checkout > small { font-size: 0.67rem; }
.configurator__checkout .btn { white-space: nowrap; }
.configurator [hidden] { display: none !important; }
@media (max-width: 850px) {
  .configurator__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .configurator__fields { grid-template-columns: 1fr; gap: 0.75rem; }
  .configurator__result { align-items: stretch; flex-direction: column; }
  .configurator__checkout { align-items: stretch; }
  .configurator__checkout .btn { width: 100%; }
  .configurator__price { font-size: 1.45rem; }
}

/* Admin-Erweiterungen: Kennzahlen, Filter, Notizen und Kündigungsstatus. */
.admin-overview { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .75rem; margin: .5rem 0 2rem; }
.admin-stat { display: flex; flex-direction: column; gap: .35rem; min-width: 0; padding: 1rem; border: 1px solid var(--border); border-radius: 11px; background: linear-gradient(145deg, rgba(21,27,37,.9), rgba(8,10,14,.94)); }
.admin-stat span { color: #8995A7; font-size: .72rem; }
.admin-stat strong { color: #DDE6F4; font-size: 1.65rem; line-height: 1.15; font-variant-numeric: tabular-nums; }
.admin-toolbar { display: flex; align-items: flex-end; gap: .65rem; margin: 0 0 .85rem; }
.admin-toolbar .field { flex: 1 1 16rem; min-width: 0; }
.admin-toolbar .field input { display: block; width: 100%; margin-top: .25rem; }
.admin-toolbar--filters .field { flex: 1 1 11rem; }
.admin-toolbar--filters .field input[type="date"] { color-scheme: dark; }
.admin-item--stack { align-items: stretch; flex-direction: column; }
.admin-item__row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.admin-ticket-note,.admin-cancel-control { display: flex; align-items: center; gap: .6rem; padding-top: .7rem; border-top: 1px solid var(--border); }
.admin-ticket-note textarea,.admin-cancel-control input,.admin-cancel-control select { flex: 1 1 auto; min-width: 0; padding: .55rem .7rem; border: 1px solid var(--border); border-radius: 8px; color: var(--liquid); background: #080A0E; font: inherit; font-size: .78rem; }
.admin-ticket-note textarea { min-height: 2.5rem; resize: vertical; }
.admin-cancel-control select { max-width: 15rem; }
.admin-status--cancel { color: #E7C788; border-color: rgba(231,199,136,.28); }
@media (max-width: 850px) {
  .admin-overview { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .admin-toolbar--filters { flex-wrap: wrap; }
  .admin-toolbar--filters .field { flex-basis: calc(50% - .65rem); }
  .admin-toolbar--filters button { flex: 1 0 100%; }
}
@media (max-width: 600px) {
  .admin-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-item__row,.admin-ticket-note,.admin-cancel-control { align-items: stretch; flex-direction: column; }
  .admin-item__row .admin-item__actions { width: 100%; }
  .admin-toolbar { align-items: stretch; flex-direction: column; }
  .admin-toolbar--filters .field { flex-basis: auto; }
  .admin-cancel-control select { max-width: none; }
}

.support-reply { margin: .8rem 0 0; padding: .8rem 1rem; border-left: 2px solid #8FD0AD; border-radius: 0 8px 8px 0; color: #C6D7CB; background: rgba(36,75,55,.16); font-size: .85rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.admin-ticket-note select { flex: 0 1 14rem; min-width: 0; padding: .55rem .7rem; border: 1px solid var(--border); border-radius: 8px; color: var(--liquid); background: #080A0E; font: inherit; font-size: .78rem; }
.admin-ticket-note input { min-width: 0; flex: 1 1 auto; padding: .55rem .7rem; border: 1px solid var(--border); border-radius: 8px; color: var(--liquid); background: #080A0E; font: inherit; font-size: .78rem; }
.pricing-table { min-width: 760px; }
.pricing-table caption { padding: .75rem; color: var(--text-2); text-align: left; }
.table-wrap { scrollbar-color: #536782 #0A0C10; scrollbar-width: thin; }
@media (max-width: 600px) {
  .admin-ticket-note select { flex-basis: auto; }
  .pricing-table { min-width: 720px; }
  .support-reply { font-size: .8rem; }
}