/* KIDZ.ME — „Hoppel ist weg“ v2 (hoppel.js). Jedes Bild ist eine eigene Ebene mit seinem Ort; Bilder blenden als Ganzes über,
   Blasen erscheinen kurz danach. Durchsichtig, nur Dinge und Kinder. */
.hoppel { position: relative; width: 100%; height: 100%; pointer-events: auto; cursor: pointer; }
.hoppel-flaeche { position: absolute; inset: 0; overflow: hidden; }
.hoppel-ebene { position: absolute; inset: 0; opacity: 0; transition: opacity .9s cubic-bezier(.4, 0, .2, 1); }
.hoppel-ebene.da { opacity: 1; animation: hoppel-kamera 7s cubic-bezier(.25, .1, .25, 1) forwards; }
/* premium 19-10: die „Kamera“ fährt während eines Bildes ganz langsam etwas näher heran */
@keyframes hoppel-kamera { from { transform: scale(1); } to { transform: scale(1.035); } }
.hoppel-ebene { transform-origin: 50% 85%; }
.hoppel-teil { position: absolute; width: auto; max-width: none; transform: translateX(-50%); user-select: none; pointer-events: none; }
.hoppel-teil.gespiegelt { transform: translateX(-50%) scaleX(-1); }
/* das Ende: die Stile blenden ineinander */
.hoppel-teil[src*="f12_paar_"]:not([src*="aquarell"]) { opacity: 0; transition: opacity .8s ease; }
.hoppel-teil.sichtbar { opacity: 1 !important; }
.hoppel-teil.geht { opacity: 0 !important; transition: opacity .8s ease; }

/* Blasen: Rede rund, Gedanke als Wolke mit Pünktchen, Erzähler frei in Handschrift, Zettel als Papier */
.hoppel-blase { position: absolute; z-index: 20; transform: translate(-50%, 0) scale(.92); opacity: 0;
                transition: opacity .45s ease, transform .45s cubic-bezier(.2, .9, .3, 1.3);
                font-family: var(--hand); font-size: clamp(.95rem, 1.9vh, 1.25rem); line-height: 1.2; color: var(--ink);
                white-space: nowrap; pointer-events: none; }
.hoppel-blase.da { opacity: 1; transform: translate(-50%, 0) scale(1); }
.hoppel-blase.rede { background: #fff; border: 1.5px solid #3b3550; border-radius: 1.2em; padding: .45em .8em; }
.hoppel-blase.rede::after { content: ""; position: absolute; bottom: -9px; width: 14px; height: 14px; background: #fff;
                            border-right: 1.5px solid #3b3550; border-bottom: 1.5px solid #3b3550; }
.hoppel-blase.rede.schwanz-l::after { left: 18%; transform: rotate(45deg) skew(12deg, 12deg); }
.hoppel-blase.rede.schwanz-r::after { right: 18%; transform: rotate(45deg) skew(12deg, 12deg); }
.hoppel-blase.rede.schwanz-u::after { left: calc(50% - 7px); transform: rotate(45deg); }
.hoppel-blase.denk { background: #fff; border: 1.5px dashed #6b6380; border-radius: 2em; padding: .45em .9em; color: #4a4360; }
.hoppel-blase.denk::before, .hoppel-blase.denk::after { content: ""; position: absolute; background: #fff; border: 1.5px dashed #6b6380; border-radius: 50%; }
.hoppel-blase.denk::before { width: 12px; height: 12px; bottom: -16px; }
.hoppel-blase.denk::after { width: 7px; height: 7px; bottom: -27px; }
.hoppel-blase.denk.schwanz-l::before { left: 20%; } .hoppel-blase.denk.schwanz-l::after { left: 12%; }
.hoppel-blase.denk.schwanz-r::before { right: 20%; } .hoppel-blase.denk.schwanz-r::after { right: 12%; }
.hoppel-blase.denk.schwanz-u::before { left: calc(50% - 6px); } .hoppel-blase.denk.schwanz-u::after { left: calc(50% - 3px); }
.hoppel-blase.erz { color: #4a4360; font-size: clamp(1.05rem, 2.2vh, 1.45rem);
                    text-shadow: 0 0 4px #fff, 0 0 8px #fff, 0 0 14px rgba(255,255,255,.9); }
.hoppel-blase.zettel { background: #fffdf3; padding: .5em .8em; transform: translate(-50%, 0) rotate(-6deg) scale(.92);
                       box-shadow: 0 4px 10px rgba(40, 25, 10, .2); font-size: clamp(1.1rem, 2.4vh, 1.6rem); color: #c2456b; letter-spacing: .04em; }
.hoppel-blase.zettel.da { transform: translate(-50%, 0) rotate(-6deg) scale(1); }
.hoppel-unsichtbar { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .hoppel-ebene, .hoppel-blase { transition: none; } .hoppel-ebene.da { animation: none; } }

/* Bildschirm: die Bühne an der Stelle des Buchvideos (start-b.html) */
.stage.stage-kinder .hoppel { position: absolute; inset: 0; }
/* Telefon: über dem Hauptknopf */
.mobil-held .hoppel { height: 300px; }
.mobil-held .hoppel-blase { font-size: .9rem; }

/* Der Schlusssatz (USER 19-10): größer, „Kind“ wie KIDZ im Logo — Display-Schrift, K rosa, i dunkel, n grün, d blau */
.hoppel-blase.schluss { font-family: var(--display); font-size: clamp(1.5rem, 3.4vh, 2.3rem); color: var(--ink); white-space: normal;
                        width: min(92%, 34ch); text-align: center; line-height: 1.15;
                        text-shadow: 0 0 6px #fff, 0 0 14px #fff, 0 0 22px rgba(255,255,255,.9); }
.kidz-wort { font-weight: 700; letter-spacing: .01em; }
.kidz-0 { color: #D46A7E; } .kidz-1 { color: #2B3A44; } .kidz-2 { color: #5E9C6E; } .kidz-3 { color: #4F8DC2; }
.mobil-held .hoppel-blase.schluss { font-size: 1.25rem; bottom: 74% !important; }