/* ============================================================= Gröne Online – Design Zentrales Stylesheet für alle Design-Anpassungen auf groene-online.de. NICHTS Inline in Posts schreiben — alles hier. ============================================================= */ /* ------------------------------------------------------------- 01 Globale Resets / Block-Abstände ------------------------------------------------------------- */ .wp-block-group { margin-top: 0 !important; margin-bottom: 0 !important; } .wp-block-cover { margin-bottom: 0 !important; } .entry-content > *:last-child { margin-bottom: 0 !important; padding-bottom: 0 !important; } .entry-content { padding-bottom: 0 !important; } /* ------------------------------------------------------------- 02 Layout-Hilfsklassen (per "Erweitert > Zus. CSS-Klasse") ------------------------------------------------------------- */ .go-hero-inner { text-align: center; padding: 60px 20px 72px; max-width: 680px; margin: 0 auto; } .go-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } .go-btns .wp-block-button { margin: 0; } .go-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; } .go-grid-3-mb { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; margin-bottom: 28px; } .go-avatar-row { display: flex; align-items: center; gap: 10px; } .go-flex-chips { display: flex; gap: 10px; flex-wrap: wrap; } .go-channel-icon { width: 36px; height: 36px; margin-bottom: 10px; display: block; } /* ------------------------------------------------------------- 03 Hero & Cover-Blöcke ------------------------------------------------------------- */ .wp-block-cover__image-background { object-fit: cover !important; } @media (min-width: 640px) { .wp-block-cover.alignfull { min-height: 0 !important; aspect-ratio: 16 / 9; } } @media (max-width: 639px) { .wp-block-cover.alignfull { min-height: 460px !important; } } /* ------------------------------------------------------------- 04 Dunkle Blöcke (#1A4731) – Textfarben & innere Karten ------------------------------------------------------------- */ [style*="background-color:#1A4731"] p, [style*="background-color:#1A4731"] li, [style*="background-color:#1A4731"] span { color: rgba(244,242,238,0.82); } [style*="background-color:#1A4731"] h2, [style*="background-color:#1A4731"] h3 { color: #F4F2EE; } /* Problem-Kacheln im dunklen Block */ [style*="background-color:#1A4731"] .go-grid-3 > div { background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12); border-radius: 10px; padding: 18px; } /* Testimonial-Kacheln im dunklen Block */ [style*="background-color:#1A4731"] .go-grid-3-mb > div { background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.18); border-radius: 12px; padding: 18px; } /* ------------------------------------------------------------- 05 Equal-Height Cards (Karten in 2er/3er-Spalten gleich hoch) ------------------------------------------------------------- * Greift wenn: - mehrere Spalten (wp-block-columns) nebeneinander - in einer Spalte direkt ein wp-block-group mit Hintergrund (.has-background) — typisches Karten-Pattern Wirkt nur ab Tablet/Desktop (>=782px), darunter sind die Spalten gestapelt und Höhe-Angleichung wäre sinnlos. Betrifft NICHT Group-Blöcke mit Inline-Background (z.B. der grüne 60/40-Hero-Block auf der Pakete-Seite). */ @media (min-width: 782px) { .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column > .wp-block-group.has-background { height: 100%; display: flex; flex-direction: column; } } /* ------------------------------------------------------------- 06 Seiten-spezifische Anpassungen ------------------------------------------------------------- */ /* — Startseite (page-id-2559) ——————————————————————————— */ /* Kein Abstand zwischen Header und Hero */ .page-id-2559 .entry-content, .page-id-2559 .entry-content-wrap, .page-id-2559 article, .page-id-2559 article.page, .page-id-2559 .site-main, .page-id-2559 main, .page-id-2559 #primary, .page-id-2559 .content-area, .page-id-2559 .content-container, .page-id-2559 .content-wrap { padding-top: 0 !important; margin-top: 0 !important; } /* Content-Container beige statt weiß */ .page-id-2559 .content-bg, .page-id-2559 article, .page-id-2559 main, .page-id-2559 .site-main, .page-id-2559 #inner-wrap { background-color: #F4F2EE !important; } /* Hero-Cover 80% Viewport-Höhe (überschreibt 16:9 aus Sektion 03) */ .page-id-2559 .wp-block-cover.alignfull { min-height: 80vh !important; } /* Kacheln im Problem-Block: kein Schatten */ .go-grid-3 > div { box-shadow: none !important; } /* Bild in 33.33%-Spalte bündig zur Boxen-Spalte (Sektion 2 "Ein leerer Gastraum am Freitagabend"). Mechanik: stretch-Spalte wird zum Flex-Container in column-Richtung; das dehnt sich als flex-grow-Child auf die volle Spaltenhöhe aus. Die Spaltenhöhe selbst kommt von align-self:stretch der wp:column (matched die Höhe der Nachbarspalte mit 3 Reihen × 2 Boxen). Auf der Startseite trifft dieser Selektor exakt nur dieses eine Bild — Stefan-Portrait ist top-aligned, nicht stretch. !important nötig wegen WordPress is-layout-flow-Layout-Klassen und Inline-style height:100% des Bildes. Nur Desktop (≥782px) — auf Mobile sind Spalten gestapelt. */ @media (min-width: 782px) { .page-id-2559 .wp-block-columns.are-vertically-aligned-stretch > .wp-block-column.is-vertically-aligned-stretch:has(> img) { display: flex !important; flex-direction: column !important; align-self: stretch !important; } .page-id-2559 .wp-block-columns.are-vertically-aligned-stretch > .wp-block-column.is-vertically-aligned-stretch > img { flex: 1 1 auto !important; width: 100% !important; height: auto !important; min-height: 0 !important; object-fit: cover !important; object-position: center !important; border-radius: 12px !important; margin: 0 !important; display: block !important; } } /* Mobile: Bild proportional, nicht stretched. Inline-style height:100% am img würde sonst zu Höhe 0 kollabieren, weil die Spalte mobil keine definierte Höhe hat. */ @media (max-width: 781px) { .page-id-2559 .wp-block-columns.are-vertically-aligned-stretch > .wp-block-column.is-vertically-aligned-stretch > img { height: auto !important; aspect-ratio: 4 / 3; object-fit: cover; } } /* — "Über uns" – Wer wir sind (page-id-2583) ————————————— */ /* Portrait-Spalte schmaler, Text-Box breiter. Trick zur Höhen- Angleichung: Bild absolut positionieren → Image-Spalte kollabiert auf 0, Flexbox streckt beide Spalten auf die Box-Höhe der rechten Seite. Bild füllt die Spalte per object-fit:cover, Stefans Gesicht bleibt im sichtbaren Bereich. Hook: .groene-portrait-col (im Block via "Erweitert > Zusätzliche CSS-Klasse" gesetzt). */ @media (min-width: 782px) { .groene-portrait-col { flex-basis: 35% !important; align-self: stretch; position: relative; min-height: 100%; } .groene-portrait-col + .wp-block-column { flex-basis: 65% !important; } .groene-portrait-col .wp-block-image, .groene-portrait-col figure { position: absolute; inset: 0; margin: 0; height: 100%; width: 100%; } .groene-portrait-col .wp-block-image img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; border-radius: 12px; display: block; } } /* — Kontakt – FAQ-Grid (page-id-2585) ————————————————————— */ /* 6 Boxen im 3×2-Grid, alle gleich breit und gleich hoch. Markup:
…
…
Responsive: 3 Spalten Desktop → 2 Tablet → 1 Mobile. */ .gro-faq-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: stretch; } .gro-faq-grid .gro-faq-box { background: #FFFFFF; border: 1px solid #E0DDD8; border-radius: 12px; padding: 24px 24px 28px; height: 100%; display: flex; flex-direction: column; } .gro-faq-grid .gro-faq-box h3 { margin: 0 0 12px 0; font-size: 18px; color: #1C1C1C; line-height: 1.35; } .gro-faq-grid .gro-faq-box p { margin: 0; line-height: 1.65; color: #444; } .gro-faq-grid .gro-faq-box a { color: #1A4731; text-decoration: underline; } @media (max-width: 960px) { .gro-faq-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { .gro-faq-grid { grid-template-columns: 1fr; } } /* ------------------------------------------------------------- 07 Mobile (≤680px) ------------------------------------------------------------- */ @media (max-width: 680px) { .go-grid-3, .go-grid-3-mb { grid-template-columns: 1fr; } .go-btns { flex-direction: column; align-items: center; } .go-hero-inner { padding: 40px 16px 56px; } } /* Startseite: mehr Luft oben im Hero auf sehr kleinen Geräten */ @media (max-width: 639px) { .page-id-2559 .go-hero-inner { padding-top: 100px !important; } } /* ------------------------------------------------------------- 08 Floating Newsletter-CTA (Site-weit, außer /newsletter) ------------------------------------------------------------- * Markup wird vom Plugin per wp_footer ausgegeben: … Sichtbarkeit steuert assets/floating-cta.js per .is-visible. Spezifität-Boost (a#go-floating-cta + !important): Kadence setzt auf -Tags z.T. eigene opacity/transition- Regeln. Ohne den Boost blieb der Button im Frontend permanent sichtbar — daher hier explizit !important für den default-Versteckt-Zustand. */ a#go-floating-cta { position: fixed !important; right: 20px; bottom: 20px; z-index: 9999; display: inline-block; padding: 12px 20px; background-color: #1A4731 !important; color: #FFFFFF !important; font-size: 15px; font-weight: 500; line-height: 1.4; border-radius: 8px; text-decoration: none !important; box-shadow: 0 4px 16px rgba(0,0,0,0.18); opacity: 0 !important; pointer-events: none !important; transition: opacity 400ms ease, background-color 200ms ease; } a#go-floating-cta.is-visible { opacity: 1 !important; pointer-events: auto !important; } a#go-floating-cta:hover, a#go-floating-cta:focus { background-color: #245C3E !important; color: #FFFFFF !important; text-decoration: none !important; } a#go-floating-cta:focus-visible { outline: 2px solid #C8A96E; outline-offset: 2px; } @media (max-width: 480px) { a#go-floating-cta { right: 12px; bottom: 12px; padding: 10px 16px; font-size: 14px; } } /* ------------------------------------------------------------- 09 Newsletter-Sektion auf der Startseite (Page 2559) ------------------------------------------------------------- * Layout-Klasse für den inneren Content-Container der Newsletter-Sektion (im wp:html-Block gesetzt). Warum nicht Inline-Style? Kadence definiert in .entry-content eigene text-align- und max-width-Regeln, die Inline-Styles übersteuern. Dieselbe robust greifende Lösung wie bei .go-btns. */ .go-newsletter-content { max-width: 680px; margin: 0 auto !important; text-align: center !important; } .go-newsletter-content > *, .go-newsletter-content h2, .go-newsletter-content p { text-align: center !important; } .go-newsletter-content .wp-block-buttons, .go-newsletter-content .go-btns { justify-content: center !important; } /* Eyebrow-Pill als Inline-Element zentrieren (statt block-level full-width-Streifen). */ .go-newsletter-content .go-eyebrow { display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: #FFFFFF; background-color: #C8A96E; padding: 4px 12px; border-radius: 20px; margin: 0 0 16px 0; } /* ------------------------------------------------------------- 10 CTA-Band ("Bleiben Sie informiert" — Newsletter + Social) ------------------------------------------------------------- * Konsolidiert die früher getrennten CTAs "Newsletter" und "Folgen Sie uns" in einen Block. Markup wird vom Plugin per kadence_before_footer ausgegeben (Fallback wp_footer), sitzt also direkt VOR dem Kadence-Footer. Layout: dunkelgrüne Band-Sektion, zentriert, primärer Newsletter-Button in Brand-Gold, darunter dezente Social- Icons (nur Symbole, kein Text — Label per aria-label). Ziel: ein klares "Bleiben Sie dran"-Moment vor dem Footer, ohne mit dem "Erstgespräch"-CTA der Seiten zu konkurrieren. */ .go-cta-band { background-color: #1A4731; color: #F4F2EE; padding: 56px 20px 60px; text-align: center; } .go-cta-band__inner { max-width: 640px; margin: 0 auto; } .go-cta-band__heading { margin: 0 0 10px 0; font-size: 26px; font-weight: 600; color: #F4F2EE; letter-spacing: 0.2px; line-height: 1.25; } .go-cta-band__text { margin: 0 0 24px 0; font-size: 15px; line-height: 1.6; color: rgba(244,242,238,0.85); } /* Newsletter-Button: Kadence-Default-Markup (.wp-block-button) damit Schrift, Padding, Radius identisch zu allen anderen Buttons im Theme sind. Hier werden NUR die Farben überschrieben (Gold auf Dunkelgrün), damit der Button auf dem dunklen Band ausreichend Kontrast hat. Selektor-Spezifität via .go-cta-band reicht aus, !important für Inline-Theme-Styles falls vorhanden. */ .go-cta-band .wp-block-button__link { background-color: #C8A96E !important; color: #1A4731 !important; } .go-cta-band .wp-block-button__link:hover, .go-cta-band .wp-block-button__link:focus { background-color: #D8B987 !important; color: #1A4731 !important; } .go-cta-band__buttons { justify-content: center !important; margin: 0 !important; } .go-cta-band__social-line { margin: 26px 0 10px 0; font-size: 13px; letter-spacing: 0.4px; text-transform: uppercase; color: rgba(244,242,238,0.65); } .go-cta-band__social { list-style: none; margin: 0; padding: 0; display: inline-flex; gap: 18px; justify-content: center; } .go-cta-band__social li { margin: 0; padding: 0; } .go-cta-band__social a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background-color: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.16); color: #F4F2EE !important; text-decoration: none !important; transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease, transform 200ms ease; } .go-cta-band__social a:hover, .go-cta-band__social a:focus { background-color: rgba(255,255,255,0.16); border-color: rgba(255,255,255,0.36); color: #C8A96E !important; transform: translateY(-1px); } .go-cta-band__social a:focus-visible { outline: 2px solid #C8A96E; outline-offset: 3px; } .go-cta-band__social svg { display: block; } @media (max-width: 480px) { .go-cta-band { padding: 40px 16px 44px; } .go-cta-band__heading { font-size: 22px; } .go-cta-band__text { font-size: 14px; margin-bottom: 20px; } .go-cta-band__newsletter { padding: 12px 22px; font-size: 14px; } .go-cta-band__social-line { margin-top: 22px; font-size: 12px; } .go-cta-band__social { gap: 14px; } .go-cta-band__social a { width: 38px; height: 38px; } } /* ------------------------------------------------------------- 11 Header-Social-Icons dezenter ------------------------------------------------------------- * Kadence-Header (rechts oben): die Icons (LinkedIn/FB/Instagram) werden per "social-style-filled" mit Markenfarben gerendert. Das konkurriert visuell mit dem primären Erstgespräch-CTA. Lösung: Default neutrales Grau, im Hover Brand-Grün. Wirkt nur im Site-Header — Footer-Block bleibt unberührt. */ .site-header .header-social-wrap a.social-button, .site-header .header-social-wrap .header-social-item { color: #9CA3AF !important; background-color: transparent !important; border-color: transparent !important; transition: color 200ms ease; } .site-header .header-social-wrap a.social-button svg, .site-header .header-social-wrap .header-social-item svg { fill: currentColor !important; } .site-header .header-social-wrap a.social-button:hover, .site-header .header-social-wrap a.social-button:focus, .site-header .header-social-wrap .header-social-item:hover, .site-header .header-social-wrap .header-social-item:focus { color: #1A4731 !important; background-color: transparent !important; } /* ------------------------------------------------------------- 12 Kontaktformular (CF7) — Inputs einheitlich ------------------------------------------------------------- * Stellt sicher, dass alle Eingabefelder im CF7-Formular optisch identisch sind (Breite, Innenabstand, Eckenrundung, Rahmen, Hintergrund, Schrift). Hintergrund: Kadence und das CF7-Style-Plugin stylen Inputs gerne über type-Selektoren (input[type="text"], …) und vergessen dabei neuere HTML5-Typen wie [tel] oder [url]. Folge: einzelne Felder fallen optisch aus der Reihe. Hier wird das normalisiert. */ .wpcf7-form input.wpcf7-form-control:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]), .wpcf7-form textarea.wpcf7-form-control { width: 100% !important; box-sizing: border-box !important; padding: 12px 14px !important; border: 1px solid #E0DDD8 !important; border-radius: 8px !important; background-color: #FFFFFF !important; color: #1C1C1C !important; font-family: inherit !important; font-size: 16px !important; line-height: 1.4 !important; margin: 4px 0 0 0 !important; } .wpcf7-form input.wpcf7-form-control:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus, .wpcf7-form textarea.wpcf7-form-control:focus { outline: 2px solid #C8A96E !important; outline-offset: 2px !important; border-color: transparent !important; } .wpcf7-form input.wpcf7-form-control::placeholder, .wpcf7-form textarea.wpcf7-form-control::placeholder { color: #9A9A9A; opacity: 1; }