/* Hintergrund: Verlauf von Marineblau (oben, 80%) zu Hellblau (unten, 20%),
 *  mit einem sanften "Schein" von oben (heller Lichtkegel) */
html,
body,
#page {
background-color: #16324f !important;
background-image:
radial-gradient(ellipse 120% 60% at 50% 0%, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0) 55%),
linear-gradient(180deg, #16324f 0%, #1e4a73 80%, #6fa8d8 100%) !important;
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
min-height: 100vh;
}

/* Helle, transparente Flächen für Titel, Link-Kacheln und Statusbereich */
.service-card,
#information-widgets {
background-color: rgba(255, 255, 255, 0.35) !important;
border: 1px solid rgba(255, 255, 255, 0.6);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}

.service-card:hover {
  background-color: rgba(255, 255, 255, 0.5) !important;
}

/* Iframes ohne eigenen Hintergrund (Tagesmeldung + Nextcloud-Kalender) */
iframe[name="tagesmeldung"],
iframe[name="nextcloud-kalender"] {
  background: transparent;
}
/* Titel in der Kopfzeile zentrieren */
#information-widgets .information-widget-greeting {
flex: 1 1 100%;
position: relative;
display: flex;
align-items: center;
justify-content: center;
min-height: 7rem;
}

#information-widgets .information-widget-greeting::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 7rem;
height: 7rem;
background: url("/images/Logo800px.png") left center / contain no-repeat;
}
/* Kopfzeile insgesamt: Bezugspunkt fürs oben rechts platzierte Wetter, Platz dafür schaffen */
#information-widgets {
position: relative;
padding-top: 0.5rem;
}

/* Zeile unter dem Titel: Suche einfach zentriert */
#information-widgets-right {
flex: 1 1 100%;
justify-content: center !important;
margin-top: 0.75rem;
}

#information-widgets .information-widget-search {
flex: 0 1 40rem;       /* maximale Breite der Suchleiste */
max-width: 100%;
}

/* Wetter-Widget: oben rechts im Header, größer, unabhängig von Titel/Suche */
#information-widgets .information-widget-openmeteo {
position: absolute;
top: 0.5rem;
right: 0.75rem;
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 1.35rem;
padding: 0.5rem 1.5rem;
background-color: rgba(255, 255, 255, 0.6) !important;
border: 1px solid rgba(255, 255, 255, 0.8);
border-radius: 9999px;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}

#information-widgets .information-widget-openmeteo img,
#information-widgets .information-widget-openmeteo svg {
width: 2.25rem;
height: 2.25rem;
}

/* Auf schmalen Bildschirmen: Wetter unter Titel/Suche stellen statt überlappen */
@media (max-width: 768px) {
  #information-widgets .information-widget-openmeteo {
  position: static;
  margin: 0.5rem auto 0;
  font-size: 1.1rem;
  padding: 0.4rem 1rem;
  }
  #information-widgets .information-widget-openmeteo img,
  #information-widgets .information-widget-openmeteo svg {
  width: 1.75rem;
  height: 1.75rem;
  }
}

/* Suchfeld im hellen Glas-Stil */
#information-widgets .information-widget-search input {
background-color: rgba(255, 255, 255, 0.6) !important;
border: 1px solid rgba(255, 255, 255, 0.8);
border-radius: 9999px;
padding-left: 1rem;
}
/* Platz unter dem Titel für das Motto schaffen */
#information-widgets .information-widget-greeting {
padding-bottom: 1.75rem;
}

/* Titeltext als Bezugspunkt für das Motto */
#information-widgets .information-widget-greeting span {
position: relative;
margin-right: 0 !important;   /* Standard-Abstand entfernen, damit rechtsbündig passt */
}

/* Motto: unter dem Titel, rechtsbündig mit dessen Ende */
#information-widgets .information-widget-greeting span::after {
content: "... Gemeinsam Erfolgreich!";
position: absolute;
top: 100%;
right: 0;
margin-top: 0.25rem;
font-size: 1.1rem;
font-style: italic;
font-weight: 400;
white-space: nowrap;
color: rgba(30, 41, 59, 0.8);  /* dunkles Slate, passend zum hellen Theme */
}

/* Auf schmalen Bildschirmen umbrechen statt überlaufen */
@media (max-width: 640px) {
  #information-widgets .information-widget-greeting span::after {
  white-space: normal;
  width: 100%;
  text-align: right;
  font-size: 0.95rem;
  }
}