/* =============================================================
   library-responsive.css — Bibliothek auf Tablet-Breiten

   Warum eine eigene Datei: library-page.css (677 Z.) und library-team.css
   (614 Z.) liegen beide bereits über der ~600-Zeilen-Grenze des Projekts,
   dort darf nichts Neues mehr hinein.

   Zwei Ursachen stecken hinter allen Funden hier:
   1. Zwischen dem Handy-Block (≤700px) und Desktop klafft eine Lücke, in die
      sämtliche iPad-Hochformate fallen (744–1024px).
   2. Die Team-Zeilen hängen an Viewport-Breakpoints, obwohl die Enge aus der
      Panel-Spalte kommt — die ist rund 270px schmaler als der Viewport, der
      Breakpoint greift also viel zu spät. Sie werden hier auf Flex mit
      Umbruch umgestellt und richten sich damit nach dem echten Platz.

   Muss NACH library-page.css und library-team.css geladen werden.
   ============================================================= */

/* ── 1) Kopfzeile: braucht mit Statistikleiste ~839px, ohne sie ~583px ──
   Hochkant lief deshalb der primäre „Neues Play"-Button rechts aus dem Bild. */
/* 1100 statt 1023: das iPad 12,9" ist hochkant exakt 1024px breit und lag
   damit knapp auf der falschen Seite der Grenze — die Statistikleiste blieb
   stehen und drückte den Titel „Bibliothek" auf 93px zusammen. */
@media (max-width: 1100px) {
  .lib-page-header { gap: 12px; padding: 12px 16px; }
  .lib-page-stats,
  .lib-page-subtitle { display: none; }
}
/* Unabhängig vom Breakpoint: der Titel schneidet ab, statt aus seinem Kasten
   zu laufen. */
.lib-page-title-block { min-width: 0; }
.lib-page-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── 2) Kartenaktionen umbrechen statt abschneiden ──
   .lib-page-card hat overflow:hidden — was nicht in die Zeile passt, ist weg
   (betraf Verschieben und Löschen). */
.lib-page-card-actions { flex-wrap: wrap; }
.lib-page-card-actions .lib-action-primary { flex: 1 1 100%; }

/* ── 3) Playbook-Zeile: fünf Aktionsbuttons drückten den Namen auf 0px ── */
.lib-pb-row-head { flex-wrap: wrap; }
.lib-pb-row-title-block { flex: 1 1 240px; min-width: 0; }
.lib-pb-row-actions { flex-wrap: wrap; flex-shrink: 1; }

/* ── 4) Team-Mitgliederzeile: Grid → Flex ──
   Das Grid hatte fünf Spuren, bei Status „ausstehend" aber sechs Kinder — das
   sechste landete in einer Geisterzeile. Gleichzeitig quetschte es das
   Namensfeld auf 18px, „Entfernen" war nur per Horizontal-Scroll erreichbar. */
.lib-team-member-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
}
.lib-team-member-main { flex: 1 1 100%; min-width: 0; }
.lib-team-member-row > .lib-select-sm { flex: 1 1 150px; min-width: 0; }
.lib-team-member-row > .lib-team-member-pill,
.lib-team-member-row > .lib-team-mini-btn { flex: 0 0 auto; }

/* ── 5) „Mitglied hinzufügen": vier Spuren, fünf Kinder ── */
.lib-team-add-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; flex-shrink: 0;
}
.lib-team-add-row > .input-text { flex: 1 1 160px; min-width: 0; }
.lib-team-add-row > .lib-select-sm { flex: 1 1 150px; min-width: 0; }
.lib-team-add-row > .btn { flex: 0 0 auto; margin-left: auto; }