/* ============================================================
   Entwickler Indien Kostenkalkulator – Styles
   Reines CSS, keine Abhängigkeiten.
   ============================================================ */

:root{
  --blue-900:#0b2545;
  --blue-700:#12459c;
  --blue-600:#1d5fd6;
  --blue-500:#2b7bff;
  --blue-50:#eef4ff;
  --green:#0f9d58;
  --ink:#0d1b2a;
  --muted:#5b6b7f;
  --bg:#f6f9ff;
  --card:#ffffff;
  --border:#e3ebf7;
  --shadow-sm:0 2px 8px rgba(13,27,42,.06);
  --shadow-md:0 10px 30px rgba(13,27,42,.08);
  --shadow-lg:0 24px 60px rgba(18,69,156,.14);
  --radius:22px;
  --font:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;font-family:var(--font);color:var(--ink);
  background:var(--bg);line-height:1.6;-webkit-font-smoothing:antialiased;
}

.wrap{width:100%;max-width:960px;margin:0 auto;padding:0 20px}
.wrap-narrow{max-width:760px}

/* ---------- Hero (above the fold) ---------- */
.hero{
  position:relative;min-height:100vh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;
  padding:48px 0 64px;
  background:
    radial-gradient(1200px 500px at 50% -10%, #dce9ff 0%, rgba(220,233,255,0) 70%),
    linear-gradient(180deg,#ffffff 0%,var(--bg) 100%);
}

.eyebrow{
  display:inline-block;margin:0 0 14px;padding:6px 14px;border-radius:999px;
  background:var(--blue-50);color:var(--blue-700);
  font-size:.82rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
}

h1{
  margin:0 auto 16px;max-width:820px;
  font-size:clamp(1.7rem,3.4vw,2.7rem);line-height:1.2;font-weight:800;
  letter-spacing:-.02em;color:var(--blue-900);
}
.sub{margin:0 auto 32px;max-width:620px;color:var(--muted);font-size:1.05rem}

/* ---------- Karten ---------- */
.card{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow-md);padding:32px;text-align:left;
  transition:box-shadow .3s ease, transform .3s ease;
}
.card:hover{box-shadow:var(--shadow-lg)}
.card-result{text-align:center}

/* ---------- Formular ---------- */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:26px}
.field{display:flex;flex-direction:column;gap:8px}
label{font-size:.9rem;font-weight:600;color:var(--blue-900)}

select{
  appearance:none;-webkit-appearance:none;width:100%;
  padding:14px 42px 14px 16px;font:inherit;font-size:1rem;color:var(--ink);
  background:#fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%231d5fd6' stroke-width='2.5' stroke-linecap='round'><path d='M6 9l6 6 6-6'/></svg>") no-repeat right 14px center;
  border:1.5px solid var(--border);border-radius:14px;cursor:pointer;
  transition:border-color .2s ease, box-shadow .2s ease;
}
select:hover{border-color:var(--blue-500)}
select:focus{outline:none;border-color:var(--blue-600);box-shadow:0 0 0 4px rgba(43,123,255,.15)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-block;border:0;cursor:pointer;text-decoration:none;text-align:center;
  font:inherit;font-weight:700;border-radius:16px;
  transition:transform .18s ease, box-shadow .25s ease, background .25s ease;
}
.btn-primary{
  color:#fff;background:linear-gradient(135deg,var(--blue-600),var(--blue-500));
  box-shadow:0 10px 24px rgba(29,95,214,.30);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(29,95,214,.38)}
.btn-primary:active{transform:translateY(0)}
.btn-xl{width:100%;padding:18px 26px;font-size:1.08rem}

.btn-link{
  margin-top:16px;background:none;border:0;cursor:pointer;font:inherit;
  color:var(--muted);text-decoration:underline;padding:6px
}
.btn-link:hover{color:var(--blue-600)}

/* ---------- Ergebnis ---------- */
.view.is-hidden{display:none}
.view-result{animation:fadeUp .55s ease both}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

.result-title{
  margin:0 0 10px;font-size:clamp(2rem,5vw,3rem);font-weight:800;
  color:var(--green);letter-spacing:-.02em;
}
.result-lead{margin:0 auto 26px;max-width:560px;font-size:1.15rem;color:var(--blue-900)}
.pct{color:var(--green);font-size:1.6em;font-weight:800}

.big-number{
  margin:6px 0 0;font-size:clamp(2.8rem,8vw,4.6rem);font-weight:800;
  letter-spacing:-.03em;color:var(--blue-700);line-height:1.05;
}
.monthly{margin:2px 0 14px;color:var(--muted);font-size:1.05rem;font-weight:600}
.note{margin:0 0 8px;color:var(--ink)}
.breakdown{margin:0 0 24px;color:var(--muted);font-size:.92rem}

/* ---------- Scroll-Hinweis ---------- */
.scroll-hint{
  position:absolute;bottom:22px;left:50%;transform:translateX(-50%);
  color:var(--muted);text-decoration:none;font-size:.9rem;
}
.scroll-hint:hover{color:var(--blue-600)}

/* ---------- Artikel ---------- */
.article{padding:80px 0;background:#fff;border-top:1px solid var(--border)}
.article h2{font-size:clamp(1.5rem,3vw,2rem);color:var(--blue-900);letter-spacing:-.02em}
.article h3{margin-top:34px;font-size:1.2rem;color:var(--blue-700)}
.article p{color:#33465c}
.cta-wrap{margin-top:44px;text-align:center}
.cta-wrap .btn-xl{max-width:520px}

.footer{padding:28px 0;background:var(--blue-900);color:#c9d8f0;font-size:.88rem;text-align:center}
.footer p{margin:0 0 10px}
.footer-nav{display:flex;justify-content:center;gap:18px;flex-wrap:wrap}
.footer-nav a{color:#fff;text-decoration:none;font-weight:500}
.footer-nav a:hover{text-decoration:underline}

/* ---------- Responsive ---------- */
@media (max-width:760px){
  .grid{grid-template-columns:1fr}
  .card{padding:22px}
  .hero{min-height:auto;padding:56px 0}
  .article{padding:56px 0}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}

/* ---------- Artikel: Listen & Abstände ---------- */
.article h2{margin-top:52px}
.article h2:first-child{margin-top:0}
.article ul{margin:0 0 18px;padding-left:22px;color:#33465c}
.article ul li{margin-bottom:8px;line-height:1.6}
.article strong{color:var(--blue-900)}