/* Theme Name: Grotec Child Theme URI: http://3theme.com/tf004/ Description: Thecs - Portfolio WordPress Theme Template: grotec25 Version: 1.4.3 Author: foreverpinetree@gmail.com Author URI: http://foreverpinetree.com/ Tags: custom-menu, featured-images, translation-ready License: GNU General Public License version 3.0 License URI: http://www.gnu.org/licenses/gpl-3.0.html Text Domain: thecs */ /* ========================================================================== HEADER STYLES Hauptstyles für den gesamten Header-Bereich ========================================================================== */ /* Basis Header Positionierung Der Header ist fixiert und initial unsichtbar (opacity: 0) */ body > header{ position: fixed; top: 0; opacity: 0; z-index: 99; } /* Header Hintergrund Layer Separater Layer für den halbtransparenten Hintergrund */ .header_bg{ position: fixed; width: 100%; left: 0;top: 0; opacity: 0.96; z-index: -1; } /* WordPress Admin Bar Anpassung Verschiebt den Header nach unten wenn die WP Admin Bar aktiv ist */ html.has-wp-bar .header_bg{ top: 32px; } /* Header Transparenz Kontrolle Steuerung der Sichtbarkeit bei hover */ header.trans.hide{ opacity: 0 !important; } header.trans.hide:hover{ opacity: 1 !important; } /* Mobile Header Ausblendung Header wird im mobilen Modus ausgeblendet */ body.m-mode > header{ display: none; } /* Logo Container Styling Basis-Styling für den Logo-Bereich */ .logo{ position: relative; z-index: 2; } /* Logo Basis-Styling */ .logo img { /* Grundlegende Logo-Einstellungen */ min-height: 115px !important; /* Minimale Höhe des Logos, wird erzwungen */ width: auto; /* Automatische Breitenanpassung */ margin-left: 0px; /* Kein linker Außenabstand */ } /* Logo im White Mode - SVG spezifisch */ header.style-01.style-01-02 .logo img { /* Logo-Styling für Header-Variante style-01-02 */ filter: none !important; /* Keine Filtereffekte im White Mode */ } /* Dark Mode Logo - SVG spezifisch mit höchster Spezifität */ html body.site-dark header.style-01.style-01-02 .logo img, /* Maximale Spezifität für Dark Mode Logo */ html body.site-dark header .logo img, /* Alternative Dark Mode Logo-Variante */ .site-dark header.style-01.style-01-02.dark .logo img { /* Dark Mode Logo für spezielle Header-Variante */ filter: brightness(0) invert(1) !important; /* Macht das Logo weiß im Dark Mode */ } /* Entferne oder überschreibe alle anderen Logo-Filter */ .site-dark .logo img, header.edit-dark .logo img, body.site-dark .logo img { filter: invert(1) !important; } /* Stelle sicher, dass keine anderen Styles das Logo beeinflussen */ header .logo img[src$=".svg"], .logo img[src$=".svg"] { filter: none; } /* Dark Mode Anpassungen für style-01-02 */ .site-dark header.style-01.style-01-02 .menu-bg { background: #060708 !important; opacity: 0.9; } .site-dark header.style-01.style-01-02 .logo img { filter: brightness(0) invert(1); } /* Dark Mode Basis Styles */ body.site-dark header .menu-bg { background: #060708 !important; opacity: 0.9 !important; } /* Dark Mode für style-01-02 */ body.site-dark header.style-01.style-01-02 .menu-bg, body.site-dark header.style-01.style-01-02.dark .menu-bg { background: #060708 !important; opacity: 0.9 !important; } /* Dark Mode Logo - erhöhte Spezifität */ body.site-dark header .logo img, body.site-dark header.style-01.style-01-02 .logo img { filter: brightness(0) invert(1) !important; } /* Dark Mode Menü Text - erhöhte Spezifität */ body.site-dark header .main-menu a, body.site-dark header #main-menu-list a, body.site-dark header.style-01.style-01-02 .main-menu a { color: #ffffff !important; } /* Entferne oder überschreibe konfliktreiche Styles */ header.edit-dark .menu-bg { background: #060708 !important; opacity: 0.9 !important; } /* Logo Basis-Styling */ .logo img { min-height: 115px !important; width: auto; margin-left: 0px; } /* Dark Mode Logo - höchste Spezifität */ html body.site-dark header.style-01.style-01-02 .logo img, html body.site-dark header .logo img, html body.site-dark header.style-01.style-01-02.dark .logo img { filter: invert(1) !important; } /* WordPress Admin Bar Header Anpassung */ .has-wp-bar header{ /* Header-Anpassung wenn WordPress Admin-Bar aktiv ist */ top: 32px; /* Verschiebt Header nach unten */ } /* Header Style 01 Logo Positionierung */ header.style-01 .logo{ /* Positionierung für Logo im Header-Style-01 */ margin-bottom: 20px; /* Unterer Außenabstand */ margin-left: -25px; /* Negativer linker Außenabstand für Ausrichtung */ left: 0; /* Linke Positionierung */ } /* Menü Hintergrund Container */ header .menu-bg{ /* Styling für den Menü-Hintergrund */ position: fixed; /* Fixierte Position beim Scrollen */ width: 125px; /* Breite der Menüleiste */ height: 100%; /* Volle Höhe */ left: 0; /* Am linken Rand positioniert */ top: 0; /* Am oberen Rand positioniert */ background: #ffffff; /* Weißer Hintergrund */ opacity: 0.9; /* Reduzierte Deckkraft für Transparenz */ padding-right: 5px; /* Rechter Innenabstand */ } /* Dark Mode Menü Hintergrund */ header.edit-dark .menu-bg, /* Dark Mode Menü im Edit-Modus */ .site-dark header .menu-bg{ /* Dark Mode Menü im normalen Modus */ background: #060708 !important; /* Dunkler Hintergrund, wird erzwungen */ opacity: 0.9; /* Leichte Transparenz */ } /* Header Bild Container */ body > header li .img, /* Bild-Container in Listenelementen */ body > header table .img{ /* Bild-Container in Tabellen */ position: absolute; /* Absolute Positionierung */ width: 100%; /* Volle Breite */ height: 100%; /* Volle Höhe */ left: 0; /* Am linken Rand */ top: 0; /* Am oberen Rand */ } /* Menü Hintergrund Hover Effekt */ header.style-01 .wrap:hover .menu-bg{ /* Hover-Effekt für Menü-Hintergrund */ opacity: 0.95; /* Erhöhte Deckkraft bei Hover */ } /* Spezielle Menü Stile */ header.style-01.style-01-02 .menu-bg, /* Menü-Hintergrund für spezielle Header-Variante */ body.single header.style-01 .menu-bg{ /* Menü-Hintergrund auf Single-Seiten */ opacity: 0.9 !important; /* Reduzierte Deckkraft für Transparenz */ background: #ffffff !important; /* Weißer Hintergrund, wird erzwungen */ } /* Menü Text Farbe im Dark Mode */ header.style-01.style-01-02.dark .main-menu a{ /* Menü-Links im Dark Mode */ color: #f3f3f3; /* Helle Textfarbe */ } /* Menü Text Farbe im White Mode */ header.style-01.style-01-02 .main-menu a{ /* Menü-Links im White Mode */ color: #000000; /* Schwarze Textfarbe */ } /* Hauptmenü Anpassungen !!!!Diesen Bereich niemals löschen aber gerne anpassen!!!! */ .main-menu, #main-menu-list { padding-right: 0px; margin-left: 5px; transform: rotate(-45deg) translateX(-50%); transform-origin: center; position: absolute; left: 26px; bottom: 250px; display: flex; flex-direction: row; align-items: center; gap: 20px; width: max-content; } .main-menu a, #main-menu-list a { font-size: 15px !important; font-weight: 300 !important; display: block; padding: 8px 20px; margin: 0px; border: 1px solid #FF003A; border-radius: 45px; transition: all 0.3s ease; text-decoration: none; position: relative; overflow: hidden; white-space: nowrap; transform: rotate(0deg); color: #000000; /* Schwarze Textfarbe im White Mode */ } /* Hover Line Anpassungen */ .main-menu .hoverLine, #main-menu-list .hoverLine { top: 30px !important; height: 1px; background: #FF003A; } /* Hover Effekt für Menü-Items */ .main-menu a:hover, #main-menu-list a:hover { background-color: transparent; transform: translateX(5px); } /* Aktives Menü-Item */ .main-menu a.active, #main-menu-list a.active, .main-menu li.current-menu-item a, #main-menu-list li.current-menu-item a { background-color: #FF003A; border-color: #FF003A; color: #ffffff !important; } /* Dark Mode Anpassungen für Menü */ .site-dark .main-menu a, .site-dark #main-menu-list a { border-color: #FF003A; color: #ffffff !important; /* Weiße Textfarbe im Dark Mode */ } .site-dark .main-menu a:hover, .site-dark #main-menu-list a:hover { background-color: none; } /* Responsive Anpassungen für das Hauptmenü */ @media screen and (max-height: 800px) { .main-menu, #main-menu-list { bottom: 200px; } } @media screen and (max-height: 600px) { .main-menu, #main-menu-list { bottom: 150px; } } /* Responsive Anpassungen für das Hauptmenü */ @media screen and (max-width: 768px) { .main-menu, #main-menu-list { top: 220px; } } @media screen and (max-width: 640px) { .main-menu, #main-menu-list { top: 150px; } .main-menu a, #main-menu-list a { padding: 3px 0; } } @media screen and (max-width: 480px) { .main-menu { max-height: calc(100vh - 150px); } .main-menu a, #main-menu-list a { padding: 5px 0; } } @media screen and (max-width: 320px) { .main-menu { max-height: calc(100vh - 100px); } .main-menu a, #main-menu-list a { padding: 3px 0; } } /* Menü Sidebar Fix für Desktop */ @media screen and (min-width: 1025px) { header { min-height: 100vh; } header .menu-bg { min-height: 100vh; } } /* Dark Mode Styles für Header */ body.site-dark header.style-01.style-01-02.dark, body.site-dark header.style-01.style-01-02.dark .main-menu a, body.site-dark header.style-01.style-01-02.dark .menu-bg { color: #000000 !important; } /* Logo bleibt schwarz im Dark Mode */ body.site-dark header.style-01.style-01-02.dark .logo img { filter: none !important; } /*-------------------------------- DATENSCHUTZ MENÜ STYLES Spezifische Menü-Anpassungen für die Datenschutzerklärung-Seite --------------------------------*/ /* Basis-Menü-Container für Datenschutz-Seite */ .page-id-2268 .main-menu, .page-id-2268 #main-menu-list { padding-right: 50px; margin-left: 13px; transform: rotate(-45deg) translateX(-50%); transform-origin: center; position: absolute; left: 26px; bottom: 250px; display: flex; flex-direction: row; align-items: center; gap: 20px; width: max-content; } /* Menü-Links Styling */ .page-id-2268 .main-menu a, .page-id-2268 #main-menu-list a { font-size: 15px; font-weight: 300; display: block; padding: 8px 20px; margin: 0px; border: 1px solid #FF003A; border-radius: 45px; transition: all 0.3s ease; text-decoration: none; position: relative; overflow: hidden; white-space: nowrap; transform: rotate(0deg); } /* Hover-Linie */ .page-id-2268 .main-menu .hoverLine, .page-id-2268 #main-menu-list .hoverLine { top: 30px; height: 1px; background: #FF003A; } /* Hover-Effekt */ .page-id-2268 .main-menu a:hover, .page-id-2268 #main-menu-list a:hover { background-color: transparent; transform: translateX(5px); } /* Aktives Menü-Item */ .page-id-2268 .main-menu a.active, .page-id-2268 #main-menu-list a.active, .page-id-2268 .main-menu li.current-menu-item a, .page-id-2268 #main-menu-list li.current-menu-item a { background-color: #FF003A; border-color: #FF003A; color: #ffffff; } /* Dark Mode Anpassungen */ .site-dark.page-id-2268 .main-menu a, .site-dark.page-id-2268 #main-menu-list a { border-color: #FF003A; } .site-dark.page-id-2268 .main-menu a:hover, .site-dark.page-id-2268 #main-menu-list a:hover { background-color: transparent; } /* Responsive Anpassungen */ @media screen and (max-height: 800px) { .page-id-2268 .main-menu, .page-id-2268 #main-menu-list { bottom: 200px; } } @media screen and (max-height: 600px) { .page-id-2268 .main-menu, .page-id-2268 #main-menu-list { bottom: 150px; } } @media screen and (max-width: 768px) { .page-id-2268 .main-menu, .page-id-2268 #main-menu-list { top: 220px; } } @media screen and (max-width: 640px) { .page-id-2268 .main-menu, .page-id-2268 #main-menu-list { top: 150px; } .page-id-2268 .main-menu a, .page-id-2268 #main-menu-list a { padding: 3px 0; } } @media screen and (max-width: 480px) { .page-id-2268 .main-menu { max-height: calc(100vh - 150px); } .page-id-2268 .main-menu a, .page-id-2268 #main-menu-list a { padding: 5px 0; } } @media screen and (max-width: 320px) { .page-id-2268 .main-menu { max-height: calc(100vh - 100px); } .page-id-2268 .main-menu a, .page-id-2268 #main-menu-list a { padding: 3px 0; } } /*-------------------------------- DATENSCHUTZ MENÜ STYLES ENDE Spezifische Menü-Anpassungen für die Datenschutzerklärung-Seite --------------------------------*/ /*-------------------------------- VIDEO-Logo Masking Styles 2 CUSTOM Block !!!!Diesen Bereich niemals löschen!!!! --------------------------------*/ /* Full-Width Section */ .video-logo2-id { width: 100%; min-height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; background: transparent; position: relative; } /* SVG Container */ .video-logo2 { position: relative; width: 100%; height: auto; max-width: 100%; } /* SVG Styling */ .video-mask { width: 100%; height: auto; display: block; } /* Video im SVG */ .video-background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; } /*-------------------------------- VIDEO-Logo Masking Styles 3 CUSTOM Block TEST TEST TEST !!!!Diesen Bereich niemals löschen!!!! --------------------------------*/ /* Home-Hauptcontainer */ #grotec-home-id .grotec-home-container { width: 100%; margin: 0; padding: 0; overflow: hidden; position: relative; } .grotec-home { background-color: transparent; width: 100%; max-width: 100%; margin: 0; padding: 0; box-sizing: border-box; overflow: hidden; position: relative; min-height: 100vh; display: flex; flex-direction: column; } /* Logo Container */ .grotec-logo-container-home { display: flex; justify-content: center; align-items: flex-start; margin: 0; padding: 0; width: 100%; box-sizing: border-box; position: relative; } .grotec-logo-figure-home { margin-top: 16px; margin-left: 100px; padding: 20px; text-align: center; width: 100%; height: 443px; display: flex; justify-content: center; align-items: flex-start; position: relative; } .grotec-logo-image-home { width: 100%; height: auto; object-fit: contain; max-width: none; display: block; margin: 0; padding: 10px; position: relative; top: 0; } /* Neue responsive Breakpoints */ @media screen and (max-width: 1023px) { #grotec-home-id { min-height: auto; margin: 0; padding: 0; } .grotec-home { min-height: 100%; } .grotec-logo-container-home { padding: 25px; } .grotec-logo-figure-home { margin-left: 50px; height: auto; min-height: 100%; } .grotec-logo-image-home { width: 100%; } } @media screen and (max-width: 810px) { .grotec-home { min-height: 100%; } .grotec-logo-container-home { padding: 20px; } .grotec-logo-figure-home { margin-left: 30px; min-height: 300px; } .grotec-logo-image-home { width: 100%; } } @media screen and (max-width: 769px) { .grotec-home { min-height: 100%; } .grotec-logo-container-home { padding: 15px; } .grotec-logo-figure-home { margin-left: 20px; margin-top: 10px; padding: 15px; min-height: 250px; } .grotec-logo-image-home { width: 100%; padding: 5px; } } /* Bestehende kleinere Breakpoints beibehalten */ @media screen and (max-width: 480px) { .grotec-home { min-height: 100%; } .grotec-logo-container-home { padding: 10px; } .grotec-logo-figure-home { margin-left: 10px; padding: 10px; min-height: 200px; } .grotec-logo-image-home { width: 100%; } } @media screen and (max-width: 320px) { .grotec-home { min-height: 100%; } .grotec-logo-container-home { padding: 5px; } .grotec-logo-figure-home { margin-left: 5px; padding: 5px; min-height: 150px; } } /* Landscape-Modus Optimierungen beibehalten */ @media screen and (max-height: 480px) and (orientation: landscape) { .grotec-home { min-height: 100%; } .grotec-logo-container-home { padding: 10px; } .grotec-logo-image-home { width: 100%; } } /*-------------------------------- ENDE HOME SECTION --------------------------------*/ /*-------------------------------- HTML Custom EINZIGARTIG STATT STANDARD !!!!Diesen Bereich niemals löschen!!!! --------------------------------*/ #einzigartig-text-html-id { position: relative; display: flex; align-items: center; justify-content: center; min-height: 100vh; width: 100%; overflow: hidden; color: #000000; } #einzigartig-text-html-id * { color: inherit; } .einzigartig-text-html { position: relative; display: flex; flex-direction: column; align-items: left; justify-content: center; min-height: 100vh; width: 100%; } .statement-text { position: relative; width: 947px; height: 152px; font-size: 172px; font-style: normal; font-weight: 100; line-height: 165px; letter-spacing: 0px; text-align: left; text-transform: uppercase; opacity: 1; margin: 0; } /* Dark Mode Anpassungen für Einzigartig Text */ .site-dark #einzigartig-text-html-id, .site-dark #einzigartig-text-html-id *, .site-dark .einzigartig-text-html, .site-dark .statement-text { color: #ffffff !important; } /* Responsive Design Anpassungen */ /* Mobile Optimierungen für Einzigartig Section */ @media screen and (max-width: 1023px) { #einzigartig-text-html-id { /* Container-Anpassungen für Tablets */ min-height: auto; /* Flexible Höhenanpassung */ margin-top: 100px; /* Entfernt äußere Abstände */ padding: 0 20px; /* Seitliche Innenabstände */ } .einzigartig-text-html { /* Innerer Container-Anpassungen */ min-height: auto; /* Flexible Höhe für mobilen Inhalt */ margin: 0; /* Entfernt Außenabstände */ padding: 0; /* Entfernt Innenabstände */ } .statement-text { /* Textanpassungen für große Bildschirme */ font-size: 120px; /* Große, aber reduzierte Schriftgröße */ line-height: 115px; /* Angepasste Zeilenhöhe */ width: auto; /* Automatische Breitenanpassung */ height: auto; /* Automatische Höhenanpassung */ } } @media screen and (max-width: 768px) { /* Tablet-Breakpoint */ #einzigartig-text-html-id { /* Container-Anpassungen für mittlere Bildschirme */ padding: 0 15px; /* Reduziertes seitliches Padding */ width: 100%; /* Volle Breite nutzen */ margin-top: 0px; /* entfernt außere Abstände*/ } .einzigartig-text-html { /* Innerer Container für Tablets */ padding: 0 15px; /* Gleichmäßiges Padding */ width: 100%; /* Volle verfügbare Breite */ } .statement-text { /* Textanpassungen für kleinste Bildschirme */ font-size: 120px; /* Kleinere Schriftgröße */ line-height: 110px; /* Reduzierte Zeilenhöhe */ width: auto; /* Automatische Breitenanpassung */ height: auto; /* Automatische Höhenanpassung */ } } @media screen and (max-width: 640px) { /* Größere Smartphones */ #einzigartig-text-html-id { /* Container für große Smartphones */ padding: 0 12px; /* Weiter reduziertes Padding */ width: 100%; margin-top: 0px; /* entfernt außere Abstände*/ /* Volle Breite beibehalten */ } .einzigartig-text-html { /* Innerer Container-Anpassungen */ padding: 0 12px; /* Konsistentes Padding */ width: 100%; /* Maximale Breite */ } .statement-text { /* Textanpassungen für kleinste Bildschirme */ font-size: 75px; /* Kleinere Schriftgröße */ line-height: 42px; /* Reduzierte Zeilenhöhe */ width: auto; /* Automatische Breitenanpassung */ height: auto; /* Automatische Höhenanpassung */ } } @media screen and (max-width: 480px) { /* Mittlere Smartphones */ #einzigartig-text-html-id { /* Container für mittlere Smartphones */ padding: 0 10px; /* Minimales Padding */ width: 100%; margin-top: 0px; /* entfernt außere Abstände*/ } .einzigartig-text-html { /* Innerer Container */ padding: 0 10px; /* Reduziertes Padding */ width: 100%; /* Maximale Breite nutzen */ margin-top: 0px; /* entfernt außere Abstände*/ } .statement-text { /* Textanpassungen für kleinste Bildschirme */ font-size: 60px; /* Kleinere Schriftgröße */ line-height: 42px; /* Reduzierte Zeilenhöhe */ width: auto; /* Automatische Breitenanpassung */ height: auto; /* Automatische Höhenanpassung */ } } @media screen and (max-width: 320px) { /* Kleine Smartphones */ #einzigartig-text-html-id { /* Container für kleine Geräte */ width: 100%; margin-top: 0px; /* entfernt außere Abstände*/ /* Volle Breite beibehalten */ } .einzigartig-text-html { /* Innerer Container für kleine Geräte */ padding: 0 10px; /* Minimales Padding beibehalten */ width: 100%; /* Volle Breite sicherstellen */ } .statement-text { /* Textanpassungen für kleinste Bildschirme */ font-size: 50px; /* Kleinere Schriftgröße */ line-height: 42px; /* Reduzierte Zeilenhöhe */ width: auto; /* Automatische Breitenanpassung */ height: auto; /* Automatische Höhenanpassung */ } } /*-------------------------------- ENDE HTML Custom EINZIGARTIG STATT STANDARD !!!!Diesen Bereich niemals löschen!!!! --------------------------------*/ /*-------------------------------- START HTML Custom SLIDER PARALLAX 1 !!!!Diesen Bereich niemals löschen!!!! --------------------------------*/ .slider_parallax1 { display: block; width: auto; height: auto; position: relative; } /* Mobile Anpassungen - Slider ausblenden */ @media screen and (max-width: 768px) { .slider_parallax1 { display: none !important; height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; } } /*-------------------------------- ENDE HTML Custom SLIDER PARALLAX 1 !!!!Diesen Bereich niemals löschen!!!! --------------------------------*/ /*-------------------------------- START HTML Custom MOBILE SLIDER kann man verstecken in der Desktop Ansicht!! -------------------------------- .slide-number { display: none; } @media (max-width: 768px) { .slide-number { display: block; } } /*-------------------------------- ENDE HTML Custom MOBILE SLIDER PARALLAX 1 !!!!Diesen Bereich niemals löschen!!!! --------------------------------*/ /*-------------------------------- ANFANG HTML Custom 3D-BILD Section 1 !!!!Diesen Bereich niemals löschen!!!! --------------------------------*/ .drei_bild_custom { } /*-------------------------------- ENDE HTML Custom 3D-BILD Section 1!!!!Diesen Bereich niemals löschen!!!! --------------------------------*/ /*-------------------------------- HTML Custom Text + Counter SECTION 2 | Text + Counter !!!!Diesen Bereich niemals löschen!!!! --------------------------------*/ .custom-text-counter-5 { /* Hauptcontainer für Counter-Sektion */ max-width: 1200px; /* Maximale Breite für große Bildschirme */ min-width: 783px; /* Minimale Breite verhindert zu schmale Darstellung */ margin: 0 auto; /* Zentriert den Container horizontal */ text-align: left; /* Linksbündige Textausrichtung */ color: #000000; /* Schwarze Textfarbe im Light Mode */ padding: 50px; /* Innenabstand rundum */ position: relative; /* Ermöglicht absolute Positionierung von Kindelementen */ display: flex; /* Flexbox für vertikale Ausrichtung */ flex-direction: column; /* Stapelt Elemente vertikal */ align-items: center; /* Zentriert Elemente horizontal */ justify-content: center; /* Zentriert Elemente vertikal */ box-sizing: border-box; /* Padding wird in Gesamtbreite einberechnet */ } /* Dark Mode Styles direkt nach der Hauptklasse */ body.site-dark .custom-text-counter-5, /* Dark Mode Anpassungen für alle Counter-Elemente */ body.site-dark .custom-text-counter-5 .heading, /* Überschrift im Dark Mode */ body.site-dark .custom-text-counter-5 .intro-text-counter, /* Einleitungstext im Dark Mode */ body.site-dark .custom-text-counter-5 .counter-grid, /* Counter-Grid im Dark Mode */ body.site-dark .custom-text-counter-5 .counter-item, /* Einzelne Counter im Dark Mode */ body.site-dark .custom-text-counter-5 .counter-number, /* Zahlenwerte im Dark Mode */ body.site-dark .custom-text-counter-5 .counter-title { /* Titel der Counter im Dark Mode */ color: #ffffff !important; /* Erzwingt weiße Textfarbe im Dark Mode */ } .custom-text-counter-5 .heading { /* Styling für die Hauptüberschrift */ text-transform: uppercase; /* Text in Großbuchstaben */ color: #000000; /* Schwarze Textfarbe */ font-size: 16px; /* Schriftgröße */ font-weight: 300; /* Leichte Schriftstärke */ line-height: 14px; /* Zeilenhöhe */ letter-spacing: 1px; /* Buchstabenabstand */ margin-bottom: 26px; /* Abstand nach unten */ width: 100%; /* Volle Breite */ max-width: 783px; /* Maximale Breite */ text-align: left; /* Linksbündige Ausrichtung */ align-self: flex-start; /* Am Anfang des Flex-Containers ausrichten */ } .intro-text-counter { /* Styling für den Einleitungstext */ font-size: 48px; /* Große Schriftgröße */ font-weight: 300; /* Leichte Schriftstärke */ letter-spacing: 0px; /* Kein zusätzlicher Buchstabenabstand */ text-align: left; /* Linksbündige Ausrichtung */ margin-bottom: 87px; /* Großer Abstand nach unten */ max-width: 950px; /* Maximale Breite */ line-height: 49.5px; /* Zeilenhöhe */ width: 100%; /* Volle Breite */ overflow-wrap: break-word; /* Verhindert Textüberlauf */ hyphens: auto; /* Automatische Silbentrennung */ align-self: flex-start; /* Am Anfang des Flex-Containers ausrichten */ } .counter-grid { /* Container für die Counter-Elemente */ display: grid; /* Grid-Layout */ grid-template-columns: repeat(3, 1fr); /* Drei gleich breite Spalten */ color: #000000; /* Schwarze Textfarbe */ width: 100%; /* Volle Breite */ min-width: 1080px; /* Minimale Breite */ margin-bottom: 0px; /* Kein Abstand nach unten */ padding-top: 10px; /* Abstand nach oben */ align-self: flex-start; /* Am Anfang des Flex-Containers ausrichten */ font-family: "mundial-narrow-variable", sans-serif !important; /* Erzwingt die Schriftart */ } .counter-item { /* Basis-Styling für alle Counter */ display: flex; /* Flexbox-Layout */ align-items: flex-end; /* Ausrichtung am unteren Rand */ text-align: left; /* Linksbündige Textausrichtung */ position: relative; /* Ermöglicht absolute Positionierung */ } /* Individuelle Abstände über Klassen - im Frontend anpassbar */ .counter-projekte { /* Erfolgreiche Projekte */ margin-right: 144px; /* Standard-Abstand, im Frontend änderbar */ } .counter-geraete { /* Geräte im Bestand */ margin-right: 110px; /* Standard-Abstand, im Frontend änderbar */ } .counter-kilometer { /* Kilometer */ margin-right: 0; /* Standard-Abstand, im Frontend änderbar */ } /* Spezifische Abstände für jeden Counter */ .counter-item:nth-child(1) { /* Styling für ersten Counter */ margin-right: 195px; /* Fester Abstand in Pixeln */ } .counter-item:nth-child(2) { /* Styling für zweiten Counter */ margin-right: 110px; /* Fester Abstand in Pixeln */ } .counter-item:nth-child(3) { /* Styling für dritten Counter */ margin-right: 0; /* Kein Abstand beim letzten Element */ } .counter-number { /* Styling für die Zahlenwerte */ font-family: "mundial-narrow-variable", sans-serif; /* Spezielle Schriftart */ font-weight: 300; /* Leichte Schriftstärke */ font-size: 96px; /* Sehr große Schriftgröße */ line-height: 0.9; /* Kompakte Zeilenhöhe */ transition: all 0.3s ease-out; /* Weiche Animation */ will-change: contents; /* Optimiert Browser-Rendering */ } .counter-title { /* Styling für die Counter-Titel */ font-weight: 300; /* Leichte Schriftstärke */ font-size: 16px; /* Schriftgröße */ margin-left: 4px; /* Abstand links */ padding-bottom: 8px; /* Abstand unten */ max-width: 20px; /* Maximale Breite */ text-transform: uppercase; /* Text in Großbuchstaben */ padding-bottom: 15px; /* Zusätzlicher Abstand unten */ } /* ... existing code ... */ /* ------------- VERBESSERTE MOBILE ANSICHT ------------- */ /* Diese neuen Anpassungen beheben Darstellungsprobleme in mobilen Ansichten */ /* Erste mobile Anpassungen - große Tablets und kleine Laptops */ @media screen and (max-width: 1023px) { #grotec-home-id { width: 100%; overflow: hidden; } #grotec-home-id .grotec-home-container { min-width: unset; width: 100%; max-width: 100%; box-sizing: border-box; margin: 0; padding: 0 20px; } .custom-text-counter-5 { min-width: unset; width: 100%; max-width: 100%; box-sizing: border-box; padding: 20px; } .intro-text-counter { width: 100%; min-height: auto; max-width: 100%; overflow-wrap: break-word; hyphens: auto; padding-right: 20px; } } /* Medium-sized devices - Tablets und große Smartphones */ @media screen and (max-width: 768px) { #grotec-home-id .grotec-home-container { padding: 0 15px; } .custom-text-counter-5 { min-width: 0; width: 100%; padding: 15px; overflow-x: visible; box-sizing: border-box; } .intro-text-counter { margin-bottom: 40px; min-height: auto; font-size: 36px; line-height: 40px; padding-right: 15px; } .counter-grid { width: 100%; gap: 20px; } } /* Smartphones (landscape) */ @media screen and (max-width: 640px) { #grotec-home-id .grotec-home-container { padding: 0 12px; } .custom-text-counter-5 { padding: 12px; } .intro-text-counter { font-size: 30px; line-height: 34px; margin-bottom: 30px; padding-right: 12px; } .counter-grid { grid-template-columns: 1fr; gap: 15px; } } /* Mittlere Smartphones */ @media screen and (max-width: 480px) { #grotec-home-id { overflow-x: visible; } #grotec-home-id .grotec-home-container { padding: 0 10px; overflow-x: visible; } .custom-text-counter-5 { padding: 10px; overflow: visible; } .intro-text-counter { font-size: 26px; line-height: 30px; margin-bottom: 25px; padding-right: 10px; } } /* Sehr kleine Smartphones und ältere Geräte */ @media screen and (max-width: 320px) { #grotec-home-id .grotec-home-container { padding: 0 8px; } .custom-text-counter-5 { padding: 8px; } .intro-text-counter { font-size: 22px; line-height: 26px; margin-bottom: 20px; padding-right: 8px; } } /* ------------- VERBESSERTE MOBILE ANSICHT FÜR COUNTER SECTION ------------- */ /* Große Tablets und kleine Laptops (1023px) */ @media screen and (max-width: 1023px) { .custom-text-counter-5 { min-width: unset; /* Entfernt die Mindestbreite für flexibles Layout */ width: 100%; /* Volle Breite des Containers */ max-width: 100%; /* Maximale Breite auf 100% begrenzt */ padding: 30px; /* Gleichmäßiger Innenabstand */ margin: 0 auto; /* Zentriert den Container */ } .intro-text-counter { width: 100%; /* Text nutzt volle Breite */ max-width: 100%; /* Verhindert Überbreite */ font-size: 42px; /* Angepasste Schriftgröße für Tablets */ line-height: 46px; /* Optimierte Zeilenhöhe für Lesbarkeit */ margin-bottom: 60px; /* Abstand zum Counter-Bereich */ } .counter-grid { display: flex; /* Wechsel zu Flexbox für vertikale Ausrichtung */ flex-direction: column; /* Counter werden untereinander angeordnet */ align-items: flex-start; /* Linksbündige Ausrichtung */ gap: 40px; /* Vertikaler Abstand zwischen Countern */ width: 100%; /* Volle Breite */ min-width: unset; /* Entfernt Mindestbreite */ overflow: hidden; /* Erlaubt Umbruch bei Bedarf */ } .counter-item:nth-child(1) { margin-right: 80px; /* Reduzierter Abstand zum zweiten Counter */ } .counter-item:nth-child(2) { margin-right: 60px; /* Reduzierter Abstand zum dritten Counter */ } } /* Tablets (768px) */ @media screen and (max-width: 768px) { .custom-text-counter-5 { padding: 25px; /* Angepasster Innenabstand */ overflow-x: hidden; /* Verhindert horizontales Scrollen */ box-sizing: border-box; /* Padding wird in Breite einberechnet */ } .intro-text-counter { font-size: 36px; /* Kleinere Schrift für bessere Lesbarkeit */ line-height: 40px; /* Angepasste Zeilenhöhe */ margin-bottom: 50px; /* Reduzierter Abstand nach unten */ padding-right: 0; /* Entfernt rechtes Padding */ } .counter-grid { display: flex; /* Wechsel zu Flexbox für vertikale Ausrichtung */ flex-direction: column; /* Counter werden untereinander angeordnet */ align-items: flex-start; /* Linksbündige Ausrichtung */ gap: 40px; /* Vertikaler Abstand zwischen Countern */ width: 100%; /* Volle Breite */ min-width: unset; /* Entfernt Mindestbreite */ overflow: hidden; /* Verhindert Überlauf */ } .counter-item { margin-right: 0 !important; /* Entfernt horizontale Abstände */ width: 100%; /* Volle Breite */ } .counter-number { font-size: 72px; /* Angepasste Zahlengröße */ } .counter-title { font-size: 14px; /* Kleinere Schrift für Titel */ margin-left: 8px; /* Abstand zur Zahl */ padding-bottom: 12px; /* Unterer Innenabstand */ } } /* Große Smartphones (640px) */ @media screen and (max-width: 640px) { .custom-text-counter-5 { padding: 20px; /* Reduzierter Innenabstand */ } .intro-text-counter { font-size: 32px; /* Kleinere Schrift für Smartphones */ line-height: 36px; /* Angepasste Zeilenhöhe */ margin-bottom: 40px; /* Reduzierter Abstand */ } .heading { font-size: 14px; /* Angepasste Überschriftgröße */ margin-bottom: 20px; /* Reduzierter Abstand */ } .counter-number { font-size: 64px; /* Kleinere Zahlengröße */ } } /* Mittlere Smartphones (480px) */ @media screen and (max-width: 480px) { .custom-text-counter-5 { padding: 15px; /* Minimaler Innenabstand */ } .intro-text-counter { font-size: 28px; /* Noch kleinere Schrift */ line-height: 32px; /* Reduzierte Zeilenhöhe */ margin-bottom: 30px; /* Minimaler Abstand */ } .heading { font-size: 13px; /* Angepasste Überschriftgröße */ margin-bottom: 15px; /* Minimaler Abstand */ } .counter-grid { gap: 30px; /* Reduzierter Abstand zwischen Countern */ } .counter-number { font-size: 56px; /* Kleinere Zahlengröße */ } .counter-title { font-size: 13px; /* Angepasste Titelgröße */ margin-left: 6px; /* Minimaler Abstand zur Zahl */ padding-bottom: 8px; /* Reduzierter unterer Innenabstand */ } } /* Kleine Smartphones (320px) */ @media screen and (max-width: 320px) { .custom-text-counter-5 { padding: 12px; /* Minimaler Innenabstand */ } .intro-text-counter { font-size: 24px; /* Kleinste Schriftgröße */ line-height: 28px; /* Minimale Zeilenhöhe */ margin-bottom: 25px; /* Minimaler Abstand */ } .heading { font-size: 12px; /* Kleinste Überschriftgröße */ margin-bottom: 12px; /* Minimaler Abstand */ } .counter-number { font-size: 48px; /* Kleinste Zahlengröße */ } .counter-title { font-size: 12px; /* Kleinste Titelgröße */ margin-left: 4px; /* Minimaler Abstand zur Zahl */ padding-bottom: 6px; /* Minimaler unterer Innenabstand */ } } /*-------------------------------- ENDE HTML Custom Text + Counter SECTION 2 | Text + Counter --------------------------------*/ /*-------------------------------- HTML Custom Text + SECTION 2 | Linie Leistungen --------------------------------*/ #container-leistungen-id { position: relative; height: 735px; width: 10%; display: flex; align-items: center; justify-content: flex-start; overflow: hidden; margin-right: -350px; } /* Dark Mode Styles für Leistungen Bereich */ .site-dark #container-leistungen-id, .site-dark #container-leistungen-id .content-leistungen, .site-dark #container-leistungen-id .title-leistungen { color: #ffffff !important; } .site-dark #container-leistungen-id .vertical-line-leistungen { border-left-color: #ffffff !important; } .site-dark .ptsc.pt-sc.sc-custom-html #container-leistungen-id * { color: #ffffff !important; } .content-leistungen { display: flex; align-items: center; position: relative; left: 0px; height: 100%; /* Volle Höhe des Containers */ width: auto; min-width: fit-content; margin-left: 0; } .title-leistungen { justify-content: center; height: 14px; font-family: 'Mundial Narrow Variable', sans-serif; font-weight: 300; font-size: 16px; line-height: 18px; letter-spacing: 0.8px; color: #000000; text-transform: uppercase; opacity: 1; margin-right: 15px; align-self: center; /* Zentriert den Text vertikal */ } .vertical-line-leistungen { height: 90%; /* Volle Höhe des Parent-Elements */ border-left: 1px solid #000000; opacity: 1; } /* Responsive Margin Einstellungen */ .margin-normal .content-leistungen { margin-left: 20px; margin-right: 20px; } .margin-small .content-leistungen { margin-left: 10px; margin-right: 10px; } .margin-large .content-leistungen { margin-left: 40px; margin-right: 40px; } .margin-none .content-leistungen { margin-left: 0; margin-right: 0; } /* Mobile Anpassungen für Leistungen Section */ @media screen and (max-width: 1023px) { #container-leistungen-id { width: 100px; height: auto; min-height: 60px; padding: 20px 0; } .content-leistungen { left: 0; padding: 0 20px; height: 40px; min-height: 40px; display: flex; align-items: center; } .vertical-line-leistungen { height: 1px; width: 80px; border-left: none; border-top: 1px solid #000000; margin-left: 15px; align-self: center; } .title-leistungen { height: auto; margin-right: 0; } } @media screen and (max-width: 768px) { #container-leistungen-id { padding: 15px 0; min-height: 50px; } .content-leistungen { padding: 0 15px; height: 35px; min-height: 35px; } .vertical-line-leistungen { width: 70px; margin-left: 12px; } } @media screen and (max-width: 480px) { #container-leistungen-id { padding: 12px 0; min-height: 40px; } .content-leistungen { padding: 0 12px; height: 30px; min-height: 30px; } .vertical-line-leistungen { width: 60px; margin-left: 10px; } } @media screen and (max-width: 320px) { #container-leistungen-id { padding: 10px 0; min-height: 35px; } .content-leistungen { padding: 0 10px; height: 25px; min-height: 25px; } .vertical-line-leistungen { width: 100%; margin-left: 8px; } } /*-------------------------------- ENDE HTML Custom Text + SECTION 2 | Link Leistungen --------------------------------*/ /*-------------------------------- HTML Custom Text + SECTION 3 | Text + GIFS IMMER INDIVIDUELL !! --------------------------------*/ .custom-text-roundgif-3 { max-width: 1200px; min-width: 850px; margin: 0 auto; text-align: left; color: #000000; padding: 50px; position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; box-sizing: border-box; } /* Dark Mode Styles für custom-text-roundgif-3 */ body.site-dark .custom-text-roundgif-3, body.site-dark .custom-text-roundgif-3 .heading, body.site-dark .custom-text-roundgif-3 .intro-text-leistung { color: #ffffff !important; } /* Zusätzliche Spezifität für verschachtelte Elemente */ body.site-dark .ptsc.pt-sc.sc-custom-html .custom-text-roundgif-3, body.site-dark .ptsc.pt-sc.sc-custom-html .custom-text-roundgif-3 * { color: #ffffff !important; } .custom-text-roundgif-3 .heading { text-transform: uppercase; color: #000000; font-size: 16px; font-weight: 300; line-height: 14px; letter-spacing: 1px; margin-bottom: 26px; /* Bündige Ausrichtung mit intro-text */ max-width: 783px; text-align: left; } .intro-text-leistung { font-size: 48px; font-weight: 300; /* Leichtere Schrift wie im Design */ letter-spacing: 0px; text-align: left; margin-bottom: 40px; min-width: 900px; min-height: auto; line-height: 49.5px; width: 100%; /* Begrenze die Breite, damit ein Umbruch erzwungen wird */ overflow-wrap: break-word; } /* --------------------------------------- BILD SECTION - Section3 | BILD unter Text Immer Individuell --------------------------------------- */ .custom-image-leistung { min-width: 250px; max-width: 500px; margin-top: 20px; margin-bottom: 40px; height: auto; display: block; } /* ------------- VERBESSERTE MOBILE ANSICHT ------------- */ /* Diese neuen Anpassungen beheben Darstellungsprobleme in mobilen Ansichten */ /* ------------- VERBESSERTE MOBILE ANSICHT FÜR SECTION 3 ------------- */ /* Große Tablets und kleine Laptops (1023px) */ @media screen and (max-width: 1023px) { .custom-text-roundgif-3 { min-width: unset; /* Entfernt die Mindestbreite für flexibles Layout */ width: 100%; /* Volle Breite des Containers */ max-width: 100%; /* Maximale Breite auf 100% begrenzt */ padding: 30px; /* Gleichmäßiger Innenabstand */ margin: 0 auto; /* Zentriert den Container */ box-sizing: border-box; /* Berücksichtigt Padding in Gesamtbreite */ } .intro-text-leistung { min-width: unset; /* Entfernt fixe Mindestbreite */ width: 100%; /* Text nutzt volle Breite */ max-width: 100%; /* Verhindert Überbreite */ font-size: 42px; /* Angepasste Schriftgröße für Tablets */ line-height: 46px; /* Optimierte Zeilenhöhe für Lesbarkeit */ margin-bottom: 30px; /* Reduzierter Abstand */ overflow-wrap: break-word; /* Verbesserte Textumbrüche */ hyphens: auto; /* Automatische Silbentrennung */ } .custom-image-leistung { max-width: 100%; /* Bild passt sich Containerbreite an */ height: auto; /* Behält Seitenverhältnis bei */ margin: 20px auto; /* Zentrierte Ausrichtung */ } } /* Tablets (768px) */ @media screen and (max-width: 768px) { .custom-text-roundgif-3 { padding: 25px; /* Reduzierter Innenabstand */ min-height: auto; /* Flexible Höhe */ margin-bottom: 100px; } .custom-text-roundgif-3 .heading { font-size: 15px; /* Kleinere Überschrift */ margin-bottom: 20px; /* Angepasster Abstand */ } .intro-text-leistung { font-size: 36px; /* Kleinere Schrift für bessere Lesbarkeit */ line-height: 40px; /* Angepasste Zeilenhöhe */ margin-bottom: 25px; /* Reduzierter Abstand */ } } /* Große Smartphones (640px) */ @media screen and (max-width: 640px) { .custom-text-roundgif-3 { padding: 20px; /* Minimaler Innenabstand */ min-height: auto; /* Flexible Höhe */ margin-bottom: 100px; } .custom-text-roundgif-3 .heading { font-size: 14px; /* Noch kleinere Überschrift */ line-height: 16px; /* Angepasste Zeilenhöhe */ margin-bottom: 15px; /* Minimaler Abstand */ } .intro-text-leistung { font-size: 32px; /* Angepasste Textgröße */ line-height: 36px; /* Optimierte Zeilenhöhe */ margin-bottom: 20px; /* Reduzierter Abstand */ } .custom-image-leistung { margin: 15px auto; /* Reduzierter Abstand */ min-width: unset; /* Entfernt Mindestbreite */ } } /* Mittlere Smartphones (480px) */ @media screen and (max-width: 480px) { .custom-text-roundgif-3 { padding: 15px; /* Minimaler Innenabstand */ min-height: auto; /* Flexible Höhe */ margin-bottom: 100px; } .custom-text-roundgif-3 .heading { font-size: 13px; /* Angepasste Größe */ margin-bottom: 12px; /* Minimaler Abstand */ } .intro-text-leistung { font-size: 28px; /* Kleinere Schrift */ line-height: 32px; /* Reduzierte Zeilenhöhe */ margin-bottom: 15px; /* Minimaler Abstand */ } } /* Kleine Smartphones (320px) */ @media screen and (max-width: 320px) { .custom-text-roundgif-3 { padding: 12px; /* Minimaler Innenabstand */ min-height: auto; /* Flexible Höhe */ margin-bottom: 100px; } .custom-text-roundgif-3 .heading { font-size: 12px; /* Kleinste Schriftgröße */ line-height: 14px; /* Minimale Zeilenhöhe */ margin-bottom: 10px; /* Minimaler Abstand */ } .intro-text-leistung { font-size: 24px; /* Kleinste Schriftgröße */ line-height: 28px; /* Minimale Zeilenhöhe */ margin-bottom: 12px; /* Minimaler Abstand */ } .custom-image-leistung { margin: 12px auto; /* Minimaler Abstand */ } } /* Landscape-Modus Optimierungen */ @media screen and (max-height: 480px) and (orientation: landscape) { .custom-text-roundgif-3 { padding: 15px; /* Angepasster Innenabstand */ min-height: auto; /* Flexible Höhe */ } .intro-text-leistung { font-size: 28px; /* Angepasste Schriftgröße */ line-height: 32px; /* Optimierte Zeilenhöhe */ margin-bottom: 15px; /* Reduzierter Abstand */ } .custom-image-leistung { max-height: 50vh; /* Maximale Höhe im Landscape-Modus */ } } /*-------------------------------- ENDE HTML Custom Text + SECTION 3 | Text + GIFS IMMER INDIVIDUELL !! --------------------------------*/ /* --------------------------------------- AKKORDEON SECTION - SECTION3 | Leistung + AKKORDEON --------------------------------------- */ /* Akkordeon-Wrapper für Zentrierung */ .akkordeon-section-wrapper { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; width: 100%; padding: 0px; box-sizing: border-box; font-family: 'mundial-narrow-variable', sans-serif; color: #641C34; } #akkordeon-v2-styles-id { position: relative; width: 100%; display: flex; align-items: center; justify-content: center; padding: 0; min-height: 100vh; overflow: hidden; font-family: 'mundial-narrow-variable', sans-serif; color: #641C34; } /* Dark Mode Styles für Akkordeon */ body.site-dark #akkordeon-v2-styles-id, body.site-dark #akkordeon-v2-styles-id .akkordeon-v2-styles, body.site-dark #akkordeon-v2-styles-id .accordion-container, body.site-dark #akkordeon-v2-styles-id .accordion-tab, body.site-dark #akkordeon-v2-styles-id .accordion-number, body.site-dark #akkordeon-v2-styles-id .accordion-title, body.site-dark #akkordeon-v2-styles-id .accordion-text, body.site-dark #akkordeon-v2-styles-id .text-container { color: #ffffff !important; } /* Spezifische Farbe für accordion-indicator im Dark Mode */ body.site-dark #akkordeon-v2-styles-id .accordion-indicator { color: #FF003A !important; } body.site-dark #akkordeon-v2-styles-id .vertical-line { background-color: #ffffff !important; } /* Zusätzliche Spezifität für verschachtelte Elemente */ body.site-dark .ptsc.pt-sc.sc-custom-html #akkordeon-v2-styles-id, body.site-dark .ptsc.pt-sc.sc-custom-html #akkordeon-v2-styles-id *:not(.accordion-indicator) { color: #ffffff !important; } /* Spezifische Farbe für accordion-indicator im Dark Mode mit höchster Spezifität */ body.site-dark .ptsc.pt-sc.sc-custom-html #akkordeon-v2-styles-id .accordion-indicator { color: #FF003A !important; } #akkordeon-v2-styles-id .akkordeon-v2-styles { width: 100%; height: 100vh; max-width: 100%; position: relative; display: flex; align-items: center; justify-content: center; padding: 0px; overflow: hidden; color: #641C34; } .accordion-container { display: flex; width: 100%; height: 100%; max-height: 800px; position: relative; font-family: 'mundial-narrow-variable', sans-serif; justify-content: flex-start; overflow: hidden; box-sizing: border-box; padding: 50px; cursor: pointer; } /* Basis-Tab-Styling */ .accordion-tab .active { position: relative; display: flex; flex-direction: column; width: 76px; height: 100%; overflow: hidden; transition: all 0.5s ease; box-sizing: border-box; flex-shrink: 0; } /* Tab-Elemente */ .accordion-number, .accordion-indicator { position: absolute; z-index: 3; } .accordion-number { top: 10px; left: 10px; font-size: 48px; font-weight: 300; } .accordion-indicator { position: absolute; z-index: 3; color: #FF003A; bottom: 1px; left: 10px; font-size: 16px; font-weight: 600 !important; } /* Vertikale Linien */ .vertical-line { position: absolute; top: 0; width: 1px; height: 100%; background-color: #641C34; z-index: 2; } /* Geschlossener Tab */ .accordion-tab:not(.active) .vertical-line.left-line { left:40px; } .accordion-tab:not(.active) .vertical-line.right-line { display: none; /* Keine rechte Linie im geschlossenen Zustand */ } /* Aktiver Tab */ .accordion-tab.active { width: 480px; min-width: auto; max-width: 480px; flex: 0 0 auto; } .accordion-tab.active .accordion-number { top: 15px; left: 5px; font-size: 48px; font-weight: 300; } .accordion-tab.active .vertical-line.left-line { left: 35px; } .accordion-tab.active .vertical-line.right-line { margin-right: 30px; display: block; /* Zeige rechte Linie nur im aktiven Zustand */ } /* Content-Bereich */ .accordion-content { display: none; flex-direction: column; width: 100%; height: 100%; padding-left: 60px; padding-top: 20px; padding-bottom: 20px; overflow: hidden; box-sizing: border-box; } .accordion-tab.active .accordion-content { display: flex; } /* Content-Layout */ .content-wrapper { display: flex; flex-direction: column; height: 100%; width: 100%; gap: 30px; box-sizing: border-box; padding-right: 15px; } /* Text-Container */ .text-container { flex: 0 1 auto; width: 100%; max-width: 100%; max-height: 50%; overflow-y: auto; box-sizing: border-box; font-size: 16px; line-height: 27.75px; font-weight: 300; font-family: 'mundial-narrow-variable', sans-serif; color: #641C34; padding-right: 20px; } /* Titel-Styling */ .accordion-title { font-size: 16px; font-weight: bold; font-family: 'mundial-narrow-variable', sans-serif; margin-bottom: 18px; text-transform: uppercase; } /* Theme-Farben für Akkordeon-Titel */ .accordion-title.h { color: var(--themecolor, #641C34); /* Fallback zur Standard-Farbe */ } /* Basis-Farbe nur wenn keine Theme-Farbe definiert */ .accordion-title:not(.h) { color: #641C34; } .accordion-text { margin-bottom: 16px; line-height: 27.75px; width: 100%; max-width: 100%; word-break: break-word; hyphens: auto; font-weight: 300; font-size: 16px; font-family: 'mundial-narrow-variable', sans-serif; color: #641C34; } /* Bild-Container */ .image-container { flex: 1 0 200px; display: flex; align-items: flex-end; /* Änderung zu flex-end für Ausrichtung nach unten */ justify-content: center; overflow: hidden; margin-bottom: -25px; /* Entferne negative margins */ height: 100%; /* Volle Höhe */ } .accordion-image { max-width: 100%; max-height: 100%; object-fit: contain; margin-bottom: 0; /* Entferne negative margins */ align-self: flex-end; /* Ausrichtung nach unten */ } /* --------------------------------------- ENDE - AKKORDEON SECTION - SECTION3 | Leistung + AKKORDEON - ENDE --------------------------------------- */ /*-------------------------------- SECTION4 | Events Brand Scroller --------------------------------*/ /* Hauptcontainer mit ID und Klasse */ #brand-scroller-id.brand-scroller.ptsc.pt-sc.sc-custom-html { position: relative; padding: 0; overflow: visible; font-family: 'mundial-narrow-variable', sans-serif; height: 100vh; width: 141px; display: flex; align-items: center; justify-content: center; margin-right: -70px; } /* Slider Container mit Rotation */ #brand-scroller-id .slider-container { position: absolute; width: 100vh; height: 141px; left: 50%; top: 50%; overflow: visible; background-color: transparent; transform-origin: center center; transform: translate(-50%, -50%) rotate(-90deg); } /* Animation Track */ #brand-scroller-id .slider-track { display: flex; position: relative; white-space: nowrap; will-change: transform; animation: brandSlide 50s linear infinite; width: max-content; height: 100%; } /* Animation Richtung von unten nach oben !!! */ #brand-scroller-id .slider-track::before, #brand-scroller-id .slider-track::after { content: attr(data-content); white-space: nowrap; width: max-content; height: 100%; display: inline-block; } /* Text Styling */ #brand-scroller-id .slider-text { color: #000000; text-transform: uppercase; font-size: 160px; font-weight: 300; padding-right: 50px; font-family: 'mundial-narrow-variable', sans-serif; white-space: nowrap; display: inline-block; height: 100%; } /* Animation Definition */ @keyframes brandSlide { 0% { transform: translateX(-66.666%); } 100% { transform: translateX(-33.333%); } } /* Mobile Anpassungen für Brand Scroller */ @media screen and (max-width: 1023px) { #brand-scroller-id.brand-scroller.ptsc.pt-sc.sc-custom-html { width: 100%; overflow: hidden; position: relative; margin-top: 60px; } #brand-scroller-id .slider-container { position: absolute; width: 100vw; height: 100%; left: 50%; top: 50%; transform: translate(-50%, -50%); overflow: visible; } #brand-scroller-id .slider-track { position: relative; display: flex; white-space: nowrap; will-change: transform; animation: brandSlide 30s linear infinite; width: max-content; } #brand-scroller-id .slider-text { font-size: 120px; padding-right: 40px; } } @media screen and (max-width: 768px) { #brand-scroller-id.brand-scroller.ptsc.pt-sc.sc-custom-html { /* Entfernt feste height und margin-top um dynamische Einstellungen zu ermöglichen */ margin-top: 120px; } #brand-scroller-id .slider-container { height: 100%; } #brand-scroller-id .slider-text { font-size: 90px; padding-right: 30px; } } @media screen and (max-width: 480px) { #brand-scroller-id.brand-scroller.ptsc.pt-sc.sc-custom-html { margin-top: 120px; } #brand-scroller-id .slider-container { height: 100%; } #brand-scroller-id .slider-text { font-size: 60px; padding-right: 25px; } } @media screen and (max-width: 320px) { #brand-scroller-id.brand-scroller.ptsc.pt-sc.sc-custom-html { margin-top: 120px; } #brand-scroller-id .slider-container { height: 100%; } #brand-scroller-id .slider-text { font-size: 40px; padding-right: 20px; } } /* Dark Mode Anpassung */ .site-dark #brand-scroller-id .slider-text { color: #ffffff; } .site-dark #brand-scroller-id .slider-container { background-color: transparent; } /*-------------------------------- ENDE - SECTION4 | Events Brand Scroller - ENDE --------------------------------*/ /*-------------------------------- HTML Custom Text + SECTION4 EVENTS | TEXT + TAGBUTTONS --------------------------------*/ .custom-text-events { max-width: 1200px; min-width: 621px; margin: 0 auto; text-align: left; color: #000000; padding-left: 0px; padding-top: 50px; position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; box-sizing: border-box; } /* Desktop-only max-height - wird in mobiler Ansicht überschrieben */ @media screen and (min-width: 1024px) { .custom-text-events { max-height: 45vh; } } .custom-text-events .heading { text-transform: uppercase; color: #000000; font-size: 16px; font-weight: 300; line-height: 14px; letter-spacing: 1px; margin-bottom: 26px; /* Bündige Ausrichtung mit intro-text */ padding-left: 10px; max-width: 783px; text-align: left; } .intro-text-events { font-size: 48px; font-weight: 300; /* Leichtere Schrift wie im Design */ letter-spacing: 0px; text-align: left; padding-left: 10px; margin-bottom: 40px; max-width: 783px; min-height: auto; line-height: 49.5px; width: 100%; overflow-wrap: break-word; } /* Dark Mode Styles für Events Bereich */ body.site-dark .custom-text-events, body.site-dark .custom-text-events .heading, body.site-dark .custom-text-events .intro-text-events, body.site-dark .custom-text-events .tag-heading, body.site-dark .custom-text-events .tag-button-container, body.site-dark .custom-text-events .tag-event-button { color: #ffffff !important; } body.site-dark .custom-text-events .tag-event-button { border-color: #ffffff !important; } /* Zusätzliche Spezifität für verschachtelte Elemente */ body.site-dark .ptsc.pt-sc.sc-custom-html .custom-text-events, body.site-dark .ptsc.pt-sc.sc-custom-html .custom-text-events * { color: #ffffff !important; } /* ------------- VERBESSERTE MOBILE ANSICHT ------------- */ /* Erste mobile Anpassungen - große Tablets und kleine Laptops */ @media screen and (max-width: 1023px) { .custom-text-events { min-width: unset; width: 100%; max-width: 100%; box-sizing: border-box; padding: 20px; overflow: visible; max-height: none !important; /* Entfernt Desktop max-height für mobile Ansicht */ height: auto !important; /* Erlaubt dynamische Höhe */ } .intro-text-events { width: 100%; min-height: auto; max-width: 100%; overflow-wrap: break-word; hyphens: auto; padding-right: 20px; font-size: 42px; line-height: 46px; } .custom-text-events .heading { width: 100%; max-width: 100%; } } /* Medium-sized devices - Tablets und große Smartphones */ @media screen and (max-width: 768px) { .custom-text-events { min-width: 0; padding: 15px; overflow-x: visible; } .intro-text-events { font-size: 36px; line-height: 40px; margin-bottom: 30px; padding-right: 15px; width: 100%; max-width: 100%; } .custom-text-events .heading { margin-bottom: 20px; font-size: 15px; } } /* Smartphones (landscape) */ @media screen and (max-width: 640px) { .custom-text-events { padding: 12px; } .intro-text-events { font-size: 30px; line-height: 34px; margin-bottom: 25px; padding-right: 12px; } .custom-text-events .heading { font-size: 14px; line-height: 16px; } } /* iPhone X, 11, 12, 13 (375x812), iPhone 8, SE2 (375x667) */ @media screen and (max-width: 480px) { .custom-text-events { padding: 10px; overflow: visible; } .intro-text-events { font-size: 26px; line-height: 30px; margin-bottom: 20px; padding-right: 10px; min-height: 0; } .custom-text-events .heading { font-size: 13px; line-height: 15px; margin-bottom: 15px; } } /* Sehr kleine Smartphones und ältere Geräte */ @media screen and (max-width: 320px) { .custom-text-events { padding: 8px; max-height: none !important; /* Entfernt alle Höhenbeschränkungen */ height: auto !important; /* Erlaubt volle dynamische Höhe */ min-height: auto !important; /* Entfernt Mindesthöhe */ overflow: visible !important; /* Verhindert Abschneiden */ } .intro-text-events { font-size: 22px; line-height: 26px; margin-bottom: 15px; padding-right: 8px; } .custom-text-events .heading { font-size: 12px; line-height: 14px; margin-bottom: 12px; } } /* Zusätzliche Optimierungen für Container-Verhalten */ @media screen and (max-width: 1023px) { #custom-text-events-id { width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; box-sizing: border-box !important; overflow-x: hidden !important; overflow-y: visible !important; /* Erlaubt vertikales Scrollen wenn nötig */ position: relative !important; height: auto !important; /* Respektiert dynamische Höheneinstellung */ max-height: none !important; /* Entfernt alle Höhenbeschränkungen */ } #custom-text-events-id > * { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } } /* Spezifische Anpassungen für 320px Breakpoint */ @media screen and (max-width: 320px) { #custom-text-events-id { height: auto !important; /* Respektiert die dynamische 100vh Einstellung */ max-height: none !important; /* Entfernt alle CSS-Höhenbeschränkungen */ min-height: auto !important; /* Flexible Mindesthöhe */ overflow: visible !important; /* Verhindert Abschneiden von Inhalten */ } } /*-------------------------------- HTML Custom TAGBUTTONS + Section4 EVENTS | TAGBUTTONS --------------------------------*/ .tag-heading { color: #000000 !important; margin-bottom: 15px; padding-left: 10px; text-align: left; display: block; width: 100%; font-size: 16px; line-height: 24.75px; font-weight: 300; } .tag-button-container { font-family: 'mundial-narrow-variable', sans-serif; font-size: 16px; line-height: 18px; font-weight: 300; text-align: left; color: #000000; margin-bottom: 20px; padding-left: 0px; display: flex; flex-wrap: wrap; max-width: 800px; margin-top: 70px; } .tag-event-button { border: 1px solid #000000; font-family: 'mundial-narrow-variable', sans-serif; color: #000000; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 20px; cursor: default; background-color: transparent; font-size: 16px; margin: 10px; } .konzerte { width: 124px; } .kulturveranstaltungen { width: 224px; } .festivals { width: 123px; } .privatfeiern { width: 145px; } .open-air { width: 145px; } .indoor { width: 109px; } .messestande { width: 158px; } /* Mobile Anpassungen für Tag-Buttons */ @media screen and (max-width: 1023px) { .tag-button-container { padding-left: 20px; /* Angleichung an custom-text-events Padding */ width: 100%; /* Volle Breite */ box-sizing: border-box; /* Padding wird in Breite einberechnet */ } .tag-heading { padding-left: 20px; /* Angleichung an container Padding */ } } @media screen and (max-width: 768px) { .tag-button-container { padding-left: 15px; /* Reduziertes Padding für Tablets */ } .tag-heading { padding-left: 15px; } } @media screen and (max-width: 640px) { .tag-button-container { padding-left: 12px; /* Reduziertes Padding für große Smartphones */ } .tag-heading { padding-left: 12px; } .tag-event-button { margin: 8px; /* Reduzierter Abstand zwischen Buttons */ } } @media screen and (max-width: 480px) { .tag-button-container { padding-left: 10px; /* Reduziertes Padding für mittlere Smartphones */ } .tag-heading { padding-left: 10px; } .tag-event-button { margin: 6px; /* Noch kleinerer Abstand zwischen Buttons */ height: 36px; /* Reduzierte Button-Höhe */ font-size: 14px; /* Kleinere Schrift */ } } @media screen and (max-width: 320px) { .tag-button-container { padding-left: 8px; /* Minimales Padding für kleine Smartphones */ } .tag-heading { padding-left: 8px; } .tag-event-button { margin: 4px; /* Minimaler Abstand zwischen Buttons */ height: 32px; /* Minimale Button-Höhe */ font-size: 13px; /* Minimale Schriftgröße */ } } /*-------------------------------- ENDE - HTML Custom Text + SECTION4 EVENTS | TEXT + TAGBUTTONS - ENDE --------------------------------*/ /* --------------------------------------- AKKORDEON SECTION - Section4 | Events Akkordeon2 --------------------------------------- */ /* Akkordeon-Wrapper für Zentrierung */ .akkordeon-section-wrapper { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; width: 100%; padding: 0px; box-sizing: border-box; font-family: 'mundial-narrow-variable', sans-serif; color: #000000; } #akkordeon-v2-styles-id-events { position: relative; width: 100%; display: flex; align-items: center; justify-content: center; padding: 0; min-height: 100vh; overflow: hidden; font-family: 'mundial-narrow-variable', sans-serif; color: #000000; } #akkordeon-v2-styles-id-events .akkordeon-v2-styles-events { width: 100%; height: 100vh; max-width: 100%; position: relative; display: flex; align-items: center; justify-content: center; padding: 0px; overflow: hidden; color: #000000; } .accordion-container { display: flex; width: 100%; height: 100%; max-height: 800px; position: relative; font-family: 'mundial-narrow-variable', sans-serif; justify-content: flex-start; overflow: hidden; box-sizing: border-box; padding: 50px; } /* Basis-Tab-Styling */ .accordion-tab { position: relative; display: flex; flex-direction: column; width: 76px; height: 100%; overflow: hidden; transition: all 0.5s ease; box-sizing: border-box; flex-shrink: 0; } /* Tab-Elemente */ .accordion-indicator { position: absolute; z-index: 3; color: #FF003A; } /* Tab-Elemente */ .accordion-number { position: absolute; z-index: 3; color: #000000; } .accordion-number { top: 15px; left: 10px; font-size: 48px; font-weight: 300; } .accordion-indicator { bottom: 1px; left: 10px; font-size: 16px; font-weight: lighter; } /* Vertikale Linien */ .vertical-line { position: absolute; top: 0; width: 1px; height: 100%; background-color: #000000; z-index: 2; } /* Geschlossener Tab */ .accordion-tab:not(.active) .vertical-line.left-line { left:40px; } .accordion-tab:not(.active) .vertical-line.right-line { display: none; /* Keine rechte Linie im geschlossenen Zustand */ } /* Aktiver Tab */ .accordion-tab.active { width: 480px; min-width: auto; max-width: 480px; flex: 0 0 auto; } .accordion-tab.active .vertical-line.left-line { left: 35px; } .accordion-tab.active .vertical-line.right-line { right: 0; display: block; /* Zeige rechte Linie nur im aktiven Zustand */ } /* Content-Bereich */ .accordion-content { display: none; flex-direction: column; width: 100%; height: 100%; padding: 20px 30px 20px 50px; overflow: hidden; box-sizing: border-box; } .accordion-tab.active .accordion-content { display: flex; } /* Content-Layout */ .content-wrapper { display: flex; flex-direction: column; height: 100%; width: 100%; gap: 30px; box-sizing: border-box; } /* Text-Container */ .text-container { flex: 0 1 auto; width: 100%; max-width: 100%; max-height: 50%; overflow-y: auto; box-sizing: border-box; font-size: 16px; line-height: 27.75px; font-weight: 300; font-family: 'mundial-narrow-variable', sans-serif; color: #000000; } /* Titel-Styling */ .accordion-title { font-size: 16px; font-weight: bold; font-family: 'mundial-narrow-variable', sans-serif; margin-bottom: 18px; text-transform: uppercase; } /* Theme-Farben für Akkordeon-Titel */ .accordion-title.h { color: var(--themecolor, #000000); /* Fallback zur Standard-Farbe */ } /* Basis-Farbe nur wenn keine Theme-Farbe definiert */ .accordion-title:not(.h) { color: #000000; } .accordion-text { margin-bottom: 16px; line-height: 27.75px; width: 100%; max-width: 100%; word-break: break-word; hyphens: auto; font-weight: 300; font-size: 16px; font-family: 'mundial-narrow-variable', sans-serif; color: #000000; } /* Bild-Container */ .image-container { flex: 1 0 200px; display: flex; align-items: flex-end; /* Änderung zu flex-end für Ausrichtung nach unten */ justify-content: center; overflow: hidden; margin-bottom: -25px; /* Entferne negative margins */ height: 100%; /* Volle Höhe */ } .accordion-image { max-width: 100%; max-height: 100%; object-fit: contain; margin-bottom: 0; /* Entferne negative margins */ align-self: flex-end; /* Ausrichtung nach unten */ } /* --------------------------------------- ENDE AKKORDEON SECTION - Section4 | Events Akkordeon2 - ENDE --------------------------------------- */ /*-------------------------------- HTML Custom Section5 | Text - WIR SIND READY --------------------------------*/ #wir-sind-ready-id { position: relative; display: flex; align-items: left; justify-content: center; min-height: 100vh; width: 100%; overflow: visible; color: #000000; } #wir-sind-ready-id * { color: inherit; } .wir-sind-ready { position: relative; display: flex; flex-direction: column; align-items: left; justify-content: center; min-height: 100vh; width: 100%; margin-left: 150px; } .statement-text-ready { position: relative; width: 947px; height: 152px; font-size: 172px; font-style: normal; font-weight: 100; line-height: 165px; letter-spacing: 0px; text-align: left; text-transform: uppercase; opacity: 1; margin: 0; } /* Mobile Anpassungen */ @media screen and (max-width: 1023px) { #wir-sind-ready-id { margin: 0 !important; padding: 0 15px !important; width: 100% !important; min-height: auto !important; height: auto !important; overflow: visible !important; } .wir-sind-ready { min-height: auto !important; margin: 100px 0 !important; padding-left: 5px !important; width: 100% !important; max-width: 100% !important; margin-left: 0 !important; } .statement-text-ready { font-size: 151px; line-height: 1.2; min-height: auto !important; margin: 0 !important; padding: 0 !important; width: 100%; max-width: 100%; } } @media screen and (max-width: 768px) { #wir-sind-ready-id { margin: 0 !important; padding: 0 15px !important; width: 100% !important; min-height: auto !important; height: auto !important; overflow: visible !important; } .wir-sind-ready { min-height: auto !important; margin: 100px 0 !important; padding-left: 5px !important; width: 100% !important; max-width: 100% !important; margin-left: 0 !important; } .statement-text-ready { font-size: 150px; line-height: 115px; min-height: auto !important; margin: 0 !important; padding: 0 !important; width: 100%; max-width: 100%; } } @media screen and (max-width: 640px) { #wir-sind-ready-id { margin: 0 !important; padding: 0 15px !important; width: 100% !important; min-height: auto !important; height: auto !important; overflow: visible !important; } .wir-sind-ready { min-height: auto !important; margin: 100px 0 !important; padding-left: 5px !important; width: 100% !important; max-width: 100% !important; margin-left: 0 !important; } .statement-text-ready { font-size: 100px; line-height: 115px; min-height: auto !important; margin: 0 !important; padding: 0 !important; width: 100%; max-width: 100%; } } @media screen and (max-width: 480px) { #wir-sind-ready-id { margin: 0 !important; padding: 0 15px !important; width: 100% !important; min-height: auto !important; height: auto !important; overflow: visible !important; } .wir-sind-ready { min-height: auto !important; margin: 100px 0 !important; padding-left: 5px !important; width: 100% !important; max-width: 100% !important; margin-left: 0 !important; } .statement-text-ready { font-size: 70px; line-height: 115px; min-height: auto !important; margin: 0 !important; padding: 0 !important; width: 100%; max-width: 100%; } } @media screen and (max-width: 320px) { #wir-sind-ready-id { margin: 0 !important; padding: 0 15px !important; width: 100% !important; min-height: auto !important; height: auto !important; overflow: visible !important; } .wir-sind-ready { min-height: auto !important; margin: 100px 0 !important; padding-left: 5px !important; width: 100% !important; max-width: 100% !important; margin-left: 0 !important; } .statement-text-ready { font-size: 50px; line-height: 115px; min-height: auto !important; margin: 0 !important; padding: 0 !important; width: 100%; max-width: 100%; } } /* Dark Mode Anpassungen für Einzigartig Text */ .site-dark #wir-sind-ready-id, .site-dark #wir-sind-ready-id *, .site-dark .wir-sind-ready, .site-dark .statement-text-ready { color: #ffffff !important; } /*-------------------------- Dark Mode Anpassung ------------------- */ /* Dark Mode Anpassung für custom-text-counter-5 */ .site-dark #custom-text-counter-5, .site-dark #custom-text-counter-5 *, .site-dark .custom-text-counter-5, .site-dark .custom-text-counter-5 .heading, .site-dark .custom-text-counter-5 .intro-text-counter, .site-dark .counter-grid, .site-dark .counter-item, .site-dark .counter-number, .site-dark .counter-title { color: #ffffff !important; } /* Zusätzliche Spezifität für verschachtelte Elemente */ .site-dark .ptsc.pt-sc.sc-custom-html.custom-text-counter-5 { color: #ffffff !important; } .site-dark .ptsc.pt-sc.sc-custom-html.custom-text-counter-5 * { color: #ffffff !important; } /* Dark Mode Anpassung für custom-text-roundgif-3 */ .site-dark #custom-text-roundgif-3, .site-dark #custom-text-roundgif-3 *, .site-dark .custom-text-roundgif-3, .site-dark .custom-text-roundgif-3 * { color: #ffffff !important; } /* Dark Mode Anpassung für Akkordeon */ .site-dark #akkordeon-v2-styles-id, .site-dark #akkordeon-v2-styles-id *, .site-dark .akkordeon-v2-styles, .site-dark .akkordeon-section-wrapper, .site-dark .accordion-container, .site-dark .accordion-number, .site-dark .accordion-title, .site-dark .accordion-text, .site-dark .text-container { color: #ffffff !important; } body.site-dark #akkordeon-v2-styles-id .accordion-indicator { color: #FF003A !important; } /* Dark Mode Anpassungen für Events */ .site-dark #custom-text-events-id, .site-dark #custom-text-events-id * { color: #ffffff !important; } .site-dark .vertical-line { background-color: #ffffff !important; } /* Dark Mode Anpassungen für den Leistungen-Bereich */ .site-dark .title-leistungen { color: #ffffff; } .site-dark .vertical-line-leistungen { border-left-color: #ffffff; } /* Dark Mode Anpassungen für den Tag-Button-Bereich */ .site-dark .tag-heading { color: #ffffff !important; } .site-dark .tag-button-container { color: #ffffff; } .site-dark .tag-event-button { color: #ffffff; border-color: #ffffff; } /*-------------------------- ENDE - Dark Mode Anpassung - ENDE ------------------- */ /*------------------------------ SONSTIGES - Mobile Layout Fixes - Prevent Shifting and White Space ------------------------------------------*/ @media screen and (max-width: 1023px) { html, body { width: 100%; max-width: 100%; overflow-x: hidden; margin: 0; padding: 0; position: relative; } /* Hauptcontainer Fix */ .ptsc-list.pt-hs-content { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; overflow-x: hidden !important; box-sizing: border-box !important; left: 0 !important; right: 0 !important; position: relative !important; } /* Grundlegende Container-Fixes */ .ptsc-list.pt-hs-content > *, #grotec-home-id, .grotec-home-container, .grotec-home, .custom-text-counter-5, .custom-text-roundgif-3, .custom-text-events, .akkordeon-section-wrapper, .grotec-footer-container { width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; box-sizing: border-box !important; overflow-x: hidden !important; position: relative !important; } /* Innere Container-Anpassungen */ .grotec-logo-container-home, .grotec-logo-figure-home, .grotec-columns-wrapper, .accordion-container, .content-wrapper { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; margin-left: auto !important; margin-right: auto !important; position: relative !important; } /* Content Padding für bessere Lesbarkeit */ .grotec-logo-container-home, .custom-text-counter-5, .custom-text-roundgif-3, .custom-text-events { padding-left: 0 !important; padding-right: 0 !important; } } @media screen and (max-width: 768px) { .ptsc-list.pt-hs-content > *, .grotec-logo-container-home, .custom-text-counter-5, .custom-text-roundgif-3, .custom-text-events { padding-left: 0 !important; padding-right: 0 !important; } } @media screen and (max-width: 480px) { .ptsc-list.pt-hs-content > *, .grotec-logo-container-home, .custom-text-counter-5, .custom-text-roundgif-3, .custom-text-events { padding-left: 0 !important; padding-right: 0 !important; } } /* Mobile Optimierungen für Sektionsabstände */ @media screen and (max-width: 1023px) { /* Entfernung von Abständen zwischen Hauptsektionen */ #grotec-home-id { min-height: auto !important; margin: 0 !important; padding: 0 !important; } .grotec-home { min-height: auto !important; margin: 0 !important; padding: 0 !important; } /* Anpassung der Container für nahtlose Übergänge */ .grotec-home-container { margin-bottom: 0 !important; padding-bottom: 0 !important; } /* Optimierung der Inhaltscontainer */ .grotec-logo-container-home { padding: 15px !important; margin: 0 !important; min-height: auto !important; } /* Thecs Theme Kompatibilität */ .ptsc-list.pt-hs-content > section { min-height: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; } } @media screen and (max-width: 768px) { .grotec-logo-container-home { padding: 10px !important; } .wir-sind-ready { margin-left: 0 !important; } } @media screen and (max-width: 480px) { .grotec-logo-container-home { padding: 5px !important; } } /* Mobile Anpassungen für THEC Shortcode Box */ @media screen and (max-width: 1023px) { .ptsc-list .pt-hs-content > section { margin-top: 0 !important; margin-bottom: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; } #wir-sind-ready-id { margin: 0 !important; padding-left: 15px !important; } } /* Mobile Anpassungen AKKORDEON Ausblenden ausgeblendet */ @media screen and (max-width: 1023px) { .accordion-container { display: none !important; } .akkordeon-section-wrapper, #akkordeon-v2-styles-id, #akkordeon-v2-styles-id-events, #akkordeon-v2-styles-id .akkordeon-v2-styles { min-height: 0 !important; height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; } } /* Mobile Anpassungen (max-width: 768px) */ @media screen and (max-width: 768px) { /* Header Anpassungen */ .logo img { min-height: 80px !important; margin-left: 10px; } /* Hauptmenü Mobile Anpassungen */ .main-menu, #main-menu-list { top: 120px; padding-right: 15px; margin-left: 0; } .main-menu a, #main-menu-list a { font-size: 14px !important; padding: 8px 0; } /* Header Hintergrund */ header .menu-bg { width: 100px; } /* Scrollbar Optimierung für Touch-Geräte */ .main-menu::-webkit-scrollbar { width: 3px; } /* Verbesserte Touch-Ziele */ .main-menu a, #main-menu-list a { min-height: 44px; display: flex; align-items: center; } } /* Footer Right Links */ .footer-right a { transition: opacity 0.3s ease; display: inline-block; line-height: 1.5; font-size: 20px; } .footer-right a:hover { opacity: 0.7; } .footer-right p { margin: 0; font-size: 20px; font-weight: 300; font-family: 'mundial-narrow-variable', sans-serif; } /* Mobile Anpassungen für Footer Links */ @media screen and (max-width: 768px) { .footer-right p { font-size: 20px; text-align: left; } } /* ------------- DATENSCHUTZ INTRO | Neue Seite - START ------------- */ .datenschutz-intro * { margin: 0; padding: 0; box-sizing: border-box; } .datenschutz-intro body, html { height: 100%; width: 100%; font-family: "mundial-narrow-variable", sans-serif; background-color: #ffffff; color: #000000; overflow-x: hidden; } .datenschutz-intro .fullscreen-intro { height: 100vh; width: 100vw; display: flex; flex-direction: column; align-items: flex-start; padding: clamp(20px, 5vw, 60px); position: relative; } .datenschutz-intro .scroll-hint { position: relative; font-size: 16px; font-family: "mundial-narrow-variable", sans-serif; letter-spacing: 0.8px; color: #000000; text-transform: uppercase; text-align: left; opacity: 1; font-weight: 300; margin-bottom: clamp(40px, 15vh, 169px); padding-left: clamp(5px, 1vw, 10px); } .datenschutz-intro .title { font-variation-settings: "wght" 100; font-weight: 100; font-size: clamp(48px, 12vw, 172px); font-family: "mundial-narrow-variable", sans-serif; letter-spacing: 0px; opacity: 1; color: #000000; line-height: 1; text-transform: uppercase; text-align: left; word-break: break-word; width: 100%; } .datenschutz-intro .line { margin-bottom: clamp(5px, 1vw, 10px); } /* ------------- DATENSCHUTZ INTRO | Neue Seite - ENDE ------------- */ /* ------------- DATENSCHUTZ FLIES-TEXT | Neue Seite - START ------------- */ .datenschutz-fliestext { } .datenschutz-fliestext .kontaktblock { margin-top: 124px; margin-bottom: auto; } .datenschutz-fliestext .firma, .datenschutz-fliestext .adresse, .datenschutz-fliestext .phone { letter-spacing: 0px; color: #000000; opacity: 1; font-weight: 300; font-size: 48px; font-family: 'mundial-narrow-variable', sans-serif; line-height: 49.5px; } .phone a { color: #000000; text-decoration: none; } @media (max-width: 768px) { .datenschutz-fliestext .firma, .datenschutz-fliestext .adresse, .datenschutz-fliestext .phone, .datenschutz-fliestext .kontaktblock { font-size: 28px; line-height: 32px; margin-top: 10px; } } .datenschutz-fliestext .browser-support-links { max-width: 700px; margin: 40px auto; font-family: 'mundial-narrow-variable', sans-serif; font-size: 16px; line-height: 1.6; color: #000000; } .datenschutz-fliestext .browser-support-links p { margin-bottom: 35px; } .datenschutz-fliestext .browser-support-links p strong { margin-bottom: -40px; /* Abstand zwischen Titel & Link */ } .datenschutz-fliestext .browser-support-links a { color: #000000; text-decoration: underline; word-break: break-word; } .datenschutz-fliestext .browser-support-links a:hover { color: #FF003A; } .browser-support-links p strong { display: block; margin-bottom: 8px; /* Abstand zwischen Titel & Link */ } /* Erweiterte Column Width für Article-Modul Breitere Text Inhalt */ html:not(.win-v) .sc-article.w-large > .wrap { -webkit-column-width: calc(450px + 10vw) !important; column-width: calc(450px + 10vw) !important; } html:not(.win-v) .sc-article.w-large > .wrap > * { max-width: calc(450px + 10vw) !important; } /* Schriftgröße für Paragraphen im Article-Shortcode */ .sc-article p { font-size: 16px !important; } /* Dark Mode Anpassungen für Datenschutz Seite */ .site-dark .datenschutz-intro .title, .site-dark .datenschutz-intro .line, .site-dark .datenschutz-intro .scroll-hint, .site-dark .datenschutz-intro .title, .site-dark .datenschutz-fliestext, .site-dark .datenschutz-fliestext p, .site-dark .datenschutz-fliestext h1, .site-dark .datenschutz-fliestext h2, .site-dark .datenschutz-fliestext h3, .site-dark .datenschutz-fliestext h4, .site-dark .datenschutz-fliestext h5, .site-dark .datenschutz-fliestext h6, .site-dark .datenschutz-fliestext ul, .site-dark .datenschutz-fliestext ol, .site-dark .datenschutz-fliestext li, .site-dark .datenschutz-fliestext .firma, .site-dark .datenschutz-fliestext .adresse, .site-dark .datenschutz-fliestext .phone, .site-dark .datenschutz-fliestext .kontaktblock, .site-dark .datenschutz-fliestext .browser-support-links p, .site-dark .datenschutz-fliestext .browser-support-links a, .site-dark .datenschutz-fliestext .sc-article.w-large .wrap, .site-dark .datenschutz-fliestext .sc-article p { color: #ffffff !important; } /* Links im Dark Mode */ .site-dark .datenschutz-fliestext a, .site-dark .datenschutz-fliestext .browser-support-links a { color: #ffffff !important; text-decoration: underline !important; } .site-dark .datenschutz-fliestext a:hover, .site-dark .datenschutz-fliestext .browser-support-links a:hover { opacity: 0.8 !important; } /* ------------- DATENSCHUTZ FLIES-TEXT | Neue Seite - ENDE ------------- */ @media screen and (min-width: 768px){ body.m-mode:not(.single) .main-content, .m-mode .post-banner ~ div{ max-width: 100%; margin-left: auto; margin-right: auto; } .m-mode .ptsc-list{ margin-top: 50px; margin-bottom: 50px; } } /* Global Font-Familie Definition */ body, .main-menu, .footer-right p, .counter-title, .accordion-text, .accordion-title, .text-container, .tag-button-container, .statement-text-ready { font-family: "mundial-narrow-variable", sans-serif; } /* Spezielle Font-Weight Anwendungen */ .statement-text-ready, .statement-text, h1, .h1 { font-variation-settings: "wght" 100; font-weight: 100; } /* Dark Mode Anpassungen für Kontaktformular */ .site-dark .label-title { color: #ffffff !important; } /* Logo Anpassung für hellen Modus auf dunklem Hintergrund */ header.style-01.style-01-02 .logo img { filter: brightness(0) invert(1); } /* Dark Mode Anpassungen */ .site-dark header.style-01.style-01-02 .menu-bg { background: #ffffff !important; } .site-dark header.style-01.style-01-02 .logo img { filter: none; } /* Hauptfarbe und Scrollbar Anpassungen */ .blog-list:not(.raw-proportion) .item .img, .list-scroller-target, .pt-social a, .pic-list .item:hover .bg-full, .blog-list .item .h a, a.more:before, a.list-date, .pages a, header a.remove, i.btn, i.btn:before, i.btn:after, i.close-search, .header-search form:before, header a, .list-category a, .list-category, .pic-list span.price { transition: all 0.3s; } .pages a:hover, header .list-scroller-target, i.close-sub-menu:hover, i.close-hidden-menu:hover, .call-cart.btn:hover:after, .call-hidden-menu.btn:hover:after, .call-search.btn:hover:after { background-color: #641c34; } .pt-bar-group:hover .pt-bar, .pths-bar-full .pt-mouse-scroll-boxed .list-scroller-target, .comment-root:before { background-color: #641c34; } .header-search.hover form:before, header a.remove:hover, .summary > .price ins .amount span, .post-meta a:hover, .owl-nav > div:hover, .call-widget-sub:hover { color: #641c34; } header .main-menu .sub-no-img .sub-menu, .m-search:focus, .wpcf7 form span.wpcf7-form-control-wrap input:focus, textarea:focus { border-color: #641c34; } /* Scrollbar Styles */ .list-scroller-target { position: absolute; width: 100%; height: 6px; left: 0; bottom: 0; opacity: 0; z-index: 2; transition: all 0.3s ease; } header .list-scroller:hover .list-scroller-target { height: 20px; } .sub-menu-wrap.open .list-scroller-target, header.style-05.open .list-scroller-target { opacity: 1; } .pt-mouse-scroll-boxed .list-scroller-target { width: 20px; height: 20px; right: -20px; left: auto; top: -8px; opacity: 1; } .pths-bar-full .pt-mouse-scroll-boxed .list-scroller-target { left: 0; right: auto; top: 0; height: 100%; width: 20vw; } /* Loading Style Anpassungen */ body.pt-loader-01 .pic-loader:after, .wpcf7-form .ajax-loader.is-active:after, body.pt-loader-01 .site-loader .loader-icon:after { border-left-color: #641c34; } body.pt-loader-02 .pic-loader i, body.pt-loader-02 .site-loader:not(.animate-hide) .loader-icon i { background-color: #641c34; } body.pt-loader-03 .pic-loader i:nth-child(1), body.pt-loader-03 .site-loader:not(.animate-hide) .loader-icon i:nth-child(1) { background-color: #641c34; } /* ================================ HEADER & MENU FLUID DESIGN EXTENSION Für Desktop-Auflösungen 1024px - 2560px Basis: 1920x1080 (bleibt unverändert) Mobile CSS (max-width: 1023px) bleibt unverändert ================================ */ /* Fluid Design Variables für Header und Menü */ :root { /* Header Typography Scale */ --header-menu-font-sm: clamp(13px, 1.2vw, 16px); /* 13px - 16px */ --header-menu-font-base: clamp(14px, 1.4vw, 18px); /* 14px - 18px */ --header-menu-font-lg: clamp(15px, 1.6vw, 20px); /* 15px - 20px */ /* Header Spacing Scale */ --header-space-xs: clamp(3px, 0.8vw, 6px); /* 3px - 6px */ --header-space-sm: clamp(5px, 1vw, 8px); /* 5px - 8px */ --header-space-md: clamp(8px, 1.5vw, 12px); /* 8px - 12px */ --header-space-lg: clamp(15px, 2vw, 25px); /* 15px - 25px */ --header-space-xl: clamp(20px, 3vw, 35px); /* 20px - 35px */ /* Header Layout Dimensions */ --header-logo-height: clamp(90px, 8vw, 130px); /* 90px - 130px */ --header-menu-bg-width: clamp(100px, 8vw, 140px); /* 100px - 140px */ --header-menu-left: clamp(10px, 2vw, 22px); /* 20px - 30px */ --header-menu-bottom: clamp(200px, 18vw, 240px); /* 200px - 280px */ --header-menu-gap: clamp(0px, 1vw, 5px); /* 15px - 25px */ --header-menu-margin-left: clamp(3px, 0.5vw, 8px); /* 3px - 8px */ --header-menu-padding-h: clamp(15px, 1.8vw, 25px); /* 15px - 25px */ --header-menu-padding-v: clamp(6px, 0.8vw, 10px); /* 6px - 10px */ --header-logo-margin-left: clamp(-20px, -2vw, -30px); /* -20px - -30px */ --header-logo-margin-bottom: clamp(15px, 1.8vw, 25px); /* 15px - 25px */ --header-menu-bg-padding: clamp(3px, 0.5vw, 7px); /* 3px - 7px */ } /* Desktop-only Fluid Anpassungen für Header (1024px - 2560px) */ @media screen and (min-width: 1024px) { /* Logo mit Fluid Sizing */ .logo img { min-height: var(--header-logo-height) !important; } /* Header Style 01 Logo Positionierung - Fluid */ header.style-01 .logo { margin-bottom: var(--header-logo-margin-bottom); margin-left: var(--header-logo-margin-left); } /* Menü Hintergrund Container - Fluid */ header .menu-bg { width: var(--header-menu-bg-width); padding-right: var(--header-menu-bg-padding); } /* Hauptmenü Container - Fluid Positioning */ .main-menu, #main-menu-list { left: var(--header-menu-left); bottom: var(--header-menu-bottom); gap: var(--header-menu-gap); margin-left: var(--header-menu-margin-left); } /* Menü-Links - Fluid Typography und Spacing */ .main-menu a, #main-menu-list a { font-size: var(--header-menu-font-base) !important; padding: var(--header-menu-padding-v) var(--header-menu-padding-h); } /* Datenschutz-Seite spezifische Anpassungen - Fluid */ .page-id-2268 .main-menu, .page-id-2268 #main-menu-list { left: var(--header-menu-left); bottom: var(--header-menu-bottom); gap: var(--header-menu-gap); margin-left: clamp(8px, 1vw, 15px); padding-right: clamp(35px, 4vw, 60px); } .page-id-2268 .main-menu a, .page-id-2268 #main-menu-list a { font-size: var(--header-menu-font-base); padding: var(--header-menu-padding-v) var(--header-menu-padding-h); } } /* Spezielle Anpassungen für kleinere Desktop-Auflösungen (1024px) */ @media screen and (min-width: 1024px) and (max-width: 1024px) { .main-menu, #main-menu-list { bottom: clamp(-80px, 16vw, -70px) !important; left: clamp(-92px, 1vw, -92px) !important; gap: clamp(10px, 2vw, 20px) !important; } .main-menu a, #main-menu-list a { font-size: clamp(13px, 1.3vw, 16px) !important; padding: clamp(5px, 0.6vw, 8px) clamp(12px, 1.5vw, 20px); } header .menu-bg { width: clamp(85px, 7vw, 115px); } .logo img { min-height: clamp(80px, 7vw, 110px) !important; margin-left: clamp(0px, 3vw, 5px); } header.style-01 .main-menu li.depth-1{ padding-right: 5px; } } /* Spezielle Anpassungen für kleinere Desktop-Auflösungen (1025px - 1279px) */ @media screen and (min-width: 1025px) and (max-width: 1279px) { .main-menu, #main-menu-list { bottom: clamp(185px, 16vw, 190px); left: clamp(10px, 1vw, 15px); gap: clamp(0px, 1vw, 3px); } .main-menu a, #main-menu-list a { font-size: clamp(13px, 1.3vw, 16px) !important; padding: clamp(5px, 0.6vw, 8px) clamp(12px, 1.5vw, 20px); } header .menu-bg { width: clamp(85px, 7vw, 115px); } .logo img { min-height: clamp(80px, 7vw, 110px) !important; margin-left: clamp(0px, 3vw, 5px); } header.style-01 .main-menu li.depth-1{ padding-right: 8px; } } /* Spezielle Anpassungen für kleinere Desktop-Auflösungen (1px - 1366px) */ @media screen and (min-width: 1280px) and (max-width: 1366px) { .main-menu, #main-menu-list { bottom: clamp(185px, 16vw, 190px); left: clamp(10px, 1vw, 15px); gap: clamp(0px, 1vw, 3px); } .main-menu a, #main-menu-list a { font-size: clamp(13px, 1.3vw, 16px) !important; padding: clamp(5px, 0.6vw, 8px) clamp(12px, 1.5vw, 20px); } header .menu-bg { width: clamp(85px, 7vw, 115px); } .logo img { min-height: clamp(80px, 7vw, 110px) !important; margin-left: clamp(0px, 3vw, 5px); } header.style-01 .main-menu li.depth-1{ padding-right: 5px; } } /* Spezielle Anpassungen für kleinere Desktop-Auflösungen (1367px - 1440px) */ @media screen and (min-width: 1367px) and (max-width: 1440px) { .main-menu, #main-menu-list { bottom: clamp(200px, 16vw, 209px); left: clamp(0px, 1vw, 9px); gap: clamp(0px, 1vw, 3px); } .main-menu a, #main-menu-list a { font-size: clamp(13px, 1.3vw, 16px) !important; padding: clamp(5px, 0.6vw, 8px) clamp(12px, 1.5vw, 20px); } header .menu-bg { width: clamp(85px, 7vw, 115px); } .logo img { min-height: clamp(80px, 7vw, 110px) !important; margin-left: clamp(0px, 3vw, 5px); } } /* Spezielle Anpassungen für kleinere Desktop-Auflösungen (1441px - 1919px) */ @media screen and (min-width: 1441px) and (max-width: 1919px) { .main-menu, #main-menu-list { bottom: clamp(200px, 16vw, 209px); left: clamp(0px, 1vw, 20px); gap: clamp(0px, 1vw, 3px); } .main-menu a, #main-menu-list a { font-size: clamp(13px, 1.3vw, 16px) !important; padding: clamp(5px, 0.6vw, 8px) clamp(12px, 1.5vw, 20px); } header .menu-bg { width: clamp(85px, 7vw, 115px); } .logo img { min-height: clamp(80px, 7vw, 110px) !important; margin-left: clamp(0px, 3vw, 5px); } } /* Spezielle Anpassungen für sehr große Bildschirme (2560px+) */ @media screen and (min-width: 2560px) { :root { --header-logo-height: min(150px, 7vw); --header-menu-bg-width: min(160px, 6vw); --header-menu-bottom: min(320px, 15vw); --header-menu-gap: min(30px, 1.5vw); } .main-menu, #main-menu-list { bottom: clamp(220px, 16vw, 290px); left: clamp(0px, 2vw, 35px); gap: clamp(20px, 1vw, 30px); } .main-menu a, #main-menu-list a { font-size: clamp(13px, 1.3vw, 16px) !important; padding: clamp(5px, 0.6vw, 8px) clamp(12px, 1.5vw, 20px); } header .menu-bg { width: clamp(85px, 7vw, 115px); } .logo img { min-height: clamp(80px, 7vw, 110px) !important; } } /* Ende Header & Menu Fluid Design Extension */ /* ================================ CUSTOM-TEXT-ROUNDGIF-3 FLUID DESIGN EXTENSION Für Desktop-Auflösungen 1024px - 2560px Basis: 1920x1080 (bleibt unverändert) Mobile CSS (max-width: 1023px) bleibt unverändert ================================ */ /* Fluid Design Variables für Section 3 */ :root { /* Section 3 Typography Scale */ --section3-heading-font: clamp(14px, 1.2vw, 16px); /* 14px - 16px */ --section3-text-font: clamp(32px, 3.8vw, 48px); /* 32px - 48px (Basis: 48px) */ --section3-line-height: clamp(35px, 4vw, 49.5px); /* 35px - 49.5px */ /* Section 3 Spacing Scale */ --section3-container-padding: clamp(25px, 2.5vw, 50px); /* 25px - 50px */ --section3-heading-margin: clamp(15px, 1.5vw, 26px); /* 15px - 26px */ --section3-text-margin: clamp(20px, 2vw, 40px); /* 20px - 40px */ --section3-image-margin-top: clamp(10px, 1vw, 20px); /* 10px - 20px */ --section3-image-margin-bottom: clamp(20px, 2vw, 40px); /* 20px - 40px */ /* Section 3 Layout Dimensions */ --section3-max-width: clamp(850px, 85vw, 1200px); /* 850px - 1200px */ --section3-heading-max-width: clamp(600px, 55vw, 783px); /* 600px - 783px */ --section3-text-max-width: clamp(700px, 65vw, 900px); /* 700px - 900px */ --section3-image-max-width: clamp(350px, 45vw, 600px); /* 250px - 500px */ } /* Desktop-only Fluid Anpassungen für Section 3 (1024px - 2560px) */ @media screen and (min-width: 1024px) { .custom-text-roundgif-3 { max-width: var(--section3-max-width); min-width: unset; padding: var(--section3-container-padding); margin: 30px auto; max-height: 85vh; overflow: visible; box-sizing: border-box; } .custom-text-roundgif-3 .heading { font-size: var(--section3-heading-font); margin-bottom: var(--section3-heading-margin); max-width: var(--section3-heading-max-width); font-weight: 300; font-family: 'mundial-narrow-variable', sans-serif; } .intro-text-leistung { font-size: var(--section3-text-font); line-height: var(--section3-line-height); margin-bottom: var(--section3-text-margin); min-width: unset; max-width: var(--section3-text-max-width); font-weight: 300; font-family: 'mundial-narrow-variable', sans-serif; } .custom-image-leistung { max-width: var(--section3-image-max-width); min-width: unset; margin-top: var(--section3-image-margin-top); margin-bottom: var(--section3-image-margin-bottom); } } /* Spezielle Anpassungen für 1024px Desktop-Auflösung */ @media screen and (min-width: 1024px) and (max-width: 1024px) { .custom-text-roundgif-3 { max-width: clamp(1000px, 75vw, 1200px); padding: 20px; margin-left: 120px !important; max-height: 85vh; } .custom-text-roundgif-3 .heading { font-size: 16px; margin-bottom: 12px; max-width: 550px; } .intro-text-leistung { font-size: clamp(35px, 4.8vw, 45px); line-height: 40px; margin-bottom: 15px; max-width: 950px; } .custom-image-leistung { max-width: 500px; min-width: 450px; margin-top: 8px; margin-bottom: 15px; } } /* Spezielle Anpassungen für kleinere Desktop-Auflösungen (1025px - 1279px) */ @media screen and (min-width: 1025px) and (max-width: 1279px) { .custom-text-roundgif-3 { max-width: clamp(1100px, 75vw, 1200px); padding: clamp(20px, 2.5vw, 35px); margin-left: clamp(120px, 1vw, 130px) !important; max-height: 73vh; } .custom-text-roundgif-3 .heading { font-size: 16px; margin-bottom: 12px; max-width: 550px; } .intro-text-leistung { font-size: clamp(35px, 4.8vw, 45px); line-height: 40px; margin-bottom: 15px; max-width: 950px; } .custom-image-leistung { max-width: clamp(430px, 30vw, 450px); margin-top: clamp(5px, 1vw, 8px); margin-bottom: clamp(15px, 1vw, 17px); } } /* Spezielle Anpassungen für kleinere Desktop-Auflösungen (1280px - 1359px) */ @media screen and (min-width: 1280px) and (max-width: 1359px) { .custom-text-roundgif-3 { max-width: clamp(1000px, 75vw, 1200px); padding: clamp(20px, 2.5vw, 35px); margin-left: clamp(100px, 1vw, 120px) !important; max-height: clamp(81vh, 2vw, 85vh); } .custom-text-roundgif-3 .heading { font-size: clamp(16px, 1.1vw, 17px); margin-bottom: clamp(12px, 1.5vw, 18px); max-width: clamp(550px, 50vw, 650px); } .intro-text-leistung { font-size: clamp(35px, 4.8vw, 45px); line-height: clamp(40px, 3.5vw, 42px); margin-bottom: clamp(35px, 2vw, 40px); max-width: clamp(950px, 60vw, 1200px); } .custom-image-leistung { max-width: clamp(500px, 30vw, 550px); margin-top: clamp(8px, 1vw, 12px); margin-bottom: clamp(85px, 2vw, 95px); } } /* Spezielle Anpassungen für mittlere Desktop-Auflösungen (1360px - 1399px) */ @media screen and (min-width: 1360px) and (max-width: 1399px) { .custom-text-roundgif-3 { max-width: clamp(1300px, 75vw, 1400px); padding: clamp(20px, 2.5vw, 35px); margin-left: clamp(100px, 1vw, 120px) !important; max-height: clamp(91vh, 2vw, 95vh); } .custom-text-roundgif-3 .heading { font-size: clamp(16px, 1.2vw, 17px); margin-bottom: clamp(12px, 1.5vw, 18px); max-width: clamp(550px, 50vw, 650px); } .intro-text-leistung { font-size: clamp(40px, 4.4vw, 45px); line-height: clamp(42px, 3.5vw, 50px); margin-bottom: clamp(35px, 2vw, 40px); max-width: clamp(1050px, 60vw, 1200px); } .custom-image-leistung { max-width: clamp(500px, 30vw, 550px); margin-top: clamp(8px, 1vw, 12px); margin-bottom: clamp(85px, 2vw, 95px); } } /* Spezielle Anpassungen für mittlere Desktop-Auflösungen (1400px - 1679px) */ @media screen and (min-width: 1400px) and (max-width: 1679px) { .custom-text-roundgif-3 { max-width: clamp(1300px, 75vw, 1400px); padding: clamp(20px, 2.5vw, 35px); margin-left: clamp(100px, 1vw, 120px) !important; max-height: clamp(84vh, 2vw, 87vh); } .custom-text-roundgif-3 .heading { font-size: clamp(16px, 1.2vw, 17px); margin-bottom: clamp(12px, 1.5vw, 18px); max-width: clamp(550px, 50vw, 650px); } .intro-text-leistung { font-size: clamp(40px, 4.4vw, 45px); line-height: clamp(42px, 3.5vw, 50px); margin-bottom: clamp(35px, 2vw, 40px); max-width: clamp(1050px, 60vw, 1200px); } .custom-image-leistung { max-width: clamp(500px, 30vw, 550px); margin-top: clamp(8px, 1vw, 12px); margin-bottom: clamp(85px, 2vw, 95px); } } /* Spezielle Anpassungen für große Desktop-Auflösungen (1680px - 1919px) */ @media screen and (min-width: 1680px) and (max-width: 1919px) { .custom-text-roundgif-3 { max-width: clamp(950px, 75vw, 1200px); padding: clamp(20px, 2.5vw, 35px); margin-left: clamp(100px, 1vw, 120px) !important; max-height: clamp(78vh, 2vw, 80vh); } .custom-text-roundgif-3 .heading { font-size: clamp(16px, 1.2vw, 17px); margin-bottom: clamp(12px, 1.5vw, 18px); max-width: clamp(550px, 50vw, 650px); } .intro-text-leistung { font-size: clamp(46px, 4.4vw, 49px); line-height: clamp(42px, 3.5vw, 50px); margin-bottom: clamp(35px, 2vw, 40px); max-width: clamp(850px, 60vw, 1200px); } .custom-image-leistung { max-width: clamp(550px, 30vw, 570px); margin-top: clamp(8px, 1vw, 12px); margin-bottom: clamp(85px, 2vw, 95px); } } /* Spezielle Anpassungen für sehr große Bildschirme (2560px+) */ @media screen and (min-width: 2560px) { .custom-text-roundgif-3 { max-width: min(1400px, 80vw); padding: min(70px, 4vw); max-height: clamp(78vh, 2vw, 80vh); } .custom-text-roundgif-3 .heading { font-size: min(20px, 1.2vw); margin-bottom: min(35px, 2.5vw); max-width: min(900px, 70vw); } .intro-text-leistung { font-size: min(58px, 4.2vw); line-height: min(62px, 4.5vw); margin-bottom: min(55px, 4vw); max-width: min(1100px, 80vw); } .custom-image-leistung { max-width: min(600px, 45vw); margin-top: min(28px, 2vw); margin-bottom: min(55px, 4vw); } } /* Ende Section 3 Fluid Design Extension */ /* ================================ CUSTOM-TEXT-Buttons + TAGBUTTONS FLUID DESIGN EXTENSION Für Desktop-Auflösungen 1024px - 2560px Basis: 1920x1080 (bleibt unverändert) Mobile CSS (max-width: 1023px) bleibt unverändert ================================ */ /*-------------------------------- HTML Custom TAGBUTTONS + Section4 EVENTS | TAGBUTTONS --------------------------------*/ /* Spezielle Anpassungen für kleinere Desktop-Auflösungen (1024px - 1919px) */ @media screen and (min-width: 1024px) and (max-width: 1919px) { .custom-text-events { max-height: 45vh; } .tag-button-container { margin-top: 70px; } } /* Spezielle Anpassungen für sehr große Bildschirme (2560px+) */ @media screen and (min-width: 2560px) { .custom-text-events { max-width: min(1200px, 80vw); padding: min(70px, 4vw); max-height: clamp(45vh, 30vw, 60vh); margin-top: min(22px, 4vw); } .custom-text-events .heading { font-size: min(20px, 1.2vw); margin-bottom: min(35px, 2.5vw); max-width: min(900px, 70vw); } .intro-text-events { font-size: min(65px, 4.2vw); line-height: min(60px, 4.5vw); margin-bottom: min(45px, 4vw); max-width: min(1100px, 80vw); } /*-------------------------------- HTML Custom TAGBUTTONS + Section4 EVENTS | TAGBUTTONS --------------------------------*/ .tag-button-container { max-width: min(1000px, 45vw); margin-top: min(70px, 2vw); margin-bottom: min(55px, 4vw); padding-left: min(80px, 4vw); } .tag-heading { font-size: min(20px, 1.2vw); font-weight: 350; } .tag-event-button { } } /*-------------------------------- HTML Custom TAGBUTTONS + Section4 EVENTS | TAGBUTTONS -- ENDE --------------------------------*/ /* ================================ CUSTOM-TEXT-COUNTER-5 FLUID DESIGN EXTENSION Für Desktop-Auflösungen 1024px - 2560px Basis: 1920x1080 (bleibt unverändert) Mobile CSS (max-width: 1023px) bleibt unverändert ================================ */ /* Fluid Design Variables für Counter Section */ :root { /* Counter Section Typography Scale */ --counter-heading-font: clamp(13px, 1.2vw, 16px); /* 13px - 16px */ --counter-text-font: clamp(32px, 3.8vw, 48px); /* 32px - 48px (Basis: 48px) */ --counter-number-font: clamp(64px, 7vw, 96px); /* 64px - 96px (Basis: 96px) */ --counter-title-font: clamp(13px, 1.2vw, 16px); /* 13px - 16px */ --counter-line-height: clamp(35px, 4vw, 49.5px); /* 35px - 49.5px */ /* Counter Section Spacing Scale */ --counter-container-padding: clamp(25px, 4vw, 50px); /* 25px - 50px */ --counter-heading-margin: clamp(15px, 2vw, 26px); /* 15px - 26px */ --counter-text-margin: clamp(45px, 6vw, 87px); /* 45px - 87px */ --counter-grid-gap: clamp(20px, 3vw, 40px); /* 20px - 40px */ --counter-grid-padding-top: clamp(5px, 1vw, 10px); /* 5px - 10px */ /* Counter Section Layout Dimensions */ --counter-max-width: clamp(800px, 85vw, 1200px); /* 800px - 1200px */ --counter-text-max-width: clamp(650px, 70vw, 950px); /* 650px - 950px */ --counter-heading-max-width: clamp(550px, 60vw, 783px); /* 550px - 783px */ --counter-grid-min-width: clamp(800px, 90vw, 1080px); /* 800px - 1080px */ /* Counter Item Spacing */ --counter-item-margin-1: clamp(120px, 12vw, 195px); /* Erster Counter */ --counter-item-margin-2: clamp(80px, 8vw, 110px); /* Zweiter Counter */ --counter-title-margin-left: clamp(3px, 0.4vw, 4px); /* Titel Abstand */ --counter-title-padding-bottom: clamp(10px, 1.2vw, 15px); /* Titel Padding */ } /* Desktop-only Fluid Anpassungen für Counter Section (1024px - 2560px) */ @media screen and (min-width: 1024px) { .custom-text-counter-5 { max-width: var(--counter-max-width); min-width: unset; padding: var(--counter-container-padding); margin: 0 auto; box-sizing: border-box; } .custom-text-counter-5 .heading { font-size: var(--counter-heading-font); margin-bottom: var(--counter-heading-margin); max-width: var(--counter-heading-max-width); font-weight: 300; font-family: 'mundial-narrow-variable', sans-serif; } .intro-text-counter { font-size: var(--counter-text-font); line-height: var(--counter-line-height); margin-bottom: var(--counter-text-margin); max-width: var(--counter-text-max-width); font-weight: 300; font-family: 'mundial-narrow-variable', sans-serif; } .counter-grid { min-width: var(--counter-grid-min-width); padding-top: var(--counter-grid-padding-top); font-family: "mundial-narrow-variable", sans-serif; } .counter-number { font-size: var(--counter-number-font); font-family: "mundial-narrow-variable", sans-serif; font-weight: 300; } .counter-title { font-size: var(--counter-title-font); margin-left: var(--counter-title-margin-left); padding-bottom: var(--counter-title-padding-bottom); font-weight: 300; font-family: 'mundial-narrow-variable', sans-serif; } /* Fluid Counter Item Margins */ .counter-item:nth-child(1) { margin-right: var(--counter-item-margin-1); } .counter-item:nth-child(2) { margin-right: var(--counter-item-margin-2); } } /* Spezielle Anpassungen für 1024px Desktop-Auflösung */ @media screen and (min-width: 1024px) and (max-width: 1024px) { .custom-text-counter-5 { max-width: 900px; padding: 30px; margin-top: 10px; } .intro-text-counter { font-size: 35px; line-height: 38px; margin-bottom: 50px; max-width: 700px; } .counter-grid { display: grid; flex-direction: column; gap: 110px; min-width: unset; width: 100%; } .counter-item { margin-right: 0 !important; width: 100%; } .counter-number { font-size: 72px; } .counter-title { font-size: 14px; margin-left: 6px; padding-bottom: 10px; } } /* Spezielle Anpassungen für kleinere Desktop-Auflösungen (1025px - 1279px) */ @media screen and (min-width: 1025px) and (max-width: 1279px) { .custom-text-counter-5 { max-width: clamp(950px, 85vw, 1100px); padding: clamp(30px, 3.5vw, 40px); } .intro-text-counter { font-size: clamp(36px, 4vw, 42px); line-height: clamp(40px, 4.2vw, 46px); margin-bottom: clamp(55px, 6vw, 70px); max-width: clamp(700px, 75vw, 850px); } .counter-grid { min-width: clamp(850px, 90vw, 950px); } .counter-number { font-size: clamp(75px, 7.5vw, 85px); } .counter-item:nth-child(1) { margin-right: clamp(140px, 13vw, 170px); } .counter-item:nth-child(2) { margin-right: clamp(90px, 9vw, 120px); } } /* Spezielle Anpassungen für Desktop-Auflösungen (1280px - 1359px) */ @media screen and (min-width: 1280px) and (max-width: 1359px) { .custom-text-counter-5 { max-width: clamp(1000px, 85vw, 1150px); padding: clamp(35px, 3.8vw, 45px); } .intro-text-counter { font-size: clamp(40px, 4.2vw, 45px); line-height: clamp(44px, 4.4vw, 48px); margin-bottom: clamp(65px, 6.5vw, 80px); max-width: clamp(750px, 78vw, 900px); } .counter-number { font-size: clamp(80px, 8vw, 90px); } .counter-item:nth-child(1) { margin-right: clamp(160px, 14vw, 180px); } .counter-item:nth-child(2) { margin-right: clamp(100px, 10vw, 125px); } } /* Spezielle Anpassungen für Widescreen Desktop-Auflösungen (1360px - 1399px) */ @media screen and (min-width: 1360px) and (max-width: 1399px) { .custom-text-counter-5 { max-width: clamp(1100px, 85vw, 1200px); padding: clamp(40px, 4vw, 50px); max-height: clamp(91vh, 2vw, 95vh); } .intro-text-counter { font-size: clamp(44px, 4.4vw, 48px); line-height: clamp(47px, 4.6vw, 50px); margin-bottom: clamp(75px, 7vw, 87px); max-width: clamp(800px, 80vw, 950px); } .counter-number { font-size: clamp(85px, 8.5vw, 96px); } .counter-item:nth-child(1) { margin-right: clamp(170px, 15vw, 195px); } .counter-item:nth-child(2) { margin-right: clamp(105px, 10.5vw, 110px); } } /* Spezielle Anpassungen für große Desktop-Auflösungen (1400px - 1679px) */ @media screen and (min-width: 1400px) and (max-width: 1679px) { .custom-text-counter-5 { max-width: clamp(1150px, 85vw, 1200px); padding: clamp(45px, 4.2vw, 50px); } .intro-text-counter { font-size: clamp(46px, 4.6vw, 48px); line-height: clamp(49px, 4.8vw, 50px); margin-bottom: clamp(80px, 7.5vw, 87px); max-width: clamp(850px, 82vw, 950px); } .counter-number { font-size: clamp(90px, 9vw, 96px); } } /* Spezielle Anpassungen für sehr große Desktop-Auflösungen (1680px - 1919px) */ @media screen and (min-width: 1680px) and (max-width: 1919px) { .custom-text-counter-5 { max-width: clamp(1180px, 85vw, 1200px); padding: clamp(48px, 4.5vw, 50px); } .intro-text-counter { font-size: 48px; /* Basis-Wert beibehalten */ line-height: 49.5px; /* Basis-Wert beibehalten */ margin-bottom: 87px; /* Basis-Wert beibehalten */ max-width: 950px; /* Basis-Wert beibehalten */ } .counter-number { font-size: 96px; /* Basis-Wert beibehalten */ } } /* Spezielle Anpassungen für Ultra-Wide Bildschirme (2560px+) */ @media screen and (min-width: 2560px) { .custom-text-counter-5 { max-width: min(1400px, 80vw); padding: min(70px, 4vw); } .custom-text-counter-5 .heading { font-size: min(20px, 1.2vw); margin-bottom: min(35px, 2.5vw); max-width: min(900px, 70vw); } .intro-text-counter { font-size: min(58px, 4.2vw); line-height: min(62px, 4.5vw); margin-bottom: min(100px, 6vw); max-width: min(1100px, 80vw); } .counter-grid { min-width: min(1200px, 85vw); } .counter-number { font-size: min(110px, 6vw); } .counter-title { font-size: min(18px, 1.3vw); margin-left: min(6px, 0.5vw); padding-bottom: min(18px, 1.5vw); } .counter-item:nth-child(1) { margin-right: min(220px, 12vw); } .counter-item:nth-child(2) { margin-right: min(140px, 8vw); } } /* Ende Counter Section Fluid Design Extension */