/* Gemeinsames Stylesheet der Prayerboard-Website (CR-173).
 *
 * Hier steht, was auf ALLEN NEUN Seiten buchstäblich gleich war: Design-Tokens,
 * Reset, Navigation, Footer, Buttons. Vorher lagen diese Regeln als Kopien in
 * jeder Datei — eine Farbänderung hätte neun Stellen gebraucht.
 *
 * Warum nur „auf allen neun" und nicht „auf den meisten": Eine Regel, die nur
 * fünf Seiten haben, würde von hier aus auch in die übrigen vier wirken und
 * dort etwas ändern, das vorher nicht galt (aufgefallen bei `.nav-logo`, das
 * auf fünf Seiten zusätzlich `color` setzt). Lieber vier Kopien mehr als eine
 * Seite, die anders aussieht als vorher.
 *
 * Einbindung: <link rel="stylesheet" href="styles.css"> steht VOR dem inline
 * <style> jeder Seite. Seiten-Eigenheiten (etwa die schmalere .container-Breite
 * von help.html und gemeinde.html) stehen weiterhin dort und gewinnen deshalb
 * bei gleicher Spezifität. Wer hier etwas ändert, ändert es für alle Seiten.
 *
 * Bewusst KEIN Build-Schritt, KEIN npm, KEINE externe Ressource.
 * Konsistenz prüft docs/scripts/web_consistency.py.
 */

/* ── Design-Tokens (dunkel = Standard) ── */
:root {
  --bg        : #0D0D0D;
  --border    : #2A2A2A;
  --gold      : #D4AF37;
  --primary   : #4A90D9;
  --primary-h : #5A9FE8;
  --radius-l  : 12px;
  --radius-m  : 8px;
  --radius-s  : 4px;
  --radius-xl : 16px;
  --success   : #4CAF50;
  --surface   : #1A1A1A;
  --surface2  : #222222;
  --text      : #FFFFFF;
  --text-2    : #AAAAAA;
  --text-3    : #666666;
  color-scheme: dark;
}

[data-theme="light"] {
  --bg        : #F5F5F5;
  --border    : #E0E0E0;
  --surface   : #FFFFFF;
  --surface2  : #F0F0F0;
  --text      : #1A1A1A;
  --text-2    : #555555;
  --text-3    : #999999;
  color-scheme: light;
}

/* ── Reset, Grundgerüst, Navigation, Footer ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-h); }
nav { position: sticky; top: 0; z-index: 100; background: var(--bg); border-bottom: 1px solid var(--border); padding: 16px 0; transition: background 0.25s; }
.nav-logo img { width: 32px; height: 32px; border-radius: var(--radius-m); }
.nav-links { display: flex; align-items: center; gap: 18px; margin-right: 8px; }
.nav-links a { color: var(--text-2); font-size: 0.92rem; font-weight: 600; }
.nav-links a:hover { color: var(--text); }
.nav-links a.active { color: var(--primary); }
.nav-controls { display: flex; align-items: center; gap: 8px; }
.btn-icon { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-m); padding: 7px 10px; color: var(--text-2); cursor: pointer; font-size: 0.85rem; transition: background 0.15s, color 0.15s; }
.btn-icon:hover { background: var(--surface2); color: var(--text); }
.lang-btn { min-width: 38px; text-align: center; font-weight: 600; }
/* CR-168: Auswahl statt Toggle — bei drei Sprachen ist sonst nicht erkennbar,
   was ein Klick tut, und die dritte bliebe unsichtbar. Optik wie .btn-icon. */
.lang-select {
  appearance: none; -webkit-appearance: none;
  background: transparent; color: var(--text-2);
  border: 1px solid var(--border); border-radius: var(--radius-s);
  padding: 6px 8px; font: inherit; font-size: 0.85rem; font-weight: 600;
  line-height: 1; cursor: pointer; text-align: center;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.lang-select:hover { background: var(--surface2); color: var(--text); }
.lang-select:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.lang-select option { background: var(--surface); color: var(--text); }
.footer-links { display: flex; gap: 20px; flex-wrap: wrap; }
footer a { color: var(--text-2); }
footer a:hover { color: var(--text); }

@media (max-width: 520px) {
  .nav-links { gap: 14px; margin-right: 4px; }
  .nav-links a { font-size: 0.88rem; }
  .nav-logo span { display: none; }
}