/* Vorschau Grafik- Artikel */ .sppb-addon-article-layout-content img { width: 100%; height: 350px; /* oder exakt 534px, wenn du fix willst */ object-fit: cover; } /* Footer-Menü Abstand */ #sp-footer ul.menu { padding: 50px 0px; } /* Schriftgröße Footer-Menü */ #sp-footer ul.menu li a { font-size: 14px; } /* Webaudentifikation - Button */ .plg_system_webauthn_login_button { background-color: white !important; color: black !important; border: 1px solid black !important; border-radius: 0px !important; font-size: 14px !important; padding: 6px 16px !important; font-weight: 500 !important; line-height: 1.6 !important; text-decoration: none !important; box-shadow: none !important; font-family: Arial, sans-serif !important; transition: all 0.3s ease !important; width: 200px !important; text-align: center !important; display: inline-block !important; } .plg_system_webauthn_login_button:hover { background-color: black !important; color: white !important; } /* LOGIN - Button */ button.btn.btn-primary[type="submit"] { background-color: white !important; color: black !important; border: 1px solid black !important; border-radius: 0px !important; font-size: 14px !important; padding: 6px 16px !important; font-weight: 500 !important; line-height: 1.6 !important; text-decoration: none !important; box-shadow: none !important; font-family: Arial, sans-serif !important; transition: all 0.3s ease !important; width: 200px !important; height: 48px !important; text-align: center !important; display: inline-block !important; max-width: 200px !important; } button.btn.btn-primary[type="submit"]:hover { background-color: black !important; color: white !important; } .icon-eye::before { content: "\f06e"; /* Auge offen */ font-family: "Font Awesome 5 Free"; font-weight: 900; } .icon-eye-slash::before { content: "\f070"; /* Auge durchgestrichen (eye-slash) */ font-family: "Font Awesome 5 Free"; font-weight: 900; } /* Kontaktformular */ .contact-form, .sign-up-form { margin: 10px; } .sppb-form-group label, label { padding: 12px; } .sppb-form-group label::before, label::before { margin: 15px; } .sppb-form-group input { padding: 15px !important; } .sppb-form-group select { margin: 15px; } .sppb-form-group textarea { height: 200px !important; margin: 15px; } .form-builder-checkbox-content { margin: 15px; } .form-builder-radio-content { margin: 15px; } .form-builder-radio-label { margin-left: 35px !important; display: inline-block; } .sppb-form-check-label { margin-left: 25px !important; display: inline-block; vertical-align: middle; } .form-builder-checkbox-item label::before, .form-builder-radio-item label::before, .sppb-addon-form-builder .sppb-form-check-label::before { content: ""; display: inline-block; border: 2px solid black; position: absolute; left: 5px; top: 1px; margin-right: 8px; } /* Checkbox aktiviert */ input[type="checkbox"]:checked + label::before, input[type="checkbox"]:checked + .form-builder-checkbox-label::before, input[type="checkbox"]:checked + .sppb-form-check-label::before { content: "✓"; position: absolute; left: 5px; top: 1px; background-color: black; color: white; font-size: 16px; font-weight: bold; line-height: 1; } /* Radiobutton aktiviert */ input[type="radio"]:checked + label::before, input[type="radio"]:checked + .form-builder-radio-label::before, input[type="radio"]:checked + .sppb-form-check-label::before { background-color: black; border-color: black; border-radius: 50%; /* Kreise für Radiobuttons */ } /* Schriftsettings weil es sonst nicht funktioniert */ /* Google Font laden – NUR falls du ihn nicht schon im geladen hast */ @import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap'); nav#sp-main-menu a { font-family: Arial, sans-serif !important; } /* Überschreibt gezielt die Schriftart in der Hauptnavigation */ .sp-megamenu-parent > li > a { font-family: Arial, sans-serif !important; font-weight: 500 !important; } /* Bilder in der Kundenrezessionen*/ .sppb-addon-content .sppb-img-container img[src*="nummern_klein_"] { max-width: 55px !important; max-height: 56px !important; width: 55px !important; height: 55px !important; object-fit: contain; display: block; margin: 0 auto; } /* Menu-Stil */ .sp-dropdown.sp-dropdown-main.sp-menu-right[style] { width: 540px !important; } .sp-menu-item > a { white-space: nowrap !important; max-width: 100%; } .sp-megamenu-parent .sp-menu > li.current-item.active > a { position: relative; } .sp-megamenu-parent .sp-menu > li.current-item.active > a::after { content: ""; position: absolute; left: 0; bottom: -5px; width: 100%; height: 2px; background-color: red; } /* Roter Strich - Untermenü - senkrecht */ .sp-megamenu-parent .sp-dropdown li.sp-menu-item > a::before { content: ""; display: inline-block; height: 16px; width: 2px; background-color: red; margin-right: 10px; /* Abstand zum Text */ transform: translateX(-5px); /* Positionierung nach links */ vertical-align: middle; opacity: 0; transition: opacity 0.2s ease; } .sp-megamenu-parent .sp-dropdown li.sp-menu-item > a:hover::before { opacity: 1; } /* Sandwich-Menu und Kontaktbutton - rechte Seite */ @media (max-width: 768px) { /* Kontaktbutton links oben */ #btn-fded724c-db91-493a-be3c-1958888219da { position: absolute; top: 12px; left: 12px; z-index: 9999; padding: 6px 16px; font-size: 15px; } /* Offcanvas/Hamburger-Button rechts oben */ #offcanvas-toggler { position: absolute; top: 12px; right: 12px; z-index: 9999; } /* Optional: damit Container keinen Overflow produziert */ .sppb-row { position: relative; } } /* roter strick - hoizontaler Strich im Main-Menu .sp-megamenu-parent .sp-menu > li.active > a::after { background-color: red !important; } .sp-megamenu-parent .sp-menu > li.current-item.active > a { position: relative; } .sp-megamenu-parent .sp-menu > li.current-item.active > a::after { content: ""; position: absolute; left: 0; bottom: -5px; width: 100%; height: 2px; background-color: red; } */ /* Spalten auf "about us" Seite */ .equal-boxes { display: flex; flex-wrap: wrap; gap: 20px; align-items: stretch; } /* Beide inneren Spalten gleich breit & Inhalt vertikal mittig */ .equal-boxes > div { flex: 1 1 50%; display: flex; flex-direction: column; justify-content: center; box-sizing: border-box; padding: 20px; } /* Responsive: Untereinander auf Tablet & Mobile */ @media (max-width: 991px) { .equal-boxes { flex-direction: column; } .equal-boxes > div { flex: 1 1 100%; } } /* Titel und Untertitel - hellroter Hintergrund beim Image overlay */ /* ────────────────────────────────────────────────────────────── Overlay-Titel & -Untertitel: Roter Hintergrund (#FF0000) mit 50 % Transparenz + etwas Padding ────────────────────────────────────────────────────────────── */ .overlay-image-title .sppb-addon-title, .overlay-image-title .sppb-addon-subtitle { background: rgba(0, 135, 101, 0.5); /* 50 % Deckkraft */ padding: 4px 8px; /* Innenabstand für Text */ } /* ────────────────────────────────────────────────────────────── Container der beiden Zeilen: ▸ Balken bleibt Textbreit (inline-flex) ▸ Elemente untereinander (flex-direction: column) ▸ Links ausrichten (align-items: flex-start) ────────────────────────────────────────────────────────────── */ .overlay-image-title { padding: 4px 8px; /* Außenabstand des Balkens */ display: inline-flex; /* für volle Breite „block“ wählen */ flex-direction: column; /* Titel & Untertitel stapeln */ align-items: flex-start; /* linksbündig */ } /* Veränderungen in Artikeln */ /* --- Artikel-Titel (H1) innerhalb einer Joomla-Artikelansicht überschreiben --- */ .view-article .article-details .article-header h1[itemprop="headline"] { font-size: 40px !important; /* Höhe laut Screenshot */ line-height: 40px !important; /* gleicher Zeilenabstand */ text-transform: uppercase !important; width: 90% !important; /* Breite einschränken */ margin-bottom: 45px !important; /* Abstand nach unten */ font-family: Arial, Helvetica, sans-serif !important; /* gleiche Schriftart */ } /* ========== Überschriften skalieren ========== */ /* --------- Gilt für JEDES H3 in einem SP Page Builder Text-Block --------- */ .sppb-addon-text-block h3 { font-family: Arial, Helvetica, sans-serif !important; font-size: 26px !important; /* Headlines im Fließtext */ line-height: 30px !important; font-weight: 700 !important; margin: 40px 0 16px !important; letter-spacing: -.01em; color: #717171 } /* ===== Überschrift im Heading-Addon (Wrapper hat class="hero-title") ===== */ /*.hero-title .sppb-addon-title { /* Wrapper → .hero-title, darin h3 */ /* font-family: Arial, Helvetica, sans-serif !important; /* font-size: 32px !important; /* Zielgröße 32 px */ /* line-height: 36px !important; /* Ziel-Zeilenhöhe 36 px */ /* font-weight: 700 !important; /* margin: 0 0 24px !important; /* text-align: center !important; /* falls gewünscht */ /* letter-spacing: -.02em; /*} /* Wrapper .hero-title → darin .sppb-addon-title */ .hero-title .sppb-addon-title { font-family: Arial, Helvetica, sans-serif !important; font-size: 32px !important; /* gleiche Größe wie H1 */ line-height: 36px !important; /* identische Zeilenhöhe */ /* font-weight: 700 !important; */ text-transform: uppercase !important; /* margin: 0 0 45px !important; /* gleicher Abstand unten */ text-align: center !important; letter-spacing: -.02em; /* kannst du beibehalten */ width: auto !important; /* 90 % entfernen */ max-width: 100%; /* volle Spaltenbreite zulassen */ margin-left: auto !important; /* zentriert, falls Breite reduziert wird */ margin-right: auto !important; text-align: center !important; /* Sicherheit */ } /* -------- Responsive leichter verkleinern -------- */ @media (max-width: 991.98px) { .hero-title .sppb-addon-title { font-size: 26px !important; line-height: 30px !important; } } /* ----- Zentrierung der gesamten Hero-Spalte ----- */ .hero-col { display: flex; /* macht die Spalte zum Flex-Container */ flex-direction: column; /* Elemente untereinander stapeln */ justify-content: center; /* vertikal zentrieren */ align-items: center; /* horizontal zentrieren */ text-align: center; /* Text & Button-Inhalt mittig setzen */ height: 100%; /* nutzt die volle Spaltenhöhe */ } /* optional: etwas Luft an den Seiten */ .hero-col > * { /* alle direkten Kinder (Heading, Button …) */ margin-left: 0; margin-right: 0; } .sppb-addon-title.sppb-feature-box-title { font-size: 32px !important; /* Höhe laut Artikel-H1 */ line-height: 32px !important; /* identischer Zeilenabstand */ text-transform: uppercase !important; /* Alles groß */ font-family: Arial, Helvetica, sans-serif !important; /* Schriftart wie Artikel */ width: 90% !important; /* Breite begrenzen */ margin-left: auto !important; /* Zentriert bei begrenzter Breite */ margin-right: auto !important; text-align: center !important; /* Sicherheitshalber zentriert */ margin-bottom: 45px !important; /* Abstand nach unten */ } .sppb-addon-text { font-family: Arial, Helvetica, sans-serif !important; font-size: 14px !important; line-height: 24px !important; color: #333333 !important; font-weight: normal !important; text-align: left !important; letter-spacing: 0 !important; word-break: normal !important; } .sppb-addon-text p { margin-bottom: 1em; } /* ----------------------------------------------------------- Einheitlicher Stil für alle Buttons/Links mit class="article-btn" ----------------------------------------------------------- */ /* ============================================================== Einheitlicher Artikel-Button – überschreibt Inline-Styles ============================================================== */ .article-btn { background-color: white !important; color: black !important; border: 1px solid black !important; border-radius: 0px !important; font-size: 14px !important; padding: 6px 16px !important; font-weight: 500 !important; line-height: 1.6 !important; text-decoration: none !important; box-shadow: none !important; font-family: Arial, sans-serif !important; transition: all 0.3s ease !important; width: 140px !important; text-align: center !important; display: inline-block !important; } .article-btn:hover { background-color: #f4f4f4 !important; color: darkgrey !important; border: 1px solid darkgrey !important; } /* ---------- Responsive Feinschliff ---------- */ @media (max-width:575.98px){ .article-btn{height:36px;padding:0 14px;font-size:13px;} } /* ----------------------------------------------------------- Bildunterschrift (Image-Addon) – exakt wie Body-Text ----------------------------------------------------------- */ .sppb-addon-single-image h4.sppb-addon-title { font-family: Arial, Helvetica, sans-serif !important; /* gleiche Schrift */ font-size: 14px !important; /* gleiche Größe */ line-height: 1.6 !important; /* gleicher Abstand */ font-weight: normal !important; /* nicht fett */ margin: 0 0 1em !important; /* Abstand unten */ text-align: left; /* linksbündig */ color: inherit !important; /* übernimmt Body-Farbe */ } /*---------------------------------------------------------------------- /* Slider-Überschriften auf 36 / 40 px vereinheitlichen */ /*------------------------------------------------------------------------ h2.sppb-sp-slider-title { font-family: Arial, Helvetica, sans-serif !important; font-size: 1.75rem; font-size: 36px !important; line-height: 50px !important; font-weight: 700 !important; text-transform: uppercase !important; text-align: center !important; letter-spacing: -.02em !important; } */ /* optional kleinere Stufe für Smartphones */ @media (max-width: 575.98px) { .sp-slider-title { font-size: 28px !important; line-height: 32px !important; } } /* Styling Anmeldeformular */ /* Gruppierungen */ .sppb-addon-form-builder .sppb-form-group:nth-of-type(9)::before { content: "Wie relevant ist Ihr Projektvorschlag für die folgenden Themenbereiche?"; display: block; font-weight: bold; margin-top: 62px; margin-bottom: 42px; font-size: 22px; } .sppb-addon-form-builder .sppb-form-group:nth-of-type(21)::before { content: "Bitte wählen Sie die Branche(n) aus, für die Ihre Projektidee besonders relevant oder vielversprechend ist."; display: block; font-weight: bold; margin-top: 62px; margin-bottom: 42px; font-size: 22px; } /* Button "Absenden" */ button.sppb-btn-custom[type="submit"] { background-color: white !important; color: black !important; border: 1px solid black !important; border-radius: 0px !important; font-size: 14px !important; padding: 6px 16px !important; font-weight: 500 !important; line-height: 1.6 !important; text-decoration: none !important; box-shadow: none !important; font-family: Arial, sans-serif !important; transition: all 0.3s ease !important; width: 200px !important; height: 48px !important; text-align: center !important; display: inline-block !important; max-width: 200px !important; } button.sppb-btn-custom[type="submit"]:hover { background-color: black !important; color: white !important; } /* Anmeldebutton Veranstaltung */ .subscribe-btn { background-color: white !important; color: black !important; border: 1px solid black !important; border-radius: 0px !important; font-size: 14px !important; padding: 6px 16px !important; font-weight: 500 !important; line-height: 1.6 !important; text-decoration: none !important; box-shadow: none !important; font-family: Arial, sans-serif !important; transition: all 0.3s ease !important; width: 200px !important; height: 36px !important; text-align: center !important; display: inline-block !important; max-width: 200px !important; } .subscribe-btn:hover { background-color: black !important; color: white !important; }