/* RESPONSIVE DESIGN TRICKS */
@media (max-width: 768px) {
    :root { --header-height: 100px; }

    header {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        background: #000 !important;
        height: var(--header-height);
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 1000;
        padding: 0 15px 5px 15px;
        box-sizing: border-box;
    }

    .header-right {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 5px;
    }

    header.scrolled { --header-height: 45px; }

    /* DAS PANEL */
    #nav-list {
        display: none;
        position: absolute;
        top: calc(var(--header-height) - 5px);
        left: 0;
        width: 100%;
        background: #000 !important; /* Absolut Blickdicht */
        text-align: center;
        z-index: 10000;
    }

    #nav-list.active { display: block !important; }

    #nav-list ul {
        display: block !important; /* Block statt Flex für natürlichen Fluss */
        padding: 5px 0 !important;
        margin: 0 !important;
        list-style: none !important;
    }

    #nav-list li {
        width: 100% !important;
        position: relative;
        border-bottom: 1px solid #111; /* Dezentere Trennung */
    }

    /* DIE LINKS - RADIKAL KOMPAKT */
    #nav-list ul li a {
        display: block !important;
        padding: 10px 20px !important; /* Kleineres Padding für weniger Höhe */
        color: #fff !important;
        text-decoration: none;
        font-size: 1.05rem;
        background: #000 !important;
    }

    /* BILD-LINK (TENGUGRAM) */
    #nav-list ul li a:has(.tengugram-link),
    #nav-list ul li a:has(img) {
        padding: 5px 0 !important;
        min-height: auto !important;
        width: 100%;
    }

    .tengugram-link {
        width: auto !important; /* Kompakte Breite für Mobile */
        height: 2.0em !important;
        margin: 0 auto !important;
        display: block !important;
    }

    /* SUB-MENÜ LOGIK - GEKOPPELT AN DEIN JS (.is-open am li) */
#nav-list .sub-menu {
        display: none !important; /* Versteckt, bis .is-open kommt */
        position: static !important; /* HEBT DIE ABSOLUTE POSITION AUF -> Schiebt Inhalt nach unten */
        width: 100% !important;
        background-color: #111 !important; /* Leicht grauer Kontrast */
        padding: 0 !important;
        margin: 0 !important;
        visibility: visible !important; /* Desktop-Werte überschreiben */
        opacity: 1 !important;        /* Desktop-Werte überschreiben */
        box-shadow: none !important;
    }

    /* Diese Regel MUSS greifen, wenn dein JS das 'is-open' am li setzt */
    #nav-list li.is-open > .sub-menu {
        display: block !important;
    }

    #nav-list .sub-menu li a {
        padding: 8px 20px !important;
        font-size: 0.9rem;
        background-color: #111 !important;
        border-top: 1px solid #222;
    }

    /* BURGER & LOGO */
    .logo { width: 70px; }
    .menu-toggle { display: flex; margin-right: 10px; }
    .header-spacer { height: 100px; }

.userpic { width: 80px; height: auto; }
/* ENDE MENUE */        
/* Content Styles */
.Content-Title { padding-bottom: 10px; }
.content-column { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; margin: auto; padding: 15px 0px;}
.image-grid {max-width: 400px; min-width: 200px; }
.content-card { padding: var(--padding-smaller); }
.content-card-reverse { display: flex; padding: 0; flex-direction: column-reverse; }
.content-field-hidden:last-child { border-bottom: 1px solid var(--color-section2); }
.quote-text { margin-top: 5px; }
.content-card-text { border: 0; padding: 0px; width: 100%; margin: auto;}
.content-card h3 { display: none;}
.login-image-wrapper { display: flex; justify-content: center; width: 100%; }
.content-card-img-small { display: block; }
.content-wrapper-card { padding: var(--padding-small); border: 0;}
.content-wrapper-small { padding: var(--padding-small); border: 0;}
.content-wrapper-medium { padding: var(--padding-small); border: 0;}
.content-wrapper-big { padding: var(--padding-small); border: 0;}
.content-wrapper-100 { padding: var(--padding-small); border: 0;}
.content-card-form { display: block !important; }
.content-card-form .infotext {display: flex; align-items: center; justify-content: center; width: 100%;}
.content-card-form .btn-hide {display: flex; margin: auto; margin-bottom: 20px; align-items: center; justify-content: center; width: 60%;}
.content-card-form .btn-good {display: flex; align-items: center; justify-content: center; width: 100%;}
.content-wrapper-hidden { margin: 0; padding: 0; }
.text-msg { display: none; }
.review-user-info { align-items: center; flex-direction: column; }

/* die Tabelle für das Logbuch! */
.content-line .linebutton {width: 100%;}
.log-header-row { display: none; } /* Header weg */

    .log-row {
        flex-wrap: wrap; /* Erlaubt Umbruch */
        padding: 5px;
        position: relative;
    }

.log-header-row .col-date::before { color: var(--color-text); }

    .col-date { flex: 0 0 45%; height: 4.0em; color: var(--color-text3); }
    .col-date input { height: 2.0em; width: 90%; color: var(--color-text3); }
    .col-small { flex: 0 0 22%; height: 4.0em;  color: var(--color-text3);  }
    .col-desc { 
        flex: 0 0 100%; /* Volle Breite unter den Metadaten */
        order: 3; 
		border: 1px solid var(--color-section);
		border-radius: 4px;
		padding: 4px;
		height: 8.0em; 
		color: var(--color-text3); 
    }

    .col-action {
        position: absolute;
        top: -8px;
        right: 10px;
    }

    /* Labels für Mobile hinzufügen */
		/* Labels für normale Einträge */
		.col-date::before { content: "Datum"; display: block; font-size: 0.7em; opacity: 0.6; }
		.col-small:nth-child(2)::before { content: "Std."; display: block; font-size: 0.7em; opacity: 0.6; }
		.col-small:nth-child(3)::before { content: "Einh."; display: block; font-size: 0.7em; opacity: 0.6; }
		.col-desc::before {content: "Beschreibung"; display: block; font-size: 0.7em; opacity: 0.6; }

		/* Labels für neuen Eintrag */
		.new-entry .col-date::before { color: var(--color-text); }
		.new-entry .col-small:nth-child(2)::before { color: var(--color-text); }
		.new-entry .col-small:nth-child(3)::before { color: var(--color-text); }
		.new-entry .col-desc::before { color: var(--color-text); }

/* Logbuch-Inputs stylen */	
.col-date input { font-size: 1.3em; }
.col-small input { font-size: 1.3em;}
.col-desc textarea { font-size: 1.0em; font-weight: bold; height: 6.5em;}
/* ENDE Tabelle für das Logbuch! */

		iframe.goog-te-banner-frame {
			display: none !important;
		}

		body {
			position: static !important;
			top: 0 !important;
		}

		.goog-te-gadget-icon {
			display: none !important;
		}        
		.main-container {
			flex-direction: column-reverse; /* Kehrt die Reihenfolge um: Bild (unten im HTML) nach oben */
		  }

		  .column {
			flex: 1 1 100%; /* Spalten nutzen auf Mobile 100% Breite */
			text-align: center; /* Text auf Mobile optional zentrieren */
		  }

		  .image-wrapper img {
			height: 500px; /* Auf Mobile etwas flacher */
		  }
		  
		  /* Hauptbild Styling */
            .main-image img {
                width: 100%;
                height: 500px;
                display: block;
                border-radius: 8px; /* Optional */
                object-fit: cover;
            }

    .image-grid {
        grid-template-columns: repeat(2, 1fr); /* Nur 2 Bilder nebeneinander auf Mobile */
    }

    .lightbox { padding-top: 50px; }
    .lightbox-content { flex-direction: column; height: auto; max-height: none; }
   
.experience-page {
    max-width: 100% !important;
}   
.info-card {
    max-width: 100% !important;
}   
.info-field {
    padding-bottom: 80px;
}
.review-image-container { margin: auto; }
/* Cookie Overlay Styling */
.card-content-wrapper {
    gap: 0px;
    margin-bottom: 25px;
    text-align: left;
}
.card-content-wrapper img { display: none;}
.card-text { border: 0; }
}