html, body { height: 100% !important; }
body { background: transparent !important; }
body::before { content: ""; position: fixed; inset: 0; background-image: url("/images/see-berge.jpg"); background-size: cover; background-position: center; background-repeat: no-repeat; z-index: -1; transform: translateZ(0); }

/* Wallpaper erzwingen */
body {
  background-image: url("/images/see-berge.jpg") !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
}

/* Nur die Kacheln sind Milchglas */
.service-card,
.widget-card {
  background-color: rgba(255, 255, 255, 0.04) !important; /* weniger Glas */
  backdrop-filter: blur(22px) saturate(135%);       /* weniger Blur */
  -webkit-backdrop-filter: blur(22px) saturate(135%);
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.18);      /* subtilere Kante */
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.18);
}

/* Schrift weiß + leichte Lesbarkeit */
.service-card *,
.widget-card * {
  color: rgba(255, 255, 255, 0.92) !important;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}

.section-title {
  color: rgba(255, 255, 255, 0.92) !important;
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* --- Status-Färbung als Tint (ohne Rand) --- */
.service-card.status-ok,
.service-card.status-warn,
.service-card.status-bad {
  border: none !important;
  outline: none !important;

  /* sanfte Animation */
  transition: box-shadow 350ms ease, transform 350ms ease;

  /* damit es „lebt“, aber nicht nervt */
  transform: translateZ(0);
}

/* OK / WARN / BAD -> riesiger inset-shadow färbt die ganze Kachel */
.service-card.status-ok {
  box-shadow:
    inset 0 0 0 9999px rgba(0, 200, 120, 0.18) !important;
}

.service-card.status-warn {
  box-shadow:
    inset 0 0 0 9999px rgba(255, 180, 0, 0.18) !important;
}

.service-card.status-bad {
  box-shadow:
    inset 0 0 0 9999px rgba(255, 60, 60, 0.18) !important;
}

/* optional: leichtes „pulsieren“ beim Wechsel (subtil) */
.service-card.status-ok,
.service-card.status-warn,
.service-card.status-bad {
  transform: scale(1.002);
}

/* DEBUG: wenn status-ok auf einer card ist, MUSS sie grün getönt sein */
.service-card.status-ok {
  box-shadow: inset 0 0 0 9999px rgba(0, 200, 120, 0.18) !important;
}

/* Status-Tint: sicher sichtbar (Overlay) */
.service-card { position: relative !important; overflow: hidden !important; }

.service-card.status-ok::after,
.service-card.status-warn::after,
.service-card.status-bad::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  pointer-events:none;
  z-index: 2; /* über Inhalt */
}

.service-card.status-ok::after   { background: rgba(0, 200, 120, 0.18) !important; }
.service-card.status-warn::after { background: rgba(255, 180, 0, 0.20) !important; }
.service-card.status-bad::after  { background: rgba(255, 60, 60, 0.22) !important; }

/* ===== Sanfte Animation für Statusfarben ===== */
.service-card {
  transition:
    box-shadow 350ms ease,
    filter 350ms ease,
    transform 200ms ease;
}

/* Pi-hole Widgets nebeneinander (4 Spalten) */
.service-card:has(a[href*=":8443/admin"]) [class*="widgets"],
.service-card:has(a[href*=":8443/admin"]) [class*="widget"] {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(120px, 1fr)) !important;
  gap: 10px !important;
  align-items: stretch !important;
}

/* Falls die Widget-Kacheln selbst zu breit sind */
.service-card:has(a[href*=":8443/admin"]) [class*="widget"] > * {
  min-width: 0 !important;
}

/* Fix: Homepage eigenes Background-Overlay war zu deckend */
#background {
  background-image:
    linear-gradient(rgb(var(--bg-color) / 0.20), rgb(var(--bg-color) / 0.20)),
    url("/images/see-berge.jpg") !important;
}