/* * Beitragsseite (single.php) — handgeschrieben, KEIN Tailwind-Build. * * Gleicher Grund wie bei listing.css und um.css: Der Build liest seine * Klassenliste beim Bauen aus den Quelldateien. Eine Utility-Klasse, die dort * zum Bauzeitpunkt nicht stand, landet nicht im Stylesheet und wird vom * Browser stillschweigend ignoriert — die Seite bleibt heil und sieht nur * falsch aus. * * Nachgemessen am 2026-08-16 im ausgelieferten site.css: `h-auto`, * `object-cover`, `aspect-video` und `hover:text-brand` fehlen dort. Genau * diese Regeln stehen deshalb hier auf eigenen Klassennamen, statt sich auf * Utilities zu verlassen, die es nicht gibt. * * Geladen nur auf der Einzelansicht eines Beitrags (siehe functions.php). */ /* ------------------------------------------------------------------ Kopf */ /* * Die Brotkrumen und die Meta-Zeile benutzen dieselbe gedämpfte Farbe wie die * Firmenseite. `currentColor` statt eines festen Wertes, damit der * Dunkelmodus des Themes von selbst greift. */ .wtw-artikel__brotkrumen a:hover, .wtw-artikel__brotkrumen a:focus-visible { color: var(--brand, #1d6fa5); } /* * Trenner zwischen den Brotkrumen. `px-1.5` waere die naheliegende Utility — * sie steht aber nicht im Build (nachgemessen am 2026-08-16), obwohl die * Firmenseite sie benutzt. Dort fehlt der Abstand deshalb ebenfalls. */ .wtw-artikel__trenner { padding-left: .375rem; padding-right: .375rem; } /* * Die Regeln fuer .wtw-artikel__meta (Erstelldatum, Lesezeit) sind am * 2026-08-16 entfallen: Der Betreiber will ueber dem Artikel keine Metadaten. * Siehe single.php. */ /* ---------------------------------------------------------- Beitragsbild */ /* * `aspect-video` und `object-cover` fehlen im Build, deshalb hier von Hand. * Das feste Seitenverhältnis verhindert den Sprung beim Nachladen (CLS) — * die von der KI erzeugten Titelbilder haben nicht alle dasselbe Format. */ .wtw-artikel__bild { overflow: hidden; border-radius: 1.5rem; border: 1px solid rgb(226 232 240); background: rgb(248 250 252); } .wtw-artikel__bild img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; } @media (prefers-color-scheme: dark) { :where(html:not(.light)) .wtw-artikel__bild { border-color: rgb(255 255 255 / .1); background: rgb(255 255 255 / .03); } } html.dark .wtw-artikel__bild { border-color: rgb(255 255 255 / .1); background: rgb(255 255 255 / .03); } /* ------------------------------------------------------------- Fliesstext */ /* * Der Generator setzt im FAQ-Block Inline-Abstände an die h3 * (`style="margin-top:0;margin-bottom:10px"`). Die überschreiben die * Typografie von .sl-prose und drücken die Fragen zusammen. Inline-Styles * lassen sich nur mit !important übergehen — der Alternativweg wäre, in jeden * erzeugten Artikel einzugreifen, und das trifft die bereits veröffentlichten * nicht. */ .sl-prose h3[style] { margin-top: 2em !important; margin-bottom: .6em !important; } /* * Der FAQ-Teil steht als Folge von h3 + p am Ende des Artikels. Eine ruhige * Trennlinie davor macht sichtbar, dass hier ein anderer Abschnitt beginnt. */ .sl-prose h2 + h3[style] { margin-top: 1.2em !important; } /* ------------------------------ Verzeichnis-Baustein im Fliesstext */ /* * Der Block "Betriebe der Branche" (Web24-Directory) steht mitten in * .sl-prose. Dessen Regeln fuer Fliesstext greifen auf jedes Kind durch — und * `.sl-prose a` (Spezifitaet 0-1-1) schlaegt `.w24dir-button` (0-1-0). Die * Folge: Der gefuellte Knopf bekam die Linkfarbe des Fliesstextes und stand * blau auf blau, also mit unsichtbarer Schrift. Nachgemessen am 2026-08-16: * color war rgb(15,112,186) statt des korrekt gesetzten #ffffff. * * Die Gegenregeln stehen HIER und nicht im Plugin: `.sl-prose` ist eine Klasse * dieses Themes, das Plugin darf sie nicht kennen. Zwei Klassen im Selektor * (0-2-0) genuegen, !important ist nicht noetig. */ .sl-prose .w24dir-button { color: var(--w24dir-button-ink, #fff); text-decoration: none; } .sl-prose .w24dir-button--secondary { color: var(--w24dir-accent-ink, #1d6fa5); } /* * Auch die uebrigen Verweise im Baustein sollen wie ein Verzeichnis aussehen * und nicht wie Fliesstext: Die Kartentitel trugen die Unterstreichung des * Prose-Stils. */ .sl-prose .w24dir-branchbetriebe a { text-decoration: none; } .sl-prose .w24dir-branchbetriebe a:hover, .sl-prose .w24dir-branchbetriebe a:focus-visible { text-decoration: underline; } /* * Abstaende: Der Baustein bringt eigene mit, aber `.sl-prose p` (0-1-1) * schlaegt `.w24dir-branchbetriebe__intro` (0-1-0). Deshalb die eigenen Werte * hier mit zwei Klassen wiederholen — gezielt und nicht als pauschales * `margin-top: 0` auf alle Kinder, das auch die Abstaende INNERHALB der * Trefferkarten platt gedrueckt haette. */ .sl-prose .w24dir-branchbetriebe__heading { margin: 0; } .sl-prose .w24dir-branchbetriebe__intro { margin: .5rem 0 1.2rem; } .sl-prose .w24dir-branchbetriebe__alle { margin: 1.2rem 0 0; } .sl-prose .w24dir-branchbetriebe .w24dir-card__title { margin: 0 0 .35rem; } /* ---------------------------------------------------------------- Fusszeile */ .wtw-artikel__fuss { border-top: 1px solid rgb(226 232 240); } @media (prefers-color-scheme: dark) { :where(html:not(.light)) .wtw-artikel__fuss { border-top-color: rgb(255 255 255 / .1); } } html.dark .wtw-artikel__fuss { border-top-color: rgb(255 255 255 / .1); } /* ---------------------------------------------------- Breite der Textspalte */ /* * 52rem, obwohl der Container ringsum 64rem (max-w-5xl) breit ist. * * Ueber die vollen 976 px laufen rund 106 Zeichen je Zeile. Angenehm liest * sich ein Text bei 65 bis 75; darueber findet das Auge den naechsten * Zeilenanfang schwerer, und bei langen Ratgebertexten summiert sich das. * 52rem sind rund 90 Zeichen -- ein Mittelweg, der die Spalte nicht * verhungern laesst. Uebernommen von dienstleister-portal.com, wo diese * Abwaegung zuerst getroffen wurde; beide Portale stehen jetzt gleich. * * NICHT auf `.sl-prose` setzen: Dieselbe Typografie-Klasse traegt auch * Impressum, Datenschutz, AGB und die Firmenbeschreibung auf den * Eintragsseiten. Eine Grenze dort verengte alle diese Seiten mit. * * `margin-inline: auto` ist Pflicht, nicht Zierde: Ohne sie klebt die * schmalere Spalte links im breiten Container, und rechts bleiben 144 px * leer -- das sieht nach Fehler aus, nicht nach Absicht. Das Titelbild * darueber behaelt die volle Containerbreite. */ .sl-prose.wtw-artikel__text, .wtw-artikel__text { /* * Zwei Breiten, nicht eine: Die LESESPALTE bleibt schmal, der * KARTENBLOCK darunter nutzt den ganzen Container. * * 45rem (720 px). DIE ZAHLEN IN DEN AELTEREN FASSUNGEN DIESES KOMMENTARS * WAREN GESCHAETZT UND ZU NIEDRIG. Am 2026-09-07 nachgezaehlt statt * gerechnet: ueber 26 tatsaechlich gerenderte Zeilen (Range je Zeichen, * Zeilenwechsel am Sprung der Oberkante) lagen bei 56rem im Schnitt * 106 Zeichen in der Zeile, im Maximum 117 -- nicht die hier behaupteten * 96. Die volle Containerbreite und die "schmale" Spalte waren damit * praktisch gleich weit; die Spalte hat nichts mehr gebracht. * * 45rem ergeben rund 85 Zeichen. Das ist der Schritt, der sich ohne * Umbau des Seitenbildes machen laesst; die Lehrbuchgrenze von 65 bis 75 * Zeichen laege bei 40rem (rund 75). Wer weiter runter will, aendert * genau diese eine Zahl -- Kartenbloecke haengen ueber --wtw-block davon * ab und folgen von selbst. * * dienstleister-portal.com fuehrt dieselbe Spalte (am 2026-09-07 * nachgemessen: ebenfalls 896 px, 17 px, 106 Zeichen). Wird hier * geaendert, gehoert die Aenderung dort mit hin, sonst laufen die beiden * Magazine auseinander. */ --wtw-spalte: 45rem; /* * 77rem = 1232 px, die Innenbreite des Containers (max-w-7xl abzueglich * Rand). Nicht weniger, und zwar wegen einer Rechnung, die man leicht * uebersieht: Der Betriebsblock hat selbst 1,6rem Innenabstand. Vom Block * bleiben dem Raster also 51 px weniger, und drei Spalten brauchen * 3 x 360 + 2 x 19 = 1118 px. Bei 69rem Block waren es nur 1053 -- das * Raster fiel auf zwei Spalten zurueck, obwohl der Block breit genug * aussah. */ --wtw-block: 77rem; max-width: var(--wtw-spalte); margin-inline: auto; /* * 17 px statt der 16 px aus `.sl-prose` -- angeglichen an * dienstleister-portal.com, damit beide Magazine gleich lesen. * * NUR HIER, nicht in `.sl-prose`: Dieselbe Klasse traegt auch Impressum, * Datenschutz, AGB und die Firmenbeschreibung. Und NICHT am `body`, wo DP * seine 17 px setzt -- wertaugtwas faehrt dort bewusst 14 px fuer Menue, * Fusszeile und Karten. Angeglichen wird der Artikeltext, nicht die * Typografie der ganzen Website. * * Zeilenhoehe 1.6 gehoert dazu: `.sl-prose` faehrt 1.7, was bei 17 px * 28,9 px ergaebe. DP kommt mit 1.6 auf 27,2 px -- denselben Wert, den * wertaugtwas bisher mit 16 px und 1.7 hatte. Ohne diese Zeile stimmte * die Schriftgroesse und der Abstand waere trotzdem verschieden. */ font-size: 1.0625rem; line-height: 1.6; } /* * DER BETRIEBSBLOCK BRICHT AUS DER LESESPALTE AUS. * * Er steht im Inhalt und damit innerhalb der Textspalte -- mit deren Grenze * blieben je Karte rund 264 px, und die beiden Knoepfe im Kartenfuss brechen * darunter um. Drei Betriebe nebeneinander brauchen den ganzen Container: * bei 69rem sind das rund 355 px je Karte. * * clamp() statt eines festen negativen Randes: Der Ausbruch waechst nur so * weit, wie das Fenster ihn traegt (untere Grenze 0), und hoert am Container * auf (obere Grenze). Ein fester Wert raegte auf schmalen Fenstern seitlich * heraus und machte die Seite waagerecht scrollbar -- derselbe Fehler wie * eine harte Untergrenze in minmax(). */ .wtw-artikel__text .w24dir-branchbetriebe { max-width: none; margin-inline: calc(-1 * clamp( 0px, (100vw - 4rem - var(--wtw-spalte)) / 2, (var(--wtw-block) - var(--wtw-spalte)) / 2 )); } /* -------------------------------- Block "Das koennte Sie auch interessieren" */ /* * Der Block kommt aus web24-multiforum (assets/frontend/autocontent.css) und * ist themeneutral gebaut: feste helle Farben, eine eigene Schriftskala, ein * eigenes Blau. Auf wertaugtwas fiel das an drei Stellen auf, alle am * 2026-09-07 gemessen. * * SPEZIFITAET IST HIER DIE HALBE MIETE. autocontent.css wird NACH artikel.css * geladen (Reihenfolge auf der Live-Seite nachgesehen: w24dir-frontend, * wtw-site, wtw-artikel, w24mf-admanager, w24mf-ac-related). Bei gleicher * Spezifitaet gewinnt deshalb das Plugin. Die Selektoren des Plugins sind * einklassig (0-1-0); jede Gegenregel braucht mindestens zwei Klassen. * * Das gilt auch fuer den Dunkelmodus: `:where(html:not(.light))` zaehlt NULL, * ein `:where(...) .w24mf-ac-related__card` waere also 0-1-0 und verloere * gegen das Plugin. `.wtw-artikel__text` muss mit in den Selektor. */ /* * 1. UNSICHTBARE KARTEN IM DUNKELMODUS. Die Karte behielt `background:#fff`, * waehrend der Text vom Theme auf rgb(226,232,240) steht -- weisse Schrift * auf weisser Karte, Kontrast 1,2:1. Farben wie bei den Verzeichniskarten. */ html.dark .wtw-artikel__text .w24mf-ac-related__card, html.dark .wtw-artikel__text .w24mf-ac-related__media { background: rgb(17 26 46); border-color: rgb(255 255 255 / .1); } html.dark .wtw-artikel__text .w24mf-ac-related__excerpt { color: rgb(148 163 184); } @media (prefers-color-scheme: dark) { :where(html:not(.light)) .wtw-artikel__text .w24mf-ac-related__card, :where(html:not(.light)) .wtw-artikel__text .w24mf-ac-related__media { background: rgb(17 26 46); border-color: rgb(255 255 255 / .1); } :where(html:not(.light)) .wtw-artikel__text .w24mf-ac-related__excerpt { color: rgb(148 163 184); } } /* * 2. EIGENE SCHRIFTSKALA. Das Plugin setzt `font-size: 1.6em; font-weight: 600` * -- bei 17 px Grundschrift sind das 27,2 px in Halbfett, waehrend jede * andere Ueberschrift des Artikels 26 px in 800 traegt. Zwei Grade und zwei * Staerken auf derselben Seite lesen sich wie ein Fehler. Dasselbe eine * Zeile tiefer: Kartentitel 19,55/600 gegen 20/800 im FAQ. */ .wtw-artikel__text .w24mf-ac-related__title { font-size: 1.625rem; font-weight: 800; } .wtw-artikel__text .w24mf-ac-related__name { font-size: 1.25rem; font-weight: 800; } /* * 3. EIN DRITTES BLAU. Der Knopf "mehr dazu" stand auf #2496ef, neben dem * Artikelknopf (#0f70ba) und den Verzeichnisknoepfen (#1d6fa5). Er nimmt * jetzt dieselbe Variable wie `.w24dir-button--secondary` weiter oben. * * BEIDE ANGABEN AUF DERSELBEN VARIABLE. Der erste Anlauf nahm * `--w24dir-accent` fuer den Rand und `--w24dir-accent-ink` fuer die * Schrift -- und lieferte prompt wieder zwei Blaus auf einem Knopf (Rand * #0f70ba, Schrift #1d6fa5). Grund: `--w24dir-accent-ink` ist auf * html:root gar nicht gesetzt, dort greift der Ersatzwert; * `--w24dir-accent` dagegen steht auf #0f70ba. Der Verzeichnisknopf * darueber rendert #1d6fa5 in Rand UND Schrift, genau darauf zeigt der * Knopf jetzt auch. */ .wtw-artikel__text .w24mf-ac-related__more { border-color: var(--w24dir-accent-ink, #1d6fa5); color: var(--w24dir-accent-ink, #1d6fa5); } .wtw-artikel__text .w24mf-ac-related__more:hover, .wtw-artikel__text .w24mf-ac-related__more:focus { background: var(--w24dir-accent-ink, #1d6fa5); color: #fff; } /* * 4. FESTE DREI SPALTEN. `repeat(3, 1fr)` laesst bei zwei Beitraegen ein * Drittel der Breite leer -- gemessen 283 px Loch. `auto-fit` fuellt die * Zeile mit dem, was da ist. * * `min(18rem, 100%)` statt einer harten Untergrenze in minmax(): Ein fester * Wert raegt auf schmalen Fenstern seitlich heraus und macht die Seite * waagerecht scrollbar -- derselbe Fehler, gegen den weiter oben das * clamp() des Betriebsblocks steht. Damit sind auch die beiden * Breakpoint-Regeln des Plugins (900 px / 600 px) ueberfluessig. * * `24rem` STATT `1fr` ALS OBERGRENZE -- gemessen nachgebessert. Mit `1fr` * war das Loch zwar weg, dafuer dehnten sich die zwei Karten auf je * 596 px, und ihr 16:9-Titelbild wurde 335 px hoch. Eine Karte ist bei * zwei Beitraegen nicht doppelt so wichtig wie bei dreien. Bei 24rem * bleibt sie immer 384 px breit; `justify-content: center` rueckt die * zwei in die Mitte, damit die Zeile nach Absicht aussieht und nicht nach * fehlender dritter Karte. Drei Karten passen weiterhin nebeneinander: * 3 x 384 + 2 x 24 = 1200 px, der ausgebrochene Block ist 1216 px breit. */ .wtw-artikel__text .w24mf-ac-related__grid { grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 24rem)); justify-content: center; } /* * 5. KARTENRASTER GEHOERT NICHT IN DIE LESESPALTE. Gleiche Ueberlegung wie * beim Betriebsblock darueber: Fliesstext bleibt schmal, Kartenraster * nutzen den Container. Bei 45rem Spalte blieben sonst rund 213 px je * Karte -- Titel und Knopf brechen darunter um. * * Der Ausbruch haengt am Wrapper, nicht an der Section: Das Plugin gibt *
aus, und der Wrapper ist das Kind * von .wtw-artikel__text, an dem die Breite haengt. */ .wtw-artikel__text .w24mf-ac-related-wrap { max-width: none; margin-inline: calc(-1 * clamp( 0px, (100vw - 4rem - var(--wtw-spalte)) / 2, (var(--wtw-block) - var(--wtw-spalte)) / 2 )); }