/* BiBer – öffentliche Seite (self-hosted, „null extern"). ============================================================================================ GESTALTUNGSIDEE („heller Raum"): Die Seite hat einen hellen, leicht grauen GRUND (--canvas). Alles, was zusammengehört, liegt als weiße FLÄCHE (--surface) darauf. Struktur entsteht also durch Flächen und Abstand, nicht durch Rahmen und Linien. Das ist der gemeinsame Nenner der Vorbildseiten (stadt-salzburg.at, erwachsenenbildung-salzburg.at) und hat einen praktischen Nebeneffekt: Kontaktbox, Teaser-Karte, Download-Zeile & Co. sind weiß – auf weißem Grund waren sie vorher unsichtbar, auf dem grauen Grund treten sie von selbst hervor. Rot bleibt der Akzent und wird SPARSAM eingesetzt: Handlungsknöpfe, aktive Zustände, Akzentkanten. Gold (--gold, aus der BiBer-Onepage) ist die leise Zweitfarbe für Überschriften-Striche – zwei kräftige Farben nebeneinander würden sich gegenseitig entwerten. ============================================================================================ FÜNF Rollen für dieselbe Farbe, und die Unterscheidung ist der ganze Trick. Wer eine neue rote Stelle baut, muss nur EINE Frage beantworten: ist das Rot hier eine Fläche oder eine Schrift – und wenn Schrift, worauf steht sie? --accent = Markenrot als FLÄCHE (Knöpfe, Bänder, Menü- und Suchknopf). In BEIDEN Modi dasselbe #E2001A. Eine Fläche bringt ihren eigenen Hintergrund mit – sie muss sich nicht an den Seitengrund anpassen, und die Marke soll im Dunkelmodus nicht zu Rosa verblassen. --on-accent = die Schrift AUF dieser Fläche. In beiden Modi weiß (auf #E2001A sind das 4,95:1 – die 4,5:1 sind erfüllt). --accent-dark = dieselbe Fläche unter dem Mauszeiger, eine Spur dunkler. Auch in beiden Modi gleich, aus demselben Grund. --accent-ink = Rot als SCHRIFT auf einer FLÄCHE (Wortmarke, aktiver Menüpunkt, Pfeile in Listen, Anrisse beim Überfahren). Hell ist das die volle Markenfarbe – auf Weiß erreicht sie 4,95:1. Dunkel muss sie aufgehellt werden: auf der dunklen Karte kommt #E2001A nur auf 3,4:1. --link = Rot als SCHRIFT auf dem SEITENGRUND (Textlinks, Brotkrumen). Braucht hell einen dunkleren Ton als --accent-ink, weil der graue Grund weniger Kontrast hergibt als Weiß (#E2001A schafft dort nur 4,25:1). Im Dunkelmodus fallen beide zusammen. Die Breiten (--col-page/--col-text/--pad-page) stehen weiter unten im Block und sind dort erklärt; sie hängen mit den „sizes"-Angaben in _app/templates/registry.php zusammen (welche Bildgröße der Browser lädt). */ :root{ --accent:#E2001A; --accent-dark:#b80016; --on-accent:#ffffff; --accent-soft:#fdeff0; --accent-ink:#E2001A; --link:#b80016; --gold:#F2A900; /* --mark-* = das gefundene Suchwort in Treffern (Top-Suche + Suchseite). EIGENE Farbrolle, nicht --accent-soft: Das Rosa war auf Weiß kaum zu sehen und im Dunkelmodus überhaupt nicht (dunkles Weinrot auf dunkelgrauer Fläche) – die Hervorhebung hing allein an der Fettung. Goldtöne, weil Gold in dieser Gestaltung ohnehin die Hinweisfarbe ist (Bereichsstrich) und als Markierung von Fundstellen gelesen wird, ohne mit dem Markenrot zu konkurrieren. */ --mark-bg:#ffdf9e; --mark-ink:#241a05; /* --a11y = die Werkzeugsäule (Kontrast, Schriftgröße, Vorlesen). Bewusst eine EIGENE Farbe und nicht das Markenrot: Rot ist auf dieser Seite die Farbe des Angebots („Termin vereinbaren"), und die Barrierefreiheit ist kein Angebot, sondern ein Werkzeug. Ein zweites rotes Element hätte mit den Handlungsknöpfen um Aufmerksamkeit gestritten und dabei beide entwertet. Grün steht daneben für sich – und sticht auf dem grauen Grund stärker heraus als die weiße Karte, die vorher dort stand. Wie beim Markenrot gilt: FLÄCHE in beiden Modi gleich, weiße Schrift darauf (5,05:1). */ --a11y:#15803d; --a11y-dark:#0f6b33; --on-a11y:#ffffff; /* --read-mark = der Rahmen um den Absatz, der gerade vorgelesen wird. Er gehört zur Werkzeugsäule, trägt also deren Grün – aber als LINIE auf dem Seitengrund, nicht als Fläche. Deshalb eine eigene Rolle: im Dunkelmodus muss dieselbe Linie aufgehellt werden (das satte #15803d käme auf dem dunklen Grund nur auf 3,8:1), während die Fläche der Säule in beiden Modi gleich bleibt. Die Tönung darunter ist bewusst schwach – sie soll die Stelle zeigen, nicht den Text schwerer lesbar machen. */ --read-mark:#15803d; --read-mark-bg:rgba(21,128,61,.09); /* --more-* = „weiterlesen" auf den Karten der Bereichsliste. EIGENE Rollen, obwohl der Ton einmal derselbe war wie bei der Werkzeugsäule: Dort ist er eine FLÄCHE, hier hängen Fläche, Schrift und Kontur an zwei Zuständen (dieselbe Unterscheidung wie beim Markenrot). Genau weil es eigene Rollen sind, ließ sich Issue #111 im Farbblock erledigen, ohne eine einzige Regel im Blatt anzufassen. WARUM nicht Rot: „weiterlesen" ist ein Knopf, kein Link. Rot ist auf dieser Seite die Farbe des Angebots („Termin vereinbaren") – auf zwölf Karten nebeneinander wurde daraus eine Wand roter Wörter, die lauter war als der Inhalt (Issue #61). ⚠️ SEIT ISSUE #111 PETROL STATT GRÜN (Stephan am 17.08.2026): Die Farbe kommt aus dem gedruckten Folder („BiBer Folder-aussen-10-23-Druck.pdf"), aus der Landkarte von Salzburg. Gemessen ist die Karte #91d1db – als SCHRIFT auf Weiß unbrauchbar, nur 1,7:1 bei nötigen 4,5:1. Deshalb ist die Schrift-/Konturfarbe nicht der gemessene Wert, sondern DERSELBE FARBTON (188°), abgedunkelt bis er trägt: #2b7783 = 5,16:1 auf Weiß, praktisch das Gewicht des Grüns davor (5,02:1). ⚠️ Grün ist NICHT überall weg (Stephans Wahl): Werkzeugsäule/Vorlesen (--a11y) und die Lesemarke (--read-mark) bleiben grün. Wer sie später mitzieht, ändert genau jene Rollen – nicht diese. ⚠️⚠️ SECHS ROLLEN, WEIL DIE ZUSTÄNDE JE MODUS GETAUSCHT SIND (Stephan am 17.08. nach dem ersten Anlauf): Im HELLMODUS ist der Ruhezustand die FLÄCHE (#a4cddc mit schwarzer Schrift) und das Überfahren die KONTUR. Im DUNKELMODUS ist es genau umgekehrt – dort bleibt alles, wie es war: Kontur im Ruhezustand, Fläche beim Überfahren. Deshalb NICHT drei Rollen plus je eine Regel pro Modus, sondern sechs benannte Rollen und GENAU EINE Regel für den Knopf. Wer den Zustand tauschen will, tauscht Werte – kein Selektor muss dafür angefasst werden, und die Werte stehen weiter nur EINMAL je Modus. ⚠️ Die Kontur ist im Ruhezustand NICHT weg, sondern in der Farbe der Fläche. Ohne sie wüchse der Knopf beim Überfahren um 3 px und die Karte darunter würde zappeln. ℹ️ Schwarz auf #a4cddc = 12,3:1. Die FLÄCHE selbst kommt gegen die weiße Karte nur auf 1,70:1 – unter den 3:1, die für die Erkennbarkeit eines Bedienelements gefordert sind (WCAG 1.4.11). Stephan gemeldet und von ihm so gewollt; wer das später heilen will, gibt dem Ruhezustand eine eigene, dunklere Konturfarbe (--more-line) statt der Flächenfarbe. */ --more-bg:#a4cddc; /* Ruhezustand: Fläche */ --more-ink:#000000; /* Ruhezustand: Schrift */ --more-line:#a4cddc; /* Ruhezustand: Kontur (= Fläche, hält die Größe stabil) */ --more-bg-h:transparent;/* Überfahren: keine Fläche … */ --more-ink-h:#2b7783; /* … dafür Schrift … */ --more-line-h:#2b7783; /* … und Kontur in Petrol */ /* --muted wird IMMER auf --canvas gemessen, dem dunkelsten Grund, auf dem es steht. Historie, weil es zweimal knapp war: Auf dem alten Grau (#eceef1) reichte #697178 mit 4.27:1 nicht, #656d74 kam auf 4.52:1. Der Sandton (#fee7c4) ist eine Spur dunkler als das Grau – damit fiel #656d74 auf 4.37:1 zurück (gemessen an „Seite teilen:" und den Brotkrumen). Jetzt #5f666d: 4.80:1 auf Sand, 5.79:1 auf Weiß. ⚠️ Wer den Grundton ändert, misst diesen Wert neu: `node _app/tools/kontrast-pruefen.js`. */ --ink:#141a1e; --text:#3a4145; --muted:#5f666d; /* --copy = die Farbe des TEXTS, den die Redaktion schreibt. Zwei Wege, absichtlich: 1. am – wirkt über die Vererbung auf Absätze, Listen und Akkordeon-Inhalte, also auf alles, was in den Textbausteinen getippt wird; 2. ausdrücklich an den Baustein-Texten, die ihre Farbe selbst setzen MÜSSEN, weil sie auf einer Karte sitzen: .teaser-text, .download-note, .stat-label, .pl-lead. Was NICHT mitgeht, ist Beiwerk, das die Website selbst erzeugt – allen voran das automatische „Veröffentlicht am" (.page-pubdate trägt --text), dazu Brotkrumen, Suchvorschläge und Fußzeile. Genau dafür ist es eine eigene Rolle und nicht --text umgefärbt: --text ist der abgestimmte Ton fürs Beiwerk, --copy eine Aussage über INHALT. BiBer meldete am 2026-08-04, das dunkle Grau (#3a4145) wirke „ausgeblasst". Seither steht hier reines Schwarz – und im Dunkelmodus reines Weiß (Stephan am selben Tag: aufhellen). Text dunkler bzw. heller zu machen kann nie ein Kontrast-Problem erzeugen; wer die Werte dennoch ändert, misst nach: `node _app/tools/kontrast-pruefen.js`. */ --copy:#000000; --line:#dee2e6; --canvas:#fee7c4; --soft:#f4f6f7; --surface:#ffffff; --bg:#ffffff; /* Flächen, die IMMER hell/neutral sein sollen (Panel) */ /* --bar-* = eine Fläche, die in BEIDEN Modi dunkel bleibt (Servicezeile, eingeschalteter Umschalter). Bewusst NICHT --ink: das ist im Dunkelmodus fast weiß – die Servicezeile war damit hell auf hell und praktisch unlesbar. */ --bar-bg:#141a1e; --bar-fg:#e8ecef; /* ZWEI Breiten, und das ist die wichtigste Gestaltungsentscheidung der Seite: --col-page = die Fluchtlinie. Kopfleiste, Servicezeile, Mega-Panel, Brotkrumen, Inhalt und Fußzeile teilen sie sich – Logo und Seitentitel beginnen dadurch auf DERSELBEN senkrechten Linie. Bis 1560px wächst die Seite mit dem Fenster mit, darüber steht sie mittig. Wer es breiter will, dreht genau an dieser einen Zahl (und an $layoutMax in der Vorlagen-Registry, die daraus die zu ladende Bildgröße ableitet). --col-text = wie breit FLIESSTEXT höchstens wird. Raster-Bausteine (Teaser, Kennzahlen, Chips, Verweislisten, Banner) nutzen die volle Breite, ein Absatz nicht: ab etwa 90 Zeichen findet das Auge den nächsten Zeilenanfang nicht mehr zuverlässig. stadt-salzburg.at lässt den Text mitwachsen und landet auf großen Schirmen bei ~190 Zeichen je Zeile – genau das wollen wir nicht. --col-list = das Maß dazwischen, für gestapelte ZEILEN (Akkordeon, Verweisliste, Downloads, Sprungmarken). Eine Zeile über die volle Breite zwingt das Auge, von der Beschriftung links bis zum Pfeil rechts durch viel Leere zu wandern; ein Raster aus Karten will die Breite dagegen sehr wohl. Ohne dieses dritte Maß stand ein schmales Akkordeon neben einer bildschirmbreiten Verweisliste – dieselbe Seite in zwei Breiten. --pad-page = Seitenrand, wächst mit dem Fenster (am Handy schmal, am Desktop großzügig). */ --col-page:1560px; --col-list:62rem; --col-text:46rem; --pad-page:clamp(1.2rem,3vw,2.5rem); /* --pad-page-r = der Seitenrand RECHTS. Normalerweise derselbe wie links; steht die Werkzeugsäule offen und ist das Fenster zu schmal, um sie neben der Inhaltsspalte unterzubringen, wächst er um deren Breite. Die Säule liegt dann NEBEN dem Inhalt statt darüber – der einzige Weg, „immer sichtbar" und „verdeckt nie etwas" zugleich zu erfüllen. Warum eine Variable und nicht ein Rand am : der Aufmacher und die randlosen Bänder rechnen mit 100vw. Ein schmalerer Body hätte sie um die halbe Streifenbreite verschoben. --bleed-fix gleicht genau das aus. Randlose Bausteine brechen mit `margin-left:calc(50% - 50vw)` aus der Spalte aus; diese Rechnung trifft den Fensterrand nur, solange die Spalte MITTIG steht. Sobald rechts mehr Rand ist als links, landet der Ausbruch um die halbe Differenz zu weit links – Aufmacher und rotes Band bekamen dadurch rechts einen Streifen. Der Ausgleich ist genau diese halbe Differenz. */ --pad-page-r:var(--pad-page); --bleed-fix:calc((var(--pad-page-r) - var(--pad-page)) / 2); /* --kopf-luft = Abstand über und unter der Marke in der Kopfzeile. Die Kopfzeile hat bewusst KEINE feste Höhe: Sie ergibt sich aus Logohöhe + zweimal dieser Luft. Wer das Logo größer macht, muss die Kopfhöhe nicht nachziehen – sie wächst mit. */ --kopf-luft:1.05rem; --r-sm:8px; --r:12px; --r-lg:18px; --shadow-1:0 1px 2px rgba(16,24,32,.04), 0 8px 22px -16px rgba(16,24,32,.45); --shadow-2:0 18px 50px -24px rgba(16,24,32,.55); --band:clamp(2rem,1.2rem + 2.4vw,3.4rem); /* senkrechter Abstand zwischen Sinnabschnitten */ } /* Dunkelmodus: NUR auf ausdrücklichen Wunsch (Issue #101, Stephan am 10.08.: „erster Aufruf (voreingestellt) ist immer light mode!"). Bis dahin folgte die Seite der Systemvorgabe (@media prefers-color-scheme:dark). Wer sein Windows dunkel gestellt hat – und das ist inzwischen die Mehrheit –, bekam BiBer beim allerersten Besuch dunkel zu sehen. Der erste Eindruck einer Marke soll aber die Marke sein: weiße Flächen, Rot, das Logo in Schwarz. Der Dunkelmodus bleibt vollständig erhalten, er wird jetzt nur noch über den Kontrast-Knopf in der Werkzeugsäule eingeschaltet und in localStorage gemerkt (theme-init.js holt ihn beim nächsten Besuch vor dem ersten Bild zurück). ⚠️ Damit gibt es die Werte nur noch EINMAL. Vorher standen sie doppelt (Systemvorgabe / ausdrückliche Wahl), und genau dort war schon etwas auseinandergelaufen: die Rollen des „weiterlesen"-Knopfs (damals --more/--more-fill/--on-more, heute --more-*) standen nur in der Systemvorgabe. Wer den Knopf drückte, bekam die grüne Kontur des Hellmodus auf dunklem Grund. Beim Zusammenlegen mitgenommen. */ :root[data-theme="dark"]{ /* Markenrot bleibt Markenrot – Fläche und Schrift darauf wie im Hellmodus. Nur das Rot, das als SCHRIFT auf dem dunklen Grund steht, wird aufgehellt. */ --accent:#E2001A; --accent-dark:#b80016; --on-accent:#ffffff; --accent-soft:#2a1a1e; --accent-ink:#ff8090; --link:#ff8090; --gold:#f6c04e; --mark-bg:#6b5117; --mark-ink:#ffeec4; --ink:#f0f3f5; --text:#d2d9de; --muted:#98a2aa; --copy:#ffffff; /* Gegenstück zum Schwarz im Hellmodus (05.08.) */ --line:#2b3238; --canvas:#0f1316; --soft:#1d242a; --surface:#191f24; --bg:#14181b; --bar-bg:#05090b; --bar-fg:#ccd4da; --read-mark:#5ec98a; --read-mark-bg:rgba(94,201,138,.12); /* ⚠️ IM DUNKELMODUS BLEIBT DER KNOPF, WIE ER WAR (Stephan am 17.08.: „im dark-mode bleibt er gesamt so, wie er jetzt ist"). Also Kontur im Ruhezustand, Fläche beim Überfahren – genau umgekehrt zum Hellmodus. Getauscht werden nur die Werte, nicht die Regel. Kontur aufgehellt, weil das satte #2b7783 auf der dunklen Karte nur auf 1,7:1 käme; #7cc8d4 kommt auf #191f24 auf 8,77:1 – dieselbe Größenordnung wie das aufgehellte Grün davor (8,08:1). Hübsche Fügung: So landet der Ton fast genau auf dem gemessenen Kartenblau #91d1db – im Dunkelmodus steht also die Folder-Farbe selbst da. */ --more-bg:transparent; --more-ink:#7cc8d4; --more-line:#7cc8d4; --more-bg-h:#2b7783; --more-ink-h:#ffffff; --more-line-h:#2b7783; --shadow-1:0 1px 2px rgba(0,0,0,.5), 0 8px 22px -16px rgba(0,0,0,.9); --shadow-2:0 18px 50px -24px rgba(0,0,0,.95); } /* Schriftgröße-Stufen (Barrierefreiheits-Leiste) – skalieren alle rem-Maße. */ html[data-fs="1"]{font-size:112.5%} html[data-fs="2"]{font-size:125%} html[data-fs="3"]{font-size:140%} *{box-sizing:border-box} /* Sprünge innerhalb der Seite gleiten, statt zu springen: der Pfeilkreis im Aufmacher, der Nach-oben-Knopf, die Sprungmarken und die Brotkrumen. Ein harter Sprung lässt einen kurz nicht wissen, wo man gelandet ist — die Bewegung zeigt die Richtung mit. scroll-padding-top hält das Ziel unter der klebenden Kopfleiste hervor; ohne das landet jede angesprungene Überschrift dahinter. */ html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:5.5rem} /* Wer „weniger Bewegung" eingestellt hat, bekommt den harten Sprung zurück. */ @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} } body{margin:0;font-family:"PT Sans","Segoe UI",Arial,sans-serif;color:var(--copy); background:var(--canvas);line-height:1.65;font-size:1.05rem} /* ------------------------------- Lange Wörter (Issue #54) ------------------------------- Deutsch baut Wörter wie „Studienberechtigungsprüfung" – 27 Zeichen, die in keine schmale Spalte passen. Gemessen am 2026-08-02 im echten Browser: • Kachel 279 px breit, Textkasten 237 px, der Titel 272 px → die Karte SCHNITT ihn ab (.pl-item trägt overflow:hidden, sonst stünde er über dem Nachbarn). • Am Handy (390 px) ragte eine ausgeschriebene Web-Adresse bis 502 px, also 112 px über den rechten Rand. Einen Schiebebalken gab es trotzdem nicht – den fängt html{overflow-x:clip} weiter unten schon ab. Man sah nur den abgeschnittenen Text. Zwei Regeln, in dieser Reihenfolge: 1. hyphens:auto trennt nach deutschen Regeln MIT Trennstrich – die schöne Lösung. Sie setzt lang="de" voraus (steht im ) und ein Trennwörterbuch im Browser. Hat er keins, passiert einfach nichts – deshalb steht sie nie allein. 2. overflow-wrap:break-word ist der Gurt darunter: greift NUR, wenn ein Wort auch in einer eigenen Zeile nicht passt, und bricht es dann hart um. Damit ist „abgeschnitten" baulich ausgeschlossen, in jedem Browser, auf jeder Breite. Vererbt sich vom body auf alles. Silbentrennung im FLIESSTEXT nur auf schmalen Fenstern: in einer breiten Spalte ist sie unnötig und macht den rechten Rand unruhig. Überschriften trennen immer – sie sind groß, ein einziges Wort füllt dort schnell die Zeile. */ body{overflow-wrap:break-word} h1,h2,h3,h4,h5,h6, .pl-title,.teaser-title,.cta-title,.entry-name,.contact-title,.downloads-title, .sr-title,.sr-h2,.panel-head-title,.mega-top,.qs-top,.footer-section-title{ -webkit-hyphens:auto;hyphens:auto} /* Zeilenabstand UMBRECHENDER Karten-Überschriften. Sie hatten keinen eigenen und erbten deshalb die 1,65 des Fließtexts – gemessen: 33 px Abstand bei 20 px Schrift. Bei zwei Zeilen stand der Titel dadurch als loses Paar über der Karte statt als ein Block, und in einer Kachelreihe verschob das jede Karte anders (gemeldet von Stephan an den Buchtipps). 1,25 ist derselbe Wert, den die anderen Oswald-Überschriften ohnehin fahren (h2, .cta-title). BEWUSST nur die Karten-Überschriften: Der Fließtext behält seine 1,65 – dort ist der luftige Abstand das, was die Seite lesbar macht. Die Seiten-H1/H2 haben eigene Werte und bleiben. */ .pl-title,.teaser-title,.entry-name,.contact-title,.downloads-title, .sr-title,.sr-h2,.panel-head-title{line-height:1.25} @media (max-width:640px){ .content p,.content li,.pl-lead,.teaser-text,.contact-val{-webkit-hyphens:auto;hyphens:auto} } /* Textlinks tragen --link, nicht das reine Markenrot: #E2001A erreicht auf dem grauen Grund nur 4,25:1 und verfehlt die geforderten 4,5:1 knapp; auf dem dunklen Grund sind es sogar nur 3,7:1. Ein Textlink kann überall stehen – auf dem Grund wie auf einer weißen Karte –, deshalb gilt für ihn der Ton, der auf dem SCHLECHTEREN der beiden Gründe noch trägt. Das Markenrot bleibt unangetastet, wo es als FLÄCHE auftritt (Knöpfe, Bänder). */ a{color:var(--link)} /* ---------------- Externe Links: „hier geht es von der Website weg" (Issue #93) ---------------- Jeder Link, der ein neues Fenster öffnet (target="_blank"), bekommt rechts ein kleines Kästchen-mit-Pfeil. Es ist ein HINWEIS, kein zweiter Knopf: als ::after gehört es zum Link selbst, ist also nichts, was man eigens anklicken könnte, und es wandert beim Umbruch mit dem letzten Wort mit statt allein in einer neuen Zeile zu landen. ⚠️ Die Farbe ist der Kern der Sache. Ein fertig gefärbtes SVG als background-image bliebe für immer in EINER Farbe – im Dunkelmodus (--link wird dort zu #ff8090), auf einem roten Handlungsband oder in der Fußzeile wäre es dann falsch. Deshalb wird das Zeichen als MASKE gelegt und die Fläche darunter mit `currentColor` gefüllt: So trägt das Symbol immer exakt den Ton des Links, an dem es hängt – ohne eine einzige Extra-Regel je Ort. @supports davor, weil ohne Maskenunterstützung ein VOLL GEFÜLLTES Kästchen stehen bliebe (die Fläche ist ja da, nur die Aussparung fehlte) – lieber gar kein Zeichen als ein roter Klotz hinter jedem Link. */ :root{ --ico-extern:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.5 4H20v6.5'/%3E%3Cpath d='M20 4l-8.5 8.5'/%3E%3Cpath d='M18 14.5V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4.5'/%3E%3C/svg%3E"); } @supports ((-webkit-mask-image: none) or (mask-image: none)) { a[target="_blank"]::after{ content:""; display:inline-block; width:.68em;height:.68em; margin-left:.3em; vertical-align:-.03em; background-color:currentColor; -webkit-mask:var(--ico-extern) center/contain no-repeat; mask:var(--ico-extern) center/contain no-repeat; } } /* Die Ausnahmen – überall dort trägt das ::after schon eine ANDERE Aufgabe, und zwei Bedeutungen in einem Pseudoelement gehen nicht: • .footer-logo a – der Link ist ein Förderer-Logo, kein Text. Ein Symbol hinter einem Bild sieht aus wie ein Fehler im Bild. • .share-link – WhatsApp/E-Mail sind beschriftete Handlungsknöpfe; dass sie wegführen, sagt schon ihr Name. ⚠️ Wo das ::after schon eine andere Aufgabe hat, genügt `content:none` NUR dann, wenn diese Ausnahme auch wirklich gewinnt. Trägt die andere Regel mehr Klassen (Stretched-Links, Verweisliste), gewinnt sie das `content` zurück – Breite, Höhe und Maske von oben kommen aber trotzdem durch, und das Ergebnis ist ein eingefärbtes Kästchen. Solche Fälle werden deshalb BEIM BAUSTEIN zurückgenommen, mit dessen eigener Spezifität: • .ll-list a – Verweisliste: „›" bei eigenen Zielen, das Extern-Zeichen bei fremden – beides dort gesetzt • .teaser.has-link .teaser-title a – Trefferfläche der ganzen Karte • .page-aside .pagelist .pl-title a – dasselbe in der Seitenspalte Hier bleiben nur die Fälle, in denen das ::after wirklich frei ist: • .footer-logo a – der Link ist ein Förderer-Logo, kein Text. Ein Symbol hinter einem Bild sieht aus wie ein Fehler im Bild. • .share-link – WhatsApp/E-Mail sind beschriftete Handlungsknöpfe; dass sie wegführen, sagt schon ihr Name. */ .footer-logo a[target="_blank"]::after, .share-link[target="_blank"]::after{ content:none; } /* Der rote Ring gilt für die TASTATUR, nicht für die Maus (:focus-visible statt :focus). Mit :focus blieb er nach jedem Klick stehen – am auffälligsten am Akkordeon, wo das angeklickte Fach einen roten Rahmen um die ganze Zeile behielt, obwohl der Ring dort nichts mehr zu sagen hatte: dass das Fach offen ist, sagt das Minus-Zeichen und die rote Schrift. Wer mit der Tabulatortaste unterwegs ist, bekommt ihn unverändert – ohne sichtbaren Fokus wüsste dort niemand, wo er gerade steht (WCAG 2.4.7). */ a:focus-visible,button:focus-visible,summary:focus-visible{ outline:2px solid var(--accent-ink);outline-offset:2px} /* „hidden" muss gewinnen. Ohne diese Regel schlägt jede Klasse mit eigenem display-Wert (z. B. .a11y-btn{display:inline-flex}) das hidden-Attribut aus dem Browser-Stylesheet – die Folge waren zwei sichtbare Knöpfe, die nichts taten: • „Vorlesen" erscheint erst, wenn der Browser Sprachausgabe kann (site.js nimmt hidden weg), • „Teilen" erst, wenn es das System-Teilen-Menü gibt (am Desktop meist nicht). Beide standen trotzdem da. Ein Knopf, der etwas verspricht und nichts tut, ist schlimmer als kein Knopf. */ [hidden]{display:none !important} /* ---------------- Kopfleiste ---------------- Marke links, Suche mittig, Menü-Knopf rechts – die Anordnung aller drei Vorbildseiten. Die Leiste bleibt beim Scrollen oben stehen: bei ~130 Seiten ist der Weg zum Menü der meistgegangene, und ihn zurückzuscrollen wäre reine Arbeit. (Das geht nur, weil html{overflow-x:clip} und nicht overflow-x:hidden gesetzt ist – hidden würde zum Scroll-Container machen und sticky lahmlegen.) */ .site-header{background:var(--surface);border-bottom:1px solid var(--line); position:sticky;top:0;z-index:40} .site-header-inner{max-width:var(--col-page);margin:0 auto; padding:var(--kopf-luft) var(--pad-page-r) var(--kopf-luft) var(--pad-page); display:flex;align-items:center;gap:.8rem 1.5rem} /* ---------------- Marke: das BiBer-Logo ---------------- Hier stand bis 2026-08-04 ein nachgebauter Schriftzug in Oswald. Jetzt liegt das echte Logo aus dem Marken-Ordner im Kopf – unverändert übernommen, nur in der Größe gesteuert. ZWEI Zahlen, mehr braucht es nicht: --logo-h = Höhe des Logos. Die Breite rechnet der Browser aus dem Seitenverhältnis (width/height stehen am ), das Logo kann also nie verzerren. --kopf-luft = Abstand über und unter dem Logo. Die Kopfzeile wächst damit von selbst mit, statt eine feste Höhe zu tragen, die man beim Ändern der Logogröße vergisst. WARUM die Luft hier gesetzt wird und nicht im Bild: Die Originaldatei ist 160x150 und hat fast keinen eingebauten Rand (3px links, 4px rechts, 6px oben, 13px unten – gemessen an den Pixeln mit Deckkraft). Ohne eigenen Abstand klebte die Marke an Kante und Trennlinie. ⚠️ GRENZE DER SCHÄRFE: Die Datei ist 150px hoch. Bei doppelter Bildschirmauflösung reicht das bis 75px Anzeigehöhe. Wer --logo-h darüber dreht, braucht eine größere Datei – das Vektor-Original liegt im Marken-Ordner (Biber_Logo_11.ai, in Wahrheit ein PDF). */ .site-brand{--logo-h:4rem; display:flex;align-items:center;flex:0 0 auto;line-height:0;text-decoration:none} .brand-logo{display:block;height:var(--logo-h);width:auto} /* Das Logo ist schwarze Schrift mit rotem Punkt und verschwände im Dunkelmodus auf dem dunklen Kopf. Deshalb liegen zwei Fassungen im HTML und CSS zeigt genau eine. Der Weg über display: (statt mit media-Abfrage) ist der einzige, der auf den Umschalter in der Werkzeugsäule hört – der setzt :root[data-theme], und danach richtet sich seit Issue #101 alles. Die Systemvorgabe entscheidet hier nichts mehr. */ .brand-logo-hell{display:none} :root[data-theme="dark"] .brand-logo-dunkel{display:none} :root[data-theme="dark"] .brand-logo-hell{display:block} /* ---------------- Mega-Menü ----------------
/: klappt ohne JavaScript auf und ist von Haus aus tastaturbedienbar. site.js legt nur Komfort obendrauf (Esc, Klick daneben). */ .mega{margin-left:auto;flex:0 0 auto} .mega-toggle{display:inline-flex;align-items:center;gap:.55rem;cursor:pointer;list-style:none; background:var(--accent);color:var(--on-accent);border-radius:999px;padding:.55rem 1.15rem; font-family:"Oswald","Segoe UI",Arial,sans-serif;font-size:1.02rem;letter-spacing:.03em; user-select:none} .mega-toggle::-webkit-details-marker{display:none} .mega-toggle:hover{background:var(--accent-dark)} /* Burger-Symbol: drei Balken, die beim Öffnen zum Kreuz werden. Rein dekorativ (aria-hidden) – die Beschriftung „Menü" steht daneben und sagt, was passiert. */ .mega-burger{display:inline-flex;flex-direction:column;justify-content:center;gap:4px; width:18px;height:14px} .mega-burger i{display:block;height:2px;background:currentColor;border-radius:2px; transition:transform .18s ease,opacity .18s ease} .mega[open] .mega-burger i:nth-child(1){transform:translateY(6px) rotate(45deg)} .mega[open] .mega-burger i:nth-child(2){opacity:0} .mega[open] .mega-burger i:nth-child(3){transform:translateY(-6px) rotate(-45deg)} /* Das Panel hängt unter der GANZEN Kopfleiste, nicht unter dem Knopf: bei zehn Bereichen mit Unterpunkten braucht es die volle Breite. Position fix zur Kopfleiste über den Elternteil .site-header (position:sticky ist zugleich ein Bezugsrahmen). */ /* overscroll-behavior:contain – der Bildlauf bleibt IM Panel (Issue #89). Gemeldet als „die Trefferliste lässt sich nicht scrollen, es sieht so aus, als würde die Seite dahinter scrollen". Genau das passierte: Am Handy sitzt die Kopf-Suche IM Menü-Panel, das Panel ist der Bildlauf-Kasten. Ist er unten angekommen, reicht der Browser den nächsten Wisch von selbst an die Seite weiter (Scroll-Verkettung). Weil die Kopfleiste klebt und das Panel an ihr hängt, steht das Panel dabei still und der Seiteninhalt rauscht dahinter vorbei – gemessen: ein Wisch zu viel und die Seite stand auf y=1189, ohne dass sich im Panel etwas bewegt hätte. Beim Zuklappen findet man sich dann irgendwo mitten in der Seite wieder. `contain` beendet die Kette an der eigenen Kante, ohne sonst etwas zu ändern: innerhalb des Panels wird weiter ganz normal gescrollt. */ .mega-panel{position:absolute;left:0;right:0;top:100%;background:var(--surface); border-top:1px solid var(--line);box-shadow:var(--shadow-2); max-height:calc(100vh - 100%);overflow-y:auto;overscroll-behavior:contain;z-index:41} .mega-inner{max-width:var(--col-page);margin:0 auto;padding:1.6rem var(--pad-page-r) 2rem var(--pad-page)} /* Spaltensatz (columns) statt Raster (grid): Bereiche mit sieben Unterpunkten stehen neben solchen mit keinem. Ein Raster zwänge alle Zeilen auf die Höhe des größten Bereichs und risse Löcher; der Spaltensatz lässt die Blöcke einfach nachrücken und packt dicht. break-inside:avoid hält einen Bereich samt Unterpunkten zusammen. */ .mega-cols{list-style:none;margin:0;padding:0; columns:4 230px;column-gap:2.2rem} .mega-col{break-inside:avoid;margin:0 0 1.6rem} /* Die Bereichszeile ist FETT, in beiden Modi. Sie hatte bisher nur den goldenen Strich als Unterschied zu den Unterpunkten – auf dunklem Grund trägt eine Linie diese Unterscheidung nicht mehr, die Spalte las sich als eine einzige Liste. Gewicht wirkt in jeder Helligkeit. */ .mega-top{display:block;font-family:"Oswald","Segoe UI",Arial,sans-serif;font-size:1.08rem; font-weight:700; color:var(--ink);text-decoration:none;padding-bottom:.45rem;margin-bottom:.5rem; border-bottom:2px solid var(--gold)} /* Die Bereichszeile IST ein Link – in Ruhe sieht sie aber aus wie eine Überschrift (Oswald, fett, Strich darunter). Genau das war die Meldung: man hält die Spalte für eine reine Strukturansicht und klickt nur die Unterpunkte. Beim Überfahren wechselt deshalb nicht nur die Schrift auf Rot, sondern auch der goldene Strich – so meldet sich die ganze Zeile als EINE anfassbare Fläche zurück, nicht nur das Wort. Der Tastaturfokus bekommt dieselbe Auskunft; sonst wüsste nur die Maus, dass hier etwas zu holen ist. */ a.mega-top:hover,a.mega-top:focus-visible{color:var(--accent-ink);border-bottom-color:var(--accent-ink)} .mega-sub{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.1rem} /* Menüpunkte tragen --ink (dunkel fast weiß), nicht die gedämpfte Fließtextfarbe: das Panel ist eine Liste aus Zielen, kein Fließtext – jeder Punkt ist gleich wichtig, und im Dunkelmodus war --text auf dem Panelgrund sichtbar matter als die Bereichszeile darüber. */ .mega-sub a{display:block;text-decoration:none;color:var(--ink);font-size:.97rem; padding:.3rem .5rem;border-radius:var(--r-sm);line-height:1.35} .mega-sub a:hover{background:var(--soft);color:var(--accent-ink)} .mega .is-current{color:var(--accent-ink);font-weight:700} .mega-sub .is-current{background:var(--accent-soft)} /* Kopf-Suche. Am Desktop steht sie zwischen Marke und Menü-Knopf; auf schmalen Schirmen bekommt sie eine EIGENE ZEILE darunter, statt sich mit der Marke um denselben Platz zu streiten – dort wurde das Feld auf „Wonac…" zusammengequetscht. Sie am Handy ganz wegzulassen wäre die Alternative gewesen: bei rund 130 Seiten ist die Suche aber gerade dort der schnellste Weg und gehört sichtbar hin. */ /* --such-breite = die eine Zahl für die Breite der Kopf-Suche am PC. Der Aufklapper mit den Vorschlägen liest DIESELBE Zahl (siehe .qs-panel) – vorher hatte er eine eigene (42rem) und war dadurch deutlich breiter als das Feld, unter dem er hing. */ :root{--such-breite:42rem} .site-search{display:flex;align-items:center;gap:.4rem;flex:1 1 22rem;max-width:30rem;min-width:0;order:2} .site-search input{flex:1 1 auto;min-width:0} .site-brand{order:1} .mega{order:3} /* ---------------- Kopfzeile am PC: Marke links, Suche MITTIG, Menü rechts ---------------- Bis 2026-08-04 lag die Suche als drittes Flex-Element direkt neben der Marke und klebte an ihr; das Menü wurde mit margin-left:auto nach rechts gedrückt. Stephan: „mir klebt das Suchfeld zu sehr am Logo" und „mach das Suchfeld in der Mitte der Seite zentriert". Umgesetzt als Raster mit drei Spalten statt mit Flex. Der Grund ist genau die Zentrierung: Bei Flex müsste die Mitte zwischen zwei UNTERSCHIEDLICH breiten Nachbarn (Logo 68px, Menü-Knopf ~120px) ausbalanciert werden – sie säße immer ein Stück daneben. Zwei gleich große 1fr-Spalten links und rechts halten die Mitte wirklich mittig, egal wie breit Marke und Menü werden. minmax(0,…) in der Mittelspalte, damit sie unter das Wunschmaß schrumpfen DARF, wenn das Fenster eng wird – sonst schöbe sie den Menü-Knopf aus der Zeile. */ @media (min-width:861px){ .site-header-inner{display:grid;grid-template-columns:1fr minmax(0,var(--such-breite)) 1fr; align-items:center;column-gap:2rem} .site-brand{grid-column:1;justify-self:start} .site-search{grid-column:2;justify-self:stretch;flex:1 1 auto;max-width:none} .mega{grid-column:3;justify-self:end;margin-left:0} } @media (max-width:860px){ .site-header-inner{flex-wrap:wrap;row-gap:.65rem;gap:.6rem} /* Marke und Menü-Knopf bleiben in EINER Zeile, die Suche rutscht darunter – sonst wird der Kopf am Handy drei Zeilen hoch und schiebt den Inhalt weg. Der Schriftzug durfte hier schrumpfen (flex:1 1 0) und notfalls umbrechen. Ein Logo darf das nicht: Es würde stauchen. Es behält deshalb seine Größe (flex:0 0 auto) und wird stattdessen kleiner gesetzt. Neben dem Logo bleibt für den Menü-Knopf reichlich Platz – gemessen bis hinunter zu 320px Fensterbreite. Am Handy geht die Marke NÄHER an die Kante als am PC (Stephan 2026-08-04: „da kann es mehr zu den Kanten des weißen Bereiches gehen"). Der Kopf ist dort ohnehin knapp, und ein kleines Logo mit viel Luft ringsum wirkt verloren – lieber ein großes mit wenig. Gemeint ist die Luft OBEN UND UNTEN. Der linke Abstand bleibt --pad-page: Auf dieser Linie beginnt auch der Seitentitel und jeder Absatz darunter. Rückte die Marke davor, stünde sie sichtbar schief zu allem, was unter ihr steht. */ :root{--kopf-luft:.65rem} .site-brand{--logo-h:3.4rem} .mega{order:2;flex:0 0 auto} .site-search{order:3;flex:1 1 100%;max-width:none} } @media (max-width:640px){ .site-brand{--logo-h:3.1rem} } /* ---------------- Top-Suche: Aufklapper beim Tippen ---------------- Der Aufklapper trägt die Bildsprache des Mega-Menüs: weiße Fläche, Schatten, Bereichszeile in Oswald mit goldenem Strich, Treffer eingerückt mit weicher Hover-Fläche. EINE SPALTE, nicht vier wie im Menü. Das Menü ist eine feste Struktur, die man ÜBERFLIEGT – dort rücken vier Spalten dicht. Eine Trefferliste ist eine REIHENFOLGE, die man von oben nach unten liest; im Spaltensatz stünde der zweitbeste Treffer rechts oben und der schlechteste in der Mitte. Farben und Formen sind dieselben, das Layout ist es bewusst nicht. Alles hier entsteht erst durch site.js. Ohne JavaScript existiert kein .qs-panel, und das Suchformular verhält sich wie vor der Top-Suche. */ .site-search{position:relative} /* z-index 42: über der Kopfleiste (40) und über dem Menü-Panel (41). Beide sind nie gleichzeitig offen (sie schließen einander), die Reihenfolge muss aber trotzdem stimmen – etwa während der Schließ-Bewegung. */ /* Breite und linke Kante wie das Suchfeld darüber, nicht mehr eigenständig (Stephan 2026-08-04: „die Suchergebnisse exakt unter dem Suchfeld"). Vorher stand hier fest min(42rem, …) – das war breiter als das Feld und ragte rechts darüber hinaus. 100 % meint jetzt die Breite von .site-search, also Eingabefeld samt „Suchen"-Knopf. */ .qs-panel{position:absolute;left:0;top:calc(100% + .45rem); width:100%; background:var(--surface);border:1px solid var(--line);border-radius:var(--r); box-shadow:var(--shadow-2);z-index:42; /* Hoch genug für acht Treffer samt klebendem Fuß, aber nie höher als der Bildschirm. overscroll-behavior:contain aus demselben Grund wie beim Menü-Panel (Issue #89): Wer am PC im Aufklapper bis ans Ende rollt, schöbe sonst mit demselben Rad die Seite dahinter weiter, während der Aufklapper stehen bleibt. */ max-height:min(78vh,40rem);overflow-y:auto;overscroll-behavior:contain} .qs-inner{padding:.55rem} .qs-list{list-style:none;margin:0;padding:0} /* Bereichszeile = .mega-top in klein: Oswald, fett, goldener Strich. Das Gewicht trägt die Unterscheidung in beiden Helligkeiten, der Strich allein täte das im Dunkelmodus nicht. */ .qs-top{font-family:"Oswald","Segoe UI",Arial,sans-serif;font-size:1rem;font-weight:700; color:var(--ink);letter-spacing:.01em; padding:.5rem .55rem .3rem;margin:.55rem 0 .35rem; border-bottom:2px solid var(--gold)} .qs-list>.qs-top:first-child{margin-top:0} .qs-hit{display:block;text-decoration:none;color:var(--ink); padding:.4rem .55rem;border-radius:var(--r-sm);line-height:1.35} /* is-active = mit den Pfeiltasten ausgewählt. Sieht bewusst genauso aus wie Hover: Es ist dieselbe Aussage („dieser Treffer ist gemeint"), nur mit einem anderen Eingabegerät. */ .qs-hit:hover,.qs-hit.is-active{background:var(--soft)} .qs-hit:focus-visible{outline:2px solid var(--accent-ink);outline-offset:1px} .qs-hit-title{display:block;font-weight:600} .qs-hit-snip{display:block;font-size:.9rem;color:var(--text);margin-top:.1rem} /* Hervorhebung des Suchworts. KEIN waagrechter Innenabstand. Im Deutschen steckt das gesuchte Wort meist MITTEN in einer Zusammensetzung – „Altenarbeit", „Beratungsstellen". Ein padding-left/right schiebt die Wortteile auseinander, und aus „Altenarbeit" wird sichtbar „Alten arbeit". Der Farbfleck allein markiert genug; die Höhe kommt über padding-block, das keine Buchstaben verschiebt. Farbe fest aus --mark-*, nicht geerbt: Auf der Hover-Fläche wäre sonst Markenrot auf hellem Grund gelandet, und Markenrot als Schrift auf Farbfläche ist hier ohnehin ausgeschlossen. Fett kommt dazu, damit die Hervorhebung nicht allein an der Farbe hängt. */ .qs-hit mark,.sr-snippet mark,.sr-title mark{background:var(--mark-bg);color:var(--mark-ink); font-weight:700;padding:.06em 0;border-radius:2px} .qs-empty{padding:.7rem .55rem;color:var(--text)} /* „Alle 17 Treffer anzeigen": letzter Eintrag der Auswahlliste, damit die Pfeiltaste ihn erreicht – nicht bloß ein Link darunter. KLEBT AM UNTEREN RAND: Acht Treffer mit Textausschnitt sind höher als der Aufklapper, der Fuß lag dadurch unerreichbar unter der Kante – man musste erst scrollen, um zu erfahren, dass es überhaupt mehr gibt. Anders als bei der Seitenspalte (Issue #40) ist das hier gefahrlos: Es klebt EINE Zeile, nicht ein Kasten, der höher werden kann als das Fenster. */ .qs-more-row{position:sticky;bottom:0;z-index:1;background:var(--surface)} .qs-more{display:block;text-decoration:none;color:var(--link);font-weight:600; padding:.6rem .55rem;border-top:1px solid var(--line);border-radius:0} .qs-more:hover,.qs-more.is-active{background:var(--soft)} /* Kennzeichnung „Entwurf" – nur in der Entwurfs-Ansicht für Angemeldete. Gleiche Aussage wie die Kennzeichnung im Menü: das sehen Besucher noch nicht. */ .qs-draft{display:inline-block;margin-left:.4rem;font-size:.72rem;font-weight:700; text-transform:uppercase;letter-spacing:.05em; color:var(--on-accent);background:var(--muted);border-radius:999px;padding:.05rem .4rem; vertical-align:.08em} /* Ansage für Screenreader („7 Treffer"). Für Augen unsichtbar, aber im Baum – ausgeblendet mit display:none würde sie nicht vorgelesen. */ .qs-status{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden; clip-path:inset(50%);white-space:nowrap;border:0} /* Text, den nur OHREN bekommen: unsichtbar, aber im Baum – also für Bildschirmleser UND für unser eigenes Vorlesen da. Gebraucht für die Wörter „Telefon", „E-Mail", „Adresse" vor den Kontaktzeilen: dort steht für Augen ein gezeichnetes Zeichen, das keinen Text hat. ⚠️ NICHT display:none und NICHT visibility:hidden – beides nimmt den Text auch den Ohren weg. Auch keine Höhe 0 ohne clip-path: manche Browser lesen dann gar nichts mehr. */ .nur-hoerbar{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden; clip-path:inset(50%);white-space:nowrap;border:0} /* ---------------- Handy: Suche IM Menü ---------------- site.js schiebt dieses eine Formular unter 860px ins Menü-Panel (setupSearchPlacement). Damit hat die Kopfleiste nur noch Marke + „Menü": eine Zeile weniger, und die zwei roten Knöpfe unterschiedlicher Größe sind weg. BEWUSST NICHT KLEBEND. Das Feld samt Treffern oben festzuhalten hieße, einen Kasten festzuhalten, der höher werden kann als das Fenster – dieselbe Falle wie bei der klebenden Seitenspalte (Issue #40). Mitlaufen ist ehrlicher als eine zweite Bildlaufleiste. */ .mega-panel>.qs-in-menu{display:flex;flex-wrap:wrap;gap:.5rem;max-width:none; padding:1rem var(--pad-page-r) .5rem var(--pad-page)} /* flex-basis 0, NICHT auto: In einer umbrechenden Reihe (flex-wrap) bricht der Browser lieber um, als ein Element zu schrumpfen. Mit der Grundbreite „auto" beansprucht das Feld die volle Zeile, und „Suchen" landete darunter. Mit 0 teilen sich beide eine Zeile. */ .qs-in-menu input[type=search]{flex:1 1 0;min-width:0;font-size:1.05rem;padding:.7rem 1.1rem} .qs-in-menu button[type=submit]{padding:.7rem 1.2rem} /* Im Menü ist der Aufklapper kein schwebender Kasten mehr, sondern der Inhalt des Panels. ⚠️ overflow:visible ist hier PFLICHT, nicht Kosmetik. Ohne Höhendeckel gibt es nichts zu rollen – ein `overflow-y:auto` macht den Kasten aber trotzdem zum Bildlauf-Ziel. Zusammen mit dem overscroll-behavior:contain der Grundregel verschluckt er dann jeden Wisch: der Kasten selbst kann sich nicht bewegen und reicht auch nichts mehr ans Menü-Panel weiter. Gemessen (390×844, echte Touch-Ereignisse): Trefferliste völlig unbeweglich, Panel-Rollwert blieb 0 von 378. Wer den Aufklapper aus dem Bildlauf herausnimmt, muss ihn ganz herausnehmen. */ .qs-in-menu>.qs-panel{flex:1 1 100%;position:static;width:auto;max-height:none;overflow:visible; border:0;border-radius:0;box-shadow:none;background:transparent} .qs-in-menu>.qs-panel .qs-inner{padding:.4rem 0 .8rem} /* Treffer da -> Navigation weicht. Feld leeren oder Esc -> sie ist zurück, an derselben Stelle. */ .mega-panel.qs-active>.mega-inner{display:none} @media (max-width:860px){ /* Der Aufklapper darf am Handy nicht schmaler sein als der Bildschirm. */ .qs-panel{width:calc(100vw - 1.5rem)} } /* ---------------- Schleier hinter den Treffern ---------------- Sobald Treffer stehen, wird die Seite dahinter unscharf und dunkler. Grund: Der Aufklapper liegt mitten in einer vollen Seite (Aufmacherbild, Kennzahlen, Fließtext) und musste sich gegen dieses Bildrauschen behaupten. Unschärfe nimmt dem Hintergrund die Aufmerksamkeit, ohne ihn zu verstecken – man sieht weiter, wo man ist. z-index 30: über dem Seiteninhalt (0–3), aber UNTER der Kopfleiste (40). Damit bleiben Suchfeld, Aufklapper und Menü-Knopf scharf, ohne dass irgendwo eine Ausnahme nötig wäre – die Kopfleiste ist ein eigener Stapel-Zusammenhang und liegt ohnehin darüber. Scharf bleibt ebenfalls die grüne Barrierefreiheits-Säule (z-index 55): ein Werkzeug, das man immer erreichen können muss, ist kein Seiteninhalt. Immer im Dokument, nur durchsichtig – wie beim Rechtsseiten-Panel (.panel-backdrop). Ein Element, das erst bei Bedarf entsteht, könnte nicht überblenden. backdrop-filter steht allein im offenen Zustand: So kostet der Schleier zugeklappt keine Rechenzeit. Kann ein Browser kein backdrop-filter, bleibt die Abdunklung – die Wirkung ist schwächer, aber die Absicht kommt an. */ .qs-veil{position:fixed;inset:0;z-index:30;opacity:0;pointer-events:none; transition:opacity .18s ease} .qs-veil.is-on{opacity:1;pointer-events:auto; background:rgba(10,14,18,.34);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)} @media (prefers-reduced-motion:reduce){ .qs-veil{transition:none} } /* Am Handy liegt das Suchfeld im Menü-Panel, und das deckt den Schirm schon selbst ab. Ein Schleier darunter wäre unsichtbar und nur Rechenarbeit. */ @media (max-width:860px){ .qs-veil{display:none} } /* Auf dem Papier hat ein Schleier nichts zu suchen. */ @media print{ .qs-veil{display:none} } /* Die dunkle Servicezeile über der Kopfleiste ist entfallen (siehe public_shell_top.php): Kontakt, Presse und Über uns stehen im Hauptmenü, ein zweiter Navigationsstreifen kostete nur Höhe. Damit sind auch alle .topbar-Regeln weg – toter Bauplan verwirrt beim nächsten Umbau mehr, als er nützt. */ /* ---------------- Übrige Navigationen (Fußzeile) ---------------- */ .site-nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.2rem 1rem;align-items:center} .site-nav a,.site-nav span{text-decoration:none;color:var(--ink);padding:.35rem .2rem;display:inline-block} .site-nav a:hover{color:var(--accent-ink)} .site-nav .is-current{color:var(--accent-ink);font-weight:600} .site-nav ul ul{display:block;margin:.1rem 0 .3rem .8rem;gap:0} .site-nav ul ul li{margin:.1rem 0} .site-nav ul ul a{font-size:.95rem;color:var(--text)} /* Fußzeilen-Navigation */ .site-footer .site-nav ul{gap:.2rem 1rem} .site-footer .site-nav{margin-bottom:.6rem} /* ---------------- Seitengerüst ---------------- .site-main trägt den grauen Grund und NUR den senkrechten Rhythmus; die Lesebreite setzt .page-shell. Beides getrennt, weil der Aufmacher (.lead-hero) über die volle Breite gehen soll, der Text darunter aber nicht. */ .site-main{margin:0;padding:0} /* EINE Breite für ein- und zweispaltige Seiten: der Seitentitel soll nicht springen, nur weil eine Seite eine Seitenspalte hat. Die Seitenspalte nimmt sich innerhalb dieser Breite ihre festen 340px, der Hauptinhalt bekommt den Rest. */ .page-shell{max-width:var(--col-page);margin:0 auto;padding:var(--band) var(--pad-page-r) var(--band) var(--pad-page)} /* Lesebremse: Fließtext, Überschriften und Akkordeon bleiben schmal, damit die Zeilen nicht über die ganze Spalte laufen. Raster-Bausteine (Teaser, Kennzahlen, Chips, Verweisliste, Handlungsband) sind davon ausdrücklich AUSGENOMMEN – die leben von der Breite. Gilt in BEIDEN Vorlagen: früher stand hier „nur einspaltig, neben einer Seitenspalte ist der Hauptinhalt ohnehin schmal" – das stimmte bei 740px Hauptspalte, mit den heutigen 1100px nicht mehr (der Bildungsscheck-Text lief auf rund 130 Zeichen je Zeile). Die Seitenspalte braucht keine Ausnahme: sie ist mit 340px ohnehin schmaler als --col-text. */ .page-main .rte, .page-main .content > h2{max-width:var(--col-text)} /* Die Titelzone ist die EINZIGE Zone der Seite, neben der nie etwas steht: Brotkrumen, Titel und Lesehilfe liegen im Quelltext VOR dem Spaltenraster, der Inhalt beginnt immer darunter – auch die (klebende) Seitenspalte, die erst in .page-layout anfängt. Deshalb gilt hier als einziges Maß die volle Inhaltsbreite: der Titel soll nicht umbrechen, solange Platz da ist. Die Lesebremse (--col-text) galt hier fälschlich als Argument. Sie schützt FLIESSTEXT vor zu langen Zeilen; eine Überschrift liest man nicht Zeile für Zeile, sondern als Ganzes – ein Umbruch mitten im Titel („Weiterbil-dung") kostet dort mehr, als die Breite einbringt. Nachgemessen am 02.08. über alle 155 Seitentitel (scratchpad/titelbreiten.js, Oswald 600 in der wirklich gerenderten Größe). Längster Titel: „Anerkennung von im Ausland erworbenen Qualifikationen" mit 1152px bei 44px Schrift. ab 1281px Fenster : Platz 1131–1480px → ALLE 155 Titel stehen in EINER Zeile 1150–1280px : 1 Titel bricht (eben jener, 21px bzw. 105px zu lang) unter 1024px : Umbruch unvermeidbar und richtig – dort ist er kein Schaden, weil die Schrift mitschrumpft (clamp) und getrennt wird (hyphens). Vorher lag die Grenze bei 736px (--col-text): schon ein 25-Zeichen-Titel brach auf einem 1920er Schirm um, obwohl 1480px frei waren. „Wird der Titel später verdeckt?" – nein, und zwar baulich: die Werkzeugsäule schwebt zwar fest am rechten Fensterrand, aber der Inhaltsspalte ist ihr Streifen über --pad-page-r ABGEZOGEN (siehe Barrierefreiheits-Säule weiter unten). Der Titel endet damit immer links von ihr – gemessen bei 2560/1920/1750/1600/1440/1280/1150px. ⚠️ Die alte Regel stand am 28.07. im SELBEN Deklarationsblock wie .rte und h2 darüber. Beim Umstellen der Titelzone auf --col-list sind die beiden stillschweigend mitgewandert: der Fließtext lief seither 992px breit, also rund 118 Zeichen je Zeile statt der angepeilten 90. Lehre: eine Selektorenliste ist EINE Entscheidung – wer nur einen Teil davon ändern will, muss ihn vorher herauslösen. */ .page-head, .page-head h1{max-width:none} /* Gestapelte Zeilen: mittleres Maß (siehe --col-list). Beim Akkordeon wird die BOX auf dieses Maß gesetzt, der Text darin zusätzlich auf Lesebreite – die Zeilen sollen gleich breit sein wie die Verweisliste daneben, der Fließtext darin trotzdem lesbar bleiben. */ .page-main .accordion, .page-main .linklist, .page-main .downloads, .page-main .page-anchors, /* Bereichsliste NUR in der Zeilen-Darstellung – „Kacheln" ist ein Raster und darf breit sein. */ .page-main .pagelist--liste, /* Ein Handlungsband OHNE „randlos" ist eine Karte im Textfluss und folgt demselben Maß. Erst „randlos" macht daraus ein Band über die ganze Fensterbreite – dann gilt die Regel weiter unten und dieses max-width greift nicht mehr (full-bleed setzt es zurück). */ .page-main .cta:not(.full-bleed){max-width:var(--col-list)} .accordion .accordion-body .rte, .accordion .accordion-body > *{max-width:var(--col-text)} /* Aufmacher ganz oben: sitzt außerhalb des Spaltenrasters und darf deshalb auch im Zweispalten-Layout randlos sein. Ohne „randlos" bleibt er in der Lesebreite. */ .lead-hero{position:relative;max-width:var(--col-page);margin:0 auto;padding:0 var(--pad-page-r) 0 var(--pad-page)} .lead-hero .hero{margin:0;border-radius:0 0 var(--r-lg) var(--r-lg)} .lead-hero .full-bleed{width:100vw;max-width:100vw; margin-left:calc(50% - 50vw + var(--bleed-fix)); margin-right:calc(50% - 50vw - var(--bleed-fix));border-radius:0} .lead-hero .full-bleed > .hero-body{width:100%;max-width:var(--col-page); margin-inline:auto;padding-inline:1.2rem} /* Der Text im AUFMACHER sitzt senkrecht in der Mitte, nicht am unteren Rand: unten stünde er auf einem hohen Bildschirm hinter dem Falz. Waagrecht bleibt er links an der Fluchtlinie — dieselbe Linie, auf der Logo und Seitentitel beginnen. Ausdrücklich NUR für den Aufmacher; ein Banner mitten im Text behält seine Vorgabe (unten links), und die Textposition „mittig" am Baustein sticht das hier weiterhin. */ .lead-hero .hero:not(.hero--mitte){align-items:center} /* Dazu der Verlauf: er lief von unten nach oben und hätte einen mittigen Text auf einem hellen Foto ungeschützt gelassen. Jetzt kommt die Deckung von LINKS, wo der Text steht, plus ein Rest unten für den Pfeilkreis. */ .lead-hero .hero:not(.hero--mitte)::after{ background:linear-gradient(to right,rgba(0,0,0,.72) 0%,rgba(0,0,0,.52) 38%,rgba(0,0,0,.12) 68%,rgba(0,0,0,0) 88%), linear-gradient(to top,rgba(0,0,0,.45) 0%,rgba(0,0,0,0) 30%)} /* Am PC rückt der Slogan-Block um GENAU SEINE EIGENE HÖHE nach unten. „Um seine eigene Höhe" ist wörtlich translateY(100%): Prozente beim Verschieben rechnen immer auf die Höhe des verschobenen Blocks selbst, nicht auf die des Aufmachers. Der Deckel dahinter ist kein Schmuck, sondern gemessen: der Aufmacher hat nicht überall gleich viel Luft. Bei 1920×1080 ist er 832px hoch und der Textblock 226px – die volle Verschiebung lässt unten noch 77px. Bei 1366×768 sind es nur 645px, dort wäre derselbe Block 15px unter den Bildrand gerutscht und abgeschnitten worden (der Aufmacher schneidet ab, sonst liefe das Foto aus dem Rahmen). Deshalb: verschiebe um die eigene Höhe, aber höchstens so weit, dass unten der Platz des Pfeilkreises frei bleibt (3,25rem Kreis + 1,15rem Abstand = 4,5rem). 50cqh − 50% ist genau die Luft unter dem mittig stehenden Block: cqh misst die Höhe des AUFMACHERS (dafür ist er eine Zeile darüber zum Größen-Container erklärt), % die des Blocks selbst. Nur die hohen Aufmacher (16:9 und fensterhoch) dürfen Größen-Container sein: ihre Höhe steht durch Seitenverhältnis bzw. Fensterhöhe fest und hängt nicht am Text. Ein Container dieser Art ignoriert seinen Inhalt beim Messen – bei einem flachen Band (3:1) könnte ein langer Titel dann unten herausragen statt das Band wachsen zu lassen. Unter 1024px bleibt alles wie bisher: dort ist die Luft unter dem Block (gemessen 62–159px) kleiner als der Block selbst, die Verschiebung liefe nur noch gegen ihren eigenen Deckel. */ @media (min-width:1024px){ .lead-hero .hero--gross,.lead-hero .hero--fenster{container-type:size} .lead-hero .hero--gross:not(.hero--mitte) > .hero-body, .lead-hero .hero--fenster:not(.hero--mitte) > .hero-body{ transform:translateY(clamp(0px,50cqh - 50% - 4.5rem,100%))} } /* ---------------- Pfeilkreis „hier geht es weiter" ---------------- Sitzt am unteren Rand des Aufmachers, waagrecht mittig. Er ist bewusst KEIN gefüllter Knopf: ein roter Kreis auf dem Foto würde mit dem Handlungsknopf im Text um Aufmerksamkeit streiten. Stattdessen ein weißer Ring mit leichter Milchglas-Fläche — sichtbar auf hellen wie dunklen Bildstellen, ohne sich vorzudrängen. */ .hero-down{position:absolute;left:50%;bottom:1.15rem;transform:translateX(-50%); display:grid;place-items:center;width:3.25rem;height:3.25rem;border-radius:50%; color:#fff;text-decoration:none;border:2px solid rgba(255,255,255,.9); background:rgba(0,0,0,.28);backdrop-filter:blur(2px); box-shadow:0 2px 10px rgba(0,0,0,.35);z-index:3; animation:hero-down-wink 2.6s ease-in-out infinite} .hero-down svg{width:1.6rem;height:1.6rem} .hero-down:hover,.hero-down:focus-visible{background:rgba(0,0,0,.5);border-color:#fff; animation-play-state:paused} .hero-down:focus-visible{outline:3px solid #fff;outline-offset:3px; box-shadow:0 0 0 6px rgba(0,0,0,.45)} /* Die Bewegung ist der eigentliche Hinweis: ein stehender Pfeil wird übersehen. Zwei kurze Stupser, dann eine lange Pause — dauerhaftes Hüpfen zieht das Auge vom Text ab. */ @keyframes hero-down-wink{ 0%,58%,100%{transform:translateX(-50%) translateY(0)} 66%{transform:translateX(-50%) translateY(.42rem)} 74%{transform:translateX(-50%) translateY(0)} 82%{transform:translateX(-50%) translateY(.42rem)} 90%{transform:translateX(-50%) translateY(0)} } /* Wer Bewegung abbestellt hat, bekommt den Kreis ruhig — er bleibt vollständig bedienbar. */ @media (prefers-reduced-motion:reduce){ .hero-down{animation:none} } /* Sehr flache Fenster (Notebook im Querformat, aufgeklappte Tastatur): dort zählt jeder Millimeter, der Kreis rückt näher an den Rand und wird kleiner. */ @media (max-height:560px){ .hero-down{width:2.6rem;height:2.6rem;bottom:.6rem} } /* Am Handy entfällt der Kreis. Dort weiß jeder, dass eine Seite weitergeht — Wischen ist die Grundbewegung des Geräts, und niemand tippt auf einen Pfeil, um zu scrollen. Er kostete nur Platz, den Slogan und Knopf besser gebrauchen können. Und weil dieser Platz frei wird, rückt der Text wieder an den unteren Rand: im Hochformat schneidet der Bildausschnitt ohnehin eng um die Gesichter, und Text in der Mitte läge quer darüber. Unten steht er auf der ruhigen Zone des Bildes. */ @media (max-width:640px){ .hero-down{display:none} .lead-hero .hero:not(.hero--mitte){align-items:flex-end} /* Dann muss auch die Deckung wieder von UNTEN kommen, wo der Text jetzt steht. */ .lead-hero .hero:not(.hero--mitte)::after{ background:linear-gradient(to top,rgba(0,0,0,.72) 0%,rgba(0,0,0,.45) 38%,rgba(0,0,0,0) 76%)} } /* ---------------- Brotkrumen ---------------- Bei ~130 Seiten in vier Ebenen sind die Brotkrumen die Orientierung, nicht Zierde – deshalb dürfen sie sichtbar sein und nicht als graue Randnotiz verschwinden: unterstrichen, eine Spur größer, mit Luft zur Überschrift. Die aktuelle Stufe ist rot und fett. Sie steht auf dem SEITENGRUND, trägt also --link und nicht --accent: das Markenrot #E2001A erreicht auf dem grauen Grund nur 4,25:1 und verfehlt die 4,5:1 für normalen Text (im Dunkelmodus zeigt --link das aufgehellte Rot, dort passt es andersherum). Dieselbe Regel wie überall im Projekt: Markenrot trägt keine feine Schrift. */ .crumbs{margin:0 0 1.5rem} /* Solange der Weg in eine Zeile passt, steht er in einer Zeile – dafür sorgt schon .page-head (Listenmaß statt Lesebreite, siehe dort). Passt er nicht, BRICHT er um (Issue #49). Vorher war die Zeile stattdessen schiebbar. Das war die schlechtere Wahl: am Handy lief der Weg bis hinauf zu 768px Fensterbreite über – bei 390px standen von 669px Weg ganze 352px im Bild –, und was man schieben muss, sieht man nicht. Ein Balken unter den Brotkrumen ist zudem genau die Art Bedienteil, die auf einem Tastenfeld-losen Gerät niemand trifft. Kein Umbruch bei fester Schwelle, sondern flex-wrap: eine Schwelle wäre entweder zu tief (zwischen 560 und 800px bliebe der Balken) oder zu hoch (Umbruch, wo Platz ist). So richtet es sich von selbst nach dem, was wirklich hineinpasst. Der Trenner „›" steht am ANFANG jeder Stufe und führt damit auch eine umgebrochene Zeile an – genau das sagt „hier geht der Weg weiter" und nicht „hier fängt ein neuer an". */ /* Ausrichtung an der SCHRIFTLINIE, nicht an der Mitte: bricht eine Stufe in sich um (auf 320px etwa „Schule, Lehre, Studium, Weiterbildung"), schwebte das „›" sonst mittig zwischen ihren beiden Zeilen statt die erste anzuführen. Bei einzeiligen Stufen ist beides dasselbe. */ .crumbs ol{list-style:none;margin:0;padding:0 0 .2rem;display:flex;flex-wrap:wrap; align-items:baseline;gap:.25rem .1rem;font-size:1rem} /* flex:0 1 auto + min-width:0 statt 0 0 auto + nowrap: eine Stufe rutscht als GANZES in die nächste Zeile (ihre Ausgangsbreite ist die ungebrochene) und bricht nur dann in sich selbst, wenn sie allein keine Zeile füllt – etwa „Verlängerte Lehre / Teilqualifikation" auf 320px. Ohne das liefe ein langer Titel über den Rand hinaus und brächte die ganze Seite ins Schieben; das wäre schlimmer als der Balken, den wir gerade abgeschafft haben. */ .crumbs li{display:flex;align-items:baseline;flex:0 1 auto;min-width:0} /* Trenner als CSS-Zeichen: rein dekorativ, wird nicht mit vorgelesen. Bewusst OHNE Unterstreichung – er gehört zu keiner Stufe. */ .crumbs li+li::before{content:"›";color:var(--muted);padding:0 .45rem;flex:0 0 auto; text-decoration:none} .crumbs a{color:var(--muted);text-decoration:underline;text-underline-offset:.2em} .crumbs a:hover{color:var(--link)} /* Die aktuelle Stufe bleibt OHNE Unterstreichung: Sie ist kein Verweis, und unterstrichener Text sagt im Web „hier kann man klicken". Rot und fett heben sie deutlich genug ab. */ .crumbs [aria-current]{color:var(--link);font-weight:700} /* ---------------- Titelzone ---------------- */ .page-head{margin:0 0 1.6rem} .page-tools{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem} h1{font-family:"Oswald","Segoe UI",Arial,sans-serif;color:var(--ink);font-weight:600; font-size:clamp(1.9rem,1.4rem + 1.8vw,2.75rem);line-height:1.14;margin:0; letter-spacing:-.005em} /* Goldener Strich unter der Hauptüberschrift – die eine Zierde, die sich die Seite gönnt. Übernommen aus der BiBer-Onepage („Unser Angebot"), dort ebenfalls unter der Überschrift. */ h1::after{content:"";display:block;width:3.5rem;height:4px;border-radius:2px; background:var(--gold);margin-top:.7rem} h2{font-family:"Oswald","Segoe UI",Arial,sans-serif;color:var(--ink);font-weight:600; font-size:clamp(1.35rem,1.15rem + .6vw,1.7rem);margin:2rem 0 .6rem; scroll-margin-top:5.5rem} /* Sprungziel darf nicht unter der klebenden Kopfleiste landen */ /* H3 = untergeordnete Überschrift (z. B. Seitenspalten-Überschriften – die sind bewusst H3 ohne Anker). Gleiche Schrift wie H2, eine Stufe kleiner. .contact-title u. Ä. haben eigene Klassen und überschreiben das ohnehin. */ h3{font-family:"Oswald","Segoe UI",Arial,sans-serif;color:var(--ink);font-weight:600; font-size:1.15rem;margin:1.3rem 0 .45rem} .content p{margin:.7rem 0} /* Aufzählungen im FLIESSTEXT werden eingerückt – die Punkte sollen unter dem Text hängen. Bausteine sind technisch ebenfalls