/*
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 */
