/* GeFaSuisse – eigene Frontend-Styles (Child-Theme), Digitalminds Studios, 18.09.2026 */ /* ---- Logo (Inline-SVG, Einblend-Animation beim Laden, analog SafeConsult) ---- */ .gefa-logo-wrap { display: flex; align-items: center; } .gefa-logo-wrap p { margin: 0; } .gefa-logo { display: inline-block; line-height: 0; } .gefa-logo__svg { display: block; width: 280px; height: auto; overflow: visible; } /* Sticky-Header: Logo gleich gross wie oben (Entscheid 18.09.2026, nicht verkleinern) */ @media (max-width: 1199px) { .gefa-logo__svg { width: 230px; } } /* 1. Winkel: kreisförmige Maske öffnet sich, Symbol dreht leicht ein */ .gefa-logo__iris { transform-box: fill-box; transform-origin: center; animation: gefa-logo-iris 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both; } .gefa-logo__mark { transform-box: fill-box; transform-origin: center; animation: gefa-logo-mark 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both; } /* 2. Schriftzug: Maske wischt von links nach rechts auf */ .gefa-logo__wipe { transform-box: fill-box; transform-origin: left center; animation: gefa-logo-wipe 0.6s cubic-bezier(0.65, 0, 0.35, 1) 0.45s both; } .gefa-logo__text { animation: gefa-logo-text 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.45s both; } @keyframes gefa-logo-iris { from { transform: scale(0); } to { transform: scale(1); } } @keyframes gefa-logo-mark { from { transform: rotate(-45deg) scale(0.85); } to { transform: none; } } @keyframes gefa-logo-wipe { from { transform: scaleX(0); } to { transform: scaleX(1); } } @keyframes gefa-logo-text { from { transform: translateX(-40px); } to { transform: none; } } /* Sticky-Logo und «Bewegung reduzieren»: keine Animation. .gefa-logo-fertig (auf , per Skript in functions.php) = Animation ist einmal gelaufen bzw. es wurde gescrollt. Avada blendet das obere Logo beim Sticky-Wechsel per display:none aus und wieder ein, was die Animation sonst bei jedem Hochscrollen neu startet (18.09.2026). */ .gefa-logo--statisch .gefa-logo__iris, .gefa-logo--statisch .gefa-logo__mark, .gefa-logo--statisch .gefa-logo__wipe, .gefa-logo--statisch .gefa-logo__text, .gefa-logo-fertig .gefa-logo__iris, .gefa-logo-fertig .gefa-logo__mark, .gefa-logo-fertig .gefa-logo__wipe, .gefa-logo-fertig .gefa-logo__text { animation: none; } @media (prefers-reduced-motion: reduce) { .gefa-logo__iris, .gefa-logo__mark, .gefa-logo__wipe, .gefa-logo__text { animation: none; } } /* ---- Hero-Video: Poster ausblenden, sobald das Video läuft (18.09.2026) ---- Avada legt auf Handys (.ua-mobile) das Poster mit z-index 2 über das Hintergrundvideo. Die Klasse «gefa-video-laeuft» setzt das Skript in functions.php beim Ereignis «playing»; ohne Autoplay (z. B. Stromsparmodus) bleibt das Poster stehen. */ #gefa-hero .fullwidth-video-image { transition: opacity 0.4s ease; } #gefa-hero.gefa-video-laeuft .fullwidth-video-image { opacity: 0; pointer-events: none; } /* ---- Hero: Scroll-Winkel (Mediathek 2339, Link auf #gefa-inhalt) wird beim Hover weiss (18.09.2026) ---- Das Bild ist ein rotes PNG; der Filter färbt es vollständig weiss. */ #gefa-hero a[href="#gefa-inhalt"] img { transition: filter 0.25s ease; } #gefa-hero a[href="#gefa-inhalt"]:hover img, #gefa-hero a[href="#gefa-inhalt"]:focus-visible img { filter: brightness(0) invert(1); } /* ---- Sticky-Header: Schatten --------------------------------------------------- Avada setzt beim absoluten Header «fusion-container-stuck» schon oben; erst «fusion-sticky-transition» kommt beim Scrollen dazu. */ .fusion-tb-header .fusion-fullwidth.fusion-sticky-transition { --awb-box-shadow: 0 10px 28px -12px rgba(26, 25, 25, 0.35); box-shadow: 0 10px 28px -12px rgba(26, 25, 25, 0.35) !important; } /* ---- CTA-Buttons: Winkel nach rechts (Form des Logo-Signets, als Maske in Schriftfarbe) ---- Nur Standard-Buttons (button-default = CTA); Buttons mit eigener Farbe/Icon (button-custom) nicht. */ .fusion-button.button-default .fusion-button-text::after, .awb-menu__main-a_button .menu-text.fusion-button::after { content: ""; display: inline-block; width: 0.5em; height: 0.67em; margin-left: 0.6em; vertical-align: -0.04em; background-color: currentColor; -webkit-mask: url("../img/gefa-winkel-rechts.png") center / contain no-repeat; mask: url("../img/gefa-winkel-rechts.png") center / contain no-repeat; transition: transform 0.2s ease-out; } .fusion-button.button-default:hover .fusion-button-text::after, .fusion-button.button-default:focus-visible .fusion-button-text::after, .awb-menu__main-a_button:hover .menu-text.fusion-button::after, .awb-menu__main-a_button:focus-visible .menu-text.fusion-button::after { transform: translateX(4px); } @media (prefers-reduced-motion: reduce) { .fusion-button.button-default .fusion-button-text::after, .awb-menu__main-a_button .menu-text.fusion-button::after { transition: none; } } /* ---- Menü-CTA («Individuelle Beratung»): Hover «Background Slide Right» wie Avada-Buttons ---- Avada-Buttons: Element-Option hover_transition="bg_slide_right". Menü-Buttons kennen die Option nicht → gleicher Effekt per CSS (gleiche Form, Kurve 0.35s cubic-bezier(0.21,0.6,0.35,1)). */ .awb-menu__main-a_button .menu-text.fusion-button { position: relative; overflow: hidden; isolation: isolate; } .awb-menu__main-a_button .menu-text.fusion-button::before { content: ""; position: absolute; inset: -1px; z-index: -1; background: var(--awb-color5); clip-path: polygon(0 0, 0 0, -50% 100%, 0 100%); transition: clip-path 0.35s cubic-bezier(0.21, 0.6, 0.35, 1); } .awb-menu__main-a_button:hover .menu-text.fusion-button, .awb-menu__main-a_button:focus-visible .menu-text.fusion-button { background: var(--awb-color7); } .awb-menu__main-a_button:hover .menu-text.fusion-button::before, .awb-menu__main-a_button:focus-visible .menu-text.fusion-button::before { clip-path: polygon(0 0, 150% 0, 100% 100%, 0 100%); } @media (prefers-reduced-motion: reduce) { .awb-menu__main-a_button .menu-text.fusion-button::before { transition: none; } } /* ---- Header gross (Section 2354, Container-Klasse «gefa-header-gross»): Navigation mittig (19.09.2026) ---- Logo links, CTA «Individuelle Beratung» rechts, die vier Menüpunkte mittig im freien Raum dazwischen – im normalen und im Sticky-Header. Die Logo-Spalte ist so breit wie das Logo, die Menü-Spalte füllt den Rest. Avada-Spaltenabstände (Prozent) sind hier auf 0 gesetzt, sonst stimmt die Mitte nicht. Der CTA ist der letzte Menüpunkt; beide automatischen Ränder (erster Punkt, CTA) teilen den Platz gleichmässig auf. padding-left 12px gleicht den Avada-Abstand (margin-right 12px) des letzten Menüpunkts vor dem CTA aus. */ .gefa-header-gross > .fusion-builder-row { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; } .gefa-header-gross .fusion-column-wrapper { margin-left: 0 !important; margin-right: 0 !important; } .gefa-header-gross > .fusion-builder-row > .fusion-layout-column:first-child { width: auto !important; flex: 0 0 auto; } .gefa-header-gross > .fusion-builder-row > .fusion-layout-column:last-child { width: auto !important; flex: 1 1 0; min-width: 0; } .gefa-header-gross .awb-menu__main-ul { box-sizing: border-box; width: 100%; padding-left: 12px; } .gefa-header-gross .awb-menu__main-ul > li:first-child, .gefa-header-gross .awb-menu__main-ul > li:last-child { margin-left: auto; } /* 1200–1365 px: sonst rutscht der CTA in eine zweite Zeile → Menüpunkte enger (Abstand 12 statt 24 px, Innenabstand 6 statt 10 px). Darunter übernimmt der Header Medium/Small mit Hamburger-Menü. 22.09.2026: Grenze von 1279 auf 1365 px angehoben – mit der Sprachwahl «FR» vor dem CTA brach das deutsche Menü bei 1280 px zweizeilig um. */ @media (max-width: 1365px) { .gefa-header-gross .awb-menu__main-ul { padding-left: 6px; } .gefa-header-gross .awb-menu__main-ul > li:not(:last-child) { margin-right: 6px !important; } .gefa-header-gross .awb-menu__main-ul > li:not(:first-child):not(:last-child) { margin-left: 6px !important; } .gefa-header-gross .awb-menu__main-ul > li:last-child { margin-right: 0 !important; } .gefa-header-gross .awb-menu__main-ul > li:not(:last-child) > a { padding-left: 6px !important; padding-right: 6px !important; } } /* ==== Startseite: Sektionen unter dem Hero (19.09.2026) ==================================================== */ /* Info-Box: Icon links, Titel + Text rechts (Text aus Admin «Startseite-Texte»), volle Inhaltsbreite */ .gefa-infobox > .fusion-column-wrapper { flex-direction: row !important; flex-wrap: nowrap !important; align-items: flex-start; gap: 56px !important; column-gap: 56px !important; } /* Signet (Logo-Winkel) statt Icon, 19.09.2026 */ .gefa-infobox .fusion-image-element { flex: 0 0 56px; width: 56px; margin-top: 4px; } .gefa-infobox .gefa-infobox__signet, .gefa-infobox .gefa-infobox__signet img { display: block; width: 56px; max-width: none; } /* Links in der Info-Box rot, Hover Tiefrot mit Unterstreichung */ #main .gefa-infobox .gefa-infobox__text a { color: var(--awb-color7); } #main .gefa-infobox .gefa-infobox__text a:hover, #main .gefa-infobox .gefa-infobox__text a:focus-visible { color: var(--awb-color5); text-decoration: underline; } .gefa-infobox .gefa-infobox__text { flex: 1 1 auto; min-width: 0; } #main h3.gefa-infobox__titel, #main h3.gefa-kurs__titel { margin: 0 0 12px; font-size: 24px; line-height: 1.42; } @media (max-width: 640px) { .gefa-infobox > .fusion-column-wrapper { flex-direction: column !important; gap: 20px !important; } } /* Kurs-Boxen: Titel schwarz (Logo-Anthrazit), Daten als Liste mit rotem Winkel (Logo-Signet) */ #main h3.gefa-kurs__titel { color: var(--awb-custom10); } #main .gefa-kursliste { margin: 0; padding: 0; list-style: none; } #main .gefa-kursliste li { position: relative; margin: 0 0 6px; padding-left: 24px; } #main .gefa-kursliste li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 0.5em; height: 0.67em; background-color: var(--awb-color7); -webkit-mask: url("../img/gefa-winkel-rechts.png") center / contain no-repeat; mask: url("../img/gefa-winkel-rechts.png") center / contain no-repeat; } /* Icons statisch: keine Hover-Farbe, keine Hover-Animation */ #main .gefa-icon-statisch, #main .gefa-icon-statisch:hover { color: var(--awb-color7) !important; transform: none !important; transition: none !important; cursor: default; } /* … ausser beim Einblenden: Steht ein Icon allein (nicht in einer Box, z. B. Kontaktblock), ist es selbst das animierte Element. Ohne diese Ausnahme schlägt «transform/transition: none !important» oben die Einblende-Animation, und das Icon ist sofort da (21.09.2026). */ html.gefa-anim #main .gefa-icon-statisch.gefa-einblenden { transform: translateY(24px) !important; } html.gefa-anim #main .gefa-icon-statisch.gefa-einblenden.gefa-sichtbar { transform: none !important; transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1) !important; transition-delay: var(--gefa-verzoegerung, 0ms) !important; } #main .gefa-icon-statisch::before { transition: none !important; } /* Avada-Hover-Animation «slide» (aus den Theme Options) nutzt ::after – hier ausschalten */ #main .gefa-icon-statisch::after { display: none !important; } /* Grauer Balken als Übergang: zieht von einer Seite, endet vor dem anderen Rand (Referenz: Demo «Testimonial»). --links: vom linken Rand, endet rechts 80 px ausserhalb des Inhalts; --rechts: gespiegelt. Unter 1540 px Viewport reicht der Balken bis zum Rand. */ .gefa-balken { position: relative; isolation: isolate; } .gefa-balken::before { content: ""; position: absolute; top: 0; bottom: 0; z-index: -1; background: var(--awb-color2); } .gefa-balken--links::before { left: 0; right: max(0px, calc((100% - 1380px) / 2 - 80px)); } .gefa-balken--rechts::before { right: 0; left: max(0px, calc((100% - 1380px) / 2 - 80px)); } /* Vergleich: Listen etwas kompakter */ .gefa-vergleich .fusion-li-item-content { font-size: 17px; line-height: 1.6; } /* FAQ auf Logo-Anthrazit: Plus-Zeichen öffnet, Minus schliesst (Avada-Icons); Titel weiss, Hover rot */ .gefa-faq .panel-title a, .gefa-faq .panel-title a .fusion-toggle-heading { color: var(--awb-color1); } .gefa-faq .panel-title a:hover .fusion-toggle-heading, .gefa-faq .panel-title a:focus-visible .fusion-toggle-heading { color: var(--awb-color7); } .gefa-faq .toggle-content, .gefa-faq .toggle-content p { color: var(--awb-color3); } /* USP-Liste «Kurze Anleitung»: graue Balken mit Häkchen wie Demo «About Us» (Buttons), aber ohne Link */ #main .gefa-usp .fusion-li-item { display: flex; width: fit-content; max-width: 100%; margin: 0 0 12px; padding: 16px 28px; background: var(--awb-color2); align-items: center; } #main .gefa-usp .fusion-li-item-content { font-size: var(--awb-typography3-font-size); font-weight: 600; line-height: 1.4; color: var(--awb-custom10); } .gefa-nowrap { white-space: nowrap; } /* Kacheln in «Ausbildungen und Prüfungen» und Vergleichsboxen: je Reihe gleich hoch */ .gefa-balken .fusion-builder-row-inner { align-items: stretch !important; } .gefa-balken .fusion-builder-row-inner > .fusion-layout-column { align-self: stretch !important; } /* Kacheln «Ausbildungen und Prüfungen»: festes Raster, alle 6 Boxen gleich breit und gleich hoch (grid-auto-rows 1fr = jede Reihe so hoch wie die höchste Box), 20 px Abstand. 19.09.2026 */ .gefa-kacheln .fusion-builder-row-inner { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 20px; width: 100% !important; max-width: 100% !important; margin: 0 !important; /* Avada schreibt inline «width: 104% !important» (plus −2 % Rand, den wir auf 0 setzen) – nicht zu überschreiben. Das Raster hing deshalb rechts 4 % über (375 px: 12 px, 1440 px: 36 px). Ausgleich: 4 % Innenabstand rechts bei border-box → Rasterfläche = Spaltenbreite, links und rechts bündig (22.09.2026). */ box-sizing: border-box; padding-right: 4% !important; } .gefa-kacheln .fusion-builder-row-inner > .fusion-layout-column { width: auto !important; margin: 0 !important; } .gefa-kacheln .fusion-builder-row-inner > .fusion-layout-column > .fusion-column-wrapper { height: 100%; margin: 0 !important; } /* Tablet: zwei Spalten (22.09.2026) – dreispaltig blieben bei 641 px nur 127 px Innenbreite, «Ergänzungsmodule» (197 px) lief aus der Box. Ab 900 px passen drei Spalten wieder (217 px innen). */ @media (min-width: 641px) and (max-width: 899px) { .gefa-kacheln .fusion-builder-row-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .gefa-kacheln .fusion-builder-row-inner { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; } } /* Boxen: weiss mit Rahmen und weichem Schatten wie im Demo-Kasten «Join to newsletter» auf /news/ (Entscheid Vincenzo 21.09.2026 – ersetzt die graue Fassung vom 19.09.2026). Info-Box, Kurs-Boxen, Kacheln und Vergleichsboxen bekommen Rahmen/Schatten aus dem Builder (`BOX` in baue_startseite.py), die USP-Balken «Kurze Anleitung» hier. */ #main .gefa-usp .fusion-li-item { background-color: var(--awb-color1); border: 1px solid hsla(var(--awb-color8-h), var(--awb-color8-s), var(--awb-color8-l), 0.08); box-shadow: 0 12px 24px -11px hsla(var(--awb-color8-h), var(--awb-color8-s), var(--awb-color8-l), 0.24); } /* Vergleich: beide Boxköpfe (Logo / «Andere Anbieter») gleich hoch → Trennlinien auf gleicher Höhe (19.09.2026) */ #main .gefa-vergleich-kopf { display: flex; align-items: center; justify-content: center; flex: 0 0 72px; height: 72px; min-height: 72px; margin: 0 0 24px; } /* Listen: jede Zeile gleich hoch (2 Zeilen Platz), damit links und rechts Zeile für Zeile auf einer Linie stehen */ #main .gefa-vergleich .fusion-li-item { min-height: 68px; margin: 0 !important; padding: 0 !important; align-items: flex-start; } #main .gefa-vergleich-kopf p { margin: 0; } #main .gefa-vergleich-kopf img { display: block; width: 172px; height: auto; } #main .gefa-vergleich-kopf h4 { margin: 0; text-align: center; } /* Footer «Informationen» (Menü 23): wie die Adresse (18/30 px, normal, Fliesstext-Farbe), roter Logo-Winkel als Aufzählungszeichen wie bei «Nächste Kurse». Hover Signalrot. 19.09.2026 */ .fusion-tb-footer .gefa-footer-info .awb-menu__main-li { margin: 0 !important; } .fusion-tb-footer .gefa-footer-info .awb-menu__main-a { position: relative; padding: 0 0 0 24px !important; min-height: 0 !important; font-size: 18px !important; font-weight: 400 !important; line-height: 30px !important; color: var(--awb-color8) !important; } .fusion-tb-footer .gefa-footer-info .awb-menu__main-a .menu-text { font-weight: 400 !important; } .fusion-tb-footer .gefa-footer-info .awb-menu__main-a::before { content: ""; position: absolute; left: 0; top: 50%; width: 0.5em; height: 0.67em; transform: translateY(-50%); background-color: var(--awb-color7); -webkit-mask: url("../img/gefa-winkel-rechts.png") center / contain no-repeat; mask: url("../img/gefa-winkel-rechts.png") center / contain no-repeat; } .fusion-tb-footer .gefa-footer-info .awb-menu__main-a:hover, .fusion-tb-footer .gefa-footer-info .awb-menu__main-a:focus-visible { color: var(--awb-color7) !important; } /* Desktop-Untermenü: gleicher roter Winkel vor jedem Unterpunkt (22.09.2026). Link ist bei Avada flex (Text vertikal zentriert) → Winkel als erstes Flex-Element, Abstand zum Text wie im Footer (1.33em − 0.5em). Dropdown so breit wie der längste Eintrag + 20 px (keine Mindestbreite), damit nichts umbricht (DE und FR). */ .fusion-tb-header .awb-menu_desktop .awb-menu__sub-ul { width: max-content; padding-top: 7px; padding-bottom: 12px; background-color: var(--awb-submenu-bg, #fff); /* Avada färbt nur die li – ohne das bliebe die Polsterung über dem Video durchsichtig */ } .fusion-tb-header .awb-menu_desktop .awb-menu__sub-li { width: auto; } /* Zeilen kompakter (Wunsch Vincenzo 22.09.2026): 51 → rund 36 px je Eintrag. Dropdown-Polsterung oben 7 / unten 12 px: sichtbarer Abstand Schrift → Kante oben und unten je 20 px, gleich wie links (Winkel) und rechts (längster Eintrag). */ .fusion-tb-header .awb-menu_desktop .awb-menu__sub-a { justify-content: flex-start; padding-top: 7px; padding-bottom: 7px; line-height: 1.4; white-space: nowrap; } .fusion-tb-header .awb-menu_desktop .awb-menu__sub-a::before { content: ""; flex: none; width: 0.5em; height: 0.67em; margin-right: 0.83em; background-color: var(--awb-color7); -webkit-mask: url("../img/gefa-winkel-rechts.png") center / contain no-repeat; mask: url("../img/gefa-winkel-rechts.png") center / contain no-repeat; } /* Kursdaten verlinkt (Link je Box in «Startseite-Texte»): Textfarbe wie bisher, Hover Signalrot */ #main .gefa-kursliste a { color: inherit; } #main .gefa-kursliste a:hover, #main .gefa-kursliste a:focus-visible { color: var(--awb-color7); } /* Einblende-Animation beim Scrollen (Skript in functions.php, nur wenn die Klasse gefa-anim hat). 1. Bis das Skript bereit ist, sind die Sektionen unter dem Hero ganz verborgen (kein Aufblitzen). 2. Danach (gefa-anim-bereit) sind die Sektionen sichtbar, die einzelnen Elemente sofort verborgen … 3. … und blenden animiert ein, sobald sie ins Bild kommen (gefa-sichtbar). */ html.gefa-anim:not(.gefa-anim-bereit) #main .fusion-fullwidth:not(#gefa-hero), html.gefa-anim:not(.gefa-anim-bereit) .fusion-tb-footer .fusion-fullwidth, html.gefa-anim:not(.gefa-anim-bereit) #gefa-hero .fusion-builder-row-inner, html.gefa-anim:not(.gefa-anim-bereit) #gefa-hero .fusion-image-element { visibility: hidden; } html.gefa-anim .gefa-einblenden { opacity: 0; transform: translateY(24px); } html.gefa-anim .gefa-einblenden.gefa-sichtbar { opacity: 1; transform: none; transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); transition-delay: var(--gefa-verzoegerung, 0ms); } @media (prefers-reduced-motion: reduce) { html.gefa-anim .gefa-einblenden { opacity: 1; transform: none; transition: none; } } /* ---- Cookie-Hinweis unten (19.09.2026, Aufbau wie SafeConsult, Farben GeFaSuisse, Radius 0) ---- Sichtbar/ausgeblendet steuert js/gefa-cookie-hinweis.js. z-index 998: unter dem Avada-Mobilmenü. */ .gefa-cookie { position: fixed; left: 0; right: 0; bottom: 0; z-index: 998; background: var(--awb-color1); box-shadow: 0 -8px 30px hsla(var(--awb-custom10-h), var(--awb-custom10-s), var(--awb-custom10-l), calc(var(--awb-custom10-a) - 88%)); transform: translateY(100%); transition: transform 0.3s ease; } .gefa-cookie.gefa-cookie--sichtbar { transform: translateY(0); } .gefa-cookie__innen { display: flex; align-items: center; gap: 14px 40px; box-sizing: border-box; max-width: calc(1380px + 60px); margin: 0 auto; padding: 18px 30px calc(18px + env(safe-area-inset-bottom, 0px)); } /* Schriftgrössen optisch an SafeConsult angeglichen (20.09.2026): dort Verdana (breiter, höhere Kleinbuchstaben), hier Helvetica → je 1 px grösser plus etwas Laufweite im Text. */ .gefa-cookie .gefa-cookie__text { flex: 1 1 auto; margin: 0; color: var(--awb-color8); font-size: 15px; line-height: 1.6; letter-spacing: 0.24px; } .gefa-cookie .gefa-cookie__text a { color: var(--awb-color7); text-decoration: none; } .gefa-cookie .gefa-cookie__text a:hover, .gefa-cookie .gefa-cookie__text a:focus-visible { color: var(--awb-color5); text-decoration: underline; } .gefa-cookie__knoepfe { flex: 0 0 auto; display: flex; align-items: center; gap: 8px 16px; } .gefa-cookie .gefa-cookie__knoepfe button { min-height: 44px; margin: 0; border: 0; border-radius: 0; font-family: var(--awb-typography3-font-family); font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 1.5px; text-transform: uppercase; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease; } .gefa-cookie .gefa-cookie__akzeptieren { padding: 12px 26px; background: var(--awb-color7); color: var(--awb-color1); } .gefa-cookie .gefa-cookie__akzeptieren:hover, .gefa-cookie .gefa-cookie__akzeptieren:focus-visible { background: var(--awb-color5); color: var(--awb-color1); } .gefa-cookie .gefa-cookie__schliessen { padding: 12px 10px; background: transparent; color: var(--awb-custom10); } .gefa-cookie .gefa-cookie__schliessen:hover, .gefa-cookie .gefa-cookie__schliessen:focus-visible { background: transparent; color: var(--awb-color7); } .gefa-cookie .gefa-cookie__knoepfe button:focus-visible { outline: 2px solid var(--awb-color7); outline-offset: 3px; } @media (max-width: 767px) { .gefa-cookie__innen { flex-direction: column; align-items: stretch; padding-top: 16px; padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); } .gefa-cookie__knoepfe { justify-content: space-between; } .gefa-cookie .gefa-cookie__akzeptieren { flex: 1 1 auto; } } /* Kurzfassung des Cookie-Texts nur auf dem Handy (22.09.2026, Mobile-Check Punkt 3): Hinweis war 208 px hoch. */ .gefa-cookie__kurz { display: none; } @media (max-width: 640px) { .gefa-cookie__lang { display: none; } .gefa-cookie__kurz { display: inline; } .gefa-cookie__innen { gap: 10px; padding: 14px 20px calc(12px + env(safe-area-inset-bottom, 0px)); } .gefa-cookie .gefa-cookie__text { font-size: 14px; line-height: 1.5; } } @media (prefers-reduced-motion: reduce) { .gefa-cookie { transition: none; } } /* ========================================================================== Unterseiten (ab 21.09.2026) — weisser Header, Einstieg mit Bild, Kontaktseite ========================================================================== */ /* Weisser Header (Section 2511): bewusst ohne Trennlinie (Wunsch Vincenzo 21.09.2026). Die Abgrenzung zum Inhalt macht allein der Sticky-Schatten beim Scrollen. */ /* Kicker über dem Seitentitel (Vorlage: Demo-Seite «Services») */ #main .gefa-kicker { color: var(--awb-color7); font-size: 18px; line-height: 24px; font-weight: 700; letter-spacing: 0.02em; margin: 0; } /* Etikett auf dem Bild: weisse Karte unten links, gleiche Kante wie alle Boxen */ #main .gefa-bildetikett > .fusion-column-wrapper { position: relative; } #main .gefa-etikett { position: absolute; z-index: 2; /* sonst malt Avada das Bild darüber */ left: 24px; right: 24px; bottom: 24px; max-width: 420px; margin: 0 !important; padding: 20px 24px; background-color: var(--awb-color1); border: 1px solid hsla(var(--awb-color8-h), var(--awb-color8-s), var(--awb-color8-l), 0.08); box-shadow: 0 12px 24px -11px hsla(var(--awb-color8-h), var(--awb-color8-s), var(--awb-color8-l), 0.24); } #main .gefa-etikett__name { margin: 0 0 2px; font-size: 18px; line-height: 26px; font-weight: 700; color: var(--awb-custom10); } #main .gefa-etikett__text { margin: 0; font-size: 16px; line-height: 24px; color: var(--awb-color6); } /* Handy: Etikett unter dem Foto statt darüber (Wunsch Vincenzo 22.09.2026 – sonst verdeckte es zwei Drittel des Bildes). Weisse Karte in voller Bildbreite, direkt am Bild. */ @media (max-width: 640px) { #main .gefa-etikett { position: relative; left: auto; right: auto; bottom: auto; max-width: none; padding: 16px 18px; } #main .gefa-bildetikett .fusion-image-element { margin-bottom: 0 !important; } } /* Kontaktblock: Icon links, Titel daneben, Inhalt darunter (Vorlage: Demo «Get a personal consultation») */ #main .gefa-kontaktblock > .fusion-column-wrapper { display: grid; grid-template-columns: 34px 1fr; column-gap: 14px; align-items: center; } #main .gefa-kontaktblock .fusion-fontawesome { grid-column: 1; grid-row: 1; margin: 0 !important; } #main .gefa-kontaktblock .fusion-title { grid-column: 2; grid-row: 1; } #main .gefa-kontaktblock .fusion-text { grid-column: 2; grid-row: 2; margin-top: 6px; } #main .gefa-kontaktblock .fusion-text a { color: var(--awb-color8); } #main .gefa-kontaktblock .fusion-text a:hover { color: var(--awb-color7); } /* Karte mit Einwilligung: Vorschau ohne jeden Google-Aufruf, iframe erst nach Klick */ #main .gefa-karte { position: relative; aspect-ratio: 4 / 3; background-color: var(--awb-color1); border: 1px solid hsla(var(--awb-color8-h), var(--awb-color8-s), var(--awb-color8-l), 0.08); box-shadow: 0 12px 24px -11px hsla(var(--awb-color8-h), var(--awb-color8-s), var(--awb-color8-l), 0.24); overflow: hidden; } #main .gefa-karte__vorschau { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; height: 100%; padding: 28px; } #main .gefa-karte__stift { font-size: 32px; color: var(--awb-color7); margin-bottom: 14px; } #main .gefa-karte__titel { margin: 0 0 8px; font-size: 18px; line-height: 26px; font-weight: 700; color: var(--awb-custom10); } #main .gefa-karte__hinweis { margin: 0 0 20px; font-size: 15px; line-height: 24px; color: var(--awb-color6); } #main .gefa-karte__knopf { appearance: none; border: 0; border-radius: 0; background-color: var(--awb-color7); color: var(--awb-color1); font-family: inherit; font-size: 14px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; padding: 13px 24px; cursor: pointer; transition: background-color 0.2s ease; } #main .gefa-karte__knopf:hover, #main .gefa-karte__knopf:focus-visible { background-color: var(--awb-color5); } #main .gefa-karte--geladen { padding: 0; } #main .gefa-karte iframe { display: block; width: 100%; height: 100%; border: 0; } /* Kontaktformular (Contact Form 7). Masse aus dem Design-System: Feldhöhe 56 px, Rahmen Grau 400, Radius 0, Schaltfläche wie jeder andere Button. */ #main .gefa-formular__reihe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; } #main .gefa-feld { margin: 0 0 22px; } #main .gefa-feld label { display: block; margin-bottom: 6px; font-size: 18px; line-height: 26px; font-weight: 600; color: var(--awb-custom10); } #main .gefa-pflicht { color: var(--awb-color7); } #main .gefa-formular input[type="text"], #main .gefa-formular input[type="email"], #main .gefa-formular input[type="tel"], #main .gefa-formular select, #main .gefa-formular textarea { width: 100%; max-width: 100%; font-family: inherit; font-size: 18px; line-height: 26px; color: var(--awb-color8); background-color: var(--awb-color1); border: 1px solid var(--awb-custom13); border-radius: 0; box-shadow: none; } #main .gefa-formular input[type="text"], #main .gefa-formular input[type="email"], #main .gefa-formular input[type="tel"], #main .gefa-formular select { height: 56px; padding: 0 16px; } #main .gefa-formular textarea { min-height: 150px; padding: 14px 16px; resize: vertical; } #main .gefa-formular input:hover, #main .gefa-formular select:hover, #main .gefa-formular textarea:hover, #main .gefa-formular input:focus, #main .gefa-formular select:focus, #main .gefa-formular textarea:focus { border-color: var(--awb-color7); } #main .gefa-formular input:focus, #main .gefa-formular select:focus, #main .gefa-formular textarea:focus { outline: none; } /* Feldumschlag von Contact Form 7 als Block, sonst entsteht unter der Beschriftung eine leere Zeile */ #main .gefa-feld .wpcf7-form-control-wrap { display: block; } #main .gefa-formular ::placeholder { color: var(--awb-color6); opacity: 1; } #main .gefa-datenschutz { margin: 4px 0 24px; font-size: 15px; line-height: 24px; color: var(--awb-color6); } #main .gefa-datenschutz .wpcf7-list-item { margin: 0; } /* Link auf die Datenschutzerklärung: rot wie alle Links. Ein in einer