/* ============================================================================
   KIDZ.ME — Telefon (USER 16-10: „It should not only scale on mobile it should also look good on mobile … More
   expanders/swiping with sliders“). Nur unter 640 px; der Desktop bleibt, wie er ist.

   Nach den Empfehlungen, die wir gelesen haben (UX zuerst, SEO danach):
   · Das Wichtige zuerst: Bild und Hauptknopf vor langem Text; Text ab dem zweiten Absatz hinter „Weiterlesen“
     (mobil.js). Der Text bleibt im HTML — Google wertet ausgeklappten und eingeklappten Inhalt gleich, solange er
     im Dokument steht (mobile-first indexing).
   · Wischreihen statt langer Stapel — immer mit sichtbarem Anschnitt der nächsten Karte, sonst merkt niemand,
     dass es weitergeht; Einrasten (scroll-snap), aber kein Zwang.
   · Ein fester Hauptknopf unten im Daumenbereich („Geschichte erstellen“, mobil.js), Abstand zur Gestenleiste.
   · Tippflächen mindestens 44–48 px, Schrift mindestens 16 px.
   · Bilder kleiner: eine Figur füllt nicht mehr den halben Bildschirm.
   ============================================================================ */

@media (max-width: 640px) {

  body { font-size: 16px; }

  /* ---------- Weiterlesen (mobil.js setzt .mobil-mehr an die eingeklappten Teile) ---------- */
  .mobil-mehr { display: none !important; }
  .mobil-offen .mobil-mehr { display: revert !important; }
  .mobil-weiter {
    display: inline-flex; align-items: center; gap: .35rem; margin: .2rem 0 .4rem; padding: .55rem 0;
    min-height: 44px; border: 0; background: none; font: inherit; font-weight: 650; color: var(--cta, #6b4fa8); cursor: pointer;
  }
  .mobil-weiter::after { content: "↓"; font-size: .9em; }
  .mobil-offen > .mobil-weiter::after, .mobil-offen .mobil-weiter::after { content: "↑"; }

  /* ---------- Wischreihen ---------- */
  .tafeln, .bildkacheln:not(.eng), .dazu ul, .stile, .posen-reihe, .cards, .g-gutscheine {
    display: flex !important; flex-wrap: nowrap !important; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    gap: .8rem !important; padding: .2rem 1.2rem .9rem !important; margin-inline: -1.2rem !important;
    scroll-padding-inline: 1.2rem; width: auto !important; max-width: none !important;
  }
  .tafeln::-webkit-scrollbar, .bildkacheln::-webkit-scrollbar, .dazu ul::-webkit-scrollbar, .stile::-webkit-scrollbar,
  .posen-reihe::-webkit-scrollbar, .cards::-webkit-scrollbar, .g-gutscheine::-webkit-scrollbar { display: none; }
  .tafeln > li, .bildkacheln:not(.eng) > li, .dazu ul > li, .stile > figure, .cards > .card, .g-gutscheine > * {
    flex: 0 0 82% !important; scroll-snap-align: start; min-width: 0;
  }
  .posen-reihe > .maskottchen { flex: 0 0 auto; scroll-snap-align: center; }
  .posen-reihe { justify-content: flex-start !important; align-items: flex-end; }
  .posen-reihe .maskottchen img { max-height: 190px !important; height: auto !important; width: auto !important; }
  .stile > figure img { width: 100%; }
  .cards { margin: 1.2rem 0 1.6rem !important; }
  .cards > .card { padding: 1.2rem 1rem; }
  /* Hinweis, dass es weitergeht: eine Zeile unter der Reihe */
  .mobil-wischen { font-size: .8rem; color: var(--ink-faint); margin: -.2rem 0 .8rem; text-align: right; }

  /* ---------- Maskottchen kleiner ---------- */
  .maskottchen img { max-height: 210px; width: auto !important; }
  .weiter-schritt .maskottchen img { max-height: 190px; }
  .schritt-maskottchen img, .schritt-bild-hoch img { max-height: 230px; width: auto !important; margin-inline: auto; }
  .hero-bild { max-width: 240px !important; }
  .kopf-mit-figur > .maskottchen img { max-height: 130px; }

  /* Kopf der Inhaltsseiten: die Figur klein über dem Titel statt groß darunter */
  .kopf.zwei > .seitlich { order: -1; }
  .kopf.zwei > .seitlich .maskottchen { justify-content: center; min-height: 0; padding: 0; }
  .kopf.zwei > .seitlich .maskottchen img { max-height: 160px; }
  .kopf.zwei > .seitlich .bildplatz { max-width: 150px !important; margin: 0 auto !important; }

  /* Abschnitte: die Figur neben der Überschrift ist auf dem Telefon kleiner und rückt nach oben */
  .zwei > .seitlich .maskottchen { padding-block: .4rem; min-height: 0; justify-content: center; }
  .zwei:not(.kopf) > .seitlich .bildplatz { max-width: 160px !important; }

  /* ---------- Fester Hauptknopf unten ---------- */
  .mobil-leiste {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    display: flex; gap: .6rem; align-items: center; justify-content: center;
    padding: .6rem 1rem calc(.6rem + env(safe-area-inset-bottom, 0px));
    background: rgba(250, 249, 253, .96); border-top: 1px solid var(--line);
    box-shadow: 0 -6px 18px rgba(40, 30, 60, .08);
    transform: translateY(110%); transition: transform .25s ease;
  }
  .mobil-leiste.sichtbar { transform: none; }
  .mobil-leiste a { flex: 1 1 auto; justify-content: center; min-height: 48px; }
  body.mit-leiste .fuss { padding-bottom: calc(5.2rem + env(safe-area-inset-bottom, 0px)); }

  /* ---------- Startseite: Bild und Knopf vor dem langen Text ---------- */
  .mobil-held { display: flex !important; flex-direction: column; align-items: center; gap: .9rem; margin: 1.1rem 0 1.2rem; }
  .mobil-held img { max-height: 230px; width: auto; }
  /* Die Kinderbühne (kinderbuehne.js) statt des Buchvideos: drei Plätze, Füße auf einer Linie, langsames Ein- und Ausblenden */
  .stage, .slogans { display: none !important; }
  .kinderbuehne { width: 100%; height: 250px; display: grid; grid-template-columns: repeat(3, 1fr); align-items: end; gap: .4rem; }
  .kinderbuehne > img { grid-column: 1 / -1; justify-self: center; max-height: 240px; }   /* Standbild ohne JavaScript */

  .mobil-held .knopf-haupt { min-height: 48px; padding-inline: 1.6rem; }
  .brand { padding-top: 3.8rem !important; }   /* Logo auf Höhe des Menüknopfs, nicht darunter */
  .brand-logo { max-width: 68%; height: auto; }   /* der Menüknopf oben rechts lag sonst auf dem Logo */
  .brand-text { font-size: 1rem; }

  /* ---------- Gestalten: Schrittleiste als Wischreihe, Knöpfe unten fest ---------- */
  .g-schritte { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; padding-bottom: .3rem; margin-inline: -1.2rem; padding-inline: 1.2rem; }
  .g-schritte::-webkit-scrollbar { display: none; }
  .g-schritt { flex: 0 0 auto; }
  .g-schritt button { min-height: 40px; }
  .g-fortschritt { font-size: .86rem; color: var(--ink-soft); margin: .2rem 0 .5rem; }
  .g-leiste {
    position: sticky; bottom: 0; z-index: 30; margin-inline: -1.2rem; padding: .7rem 1.2rem calc(.7rem + env(safe-area-inset-bottom, 0px)) !important;
    background: rgba(250, 249, 253, .97); border-top: 1px solid var(--line); box-shadow: 0 -6px 18px rgba(40, 30, 60, .08);
  }
  .g-leiste > * { flex: 1 1 0; justify-content: center; min-height: 48px; }
  .g-kachel { min-height: 44px; }
  .g-felder { grid-template-columns: 1fr; }
  .g-feld input, .g-feld select, .g-feld textarea { font-size: 16px; }   /* unter 16 px zoomt iOS beim Tippen hinein */
}

/* Die Kinderbühne (kinderbuehne.js) — gilt überall: Telefon (Startseite) und die breite Bühne auf start-b.html */
.kb-platz { height: 100%; display: flex; align-items: flex-end; justify-content: center; min-width: 0; }
.kb-kind { width: auto; height: auto; max-width: 100%; opacity: 0; transform: translateY(6px);
           transition: opacity 1.6s cubic-bezier(.4, 0, .2, 1), transform 1.6s cubic-bezier(.4, 0, .2, 1); }
.kb-kind.ist-da { opacity: 1; transform: none; }
.kb-kind.geht { opacity: 0; transform: translateY(-4px); transition-duration: 1.3s; }
@media (prefers-reduced-motion: reduce) { .kb-kind { transition: none; } }
/* die breite Bühne an der Stelle des Buchvideos (start-b.html) */
@media (min-width: 641px) {
  /* rechts neben der Textspalte der Marke, über der Kartenreihe — nichts liegt über dem Text */
  .stage.stage-kinder { pointer-events: none; transform: none; width: auto; height: auto;
                        left: calc(2 * var(--brand-inset) + var(--marke-breite)); right: 3vw; top: 9%; bottom: 30%; }
  .kb-breit { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(5, 1fr); align-items: end; gap: 1.2rem; }
}

/* Außerhalb des Telefons gibt es die Telefon-Teile nicht */
@media (min-width: 641px) {
  .mobil-held, .mobil-leiste, .mobil-weiter, .mobil-wischen, .g-fortschritt { display: none !important; }
}