/* html5doctor.com Reset v1.6.1 - http://cssreset.com */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent; }

body {
  line-height: 1; }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block; }

nav ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after, q:before, q:after {
  content: none; }

a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent; }

ins {
  background-color: #ff9;
  color: #000;
  text-decoration: none; }

mark {
  background-color: #ff9;
  color: #000;
  font-style: italic;
  font-weight: bold; }

del {
  text-decoration: line-through; }

abbr[title], dfn[title] {
  border-bottom: 1px dotted;
  cursor: help; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0; }

input, select {
  vertical-align: middle; }

/* COLOR CLASSES!!!!!!*/
.bgYellow {
  background: #FAB502 !important;
  color: #000000 !important; }

.Yellow {
  color: #FAB502 !important; }

.borderLeftbgYellow {
  border-left: 6px solid #FAB502 !important; }
  .borderLeftbgYellow .text {
    margin-left: -6px; }

.borderBottombgYellow {
  border-bottom: 3px solid #FAB502 !important; }

.bgWhite {
  background: #ffffff !important;
  color: #000000 !important; }

.White {
  color: #ffffff !important; }

.borderLeftbgWhite {
  border-left: 6px solid #ffffff !important; }
  .borderLeftbgWhite .text {
    margin-left: -6px; }

.borderBottombgWhite {
  border-bottom: 3px solid #ffffff !important; }

.bgRed {
  background: #E2037A !important;
  color: #ffffff !important; }

.Red {
  color: #E2037A !important; }

.borderLeftbgRed {
  border-left: 6px solid #E2037A !important; }
  .borderLeftbgRed .text {
    margin-left: -6px; }

.borderBottombgRed {
  border-bottom: 3px solid #E2037A !important; }

.bgBlack {
  background: #000000 !important;
  color: #ffffff !important; }

.Black {
  color: #000000 !important; }

.borderLeftbgBlack {
  border-left: 6px solid #000000 !important; }
  .borderLeftbgBlack .text {
    margin-left: -6px; }

.borderBottombgBlack {
  border-bottom: 3px solid #000000 !important; }

.bgGrey {
  background: #707173 !important;
  color: #000000 !important; }

.Grey {
  color: #707173 !important; }

.borderLeftbgGrey {
  border-left: 6px solid #707173 !important; }
  .borderLeftbgGrey .text {
    margin-left: -6px; }

.borderBottombgGrey {
  border-bottom: 3px solid #707173 !important; }

.bgDarkGrey {
  background: #8095A7 !important;
  color: #ffffff !important; }

.DarkGrey {
  color: #8095A7 !important; }

.borderLeftbgDarkGrey {
  border-left: 6px solid #8095A7 !important; }
  .borderLeftbgDarkGrey .text {
    margin-left: -6px; }

.borderBottombgDarkGrey {
  border-bottom: 3px solid #8095A7 !important; }

.bgGreen {
  background: #04978F !important;
  color: #ffffff !important; }

.Green {
  color: #04978F !important; }

.borderLeftbgGreen {
  border-left: 6px solid #04978F !important; }
  .borderLeftbgGreen .text {
    margin-left: -6px; }

.borderBottombgGreen {
  border-bottom: 3px solid #04978F !important; }

.bgPurple {
  background: #990099 !important;
  color: #ffffff !important; }

.Purple {
  color: #990099 !important; }

.borderLeftbgPurple {
  border-left: 6px solid #990099 !important; }
  .borderLeftbgPurple .text {
    margin-left: -6px; }

.borderBottombgPurple {
  border-bottom: 3px solid #990099 !important; }

.bgPink {
  background: #FFB6C1 !important;
  color: #000000 !important; }

.Pink {
  color: #FFB6C1 !important; }

.borderLeftbgPink {
  border-left: 6px solid #FFB6C1 !important; }
  .borderLeftbgPink .text {
    margin-left: -6px; }

.borderBottombgPink {
  border-bottom: 3px solid #FFB6C1 !important; }

.bgOrange {
  background: #f2a300 !important;
  color: #ffffff !important; }

.Orange {
  color: #f2a300 !important; }

.borderLeftbgOrange {
  border-left: 6px solid #f2a300 !important; }
  .borderLeftbgOrange .text {
    margin-left: -6px; }

.borderBottombgOrange {
  border-bottom: 3px solid #f2a300 !important; }

.bgBlue, button {
  background: #0486CC !important;
  color: #ffffff !important; }

.Blue {
  color: #0486CC !important; }

.borderLeftbgBlue {
  border-left: 6px solid #0486CC !important; }
  .borderLeftbgBlue .text {
    margin-left: -6px; }

.borderBottombgBlue {
  border-bottom: 3px solid #0486CC !important; }

.bgLightBlue {
  background: #84c9ff !important;
  color: #000000 !important; }

.LightBlue {
  color: #84c9ff !important; }

.borderLeftbgLightBlue {
  border-left: 6px solid #84c9ff !important; }
  .borderLeftbgLightBlue .text {
    margin-left: -6px; }

.borderBottombgLightBlue {
  border-bottom: 3px solid #84c9ff !important; }

.bgBrown {
  background: #9e4800 !important;
  color: #ffffff !important; }

.Brown {
  color: #9e4800 !important; }

.borderLeftbgBrown {
  border-left: 6px solid #9e4800 !important; }
  .borderLeftbgBrown .text {
    margin-left: -6px; }

.borderBottombgBrown {
  border-bottom: 3px solid #9e4800 !important; }

.bgLightGreen {
  background: #98FB98 !important;
  color: #000000 !important; }

.LightGreen {
  color: #98FB98 !important; }

.borderLeftbgLightGreen {
  border-left: 6px solid #98FB98 !important; }
  .borderLeftbgLightGreen .text {
    margin-left: -6px; }

.borderBottombgLightGreen {
  border-bottom: 3px solid #98FB98 !important; }

.bgGreenYellow {
  background: #ADFF2F !important;
  color: #000000 !important; }

.GreenYellow {
  color: #ADFF2F !important; }

.borderLeftbgGreenYellow {
  border-left: 6px solid #ADFF2F !important; }
  .borderLeftbgGreenYellow .text {
    margin-left: -6px; }

.borderBottombgGreenYellow {
  border-bottom: 3px solid #ADFF2F !important; }

.bgLightBrown {
  background: #DEB887 !important;
  color: #000000 !important; }

.LightBrown {
  color: #DEB887 !important; }

.borderLeftbgLightBrown {
  border-left: 6px solid #DEB887 !important; }
  .borderLeftbgLightBrown .text {
    margin-left: -6px; }

.borderBottombgLightBrown {
  border-bottom: 3px solid #DEB887 !important; }

.bgCoral {
  background: #FF7F50 !important;
  color: #ffffff !important; }

.Coral {
  color: #FF7F50 !important; }

.borderLeftbgCoral {
  border-left: 6px solid #FF7F50 !important; }
  .borderLeftbgCoral .text {
    margin-left: -6px; }

.borderBottombgCoral {
  border-bottom: 3px solid #FF7F50 !important; }

.bgFuchsia {
  background: #FF00FF !important;
  color: #ffffff !important; }

.Fuchsia {
  color: #FF00FF !important; }

.borderLeftbgFuchsia {
  border-left: 6px solid #FF00FF !important; }
  .borderLeftbgFuchsia .text {
    margin-left: -6px; }

.borderBottombgFuchsia {
  border-bottom: 3px solid #FF00FF !important; }

.bgGold {
  background: #FFD700 !important;
  color: #000000 !important; }

.Gold {
  color: #FFD700 !important; }

.borderLeftbgGold {
  border-left: 6px solid #FFD700 !important; }
  .borderLeftbgGold .text {
    margin-left: -6px; }

.borderBottombgGold {
  border-bottom: 3px solid #FFD700 !important; }

.bgTransparent {
  background: transparent !important;
  color: black !important; }

.Transparent {
  color: transparent !important; }

.borderLeftbgTransparent {
  border-left: 6px solid transparent !important; }
  .borderLeftbgTransparent .text {
    margin-left: -6px; }

.borderBottombgTransparent {
  border-bottom: 3px solid transparent !important; }

/*COLOR END*/
@font-face {
  font-family: 'Bliss Regular';
  /*a name to be used later*/
  src: url("fonts/Bliss2L.eot");
  src: url("fonts/Bliss2L.woff") format("woff"), url("fonts/Bliss2L.ttf") format("truetype"), url("fonts/Bliss2L.svg") format("svg");
  font-weight: normal;
  font-style: normal; }
* {
  -webkit-tap-highlight-color: transparent !important; }

body {
  /* Figurengroesse und Bodenlinie als Variablen: beide haengen an der
     Fenstergroesse, damit die Rakete bzw. das Pony auf dem Handy nicht den
     halben Himmel fuellt und auf dem grossen Schirm nicht zur Briefmarke
     schrumpft. --boden-sockel liest questionCtrl.js aus; er sagt, wie weit
     ueber dem unteren Rand die Figur aufsetzt (Weltraum: direkt am Rand,
     Pferdewiese: im Gras). */
  --figur-hoehe: clamp(72px, 12vh + 4vw, 190px);
  --boden-sockel: 0px;
  --balken-breite: clamp(18px, 3.4vmin, 34px);
  /* Grundmass der mitwachsenden Welt am Boden. Jedes Szenerieteil gibt in
     themes.js nur ein Vielfaches davon an, damit die Szene als Ganzes
     mitskaliert und die Verhaeltnisse untereinander stimmen. */
  --szene-hoehe: clamp(46px, 8vh + 2.5vw, 120px);
  /* Abstand des Fragenblocks vom unteren Rand. Welten ohne Szenerie lassen
     ihn unten stehen. */
  --frage-abstand: 10px;
  /* Streifen, den die Zusammenfassung am unteren Rand freilaesst. Welten ohne
     Szenerie brauchen nur etwas Luft ueber der Figur. */
  --bilanz-freiraum: var(--szene-hoehe);
  background: url(../images/spacebackground.jpg);
  background-size: cover;
  overflow: hidden;
  background-position: center center;
  opacity: 0;
  -webkit-transition: all ease 0.5s;
  -moz-transition: all ease 0.5s;
  -ms-transition: all ease 0.5s;
  -khtml-transition: all ease 0.5s;
  transition: all ease 0.5s;
  font-family: "Bliss Regular","Helvetica Neue",Trebuchet MS, Tahoma, Verdana, Arial, sans-serif; }

h2 {
  font-size: 14pt; }

#wrapper {
  margin: 0 auto;
  position: relative;
  width: 100%;
  max-width: 800px;
  background-color: #ffffff;
  background-color: rgba(255, 255, 255, 0.2);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4cffffff, endColorstr=#4cffffff);
  background: transparent \9;
  zoom: 1; }
  #wrapper *:nth-child(n) {
    filter: none; }
  #wrapper #header {
    height: 55px;
    padding-top: 5px;
    width: 100%;
    background: white;
    border-bottom: 2px solid #777; }
    #wrapper #header table td {
      padding: 3px 10px; }
    #wrapper #header table tr.subline {
      font-size: 10pt;
      font-weight: 500;
      color: #707173; }
    #wrapper #header table tr.levelInfo {
      font-size: 11pt; }
    #wrapper #header #headline {
      color: #FAB502;
      font-size: 16pt; }

a {
  color: #ffffff;
  font-weight: bold;
  text-decoration: none; }

input[type='text'], input[type='number'], input[type='password'] {
  padding: 8px;
  width: 100%;
  box-sizing: border-box;
  height: 40px;
  text-align: center;
  font-size: 1.1em;
  font-size: 110%;
  line-height: 24px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -khtml-border-radius: 3px;
  border-radius: 3px;
  border: 0px solid black; }

.selectWrapper {
  position: relative;
  float: left;
  border: 1px solid #eee;
  box-sizing: border-box;
  overflow: hidden;
  width: 100%;
  background: #fff url("data:image/png;base64,R0lGODlhDwAUAIABAAAAAP///yH5BAEAAAEALAAAAAAPABQAAAIXjI+py+0Po5wH2HsXzmw//lHiSJZmUAAAOw==") no-repeat 98% 50%;
  height: 40px;
  line-height: 40px;
  -webkit-border-radius: 100;
  -moz-border-radius: 100;
  -ms-border-radius: 100;
  -khtml-border-radius: 100;
  border-radius: 100; }

.selectWrapper select {
  line-height: 40px;
  padding-left: 5px;
  font-size: 0.9em;
  font-size: 90%;
  width: 100%;
  height: 100%;
  outline: none;
  border: none;
  box-shadow: none;
  background: transparent;
  background-image: none;
  position: relative;
  float: left;
  -webkit-appearance: none;
  -webkit-user-select: auto !important;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  -ms-border-radius: 0;
  -khtml-border-radius: 0;
  border-radius: 0; }

#shareWrapper, #settingsWrapper {
  background-color: #000000;
  background-color: rgba(0, 0, 0, 0.5);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4c000000, endColorstr=#4c000000);
  background: transparent \9;
  zoom: 1;
  color: white;
  position: absolute;
  padding: 10px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -khtml-border-radius: 3px;
  border-radius: 3px;
  text-align: center;
  box-sizing: border-box;
  width: 100%;
  height: 100%; }
  #shareWrapper *:nth-child(n), #settingsWrapper *:nth-child(n) {
    filter: none; }
  #shareWrapper .content, #settingsWrapper .content {
    width: 100%;
    max-width: 350px;
    overflow: auto; }

/* Der Dialog stand oben am Rand, waehrend darunter Platz frei blieb. Flex mit
   margin auto zentriert ihn und laesst ihn trotzdem scrollen, sobald er
   hoeher wird als das Fenster (Handy quer). */
#settingsWrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  overflow: auto; }

#settingsWrapper .content {
  margin: auto;
  padding: 6px 0 18px; }

#settingsWrapper h2 {
  margin-bottom: 2px; }

#settingsWrapper .gameId {
  margin: 0 0 14px;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.75; }

#settingsWrapper .gameId b {
  font-weight: 600;
  letter-spacing: 0.1em; }

#startWrapper {
  background-color: #000000;
  background-color: rgba(0, 0, 0, 0.5);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4c000000, endColorstr=#4c000000);
  background: transparent \9;
  zoom: 1;
  color: white;
  position: absolute;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 10px;
  overflow: auto;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -khtml-border-radius: 3px;
  border-radius: 3px; }
  #startWrapper *:nth-child(n) {
    filter: none; }
  #startWrapper .content {
    padding-bottom: 50px; }
  #startWrapper h2 {
    text-align: center;
    font-weight: bold;
    font-size: 1.3rem;
    font-size: 130%; }
  #startWrapper table {
    width: 100%; }
    #startWrapper table td {
      padding: 10px 0px !important; }

.button {
  height: 40px;
  line-height: 40px;
  font-size: 1.3rem;
  font-size: 130%;
  cursor: pointer; }

#startWrapper table td, #shareWrapper table td {
  padding: 8px;
  text-align: center;
  text-transform: uppercase; }

#finishedWrapper {
  width: 200px;
  position: absolute;
  max-height: 300px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: 10px;
  color: white;
  background-color: #000000;
  background-color: rgba(0, 0, 0, 0.6);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4c000000, endColorstr=#4c000000);
  background: transparent \9;
  zoom: 1; }
  #finishedWrapper *:nth-child(n) {
    filter: none; }

/* Uebungsliste im Abschlussbildschirm: die Aufgaben, die schiefgegangen sind. */
/* Die Wiese als Ergebnis: ein Bild sagt einem Achtjaehrigen mehr als
   "Level 5 erreicht". Die Teile stehen in der Reihenfolge des Sammelns. */
#szenerieBilanz {
  margin: 10px 0; }
  #szenerieBilanz p {
    margin: 6px 0; }
  #szenerieBilanz .szenerieListe {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: center;
    gap: 8px;
    min-height: 52px;
    margin: 8px 0; }
    #szenerieBilanz .szenerieListe img {
      /* Der Kasten ist auf dem Handy nur gut 200px breit - dort duerfen die
         Teile kleiner ausfallen, sonst belegt der breite Bach eine Zeile
         fuer sich. */
      height: clamp(32px, 8vw, 52px);
      width: auto; }
  #szenerieBilanz .szenerieNamen {
    font-weight: bold; }

#uebungWrapper {
  margin: 12px 0px;
  text-align: left; }
  #uebungWrapper h3 {
    font-size: 1rem;
    margin: 0px 0px 4px 0px; }
  #uebungWrapper ul {
    list-style: none;
    margin: 0;
    padding: 0; }
  #uebungWrapper li {
    padding: 2px 0px;
    font-size: 0.95rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15); }

/* Zwei Knoepfe untereinander: der Kasten ist 260px schmal, nebeneinander
   braeche "Nochmal versuchen" auf zwei Zeilen und der zweite Knopf nicht. */
#retryWrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -ms-flex-direction: column;
  flex-direction: column;
  margin: 10px 0px; }

#retryWrapper #retryButton, #retryWrapper #newGameButton {
  font-size: 14pt;
  /* Die 30px seitliche Grundpolsterung braucht es hier nicht - der Knopf ist
     ohnehin so breit wie der Kasten, und mit ihr bricht "Nochmal versuchen"
     auf zwei Zeilen. */
  padding: 8px 10px;
  margin: 0 0 8px; }

/* "Neues Spiel" verwirft die Partie samt Game-ID - es soll nicht aussehen wie
   der Knopf, den man nach jeder Runde drueckt. Das !important ist noetig, weil
   die Grundregel ".bgBlue, button" die Farbe selbst mit !important setzt. */
#retryWrapper #newGameButton {
  background: #7d5f96 !important; }

#loader {
  background-color: #000000;
  background-color: rgba(0, 0, 0, 0.6);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4c000000, endColorstr=#4c000000);
  background: transparent \9;
  zoom: 1;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -khtml-border-radius: 10px;
  border-radius: 10px;
  padding: 20px;
  position: absolute; }
  #loader *:nth-child(n) {
    filter: none; }
  #loader .icon {
    font-size: 20pt;
    color: white; }

#highscoreWrapper {
  width: 200px;
  position: absolute;
  right: 10px;
  padding: 10px;
  max-height: 300px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  background-color: #000000;
  background-color: rgba(0, 0, 0, 0.8);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4c000000, endColorstr=#4c000000);
  background: transparent \9;
  zoom: 1; }
  #highscoreWrapper *:nth-child(n) {
    filter: none; }
  #highscoreWrapper h3 {
    color: white; }

table.layout1 {
  margin-top: 10px; }
  table.layout1.lessPadding td {
    padding: 4px !important; }
  table.layout1 thead th {
    background: #0486CC;
    color: white;
    padding: 5px; }
  table.layout1 td {
    color: white;
    padding: 10px; }

/* Festes Raster: ohne table-layout richtet sich die Spaltenbreite nach dem
   laengsten Text, dadurch sprangen die Felder je nach Sprache der Auswahl
   hin und her und das breiteste Feld schnitt seinen Text ab. */
#settingsWrapper table.settingsForm {
  width: 100%;
  table-layout: fixed;
  margin-top: 4px; }

#settingsWrapper table.settingsForm td {
  padding: 7px 0;
  vertical-align: middle; }

#settingsWrapper table.settingsForm td:first-child {
  width: 42%;
  padding-right: 14px; }

#settingsWrapper table.layout1 td label {
  display: block;
  text-align: left;
  line-height: 1.25;
  font-size: 0.95rem; }

/* Erklaerzeile unter den Zahlenfeldern — ohne sie ist unklar, worauf sich der
   Bereich bezieht (Rechenzahlen, nicht Ergebnis). */
#settingsWrapper table.layout1 td.hint {
  padding-top: 0;
  padding-bottom: 12px;
  text-align: left;
  font-size: 0.8rem;
  line-height: 1.35;
  opacity: 0.7; }

#settingsWrapper table.layout1 select {
  width: 100%;
  height: 42px;
  padding: 0 42px 0 12px;
  border: 1px solid rgba(4, 151, 143, 0.55);
  background-color: rgba(255, 255, 255, 0.96);
  color: #1d2b36;
  font-size: 1rem;
  font-weight: 600;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -khtml-border-radius: 10px;
  border-radius: 10px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, #04978F 50%), linear-gradient(135deg, #04978F 50%, transparent 50%), linear-gradient(to right, #d7e7e6, #d7e7e6);
  background-position: calc(100% - 18px) calc(50% - 3px), calc(100% - 12px) calc(50% - 3px), calc(100% - 2.4rem) 0.35rem;
  background-size: 7px 7px, 7px 7px, 1px 1.8rem;
  background-repeat: no-repeat;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  box-sizing: border-box;
  cursor: pointer; }

/* Zahlenfelder sahen als einzige Bedienelemente noch nach Browser-Voreinstellung
   aus - eckig, ohne Rand - und standen neben den runden Auswahlfeldern wie aus
   einem anderen Formular. */
#settingsWrapper table.settingsForm input[type='number'] {
  height: 42px;
  padding: 0 12px;
  /* Die Grundregel zentriert Zahlenfelder. In dieser Spalte stehen sie unter
     Auswahlfeldern, deren Text links beginnt - zentriert braeche die Kante. */
  text-align: left;
  border: 1px solid rgba(4, 151, 143, 0.55);
  background-color: rgba(255, 255, 255, 0.96);
  color: #1d2b36;
  font-size: 1rem;
  font-weight: 600;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -khtml-border-radius: 10px;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  box-sizing: border-box; }

#settingsWrapper table.settingsForm input[type='number']:focus {
  border-color: #FAB502;
  box-shadow: 0 0 0 3px rgba(250, 181, 2, 0.28);
  outline: none; }

#settingsWrapper table.layout1 select:focus {
  border-color: #FAB502;
  box-shadow: 0 0 0 3px rgba(250, 181, 2, 0.28);
  outline: none; }

/* Die Knoepfe stehen unter der Tabelle statt als Tabellenzellen darin: als
   Zelle brauchten sie display:block, um Radius und Abstand ueberhaupt
   anzunehmen - und genau das nahm ihnen die Breite der Spalte. */
#settingsWrapper .settingsActions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -ms-flex-direction: column;
  flex-direction: column;
  margin-top: 22px; }

#settingsWrapper .settingsActions .button {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 12px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -khtml-border-radius: 10px;
  border-radius: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  -webkit-transition: transform ease 0.15s, box-shadow ease 0.15s;
  -moz-transition: transform ease 0.15s, box-shadow ease 0.15s;
  -ms-transition: transform ease 0.15s, box-shadow ease 0.15s;
  -khtml-transition: transform ease 0.15s, box-shadow ease 0.15s;
  transition: transform ease 0.15s, box-shadow ease 0.15s; }

#settingsWrapper .settingsActions .button:active {
  transform: translateY(1px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); }

#juv_logo {
  height: 45px; }

/* Bezugsrahmen fuer Fragenblock und Highscore. Ohne diese Zeile waere es
   #wrapper - also inklusive Kopfzeile; die Offsets unten rechnen aber mit
   der Spielflaeche. */
#playWrapper {
  position: relative; }

/* Der Fragenblock steht unten rechts: auf dem Tablet in Daumenreichweite,
   und der obere Bildbereich, wo die Figur den Grossteil der Partie schwebt,
   bleibt frei. Absolut positionierte Kaesten sind wie floats shrink-to-fit,
   die min-width-Regeln der Fragetabelle greifen also weiter. */
#questionWrapper {
  position: absolute;
  right: 10px;
  bottom: var(--frage-abstand);
  z-index: 10;
  /* Breite proportional zur Spielflaeche statt in festen Stufen: der Block
     nimmt auf jedem Schirm denselben Anteil ein. Die Untergrenze haelt ihn
     auf dem Handy bedienbar, die Obergrenze verhindert, dass er auf dem
     Desktop das Bild zudeckt. Prozent bezieht sich auf #playWrapper, ist also
     schon bei 800px gedeckelt. */
  width: clamp(210px, 52%, 460px); }
  #questionWrapper table.question {
    width: 100%;
    margin-top: 10px; }
    #questionWrapper table.question td {
      font-size: 1.5rem;
      font-size: 110%;
      text-align: center;
      vertical-align: middle;
      padding: 10px;
      background-color: #0486CC;
      background-color: rgba(4, 134, 204, 0.8);
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4c0486CC, endColorstr=#4c0486CC);
      background: transparent \9;
      zoom: 1;
      color: white;
      cursor: pointer; }
      #questionWrapper table.question td *:nth-child(n) {
        filter: none; }
      #questionWrapper table.question td.question {
        font-weight: bold;
        letter-spacing: 0.1em;
        font-size: 1.4rem !important;
        font-size: 120%;
        height: 35px; }
      #questionWrapper table.question td.answer {
        background-color: #000000;
        background-color: rgba(0, 0, 0, 0.8);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4c000000, endColorstr=#4c000000);
        background: transparent \9;
        zoom: 1;
        color: white;
        font-weight: bold;
        padding: 12px;
        width: 33%; }
        #questionWrapper table.question td.answer *:nth-child(n) {
          filter: none; }
        #questionWrapper table.question td.answer .button {
          -webkit-transition: background-color ease 0.2s;
          -moz-transition: background-color ease 0.2s;
          -ms-transition: background-color ease 0.2s;
          -khtml-transition: background-color ease 0.2s;
          transition: background-color ease 0.2s;
          border: 4px solid #04978F;
          padding: 5px 0 5px 0;
          -webkit-border-radius: 25px;
          -moz-border-radius: 25px;
          -ms-border-radius: 25px;
          -khtml-border-radius: 25px;
          border-radius: 25px;
          width: 100%; }

#fuelWrapper {
  height: 100%;
  width: var(--balken-breite);
  margin-top: 15px;
  margin-left: 10px;
  float: left;
  position: relative;
  visibility: hidden; }
  #fuelWrapper #fuel {
    -webkit-transition: background-color ease 0.2s;
    -moz-transition: background-color ease 0.2s;
    -ms-transition: background-color ease 0.2s;
    -khtml-transition: background-color ease 0.2s;
    transition: background-color ease 0.2s;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -khtml-border-radius: 3px;
    border-radius: 3px;
    border: 2px solid white;
    width: calc(var(--balken-breite) / 2);
    padding-top: 10px;
    margin-left: 0px;
    bottom: 0px;
    position: absolute;
    background: #04978F; }

.clearer {
  clear: both; }

.floatRight {
  float: right; }

.center, #finishedWrapper, #highscoreWrapper {
  text-align: center; }

.middle {
  vertical-align: middle; }

.cursor {
  cursor: pointer; }

button {
  padding: 5px 30px;
  letter-spacing: 1px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -khtml-border-radius: 3px;
  border-radius: 3px;
  border: none;
  cursor: pointer;
  width: 100%;
  font-size: 20pt; }

#logo {
  width: 100px; }

#playWrapper #restartGame {
  position: absolute;
  font-size: 2.0rem;
  font-size: 200%;
  text-transform: uppercase;
  padding: 15px; }

#rocketWrapper {
  position: relative;
  float: left; }
  #rocketWrapper #rocket {
    display: none;
    background: yellow;
    position: absolute;
    width: 50px;
    height: auto;
    bottom: 0px; }
    #rocketWrapper #rocket #rocketNoGas, #rocketWrapper #rocket #rocketGas, #rocketWrapper #rocket #rocketExplosion {
      position: absolute;
      /* Ueber der 50px schmalen Figurenspalte zentrieren. Frueher stand hier
         pro Bild ein eigener margin-left, der zur jeweiligen festen Hoehe
         gerechnet war - mit mitwachsenden Bildern geht das nicht mehr auf. */
      left: 50%;
      transform: translateX(-50%); }
    #rocketWrapper #rocket #rocketExplosion {
      height: calc(var(--figur-hoehe) * 1.35); }
    #rocketWrapper #rocket img {
      height: var(--figur-hoehe);
      width: auto;
      position: relative; }

.dropShadow, #levelInfoWrapper {
  -webkit-filter: drop-shadow(12px 12px 7px rgba(0, 0, 0, 0.5));
  -moz-filter: drop-shadow(12px 12px 7px rgba(0, 0, 0, 0.5));
  -ms-filter: drop-shadow(12px 12px 7px rgba(0, 0, 0, 0.5));
  -khtml-filter: drop-shadow(12px 12px 7px rgba(0, 0, 0, 0.5));
  filter: drop-shadow(12px 12px 7px rgba(0, 0, 0, 0.5)); }

.settingsBtn, .shareBtn {
  font-size: 100% !important; }

/* Mitten in der Spielflaeche statt als Balken am unteren Rand: dort lag die
   Einblendung genau ueber dem Fragenblock und deckte die Antworten zu. Als
   Schild in der Mitte steht sie ausserdem dort, wo beim Countdown ohnehin
   hingeschaut wird. */
#levelInfoWrapper {
  position: absolute;
  box-sizing: border-box;
  font-size: clamp(28px, 9vmin, 76px);
  color: #E2037A;
  z-index: 100;
  font-weight: bold;
  padding: 0.25em 0.6em;
  text-align: center;
  left: 50%;
  /* Etwas ueber der Mitte: genau mittig stiesse die Einblendung auf
     4:3-Schirmen an die Oberkante des hochgerueckten Fragenblocks. */
  top: 38%;
  transform: translate(-50%, -50%);
  max-width: 90%;
  white-space: nowrap;
  -webkit-border-radius: 18px;
  border-radius: 18px;
  background-color: #000000;
  background-color: rgba(0, 0, 0, 0.5);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4c000000, endColorstr=#4c000000);
  background: transparent \9;
  zoom: 1; }
  #levelInfoWrapper *:nth-child(n) {
    filter: none; }
  /* Statt der Levelnummer das neue Stueck Wiese - Bild ueber Text, damit
     auch ein Leseanfaenger sofort sieht, was dazugekommen ist. */
  #levelInfoWrapper .szeneNeu {
    white-space: normal; }
    #levelInfoWrapper .szeneNeu img {
      display: block;
      height: 1.5em;
      width: auto;
      margin: 0 auto 0.15em auto; }
    #levelInfoWrapper .szeneNeu .szeneNeuText {
      font-size: 0.42em;
      line-height: 1.2;
      color: #ffffff; }

/* Handy quer: ueber dem Fragenblock bleiben keine 120px. Die Einblendung
   rueckt deshalb an den oberen Rand und legt Bild und Text nebeneinander -
   mittig wuerde sie genau die Antworten zudecken, die gerade gelesen
   werden sollen. */
@media (max-height: 520px) {
  #levelInfoWrapper {
    top: 6px;
    transform: translateX(-50%);
    font-size: clamp(20px, 6.5vmin, 34px); }
    #levelInfoWrapper .szeneNeu img {
      display: inline-block;
      height: 1.1em;
      vertical-align: middle;
      margin: 0 0.3em 0 0; }
    #levelInfoWrapper .szeneNeu .szeneNeuText {
      display: inline;
      font-size: 1em; } }

#highscoreWrapper {
  display: none;
  visibility: hidden;
  z-index: 10; }

/* --- Die mitwachsende Welt -----------------------------------------------
   Eine Ebene auf der Bodenlinie, in die nextLevel() pro geschaffter Stufe
   ein Bild haengt. Hoehe 0: die Teile haengen mit ihrer Unterkante am
   Boden und wachsen nach oben, egal wie gross sie sind. z-index 1 haelt
   die ganze Ebene hinter der Spielfigur (5) und dem Fragenblock (10) -
   die Staffelung innerhalb der Szene macht das z aus themes.js. */
#szenerie {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: var(--boden-sockel);
  z-index: 1;
  /* Der Regenbogen ist breiter als die Spielflaeche - so laeuft er an den
     Seiten sauber hinaus, statt Scrollbalken zu erzeugen. */
  overflow: hidden;
  pointer-events: none; }
  #szenerie .szeneTeil {
    position: absolute;
    bottom: 0;
    width: auto;
    /* left kommt aus themes.js und meint die Bildmitte. */
    transform: translateX(-50%);
    /* Bewusst ohne fill-mode: der Ruhezustand steht in der Regel oben, die
       Keyframes greifen nur waehrend des Ablaufs. Faellt die Animation aus
       (reduzierte Bewegung, Automatisierung), steht das Teil trotzdem
       fertig da, statt auf halber Groesse haengen zu bleiben. */
    animation: szeneAuftauchen 0.6s cubic-bezier(0.2, 1.3, 0.5, 1); }

/* Kurz aufpoppen, wenn ein Teil dazukommt - der Moment ist der Lohn fuer
   die geschaffte Stufe und soll auch auffallen, wenn gerade woanders
   hingeschaut wird. */
@keyframes szeneAuftauchen {
  from {
    transform: translateX(-50%) translateY(16px) scale(0.55);
    opacity: 0; }
  to {
    transform: translateX(-50%) translateY(0) scale(1);
    opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  #szenerie .szeneTeil {
    animation: none; } }

/* Figur und Tankanzeige gehoeren vor die Szene, aber hinter die
   Bedienelemente. Ohne eigenes z-index laege der Balken hinter dem
   Regenbogen, der ja ueber die ganze Breite reicht. */
#rocketWrapper, #fuelWrapper {
  z-index: 5; }

@media only screen and (max-device-height: 480px) and (orientation: portrait) {
  #juv_logo {
    height: 15px; } }
@media only screen and (max-device-width: 568px) {
  #juv_logo {
    height: 15px; } }
/*@media only screen
and (max-device-height : 700px)
{
  #startWrapper {
    //background:orange;
  }
  #juv_logo{
    height:25px;
  }
}
*/
@media only screen and (min-width: 1000px) {
  #highscoreWrapper {
    display: block;
    visibility: visible; }

  #startWrapper .content {
    width: 400px;
    padding-left: 50%;
    margin-left: -25%; }

  #header {
    height: 80px !important; }

  #logo {
    width: 230px; }

  #finishedWrapper {
    max-height: 80vh;
    max-height: 400px; } }

/*# sourceMappingURL=style.css.map */

/* --- Icons ---------------------------------------------------------------
   Ersetzen Font Awesome; die Symbole liegen als Sprite in index.html.       */
.icon {
  width: 1em;
  height: 1em;
  fill: currentColor;
  vertical-align: -0.125em; }

.icon-spin {
  -webkit-animation: icon-spin 2s linear infinite;
  animation: icon-spin 2s linear infinite; }

@-webkit-keyframes icon-spin {
  to {
    -webkit-transform: rotate(360deg); } }

@keyframes icon-spin {
  to {
    transform: rotate(360deg); } }

/* --- Tastatursteuerung ---------------------------------------------------
   Positionsziffer der Antwort. Nur dort einblenden, wo es auch eine
   Tastatur gibt — auf Touch waere sie nur Ballast.                          */
#questionWrapper table.question td.answer .button .pos {
  display: none; }

@media (hover: hover) and (pointer: fine) {
  /* In die Ecke der Zelle statt neben die Zahl: im Pill gelesen sah "1 10"
     wie eine zweistellige Zahl aus. */
  #questionWrapper table.question td.answer {
    position: relative; }
  #questionWrapper table.question td.answer .button .pos {
    display: block;
    position: absolute;
    top: 4px;
    left: 8px;
    font-size: 0.7rem;
    line-height: 1;
    font-weight: normal;
    opacity: 0.45; } }

/* --- Groessere Darstellung auf grossen Bildschirmen -----------------------
   Auf einem 12,9"-iPad standen Text und Antwortfelder in derselben Groesse
   wie auf einem Handy: 16px Grundschrift, Antwort-Buttons um die 40px hoch.
   Auf so einem Schirm ist das zum Lesen und zum Treffen mit dem Finger zu
   klein. Fast alle Groessen im Stylesheet haengen an rem bzw. Prozent,
   deshalb genuegt es, die Grundschrift anzuheben — nachgezogen werden nur
   die Stellen, die in pt oder in festen px stehen und sonst den groesseren
   Text abschneiden wuerden.

   Die Hoehe des Spielfelds rechnet questionCtrl.js aus Fensterhoehe minus
   Kopfzeile aus; eine hoehere Kopfzeile ist deshalb unkritisch.             */

@media only screen and (min-width: 768px) {
  html {
    font-size: 18px; }

  .button {
    height: auto;
    line-height: 2.1em; }

  /* Die Breite kommt jetzt aus der clamp()-Regel weiter oben; hier bleibt
     nur, was mit der groesseren Grundschrift zu tun hat. */
  #questionWrapper table.question {
    max-height: none; }
    #questionWrapper table.question td.question {
      height: auto;
      padding: 0.5em; }
}

@media only screen and (min-width: 1024px) {
  html {
    font-size: 21px; }

  /* Kopfzeile: die 80px aus dem 1000px-Block reichen fuer die groessere
     Schrift nicht mehr aus. */
  #wrapper #header {
    height: 96px !important; }
  #wrapper #header table tr.subline {
    font-size: 0.65rem; }
  #wrapper #header table tr.levelInfo {
    font-size: 0.8rem; }
  #wrapper #header #headline {
    font-size: 1.3rem; }

  h2 {
    font-size: 1.1rem; }

  /* pt-Werte skalieren nicht mit der Grundschrift — hier von Hand nach. */
  button {
    font-size: 1.2rem;
    padding: 0.4em 1.5em; }
  #retryWrapper #retryButton, #retryWrapper #newGameButton {
    font-size: 1.1rem; }
  #loader .icon {
    font-size: 1.6rem; }

  /* Feste Hoehen durch schriftabhaengige ersetzen, sonst wird der groessere
     Text oben und unten angeschnitten. */
  input[type='text'], input[type='number'], input[type='password'] {
    height: auto;
    padding: 0.6em;
    line-height: 1.4; }

  .button {
    line-height: 2.2em; }

  /* Antwortfelder: groessere Trefferflaeche ist auf Touch der eigentliche
     Punkt an der Sache. */
  #questionWrapper table.question td.answer {
      padding: 0.5em; }
      #questionWrapper table.question td.answer .button {
        padding: 0.35em 0; }

  /* Auswahlfelder haengen an festen 42px und blieben sonst als einzige
     Bedienelemente auf Handy-Groesse stehen. */
  #settingsWrapper table.layout1 select {
    height: 2.6em;
    padding-right: 2.6em; }

  .selectWrapper {
    height: 2.6em;
    line-height: 2.6em; }
  .selectWrapper select {
    line-height: 2.6em; }

  #finishedWrapper, #highscoreWrapper {
    width: 260px;
    max-height: 60vh; }

  #playWrapper #restartGame {
    font-size: 1.8rem; }
}

/* ==========================================================================
   Welt "Pferdewiese"
   Nur Hintergrund, Farben und Groessen — die Spiellogik kennt keine Welt.
   Ohne die Klasse am Body greift keine einzige dieser Regeln, der Weltraum
   sieht also unveraendert aus. Die Klasse setzt $scope.applyTheme(), weil
   ng-app an #wrapper haengt und das <body> ausserhalb von Angular liegt.
   ========================================================================== */
body.theme-meadow {
  background-image: linear-gradient(#a9dcfb 0%, #cfeaff 45%, #f6e5f2 100%);
  background-size: cover; }

/* Wolken und Wiese liegen als eigene Ebenen hinter dem Spiel, damit die
   Wolken ziehen koennen: eine Hintergrundposition zu animieren zwingt den
   Browser bei jedem Bild zum Neuzeichnen der ganzen Flaeche, ein
   verschobenes Element nicht. Beide mit z-index -1 und in dieser
   Reihenfolge - so deckt die Wiese die Wolken am Boden ab, genau wie
   vorher als oberste Hintergrundebene.
   Die Kachel ist 600px breit; das Element ragt um genau eine Kachel nach
   rechts hinaus und wandert um genau eine Kachel - dadurch ist der
   Rundlauf nahtlos und es klafft nie eine Luecke. */
body.theme-meadow::before,
body.theme-meadow::after {
  content: "";
  position: fixed;
  left: 0;
  z-index: -1;
  pointer-events: none; }

body.theme-meadow::before {
  top: 0;
  bottom: 0;
  width: calc(100% + 600px);
  background: url(../images/wolken.svg) repeat;
  background-size: 600px 400px;
  animation: wolkenzug 40s linear infinite; }

body.theme-meadow::after {
  right: 0;
  bottom: 0;
  height: 90px;
  background: url(../images/wiese.svg) repeat-x left bottom;
  background-size: auto 90px; }

/* Die Wolken ziehen nach hinten weg, weil das Pony nach rechts schaut -
   sie wandern also nach links und das Pony scheint vorwaerts zu fliegen. */
@keyframes wolkenzug {
  from { transform: translateX(0); }
  to { transform: translateX(-600px); } }

/* Wer Bewegung im System abgestellt hat, bekommt einen ruhigen Himmel. */
@media (prefers-reduced-motion: reduce) {
  body.theme-meadow::before {
    animation: none; } }

/* Der Grauschleier ueber dem Sternenfeld nimmt dem hellen Himmel die Farbe. */
body.theme-meadow #wrapper {
  background-color: transparent; }

/* Zauberkraft statt Treibstoff: gruen wird Flieder, die Warnstufen bleiben,
   weil sie ihre Bedeutung aus der Farbe ziehen. Die Klassen setzt
   fuelColor(), das !important stammt aus den Farbklassen ganz oben. */
body.theme-meadow #fuelWrapper #fuel,
body.theme-meadow #fuelWrapper #fuel.bgGreen {
  background: #bb8bec !important; }

/* Fragenblock in hellen Toenen mit dunkler Schrift. */
body.theme-meadow #questionWrapper table.question td {
  background-color: #e26fa4;
  background-color: rgba(226, 111, 164, 0.92);
  color: #ffffff; }
body.theme-meadow #questionWrapper table.question td.answer {
  background-color: #ffffff;
  background-color: rgba(255, 255, 255, 0.88);
  color: #4a3a52; }
body.theme-meadow #questionWrapper table.question td.answer .button {
  border-color: #bb8bec; }

/* Die dunklen Kaesten wuerden als schwarze Loecher im hellen Himmel stehen. */
body.theme-meadow #startWrapper,
body.theme-meadow #shareWrapper,
body.theme-meadow #settingsWrapper,
body.theme-meadow #highscoreWrapper,
body.theme-meadow #finishedWrapper {
  background-color: #ffffff;
  background-color: rgba(255, 255, 255, 0.88);
  color: #4a3a52; }
/* table.layout1 td faerbt die Schrift hart weiss. Auf den dunklen Kaesten des
   Weltraums stimmt das, auf den hellen der Pferdewiese waere es weiss auf
   weiss - und die Vererbung der Regel oben kommt dagegen nicht an, weil die
   Zelle ihre Farbe selbst gesetzt bekommt. */
body.theme-meadow #settingsWrapper table.layout1 td,
body.theme-meadow #highscoreWrapper table.layout1 td,
body.theme-meadow #finishedWrapper table.layout1 td,
body.theme-meadow #startWrapper table.layout1 td {
  color: #4a3a52; }

body.theme-meadow #uebungWrapper li {
  border-bottom: 1px solid rgba(125, 95, 150, 0.25); }

/* Das Pony ist breiter als die Rakete und braucht deshalb etwas weniger
   Hoehe. Zentriert wird es wie jede Figur ueber transform, die frueheren
   margin-left-Werte sind entfallen. Der Sockel setzt es ins Gras: das
   Bodenband ist zwar 90px hoch, die Grasnarbe in wiese.svg liegt aber
   nur 32 bis 60px ueber der Unterkante. 46px ist ihre mittlere Hoehe -
   Pony und Szenerie stehen damit im Gras statt darueber zu schweben. */
body.theme-meadow {
  --figur-hoehe: clamp(64px, 10.5vh + 3.5vw, 165px);
  --boden-sockel: 46px;
  /* Der Fragenblock rueckt ueber die Szenerie, sonst deckt er genau das zu,
     was das Kind sich gerade verdient hat. Gedeckelt auf 16vh: auf einem
     quer gehaltenen Handy bleibt sonst kein Himmel zum Fliegen uebrig -
     dann gewinnt das Spiel und die untersten Teile stehen eben dahinter. */
  --frage-abstand: min(calc(var(--boden-sockel) + var(--szene-hoehe) * 0.8 + 8px), 16vh);
  /* Der Regenbogen ist mit h 3.5 das hoechste Teil der Wiese (themes.js).
     Genau so viel bleibt unter der Zusammenfassung frei, damit sein Bogen
     neben dem Kasten stehen bleibt statt dahinter zu verschwinden. */
  --bilanz-freiraum: calc(var(--boden-sockel) + var(--szene-hoehe) * 3.5 + 12px); }
body.theme-meadow #rocketWrapper #rocket #explosionImg img {
  height: calc(var(--figur-hoehe) * 1.15); }

/* Die Kopfleiste laeuft ueber die volle Fensterbreite, die Spielflaeche
   bleibt bei ihren 800px. 50% - 50vw ist genau der Weg vom linken Rand des
   zentrierten #wrapper zum linken Rand des Fensters; body hat overflow
   hidden, es entsteht also kein Querbalken. Gilt fuer beide Welten. */
#wrapper #header {
  width: 100vw;
  margin-left: calc(50% - 50vw); }

/* Zum Schluss, damit es die Weltendefinitionen weiter oben ueberschreibt:
   auf einem quer gehaltenen Handy bleibt der Fragenblock unten stehen.
   Fliegen geht vor Aussicht - die Szenerie liegt dann eben dahinter. */
@media (max-height: 520px) {
  body.theme-meadow {
    --frage-abstand: 10px; } }

/* Zusammenfassung nach dem Spiel: sie beginnt ganz oben und darf nach unten
   wachsen, denn mittig war der Kasten auf dem Handy nicht mehr zu lesen.
   Der Streifen am unteren Rand bleibt frei - die Wiese mit dem, was sich das
   Kind erspielt hat, soll dahinter sichtbar bleiben. left setzt app.js
   (centerX), top und Hoehe kommen von hier; darum steht die Regel am Ende,
   damit sie die max-height-Werte der Bildschirmbloecke weiter oben schlaegt. */
#finishedWrapper {
  top: 8px;
  /* Wie viel unten frei bleibt, weiss die Welt selbst - siehe
     --bilanz-freiraum. max() haelt den Kasten auf flachen Schirmen trotzdem
     lesbar gross; scrollen kann er ohnehin. */
  max-height: max(50%, calc(100% - var(--bilanz-freiraum) - 16px)); }

/* Handy im Hochformat: der Fragenblock nimmt hoechstens die halbe Breite ein
   und rueckt weiter hinauf, sonst deckt er die halbe Wiese zu. */
@media (orientation: portrait) and (max-width: 480px) {
  #questionWrapper {
    width: 50%; }
  body.theme-meadow {
    --frage-abstand: min(calc(var(--boden-sockel) + var(--szene-hoehe) * 1.4 + 10px), 26vh); } }

/* Die beiden Knoepfe bleiben am unteren Rand des Kastens kleben, waehrend die
   Zusammenfassung darueber scrollt. Auf einem kleinen Handy reicht die Hoehe
   sonst nicht bis zu ihnen und das Kind sieht keinen Weg weiter. Der eigene
   Hintergrund ist noetig, weil sonst der Text darunter durchlaeuft - und er
   muss exakt der Farbe des Kastens entsprechen, sonst steht dort ein Balken.
   Darum ist der Kasten hier deckend statt durchscheinend: auf dem unruhigen
   Weltraumfoto liest er sich ohnehin besser. bottom: -10px hebt das
   Innenpolster auf, damit die Leiste buendig unten sitzt. */
#finishedWrapper,
#finishedWrapper #retryWrapper {
  background-color: #1c1f2b; }

body.theme-meadow #finishedWrapper,
body.theme-meadow #finishedWrapper #retryWrapper {
  background-color: #ffffff; }

#finishedWrapper #retryWrapper {
  position: sticky;
  bottom: -10px;
  z-index: 2;
  padding: 8px 0 10px 0;
  margin-bottom: -10px; }

/* Breiter als die uebrigen Kaesten: die Zusammenfassung ist der einzige
   Bildschirm, auf dem laengerer Text steht, und in die Breite gewonnener
   Platz spart Hoehe - je weniger gescrollt werden muss, desto eher liest ein
   Kind ueberhaupt, was es sich erspielt hat. border-box, weil die 10px
   Innenpolster sonst zur Prozentbreite dazukaemen. */
#finishedWrapper {
  box-sizing: border-box;
  width: min(92%, 640px); }

/* Der breitere Kasten wird jetzt auch in die Breite genutzt, damit die
   Zusammenfassung ohne Scrollen auf den Schirm passt: die Aufgabenliste
   laeuft zweispaltig ... */
#finishedWrapper #uebungWrapper ul {
  /* Spaltenbreite statt fester Spaltenzahl: am Handy werden es zwei, auf dem
     breiten Kasten am Rechner drei. Mehr als drei wuerden die Aufgaben zu
     weit auseinanderziehen. */
  -webkit-columns: 130px 3;
  -moz-columns: 130px 3;
  columns: 130px 3;
  -webkit-column-gap: 16px;
  -moz-column-gap: 16px;
  column-gap: 16px; }
  #finishedWrapper #uebungWrapper li {
    -webkit-column-break-inside: avoid;
    break-inside: avoid; }

/* ... und die erspielten Teile stehen in einer Zeile statt in zweien. Der
   Bach ist viermal so breit wie hoch und wuerde die Zeile sonst allein
   sprengen - max-width bremst ihn, die Hoehe kommt ueber max-height, damit
   die Bilder dabei nicht verzerren. */
#szenerieBilanz .szenerieListe img {
  height: auto;
  max-height: clamp(26px, 7vw, 52px);
  max-width: 22%; }

/* Kleiner Schirm: hier geht Lesbarkeit vor Aussicht. Statt der vollen
   Regenbogenhoehe bleiben nur noch 2.6 Szenenhoehen frei - der Kasten wird
   dadurch hoch genug, dass die Zusammenfassung ohne Scrollen bis zu den
   Knoepfen reicht. Vom Bogen verschwindet dafuer der oberste Rand hinter dem
   Kasten. Auf den ueblichen Handys (ab etwa 780px Hoehe) greift das nicht. */
@media (max-height: 700px) {
  body.theme-meadow {
    --bilanz-freiraum: calc(var(--boden-sockel) + var(--szene-hoehe) * 2.6 + 12px); } }