/* Theme Name: Reinhardt Theme URI: https://reinhardt-dienstleistungen.de Description: Child-Theme für Reinhardt Dienstleistungen. Typografie, Zeilenlängen und Abstände; die Struktur kommt von Twenty Twenty-Five. Author: Reinhardt Dienstleistungen Template: twentytwentyfive Version: 0.1 Text Domain: reinhardt */ /* -------------------------------------------------------------------------- Seitenfläche Die Seite füllt den ganzen Bildschirm. Vollbreite Bereiche - Skyline, Menüleiste, Fußzeile - reichen damit bis an den Fensterrand; der Inhalt bleibt über die Layout-Angaben in theme.json bei 1240 px und steht mittig. Vorher lag die Seite als 1320 px breite helle Fläche auf rotem Grund. Das Rot in theme.json bleibt stehen, ist jetzt aber nicht mehr zu sehen - es käme sofort zurück, wenn hier wieder eine Höchstbreite gesetzt wird. Die Kante des Inhalts steht als eigene Größe zur Verfügung: Logo und Banner im Kopfbereich hängen sonst am Fensterrand und stünden auf einem breiten Bildschirm weit neben dem Text. Der Wert ist der größere von Seitenrand und halber Restbreite - dieselbe Rechnung, mit der WordPress den Inhalt zentriert. -------------------------------------------------------------------------- */ /* Auf body, nicht auf :root: WordPress setzt --wp--style--root--padding-left erst dort. Auf :root gesetzt, würde beim Ausrechnen dieser Größe der Ersatzwert greifen - das Logo stünde bei 1200 px Fensterbreite auf 30 px statt auf 50 px und damit 20 px neben dem Text. Solange der Inhalt in der Mitte stand, war hier zusätzlich die halbe Restbreite zu berücksichtigen. Seit wideSize in theme.json auf 100 % steht, nutzt auch der Inhalt die ganze Breite, und es bleibt der Seitenrand. */ body { --reinhardt-inhaltskante: var(--wp--style--root--padding-left, 30px); } /* Bleibt stehen, obwohl der Seitenhintergrund in theme.json inzwischen ebenfalls weiß ist: Die Regel hat den Inhaltsbereich damals vom roten Grund abgesetzt und schadet jetzt nicht - sie sorgt weiter dafür, dass der Inhalt eine eigene Fläche hat, falls der Grund je wieder eine Farbe bekommt. */ .wp-site-blocks { background: #ffffff; } /* -------------------------------------------------------------------------- Zeilenlänge Der Fließtext nutzt auf ausdrücklichen Wunsch die volle Spaltenbreite. Damit liegt eine Zeile bei rund 100 Zeichen; leseoptimal wären 50 bis 75. Falls das wieder begrenzt werden soll, genügt hier eine max-width-Regel auf p, ul, ol und blockquote. -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- Listen -------------------------------------------------------------------------- */ .wp-block-post-content ul, .wp-block-post-content ol { padding-left: 1.25em; } .wp-block-post-content li + li { margin-top: 0.4em; } /* -------------------------------------------------------------------------- Menüleiste -------------------------------------------------------------------------- */ .wp-block-navigation a[href]:where(:not(.wp-element-button)):hover { text-decoration: underline; text-underline-offset: 0.25em; } /* Die Menüleiste ist farblich auf das Leistungsmenü der linken Spalte abgestimmt: helle Fläche #f2f0ed wie dort die Symbolkachel, Schrift #1a1a18, Linien #dedbd6 wie die Kartenrahmen. Die Linien oben und unten geben ihr die Kante, die vorher die dunkle Fläche übernommen hatte. Die aktuelle Seite wird rot ausgezeichnet - dieselbe Kennzeichnung wie im Leistungsmenü, nur ohne Rahmen, weil die Punkte hier nebeneinander stehen. */ .reinhardt-menueleiste { border-top: 1px solid #dedbd6; border-bottom: 1px solid #dedbd6; } /* Die zweite Klasse am Anker ist Absicht: Der Navigations-Block setzt die Farbe ueber einen Selektor mit drei Klassen (.wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content), der sonst gewinnt und die Schrift auf "erben" zurueckstellt. */ /* --- Menüpunkte als Flächen ----------------------------------------- Aus reinen Textlinks werden Knöpfe: jeder Punkt bekommt eine Fläche, die aktive Seite ist rot ausgefüllt. Eckig, kein border-radius: Kacheln des Leistungsmenüs, Formularknöpfe und Bildrahmen sind auf dieser Seite alle rechtwinklig. Ein einzelnes abgerundetes Element würde herausfallen. Die Maße: 8 px Innenabstand oben und unten auf 25,4 px Zeilenhöhe ergeben 41 px hohe Felder. Mit 5 px Luft darüber und darunter und den zwei Rahmenlinien wird die Leiste 53 px hoch - vorher waren es 47. */ /* Der Innenabstand von 5 px oben und unten steht im Block selbst (import.php), nicht hier: Der Editor schreibt ihn als Inline-Style, und der schlägt jede Regel aus dem Stylesheet. Vorher waren es 10 px - mit den Feldern wäre die Leiste damit 64 px hoch geworden. */ .reinhardt-menueleiste .wp-block-navigation__container { /* Vorher 22,4 px Abstand zwischen den Wörtern. Mit Flächen braucht es das nicht mehr - der Innenabstand der Felder trennt sie schon. */ gap: 4px; /* Der Innenabstand des ersten Feldes würde "Home" um 14 px nach rechts schieben. Logo, Inhalt und Fußzeile stehen aber alle auf derselben Kante bei 50 px; das Feld wird deshalb nach links gezogen, damit die Schrift dort stehen bleibt und nur die Fläche darüber hinausragt. */ margin-inline-start: -14px; } .reinhardt-menueleiste a.wp-block-navigation-item__content { padding: 8px 14px; transition: background-color .14s ease, color .14s ease; } .reinhardt-menueleiste a.wp-block-navigation-item__content:hover { /* Eine Spur dunkler als die Leiste (#f2f0ed). Kräftiger wäre auf einer Leiste mit sechs Punkten Unruhe. */ background-color: #e4e1dc; } /* Keine Unterstreichung beim Überfahren. WordPress setzt sie für jeden Link im Navigationsblock; im Menü ist sie überflüssig, weil die Fläche schon zeigt, worauf der Zeiger steht - und auf dem roten Feld sähe sie nach einem zweiten Zustand aus, den es nicht gibt. Das [href] steht hier nur wegen der Spezifität: Die Regel von WordPress lautet `.wp-block-navigation a[href]:where(…):hover` und käme sonst auf denselben Wert wie eine Regel ohne - bei Gleichstand gewönne die von WordPress, weil sie später geladen wird. */ .reinhardt-menueleiste a[href].wp-block-navigation-item__content:hover, .reinhardt-menueleiste a[href].wp-block-navigation-item__content:focus { text-decoration: none; } .reinhardt-menueleiste a.wp-block-navigation-item__content:focus-visible { outline: 2px solid #fe2142; outline-offset: -2px; } .reinhardt-menueleiste .current-menu-item > a.wp-block-navigation-item__content { /* Das Logo-Rot, auf Wunsch. Zum Nachlesen, falls das später jemand prüft: Weiß auf #fe2142 kommt auf Kontrast 3,81 und liegt damit unter dem WCAG-Mindestwert 4,5 für normalen Text. Bei 15,7 px und Gewicht 600 greift auch die Ausnahme für große Schrift nicht - die beginnt erst bei 18,7 px fett. Betroffen ist genau ein Wort je Seite, nämlich der Name der Seite, auf der man ohnehin schon ist. Wer den Wert doch erreichen will: #e51e3b kommt auf 4,58 und ist vom Logo-Rot kaum zu unterscheiden. */ background-color: #fe2142; color: #ffffff; font-weight: 600; } /* Kein eigener Hover-Zustand für den aktiven Punkt: Das Rot soll beim Überfahren stehen bleiben. Dass es das tut, ist kein Zufall - die Regel für den aktiven Punkt und die allgemeine Hover-Regel darüber haben dieselbe Spezifität (drei Klassen, ein Element). Bei Gleichstand entscheidet die Reihenfolge, und der aktive Punkt steht weiter unten. */ /* --- Das Überlagerungsmenü auf schmalen Bildschirmen ----------------- Dort stehen die Punkte untereinander. WordPress setzt für diesen Fall ein eigenes `padding: 0` auf die Links, und zwar mit drei Klassen im Selektor - das schlägt die Regel oben. Deshalb hier eine eigene, um eine Klasse spezifischere Fassung. 12 px oben und unten statt 8: So werden die Felder 49 px hoch. Auf einem Touchscreen ist das die Größe, ab der man sicher trifft; 23 px, wie es ohne diese Regel wären, sind zu wenig. */ .reinhardt-menueleiste .wp-block-navigation__responsive-container.is-menu-open a.wp-block-navigation-item__content { display: block; padding: 12px 14px; } .reinhardt-menueleiste .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { /* Derselbe Linkszug wie in der Leiste, aus demselben Grund: Die Schrift soll auf der Kante der übrigen Inhalte stehen, nur die Fläche darf darüber hinausragen. */ margin-inline-start: -14px; gap: 2px; } /* "Leistungen" klappt nur auf und führt nirgendwohin. WordPress gibt dafür ein ohne href aus - ohne diese Regel sähe es aus wie ein Link. */ .wp-block-navigation a:not([href]) { cursor: default; } /* -------------------------------------------------------------------------- Seitenleiste Die Leistungsliste ist eine Navigation, keine Aufzählung - deshalb ohne Aufzählungszeichen und mit etwas mehr Luft zwischen den Einträgen. -------------------------------------------------------------------------- */ .wp-block-column .wp-block-page-list { list-style: none; padding-left: 0; margin: 0; } .wp-block-column .wp-block-page-list li + li { margin-top: 0.55em; } .wp-block-column .wp-block-page-list a { text-decoration: none; } .wp-block-column .wp-block-page-list a:hover, .wp-block-column .wp-block-page-list .current-menu-item > a { text-decoration: underline; text-underline-offset: 0.25em; } .wp-block-column .wp-block-page-list .current-menu-item > a { font-weight: 600; } /* Die Überschrift "Leistungen" ist verlinkt - als Überschrift aber ohne Unterstrich lesbarer. */ .wp-block-column h2 a { text-decoration: none; } .wp-block-column h2 a:hover { text-decoration: underline; text-underline-offset: 0.25em; } /* -------------------------------------------------------------------------- Kopfzeile: Logo links, Skyline rechts daneben Die Skyline füllt die ganze Seitenfläche - genau wie die Menüleiste darunter, auf der sie mit ihrer Unterkante direkt aufsitzt. Dafür ist sie in build-bilder.py auf ihren sichtbaren Inhalt zugeschnitten - sonst bliebe unter der Grundlinie ein leerer Rand stehen. -------------------------------------------------------------------------- */ .reinhardt-kopfzeile { position: relative; } .reinhardt-kopf-skyline { margin: 0; line-height: 0; } /* Das Kopfbild ist seit 31.08.2026 ein Foto (2170 × 535) statt der freigestellten Silhouette. Die frühere Transparenz von 0,392 ist damit weg - sie sollte die schwarze Silhouette zurücktreten lassen; ein Foto würde sie nur ausbleichen. Nicht beschnitten: Das Bild ist mit 1:5,6 flach genug, und die Antennenspitze des Rheinturms hat bei y=19 schon von sich aus Luft nach oben. Der Kopfbereich misst bei 1920 px Fensterbreite 343 px - das Vorgängerbild (1:4,06) kam auf 447 px. */ .reinhardt-kopf-skyline img { width: 100%; height: auto; display: block; } /* Das Logo liegt auf der Skyline. Sein Hintergrund ist transparent, die Silhouette scheint also durch. Es sitzt oben links im freien Himmel: über den Gebäuden wäre der schwarze Schriftzug nicht zu lesen. /* Das Logo oben links auf dem Kopffoto: rotes Zeichen und Schriftzug. Es sitzt auf einer Kante mit dem Text darunter, dafür dieselbe Größe wie beim Banner rechts. 330 px: Das Kopfbild ist mit 1:5,6 flacher als sein Vorgänger, der Kopfbereich dadurch von 447 auf 343 px geschrumpft. Logo und Banner sind im selben Verhältnis mitgegangen (Faktor 0,77), sonst füllten sie den flacheren Streifen aus. Im Logo ist das rote Zeichen 188 von 900 px breit, es misst hier also 69 px. */ .reinhardt-kopf-logo { position: absolute; /* 17 px links über die Inhaltskante hinaus. Das Logo hat an seiner linken Kante einen schmalen hellen Saum aus dem Freistellen; damit steht der Schriftzug optisch bündig mit dem Text darunter. */ left: calc(var(--reinhardt-inhaltskante, 0px) - 17px); /* Eine Textzeile tiefer als die Oberkante, davon 11 px wieder abgezogen. In Zeilen gerechnet statt in festen Pixeln, damit der Abstand mitgeht, falls sich Schriftgröße oder Zeilenabstand ändern: Grundschrift 17 px, Zeilenabstand 1,65 - eine Zeile sind also 28,05 px, abzüglich 11 px bleiben 17,05 px. em, nicht rem: rem bezieht sich auf das Wurzelelement, das bei 16 px steht; die 17 px der Grundschrift stehen auf dem body. Mit rem käme je Zeile 26,4 statt 28,05 px heraus. */ /* Fast bündig mit der Oberkante der Seite: 3 px Luft. Die Datei hat keinen transparenten Rand, der Wert wirkt also voll - bei top: 0 klebte das Logo an der Kante. */ top: 3px; width: 330px; max-width: 26%; margin: 0; } .reinhardt-kopf-logo img { width: 100%; height: auto; display: block; /* Weicher Schatten, damit der weiße Schriftzug auf dem hellen Himmel steht. Ohne ihn liegt der Kontrast bei 1,79 - die Buchstaben verschwinden. Gemessen wird dabei die Schrift gegen die Fläche unmittelbar daneben, nicht gegen den Himmel weiter außen; genau die dunkelt der Schatten ab. Drei Lagen: ein enger dunkler Saum an der Kante, dann zwei weichere Höfe. Mit nur zwei Lagen kam der Kontrast auf 3,29 und blieb unter dem Mindestwert 4,5; mit dreien sind es 5,32. drop-shadow und nicht box-shadow: drop-shadow folgt der Form des Bildes, box-shadow läge als Rechteck darum. */ filter: drop-shadow(0 1px 1px rgb(26 26 24 / 0.9)) drop-shadow(0 0 4px rgb(26 26 24 / 0.8)) drop-shadow(0 0 9px rgb(26 26 24 / 0.6)); } /* Banner "Ihre kompetente Objektbetreuung seit 1987" oben rechts, ebenfalls auf der Skyline. Es ist ein sehr breiter Balken (1200 x 167, also 1:7,2). 230 px ergeben 32 px Höhe. Wie das Logo gegenüber ist der Banner mit dem flacheren Kopfbild um den Faktor 0,77 mitgegangen (vorher 301 px). Der Balken ist deckend und deckt die Silhouette dahinter ab; das ist gewollt. */ .reinhardt-kopf-siegel { position: absolute; right: var(--reinhardt-inhaltskante, 0px); /* Dieselbe Höhe wie das Logo gegenüber: eine Textzeile unter der Oberkante, abzüglich derselben 11 px. Ändert sich der Wert dort, gehört er hier mitgeändert - koppeln lassen sich die beiden Regeln nicht. Der waagerechte Versatz des Logos gilt hier nicht: Der Banner hat keinen hellen Saum, er endet an seiner roten Kontur. */ /* Dieselbe Oberkante wie das Logo gegenüber. */ top: 3px; /* 20 % größer als zuvor (230 px / 18 %). Der Banner ist 1200 x 167 groß und trägt drei Wortgruppen nebeneinander; bei 230 px war die Jahreszahl am rechten Ende kaum zu lesen. Beide Werte mussten mit: Bei einem Fenster ab 1278 px greift die feste Breite, darunter die prozentuale - hätte ich nur eine geändert, wäre der Banner in einem der beiden Bereiche gleich geblieben. Die sizes-Angabe am Bild in import.php trägt dieselben Zahlen. */ width: 276px; max-width: 21.6%; margin: 0; } .reinhardt-kopf-siegel img { width: 100%; height: auto; display: block; } /* -------------------------------------------------------------------------- Lichtzeitpegel am Rheinturm Die größte Digitaluhr der Welt, am Schaft des Rheinturms: weiße Lampen in Gruppen, dazwischen gelb-orange Trennleuchten. Jede Gruppe zählt von unten nach oben, jede brennende Lampe ist eine Einheit. Hier läuft die vollständige Anzeige: 39 Lampen und 5 Trennleuchten. Sie füllt den freien Turmschaft von der Unterkante der Kanzel bis zu den Bäumen genau aus. Der Preis dafür sind kleinere Lampen - 2,5 statt 3,7 px Punktdurchmesser bei 1920 px Fensterbreite, weil sich 44 statt 25 Elemente die Strecke teilen. Maße aus dem Kopffoto (2172 × 388 px, unbeschnitten): Turmmitte unten x = 1014,5 -> 46,71 % der Bildbreite Beginn y = 150 -> 38,66 % der Bildhöhe Höhe 167 px -> 43,04 % der Bildhöhe Neigung -> 0,30° nach rechts Die Achse ist nicht geschätzt, sondern über den Schwerpunkt der dunklen Turmfläche je Bildzeile bestimmt und durch eine Ausgleichsgerade gelegt: Von y=150 bis y=314 wandert sie von x=1015,1 auf x=1014,5, der Turm steht also 0,30° nach rechts geneigt. Die Kette folgt dieser Neigung, damit sie parallel zum Turm läuft statt streng senkrecht. Der Drehpunkt liegt unten: So bleibt das untere Ende auf der Achse und nur das obere wandert - 0,85 px nach rechts. Die Kette beginnt direkt unter der Kanzel und reicht bis y = 317: So weit steht der Schaft frei vor dem Himmel, darunter beginnt links das Grün am Ufer. Mehr Platz gibt der Turm nicht her - für 44 Elemente ist das die größtmögliche Teilung. Die 15 Elemente teilen sich diese Höhe, jedes wird über aspect-ratio quadratisch. Der Punkt wird als Farbverlauf in den Kasten gezeichnet statt als Hintergrund des ganzen Kastens: So entsteht der Abstand zwischen den Lampen von selbst, ohne dass die Aufteilung der Höhe durcheinandergerät. Die Zeitlampen leuchten weiß wie am Original. Damit sie sowohl auf der grauen Turmsilhouette als auch über dem weißen Himmel zu sehen sind, bekommt jede einen dünnen dunklen Ring - ohne ihn verschwände eine weiße Lampe dort, wo sie über den Bildrand des Turms hinausragt. Erloschene Lampen sind nur der Ring, die Trennleuchten gelb-orange wie im Original. -------------------------------------------------------------------------- */ .reinhardt-kopf-skylinebereich { position: relative; line-height: 0; } /* -------------------------------------------------------------------------- Der Chef am Fenster Ein Osterei: Im roten Backsteinhaus der Medienhafen-Zeile steht der Chef im obersten linken Fenster. Die Fensterreihe ist im Quellbild (2172 x 388) ueber die Helligkeit ausgemessen: Die besonnte Front hat vier helle Fenster bei x 1558-1562, 1564-1567, 1572-1575 und 1579-1583, alle in der Zeile y 232-237. Das linke davon ist seines - x 1557,4 bis 1562,4 und y 231,3 bis 237,7. Daher die krummen Prozentwerte. Prozent und nicht Pixel, weil das Kopfbild ueber die volle Fensterbreite laeuft und mitskaliert; der Lichtzeitpegel darueber ist genauso gerechnet. Warum ein eigenes Bild und nicht ins Kopffoto hineinkopiert: Bei 1280 px Fensterbreite ist das Fenster knapp 3 CSS-Pixel breit. Waere der Chef Teil des Kopffotos, bliebe er auch beim Heranzoomen ein Fleck von drei Pixeln, nur groesser gerechnet. Als eigenes Bild mit 360 x 443 rastert der Browser bei jeder Zoomstufe neu aus der vollen Aufloesung - erst dann ist er zu erkennen. Genau das war die Absicht: im Normalzustand nicht zu sehen, beim Hineinzoomen deutlich. background-size: cover mit Ausrichtung oben schneidet ihn an der Fensterbank ab. Der Kopf bleibt ganz, das dunkle Jackett verschwindet unten im Rahmen - so, wie jemand hinter einer Scheibe steht. -------------------------------------------------------------------------- */ .reinhardt-kopf-skylinebereich::after { content: ""; position: absolute; left: 71.7034%; top: 59.6134%; width: 0.2302%; height: 1.6495%; background-image: url( "chef-fenster.webp" ); background-size: cover; background-position: center top; background-repeat: no-repeat; pointer-events: none; } .reinhardt-lichtzeitpegel { position: absolute; left: 46.71%; top: 38.66%; height: 43.04%; transform-origin: 50% 100%; transform: translateX(-50%) rotate(0.3deg); display: flex; flex-direction: column; align-items: center; pointer-events: auto; } /* Jede Lampe ist ein quadratisches Feld, der Punkt darin ein eigenes Element. Vorher war der Punkt ein Farbverlauf im Feld selbst - bei 5 px Feldgröße liegen dessen Ringe unter einem Pixel, und jeder Punkt wurde etwas anders gerastert. Die Kette wirkte dadurch unruhig, obwohl die Felder nachweislich exakt übereinanderliegen (gleiche linke Kante, gleiche Breite). Als voller Kreis mit border-radius zeichnet der Browser alle Punkte gleich. */ .reinhardt-lichtzeitpegel i { flex: 1 1 0; min-height: 0; aspect-ratio: 1; display: grid; place-items: center; } .reinhardt-lichtzeitpegel i::before { content: ""; width: 74%; height: 74%; border-radius: 50%; } /* Erloschene Lampe: gedämpft, damit die Anzeige als Kette erkennbar bleibt. */ .reinhardt-lichtzeitpegel__lampe::before { background: rgb(26 26 24 / 0.32); } /* Brennende Lampe weiß wie am Original, mit einem dünnen dunklen Rand, damit sie auch über hellem Himmel steht. box-shadow statt border: Der Rand liegt dann außerhalb des Kreises und macht ihn nicht kleiner. */ .reinhardt-lichtzeitpegel__lampe.ist-an::before { background: #ffffff; box-shadow: 0 0 0 1px rgb(26 26 24 / 0.5); } /* Trennleuchten im Logo-Rot. Am Original sind sie gelb-orange; auf Wunsch stehen sie hier in der Farbe der Marke. */ .reinhardt-lichtzeitpegel__trenner::before { background: #fe2142; box-shadow: 0 0 0 1px rgb(26 26 24 / 0.4); } /* -------------------------------------------------------------------------- Warnlichter auf den Pylonen der Rheinkniebrücke Zwei rote Lichter, die gemeinsam alle zehn Sekunden aufblinken. Dass sie im Gleichtakt laufen, ergibt sich von selbst: Beide stehen von Anfang an im Dokument und teilen dieselbe Auszeichnung, also startet die Bewegung zur selben Zeit. Kein JavaScript nötig. Stellen aus dem Kopffoto (2172 × 388 px), gemessen an der Oberkante der dunklen Pylone vor dem helleren Himmel: Pylon links x = 262 / y = 200 -> 12,06 % / 51,55 % Pylon rechts x = 291 / y = 208 -> 13,40 % / 53,61 % Größe: 0,125 % der Bildbreite, also 2,4 px bei 1920 px Fensterbreite. Damit bleiben sie unter den 2,48 px der Lampen am Lichtzeitpegel - größer sollen sie nicht wirken. Angabe in Prozent der Breite, damit sie mit dem Foto mitwachsen. Der Blitz ändert nur die Deckkraft, nicht die Größe. Eine Vergrößerung um 40 % beim Aufblinken hätte das Licht in dem Moment auf 3,36 px gebracht und damit über die Lampen der Uhr hinaus. Zwischen den Blitzen brennt das Licht gedämpft weiter, sonst wirkte die Brücke neun von zehn Sekunden unbeleuchtet und das Aufblinken käme aus dem Nichts. Die erste Fassung war praktisch unsichtbar: 20 % Deckkraft ergaben gegen den Untergrund einen Kontrast von 1,23 - bei voller Deckkraft sind es 3,3 bis 3,9. Deshalb steht der Grundwert jetzt auf 0,75, und der Blitz dauert 0,8 statt 0,3 Sekunden. Dazu ein dünner dunkler Ring, genau wie bei den Lampen der Turmuhr: Er hebt den Punkt vom Foto ab, ohne ihn zu vergrößern. Beim Blitz kommt ein weicher roter Hof dazu - auch das ein Schatten, kein größerer Punkt. -------------------------------------------------------------------------- */ .reinhardt-brueckenlicht { position: absolute; width: 0.125%; aspect-ratio: 1; border-radius: 50%; background: #fe2142; opacity: 0.75; box-shadow: 0 0 0 1px rgb(26 26 24 / 0.5); transform: translate(-50%, -50%); animation: reinhardt-brueckenlicht 10s linear infinite; } .reinhardt-brueckenlicht--links { left: 12.06%; top: 51.55%; } .reinhardt-brueckenlicht--rechts { left: 13.40%; top: 53.61%; } @keyframes reinhardt-brueckenlicht { 0%, 8% { opacity: 1; box-shadow: 0 0 0 1px rgb(26 26 24 / 0.5), 0 0 6px 2px rgb(254 33 66 / 0.85); } 16%, 100% { opacity: 0.75; box-shadow: 0 0 0 1px rgb(26 26 24 / 0.5), 0 0 0 0 rgb(254 33 66 / 0); } } /* Wer Bewegung abgestellt hat, bekommt ein ruhiges Licht statt eines Blitzes. */ @media (prefers-reduced-motion: reduce) { .reinhardt-brueckenlicht { animation: none; opacity: 1; } } /* Auf schmalen Bildschirmen stehen Logo, Banner und Skyline untereinander - übereinander wäre der Schriftzug nicht zu lesen. */ @media (max-width: 781px) { .reinhardt-kopfzeile { display: flex; flex-direction: column; } /* Ohne absolute Position greift das Einrücken von oben nicht mehr - hier sorgt ein Außenabstand für dieselbe Kante. */ .reinhardt-kopf-logo, .reinhardt-kopf-siegel { position: static; width: 100%; max-width: 320px; margin-bottom: 0.5rem; margin-inline: var(--wp--style--root--padding-left, 0px); } /* Der Balken darf hier breiter werden - er ist nur 1/7 so hoch wie breit und bliebe bei 320 px kaum lesbar. */ .reinhardt-kopf-siegel { order: 1; max-width: none; width: auto; } .reinhardt-kopf-skyline { order: 2; } } /* -------------------------------------------------------------------------- Kopfbereich Das Logo soll auf kleinen Bildschirmen nicht über die Breite hinauslaufen. -------------------------------------------------------------------------- */ .wp-block-site-logo img { max-width: 100%; height: auto; } /* -------------------------------------------------------------------------- Fußzeile Ein schmales rotes Band mit der Copyright-Zeile, mittig. Das Rot ist #c0142f - dasselbe wie bei der Kontaktkarte in der Seitenspalte, festgelegt in .reinhardt-kontaktkarte. Nicht die reine Logofarbe #fe2142: Weiss darauf ergibt nur 3,81:1 und verfehlt damit die 4,5:1, die WCAG 2.1 AA fuer 15 px fette Schrift verlangt. #c0142f kommt auf 6,21:1 - und die Seite zeigt nicht zwei verschiedene Rottoene uebereinander. Die Hoehe bestimmt allein die Zeile: 10 px Polster oben und unten, der Absatz ohne eigene Abstaende. Mehr braucht es nicht. -------------------------------------------------------------------------- */ .wp-block-group.reinhardt-fusszeile { justify-content: center; align-items: center; gap: 0.25rem 1.5rem; text-align: center; } /* -------------------------------------------------------------------------- Der Transporter ueber dem roten Band Ein Gimmick wie der Chef im Fenster des roten Hauses. Alle zwanzig Sekunden faehrt ein kleiner Reinhardt-Transporter durch den hellen Streifen oberhalb der Copyright-Zeile. Angelegt wird beides von bus.js; fehlt das Skript, fehlt schlicht der Wagen. Die Fahrbahn liegt absolut ueber dem Band (bottom: 100 %) und beansprucht deshalb keinen Platz im Seitenfluss - ein gewoehnliches Element haette die Fusszeile um seine Hoehe nach unten geschoben. Sie schneidet links und rechts ab, damit Ein- und Ausfahrt keine waagerechte Bildlaufleiste erzeugen. -------------------------------------------------------------------------- */ .reinhardt-busbahn { position: absolute; left: 0; right: 0; bottom: 100%; height: 30px; overflow: hidden; /* WordPress gibt jedem Kind einer Gruppe mit is-layout-constrained eine max-width in Inhaltsbreite - hier 720 px. Die Bahn soll aber ueber die ganze Breite des Bandes laufen; ohne diese Zeile endete sie auf halber Strecke, und der Wagen verschwaende in der Mitte des Bildschirms. */ max-width: none; /* Nimmt keine Klicks an: Die Bahn liegt ueber dem Seiteninhalt und wuerde sonst einen Streifen davon unerreichbar machen. */ pointer-events: none; } .reinhardt-bus { position: absolute; left: 0; /* Kein Abstand nach unten: Das Bild ist auf das Motiv beschnitten, die unterste Zeile enthaelt die Reifen. Vorher lagen darin fuenf durchsichtige Zeilen der Vorlage - bei 34 px Anzeigehoehe eine sichtbare Luecke von 1,9 px zwischen Reifen und Band. */ bottom: 0; height: 30px; width: auto; /* Der Browser darf die Ebene vorbereiten, bevor die Fahrt beginnt. */ will-change: transform; /* Vor der ersten Fahrt ausserhalb parken - sonst stuende er beim Laden der Seite kurz links im Bild. */ transform: translateX(-200px); } /* Wer weniger Bewegung eingestellt hat, bekommt keinen fahrenden Wagen. Das Skript legt ihn dann gar nicht erst an; diese Regel ist der Guertel zum Hosentraeger, falls er doch einmal im HTML stuende. */ @media (prefers-reduced-motion: reduce) { .reinhardt-busbahn { display: none; } } /* Weiss und fett auf dem roten Grund. Die Regel haengt am Band und nicht am Absatz allein, damit auch ein spaeter hinzugefuegter Link mitgenommen wird - ein dunkler Link auf Rot waere kaum zu lesen. */ .reinhardt-fussband, .reinhardt-fussband p, .reinhardt-fussband a { color: #ffffff; } .reinhardt-fussband p { margin: 0; font-weight: 700; } .reinhardt-fussband a { text-decoration-color: rgba(255, 255, 255, 0.6); } .reinhardt-fussband a:hover { text-decoration-color: #ffffff; } /* -------------------------------------------------------------------------- Seitentitel auf den Leistungsseiten Diese Seiten beginnen mit einem zweispaltigen Block: links das Bild der Leistung (feste 260 px, gesetzt in build-content.py), rechts der Einleitungstext. Die Überschrift kommt dagegen aus der Seitenvorlage und stand deshalb an der Kante des Inhalts - also über dem Bild statt über dem Text, den sie ankündigt. Hier wird sie um die Bildspalte samt Abstand eingerückt und fluchtet dann mit dem Einleitungstext. Das gilt nur, wenn der Inhalt auch wirklich mit einem solchen Block beginnt; auf allen anderen Seiten bleibt der Titel an der Kante. Unterhalb von 782 px stehen die Spalten untereinander, dort entfällt der Einzug wieder. Zusätzlich bekommt jeder Seitentitel einen kurzen roten Strich darunter, der ihn vom übrigen Text abhebt (Entwurf B). Er gilt für alle Seiten, nicht nur die Leistungsseiten - ein Titel mit Strich und einer ohne läse sich als Versehen. -------------------------------------------------------------------------- */ .wp-block-post-title { /* Der Einzug steht als eigene Größe da, weil ihn zwei Regeln brauchen: der Innenabstand des Titels und die Position des roten Strichs darunter. Standardmäßig null - nur die Leistungsseiten setzen ihn (siehe unten). */ --reinhardt-titel-einzug: 0px; position: relative; padding-left: var(--reinhardt-titel-einzug); padding-bottom: 16px; margin-bottom: 26px; /* Der Kasten nimmt die volle Spaltenbreite. Damit läuft der rote Strich darunter bis an die rechte Kante des Inhalts - dieselbe Kante, an der auch Galerie, Fließtext und Fußzeile enden. Vorher stand hier width: fit-content, damit der Strich genau so lang wurde wie die Überschrift. Wer das wieder will, setzt die zwei Zeilen zurück; der ::after-Regel darunter ist beides recht, sie spannt sich immer zwischen Einzug und rechtem Rand des Kastens. */ } /* Der rote Strich, genau so lang wie die Überschrift darüber. Er wird über linke und rechte Kante aufgespannt statt über eine feste Breite: links der Einzug, rechts der Rand des Kastens, der sich seinerseits an den Text schmiegt. Er sitzt an der Textkante, nicht an der Kante des Elements - deshalb links dieselbe Größe wie beim Innenabstand. Ein absolut gesetztes Element richtet sich sonst nach dem Rand des Innenabstands aus und stünde auf den Leistungsseiten 310 px zu weit links. */ .wp-block-post-title::after { content: ""; position: absolute; left: var(--reinhardt-titel-einzug); right: 0; bottom: 0; height: 5px; background: #fe2142; } @media (min-width: 782px) { .wp-block-post-title:has(+ .wp-block-post-content > .wp-block-columns.are-vertically-aligned-top:first-child) { /* Bildspalte plus Spaltenabstand. Der Abstand ist derselbe, den der Spaltenblock verwendet - clamp(30px, 5vw, 50px), also mitwachsend. --wp--style--block-gap wäre der falsche Wert: der steht auf 1,4 rem und ergäbe 28 px zu wenig. */ --reinhardt-titel-einzug: calc(260px + var(--wp--preset--spacing--50, 50px)); } } /* -------------------------------------------------------------------------- Galerien Zwei Dinge: eine dünne Linie im Logo-Rot um jedes Bild, und gleich große Felder für alle Bilder. Die Fotos sind auf weißem Grund freigestellt und liefen ohne Rahmen in die Seite aus - man sah nicht, wo ein Bild endet und das nächste beginnt. Die Seitenverhältnisse der Vorlagen gehen auseinander (515x466 bis 436x529), deshalb waren die Zeilen unterschiedlich hoch: 266x284 in der ersten, 266x322 in der zweiten. WordPress legt die Galerie als Flexbox an, in der jede Zeile so hoch wird wie ihr höchstes Bild. Die Breiten stimmten also schon - nur die Höhen nicht. Deshalb wird hier nur das Bild festgelegt: ein Seitenverhältnis von 1:1 bei voller Feldbreite. Daraus folgt für jedes Bild dieselbe Höhe, ohne dass am Aufbau der Galerie etwas geändert werden muss. (Ein eigenes Raster über die Galerie zu legen wäre der falsche Weg: Der Block gibt den Figuren eine Breite in Prozent, und die bezieht sich dann auf die Rasterzelle statt auf die Galerie - aus 33,33 % von 842 px würden 33,33 % von 266 px, die Bilder schrumpften auf 74 px.) Die Bilder werden nicht beschnitten, sondern eingepasst (object-fit: contain) und stehen auf Weiß. Beschneiden käme nicht in Frage: Bei den hochformatigen Vorlagen müssten oben und unten je knapp 9 % weg, und genau dort sind Kopf und Füße. Die Regel gilt für alle sechs Galerien der Seite, nicht nur für die des Hausmeisterservice: unterschiedlich behandelte Galerien läsen sich als Fehler. Um sie auf eine Seite zu begrenzen, genügt ein vorangestelltes .page-id-99 (oder der entsprechende Body-Klassenname). Das :not(#individual-image) ahmt die Schreibweise von WordPress nach. Ohne diesen Kunstgriff hätte die Regel des Blocks die höhere Gewichtung und die Bilder blieben bei ihrem eigenen Seitenverhältnis. -------------------------------------------------------------------------- */ /* Die Galerie steht auf voller Breite der Inhaltsspalte - dieselben Kanten wie der Block darüber. Zwischenzeitlich stand hier max-width: 70 %. Das machte die Kacheln zwar kleiner, ließ die Galerie aber rechts vor der Textkante enden. Kleiner werden sie jetzt über die Spaltenzahl: vier statt drei, festgelegt im Galerieblock in import.php. Bei 1037 px Spaltenbreite und 22,4 px Abstand ergibt das 242 px je Kachel statt 331. -------------------------------------------------------------------------- */ .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) { margin: 0; /* Nicht mitwachsen: Der Block gibt den Figuren flex-grow: 1, wodurch eine unvollständige letzte Reihe aufgefüllt wird. Bei der Galerie des 24-Stunden-Notdienstes mit fünf Bildern wurden die beiden in der zweiten Reihe dadurch 439 statt 285 px breit. Mit sechs Bildern fällt das nie auf, weil jede Reihe voll ist. */ flex-grow: 0; } .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; background: #ffffff; border: 1px solid #fe2142; box-sizing: border-box; } /* -------------------------------------------------------------------------- Bilder im Text -------------------------------------------------------------------------- */ .wp-block-post-content .alignleft { margin-right: 1.5em; margin-bottom: 1em; } .wp-block-post-content .alignright { margin-left: 1.5em; margin-bottom: 1em; } /* Auf schmalen Bildschirmen stehen umflossene Bilder besser für sich. */ @media (max-width: 600px) { .wp-block-post-content .alignleft, .wp-block-post-content .alignright { float: none; margin-left: 0; margin-right: 0; } } /* -------------------------------------------------------------------------- Schmale Bildschirme WordPress stapelt Spalten ab 781 px untereinander. Die Seitenleiste steht im Quelltext vorn, damit sie auf dem Desktop links erscheint - auf dem Handy stuende dann aber erst die Navigation und weit darunter der Seiteninhalt. Deshalb hier die Reihenfolge drehen. -------------------------------------------------------------------------- */ @media (max-width: 781px) { main > .wp-block-columns { display: flex; flex-direction: column; } main > .wp-block-columns > .wp-block-column:first-child { order: 2; margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid currentColor; } main > .wp-block-columns > .wp-block-column:last-child { order: 1; } } /* -------------------------------------------------------------------------- Vorher-Nachher-Vergleich Zwei deckungsgleiche Bilder übereinander; der Regler beschneidet das obere per clip-path. Beschnitt statt Breitenänderung, damit das Bild nicht gestaucht wird. Das Verhalten steckt in js/vorher-nachher.js. -------------------------------------------------------------------------- */ .ba-vergleich { --ba-pos: 50%; --ba-linie: #ffffff; --ba-griff: #d51232; --ba-radius: 8px; --ba-breite: 3px; position: relative; /* Bewusst schmaler als der Fließtext: über die volle Spaltenbreite wird der Vergleich unnötig hoch (571 px statt 395 px). */ max-width: 37rem; margin-inline: 0; width: 100%; border-radius: var(--ba-radius); overflow: hidden; /* Ohne diese Angabe springt das Layout, sobald die Bilder eintreffen. */ line-height: 0; touch-action: none; } .ba-vergleich img { display: block; width: 100%; height: auto; user-select: none; -webkit-user-drag: none; } .ba-vergleich .ba-nachher { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--ba-pos)); } .ba-vergleich .ba-linie { position: absolute; top: 0; bottom: 0; left: var(--ba-pos); width: var(--ba-breite); transform: translateX(-50%); background: var(--ba-linie); pointer-events: none; } .ba-vergleich .ba-griff { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 38px; height: 38px; border-radius: 50%; background: var(--ba-griff); border: var(--ba-breite) solid var(--ba-linie); display: grid; place-items: center; color: var(--ba-linie); font-size: 14px; line-height: 1; box-shadow: 0 2px 8px rgb(0 0 0 / 0.25); } .ba-vergleich .ba-griff::before { content: "\2194"; font-size: 17px; } .ba-vergleich .ba-regler { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; /* Durchsichtig über allem: der eigentliche Bedienweg. */ opacity: 0; cursor: ew-resize; appearance: none; background: transparent; } .ba-vergleich .ba-regler:focus-visible { outline: none; } /* Sichtbarer Fokus am Griff statt am unsichtbaren Feld - sonst sieht niemand, wo die Tastatur gerade steht. */ .ba-vergleich:has(.ba-regler:focus-visible) .ba-griff { outline: 3px solid var(--ba-griff); outline-offset: 3px; } .ba-vergleich .ba-text { position: absolute; top: 10px; padding: 3px 9px; border-radius: calc(var(--ba-radius) / 2); background: rgb(0 0 0 / 0.6); color: #fff; font: 500 13px/1.4 system-ui, sans-serif; pointer-events: none; } .ba-vergleich .ba-text-vorher { left: 10px; } .ba-vergleich .ba-text-nachher { right: 10px; } @media (prefers-reduced-motion: reduce) { .ba-vergleich * { transition: none !important; } } /* -------------------------------------------------------------------------- Die linke Spalte Ihre Breite steht als Prozentwert in der Vorlage (19,6 %). Prozente schrumpfen mit dem Fenster: Bei 1440 px sind das 253 px, bei 1000 px nur noch 167 - und dann bleiben neben der 40 px breiten Symbolkachel keine 100 px für die Beschriftung. Gemessen: Bei 1280 px brachen 4 von 7 Beschriftungen um, ab 1000 px alle sieben. Deshalb ein Boden von 200 px. Das entspricht ungefähr dem, was die Spalte vor der Verschmälerung auf schmalen Bildschirmen hatte (28 % von 700 px = 196 px). Auf breiten Bildschirmen greift er nicht, dort gelten die 19,6 %. -------------------------------------------------------------------------- */ .wp-block-columns.alignwide > .wp-block-column:first-child { min-width: 200px; } /* -------------------------------------------------------------------------- Kontaktkarte am Fuß der linken Spalte Sie füllt den auffälligsten Weißraum der Seite: Das Leistungsmenü endet auf jeder Seite bei y = 878, die Spalte läuft aber weiter - je nach Seite blieben darunter 1.200 bis 2.900 px leere Fläche. Gefüllte Fassung in #c0142f, nicht im Logo-Rot #fe2142: Weiß auf dem Logo-Rot kommt auf Kontrast 3,81 und bleibt unter dem Mindestwert 4,5. Die gedämpfte Abstufung erreicht 6,21. Beim aktiven Menüpunkt oben ist das Logo-Rot vertretbar - dort steht der Name der Seite, auf der man ohnehin ist; hier steht eine Aufforderung zu handeln. -------------------------------------------------------------------------- */ /* Karte und Angebotsknopf kleben gemeinsam. Bis zum 05.09.2026 klebte die Karte selbst. Seit der Knopf darunter steht, muss der Rahmen um beide kleben - sonst bliebe die Karte stehen und der Knopf liefe unter ihr weg. Der Abstand nach oben ist derselbe, den die Menüleiste zum Inhalt lässt. Greift nur, solange der Rahmen kürzer ist als das Fenster - sonst verhält er sich wie ein gewöhnlicher Block. */ .reinhardt-kontaktspalte { position: sticky; top: var(--wp--preset--spacing--30, 20px); margin-top: var(--wp--preset--spacing--40, 30px); } .reinhardt-kontaktkarte { padding: 18px 16px 20px; border-radius: 5px; background-color: #c0142f; color: #ffffff; font-family: inherit; } /* Der Knopf "Angebot anfordern" - eine Grafik mit durchsichtigem Grund, die auf die Angebotsseite verweist. Sie steht auf voller Spaltenbreite und behält ihr Seitenverhältnis von 818 : 308. */ .reinhardt-angebotsknopf { display: block; margin-top: 14px; border-radius: 5px; } .reinhardt-angebotsknopf img { display: block; width: 100%; height: auto; } .reinhardt-angebotsknopf:hover img { opacity: 0.9; } .reinhardt-angebotsknopf:focus-visible { outline: 2px solid #fe2142; outline-offset: 3px; } .reinhardt-kontaktkarte__zeile { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: rgb(255 255 255 / 0.82); } .reinhardt-kontaktkarte__nummer { display: block; margin-top: 4px; font-size: 26px; font-weight: 700; letter-spacing: -0.01em; color: #ffffff; text-decoration: none; } .reinhardt-kontaktkarte__nummer:hover, .reinhardt-kontaktkarte__nummer:focus-visible { text-decoration: underline; text-underline-offset: 3px; } .reinhardt-kontaktkarte__hinweis { display: flex; align-items: baseline; gap: 7px; margin: 10px 0 0; font-size: 14px; line-height: 1.45; color: rgb(255 255 255 / 0.88); } .reinhardt-kontaktkarte__punkt { flex: none; width: 7px; height: 7px; border-radius: 50%; background: #ffffff; transform: translateY(-1px); } .reinhardt-kontaktkarte a:focus-visible { outline: 3px solid #ffffff; outline-offset: 2px; } /* Unter 782 px stehen die Spalten untereinander. Dort steht die Karte einmal am Ende der Spalte und klebt nicht - eine mitscrollende Karte über die volle Breite verdeckte auf einem Handy einen guten Teil des Bildschirms. */ @media (max-width: 781px) { .reinhardt-kontaktkarte { position: static; } } /* -------------------------------------------------------------------------- Leistungsmenü (Block reinhardt/leistungsmenue) Jeder Eintrag ist eine Karte: Rahmen, Symbolkachel, Beschriftung. Die Kachel hat eine feste Breite, damit die Beschriftungen auch dann untereinander stehen, wenn ein Eintrag noch kein Symbol hat. -------------------------------------------------------------------------- */ .reinhardt-leistungsmenue__titel { font-size: var(--wp--preset--font-size--large); font-weight: 700; margin: 0 0 0.6em; } /* Karten statt bloßer Liste: Jeder Eintrag bekommt eine eigene Fläche mit Rahmen. Vorher waren es Symbol und Text ohne alles - nichts daran zeigte, dass man darauf klicken kann. */ .reinhardt-leistungsmenue__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; } .reinhardt-leistungsmenue__eintrag > a, .reinhardt-leistungsmenue__eintrag > span { display: flex; align-items: center; gap: 11px; padding: 9px 12px 9px 9px; border: 1px solid #dedbd6; border-radius: 5px; text-decoration: none; line-height: 1.3; } /* Kein Mouseover-Effekt: die Einträge bleiben beim Überfahren unverändert. Der Tastaturfokus behält seine Kennzeichnung - sonst wüssten Menschen, die ohne Maus navigieren, nicht mehr, wo sie stehen. */ .reinhardt-leistungsmenue__eintrag > a:focus-visible { border-color: #fe2142; /* Ohne diese Farbe zöge die Kernregel von WordPress (siehe unten) auch hier einen schwarzen Rahmen - nur eben für die Tastatur statt für die Maus. Rot wie an allen anderen Bedienelementen der Seite. */ outline: 2px solid #fe2142; outline-offset: 2px; text-decoration: none; } /* Aktuelle Seite: roter Rahmen, rote Symbolkachel, halbfette Schrift. Verwendet wird das Logo-Rot #fe2142 - nicht das gedämpfte #c0142f der Fläche neben der Seite. Auf Weiß darf die Marke ihre volle Farbe haben; gedämpft wurde sie nur, weil sie als große Hintergrundfläche zu laut war. */ .reinhardt-leistungsmenue__eintrag.ist-aktuell > a { border-color: #fe2142; font-weight: 600; } /* Die Symbolkachel: 40 px Kantenlänge mit einem 26-px-Symbol darin - so bleibt Luft um die Zeichnung, ohne dass die Karte zu hoch wird. */ .reinhardt-leistungsmenue__symbol { position: relative; flex: 0 0 40px; width: 40px; height: 40px; display: grid; place-items: center; background: #f2f0ed; border-radius: 4px; color: #1a1a18; } .reinhardt-leistungsmenue__eintrag > a:focus-visible .reinhardt-leistungsmenue__symbol, .reinhardt-leistungsmenue__eintrag.ist-aktuell .reinhardt-leistungsmenue__symbol { background: #fe2142; color: #ffffff; } /* Eingebautes Piktogramm: eine Datei, die Farbe kommt über currentColor - deshalb genügt der Farbwechsel der Kachel darüber. */ .reinhardt-leistungsmenue__piktogramm { display: block; } /* Hochgeladene Symbole aus der Mediathek sind Bilddateien und lassen sich nicht umfärben. Für die aktuelle Seite kann deshalb weiterhin ein zweites Bild hinterlegt werden, das darübergeblendet wird. */ .reinhardt-leistungsmenue__symbol img { width: 26px; height: 26px; object-fit: contain; } .reinhardt-leistungsmenue__symbol-hover { position: absolute; inset: 0; margin: auto; opacity: 0; transition: opacity 120ms ease-in-out; } .reinhardt-leistungsmenue__eintrag > a:focus-visible .reinhardt-leistungsmenue__symbol-hover, .reinhardt-leistungsmenue__eintrag.ist-aktuell .reinhardt-leistungsmenue__symbol-hover { opacity: 1; } .reinhardt-leistungsmenue__eintrag > a:focus-visible .reinhardt-leistungsmenue__symbol-normal, .reinhardt-leistungsmenue__eintrag.ist-aktuell .reinhardt-leistungsmenue__symbol-normal { opacity: 0; transition: opacity 120ms ease-in-out; } .reinhardt-leistungsmenue__symbol-normal { transition: opacity 120ms ease-in-out; } @media (prefers-reduced-motion: reduce) { .reinhardt-leistungsmenue__symbol img { transition: none; } } .reinhardt-leistungsmenue__text { font-size: 1rem; } /* In der schmalen Seitenspalte richtet sich der Vergleich nach der Spalte, nicht nach der Lesebreite des Fließtextes. */ .wp-block-column .ba-vergleich { max-width: 100%; } .wp-block-column .ba-vergleich .ba-griff { width: 30px; height: 30px; } .wp-block-column .ba-vergleich .ba-griff::before { font-size: 14px; } .wp-block-column .ba-vergleich .ba-text { top: 6px; padding: 2px 7px; font-size: 11px; } .wp-block-column .ba-vergleich .ba-text-vorher { left: 6px; } .wp-block-column .ba-vergleich .ba-text-nachher { right: 6px; } /* -------------------------------------------------------------------------- Flächen auf den Leistungsseiten Die sieben Leistungsseiten hatten denselben Bauplan: Überschrift, zwei Zeilen Text, Überschrift, zwei Zeilen Text - über die ganze Seite hinweg ohne einen einzigen Absetzer. Drei Abschnitte bekommen deshalb eine eigene Fläche. Ausgewählt sind sie nicht nach Gefühl, sondern nach Funktion: .reinhardt-leistungsliste "Was wir machen" - die Aufzählung oben .reinhardt-fragen der Block mit den häufigen Fragen .reinhardt-abschluss der letzte Abschnitt der Seite Zwei davon teilen sich dieselbe Tönung und bilden ein Paar; der Abschluss trägt als einziger das Firmenrot. Drei verschiedene Behandlungen sähen beliebig aus, zwei gleiche plus ein Akzent ergeben ein System. Die Farben sind keine neuen: #f2f0ed und #dedbd6 stehen schon am Leistungsmenü und am Partnerbanner. Die Gruppen selbst kommen aus den Inhaltsdateien in migration/content/ und sind gewöhnliche wp:group-Blöcke - im Editor also normal zu bearbeiten. -------------------------------------------------------------------------- */ .reinhardt-leistungsliste, .reinhardt-fragen, .reinhardt-abschluss { margin-top: 40px; padding: 26px 30px; border-radius: 2px; } /* Innen keine doppelten Abstände: Die Fläche bringt ihren eigenen Rand mit, die Ränder der Blöcke darin würden sich sonst addieren. */ .reinhardt-leistungsliste > :first-child, .reinhardt-fragen > :first-child, .reinhardt-abschluss > :first-child { margin-top: 0; } .reinhardt-leistungsliste > :last-child, .reinhardt-fragen > :last-child, .reinhardt-abschluss > :last-child { margin-bottom: 0; } /* "Was wir machen" - ruhige Tönung, die Punkte in Firmenrot. */ .reinhardt-leistungsliste { background: #f2f0ed; } .reinhardt-leistungsliste li::marker { color: #fe2142; } /* Häufige Fragen - dieselbe Tönung, aber innen durch Haarlinien in Zeilen geteilt. So gehört der Block sichtbar zur Liste oben und sieht doch nicht gleich aus. Jede Frage bekommt zusätzlich die rote Marke. */ .reinhardt-fragen { background: #f2f0ed; } .reinhardt-fragen h3 { margin-top: 22px; padding-top: 22px; padding-left: 11px; border-top: 1px solid #dedbd6; border-left: 3px solid #fe2142; } .reinhardt-fragen h3 + p { margin-top: 8px; padding-left: 14px; } /* Der Abschluss - der einzige Block mit Farbe. Hier steht auf jeder Seite, was als Nächstes zu tun ist. */ .reinhardt-abschluss { background: #fdf2f3; border-left: 3px solid #fe2142; border-radius: 0 2px 2px 0; } .reinhardt-abschluss li::marker { color: #fe2142; } /* Auf schmalen Bildschirmen fressen 30 px Rand zu viel von der Zeile. */ @media (max-width: 600px) { .reinhardt-leistungsliste, .reinhardt-fragen, .reinhardt-abschluss { padding: 20px 18px; } } /* Der Schatten unter dem Personenfoto oben auf den Leistungsseiten. drop-shadow und nicht box-shadow: Die Fotos sind Freisteller, seit dem 02.09.2026 mit echter Alphakante (siehe den Zweig für leistung-* in build-bilder.py). box-shadow legte einen rechteckigen Schatten um das Bildfeld - auf der weißen Seite sähe man einen Schatten um nichts. drop-shadow folgt dagegen der Silhouette, die Person steht auf der Seite. Der Weichzeichner ist mit 18 px bewusst groß: Die Alphakante der Fotos ist hart, ohne Zwischenwerte. Ein enger Schatten würde diese Treppchen nachzeichnen, ein weiter verwischt sie. */ .reinhardt-leistungsbild img { filter: drop-shadow(0 10px 18px rgba(26, 26, 24, 0.30)); } /* Die Bürozeiten in der Kontaktkarte. Die Karte steht in einer Spalte von 253 px, innen bleiben nach Abzug der Polsterung 221 px. „Montag bis Donnerstag“ und „08.00–12.00 und 13.00–15.30“ passen dort in je eine Zeile - deshalb untereinander und nicht als zwei Spalten: Ein Raster mit Tag links und Zeit rechts käme auf dieser Breite in beiden Spalten ins Umbrechen. Bis-Striche ohne Leerzeichen, wie im Deutschen üblich; das spart hier zusätzlich rund 12 px je Zeile. */ .reinhardt-kontaktkarte__zeile--abstand { margin-top: 16px; } .reinhardt-kontaktkarte__zeiten { margin: 5px 0 0; font-size: 13px; line-height: 1.4; color: rgb(255 255 255 / 0.88); } /* Die Deckkraft ist nachgerechnet, nicht geschätzt: Auf #c0142f kommt Weiß mit 0,72 nur auf 3,75:1 und fiele damit unter die geforderten 4,5:1 für Fließtext. 0,86 ergibt 4,9:1. Die Zeiten selbst stehen in reinem Weiß - sie sind die Auskunft, der Wochentag nur ihre Beschriftung. */ .reinhardt-kontaktkarte__zeiten dt { font-weight: 600; color: rgb(255 255 255 / 0.86); } .reinhardt-kontaktkarte__zeiten dd { margin: 0 0 6px; color: #ffffff; font-variant-numeric: tabular-nums; } /* Eine Zeitspanne wird nie getrennt. Der Gedankenstrich ist für den Browser sonst eine gültige Umbruchstelle, und "13.00–" am Zeilenende mit "15.30" darunter liest sich als zwei Uhrzeiten statt als eine Spanne. */ .reinhardt-kontaktkarte__zeiten dd span { white-space: nowrap; } .reinhardt-kontaktkarte__zeiten dd:last-child { margin-bottom: 0; } /* -------------------------------------------------------------------------- Formularfelder Bis zum 03.09.2026 stand im Theme keine einzige Regel für Formulare. Zu sehen waren die Vorgaben des Browsers: Aus dem size="40", das Contact Form 7 mitschickt, ergaben sich 280 px Breite und 22 px Höhe - in einer Spalte von 1037 px. Die Felder füllen jetzt die Formularbreite, und die ist auf 640 px begrenzt. Über die volle Spaltenbreite wäre ein Feld nicht besser, sondern schlechter: Ein Eingabefeld von 1037 px für einen Namen sagt nichts mehr darüber, was hineingehört. -------------------------------------------------------------------------- */ .wpcf7 form { max-width: 640px; } .wpcf7 p { margin-top: 18px; } .wpcf7 label { display: block; font-size: 15px; font-weight: 600; } /* Contact Form 7 setzt zwischen Beschriftung und Feld ein
. Da der Feldrahmen darunter ohnehin ein eigener Block ist, ergäbe das eine leere Zeile. */ .wpcf7 label br { display: none; } .wpcf7-form-control-wrap { display: block; margin-top: 5px; } .wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 input[type="tel"], .wpcf7 textarea { width: 100%; /* Ohne das rechnet der Browser Polsterung und Rahmen auf die 100 % obendrauf: Die Felder standen 666 px breit in einem 640 px breiten Formular und ragten rechts heraus. */ box-sizing: border-box; padding: 10px 12px; border: 1px solid #dedbd6; border-radius: 3px; background: #ffffff; color: #1a1a18; font-family: inherit; /* 16 px und nicht kleiner: Safari auf dem iPhone zoomt beim Antippen in jedes Feld hinein, dessen Schrift darunter liegt, und der Besucher sitzt danach im vergrößerten Ausschnitt fest. */ font-size: 16px; font-weight: 400; line-height: 1.4; } .wpcf7 textarea { min-height: 170px; resize: vertical; } .wpcf7 input[type="text"]:focus, .wpcf7 input[type="email"]:focus, .wpcf7 input[type="tel"]:focus, .wpcf7 textarea:focus { border-color: #fe2142; outline: 2px solid #fe2142; outline-offset: 1px; } /* Die Auswahlkästchen. Der Zeilenumbruch entsteht von selbst, sobald die Liste breiter wird als das Formular - bei den sieben Dienstleistungen ist das der Normalfall. */ .wpcf7-checkbox { display: flex; flex-wrap: wrap; gap: 9px 22px; margin-top: 6px; } .wpcf7-list-item { margin: 0; } .wpcf7 .wpcf7-list-item label { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 400; cursor: pointer; } .wpcf7 input[type="checkbox"] { flex: none; width: 18px; height: 18px; margin: 0; accent-color: #fe2142; } /* Die Fußnote zum Winterdienst unter der Auswahl. */ .wpcf7 small { display: block; margin-top: 8px; font-size: 14px; line-height: 1.5; color: #6d6763; } .wpcf7 input[type="submit"] { display: inline-block; margin-top: 10px; padding: 12px 28px; border: 0; border-radius: 3px; background: #c0142f; color: #ffffff; font-family: inherit; font-size: 16px; font-weight: 600; cursor: pointer; } .wpcf7 input[type="submit"]:hover { background: #a8112a; } .wpcf7 input[type="submit"]:focus-visible { outline: 2px solid #fe2142; outline-offset: 2px; } /* Meldungen. Ein fehlerhaftes Feld wird zusätzlich am Rahmen kenntlich gemacht - Farbe allein genügt nicht, der Hinweistext steht darunter. */ .wpcf7 input[aria-invalid="true"], .wpcf7 textarea[aria-invalid="true"] { border-color: #c0142f; } .wpcf7-not-valid-tip { margin-top: 5px; font-size: 14px; font-weight: 600; color: #c0142f; } .wpcf7-response-output { margin: 20px 0 0; padding: 12px 14px; border: 1px solid #dedbd6; border-left: 3px solid #fe2142; border-radius: 0 3px 3px 0; background: #fdf2f3; font-size: 15px; line-height: 1.5; } /* -------------------------------------------------------------------------- Kein Fokusrahmen beim Klicken WordPress liefert in seinen globalen Stilen die Regel :where(.wp-site-blocks :focus) { outline-width: 2px; outline-style: solid } aus - mit Breite und Linienart, aber ohne Farbe. Die Farbe fällt damit auf currentColor zurück, und das ist im Leistungsmenü die Textfarbe #1a1a18. Wer dort einen Eintrag anklickt, bekommt deshalb einen dicken schwarzen Rahmen zu sehen. Der Haken ist das :focus: Es greift bei jeder Art, den Fokus zu setzen, also auch beim Klicken mit der Maus. Genau dafür gibt es :focus-visible - der Browser entscheidet damit selbst, ob eine Kennzeichnung nötig ist. Diese Regel schaltet den Rahmen deshalb nur dort ab, wo der Browser ihn selbst für entbehrlich hält. Wer mit der Tastatur navigiert, behält ihn überall. Das ist der Unterschied zu einem pauschalen outline: none, das die Seite für Tastaturbedienung unbrauchbar machen würde. Die Kernregel steht in :where() und hat damit die Spezifität 0; jede gewöhnliche Regel schlägt sie. -------------------------------------------------------------------------- */ .wp-site-blocks :focus:not(:focus-visible) { outline: none; } /* Abschnitte und Fragegruppen im Personalfragebogen. Der Bogen hat 33 Felder. Ohne Gliederung wäre er eine Kolonne, bei der man nach der Hälfte nicht mehr weiß, wo man ist. */ .wpcf7 .reinhardt-formular-abschnitt { margin: 38px 0 0; padding-top: 18px; border-top: 1px solid #dedbd6; font-size: 19px; font-weight: 700; line-height: 1.25; } .wpcf7 .reinhardt-formular-abschnitt:first-child { margin-top: 0; } .wpcf7 .reinhardt-formular-hinweis { margin-top: 10px; font-size: 14px; line-height: 1.5; color: #6d6763; } .wpcf7 .reinhardt-formular-hinweis strong { color: #1a1a18; } /* Fragegruppen mit Radiofeldern. Der fieldset-Rahmen des Browsers ist hier überflüssig - die legend allein trennt schon genug. */ .wpcf7 fieldset { margin: 18px 0 0; padding: 0; border: 0; } .wpcf7 fieldset legend { padding: 0; font-size: 15px; font-weight: 600; } /* Gilt fuer beide Bauarten: Die Fragegruppen im Personalfragebogen sind Checkboxen mit "exclusive" (siehe import.php), die Auswahl im Angebotsformular sind gewoehnliche Checkboxen. */ .wpcf7 .wpcf7-radio { display: flex; flex-wrap: wrap; gap: 9px 22px; margin-top: 6px; } .wpcf7 fieldset .wpcf7-checkbox { display: flex; flex-wrap: wrap; gap: 9px 22px; margin-top: 6px; } .wpcf7 .wpcf7-radio .wpcf7-list-item label { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 400; cursor: pointer; } .wpcf7 input[type="radio"] { flex: none; width: 18px; height: 18px; margin: 0; accent-color: #fe2142; } /* Datumsfelder wie alle anderen Eingaben. Ohne eigene Regel bliebe hier die Browservorgabe stehen - schmal, niedrig und mit fremder Schrift. */ .wpcf7 input[type="date"] { width: 100%; max-width: 260px; box-sizing: border-box; padding: 10px 12px; border: 1px solid #dedbd6; border-radius: 3px; background: #ffffff; color: #1a1a18; font-family: inherit; font-size: 16px; line-height: 1.4; } .wpcf7 input[type="date"]:focus { border-color: #fe2142; outline: 2px solid #fe2142; outline-offset: 1px; } /* Die Einwilligung. Sie steht abgesetzt, damit niemand sie überliest. */ .wpcf7 .wpcf7-acceptance { display: block; margin-top: 6px; } .wpcf7 .wpcf7-acceptance .wpcf7-list-item { margin: 0; } .wpcf7 .wpcf7-acceptance label { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; font-weight: 400; line-height: 1.5; cursor: pointer; } .wpcf7 .wpcf7-acceptance input[type="checkbox"] { margin-top: 2px; } /* Das Honigtopf-Feld des Spamschutzes (siehe spamschutz.php). Nicht display:none: Manche Programme überspringen Felder, die auf diesem Weg verschwinden. Aus dem Bild geschoben wird es dagegen mitgefüllt - und genau das ist der Zweck. Für Menschen ist es ebenso unsichtbar. */ .reinhardt-honigtopf { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* -------------------------------------------------------------------------- Drucken und als PDF speichern Der Kasten unter dem Absendeknopf. Er ist bewusst ruhiger gehalten als dieser: Das Absenden bleibt der Regelweg, Drucken ist die Ausweiche für alle, die ihre Sozialversicherungsnummer nicht per E-Mail schicken wollen. -------------------------------------------------------------------------- */ .reinhardt-ausgabe { max-width: 640px; margin: 34px 0 0; padding: 20px 22px; border: 1px solid #dedbd6; border-left: 3px solid #dedbd6; border-radius: 0 3px 3px 0; background: #f2f0ed; } .reinhardt-ausgabe__frage { margin: 0; font-size: 16px; font-weight: 700; } .reinhardt-ausgabe__text { margin: 7px 0 0; font-size: 15px; line-height: 1.5; } .reinhardt-ausgabe__knoepfe { display: flex; flex-wrap: wrap; gap: 10px; margin: 15px 0 0; } .reinhardt-ausgabe__knopf { padding: 11px 20px; border: 1px solid #1a1a18; border-radius: 3px; background: #ffffff; color: #1a1a18; font-family: inherit; font-size: 15px; font-weight: 600; cursor: pointer; } .reinhardt-ausgabe__knopf:hover { background: #e4e1dc; } .reinhardt-ausgabe__knopf:focus-visible { outline: 2px solid #fe2142; outline-offset: 2px; } /* Die Unterschriftszeile gibt es nur auf Papier. */ .reinhardt-unterschrift { display: none; } /* -------------------------------------------------------------------------- Der Bogen auf Papier - auf ein Blatt A4 Gedruckt wird der Fragebogen, nicht die Website. Kopf, Menue, Fusszeile und die linke Spalte fallen weg, ebenso die Einleitung und die Knoepfe. Der Bogen soll auf eine Seite passen - so wie das Papieroriginal, das 33 Zeilen auf einem Blatt unterbringt. Dafuer stehen Beschriftung und Feld nebeneinander statt untereinander: 44 Prozent Beschriftung, 56 Prozent Eingabe. Untereinander braeuchte jede Angabe die doppelte Hoehe, und der Bogen liefe auf drei Seiten. Alle Masse in Millimetern und Punkt statt in Pixeln: Beim Druck rechnet der Browser Pixel ueber eine angenommene Aufloesung um, Millimeter nicht. Zwei Dinge kehren sich gegenueber dem Bildschirm um: Der Einwilligungshaken verschwindet - auf Papier unterschreibt man - und dafuer erscheint eine Unterschriftszeile wie auf dem urspruenglichen Bogen. -------------------------------------------------------------------------- */ @media print { @page { size: A4 portrait; margin: 9mm 10mm; } header.wp-block-template-part, footer.wp-block-template-part, .wp-block-columns.alignwide > .wp-block-column:first-child, .wp-block-post-content > p, .reinhardt-abschluss, .reinhardt-einwilligung, .reinhardt-ausgabe, .reinhardt-honigtopf, .reinhardt-formular-hinweis, .wpcf7-response-output, .wpcf7-spinner { display: none !important; } /* Die Inhaltsspalte ueber das ganze Blatt. */ .wp-block-columns.alignwide { display: block !important; } .wp-block-columns.alignwide > .wp-block-column { flex-basis: auto !important; width: 100% !important; } .wpcf7 form { max-width: none; } body { background: #ffffff; color: #000000; font-size: 7pt; line-height: 1.25; } main { margin-top: 0 !important; } .wp-block-post-title { margin: 0; padding-bottom: 1.5mm; font-size: 12pt; line-height: 1.1; } /* Eine Zeile je Angabe: Beschriftung links, Feld rechts. Der Beschriftungstext ist ein blosser Textknoten im label und laesst sich nicht ansprechen - deshalb bekommt das Feld eine feste Breite und der Text nimmt, was uebrig bleibt. */ /* Jede Angabe ist eine Zeile einer Tabelle, wie auf der Vorlage: Rahmen aussen herum, eine senkrechte Linie zwischen Beschriftung und Wert. Der Rahmen sitzt nur unten und an den Seiten - die obere Kante bringt die vorhergehende Zeile mit, sonst staenden ueberall doppelte Striche. Die Spaltenbreite ist ein festes Mass und kein Prozentwert. Prozente beziehen sich jeweils auf das umgebende Kaestchen, und die sind hier nicht alle gleich breit - Rahmen und Innenabstaende verschieben sie um Bruchteile. Bei 47 Zeilen ergab das sichtbar krumme Kanten. */ .wpcf7 p, .wpcf7 fieldset { box-sizing: border-box; position: relative; margin: 0; padding: 0; border: 0.25mm solid #000000; border-top: 0; } /* Contact Form 7 legt um die Auswahl innerhalb eines fieldset noch einen eigenen Absatz. Der ist keine eigene Tabellenzeile - ohne diese Ausnahme bekaeme er einen zweiten Rahmen innerhalb des ersten, um die Rahmenbreite versetzt. Genau daher kamen die krummen Kanten. */ .wpcf7 fieldset p { position: static; margin: 0 0 0 80mm; padding: 0 0 0 1.2mm; border: 0; } .wpcf7 fieldset p::before { content: none; } /* Die senkrechte Linie - fuer beide Zeilenarten dieselbe Regel, gemessen von der Innenkante des Rahmens. */ .wpcf7 p::before, .wpcf7 fieldset::before { content: ""; position: absolute; left: 80mm; top: 0; bottom: 0; border-left: 0.25mm solid #000000; } /* Die erste Zeile eines Abschnitts braucht ihre obere Kante selbst. */ .reinhardt-formular-abschnitt + p, .reinhardt-formular-abschnitt + fieldset { border-top: 0.25mm solid #000000; } /* Ein leerer Absatz wuerde als Strich ohne Inhalt erscheinen. */ .wpcf7 p:empty { display: none; } /* Beschriftung und Wert als zwei Spalten. Ein Raster und kein Flexkasten: Der Beschriftungstext ist ein blosser Textknoten und laesst sich nicht ansprechen - im Raster landet er von selbst in der ersten Spalte und bekommt deren feste Breite. */ .wpcf7 label { display: grid; grid-template-columns: 80mm 1fr; align-items: center; padding: 0; text-indent: 1.2mm; font-size: 7pt; font-weight: 400; } .wpcf7 label > .wpcf7-form-control-wrap { margin: 0; padding-left: 1.2mm; text-indent: 0; } /* Kein eigener Kasten um die Eingabe: Den Rahmen bringt die Tabellenzeile mit. Ein leeres Feld hinterlaesst so kein leeres Kaestchen, sondern eine leere Zelle - genau wie auf der Vorlage. */ .wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 input[type="tel"], .wpcf7 input[type="date"] { box-sizing: border-box; width: 100%; max-width: none; min-height: 0; margin: 0; padding: 0.4mm 0; border: 0; border-radius: 0; background: transparent; color: #000000; font-family: inherit; font-size: 7pt; line-height: 1.2; } /* Leere Felder ganz verbergen. Noetig vor allem wegen der Datumsfelder: Sie zeigen im leeren Zustand "tt.mm.jjjj" an, und das stuende sonst gedruckt in der Zelle. Die Klasse setzt drucken.js unmittelbar vor dem Druck; visibility statt display, damit die Zeilenhoehe erhalten bleibt. */ .wpcf7 .reinhardt-leer { visibility: hidden; } /* Das Kalendersymbol der Datumsfelder gehoert nicht aufs Papier. */ .wpcf7 input[type="date"]::-webkit-calendar-picker-indicator { display: none; } /* Die Frage schwebt nicht absolut ueber der Zeile, sondern steht als umflossenes Element darin. Absolut gesetzt steuerte sie keine Hoehe bei, und "Befreiung von der Rentenversicherung gewuenscht, nur bei Minijob" lief mit seiner zweiten Zeile in die naechste Zeile hinein. */ .wpcf7 fieldset { overflow: hidden; padding: 0.5mm 0; } .wpcf7 fieldset legend { box-sizing: border-box; float: left; width: 80mm; padding: 0 0 0 1.2mm; font-size: 7pt; font-weight: 400; } .wpcf7 fieldset .wpcf7-checkbox { gap: 0 2mm; margin: 0; padding: 0; } .wpcf7 .wpcf7-list-item label { gap: 1mm; font-size: 7pt; } .wpcf7 input[type="checkbox"] { width: 2.6mm; height: 2.6mm; /* Schwarz statt Logorot: Auf einem Schwarzweissdrucker wird aus dem Rot ein mittleres Grau mit weissem Haken darin - schlecht zu erkennen und beim Kopieren noch schlechter. Der Bogen wird abgeheftet, nicht ausgestellt. */ accent-color: #000000; /* Ohne das druckt der Browser die Kaestchen leer - er laesst Hintergrundfarben weg, und genau daraus besteht ein Haken. */ -webkit-print-color-adjust: exact; print-color-adjust: exact; } .wpcf7 .reinhardt-formular-abschnitt { break-inside: avoid; break-after: avoid; margin: 2mm 0 0.8mm; padding: 0 0 0.4mm 1.2mm; border: 0; border-bottom: 0.25mm solid #000000; font-size: 7.5pt; line-height: 1.2; } .wpcf7 .reinhardt-formular-abschnitt:first-child { margin-top: 0; } /* Keine Angabe ueber den Seitenumbruch reissen. */ .wpcf7 p, .wpcf7 fieldset { break-inside: avoid; } a { color: #000000; text-decoration: none; } /* Unterschriftszeile statt Einwilligungshaken. */ .reinhardt-unterschrift { display: block; margin-top: 3mm; break-inside: avoid; } .reinhardt-unterschrift__hinweis { margin: 0 0 5mm; font-size: 7pt; } .reinhardt-unterschrift__linien { display: flex; gap: 10mm; margin: 0; } .reinhardt-unterschrift__linien span { flex: 1; padding-top: 0.8mm; border-top: 0.3mm solid #000000; font-size: 6.5pt; } /* Fusszeile wie auf dem urspruenglichen Bogen. */ .wpcf7 form::after { content: "Personalfragebogen \00b7 Reinhardt Dienstleistungen GmbH & Co. KG"; display: block; margin-top: 3mm; padding-top: 1mm; border-top: 0.3mm solid #000000; font-size: 6pt; } } /* Ausnahme: die Galerie des Hausmeisterservice. Ihre acht Bilder sind hochformatig (380 × 501 bis 380 × 516) und tragen ihre Beschriftung eingebrannt - Nummer, Titel, Erläuterung. Im quadratischen Kasten der übrigen Galerien schrumpfen sie auf 243 px Breite, und die Erläuterungszeile ist dann kaum noch zu entziffern. Bei voller Spaltenbreite (330 px, also fast Originalgröße) liest sie sich. Der Kommentar zur allgemeinen Regel weiter oben nennt genau diesen Weg, eine Galerie auszunehmen. Dass diese eine anders aussieht, ist zu rechtfertigen: Die übrigen Galerien zeigen Fotos, diese zeigt beschriftete Tafeln - anderer Inhalt, andere Behandlung. */ .wp-block-gallery.reinhardt-galerie-hochformat.has-nested-images figure.wp-block-image:not(#individual-image) { /* Nicht auf Reihenhöhe dehnen: Die Figuren sind Flex-Elemente, und ohne diese Zeile zieht die höchste Figur die übrigen mit. */ align-self: flex-start; } /* Der Block gibt dem Bild flex: 1 0 0% und height: 100%. Zusammen mit dem aufgehobenen Seitenverhältnis wüchse es dadurch ins Unbestimmte - gemessen wurden 1502 px Höhe bei 331 px Breite. Beides muss deshalb mit zurück. */ .wp-block-gallery.reinhardt-galerie-hochformat.has-nested-images figure.wp-block-image:not(#individual-image) img { flex: 0 0 auto; width: 100%; height: auto; /* Ein festes Verhältnis statt aspect-ratio: auto. Auf die Eigengröße zu bauen ist hier nicht verlässlich: Der Block gibt dem Bild flex und height: 100%, und je nachdem, wann das Bild geladen ist, kam eine Figur von über 1.400 px Höhe heraus, in der das Foto unten klebte. 95 : 127 ist genau 380 × 508 - das Maß, auf das build-bilder.py die acht Vorlagen bringt. Weil Bild und Rahmen damit dasselbe Verhältnis haben, bleibt kein weißer Streifen zwischen beiden. cover statt contain fängt zusätzlich die Rundung auf Bruchteile von Pixeln ab: Die Spaltenbreite ist krumm (330,78 px), und contain ließe dabei eine Haarlinie stehen. */ aspect-ratio: 95 / 127; object-fit: cover; }