/* ═══════════════════════════════════════════════════════════════════════
   Thema "Navy" – Marineblau und Gold.
   
   Wird NACH app.css, additions.css und der Mandantenfarbe geladen und
   ueberschreibt nur Variablen plus einige wenige Bauteile. Nichts wird
   ersetzt: Thema abschalten heisst, diese Datei nicht zu laden, und alles
   sieht wieder aus wie vorher.

   Der Goldton #c9a55d ist nicht gewaehlt, sondern gemessen – es ist der
   mittlere Farbton des Wappens im Logo.

   Alle Farbpaare sind gegen WCAG 2.1 geprueft:
     Text auf Papier      15,6:1     Gold-700 auf Papier    6,0:1
     Gedaempft auf Papier  5,9:1     Weiss auf Navy-900    17,5:1
     Navy-900 auf Papier  16,6:1     Gold-500 auf Navy-900  7,5:1
   Gold-500 ist bewusst NUR Dekoration auf hellem Grund (2,2:1) – niemals
   fuer Text oder bedeutungstragende Flaechen.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Marke ─────────────────────────────────────────────────────────── */
  --navy-900: #0a1a2f;
  --navy-800: #0f2742;
  --navy-700: #173857;
  --navy-600: #24507a;
  --gold-700: #7a5a18;   /* Gold fuer Fliesstext auf hell */
  --gold-600: #8a6620;
  --gold-500: #c9a55d;   /* der Ton aus dem Logo */
  --gold-300: #e3cd9b;
  --gold-100: #f6efdd;

  /* Eigener Ton fuer die gelbe Markierung: heller als --warning, damit er
     sich als kleiner Punkt vom Rot abhebt. 3,06:1 auf Weiss – die WCAG-
     Schwelle fuer grafische Elemente. Fuer Text waere er zu hell. */
  --flag-yellow: #c8860d;

  /* ── Bestehende Variablen umdefinieren ─────────────────────────────── */
  --primary:        #0f2742;
  --primary-dark:   #0a1a2f;
  --primary-light:  #eef2f7;

  /* Bedeutungsfarben: nachgeschaerft, damit sie auf dem waermeren Grund
     die 4,5:1 halten und sich deutlich vom Gold abheben. */
  --success:        #17703c;
  --success-light:  #e7f3ec;
  --danger:         #b3352a;
  --danger-light:   #fbeae8;
  --warning:        #a05406;
  --warning-light:  #fbf0e4;

  --text:        #14202e;
  --text-muted:  #54627a;
  /* 28.09.2026 von #78879d auf #64748a abgedunkelt: der Ton traegt in der
     App 11,5-px-Text und lag bei 3,65:1, also unter WCAG AA. Im Web sitzt
     er nur im Pfeil der Statistikkarte, wo 3:1 genuegt haette – geaendert
     wird er trotzdem hier mit, weil die App die Werte dieser Datei woertlich
     uebernimmt und zwei Wahrheiten schlimmer sind als ein dunklerer Pfeil. */
  --text-light:  #64748a;

  --border:      #e5e2da;
  --border-dark: #cfc9bb;

  --bg:          #ffffff;
  --bg-subtle:   #faf9f6;   /* warmes Papier statt kaltem Grau */
  --bg-card:     #ffffff;

  --gray-50:   #faf9f6;
  --gray-100:  #f2f0ea;
  --gray-200:  #e5e2da;

  --radius-sm:   4px;
  --radius:      6px;       /* ruhiger als die runden 10px */
  --radius-lg:   10px;
  --radius-xl:   14px;

  --shadow-sm:   0 1px 2px rgba(10,26,47,.06);
  --shadow:      0 2px 10px rgba(10,26,47,.08);
  --shadow-lg:   0 12px 32px rgba(10,26,47,.14);

  --font-display: 'Playfair Display', Georgia, serif;
  --transition:  .18s ease;
}

body { background: var(--bg-subtle); }

/* ── Anzeigeschrift: NUR Ueberschriften und Kennzahlen ────────────────
   Fragetexte, Antworten und Erklaerungen bleiben bewusst in der Grotesk.
   Eine Serifenschrift sieht in einer Ueberschrift gut aus und kostet beim
   Lesen von 12.000 Pruefungsfragen Tempo. */
.page-title,
.lcard-name,
.dash-greeting,
.stat-value,
.ov-value,
.ov-mini-val {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -.01em;
}

.page-title { font-size: 30px; color: var(--navy-900); }
.page-subtitle { color: var(--text-muted); }

/* ── Kopfleiste ──────────────────────────────────────────────────────── */
.topnav {
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 0 rgba(10,26,47,.04);
}
.topnav-brand .brand-logo { height: 40px; }
.nav-link { color: var(--text-muted); font-weight: 500; }
.nav-link:hover { color: var(--navy-900); }
.nav-link.active {
  color: var(--navy-900);
  font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--gold-500);
}

/* ── Karten: ruhiger Rahmen statt weicher Schatten ───────────────────── */
.card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.card-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Kennzahlenkarten bekommen einen goldenen Akzent an der Kante. */
.stat-card, .ov-card {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  overflow: hidden;
}
.stat-card::before, .ov-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--gold-500);
}
.stat-value, .ov-value { color: var(--navy-900); }

/* ── Schaltflaechen ──────────────────────────────────────────────────── */
.btn-primary {
  background: var(--navy-900);
  border: 1px solid var(--navy-900);
  color: #fff;
  border-radius: var(--radius);
  font-weight: 600;
  letter-spacing: .01em;
}
.btn-primary:hover:not(:disabled) {
  background: var(--navy-800);
  border-color: var(--gold-500);
}
.btn-secondary {
  background: var(--bg);
  border: 1px solid var(--border-dark);
  color: var(--navy-900);
  border-radius: var(--radius);
}
.btn-secondary:hover { border-color: var(--navy-600); background: var(--gray-50); }

/* ── Formulare ───────────────────────────────────────────────────────── */
.form-input, .form-select, .form-textarea {
  border: 1px solid var(--border-dark);
  border-radius: var(--radius);
  background: var(--bg);
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color: var(--navy-600);
  box-shadow: 0 0 0 3px rgba(36,80,122,.12);
  outline: none;
}
.form-label { color: var(--navy-900); font-weight: 600; }

/* ── Tabellen ────────────────────────────────────────────────────────── */
.data-table thead th {
  background: var(--gray-50);
  border-bottom: 1px solid var(--border-dark);
  font-size: 11px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.data-table tbody tr:hover { background: var(--gold-100); }

/* ── Fortschrittsbalken ──────────────────────────────────────────────── */
.subject-progress-fill, .ov-prog-fill { border-radius: 999px; }

/* ── Dunkle Flaechen (Login, Dashboard-Seitenkarte) ──────────────────── */
.login-panel-right, .dash-side {
  background: linear-gradient(160deg, var(--navy-800) 0%, var(--navy-900) 100%);
}

/* ═══════════════════════════════════════════════════════════════════════
   Lesbarkeit im Trainer
   
   Hier wird der Katalog gelesen – 12.000 Fragen, im Schnitt 147 Zeichen,
   2.632 davon ueber 400. Das ist die eine Stelle, an der Typografie keine
   Geschmacksfrage ist.

   Bewusst KEINE Serifenschrift: sie gehoert in Ueberschriften, nicht in
   Pruefungsfragen.
   ═══════════════════════════════════════════════════════════════════════ */

.question-text {
  font-size: 17.5px;
  line-height: 1.72;
  font-weight: 450;
  color: var(--text);
  /* 68 Zeichen je Zeile. Ohne Begrenzung laufen die Zeilen auf breiten
     Bildschirmen ueber 120 Zeichen – dann verliert das Auge den Zeilenanfang. */
  max-width: 68ch;
}

/* Antworten standen in 14px, also KLEINER als die Frage – obwohl man sie
   genauso liest und oft mehrfach vergleicht. */
.answer-btn {
  font-size: 15.5px;
  line-height: 1.6;
  padding: 15px 18px;
  border-width: 1px;
  border-radius: var(--radius);
}
.answer-btn:hover:not([disabled]) {
  border-color: var(--navy-600);
  background: var(--gray-50);
}
.answer-text { max-width: 72ch; }
.answer-letter {
  border-radius: var(--radius-sm);   /* eckig statt rund: ruhiger */
  font-family: var(--font-mono);
  background: var(--gray-50);
  border-color: var(--border-dark);
}

/* Richtig und falsch bleiben farbig UND bekommen eine kraeftigere Kante –
   Farbe allein reicht bei einer Rotgruenschwaeche nicht. */
.answer-btn.correct { border-left: 4px solid var(--success) !important; }
.answer-btn.wrong   { border-left: 4px solid var(--danger)  !important; }

.explanation-text, .explanation-inline .explanation-text {
  font-size: 15.5px;
  line-height: 1.7;
  max-width: 72ch;
}
.explanation-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gold-700);
}

/* Fragennummer und Fach im Kopf der Frage */
.q-no { font-family: var(--font-mono); color: var(--gold-700); }

/* Die Karte selbst: ruhiger Rahmen, goldene Oberkante als Markenakzent */
.question-card {
  border-radius: var(--radius);
  border-top: 2px solid var(--gold-500);
}

/* ═══════════════════════════════════════════════════════════════════════
   Strichsymbole statt Emoji

   Emoji werden vom Betriebssystem gezeichnet: auf Windows, macOS und Android
   sehen sie verschieden aus, sie tragen eigene Farben und lassen sich nicht
   an die Marke anpassen. Die SVG hier nehmen ueber currentColor die Textfarbe
   an und folgen damit dem Thema.
   ═══════════════════════════════════════════════════════════════════════ */

.ico {
  flex-shrink: 0;
  vertical-align: -.2em;
  opacity: .78;
}
.nav-link, .dropdown-item, .user-btn {
  display: flex;
  align-items: center;
  gap: 9px;
}
.nav-link.active .ico,
.dropdown-item:hover .ico { opacity: 1; color: var(--gold-600); }
.dropdown-item { color: var(--text); }
.dropdown-item:hover { background: var(--gold-100); color: var(--navy-900); }
.nav-dropdown-menu {
  border-radius: var(--radius);
  border-color: var(--border);
  padding: 5px 0;
}
.dropdown-divider { background: var(--border); }

/* ═══════════════════════════════════════════════════════════════════════
   Kennzahlkacheln und Seitenkarte
   ═══════════════════════════════════════════════════════════════════════ */

/* Die Kacheln sind jetzt Verweise in den Trainer. Der Pfeil sagt das,
   ohne dass man es erraten muss. */
a.stat-card {
  display: block;
  position: relative;
  text-decoration: none;
  color: inherit;
  padding-right: 42px;
  transition: border-color var(--transition), transform var(--transition);
}
a.stat-card:hover {
  border-color: var(--gold-500);
  transform: translateY(-1px);
}
.stat-go {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--text-light);
  transition: all var(--transition);
}
a.stat-card:hover .stat-go {
  border-color: var(--gold-500);
  color: var(--gold-700);
  background: var(--gold-100);
}
.stat-icon {
  color: var(--gold-700);
  background: var(--gold-100);
  width: 40px; height: 40px;
  border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 10px;
}
.stat-icon .ico { opacity: 1; }
.stat-label {
  font-size: 12px;
  color: var(--text-muted);
  letter-spacing: .01em;
}

/* Seitenkarte im Diagramm: dunkel mit goldener Kante zum Diagramm hin. */
.dash-side {
  background: linear-gradient(160deg, var(--navy-800) 0%, var(--navy-900) 100%) !important;
  border-right: 2px solid var(--gold-500);
}
.dash-side > div > div:last-child { font-family: var(--font-display); }

/* ── Ampel-Markierungen ───────────────────────────────────────────────
   Die Farbe steht am Knopf, das Symbol zeichnet mit currentColor. Ohne die
   volle Deckkraft hier wuerde die allgemeine .ico-Regel (opacity .78) die
   Punkte blass und schwerer unterscheidbar machen. */
.flag-btn .ico { opacity: 1; }
.flag-btn {
  border-color: var(--border-dark);
  background: var(--bg);
}
.flag-btn:hover { border-color: currentColor; background: var(--gray-50); }
.flag-btn.active { border-color: currentColor; background: var(--gray-50); }