/* Papier, Wachsmalfarben, große Fibelschrift: wie die Lesemappe. Die Schrift steht unter der SIL Open Font License. */
@font-face { font-family: "Lesemappe Fibel"; src: url("../fonts/fibel-regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Lesemappe Fibel"; src: url("../fonts/fibel-bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }

[hidden] { display: none !important; }

:root {
  --papier: #fffdf8;
  --karte: #ffffff;
  --tinte: #222226;
  --tinte2: #5a5752;
  --linie: #e7e1d6;
  --rot: #d6302a;
  --orange: #ee8826;
  --gelb: #f0d200;
  --gruen: #3a983c;
  --blau: #268ad0;
  --lila: #8876c6;
  --rosa: #e880a8;
  --radius: 22px;
  --schatten: 0 3px 0 rgba(34, 34, 38, .08), 0 10px 28px rgba(34, 34, 38, .06);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }
body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font: 400 1.125rem/1.5 "Lesemappe Fibel", "Comic Sans MS", system-ui, sans-serif;
  font-variant-ligatures: none;
  font-feature-settings: "cv39" 1;
  -webkit-tap-highlight-color: transparent;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: #1a6fae; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; touch-action: manipulation; }
:focus-visible { outline: 4px solid var(--gelb); outline-offset: 3px; border-radius: 10px; }
h1:focus { outline: none; }
h1 { font-size: 1.7rem; line-height: 1.25; margin: 12px 0; }
h2 { font-size: 1.2rem; margin: 26px 0 10px; color: var(--tinte2); }

.seite { max-width: 820px; margin: 0 auto; padding: 16px 16px 60px; min-height: 80vh; }
.marke { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; margin: 2px 0 16px; }
.marke img { width: auto; height: 52px; }
/* Der Stift ragt oben aus dem Ranzen: Der Schriftzug richtet sich nach der Mitte des Ranzens, nicht nach der des Bildes */
.marke img.schriftzug { height: auto; width: min(230px, 56vw); position: relative; top: 7px; }
.mitte { text-align: center; }
.leise { color: var(--tinte2); font-size: 1rem; }
.achtung { color: #8a4b00; font-size: 1rem; }

.kopfzeile { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 44px; margin-bottom: 20px; }
.zurueck {
  display: inline-flex; align-items: center; padding: 6px 16px; text-decoration: none; font-weight: 700; color: var(--tinte2);
  background: var(--karte); border: 2px solid var(--linie); border-radius: 999px;
}

/* Gezeichnet statt Schriftzeichen: Das „‹“ sitzt in der Fibelschrift zu tief */
.zurueck::before { content: ""; width: 9px; height: 9px; margin: 0 9px 0 3px; border-left: 3px solid currentColor; border-bottom: 3px solid currentColor; transform: rotate(45deg); }

.karte { background: var(--karte); border-radius: var(--radius); box-shadow: var(--schatten); padding: 18px; margin: 16px 0; }
.hinweis { text-align: center; padding: 40px 0; }

.knopf {
  display: inline-block; border: 0; border-radius: 999px; padding: 10px 24px; min-height: 48px; font-weight: 700; text-decoration: none; text-align: center;
  color: var(--tinte); background: var(--gelb); box-shadow: 0 3px 0 #c9ae00;
}
.knopf:active { transform: translateY(2px); box-shadow: 0 1px 0 #c9ae00; }
.knopf:disabled { opacity: .45; cursor: default; }
.knopf.gross { font-size: 1.3rem; padding: 12px 34px; margin-top: 10px; }
.knopf.zart { background: var(--karte); border: 2px solid var(--linie); box-shadow: none; }
.knoepfe { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; align-items: center; }
.mitte .knoepfe { justify-content: center; }
.rund { flex: none; width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--linie); background: var(--karte); font-size: 1.2rem; }

.willkommen { text-align: center; padding-top: 16px; }
.willkommen img.gross { width: 180px; margin: 0 auto; }
.willkommen p { max-width: 34em; margin: 12px auto; }

.begruessung { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
.begruessung img { width: 72px; }
.begruessung h1 { margin: 0; }

.kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; margin: 16px 0; }
.kacheln.kinder { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(16px, 4vw, 48px); margin: clamp(32px, 5vh, 56px) 0 clamp(24px, 3.5vh, 40px); }
.kacheln.kinder .kachel { padding: clamp(18px, 2.6vh, 30px) 12px clamp(16px, 2.2vh, 24px); gap: 8px; }
.kacheln.kinder .kachel img { width: clamp(84px, min(11vw, 13vh), 140px); height: clamp(84px, min(11vw, 13vh), 140px); }
.kacheln.kinder .kachel strong { font-size: clamp(1.15rem, 2vw, 1.5rem); }
.buehne .einleitung { margin: 36px auto 30px; }
.buehne .knopf.gross { margin-top: 0; }
.buehne p.mitte { margin: 0 0 clamp(28px, 4vh, 48px); }
.buehne .einleitung + p.mitte { margin-bottom: 22px; }
.kacheln.kinder .kachel { width: clamp(140px, 40vw, 250px); transition: transform .15s; }
.kacheln.kinder .kachel:nth-child(odd) { transform: rotate(-2deg); }
.kacheln.kinder .kachel:nth-child(even) { transform: rotate(2deg); }
.kacheln.kinder .kachel:hover, .kacheln.kinder .kachel:focus-visible { transform: rotate(0) scale(1.05); }

/* Startseite als Szene */
body:has(.buehne) .marke img:first-child { display: none; } /* der Ranzen steht groß auf der Seite */
/* Die Wiese reicht über den Rand. Beides ist nötig: html geht ans Fenster, erst dann schneidet der body selbst ab */
html:has(.buehne) { overflow-x: hidden; scrollbar-gutter: auto; }
body:has(.buehne) { overflow-x: clip; }
/* Die Szene nutzt den ganzen Bildschirm: Abstände wachsen mit der Fensterhöhe, die Wiese steht immer unten */
.seite:has(.buehne) { max-width: 1120px; min-height: 0; padding-bottom: 0; }
.buehne { position: relative; display: flex; flex-direction: column; min-height: calc(100dvh - 170px); padding-top: 6px; }
.sonne { position: absolute; top: -70px; right: -6px; width: clamp(104px, 13vw, 170px); animation: drehen 40s linear infinite; }
.wolke { position: absolute; top: 15vh; left: -40px; width: clamp(120px, 12vw, 170px); opacity: .85; }
.gastgeber { position: relative; display: flex; align-items: center; justify-content: center; gap: 20px; margin: clamp(24px, 4vh, 48px) auto 0; max-width: 760px; }
.ranzen-gross { width: clamp(118px, min(22vw, 21vh), 220px); flex: none; animation: wackeln 3.5s ease-in-out infinite; transform-origin: 50% 100%; }
.sprechblase { position: relative; background: var(--karte); border-radius: 26px; box-shadow: var(--schatten); padding: clamp(18px, 2.4vw, 30px) clamp(24px, 3vw, 40px); }
.sprechblase h1 { position: relative; margin: 0; font-size: clamp(1.4rem, 3.4vw, 2.3rem); line-height: 1.3; text-wrap: balance; }
.sprechblase::before { content: ""; position: absolute; left: -9px; top: calc(50% - 11px); width: 22px; height: 22px; background: var(--karte); border-radius: 4px; transform: rotate(45deg); }
/* Als Muster, nicht gestreckt: 1000 Pixel Bild auf 620 Pixel Breite bleiben auch auf hochauflösenden Bildschirmen scharf */
.wiese { position: relative; width: calc(100vw + 40px); height: 124px; margin: auto 0 0 calc(50% - 50vw - 20px); background: url("../img/deko-wiese.webp") repeat-x center bottom / 620px auto; }
.tier { position: absolute; bottom: 58px; height: 62px; width: auto; }
/* Die Tiere stehen in den Lücken zwischen den Blumen, beides ist an der Mitte ausgerichtet */
.tier-igel { left: calc(50% - 234px); }
.tier-hase { left: calc(50% - 79px); height: 78px; }
.tier-ente { left: calc(50% + 28px); }
.tier-schnecke { left: calc(50% + 155px); height: 46px; }
@media (max-width: 700px) { .wolke { display: none; } }
@media (max-width: 520px) { .tier-igel, .tier-schnecke { display: none; } }
@keyframes wackeln { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@keyframes drehen { to { transform: rotate(360deg); } }
.kachel {
  display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; padding: 14px 10px; text-decoration: none; color: inherit;
  background: var(--karte); border-radius: var(--radius); box-shadow: var(--schatten); border-bottom: 6px solid var(--linie);
}
.kachel img { width: 84px; height: 84px; object-fit: contain; }
.kachel span { color: var(--tinte2); font-size: .95rem; }
.farbe-rot { border-color: var(--rot); } .farbe-blau { border-color: var(--blau); } .farbe-gruen { border-color: var(--gruen); }
.farbe-lila { border-color: var(--lila); } .farbe-orange { border-color: var(--orange); } .farbe-rosa { border-color: var(--rosa); } .farbe-gelb { border-color: var(--gelb); }

.zeile {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; margin: 8px 0; min-height: 52px;
  text-decoration: none; color: inherit; background: var(--karte); border-radius: 16px; box-shadow: var(--schatten);
}
.sterne { display: inline-flex; flex: none; gap: 2px; vertical-align: middle; }
.sterne img { width: 24px; height: 24px; }
.karte.mitte .sterne img { width: 52px; height: 52px; }
details { margin: 18px 0; }
summary { cursor: pointer; font-weight: 700; padding: 6px 0; min-height: 36px; }

.aufgabe .aufgabenbild { max-height: 180px; width: auto; margin: 0 auto 10px; }
.zeichnung { display: flex; justify-content: center; margin-bottom: 10px; }
.zeichnung svg { width: min(100%, 340px); }
.frage { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.frage h1 { font-size: 1.5rem; margin: 6px 0 10px; white-space: pre-line; overflow-wrap: anywhere; }
.frage h1.lesetext { font-size: 1.2rem; font-weight: 400; line-height: 1.55; }
.knopf.klein { min-height: 40px; padding: 4px 16px; font-size: 1rem; font-weight: 400; }
.hoertext { background: #f6f2e9; border-radius: 12px; padding: 10px 14px; margin: 8px 0; }
.felder ul, .felder ol { margin: 6px 0 10px; padding-left: 1.4em; }

.wahl { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 10px; margin: 10px 0; }
.option {
  min-height: 52px; padding: 10px 14px; border-radius: 14px; border: 3px solid var(--linie); background: var(--karte); text-align: center; width: 100%; overflow-wrap: anywhere;
}
.option:disabled { opacity: .55; cursor: default; }
.option[aria-pressed="true"], .option.gewaehlt { border-color: var(--blau); background: #e3f1fb; }
.gelegt { list-style: decimal; padding-left: 1.6em; margin: 8px 0; min-height: 10px; }
.gelegt li { margin: 6px 0; }
.zuordnen { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 10px 0; }
.spalte { display: flex; flex-direction: column; gap: 8px; }
.paar-0 { border-color: var(--rot); } .paar-1 { border-color: var(--blau); } .paar-2 { border-color: var(--gruen); }
.paar-3 { border-color: var(--orange); } .paar-4 { border-color: var(--lila); } .paar-5 { border-color: var(--rosa); }

.eingabe { width: 100%; min-height: 52px; padding: 8px 14px; border: 3px solid var(--linie); border-radius: 14px; background: var(--karte); }
.eingabezeile { display: flex; gap: 10px; margin: 10px 0; }
.eingabezeile .eingabe { flex: 1; min-width: 0; font-size: 1.3rem; }

.felder > .eingabe, .karte > .eingabe { display: block; max-width: 320px; margin: 10px auto 0; text-align: center; font-size: 1.5rem; font-weight: 700; }
.zifferntasten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; max-width: 320px; margin: 10px auto; }
.taste { min-height: 56px; border-radius: 14px; border: 3px solid var(--linie); background: var(--karte); font-size: 1.5rem; font-weight: 700; }
.taste:active { background: #e3f1fb; border-color: var(--blau); }
.taste:disabled { opacity: .45; cursor: default; }
.knopf.breit { display: block; width: 100%; max-width: 320px; margin: 0 auto; }

.rueckmeldung { margin-top: 12px; border-radius: 14px; }
.rueckmeldung:not(:empty) { padding: 12px 14px; }
.rueckmeldung p { margin: 6px 0; }
.rueckmeldung.gut { background: #e6f4e6; }
.rueckmeldung.nochmal { background: #fff5d6; }
.rueckmeldung.loesung { background: #e3f1fb; }

.formular label, .feldname { display: block; font-weight: 700; margin: 14px 0 4px; }
.formular label.haken { font-weight: 400; display: flex; gap: 10px; align-items: center; min-height: 40px; margin: 6px 0; }
.haken input { width: 24px; height: 24px; }
.bildwahl { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px; }
.bildwahl button { padding: 6px; border: 3px solid var(--linie); border-radius: 14px; background: var(--karte); }
.bildwahl button.gewaehlt { border-color: var(--blau); background: #e3f1fb; }
.kindzeile { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.kindzeile img { width: 56px; }
.kindzeile > div:nth-child(2) { flex: 1; min-width: 160px; }
.kindzeile .knoepfe { margin-top: 0; }
.elternthema { border-top: 2px solid var(--linie); padding: 10px 0; }
.elternthema p { margin: 4px 0; }

.zur-app { float: right; font-weight: 700; text-decoration: none; padding-top: 16px; }
.www .held { text-align: center; padding: 12px 0 8px; }
.held img { width: 160px; margin: 0 auto; }
.held h1 { font-size: 2.1rem; }
.einleitung { font-size: 1.25rem; max-width: 32em; margin: 8px auto 14px; }
.www h2 { font-size: 1.5rem; margin: 36px 0 12px; color: var(--tinte); }
.schritte { padding-left: 1.4em; }
.schritte li { margin: 8px 0; }
.fachliste { list-style: none; padding: 0; }
.fachliste .kachel img { width: 64px; height: 64px; }
.vorteile { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.vorteil { display: flex; flex-direction: column; gap: 4px; background: var(--karte); border-radius: var(--radius); box-shadow: var(--schatten); padding: 16px; }
.vorteil img { width: 56px; height: 56px; object-fit: contain; }
.vorteil span { color: var(--tinte2); font-size: 1rem; }
.mehr { text-align: center; margin-top: 16px; }
.abschluss { margin-top: 30px; }
/* Material für Lehrkräfte */
.filter { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px 16px; align-items: end; position: sticky; top: 8px; z-index: 2; }
.filter label { display: block; font-weight: 700; font-size: 1rem; }
.filter .eingabe { min-height: 46px; font-weight: 400; margin-top: 4px; }
.filter p { grid-column: 1 / -1; margin: 0; }
.lehrkraefte .held { padding-bottom: 20px; }
@media (max-width: 700px) { .filter { position: static; } .zur-app { display: block; float: none; text-align: right; padding-top: 0; margin: -8px 0 10px; } }
.materialliste { list-style: none; padding: 0; margin: 0; }
.material { background: var(--karte); border-radius: 18px; box-shadow: var(--schatten); padding: 16px 18px; margin: 14px 0; }
.material h3 { margin: 0; font-size: 1.2rem; }
.material p { margin: 6px 0; }
.material details { margin: 8px 0; }
.material details ul { margin: 6px 0; padding-left: 1.2em; font-size: 1rem; }
.material .knopf { min-height: 42px; padding: 7px 18px; font-size: 1rem; }
.text { max-width: 42em; }
.fusszeile { text-align: center; padding: 20px 16px 30px; font-size: .95rem; color: var(--tinte2); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
@media (max-width: 420px) { .eingabezeile { flex-wrap: wrap; } .zuordnen { gap: 8px; } .option { padding: 8px; } }