/* ==========================================================================
   BookTo — Merkbilder: Band unter dem Seitentext und „Buchstaben finden"

   Eigene Datei, nicht in reader.css: Beides gehört zu js/merkbild.js und
   erscheint nur auf Seiten mit `stufen` (Buch „Buchstaben, die Bilder sind").
   ========================================================================== */

/* ---- Das Zeichen im Wort (jede Seite mit `zeichen`) -----------------------
   Unterstrichen und fett, nicht farbig — Farbe tragen schon Silben,
   Wortgestalt und Wortart. Gilt im Reader, im Druck und in der Tabelle. */
.zeichen-marke {
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: .1em;
  text-underline-offset: .16em;
}

/* ---- Buchstabentabelle im Druck (js/drucken.js, tabelleHtml) ---------------
   Alle Buchstaben des Merkbild-Buches auf EINEM Blatt, jedes Bild im Stand
   der Person: Wo ein Buchstabe sitzt, ist sein Bild blass oder weg. */
.druckbuch .dr-tabelle { display: flex; flex-direction: column; }
.druckbuch .dr-tab-titel {
  flex: 0 0 auto;
  margin: 0 0 3mm;
  font-family: var(--font-label);
  font-size: 13pt;
  font-weight: 600;
  text-align: center;
}
.druckbuch .dr-tab {
  flex: 1 1 0;
  min-height: 0;
  display: grid;
  grid-auto-rows: minmax(0, 1fr);
  gap: 2mm;
}
.druckbuch .dr-tz {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 0;
  min-width: 0;
  border: .3mm solid #bbb;
  border-radius: 2mm;
  padding: 1mm;
  break-inside: avoid;
}
.druckbuch .dr-tz img { flex: 1 1 0; min-height: 0; max-width: 100%; object-fit: contain; }
.druckbuch .dr-tz__wort {
  flex: 0 0 auto;
  font-family: var(--font-body);
  font-size: 10pt;
  line-height: 1.2;
  color: #111;
}

/* ---- Bild überblenden: das neue Bild liegt über dem alten ---------------- */
.merkbild { position: relative; }
.merkbild__neu {
  position: absolute;
  inset: 0;
  margin: auto;
  opacity: 0;
  transition: opacity .6s ease;
}
.merkbild__neu.is-da { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .merkbild__neu { transition: none; }
}

/* ---- Das Paar „R r": großer und kleiner Buchstabe mit Abstand --------------
   (Lars 20.09.2026). Gilt für das große Zeichen im Reader, die Felder in
   „Buchstaben finden" und den Druck — js/merkbild.js, zeichenHtml(). */
.zeichen-paar { display: inline-flex; align-items: baseline; gap: .3em; }

/* ---- Das Band ------------------------------------------------------------- */
.merk {
  /* Im Textkasten, unter den Sätzen — über beide Spalten, wenn links das
     große Zeichen steht. */
  grid-column: 1 / -1;
  max-width: 38em;
  width: 100%;
  margin: var(--space-4) auto 0;
  padding-top: var(--space-3);
  border-top: 2px solid var(--color-hairline);
  font-family: var(--font-label);
  font-size: var(--text-base);
  color: var(--color-text);
}
.merk[hidden] { display: none; }
/* Auf der Titelseite steht das Band direkt in der Seite (der Textkasten ist
   dort versteckt): unter dem Umschlag, über die ganze Breite. */
.merk--titel { border-top: 0; margin-top: var(--space-2); padding-top: 0; }
.reader:not([data-view="page"]):not([data-view="title"]) .merk { display: none; }

/* Titelseite: Text + ein Knopf */
.merk__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}
.merk__txt { flex: 1 1 160px; min-width: 0; }
.merk__was { color: var(--color-text-soft, var(--color-text)); }

/* ⚠️ Feste Plätze (Lars 20.09.2026: „Die Buttons ändern ihre Position"). Oben
   eine Zeile mit der Stufe, den Punkten und dem Info-Knopf ganz rechts; darunter
   ein RASTER mit drei gleich breiten Plätzen: Bild zeigen | Bild blasser |
   Buchstaben finden. Vorher war es eine umbrechende Flex-Zeile, in der ein
   Knopf fehlte, sobald er nicht galt — die anderen rutschten nach. */
.merk__kopf {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--target-min);
  margin-bottom: var(--space-2);
}
.merk__stufe { font-weight: 600; white-space: nowrap; }
.merk__punkte { display: inline-flex; gap: 6px; flex: 1 1 auto; }
.merk__punkt {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--color-primary);
  background: transparent;
}
.merk__punkt.is-an { background: var(--color-primary); }
.merk__why {
  flex: 0 0 auto;
  min-height: var(--target-min);
  min-width: var(--target-min);
}

.merk__knoepfe {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}
.merk__knoepfe--zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Verweil- und Tastermaß: volle Ziele, keine Randnotiz. */
.merk__btn {
  min-width: 0;
  min-height: var(--target-primary);
  padding: var(--space-3);
  font-size: var(--text-base);
  white-space: normal;
  line-height: 1.2;
}
/* Gesperrt heißt: bleibt stehen, tritt zurück. */
.merk__btn[disabled] { opacity: .32; cursor: default; pointer-events: none; }

.merk__mit {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin: var(--space-3) 0 0;
  font-size: var(--text-min);
  line-height: 1.45;
  color: var(--color-text-soft, var(--color-text));
}
.merk__mitico { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 2px; }

/* ---- Buchstaben finden ---------------------------------------------------- */
.merkquiz { display: none; }
.reader__page.is-merkquiz > .reader__imgwrap,
.reader__page.is-merkquiz > .reader__textbox,
.reader__page.is-merkquiz > .reread { display: none; }
.reader__page.is-merkquiz > .merkquiz {
  display: block;
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  /* Die Seite zentriert ihre Kinder (justify-items/align-items: center) —
     ohne „stretch" blieb der Kasten 711 px schmal in 1084 px. */
  justify-self: stretch;
  align-self: stretch;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: none;
}
.reader__page.is-merkquiz > .merkquiz::-webkit-scrollbar { display: none; }
/* „Wort hören" passt hier nicht — es zeigte die Lösung (Lars 20.09.2026).
   Gesperrt, aber am Platz: die Leiste verschiebt sich nicht. */
.reader__bar [data-wordpick][disabled] { opacity: .32; cursor: default; pointer-events: none; }

/* ⚠️ Große Felder in der Mitte (Lars 20.09.2026). Frage und „Laut hören" oben,
   „Zurück zur Seite" unten; die vier Felder nehmen ALLES, was dazwischen frei
   ist, und sind so breit wie die Seite. Vorher waren sie 120 × 150 px in
   einem 2000 px breiten Fenster. */
.merkquiz__in {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  height: 100%;
  min-height: 430px;
  margin: 0 auto;
  padding: var(--space-3);
  font-family: var(--font-label);
  color: var(--color-text);
}
.merkquiz__frage {
  flex: 0 0 auto;
  margin: 0;
  font-size: var(--text-lg, 1.35rem);
  font-weight: 600;
  text-align: center;
}
.merkquiz .merk__btn { flex: 0 0 auto; min-width: min(100%, 16em); }
.merkquiz__wahl {
  flex: 1 1 0;
  min-height: 120px;
  max-height: 440px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: minmax(0, 1fr);
  gap: var(--space-4);
  width: min(100%, 1500px);
  --feldschrift: clamp(2.6rem, min(9vw, 18vh), 9rem);
  --feldfaktor: 1;
}
/* Lange Zeichen („Au au", „Sch sch"): alle vier Felder gleich kleiner —
   js/merkbild.js, wahlKlasse(). */
.merkquiz__wahl.is-lang { --feldfaktor: .8; }
.merkquiz__wahl.is-sehrlang { --feldfaktor: .6; }
.merkquiz__feld {
  min-width: 0;
  min-height: 0;
  height: 100%;
  border: 4px solid var(--color-primary);
  border-radius: var(--radius-lg);
  background: var(--book-bg, #fff);
  color: var(--book-fg, var(--color-text));
  font-family: var(--font-body);
  font-weight: 700;
  font-size: calc(var(--feldschrift) * var(--feldfaktor));
  line-height: 1.1;
  cursor: pointer;
}
.merkquiz__feld:hover,
.merkquiz__feld:focus-visible { background: var(--color-primary-bg); }
/* Eine falsche Wahl tritt leise zurück — kein Rot, kein Kreuz. */
.merkquiz__feld.is-weg { opacity: .28; border-style: dashed; cursor: default; }
.merkquiz__antwort { flex: 0 0 auto; margin: 0; min-height: 1.5em; font-size: var(--text-base); text-align: center; }
.merkquiz__loesung {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}
.merkquiz__bild { flex: 0 1 auto; min-height: 0; max-width: min(100%, 480px); max-height: 100%; object-fit: contain; border-radius: var(--radius-md); }
.merkquiz__satz { flex: 0 0 auto; margin: 0; font-family: var(--font-body); font-size: var(--text-story, 1.6rem); }

/* Schmaler als 900 px (auch iPad hochkant, 768 x 1024): Dort ist der
   Textkasten unter dem Bild nur 158 px hoch. Alles steht in EINER Zeile mit
   festen Plätzen: Stufe | zeigen | blasser | finden | Info. Die Punkte
   entfallen hier (die Stufe steht als Text da) — mit ihnen war „Buchstaben
   finden" auf 768 px um 11 px zu schmal. Die Zeile für die Begleitperson
   entfällt auch — sie steht hinter dem Info-Knopf. */
@media (max-width: 900px) {
  .merk:not(.merk--titel) {
    display: grid;
    grid-template-columns: auto repeat(2, minmax(0, 1fr)) minmax(0, 1.4fr) auto;
    align-items: center;
    gap: var(--space-2);
    max-width: none;
    /* Ohne Linie und Luft darüber: Mit beidem lief der Kasten 18 px über. */
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
  }
  .merk:not(.merk--titel)[hidden] { display: none; }
  .merk__kopf, .merk__knoepfe { display: contents; }
  .merk__punkte { display: none; }
  .merk__why { order: 9; }
  .merk__btn { min-height: var(--target-min); padding: var(--space-2); }
  .merk__mit { display: none; }
  /* Hochkant sind vier Felder nebeneinander schmal und hoch — 2 × 2. */
  .merkquiz__wahl { max-height: none; }
}
@media (max-width: 900px) and (orientation: portrait) {
  .merkquiz__wahl {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    --feldschrift: clamp(2.2rem, 13vw, 7rem);
  }
}
/* Telefon: Stufe und Punkte oben; darunter zeigen | blasser | Info; darunter
   „Buchstaben finden" über die ganze Breite — auch das sind feste Plätze. */
@media (max-width: 720px) {
  .merk:not(.merk--titel) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
  .merk__stufe { order: 1; grid-column: 1; }
  .merk__punkte { display: inline-flex; order: 2; grid-column: 2 / -1; }
  .merk__knoepfe [data-merk="zeigen"] { order: 3; }
  .merk__knoepfe [data-merk="blasser"] { order: 4; }
  .merk__why { order: 5; }
  .merk__knoepfe [data-merk="finden"] { order: 6; grid-column: 1 / -1; }
  .merkquiz__in { gap: var(--space-2); padding: var(--space-2); min-height: 400px; }
  .merkquiz__frage { font-size: var(--text-base); }
  .merkquiz__wahl { gap: var(--space-2); }
  .merkquiz__feld { border-width: 3px; }
  .merkquiz .merk__btn { width: 100%; min-height: var(--target-min); }
  .merkquiz__antwort { min-height: 1.2em; }
  .merkquiz__bild { max-width: min(100%, 220px); }
}
/* Niedriges Querformat (Telefon quer, 667 x 375): „Laut hören" und „Zurück
   zur Seite" nebeneinander, darunter vier Felder in einer Reihe. Die Frage
   steht nur noch für Vorleseprogramme da — der Knopf sagt, was zu tun ist. */
@media (max-height: 520px) and (min-width: 560px) {
  .merkquiz__in {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: var(--space-2);
    padding: var(--space-2);
    min-height: 0;
  }
  .merkquiz__frage { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .merkquiz [data-merk="hoeren"] { grid-column: 1; grid-row: 1; }
  .merkquiz [data-merk="quizende"] { grid-column: 2; grid-row: 1; }
  .merkquiz__wahl, .merkquiz__loesung { grid-column: 1 / -1; grid-row: 2; }
  .merkquiz__antwort { grid-column: 1 / -1; grid-row: 3; min-height: 1.2em; }
  .merkquiz__wahl {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    min-height: var(--target-min);
    width: 100%;
    --feldschrift: 2.2rem;
  }
  .merkquiz .merk__btn { width: 100%; min-width: 0; min-height: var(--target-min); }
  .merkquiz__bild { max-width: 140px; }
}