/* style.css - Kortex System (complete) */

/* ---------- Brand Tokens ---------- */
:root{
  --primary: #034EA2;        /* Vivid Blue */
  --primary-dark: #09182F;   /* Midnight Blue */
  --secondary: #6A1B9A;      /* Royal Violet */
  --secondary-dark: #220835; /* Midnight Indigo */
  --bg: #F8FAFC;
  --text: #1F2937;
  --muted: rgba(31,41,55,.66);
  --card-bg: #ffffff;
  --glass: rgba(230,238,248,0.8);
}

/* ---------- Base ---------- */
*{box-sizing:border-box}
html,body{height:100%}
body{
  font-family: 'Inter', sans-serif;
  line-height:1.6;
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* container */
.container{max-width:1200px;margin-left:auto;margin-right:auto;padding:0 1rem}

/* ---------- Animations (kept) ---------- */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.animate-fadeIn { animation: fadeIn 0.6s ease-out forwards; }

/* ---------- Buttons / Utilities ---------- */
.btn {display:inline-flex;align-items:center;gap:.5rem;padding:.65rem 1.05rem;border-radius:8px;font-weight:600;text-decoration:none;border:0;cursor:pointer}
.btn-primary{background:var(--primary);color:#fff;box-shadow:0 6px 18px rgba(3,78,162,.12);transition:all .18s ease}
.btn-primary:hover{background:var(--primary-dark);transform:translateY(-1px)}
.btn-secondary{background:var(--secondary);color:#fff;transition:all .18s ease}
.btn-ghost{background:transparent;border:1px solid rgba(30,41,59,.08);color:var(--text)}

/* small helpers */
.text-primary{color:var(--primary)}
.bg-primary{background:var(--primary)}
.bg-primary-100{background:rgba(3,78,162,0.06)}
.text-secondary{color:var(--secondary)}
.icon-primary{color:var(--primary)}
.gradient-brand{background:linear-gradient(90deg,var(--primary),var(--secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.gradient-text{background:linear-gradient(90deg,var(--primary) 20%,var(--secondary) 80%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

/* ---------- Cards / Layout ---------- */
.card, .benefit, .question-widget, .product-card {
  background:var(--card-bg);
  border-radius:12px;
  padding:1.25rem;
  box-shadow:0 6px 18px rgba(16,24,40,.06);
}

/* Hero */
.hero{display:grid;grid-template-columns:1fr;gap:2.5rem;padding:3.5rem 0}
@media(min-width:900px){ .hero{grid-template-columns:1fr 1fr;align-items:center;padding:4.5rem 0} }
.h1{font-size:2rem;font-weight:800;color:var(--primary-dark);margin:0 0 1rem}
@media(min-width:900px){ .h1{font-size:3.25rem} }
.lead{font-size:1.0625rem;color:var(--muted);margin-bottom:1.25rem}

/* question widget */
.question-widget{max-width:900px;margin:2.5rem auto;padding:2rem;border-radius:14px;background:linear-gradient(90deg,var(--primary),var(--secondary));box-shadow:0 12px 32px rgba(3,78,162,.18);color:#fff}
.question-widget h2{color:#fff !important}
.question-widget p{color:rgba(255,255,255,.9) !important}
.question-widget small{color:rgba(255,255,255,.85) !important}
.question-widget a{color:#fff !important;font-weight:700}
textarea{width:100%;border:1px solid rgba(255,255,255,.3);padding:.9rem;border-radius:10px;font-family:inherit;resize:vertical;background:rgba(255,255,255,.95);color:var(--text)}
.question-widget input[type="email"],
.question-widget input[type="text"]{background:rgba(255,255,255,.95) !important;border:1px solid rgba(255,255,255,.3) !important;color:var(--text)}

/* Benefits grid */
.grid-3{display:grid;gap:1rem}
@media(min-width:900px){ .grid-3{grid-template-columns:repeat(3,1fr)} }

/* product card specifics */
.product-card img{width:100%;height:220px;object-fit:cover}
.product-meta{display:flex;gap:1rem;align-items:center}
.product-badge{width:44px;height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,var(--primary),var(--secondary));color:#fff}

/* CTA Section (products) */
.cta-products{padding:2rem;border-radius:14px;color:#fff;background:linear-gradient(90deg,var(--primary),var(--secondary));text-align:center;margin:3rem 0}

/* footer */
footer{margin-top:3rem;padding:2rem 0;color:rgba(30,41,59,.7)}

/* icon styling */
.icon{width:44px;height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,var(--primary),var(--secondary));color:#fff;flex:0 0 44px}

/* accessibility helpers */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- Responsive small tweaks ---------- */
@media (max-width: 768px) {
  .hero-text { text-align:center } 
  .product-card img{height:160px}
  .container{padding:0 0.75rem}
  
  /* Mobile Typography */
  .h1 {
    font-size: 1.75rem;
    line-height: 1.2;
  }
  
  .lead {
    font-size: 1rem;
    line-height: 1.6;
  }
  
  /* Mobile Buttons */
  .btn {
    padding: 0.75rem 1.25rem;
    font-size: 0.95rem;
    width: 100%;
    justify-content: center;
  }
  
  /* Mobile Forms */
  textarea, input[type="email"], input[type="text"] {
    font-size: 16px; /* Verhindert Zoom auf iOS */
    padding: 0.85rem;
  }
  
  /* Mobile Cards */
  .card, .benefit, .question-widget, .product-card {
    padding: 1.5rem;
    margin-bottom: 1.5rem;
  }
  
  /* Mobile Hero */
  .hero {
    padding: 2rem 0;
    gap: 2rem;
  }
  
  /* Mobile Grid */
  .grid-3 {
    gap: 1.5rem;
  }
}