/* ========================================================================== Silbentrennung fuer Fliesstext-Absaetze: verhindert grosse Luecken am Zeilenende bei langen Woertern (z.B. Fachbegriffe wie "Querfoerderschnecke"). hyphens:auto verlaesst sich auf lang="de-DE" im -Tag (setzt WordPress automatisch ueber get_language_attributes()), damit der Browser die deutschen Trennregeln anwendet. ========================================================================== */ p { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; } /* ========================================================================== / global auf "SemiBold" (600) statt Browser-"Bold" (700): sowohl in Ueberschriften (manche Patterns haben Ueberschriften-Text in / gewrappt, echtes HTML-Markup, kein CSS) als auch im Fliesstext (Absaetze, Tabellenzellen, Listen - z. B. die technischen Datentabellen in patterns/mobile-fuetterung.php). Vorher war das uneinheitlich: Ueberschriften standen bereits auf 600, Fliesstext hatte gar keine Regel und fiel auf Browser-Bold (700) zurueck - bei Inter fehlt fuer 700/normal sogar die Schriftdatei (siehe assets/fonts.css), wodurch der Browser dort zusaetzlich synthetisch fett oder auf ExtraBold auswich. 600 ist bei Open Sans UND Inter ein echter, eigener Schriftschnitt (nicht vom Browser simuliert). Wirkt automatisch auch auf bereits gespeicherte Seiten, ohne dass Bloecke dort neu eingefuegt werden muessen. ========================================================================== */ strong, b { font-weight: 600; } /* ========================================================================== Feature-Icons: runder grüner Container, wie im Original (sow-icon-container) ========================================================================== */ .grundmann-icon-circle { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background-color: var(--wp--preset--color--primary-light); margin: 0 auto 8px auto; } .grundmann-icon-circle svg { width: 40px; height: 40px; color: var(--wp--preset--color--primary); } /* Kontakt-CTA-Block (parts/kontakt.html): Icon-Kreis ohne Hintergrundflaeche, nur das reine Icon-Umriss-Symbol - bewusste Abweichung von der sonst ueberall im Theme verwendeten gruenen .grundmann-icon-circle-Optik, nur fuer diesen einen Kontext. Basisklasse selbst bleibt unveraendert. */ .grundmann-kontakt .grundmann-icon-circle { background-color: transparent; } /* Feature-Text im Original zentriert unter dem Icon */ .grundmann-feature { text-align: center; } /* Abstand zwischen Feature-Headline (h4) und Beschreibungstext verringern (Standard-Block-Spacing aus theme.json ist hier zu groß). */ .grundmann-feature h4 { margin-top: 8px; margin-bottom: 4px; } .grundmann-feature__text { margin-top: 0; } /* ========================================================================== Kategorie-Badge: kleines Label oberhalb der Produkt-Überschrift zur Einordnung in die Produktkategorie (z. B. "Fütterungstechnik"). ========================================================================== */ .grundmann-category-badge__text { margin: 0 0 8px 0; font-size: var(--wp--preset--font-size--small); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wp--preset--color--text-dark); } /* ========================================================================== Freistehendes Icon ohne Kreis-Hintergrund (z. B. CTA-Bereich). Im Original hat dieses Icon KEINEN "sow-container-round" Kreis wie die Feature-Icons, sondern steht frei/größer. ========================================================================== */ .grundmann-icon-plain { display: flex; align-items: center; justify-content: center; margin: 0 auto 16px auto; } .grundmann-icon-plain svg { width: 40px; height: 40px; color: var(--wp--preset--color--primary); } /* ========================================================================== Card: weißer Kasten mit Schatten + Radius (aus "panel-widget-style" #panel-2286-0-0-0 im Original). Umschließt im Original den GESAMTEN Inhaltsblock einer Produktseite (Hero + Features + Funktionsprinzip/ Technische Daten), nicht nur die Hero-Textspalte. ========================================================================== */ /* Nur die "normale" Card (nicht die Style-Variante "Ohne Kasten-Optik") bekommt Kasten-Optik (weisser Hintergrund, Radius, Schatten, Innenabstand). Die Style-Variante "Ohne Kasten-Optik" (is-style-grundmann-card-plain, registriert in functions.php) uebernimmt NUR die Spalten-Struktur/-Gaps weiter unten, aber keine sichtbare Kastenform - fuer Startseiten- Abschnitte im Card-Look (Text/Bild-Hero + Feature-Icon-Zeile), die im Original-Design direkt auf der Sektionsflaeche liegen. */ .grundmann-card:not(.is-style-grundmann-card-plain) { background-color: #ffffff; border-radius: 6px; padding: 42px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15); /* Eigene, von der umgebenden Section-Hintergrundfarbe unabhaengige Textfarbe (z. B. is-style-grundmann-bg-primary/-dark setzen color: white auf dem ganzen Abschnitt) - eine weisse Karte ist immer eine eigene "Insel" mit dunklem Text, unabhaengig vom Abschnitt drumherum. */ color: var(--wp--preset--color--text-dark); } @media (max-width: 781px) { .grundmann-card { padding: 15px !important; } .grundmann-card > .wp-block-columns { row-gap: 32px; } } /* Abstand zwischen Textspalte (links) und Bildspalte (rechts) im Hero. Als eigene CSS-Regel statt Inline-Style im Pattern-Markup, damit die Aenderung auch auf bereits gespeicherten Seiten wirkt, ohne dass der Block dort neu eingefuegt werden muss. Gilt fuer beide Card-Varianten (normal UND "Ohne Kasten-Optik"), da der Selektor auf die gemeinsame Basisklasse .grundmann-card zielt, nicht auf eine der beiden Varianten. */ .grundmann-card > .wp-block-columns { column-gap: 48px; } /* Spaltenabstand im Absprung-Block (grundmann/related-products), analog zum Hero-Kartenabstand oben. Als eigene CSS-Regel statt eines blockGap- Style-Attributs am core/columns-Block, damit Attribut (JSON-Kommentar) und sichtbares HTML deckungsgleich bleiben (siehe custom-blocks-troubleshooting.md, "ungueltiger Inhalt"). */ .grundmann-related-products__inner > .wp-block-columns { column-gap: 24px; row-gap: 24px; } /* Gleicher 24px/24px-Abstand wie im Absprung-Block oben, aber fuer die zweite (und jede weitere) Columns-Zeile INNERHALB einer Card - z.B. die Feature-Icon-Zeile unter dem Hero, sowohl bei der normalen Card als auch bei der Style-Variante "Ohne Kasten-Optik" auf der Startseite. */ .grundmann-card > .wp-block-columns:not(:first-of-type) { column-gap: 24px; row-gap: 24px; } /* ========================================================================== Tabellen: Zellenumrandung entfernen (WordPress-Core setzt standardmaessig einen 1px-Rahmen um jede Zelle). Ueberschreibt gezielt das Core-Stylesheet, damit es auf allen Seiten (auch bereits gespeicherten) automatisch wirkt. ========================================================================== */ .wp-block-table td, .wp-block-table th { border: none !important; padding: 6px 0 !important; } /* ========================================================================== Etwas mehr Abstand zwischen den beiden Zeilen im Kontakt-CTA-Absatz ("Fuer weitere Informationen..." / "Wir freuen uns..."). Angesprochen ueber den strukturellen Anker ".grundmann-icon-circle + p" (der Absatz direkt nach dem freistehenden Message-Icon im CTA-Block) statt einer neuen Klasse im Pattern-Markup - so wirkt die Regel auch auf bereits gespeicherte Seiten, ohne dass dort etwas neu eingefuegt werden muss. Alle
innerhalb dieses Absatzes werden zu Blockelementen mit Abstand; .grundmann-icon-circle wird auch bei Feature-Icons verwendet, dort folgt aber immer ein h4, kein p - keine Kollision. ========================================================================== */ .grundmann-icon-circle + p br { display: block; content: ""; margin-top: 6px; } /* ========================================================================== Info-Box: fuer den grundmann/technical-data-box Block (z. B. "Technische Daten" neben dem Fliesstext). ========================================================================== */ .grundmann-technical-data-box { background-color: var(--wp--preset--color--primary-light); color: var(--wp--preset--color--primary); border-radius: 6px; border: 1px solid var(--wp--preset--color--primary); padding: 20px 25px; } @media screen and (max-width: 600px) { .grundmann-technical-data-box { padding: 10px 15px !important; } } /* ========================================================================== Produktkarten ("Weitere Biogastechnik" etc.): weißer Kasten mit dezentem Schatten + abgerundeten Ecken, wie im Original ("product-card"-Klasse, die aus einem externen, nicht mitgelieferten Stylesheet stammt - hier anhand des Screenshots der Live-Seite nachgebaut). ========================================================================== */ .grundmann-product-card { background-color: #ffffff; border-radius: 12px; padding: 20px; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08); height: 100%; box-sizing: border-box; display: flex; flex-direction: column; /* Eigene, von der umgebenden Section-Hintergrundfarbe unabhaengige Textfarbe (z. B. is-style-grundmann-bg-primary/-dark setzen color: white auf dem ganzen Abschnitt) - eine weisse Karte ist immer eine eigene "Insel" mit dunklem Text, unabhaengig vom Abschnitt drumherum. */ color: var(--wp--preset--color--text-dark); } .grundmann-product-card .wp-block-image { margin-bottom: 20px; } .grundmann-product-card .wp-block-image img { border-radius: 8px; width: 100%; } .grundmann-product-card h4 { color: var(--wp--preset--color--primary); font-size: 1.375rem; font-weight: 700; margin: 0 0 10px 0; line-height: 1.375; } .grundmann-product-card p { margin: 0 0 10px 0; line-height: 1.7; } .grundmann-product-card__subheadline { font-weight: 600; } /* ========================================================================== Hintergrund-Varianten für Abschnitte: die frueheren core/group- Block-Styles (is-style-grundmann-bg-weiss/grau/svg/gruen/dunkelgrau) wurden entfernt. Jeder Abschnitt ist jetzt ein core/cover-Block mit den nativen Cover-Optionen "Hintergrund: Farbe" (Theme-Preset-Farbe, dimRatio 100) bzw. "Hintergrund: Bild" (Mediathek-Bild + Overlay- Farbe/-Deckkraft) - kein eigenes CSS mehr noetig, core/cover bringt die Hintergrunddarstellung selbst mit. Dunkle Farbvarianten (z. B. Primary/Dunkelgrau) setzen ueber core/cover's isDark-Verhalten bzw. die eigene Textfarbwahl im Editor automatisch helle Schrift - siehe claude/hintergrund-varianten-abschnitte.md fuer den Nachtrag zur Umstellung. */ /* Block-Style-Variante "Bild gespiegelt (horizontal)" (is-style-grundmann- cover-flip-h, registriert in functions.php via register_block_style auf core/cover): spiegelt NUR das eigentliche Hintergrundbild, NICHT den Cover-Inhalt (Ueberschrift/Text/Buttons in .wp-block-cover__inner- container) und NICHT die Overlay-Farbflaeche. WICHTIG: das Bild liegt in core/cover als eigenes -Element NEBEN dem (Letzteres ist nur die Dim/Overlay-Farbebene, enthaelt KEIN Bild - siehe wp-includes/blocks/cover/style.css) - deshalb gezielt auf .wp-block-cover__image-background angewendet, nicht auf __background. Wirkt nur sichtbar bei gesetztem Bild (Hintergrund: Bild); im reinen Farb-Modus (kein Bild, dimRatio 100) existiert dieses img-Element gar nicht im Markup, die Style-Variante hat dort schlicht keinen Effekt. */ .is-style-grundmann-cover-flip-h > .wp-block-cover__image-background { transform: scaleX(-1); } /* Textfarbe in core/cover-Abschnitten OHNE eigene Farbwahl: WordPress-Core setzt fuer jeden core/cover-Block standardmaessig weisse Schrift (Annahme: "Cover-Bilder sind meist dunkel"), siehe wp-includes/blocks/cover/ style.css: ":where(.wp-block-cover:not(.has-text-color)) { color: #fff }". Das passt bei einem dunklen/gruenen Overlay (z. B. Hero, siehe startseite-hero.php, dort weiterhin gewuenscht), ist aber falsch bei hellen Abschnitten (Weiss/Grau) ohne Bild, wo Core-CSS trotzdem #fff erzwingt und Fliesstext ohne eigene textColor (z. B. .grundmann-service- item__text, .grundmann-service-card__text, einfache

-Absaetze in startseite.php) dadurch unlesbar weiss auf hellem Grund erscheint (siehe Nachtrag in claude/kontakt-und-absprung-bloecke.md). Fix: Cover-Blocks, die im Editor explizit als hell markiert sind (isDark:false, WordPress setzt dafuer automatisch die Klasse "is-light"), bekommen die normale Theme-Textfarbe als Fallback - aber NUR wenn kein Element bereits eine eigene Farbe traegt (:not(.has-text-color) betrifft den Cover-Block selbst und dessen direkte Kinder ohne eigene Farbwahl, per CSS-Vererbung wirkt color auf alle text-color-losen Nachfahren). */ .wp-block-cover.is-light:not(.has-text-color) { color: var(--wp--preset--color--text-dark); } /* ========================================================================== CTA-Button mit Pfeil-Icon (aus sow-button mit ow-icon-placement-right). WICHTIG: rein strukturell ueber den Standard-core/button-Selektor erzeugt (":after"-Pseudo-Element mit eingebettetem Pfeil-SVG als Hintergrundbild) - KEINE "has-icon"-Klasse und KEIN Inline-SVG im Pattern-/Template-Part- Markup mehr noetig. Jeder core/button im Content bekommt den Pfeil damit automatisch, auch auf bereits gespeicherten Seiten, ohne dass der Block dort neu eingefuegt werden muss (siehe custom-blocks-troubleshooting.md, Grundprinzip "Styling gehoert strukturell erzwungen, nicht per neuer Klasse im Pattern-Markup"). Falls irgendwann ein Button OHNE Pfeil gebraucht wird, dafuer eine explizite Ausnahme-Klasse einfuehren (z.B. "no-icon"), nicht umgekehrt eine Opt-in-Klasse fuer den Pfeil. ========================================================================== */ /* !important noetig: WordPress' eigenes core/button-Stylesheet (wp-includes/blocks/button/style.css) setzt .wp-block-button__link (gleiche Klasse, gleiche Spezifitaet) selbst auf "display: inline-block; align-content: center; height: 100%". Je nach Lade-Reihenfolge im Frontend (im Editor via editor-styles laedt unser theme.css zuverlaessig zuletzt, im Frontend nicht garantiert) gewinnt mal die eine, mal die andere Regel - ohne !important konnte das Core-CSS "display: inline- block" gewinnen, wodurch der Pfeil (::after) nicht mehr per Flexbox vertikal zentriert wird, sondern im normalen Inline-Textfluss auf der Grundlinie sitzt und dadurch leicht "verrutscht" wirkt (Symptom trat nur im Live-Frontend auf, nicht im Editor - Reihenfolge-Unterschied bestaetigt den Verdacht). */ .wp-block-button__link { display: inline-flex !important; align-items: center !important; gap: 8px; } .wp-block-button__link::after { content: ""; display: inline-block; width: 22px; height: 22px; flex-shrink: 0; background-color: currentColor; -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; } /* ========================================================================== Button-Style-Variante "Outline (Grün)" (is-style-grundmann-btn-outline): gruener Rand, gruene Schrift, transparenter Hintergrund, KEIN Pfeil-Icon. Fuer sekundaere Button-Reihen (z. B. Produkt-Kurzlinks unterhalb des Hero-Contents), die sich bewusst vom Haupt-CTA (voll gruen gefuellt, siehe .wp-block-button__link oben) abheben sollen. Registrierung siehe functions.php (register_block_style, core/button). ========================================================================== */ .wp-block-buttons:has(.is-style-grundmann-btn-outline) { gap: 16px; } .wp-block-button.is-style-grundmann-btn-outline .wp-block-button__link { background-color: transparent; color: var(--wp--preset--color--text-dark); border: 2.5px solid var(--wp--preset--color--text-dark); font-weight: 600; } .wp-block-button.is-style-grundmann-btn-outline .wp-block-button__link:hover { background-color: var(--wp--preset--color--primary-light); color: var(--wp--preset--color--primary); border-color: var(--wp--preset--color--primary); } /* Pfeil-Pseudo-Element (siehe .wp-block-button__link::after oben) gezielt fuer diese Variante wieder ausblenden - Outline-Buttons in einer Reihe sollen schlicht bleiben, ohne den sonst theme-weiten Pfeil. */ .wp-block-button.is-style-grundmann-btn-outline .wp-block-button__link::after { display: none; } /* ========================================================================== Produktkarten-Links mit Pfeil-Icon (aus dem "Mehr erfahren"-Muster). Im Original nur ein reines Icon ohne sichtbaren Text (schlecht für Barrierefreiheit) - wir behalten das Icon-Aussehen bei, ergänzen aber ein aria-label statt sichtbarem Text zu erzwingen. ========================================================================== */ .grundmann-card-spacer { flex-grow: 1; } .grundmann-card-link { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 36px; height: 36px; box-sizing: border-box; border-radius: 50%; background-color: var(--wp--preset--color--primary); margin-top: 10px; } .grundmann-card-link svg { width: 20px; height: 20px; color: #ffffff; } .grundmann-card-link:hover { background-color: var(--wp--preset--color--primary-hover); } /* ========================================================================== Header / Hauptnavigation Ziel: aufgeraeumt, minimalistisch, klar funktional - sticky beim Scrollen, dezente Trennlinie statt Schatten, ruhige Hover-/Active-Zustaende, sauber gestaltete Submenues. Keine neuen Abhaengigkeiten, reines CSS. Responsive-Strategie (Mobile First): - Dieser Abschnitt enthaelt zuerst die Basis-Styles, die auf JEDER Breite gelten (Farben, Grundabstaende, Typo) - inkl. dem Mobile- Overlay-Menue, das WordPress' Navigation-Block unterhalb von 782px automatisch zeigt (Kernverhalten, das overlayMenu:"mobile" mitbringt, siehe wp-includes/blocks/navigation/block.json). - Alles was NUR am Desktop-Hover-Dropdown haengt (Mega-Menü-Grid, Spalten, Positionierung) steht gebuendelt in einem einzigen @media (min-width: 782px) Block weiter unten, mit demselben Breakpoint, den WordPress selbst fuer den Wechsel von Mobile-Overlay zu Desktop-Menue verwendet - Header/Nav wechseln so exakt synchron. ========================================================================== */ .grundmann-header { position: sticky; top: 0; z-index: 100; background-color: #ffffff; border-bottom: 1px solid var(--wp--preset--color--surface-grey); } /* Logo: auf sehr schmalen Screens etwas kleiner, damit neben dem Menü-Button genug Luft bleibt und der zweizeilige Firmenname nicht zu dominant wirkt. */ .grundmann-header .wp-block-site-logo img { max-width: 140px; height: auto; } @media (min-width: 782px) { .grundmann-header .wp-block-site-logo img { max-width: 170px; } /* Logo etwas Luft zur Navigation (nur relevant, wenn Logo und Menü nebeneinander stehen, also ab Desktop-Breite). */ .grundmann-header .wp-block-site-logo { margin-right: 24px; } } /* Navigationslinks: ruhige Typo, klarer Hover-/Active-Zustand statt Standard-Unterstreichung. Farbe folgt dem Link-Preset aus theme.json. Gilt fuer Desktop-Menü UND Mobile-Overlay gleichermaßen. */ .grundmann-nav .wp-block-navigation-item .wp-block-navigation-item__content { color: var(--wp--preset--color--text-dark); font-weight: 500; padding: 12px 16px; border-radius: 4px; transition: color 0.15s ease, background-color 0.15s ease; } .grundmann-nav .wp-block-navigation-item .wp-block-navigation-item__content:hover, .grundmann-nav .wp-block-navigation-item .wp-block-navigation-item__content:focus { color: var(--wp--preset--color--primary); background-color: var(--wp--preset--color--surface-grey); } /* Aktueller Menüpunkt (aktuelle Seite) dezent hervorheben */ .grundmann-nav .current-menu-item > .wp-block-navigation-item__content { color: var(--wp--preset--color--primary); font-weight: 600; } /* "Notdienst" als ruhig hervorgehobener Punkt statt reinem Textlink - wichtige Info, aber ohne lauten Button-Look. */ .grundmann-nav .grundmann-nav-highlight > .wp-block-navigation-item__content { color: var(--wp--preset--color--primary); font-weight: 600; } /* Dropdown-Pfeil: bewusst komplett ausgeblendet (Desktop wie Mobile). Der kleine Pfeil (ein eigenstaendiger