/* stil.css — warm, ruhig, gross. Nirgends Text ausser im Eltern-Bereich. */

:root {
  --papier:       #FDF8EE;
  --papier-tief:  #F3E9D6;
  --linie:        #3A332B;
  --linie-zart:   #C8BBA4;
  --marker:       #FF8A3D;
  --haken:        #2F9E44;
  --trompete:     #F7C948;
  --trompete-hell:#FFE082;
  --ventil-schaft:#8FD3F0;
  --griff-linie:  #6B563C;
  --loch-offen:   #FFFDF8;
  --karte:        #FFFFFF;
  --karte-rand:   #E3D6BC;
  --schatten:     rgba(90, 70, 40, 0.16);
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  width: 100%; height: 100%;
  overflow: hidden;
  background: var(--papier);
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

#app { position: relative; width: 100%; height: 100%; }

.bildschirm {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}
.bildschirm[hidden] { display: none; }
/* #uebung setzt display:grid mit hoeherer Spezifitaet — deshalb hier
   ausdruecklich nachziehen, sonst bleibt das Haus-Symbol sichtbar. */
[hidden] { display: none !important; }

button { border: 0; background: none; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer; }
img { display: block; max-width: 100%; max-height: 100%; }

/* ================= Startgeste ================= */

#tor { background: var(--papier); }
#torknopf {
  width: 42vh; height: 42vh; border-radius: 50%;
  background: var(--karte);
  box-shadow: 0 1.2vh 3vh var(--schatten);
  display: flex; align-items: center; justify-content: center;
  animation: atmen 2.4s ease-in-out infinite;
}
#torknopf img { width: 74%; height: 74%; object-fit: contain; }

@keyframes atmen {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.055); }
}
@keyframes atmen-mitte {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50%      { transform: translate(-50%, -50%) scale(1.055); }
}

/* ================= Level-Auswahl ================= */

/* oben Platz fuer das Zahnrad, damit es keine Karte ueberdeckt */
#auswahl { padding: 6.6vh 2vw 3vh; }

/* Zahnrad fuer die Eltern. Bewusst klein, blass und in der Ecke: es
   soll erreichbar sein, aber nichts sein, was ein Kind anzieht.
   Die versteckte Zwei-Finger-Geste gibt es weiterhin. */
#elternknopf {
  position: absolute; top: 0.6vh; right: 1.2vw;
  width: 5.4vh; height: 5.4vh; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: transparent; opacity: .28; z-index: 60;
  transition: opacity .15s, transform .1s ease-out;
}
#elternknopf:active { transform: scale(0.9); opacity: .6; }
#elternknopf svg { width: 62%; height: 62%; }
#elternknopf .zaehne rect, #elternknopf .scheibe { fill: var(--linie); }
#elternknopf .loch { fill: var(--papier); }
.karten {
  display: flex; gap: 2.4vw;
  width: 100%; height: 100%;
  align-items: stretch; justify-content: center;
}
.karte {
  position: relative;
  flex: 1 1 0; max-width: 23.5%;
  background: var(--karte);
  border: 0.5vh solid var(--karte-rand);
  border-radius: 3.2vh;
  box-shadow: 0 1vh 2.4vh var(--schatten);
  display: flex; flex-direction: column;
  align-items: center;
  padding: 2.2vh 1.4vw 1.6vh;
  overflow: hidden;
  transition: transform .12s ease-out, box-shadow .12s ease-out;
}
.karte:active { transform: scale(0.965); }

/* Die Karten kommen nacheinander herein, von links nach rechts.
   Das ist die einzige Stelle, an der eine Animation etwas VERZOEGERT:
   hier laeuft kein Mikrofon und niemand wartet auf einen Einsatz, und
   das Nacheinander sagt dem Kind, dass es hier etwas auszuwaehlen
   gibt. Nach knapp einer halben Sekunde ist alles da. */
.karten.kommen .karte {
  animation: karte-auf .40s cubic-bezier(.2, 1.25, .4, 1) backwards;
}
.karten.kommen .karte:nth-child(2) { animation-delay: .07s; }
.karten.kommen .karte:nth-child(3) { animation-delay: .14s; }
@keyframes karte-auf {
  0%   { transform: translateY(3.5vh) scale(.94); opacity: 0; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}
.karte.zuletzt {
  border-color: var(--marker);
  box-shadow: 0 1vh 2.4vh var(--schatten), 0 0 0 0.7vh rgba(255, 138, 61, .22);
}
.karte-punkte {
  display: flex; justify-content: center;
  gap: 0.6vh; height: 4vh; align-items: center;
  margin-bottom: 1.2vh;
  width: 100%; padding: 0 0.8vh;
}
/* Die Punkte muessen bis zu neun Toene tragen, ohne die Karte zu
 * sprengen und ohne umzubrechen. Deshalb duerfen sie schrumpfen statt
 * in eine zweite Zeile zu rutschen: eine zweite Zeile wuerde wie ein
 * zweiter Tonvorrat aussehen. */
.karte-punkte i {
  display: block; flex: 0 1 2.4vh;
  width: 2.4vh; height: 2.4vh; min-width: 1.2vh;
  aspect-ratio: 1; border-radius: 50%;
  border: 0.3vh solid rgba(0,0,0,.16);
}
/* Wie beim Uebungsbildschirm: das SVG bekommt seine Groesse aus dem
   Kasten und darf ihn deshalb nicht selbst aufblaehen. */
.karte-bild {
  flex: 1 1 auto; width: 100%;
  position: relative; min-height: 0; overflow: hidden;
}
.karte-noten {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
}
.karte-tier { height: 12vh; display: flex; align-items: flex-end; }
.karte-tier img { height: 100%; width: auto; object-fit: contain; }

/* ================= Übungsbildschirm ================= */

#uebung {
  display: grid;
  align-items: center; justify-items: stretch;
  padding: 1vh 2vw;
}

#leiste {
  display: flex; align-items: center;
  gap: 1.6vw; width: 100%; height: 100%;
  /* ueber der Buehne: das Haus muss auch waehrend einer Rueckmeldung
     erreichbar bleiben */
  position: relative; z-index: 40;
}

/* Alle Knoepfe der Leiste tragen dieselbe Form, dieselbe Groesse und
   dieselbe Kante — sie gehoeren sichtbar zusammen. */
#leiste > button, #modi button {
  flex: 0 0 auto;
  width: 11.5vh; height: 11.5vh;
  border-radius: 2.6vh;
  background: var(--karte);
  border: 0.45vh solid var(--karte-rand);
  box-shadow: 0 0.5vh 1.4vh var(--schatten);
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  transition: transform .1s ease-out, border-color .12s, opacity .12s;
}
#leiste > button:active, #modi button:active { transform: scale(0.93); }

#haus img { width: 76%; height: 76%; object-fit: contain; }

#spielknopf svg { width: 52%; height: 52%; }
#spielknopf .ikon-play { fill: var(--haken); }
#spielknopf .ikon-stop { fill: var(--linie); display: none; }
#spielknopf.laeuft .ikon-play { display: none; }
#spielknopf.laeuft .ikon-stop { display: block; }
#spielknopf.bereit { animation: atmen 2.2s ease-in-out infinite; }

#modi { display: flex; gap: 1.2vw; flex: 0 0 auto; }
#modi button { opacity: .5; }
#modi button.an { opacity: 1; border-color: var(--marker); }

/* In den Knoepfen steht dieselbe Trompete wie unten im Griffbild —
   dasselbe Bild, dieselben gezeichneten Ventile, nur klein und immer
   mit offenen Ventilen. Der Knopf sagt ja nicht, WAS zu greifen ist,
   sondern WER spielt: die App mit oder das Kind allein.

   Der Kasten ist quadratisch, die Trompete doppelt so breit wie hoch;
   sie sitzt deshalb als Band in der Mitte, und darunter bleibt Platz
   fuer den Lautsprecher. */
.modusbild {
  position: relative;
  display: block; width: 92%; height: 92%;
}
.modus-trompete { display: block; width: 100%; height: 100%; }
.modus-laut {
  position: absolute; right: -2%; bottom: 4%;
  width: 42%; height: 42%;
}
.modus-laut path {
  fill: var(--marker); stroke: var(--marker);
  stroke-width: 4; stroke-linejoin: round;
}
.modus-laut .welle {
  fill: none; stroke: var(--marker); stroke-width: 6; stroke-linecap: round;
}
#uebung.stufe1 #modi { display: none; }

#punkte {
  display: flex; gap: 2.2vh; align-items: center;
  justify-content: flex-end; flex: 1 1 auto;
}
#punkte.aus { visibility: hidden; }
.punkt {
  position: relative;
  width: 4.6vh; height: 4.6vh; border-radius: 50%;
  background: var(--papier-tief);
  border: 0.4vh solid var(--linie-zart);
  transition: background-color .08s linear, transform .08s linear;
}
.punkt.an { transform: scale(1.22); }

/* Der letzte Vorzaehler-Punkt sagt: jetzt geht es los. */
.punkt.los {
  background: var(--haken) !important;
  border-color: var(--haken);
  transform: scale(1.6);
}
.punkt.los::after {
  content: '';
  position: absolute; left: 54%; top: 50%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 1.05vh 0 1.05vh 1.7vh;
  border-color: transparent transparent transparent #fff;
}

/* Das SVG haengt absolut im Feld: mit fester Hoehe im Fluss wuerde es
   die Gitterzeile aufblaehen, aus der es seine Groesse bezieht. */
#notenfeld {
  position: relative; overflow: hidden;
  min-width: 0; min-height: 0;
}
#noten {
  display: block; position: absolute;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
}

#grifffeld {
  display: flex; align-items: center; justify-content: center;
  min-width: 0; min-height: 0; overflow: hidden;
}
/* Die gezeichnete Trompete.
 *
 * Sie liegt als Hintergrund hinter dem SVG, nicht als <image> darin.
 * Beide werden mittig und seitenverhaeltnistreu eingepasst (contain
 * hier, xMidYMid meet dort) und haben dasselbe Verhaeltnis 1774:887 —
 * dadurch sitzen die gezeichneten Ventile genau auf ihren Buechsen,
 * gleichgueltig wie gross der Kasten gerade ist.
 *
 * Warum Hintergrund und nicht <image>: eine Bildreferenz INNERHALB
 * eines SVG ist die einzige Art von Verweis, die je nach Umgebung
 * anders behandelt wird. Ein CSS-Hintergrund wird ueberall geladen wie
 * jedes andere Bild der App. */
.trompetenbild {
  background-image: url("../img/trompete-gold.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

#griff { display: block; height: 100%; width: 100%; }

/* Die Ventile fahren, sie springen nicht — aber sie fahren schnell.
 *
 * Ein Perinet-Ventil schnalzt: hinunter durch den Finger, herauf durch
 * die Feder, beides in wenigen Hundertstelsekunden. 55 ms ist gerade
 * noch als Bewegung zu sehen und schon nicht mehr als Warten zu
 * spueren. Laenger gedehnt saehe es aus, als klemme das Ventil.
 *
 * Bewegt wird die ganze Ventilgruppe mit transform — die eine
 * Eigenschaft, die jeder Browser fluessig animiert, ohne das Layout neu
 * zu rechnen. Die Zahl 96 ist der Ventilweg aus griff.js, in
 * Einheiten des Bezugssystems 1774x887.
 *
 * Kein Nachfedern am Ende: bei dieser Dauer waere es nicht als Federn
 * zu erkennen, sondern nur als Unschaerfe. */
.ventil {
  transition: transform 55ms cubic-bezier(.3, .9, .4, 1);
}
.ventil.gedrueckt { transform: translateY(96px); }
.ventil-knopf {
  transition: fill 55ms linear, stroke 55ms linear;
}

/* "Schau auf den Griff" — wenn nichts zu hoeren war, spielt die App
   den Ton noch einmal vor und das Griffbild meldet sich.

   Es pulsieren aber NUR DIE DREI KNOEPFE, nicht die Trompete. Das
   Instrument steht still; bewegen tut sich daran nur, was sich auch am
   echten Instrument bewegt. Das ist zugleich die genauere Ansage: der
   Blick geht auf die Knoepfe und nicht auf das ganze Bild.

   Skaliert wird der Knopf um seine eigene Mitte, dafuer braucht ein
   SVG-Rechteck transform-box und transform-origin — sonst waere der
   Bezugspunkt der Nullpunkt der Zeichenflaeche. Die Verschiebung des
   gedrueckten Ventils sitzt eine Ebene hoeher auf der Gruppe und kommt
   sich damit nicht in die Quere. */
#grifffeld.pulsiert .ventil-knopf {
  transform-box: fill-box; transform-origin: center;
  animation: knopf-pulsieren 1.5s ease-in-out infinite;
}
@keyframes knopf-pulsieren {
  0%, 100% { transform: scale(1);    opacity: 1; }
  50%      { transform: scale(1.22); opacity: .82; }
}

/* ================= Tempo ================= */

#tempofeld {
  display: flex; align-items: center; justify-content: center;
  gap: 2vw; width: 100%; height: 11vh;
}
#tempofeld.aus { visibility: hidden; height: 0.5vh; }
.tempo-tier { height: 9vh; width: auto; object-fit: contain; flex: 0 0 auto; }
#tempobahn {
  position: relative;
  width: 52vw; height: 9vh;
  display: flex; align-items: center;
  touch-action: none;
}
#tempospur {
  position: absolute; left: 0; right: 0; top: 50%;
  transform: translateY(-50%);
  height: 2.6vh; border-radius: 1.3vh;
  background: #E6D8BC;
  box-shadow: inset 0 0.3vh 0.7vh rgba(90,70,40,.22);
}
#tempogriff {
  position: absolute; top: 50%;
  width: 7.6vh; height: 7.6vh; border-radius: 50%;
  transform: translate(-50%, -50%);
  background: var(--marker);
  border: 0.5vh solid #fff;
  box-shadow: 0 0.5vh 1.4vh var(--schatten);
  transition: left .09s ease-out;
}
#tempofeld.gesperrt { opacity: .42; pointer-events: none; }
#tempofeld.gesperrt #tempogriff { transition: left .25s ease-out; }
#hase.winkt { animation: winken 1.1s ease-in-out 3; }
@keyframes winken {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(1.8vw); }
}

/* ================= Bühne für Rückmeldungen ================= */

#buehne {
  position: absolute; inset: 0;
  pointer-events: none; z-index: 30;
  display: flex; align-items: center; justify-content: center;
}
#buehne.sperrt { pointer-events: auto; }

.jubel {
  width: 34vh; height: 34vh;
  animation: jubeln 1.5s ease-out forwards;
}
@keyframes jubeln {
  0%   { transform: scale(.4) rotate(-9deg); opacity: 0; }
  22%  { transform: scale(1.12) rotate(4deg); opacity: 1; }
  40%  { transform: scale(1) rotate(0deg); }
  78%  { transform: scale(1) rotate(0deg); opacity: 1; }
  100% { transform: scale(.94); opacity: 0; }
}

/* Beim Lob fliegen bunte Noten auf — in den Farben des Tonvorrats,
   die das Kind von den Notenkoepfen und den Ventilen schon kennt.

   Der Kopf ist eine schraeg gestellte Ellipse, der Hals haengt rechts
   daran; zusammen ist das die Form, die auf dem Notenblatt steht. Der
   Hals erbt seine Farbe vom Kopf, deshalb genuegt es, dem Kopf eine
   Farbe zu geben. */
.jubelnote {
  position: absolute;
  width: 4.4vh; height: 3.2vh;
  border-radius: 50%;
  opacity: 0;
  animation: notenflug 1.5s cubic-bezier(.16, .62, .4, 1) forwards;
}
.jubelnote::after {
  content: '';
  position: absolute; right: 0.1vh; bottom: 45%;
  width: 0.55vh; height: 4.6vh;
  border-radius: 0.3vh;
  background: inherit;
}
@keyframes notenflug {
  0%   { transform: translate(0, 9vh) rotate(-20deg) scale(.35); opacity: 0; }
  16%  { opacity: 1; }
  72%  { opacity: 1; }
  100% { transform: translate(var(--weit, 0), -34vh) rotate(var(--dreh, -20deg)) scale(1); opacity: 0; }
}

.feder {
  position: absolute;
  width: 15vh; height: 15vh;
  animation: sinken 3.1s cubic-bezier(.32,.08,.42,1) forwards;
}
@keyframes sinken {
  0%   { transform: translate(0, -34vh) rotate(-14deg); opacity: 0; }
  12%  { opacity: 1; }
  30%  { transform: translate(5vh, -14vh) rotate(12deg); }
  55%  { transform: translate(-4vh, 4vh) rotate(-9deg); }
  80%  { transform: translate(3vh, 18vh) rotate(6deg); }
  100% { transform: translate(0, 27vh) rotate(0deg); opacity: 0; }
}

.marker-ring { animation: blinken .55s ease-in-out infinite alternate; }
.haken {
  transform-box: fill-box; transform-origin: center;
  animation: haken-auf .34s cubic-bezier(.2,1.5,.4,1) 1;
}
@keyframes haken-auf {
  0%   { transform: scale(0.2); opacity: 0; }
  100% { transform: scale(1);   opacity: 1; }
}
@keyframes blinken { from { opacity: .35; } to { opacity: 1; } }

/* Eine einzelne Note leuchtet auf. transform-box/-origin sind noetig,
   damit im SVG von der Note aus skaliert wird und nicht vom Nullpunkt
   der Zeichenflaeche. */
.leuchtet {
  transform-box: fill-box; transform-origin: center;
  animation: leuchten 1.05s ease-in-out 2;
}
@keyframes leuchten {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.22); }
}
.hof {
  transform-box: fill-box; transform-origin: center;
  animation: hofleuchten 1.05s ease-in-out 2;
}
@keyframes hofleuchten {
  0%, 100% { opacity: 0;   transform: scale(0.9); }
  50%      { opacity: .55; transform: scale(1.9); }
}

/* ================= Eltern-Bereich ================= */

#eltern {
  background: #FFFDF8;
  align-items: flex-start; justify-content: flex-start;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 4vh 6vw;
}
.eltern-blatt { max-width: 46rem; width: 100%; color: #2C2620; line-height: 1.5; }
.eltern-blatt h1 { font-size: 1.7rem; margin: 0; }

/* Kopfzeile: Titel links, die drei Flaggen rechts oben. Sie stehen
   bewusst ganz oben — wer die Seite nicht lesen kann, muss zuerst
   finden, wo sich das aendern laesst. */
.blatt-kopf {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin: 0 0 1.5rem;
}
#sprachwahl { display: flex; gap: .45rem; flex-shrink: 0; }
#sprachwahl button {
  padding: 0; width: 2.6rem; height: 1.85rem;
  border: 2px solid #DCD0B8; border-radius: .35rem;
  background: #fff; overflow: hidden; line-height: 0;
  opacity: .4; transition: opacity .12s, border-color .12s;
}
#sprachwahl button.an { opacity: 1; border-color: #6B563C; }
#sprachwahl svg { display: block; width: 100%; height: 100%; }

.eltern-blatt h2 { font-size: 1.05rem; margin: 2rem 0 .6rem; color: #6B563C; font-weight: 600; }
.eltern-blatt table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.eltern-blatt td { padding: .5rem .4rem; border-bottom: 1px solid #EDE3D0; }
.eltern-blatt td:first-child { width: 3rem; }
.eltern-blatt td.zahl { text-align: right; width: 6rem; }
.tonpunkt { display: inline-block; width: 1.1rem; height: 1.1rem; border-radius: 50%; vertical-align: -.16rem; }
.knopfreihe { display: flex; flex-wrap: wrap; gap: .5rem; }

/* Tonumfang: jeder Ton ein eigener Schalter */
.tonwahl { display: flex; flex-wrap: wrap; gap: .55rem; margin: .2rem 0 .9rem; }
.tonwahl button {
  display: flex; align-items: center; gap: .5rem;
  padding: .6rem .9rem; border-radius: .7rem;
  border: 2px solid #DCD0B8; background: #fff;
  font-size: 1rem; color: #2C2620;
  opacity: .45;
}
.tonwahl button.an { opacity: 1; border-color: #6B563C; background: #F7F1E4; font-weight: 600; }
.tonwahl button:disabled { cursor: default; }
.tonwahl .punktchen {
  width: 1.15rem; height: 1.15rem; border-radius: 50%;
  border: 1px solid rgba(0,0,0,.18);
}
.tonwahl .zustand { font-size: .8rem; color: #7A6E5E; font-weight: 400; }
.knopfreihe button {
  padding: .55rem 1rem; border-radius: .6rem;
  border: 2px solid #DCD0B8; background: #fff; font-size: .95rem;
}
.knopfreihe button.an { border-color: #6B563C; background: #F3E9D6; font-weight: 600; }
.hinweis { font-size: .85rem; color: #7A6E5E; margin: .6rem 0 0; }
.mikro-zeile { display: flex; justify-content: space-between; padding: .35rem 0; border-bottom: 1px solid #EDE3D0; font-size: .95rem; }
.mikro-zeile b { font-variant-numeric: tabular-nums; }
#mikro-balken { margin-top: .8rem; height: .9rem; background: #EDE3D0; border-radius: .45rem; overflow: hidden; }
#mikro-balken i { display: block; height: 100%; width: 0; background: #6BBF3A; transition: width .06s linear; }
.warnknopf { padding: .7rem 1.2rem; border-radius: .6rem; background: #C62828; color: #fff; font-size: .95rem; }
.schliessen { margin: 2.5rem 0 3rem; padding: .8rem 1.4rem; border-radius: .6rem; background: #6B563C; color: #fff; font-size: 1rem; }

/* ================= Safari-Hinweis (bildlich) ================= */

#safarihinweis { background: var(--papier); padding: 6vh; }
.hinweisbild { width: 70vw; max-width: 60vh; }
.hinweisbild img { width: 100%; height: auto; }

/* ================= Hochformat ================= */
/* Querformat ist fixiert. Kippt das Geraet trotzdem, wird bildlich
   um Drehen gebeten — ohne ein Wort. */

#drehbitte {
  position: absolute; inset: 0; z-index: 90;
  background: var(--papier);
  display: none; align-items: center; justify-content: center;
}
@media (orientation: portrait) {
  #drehbitte { display: flex; }
}
#drehbitte svg { width: 44vw; max-width: 40vh; animation: kippen 2.6s ease-in-out infinite; }
@keyframes kippen {
  0%, 45%   { transform: rotate(0deg); }
  70%, 100% { transform: rotate(-90deg); }
}

/* ================= Zeilenaufteilung je Level ================= */
/* Level 1 braucht den Notenkopf gross (ein Drittel der Hoehe), dafuer
   gibt es dort weder Vorzaehler noch Tempo-Regler. In Level 2 ist die
   Breite der begrenzende Faktor, nicht die Hoehe. */

/* Level 1: das Griffbild steht NEBEN dem System, nicht darunter.
   Nur so bleibt fuer den Notenkopf fast die ganze Bildschirmhoehe
   uebrig — und genau das verlangt Level 1. Vorzaehler und
   Tempo-Regler gibt es dort ohnehin nicht.

   Zwei Zahlen sind gegenueber der Blockfloete anders, und beide aus
   demselben Grund: eine Floete ist hochkant, eine Trompete doppelt so
   breit wie hoch.

   Die Spalte ist breiter (32vw statt 25vw), weil die Trompete in der
   Breite an ihre Grenze stoesst und nicht in der Hoehe — jedes
   Prozent Spaltenbreite macht die drei Ventilknoepfe groesser.

   Und die feste Hoehe sitzt jetzt in der UNTEREN Zeile: das Tier
   nimmt, was uebrig ist, die Trompete bekommt ihre 22vh. Umgekehrt
   (wie bei der Floete) bliebe unter dem Bild ein halber Bildschirm
   leer, denn breiter als die Spalte wird die Trompete nicht. */
#uebung.stufe1 {
  grid-template-columns: 1fr 32vw;
  grid-template-rows: 13vh 1fr 22vh 1vh;
  row-gap: 1.4vh;
}
#uebung.stufe1 #leiste    { grid-area: 1 / 1 / 2 / 3; }
#uebung.stufe1 #notenfeld { grid-area: 2 / 1 / 4 / 2; }
#uebung.stufe1 #tierfeld  { grid-area: 2 / 2 / 3 / 3; }
#uebung.stufe1 #grifffeld { grid-area: 3 / 2 / 4 / 3; }
#uebung.stufe1 #tempofeld { grid-area: 4 / 1 / 5 / 3; }

/* Level 2: senkrecht gestapelt wie im Auftrag aufgezaehlt. Hier ist
   nicht die Hoehe der begrenzende Faktor, sondern die Breite. */
#uebung.stufe2 {
  grid-template-columns: 1fr;
  grid-template-rows: 13vh 1fr 25.5vh 11vh;
  row-gap: 0.6vh;
}
#uebung.stufe2 #tierfeld { display: none; }

/* Das Tier zum Ton: g wie Gans, h wie Hamster. Es steht nur in
   Level 1, wo genau ein Ton geuebt wird. */
#tierfeld {
  display: flex; align-items: center; justify-content: center;
  min-width: 0; min-height: 0; overflow: hidden;
  /* damit das Tier nicht auf der Trompete steht */
  padding-bottom: 2vh;
}
/* Das Tier huepft herein und atmet danach weiter — sehr langsam und
   sehr wenig. Ein Bild, das sich gar nicht ruehrt, wirkt auf ein Kind
   wie ein angehaltenes Bild; ein Bild, das sich zu sehr ruehrt, zieht
   den Blick von den Noten weg. Vier Sekunden Atemzug und gut ein
   Prozent Bewegung sind der Punkt dazwischen: man sieht es, wenn man
   hinsieht, und es stoert nicht, wenn man woanders hinsieht. */
#tierbild {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto; object-fit: contain;
  animation: tier-auf .5s cubic-bezier(.2,1.3,.4,1) 1,
             tier-atmen 4s ease-in-out .5s infinite;
}
@keyframes tier-auf {
  0%   { transform: scale(.55) translateY(8%); opacity: 0; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}
@keyframes tier-atmen {
  0%, 100% { transform: scale(1) translateY(0) rotate(0deg); }
  50%      { transform: scale(1.012) translateY(-1.1%) rotate(.7deg); }
}

#notenfeld, #grifffeld { height: 100%; width: 100%; }


/* ================= Umblättern =================
 *
 * Rechts unten, wie der Griff zur nächsten Seite am Notenständer.
 * Er sitzt über dem Raster, damit er die Aufteilung von Level 1 und
 * Level 2 nicht anfasst, und über der Bühne, damit er auch während
 * einer Rückmeldung erreichbar bleibt — genau wie das Haus.
 */
#umblaettern, #zurueckblaettern {
  position: absolute; right: 2vw; bottom: 1.6vh;
  width: 9vh; height: 9vh;
  border: 0.45vh solid var(--karte-rand);
  border-radius: 2.4vh;
  background: var(--karte);
  box-shadow: 0 0.6vh 1.4vh var(--schatten);
  padding: 0; z-index: 45;
  -webkit-tap-highlight-color: transparent;
  transition: transform .08s linear, opacity .08s linear;
}
/* Zurueck steht links daneben — eine Knopfbreite plus Luft. */
#zurueckblaettern { right: calc(2vw + 10.5vh); }

#umblaettern:active, #zurueckblaettern:active { transform: scale(0.9); opacity: .7; }
#umblaettern svg, #zurueckblaettern svg { width: 74%; height: 74%; }
#umblaettern .blatt, #zurueckblaettern .blatt {
  fill: var(--papier); stroke: var(--linie); stroke-width: 6; stroke-linejoin: round; }
#umblaettern .ecke, #zurueckblaettern .ecke {
  fill: none; stroke: var(--linie); stroke-width: 6; stroke-linejoin: round; }
#umblaettern .pfeil, #zurueckblaettern .pfeil {
  fill: none; stroke: var(--marker); stroke-width: 7;
  stroke-linecap: round; stroke-linejoin: round; }

/* Der Tempo-Regler darf nicht unter die Knoepfe laufen. */
#uebung.stufe2 #tempofeld { padding-right: 23vh; }


/* ================= Wer keine Bewegung mag =================
 *
 * Manche Kinder — und manche Eltern — reagieren auf Bewegung mit
 * Unwohlsein; iOS und Android haben dafuer einen Schalter im System.
 * Wenn er gesetzt ist, bleibt alles Schmueckende stehen.
 *
 * Zwei Dinge bleiben ausdruecklich in Bewegung, weil sie nichts
 * schmuecken, sondern etwas SAGEN:
 *
 *   .ventil       das Ventil faehrt herunter. Es zeigt den Griff; ohne
 *                 die Fahrt springt es, aber es muss sichtbar bleiben,
 *                 welcher Knopf unten ist.
 *   #tempogriff   der Regler folgt dem Finger.
 *
 * Beides ist ohnehin unter 150 ms und damit keine Bewegung, die
 * jemanden verfolgt.
 */
@media (prefers-reduced-motion: reduce) {
  #torknopf,
  #spielknopf.bereit,
  #grifffeld.pulsiert .ventil-knopf,
  #tierbild,
  .karten.kommen .karte,
  .jubel, .jubelnote, .feder,
  .marker-ring, .leuchtet, .hof,
  #hase.winkt,
  #drehbitte svg {
    animation: none !important;
  }
  /* Was sonst nur durch seine Animation sichtbar wurde, muss trotzdem
     zu sehen sein. */
  .jubel, .feder, .jubelnote, #tierbild { opacity: 1; }
  .jubelnote { display: none; }
}