/* Yacht Empire — Landingpage: die Bibliothek (Regal + Buchdetail)
 *
 * Eine EIGENE Datei, weil styles.css die gewachsene Grundlage der ganzen Seite
 * ist und ein grosser neuer Bereich sie unlesbar machen wuerde. Geladen wird
 * sie NACH styles.css — die Tokens aus deren :root gelten hier unveraendert
 * weiter, und es kommt kein einziger neuer Farbwert dazu: alles, was hier nach
 * Farbe aussieht, ist ein color-mix() aus jenen Tokens. Wer eine Farbe
 * braucht, mischt sie, statt sie zu erfinden — sonst laeuft die Seite beim
 * naechsten Token-Wechsel auseinander.
 *
 * Kein Framework, kein Build-Schritt: die Datei wird so ausgeliefert.
 *
 * Mobile first wie styles.css: alle Grundregeln gelten fuer 320 px, groessere
 * Viewports bekommen ausschliesslich additive @media-Bloecke.
 *
 * ⚠️ Zweisprachigkeit laeuft ueber DENSELBEN Mechanismus wie der Rest der
 * Seite (`data-lang` am <html>, Regeln in styles.css). Hier steht dafuer
 * KEINE eigene Zeile — das ist Absicht: ein zweiter Umschalter waere eine
 * zweite Wahrheit. Deshalb duerfen Sprachvarianten hier nur als eigene
 * Elemente stehen, nie als Attributtext (alt/aria-label), den CSS nicht
 * umschalten kann; wo beides noetig war (Bild-alt), stehen beide Sprachen
 * durch einen Schraegstrich getrennt im selben Attribut.
 *
 * ⚠️ Bewegung: animiert werden ausschliesslich `transform` und `opacity`, nie
 * Groessen oder Positionen — sonst rechnet der Browser bei jedem Bild neu um.
 * Der globale `prefers-reduced-motion`-Block in styles.css schaltet jede
 * Transition/Animation hart ab; die Skript-Animationen fragen die Abfrage
 * zusaetzlich selbst ab (bibliothek.js).
 */

/* ── Nur mit JavaScript ──────────────────────────────────────────────────
 * Ohne Skript (oder ohne <dialog>) bleibt `.bibliothek__blaetter` stehen und
 * das Regal ist eine Ankerliste auf zehn lesbare Buchseiten. Erst wenn
 * bibliothek.js sich als arbeitsfaehig erwiesen hat, setzt es diese Klasse —
 * das ist die Reihenfolge, in der die Seite nie leer sein kann.
 */
.hat-bibliothek .bibliothek__blaetter {
  display: none;
}

.bib-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Sichtbarer Fokus ueberall in der Bibliothek — die Bedienung haengt daran. */
.bibliothek :focus-visible,
.buchdetail :focus-visible {
  outline: 3px solid var(--accent-bright);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ── Das Regal ───────────────────────────────────────────────────────────
 * Ein Brett je Zeile, gezeichnet als sich wiederholender Verlauf auf der
 * Liste selbst. Das ist der einzige Weg, der auch die LETZTE Zeile traegt,
 * wenn sie nur halb voll ist — ein Brett je <li> haette dort unter zwei
 * Buechern als kurze Planke in der Luft gehangen.
 *
 * Die Rechnung dahinter (und der Grund fuer das padding-bottom):
 *   Zeilenhoehe = --fach + --brett + --luft, und row-gap ist --brett + --luft.
 *   Ohne das padding schneidet die Liste ihr letztes Brett ab.
 */
.regal {
  --fach: 190px;
  --brett: 7px;
  --luft: 26px;

  list-style: none;
  margin: var(--s-xl) 0 0;
  padding: 0 0 var(--brett);
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-auto-rows: var(--fach);
  align-items: end;
  column-gap: 0;
  row-gap: calc(var(--brett) + var(--luft));

  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent var(--fach),
    var(--surface-hi) var(--fach),
    var(--accent) calc(var(--fach) + 2px),
    var(--surface-hi) calc(var(--fach) + var(--brett)),
    transparent calc(var(--fach) + var(--brett)),
    transparent calc(var(--fach) + var(--brett) + var(--luft))
  );
}

.regal__fach {
  min-width: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

/* Ein Buchruecken. Die leichte Hoehenstreuung ist Dekoration und bedeutet
 * nichts — ein echtes Regal steht nun einmal nicht auf Kante. */
.ruecken {
  --h: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100%;
  height: calc(var(--fach) * var(--h));
  padding: 8px 2px 6px;
  text-decoration: none;
  color: var(--text);
  border-radius: 3px 7px 7px 3px;
  background: linear-gradient(
    100deg,
    color-mix(in srgb, var(--surface-hi) 88%, var(--accent)),
    var(--surface) 62%,
    color-mix(in srgb, var(--surface) 70%, var(--bg))
  );
  box-shadow:
    inset 2px 0 0 color-mix(in srgb, var(--accent) 34%, transparent),
    inset -6px 0 12px color-mix(in srgb, var(--bg) 70%, transparent),
    0 8px 16px color-mix(in srgb, var(--bg) 65%, transparent);
  transform-origin: 50% 100%;
  transition: transform 180ms cubic-bezier(0.2, 0.75, 0.25, 1);
  /* Kein Layout-Sprung beim Herausziehen: der Ruecken bewegt nur sich. */
  will-change: transform;
}

.regal__fach:nth-child(2) .ruecken {
  --h: 0.95;
}
.regal__fach:nth-child(4) .ruecken {
  --h: 0.91;
}
.regal__fach:nth-child(5) .ruecken {
  --h: 0.97;
}
.regal__fach:nth-child(6) .ruecken {
  --h: 0.93;
}
.regal__fach:nth-child(8) .ruecken {
  --h: 0.96;
}
.regal__fach:nth-child(9) .ruecken {
  --h: 0.9;
}

/* Die Einladung: der Ruecken kippt heraus, sobald man ihn anfasst. */
.ruecken:hover,
.ruecken:focus-visible {
  transform: translateY(-12px) rotate(-1.5deg);
}

/* Solange sein Buch offen ist, bleibt die Luecke im Regal sichtbar. */
.ruecken.ist-gezogen {
  transform: translateY(-22px) rotate(-3deg);
}

.ruecken__titel {
  flex: 1 1 auto;
  min-height: 0;
  writing-mode: vertical-rl;
  /* Buchruecken liest man von unten nach oben. */
  transform: rotate(180deg);
  text-align: center;
  font-size: 0.78rem;
  line-height: 1.35;
  letter-spacing: 0.02em;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ruecken__kopf {
  display: block;
  width: 64%;
  height: 4px;
  border-radius: 2px;
  flex: none;
}

.ruecken__nr {
  flex: none;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
}

/* Fertig: Goldfolie am Kopf, gefuellte Nummer, voller Kontrast. */
.ruecken--fertig .ruecken__kopf {
  background: linear-gradient(90deg, var(--accent), var(--accent-bright));
}

.ruecken--fertig .ruecken__nr {
  background: var(--accent);
  color: var(--on-accent);
}

/* Geplant: dasselbe Buch, nur noch nicht gebunden — matte Flaeche, gestrichelte
 * Folie, offene Nummer. Bewusst NICHT ausgegraut: ein Versprechen sieht nicht
 * aus wie ein Fehler. */
.ruecken--geplant {
  background: linear-gradient(
    100deg,
    color-mix(in srgb, var(--surface) 62%, var(--text-dim)),
    color-mix(in srgb, var(--surface) 78%, var(--text-dim)) 55%,
    color-mix(in srgb, var(--surface) 88%, var(--bg))
  );
  color: var(--text);
}

.ruecken--geplant .ruecken__kopf {
  height: 0;
  border-top: 3px dashed color-mix(in srgb, var(--accent) 70%, transparent);
}

.ruecken--geplant .ruecken__nr {
  color: var(--accent-bright);
  box-shadow: inset 0 0 0 1.5px
    color-mix(in srgb, var(--accent) 65%, transparent);
}

/* ── Legende und Hinweis ─────────────────────────────────────────────── */
.regal__legende {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-s);
  margin: var(--s-l) 0 0;
  color: var(--text-dim);
  font-size: 0.9rem;
}

.regal__legende > span + .legende__punkt {
  margin-left: var(--s-m);
}

.legende__punkt {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex: none;
}

.legende__punkt--fertig {
  background: var(--accent);
}

.legende__punkt--geplant {
  box-shadow: inset 0 0 0 2px
    color-mix(in srgb, var(--accent) 65%, transparent);
}

.regal__hinweis {
  margin: var(--s-l) 0 0;
  color: var(--text-dim);
  font-size: 0.9rem;
  max-width: var(--reading);
}

/* ── Eine Buchseite ──────────────────────────────────────────────────────
 * Dasselbe Markup dient beiden Zustaenden: ohne JavaScript steht sie
 * untereinander auf der Seite, mit JavaScript wandert genau eine davon in den
 * Dialog. Deshalb hat sie kein `position: fixed` und keine eigene Breite —
 * sie fuegt sich in das ein, was sie umgibt.
 */
.bibliothek__blaetter {
  margin-top: clamp(32px, 7vw, 64px);
  display: grid;
  gap: var(--s-xl);
}

.buchblatt {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-card);
  padding: var(--s-xl);
  box-shadow: var(--shadow);
}

.buchblatt__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-s);
  margin: 0 0 var(--s-s);
  font-size: 0.85rem;
  color: var(--text-dim);
}

.buchblatt__nr {
  color: var(--accent-bright);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.buchblatt__revier::before {
  content: "·";
  margin-right: var(--s-s);
  color: var(--text-dim);
}

.marke {
  padding: 3px 10px;
  border-radius: var(--radius-chip);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.marke--fertig {
  background: color-mix(in srgb, var(--good) 22%, transparent);
  border: 1px solid color-mix(in srgb, var(--good) 60%, transparent);
  color: var(--text);
}

.marke--geplant {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  border: 1px dashed color-mix(in srgb, var(--accent) 70%, transparent);
  color: var(--accent-bright);
}

.buchblatt__titel {
  margin: 0 0 var(--s-l);
  font-size: clamp(1.45rem, 6vw, 2rem);
}

.buchblatt__leib {
  display: grid;
  gap: var(--s-xl);
  grid-template-columns: 1fr;
  justify-items: center;
}

.buchblatt__text {
  width: 100%;
  min-width: 0;
}

.buchblatt__abstrakt {
  font-size: clamp(1.05rem, 4.2vw, 1.2rem);
  color: var(--text);
  max-width: var(--reading);
}

/* ── Das Cover ───────────────────────────────────────────────────────── */
.buchblatt__cover {
  position: relative;
  margin: 0;
  width: min(240px, 62vw);
  aspect-ratio: 3 / 4;
  border-radius: 4px 12px 12px 4px;
  overflow: hidden;
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow);
  /* Der gezeichnete Titel misst sich an der Coverbreite, nicht am Fenster. */
  container-type: inline-size;
  /* Buchruecken links, wie bei einem aufgestellten Band. */
  background:
    linear-gradient(
        90deg,
        color-mix(in srgb, var(--bg) 70%, transparent) 0,
        transparent 14px
      )
      no-repeat,
    var(--surface);
}

.buchblatt__bild {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* **Der gezeichnete Titel.**
 *
 * Buch 2 traegt auf seinem Motiv eine LEERE Titelkartusche — der Titel steht
 * nicht im Bild, die App schreibt ihn zur Laufzeit hinein
 * (`BookCoverSpec.drawnTitle`, app/lib/content/book_library.dart). Grund ist
 * gemessen, nicht aesthetisch: das Bildmodell setzt „DER RISS" zuverlaessig
 * und „ZWISCHEN ZWEI MEEREN" in fuenf Laeufen kein einziges Mal richtig.
 *
 * Die vier Werte hier sind DIESELBEN wie dort (titleLeft/Top/Right/Bottom
 * 0,26 / 0,55 / 0,74 / 0,84), am Bild abgelesen und auf die Bildkanten
 * normiert — sie gelten deshalb fuer jede Skalierung.
 *
 * ⚠️ Der Titel wird NICHT uebersetzt: er ist der Text, der auf dem Buchdeckel
 * gepraegt steht, kein Fliesstext. Deshalb traegt er kein `lang`-Attribut und
 * steht nur einmal im Markup.
 *
 * Die zwei gegenlaeufigen Schatten (dunkel nach unten, hell nach oben) sind
 * die billigste Praegung, die es gibt — dieselbe wie in
 * app/lib/features/start/book_cover_screen.dart.
 */
.buchblatt__praegung {
  position: absolute;
  left: 26%;
  top: 55%;
  width: 48%;
  height: 29%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--accent-bright);
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.15;
  /* Rueckfall fuer Browser ohne Container-Queries; danach die echte Groesse. */
  font-size: 0.9rem;
  font-size: min(7.4cqw, 34px);
  text-shadow:
    0 2px 3px color-mix(in srgb, var(--bg) 85%, transparent),
    0 -1px 1px color-mix(in srgb, var(--text) 45%, transparent);
  pointer-events: none;
}

/* ── Der Entwurf: ein Buch, das es noch nicht gedruckt gibt ──────────────
 * Kein grauer Kasten und kein Platzhalterbild, sondern ein typografischer
 * Deckel in denselben Tokens: Goldrahmen, Titel, Revier. Er sagt „kommt
 * noch", nicht „fehlt".
 */
.buchblatt__cover--entwurf {
  background: linear-gradient(
    165deg,
    color-mix(in srgb, var(--surface-hi) 85%, var(--accent)),
    var(--surface) 55%,
    color-mix(in srgb, var(--surface) 75%, var(--bg))
  );
}

.entwurf {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-s);
  padding: 12% 14%;
  text-align: center;
}

.entwurf__rahmen {
  position: absolute;
  inset: 7%;
  border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
  border-radius: 4px;
}

.entwurf__rahmen::after {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px dashed color-mix(in srgb, var(--accent) 38%, transparent);
  border-radius: 2px;
}

.entwurf__nr {
  color: var(--accent-bright);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.entwurf__titel {
  color: var(--text);
  font-weight: 700;
  line-height: 1.2;
  font-size: 1.05rem;
  font-size: min(11cqw, 26px);
  text-shadow: 0 2px 3px color-mix(in srgb, var(--bg) 75%, transparent);
}

.entwurf__revier {
  color: var(--text-dim);
  font-size: 0.8rem;
  font-size: min(6cqw, 15px);
}

.entwurf__fuss {
  margin-top: var(--s-s);
  padding: 3px 10px;
  border-radius: var(--radius-chip);
  border: 1px dashed color-mix(in srgb, var(--accent) 60%, transparent);
  color: var(--accent-bright);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ── Zahlen, Häfen, Akte ─────────────────────────────────────────────── */
.zahlen {
  list-style: none;
  margin: var(--s-l) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-s);
}

.zahlen li {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 6px var(--s-m);
  border-radius: var(--radius-chip);
  background: color-mix(in srgb, var(--surface-hi) 70%, transparent);
  border: 1px solid var(--glass-border);
  color: var(--text-dim);
  font-size: 0.88rem;
}

.zahlen b {
  color: var(--accent-bright);
  font-size: 1.15rem;
}

.buchblatt__haefen,
.buchblatt__hinweis,
.buchblatt__herkunft {
  margin: var(--s-m) 0 0;
  color: var(--text-dim);
  font-size: 0.92rem;
  max-width: var(--reading);
}

.buchblatt__haefen span[lang] {
  color: var(--accent-bright);
  margin-right: 4px;
}

.buchblatt__akte {
  margin-top: var(--s-l);
}

.buchblatt__akte h4 {
  margin: 0 0 var(--s-s);
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-bright);
}

.buchblatt__akte ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.buchblatt__akte li {
  display: flex;
  gap: var(--s-m);
  align-items: baseline;
  font-size: 0.95rem;
  color: var(--text-dim);
}

.akt__nr {
  flex: none;
  min-width: 3.2ch;
  color: var(--accent);
  font-weight: 700;
  letter-spacing: 0.08em;
}

.buchblatt__cta {
  margin-top: var(--s-xl);
}

.buchblatt__cta .btn {
  min-height: 48px;
}

/* ── Die Vedute ──────────────────────────────────────────────────────── */
.buchblatt__vedute {
  margin: var(--s-xl) 0 0;
}

.buchblatt__vedute img {
  width: 100%;
  border-radius: var(--radius-card);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow);
}

/* ── Der Dialog ──────────────────────────────────────────────────────────
 * Ein natives <dialog>: Esc, Fokusfalle und Hintergrund-Inertheit kommen vom
 * Browser, nicht aus diesem Skript. Der Dialog selbst fuellt das ganze
 * Fenster und ist durchsichtig — so trifft ein Klick „daneben" tatsaechlich
 * das <dialog>-Element, und die Schliess-Erkennung braucht keinen zweiten,
 * unsichtbaren Layer.
 */
.buchdetail {
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  margin: 0;
  padding: var(--s-l);
  border: 0;
  background: transparent;
  color: var(--text);
  overflow: auto;
  overscroll-behavior: contain;
}

.buchdetail::backdrop {
  background: color-mix(in srgb, var(--bg) 93%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.buchdetail__rahmen {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 900px;
  margin: auto;
  padding: var(--s-l);
  border-radius: var(--radius-card);
  background: var(--glass-hi);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* Im Dialog traegt der Rahmen schon Karte und Schatten — die Buchseite darin
 * darf sie nicht doppelt haben. */
.buchdetail .buchblatt {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}

/* Der Schliessen-Knopf klebt oben mit — eine lange Buchseite scrollt sonst
 * genau die Schaltflaeche weg, mit der man sie wieder loswird. Scrollcontainer
 * ist das <dialog> selbst, `sticky` misst sich also daran. */
.buchdetail__zu {
  position: sticky;
  top: 0;
  z-index: 2;
  align-self: flex-end;
  flex: none;
  margin-bottom: calc(var(--s-s) * -1);
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--glass-border);
  background: var(--surface-hi);
  color: var(--text);
  font: inherit;
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
}

.buchdetail__zu:hover {
  background: var(--accent);
  color: var(--on-accent);
}

.buchdetail__buehne {
  min-width: 0;
}

.buchdetail__buehne:focus {
  outline: none;
}

.buchdetail__fuss {
  margin: var(--s-l) 0 0;
  color: var(--text-dim);
  font-size: 0.85rem;
  text-align: center;
}

/* ── Breakpoints (additiv) ───────────────────────────────────────────── */
@media (min-width: 768px) {
  .regal {
    --fach: 230px;
    max-width: 860px;
    grid-template-columns: repeat(10, minmax(0, 1fr));
  }

  .ruecken__titel {
    font-size: 0.85rem;
  }

  .buchblatt__leib {
    grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
    align-items: start;
    justify-items: start;
  }

  .buchblatt__cover {
    width: 100%;
  }

  .buchdetail {
    padding: var(--s-xl);
  }

  .buchdetail__rahmen {
    padding: var(--s-xl);
  }
}

@media (min-width: 1024px) {
  .regal {
    --fach: 260px;
  }

  .buchblatt__leib {
    grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
    gap: clamp(24px, 4vw, 40px);
  }
}