/* =========================================================================== * Lingualinio — die Farbtafel „Tinte auf kühlem Papier" und das ganze Vokabular. * * WARUM DIESE DATEI IN public/ LIEGT UND NICHT IN src/styles/ * * Sie wird als `` eingebunden, also als eigene * Datei ausgeliefert und nicht mitgebündelt. `assetsInlineLimit: 0` in `astro.config.mjs` * verbietet jedes Einbetten, und eine gebündelte Stilvorlage, die nirgends eingebettet werden * darf, ist am Ende auch nur eine Datei — dann lieber eine, deren Adresse feststeht. Der * Wächter `pnpm check:farbtafel` sucht sie an genau zwei Orten; dies ist einer davon. * * NICHTS VON WOANDERS. Keine Schrift, kein Bild, kein Skript von einem fremden Wirt. Das ist * nicht Sparsamkeit: die CSP lässt es nicht zu (`default-src 'self'`), und der * Datenschutztext sagt es dem Kunden zu. * * ═══ WARUM HIER KEINE GELADENE ANZEIGESCHRIFT STEHT ═══ * * Der Entwurf, den der Betreiber abgenommen hat, lebte von einer geladenen Schrift. Sie ist * hier nicht eingebaut, und zwar aus einem Grund, der zu diesem Produkt gehört: dreissig * Sprachen brauchen dreissig Schriftschnitte. Eine mitgelieferte Anzeigeschrift deckt den * lateinischen Satz ab und lässt Arabisch, Devanagari, Thai, Hangul und die CJK-Schriften auf * den System-Stapel fallen — der Aufmacher hätte dann zwei Handschriften, und die eine sähe * nach Absicht aus, die andere nach Rest. Dazu käme eine Binärdatei im Verzeichnisbaum und * eine CSP-Erlaubnis (`font-src 'self'`), die sonst niemand braucht. * * Die Handschrift entsteht deshalb aus Gewicht, Laufweite, Zeilenfall und Farbe — und aus dem * einen Bild, das dieses Produkt umsonst hat: den Schriftzeichen selbst. * * ═══ EINE TAFEL, UND SIE IST HELL ═══ * * Nicht dem Browser folgen, nicht umschalten, kein zweiter Zweig. Zwei Gründe: * * 1. DER GEGENSTAND. Fremde Schriftschnitte stehen auf hellem Grund richtig. Die feinen * Striche arabischer, thailändischer und Devanagari-Schnitte verlieren auf dunklem Grund * an Gewicht, und zwar ungleich stark — was bei einer Schrift noch elegant aussieht, ist * bei der nächsten unlesbar. Eine dunkle Fassung wäre nicht dieselbe Marke in anderem * Ton, sie wäre ein anderes Produkt. * 2. DER PREIS EINER ZWEITEN TAFEL. Jede Komponente müsste in zwei Zuständen richtig * aussehen, und die Bezahlseite, die in einem fremden Rahmen steckt, kann einem * Umschalter ohnehin nicht folgen. Kalio folgt `prefers-color-scheme`, PW-Keeper schaltet * über eine Klasse am ``; beide zahlen das, und beide haben dafür einen Grund, den * dieses Produkt nicht hat. * * ═══ DIE KONTRASTE SIND NACHGERECHNET, NICHT GESCHÄTZT ═══ * * Jeder Textton gegen `--flaeche` (#ffffff), den HELLSTEN Untergrund — wer gegen den besteht, * besteht auch gegen `--flaeche-tief` und `--papier`. `components/gestalt.test.ts` rechnet sie * nach; eine Zahl hier, die dort nicht herauskommt, macht den Lauf rot. * * --tinte #161a24 17,39:1 Überschriften, Hauptton * --tinte-leise #454e60 8,36:1 Fliesstext * --tinte-still #5c657a 5,84:1 Kleingedrucktes, Beschriftungen * --lapis #1f45c8 7,65:1 Verweise, der eine Akzent * --safran #8f5400 6,11:1 die Serie, und sonst nichts * --gut #1a6e49 6,23:1 richtig, bestätigt * --warnung #b93a29 5,68:1 falsch, Fehler, Gefahr * * Auf ihren eigenen getönten Flächen, die nächstknappe Lage: * * --lapis auf --lapis-grund 6,56:1 * --safran auf --safran-flaeche 5,36:1 * --gut auf --gut-grund 5,42:1 * --warnung auf --warnung-grund 4,77:1 * * Weiss auf `--lapis` trägt 7,65:1 — deshalb hat der Hauptknopf weisse Schrift und keine * dunkle. Auf `--lapis-tief` sind es 10,53:1, also bleibt er auch im Hover-Zustand lesbar. * * ═══ ZWEI FARBEN TRAGEN EINE BEDEUTUNG UND SONST NICHTS ═══ * * `--gut` und `--warnung` gehören AUSSCHLIESSLICH richtig und falsch. Sie sind hier die * Rückmeldung einer Übung, und eine Rückmeldung, die man erst lesen muss, ist keine. Wer sie * für eine Zierde benutzt — einen grünen Haken an einer Leistungsliste, einen roten Rahmen um * eine Kachel —, nimmt ihnen genau das. * * `--safran` gehört der Serie. Er ist der einzige warme Ton auf der Seite und wirkt deshalb * wie ein Ruf; an einer zweiten Stelle wäre er nur noch eine Farbe. * * ═══ DAS VOKABULAR IST EIGEN, NICHT GEERBT ═══ * * Gleiche Bauformen, andere Namen als bei den Geschwistern — genau das, was * `pnpm check:no-copy` erlaubt und `pnpm check:farbtafel` erzwingt. Eine kopierte Komponente * bringt fremde `var()`-Namen mit, und eine CSS-Eigenschaft mit unbekanntem `var()` ist * UNGÜLTIG und wird verworfen: die Seite steht dann ungestaltet da, bei grünem Bau und grünem * Deploy. Am 14.09.2026 zweimal passiert. * * Band/Bahn .lage / .spiegel (Casinio .runde/.tisch, Schachmich .reihe/.bahn, * ZillaPDF .blatt/.satz, PW-Keeper .band/.bahn) * Karte .notiz (.kachel / .tafel / .karte / .card) * Knopf .taste (.knopf / .btn) * Raster .satzspiegel (.spalten / .raster / .grid3) * Augenbraue .vorzeile (.marke-zeile / .augenbraue / .eyebrow) * Meldung .merkzettel (.meldung) * Formularzeile .eingabe (.feld — und der Name .feld ist hier bewusst NICHT * benutzt: bei Schachmich hiess er zweimal etwas * anderes, und `.feld + .feld` schob sieben von acht * Brettfeldern jeder Reihe nach unten) * Tabelle .tafelhuelle / .tafel * App-Gerüst .werkstatt / .leiste * Rechtstext .recht * =========================================================================== */ :root { --papier: #eff1f5; --flaeche: #ffffff; --flaeche-tief: #f6f7fa; --tinte: #161a24; --tinte-leise: #454e60; --tinte-still: #5c657a; --linie: #d9dde6; --linie-leise: #e8ebf1; --lapis: #1f45c8; --lapis-tief: #17349a; --lapis-grund: #e9edfc; --auf-lapis: #ffffff; --safran: #8f5400; --safran-flaeche: #fbefd6; --gut: #1a6e49; --gut-grund: #e3f3ea; --warnung: #b93a29; --warnung-grund: #fbe7e3; /* * Der System-Stapel, und für fremde Schriften ein eigener Stapel dahinter. Der zweite ist * kein Luxus: ohne `Noto`-Nennung wählt mancher Browser für Devanagari oder Thai eine * Ersatzschrift mit anderer Grundlinie, und eine Zeile mit zwei Grundlinien liest sich wie * ein Druckfehler. */ --schrift: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --schrift-fremd: "Noto Sans", "Noto Sans Arabic", "Noto Sans Devanagari", "Noto Sans Thai", "Apple SD Gothic Neo", "Hiragino Sans", "Segoe UI", var(--schrift); --schrift-fest: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; --spiegelbreite: 68rem; --spiegelbreite-eng: 38rem; --radius: 12px; --radius-klein: 8px; --s1: .35rem; --s2: .6rem; --s3: .9rem; --s4: 1.3rem; --s5: 1.9rem; --s6: 2.8rem; --s7: 4.2rem; --schatten: 0 1px 2px #161a240f, 0 8px 24px -14px #161a2426; --schatten-tief: 0 2px 6px #161a2414, 0 22px 50px -22px #161a2433; } /* ── Grundlage ─────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { color-scheme: light; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--papier); color: var(--tinte-leise); font-family: var(--schrift); font-size: 1rem; line-height: 1.6; -webkit-font-smoothing: antialiased; } /* * `[hidden]` MUSS hier stehen, und zwar mit `!important`. * * Eine Inline-Regel (`style="display:flex"`) schlägt das `display:none`, das der Browser für * `[hidden]` mitbringt. Genau daran ist in diesem Haus schon ein Element „versteckt" sichtbar * geblieben, und der Fehler sieht nach einem Logikfehler aus, nicht nach CSS. */ [hidden] { display: none !important; } h1, h2, h3, h4 { color: var(--tinte); font-weight: 800; letter-spacing: -.028em; line-height: 1.12; margin: 0 0 var(--s3); text-wrap: balance; } h1 { font-size: clamp(2rem, 1.35rem + 3vw, 3.6rem); } h2 { font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.3rem); } h3 { font-size: clamp(1.15rem, 1.05rem + .5vw, 1.4rem); letter-spacing: -.02em; } h4 { font-size: 1rem; letter-spacing: -.01em; } p { margin: 0 0 var(--s4); } p:last-child { margin-bottom: 0; } a { color: var(--lapis); text-decoration-thickness: 1px; text-underline-offset: .18em; } a:hover { color: var(--lapis-tief); } strong, b { color: var(--tinte); font-weight: 700; } hr { border: 0; border-top: 1px solid var(--linie); margin: var(--s5) 0; } ul, ol { margin: 0 0 var(--s4); padding-left: 1.3rem; } li { margin-bottom: var(--s2); } img, svg { max-width: 100%; } :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--lapis); outline-offset: 2px; border-radius: var(--radius-klein); } /* ── Der Spiegel: die Spalte und die Lagen ─────────────────────────────── */ .spiegel { width: min(100% - 2.5rem, var(--spiegelbreite)); margin-inline: auto; } .spiegel.eng { max-width: var(--spiegelbreite-eng); } .lage { padding-block: clamp(var(--s6), 4.5vw, var(--s7)); } .lage.getoent { background: var(--flaeche); } .lage.knapp { padding-block: var(--s5); } /* * Zwei Lagen mit demselben Grund brauchen eine Grenze, sonst laufen sie ineinander. KEINE * volle Linie: eine durchgezogene Linie über die ganze Breite teilt die Seite in Kästen, und * ein Lernprodukt soll nicht wie ein Formular aussehen. */ .lage + .lage:not(.getoent):not(.tief) { position: relative; } .lage + .lage:not(.getoent):not(.tief)::before { content: ""; position: absolute; inset-inline: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--linie) 18%, var(--linie) 82%, transparent); } /* * Die tiefe Lage: der eine dunkle Block auf einer hellen Seite. Für den Schluss einer Seite * und für nichts anderes — zwei davon, und die Tafel ist nicht mehr hell. */ .lage.tief { background: var(--tinte); color: #ffffffd6; } .lage.tief h1, .lage.tief h2, .lage.tief h3, .lage.tief h4, .lage.tief strong, .lage.tief b { color: #fff; } .lage.tief a:not(.taste) { color: #fff; text-decoration-color: #ffffff8c; } .lage.tief .leise, .lage.tief .still { color: #ffffffb3; } .lage.tief .vorzeile { color: #ffffff9e; } .lage.tief .taste:not(.lapis) { border-color: #ffffff59; color: #fff; } .lage.tief .taste:not(.lapis):hover { background: #ffffff1f; } .satzspiegel { display: grid; gap: var(--s4); } .satzspiegel.zwei { grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); } .satzspiegel.drei { grid-template-columns: repeat(auto-fit, minmax(14.5rem, 1fr)); } .satzspiegel.vier { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); } /* ── Die Vorzeile über einer Überschrift ───────────────────────────────── */ .vorzeile { font-family: var(--schrift-fest); font-size: .74rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--tinte-still); margin: 0 0 var(--s2); } .vorspann { font-size: clamp(1.05rem, 1rem + .35vw, 1.22rem); color: var(--tinte-leise); max-width: 62ch; } /* * AUF DER TIEFEN LAGE MUSS DER VORSPANN MITDREHEN — und diese Regel fehlte bis zum 15.09.2026. * * `.lage.tief` setzt seinen Fliesstext-Ton am ABSCHNITT, und ein Absatz erbt ihn. `.vorspann` * setzt `color` aber am Absatz SELBST, und eine eigene Regel schlägt jede Erbschaft — ganz * unabhängig von der Gewichtung. Auf der einen dunklen Lage des Produkts stand der Vorspann * damit in `--tinte-leise` (#454e60) auf `--tinte` (#161a24): rund 1,9:1, also praktisch * unsichtbar. Genau der Fehler, den dieses Haus sucht — die Seite sieht nicht kaputt aus, der * Satz ist einfach weg, und Bau, Typprüfung und Deploy bleiben grün. * * Der Wert ist derselbe, den die Lage für ihren Fliesstext führt; die Regel steht in DIESEM * Abschnitt und nicht bei den Lagen, weil sonst der Name `vorspann` in zwei Abschnitten der * Tafel stünde — die Doppelbelegung, die `components/gestalt.test.ts` meldet. */ .lage.tief .vorspann { color: #ffffffd6; } /* ── Notizen: die Karte dieses Hauses ──────────────────────────────────── */ .notiz { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: var(--s4); } .notiz > :last-child { margin-bottom: 0; } .notiz.still { background: transparent; border-style: dashed; border-color: var(--linie); } .notiz.signal { border-color: var(--lapis); background: var(--lapis-grund); } .notiz.erhoben { box-shadow: var(--schatten); } .getoent .notiz { background: var(--flaeche-tief); } /* ── Quellenliste: die Sammlungen auf /quellen ──────────────────────────── */ /* * Eine Liste aus Notizen, kein Raster: die Angaben sind ungleich lang, und in Spalten stünde die * Lizenzzeile der einen neben dem Zweck der anderen. Die Namensnennung (CC BY-SA) ist der Grund, * warum `.quelle-recht` nicht kleiner gesetzt wird als der Rest — sie ist Lizenzbedingung und * kein Fussnotenapparat. */ .quellenliste { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--s4); } .quelle-name { font-weight: 650; margin-bottom: var(--s2); } .quelle-wozu { color: var(--tinte-leise); margin-bottom: var(--s2); } .quelle-recht { color: var(--tinte-still); font-size: .92rem; margin-bottom: 0; } /* ── Tasten ────────────────────────────────────────────────────────────── */ .taste { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); min-height: 2.9rem; padding: .7rem 1.4rem; border: 1px solid var(--linie); border-radius: var(--radius-klein); background: var(--flaeche); color: var(--tinte); font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; transition: background .15s, border-color .15s, color .15s; } .taste:hover { border-color: var(--lapis); color: var(--lapis); } .taste.lapis { background: var(--lapis); border-color: var(--lapis); color: var(--auf-lapis); } .taste.lapis:hover { background: var(--lapis-tief); border-color: var(--lapis-tief); color: var(--auf-lapis); } .taste.leer { background: transparent; border-color: var(--linie); color: var(--tinte-leise); } .taste.leer:hover { border-color: var(--tinte-still); color: var(--tinte); } .taste.gefahr { border-color: var(--warnung); color: var(--warnung); background: transparent; } .taste.gefahr:hover { background: var(--warnung); border-color: var(--warnung); color: #fff; } .taste.gross { min-height: 3.3rem; padding: .95rem 1.8rem; font-size: 1.05rem; } .taste.breit { width: 100%; } .taste[disabled], .taste[aria-disabled="true"] { opacity: .5; cursor: not-allowed; border-color: var(--linie); color: var(--tinte-still); background: var(--flaeche-tief); } .tastenreihe { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; } /* ── Merkzettel: Hinweis, Fehler, Bestätigung ──────────────────────────── */ .merkzettel { border: 1px solid var(--linie); border-left-width: 4px; border-radius: var(--radius-klein); background: var(--flaeche); padding: var(--s3) var(--s4); margin-bottom: var(--s4); } .merkzettel > :last-child { margin-bottom: 0; } .merkzettel.hinweis { border-left-color: var(--lapis); background: var(--lapis-grund); } .merkzettel.fehler { border-left-color: var(--warnung); background: var(--warnung-grund); color: var(--warnung); } .merkzettel.gut { border-left-color: var(--gut); background: var(--gut-grund); color: var(--gut); } .merkzettel.fehler strong, .merkzettel.gut strong { color: inherit; } /* ── Eingaben ──────────────────────────────────────────────────────────── */ .eingabe { display: block; margin-bottom: var(--s4); } .eingabe > span { display: block; font-size: .86rem; font-weight: 600; color: var(--tinte-leise); margin-bottom: var(--s1); } .eingabe input, .eingabe select, .eingabe textarea { width: 100%; padding: .7rem .85rem; border: 1px solid var(--linie); border-radius: var(--radius-klein); background: var(--flaeche); color: var(--tinte); font: inherit; } .eingabe input::placeholder, .eingabe textarea::placeholder { color: var(--tinte-still); } .eingabe input:focus, .eingabe select:focus, .eingabe textarea:focus { border-color: var(--lapis); outline: none; } .eingabe-hinweis { font-size: .86rem; color: var(--tinte-still); margin-top: var(--s1); } .haken { display: flex; gap: var(--s3); align-items: flex-start; margin-bottom: var(--s3); font-size: .94rem; } .haken input { margin-top: .28rem; flex-shrink: 0; width: 1.05rem; height: 1.05rem; accent-color: var(--lapis); } /* ── Tafeln ────────────────────────────────────────────────────────────── */ .tafelhuelle { overflow-x: auto; } .tafel { width: 100%; border-collapse: collapse; font-size: .94rem; } .tafel th, .tafel td { padding: .6rem .7rem; text-align: left; border-bottom: 1px solid var(--linie-leise); } .tafel th { font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--tinte-still); font-weight: 700; } .tafel tr:last-child td { border-bottom: 0; } .tafel .betrag { text-align: right; } /* ── Kleinkram ─────────────────────────────────────────────────────────── */ .leise { color: var(--tinte-leise); } .still { color: var(--tinte-still); } .klein { font-size: .88rem; } .gross { font-size: 1.1rem; } .fest { font-family: var(--schrift-fest); font-size: .92em; } .zentriert { text-align: center; } .betrag { font-family: var(--schrift-fest); font-variant-numeric: tabular-nums; font-weight: 700; } .fremd { font-family: var(--schrift-fremd); } .plakette { display: inline-block; padding: .12rem .5rem; border-radius: 999px; font-size: .74rem; font-weight: 700; letter-spacing: .04em; background: var(--lapis-grund); color: var(--lapis); } .plakette.gut { background: var(--gut-grund); color: var(--gut); } .plakette.warnung { background: var(--warnung-grund); color: var(--warnung); } .plakette.serie { background: var(--safran-flaeche); color: var(--safran); } /* ── Der Seitenkopf ────────────────────────────────────────────────────── */ .seitenkopf { background: var(--flaeche); border-bottom: 1px solid var(--linie); } .seitenkopf-innen { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5); align-items: center; justify-content: space-between; padding-block: var(--s3); } .seitenkopf nav { display: flex; flex-wrap: wrap; gap: var(--s4); align-items: center; } .seitenkopf nav a { color: var(--tinte-leise); text-decoration: none; font-weight: 600; font-size: .95rem; } .seitenkopf nav a:hover { color: var(--lapis); } .seitenkopf nav a[aria-current="page"] { color: var(--lapis); } /* ── Die Wortmarke ─────────────────────────────────────────────────────── */ .wortmarke { display: inline-flex; align-items: center; gap: .5rem; font-weight: 800; font-size: 1.15rem; letter-spacing: -.035em; text-decoration: none; color: var(--tinte); } .wortmarke-zeichen { flex-shrink: 0; } .wortmarke-erst { color: var(--tinte); } .wortmarke-zweit { color: var(--lapis); } .lage.tief .wortmarke-erst, .lage.tief .wortmarke-zweit { color: #fff; } /* ── Der Seitenfuss ────────────────────────────────────────────────────── */ .seitenfuss { background: var(--flaeche); border-top: 1px solid var(--linie); padding-block: var(--s6) var(--s5); font-size: .92rem; color: var(--tinte-still); } .seitenfuss h4 { color: var(--tinte-leise); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; margin-bottom: var(--s2); } .seitenfuss a { color: var(--tinte-leise); text-decoration: none; } .seitenfuss a:hover { color: var(--lapis); text-decoration: underline; } .seitenfuss-spalten { display: grid; gap: var(--s5); grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); } .seitenfuss-spalten ul { list-style: none; margin: 0; padding: 0; } .seitenfuss-spalten li { margin-bottom: var(--s1); } .seitenfuss-unten { margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--linie-leise); display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); justify-content: space-between; font-size: .84rem; } /* ── Die Werkstatt: das Gerüst hinter der Anmeldung ────────────────────── */ .werkstatt { display: grid; grid-template-columns: 15rem 1fr; min-height: 100vh; } @media (max-width: 860px) { .werkstatt { grid-template-columns: 1fr; } } .leiste { background: var(--flaeche); border-right: 1px solid var(--linie); padding: var(--s4) var(--s3); display: flex; flex-direction: column; gap: var(--s1); } @media (max-width: 860px) { .leiste { border-right: 0; border-bottom: 1px solid var(--linie); flex-direction: row; overflow-x: auto; } } .leiste-titel { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--tinte-still); padding: var(--s2) var(--s3); } .leiste-weg { display: block; padding: .55rem var(--s3); border-radius: var(--radius-klein); color: var(--tinte-leise); text-decoration: none; font-weight: 600; font-size: .95rem; white-space: nowrap; } .leiste-weg:hover { background: var(--flaeche-tief); color: var(--tinte); } .leiste-weg[aria-current="page"] { background: var(--lapis-grund); color: var(--lapis); } .werkstattkopf { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; justify-content: space-between; padding: var(--s4) 0 var(--s5); } .werkbank { padding: 0 var(--s5) var(--s6); } @media (max-width: 860px) { .werkbank { padding: 0 var(--s4) var(--s5); } } /* ── Reiter: Filter über einer Wand ────────────────────────────────────── */ .reiter-reihe { display: flex; gap: var(--s2); overflow-x: auto; padding: 2px; scrollbar-width: none; } .reiter-reihe::-webkit-scrollbar { display: none; } .reiter { border: 1px solid var(--linie); border-radius: 999px; background: var(--flaeche); color: var(--tinte-leise); padding: .3rem .8rem; font-size: .88rem; font-weight: 600; white-space: nowrap; text-decoration: none; cursor: pointer; } .reiter:hover { border-color: var(--lapis); color: var(--lapis); } .reiter[aria-current="page"], .reiter.an { background: var(--lapis); border-color: var(--lapis); color: var(--auf-lapis); } /* ── Der Fortschrittsbalken ────────────────────────────────────────────── */ .schiene { height: 8px; border-radius: 999px; background: var(--linie-leise); overflow: hidden; } .schiene > i { display: block; height: 100%; border-radius: 999px; background: var(--lapis); transition: width .35s cubic-bezier(.4, 0, .2, 1); } .schiene.schmal { height: 4px; } /* ── Rechtstexte ───────────────────────────────────────────────────────── */ .recht { max-width: var(--spiegelbreite-eng); } .recht.weit { max-width: 64rem; } .recht h2 { font-size: clamp(1.2rem, 1.1rem + .7vw, 1.6rem); margin-top: var(--s6); } .recht h3 { margin-top: var(--s5); font-size: 1.05rem; } .recht .block { font-family: var(--schrift-fest); font-size: .92rem; white-space: pre-wrap; background: var(--flaeche-tief); border: 1px solid var(--linie-leise); border-radius: var(--radius-klein); padding: var(--s3); margin-bottom: var(--s4); } .recht .felder { width: 100%; border-collapse: collapse; margin-bottom: var(--s4); font-size: .94rem; } .recht .felder th { width: 40%; text-align: left; font-weight: 600; color: var(--tinte-still); padding: .35rem .6rem .35rem 0; vertical-align: top; } .recht .felder td { padding: .35rem 0; vertical-align: top; } .recht-uebersicht { list-style: none; margin: 0 0 var(--s5); padding: 0; font-size: .94rem; } .recht-uebersicht li { margin-bottom: var(--s1); } .recht-uebersicht a { color: var(--tinte-leise); text-decoration: none; } .recht-uebersicht a:hover { color: var(--lapis); text-decoration: underline; } .recht section:target > h2 { color: var(--lapis); } /* ── Sprachkacheln: das Bild dieses Produkts ───────────────────────────── */ .sprachkachel { display: flex; flex-direction: column; align-items: center; gap: var(--s1); padding: var(--s3) var(--s2); border: 1px solid var(--linie); border-radius: var(--radius); background: var(--flaeche); text-align: center; text-decoration: none; color: inherit; transition: border-color .15s, transform .15s; } .sprachkachel:hover { border-color: var(--lapis); transform: translateY(-2px); } .sprachkachel[data-aktiv="ja"] { border-color: var(--lapis); background: var(--lapis-grund); } /* * Der Gruss in der EIGENEN Schrift der Sprache — das ist die Bildmarke dieses Produkts, und * sie kostet keine Datei. Feste Zeilenhöhe, weil Devanagari und Thai über und unter die * Grundlinie greifen: ohne sie springt jede Kachelreihe unterschiedlich hoch. */ .sprachkachel .gruss { font-family: var(--schrift-fremd); font-size: 1.22rem; font-weight: 500; line-height: 1.8; color: var(--tinte); } .sprachkachel .name { font-size: .84rem; font-weight: 600; color: var(--tinte-leise); } /* * EINE KACHEL, DIE NIRGENDS HINFÜHRT — der Fall der Verkaufsseite. * * Auf `pages/index.astro` stehen alle dreissig Sprachen als Kacheln, aber je Sprache gibt es * dort kein Ziel: der Kurs liegt hinter der Anmeldung, und eine offene Vorführung hat dieses * Produkt nicht (Betreiber-Entscheid). Die Kachel ist deshalb ein `div` und kein `a` — und * genau dann ist das Anheben beim Überfahren eine Einladung zu einem Klick, der nichts tut. * * `[data-starr]` nimmt die zwei Zustände zurück, die in diesem Haus „hier entlang" heissen: * den Lapis-Rahmen und den Hub. Alles andere bleibt stehen, damit die Wand auf der * Verkaufsseite und die hinter der Anmeldung dieselbe Wand sind. Die Alternative wäre * `pointer-events: none` am Kachelfeld gewesen — die kostet die Auskunft im `title` und die * Möglichkeit, einen Sprachnamen zu markieren. */ .sprachkachel[data-starr="ja"]:hover { border-color: var(--linie); transform: none; } /* ── Der Kursweg: Abschnitt, Einheit, Lektion ──────────────────────────── */ /* * `.einheit` und `.knoten` heissen NUR das. Bei Schachmich hiess `.feld` zweimal etwas * anderes — Formularhülle und Brettfeld —, und `.feld + .feld` schob sieben von acht Feldern * jeder Brettreihe nach unten, bis `overflow: hidden` die Grundreihe abschnitt. Ein Name, eine * Bedeutung. */ .einheit { border: 1px solid var(--linie); border-radius: var(--radius); background: var(--flaeche); padding: var(--s4); margin-bottom: var(--s3); } .einheit[data-zu="ja"] { opacity: .6; } .einheit-kopf { display: flex; gap: var(--s3); align-items: center; margin-bottom: var(--s4); } .einheit-kopf h3 { margin: 0 0 .1rem; } .einheit-kopf p { margin: 0; font-family: var(--schrift-fest); font-size: .82rem; color: var(--tinte-still); } .weg { display: flex; align-items: center; } .weg .glied { flex: 1; height: 3px; background: var(--linie); } .weg .glied[data-erledigt="ja"] { background: var(--gut); } .knoten { width: 2.5rem; height: 2.5rem; flex: 0 0 2.5rem; border-radius: 50%; border: 2px solid var(--linie); background: var(--flaeche); color: var(--tinte-still); display: grid; place-items: center; font-family: var(--schrift-fest); font-size: .82rem; font-weight: 700; cursor: pointer; text-decoration: none; } .knoten:hover { transform: scale(1.08); } .knoten[data-stand="erledigt"] { background: var(--gut-grund); border-color: var(--gut); color: var(--gut); } .knoten[data-stand="jetzt"] { background: var(--lapis); border-color: var(--lapis); color: var(--auf-lapis); box-shadow: 0 0 0 5px var(--lapis-grund); } .knoten[data-stand="zu"] { opacity: .5; cursor: default; } .knoten[data-stand="zu"]:hover { transform: none; } /* ── Die Übung ─────────────────────────────────────────────────────────── */ .uebung { display: flex; flex-direction: column; gap: var(--s4); } .frage { font-family: var(--schrift-fest); font-size: .8rem; letter-spacing: .06em; color: var(--tinte-still); margin: 0; } .zielwort { font-family: var(--schrift-fremd); font-size: clamp(2rem, 1.6rem + 2vw, 2.8rem); font-weight: 600; letter-spacing: -.02em; line-height: 1.2; color: var(--tinte); margin: 0; } .lautschrift { font-family: var(--schrift-fest); font-size: .86rem; color: var(--tinte-still); margin: 0; } .antworten { display: flex; flex-direction: column; gap: var(--s2); } .antwort { display: flex; align-items: center; gap: var(--s3); padding: .8rem .9rem; border: 1px solid var(--linie); border-radius: var(--radius-klein); background: var(--flaeche); color: var(--tinte); font: inherit; font-weight: 500; text-align: left; cursor: pointer; } .antwort:hover:not([disabled]) { border-color: var(--lapis); } .antwort[data-stand="richtig"] { border-color: var(--gut); background: var(--gut-grund); color: var(--gut); } .antwort[data-stand="falsch"] { border-color: var(--warnung); background: var(--warnung-grund); color: var(--warnung); } .antwort[data-stand="blass"] { opacity: .45; } .antwort .zeichen { font-size: 1.3rem; width: 1.6rem; text-align: center; } .satzzeile { min-height: 6rem; display: flex; flex-wrap: wrap; gap: var(--s2); align-content: flex-start; padding-bottom: var(--s3); border-bottom: 2px dashed var(--linie); } .vorrat { display: flex; flex-wrap: wrap; gap: var(--s2); } .wortkachel { font-family: var(--schrift-fremd); font-size: 1rem; font-weight: 500; padding: .5rem .8rem; border: 1px solid var(--linie); border-bottom-width: 3px; border-radius: var(--radius-klein); background: var(--flaeche); color: var(--tinte); cursor: pointer; } .wortkachel:hover { border-color: var(--lapis); } .wortkachel[data-weg="ja"] { opacity: .2; pointer-events: none; } .luecke { display: inline-block; min-width: 5rem; text-align: center; border-bottom: 2px solid var(--lapis); color: var(--lapis); font-weight: 700; } .luecke[data-leer="ja"] { color: transparent; } /* ── Die Lernkarte und ihre Bewertung ──────────────────────────────────── */ .lernkarte { border: 1px solid var(--linie); border-radius: var(--radius); background: var(--flaeche); padding: var(--s6) var(--s4); text-align: center; display: flex; flex-direction: column; gap: var(--s1); align-items: center; justify-content: center; min-height: 15rem; cursor: pointer; } .lernkarte .vorne { font-family: var(--schrift-fremd); font-size: 2rem; font-weight: 600; color: var(--tinte); } .lernkarte .hinten { font-size: 1.15rem; color: var(--tinte-leise); } .lernkarte .satz { font-family: var(--schrift-fremd); font-size: .92rem; color: var(--tinte-still); max-width: 30ch; margin-top: var(--s3); } .lernkarte .aufdecken { font-family: var(--schrift-fest); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--tinte-still); } .noten { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s2); } .note { display: flex; flex-direction: column; gap: .1rem; padding: .7rem .3rem .6rem; border: 1px solid var(--linie); border-radius: var(--radius-klein); background: var(--flaeche); color: var(--tinte); font: inherit; font-size: .86rem; font-weight: 700; text-align: center; cursor: pointer; } .note small { font-family: var(--schrift-fest); font-size: .7rem; font-weight: 400; color: var(--tinte-still); } .note:hover { border-color: var(--lapis); } .note[data-ton="nochmal"]:hover { border-color: var(--warnung); } .note[data-ton="leicht"]:hover { border-color: var(--gut); } /* ── Der Zähler ────────────────────────────────────────────────────────── */ .zaehler { border: 1px solid var(--linie); border-radius: var(--radius-klein); background: var(--flaeche); padding: var(--s3); } .zaehler b { display: block; font-family: var(--schrift-fest); font-size: 1.35rem; font-weight: 700; line-height: 1.2; color: var(--tinte); } .zaehler span { font-family: var(--schrift-fest); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--tinte-still); } .zaehler[data-ton="lapis"] b { color: var(--lapis); } .zaehler[data-ton="serie"] b { color: var(--safran); } /* ── Bewegung nur, wenn sie erwünscht ist ──────────────────────────────── */ /* * JEDE Animation und jeder Übergang dieser Datei steht unter diesem Riegel, und * `components/gestalt.test.ts` prüft es je Datei. Wer eine Bewegung hinzufügt und den Riegel * vergisst, nimmt jemandem mit Reisekrankheit oder einer vestibulären Störung die Seite weg. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } .sprachkachel:hover, .knoten:hover { transform: none; } }