/*Copyright (C) WEBDESIGN-TODAY, https://www.webdesign-today.de - custom.css*/ /*CSS-ASSETS – GLOBAL | Gültig für alle Seiten und Layouts*/ /* ========================================================= 01 – CSS-ASSETS – VENDOR Externe / Drittanbieter Styles (lokal eingebunden) ========================================================= */ /* ========================================================= 02 – SETTINGS Globale Variablen (Farben, Schriftgrößen, Abstände) ========================================================= */ /* ========================================================= 03 – FONTS & TYPOGRAFIE Schriftarten, Icon Fonts, Font Awesome ========================================================= */ @font-face{font-family:'Roboto';src:url('../fonts/roboto/Roboto-VariableFont_wdth,wght.woff2')format('woff2');font-weight:100 900;font-style:normal;font-display:swap} @font-face{font-family:'Roboto';src:url('../fonts/roboto/Roboto-Italic-VariableFont_wdth,wght.woff2')format('woff2');font-weight:100 900;font-style:italic;font-display:swap} body,button,input,select,textarea,h1,h2,h3,h4,h5,h6,p,li,span,a,div,section,article,aside,th,td,#sp-menu,.sp-megamenu-parent,.sp-megamenu-child,.sp-megamenu-parent>li>a,.sp-pagebuilder,.sppb-addon,.sp-mobile-menu,.burger-menu{font-family:"Roboto",system-ui,sans-serif!important} small,.small,h6,.fs-6{font-size:.875rem!important} .text-muted{color:#576574!important} /*Später für Icons*/ /*#mod-custom124 i{color:#fff;font-size:clamp(2rem, 5vw + 0.5rem, 6rem)}*/ /* ========================================================= 04 – ACCESSIBILITY Skip-Link, Focus Styles, Screenreader Helpers ========================================================= */ .skip-link{position:fixed;top:10px;left:10px;transform:translateY(-150%);padding:0.6em 1em;background-color:#615d5c;border:2px solid #b8dc7c;text-decoration:none;border-radius:4px;z-index:1000} .skip-link:focus,.skip-link:focus-visible{transform:translateY(0);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px} .skip-link,.skip-link:visited,.skip-link:focus,.skip-link:focus-visible{color:#fff} /* ========================================================= 05 – BASIS-STYLES Body, Links, Listen, Bilder, Tabellen, HTML-Elemente ========================================================= */ /* ========================================================= 06 – LAYOUT – GLOBAL Container, Grid, Section-Abstände ========================================================= */ /* ========================================================= 07 – UI – BUTTONS & INTERAKTION Buttons, Links, Hover-Effekte, Call-to-Action ========================================================= */ .btn-primary{border-color:#b8dc7c;background-color:#b8dc7c;color:#252525} .btn-primary:hover{background-color:#615d5c!important;border-color:#615d5c!important;color:#fff!important} /* ========================================================= 08 – UI – FORMULARE Inputs, Selects, Labels, Textareas, Formularlayout ========================================================= */ /* ========================================================= 09 – TEMPLATE – TOP-BAR Top-Bar Module (sehr oben: z.B. Zusatzinfos, Social Icons) ========================================================= */ /* ========================================================= 10 – TEMPLATE – HEADER Header, Logo, Navigation, Menü ========================================================= */ #sp-menu,.sp-megamenu-parent{position:static} .sp-megamenu-parent .sp-dropdown.sp-dropdown-main{max-width:100%;box-sizing:border-box} .sp-dropdown{padding-top:6px} .sp-dropdown a{font-weight:400!important;padding:6px 12px;transition:color 0.3s ease,text-decoration-color 0.3s ease} .sp-dropdown a:hover{font-weight:500!important;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px} .sp-megamenu-parent .sp-mega-group>li>a{text-transform:none} .mmlei + .sp-dropdown .row>.col-sm-4:nth-child(2){border-left:1px solid rgb(0 0 0 / 0.06);border-right:1px solid rgb(0 0 0 / 0.06)} .offcanvas-menu .offcanvas-inner ul.menu>li{border-bottom:1px solid rgba(0, 0, 0, 0.1)} /*.offcanvas-menu .menu-toggler::after {font-family:"Font Awesome 5 Free"!important; content:"\f105" !important;color:#252525!important;display:flex;justify-content:center;align-items:center;height:100%}*/ /* ### Code kann bis auf Farbe evtl. gelöscht werden!!! ### */ /*.offcanvas-menu li.menu-parent-open>*>.menu-toggler::after,.offcanvas-menu li.menu-parent[aria-expanded=true]>*>.menu-toggler::after{content:"\f107"!important}*/ /* ### Code kann bis auf Farbe evtl. gelöscht werden!!! ### */ .offcanvas-menu .menu-toggler{border-left:1px solid rgba(37,37,37,0.2);width:60px;height:100%;display:flex;align-items:center;justify-content:center} .offcanvas-menu .offcanvas-inner ul.menu>li>a{padding:14px 0 14px 14px} .offcanvas-menu .offcanvas-inner ul.menu>li>ul li a{padding:12px 0 12px 8px;display:block} /*NEW CODE → erforderlihc durch Update von 2.2.5 auf 2.2.6*/ .menu.nav-pills > li > a{text-align:unset} /*Sonst ausrichtung nach rechts = Fehlerhaft im Off-Canvas Menu*/ /*SAV Code*/ /*Nur so Breit wie Layout → aber volle Briet im Layout abzüglich etwas Margin links/rechts via Boostrap + korrekt zentriert + !important nur einsetzen wenn erforderlich*/ /*#sp-menu,.sp-megamenu-parent{position:static}*/ /*.sp-megamenu-parent .sp-dropdown.sp-dropdown-main{max-width:100vw;box-sizing:border-box}*/ /* Full width → immer volle Bildschirmbreite etwas Margin links/rechts via Boostrap + korrekt zentriert + !important nur einsetzen wenn erforderlich → hier nur bei left:50% erforderlich */ /*#sp-menu,.sp-megamenu-parent{position:static}*/ /*.sp-megamenu-parent .sp-dropdown.sp-dropdown-main.sp-menu-full{left:50%!important;width:100vw;max-width:100vw;transform:translateX(-50%);box-sizing:border-box}*/ /* nur Menü-Container-Padding killen = Mega Menu geht bis an den Rand*/ /*.sp-megamenu-parent .container,.sp-megamenu-parent .container-fluid{padding-left:0!important;padding-right:0!important}*/ /* ========================================================= 11 – TEMPLATE – HERO / BANNER Hero Sections, Page Header, große Bannerbereiche ========================================================= */ /*Startseite - Hintergrundvideo*/ #mod-custom124{ position: relative; display: flex; flex-direction: column; /* Ordnet Überschrift und Subtext sauber untereinander an */ justify-content: center; /* Zentriert die Inhalte perfekt vertikal (von oben nach unten) */ align-items: center; /* NEU: Zentriert die Inhalte perfekt horizontal (von links nach rechts) */ height: 75dvh; /* Optimiert: Nutzt 100% der dynamischen Bildschirmhöhe */ min-height: 300px; overflow: hidden; padding: 0 20px; /* Sicherheitsabstand zu den Bildschirmrändern für Smartphones */ box-sizing: border-box; color:#fff; text-align:center} #mod-custom124 .bgv { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; z-index: -1} /* Deine originale Schriftgröße - TITEL BLEIBT IN EINER ZEILE */ #mod-custom124 .hero-title { font-size: clamp(1.5rem, 4vw, 4.5rem); font-weight: 800; line-height: 1.15; margin-bottom: 20px; text-shadow: 2px 2px 20px rgba(0, 0, 0, 0.8)} /* Deine originale Schriftgröße - SUBTITLE */ #mod-custom124 .hero-subtitle { font-size: clamp(1.2rem, 1.5vw, 2rem); font-weight: 400; line-height: 1.4; text-shadow: 1px 1px 10px rgba(0, 0, 0, 0.8); margin: 0 auto} /*Leistungen → dort alle Seiten - Hintergrundbild*/ #sp-hero-leistungen{position:relative;height:75svh;background-size:cover;background-position:center; background-repeat:no-repeat} /*Stylt die Section*/ .bitv #sp-hero-leistungen{background-image:url('/images/de/bilder/leistungen/thermische-verwertung/muell-schwelbrennanlage.webp')}/*bitv = background image thermische verwertung | Hintergrundbild Hero-Bereich Seite Thermische Verwertung*/ .bida #sp-hero-leistungen{background-image:url('/images/de/bilder/leistungen/dachdeckerarbeiten/dachdecker-dachziegel.webp')}/*bida = background image dachdeckerarbeiten | Hintergrundbild Hero-Bereich Seite Dachdeckerarbeiten*/ .bire #sp-hero-leistungen,.bivb #sp-hero-leistungen,.bigl #sp-hero-leistungen,.bias #sp-hero-leistungen{display:none!important} /* ========================================================= 12 – TEMPLATE – TOP-A / TOP-B MODULE Module direkt unter Hero / Banner, über den Systemmeldungen ========================================================= */ /* ========================================================= 13 – TEMPLATE – SYSTEMMELDUNGEN Joomla System Messages (Success, Warning, Error, Info) Direkt über dem Component-Bereich ========================================================= */ /* ========================================================= 14 – TEMPLATE – CONTENT / COMPONENT Joomla-Komponenten, Beiträge, Kategorien, Bloglayouts ========================================================= */ /*Seite Kontakt*/ /* WRAPPER: Das Herzstück des Layouts. - Durch 'display: flex' erhalten alle Cards einer Zeile automatisch die gleiche Höhe (Standardverhalten 'align-items: stretch'). - 'justify-content: center' sorgt dafür, dass die Gruppe als Ganzes mittig sitzt. */ .card-wrapper { display: flex; flex-wrap: wrap; justify-content: center; /* DER FLEXIBLE ABSTAND (Horizontal & Vertikal getrennt): - 1. Wert (Vertikal): 3.5vw hält die Zeilen kompakt für den Team-Zusammenhalt. - 2. Wert (Horizontal): 8vw simuliert das luftige 'Space-around'-Gefühl. Ändere die '8vw' oder '8rem', wenn du noch mehr oder weniger Weite willst. */ gap: clamp(1.5rem, 3.5vw, 4.5rem) clamp(1.5rem, 8vw, 8rem); } /* CARD: Die Einzel-Box. - 'flex: 0 1 20rem': '0' (grow) verhindert, dass die 8. Karte in der letzten Reihe "fett" wird. '1' (shrink) erlaubt das scaling auf kleinen Schirmen. '20rem' ist deine Basis-Breite (ca. 320px). Erhöhe dies auf 22rem, wenn die Cards breiter sein sollen. */ .card-wrapper .card { flex: 0 1 20rem; border: none; border-radius: 8px; overflow: hidden; /* Box-Shadow: Erzeugt Tiefe, damit die Karten hochwertig auf der Seite liegen. */ box-shadow: 0 4px 15px rgba(0,0,0,0.08); } /* --- Individuelles Design (Bilder & Offsets) --- */ .card-hero { height: 120px; background-image: url('/images/ChatGPT%20Image%201.%20Mai%202026%2021_11_42.png'); background-size: cover; background-position: center; } .profile-wrapper { /* Negativer Margin zieht das Bild nach oben in den Hero-Bereich (Überlappung) */ margin-top: -60px; display: flex; justify-content: center; } .profile-img { /* clamp macht das Bild responsiv: Es schrumpft auf Handys automatisch mit */ width: clamp(80px, 25vw, 120px); height: clamp(80px, 25vw, 120px); object-fit: cover; border-radius: 50%; border: 4px solid #fff; box-shadow: 0 4px 12px rgba(0,0,0,0.15); background: #fff; } .card-body { display: flex; flex-direction: column; /* flex-grow: 1 füllt den Raum aus, damit der Button (unten) immer auf gleicher Höhe ist */ flex-grow: 1; padding: 1.5rem; } /* --- Interaktionen & Links --- */ .contact-info a { color: #252525; text-decoration: underline !important; text-decoration-thickness: 2px !important; text-underline-offset: 3px; text-decoration-color: transparent !important; /* TRANSITION: Verhindert hartes Umspringen. 0.4s wirkt geschmeidig und edel. */ transition: color 0.4s ease, text-decoration-color 0.4s ease; } .contact-info a:hover { /* Blendet die Unterstreichung beim Drüberfahren sanft ein */ text-decoration-color: #252525 !important; } /* BUTTON-STYLING: - 'margin-top: auto' ist der Anker, der den Button immer an das untere Ende schiebt. */ .card-body .btn-primary { margin-top: auto; padding: 10px; /*background-color: #b8dc7c !important;*//*Farben werden unter Punkt 07 definiert*/ border: none; /*color: #252525;*//*Farben werden unter Punkt 07 definiert*/ /* TRANSITION: Macht den Farbwechsel beim Hover 'weich' statt abrupt. */ transition: background-color 0.4s ease, color 0.4s ease; } /*Wird unter Punkt 07 für buttons gelöst*/ /*.card-body .btn-primary:hover { background-color: #615d5c !important; color: #fff; }*/ .mv{display:flex;justify-content:center;height:100%}/*mv = marion vogel | Erfordelrich aufgrund fehlender Telefonnummern etc... das Button unten am Card-Ende ausgerichtet wird..*/ /*Seite Zertifikate*/ /* --- Bootstrap Pop-up: Design & Schutz für die Zertifikats-Bilder --- */ /* Der innere Kasten im Pop-up, der die WebP-Bilder scrollbar macht */ .pdf-safe-container { position: relative; /* Wichtig: Verankert das unsichtbare Schutzschild exakt hierüber */ width: 100%; /* Nutzt die volle Breite des Bootstrap-Pop-ups */ height: 75vh; /* Nutzt flexibel 75% der jeweiligen Bildschirmhöhe (perfekt für PC & Handy) */ overflow-y: auto; /* Aktiviert den vertikalen Scrollbalken für die 3 Seiten im Pop-up */ -webkit-overflow-scrolling: touch; /* Erlaubt flüssiges Scrollen auf iPhones und iPads */ background: #fcfcfc; /* Heller, neutraler Hintergrund hinter den Dokumenten-Seiten */ } /* Das unsichtbare Schutzschild (Der Kopierschutz-Trick) */ .pdf-overlay { position: absolute; /* Löst die Ebene vom Textfluss und legt sie starr über die Bilder */ top: 0; left: 0; /* Startet exakt oben links im Kasten */ width: 100%; height: 100%; /* Deckt die komplette scrollbare Fläche ab */ z-index: 10; /* Legt sich wie eine Glasscheibe über die Bilder (verhindert Anklicken) */ background: transparent; /* Komplett unsichtbar, damit man das Zertifikat lesen kann */ pointer-events: auto; /* Fängt alle Klicks, Berührungen und Rechtsklicks aktiv ab */ /* Blockiert die Textmarkierung und das Kopieren in allen Browsern */ -webkit-touch-callout: none; /* Verhindert das Halte-Menü auf Apple-Geräten (iOS) */ -webkit-user-select: none; /* Safari, Chrome, Opera */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* Edge / Internet Explorer */ user-select: none; /* Moderner Standard-Befehl für aktuelle Browser */ } /* ========================================================= 15 – TEMPLATE – SIDEBAR Sidebar Modulpositionen (Left / Right) ========================================================= */ /* ========================================================= 16 – TEMPLATE – BOTTOM-A / BOTTOM-B MODULE Module direkt unter dem Component-Bereich, vor dem Footer ========================================================= */ /* ========================================================= 17 – TEMPLATE – FOOTER Footer, Copyright, Footer Navigation ========================================================= */ /*#sp-footer-1{padding:1.5em 1em}*//*Schriftfarbe im Footer, ausgenommen Links | Innenabstand Footer-Section | Medie Queries vorhanden → entfältt da via Boostrap Class*/ #sp-footer-1 h2{margin-bottom:20px;padding-bottom:10px;border-bottom:1px solid #fff;position:relative}/*Unterstrich für h2 headings, relative erforderlich um :after Element (kleiner grüner Strich) absolut positionieren zu können | margin → Außenabstand unten am Titel, padding Innenabstand unten vom Titel = linie unten mehr Abstand*/ #sp-footer-1 h2::after{top:95%;content:"";height:3px;left:0;position:absolute;width:30px;background-color:#b8dc7c} /*#sp-footer-1 .sp-column{padding:1em}*/ /*Innenabstand Splate, welche DIV-Container mit Inhalten wie Adresse etc.. enthält*/ #sp-footer-1 a:hover,#sp-footer-1 a:focus-visible {text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}/*Fügt Links im Footer einen 2px starken Unterstrich beim hovern mit der Mouse oder ansteuern mit der Tastatur hinzu. Weiterhin hat der Unterstrich einen Abtsnad zum Text von 3px*/ #sp-footer-1 ul{margin:0;padding:0;display:flex;flex-direction:column;gap:20px}/*DIV-Container Footer mit Links entfernt dein Innen-Außenabstand der unsortierten Liste | einzelne Menüpunkte erhalten via gap automatisch Abstand zueiander*/ #sp-footer-1 li{list-style:none}/*entfernt die automatischen Aufzählungszeichen*/ #sp-footer-1 a i{margin-right:.6em} #sp-copyright{text-align:center} /* ========================================================= 18 – TEMPLATE – BACK TO TOP Scroll-to-Top Button ========================================================= */ /* ========================================================= 19 – ERWEITERUNGEN Drittanbieter Erweiterungen / Joomla Komponenten ========================================================= */ /* ========================================================= 20 – SEITEN – STARTSEITE Styles nur für die Homepage ========================================================= */ /* ========================================================= 21 – SEITEN – KONTAKT Styles nur für die Kontaktseite ========================================================= */ /* ========================================================= 22 – SEITEN – BLOG / BEITRÄGE Bloglayouts, Kategorien, Beitragsseiten ========================================================= */ /* ========================================================= 23 – UTILITIES Helper-Klassen (text-center, spacing, visibility) WICHTIG: Können alles überschreiben (Override-Layer) ========================================================= */ /* ========================================================= 24 – RESPONSIVE – DESKTOP Anpassungen ab 1200px ========================================================= */ /* ========================================================= 25 – RESPONSIVE – TABLET Anpassungen 768px – 1199px ========================================================= */ /* ========================================================= 26 – RESPONSIVE – SMARTPHONE Anpassungen bis 767px ========================================================= */ /* ========================================================= 27 – MEDIA QUERIES – SPEZIAL Einzelne Breakpoints / Sonderfälle ========================================================= */ /*@media(min-width:768px){#sp-footer-1{padding:1.7em 1.2em}}*//*Enfällt da via Boostrap gelöst - Gültig für Footer-Section*/