/* ═══════════════════════════════════════════════════════════════════════
   BRANDING — die einzige Datei, die ein Markenwechsel berührt.

   Hier stehen Farben, Schriften, Rundungen und die Marke selbst. `layout.css`
   benutzt ausschließlich die Variablen von hier und kennt keine einzige
   Farbe im Klartext. Wer die Marke ändert, ändert diese Datei; das Layout
   bleibt, wie es ist.

   Die Werte stammen aus `src/app/design-tokens.css` des Projekts — sie sind
   nicht für diese Seite erfunden, sondern die, die die Anwendung schon
   benutzt. Wer sie hier ändert, sollte sie dort mitändern, sonst sehen
   Vorab-Seite und Anwendung verschieden aus.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Die Palette ─────────────────────────────────────────────────────── */
  --marke-elfenbein: #f7f3eb;
  --marke-papier:    #fffdf8;
  --marke-sand:      #e9dfcf;
  --marke-blau:      #18354b;
  --marke-blau-hell: #234d69;
  --marke-gold:      #b08a4a;
  --marke-olive:     #7d8363;
  --marke-tinte:     #172027;
  --marke-gedaempft: #687078;
  --marke-linie:     #ddd5c8;

  /* ── Wofür die Palette benutzt wird ──────────────────────────────────
     Diese Ebene ist der Grund, warum ein Markenwechsel billig ist: das
     Layout fragt nach `--grund` und `--akzent`, nicht nach „Elfenbein". */
  --grund:          var(--marke-elfenbein);
  --grund-erhaben:  var(--marke-papier);
  --grund-dunkel:   var(--marke-blau);
  --schrift:        var(--marke-tinte);
  --schrift-leise:  var(--marke-gedaempft);
  --schrift-auf-dunkel: #ffffff;
  --schrift-leise-auf-dunkel: #c5ced3;
  --akzent:         var(--marke-blau);
  --akzent-hell:    var(--marke-blau-hell);
  --zierde:         var(--marke-gold);
  --linie:          var(--marke-linie);

  /* ── Schrift ─────────────────────────────────────────────────────────
     Beide Familien decken Latein, Kyrillisch UND Griechisch ab,
     einschließlich Tonos und Endsigma. Das ist keine Geschmacksfrage: die
     Oberfläche ist dreisprachig (ADR-021), und eine Schrift ohne
     Kyrillisch fällt still auf eine Ersatzschrift zurück. Wer die Schrift
     wechselt, prüft zuerst die Zeichenabdeckung — `docs/RISKS.md` R-010. */
  --schrift-titel: 'EB Garamond', ui-serif, Georgia, serif;
  --schrift-text:  'Source Sans 3', ui-sans-serif, system-ui, sans-serif;

  --titel-gewicht: 600;
  --augenbraue-sperrung: .16em;

  /* ── Form ────────────────────────────────────────────────────────────── */
  --rundung:        7px;
  --rundung-gross:  10px;
  --rundung-marke:  50%;     /* die Marke ist ein Kreis; 6px macht ein Quadrat */
  --schatten:       0 14px 40px #18354b12;
  --kopf-hoehe:     78px;

  color-scheme: light;
}

/* ── Dunkles Thema ──────────────────────────────────────────────────────
   NICHT beschlossen. Das Projekt hat kein dunkles Thema festgelegt; dies ist
   aus derselben Palette abgeleitet, damit die Seite auf einem dunkel
   eingestellten Gerät nicht blendet. Ein Markenwechsel darf diesen Block
   ersatzlos streichen — dann bleibt die Seite hell. */
@media (prefers-color-scheme: dark) {
  :root:not([data-thema="hell"]) {
    --grund:         #12201c;
    --grund-erhaben: #19282a;
    --grund-dunkel:  #0e1d28;
    --schrift:       #f2efe6;
    --schrift-leise: #9aa39f;
    --akzent:        #8fb4cf;
    --akzent-hell:   #a8c6dc;
    --zierde:        #d6bd8a;
    --linie:         #2b3a3a;
    color-scheme: dark;
  }
}
:root[data-thema="dunkel"] {
  --grund:         #12201c;
  --grund-erhaben: #19282a;
  --grund-dunkel:  #0e1d28;
  --schrift:       #f2efe6;
  --schrift-leise: #9aa39f;
  --akzent:        #8fb4cf;
  --akzent-hell:   #a8c6dc;
  --zierde:        #d6bd8a;
  --linie:         #2b3a3a;
  color-scheme: dark;
}

/* ── Die Marke selbst ───────────────────────────────────────────────────
   Das Zeichen ist ein Kreis mit zwei Buchstaben. Wird die Marke ein Bild,
   wird `.marke-zeichen` ein `<img>` und diese Regeln verschwinden. */
.marke-zeichen {
  width: 34px; height: 34px;
  border: 1px solid var(--akzent);
  border-radius: var(--rundung-marke);
  display: grid; place-items: center;
  color: var(--akzent);
  font: 600 10px var(--schrift-text);
  letter-spacing: .04em;
  flex: 0 0 auto;
}
.marke-name {
  font-family: var(--schrift-titel);
  font-size: 17px;
  line-height: .95;
  color: var(--schrift);
}
.marke-name span { display: block; }

/* ── Knöpfe: ihre Form gehört zur Marke, ihre Anordnung zum Layout ────── */
.knopf {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px;
  padding: 11px 20px;
  border: 1px solid transparent;
  border-radius: var(--rundung);
  font: inherit; font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}
.knopf-haupt   { background: var(--akzent); color: var(--schrift-auf-dunkel); }
.knopf-haupt:hover { background: var(--akzent-hell); }
.knopf-rand    { background: none; border-color: var(--akzent); color: var(--akzent); }
.knopf-rand:hover { background: color-mix(in srgb, var(--akzent) 8%, transparent); }
.knopf-leise   { background: var(--grund-erhaben); border-color: var(--linie); color: var(--schrift); }

/* ── Die Augenbraue über einer Überschrift ───────────────────────────── */
.augenbraue {
  margin: 0 0 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: var(--augenbraue-sperrung);
  text-transform: uppercase;
  color: var(--zierde);
}