/* ==========================================================================
   SpellTo — Screen-spezifisches (Home, Hilfe, Einstellungen, Lernkarten, Platzhalter)
   ========================================================================== */
/* min-height:0 lässt Fit-Screens (Tafel/Üben/Assistenz) den Tafel-Bereich schrumpfen,
   sodass immer alles sichtbar bleibt; lange Inhalts-Seiten scrollen weiterhin normal. */
#app-content { display: flex; flex-direction: column; min-height: 0; overflow-y: auto; }

/* ── Home ── */
.home-hero { padding: var(--space-6) var(--space-4) var(--space-2); }
.home-hero__title { font-family: var(--font-headline); font-size: var(--text-4xl); letter-spacing: -0.01em; }
.home-hero__title span { color: var(--color-primary); }
.home-hero__sub { color: var(--color-text-muted); font-size: var(--text-lg); margin-top: var(--space-2); max-width: 680px; }

.module-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-4); padding: var(--space-4); }
.module-card {
  display: flex; flex-direction: column; gap: var(--space-2);
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-xl);
  padding: var(--space-5); box-shadow: var(--shadow-sm); text-align: left;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}
.module-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--color-border-strong); }
.module-card__icon { width: 56px; height: 56px; border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; color: #fff; }
.module-card__icon svg { width: 30px; height: 30px; }
.module-card__title { font-family: var(--font-headline); font-size: var(--text-xl); font-weight: var(--font-bold); }
.module-card__desc { color: var(--color-text-muted); font-size: var(--text-sm); line-height: var(--leading-normal); flex: 1; }
.module-card__cta { color: var(--color-primary); font-weight: var(--font-bold); font-size: var(--text-sm); display: inline-flex; align-items: center; gap: 4px; }

/* ── Generischer Inhalt / Lernkarten ── */
.prose { max-width: 760px; }
.prose p { margin-bottom: var(--space-3); line-height: var(--leading-loose); }
.prose h2 { margin: var(--space-6) 0 var(--space-2); }
.prose h3 { margin: var(--space-5) 0 var(--space-2); }
.prose ul { margin: 0 0 var(--space-3) var(--space-5); list-style: disc; }
.prose ul li { margin-bottom: var(--space-2); color: var(--color-text-secondary); }

.lesson-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-4); }
.lesson-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-4); box-shadow: var(--shadow-sm); text-align: left; display: flex; flex-direction: column; gap: var(--space-2); }
.lesson-card:hover { box-shadow: var(--shadow-md); }
.lesson-card__tag { font-size: var(--text-xs); font-weight: var(--font-bold); color: var(--color-primary-dark); text-transform: uppercase; letter-spacing: .05em; }

/* ── Einstellungen / Formular ── */
.form-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); }
.form-row__label { font-weight: var(--font-medium); }
.form-row__hint { font-size: var(--text-xs); color: var(--color-text-muted); }
.select, .form-row select, .text-input {
  font: inherit; padding: var(--space-2) var(--space-3); border: 2px solid var(--color-border);
  border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-text); min-height: 44px;
}
.switch { width: 56px; height: 32px; border-radius: var(--radius-full); background: var(--color-border-strong); position: relative; transition: background var(--transition-fast); flex: none; }
.switch[aria-checked="true"] { background: var(--color-success); }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: #fff; transition: transform var(--transition-fast); }
.switch[aria-checked="true"]::after { transform: translateX(24px); }
/* a11y (WCAG 2.5.5): unsichtbare, ≥44px hohe Trefferfläche um den optisch kleinen
   Schalter — vergrößert das Ziel für Touch/Dwell, ohne das Design zu verändern. */
.switch::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100%; min-width: 56px; height: 44px; }
/* Schalter-Zustand zusätzlich über die Knopf-Position (links/rechts) erkennbar →
   nicht allein über Farbe (WCAG 1.4.1). AUS = grau links, AN = grün rechts. */
:root[data-theme="kontrast"] .switch { background: #555; border: 2px solid #fff; }
:root[data-theme="kontrast"] .switch[aria-checked="true"] { background: var(--color-success); }

/* ── Platzhalter (Module in Arbeit) ── */
.placeholder { text-align: center; padding: var(--space-12) var(--space-4); max-width: 560px; margin: auto; }
.placeholder__icon { width: 84px; height: 84px; margin: 0 auto var(--space-4); border-radius: var(--radius-xl); background: var(--color-primary-bg); color: var(--color-primary); display: flex; align-items: center; justify-content: center; }
.placeholder__icon svg { width: 44px; height: 44px; }
.placeholder h2 { margin-bottom: var(--space-2); }
.placeholder p { color: var(--color-text-muted); margin-bottom: var(--space-5); }

/* ── Metrik-Chips ── */
.metrics { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.metric { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-3) var(--space-4); min-width: 110px; }
.metric__num { font-family: var(--font-headline); font-size: var(--text-2xl); font-weight: var(--font-bold); color: var(--color-primary); }
.metric__label { font-size: var(--text-xs); color: var(--color-text-muted); }

/* ── Toolbar (Module) ── */
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-bottom: var(--space-4); }
.toolbar .btn { flex: none; }
.toolbar__spacer { flex: 1; }

/* ── Statusleiste/Nav auf schmalen Geräten kompakter (Touch-tauglich) ── */
@media (max-width: 600px) {
  .statusbar__btn-label { display: none; }   /* nur Icons: Vorlesen/Kontrast/Hilfe/Einstellungen */
  .toolbar { margin-bottom: var(--space-2); }
}
@media (max-width: 380px) {
  .statusbar__brand span:not(.statusbar__brand-logo) { display: none; }   /* nur das „S"-Logo */
}

/* ── Flaggen-Sprachwähler (Overlay) ── */
.lp-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 9500; display: flex; align-items: center; justify-content: center; padding: var(--space-4); }
.lp-panel { background: var(--color-surface); border-radius: var(--radius-xl); box-shadow: var(--shadow-xl); width: min(760px, 100%); max-height: 85vh; display: flex; flex-direction: column; overflow: hidden; }
.lp-head { display: flex; align-items: center; justify-content: space-between; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border); font-family: var(--font-headline); font-weight: var(--font-bold); font-size: var(--text-lg); }
.lp-close { width: 44px; height: 44px; border-radius: var(--radius-md); border: 1px solid var(--color-border); background: var(--color-surface-alt); color: var(--color-text); font-size: 18px; }
.lp-close:hover { border-color: var(--color-primary); color: var(--color-primary); }
.lp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--space-2); padding: var(--space-3); overflow-y: auto; }
.lp-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; min-height: 48px; border: 2px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-text); text-align: left; }
.lp-item:hover { border-color: var(--color-primary); box-shadow: var(--shadow-sm); }
.lp-item.is-current { border-color: var(--color-primary); background: var(--color-primary-bg); font-weight: var(--font-bold); }
.lp-flag { width: 28px; height: 20px; border-radius: 3px; flex: none; box-shadow: 0 0 0 1px rgba(0,0,0,.12); object-fit: cover; }
.lp-name { font-size: var(--text-base); }