/* ══════════════════════════════════════════════════════════════════════════
SPINNE — Corporate Design, Salonimpuls.
Marke: Petrol #004348 · Mint #93ccb3 · Rot #ea6268 · Papier #fdf9f5 ·
Beige #d29d65. Nichts ausserhalb dieser fuenf Familien.
AUSNAHME, benannt (F3): reines Weiss #ffffff gehoert zu keiner der fuenf
Familien und wird an GENAU EINER Stelle verwendet — als --flaeche-hoch,
die oberste Ebene (Dialog, Menue, Popover). Der Grund ist eine Anforderung,
keine Vorliebe: --flaeche ist Papierweiss #fffdfb, und eine Ebene darueber
braucht eine sichtbare Kante. Weiss ist der einzige Wert, der heller ist
als Papier. Wer Weiss anderswo einsetzt, verlaesst das CD.
ZWEITER KANAL (F1): Farbe traegt die FAMILIE eines Zustands, nie den
genauen Zustand. Den tragen Form und Wort:
Punkt gefuellt aktiv Mint-Familie
Punkt gefuellt veraltet Beige-Familie (abgelaufene Frist)
Ring voll review Petrol-Neutral
Ring gestrichelt entwurf Warmgrau
Pfeil ersetzt Neutral
Ring durchgestrichen archiviert Neutral
Zwei Zustaende mit demselben zweiten Kanal muessen sich in der Farbe
unterscheiden (gemessen als CIE76-Farbabstand >= 18, siehe
beweis/kontrast.mjs). Zustand steht NIE nur in der Farbe: das Wort steht
immer daneben.
GETOENTE FELDER (--feld-*) sind halbdurchsichtig und liegen ausschliesslich
auf --grund, --flaeche oder --flaeche-hoch. Auf --flaeche-tief oder
--grund-2 gestapelt werden sie zu dunkel und reissen AA. Der Pruefer
rechnet sie ueber alle drei erlaubten Traeger und wertet den
schlechtesten Fall.
Rollen (gelten in beiden Fassungen, die Farben tauschen die Plaetze):
Grund die ruhige Flaeche, auf der gelesen wird
Flaeche die erhobene Flaeche (Karte, Dialog, Kopfleiste)
Linie Trennung und Akzent -> Mint
Signal Widerspruch, ueberfaellig, Fehler -> Rot, sparsam
Zweitakzent Evidenz, Rohbeleg, Pruefung faellig -> Beige
Alle Kontrastwerte in den Kommentaren sind gerechnet (WCAG 2.1 relative
Luminanz), nicht geschaetzt.
══════════════════════════════════════════════════════════════════════════ */
/* Schriften: im laden, Fallback steht in den Stapeln unten.
*/
:root{
color-scheme: light;
/* ---- Markenfarben, unveraendert ------------------------------------- */
--si-petrol:#004348;
--si-mint:#93ccb3;
--si-rot:#ea6268;
--si-papier:#fdf9f5;
--si-beige:#d29d65;
/* ---- Grund und Flaechen --------------------------------------------- */
--grund:#fdf9f5; /* Papier — der Lesegrund */
--grund-2:#f4efe9; /* abgesetzter Streifen, Tabellenzeile */
--flaeche:#fffdfb; /* Karte, Atom, Listenzeile — Papierweiss */
--flaeche-hoch:#ffffff; /* Dialog, Menue, Popover — die benannte
Weiss-Ausnahme, siehe Dateikopf (F3). Dazu
gehoert --tiefe-weich, damit die Kante auch
ohne Farbunterschied traegt. */
--flaeche-tief:#f0ece6; /* Eingabefeld, Codeblock, Frontmatter */
--invers:#004348; /* Kopfleiste und Fusszeile: die dunkle Bank.
NICHT der Hauptknopf — der ist --knopf. Diese
zwei Rollen zusammenzulegen war ein Fehler:
der Knopf soll auf Nacht zu Mint werden, die
Kopfleiste darf das nicht, sonst steht ein
mintgrünes Band ueber der ganzen Seite. */
--invers-tief:#003438; /* die tiefere Bank: Navigation, Fusszeile */
/* ---- Hauptknopf: die EINZIGE Flaeche, die in der Nacht die Farbe
wechselt. Hell Petrol mit Papier, dunkel Mint mit Tinte. */
--knopf:#004348;
--schrift-auf-knopf:#fdf9f5; /* 10.57 auf Petrol */
/* ---- Netzbuehne: fest in BEIDEN Fassungen ------------------------------
Der Vollbild-Graph ist immer dunkel — auch in der hellen Fassung, weil
ein Netz auf Papier flimmert. Diese Werte werden deshalb unten NICHT
getauscht. Wer sie tauscht, bekommt Papierschrift auf Mint (1.74). */
--buehne:#003438;
--buehne-knoten:#004348; /* Knotenkarte auf der Buehne */
--buehne-schrift:#fdf9f5; /* 10.57 auf dem Knoten */
--buehne-mint:#93ccb3; /* 6.30 auf dem Knoten — Kuerzel, Linien */
--buehne-gewaehlt:#93ccb3;
--buehne-gewaehlt-schrift:#0b2325; /* 9.00 auf Mint */
/* Kantenfarben des Netzes. Sie liegen IMMER auf der dunklen Buehne, also
duerfen sie keine Themenwerte nehmen — sonst zeichnet die helle Fassung
dunkelbraune Linien auf dunkles Petrol. Der Typ einer Kante wird ohnehin
ueber Strichbild UND Beschriftung getragen; Farbe ist der dritte Kanal
und darf sich deshalb wiederholen. */
--buehne-linie:#7d9a94; /* 4.34 auf der Buehne — neutral */
--buehne-linie-hell:#cfe3dc; /* 8.99 — die kraeftigste Linie */
--buehne-linie-mint:#93ccb3; /* 6.99 */
--buehne-linie-beige:#d29d65; /* 5.31 — Evidenz, das Erz */
--buehne-linie-signal:#ea6268; /* 3.91 — nur der Widerspruch */
/* ---- Schrift --------------------------------------------------------- */
--schrift:#0b2325; /* 15.64 auf Grund · 16.32 auf Flaeche */
--schrift-2:#5c7476; /* 4.76 auf Grund · 4.96 auf Flaeche
NUR auf --grund und --flaeche verwenden */
--schrift-3:#4e6668; /* 5.85 Grund · 5.10-5.36 auf allen getoenten
Feldern -> die sichere Zweitschrift */
--schrift-auf-invers:#fdf9f5; /* 10.57 auf Petrol · 12.95 auf Tief */
--schrift-auf-mint:#0b2325; /* 9.00 auf Mint */
--schrift-auf-beige:#0b2325; /* 6.83 auf Beige */
/* ---- Akzente als SCHRIFT (hell braucht dunklere Fassungen) ----------- */
--mint-schrift:#2d7458; /* 5.34 Grund · 5.52 Flaeche · 4.86 auf
--feld-mint. War #2f7a5f: das ergibt auf dem
eigenen Mintfeld nur 4.48 und reisst AA um
zwei Hundertstel — die CD-Tabelle hatte 4.49
als bestanden gefuehrt. Mint selbst hat 1.74,
ist also niemals Text auf Papier. */
--rot-schrift:#b8323c; /* 5.63 auf Grund · 5.90 auf Flaeche */
--beige-schrift:#8a5c26; /* 5.51 auf Grund · 5.77 auf Flaeche */
/* ---- Akzente als FLAECHE und PUNKT (kein Text) ----------------------- */
--mint:#93ccb3;
--rot:#ea6268; /* 3.11 auf Grund -> als Punkt/Rand erlaubt */
--beige:#d29d65; /* 2.29 auf Grund -> nur mit eigener Kontur */
--feld-mint:rgba(147,204,179,.18); /* ergibt #eaf1e9 */
--feld-rot:rgba(234,98,104,.12); /* ergibt #fbe7e4 */
--feld-beige:rgba(210,157,101,.18); /* ergibt #f5e8db */
--feld-petrol:rgba(0,67,72,.06);
/* ---- Linien ---------------------------------------------------------- */
--linie:#dfd8d1; /* 1.35 — dekorative Trennung */
--linie-mint:rgba(147,204,179,.55);
--linie-stark:#6a8e8f; /* 3.41 Grund · 3.55 Flaeche — Rand von
Bedienelementen (WCAG 1.4.11). NICHT als Rand
auf getoenten Feldern: dort traegt der Rand
die jeweilige Akzentschrift. */
--linie-fokus:#b8323c; /* Fokusring, innen. Auf Papier 5.63 — auf der
Petrol-Kopfleiste aber nur 1.88, deshalb: */
--fokus-hof:#fdf9f5; /* Fokusring, aussen. Genau umgekehrt: 10.57 auf
Petrol, 1.00 auf Papier. Zusammen erreicht auf
JEDER Flaeche mindestens einer der beiden 3:1.
Ein einfarbiger Fokusring kann das nicht. */
/* ---- Zustaende der Wissensbasis (L2-Status aus dem Kanon) ------------ */
--st-entwurf:#6a625b; /* Warmgrau, unfertig. 5.71 Grund · 5.20 Feld.
Ring GESTRICHELT. Von --st-review getrennt
(dE 26.9), weil beide den Ring tragen. */
--st-review:#125a66; /* Petrol-Neutral: liegt beim Verantwortlichen,
ist aber noch KEINE Wahrheit. 7.48 Grund.
Ring VOLL. Frueher Beige — das war derselbe
Wert wie --st-veraltet (F1). */
--st-aktiv:#2f7a5f; /* der einzige warnungsfreie Zustand -> Mint.
Punkt GEFUELLT. */
--st-veraltet:#8a5c26; /* Beige ist ab jetzt allein die abgelaufene
Frist. Punkt GEFUELLT. dE zu --st-review 59.5 */
--st-ersetzt:#4e6668; /* Weiterleitung. Zweiter Kanal: PFEIL */
--st-archiviert:#4e6668; /* Zweiter Kanal: RING DURCHGESTRICHEN. Teilt die
Farbe mit ersetzt — erlaubt, weil die Form
beide trennt und das Wort daneben steht. */
--st-widerspruch:#b8323c; /* die EINZIGE Rotstelle im Regelbetrieb */
/* ---- Schichten L0-L5: kein Farbcode, sondern Tiefe ------------------- */
--l-kanon:#003438; /* L0 Schema — dunkel, traegt alles */
--l-evidenz:#8a5c26; /* L1 Rohbeleg — Beige, das Erz */
--l-atom:#0d7078; /* L2 Aussage — helleres Petrol. War #004348
und damit identisch mit --invers: die Plakette
verschwand auf der Kopfleiste (F5).
5.56 Grund · dE zu --invers 19.0 */
--l-graph:#2f7a5f; /* L3 Kante — Mint, abgeleitet */
--l-sicht:#5c7476; /* L4 Reihenfolge— neutral, nur Zeiger */
--l-zugriff:#4e6668; /* L5 Filter — neutral, haelt nichts */
/* ---- Form: Rundung, Abstand, Tiefe, Bewegung ------------------------- */
--rund-klein:8px;
--rund:12px; /* Knopf, Eingabefeld, Listenzeile */
--rund-gross:16px; /* Karte, Atom, Dialog */
--rund-plakette:29%; /* Logo-Platte: rx = 29 % der Kantenlaenge */
--rund-pille:999px;
--luft-1:.4rem; --luft-2:.7rem; --luft-3:1.1rem;
--luft-4:1.6rem; --luft-5:2.4rem; --luft-6:clamp(2.4rem,5vw,3.6rem);
--breite:min(100% - 2.5rem, 76rem); /* Werkzeugbreite, nicht Lesebreite */
--breite-lesen:min(100% - 2.5rem, 42rem);
--tiefe-klein:0 1px 2px rgba(0,52,56,.06);
--tiefe-weich:0 12px 30px -22px rgba(0,52,56,.50);
--tiefe:0 24px 48px -32px rgba(0,52,56,.45);
--takt-schnell:.12s;
--takt:.18s;
--takt-lang:.42s;
--kurve:cubic-bezier(.22,1,.36,1);
/* ---- Schriftstapel --------------------------------------------------- */
--font-titel:Archivo,-apple-system,BlinkMacSystemFont,"Segoe UI",
"Helvetica Neue",Helvetica,Arial,sans-serif;
--font-text:"Source Sans 3",-apple-system,BlinkMacSystemFont,"Segoe UI",
Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif;
--font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,
"Liberation Mono",monospace;
}
/* ══ Dunkle Fassung ═══════════════════════════════════════════════════════
Die Rollen bleiben, die Farben tauschen: Petrol wird zum Grund, Papier
zur Schrift, Mint traegt Linie UND Akzentschrift (auf Dunkel reicht sein
Kontrast, auf Hell nicht). */
@media (prefers-color-scheme: dark){
:root:not([data-thema="hell"]){
color-scheme: dark;
--grund:#02191c; /* Nacht */
--grund-2:#041f22;
--flaeche:#072b2d;
--flaeche-hoch:#0a3436;
--flaeche-tief:#041f22;
--invers:#063a3e; /* die Bank bleibt eine dunkle Bank, nur heller
als der Grund (1.47) — Papierschrift 11.82 */
--invers-tief:#010f11;
--knopf:#93ccb3; /* HIER dreht die Farbe: Hauptknopf wird Mint */
--schrift-auf-knopf:#0b2325; /* 9.00 auf Mint */
--schrift:#fdf9f5; /* 17.30 Grund · 14.40 Flaeche */
--schrift-2:#9db5ae; /* 8.33 Grund · 6.93 Flaeche · >=5.16 Felder */
--schrift-3:#7d9a94; /* 5.98 Grund · 4.97 Flaeche
NICHT auf --flaeche-hoch und nicht auf den
getoenten Feldern (dort 3.70-4.16) */
--schrift-auf-invers:#fdf9f5; /* 11.82 auf der Bank · 17.85 auf Tief.
War #02191c — das passte zum Mint-
Knopf und ergab auf --invers-tief
1.05:1, also unsichtbare Navigation. */
--schrift-auf-mint:#0b2325; /* 9.00 */
--schrift-auf-beige:#0b2325; /* 6.83 */
--mint-schrift:#93ccb3; /* 9.95 Grund · 8.28 Flaeche */
--rot-schrift:#ea6268; /* 5.56 Grund · 4.63 Flaeche.
Auf --flaeche-hoch und den Feldern nur
fett/gross (3.44-4.14 = AA fuer Grossschrift) */
--beige-schrift:#d29d65; /* 7.55 Grund · 6.28 Flaeche */
--feld-mint:rgba(147,204,179,.12);
--feld-rot:rgba(234,98,104,.16);
--feld-beige:rgba(210,157,101,.14);
--feld-petrol:rgba(147,204,179,.05);
--linie:rgba(147,204,179,.18); /* ergibt #1c3937, 1.46 — dekorativ */
--linie-mint:rgba(147,204,179,.42);
--linie-stark:#5c8478; /* 4.34 Grund · 3.61 Flaeche · 3.23 hoch */
--linie-fokus:#ea6268; /* 5.56 auf Nacht — aber 1.79 auf dem Mint-
Hauptknopf, deshalb der Hof dagegen: */
--fokus-hof:#02191c; /* 9.95 auf Mint, 1.00 auf Nacht. */
--st-entwurf:#7d9a94; /* Ring gestrichelt */
--st-review:#7fd2de; /* Ring voll. Petrol-Neutral wird auf Nacht ein
helles Zyan. dE zu --st-aktiv 20.6, zu
--st-entwurf 25.2, zu --st-veraltet 62.8 */
--st-aktiv:#93ccb3; /* Punkt gefuellt */
--st-veraltet:#d29d65; /* Punkt gefuellt — Beige = abgelaufene Frist */
--st-ersetzt:#9db5ae; /* Pfeil */
--st-archiviert:#7d9a94; /* Ring durchgestrichen */
--st-widerspruch:#ea6268;
--l-kanon:#fdf9f5;
--l-evidenz:#d29d65;
--l-atom:#a8e0ee; /* War #93ccb3 und damit identisch mit --invers
(dem Mint-Hauptknopf) — F5. dE 22.7 */
--l-graph:#7fbfa4;
--l-sicht:#9db5ae;
--l-zugriff:#7d9a94;
--tiefe-klein:0 1px 2px rgba(0,0,0,.45);
--tiefe-weich:0 12px 30px -22px rgba(0,0,0,.75);
--tiefe:0 24px 48px -32px rgba(0,0,0,.80);
}
}
/* Handschalter: gewinnt in beide Richtungen. */
:root[data-thema="dunkel"]{
color-scheme: dark;
--grund:#02191c; --grund-2:#041f22; --flaeche:#072b2d;
--flaeche-hoch:#0a3436; --flaeche-tief:#041f22;
--invers:#063a3e; --invers-tief:#010f11;
--knopf:#93ccb3; --schrift-auf-knopf:#0b2325;
--schrift:#fdf9f5; --schrift-2:#9db5ae; --schrift-3:#7d9a94;
--schrift-auf-invers:#fdf9f5; --schrift-auf-mint:#0b2325; --schrift-auf-beige:#0b2325;
--mint-schrift:#93ccb3; --rot-schrift:#ea6268; --beige-schrift:#d29d65;
--feld-mint:rgba(147,204,179,.12); --feld-rot:rgba(234,98,104,.16);
--feld-beige:rgba(210,157,101,.14); --feld-petrol:rgba(147,204,179,.05);
--linie:rgba(147,204,179,.18); --linie-mint:rgba(147,204,179,.42);
--linie-stark:#5c8478; --linie-fokus:#ea6268; --fokus-hof:#02191c;
--st-entwurf:#7d9a94; --st-review:#7fd2de; --st-aktiv:#93ccb3;
--st-veraltet:#d29d65; --st-ersetzt:#9db5ae; --st-archiviert:#7d9a94;
--st-widerspruch:#ea6268;
--l-kanon:#fdf9f5; --l-evidenz:#d29d65; --l-atom:#a8e0ee;
--l-graph:#7fbfa4; --l-sicht:#9db5ae; --l-zugriff:#7d9a94;
--tiefe-klein:0 1px 2px rgba(0,0,0,.45);
--tiefe-weich:0 12px 30px -22px rgba(0,0,0,.75);
--tiefe:0 24px 48px -32px rgba(0,0,0,.80);
}
/* ---- Grundriss ---------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
margin:0; background:var(--grund); color:var(--schrift);
font-family:var(--font-text);
font-size:clamp(.95rem,.4vw + .88rem,1.02rem); line-height:1.62;
-webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--font-titel); font-weight:800; line-height:1.08;
letter-spacing:-.022em; text-wrap:balance; margin:0; overflow-wrap:break-word}
h1{font-size:clamp(1.5rem,3vw,2.1rem)}
h2{font-size:clamp(1.25rem,2.2vw,1.6rem)}
h3{font-size:1.08rem; font-weight:700}
p{margin:0} a{color:var(--mint-schrift)}
.mono,code,kbd,samp{font-family:var(--font-mono); font-size:.92em;
font-variant-numeric:tabular-nums}
.augen{font-family:var(--font-mono); font-size:.7rem; letter-spacing:.16em;
text-transform:uppercase; font-weight:500; color:var(--schrift-2)}
.bahn{width:var(--breite); margin-inline:auto}
:focus-visible{outline:3px solid var(--linie-fokus); outline-offset:2px;
box-shadow:0 0 0 6px var(--fokus-hof); border-radius:2px}
/* Zwei Ringe, nicht einer: auf Papier traegt der rote, auf Petrol und auf
dem Mint-Knopf der helle Hof. Gemessen in beweis/kontrast.mjs. */
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.01ms !important;
transition-duration:.01ms !important; scroll-behavior:auto !important}
}