/* Layout der Webseiten*/

@import url('./colors.css');

/* HTML und Body ohne Margin und Padding */
html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    /* Verhindert horizontales Scrollen */
}

/* -------------------------------------------------------------------------------------  */

/* Hintergrund für VANTA.js */
#vanta {
    z-index: -1; 
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Der Hintergrund nimmt den gesamten Bildschirm ein */

    /* Sicherstellen, dass der Hintergrund auch auf kleinen Geräten gut skaliert */
    min-height: 100vh; /* Stellt sicher, dass der Hintergrund mindestens die volle Höhe des Viewports einnimmt */
    min-width: 100vw;  /* Stellt sicher, dass der Hintergrund mindestens die volle Breite des Viewports einnimmt */
}

/* Anpassungen für kleinere Geräte */
@media (max-width: 768px) {
    #vanta {
        width: 100%;  /* Sicherstellen, dass der Hintergrund 100% der Breite auf Tablets einnimmt */
        height: auto;  /* Höhe automatisch anpassen */
        min-height: 100vh;  /* Verhindert, dass der Hintergrund kleiner als der Viewport wird */
    }
}

/* Für sehr kleine Bildschirme, z.B. Smartphones */
@media (max-width: 480px) {
    #vanta {
        width: 100%; /* Hintergrund bleibt 100% der Breite */
        height: auto; /* Höhe wird automatisch angepasst */
        min-height: 100vh; /* Minimale Höhe ist immer die volle Höhe des Viewports */
    }
}

/* -------------------------------------------------------------------------------------  */

/* Header und Navigation */
#header {
    position: relative;
    top: 0;
    width: 100%;
    background-color: rgba(var(--black-color), 0.5);
    /* Dunkelgrau mit Transparenz */
    z-index: 2;
    /* Stellt sicher, dass es über dem Banner liegt */
    padding: 10px 0;
    /* Vertikale Padding für das Navigationsmenü */
}

/* Banner (Bild) */
header {
    position: relative;
    z-index: 1;
    width: 100%;
    margin-bottom: 40px;
    /* Fügt Abstand unter dem Banner hinzu */
}

header img {
    width: 100%;
    height: auto;
    opacity: 0.8;
    /* 75% Transparenz für das Bild */
    object-fit: cover;
    /* Sorgt dafür, dass das Bild den gesamten Bereich ausfüllt, ohne Verzerrungen */
}

/* -------------------------------------------------------------------------------------  */

/* Grundlegendes Styling für das Menü */

.menu {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: center;
    display: flex;
    /* Standardmäßig das Menü horizontal anzeigen */
}

.menu li {
    margin-right: 20px;
    /* Abstand zwischen den Menüelementen */
}

.menu a {
    color: #fff;
    font-weight: bold;
    text-decoration: none;
    padding: 10px;
    display: inline-block;
    border-radius: 5px;
    transition: background-color 0.3s ease, opacity 0.3s ease;
}

.menu a:hover {
    background-color: rgba(169, 169, 169, 0.8);
    /* Hellgrau mit 80% Deckkraft */
}

/* Styling für den Menü-Button (nur auf mobilen Geräten sichtbar) */
.menu-toggle {
    display: none;
    /* Button ist standardmäßig nicht sichtbar */
    background-color: var(--darkgray-color);
    color: white;
    padding: 10px 20px;
    border: none;
    font-size: 18px;
    cursor: pointer;
    border-radius: 5px;
    margin: 10px;
}

/* Mobile Ansicht (max-width: 768px) */
@media (max-width: 768px) {

    /* Menü auf mobilen Geräten als Dropdown anzeigen */
    .menu {
        flex-direction: column;
        /* Menüpunkte untereinander */
        display: none;
        /* Menü standardmäßig ausblenden */
        width: 100%;
        /* Menü nimmt die gesamte Breite ein */
    }

    .menu.open {
        display: block;
        /* Menü anzeigen, wenn die Klasse 'open' hinzugefügt wird */
    }

    /* Menü-Button für mobile Geräte sichtbar machen */
    .menu-toggle {
        display: block;
        /* Button wird angezeigt */
    }

    /* Styling der Links im Menü bei mobilem Layout */
    .menu li {
        width: auto;
        /* Breite automatisch an den Inhalt anpassen */
        margin-bottom: 10px;
        text-align: center;
        /* Zentrieren der Menüpunkte */
    }

    .menu a {
        padding: 10px 30px;
        /* Etwas Abstand auf der linken und rechten Seite */
        background-color: var(--darkgray-color);
        border-radius: 5px;
        width: auto;
        /* Breite auf den Inhalt begrenzen */
        display: inline-block;
        /* Zeigt den Link als Block an, aber lässt ihn in der Breite anpassen */
        opacity: 1;
        /* Standard-Deckkraft */
    }

    .menu a:hover {
        background-color: rgba(235, 171, 80, 0.7);
        /* Hellgrau mit 70% Deckkraft */
    }
}

/* Desktop Ansicht (ab 769px) */
@media (min-width: 769px) {
    .menu {
        display: flex;
        /* Flexbox für gleichmäßige Verteilung */
        justify-content: space-between;
        /* Verteilt die Menüpunkte gleichmäßig */
        padding: 0 5px;
        /* Fügt 5px Abstand auf der linken und rechten Seite hinzu */
        width: 100%;
        /* Menü nimmt die gesamte Breite des Containers ein */
        box-sizing: border-box;
        /* Stellt sicher, dass Padding in der Gesamtbreite enthalten ist */
    }

    .menu li {
        list-style: none;
        /* Entfernt Aufzählungszeichen */
    }

    .menu a {
        padding: 10px 20px;
        /* Genügend Padding für den Abstand um den Text */
        background-color: transparent;
        border-radius: 5px;
        display: inline-block;
        /* Jeder Link wird als Block angezeigt */
        transition: background-color 0.3s ease;
        /* Sanfter Übergang beim Hover */
    }

    .menu a:hover {
        background-color: rgba(235, 171, 80, 0.7);
        /* Hintergrundfarbe beim Hover mit 70% Deckkraft */
    }
}

/* -------------------------------------------------------------------------------------  */

/* Main Content */
main {
    text-align: center;
    padding: 10px 10px;
    margin-top: 20px;
    padding-bottom: 80px; /* Sorgt für genügend Abstand zum Footer */
    /* Fügt einen Abstand von 80px am unteren Rand des Main-Inhalts hinzu, damit der Inhalt nicht vom Footer überlappt wird */
}

main #image figure {
    margin: 0;
}

main #image img {
    max-width: 100%;
    height: auto;
    opacity: 0.8;
    /* 75% Transparenz für das Bild */
    border-radius: 10px;
    margin-bottom: 20px;
}

main #image figcaption {
    font-size: 18px;
    color: var(--lightgray-color);
}

.text-below {
    margin-top: 10px;
    font-weight: bold;
    font-size: 15px;
    color: var(--white-color);
}

/* -------------------------------------------------------------------------------------  */

/* Footer */
footer {
    background-color: rgba(var(--darkgray-color), 0.75);
    color: var(--white-color);
    text-align: center;
    padding: 20px;
    margin-top: 20px;
    position: relative; /* Stellt sicher, dass der Footer immer am unteren Rand der Seite bleibt */
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 10;
    flex-shrink: 0; /* Verhindert, dass der Footer bei wenig Inhalt schrumpft */
    box-sizing: border-box; /* Verhindert Layout-Probleme durch Padding */
}

/* Footer Links */
footer a {
    color: var(--white-color);
    text-decoration: none;
    display: inline-block;
    padding: 5px 10px;
}

/* Hover-Effekte nur für Geräte mit Mausunterstützung */
@media (hover: hover) {
    footer a:hover {
        text-decoration: underline;
        color: var(--accent-color);
    }
}

/* Mobile Anpassungen (max-width: 768px) */
@media (max-width: 768px) {
    footer {
        padding: 15px;
        /* Weniger Padding auf mobilen Geräten */
    }

    footer a {
        font-size: 0.9rem;
        /* Kleinere Schriftgröße für mobile Geräte */
    }
}

/* Für kleine Bildschirme (z.B. Smartphones im Hochformat, max-width: 480px) */
@media (max-width: 480px) {
    footer {
        padding: 10px;
        /* Noch weniger Padding für sehr kleine Bildschirme */
    }

    footer a {
        font-size: 0.85rem;
        /* Kleinere Schriftgröße für kleinere Geräte */
    }
}

/* Für große Bildschirme (Desktops, Tablets im Querformat etc.) */
@media (min-width: 1024px) {
    footer {
        position: relative;
        padding: 20px;
        /* Verhindert ungewollten Abstand auf großen Geräten */
    }
}

/* Verhindert Footer Überlappen des Inhalts auf mobilen Geräten */
@media (max-height: 700px) {
    footer {
        position: relative; 
        /* Setzt den Footer am unteren Rand bei kleinen Bildschirmhöhen */
    }
}

/* Für Google Pixel 7, iPhone XR und ähnliche Geräte */
@media (max-width: 412px) {
    footer {
        padding: 12px;
        /* Modifiziert das Padding speziell für die Gerätegröße */
    }

    footer a {
        font-size: 0.8rem;
        /* Noch kleinere Schriftgröße auf sehr kleinen Geräten */
    }
}
/* -------------------------------------------------------------------------------------  */

/* Cookie-Bar */
#cookie-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: var(--darkgray-color);
    color: var(--white-color);
    text-align: center;
    padding: 10px;
    display: none; /* Standardmäßig nicht anzeigen */
    z-index: 9999; /* Stellt sicher, dass die Cookie-Bar über anderen Inhalten liegt */
}

/* Cookie-Bar Button */
#cookie-bar button {
    background-color: var(--darkgray-color);
    color: var(--white-color);
    border: none;
    padding: 5px 15px; /* Genügend Padding für einfaches Klicken */
    cursor: pointer;
    font-size: 14px;
}

#cookie-bar button:hover {
    background-color: var(--lightgray-color);
}

/* Anpassungen für gängige Geräte */

/* Für Geräte mit einer Breite bis 768px (Smartphones und kleine Tablets) */
@media (max-width: 768px) {
    #cookie-bar {
        padding: 10px 15px; /* Etwas mehr Padding an den Seiten */
    }

    #cookie-bar button {
        padding: 8px 20px; /* Größerer Button für bessere Bedienbarkeit */
        font-size: 16px; /* Größere Schriftgröße für den Button */
    }
}

/* Für sehr kleine Bildschirme, z.B. Smartphones im Hochformat (max-width: 480px) */
@media (max-width: 480px) {
    #cookie-bar {
        padding: 8px 10px; /* Weniger Padding für sehr kleine Bildschirme */
    }

    #cookie-bar button {
        padding: 6px 15px; /* Verkleinerte Schaltfläche */
        font-size: 14px; /* Normale Schriftgröße für den Button */
    }
}

/* Für Geräte mit größerer Bildschirmgröße, z.B. Tablets im Querformat */
@media (min-width: 769px) and (max-width: 1024px) {
    #cookie-bar {
        padding: 12px 20px; /* Mehr Padding auf größeren Geräten */
    }

    #cookie-bar button {
        padding: 8px 25px; /* Größerer Button */
        font-size: 16px; /* Schriftgröße bleibt groß */
    }
}

/* Für Tablets mit großen Bildschirmen (z.B. iPad, Samsung Tablets) */
@media (min-width: 1025px) and (max-width: 1366px) {
    #cookie-bar {
        padding: 15px 30px; /* Noch mehr Padding auf großen Tablets */
    }

    #cookie-bar button {
        padding: 10px 30px; /* Sehr große Schaltfläche */
        font-size: 18px; /* Größere Schrift auf größeren Tablets */
    }
}

/* Für große Desktops und Laptops */
@media (min-width: 1367px) {
    #cookie-bar {
        padding: 15px 50px; /* Großes Padding für Desktops */
    }

    #cookie-bar button {
        padding: 10px 40px; /* Sehr große Schaltfläche für Desktops */
        font-size: 18px; /* Schriftgröße bleibt gut lesbar */
    }
}

/* -------------------------------------------------------------------------------------  */

/* Formularbereich */
.formular {
    margin-top: 40px;
    background-color: rgba(var(--darkgray-color), 0.8);
    /* Dunkelgrauer Hintergrund für das Formular */
    padding: 20px;
    border-radius: 10px;
    width: 60%;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
    font-family: Arial, sans-serif;
    /* Schriftart auf Arial gesetzt */
    font-weight: bold;
    /* Alle Texte fett */
    color: var(--white-color);
    /* Schriftfarbe auf Weiß gesetzt */
    box-sizing: border-box;
    /* Sorgt dafür, dass Padding und Border in der Gesamtbreite enthalten sind */
}

/* Eingabefelder und Textarea */
input[type="text"],
input[type="email"],
textarea {
    width: 100%;
    /* Flexibles Textfeld */
    padding: 10px;
    border: 1px solid var(--lightgray-color);
    border-radius: 5px;
    background-color: rgba(var(--lightgray-color), 0.9);
    /* Hellgrau mit 90% Deckkraft */
    color: var(--black-color);
    /* Textfarbe in den Eingabefeldern */
    margin-bottom: 15px;
    /* Abstand zwischen den Feldern */
    box-sizing: border-box;
    /* Padding und Border werden zur Gesamtbreite hinzugerechnet */
}

/* Textarea lässt sich vertikal anpassen */
textarea {
    resize: vertical;
    /* Ermöglicht das Vertikale Aufziehen des Textarea */
}

/* Absenden-Button */
input[type="submit"] {
    background-color: var(--accent-color);
    /* Orange für den Submit-Button */
    color: var(--white-color);
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    font-weight: bolder;
    margin-top: 15px;
    /* Abstand zum Textfeld */
}

input[type="submit"]:hover {
    background-color: var(--green-color);
    /* Grün beim Hover-Effekt */
}

/* -------------------------------------------------------------------------------------  */

/* Datenschutzerklärung-Link */
.datenschutzerklaerung {
    color: var(--accent-color);
    text-decoration: none;
    /* Entfernt die Unterstreichung */
}

.datenschutzerklaerung:hover {
    color: var(--green-color);
    text-decoration: underline;
    /* Fügt beim Hover eine Unterstreichung hinzu */
}

/* Responsives Design für kleinere Geräte */
@media (max-width: 768px) {
    .formular {
        width: 80%;
        font-size: 16px;
        /* Schrumpft die Schriftgröße für Tablets */
        padding: 15px; /* Sorgt für ausreichend Abstand innerhalb des Formulars */
    }

    .formular input[type="text"],
    .formular input[type="email"],
    .formular textarea {
        font-size: 16px;
        padding: 10px; /* Sorgt für genug Innenabstand in den Feldern */
    }

    .datenschutzerklaerung {
        font-size: 14px;
        /* Kleinere Schriftgröße für den Datenschutzerklärung-Link auf Tablets */
        padding-bottom: 10px;
        /* Etwas mehr Abstand nach unten */
        display: inline-block;
    }
}

@media (max-width: 480px) {
    .formular {
        width: 90%;
        font-size: 14px;
        /* Noch kleinere Schriftgröße für Smartphones */
        padding: 10px; /* Weniger Padding für kleinere Bildschirme */
        box-sizing: border-box; /* Verhindert, dass Elemente außerhalb des Containers angezeigt werden */
    }

    .formular input[type="text"],
    .formular input[type="email"],
    .formular textarea {
        font-size: 14px;
        padding: 8px;
        /* Weniger Padding in den Feldern, aber ausreichend für Benutzereingaben */
    }

    .datenschutzerklaerung {
        font-size: 12px;
        /* Noch kleinere Schriftgröße für den Datenschutzerklärung-Link */
        padding-bottom: 8px;
        /* Noch weniger Abstand nach unten */
        display: inline-block;
    }

    /* Sicherstellen, dass Links innerhalb des Containers bleiben und nicht außerhalb des abgerundeten Bereichs ragen */
    .formular input[type="submit"] {
        font-size: 12px;
        padding: 8px 12px;
        /* Verkleinerung der Schriftgröße und des Abstands auf Smartphones */
    }
}

/* Für größere Geräte - Tablets */
@media (min-width: 768px) and (max-width: 1024px) {
    .formular {
        width: 70%;
        font-size: 18px;
        padding: 15px; /* Ausreichend Padding für Tablets */
    }

    .formular input[type="text"],
    .formular input[type="email"],
    .formular textarea {
        font-size: 18px;
        padding: 12px;
    }

    .datenschutzerklaerung {
        font-size: 16px;
        padding-bottom: 12px;
    }
}

/* -------------------------------------------------------------------------------------  */

/* Impressum */

.impressum {
    background-color: rgba(var(--darkgray-color), 0.8);
    /* 10% durchsichtig schwarz */
    padding: 30px;
    border-radius: 8px;
    max-width: 900px;
    margin: 30px auto;
    font-family: Arial, sans-serif;
    color: var(--white-color);
    /* Text in weiß */
    line-height: 1.6;
}

.impressum h1,
.impressum h2 {
    font-weight: bold;
    /* Fettschrift */
    color: var(--white-color);
    transition: color 0.3s;
}

.impressum h1 {
    font-size: 32px;
    margin-bottom: 20px;
}

.impressum h2 {
    font-size: 24px;
    margin-top: 20px;
}

.impressum h1:hover,
.impressum h2:hover {
    color: var(--accent-color);
    /* Überschriften werden orange beim Hover */
}

.impressum p {
    font-size: 16px;
    margin-bottom: 15px;
}

.impressum p a {
    color: var(--accent-color);
    text-decoration: none;
}

.impressum p a:hover {
    text-decoration: underline;
}

/* -------------------------------------------------------------------------------------  */

/* Video Widget */

#video {
    text-align: center;
    margin-top: 20px;
}

#video figure {
    display: inline-block;
    position: relative;
    cursor: pointer;
}

#video img {
    width: 100%;
    /* Adjust as necessary */
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(var(--black-color), 0.8);
    transition: transform 0.3s ease-in-out;
}

#video figcaption {
    text-align: center;
    margin-top: 10px;
    font-size: 16px;
    color: var(--white-color)
        /* Set the text color to white */
}

#video figure:hover img {
    transform: scale(1.05);
}

/* -------------------------------------------------------------------------------------  */

/* Video Widget im 16:9 Seitenverhältnis */
.video-widget {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio (9/16 = 0.5625 -> 56.25%) */
    height: 0;
    overflow: hidden;
    max-width: 80%; /* Hier kannst du die maximale Breite anpassen */
    background: var(--black-color);
    margin: 0 auto; /* Zentriert das Video */
    border-radius: 8px; /* Abgerundete Ecken */
}

/* Das eingebettete Video */
.video-widget iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 8px;
}

/* Mobile Anpassungen */
@media (max-width: 768px) {
    .video-widget {
        max-width: 90%; /* Maximale Breite auf 90% der Bildschirmgröße für Tablets */
    }
}

@media (max-width: 480px) {
    .video-widget {
        max-width: 95%; /* Maximale Breite auf 95% der Bildschirmgröße für Smartphones */
    }
}

/* -------------------------------------------------------------------------------------  */

/* Datenschutz Layout */

.datenschutz {
    background-color: rgba(var(--darkgray-color), 0.8);
    /* Dark transparent background */
    padding: 30px;
    border-radius: 8px;
    max-width: 900px;
    margin: 30px auto;
    font-family: Arial, sans-serif;
    color: var(--white-color);
    /* White text */
    line-height: 1.6;
}

/* Styling for h1 */
.datenschutz h1 {
    font-size: 32px;
    margin-bottom: 20px;
    font-weight: bold;
    color: var(--white-color);
    transition: color 0.3s;
}

/* Styling for h2 */
.datenschutz h2 {
    font-size: 24px;
    margin-top: 20px;
    font-weight: bold;
    color: var(--white-color);
    transition: color 0.3s;
}

/* Styling for h3 */
.datenschutz h3 {
    font-size: 20px;
    margin-top: 20px;
    font-weight: bold;
    color: var(--white-color);
    transition: color 0.3s;
}

/* Styling for h4 */
.datenschutz h4 {
    font-size: 18px;
    margin-top: 20px;
    font-weight: bold;
    color: var(--white-color);
    transition: color 0.3s;
}

/* Hover effect for h1 to h4 */
.datenschutz h1:hover,
.datenschutz h2:hover,
.datenschutz h3:hover,
.datenschutz h4:hover {
    color: var(--accent-color);
    /* Change to accent color on hover */
}

/* Styling for paragraphs */
.datenschutz p {
    font-size: 16px;
    margin-bottom: 15px;
}

/* Styling for links */
.datenschutz p a {
    color: var(--accent-color);
    text-decoration: none;
}

.datenschutz p a:hover {
    text-decoration: underline;
}

/* -------------------------------------------------------------------------------------  */

/* Container für das Gästebuch */
.guestbook {
    background-color: rgba(var(--darkgray-color), 0.8);
    /* Hintergrund mit 80% Deckkraft */
    border-radius: 15px;
    padding: 20px;
    max-width: 600px;
    margin: 30px auto;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    font-family: Arial, sans-serif;
    font-weight: bold;
    /* Text wird fett */
}

.guestbook h2 {
    text-align: center;
    font-size: 24px;
    color: #e9e9e9;
    margin-bottom: 20px;
    font-weight: bold;
}

label {
    font-size: 16px;
    margin-bottom: 5px;
    display: block;
    color: #e6e6e6;
    font-weight: bold;
}

input[type="text"],
input[type="email"],
textarea,
select {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #dbdbdb;
    border-radius: 5px;
    font-size: 16px;
    color: white;
    /* Schriftfarbe auf Weiß setzen */
    font-weight: bold;
    background-color: rgba(var(--darkgray-color), 0.9);
    /* Dunkelgrau mit Transparenz */
}

textarea {
    resize: vertical;
}

select {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #dbdbdb;
    border-radius: 5px;
    font-size: 16px;
    color: white;
    /* Schriftfarbe auf Weiß setzen */
    font-weight: bold;
    background-color: rgba(var(--darkgray-color), 0.9);
    /* Dunkelgrau mit Transparenz */
}

input[type="submit"] {
    background-color: var(--accent-color);
    /* Orange */
    color: white;
    padding: 8px 15px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    width: auto;
    margin-top: 10px;
    font-weight: bold;
}

input[type="submit"]:hover {
    background-color: var(--green-color);
    /* Grün beim Hover */
}

input:invalid,
textarea:invalid {
    border: 2px solid red;
    /* Markiert ungültige Felder mit rotem Rand */
}

input:valid,
textarea:valid {
    border: 1px solid #d3d3d3;
    /* Standard-Grenze für gültige Felder */
}

/* -------------------------------------------------------------------------------------  */

/* Social Media Icons */

.social-icons {
    margin-top: 10px;
    display: flex;
    justify-content: center;
    /* Zentriert die Icons horizontal */
    flex-wrap: wrap;
    gap: 10px;
    /* Fügt einen gleichmäßigen Abstand zwischen den Icons hinzu */
    padding: 0 10px; 
    /* Fügt einen kleinen Abstand zum Rand der Seite hinzu */
    box-sizing: border-box; 
    /* Stellt sicher, dass das Padding in die Gesamtbreite mit einberechnet wird */
}

/* Social Media Icons */
.social-icons a {
    display: inline-block;
    position: relative;
    padding: 5px;
    /* Fügt einen kleinen Abstand um die Icons hinzu */
}

/* Tooltip Styling */
.social-icons a[title]:hover::after {
    content: attr(title);
    position: absolute;
    top: calc(100% - 5px);
    /* Verschiebt den Tooltip leicht nach oben */
    left: 50%;
    transform: translateX(-50%);
    padding: 3px 8px;
    /* Weniger Padding für kleinere Tooltip-Größe */
    border-radius: 5px;
    font-size: 12px;
    /* Kleinere Schriftgröße */
    font-weight: bold;
    white-space: nowrap;
    color: white;
    /* Text bleibt immer weiß */
    visibility: visible;
    z-index: 1;
    transition: opacity 0.2s ease-in-out;
}

/* Tooltip Hintergrundfarben je nach Icon */
.social-icons a[href*="youtube.com"]:hover::after {
    background-color: var(--youtube-color);
    /* YouTube rot */
}

.social-icons a[href*="spotify.com"]:hover::after {
    background-color: var(--spotify-color);
    /* Spotify grün */
}

.social-icons a[href*="instagram.com"]:hover::after {
    background-color: var(--instagram-color);
    /* Instagram pink */
}

.social-icons a[href*="facebook.com"]:hover::after {
    background-color: var(--facebook-color);
    /* Facebook blau */
}

.social-icons a[href*="linktr.ee"]:hover::after {
    background-color: var(--linktree-color);
    /* Linktree hellgrün */
}

/* Verstecke den Tooltip standardmäßig */
.social-icons a[title]::after {
    content: "";
    visibility: hidden;
}

/* Optionale Hover-Effekte für die Icons */
.social-icons img {
    width: 50px;
    height: 50px;
    transition: transform 0.3s ease;
}

.social-icons img:hover {
    transform: scale(1.5);
    /* Vergrößert das Icon beim Hover */
}

/* Smartphones und kleine Tablets - Versteckt Tooltip */
@media (max-width: 600px) and (pointer: coarse) {

    /* Entferne den Tooltip auf Touch-Geräten */
    .social-icons a[title]:hover::after {
        visibility: hidden;
        /* Versteckt den Tooltip auf Touch-Geräten */
    }

    .social-icons img {
        width: 40px;
        /* Kleinere Icons */
        height: 40px;
        /* Kleinere Icons */
    }

    .social-icons {
        gap: 8px;
        /* Reduziert den Abstand zwischen den Icons auf mobilen Geräten */
        justify-content: center;
        /* Stellt sicher, dass die Icons immer zentriert bleiben */
    }

    /* Tooltip für kleine Bildschirme */
    .social-icons a[title]:hover::after {
        font-size: 10px;
        /* Noch kleinere Schriftgröße für den Tooltip */
        padding: 2px 6px;
        /* Weniger Padding */
    }
}

/* Für Tablets (iPads, Android Tablets, etc.) */
@media (max-width: 1024px) {
    .social-icons img {
        width: 45px;
        /* Etwas größere Icons für Tablets */
        height: 45px;
    }

    .social-icons {
        gap: 12px;
        /* Fügt einen moderaten Abstand zwischen den Icons auf Tablets hinzu */
        justify-content: center;
        /* Sichert, dass die Icons immer zentriert sind */
    }

    .social-icons a[title]:hover::after {
        font-size: 11px;
        /* Kleinere Schriftgröße für Tooltip auf Tablets */
    }
}

/* Für große Bildschirme / Web-Version */
@media (min-width: 1025px) {
    .social-icons {
        gap: 15px;
        /* Fügt einen größeren Abstand zwischen den Icons auf großen Geräten hinzu */
        justify-content: center;
        /* Stellt sicher, dass die Icons immer zentriert sind */
    }

    .social-icons img {
        width: 50px;
        /* Normale Größe der Icons */
        height: 50px;
    }
}

/* -------------------------------------------------------------------------------------  */

/* Gästeliste Stil */
.guestlist {
    background-color: rgba(39, 39, 39, 0.9);
    /* Dunkler Hintergrund mit Transparenz */
    padding: 20px;
    border-radius: 10px;
    margin: 20px auto;
    width: 80%;
    max-width: 900px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    /* Überschrift oben, Einträge darunter */
    gap: 20px;
    /* Abstand zwischen Überschrift und den Einträgen */
}

/* Überschrift */
.guestlist a h2 {
    font-size: 2rem;
    font-weight: bold;
    /* Überschrift fett */
    color: var(--white-color);
    /* Weiß */
    margin-bottom: 20px;
    text-align: center;
    text-decoration: none;
    /* Entfernt die Standard-Unterstreichung des Links */
    transition: color 0.3s, text-decoration 0.3s;
    /* Übergang für Hover-Effekte */
}

/* Hover-Effekt für die Überschrift */
.guestlist a:hover h2 {
    color: var(--accent-color);
    /* Orange-Farbe bei Hover */
    text-decoration: underline;
    /* Unterstreichung bei Hover */
}

/* Einträge im Gästebuch */
.guest-entry {
    background-color: var(--darkgray-color);
    /* Dunkelgrau für Einträge */
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Anrede und Name */
.guest-entry strong {
    font-size: 1.2rem;
    color: var(--white-color);
    /* Weiß für Namen */
}

/* Anonyme Einträge */
.guest-entry em {
    font-style: italic;
    color: var(--darkgray-color);
    font-size: 0.9rem;
    margin-top: 5px;
    display: block;
}

/* Nachrichteninhalt */
.guest-entry p {
    font-size: 1rem;
    color: var(--lightgray-color);
    /* Helles Grau für Nachrichtentext */
    line-height: 1.5;
    margin-top: 10px;
}

/* Anonym-Tag */
.guest-entry i {
    font-size: 0.9rem;
    color: var(--accent-color);
    /* Akzentfarbe für Anonym-Tag */
    font-style: normal;
}

/* Datum und Uhrzeit des Beitrags */
.guest-entry em {
    font-size: 0.9rem;
    color: var(--lightgray-color);
    /* Helles Grau für Datum/Uhrzeit */
    margin-bottom: 10px;
    display: block;
}

/* Horizontale Linie zwischen den Einträgen */
.guest-entry+.guest-entry {
    border-top: 1px solid #8d8d8d;
    /* Graue Linie zwischen den Einträgen */
    padding-top: 20px;
}

/* Nachricht, wenn keine Einträge vorhanden sind */
.guestlist .no-entries {
    font-size: 1.2rem;
    color: var(--accent-color);
    /* Akzentfarbe für "Keine Einträge" Nachricht */
    text-align: center;
    margin-top: 20px;
}

/* -------------------------------------------------------------------------------------  */