@font-face { font-family: "Inter"; src: url("/brand/inter-500.woff2") format("woff2"); font-weight: 400 500; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/brand/inter-700.woff2") format("woff2"); font-weight: 600 800; font-display: swap; }

/* NETFACTORY Farben (Palette D): immer dunkel, Akzent #3BA88A
   "html:root" statt ":root", weil custom.css vor app.css geladen wird */
html:root, html:root.dark {
  --background: 210 5% 8%;       /* #141516 */
  --foreground: 0 0% 100%;
  --card: 210 3% 12%;            /* #1d1e1f */
  --card-foreground: 0 0% 100%;
  --popover: 210 3% 12%;
  --popover-foreground: 0 0% 100%;
  --primary: 163 48% 45%;        /* #3ba88a */
  --primary-foreground: 210 3% 12%;
  --secondary: 210 5% 16%;
  --secondary-foreground: 0 0% 100%;
  --muted: 210 5% 16%;
  --muted-foreground: 0 0% 66%;
  --accent: 210 5% 16%;
  --accent-foreground: 0 0% 100%;
  --border: 210 3% 20%;
  --input: 210 3% 20%;
  --ring: 163 48% 45%;
  --radius: 1.25rem;
}
/* englischen Untertitel "System Monitoring Dashboard" im Kopf ausblenden */
header p.text-sm.text-muted-foreground { display: none; }
/* Fußzeile "Powered by Gatus" und GitHub-Symbol ausblenden */
footer:has(a[href*="gatus.io"]) { display: none !important; }
/* Suche/Filter/Sortierung und Umschalter hell/dunkel ausblenden */
div.bg-card.border:has(> div input[placeholder*="Search"]) { display: none !important; }
button[title*="light mode"], button[aria-label*="light mode"],
button[title*="dark mode"], button[aria-label*="dark mode"],
button[title*="min-max"] { display: none !important; }

/* Kopfzeile wie auf der Website: 80px hoch, Wortmarke 18-24px hoch, kein Text daneben */
header > .container { padding-top: 0; padding-bottom: 0; }
header > .container > div { height: 80px; }
header a h1 { display: none; }
header .w-12.h-12 { width: auto; height: clamp(18px, 1.2vw + 8px, 24px); }
header .w-12.h-12 img { width: auto; height: 100%; }

/* Überschrift und Abstände wie auf der Website */
div.container.py-8 { padding-top: clamp(3rem, 2.25rem + 3vw, 5.25rem); }
h1.text-4xl { font-size: clamp(2.25rem, 1.7rem + 2vw, 3.375rem); letter-spacing: -0.02em; line-height: 1.08; }
h1.text-4xl + p.text-muted-foreground { display: none; }   /* Unterzeile ausgeblendet */

/* Dienste groß: zwei Spalten über die volle Breite (mobil eine) */
div.grid:has(> .endpoint) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: .5rem; }
@media (max-width: 767px) { div.grid:has(> .endpoint) { grid-template-columns: 1fr; } }
.endpoint { border-radius: 1.25rem; }
.endpoint .endpoint-header { padding: 1.25rem 1.5rem .5rem !important; }
.endpoint .endpoint-content { padding: .5rem 1.5rem 1.25rem !important; }
.endpoint h3 span { font-size: 1.1875rem; line-height: 1.25; letter-spacing: -0.012em; }
.endpoint .endpoint-header .text-muted-foreground { font-size: .875rem; margin-top: .125rem; }
.endpoint .rounded-full.text-xs { font-size: .8125rem; padding: .25rem .75rem; }
.endpoint .flex.gap-0\.5 { gap: 3px; }
.endpoint .flex.gap-0\.5 > div { height: 2.25rem; border-radius: 3px; }
.endpoint .endpoint-content .text-xs { font-size: .8125rem; }

/* Reihenfolge: Oldenburg, Greven, dann Nameserver */
.endpoint:has(span[title="Datacenter Oldenburg"]) { order: -2; }
.endpoint:has(span[title="Datacenter Greven"]) { order: -1; }

/* Symbole links neben dem Namen (wie auf der Website), Auswahl nach Namensanfang */
.endpoint .endpoint-header > div { align-items: center; gap: .875rem; }
.endpoint .endpoint-header > div::before { content: ""; flex: none; width: 2.5rem; height: 2.5rem; border-radius: .75rem; background: rgba(59,168,138,.14) center / 1.25rem no-repeat; }
.endpoint .endpoint-header > div:has(span[title^="Datacenter"])::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233BA88A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='3' width='20' height='8' rx='2'/%3E%3Crect x='2' y='13' width='20' height='8' rx='2'/%3E%3Cpath d='M6 7h.01M6 17h.01'/%3E%3C/svg%3E"); }
.endpoint .endpoint-header > div:has(span[title^="Nameserver"])::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233BA88A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M2 12h20M12 2a15 15 0 0 1 0 20M12 2a15 15 0 0 0 0 20'/%3E%3C/svg%3E"); }
body { letter-spacing: -0.005em; }
h1, h2, h3 { letter-spacing: -0.016em; }

/* Status "OK" im Markengrün, mit dunkler Schrift wie die Buttons der Website */
.bg-green-500, .bg-green-400, .dark .dark\:bg-green-600 { background-color: #3BA88A !important; }
.hover\:bg-green-700:hover { background-color: #4DBA9C !important; }
.bg-green-500.text-white { color: #141516 !important; }
.bg-green-500 .bg-green-400 { background-color: #141516 !important; }

/* Graue Flächen neutral statt blaugrau */
.dark .dark\:bg-gray-700 { background-color: #2c2e30 !important; }
.dark .dark\:bg-gray-800 { background-color: #1d1e1f !important; }