/* =====================================================================
   KI-FLUENCER — includes/base.css
   ---------------------------------------------------------------------
   Gemeinsame Design-Grundlage für ALLE Seiten (Sales-Funnel + Kursportal):
   Farben/Schriften (Tokens), Grund-Reset, Logo, Eyebrow-Badge, Topbar-
   Gerüst, .wrap-Zentrierung und das Footer-Gerüst. Wird von jeder Seite
   zuerst eingebunden (vor site.css bzw. kurs.css).

   Änderst du hier z.B. eine Farbe oder den Footer-Text, wirkt sich das
   automatisch auf ALLE Seiten aus — das war ja der Sinn der Umstellung.
   ===================================================================== */

:root{
  --void:#050710;
  --surface:#0b0e1c;
  --surface-2:#11142a;
  --line:#232848;
  --text:#eef0fb;
  --text-dim:#8d93b8;
  --text-faint:#5a6087;
  --cyan:#4cf3ff;
  --violet:#a15cff;
  --magenta:#ff3ec8;
  --glow-cyan: 0 0 40px rgba(76,243,255,.35);
  --glow-violet: 0 0 50px rgba(161,92,255,.35);
  --font-display:'Orbitron', 'Segoe UI', sans-serif;
  --font-body:'Sora', 'Segoe UI', sans-serif;
  --font-mono:'Space Mono', 'Courier New', monospace;
}

*{ box-sizing:border-box; }
/* overflow-x:hidden bislang nur auf der Sales Page (wegen Ticker/Hero) —
   hierher gezogen: als generelle Absicherung gegen ungewollten horizontalen
   Scroll unauffällig und für jede Seite sinnvoll. */
html{ margin:0; overflow-x:hidden; }
body{
  margin:0;
  background:var(--void);
  color:var(--text);
  font-family:var(--font-body);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{ color:inherit; }

/* ---------- Logo ---------- */
.logo{
  font-family:var(--font-display);
  font-size:16px;
  letter-spacing:.08em;
  display:flex; align-items:center; gap:8px;
  white-space:nowrap;
  text-decoration:none;
}
.logo .dot{
  width:8px;height:8px;border-radius:2px;
  background:linear-gradient(135deg,var(--cyan),var(--violet));
  box-shadow:0 0 12px var(--violet);
  flex:none;
}
.logo em{
  font-style:normal;
  background:linear-gradient(90deg,var(--cyan),var(--violet));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ---------- Eyebrow-Badge (kleines "PILL" über Überschriften) ---------- */
.eyebrow{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--cyan);
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.eyebrow::before{
  content:"";
  width:7px;height:7px;border-radius:50%;
  background:var(--cyan);
  box-shadow:0 0 10px var(--cyan);
}
/* Modifier: Eyebrow mittig statt linksbündig (z.B. auf zentrierten Karten-
   Seiten wie Bestätigung/Login) — einfach zusätzlich die Klasse "eyebrow--center"
   an den Eyebrow-<span> dranhängen. */
.eyebrow--center{ justify-content:center; width:100%; }

/* ---------- Topbar (Logo-Leiste oben, siehe includes/header.php) ---------- */
.topbar{
  border-bottom:1px solid var(--line);
}
/* Modifier: Topbar bleibt beim Scrollen oben kleben + abgedunkelter/
   verschwommener Hintergrund — wird von includes/header.php automatisch
   gesetzt, wenn die Seite vorher $topbarSticky = true; setzt (bisher nur
   die Sales-Page, weil die lang ist). */
.topbar--sticky{
  position:sticky; top:0; z-index:40;
  background:rgba(5,7,16,.72);
  backdrop-filter:blur(10px);
}
.topbar-inner{
  max-width:1120px; margin-inline:auto;
  padding:16px 20px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}

/* ---------- .wrap (zentrierter Inhalts-Container) ----------
   Nur die Zentrierung ist überall gleich — die maximale Breite und ein
   evtl. zusätzlicher Seitenabstand sind pro Seite unterschiedlich (siehe
   site.css / kurs.css). */
.wrap{ margin-inline:auto; }

/* ---------- Footer-Gerüst ---------- */
footer{ border-top:1px solid var(--line); }
footer a{ text-decoration:none; color:var(--text-faint); }
footer a:hover{ color:var(--cyan); }
/* "Breiter" Footer mit Copyright links + Links rechts (Sales Page,
   Kursportal) — siehe includes/footer.php ($footerStyle = 'full', Standard). */
.footer-inner{
  max-width:1120px; margin-inline:auto;
  padding-inline:20px;
  padding-block:36px 48px;
  display:flex; flex-wrap:wrap; gap:16px 28px;
  align-items:center; justify-content:space-between;
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--text-faint);
}
footer .links{ display:flex; gap:22px; flex-wrap:wrap; }