/* Palette und Schriften von quizsparkhub.com - am 2026-07-27 direkt
   aus der laufenden Seite ausgelesen, nicht geschaetzt. */
:root {
  --navy:#0B1220; --blue:#1E40AF; --blue-light:#3B82F6;
  --slate:#64748B; --border:#E2E8F0; --wash:#F8FAFC;
}
* { box-sizing:border-box; }
body {
  font-family:Inter,system-ui,sans-serif; color:var(--navy); background:#fff;
  margin:0; line-height:1.65; -webkit-font-smoothing:antialiased;
}
.wrap { max-width:64rem; margin:0 auto; padding:2.2rem 1.5rem 6rem; }

/* Sprachumschalter: die automatische Weiterleitung muss immer uebersteuerbar
   sein, sonst sitzt jemand in der falschen Fassung fest. Er ist zugleich der
   EINZIGE Weg zur anderen Sprache - jede Seite zeigt nur ihr eigenes Buch. */
.lang { display:flex; gap:.15rem; justify-content:flex-end; margin-bottom:3rem; }
.lang a, .lang span {
  font-size:.8rem; font-weight:600; letter-spacing:.06em;
  padding:.35rem .7rem; border-radius:999px; text-decoration:none;
}
.lang a { color:var(--slate); }
.lang a:hover { color:var(--navy); background:var(--wash); }
.lang .on { color:#fff; background:var(--navy); }

/* Ein Buch, zwei Spalten: Text fuehrt, Cover steht daneben. */
.hero { display:grid; grid-template-columns:1.15fr .85fr; gap:4rem; align-items:center; }
@media (max-width:56rem) { .hero { grid-template-columns:1fr; gap:2.5rem; } }

.eyebrow {
  font-size:.78rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--blue); margin-bottom:1.1rem;
}
h1 {
  font-family:Sora,sans-serif; font-weight:800; letter-spacing:-.03em;
  font-size:clamp(2.1rem,4.6vw,3.2rem); line-height:1.08; margin:0 0 1.2rem;
}
.lede { font-size:1.13rem; color:var(--slate); margin:0 0 2rem; }
.meta { color:var(--slate); font-size:.9rem; margin-bottom:1.6rem; }
.meta strong { color:var(--navy); font-weight:600; }

.btn {
  display:inline-flex; align-items:center; gap:.5rem;
  background:var(--blue); color:#fff; text-decoration:none;
  font-weight:600; font-size:1rem; padding:.85rem 1.7rem; border-radius:999px;
  transition:background .15s ease;
}
.btn:hover { background:#1B3A9E; }

.shot { display:block; text-decoration:none; }
.shot img {
  width:100%; display:block; border-radius:12px; border:1px solid var(--border);
  box-shadow:0 1px 2px rgba(11,18,32,.06), 0 18px 40px -14px rgba(11,18,32,.34);
  transition:transform .18s ease, box-shadow .18s ease;
}
.shot:hover img {
  transform:translateY(-5px);
  box-shadow:0 1px 2px rgba(11,18,32,.06), 0 28px 52px -16px rgba(11,18,32,.44);
}

.note {
  margin-top:4.5rem; background:var(--wash); border:1px solid var(--border);
  border-left:4px solid var(--blue); border-radius:0 10px 10px 0;
  padding:1.3rem 1.5rem; font-size:.98rem; color:#334155;
}
.note strong { color:var(--navy); font-weight:600; }

footer {
  margin-top:3rem; padding-top:1.6rem; border-top:1px solid var(--border);
  color:var(--slate); font-size:.9rem;
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
}
footer a { color:var(--blue); text-decoration:none; font-weight:500; }
footer a:hover { text-decoration:underline; }