/*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:'Open Sans';src: url('../fonts/open_sans/OpenSans-Italic-VariableFont_wdth,wght.woff2') format('woff2'); font-weight: 100 900; font-style: italic; font-display: swap; } @font-face { font-family: 'Open Sans'; src: url('../fonts/open_sans/OpenSans-VariableFont_wdth,wght.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face{font-family:'Montserrat';src:url('../fonts/montserrat/Montserrat-Italic-VariableFont_wght.woff2')format('woff2');font-weight:100 900;font-style:italic;font-display:swap}/*new code*/ @font-face{font-family:'Montserrat';src:url('../fonts/montserrat/Montserrat-VariableFont_wght.woff2')format('woff2');font-weight:100 900;font-style:normal;font-display:swap}/*new code*/ body,button,input,select,textarea,h1,h2,h3,h4,h5,h6,p,li:not([class*="fa-"]),span:not([class*="fa-"]):not([class*="fas"]):not([class*="far"]):not([class*="fab"]):not([class*="fa"]),a:not([class*="fa-"]):not([class*="fa"]),div:not([class*="fa-"]):not([class*="fa"]),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:"Open Sans",system-ui,sans-serif!important} small,.small,h6,.fs-6{font-size:.875rem!important} .text-muted{color:#576574!important} body{font-size:16px!important;line-height:1.65!important} .sp-megamenu-parent>li>a,.sp-megamenu-parent>li>.sp-menu-heading{font-size:16px!important}/*new code → gültig auch für menüüberschriften*/ .sp-megamenu-parent .sp-mega-group>li>a{margin-bottom:clamp(10px, 1vw, 12px)!important} .sp-dropdown a{padding:clamp(10px, 1vw, 15px)12px!important} h1,.modal-header h1{font-size:clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem)!important;line-height:1.15!important;font-weight:400!important} h2,.modal-header h2{font-size:clamp(1.4rem, 1.2rem + 0.8vw, 2rem)!important;line-height:1.2!important;font-weight:500} h3,.modal-header h3{font-size:clamp(1.2rem, 1.1rem + 0.5vw, 1.625rem)!important;line-height:1.25!important;font-weight:500} h4,.modal-header h4{font-size:clamp(1.1rem, 1.05rem + 0.3vw, 1.25rem)!important;line-height:1.3!important;font-weight:500} h5,.modal-title,.modal-header h5{font-size:clamp(1.05rem, 1.01rem + 0.15vw, 1.125rem)!important;line-height:1.3!important;font-weight:600} h6,.modal-header h6{font-size:clamp(1rem, 1rem + 0vw, 1rem)!important;line-height:1.3!important;font-weight:600} /*Umbruch Subline H1-Header*/ /* 1. DER UMBRUCH: Zwingt die gesamte Subline in die zweite Zeile */ .heading-subline { display: block; /* Das ist der magische Befehl für den Zeilenumbruch */ width: 100%; /* Nutzt die volle Breite der Überschrift */ margin-top: 10px; /* Optional: Sauberer Abstand nach oben zum Haupttitel */ } /* 2. TEXTFLUSS: Stellt sicher, dass die Wörter in ihren Zeilen normal fließen */ .heading-word, .subline-word { display: inline; /* Verhindert, dass jedes einzelne Wort umbricht */ } /*Gültig für die 4 Module im Footer hier speziel für die Icons*/ /* Gemeinsame Basis für alle Icons vor den Footer-Modultiteln */ #sp-fs-1 .sp-module-title:before, #sp-fs-2 .sp-module-title:before, #sp-fs-3 .sp-module-title:before, #sp-fs-4 .sp-module-title:before { font-family: "Font Awesome 6 Free"; font-weight: 900; margin-right: 0.5em; color: #ffffff !important; /* Weiß für perfekten Kontrast auf Dunkelgrau */ } /* Spalte 1: Standort & Kontakt (ID 110) */ #sp-fs-1 .sp-module-title:before { content: "\f3c5"; /* fa-location-dot (Standort-Nadel) */ } /* Spalte 2: Leistungen (Ersetze X mit deiner Modul-ID) */ #sp-fs-2 .sp-module-title:before { content: "\f085"; /* fa-gears (Zahnräder) */ } /* Spalte 3: Unternehmen (Ersetze Y mit deiner Modul-ID) */ #sp-fs-3 .sp-module-title:before { content: "\f0c0"; /* fa-users (Team) */ } /* Spalte 4: Direkt anfragen (Ersetze Z mit deiner Modul-ID) */ #sp-fs-4 .sp-module-title:before { content: "\f086"; /* fa-comments (Zwei Sprechblasen für die UX-Sprechblase) */ } /* ========================================================= 04 – ACCESSIBILITY Skip-Link, Focus Styles, Screenreader Helpers ========================================================= */ /* ========================================================= 05 – BASIS-STYLES Body, Links, Listen, Bilder, Tabellen, HTML-Elemente ========================================================= */ /* ========================================================= 06 – LAYOUT – GLOBAL Container, Grid, Section-Abstände ========================================================= */ /* ========================================================= 07 – UI – BUTTONS & INTERACTION Buttons, Links, Hover-Effekte, Call-to-Action ========================================================= */ /* ========================================================= 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-header,#sp-header .logo{height:auto!important} #sp-header{border-bottom:1px solid #004e9F;padding:1em 0} #sp-header .logo-image{height: 46px} #sp-menu .sp-megamenu-parent>li>a,#sp-menu .sp-megamenu-parent>li>.sp-menu-heading{font-weight:700;color:#004E9F;padding:5px clamp(10px,1.5vw,25px);cursor:pointer} #sp-menu .sp-dropdown{width:auto!important;min-width:240px!important;max-width:290px!important} #sp-menu .sp-dropdown .sp-dropdown-inner{background-color:#004e9f!important;padding:0!important} #sp-menu .sp-dropdown-items{display:grid!important;grid-auto-rows:1fr!important} #sp-menu .sp-dropdown-items a{color:#fff!important;font-weight:500!important;display:flex!important;justify-content:center!important;align-items:center!important;text-align:center!important;height:100%!important} #sp-menu .sp-dropdown-items a:hover,#sp-menu .sp-dropdown-items .active a{background-color:#fff!important;color:#004e9f!important} /* 2. Größere Smartphones / Querformat (ab 576px) */ @media (min-width: 576px) { #sp-header .logo-image { height: 50px; } } /* 3. Tablets (ab 768px) - Hier wird es spürbar größer */ @media (min-width: 768px) { #sp-header .logo-image { height: 60px; } } /* 4. Laptops / Kleine Monitore (ab 992px) */ @media (min-width: 992px) { #sp-header .logo-image { height: 70px; } } /* 5. Große Desktops (ab 1200px) */ @media (min-width: 1200px) { #sp-header .logo-image { height: 100px; /* Schöne präsente Desktop-Größe */ } } /* ========================================================= 11 – TEMPLATE – HERO / BANNER Hero Sections, Page Header, große Bannerbereiche ========================================================= */ /* Definiert den Container als Basis für die absolute Positionierung */ #sp-header .container { position: relative; } /* Erzeugt das SVG-Element oben rechts innerhalb des Containers */ #sp-header::after { content: ""; position: absolute; top:-26px; /* Fixiert das Element am oberen Rand des Containers */ right:0; /* Bündig am rechten Rand des Containers */ z-index:1; width: clamp(100px, 35vw, 285px); /* Schützt vor dem Höhen-Kollaps bei Hintergrundbildern */ height: auto; aspect-ratio: 1 / 1; /* Hier das Breiten- zu Höhenverhältnis deines SVGs eintragen (z.B. 1/1 oder 16/9) */ pointer-events: none; /* Macht das Element für Klicks unsichtbar */ /* Der Pfad zu deiner SVG-Datei im Joomla-Medienverzeichnis */ background-image: url('/images/de/bilder/welle/blau-weisse-welle.svg'); background-size: contain; background-repeat: no-repeat; background-position: right top; } /* ========================================================= 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 ========================================================= */ /* SEITE TEAM: TEAM-CARDS UNABHÄNGIG VON BOOTSTRAP */ /* SECTION-HEADER: Steuert den großzügigen, flexiblen Abstand (3.5rem bis 5rem) nach oben zur nächsten Abteilung */ .section-header{margin:clamp(3.5rem,8vw,5rem) 0 1rem 0} /* Erster Header auf der Seite benötigt keinen massiven Abstand nach oben */ .section-header:first-of-type{margin-top:0} /* SECTION-SUBTITLE: Spürbar mehr Abstand nach oben zur H2 und den Abstand nach unten knackig austariert */ .section-header .section-subtitle{margin:0.6rem 0 1.5rem 0;color:#64748b;font-weight:400;line-height:1.4} /* WRAPPER: Das Herzstück des Layouts. Ein einziger clamp()-Wert steuert das flexible Wachstum in beide Richtungen (horizontal & vertikal) synchron bis maximal 4.5rem. */ .card-wrapper{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:clamp(1.5rem,5vw,4.5rem)} /* CARD: Einzel-Box mit flexiblem Shrink-Verhalten und Schatten */ .card-wrapper .card{position:relative;overflow:hidden;flex:0 1 25rem;background:#fff;border:1px solid #004e9f;border-radius:12px;box-shadow:0 4px 15px rgba(0,0,0,.06)} /* CARD-HEADER: Strukturierte Ausrichtung für Profil-Icon und Namen */ .card-wrapper .card-header{display:flex;align-items:center;gap:1rem;padding:1.5rem;background-color:#f8fafc;border-bottom:1px solid #e2e8f0} /* Das runde Profil-Icon als Kreis */ .card-wrapper .card-header-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:56px;height:56px;background-color:#004e9f;border-radius:50%} /* Das Icon innerhalb des Kreises */ .card-wrapper .card-header-icon i{color:#fff;font-size:1.5rem} /* Name des Mitarbeiters: Optimierte Outside-In-Reihenfolge */ .card-wrapper .card-header h3{margin:0 0 .25rem;color:#004e9f;font-size:clamp(1.05rem, 1.01rem + 0.15vw, 1.125rem)!important;font-weight:700} /* Funktion / Position */ .card-wrapper .card-header p{margin:0;color:#334155;font-size:0.85rem} /* Card-Body Hauptcontainer */ .card-wrapper .card-body{position:relative;text-align:left;padding:1.5rem} /* Container für Kontaktdaten oberhalb der Welle */ .card-wrapper .contact-info{display:flex;flex-direction:column;gap:1rem;position:relative;margin-bottom:20px;z-index:2;font-size:0.95rem} /* Einzelne Info-Zeile für Icon, Text und Link */ .card-wrapper .contact-info .info-row{display:flex;align-items:center;gap:1rem;color:#2d3748} /* FontAwesome Icons in den Zeilen zentriert */ .card-wrapper .contact-info .info-row i{width:16px;text-align:center;font-size:1.1rem;color:#004e9f} /* Die Telefon- und E-Mail-Links standardmäßig dunkel */ .card-wrapper .contact-info .info-row a{font-weight:500;color:inherit;word-break:break-word} /* Spezifische blaue Farbe für E-Mail-Links */ .card-wrapper .contact-info .info-row a[href^="mailto:"]{color:#004e9f} /* --- Interaktionen & Links (Ruhezustand: Unterstreichung mit Gewalt unsichtbar schalten) --- */ .card-wrapper .contact-info .info-row a{text-decoration:underline!important;text-decoration-thickness:2px!important;text-underline-offset:3px;text-decoration-color:transparent!important;transition:text-decoration-color .4s ease} /* --- Hover-Effekt: Blendet die Unterstreichung mit !important in der originalen Linkfarbe ein --- */ .card-wrapper .contact-info .info-row a[href]:hover{text-decoration-color:currentColor!important} /* Design-Element Welle absolut unten rechts im Hintergrund */ .card-wrapper .card-body .design-wave{position:absolute;bottom:-13px;right:0;z-index:1;width:clamp(100px,35vw,150px);height:auto;opacity:0.95;transform:scaleY(-1);pointer-events:none} /* Hilfsklasse für Screenreader: Macht Text unsichtbar, hält ihn aber maschinenlesbar */ .visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} /* ========================================================= 14 – TEMPLATE – CONTENT / COMPONENT Joomla-Komponenten, Beiträge, Kategorien, Bloglayouts ========================================================= */ /* ========================================================= 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{background-color:#333333!important;color:#ffffff!important} #sp-footer h2{margin-bottom:clamp(1.25rem,3vw,2rem)} #sp-footer .btn{background-color:#004e9f!important;border-color:#004e9f!important;display:block;width:100%;margin-top:1.8rem} #sp-copyright-bar{background-color:#004e9f!important;color:#ffffff!important} #sp-footer ul, #sp-copyright-bar ul{margin:0;padding:0;display:flex;flex-direction:column;gap:20px} #sp-footer li,#sp-copyright-bar li{list-style:none} #sp-footer a, #sp-copyright-bar a{color:#fff!important} #sp-footer a:hover,#sp-copyright-bar a:focus-visible{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px} #sp-footer i{margin-right:.5em} #sp-copyright-bar nav{display:flex;flex-wrap:wrap;justify-content:center;gap:25px} /* Ab Desktop-Größe (ab 992px) wieder linksbündig ausrichten */ @media(min-width:992px){#sp-copyright-bar nav{justify-content:flex-start}} /* ========================================================= 18 – TEMPLATE – BACK TO TOP Scroll-to-Top Button ========================================================= */ .sp-scroll-up{background-color:#004e9f!important;border-radius:0.375rem} .sp-scroll-up:hover{background-color:#003366!important} /* ========================================================= 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 ========================================================= */ /*h1-Titel - spicht subline (text nach bindstrich) an, färbt den text blau ein und macht in fetter, gültig für alle seiten wo der h1 eun subline hat*/ h1 .heading-subline{color:#004E9F;font-weight:600} /* ========================================================= 23 – UTILITIES Helper-Klassen (text-center, spacing, visibility) WICHTIG: Können alles überschreiben (Override-Layer) ========================================================= */ /* ========================================================= 24 – RESPONSIVE – DESKTOP Anpassungen ab 1200px ========================================================= */ @media (min-width:1400px) { .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl { max-width:1400px } }/*Template wird breiter*/ /* ========================================================= 25 – RESPONSIVE – SMARTPHONE Anpassungen bis 767px ========================================================= */ /* ========================================================= 26 – RESPONSIVE – TABLET Anpassungen 768px – 1199px ========================================================= */ /* ========================================================= 27 – RESPONSIVE – TABLET Anpassungen ab 768px ========================================================= */ /* ========================================================= 28 – MEDIA QUERIES – SPEZIAL Einzelne Breakpoints / Sonderfälle ========================================================= */ @media(min-width:576px){#sp-footer .btn{display:inline-block;width:auto}} @media(min-width:992px){#sp-menu>div:first-of-type{transform:translateY(30px)}#sp-footer .btn{display:block;width:100%}#sp-copyright-bar nav{justify-content:flex-start}}