@charset "UTF-8"; /* Theme Name: Grenzwald Energieholz Theme URI: http://www.kundenurl.de/ Author: SIGN+DESIGN Werbeagentur Author URI: https://www.signunddesign.com/ Description: Wozu lange um den „heißen Brei" reden: Unser Ziel ist Ihr Erfolg! Denn nur erfolgreiche Kunden sind auf Dauer glückliche Kunden. Und um Sie glücklich zu machen, richten wir unsere Energie auf Ihren stimmigen Auftritt und die Entwicklung zielführender Kommunikationsmaßnahmen. Werbung darf bei uns Spaß machen und ist trotzdem niemals Selbstzweck. Was zählt ist Ihr Erfolg! Die Früchte unserer Bemühungen: treue, langjährige Kunden und zahlreiche Weiterempfehlungen – mit ein Grund dafür, dass viele unserer Kunden aus dem Bereich Immobilien stammen. Und hier liegt auch seit über 20 Jahren ein Schwerpunkt unserer Arbeit. Version: 2.1 */ /* ======================================== FONT FACES - Montserrat (lokal) ======================================== */ /* Montserrat - Fließtext */ @font-face { font-display: swap; font-family: 'Montserrat'; font-style: normal; font-weight: 300; src: url('assets/fonts/montserrat-v31-latin-300.woff2') format('woff2'); } @font-face { font-display: swap; font-family: 'Montserrat'; font-style: normal; font-weight: 400; src: url('assets/fonts/montserrat-v31-latin-regular.woff2') format('woff2'); } @font-face { font-display: swap; font-family: 'Montserrat'; font-style: normal; font-weight: 500; src: url('assets/fonts/montserrat-v31-latin-500.woff2') format('woff2'); } @font-face { font-display: swap; font-family: 'Montserrat'; font-style: normal; font-weight: 600; src: url('assets/fonts/montserrat-v31-latin-600.woff2') format('woff2'); } @font-face { font-display: swap; font-family: 'Montserrat'; font-style: normal; font-weight: 700; src: url('assets/fonts/montserrat-v31-latin-700.woff2') format('woff2'); } /* * Puffin Display (Adobe Fonts/Typekit) - für Headlines * Verfügbare Gewichte: 300, 400, 500, 600, 700, 800, 900 * Wird über Adobe Fonts im eingebunden */ /* ======================================== GLOBAL RESET ======================================== */ body, html, h1, h2, h3, h4, h5, h6, p, ul, ol, li {padding: 0;margin: 0;} body, html {overflow: unset;width: 100%;-webkit-font-smoothing: antialiased;-webkit-overflow-scrolling: touch;background:var(--bg-gray);} article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;} /* ======================================== CSS VARIABLES ======================================== */ :root { /* Typography */ --font-headline: "puffin-display", sans-serif; --font-body: "Montserrat", sans-serif; --font-size: 16px; --line-height: calc(var(--font-size) * 1.8); /* Layout */ --wrp-width: 1300px; --header-height: 118px; --submenu-offset: 84px; /* Colors */ --primary-color: #D97706; --secondary-color: #2E5939; --text-color: #515151; --bg-white: #fff; --bg-light-gray: #f5f5f5; --bg-lighter-gray: #f8f8f8; --bg-gray: #F5EFE4; --border-gray: #dedede; --icon-gray: #a4a4a4; --text-dark: #555; /* Effects */ --transition: .2s ease; --box-shadow: 0px 5px 13px 0px rgba(0, 0, 0, 0.3); --border-radius: 20px; } /* ======================================== GLOBAL STYLES ======================================== */ html {scroll-behavior: smooth;scroll-padding-top: 200px;} body {font-size: var(--font-size); font-family: var(--font-body), serif;line-height: var(--line-height);color: var(--text-color);margin-top: 50px;} body.nav-open {overflow: hidden;} img {-ms-interpolation-mode: bicubic;vertical-align: bottom; height: 100%; width: 100%;} svg {width: 100%;height: 100%;} hr {border: none;height: 1px;background: #ddd;margin: 0;} .wrp {max-width: var(--wrp-width);width: 90%;margin: 0 auto;position: relative;box-sizing: border-box;} @media (max-width: 1500px) { body {margin-top: 15px;} } /* ======================================== UTILITY CLASSES ======================================== */ /* Margins */ .mb {margin-bottom: 100px;} .mb50 {margin-bottom: 50px;} /* Text Align */ .align-center {text-align: center;} /* ======================================== TYPOGRAPHY ======================================== */ h1, h2, h3, h4, h5, h6 {margin: 0;font-family: var(--font-headline);font-weight: 700;} h1 {font-size: 50px; margin-bottom: 25px;} h2 {font-size: 30px; margin-bottom: 25px;} h3 {font-size: 20px; margin-bottom: 25px;} a {text-decoration: none;outline: none;color: var(--text-color);transition: var(--transition);} a:hover {color: var(--primary-color);transition: var(--transition);} .btn {padding: 8px 20px;background: var(--primary-color);display: inline-block; margin-top: 25px; border-radius: 200px;font-size: 16px; font-weight: 600; color: #ffffff;} .btn:hover{transform: translateY(-2px); color: white;} p {font-family: var(--font-body);font-weight: 500;} p:last-child {margin-bottom: 0;} address {font-style: normal;color: var(--text-color);} address a {display: block;} ol, ul {margin-bottom: 0;} li {margin-left: unset;list-style-type: none;} @media (max-width: 700px) { h1{font-size: 30px;margin-bottom: 15px; line-height: 38px;} h2{font-size: 20px;margin-bottom: 15px;} p{font-size: 16px!important;} } /* ======================================== HEADER ======================================== */ header {position: sticky;top: 0;max-width: var(--wrp-width);width:85%;z-index: 10;padding: 15px 0;box-sizing: border-box;background: var(--bg-gray);border-radius: 0 0 20px 20px;margin-top: 2.5%;transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.3s ease; margin: 0 auto;} header .header-grid {display: grid;grid-template-columns: 200px 1fr auto;justify-items: start;align-items: center;justify-content: space-between;} header .header-grid .logo {width: 100%;transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);} header .header-grid .logo a {display: flex;align-items: center;} header .header-grid .mainnav-toggle {display: none;justify-self: end;} header .header-icons {justify-self: end;display: flex;align-items: center;gap: 4px;} header:before {content: url("assets/icons/corner.svg");left: -20px;height: 20px; width: 20px; top:0;position:absolute; transform: rotate(90deg);transition: opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);} header:after {content: url("assets/icons/corner.svg");right: -20px;height: 20px; width: 20px; top:0;position:absolute; transform: rotate(360deg);transition: opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);} html.scrolled header {box-shadow: var(--box-shadow); transition: var(--transition);} @media (max-width: 1500px) { header {width: 90%;} } @media (max-width: 1024px) { header .header-grid {grid-template-columns: 115px auto auto;} header .header-icons {order: 2;justify-self: end;margin-right: 60px;} } /* ======================================== NAVIGATION - DESKTOP ======================================== */ #mainnav ul.mainnav.smart {display: none;} #mainnav {display: block;transform: translate(0); justify-self: end;} #mainnav ul.mainnav.desktop li {list-style-type: none;font-size: 20px;margin-left: 40px;} #mainnav ul.mainnav.desktop li:first-child {margin-left: 0;} #mainnav ul.mainnav.desktop li a {display: block;color: var(--text-color);transition: color var(--transition), padding 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);padding: 30px 0; font-weight: 500;} #mainnav ul.mainnav.desktop li a:hover, #mainnav ul > li.current-menu-item > a {color: var(--primary-color);transition: var(--transition);} /* ======================================== NAVIGATION - DESKTOP SUBMENU ======================================== */ @media (min-width: 1025px) { #mainnav ul.mainnav.desktop {display: flex;align-items: center;margin: 0 30px 0 0;} /* Submenu Level 1 */ #mainnav ul.mainnav li.menu-item-has-children {position: relative;} #mainnav ul.mainnav li.menu-item-has-children ul.sub-menu {position: absolute;top: var(--submenu-offset);left: 0;display: block;height: auto;max-height: 0;overflow: hidden;} #mainnav ul.mainnav li.menu-item-has-children ul.sub-menu li {width: 200px;height: 100%;padding: 8px 0 8px 7px;transition: 0.8s ease;background: var(--bg-light-gray);margin: 0;} #mainnav ul.mainnav li.menu-item-has-children:hover > ul.sub-menu {max-height: 674px;padding: 0;overflow: visible;margin-top: -6px;} #mainnav ul.mainnav li.menu-item-has-children ul.sub-menu li:hover {background: var(--primary-color);} #mainnav ul.mainnav li.menu-item-has-children ul.sub-menu li:hover a {color: var(--bg-white);} #mainnav ul.mainnav li.menu-item-has-children ul.sub-menu li a {padding: 3px;} #mainnav ul.mainnav li.menu-item-has-children ul.sub-menu li:last-child {margin-bottom: 0;} /* Submenu Level 2 */ #mainnav ul.mainnav li.menu-item-has-children ul.sub-menu li.menu-item-has-children ul.sub-menu {position: absolute;left: 100%;top: 6px;overflow: hidden;} #mainnav ul.mainnav li.menu-item-has-children ul.sub-menu li.menu-item-has-children:hover ul.sub-menu {overflow: visible;} #mainnav ul.mainnav li.menu-item-has-children ul.sub-menu li.menu-item-has-children ul.sub-menu li {background: var(--bg-light-gray);} #mainnav ul.mainnav li.menu-item-has-children ul.sub-menu li.menu-item-has-children ul.sub-menu li a {color: var(--text-color);} #mainnav ul.mainnav li.menu-item-has-children ul.sub-menu li.menu-item-has-children ul.sub-menu li:hover a {color: var(--primary-color);} /* Hide mobile elements on desktop */ #mainnav .head, #mainnav address.contact, #mainnav ul.mainnav li.back {display: none;} } /* ======================================== NAVIGATION - MOBILE OFFCANVAS ======================================== */ @media (max-width: 1024px) { .mainnav.desktop {display: none;} /* Offcanvas Panel */ #mainnav ul.mainnav.smart {display: block;padding: 0;margin: 0;} #mainnav { position: fixed; top: 0; right: -30px; bottom: 0; background: linear-gradient(180deg, var(--bg-white) 0%, #f8f9fa 100%); width: 100%; max-width: 340px; transform: translateX(105%); transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1); box-shadow: -10px 0 50px rgba(0, 0, 0, 0.2); z-index: 1000; display: flex; flex-direction: column; overflow: hidden; } #mainnav.active { transform: translateX(0); right: 0; } /* Offcanvas Header */ #mainnav .head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; background: var(--secondary-color) ; flex-shrink: 0; position: relative; overflow: hidden; } #mainnav .head > div:first-child { font-size: 13px; font-weight: 500; color: rgba(255, 255, 255, 0.7); text-transform: uppercase; letter-spacing: 1.5px; } #mainnav .head .buttons { display: flex; gap: 6px; align-items: center; } #mainnav .head .buttons a { width: 38px; height: 38px; border-radius: 10px; background: rgba(255, 255, 255, 0.12); backdrop-filter: blur(10px); display: flex; align-items: center; justify-content: center; transition: all 0.25s ease; border: 1px solid rgba(255, 255, 255, 0.1); } #mainnav .head .buttons a:hover { background: rgba(255, 255, 255, 0.25); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } #mainnav .head .buttons a img { width: 16px; height: 16px; filter: brightness(0) invert(1); opacity: 0.9; } #mainnav .head .buttons a svg { width: 16px; height: 16px; stroke: white; opacity: 0.9; } /* Schließen-Button */ #mainnav .head .buttons .nav-close-btn { width: 38px; height: 38px; min-width: 38px; border-radius: 10px; background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); display: flex !important; align-items: center; justify-content: center; cursor: pointer; transition: all 0.25s ease; border: 1px solid rgba(255, 255, 255, 0.15); position: relative; flex-shrink: 0; } #mainnav .head .buttons .nav-close-btn:hover { background: rgba(255, 255, 255, 0.35); transform: rotate(90deg); } #mainnav .head .buttons .nav-close-btn::before, #mainnav .head .buttons .nav-close-btn::after { content: ''; position: absolute; width: 14px; height: 2px; background: white; border-radius: 2px; } #mainnav .head .buttons .nav-close-btn::before { transform: rotate(45deg); } #mainnav .head .buttons .nav-close-btn::after { transform: rotate(-45deg); } /* Alten Toggle im Header verstecken */ #mainnav .head .mainnav-toggle { display: none !important; } /* Scrollbarer Menü-Bereich */ #mainnav ul.mainnav.smart { flex: 1; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; } /* Custom Scrollbar */ #mainnav ul.mainnav.smart::-webkit-scrollbar { width: 4px; } #mainnav ul.mainnav.smart::-webkit-scrollbar-track { background: transparent; } #mainnav ul.mainnav.smart::-webkit-scrollbar-thumb { background: var(--border-gray); border-radius: 2px; } /* Mobile Menu Items */ #mainnav ul.mainnav li { padding: 0; margin: 0; background: transparent; border-bottom: none; list-style-type: none; position: relative; } #mainnav ul.mainnav > li { margin: 4px 12px; } #mainnav ul.mainnav li a { font-size: 15px; font-weight: 500; padding: 14px 50px 14px 20px; display: block; color: var(--text-color); transition: all 0.3s ease; border-radius: 12px; position: relative; } #mainnav ul.mainnav li a::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 0; background: var(--primary-color); border-radius: 0 3px 3px 0; transition: height 0.3s ease; } #mainnav ul.mainnav li a:hover { background: rgba(0, 0, 0, 0.04); padding-left: 24px; } #mainnav ul.mainnav li a:hover::before { height: 60%; } #mainnav ul.mainnav li.current-menu-item > a { background: linear-gradient(135deg, rgba(var(--primary-color-rgb, 200, 80, 40), 0.08), rgba(var(--secondary-color-rgb, 60, 60, 60), 0.05)); color: var(--primary-color); } #mainnav ul.mainnav li.current-menu-item > a::before { height: 70%; } /* Submenu Toggle Button */ #mainnav .opensubnav { cursor: pointer; width: 44px; height: 44px; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: transparent; display: flex; align-items: center; justify-content: center; z-index: 10; border-radius: 10px; transition: all 0.3s ease; } #mainnav .opensubnav:hover { background: rgba(0, 0, 0, 0.06); } #mainnav .opensubnav.active { background: var(--primary-color); transform: translateY(-50%) scale(0.95); } #mainnav .opensubnav:after { content: ''; width: 8px; height: 8px; border: solid var(--secondary-color); border-width: 0 2px 2px 0; transform: rotate(-45deg); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); margin-left: -2px; } #mainnav .opensubnav.active:after { transform: rotate(45deg); border-color: white; margin-left: 0; margin-top: -2px; } /* Submenu Level 1 */ #mainnav li.menu-item-has-children ul.sub-menu { display: none; margin: 0; padding: 4px 0 4px 12px; background: transparent; position: relative; } #mainnav li.menu-item-has-children ul.sub-menu::before { content: ''; position: absolute; left: 28px; top: 8px; bottom: 8px; width: 1px; background: linear-gradient(180deg, var(--border-gray), transparent); } #mainnav li.menu-item-has-children.active > ul.sub-menu { display: block; animation: slideDown 0.35s cubic-bezier(0.4, 0, 0.2, 1); } #mainnav li.menu-item-has-children.active > ul.sub-menu li { margin: 2px 0; } #mainnav li.menu-item-has-children.active > ul.sub-menu li a { padding: 10px 44px 10px 24px; font-size: 14px; font-weight: 400; color: #666; border-radius: 8px; } #mainnav li.menu-item-has-children.active > ul.sub-menu li a:hover { background: rgba(0, 0, 0, 0.04); color: var(--text-color); } #mainnav li.menu-item-has-children.active > ul.sub-menu li a::before { display: none; } /* Submenu Level 2 */ #mainnav li.menu-item-has-children ul.sub-menu li.menu-item-has-children .opensubnav { width: 36px; height: 36px; right: 4px; } #mainnav li.menu-item-has-children.active ul.sub-menu li.menu-item-has-children ul.sub-menu { display: none; } #mainnav li.menu-item-has-children.active ul.sub-menu li.menu-item-has-children.active ul.sub-menu { display: block; padding-left: 16px; } #mainnav li.menu-item-has-children.active ul.sub-menu li.menu-item-has-children.active ul.sub-menu li a { padding-left: 20px; font-size: 13px; } /* Slide Down Animation */ @keyframes slideDown { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } /* Kontakt-Bereich unten */ #mainnav address.contact { padding: 20px; margin: 12px; background: var(--secondary-color); border-radius: 16px; font-size: 13px; line-height: 1.6; flex-shrink: 0; color: rgba(255, 255, 255, 0.85); position: relative; overflow: hidden; } #mainnav address.contact strong { font-size: 14px; color: white; display: block; margin-bottom: 6px; } #mainnav address.contact a { color: white; font-weight: 500; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.4); text-underline-offset: 2px; transition: text-decoration-color 0.2s ease; } #mainnav address.contact a:hover { text-decoration-color: white; } /* Hamburger Menu Toggle (außerhalb des Menüs) */ .mainnav-toggle {border-radius: 12px;display: flex;align-items: center;justify-content: center;position: relative;z-index: 10;width: 50px;height: 50px;background: var(--primary-color);box-shadow: none;transition: background 0.2s ease, transform 0.2s ease;cursor: pointer;} .mainnav-toggle:hover {background: var(--secondary-color);transform: scale(1.05);} .mainnav-toggle.off {border-radius: 50%;position: absolute;z-index: 10;top: 50%;right: 0;transform: translateY(-50%);box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);} .mainnav-toggle.off:hover {transform: translateY(-50%) scale(1.05);} .mainnav-toggle.off.active {display: none;} .mainnav-toggle .btn-mainnav-toggle {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 24px;cursor: pointer;} .mainnav-toggle .btn-mainnav-toggle span {display: block;width: 100%;border-radius: 2px;height: 2px;background: var(--bg-white);transition: all 0.3s ease;position: relative;box-shadow: none;} .mainnav-toggle .btn-mainnav-toggle span + span {margin-top: 6px;} .mainnav-toggle .btn-mainnav-toggle.active span + span {margin-top: 12px;} .mainnav-toggle .btn-mainnav-toggle.active span:nth-child(1) {animation: ease 0.5s top forwards;} .mainnav-toggle .btn-mainnav-toggle.not-active span:nth-child(1) {animation: ease 0.5s top-2 forwards;} .mainnav-toggle .btn-mainnav-toggle.active span:nth-child(2) {animation: ease 0.5s scaled forwards;} .mainnav-toggle .btn-mainnav-toggle.not-active span:nth-child(2) {animation: ease 0.5s scaled-2 forwards;} .mainnav-toggle .btn-mainnav-toggle.active span:nth-child(3) {animation: ease 0.5s bottom forwards;} .mainnav-toggle .btn-mainnav-toggle.not-active span:nth-child(3) {animation: ease 0.5s bottom-2 forwards;} /* Hamburger Animations */ @keyframes top {0% {top: 0;transform: rotate(0);} 50% {top: 12px;transform: rotate(0);} 100% {top: 12px;transform: rotate(45deg);}} @keyframes top-2 {0% {top: 12px;transform: rotate(45deg);} 50% {top: 12px;transform: rotate(0deg);} 100% {top: 0;transform: rotate(0deg);}} @keyframes bottom {0% {bottom: 0;transform: rotate(0);} 50% {bottom: 12px;transform: rotate(0);} 100% {bottom: 12px;transform: rotate(135deg);}} @keyframes bottom-2 {0% {bottom: 12px;transform: rotate(135deg);} 50% {bottom: 12px;transform: rotate(0);} 100% {bottom: 0;transform: rotate(0);}} @keyframes scaled {50% {transform: scale(0);} 100% {transform: scale(0);}} @keyframes scaled-2 {0% {transform: scale(0);} 50% {transform: scale(0);} 100% {transform: scale(1);}} /* Overlay */ #mainnav-overlay {position: fixed;top: 0;right: 0;left: 0;bottom: 0;background: rgba(0, 0, 0, 0.5);backdrop-filter: blur(4px);-webkit-backdrop-filter: blur(4px);opacity: 0;z-index: 999;transition: opacity 0.3s ease;visibility: hidden;} #mainnav-overlay.active {opacity: 1;visibility: visible;} } /* Kleinere Smartphones */ @media (max-width: 400px) { #mainnav {max-width: 100%;} #mainnav .head {padding: 16px;} #mainnav ul.mainnav li a {padding: 14px 56px 14px 20px;font-size: 15px;} #mainnav .opensubnav {width: 50px;} #mainnav address.contact {padding: 20px;font-size: 13px;} } /* ======================================== STAGE / HERO SECTIONS ======================================== */ .stage {aspect-ratio: 2.5/1;width: 95%;min-height: 400px;position: relative; margin-left: auto; margin-right: auto; margin-top: -118px; color: #ffffff;will-change: transform;} .stage img {border-radius: var(--border-radius);} .stage h2 {color: var(--primary-color);} .stage .overlay {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0,0,0,0.5);z-index: 1;border-radius: var(--border-radius);} .stage img {width: 100%;height: 100%;object-fit: cover;object-position: center;} .stage video {width: 100%;height: 100%;object-fit: cover;object-position: center;border-radius: var(--border-radius);} /* Fallback für Browser ohne aspect-ratio Support */ @supports not (aspect-ratio: 3/1) { .stage {padding-top: 33.33%;} } .stage .wrp {position: absolute;top: 60%;left: 50%;transform: translate(-50%, -50%);z-index: 2;} .stage.subpage {aspect-ratio: 3/.7;width: 95%;position: relative;} @supports not (aspect-ratio: 3/.7) { .stage.subpage {padding-top: 23.33%;} } @media (max-width: 1500px) { .stage {width: 100%;} .stage.subpage {width: 100%;} .stage img {border-radius: unset;} .stage video {border-radius: unset;} .stage .overlay {border-radius: unset;} } @media (max-width: 1024px) { .stage {margin-top: -75px;} } @media (max-width: 700px) { .stage {min-height: 600px;} .stage.subpage {min-height: 400px;} } /* ======================================== PAGE LAYOUT ======================================== */ main.withsidebar .page-build {display: grid;grid-template-columns: 70% 25%;align-items: flex-start;justify-content: space-between;max-width: var(--wrp-width);width: 90%;margin: 0 auto;} main.withsidebar .content .wrp {width: 100%;} /* ======================================== CONTENT BLOCKS ======================================== */ /* Text Block */ .text.multiple-col .wrp {-webkit-columns: 2 350px;-moz-columns: 2 350px;columns: 2 350px;-webkit-column-gap: 4em;-moz-column-gap: 4em;column-gap: 4em;} .text p {margin-bottom: 25px;} .text p:last-child {margin-bottom: 0;} .text.bg .wrp {background: var(--secondary-color);padding: 60px;color: white;border-radius: 20px;} @media (max-width: 600px) { .text.bg .wrp {padding: 30px;} } /* Text + Image Block */ .textbild .wrp {display: grid;align-items: center;justify-content: space-between;box-sizing: border-box;background: var(--bg-white);} .textbild .text {border-radius: 5px 0 0 5px;box-sizing: border-box;} .textbild .bild {width: 100%;height: 100%;} .textbild .bild img {width: 100%;height: 100%;object-fit: cover;} /* Teasercards */ .teasercards .cards.no-carousel {display: grid;grid-column-gap: 20px;grid-row-gap: 20px;margin: 0;} .teasercards .cards.no-carousel li {list-style-type: none;margin: 0;} .teasercards .splide ul.cards {display: flex;grid-column-gap: unset;} .teasercard-item {position: relative;display: block;height: clamp(280px, 40vw, 420px);border-radius: var(--border-radius);overflow: hidden;} .teasercard-item .img-wrp {position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 1;} .teasercard-item .img-wrp img {width: 100%;height: 100%;object-fit: cover;transition: transform 0.4s ease;} .teasercard-item:hover .img-wrp img {transform: scale(1.05);} .teasercard-item .teasercard-overlay {position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 2;background: linear-gradient(to top, rgb(36, 70, 45) 0%, transparent 60%);transition: background 0.3s ease;} .teasercard-item .teasercard-content {position: absolute;bottom: 0;left: 0;right: 0;z-index: 3;padding: 30px;color: var(--bg-white);display: flex;flex-direction: column;align-items: flex-start; width: 80%;} .teasercard-item .teasercard-content h3 {font-size: clamp(18px, 2vw, 24px);margin-bottom: 10px;color: var(--bg-white);line-height: 1.3;} .teasercard-item .teasercard-content p {font-size: 20px;line-height: 1.5;margin-bottom: 0;color: rgba(255,255,255,0.9);display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;} .teasercard-item .teasercard-arrow {position: absolute;bottom: 30px;right: 30px;width: 20px;height: 20px;z-index: 3;transition: transform 0.3s ease;} .teasercard-item .teasercard-arrow img {width: 100%;height: 100%;} .teasercard-item:hover .teasercard-arrow {transform: translate(3px, -3px);} @media (max-width: 800px) { .teasercards .cards.no-carousel {grid-template-columns: auto!important;} } /* Image Block */ .image img {display: block;width: 100%;height: auto;} .bildtrenner {width: 90%;aspect-ratio: 3/1;overflow: hidden;position: relative; margin-left: auto; margin-right: auto;height: 400px;border-radius: 30px;} .bildtrenner .stage-content {color: white;} .bildtrenner .stage-content p {font-size: 20px;} @supports not (aspect-ratio: 3/1) { .bildtrenner {padding-top: 33.33%;} } /* Bildtrenner Parallax - Bild ist größer für Bewegungsspielraum */ .bildtrenner > img, .bildtrenner > picture {position: absolute;top: -30%;left: 0;width: 100%;height: 160%;object-fit: cover;object-position: center;will-change: transform;} .bildtrenner-overlay {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0,0,0,0.3);z-index: 1;} .bildtrenner .wrp {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);z-index: 2;} /* ======================================== GALLERY COMPONENT ======================================== */ /* Gemeinsame Overlay-Styles für Galerie und Video */ .gallery-overlay {width: 100%;position: absolute;height: 100%;top: 0;left: 0;right: 0;bottom: 0;background: var(--secondary-color);opacity: 0;transition: var(--transition);} .gallery-overlay .icon-wrp {position: absolute;top: 50%;left: 50%;width: 45px;height: 45px;transform: translate(-50%, -50%);} .gallery-overlay .icon-wrp svg {width: 100%;height: 100%;transform: scale(0);transition: var(--transition);} .gallery-overlay .icon-wrp svg path {fill: var(--bg-white);} /* Image Gallery */ .gallery .glightbox-gallery:not(.masonry) {display: grid;gap: 50px;margin-bottom: 0;} .gallery .glightbox-gallery li {list-style-type: none;margin: 0 0 25px 0;border-radius: 5px;overflow: hidden;aspect-ratio: 1;} @supports not (aspect-ratio: 1) { .gallery .glightbox-gallery li {padding-top: 100%;position: relative;} .gallery .glightbox-gallery li a {position: absolute;top: 0;left: 0;width: 100%;} } .gallery .glightbox-gallery:not(.masonry) li {margin: 0;} .gallery .glightbox-gallery li a {position: relative;display: block;overflow: hidden;height: 100%;} .gallery .glightbox-gallery li a .overlay {width: 100%;position: absolute;height: 100%;top: 0;left: 0;right: 0;bottom: 0;background: var(--secondary-color);opacity: 0;transition: var(--transition);} .gallery .glightbox-gallery li a:hover .overlay {opacity: 0.6;transition: var(--transition);} .gallery .glightbox-gallery li a .overlay .icon-wrp {position: absolute;top: 50%;left: 50%;width: 45px;height: 45px;transform: translate(-50%, -50%);} .gallery .glightbox-gallery li a .overlay .icon-wrp svg {width: 100%;height: 100%;transform: scale(0);transition: var(--transition);} .gallery .glightbox-gallery li a .overlay .icon-wrp svg path {fill: var(--bg-white);} .gallery .glightbox-gallery li a:hover .overlay .icon-wrp svg {transform: scale(1);transition: var(--transition);} .gallery .glightbox-gallery li img {width: 100%;height: 100%;object-fit: cover;} .gallery .glightbox-gallery.masonry {gap: 25px;columns: 4;margin: 0 auto;} /* Video Gallery */ .gallery .video-gallery-grid {display: grid;grid-column-gap: 50px;grid-row-gap: 50px;} .gallery .video-gallery-grid .video-gallery-item {height: 220px;width: 100%;display: block;position: relative;overflow: hidden;} .gallery .video-gallery-grid .video-gallery-item .overlay {width: 100%;position: absolute;height: 100%;top: 0;left: 0;right: 0;bottom: 0;background: var(--secondary-color);opacity: 0;transition: var(--transition);z-index: 4;} .gallery .video-gallery-grid .video-gallery-item:hover .overlay {opacity: 0.6;transition: var(--transition);} .gallery .video-gallery-grid .video-gallery-item .overlay .icon-wrp {position: absolute;top: 50%;left: 50%;width: 45px;height: 45px;transform: translate(-50%, -50%);} .gallery .video-gallery-grid .video-gallery-item .overlay .icon-wrp svg {width: 100%;height: 100%;transform: scale(0);transition: var(--transition);} .gallery .video-gallery-grid .video-gallery-item .overlay .icon-wrp svg path {fill: var(--bg-white);} .gallery .video-gallery-grid .video-gallery-item:hover .overlay .icon-wrp svg {transform: scale(1);transition: var(--transition);} .gallery .video-gallery-grid .video-gallery-item img {height: 100%;width: 100%;object-fit: cover;object-position: center;transform: scale(1.2);} /* ======================================== EMBED / VIDEO ======================================== */ .embed .respo-video {position: relative;height: 0;overflow: hidden; padding-bottom: 56.25%;} .embed .respo-video iframe {position: absolute;top: 0;left: 0;width: 100%;height: 100%;} .embed .respo-video ._brlbs-cb-youtube {margin-bottom: -56.25%;} /* ======================================== ACCORDION ======================================== */ .accordion .item-accordion-head {cursor: pointer;position: relative;background: #f2f2f2;margin-bottom: 10px;padding: 10px 25px 10px 10px;border: 1px solid #f2f2f2;} .accordion .active .item-accordion-head {background-color: var(--bg-lighter-gray);} .accordion .item-accordion-btn {width: 26px;height: 26px;float: right;margin: 0;cursor: pointer;position: absolute;right: 5px;top: 50%;transform: translateY(-50%);} .accordion .item-accordion-btn:before {content: '+';color: var(--text-dark);position: absolute;width: 26px;height: 26px;text-align: center;line-height: 22px;font-size: 24px;} .accordion .item-accordion {margin-bottom: 5px;} .accordion .item-accordion.hidden .item-accordion-btn:before {content: '+';line-height: 26px;} .accordion .item-accordion.active .item-accordion-btn:before {content: '-';line-height: 22px;} .accordion .item-accordion.hidden.active .item-accordion-btn:before {content: '-';line-height: 22px;} .accordion .item-accordion.hidden .item-accordion-content {display: none;padding: 20px 20px;background: var(--bg-lighter-gray);margin-bottom: 10px;} .accordion .item-accordion.hidden .item-accordion-content:after {display: block;width: 0;height: 0;border-right: 100px solid #037CA9;border-top: 50px solid transparent;border-bottom: 50px solid transparent;} /* ======================================== LIEFERINFO ======================================== */ /* * Grid: lieferinfo-left (col 1, beide Rows) | lieferregionen-header (col 2, row 1) * | lieferregionen-liste (col 2, row 2) * lieferinfo-left stretcht auf Gesamthöhe der rechten Seite. */ .lieferinfo .wrp { display: grid; grid-template-columns: 4fr 3fr; grid-template-rows: auto 1fr; gap: 1.25rem; align-items: stretch; } /* Linke Spalte: Bild füllt alles, Störer liegt obendrauf */ .lieferinfo .wrp .lieferinfo-left { grid-column: 1; grid-row: 1 / 3; position: relative; border-radius: 20px; } .lieferinfo .wrp .lieferinfo-left img { width: 100%; height: 100%; object-fit: cover; border-radius: 20px; display: block; } /* Störer – kreisförmiges Badge über dem Bild */ .lieferinfo-stoerer { position: absolute; top: -1.75rem; left: -1.75rem; aspect-ratio: 1; background: var(--primary-color); border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.35rem; color: #fff; text-align: center; padding: 1rem; box-sizing: border-box; transform: rotate(-8deg); filter: drop-shadow(0 4px 12px rgba(0,0,0,0.35)); z-index: 2; } .lieferinfo-stoerer span { width: 1.75rem; height: 1.75rem; flex-shrink: 0; } .lieferinfo-stoerer span img { filter: brightness(0) invert(1); } .lieferinfo-stoerer p { font-size: clamp(0.72rem, 1vw, 0.82rem); font-weight: 700; line-height: 1.25; margin: 0; font-family: var(--font-headline); } /* Lieferregionen-Header – row 1, col 2 */ .lieferinfo .wrp .lieferregionen-header { grid-column: 2; grid-row: 1; background: var(--secondary-color); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #fff; padding: 0.625rem; } .lieferinfo .wrp .lieferregionen-header h3 { margin: 0; } /* Lieferregionen-Liste – row 2, col 2 */ .lieferinfo .wrp .lieferregionen-liste { grid-column: 2; grid-row: 2; display: flex; flex-direction: column; gap: 0.625rem; list-style: none; margin: 0; padding: 0; align-content: start; } .lieferinfo .wrp .lieferregionen-liste .lieferregion-item { background: #fff; border-radius: 10px; padding: 0.625rem; display: flex; justify-content: space-between; align-items: center; font-weight: 600; } @media (max-width: 768px) { .lieferinfo .wrp { grid-template-columns: 1fr; grid-template-rows: auto auto auto; } .lieferinfo .wrp .lieferinfo-left { grid-column: 1; grid-row: 1; min-height: 280px; } .lieferinfo .wrp .lieferregionen-header { grid-column: 1; grid-row: 2; } .lieferinfo .wrp .lieferregionen-liste { grid-column: 1; grid-row: 3; } } @media (max-width: 550px) { .lieferinfo .wrp .lieferinfo-left { min-height: 220px; } .lieferinfo-stoerer { height: 130px;width: 130px; left: -3px; } .lieferinfo-stoerer p {font-size: clamp(0.72rem, 1vw, 0.82rem)!important;} } /* ======================================== BLOG & SIDEBAR ======================================== */ main.withsidebar .content .blog-grid {display: grid;grid-template-columns: repeat(3, 1fr);grid-column-gap: 50px;grid-row-gap: 50px;} main.withsidebar .content .blog-grid .post {width: 100%;} main.withsidebar .content .blog-grid .post img {width: 100%;height: auto;object-fit: cover;} article.singlepost .post-image img {width: 100%;height: auto;object-fit: cover;} /* Sidebar - Modern Design */ main.withsidebar .sidebar {width: 100%; position: -webkit-sticky; position: sticky; top: 130px; padding: 0; box-sizing: border-box; display: flex; flex-direction: column; gap: 20px;} main.withsidebar .sidebar .sidebar-content {display: flex; flex-direction: column; gap: 20px;} /* Sidebar Widgets & Sections */ main.withsidebar .sidebar .widget, main.withsidebar .sidebar .sidebar-contact, main.withsidebar .sidebar .sidebar-nav {background: var(--bg-white); border-radius: 16px; padding: 25px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06); transition: all 0.3s ease; position: relative; overflow: hidden; margin-bottom: unset;} main.withsidebar .sidebar .widget:hover, main.withsidebar .sidebar .sidebar-nav:hover {box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1); transform: translateY(-2px);} /* Sidebar Headings */ main.withsidebar .sidebar h3, main.withsidebar .sidebar .widget-title {font-family: var(--font-headline); font-size: 18px; font-weight: 700; color: var(--text-color); margin: 0 0 20px 0; padding-bottom: 12px; border-bottom: 2px solid var(--primary-color); position: relative;} /* Sidebar Kontakt - Spezial Design */ main.withsidebar .sidebar .sidebar-contact {background: var(--secondary-color); color: var(--bg-white); padding: 30px;} main.withsidebar .sidebar .sidebar-contact:before {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #ffffff; -webkit-mask-image: url("assets/icons/maserung.svg"); mask-image: url("assets/icons/maserung.svg"); -webkit-mask-size: cover; mask-size: cover; opacity: 0.05; pointer-events: none;} main.withsidebar .sidebar .sidebar-contact:hover {transform: none; box-shadow: 0 8px 30px rgba(46, 89, 57, 0.3);} main.withsidebar .sidebar .sidebar-contact h3 {color: var(--bg-white); border-bottom-color: var(--primary-color); margin-bottom: 20px;} main.withsidebar .sidebar .sidebar-contact h3:after {background: var(--primary-color);} main.withsidebar .sidebar .sidebar-contact address {font-style: normal; line-height: 1.8; position: relative; z-index: 1;color: #ffffff;} main.withsidebar .sidebar .sidebar-contact address a {color: var(--bg-white); display: flex; align-items: center; gap: 10px; padding: 8px 0; transition: all 0.2s ease; border-radius: 8px;} main.withsidebar .sidebar .sidebar-contact address a:hover {color: var(--primary-color); padding-left: 5px;} /* Sidebar Navigation */ main.withsidebar .sidebar .sidebar-nav ul {list-style: none; padding: 0; margin: 0;} main.withsidebar .sidebar .sidebar-nav ul li {margin: 0; border-bottom: 1px solid var(--bg-gray);} main.withsidebar .sidebar .sidebar-nav ul li:last-child {border-bottom: none;} main.withsidebar .sidebar .sidebar-nav ul li a {display: flex; align-items: center; padding: 14px 0; color: var(--text-color); font-weight: 500; font-size: 15px; transition: all 0.25s ease; position: relative;} main.withsidebar .sidebar .sidebar-nav ul li a:before {content: ''; width: 0; height: 2px; background: var(--primary-color); position: absolute; bottom: 0; left: 0; transition: width 0.3s ease;} main.withsidebar .sidebar .sidebar-nav ul li a:after {content: '→'; margin-left: auto; opacity: 0; transform: translateX(-10px); transition: all 0.25s ease; color: var(--primary-color);} main.withsidebar .sidebar .sidebar-nav ul li a:hover {color: var(--primary-color); padding-left: 8px;} main.withsidebar .sidebar .sidebar-nav ul li a:hover:before {width: 100%;} main.withsidebar .sidebar .sidebar-nav ul li a:hover:after {opacity: 1; transform: translateX(0);} main.withsidebar .sidebar .sidebar-nav ul li.current-menu-item a, main.withsidebar .sidebar .sidebar-nav ul li.current_page_item a {color: var(--primary-color); font-weight: 600;} main.withsidebar .sidebar .sidebar-nav ul li.current-menu-item a:before, main.withsidebar .sidebar .sidebar-nav ul li.current_page_item a:before {width: 30px;} /* Sidebar Sub-Navigation */ main.withsidebar .sidebar .sidebar-nav ul ul {padding-left: 15px; margin-top: 5px; border-left: 2px solid var(--bg-gray);} main.withsidebar .sidebar .sidebar-nav ul ul li {border-bottom: none;} main.withsidebar .sidebar .sidebar-nav ul ul li a {padding: 10px 0; font-size: 14px; font-weight: 400; color: #777;} main.withsidebar .sidebar .sidebar-nav ul ul li a:before {display: none;} main.withsidebar .sidebar .sidebar-nav ul ul li a:hover {color: var(--secondary-color);} /* Blog Widgets - Search */ main.withsidebar .sidebar .widget_search form {display: flex; gap: 0; border-radius: 10px; overflow: hidden; border: 2px solid var(--bg-gray); transition: border-color 0.3s ease;} main.withsidebar .sidebar .widget_search form:focus-within {border-color: var(--secondary-color);} main.withsidebar .sidebar .widget_search input[type="search"] {flex: 1; padding: 14px 16px; border: none; font-family: var(--font-body); font-size: 15px; background: transparent; outline: none;} main.withsidebar .sidebar .widget_search button, main.withsidebar .sidebar .widget_search input[type="submit"] {padding: 14px 18px; background: var(--primary-color); color: var(--bg-white); border: none; font-weight: 600; cursor: pointer; transition: background 0.3s ease;} main.withsidebar .sidebar .widget_search button:hover, main.withsidebar .sidebar .widget_search input[type="submit"]:hover {background: var(--secondary-color);} /* Blog Widgets - Categories & Archives */ main.withsidebar .sidebar .widget_categories ul, main.withsidebar .sidebar .widget_archive ul {list-style: none; padding: 0; margin: 0;} main.withsidebar .sidebar .widget_categories ul li, main.withsidebar .sidebar .widget_archive ul li {margin: 0;} main.withsidebar .sidebar .widget_categories ul li a, main.withsidebar .sidebar .widget_archive ul li a {display: flex; justify-content: space-between; align-items: center; padding: 12px 0; color: var(--text-color); font-weight: 500; border-bottom: 1px solid var(--bg-gray); transition: all 0.2s ease;} main.withsidebar .sidebar .widget_categories ul li:last-child a, main.withsidebar .sidebar .widget_archive ul li:last-child a {border-bottom: none;} main.withsidebar .sidebar .widget_categories ul li a:hover, main.withsidebar .sidebar .widget_archive ul li a:hover {color: var(--primary-color); padding-left: 5px;} main.withsidebar .sidebar .widget_categories ul li a .count, main.withsidebar .sidebar .widget_archive ul li a .count {background: var(--bg-gray); padding: 2px 10px; border-radius: 20px; font-size: 12px; font-weight: 600;} /* Blog Widgets - Recent Posts */ main.withsidebar .sidebar .widget_recent_entries ul {list-style: none; padding: 0; margin: 0;} main.withsidebar .sidebar .widget_recent_entries ul li {padding: 15px 0; border-bottom: 1px solid var(--bg-gray);} main.withsidebar .sidebar .widget_recent_entries ul li:last-child {border-bottom: none; padding-bottom: 0;} main.withsidebar .sidebar .widget_recent_entries ul li:first-child {padding-top: 0;} main.withsidebar .sidebar .widget_recent_entries ul li a {display: block; font-weight: 500; color: var(--text-color); line-height: 1.5; transition: color 0.2s ease;} main.withsidebar .sidebar .widget_recent_entries ul li a:hover {color: var(--primary-color);} main.withsidebar .sidebar .widget_recent_entries ul li .post-date {display: block; font-size: 13px; color: #999; margin-top: 5px;} /* Blog Widgets - Tag Cloud */ main.withsidebar .sidebar .widget_tag_cloud .tagcloud {display: flex; flex-wrap: wrap; gap: 8px;} main.withsidebar .sidebar .widget_tag_cloud .tagcloud a {display: inline-block; padding: 6px 14px; background: var(--bg-gray); border-radius: 20px; font-size: 13px !important; font-weight: 500; color: var(--text-color); transition: all 0.2s ease;} main.withsidebar .sidebar .widget_tag_cloud .tagcloud a:hover {background: var(--primary-color); color: var(--bg-white); transform: translateY(-2px);} /* ======================================== FOOTER ======================================== */ footer {background: #ffffff; position: relative; margin-top: 160px;} footer .wrp {display: flex; padding: 100px 0 50px 0;color: var(--text-color);} footer address {text-align: center;flex: 1;} footer .footernav {text-align: right;flex: 1;} footer .contact {flex: 1;} footer .logo-bg {position: absolute; left: 50%; top: -80px; transform: translateX(-50%); background: #ffffff; border-radius: 300px; padding: 20px;} .bottom {background: var(--secondary-color); color: #ffffff;} .bottom a {color: #ffffff;} .bottom a:hover {color: var(--primary-color);} .bottom .wrp {display: flex;align-items: center;justify-content: space-between;flex-wrap: wrap;padding: 15px 0;} /* ======================================== CAMPFIRE ANIMATION (Footer Eye Candy) ======================================== */ .campfire { position: relative; width: 60px; height: 45px; } .campfire-svg { width: 100%; height: 100%; overflow: visible; } /* Boden-Glühen */ .ground-glow { animation: glow-pulse 2.2s ease-in-out infinite; } /* Glut-Animationen */ .ember-base { animation: ember-base-anim 1.6s ease-in-out infinite alternate; } .ember-core { animation: ember-core-anim 1.1s ease-in-out infinite alternate; } .ember-hot { animation: ember-hot-anim 0.8s ease-in-out infinite alternate; } .log-glow { animation: log-glow-anim 2s ease-in-out infinite alternate; } @keyframes glow-pulse { 0% { opacity: 0.25; rx: 28; } 50% { opacity: 0.55; rx: 32; } 100% { opacity: 0.25; rx: 28; } } @keyframes ember-base-anim { 0% { opacity: 0.75; } 100% { opacity: 0.95; } } @keyframes ember-core-anim { 0% { opacity: 0.8; } 100% { opacity: 1.0; } } @keyframes ember-hot-anim { 0% { opacity: 0.6; } 100% { opacity: 0.9; } } @keyframes log-glow-anim { 0% { opacity: 0.08; } 100% { opacity: 0.28; } } /* Flammen – organische Bewegung durch scale + skew Die feTurbulence im SVG übernimmt das "unregelmäßige", CSS kümmert sich um das atmende Pulsieren */ .flame-group { transform-origin: 50px 66px; animation: flame-breathe 1.8s ease-in-out infinite; } .flame-layer { transform-origin: 50px 66px; } .f-outer-l { animation: f-outer-anim 1.0s ease-in-out infinite alternate; animation-delay: 0s; } .f-mid { animation: f-mid-anim 0.85s ease-in-out infinite alternate; animation-delay: 0.08s; } .f-core { animation: f-core-anim 0.7s ease-in-out infinite alternate; animation-delay: 0.04s; } .f-inner { animation: f-inner-anim 0.55s ease-in-out infinite alternate; animation-delay: 0.02s; } @keyframes flame-breathe { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(0.97); } } @keyframes f-outer-anim { 0% { transform: scaleY(1.00) scaleX(1.00) skewX(-1deg); opacity: 0.82; } 30% { transform: scaleY(1.06) scaleX(0.96) skewX( 2deg); opacity: 0.88; } 65% { transform: scaleY(0.96) scaleX(1.04) skewX(-2deg); opacity: 0.78; } 100% { transform: scaleY(1.04) scaleX(0.97) skewX( 1deg); opacity: 0.86; } } @keyframes f-mid-anim { 0% { transform: scaleY(1.00) scaleX(1.00) skewX( 1deg); opacity: 0.88; } 40% { transform: scaleY(1.09) scaleX(0.94) skewX(-3deg); opacity: 0.95; } 75% { transform: scaleY(0.94) scaleX(1.05) skewX( 2deg); opacity: 0.82; } 100% { transform: scaleY(1.05) scaleX(0.96) skewX(-1deg); opacity: 0.90; } } @keyframes f-core-anim { 0% { transform: scaleY(1.00) scaleX(1.00); opacity: 0.93; } 45% { transform: scaleY(1.13) scaleX(0.91); opacity: 1.00; } 100% { transform: scaleY(0.92) scaleX(1.08); opacity: 0.90; } } @keyframes f-inner-anim { 0% { transform: scaleY(1.00) scaleX(1.00); opacity: 1.00; } 50% { transform: scaleY(1.18) scaleX(0.87); opacity: 0.95; } 100% { transform: scaleY(0.90) scaleX(1.11); opacity: 1.00; } } /* Funken */ .spark { opacity: 0; } .spark-1 { animation: spark-rise 2.6s ease-out infinite; animation-delay: 0.0s; } .spark-2 { animation: spark-rise 3.1s ease-out infinite; animation-delay: 0.5s; } .spark-3 { animation: spark-rise 2.9s ease-out infinite; animation-delay: 1.1s; } .spark-4 { animation: spark-rise 2.3s ease-out infinite; animation-delay: 1.6s; } .spark-5 { animation: spark-rise 2.7s ease-out infinite; animation-delay: 2.1s; } .spark-6 { animation: spark-rise 3.3s ease-out infinite; animation-delay: 0.8s; } .spark-7 { animation: spark-rise 2.5s ease-out infinite; animation-delay: 1.4s; } .spark-8 { animation: spark-rise 2.0s ease-out infinite; animation-delay: 0.3s; } @keyframes spark-rise { 0% { opacity: 0; transform: translateY(0px) translateX(0px); r: 1.2; } 12% { opacity: 0.9; } 60% { opacity: 0.5; } 85% { opacity: 0.15; } 100%{ opacity: 0; transform: translateY(-22px) translateX(var(--sx, 4px)); r: 0.3; } } .spark-1 { --sx: 5px; } .spark-2 { --sx: -4px; } .spark-3 { --sx: 2px; } .spark-4 { --sx: -6px; } .spark-5 { --sx: 7px; } .spark-6 { --sx: -3px; } .spark-7 { --sx: 4px; } .spark-8 { --sx: -5px; } /* Hover: Feuer intensiver */ .campfire:hover .f-outer-l { animation-duration: 0.55s; } .campfire:hover .f-mid { animation-duration: 0.45s; } .campfire:hover .f-core { animation-duration: 0.38s; } .campfire:hover .f-inner { animation-duration: 0.30s; } .campfire:hover .spark { animation-duration: 1.6s; } .campfire:hover .ground-glow { animation-duration: 1.2s; } /* Reduce Motion */ @media (prefers-reduced-motion: reduce) { .flame-layer, .flame-group, .spark, .ground-glow, .ember-base, .ember-core, .ember-hot, .log-glow { animation: none; } .flame-layer { opacity: 0.85; } .spark { opacity: 0.4; } .ground-glow { opacity: 0.35; } .ember-core { opacity: 0.85; } } /* Mobile: Campfire zentrieren */ @media (max-width: 600px) { .bottom .wrp { flex-direction: column; gap: 10px; text-align: center; } .campfire { order: -1; margin-bottom: 5px; } } @media (max-width: 600px) { footer .logo-bg {top: -50px;} footer .wrp {flex-direction: column; gap: 50px;} footer address {order: -1;} footer .footernav {text-align: center;} footer .contact {text-align: center;} .bottom .wrp {flex-direction: column;} } /* ======================================== 404 ERROR PAGE ======================================== */ .error404 .stage {display: none;} .pageerror {padding: 250px 0 100px 0;text-align: center;} /* ======================================== CUSTOM SLIDER ======================================== */ .splide {position: relative;overflow: visible;width: calc(100% - 120px);margin: 0 auto;} .splide .splide__track {overflow: hidden;width: 100%;} .splide .splide__list, .splide .cards {display: flex;margin: 0;padding: 0;list-style: none;width: 100%;transition: transform 0.5s ease;} .splide .splide__slide, .splide .cards > * {flex-shrink: 0;margin: 0;list-style: none;} .splide__arrow {position: absolute;top: 50%;transform: translateY(-50%);width: 50px;height: 50px;border-radius: 50%;background: var(--primary-color);color: var(--bg-white);border: none;font-size: 24px;cursor: pointer;z-index: 5;transition: var(--transition);display: flex;align-items: center;justify-content: center;box-shadow: var(--box-shadow);font-weight: 300;} .splide__arrow:hover {background: var(--secondary-color);transform: translateY(-50%) scale(1.1);transition: var(--transition);} .splide__arrow--prev {left: -60px;} .splide__arrow--next {right: -60px;} .splide__arrow:disabled {opacity: 0.3;cursor: not-allowed;} .splide .clone {opacity: 1;} /* ======================================== CUSTOM LIGHTBOX ======================================== */ .custom-lightbox {position: fixed;top: 0;left: 0;right: 0;bottom: 0;z-index: 999999;opacity: 0;visibility: hidden;transition: opacity 0.3s ease, visibility 0.3s ease;pointer-events: none;} .custom-lightbox.active {opacity: 1;visibility: visible;pointer-events: auto;} .lightbox-overlay {position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: rgba(0, 0, 0, 0.95);backdrop-filter: blur(10px);z-index: 1;} .lightbox-container {position: relative;width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;z-index: 2;} .lightbox-close {position: fixed;top: 20px;right: 20px;width: 50px;height: 50px;border-radius: 50%;background: rgba(255, 255, 255, 0.2);color: var(--bg-white);border: 2px solid rgba(255, 255, 255, 0.5);font-size: 30px;cursor: pointer;z-index: 999999;transition: var(--transition);display: flex;align-items: center;justify-content: center;line-height: 1;font-weight: 300;} .lightbox-close:hover {background: var(--primary-color);border-color: var(--primary-color);transform: rotate(90deg);transition: var(--transition);} .lightbox-prev, .lightbox-next {position: fixed;top: 50%;transform: translateY(-50%);width: 60px;height: 60px;border-radius: 50%;background: rgba(255, 255, 255, 0.2);color: var(--bg-white);border: 2px solid rgba(255, 255, 255, 0.5);font-size: 28px;cursor: pointer;z-index: 999999;transition: var(--transition);display: flex;align-items: center;justify-content: center;font-weight: 300;} .lightbox-prev:hover, .lightbox-next:hover {background: var(--primary-color);border-color: var(--primary-color);transform: translateY(-50%) scale(1.1);transition: var(--transition);} .lightbox-prev {left: 20px;} .lightbox-next {right: 20px;} .lightbox-counter {position: fixed;top: 20px;left: 50%;transform: translateX(-50%);background: rgba(0, 0, 0, 0.8);color: var(--bg-white);padding: 10px 20px;border-radius: 20px;font-size: 16px;z-index: 999999;backdrop-filter: blur(5px);font-weight: 500;} .lightbox-image-wrapper {position: relative;max-width: 90%;max-height: 90%;display: flex;align-items: center;justify-content: center;overflow: hidden;} .lightbox-image {max-width: 100%;max-height: 90vh;object-fit: contain;transition: transform 0.3s ease;cursor: grab;} .lightbox-image:active {cursor: grabbing;} .lightbox-video-wrapper {position: relative;width: 90vw;max-width: 1280px;aspect-ratio: 16/9;} .lightbox-video {position: absolute;top: 0;left: 0;width: 100%;height: 100%;border-radius: 8px;} .lightbox-zoom-controls {position: fixed;bottom: 30px;left: 50%;transform: translateX(-50%);display: flex;gap: 10px;z-index: 999999;} .lightbox-zoom-controls button {width: 45px;height: 45px;border-radius: 50%;background: rgba(255, 255, 255, 0.2);color: var(--bg-white);border: 2px solid rgba(255, 255, 255, 0.5);font-size: 20px;cursor: pointer;transition: var(--transition);display: flex;align-items: center;justify-content: center;font-weight: 300;} .lightbox-zoom-controls button:hover {background: var(--primary-color);border-color: var(--primary-color);transform: scale(1.1);transition: var(--transition);} .lightbox-thumbnails {position: fixed;bottom: 20px;left: 50%;transform: translateX(-50%);width: 90%;max-width: 900px;z-index: 999999;background: rgba(0, 0, 0, 0.8);padding: 15px;border-radius: 10px;backdrop-filter: blur(10px);} .lightbox-thumbnails-wrapper {display: flex;gap: 10px;overflow-x: auto;overflow-y: hidden;scroll-behavior: smooth;padding: 5px 0;scrollbar-width: thin;scrollbar-color: rgba(255, 255, 255, 0.3) transparent;} .lightbox-thumbnails-wrapper::-webkit-scrollbar {height: 6px;} .lightbox-thumbnails-wrapper::-webkit-scrollbar-track {background: rgba(255, 255, 255, 0.1);border-radius: 3px;} .lightbox-thumbnails-wrapper::-webkit-scrollbar-thumb {background: rgba(255, 255, 255, 0.3);border-radius: 3px;} .lightbox-thumbnails-wrapper::-webkit-scrollbar-thumb:hover {background: rgba(255, 255, 255, 0.5);} .lightbox-thumbnail {position: relative;flex-shrink: 0;width: 100px;height: 70px;border-radius: 6px;overflow: hidden;cursor: pointer;border: 3px solid transparent;transition: var(--transition);background: rgba(0, 0, 0, 0.5);} .lightbox-thumbnail:hover {border-color: rgba(255, 255, 255, 0.5);transform: scale(1.05);transition: var(--transition);} .lightbox-thumbnail.active {border-color: var(--primary-color);transform: scale(1.05);} .lightbox-thumbnail img {width: 100%;height: 100%;object-fit: cover;} .lightbox-thumbnail-video-icon {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 30px;height: 30px;background: rgba(0, 0, 0, 0.7);color: var(--bg-white);display: flex;align-items: center;justify-content: center;border-radius: 50%;font-size: 12px;pointer-events: none;} /* ======================================== MEDIA QUERIES - RESPONSIVE ======================================== */ /* Tablet Landscape & Below (1024px) */ @media (max-width: 1024px) { /* Page Layout */ main.withsidebar .page-build {grid-template-columns: 100%;} main.withsidebar .page-build .sidebar {display: none;} /* Teasercards */ .teasercards .cards.no-carousel {grid-template-columns: repeat(2, 1fr);} /* Gallery */ .gallery .glightbox-gallery {grid-template-columns: repeat(4, 1fr);} .gallery .video-gallery-grid {grid-template-columns: repeat(2, 1fr);} .gallery .filterrow {display: grid;grid-template-columns: 100%;gap: 25px;} .gallery .filterrow #filter {flex-wrap: wrap;} } /* Tablet Portrait & Below (768px) */ @media (max-width: 768px) { /* Text + Image */ .textbild .text {order: 1;} .textbild .bild {order: 2;} .textbild .wrp {grid-template-columns: 100%;gap: 50px;} /* Blog Grid */ main.withsidebar .content .blog-grid {grid-template-columns: repeat(2, 1fr);} } /* Mobile & Below (550px) */ @media (max-width: 550px) { /* Gallery */ .gallery .video-gallery-grid {grid-template-columns: 100%;} .gallery .glightbox-gallery {grid-template-columns: repeat(2, 1fr);} } /* Mobile Small (500px) */ @media (max-width: 500px) { /* Margins */ .mb {margin-bottom: 50px;} .mb50 {margin-bottom: 25px;} /* Teasercards */ .teasercards .cards.no-carousel {grid-template-columns: 100%;} .teasercard-item {height: clamp(250px, 60vw, 350px);} .teasercard-item .teasercard-content {padding: 20px;} .teasercard-item .teasercard-content h3 {font-size: 18px;} } /* Responsive Lightbox */ @media (max-width: 768px) { .lightbox-close {width: 40px;height: 40px;font-size: 24px;top: 10px;right: 10px;} .lightbox-prev, .lightbox-next {width: 45px;height: 45px;font-size: 22px;} .lightbox-prev {left: 10px;} .lightbox-next {right: 10px;} .lightbox-counter {font-size: 12px;padding: 6px 12px;top: 10px;} .lightbox-zoom-controls {bottom: 20px;gap: 8px;} .lightbox-zoom-controls button {width: 38px;height: 38px;font-size: 18px;} .lightbox-image-wrapper {max-width: 95%;max-height: 85%;} .lightbox-video-wrapper {width: 95vw;} } @media (max-width: 768px) { .splide {width: 100%;} .splide__arrow--prev {left: 10px;} .splide__arrow--next {right: 10px;} } @media (max-width: 500px) { .splide__arrow {width: 40px;height: 40px;font-size: 20px;} } /* ======================================== WPFORMS - MODERN STYLING ======================================== */ .wpforms-form {display: flex !important; flex-direction: column !important; gap: 20px !important;} .wpforms-field-container {display: flex !important; flex-direction: column !important; gap: 20px !important;} .wpforms-field {margin: 0 !important; padding: 0 !important;} .wpforms-field-label {display: block !important; font-family: var(--font-body) !important; font-weight: 600 !important; font-size: 14px !important; color: var(--text-color) !important; margin-bottom: 8px !important; text-transform: uppercase !important; letter-spacing: 0.5px !important;} .wpforms-field-sublabel {display: none !important;} .wpforms-required-label {color: var(--primary-color) !important; font-weight: 600 !important;} .wpforms-form input[type="text"], .wpforms-form input[type="email"], .wpforms-form input[type="tel"], .wpforms-form input[type="url"], .wpforms-form input[type="number"], .wpforms-form input[type="date"], .wpforms-form textarea, .wpforms-form select {width: 100% !important; padding: 16px 20px !important; font-family: var(--font-body) !important; font-size: 16px !important; font-weight: 400 !important; color: var(--text-color) !important; background: var(--bg-white) !important; border: none !important; border-radius: 12px !important; outline: none !important; transition: all 0.3s ease !important; box-sizing: border-box !important; -webkit-appearance: none !important; appearance: none !important;} .wpforms-form input[type="text"]:hover, .wpforms-form input[type="email"]:hover, .wpforms-form input[type="tel"]:hover, .wpforms-form input[type="url"]:hover, .wpforms-form input[type="number"]:hover, .wpforms-form input[type="date"]:hover, .wpforms-form textarea:hover, .wpforms-form select:hover {border-color: #c0c0c0 !important;} .wpforms-form input[type="text"]:focus, .wpforms-form input[type="email"]:focus, .wpforms-form input[type="tel"]:focus, .wpforms-form input[type="url"]:focus, .wpforms-form input[type="number"]:focus, .wpforms-form input[type="date"]:focus, .wpforms-form textarea:focus, .wpforms-form select:focus {border-color: var(--secondary-color) !important; box-shadow: 0 0 0 4px rgba(46, 89, 57, 0.1) !important;} .wpforms-form input::placeholder, .wpforms-form textarea::placeholder {color: #a0a0a0 !important; font-weight: 400 !important;} .wpforms-form textarea {min-height: 180px !important; resize: vertical !important; line-height: 1.6 !important;} .wpforms-form select {cursor: pointer !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23515151' d='M6 8L1 3h10z'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 16px center !important; padding-right: 44px !important;} .wpforms-field-checkbox ul, .wpforms-field-radio ul, .wpforms-field-gdpr-checkbox ul {display: flex !important; flex-wrap: wrap !important; gap: 15px !important; list-style: none !important; padding: 0 !important; margin: 0 !important;} .wpforms-field-checkbox li, .wpforms-field-radio li, .wpforms-field-gdpr-checkbox li {display: flex !important; align-items: center !important; margin: 0 !important;} .wpforms-form input[type="checkbox"], .wpforms-form input[type="radio"] {width: 22px !important; height: 22px !important; margin-right: 10px !important; cursor: pointer !important; accent-color: var(--secondary-color) !important;} .wpforms-field-label-inline {font-weight: 400 !important; font-size: 15px !important; cursor: pointer !important;} .wpforms-field-gdpr-checkbox .wpforms-field-label-inline {font-size: 14px !important; line-height: 1.5 !important; color: #666 !important;} .wpforms-field-gdpr-checkbox .wpforms-field-label-inline a {color: var(--secondary-color) !important; text-decoration: underline !important; text-underline-offset: 2px !important;} .wpforms-field-gdpr-checkbox .wpforms-field-label-inline a:hover {color: var(--primary-color) !important;} .wpforms-submit-container {margin-top: 10px !important; padding: 0 !important;} .wpforms-form button[type="submit"], .wpforms-form .wpforms-submit {display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 16px 40px !important; font-family: var(--font-body) !important; font-size: 16px !important; font-weight: 600 !important; color: var(--bg-white) !important; background: var(--primary-color) !important; border: none !important; border-radius: 50px !important; cursor: pointer !important; transition: all 0.3s ease !important; text-transform: uppercase !important; letter-spacing: 1px !important;} .wpforms-form button[type="submit"]:hover, .wpforms-form .wpforms-submit:hover {background: var(--secondary-color) !important; transform: translateY(-2px) !important; box-shadow: 0 8px 25px rgba(46, 89, 57, 0.3) !important;} .wpforms-form button[type="submit"]:active, .wpforms-form .wpforms-submit:active {transform: translateY(0) !important;} .wpforms-submit-spinner {display: none!important;} .wpforms-form .wpforms-error {border-color: #e53935 !important;} .wpforms-form label.wpforms-error {display: block !important; font-size: 13px !important; color: #e53935 !important; margin-top: 6px !important; font-weight: 500 !important; background: none !important; border: none !important; padding: 0 !important;} .wpforms-confirmation-container-full {background: rgba(46, 89, 57, 0.1) !important; color: var(--secondary-color) !important; border-left: 4px solid var(--secondary-color) !important; padding: 20px 25px !important; border-radius: 12px !important; font-size: 15px !important; font-weight: 500 !important;} .wpforms-confirmation-container-full p {margin: 0 !important; color: var(--secondary-color) !important;} .wpforms-field-description {font-size: 13px !important; color: #888 !important; margin-top: 6px !important;} .wpforms-recaptcha-container, .wpforms-field-hp {display: none !important;} /* Kontaktseite Layout */ .kontakt-form-wrapper {background: var(--bg-white) !important; padding: 50px !important; border-radius: var(--border-radius) !important; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08) !important;} .kontakt-info {background: var(--secondary-color) !important; color: var(--bg-white) !important; padding: 40px !important; border-radius: var(--border-radius) !important; position: relative !important; overflow: hidden !important;} .kontakt-info:before {content: '' !important; position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; background-color: #ffffff !important; -webkit-mask-image: url("assets/icons/maserung.svg") !important; -webkit-mask-size: cover !important; -webkit-mask-repeat: no-repeat !important; -webkit-mask-position: center center !important; mask-image: url("assets/icons/maserung.svg") !important; mask-size: cover !important; mask-repeat: no-repeat !important; mask-position: center center !important; opacity: 0.05 !important; pointer-events: none !important; z-index: 0 !important;} .kontakt-info h3 {color: var(--bg-white) !important; margin-bottom: 20px !important; position: relative !important; z-index: 1 !important;} .kontakt-info p, .kontakt-info a {color: rgba(255, 255, 255, 0.9) !important; position: relative !important; z-index: 1 !important;} .kontakt-info a:hover {color: var(--bg-white) !important;} .kontakt-info-item {display: flex !important; align-items: flex-start !important; gap: 15px !important; margin-bottom: 20px !important; position: relative !important; z-index: 1 !important;} .kontakt-info-item:last-child {margin-bottom: 0 !important;} .kontakt-info-item .icon {width: 24px !important; height: 24px !important; flex-shrink: 0 !important; filter: brightness(0) invert(1) !important; opacity: 0.9 !important;} .kontakt-grid {display: grid !important; grid-template-columns: 1fr 350px !important; gap: 40px !important; align-items: start !important;} @media (max-width: 900px) { .kontakt-grid {grid-template-columns: 1fr !important;} .kontakt-info {order: -1 !important;} } @media (max-width: 700px) { .kontakt-form-wrapper {padding: 30px 20px !important;} .wpforms-form button[type="submit"], .wpforms-form .wpforms-submit {width: 100% !important;} } @media (max-width: 600px) { div.wpforms-container .wpforms-form .wpforms-field-layout .wpforms-layout-column {padding: 0 10px!important;} div.wpforms-container .wpforms-form .wpforms-field-layout .wpforms-layout-row {gap: 20px!important;} .wpforms-field-name .wpforms-field-row {grid-template-columns: 1fr !important;} } /* ======================================== ELEGANTE ANIMATIONEN ======================================== */ /* Keyframes für sanfte Einblendungen */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes scaleIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } } @keyframes slideInLeft { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: translateX(0); } } @keyframes slideInRight { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } } /* Scroll-Reveal Basisklasse */ .reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); } .reveal.revealed { opacity: 1; transform: translateY(0); } /* Varianten für unterschiedliche Effekte */ .reveal-scale { opacity: 0; transform: scale(0.95); transition: opacity 0.5s ease, transform 0.5s ease; } .reveal-scale.revealed { opacity: 1; transform: scale(1); } .reveal-left { opacity: 0; transform: translateX(-30px); transition: opacity 0.6s ease, transform 0.6s ease; } .reveal-left.revealed { opacity: 1; transform: translateX(0); } .reveal-right { opacity: 0; transform: translateX(30px); transition: opacity 0.6s ease, transform 0.6s ease; } .reveal-right.revealed { opacity: 1; transform: translateX(0); } /* Staggered Animation für Gruppen */ .stagger-children > *:nth-child(1) { transition-delay: 0ms; } .stagger-children > *:nth-child(2) { transition-delay: 80ms; } .stagger-children > *:nth-child(3) { transition-delay: 160ms; } .stagger-children > *:nth-child(4) { transition-delay: 240ms; } .stagger-children > *:nth-child(5) { transition-delay: 320ms; } .stagger-children > *:nth-child(6) { transition-delay: 400ms; } /* Sanfte Hover-Effekte für Karten & Elemente */ .card-hover { transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease; } .card-hover:hover { transform: translateY(-5px); box-shadow: 0 12px 35px rgba(0, 0, 0, 0.12); } /* Eleganter Button-Hover */ .btn, a.btn { position: relative; overflow: hidden; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .btn:hover, a.btn:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(217, 119, 6, 0.25); } .btn:active, a.btn:active { transform: translateY(0); box-shadow: 0 4px 15px rgba(217, 119, 6, 0.2); } /* Sanfter Link-Underline-Effekt */ .link-underline { position: relative; text-decoration: none; } .link-underline::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 2px; background: var(--primary-color); transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .link-underline:hover::after { width: 100%; } /* Bild-Hover mit sanftem Zoom */ .img-zoom { overflow: hidden; } .img-zoom img { transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); } .img-zoom:hover img { transform: scale(1.05); } /* Sanfter Fokus-Effekt für Inputs */ input:focus, textarea:focus, select:focus { outline: none; box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.15); transition: box-shadow 0.2s ease; } /* Teaser-Cards Animation */ .teaser-card { transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.35s ease; } .teaser-card:hover { transform: translateY(-6px); box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1); } /* Stage/Hero Animationen */ .stage .stage-content { animation: fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.2s both; } .stage .btn { animation: fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.4s both; } /* Introblock Animation */ .introblock h1 { animation: fadeInUp 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.1s both; } .introblock p { animation: fadeInUp 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.2s both; } /* Accordion Smooth */ .item-accordion { transition: background 0.3s ease, box-shadow 0.3s ease; } .item-accordion:hover { box-shadow: 0 5px 20px rgba(0, 0, 0, 0.06); } .item-accordion-content { transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1); } /* Logo-Animation beim Laden */ header .logo img { animation: fadeIn 0.5s ease 0.1s both; } /* Navigation Links Hover */ #mainnav ul.mainnav.desktop li a { position: relative; } #mainnav ul.mainnav.desktop li a::after { content: ''; position: absolute; bottom: 20px; left: 50%; width: 0; height: 2px; background: var(--primary-color); transition: width 0.3s ease, left 0.3s ease; } #mainnav ul.mainnav.desktop li a:hover::after, #mainnav ul.mainnav.desktop li.current-menu-item > a::after { width: 30px; left: calc(50% - 15px); } /* Icon-Hover mit Rotation */ .icon-rotate:hover svg, .icon-rotate:hover img { transform: rotate(10deg); transition: transform 0.3s ease; } /* Sanfte Pulse-Animation für wichtige Elemente */ @keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.03); } } .pulse-hover:hover { animation: pulse 0.6s ease-in-out; } /* Header Icons Hover */ .header-icons a { transition: transform 0.2s ease, color 0.2s ease; } .header-icons a:hover { transform: scale(1.1); } /* Smooth Scroll Behavior */ html { scroll-behavior: smooth; } /* ======================================== SUBTILE ASCHE-PARTIKEL ======================================== */ .ash-particles { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 10; overflow: hidden; } .ash { position: absolute; width: 4px; height: 4px; background: rgba(100, 80, 60, 0.85); border-radius: 50%; opacity: 0; margin-left: 0; margin-top: 0; transition: margin 0.2s ease-out, filter 0.2s ease; } /* Maus-Interaktion: Partikel werden weggestoßen */ .ash.pushed { filter: blur(0.3px) brightness(1.1); } /* Über die gesamte Breite verteilt */ .ash-1 { left: 5%; animation: ashFloat1 16s 0s infinite linear; } .ash-2 { left: 12%; animation: ashFloat2 18s 2s infinite linear; width: 3px; height: 3px; } .ash-3 { left: 20%; animation: ashFloat3 20s 4s infinite linear; width: 5px; height: 5px; } .ash-4 { left: 28%; animation: ashFloat4 17s 1s infinite linear; } .ash-5 { left: 35%; animation: ashFloat1 19s 6s infinite linear; width: 3px; height: 3px; } .ash-6 { left: 42%; animation: ashFloat2 15s 3s infinite linear; } .ash-7 { left: 50%; animation: ashFloat3 21s 8s infinite linear; width: 5px; height: 5px; } .ash-8 { left: 58%; animation: ashFloat4 16s 5s infinite linear; width: 3px; height: 3px; } .ash-9 { left: 65%; animation: ashFloat1 18s 7s infinite linear; } .ash-10 { left: 72%; animation: ashFloat2 20s 9s infinite linear; width: 5px; height: 5px; } .ash-11 { left: 80%; animation: ashFloat3 17s 2s infinite linear; width: 3px; height: 3px; } .ash-12 { left: 88%; animation: ashFloat4 19s 4s infinite linear; } .ash-13 { left: 95%; animation: ashFloat1 15s 6s infinite linear; width: 5px; height: 5px; } .ash-14 { left: 8%; animation: ashFloat2 22s 10s infinite linear; width: 3px; height: 3px; } .ash-15 { left: 25%; animation: ashFloat3 16s 3s infinite linear; } .ash-16 { left: 38%; animation: ashFloat4 18s 7s infinite linear; width: 5px; height: 5px; } .ash-17 { left: 55%; animation: ashFloat1 20s 5s infinite linear; width: 3px; height: 3px; } .ash-18 { left: 68%; animation: ashFloat2 17s 8s infinite linear; } .ash-19 { left: 82%; animation: ashFloat3 19s 1s infinite linear; width: 5px; height: 5px; } .ash-20 { left: 92%; animation: ashFloat4 21s 9s infinite linear; width: 3px; height: 3px; } @keyframes ashFloat1 { 0% { opacity: 0; transform: translateY(100vh) translateX(0); } 10% { opacity: 0.75; } 50% { opacity: 0.65; transform: translateY(50vh) translateX(30px); } 90% { opacity: 0.4; } 100% { opacity: 0; transform: translateY(-5vh) translateX(-20px); } } @keyframes ashFloat2 { 0% { opacity: 0; transform: translateY(100vh) translateX(0); } 10% { opacity: 0.7; } 50% { opacity: 0.6; transform: translateY(50vh) translateX(-25px); } 90% { opacity: 0.35; } 100% { opacity: 0; transform: translateY(-5vh) translateX(15px); } } @keyframes ashFloat3 { 0% { opacity: 0; transform: translateY(100vh) translateX(0); } 10% { opacity: 0.65; } 50% { opacity: 0.55; transform: translateY(50vh) translateX(20px); } 90% { opacity: 0.3; } 100% { opacity: 0; transform: translateY(-5vh) translateX(-30px); } } @keyframes ashFloat4 { 0% { opacity: 0; transform: translateY(100vh) translateX(0); } 10% { opacity: 0.75; } 50% { opacity: 0.65; transform: translateY(50vh) translateX(-35px); } 90% { opacity: 0.4; } 100% { opacity: 0; transform: translateY(-5vh) translateX(25px); } } /* Auf Mobile weniger Partikel */ @media (max-width: 768px) { .ash-2, .ash-4, .ash-6, .ash-8, .ash-10, .ash-12, .ash-14, .ash-16, .ash-18, .ash-20 { display: none; } } /* ======================================== SHORTCODE BLOCK – Google Reviews Wrapper ======================================== */ .shortcode--google-reviews { background: var(--secondary-color); padding: 80px 0; position: relative; overflow: hidden; } .shortcode--google-reviews::before { content: ''; position: absolute; inset: 0; background-color: #fff; -webkit-mask-image: url("assets/icons/maserung.svg"); -webkit-mask-size: cover; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; mask-image: url("assets/icons/maserung.svg"); mask-size: cover; mask-repeat: no-repeat; mask-position: center; opacity: 0.04; pointer-events: none; } .shortcode--google-reviews .wrp { position: relative; z-index: 1; } .shortcode--google-reviews .shortcode-header { text-align: center; margin-bottom: 55px; } .shortcode--google-reviews .shortcode-header h2 { color: #fff; font-size: 34px; margin-bottom: 14px; } .shortcode--google-reviews .shortcode-header p { color: rgba(255, 255, 255, 0.7); font-size: 17px; max-width: 560px; margin: 0 auto; } @media (max-width: 700px) { .shortcode--google-reviews { padding: 55px 0; } .shortcode--google-reviews .shortcode-header h2 { font-size: 26px; } } /* Reduce Motion für Barrierefreiheit */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .reveal, .reveal-scale, .reveal-left, .reveal-right { opacity: 1; transform: none; } .ash-particles { display: none !important; } }