/* ===========================
   BrainFlip – Home Styles
   File: assets/css/home.css
   =========================== */

/* ---- Tokens (wie Login/Register/Reset) ---- */
:root{
  --bg:#f7f8fa;
  --panel:#ffffff;
  --text:#111827;
  --muted:#6b7280;
  --border:#e5e7eb;

  --primary:#2563eb;
  --primary-600:#1d4ed8;
  --primary-700:#1e40af;

  --secondary:#6b7280;      /* Grau-Variante für Secondary-Button */
  --secondary-600:#4b5563;

  --success:#10b981;
  --danger:#ef4444;

  --radius:14px;
  --shadow-sm:0 1px 2px rgba(16,24,40,.06);
  --shadow-md:0 6px 20px rgba(2,6,23,.10);

  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Inter, "Helvetica Neue", Arial, "Noto Sans";
  --fs-base:16px;
  --fs-sm:14px;
  --lh:1.55;

  --container: 1120px;

  --transition:180ms cubic-bezier(.2,.6,.2,1);
}

/* ---- Base ---- */
*,
*::before,
*::after{ box-sizing:border-box; }
html, body{ height:100%; }
html{ font-size:100%; }

body{
  margin:0;
  font-family:var(--font);
  font-size:var(--fs-base);
  line-height:var(--lh);
  color:var(--text);
  background:
    radial-gradient(1200px 600px at 10% -10%, #e8eeff 0%, rgba(232,238,255,0) 50%),
    var(--bg);
}

/* Links */
a{ color:var(--primary-700); text-decoration:none; }
a:hover{ text-decoration:underline; }

/* Container */
.container{
  width:min(92%, var(--container));
  margin-inline:auto;
}

/* ---- Header ---- */
.site-header{
  position: sticky;
  top: 0;
  backdrop-filter: saturate(180%) blur(10px);
  background: rgba(255,255,255,0.75);
  border-bottom: 1px solid rgba(229,231,235,.6);
  z-index: 50;
}
.header-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 0;
}

.brand{
  display:flex; align-items:center; gap:10px;
  font-weight:800; color:var(--text);
}
.brand-icon{ display:inline-flex; color:var(--primary); }
.brand-text{ letter-spacing:-.01em; }

.nav-actions{ display:flex; gap:10px; }

/* ---- Buttons ---- */
.btn{
  appearance:none;
  border:0;
  border-radius:12px;
  background: linear-gradient(180deg, var(--primary) 0%, var(--primary-600) 100%);
  color:#fff;
  font-weight:700;
  padding:10px 14px;
  min-height:42px;
  display:inline-flex; align-items:center; justify-content:center;
  box-shadow:0 8px 18px rgba(37,99,235,.24);
  transition:transform var(--transition), box-shadow var(--transition), background var(--transition);
}
.btn:hover{ transform:translateY(-1px); box-shadow:0 10px 22px rgba(37,99,235,.3); text-decoration:none; }
.btn:active{ transform:translateY(0); box-shadow:0 6px 14px rgba(37,99,235,.22); }
.btn:focus-visible{ outline:none; box-shadow:0 0 0 4px rgba(37,99,235,.22); }

.btn.secondary{
  background: linear-gradient(180deg, var(--secondary) 0%, var(--secondary-600) 100%);
  box-shadow:0 6px 16px rgba(107,114,128,.25);
}
.btn.ghost{
  background:#ffffff;
  border:1px solid var(--border);
  color:var(--text);
  box-shadow:none;
}
.btn.ghost:hover{
  border-color:#d5dbea;
  box-shadow:var(--shadow-sm);
}

/* ---- Hero ---- */
.hero{
  padding: clamp(28px, 6vw, 64px) 0;
  background:
    radial-gradient(900px 360px at 80% -10%, rgba(37,99,235,.10) 0%, rgba(37,99,235,0) 60%),
    linear-gradient(180deg, rgba(255,255,255,.0) 0%, rgba(255,255,255,1) 70%);
}
.hero-inner{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(18px, 4vw, 42px);
  align-items:center;
}
@media (max-width: 900px){
  .hero-inner{ grid-template-columns: 1fr; }
}

.hero-copy h1{
  font-size: clamp(28px, 6vw, 44px);
  line-height:1.12;
  letter-spacing:-.02em;
  margin: 0 0 10px;
}
.lead{
  color:var(--muted);
  font-size: clamp(16px, 2.2vw, 18px);
  margin: 0 0 16px;
}

.cta-row{ display:flex; gap:10px; flex-wrap:wrap; }

.hero-points{
  margin: 14px 0 0;
  padding:0; list-style:none;
  display:grid; gap:8px;
}
.hero-points li{
  display:flex; align-items:flex-start; gap:8px;
  color:#334155;
}
.hero-points .ico{
  margin-top: 2px;
  color: var(--success);
}

/* ---- Hero Visual (Mockup) ---- */
.hero-visual{ display:flex; justify-content:center; }
.preview-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow: var(--shadow-md);
  width: min(100%, 420px);
  overflow:hidden;
}
.preview-head{
  display:flex; gap:6px; align-items:center;
  padding:10px 12px; border-bottom:1px solid var(--border);
  background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
}
.preview-head .dot{
  width:10px;height:10px;border-radius:999px;background:#cbd5e1; display:inline-block;
}
.preview-body{ padding:16px; display:grid; gap:12px; }
.kpi{
  display:flex; align-items:baseline; gap:10px;
}
.kpi-val{ font-size:28px; font-weight:800; letter-spacing:-.01em; color:#0f172a; }
.kpi-label{ color:var(--muted); font-weight:600; }

.bar-wrap{
  position:relative; height:14px; background:#f1f5f9; border-radius:999px; overflow:hidden;
  display:flex;
}
.bar{ height:100%; }
.bar-ok{ background: linear-gradient(90deg, #22c55e, #16a34a); border-top-left-radius:999px; border-bottom-left-radius:999px; }
.bar-bad{ background: linear-gradient(90deg, #f97316, #ef4444); }

.pill-row{ display:flex; gap:8px; flex-wrap:wrap; }
.pill{
  background:#f1f5f9; border:1px solid #e2e8f0; color:#334155;
  padding:6px 10px; border-radius:999px; font-size:13px; font-weight:600;
}

/* ---- Features ---- */
.features{
  padding: clamp(28px, 6vw, 64px) 0;
}
.features h2{
  font-size: clamp(22px, 4.8vw, 32px);
  letter-spacing:-.01em; margin:0 0 16px;
}
.feature-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 3.2vw, 20px);
}
@media (max-width: 900px){
  .feature-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px){
  .feature-grid{ grid-template-columns: 1fr; }
}

.feature{
  background:#fff; border:1px solid var(--border); border-radius:14px;
  padding:16px; box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.feature:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color:#d5dbea;
}
.f-ico{ color:var(--primary); }
.feature h3{ margin:10px 0 6px; font-size:18px; }
.feature p{ margin:0; color:#334155; }

.center-cta{
  margin-top: clamp(16px, 3vw, 24px);
  display:flex; gap:10px; flex-wrap:wrap; justify-content:center;
}

/* ---- Footer ---- */
.site-footer{
  border-top:1px solid var(--border);
  background:#fff;
}
.foot-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0; gap:12px; flex-wrap:wrap;
}
.foot-links{ display:flex; gap:14px; flex-wrap:wrap; }
.foot-links a{ color:#334155; }
.foot-links a:hover{ color:var(--primary-700); text-decoration:none; }

/* ---- Accessibility / Mobile ---- */
@media (max-width: 480px){
  .nav-actions .btn{ min-height:42px; padding:10px 12px; }
  .brand-text{ display:none; } /* Platz sparen, nur Icon auf sehr kleinen Geräten */
}

/* Fokus-Ringe einheitlich */
.btn:focus-visible{ outline:none; box-shadow:0 0 0 4px rgba(37,99,235,.22); }
a:focus-visible{ outline: 3px solid rgba(37,99,235,.35); outline-offset: 2px; }

/* Präferenz: weniger Bewegung */
@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; animation:none !important; }
}