/* 🟢 SCHRIFTART EINBINDEN - Open Sans */
@font-face {
    font-family: 'Open Sans';
    src: url('../fonts/OpenSans-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Open Sans';
    src: url('../fonts/OpenSans-Italic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Open Sans';
    src: url('../fonts/OpenSans-Light.ttf') format('truetype');
    font-weight: lighter;
    font-style: normal;
}

@font-face {
    font-family: 'Open Sans';
    src: url('../fonts/OpenSans-LightItalic.ttf') format('truetype');
    font-weight: lighter;
    font-style: italic;
}

@font-face {
    font-family: 'Open Sans';
    src: url('../fonts/OpenSans-Semibold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Open Sans';
    src: url('../fonts/OpenSans-SemiboldItalic.ttf') format('truetype');
    font-weight: 600;
    font-style: italic;
}

@font-face {
    font-family: 'Open Sans';
    src: url('../fonts/OpenSans-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Open Sans';
    src: url('../fonts/OpenSans-BoldItalic.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: 'Open Sans';
    src: url('../fonts/OpenSans-Extrabold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
}

@font-face {
    font-family: 'Open Sans';
    src: url('../fonts/OpenSans-ExtraboldItalic.ttf') format('truetype');
    font-weight: 800;
    font-style: italic;
}

/* 🟢 GRUNDEINSTELLUNGEN */
html {
    font-size: 100%; /* Standard = 16px */
}


/* 🟢 ABSÄTZE */
p {
    font-size: 1.1rem !important;
    line-height: 1.5 !important;
	 margin-bottom: 1.1rem !important; /* Abstand nach unten */
}
body.itemid-1429 .xu06os2 p {
    font-size: 1.7em !important; /* Schriftgröße für die Absätze im Modul */
} 

/* 🟢 STANDARDMENÜ (DESKTOP) */
body .mobile-only {
    display: none !important;
}

body .desktop-only {
    display: block !important;
}

/* Mobile Ansicht → Mobile-Menu aktiv, Desktop-Menü ausblenden */
@media (max-width: 768px) {
    body .desktop-only {
        display: none !important;
    }
    
    body .mobile-only {
        display: block !important;
    }
}
/* Verstecke das mobile Menü in der Desktop-Ansicht */
@media (min-width: 769px) {
    #accordeonck278-wrap {
        display: none !important;
    }
}


/* 🟢 TOTALMENÜ STYLES - Immer einzeilig, volle Breite */
.totalmenu330 {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    font-family: 'Open Sans', sans-serif !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important; /* 🔹 Schriftgröße angepasst */
    white-space: nowrap !important;
    overflow: hidden !important;
    flex-wrap: nowrap !important;  /* Kein Umbruch */
}

/* 🟢 TOTALMENÜ - Abstand zwischen Menüpunkten minimieren */
.totalmenu330 ul {
    display: flex !important;
    justify-content: space-between !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
    gap: 0.02rem !important; /* 🔹 Noch minimalerer Abstand */
}

/* Menü-Items mit schmalem Abstand */
.totalmenu330 ul li {
    flex-grow: 1 !important;
    flex-shrink: 1 !important;
    text-align: center !important;
    padding: 0 0.05rem !important;
    white-space: nowrap !important;
}

/* Links innerhalb des Menüs → Hintergrundbereich größer */
.totalmenu330 ul li a {
    display: block !important;
    width: 100% !important;
    padding: 0.5rem 0.2rem !important; /* 🔹 Mehr Höhe durch größeres Padding */
    font-size: 1rem !important;
    text-decoration: none !important;
    color: #fff !important;
    background-color: rgba(0, 0, 0, 0.05) !important; /* 🔹 Leicht sichtbarer Hintergrund */
    border-radius: 4px !important; /* 🔹 Weiche Ecken für harmonischeres Design */
}

/* 🟢 MOBILE VERSION → Menü ausblenden */
@media (max-width: 768px) {
    .totalmenu330 {
        display: none !important; /* Verstecken für mobile Geräte */
    }
}

/* 🟢 CW-IMENU (Desktop-Menü mit Spalten) */
.cw-imenu {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-evenly;
    width: 100%;
}

.cw-imenu .cw-imenu-item {
    box-sizing: border-box;
    text-align: center;
}

/* Drei-Spalten-Layout für Desktop */
@media (min-width: 769px) {
    .cw-imenu .cw-imenu-item {
        flex: 1 1 calc(33.333% - 10px);
        max-width: calc(33.333% - 10px);
    }
}

/* Zwei-Spalten-Layout für Mobile */
@media (max-width: 768px) {
    .cw-imenu {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: space-between !important;
        width: 100% !important;
    }

    .cw-imenu .cw-imenu-item {
        flex: 1 1 48% !important;
        max-width: 48% !important;
        margin-bottom: 10px !important;
    }
}

/* 🟢 HAMBURGER MENÜ FÜR MOBILE */
#accordeonck278-mobile {
    font-family: 'Arial', sans-serif;
    font-size: 12px;
}

[data-id="accordeonck278"] .mobilemenuck-item > .level1 {
    background: #33cc00 !important;
    color: #FFFFFF !important;
    margin: 4px !important;
    padding-left: 15px !important;
    line-height: 35px !important;
    transition: background 0.3s ease, color 0.3s ease;
}

[data-id="accordeonck278"] .mobilemenuck-item > .level1:hover {
    background: #f01d1d !important; /* Hover-Farbe */
}

[data-id="accordeonck278"].mobilemenuck {
    background: #cccccc !important;
}

/* 🟢 KONTAKTFORMULAR - Schriftgröße für den gesamten Text anpassen */
#mod-visform1 {
    font-size: 1rem !important; /* Grundschriftgröße für das gesamte Formular */
}

/* Labels im Kontaktformular */
#mod-visform1 .visCSSlabel {
    font-size: 0.9rem !important; /* Kleinere Schrift für die Labels */
    display: block !important; /* Labels über den Feldern anordnen */
    margin-bottom: 0.3rem !important; /* Weniger Abstand zwischen Label und Eingabefeld */
}

/* Eingabefelder im Formular */
#mod-visform1 input[type="text"],
#mod-visform1 input[type="email"],
#mod-visform1 textarea {
    font-size: 0.9rem !important; /* Kleinere Schrift in den Eingabefeldern */
    padding: 0.6rem !important; /* Optional: Etwas weniger Padding für die Felder */
    width: 100% !important; /* Maximale Breite der Felder */
    box-sizing: border-box !important; /* Damit Padding nicht die Breite beeinflusst */
    margin-top: 0.2rem !important; /* Abstand zwischen Eingabefeld und vorherigem Element */
}

/* Schriftgröße für den Checkbox-Label */
#mod-visform1 .visCSSlabel.visCheckbox {
    font-size: 0.9rem !important; /* Schriftgröße für Checkbox-Label */
	line-height: 0.8 !important;
	font-weight: bold;
}

/* Schriftgröße für den Captcha-Text */
#mod-visform1 #captcha-lbl {
    font-size: 0.9rem !important; /* Schriftgröße für das Captcha-Label */
}

/* Schriftgröße für den Absenden-Button */
#mod-visform1 .visBtnCon input[type="submit"] {
    font-size: 1rem !important; /* Schriftgröße für den Absenden-Button */
}

/* 🟢 KONTAKTFORMULAR - Absätze im Kontaktformular gezielt ansprechen und Inline-Styles überschreiben */
#mod-visform1 .visCustomText p span {
    font-size: 0.9rem !important; /* Verkleinert die Schriftgröße der Absätze im Kontaktformular */
	    line-height: 0.8 !important;
}

/* Verhindert den Umbruch des Labels */
#mod-visform1 .visCSSlabel {
    white-space: nowrap !important; /* Verhindert Umbruch */
}

/* Optional: Stelle sicher, dass das Label ausreichend Platz hat */
#mod-visform1 label {
    display: inline-block !important; /* Stelle sicher, dass das Label nicht blockweise angezeigt wird */
    width: auto !important; /* Lass das Label flexibel in seiner Breite */
}

/* Container für Titel und Datum */
.mod-dpcalendar-next-event .next-event-details {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0.3rem;
    box-sizing: border-box;
}

/* Dynamische Schriftgrößen-Anpassung */
.mod-dpcalendar-next-event .next-event-title,
.mod-dpcalendar-next-event .next-event-date {
    font-size: clamp(0.7rem, 2.5vw, 1.2rem); /* Skalierbare Schriftgröße, noch kleiner */
    white-space: nowrap; /* Kein Umbruch */
    text-align: center;
    max-width: 100%; /* Kein Überlaufen nach rechts */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 5%; /* Etwas Platz an den Seiten */
}

/* Automatische Schriftverkleinerung, wenn nötig */
.mod-dpcalendar-next-event .next-event-title {
    display: flex;
    justify-content: center;
    align-items: center;
    width: fit-content;
    max-width: 90%;
    font-size: min(2vw, 0.6rem); /* Noch kleinere Schriftgröße */
}

/* Falls der Text zu groß wird, skaliert er runter */
.mod-dpcalendar-next-event .next-event-title {
    transform: scale(1); /* Standardgröße */
    transform-origin: center;
}

/* Noch feinere Anpassung für sehr kleine Bildschirme */
@media (max-width: 600px) {
    .mod-dpcalendar-next-event .next-event-title,
    .mod-dpcalendar-next-event .next-event-date {
        font-size: clamp(0.5rem, 2.5vw, 0.7rem);
    }
}
/* 🟢 KONTAKT MODUL - Schriftgröße anpassen */
#mod-custom98 h1 {
    font-size: 1rem !important; /* Gleiche Schriftgröße wie im Kontaktformular */
}

#mod-custom98 .fs22, #mod-custom98 .fs20 {
    font-size: 1rem !important; /* Gleiche Schriftgröße wie im Kontaktformular */
}

/* Anpassung der Schriftgröße für "Heerstraße 12" und "73066 Uhingen" */
#mod-custom98 div:nth-of-type(2) {
    font-size: 1rem !important; /* Kleinere Schriftgröße */
}

/* 🎨 Event-Titel in der Bildergalerie anpassen - Zentriert & Dynamisch kleiner */
.eventgallery-tiles-list .eventgallery-tile .content .title {
    text-align: center !important; /* ✅ Zentrieren */
}

/* Standardgröße für größere Bildschirme */
.eventgallery-tiles-list .eventgallery-tile .content .title h2 {
    font-size: 1.2rem !important; /* ✅ Ca. 19px */
    font-weight: 400 !important;
    line-height: 1.2 !important;
    margin: 5px 0 !important;
}

/* Tablets und mittlere Screens → Verkleinerung */
@media (max-width: 768px) {
    .eventgallery-tiles-list .eventgallery-tile .content .title h2 {
        font-size: 1rem !important; /* ✅ Ca. 16px */
    }
}

/* Smartphones → Noch kleiner */
@media (max-width: 480px) {
    .eventgallery-tiles-list .eventgallery-tile .content .title h2 {
        font-size: 0.75rem !important; /* ✅ Ca. 12px */
    }
}

/* Sehr kleine Smartphones (z. B. iPhone SE) → Minimale Schriftgröße */
@media (max-width: 360px) {
    .eventgallery-tiles-list .eventgallery-tile .content .title h2 {
        font-size: 0.55rem !important; /* ✅ Ca. 10.4px */
    }
}

.container-header {
    background-color: #ffffff !important; /* Weißer Hintergrund */
    background-image: none !important; /* Farbverlauf trotzdem deaktivieren */
}

/* Regeln für Seiten die nur auf den SIGNAGE SCREENS gezeigt werden */
/* Cookie-Hinweis auf allen Seiten mit "screenly-" im URL-Pfad ausblenden */
body.page-screenly- [id="redim-cookiehint-bottom"] {
    display: none !important;
}

body.itemid-1429 .brand-logo img {
    display: none !important;
}
body.itemid-1430 .brand-logo img {
    display: none !important;
}


/* BUCHUNGSFORMULAR Kursdetails anzeigen */
/* Allgemeine Einstellungen für alle Felder */

/* Container für die gesamte Control-Gruppe */
.control-group {
    font-weight: bold;
    font-size: 1rem;
    margin-bottom: -40px;  /* Kleiner Abstand nach unten zwischen den Gruppen */
    overflow: hidden;
    margin-left: 25%;  /* Einrückung von der linken Seite (für größere Bildschirme) */
    margin-right: 5% !important;  /* Einrückung von der rechten Seite */
    box-sizing: border-box;

    /* Grauer Hintergrund und grüner Balken */
    background-color: #f5f5f5; /* Grauer Hintergrund */
    padding: 3px;
    border-left: 15px solid #28a745; /* Grüner Balken links */
    border-radius: 0px;  /* Abgerundete Ecken */
    max-width: 1000px; /* Passe die Breite an dein Layout an */
    text-align: center !important;
}


/* Label */
.label-kursdetails {
    display: inline-block;
    width: 20%;  /* Label nimmt 20% der Breite ein */
    text-align: left; /* Links ausgerichtet */
    padding-right: 10px;  /* Kleiner Abstand nach rechts */
	padding-left: 15px;  /* Kleiner Abstand nach rechts */
    box-sizing: border-box;
}

/* Eingabefelder */
.kursnr,
.kurstitel,
.wochentag,
.uhrzeit,
.einheiten,
.kursbeginn,
.leitung,
.kursgebuehr-regulaer,
.kursgebuehr-mitglied {
    display: inline-block;
    width: 70%;  /* Eingabefeld nimmt 70% der Breite ein */
    padding: 5px;
    margin: 0px;
    border: 0px solid #ddd;
    color: #333;
    box-sizing: border-box;
}

.buchung-name {
    margin-top: 60px;
}
/* Eingabefelder unsichtbar machen */
.kursnr,
.kurstitel,
.wochentag,
.uhrzeit,
.einheiten,
.kursbeginn,
.leitung,
.kursgebuehr-regulaer,
.kursgebuehr-mitglied {
    background: none;
    border: none;
    pointer-events: none;
    cursor: default;
}




/* Werten aus den Eingabefeldern anzeigen */
.kursnr,
.kurstitel,
.wochentag,
.uhrzeit,
.einheiten,
.kursbeginn,
.leitung,
.kursgebuehr-regulaer,
.kursgebuehr-mitglied {
    content: attr(value);
}

/* Werten aus den Eingabefeldern anzeigen (nur Text, keine Eingabefelder) */
.kursnr,
.kurstitel,
.wochentag,
.uhrzeit,
.einheiten,
.kursbeginn,
.leitung,
.kursgebuehr-regulaer,
.kursgebuehr-mitglied {
    background: none;
    border: none;
}

/* Stile für kleinere Bildschirme */
@media (max-width: 767px) {
    .kurs-container {
        padding: 10px;
    }

    .control-group {
        display: block;  /* Auf kleineren Bildschirmen untereinander */
        margin-left: 0 !important;  /* Entfernt das Margin-left für mobile Ansicht */
        margin-right: 0 !important;  /* Entfernt das Margin-right für mobile Ansicht */
        background-color: #f8f8f8; /* Grauer Hintergrund */
        border-left: 5px solid #28a745; /* Grüner Balken */
        padding: 3px;
        border-radius: 0px;  /* Abgerundete Ecken */


    }

    .label-kursdetails,
    .kursnr,
    .kurstitel,
    .wochentag,
    .uhrzeit,
    .einheiten,
    .kursbeginn,
    .leitung,
    .kursgebuehr-regulaer,
    .kursgebuehr-mitglied {
        width: 100%;  /* Auf kleinen Bildschirmen 100% der Breite einnehmen */
        margin-bottom: 10px;  /* Abstand zwischen den Feldern */
    }

    /* Die Labels und Felder sind jetzt untereinander */
    .label-kursdetails {
        padding-right: 0;
        margin-bottom: 3px;
    }
}

/* Verstecke die Kurzbeschreibung überall, außer auf der Infoscreen-Seite */
body:not(.infoscreen) li.field-entry.kurzbeschreibung {
    display: none !important;
}