/* ============================================================================
   KIDZ.ME — Fertige Geschichten (fertige-geschichten.html)

   Baut auf seite.css auf (Kopf, Brotkrumen, Aufmacher, Fuß). Hier nur, was
   die Seite eigen hat: Filter, das Regal mit den Karten und das Lesefenster.
   ============================================================================ */

.regal { width: min(1040px, calc(100% - 2.6rem)); margin: 0 auto 3rem; }

/* ---------- Filter ---------- */
.filter { display: grid; gap: .7rem; margin-bottom: 2rem; }
.filter-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; }
.filter-name { min-width: 3.2rem; font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); }
.chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.chip {
  font: inherit; font-size: .92rem; color: var(--ink);
  background: var(--paper-card); border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm); padding: .32rem .9rem; cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
.chip:hover { border-color: var(--pink-deep); }
.chip[aria-checked="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper-card); }
.chip:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* ---------- Gruppen und Karten ---------- */
.gruppe + .gruppe { margin-top: 2.6rem; }
.gruppe h2 { font-family: var(--display); font-weight: 400; font-size: 1.55rem; margin-bottom: 1rem; text-wrap: balance; }
.karten { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }

.karte {
  display: flex; flex-direction: column; gap: .55rem;
  background: var(--paper-card); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
  padding: 1.2rem 1.25rem 1.25rem; min-width: 0;
}
.karte-kicker { font-size: .8rem; letter-spacing: .07em; text-transform: uppercase; color: var(--pink-deep); }
.karte h3 { font-family: var(--display); font-weight: 400; font-size: 1.32rem; line-height: 1.2; text-wrap: balance; }
.karte-text { color: var(--ink-soft); font-size: .97rem; line-height: 1.55; flex: 1; }
.karte-fakten { font-size: .85rem; color: var(--ink-faint); }
.karte-knopf {
  align-self: flex-start; margin-top: .3rem;
  font: inherit; font-size: .95rem; font-weight: 600; color: var(--paper-card);
  background: var(--blue-deep); border: 0; border-radius: var(--radius-sm);
  padding: .6rem 1.15rem; cursor: pointer; transition: background-color .15s ease;
}
.karte-knopf:hover { background: var(--blue); }
.karte-knopf:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

.leer { color: var(--ink-soft); background: var(--paper-card); border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); padding: 1rem 1.2rem; }
.hinweis-block { margin-top: 1rem; }

/* ---------- Lesefenster ---------- */
.leser {
  width: min(1000px, calc(100% - 2rem)); max-height: calc(100% - 2rem);
  padding: 0; border: 0; border-radius: var(--radius);
  background: var(--sand); color: var(--ink);
  box-shadow: var(--shadow-md);
}
.leser::backdrop { background: rgba(43, 58, 68, .45); }
.leser-innen { display: flex; flex-direction: column; max-height: calc(100vh - 2rem); }
.leser-kopf {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  padding: 1.2rem 1.4rem 1rem; border-bottom: 1px solid var(--line); background: var(--paper-card);
}
.leser-kicker { font-size: .8rem; letter-spacing: .07em; text-transform: uppercase; color: var(--pink-deep); }
.leser-titel { font-family: var(--display); font-weight: 400; font-size: clamp(1.4rem, 3vw, 1.9rem); line-height: 1.15; text-wrap: balance; }
.leser-zu { flex: none; width: 42px; height: 42px; border-radius: var(--radius-sm); border: 1px solid var(--line-strong); background: var(--paper-card); cursor: pointer; display: grid; place-items: center; }
.leser-zu svg { width: 18px; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; fill: none; }
.leser-zu:hover { border-color: var(--pink-deep); }
.leser-zu:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

.leser-rumpf { display: grid; grid-template-columns: 250px 1fr; gap: 1.4rem; padding: 1.3rem 1.4rem; overflow: auto; min-height: 0; }

.namen { display: grid; gap: .8rem; align-content: start; }
.namen h3 { font-family: var(--display); font-weight: 400; font-size: 1.25rem; color: var(--pink-deep); }
.namen-hilfe { font-size: .86rem; color: var(--ink-soft); line-height: 1.45; }
.feld { display: grid; gap: .25rem; }
.feld label { font-size: .88rem; font-weight: 600; }
.feld input {
  font: inherit; font-size: 1rem; color: var(--ink);
  background: var(--paper-card); border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm);
  padding: .55rem .7rem; width: 100%;
}
.feld input:focus-visible { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-tint); }
.feld input[aria-invalid="true"] { border-color: var(--pink-deep); }
.feld-fehler { font-size: .8rem; color: var(--pink-deep); }

/* Die Vorschauseiten, gesetzt wie Buchseiten */
.vorschau { display: grid; gap: 1rem; min-width: 0; }
.seite-buch {
  background: var(--paper-card); border: 1px solid var(--line); border-radius: var(--radius-sm);
  box-shadow: 0 1px 1px rgba(43,58,68,.04), 0 8px 18px rgba(43,58,68,.06);
  padding: 1.3rem 1.5rem 1.4rem; position: relative;
}
.seite-szene { font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: .6rem; }
.seite-text { font-family: var(--display); font-size: 1.12rem; line-height: 1.6; white-space: pre-line; }
.seite-nr { position: absolute; right: 1rem; bottom: .55rem; font-size: .78rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.name { color: var(--pink-deep); }

.leser-fuss {
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.2rem;
  padding: 1rem 1.4rem 1.2rem; border-top: 1px solid var(--line); background: var(--paper-card);
}
.leser-rest { flex: 1 1 260px; font-size: .92rem; color: var(--ink-soft); }
.knopf-waehlen {
  font: inherit; font-weight: 600; color: var(--paper-card); background: var(--pink-deep);
  border: 0; border-radius: var(--radius-sm); padding: .65rem 1.3rem; cursor: pointer;
}
.knopf-waehlen:disabled { background: var(--line-strong); color: var(--ink-soft); cursor: not-allowed; }
.waehlen-hinweis { flex-basis: 100%; font-size: .84rem; color: var(--ink-soft); text-align: right; }

@media (max-width: 760px) {
  .leser { width: 100%; max-width: 100%; height: 100%; max-height: 100%; border-radius: 0; }
  .leser-innen { max-height: 100vh; height: 100%; }
  .leser-rumpf { grid-template-columns: 1fr; }
  .waehlen-hinweis { text-align: left; }
}
@media (prefers-reduced-motion: reduce) { .chip, .karte-knopf { transition: none; } }

/* ---------- Gestaltung seit 2026-10-12 (Logo C7) ----------
   Jede Gruppe (Art der Geschichte) in einem Logoton; die Karte trägt ihn als
   obere Kante und im Kicker. „Anfang lesen“ ist ein ruhiger Umrissknopf —
   Flieder bleibt dem Weg zum Generator vorbehalten. */
.gruppe:nth-child(4n+1) { --ton: var(--rose-tief);    --ton-mitte: var(--rose); }
.gruppe:nth-child(4n+2) { --ton: var(--himmel-tief);  --ton-mitte: var(--himmel); }
.gruppe:nth-child(4n+3) { --ton: var(--salbei-tief);  --ton-mitte: var(--salbei); }
.gruppe:nth-child(4n+4) { --ton: var(--flieder-tief); --ton-mitte: var(--flieder); }
.gruppe h2::after { content: ""; display: block; width: 38px; height: 3px; margin-top: .55rem; background: var(--ton-mitte); border-radius: var(--radius-xs); }
.karte { border-top: 3px solid var(--ton-mitte, var(--line-strong)); box-shadow: none; transition: box-shadow .18s ease, transform .18s ease; }
.karte:hover { box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.karte-kicker { color: var(--ton, var(--pink-deep)); }
.karte-knopf { background: var(--paper-card); color: var(--blue); border: 1.5px solid var(--blue-pastel); }
.karte-knopf:hover { background: var(--paper-card); border-color: var(--blue); }
.knopf-waehlen { background: var(--cta); }
.leser-kicker, .namen h3 { color: var(--flieder-tief); }
.name { color: var(--flieder-tief); }

/* Paketwahl im Lesefenster (seit 2026-10-12, Kasse) */
.paket { flex: 1 1 100%; border: 0; margin: 0; padding: 0; display: grid; gap: .45rem; }
.paket legend { font-weight: 600; font-size: .92rem; margin-bottom: .35rem; padding: 0; }
.paket label { display: flex; align-items: flex-start; gap: .6rem; padding: .55rem .75rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--paper-card); cursor: pointer; font-size: .92rem; }
.paket label:has(input:checked) { border-color: var(--flieder-tief); background: var(--flieder-hauch); }
.paket input { margin-top: .2rem; accent-color: var(--flieder-tief); }
.paket b { font-weight: 650; margin-right: .3rem; }
.knopf-waehlen:disabled { background: var(--cta); opacity: .7; cursor: wait; color: #fff; }
.paket-test { border-style: dashed !important; }
.paket-summe { margin-left: auto; font-weight: 650; color: var(--flieder-tief); }

/* Textüberarbeitung 22-10 (Folie 13: „Geschichte nicht lesbar, da das Feld zu klein ist“): die Paketwahl im Fuß nahm der
   Vorschau den Platz, bis nur noch eine Zeile Text blieb. Jetzt hat die Vorschau eine Mindesthöhe, die Pakete stehen in zwei
   Spalten, und wird es zu eng, scrollt das ganze Fenster statt die Vorschau zu quetschen. */
.leser-innen { overflow-y: auto; }
.leser-rumpf { min-height: min(46vh, 440px); flex: 1 1 auto; }
.paket { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.paket legend { grid-column: 1 / -1; }