/* ============================================================
   K.A.I. — BRAND DESIGN SYSTEM  (kai-brand.css)
   Version 1.0 · Stand 2026-06-09
   Quelle der Wahrheit: 00 Kontext/K.A.I. Corporate Identity.md
   Marken-Gefühl: Dark Luxury · Premium · Chrome · Vertrauen
   EINBINDEN:  <link rel="stylesheet" href="https://check.srv1610696.hstgr.cloud/assets/kai-brand.css">
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700;800&display=swap');

:root {
  /* --- CI Farben (exakt) --- */
  --kai-black:        #000000;   /* Hintergrund */
  --kai-surface:      #0c0c0c;   /* Karten */
  --kai-surface-2:    #141414;   /* erhöhte Flächen */
  --kai-border:       #242424;
  --kai-border-2:     #2e2e2e;

  --kai-white:        #FFFFFF;   /* Chrome Highlight */
  --kai-chrome:       #C8C8C8;   /* Chrome Silber (Haupt) */
  --kai-chrome-light: #E8E8E8;   /* Chrome hell */
  --kai-chrome-mid:   #A0A0A0;   /* Chrome Mitte */
  --kai-chrome-dark:  #606060;   /* Chrome Schatten */

  --kai-text:         #f5f5f5;
  --kai-text-dim:     #9a9a9a;
  --kai-text-faint:   #5a5a5a;

  --kai-green:        #22c55e;
  --kai-red:          #ef4444;
  --kai-amber:        #f59e0b;

  /* --- Typografie --- */
  --kai-font-head: 'Oswald', 'Bebas Neue', Impact, system-ui, sans-serif;
  --kai-font-body: 'Inter', 'Helvetica Neue', system-ui, sans-serif;

  /* --- Spacing (8px Basis) --- */
  --kai-s1: 8px; --kai-s2: 16px; --kai-s3: 24px; --kai-s4: 32px; --kai-s5: 48px; --kai-s6: 64px;
  --kai-radius: 14px;

  /* --- Chrome Gradient (CI Signature) --- */
  --kai-chrome-gradient: linear-gradient(180deg,#FFFFFF 0%,#E8E8E8 15%,#A0A0A0 40%,#606060 55%,#A0A0A0 75%,#E8E8E8 100%);
}

/* ===== BASIS ===== */
.kai, .kai * { box-sizing: border-box; }
html { background: var(--kai-black); }
.kai {
  background: var(--kai-black);
  color: var(--kai-text);
  font-family: var(--kai-font-body);
  -webkit-font-smoothing: antialiased;
  line-height: 1.55;
  min-height: 100vh;
}

/* ===== CHROME-TEXT (Signature-Effekt) ===== */
.kai-chrome-text {
  background: var(--kai-chrome-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-family: var(--kai-font-head);
  letter-spacing: .03em;
  text-shadow: 0 1px 0 rgba(255,255,255,.06);
}

/* ===== CHROME-TRENNLINIE (CI) ===== */
.kai-chrome-divider {
  height: 2px; border: 0; margin: var(--kai-s3) auto;
  width: 100%; max-width: 420px;
  background: linear-gradient(90deg, transparent 0%, var(--kai-chrome-dark) 20%, var(--kai-chrome-light) 50%, var(--kai-chrome-dark) 80%, transparent 100%);
  position: relative;
}
.kai-chrome-divider::after {
  content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:6px; height:6px; border-radius:50%;
  background: var(--kai-white); box-shadow: 0 0 8px 2px rgba(255,255,255,.5);
}

/* ===== TYPOGRAFIE ===== */
.kai-h1 { font-family: var(--kai-font-head); font-weight:700; font-size: clamp(34px, 6vw, 72px); line-height:1.05; letter-spacing:.01em; color: var(--kai-white); text-transform: uppercase; }
.kai-h2 { font-family: var(--kai-font-head); font-weight:700; font-size: clamp(26px, 4vw, 48px); line-height:1.1;  letter-spacing:.01em; color: var(--kai-white); text-transform: uppercase; }
.kai-h3 { font-family: var(--kai-font-head); font-weight:600; font-size: clamp(20px, 3vw, 30px); color: var(--kai-text); }
.kai-sub { font-size: clamp(17px,2vw,24px); color: var(--kai-chrome); font-weight:400; }
.kai-body { font-size: 17px; color: var(--kai-chrome-light); }
.kai-caption { font-size: 13px; color: var(--kai-chrome-mid); letter-spacing:.04em; }

/* ===== LOGO-HEADER (echtes Chrome-Logo) ===== */
.kai-logo-header { display:flex; align-items:center; justify-content:center; padding: var(--kai-s4) 0 var(--kai-s2); }
.kai-logo-header img { height: 150px; width:auto; max-width:94%; display:block; filter: drop-shadow(0 8px 36px rgba(255,255,255,.12)); }
@media (max-width:600px){ .kai-logo-header img{ height:100px; } }

/* ===== KARTEN ===== */
.kai-card {
  background: var(--kai-surface);
  border: 1px solid var(--kai-border);
  border-radius: var(--kai-radius);
  padding: var(--kai-s4);
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 8px 40px rgba(0,0,0,.6);
}

/* ===== BUTTONS ===== */
.kai-btn {
  font-family: var(--kai-font-body); font-weight:600; font-size:16px;
  border-radius: 10px; padding: 14px 26px; cursor:pointer; border:1px solid transparent;
  transition: transform .12s ease, background .12s ease, box-shadow .12s ease;
}
.kai-btn-primary {
  background: var(--kai-chrome-gradient); color:#0a0a0a;
  box-shadow: 0 4px 18px rgba(200,200,200,.18);
}
.kai-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 24px rgba(232,232,232,.28); }
.kai-btn-ghost { background: transparent; color: var(--kai-chrome); border-color: var(--kai-border-2); }
.kai-btn-ghost:hover { border-color: var(--kai-chrome); color: var(--kai-chrome-light); }
.kai-btn:disabled { opacity:.4; cursor:not-allowed; transform:none; }

/* ===== AMPEL / STATUS ===== */
.kai-status { display:inline-flex; align-items:center; gap:8px; font-family:var(--kai-font-head); letter-spacing:.04em; text-transform:uppercase; font-size:15px; }
.kai-status::before { content:''; width:10px; height:10px; border-radius:50%; }
.kai-status.kritisch::before { background: var(--kai-red);   box-shadow:0 0 10px var(--kai-red); }
.kai-status.fast::before     { background: var(--kai-amber); box-shadow:0 0 10px var(--kai-amber); }
.kai-status.bereit::before   { background: var(--kai-green); box-shadow:0 0 10px var(--kai-green); }

/* ===== HINTERGRUND-VEREDELUNG (subtiler Chrome-Schimmer) ===== */
.kai-bg-luxury {
  background:
    radial-gradient(900px 500px at 50% -10%, rgba(232,232,232,.06), transparent 60%),
    var(--kai-black);
  background-attachment: fixed;
  background-repeat: no-repeat;
}