/* RESPONSIVE DESIGN TRICKS */
@media (max-width: 768px) {
    :root { 
	/* Farbdefinitionen */
	/* Hintergründe: Inspiriert von japanischer Tusche und dunklem Holz */
    --color-bg: #1A1917;             /* Tiefes, warmes "Ink"-Schwarz (Sumi) */
    --color-section: #2A2824;        /* Dunkles Holz-Anthrazit */
    --color-section2: #3D3A33;       /* Helleres Grau-Braun für Trenner */
    --color-section3: #12110F;       /* Fast Schwarz für maximale Tiefe */

    /* Text: Ersetzt das harte Weiß durch Eierschale/Seiden-Farben */
    --color-text: #E8E2D0;           /* Washi-Papier Weiß (weich für die Augen) */
    --color-text2: #B0A995;          /* Verblasstes Leinen für Sekundärtexte */
    --color-text3: #2A2824;          /* Dunkler Text für helle Buttons/Flächen */
    --color-main: #E8E2D0;           /* Primäre Akzentfarbe für Text */

    /* Akzente & Grenzen: Bambus-Grün und Seil-Beige */
    --color-border: #7A8452;         /* Klassisches, gedecktes Bambus-Grün */
    --color-border2: #5E584E;        /* Seil-Braun (Jute-Optik) */
    
    /* Akzent (Buttons/Links): Ein "Gereiftes" Bambus oder dezentes Rot */
    --color-accent: #929D68;         /* Frischer Bambus, weich und natürlich */
    --color-accent-hover: #AAB682;   /* Hellerer, lebendiger Bambus beim Hover */

    /* Warnungen/Besonderes: "Tsubaki" (Kamelien-Rot) statt knalligem Rot */
    --color-warn: #8E3539;           /* Tiefes, edles Japan-Rot (Urushi-Lack) */
    --color-warn-hover: #A6454A;     /* Etwas helleres Rot */
    --color-alarm: #D4AF37;          /* Heller, Auffäliger */

    /*Review/Stars: Gold wie Kintsugi */
    --color-stars: #D4AF37;          /* Gold-Akzent für die Kunst der Reparatur */
	
    --bg-3d: linear-gradient(var(--color-section), var(--color-section3)); /* Mehr tiefe für den Hintergrund! */
    --bg-3d2: linear-gradient(var(--color-section3), var(--color-section)); /* Mehr tiefe für den Hintergrund! Invertiert*/
    
    /* Abstände & Layout */
	--header-height: 100px;
	--header-height-scrolled: 45px;
    --container-width: 1200px;
    --border-radius: 8px;
    --border-radius-small: 4px;
    --default-margin: 20px;
    --margin-small: 10px;
    --margin-smaller: 4px;
    --default-padding: 30px;
    --padding-small: 10px;
    --padding-smaller: 4px;
    --default-gap: 20px;
    --transition: all 0.3s ease;
    	
	/* Breitenangaben */
	--card-wrapp: 500px;
    --small-wrapp: 600px;
    --medium-wrapp: 800px;
    --big-wrapp: 1200px; 
    --100-wrapp: 100%;	
	}

    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);
		color: var(--color-text) !important;
        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;
		color: var(--color-text) !important;
    }

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

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

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

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

    /* BURGER & LOGO */
    .logo { width: 70px; }
    .menu-toggle { display: flex; margin-right: 10px; color: var(--color-text) !important;}
    .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;}
.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; flex-direction: column; align-items: flex-start; justify-content: left; 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%;}
.btn-half {max-width: 50%; }
.icon-row { align-items: center; }

.content-wrapper-hidden { margin: 0; padding: 0; }
.text-msg { display: none; }
.review-user-info { align-items: center; flex-direction: column; }
    .admin-flex-header { display: none; } /* Header auf Handy nicht sinnvoll */

    .admin-flex-row {
        flex-direction: column; /* Stapelt Benutzer-Block über Einstellungen */
        align-items: stretch;
        padding: 15px;
        gap: 12px;
    }

    /* Benutzer-Block (Bild, Name, Email untereinander) */
    .col-user { 
        flex: 1 1 auto; 
        width: 100%; 
        border-bottom: 1px solid var(--color-section2);
        padding-bottom: 12px;
    }

    .user-info-text {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .mobile-email { 
        display: block; 
        color: var(--color-accent); 
        font-size: 0.8rem; 
    }

    /* Verstecke die separate Desktop-Email-Spalte */
    .col-email { display: none; }

    /* Die zweite Zeile: Kyu, Level, Aktiv nebeneinander */
    .mobile-settings-row {
        display: flex; 
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        gap: 10px;
        width: 100%;
    }

    .col-kyu, .col-level {
        flex: 2; /* Gleiche Breite für alle drei */
        min-width: 0;
    }
    .col-log, .col-active {
        flex: 1; /* Gleiche Breite für alle drei */
        min-width: 0;
    }
    /* Labels für die Dropdowns anzeigen */
    .mobile-label { 
        display: block; 
        font-size: 0.65rem; 
        color: var(--color-text2); 
        text-transform: uppercase;
        margin-bottom: 4px;
        font-weight: bold;
    }

    /* Anpassung der Dropdowns für bessere Touch-Bedienung */
    .admin-select {
        width: 100%;
        padding: 8px 4px;
    }
/* 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: 3.0em; 
		color: var(--color-text3); 
		align-content: column;
		display: flex; 
		flex-direction: column;
		align-items: flex-start;
		height: auto;
    }

    .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: inline-block; width: 100%; 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 { display: block; font-size: 1.0em; font-weight: bold; width: 100%; height: auto; field-sizing: content; min-height: 2.0em; }
.col-desc textarea:focus { font-size: 1.0em !important; }
/* 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; }
}