/* BUILD = "2026-08-22.15" */ /* LOGISCHE STATT PHYSISCHER RICHTUNGEN margin-inline-start statt margin-left und so fort. Der Browser setzt sie bei dir="ltr" nach links, bei dir="rtl" nach rechts - ohne dass irgendwo eine Sonderregel fuer Arabisch stehen muss. Fuer die zwoelf Sprachen mit ltr aendert sich dadurch nichts. Wer hier etwas ergaenzt, sollte bei den logischen Formen bleiben; die physischen sind nicht falsch, aber sie muessen fuer jede neue Sprache mit anderer Leserichtung von Hand nachgezogen werden. */ /** * 90-hegel-theme.css - das Farbschema und die Typografie von hegel.net * * Destillat aus assets/css/hegel.css (rund 1200 Zeilen, gewachsen seit * 1997). Uebernommen ist, was traegt; weggelassen ist Bootstrap 4, * Shariff (ersetzt durch components/social-share.njk), Font Awesome * 5.11 mit .eot-Schriften fuer den Internet Explorer, und das * PNG-Icon-Sprite. * * DIE GRUNDIDEE DES SCHEMAS * * Dunkler Rahmen, warmes Papier innen. Die Dreiecke bringen Rot, Blau, * Gruen, Magenta und Gelb mit - auf weissem Grund streiten die * miteinander, auf dem dunklen Blauviolett stehen sie ruhig. Der * Lesetext bekommt dagegen Cremeweiss statt Weiss, weil man ihn * laenger liest. * * Das Ebenen-Farbschema der Dreiecke (91-levels.css) gilt NUR fuer die * Dreiecke. Es ist Bedeutungstraeger - gleiche Farbe heisst gleiche * Systemebene - und hat mit der Seitengestaltung nichts zu tun. * * NICHT UEBERNOMMENE FEHLER * In der Vorlage stehen vier Regeln, die schon heute nichts tun: * ´.article {...} Akut statt Punkt * .posterpage{ position: relative, } Komma statt Semikolon * color: #ffd700; !important; !important auf eigener Zeile * .article img { loading: lazy } kein CSS-Attribut, gehoert ins HTML * Dazu ein verwaistes Kommentarende hinter .triangle-right a. */ :root { /* --- Das Schema ------------------------------------------------ */ --hegel-ground: #3a3c69; /* Seitengrund, dunkles Blauviolett */ --hegel-chrome: #616387; /* Navigation, Fusszeile, Reiter */ --hegel-chrome-hover: #454766; /* Abdunklung bei Hover - heller Grund*/ --hegel-accent: #f1f227; /* Navigationsschrift, Gelbgruen */ --hegel-accent-hover: #ffe766; /* Gold */ --hegel-link-dark: #f0e59e; /* Verweise auf dunklem Grund */ --hegel-active: #ffe0d8; /* aktiv, helles Rose - Tomate trug */ --hegel-ink: #2c2c2c; /* Schrift auf Papier - war bis 19.8. nur als Ersatzwert da */ --hegel-paper: hsl(45, 50%, 94%); /* Artikelflaeche, warmes Creme */ /* --- Anbindung an die Namen der base-website -------------------- */ --color-primary-800: var(--hegel-ground); --color-primary-900: #2b2d4e; --color-secondary-800: var(--hegel-chrome); --color-bg-subtle: var(--hegel-paper); } body { background: var(--hegel-ground); color: var(--color-gray-900, #1a1a1a); } /* --- Navigation und Fusszeile ------------------------------------ */ .site-header, .site-footer { background: var(--hegel-chrome); color: var(--hegel-accent); } .site-header a, .site-footer a { color: var(--hegel-accent); } .site-header a:hover, .site-header a:focus, .site-footer a:hover, .site-footer a:focus { color: var(--hegel-accent-hover); background: var(--hegel-chrome-hover); } .site-header a[aria-current="page"] { color: var(--hegel-active); } /* --- Lesetext ----------------------------------------------------- */ /* Cremegrund, begrenzte Zeilenlaenge, Silbentrennung und Ligaturen. Bei einem Nachschlagewerk mit langen Fachbegriffen ist hyphens:auto kein Schmuck - ohne das reissen 'Selbstvermittlung' und 'Wissenschaftlichkeit' die Zeilen auseinander. */ /* Alle Inhaltsflaechen bekommen den Papiergrund - nicht nur .page-content. Die Dreiecksseiten heissen .triangle-page und sassen sonst direkt auf dem dunklen Blauviolett; die Linkfarbe der Basis ist fuer hellen Grund gedacht und wurde dort unsichtbar. */ .page-content, .article, .triangle-page, .termini-table, main > article, main > .container { background: var(--hegel-paper); padding: 1.5rem; border-radius: var(--rounded-md, 4px); } /* --- Verweise ------------------------------------------------------ */ /* Zwei Umgebungen, zwei Farbwelten: auf Papier dunkles Blau, wie gewohnt auf dunklem Grund helles Gold (--hegel-link-dark) Ohne diese Trennung erbt der Verweis die Farbe fuer hellen Grund und verschwindet auf dem Seitengrund. */ .page-content a, .article a, .triangle-page a, .termini-table a { color: #1a4b8c; text-decoration-color: rgba(26, 75, 140, 0.4); } .page-content a:hover, .article a:hover, .triangle-page a:hover, .termini-table a:hover, .page-content a:focus, .article a:focus, .triangle-page a:focus, .termini-table a:focus { color: var(--hegel-active); text-decoration-color: currentColor; } .page-content a:visited, .article a:visited, .triangle-page a:visited, .termini-table a:visited { color: #5c3d8c; } /* Ausserhalb der Inhaltsflaeche - Kopf, Fuss, Uebergaenge */ body > a, .menu-overlay a { color: var(--hegel-link-dark); } /* Der Code-Marker traegt die Ebenenfarbe (91-levels.css) und braucht deshalb keine eigene Linkfarbe. */ .triangle-page .triangle-code a, .triangle-children .code, .triangle-fallback .code { color: inherit; } .article { max-width: 40em; margin-inline: auto; hyphens: auto; -webkit-hyphens: auto; letter-spacing: 0.03em; font-variant-ligatures: common-ligatures; text-align: justify; } .article h2, .article h3 { hyphens: none; text-align: start; } /* --- Schriftstapel je Schriftsystem -------------------------------- */ /* Ohne diese Regeln setzt der Browser CJK und Devanagari mit einer Ersatzschrift, die fuer Latein gewaehlt wurde - das Ergebnis ist uneinheitlich und teils unleserlich. Aus der Vorlage uebernommen. */ :lang(zh-Hans), :lang(zh) { font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Source Han Sans SC", "Noto Sans CJK SC", sans-serif; } :lang(zh-Hant) { font-family: "PingFang TC", "Hiragino Sans CNS", "Microsoft JhengHei", "Source Han Sans TC", "Noto Sans CJK TC", sans-serif; } :lang(ja) { font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", "Source Han Sans JP", "Noto Sans CJK JP", sans-serif; } :lang(ko) { font-family: "Apple SD Gothic Neo", "Malgun Gothic", "Nanum Gothic", "Source Han Sans KR", "Noto Sans CJK KR", sans-serif; } :lang(hi) { font-family: "Noto Sans Devanagari", "Mangal", "Kohinoor Devanagari", sans-serif; } :lang(ar) { font-family: "Noto Naskh Arabic", "Geeza Pro", "Traditional Arabic", serif; } /* CJK und Devanagari nicht trennen - die Regeln dafuer sind andere als bei lateinischer Schrift, und Browser trennen dort falsch. */ :lang(zh), :lang(ja), :lang(ko), :lang(hi), :lang(ar) { hyphens: none; -webkit-hyphens: none; } /* --- Ankerversatz -------------------------------------------------- */ /* Die Navigationsleiste steht fest oben. Ohne diesen Versatz verschwindet das Sprungziel darunter. Aus der Vorlage; heute ginge auch scroll-margin-top, aber die alte Loesung wirkt auch in aelteren Browsern. */ :target::before { content: ""; display: block; height: 4em; margin-top: -4em; visibility: hidden; pointer-events: none; } @supports (scroll-margin-top: 4em) { :target { scroll-margin-top: 4em; } :target::before { display: none; } } /* --- Druck ---------------------------------------------------------- */ /* Fuer ein Nachschlagewerk relevanter als bei den meisten Sites: die Dreiecke werden ausgedruckt und an die Wand gehaengt. */ @media print { @page { margin: 2cm; } body { background: #fff; color: #000; font-size: 11pt; /* Serifen auf Papier: bei laengeren Texten fuehren die Serifen das Auge in der Zeile, was auf dem Bildschirm bei niedriger Aufloesung nachteilig war, auf Papier aber nicht. hegel.net wird fuer akademische Arbeiten ausgedruckt. */ font-family: "Source Serif Pro", Georgia, "Times New Roman", serif; } .page-content, .article { background: none; padding: 0; max-width: none; } .site-header, .site-footer, .language-switcher, .social-share, .datatable-filters, .datatable-pagination, .triangle-nav, .no-print { display: none !important; } p, li { orphans: 2; widows: 2; } h1, h2, h3 { page-break-after: avoid; } /* Verweisziel ausschreiben - auf Papier ist ein Link sonst wertlos. Interne Anker und javascript: bleiben aussen vor. */ a[href^="http"]::after { content: " <" attr(href) "> "; font-size: 90%; word-break: break-all; } a[href^="#"]::after, a[href^="javascript:"]::after { content: ""; } .triangle-svg { max-width: 100%; page-break-inside: avoid; } /* Auf der Artikelseite gehoert nur der Text aufs Papier. Das zugehoerige Dreieck ist ein Navigationsmittel und auf einem Ausdruck nutzlos - ebenso der senkrechte Trennstrich, der die beiden Spalten teilt. */ .article-triangle, .crumbs { display: none !important; } .article-layout { display: block !important; border: none !important; } .article { border-inline-start: none !important; padding-inline-start: 0 !important; } /* Die Fusszeile der Seite wird nicht gedruckt - damit ist die Copyright-Zeile AM ARTIKEL die einzige Rechteangabe auf dem Papier. Sie muss also bleiben. */ .article-footer { display: block !important; border-top: 1pt solid #000; page-break-inside: avoid; } } /* --- Flaggenmenue -------------------------------------------------- */ /* Die Klappliste hat hellen Grund, sitzt aber in der dunklen Kopfleiste. Ohne diese Regeln erbt sie deren goldene Linkfarbe und ist auf Weiss praktisch unlesbar. */ /* AUFKLAPPEN AUCH OHNE JAVASCRIPT Die base-website oeffnet das Menue ueber .open bzw. aria-expanded="true" - beides setzt language-switcher.js. Faellt das Skript aus, laesst sich die Sprache mit der Maus gar nicht mehr wechseln; man muss die Adresszeile bearbeiten. Reflexivity Press hat dafuer einen Rueckfall, hegel.net nicht. Hier ist er, plus :focus-within fuer die Tastatur - damit funktioniert der Umschalter auch, wenn wieder einmal ein Skript an einem Import scheitert. Nur bei Zeigergeraeten: auf dem Handy gibt es kein Schweben, dort uebernimmt der Fingertipp und damit das Skript. */ @media (hover: hover) { .language-switcher:hover .language-menu, .language-switcher:focus-within .language-menu { max-height: 400px; opacity: 1; visibility: visible; transform: translateY(0); display: block; } } .language-switcher .language-menu { background: var(--hegel-paper); border: 1px solid var(--hegel-chrome); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); } .language-switcher .language-option { color: var(--color-gray-900, #1a1a1a); } .language-switcher .language-option:hover, .language-switcher .language-option:focus { background: var(--hegel-chrome); color: var(--hegel-accent); outline: none; } /* Der Knopf selbst steht auf der Kopfleiste und bleibt hell. */ .language-switcher .language-current { background: var(--hegel-paper); color: var(--color-gray-900, #1a1a1a); border: 1px solid var(--hegel-chrome-hover); } .language-switcher .language-current:hover { background: #fff; } /* Die Flaggen-Emoji brauchen eine Schrift, die sie farbig zeigt - sonst erscheinen auf manchen Linux-Systemen nur Buchstabenpaare wie 'DE' statt der Flagge. */ .language-switcher .flag { font-family: "Noto Color Emoji", "Apple Color Emoji", "Segoe UI Emoji", sans-serif; font-size: 1.1em; line-height: 1; } /* --- Dreieck und Ebenen-Reiter ------------------------------------- */ /* Das SVG hat viewBox 530x409 bzw. 1030x808 bzw. 2030x1606 und wuerde sonst die volle Breite einnehmen. Auf hegel.net steht daneben Platz fuer Beitraege, Hegeltexte und Querverweise - deshalb hoechstens die halbe Breite, ab Tablet nebeneinander. */ .triangle-figure { max-width: 34rem; margin: 0 0 1.5rem; } .triangle-figure svg { width: 100%; height: auto; display: block; } /* Zweispaltig ab Tablet: Dreieck links, Beitraege rechts. Auf dem Telefon untereinander - dort hat ein Dreieck neben Text keinen Platz. */ @media (min-width: 62em) { .triangle-page .container { display: grid; grid-template-columns: minmax(0, 34rem) minmax(0, 1fr); gap: 2rem; align-items: start; } .triangle-page .breadcrumb, .triangle-page .page-header, .triangle-page .triangle-nav { grid-column: 1 / -1; } .triangle-figure { grid-column: 1; grid-row: span 3; max-width: none; } .triangle-children, .triangle-articles { grid-column: 2; } } .tab-buttons { display: flex; gap: 0.25rem; margin-bottom: 0.5rem; border-bottom: 2px solid var(--hegel-chrome); } /* DIE REITER DUERFEN NICHT UNTER IHREN TEXT SCHRUMPFEN. * * Flex-Elemente haben flex-shrink: 1. Wird der Platz knapp, schrumpfen * sie - und weil der Text nicht mitschrumpft, endet der Rahmen vor dem * Wort. Das sah aus wie ein abgeschnittener Reiter und war eines: der * Kasten war zu klein, nicht der Text zu lang. * * Getroffen hat es den letzten Reiter am staerksten, weil der * Schrumpfanteil sich nach der Ausgangsbreite bemisst. Auf Deutsch * heisst er 'Uebersicht' und ist der breiteste; auf Englisch * 'Outline' und passte deshalb. * * min-width: max-content zieht die Untergrenze bei der Textbreite ein. * Damit ist der Fehler behoben, unabhaengig von der Sprache - und ohne * eine Zahl, die jemand pflegen muesste. * * FREIER PLATZ GEHT AN DIE EBENEN-REITER, nicht an alle vier. Der * letzte behaelt genau seine Textbreite, die drei anderen teilen sich * den Rest zu gleichen Teilen (flex-basis: 0 statt auto - sonst * behielte jeder seinen eigenen Vorsprung und sie blieben ungleich). * * flex-wrap als Notnagel: reicht es auch dafuer nicht, bricht die * Leiste um, statt die Reiter zu quetschen. */ .tab-buttons { flex-wrap: wrap; } .tab-button { flex: 1 1 0; min-width: max-content; padding: 0.35em 0.9em; border: 1px solid var(--hegel-chrome); border-bottom: none; border-radius: 4px 4px 0 0; background: var(--hegel-chrome); color: var(--hegel-accent); cursor: pointer; font: inherit; } /* Den Uebersicht-Reiter ueber seine Kennung ansprechen, nicht ueber :last-child. Er erscheint nur, wenn ein Baum vorliegt; fehlt er, traefe :last-child den Reiter 'Ebene 3', der dann nicht mitwuechse und die Leiste rechts offen liesse. */ #treeview-tab { flex-grow: 0; } .tab-button:hover { background: var(--hegel-chrome-hover); } .tab-button.active { background: var(--hegel-paper); color: var(--hegel-ground); font-weight: 600; } .tab-button:focus-visible { outline: 2px solid var(--hegel-accent-hover); outline-offset: -2px; } /* Verstecken uebernimmt das Skript ueber [hidden] - ohne JavaScript bleiben alle Ebenen sichtbar, was weniger uebersichtlich, aber nicht kaputt ist. */ .tab-panel[hidden] { display: none; } /* --- Flaggenmenue: Hoehe ------------------------------------------- */ /* Zwoelf Eintraege passen nicht in die voreingestellte Hoehe - im Test fehlten Japanisch und Hindi am unteren Rand. */ .language-switcher .language-menu { /* Zwoelf Eintraege sollen ohne Bildlauf hineinpassen. Die Voreinstellung der base-website ist auf sechs Sprachen ausgelegt; Japanisch und Hindi fielen unten heraus. Der Bildlauf bleibt als Notnagel fuer sehr niedrige Fenster. */ max-height: min(85vh, 40rem); overflow-y: auto; padding-block: 0.25rem; } .language-switcher .language-option { padding: 0.3em 0.8em; white-space: nowrap; } /* --- Hamburger in die Ecke gegenueber dem Logo -------------------- */ /* Im Quelltext steht der Knopf zwischen Suchfeld und Navigation, weil er dort logisch hingehoert: erst der Inhalt, dann das Mittel, ihn aufzuklappen. Sichtbar wirkt das eigenwillig - die Erwartung ist die Ecke gegenueber dem Logo, das zur Startseite fuehrt. 'order' aendert nur die Anzeige, nicht die Vorlesereihenfolge: Vorleseprogramme und die Tabulatortaste folgen weiter dem Quelltext. Deshalb wird hier umgeordnet und nicht die Vorlage umgebaut. FUER ARABISCH GESCHIEHT DAS VON SELBST. .header-content ist ein Flex-Behaelter in Zeilenrichtung; bei dir=rtl kehrt der Browser die Hauptachse um, und was in ltr rechts aussen sitzt, sitzt in rtl links aussen. Eine eigene rtl-Regel waere nicht nur ueberfluessig, sondern falsch - sie wuerde die Umkehr ein zweites Mal vornehmen. Aus demselben Grund steht hier margin-inline-start, nicht margin-left. */ .header-content .mobile-menu-toggle { order: 99; } /* Frueher stand hier: 'KEIN margin-inline-start: auto'. Diese Warnung ist ueberholt - sie steht weiter unten richtiggestellt, bei der Safari-Behebung. Sie hier stehenzulassen hiesse, dass die naechste Instanz die Behebung wieder herausnimmt, weil zwei Kommentare sich widersprechen. */ /* NACH OBEN KLAPPEN, WENN UNTEN KEIN PLATZ IST. Zwoelf Sprachen ergeben rund 30rem. Sitzt der Knopf weit unten - im Hamburger-Feld auf dem Handy der Regelfall -, faellt die Liste aus dem Bild und der Leser sieht nur die oberen Eintraege. language-switcher.js misst beim Oeffnen und setzt die Klasse. */ .language-switcher .language-menu.nach-oben { top: auto; bottom: calc(100% + 0.5rem); transform: translateY(10px); } .language-current[aria-expanded="true"] + .language-menu.nach-oben, .language-menu.nach-oben.open { transform: translateY(0); } /* NUR FAHNEN, WENN AUCH DAS NICHT REICHT. Zwoelf Fahnen in vier Spalten sind drei Zeilen statt zwoelf. Der Name faellt weg; das Kuerzel bleibt als title und aria-label am Verweis, und die Fahne allein ist fuer den Wechsel genug - wer die Sprache sucht, erkennt sie am Bild. Die Fahnen werden groesser gesetzt, weil sie jetzt allein tragen und mit dem Finger getroffen werden muessen: 44px ist das gaengige Mindestmass fuer Beruehrflaechen. */ .language-switcher .language-menu.kompakt { display: grid; grid-template-columns: repeat(4, 1fr); min-width: 0; width: max-content; max-width: min(90vw, 20rem); } .language-switcher .language-menu.kompakt li { display: contents; } .language-switcher .language-menu.kompakt .language-option { justify-content: center; min-width: 44px; min-height: 44px; padding: 0.4em; } .language-switcher .language-menu.kompakt .language-name { /* Nicht display:none - Vorleseprogramme sollen den Namen weiter finden. Nur aus dem Bild nehmen. */ position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .language-switcher .language-menu.kompakt .flag { font-size: 1.6em; margin: 0; } /* Die Klappliste darf aus der Kopfleiste herausragen - sonst schneidet deren Hoehe sie ab, egal wie gross max-height ist. */ .header-actions, .main-navigation, .header-content, .site-header { overflow: visible; } /* --- Knopf zum Ergaenzungstext ------------------------------------- */ /* Blaues Kaestchen mit weissem Fragezeichen, oben rechts neben der Ueberschrift. Springt zum Erlaeuterungstext am Seitenende. Nur drei Dreiecke haben einen. */ .page-header { position: relative; } .btn-extra { position: absolute; top: 0; right: 0; display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; background: var(--hegel-ground); /* Gelb wie die Menuepunkte - das '!important' bleibt, weil eine Regel der base-website dagegensteht. */ color: var(--hegel-accent) !important; border-radius: var(--rounded, 3px); font-weight: 700; text-decoration: none; line-height: 1; } .btn-extra:hover, .btn-extra:focus { background: var(--hegel-chrome); color: var(--hegel-accent) !important; } .triangle-extra { grid-column: 1 / -1; margin-top: 2rem; padding-top: 1.5rem; border-top: 2px solid var(--hegel-chrome); max-width: 40em; hyphens: auto; } .triangle-extra .anchor { display: block; } /* --- Seitenleiste --------------------------------------------------- */ .triangle-sidebar > section { margin-bottom: 1.5rem; } .triangle-sidebar h2 { font-size: 1.15rem; margin-bottom: 0.4rem; } .triangle-sidebar ul { margin: 0; padding-inline-start: 1.2em; } .triangle-sidebar li { margin-bottom: 0.35em; line-height: 1.4; } .triangle-sidebar .author, .triangle-sidebar .year, .triangle-sidebar .note, .triangle-sidebar .subtitle { color: var(--color-gray-600, #666); font-size: 0.9em; } .triangle-sidebar .typ { font-size: 0.75em; font-weight: 700; letter-spacing: 0.05em; color: var(--hegel-ground); } .triangle-sidebar .mehr a { font-style: italic; } .triangle-sidebar .code { font-variant-numeric: tabular-nums; color: var(--color-gray-600, #666); margin-inline-end: 0.3em; } /* --- Baumansicht (vierter Reiter) ---------------------------------- */ /* Einrueckung ueber --tv-depth statt verschachtelter Listen: der Baum kommt als flache Liste mit Tiefenangabe, weil er ohnehin nur EINEN Pfad zeigt und keine echte Verschachtelung braucht. */ .treeview ul { list-style: none; margin: 0; padding: 0; font-size: 0.95rem; line-height: 1.5; } .treeview li { padding-inline-start: calc(var(--tv-depth, 0) * 1.2rem); padding-block: 0.15em; border-inline-start: 2px solid transparent; } /* Der Weg von der Wurzel bis hierher wird hervorgehoben - damit sieht man auf einen Blick, wo man steht. */ .treeview .tv-path { border-inline-start-color: var(--hegel-chrome-hover); } .treeview .tv-current { border-inline-start-color: var(--level, var(--hegel-active)); background: rgba(0, 0, 0, 0.04); } .treeview .code { display: inline-block; min-width: 4.5em; font-variant-numeric: tabular-nums; color: var(--color-gray-600, #666); } .treeview .tv-current .code { background: var(--level, var(--hegel-ground)); color: var(--level-text, #fff); padding: 0 0.35em; border-radius: var(--rounded, 3px); min-width: 0; margin-inline-end: 0.3em; } /* --- Suche im Kopf -------------------------------------------------- */ /* Neben dem Logo, wie im Original. Bei einem Nachschlagewerk ist die Suche die Hauptfunktion und gehoert nicht ins Menue. */ .header-search { flex: 1 1 auto; max-width: 22rem; margin-inline: 1rem; position: relative; } .header-search .search-input { width: 100%; padding: 0.35em 2.2em 0.35em 0.6em; border: 1px solid var(--hegel-chrome-hover); border-radius: var(--rounded, 3px); background: var(--hegel-paper); color: var(--color-gray-900, #1a1a1a); font: inherit; } .header-search .search-button { position: absolute; right: 0.2em; top: 50%; transform: translateY(-50%); background: none; border: none; /* Der Knopf sitzt AUF dem hellen Eingabefeld, nicht auf der dunklen Kopfleiste - mit der Akzentfarbe waere er gelb auf gelb und praktisch unsichtbar. */ color: var(--hegel-ground); cursor: pointer; padding: 0.2em; display: flex; align-items: center; } .header-search .search-button:hover { color: var(--hegel-active); } .header-search .search-results { position: absolute; top: calc(100% + 0.3rem); left: 0; right: 0; z-index: 50; background: var(--hegel-paper); border: 1px solid var(--hegel-chrome); border-radius: var(--rounded, 3px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); max-height: min(70vh, 28rem); overflow-y: auto; } .header-search .results-list { list-style: none; margin: 0; padding: 0; } .header-search .result-link { display: block; padding: 0.35em 0.6em; color: var(--color-gray-900, #1a1a1a) !important; text-decoration: none; } .header-search .result-link:hover, .header-search .result-link:focus { background: var(--hegel-chrome); color: var(--hegel-accent) !important; } .header-search .result-code { display: inline-block; min-width: 4em; font-variant-numeric: tabular-nums; color: var(--color-gray-600, #666); } .header-search .search-results-header { display: flex; justify-content: space-between; align-items: center; padding: 0.3em 0.6em; border-bottom: 1px solid var(--hegel-chrome-hover); font-size: 0.85em; color: var(--color-gray-600, #666); } .header-search .search-close { background: none; border: none; font-size: 1.2em; cursor: pointer; line-height: 1; } /* Auf schmalen Bildschirmen unter das Logo statt daneben */ @media (max-width: 48em) { .header-search { order: 10; flex-basis: 100%; margin: 0.5rem 0 0; } } /* --- Fusszeile ------------------------------------------------------ */ /* Alle Zeilen auf dieselbe Mitte. Vorher richtete sich jede an ihrem eigenen Elternelement aus, wodurch 'nach oben' und die Verweisliste sichtbar gegeneinander verschoben waren. */ /* Kleinere Schrift als im Fliesstext - die Fusszeile ist Beiwerk, nicht Inhalt. Im Original war sie ebenfalls deutlich kleiner. */ .site-footer { font-size: 0.8rem; } .site-footer .footer-content { display: flex; flex-direction: column; align-items: center; text-align: center; padding-block: 1.5rem; gap: 0.3rem; } .site-footer p { margin: 0; } .site-footer .footer-top a { display: inline-block; padding: 0.2em 0.6em; text-decoration: none; } .site-footer .footer-license a { display: inline-flex; flex-direction: column; align-items: center; gap: 0.4em; text-decoration: none; } /* Das Signet ist ein SVG mit dunkler Schrift auf durchsichtigem Grund - auf der dunklen Fusszeile waere es kaum zu erkennen. */ .site-footer .cc-badge { background: #fff; padding: 0.15em 0.3em; border-radius: 3px; } .site-footer .footer-nav { width: 100%; margin-top: 0.5rem; } .site-footer .footer-nav ul { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 1.2rem; margin: 0; padding: 0; } /* --- Artikelseiten -------------------------------------------------- */ /* Pfeil-Breadcrumb. Im Original ein Bildstreifen; hier CSS mit clip-path. Vorteil neben der Dateigroesse: der Pfad ist echter Text, also vorlesbar, uebersetzbar und durchsuchbar. */ .crumbs { background: var(--hegel-chrome); overflow-x: auto; -webkit-overflow-scrolling: touch; } .crumbs ol { display: flex; list-style: none; margin: 0; padding: 0; min-width: max-content; font-size: 0.85rem; } .crumbs li { display: flex; } .crumbs li > a, .crumbs li > span { display: flex; align-items: center; gap: 0.35em; padding: 0.5em 1.6em 0.5em 1.4em; color: var(--hegel-accent); text-decoration: none; white-space: nowrap; /* Die Pfeilform: rechts eine Spitze, links eine passende Kerbe. */ clip-path: polygon(0 0, calc(100% - 0.8em) 0, 100% 50%, calc(100% - 0.8em) 100%, 0 100%, 0.8em 50%); margin-inline-start: -0.7em; } .crumbs li:first-child > a { margin-inline-start: 0; } .crumbs li > a:hover, .crumbs li > a:focus { background: var(--hegel-chrome-hover); color: var(--hegel-accent-hover); } /* Die aktuelle Seite hebt sich ab - heller Grund, dunkle Schrift. */ .crumbs li[aria-current="page"] > span { background: var(--hegel-paper); color: var(--hegel-ground); font-weight: 600; } .crumbs .crumb-home { font-size: 1.1em; } /* Zweispaltig ab Tablet: das zugehoerige Dreieck links, der Text rechts. Auf dem Telefon untereinander - dort hat ein Dreieck neben Fliesstext keinen Platz. */ .article-layout { padding-block: 1.5rem; } @media (min-width: 62em) { /* NUR mit Dreieck zweispaltig. Ohne die Zusatzklasse blieb das Raster auch dann stehen, wenn die Seite gar kein Dreieck hat - und der Text stand in der 12rem-Spalte, also rund fuenfunddreissig Zeichen breit. Betroffen waren die Rechtsseiten und die Infoseite in allen zwoelf Sprachen. Zusaetzlich :has() fuer den Fall, dass die Vorlage einmal ohne die Klasse ausgeliefert wird - dann greift wenigstens das. */ .article-layout--mit-dreieck, .article-layout:has(> .article-triangle) { display: grid; grid-template-columns: 12rem minmax(0, 1fr); gap: 2rem; align-items: start; } } .article-triangle a { display: block; text-decoration: none; color: inherit; } .article-triangle svg { width: 100%; max-width: 12rem; height: auto; display: block; } .article-triangle-label { display: block; font-size: 0.8rem; line-height: 1.3; margin-top: 0.3em; color: var(--color-gray-700, #444); } .article-triangle a:hover .article-triangle-label { color: var(--hegel-active); } .article-header h1 { margin-top: 0; } .article-meta { font-size: 0.9rem; color: var(--color-gray-600, #666); display: flex; gap: 1rem; margin-top: -0.3em; } .article-footer { margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid var(--color-gray-300, #ccc); font-size: 0.8rem; color: var(--color-gray-600, #666); } .article-footer .cc-badge { background: none; vertical-align: middle; margin-inline-start: 0.4em; } /* --- Untermenü-Trenner ---------------------------------------------- */ /* Gruppiert die Systemgliederung: Logik und Natur sind Geschwister, die Geist-Punkte liegen eine Ebene tiefer. */ .submenu-divider { height: 1px; margin: 0.35em 0.6em; background: var(--hegel-chrome-hover); list-style: none; padding: 0; } /* --- Untermenüs und Vorschlagslisten: dunkle Schrift ---------------- */ /* Beide haben hellen Grund, sitzen aber in der dunklen Kopfleiste und erbten deren goldene Schrift - gelb auf weiss ist praktisch unlesbar. Die Regel muss spezifischer sein als die Vererbung. */ /* DAS AUFGEKLAPPTE HAMBURGERMENUE. Auf schmalen Schirmen klappt die Navigation als weisse Flaeche auf, die Punkte erben aber die goldene Linkfarbe der Kopfleiste - Gold auf Weiss, kaum zu lesen. Dieselbe Ursache wie bei den Suchergebnissen und beim Sprachmenue, dritte Stelle. Der aktive Punkt behaelt seinen dunklen Grund und braucht deshalb helle Schrift. */ .main-navigation.is-open, .main-navigation[aria-expanded="true"], .nav-open .main-navigation { /* Dunkel wie die Kopfleiste: das aufgeklappte Menue ist ihre Fortsetzung, keine Flaeche eigener Art. */ background: var(--hegel-chrome); } .main-navigation.is-open a, .main-navigation.is-open .menu-toggle, .nav-open .main-navigation a, .nav-open .main-navigation .menu-toggle { color: var(--hegel-accent); } .main-navigation .is-active > a, .main-navigation [aria-expanded="true"] { color: var(--hegel-paper, #fff); } .submenu, .nav-submenu, .search-results, .language-menu { background: var(--hegel-paper); border: 1px solid var(--hegel-chrome); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); } .submenu a, .submenu-link, .nav-submenu a, .search-results a, .result-link, .language-option { color: var(--color-gray-900, #1a1a1a) !important; } /* AUCH DIE KINDER DER TREFFER. Die Regel oben faerbt das . Ein oder darin erbt aber weiter von der Kopfleiste - Gold auf Weiss, praktisch unlesbar. Deshalb alles im Ergebnisfeld. */ .search-results, .search-results * { color: var(--color-gray-900, #1a1a1a); } .search-results mark, .search-results .result-highlight { background: var(--hegel-chrome, #e8e0c8); color: var(--color-gray-900, #1a1a1a); } .submenu a:hover, .submenu-link:hover, .nav-submenu a:hover, .search-results a:hover, .result-link:hover, .language-option:hover, .submenu a:focus, .submenu-link:focus, .result-link:focus, .language-option:focus { background: var(--hegel-chrome); color: var(--hegel-accent) !important; } /* --- Tabellen im Fliesstext ----------------------------------------- */ /* Impressum, Nutzungsbedingungen und Datenschutz stammen aus der Zeit des Tabellenlayouts und bestehen aus einer einzigen Spalte. Ohne diese Regel bemisst der Browser die Spaltenbreite am laengsten Wort und macht daraus eine schmale Saeule. Bei einer Spalte also die volle Lesebreite. */ /* HUELLENBILDER EINHEITLICH audio.md und e-audio.md reihen CD-Huellen aneinander. Die Vorlagen sind verschieden gross, und die Vorverarbeitung entfernt die Groessenangaben aus dem Markdown - zu Recht, sie waren teils fehlerhaft geschrieben und gehoeren ohnehin ins CSS. Hier stehen sie also. Ein Bild in einem eigenen Absatz, das neben anderen steht, bekommt eine feste Hoehe; die Breite ergibt sich. So stehen die Huellen auf einer Linie, unabhaengig davon, wie das Original beschnitten war. Nur bis 12rem Breite: groessere Abbildungen - Faksimiles, Portraits, die Urkunden in memberships.md - sind Inhalt und keine Huellen. */ .article p > img[src*="/assets/bilder/"] { max-width: 100%; height: auto; } /* AN DER SEITE FESTMACHEN, NICHT AM DATEINAMEN. Erst habe ich die Huellen an '*-mp3.jpg' erkannt. Das traf die meisten und eine nicht: 'philosophie der geschichte.jpg'. Die blieb in Originalgroesse und nahm den halben Bildschirm ein, waehrend die anderen bei 9rem standen - zwei Groessen statt einer. Auf audio.htm und e-audio.htm sind ALLE Abbildungen Huellen. Also die Seite ansprechen, nicht die Datei. article.njk setzt dafuer data-seite. 30rem: bei 12rem war der Titel der CD nicht zu entziffern. Die Huellen sind hochformatig, deshalb ueber die Hoehe gesetzt; die Breite ergibt sich und wird bei schmalen Schirmen gedeckelt. Das CC-Zeichen am Seitenende ist ausgenommen. Es steht ebenfalls in einem Absatz und wurde mitvergroessert - ein Lizenzabzeichen von dreissig Zeilen Hoehe. */ [data-seite="audio"] .article p img:not(.cc-badge), [data-seite="e-audio"] .article p img:not(.cc-badge), .article .cover-reihe img { height: 30rem; width: auto; max-width: none; margin-inline-end: 0.75rem; margin-block-end: 0.75rem; vertical-align: top; } /* DIE BLAETTERLEISTE DER REIHEN article.njk benutzt die Bootstrap-Klassen .pagination, .page-item und .page-link - die gab es im alten System, im neuen Aufbau nicht mehr. Ohne Regeln bleibt eine nackte Aufzaehlung uebrig, mit Punkten untereinander. Auf gallery.htm sah das aus wie 1998. Waagerecht, ohne Aufzaehlungszeichen, mit Rahmen um die Ziffern - so wie es die Live-Seite zeigt. */ .serie-nav .pagination { display: flex; flex-wrap: wrap; gap: 0.25rem; list-style: none; margin: 0.75rem 0; padding: 0; align-items: center; } .serie-nav .page-item { margin: 0; } .serie-nav .page-link { display: inline-block; min-width: 2.25rem; padding: 0.3rem 0.6rem; text-align: center; border: 1px solid var(--hegel-chrome, #c9c2a8); border-radius: 3px; text-decoration: none; color: var(--color-gray-900, #1a1a1a); background: var(--hegel-paper, #fff); } .serie-nav a.page-link:hover, .serie-nav a.page-link:focus { background: var(--hegel-chrome, #e8e0c8); } .serie-nav .page-item.active .page-link { font-weight: 700; background: var(--hegel-chrome, #e8e0c8); } .serie-nav .page-item.disabled .page-link { opacity: 0.45; border-style: dashed; } /* Die Auslassung zwischen den Ziffern ist keine Schaltflaeche. */ .serie-nav .page-item.gap .page-link, .serie-nav .page-item .page-link.gap { border: none; background: none; min-width: 1rem; } /* KNOEPFE IN DEN BEITRAEGEN ml.md hat einen 'btn btn-primary' zur Diskussionsliste. Die Farbe kam aus Bootstrap und ist hier nicht definiert - dunkelblau auf dem lila Grund der Seite, kaum zu lesen. Die Klassen bleiben, damit die Quelltexte unveraendert bleiben koennen; nur ihr Aussehen kommt jetzt von hier. */ .article .btn, .article a.btn { display: inline-block; padding: 0.45rem 1rem; border-radius: 4px; text-decoration: none; border: 1px solid var(--hegel-ink, #2c2c2c); background: var(--hegel-paper, #fff); color: var(--hegel-ink, #2c2c2c) !important; } .article .btn-primary, .article a.btn-primary { background: var(--hegel-ink, #2c2c2c); color: var(--hegel-paper, #fff) !important; border-color: var(--hegel-ink, #2c2c2c); } .article .btn:hover, .article .btn:focus { background: var(--hegel-chrome, #e8e0c8); color: var(--hegel-ink, #2c2c2c) !important; } /* ZENTRIERTE ABSAETZE In zitate.md steht jedes Zitat in

. Das Attribut gibt es seit HTML5 nicht mehr, und der

-Block verhinderte ausserdem, dass markdown-it den Inhalt liest - Verweise und Kursivsatz blieben woertlich stehen. Die Vorverarbeitung macht daraus

. Die Ausrichtung steht damit hier, wo sie hingehoert. */ .article .zentriert, .article .zentriert p { text-align: center; } .article .zentriert p { margin-block: 0.75rem; } /* DAS SUCHSPIEL Das Dreieck ist die Bedienflaeche, nicht eine Abbildung daneben. quiz.js bindet das SVG ein und faengt die Klicks auf den vorhandenen Flaechen ab - deshalb brauchen sie hier nur noch einen Zeiger und eine sichtbare Reaktion. Ohne die Rueckmeldung beim Ueberfahren waere nicht zu erkennen, dass man ins Dreieck klicken kann. Das war am alten Spiel die groesste Huerde. */ .quiz-dreieck { width: 100%; max-width: 34rem; height: auto; display: block; margin: 1rem auto; } .quiz-dreieck a.quiz-zug { cursor: pointer; } .quiz-dreieck a.quiz-zug polygon { transition: opacity 0.12s ease; } .quiz-dreieck a.quiz-zug:hover polygon, .quiz-dreieck a.quiz-zug:focus polygon { opacity: 0.72; } .quiz-dreieck a.quiz-zug:focus { outline: 2px solid var(--hegel-ink, #2c2c2c); outline-offset: -2px; } /* Das Dreieck, in dem man gerade steht, ist kein Zug. */ .quiz-dreieck a.quiz-selbst { cursor: default; pointer-events: none; } .quiz-frage { font-size: 1.3rem; font-weight: 600; margin-block: 0.5rem 1rem; } .quiz-stand { font-variant-numeric: tabular-nums; color: var(--color-gray-700, #555); margin-block: 0.25rem; } /* Rueckfall, wenn kein SVG vorliegt - am untersten Ende eines Astes gibt es keines mehr. */ .quiz-wahl { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-block: 0.75rem; } .quiz-knopf, .quiz-steuerung button { padding: 0.5rem 0.9rem; border: 1px solid var(--hegel-chrome, #c9c2a8); border-radius: 4px; background: var(--hegel-paper, #fff); color: var(--hegel-ink, #2c2c2c); cursor: pointer; font: inherit; } .quiz-knopf:hover, .quiz-steuerung button:hover { background: var(--hegel-chrome, #e8e0c8); } .quiz-meldung { min-height: 1.5rem; margin-block: 0.75rem; } .quiz-richtig { color: #1a6b2a; font-weight: 600; } .quiz-falsch { color: #8b2020; } .quiz-erklaerung { color: var(--hegel-ink, #2c2c2c); font-weight: 400; margin-block-start: 0.5rem; } .quiz-steuerung { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-block-start: 1rem; } .quiz-zaehler { margin-inline-start: auto; font-variant-numeric: tabular-nums; color: var(--color-gray-700, #555); } /* DIE FRAGENLISTE Nach der Gebietswahl stehen die Fragen zum Aussuchen da, statt einer vorgegebenen Folge. Wer selbst waehlt, geht dem nach, was ihn gerade beschaeftigt. Schon Gespieltes bleibt sichtbar, aber zurueckgenommen - man soll sehen, was noch aussteht, ohne dass es verschwindet. */ .quiz-liste { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-block: 1rem; } .quiz-fragenknopf { padding: 0.45rem 0.85rem; border: 1px solid var(--hegel-chrome, #c9c2a8); border-radius: 4px; background: var(--hegel-paper, #fff); color: var(--hegel-ink, #2c2c2c); cursor: pointer; font: inherit; } .quiz-fragenknopf:hover, .quiz-fragenknopf:focus { background: var(--hegel-chrome, #e8e0c8); } .quiz-fragenknopf.quiz-schon { opacity: 0.5; border-style: dashed; } .quiz-modus { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-block: 0.75rem; } .quiz-modus button { padding: 0.4rem 0.9rem; border: 1px solid var(--hegel-chrome, #c9c2a8); border-radius: 4px; background: var(--hegel-paper, #fff); color: var(--hegel-ink, #2c2c2c); cursor: pointer; font: inherit; } .quiz-modus button[aria-pressed="true"] { background: var(--hegel-ink, #2c2c2c); color: var(--hegel-paper, #fff); border-color: var(--hegel-ink, #2c2c2c); } /* Die Gebietswahl auf dem Startbild. */ .quiz-gebiete { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-block: 1rem; } .quiz-gebiet { padding: 0.4rem 0.8rem; border: 1px solid var(--hegel-chrome, #c9c2a8); border-radius: 999px; background: var(--hegel-paper, #fff); cursor: pointer; font: inherit; } .quiz-gebiet[aria-pressed="true"] { background: var(--hegel-ink, #2c2c2c); color: var(--hegel-paper, #fff); border-color: var(--hegel-ink, #2c2c2c); } .quiz-gebiet .quiz-anzahl { opacity: 0.6; margin-inline-start: 0.35rem; } /* DER PFEIL AM BLATTDREIECK Am Ende eines Astes gibt es sonst nur den Weg zurueck. Der Pfeil fuehrt weiter in der Reihenfolge des Systems und traegt Code und Namen des Ziels - man soll sehen, wohin man geht, bevor man klickt. Oben, weil er dorthin gehoert: der naechste Begriff steht im System nicht unter dem jetzigen. */ .triangle-page .weiter { margin-block: 0 0.75rem; text-align: center; } .weiter-pfeil { display: inline-flex; align-items: baseline; gap: 0.45rem; padding: 0.35rem 0.9rem; border: 1px solid var(--hegel-chrome, #c9c2a8); border-radius: 999px; background: var(--hegel-paper, #fff); text-decoration: none; font-size: 0.94rem; } .weiter-pfeil:hover, .weiter-pfeil:focus { background: var(--hegel-chrome, #e8e0c8); } .weiter-zeichen { font-size: 1.1rem; line-height: 1; } .weiter-code { font-variant-numeric: tabular-nums; opacity: 0.7; } @media print { .triangle-page .weiter { display: none; } } /* DAS INHALTSVERZEICHNIS Es steht ueber dem Text und soll ihn nicht verdraengen: abgesetzt durch einen Rahmen, in kleinerer Schrift, ohne die Aufzaehlungs- punkte der uebrigen Listen. Beim Drucken faellt es weg - auf Papier blaettert man, statt zu springen, und die Sprungmarken sind dort wertlos. */ .article .inhalt { border: 1px solid var(--hegel-chrome, #c9c2a8); border-radius: 4px; background: var(--hegel-paper, #fff); padding: 0.75rem 1.25rem; margin-block: 1rem 1.75rem; font-size: 0.94rem; /* Nicht ueber die halbe Seite: ein Verzeichnis, das den Artikel verdeckt, hat seinen Zweck verfehlt. */ max-width: 34rem; } .article .inhalt-titel { font-size: 1rem; font-weight: 700; margin: 0 0 0.5rem; border: none; padding: 0; } .article .inhalt ul { list-style: none; margin: 0; padding: 0; } .article .inhalt ul ul { margin-inline-start: 1.1rem; margin-block: 0.15rem; } .article .inhalt li { margin-block: 0.2rem; } .article .inhalt a { text-decoration: none; } .article .inhalt a:hover, .article .inhalt a:focus { text-decoration: underline; } @media print { .article .inhalt { display: none; } } .article table, .page-content table, .triangle-extra table { width: 100%; border-collapse: collapse; margin-block: 1em; table-layout: auto; } .article table td, .page-content table td, .triangle-extra table td { padding: 0.4em 0.6em; vertical-align: top; /* Die Zeilenlaenge begrenzen wie beim uebrigen Text - nicht die Spalte. Bei mehrspaltigen Tabellen verteilt der Browser dann selbst. */ max-width: 40em; } /* Einspaltige Tabellen sind gar keine: sie als Fliesstext setzen. */ .article table tr > td:only-child, .page-content table tr > td:only-child, .triangle-extra table tr > td:only-child { display: block; max-width: 40em; padding-inline: 0; } .article table th, .page-content table th { padding: 0.4em 0.6em; text-align: start; border-bottom: 2px solid var(--hegel-chrome); } /* --- Ankerfilter ---------------------------------------------------- */ /* Zeigt an, wonach gefiltert wurde - eine gekuerzte Tabelle ohne Hinweis wirkt wie ein Fehler. */ .anchor-filter-note { margin: 0.5em 0; padding: 0.3em 0.7em; background: var(--hegel-chrome); color: var(--hegel-accent); border-radius: var(--rounded, 3px); display: inline-block; font-size: 0.9em; } .anchor-filter-reset { color: var(--hegel-accent-hover) !important; text-decoration: none; margin-inline-start: 0.5em; font-weight: 700; } /* --- Farbauszeichnungen in den Kommentaren -------------------------- */ /* Lutz Hansen und Martin Grimsmann zeichnen ihre Kommentare farbig aus. Die Farben tragen Bedeutung - sie unterscheiden Hegels Wortlaut von den Kommentarebenen -, deshalb bekommt jede zusaetzlich ein typografisches Merkmal: Farbe allein ist fuer Farbenblinde und auf Schwarzweiss-Ausdrucken keine Information. Die Toene sind gegenueber reinem Rot und Gruen abgedunkelt: auf dem cremefarbenen Lesegrund braucht es Kontrast, nicht Leuchtkraft. */ .article .redtext, .triangle-extra .redtext { color: #a3161f; font-weight: 600; } .article .greentext, .triangle-extra .greentext { color: #1d6b1d; } .article .bluetext, .triangle-extra .bluetext { color: #1a4b8c; font-style: italic; } @media print { /* Auf Papier bleibt nur das typografische Merkmal - die meisten Ausdrucke sind schwarzweiss. */ .redtext { color: #000; font-weight: 700; } .greentext { color: #333; } .bluetext { color: #000; font-style: italic; } } /* ====================================================================== FILTERLEISTE IN EINER ZEILE ====================================================================== Die Leiste der base-website setzt jedes Feld untereinander: auf einem breiten Bildschirm drei Zeilen fuer vier Felder, die nebeneinander passen. Uebernommen aus der Loesung von Reflexivity Press, wo Autor, Sprache, Jahr und Suchwort in einer Reihe stehen. 'flex-wrap' laesst sie auf schmalen Geraeten umbrechen - dort werden es wieder mehrere Zeilen, aber erst dann. Das Suchfeld bekommt doppeltes Wachstum: es traegt den laengsten Inhalt, und ein Auswahlfeld mit 'Alle Jahre' braucht keine 350 Pixel. */ .datatable-filters { display: flex; flex-wrap: wrap; gap: var(--space-3, .75rem); align-items: stretch; margin-bottom: var(--space-4, 1rem); } .datatable-filters select, .datatable-filters input[type="text"], .datatable-filters input[type="search"] { flex: 1 1 150px; min-width: 120px; max-width: 250px; } .datatable-filters .datatable-search { flex: 2 1 200px; max-width: 350px; } .datatable-filters .datatable-page-size { flex: 0 0 auto; min-width: 80px; max-width: 120px; } /* Die Beschriftungen sind in den Feldern selbst ('Alle Jahre'), danebengesetzt waeren sie doppelt. */ .datatable-filters label { display: none; } @media (max-width: 600px) { .datatable-filters { flex-direction: column; } .datatable-filters select, .datatable-filters input { max-width: none; } } /* SORTIERBARE SPALTEN ZEIGEN ES AN. Ohne Zeichen probiert man es aus oder laesst es bleiben. */ .datatable th[data-sortable="true"] { cursor: pointer; } .datatable th[data-sortable="true"]::after { content: "⇅"; margin-left: .4em; opacity: .35; font-size: .85em; } .datatable th[aria-sort="ascending"]::after { content: "▲"; opacity: .8; } .datatable th[aria-sort="descending"]::after { content: "▼"; opacity: .8; } /* ====================================================================== ANGEHAENGTE ANGABEN BRAUCHEN EINEN ABSTAND ====================================================================== 'Das Wahre ist das GanzeG/H' - so stand es in der Seitenleiste, weil Titel und Autor als zwei ohne Zwischenraum aufeinanderfolgen. Dasselbe in der Verweisliste zwischen Name und Beschreibung, in den Tabellen zwischen Titel und Untertitel. Ein Leerzeichen in der Vorlage waere die naheliegende Behebung und die schlechtere: es steht dann in zehn Vorlagen, und die elfte vergisst es. Hier steht es einmal. Gedankenstrich statt blossem Abstand, weil zwei Angaben ohne Trennzeichen wie eine aussehen - 'Das Wahre ist das Ganze G/H' liest sich als Titel mit Anhaengsel, 'Das Wahre ist das Ganze — G/H' als zwei Angaben. ::before statt eines Zeichens im Text: es laesst sich beim Markieren nicht mitkopieren, und wo die Angabe fehlt, faellt auch der Strich weg. */ /* Auch wenn der Name ein Verweis ist: seit die Autorennamen auf Autorenseiten fuehren, traegt mal das span die Klasse, mal der Verweis darin. Beide brauchen den Strich. */ .triangle-sidebar .author::before, .triangle-sidebar a.author::before, .triangle-articles .author::before, .triangle-books .author::before, .triangle-sidebar .note::before, .triangle-sidebar .year::before, /* NICHT '.subtitle' allgemein: in termini-table.njk ist das der Untertitel der SEITE, unter der Ueberschrift. Ein Gedankenstrich davor waere dort falsch. Nur der in der Seitenleiste ist eine angehaengte Angabe. */ .triangle-sidebar li .subtitle::before, .triangle-sidebar .uebersetzer::before, .datatable .untertitel::before, .datatable .band::before, .links-liste .beschreibung::before { content: " — "; color: var(--color-gray-400, #999); } /* In der Zeile eines Buches folgt der Band unmittelbar auf den Titel - 'Band 2' ist keine zweite Angabe, sondern Teil derselben. Dort genuegt der Abstand. */ .datatable .band::before { content: " "; } /* ====================================================================== SAFARI: DER HAMBURGER-KNOPF UND DAS SPRACHMENUE ====================================================================== ZWEI FEHLER, EINE URSACHENFAMILIE. 1. DER KNOPF SITZT IN DER MITTE. .header-content ist ein Flex-Behaelter mit justify-content: space-between und drei Kindern: Logo, Suchfeld, Knopf. Der Knopf traegt 'order: 99' und sollte damit ans Ende ruecken. Safari wendet 'order' an, verteilt den Raum aber nach der Quelltextreihenfolge - der Knopf landet zwischen Logo und Suchfeld. Andere Browser rechnen erst um, dann verteilen sie. 'margin-inline-start: auto' loest es unabhaengig von 'order': der Knopf schiebt allen freien Raum vor sich her und sitzt am Rand. Frueher stand hier ausdruecklich, das duerfe NICHT gesetzt werden, weil es den Raum aufsauge und Logo und Suchfeld zusammenruecken liess. Nachgesehen: '.header-search' hat in der base-website ueberhaupt keine Regel, kann also nicht wachsen, und '.site-branding' steht auf flex-shrink: 0. Der freie Raum liegt ohnehin nur zwischen Suchfeld und Knopf - genau dort, wo 'auto' ihn hinschiebt. Die alte Warnung galt einer aelteren Fassung des Kopfbereichs. Ich habe sie geprueft statt sie zu glauben; sonst haette sie die Behebung fuer immer verhindert. Bei dir=rtl kehrt der Browser die Hauptachse um, und margin-inline-start folgt der Schreibrichtung - deshalb 'inline' und nicht 'left'. 2. DAS SPRACHMENUE KLAPPT NICHT AUF. Auf iOS loest ein Klick auf ein Element, das kein Knopf und kein Verweis ist, kein 'click' aus - es sei denn, das Element ist als anklickbar erkennbar. Die Flagge ist ein in einem