/* /\ /**\ /****\ /\ / \ /**\ / /\ / \ / / \ / \ / / \/ /\ \ / / \/ \/\ \ __/__/_______/___/__\___\______________________________ Made with Passion by GIPFELGOLD // www.gipfelgold.com _______________________________________________________ */ /* Version 241024 */ /* /\ / \/\ _____/___/__\______________________________________________________________ ROOT ___________________________________________________________________________*/ @font-face { font-family: 'blocklight'; src: url('/wp-content/themes/gipfelgold-s-1821-child/fonts/block-light-webfont.woff2') format('woff2'), url('/wp-content/themes/gipfelgold-s-1821-child/fonts/block-light-webfont.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'gravitasgeometricmedium'; src: url('/wp-content/themes/gipfelgold-s-1821-child/fonts/gravitasgeometric-medium-webfont.woff2') format('woff2'), url('/wp-content/themes/gipfelgold-s-1821-child/fonts/gravitasgeometric-medium-webfont.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'gravitasgeometricregular'; src: url('/wp-content/themes/gipfelgold-s-1821-child/fonts/gravitasgeometric-regular-webfont.woff2') format('woff2'), url('/wp-content/themes/gipfelgold-s-1821-child/fonts/gravitasgeometric-regular-webfont.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'gyroscope_sans'; src: url('/wp-content/themes/gipfelgold-s-1821-child/fonts/gyroscope_sans-webfont.woff2') format('woff2'), url('/wp-content/themes/gipfelgold-s-1821-child/fonts/gyroscope_sans-webfont.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; } /* roboto-100 - latin */ @font-face { font-display: swap; font-family: 'Roboto'; font-style: normal; font-weight: 100; src: url('/wp-content/themes/gipfelgold-s-1821-child/fonts/roboto-v32-latin-100.woff2') format('woff2'); } /* roboto-300 - latin */ @font-face { font-display: swap; font-family: 'Roboto'; font-style: normal; font-weight: 300; src: url('/wp-content/themes/gipfelgold-s-1821-child/fonts/roboto-v32-latin-300.woff2') format('woff2'); } /* roboto-regular - latin */ @font-face { font-display: swap; font-family: 'Roboto'; font-style: normal; font-weight: 400; src: url('/wp-content/themes/gipfelgold-s-1821-child/fonts/roboto-v32-latin-regular.woff2') format('woff2'); } /* roboto-italic - latin */ @font-face { font-display: swap; font-family: 'Roboto'; font-style: italic; font-weight: 400; src: url('/wp-content/themes/gipfelgold-s-1821-child/fonts/roboto-v32-latin-italic.woff2') format('woff2'); } /* roboto-italic - latin */ @font-face { font-display: swap; font-family: 'Roboto'; font-style: italic; font-weight: 400; src: url('/wp-content/themes/gipfelgold-s-1821-child/fonts/roboto-v32-latin-italic.woff2') format('woff2'); } /* roboto-500 - latin */ @font-face { font-display: swap; font-family: 'Roboto'; font-style: normal; font-weight: 500; src: url('/wp-content/themes/gipfelgold-s-1821-child/fonts/roboto-v32-latin-500.woff2') format('woff2'); } /* roboto-500italic - latin */ @font-face { font-display: swap; font-family: 'Roboto'; font-style: italic; font-weight: 500; src: url('/wp-content/themes/gipfelgold-s-1821-child/fonts/roboto-v32-latin-500italic.woff2') format('woff2'); } :root { --gold: #aa9478; --rot: #651d32; --hellrot: #faeff0; --sanftrot: #D4CCCE; --hellgrau: #f2f2f2; --cookiebot: #aa9478; --weiss: #ffffff; --schwarz: #000000; } .visually-hidden { position: absolute; left: -9999px; } .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } /* /\ / \/\ _____/___/__\______________________________________________________________ FONTS ___________________________________________________________________________*/ @media only screen and (max-width: 500px) { h1, h2 { word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; hyphens: auto; } } h1, h2, h3, h4, h5, h6, p, li, a, i { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } h1, .h1 {} h2, .h2 {} h3, .h3 {} h4, .h4 {} h5, .h5 {} h6, .h6 {} /* Headline Colors */ #gg .h1, #gg .h1 *, #gg .h2, #gg .h2 *, #gg .h3, #gg .h3 *, #gg .h4, #gg .h4 *, #gg .h5, #gg .h5 * { color: red; } .nectar-responsive-text[data-inherit-heading-family="h1"] *, .nectar-responsive-text[data-inherit-heading-family="h2"] *, .nectar-responsive-text[data-inherit-heading-family="h3"] *, .nectar-responsive-text[data-inherit-heading-family="h4"] *, .nectar-responsive-text[data-inherit-heading-family="h5"] * { color: red; } /* /\ / \/\ _____/___/__\______________________________________________________________ LINKS ___________________________________________________________________________*/ .wpb_text_column a, p a, .nectar-fancy-box .inner a, .nectar-fancy-ul a, .nectar_team_member_overlay .team-desc a, .main-content > .row > h1 a, .main-content > .row > h2 a, .main-content > .row > h3 a, .main-content > .row > h4 a, .main-content > .row > h5 a, .main-content > .row > h6 a, .wp-block-quote a, .wp-block-list a { background-image: linear-gradient(color-mix(in srgb, currentColor 75%, transparent), color-mix(in srgb, currentColor 75%, transparent)); background-position: 0 calc(100% + 2px); background-repeat: no-repeat; background-size: 100% 0.5px; color: inherit; text-decoration: none; transition: background-position 260ms cubic-bezier(.22, .61, .36, 1); } .wpb_text_column a:hover, p a:hover, .nectar-fancy-box .inner a:hover, .nectar-fancy-ul a:hover, .nectar_team_member_overlay .team-desc a:hover, .main-content > .row > h1 a:hover, .main-content > .row > h2 a:hover, .main-content > .row > h3 a:hover, .main-content > .row > h4 a:hover, .main-content > .row > h5 a:hover, .main-content > .row > h6 a:hover, .wp-block-quote a:hover, .wp-block-list a:hover { background-position: 0 calc(100% - 1px); } @media (prefers-reduced-motion: reduce) { .wpb_text_column a, p a, .nectar-fancy-box .inner a, .nectar-fancy-ul a, .nectar_team_member_overlay .team-desc a, .main-content > .row > h1 a, .main-content > .row > h2 a, .main-content > .row > h3 a, .main-content > .row > h4 a, .main-content > .row > h5 a, .main-content > .row > h6 a, .wp-block-quote a, .wp-block-list a { transition: none; } } /* /\ / \/\ _____/___/__\______________________________________________________________ LAYOUT ___________________________________________________________________________*/ @media only screen and (min-width: 1650px) { #gg .einzug-links { padding-left: calc(50vw - 725px + 8vw + 180px); } } @media only screen and (min-width: 1281px) and (max-width: 1649px) { #gg .einzug-links { padding-left: calc(100px + 8vw + 180px); } } @media only screen and (min-width: 1001px) and (max-width: 1280px) { #gg .einzug-links { padding-left: calc(100px + 8vw + 90px); } } @media only screen and (min-width: 691px) and (max-width: 1000px) { #gg .einzug-links { padding-left: calc(8vw + 90px); } } @media only screen and (max-width: 690px) { #gg .einzug-links { padding-left: 40px; } } /* /\ / \/\ _____/___/__\______________________________________________________________ HOME PRELOADER ___________________________________________________________________________*/ /* Sperrt die Startseite waehrend des Preloaders, damit kein darunterliegendes Element vorzeitig bedient wird. */ body.gg-preloader-active { overflow: hidden; } /* Legt die weisse Preloader-Buehne ueber die gesamte Startseite. */ .gg-home-preloader { position: fixed; inset: 0; z-index: 1000000; pointer-events: auto; background: transparent; } /* Zeichnet die zwei Vorhanghaelften, die am Ende nach links und rechts ausfahren. */ .gg-home-preloader__panel { position: absolute; top: 0; bottom: 0; width: 50%; background: #fefdfd; transition: transform 720ms cubic-bezier(.76, 0, .24, 1); will-change: transform; } /* Positioniert die linke Vorhanghaelfte. */ .gg-home-preloader__panel--left { left: 0; } /* Positioniert die rechte Vorhanghaelfte. */ .gg-home-preloader__panel--right { right: 0; } /* Zeichnet die mittige Lade-Linie von unten nach oben. */ .gg-home-preloader__line { position: absolute; left: 50%; bottom: 0; z-index: 2; width: 1px; height: 100%; overflow: hidden; background: transparent; transform: translateX(-50%); } /* Skaliert die Lade-Linie ueber die JS-Variable entsprechend des Ladefortschritts. */ .gg-home-preloader__line-fill { position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; background: var(--gold); transform: scaleY(var(--gg-home-preloader-progress, 0)); transform-origin: 50% 100%; transition: transform 260ms cubic-bezier(.22, .61, .36, 1); } /* Fuehrt die Prozentzahl an der Spitze der Lade-Linie mit. */ .gg-home-preloader__percent { position: absolute; left: 50%; bottom: 0; z-index: 3; color: var(--gold); font-family: gravitasgeometricmedium, sans-serif; font-size: 18px; font-weight: 400; line-height: 1; letter-spacing: .2em; text-transform: uppercase; opacity: var(--gg-home-preloader-percent-opacity, 1); transform: translate(-50%, calc(-100vh * var(--gg-home-preloader-progress, 0) - 14px)); transition: transform 260ms cubic-bezier(.22, .61, .36, 1), opacity 220ms ease; will-change: transform, opacity; } /* Verlangsamt die finale Fahrt auf 100 Prozent, damit der Strich nicht nach oben springt. */ body.gg-preloader-finishing .gg-home-preloader__line-fill, body.gg-preloader-finishing .gg-home-preloader__percent { transition-duration: 720ms; } /* Oeffnet den Preloader bei 100 Prozent schlicht nach links und rechts. */ body.gg-preloader-complete .gg-home-preloader__panel--left { transform: translateX(-100%); } body.gg-preloader-complete .gg-home-preloader__panel--right { transform: translateX(100%); } /* Blendet die Lade-Linie aus, sobald die Vorhanghaelften aufgehen. */ body.gg-preloader-complete .gg-home-preloader__line { opacity: 0; transition: opacity 180ms ease; } /* Entfernt die komplette Preloader-Ebene nach der Outroanimation aus der Interaktion. */ body.gg-preloader-done .gg-home-preloader { visibility: hidden; pointer-events: none; } /* Haelt Logo und untere Leiste auf der Startseite zurueck, bis der Preloader fertig ist. */ body.gg-has-home-preloader:not(.gg-preloader-done) #header-outer #logo, body.gg-has-home-preloader:not(.gg-preloader-done) .gg-fixed-action-bar { opacity: 0; filter: blur(16px); animation: none; } /* Startet die vorhandene Logo-Introanimation erst nach dem Preloader. */ body.gg-has-home-preloader.gg-preloader-done #header-outer #logo { animation-delay: 0ms; } /* Startet die vorhandene Leisten-Introanimation erst nach dem Preloader. */ body.gg-has-home-preloader.gg-preloader-done .gg-fixed-action-bar { animation-delay: 120ms; } /* Reduziert den Preloader bei reduzierter Bewegung auf einen kurzen Fade ohne Vorhangfahrt. */ @media (prefers-reduced-motion: reduce) { body.gg-preloader-active { overflow: auto; } .gg-home-preloader__panel { transition: opacity 120ms ease; } body.gg-preloader-complete .gg-home-preloader__panel { opacity: 0; transform: none; } body.gg-has-home-preloader:not(.gg-preloader-done) #header-outer #logo, body.gg-has-home-preloader:not(.gg-preloader-done) .gg-fixed-action-bar { filter: none; } } /* /\ / \/\ _____/___/__\______________________________________________________________ HEADER ___________________________________________________________________________*/ /* Versteckt die Salient-Mobile-Icons im Header, weil Suche und Menü in der unteren Leiste sitzen. */ #header-outer a.mobile-search, #header-outer .slide-out-widget-area-toggle.mobile-icon { display: none !important; } /* Animiert das Logo beim Laden kurz weich ein. */ #header-outer #logo { filter: blur(0); animation: ggLogoIntro 720ms cubic-bezier(.22, .61, .36, 1) 220ms both; } /* Gibt dem mobilen Header den gewünschten Abstand zum oberen Rand. */ @media only screen and (max-width: 999px) { #header-outer { padding-top: 25px !important; } } /* Reduziert Bewegungen, wenn das Betriebssystem reduzierte Animationen anfordert. */ @media (prefers-reduced-motion: reduce) { #header-outer #logo { filter: none; animation: none; } } /* Definiert die Logo-Introanimation. */ @keyframes ggLogoIntro { 0% { opacity: 0.25; filter: blur(16px); transform: translateY(-8px); } 100% { opacity: 1; filter: blur(0); transform: translateY(0); } } /* /\ / \/\ _____/___/__\______________________________________________________________ FIXED ACTION BAR ___________________________________________________________________________*/ /* Positioniert die aus dem Header verschobene Button-Leiste fix rechts unten. */ .gg-fixed-action-bar { --gg-action-bar-height: 64px; --gg-action-bar-text-padding: 22px; --gg-action-bar-icon-padding: 17px; --gg-action-bar-icon-min-width: 54px; --gg-action-bar-ease: cubic-bezier(.22, .61, .36, 1); position: fixed; right: 0; bottom: 0; z-index: 9999; width: auto; pointer-events: auto; filter: blur(0); animation: ggActionBarIntro 850ms cubic-bezier(.22, .61, .36, 1) 420ms both; } /* Legt die goldene Grundfläche hinter alle Buttons. */ .gg-fixed-action-bar:before { content: ""; position: absolute; inset: 0; z-index: 0; background: var(--gold); } /* Baut die WordPress-Menüliste als horizontale Werkzeugleiste auf. */ .gg-fixed-action-bar nav, .gg-fixed-action-bar nav > ul.buttons { position: relative; z-index: 1; display: flex; align-items: stretch; justify-content: flex-end; width: auto; height: var(--gg-action-bar-height); margin: 0; padding: 0; } /* Entfernt Salient-Floats und normalisiert die Menüeinträge. */ .gg-fixed-action-bar nav > ul.buttons > li { float: none; display: flex; align-items: stretch; height: var(--gg-action-bar-height); margin: 0; line-height: 1; list-style: none; } /* Normalisiert Links, Suchbutton und Menübutton auf dieselbe Button-Basis. */ .gg-fixed-action-bar nav > ul.buttons > li > a, .gg-fixed-action-bar #search-btn > div > a, .gg-fixed-action-bar .slide-out-widget-area-toggle > div > a { position: relative; display: flex; align-items: center; justify-content: center; min-width: 0; height: var(--gg-action-bar-height); padding: 0 var(--gg-action-bar-icon-padding); overflow: hidden; color: var(--gold); background: var(--hellgrau); line-height: 1; transition: color 400ms cubic-bezier(.215, .61, .355, 1); } /* Sorgt dafür, dass die verschachtelten Salient-Wrapper beim Such- und Menübutton nicht stören. */ .gg-fixed-action-bar #search-btn > div, .gg-fixed-action-bar .slide-out-widget-area-toggle > div { display: flex; align-items: stretch; height: var(--gg-action-bar-height); } /* Gibt Textbuttons eine einheitliche linke und rechte Innenflaeche statt fixer Breiten. */ .gg-fixed-action-bar nav > ul.buttons > li.nav-btn-buchen > a, .gg-fixed-action-bar nav > ul.buttons > li.nav-btn-anfrage > a { padding-right: var(--gg-action-bar-text-padding); padding-left: var(--gg-action-bar-text-padding); } /* Gibt Iconbuttons eine gemeinsame Mindest-Klickflaeche ohne individuelle Buttonbreiten. */ .gg-fixed-action-bar .nav-btn-anrufen > a, .gg-fixed-action-bar #search-btn > div > a, .gg-fixed-action-bar .slide-out-widget-area-toggle > div > a { min-width: var(--gg-action-bar-icon-min-width); } /* Macht den Buchen-Button initial gold und invertiert ihn beim Hover. */ .gg-fixed-action-bar nav > ul.buttons > li.nav-btn-buchen > a { color: var(--weiss); background-color: var(--gold); } /* Definiert die Textfarben der Hover- und Aktivzustände. */ .gg-fixed-action-bar nav > ul.buttons > li.nav-btn-buchen > a:hover, .gg-fixed-action-bar nav > ul.buttons > li.nav-btn-buchen > a:focus-visible, .gg-fixed-action-bar nav > ul.buttons > li.nav-btn-buchen > a.gg-action-hover { color: var(--gold); } .gg-fixed-action-bar nav > ul.buttons > li.nav-btn-anfrage > a:hover, .gg-fixed-action-bar nav > ul.buttons > li.nav-btn-anfrage > a:focus-visible, .gg-fixed-action-bar nav > ul.buttons > li.nav-btn-anfrage > a.gg-action-hover, .gg-fixed-action-bar .nav-btn-anrufen > a:hover, .gg-fixed-action-bar .nav-btn-anrufen > a:focus-visible, .gg-fixed-action-bar .nav-btn-anrufen > a.gg-action-hover, .gg-fixed-action-bar #search-btn > div > a:hover, .gg-fixed-action-bar #search-btn > div > a:focus-visible, .gg-fixed-action-bar #search-btn > div > a.gg-action-hover, .gg-fixed-action-bar .slide-out-widget-area-toggle > div > a:hover, .gg-fixed-action-bar .slide-out-widget-area-toggle > div > a:focus-visible, .gg-fixed-action-bar .slide-out-widget-area-toggle > div > a.gg-action-hover, .gg-fixed-action-bar .slide-out-widget-area-toggle > div > a.open, .gg-fixed-action-bar .slide-out-widget-area-toggle > div > a[aria-expanded="true"] { color: var(--weiss); } /* Zeichnet die flache Richtungs-Hoverfläche, die per JS von der Eintrittskante animiert wird. */ .gg-fixed-action-bar .gg-action-fill { position: absolute; inset: 0; z-index: 0; display: block; width: 100%; height: 100% !important; pointer-events: none; background: var(--gold); -webkit-clip-path: inset(0 100% 0 0); clip-path: inset(0 100% 0 0); transition: -webkit-clip-path 400ms cubic-bezier(.215, .61, .355, 1), clip-path 400ms cubic-bezier(.215, .61, .355, 1); } /* Beim goldenen Buchen-Button wird die Hoverfläche hell statt gold. */ .gg-fixed-action-bar .nav-btn-buchen .gg-action-fill { background: var(--hellgrau); } /* Definiert die vier möglichen Startkanten der Hoveranimation. */ .gg-fixed-action-bar a[data-gg-hover-dir="left"] .gg-action-fill { -webkit-clip-path: inset(0 100% 0 0); clip-path: inset(0 100% 0 0); } .gg-fixed-action-bar a[data-gg-hover-dir="right"] .gg-action-fill { -webkit-clip-path: inset(0 0 0 100%); clip-path: inset(0 0 0 100%); } .gg-fixed-action-bar a[data-gg-hover-dir="top"] .gg-action-fill { -webkit-clip-path: inset(0 0 100% 0); clip-path: inset(0 0 100% 0); } .gg-fixed-action-bar a[data-gg-hover-dir="bottom"] .gg-action-fill { -webkit-clip-path: inset(100% 0 0 0); clip-path: inset(100% 0 0 0); } /* Öffnet die Hoverfläche bei Hover, Fokus und aktiven Such-/Menüzuständen. */ .gg-fixed-action-bar a.gg-action-hover .gg-action-fill, .gg-fixed-action-bar a.open .gg-action-fill, .gg-fixed-action-bar a[aria-expanded="true"] .gg-action-fill { -webkit-clip-path: inset(0); clip-path: inset(0); } /* Hält den Text über der Hoverfläche und spiegelt die Navigation-Font-Themeoption nach dem Verschieben in den Body. */ .gg-fixed-action-bar .menu-title-text { position: relative; z-index: 1; color: inherit; font-family: Outfit, sans-serif; font-size: 14px; font-weight: 400; line-height: 1; text-transform: uppercase; letter-spacing: 0.14em; } /* Versteckt Telefonnummern- und Screenreader-Text visuell, ohne ihn aus dem DOM zu entfernen. */ .gg-fixed-action-bar .menu-item-hidden-text .menu-title-text, .gg-fixed-action-bar .screen-reader-text { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } /* Vereinheitlicht Phone- und Suchicon und gibt ihnen den 10%-Hover-Zoom. */ .gg-fixed-action-bar .nectar-menu-icon-img, .gg-fixed-action-bar #search-btn .icon-salient-search { position: relative; z-index: 1; display: block; width: 20px; height: 20px; transition: filter 260ms var(--gg-action-bar-ease), transform 260ms var(--gg-action-bar-ease); } /* Ersetzt das Salient-Suchicon durch die bereitgestellte Lupe. */ .gg-fixed-action-bar #search-btn .icon-salient-search { background: url('/wp-content/uploads/2026/07/icon-lupe.svg') center / contain no-repeat; } /* Entfernt die alte Iconfont-Glyphe hinter dem Lupen-Icon. */ .gg-fixed-action-bar #search-btn .icon-salient-search:before { content: none; } /* Färbt Phone und Lupe im Hover hell und vergrößert sie leicht. */ .gg-fixed-action-bar .nav-btn-anrufen > a:hover .nectar-menu-icon-img, .gg-fixed-action-bar .nav-btn-anrufen > a:focus-visible .nectar-menu-icon-img, .gg-fixed-action-bar #search-btn > div > a:hover .icon-salient-search, .gg-fixed-action-bar #search-btn > div > a:focus-visible .icon-salient-search { filter: brightness(0) invert(1); transform: scale(1.1); } /* Blendet Salients Burger-/Close-Markup aus, damit wir die zwei Linien sauber selbst zeichnen. */ .gg-fixed-action-bar .slide-out-widget-area-toggle .lines-button, .gg-fixed-action-bar .slide-out-widget-area-toggle .close-wrap { display: none; } /* Zeichnet den geschlossenen Menübutton als zwei horizontale Linien. */ .gg-fixed-action-bar .slide-out-widget-area-toggle > div > a:before, .gg-fixed-action-bar .slide-out-widget-area-toggle > div > a:after { content: ""; position: absolute; z-index: 1; left: calc(50% - 10px); width: 20px; height: 1px; background-color: var(--gold); transform-origin: 50% 50%; transition: top 260ms var(--gg-action-bar-ease), transform 320ms var(--gg-action-bar-ease), background-color 260ms var(--gg-action-bar-ease); } /* Positioniert die zwei Linien im geschlossenen Zustand. */ .gg-fixed-action-bar .slide-out-widget-area-toggle > div > a:before { top: 28px; } .gg-fixed-action-bar .slide-out-widget-area-toggle > div > a:after { top: 36px; } /* Verwandelt die zwei Linien bei geöffnetem Menü in ein X. */ .gg-fixed-action-bar .slide-out-widget-area-toggle > div > a.open:before, .gg-fixed-action-bar .slide-out-widget-area-toggle > div > a[aria-expanded="true"]:before { top: 32px; background-color: var(--weiss); transform: rotate(45deg); } .gg-fixed-action-bar .slide-out-widget-area-toggle > div > a.open:after, .gg-fixed-action-bar .slide-out-widget-area-toggle > div > a[aria-expanded="true"]:after { top: 32px; background-color: var(--weiss); transform: rotate(-45deg); } /* Färbt die Menülijnen beim Hover weiß. */ .gg-fixed-action-bar .slide-out-widget-area-toggle > div > a:hover:before, .gg-fixed-action-bar .slide-out-widget-area-toggle > div > a:hover:after, .gg-fixed-action-bar .slide-out-widget-area-toggle > div > a:focus-visible:before, .gg-fixed-action-bar .slide-out-widget-area-toggle > div > a:focus-visible:after { background-color: var(--weiss); } /* Hält die untere Leiste über dem Suchoverlay sichtbar. */ body:has(#search-outer.material-open) .gg-fixed-action-bar { z-index: 100005; } /* Markiert den Suchbutton aktiv, solange die Suche geöffnet ist. */ body:has(#search-outer.material-open) .gg-fixed-action-bar #search-btn > div > a { color: var(--weiss); } body:has(#search-outer.material-open) .gg-fixed-action-bar #search-btn > div > a .gg-action-fill { -webkit-clip-path: inset(0); clip-path: inset(0); } body:has(#search-outer.material-open) .gg-fixed-action-bar #search-btn .icon-salient-search { filter: brightness(0) invert(1); } /* Verhindert auf Touchgeräten klebende Hoverfarben am geschlossenen Menübutton. */ @media (hover: none) and (pointer: coarse) { .gg-fixed-action-bar .slide-out-widget-area-toggle > div > a.closed:hover { color: var(--gold); } .gg-fixed-action-bar .slide-out-widget-area-toggle > div > a.closed:hover:before, .gg-fixed-action-bar .slide-out-widget-area-toggle > div > a.closed:hover:after { background-color: var(--gold); } .gg-fixed-action-bar .slide-out-widget-area-toggle > div > a.closed:hover .gg-action-fill { -webkit-clip-path: inset(0 100% 0 0); clip-path: inset(0 100% 0 0); } } /* Streckt die Leiste unter 768px über die volle Breite. */ @media only screen and (max-width: 767px) { .gg-fixed-action-bar { width: 100vw; animation-name: ggActionBarIntroMobile; animation-duration: 700ms; } .gg-fixed-action-bar nav > ul.buttons > li { flex: 1 1 max-content; min-width: 0; } .gg-fixed-action-bar nav > ul.buttons > li > a, .gg-fixed-action-bar nav > ul.buttons > li.nav-btn-buchen > a, .gg-fixed-action-bar nav > ul.buttons > li.nav-btn-anfrage > a, .gg-fixed-action-bar nav > ul.buttons > li.nav-btn-anrufen > a, .gg-fixed-action-bar #search-btn > div, .gg-fixed-action-bar #search-btn > div > a, .gg-fixed-action-bar .slide-out-widget-area-toggle > div, .gg-fixed-action-bar .slide-out-widget-area-toggle > div > a { width: 100%; min-width: 0; } .gg-fixed-action-bar nav > ul.buttons > li.nav-btn-anrufen > a, .gg-fixed-action-bar #search-btn > div > a, .gg-fixed-action-bar .slide-out-widget-area-toggle > div > a { min-width: var(--gg-action-bar-icon-min-width); } } /* Schaltet die Leistenanimation ab, wenn reduzierte Bewegungen aktiv sind. */ @media (prefers-reduced-motion: reduce) { .gg-fixed-action-bar { filter: none; animation: none; } .gg-fixed-action-bar *, .gg-fixed-action-bar *:before, .gg-fixed-action-bar *:after { transition-duration: 1ms; animation-duration: 1ms; } } /* Definiert die Introanimation der unteren Leiste auf Desktop. */ @keyframes ggActionBarIntro { 0% { opacity: 0; filter: blur(12px); transform: translateY(100%); } 100% { opacity: 1; filter: blur(0); transform: translateY(0); } } /* Definiert die etwas kürzere Introanimation der unteren Leiste auf Mobile. */ @keyframes ggActionBarIntroMobile { 0% { opacity: 0; filter: blur(10px); transform: translateY(100%); } 100% { opacity: 1; filter: blur(0); transform: translateY(0); } } /* /\ / \/\ _____/___/__\______________________________________________________________ OFF CANVAS MENU ___________________________________________________________________________*/ /* Stellt die dunkle Grundflaeche bereit, auf der das Bild weich ein- und ausblendet. */ #slide-out-widget-area.fullscreen-split { background-color: #15110e !important; } /* Legt das Off-Canvas-Hintergrundbild auf eine eigene Ebene, damit es animierbar ist. */ #slide-out-widget-area.fullscreen-split:before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('/wp-content/uploads/2026/07/maison-talmuehle-rezeption-02.webp'); background-position: center center !important; background-size: cover !important; background-repeat: no-repeat !important; opacity: 0; filter: blur(18px); transform: scale(1.06); transition: opacity 0.55s ease, filter 0.9s cubic-bezier(0.2, 0.75, 0.5, 1), transform 1s cubic-bezier(0.2, 0.75, 0.5, 1); will-change: opacity, filter, transform; } /* Bringt das Hintergrundbild beim Oeffnen ruhig in Schaerfe und Groesse. */ #slide-out-widget-area.fullscreen-split.open:before { opacity: 1; filter: blur(0); transform: scale(1); } /* Entfernt Salients oberen Innenabstand, damit das Menü frei über dem Bild liegt. */ #slide-out-widget-area.fullscreen-split .inner-wrap { padding-top: 0 !important; } /* Stellt eine volle Viewport-Höhe für die Split-Komposition sicher. */ #slide-out-widget-area.fullscreen-split .inner { position: relative; min-height: 100dvh; } /* Verhindert, dass das normale Headerlogo über dem geöffneten Off-Canvas-Menü steht. */ body.material-ocm-open #header-outer #logo, body:has(#slide-out-widget-area.open) #header-outer #logo { visibility: hidden !important; } /* Positioniert Social Icons und Logo im oberen Off-Canvas-Bereich. */ .gg-off-canvas-header { position: fixed; top: clamp(42px, 5vw, 72px); left: clamp(34px, 22vw, 320px); right: clamp(34px, 22vw, 320px); z-index: 12; display: flex; align-items: flex-start; justify-content: space-between; pointer-events: none; } /* Ordnet die Social Icons horizontal an. */ .gg-off-canvas-social { display: flex; gap: 14px; margin: 0; padding: 0; list-style: none; pointer-events: auto; } /* Gibt den Social Links eine stabile Klickfläche. */ .gg-off-canvas-social a { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; color: var(--weiss); font-size: 18px; line-height: 1; text-decoration: none; transition: opacity 0.25s ease; } /* Dimmt Social Icons dezent beim Hover. */ .gg-off-canvas-social a:hover { opacity: 0.7; } /* Skaliert die eigenen Social-SVGs in die vorhandene Klickflaeche. */ .gg-off-canvas-social img { display: block; width: 100%; height: 100%; } /* Skaliert das Off-Canvas-Logo responsiv. */ .gg-off-canvas-logo { display: block; width: clamp(118px, 8vw, 145px); pointer-events: auto; } /* Verhindert Bildabstände im Logo. */ .gg-off-canvas-logo img { display: block; width: 100%; height: auto; } /* Macht den Salient-Container vollflächig, damit links/rechts frei positioniert werden können. */ #slide-out-widget-area.fullscreen-split .container.normal-container { position: relative; z-index: 2; width: 100% !important; max-width: none !important; min-height: 100dvh; margin: 0 !important; padding: 0 !important; } /* Entfernt Salient-Spaltenfloats im Split-Menü. */ #slide-out-widget-area.fullscreen-split .container.normal-container .left-side, #slide-out-widget-area.fullscreen-split .container.normal-container .right-side { float: none; width: auto; margin: 0; } /* Positioniert die Hauptnavigation links in der Desktop-Komposition. */ #slide-out-widget-area.fullscreen-split .container.normal-container .left-side { position: absolute; bottom: clamp(170px, 18vh, 230px); left: 32vw; width: min(34vw, 420px); } /* Gibt den Hauptmenüpunkten mehr vertikalen Atem. */ #slide-out-widget-area.fullscreen-split .off-canvas-menu-container ul.menu { display: flex; flex-direction: column; gap: clamp(28px, 4.2vh, 48px); margin: 0; padding: 0; } /* Normalisiert die Listenpunkte des Hauptmenüs. */ #slide-out-widget-area.fullscreen-split .off-canvas-menu-container ul.menu > li { margin: 0; padding: 0; line-height: 1; } /* Setzt nur die Linkfarbe; Schriftgroesse, Familie, Gewicht und Transformation kommen aus den Theme-Optionen. */ #slide-out-widget-area.fullscreen-split .off-canvas-menu-container ul.menu > li > a { color: var(--weiss); } /* Bereitet Off-Canvas-Menue-Links fuer die ruhige Unterlinienanimation vor. */ #slide-out-widget-area.fullscreen-split .off-canvas-menu-container ul.menu > li > a, #slide-out-widget-area.fullscreen-split .right-side .widget_nav_menu a, #slide-out-widget-area.fullscreen-split .wpml-ls a { position: relative; display: inline-block; text-decoration: none; } /* Legt die Hover-Linie knapp unter die Off-Canvas-Linkschrift. */ #slide-out-widget-area.fullscreen-split .off-canvas-menu-container ul.menu > li > a::after, #slide-out-widget-area.fullscreen-split .right-side .widget_nav_menu a::after, #slide-out-widget-area.fullscreen-split .wpml-ls a::after { content: ""; position: absolute; right: 0; bottom: -0.16em; left: 0; height: 0.5px; background: color-mix(in srgb, currentColor 75%, transparent); opacity: 0; transform: translateY(2px); transition: opacity 260ms cubic-bezier(.22, .61, .36, 1), transform 260ms cubic-bezier(.22, .61, .36, 1); } /* Blendet die Off-Canvas-Unterlinie beim Hover weich von unten ein. */ #slide-out-widget-area.fullscreen-split .off-canvas-menu-container ul.menu > li > a:hover::after, #slide-out-widget-area.fullscreen-split .off-canvas-menu-container ul.menu > li > a:focus-visible::after, #slide-out-widget-area.fullscreen-split .right-side .widget_nav_menu a:hover::after, #slide-out-widget-area.fullscreen-split .right-side .widget_nav_menu a:focus-visible::after, #slide-out-widget-area.fullscreen-split .wpml-ls a:hover::after, #slide-out-widget-area.fullscreen-split .wpml-ls a:focus-visible::after { opacity: 1; transform: translateY(0); } /* Schaltet die Off-Canvas-Linkanimation bei reduzierter Bewegung ab. */ @media (prefers-reduced-motion: reduce) { #slide-out-widget-area.fullscreen-split .off-canvas-menu-container ul.menu > li > a::after, #slide-out-widget-area.fullscreen-split .right-side .widget_nav_menu a::after, #slide-out-widget-area.fullscreen-split .wpml-ls a::after { transform: none; transition: opacity 160ms ease; } } /* Positioniert das sekundäre Menü rechts in der Desktop-Komposition. */ #slide-out-widget-area.fullscreen-split .right-side { position: absolute; bottom: clamp(170px, 18vh, 230px); left: 73vw; width: min(30vw, 330px); text-align: right; transform: translateX(-50%); } /* Stapelt sekundäres Menü und Sprachumschalter. */ #slide-out-widget-area.fullscreen-split .right-side-inner { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 44px; } /* Entfernt Widget-Abstände im sekundären Menübereich. */ #slide-out-widget-area.fullscreen-split .right-side .widget { margin: 0; } /* Gibt den sekundären Links gleichmäßigen Abstand. */ #slide-out-widget-area.fullscreen-split .right-side .widget_nav_menu ul.menu { display: flex; flex-direction: column; align-items: flex-end; gap: 18px; margin: 0; padding: 0; } /* Normalisiert die sekundären Listenpunkte. */ #slide-out-widget-area.fullscreen-split .right-side .widget_nav_menu li { margin: 0; padding: 0; line-height: 1; } /* Setzt Farbe und Größe der sekundären Links; Schriftfamilie kann über Theme/WPML kommen. */ #slide-out-widget-area.fullscreen-split .right-side .widget_nav_menu a, #slide-out-widget-area.fullscreen-split .wpml-ls a { color: var(--weiss); font-size: clamp(18px, 1.15vw, 24px); line-height: 1.2; letter-spacing: 0; text-decoration: none; } /* Zeigt die WPML-Sprachen inline, ohne eigene Hintergrundfläche. */ #slide-out-widget-area.fullscreen-split .wpml-ls ul { display: flex; justify-content: center; gap: 18px; margin: 0; padding: 0; list-style: none; } /* Blendet Salients Bottom-Meta aus, weil die untere Action-Bar diese Rolle übernimmt. */ #slide-out-widget-area.fullscreen-split .bottom-meta-wrap { display: none; } /* Stapelt Off-Canvas-Inhalte auf Tablet und Mobile untereinander. */ @media only screen and (max-width: 999px) { #slide-out-widget-area.fullscreen-split:before { background-position: center top !important; } .gg-off-canvas-header { top: 50px; left: 42px; right: 34px; } .gg-off-canvas-social { gap: 10px; } .gg-off-canvas-social a { width: 18px; height: 18px; font-size: 16px; } .gg-off-canvas-logo { width: 118px; } #slide-out-widget-area.fullscreen-split .container.normal-container { display: flex; flex-direction: column; justify-content: flex-start; min-height: 100dvh; padding: 130px 28px 152px !important; text-align: center; } #slide-out-widget-area.fullscreen-split .container.normal-container .left-side, #slide-out-widget-area.fullscreen-split .container.normal-container .right-side { position: static; width: 100% !important; max-width: none !important; flex: 0 0 auto !important; transform: none; padding-right: 0 !important; padding-left: 0 !important; } #slide-out-widget-area.fullscreen-split .container.normal-container .left-side, #slide-out-widget-area.fullscreen-split .container.normal-container .left-side .off-canvas-menu-container, body #slide-out-widget-area.fullscreen-split .container.normal-container .left-side .off-canvas-menu-container > ul.menu { display: flex; justify-content: center; width: 100% !important; min-width: 100% !important; max-width: 100% !important; text-align: center; } #slide-out-widget-area.fullscreen-split .off-canvas-menu-container ul.menu { align-items: center; width: 100% !important; min-width: 100% !important; max-width: 100% !important; gap: clamp(24px, 3.25vh, 34px); } #slide-out-widget-area.fullscreen-split .off-canvas-menu-container ul.menu > li { width: 100% !important; text-align: center; } #slide-out-widget-area.fullscreen-split .off-canvas-menu-container ul.menu > li > a { display: block; width: max-content; margin-right: auto; margin-left: auto; text-align: center; } #slide-out-widget-area.fullscreen-split .right-side { margin-top: 0; padding-top: clamp(34px, 4vh, 46px) !important; text-align: center; } #slide-out-widget-area.fullscreen-split .right-side-inner { align-items: center; gap: 28px; } #slide-out-widget-area.fullscreen-split .right-side .widget_nav_menu ul.menu { align-items: center; gap: 16px; } #slide-out-widget-area.fullscreen-split .right-side .widget_nav_menu a, #slide-out-widget-area.fullscreen-split .wpml-ls a { font-size: clamp(17px, 4vw, 18px); line-height: 1.15; } #slide-out-widget-area.fullscreen-split .wpml-ls { width: auto; margin: 0; padding: 0; background: transparent; } } /* /\ / \/\ _____/___/__\______________________________________________________________ SEARCH MODAL ___________________________________________________________________________*/ /* Verwandelt Salients Header-Suche in ein zentriertes Modal. */ body.material #header-outer #search-outer.nectar.material-open { position: fixed !important; inset: 0 !important; z-index: 100003 !important; display: flex !important; align-items: center; justify-content: center; width: 100vw !important; height: 100dvh !important; padding: 24px !important; overflow: auto; background: transparent !important; opacity: 1 !important; transform: none !important; transition: none !important; } /* Zeichnet die reduzierte Abdunklung hinter dem Suchmodal. */ body.material #header-outer #search-outer.nectar.material-open:before { content: ""; position: fixed !important; inset: 0 !important; z-index: 0; background: rgba(0, 0, 0, 0.31) !important; opacity: 1 !important; transform: none !important; transition: none !important; } /* Nimmt dem Header beim Suchzustand Höhe, Fläche und Animation. */ body.material #header-outer.material-search-open, body.material #header-outer.material-search-open header#top { height: 0 !important; min-height: 0 !important; background: transparent !important; box-shadow: none !important; } /* Verhindert den dunklen/hellen Theme-Balken über dem Suchmodal. */ body.material #header-outer.material-search-open .bg-color-stripe { display: none !important; opacity: 0 !important; transform: none !important; transition: none !important; } /* Versteckt die normale Headernavigation, solange die Suche offen ist. */ body.material #header-outer.material-search-open #top { position: relative; z-index: 0 !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transition: none !important; } /* Hält Salients Such-Subelemente frei von alten Slide-Animationen. */ body.material #header-outer #search-outer.nectar.material-open, body.material #header-outer #search-outer.nectar.material-open:before, body.material #header-outer #search-outer.nectar.material-open #search, body.material #header-outer #search-outer.nectar.material-open #search-box, body.material #header-outer #search-outer.nectar.material-open #search #close, body.material #header-outer #search-outer.nectar.material-open .nectar-ajax-search-results { transform: none !important; transition: none !important; } /* Gestaltet die sichtbare Suchbox. */ body.material #header-outer #search-outer.nectar.material-open #search { position: relative; z-index: 2 !important; display: block !important; width: min(720px, 100%) !important; height: auto !important; min-height: 0 !important; padding: 48px 56px 56px !important; overflow: visible !important; background: var(--hellgrau) !important; box-shadow: 0 24px 70px rgba(0, 0, 0, 0.22) !important; animation: ggSearchModalIn 320ms cubic-bezier(.22, .61, .36, 1) both; } /* Normalisiert Container und Formular innerhalb der Suchbox. */ body.material #header-outer #search-outer.nectar.material-open #search .container, body.material #header-outer #search-outer.nectar.material-open #search-box, body.material #header-outer #search-outer.nectar.material-open #search-box .inner-wrap, body.material #header-outer #search-outer.nectar.material-open #search .col.span_12, body.material #header-outer #search-outer.nectar.material-open #search form { width: 100% !important; max-width: none; height: auto !important; min-height: 0 !important; margin: 0; padding: 0; opacity: 1 !important; transform: none !important; } /* Entfernt die absolute Position des Salient-Containers. */ body.material #header-outer #search-outer.nectar.material-open #search .container { position: static !important; } /* Legt das Suchformular als einzeilige Eingabe an. */ body.material #header-outer #search-outer.nectar.material-open #search form { position: relative; display: flex !important; align-items: center; gap: 0; } /* Gestaltet das Suchfeld groß, ruhig und responsive. */ body.material #header-outer #search-outer.nectar.material-open #search input[type="text"], body.material #header-outer #search-outer.nectar.material-open #search input[type="search"] { flex: 1 1 auto !important; width: 100% !important; min-width: 0 !important; height: 58px !important; margin: 0; padding: 0 0 12px; color: var(--schwarz); background: transparent; border: 0; border-bottom: 1px solid rgba(0, 0, 0, 0.28); border-radius: 0; box-shadow: none; font-family: Outfit, sans-serif; font-size: clamp(28px, 4vw, 42px); font-weight: 200; line-height: 1.1; letter-spacing: 0.04em; } /* Hält den Placeholder zurückhaltend. */ body.material #header-outer #search-outer.nectar.material-open #search input[type="text"]::placeholder, body.material #header-outer #search-outer.nectar.material-open #search input[type="search"]::placeholder { color: rgba(0, 0, 0, 0.42); } /* Positioniert den Hilfetext unter dem Suchfeld. */ body.material #header-outer #search-outer.nectar.material-open #search .span_12 > form > span { position: absolute; top: calc(100% + 12px); left: 0; display: block; color: rgba(0, 0, 0, 0.52); font-family: Outfit, sans-serif; font-size: 12px; font-weight: 300; line-height: 1.4; letter-spacing: 0.12em; text-transform: uppercase; opacity: 1 !important; transform: none !important; transition: none !important; } /* Blendet den separaten Suchbutton aus, weil Enter die Suche startet. */ body.material #header-outer #search-outer #search .search-box__button, body.material #header-outer #search-outer.nectar.material-open #search .search-box__button { position: static !important; display: none !important; opacity: 1 !important; transform: none !important; } /* Platziert das Schließen-X rechts oben in der Suchbox. */ body.material #header-outer #search-outer.nectar.material-open #search #close { position: absolute; top: 10px !important; right: 10px !important; left: auto !important; bottom: auto !important; width: 36px; height: 36px; margin: 0 !important; opacity: 1 !important; transform: none !important; } /* Zentriert die Klickfläche des Schließen-Links. */ body.material #header-outer #search-outer.nectar.material-open #search #close a { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; } /* Normalisiert Salients Close-Markup. */ body.material #header-outer #search-outer.nectar.material-open #search #close .close-wrap { position: absolute !important; top: 50% !important; left: 50% !important; display: block; width: 18px; height: 18px; margin: 0 !important; overflow: visible !important; transform: translate(-50%, -50%) !important; } /* Zeichnet das Suchmodal-X mit der Goldfarbe. */ body.material #header-outer #search-outer.nectar.material-open #search #close .close-line { position: absolute; top: 50%; left: 0; display: block; width: 18px; height: 1px; background: var(--gold); } body.material #header-outer #search-outer.nectar.material-open #search #close .close-line1 { transform: rotate(45deg); } body.material #header-outer #search-outer.nectar.material-open #search #close .close-line2 { transform: rotate(-45deg); } /* Positioniert die Ajax-Suchergebnisse direkt unter der Modalbox. */ body.material #header-outer #search-outer.nectar.material-open .nectar-ajax-search-results { position: absolute; top: calc(50% + 92px); left: 50%; z-index: 2 !important; width: min(720px, calc(100vw - 48px)); overflow: hidden; background: var(--hellgrau); box-shadow: 0 28px 70px rgba(0, 0, 0, 0.2); transform: translateX(-50%) !important; } /* Normalisiert die Ergebniscontainer. */ body.material #header-outer #search-outer.nectar.material-open .nectar-ajax-search-results .container, body.material #header-outer #search-outer.nectar.material-open .nectar-ajax-search-results .inner { width: 100%; max-width: none; margin: 0; padding: 0; } /* Begrenzt die Höhe der Ergebnisliste. */ body.material #header-outer #search-outer.nectar.material-open .nectar-ajax-search-results .inner { max-height: min(40vh, 360px); overflow: auto; padding: 16px 24px 22px; } /* Trennt einzelne Suchergebnisse optisch zurückhaltend. */ body.material #header-outer #search-outer.nectar.material-open .nectar-ajax-search-results .search-post-item { margin: 0; padding: 14px 0; border-bottom: 1px solid rgba(0, 0, 0, 0.08); } /* Verhindert alte Outro-Animationen, wenn die Suche geschlossen wird. */ body.material.gg-search-is-closing #header-outer #search-outer.nectar, body.material.gg-search-is-closing #header-outer #search-outer.nectar:before, body.material.gg-search-is-closing #header-outer #search-outer.nectar #search, body.material.gg-search-is-closing #header-outer #search-outer.nectar #search-box, body.material.gg-search-is-closing #header-outer #search-outer.nectar #search #close, body.material.gg-search-is-closing #header-outer #search-outer.nectar .nectar-ajax-search-results, body.material.gg-search-is-closing #header-outer .bg-color-stripe { display: none !important; opacity: 0 !important; max-height: 0 !important; pointer-events: none !important; transform: none !important; transition: none !important; animation: none !important; } /* Passt das Suchmodal auf kleine Screens an. */ @media only screen and (max-width: 690px) { body.material #header-outer #search-outer.nectar.material-open { align-items: flex-start !important; padding: 20px !important; } body.material #header-outer #search-outer.nectar.material-open #search { width: 100% !important; margin-top: 18vh !important; padding: 56px 24px 54px !important; } body.material #header-outer #search-outer.nectar.material-open #search form { flex-direction: column !important; align-items: stretch !important; } body.material #header-outer #search-outer.nectar.material-open #search .span_12 > form > span { position: static; margin-top: 18px; } body.material #header-outer #search-outer.nectar.material-open .nectar-ajax-search-results { top: calc(18vh + 320px); width: calc(100vw - 40px); } } /* Definiert das weiche Einblenden der Suchbox. */ @keyframes ggSearchModalIn { 0% { opacity: 0; filter: blur(10px); } 100% { opacity: 1; filter: blur(0); } } /* /\ / \/\ _____/___/__\______________________________________________________________ HERO ___________________________________________________________________________*/ .guteneuigkeiten { font-family: 'gyroscope_sans' !important; font-weight: normal !important; font-style: normal !important; font-size: clamp(50px,8.8vw,160px) !important; line-height: 0.95 !important; } .ausdemschwarzwald { font-family: 'gravitasgeometricmedium' !important; font-weight: normal !important; font-style: normal !important; font-size: clamp(20px,2.2vw,40px) !important; line-height: 0.95 !important; text-transform: uppercase !important; letter-spacing: 0.2em !important; } #gg .nectar-post-grid[data-text-color=dark] .nectar-post-grid-item .content .post-heading * { color: var(--gold); } .nectar-post-grid[data-text-hover-color=dark] .nectar-underline .post-heading { background-image: linear-gradient(to right, var(--gold) 0, var(--gold) 100%); } /* /\ / \/\ _____/___/__\______________________________________________________________ TOUCH INDICATOR ___________________________________________________________________________*/ /* Ergaenzt den Salient-Blur auch fuer Flickity-Galerien, die keine eigene Blur-Option anbieten. */ .nectar-drag-indicator .color-circle { -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } /* Uebernimmt den gleichen Blur fuer Video-Lightbox-Playbuttons und deren Mouse-Follow-Variante. */ .nectar-video-box .play_button_mouse_follow:before, .nectar-video-box a.nectar_video_lightbox:not(.play_button_mouse_follow):before, .nectar-video-box[data-hover="zoom_button"] .nectar_video_lightbox:after, .nectar_video_lightbox.play_button_with_text .play > .inner-wrap:before { -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } /* Entfernt den Salient-Schatten hinter dem Video-Lightbox-Indikator. */ .nectar-video-box:not([data-mouse-style="see_through_contrast"]) a.nectar_video_lightbox { box-shadow: none; } /* Legt das Play-Icon ueber die geblurte Kreisflaeche, damit das SVG selbst scharf bleibt. */ .nectar-video-box .play_button_mouse_follow .play, .nectar-video-box a.nectar_video_lightbox:not(.play_button_mouse_follow) .play { position: relative; z-index: 20; } /* /\ / \/\ _____/___/__\______________________________________________________________ CTA LINKS ___________________________________________________________________________*/ /* Macht den CTA-Text als eigene Animationsebene steuerbar. */ .nectar-cta.hover-expand .link_text .text { display: inline-block; transition: letter-spacing 420ms cubic-bezier(.22, .61, .36, 1); } /* Erweitert die Laufweite beim Hover und Fokus ruhig nach Kamezi-Referenz. */ .nectar-cta.hover-expand .link_text:hover .text, .nectar-cta.hover-expand .link_text:focus-visible .text { letter-spacing: 0.28em; } /* Schaltet die Laufweitenanimation bei reduzierter Bewegung ab. */ @media (prefers-reduced-motion: reduce) { .nectar-cta.hover-expand .link_text .text { transition: none; } } /* /\ / \/\ _____/___/__\______________________________________________________________ DIAGONAL LINE ___________________________________________________________________________*/ /* Definiert die Layoutbox fuer die gedrehte Salient-Linie. */ .gg-diagonal-cta { --gg-diagonal-line-length: 135px; --gg-diagonal-line-box: 96px; } /* Ordnet Divider und eine oder mehrere CTAs als linke Linie plus rechte Button-Spalte an. */ .gg-diagonal-cta .wpb_wrapper { display: inline-grid; grid-template-columns: var(--gg-diagonal-line-box) minmax(0, auto); column-gap: 5px; row-gap: 8px; align-items: end; } /* Gibt der gedrehten Linie eine Layoutbox in ihrer sichtbaren Hoehe. */ .gg-diagonal-cta .divider-wrap { position: relative; grid-column: 1; grid-row: 1; flex: 0 0 var(--gg-diagonal-line-box); width: var(--gg-diagonal-line-length); height: var(--gg-diagonal-line-box); margin-right: 0; overflow: visible; transform: rotate(-45deg); transform-origin: left bottom; } /* Stapelt mehrere CTA-Links rechts neben der Diagonale untereinander. */ .gg-diagonal-cta .nectar-cta { grid-column: 2; margin: 0; } /* Positioniert die originale Salient-Linie, ohne ihre Scale-Animation zu ueberschreiben. */ .gg-diagonal-cta .divider-small-border { position: absolute; bottom: 0; left: 0; width: var(--gg-diagonal-line-length) !important; height: 1px !important; margin: 0 !important; opacity: 1 !important; transform-origin: left center; } /* Center Line */ .gg-diagonal-line-center .divider-wrap { transform: rotate(-45deg); transform-origin: center bottom; } /* /\ / \/\ _____/___/__\______________________________________________________________ POST LOOP BUILDER ___________________________________________________________________________*/ #gg .nectar-post-grid-wrap:not([data-style=content_overlaid]) .nectar-post-grid .nectar-post-grid-item .content { padding: 5px 20% 25px 0; } #gg .nectar-post-grid-wrap:not([data-style=content_overlaid]) .nectar-post-grid .post-heading.nectar-inherit-h4 { letter-spacing: 0 !important; font-weight: 300 !important; text-transform: none !important; line-height: 1.5em !important; } #gg .nectar-post-grid-wrap:not([data-style=content_overlaid]) .nectar-post-grid .post-heading.nectar-inherit-h4:before { content: "\25CF"; color: var(--gold); margin-right: 10px; } /* /\ / \/\ _____/___/__\______________________________________________________________ Image Borderradius ___________________________________________________________________________*/ #gg .image-borderradius-10 img { border-radius: 10px !important; } /* /\ / \/\ _____/___/__\______________________________________________________________ SINGLE POST ___________________________________________________________________________*/ body.single .post .content-inner>h2, body.single .post .content-inner>h3, body.single .post .content-inner>h4, body.single .post .content-inner>h5, body.single .post .content-inner>h6 { margin: 1em 0 } .post-template-default.single .featured-media-under-header__cat-wrap { display: none; } div[data-style=parallax_next_only].blog_next_prev_buttons i { font-family: 'gravitasgeometricmedium'; font-weight: normal; font-style: normal; text-transform: uppercase; } div[data-style=parallax_next_only].blog_next_prev_buttons h3 { font-size: max(min(3.7vw, 80px), 44px); line-height: 1.2; font-family: 'gyroscope_sans'; font-weight: normal; font-style: normal; } /* /\ / \/\ _____/___/__\______________________________________________________________ POPUP MAKER ___________________________________________________________________________*/ #popmake-571 { max-width: 842px !important; width: calc(100% - 60px); } .pum-theme-483, .pum-theme-content-only { background-color: rgba(211,211,211, 0.8) !important; backdrop-filter: blur(2px) grayscale(0.3); } /* 5% Padding */ @media only screen and (min-width: 1425px) { #popmake-571 .col.padding-5-percent > .vc_column-inner { padding: calc(1245px* 0.05); } } @media only screen and (min-width: 1000px) { #popmake-571 .col.padding-5-percent > .vc_column-inner, .col.padding-5-percent > .n-sticky > .vc_column-inner { padding: calc((100vw - 180px)* 0.05); } } #popmake-571 .col.padding-5-percent > .vc_column-inner, .col.padding-5-percent > .n-sticky > .vc_column-inner { padding: calc(600px* 0.06); } /* Anrede Dropdown */ .select2-dropdown { z-index: 9999999999; } #popmake-571 .select2-container { height: 40px;} #popmake-571 h4 { color: var(--rot); } #popmake-571 .wpcf7-acceptance span { color: var(--schwarz); font-weight: 300; text-transform: none; } #popmake-571 .material.woocommerce-page[data-form-style=default] input#coupon_code, #popmake-571 input[type=date], #popmake-571 input[type=email], #popmake-571 input[type=number], #popmake-571 input[type=password], #popmake-571 input[type=search], #popmake-571 input[type=tel], #popmake-571 input[type=text], #popmake-571 input[type=url], #popmake-571 select, #popmake-571 textarea { background-color: rgba(0,0,0,0.02); border-radius: 0; border: 1px solid var(--schwarz); } #popmake-571 .select2-container .select2-choice, #popmake-571 .select2-container--default .select2-selection--single { background-color: rgba(0,0,0,0.02); border-color: #000; padding-top: 5px; padding-bottom: 5px; border-radius: 0; } @media only screen and (max-width: 999px) { .pum-theme-483 .pum-content + .pum-close, .pum-theme-content-only .pum-content + .pum-close { color: var(--weiss)fff !important; } } /* /\ / \/\ _____/___/__\______________________________________________________________ FOOTER ___________________________________________________________________________*/ #maison-footer .nectar-responsive-text { margin-bottom: 0; } #maison-footer p { font-size: 14px; line-height: 2em; } #maison-footer a, #maison-footerbottom a { text-decoration: none; } #maison-footer a:hover, #maison-footerbottom a:hover { opacity: 0.8; } /* Vereinheitlicht die Schriftgroesse im unteren Footerbereich. */ #maison-footerbottom, #maison-footerbottom p, #maison-footerbottom a { font-size: 12px; } /* Haelt Copyright, Footerbottom-Menue und Gipfelgold-Logo auf Desktop in einer Zeile. */ #maison-footerbottom > .row_col_wrap_12 { align-items: center; } /* Entfernt vertikale Standardabstaende, damit die drei Footerbottom-Elemente auf einer Linie sitzen. */ #maison-footerbottom .wpb_text_column, #maison-footerbottom .vc_wp_custommenu, #maison-footerbottom .img-with-aniamtion-wrap { margin-bottom: 0; } #maison-footerbottom p { margin: 0; padding-bottom: 0; line-height: 1.2; } /* Reiht das Footerbottom-Menue horizontal und ohne Listenpunkte aneinander. */ #menu-footer-bottom-menu { display: flex; flex-wrap: wrap; gap: 0.6em 1.4em; justify-content: flex-start; margin: 0; padding: 0; list-style: none; } /* Neutralisiert Theme-Abstaende und Listenpunkte im Footerbottom-Menue. */ #menu-footer-bottom-menu > li { margin: 0; padding: 0; list-style: none; } /* Gibt den Footerbottom-Links die gleiche dezente Unterlinienanimation wie normalen Textlinks. */ #menu-footer-bottom-menu > li > a { display: inline-block; position: relative; background-image: none; color: inherit; line-height: 1.2; text-decoration: none; } /* Legt die Hover-Linie knapp unter die Schrift, unabhaengig von der Link-Zeilenhoehe. */ #menu-footer-bottom-menu > li > a::after { content: ""; position: absolute; right: 0; bottom: -0.18em; left: 0; height: 0.5px; background: color-mix(in srgb, currentColor 75%, transparent); opacity: 0; transform: translateY(2px); transition: opacity 260ms cubic-bezier(.22, .61, .36, 1), transform 260ms cubic-bezier(.22, .61, .36, 1); } /* Blendet die 0.5px-Unterlinie beim Hover ruhig von unten ein. */ #menu-footer-bottom-menu > li > a:hover, #menu-footer-bottom-menu > li > a:focus-visible { color: inherit; opacity: 1; } #menu-footer-bottom-menu > li > a:hover::after, #menu-footer-bottom-menu > li > a:focus-visible::after { opacity: 1; transform: translateY(0); } /* Schaltet die Footerbottom-Menueanimation bei reduzierter Bewegung ab. */ @media (prefers-reduced-motion: reduce) { #menu-footer-bottom-menu > li > a::after { transition: none; } } /* Fotoer Menü */ /* Entfernt die Listenoptik des Footer-Menues, damit die Links wie CTA-Zeilen wirken. */ #menu-footer-menu { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; } /* Neutralisiert Theme-Abstaende und Listenpunkte an den einzelnen Footer-Menuepunkten. */ #menu-footer-menu > li { margin: 0; padding: 0; list-style: none; } /* Uebertraegt Farbe, Groesse, Versalien und Laufweite vom Hover-Expand-CTA auf das Footer-Menue. */ #menu-footer-menu > li > a { display: inline-block; color: var(--gold) !important; font-size: clamp(13px, 0.78vw, 15px); font-weight: 400; line-height: 1.6; letter-spacing: 0.22em; text-transform: uppercase; text-decoration: none; transition: letter-spacing 420ms cubic-bezier(.22, .61, .36, 1); } /* Erzeugt dieselbe ruhige Letter-Spacing-Hoverbewegung wie beim CTA-Button. */ #menu-footer-menu > li > a:hover, #menu-footer-menu > li > a:focus-visible { color: var(--gold) !important; letter-spacing: 0.28em; opacity: 1; } /* Schaltet die Footer-Menueanimation bei reduzierter Bewegung ab. */ @media (prefers-reduced-motion: reduce) { #menu-footer-menu > li > a { transition: none; } } /* FOMRULAR */ /* Stapelt die Footer-Newsletterfelder mit gleichmaessigem Abstand. */ #maison-footer .wpcf7 form .rpcf7-contact-form p { display: grid; gap: 10px; margin: 0; padding-bottom: 10px; } /* Entfernt den zusaetzlichen Abstand nach dem letzten Formularabschnitt. */ #maison-footer .wpcf7 form .rpcf7-contact-form p:last-of-type { padding-bottom: 0 !important; } /* Stellt Button und Spinner im Footer-Formular nebeneinander. */ #maison-footer .wpcf7 form .rpcf7-contact-form p:has(input[type="submit"]) { display: inline-flex; align-items: center; gap: 10px; } /* Gibt nur den Eingabefeldern im Footer-Formular weichere Ecken. */ #maison-footer .wpcf7 form .rpcf7-contact-form input:not([type="submit"]):not([type="hidden"]) { position: relative; z-index: 2; border-radius: 10px; padding: 8px 10px; } /* Hebt den CF7-Feldwrapper samt Input ueber die darunterliegende Fehlermeldung. */ #maison-footer .wpcf7 form .rpcf7-contact-form .wpcf7-form-control-wrap { position: relative; z-index: 2; } /* Gleicht den Sendenbutton optisch an die Eingabefelder an. */ #maison-footer .wpcf7 form .rpcf7-contact-form input[type="submit"] { justify-self: start; width: auto !important; margin-top: 10px; padding: 10px 10px !important; border-radius: 10px !important; letter-spacing: 0; text-transform: none !important; } /* Faerbt den Contact-Form-7-Spinner passend ein und haelt ihn rechts neben dem Button. */ #maison-footer .wpcf7 form .rpcf7-contact-form .wpcf7-spinner { flex: 0 0 24px; margin: 10px 0 0; background-color: var(--gold); opacity: 0.75; } #maison-footer .wpcf7 form .rpcf7-contact-form .wpcf7-not-valid-tip { position: relative; z-index: 1; margin: -10px 0 0; background-color: var(--gold); color: var(--weiss); box-shadow: none; padding: 20px 10px 8px; border-radius: 0 0 10px 10px; line-height: 1.25em; opacity: 0; transform: translateY(-6px); animation: gg-footer-form-message-in 360ms cubic-bezier(.22, .61, .36, 1) forwards; } #maison-footer .wpcf7 form.invalid .wpcf7-response-output, #maison-footer .wpcf7 form.unaccepted .wpcf7-response-output, #maison-footer .wpcf7 form.payment-required .wpcf7-response-output { border-color: var(--rot); background: var(--rot); border-radius: 10px; color: var(--weiss); line-height: 1.25em; padding: 1em 1.5em; margin: 10px 0 0; opacity: 0; transform: translateY(8px); animation: gg-footer-form-message-in 420ms cubic-bezier(.22, .61, .36, 1) forwards; } /* Laesst Footer-Formularmeldungen weich einfaden und leicht in Position gleiten. */ @keyframes gg-footer-form-message-in { to { opacity: 1; transform: translateY(0); } } /* Respektiert reduzierte Bewegung fuer Formularmeldungen. */ @media (prefers-reduced-motion: reduce) { #maison-footer .wpcf7 form .rpcf7-contact-form .wpcf7-not-valid-tip, #maison-footer .wpcf7 form.invalid .wpcf7-response-output, #maison-footer .wpcf7 form.unaccepted .wpcf7-response-output, #maison-footer .wpcf7 form.payment-required .wpcf7-response-output { animation: none; opacity: 1; transform: none; } } /* Gipfelgold */ #maison-footerbottom .footergipfelgold { width: 70px; height: auto; } @media only screen and (max-width: 690px) { #maison-footerbottom .footergipfelgold { display: block; margin: 0 auto; } } @media only screen and (min-width: 691px) { #maison-footerbottom .footergipfelgold { float: right; } } /*/////////////////////////////////////////////////////////////////////////////////// reCAPTCHA */ body:not(.page-id-6) .grecaptcha-badge { display: none !important; } .grecaptcha-badge { -webkit-filter: grayscale(100%); filter: grayscale(100%); bottom: 70px !important; } /* Formular */ .light .wpcf7-acceptance span { color: var(--weiss)fff !important; } .wpcf7-acceptance span { line-height: 1.25em } .wpcf7-acceptance .wpcf7-list-item { margin-left: 0; } @media only screen and (max-width: 768px) { .rpcf7-contact-form .rpcf7-column:last-child { padding-left:0; padding-right: 10px; padding-top: 30px } } /* /\ / \/\ _____/___/__\______________________________________________________________ COOKIEBOT ___________________________________________________________________________*/ .CookiebotWidget, #CookiebotWidget { display: none !important; } h2#CybotCookiebotDialogBodyContentTitle { font-size: clamp(20px,3vw,30px) !important; } #CybotCookiebotDialogPoweredbyImage, #CybotCookiebotDialogPoweredbyCybot { display: none !important; } #CybotCookiebotDialogNav .CybotCookiebotDialogNavItemLink.CybotCookiebotDialogActive { border-bottom-color: var(--cookiebot) !important; color: var(--cookiebot) !important; } #CybotCookiebotDialogFooter #CybotCookiebotDialogBodyButtonAccept, #CybotCookiebotDialogFooter #CybotCookiebotDialogBodyLevelButtonAccept, #CybotCookiebotDialogFooter #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowAll { background-color: var(--cookiebot) !important; border-color: var(--cookiebot) !important; } #CybotCookiebotDialogFooter #CybotCookiebotDialogBodyLevelButtonCustomize, #CybotCookiebotDialogFooter #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowallSelection { border-color: var(--cookiebot) !important; } #CybotCookiebotDialogFooter #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowallSelection, #CybotCookiebotDialogFooter #CybotCookiebotDialogBodyButtonDecline { background: transparent !important; color: var(--cookiebot) !important; } #CybotCookiebotDialogFooter .CybotCookiebotDialogBodyButton { border-color: var(--cookiebot) !important; } #CybotCookiebotDialog input:checked+.CybotCookiebotDialogBodyLevelButtonSlider { background-color: var(--cookiebot) !important; } #CybotCookiebotDialog #CybotCookiebotDialogBodyContentText a, #CybotCookiebotDialog #CybotCookiebotDialogBodyLevelButtonIABHeaderViewPartnersLink, #CybotCookiebotDialog #CybotCookiebotDialogDetailBulkConsentList dt a, #CybotCookiebotDialog #CybotCookiebotDialogDetailFooter a, #CybotCookiebotDialog .CybotCookiebotDialogBodyLevelButtonIABDescription a, #CybotCookiebotDialog .CybotCookiebotDialogDetailBodyContentCookieLink, #CybotCookiebotDialogDetailBodyContentTextAbout a { color: var(--cookiebot) !important; } #CybotCookiebotDialogNav .CybotCookiebotDialogNavItemLink:hover { color: var(--cookiebot) !important; } #CybotCookiebotDialog .CookieCard .CybotCookiebotDialogDetailBodyContentCookieContainerButton:hover, #CybotCookiebotDialog .CookieCard .CybotCookiebotDialogDetailBodyContentIABv2Tab:hover, #CybotCookiebotDialogDetailBodyContentCookieContainerTypes .CybotCookiebotDialogDetailBodyContentCookieProvider:not(.CybotCookiebotDialogDetailBodyContentCookieInfoCount):hover { color: var(--cookiebot) !important; } #CybotCookiebotDialog a:hover:after, #CybotCookiebotDialog a:hover:before, #CybotCookiebotDialog button:hover:after, #CybotCookiebotDialog button:hover:before { border-color: var(--cookiebot) !important; } #CybotCookiebotDialog ul li { list-style: inherit; } table.CookieDeclarationTable { background-color: transparent !important; } table.CookieDeclarationTable tr:nth-child(2n+1) { background-color: transparent !important; }