/* ContentForge-Design fuer Homepage.dev — Schwarz + Neongruen */
:root {
  --hp-accent: #bfff00;
  --hp-bg: #000000;
  --hp-surface: #0a0a0a;
  --hp-elevated: #141414;
  --hp-border: #1e1e1e;
  --hp-border-strong: #2a2a2a;
  --hp-text: #ffffff;
  --hp-muted: #666666;
  --hp-secondary: #a8a8a8;
}

html, body {
  background: var(--hp-bg) !important;
  color: var(--hp-text) !important;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif !important;
  -webkit-font-smoothing: antialiased;
}

/* Header/Greeting */
#information-widgets, #footer {
  border-color: var(--hp-border) !important;
}
.text-theme-500, .text-theme-600, .text-theme-700, .text-theme-800, .text-theme-900,
h1, h2, h3 {
  color: var(--hp-text) !important;
  letter-spacing: 0.05em;
}

/* Section headings (group labels) — uppercase, muted */
h2 {
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.2em !important;
  color: var(--hp-muted) !important;
  border-bottom: 1px solid var(--hp-border);
  padding-bottom: 8px;
  margin-bottom: 12px !important;
}

/* Service Cards */
#services .service-card, .service, [class*="service"] > div {
  background: var(--hp-surface) !important;
  border: 1px solid var(--hp-border) !important;
  border-radius: 4px !important;
  transition: border-color .15s, background .15s !important;
}
#services .service-card:hover, .service:hover {
  border-color: var(--hp-accent) !important;
  background: var(--hp-elevated) !important;
}

/* Card text */
.service-name, .service-title, [class*="service-name"] {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--hp-text) !important;
}
.service-description, [class*="service-desc"] {
  font-size: 10px !important;
  color: var(--hp-secondary) !important;
  line-height: 1.5 !important;
}

/* Icon boxes — accent green background where possible */
.service-icon, [class*="service-icon"] img {
  filter: drop-shadow(0 0 4px rgba(191, 255, 0, 0.15));
}

/* Widget-Werte (Ressourcen, Datum) */
.resources-value, [class*="widget"] {
  color: var(--hp-accent) !important;
}

/* Bookmarks */
.bookmark-text, [class*="bookmark"] {
  background: var(--hp-surface) !important;
  border: 1px solid var(--hp-border) !important;
  color: var(--hp-text) !important;
}
.bookmark-text:hover {
  border-color: var(--hp-accent) !important;
}

/* Status-Dots */
.status-running, [class*="status-running"] {
  background: var(--hp-accent) !important;
}

/* Links */
a { color: var(--hp-text); }
a:hover { color: var(--hp-accent) !important; }

/* Neon-Akzent-Streifen oben */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--hp-accent);
  z-index: 9999;
}