:root {
  --apple-bg: #0b0b0f;
  --apple-card: rgba(255, 255, 255, 0.055);
  --apple-card-hover: rgba(255, 255, 255, 0.09);
  --apple-border: rgba(255, 255, 255, 0.08);
  --apple-text: rgba(255, 255, 255, 0.92);
  --apple-muted: rgba(255, 255, 255, 0.48);
  --apple-shadow: 0 20px 60px rgba(0, 0, 0, 0.28);
}

/* Hintergrund */
body {
  background:
    radial-gradient(circle at top left, rgba(120, 120, 140, 0.12), transparent 32rem),
    radial-gradient(circle at top right, rgba(80, 100, 130, 0.10), transparent 28rem),
    var(--apple-bg) !important;
  color: var(--apple-text) !important;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI", sans-serif !important;
}

/* Gesamtbreite ruhiger halten */
main {
  max-width: 1380px !important;
  margin: 0 auto !important;
}

/* Header cleaner */
header {
  margin-bottom: 2.5rem !important;
}

header h1,
header .text-4xl,
header .text-3xl {
  font-weight: 600 !important;
  letter-spacing: -0.04em !important;
}

header p,
header .description {
  color: var(--apple-muted) !important;
  font-weight: 400 !important;
}

/* Gruppenüberschriften */
.services-group,
.bookmarks-group {
  margin-bottom: 2rem !important;
}

.services-group h2,
.bookmarks-group h2,
h2 {
  font-size: 0.82rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
  color: var(--apple-muted) !important;
  text-transform: none !important;
}

/* Service-Karten */
.service,
.bookmark {
  border-radius: 24px !important;
}

.service > a,
.service > div,
.bookmark > a,
.bookmark > div {
  background: var(--apple-card) !important;
  border: 1px solid var(--apple-border) !important;
  border-radius: 24px !important;
  box-shadow: none !important;
  backdrop-filter: blur(28px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(140%) !important;
  transition:
    transform 180ms ease,
    background 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease !important;
}

/* Hover wie macOS: subtil */
.service > a:hover,
.service > div:hover,
.bookmark > a:hover,
.bookmark > div:hover {
  background: var(--apple-card-hover) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--apple-shadow) !important;
}

/* Icons etwas ruhiger */
.service img,
.bookmark img {
  filter: saturate(0.92) contrast(1.02) !important;
  opacity: 0.94 !important;
}

/* Titel */
.service-name,
.bookmark-name,
.service-title,
.bookmark-title {
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
  color: var(--apple-text) !important;
}

/* Beschreibungen / Stats dezenter */
.service-description,
.bookmark-description,
.description,
.text-theme-500,
.text-theme-600,
.text-theme-700 {
  color: var(--apple-muted) !important;
}

/* Status-Dot dezenter */
.status,
.status-dot {
  opacity: 0.75 !important;
}

/* Weniger visuelle Härte bei Tabellen/Widgets */
.widget,
.information-widget {
  background: var(--apple-card) !important;
  border: 1px solid var(--apple-border) !important;
  border-radius: 24px !important;
  backdrop-filter: blur(28px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(140%) !important;
}

/* Scrollbar macOS-like */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.26);
  border: 3px solid transparent;
  background-clip: content-box;
}