/* =====================================================================
   AIOKS · gemeinsame Basis für die Unterseiten (Kontakt, Impressum, …)
   Tokens identisch zur Hero-Seite (aioks-nexus-v20.html).
   ===================================================================== */
:root{
  --void:#000; --bone:#fff; --ash:#bdbdbd; --smoke:#9a9a9a;
  --cyan:#38e1ff; --plum:#8052ff; --magenta:#ff4d9d; --danger:#ff6b8a; --ok:#34f5c5;
  --hair:rgba(255,255,255,0.10); --glass:rgba(255,255,255,0.045);
  --mono:"IBM Plex Mono", ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
  --serif:"Times New Roman", Times, Georgia, serif;
  --disp:"Helvetica Neue", "Inter", system-ui, -apple-system, Arial, sans-serif;
}
*{ box-sizing:border-box; margin:0; padding:0; }
body{
  min-height:100vh; min-height:100dvh; color:var(--bone); font-family:var(--mono); -webkit-font-smoothing:antialiased;
  background:
    radial-gradient(820px 560px at 12% 16%, rgba(128,82,255,0.12), transparent 60%),
    radial-gradient(820px 560px at 88% 84%, rgba(56,225,255,0.09), transparent 60%),
    #000;
  display:flex; flex-direction:column;
  padding:calc(38px + env(safe-area-inset-top)) calc(30px + env(safe-area-inset-right)) calc(28px + env(safe-area-inset-bottom)) calc(30px + env(safe-area-inset-left));
}
.nebula{ position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden; }
.blob{ position:absolute; border-radius:50%; filter:blur(110px); opacity:.14; mix-blend-mode:screen; animation:drift 30s ease-in-out infinite alternate; }
.blob.b1{ width:44vw; height:44vw; left:-8vw; top:4vh; background:radial-gradient(circle, var(--plum), transparent 70%); }
.blob.b2{ width:40vw; height:40vw; right:-6vw; bottom:-8vh; background:radial-gradient(circle, var(--cyan), transparent 70%); animation-delay:-10s; }
@keyframes drift{ from{ transform:translate3d(0,0,0) scale(1);} to{ transform:translate3d(2.5vw,-3.5vh,0) scale(1.1);} }

a{ color:inherit; }
:focus-visible{ outline:1px solid var(--cyan); outline-offset:3px; border-radius:6px; }

/* ---------- top bar + Wortmarke (wie Logo: ALL IN ONE / KI / SOLUTIONS) ---------- */
.topbar{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.brand{ display:flex; align-items:center; gap:12px; text-decoration:none; }
.brand .mark{ width:26px; height:26px; flex:none; border-radius:7px; box-shadow:0 0 16px rgba(56,225,255,.28); }
.brand .word{ display:flex; align-items:baseline; gap:.55em; font-family:var(--disp); font-size:12px; text-transform:uppercase; white-space:nowrap; }
.brand .w1{ font-weight:700; letter-spacing:.12em;
  background:linear-gradient(180deg,#ffffff 0%,#dfe7f2 55%,#9fb0c6 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.brand .w2{ font-weight:700; letter-spacing:.12em;
  background:linear-gradient(90deg,#38e1ff,#1f8bff); -webkit-background-clip:text; background-clip:text; color:transparent; }
.brand .w3{ font-weight:300; letter-spacing:.34em; color:var(--bone); }
.brand .short{ display:none; font-family:var(--disp); font-weight:700; font-size:12px; letter-spacing:.3em; color:var(--bone); }

.pillnav{ display:flex; align-items:center; border:1px solid var(--hair); border-radius:999px; padding:7px 16px; }
.pillnav a{ font-size:11px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--bone); text-decoration:none; transition:color .2s ease; }
.pillnav a[aria-current="page"]{ color:var(--cyan); }
.pillnav .conn{ width:26px; height:1px; background:rgba(255,255,255,.5); margin:0 14px; }
@media (hover:hover){ .pillnav a:hover{ color:var(--cyan); } }

/* ---------- Typo ---------- */
.eyebrow{ font-size:11px; letter-spacing:.46em; color:var(--cyan); text-transform:uppercase; font-weight:600; }
h1{ font-family:var(--disp); font-weight:200; font-size:clamp(40px,6vw,84px); line-height:.95; letter-spacing:-0.04em; margin-top:18px;
  text-shadow:0 0 38px rgba(170,210,255,0.22), 0 0 90px rgba(128,82,255,0.16); }
.lead{ font-family:var(--serif); font-size:18px; line-height:1.7; color:var(--ash); margin-top:26px; max-width:30em; }
.lead b{ color:#fff; font-weight:500; }

/* ---------- Glas-Panel ---------- */
.panel{ position:relative; padding:clamp(22px,3vw,36px); border-radius:24px; border:1px solid var(--hair);
  background:rgba(10,12,20,.55); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  box-shadow:0 0 0 1px rgba(56,225,255,.05), 0 0 60px rgba(56,225,255,.06); }
.panel-label{ font-size:10.5px; letter-spacing:.36em; text-transform:uppercase; color:var(--cyan); padding-bottom:14px; margin-bottom:24px; border-bottom:1px solid var(--hair); display:flex; justify-content:space-between; }
.panel-label i{ font-style:normal; color:var(--smoke); letter-spacing:.2em; }

/* ---------- Footer ---------- */
footer{ width:100%; max-width:1180px; margin:0 auto; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding-top:18px; border-top:1px solid var(--hair); font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--smoke); }
footer nav{ display:flex; gap:22px; }
footer a{ text-decoration:none; }
footer a[aria-current="page"]{ color:var(--cyan); }
@media (hover:hover){ footer a:hover{ color:var(--cyan); } }

/* ---------- responsive ---------- */
@media (max-width:767px){
  body{ padding:calc(20px + env(safe-area-inset-top)) calc(16px + env(safe-area-inset-right)) calc(20px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left)); }
  .brand .word{ display:none; } .brand .short{ display:inline; }
  .brand .mark{ width:24px; height:24px; }
  .pillnav{ padding:7px 14px; } .pillnav a{ font-size:10.5px; letter-spacing:.16em; } .pillnav .conn{ width:14px; margin:0 10px; }
  .eyebrow{ font-size:9.5px; letter-spacing:.3em; }
  .lead{ font-size:16px; }
  footer{ justify-content:center; text-align:center; }
}
@media (prefers-reduced-motion: reduce){ .blob{ animation:none; } *{ transition:none !important; } }