/* AIGIS Landing RC6 — Komponenten: Buttons, Karten, Chips, Dialoge, Slots. */

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:11px 20px; border-radius:11px; font-weight:800; font-size:14.5px;
  border:1px solid var(--line); background:var(--panel-2); color:var(--tx);
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
  text-decoration:none;
}
.btn:hover{ text-decoration:none; transform:translateY(-1px); }
.btn.pri{
  background:linear-gradient(135deg, var(--cy) 0%, var(--cy-deep) 100%);
  border-color:transparent; color:#04222B; box-shadow:var(--glow-cy);
}
:root[data-theme="light"] .btn.pri{ color:#FFFFFF; }
.btn.pri:hover{ box-shadow:0 0 34px rgba(56,211,238,.4); }
.btn.gho{ background:transparent; }
.btn.sm{ padding:8px 14px; font-size:13px; border-radius:9px; }

/* ── Kicker + Sektionstitel ─────────────────────────────────────────────── */
.kicker{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12px; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  color:var(--cy); margin-bottom:14px;
}
.kicker::before{ content:""; width:26px; height:2px; background:var(--cy); border-radius:2px; }
.sec-lead{ color:var(--mut); font-size:16.5px; max-width:820px; }

/* ── Karten ─────────────────────────────────────────────────────────────── */
.card{
  background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius); padding:24px;
  box-shadow:var(--shadow-1);
  transition:transform .22s ease, border-color .22s ease;
}
.card:hover{ transform:translateY(-3px); border-color:rgba(56,211,238,.35); }
.card.static:hover{ transform:none; border-color:var(--line); }
.grid{ display:grid; gap:18px; }
.g2{ grid-template-columns:repeat(2, 1fr); }
.g3{ grid-template-columns:repeat(3, 1fr); }
.g4{ grid-template-columns:repeat(4, 1fr); }
.g5{ grid-template-columns:repeat(5, 1fr); }

/* ── Chips / Tags ───────────────────────────────────────────────────────── */
.chip{
  display:inline-block; padding:4px 11px; border-radius:999px;
  border:1px solid var(--line); background:var(--panel-2);
  font-size:12px; font-weight:700; color:var(--mut); margin:3px 4px 3px 0;
}
.chip.cy{ color:var(--cy); border-color:rgba(56,211,238,.4); }
.chip.amber{ color:var(--amber); border-color:rgba(232,179,65,.4); }

/* ── Feature-Liste mit Haken ────────────────────────────────────────────── */
.checks{ list-style:none; padding:0; margin:0; }
.checks li{ padding-left:26px; position:relative; margin:7px 0; font-size:14.5px; color:var(--tx); }
.checks li::before{
  content:""; position:absolute; left:0; top:7px; width:14px; height:14px;
  border-radius:5px; border:1.5px solid var(--cy);
  background:
    linear-gradient(transparent,transparent) padding-box,
    conic-gradient(from 180deg, rgba(56,211,238,.35), transparent 70%) border-box;
}
.checks li::after{
  content:""; position:absolute; left:3.5px; top:10px; width:7px; height:4px;
  border-left:2px solid var(--cy); border-bottom:2px solid var(--cy); transform:rotate(-45deg);
}

/* ── Visual-Slots (Grafikplatzhalter, später 1:1 ersetzbar) ─────────────── */
.visual-slot{ margin:26px 0 0; }
.visual-slot__placeholder{
  border-radius:var(--radius-lg); border:1px solid var(--line);
  min-height:220px; position:relative; overflow:hidden;
  background:
    radial-gradient(1200px 300px at 50% -80px, rgba(56,211,238,.10), transparent 60%),
    linear-gradient(180deg, var(--panel-2), var(--panel));
}
.visual-slot__placeholder::after{
  content:attr(data-label);
  position:absolute; right:12px; bottom:10px;
  font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--mut); opacity:.6;
}

/* ── Rechts-Dialoge (Mechanik + Klassennamen wie produktiv) ─────────────── */
.imp-bd{
  position:fixed; inset:0; z-index:120; display:none;
  background:rgba(4,7,14,.72); backdrop-filter:blur(4px);
  padding:26px 16px; overflow-y:auto;
}
.imp-bd.open{ display:flex; align-items:flex-start; justify-content:center; }
.imp{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  max-width:760px; width:100%; padding:26px 28px; margin:auto 0;
  box-shadow:var(--shadow-1); font-size:14px;
}
.imp h3{ margin-top:0; }
.imp h4{ margin:14px 0 4px; color:var(--cy); }

/* ── Speicher-Hinweis (kein Consent-Gate — es gibt nichts Ablehnbares) ──── */
.cookie{
  position:fixed; left:16px; right:16px; bottom:16px; z-index:110;
  display:none; gap:14px; align-items:center; justify-content:space-between;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:14px 18px; box-shadow:var(--shadow-1); font-size:13px;
  max-width:900px; margin:0 auto;
}
.cookie.show{ display:flex; flex-wrap:wrap; }
.cookie p{ margin:0; color:var(--mut); }

/* ── Sprach-/Theme-Umschalter ───────────────────────────────────────────── */
.lang-toggle{ display:inline-flex; border:1px solid var(--line); border-radius:9px; overflow:hidden; }
.lang-toggle button{
  background:transparent; border:0; color:var(--mut); font-size:12px; font-weight:800;
  padding:7px 9px; letter-spacing:.04em;
}
.lang-toggle button[aria-pressed="true"]{ background:var(--panel-2); color:var(--cy); }
.theme-toggle{
  background:transparent; border:1px solid var(--line); border-radius:9px;
  width:38px; height:34px; color:var(--tx); font-size:15px; line-height:1;
}

/* ── Aufklapp-Demo (Kollision) ──────────────────────────────────────────── */
details.collision{
  border:1px solid var(--line); border-radius:var(--radius);
  background:var(--panel); overflow:hidden;
}
details.collision > summary{
  list-style:none; cursor:pointer; padding:18px 22px;
  display:flex; align-items:center; gap:12px; font-weight:800; color:var(--tx-strong);
}
details.collision > summary::-webkit-details-marker{ display:none; }
details.collision > summary::after{
  content:"+"; margin-left:auto; font-size:22px; color:var(--cy);
  transition:transform .2s ease;
}
details.collision[open] > summary::after{ transform:rotate(45deg); }
details.collision .body{ padding:0 22px 22px; border-top:1px solid var(--line-soft); }