/* ====================================================
   NEURAL ANGELS — SHARED CSS
   Shared between index.html and team/index.html
   ==================================================== */

/* ===== DESIGN TOKENS ===== */
:root {
  --purple:     #665dcd;
  --blue:       #5fa4e6;
  --gold:       #d2ab67;
  --purple-lt:  #8b8ef5;

  --bg:         #08071a;
  --bg-2:       #0d0b22;
  --bg-3:       #13103a;
  --surface:    rgba(255,255,255,0.04);
  --border:     rgba(255,255,255,0.08);
  --border-hi:  rgba(185,135,255,0.2);

  --text:       #edeaff;
  --text-muted: rgba(237,234,255,0.65);
  --text-faint: rgba(237,234,255,0.26);

  --grad-logo:  linear-gradient(135deg, #665dcd 0%, #5fa4e6 100%);
  --grad-btn:   linear-gradient(135deg, #665dcd 0%, #5fa4e6 83%, #d2ab67 100%);
  --grad-btn-h: linear-gradient(135deg, #665dcd 0%, #5fa4e6 35%, #d2ab67 100%);
}

/* ===== RESET + BODY ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden;
}

/* ===== STARS ===== */
.stars {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(2px 2px at 7%  12%, rgba(255,255,255,0.9) 0%, transparent 100%),
    radial-gradient(2px 2px at 19% 38%, rgba(185,135,255,0.85) 0%, transparent 100%),
    radial-gradient(2px 2px at 33%  6%, rgba(255,255,255,0.95) 0%, transparent 100%),
    radial-gradient(2px 2px at 48% 55%, rgba(185,135,255,0.7) 0%, transparent 100%),
    radial-gradient(2px 2px at 61% 22%, rgba(255,255,255,0.85) 0%, transparent 100%),
    radial-gradient(2px 2px at 74% 78%, rgba(139,142,245,0.9) 0%, transparent 100%),
    radial-gradient(2px 2px at 88% 33%, rgba(255,255,255,0.8) 0%, transparent 100%),
    radial-gradient(2px 2px at 13% 82%, rgba(185,135,255,0.75) 0%, transparent 100%),
    radial-gradient(2px 2px at 55% 91%, rgba(255,255,255,0.8) 0%, transparent 100%),
    radial-gradient(2px 2px at 38% 48%, rgba(139,142,245,0.7) 0%, transparent 100%),
    radial-gradient(2px 2px at 82% 14%, rgba(255,255,255,0.85) 0%, transparent 100%),
    radial-gradient(2px 2px at  3% 64%, rgba(255,255,255,0.7) 0%, transparent 100%),
    radial-gradient(2px 2px at 44% 26%, rgba(210,171,103,0.8) 0%, transparent 100%),
    radial-gradient(2px 2px at 68% 70%, rgba(210,171,103,0.65) 0%, transparent 100%),
    radial-gradient(2px 2px at 91% 58%, rgba(255,255,255,0.75) 0%, transparent 100%),
    radial-gradient(2px 2px at 26%  2%, rgba(185,135,255,0.8) 0%, transparent 100%),
    radial-gradient(2px 2px at 57% 44%, rgba(255,255,255,0.7) 0%, transparent 100%),
    radial-gradient(2px 2px at 79% 88%, rgba(139,142,245,0.75) 0%, transparent 100%);
}

/* ===== BLOBS ===== */
.blob-wrap { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.blob { position: absolute; border-radius: 50%; filter: blur(100px); }
.blob-1 { width:600px;height:600px; top:-150px;right:-80px;  background:rgba(101,93,205,0.22); animation:driftA 20s ease-in-out infinite; }
.blob-2 { width:500px;height:500px; bottom:5%;left:-120px;   background:rgba(95,164,230,0.15);  animation:driftB 26s ease-in-out infinite; }
.blob-3 { width:320px;height:220px; bottom:28%;left:32%;     background:rgba(210,171,103,0.09); filter:blur(120px); animation:driftC 32s ease-in-out infinite; }
@keyframes driftA { 0%,100%{transform:translate(0,0) scale(1)} 40%{transform:translate(-40px,60px) scale(1.06)} 70%{transform:translate(30px,-30px) scale(0.96)} }
@keyframes driftB { 0%,100%{transform:translate(0,0)} 50%{transform:translate(50px,-50px)} }
@keyframes driftC { 0%,100%{transform:translate(0,0)} 60%{transform:translate(-30px,40px)} }

/* ===== LAYOUT ===== */
.container { max-width:1160px; margin:0 auto; padding:0 40px; position:relative; z-index:1; }

/* ===== CTA BUTTONS ===== */
.btn-cta {
  display:inline-flex; align-items:center; gap:8px;
  padding:13px 30px;
  font-family:'Plus Jakarta Sans',sans-serif; font-size:15px; font-weight:600;
  color:#fff; border:none; border-radius:8px; cursor:pointer; text-decoration:none;
  white-space:nowrap; letter-spacing:0.01em;
  position:relative; overflow:hidden; isolation:isolate;
  background: var(--grad-btn);
}
.btn-cta::before {
  content:''; position:absolute; inset:0; z-index:-1;
  background: var(--grad-btn-h);
  opacity:0; transition:opacity 0.28s ease; border-radius:inherit;
}
.btn-cta:hover::before { opacity:1; }
.btn-cta:hover { box-shadow:0 0 28px rgba(101,93,205,0.35), 0 8px 20px rgba(95,164,230,0.18); }
.btn-cta.sm { padding:9px 20px; font-size:13px; border-radius:6px; }
.btn-cta.lg { padding:17px 44px; font-size:16px; border-radius:10px; }
.btn-ghost {
  display:inline-flex; align-items:center; gap:8px;
  padding:13px 30px; font-family:'Plus Jakarta Sans',sans-serif;
  font-size:15px; font-weight:500; color:var(--text-muted);
  border:1px solid var(--border); border-radius:8px; cursor:pointer;
  text-decoration:none; background:transparent;
  transition:color .2s,border-color .2s,background .2s;
}
.btn-ghost:hover { color:var(--text); border-color:var(--border-hi); background:var(--surface); }

/* ===== NAV ===== */
nav {
  position:sticky; top:0; z-index:100;
  background:rgba(8,7,26,0.85); backdrop-filter:blur(20px);
  border-bottom:1px solid rgba(255,255,255,0.05);
}
.nav-inner {
  display:flex; align-items:center; justify-content:space-between;
  gap:32px; height:66px;
}
.nav-logo { display:flex; align-items:center; gap:10px; text-decoration:none; }
.nav-logo img { height:34px; width:auto; }
.nav-logo-name {
  font-size:16px; font-weight:800; letter-spacing:-0.01em;
  color: #fff; white-space: nowrap;
}
.nav-links { display:flex; align-items:center; gap:34px; list-style:none; }
.nav-links a { font-size:14px; font-weight:500; color:var(--text-muted); text-decoration:none; transition:color .2s; }
.nav-links a:hover { color:var(--text); }

/* ===== DIVIDER ===== */
.divider { height:1px; background:linear-gradient(to right,transparent,var(--border) 30%,var(--border) 70%,transparent); position:relative; z-index:1; }

/* ===== SECTION COMMONS ===== */
section { padding:96px 0; position:relative; z-index:1; }
.full-width-band {
  background:rgba(13,11,34,0.55);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
}
.full-width-band--highlight {
  background:
    radial-gradient(circle at 10% 16%, rgba(101,93,205,0.17), transparent 46%),
    radial-gradient(circle at 90% 84%, rgba(210,171,103,0.13), transparent 46%);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.section-label { font-size:12px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--purple-lt); margin-bottom:12px; }
.section-title { font-size:clamp(26px,3vw,44px); font-weight:800; line-height:1.1; letter-spacing:-0.025em; margin-bottom:14px; }
.section-sub { font-size:16px; line-height:1.72; color:var(--text-muted); max-width:520px; text-wrap:pretty; }
.section-header { margin-bottom:56px; }
.section-header.centered { text-align:center; }
.section-header.centered .section-sub { margin:0 auto; }

/* ===== CARD GRID (generic 3-column) ===== */
.card-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:2px;
  background:var(--border); border:1px solid var(--border); border-radius:16px; overflow:hidden;
}

/* ===== SERVICE CARD (shared with profile focus areas) ===== */
.service-card {
  background:var(--bg-2); padding:36px 30px; transition:background .22s; cursor:default;
}
.service-card:hover { background:var(--bg-3); }
.service-icon-wrap {
  width:40px; height:40px; border-radius:9px; margin-bottom:20px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--border-hi); background:rgba(101,93,205,0.08);
  font-size:17px;
}
.service-card h3 { font-size:16px; font-weight:700; margin-bottom:10px; letter-spacing:-0.01em; }
.service-card p  { font-size:14px; line-height:1.7; color:var(--text-muted); }

/* ===== FOOTER ===== */
footer { padding:44px 0; border-top:1px solid var(--border); position:relative; z-index:1; }
.footer-inner { display:flex; align-items:center; justify-content:space-between; }
.footer-logo { display:flex; align-items:center; gap:9px; }
.footer-logo img { height:28px; width:auto; }
.footer-logo-name {
  font-size:14px; font-weight:800;
  background:linear-gradient(135deg, #fff 0%, var(--blue) 60%, var(--gold) 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
/* ===== RECHTSSEITEN: Anschrift als Bild =====
   Name und ladungsfaehige Anschrift liefern Impressum und Datenschutz als
   transparentes PNG aus (erzeugt von tools/render_legal_pngs.py aus
   legal/legal-data.json). Das PNG traegt bereits die Farbe und Deckkraft von
   `.legal-section p`, liegt also optisch im Fluss des uebrigen Textes.

   Steht hier und nicht im <style> der einzelnen Seite: sonst bekommt die
   naechste Rechtsseite das Bild ohne die Regel und es sprengt das Layout. */
.legal-img {
  display: block;
  max-width: 100%; height: auto;
  user-select: none; -webkit-user-select: none;
  /* Der Renderer laesst 2 CSS-px Rand stehen, damit das Antialiasing der
     Randglyphen nicht abgeschnitten wird (PAD in tools/render_legal_pngs.py).
     Ohne Ausgleich stuenden die Bildzeilen 2 px weiter rechts als der
     Fliesstext darunter - sichtbar genau dort, wo "Deutschland" folgt. */
  margin-left: -2px;
}

/* Das Bild ersetzt drei Textzeilen, die mit <br> endeten. Nach einem
   block-level Element erzeugt dieses <br> eine sichtbare Leerzeile vor der
   Folgezeile ("Deutschland"). Es hier auszublenden ist praeziser, als das
   <br> aus dem Markup zu loeschen - ohne Bild braucht die Zeile es weiterhin. */
.legal-img + br { display: none; }

.footer-copy { font-size:12px; color:var(--text-faint); }
.footer-links { display:flex; gap:28px; list-style:none; }
.footer-links a { font-size:12px; color:var(--text-faint); text-decoration:none; transition:color .2s; }
.footer-links a:hover { color:var(--text-muted); }

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar { width:4px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:rgba(185,135,255,0.2); border-radius:4px; }

/* ===== LANG TOGGLE + HAMBURGER ===== */
.lang-toggle {
  display: flex; align-items: center; gap: 0;
  border: 1px solid var(--border); border-radius: 6px; overflow: hidden;
  flex-shrink: 0;
}
.lang-btn {
  padding: 6px 12px; font-size: 12px; font-weight: 700;
  color: var(--text-faint); background: transparent;
  border: none; cursor: pointer; font-family: inherit;
  letter-spacing: 0.05em; transition: color .2s, background .2s;
}
.lang-btn.active {
  background: rgba(101,93,205,0.2); color: var(--text);
}
/* Hamburger hidden on desktop */
.hamburger { display: none; }

/* ===== MOBILE MENU OVERLAY =====
   Lives outside <nav> so backdrop-filter on <nav> doesn't trap
   position:fixed children inside a stacking context. */
.mobile-menu-overlay {
  display: none;
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(8,7,26,0.98);
  z-index: 500;
  flex-direction: column;
  align-items: center; justify-content: flex-start;
  padding: 80px 24px 48px;
  overflow-y: auto;
}
.mobile-menu-overlay.open { display: flex; }
.mobile-menu-nav {
  list-style: none;
  display: flex; flex-direction: column; align-items: stretch;
  width: 100%; max-width: 420px;
  border-top: 1px solid var(--border);
}
.mobile-menu-nav li { border-bottom: 1px solid var(--border); text-align: center; }
.mobile-menu-nav a {
  display: block; padding: 18px 20px;
  font-size: 20px; font-weight: 700; color: var(--text);
  text-decoration: none; letter-spacing: -0.01em;
  transition: color .2s;
}
.mobile-menu-nav a.nav-active,
.mobile-menu-nav a:hover { color: var(--purple-lt); }
.mobile-menu-cta {
  margin-top: 36px;
  width: 100%; max-width: 420px;
}
.mobile-menu-cta .btn-cta { width: 100%; justify-content: center; }
.mobile-menu-lang { margin-top: 20px; }

/* ====================================================
   RESPONSIVE — TABLET & MOBILE
   ==================================================== */

/* ---- Tablet: 768–1024px ---- */
@media (max-width: 1000px) {
  .container { padding: 0 28px; }

  .card-grid { grid-template-columns: repeat(2, 1fr); }

  .cta-banner { padding: 56px 40px; }
}

/* ---- Mobile: <768px ---- */
@media (max-width: 1000px) {
  .container { padding: 0 20px; }
  section { padding: 64px 0; }

  /* Nav */
  .nav-lang-desktop { display: none; }
  .nav-inner { height: auto; padding: 14px 0; flex-wrap: nowrap; justify-content: space-between; }
  .nav-actions { display: none; }
  .hamburger {
    display: flex; flex-direction: column; gap: 5px; cursor: pointer;
    background: none; border: none; padding: 6px; z-index: 600; flex-shrink: 0;
  }
  .hamburger span {
    display: block; width: 22px; height: 2px;
    background: var(--text); border-radius: 2px;
    transition: transform 0.22s ease, opacity 0.22s ease;
  }
  .hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .hamburger.open span:nth-child(2) { opacity: 0; }
  .hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .nav-links { display: none; }
  .nav-logo-name { font-size: 14px; }
  .nav-logo img { height: 28px; }

  /* Sections */
  .section-title { font-size: clamp(22px, 6vw, 32px); }
  .section-header { margin-bottom: 36px; }

  /* Card grid */
  .card-grid { grid-template-columns: 1fr; gap: 2px; }

  /* Footer */
  .footer-inner { flex-direction: column; gap: 20px; text-align: center; }
  .footer-links { justify-content: center; }

  /* CTA */
  .cta-banner { padding: 40px 24px; border-radius: 16px; }
  .cta-banner h2 { font-size: clamp(20px, 5vw, 30px); }
  .cta-actions { flex-direction: column; align-items: stretch; }
  .cta-actions .btn-cta,
  .cta-actions .btn-ghost { text-align: center; justify-content: center; }
}

/* ---- Small mobile: <480px ---- */
@media (max-width: 480px) {
  .nav-logo-name { display: none; }
}