/* ==========================================================================
   STANDARD-ANSICHT (Für PC-Monitore, Laptops und große Bildschirme)
   ========================================================================== */
.layer-fenster {
    display: none; 
    
    /* absolute sorgt dafür, dass der Layer fest auf der Webseite verankert ist 
       und beim Scrollen mit dem Foreninhalt nach oben wegwandert */
    position: absolute !important; 
    
    /* PC-POSITION: Starr verankert nach deinen exakten Wunsch-Koordinaten auf der Webseite */
    top: 240px !important;        /* Starr 240 Pixel Abstand vom absoluten Seitenanfang (Webseiten-Kopf) */
    left: 300px !important;       /* Starr 300 Pixel Abstand vom linken Webseitenrand */
    right: auto !important;       
    bottom: auto !important; 
    transform: none !important;   
    
    /* FARBEN AUS BEAMTENTALK */
    background-color: #ECF3F7 !important; /* Das helle Foren-Blau-Grau */
    border: 1px solid #12A3EB !important;  /* Die hellblaue Rahmenfarbe */
    color: #333333 !important;             /* Dunkelgrauer Forentext */
    
    /* Padding oben leicht verringert, damit das X noch mehr in die Ecke gequetscht wird */
    padding: 18px 15px 15px 15px !important; 
    border-radius: 7px !important;        
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.2) !important; 
    
    /* Über den Forenelementen schweben */
    z-index: 9999999 !important; 
    max-width: 350px !important;
    width: 90% !important;
    font-family: "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, Arial, sans-serif !important;
    box-sizing: border-box !important;
}

/* ==========================================================================
   MOBIL-ANSICHT (Wird automatisch NUR auf Smartphones aktiv)
   ========================================================================== */
@media (max-width: 700px) {
    .layer-fenster {
        /* Auf dem Handy lassen wir es bei fixed, da es sonst oben aus dem kleinen 
           Bildschirm scrollt, bevor der User es überhaupt richtig sieht */
        position: fixed !important;   
        top: 15px !important;         /* Auf Handys dezent oben platziert */
        left: 50% !important;         /* Zentriert sich horizontal auf dem Handy */
        right: auto !important;       
        bottom: auto !important;
        transform: translateX(-50%) !important; /* Zentriert exakt auf Handydisplays */
        max-width: 320px !important;  
        width: 85% !important;
    }
}

/* ==========================================================================
   Inhalte & Formatierungen
   ========================================================================= */
.layer-fenster h2 {
    color: #105289 !important; /* Das dunkle Foren-Königsblau */
    font-size: 15px !important;
    margin-top: 0 !important;
    margin-bottom: 8px !important;
    border-bottom: 1px solid #D2E0E8 !important;
    padding-bottom: 5px !important;
}

.layer-fenster p {
    font-size: 12px !important;
    line-height: 1.4 !important;
    margin: 0 0 8px 0 !important;
}

/* ==========================================================================
   Das Schließen-X – Maximal in die Ecke gequetscht ("Verklick-Optimierung")
   ========================================================================== */
.schliessen-knopf {
    position: absolute !important;
    top: 1px !important;          /* Extrem nah an der Oberkante */
    right: 2px !important;        /* Extrem nah an der Rechten Kante */
    font-size: 9px !important;     /* Winzig klein */
    font-weight: normal !important; 
    cursor: pointer !important;
    color: #7A92A5 !important;    /* Tarnt sich im Blaugrau des Hintergrunds/Rahmens */
    line-height: 1 !important;
    padding: 0 !important;        /* Absolut kein Padding, löscht jegliche Klick-Toleranz */
    width: auto !important;
    height: auto !important;
    display: inline-block !important;
    
    /* MOBIL-FIX: Neutralisiert Standard-HTML-Button-Stylings des Smartphones */
    background: none !important;
    border: none !important;
    outline: none !important;
    touch-action: manipulation !important; 
}

.schliessen-knopf:hover {
    color: #105289 !important; /* Wird erst sichtbar, wenn man exakt draufsteht */
}

/* ==========================================================================
   Automatische Skalierung für das Tassenbild
   ========================================================================== */
.layer-bild {
    max-width: 100% !important;    
    height: auto !important;       
    display: inline-block !important;
    border-radius: 4px !important; 
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important; 
}