/* Theme Name: Blocksy Child — Barfachschule Zürich Theme URI: https://barfachschulezuerich.ch Description: Kindtheme für die Ablösung von Elementor. Es trägt die Ersatz- logik für alles, was bisher an Elementor-Widget-IDs, Container- IDs und Elementor-CSS-Klassen hing, sowie die Übersetzung der bisherigen Elementor-Stile nach Gutenberg und Blocksy. Author: Barfachschule Zürich Template: blocksy Version: 1.0.0 Text Domain: bfsz-child */ /* ========================================================================== Übersetzung der bisherigen Elementor-Regeln -------------------------------------------------------------------------- Jede Regel hier ersetzt eine, die vorher auf `.elementor-*` zielte. Die Herkunft steht dabei, damit später nachvollziehbar bleibt, warum es sie gibt — und damit man sie streichen kann, wenn der Grund entfällt. ========================================================================== */ /* -------------------------------------------------------------------------- Mitgliederbereich Vorher: body.page-id-9620 .elementor-9620 > .bfsz-mitgliederbereich-container Der Elementor-Wrapper entfällt; im Blockeditor liegt der Inhalt im Beitragsinhalt. -------------------------------------------------------------------------- */ .entry-content .bfsz-mitgliederbereich-container, .ct-container .bfsz-mitgliederbereich-container { width: 100%; max-width: 100%; margin-inline: 0; } /* * ⚠️ DIE LESEBREITE STECKTE FRÜHER IN `.e-con-inner`. * * Das Plugin gab seine Inhalte in Elementors Behälterform aus: * `
`. Draussen die * volle Breite, drinnen die Lesebreite — die Regel dafür kam aus Elementors * Stildatei. Ohne Elementor war `.e-con-inner` eine Klasse ohne Regel, und * Kartei und Stellensuche liefen über die ganze Fensterbreite, während der * übrige Seiteninhalt in seiner 1140-Pixel-Spalte stand. * * Das Plugin gibt inzwischen `.bfsz-mitgliederbereich-innen` aus. Die Regel * heisst deshalb so — und trägt jetzt einen Namen, der zum Haus gehört. */ .bfsz-mitgliederbereich-container > .bfsz-mitgliederbereich-innen { width: 100%; max-width: var(--bfsz-inhaltsbreite, 1140px); margin-inline: auto; } /* -------------------------------------------------------------------------- Mitgliederbereich: die alte Download-Sammlung bleibt verborgen Vorher: body.page-id-9620 .elementor-9620 > .elementor-element-a81c637 (und cafe667, 9b75a33, 035c2f6), aus bfsz-mitgliederbereich.css ⚠️ OHNE DIESE REGEL STEHT AUF DER SEITE ALLES ZWEIMAL. Die vier Container tragen die von Hand gepflegten Vorgänger: „Unterlagen", „Recht", „Getränkekarten" mit zwölf PDF-Verweisen sowie die alte statische Stellensuche. Sie bleiben absichtlich im Inhalt — als Sicherungskopie —, werden aber nicht angezeigt; die zentral gepflegte Kartei tritt an ihre Stelle. Die bisherige Website blendet sie über den Elementor-Wrapper aus. Den gibt es hier nicht mehr, also greift die Regel des Plugins nicht: Die alten Blöcke waren wieder sichtbar, jedes der zwölf Dokumente stand doppelt auf der Seite, und der Hinweis in der Zentrale („nur noch Sicherheitskopie") stimmte nicht mehr. Die Kennungen stammen aus der Migration: aus `elementor-element-a81c637` wird `bfsz-ea81c637`. ⚠️ DIE KLASSE STEHT ZWEIMAL, UND ZWAR MIT ABSICHT. In ihrer ersten Fassung lautete die Regel `.page-id-9620 .bfsz-e035c2f6`. Sie war wirkungslos, und der Grund ist ein Gleichstand: Der Konverter schreibt für jeden Container .bfsz-e035c2f6.bfsz-e035c2f6 { display: flex; … } Zwei Klassen hier, zwei dort — gleiche Spezifität. Bei Gleichstand gewinnt, was später kommt, und das erzeugte CSS steht hinter dem Stylesheet des Kindthemes. `display: flex` schlug also `display: none`, lautlos. Gemessen am angemeldeten Mitgliederbereich stand deshalb alles doppelt: „Stellensuche für Bar-Professionals" zweimal, „Aktuelle Stelleninserate" zweimal, dazu die zwölf PDFs. Die alte Stellensuche lag bei y = 5070 und war 3007 Pixel hoch — sie ist die untere der beiden Listen. `body` plus doppelte Klasse ergibt drei Klassen und ein Element und gewinnt damit unabhängig von der Reihenfolge. ⚠️ DREI DER VIER BRAUCHEN ZUSÄTZLICH `!important`. Nachgemessen am Dokument tragen `ea81c637` (Unterlagen), `ecafe667` (Recht) und `e9b75a33` (Getränkekarten) ein style-Attribut: style="padding:…;gap:18px 18px;display:flex;flex-direction:column;…" Ein Attribut schlägt jede Regel aus einer Datei, egal wie spezifisch — nur `!important` kommt daran vorbei. `e035c2f6`, die alte Stellensuche, kommt ohne `display` im Attribut aus; dort genügte die höhere Spezifität. Zuerst war nur die Stellensuche verborgen, weil nur danach gefragt war. Die Dokumente und Barkarten standen deshalb weiterhin zweimal auf der Seite — einmal aus diesen Altblöcken, einmal aus der Kartei des Plugins. Das ist inzwischen ausdrücklich gewünscht und hier erledigt. Nichts geht dabei verloren, nachgezählt: Die Kartei des Plugins führt alle zwölf Dokumente — drei Kursunterlagen, vier rechtliche, fünf Barkarten —, und die eigenen Stelleninserate stehen ebenfalls in seinem Block. Die Altblöcke bleiben als Sicherungskopie im Seiteninhalt gespeichert, nur unsichtbar. -------------------------------------------------------------------------- */ body.page-id-9620 .bfsz-ea81c637.bfsz-ea81c637, body.page-id-9620 .bfsz-ecafe667.bfsz-ecafe667, body.page-id-9620 .bfsz-e9b75a33.bfsz-e9b75a33, body.page-id-9620 .bfsz-e035c2f6.bfsz-e035c2f6 { display: none !important; } /* -------------------------------------------------------------------------- Mobile Lesbarkeit Vorher: .elementor-widget-text-editor, .elementor-icon-list-text, .elementor-heading-title, .elementor-tab-title (aus bfsz-wf-readability.css, ursprünglich Snippet 32) -------------------------------------------------------------------------- */ @media (max-width: 767px) { .entry-content p, .entry-content .wp-block-list li { font-size: 1rem; line-height: 1.65; } /* Die Werte des Kits für Telefone: 15px Grundschrift, H1 32, H2 26, H3 20. */ body, .entry-content { font-size: 15px; } h1, .entry-content h1 { font-size: 32px; } h2, .entry-content h2 { font-size: 26px; } h3, .entry-content h3 { font-size: 20px; } /* Vorher: .elementor .e-con.e-flex — Reihen brechen auf schmalen Geräten um. */ .entry-content .wp-block-group.is-layout-flex { flex-wrap: wrap; } /* Vorher: .elementor-tab-title (Akkordeon-Kopf) */ .entry-content .wp-block-details summary { font-size: 1.05rem; line-height: 1.4; padding-block: 0.6rem; } } /* -------------------------------------------------------------------------- Buchungsseite: vollbreiter Knopf auf dem Telefon Vorher: .page-id-7584 .elementor-button (aus bfsz-wf-booking.css, ursprünglich Snippet 37) -------------------------------------------------------------------------- */ @media (max-width: 767px) { .page-id-7584 .wp-block-button__link, .page-id-7584 .ct-button { display: block; width: 100%; text-align: center; font-size: 15px; } } /* -------------------------------------------------------------------------- Bausteine, die der Konverter erzeugt -------------------------------------------------------------------------- */ /* Sprungmarken ersetzen Elementors menu-anchor. Sie sind unsichtbar, müssen aber den festen Kopfbereich ausgleichen, sonst landet der Sprung darunter. */ .bfsz-sprungmarke { display: block; height: 0; scroll-margin-top: var(--bfsz-kopfhoehe, 100px); } /* Karten (vorher Elementors google_maps-Widget) */ .bfsz-karte iframe { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; min-height: 300px; border: 0; border-radius: var(--bfsz-radius, 4px); } /* Handlungsaufrufe und Bildkästen, die aus zusammengesetzten Elementor- Widgets entstanden sind. Grid statt fester Breiten, damit sie sich ohne Medienabfragen einpassen. */ .bfsz-cta, .bfsz-bildkasten { display: grid; gap: 0.75rem; align-content: start; } .bfsz-cta { padding: clamp(1.25rem, 4vw, 2rem); border-radius: var(--bfsz-radius, 4px); background: var(--bfsz-flaeche, #f7f5f2); } .bfsz-bildkasten img { width: 100%; height: auto; border-radius: var(--bfsz-radius, 4px); } /* Symbole aus Elementors Icon-Widget — jetzt als SVG (siehe inc/symbole.php). Sie folgen der Schriftgrösse und der Textfarbe ihrer Umgebung, wie es eine Icon-Schrift auch täte. */ .bfsz-icon { display: inline-block; line-height: 1; vertical-align: -0.125em; color: var(--theme-link-initial-color); /* Elementors Voreinstellung für ein eigenständiges Symbol. Wo eine eigene Grösse gesetzt war, überschreibt sie der Seitenstil. */ font-size: 50px; } .bfsz-icon .bfsz-symbol { display: block; width: 1em; height: 1em; fill: currentColor; } /* In Kacheln stehen die Symbole gross und mittig über dem Titel. 50 Pixel ist Elementors Vorgabe für die Icon-Box; mit 2.5rem (40 Pixel) wurden die Symbole der Über-uns-Seite 80 statt 100 Pixel gross, weil der Innenabstand von einem halben Geviert mitschrumpft. */ .bfsz-bildkasten > .bfsz-icon { font-size: 50px; margin-inline: auto; } /* -------------------------------------------------------------------------- Kurskarten auf der Startseite Vorher steuerte Elementor die Widget-IDs ca498d7 und 030008d. Jetzt trägt der Block eine Klasse, und die Auszeichnung ist unabhängig vom Seitenaufbau. -------------------------------------------------------------------------- */ .bfsz-naechster-kurs { font-variant-numeric: tabular-nums; } .bfsz-naechster-kurs--kein-termin { opacity: 0.75; } /* ========================================================================== Die Hauswerte -------------------------------------------------------------------------- ⚠️ WARUM DAS HIER STEHT UND NICHT NUR IN theme.json: Blocksy bringt eigene CSS-Variablen mit und setzt sie mit höherer Spezifität als die Vorgaben aus `theme.json`. Ohne diesen Block erschien die Seite in Blocksys Standardwerten — blaugrauer Text (#3A4F66) in der Systemschrift statt weisser Montserrat, Überschriften 28 statt 52 Pixel. `theme.json` bleibt trotzdem gepflegt: Es versorgt den Blockeditor. Alle Werte sind an der Stage gemessen, nicht geschätzt. ========================================================================== */ :root { /* Schrift */ --theme-font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --theme-font-weight: 400; --theme-font-size: 16px; /* * ⚠️ `1.7em`, NICHT `1.7` — DER UNTERSCHIED ZEIGT SICH ERST BEIM VERERBEN. * * Elementors Kit schreibt `line-height: 1.7em`. Das rechnet sich am Körper * einmal auf 27,2 Pixel aus und wird als *Länge* weitergereicht: Jedes Kind * ohne eigene Angabe erbt 27,2 Pixel, gleich welche Schriftgrösse es hat. * * Die blosse Zahl `1.7` vererbt sich dagegen als Verhältnis und rechnet * sich bei jedem Kind neu aus. Bei 16 Pixeln fällt das nicht auf — die * Akkordeon-Fragen stehen aber in 18 Pixeln und bekamen 30,6 statt 27,2 * Pixel. Jede Frage war zwei Pixel höher als auf der Vorlage. */ --theme-line-height: 1.7em; /* Farben */ --theme-text-color: #FFFFFF; --theme-headings-color: #EDD4BF; --theme-link-initial-color: #E67E22; --theme-link-hover-color: #CF6D17; --theme-content-background-color: #0F0F0F; /* Knöpfe */ --theme-button-background-initial-color: #E67E22; --theme-button-background-hover-color: #CF6D17; --theme-button-text-initial-color: #0A0804; --theme-button-text-hover-color: #0A0804; /* Blocksys Farbpalette auf die Hausfarben */ --theme-palette-color-1: #E67E22; --theme-palette-color-2: #CF6D17; --theme-palette-color-3: #EDD4BF; --theme-palette-color-4: #FFFFFF; --theme-palette-color-8: #0F0F0F; /* Breite und Abstände */ --theme-normal-container-max-width: 1140px; --theme-content-spacing: 1.5em; /* Eigene Werte des Kindthemes */ --bfsz-radius: 10px; --bfsz-flaeche: #1A1A1A; --bfsz-kopfhoehe: 100px; } body, .entry-content { font-family: var(--theme-font-family); font-size: var(--theme-font-size); line-height: var(--theme-line-height); color: var(--theme-text-color); background-color: var(--theme-content-background-color); } /* * ⚠️ AUF TELEFONEN 15 PIXEL — ÜBER DIE VARIABLE, NICHT ÜBER DIE EIGENSCHAFT. * * Weiter oben stand einmal `body, .entry-content { font-size: 15px }` in einer * Medienabfrage. Sie hat nie gegriffen: Die Regel darüber hat dieselbe Stärke, * steht aber später in dieser Datei — und die spätere gewinnt. Gemessen bei * 390 Pixeln Fensterbreite: 16 Pixel in der Kopie, 15 auf der bisherigen * Website. * * Elementors Kit macht es genau so wie hier: Es setzt denselben Wert an * derselben Stelle noch einmal. Über die Variable wirkt es zusätzlich auf * alles, was sonst noch an `--theme-font-size` hängt. */ @media (max-width: 767px) { :root { --theme-font-size: 15px; } } /* -------------------------------------------------------------------------- Überschriften — Grössen und Gewichte wie auf der bisherigen Website H1 52/32 · H2 32/26 · H3 26/20 · jeweils Desktop/Mobil, Zeilenhöhe 1.2 -------------------------------------------------------------------------- */ h1, h2, h3, h4, h5, h6, .entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4, .entry-content h5, .entry-content h6, .wp-block-heading { font-family: "Roboto Slab", Georgia, "Times New Roman", serif; color: var(--theme-headings-color); line-height: 1.2; margin-block-start: 0; } /* * ⚠️ FESTE WERTE, KEINE GESCHÄTZTEN BEREICHE. * * Die erste Fassung arbeitete mit `clamp()` und traf damit fast, aber nicht * genau: H2 wurde 32 statt 34 Pixel gross. Die richtigen Werte stehen in * Elementors Kit-Datei (`post-7371.css`) — sie sind hier eins zu eins * übernommen, samt der Werte für schmale Geräte weiter unten. */ /* * ⚠️ WO DAS KIT SCHWEIGT, DARF HIER NICHTS STEHEN. * * Das Kit nennt ein Gewicht nur für H1 (600) und H3 (500). Für H2 und H4 * schweigt es — und Schweigen heisst bei Elementor nicht „Normalgewicht", * sondern „das Theme entscheidet". Blocksy setzt dort `--theme-font-weight: * 700`, weshalb Überschriften auf der Vorlage fett stehen. * * Die erste Fassung schrieb das Schweigen als `font-weight: 400` aus. Mit * `.entry-content h4` (0,1,1) schlug das Blocksys `h4` (0,0,1) — und rund * zwanzig Überschriften über alle Seiten verloren ihre Fettung: „SBU-anerkannt", * „Kleine Gruppen", „Aktuelle Termine – jetzt buchen". * * Die Zeilen für H2 und H4 nennen deshalb nur noch die Grösse. */ h1, .entry-content h1 { font-size: 52px; font-weight: 600; } h2, .entry-content h2 { font-size: 34px; } h3, .entry-content h3 { font-size: 26px; font-weight: 500; } h4, .entry-content h4 { font-size: 20px; } /* * ⚠️ DIE TELEFONWERTE MÜSSEN HINTER DEN RECHNERWERTEN STEHEN. * * Weiter oben stehen dieselben drei Zeilen schon einmal in einer Medienabfrage. * Sie haben nie gegriffen: gleiche Stärke, aber früher in der Datei — und die * spätere Regel gewinnt, auch ohne Medienabfrage. Gemessen bei 390 Pixeln: * die Überschrift auf /kontakt/ war 52 statt 32 Pixel gross. * * Die Werte sind die des Elementor-Kits (`.elementor-kit-7371 h1` unter * `max-width: 767px`): 32, 26 und 20 Pixel. */ @media (max-width: 767px) { h1, .entry-content h1 { font-size: 32px; } h2, .entry-content h2 { font-size: 26px; } h3, .entry-content h3 { font-size: 20px; } } /* * Verweise im Inhalt tragen die Hausfarbe. * * ⚠️ `.button` MUSS IN DER AUSNAHMELISTE STEHEN. * * WooCommerce macht aus „In den Warenkorb" ein ``. Ohne die * Ausnahme greift diese Regel auch dort — mit drei `:not()` ist sie * spezifischer als jede Knopfregel — und färbte die Beschriftung orange auf * orangem Grund. Auf der Gutscheinseite waren so sechs Knöpfe unlesbar. * * ⚠️ DIE AUSNAHMEN STEHEN IN `:where(...)`, NICHT NACKT. * * Vier `:not()` kosten vier Klassenstufen. Die Regel wog damit 0-5-1 und * schlug jede übernommene Seitenregel — auch die, die stimmen sollten: Der * RAV-Verweis auf der Bar-Profi-Seite wurde orange statt `#EDD4BF`, die * Telefonnummer auf der Kontaktseite orange statt weiss. * * `:where()` wiegt nichts. Die Ausnahmen wirken unverändert — WooCommerces * „In den Warenkorb" bleibt verschont —, aber die Regel fällt auf 0-1-1 * zurück und lässt dem Seitenstil den Vortritt. * * ⚠️ `.added_to_cart` GEHÖRT EBENFALLS HIERHER — ER WURDE ÜBERSEHEN. * * Nach dem Klick auf „In den Warenkorb" hängt WooCommerce den Verweis * „Warenkorb anzeigen" an. Der trägt `class="added_to_cart wc-forward"` — * **ohne** `.button`. Die Ausnahmeliste griff also nicht, und er bekam die * Verweisfarbe: gemessen `rgb(230, 126, 34)` auf `rgb(230, 126, 34)`, orange * auf orange. Blocksy färbt ihn über `.added_to_cart` in seiner Knopfregel; * diese Regel hier stand später und war spezifischer. * * Sichtbar war das als leerer oranger Balken — der einzige Weg zum Warenkorb * nach dem Kauf. Die Vorlage zeigt an derselben Stelle `rgb(10, 8, 4)`. * Ein weiteres `:not()` innerhalb von `:where()` kostet keine Spezifität. */ .entry-content a:where(:not(.wp-block-button__link):not(.wp-element-button):not(.ct-button):not(.button):not(.added_to_cart):not(.bfsz-vg-link)) { color: var(--theme-link-initial-color); /* ⚠️ IM INHALT WIRD NICHT UNTERSTRICHEN. Elementor nimmt jedem Verweis innerhalb seines Bereichs die Unterstreichung (`.elementor a{text-decoration:none}`). Ohne dieselbe Angabe zieht der Browser seinen Standardstrich — auf der Tastings-Seite unter jedem „Alles zum … Tasting →". Wo die Vorlage doch unterstreicht, steht das im Seitenstil und gewinnt gegen diese Regel. */ text-decoration: none; text-decoration-thickness: 1px; text-underline-offset: 2px; } .entry-content a:where(:not(.wp-block-button__link):not(.wp-element-button):not(.ct-button):not(.button):not(.bfsz-vg-link)):hover { color: var(--theme-link-hover-color); } /* -------------------------------------------------------------------------- Knöpfe -------------------------------------------------------------------------- */ /* * Das Grundaussehen der Knöpfe. * * Diese Regel muss stärker sein als Blocksys eigene und schwächer als der * Seitenstil, der die Werte einzelner Knöpfe trägt. Ein Versuch, sie mit * `:where()` ganz aus der Spezifität zu nehmen, ging nach hinten los: Dann * gewann Blocksy, und Überschriften standen plötzlich in Montserrat statt * Roboto Slab. Die Lösung liegt auf der anderen Seite — der Seitenstil wird * verstärkt (siehe `werkzeuge/stile-uebernehmen.py`). */ /* * ⚠️ DIE SHOP-KNÖPFE STEHEN BEWUSST NICHT IN DIESER LISTE. * * „In den Warenkorb" und „Ausführung wählen" erzeugt WooCommerce selbst. Auf * der bisherigen Website tragen sie Blocksys Grundmasse — 163 mal 40 Pixel in * der Systemschrift. Diese Regel machte 245 mal 59 daraus, in Montserrat: für * sich genommen stimmiger, im Vergleich mit der Vorlage aber ein sichtbarer * Unterschied auf jeder Shop-Seite. Sie behalten deshalb, was sie hatten. */ .wp-block-button__link, .wp-element-button, .ct-button { background-color: var(--theme-button-background-initial-color); color: var(--theme-button-text-initial-color); font-family: var(--theme-font-family); /* * ⚠️ DIESE WERTE SIND AM KNOPF GEMESSEN, NICHT AUS DEM KIT ABGELESEN. * * Das Kit nennt 16 Pixel Schrift, Gewicht 500 und 10 Pixel Rundung. Was * auf der Website steht, ist etwas anderes: 15 Pixel, Gewicht 700, 4 Pixel * Rundung, ein Pixel Laufweite und 14 auf 28 Pixel Innenabstand — die * Widget-Vorgaben von Elementor liegen über denen des Kits. * * Mit den Kit-Werten wurden die Knöpfe 59 statt 43 Pixel hoch und deutlich * runder; auf jeder Seite mit mehreren Knöpfen nebeneinander fiel das auf. */ /* * ⚠️ HIER STEHT DER GRUNDWERT, NICHT DER HÄUFIGSTE. * * Die Website kennt zwei Knopfmasse: 16 auf 40 Pixel mit zehn Pixeln * Rundung aus dem Kit, und 14 auf 28 mit vier Pixeln, das die Stildateien * 69-mal einzeln setzen. Ein erster Versuch machte den häufigeren zum * Grundwert — und traf damit alle Knöpfe falsch, die beim Kit bleiben. * * Richtig ist: Das Kit ist die Grundlage, die Stildatei überschreibt sie * dort, wo sie es tut. */ font-size: 16px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.4px; border-radius: 10px; padding: 16px 40px; /* * ⚠️ EIN KNOPF ERBT SONST DIE ZEILENHÖHE DES FLIESSTEXTS. * * 1,7 mal 15 Pixel sind gut 25 statt 15 — zusammen mit dem Innenabstand * wurde der Knopf 54 statt 43 Pixel hoch. Bei einer Reihe nebeneinander * fällt das sofort auf, weil alle gleichmässig zu wuchtig wirken. */ line-height: 1; transition: background-color .3s ease, color .3s ease, transform .12s ease, box-shadow .3s ease; } .wp-block-button__link:hover, .wp-element-button:hover, .ct-button:hover { background-color: var(--theme-button-background-hover-color); color: var(--theme-button-text-hover-color); box-shadow: 0 2px 8px rgba(0, 0, 0, .18); } .wp-block-button__link:active, .wp-element-button:active, .ct-button:active { background-color: #B85F13; transform: translateY(1px); box-shadow: none; } @media (max-width: 767px) { .wp-block-button__link, .wp-element-button, .ct-button { font-size: 14px; padding: 12px 24px; } } /* -------------------------------------------------------------------------- Bildkacheln -------------------------------------------------------------------------- Ersetzen Elementors Handlungsaufruf in der Ausprägung „cover": ein Bild mit Verweis, das als Ganzes anklickbar ist. Auf der Kursübersicht sind das die Kurskacheln. -------------------------------------------------------------------------- */ .bfsz-bildkachel { display: grid; align-content: end; gap: .25rem; padding: 1.25rem; border-radius: var(--bfsz-radius, 10px); overflow: hidden; transition: transform .25s ease, box-shadow .25s ease; } .bfsz-bildkachel__verweis { display: block; text-decoration: none; color: inherit; } .bfsz-bildkachel__verweis:hover .bfsz-bildkachel { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0, 0, 0, .35); } .bfsz-bildkachel__titel { font-family: "Roboto Slab", Georgia, serif; font-size: 1.25rem; line-height: 1.25; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .6); } .bfsz-bildkachel__text { font-size: .95rem; color: rgba(255, 255, 255, .92); text-shadow: 0 1px 3px rgba(0, 0, 0, .6); } /* Blocksatz — auf dieser Website die häufigste Textausrichtung überhaupt. Der Blockeditor kennt die Klasse, bringt aber nicht überall eine Regel mit. */ .entry-content .has-text-align-justify { text-align: justify; hyphens: auto; } /* Inhaltsbreite als Variable, damit der Konverter sie setzen kann. */ :root { --bfsz-inhaltsbreite: 1140px; } /* ========================================================================== Fusszeile -------------------------------------------------------------------------- Die Werte sind an der bisherigen Website gemessen. Wichtig ist, was hier NICHT steht: Ein `text-align: center` auf dem ganzen Fussbereich. Der erste Versuch tat das — und rückte damit auch die Spaltenüberschriften, die Kontaktangaben und den Newsletter-Baustein in die Mitte, die dort alle linksbündig stehen. Mittig ist nur die Schlusszeile. ========================================================================== */ /* -------------------------------------------------------------------------- Der Aufbau: ein zentrierter Inhaltsbereich mit vier ungleichen Spalten -------------------------------------------------------------------------- ⚠️ OHNE DIESE MASSE LÄUFT DIE FUSSZEILE VON RAND ZU RAND. Auf der Vorlage steht der Fussinhalt in einem Bereich von 1140 Pixeln, mittig im Fenster, mit 40 Pixeln zwischen den Spalten. Die erste Spalte — Logo, Symbole, Partner — ist mit 340 Pixeln breiter als die drei Linklisten mit je 227. Ohne den inneren Bereich klebte das Logo am linken Fensterrand, die Spalten waren gleich breit und der ganze Fussbereich 643 statt 837 Pixel hoch. -------------------------------------------------------------------------- */ .bfsz-fusszeile > .wp-block-group:first-child { max-width: var(--wp--style--global--content-size, 1140px); margin-inline: auto; gap: 40px; align-items: flex-start; } /* ⚠️ VERHÄLTNIS STATT FESTER BREITEN — SONST BRICHT DIE VIERTE SPALTE UM. * * 340 + 3 × 227 + 3 × 40 Abstand ergibt 1141 Pixel bei 1140 verfügbaren. Ein * Pixel zu viel — und Flexbox bricht die Zeile um, *bevor* es schrumpft. * `flex-shrink` hilft dagegen nicht: Es wirkt erst innerhalb einer Zeile, nicht * gegen deren Entstehung. Die vierte Spalte („Kontakt") rutschte deshalb auf * jeder Seite der Website in eine eigene Zeile, und die Fusszeile wurde 384 * Pixel höher als auf der Vorlage. * * Mit `flex-basis: 0` und Wachstumsfaktoren im gewünschten Verhältnis teilen * sich die vier Spalten den Platz, der nach Abzug der Abstände übrig bleibt. * Das Ergebnis sind dieselben Breiten wie auf der Vorlage — nur eben als * Bruchteile, die immer aufgehen. */ .bfsz-fusszeile > .wp-block-group:first-child > .wp-block-group { flex: 227 1 0; min-width: 0; } /* Die erste Spalte trägt Logo, Symbolreihe und Partnerlogo und ist breiter. * * ⚠️ SIE MUSS SCHRUMPFEN DÜRFEN — UM EIN EINZIGES PIXEL. * * 340 + 3 × 227 + 3 × 40 Abstand ergibt 1141 Pixel bei 1140 verfügbaren. Mit * `flex: 0 0` war die erste Spalte unnachgiebig, und weil ein Pixel fehlte, * rutschte die vierte Spalte („Kontakt") in eine eigene Zeile — auf jeder * Seite der Website, und die Fusszeile wuchs dadurch um 384 Pixel. * * Mit `0 1` verteilt sich das eine Pixel auf alle vier Spalten. Sichtbar ist * davon nichts; die Vorlage rechnet mit denselben 1141 Pixeln und löst es * über Bruchteile in ihren Prozentbreiten. */ .bfsz-fusszeile > .wp-block-group:first-child > .wp-block-group:first-child { flex: 340 1 0; } @media (max-width: 991px) { .bfsz-fusszeile > .wp-block-group:first-child { gap: 30px; } .bfsz-fusszeile > .wp-block-group:first-child > .wp-block-group, .bfsz-fusszeile > .wp-block-group:first-child > .wp-block-group:first-child { flex: 1 1 45%; } } @media (max-width: 600px) { .bfsz-fusszeile > .wp-block-group:first-child > .wp-block-group, .bfsz-fusszeile > .wp-block-group:first-child > .wp-block-group:first-child { flex: 1 1 100%; } } /* Alle Werte an der Vorlage gemessen: Verweise 15 Pixel weiss, Spalten- überschriften 26 Pixel Roboto Slab, alles linksbündig. */ .bfsz-fusszeile a:not(.wp-block-button__link):not(.wp-element-button), .bfsz-fusszeile li, .bfsz-fusszeile p { font-size: 15px; color: #FFFFFF; } .bfsz-fusszeile a:not(.wp-block-button__link):not(.wp-element-button) { text-decoration: none; } .bfsz-fusszeile a:not(.wp-block-button__link):not(.wp-element-button):hover { color: var(--theme-link-initial-color); } .bfsz-fusszeile .wp-block-list { list-style: none; padding-left: 0; margin-left: 0; } /* Die Zeile über dem Partnerlogo ist klein und golden gesetzt — sie ist eine Beschriftung, keine Überschrift, und tritt entsprechend zurück. */ .bfsz-fusszeile .bfsz-fusszeile__partner { font-size: 10px; font-weight: 600; color: rgba(201, 169, 110, 0.75); /* An der Vorlage gemessen: Versalien mit 2,5 Pixel Sperrung. Ohne beides liest sich die Zeile als gewöhnlicher Satz statt als Beschriftung. */ text-transform: uppercase; letter-spacing: 2.5px; } /* -------------------------------------------------------------------------- Der Newsletter-Kasten bringt seine eigenen Grössen mit -------------------------------------------------------------------------- Die Regel weiter oben setzt jeden Verweis der Fusszeile auf 15 Pixel — das stimmt für die Spaltenverweise, trifft aber auch den Datenschutzhinweis unter dem Anmeldeformular. Dessen Kasten gibt inline 12 Pixel vor, und auf der Vorlage erbt der Verweis diese Grösse. In der Kopie wuchs er auf 15. ⚠️ Die Ausgangsstärke muss mindestens (0,3,1) erreichen, sonst gewinnt die Regel oben: ihre beiden `:not(...)` zählen als Klassen mit. -------------------------------------------------------------------------- */ .bfsz-fusszeile .bfsz-nl a:not(.wp-block-button__link):not(.wp-element-button) { font-size: inherit; } /* Die Schlusszeile: kleiner gesetzt, Verweise weiss statt in der Hausfarbe. */ .bfsz-fusszeile .bfsz-fusszeile__schluss { max-width: var(--wp--style--global--content-size, 1140px); margin-inline: auto; } .bfsz-fusszeile .bfsz-fusszeile__schluss, .bfsz-fusszeile .bfsz-fusszeile__schluss p { font-size: 14px; text-align: center; } .bfsz-fusszeile .bfsz-fusszeile__schluss a { color: #FFFFFF; font-size: 14px; text-decoration: none; } .bfsz-fusszeile .bfsz-fusszeile__schluss a:hover { color: var(--theme-link-initial-color); text-decoration: underline; } /* Das Partnerlogo hat eine feste Breite; ohne sie wächst es auf die volle Spaltenbreite und dominiert den Fussbereich. */ .bfsz-fusszeile img[src*="sbu-logo"] { width: 138px; max-width: 100%; height: auto; } /* Das Partnerlogo sitzt mittig in einem Kasten von 170 Pixeln, nicht am linken Rand der Spalte. */ /* * ⚠️ `:has()` OHNE `>` TRIFFT JEDEN VORFAHREN. * * `.wp-block-group:has(img[src*="sbu-logo"])` passt nicht nur auf den Kasten * um das Logo, sondern auf jede Gruppe darüber — die ganze erste Spalte * schrumpfte auf 170 Pixel, und mit ihr sämtliche Logos: das Hauptlogo von * 245 auf 116 Pixel, das Partnerlogo von 138 auf 65. * * Mit dem Kindkombinator trifft die Regel genau eine Ebene: die Gruppe, deren * unmittelbares Kind die Bildfigur ist. */ .bfsz-fusszeile .wp-block-group:has(> figure img[src*="sbu-logo"]), .bfsz-fusszeile .wp-block-group:has(> .wp-block-image img[src*="sbu-logo"]) { width: 170px; display: flex; justify-content: center; /* Das Siegel steht auf einer weissen Karte — an der Vorlage gemessen: 170 × 108 Pixel, 10 Pixel Rundung, 12 auf 16 Pixel Innenabstand. Ohne sie steht das dunkelblaue Logo auf schwarzem Grund und ist kaum zu erkennen. */ background: #FFFFFF; border-radius: 10px; padding: 12px 16px; box-sizing: border-box; } /* Auch Figur und Verweis darin sind mittig gesetzt — sonst sitzt das Bild zwar im richtigen Kasten, aber an dessen linkem Rand. */ .bfsz-fusszeile figure:has(img[src*="sbu-logo"]), .bfsz-fusszeile figure:has(img[src*="sbu-logo"]) a { display: block; margin-inline: auto; text-align: center; } /* -------------------------------------------------------------------------- Die beiden Logos -------------------------------------------------------------------------- Blocksy liefert Logos in seiner Voreinstellung von 50 Pixel Höhe aus. Auf der bisherigen Website sind sie grösser: im Kopfbereich 65 Pixel hoch (258 breit), in der Fusszeile 62 (245 breit). Der Unterschied fällt auf jeder Seite auf, weil das Logo das Erste ist, was man sieht. -------------------------------------------------------------------------- */ .site-logo-container .default-logo, .site-logo-container .logo-transparent, header .default-logo { height: 65px; width: auto; max-width: 100%; } .bfsz-fusszeile img[src*="image-13"] { width: 245px; max-width: 100%; height: auto; } @media (max-width: 767px) { .site-logo-container .default-logo, header .default-logo { height: 46px; } } /* -------------------------------------------------------------------------- Reihen -------------------------------------------------------------------------- Der Nachbau von Elementors Verhalten: Container in einer Reihe sind je 100 Prozent breit und schrumpfen gleichmässig auf ihren Anteil. Drei Karten nebeneinander bekommen so je ein Drittel, ohne dass irgendwo ein Drittel ausgerechnet und hingeschrieben werden müsste. `min-width: 0` gehört dazu: Ohne diese Angabe verweigert ein Flex-Element das Schrumpfen unter die Breite seines längsten Wortes, und lange Titel sprengen die Aufteilung. -------------------------------------------------------------------------- */ .bfsz-reihe > .wp-block-group, .bfsz-reihe > .wp-block-columns, .bfsz-reihe > .wp-block-image, .bfsz-reihe > figure { width: 100%; flex-shrink: 1; min-width: 0; } /* * ⚠️ EINE REIHE OHNE UMBRUCH KANN IHRE KINDER AUF NULL PRESSEN. * * `min-width: 0` ist nötig, damit ein langes Wort das Schrumpfen nicht * blockiert. Bei einem Bild gibt es aber kein Wort, das eine Untergrenze * setzt: In einer Reihe mit mehreren Spalten schrumpfte auf schmaleren * Bildschirmen der Kasten um ein Porträtfoto auf null Pixel — das Bild war * schlicht verschwunden, ohne dass irgendwo etwas fehlte. * * Ein Bildkasten darf deshalb nicht unter eine sinnvolle Breite fallen. */ .bfsz-reihe > .wp-block-group:has(> figure img), .bfsz-reihe > .wp-block-group:has(> .wp-block-image), .bfsz-reihe > .wp-block-image, .bfsz-reihe > figure { min-width: 80px; } /* * ⚠️ EIN KNOPF DARF NICHT UNTER SEINE BESCHRIFTUNG SCHRUMPFEN. * * In einer Reihe ohne Umbruch schrumpfen alle Kinder gemeinsam. Ein Knopf hat * dabei nichts, was ihn aufhielte: „Kursdaten anzeigen" wurde 92 statt 217 * Pixel breit und dafür 304 statt 42 hoch — ein hochkanter Streifen mit * senkrecht gestapelten Wörtern. */ /* * ⚠️ KACHELN EINER REIHE SIND GLEICH HOCH. * * Elementor streckt die Kinder einer Reihe auf gleiche Höhe — das ist dort die * Voreinstellung, und die Vorlage rendert deshalb gar kein `align-items`. In * den Rohdaten steht bei manchen Reihen trotzdem `center`; wer das übernimmt, * lässt jede Kachel ihre Inhaltshöhe nehmen. Auf der Startseite standen so * zwei Kacheln 185 Pixel hoch und die dritte 209, weil deren Text eine Zeile * mehr braucht — sichtbar als eine Karte, die aus der Reihe fällt. * * `align-self` am Kind schlägt `align-items` am Elternteil, auch dessen * Inline-Wert. Kacheln mit ausdrücklich eigener Ausrichtung bleiben * unberührt, weil deren Wert ebenfalls am Kind steht. */ .bfsz-reihe > .wp-block-group:not([style*="align-self"]) { align-self: stretch; } /* * ⚠️ NUR DIREKTE KINDER, UND OHNE MINDESTBREITE. * * Ein erster Versuch gab jedem Knopfblock in einer Reihe `min-width: * max-content`. Damit war er unschrumpfbar — und verdrängte seine Nachbarn: * Auf der Startseite schrumpften die Bilder einer Reihe von 293 auf 118 Pixel * und rutschten an den rechten Rand. * * Gegen das Zerquetschen des Knopfes genügt der Umbruch der Beschriftung * weiter unten; mehr braucht es nicht. */ .bfsz-reihe > .wp-block-buttons, .bfsz-spalte > .wp-block-buttons { flex-shrink: 0; max-width: 100%; } /* * ⚠️ IN EINER REIHE OHNE UMBRUCH MUSS DER KNOPF DOCH SCHRUMPFEN DÜRFEN. * * Elementor gibt seinen Kindern `flex: 0 1 auto` und `min-width: 0` — sie * schrumpfen also, wenn der Platz nicht reicht, und die Beschriftung bricht * um. Auf `/tastings/` brauchen drei Knöpfe zusammen 822 Pixel in einer * 800 Pixel breiten Reihe ohne Umbruch. Die Vorlage schrumpft sie um die * fehlenden 22 Pixel, wodurch ihre Beschriftungen zweizeilig werden: 58, 58 * und 62 Pixel hoch statt 43, 43 und 47. * * Ohne diese Regel bliebe die Reihe einzeilig und liefe links und rechts je * elf Pixel aus dem Container hinaus. * * Die Regel greift nur, wo beides zutrifft — Reihe ohne Umbruch und zu wenig * Platz. Über zwölf geprüfte Seiten gibt es fünf solche Reihen; nur diese eine * ist zu eng, die vier anderen bleiben unverändert. */ .bfsz-reihe.is-nowrap > .wp-block-buttons { flex-shrink: 1; } /* * ⚠️ HIER STAND EINMAL `white-space: nowrap` — DAS WAR FALSCH. * * Die Absicht war, den Knopf gegen das Zerquetschen zu schützen. Der Preis war * hoch: Ein Knopf, dessen Beschriftung breiter ist als sein Platz, wuchs * darüber hinaus und schob sich auf den nächsten. Gemessen waren es 19 * Überlappungen auf 14 Seiten, am auffälligsten die drei Knöpfe im Kopfbereich * der Startseite. * * Die bisherige Website macht es anders: Elementor lässt den Text umbrechen * (`white-space: normal`, der Vorgabewert) und drückt die Zeilenhöhe auf * 15 Pixel. Zwei Zeilen à 15 plus 28 Pixel Innenabstand ergeben dieselben * 58 Pixel Höhe wie ein einzeiliger Knopf — deshalb fällt der Umbruch dort * nicht auf. Genau das ist der Grund, warum ein Knopf mit 240 Pixel Breite * seine 21 Zeichen fasst, ohne die Nachbarn anzurühren. * * Es bleibt also beim Vorgabewert. Wer den Umbruch wieder unterbinden möchte, * muss den Knöpfen vorher die Breiten der Vorlage geben — sonst kehren die * Überlappungen zurück. */ /* Reicht der Platz trotzdem nicht, ist ein Umbruch besser als ein zerdrücktes Layout. */ @media (max-width: 1100px) { .bfsz-reihe { flex-wrap: wrap; } .bfsz-reihe > .wp-block-group { flex: 1 1 300px; } } /* * Auf Telefonen stehen die Spalten untereinander — wie in der Vorlage. * * ⚠️ HIER IST `!important` AUSNAHMSWEISE RICHTIG. * * Diese Regel stand schon einmal hier, in der Form `.bfsz-reihe { * flex-direction: column }`, und blieb wirkungslos. Der Grund liess sich erst * am Element selbst ablesen: Der Konverter schreibt die Richtung nicht in eine * Regel, sondern als Attribut an den Container — * *
* * Ein solches Attribut schlägt jede Regel aus einer Datei, ganz gleich wie * viele Klassen man aneinanderreiht. Der Browser bestätigte das: Die Regel * passte, die Medienabfrage galt, sie stand zuletzt in der Kaskade — und * verlor trotzdem. * * Was das anrichtete, gemessen bei 390 Pixel: * /externe-schulungen-consulting/ elf Kartenreihen blieben zweispaltig, * Karten 130 statt 310 Pixel breit * /bar-profi-intensivkurs/ drei Karten nebeneinander, die erste * /zigarren-seminar/ bei x = −36, also links aus dem Bild * Die Vorlage stellt an genau diesen Stellen alles untereinander. * * Da der Konverter für Telefone gar keine eigene Richtung kennt (`_mobile` * wird bei `flex_direction` nicht ausgewertet), geht durch das Überschreiben * keine bewusste Einstellung verloren. * * `flex-wrap` muss mit, sonst hält `is-nowrap` die Reihe weiter zusammen. * Die Knöpfe (`.wp-block-buttons`) bleiben bewusst aussen vor — für sie gilt * die Regel weiter oben. */ @media (max-width: 767px) { .bfsz-reihe.bfsz-reihe { flex-direction: column !important; flex-wrap: wrap !important; /* * Manche Reihen sind keine Flex-, sondern Rasterbehälter * (`display:grid`) — dort laufen die beiden Angaben darüber ins Leere. * Auf `/externe-schulungen-consulting/` waren es elf solche Raster mit * zwei Spalten, die auch auf dem Handy zweispaltig blieben. Elementor * stellt Raster auf Telefonen einspaltig; die Angabe ist für * Flex-Behälter wirkungslos und stört dort nicht. */ grid-template-columns: minmax(0, 1fr) !important; } .bfsz-reihe.bfsz-reihe > .wp-block-group, .bfsz-reihe.bfsz-reihe > .wp-block-columns, .bfsz-reihe.bfsz-reihe > .wp-block-image, .bfsz-reihe.bfsz-reihe > figure { flex-basis: auto !important; width: 100% !important; max-width: 100% !important; } } /* Zentrierte Bilder — Gutenberg setzt die Klasse, die Ausrichtung selbst kommt vom Theme. Blocksy bringt sie im Blockinhalt nicht überall mit. */ .entry-content .wp-block-image.aligncenter, .entry-content figure.aligncenter { margin-inline: auto; text-align: center; /* In einem Flex-Container zieht `margin: auto` allein nicht — dort entscheidet `align-self` über die Lage quer zur Richtung. */ align-self: center; } .entry-content .wp-block-image.aligncenter img { margin-inline: auto; } .entry-content .wp-block-image.alignright { margin-inline-start: auto; } /* -------------------------------------------------------------------------- Flex-Spalten -------------------------------------------------------------------------- Gegenstück zu `.bfsz-reihe`: Setzt ein Container eine Ausrichtung, wird er zum Flex-Container — und dann sind seine Kinder nur noch so breit wie ihr Inhalt. Bei Elementor füllen Widgets immer die Breite ihres Containers. Ohne diese Regel steht eine zentrierte Überschrift zwar in sich mittig, aber am linken Rand. -------------------------------------------------------------------------- */ .bfsz-spalte > * { width: 100%; max-width: 100%; } /* Symbole behalten ihre eigene Breite — sie sollen nicht auf die volle Spaltenbreite wachsen, sondern an ihrem Platz stehen. */ .bfsz-spalte > .bfsz-icon, .bfsz-spalte > .wp-block-image { width: auto; } /* -------------------------------------------------------------------------- Symbole in Kreis und Rahmen -------------------------------------------------------------------------- Elementors drei Darstellungsarten, nachgebaut. Die Masse stammen aus Elementors eigenem Stylesheet: ein halbes Geviert Innenabstand, drei Pixel Rand. So bleibt das Verhältnis von Zeichen zu Kreis bei jeder Schriftgrösse gleich. -------------------------------------------------------------------------- */ /* * ⚠️ DOPPELTE KLASSE — SONST STRECKT DER SEITENSTIL DEN KREIS. * * Die Stilübernahme setzt für Container `display: flex` mit doppelter Klasse * (Spezifität 0-2-0). Ein Symbolträger ist kein Container, wird von dieser * Regel aber mitgetroffen: Aus `inline-flex` wurde `flex`, und im * Flex-Elternteil streckte sich der Kreis auf die volle Zeilenhöhe — 42 Pixel * breit, 139 hoch. Mit doppelter Klasse hält diese Regel dagegen. */ .bfsz-icon--framed.bfsz-icon--framed, .bfsz-icon--stacked.bfsz-icon--stacked { display: inline-flex; align-items: center; justify-content: center; padding: 0.5em; box-sizing: content-box; flex: 0 0 auto; align-self: center; } .bfsz-icon--framed { border: 3px solid currentColor; background-color: transparent; } /* Der Grund kommt jetzt als eigener Wert aus dem Konverter; hier bleibt nur die Rückfallebene für Symbole ohne eigene Farbe. */ .bfsz-icon--stacked { background-color: var(--theme-link-initial-color); border: 0; } /* Beim gefüllten Symbol trägt der Grund die Farbe, das Zeichen ist weiss — so hält es Elementor, und so steht es auf der Über-uns-Seite. Ein dunkles Zeichen auf orangem Grund sieht zwar auch ordentlich aus, ist aber nicht, was die Vorlage zeigt. */ .bfsz-icon--stacked .bfsz-symbol { fill: #FFFFFF; color: #FFFFFF; } .bfsz-icon--rund { border-radius: 50%; } .bfsz-icon--eckig { border-radius: 0; } /* -------------------------------------------------------------------------- Der innere Bereich eines Bildbereichs -------------------------------------------------------------------------- Entspricht Elementors `e-con-inner`: Der Bildbereich selbst reicht von Fensterrand zu Fensterrand, sein Inhalt bleibt auf Lesebreite. Alle Prozentbreiten der Kinder beziehen sich auf diesen inneren Bereich — ohne ihn rechnen sie gegen die Fensterbreite und fallen zu gross aus. -------------------------------------------------------------------------- */ .bfsz-bildbereich__innen { width: 100%; max-width: var(--wp--style--global--content-size, 1140px); margin-inline: auto; display: flex; /* ⚠️ DIE RICHTUNG WIRD GEERBT, NICHT FESTGELEGT. Elementors innerer Bereich übernimmt die Richtung seines Containers. Fest auf Spalte gestellt, wirken `align-items` und `justify-content` auf der jeweils falschen Achse: Auf der Startseite ordnet Elementor in einer Reihe an und zentriert waagrecht (`justify-content: center`) — als Spalte gelesen zentrierte das senkrecht, und `align-items: flex-end` schob den ganzen Hero-Inhalt an den rechten Rand, 171 Pixel neben seinen Platz. */ flex-direction: inherit; gap: inherit; align-items: inherit; justify-content: inherit; } /* Die Lage eines Symbols in seinem Container. `align-self` allein genügt nicht: Es wirkt nur in Flex-Containern, und die meisten Kacheln sind keine. Ein automatischer Rand rückt das Symbol auch im Blockfluss an seinen Platz — dafür braucht es eine eigene Zeile und eine Breite, die sich nach dem Inhalt richtet. */ .bfsz-icon--mittig.bfsz-icon--mittig { display: flex; width: -moz-fit-content; width: fit-content; margin-inline: auto; } .bfsz-icon--rechts { display: flex; width: -moz-fit-content; width: fit-content; margin-inline-start: auto; } .bfsz-icon--links { display: flex; width: -moz-fit-content; width: fit-content; margin-inline-end: auto; } /* -------------------------------------------------------------------------- Akkordeons -------------------------------------------------------------------------- Die Fragen stehen untereinander und füllen die Breite ihres Containers — auch dann, wenn dieser eine Reihe ist. Ohne die Breitenangabe schrumpft das Akkordeon in einer Reihe auf die Breite seines längsten Wortes. -------------------------------------------------------------------------- */ .bfsz-akkordeon { display: flex; flex-direction: column; width: 100%; min-width: 0; } .bfsz-reihe > .bfsz-akkordeon { flex: 1 1 100%; } .bfsz-akkordeon .wp-block-details { width: 100%; margin-block-end: var(--n-accordion-item-title-space-between, 5px); } /* -------------------------------------------------------------------------- Die Fragen selbst -------------------------------------------------------------------------- Alle Werte an der bisherigen Website gemessen: 15 Pixel Montserrat in der Hausfarbe auf dunklem Grund, 15 Pixel Innenabstand, ein zurückhaltender Rand in derselben Farbe und 15 Pixel Rundung. Ohne diese Regeln erschienen die Fragen als weisse Zeilen ohne Kasten — der Blockeditor bringt für `details` kein Aussehen mit, und Elementors Stile hingen an dessen eigenen Klassen. -------------------------------------------------------------------------- */ /* Grundaussehen — jeder Seitenstil darf es überschreiben, denn die Fragen sehen nicht auf allen Seiten gleich aus. */ :where(.bfsz-akkordeon summary, .entry-content .wp-block-details > summary) { display: flex; align-items: center; gap: .6rem; width: 100%; padding: var(--n-accordion-padding, 15px); font-family: var(--theme-font-family); /* * Elementor steuert die Fragengrösse über eine eigene Variable, die je * Akkordeon gesetzt ist — 18 Pixel auf der Team-Event-Seite, 15 auf der * FAQ-Seite. Der Seitenstil bringt sie mit; hier steht nur der Rückfall. */ font-size: var(--n-accordion-title-font-size, 15px); font-weight: 400; /* * ⚠️ EINE FRAGE IST WEISS, SOLANGE SIE ZU IST. * * Elementor führt drei Farben je Akkordeon: die normale, die beim * Überfahren und die der geöffneten Frage. Die Hausfarbe gehört nur der * geöffneten. Eine pauschal orange Fragenliste sieht aus, als wäre alles * gleichzeitig aktiv, und man erkennt nicht mehr, welche Frage offen ist. */ color: var(--n-accordion-title-normal-color, #FFFFFF); background-color: var(--bfsz-flaeche, #1A1A1A); border: 1px solid rgba(230, 126, 34, .16); border-radius: var(--n-accordion-border-radius, 15px); cursor: pointer; list-style: none; transition: background-color .2s ease, border-color .2s ease; } .bfsz-akkordeon summary:hover, .entry-content .wp-block-details > summary:hover { color: var(--n-accordion-title-hover-color, #FFFFFF); background-color: #222; border-color: rgba(230, 126, 34, .35); } /* Die geöffnete Frage trägt die Hausfarbe — daran erkennt man sie. */ .bfsz-akkordeon details[open] > summary, .entry-content .wp-block-details[open] > summary { color: var(--n-accordion-title-active-color, var(--theme-link-initial-color)); } /* Der Standardpfeil der Browser passt nicht ins Bild; stattdessen ein Zeichen, das den Zustand mitteilt und sich beim Öffnen dreht. */ .bfsz-akkordeon summary::-webkit-details-marker, .entry-content .wp-block-details > summary::-webkit-details-marker { display: none; } /* ⚠️ DAS ZEICHEN STEHT LINKS VOR DER FRAGE, NICHT RECHTS. * * Elementor setzt ein Plus vor jede geschlossene Frage und ein Minus vor die * offene — 13 auf 15 Pixel, unmittelbar vor dem Text (gemessen: Zeichen bei * x = 615, Text bei x = 638). Die Kopie hatte stattdessen ein Pfeilchen am * rechten Rand, das sich beim Öffnen drehte. Das ist eine andere Gestik: Der * Blick springt beim Lesen nach rechts statt beim Zeichen zu beginnen. * * Gezeichnet wird mit Rändern statt mit einem Bild — zwei Striche genügen, * und die Farbe folgt der Schrift. */ /* ⚠️ DAS ZEICHEN WIRD GEMALT, NICHT GESETZT. * * Ein erster Anlauf legte den senkrechten Strich als absolut positioniertes * `::after` über das `::before`. Ohne Bezugspunkt am `summary` richtete er sich * am nächsten positionierten Vorfahren aus und stand neben statt auf dem * waagrechten Strich — aus dem Plus wurde ein „|—". * * Zwei Farbverläufe in einem Element brauchen keinen Bezugspunkt: Der eine * zeichnet den waagrechten Strich, der andere den senkrechten, beide mittig. * Beim Öffnen bleibt nur der waagrechte übrig — aus dem Plus wird ein Minus. */ .bfsz-akkordeon summary::before, .entry-content .wp-block-details > summary::before { content: ""; flex: 0 0 auto; width: 13px; height: 13px; margin-inline-end: 10px; align-self: center; background: linear-gradient(currentColor, currentColor) center / 13px 2px no-repeat, linear-gradient(currentColor, currentColor) center / 2px 13px no-repeat; } .bfsz-akkordeon details[open] > summary::before, .entry-content .wp-block-details[open] > summary::before { background: linear-gradient(currentColor, currentColor) center / 13px 2px no-repeat; } /* Die Antwort steht eingerückt unter der Frage, ohne eigenen Kasten. */ .bfsz-akkordeon details > *:not(summary), .entry-content .wp-block-details > *:not(summary) { padding: 14px 15px 4px; font-size: 16px; line-height: 1.7; color: var(--theme-text-color); } /* -------------------------------------------------------------------------- Vorschaubilder der Videogalerie -------------------------------------------------------------------------- ⚠️ HIER WIRD EIN NEBENEFFEKT DER VORLAGE NACHGEBAUT. Das Videogalerie-Plugin setzt seine Vorschaubilder auf `height: 100%`, damit sie den Rahmen füllen. Auf der bisherigen Website kommt diese Regel nie zum Zug: Elementor bringt ein pauschales `.elementor img { height: auto }` mit und überschreibt sie. Sichtbar ist dort ein Bild im Seitenverhältnis 4:3 in einem hochkanten Rahmen — 310 mal 233 Pixel in einem 310 mal 551 grossen Kasten. Ohne Elementor griffe die Plugin-Regel, und die Bilder füllten den Rahmen. Das sähe aufgeräumter aus, wäre aber ein anderer Anblick als die Vorlage. Wer das ändern möchte, streicht diese Regel — dann füllen die Vorschaubilder ihren Rahmen. -------------------------------------------------------------------------- */ img.bfsz-vg-poster, .bfsz-vg .bfsz-vg-poster { height: auto; } /* -------------------------------------------------------------------------- Produktbilder im Gutscheinshop -------------------------------------------------------------------------- Auf der bisherigen Website stehen die Produktbilder im Hochformat 3:4 — 360 mal 480 Pixel. Ohne diese Angabe zeigt Blocksy sie im Querformat 4:3, und aus einer Reihe hochkanter Karten wird eine flache. Die Quellbilder sind quadratisch; das Format entsteht erst beim Zuschnitt. -------------------------------------------------------------------------- */ li.product .ct-media-container, li.product > figure { aspect-ratio: 3 / 4; display: block; overflow: hidden; } li.product .ct-media-container img, li.product > figure img, .woocommerce ul.products li.product img, .wc-block-grid__product-image img { width: 100%; height: 100%; object-fit: cover; } /* -------------------------------------------------------------------------- Bilder bleiben in ihrer Spalte -------------------------------------------------------------------------- Ein Bild mit eigener Breitenangabe im Markup (width="730") wächst darüber hinaus, wenn nichts es begrenzt — auf der Champagner-Seite lief es 730 statt 530 Pixel breit und schob den Text zur Seite. Elementor bringt dieselbe Begrenzung von Haus aus mit. -------------------------------------------------------------------------- */ .entry-content img, .entry-content figure, .bfsz-fusszeile img { max-width: 100%; height: auto; } /* Ausgenommen: Bilder, die ihren Rahmen bewusst füllen sollen. */ .entry-content .bfsz-vg-poster, .entry-content li.product img { max-width: none; } /* -------------------------------------------------------------------------- Galeriekacheln im festen Zuschnitt -------------------------------------------------------------------------- Elementors Galerie legt jedes Bild in eine Fläche mit festem Seitenverhältnis (Standard 3:2) und deckt sie mit `cover` ab. Alle Kacheln einer Reihe sind damit gleich hoch — quer wie hoch aufgenommene Fotos. Die Blockgalerie tut das nicht: Sie lässt jedem Bild seine Form. Auf `/galerie/` waren 15 der 22 Bilder hochformatig und wurden 546 statt 246 Pixel hoch; die Seite wuchs um 47 Prozent, der Fotoanteil von 35 auf 50 Prozent. ⚠️ Die Klasse steht doppelt. `.entry-content figure{height:auto}` weiter oben hat dieselbe Ausgangsstärke und stünde später — die Kacheln fielen wieder in ihre eigene Höhe zurück. -------------------------------------------------------------------------- */ /* ⚠️ DER ABSTAND MUSS DERSELBE SEIN, MIT DEM DIE SPALTEN GERECHNET WERDEN. Die Kernregel bemisst jede Kachel als `calc(33.33% - 16px * .667)`; das Theme setzte aber `gap: 24px`. Drei Kacheln plus zwei Lücken ergaben damit 1155 statt 1140 Pixel — es passten nur zwei in die Reihe, und weil Kacheln wachsen dürfen, füllten sie die Breite mit je 558 statt 369 Pixeln. Die Galerie wurde dadurch doppelt so hoch wie auf der Vorlage. */ .bfsz-galerie.bfsz-galerie { gap: var(--wp--style--block-gap, 16px); } .bfsz-galerie.bfsz-galerie figure.wp-block-image, .bfsz-galerie.bfsz-galerie figure.wp-block-image > a, .bfsz-galerie.bfsz-galerie figure.wp-block-image img { aspect-ratio: var(--bfsz-galerie-verhaeltnis, 3 / 2); height: 100%; } .bfsz-galerie.bfsz-galerie figure.wp-block-image img { width: 100%; object-fit: cover; object-position: center; } /* Elementor bricht die Galerie auf zwei Spalten um, nicht auf eine. */ @media (max-width: 1024px) { .bfsz-galerie.bfsz-galerie figure.wp-block-image { width: calc(50% - var(--wp--style--block-gap, 16px) * 0.5); } } /* -------------------------------------------------------------------------- Kopfzeile: Werte der Vorlage -------------------------------------------------------------------------- An stageprojects.ch gemessen und gegen die Kopie gestellt: Hintergrund der Zeile #000000 → #0F0F0F Menüpunkte Versalien → gemischt Menüpunkte Gewicht 600 → 700 Aktiver Punkt #E67E22 → #CF6D17 Das sind Blocksy-Einstellungen, die beim Klonen nicht mitkamen. Sie hier festzuschreiben ist der kürzere Weg als der Umweg über die Theme-Optionen — und er ist umkehrbar. Die Grösse (20 Pixel) und die Schrift (Montserrat) stimmen bereits und stehen deshalb nicht noch einmal hier. -------------------------------------------------------------------------- */ /* ⚠️ Die Klasse steht doppelt. Blocksy färbt die Zeile mit `[data-header*="type-1"] .ct-header [data-row*="middle"]` — drei Stufen. Eine Regel mit `.ct-header [data-row="middle"]` hat nur zwei und verliert. */ .ct-header.ct-header [data-row="middle"] { background-color: #000000; } .ct-header .ct-menu-link { font-weight: 600; text-transform: uppercase; } /* ⚠️ Der aktive Menüpunkt lässt sich nicht per Regel setzen: Blocksy schreibt dort `var(--theme-link-active-color, var(--theme-link-hover-color))` mit einem Selektor, der jede vernünftige eigene Regel schlägt. Der vorgesehene Weg ist die Variable — ohne sie fällt die Farbe auf den Überfahr-Ton `#CF6D17` zurück, während die Vorlage `#E67E22` zeigt. */ :root { --theme-link-active-color: #E67E22; } /* -------------------------------------------------------------------------- Das aufgeklappte Menü („Kurse und mehr") Nachgemessen bei geöffnetem Untermenü, sieben Einträge in beiden Fällen: Vorlage Kopie Hintergrund #000000 nicht gesetzt → Blocksys Vorgabe Weiss Schrift #ffffff #0F0F0F Überfahren #E67E22 #CF6D17 Eintragsabstand 10px nicht gesetzt Zwei Ursachen, beide beim Klonen entstanden. Erstens fehlt in der erzeugten Datei `uploads/blocksy/css/global.css` die Zeile `--dropdown-background-color:#000000` — ohne sie nimmt Blocksy Weiss. Zweitens holen beide Seiten die Schriftfarbe aus derselben Variablen `--theme-palette-color-8`, nur steht dort in der Vorlage `#ffffff` und in der Kopie `#0F0F0F`. Schwarze Schrift auf weissem Grund war also kein Zufall, sondern die Palette. Die Palette selbst bleibt unangetastet — sie färbt mehr als dieses Menü. Gesetzt werden nur die vier Werte des Untermenüs, und zwar genau die der Vorlage. ⚠️ `body` steht davor — OHNE LEERZEICHEN, und das ist der Punkt. Blocksys eigene Regel benutzt denselben Selektor; bei Gleichstand entschiede die Reihenfolge der Dateien. Ein vorangestelltes Element macht die Regel eindeutig stärker. Mein erster Versuch schrieb `body [data-header…]` mit Leerzeichen und blieb wirkungslos: Das Attribut `data-header` sitzt auf dem `body` selbst, nicht auf einem Element darin. Der Nachfahren-Selektor konnte also nie passen — nachgemessen mit `element.matches()`. Das Menü auf dem Telefon (`[data-id="mobile-menu"]`) ist bewusst nicht erfasst — dort klappt die Liste im Panel auf, nicht als Kasten. -------------------------------------------------------------------------- */ body[data-header*="type-1"] .ct-header [data-id="menu"] .sub-menu { --dropdown-background-color: #000000; --dropdown-items-spacing: 10px; } body[data-header*="type-1"] .ct-header [data-id="menu"] .sub-menu .ct-menu-link { --theme-link-initial-color: #FFFFFF; --theme-link-hover-color: #E67E22; } /* -------------------------------------------------------------------------- Hüllen für Blöcke ohne eigenes Element -------------------------------------------------------------------------- Manche Widgets werden als Kurzbefehl ausgegeben und haben kein HTML-Tag, an das sich die Elementkennung hängen liesse. Sie bekommen deshalb eine Hülle, die allein die Kennung trägt — damit übernommene Regeln ein Ziel haben. Die Hülle darf am Layout nichts ändern. `display:contents` nimmt sie aus dem Kastenmodell heraus: Die Kinder stehen weiter dort, wo sie ohne sie stünden, und erben ihre Farbe und Schrift. -------------------------------------------------------------------------- */ .entry-content .bfsz-huelle { display: contents; } /* -------------------------------------------------------------------------- Reihen richten oben aus, nicht mittig -------------------------------------------------------------------------- WordPress gibt jeder Flex-Gruppe `align-items: center` mit (`.is-layout-flex`). Elementor tut das nicht — dort gilt der Flex-Standard `normal`, also strecken. Der Unterschied ist überall sichtbar, wo eine Reihe zwei ungleich hohe Kinder hat. Auf den Kursseiten sass die Überschrift „Häufig gestellte Fragen" 418 statt 60 Pixel unter dem Abschnittsbeginn — sie schwebte auf halber Höhe neben dem Akkordeon statt darüber zu stehen. Über die ganze Seite gerechnet waren die Kursseiten dadurch mehrere hundert Pixel höher als die Vorlage. ⚠️ NUR EINE KLASSE, ABSICHTLICH. Die 160 Container, für die Elementor eine Ausrichtung vorgibt, bekommen sie aus dem Seitenstil mit doppelter Klasse (0-2-0). Diese Regel hier wiegt 0-1-0 und darf ihnen nicht in die Quere kommen — sie gilt nur, wo Elementor schweigt. -------------------------------------------------------------------------- */ .bfsz-reihe { align-items: normal; } /* -------------------------------------------------------------------------- Kein Vorspann über einer vollbreiten Bildfläche -------------------------------------------------------------------------- Blocksy gibt dem Inhaltsrahmen (`.ct-container-full`) 60 Pixel Abstand nach oben. Elementor-Seiten kennen den nicht: Dort beginnt der erste Abschnitt direkt unter der Kopfzeile. Sichtbar wurde es als dunkler Streifen zwischen Kopfzeile und Hero-Bild — auf `/uber-uns/` begann das Foto bei 180 statt bei 120 Pixeln. Die Regel greift nur, wo der Inhalt tatsächlich mit einer vollbreiten Fläche anfängt. Seiten, die mit gewöhnlichem Text beginnen (AGB, Datenschutz), behalten ihren Abstand — die Vorlage hat ihn dort auch. -------------------------------------------------------------------------- */ .ct-container-full:has(> article > .entry-content > .bfsz-bildbereich:first-child), .ct-container-full:has(> .entry-content > .bfsz-bildbereich:first-child) { padding-top: 0; } /* -------------------------------------------------------------------------- Inhalt einer Bildfläche steht links, nicht mittig -------------------------------------------------------------------------- Gutenbergs begrenztes Layout gibt jedem Kind, das schmaler ist als der Rahmen, `margin-inline: auto`. Der Hero-Block der Über-uns-Seite ist 798 Pixel breit in einem 1140er Rahmen und rutschte damit um 171 Pixel nach rechts — Überschrift, Text und beide Knöpfe standen mittig statt am linken Rand wie auf der Vorlage. Elementor richtet dort am Anfang aus (`align-items: flex-start`). Wo eine Seite ausdrücklich etwas anderes vorgibt, steht das im Seitenstil mit doppelter Klasse und schlägt diese Regel. -------------------------------------------------------------------------- */ .bfsz-bildbereich__innen > *:not(.alignfull):not(.alignwide) { /* ⚠️ `!important` IST HIER UNVERMEIDLICH. WordPress schreibt `margin-inline: auto !important` in seiner Regel für begrenzte Layouts. Ohne dasselbe Gewicht bleibt jede eigene Angabe wirkungslos, egal wie spezifisch der Selektor ist. */ margin-inline: 0 !important; } /* -------------------------------------------------------------------------- Fragen ohne den Innenabstand des Kerns -------------------------------------------------------------------------- WordPress gibt jedem Aufklapp-Block `padding: 0.75rem` (`:root :where(.wp-block-details)`). Elementors Akkordeon hat dort keinen Abstand — der Innenraum sitzt an Frage und Antwort, nicht am Rahmen. Zwölf Pixel oben und unten je Frage klingen wenig; bei sieben Fragen sind es 168 Pixel je Akkordeon, und die gibt es auf jeder Kursseite. -------------------------------------------------------------------------- */ .bfsz-akkordeon .wp-block-details, .entry-content .wp-block-details { padding: 0; } /* -------------------------------------------------------------------------- Eine zugeklappte Frage bleibt zugeklappt -------------------------------------------------------------------------- ⚠️ DAS ÜBERNOMMENE `display:flex` HEBT DIE BROWSERREGEL AUF. Browser verbergen den Inhalt eines geschlossenen `
` mit `display: none`. Der Seitenstil bringt für denselben Block aber ein `display: flex` mit — übersetzt aus Elementors Container — und das gewinnt. Die Antwort wurde dadurch mitgerechnet, obwohl sie niemand sieht: jede geschlossene Frage 84 statt 59 Pixel hoch. Dazu der Aussenabstand: Gutenbergs Fluss-Layout setzt zwischen Frage und Antwort einen Blockabstand von 27 Pixeln. Elementor hat dort keinen. -------------------------------------------------------------------------- */ .entry-content details:not([open]) > *:not(summary) { display: none; } .entry-content .wp-block-details > summary, .bfsz-akkordeon details > summary { margin-block: 0; } /* -------------------------------------------------------------------------- In einer Flex-Gruppe zählt nur der Zwischenraum -------------------------------------------------------------------------- Elementor staffelt den Inhalt eines Containers ausschliesslich über `gap`. Der Blockeditor legt zusätzlich einen Blockabstand auf jedes Kind — beides zusammen ergibt den doppelten Weg. Im Hero der Gin-Seite waren es 20 Pixel Zwischenraum plus 22 bis 26 Pixel Blockabstand je Element: Titel, Untertitel, Knöpfe und Kacheln rückten Schritt für Schritt nach unten, der Bereich wurde 95 Pixel höher als auf der Vorlage. Die Regel gilt nur für Gruppen, die tatsächlich nebeneinander oder gestapelt als Flex laufen — der gewöhnliche Textfluss behält seine Abstände. -------------------------------------------------------------------------- */ .bfsz-bildbereich__innen > *, .entry-content .wp-block-group.is-layout-flex > * { margin-block: 0; } /* -------------------------------------------------------------------------- Aufzählungen mit Symbol statt Punkt -------------------------------------------------------------------------- Elementors Aufzählung setzt vor jeden Eintrag ein Zeichen — meist ein Häkchen im Kreis, daneben Blätter, Punkte und Flammen. Der Konverter gibt sie jetzt als SVG aus; hier bekommen sie ihren Platz. Die Farbe kommt aus dem Seitenstil (`.bfsz-liste__symbol`), übersetzt aus Elementors `.elementor-icon-list-icon`. Ohne eigene Angabe erben sie die Hausfarbe. -------------------------------------------------------------------------- */ .entry-content ul.bfsz-liste { list-style: none; padding-left: 0; margin-left: 0; } .entry-content ul.bfsz-liste > li { display: flex; align-items: baseline; gap: .6em; } .bfsz-liste__symbol { flex: 0 0 auto; line-height: 1; color: var(--theme-link-initial-color); } .bfsz-liste__symbol svg, .bfsz-liste__symbol .bfsz-symbol { display: block; width: 1em; height: 1em; fill: currentColor; } /* -------------------------------------------------------------------------- Fusszeile: die Werte der Vorlage -------------------------------------------------------------------------- An stageprojects.ch gemessen: Soziale Symbole 34 × 34 Kreis in #E67E22, Zeichen 17 × 17 schwarz Newsletter-Kasten beginnt bei x = 150 (linker Rand der Inhaltsspalte) Anmelde-Knopf Versalien, 0,4 Pixel Sperrung Die Kopie zeigte kleine Markensymbole ohne Kreis, einen Newsletter-Kasten am Fensterrand und einen Knopf in gemischter Schreibung. ⚠️ Die Symbole kommen aus WordPress' eigenem Social-Block, nicht aus Elementor. Regeln müssen deshalb an dessen Klassen hängen — ein Selektor über `a[href*="instagram"]` traf zwar das Element, verlor aber gegen die Kernregeln des Blocks, die Hintergrund und Farbe setzen. -------------------------------------------------------------------------- */ .bfsz-fusszeile .wp-block-social-links .wp-block-social-link, .bfsz-fusszeile .wp-block-social-links .wp-social-link { width: 34px; height: 34px; background-color: var(--theme-link-initial-color); color: #000000; border-radius: 50%; } .bfsz-fusszeile .wp-block-social-links .wp-block-social-link-anchor { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 0; color: inherit; } .bfsz-fusszeile .wp-block-social-links .wp-block-social-link-anchor svg { width: 17px; height: 17px; fill: currentColor; } /* Der Newsletter-Kasten steht links in der Inhaltsspalte, nicht am Fensterrand und nicht mittig. Der linke Aussenabstand ist so gross wie die Randluft der Inhaltsspalte — dieselbe Rechnung wie bei den Abschnitten. */ .bfsz-fusszeile .bfsz-nl { margin-left: max(20px, (100% - var(--bfsz-inhaltsbreite, 1140px)) / 2); margin-right: auto; } .bfsz-fusszeile .bfsz-nl button, .bfsz-fusszeile .bfsz-nl input[type="submit"] { text-transform: uppercase; letter-spacing: .4px; } /* -------------------------------------------------------------------------- Symbole in der Kontaktspalte der Fusszeile -------------------------------------------------------------------------- Die Vorlage stellt Telefonnummer, E-Mail und Adresse je ein oranges Zeichen von 15 Pixeln voran (Hörer, Umschlag, Ortsmarke). In der Kopie fehlten sie — und weil damit auch die Einrückung fehlte, brach die E-Mail-Adresse um („…zuerich.c / h"). ⚠️ DIE UMRISSE BRAUCHEN IHRE TRANSFORMATION. Die Zeichen stammen aus derselben Tabelle wie alle anderen Symbole (`inc/symbole.php`). Ihre Pfade sind Schriftkoordinaten: y zeigt nach oben, die Grundlinie liegt bei 448. Wer nur den Pfad übernimmt, bekommt einen Klecks. Deshalb steht hier das vollständige SVG samt `translate(0,448) scale(1,-1)` — und mehrteilige Zeichen behalten ihre einzelnen Pfade, statt zu einem unbrauchbaren zusammengehängt zu werden. -------------------------------------------------------------------------- */ .bfsz-fusszeile .bfsz-kontaktliste li { display: flex; align-items: baseline; gap: .7em; } .bfsz-fusszeile .bfsz-kontaktliste li::before { content: ""; flex: 0 0 auto; width: 15px; height: 15px; background-color: var(--theme-link-initial-color); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-position: center; mask-position: center; } .bfsz-fusszeile .bfsz-kontaktliste li:nth-child(1)::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%20512%20512%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20transform%3D%22translate%280%2C448%29%20scale%281%2C-1%29%22%3E%3Cpath%20d%3D%22M497.39%2086.2002c8.60059%20-3.74121%2014.6006%20-12.2891%2014.6006%20-22.2588c0%20-1.83496%20-0.204102%20-3.62305%20-0.589844%20-5.3418l-24%20-104c-2.45801%20-10.6416%20-12%20-18.5996%20-23.3848%20-18.5996h-0.015625c-256.1%200%20-464%20207.5%20-464%20464l0.0136719%200.00390625%20c0%2011.3848%207.94434%2020.9287%2018.5859%2023.3857l104%2024c1.72754%200.392578%203.49805%200.619141%205.34375%200.619141c9.9082%200%2018.4307%20-5.97656%2022.1562%20-14.5186l48%20-112c1.23828%20-2.88965%201.95117%20-6.0791%201.95117%20-9.41895c0%20-7.49512%20-3.45215%20-14.1904%20-8.85059%20-18.5811%20l-60.6006%20-49.6006c36.7334%20-77.9072%2099.2822%20-140.457%20177.19%20-177.189l49.5996%2060.5996c4.40332%205.39258%2011.1113%208.81055%2018.6084%208.81055c3.33203%200%206.50684%20-0.680664%209.3916%20-1.91016z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%20512%20512%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20transform%3D%22translate%280%2C448%29%20scale%281%2C-1%29%22%3E%3Cpath%20d%3D%22M497.39%2086.2002c8.60059%20-3.74121%2014.6006%20-12.2891%2014.6006%20-22.2588c0%20-1.83496%20-0.204102%20-3.62305%20-0.589844%20-5.3418l-24%20-104c-2.45801%20-10.6416%20-12%20-18.5996%20-23.3848%20-18.5996h-0.015625c-256.1%200%20-464%20207.5%20-464%20464l0.0136719%200.00390625%20c0%2011.3848%207.94434%2020.9287%2018.5859%2023.3857l104%2024c1.72754%200.392578%203.49805%200.619141%205.34375%200.619141c9.9082%200%2018.4307%20-5.97656%2022.1562%20-14.5186l48%20-112c1.23828%20-2.88965%201.95117%20-6.0791%201.95117%20-9.41895c0%20-7.49512%20-3.45215%20-14.1904%20-8.85059%20-18.5811%20l-60.6006%20-49.6006c36.7334%20-77.9072%2099.2822%20-140.457%20177.19%20-177.189l49.5996%2060.5996c4.40332%205.39258%2011.1113%208.81055%2018.6084%208.81055c3.33203%200%206.50684%20-0.680664%209.3916%20-1.91016z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); } .bfsz-fusszeile .bfsz-kontaktliste li:nth-child(2)::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%20512%20512%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20transform%3D%22translate%280%2C448%29%20scale%281%2C-1%29%22%3E%3Cpath%20d%3D%22M464%20384c26.5098%200%2048%20-21.4902%2048%20-48v-288c0%20-26.5098%20-21.4902%20-48%20-48%20-48h-416c-26.5098%200%20-48%2021.4902%20-48%2048v288c0%2026.5098%2021.4902%2048%2048%2048h416zM464%20336h-416v-40.8047c22.4248%20-18.2627%2058.1797%20-46.6602%20134.587%20-106.49%20c16.834%20-13.2422%2050.2051%20-45.0762%2073.4131%20-44.7012c23.2119%20-0.371094%2056.5723%2031.4541%2073.4131%2044.7012c76.4189%2059.8389%20112.165%2088.2305%20134.587%20106.49v40.8047zM48%2048h416v185.601c-22.915%20-18.252%20-55.4189%20-43.8691%20-104.947%20-82.6523%20c-22.5439%20-17.748%20-60.3359%20-55.1787%20-103.053%20-54.9473c-42.9277%20-0.231445%20-81.2051%2037.75%20-103.062%2054.9551c-49.5293%2038.7842%20-82.0244%2064.3945%20-104.938%2082.6455v-185.602z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%20512%20512%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20transform%3D%22translate%280%2C448%29%20scale%281%2C-1%29%22%3E%3Cpath%20d%3D%22M464%20384c26.5098%200%2048%20-21.4902%2048%20-48v-288c0%20-26.5098%20-21.4902%20-48%20-48%20-48h-416c-26.5098%200%20-48%2021.4902%20-48%2048v288c0%2026.5098%2021.4902%2048%2048%2048h416zM464%20336h-416v-40.8047c22.4248%20-18.2627%2058.1797%20-46.6602%20134.587%20-106.49%20c16.834%20-13.2422%2050.2051%20-45.0762%2073.4131%20-44.7012c23.2119%20-0.371094%2056.5723%2031.4541%2073.4131%2044.7012c76.4189%2059.8389%20112.165%2088.2305%20134.587%20106.49v40.8047zM48%2048h416v185.601c-22.915%20-18.252%20-55.4189%20-43.8691%20-104.947%20-82.6523%20c-22.5439%20-17.748%20-60.3359%20-55.1787%20-103.053%20-54.9473c-42.9277%20-0.231445%20-81.2051%2037.75%20-103.062%2054.9551c-49.5293%2038.7842%20-82.0244%2064.3945%20-104.938%2082.6455v-185.602z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); } .bfsz-fusszeile .bfsz-kontaktliste li:nth-child(3)::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%20384%20512%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20transform%3D%22translate%280%2C448%29%20scale%281%2C-1%29%22%3E%3Cpath%20d%3D%22M172.268%20-53.6699c-145.298%20210.639%20-172.268%20232.257%20-172.268%20309.67c0%20106.039%2085.9609%20192%20192%20192s192%20-85.9609%20192%20-192c0%20-77.4131%20-26.9697%20-99.0312%20-172.268%20-309.67c-9.53516%20-13.7744%20-29.9307%20-13.7734%20-39.4648%200zM192%20176c44.1826%200%2080%2035.8174%2080%2080%20s-35.8174%2080%20-80%2080s-80%20-35.8174%20-80%20-80s35.8174%20-80%2080%20-80z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%20384%20512%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20transform%3D%22translate%280%2C448%29%20scale%281%2C-1%29%22%3E%3Cpath%20d%3D%22M172.268%20-53.6699c-145.298%20210.639%20-172.268%20232.257%20-172.268%20309.67c0%20106.039%2085.9609%20192%20192%20192s192%20-85.9609%20192%20-192c0%20-77.4131%20-26.9697%20-99.0312%20-172.268%20-309.67c-9.53516%20-13.7744%20-29.9307%20-13.7734%20-39.4648%200zM192%20176c44.1826%200%2080%2035.8174%2080%2080%20s-35.8174%2080%20-80%2080s-80%20-35.8174%20-80%20-80s35.8174%20-80%2080%20-80z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); } /* -------------------------------------------------------------------------- Die Kopfzeile schrumpft beim Scrollen -------------------------------------------------------------------------- Blocksys Sticky-Skript verkleinert beim Scrollen das Logo und rechnet daraus die neue Zeilenhöhe (`--shrink-height`). Grundlage dafür ist die Höhe, die das Logo im Normalzustand hat. Die Vorlage setzt sie in ihrer erzeugten Stildatei: [data-header*="type-1"] .ct-header [data-id="logo"] .site-logo-container { --logo-max-height: 65px } In der Kopie fehlt diese Zeile — der Klon hat die Kopfzeilen-Einstellungen nicht vollständig mitgebracht. Ohne sie gibt es nichts zu verkleinern: Die Kopfzeile blieb beim Scrollen 120 statt 84 Pixel hoch, auf jeder Seite. -------------------------------------------------------------------------- */ .ct-header [data-id="logo"] .site-logo-container { --logo-max-height: 65px; } /* -------------------------------------------------------------------------- Karten mit Symbol oben -------------------------------------------------------------------------- Elementors Icon-Box mit `position: top` — alle sechs dieser Website — setzt Symbol, Titel und Text mittig. Die Kopie liess sie links stehen. ⚠️ DIE BLOCKABSTÄNDE MÜSSEN WEG, UND ZWAR WEGEN DER MASSEINHEIT. Blocksy staffelt Inhalt mit `--theme-content-spacing: 1.5em`. Ein `em` rechnet gegen die Schriftgrösse des Elements — und die ist beim Symbol 50 Pixel. Aus anderthalb Zeilen Abstand wurden so 75 Pixel: Zwischen dem Zeichen und dem Namen klaffte auf jeder Teamkarte eine Lücke, und die Karten wurden 402 statt 318 Pixel hoch. Den Abstand regelt hier ausschliesslich `gap` — wie bei Elementor. -------------------------------------------------------------------------- */ .entry-content .bfsz-bildkasten { text-align: center; gap: 15px; justify-items: center; } .entry-content .bfsz-bildkasten > * { margin-block: 0; } /* -------------------------------------------------------------------------- Die Videogalerie bringt ihr eigenes Kopfband mit -------------------------------------------------------------------------- ⚠️ EINE ELEMENTOR-ABHÄNGIGKEIT IM PLUGIN. Das Videogalerie-Plugin blendet sein Kopfband aus, sobald die Seite von Elementor stammt — dort steht bereits eines: body.elementor-page:has(.bfsz-vg-gallery) .bfsz-vg-hero { display: none } Ohne Elementor fehlt die Körperklasse, die Bedingung greift nicht, und das Band erschien ein zweites Mal: auf `/videos/` unter dem Einleitungstext, 400 Pixel hoch, mit derselben Überschrift wie oben. Die Seite war dadurch 312 Pixel länger als die Vorlage. Nachgebildet wird die Absicht, nicht die Bedingung: Trägt die Seite einen übernommenen Bildbereich, hat sie ihr Kopfband schon. -------------------------------------------------------------------------- */ body:has(.entry-content .bfsz-bildbereich) .bfsz-vg-hero { display: none; } /* -------------------------------------------------------------------------- Warenkorb: der zweite Weg Gemessen fehlte im gefüllten Warenkorb jeder Weg zurück ins Sortiment — in der Vorlage wie in der Kopie. Der Knopf kommt aus `inc/warenkorb.php` und steht neben „Warenkorb aktualisieren". ⚠️ ER SOLL NICHT MIT DER KASSE KONKURRIEREN. „Weiter zur Kasse" bleibt der einzige ausgefüllte Knopf. Dieser hier ist ein Umriss: gleich gross, gleiche Schrift, aber ohne Fläche. Wer weitersuchen will, findet ihn; wer abschliessen will, sieht weiterhin nur einen Weg. Der Rahmen liegt als `box-shadow` innen statt als `border` — so bleibt die Grösse exakt die des gefüllten Knopfes daneben, ohne Ausgleichsrechnung. Der Selektor ist absichtlich länger als nötig: Blocksys Knopfregel wiegt 0-1-0 wie eine einzelne Klasse, und die Reihenfolge der Dateien ist nichts, worauf man sich verlassen sollte. -------------------------------------------------------------------------- */ .woocommerce a.button.bfsz-weiter-einkaufen, a.button.bfsz-weiter-einkaufen { background-color: transparent; color: var(--theme-button-background-initial-color, #E67E22); box-shadow: inset 0 0 0 1px currentColor; } .woocommerce a.button.bfsz-weiter-einkaufen:hover, a.button.bfsz-weiter-einkaufen:hover { background-color: var(--theme-button-background-initial-color, #E67E22); color: var(--theme-button-text-initial-color, #0A0804); box-shadow: none; } /* -------------------------------------------------------------------------- Formularknöpfe: dunkle Schrift auf Orange Gemessen standen „NACHRICHT SENDEN" und „ABSENDEN" mit weisser Schrift auf #E67E22 — Kontrast 2,85:1, unter der Schwelle 4,5:1 für normale Schrift. Die übrigen Knöpfe der Website stehen mit #0A0804 bei 7,03:1; hier war es die Ausnahme. Das Weiss stammt aus dem übernommenen Seitenstil, etwa `.bfsz-e612a9b4.bfsz-e612a9b4 .wp-block-button__link{color:#ffffff}` — zwei Klassen plus eine, also 0-3-0. ⚠️ DIE KLASSE STEHT DESHALB DOPPELT. Zwei Klassen und ein Attribut ergeben 0-3-1 und schlagen den Seitenstil. Eine einfache Fassung `.bfsz-formular__aktion button` wöge 0-1-1 und verlöre — dieselbe Falle wie beim Mitgliederbereich. Die Knöpfe der beiden eigenen Plugins tragen ihre Farbe inline; sie wurden an der Quelle geändert, nicht hier überschrieben. -------------------------------------------------------------------------- */ .bfsz-formular__aktion.bfsz-formular__aktion button[type="submit"], .bfsz-formular__aktion.bfsz-formular__aktion input[type="submit"] { color: #0a0804; }