/* Styling für das neue, eigenständige Fenster */
body {
    margin: 0;
    padding: 15px; /* Minimaler Abstand, damit die Buttons nicht am Geräterand kleben */
    background-color: #070625; /* Dunkler Hintergrund wie Hauptseite */
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #eb9d15;
    /* KORREKTUR: Kein "display: flex" und kein "min-height" mehr, um das Auseinanderziehen zu verhindern */
}

/* Der Container hält alle Elemente dicht beieinander */
.bild-container {
    width: 100%;
    max-width: max-content; /* Der Kasten zieht sich exakt so breit wie das Bild */
    margin: 0 auto; /* Zentriert die gesamte Box auf dem Bildschirm horizontal */
    box-sizing: border-box;
}

/* DAS OPTIMIERTE FOTO: Nutzt den Platz ideal aus */
#ansichtsBild {
    max-width: 100%; 
    max-height: 75vh; /* Nutzt viel Höhe für das Bild */
    height: auto; 
    width: auto;  
    border: 3px solid #fbb207; /* Oranger Rahmen */
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    display: block;
    margin: 4px auto 8px auto; /* Knappe Abstände zu den Buttons */
    box-sizing: border-box;
}

/* Gemeinsames Design für BEIDE Buttons */
.schliessen-button {
    display: block; /* Ermöglicht saubere Abstände */
    background-color: #3e3995;
    color: #fbb207;
    border: 2px solid #fbb207;
    padding: 6px 20px; /* Schlanke, flache Buttons */
    font-size: 14px;
    font-weight: bold;
    border-radius: 4px;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.2s ease-in-out;
    box-sizing: border-box;
    margin: 0 auto; /* Zentriert den unteren Button unter dem Bild */
}

/* Hover-Effekt für beide Buttons */
.schliessen-button:hover {
    background-color: #fbb207;
    color: #070625;
}

/* Spezifische Positionierung NUR für den oberen Button */
.schliessen-button-oben {
    margin-right: 0; /* Richtet den Button an der rechten Kante aus */
    margin-left: auto; /* Schiebt ihn nach rechts */
    font-size: 12px;
    padding: 4px 12px;
    margin-bottom: 2px;
}

/* SPEZIELLE ANPASSUNG FÜR SCHMALE HANDYS */
@media (max-width: 480px) {
    body {
        padding: 8px;
    }
    
    #ansichtsBild {
        max-height: 70vh; /* Auf dem Handy optimal groß */
        border-width: 2px; 
    }

    .schliessen-button {
        width: 100%; /* Unterer Button streckt sich elegant über die Bildbreite */
        font-size: 13px;
        padding: 10px;
    }

    .schliessen-button-oben {
        width: auto; /* Bleibt kompakt oben rechts */
        font-size: 11px;
        padding: 5px 10px;
    }
}