Widget:StartseitenSuche

/* Overlay-Container mit responsive Hintergrundbild */ .overlay-container {

 position: relative;
 width: 100%;
 min-height: 400px;
 padding: 24px;
 display: flex;
 align-items: center;
 justify-content: center;
 overflow: hidden;
 border-radius: 12px;
 background-color: #2f3e46; /* Fallback-Farbe während das Bild lädt */
 background-image: url("/w/images/a/a9/Schloss-Muenster-Philipp-Foelting-CC-BY-SA.jpg");
 background-size: cover;
 background-position: center;
 background-repeat: no-repeat;

}

/* Dunkles Overlay für bessere Lesbarkeit */ .overlay-container::before {

 content: "";
 position: absolute;
 inset: 0;
 background: rgba(0, 0, 0, 0.38);
 z-index: 1;

}

/* Inhalt über dem Overlay */ .overlay-content {

 position: relative;
 z-index: 2;
 width: 100%;
 max-width: 800px;
 padding: 20px;
 border-radius: 12px;
 background: rgba(255, 255, 255, 0.92);
 backdrop-filter: blur(4px);
 -webkit-backdrop-filter: blur(4px);
 box-sizing: border-box;

}

/* Falls dein Chat direkt darin liegt */ .overlay-content #chat-widget {

 max-width: 100%;
 margin: 0 auto;
 background: transparent;
 border-radius: 12px;
 color: #212529;

}

/* Tablet */ @media (max-width: 900px) {

 .overlay-container {
   min-height: 340px;
   padding: 18px;
   border-radius: 10px;
 }

 .overlay-content {
   padding: 16px;
   border-radius: 10px;
 }

}

/* Smartphone */ @media (max-width: 600px) {

 .overlay-container {
   min-height: 280px;
   padding: 12px;
   align-items: stretch;
 }

 .overlay-content {
   padding: 14px;
   border-radius: 8px;
 }

}

/* Kleine Smartphones */ @media (max-width: 400px) {

 .overlay-container {
   min-height: 240px;
   padding: 10px;
 }

 .overlay-content {
   padding: 12px;