/* Andy SHK - Ergaenzungen zum Elementor-Design. Erzeugt von elementor/andy_css.py, nicht von Hand bearbeiten. */ :root{ --ink:#0E2B29; /* Tiefes Tannengrün-Schwarz */ --ink-2:#123A36; --green:#1A9D59; /* Logo-Grün, direkt aus assets/logo.png ausgelesen */ --green-d:#157543; /* dunklere Stufe derselben Farbe, für Text auf Hell */ --green-l:#1FB266; /* hellere Stufe derselben Farbe, für Text auf Dunkel */ --amber:#E0853A; --paper:#F4F8F5; --card:#ffffff; --line:#E2EAE7; --muted:#5D716D; --text:#16302C; --shadow:0 24px 60px rgba(14,43,41,.12); --shadow-lg:0 44px 90px rgba(14,43,41,.28); --r:20px; --maxw:1200px; --ease:cubic-bezier(.22,.61,.36,1); } /* ---- Schriften lokal ausliefern (kein Google-Hotlink, DSGVO) ---- */ @font-face{font-family:'Space Grotesk';src:url('assets/fonts/SpaceGrotesk-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;} @font-face{font-family:'Space Grotesk';src:url('assets/fonts/SpaceGrotesk-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;} @font-face{font-family:'Inter';src:url('assets/fonts/Inter-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;} @font-face{font-family:'Inter';src:url('assets/fonts/Inter-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;} /* Die Vorschau-Bloecke der Werkzeuge nennen die Schriften 'SG' und 'IN'. Dieselben Dateien unter diesen Namen registrieren, statt den uebernommenen Block umzuschreiben. */ @font-face{font-family:'SG';src:url('assets/fonts/SpaceGrotesk-700.woff2') format('woff2');font-weight:700;font-display:swap;} @font-face{font-family:'SG';src:url('assets/fonts/SpaceGrotesk-500.woff2') format('woff2');font-weight:500;font-display:swap;} @font-face{font-family:'IN';src:url('assets/fonts/Inter-400.woff2') format('woff2');font-weight:400;font-display:swap;} @font-face{font-family:'IN';src:url('assets/fonts/Inter-600.woff2') format('woff2');font-weight:600;font-display:swap;} .finder,.calc{font-family:'Inter',-apple-system,Segoe UI,Roboto,sans-serif;} /* Hello Elementor setzt kein border-box auf Buttons, die Vorschau schon. Ohne das ragen die Antwort-Buttons des Heizungs-Checks am Handy 11 px ueber den Rand. */ .finder,.finder *,.calc,.calc *{box-sizing:border-box;} .finder h3,.finder h4,.calc h3,.calc h4{font-family:'Space Grotesk',sans-serif;font-weight:700;color:var(--ink);} /* ---- Linkfarbe: Hello Elementor faerbt Links standardmaessig rosa (#cc3366). Das faellt vor allem in Impressum und Datenschutz auf. ---- */ .elementor-widget-text-editor a,.elementor-widget-heading a,.andy-marken a{color:var(--green-d);text-decoration:underline;text-underline-offset:2px;} .elementor-widget-text-editor a:hover,.elementor-widget-heading a:hover{color:var(--green);} footer .elementor-widget-text-editor a,footer .elementor-widget-heading a{color:#9FBCB2;text-decoration:none;} footer .elementor-widget-text-editor a:hover{color:var(--green-l);} /* ---- Weisse Flaeche der Kopfzeile ---- Den Hintergrund setzt Elementor selbst (fremde Hintergruende nimmt es auf seinen Containern nicht an). Groesse und Deckkraft steuern wir hier. */ .andy-header{position:relative;} .andy-headerflaeche{position:absolute !important;top:0;left:50%;transform:translateX(-50%);width:100vw;height:100%;min-height:100%;padding:0 !important;opacity:0;pointer-events:none;transition:opacity .3s;z-index:0;} .andy-headerflaeche > *{display:none;} .andy-header > .e-con-inner{position:relative;z-index:1;} /* ---- Gruenes Wort in der Hero-Headline ---- */ .andy-gruen{color:var(--green-l);} /* ---- Leitspruch unter der Headline: gruener Strich davor ---- */ .andy-claim .elementor-heading-title{display:inline-flex;align-items:center;gap:13px;} .andy-claim .elementor-heading-title::before{content:"";flex:0 0 auto;width:28px;height:2px;border-radius:2px;background:var(--green-l);} /* ---- Marken-Satz und Leitspruch auf den Leistungsseiten ---- */ .andy-marken{border-left:3px solid var(--green-l);padding-left:15px;} .andy-marken b{font-family:'Space Grotesk',sans-serif;font-weight:500;color:var(--ink);} .andy-spruch .elementor-heading-title{border-left:3px solid var(--green);padding-left:18px;display:block;} /* ---- Leistungskarten: feste Bildhoehe wie in der Vorschau ---- !important, weil Elementors eigenes Bild-CSS gleich spezifisch ist und spaeter laedt. */ .andy-kartenbild,.andy-kartenbild .elementor-widget-container{width:100% !important;max-width:none !important;} /* Elementor setzt den Bildlink auf inline-block, dann schrumpft das Bild auf seine natuerliche Breite. Der Link muss ein Block ueber die volle Breite sein. */ .andy-kartenbild a{display:block !important;width:100%;} .andy-kartenbild img{width:100% !important;height:auto !important;aspect-ratio:16/9;object-fit:cover;display:block;} .andy-karte-breit .andy-kartenbild,.andy-karte-breit .andy-kartenbild .elementor-widget-container,.andy-karte-breit .andy-kartenbild figure{height:100%;} .andy-karte-breit .andy-kartenbild img{height:100% !important;aspect-ratio:auto;min-height:320px;} @media(max-width:960px){ .andy-karte-breit .andy-kartenbild img{height:auto !important;aspect-ratio:16/9;min-height:0;} } /* ---- Schild am Bild (Foerderung, Meisterbetrieb): liegt wie im Entwurf ueberlappend am unteren Bildrand, nicht darunter. ---- */ .andy-splitmedien{position:relative;} .andy-badge{position:absolute !important;left:20px !important;right:auto !important;top:auto !important;bottom:-26px !important; width:auto !important;max-width:calc(100% - 40px) !important;height:auto !important;min-height:0 !important;align-self:flex-start !important; z-index:3;background:#fff;border-radius:16px;padding:14px 18px !important;box-shadow:0 18px 40px rgba(14,43,41,.18);} .andy-badge > .e-con-inner{width:auto;} @media(max-width:767px){ .andy-splitmedien{margin-bottom:30px;} .andy-badge{left:12px !important;bottom:-22px !important;} } /* ---- Mosaik-Galerie: Raster kommt von hier, Bilder und Videos bleiben Widgets ---- */ .e-con.andy-gal{display:grid !important;grid-template-columns:repeat(4,1fr);grid-auto-rows:210px;gap:16px;} .e-con.andy-gal > .elementor-element{width:auto !important;max-width:none !important;min-height:0;} /* Zwischen figure und img liegt Elementors Lightbox-Link, deshalb fuellt das Bild die Kachel ueber absolute Positionierung statt ueber Hoehenvererbung. */ .andy-kachel{position:relative;overflow:hidden;border-radius:16px;background:var(--ink);} .andy-kachel .elementor-widget-container,.andy-kachel figure,.andy-kachel figure>a{position:static;height:100%;margin:0;display:block;} .andy-kachel img{position:absolute;inset:0;width:100% !important;height:100% !important;max-width:none !important;object-fit:cover;display:block;transition:transform .5s var(--ease);} .andy-kachel:hover img{transform:scale(1.06);} .andy-kachel::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(10,30,28,.55));opacity:.65;pointer-events:none;} .andy-kachel figcaption{position:absolute;left:15px;bottom:13px;z-index:2;color:#fff;margin:0;padding:0;text-align:left;font-style:normal;} .andy-kachel.big{grid-column:span 2;grid-row:span 2;} .andy-kachel.tall{grid-row:span 2;} .andy-kachel.wide{grid-column:span 2;} .andy-videokachel{position:relative;overflow:hidden;border-radius:16px;background:var(--ink);padding:0 !important;} .andy-videokachel .elementor-widget-video,.andy-videokachel .elementor-widget-container,.andy-videokachel .elementor-wrapper,.andy-videokachel .elementor-fit-aspect-ratio{height:100%;padding:0 !important;margin:0;} .andy-videokachel .elementor-widget-video{position:absolute;inset:0;width:100% !important;max-width:none !important;} .andy-videokachel .elementor-wrapper,.andy-videokachel .e-hosted-video{position:absolute !important;inset:0;width:100% !important;max-width:100% !important;height:100% !important;padding:0 !important;} .andy-videokachel video{width:100%;height:100%;object-fit:cover;display:block;} .andy-videokachel::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(10,30,28,.55));opacity:.65;pointer-events:none;} @media(max-width:960px){ .e-con.andy-gal{grid-template-columns:repeat(2,1fr);grid-auto-rows:170px;gap:14px;} .andy-kachel.big{grid-column:span 2;grid-row:span 1;} .andy-kachel.wide{grid-column:span 2;} } /* ---- Kopfzeile: transparent oben, weiss nach dem Scrollen ---- Bewusst OHNE ::before: Elementor belegt dieses Pseudoelement am Header bereits selbst als Clearfix, das ueberschreibt sonst unsere Deckkraft. Auch ohne backdrop-filter, damit der Header kein Bezugsrahmen fuer das fixierte Menue-Panel wird. */ body:not(.elementor-editor-active) header.elementor-location-header{position:fixed;top:0;left:0;right:0;z-index:100;} /* Flaeche und Textfarben der Kopfzeile setzt andy.js direkt am
. Der innere Elementor-Container nimmt keine fremden Hintergruende an, auch nicht per Inline-Stil mit !important. */ header.andy-scrolled .elementor-nav-menu a.elementor-item,header.andy-scrolled .andy-tel a,header.andy-scrolled .andy-tel .elementor-button-text{color:var(--ink) !important;} header.andy-scrolled .elementor-menu-toggle{color:var(--ink) !important;} @media(max-width:960px){ .andy-tel{display:none !important;} } /* ---- Sicherung gegen seitliches Ueberlaufen auf kleinen Bildschirmen ---- */ @media(max-width:767px){ .elementor-element.elementor-widget__width-initial{max-width:100% !important;} .e-con,.e-con-inner{max-width:100%;} .andy-header .elementor-button{padding:12px 18px !important;font-size:14px !important;} } /* ---- Formular: Leitungsfrage nur bei Wasserenthaertung ---- */ /* Elementor haengt an jede Feldgruppe elementor-field-group-, das ist verlaesslicher als die frei vergebene CSS-Klasse, die am