/*
* Yeshe — Oberfläche.
*
* Gestaltungsgrundsätze, abgeleitet aus dem Konzept:
*
* 1. RUHIG. Die Zielgruppe liest das oft in einem Moment geringer Kapazität.
* Keine Signalfarben, keine Fortschrittsbalken, keine Abzeichen.
* 2. KEINE SERIEN. Es gibt hier bewusst nichts, was einen Streak anzeigen
* könnte — ein gebrochener Streak trifft exakt Shantidevas dritte Faulheit
* (Selbstverachtung) und verstärkt sie. Gezählt wird kumulativ.
* 3. KEINE SCHULD. Keine roten Warnfarben für Ausgelassenes, keine Mahnungen.
*
* Kein Build-Schritt. Wer etwas ändern will, ändert diese Datei.
*/
:root {
/* Warmes Elfenbein statt neutralem Weiß -- Papier, keine Bildschirmfläche,
leicht in Richtung Safran gezogen. */
--papier: #faf6ef;
--tinte: #23211e;
--leise: #6b665f;
--linie: #e6ddd0;
--coach: #f5f0e7;
/* Maroon und Safran: die zwei Farben der Mönchsrobe. Maroon führt als
Hauptakzent (Knöpfe, Fokus, aktive Links), Safran bleibt sparsam --
Kennzeichnung des Coach-Zugs in der Gesprächsbox. Beide gedämpft
statt kräftig: Grundsatz 1 verbietet Signalfarben. */
--akzent: #7a3b34;
--safran: #c9903e;
/* Eigener, dunklerer Ton nur für Knopf-Flächen -- --akzent bleibt
unverändert, weil er auch für Links, Fokusringe und Randakzente steht;
dort macht ein dunklerer Ton den Kontrast zum Fließtext nicht besser. */
--knopf: #5f2e28;
--breite: 46rem;
}
* { box-sizing: border-box; }
/*
* Um 15% vergrößerte Schrift: eine einzelne Zeile statt Dutzender einzelner
* font-size-Angaben, weil praktisch jede Größe im Stylesheet in rem steht --
* sie skaliert mit der Wurzel-Schriftgröße mit, Abstände und Rundungen
* eingeschlossen. Das hält das Verhältnis von Text zu Weißraum, wie es war,
* statt nur die Buchstaben zu vergrößern und alles andere gleich zu lassen.
*/
html { font-size: 115%; }
body {
margin: 0;
background: var(--papier);
color: var(--tinte);
font: 1rem/1.6 ui-serif, Georgia, "Times New Roman", serif;
-webkit-text-size-adjust: 100%;
}
/* Ungestylte Links im Fließtext (z. B. "Hier entlang" auf der Anmeldemaske)
fallen sonst auf Browser-Blau zurück -- Grundsatz 1 verbietet Signalfarben,
und ein grelles Blau neben gedämpftem Maroon und Safran wäre genau das. */
a { color: var(--akzent); }
/* ---------- Kopf ---------- */
.kopf {
display: flex;
/* Vorher baseline -- die Marke saß dadurch an der Textgrundlinie der
Navigationslinks daneben, nicht in der Mitte der Kopfzeile. Mit dem
größeren Schnörkel-Y (siehe .marke) fiel das noch mehr auf. */
align-items: center;
gap: 1.5rem;
max-width: var(--breite);
margin: 0 auto;
padding: 1.5rem 1.25rem 1rem;
border-bottom: 1px solid var(--linie);
}
/*
* "Sacramento", SIL Open Font License -- Datei liegt lokal in public/fonts,
* nicht als zu fonts.googleapis.com. Ein Nachladen von dort schickt
* bei jedem Seitenaufruf die IP jedes Nutzers an Google; für eine Anwendung,
* die sorgsam mit Gesundheitsdaten umgeht, ein unnötiges Leck für einen
* Schriftzug. Selbst gehostet entsteht dieselbe Anfrage nur noch an den
* eigenen Server. Lizenztext liegt neben der Schriftdatei (Pflicht der OFL).
*/
@font-face {
font-family: 'Alex Brush';
src: url('../fonts/AlexBrush-Regular.ttf') format('truetype');
font-weight: 400;
font-style: normal;
font-display: swap;
}
.marke-block { display: flex; flex-direction: column; }
.marke {
font-family: 'Alex Brush', cursive;
/* Kalligraphie-Schriften wirken erst in der Größe -- klein wie zuvor
(1.15rem) wäre sie kaum als Schriftzug, nur als unklare Linie zu lesen. */
font-size: 2.6rem;
line-height: 1;
color: var(--akzent);
text-decoration: none;
}
/* Dieselbe leise, sachliche Schrift wie die Navigation daneben -- der
Untertitel soll erklären, nicht selbst auffallen. */
.untertitel {
margin: 0.15rem 0 0;
font: 0.8rem/1.4 ui-sans-serif, system-ui, sans-serif;
color: var(--leise);
}
/*
* align-items: baseline, nicht das ererbte stretch -- sonst richtet sich der
* -Text nach der Höhe des