/* ==========================================================================
   Silbenfuchs – Bausteine: Rutsche, Buchstaben, Bildaufgabe, Tabellen, Verwaltung
   ========================================================================== */

/* ---------- Bühne ---------- */
.buehne { padding: 0; overflow: hidden; }
.buehne-kopf { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 14px 20px 0; }
.anweisung { margin: 0; font-size: clamp(1rem, 1.8vw, 1.25rem); }
.rutsche-rahmen { padding: 6px 10px 0; }
.rutsche {
  display: block; width: 100%; height: auto;
  max-height: calc(100dvh - var(--kopfhoehe) - 230px);
  min-height: 180px;
  aspect-ratio: 1100 / 720;
  margin: 0 auto;
  user-select: none; -webkit-user-select: none;
}
.steuerung { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; padding: 10px 16px; }
.steuerung .fortschritt-regler { flex: 1 1 160px; max-width: 280px; }
.steuerung-uebung { border-top: 1px solid var(--linie); padding-bottom: 14px; }
.uebung-info { color: var(--text-leise); font-size: .9rem; }

/* Rutsche (Gestaltung der Originalversion) */
.r-kreis-flaeche, .r-kapsel { fill: #F7F4EE; stroke: #4A4742; stroke-width: 2.5; }
.r-buchstabe { font-size: 112px; fill: #4A4742; }
.rutsche.farbig [data-typ="vokal"] .r-buchstabe, .rutsche.farbig tspan[data-typ="vokal"] { fill: var(--vokal); }
.rutsche.farbig [data-typ="konsonant"] .r-buchstabe, .rutsche.farbig tspan[data-typ="konsonant"] { fill: var(--konsonant); }
.r-kreis, .r-verbunden { cursor: pointer; }
.r-kreis:focus, .r-verbunden:focus { outline: none; }
.r-kreis:focus-visible .r-kreis-flaeche, .r-verbunden:focus-visible .r-kapsel { stroke: var(--fokus); stroke-width: 6; }

/* Pinguin oben auf der Plattform: schubst beim Start, hüpft bei der Ankunft.
   Drehpunkte: Füße (Körper) bzw. Schulter (Flügel) = lokaler Ursprung (0|0).
   Zeitplan „schubst“: ausholen bis 30 %, Schubs trifft bei ca. 42 % (= PINGUIN.vorlaufMs in rutsche.js). */
.r-pinguin { pointer-events: none; }
.r-pinguin-dunkel { fill: #2B3A55; stroke: #1d2333; stroke-width: 1.5; }
.r-pinguin-fuss { fill: #F59E0B; stroke: #b86e00; stroke-width: 1.2; }
.r-pinguin-schal { fill: #E4572E; stroke: #a8361a; stroke-width: 1; }
.r-pinguin-koerper, .r-pinguin-fluegel { transform-box: view-box; transform-origin: 0 0; }
.r-pinguin-auge { transform-box: fill-box; transform-origin: 50% 50%; animation: r-blinzeln 5.5s infinite; }
.r-pinguin.schubst .r-pinguin-koerper { animation: r-schubs 1s ease-in-out; }
.r-pinguin.schubst .r-pinguin-fluegel { animation: r-fluegel-schubs 1s ease-in-out; }
.r-pinguin.jubelt .r-pinguin-koerper { animation: r-huepfen .7s ease-out 2; }
.r-pinguin.jubelt .r-pinguin-fluegel { animation: r-winken .35s ease-in-out 4; }
@keyframes r-schubs {
  0% { transform: translate(0, 0) rotate(0); }
  30% { transform: translate(-7px, 0) rotate(-9deg); }
  42% { transform: translate(14px, 0) rotate(14deg); }
  62% { transform: translate(10px, 0) rotate(10deg); }
  100% { transform: translate(0, 0) rotate(0); }
}
@keyframes r-fluegel-schubs {
  0% { transform: rotate(0); }
  30% { transform: rotate(28deg); }
  42% { transform: rotate(-95deg); }
  66% { transform: rotate(-75deg); }
  100% { transform: rotate(0); }
}
@keyframes r-huepfen {
  0%, 100% { transform: translate(0, 0); }
  40% { transform: translate(0, -16px); }
  70% { transform: translate(0, 0) scale(1.06, .94); }
}
@keyframes r-winken {
  0%, 100% { transform: rotate(0); }
  50% { transform: rotate(-120deg); }
}
@keyframes r-blinzeln {
  0%, 92%, 100% { transform: scaleY(1); }
  95% { transform: scaleY(.1); }
}
@media (prefers-reduced-motion: reduce) {
  .r-pinguin .r-pinguin-koerper, .r-pinguin .r-pinguin-fluegel, .r-pinguin .r-pinguin-auge { animation: none !important; }
}

/* ---------- Seitenleiste / Buchstabenwahl ---------- */
.seitenleiste h2 { margin-bottom: 12px; }
.wahl-paar { display: grid; gap: 4px 12px; }
.wahl-titel { display: block; font-size: .8rem; letter-spacing: .08em; color: var(--text-leise); margin: 14px 0 8px; }
.buchstabenwahl { display: flex; flex-wrap: wrap; gap: 7px; }
.buchstabe-knopf {
  min-width: 52px; min-height: 52px; padding: 2px 10px;
  border: 2px solid var(--linie); border-radius: 12px; background: var(--flaeche);
  font-size: 1.9rem; line-height: 1; color: var(--text); cursor: pointer;
  transition: border-color .15s, background-color .15s, transform .08s;
  touch-action: manipulation;
}
.buchstabe-knopf:hover { border-color: var(--fuchs); }
.buchstabe-knopf:active { transform: scale(.96); }
.buchstabe-knopf[aria-pressed="true"] { background: var(--fuchs-hell); border-color: var(--fuchs); box-shadow: inset 0 0 0 2px var(--fuchs); }
.vokale-farbig .buchstabe-knopf.typ-vokal, .vokale-farbig .kopf-knopf.typ-vokal { color: var(--vokal); }
.vokale-farbig .buchstabe-knopf.typ-konsonant, .vokale-farbig .kopf-knopf.typ-konsonant { color: var(--konsonant); }
.schnellwahl { margin-bottom: 4px; }
.schnellwahl .buchstabe-knopf { font-size: 1.6rem; min-width: 64px; }
.buchstabenwahl-mehrfach .buchstabe-knopf[aria-pressed="false"] { opacity: .55; }
.buchstabendialog section { margin-top: 8px; }

.abschnitt { border-top: 1px solid var(--linie); margin-top: 16px; padding-top: 6px; }
.abschnitt summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-size: 1rem; list-style-position: inside; }
.abschnitt > .knopf { margin-top: 12px; }
.abschnitt p { font-size: .9rem; color: var(--text-leise); }

@media (min-width: 900px) and (max-width: 1099px) {
  .buchstabe-knopf { min-width: 46px; min-height: 46px; font-size: 1.6rem; }
}
@media (max-width: 899px) {
  .wahl-paar { grid-template-columns: 1fr 1fr; }
}

/* ---------- Bildaufgabe ---------- */
.bild-frage { font-size: 1.15rem; }
.bildkarten { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.bildkarte {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 12px 8px 10px; min-height: 150px;
  background: var(--flaeche); border: 3px solid var(--linie); border-radius: 14px;
  font: inherit; color: var(--text); cursor: pointer; touch-action: manipulation;
  transition: border-color .15s, background-color .15s;
}
.bildkarte:hover { border-color: #CDBFAD; }
.bildkarte .bild { width: 96px; height: 96px; object-fit: contain; pointer-events: none; }
.bild-text { display: grid; place-items: center; font-size: 72px; line-height: 1; }
.bild-wort { font-family: var(--leseschrift), var(--oberflaeche); font-size: 1.6rem; min-height: 1.4em; }
.bildkarte.richtig { border-color: var(--wald); background: var(--wald-hell); }
.bildkarte.richtig::after { content: "✓"; position: absolute; top: 6px; right: 10px; color: var(--wald); font-size: 1.4rem; }
.bildkarte.falsch { border-color: #D99A86; animation: wackeln .35s; }
@keyframes wackeln { 25% { translate: -6px 0; } 75% { translate: 6px 0; } }
.bild-rueckmeldung { min-height: 1.6em; margin: 12px 0 0; font-size: 1.1rem; }

@media (max-width: 759px) {
  .bildkarten { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .bildkarte .bild { width: 76px; height: 76px; }
  .bild-text { font-size: 60px; }
}

/* ---------- Silbenpaar ---------- */
.paar-anzeige { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.paar-feld, .paar-wort {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 96px; min-height: 64px; padding: 4px 16px;
  border-radius: 14px; font-size: 2.2rem; background: var(--flaeche-leise); border: 2px solid var(--linie);
}
.paar-leer { font-family: var(--oberflaeche); font-size: .95rem; color: var(--text-leise); border-style: dashed; }
.paar-wort { background: var(--fuchs-hell); border-color: var(--fuchs); min-width: 140px; }
.paar-zeichen { font-size: 1.6rem; color: var(--text-leise); }

/* ---------- Silbentabelle ---------- */
.werkzeugleiste { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 20px; margin-bottom: 12px; }
.werkzeugleiste .feld { margin: 0; min-width: 240px; }
.segmente { display: inline-flex; border: 1px solid var(--linie); border-radius: var(--radius-klein); overflow: hidden; }
.segment { min-height: var(--tipp); padding: 8px 16px; border: 0; background: var(--flaeche); font: inherit; color: var(--text); cursor: pointer; }
.segment + .segment { border-left: 1px solid var(--linie); }
.segment[aria-pressed="true"] { background: var(--fuchs); color: #fff; }
.ansicht-tabelle .knopfgruppe { margin-bottom: 12px; }
.tabelle-rahmen { overflow: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.silbentabelle { border-collapse: separate; border-spacing: 6px; }
.silbentabelle th { position: sticky; background: var(--flaeche); z-index: 1; }
.silbentabelle thead th { top: 0; }
.silbentabelle tbody th { left: 0; }
.kopf-knopf { min-width: 56px; min-height: 52px; border: 0; background: transparent; font-size: 1.8rem; cursor: pointer; color: var(--text); border-radius: 10px; }
.kopf-knopf:hover { background: var(--flaeche-leise); }
.silbe-zelle {
  position: relative; min-width: 84px; min-height: 60px; padding: 4px 10px;
  border: 2px solid var(--linie); border-radius: 12px; background: var(--flaeche);
  font-size: 1.8rem; color: var(--text); cursor: pointer; touch-action: manipulation;
}
.silbe-zelle:hover { border-color: var(--fuchs); }
.punkt-bilder { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--wald); vertical-align: middle; }
.silbe-zelle.mit-bildern::after { content: ""; position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--wald); }
.silbe-zelle.aktuell { box-shadow: 0 0 0 3px var(--fuchs-hell); border-color: var(--fuchs); }
.silbe-zelle.ausgewaehlt { background: var(--fuchs); border-color: var(--fuchs); color: #fff; }

/* ---------- Verwaltung ---------- */
.reiterleiste { display: flex; gap: 4px; overflow-x: auto; border-bottom: 2px solid var(--linie); margin: 4px 0 18px; scrollbar-width: thin; }
.reiter { flex: none; min-height: 46px; padding: 8px 14px; border: 0; border-bottom: 3px solid transparent; margin-bottom: -2px; background: none; font: inherit; color: var(--text-leise); cursor: pointer; }
.reiter[aria-selected="true"] { color: var(--fuchs-dunkel); border-bottom-color: var(--fuchs); }
.abschnitt-kopf h2 { margin-bottom: 6px; }
.speicherleiste { position: sticky; top: var(--kopfhoehe); z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 0; background: var(--flaeche); border-bottom: 1px solid var(--linie); margin-bottom: 12px; }
.speicher-status { font-size: .9rem; color: var(--text-leise); }
.speicher-status[data-art="fehler"] { color: var(--fehler); }
.speicher-status[data-art="hinweis"] { color: var(--fuchs-dunkel); }
.sammelfehler:empty { display: none; }
.sammelfehler { background: var(--fehler-hell); border: 1px solid #F3B8B1; color: var(--fehler); padding: 10px 14px; border-radius: var(--radius-klein); margin: 8px 0; font-size: .9rem; }
.sammelfehler p { margin: 2px 0; }
.anmeldung { max-width: 420px; }
.anmeldung .knopf { margin-top: 16px; }

.tabelleneditor { margin: 8px 0 18px; }
.editor-werkzeuge { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 8px; }
.editor-werkzeuge .suchfeld { max-width: 280px; }
.editor-anzahl { color: var(--text-leise); font-size: .85rem; }
.editor-tabelle { width: 100%; border-collapse: collapse; }
.editor-tabelle th { text-align: left; font-size: .8rem; color: var(--text-leise); font-weight: 400; padding: 6px; border-bottom: 1px solid var(--linie); }
.editor-tabelle td { padding: 6px; vertical-align: top; border-bottom: 1px solid var(--flaeche-leise); }
.editor-tabelle .breite-s { width: 140px; }
.editor-tabelle .breite-m { width: 260px; }
.zelle { display: flex; align-items: center; gap: 8px; }
.zelle-info { color: var(--text-leise); font-size: .85rem; min-width: 140px; }
.spalte-aktionen { white-space: nowrap; text-align: right; width: 1%; }
.spalte-aktionen .knopf + .knopf { margin-left: 4px; }
.bild-vorschau { flex: none; width: 40px; height: 40px; display: grid; place-items: center; font-size: 26px; }
.bild-vorschau .bild { width: 40px; height: 40px; object-fit: contain; }
.bild-vorschau .bild-text { font-size: 30px; }

.sonder-karte { border: 1px solid var(--linie); border-radius: var(--radius); padding: 12px 16px; margin: 14px 0; }
.sonder-karte legend { padding: 0 6px; color: var(--text-leise); }
.sonder-felder { display: grid; grid-template-columns: 180px 1fr; gap: 0 16px; }

.zwei-spalten { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.karten-reihe { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.mini-karte { border: 1px solid var(--linie); border-radius: var(--radius); padding: 16px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.mini-karte h3 { margin: 0; }
.upload { display: grid; gap: 8px; margin-bottom: 14px; }
.upload .knopf { justify-self: start; }
.medien-liste { display: grid; gap: 8px; }
.medium { display: flex; align-items: center; gap: 10px; padding: 6px; border: 1px solid var(--linie); border-radius: var(--radius-klein); }
.medium code { flex: 1; }
.medium-vorschau { width: 48px; height: 48px; object-fit: contain; }

/* Verwaltungstabellen auf dem Smartphone als Karten */
@media (max-width: 759px) {
  .zwei-spalten, .sonder-felder { grid-template-columns: 1fr; }
  .editor-tabelle thead { display: none; }
  .editor-tabelle, .editor-tabelle tbody, .editor-tabelle tr, .editor-tabelle td { display: block; width: 100% !important; }
  .editor-tabelle tr { border: 1px solid var(--linie); border-radius: var(--radius-klein); padding: 6px; margin-bottom: 10px; }
  .editor-tabelle td { border: 0; }
  .editor-tabelle td[data-label]::before { content: attr(data-label); display: block; font-size: .78rem; color: var(--text-leise); margin-bottom: 4px; }
  .spalte-aktionen { text-align: left; }
  .speicherleiste { top: var(--kopfhoehe); }
}

/* ---------- Hilfe ---------- */
.hilfe-abschnitt { margin-top: 22px; max-width: 80ch; }
.hilfe-abschnitt ul { padding-left: 1.2em; margin: 0; }
.hilfe-abschnitt li { margin: 6px 0; }