noch Astras eigene "ast-width-md-4" o.ae. Klasse (width: 33.33%, fuer Astras eigenes Flexbox-Spaltensystem gedacht) - in unserem Grid sorgt das fuer verschachtelte Verkleinerung (Spalte nochmal auf 1/3 geschrumpft). Volle Breite der eigenen Grid-Zelle erzwingen. */ width: 100%; /* Astra setzt auf Blog-/Kategorie-Archiven per ".ast-article-post.ast-separate-posts" 12px Padding auf die ganze Karte (fuer Astras eigenes "separate boxed posts"-Layout gedacht) - das druecke sonst auch das Bild vom Kartenrand weg. */ padding: 0 !important; } :is(li, article).spectra-block-post .wp-block-spectra-container { background-color: #111111 !important; } /* Die 3 Homepage-Post-Grid-Bloecke (saatkorn_home_article_grid() in functions.php) werden im Frontend komplett durch unser eigenes Markup (:is(li, article).spectra-block-post) ersetzt - aber NUR dort. Im Blockeditor rendert UAGB fuer diesen Blocktyp eine rein client-seitige, bearbeitbare Live-Vorschau (article.uagb-post__inner-wrap mit editierbaren Feldern), die den PHP-Filter nie durchlaeuft und daher nie unser Markup/CSS sieht - stattdessen UAGBs eigenes helles Standard-Kartendesign (#f6f6f6), waehrend der Text auf sitewide Weiss steht -> im Editor unlesbar (heller Text auf hellem Grund). Volle Optik (Icons/Verlaeufe/Radien) ist dort technisch nicht erreichbar, ohne UAGBs Editor-Vorschau selbst zu ersetzen - hier nur der Kontrast repariert, damit die Vorschau im Editor lesbar ist. */ .wp-block-uagb-post-grid .uagb-post__inner-wrap { background-color: #111111 !important; } /* Kategorien-Zeile ueber dem Titel (z.B. "Podcast, WorkTech"): Block ist selbst auf --ast-global-color-5 (weiss) gestellt, wird aber von einer staerkeren Regel auf Schwarz ueberschrieben - auf der dunklen Karte damit praktisch unsichtbar. Ausserdem sitzt das Trennzeichen (", ") als eigenes Flex-Kind im inline-flex-Container mit gap:6px - der Gap wirkt dadurch auch VOR und NACH dem Komma und zerreisst "Podcast, WorkTech" in "Podcast , WorkTech". Gap entfernt, Abstand stattdessen nur nach dem Icon (per Margin), das Komma-Leerzeichen aus dem Trennzeichen-Text macht den Rest normal. */ :is(li, article).spectra-block-post .wp-block-post-terms { gap: 0; } :is(li, article).spectra-block-post .wp-block-post-terms, :is(li, article).spectra-block-post .wp-block-post-terms a { color: #ffffff !important; } /* Podcast-Icon (Kopfhoerer) wandert per JS (siehe saatkorn_teaser_icon_to_heading_script() in functions.php) von der Kategorien-Zeile an den Anfang der Ueberschrift (2026-09-17) - dort groesser (passend zur 27px-Headline statt der 15px-Kategorien-Zeile) und mit eigenem Abstand zum Text. */ :is(li, article).spectra-block-post .wp-block-post-title svg.saatkorn-term-icon { width: 24px; height: 24px; margin-right: 10px; vertical-align: top; display: inline-block; box-sizing: content-box; /* Box-Groesse aus dem Referenzbild nachgemessen: Icon selbst war dort ebenfalls 24px (kein Skalieren noetig), die Box drumherum aber 55px Gesamtgroesse - also 15.5px Padding pro Seite statt vorher 6px, und Radius im selben Verhaeltnis (~22% der Boxgroesse) mitskaliert. */ padding: 16px; border: 1px solid currentColor; border-radius: 12px; /* Echte Transparenz: Rahmen 37%, Fuellung 10%; Symbol bleibt deckend. */ border-color: color-mix(in srgb, currentColor 37%, transparent); background-color: color-mix(in srgb, currentColor 10%, transparent); background-clip: padding-box; } /* Der Titel-Link selbst ist "display:inline-block" mit fixer 100%-Breite - passt dadurch nie neben ein vorangestelltes Inline-Element (das Icon) auf dieselbe Zeile, sondern rutscht komplett in die naechste. Zurueck auf "inline", damit Icon + erstes Wort des Titels gemeinsam auf einer Zeile stehen. */ :is(li, article).spectra-block-post .wp-block-post-title a { display: inline; } /* Mentimeter-Teaser: Icon-Flaeche nach der Referenz (56px, 18px Radius). */ :is(li, article).spectra-block-post.post-30510 > .wp-block-spectra-container { align-items: flex-start; justify-content: flex-start; } :is(li, article).spectra-block-post.post-30510 .wp-block-post-title { display: flex; align-items: flex-start; gap: 18px; } :is(li, article).spectra-block-post.post-30510 .wp-block-post-terms { padding-left: 74px; /* 56px Icon + 18px Abstand zur Headline. */ } :is(li, article).spectra-block-post.post-30510 .wp-block-post-excerpt { padding-left: 74px !important; /* Ueberschreibt das Inline-Padding des Blocks. */ } :is(li, article).spectra-block-post.post-30510 .wp-block-post-title a { display: block; flex: 1; min-width: 0; } :is(li, article).spectra-block-post.post-30510 .wp-block-post-title svg.saatkorn-term-icon { flex: 0 0 56px; margin-right: 0; box-sizing: border-box; width: 56px; height: 56px; padding: 15px; border-radius: 18px; } /* Abstaende um die Kategorien-Zeile (2026-09-17): oben mehr Luft zum Kartenrand (0 -> 30px), unten zur Ueberschrift weniger (24px -> 5px). */ :is(li, article).spectra-block-post .wp-block-post-terms { margin-top: 30px; } :is(li, article).spectra-block-post .wp-block-post-title { margin-top: 5px !important; } /* Lesbarkeit/Rhythmus im Text-Block (2026-09-17): Titel-Zeilenhoehe war 1:1 zur Schriftgroesse (27px/27px) - bei 2-3 Zeilen zu eng, Ober-/ Unterlaengen beruehren sich fast. Datum/Anriss-Abstaende (24px bzw. ~26px, fast eine ganze Zeile) wirken dadurch, im Kontrast zur engen Ueberschrift, wie einzeln schwebende Bloecke statt ein Lesefluss - auf einheitliche 16px vereinheitlicht. Ausserdem alles ausser der Ueberschrift auf 18px (Tags/Datum/Anriss waren uneinheitlich bei 16/14/16px). */ :is(li, article).spectra-block-post .wp-block-post-title { line-height: 1.25 !important; } :is(li, article).spectra-block-post .wp-block-post-terms, :is(li, article).spectra-block-post .wp-block-post-date, :is(li, article).spectra-block-post .wp-block-post-excerpt__excerpt { font-size: 18px !important; } :is(li, article).spectra-block-post .wp-block-post-date { margin-top: 16px !important; margin-bottom: 0 !important; } :is(li, article).spectra-block-post .wp-block-post-excerpt__excerpt { margin-top: 16px !important; } /* Link-Farbe nach Kategorie: WorkTech = Tuerkis, Attitude = Pink, beide zusammen = derselbe Verlauf wie die Trennerregel (.saatkorn-divider). !important noetig, da .wp-block-post-excerpt__more-link bereits eine sitewide Standardfarbe mit !important gesetzt hat (Zeile ~896). */ :is(li, article).spectra-block-post.category-worktech:not(.category-attitude) .wp-block-post-excerpt__more-link { color: #14C8C8 !important; } :is(li, article).spectra-block-post.category-attitude:not(.category-worktech) .wp-block-post-excerpt__more-link { color: #F028AA !important; } :is(li, article).spectra-block-post.category-worktech.category-attitude .wp-block-post-excerpt__more-link { background: linear-gradient(90deg, #14C8C8, #F028AA) !important; -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; -webkit-text-fill-color: transparent !important; } /* Podcast-Icon in der Ueberschrift: dieselbe Kategorie-Farblogik wie beim "Weiterlesen"-Link, plus Rahmen mit runden Ecken (2026-09-17). Basis/ Fallback (weder WorkTech noch Attitude aus den Kategorien ablesbar) = Pink, da "color" ueber currentColor auch den Rahmen mitfaerbt. Das Icon ist ein Stroke-SVG (kein Fill) - fuer den Verlauf-Fall reicht "color" nicht (kein CSS-Gradient als currentColor moeglich), daher stroke:url(#sk-teaser-icon-gradient) auf eine echte SVG- (siehe saatkorn_teaser_icon_gradient_def() in functions.php) fuers Icon selbst und einen SVG-Hintergrund fuer den transparenten, runden Rahmen. !important noetig, da Spectras eigene Regel ".wp-block-spectra-container[class*='wp-block']. has-text-color *" (color:inherit) hoehere Spezifitaet hat (3 Klassen/ Attribute vs. unsere 2 Klassen+1 Element). */ :is(li, article).spectra-block-post .saatkorn-term-icon { color: #F028AA !important; } :is(li, article).spectra-block-post.category-worktech:not(.category-attitude) .saatkorn-term-icon { color: #14C8C8 !important; } :is(li, article).spectra-block-post.category-attitude:not(.category-worktech) .saatkorn-term-icon { color: #F028AA !important; } :is(li, article).spectra-block-post.category-worktech.category-attitude .saatkorn-term-icon { stroke: url(#sk-teaser-icon-gradient) !important; } /* Ein SVG-Hintergrund trennt transparente Fuellung und Rahmen, ohne dass sich zwei Verlaufsebenen im Inneren zu mehr Deckkraft addieren. */ :is(li, article).spectra-block-post.category-worktech.category-attitude :is(.wp-block-post-title, .wp-block-post-terms) svg.saatkorn-term-icon { border-color: transparent; border-image: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 56'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop stop-color='%2314C8C8'/%3E%3Cstop offset='1' stop-color='%23F028AA'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='.5' y='.5' width='55' height='55' rx='17.5' fill='url(%23g)' fill-opacity='.1' stroke='url(%23g)' stroke-opacity='.37'/%3E%3C/svg%3E") center / 100% 100% no-repeat border-box; } /* Mentimeter: Unter 1200px stapeln, bevor unter dem Bild Leerraum entsteht. */ @media (max-width: 1199px) { :is(li, article).spectra-block-post.post-30510 > .wp-block-spectra-container { flex-direction: column; gap: 0; } :is(li, article).spectra-block-post.post-30510 > .wp-block-spectra-container > * { box-sizing: border-box; width: 100%; max-width: 100%; min-width: 0; flex-basis: auto; } :is(li, article).spectra-block-post.post-30510 .wp-block-post-featured-image img { display: block; } :is(li, article).spectra-block-post.post-30510 > .wp-block-spectra-container > .wp-block-spectra-container { padding: 24px; } :is(li, article).spectra-block-post.post-30510 .wp-block-post-terms { margin-top: 0; } :is(li, article).spectra-block-post.post-30510 .wp-block-post-title, :is(li, article).spectra-block-post.post-30510 .wp-block-post-excerpt { padding-right: 0 !important; } :is(li, article).spectra-block-post.post-30510 .wp-block-post-title a { overflow-wrap: anywhere; } } @media (max-width: 600px) { :is(li, article).spectra-block-post.post-30510 { border-radius: 20px; } :is(li, article).spectra-block-post.post-30510 > .wp-block-spectra-container > .wp-block-spectra-container { padding: 20px 16px; } :is(li, article).spectra-block-post.post-30510 .wp-block-post-title { gap: 12px; font-size: 22px !important; } :is(li, article).spectra-block-post.post-30510 .wp-block-post-title svg.saatkorn-term-icon { flex-basis: 44px; width: 44px; height: 44px; padding: 9px; border-radius: 14px; } :is(li, article).spectra-block-post.post-30510 .wp-block-post-terms, :is(li, article).spectra-block-post.post-30510 .wp-block-post-excerpt { padding-left: 56px !important; } :is(li, article).spectra-block-post.post-30510 .wp-block-post-terms, :is(li, article).spectra-block-post.post-30510 .wp-block-post-excerpt__excerpt, :is(li, article).spectra-block-post.post-30510 .wp-block-post-excerpt__more-link { font-size: 16px !important; } } /* Weitere Startseiten-Teaser: gleiche Text- und Icon-Geometrie wie Johnny. */ @media (max-width: 767px) { .wp-block-spectra-pro-loop-builder-child-template[data-spectra-id="spectra-mfdg0vwg-hjd0oi"] { grid-template-columns: minmax(0, 1fr) !important; } } :is(li, article).spectra-block-post.saatkorn-secondary-teaser > .wp-block-spectra-container { border: 0 !important; gap: 0; align-items: stretch; } :is(li, article).spectra-block-post.saatkorn-secondary-teaser .wp-block-post-featured-image { width: 100%; margin: 0; } :is(li, article).spectra-block-post.saatkorn-secondary-teaser .wp-block-post-featured-image img { display: block; } :is(li, article).spectra-block-post.saatkorn-secondary-teaser > .wp-block-spectra-container > .wp-block-spectra-container { display: block; padding: 24px; width: 100%; box-sizing: border-box; } :is(li, article).spectra-block-post.saatkorn-secondary-teaser .wp-block-post-title { display: flex; align-items: flex-start; gap: 18px; font-size: 27px !important; } :is(li, article).spectra-block-post.saatkorn-secondary-teaser .wp-block-post-title a { display: block; flex: 1; min-width: 0; overflow-wrap: anywhere; } :is(li, article).spectra-block-post.saatkorn-secondary-teaser .wp-block-post-title svg.saatkorn-term-icon { box-sizing: border-box; flex: 0 0 56px; width: 56px; height: 56px; padding: 15px; margin-right: 0; border-radius: 18px; } :is(li, article).spectra-block-post.saatkorn-secondary-teaser .wp-block-post-terms, :is(li, article).spectra-block-post.saatkorn-secondary-teaser .wp-block-post-date, :is(li, article).spectra-block-post.saatkorn-secondary-teaser .wp-block-post-excerpt { padding-left: 74px !important; } :is(li, article).spectra-block-post.saatkorn-secondary-teaser .wp-block-post-terms { margin-top: 0 !important; line-height: 1.5 !important; flex-wrap: wrap; } :is(li, article).spectra-block-post.saatkorn-secondary-teaser .wp-block-post-date { font-weight: 400; } @media (max-width: 600px) { :is(li, article).spectra-block-post.saatkorn-secondary-teaser { border-radius: 20px; } :is(li, article).spectra-block-post.saatkorn-secondary-teaser > .wp-block-spectra-container > .wp-block-spectra-container { padding: 20px 16px; } :is(li, article).spectra-block-post.saatkorn-secondary-teaser .wp-block-post-title { font-size: 22px !important; gap: 12px; } :is(li, article).spectra-block-post.saatkorn-secondary-teaser .wp-block-post-title svg.saatkorn-term-icon { flex-basis: 44px; width: 44px; height: 44px; padding: 9px; border-radius: 14px; } :is(li, article).spectra-block-post.saatkorn-secondary-teaser .wp-block-post-terms, :is(li, article).spectra-block-post.saatkorn-secondary-teaser .wp-block-post-date, :is(li, article).spectra-block-post.saatkorn-secondary-teaser .wp-block-post-excerpt { padding-left: 56px !important; } :is(li, article).spectra-block-post.saatkorn-secondary-teaser .wp-block-post-terms, :is(li, article).spectra-block-post.saatkorn-secondary-teaser .wp-block-post-date, :is(li, article).spectra-block-post.saatkorn-secondary-teaser .wp-block-post-excerpt__excerpt, :is(li, article).spectra-block-post.saatkorn-secondary-teaser .wp-block-post-excerpt__more-link { font-size: 16px !important; } } /* FAQ-Kopf: tuerkise Icon-Box wie bei den Teasern. */ .uagb-block-8490f342 .uagb-ifb-icon-wrap { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 56px; width: 56px; height: 56px; padding: 15px; border: 1px solid rgb(20 200 200 / 37%); border-radius: 18px; background: rgb(20 200 200 / 10%); background-clip: padding-box; } .uagb-block-8490f342 .uagb-ifb-icon-wrap svg { width: 24px; height: 24px; min-width: 24px; fill: #14C8C8; color: #14C8C8; } @media (max-width: 600px) { .uagb-block-8490f342 .uagb-ifb-icon-wrap { flex-basis: 44px; width: 44px; height: 44px; padding: 9px; border-radius: 14px; } } .uagb-block-8490f342 .uagb-ifb-icon-wrap svg, .uagb-block-8490f342 .uagb-ifb-icon-wrap svg path { fill: #14C8C8 !important; color: #14C8C8 !important; } .uagb-block-8490f342 .uagb-ifb-icon-wrap { margin-right: 18px !important; } .uagb-block-8490f342.uagb-infobox-image-valign-middle { align-items: flex-start; } .uagb-block-8490f342 .uagb-ifb-icon-wrap { align-self: flex-start; margin-top: 0; } /* Info-Box neben dem Attitude-Post-Grid (2026-09-23): an unser Teaser- Kartendesign angeglichen - Icon+Titel+Text statt Bild+Anriss, sonst gleiche Kartenhuelle/Typografie wie li.spectra-block-post. */ .uagb-block-224527f1 { background-color: #111111; border: 1px solid #373737; border-radius: 28px; padding: 32px; height: 100%; box-sizing: border-box; text-align: left; } .uagb-block-224527f1 .uagb-ifb-content { text-align: left !important; } .uagb-block-224527f1 .uagb-ifb-icon-wrap { margin-left: 0 !important; margin-right: auto !important; } .uagb-block-224527f1 .uagb-ifb-icon-wrap { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 56px; width: 56px; height: 56px; padding: 15px; margin-bottom: 20px; border: 1px solid rgb(240 40 170 / 37%); border-radius: 18px; background: rgb(240 40 170 / 10%); background-clip: padding-box; } .uagb-block-224527f1 .uagb-ifb-icon-wrap svg, .uagb-block-224527f1 .uagb-ifb-icon-wrap svg path { width: 24px; height: 24px; min-width: 24px; fill: #F028AA !important; color: #F028AA !important; } .uagb-block-224527f1 .uagb-ifb-title { color: #ffffff !important; font-family: "Inter Tight", sans-serif; font-size: 27px; font-weight: 700; line-height: 1.25; margin: 0 0 16px; } .uagb-block-224527f1 .uagb-ifb-desc { color: #ffffff !important; font-size: 18px; line-height: 1.5; margin: 0; } /* Podcast-Player-Box unter der Info-Box (2026-09-24): gleiche Kartenhuelle wie die Info-Box daneben/darueber - Border/Hintergrund/Radius/Padding. */ .uagb-block-137dfeba { background-color: #111111; border: 1px solid #373737 !important; border-radius: 28px !important; padding: 32px !important; box-sizing: border-box; } .uagb-block-137dfeba h3 { font-size: 27px !important; font-weight: 700 !important; } /* Sechs Artikel unter den FAQs: drei Spalten, Tablet zwei, mobil eine. */ .saatkorn-home-article-grid { /* !important: auf Blog-/Kategorie-Archivseiten sitzt diese Klasse zusaetzlich zu Astras eigenem ".ast-row" (siehe saatkorn_blog_archive_grid_end() in functions.php) - Astras eigene, spezifischere dynamische CSS-Regeln fuer ".ast-row" (Grid-Spalten je nach Customizer-Einstellung) wuerden diese sonst ueberschreiben. */ display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 48px !important; list-style: none; /* !important: Astras ".entry-content ul, .entry-content ol" (padding- left: 20px) ist spezifischer und gewinnt sonst, wenn das Grid (wie 8be79ade) direkt im Seiteninhalt statt in einem UAGB-Container sitzt. */ padding: 0 !important; margin: 0; } .saatkorn-home-article-grid .wp-block-post-title a, .saatkorn-home-article-grid .wp-block-post-excerpt__excerpt { /* !important: einzelne Post-Grid-Bloecke (z.B. 8be79ade) haben eine per Block-Instanz generierte ".wp-elements-N a"-Regel mit eigener Linkfarbe (schwarz), die sonst gewinnt. */ color: #fff !important; } .saatkorn-home-article-grid .wp-block-post-title { font-weight: 700; margin-bottom: 0; } .saatkorn-home-article-grid .wp-block-post-featured-image img { width: 100%; height: auto; } .saatkorn-home-article-grid .wp-block-post-excerpt__more-link { color: #F028AA; } @media (max-width: 767px) { .saatkorn-home-article-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 32px !important; } } /* Grid soll die volle Breite seines Containers nutzen (wie die Ueberschrift im selben Abschnitt) statt zusaetzlich eingerueckt zu werden - vorher hier nochmal calc(100% - 80px) + margin: auto, was das Grid um 40px nach innen gegenueber Ueberschrift/Text im selben ".uagb-container-inner-blocks-wrap" verschoben hat (2026-09-29 behoben). */ .uagb-container-inner-blocks-wrap > ul.saatkorn-home-article-grid { width: 100%; margin: 0; padding: 0; } .saatkorn-home-article-grid > :is(li, article) > .wp-block-spectra-container { padding: 0; } .saatkorn-home-article-grid .wp-block-post-terms > span { white-space: pre; } /* Weiterlesen-Link an den unteren Kartenrand (2026-09-18): Karten in einer Grid-Reihe sind durch den Grid-Default (align-items: stretch) schon gleich hoch - hier nur noch die Flex-Kette durchreichen, damit der Excerpt-Block den uebrigen Platz fuellt und der Link per margin-top:auto an dessen Ende rutscht. Gilt fuer jede Teaser-Karte im Grid, auch die reduzierte --simple-Variante (dort ohne Kategorien/Titel). */ .saatkorn-home-article-grid :is(li, article).spectra-block-post { display: flex; flex-direction: column; } .saatkorn-home-article-grid :is(li, article).spectra-block-post > .wp-block-spectra-container, .saatkorn-home-article-grid :is(li, article).spectra-block-post > .wp-block-spectra-container > .wp-block-spectra-container { display: flex; flex-direction: column; flex: 1; } .saatkorn-home-article-grid .wp-block-post-excerpt { display: flex; flex-direction: column; flex: 1; /* WP-Core setzt hier serienmaessig margin-bottom: var(--wp--style--block-gap) (24px) zusaetzlich zum eh schon vorhandenen 24px-Innenabstand des umschliessenden .wp-block-spectra-container (Spectra-Default) - das ergaebe zusammen ~50px Abstand zum Kartenrand statt der gewuenschten 20-25px. Hier entfernt, das Spectra-Padding allein reicht. */ margin-bottom: 0; } .saatkorn-home-article-grid .wp-block-post-excerpt__more-text { margin-top: auto; /* Astras Standard-Absatzabstand (p { margin-bottom: 1.75em }) wuerde sonst zusaetzlich zum padding-bottom oben addieren. */ margin-bottom: 0; } .uagb-container-inner-blocks-wrap > ul.saatkorn-home-article-grid { width: 100% !important; margin: 0 !important; padding: 0 !important; } @media (min-width: 768px) and (max-width: 1199px) { .saatkorn-home-article-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } /* Vier Boxen am Seitenende (Block b4660f1d): gleiches Karten-Markup, nur vier statt drei Spalten auf Desktop - Tablet/Mobile-Verhalten (2 bzw. 1 Spalte) uebernimmt die Basisklasse oben unveraendert. */ .saatkorn-home-article-grid--4col { /* !important: muss die !important-Basisregel von .saatkorn-home-article-grid (siehe dort - wegen Astras .ast-row auf Blog-/Kategorie-Archiven noetig) ueberschreiben koennen. */ grid-template-columns: repeat(4, minmax(0, 1fr)) !important; /* Kartenabstand an die 12er-Reihe (--6col) angeglichen (2026-09-29) - vorher hier keine eigene gap, also 48px von der Basisklasse geerbt, waehrend --6col mit 24px arbeitet. Gilt bewusst an allen Breakpoints, genau wie bei --6col (dort ebenfalls keine eigene Mobile-/Tablet- Ueberschreibung fuer gap). */ gap: 24px !important; } @media (min-width: 768px) and (max-width: 1199px) { .saatkorn-home-article-grid--4col { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } /* Vierer-Grid (und die schmale Einbettung 8be79ade, die dasselbe Kartendesign nutzt): kompaktes Icon bei den Kategorien, volle Textbreite. */ .saatkorn-home-article-grid--4col :is(li, article).saatkorn-secondary-teaser .wp-block-post-terms, .saatkorn-home-article-grid--4col :is(li, article).saatkorn-secondary-teaser .wp-block-post-excerpt, .saatkorn-home-article-grid--narrow :is(li, article).saatkorn-secondary-teaser .wp-block-post-terms, .saatkorn-home-article-grid--narrow :is(li, article).saatkorn-secondary-teaser .wp-block-post-excerpt { padding-left: 0 !important; } .saatkorn-home-article-grid--4col :is(li, article).saatkorn-secondary-teaser .wp-block-post-terms, .saatkorn-home-article-grid--narrow :is(li, article).saatkorn-secondary-teaser .wp-block-post-terms { display: flex; align-items: flex-start; flex-wrap: nowrap; gap: 10px; margin-bottom: 12px !important; } .saatkorn-home-article-grid--4col .saatkorn-category-labels, .saatkorn-home-article-grid--narrow .saatkorn-category-labels { white-space: normal !important; min-width: 0; } .saatkorn-home-article-grid--4col .wp-block-post-terms svg.saatkorn-term-icon, .saatkorn-home-article-grid--narrow .wp-block-post-terms svg.saatkorn-term-icon { box-sizing: border-box; flex: 0 0 32px; width: 32px; height: 32px; padding: 6px; margin: 0; border: 1px solid color-mix(in srgb, currentColor 37%, transparent); border-radius: 10px; background-color: color-mix(in srgb, currentColor 10%, transparent); background-clip: padding-box; } .saatkorn-home-article-grid--4col :is(li, article).saatkorn-secondary-teaser .wp-block-post-title, .saatkorn-home-article-grid--narrow :is(li, article).saatkorn-secondary-teaser .wp-block-post-title { display: block; } @media (max-width: 767px) { .saatkorn-home-article-grid--4col { grid-template-columns: minmax(0, 1fr) !important; } } /* Sechser-Reihe (Block 5f6289f5, 2026-09-18): reduzierteste Kartenvariante - nur Bild + Anriss (10 Woerter) + Weiterlesen-Link, kein Titel/keine Kategorien (siehe $is_simple in saatkorn_home_article_grid()). Nutzt dieselbe 1200px/768px-Staffelung wie die Vierer-Reihe, nur mit mehr Spalten. */ .saatkorn-home-article-grid--6col { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; gap: 24px !important; } @media (min-width: 768px) and (max-width: 1199px) { .saatkorn-home-article-grid--6col { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } } @media (max-width: 767px) { .saatkorn-home-article-grid--6col { grid-template-columns: minmax(0, 1fr) !important; } } .saatkorn-home-article-grid--6col :is(li, article).saatkorn-secondary-teaser .wp-block-post-excerpt { padding-left: 0 !important; } /* Innenabstand der Textbox auf 15px (2026-09-18) - Spectra-Default waere 24px (siehe :is(li, article).spectra-block-post > .wp-block-spectra-container > .wp-block-spectra-container ohne eigene Regel). */ .saatkorn-home-article-grid--6col :is(li, article).spectra-block-post > .wp-block-spectra-container > .wp-block-spectra-container { padding: 15px; } /* Schmale Einbettung (8be79ade, 2026-09-23): sitzt in einer 66%-Spalte neben der Info-Box, nicht auf voller Seitenbreite - eigenes, bewusst knappes Spaltenlimit statt der viewport-breiten --6col-Staffelung. */ .saatkorn-home-article-grid--narrow { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 24px !important; } @media (max-width: 480px) { .saatkorn-home-article-grid--narrow { grid-template-columns: minmax(0, 1fr) !important; } } /* Grid-Breite/-Rand auch in Tablet-Breakpoints an den Container angleichen (kein Extra-Einzug mehr, siehe Begruendung oben bei der Basis-Regel; box-sizing/min-width bleiben als Absicherung gegen Grid-Gap-Overflow). */ @media (max-width: 1199px) { #page .uagb-container-inner-blocks-wrap > ul.saatkorn-home-article-grid { box-sizing: border-box; width: 100% !important; max-width: 100% !important; min-width: 0; margin-inline: 0 !important; } } @media (max-width: 767px) { #page .uagb-container-inner-blocks-wrap > ul.saatkorn-home-article-grid { width: 100% !important; max-width: 100% !important; } } /* /blog, /category und Suchergebnisse: mehr Luft links/rechts zum Fensterrand. Astras eigener ".ast-container" liefert hier serienmaessig nur 20px (Desktop) bzw. 9px (Mobil) - bewusst nur fuer die Archiv-Seiten erhoeht, nicht global, damit andere Seitentypen (Startseite, Einzelbeitraege) ihr bestehendes Abstandsverhalten behalten. */ :is(body.blog, body.category, body.search) .ast-container { padding-left: 40px; padding-right: 40px; } @media (max-width: 767px) { :is(body.blog, body.category, body.search) .ast-container { padding-left: 20px; padding-right: 20px; } } /* Suchergebnisse (body.search): Astras eigene dynamische CSS setzt den dunklen Banner-Hintergrund (var(--ast-global-color-6), siehe /blog) nur fuer "richtige" Archivseiten - auf der Suchergebnisseite bleibt trotz identischer data-Attribute (data-post-type="post", data-banner- background-type="custom") die helle Default-Titelleisten-Farbe (var(--ast-title-layout-bg), #eee) stehen, mit weissem (unlesbarem) Text. Hier direkt auf das gleiche Dunkel-Theme wie /blog angeglichen. */ body.search .ast-archive-entry-banner { background: #000 !important; } /* /blog, /category, Suchergebnisse: etwas mehr Abstand zwischen Ueberschrift und Untertitel im Archiv-Banner - Astras Standard-Ueberschriften-Abstand (20px, global fuer h1-h6) wirkte hier zu knapp. Bewusst auf den Banner beschraenkt statt die globale Regel zu erhoehen. */ .ast-archive-entry-banner h1 { margin-bottom: 32px; } /* /blog und /category: Astras Archiv-Header (".ast-archive-entry-banner") nutzt feste em-Werte fuer sein Padding (11em 20em 7em Desktop, per Astra- eigener Regel 8em 4em 5em ab 544px) UND ein festes "min-height: 400px" ohne eigene Breakpoint-Anpassung - ohne Hintergrundbild bleibt das auf dem Handy eine grosse leere schwarze Flaeche ueber/unter der kurzen Ueberschrift. Kompakteres Padding + min-height fuer schmale Breakpoints, !important da Astras eigene dynamische CSS-Regel dieselbe Selektor- Spezifitaet hat. */ @media (max-width: 1024px) { /* Tablet-Zwischenbereich: Astras eigene 544px-Regel greift hier noch nicht, das Desktop-Padding (20em seitlich) ist auf 768-1024px aber schon breiter als sinnvoll - drueckt "WorkTech" in eine eigene Zeile. */ .ast-archive-entry-banner[data-post-type="post"] { padding: 4em 3em 3em !important; min-height: 320px !important; } } @media (max-width: 544px) { .ast-archive-entry-banner[data-post-type="post"] { padding: 3em 1.5em 2.5em !important; min-height: 280px !important; } } @media (max-width: 375px) { .ast-archive-entry-banner[data-post-type="post"] { padding: 2.5em 1.25em 2em !important; min-height: 260px !important; } } /* 404-Seite ("Seite nicht gefunden"): Astras Default-Ueberschriftenfarbe (var(--ast-global-color-2), fast schwarz/#110b11) ist auf unserem schwarzen Seitenhintergrund praktisch unsichtbar - dazu mehr Abstand zwischen Ueberschrift und Untertitel (Astra setzt hier serienmaessig margin-bottom: 0 auf die Ueberschrift). */ .ast-404-layout-1 h1.page-title { color: #fff !important; margin-bottom: 24px !important; } /* ========================================================================== "Ueber Gero Hesse"-Seite (2026-09-30): einheitlicher Abstand vor allen Textbloecken. Ueber Gutenberg-Block-Attribute (style.spacing.margin) greift bei core/paragraph in diesem (klassischen) Theme nicht - kein theme.json mit "spacing.margin"-Support -, deshalb direkt per CSS. ========================================================================== */ :is(.page-id-30557, .page-id-33629) .entry-content .wp-block-paragraph, :is(.page-id-30557, .page-id-33629) .entry-content .uagb-desc-text, :is(.page-id-30557, .page-id-33629) .entry-content .uagb-ifb-desc { margin-top: 24px; } /* Kopfbereich (Text links, Bild rechts): Container zentrierte die beiden Spalten vertikal (align-items: center), dadurch startete das (hoehere) Bild sichtbar tiefer als der Text. Beide oben ausrichten. */ :is(.page-id-30557, .page-id-33629) .uagb-block-fe59c320 .uagb-container-inner-blocks-wrap { align-items: flex-start !important; } /* H1 + Subline oben auf der Seite: an die /blog/-Archiv-Banner-Ueberschrift angeglichen (Schriftgroesse, -gewicht, Zeilenhoehe, Abstand). Gleiches Muster fuer die Kontakt-Seite (2541/33642, 2026-10-01). */ :is(.page-id-30557, .page-id-33629, .page-id-2541, .page-id-33642) h1.wp-block-heading { font-size: 60px; font-weight: 600; line-height: 63px; margin-bottom: 20px !important; } @media (max-width: 600px) { :is(.page-id-30557, .page-id-33629, .page-id-2541, .page-id-33642) h1.wp-block-heading { font-size: 32px; line-height: 33.6px; } } :is(.page-id-30557, .page-id-33629, .page-id-2541, .page-id-33642) h1.wp-block-heading + .wp-block-paragraph { margin-top: 0 !important; } /* Kontakt-Seite (anders als About-Gero/EN, die zweispaltig und linksbuendig sind): H1 + Subline zentriert, exakt wie auf /blog/ (".ast-container" dort hat text-align:center) - Feedback 2026-10-01. */ :is(.page-id-2541, .page-id-33642) h1.wp-block-heading, :is(.page-id-2541, .page-id-33642) h1.wp-block-heading + .wp-block-paragraph { text-align: center; } /* Text/Bild-Bereich (fe59c320) war ursprünglich als allererste Sektion der Seite designt und hat entsprechend viel Top-Padding (110px Mobile, 120px Tablet). Hier auf der Seite folgt er aber schon auf H1+Subline, wodurch der Abstand doppelt wirkt - reduziert. */ @media (max-width: 600px) { :is(.page-id-30557, .page-id-33629) .uagb-block-fe59c320 { padding-top: 40px !important; } } @media (min-width: 601px) and (max-width: 1024px) { :is(.page-id-30557, .page-id-33629) .uagb-block-fe59c320 { padding-top: 60px !important; } } /* Mehrspaltige Reihen (3-Spalten "Hauptberuflich/EMBRACE Family/Beide Rollen" und 2-Spalten "Bevor ich Unternehmer wurde/Mit diesen Themen"): die Reihen-Container hatten align-items: center, wodurch kuerzere Spalten gegenueber laengeren nach unten verschoben wurden. Auf Reihen-Ebene (statt pro Spalte) einheitlich oben ausgerichtet. */ :is(.page-id-30557, .page-id-33629) .uagb-block-02607fe4 > .uagb-container-inner-blocks-wrap, :is(.page-id-30557, .page-id-33629) .uagb-block-be63c855 > .uagb-container-inner-blocks-wrap { align-items: flex-start !important; } /* Inhaltsboxen auf 1360px Breite ziehen, wie auf der Startseite. Ueber die UAGB-Block-Attribute (innerContentCustomWidthDesktop) griff das bei den Root-Parent-Containern nicht zuverlässig (UAGB-eigenes CSS-Caching), deshalb direkt per CSS. */ :is(.page-id-30557, .page-id-33629) .uagb-block-9bbab02c > .uagb-container-inner-blocks-wrap, :is(.page-id-30557, .page-id-33629) .uagb-block-02607fe4 > .uagb-container-inner-blocks-wrap, :is(.page-id-30557, .page-id-33629) .uagb-block-be63c855 > .uagb-container-inner-blocks-wrap { width: min( 100%, 1360px ) !important; max-width: 1360px !important; margin-left: auto !important; margin-right: auto !important; } /* Diese drei Blöcke hatten (anders als die uebrigen Container auf der Seite) gar kein Seiten-Padding gesetzt - Text lief bei schmalen Breiten bis an den Bildschirmrand. Werte an fe59c320 angeglichen. */ :is(.page-id-30557, .page-id-33629) .uagb-block-9bbab02c, :is(.page-id-30557, .page-id-33629) .uagb-block-02607fe4, :is(.page-id-30557, .page-id-33629) .uagb-block-be63c855 { padding-left: 24px !important; padding-right: 24px !important; } @media (min-width: 601px) { :is(.page-id-30557, .page-id-33629) .uagb-block-9bbab02c, :is(.page-id-30557, .page-id-33629) .uagb-block-02607fe4, :is(.page-id-30557, .page-id-33629) .uagb-block-be63c855 { padding-left: 32px !important; padding-right: 32px !important; } } @media (min-width: 1025px) { :is(.page-id-30557, .page-id-33629) .uagb-block-9bbab02c, :is(.page-id-30557, .page-id-33629) .uagb-block-02607fe4, :is(.page-id-30557, .page-id-33629) .uagb-block-be63c855 { padding-left: 40px !important; padding-right: 40px !important; } } /* Ueberschriften-Sektionen "Zwei Perspektiven..." (5ca94c41) und "Ich kenne beide Seiten..." (d4f16084) hatten ein extrem hohes bottom-padding auf Tablet (200px!) und Mobile (120px) geerbt, obwohl Desktop nur 40px nutzt - dadurch riesiger Sprung zur folgenden Textreihe. Auf einen zum Desktop-Wert passenden Wert reduziert. */ @media (max-width: 1024px) { :is(.page-id-30557, .page-id-33629) .uagb-block-5ca94c41, :is(.page-id-30557, .page-id-33629) .uagb-block-d4f16084 { padding-bottom: 40px !important; } } /* ========================================================================== WorkTech-Sidebar-Box (Einzelbeitraege): Anbieter-Name + Kategorie hatten dieselbe weisse Textfarbe, keine visuelle Hierarchie. Kategorie als kleines Pill-Tag mit Tuerkis-Akzent, passend zu den runden Buttons/ Trust-Bar-Icons, die sonst auf der Seite verwendet werden (2026-09-30). ========================================================================== */ .saatkorn-worktech-directory .saatkorn-worktech-category { display: inline-block; margin-top: 6px; padding: 2px 10px; border: 1px solid #14C8C8; border-radius: 20px; font-size: 12px; color: #14C8C8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .saatkorn-worktech-directory li { display: block; } .saatkorn-worktech-directory li + li { margin-top: 16px; } .saatkorn-worktech-directory .saatkorn-worktech-item { display: flex; align-items: flex-start; gap: 12px; } .saatkorn-worktech-directory .saatkorn-worktech-logo { width: 56px; height: 56px; padding: 8px; border-radius: 14px; box-sizing: border-box; object-fit: contain; background-color: #ffffff; flex-shrink: 0; } .saatkorn-worktech-directory .saatkorn-worktech-text { display: flex; flex-direction: column; align-items: flex-start; } .saatkorn-worktech-directory .saatkorn-worktech-name { font-weight: 600; } /* ========================================================================== Kopfbereich aller Einzelbeitraege (Titel/Meta/Beitragsbild-Banner): an die Grosszuegigkeit des "get-a-quote"-Hero-Bereichs angeglichen, aber Top-Abstand zum Menu etwas reduziert (Feedback 2026-09-30). Betrifft sitehweit alle Beitraege, nicht nur einzelne Seiten. ========================================================================== */ .single-post .ast-single-entry-banner { padding-top: 80px; padding-bottom: 24px; } .single-post .ast-single-entry-banner .post-thumb-img-content { margin-top: 40px; } @media (min-width: 601px) { .single-post .ast-single-entry-banner { padding-top: 90px; padding-bottom: 32px; } .single-post .ast-single-entry-banner .post-thumb-img-content { margin-top: 50px; } } @media (min-width: 1025px) { .single-post .ast-single-entry-banner { padding-top: 140px; padding-bottom: 40px; } .single-post .ast-single-entry-banner .post-thumb-img-content { margin-top: 55px; } } /* Content-Bereich (unterhalb des Banners) war ueber einen separaten, engeren Container auf 750px begrenzt (Quelle nicht als einzelne CSS-Regel auffindbar, vermutlich berechnete Astra-Variable) - auf 1024px erweitert, wie vom Banner-Bereich bereits genutzt. */ .single-post .site-content > .ast-container, .single-post .ast-single-entry-banner .ast-container { max-width: 1024px !important; } /* Beitragsbild im Banner: Rundung wie im Rest der Seite ueblich (50px, z.B. get-a-quote-Hero-Bild, Teaser-Karten). */ .single-post .ast-single-entry-banner .post-thumb-img-content img { border-radius: 50px; } @media (max-width: 600px) { .single-post .ast-single-entry-banner .post-thumb-img-content img { border-radius: 24px; } } /* Trennlinien (WordPress-Separator-Block) in Beitragstexten: Verlauf Tuerkis -> Pink wie auf der Startseite (saatkorn-divider-Konvention), statt Astras Standard-Graufarbe. */ .single-post .entry-content hr, .single-post .entry-content .wp-block-separator { height: 3px; border: none; background: linear-gradient(90deg, #14C8C8, #F028AA); opacity: 1; } /* Weitere, ausserhalb des Textbereichs liegende Trenner auf der Beitragsseite (Astra-eigene graue Border-Linien): Autoren-Box und Beitrags-Navigation ("Zurueck"/"Weiter"). Gleicher Verlauf, hier per border-image umgesetzt (border-top unterstuetzt keine Farbverlaeufe direkt). */ .single-post .ast-single-author-box, .single-post .post-navigation { border-top: 3px solid transparent; border-image: linear-gradient(90deg, #14C8C8, #F028AA) 1; } /* Vertikale Trennlinie zwischen Content und Sidebar (beide Seiten haben ihre eigene 1px-Border) - gleicher Verlauf, aber vertikal (oben nach unten) und nur 1px, wie gewuenscht. Astra stapelt Content/Sidebar ab max-width:1280px per flex-direction:column (".site-content .ast-container"), die vertikale Trennlinie ist dann sinnlos - ab derselben Breite entfernen. */ .single-post .content-area.primary { border-right: 1px solid transparent; border-image: linear-gradient(180deg, #14C8C8, #F028AA) 1; padding-right: 32px !important; } .single-post .widget-area.secondary { border-left: 1px solid transparent; border-image: linear-gradient(180deg, #14C8C8, #F028AA) 1; padding-left: 24px !important; } @media (max-width: 1280px) { .single-post .content-area.primary, .single-post .widget-area.secondary { border: none; padding-left: 0 !important; padding-right: 0 !important; } } /* Astras eigene dynamische Customizer-CSS setzt den Content-Hintergrund (".site-content") unterhalb von max-width:1280px auf --ast-global-color-4 (#ffffff, nie fuer unser Dark-Theme angepasst) statt Schwarz wie auf Desktop - dadurch verschwindet weisser Text auf weissem Grund. Erzwingt Schwarz unabhaengig von der Breite. */ .ast-narrow-container .site-content { background-color: #000000 !important; } /* Sidebar-Widgets "Passende WorkTech-Anbieter" und "Recent Posts" als Karte, wie die Teaser-Karten auf der Startseite (gleiche Werte: 1px #373737 Border, 28px Radius, #111111 Hintergrund - siehe .spectra-block-post). */ .single-post .widget-area.secondary .saatkorn-worktech-directory, .single-post .widget-area.secondary .widget_block:has(.wp-block-latest-posts) { border: 1px solid #373737; border-radius: 28px; background-color: #111111; padding: 24px; } /* Promo-Text der "Entdecke WorkTech-Anbieter"-Box: Zeilenhoehe an den Fliesstext im Content angleichen (dort 1.7em, hier vorher 2em Default). */ .saatkorn-worktech-directory-promo p { line-height: 1.7em; margin-bottom: 16px; } /* Kopfhoerer-/Dokument-Icon vor jedem "Recent Posts"-Eintrag (analog zu den Teaser-Karten): Link als Flex-Container, damit Icon und Titel sauber nebeneinander sitzen statt Icon einfach nur inline vor dem Text. */ .wp-block-latest-posts__post-title { display: inline-flex; align-items: flex-start; gap: 8px; } .wp-block-latest-posts__post-title .saatkorn-term-icon { margin-top: 3px; } /* Ueberschriften "WorkTech im Fokus"/"Entdecke WorkTech-Anbieter" und "Recent Posts": an den Teaser-Headline-Stil der Startseite angeglichen, Inter Tight - siehe .saatkorn-home-article-grid .wp-block-post-title). Braucht die #secondary-ID im Selektor, sonst gewinnt Astras eigene Regel "#secondary .widget-title" (ID schlaegt reine Klassen-Selektoren). Bei "Recent Posts" (core/latest-posts-Widget) heisst die Ueberschrift nicht .widget-title, sondern .wp-block-heading. */ .single-post #secondary .saatkorn-worktech-directory .widget-title, .single-post #secondary .widget_block:has(.wp-block-latest-posts) .wp-block-heading { font-family: "Inter Tight", sans-serif; font-size: 22px; font-weight: 700; line-height: 27.5px; color: #ffffff; } /* "Recent Posts"-Icons farblich wie auf der Startseite (Teaser-Karten): WorkTech tuerkis, Attitude pink, beide = Verlauf. Der Link-Text selbst bleibt weiss (nur .saatkorn-term-icon wird eingefaerbt). Gleiches getoentes Rahmen-Badge wie bei den grossen Teaser-Icons (padding+border+ radius+color-mix-Fuellung), hier auf die kleinere 15px-Iconflaeche herunterskaliert (halbe Groesse: 8px Padding/Radius statt 16px/12px). */ .wp-block-latest-posts li .saatkorn-term-icon { color: #F028AA; box-sizing: content-box; padding: 8px; border: 1px solid currentColor; border-radius: 8px; border-color: color-mix(in srgb, currentColor 37%, transparent); background-color: color-mix(in srgb, currentColor 10%, transparent); background-clip: padding-box; } .wp-block-latest-posts li.category-worktech:not(.category-attitude) .saatkorn-term-icon { color: #14C8C8; } .wp-block-latest-posts li.category-attitude:not(.category-worktech) .saatkorn-term-icon { color: #F028AA; } .wp-block-latest-posts li.category-worktech.category-attitude .saatkorn-term-icon { stroke: url(#sk-teaser-icon-gradient); } /* Faengt der Content mit einer Ueberschrift an (z.B. Redakteur setzt eine H1 als ersten Block), erzeugt Astras eigene Regel ".entry-content :where(h1,...) { margin-top: 1.5em }" trotzdem Abstand nach oben - hier nicht erwuenscht, der Content soll direkt anfangen. */ .entry-content > :first-child:is(h1, h2, h3, h4, h5, h6) { margin-top: 0; } /* ========================================================================== Kontakt-Seite: 50/50-Layout - links das Kontaktformular, rechts die beiden Info-Karten (Inhaltliche Anfragen / Werbeanfragen) uebereinander (Feedback 2026-10-01). Gleiche Karten-Tokens wie die Teaser-Karten (1px #373737, 28px Radius, #111111 Hintergrund, siehe :is(li, article).spectra-block-post). ========================================================================== */ .saatkorn-contact-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 40px; align-items: start; } .saatkorn-contact-inquiries { display: flex; flex-direction: column; gap: 24px; } .saatkorn-contact-card, .saatkorn-contact-form-card { border: 1px solid #373737; border-radius: 28px; background-color: #111111; padding: 32px; } .saatkorn-contact-card h2, .saatkorn-contact-form-card h2 { margin-top: 0; font-size: 22px; font-weight: 700; } .saatkorn-contact-card p, .saatkorn-contact-form-card p { margin-bottom: 0; } .saatkorn-contact-form-card .srfm-form-container { margin-top: 16px; background: transparent !important; } /* SureForms' Label-Farbe (rgb(30,30,30), fuer deren eigenen weissen Formular-Hintergrund gedacht) war auf der dunklen Karte quasi unsichtbar - erst nach dem Entfernen des weissen Hintergrunds aufgefallen. */ .saatkorn-contact-form-card .srfm-block-label { color: #ffffff !important; } /* Submit-Button im Hero-Outline-Stil (siehe .uagb-buttons-repeater.wp- block-button__link: 30px Radius, 2px Rand, 15px/30px Padding, Atkinson Hyperlegible Mono 16px/600) - hier bewusst in Pink statt Marken-abhaengig Cyan/Pink, da auf der Kontaktseite keine WorkTech/Attitude-Zuordnung greift (Feedback 2026-10-01). */ .saatkorn-contact-form-card .srfm-btn-frontend.srfm-submit-button { background-color: transparent !important; color: #F028AA !important; border: 2px solid #F028AA !important; border-radius: 30px !important; padding: 15px 30px !important; font-family: "Atkinson Hyperlegible Mono", sans-serif !important; font-size: 16px !important; font-weight: 600 !important; } .saatkorn-contact-form-card .srfm-btn-frontend.srfm-submit-button:hover, .saatkorn-contact-form-card .srfm-btn-frontend.srfm-submit-button:focus { background-color: #F028AA !important; color: #000000 !important; } /* Gero-Box (ueber "Inhaltliche Anfragen"): Avatar wie in der Trust-Bar (56px, rund), Text + LinkedIn-Link wie der Footer-Link, ergaenzt um einen kleinen Pfeil als externes-Link-Hinweis. */ .saatkorn-contact-card--gero { display: flex; align-items: center; gap: 16px; } .saatkorn-contact-card--gero img { width: 120px; height: 120px; border-radius: 50%; flex-shrink: 0; object-fit: cover; object-position: center top; border: 1.5px solid rgba(255, 255, 255, .15); } .saatkorn-contact-card--gero p { margin-bottom: 0; } .saatkorn-contact-card--gero a { white-space: nowrap; } .saatkorn-contact-card--gero a svg { width: 11px; height: 11px; margin-left: 2px; vertical-align: 1px; } /* 40px Luft zum Footer (Feedback 2026-10-01). */ .page-id-2541 .entry-content, .page-id-33642 .entry-content { margin-bottom: 40px; } @media (max-width: 767px) { .saatkorn-contact-layout { grid-template-columns: 1fr; } }