/*
  Bookinder – Website
  ===================

  Zwei Regeln bestimmen alles hier.

  ERSTENS die Sprache der App: Creme als Fläche (in der App `bkCanvas`), Serifen für
  Titel, eine runde Systemschrift für Text, Orange als Akzent und Lila für alles, was
  mit Duellen zu tun hat. Wer hier Farben ändert, ändert die Marke.

  ZWEITENS der Fluss. Die Seite erzählt in Kapiteln, und jedes Kapitel bekommt so viel
  Platz, dass es allein auf dem Bildschirm steht. Bewegung passiert beim Scrollen, immer
  in dieselbe Richtung, immer dezent. Ein Kapitel, das aus vier Richtungen gleichzeitig
  hereinfliegt, wirkt nicht lebendig, sondern nervös.

  Bewusst keine Webfonts von einem fremden Server. Das lädt schneller und spart eine
  Einwilligung.
*/

:root {
  --canvas: #f7f1e8;
  --canvas-deep: #f1e8dc;
  --ink: #17150f;
  --ink-soft: #6f675c;
  --ink-faint: #a79d8f;
  --orange: #ff8a5b;
  --orange-deep: #f4633a;
  --purple: #7f5af0;
  --night: #14101f;
  --line: rgba(23, 21, 15, 0.09);
  --serif: Georgia, "Times New Roman", Times, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

.wrap {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
}
.narrow { max-width: 760px; }

/* ---------------- Navigation ---------------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(247, 241, 232, 0.72);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease;
}
.nav.scrolled { border-bottom-color: var(--line); }
.nav-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 11px 24px;
  display: flex;
  align-items: center;
  gap: 18px;
}
.logo {
  display: flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  font-family: var(--serif);
  font-size: 23px;
  color: var(--orange-deep);
}
.logo img { width: 26px; }
.nav-links { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.nav-links a {
  white-space: nowrap;
  text-decoration: none;
  color: var(--ink-soft);
  font-size: 15px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 999px;
  transition: background 0.2s ease, color 0.2s ease;
}
.nav-links a:hover { background: rgba(23, 21, 15, 0.05); color: var(--ink); }
.nav-links a.here { color: var(--ink); background: rgba(23, 21, 15, 0.07); }

/* ---------------- Typografie ---------------- */

h1, h2, h3 { font-family: var(--serif); font-weight: 700; letter-spacing: -0.015em; }

h1 {
  font-size: clamp(42px, 8.2vw, 84px);
  line-height: 1.02;
  margin: 0 0 20px;
}
h2 {
  font-size: clamp(32px, 5.4vw, 56px);
  line-height: 1.06;
  margin: 0 0 18px;
}
h3 {
  font-size: clamp(22px, 2.7vw, 30px);
  line-height: 1.15;
  margin: 0 0 10px;
}
em { font-style: italic; color: var(--orange-deep); }

.lead {
  font-size: clamp(18px, 2.1vw, 22px);
  color: var(--ink-soft);
  margin: 0 auto 30px;
  max-width: 640px;
}
.body-text { color: var(--ink-soft); font-size: clamp(17px, 1.8vw, 19px); margin: 0 0 16px; }
.body-text strong { color: var(--ink); font-weight: 650; }

.chapter-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--orange-deep);
  margin: 0 0 14px;
}

/* ---------------- Held ---------------- */

.hero {
  min-height: 88vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 60px 24px 40px;
}
.hero .boo { width: clamp(110px, 15vw, 150px); margin-bottom: 26px; }
.hero h1 { max-width: 15em; }

/* Boo schwebt, weil er in der App auch schwebt. Eine Bewegung, langsam. */
.floaty { animation: floaty 5s ease-in-out infinite; }
@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.badges { display: flex; gap: 14px; align-items: center; justify-content: center; flex-wrap: wrap; }
.badge-link { display: inline-block; transition: transform 0.15s ease, opacity 0.15s ease; }
.badge-link:hover { transform: scale(1.03); }
.badge-link img { height: 54px; width: auto; }
.hero-note { margin-top: 18px; font-size: 15px; color: var(--ink-faint); }

.scroll-hint {
  margin-top: 46px;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 700;
}
.scroll-hint span { display: block; font-size: 22px; margin-top: 4px; animation: nudge 2.2s ease-in-out infinite; }
@keyframes nudge {
  0%, 100% { transform: translateY(0); opacity: 0.5; }
  50% { transform: translateY(6px); opacity: 1; }
}

/* ---------------- Kapitel ---------------- */

.chapter { padding: clamp(70px, 11vw, 150px) 0; }
.chapter-intro { max-width: 720px; }
.chapter-intro .lead { margin-left: 0; }

/* Ein großer Satz, der für sich steht. */
.statement {
  font-family: var(--serif);
  font-size: clamp(28px, 4.6vw, 52px);
  line-height: 1.18;
  max-width: 20em;
  margin: 0;
}
.statement.center { margin: 0 auto; text-align: center; }
.statement small {
  display: block;
  font-family: var(--sans);
  font-size: clamp(16px, 1.8vw, 19px);
  line-height: 1.6;
  color: var(--ink-soft);
  font-weight: 400;
  margin-top: 22px;
  letter-spacing: 0;
}

/* Wechselseitige Zeilen */
.row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(30px, 6vw, 80px);
  align-items: center;
}
.row + .row { margin-top: clamp(60px, 9vw, 120px); }
.row.reverse .row-text { order: 2; }
@media (max-width: 860px) {
  .row { grid-template-columns: 1fr; gap: 30px; }
  .row.reverse .row-text { order: 0; }
}

/* Das Telefon */
.phone { max-width: 320px; margin: 0 auto; position: relative; }
.phone img {
  border-radius: 26px;
  box-shadow: 0 30px 60px rgba(74, 44, 20, 0.16), 0 2px 6px rgba(74, 44, 20, 0.08);
}
.phone::after {
  content: "";
  position: absolute;
  inset: -14% -18% -22%;
  background: radial-gradient(closest-side, rgba(255, 138, 91, 0.22), transparent 72%);
  z-index: -1;
}

/* ---------------- Mitlaufendes Telefon ---------------- */
/*
  Das Herzstück des Flusses: Links laufen drei Absätze durch, rechts bleibt das Telefon
  stehen und wechselt das Bild. Alles über `position: sticky`, ohne Bibliothek. Auf
  schmalen Bildschirmen wird daraus eine einfache Folge von Abschnitten, weil ein
  festgepinntes Bild dort den halben Platz frisst.
*/
.pin { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 6vw, 80px); align-items: start; }
.pin-media { position: sticky; top: 14vh; }
.pin-stack { position: relative; }
.pin-stack img {
  border-radius: 26px;
  box-shadow: 0 30px 60px rgba(74, 44, 20, 0.16);
  transition: opacity 0.55s ease, transform 0.55s ease;
}
.pin-stack img + img { position: absolute; inset: 0; }
.pin-stack img { opacity: 0; transform: scale(0.985); }
.pin-stack img.on { opacity: 1; transform: scale(1); }
.pin-steps > * + * { margin-top: clamp(50px, 14vh, 130px); }
.pin-step { min-height: 46vh; display: flex; flex-direction: column; justify-content: center; }
.pin-step .num {
  font-family: var(--serif);
  font-size: 15px;
  color: var(--orange-deep);
  letter-spacing: 0.1em;
  margin-bottom: 10px;
}
/*
  Das Einzelbild im Schritt ist die Quelle. Auf breiten Bildschirmen ist es versteckt,
  weil `flow.js` daraus den mitlaufenden Stapel klont.
*/
.step-shot { display: none; }

@media (max-width: 860px) {
  .pin { grid-template-columns: 1fr; }
  /* Kein Stapel und kein Pinnen: Jeder Absatz zeigt sein eigenes Bild. */
  .pin-media { display: none; }
  .pin-step { min-height: 0; }
  .pin-steps > * + * { margin-top: 54px; }
  .step-shot {
    display: block;
    max-width: 260px;
    margin: 0 auto 22px;
    border-radius: 22px;
    box-shadow: 0 20px 42px rgba(74, 44, 20, 0.16);
  }
}

/* ---------------- Nacht-Kapitel ---------------- */
/*
  Der Salon ist hell, die Arena dunkel. Genau wie in der App wechselt hier das ganze
  Bild, damit man merkt, dass man den Raum gewechselt hat.
*/
.night {
  background: var(--night);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.night h2, .night h3 { color: #fff; }
.night .body-text { color: rgba(255, 255, 255, 0.66); }
.night .body-text strong { color: #fff; }
.night .chapter-label { color: #b7a6ff; }
.night .statement { color: #fff; }
.night .phone::after { background: radial-gradient(closest-side, rgba(127, 90, 240, 0.4), transparent 70%); }
.night::before,
.night::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.5;
  pointer-events: none;
}
.night::before { width: 380px; height: 380px; background: #4a2ea8; top: -120px; left: -100px; }
.night::after { width: 420px; height: 420px; background: #7f5af0; bottom: -160px; right: -120px; opacity: 0.32; }

/* ---------------- Raster kleiner Bausteine ---------------- */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(24px, 4vw, 46px);
}
.thing { border-top: 1px solid var(--line); padding-top: 20px; }
.thing h3 { font-size: 20px; margin-bottom: 6px; }
.thing p { margin: 0; color: var(--ink-soft); font-size: 16.5px; }
.night .thing { border-top-color: rgba(255, 255, 255, 0.14); }
.night .thing p { color: rgba(255, 255, 255, 0.6); }

/* Zahlenreihe */
.facts { display: flex; flex-wrap: wrap; gap: clamp(30px, 6vw, 70px); }
.fact .n {
  font-family: var(--serif);
  font-size: clamp(38px, 6vw, 64px);
  line-height: 1;
  color: var(--orange-deep);
}
.fact p { margin: 6px 0 0; color: var(--ink-soft); font-size: 16px; max-width: 15em; }

/* ---------------- Blog ---------------- */

.post { max-width: 720px; }
.post + .post { margin-top: clamp(70px, 10vw, 130px); padding-top: clamp(50px, 7vw, 90px); border-top: 1px solid var(--line); }
.post .meta { font-size: 14px; color: var(--ink-faint); font-weight: 600; margin: 0 0 26px; }
.post p { margin: 0 0 20px; color: var(--ink-soft); font-size: clamp(17px, 1.85vw, 19.5px); }
.post p strong { color: var(--ink); }
.post .opening { font-size: clamp(20px, 2.4vw, 25px); color: var(--ink); line-height: 1.5; }
.post h3 { margin-top: 40px; }
.post ul { color: var(--ink-soft); padding-left: 22px; }
.post li { margin-bottom: 10px; }
.post .sign { display: flex; align-items: center; gap: 14px; margin-top: 34px; }
.post .sign img { width: 46px; }
.post .sign span { font-family: var(--serif); font-size: 20px; }

/* ---------------- Fuß ---------------- */

footer {
  border-top: 1px solid var(--line);
  padding: 46px 0 60px;
  font-size: 15px;
  color: var(--ink-faint);
}
footer .foot { display: flex; flex-wrap: wrap; gap: 26px; align-items: center; }
footer a { text-decoration: none; font-weight: 600; color: var(--ink-soft); }
footer a:hover { color: var(--orange-deep); }
footer .right { margin-left: auto; }

/* ---------------- Bewegung beim Scrollen ---------------- */

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
  will-change: opacity, transform;
}
.reveal.in { opacity: 1; transform: none; }

/*
  Wer „Bewegung reduzieren" eingestellt hat, bekommt die Inhalte sofort und ohne
  Animation. Das ist keine Kür: Für manche Menschen löst so eine Seite sonst Übelkeit aus.
*/
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .floaty, .scroll-hint span { animation: none; }
  .pin-stack img { transition: none; }
}

/* Legal */
.legal h2 { font-size: clamp(26px, 3.4vw, 36px); margin-top: 54px; }
/* Sprungziele (z. B. #konto-loeschen) nicht unter der klebenden Leiste verstecken. */
[id] { scroll-margin-top: 104px; }
@media (max-width: 420px) {
  .nav-inner { padding: 11px 16px; gap: 10px; }
  .logo { font-size: 21px; }
  .nav-links a { font-size: 14px; padding: 8px 9px; }
}
.legal dt { font-weight: 700; margin-top: 18px; color: var(--ink); }
.legal dd { margin: 2px 0 0; color: var(--ink-soft); }
.legal ul { color: var(--ink-soft); padding-left: 22px; }
.legal li { margin-bottom: 10px; }