/*
  styles.css – Space UI Stylesheet für kacmaz.cloud
  --------------------------------------------------
  Verwendet von:
  - index.php (Root-Startseite + Login)
  - 404.php (Lost in Space + Login)
  - control.php (Sky Control Console – Layout in control.css)
  - impressum.php
  - datenschutz.php
  - test.php (UI + Sky Test)

  ==================================================
  Space UI Design Contract – CSS Implementation
  --------------------------------------------------
  Version: v0.5.2 (PATCH)
  Last update: 2025-12-13

  Contract Highlights:
  - Kein klassischer Website-Header (Navigation/Branding-Zeile) im Public View.
  - HUD-Elemente dürfen frei im Viewport verankert sein (Ecken/Ränder/Floating).
  - Canvas-Sky bleibt fixed; Content scrollt darüber.
  - Minimaler Viewport-Footer (nur Legal-Links) ist erlaubt.
  - UI ist „nicht markierbar / nicht kopierbar“ (Whitelist für Inputs/Forms).
  - #openLogin ist ein abstrakter Trigger (Badge/HUD/Icon/Textfragment) – kein Button-Typ.
  - Login-Trigger ist page-spezifisch: Index = "Private Zone" Badge,
    404 = Emoji/Satellite-Button (dezent, hit-area + halo).
  ==================================================
*/

/* =============================================================================
   1) DESIGN TOKENS / ROOT VARS
   -----------------------------------------------------------------------------
   - Alle globalen Farben, Glas-/Shadow-Parameter, Abstände und Z-Index Tuning.
   - JS (Sky/Canvas) kann einige Tokens lesen (Density/Boost).
   ========================================================================== */

:root {
  /* Colors */
  --bg-0: #020617;
  --bg-1: #0b1224;
  --bg-2: #0f172a;

  /* Glass */
  --glass: rgba(2, 6, 23, 0.34);
  --glass-strong: rgba(2, 6, 23, 0.52);

  /* Panel tuning (make starfield more visible through panels) */
  --page-card-bg: rgba(2, 6, 23, 0.02); /* overall card glass alpha */
  --page-card-blur: 5px; /* blur strength for main card */

  /* Login badge sizing */
  --login-badge-minw: 132px; /* keeps text swap centered */
  --login-badge-pad: 6px 12px;

  /* Toggle (minimize) button */
  --toggle-size: 20px;
  --toggle-icon-size: 14px;

  /* Borders */
  --border: rgba(148, 163, 184, 0.18);
  --border-2: rgba(148, 163, 184, 0.28);

  /* Text */
  --text: #e5e7eb;
  --text-2: #cbd5e1;
  --muted: rgba(148, 163, 184, 0.85);

  /* Accents / States */
  --accent: #22c55e;
  --accent-2: #38bdf8;
  --danger: #f87171;
  --warn: #fbbf24;

  /* Shadows */
  --shadow: 0 18px 55px rgba(0, 0, 0, 0.62);
  --shadow-soft: 0 10px 28px rgba(0, 0, 0, 0.38);

  /* Radii */
  --radius: 18px;
  --radius-sm: 12px;

  /* Layout */
  --content-max: 980px;

  /* Sky controls (tweakable; used by JS/Canvas if supported) */
  --drift-density: 1.0; /* 1.0 = current, 2.0 = double, 0.5 = half */
  --static-density: 1.0;
  --sky-twinkle-boost: 1.0;
  --sky-flash-boost: 1.0;

  /* HUD / Footer layering */
  --hud-z: 65;
  --footer-z: 50;

  /* Beacon/Card positioning */
  --beacon-top: clamp(8vh, 12vh, 18vh); /* cards live in upper third */
  --beacon-gap: 14px;

  /* Login trigger feedback */
  --login-idle-opacity: 0.72;
  --login-hot-opacity: 0.98;

  /* Minimize / Dock */
  --dock-x: 14px;
  --dock-y: 14px;
  --dock-scale: 0.92;
}

/* =============================================================================
   2) RESET / BASE BEHAVIOR
   -----------------------------------------------------------------------------
   - Box-model reset
   - Global „no selection“ (whitelist for inputs/forms)
   ========================================================================== */

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

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

/* This is not a website: prevent accidental selection/copy UI-wide */
body {
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  color: var(--text);
  background: #000;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;

  /* Stable stacking context so sky layers behave consistently across browsers */
  position: relative;
  isolation: isolate;
}

/* Allow interaction/selection where it must work (forms) */
input,
textarea,
select,
option,
button {
  -webkit-user-select: auto;
  user-select: auto;
}

/* Keep the login trigger clickable even with global non-selection */
#openLogin,
#openLogin * {
  -webkit-user-select: none;
  user-select: none;
}

/* Optional future whitelist for explicitly copyable areas */
.is-copyable,
.is-copyable * {
  -webkit-user-select: text;
  user-select: text;
}

/* =============================================================================
   3) SKY LAYERS (BACKGROUND + CANVAS)
   -----------------------------------------------------------------------------
   - body::before = fixed sky gradient (no tiling)
   - .sky-canvas  = fixed canvas layer above body::before
   ========================================================================== */

/* ===== Fixed sky base (no tiling) ======================================= */

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;

  /* “Blick in den Himmel”: feststehend, kein Tiling */
  background: 
    radial-gradient(900px 420px at 16% -12%, rgba(56, 189, 248, 0.13), transparent 60%),
    radial-gradient(900px 520px at 92% 0%, rgba(34, 197, 94, 0.12), transparent 62%),
    radial-gradient(circle at top, var(--bg-2) 0, #000 60%, var(--bg-0) 100%);
  background-repeat: no-repeat;
}

/* NEW: noise/dither layer to kill Safari “waves” */
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:1;            /* above gradient, below canvas/content */
  pointer-events:none;

  /* tiny SVG noise (data-uri) */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
  background-size: 220px 220px;
  opacity: 0.06;        /* tune: 0.03–0.08 */
  mix-blend-mode: soft-light; /* nice on dark skies */
}

/* ===== Canvas Sky ======================================================= */

.sky-canvas {
  position: fixed;
  inset: 0;
  z-index: 1; /* above body::before, below content */
  pointer-events: none;
  width: 100%;
  height: 100%;
  display: block;

  /* verhindert iOS „jitter“ durch Layout-Repaints */
  transform: translateZ(0);
  contain: layout paint size style;
}

@media (prefers-reduced-motion: reduce) {
  .sky-canvas {
    display: none;
  }
}

/* =============================================================================
   4) GLOBAL ELEMENT DEFAULTS
   -----------------------------------------------------------------------------
   - Links/Focus
   - Modal Lock (html/body.modal-open)
   ========================================================================== */

img,
svg,
canvas {
  max-width: 100%;
}

a {
  color: var(--accent);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

a:hover {
  text-decoration: underline;
}

:focus-visible {
  outline: 2px solid rgba(56, 189, 248, 0.95);
  outline-offset: 3px;
}

html.modal-open,
body.modal-open {
  overflow: hidden;
}

/* =============================================================================
   5) LAYOUT SHELL
   -----------------------------------------------------------------------------
   - .page = global document shell
   - .app-root / .main-shell = centered content container
   - page modifiers for beacon positioning and 404 centering
   ========================================================================== */

.page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 22px 16px;
  padding-bottom: 70px; /* space for fixed viewport footer */
  position: relative;
  z-index: 2;
}

.app-root {
  width: 100%;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.main-shell {
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

/* Beacon positioning: cards should live in the upper third */
.page--home .main-shell,
.page--404 .main-shell {
  display: flex;
  justify-content: flex-start;
}

.page--home .page-card,
.page--404 .error-card {
  margin-top: var(--beacon-top);
}

/* ===== 404 layout override: center it properly ========================= */

.page--404 .main-shell {
  width: 100%;
  display: flex;
  justify-content: center; /* override flex-start from beacon block */
}

.page--404 .error-card {
  margin-top: 0; /* 404 should not use beacon-top offset */
}

/* center error pages */
.page--404,
.page--error {
  align-items: center;
  justify-content: center;
}

/* =============================================================================
   6) TYPOGRAPHY
   -----------------------------------------------------------------------------
   - Base heading sizing
   - Paragraph/list base styles + muted/strong helpers
   ========================================================================== */

h1,
h2 {
  margin: 0;
}

h1 {
  font-size: clamp(1.45rem, 1.05rem + 1.2vw, 2rem);
  letter-spacing: -0.02em;
  line-height: 1.15;
}

h2 {
  font-size: 1.05rem;
  margin-top: 0;
}

p,
li {
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--text-2);
}

p {
  margin: 0 0 10px;
}

ul {
  margin: 0 0 10px 1.1rem;
  padding: 0;
}

.muted {
  color: var(--muted);
}

.strong {
  font-weight: 650;
  color: var(--text);
}

/* =============================================================================
   7) PANELS / CARDS (LIQUID GLASS)
   -----------------------------------------------------------------------------
   - Base: .card / .page-card / .error-card
   - Beacon card tuning
   - Index minimize/dock mode
   - Generic card elements (toggle / eyebrow / header/body)
   ========================================================================== */

/* Base card surface */
.card,
.page-card,
.error-card {
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  background: var(--glass); /* default glass */
  backdrop-filter: blur(14px);
}

/* Main beacon card should be more see-through than the default */
.page-card {
  background: var(--page-card-bg);
  backdrop-filter: blur(var(--page-card-blur));
}

/* Generic content card (rare; mostly beacon/error are used) */
.card {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 24px 20px 20px;
}

/* Beacon card (home) */
.page-card {
  width: 100%;
  max-width: 640px; /* Option A: „beacon“, not huge */
  margin: 0 auto;
  padding: 20px 18px 16px;

  position: relative;

  display: flex;
  flex-direction: column;
  gap: var(--beacon-gap);

  transition: transform 260ms ease, opacity 220ms ease, filter 260ms ease;
  will-change: transform;
}

/* 404 error card (more explicit framing) */
.error-card {
  width: 100%;
  max-width: 520px;
  padding: 24px 20px;
  text-align: center;

  /* softer + clearer than default cards */
  background: radial-gradient(800px 220px at 50% 0%, rgba(56, 189, 248, 0.1), transparent 60%),
    radial-gradient(800px 260px at 50% 120%, rgba(34, 197, 94, 0.08), transparent 62%),
    rgba(2, 6, 23, 0.18);

  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: calc(var(--radius) + 2px);

  /* lighter shadow; less “blocky” */
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.42), 0 0 0 1px rgba(148, 163, 184, 0.06) inset;

  backdrop-filter: blur(10px);
}

/* -----------------------------
   Minimize/Dock mode (index)
   ----------------------------- */

/* Minimize/dock hooks (index only; markup/JS will toggle these) */
.page--home .page-card.is-minimized {
  position: fixed;
  left: var(--dock-x);
  top: var(--dock-y);

  margin: 0; 
  right: auto; 

  /* keep it below HUD but above normal content */
  z-index: calc(var(--hud-z) - 1);

  transform: scale(var(--dock-scale));
  transform-origin: top left;

  filter: blur(0);
  opacity: 0.98;
}

/* Minimized = compact dock chip with status line + maximize hint */
.page--home .page-card.is-minimized {
  /* override “full card” sizing so it doesn't look like an empty panel */
  max-width: 360px;
  width: auto;
  padding: 10px 8px 10px 12px; /* tighter on the right so the icon sits near the corner */
  gap: 0;

  /* become a single-row dock element */
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  overflow: hidden; /* allow the label to truncate instead of pushing the icon */

  cursor: pointer;

  /* slightly stronger glass for readability in the corner */
  background: radial-gradient(520px 160px at 18% 0%, rgba(56, 189, 248, 0.08), transparent 60%),
    rgba(2, 6, 23, 0.3);
  backdrop-filter: blur(12px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.34), 0 0 0 1px rgba(148, 163, 184, 0.06) inset;
}

/* Dock label (monospace status line) */
.page--home .page-card.is-minimized::before {
  content: "> status: no public content";
  display: block;

  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
    "Courier New", monospace;
  font-size: 0.86rem;
  line-height: 1.2;
  letter-spacing: 0.02em;

  color: transparent;
  background: linear-gradient(
    90deg,
    rgba(248, 113, 113, 0.98) 0,
    rgba(248, 113, 113, 0.98) 9.5ch,
    rgba(56, 189, 248, 0.95) 9.5ch,
    rgba(56, 189, 248, 0.95) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  opacity: 0.95;

  white-space: nowrap;
  max-width: calc(100% - 30px);
  overflow: hidden;
  text-overflow: ellipsis;
}

/* “maximize” hint icon on the right */
.page--home .page-card.is-minimized::after {
  content: "▴";
  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* match the real toggle button proportions */
  width: var(--toggle-size);
  height: var(--toggle-size);
  border-radius: 999px;

  margin-left: 14px;
  flex: 0 0 auto;

  border: 1px solid rgba(148, 163, 184, 0.14);
  background: rgba(2, 6, 23, 0.22);
  color: rgba(226, 232, 240, 0.92);

  box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.05) inset, 0 10px 22px rgba(0, 0, 0, 0.16);

  /* center glyph crisply */
  font-size: var(--toggle-icon-size);
  line-height: 1;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
    "Courier New", monospace;
  transform: translateY(-0.5px);

  opacity: 0.92;
  transition: transform 180ms ease, opacity 160ms ease, box-shadow 200ms ease, filter 200ms ease;
}

/* Hover/focus glow for the dock chip (project look & feel) */
.page--home .page-card.is-minimized:hover,
.page--home .page-card.is-minimized:focus-within {
  box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.1) inset, 0 0 18px rgba(56, 189, 248, 0.1),
    0 10px 28px rgba(0, 0, 0, 0.34);
}

.page--home .page-card.is-minimized:hover::after,
.page--home .page-card.is-minimized:focus-within::after {
  opacity: 1;
  transform: translateY(-1px);
  filter: drop-shadow(0 0 14px rgba(56, 189, 248, 0.1));
  box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.1) inset, 0 0 18px rgba(56, 189, 248, 0.12),
    0 10px 22px rgba(0, 0, 0, 0.16);
}

/* Hide full-card internals when minimized */
.page--home .page-card.is-minimized .card-body,
.page--home .page-card.is-minimized .card-header {
  display: none;
}


/* Dock “handle” (optional element inside card header) */
.card-toggle {
  position: absolute;
  top: 14px;
  right: 14px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: var(--toggle-size);
  height: var(--toggle-size);
  border-radius: 999px;

  border: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(2, 6, 23, 0.22);
  color: rgba(226, 232, 240, 0.92);

  cursor: pointer;
  transition: background 180ms ease, opacity 180ms ease, filter 200ms ease;
}

.card-toggle > * {
  font-size: var(--toggle-icon-size);
  line-height: 1;
}

.card-toggle:hover {
  background: rgba(15, 23, 42, 0.34);
  filter: drop-shadow(0 0 12px rgba(56, 189, 248, 0.08));
}

.card-toggle:active {
  /* no movement; keep it calm */
  opacity: 0.92;
}

/* Eyebrow / Badge-like labels */
.card-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(148, 163, 184, 0.95);
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(15, 23, 42, 0.45);
  margin-bottom: 10px;
}

/* Optional eyebrow modifiers (used as needed; markup decides) */
.card-eyebrow--warn {
  border-color: rgba(248, 113, 113, 0.22);
  background: rgba(248, 113, 113, 0.08);
}

.card-eyebrow--info {
  border-color: rgba(56, 189, 248, 0.22);
  background: rgba(56, 189, 248, 0.08);
}

.card-header {
  margin: 0;
}

.card-body {
  margin: 0;
}

/* =============================================================================
   8) BUTTONS (COMPAT)
   -----------------------------------------------------------------------------
   - Kept for legacy markup + modal submit button
   - HUD-first UI: Buttons should stay calm, no loud animations
   ========================================================================== */

.btn,
.login-btn,
.modal button[type="submit"] {
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.btn,
.login-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border-radius: 12px;
  border: 1px solid var(--border-2);
  background: rgba(15, 23, 42, 0.7);
  color: var(--text);
  font-size: 0.9rem;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 120ms ease, background 180ms ease, border-color 180ms ease,
    opacity 160ms ease;
}

.btn:hover,
.login-btn:hover {
  background: rgba(51, 65, 85, 0.5);
  border-color: rgba(148, 163, 184, 0.38);
}

.btn:active,
.login-btn:active {
  transform: translateY(1px);
}

.btn-icon {
  font-size: 0.75em;
  opacity: 0.85;
  color: var(--accent);
}

/* =============================================================================
   9) LOGIN TRIGGER (#openLogin) – ABSTRACT, PAGE-SPECIFIC
   -----------------------------------------------------------------------------
   - Index: badge (Private Zone -> Login) via .login-badge + 2 spans swap
   - 404  : emoji/satellite button via .error-icon rules (below)
   ========================================================================== */

#openLogin {
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  user-select: none;

  /* Common feedback: subtle "notice me" */
  opacity: var(--login-idle-opacity);
  transition: opacity 160ms ease, transform 220ms ease, filter 220ms ease;
}

#openLogin:hover,
#openLogin:focus-visible {
  opacity: var(--login-hot-opacity);
}

/* --- Variant A: Index badge trigger (Private Zone -> Login) -------------- */
/* Use on index: add class="card-eyebrow login-badge" to the existing badge,
   and keep id="openLogin". */

#openLogin.login-badge {
  display: grid;
  place-items: center;

  padding: var(--login-badge-pad);
  min-width: var(--login-badge-minw);
  border-radius: 999px;

  white-space: nowrap;

  /* consistent look for logged-out + logged-in */
  border: 1px solid rgba(248, 113, 113, 0.22);
  background: rgba(248, 113, 113, 0.08);
  color: rgba(226, 232, 240, 0.96);

  /* calm baseline glow */
  box-shadow: 0 0 0 1px rgba(248, 113, 113, 0.06) inset, 0 10px 28px rgba(0, 0, 0, 0.28);
}

#openLogin.login-badge:hover,
#openLogin.login-badge:focus-visible {
  box-shadow: 0 0 0 1px rgba(248, 113, 113, 0.14) inset, 0 0 16px rgba(248, 113, 113, 0.16),
    0 0 28px rgba(248, 113, 113, 0.1), 0 10px 28px rgba(0, 0, 0, 0.28);
}

/* Text swap: provide two spans in markup:
   <span class="login-label login-label--idle">Private Zone</span>
   <span class="login-label login-label--hot">Login</span>
*/
#openLogin.login-badge .login-label {
  grid-area: 1 / 1;
  display: inline-block;
  transition: opacity 180ms ease;
}

#openLogin.login-badge .login-label--hot {
  opacity: 0;
}

#openLogin.login-badge:hover .login-label--idle,
#openLogin.login-badge:focus-visible .login-label--idle {
  opacity: 0;
}

#openLogin.login-badge:hover .login-label--hot,
#openLogin.login-badge:focus-visible .login-label--hot {
  opacity: 1;
}

/* =============================================================================
   10) HUD (VIEWPORT-ANCHORED)
   -----------------------------------------------------------------------------
   - Fixed overlay, pointer-events gated
   - HUD panel with glass ticks + chips/links
   ========================================================================== */

.hud {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: var(--hud-z);
}

/* Enhanced Space HUD styles */
.hud-panel {
  position: absolute;
  left: 14px;
  top: 14px;

  max-width: min(420px, calc(100vw - 28px));
  padding: 10px 12px 12px;
  border-radius: 16px;

  /* liquid glass, but lighter to let stars shine through */
  border: 1px solid rgba(148, 163, 184, 0.16);
  background: radial-gradient(700px 220px at 18% 0%, rgba(56, 189, 248, 0.1), transparent 60%),
    radial-gradient(700px 260px at 92% 10%, rgba(34, 197, 94, 0.08), transparent 62%),
    repeating-linear-gradient(
      to bottom,
      rgba(226, 232, 240, 0.035) 0px,
      rgba(226, 232, 240, 0.035) 1px,
      transparent 1px,
      transparent 6px
    ),
    rgba(2, 6, 23, 0.22);

  backdrop-filter: blur(14px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.32), 0 0 0 1px rgba(148, 163, 184, 0.05) inset;

  pointer-events: auto;

  /* HUD vibe */
  letter-spacing: 0.01em;
}

/* corner ticks */
.hud-panel::before,
.hud-panel::after {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 12px;
  pointer-events: none;
}

.hud-panel::before {
  border: 1px solid rgba(56, 189, 248, 0.12);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  padding: 10px;
  opacity: 0.55;
}

.hud-panel::after {
  border: 1px dashed rgba(148, 163, 184, 0.1);
  opacity: 0.55;
}

.hud-title {
  display: flex;
  align-items: center;
  justify-content: space-between;

  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
    "Courier New", monospace;
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;

  color: rgba(148, 163, 184, 0.92);
  margin: 0 0 8px;

  padding-bottom: 8px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}

.hud-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 8px 0;
}

.hud-row + .hud-row {
  padding-top: 8px;
  border-top: 1px solid rgba(148, 163, 184, 0.1);
}

.hud-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 6px 10px;
  border-radius: 999px;

  border: 1px solid rgba(148, 163, 184, 0.16);
  background: rgba(2, 6, 23, 0.22);
  color: rgba(226, 232, 240, 0.94);

  font-size: 0.86rem;
  white-space: nowrap;

  box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.05) inset, 0 10px 22px rgba(0, 0, 0, 0.18);

  position: relative;
}

.hud-chip::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.55);
  box-shadow: 0 0 10px rgba(148, 163, 184, 0.12);
}

.hud-chip--ok::before {
  background: rgba(34, 197, 94, 0.92);
  box-shadow: 0 0 14px rgba(34, 197, 94, 0.22);
}

.hud-chip--warn::before {
  background: rgba(248, 113, 113, 0.92);
  box-shadow: 0 0 14px rgba(248, 113, 113, 0.18);
}

.hud-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 7px 11px;
  border-radius: 999px;

  border: 1px solid rgba(148, 163, 184, 0.16);
  background: rgba(2, 6, 23, 0.18);
  color: rgba(226, 232, 240, 0.92);
  text-decoration: none;

  font-size: 0.86rem;
  white-space: nowrap;
  pointer-events: auto;

  box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.04) inset, 0 10px 22px rgba(0, 0, 0, 0.16);

  transition: transform 160ms ease, border-color 180ms ease, background 180ms ease,
    box-shadow 200ms ease, filter 200ms ease, opacity 160ms ease;

  opacity: 0.92;
}

/* icon hint (purely decorative) */
.hud-link::before {
  content: "›";
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
    "Courier New", monospace;
  opacity: 0.75;
  transform: translateY(-0.5px);
}

.hud-link:hover,
.hud-link:focus-visible {
  opacity: 1;
  transform: translateY(-1px);

  border-color: rgba(56, 189, 248, 0.22);
  background: rgba(15, 23, 42, 0.26);

  box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.1) inset, 0 0 18px rgba(56, 189, 248, 0.12),
    0 10px 22px rgba(0, 0, 0, 0.16);

  filter: drop-shadow(0 0 14px rgba(56, 189, 248, 0.1));
}

.hud-link:active {
  transform: translateY(0);
  opacity: 0.98;
}

/* keep links calm: no underline on hover */
.hud-link:hover {
  text-decoration: none;
}

/* If existing auth/status elements are placed into HUD later */
.hud .info-key {
  margin: 0;
  border-color: rgba(34, 197, 94, 0.22);
  background: rgba(34, 197, 94, 0.08);
}

/* =============================================================================
   11) VIEWPORT FOOTER (LEGAL ONLY)
   -----------------------------------------------------------------------------
   - Fixed bottom bar (minimal)
   - Must stay above scrolling content and behind modal
   ========================================================================== */

/* Ensure HUD/footer are always above content panels */
.hud,
.site-footer {
  isolation: isolate;
}

.site-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;

  z-index: var(--footer-z);
  width: 100%;
  margin: 0;

  padding: 10px 14px;
  color: var(--muted);
  font-size: 0.88rem;

  background: rgba(2, 6, 23, 0.52);
  border-top: 1px solid rgba(148, 163, 184, 0.16);
  backdrop-filter: blur(10px);
}

.site-footer-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  text-align: center;
}

.site-footer-link {
  color: var(--muted);
}

.site-footer-link:hover {
  color: var(--text);
}

.footer-sep {
  color: rgba(148, 163, 184, 0.55);
}

/* =============================================================================
   12) INDEX / BEACON MODULES
   -----------------------------------------------------------------------------
   - .hero-message + status lines
   - info tiles grid
   ========================================================================== */

.hero-message {
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: radial-gradient(900px 220px at 12% 0%, rgba(56, 189, 248, 0.1), transparent 60%),
    radial-gradient(900px 260px at 92% 0%, rgba(34, 197, 94, 0.1), transparent 62%),
    rgba(15, 23, 42, 0.44);
  border-radius: var(--radius);
  padding: 16px 14px;
  box-shadow: var(--shadow-soft);
  margin-top: 2px;
}

.hero-line-top {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
    "Courier New", monospace;
  font-size: 0.9rem;
  color: rgba(148, 163, 184, 0.95);
  margin-bottom: 8px;
}

.status-label {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
    monospace;
  color: rgba(248, 113, 113, 0.98); /* identisch zum Private-Zone-Danger-Ton */
  margin-right: 6px;
  letter-spacing: 0.02em;
}

.info-value {
  color: var(--accent-2);
}

.hero-line-main {
  font-size: 1.05rem;
  color: var(--text);
  margin-top: 1rem;
}

.hero-line-sub {
  color: var(--text-2);
  margin-top: 1rem;
}

.info-columns {
  display: grid;
  gap: 12px;
  margin-top: 10px;
}

.info-tile {
  border-radius: var(--radius);
  border: 1px solid rgba(148, 163, 184, 0.16);
  background: radial-gradient(700px 200px at 20% 0%, rgba(56, 189, 248, 0.08), transparent 60%),
    rgba(15, 23, 42, 0.36);
  padding: 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.info-tile h2 {
  font-size: 1.02rem;
  margin-bottom: 6px;
  color: var(--text);
}

/* =============================================================================
   13) 404 / LOST IN SPACE
   -----------------------------------------------------------------------------
   - Icon styles for the emoji button (hit-area + halo, no outline through glyph)
   ========================================================================== */

.error-icon {
  font-size: 54px;
  margin-bottom: 10px;
  opacity: 0.92;
}

/* 404 login trigger is a BUTTON with id=openLogin and class=error-icon.
   Make the hit-area larger than the emoji and use a soft halo/glow highlight
   (no outline cutting through the satellite). */
.page--404 #openLogin.error-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* hit-area must be larger than the emoji glyph */
  width: 68px;
  height: 68px;
  border-radius: 999px;

  /* keep the emoji crisp */
  font-size: 54px;
  line-height: 1;

  /* remove native button styling */
  -webkit-appearance: none;
  appearance: none;
  background: transparent !important;
  border: 0;
  box-shadow: none !important;

  padding: 0;
  margin: 0 0 10px;
  cursor: pointer;

  opacity: var(--login-idle-opacity);

  /* allow layered effects */
  position: relative;
  isolation: isolate;

  transition: opacity 160ms ease, transform 220ms ease, filter 220ms ease;
}

/* Halo behind the icon (project-style, subtle) */
.page--404 #openLogin.error-icon::before {
  content: "";
  position: absolute;
  inset: -10px; /* halo extends beyond hit-area */
  border-radius: 999px;
  z-index: -1;

  background: radial-gradient(
    circle at 50% 50%,
    rgba(56, 189, 248, 0.18) 0%,
    rgba(56, 189, 248, 0.1) 35%,
    transparent 70%
  );
  opacity: 0;
  transform: scale(0.96);
  transition: opacity 180ms ease, transform 220ms ease;
}

/* Outer ring + soft glow (not an outline through the emoji) */
.page--404 #openLogin.error-icon::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 999px;
  z-index: -1;

  box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.2) inset, 0 0 22px rgba(56, 189, 248, 0.18),
    0 0 48px rgba(56, 189, 248, 0.1);

  opacity: 0;
  transform: scale(0.98);
  transition: opacity 180ms ease, transform 220ms ease;
}

.page--404 #openLogin.error-icon:hover,
.page--404 #openLogin.error-icon:focus-visible {
  opacity: var(--login-hot-opacity);
  transform: translateY(-1px);

  /* make the icon itself glow a bit */
  filter: drop-shadow(0 0 10px rgba(56, 189, 248, 0.22)) drop-shadow(0 0 18px rgba(56, 189, 248, 0.12));
}

.page--404 #openLogin.error-icon:hover::before,
.page--404 #openLogin.error-icon:focus-visible::before,
.page--404 #openLogin.error-icon:hover::after,
.page--404 #openLogin.error-icon:focus-visible::after {
  opacity: 1;
  transform: scale(1);
}

.page--404 #openLogin.error-icon:active {
  transform: translateY(0);
  filter: drop-shadow(0 0 8px rgba(56, 189, 248, 0.16));
}

.error-title {
  font-size: clamp(1.6rem, 1.15rem + 1.2vw, 2.1rem);
  font-weight: 650;
  margin-bottom: 10px;
  letter-spacing: -0.015em;
}

.error-sub {
  font-size: 1.02rem;
  margin-bottom: 18px;
  color: #cbd5e1;
}

/* =============================================================================
   14) LEGAL PAGES (CRAWL SUBSYSTEM – JS-DRIVEN)
   -----------------------------------------------------------------------------
   - No card/box: text flies over the existing sky/canvas.
   - Motion is applied by JS (requestAnimationFrame), CSS only provides stage.
   ========================================================================== */

.page--legal {
  /* legal pages should not introduce an extra “card/page” frame */
  overflow: hidden;
}

/* Full-viewport stage (no background, no blur, no fog) */
.page--legal .legal-stage {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: block;

  /* keep the crawl behind the fixed footer/HUD */
  z-index: 1;

  /* no padding/offset: text must enter from bottom of viewport */
  margin: 0;
  padding: 0;

  overflow: hidden;

  /* 3D context for JS transforms */
  perspective: 1100px;
  transform-style: preserve-3d;
}

/* Crawl viewport (container for the moving track) */
.page--legal .legal-crawl {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: auto;
}

/* The moving track (JS will transform this element) */
.page--legal .legal-track {
  position: absolute;
  left: 50%;
  bottom: 0;

  /* anchor near-plane at the bottom center */
  transform: translate3d(-50%, 0, 0);
  transform-style: preserve-3d;
  will-change: transform;

  /* Make sure it doesn't create a “box” */
  background: transparent;
}

/* Content block (and its clone) */
.page--legal .legal-content {
  /* near-plane width target */
  width: 70vw;
  max-width: 70vw;

  /* ensure readable line length but still responsive */
  min-width: min(70vw, 520px);

  box-sizing: border-box;
  margin: 0 auto;
  padding: 0;

  background: transparent;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
  filter: none;

  /* keep it crisp */
  backface-visibility: hidden;
}

/* The clone is identical; JS will fill it by copying innerHTML */
.page--legal .legal-content--clone {
  margin-top: 56px; /* gap between repetitions (tuned later if needed) */
}

html.js .page--legal .legal-content.legal-content--hidden {
  opacity: 0;
  visibility: hidden;
}

/* Interaction: pause-on-hover will be handled in JS by toggling a class. */
.page--legal.is-paused .legal-track {
  will-change: auto;
}

/* Reduced motion: no flyby. Make the content scrollable normally. */
@media (prefers-reduced-motion: reduce) {
  .page--legal {
    overflow: auto;
  }

  .page--legal .legal-stage {
    perspective: none;
    overflow: visible;
    padding: 24px 16px 90px; /* leave space for fixed footer */
  }

  .page--legal .legal-crawl,
  .page--legal .legal-track {
    position: static;
    inset: auto;
    transform: none !important;
    will-change: auto;
  }

  .page--legal .legal-content,
  .page--legal .legal-content--clone {
    width: min(900px, 92vw);
    max-width: 92vw;
    min-width: 0;
    margin: 0 auto;
  }

  .page--legal .legal-content--clone {
    display: none; /* no repetition in reduced motion */
  }
}

/* Legal typography (applies to both original + clone) */
.page--legal .legal-content h1 {
  margin: 0 0 12px;
}

.page--legal .legal-content p.muted {
  margin: 0 0 18px;
  color: rgba(148, 163, 184, 0.92);
}

.page--legal .legal-content h2 {
  margin: 22px 0 10px;
  padding-top: 18px;
  border-top: 1px solid rgba(148, 163, 184, 0.14);
  font-size: 1.05rem;
  line-height: 1.25;
  color: rgba(226, 232, 240, 0.96);
}

.page--legal .legal-content h2:first-of-type {
  margin-top: 10px;
  padding-top: 0;
  border-top: 0;
}

.page--legal .legal-content p {
  margin: 0 0 12px;
  color: rgba(203, 213, 225, 0.94);
}

.page--legal .legal-content p + p {
  margin-top: 6px;
}

.page--legal .legal-content ul {
  margin: 8px 0 14px 1.1rem;
}

.page--legal .legal-content li {
  margin: 0 0 6px;
  color: rgba(203, 213, 225, 0.94);
}

.page--legal .legal-content a {
  color: rgba(56, 189, 248, 0.95);
  text-decoration: none;
}

.page--legal .legal-content a:hover {
  text-decoration: underline;
}

.page--legal .legal-content strong {
  color: rgba(226, 232, 240, 0.98);
}

/* =============================================================================
   15) MODAL (LOGIN)
   -----------------------------------------------------------------------------
   - Overlay + dialog + inputs + submit + close button
   ========================================================================== */

.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.62);
  justify-content: center;
  align-items: center;
  padding: 18px;
  backdrop-filter: blur(3px);
  z-index: 2000;
}

.modal-overlay.active {
  display: flex;
  animation: kcFadeIn 120ms ease-out;
}

.modal {
  background: rgba(15, 23, 42, 0.9);
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 16px;
  padding: 22px 22px;
  width: 100%;
  max-width: 380px;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.6);
  position: relative;
}

.modal h2 {
  margin: 0 0 14px;
  font-size: 1.25rem;
  font-weight: 650;
  color: rgba(226, 232, 240, 0.98);
}

.modal label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.86rem;
  color: rgba(203, 213, 225, 0.95);
}

.modal input {
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(2, 6, 23, 0.55);
  border: 1px solid rgba(148, 163, 184, 0.26);
  color: rgba(226, 232, 240, 0.96);
  margin-bottom: 12px;
}

.modal button[type="submit"] {
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(34, 197, 94, 0.15);
  color: rgba(226, 232, 240, 0.98);
  border: 1px solid rgba(34, 197, 94, 0.35);
  cursor: pointer;
  transition: background 180ms ease, transform 120ms ease;
}

.modal button[type="submit"]:hover {
  background: rgba(34, 197, 94, 0.2);
}

.modal button[type="submit"]:active {
  transform: translateY(1px);
}

.modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
  font-size: 20px;
  opacity: 0.82;
  background: transparent;
  border: 0;
  color: rgba(226, 232, 240, 0.95);
  line-height: 1;
  padding: 8px;
  border-radius: 12px;
}

.modal-close:hover {
  opacity: 1;
  background: rgba(148, 163, 184, 0.08);
}

.error-msg {
  color: var(--danger);
  font-size: 0.9rem;
  margin: 0 0 12px;
}

@keyframes kcFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* =============================================================================
   16) RESPONSIVE
   -----------------------------------------------------------------------------
   - Desktop: 2-column info tiles
   - Small screens: tighten beacon + hide info tiles + compact HUD
   ========================================================================== */

@media (min-width: 860px) {
  .page {
    padding: 28px 22px;
    padding-bottom: 72px;
  }

  .info-columns {
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }
}

@media (max-width: 520px) {
  .page-card {
    padding: 18px 14px 16px;
    gap: 12px;
  }

  .card-toggle {
    top: 12px;
    right: 12px;
  }

  .hero-message {
    padding: 14px 12px;
  }

  /* On small screens: keep it lean, avoid “covering the sky” */
  .info-columns {
    display: none;
  }

  .hud-panel {
    left: 12px;
    top: 12px;
    padding: 9px 10px 10px;
  }
}