/* ========================================================================== Design D1 (#197): gemeinsames visuelles Fundament -------------------------------------------------------------------------- Diese Datei traegt AUSSCHLIESSLICH das Fundament: Farb-, Flaechen-, Linien-, Abstands- und Typografierollen, die Tastaturfokuszustaende und die dafuer noetige Neutralisierung der Bootstrap-Default-Anmutung. Sie enthaelt bewusst KEINE seitenbezogenen Layoutregeln - die stehen weiterhin in "site.css". Die Designbloecke D2 bis D6 bauen auf den hier definierten Rollen auf, statt eigene Farb- und Abstandswerte einzufuehren. Gestalterische Grundlage ist die Ownerentscheidung "H1 - neutral mit warmer Identitaet" aus der abgeschlossenen Designexploration: warm-neutraler Grund, Burgunder fuer Bedienbares, Kupfer fuer Beleg-/Fundstellenangaben, Serif-Leseton, ruhige Linien statt schwerer Karten. Ausdruecklich keine Schatten-/SaaS-Card-Aesthetik und kein Pergamentlook. Reihenfolge im Layout: bootstrap.min.css -> foundation.css -> site.css. Die Datei steht damit NACH Bootstrap (die Ueberschreibungen unten greifen bei gleicher Spezifitaet) und VOR site.css (deren Regeln die hier definierten Rollen benutzen). ========================================================================== */ /* -------------------------------------------------------------------------- 0. Selbst gehostete Legendenschrift (Issue #218) Der transkribierte Umschriftsatz braucht Zeichen, die gewoehnliche Textschriften nicht fuehren. Die binaere Qualifikation hat zu Issue #218 am damaligen Bestand gemessen: 92 verschiedene Unicode-Codepoints, Junicode 2 deckte davon 81, und die elf fehlenden liefert DejaVu Sans. Am heutigen Bestand 437/1366 sind es 109 Codepoints, davon 91 aus Junicode und 18 aus DejaVu Sans - dieselbe Ableitung, ein groesserer Katalog. Beide Dateien sind selbst gehostet; es gibt keinen externen Schriftdienst und keine Anfrage an eine fremde Domain (Ownerentscheidungen 8 und 9). Die Reihenfolge ist Absicht. DejaVu steht ZUERST und ist per "unicode-range" auf genau die Codepoints begrenzt, die Junicode fehlen; Junicode folgt ohne Bereichsbegrenzung. Damit ist die Zuordnung DEKLARIERT: fuer jedes andere Zeichen ist DejaVu gar nicht waehlbar. Stuende DejaVu ohne Bereichsbegrenzung als allgemeiner Rueckfall dahinter, waere sie aus der Abwesenheit einer Glyphe erschlossen - und ein spaeter aus Junicode entferntes Zeichen kaeme unbemerkt in einer Sans-Form heraus. Die Menge ist ABGELEITET und keine Auswahl: sie ist genau die Luecke von Junicode ueber dem sichtbaren Legendenbestand. Mit dem Import der Katalognummern 201-406 (Issue #246) ist der Bestand gewachsen, und damit diese Luecke von elf auf siebzehn Codepoints (Issue #251); mit dem Block 407-434 1/2 (Issue #350) kommt genau einer hinzu, U+2663. Gemessen am Gesamtbestand 437/1366: U+205D TRICOLON 902 Vorkommen U+2606 WHITE STAR 1036 U+273F BLACK FLORETTE 588 U+26AC MEDIUM SMALL WHITE CIRCLE 335 U+2736 SIX POINTED BLACK STAR 228 U+2725 FOUR CLUB-SPOKED ASTERISK 94 U+2663 BLACK CLUB SUIT 63 (neu, 407-434 1/2) U+25A1 WHITE SQUARE 41 U+262A STAR AND CRESCENT 12 U+2605 BLACK STAR 10 U+2670 WEST SYRIAC CROSS 8 U+2724 HEAVY FOUR BALLOON-SPOKED ASTERISK 5 U+2732 OPEN CENTRE ASTERISK 5 U+2737 EIGHT POINTED RECTILINEAR BLACK STAR 4 U+2715 MULTIPLICATION X 3 U+2723 FOUR BALLOON-SPOKED ASTERISK 3 U+A7A8 LATIN CAPITAL LETTER S WITH OBLIQUE STROKE 2 U+273C OPEN CENTRE TEARDROP-SPOKED ASTERISK 2 Der neue ist KEINE Textaenderung: der Legendenwortlaut bleibt unangetastet, es aendert sich allein, aus welcher Datei die Glyphe kommt. U+2663 liegt in der bereits ausgelieferten DejaVu Sans und fehlt in Junicode - ohne diese Zeile kaeme er als Ersatzkaestchen heraus. Gefunden hat ihn dieselbe Messung wie die sechs vorigen: die Luecke von Junicode ueber den transkribierten Legendenwerten des kanonischen Dokuments, nachgeprueft von der Kandidatenqualifikation (Issue #221) am realen DataBundle und nicht von einer Sichtpruefung. Junicode traegt damit rund 94 Prozent der Zeichenvorkommen des Korpus, einschliesslich U+2720 MALTESE CROSS (724) und der beiden Klammern U+27E6/U+27E7 - und, fachlich entscheidend, die GPOS-Markenanbindung fuer U+0304 COMBINING MACRON: fuer P, N, R, V, M und S gibt es in Unicode keine vorkomponierte Form, dort ist die Anbindung die einzige Moeglichkeit. Die Dateien liegen unveraendert wie beim Upstream, nur in den WOFF2-Container ueberfuehrt (fontTools 4.64.0); kein Subsetting, keine Umbenennung. Die Originallizenztexte liegen daneben: "Junicode-OFL.txt" (SIL Open Font License 1.1) und "DejaVu-LICENSE.txt" (Bitstream Vera / Arev). "font-display" ist bewusst NICHT gesetzt: der Standardwert "auto" ueberlaesst dem Browser die Blockzeit. Ein "swap" wuerde die Umschrift zuerst in der Systemschrift zeigen - also genau in der Form, deren fehlende Zeichen der Grund fuer diese Schrift sind. -------------------------------------------------------------------------- */ @font-face { font-family: "NossOnline Legend"; src: url("../fonts/DejaVuSans.woff2") format("woff2"); font-style: normal; font-weight: 400; unicode-range: U+205D, U+25A1, U+2605, U+2606, U+262A, U+2663, U+2670, U+26AC, U+2715, U+2723, U+2724, U+2725, U+2732, U+2736, U+2737, U+273C, U+273F, U+A7A8; } @font-face { font-family: "NossOnline Legend"; src: url("../fonts/Junicode-Regular.woff2") format("woff2"); font-style: normal; font-weight: 400; } /* -------------------------------------------------------------------------- 0b. Selbst gehostete Markenschrift (Issue #240) Die vom Owner freigegebene Wortmarke - "Noss", Mittelpunkt U+00B7, "Online" - ist in Source Serif 4 gesetzt, Gewicht 500, optische Groesse 20. Beides zusammen gibt es nur in der VARIABLEN Fassung: Adobe liefert Source Serif 4 statisch ausschliesslich in ExtraLight, Light, Regular, Semibold, Bold und Black - einen statischen Schnitt "Medium" (500) gibt es nicht. Der Variable Font ist hier also keine Vorliebe, sondern die einzige Moeglichkeit, das freigegebene Gewicht auszuliefern, ohne es vom Browser synthetisieren zu lassen. Datei unveraendert aus der offiziellen Adobe-Veroeffentlichung 4.005R (source-serif-4.005_WOFF2.zip, Pfad VAR/SourceSerif4Variable-Roman.ttf.woff2), SIL Open Font License 1.1; der Lizenztext liegt als "SourceSerif4-OFL.txt" daneben. Kein Subsetting, keine Umbenennung, kein externer Schriftdienst - dieselbe Regel wie bei der Legendenschrift. "font-weight: 200 900" benennt die Spanne der wght-Achse. Ohne diese Angabe naehme der Browser eine statische 400er-Datei an und wuerde die 500 durch Fettung nachbilden, statt die Achse zu interpolieren. "font-display" ist wie bei der Legendenschrift bewusst NICHT gesetzt. Ein "swap" wuerde die Wortmarke zuerst in Georgia zeigen und dann auf Source Serif 4 umspringen - also einen sichtbaren Wechsel der Marke selbst. -------------------------------------------------------------------------- */ @font-face { font-family: "Source Serif 4"; src: url("../fonts/SourceSerif4Variable-Roman.ttf.woff2") format("woff2"); font-style: normal; font-weight: 200 900; } /* -------------------------------------------------------------------------- 1. Rollen (Design-Tokens) Benannt ist die ROLLE, nicht der Farbeindruck: "--noss-flaeche" statt "--noss-beige". Ein spaeterer Farbwechsel bleibt damit eine Aenderung an genau einer Stelle. -------------------------------------------------------------------------- */ :root { /* ---- Grundflaechen und Linien ---- */ /* Seitengrund der gesamten Anwendung. */ --noss-papier: #f9f8f6; /* Ruhig abgesetzte Flaeche fuer zusammengehoerige Gruppen (Suchformular, Kriteriengruppen, Quellenblock). Bewusst nur ein leichter Absatz vom Seitengrund - keine Karte mit Schlagschatten. */ --noss-flaeche: #f2efea; /* Dekorative Trennlinie und Blockrahmen. Bewusst zurueckhaltend; sie traegt keine Bedienbarkeit und muss deshalb nicht 3:1 erreichen. */ --noss-linie: #ddd9d3; /* Rahmen BEDIENBARER Elemente (Eingabefelder, Auswahlfelder, Kontroll- kaestchen). Deutlich kraeftiger als "--noss-linie", weil dieser Rahmen die einzige visuelle Begrenzung des Steuerelements ist und deshalb WCAG 2.1 Erfolgskriterium 1.4.11 (Nicht-Text-Kontrast, mindestens 3:1 gegen den angrenzenden Grund) erfuellen muss. Angrenzend sind beide Gruende: innen der Feldgrund "--noss-papier" (3,5:1), aussen bei Feldern innerhalb einer Gruppe "--noss-flaeche" (3,2:1). */ --noss-linie-bedienelement: #8a847c; /* ---- Text ---- */ /* Fliesstext. Gegen "--noss-papier" 17:1 - weit ueber WCAG AA. */ --noss-text: #17181a; /* Sekundaerer Text: Bezeichnungen, Masse, Quellenangaben - inhaltlich vollwertig, optisch aber hinter dem Fliesstext. Warm abgestimmter Grauton statt des Bootstrap-Blaugraus. Gegen "--noss-papier" 6,4:1, gegen "--noss-flaeche" 6,0:1. */ --noss-text-sekundaer: #5f5a53; /* Tertiaerer Text: Feldbeschriftungen, Hinweise, kleine Auszeichnungslabels. Eine Stufe leichter als der sekundaere Text, damit die vorhandene dreistufige Hierarchie erhalten bleibt. Gegen "--noss-papier" 5,5:1, gegen "--noss-flaeche" 5,0:1 - beide Werte erfuellen WCAG AA auch fuer normalen Text, nicht nur fuer grossen. */ --noss-text-tertiaer: #6a655d; /* Praegeschwarz der Wortmarke (Issue #240, Owner-Freigabe). Bewusst eine eigene Rolle und nicht "--noss-text": die beiden Werte liegen zwar nah beieinander, aber der Markenwert ist freigegeben und darf sich nicht mitaendern, wenn der Fliesstextwert der Anwendung einmal nachjustiert wird. Gegen "--noss-papier" erreicht er 15,9:1. */ --noss-marke-schrift: #1e1c18; /* ---- Akzente ---- */ /* Burgunder: alles Bedienbare - Links, Schalter, Fokus, aktive Zustaende. Der Wert ist mit der Kalibrierungsrunde nach D6 gedaempft worden (Ownerentscheidung "F1", Issue #211): das zuvor gesetzte #71222c empfand der Owner als zu satt. Gedaempft wurde ueber die SAETTIGUNG - 54 auf 29 Prozent bei zehn Punkten mehr Helligkeit -, waehrend der Ton bei 353 Grad und damit beim Burgunder bleibt. Papier, Flaeche und die Kupferrolle sind davon ausdruecklich unberuehrt. Gegen "--noss-papier" 6,9:1, gegen "--noss-flaeche" 6,4:1; weisser Text darauf 7,3:1. Die Aufhellung verbraucht damit Reserve, haelt aber jede Schwelle des Kontrastgates weiter mit Abstand. */ --noss-akzent: #7f464d; --noss-akzent-rgb: 127, 70, 77; /* Dieselbe Rolle im Hover-/Aktivzustand. Aus dem Akzent nach derselben Regel wie zuvor abgeleitet: Ton gehalten, Helligkeit sieben Punkte tiefer, Saettigung vier Punkte hoeher. Gegen "--noss-papier" 8,9:1; weisser Text darauf 9,5:1. */ --noss-akzent-kraeftig: #6b363d; --noss-akzent-kraeftig-rgb: 107, 54, 61; /* Text auf einer deckenden Akzentflaeche (Schalterbeschriftung, aktuelle Seite der Seitennavigation). Gegen "--noss-akzent" 7,3:1. */ --noss-text-auf-akzent: #ffffff; /* Kupfer: Beleg- und Fundstellenangaben (Quellenzitation, Digitalisat, Tafelbezug). Bewusst eine EIGENE Rolle neben dem Akzent, damit ein Beleg nicht wie ein Bedienelement aussieht. Gegen "--noss-papier" 5,5:1. */ --noss-beleg: #8a5a24; /* Fehler-/Validierungsmeldung. Der Wert bleibt gegenueber dem Stand vor diesem Block unveraendert (#178): D1 aendert keine fachliche Semantik. Die Aussage einer Meldung haengt ohnehin nicht an der Farbe - sie traegt role="alert", aria-invalid und eine eigene Schriftstaerke. */ --noss-fehler: #842029; /* Textstellenhervorhebung der Suche (). Warm statt signalgelb; der Fliesstext darauf erreicht 15:1. */ --noss-hervorhebung: #f4e3b0; /* ---- Statusrollen (Issue #216) ---- Die oeffentliche Projektstatusuebersicht faerbt Gesamtstatus und Bearbeitungsschritte. Die Farbe traegt dabei NIE allein: neben ihr stehen immer der Zustandstext, ein Symbol und - bei gezaehlten Schritten - der Zahlenwert. Das ist die Bedingung dafuer, dass die Uebersicht ohne Farbwahrnehmung vollstaendig lesbar bleibt. Vier der fuenf Rollen verweisen bewusst auf bereits beschlossene Werte, statt neue Farben einzufuehren: die Uebersicht soll sich in das Fundament einfuegen und keine Dashboard-Anmutung erzeugen. Ausdruecklich KEIN Alarmrot fuer den urheberrechtlich gesperrten Zustand - er ist kein Fehler, sondern eine sachliche Auskunft. */ /* Abgeschlossen bzw. veroeffentlicht. Der einzige neue Farbwert: ein zurueckhaltendes, entsaettigtes Gruen im selben Helligkeitsbereich wie Akzent und Kupfer, damit es neben ihnen nicht heraussticht. Gegen "--noss-papier" 6,0:1, gegen "--noss-flaeche" 5,5:1. */ --noss-status-fertig: #2f6b45; /* Laufende Arbeit - dieselbe Rolle wie alles Aktive der Anwendung. */ --noss-status-arbeit: var(--noss-akzent); /* Pruefung und Test tragen die Belegrolle: sie benennen einen Zustand der Erschliessung und kein Bedienelement. */ --noss-status-pruefung: var(--noss-beleg); /* Vorgesehen und in Planung: noch keine Arbeit, also kein Akzent. */ --noss-status-neutral: var(--noss-text-sekundaer); /* Urheberrechtlich gesperrt. Kupferfarben wie die Belegrolle - eine sachliche Auskunft ueber die Quellenlage, keine Fehlermeldung. */ --noss-status-gesperrt: var(--noss-beleg); /* ---- Fortschrittsbalken (Issue #216) ---- Schlank und ruhig, ohne Verlauf und ohne Rundung. Der Wert steht immer zusaetzlich als Text daneben; der Balken ist die Verstaerkung, nicht die Aussage. Die Fuellung erreicht gegen die Spur 5,2:1 und damit deutlich mehr als die 3:1 aus WCAG 2.1 Erfolgskriterium 1.4.11. */ --noss-fortschritt-spur: var(--noss-linie); --noss-fortschritt-wert: var(--noss-akzent); --noss-fortschritt-hoehe: 0.375rem; /* ---- Fokus ---- */ /* Ein einziger, ueberall gleicher Tastaturfokus. Vollflaechige Kontur statt halbtransparentem Schein: eine 30-Prozent-Flaeche des Akzents ueber dem Seitengrund erreicht nur 1,6:1 und verfehlt die geforderten 3:1 fuer Nicht-Text-Kontrast; die deckende Kontur erreicht 6,9:1. */ --noss-fokus: var(--noss-akzent); --noss-fokus-breite: 2px; --noss-fokus-abstand: 2px; /* ---- Abstaende ---- Eine kleine, feste Leiter statt frei gewaehlter Einzelwerte. Alle Werte in rem, damit sie der Grundschriftgroesse und damit der Benutzereinstellung folgen. */ --noss-abstand-3xs: 0.25rem; --noss-abstand-2xs: 0.375rem; --noss-abstand-xs: 0.5rem; --noss-abstand-s: 0.75rem; --noss-abstand-m: 1rem; --noss-abstand-l: 1.5rem; --noss-abstand-xl: 2rem; --noss-abstand-2xl: 3rem; /* ---- Radien ---- Klein gehalten: H1 setzt auf ruhige Linien, nicht auf abgerundete Karten. */ --noss-radius-klein: 0.25rem; --noss-radius: 0.375rem; /* ---- Typografierollen ---- Serif: Ueberschriften und laengerer Lesetext. Sans: Bedienoberflaeche, Beschriftungen, Tabellenkoepfe, Zahlen. Mono: Zeichengenaue technische Angaben. Legende: der transkribierte Umschriftsatz - seit Issue #218 die selbst gehostete Familie "NossOnline Legend" (siehe @font-face oben), mit der Serif-Kette als Rueckfall. Die drei uebrigen Ketten benennen ausschliesslich Schriften, die auf den ueblichen Plattformen vorhanden sind oder generisch aufgeloest werden. Es wird ausser der Legendenfamilie keine Schrift benannt, die geladen werden muesste, und kein externer Schriftdienst. Die Mono-Rolle traegt seit Issue #218 NICHT mehr den Legendenausschnitt der Trefferliste: derselbe Umschriftsatz muss an beiden Orten dieselbe gesicherte Glyphenabdeckung haben (Ownerentscheidung 7). */ --noss-schrift-serif: Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", Times, serif; --noss-schrift-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif; --noss-schrift-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", "Courier New", monospace; --noss-schrift-legende: "NossOnline Legend", var(--noss-schrift-serif); /* Die Markenrolle (Issue #240). Sie steht bewusst NEBEN der Serif-Rolle und ersetzt sie nicht: "--noss-schrift-serif" traegt den gesamten Lesetext der Anwendung, und Source Serif 4 dorthin zu legen wuerde jede Ueberschrift, jede Tabelle und jeden Quellenblock veraendern - ein Redesign, das dieses Issue ausdruecklich nicht will. Die Markenschrift gilt deshalb nur fuer die Wortmarke. Der Rueckfall ist die vorhandene Serif-Kette, damit die Marke auch ohne geladene Datei in einer Serifenschrift steht. */ --noss-schrift-marke: "Source Serif 4", var(--noss-schrift-serif); --noss-zeilenhoehe-text: 1.6; --noss-zeilenhoehe-kompakt: 1.3; /* Lesemass fuer laengeren Fliesstext. Die Einheit "ch" bezieht sich auf die Nullbreite der tatsaechlich verwendeten Schrift und ergibt in der Serif-Rolle ungefaehr 68 bis 76 Zeichen je Zeile. Angewendet wird das Mass erst dort, wo der jeweilige Designblock es braucht. */ --noss-lesemass: 72ch; } /* -------------------------------------------------------------------------- 2. Bruecke zu Bootstrap Bootstrap 5.3 fuehrt seine eigenen Grundwerte als CSS-Custom-Properties auf ":root". Sie hier auf die Rollen oben zu legen ist der vom Framework vorgesehene Weg - er faerbt Formularsteuerelemente, Schalter, Links und Rahmen konsistent um, OHNE Bootstrap-Komponentenregeln nachzubauen oder Framework-Interna zu ueberschreiben. Die Selektorspezifitaet ist dieselbe wie in Bootstrap (":root"); dass diese Datei spaeter eingebunden wird, entscheidet. Das Attribut "[data-bs-theme=light]" wird im Layout nicht gesetzt und kann diese Zuweisungen deshalb nicht verdraengen. -------------------------------------------------------------------------- */ :root { --bs-body-bg: var(--noss-papier); --bs-body-color: var(--noss-text); --bs-body-font-family: var(--noss-schrift-sans); --bs-body-line-height: var(--noss-zeilenhoehe-text); --bs-font-monospace: var(--noss-schrift-mono); --bs-emphasis-color: var(--noss-text); --bs-emphasis-color-rgb: 23, 24, 26; --bs-secondary-color: var(--noss-text-tertiaer); --bs-border-color: var(--noss-linie); --bs-border-color-translucent: var(--noss-linie); --bs-border-radius: var(--noss-radius); --bs-border-radius-sm: var(--noss-radius-klein); --bs-link-color: var(--noss-akzent); --bs-link-color-rgb: var(--noss-akzent-rgb); --bs-link-hover-color: var(--noss-akzent-kraeftig); --bs-link-hover-color-rgb: var(--noss-akzent-kraeftig-rgb); --bs-primary: var(--noss-akzent); --bs-primary-rgb: var(--noss-akzent-rgb); --bs-code-color: var(--noss-beleg); --bs-highlight-bg: var(--noss-hervorhebung); --bs-highlight-color: var(--noss-text); --bs-focus-ring-color: var(--noss-fokus); --bs-focus-ring-width: var(--noss-fokus-breite); } /* -------------------------------------------------------------------------- 3. Grundtypografie -------------------------------------------------------------------------- */ /* Eine einzige Grundschriftgroesse ueber alle Viewports. Zuvor sprang der Wurzelwert bei 768 px von 14 px auf 16 px und veraenderte damit schlagartig jedes rem-Mass - Schrift, Abstaende und Rasterbreiten zugleich. Ein fester Wurzelwert von 100 % uebernimmt stattdessen die Browser- und Benutzereinstellung unveraendert. */ html { font-size: 100%; } body { font-family: var(--bs-body-font-family); line-height: var(--noss-zeilenhoehe-text); background-color: var(--noss-papier); color: var(--noss-text); /* Verhindert, dass ein einzelnes ueberlanges Wort (lange Umschriften, Katalogkennungen) die gesamte Seite horizontal scrollbar macht. Kein Ersatz fuer umbruchfaehige Bausteine - die Regel begrenzt den Schaden. */ overflow-wrap: break-word; } /* Serif-Rolle fuer Ueberschriften. Ruhige, flache Groessenleiter statt der viewportabhaengigen Bootstrap-Staffel: die Ueberschrift soll gliedern, nicht dominieren, und ihre Groesse soll beim Verkleinern des Fensters nicht springen. */ h1, h2, h3, h4, h5, h6 { font-family: var(--noss-schrift-serif); font-weight: 600; line-height: var(--noss-zeilenhoehe-kompakt); color: var(--noss-text); margin-bottom: var(--noss-abstand-s); } h1 { font-size: 2rem; } h2 { font-size: 1.5rem; } h3 { font-size: 1.25rem; } h4 { font-size: 1.125rem; } h5 { font-size: 1rem; } h6 { font-size: 0.9375rem; } /* Serif-Rolle fuer laengeren Lesetext. Angewendet wird sie ausschliesslich auf die bereits vorhandenen Markup-Rollen fuer zusammenhaengenden Fliesstext: die Einordnung der Startseite sowie die Beschreibung eines Katalogeintrags und die einer Variantengruppe. Alle uebrigen Texte (Beschriftungen, Tabellenangaben, Zahlen, Steuerelemente) bleiben in der Sans-Rolle. ".variantengruppe-beschreibung" wird im aktuellen Datenstand (JKB-2, 202 Eintraege) von keinem Eintrag belegt - die Rolle existiert im Markup von "_CoinSide.cshtml" und ist durch T3 abgedeckt, nur die Quelldaten fuehren bislang keine gruppenbezogene Beschreibung. Sie steht hier trotzdem, damit beide Beschreibungsebenen dieselbe Leserolle tragen. Das Lesemass selbst setzt D1 hier bewusst NICHT: die Lesebreite der Beschreibungen ist Gegenstand von D4. */ .startseite-einordnung, .eintrags-beschreibung, .variantengruppe-beschreibung { font-family: var(--noss-schrift-serif); } a { color: var(--bs-link-color); } a:hover { color: var(--bs-link-hover-color); } mark { background-color: var(--noss-hervorhebung); color: var(--noss-text); padding: 0; } hr { border-top-color: var(--noss-linie); opacity: 1; } /* -------------------------------------------------------------------------- 4. Tastaturfokus Ein einziger, ueberall identischer Fokusindikator. Bootstrap loest den Fokus ueber "box-shadow" und setzt dafuer an mehreren Komponenten ausdruecklich "outline: 0" - diese Stellen werden hier gezielt zurueckgeholt, sonst bliebe die allgemeine Regel darunter an genau diesen Komponenten wirkungslos. Bewusst ":focus-visible" und nicht ":focus": ein mit der Maus betaetigter Schalter zeigt keinen Ring, die Tastaturbedienung dagegen immer. Bei Texteingabefeldern setzt der Browser ":focus-visible" auch beim Anklicken - dort ist der Ring deshalb in beiden Faellen sichtbar. -------------------------------------------------------------------------- */ :focus-visible { outline: var(--noss-fokus-breite) solid var(--noss-fokus); outline-offset: var(--noss-fokus-abstand); } /* Bootstrap setzt an diesen Komponenten ausdruecklich "outline: 0" - die allgemeine Regel darueber bliebe dort also wirkungslos. Die Kontur wird deshalb je Komponente zurueckgeholt, und zwar ausschliesslich unter ":focus-visible": ein mit der Maus oder per Beruehrung betaetigter Schalter, Navigationsumschalter oder Seitenlink zeigt damit KEINEN Ring (Codex-Review-Finding PR #198, P2). Die Spezifitaet entspricht der von Bootstrap, die spaetere Einbindung entscheidet. ".nav-link" ist mit Design D6 (#207) dazugekommen: Bootstrap setzt auch dort "outline: 0", und die Navigationsziele blieben deshalb die einzigen Elemente der Anwendung ohne sichtbaren Tastaturfokus. Aufgefallen ist das erst in der Integrationspruefung ueber alle Oberflaechen - an der einzelnen Seite war nichts zu sehen. */ .btn:focus-visible, .nav-link:focus-visible, .navbar-toggler:focus-visible, .page-link:focus-visible, .form-control:focus-visible, .form-select:focus-visible, .form-check-input:focus-visible { outline: var(--noss-fokus-breite) solid var(--noss-fokus); outline-offset: var(--noss-fokus-abstand); } /* Der blaue Schattenring des Standardthemas dagegen entfaellt in JEDEM Fokuszustand - auch bei Maus- und Beruehrungsbedienung, wo er sonst als einziger sichtbarer Rest der alten Anmutung stehen bliebe. Deshalb hier ":focus" und nicht ":focus-visible". */ .btn:focus, .btn:focus-visible, .nav-link:focus, .nav-link:focus-visible, .navbar-toggler:focus, .page-link:focus, .form-control:focus, .form-select:focus, .form-check-input:focus { box-shadow: none; } /* Der Rahmen eines fokussierten Feldes ist kein Fokusindikator, sondern der Aktivzustand des Steuerelements selbst - er gilt deshalb bewusst auch bei Mausbedienung, genau wie in Bootstrap. */ .form-control:focus, .form-select:focus, .form-check-input:focus { border-color: var(--noss-akzent); } /* -------------------------------------------------------------------------- 5. Neutralisierung der Bootstrap-Default-Anmutung Nur so weit, dass die Bloecke D2 bis D6 auf einem konsistenten Fundament arbeiten koennen: die Blautoene und der Schattenlook des Standardthemas verschwinden. Keine Aenderung an Struktur, Zustaenden oder Verhalten der Komponenten. -------------------------------------------------------------------------- */ .btn-primary { --bs-btn-color: var(--noss-text-auf-akzent); --bs-btn-bg: var(--noss-akzent); --bs-btn-border-color: var(--noss-akzent); --bs-btn-hover-color: var(--noss-text-auf-akzent); --bs-btn-hover-bg: var(--noss-akzent-kraeftig); --bs-btn-hover-border-color: var(--noss-akzent-kraeftig); --bs-btn-active-color: var(--noss-text-auf-akzent); --bs-btn-active-bg: var(--noss-akzent-kraeftig); --bs-btn-active-border-color: var(--noss-akzent-kraeftig); --bs-btn-disabled-color: var(--noss-text-auf-akzent); --bs-btn-disabled-bg: var(--noss-akzent); --bs-btn-disabled-border-color: var(--noss-akzent); /* Der eingelegte Glanz und der Druckschatten des Standardthemas entfallen. */ --bs-btn-active-shadow: none; } .btn-outline-primary { --bs-btn-color: var(--noss-akzent); --bs-btn-border-color: var(--noss-akzent); --bs-btn-hover-color: var(--noss-text-auf-akzent); --bs-btn-hover-bg: var(--noss-akzent); --bs-btn-hover-border-color: var(--noss-akzent); --bs-btn-active-color: var(--noss-text-auf-akzent); --bs-btn-active-bg: var(--noss-akzent); --bs-btn-active-border-color: var(--noss-akzent); --bs-btn-disabled-color: var(--noss-akzent); --bs-btn-disabled-border-color: var(--noss-akzent); --bs-btn-active-shadow: none; } /* Die Rahmen bedienbarer Felder tragen den kraeftigeren Linienwert (siehe "--noss-linie-bedienelement"); dekorative Linien bleiben davon unberuehrt. */ .form-control, .form-select, .form-check-input { border-color: var(--noss-linie-bedienelement); } .form-check-input:checked { background-color: var(--noss-akzent); border-color: var(--noss-akzent); } /* Die Kopfleiste sitzt auf dem Seitengrund und wird allein durch ihre Unterlinie abgesetzt - kein Schlagschatten und keine abweichende Flaeche. Die Struktur der Navigation selbst bleibt unveraendert; ihre Gestaltung ist Gegenstand von D6. Bootstrap fuehrt innerhalb von ".navbar" einen EIGENEN Satz Variablen und leitet ".navbar-nav .nav-link" daraus ab - "--bs-link-color" aus der Variablenbruecke greift dort also nicht (Codex-Review-Finding PR #198, P2). Die Navigationslinks blieben sonst im Bootstrap-Grau, obwohl H1 fuer alles Bedienbare den Burgunder vorsieht. Deshalb werden die Navbar-Variablen hier ebenfalls auf die Rollen gelegt. Die Wortmarke bleibt bewusst im vollen Textwert: sie benennt die Anwendung und ist kein Bedienelement neben den Navigationszielen. Bootstrap setzt sie bereits auf "--bs-emphasis-color-rgb" und damit auf "--noss-text"; sie ist der einzige Wert, der hier nicht umgelegt werden muss. */ .navbar { background-color: transparent; --bs-navbar-color: var(--noss-akzent); --bs-navbar-hover-color: var(--noss-akzent-kraeftig); --bs-navbar-active-color: var(--noss-akzent-kraeftig); --bs-navbar-disabled-color: var(--noss-text-tertiaer); /* Der Umschalter ist ein Bedienelement: sein Rahmen traegt deshalb den kraeftigeren Linienwert und nicht die dekorative Linie. */ --bs-navbar-toggler-border-color: var(--noss-linie-bedienelement); /* Das Umschaltersymbol ist bei Bootstrap ein eingebettetes SVG. In einer Daten-URL laesst sich keine CSS-Variable aufloesen, der Akzentwert steht hier deshalb ausnahmsweise als Literal - prozentkodiert, weil "#" in einer Daten-URL das Fragment einleiten wuerde. Ein T3-Fall bindet dieses Literal an "--noss-akzent", damit die beiden Stellen nicht auseinanderlaufen. */ --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%237f464d' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); } /* Die Wortmarke der Kopfleiste (Issue #240). Ersetzt den bisherigen reinen Text "NossOnline" durch die freigegebene Markenfassung: Signet links, Wortmarke rechts, gemeinsame Grundlinie. Die Masse stammen aus dem Markenblatt und sind bewusst in "em" der Wortmarkengroesse ausgedrueckt - dadurch bleibt das Verhaeltnis bei jeder Schriftgroesse gleich, auch wenn Betrachter die Basisschriftgroesse ihres Browsers erhoehen. Zwei Punkte, die nicht offensichtlich sind: 1. "font-variation-settings" setzt die optische Groesse fest. Der Startwert von "font-optical-sizing" ist "auto"; der Browser leitet die opsz-Achse dann aus der Schriftgroesse ab und laege bei 19 px bei etwa 14,25 statt bei den freigegebenen 20. Das Gewicht steht bewusst NICHT in derselben Deklaration, sondern in "font-weight": sonst gaebe es zwei Quellen fuer denselben Wert, und die wght-Achse folgt "font-weight" ohnehin. 2. Das Signet ist ein ersetztes Inline-Element und sitzt mit seiner Unterkante auf der Schriftgrundlinie. Seine Hoehe von 0,74 em ist die Oberlaenge von Source Serif 4 (0,737 em, aus der Fontdatei gemessen): damit teilen sich Signet und Wortmarke genau zwei Linien - die Grundlinie unten und die Oberkante des "l" in "Online" oben. Die Breite folgt dem Seitenverhaeltnis der Masterform, 44 zu 52. "letter-spacing: normal" ist keine Wirkungslosigkeit, sondern eine Schranke: die Freigabe verlangt Laufweite 0, und eine spaetere Sperrung auf einem Elternelement wuerde sonst bis in die Marke durchschlagen. */ .navbar-brand { /* Bootstrap fuehrt die Groesse der Wortmarke als eigene Variable; sie hier umzulegen ist der eingriffsaermste Weg. 1,1875rem sind bei unveraenderter Basisschriftgroesse genau die 19 px des Markenblatts. */ --bs-navbar-brand-font-size: 1.1875rem; font-family: var(--noss-schrift-marke); font-weight: 500; font-variation-settings: "opsz" 20; letter-spacing: normal; color: var(--noss-marke-schrift); white-space: nowrap; } .navbar-brand:hover, .navbar-brand:focus { color: var(--noss-marke-schrift); } .noss-signet { display: inline-block; vertical-align: baseline; height: 0.74em; width: 0.626em; margin-right: 0.34em; }