den Absatzabstand des jeweiligen Themes; der * Knopf klebte dadurch je nach Portal unterschiedlich weit an der * Einwilligungszeile darüber. Der Abstand ist absichtlich größer als der * Feldabstand: Absenden ist ein Schritt für sich und soll sich vom letzten * Eingabefeld absetzen. */ .w24dir-form__submit { margin: 2rem 0 0; } .w24dir-fieldset { margin: 0 0 1.6rem; padding: 1.2rem; border: 1px solid var(--w24dir-border); border-radius: var(--w24dir-radius); } .w24dir-fieldset > legend { padding: 0 0.5em; font-weight: 700; } .w24dir-checkboxlist { display: flex; flex-wrap: wrap; gap: 0.5em 1.2em; border: 0; padding: 0; margin: 0 0 var(--w24dir-gap); } .w24dir-checkboxlist label { display: flex; gap: 0.4em; align-items: center; font-weight: 400; } /* * Honeypot. Bewusst NICHT display:none — manche Bots erkennen das und lassen * das Feld dann leer. Die Kombination aus Position und Größe wirkt zuverlässiger * und bleibt für Screenreader durch aria-hidden im Markup unsichtbar. */ .w24dir-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; } /* ---------------------------------------------------------------- Archivkopf */ .w24dir-archive__header { margin: 0 0 var(--w24dir-section, 2rem); } .w24dir-archive__title { margin: 0; line-height: 1.15; text-wrap: balance; } .w24dir-archive__description { margin: 0.6em 0 0; max-width: 65ch; color: var(--w24dir-muted); } /* * Der Branchen-Abschnitt schließt die Seite ab. Die Trennlinie darüber macht * sichtbar, dass hier nicht mehr die Trefferliste steht. */ .w24dir-archive__categories { margin: var(--w24dir-section, 2rem) 0 0; padding-top: var(--w24dir-section, 2rem); border-top: 1px solid var(--w24dir-border); } .w24dir-archive__categories > h2 { margin: 0 0 var(--w24dir-gap); font-size: 1.25em; line-height: 1.3; text-wrap: balance; } /* --------------------------------------------------------------------- Suche */ .w24dir-search { margin: 0 0 var(--w24dir-section, 1.6rem); padding: 1.2rem; border: 1px solid var(--w24dir-border); border-radius: var(--w24dir-radius); background: var(--w24dir-surface); } .w24dir-search__row { display: flex; flex-wrap: wrap; gap: var(--w24dir-gap); align-items: flex-end; } .w24dir-search__row--secondary { margin-top: 0.6rem; } .w24dir-search .w24dir-field { margin: 0; flex: 1 1 200px; } .w24dir-search .w24dir-field--submit { flex: 0 0 auto; } .w24dir-search :is(input, select) { width: 100%; padding: 0.6em 0.75em; border: 1px solid var(--w24dir-border); border-radius: var(--w24dir-radius); background: var(--w24dir-surface-input); color: inherit; font: inherit; box-sizing: border-box; } /* ---------------------------------------------------------------- Ergebnisse */ .w24dir-results { margin: 0; } .w24dir-results__head { display: flex; flex-wrap: wrap; gap: 0.4em 1em; align-items: baseline; margin-bottom: 1.2rem; } .w24dir-results__count { font-weight: 700; margin: 0; } .w24dir-results__center { color: var(--w24dir-muted); margin: 0; } .w24dir-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.2rem; } .w24dir-card { display: flex; flex-direction: column; /* Rasterfelder sind standardmäßig min-width:auto — ohne das sprengt ein langer Firmenname ohne Leerzeichen die Spalte. */ min-width: 0; overflow-wrap: anywhere; border: 1px solid var(--w24dir-border); border-radius: var(--w24dir-radius); overflow: hidden; background: var(--w24dir-surface-card); } .w24dir-card.is-featured { border-color: var(--w24dir-accent-ink); } .w24dir-card__media { display: block; line-height: 0; } .w24dir-card__image { width: 100%; height: 180px; object-fit: cover; } /* * Platzhalterbild einer Branche. * * Die Datei bringt ihre Farben selbst mit, samt eigener Fassung für den * Dunkelmodus: Ein per eingebundenes SVG liest sein internes Stylesheet * einschließlich Media Query. * * Wichtig dabei — und der Grund, warum hier nichts nachgeholfen werden muss: * Ausgewertet wird nicht die Systemeinstellung, sondern das WIRKSAME * color-scheme des einbettenden Dokuments. Ein Theme, das seinen eigenen * Dunkelschalter mit `color-scheme: dark` auf der Wurzel begleitet (wie * wertaugtwas.de), bekommt die dunkle Bildfassung damit automatisch — auch * wenn das Betriebssystem auf hell steht. Ohne diese Angabe zieht das Theme * mit, das Bild aber nicht. * * Hier bleibt deshalb nur die Einpassung. Der Untergrund greift nur, solange * die Datei lädt. */ .w24dir-placeholder { background: var(--w24dir-surface); object-fit: cover; } /* * Der Körper füllt die restliche Kartenhöhe, damit die Aktionsleiste weiter * unten per margin-top:auto bündig abschließen kann. Ohne das enden Karten * einer Rasterzeile bei unterschiedlich langen Texten auf verschiedenen Höhen. */ .w24dir-card__body { display: flex; flex: 1 1 auto; flex-direction: column; gap: 0.5em; padding: 1rem; } .w24dir-card__title { margin: 0; font-size: 1.15em; line-height: 1.3; text-wrap: balance; } .w24dir-card__address, .w24dir-card__excerpt { margin: 0; color: var(--w24dir-muted); } .w24dir-card__meta { display: flex; flex-wrap: wrap; gap: 0.4em 0.8em; align-items: center; } .w24dir-card__actions { display: flex; flex-wrap: wrap; gap: 0.5em; margin: auto 0 0; padding-top: 0.4em; } /* ------------------------------------------------------------ Leeres Ergebnis */ /* * Kein bloßer Hinweiskasten: Überschrift, Begründung, konkrete Stellschrauben * und ein Weg zurück zur vollständigen Liste. */ .w24dir-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 0.8rem; padding: clamp(1.5rem, 5vw, 2.5rem); border: 1px dashed var(--w24dir-border); border-radius: var(--w24dir-radius); background: var(--w24dir-surface); } .w24dir-empty__title { margin: 0; font-size: 1.2em; line-height: 1.3; text-wrap: balance; } .w24dir-empty > p { margin: 0; max-width: 60ch; color: var(--w24dir-muted); } .w24dir-empty ul { display: grid; gap: 0.4em; margin: 0; padding-left: 1.2em; max-width: 60ch; color: var(--w24dir-muted); } /* * Der Hinweis über dem Aufruf "Jetzt Betrieb eintragen". Etwas kräftiger als * die Tipps darüber, weil er eine andere Person anspricht: nicht den * suchenden Kunden, sondern den Betrieb, der hier fehlt. */ .w24dir-empty__invite { margin: 0.2rem 0 0; max-width: 60ch; color: var(--w24dir-text); font-weight: 500; } /* * Beide Wege nebeneinander, auf schmalen Bildschirmen untereinander. * `align-items: center` statt `stretch`: Ohne das zieht der Flex-Behälter den * niedrigeren der beiden Knöpfe auf die Höhe des höheren, und die Beschriftung * klebt dann oben statt in der Mitte. */ .w24dir-empty__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-top: 0.2rem; /* * `align-self: stretch` ist hier PFLICHT und keine Feinheit. * * `.w24dir-empty` ist eine Spalte mit `align-items: flex-start`, seine * Kinder bekommen damit quer nur ihre Inhaltsbreite. Für einen Flex-Kasten * MIT Umbruch heißt „Inhaltsbreite" aber die Breite des BREITESTEN Kindes, * nicht die Summe — die beiden Knöpfe standen dadurch untereinander, * obwohl daneben reichlich Platz war. */ align-self: stretch; } .w24dir-empty__reset { display: inline-block; padding: 0.7em 1.4em; border: 1px solid var(--w24dir-accent-ink); border-radius: var(--w24dir-radius); background: transparent; color: var(--w24dir-accent-ink); font-weight: 600; line-height: 1.2; text-decoration: none; touch-action: manipulation; } .w24dir-empty__reset:hover, .w24dir-empty__reset:focus { background: var(--w24dir-accent); border-color: var(--w24dir-accent); color: var(--w24dir-accent-contrast); text-decoration: none; } .w24dir-pagination { display: flex; flex-wrap: wrap; gap: 0.4em; margin-top: 1.6rem; } .w24dir-pagination :is(a, span) { display: inline-block; padding: 0.45em 0.8em; border: 1px solid var(--w24dir-border); border-radius: var(--w24dir-radius); text-decoration: none; } .w24dir-pagination a:hover { border-color: var(--w24dir-accent-ink); color: var(--w24dir-accent-ink); text-decoration: none; } .w24dir-pagination a:focus-visible { outline: 3px solid var(--w24dir-accent-ink); outline-offset: 2px; } .w24dir-pagination .current { background: var(--w24dir-accent); border-color: var(--w24dir-accent); color: var(--w24dir-accent-contrast); } /* ------------------------------------------------------------------ Merkmale */ .w24dir-badge { display: inline-block; padding: 0.15em 0.6em; border-radius: 999px; background: var(--w24dir-surface); border: 1px solid var(--w24dir-border); font-size: 0.8em; font-weight: 700; } .w24dir-badge.is-verified { border-color: var(--w24dir-success); color: var(--w24dir-success); } .w24dir-badge.is-featured { border-color: var(--w24dir-accent-ink); color: var(--w24dir-accent-ink); } .w24dir-badge.is-premium { border-color: var(--w24dir-premium-border); background: var(--w24dir-premium-bg); color: var(--w24dir-premium-text); } /* * Business steht eine Stufe unter Premium und traegt deshalb ein kuehles Blau * gegen das Premium-Gold. Bewusst kein helleres Gold: Zwei Abstufungen * derselben Farbe unterscheidet niemand im Vorbeiscrollen, und wer sie doch * bemerkt, haelt die blassere fuer ein abgelaufenes Premium. */ .w24dir-badge.is-business { border-color: var(--w24dir-business-border); background: var(--w24dir-business-bg); color: var(--w24dir-business-text); } .w24dir-rating { display: inline-flex; align-items: center; gap: 0.3em; } .w24dir-star { color: var(--w24dir-star-empty); } .w24dir-star.is-full, .w24dir-star.is-half { color: var(--w24dir-star-full); } .w24dir-rating__value { font-weight: 700; } .w24dir-rating__count { color: var(--w24dir-muted); font-size: 0.9em; } .w24dir-open { font-size: 0.9em; font-weight: 700; } .w24dir-open.is-open { color: var(--w24dir-success); } .w24dir-open.is-closed { color: var(--w24dir-muted); } .w24dir-distance { color: var(--w24dir-muted); font-size: 0.9em; } .w24dir-terms { display: inline-flex; flex-wrap: wrap; gap: 0.4em; } .w24dir-term { display: inline-block; padding: 0.1em 0.55em; border: 1px solid var(--w24dir-border); border-radius: 999px; font-size: 0.85em; text-decoration: none; } /* --------------------------------------------------------------- Detailseite */ .w24dir-listing__header { display: flex; flex-wrap: wrap; gap: 1.2rem; align-items: flex-start; margin-bottom: 1.6rem; } .w24dir-listing__logo img { max-width: 180px; height: auto; border-radius: var(--w24dir-radius); } /* * Ein Firmenlogo steht meist hochkant und darf nicht beschnitten werden - * deshalb oben height:auto. Das Platzhalterbild ist dagegen ein Querformat und * bekommt einen festen Rahmen, sonst reißt es den Kopfbereich auseinander. */ .w24dir-listing__logo.is-placeholder img { width: 180px; height: 120px; object-fit: cover; } .w24dir-listing__intro { flex: 1 1 320px; display: flex; flex-wrap: wrap; gap: 0.5em; align-items: center; } .w24dir-listing__title { flex: 1 1 100%; margin: 0; } .w24dir-listing__layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); gap: 2rem; align-items: start; } @media (max-width: 782px) { .w24dir-listing__layout { grid-template-columns: 1fr; } } .w24dir-box { margin: 0 0 1.2rem; padding: 1.1rem; border: 1px solid var(--w24dir-border); border-radius: var(--w24dir-radius); background: var(--w24dir-surface); } .w24dir-box > h2 { margin-top: 0; font-size: 1.1em; } .w24dir-address { font-style: normal; margin: 0 0 0.8em; } .w24dir-contact { list-style: none; margin: 0 0 0.8em; padding: 0; } /* * Symbol und Angabe stehen in EINER Zeile. * * Vorher stand die Beschriftung als Wort darueber („TELEFON", „WEBSITE") und * brauchte damit doppelt so viele Zeilen wie Angaben — bei einer Rufnummer war * das Wort laenger als die Nummer darunter. Seit dem 2026-08-16 steht ein * Symbol davor; das Wort bleibt fuer Vorleseprogramme im Markup. * * align-items: baseline und nicht center: Eine Angabe kann umbrechen (lange * Adressen, lange Firmennamen), und dann soll das Symbol an der ERSTEN Zeile * stehen und nicht in der Mitte des Blocks schweben. */ .w24dir-contact li { display: flex; align-items: baseline; gap: 0.55em; margin-bottom: 0.5em; min-width: 0; } .w24dir-contact__label { flex: none; color: var(--w24dir-muted); line-height: 1; } /* * Das Symbol nimmt die Schriftgroesse seiner Umgebung auf (width/height in em) * und faellt dadurch in jedem Theme richtig aus. translateY rueckt es auf die * optische Mittellinie der Schrift — an der Grundlinie ausgerichtet saesse es * sonst zu hoch. */ .w24dir-contact__icon { display: inline-block; width: 1.05em; height: 1.05em; vertical-align: baseline; transform: translateY(0.15em); } .w24dir-facts { margin: 0; } .w24dir-facts dt { color: var(--w24dir-muted); font-size: 0.85em; } .w24dir-facts dd { margin: 0 0 0.6em; } .w24dir-socials { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5em 1em; } .w24dir-hours { width: 100%; border-collapse: collapse; } .w24dir-hours th, .w24dir-hours td { padding: 0.35em 0; text-align: left; vertical-align: top; font-weight: 400; } .w24dir-hours td { text-align: right; } .w24dir-hours tr.is-today { font-weight: 700; } .w24dir-hours__note { margin: 0.6em 0 0; color: var(--w24dir-muted); font-size: 0.9em; } .w24dir-hours-edit { width: 100%; border-collapse: collapse; } .w24dir-hours-edit :is(th, td) { padding: 0.25em; text-align: left; } .w24dir-hours-edit input[type="time"] { min-width: 6.5em; } .w24dir-gallery { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 0.8rem; } .w24dir-gallery__image { width: 100%; height: 140px; object-fit: cover; border-radius: var(--w24dir-radius); } /* ---------------------------------------------------------------------- Karte */ .w24dir-map { border-radius: var(--w24dir-radius); overflow: hidden; } .w24dir-map--consent { display: flex; flex-direction: column; gap: 0.8em; align-items: flex-start; padding: 1rem; border: 1px dashed var(--w24dir-border); background: var(--w24dir-surface-card); } .w24dir-map__notice { margin: 0; color: var(--w24dir-muted); font-size: 0.9em; } .w24dir-map__button { padding: 0.55em 1.1em; border: 1px solid var(--w24dir-accent-ink); border-radius: var(--w24dir-radius); background: var(--w24dir-accent); color: var(--w24dir-accent-contrast); font: inherit; font-weight: 600; cursor: pointer; } /* ------------------------------------------------------- Eigene Einträge/Liste */ .w24dir-mylistings__list { list-style: none; margin: 0; padding: 0; } .w24dir-mylistings__item { margin-bottom: 1rem; padding: 1rem; border: 1px solid var(--w24dir-border); border-radius: var(--w24dir-radius); } .w24dir-mylistings__head { display: flex; flex-wrap: wrap; gap: 0.5em 1em; align-items: baseline; justify-content: space-between; } .w24dir-mylistings__head h3 { margin: 0; } .w24dir-mylistings__meta { margin: 0.3em 0; color: var(--w24dir-muted); } .w24dir-mylistings__actions { display: flex; gap: 0.5em; margin: 0.8em 0 0; } .w24dir-status { padding: 0.15em 0.6em; border-radius: 999px; font-size: 0.85em; font-weight: 700; background: var(--w24dir-surface); border: 1px solid var(--w24dir-border); } .w24dir-status--publish { color: var(--w24dir-success); border-color: var(--w24dir-success); } .w24dir-status--pending { color: var(--w24dir-warning); border-color: var(--w24dir-warning); } /* ------------------------------------------------- Einstieg im Dashboard */ .w24dir-claim-start { margin-top: 1.5rem; } .w24dir-claim-start__title { margin: 0 0 0.4em; } .w24dir-claim-start__intro { margin: 0 0 1.2em; color: var(--w24dir-muted); max-width: 62ch; } /* * Zwei gleichwertige Wege nebeneinander, ab schmalen Displays untereinander. * Bewusst kein Raster mit fester Spaltenzahl: Ist einer der beiden Wege * abgeschaltet (keine Übernahmen erlaubt oder kein Recht zum Anlegen), soll * der verbleibende die volle Breite bekommen. */ .w24dir-claim-start__ways { display: flex; flex-wrap: wrap; gap: var(--w24dir-gap); align-items: flex-start; } .w24dir-claim-start__way { flex: 1 1 20rem; padding: 1.25rem; border: 1px solid var(--w24dir-border); border-radius: var(--w24dir-radius); background: var(--w24dir-surface); } .w24dir-claim-start__way h4 { margin: 0 0 0.6em; } .w24dir-claim-start__way p { margin: 0 0 0.8em; } /* Die beiden Übernahmewege sind kompakte Kästen — dort reicht der halbe Absendeabstand, sonst reißt der Kasten auseinander. */ .w24dir-claim-start__way .w24dir-form__submit { margin: 1rem 0 0; } .w24dir-claim-start__search .w24dir-field { margin-bottom: 0.8em; } .w24dir-claim-start__results { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 0.5rem; } .w24dir-claim-start__result { display: flex; flex-wrap: wrap; gap: 0.5em 1em; align-items: center; justify-content: space-between; padding: 0.75rem 0.9rem; border: 1px solid var(--w24dir-border); border-radius: var(--w24dir-radius); background: var(--w24dir-surface-card); } /* Die Bestätigung ist eine Zeile mit Kästchen, kein Feld mit Beschriftung darüber — deshalb die Grundregel für .w24dir-field hier zurücknehmen. */ .w24dir-field--check label { display: flex; gap: 0.6em; align-items: flex-start; font-weight: 400; line-height: 1.5; cursor: pointer; } .w24dir-field--check input[type="checkbox"] { margin-top: 0.25em; flex: 0 0 auto; } .w24dir-field input[type="file"] { display: block; width: 100%; padding: 0.6em 0.7em; border: 1px dashed var(--w24dir-border); border-radius: var(--w24dir-radius); background: var(--w24dir-surface-input); color: inherit; box-sizing: border-box; } .w24dir-claim-start__name { display: flex; flex-direction: column; gap: 0.15em; } .w24dir-claim-start__address { color: var(--w24dir-muted); font-size: 0.9em; } .w24dir-claim-start__chosen { display: flex; flex-direction: column; gap: 0.15em; margin-bottom: 1em; } .w24dir-termlist { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5em; } .w24dir-termlist a { display: inline-flex; gap: 0.4em; align-items: center; padding: 0.35em 0.8em; border: 1px solid var(--w24dir-border); border-radius: 999px; text-decoration: none; } .w24dir-termlist a:hover { border-color: var(--w24dir-accent-ink); color: var(--w24dir-accent-ink); text-decoration: none; } .w24dir-termlist a:focus-visible { outline: 3px solid var(--w24dir-accent-ink); outline-offset: 2px; } .w24dir-termlist__count { color: var(--w24dir-muted); font-size: 0.85em; } .w24dir-related { margin-top: 2.4rem; } .w24dir-thumb-preview img { max-width: 120px; height: auto; margin-top: 0.5em; border-radius: var(--w24dir-radius); } /* * Sichtbar nur für Screenreader. * * `screen-reader-text` ist eine KONVENTION der Core-Themes, kein Standard und * nichts, was WordPress selbst mitbringt. Der Baustein darf sich nicht darauf * verlassen: Die Regel galt nur innerhalb von `.w24dir-rating`, während die * Startseite die Klasse für die Beschriftungen ihrer Suchfelder benutzt. Auf * einem Theme ohne diese Klasse standen „Was suchen Sie?" und „Ort oder * Postleitzahl" als sichtbarer Text über der Suchleiste — und zwar genau auf den * Themes, für die die Theme-Unabhängigkeit gebaut ist. * * `clip` bleibt als Vorzeile für alte Browser stehen, `clip-path` ist der * aktuelle Weg; `clip` ist veraltet und wird beim Vorlesen unterschiedlich * behandelt. */ .w24dir-rating .screen-reader-text, :is(.w24dir-home, .w24dir-single, .w24dir-archive, .w24dir-search, .w24dir-results, .w24dir-listings, .w24dir-leadform, .w24dir-submit, .w24dir-mylistings, .w24dir-claim, .w24dir-login-required, .w24dir-latest-reviews, .w24dir-reviewform, .w24dir-branchbetriebe) .screen-reader-text { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* Wer Bewegung reduziert haben möchte, bekommt keine Übergänge. */ @media (prefers-reduced-motion: reduce) { .w24dir-button, .w24dir-card { transition: none !important; } /* * Die Startseite bringt eigene Bewegung mit: die Drehung des Plus-Symbols im * Akkordeon und die Hover-Uebergaenge der Kacheln. Die Sammelregel darueber * kennt sie nicht, sie liefen also weiter, obwohl der Nutzer Bewegung * abbestellt hat. */ .w24dir-home__faq-icon, .w24dir-home__category, .w24dir-home__entry, .w24dir-home__city { transition: none !important; } } /* ----------------------------------------------------------------- Dunkelmodus */ /* * Umgeschrieben werden ausschließlich die eigenen w24dir-Variablen. Keine * Themefarbe, keine Schriftart und kein Selektor des Themes wird angefasst. * * ANNAHME: Das Child-Theme nutzt Tailwinds Standardstrategie für `dark:`, * also `prefers-color-scheme`. Deshalb ist die Media Query der Hauptschalter. * Falls stattdessen die Klassenstrategie läuft, greift der zweite Block über * `html.dark` / `[data-theme="dark"]` / `[data-mode="dark"]`. Setzt das Theme * im hellen Modus umgekehrt eine explizite Light-Markierung, hält der * :not()-Schutz in der Media Query das Plugin hell — dann bleiben Theme und * Plugin auch bei dunkler Systemeinstellung synchron. * * `color-scheme` ist bewusst mitgesetzt: nur so rendern Browser die * Auswahllisten der Suche und die Scrollbalken passend zur Fläche. */ @media (prefers-color-scheme: dark) { :where(html:not(.light):not([data-theme="light"]):not([data-mode="light"])) :is(.w24dir-home, .w24dir-single, .w24dir-archive, .w24dir-search, .w24dir-results, .w24dir-listings, .w24dir-leadform, .w24dir-submit, .w24dir-mylistings, .w24dir-claim, .w24dir-login-required, .w24dir-latest-reviews, .w24dir-reviewform, .w24dir-branchbetriebe) { color-scheme: dark; --w24dir-accent-ink: var(--w24dir-dark-accent-ink); --w24dir-muted: var(--w24dir-dark-muted); --w24dir-border: var(--w24dir-dark-border); --w24dir-surface: var(--w24dir-dark-surface); --w24dir-surface-card: var(--w24dir-dark-surface-card); --w24dir-surface-input: var(--w24dir-dark-surface-input); --w24dir-success: var(--w24dir-dark-success); --w24dir-error: var(--w24dir-dark-error); --w24dir-warning: var(--w24dir-dark-warning); --w24dir-star-empty: var(--w24dir-dark-star-empty); --w24dir-star-full: var(--w24dir-dark-star-full); --w24dir-premium-bg: var(--w24dir-dark-premium-bg); --w24dir-premium-border: var(--w24dir-dark-premium-border); --w24dir-premium-text: var(--w24dir-dark-premium-text); --w24dir-business-bg: var(--w24dir-dark-business-bg); --w24dir-business-border: var(--w24dir-dark-business-border); --w24dir-business-text: var(--w24dir-dark-business-text); } } :is(html.dark, html[data-theme="dark"], html[data-mode="dark"]) :is(.w24dir-home, .w24dir-single, .w24dir-archive, .w24dir-search, .w24dir-results, .w24dir-listings, .w24dir-leadform, .w24dir-submit, .w24dir-mylistings, .w24dir-claim, .w24dir-login-required, .w24dir-latest-reviews, .w24dir-reviewform, .w24dir-branchbetriebe) { color-scheme: dark; --w24dir-accent-ink: var(--w24dir-dark-accent-ink); --w24dir-muted: var(--w24dir-dark-muted); --w24dir-border: var(--w24dir-dark-border); --w24dir-surface: var(--w24dir-dark-surface); --w24dir-surface-card: var(--w24dir-dark-surface-card); --w24dir-surface-input: var(--w24dir-dark-surface-input); --w24dir-success: var(--w24dir-dark-success); --w24dir-error: var(--w24dir-dark-error); --w24dir-warning: var(--w24dir-dark-warning); --w24dir-star-empty: var(--w24dir-dark-star-empty); --w24dir-star-full: var(--w24dir-dark-star-full); --w24dir-premium-bg: var(--w24dir-dark-premium-bg); --w24dir-premium-border: var(--w24dir-dark-premium-border); --w24dir-premium-text: var(--w24dir-dark-premium-text); --w24dir-business-bg: var(--w24dir-dark-business-bg); --w24dir-business-border: var(--w24dir-dark-business-border); --w24dir-business-text: var(--w24dir-dark-business-text); } /* ==================================================================== * * Bewertungen * * ==================================================================== */ .w24dir-listing__reviews { margin-block: var(--w24dir-section); } /* Kopf: große Note, Sterne, Grundlage. */ .w24dir-reviews__summary { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.5rem 0.75rem; margin-bottom: 0.25rem; } .w24dir-reviews__score { font-size: 2.25rem; font-weight: 700; line-height: 1; } .w24dir-reviews__stars { font-size: 1.5rem; letter-spacing: 0.05em; } .w24dir-reviews__basis, .w24dir-rating__breakdown { color: var(--w24dir-muted); font-size: 0.9rem; } .w24dir-rating__breakdown { margin: 0 0 1.5rem; } .w24dir-reviews__empty { color: var(--w24dir-muted); margin-bottom: 1.5rem; } .w24dir-reviews__external { margin-block: 1.5rem; } /* * DIE NOTE STEHT NUR EINMAL. * * Web24-Reviews stellt seinen Bewertungskarten eine eigene Kopfzeile voran — * Note, Sterne, „auf Basis von 41 Bewertungen". Direkt darueber steht bereits * .w24dir-reviews__summary mit demselben Wert, nur groesser gesetzt. Auf einem * Eintrag ohne eigene Bewertungen war das Wort fuer Wort dieselbe Zeile * zweimal (gesehen am 2026-08-16 auf der Firmenseite von HUHN Haustechnik). * * Verborgen wird die FREMDE, nicht die eigene: Die eigene traegt die * Gesamtnote aus beiden Quellen und darunter die Aufschluesselung * (.w24dir-rating__breakdown, „3 Bewertungen auf diesem Portal · 41 externe"). * Damit geht auch nichts verloren, wenn beide Quellen belegt sind und die * Werte auseinandergehen. * * display:none und nicht visibility: Das nimmt den Block auch aus dem * Vorlesebaum — sonst hoerte man die Note zweimal. * * WENN DAS EINES TAGES NICHT MEHR GREIFT (Web24-Reviews benennt .grf-summary * um), erscheint die Zeile wieder doppelt. Das ist der gutartige Ausgang: * sichtbar, harmlos, in einer Minute nachgezogen. */ .w24dir-reviews__external .grf-summary { display: none; } /* -------------------------------------------------- Einzelne Bewertung */ .w24dir-reviews__list { list-style: none; margin: 0 0 2rem; padding: 0; display: grid; gap: 1rem; } .w24dir-review { padding: 1rem 1.25rem; background: var(--w24dir-surface-card); border: 1px solid var(--w24dir-border); border-radius: var(--w24dir-radius); } .w24dir-review__head { display: flex; align-items: flex-start; gap: 0.75rem; margin-bottom: 0.5rem; } .w24dir-review__avatar { border-radius: 50%; flex: 0 0 auto; } .w24dir-review__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.75rem; } .w24dir-review__author { font-weight: 700; } .w24dir-review__date { color: var(--w24dir-muted); font-size: 0.85rem; } .w24dir-review__text p:last-child { margin-bottom: 0; } .w24dir-reviews__pagination { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 2rem; } /* -------------------------------------------------- Sterneingabe */ /* * Die Radio-Schaltflächen bleiben im Dokument (nur visuell versteckt) und * behalten damit Tastaturbedienung und Screenreader-Ausgabe. display:none * würde beides nehmen — deshalb der Umweg über clip-path. */ .w24dir-stars { border: 0; margin: 0 0 1.25rem; padding: 0; } .w24dir-stars legend { padding: 0; margin-bottom: 0.35rem; font-weight: 600; } .w24dir-stars__input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* * row-reverse dreht die im Markup absteigende Reihenfolge (5 → 1) wieder auf * 1 → 5. Nötig, weil die Einfärbung „alle bis zum gewählten Stern" in CSS * nur über den nachfolgenden Geschwister-Selektor (~) möglich ist. */ .w24dir-stars__label { display: inline-block; font-size: 2rem; line-height: 1; cursor: pointer; color: var(--w24dir-star-empty); transition: color 0.1s ease-in-out; } .w24dir-stars { display: flex; flex-direction: row-reverse; justify-content: flex-end; flex-wrap: wrap; } .w24dir-stars legend { order: 1; width: 100%; } .w24dir-stars .w24dir-error { order: 2; width: 100%; } .w24dir-stars__input:checked ~ .w24dir-stars__label, .w24dir-stars__label:hover, .w24dir-stars__label:hover ~ .w24dir-stars__label { color: var(--w24dir-star-full); } .w24dir-stars__input:focus-visible + .w24dir-stars__label { outline: 2px solid var(--w24dir-accent); outline-offset: 2px; border-radius: 2px; } /* -------------------------------------------------- Bewertung schreiben */ /* * Der Aufruf zum Bewerten steht am Ende eines langen Abschnitts, hinter der * Gesamtnote, den Google-Bewertungen und der Liste der vorhandenen Beiträge. * Ohne Trennlinie und ohne eigene Größe las er sich wie eine weitere Zeile * dieser Liste — genau deshalb hat ihn niemand als Aufforderung wahrgenommen. */ .w24dir-reviewform { margin-top: 2rem; padding-top: 1.75rem; border-top: 1px solid var(--w24dir-border); } .w24dir-reviewform__title { margin: 0 0 0.6rem; font-size: 1.375em; font-weight: 700; line-height: 1.25; text-wrap: balance; } .w24dir-reviewform__intro { margin: 0 0 0.6rem; max-width: 68ch; } /* * Die Bitte um Sachlichkeit steht bewusst leiser als die Aufforderung darüber: * Sie ist eine Bedingung, keine Einladung. Wer etwas Gutes schreiben will, * soll von ihr nicht ausgebremst werden. */ .w24dir-reviewform__fairness { margin: 0 0 var(--w24dir-gap); max-width: 68ch; color: var(--w24dir-muted); font-size: 0.9375em; } /* -------------------------------------------------- Neueste Kundenmeinungen */ .w24dir-latest-reviews__grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--w24dir-gap); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } @media (min-width: 60rem) { .w24dir-latest-reviews__grid { grid-template-columns: repeat(var(--w24dir-columns, 3), 1fr); } } .w24dir-latest-reviews__item { display: flex; flex-direction: column; gap: 0.5rem; padding: 1.25rem; background: var(--w24dir-surface-card); border: 1px solid var(--w24dir-border); border-radius: var(--w24dir-radius); } .w24dir-latest-reviews__text { margin: 0; padding: 0; border: 0; font-style: normal; flex: 1 1 auto; } .w24dir-latest-reviews__source { margin: 0; font-size: 0.9rem; display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; align-items: baseline; } .w24dir-latest-reviews__city, .w24dir-latest-reviews__date { color: var(--w24dir-muted); } /* Abschlussansicht nach dem Absenden eines Firmeneintrags. Das Formular ist dann weg (siehe templates/parts/submit-form.php); was bleibt, soll nach Abschluss aussehen und nicht nach halbem Vorgang. */ .w24dir-submit__done { max-width: 46rem; } .w24dir-submit__done-title { margin: 1rem 0 0; font-weight: 600; } .w24dir-submit__actions { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.4rem 0 0; } /* Rueckmeldung der Adresspruefung, direkt unter dem Ortsfeld. */ .w24dir-addrcheck { margin: .35rem 0 0; font-size: .875rem; line-height: 1.4; } .w24dir-addrcheck.is-ok { color: var(--w24dir-success, #1e7a3c); } .w24dir-addrcheck.is-error { color: var(--w24dir-error, #b32d2e); font-weight: 600; } .w24dir-addrcheck.is-hint, .w24dir-addrcheck.is-busy { color: var(--w24dir-muted, #5b6470); } /* Werbefeld unter einem Standard-Eintrag. Deutlich abgesetzt, damit es nicht als Inhalt des Betriebs missverstanden wird. */ .w24dir-listing__ads { margin: 2rem 0 0; padding: 1rem; border: 1px solid var(--w24dir-border, #e2e5e9); border-radius: var(--w24dir-radius, 8px); background: var(--w24dir-surface-soft, #fafbfc); } /* ------------------------------------ Betriebe der Branche im Fachartikel */ /* * Gegenstueck zu .w24dir-articles: dort Artikel unter der Firma, hier Betriebe * unter dem Artikel. Der Block steht mitten im Fliesstext eines Beitrags und * muss sich deshalb DEUTLICH absetzen — sonst liest er sich wie eine * Fortsetzung des Textes. Daher die eigene Flaeche mit Rahmen. */ .w24dir-branchbetriebe { margin: var(--w24dir-section, 2rem) 0; padding: 1.6rem; border: 1px solid var(--w24dir-border, #e2e5e9); border-radius: var(--w24dir-radius, 8px); background: var(--w24dir-surface, #fff); } .w24dir-branchbetriebe__heading { margin: 0; font-size: 1.35rem; font-weight: 800; letter-spacing: -.01em; line-height: 1.3; } .w24dir-branchbetriebe__intro { margin: .5rem 0 1.2rem; font-size: .95rem; line-height: 1.55; color: var(--w24dir-muted, #5b6470); } /* ------------------------------------------------- Postleitzahl-Suche */ .w24dir-branchbetriebe__suche { margin: 0 0 1.5rem; } .w24dir-branchbetriebe__label { display: block; margin-bottom: .4rem; font-size: .875rem; font-weight: 600; } /* * Feld und Knopf nebeneinander, ab Handybreite untereinander. `flex-wrap` * statt einer Media Query: Der Block steht je nach Vorlage in einer schmalen * oder breiten Spalte, und die Fensterbreite sagt darueber nichts aus. */ .w24dir-branchbetriebe__zeile { display: flex; flex-wrap: wrap; gap: .6rem; } .w24dir-branchbetriebe__feld { flex: 1 1 12rem; min-width: 0; padding: .7rem .9rem; border: 1px solid var(--w24dir-border, #e2e5e9); border-radius: var(--w24dir-radius, 8px); background: var(--w24dir-surface-input, #fff); color: inherit; font-size: 1rem; } .w24dir-branchbetriebe__feld:focus-visible { outline: 2px solid var(--w24dir-accent-ink, #1d6fa5); outline-offset: 1px; } .w24dir-branchbetriebe__knopf { flex: 0 0 auto; } .w24dir-branchbetriebe__alle { margin: 1.2rem 0 0; font-size: .9rem; font-weight: 600; } .w24dir-branchbetriebe__alle a { color: var(--w24dir-accent-ink, #1d6fa5); text-decoration: none; } .w24dir-branchbetriebe__alle a:hover, .w24dir-branchbetriebe__alle a:focus { text-decoration: underline; } /* --------------------------------------------------- Fachartikel zur Branche */ /* * Bis zu drei Beitragskarten unter dem Anfrageformular (Frontend\ * ListingArticles). Bewusst NUR w24dir-Klassen und -Variablen: Der Abschnitt * erscheint ueber eine Action auch in der Theme-Fassung von wertaugtwas.de, * und Utility-Klassen, die deren Tailwind-Build nicht kennt, blieben dort * wirkungslos. Die Variablen schalten ueber .w24dir-single von selbst in den * Dunkelmodus um. */ .w24dir-articles { margin: var(--w24dir-section, 2rem) 0 0; } .w24dir-articles__heading { margin: 0 0 1.25rem; font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.25; } .w24dir-articles__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 1rem; } .w24dir-articles__card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--w24dir-border, #e2e5e9); border-radius: var(--w24dir-radius, 8px); background: var(--w24dir-surface-card, #fff); } .w24dir-articles__media { display: block; line-height: 0; } .w24dir-articles__image { width: 100%; height: 150px; object-fit: cover; } .w24dir-articles__body { display: flex; flex: 1; flex-direction: column; gap: .5rem; padding: 1rem 1.1rem 1.2rem; } .w24dir-articles__title { margin: 0; font-size: 1.02rem; font-weight: 700; line-height: 1.35; } .w24dir-articles__title a { color: inherit; text-decoration: none; } .w24dir-articles__title a:hover, .w24dir-articles__title a:focus { color: var(--w24dir-accent-ink, #1d6fa5); text-decoration: underline; } .w24dir-articles__excerpt { margin: 0; font-size: .9rem; line-height: 1.55; color: var(--w24dir-muted, #5b6470); } /* margin-top: auto drueckt den Verweis an die Unterkante der Karte — die drei Karten schliessen dann buendig ab, egal wie lang der Auszug ist. */ .w24dir-articles__more { margin-top: auto; padding-top: .35rem; font-size: .875rem; font-weight: 600; color: var(--w24dir-accent-ink, #1d6fa5); text-decoration: none; } .w24dir-articles__more:hover, .w24dir-articles__more:focus { text-decoration: underline; } /* ========================================================================== Fremdeintrag: Kennzeichnung, geschlossenes Anfrageformular, Widerspruch AUSDRÜCKLICH KEINE NEUE WURZELKLASSE. Diese Bausteine stehen ausnahmslos innerhalb der Detailseite, und die trägt `.w24dir-single` — sowohl in der Plugin-Fassung als auch in der gestalteten Fassung des Themes (divi-child-wtw, `

`). Die Variablen kommen also von dort und schalten mit den drei Listen im Kopf dieser Datei (hell, `prefers-color-scheme: dark`, `html.dark`) von selbst mit um. Wer hier später eine Wurzelklasse ergänzt, muss sie in ALLE DREI Listen eintragen — sonst greift `var(--w24dir-accent)` im Dunkelmodus ins Leere und die Knöpfe stehen durchsichtig da, während im Hellmodus alles richtig aussieht. ========================================================================== */ /* * Der Kennzeichnungsblock ist ein sichtbarer Kasten im Lesefluss, kein * Kleingedrucktes: Er trägt die Herkunft der Daten und den Weg zur Übernahme * oder Löschung. Zurückhaltend gestaltet, aber nicht versteckt. */ .w24dir-autonotice { margin: var(--w24dir-section, 2rem) 0 0; padding: 1.25rem 1.4rem; border: 1px solid var(--w24dir-border); border-left: 4px solid var(--w24dir-accent-ink); border-radius: var(--w24dir-radius); background: var(--w24dir-surface); scroll-margin-top: clamp(1rem, 8vh, 6rem); } /* * Eigener Schriftgrad, weil sich der Baustein nicht auf das Theme verlassen * darf: Themes mit einem Preflight-Reset stellen Überschriften auf * Fließtextgröße, bis eigene Klassen sie wieder aufbauen — und die stehen im * Theme-Markup, nicht in unserem. */ .w24dir-autonotice__title, .w24dir-autoclosed__title, .w24dir-objection__title { margin: 0 0 0.5em; font-size: 1.15rem; font-weight: 700; line-height: 1.3; text-wrap: balance; } /* Firmen-, Quellen- und Ortsnamen sind deutsche Komposita und laufen sonst aus dem Kasten („Gebäudereinigungsunternehmen"). */ .w24dir-autonotice, .w24dir-autoclosed, .w24dir-objection { overflow-wrap: break-word; } .w24dir-autonotice__text { margin: 0 0 0.9em; max-width: 68ch; } .w24dir-autonotice__lead { margin: 0 0 0.75em; max-width: 68ch; } .w24dir-autonotice__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0; } /* * Ersatz für das geschlossene Anfrageformular. * * DIE RANGFOLGE IST RECHTLICH BEGRÜNDET, NICHT GESTALTERISCH: Der direkte Weg * zum Betrieb (`__direct`) steht oben und ist der auffälligste Teil; der * Verweis auf vergleichbare Betriebe (`__alt`) steht darunter, kleiner und * ruhiger. Wer das umdreht — den Verweis nach oben oder den Kontakt kleiner —, * macht aus normalem Verzeichnisverhalten das Abfangen von Kunden nach * Paragraf 4 Nr. 4 UWG. Siehe den Kommentar in templates/parts/auto-notice.php. */ .w24dir-autoclosed { margin: var(--w24dir-section, 2rem) 0 0; scroll-margin-top: clamp(1rem, 8vh, 6rem); } .w24dir-autoclosed__intro { margin: 0 0 0.6em; max-width: 68ch; } .w24dir-autoclosed__direct { margin: 0; padding: 0.9em 1.1em; border: 1px solid var(--w24dir-border); border-radius: var(--w24dir-radius); background: var(--w24dir-surface-card); } .w24dir-autoclosed__direct li:last-child { margin-bottom: 0; } .w24dir-autoclosed__direct a { font-size: 1.15em; font-weight: 700; color: var(--w24dir-accent-ink); /* Eine lange Adresse (www.beispiel-dachdeckerei-musterstadt.de) sprengt sonst den Kasten. `anywhere` statt `break-word`, weil nur das auch die Mindestbreite mitzieht. */ overflow-wrap: anywhere; /* Nimmt die 300-ms-Verzögerung beim Antippen — der Anruf ist auf dem Handy der wichtigste Weg auf dieser Seite. */ touch-action: manipulation; } .w24dir-autoclosed__direct a:hover, .w24dir-autoclosed__direct a:focus-visible { text-decoration: underline; } /* Nachrangig: kleiner, ruhiger, aber unterstrichen und damit klar als Weg erkennbar. Die Farbe ist die gedämpfte Textfarbe, nicht die Akzentfarbe — der Akzent gehört dem direkten Kontaktweg darüber. */ .w24dir-autoclosed__alt { margin: 1rem 0 0; font-size: 0.9375em; color: var(--w24dir-muted); } .w24dir-autoclosed__alt a { color: inherit; text-decoration: underline; } /* Widerspruchsformular. Sprungziel der Verweise aus dem Kennzeichnungsblock, deshalb der Abstand nach oben beim Anspringen. */ .w24dir-objection { margin: var(--w24dir-section, 2rem) 0 0; padding: 1.25rem 1.4rem; border: 1px solid var(--w24dir-border); border-radius: var(--w24dir-radius); background: var(--w24dir-surface); scroll-margin-top: clamp(1rem, 8vh, 6rem); } .w24dir-objection__intro { margin: 0 0 1.2em; max-width: 68ch; } .w24dir-objection__form .w24dir-form__submit { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; margin: 1.5rem 0 0; } /* Die Auswahl des Anliegens sitzt enger als ein Feldblock: zwei Zeilen, die zusammengehören. */ .w24dir-objection__choice { margin-bottom: 1.2rem; } .w24dir-objection__choice .w24dir-field { margin-bottom: 0.35em; } .w24dir-objection__choice .w24dir-field:last-of-type { margin-bottom: 0; } /* Die Zeilenform von .w24dir-field--check gilt bisher nur für Kästchen; die Auswahl des Anliegens arbeitet mit Auswahlknöpfen und braucht sie genauso. */ .w24dir-field--check input[type="radio"] { margin-top: 0.25em; flex: 0 0 auto; } /* Sichtbarer Fokus für die Verweise dieser drei Bausteine. Die Grundregel weiter oben deckt nur Knöpfe und Eingabefelder ab — der direkte Kontaktweg ist aber ein Verweis, und ohne Fokusring ist er per Tastatur nicht auffindbar. */ .w24dir-autonotice a:focus-visible, .w24dir-autoclosed a:focus-visible, .w24dir-objection a:focus-visible { outline: 3px solid var(--w24dir-accent-ink); outline-offset: 2px; } /* ========================================================================== Startseite ([web24_directory_home]) Themeneutral wie der Rest des Frontends: alle Farben, Radien und Abstaende kommen aus den CSS-Variablen oben. Ein Theme, das seine eigenen Werte auf :root setzt, veraendert damit auch die Startseite, ohne einen Selektor ueberbieten zu muessen. ========================================================================== */ .w24dir-home { --w24dir-home-gap: clamp(2.5rem, 6vw, 5rem); /* * Umbruch fuer deutsche Komposita. Branchen-, Firmen- und Ortsnamen sind hier * das Testmaterial („Gebaeudereinigungsunternehmen", „Sankt-Michaelisdonn"). * Ohne diese Angabe laufen sie aus Kacheln und Karten heraus. */ overflow-wrap: break-word; } /* * Eigenes Kastenmodell, weil sich der Baustein nicht darauf verlassen darf, dass * das Theme `border-box` global setzt. Betroffen war vor allem das Suchfeld: * `width: 100%` plus 2,75rem Innenabstand fuer das Symbol lief sonst aus der * Leiste heraus. */ .w24dir-home, .w24dir-home *, .w24dir-home *::before, .w24dir-home *::after { box-sizing: border-box; } /* * `anywhere` statt `break-word` fuer die Flaechen in einem Raster: Nur * `anywhere` zieht auch die Mindestbreite der Rasterzelle mit — sonst bleibt die * Kachel breit und das Raster bekommt einen Querbalken. `min-width: 0` ist * dazu noetig, damit ein Flex-Kind unter seine Inhaltsbreite schrumpfen darf. */ .w24dir-home__title, .w24dir-home h2, .w24dir-home h3 { overflow-wrap: anywhere; } .w24dir-home__category-name, .w24dir-home__entry-name, .w24dir-home__entry-cat, .w24dir-home__city, .w24dir-home__faq summary { min-width: 0; overflow-wrap: anywhere; } /* * Sprungziele: Die Abschnitte tragen eigene Kennungen (#branchen, #ablauf, * #anfrage …). Auf einem Portal mit klebender Kopfzeile landet die Ueberschrift * des Zielabschnitts sonst unter der Leiste — fuer Maus und Tastatur gleich. */ .w24dir-home > section[id] { scroll-margin-top: clamp(1rem, 8vh, 6rem); } /* * EIGENE SCHRIFTGRADE, WEIL SICH DER BAUSTEIN NICHT AUF DAS THEME VERLASSEN * DARF. * * Moderne Themes bringen einen Reset im Stil von Tailwinds Preflight mit: * * h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit } * * Damit ist jede Ueberschrift so gross wie Fliesstext und nicht fett, bis das * Theme sie ueber eigene Klassen wieder aufbaut — und die stehen in SEINEM * Markup, nicht in unserem. Auf wertaugtwas.de fiel das erst auf, als die * Startseite auf den Shortcode umgestellt wurde: Vorher lieferte das Titelband * des Themes die grosse fette Zeile, danach stand der Titelslogan als * normalgrosser Fliesstext da. * * Deshalb setzt der Baustein seine Schriftgrade selbst. Die Werte folgen der * Staffelung der handgebauten Vorgaengerseite (Tailwind text-4xl/5xl bzw. * text-3xl/4xl, font-extrabold, tracking-tight), nur als clamp() statt als * Umbruchpunkte. Element-Selektoren des Themes (Spezifitaet 0,0,1) werden davon * geschlagen; ein Theme, das den Baustein bewusst anders gestalten will, kommt * mit einer Klasse darueber. */ .w24dir-home h1, .w24dir-home h2, .w24dir-home h3 { text-wrap: balance; } .w24dir-home__title { margin: 0; font-size: clamp(2.25rem, 4.5vw, 3.4rem); font-weight: 800; line-height: 1.05; letter-spacing: -0.025em; } /* * Abschnittsueberschriften: eine Stufe unter dem Titelslogan. * * Gilt fuer JEDES h2 im Baustein, nicht nur fuer die in einem __head. Zwei * Ueberschriften stehen ohne __head im Markup — „Gefunden werden, wenn jemand * sucht" im Bereich fuer Betriebe und die Ueberschrift des Abschlussbands — und * blieben mit der engeren Regel auf Themes mit Ueberschriften-Reset in * Fliesstextgroesse stehen. Genau der Fehler, den der Kommentar darueber * beschreibt, nur an zwei Stellen uebersehen. * * Die kleinen Ueberschriften in den Karten setzen ihre Groesse weiter unten * selbst zurueck: gleiche Spezifitaet, spaetere Regel. */ .w24dir-home h2 { margin-top: 0; font-size: clamp(1.875rem, 3.2vw, 2.25rem); font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; } /* * Ueberschriften INNERHALB der Karten (Vertrauensleiste, Ablaufschritte). Sie * stehen absichtlich deutlich kleiner als die Abschnittsueberschriften — als h2 * bzw. h3 sind sie eine Gliederungsebene, keine Schaugroesse. */ .w24dir-home__trust h2, .w24dir-home__step h3, /* * Der Kopf des Anfrageformulars. Er steht im Baustein unter einer * Abschnittsueberschrift, die dasselbe sagt, und traegt selbst keine eigene * Gestaltung — mit der Regel fuer alle h2 waere er sonst genauso gross wie die * Ueberschrift direkt darueber und wuerde sie verdoppeln. */ .w24dir-home__panel--form .w24dir-leadform__title { margin: 0 0 0.4rem; font-size: 1.125rem; font-weight: 700; line-height: 1.3; letter-spacing: normal; } /* -- Fokus ---------------------------------------------------------------- */ /* * Jede bedienbare Flaeche des Bausteins bekommt ihren Ring selbst. Die * gemeinsame Regel im Kopf der Datei deckt nur .w24dir-button und Felder in * .w24dir-form ab; die Suche im Kopfbereich, die Eintragskarten, die * Branchenkacheln, die Ortspillen und das Akkordeon liegen ausserhalb. Solange * das Theme den Browserring stehen laesst, faellt das nicht auf — ein Theme mit * `outline: 0` macht damit den halben Baustein per Tastatur unbedienbar. */ .w24dir-home :is( .w24dir-home__field input, .w24dir-home__entry, .w24dir-home__category, .w24dir-home__city, .w24dir-home__panel-link, .w24dir-home__more a, .w24dir-home__faq summary ):focus-visible { outline: 3px solid var(--w24dir-accent-ink); outline-offset: 2px; } /* Was die Maus zeigt, zeigt die Tastatur auch. */ .w24dir-home__entry:focus-visible, .w24dir-home__category:focus-visible, .w24dir-home__city:focus-visible { border-color: var(--w24dir-accent); } /* * Auf dem Akzentband ist --w24dir-accent-ink im hellen Modus die Bandfarbe * selbst — der Ring laege unsichtbar auf seinem eigenen Untergrund. */ .w24dir-home__cta :is(a, button):focus-visible { outline: 3px solid var(--w24dir-accent-contrast); outline-offset: 3px; } .w24dir-home__icon { width: 1em; height: 1em; flex: none; } .w24dir-home__accent { color: var(--w24dir-accent-ink); } .w24dir-home__br { display: none; } .w24dir-home__lead { color: var(--w24dir-muted); /* Eine Stufe ueber Fliesstext, wie auf der Vorgaengerseite (text-lg). Ohne diese Angabe steht die Einleitung genauso gross da wie der Kleingedruckte darunter und der Kopfbereich verliert seine Staffelung. */ font-size: clamp(1.0625rem, 1.4vw, 1.125rem); line-height: 1.6; } /* Flaechige Baender wechseln sich mit hellen Abschnitten ab. */ .w24dir-home__band { background: var(--w24dir-surface); border-block: 1px solid var(--w24dir-border); } .w24dir-home__section { padding-block: var(--w24dir-home-gap); } .w24dir-home__section--narrow .w24dir-container { max-width: 46rem; } .w24dir-home__head { max-width: 44rem; margin-bottom: 2.5rem; } .w24dir-home__head--center { margin-inline: auto; text-align: center; } .w24dir-home__head h2 { margin-bottom: 0.5rem; } .w24dir-home__eyebrow { margin: 0 0 0.5rem; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--w24dir-accent-ink); } /* -- Kopfbereich ---------------------------------------------------------- */ .w24dir-home__hero-inner { display: grid; gap: 2.5rem; padding-block: clamp(2rem, 5vw, 3.5rem); } .w24dir-home__title { margin-bottom: 0.75rem; } .w24dir-home__hero-text > .w24dir-home__lead { max-width: 34rem; } .w24dir-home__search { margin-top: 1.75rem; padding: 0.75rem; border: 1px solid var(--w24dir-border); border-radius: calc(var(--w24dir-radius) * 1.6); background: var(--w24dir-surface-card); box-shadow: 0 10px 30px rgb(15 23 42 / 8%); display: grid; gap: 0.75rem; } .w24dir-home__search-fields { display: grid; gap: 0.75rem; } .w24dir-home__field { position: relative; margin: 0; } .w24dir-home__field-icon { position: absolute; left: 0.9rem; top: 50%; transform: translateY(-50%); font-size: 1.15rem; color: var(--w24dir-muted); pointer-events: none; } .w24dir-home__field input { width: 100%; min-height: 48px; padding: 0.6rem 0.9rem 0.6rem 2.75rem; border: 1px solid var(--w24dir-border); border-radius: var(--w24dir-radius); background: var(--w24dir-surface-input); color: inherit; font: inherit; } .w24dir-home__search-button { width: 100%; min-height: 48px; gap: 0.5rem; } .w24dir-home__features { list-style: none; margin: 1.75rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; font-size: 0.9375rem; font-weight: 500; color: var(--w24dir-muted); } .w24dir-home__features li { display: inline-flex; align-items: center; gap: 0.5rem; margin: 0; } .w24dir-home__features .w24dir-home__icon { font-size: 1.15rem; color: var(--w24dir-accent-ink); } .w24dir-home__features--stacked { flex-direction: column; align-items: flex-start; gap: 0.65rem; margin-top: 1.5rem; } /* -- Karten --------------------------------------------------------------- */ .w24dir-home__panel { padding: 1.25rem; border: 1px solid var(--w24dir-border); border-radius: calc(var(--w24dir-radius) * 1.6); background: var(--w24dir-surface-card); box-shadow: 0 12px 34px rgb(15 23 42 / 7%); } .w24dir-home__panel--form { padding: clamp(1.25rem, 3vw, 2rem); } .w24dir-home__panel-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-bottom: 0.9rem; } .w24dir-home__panel-title { margin: 0; font-weight: 700; font-size: 0.9375rem; } /* * Textverweise setzen ihre Farbe selbst. Ohne Unterstreichung UND ohne eigene * Farbe erben sie die Linkfarbe des Themes — faerbt ein Theme Links wie * Fliesstext, ist der Verweis von gewoehnlichem Text nicht zu unterscheiden. * Die Mindesthoehe bringt das Ziel auf die 24 Pixel aus WCAG 2.2. */ .w24dir-home__panel-link { display: inline-flex; align-items: center; min-height: 24px; color: var(--w24dir-accent-ink); font-size: 0.8125rem; font-weight: 600; } .w24dir-home__panel-note { font-size: 0.8125rem; color: var(--w24dir-muted); } .w24dir-home__panel-list { display: grid; gap: 0.65rem; /* * ALLE Zeilen so hoch wie die hoechste. `1fr` in einem Raster ohne feste * Hoehe verteilt nicht, sondern gleicht aus — und genau das ist hier * gewollt: Fehlt einem Eintrag die Ortsangabe, ist seine Zeile sonst eine * Textzeile flacher und sein Bild sichtbar kleiner als das der Nachbarn. * * Bewusst so und nicht ueber eine `min-height`: Jeder feste Wert waere aus * der aktuellen Schriftgroesse geraten und beim ersten groesseren Text * wieder falsch. Beim ersten Anlauf war er es sofort (5,75rem gegen * tatsaechliche 6,75rem). */ grid-auto-rows: 1fr; } .w24dir-home__panel-row { display: flex; align-items: center; gap: 0.85rem; padding: 1.1rem 0; border-top: 1px solid var(--w24dir-border); } .w24dir-home__panel-name { display: block; font-weight: 700; } .w24dir-home__panel-meta { display: block; font-size: 0.8125rem; color: var(--w24dir-muted); } .w24dir-home__entry { display: flex; /* * `stretch` und nicht `center`: Das Bild soll die Hoehe der Zeile ausnutzen, * statt als kleine Marke in der Mitte zu sitzen. */ align-items: stretch; gap: 0.85rem; padding: 0.85rem 1rem; border: 1px solid var(--w24dir-border); border-radius: var(--w24dir-radius); color: inherit; text-decoration: none; } .w24dir-home__entry:hover { border-color: var(--w24dir-accent); } /* * Bild des Betriebs neben dem Namen. * * Es nutzt die HOEHE der Zeile aus und leitet seine Breite daraus ab. Damit ist * es so gross, wie die Zeile es zulaesst, ohne die Zeile zu verformen — und weil * jede Zeile dieselbe Mindesthoehe hat, sind alle Bilder gleich gross. * * `flex: none`, weil hier beides ankommen kann: ein hochkantes Firmenlogo und * ein querformatiges Branchenbild. Das Format bleibt in beiden Faellen 3:2, * `object-fit: cover` beschneidet den Ueberschuss — sonst bestimmt das * jeweilige Seitenverhaeltnis die Bildgroesse und die Eintraege stehen * unterschiedlich da. * * 3:2 ist dasselbe Format, in dem die Branchenbilder angelegt werden * (1600 × 1067) und in dem Betriebe ihre Aufnahmen ueblicherweise hochladen. */ .w24dir-home__entry-thumb { flex: none; align-self: center; /* * BEIDE Maße fest, 3:2 (7,5 × 5 rem). * * Der naheliegende Weg — Höhe vom `stretch` der Zeile nehmen und die Breite * über `aspect-ratio` daraus ableiten — hat die Startseite zerlegt: Die so * errechnete Breite geht in die Inhaltsbreite der Seitenkarte ein, die * Seitenkarte bestimmt die Breite ihrer Rasterspalte, und die Spaltenbreite * bestimmt wieder die Zeilenhöhe. Diese Rückkopplung trieb die Karte über * die Fensterbreite hinaus, mitsamt Querbalken am Seitenende. * * Feste Maße können das nicht: Sie hängen von keiner Größe ab, die sie * selbst beeinflussen. Die Werte entsprechen dem, was die abgeleitete * Rechnung ergab (119 × 79 Pixel) — nur eben ohne den Kreis. */ width: 7.5rem; height: 5rem; overflow: hidden; border-radius: calc(var(--w24dir-radius) - 2px); background: var(--w24dir-surface); } /* * Auf schmalen Geraeten eine Stufe kleiner (6 × 4 rem, dasselbe Format). * * Gerechnet fuer 375 Pixel Fensterbreite: Nach Seiten- und Kartenrand bleiben * rund 310 Pixel. Davon nahm das Bild mit 120 Pixeln plus Abstand mehr als ein * Drittel, und fuer den Firmennamen blieben etwa 176 Pixel — er bricht dort * mehrzeilig um, obwohl daneben Platz ist. Die Grenze liegt bewusst UNTER dem * Umbruchpunkt des Kopfbereichs (40rem): Ab dort steht die Seitenkarte wieder * in ihrer eigenen Spalte und hat den Platz. */ @media (max-width: 26rem) { .w24dir-home__entry-thumb { width: 6rem; height: 4rem; } } .w24dir-home__entry-img { display: block; width: 100%; height: 100%; object-fit: cover; } /* * Nimmt den restlichen Platz und darf dabei schrumpfen, damit ein langer * Firmenname umbricht statt die Karte zu verbreitern. Der Text bleibt * senkrecht mittig — die Zeile ist durch die Mindesthoehe hoeher als er. */ .w24dir-home__entry-text { min-width: 0; align-self: center; } .w24dir-home__entry-cat { display: inline-block; padding: 0.15rem 0.6rem; border-radius: 999px; background: var(--w24dir-surface); color: var(--w24dir-accent-ink); font-size: 0.75rem; font-weight: 700; } .w24dir-home__entry-name { display: block; margin-top: 0.5rem; font-weight: 600; } /* Ohne Branchenangabe steht der Name oben und braucht den Abstand nicht — er hing sonst als einzelne Zeile aus der Mitte nach unten versetzt. */ .w24dir-home__entry-text > :first-child { margin-top: 0; } .w24dir-home__entry-place { display: block; margin-top: 0.15rem; font-size: 0.8125rem; color: var(--w24dir-muted); } /* * Wann der Eintrag dazukam. Noch eine Spur zurueckhaltender als der Ort: Die * Angabe belegt die Aktualitaet des Abschnitts, sie ist aber nicht der Grund, * warum jemand die Karte anklickt. */ .w24dir-home__entry-time { display: block; margin-top: 0.1rem; font-size: 0.75rem; color: var(--w24dir-muted); opacity: 0.85; } /* -- Vertrauensleiste ----------------------------------------------------- */ .w24dir-home__trust { display: grid; gap: 2rem; padding-block: clamp(2.5rem, 5vw, 3.5rem); } .w24dir-home__trust h2 { margin: 0.9rem 0 0.35rem; font-size: 1.125rem; } .w24dir-home__trust p { margin: 0; color: var(--w24dir-muted); font-size: 0.9375rem; } .w24dir-home__iconbox { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: calc(var(--w24dir-radius) * 1.2); /* * Rueckfall zuerst: Die Vertrauensleiste steht auf einem Band, und das Band * hat DIESELBE Flaeche (--w24dir-surface) — die abgerundete Kachel war dort * unsichtbar und nur das Symbol schwebte frei. Die Akzenttoenung wirkt auf * jeder Flaeche und bindet das Symbol an die Portalfarbe. */ background: var(--w24dir-surface-card); background: color-mix(in srgb, var(--w24dir-accent) 12%, transparent); color: var(--w24dir-accent-ink); font-size: 1.35rem; flex: none; } /* -- Branchen ------------------------------------------------------------- */ .w24dir-home__categories { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 0.75rem; } .w24dir-home__category { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; min-height: 56px; padding: 0.75rem 1.1rem; border: 1px solid var(--w24dir-border); border-radius: calc(var(--w24dir-radius) * 1.4); background: var(--w24dir-surface-card); color: inherit; text-decoration: none; } .w24dir-home__category:hover { border-color: var(--w24dir-accent); transform: translateY(-1px); } .w24dir-home__category-name { font-weight: 600; } .w24dir-home__category-count { font-size: 0.8125rem; font-weight: 700; color: var(--w24dir-muted); font-variant-numeric: tabular-nums; } .w24dir-home__more { margin: 2rem 0 0; } .w24dir-home__more a { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--w24dir-accent-ink); font-weight: 600; text-decoration: none; } .w24dir-home__more a:hover { text-decoration: underline; } /* -- Ablauf --------------------------------------------------------------- */ .w24dir-home__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; } .w24dir-home__step { margin: 0; padding: 1.5rem; border: 1px solid var(--w24dir-border); border-radius: calc(var(--w24dir-radius) * 1.6); background: var(--w24dir-surface-card); } .w24dir-home__step-no { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: calc(var(--w24dir-radius) * 1.2); background: var(--w24dir-accent); color: var(--w24dir-accent-contrast); font-weight: 700; font-variant-numeric: tabular-nums; } .w24dir-home__step h3 { margin: 1.1rem 0 0.35rem; } .w24dir-home__step p { margin: 0; color: var(--w24dir-muted); font-size: 0.9375rem; } /* -- Fuer Betriebe -------------------------------------------------------- */ .w24dir-home__business { display: grid; gap: 2.5rem; align-items: center; } .w24dir-home__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 0; padding-top: 1.1rem; border-top: 1px solid var(--w24dir-border); } .w24dir-home__stats dt { font-size: 0.8125rem; color: var(--w24dir-muted); } .w24dir-home__stats dd { margin: 0.25rem 0 0; font-size: 1.35rem; font-weight: 800; font-variant-numeric: tabular-nums; } /* -- Orte ----------------------------------------------------------------- */ .w24dir-home__cities { display: flex; flex-wrap: wrap; gap: 0.6rem; } .w24dir-home__city { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; padding: 0.5rem 1rem; border: 1px solid var(--w24dir-border); border-radius: 999px; background: var(--w24dir-surface-card); color: inherit; font-size: 0.9375rem; font-weight: 600; text-decoration: none; } .w24dir-home__city:hover { border-color: var(--w24dir-accent); color: var(--w24dir-accent-ink); } .w24dir-home__city-count { font-size: 0.8125rem; font-weight: 500; color: var(--w24dir-muted); font-variant-numeric: tabular-nums; } /* -- Fragen --------------------------------------------------------------- */ .w24dir-home__faq details { border-bottom: 1px solid var(--w24dir-border); } .w24dir-home__faq details:first-child { border-top: 1px solid var(--w24dir-border); } .w24dir-home__faq summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 56px; padding: 1rem 0; font-weight: 600; cursor: pointer; list-style: none; } .w24dir-home__faq summary::-webkit-details-marker { display: none; } .w24dir-home__faq-icon { font-size: 1.25rem; color: var(--w24dir-accent-ink); transition: transform 0.15s ease; } .w24dir-home__faq details[open] .w24dir-home__faq-icon { transform: rotate(45deg); } .w24dir-home__faq p { margin: 0 0 1.25rem; color: var(--w24dir-muted); } /* -- Abschluss ------------------------------------------------------------ */ .w24dir-home__cta { padding: clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 4vw, 4rem); border-radius: calc(var(--w24dir-radius) * 2.4); background: var(--w24dir-accent); color: var(--w24dir-accent-contrast); text-align: center; } .w24dir-home__cta h2 { color: var(--w24dir-accent-contrast); margin-bottom: 0.5rem; } .w24dir-home__cta p { max-width: 34rem; margin-inline: auto; /* * KEINE Deckkraft. Weiss auf der Vorgabefarbe #1d6fa5 sind 5,4:1; mit 0,9 * bleiben 4,7:1, und die Reserve ist weg — jedes Portal mit hellerer * Hauptfarbe faellt damit unter die AA-Schwelle. Deckkraft an Text auf einer * Markenflaeche ist immer die falsche Stellschraube, weil die Flaeche vom * Portal kommt und nicht von hier. */ } .w24dir-home__cta-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin-top: 1.75rem; } /* * Der helle Knopf auf dem Akzentband. * * Seine Flaeche ist --w24dir-accent-contrast (praktisch immer Weiss), NICHT die * Seitenflaeche. Die Schrift muss deshalb --w24dir-accent tragen und nicht * --w24dir-accent-ink: Letzteres wird im Dunkelmodus aufgehellt und stand mit * rund 1,9:1 auf dem weissen Knopf. Ueber das Ink-Token gilt die Farbe auch im * Hover-Zustand — vorher setzte die gemeinsame Regel dort weisse Schrift auf die * weisse Flaeche, der Text verschwand beim Ueberfahren vollstaendig. */ .w24dir-home__button-light { background: var(--w24dir-accent-contrast); border-color: var(--w24dir-accent-contrast); --w24dir-button-ink: var(--w24dir-accent); color: var(--w24dir-button-ink); } .w24dir-home__button-outline { background: transparent; border: 1px solid currentColor; --w24dir-button-ink: var(--w24dir-accent-contrast); color: var(--w24dir-button-ink); } /* * Knoepfe mit Symbol brauchen eine Flex-Flaeche. * * .w24dir-button ist inline-block, dort wirkt `gap` NICHT — Lupe und * Beschriftung klebten aneinander, und bei gesetzter Mindesthoehe stand der Text * am oberen Rand statt in der Mitte. Mit inline-flex traegt `gap` den Abstand, * und die frueheren margin-left-Regeln entfallen (sonst addieren sich beide). */ .w24dir-home__search-button, .w24dir-home__button-light, .w24dir-home__button-outline, .w24dir-home__business .w24dir-button { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; } /* Symbole sitzen sonst auf der Textgrundlinie und haengen dadurch zu tief. */ .w24dir-home .w24dir-button .w24dir-home__icon { vertical-align: middle; } /* -- Breiten -------------------------------------------------------------- */ @media (min-width: 40rem) { .w24dir-home__br { display: inline; } .w24dir-home__search-fields { grid-template-columns: 1fr 1fr; } .w24dir-home__search { grid-template-columns: 1fr auto; align-items: center; } .w24dir-home__search-button { width: auto; padding-inline: 1.75rem; } .w24dir-home__trust, .w24dir-home__steps { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 60rem) { .w24dir-home__hero-inner { grid-template-columns: 1.05fr 0.95fr; align-items: center; gap: 3.5rem; } .w24dir-home__business { grid-template-columns: 1fr 1fr; gap: 3.5rem; } } /* --------------------------------------------------------------------------- * Leistungen eines Betriebs (parts/services-section.php). * * Ausschliesslich w24dir-Klassen und Variablen aus dem Kopf dieser Datei - * das Teil erscheint auch in der gestalteten Fassung des Themes, und * Tailwind-Utilities blieben dort wirkungslos. Die Variablen schalten ueber * .w24dir-single von selbst in den Dunkelmodus um; eine eigene Wurzelklasse * gibt es NICHT, weil der Abschnitt immer innerhalb der Firmenseite steht - * damit entfaellt die Falle der drei Deklarationslisten. * ------------------------------------------------------------------------- */ .w24dir-services { margin: var(--w24dir-section, 2rem) 0 0; } .w24dir-services__heading { margin: 0 0 1rem; font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.25; } .w24dir-services__list { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; } .w24dir-services__item { margin: 0; padding: 0; } /* * Auch die verlinkte Fassung bekommt hier ihre Schrift- und Rahmenfarbe * gesetzt: Im Theme greift `.sl-prose a` (0-1-1) sonst staerker als eine * einzelne Klasse (0-1-0) und faerbt das Schlagwort in die Linkfarbe - * derselbe Zusammenstoss wie beim Artikel-Knopf. */ .w24dir-services__tag, .w24dir-services a.w24dir-services__tag { display: inline-block; padding: .3rem .7rem; border: 1px solid var(--w24dir-border, #e2e5e9); border-radius: 999px; background: var(--w24dir-surface, #f7f8fa); color: var(--w24dir-text, currentColor); font-size: .875rem; line-height: 1.35; text-decoration: none; } .w24dir-services a.w24dir-services__tag:hover, .w24dir-services a.w24dir-services__tag:focus-visible { border-color: var(--w24dir-accent, #2271b1); background: var(--w24dir-accent, #2271b1); color: var(--w24dir-accent-contrast, #fff); } .w24dir-services__source { margin: .75rem 0 0; color: var(--w24dir-muted, #5b6570); font-size: .8125rem; line-height: 1.5; } /* --------------------------------------------------------------------------- * Branchen-Bereich: Ortsseiten und Ortsverweise. * * Die Ortsverweise erscheinen an zwei Stellen: als Anhang unter jeder * Branchenseite (the_content) und als Nachbarorte-Block auf der Ortsseite * selbst. Mehrspaltig, weil eine einspaltige Liste bei einem Dutzend Orten * eine Bildschirmseite Leerraum verschenkt. * ------------------------------------------------------------------------- */ .w24dir-branche-orte { margin: 2.5rem 0 0; } .w24dir-branche-orte__liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .5rem 1.5rem; margin: 1rem 0 0; padding: 0; list-style: none; } .w24dir-branche-orte__liste a { text-decoration: none; } .w24dir-branche-orte__liste a:hover, .w24dir-branche-orte__liste a:focus-visible { text-decoration: underline; } /* * Der Hero der Ortsseite: weiches Panel in der Akzentfarbe, damit die * Einleitung als Buehne wirkt statt als nackter Absatz ueber einer Liste. * Farbnebel ueber color-mix aus der Akzentfarbe, mit fester Rueckfallfarbe * fuer Browser ohne color-mix. */ .w24dir-branche-ort__hero { margin: 0 0 2.5rem; padding: 2rem 2rem 2.25rem; border: 1px solid var(--w24dir-border, #e2e5e9); border-radius: 16px; background: #f2f7fc; background: color-mix(in srgb, var(--w24dir-accent, #2271b1) 6%, var(--w24dir-surface, #fff)); } .w24dir-branche-ort__title { margin: 0 0 .75rem; font-size: clamp(1.6rem, 3.5vw, 2.25rem); line-height: 1.2; } .w24dir-branche-ort__intro { max-width: 46rem; margin: 0 0 1rem; font-size: 1.0625rem; line-height: 1.65; } .w24dir-branche-ort__merkmale { display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; margin: 0 0 1.5rem; padding: 0; list-style: none; color: var(--w24dir-muted, #5b6570); font-size: .9375rem; } .w24dir-branche-ort__merkmale li::before { content: "\2713"; margin-right: .45rem; color: var(--w24dir-accent, #2271b1); font-weight: 700; } .w24dir-branche-ort__suche { max-width: 34rem; } .w24dir-branche-ort__listentitel, .w24dir-branche-orte > h2 { margin: 0 0 1.25rem; font-size: 1.375rem; line-height: 1.3; } .w24dir-branche-ort__pfad { margin: 0 0 .75rem; color: var(--w24dir-muted, #5b6570); font-size: .875rem; } .w24dir-branche-ort__pfad a { color: inherit; } .w24dir-branche-ort__pfad span[aria-hidden] { margin: 0 .35rem; } .w24dir-branche-ort__grid { margin-top: 0; } .w24dir-branche-ort__zurueck { margin: 2.5rem 0 0; }