/* ============================================================
   Interaktives Klassenzimmer (#so-funktionierts)
   Vertrag: docs/KLASSENZIMMER_CONTRACT.md (inkl. Überarbeitung 2).
   Präfix kz-. Das Telefon selbst gestaltet phone-demo.css (pd-).

   Aufbau:
   - .kz-scene: randlose 3D-Bühne über die volle Fensterbreite, oben und
     unten per Maske weich in den Seitenhintergrund.
   - .kz-sheet: ab 1051 px schwebt darin das iPhone rechts über der Bühne,
     darunter ist es ein Bottom Sheet (fixed), das beim Antippen eines
     Kindes hochfährt.
   - .kz-below: Hinweis, Kinderliste und Elternkarte im Container.

   Die Seite setzt `.landing-body p { margin: 0; color: ... }` und eigene
   h3-Größen (Spezifität 0,1,1). Alle Text-Regeln hier sind darum mit
   `.kz-section` vorangestellt (0,2,0), damit Abstände und Farben greifen.
   ============================================================ */

.kz-section {
  --kz-gutter: max(1.5rem, calc((100% - var(--content)) / 2));
  position: relative;
  padding-block: clamp(5.5rem, 9vw, 9rem);
  background: var(--paper);
  overflow-x: clip;
}

.kz-stage {
  --kz-safe-right: 0px;
  margin-top: clamp(1rem, 3vw, 2.5rem);
}

.kz-stage__main {
  position: relative;
}

/* ---------- Bühne (randlos) ---------- */

.kz-scene {
  position: relative;
  width: 100%;
  height: min(80vh, 780px);
  min-height: 520px;
  isolation: isolate;
}

/* Weicher Übergang in den Seitenhintergrund. Nur Canvas und Illustration
   werden maskiert, Knöpfe und Sprechblase bleiben voll sichtbar. */
.kz-scene canvas,
.kz-fallback {
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 86%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 86%, transparent 100%);
}

.kz-scene canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  touch-action: pan-y;
  outline: none;
}

.kz-scene.is-hovering canvas {
  cursor: pointer;
}

/* Illustration ohne WebGL, und bis das 3D geladen ist */
.kz-fallback {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  align-items: center;
  gap: 1rem;
  padding: 3rem calc(var(--kz-gutter) + var(--kz-safe-right)) 2rem var(--kz-gutter);
}

.kz-fallback[hidden] {
  display: none;
}

.kz-fallback__board {
  padding: clamp(1.1rem, 2.5vw, 2rem);
  border: 10px solid #9b6a3f;
  border-radius: 14px;
  background: #2f5a4c;
  color: #f4f1e4;
  box-shadow: 0 14px 28px rgba(24, 33, 61, .18);
}

.kz-section .kz-fallback__board p {
  margin: 0;
  color: inherit;
}

.kz-section .kz-fallback__board .kz-fallback__title {
  margin-bottom: .5rem;
  font-family: var(--font-head);
  font-size: clamp(1.2rem, 2.4vw, 1.8rem);
  font-weight: 700;
}

.kz-fallback img {
  width: 100%;
  max-width: 280px;
  height: auto;
  justify-self: center;
}

.kz-section .kz-loading {
  position: absolute;
  left: 50%;
  bottom: 2.5rem;
  z-index: 2;
  margin: 0;
  padding: .45rem .9rem;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font-size: .9rem;
  font-weight: 600;
  transform: translateX(-50%);
}

/* ---------- Sprechblase (in der Szene) ---------- */

.kz-bubble {
  --kz-tail: 50%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  width: min(330px, calc(100% - 24px));
  padding: 1rem 1.1rem .8rem;
  border: 2px solid var(--ink);
  border-radius: 22px 22px 22px 8px;
  background: var(--paper);
  box-shadow: 5px 5px 0 var(--ink);
  will-change: transform;
}

.kz-bubble[hidden] {
  display: none;
}

.kz-bubble::after {
  content: "";
  position: absolute;
  bottom: -11px;
  left: var(--kz-tail);
  width: 18px;
  height: 18px;
  border-right: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  background: var(--paper);
  transform: translateX(-50%) rotate(45deg);
}

.kz-bubble.is-beside {
  border-radius: 8px 22px 22px 22px;
}

.kz-bubble.is-beside::after {
  top: 18px;
  bottom: auto;
  left: -11px;
  border-right: 0;
  border-top: 2px solid var(--ink);
  transform: rotate(-45deg);
}

.kz-bubble.is-beside-left {
  border-radius: 22px 8px 22px 22px;
}

.kz-bubble.is-beside-left::after {
  top: 18px;
  right: -11px;
  bottom: auto;
  left: auto;
  border-bottom: 0;
  border-top: 2px solid var(--ink);
  transform: rotate(45deg);
}

.kz-bubble.is-docked {
  top: auto;
  right: 12px;
  bottom: 12px;
  left: 12px;
  width: auto;
  transform: none;
}

.kz-bubble.is-docked::after,
.kz-bubble.is-free::after {
  display: none;
}

/* Angedockt (schmal oder ohne 3D) kompakt: Name und Text links, Punkte und
   Weiter-Knopf rechts daneben, damit die Szene sichtbar bleibt. */
.kz-bubble.is-docked:not([hidden]) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: .75rem;
  align-items: end;
  right: var(--kz-gutter);
  bottom: 3.2rem;
  left: var(--kz-gutter);
  padding: .55rem .6rem .6rem .85rem;
  border-radius: 16px 16px 16px 6px;
  box-shadow: 3px 3px 0 var(--ink);
}

.kz-section .kz-bubble.is-docked .kz-bubble__name {
  grid-column: 1;
  margin-bottom: .1rem;
  font-size: .72rem;
}

.kz-section .kz-bubble.is-docked .kz-bubble__text {
  grid-column: 1;
  font-size: .9rem;
  line-height: 1.35;
}

.kz-bubble.is-docked .kz-bubble__foot {
  grid-column: 2;
  grid-row: 1 / span 2;
  flex-direction: column;
  align-items: flex-end;
  gap: .45rem;
  margin-top: 0;
}

.kz-bubble.is-docked .kz-bubble__next {
  min-height: 32px;
  padding: .3rem .75rem;
  font-size: .8rem;
}

/* Ohne 3D auf breiten Bühnen: Blase links unter der Tafel. */
@media (min-width: 1051px) {
  .kz-stage:not(.has-3d) .kz-bubble.is-docked:not([hidden]) {
    right: auto;
    width: min(46%, 520px);
  }
}

.kz-bubble.is-pop .kz-bubble__text {
  animation: kz-pop .38s cubic-bezier(.2, .9, .3, 1.3);
}

@keyframes kz-pop {
  from { opacity: 0; transform: translateY(6px) scale(.97); }
  to { opacity: 1; transform: none; }
}

.kz-section .kz-bubble__name,
.kz-section .kz-sheet__name {
  margin: 0 0 .25rem;
  color: var(--lilac-deep);
  font-family: var(--font-head);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.2;
  text-transform: uppercase;
}

.kz-section .kz-bubble__text,
.kz-section .kz-sheet__text {
  margin: 0;
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.45;
}

.kz-bubble__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: .7rem;
}

.kz-bubble__dots {
  display: flex;
  gap: .3rem;
}

.kz-bubble__dots span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand-line);
}

.kz-bubble__dots span.is-on {
  width: 18px;
  border-radius: 999px;
  background: var(--lilac);
}

.kz-bubble__next,
.kz-overview,
.kz-try,
.kz-sheet__close {
  min-height: 36px;
  padding: .35rem .95rem;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--sun);
  color: var(--ink);
  font: 700 .88rem/1 var(--font-head);
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}

.kz-bubble__next[hidden],
.kz-overview[hidden],
.kz-try[hidden] {
  display: none;
}

.kz-bubble__next:hover,
.kz-overview:hover,
.kz-try:hover,
.kz-sheet__close:hover {
  box-shadow: 3px 3px 0 var(--ink);
  transform: translate(-1px, -1px);
}

.kz-bubble__next:focus-visible,
.kz-overview:focus-visible,
.kz-try:focus-visible,
.kz-sheet__close:focus-visible,
.kz-kid:focus-visible,
.kz-sheet__name:focus-visible {
  outline: 3px solid var(--lilac-deep);
  outline-offset: 3px;
}

.kz-overview {
  position: absolute;
  top: 2.2rem;
  left: var(--kz-gutter);
  z-index: 4;
  background: var(--paper);
}

/* "App ausprobieren": nur schmal, dort steht das Telefon im Sheet. */
.kz-try {
  display: none;
}

/* ---------- Telefon / Sheet ---------- */

.kz-phone {
  width: 100%;
}

.kz-phone .pd-root {
  --pd-width: var(--kz-pd-width, 300px);
}

.kz-phone__static {
  display: block;
  width: var(--kz-pd-width, 300px);
  max-width: 100%;
  height: auto;
  margin-inline: auto;
  border: 9px solid #121320;
  border-radius: var(--radius-device);
  box-shadow: var(--shadow-phone);
}

.has-phone .kz-phone picture {
  display: none;
}

.kz-section .kz-phone-caption {
  max-width: 300px;
  margin: .8rem auto 0;
  color: var(--ink-soft);
  font-size: .82rem;
  text-align: center;
}

/* Breit: das iPhone schwebt rechts über der Bühne, vertikal mittig. */
@media (min-width: 1051px) {
  .kz-sheet {
    position: absolute;
    top: 50%;
    right: var(--kz-gutter);
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    transform: translateY(-50%);
  }

  .kz-sheet__head {
    display: none;
  }
}

/* ---------- Unter der Bühne ---------- */

.kz-hintrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin: .4rem 0 .7rem;
}

.kz-section .kz-hint {
  margin: 0;
  color: var(--ink-soft);
  font-size: .95rem;
}

.kz-roster {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.kz-kid {
  --kz-kid: var(--lavender);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .1rem;
  width: 100%;
  min-height: 56px;
  padding: .6rem .85rem .6rem 2.4rem;
  position: relative;
  border: 2px solid var(--ink);
  border-radius: 16px;
  background: var(--paper);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.kz-kid::before {
  content: "";
  position: absolute;
  top: 50%;
  left: .8rem;
  width: 18px;
  height: 18px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--kz-kid);
  transform: translateY(-50%);
}

.kz-kid:hover {
  box-shadow: 4px 4px 0 var(--ink);
  transform: translate(-2px, -2px);
}

.kz-kid[aria-pressed="true"] {
  background: var(--kz-kid);
  box-shadow: 4px 4px 0 var(--ink);
}

.kz-kid[aria-pressed="true"] .kz-kid__meta {
  color: var(--ink);
}

.kz-kid--hausaufgabe { --kz-kid: #f9b39c; }
.kz-kid--testcheck { --kz-kid: #b9d7f8; }
.kz-kid--coach { --kz-kid: #cfc4f7; }
.kz-kid--fokus { --kz-kid: #a9e2dc; }
.kz-kid--missionen { --kz-kid: #ffe08f; }
.kz-kid--eltern { --kz-kid: #f7bfd2; }

.kz-kid__name {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1rem;
}

.kz-kid__meta {
  color: var(--ink-soft);
  font-size: .82rem;
}

/* Breit: "Klasse 5 · Fokusmodus" in einer Zeile. Der Punkt ist nur Deko,
   vorgelesen wird das versteckte Komma davor. */
.kz-kid__feat::before {
  content: " · ";
  content: " · " / "";
}

/* ---------- Elternkarte ---------- */

.kz-card {
  margin-top: 1rem;
  padding: clamp(1.1rem, 2.5vw, 1.6rem);
  border: 2px solid var(--ink);
  border-radius: 12px 28px 12px 28px;
  background: var(--cream);
}

.kz-section .kz-card__label {
  margin: 0 0 .35rem;
  color: var(--lilac-deep);
  font-size: .85rem;
  font-weight: 700;
}

.kz-section .kz-card__title {
  margin: 0 0 .45rem;
  font-family: var(--font-head);
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  line-height: 1.25;
}

.kz-section .kz-card__note {
  margin: 0;
  color: var(--ink-soft);
}

.kz-section .kz-card__try {
  margin: .8rem 0 0;
  padding-left: 1.6rem;
  position: relative;
  font-weight: 600;
}

.kz-card__try::before {
  content: "👉";
  position: absolute;
  left: 0;
}

.kz-card__try[hidden],
.kz-card__phone-link[hidden],
.kz-card [data-kz-following][hidden] {
  display: none;
}

.kz-card__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  margin-top: 1rem;
}

.kz-card__actions > :only-child {
  margin-left: auto;
}

/* landing.css blendet .landing-button--small unter 361 px aus (Kopfzeile).
   "Weiter zu …" in der Karte soll aber bleiben. */
.kz-card .landing-button--small:not([hidden]) {
  display: inline-flex;
}

/* Breit steht das Telefon neben der Szene, der Link ist dort überflüssig. */
@media (min-width: 1051px) {
  .kz-card__phone-link {
    display: none;
  }
}

/* ---------- Schmal: Bottom Sheet ---------- */

@media (max-width: 1050px) {
  .kz-section {
    --kz-gutter: 1rem;
  }

  .kz-scene {
    height: 75vh;
    height: 75svh;
    min-height: 420px;
    max-height: 900px;
  }

  .kz-fallback {
    grid-template-columns: 1fr;
    align-content: center;
    justify-items: center;
    padding-inline: var(--kz-gutter);
  }

  .kz-fallback__board {
    width: min(100%, 520px);
  }

  .kz-fallback img {
    max-width: 200px;
  }

  .kz-try {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    min-height: 32px;
    padding: .3rem .8rem;
    font-size: .8rem;
    white-space: nowrap;
  }

  .kz-overview {
    top: 1.4rem;
  }

  .kz-sheet {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 120;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    height: 74vh;
    height: 74dvh;
    max-height: 900px;
    padding: 0 .75rem max(.3rem, env(safe-area-inset-bottom));
    border-top: 2px solid var(--ink);
    border-radius: 22px 22px 0 0;
    background: var(--paper);
    box-shadow: 0 -12px 40px rgba(24, 33, 61, .22);
    overscroll-behavior: contain;
    transform: translateY(105%);
    visibility: hidden;
    transition: transform .38s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .38s;
  }

  /* Niedrige Handys: etwas mehr Höhe, damit das iPhone breit genug bleibt. */
  @media (max-height: 800px) {
    .kz-sheet {
      height: 76vh;
      height: 76dvh;
    }
  }

  .kz-sheet.is-open {
    transform: translateY(0);
    visibility: visible;
    transition: transform .38s cubic-bezier(.2, .8, .2, 1), visibility 0s;
  }

  .kz-sheet.is-dragging {
    transition: none;
  }

  /* Flacher Kopf: Zeile 1 Name, Weiter und ×, darunter die Geschichte in
     höchstens zwei Zeilen über die volle Breite. */
  .kz-sheet__head {
    position: relative;
    display: grid;
    gap: .1rem;
    padding: .55rem 0 .35rem;
    border-bottom: 1px solid var(--brand-line);
    touch-action: none;
  }

  .kz-sheet__grip {
    position: absolute;
    top: 5px;
    left: 50%;
    width: 40px;
    height: 4px;
    margin-left: -20px;
    border-radius: 999px;
    background: var(--brand-line);
  }

  .kz-sheet__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    min-width: 0;
  }

  .kz-section .kz-sheet__name {
    flex: 1;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    font-size: .74rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .kz-section .kz-sheet__name:focus {
    outline: none;
  }

  .kz-section .kz-sheet__name:focus-visible {
    outline: 3px solid var(--lilac-deep);
    outline-offset: 2px;
  }

  /* Zwei Zeilen fest reserviert, damit das Telefon beim Weiterblättern
     nicht springt. Ab 390 px passen alle Zeilen ganz hinein, bei 360 px
     wird die längste am Ende gekürzt (Screenreader lesen alles). */
  .kz-section .kz-sheet__text {
    display: -webkit-box;
    min-height: calc(2 * 1.28 * .78rem);
    overflow: hidden;
    font-size: .78rem;
    line-height: 1.28;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }

  .kz-sheet__text:empty {
    display: none;
  }

  .kz-sheet__row .kz-bubble__next {
    flex: 0 0 auto;
    min-height: 30px;
    padding: .25rem .7rem;
    font-size: .78rem;
    white-space: nowrap;
  }

  .kz-sheet__kid {
    flex: 0 0 auto;
    min-height: 30px;
    padding: .25rem .7rem;
    border: 2px solid var(--ink);
    border-radius: 999px;
    background: var(--paper);
    color: var(--ink);
    font: 700 .78rem/1 var(--font-head);
    white-space: nowrap;
    cursor: pointer;
  }

  .kz-sheet__kid[hidden] {
    display: none;
  }

  .kz-sheet__kid:focus-visible {
    outline: 3px solid var(--lilac-deep);
    outline-offset: 2px;
  }

  .kz-sheet__close {
    display: inline-grid;
    flex: 0 0 auto;
    place-items: center;
    width: 30px;
    min-height: 30px;
    height: 30px;
    padding: 0;
    background: var(--paper);
    font-size: 1.2rem;
    line-height: 1;
  }

  .kz-sheet__phone {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    padding-top: .15rem;
    overflow: hidden;
    overscroll-behavior: contain;
  }

  /* Dünnerer Rahmen und kleinerer Schatten im Sheet. */
  .kz-sheet .pd-phone {
    padding: calc(var(--pd-width) * .02);
    box-shadow:
      inset 0 0 0 calc(var(--pd-width) * .008) #0b0c12,
      0 6px 18px rgba(24, 33, 61, .25);
  }

  .kz-sheet .pd-btn-side {
    display: none;
  }

  .kz-sheet .pd-page {
    overscroll-behavior: contain;
  }

  .kz-sheet .kz-phone-caption {
    display: none;
  }

  /* Ist das Sheet offen, steht die Geschichte dort. */
  .kz-stage.is-sheet-open .kz-bubble,
  .kz-stage.is-sheet-open .kz-overview {
    display: none;
  }

  .kz-roster {
    position: relative; /* Bezug für offsetLeft beim Einblenden */
    display: flex;
    gap: .5rem;
    margin-inline: calc(var(--kz-gutter) * -1);
    padding: .2rem var(--kz-gutter) .7rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scroll-padding-inline: var(--kz-gutter);
    scrollbar-width: none;
  }

  .kz-roster::-webkit-scrollbar {
    display: none;
  }

  .kz-roster li {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }

  .kz-kid {
    min-height: 52px;
    padding: .5rem .9rem .5rem 2.2rem;
  }

  .kz-kid::before {
    left: .7rem;
    width: 14px;
    height: 14px;
  }

  .kz-kid__meta {
    white-space: nowrap;
  }
}

/* Handy: die Bühne so hoch wie das Diorama braucht, nicht 75 % des
   Bildschirms. Weniger Leerraum über der Klasse. */
@media (max-width: 760px) {
  .kz-stage {
    margin-top: .25rem;
  }

  .kz-scene {
    height: auto;
    min-height: 0;
    aspect-ratio: 1 / 1.05;
    max-height: 75svh;
  }

  .kz-scene canvas,
  .kz-fallback {
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 7%, #000 90%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0, #000 7%, #000 90%, transparent 100%);
  }

  .kz-bubble.is-docked:not([hidden]) {
    bottom: .75rem;
  }

  .kz-overview {
    top: .6rem;
  }

  .kz-fallback {
    padding-block: 1rem .5rem;
    gap: .5rem;
  }

  .kz-fallback img {
    max-width: 150px;
  }
}

@media (max-width: 1050px) and (prefers-reduced-motion: reduce) {
  .kz-sheet,
  .kz-sheet.is-open {
    transition: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kz-bubble.is-pop .kz-bubble__text {
    animation: none;
  }

  .kz-kid,
  .kz-bubble__next,
  .kz-overview,
  .kz-try,
  .kz-sheet__close {
    transition: none;
  }
}