/* Den Marker-Container rund machen */
.leaflet-popup-content, .leaflet-popup-content-wrapper, .leaflet-marker-icon {
    border-radius: 50% !important;
    border: 2px solid white !important; /* Weißer Rand zur Abhebung */
    object-fit: cover !important;       /* Verhindert Verzerrung des Vorschaubilds */
    box-shadow: 0 2px 5px rgba(0,0,0,0.4) !important;
}

.doticon {
	z-index: 200 !important;
}

.ltsinfo-container {
	background: rgba(0,0,0, 0.4);
	z-index: 800;
	position: relative;
	width: 100%;
	max-width: 100%;
	text-align: center;
}

.ltsinfo {
	z-index: 900;
	margin-left: 50px;
	margin-right: 20px;
	color: #FEFEFE;
}

.ltspic > .leaflet-popup-content-wrapper > .leaflet-popup-content {
	margin: 0;
}

.ltspic > .leaflet-popup-content-wrapper {
	padding: 0;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	text-align: center;
}

.ltspic:hover {
	#display: none;
}
/* --- 1. SYSTEM-FIX FÜR IPHONE (GRAUE BALKEN) --- */
html, body {
    height: 100dvh !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    /* Verhindert graue Balken durch Safari-Systemfarben */
    background-color: #000 !important; 
    overflow: hidden !important;
}

/* --- 2. VOLLBILD-KARTE IN ALLE ECKEN ZWINGEN --- */
div[id^="ltsmap_"] {
    position: fixed !important;
    /* Nutzt Safe-Area-Variablen, um hinter Notch und Home-Balken zu gehen */
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100dvh !important;
    min-height: -webkit-fill-available !important;
    z-index: 1 !important;
}

/* --- 3. TWENTY SEVENTEEN ELEMENTE RADIKAL ENTFERNEN --- */
/* Verhindert, dass Header/Footer Platz reservieren oder grau schimmern */
#masthead, 
.site-header, 
.custom-header, 
.navigation-top, 
#colophon, 
.site-footer,
.site-branding {
    display: none !important;
    visibility: hidden !important;
}

/* Alle Container transparent machen */
#page, .site-content-contain, .site-content, .wrap, article {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* --- 4. HAMBURGER-BUTTON & KLICKBARKEIT --- */
button.menu-toggle {
    display: block !important;
    position: fixed !important;
    /* Beachtet die Notch im Hoch- und Querformat */
    top: env(safe-area-inset-top, 20px) !important;
    right: env(safe-area-inset-right, 20px) !important;
    z-index: 9999 !important;
    background: #222 !important;
    color: #fff !important;
    font-size: 0 !important;
    pointer-events: auto !important;
}

/* Content für Klicks durchlässig machen */
.site-content-contain {
    pointer-events: none !important;
}

/* Wichtige Elemente wieder klickbar machen */
.main-navigation, a, button, .leaflet-control-container, .ltsinfo-container {
    pointer-events: auto !important;
}

/* Dashboard-Korrektur */
body.logged-in button.menu-toggle {
    top: calc(env(safe-area-inset-top, 20px) + 32px) !important;
}


/* Erzwungener Fix für den unteren iPhone-Rand */
div[id^="ltsmap_"] {
    bottom: 0 !important;
    height: 100dvh !important;
    /* Deaktiviert den Sicherheitsabstand unten für dieses Element */
    margin-bottom: -env(safe-area-inset-bottom, 0) !important; 
    padding-bottom: 0 !important;
}

/* Twenty Seventeen Container auf absolute Null setzen */
#page, .site-content-contain, .site-footer {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    height: 100dvh !important;
}

/* Verhindert, dass iOS eine Hintergrundfarbe für die Safe-Area einblendet */
html {
    background-color: transparent !important;
}


/* übersicht */
/* 1. Der Basis-Container für deinen Content-Streifen */
.site-content-contain {
    position: fixed !important;
    background: rgba(0, 0, 0, 0.5) !important; /* Durchscheinend Schwarz */
    backdrop-filter: blur(5px); /* Optional: Glas-Effekt */
    z-index: 10;
    display: flex;
    overflow-y: auto;
    pointer-events: auto !important; /* Streifen soll klickbar sein */
}

/* 2. HOCHFORMAT (Handy senkrecht): Streifen unten waagerecht */
@media (orientation: portrait) {
    .site-content-contain {
        bottom: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 30% !important; /* Höhe des Streifens unten */
        flex-direction: row;
        border-top: 1px solid rgba(255,255,255,0.2);
    }
}

/* 3. QUERFORMAT (Handy quer / Laptop): Streifen rechts senkrecht */
@media (orientation: landscape) {
    .site-content-contain {
        top: 0 !important;
        right: 0 !important;
        width: 300px !important; /* Breite des Streifens rechts */
        height: 100% !important;
        flex-direction: column;
        border-left: 1px solid rgba(255,255,255,0.2);
    }
}

/* 4. Text-Anpassung, damit er im dunklen Streifen lesbar ist */
.site-content-contain, .entry-title, .entry-content p {
    color: #ffffff !important;
    padding: 15px;
}