/* ============================================================
   SH-media Branding für Homepage (gethomepage.dev)
   Weiß/Schwarz, serifenlos, Akzent-Verlauf #c331c6 -> #3415b4
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600&display=swap');

:root {
  --sh-g1: #c331c6;
  --sh-g2: #3415b4;
  --sh-gradient: linear-gradient(115deg, var(--sh-g1), var(--sh-g2));
  --sh-ink: #0a0a0a;
  --sh-bg: #ffffff;
  --sh-line: #e6e6e6;
}

body,
#page_container {
  background: var(--sh-bg) !important;
  color: var(--sh-ink) !important;
  font-family: 'Inter', system-ui, sans-serif !important;
}

/* Überschriften / Uhrzeit / Titel-Bereich in der Display-Schrift */
h1, h2, h3,
#information-widgets,
.text-theme-800 {
  font-family: 'Space Grotesk', system-ui, sans-serif !important;
  letter-spacing: -0.01em;
}

/* Seitentitel oben links: Gradient-Text statt Standardfarbe */
#page_container h1,
.pageTitle {
  background: var(--sh-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 700 !important;
}

/* Service-/Bookmark-Karten: klare Linien statt Schatten, dezenter Hover */
:is(.dark .dark\:bg-white\/5),
.bg-theme-100\/20,
.shadow-md {
  background-color: #fafafa !important;
  border: 1px solid var(--sh-line) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  transition: border-color .15s ease, transform .1s ease;
}

:is(.dark .dark\:bg-white\/5):hover,
.bg-theme-100\/20:hover {
  border-color: var(--sh-ink) !important;
}

/* Status-Punkt bei "online" in den Gradient-Grünton ziehen, bleibt aber
   klar von "offline" unterscheidbar (Ampel-Logik bleibt funktional) */
.bg-green-500,
.bg-green-400 {
  background: #16a34a !important;
}
.bg-red-500,
.bg-red-400 {
  background: #dc2626 !important;
}

/* Suchfeld: dünner Rahmen, Fokus in Akzentfarbe statt Standardblau */
#search input,
input[type="text"] {
  border-radius: 8px !important;
}
#search input:focus,
input[type="text"]:focus {
  outline: none !important;
  box-shadow: 0 0 0 2px var(--sh-g2) !important;
}

/* dünne Trennlinie unter der Kopfzeile, im Akzent-Verlauf */
#information-widgets {
  border-bottom: 2px solid transparent;
  border-image: var(--sh-gradient) 1;
  padding-bottom: 12px;
}

/* Links/Interaktive Elemente: Hover in Akzentfarbe statt Standard-Theme */
a:hover {
  color: var(--sh-g2) !important;
}