/* Verstecke die Icons standardmäßig */
.guest-only-icon,
.registered-only-icon {
    display: none;
}

/* Zeige die Icons für Gäste */
body.guest .guest-only-icon {
    display: table-cell;
}

/* Zeige die Icons für registrierte Benutzer */
body.registered .registered-only-icon {
    display: table-cell;
}

.topbereichganzoben-position,
.moduletable {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

:root {
    --bs-body-font-family: 'Nunito', sans-serif;
    --zeilenabstand: 0px;
    /* Beispielwert für den Zeilenabstand */
}

/* Hintergrundfarbe und Padding für das Modul */
.custom-table-container {
    padding: 0 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Nunito', sans-serif !important;
    /* Schriftart auf Nunito setzen */
    width: 100%;
    /* Sicherstellen, dass der Container die volle Breite einnimmt */
}

/* Standard-Stil für die Tabelle */
.custom-table {
    width: 100%;
    /* Tabelle auf 100% der Containerbreite setzen */
    margin: 0 auto;
    /* Horizontale Zentrierung */
    font-family: 'Nunito', sans-serif !important;
    /* Schriftart auf Nunito setzen */
    font-size: 0.9rem;
    /* Schriftgröße etwas kleiner */
    font-weight: 500;
    /* Schriftstärke etwas fetter */
    font-style: italic;
    /* Schrift kursiv */
    vertical-align: middle;
    /* Vertikale Zentrierung der Zelleninhalte */
}

/* Standard Link-Farbe für Light-Modus */
body.light-mode .custom-table a {
    color: #ff0000 !important;
    /* Rot */
}

/* Standard Link-Farbe für Dark-Modus */
body.dark-mode .custom-table a {
    color: #333333 !important;
    /* Gelb */
}

/* Hintergrundfarbe für Light-Modus */
body.light-mode .custom-table {
    background-color: #ffffff !important;
    /* Weiß */
}

/* Hintergrundfarbe für Dark-Modus */
body.dark-mode .custom-table {
    background-color: #000000 !important;
    /* Schwarz */
}

/* Standard-Stil für die Icon-Zellen */
.icon-celltop {
    padding: 0 15px;
    /* Padding auf 15px setzen */
    text-align: center;
    min-width: 50px;
    /* Mindestbreite für die Zellen */
    font-family: 'Nunito', sans-serif !important;
    /* Schriftart auf Nunito setzen */
    font-size: 0.9rem;
    /* Schriftgröße etwas kleiner */
    font-weight: 500;
    /* Schriftstärke etwas fetter */
    font-style: italic;
    /* Schrift kursiv */
    vertical-align: middle;
    /* Vertikale Zentrierung der Zelleninhalte */
}

/* Spezifisches Padding für die zweite Zelle */
.icon-celltop:nth-child(2) {
    padding: 0 3px;
    /* Padding auf 3px setzen */
}

/* Spezifisches Padding für die Zellen 4, 5, 6, 7 und 8 */
.icon-celltop:nth-child(4),
.icon-celltop:nth-child(5),
.icon-celltop:nth-child(6),
.icon-celltop:nth-child(7),
.icon-celltop:nth-child(8) {
    padding: 0 10px;
    /* Padding auf 10px setzen */
}

/* Leere Zelle, die den maximalen Platz einnimmt */
.spacer-cell {
    flex-grow: 1;
    font-family: 'Nunito', sans-serif !important;
    /* Schriftart auf Nunito setzen */
    font-size: 0.9rem;
    /* Schriftgröße etwas kleiner */
    font-weight: 500;
    /* Schriftstärke etwas fetter */
    font-style: italic;
    /* Schrift kursiv */
    vertical-align: middle;
    /* Vertikale Zentrierung der Zelleninhalte */
}

/* Stil für die Switch-Zelle */
.switch-cell {
    padding-left: 20px;
    font-family: 'Nunito', sans-serif !important;
    /* Schriftart auf Nunito setzen */
    font-size: 0.9rem;
    /* Schriftgröße etwas kleiner */
    font-weight: 500;
    /* Schriftstärke etwas fetter */
    font-style: italic;
    /* Schrift kursiv */
    vertical-align: middle;
    /* Vertikale Zentrierung der Zelleninhalte */
}

/* Verstecke die Textinhalte auf kleinen Bildschirmen (Handy hochkant) */
@media (max-width: 576px) {

    .address,
    .phone-number,
    .icon-celltop span {
        display: none;
    }

    .icon-celltop .fas.fa-envelope {
        display: inline-block;
    }

    .custom-table-container {
        padding: 0 5px;
        /* Reduzierter Seitenabstand für XS */
    }

    .custom-html p {
        font-size: 0.55em;
        /* Schriftgröße für XS minimal kleiner */
    }
}

/* Zeige den Text "Porschestraße 17 | 31135 Hildesheim | Germany | Earth" erst ab der XXL-Ansicht */
@media (min-width: 1400px) {
    .xxl-text {
        display: inline;
    }

    .xl-text,
    .l-text,
    .m-text,
    .s-text,
    .xs-text {
        display: none;
    }
}

/* Zeige den Text "Porschestraße 17 | 31135 Hildesheim | Germany" erst ab der XL-Ansicht */
@media (min-width: 1200px) and (max-width: 1399px) {
    .xl-text {
        display: inline;
    }

    .xxl-text,
    .l-text,
    .m-text,
    .s-text,
    .xs-text {
        display: none;
    }
}

/* Zeige den Text "31135 Hildesheim" erst ab der L-Ansicht */
@media (min-width: 992px) and (max-width: 1199px) {
    .l-text {
        display: inline;
    }

    .xxl-text,
    .xl-text,
    .m-text,
    .s-text,
    .xs-text {
        display: none;
    }
}

/* Zeige den Text "M" erst ab der M-Ansicht */
@media (min-width: 768px) and (max-width: 991px) {
    .m-text {
        display: inline;
    }

    .xxl-text,
    .xl-text,
    .l-text,
    .s-text,
    .xs-text {
        display: none;
    }
}

/* Verstecke den Text in der S-Ansicht */
@media (min-width: 576px) and (max-width: 767px) {

    .xxl-text,
    .xl-text,
    .l-text,
    .m-text,
    .s-text,
    .xs-text {
        display: none;
    }

    .custom-html p {
        font-size: 0.7em;
        /* Schriftgröße für S etwas kleiner */
    }

    .icon-celltop {
        padding: 0 10px;
        /* Hier kannst du das Padding für die S-Ansicht ändern */
    }
}

/* Verstecke den Text in der XS-Ansicht */
@media (max-width: 575px) {

    .xxl-text,
    .xl-text,
    .l-text,
    .m-text,
    .s-text,
    .xs-text {
        display: none;
    }

    .custom-html p {
        font-size: 0.55em;
        /* Schriftgröße für XS minimal kleiner */
    }
}

/* Entferne den Abstand zwischen Icon und Text */
.icon-celltop .email-text {
    margin-left: 0 !important;
    /* Entferne den linken Rand */
    padding-left: 0 !important;
    /* Entferne das linke Padding */
    font-family: 'Nunito', sans-serif !important;
    /* Schriftart auf Nunito setzen */
    font-size: 0.9rem !important;
    /* Kleinere Schriftgröße und wichtige Regel */
    font-weight: 500 !important;
    /* Schriftstärke etwas fetter */
    font-style: italic !important;
    /* Schrift kursiv */
}