/* =====================================================================
   AIQEN Design System — Master Stylesheet
   aiqen.de · Netlify Static

   Klassen-System:
   - Präfix:  aiqen-  (alle Komponenten)
   - Tokens:  CSS Custom Properties in :root (kein Präfix)

   Regel: KEINE neuen Klassen außerhalb dieses Systems.
   ===================================================================== */

/* ==========================================================================
   1. TOKENS
   ========================================================================== */
:root {
  --white:    #FFFFFF;
  --bone:     #F7F8FA;
  --mist:     #E3E8F0;
  --steel:    #4B6BFB;
  --ink:      #0B1220;
  --gold:     #C8A96B;

  --ink-80:   #2B3346;
  --ink-60:   #545C70;
  --ink-40:   #8A91A3;
  --hair:     #E7EAF1;

  --serif:  'Source Serif 4', 'Georgia', 'Times New Roman', serif;
  --sans:   'Inter Tight', -apple-system, 'Segoe UI', sans-serif;
  --mono:   ui-monospace, 'SF Mono', 'Consolas', monospace;

  --max:     980px;
  --gutter:  40px;

  --ease:    cubic-bezier(.22,.61,.36,1);
}

/* ==========================================================================
   2. RESET
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  background: var(--ink);
  color: var(--white);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  height: 100%;
}
body { font-size: 16px; line-height: 1.55; }
a    { color: inherit; text-decoration: none; }

/* ==========================================================================
   3. LAYOUT
   ========================================================================== */
.aiqen-container {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ==========================================================================
   4. SPLASH — Coming-Soon Hero
   ========================================================================== */
.aiqen-splash {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 96px 0 64px;
}

.aiqen-mark {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 4px;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 28px;
}

.aiqen-wordmark {
  font-family: var(--serif);
  font-size: clamp(48px, 9vw, 96px);
  font-weight: 600;
  letter-spacing: -1px;
  line-height: 1;
  margin-bottom: 20px;
}

.aiqen-wordmark em {
  font-style: italic;
  color: var(--steel);
}

.aiqen-claim {
  font-size: clamp(16px, 2.4vw, 20px);
  color: var(--ink-40);
  max-width: 560px;
  margin: 0 auto 44px;
}

.aiqen-status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ink-40);
  border: 1px solid var(--ink-80);
  border-radius: 999px;
  padding: 10px 20px;
}

.aiqen-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 4px rgba(200,169,107,.18);
}

/* ==========================================================================
   5. HEADER
   ========================================================================== */
.aiqen-hdr {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(11,18,32,.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.aiqen-hdr-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 0;
}

.aiqen-logo {
  font-family: var(--serif);
  font-size: 16px;
  letter-spacing: 1px;
  color: var(--gold);
  text-transform: uppercase;
}

.aiqen-nav {
  display: flex;
  gap: 32px;
  font-size: 13px;
  color: var(--ink-40);
}

.aiqen-nav a:hover { color: var(--white); }

/* ==========================================================================
   6. PROJEKTE — Steckbrief-Karten
   ========================================================================== */
.aiqen-section {
  padding: 72px 0;
  border-top: 1px solid rgba(255,255,255,.08);
}

.aiqen-section-title {
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  color: var(--white);
  margin-bottom: 28px;
}

.aiqen-projects {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.aiqen-project {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 6px;
  padding: 28px 32px;
}

.aiqen-project-cat {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 10px;
}

.aiqen-project-name {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 12px;
}

.aiqen-project-desc {
  font-size: 14px;
  color: var(--ink-40);
  line-height: 1.6;
  max-width: 640px;
  margin-bottom: 20px;
}

.aiqen-project-stats {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
}

.aiqen-project-stat-num {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 600;
  color: var(--white);
}

.aiqen-project-stat-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ink-40);
  margin-top: 2px;
}

.aiqen-project-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .5px;
  color: var(--steel);
  cursor: pointer;
  list-style: none;
  margin-top: 20px;
}

.aiqen-project-toggle::-webkit-details-marker { display: none; }

.aiqen-project-toggle::after {
  content: '+ Deep-Dive';
}

details[open] .aiqen-project-toggle::after {
  content: '– Deep-Dive schließen';
}

.aiqen-project-deepdive {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,.08);
  font-size: 13.5px;
  color: var(--ink-40);
  line-height: 1.65;
  max-width: 640px;
}

.aiqen-project-deepdive strong { color: var(--white); }

/* ==========================================================================
   6b. PROJEKTE — Kompakte Liste (kleinere Tools & Kondensate)
   ========================================================================== */
.aiqen-more-title {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ink-40);
  margin: 40px 0 16px;
}

.aiqen-more-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: rgba(255,255,255,.06);
}

.aiqen-more-row {
  background: var(--ink);
  display: flex;
  gap: 16px;
  align-items: baseline;
  padding: 13px 4px;
}

.aiqen-more-name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--white);
  flex-shrink: 0;
  width: 220px;
}

.aiqen-more-desc {
  font-size: 12.5px;
  color: var(--ink-40);
  line-height: 1.5;
  flex: 1;
}

/* ==========================================================================
   7. AI-NEWS
   ========================================================================== */
.aiqen-news {
  display: flex;
  flex-direction: column;
}

.aiqen-news-entry {
  display: flex;
  gap: 24px;
  padding: 22px 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.aiqen-news-entry:last-child { border-bottom: none; }

.aiqen-news-date {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--gold);
  width: 88px;
  flex-shrink: 0;
  padding-top: 2px;
}

.aiqen-news-title {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 6px;
}

.aiqen-news-desc {
  font-size: 13px;
  color: var(--ink-40);
  line-height: 1.55;
  max-width: 560px;
}

/* ==========================================================================
   8. FOOTER
   ========================================================================== */
.aiqen-ftr {
  padding: 40px 0;
  text-align: center;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--ink-60);
  border-top: 1px solid rgba(255,255,255,.08);
}

/* ==========================================================================
   9. RESPONSIVE
   ========================================================================== */
@media (max-width: 560px) {
  .aiqen-container { padding: 0 24px; }
  .aiqen-nav { gap: 18px; font-size: 12px; }
  .aiqen-project { padding: 22px 20px; }
  .aiqen-project-stats { gap: 20px; }
  .aiqen-news-entry { flex-direction: column; gap: 6px; }
  .aiqen-news-date { width: auto; }
  .aiqen-more-row { flex-direction: column; gap: 3px; }
  .aiqen-more-name { width: auto; }
}