/** * Scheu + Weber — Komponenten-Klassen (BEM, Präfix "sw-") * * Wiederverwendbare Optik für Elementor-Elemente. Die Klassen werden im * Elementor unter "Erweitert → CSS-Klassen" gesetzt. Direktformatierung * bleibt möglich, ist aber nicht nötig — die Elementor-Globals (Kit) und * diese Klassen decken die PDF-Optik ab. * * Werte kommen ausschließlich aus sw-tokens.css. */ /* ========================================================================== Grundlagen — gelten für die ganze Seite Kleinigkeiten, die einzeln unscheinbar sind und zusammen den Unterschied zwischen „gebaut" und „gestaltet" ausmachen. ========================================================================== */ :root { /* Formularelemente und Auswahl folgen der Marke statt dem Browser-Blau. */ color-scheme: light; accent-color: var(--sw-color-wine); } ::selection { background-color: var(--sw-color-wine); color: var(--sw-color-white); } /* * Schriftstapel des Elementor-Kits auf das Token zurückführen. * * Für seinen Theme-Style schreibt Elementor die Schrift wörtlich heraus * (`.elementor-kit-5 h1 { font-family: "Meta Pro", Sans-serif }`) statt über * eine Variable — der metrisch angeglichene Ersatz aus sw-fonts.css käme dort * also nicht an, und genau die größten Textflächen (Body, Überschriften, * Buttons) würden beim Font-Swap weiter springen. * * Das ist zugleich die Regel aus scheuUndWeber.md §1: Werte kommen aus dem * Token, nicht direkt aus dem Widget. Inhaltlich ändert sich nichts — * --sw-font-sans beginnt selbst mit 'Meta Pro'. * * Doppeltes :root für die Spezifität (0,2,x): die Kit-Regeln liegen auf * `.elementor-kit-5 …` (0,1,x), bei einfachem Selektor entschiede die * Ladereihenfolge — und die hat sich beim Abmelden der ElementsKit-Assets * bereits einmal verschoben. */ :root:root body, :root:root h1, :root:root h2, :root:root h3, :root:root h4, :root:root h5, :root:root h6, :root:root button, :root:root input[type="button"], :root:root input[type="submit"], :root:root .elementor-button { font-family: var(--sw-font-sans); } /* * Nur für Screenreader — .sw-visually-hidden * * Text, der zur Struktur gehört, aber im Layout nicht vorkommt. Gebraucht auf * /aktuelles/: Die Seite beginnt gestalterisch mit drei gleichrangigen Teaser- * Karten und hat damit keine Überschrift, die sich zur H1 erheben ließe, ohne * die Gleichrangigkeit zu brechen. Auf allen anderen Seiten ist der erste * Sektionstitel die H1 — dort ist diese Klasse nicht nötig. * * clip-path statt display:none oder visibility:hidden: beides würde den Text * auch für Screenreader entfernen. */ .sw-visually-hidden, .sw-visually-hidden .elementor-heading-title { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* * Sprungziele nicht unter den Header schieben. * * Der Header ist fixiert und liegt über dem Inhalt. Ohne scroll-margin landet * jeder Anker-Sprung (/wir#tradition, /aktuelles#angebote …) so, dass die * Zielüberschrift teilweise oder ganz hinter dem Header steckt — mobil * gemessen 66px Überschrift gegen 83px Header. --sw-header-h setzt * sw-animations.js aus der real gemessenen Höhe; das Token bleibt als * Startwert, bis der erste Frame gelaufen ist. */ [id]:not(body):not(html) { scroll-margin-top: calc(var(--sw-header-h, var(--sw-header-height)) + 1.5rem); } /* * Zeilenumbruch von Überschriften ausgleichen. * * text-wrap: balance verteilt die Zeilen einer Überschrift gleichmäßig, statt * die letzte Zeile mit einem einzelnen Wort stehen zu lassen. In den * zentrierten sw-narrow-Spalten ist das der sichtbarste Einzelgewinn. * Der Browser wendet balance nur bis ~6 Zeilen an, für Fließtext ist deshalb * pretty richtig: es verhindert Schusterjungen, ohne die Umbruchqualität des * ganzen Absatzes neu zu verhandeln. */ h1, h2, h3, .elementor-heading-title, .sw-pill { text-wrap: balance; } p, li, .elementor-widget-text-editor { text-wrap: pretty; } /* * Deutsche Komposita in schmalen Spalten trennen. * * „Fleischerei-Verkäufer", „Firmenzentrale", „Neckartailfinger" reißen auf * schmalen Viewports sonst hässliche Lücken in den Flattersatz. Nur mobil, * und nicht in Überschriften — dort ist ein getrenntes Wort auffälliger als * eine ungleiche Zeile. */ @media (max-width: 767px) { p, li, .elementor-widget-text-editor, .sw-filialen__address { -webkit-hyphens: auto; hyphens: auto; } } /* * Zahlenkolonnen zum Fluchten bringen. * * Öffnungszeiten, Preise und Jahreszahlen stehen untereinander. Mit * Proportionalziffern (Meta Pro Default) sind die Spalten leicht versetzt; * tabular-nums gibt jeder Ziffer dieselbe Breite. */ .sw-filialen__hours, .sw-angebote__preis, .sw-angebote__menge, .sw-timeline__year { font-variant-numeric: tabular-nums; } /* ========================================================================== Header-/Footer-Wrapper von ElementsKit Die Templates #41/#47 werden von ElementsKit ausgegeben. Dessen 447-KB- widget-styles.css ist in functions.php abgemeldet (kein ElementsKit-Widget im Einsatz) — die einzige Regel daraus, die hier gebraucht wurde, steht jetzt an dieser Stelle. ========================================================================== */ .ekit-template-content-header, .ekit-template-content-footer { clear: both; } /* ========================================================================== Button (Pill) — .sw-btn Auf ein Elementor-Button-Widget anwenden (CSS-Klasse am Widget) oder direkt als im HTML nutzen. ========================================================================== */ .sw-btn .elementor-button, a.sw-btn, button.sw-btn { background-color: var(--sw-btn-bg); color: var(--sw-btn-color); border: var(--sw-btn-border); border-radius: var(--sw-btn-radius); padding: var(--sw-btn-padding); font-family: var(--sw-font-sans); font-size: var(--sw-btn-font-size); font-weight: 500; letter-spacing: var(--sw-btn-tracking); box-shadow: var(--sw-btn-shadow); transition: background-color 0.2s ease, color 0.2s ease; } /* Breite Variante: volle Spaltenbreite, normaler Fließtext (Teaser-Karten) */ .elementor-widget-button.sw-btn--wide .elementor-button, a.sw-btn.sw-btn--wide { width: 100%; font-size: var(--sw-fs-body); font-weight: 400; letter-spacing: 0; padding: 0.75rem 2rem; } .sw-btn .elementor-button:hover, .sw-btn .elementor-button:focus, a.sw-btn:hover, a.sw-btn:focus, button.sw-btn:hover:not(:disabled), button.sw-btn:focus:not(:disabled) { background-color: var(--sw-btn-hover-bg); color: var(--sw-btn-hover-color); } /* ========================================================================== Sektion — .sw-section Vertikales Standard-Padding einer Inhaltssektion. Modifier setzen den Hintergrund; ohne Modifier bleibt die Sektion weiß/transparent. ========================================================================== */ .sw-section, .e-con.sw-section { padding-block-start: var(--sw-space-section); padding-block-end: var(--sw-space-section); padding-inline-start: var(--sw-space-inline); padding-inline-end: var(--sw-space-inline); } /* Erste Sektion einer Seite, die ohne Bildband direkt unter dem Header beginnt: Der Header liegt über dem Inhalt, deshalb kommt seine Höhe zum normalen Sektions-Padding hinzu — sonst klebt die Überschrift an der Navigation oder verschwindet auf schmalen Viewports darunter. */ .sw-section--under-header, .e-con.sw-section--under-header { padding-block-start: calc(var(--sw-space-section) + var(--sw-header-height)); } .sw-section--beige { background-color: var(--sw-color-beige); } .sw-section--cream { background-color: var(--sw-color-cream); } .sw-section--lilac { background-color: var(--sw-color-lilac); } .sw-section--lilac-deep { background-color: var(--sw-color-lilac-deep); } .sw-section--wine { background-color: var(--sw-color-wine); } /* ========================================================================== Schmale Textspalte — .sw-narrow Zentrierte Spalte für Überschrift + Fließtext (PDF: ~720px). ========================================================================== */ .sw-narrow, .e-con.sw-narrow { max-width: var(--sw-content-narrow); width: 100%; margin-left: auto; margin-right: auto; } /* Linksbündige Variante — schmale Spalte am linken Rand (z. B. 24/7-Intro neben der Hintergrund-Illustration). */ .sw-narrow--left, .e-con.sw-narrow--left { margin-left: 0; margin-right: auto; } /* ========================================================================== Pill-Label — .sw-pill Kompaktes, abgerundetes Label mit Hintergrundfarbe (z. B. Filialnamen, Kategorie-Marker). Modifier setzen die Hintergrundfarbe; ohne Modifier gilt Gold als Standard. ========================================================================== */ .sw-pill { display: inline-block; width: 100%; text-align: center; box-sizing: border-box; padding: 0.5rem 1rem; border-radius: 60px; font-family: var(--sw-font-sans); font-size: var(--sw-fs-small); font-weight: 600; background-color: var(--sw-color-gold); color: var(--sw-color-text); } .sw-pill--wine { background-color: var(--sw-color-wine); color: var(--sw-color-white); } .sw-pill--beige { background-color: var(--sw-color-beige); } .sw-pill--cream { background-color: var(--sw-color-cream); } /* ========================================================================== Vollbild-Bildband — .sw-band Container ohne Innenabstand, Bild läuft randlos durch. ========================================================================== */ .sw-band, .e-con.sw-band { padding-block: 0; padding-inline: 0; } .sw-band .elementor-widget-image, .sw-band img { width: 100%; display: block; } /* * Bild-Fokus pro Band: Steuert bei zugeschnittenen Bildern (object-fit: * cover im Parallax-Fenster bzw. bei fester Höhe), welcher Bildbereich * sichtbar bleibt. Opt-in über „Erweitert → CSS-Klassen" am Band-Container; * X- und Y-Klasse sind kombinierbar (z. B. sw-band--focus-top + * sw-band--focus-left). Ohne Klasse: Bildmitte (50 % 50 %). */ .sw-band img { object-position: var(--sw-band-focus-x, 50%) var(--sw-band-focus-y, 50%); } .sw-band--focus-top { --sw-band-focus-y: 0%; } .sw-band--focus-y-25 { --sw-band-focus-y: 25%; } .sw-band--focus-y-75 { --sw-band-focus-y: 75%; } .sw-band--focus-bottom { --sw-band-focus-y: 100%; } .sw-band--focus-left { --sw-band-focus-x: 0%; } .sw-band--focus-right { --sw-band-focus-x: 100%; } /* ========================================================================== Rechtstext — .sw-legal Lange Fließtextseiten (Impressum, Datenschutzerklärung): gegliederte Zwischenüberschriften, lesbare Listen, sichtbare Links. Auf die schmale Spalte legen (zusammen mit .sw-narrow). ========================================================================== */ .sw-legal .elementor-widget-text-editor { font-size: var(--sw-fs-small); line-height: var(--sw-lh-body); } .sw-legal .elementor-widget-text-editor p { margin-block: 0 1.1em; } /* Ebenen: h2 = Hauptabschnitt (I., II., III.), h3 = Unterabschnitt, h4 = Detailpunkt. Die Seiten tragen ihre H1 als eigenes Heading-Widget darüber, deshalb beginnt die Gliederung hier bei h2 — vorher stand hier h3 und riss eine Ebene auf. */ .sw-legal .elementor-widget-text-editor h2, .sw-legal .elementor-widget-text-editor h3, .sw-legal .elementor-widget-text-editor h4 { margin-block: 2.2em 0.7em; line-height: var(--sw-lh-heading); } .sw-legal .elementor-widget-text-editor h2 { font-size: var(--sw-fs-h3); } .sw-legal .elementor-widget-text-editor h3 { font-size: var(--sw-fs-body); font-weight: 600; } .sw-legal .elementor-widget-text-editor h4 { font-size: var(--sw-fs-small); font-weight: 600; } /* Erste Zwischenüberschrift schließt direkt an den Einstieg an. */ .sw-legal .elementor-widget-text-editor > :first-child { margin-block-start: 0; } .sw-legal .elementor-widget-text-editor ul { margin-block: 0 1.1em; padding-inline-start: 1.3em; list-style: disc; } .sw-legal .elementor-widget-text-editor li { margin-block-end: 0.6em; } .sw-legal .elementor-widget-text-editor a { color: var(--sw-color-wine); text-decoration: underline; text-underline-offset: 2px; } .sw-legal .elementor-widget-text-editor a:hover, .sw-legal .elementor-widget-text-editor a:focus-visible { text-decoration-thickness: 2px; } /* ========================================================================== Kontaktformular — .sw-form Styling für das FluentForm-Formular lt. PDF "Kontakt" (Seite 5): cremefarbene, randlose Felder, Beschriftung UNTER dem Feld, Einwilligung als Checkbox-Zeile, Absenden-Button in Pill-Optik. Klasse auf das einbettende Widget legen (Erweitert → CSS-Klassen); eingebunden ist das Formular über [fluentform id="2"]. Die Selektoren führen .sw-form, .fluentform und die FluentForm-Klasse zusammen (0,3,0) und schlagen damit das Plugin-Skin ".ff-default …" (0,2,0) unabhängig von der Ladereihenfolge der Stylesheets. ========================================================================== */ /* Label unter das Feld drehen (PDF: Feld, darunter die Beschriftung). */ .sw-form .fluentform .ff-el-group { display: flex; flex-direction: column-reverse; row-gap: 0.35rem; margin-bottom: 1.5rem; } .sw-form .fluentform .ff-el-input--label label { font-family: var(--sw-font-sans); font-size: var(--sw-fs-small); font-weight: 400; line-height: var(--sw-lh-body); color: var(--sw-color-text); } /* Pflichtfelder tragen den Hinweis bereits im Text ("(Pflichtfeld)"), das zusätzliche Sternchen des Plugins entfällt. */ .sw-form .fluentform .ff-el-input--label.ff-el-is-required.asterisk-right label::after, .sw-form .fluentform .ff-el-input--label.ff-el-is-required.asterisk-left label::before { content: none; } /* Felder: Creme, randlos, eckig. */ .sw-form .fluentform .ff-el-form-control { background-color: var(--sw-color-cream); border: none; border-radius: 0; padding: 1rem; font-family: var(--sw-font-sans); font-size: var(--sw-fs-body); line-height: 1.3; color: var(--sw-color-text); box-shadow: none; box-sizing: border-box; } /* PDF: Nachrichtenfeld ist genau doppelt so hoch wie ein einzeiliges Feld. */ .sw-form .fluentform textarea.ff-el-form-control { height: 6.8rem; min-height: 6.8rem; resize: vertical; } .sw-form .fluentform .ff-el-form-control:focus { background-color: var(--sw-color-cream); outline: 2px solid var(--sw-color-wine); outline-offset: 0; border: none; } /* Einwilligung: Checkbox und Text nebeneinander, kein Feld-Hintergrund. */ .sw-form .fluentform .ff-el-tc .ff-el-form-check-label { display: flex; align-items: flex-start; gap: 0.75rem; font-family: var(--sw-font-sans); font-size: var(--sw-fs-small); line-height: var(--sw-lh-body); color: var(--sw-color-text); } .sw-form .fluentform .ff-el-tc .ff_tc_checkbox { flex-shrink: 0; margin-top: 0.3rem; } .sw-form .fluentform .ff-el-tc input[type="checkbox"] { width: 1.1rem; height: 1.1rem; accent-color: var(--sw-color-wine); } .sw-form .fluentform .ff-el-tc a { color: var(--sw-color-wine); text-decoration: underline; text-underline-offset: 2px; } /* Der Absenden-Block trägt kein Label und wird von der Label-Umkehr ausgenommen — sonst dehnt align-items:stretch den Button auf volle Breite. */ .sw-form .fluentform .ff_submit_btn_wrapper { display: block; } /* Absenden-Button: Pill-Optik aus den Tokens (wie .sw-btn). */ .sw-form .fluentform .ff-btn-submit { background-color: var(--sw-btn-bg); color: var(--sw-btn-color); border: var(--sw-btn-border); border-radius: var(--sw-btn-radius); padding: var(--sw-btn-padding); font-family: var(--sw-font-sans); font-size: var(--sw-btn-font-size); font-weight: 500; letter-spacing: var(--sw-btn-tracking); box-shadow: var(--sw-btn-shadow); transition: background-color 0.2s ease, color 0.2s ease; } .sw-form .fluentform .ff-btn-submit:hover, .sw-form .fluentform .ff-btn-submit:focus { background-color: var(--sw-btn-hover-bg); color: var(--sw-btn-hover-color); } /* Fehlermeldungen und Erfolgsmeldung in der Marken-Typografie. */ .sw-form .fluentform .error.text-danger, .sw-form .fluentform .ff-el-is-error .text-danger { font-family: var(--sw-font-sans); font-size: var(--sw-fs-small); color: var(--sw-color-wine); } .sw-form .ff-message-success { background-color: var(--sw-color-cream); border: none; padding: 1.25rem 1.5rem; font-family: var(--sw-font-sans); font-size: var(--sw-fs-body); color: var(--sw-color-text); } /* ========================================================================== Footer — Anschrift und Kontakt Der Footer trug bislang nur Logo und die beiden Rechtslinks. Anschrift, Telefon und E-Mail gehören bei einem Betrieb mit Laufkundschaft dorthin: Es ist die Stelle, an der man sie sucht, ohne zu navigieren. Markup: ElementsKit-Template #47, Widget „Text – Anschrift & Kontakt". ========================================================================== */ /* * Alles im Footer steht auf Bordeaux und muss hell sein. * * Ohne diese Regel entschied die Ladereihenfolge, und die fällt je nach Seite * anders aus: auf Inhaltsseiten gewann Elementors Textfarbe und der * Anschriftblock stand dunkel auf Bordeaux (1,41:1 — praktisch unlesbar), auf * der 404-Seite gewann die globale Linkfarbe und „Impressum"/„Datenschutz" * standen bordeaux auf bordeaux (1:1 — unsichtbar). Beides ist derselbe * Fehler: Farben, die für weißen Grund gedacht sind, landen auf farbigem. * * Doppeltes :root hebt die Spezifität über Elementors Widget-Regeln * (`.elementor-47 .elementor-element-… .elementor-heading-title`, 0,3,0) und * über die globale Linkfarbe (`.elementor-kit-5 a`, 0,1,1) — unabhängig davon, * in welcher Reihenfolge die Stylesheets geladen werden. */ :root:root .sw-footer .elementor-heading-title, :root:root .sw-footer .elementor-heading-title a, :root:root .sw-footer__kontakt, :root:root .sw-footer__kontakt p, :root:root .sw-footer__kontakt strong, :root:root .sw-footer__kontakt a { color: var(--sw-color-white); } .sw-footer__kontakt { font-size: var(--sw-fs-small); line-height: var(--sw-lh-body); } .sw-footer__kontakt p { margin-block: 0 0.9em; } .sw-footer__kontakt p:last-child { margin-block-end: 0; } /* Auf Bordeaux ist Bordeaux als Linkfarbe unsichtbar — im Footer erben die Links deshalb die Textfarbe und zeigen sich über die Unterstreichung. */ .sw-footer__kontakt a { color: inherit; text-decoration: underline; text-underline-offset: 0.18em; text-decoration-color: color-mix(in srgb, var(--sw-color-white) 45%, transparent); transition: text-decoration-color var(--sw-anim-duration-fast) var(--sw-anim-easing); } .sw-footer__kontakt a:hover, .sw-footer__kontakt a:focus-visible { text-decoration-color: var(--sw-color-gold); } .sw-footer__kontakt a:focus-visible { outline: 2px solid var(--sw-color-gold); outline-offset: 3px; border-radius: 2px; } /* ========================================================================== 404 — .sw-404 Gehört zur Website, nicht zur Fehlermeldung: dieselben Bausteine wie überall (sw-section, sw-narrow, sw-btn), nur der Inhalt ist ein anderer. Markup: hello-elementor-child/404.php ========================================================================== */ .sw-404__titel { margin-block-end: 1rem; } .sw-404__text { font-size: var(--sw-fs-body); line-height: var(--sw-lh-body); margin-block-end: 2.5rem; } .sw-404__wege { list-style: none; margin: 0 0 2.5rem; padding: 0; } /* Gepunkteter Gold-Trenner wie bei den Filialkarten — dieselbe Sprache für „hier endet ein Eintrag". */ .sw-404__weg { padding-block: 1.1rem; border-block-end: 1px dotted var(--sw-color-gold); } .sw-404__weg:first-child { border-block-start: 1px dotted var(--sw-color-gold); } /* Bordeaux kommt aus der globalen Linkfarbe des Kits — dieselbe Farbe, die auch den aktiven Navigationspunkt markiert. Deshalb hier keine eigene Farbangabe: die Seite soll sich nicht anders verhalten als der Rest. */ .sw-404__link { display: inline-block; font-size: var(--sw-fs-h3); font-weight: 700; text-decoration: none; transition: text-decoration-color var(--sw-anim-duration-fast) var(--sw-anim-easing); } .sw-404__link:hover, .sw-404__link:focus-visible { text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 2px; } .sw-404__link:focus-visible { outline: 2px solid var(--sw-color-wine); outline-offset: 4px; border-radius: 3px; } .sw-404__beschreibung { display: block; margin-block-start: 0.15rem; font-size: var(--sw-fs-small); line-height: var(--sw-lh-body); color: color-mix(in srgb, var(--sw-color-text) 65%, transparent); } /* ------------------------------------------------------------------ * * Hauptnavigation —