/* ==========================================================================
   BookTo — Studio (Bildschirm 5) und Bildsuche (Bildschirm 8)

   Design-Handoff Juli 2026. Grundsaetze, die hier ueberall durchschlagen:
   · Trefferflaechen 64 px, Hauptaktionen 88 px — nie kleiner.
   · Nichts unter 16 px. Der Bildnachweis war 12,5 px (Befund 07) und ist
     jetzt 16 px in zwei Zeilen.
   · Zustaende nie ueber Deckkraft: Auswahl traegt Rand UND Haken, Gesperrtes
     traegt Klartext.
   · Farben aus tokens.css. Feste Werte nur dort, wo der Handoff sie nennt.
   ========================================================================== */

/* ── Geruest: Kopf, Mitte, Seitenstreifen ─────────────────────────────── */

.stu {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Unter der Glasleiste: alles, was das Studio beim Laden austauscht.
   Die Leiste selbst bleibt stehen — sie wird zentral in js/app.js
   verdrahtet, und ein Neuaufbau von #app haette sie tot zurueckgelassen. */
.stu__shell {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.stu__head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: 12px var(--space-5);
  background: var(--glass);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-bottom: .5px solid var(--color-hairline);
}

.stu__back {
  width: var(--target-primary);
  height: var(--target-primary);
  min-width: var(--target-primary);
  min-height: var(--target-primary);
  flex: 0 0 auto;
}
.stu__back .btn__ico { width: 32px; height: 32px; }

/* Buchtitel und Standzeile stehen NEBEN dem Aendern-Knopf, nicht darin:
   in einem <button> verwerfen Browser die Rollen aller Nachfahren, die
   Ueberschrift des Bildschirms waere also gar keine. */
.stu__ident {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-height: var(--target-min);
  min-width: 0;
  max-width: 46%;
  padding: var(--space-2) 0;
  text-align: left;
}

/* Der Knopf traegt nur noch "Titel und Name ändern" — 64 px, wie alles. */
.stu__renamebtn {
  width: var(--target-min);
  height: var(--target-min);
  min-width: var(--target-min);
  min-height: var(--target-min);
  flex: 0 0 auto;
}
.stu__renamebtn .btn__ico { width: 28px; height: 28px; }

/* Echtes <h1>. Beim Betreten bekommt es den Fokus (Screenreader, Tastatur);
   der Ring dafuer kommt aus der einen :focus-visible-Regel in base.css —
   hier steht bewusst keine zweite. */
.stu__title {
  margin: 0;
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: 1.375rem;          /* 22 px */
  line-height: var(--leading-tight);
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.stu__sub {
  font-size: var(--text-min);   /* 16 px */
  color: var(--color-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stu__spacer { flex: 1; min-width: 0; }

/* ── Mitte: links Bild, rechts Text ───────────────────────────────────── */

.stu__main {
  flex: 1;
  min-height: 0;
  display: grid;
  /* `minmax(0, 1fr)`: ein blankes `fr`-Gleis wird nie schmaler als sein
     Inhalt — bei grosser Schrift schoeben Bild- und Textkarte sich dann
     gegenseitig ueber den Rand. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  padding: 20px;
  overflow: auto;
}

.stu__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-height: 0;
  padding: 20px;
  background: var(--color-surface);
  border: 2px solid var(--color-hairline);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}

/* ── Bildkarte ────────────────────────────────────────────────────────── */

.stu__drop {
  position: relative;
  flex: 1;
  min-height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: var(--space-3);
  border: 2px dashed rgba(75,105,140,.45);
  border-radius: var(--radius-lg);
  background: var(--color-primary-bg);
}
.stu__drop.is-filled {
  border-style: solid;
  border-color: var(--color-hairline);
  background: var(--color-surface-alt);
}
.stu__drop.is-over {
  border-color: var(--color-focus);
  background: var(--color-focus-fill);
}
html[data-contrast="dark"] .stu__drop,
html[data-contrast="high"] .stu__drop { border-color: var(--color-border-strong); }

.stu__drop-img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  object-fit: contain;
  border-radius: var(--radius-md);
}
.stu__drop-char { font-size: 96px; line-height: 1; }

.stu__drop-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-primary-dark);
  font-size: var(--text-lg);
  font-weight: 600;
}
.stu__drop-ico { width: 56px; height: 56px; }

/* Bild wieder loswerden — 64 px, oben rechts im Ablagefeld. */
.stu__dropdel {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  width: var(--target-min);
  height: var(--target-min);
  min-width: var(--target-min);
  padding: 0;
}

/* Der Nachweis steht dort, wo das Bild steht — nicht am Seitenende. */
.stu__credit {
  font-size: var(--text-min);
  line-height: 1.4;
  color: var(--color-text-secondary);
}
.stu__credit-h {
  display: block;
  font-family: var(--font-label);
  font-weight: 600;
  font-size: var(--text-min);
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--color-text);
}

/* ── Bildtext ("Was ist auf dem Bild zu sehen?") ───────────────────────
   Kein Pflichtfeld, aber sichtbar und erklaert: ohne ihn ist ein
   selbstgemachtes Buch fuer Screenreader leer. */
.stu__altbox {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.stu__alt {
  font-size: var(--text-base);
}
.stu__althint {
  font-size: var(--text-min);
  line-height: 1.4;
  color: var(--color-text-secondary);
}

/* Die beiden Hauptknoepfe je Karte: 88 px, halbe Breite. */
.stu__acts {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}
.stu__act {
  min-height: var(--target-primary);
  font-size: var(--text-lg);
  border-radius: var(--radius-lg);
}
.stu__act .btn__ico { width: 28px; height: 28px; }

/* ── Textkarte ────────────────────────────────────────────────────────── */

/* Beschriftung ueber einem Feld — in beiden Karten dieselbe. */
.stu__label {
  font-size: 1.125rem;          /* 18 px */
  font-weight: 700;
}

.stu__text {
  flex: 1;
  min-height: 140px;
  width: 100%;
  resize: none;
  padding: var(--space-4);
  border: 2px solid var(--color-border-strong);
  border-radius: 16px;
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 1.625rem;          /* 26 px */
  line-height: 1.7;
}
.stu__text:focus {
  border-color: var(--color-primary);
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

/* Rueckmeldung zur Laenge. Ueber der Empfehlung bleibt der Pill neutral —
   12 Woerter sind ein Rat, kein Verbot; nichts wird rot, nichts gesperrt. */
.stu__fb {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.stu__pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  background: var(--color-surface-alt);
  color: var(--color-text);
  font-size: var(--text-min);
  font-weight: 700;
  line-height: 1.3;
}
.stu__pill--ok { background: var(--color-success-bg); color: var(--color-success); }
.stu__pill-ico { width: 20px; height: 20px; flex: 0 0 auto; }
.stu__rec {
  font-size: var(--text-min);
  color: var(--color-text-secondary);
  line-height: 1.3;
  flex: 1;
  min-width: 140px;
}

/* ── Seitenstreifen ───────────────────────────────────────────────────── */

.stu__strip {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 12px var(--space-5);
  background: var(--glass-strong);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-top: 1.5px solid var(--color-hairline);
}
.stu__stripbtn {
  width: var(--target-min);
  height: var(--target-min);
  min-width: var(--target-min);
  padding: 0;
  flex: 0 0 auto;
}

.stu__tiles {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  overflow-x: auto;
  overflow-y: hidden;
  /* 3 px Fokusring + 3 px Abstand + der 3-px-Rand der aktuellen Kachel:
     mit 5/2 px wurde der Ring vom Streifen beschnitten. */
  padding: 7px;
  scrollbar-width: thin;
}

.stu__tile {
  position: relative;
  flex: 0 0 auto;
  width: 92px;
  height: 64px;
  padding: 0;
  overflow: hidden;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  cursor: grab;
}
.stu__tile:active { cursor: grabbing; }
/* `contain`: Man wählt die Seite an ihrem Bild. Bei `cover` fehlte darauf
   je nach Verhältnis fast die Hälfte — und damit womöglich genau das, woran
   man die Seite erkennt (Lars 2026-07-28). Der Kasten hat eine eigene
   Fläche, der Rand daneben sieht also nicht kaputt aus. */
.stu__tile img {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.stu__tile-n {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 1.0625rem;         /* 17 px */
  font-weight: 700;
}
.stu__tile.is-current {
  border: 3px solid var(--color-primary-deep);
  background: var(--color-primary-bg);
}
.stu__tile.is-current .stu__tile-n {
  background: var(--color-primary-deep);
  color: var(--color-text-inverse);
}
html[data-contrast="dark"] .stu__tile.is-current,
html[data-contrast="high"] .stu__tile.is-current {
  border-color: var(--color-primary);
}
html[data-contrast="dark"] .stu__tile.is-current .stu__tile-n,
html[data-contrast="high"] .stu__tile.is-current .stu__tile-n {
  background: var(--color-primary);
  color: var(--color-primary-deep);
}
.stu__tile.is-dragging { border-style: dashed; }
.stu__tile.is-over {
  border: 3px solid var(--color-focus);
  background: var(--color-focus-fill);
}

/* ── Dialog "Seiten ordnen" ───────────────────────────────────────────── */

.stu__order { display: flex; flex-direction: column; gap: var(--space-3); }
.stu__order-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2);
  border: 2px solid var(--color-hairline);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}
.stu__order-row.is-current { border-color: var(--color-primary-deep); border-width: 3px; }
.stu__order-thumb {
  position: relative;
  flex: 0 0 auto;
  width: 92px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--color-surface-alt);
}
.stu__order-thumb img { width: 100%; height: 100%; object-fit: contain; }
.stu__order-no { font-size: var(--text-min); color: var(--color-text-secondary); }
.stu__order-txt {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: var(--text-min);
}
.stu__order-txt span {
  color: var(--color-text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.stu__order-pos {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: var(--text-min);
  font-weight: 600;
}
.stu__order-pos .input { width: 96px; }

.stu__recbtns {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-4);
}

/* ==========================================================================
   Bildschirm 8 — Bild suchen

   Antippen WAEHLT NUR AUS. Erst "Dieses Bild nehmen" uebernimmt und
   schliesst. Bei Augensteuerung waere ein einzelner Verweil-Treffer sonst
   schon die Entscheidung.
   ========================================================================== */

.imgsrch-modal { padding: 20px; }

.imgsrch {
  display: flex;
  flex-direction: column;
  width: 100%;
  /* Nicht `height: 100%`: das rechnet gegen das Ansichtsfenster, der
     Innenabstand der Hülle käme oben und unten obendrauf und der Fuß mit
     „Dieses Bild nehmen" rutschte unter den Bildschirmrand. Siehe die
     gleiche Stelle bei .modal__box--wide in base.css. */
  align-self: stretch;
  min-height: 0;
  overflow: hidden;
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  animation: modal-in var(--transition-enter) both;
}

/* ── Kopf ─────────────────────────────────────────────────────────────── */

.imgsrch__head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-hairline);
}
.imgsrch__title {
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: 1.625rem;
  flex: 0 0 auto;
}
.imgsrch__q {
  flex: 1;
  min-width: 0;
  height: var(--target-primary);
  padding: 0 var(--space-4);
  border: 2px solid var(--color-primary);
  border-radius: 18px;
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 1.5rem;            /* 24 px */
}
.imgsrch__go {
  flex: 0 0 auto;
  min-height: var(--target-primary);
  padding: 0 var(--space-6);
  border-radius: 18px;
  font-size: var(--text-lg);
}
.imgsrch__x {
  flex: 0 0 auto;
  width: var(--target-primary);
  height: var(--target-primary);
  min-width: var(--target-primary);
  padding: 0;
  border-radius: 18px;
}
.imgsrch__x .btn__ico { width: 32px; height: 32px; }

/* ── Quellenzeile ─────────────────────────────────────────────────────── */

.imgsrch__src {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--color-hairline);
}
.imgsrch__srclabel {
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 1.125rem;
  flex: 0 0 auto;
}
.imgsrch__pill {
  min-height: var(--target-min);
  padding: 0 var(--space-5);
  font-size: var(--text-min);
}

/* Das Ausweichen auf Wikimedia gab es schon lange — nur gesehen hat es
   niemand. Jetzt steht es da. */
.imgsrch__warn {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  background: var(--color-warning-bg);
  color: var(--color-warning);
  font-size: var(--text-min);
  font-weight: 600;
  line-height: 1.3;
}
.imgsrch__warn[hidden] { display: none; }
.imgsrch__warn-ico { width: 22px; height: 22px; flex: 0 0 auto; }

/* ── Ergebnisse: eine Reihe, vier Spalten ─────────────────────────────── */

.imgsrch__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: var(--space-4) var(--space-5);
}
.imgsrch__note {
  font-size: var(--text-min);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-4);
  line-height: 1.4;
}
/* Ein Satz, keine Panikmache: Openverse filtert mit &mature=false, die
   Wikimedia-Rueckfallebene kann das nicht — und sie springt automatisch
   ein, sobald Openverse mengenbegrenzt antwortet. */
.imgsrch__minor {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-alt);
  color: var(--color-text);
  font-size: var(--text-min);
  line-height: 1.4;
}
.imgsrch__minor-ico {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  color: var(--color-primary);
}
html[data-contrast="dark"] .imgsrch__minor,
html[data-contrast="high"] .imgsrch__minor { border-color: var(--color-border-strong); }

.imgsrch__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}

.picktile {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  text-align: left;
  border: 2px solid var(--color-border);
  border-radius: 18px;
  background: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.picktile:hover { border-color: var(--color-primary); box-shadow: var(--shadow-md); }

.picktile__img {
  display: block;
  width: 100%;
  height: 200px;
  overflow: hidden;
  background: var(--color-surface-alt);
}
/* Bildersuche: Wer ein Bild aussucht, muss es GANZ sehen. Bei `cover` konnte
   das Motiv aus der Kachel herausgeschnitten sein, und man wählte etwas
   anderes, als man dachte. */
.picktile__img img { width: 100%; height: 100%; object-fit: contain; }

/* Befund 07: der Nachweis war 12,5 px. Jetzt 16 px, zwei Zeilen. */
.picktile__cap {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-3);
}
.picktile__t {
  font-size: var(--text-min);
  font-weight: 600;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.picktile__l {
  font-size: var(--text-min);
  line-height: 1.3;
  color: var(--color-text-secondary);
}

/* Gewaehlt = Rand UND Haken. Farbe allein traegt hier nichts. */
.picktile.is-picked {
  border: 3px solid var(--color-primary-deep);
  background: var(--color-primary-bg);
}
html[data-contrast="dark"] .picktile.is-picked,
html[data-contrast="high"] .picktile.is-picked { border-color: var(--color-primary); }
.pick__ico { width: 28px; height: 28px; }

.picktile--up {
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-5);
  text-align: center;
  border: 2px dashed rgba(75,105,140,.45);
  background: var(--color-primary-bg);
  color: var(--color-primary-dark);
}
.picktile--up .picktile__t,
.picktile--up .picktile__l { white-space: normal; text-align: center; }
.picktile--up .picktile__t { font-size: var(--text-lg); font-weight: 700; }
.picktile__ico { width: 44px; height: 44px; }

/* ── Fuss ─────────────────────────────────────────────────────────────── */

.imgsrch__foot {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--color-hairline);
  background: var(--color-surface-alt);
  flex-wrap: wrap;
}
.imgsrch__more,
.imgsrch__cancel,
.imgsrch__take {
  min-height: var(--target-primary);
  padding: 0 var(--space-5);
  border-radius: var(--radius-lg);
  font-size: var(--text-lg);
}
.imgsrch__take { padding: 0 var(--space-6); }
.imgsrch__hint {
  font-size: var(--text-min);
  color: var(--color-text-secondary);
  line-height: 1.3;
  max-width: 320px;
}

/* ── Schmale Geraete ──────────────────────────────────────────────────── */

@media (max-width: 1080px) {
  .stu__main { grid-template-columns: minmax(0, 1fr); }

  /* `min-height: 0` erlaubt der Karte, unter ihren Inhalt zu schrumpfen. Das
     braucht die zweispaltige Ansicht am Schreibtisch — auf dem Handy ist es
     fatal: Untereinander bleiben fuer zwei Karten nur ~123 px, das Raster
     rechnet Zeilen von je 44 px, und der 400 px hohe Inhalt tritt mit
     `overflow: visible` einfach aus. Auf dem iPhone lagen dadurch Bildfeld,
     Textfeld und Seitenstreifen uebereinander; „Noch kein Text" war vom
     Hochladen-Feld waagerecht durchschnitten (Screenshot Lars, 01.08.2026).
     Hier also die Voreinstellung zurueckholen: Die Karte wird so hoch wie ihr
     Inhalt, und `.stu__main` scrollt — es hat `overflow: auto`. */
  .stu__card { min-height: auto; }

  /* EIN Scroller statt eines Fensters im Fenster.
     Vorher rollte `.stu__main` in sich: Auf 390 x 620 blieben davon 123 px —
     ein Briefschlitz, durch den man das ganze Studio schob. Jetzt rollt der
     Bildschirm als Ganzes, der Bearbeitungsbereich wird so hoch wie sein
     Inhalt (gemessen 982 px statt 123).
     Der Seitenstreifen klebt dabei unten fest: Er traegt Seitenwechsel und
     „+ Seite" — waere er ans Ende der langen Seite gerutscht, muesste man
     fuer jeden Seitenwechsel erst hinunterrollen. */
  .screen.stu { overflow-y: auto; }
  .stu__shell { flex: 0 0 auto; min-height: 0; }
  .stu__main  { overflow: visible; }
  .stu__strip {
    position: sticky;
    bottom: 0;
    z-index: 5;
    background: var(--color-surface);
  }

  .imgsrch__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .imgsrch__head { flex-wrap: wrap; }
  .imgsrch__q { flex-basis: 100%; order: 3; }
}

/* Kopfzeile und Seitenstreifen brechen um, statt ueber den Rand zu laufen.

   Beide sind Reihen aus Zielen, die nicht schrumpfen duerfen: 88 px zurueck,
   64 px umbenennen, dazu „Anhoeren" und „Lesen"; im Streifen sechs Knoepfe
   plus die Kachelreihe. Gemessen auf einem 390er iPhone brauchte der
   Streifen 494 px und schob die ganze Seite 104 px zur Seite — der Buchtitel
   war dabei auf 0 px zusammengedrueckt und der Kachelstreifen auf 14 px.

   Die Kachelreihe bekommt eine eigene Zeile: sie ist das, was man beim
   Blaettern trifft, und rollt in sich. Die Knoepfe stehen darunter. */
@media (max-width: 860px) {
  .stu__head { flex-wrap: wrap; row-gap: var(--space-2); }
  .stu__ident { flex: 1 1 140px; max-width: none; }

  .stu__strip { flex-wrap: wrap; row-gap: var(--space-2); }
  .stu__tiles { flex: 1 1 100%; order: -1; }
}

@media (max-width: 640px) {
  .imgsrch__grid { grid-template-columns: minmax(0, 1fr); }
  .stu__ident { max-width: none; }
  .stu__acts { grid-template-columns: minmax(0, 1fr); }
  .stu__head, .stu__strip { padding-left: var(--space-3); padding-right: var(--space-3); }

  /* Kopf der Bildsuche: Titel und Suchfeld je eine Zeile, „Suchen" und
     „Schliessen" teilen sich die dritte. Vorher stand jedes der vier Teile
     allein — mit der groessten Schrift war der Kopf 411 px hoch, also zwei
     Drittel eines 640er Telefons. */
  .imgsrch__head { row-gap: var(--space-2); }
  .imgsrch__title { flex: 1 1 100%; order: 1; }
  .imgsrch__q     { flex: 1 1 100%; order: 2; }
  .imgsrch__go    { flex: 1 1 auto; order: 3; }
  .imgsrch__x     { order: 4; }

  /* Fuss: der erklaerende Satz auf eigener Zeile, die Knoepfe darunter
     nebeneinander, soweit sie passen. */
  .imgsrch__foot .stu__spacer { display: none; }
  .imgsrch__hint { flex: 1 1 100%; max-width: none; order: 1; }
  .imgsrch__more, .imgsrch__cancel, .imgsrch__take { flex: 1 1 auto; order: 2; }
}

/* Auf schmalen oder flachen Geraeten rollt die Bildsuche als Ganzes.

   Gemessen auf 360 x 640 mit der groessten Schrift: Kopf 411 px, Quellen-
   zeile 96 px, Fuss 568 px — zusammen mehr als der Bildschirm hoch ist.
   Fuer die Ergebnisse blieben 43 px, und „Dieses Bild nehmen" lag 520 px
   unter dem Rand: Der Dialog war nicht zu Ende zu bringen. Statt eines
   eigenen Rollbereichs fuer die Ergebnisse rollt jetzt der Dialog selbst —
   ein Rollbereich, kein verschachteltes Paar. */
@media (max-width: 640px), (max-height: 620px) {
  .imgsrch { overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .imgsrch__body { flex: 0 0 auto; overflow: visible; }
}

/* ==========================================================================
   In die Galerie geben
   ========================================================================== */

.stu__sharelist {
  margin: var(--space-3) 0;
  padding-left: var(--space-5);
}

.stu__sharelist li { margin-bottom: var(--space-2); }

/* Zustimmung. Die Trefferfläche ist die ganze Zeile, nicht nur das Kästchen —
   sonst müsste man mit Augensteuerung ein 24-Pixel-Ziel treffen. */
.check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  /* 72 statt 64: gemessen kam die Zeile bei min-height:64px auf 63 px
     heraus und lag damit unter dem Verweil-Mindestmaß. */
  min-height: 72px;
  padding: var(--space-3) var(--space-4);
  margin-top: var(--space-3);
  border: 2px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  cursor: pointer;
}

.check:focus-within {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

.check input {
  width: 28px;
  height: 28px;
  margin: 0;
  flex: none;
  accent-color: var(--color-primary);
}

/* Zusaetzliche Hervorhebung der gesetzten Zeile. Das Kaestchen selbst
   zeigt den Haken ohnehin — diese Regel ist Zugabe und darf in alten
   WebViews ohne :has() ausfallen. */
.check:has(input:checked) {
  border-color: var(--color-primary);
  background: var(--color-primary-bg);
}

/* Hinweis im Einreichen-Dialog: was NICHT mitgeht. Abgesetzt, damit er
   nicht im Fliesstext untergeht — er beantwortet die Frage, die sonst
   erst nach dem Abschicken kommt. */
.stu__sharenote {
  margin: var(--space-4) 0;
  padding: var(--space-3) var(--space-4);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-sm, 8px);
  background: var(--color-primary-bg);
}

.stu__sharenote p { margin: 0 0 var(--space-2); }
.stu__sharenote p:last-child { margin-bottom: 0; }