/* Schriften: selbst gehostet, SIL Open Font License (assets/fonts/OFL.txt) */
@font-face {
  font-family: "Baloo Tamma 2";
  src: url("assets/fonts/baloo-tamma-2.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Rubik";
  src: url("assets/fonts/rubik.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

/* Gezeichneter Kastenrahmen aus _grafiken/zeichne.py (rahmen.css, --frame) */
:root {
  --frame: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22120%22 height=%22120%22 viewBox=%220 0 120 120%22%3E%3Cpath d=%22M31.30 4.80Q60.70 5.05 90.50 4.80Q117.50 4.80 117.50 31.80Q117.98 61.22 117.50 90.80Q117.50 117.80 90.50 117.80Q61.15 117.91 31.30 117.80Q4.30 117.80 4.30 90.80Q3.90 61.05 4.30 31.80Q4.30 4.80 31.30 4.80Z%22 fill=%22%23fff%22/%3E%3Cpath d=%22M30.00 3.00Q59.93 2.28 90.00 3.00Q117.00 3.00 117.00 30.00Q117.06 59.53 117.00 90.00Q117.00 117.00 90.00 117.00Q60.56 117.56 30.00 117.00Q3.00 117.00 3.00 90.00Q3.65 59.89 3.00 30.00Q3.00 3.00 30.00 3.00Z%22 fill=%22none%22 stroke=%22%231c2230%22 stroke-width=%222.9%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E");
}

:root {
  color-scheme: light;
  --bg: #f4f5f9;
  --card: #ffffff;
  --ink: #1c2230;
  --muted: #5d6578;
  --line: #e6e8ef;
  --soft: #f0f1f6;
  --rose: #e11d48;

  --radius: 22px;
  --gap: clamp(12px, 1.6vw, 22px);
  --shadow: 0 1px 2px rgba(20, 27, 45, .05), 0 12px 32px -14px rgba(20, 27, 45, .2);
  --shadow-lift: 0 2px 4px rgba(20, 27, 45, .06), 0 22px 40px -16px rgba(20, 27, 45, .3);
  --font: "Rubik", ui-rounded, "SF Pro Rounded", "Avenir Next", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-display: "Baloo Tamma 2", ui-rounded, "SF Pro Rounded", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

* { box-sizing: border-box; }

html { height: 100%; }

body {
  min-width: 320px;
  min-height: 100%;
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(900px 520px at 6% -12%, #ffe3ea 0, transparent 62%),
    radial-gradient(820px 520px at 104% 112%, #e3f0ff 0, transparent 60%),
    var(--bg);
  background-attachment: fixed;
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

::selection { background: #ffd5df; color: var(--ink); }
:focus-visible { outline: 3px solid #2563eb; outline-offset: 3px; }
svg { display: block; }

.page {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: var(--gap);
  min-height: 100vh;
  min-height: 100dvh;
  padding: clamp(10px, 1.6vw, 22px);
}

/* ---------------------------------------------------------------- Kopf */
.topbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  padding: 8px 12px 8px 14px;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .82);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.brand { justify-self: start; display: block; border-radius: 50%; line-height: 0; transition: transform .15s var(--ease-out); }
.brand:hover { transform: rotate(-4deg) scale(1.04); }
.brand-logo { width: clamp(44px, 7vh, 58px); height: auto; border-radius: 50%; box-shadow: 0 4px 12px -4px rgba(225, 29, 72, .35); }

.title {
  margin: 0;
  color: var(--rose);
  font-family: var(--font-display);
  font-size: clamp(1.6rem, min(5.2vh, 4.4vw), 2.9rem);
  font-weight: 800;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  text-wrap: balance;
  /* Baloo sitzt optisch hoch; so steht der Titel mittig in der Leiste */
  padding-top: .12em;
}

.chip-btn {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: clamp(46px, 5.6vh, 62px);
  padding: 0 .75em 0 1em;
  font-size: clamp(1rem, 1.9vh, 1.3rem);
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  transition: border-color .15s, transform .15s var(--ease-out);
}
.chip-btn svg { width: 1.5em; height: 1.5em; --art-color: #ff5c86; }
.chip-btn:hover { border-color: #cfd4df; }
.chip-btn:active { transform: scale(.97); }

/* ---------------------------------------------------------------- Kacheln */
/* Abschnitte (28.09.2026 spät): Mathe, Spiele, Deutsch, Classroom Management. Jeder Abschnitt ist ein Subgrid
   des Regals, damit Überschriften und Bühnen einer Reihe auf derselben Linie liegen. */
.shelf {
  display: grid;
  gap: var(--gap);
  min-height: 0;
}

.group {
  display: grid;
  row-gap: clamp(6px, 1vh, 10px);
  column-gap: var(--gap);
  min-width: 0;
  min-height: 0;
}

.group-title {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  margin: 0;
  padding: .12em 4px 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 2.5vh, 1.55rem);
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}
.group-title::before {
  content: "";
  flex: none;
  width: .6em;
  height: .6em;
  margin-top: -.12em;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--group);
}
.group-title::after {
  content: "";
  flex: 1 1 0;
  min-width: 12px;
  height: 2px;
  margin-top: -.12em;
  border-radius: 2px;
  background: #dfe2ea;
}

.tile {
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  row-gap: 0;
  min-width: 0;
  min-height: 0;
  padding: 10px 10px 16px;
  /* Gezeichneter Rahmen samt Fläche */
  border: 2px solid transparent;
  border-image: var(--frame) 34 fill / 24px / 0 stretch;
  border-radius: 24px;
  color: var(--ink);
  text-decoration: none;
  box-shadow: var(--shadow);
  transition: transform .22s var(--ease-out), box-shadow .22s var(--ease-out);
}

.tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.tile:active { transform: translateY(-1px) scale(.985); transition-duration: .08s; }
.tile:focus-visible { outline-offset: 4px; border-radius: 26px; }

.stage {
  position: relative;
  display: block;
  min-height: 0;
  overflow: hidden;
  border-radius: 16px;
  background:
    radial-gradient(120% 90% at 30% 20%, rgba(255, 255, 255, .7) 0, transparent 60%),
    var(--tint);
}

.scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.tile-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-content: start;
  align-items: center;
  column-gap: 12px;
  row-gap: 4px;
  padding: 14px 4px 0 8px;
}
.tile-text { grid-column: 1 / -1; }

.tile-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 3.9vh, 2.3rem);
  font-weight: 800;
  line-height: 1.02;
  padding-top: .1em;
}

.tile-text {
  color: var(--muted);
  font-size: clamp(.95rem, 2.2vh, 1.35rem);
  line-height: 1.35;
  text-wrap: pretty;
}

.tile-go {
  display: grid;
  place-items: center;
  width: clamp(50px, 6.5vh, 72px);
  height: clamp(50px, 6.5vh, 72px);
  /* Wie die gezeichneten Knöpfe: Tintenkontur, Schattenfläche 13 % Tinte innerhalb der Form */
  border: 2.15px solid var(--ink);
  border-radius: 50%;
  background: var(--tone);
  box-shadow: inset -5px -6px 0 rgba(28, 34, 48, .13), 0 4px 10px -6px rgba(28, 34, 48, .45);
  transition: background-color .2s, transform .22s var(--ease-out);
}
.tile-go svg { width: 56%; height: 56%; --art-color: #ffffff; }
.tile:hover .tile-go { background: var(--tone-deep); transform: translateX(3px); }

/* ---------------------------------------------------------------- Szenen */
.scene text { font-family: var(--font-display); font-weight: 800; fill: var(--ink); }
.scene .scene-title { font-size: 23px; fill: var(--tone-deep); }
.scene .scene-task { font-size: 21px; font-weight: 700; font-variant-numeric: tabular-nums; }
.scene .scene-answer { font-size: 21px; fill: var(--tone-deep); }
.scene .scene-num { letter-spacing: -.01em; }
.scene .scene-day { font-family: var(--font); font-size: 15px; font-weight: 700; letter-spacing: .14em; fill: #fff; }
.scene .scene-letter { font-family: var(--font); font-size: 15px; font-weight: 700; fill: #fff; }
.scene .scene-cover { font-size: 108px; fill: #fff; }
.scene .scene-chip { font-size: 23px; }
.scene .scene-plus { font-size: 26px; fill: var(--rose); }
.scene [data-part="pill"] path:last-child { transition: stroke .25s; }
.scene.is-done [data-part="pill"] path:last-child { stroke: #16a34a; stroke-width: 3.4; }
.scene [data-part="chip"] path { transition: fill .2s, stroke .2s; }
.scene [data-part="chip"].is-right path:first-child { fill: #dcfce7; }
.scene [data-part="chip"].is-right path:last-child { stroke: #16a34a; stroke-width: 3.2; }

/* Ausgangslage vor dem ersten Durchlauf (auch ohne JavaScript sichtbar) */
.scene [data-part="spark"] { opacity: 0; }
.scene [data-part="check"] { opacity: 0; }

.foot {
  color: var(--muted);
  font-size: clamp(.95rem, 1.9vh, 1.25rem);
  text-align: center;
  padding-bottom: 2px;
}

/* ---------------------------------------------------------------- Größen */
/* Vierzehn Kacheln in vier Abschnitten (28.09.2026 spät, Claude). Tafel, Beamer, Tablet quer: sieben Spalten,
   Mathe (3 × 2) | Deutsch (1 × 2) | oben Spiele (3), unten Classroom Management (3). Mathe und Deutsch reichen über
   beide Reihen; ihre zweite Kachelreihe steht auf der Höhe der Classroom-Kacheln (dazwischen bleibt die Zeile der
   Classroom-Überschrift frei). Tablet hoch: acht Spalten, je Kachel zwei, oben Mathe (3 × 2) und Deutsch (1 × 2),
   darunter Spiele und Classroom mittig. Kein Scrollen; Titel einzeilig ohne Pfeil-Knopf, der kommt erst ab 1600 px
   Breite dazu. Die Unterzeile erscheint erst ab 900 px Höhe. Vorher (zwölf Kacheln): quer sechs Spalten. */
@media (min-width: 641px) {
  .page { height: 100vh; height: 100dvh; }
  .group { grid-template-columns: subgrid; grid-template-rows: subgrid; }
  .tile-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tile-go, .tile-title .tile-lock { display: none; }
  .tile-body { grid-template-columns: minmax(0, 1fr); padding: 10px 4px 0 6px; }
  .tile-text { display: none; }
}

@media (min-width: 641px) and (min-aspect-ratio: 11/10) {
  .shelf {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    grid-template-rows: auto minmax(0, 1fr) auto minmax(0, 1fr);
  }
  .group-mathe { grid-column: 1 / span 3; grid-row: 1 / span 4; }
  .group-deutsch { grid-column: 4 / span 1; grid-row: 1 / span 4; }
  .group-spiele { grid-column: 5 / span 3; grid-row: 1 / span 2; }
  .group-klasse { grid-column: 5 / span 3; grid-row: 3 / span 2; }
  .group-mathe > .tile:nth-of-type(n+4),
  .group-deutsch > .tile:nth-of-type(n+2) { grid-row: 4; }
  .group-title { font-size: clamp(1rem, min(2.5vh, 1.2vw), 1.55rem); }
  /* Titelbreite je Kachel etwa 14,3vw − 58px, längster Titel („Zahl des Tages“) gut 7em */
  .tile-title { font-size: min(clamp(1.3rem, 3.8vh, 2.3rem), calc(1.97vw - 8px)); }
}

/* Kleine 4:3-Tafeln und -Tablets quer (etwa 1024 × 768): sieben Spalten wären zu schmal. Fünf Spalten, drei
   Kachelreihen: Mathe (3 × 2) | Deutsch (1 × 2) | Spiele (1 × 3), darunter Classroom Management (3); unten in der
   vierten Spalte bleibt ein Feld frei. */
@media (min-width: 641px) and (min-aspect-ratio: 11/10) and (max-aspect-ratio: 29/20) and (max-width: 1100px) {
  .shelf {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-template-rows: auto minmax(0, 1fr) minmax(0, 1fr) auto minmax(0, 1fr);
  }
  .group-mathe { grid-column: 1 / span 3; grid-row: 1 / span 3; }
  .group-deutsch { grid-column: 4 / span 1; grid-row: 1 / span 3; }
  .group-spiele { grid-column: 5 / span 1; grid-row: 1 / span 5; }
  .group-klasse { grid-column: 1 / span 3; grid-row: 4 / span 2; }
  .group-mathe > .tile:nth-of-type(n+4),
  .group-deutsch > .tile:nth-of-type(n+2) { grid-row: auto; }
  .group-spiele > .tile:nth-of-type(3) { grid-row: 5; }
  .tile-title { font-size: min(clamp(1.3rem, 3.8vh, 2.3rem), calc(2.65vw - 7px)); }
}

/* Pfeil-Knopf erst auf sehr breiten Tafeln; bei sieben Spalten nähme er dem Titel sonst den Platz */
@media (min-width: 2400px) and (min-aspect-ratio: 11/10) {
  .tile-body { grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; }
  .tile-go { display: grid; width: min(clamp(50px, 6vh, 68px), 3.2vw); height: min(clamp(50px, 6vh, 68px), 3.2vw); }
  .tile-title { font-size: min(clamp(1.3rem, 3.8vh, 2.3rem), 1.28vw); }
}

@media (min-width: 641px) and (min-aspect-ratio: 11/10) and (min-height: 900px) {
  .tile-text { display: block; font-size: clamp(.95rem, 1.9vh, 1.3rem); }
}

@media (min-width: 641px) and (max-aspect-ratio: 11/10) {
  .shelf {
    grid-template-columns: repeat(8, minmax(0, 1fr));
    grid-template-rows: auto minmax(0, 1fr) minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
  }
  .group > .tile { grid-column: span 2; }
  .group-mathe { grid-column: 1 / span 6; grid-row: 1 / span 3; }
  .group-deutsch { grid-column: 7 / span 2; grid-row: 1 / span 3; }
  .group-spiele { grid-column: 2 / span 6; grid-row: 4 / span 2; }
  .group-klasse { grid-column: 2 / span 6; grid-row: 6 / span 2; }
  /* Hochformat: Knopf klein halten, damit der Titel mittig bleibt */
  .chip-btn { min-height: 46px; font-size: 1rem; }
  .group-title { font-size: clamp(1rem, 2vh, 1.4rem); }
  .tile-title { font-size: min(clamp(1.3rem, 2.8vh, 2.1rem), 2.6vw); }
  .foot { display: none; }
}

/* Handy: nicht eigens gestaltet, aber lesbar und scrollbar */
@media (max-width: 640px) {
  .topbar { grid-template-columns: auto 1fr; }
  .title { text-align: left; font-size: 1.5rem; }
  .chip-btn { display: none; }
  .shelf { grid-template-columns: minmax(0, 1fr); }
  .group { grid-template-columns: minmax(0, 1fr); }
  .tile { grid-template-rows: auto auto; }
  .stage { aspect-ratio: 16 / 11; }
  .tile-title { font-size: 1.75rem; }
  .tile-text { font-size: 1.02rem; }
  .tile-go { width: 52px; height: 52px; }
  .foot { font-size: .95rem; }
}

@media (prefers-reduced-motion: reduce) {
  .tile, .tile-go, .brand, .chip-btn { transition: none; }
  .tile:hover, .tile:hover .tile-go { transform: none; }
}

/* Schloss auf der Kachel (Alex, 28.09.2026): Tägliche Übung vorerst nur für Alex. Das Schild „bald“ steht nur noch
   in der Handy-Liste; auf Tafel und Tablet zeigt das große Schloss auf der Bühne den Zustand. */
.tile-lock { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; padding: 4px 10px 3px 7px; border-radius: 999px; background: var(--ink, #1c2230); color: #fff; font-family: var(--font, system-ui); font-size: .72rem; font-weight: 700; letter-spacing: .02em; line-height: 1; vertical-align: .2em; white-space: nowrap; }
.tile-lock svg { width: 14px; height: 14px; }
/* Abgeschlossene Tafel (28.09.2026): Szene verschwommen, großes Schloss darüber. Die Kachel bleibt ein Link,
   Alex kommt als Admin hinein, alle anderen landen auf der Schloss-Seite. */
.tile.is-locked .stage { container-type: inline-size; }
.tile.is-locked .scene { filter: blur(3px); }
/* Mitte der Szene: sie steht unten in der Bühne (xMidYMax) und ist höchstens so hoch wie 264/276 der Breite */
.tile.is-locked .stage::after {
  content: "";
  position: absolute;
  bottom: min(50%, 47.8cqi);
  left: 50%;
  width: clamp(64px, 30%, 112px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M15 21V15a9 9 0 0 1 18 0v6' fill='none' stroke='%231c2230' stroke-width='3.4' stroke-linecap='round'/%3E%3Crect x='9' y='21' width='30' height='22' rx='6' fill='%2316a34a' stroke='%231c2230' stroke-width='3'/%3E%3Ccircle cx='24' cy='30' r='3' fill='%231c2230'/%3E%3Cpath d='M24 32v5' stroke='%231c2230' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center / 60% no-repeat;
  box-shadow: 0 0 0 2px var(--ink, #1c2230), 0 14px 28px -10px rgba(28, 34, 48, .45);
  transform: translate(-50%, 50%);
}

/* Neue Szenen (28.09.2026 spät): Schüttelbox wackelt ab und zu, der Timer-Ring läuft ab. Nur CSS, app.js kennt sie nicht. */
@media (prefers-reduced-motion: no-preference) {
  .scene-schuettel [data-part="box"] { animation: box-shake 3.4s ease-in-out infinite; }
  .scene-uhr [data-part="arc"] { stroke-dasharray: 370 1000; animation: arc-run 9s linear infinite; }
}
@keyframes box-shake {
  0%, 60%, 100% { transform: none; }
  64% { transform: translateX(-5px) rotate(-2.2deg); }
  68% { transform: translateX(5px) rotate(2deg); }
  72% { transform: translateX(-4px) rotate(-1.6deg); }
  76% { transform: translateX(3px) rotate(1.2deg); }
  80% { transform: translateX(-1px) rotate(-.4deg); }
}
@keyframes arc-run { from { stroke-dashoffset: 0; } 92% { stroke-dashoffset: -330; } to { stroke-dashoffset: -330; } }

/* Wer ist dran? und Lautstärke (28.09.2026 spät, Claude): Namen wechseln, bis „Mila“ stehen bleibt; die Ampel
   wechselt Grün, Gelb, Rot. Nur CSS. Ohne Bewegung stehen „Mila“ und das grüne Licht. */
.scene-dran .dran-name:not(.dran-3) { opacity: 0; }
.scene-ampel .ampel-gelb,
.scene-ampel .ampel-rot { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .scene-dran .dran-0 { animation: dran-0 6s infinite; }
  .scene-dran .dran-1 { animation: dran-1 6s infinite; }
  .scene-dran .dran-2 { animation: dran-2 6s infinite; }
  .scene-dran .dran-3 { animation: dran-3 6s infinite; }
  .scene-dran [data-part="card"] { animation: dran-flip 6s infinite; }
  .scene-dran [data-part="star"] { transform-box: fill-box; transform-origin: 50% 50%; animation: dran-star 6s infinite; }
  .scene-ampel .ampel-gruen { animation: ampel-gruen 7.5s infinite; }
  .scene-ampel .ampel-gelb { animation: ampel-gelb 7.5s infinite; }
  .scene-ampel .ampel-rot { animation: ampel-rot 7.5s infinite; }
  .scene-ampel .ampel-wave { animation: ampel-wave 1.6s ease-in-out infinite; }
  .scene-ampel .ampel-wave-1 { animation-delay: .2s; }
  .scene-ampel .ampel-wave-2 { animation-delay: .4s; }
}
@keyframes dran-0 { 0%, 5.9% { opacity: 1; } 6%, 100% { opacity: 0; } }
@keyframes dran-1 { 0%, 5.9% { opacity: 0; } 6%, 12.9% { opacity: 1; } 13%, 100% { opacity: 0; } }
@keyframes dran-2 { 0%, 12.9% { opacity: 0; } 13%, 21.9% { opacity: 1; } 22%, 100% { opacity: 0; } }
@keyframes dran-3 { 0%, 21.9% { opacity: 0; } 22%, 100% { opacity: 1; } }
@keyframes dran-flip {
  0%, 6%, 13%, 22% { transform: scaleY(.82); }
  2.5%, 8.5%, 16%, 27%, 100% { transform: none; }
}
@keyframes dran-star { 0%, 22% { opacity: 0; transform: scale(.3) rotate(-40deg); } 27% { opacity: 1; transform: scale(1.15); } 31%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
@keyframes ampel-gruen { 0%, 44.9% { opacity: 1; } 45%, 91.9% { opacity: 0; } 92%, 100% { opacity: 1; } }
@keyframes ampel-gelb { 0%, 44.9% { opacity: 0; } 45%, 61.9% { opacity: 1; } 62%, 100% { opacity: 0; } }
@keyframes ampel-rot { 0%, 61.9% { opacity: 0; } 62%, 91.9% { opacity: 1; } 92%, 100% { opacity: 0; } }
@keyframes ampel-wave { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }