/* ==========================================================================
   BookTo — Start, Bücher (Bibliothek) und „Buch löschen"

   Bildschirme 1, 2 und 7 aus dem Design-Handoff (Juli 2026).

   Eigene Klassennamen mit Absicht: die alten .tile-, .home__- und
   .bookcard-Regeln stehen noch in reader.css, die NACH dieser Datei
   geladen wird. Gleiche Namen wuerden dort ueberschrieben — mit eigenen
   Namen ist die Reihenfolge egal.

   Farben kommen aus tokens.css, damit normal, dark, high, sepia und blue
   alle funktionieren. Feste Werte stehen nur dort, wo der Handoff sie
   ausdruecklich vorgibt (Verlauf der Lesen-Kachel, Rot der Loeschaktion).
   ========================================================================== */

/* ── Verweilen: Kinder ueber den Dwell-Punkt legen ──────────────────────
   shared/dwell-dom.css kennt nur .btn, .tile, .reader__nav und .imgpick.
   Die neuen Flaechen brauchen dieselbe Regel, sonst deckt der wachsende
   Punkt die Beschriftung zu.

   ABER: Das Deckbild ist ausgenommen. Der Verweilpunkt wächst aus der Mitte
   der Karte, und die Mitte liegt im Bild — mit z-index 3 auf dem Cover
   verschwand er vollständig dahinter, und man sah beim Verweilen nicht,
   ob überhaupt etwas passiert. Jetzt: Bild unter dem Punkt (1), Punkt
   darüber (2, aus der Engine), Beschriftung ganz oben (3). */
.hometile > *:not(.dwell-dot),
.libcard__body > *:not(.dwell-dot) {
  position: relative;
  z-index: 3;
}
.libcard__body > .libcard__cover,
.hometile > .hometile__cover {
  z-index: 1;
}

/* Deckbild als Zeichen (Emoji im mitgelieferten Buch). */
.coverchar {
  font-size: 44px;
  line-height: 1;
}

/* ==========================================================================
   Bildschirm 1 — Start
   ========================================================================== */

.start {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 24px 28px 28px;
}

/* ── Weiterlesen ──────────────────────────────────────────────────────── */
.resume {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  padding: 16px 20px;
  background: var(--color-surface);
  border: 2px solid var(--color-hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.resume__cover {
  width: 88px;
  height: 88px;
  border-radius: 16px;
  overflow: hidden;
  background: var(--color-primary-bg);
  color: var(--color-primary-dark);
  display: flex;
  align-items: center;
  justify-content: center;
}
.resume__cover img { width: 100%; height: 100%; object-fit: contain; }
.resume__cover svg { width: 40px; height: 40px; }

.resume__meta { min-width: 0; display: block; }
.resume__eyebrow {
  display: block;
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-primary-dark);
}
.resume__title {
  display: block;
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.25;
  color: var(--color-text);
}
.resume__sub {
  display: block;
  font-size: 1.0625rem;
  color: var(--color-text-secondary);
}
.resume__go {
  min-height: var(--target-primary);
  padding: 0 32px;
  font-size: 1.3125rem;
  font-weight: 700;
}
.resume__go .btn__ico { width: 28px; height: 28px; }

/* ── Kacheln: Lesen gross, Machen und Einstellungen klein ─────────────── */
/* Wachsen ja, schrumpfen nein (`flex-shrink: 0`). Mit dem alten `flex: 1`
   presste die Startseite die Kacheln auf die Resthoehe und schnitt ab, was
   nicht mehr hineinpasste — `.hometile` hat `overflow: hidden` fuer den
   Verweilpunkt, es gab also nicht einmal einen Rollbalken. Gemessen: auf
   einem 390er iPhone standen „Machen" und „Einstellungen" 84 px hoch vor
   105 px Inhalt (Untertitel weg), auf 360 × 640 die Lesen-Kachel 148 px vor
   201 px. Reicht die Hoehe nicht, rollt jetzt `.screen__body`. */
.homegrid {
  flex: 1 0 auto;
  display: grid;
  /* `minmax(0, …)`: ein blankes `fr`-Gleis kann nicht schmaler werden als
     sein laengster Inhalt und schoebe die Kacheln bei grosser Schrift ueber
     den Rand. */
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 20px;
}
.homeside {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 20px;
  min-height: 0;
}

.hometile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 12px;
  padding: 36px;
  text-align: left;
  background: var(--color-surface);
  border: 2px solid var(--color-hairline);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  color: var(--color-text);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  min-height: var(--target-primary);
  touch-action: manipulation;
  transition: transform var(--transition), box-shadow var(--transition),
              border-color var(--transition);
}
/* Grosse Ziele nicht skalieren — das wirkt bei Augensteuerung unruhig. */
.hometile:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
  border-color: var(--color-primary);
}

.hometile__ico {
  width: 112px;
  height: 112px;
  border-radius: 26px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary-bg);
  color: var(--color-primary-dark);
}
.hometile__ico svg { width: 56px; height: 56px; }
/* Der Verlauf ist im Handoff festgelegt; Weiss darauf traegt in allen
   Farbschemata. */
.hometile--big .hometile__ico {
  background: linear-gradient(135deg, #4b698c, #5ac8fa);
  color: #ffffff;
}
.hometile__title {
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 2.375rem;
  line-height: 1.1;
}
.hometile__sub {
  font-size: 1.1875rem;
  line-height: 1.35;
  color: var(--color-text-secondary);
}

.hometile--row {
  flex-direction: row;
  align-items: center;
  gap: 20px;
  padding: 24px 28px;
}
.hometile--row .hometile__ico { width: 72px; height: 72px; border-radius: 20px; }
.hometile--row .hometile__ico svg { width: 36px; height: 36px; }
.hometile__txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.hometile--row .hometile__title { font-size: 1.625rem; }
.hometile--row .hometile__sub { font-size: 1.0625rem; }

/* Gesperrt: kein Verblassen, sondern der Grund im Klartext (Befund 02). */
.hometile[disabled] {
  cursor: not-allowed;
  background: var(--color-surface-alt);
  border-color: var(--color-border);
}
.hometile[disabled]:hover {
  transform: none;
  box-shadow: var(--shadow-sm);
  border-color: var(--color-border);
}
.hometile__why {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: var(--radius-md);
  background: var(--color-warning-bg);
  color: var(--color-warning);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
}
.hometile__why svg { width: 20px; height: 20px; flex: 0 0 auto; }

/* ==========================================================================
   Bildschirm 2 — Bücher
   ========================================================================== */

.lib { min-height: 0; }

/* ── Kopf: in beiden Betriebsarten identisch (Befund 10) ──────────────── */
.libhead {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 28px;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-hairline);
  flex-wrap: wrap;
}
.libhead__home {
  width: var(--target-primary);
  height: var(--target-primary);
  padding: 0;
  flex: 0 0 auto;
}
.libhead__home svg { width: 36px; height: 36px; }
.libtitle {
  flex: 1;
  min-width: 0;
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 1.75rem;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Raster ───────────────────────────────────────────────────────────── */
.libbody { padding: 24px 28px 28px; }
/* ── Suchen und nach Schlagwort filtern ──────────────────────────────────
   Eigene Zeile unter dem Kopf: das Suchfeld links, die Schlagwörter
   daneben. Die Schlagwörter sind Ziele wie jeder andere Knopf — 64 px hoch,
   damit sie auch mit Augensteuerung und Tastern erreichbar sind. */
.libfilter {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 28px;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-hairline);
}
.libsearch {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 1 320px;
  min-width: 200px;
  height: var(--target-min);
  padding: 0 16px;
  border: 2px solid var(--color-border-strong);
  border-radius: 999px;
  background: var(--color-bg);
}
.libsearch__ico { width: 26px; height: 26px; flex: 0 0 auto; color: var(--color-text-secondary); }
.libsearch input {
  flex: 1;
  min-width: 0;
  /* Volle Hoehe der Pille: Ohne das war das Eingabefeld nur 30 px hoch,
     waehrend der Rahmen 64 px misst - wer knapp darueber oder darunter tippte,
     traf ins Leere. Gemessen am 01.08.2026 auf 375 x 812. Die Pille ist ein
     <div>, ein Tipp darauf setzt den Fokus also NICHT von selbst. */
  height: 100%;
  border: 0;
  background: none;
  outline: none;
  font-size: var(--text-base);
}
/* Die Schlagwörter wachsen mit der Zahl der Bücher. Bei dreiunddreißig
   Büchern sind es rund zwanzig Knöpfe: gemessen auf 375 × 812 nahm die
   Leiste 737 px und ließ der Bibliothek darunter 32 px — man sah die
   Schlagwörter und einen Streifen. Sie bekommt deshalb eine Höhengrenze und
   rollt selbst. Gerollt wird SENKRECHT: eine waagerecht rollende Leiste ist
   mit Augensteuerung und Tastern kaum zu bedienen. Die Knöpfe bleiben
   64 px hoch. */
/* Die Schlagwörter stehen seit dem 02.08.2026 im Filter-Dialog, nicht mehr
   offen in der Leiste — dort waren es 23 Verweil-Ziele in einer
   Scan-Gruppe. Deshalb hier keine Höhenbegrenzung und kein eigenes Rollen
   mehr: Der Dialog rollt als Ganzes. */
.libtags {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 8px;
  min-width: 0;
}
/* Schiebt „Aufs Gerät holen" ans rechte Ende der Leiste: Es gehört zum
   ganzen Regal, nicht zur Suche daneben. Auf schmalen Geräten fällt der
   Abstandhalter auf Breite 0 zusammen und der Knopf rutscht in die
   nächste Zeile. */
.libfilter__spacer { flex: 1 1 0; min-width: 0; }
.libmit[aria-disabled="true"] { opacity: .75; }

.filtgrp {
  font-family: var(--font-label);
  font-size: var(--text-base);
  font-weight: 600;
  margin: var(--space-5) 0 var(--space-3);
}
.filtgrp:first-child { margin-top: 0; }
.libtag__n {
  margin-left: 8px;
  opacity: .65;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}
.libtag.is-on .libtag__n { opacity: .85; }
.libtag {
  /* ⚠️ position: relative ist hier PFLICHT, nicht Kosmetik. Die
     Verweil-Steuerung haengt ihren Punkt als Kind in jeden Knopf
     (js/input.js), und `.dwell-dot` ist absolut auf 50/50 gesetzt. Ohne
     eigenen Positionierungs-Kontext sucht er sich den naechsten
     positionierten Vorfahren — hier gab es keinen, also das Fenster selbst:
     Der Punkt stand mitten auf der Seite statt auf dem Schlagwort
     (Befund Lars, 02.08.2026). `.btn` hat die Regel von Anfang an. */
  position: relative;
  overflow: hidden;
  min-height: var(--target-min);
  padding: 0 18px;
  border: 2px solid var(--color-hairline);
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-label);
  font-size: var(--text-base);
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
}
.libtag:hover { background: var(--color-primary-bg); }
.libtag.is-on {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-inverse);
}

/* ── Das Regal ────────────────────────────────────────────────────────────
   Die Bücher stehen auf einem Brett, statt als Kacheln zu schweben. Zwei
   Regeln tragen das:

   1. Die Umschlagfläche ist bei allen gleich hoch, und die Bilder sitzen
      unten auf. Dadurch liegt das Brett in einer Reihe auf derselben Höhe —
      ohne dass irgendwo eine Reihenhöhe gerechnet werden müsste, die bei
      großer Schrift sowieso nicht stimmt.
   2. Die Spalten stehen dicht (10 px), damit die Bretter fast durchlaufen.
      Zwischen den Reihen ist mehr Luft (30 px), sonst klebt das nächste
      Brett am Titel darüber.

   Farbe kommt aus den Tokens, nicht aus einem Holzton: Es gibt vier
   Farbschemata (hell, dunkel, sepia, blau, dazu hoher Kontrast) — ein
   gemaltes Brett wäre in dreien davon ein Fremdkörper. */
.libgrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 10px;
  row-gap: 30px;
  align-items: start;
}
.libsec {
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 1.25rem;
  margin: 28px 0 12px;
  color: var(--color-text-secondary);
}
.libsec__hint { margin-bottom: 12px; }

/* ── Buchkarte ────────────────────────────────────────────────────────── */
.libcard {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  /* Immer 3 px, damit die Auswahl nichts verschiebt — nur die Farbe
     wechselt (Farbe UND Form: dazu der Haken oben rechts). Ohne Auswahl
     ist der Rahmen durchsichtig: Im Regal soll das Buch stehen, nicht
     seine Kachel. */
  border: 3px solid transparent;
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.libcard.is-picked {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
}
/* Beim Zeigen hebt sich das Buch leicht an — dieselbe Rückmeldung wie bei
   einem Knopf, nur an einem Gegenstand. Keine Bewegung des Umschlags: Wer
   mit Augensteuerung zielt, verliert sonst das Ziel unter dem Zeiger. */
.libcard:hover { box-shadow: var(--shadow-sm); }

.libcard__body {
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  flex: 1;
  touch-action: manipulation;
}
.libcard__cover {
  display: flex;
  /* Die Bücher STEHEN auf dem Brett — sie schweben nicht in der Mitte. */
  align-items: flex-end;
  justify-content: center;
  height: 176px;
  padding-bottom: 9px;                 /* Platz für das Brett darunter */
  background: none;
  color: var(--color-primary-dark);
  overflow: hidden;
  position: relative;
}

/* Das Brett. Es liegt unter jedem Umschlag auf derselben Höhe — dadurch
   bildet eine Reihe eine durchgehende Linie, ohne dass irgendwo eine
   Reihenhöhe gerechnet werden müsste (die bei großer Schrift ohnehin nicht
   stimmen würde). Farbe aus den Tokens, damit sie in allen fünf
   Farbschemata mitgeht. */
.libcard__cover::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 9px;
  background: var(--color-border-strong);
  border-radius: 2px;
}

/* `contain`, nicht `cover`: Ein Buchdeckel ist ein Bild, das man erkennen
   soll. Beschnitten zeigte die Karte vom Drachen nur einen Flügel und vom
   Umschlag die halbe Figur — bei Büchern, die man am Bild wiedererkennt,
   ist das der Unterschied zwischen Finden und Suchen.

   Die Maße stehen jetzt auf `max-*` statt auf 100 %: Ein Bild, das die
   volle Breite belegt, aber niedriger ist, stünde sonst mit Luft unter
   sich auf dem Brett. Der Schatten sitzt am Bild (`drop-shadow`), nicht am
   Kasten — sonst läge er auch dort, wo gar kein Bild ist. */
.libcard__cover img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .3));
}
.libcard__cover svg { width: 48px; height: 48px; }

/* Haken: 52 px, rund, oben rechts — die Form traegt die Auswahl mit. */
.libpick {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-text-inverse);
  border: 3px solid var(--color-surface);
  display: none;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md);
}
.libpick svg { width: 28px; height: 28px; }
.libcard.is-picked .libpick { display: flex; }

.libcard__meta { display: block; padding: 12px 14px; }
.libcard__title {
  display: block;
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.3;
  color: var(--color-text);
}
.libcard__sub {
  display: block;
  margin-top: 4px;
  font-size: 1rem;
  color: var(--color-text-secondary);
}
/* Mitgeliefert: kein mattes Kaertchen, sondern ein Satz, der erklaert,
   warum hier nichts auszuwaehlen ist. Nur im Auswahlmodus sichtbar. */
.libcard__keep { display: none; }
.lib--select .libcard__keep {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 6px 10px;
  border-radius: var(--radius-md);
  background: var(--color-surface-alt);
  color: var(--color-text-secondary);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.25;
}
.libcard__keep svg { width: 20px; height: 20px; flex: 0 0 auto; }

.libcard__acts {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  padding: 10px;
  border-top: 1px solid var(--color-border);
}
.libcard__acts .btn { min-height: var(--target-min); padding: 0 12px; }
.libcard__edit {
  width: var(--target-min);
  height: var(--target-min);
  padding: 0;
}
.libcard__edit svg { width: 26px; height: 26px; }

/* ── Auswahlleiste: faehrt unten ein ──────────────────────────────────── */
.libbar { display: none; }
.lib--select .libbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  min-height: var(--target-primary);
  padding: 12px 28px;
  background: var(--glass-strong);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-top: 1.5px solid var(--color-hairline);
  animation: libbar-in var(--transition) both;
}
@keyframes libbar-in {
  from { transform: translateY(100%); }
  to   { transform: none; }
}
.libbar__count {
  flex: 1;
  min-width: 160px;
  font-size: 1.1875rem;
  font-weight: 700;
}

/* ==========================================================================
   Bildschirm 7 — Buch löschen

   Alles unter .modal--del ist absichtlich zweifach geschachtelt: reader.css
   bringt eine zweite, aeltere .modal-Fassung mit und wird spaeter geladen.
   ========================================================================== */

.modal.modal--del { background: rgba(26, 58, 106, .55); }

.modal--del .modal__box {
  width: 720px;
  max-width: 100%;
  max-height: 92dvh;
  display: flex;
  flex-direction: column;
  /* Kein eigenes `overflow: hidden` mehr — es setzte die Regel in base.css
     ausser Kraft, die den Kasten rollen laesst, wenn Kopf und Fuss allein
     schon zu hoch sind. Ohne sie lag „Endgueltig loeschen" auf einem 360er
     Telefon mit der groessten Schrift 180 px unter dem Bildschirmrand. */
}
.modal--del .modal__head {
  align-items: flex-start;
  gap: 16px;
  padding: 24px;
  border-bottom: 1px solid var(--color-hairline);
}
.del__head { display: block; min-width: 0; }
.modal--del .modal__head h2 {
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 1.625rem;
  line-height: 1.2;
}
.modal--del .modal__sub {
  display: block;
  margin-top: 6px;
  font-size: 1.125rem;
  line-height: 1.4;
  color: var(--color-text-secondary);
}

.modal--del .modal__body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-y: auto;
}
.del__book {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  background: var(--color-surface-alt);
  border-radius: var(--radius-lg);
}
.del__cover {
  width: 76px;
  height: 76px;
  flex: 0 0 auto;
  border-radius: 14px;
  overflow: hidden;
  background: var(--color-primary-bg);
  color: var(--color-primary-dark);
  display: flex;
  align-items: center;
  justify-content: center;
}
.del__cover img { width: 100%; height: 100%; object-fit: contain; }
.del__cover svg { width: 34px; height: 34px; }
.del__txt { display: block; min-width: 0; }
.del__title {
  display: block;
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.3;
}
.del__meta {
  display: block;
  font-size: 1.0625rem;
  color: var(--color-text-secondary);
}
.del__more { font-size: 1.0625rem; color: var(--color-text-secondary); }

.modal--del .note--ok {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.35;
}
.modal--del .note--ok svg { width: 26px; height: 26px; flex: 0 0 auto; }

/* Nebeneinander, solange es geht — untereinander erst, wenn es sein muss.

   Vorher stapelte eine Breitenregel die beiden Knoepfe schon ab 1080 px.
   Auf einem quer gehaltenen Telefon (844 x 390) wurde der Fuss damit 228 px
   hoch, also mehr als die halbe Bildschirmhoehe, und „Endgueltig loeschen"
   stand 50 px unter dem unteren Rand — der Dialog war nicht zu Ende zu
   bringen. Mit Umbruch statt Raster entscheidet der Platz, nicht eine
   Zahl in einer Medienabfrage. */
.modal--del .modal__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 20px 24px;
  border-top: 1px solid var(--color-hairline);
}
.modal--del .modal__foot .btn {
  flex: 1 1 190px;
  min-height: var(--target-primary);
  font-size: 1.1875rem;
  font-weight: 700;
}
/* „Endgueltig loeschen" traegt mehr Text und bekommt darum mehr Platz —
   dieselbe Gewichtung wie im Entwurf (1 zu 1,4). */
.modal--del .modal__foot .btn:last-child { flex-grow: 1.4; }

/* Auf kleinen Geraeten gilt die schlanke Fassung aus base.css auch hier.
   Sie muss eigens stehen: `.modal--del .modal__head` sticht in der
   Spezifitaet das dortige `.modal__head`, und home.css laedt spaeter. */
@media (max-height: 620px), (max-width: 560px) {
  .modal--del .modal__head { padding: var(--space-3) var(--space-4); }
  .modal--del .modal__foot { padding: var(--space-2) var(--space-4); }
  .modal--del .modal__body { padding: var(--space-3) var(--space-4); }
}

/* ==========================================================================
   Schmale Geräte
   ========================================================================== */

@media (max-width: 1080px) {
  .homegrid { grid-template-columns: 1fr; }
  .homeside { grid-template-rows: auto auto; }
  .hometile--big { padding: 28px; }
  .hometile--big .hometile__ico { width: 88px; height: 88px; }
  .hometile--big .hometile__ico svg { width: 44px; height: 44px; }
  .hometile--big .hometile__title { font-size: 2rem; }
  .libgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .start { padding: 16px; gap: 16px; }
  .resume { grid-template-columns: 88px 1fr; }
  .resume__go { grid-column: 1 / -1; }
  .libhead { padding: 10px 16px; }
  .libbody { padding: 16px; }
  .libgrid { grid-template-columns: 1fr; }
  .lib--select .libbar { padding: 12px 16px; }
  .libfilter { padding: 10px 16px; }
  /* Hier stand einmal `.libtags { max-height: 152px }` — auf dem Telefon
     zählte jede Zeile für die Bücher, und die Schlagwörter standen offen in
     der Leiste. Sie stehen jetzt im Dialog; die Leiste kostet noch eine
     Zeile mit Suchfeld und Filter-Knopf. */
}

/* ==========================================================================
   Galerie — „Bücher von anderen"
   Der Bildschirm borgt sich die Klassen der Bibliothek. Hier steht nur,
   was es dort nicht schon gibt.
   ========================================================================== */

.galsearch {
  max-width: 260px;
  min-width: 140px;
}

.galmore {
  display: flex;
  justify-content: center;
  margin-top: var(--space-5);
}

/* Die Werbekarte auf der Startseite: lädt zum Teilen ein, ohne zu drängen.
   Sie steht bewusst UNTER den Kacheln — wer lesen oder machen will, kommt
   zuerst dran. */
.share {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.share__ico {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: var(--radius-md);
  background: var(--color-primary-bg);
  color: var(--color-primary-dark);
  flex: none;
}

.share__ico svg { width: 32px; height: 32px; }

.share__title { display: block; font-weight: 700; font-size: 1.25rem; }
.share__sub   { display: block; color: var(--color-text-secondary); }

@media (max-width: 720px) {
  .share { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .galsearch { max-width: 100%; }
}

/* Hinweis über der Galerie-Liste. Steht vor den Kacheln, damit klar ist,
   wessen Bücher man da sieht, bevor man eines antippt. */
.galnote {
  margin: 0 0 var(--space-4);
  max-width: 70ch;
}