/* Nasha Kniga – Coming-Soon-Landingpage
   Eine CSS-Datei für alle vier Sprachversionen. */

:root{
  --ink:#15171F;
  --ink-soft:#333747;
  --cobalt:#2340C8;
  --cobalt-deep:#111C4A;
  --sand:#E4B23C;
  --paper:#FFFFFF;
  --mist:#F1F3F8;
  --rule:#D9DEEA;
  --muted:#5D667E;
  --display:"Literata",Georgia,"Times New Roman",serif;
  --body:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"Courier New",monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--body);font-size:17px;line-height:1.65;
}
.wrap{width:100%;max-width:1100px;margin:0 auto;padding:0 24px}
a{color:var(--cobalt);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
a:focus-visible{outline:2px solid var(--cobalt);outline-offset:3px;border-radius:2px}
strong{font-weight:700}

/* ---------- Kopfzeile ---------- */
.top{border-bottom:1px solid var(--rule)}
.top-in{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 0;flex-wrap:wrap}
.logo{display:inline-flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink)}
.logo:hover{text-decoration:none}
.logo-mark{width:34px;height:34px;flex:none;border-radius:5px}
.logo-word{font-family:var(--display);font-size:26px;line-height:1;letter-spacing:-.015em}
.logo-word span:first-child{font-weight:400}
.logo-word span:last-child{font-weight:700;color:var(--cobalt)}

/* Sprachwahl: reine Buchstabenkürzel, bewusst keine Flaggen */
.lang{display:flex;gap:6px;font-family:var(--mono);font-size:12px;letter-spacing:.06em}
.lang a,.lang span{
  display:inline-block;padding:6px 10px;border:1px solid var(--rule);border-radius:2px;
  color:var(--muted);text-decoration:none;transition:border-color .15s ease,color .15s ease
}
.lang a:hover{border-color:var(--cobalt);color:var(--cobalt);text-decoration:none}
.lang .is-on{background:var(--ink);border-color:var(--ink);color:#fff}

/* ---------- Hero ---------- */
.hero{padding:74px 0 0}
.eyebrow{
  font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--cobalt);display:flex;align-items:center;gap:10px;margin:0 0 22px
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--sand);display:block}
h1{
  font-family:var(--display);font-weight:700;
  font-size:clamp(34px,5.2vw,60px);line-height:1.1;letter-spacing:-.022em;
  margin:0 0 24px;max-width:19ch
}
h1 em{font-style:normal;color:var(--cobalt)}
.lede{font-size:clamp(18px,2.1vw,21px);line-height:1.6;max-width:64ch;margin:0 0 32px;color:var(--ink-soft)}
.actions{display:flex;flex-wrap:wrap;gap:13px;padding-bottom:56px}
.btn{
  display:inline-block;font-family:var(--body);font-weight:600;font-size:16px;
  padding:14px 26px;border-radius:2px;border:1px solid var(--ink);
  background:var(--ink);color:#fff;text-decoration:none;
  transition:background .18s ease,border-color .18s ease,color .18s ease
}
.btn:hover{background:var(--cobalt);border-color:var(--cobalt);color:#fff;text-decoration:none}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--rule)}
.btn-ghost:hover{background:var(--mist);border-color:var(--cobalt);color:var(--ink)}
.btn-sand{background:var(--sand);border-color:var(--sand);color:#20180A}
.btn-sand:hover{background:#fff;border-color:#fff;color:var(--cobalt-deep)}

/* ---------- Signatur: das Wort „Buch“ in vier Sprachen ---------- */
.shelf{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);background:var(--paper)}
.shelf-in{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1px;background:var(--rule)}
.shelf-in > div{background:var(--paper);padding:32px 22px 30px}
.shelf-in b{
  display:block;font-family:var(--display);font-weight:700;
  font-size:clamp(26px,3.4vw,38px);line-height:1.05;letter-spacing:-.02em;color:var(--ink)
}
.shelf-in span{
  display:block;margin-top:12px;font-family:var(--mono);font-size:11.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted)
}
.shelf-in > div:nth-child(2) b{color:var(--cobalt)}

/* ---------- Zahlenleiste ---------- */
.facts{border-bottom:1px solid var(--rule);background:var(--mist)}
.facts-in{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:1px;background:var(--rule)}
.fact{background:var(--mist);padding:26px 22px}
.fact b{display:block;font-family:var(--display);font-size:29px;font-weight:700;line-height:1.1;color:var(--cobalt-deep)}
.fact span{display:block;font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:8px}

/* ---------- Abschnitte ---------- */
.sec{padding:64px 0}
.sec-mist{background:var(--mist);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.label{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:0 0 14px}
h2{font-family:var(--display);font-weight:700;font-size:clamp(26px,3.4vw,38px);line-height:1.18;letter-spacing:-.018em;margin:0 0 22px;max-width:23ch}
h3{font-family:var(--display);font-weight:700;font-size:21px;line-height:1.3;margin:34px 0 10px}
h3.first{margin-top:0}
p{max-width:70ch;margin:0 0 18px;color:var(--ink-soft)}

/* ---------- Register ---------- */
.register{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:0 34px;margin:8px 0 0}
.register div{border-top:1px solid var(--rule);padding:13px 0 13px 15px;position:relative}
.register div::before{content:"";position:absolute;left:0;top:20px;width:6px;height:6px;background:var(--sand);border-radius:50%}
.register dt{font-family:var(--display);font-size:17.5px;font-weight:600;line-height:1.3;color:var(--ink)}
.register dd{margin:3px 0 0;font-family:var(--mono);font-size:12px;color:var(--muted);line-height:1.5}

/* ---------- Spalten ---------- */
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:34px}
.cols ul{margin:0;padding-left:18px;color:var(--ink-soft)}
.cols li{margin-bottom:7px}

/* ---------- Farbband ---------- */
.band{background:var(--cobalt-deep);color:#E6EAF7}
.band h2{color:#fff}
.band p{color:#BCC6E4}
.band a{color:var(--sand)}
.band .label{color:var(--sand)}

/* ---------- FAQ ---------- */
.faq-item{border-bottom:1px solid var(--rule);padding:22px 0}
.faq-item:first-of-type{border-top:1px solid var(--rule)}
.faq-item h3{font-size:19.5px;margin:0 0 8px}
.faq-item p{margin:0}

/* ---------- Fußzeile ---------- */
footer{border-top:1px solid var(--rule);padding:52px 0 64px;font-size:15px;color:var(--muted)}
footer h2{font-family:var(--display);font-size:19px;color:var(--ink);margin:0 0 14px}
footer p{margin-bottom:14px;color:var(--muted)}
.foot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:34px}
.fineprint{margin-top:38px;font-size:12.5px;line-height:1.7;max-width:none}

@media (max-width:640px){
  .hero{padding:50px 0 0}
  .actions{padding-bottom:42px}
  .sec{padding:48px 0}
  .logo-word{font-size:22px}
  .logo-mark{width:30px;height:30px}
  .shelf-in > div{padding:24px 20px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}