/* Headletic Tokens: 1:1 aus headletic-core/assets/hl-app.css (Zeilen 58 bis 312, core 0.103.x). Nicht hier ändern, sondern in der App und neu kopieren. */
@font-face {
	font-family: "Headletic Sans";
	src: url("fonts/inter-variable.woff2") format("woff2-variations");
	font-weight: 100 900;
	font-display: swap;
}
@font-face {
	font-family: "Headletic Serif";
	src: url("fonts/newsreader-variable.woff2") format("woff2-variations");
	font-weight: 300 700;
	font-display: swap;
}

/* ---------------------------------------------------------------------------
 * Token – Dark Mode ist der Standardfall
 * ------------------------------------------------------------------------- */
:root {
	/* Flaechen */
	--hl-grund: #12100F;          /* warmes Fast-Schwarz, nie blaustichig */

	/*
	 * DIE FLAECHE IST AM 20. SEPTEMBER 2026 UM EINE STUFE HELLER GEWORDEN.
	 *
	 * Vorher #1C1917. Der Abstand zum Grund betrug damit 4,20 in L* - das
	 * traegt am Schreibtisch und verschwindet draussen bei Sonne oder auf
	 * einem heruntergedimmten Bildschirm. Da die Karten sich laut Design
	 * Guide ueber die FLAECHE trennen und nicht ueber Kanten, ist dieser
	 * Wert die einzige Stelle, an der sich das beheben laesst.
	 *
	 * Jetzt 5,79 in L*, die Hoch-Flaeche (Hover) entsprechend nach, damit
	 * der Hover-Schritt sichtbar bleibt (2,53 statt 2,58 in L*).
	 *
	 * NACHGERECHNET, NICHT GESCHAETZT: Text leise steht auf der neuen
	 * Flaeche bei 6,10:1, der Goldstrich im Symbolkreis bei 5,26:1 gegen
	 * den hellen Stopp seines Verlaufs. Beides ueber 4,5:1.
	 */
	--hl-flaeche: #201C19;
	--hl-flaeche-hoch: #252120;
	--hl-haarlinie: rgba(245, 241, 234, .10);

	/*
	 * DER RAND EINES EINGABEFELDES IST KEINE HAARLINIE (21. September 2026).
	 *
	 * Gemessen: Die Feldflaeche ist --hl-flaeche, und die Karte, in der das
	 * Feld steht, ist ebenfalls --hl-flaeche. Das sind dieselben Pixel,
	 * 1,00:1. Der einzige Unterschied war die Haarlinie mit 1,31:1 gegen die
	 * Feldflaeche. WCAG 1.4.11 verlangt fuer die Umrandung eines
	 * Bedienelements 3:1; ein leeres Textfeld war damit vor der ersten
	 * Eingabe schlicht unsichtbar.
	 *
	 * WARUM NICHT EINE MULDE: Ein Feld, das dunkler ist als die Karte, kommt
	 * auf 1,05 bis 1,12:1 - unterhalb von --hl-flaeche ist im Dunkelmodus
	 * kein Platz mehr fuer 3:1. Es geht nur ueber den Rand.
	 *
	 * 35 Prozent ergeben #6B6762 auf der Feldflaeche, also 3,01:1. Das ist
	 * sichtbarer als alles andere in dieser Datei, und genau deshalb steht es
	 * in einem eigenen Merkmal: Es gehoert an Eingabefelder und an nichts
	 * sonst. Der Leitfaden verbietet Rahmen als Standardmittel; beim Feld ist
	 * der Rahmen nicht Schmuck, sondern die Aufforderung selbst.
	 */
	--hl-feldrand: rgba(245, 241, 234, .35);

	/*
	 * DIE LEISTE AM UNTEREN RAND (21. September 2026).
	 *
	 * --hl-tabs-hoehe ist ihre reine Kachelhoehe ohne den Sicherheitsabstand
	 * des Geraets. --hl-unterkante ist das, was am unteren Bildschirmrand
	 * belegt ist: null ohne Leiste, die Leistenhoehe mit. Der Freiraum der
	 * Seite rechnet damit. Es hing bis zum 21. September auch die
	 * Journal-Schaltflaeche daran; die ist entfallen, das Merkmal bleibt -
	 * was immer spaeter unten sitzt, soll diese eine Zahl lesen und keine
	 * eigene erfinden.
	 */
	--hl-tabs-hoehe: 3.75rem;
	--hl-unterkante: 0px;

	/* Typografie */
	--hl-text: #F5F1EA;           /* 16,85:1 gegen Grund */
	--hl-text-leise: #A39A8E;     /* 6,84:1 gegen Grund, 6,10:1 gegen Flaeche */

	/* Signaturfarbe – die einzige Systemfarbe */
	--hl-gold: #E9A23B;           /* 8,76:1 gegen Grund */
	--hl-gold-hell: #D68F28;      /* abgedunkelt, fuer Flaechen im Light Mode */
	--hl-gold-ink: #1A1206;       /* 8,56:1 auf Goldflaeche */
	--hl-gold-text: var(--hl-gold);
	--hl-gold-schein: 0 0 44px -6px rgba(233, 162, 59, .55);
	--hl-gold-tint: rgba(233, 162, 59, .10);

	/* Sicherheitsebene: neutral, keine eigene Farbfamilie mehr.
	   Erkennbar ueber Position und Wortwahl, nicht ueber Farbe. */
	--hl-safety: var(--hl-text-leise);
	--hl-safety-flaeche: rgba(245, 241, 234, .05);

	/* Weggefaehrten – BILDFARBEN, NIE TEXTFARBEN (Guide 2.4) */
	--hl-mattis: #3E7A70;   /* 3,82:1 – unter 4,5, nur Flaeche */
	--hl-sven:    #D98341;
	--hl-bettina:    #C99AA0;
	--hl-derya:  #B4573F;   /* 3,95:1 – unter 4,5, nur Flaeche */
	--hl-jana:  #C2A054;
	--hl-tobias:   #E0BC5C;
	--hl-anke:   #8B7BA0;

	/* Licht */
	--hl-glow: .16;

	/*
	 * BLATTMISCHUNG. Wohin die Figurfarbe gemischt wird, damit ein kleines
	 * Blatt vom Grund abhebt. Im Dunkeln zur Textfarbe hin, im Hellen zur
	 * Tinte - dieselbe Farbe in beide Richtungen aufzuhellen waere im
	 * Hellmodus genau die falsche Richtung.
	 */
	--hl-blatt-mischung: #F5F1EA;
	--hl-blatt-anteil: 72%;
	/* Baum (seit 0.91.0 warmes Holz im Illustrationsstil, Ronnys Vorlage
	   vom 6. Oktober 2026): Flaeche, Lichtkante, Schattenseite, Umriss. */
	--hl-holz: #A27552;
	--hl-holz-licht: #D2A47B;
	--hl-holz-schatten: #7E5639;
	--hl-holz-umriss: #2B1E16;
	--hl-baumboden: rgba(0, 0, 0, .42);
	--hl-baum-glow: 55%;
	--hl-baum-glanz: .42;
	--hl-grain: .032;
	--hl-motiv: .30;

	/* Schrift */
	--hl-sans: "Headletic Sans", -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", Roboto, system-ui, sans-serif;
	--hl-serif: "Headletic Serif", Charter, "Iowan Old Style", Georgia, serif;

	/* Typoskala – rem-basiert, damit Dynamic Type bis 200 % traegt */
	--hl-t-moment: 2.25rem;
	--hl-t-gross: 1.75rem;
	--hl-t-titel: 1.375rem;
	--hl-t-basis: 1.0625rem;
	--hl-t-klein: 0.9375rem;
	--hl-t-eyebrow: 0.6875rem;

	/* Abstandsskala */
	--hl-s1: .25rem;
	--hl-s2: .5rem;
	--hl-s3: .75rem;
	--hl-s4: 1rem;
	--hl-s5: 1.5rem;
	--hl-s6: 2rem;
	--hl-s7: 3rem;

	--hl-radius: 16px;        /* Tuer B, Knoepfe */
	--hl-radius-eng: 8px;     /* Tuer A, Chips */
	--hl-breite: 32rem;

	--hl-zeit: 150ms;
	--hl-kurve: ease-out;

	color-scheme: dark;
}

/* ---------------------------------------------------------------------------
 * Light Mode – gleichwertig, nicht nachrangig
 *
 * Rund ein Drittel der Nutzer bleibt bewusst im hellen Modus, und bei Katarakt
 * oder Astigmatismus ist er die verlaesslichere Wahl.
 *
 * Gold liegt gegen Off-White nur bei 2,03:1. Deshalb ist Gold hier
 * ausschliesslich Flaeche; klickbarer Text nutzt --hl-gold-text.
 * ------------------------------------------------------------------------- */
:root[data-theme="hell"] {
	/*
	 * Der Grund ist bewusst tiefer als das Papierweiss der Karten.
	 *
	 * Erste Fassung hatte #FAF7F2 gegen #FFFFFF - rund 1,03:1. Auf dem Schirm
	 * war das keine Karte mehr, sondern ein Fleck. Im Dunkelmodus traegt die
	 * Flaeche allein, weil dort jeder Helligkeitssprung sofort sichtbar ist;
	 * im Hellmodus stimmt das nicht, und deshalb bekommt die Karte hier
	 * zusaetzlich eine Haarlinie (siehe .hl-karte weiter unten).
	 */
	--hl-grund: #F1EDE5;
	--hl-flaeche: #FFFFFF;
	--hl-flaeche-hoch: #FFFFFF;
	--hl-haarlinie: rgba(26, 18, 6, .12);
	/* Feld ist hier weiss; 45 % ergeben #98948F und damit 3,01:1. Siehe oben. */
	--hl-feldrand: rgba(26, 18, 6, .45);

	--hl-text: #1A1614;          /* ~15,9:1 */
	--hl-text-leise: #6B625A;    /* ~5,9:1 */

	--hl-gold-text: #8A5A10;     /* ~5,6:1 – nur hier weicht Text von Flaeche ab */
	--hl-gold-schein: none;
	--hl-gold-tint: rgba(138, 90, 16, .07);

	/*
	 * DUNKLER ALS --hl-text-leise, UND DAS HAT EINEN GEMESSENEN GRUND.
	 *
	 * .hl-hinweis traegt den Sicherheitshinweis in 15 px, Schwelle also
	 * 4,5:1. #6B625A kam auf blankem Grund auf 5,11:1 und auf der
	 * Hinweisflaeche auf 4,71:1 - beides bestanden. Liegt der Kasten aber in
	 * der warmen Lichtecke oben rechts (--hl-licht-hell, 9 % Gold), ueber-
	 * lagern sich zwei Abtoenungen und es bleiben 4,47:1. Durchgefallen, um
	 * drei Hundertstel, an genau der Stelle, an der der Hinweis auf der
	 * Startseite steht.
	 *
	 * #5F574F ergibt dort 5,31:1 und auf blankem Grund 6,07:1. Der
	 * Unterschied ist mit blossem Auge kaum zu sehen; die Regel gilt dafuer
	 * ueberall und nicht nur dort, wo gerade kein Licht liegt.
	 */
	--hl-safety: #5F574F;
	--hl-safety-flaeche: rgba(26, 18, 6, .04);

	--hl-glow: 0;                /* im Light Mode gibt es keine Glows */
	--hl-licht-hell: 9%;         /* stattdessen eine warme Toenung in der Ecke */
	--hl-blatt-mischung: #1A1614;
	--hl-blatt-anteil: 78%;     /* seit 0.91.0: Blaetter mit Rand, daher heller als die 55 % davor */
	--hl-holz: #9A6C4A;
	--hl-holz-licht: #D6A67C;
	--hl-holz-schatten: #77502F;
	--hl-holz-umriss: #553A27;
	--hl-baumboden: rgba(60, 40, 25, .14);
	--hl-baum-glow: 0%;          /* keine Glows im Light Mode */
	--hl-baum-glanz: .2;         /* nur ein leiser Hof */
	--hl-grain: .02;
	--hl-motiv: .22;   /* im Hellen liegt Gold naeher am Text, deshalb leiser */

	color-scheme: light;
}

/* Ohne Javascript und ohne gespeicherte Wahl: Systemeinstellung. */
@media (prefers-color-scheme: light) {
	:root:not([data-theme]) {
		--hl-grund: #F1EDE5;
		--hl-flaeche: #FFFFFF;
		--hl-flaeche-hoch: #FFFFFF;
		--hl-haarlinie: rgba(26, 18, 6, .12);
		--hl-text: #1A1614;
		--hl-text-leise: #6B625A;
		--hl-gold-text: #8A5A10;
		--hl-gold-schein: none;
		--hl-gold-tint: rgba(138, 90, 16, .07);
		--hl-feldrand: rgba(26, 18, 6, .45);
		--hl-safety: #5F574F;   /* siehe :root[data-theme="hell"] */
		--hl-safety-flaeche: rgba(26, 18, 6, .04);
		--hl-glow: 0;
		--hl-licht-hell: 9%;
		--hl-blatt-mischung: #1A1614;
		--hl-blatt-anteil: 78%;   /* siehe :root[data-theme="hell"] */
		--hl-holz: #9A6C4A;
		--hl-holz-licht: #D6A67C;
		--hl-holz-schatten: #77502F;
		--hl-holz-umriss: #553A27;
		--hl-baumboden: rgba(60, 40, 25, .14);
		--hl-baum-glow: 0%;          /* keine Glows im Light Mode */
		--hl-baum-glanz: .2;         /* nur ein leiser Hof */
		--hl-grain: .02;
		--hl-motiv: .22;   /* im Hellen liegt Gold naeher am Text, deshalb leiser */
		color-scheme: light;
	}
}