/* Sidebar — wie iOS: schmaler grauer Streifen ohne Trennlinie,
   Buttons als gerahmte weiße Quadrate mit zentriertem Icon. */
.sidebar {
  width: var(--sidebar-w);
  height: 100%;
  background: var(--color-bg-menu);
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  padding: var(--margin-small);
  gap: var(--margin-small);
}
.sidebar__slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--margin-small);
}
.sidebar__slot:nth-child(2) { justify-content: center; }
.sidebar__slot:last-child { justify-content: flex-end; }
.sb-btn {
  width: calc(var(--sidebar-w) - 2 * var(--margin-small));
  height: calc(var(--sidebar-w) - 2 * var(--margin-small));
  background: transparent center / 75% no-repeat;
  border: 0;
  border-radius: 8px;
  padding: 0;
}
.sb-btn--disabled { opacity: 0.4; cursor: not-allowed; }
.sb-btn:active { transform: scale(0.98); }

/* Header — 3 Spalten volle Breite (Sollzahl liegt als eigenes Panel unter
   dem Block-Field, nicht als 4. Spalte). */
.header-bf {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  height: var(--header-row-h);
  flex-shrink: 0;
}
.header-bf__cell {
  border: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.header-bf__cell img { height: 100%; max-height: 80px; }
.header-bf__cell--h { background: var(--color-header-red); }
.header-bf__cell--z { background: var(--color-header-blue); }
.header-bf__cell--e { background: var(--color-header-green); }

/* Footer — 3 Spalten volle Breite, dieselbe Grid wie Header. */
.footer-bf {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  height: var(--footer-h);
  flex-shrink: 0;
  font: var(--font-footer);
  color: var(--color-text-on-footer);
}
.footer-bf__cell { display: flex; align-items: center; justify-content: center; }
.footer-bf__cell--h { background: var(--color-header-red); }
.footer-bf__cell--z { background: var(--color-header-blue); }
.footer-bf__cell--e { background: var(--color-header-green); }
.footer-bf__cell.is-selected.footer-bf__cell--h { background: var(--color-footer-selected-red); }
.footer-bf__cell.is-selected.footer-bf__cell--z { background: var(--color-footer-selected-blue); }
.footer-bf__cell.is-selected.footer-bf__cell--e { background: var(--color-footer-selected-green); }

/* Bottom-Panel: zentrierte Sollzahl oder Audio/Mic-Button unter dem Feld. */
.desired-panel {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--margin-medium) var(--margin-vhuge);
  background: white;
  min-height: 110px;
}
.desired-panel__content {
  display: flex;
  align-items: center;
  justify-content: center;
}
.desired-panel__content--number {
  background: white;
  border: var(--border-w-big) solid black;
  border-radius: 6px;
  padding: var(--margin-small) var(--margin-vhuge);
  font: var(--font-number-big);
  min-width: 160px;
  min-height: 80px;
  line-height: 1;
}
.desired-panel__btn {
  width: 100px; height: 100px;
  border: 0;
  background: center / contain no-repeat;
  cursor: pointer;
}
.desired-panel__btn--audio { background-image: url('../assets/img/audiobutton.png'); }
.desired-panel__btn--audio.is-active { background-image: url('../assets/img/audiobutton_selected.png'); }
.desired-panel__btn--mic { background-image: url('../assets/img/micbutton.png'); }
.desired-panel__btn--mic.is-active { background-image: url('../assets/img/micbutton_selected.png'); }
.desired-panel__btn.is-disabled { opacity: 0.4; cursor: not-allowed; }

/* Sprache→Zahl: Slots + Audio mittig zentriert, Keypad bleibt unten. */
.sz-middle {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: var(--margin-vhuge);
  padding: var(--margin-vhuge);
}
.sz-middle .number-input__row { gap: var(--margin-large); }
.sz-middle .number-input__slot { width: 160px; height: 200px; }
.sz-middle .desired-panel { background: transparent; padding: 0; min-height: 0; }
.sz-middle .desired-panel__btn { width: 140px; height: 140px; }

/* Wenn das Keypad als eigenständiges Direkt-Kind im Screen sitzt (z.B.
   Sprache→Zahl), Seitenabstand + Abstand zum unteren Rand hinzufügen. */
.screen__main > .number-input__keypad {
  padding: 0 var(--margin-vhuge) var(--margin-vhuge);
}

/* Große Zahl-Anzeige (Zahl→Sprache) */
.big-number-display {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font: var(--font-number-big);
  background: white;
  border: var(--border-w-big) solid black;
  margin: var(--margin-vhuge);
}

/* Number Row */
.number-row {
  height: var(--footer-h);
  display: flex; align-items: center; justify-content: center;
  font: var(--font-footer); color: var(--color-text);
  background: var(--color-task-progress-bg);
}

/* NumberInput — 3 farbige H/Z/E-Slots + 11er-Keypad */
.number-input {
  display: grid; grid-template-rows: auto 1fr;
  gap: var(--margin-medium); padding: var(--margin-medium);
}
.number-input__row {
  display: flex; gap: var(--margin-medium); justify-content: center;
}
.number-input__slot {
  width: 120px; height: 150px; border: var(--border-w) solid black;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font: var(--font-number-input);
  color: var(--color-text-on-footer);
  cursor: pointer; padding: 0;
}
.number-input__slot--h { background: var(--color-header-red); }
.number-input__slot--z { background: var(--color-header-blue); }
.number-input__slot--e { background: var(--color-header-green); }
.number-input__slot.is-active { outline: 4px solid #ffd54a; outline-offset: -8px; }
.number-input__keypad {
  display: grid; grid-template-columns: repeat(11, 1fr); gap: var(--margin-small);
  align-items: center;
}
.number-input__key {
  font: 700 36px system-ui; height: 60px;
  background: white; border: var(--border-w) solid var(--color-button-border);
  border-radius: 8px;
}
.number-input__key--bs { background: white center/40% no-repeat; }

/* CheckOverlay */
.check-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.6);
  display: flex; align-items: center; justify-content: center; z-index: 1000;
}
.check-overlay__card {
  background: white; padding: var(--margin-vhuge);
  border-radius: 12px;
  display: flex; flex-direction: column; align-items: center;
  gap: var(--margin-vhuge);
  min-width: 400px;
}
.check-overlay__results {
  display: flex; gap: var(--margin-vhuge); justify-content: center;
}
.check-overlay__result-box {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--margin-medium);
}
.check-overlay__icon { width: 180px; height: 180px; object-fit: contain; }
.check-overlay__label { font: 700 36px system-ui; }
.check-overlay__row { display: flex; gap: var(--margin-large); }
.check-overlay__btn {
  font: 700 22px system-ui; padding: 12px 24px;
  background: white; border: var(--border-w) solid var(--color-button-border);
  border-radius: 8px;
}

/* HelpOverlay */
.help-overlay {
  position: fixed; inset: 0; background: rgba(0, 0, 0, 0.85);
  display: flex; align-items: center; justify-content: center; z-index: 1100;
}
.help-overlay__card { width: 90%; height: 90%; position: relative; padding: var(--margin-vhuge); }
.help-overlay__close {
  position: absolute; top: var(--margin-medium); right: var(--margin-medium);
  width: 90px; height: 90px;
  background: center/70% no-repeat;
  border: 0;
}
.help-overlay__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--margin-vhuge);
  height: 100%;
}
.help-overlay__grid img { width: 100%; height: 100%; object-fit: contain; cursor: pointer; }
.help-overlay__detail {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: var(--margin-vhuge); cursor: pointer;
}
.help-overlay__detail-img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* Menu */
.menu-button {
  padding: var(--margin-medium) var(--margin-xlarge); font: var(--font-menu-button);
  background: var(--color-button-bg);
  border: var(--border-w) solid var(--color-button-border);
  border-radius: 12px;
  color: var(--color-text);
}
.menu-color-button { min-width: 120px; }
.menu-color-button--color {
  background:
    linear-gradient(to right,
      rgba(255,0,0,0.3) 0%, rgba(255,0,0,0.3) 33.333%,
      rgba(0,0,255,0.3) 33.333%, rgba(0,0,255,0.3) 66.666%,
      rgba(0,255,0,0.3) 66.666%, rgba(0,255,0,0.3) 100%);
}

/* Menü-Image-Buttons (Experimentieren / Üben) – Rahmen NUR um das Bild,
   Label sitzt darunter außerhalb des Rahmens (Spiegelung der iOS-MenuImageButton). */
.menu-image-button {
  flex: 0 0 20%;
  max-width: 280px;
  height: calc(20% + 50px);
  min-height: 180px;
  display: flex;
  flex-direction: column;
  background: transparent;
  border: 0;
  padding: 0;
  pointer-events: auto;
  cursor: pointer;
}
.menu-image-button__card {
  flex: 1;
  min-height: 0;
  background: #ffffff;
  border: var(--border-w) solid var(--color-button-border);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.menu-image-button__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.menu-image-button__label {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font: var(--font-menu-button);
  color: var(--color-text);
  margin-top: var(--margin-medium);
}

/* Matheforscher-Einbettung: Der Zurück-Button führt außerhalb des iframes. */
.embedded .sb-btn--exit { display: none; }

.mf-highlight {
  position: relative;
  z-index: 2;
  outline: 5px solid #f0b400;
  outline-offset: -5px;
  animation: mf-highlight-pulse 900ms ease-in-out infinite alternate;
}

.mf-demo-block { opacity: 0.55; pointer-events: none; filter: drop-shadow(0 0 7px #f0b400); }

@keyframes mf-highlight-pulse {
  from { box-shadow: inset 0 0 0 0 #f0b400; }
  to { box-shadow: inset 0 0 0 7px #f0b400; }
}

/* Info-Screen */
.info-screen {
  background: var(--color-bg-menu);
  display: flex;
  flex-direction: column;
  padding: var(--margin-large) var(--margin-vhuge);
  overflow-y: auto;
  gap: var(--margin-large);
}
.info-screen__header {
  display: flex;
  align-items: center;
  gap: var(--margin-large);
  flex-wrap: wrap;
}
.info-screen__back { flex: 0 0 auto; }
.info-screen__title {
  margin: 0;
  font: 700 28px system-ui, -apple-system, sans-serif;
}
.info-screen__intro {
  margin: 0;
  font: 18px system-ui, -apple-system, sans-serif;
  max-width: 900px;
  line-height: 1.4;
}
.info-screen__authors {
  display: flex;
  flex-direction: column;
  gap: var(--margin-medium);
  max-width: 900px;
}
.info-screen__row {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: var(--margin-large);
  align-items: center;
  background: white;
  padding: var(--margin-medium) var(--margin-large);
  border-radius: 8px;
}
.info-screen__logo {
  width: 100%;
  max-height: 60px;
  object-fit: contain;
}
.info-screen__text {
  font: 16px system-ui, -apple-system, sans-serif;
  line-height: 1.45;
}
.info-screen__text a {
  color: #1a4f8a;
  word-break: break-all;
}
.info-screen__web {
  background: white;
  padding: var(--margin-large);
  border-radius: 8px;
  max-width: 900px;
}
.info-screen__subtitle {
  margin: 0 0 var(--margin-small) 0;
  font: 700 20px system-ui, -apple-system, sans-serif;
}
.info-screen__web p { margin: 0 0 var(--margin-medium) 0; font: 16px system-ui, -apple-system, sans-serif; line-height: 1.45; }
.info-screen__stores {
  margin: 0; padding-left: var(--margin-large);
  font: 16px system-ui, -apple-system, sans-serif;
  line-height: 1.6;
}
.info-screen__stores a { color: #1a4f8a; }
.info-screen__footer {
  margin-top: auto;
  padding-top: var(--margin-large);
  text-align: center;
  font: 16px system-ui, -apple-system, sans-serif;
}
.info-screen__footer a { color: #1a4f8a; text-decoration: none; }
.info-screen__footer a:hover { text-decoration: underline; }

/* Übersicht / SecondMenu */
.second-menu__grid {
  position: absolute;
  inset: 90px var(--margin-vhuge) 90px var(--margin-vhuge);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 1fr;
  gap: var(--margin-medium);
  /* clamp the row height so tiles never get absurdly large on big screens */
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
}
.second-menu__tile {
  background: white;
  border: var(--border-w) solid var(--color-button-border);
  border-radius: 14px;
  padding: var(--margin-medium);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}
.second-menu__tile-img {
  flex: 1;
  min-height: 0;
  width: 100%;
  object-fit: contain;
}

/* Auf schmalen Fenstern: 2 Spalten × 4 Reihen */
@media (max-width: 900px) {
  .second-menu__grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(4, minmax(0, 1fr));
  }
}
/* Sehr schmal: 1 Spalte */
@media (max-width: 500px) {
  .second-menu__grid {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(8, minmax(0, 1fr));
  }
}