/* Madlou – Grundgestaltung.
   Zielgerät: iPad Air 2, iPadOS 15.8.6, Safari 15.6, 1024x768 CSS-Punkte, Querformat.
   Keine Container Queries, kein CSS-Nesting – beides gibt es auf diesem Safari nicht.

   Leitgedanke: Die Oberfläche ist aus demselben Material gebaut wie die Welt.
   Papier, Holz, Himmel – dieselben Farben, aus denen die Gebäude gezeichnet sind.
   Weiße Balken und graue Pillen gehören einer Verwaltungssoftware, nicht einem
   Bilderbuch, in dem ein Kind wohnt. */

:root {
  /* Material – aus der Palette der Gebäudegrafik abgeleitet */
  --papier: #f7f0e2;
  --papier-hell: #fffaf0;
  --papier-tief: #ece0c9;
  --tinte: #3a3226;
  --tinte-mild: #7a6a55;
  --rand: #dccfb6;
  --holz: #8a6242;
  --holz-dunkel: #6d4c33;
  --himmel: #d8e8ef;

  /* Ressourcen tragen eigene, wiedererkennbare Farben */
  --muenze: #d9a441;
  --muenze-dunkel: #a97a23;
  --material: #8a6242;
  --material-dunkel: #6d4c33;

  /* Welt-Akzent – wird pro Thema überschrieben */
  --welt: #6b8f3f;
  --welt-dunkel: #4f6d2c;
  --welt-hell: #e4edd6;

  --farbe-fehler: #ad523c;

  /* Erhebung genau einmal deklarieren: Schatten, kein zusätzlicher Rahmen */
  --schatten-nah: 0 1px 2px rgba(58, 50, 38, 0.10), 0 3px 8px rgba(58, 50, 38, 0.09);
  --schatten-fern: 0 2px 4px rgba(58, 50, 38, 0.10), 0 14px 34px rgba(58, 50, 38, 0.16);

  --schrift: -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --radius: 14px;
  --radius-klein: 10px;

  /* Rückwärtskompatible Namen, damit ältere Regeln weiterlaufen */
  --farbe-hintergrund: var(--papier);
  --farbe-flaeche: var(--papier-hell);
  --farbe-text: var(--tinte);
  --farbe-text-mild: var(--tinte-mild);
  --farbe-primaer: var(--welt);
  --farbe-primaer-dunkel: var(--welt-dunkel);
  --farbe-akzent: #d2933a;
  --farbe-rand: var(--rand);
}

/* Maditas Stadt trägt das Schieferblau der Bahnhofs- und Feuerwehrdächer. */
body.thema-stadt {
  --welt: #4f7a8c;
  --welt-dunkel: #37596a;
  --welt-hell: #dce9ee;
}

/* Malous Hof trägt das Moosgrün der Stall- und Scheunendächer. */
body.thema-bauernhof {
  --welt: #6b8f3f;
  --welt-dunkel: #4f6d2c;
  --welt-hell: #e4edd6;
}

* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  margin: 0;
  font-family: var(--schrift);
  background: var(--papier);
  color: var(--tinte);
  -webkit-text-size-adjust: 100%;
  touch-action: manipulation;
}

/* Auch die Flächen, die der Browser malt, gehören zur Gestaltung. */
::-webkit-selection { background: var(--welt); color: #fff; }
::selection { background: var(--welt); color: #fff; }

:focus-visible {
  outline: 3px solid var(--welt);
  outline-offset: 2px;
}

h1 {
  margin: 0 0 8px;
  font-size: 2.4rem;
  color: var(--welt-dunkel);
  text-align: center;
}

p {
  margin: 0 0 12px;
}

button {
  font-family: inherit;
  font-size: 1.1rem;
  min-width: 48px;
  min-height: 48px;
  padding: 10px 18px;
  border: none;
  border-radius: var(--radius);
  background: var(--papier-hell);
  color: var(--tinte);
  box-shadow: var(--schatten-nah);
  touch-action: manipulation;
  cursor: pointer;
  -webkit-transition: -webkit-transform 120ms ease-out;
  transition: transform 120ms ease-out;
}

button:active {
  -webkit-transform: translateY(1px) scale(0.985);
  transform: translateY(1px) scale(0.985);
}

button.gross {
  background: var(--welt);
  color: #fff;
  font-weight: bold;
  font-size: 1.3rem;
  padding: 14px 24px;
}

input[type="text"],
input[type="password"] {
  font-family: inherit;
  font-size: 1.3rem;
  min-height: 48px;
  padding: 8px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--rand);
  background: var(--papier-hell);
  color: var(--tinte);
  width: 100%;
}

label {
  display: block;
  font-size: 1.1rem;
  margin: 10px 0 6px;
  color: var(--tinte-mild);
}

.hinweis {
  min-height: 1.4em;
  color: var(--farbe-fehler);
  text-align: center;
  font-weight: bold;
}

.bildschirm {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.bildschirm[hidden] {
  display: none;
}

/* ---------- Anmelden ---------- */

#bildschirm-anmelden {
  background: -webkit-linear-gradient(top, var(--himmel), var(--papier) 62%);
  background: linear-gradient(to bottom, var(--himmel), var(--papier) 62%);
}

.anmelden-marke {
  margin: 0 0 4px;
  text-align: center;
}

.anmelden-marke svg {
  display: block;
  width: 260px;
  height: auto;
  margin: 0 auto;
}

.anmelden-unterzeile {
  margin: 0 0 28px;
  text-align: center;
  color: var(--tinte-mild);
  font-size: 1.05rem;
}

#bildschirm-anmelden form {
  width: 100%;
  max-width: 480px;
}

/* Wer bist du? – große Knöpfe statt eines Textfelds, damit die
   iPad-Tastatur auch hier nicht aufgeht. */
.namenswahl {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin-bottom: 20px;
}

.namensknopf {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 132px;
  padding: 16px 20px 14px;
  font-size: 1.25rem;
  font-weight: bold;
  background: var(--papier-hell);
}

.namensknopf .avatar {
  width: 56px;
  height: 56px;
}

.namensknopf[aria-pressed="true"] {
  background: var(--welt);
  color: #fff;
  box-shadow: var(--schatten-fern);
}

.namensknopf[aria-pressed="true"] .avatar circle {
  fill: rgba(255, 255, 255, 0.22);
}

.namensknopf[aria-pressed="true"] .avatar path,
.namensknopf[aria-pressed="true"] .avatar rect {
  fill: #fff;
}

.namenszeile {
  margin-bottom: 18px;
}

.namenswechsel {
  display: block;
  margin: 0 auto 18px;
  font-size: 1rem;
  color: var(--tinte-mild);
  background: transparent;
  box-shadow: none;
  text-decoration: underline;
  text-underline-offset: 4px;
  min-height: 44px;
  padding: 8px 12px;
}

#pin {
  letter-spacing: 0.5em;
  text-align: center;
  caret-color: transparent;
}

/* Vier Kästchen statt eines Textfelds: das Kind sieht, wie viele Zahlen fehlen. */
.pin-punkte {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin: 4px 0 18px;
}

.pin-punkt {
  width: 44px;
  height: 52px;
  border-radius: var(--radius-klein);
  background: var(--papier-tief);
  box-shadow: inset 0 2px 4px rgba(58, 50, 38, 0.12);
}

.pin-punkt.gefuellt {
  background: var(--welt);
  box-shadow: var(--schatten-nah);
}

.ziffernfeld {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 14px 0;
}

.ziffernfeld button {
  font-size: 1.5rem;
  font-weight: 600;
  min-height: 58px;
  font-variant-numeric: tabular-nums;
}

/* ---------- Welt ---------- */

#bildschirm-welt {
  padding: 0;
  justify-content: flex-start;
}

.kopfzeile {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 18px;
  background: -webkit-linear-gradient(top, var(--himmel), var(--papier));
  background: linear-gradient(to bottom, var(--himmel), var(--papier));
  box-shadow: 0 2px 8px rgba(58, 50, 38, 0.10);
  position: relative;
  z-index: 10;
}

.welt-name {
  font-size: 1.05rem;
  font-weight: bold;
  color: var(--welt-dunkel);
  margin-right: 4px;
  white-space: nowrap;
}

.ressource {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 1.35rem;
  font-weight: bold;
  font-variant-numeric: tabular-nums;
  padding: 5px 14px 5px 8px;
  border-radius: 999px;
  background: var(--papier-hell);
  box-shadow: var(--schatten-nah);
  color: var(--tinte);
}

.ressource svg {
  width: 26px;
  height: 26px;
  flex: none;
}

.kopfzeile .gross {
  margin-left: auto;
  box-shadow: var(--schatten-fern);
}

#karte {
  flex: 1;
  width: 100%;
  display: block;
  background: var(--welt-hell);
  touch-action: none;
}

/* Sagt, was gerade passiert, wenn ein Bau- oder Abrissmodus läuft. Ohne das
   wusste man nach dem Antippen eines Gebäudes nicht, dass man jetzt auf die
   Karte tippen soll - und schon gar nicht, welches Gebäude gewählt ist. */
.bau-hinweis {
  position: absolute;
  left: 50%;
  bottom: 84px;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  margin: 0;
  padding: 10px 20px;
  border-radius: 999px;
  background: var(--welt);
  color: #fff;
  font-size: 1.05rem;
  font-weight: bold;
  white-space: nowrap;
  box-shadow: var(--schatten-fern);
  z-index: 15;
  pointer-events: none;
}

.bau-hinweis[hidden] {
  display: none;
}

/* Die Fußleiste ist ein Holzbrett, kein weißer Balken. */
.leiste {
  width: 100%;
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  background: -webkit-linear-gradient(top, var(--holz), var(--holz-dunkel));
  background: linear-gradient(to bottom, var(--holz), var(--holz-dunkel));
  box-shadow: 0 -2px 10px rgba(58, 50, 38, 0.22);
  /* Muss über dem vollflächigen #baumenue-Overlay liegen, damit "Bauen"/"Abreißen"
     immer erreichbar bleiben, auch als Weg zurück aus dem Katalog. */
  position: relative;
  z-index: 30;
}

.leiste button {
  background: var(--papier);
}

.leiste .zoom {
  min-width: 56px;
  font-size: 1.4rem;
  font-weight: bold;
  padding: 10px 14px;
}

/* ---------- Lernrunde ---------- */

#bildschirm-lernen {
  position: relative;
  background: -webkit-linear-gradient(top, var(--welt-hell), var(--papier) 70%);
  background: linear-gradient(to bottom, var(--welt-hell), var(--papier) 70%);
  justify-content: center;
  padding: 24px;
}

/* Bewusst klein und in der Ecke, nicht neben dem Ziffernfeld – ein Kind soll
   ihn finden, wenn sie ihn sucht, aber nicht aus Versehen beim Tippen treffen. */
#knopf-lernen-verlassen {
  position: absolute;
  top: 16px;
  left: 16px;
  font-size: 1rem;
  padding: 8px 14px;
  z-index: 5;
}

/* Der Auftrag steht oben: das Kind soll jederzeit sehen, wofür sie rechnet. */
#lern-auftrag {
  margin: 0 0 4px;
  padding: 0 96px;
  text-align: center;
  font-size: 1.3rem;
  line-height: 1.35;
  color: var(--welt-dunkel);
  font-weight: bold;
}

.lern-karte {
  width: min(560px, 92vw);
  margin: 18px auto 0;
  padding: 22px 28px 26px;
  background: var(--papier-hell);
  border-radius: 20px;
  box-shadow: var(--schatten-fern);
}

/* Zehn Punkte statt einer Zahl: Rhythmus ohne Bewertung. */
#lern-fortschritt {
  display: flex;
  gap: 7px;
  justify-content: center;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}

.fortschritt-punkt {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--papier-tief);
}

.fortschritt-punkt.erledigt {
  background: var(--welt);
}

.fortschritt-punkt.jetzt {
  background: var(--welt-dunkel);
  -webkit-transform: scale(1.5);
  transform: scale(1.5);
}

/* Die Aufgabe ist das Wichtigste auf dem Bildschirm und sieht auch so aus. */
.frage {
  margin: 0 0 18px;
  font-size: 3.4rem;
  line-height: 1.1;
  font-weight: bold;
  letter-spacing: -0.02em;
  text-align: center;
  color: var(--tinte);
  font-variant-numeric: tabular-nums;
}

/* Textaufgaben werden schnell lang – dann kleiner, aber nie klein. */
.frage.lang {
  font-size: 1.9rem;
  line-height: 1.25;
  letter-spacing: 0;
}

#lern-antwort {
  width: 100%;
}

/* Die Rückmeldung nach einer Antwort ist nie rot – auch nicht bei einer
   falschen. .hinweis (für Anmeldefehler) wäre hier von Haus aus rot, die
   ID-Regel überschreibt das gezielt für die Lernrunde. */
#lern-rueckmeldung {
  margin: 14px 0 0;
  min-height: 1.6em;
  font-size: 1.2rem;
  color: var(--welt-dunkel);
}

/* Die Antwort liegt in einer Mulde im Papier, nicht in einem leeren Kasten. */
.eingabe-anzeige {
  display: block;
  min-height: 66px;
  margin: 0 auto 16px;
  padding: 10px 20px;
  font-size: 2.4rem;
  font-weight: bold;
  letter-spacing: 0.1em;
  text-align: center;
  background: var(--papier-tief);
  border-radius: var(--radius);
  box-shadow: inset 0 2px 5px rgba(58, 50, 38, 0.14);
  color: var(--tinte);
  font-variant-numeric: tabular-nums;
}

/* In der Lernrunde ist das Ziffernfeld Werkzeug, nicht Hauptsache: ruhiger
   als die Aufgabe darüber. */
.lern-karte .ziffernfeld button {
  font-size: 1.3rem;
  min-height: 52px;
  background: var(--papier);
}

/* Ausgenommen "ok": die Regel darüber ist spezifischer als .taste-ok und würde
   die Bestätigungstaste sonst weiß auf Creme setzen - unlesbar. */
.lern-karte .ziffernfeld button.taste-ok {
  background: var(--welt);
  color: #fff;
}

.taste-ok {
  background: var(--welt);
  color: #fff;
  font-weight: bold;
}

.auswahlfeld {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin: 14px 0;
}

.taste-auswahl {
  font-size: 1.7rem;
  min-height: 76px;
  font-variant-numeric: tabular-nums;
}

/* ---------- Dialoge ---------- */

dialog {
  border: none;
  border-radius: 20px;
  padding: 26px;
  max-width: 440px;
  width: min(90vw, 440px);
  background: var(--papier-hell);
  color: var(--tinte);
  box-shadow: var(--schatten-fern);
}

dialog::backdrop {
  background: rgba(58, 50, 38, 0.42);
}

dialog p {
  font-size: 1.25rem;
  text-align: center;
}

dialog button {
  width: 100%;
  margin-top: 10px;
}

/* ---------- Bau- und Abrissmodus ---------- */

body.modus-bauen #knopf-bauen,
body.modus-abreissen #knopf-abreissen {
  background: var(--welt);
  color: #fff;
  box-shadow: var(--schatten-fern);
}

body.modus-bauen #karte,
body.modus-abreissen #karte {
  cursor: crosshair;
}

/* Während der Katalog offen ist, darf kein Tipp mehr auf der Karte ankommen –
   auch nicht durch einen Überlappungs-Zufall im Stapel. Die vollflächige
   Abdeckung von #baumenue erledigt das schon selbst, pointer-events ist die
   zweite, unabhängige Absicherung dafür. */
body.katalog-offen #karte {
  pointer-events: none;
}

/* ---------- Baumenü ---------- */

#baumenue {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  overflow-y: auto;
  background: -webkit-linear-gradient(top, var(--welt-hell), var(--papier) 40%);
  background: linear-gradient(to bottom, var(--welt-hell), var(--papier) 40%);
  padding: 14px 18px 24px;
  z-index: 20;
}

.baumenue-kopf {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 10px;
}

.baumenue-kopf h1 {
  margin: 0;
  font-size: 1.5rem;
  text-align: left;
}

.baumenue-kopf .ressource {
  font-size: 1.15rem;
}

#baumenue h2 {
  margin: 18px 0 8px;
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tinte-mild);
}

/* Ein Regal, kein Kartenraster: das Gebäude ist das Größte im Eintrag,
   weil ein Kind nach dem Bild aussucht und nicht nach der Überschrift. */
.katalog-reihe {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
  padding: 0 0 10px;
  border-bottom: 1px solid var(--rand);
}

.katalog-eintrag {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  width: 128px;
  padding: 10px 8px 12px;
  text-align: center;
  background: transparent;
  box-shadow: none;
}

.katalog-eintrag:active {
  background: var(--papier-hell);
  box-shadow: var(--schatten-nah);
}

.katalog-eintrag img {
  width: auto;
  max-width: 108px;
  max-height: 84px;
  object-fit: contain;
  -webkit-filter: drop-shadow(0 3px 4px rgba(58, 50, 38, 0.20));
  filter: drop-shadow(0 3px 4px rgba(58, 50, 38, 0.20));
}

.katalog-eintrag span {
  font-weight: bold;
  font-size: 0.98rem;
  line-height: 1.2;
}

.katalog-preis {
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
  font-size: 0.9rem;
  font-weight: bold;
  color: var(--tinte-mild);
  font-variant-numeric: tabular-nums;
}

.katalog-preis span {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.9rem;
  font-weight: bold;
}

.katalog-preis svg {
  width: 17px;
  height: 17px;
}

.katalog-eintrag:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}

.katalog-eintrag:disabled img {
  -webkit-filter: grayscale(0.6);
  filter: grayscale(0.6);
}