/* =========================================================================
   Yatsu – Gestaltung
   ========================================================================= */

:root {
  color-scheme:   light;
  --paper:        #fcf8f0;
  --paper-2:      #f5ebd8;
  --ink:          #2c1e12;
  --ink-soft:     #66503c;
  --wood-1:       #d29e61;
  --wood-2:       #b57e3f;
  --wood-3:       #945f27;
  --wood-edge:    #82521e;
  --accent:       #c85033;
  --accent-soft:  #fce8dd;
  --shadow:       0 16px 40px rgba(95, 55, 20, .18);
  --radius:       18px;
  --focus:        #c85033;
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: contain;
  font-family: ui-rounded, "SF Pro Rounded", "Avenir Next", "Nunito", "Segoe UI", system-ui, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(1200px 600px at 12% -10%, rgba(255, 220, 165, .32), transparent 60%),
    radial-gradient(900px 500px at 92% 4%, rgba(255, 185, 135, .25), transparent 60%),
    var(--paper);
  min-height: 100svh;
  line-height: 1.55;
}

.wrap {
  width: min(1120px, 100% - 2.5rem);
  margin-inline: auto;
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}
.wrap-stage { width: min(1180px, 100% - 1.5rem); }

/* Kein 300-ms-Verzug und kein Doppeltipp-Zoom auf Bedienelementen */
button, a, .story-card { touch-action: manipulation; }

.skip {
  position: absolute; left: -999px; top: 0; z-index: 50;
  background: var(--ink); color: var(--paper); padding: .7rem 1.1rem; border-radius: 0 0 12px 0;
}
.skip:focus { left: 0; }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ------------------------------ Kopf ------------------------------------ */

.site-head { padding: clamp(2rem, 5vw, 3.6rem) 0 1.4rem; text-align: center; }

.kicker {
  margin: 0 0 .45rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-size: .8rem;
  font-weight: 700;
  color: var(--accent);
}

.site-head h1 {
  margin: 0;
  font-size: clamp(2.2rem, 6.5vw, 4rem);
  line-height: 1.05;
  letter-spacing: -.015em;
  color: #24160b;
}

/* ------------------------------- Sprache -------------------------------- */

.sprachwahl {
  display: inline-block;
  min-height: 38px;
  margin-top: 1rem;
  padding: .35rem 2.2rem .35rem 1.1rem;
  border: 1px solid rgba(140, 90, 35, .25);
  border-radius: 999px;
  background: #fffdf8
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M4 6l4 4 4-4' fill='none' stroke='%238a5520' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>")
    no-repeat right .85rem center;
  background-size: 13px;
  color: var(--ink);
  font: inherit;
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(95, 55, 20, .08);
  appearance: none;
  -webkit-appearance: none;
  transition: border-color .15s, box-shadow .15s;
}

.sprachwahl:hover {
  border-color: var(--accent);
  box-shadow: 0 3px 12px rgba(200, 80, 50, .15);
}

.login-sprachwahl {
  display: inline-flex;
  gap: .2rem;
  margin-top: 1.1rem;
  padding: .2rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, .06);
}
.login-sprachwahl button {
  min-height: 40px;
  padding: .35rem 1.1rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-soft);
  font: inherit;
  font-size: .92rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .18s, color .18s;
}
.login-sprachwahl button[aria-pressed="true"] {
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
}
.login-sprachwahl button:hover:not([aria-pressed="true"]) { color: var(--ink); }

/* ------------------------------ Kategorien ------------------------------ */

.kat-grid { margin-top: 1.6rem; }

.kat-mosaik {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 3px;
  background: rgba(0, 0, 0, .25);
}
.kat-mosaik-1 { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.kat-mosaik-2 { grid-template-rows: 1fr; }
.kat-mosaik-3 > div:first-child { grid-row: span 2; }

.kat-mosaik > div { overflow: hidden; position: relative; width: 100%; height: 100%; }
.kat-mosaik svg { width: 100%; height: 100%; display: block; }
.kat-mosaik .card-art-wrap,
.story-thumb .card-art-wrap { width: 100%; height: 100%; }
.kat-mosaik .card-img-png,
.story-thumb .card-img-png { width: 100%; height: 100%; object-fit: cover; display: block; }

.kat-card .story-meta h3 { font-size: 1.45rem; }

.gruppe-kopf {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  margin: .4rem 0 2.2rem;
}
.gruppe-nav {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.gruppe-intro {
  text-align: center;
  max-width: 740px;
  margin: 0 auto;
  padding: 0 .5rem;
}
.gruppe-intro h2 {
  margin: 0;
  font-size: clamp(1.85rem, 4.2vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.18;
  color: #24160b;
}
.gruppe-hinweis {
  margin: .65rem auto 0;
  color: var(--ink-soft);
  font-size: 1.02rem;
  line-height: 1.6;
  max-width: 62ch;
}

.kat-thumb-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 50% 48%, #fbf7ef 0%, #f2e5d0 65%, #e5d1b3 100%);
  width: 100%;
  height: 100%;
  box-shadow: inset 0 0 14px rgba(142, 88, 33, .12);
}
.kat-thumb-empty-icon {
  font-size: 3.8rem;
  font-weight: 700;
  color: rgba(135, 80, 28, .45);
  font-family: var(--font-serif, "Hiragino Mincho ProN", "Yu Mincho", serif);
  user-select: none;
  line-height: 1;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .8);
}

.gruppe-empty {
  grid-column: 1 / -1;
  list-style: none;
  text-align: center;
  padding: 3rem 1.5rem;
  background: rgba(255, 255, 255, .55);
  border: 1.5px dashed rgba(142, 88, 33, .28);
  border-radius: var(--radius);
  margin: 1.5rem auto;
  max-width: 520px;
  width: 100%;
  box-shadow: 0 4px 16px rgba(95, 55, 20, .04);
}
.gruppe-empty-text {
  color: var(--ink-soft);
  font-size: 1.05rem;
  line-height: 1.5;
  margin: 0;
}

/* --------------------------- Geschichten-Gitter ------------------------- */

.story-grid {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  display: grid;
  gap: clamp(1.2rem, 3vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(310px, 380px));
  justify-content: center;
}

.story-card {
  display: block;
  width: 100%;
  border: 0;
  padding: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  border-radius: var(--radius);
  transition: transform .22s ease;
}
.story-card:hover { transform: translateY(-6px) rotate(-.4deg); }
.story-card:active { transform: translateY(-2px) scale(.995); }

/* Warmer japanischer Holzrahmen für alle Vorschaubilder */
.story-thumb {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  overflow: hidden;
  background: var(--wood-2);
  padding: 13px;
  border: 2.5px solid #7d491a;
  box-shadow:
    0 14px 34px rgba(95, 55, 20, .22),
    inset 0 1px 1px rgba(255, 255, 255, .55),
    inset 0 -1px 2px rgba(0, 0, 0, .35),
    inset 1px 0 1px rgba(255, 255, 255, .3),
    inset -1px 0 2px rgba(0, 0, 0, .25);
  background-image:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .07) 0 4px, rgba(0, 0, 0, .04) 4px 10px),
    linear-gradient(155deg, #d5a267, #b88243 55%, #9a652e);
}
.story-thumb > .inner {
  position: absolute;
  top: 13px;
  left: 13px;
  right: 13px;
  bottom: 13px;
  inset: 13px;
  border-radius: 8px;
  overflow: hidden;
  background: #fbf6ec;
  border: 1px solid rgba(110, 65, 25, .4);
  box-shadow:
    inset 0 0 0 1px rgba(45, 25, 10, .3),
    inset 0 3px 8px rgba(0, 0, 0, .18);
}
.story-thumb svg { display: block; width: 100%; height: 100%; }

.story-meta { padding: .95rem .3rem 0; }
.story-meta h3 { margin: 0; font-size: 1.32rem; line-height: 1.2; }

/* Der Titel, unter dem die Geschichte zu Hause bekannt ist – 笠地蔵 statt
   »Die Hüte für die Steinfiguren«. Zurückhaltend gesetzt: Er soll da sein,
   aber dem übersetzten Titel nicht die Schau stehlen. */
.story-meta .originaltitel {
  margin: .1rem 0 0;
  font-size: .92rem;
  color: var(--ink-soft);
  opacity: .8;
}

.badge {
  display: inline-block;
  margin-top: .55rem;
  margin-right: .35rem;
  padding: .22rem .7rem;
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 700;
  background: var(--accent-soft);
  color: var(--accent);
}

.badge-herkunft {
  background: transparent;
  color: var(--ink-soft);
  box-shadow: inset 0 0 0 2px rgba(140, 105, 70, .28);
}

/* --------------------- Herkunft an der Karte ---------------------------- */

/* Liegt außerhalb des Karten-Knopfes: Ein Knopf im Knopf ist nicht erlaubt,
   und die Unterzeile soll sich öffnen lassen, ohne die Geschichte zu
   starten. */
.karte-fuss { padding: 0 .3rem; }

.untertitel {
  margin: .25rem 0 0;
  color: var(--ink-soft);
  font-size: .98rem;
}

/* Dieselbe Unterzeile, nur wenn eine Quelle dahintersteckt: dann ist sie der
   Knopf, der den Absatz darunter auf- und zuklappt. */
.untertitel-knopf {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: color .18s;
}
.untertitel-knopf:hover { color: var(--ink); }
.untertitel-knopf span { display: inline-block; transition: transform .2s; }
.untertitel-knopf.auf span { transform: rotate(180deg); }

.quelle {
  margin: .5rem 0 0;
  max-width: 60ch;
  font-size: .9rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

/* Der Satz zur Kategorie, offen unter der Überschrift – wie in der App. */
.gruppe-hinweis {
  margin: .5rem 0 0;
  max-width: 68ch;
  font-size: .95rem;
  color: var(--ink-soft);
}

/* ------------------------------ Bühnenkopf ------------------------------ */

.view#view-story { padding-top: .5rem; }

.stage-head {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.2rem;
  width: 100%;
}
.stage-head-left {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.stage-head h2 {
  margin: 0;
  text-align: center;
  font-size: clamp(1.15rem, 2.3vw, 1.55rem);
  font-weight: 700;
  color: #1a2a3a;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.stage-head-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .5rem;
}

.btn {
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  border-radius: 999px;
  padding: .5rem 1rem;
  border: 2px solid transparent;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.btn-back {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .42rem 1.05rem .42rem .8rem;
  font-size: .88rem;
  font-weight: 600;
  font-family: inherit;
  color: var(--ink-soft);
  background: rgba(255, 255, 255, .7);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(142, 88, 33, .24);
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(60, 40, 20, .05);
  cursor: pointer;
  text-decoration: none;
  transition: all .2s cubic-bezier(0.16, 1, 0.3, 1);
}
.btn-back .btn-back-icon {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  flex-shrink: 0;
  transition: transform .2s ease;
}
.btn-back:hover {
  background: #ffffff;
  color: var(--ink);
  border-color: rgba(142, 88, 33, .45);
  box-shadow: 0 4px 12px rgba(95, 55, 20, .1);
  transform: translateX(-3px);
}
.btn-back:hover .btn-back-icon {
  transform: translateX(-2px);
}
.btn-back:active {
  transform: translateX(-1px) scale(.98);
}
.btn-sm {
  font-size: .86rem;
  font-weight: 600;
  padding: .35rem .85rem;
}
.btn-icon {
  font-size: .95rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btn-ghost {
  background: transparent;
  color: var(--ink-soft);
  border-color: rgba(100, 125, 150, .3);
}
.btn-ghost:hover { background: var(--paper-2); color: var(--ink); border-color: rgba(60, 95, 130, .4); }
.btn-ghost[aria-pressed="true"] {
  background: #c85033;
  border-color: #c85033;
  color: #fff;
}
/* Vorlesen-Knopf ohne Chirp-3-HD-Datei für die gerade gezeigte Karte */
.btn-ghost:disabled {
  opacity: .32;
  cursor: default;
  background: transparent;
  border-color: rgba(140, 105, 70, .3);
  color: var(--ink-soft);
}
.btn-ghost:disabled:hover { background: transparent; color: var(--ink-soft); }
.btn-solid {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  padding: .7rem 1.5rem;
  font-size: 1.05rem;
}
.btn-solid:hover { filter: brightness(1.07); }

/* --------------------------------- Butai -------------------------------- */

.butai {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(10px, 1.6vh, 18px);
  width: min(100%, calc(56svh * var(--kw, 25) / var(--kh, 16)));
  margin-inline: auto;
}

/* Authentischer warmer japanischer Butai-Holzrahmen (Hinoki / Zedernholz) */
.butai-rahmen {
  position: relative;   /* Bezug für den Ende-Vorhang */
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.8vh, 18px);
  border-radius: 20px;
  padding: clamp(14px, 2.4vw, 26px);
  background-image:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .07) 0 4px, rgba(0, 0, 0, .04) 4px 10px),
    linear-gradient(155deg, #d29e61, #b57e3f 55%, #945f27);
  box-shadow: 0 20px 50px -10px rgba(95, 55, 20, .28),
              inset 0 2px 1px rgba(255, 255, 255, .45),
              inset 0 -2px 6px rgba(0, 0, 0, .35);
  border: 3px solid #8e5821;
}

.butai-frame {
  position: relative;
  aspect-ratio: var(--kw, 25) / var(--kh, 16);
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
  background: #3a2210;
  box-shadow: inset 0 0 0 3px rgba(45, 25, 10, .85),
              inset 0 8px 22px rgba(0, 0, 0, .45),
              0 3px 10px rgba(0, 0, 0, .18);
}

.stage {
  position: absolute;
  inset: 0;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.card {
  position: absolute;
  inset: 0;
  will-change: transform;
}
.card svg { display: block; width: 100%; height: 100%; }

.card-art-wrap {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #23150a;
  overflow: hidden;
}

.card-img-png {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@keyframes cardInRight { from { transform: translateX(102%); } to { transform: translateX(0); } }
@keyframes cardInLeft  { from { transform: translateX(-102%); } to { transform: translateX(0); } }
@keyframes cardOutLeft { from { transform: translateX(0); } to { transform: translateX(-102%); } }
@keyframes cardOutRight{ from { transform: translateX(0); } to { transform: translateX(102%); } }

.card.in-right  { animation: cardInRight  .42s cubic-bezier(.32, .72, .3, 1) both; }
.card.in-left   { animation: cardInLeft   .42s cubic-bezier(.32, .72, .3, 1) both; }
.card.out-left  { animation: cardOutLeft  .42s cubic-bezier(.32, .72, .3, 1) both; z-index: 2; }
.card.out-right { animation: cardOutRight .42s cubic-bezier(.32, .72, .3, 1) both; z-index: 2; }

/* Das Blatt im Rahmen – traditionelles japanisches Kamishibai-Textblatt */
.text-panel {
  background: linear-gradient(175deg, #fdfcf7 0%, #f6eee0 100%);
  border-radius: 10px;
  padding: clamp(0.9rem, 2.4vw, 2rem);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .85),
              inset 0 0 18px rgba(180, 140, 90, .14),
              0 3px 12px rgba(0, 0, 0, .18);
  border: 1px solid #dacdb3;
  outline: 1px solid rgba(160, 125, 85, .32);
  outline-offset: -8px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* Alle Karten liegen in derselben Rasterzelle übereinander; die längste gibt
   die Höhe vor. Nur `#cardText` ist sichtbar. */
.text-stapel { display: grid; width: 100%; height: 100%; }
.text-stapel > * { grid-area: 1 / 1; }
.text-mass { display: grid; width: 100%; height: 100%; }
.text-mass > * { grid-area: 1 / 1; visibility: hidden; }

.card-text {
  margin: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.verse-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: clamp(0.6rem, 1.8vh, 1.35rem);
  width: 100%;
  margin: 0 auto;
  padding: 0.2rem;
}

.verse-line {
  display: block;
  width: 100%;
  white-space: nowrap;
  text-align: center;
  font-size: clamp(0.95rem, 1.95vw, 1.48rem);
  font-weight: 600;
  line-height: 1.38;
  letter-spacing: 0.014em;
  color: #2c1c0f;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.85);
}

/* ------------------------------- Steuerung ------------------------------ */

/* Knöpfe und 8 interaktive Punkte in einer Zeile unter dem Kamishibai-Rahmen */
.butai-bedienung {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 2.6vw, 28px);
  margin-top: clamp(6px, 1.4vh, 14px);
}

.nav-btn {
  width: clamp(48px, 5.8vw, 58px);
  height: clamp(48px, 5.8vw, 58px);
  flex-shrink: 0;
  border-radius: 50%;
  border: 3px solid #8a5520;
  background: linear-gradient(145deg, #fffdf8, #f5ebd8);
  color: #5c3510;
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow: 0 4px 0 rgba(100, 60, 20, .28), 0 5px 12px rgba(0, 0, 0, .1);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, opacity .15s ease;
}
.nav-btn svg { width: 44%; height: 44%; }
.nav-btn:hover {
  background: linear-gradient(145deg, #e45a3c, #bf3f22);
  color: #fff;
  border-color: #9e2d14;
  box-shadow: 0 4px 0 rgba(120, 35, 15, .35), 0 6px 14px rgba(228, 90, 60, .3);
  transform: translateY(-2px);
}
.nav-btn:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 rgba(120, 35, 15, .35);
}
.nav-btn:disabled {
  opacity: .3;
  cursor: default;
  box-shadow: none;
  transform: none;
}
.nav-btn:disabled:hover {
  background: linear-gradient(145deg, #fffdf8, #f5ebd8);
  color: #5c3510;
  border-color: #8a5520;
  box-shadow: none;
}

/* 8 interaktive Punkte für die Bildkarten */
.stage-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 1.2vw, 13px);
  padding: 8px 18px;
  background: rgba(140, 90, 35, .08);
  border-radius: 30px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .06);
  border: 1px solid rgba(140, 90, 35, .18);
}

.stage-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #dfcfb8;
  border: 2px solid #b8a284;
  cursor: pointer;
  padding: 0;
  outline: none;
  transition: all .28s cubic-bezier(.34, 1.56, .64, 1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
}

.stage-dot:hover {
  transform: scale(1.3);
  background: #ea866e;
  border-color: #c85033;
}

.stage-dot.active {
  width: 32px;
  border-radius: 12px;
  background: linear-gradient(135deg, #e45a3c, #ba3c20);
  border-color: #9e2d14;
  box-shadow: 0 3px 10px rgba(186, 60, 32, .4);
  transform: scale(1.05);
}

/* ------------------- Breiter als hoch: Bild links, Text rechts ---------- */

@media (min-aspect-ratio: 1 / 1) {
  .butai { width: auto; max-width: 98%; }

  .butai-rahmen {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: clamp(12px, 1.6vw, 22px);
    width: auto;
  }

  /* Erst die Höhe, dann folgt die Breite aus dem Seitenverhältnis. */
  .butai-frame {
    flex: 0 0 auto;
    height: min(58svh, 540px);
    width: auto;
    aspect-ratio: var(--kw, 25) / var(--kh, 16);
    max-width: 60vw;
  }

  /* Im Quadrat-Modus hat auch der Textkasten die exakte 1:1 Quadrat-Form! */
  .text-panel {
    flex: 0 0 auto;
    height: min(58svh, 540px);
    width: auto;
    aspect-ratio: var(--kw, 25) / var(--kh, 16);
    min-width: 0;
    max-width: 60vw;
  }
}

/* ------------------------------ 404-Seite ------------------------------- */

.oops { text-align: center; padding: clamp(2rem, 8vw, 5rem) 0 4rem; }
.oops .butai { max-width: 620px; margin: 0 auto 2rem; }
.oops h1 { font-size: clamp(1.8rem, 5vw, 2.8rem); margin: 0 0 .6rem; }
.oops p {
  color: var(--ink-soft);
  font-size: 1.15rem;
  max-width: 40ch;
  margin: 0 auto 1.6rem;
}

.anmelde-fehler {
  color: var(--ink);
  background: var(--accent-soft);
  border-radius: 12px;
  padding: .8rem 1.1rem;
  max-width: 44ch;
  margin: 0 auto 1.6rem;
}

/* Die eigentliche Anmeldung, jetzt zweiter Schritt statt erstem: eine
   zurückhaltende Karte unter der Werbefläche, für alle, die die Seite schon
   kennen. */
.anmelde-karte {
  max-width: 460px;
  margin: 1.6rem auto 0;
  padding: 1.7rem 1.9rem;
  border-radius: var(--radius);
  background: var(--paper-2);
  text-align: center;
}
.anmelde-karte p { margin: 0 0 1.1rem; color: var(--ink-soft); }

/* -------------------- Werbefläche (Anmeldeseite) ------------------------ */

/* Zwei Spalten: links der Werbetext für die App, rechts ein Bild aus
   Momotarō. Unter 760px fällt sie auf eine Spalte, Text zuerst in der
   Reihenfolge des Markups - wer den Bildschirmleser benutzt, soll erfahren,
   worum es geht, bevor das (rein schmückende) Bild überhaupt drankommt. */
.werbung {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(1.6rem, 4vw, 3.2rem);
  align-items: center;
  padding: clamp(1.4rem, 4vw, 2.6rem) 0 clamp(2rem, 5vw, 3rem);
}
@media (max-width: 760px) {
  .werbung { grid-template-columns: 1fr; }
}

.werbung-text p {
  margin: 0 0 1rem;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 56ch;
}

/* Die Zusatzpakete, knapp aufgezählt statt in einem Fließtextsatz. */
.werbung-pakete {
  margin: 0 0 1.2rem;
  padding: 0;
  list-style: none;
  max-width: 56ch;
}
.werbung-pakete li {
  position: relative;
  padding-left: 1.1rem;
  margin: 0 0 .3rem;
  font-size: 1.05rem;
  line-height: 1.5;
  color: var(--ink-soft);
}
.werbung-pakete li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .65em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

/* Das Bild ist der eigentliche Anmeldeweg (siehe .werbung-bild-link und
   login.js) - die sichtbare "Schon dabei?"-Karte bleibt normalerweise
   verborgen. Ein leichtes Heben beim Hover verrät, dass sich hier etwas
   tippen lässt, ohne die Werbefläche mit einem Knopf zu stören. */
.werbung-bild-link {
  display: block;
  border-radius: 20px;
  text-decoration: none;
  color: inherit;
  transition: transform .22s ease;
}
.werbung-bild-link:hover { transform: translateY(-4px); }
.werbung-bild-link:active { transform: translateY(-1px) scale(.995); }

/* Derselbe hölzerne Rahmen wie bei den Titelbildern der Regalkarten
   (.story-thumb), nur größer. */
.werbung-bild {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 20px;
  overflow: hidden;
  background: var(--wood-2);
  padding: 12px;
  box-shadow: var(--shadow);
  background-image: linear-gradient(160deg, var(--wood-1), var(--wood-3));
}
/* `inset` statt `height: 100%` - wie bei .story-thumb: Eine von aspect-ratio
   errechnete Höhe zählt nicht überall als Bezug für Prozenthöhen, dann lief
   das Bild unten über den Rahmen hinaus und verdeckte dessen unteren Rand. */
.werbung-bild > .inner {
  position: absolute;
  inset: 12px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: inset 0 0 0 3px rgba(0, 0, 0, .18), inset 0 8px 20px rgba(0, 0, 0, .22);
}
.werbung-bild svg,
.werbung-bild img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Noch kein echter Ladenlink – die App steht noch nicht im App Store (siehe
   README, »Offene Punkte«), href="#" bleibt ohne Ziel. Das offizielle
   Abzeichen selbst aber in Apples eigenen, festen Farben (Schwarz/Weiß) -
   nicht ans Hell/Dunkel-Thema der Seite gekoppelt wie sonst hier üblich,
   weil Apples Richtlinien das Abzeichen unverändert verlangen. */
.app-store-badge {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  margin-top: .3rem;
  padding: .6rem 1.25rem;
  border-radius: 12px;
  background: #000;
  color: #fff;
  text-decoration: none;
  opacity: .85;
  cursor: default;
}
.app-store-badge:hover { opacity: 1; }
.app-store-badge svg { flex: none; width: 26px; height: 26px; fill: #fff; }
.app-store-badge small { display: block; font-size: .66rem; opacity: .82; }
.app-store-badge strong { display: block; font-size: 1.18rem; font-weight: 700; line-height: 1.18; }

/* -------------------------------- Fuß ----------------------------------- */

.site-foot {
  padding: 2rem 0 calc(3rem + env(safe-area-inset-bottom));
  color: var(--ink-soft);
  font-size: .92rem;
  text-align: center;
}
.site-foot p { max-width: 60ch; margin-inline: auto; }

.site-foot nav {
  margin-top: .7rem;
  display: flex;
  gap: 1.1rem;
  justify-content: center;
  flex-wrap: wrap;
}
.site-foot nav a { color: var(--ink-soft); text-decoration: underline; text-underline-offset: 2px; }
.site-foot nav a:hover { color: var(--ink); }

/* -------------------- Rechtliches (Impressum & Co.) ----------------------- */

/* Schlichte Fließtext-Seite: Impressum, Datenschutzerklärung und
   Nutzungsbedingungen zusammen auf einer Seite (rechtliches.html) statt auf
   dreien - kein Bild, kein Zweispalter, nur zum Lesen. h2 gliedert die drei
   Teile, h3 die nummerierten Abschnitte darin. */
.rechtstext {
  max-width: 62ch;
  padding: 1rem 0 3rem;
  line-height: 1.6;
}
.rechtstext h2 {
  font-size: 1.3rem;
  margin: 2.6rem 0 .6rem;
  padding-top: 1.4rem;
  border-top: 2px solid rgba(140, 105, 70, .2);
}
.rechtstext h2:first-of-type { margin-top: 1.8rem; padding-top: 0; border-top: 0; }
.rechtstext h3 { font-size: 1.02rem; margin: 1.4rem 0 .4rem; }
.rechtstext p { margin: 0 0 .9rem; color: var(--ink-soft); }
.rechtstext ul { margin: 0 0 .9rem; padding-left: 1.3rem; color: var(--ink-soft); }
.rechtstext li { margin: 0 0 .4rem; }
.rechtstext a { color: var(--accent); }

/* Steht unter jedem der drei Texte, solange sie Entwürfe sind - siehe
   README, »Offene Punkte«. */
.rechtstext-hinweis {
  margin-top: 1.6rem;
  padding: .9rem 1.1rem;
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--ink) !important;
  font-size: .92rem;
}

/* ------------------------------ Vollbild -------------------------------- */

/* Fallback ohne Fullscreen-API (iPhone): alles andere ausblenden */
body.immersiv { overflow: hidden; }
body.immersiv .site-head,
body.immersiv .site-foot { display: none; }

body.immersiv .wrap-stage {
  position: fixed;
  inset: 0;
  z-index: 100;
  width: 100%;
  margin: 0;
  background: var(--paper);
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: auto;
  padding:
    max(10px, env(safe-area-inset-top))
    max(12px, env(safe-area-inset-right))
    max(10px, env(safe-area-inset-bottom))
    max(12px, env(safe-area-inset-left));
}
/* Das Ersatzvollbild (iPhone) darf höher gehen: Kopf und Fuß der Seite sind
   ausgeblendet, die Höhe steht also ganz der Bühne zur Verfügung. */
body.immersiv .butai { width: min(100%, calc(66svh * var(--kw, 25) / var(--kh, 16))); }

/* Hier stand einmal ein `body.immersiv` ohne eigenen Rumpf, direkt vor dieser
   Regel. CSS liest das als Nachfahren-Selektor: Der ganze Vollbild-Block galt
   damit nur innerhalb des Ersatzvollbilds – also ausgerechnet dort **nicht**,
   wo es die echte Fullscreen-API gibt (iPad, Desktop). */
.butai:fullscreen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 0;
  padding: clamp(10px, 2vh, 26px);
  background: var(--paper);
}

/* Knöpfe und Kartenzahl liegen in `.butai` und sind deshalb auch im Vollbild
   da – der Grund, warum sie überhaupt dorthin gewandert sind. */
.butai:fullscreen .butai-rahmen {
  flex: 0 1 auto;
  width: min(100%, calc(58svh * var(--kw, 25) / var(--kh, 16)));
}

/* Nicht schrumpfen lassen: Sonst quetscht der Flex-Algorithmus bei knappem
   Platz den Vorlesetext zusammen, bis Zeilen abgeschnitten sind, statt das
   Bild kleiner zu machen. */
.butai:fullscreen .text-panel { flex: 0 0 auto; }

@media (min-aspect-ratio: 1 / 1) {
  .butai:fullscreen .butai-rahmen { width: 100%; }
  .butai:fullscreen .butai-frame { height: min(66svh, 620px); }
}

/* ----------------- Telefon im Querformat: eng, aber gleich -------------- */

/* Die Anordnung macht schon die Aspekt-Regel oben. Hier wird nur enger
   gesetzt: Unter der Kopfzeile bleiben keine 400 Punkte Höhe. */
@media (orientation: landscape) and (max-height: 560px) {
  .view#view-story { padding-top: .2rem; }
  .stage-head { margin-bottom: .5rem; gap: .5rem; }
  .stage-head h2 { font-size: 1rem; }

  .butai { gap: 8px; }
  .butai-rahmen { padding: 8px; gap: 8px; }
  .butai-frame { height: min(52svh, 320px); }
  .text-panel { padding: clamp(.6rem, 2vw, 1rem); }
  .card-text { font-size: clamp(.85rem, 2.3vh, 1.1rem); }
  .nav-btn { width: 44px; height: 44px; }
  .stage-dots { padding: 4px 10px; gap: 6px; }
  .stage-dot { width: 10px; height: 10px; }
  .stage-dot.active { width: 22px; }

}

/* --------------------------- kleine Bildschirme ------------------------- */

@media (max-width: 620px) {
  .btn-label { display: none; }
  .stage-head {
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "left right"
      "title title";
    gap: .6rem;
  }
  .stage-head-left { grid-area: left; }
  .stage-head-right { grid-area: right; }
  .stage-head h2 { grid-area: title; font-size: 1.1rem; }
  .story-grid { grid-template-columns: 1fr; gap: 1.2rem; }
  .gruppe-kopf { gap: .6rem; }
}

/* Tablet: zwei Spalten, auch im Hochformat und in der Splitscreen-Ansicht */
@media (min-width: 621px) and (max-width: 1024px) {
  .story-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Dieselbe Falle wie bei der Bühne, nur ungesehen: `minmax(310px, 380px)` und
   die feste Zweierspalte oben bemessen die Spalte allein nach der Breite, und
   die ist auf dem liegenden Telefon reichlich da. `.story-thumb` folgt dem
   mit `aspect-ratio: 1/1` – wird die Spalte 380px breit, wird das Titelbild
   380px hoch, auf einem Schirm, der selbst kaum höher ist. Die Startseite und
   die Kategorie zeigen also übergroße Titelbilder, während die Bühne längst
   nach `svh` rechnet (siehe `.butai-frame`). `34svh` macht die Spalte so
   schmal wie das Titelbild in der Bühne, damit Titel, Unterzeile und Schilder
   ohne Rollen mit aufs Bild passen. Nach den beiden Regeln oben platziert,
   damit sie auf einem breiten, aber flachen Schirm gewinnt. */
@media (orientation: landscape) and (max-height: 560px) {
  .story-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 34svh)); }
}

@media (prefers-reduced-motion: reduce) {
  .card.in-right, .card.in-left, .card.out-left, .card.out-right {
    animation-duration: .01ms;
  }
  .story-card:hover { transform: none; }
}

/* --------------------------------- Druck -------------------------------- */

#printArea { display: none; }

@media print {
  @page { size: A4 landscape; margin: 10mm; }

  body {
    background: #fff;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .site-head, .site-foot, .view, .skip { display: none !important; }

  #printArea { display: block; }

  .print-card {
    page-break-after: always;
    break-after: page;
    break-inside: avoid;
    height: 186mm;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .print-card:last-child { page-break-after: auto; break-after: auto; }

  .print-nr {
    font-size: 10pt;
    color: #6d411d;
    letter-spacing: .1em;
    text-transform: uppercase;
    margin: 0 0 3mm;
  }

  .print-pic {
    height: 126mm;
    aspect-ratio: var(--kw, 25) / var(--kh, 16);
    border: 2px solid #6d411d;
    border-radius: 6px;
    overflow: hidden;
  }
  .print-pic svg { display: block; width: 100%; height: 100%; }

  .print-text {
    margin: 8mm 0 0;
    max-width: 200mm;
    font-size: 17pt;
    line-height: 1.45;
    font-weight: 600;
    white-space: pre-line;
    text-align: center;
    color: #000;
  }
}