/* ==========================================================================
   GLAGGLE LEARN — ZENTRALES THEME
   Eine Datei für Farben, Fonts, Spacing. Änderst du hier etwas,
   ändert es sich automatisch auf JEDER Seite, die diese Datei einbindet.
   ========================================================================== */

:root {
  /* Grundfarben (Light Mode) */
  --gl-bg: #f4f6f8;
  --gl-surface: #ffffff;
  --gl-text: #2b2f33;
  --gl-text-soft: #6b7280;
  --gl-border: #e5e7eb;

  --gl-primary: #a4d65e;         /* Hauptfarbe (z.B. der grüne "Weiter"-Button) */
  --gl-primary-shadow: #6ea832;  /* dunklerer Ton für den 3D-Rand darunter */
  --gl-primary-hover: #b3e070;   /* Farbe beim Drüberfahren mit der Maus */

  --gl-secondary: #70c4f7;       /* zweite Akzentfarbe (z.B. "Zurück"-Button) */
  --gl-secondary-shadow: #2e94d1;
  --gl-secondary-hover: #8ed0f9;

  --gl-danger: #f76c6c;          /* für "Abbrechen"/Fehler */
  --gl-danger-shadow: #c94848;

  --gl-text-on-accent: #1f2a12;

  /* Radius & Abstände — für konsistente Rundungen überall */
  --gl-radius-sm: 10px;
  --gl-radius-md: 16px;
  --gl-radius-lg: 24px;

  --gl-space-1: 8px;
  --gl-space-2: 16px;
  --gl-space-3: 24px;
  --gl-space-4: 32px;

  /* Schrift */
  --gl-font: 'Arial Rounded MT Bold', 'Segoe UI', Roboto, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --gl-bg: #202124;
    --gl-surface: #2b2d31;
    --gl-text: #e8eaed;
    --gl-text-soft: #a1a5aa;
    --gl-border: #3c3f44;

    --gl-primary: #a4d65e;
    --gl-primary-shadow: #6ea832;
    --gl-primary-hover: #b3e070;

    --gl-secondary: #70c4f7;
    --gl-secondary-shadow: #2e94d1;
    --gl-secondary-hover: #8ed0f9;
  }
}

* { box-sizing: border-box; }

body {
  font-family: var(--gl-font);
  background: var(--gl-bg);
  color: var(--gl-text);
  margin: 0;
}

/* ==========================================================================
   LEKTION-STYLES — von lesson-engine.js verwendet.
   Zentral hier definiert, damit jede Lektion automatisch gleich aussieht.
   ========================================================================== */

.gl-step h2 {
  font-size: 1.3rem;
  margin-bottom: var(--gl-space-3);
  line-height: 1.4;
}

.gl-step-text {
  color: var(--gl-text-soft);
  line-height: 1.6;
  margin-bottom: var(--gl-space-3);
}

.gl-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: var(--gl-space-2);
}

.gl-option {
  font-family: var(--gl-font);
  text-align: left;
  padding: 16px 20px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--gl-text);
  background: var(--gl-surface);
  border: 2px solid var(--gl-border);
  border-radius: var(--gl-radius-md);
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.08s ease, background 0.15s ease;
}

.gl-option:hover {
  border-color: var(--gl-secondary);
  transform: translateY(-1px);
}

.gl-option.gl-selected {
  border-color: var(--gl-secondary);
  background: color-mix(in srgb, var(--gl-secondary) 18%, var(--gl-surface));
}

.gl-option.gl-correct {
  border-color: var(--gl-primary-shadow);
  background: color-mix(in srgb, var(--gl-primary) 25%, var(--gl-surface));
}

.gl-option.gl-wrong {
  border-color: var(--gl-danger-shadow);
  background: color-mix(in srgb, var(--gl-danger) 25%, var(--gl-surface));
}

/* ==========================================================================
   LEKTION-SEITEN-LAYOUT — zentral hier, damit auf der Lektionsseite selbst
   kein <style>-Block mehr nötig ist. Responsive: wächst mit dem Bildschirm,
   bleibt aber auf grossen Screens (Mac etc.) angenehm lesbar begrenzt.
   ========================================================================== */

.lesson-wrap {
  width: 100%;
  max-width: 640px;      /* auf grossen Screens: nicht zu breit für Lesbarkeit */
  margin: 0 auto;
  padding: clamp(16px, 4vw, 40px) clamp(16px, 5vw, 32px) 60px;
  box-sizing: border-box;
}

.lesson-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: var(--gl-space-3);
}

.lesson-header a {
  color: var(--gl-text-soft);
  text-decoration: none;
  font-size: 1.4rem;
  line-height: 1;
  flex-shrink: 0;
}

.lesson-header glaggle-progress {
  flex: 1;
}

/* Auf sehr grossen Screens darf der Lektions-Text etwas grösser werden */
@media (min-width: 1024px) {
  .gl-step h2 { font-size: 1.5rem; }
  .gl-option, .gl-input { font-size: 1.05rem; }
}

.gl-input {
  width: 100%;
  padding: 14px 16px;
  font-size: 1rem;
  font-family: var(--gl-font);
  color: var(--gl-text);
  background: var(--gl-surface);
  border: 2px solid var(--gl-border);
  border-radius: var(--gl-radius-md);
  outline: none;
  margin-bottom: var(--gl-space-2);
  box-sizing: border-box;
}

.gl-input:focus {
  border-color: var(--gl-secondary);
}

.gl-feedback {
  min-height: 24px;
  font-weight: 700;
  margin-bottom: var(--gl-space-2);
}

.gl-feedback-ok { color: var(--gl-primary-shadow); }
.gl-feedback-bad { color: var(--gl-danger-shadow); }

/* glaggle-button Komponenten in der Lektion brauchen etwas Abstand zueinander */
.gl-step glaggle-button {
  display: block;
  margin-bottom: 12px;
}