/* ───────────────────────────────────────────────────────────────────────── Haus Kulturimpuls · Farbklima zur Wahl (Vorlage, nicht Entscheid) Die Seite lässt sich in drei Farben ansehen (P Petrol ist seit dem 16. 10. 2026 gestrichen: ‹P fliegt raus›), umgeschaltet an der Leiste unten links oder über die Adresse (?farbe=w). Gebaut am 16. 10. 2026 auf den Wunsch des Inhabers (‹ein Umschalter wie für das Typo-Klima›), nach dem Muster der damaligen Schriftleiste. h Haus die letzte Fassung: Moosgrün im Band, keine Felder w Waldgrün #1B3D27 hr H in Rot wie H, ohne Felder, Akzent #DA291C (statt Gold, 16. 10. 2026) r Rot #DA291C — Schweizer Rot, Pantone 485 C (seit 16. 10. 2026) 1 Entwurf 1 Schweizer Rot: Band, Verweise, Spenden hinterlegt, Fuss als Fläche; der Kopf ohne Feld (17. 10. 2026) 2 Entwurf 2 dasselbe in Blau #005D86 (25. 10. 2026; bis dahin Gold, Gelb und Safrangelb, die der Inhaber gestrichen hat) 3 Entwurf 3 dasselbe in 60 % Grau #666666 (25. 10. 2026) Seit dem 25. 10. 2026 zeigt die Leiste nur 1, 2 und 3: Rot, Blau und 60 % Grau; ohne Wahl gilt 1. H, W, H in Rot und R bleiben über die Adresse erreichbar (?farbe=h, w, hr, r). Die Töne stehen als Token im Haus (assets/haus-sks.css § Farbklima, gerechnet und von tools/kontraste.py nachgerechnet). Hier steht nur, was die Seite daraus macht: Felder über die volle Breite und die Leiste. Eine Farbe in vier Rollen, kein Mix: die Fläche (Kopf, Fuss, Band) mit Papier darauf, dieselbe Farbe als Schrift auf Papier (Verweise), eine Hinterlegung der Spenden (Tint). Ohne data-farbe greift nichts davon: die Felder sind durchsichtig, die Abstände die der heutigen Seite — das ist die Wahl H, zum Vergleich mit den Farben (Inhaber, 16. 10. 2026). ───────────────────────────────────────────────────────────────────────── */ /* ── Die Felder ohne Farbe: unsichtbar, die Seite sieht aus wie heute ──── */ .feld{background:var(--feld, transparent); color:var(--auf-feld, var(--ink))} .feld .seite{padding-block:0} .feld-kopf .seite{padding-top:var(--r16)} .feld-fuss .seite{padding-bottom:var(--r16)} /* Ein Abschnitt, der sein Feld beginnt, ist dort der erste seiner Art und verlöre Linie und Abstand (seite.css: section.block:first-of-type). Ohne Farbe bekommt er beides zurück — die Linie trennt wie bisher. */ main .feld + .feld section.block:first-of-type{ border-top:var(--linie, 1px) solid var(--rule-soft); padding-top:var(--r8); margin-top:var(--r12)} /* base.css: section + section — hier kein Geschwister mehr */ /* ── Mit Farbe: Felder tragen, die Linien weichen den Flächen ──────────── */ :root[data-farbe] .feld .seite{padding-block:var(--r12)} :root[data-farbe] .feld-kopf .seite{padding-block:var(--r16) var(--r12)} :root[data-farbe] .feld-kopf .kopf{margin-bottom:0} :root[data-farbe] main .feld + .feld section.block:first-of-type{border-top:0; padding-top:0; margin-top:0} :root[data-farbe] .feld-fuss .fuss{margin-top:0; padding-top:0; border-top:0} :root[data-farbe] .balken{background:var(--farbe-band, var(--farbe))} :root[data-farbe] a{color:var(--farbe-text); text-decoration-color:color-mix(in srgb, var(--farbe-text) 42%, transparent)} :root[data-farbe] a:hover, :root[data-farbe] a:focus-visible{text-decoration-color:var(--farbe-text)} :root[data-farbe] a:focus-visible{outline-color:var(--farbe-text)} /* Die Farbe als Fläche: Papier darauf, in beiden Klimata (themenfest wie das Band, haus-sks.css § Theme-feste Flächen). Jeder Text auf dem Feld nimmt seine Farbe von hier — auch die leisen (Randspalte, Fuss, Stand). */ :root[data-farbe] .feld-farbe{--feld:var(--farbe); --auf-feld:var(--auf-farbe)} :root[data-farbe] .feld-farbe :is(.apparat, .apparat.stand, .fein){color:var(--auf-farbe)} :root[data-farbe] .feld-farbe a{color:var(--auf-farbe); text-decoration-color:currentColor} :root[data-farbe] .feld-farbe a:focus-visible{outline-color:var(--auf-farbe)} /* Die Farbe als Hinterlegung: Tinte darauf, die Linie folgt dem Klima. */ :root[data-farbe] .feld-tint{--feld:var(--farbe-tint)} /* Entwurf 1: Der Kopf bleibt wie in H ohne Feld — Fläche tragen nur der Fuss und, als Hinterlegung, die Spenden. */ :root:is([data-farbe="1"], [data-farbe="2"], [data-farbe="3"], [data-farbe="w"]) .feld-kopf{--feld:transparent; --auf-feld:var(--ink)} :root:is([data-farbe="1"], [data-farbe="2"], [data-farbe="3"], [data-farbe="w"]) .feld-kopf .seite{padding-block:var(--r16) 0} /* ── Die Leiste ─────────────────────────────────────────────────────────── Unten links, seit dem 18. 10. 2026 allein dort (die Schriftleiste ist mit der Schriftwahl weggefallen); Zeichen, keine Worte; die Namen stehen am aria-label und am title. Jeder Buchstabe steht in seinem Ton (H im Moosgrün des Hauses), damit man am Knopf sieht, wohin er führt; gedrückt wird er Tinte (WCAG 1.4.1: Rahmen und Fläche, nicht Farbe allein). */ .farbe-leiste{ position:fixed; left:calc(var(--r3) + env(safe-area-inset-left)); bottom:calc(var(--r3) + env(safe-area-inset-bottom)); z-index:75; display:flex; gap:2px; padding:2px; background:var(--paper-hoch); border:var(--linie) solid var(--rule); border-radius:var(--radius); box-shadow:0 1px 6px rgb(0 0 0 / 0.10); } .farbe-knopf{ display:flex; align-items:center; justify-content:center; width:var(--ziel-min); height:var(--ziel-min); padding:0; border:var(--linie) solid transparent; border-radius:var(--radius-s); background:none; color:var(--ink-faint); font-family:var(--schrift); font-size:var(--grad-gross); line-height:1; cursor:pointer; } .farbe-knopf[data-farbe="h"]{color:var(--klima-h)} .farbe-knopf[data-farbe="w"]{color:var(--klima-w)} .farbe-knopf[data-farbe="hr"]{color:var(--klima-r)} .farbe-knopf[data-farbe="r"]{color:var(--klima-r)} .farbe-knopf[data-farbe="1"]{color:var(--klima-r)} .farbe-knopf[data-farbe="2"]{color:var(--klima-b)} .farbe-knopf[data-farbe="3"]{color:var(--klima-d)} /* 1 und 2 als Punkte in ihrer Farbe (18. 10. 2026). Der Punkt behält seine Farbe auch gedrückt; was gedrückt ist, zeigen Rahmen und Fläche. */ .farbe-punkt{display:block; width:14px; height:14px; border-radius:50%; background:currentColor} .farbe-knopf[data-farbe="1"] .farbe-punkt{color:var(--klima-r)} .farbe-knopf[data-farbe="2"] .farbe-punkt{color:var(--klima-b)} .farbe-knopf[data-farbe="3"] .farbe-punkt{color:var(--klima-d)} .farbe-knopf:hover{color:var(--ink); background:var(--rule-soft)} .farbe-knopf:focus-visible{outline:2px solid var(--accent); outline-offset:2px} .farbe-knopf[aria-pressed="true"]{ color:var(--ink); border-color:var(--accent); background:var(--accent-tint); } @media (max-width:40rem){ .farbe-knopf{width:2rem; height:2rem; font-size:var(--grad-grund)} } /* ── Druck: kein Farbklima, keine Leiste ────────────────────────────────── Die Token werden im Haus zu Papier und Schwarz (haus-sks.css § Der Druck des Farbklimas, 0,5,0); die Felder erben das über var(). Hier nur, was die Seite selbst gesetzt hat: Polster der Felder (seite.css druckt .seite ohne Polster, die Feldregeln oben wiegen mehr) und Schriftfarben. */ @media print{ .farbe-leiste{display:none} :root[data-haus] .feld .seite, :root[data-haus][data-farbe] .feld .seite{padding-block:0} :root[data-farbe] .feld-farbe :is(.apparat, .apparat.stand, .fein){color:var(--print-grau)} :root[data-farbe] .feld-farbe a{color:var(--print-schwarz)} }