:root {
  --color-50: 239 246 255;
  --color-100: 219 234 254;
  --color-200: 191 219 254;
  --color-300: 147 197 253;
  --color-400: 96 165 250;
  --color-500: 56 189 248;
  --color-600: 14 165 233;
  --color-700: 3 105 161;
  --color-800: 30 64 120;
  --color-900: 15 23 42;
}

body {
  background:
    radial-gradient(circle at top left, rgba(34, 211, 238, 0.10), transparent 35%),
    linear-gradient(135deg, #07111f 0%, #0b1630 45%, #07101f 100%) !important;
  color: #dbeafe !important;
}

#__next {
  background: transparent !important;
}

header,
main {
  background: transparent !important;
}

h1::before {
  content: "Destroyer-Dashboard";
  display: block;
  font-size: 34px;
  font-weight: 800;
  letter-spacing: 0.3px;
  color: #f8fafc;
  margin-bottom: 6px;
}

h1 {
  color: #93c5fd !important;
}

section > div,
[class*="service"],
[class*="card"],
[class*="bookmark"] {
  border-radius: 10px !important;
}

.bg-theme-800,
.bg-theme-900,
.bg-theme-950,
.bg-black,
.bg-gray-800,
.bg-gray-900 {
  background: linear-gradient(180deg, rgba(30, 47, 82, 0.96), rgba(20, 34, 59, 0.96)) !important;
  border: 1px solid rgba(96, 165, 250, 0.18) !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22) !important;
}

.service-card,
.bookmark-card {
  background: linear-gradient(180deg, rgba(28, 45, 80, 0.98), rgba(18, 32, 56, 0.98)) !important;
}

.service-card:hover,
.bookmark-card:hover {
  transform: translateY(-2px);
  border-color: rgba(56, 189, 248, 0.55) !important;
  box-shadow: 0 12px 26px rgba(8, 145, 178, 0.22) !important;
}

input {
  background: rgba(15, 23, 42, 0.85) !important;
  border: 1px solid rgba(96, 165, 250, 0.25) !important;
  color: #dbeafe !important;
}


h1::before {
  font-family: "Viner Hand ITC", "Segoe Script", "Comic Sans MS", cursive !important;
  font-size: 42px !important;
  font-weight: 400 !important;
  letter-spacing: 1px !important;
  color: #ffffff !important;
  text-shadow: 0 0 10px rgba(56, 189, 248, 0.45);
}

h1::before {
  font-family: "Viner Hand ITC", "Segoe Script", "Comic Sans MS", cursive !important;
  font-size: 42px !important;
  font-weight: 400 !important;
  letter-spacing: 1px !important;
  color: #ffffff !important;
  text-shadow: 0 0 10px rgba(56, 189, 248, 0.45);
}

/* Destroyer Hauptüberschrift sichtbar über der Status-Leiste */
body::before {
  content: "Destroyer-Dashboard";
  position: fixed;
  top: 18px;
  left: 62px;
  z-index: 9999;
  font-family: "Viner Hand ITC", "Segoe Script", "Comic Sans MS", cursive;
  font-size: 44px;
  font-weight: 400;
  letter-spacing: 1px;
  color: #ffffff;
  text-shadow:
    0 0 8px rgba(56, 189, 248, 0.65),
    0 0 18px rgba(37, 99, 235, 0.45);
  pointer-events: none;
}

/* Inhalt nach unten schieben, damit Überschrift Platz hat */
body {
  padding-top: 72px !important;
}

/* Statusleiste / Trennlinie etwas tiefer und sauberer */
header {
  margin-top: 8px !important;
}

/* Überschrift zentriert und größer */
body::before {
  left: 50% !important;
  transform: translateX(-50%) !important;
  top: 14px !important;
  font-size: 46px !important;
  text-align: center !important;
  white-space: nowrap !important;
}

/* Linie direkt unter der Überschrift */
body::after {
  content: "";
  position: fixed;
  top: 82px;
  left: 62px;
  right: 62px;
  height: 1px;
  z-index: 9998;
  background: rgba(219, 234, 254, 0.65);
  box-shadow: 0 0 8px rgba(56, 189, 248, 0.35);
  pointer-events: none;
}

/* Inhalt etwas tiefer, damit Linie sauber sitzt */
body {
  padding-top: 92px !important;
}

/* Feintuning: Überschrift + oberer Trennstrich */
body::before {
  top: 10px !important;
  font-size: 48px !important;
}

body::after {
  top: 96px !important;
  left: 50px !important;
  right: 50px !important;
  height: 1px !important;
  background: rgba(219, 234, 254, 0.55) !important;
}

/* Statusleiste passend unter dem oberen Strich */
body {
  padding-top: 108px !important;
}

/* Feintuning: oberer Strich gleiche Länge + weniger Abstand zur Statusleiste */
body::after {
  top: 86px !important;
  left: 63px !important;
  right: 63px !important;
}

body {
  padding-top: 94px !important;
}

/* === DESTROYER HEADER FINAL === */

/* Überschrift */
body::before {
  content: "Destroyer-Dashboard" !important;
  position: fixed !important;
  top: 6px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 99999 !important;
  font-family: "Viner Hand ITC", "Segoe Script", "Comic Sans MS", cursive !important;
  font-size: 48px !important;
  font-weight: 400 !important;
  color: #ffffff !important;
  text-align: center !important;
  white-space: nowrap !important;
  text-shadow:
    0 0 8px rgba(56, 189, 248, 0.75),
    0 0 18px rgba(37, 99, 235, 0.55) !important;
  pointer-events: none !important;
}

/* Oberer Strich gleiche Breite wie Dashboard-Inhalt */
body::after {
  content: "" !important;
  position: fixed !important;
  top: 76px !important;
  left: 60px !important;
  right: 60px !important;
  height: 1px !important;
  z-index: 99998 !important;
  background: rgba(219, 234, 254, 0.55) !important;
  box-shadow: 0 0 8px rgba(56, 189, 248, 0.25) !important;
  pointer-events: none !important;
}

/* Abstand zwischen oberem Strich und Statusleiste verkleinern */
body {
  padding-top: 72px !important;
}

/* Statusleiste näher an den oberen Strich */
header {
  margin-top: -18px !important;
}

/* === DESTROYER HEADER FINAL FEINTUNING 2 === */

/* Oberer Strich auf gleiche Länge wie der untere */
body::after {
  top: 76px !important;
  left: 125px !important;
  right: 125px !important;
}

/* Abstand zwischen oberem Strich und Statusleiste deutlich kleiner */
body {
  padding-top: 42px !important;
}

header {
  margin-top: -32px !important;
}

/* === DESTROYER HEADER FINAL FEINTUNING 3 === */

/* Überschrift etwas tiefer */
body::before {
  top: 8px !important;
}

/* Oberer Strich wieder etwas länger und sauber unter Überschrift */
body::after {
  top: 78px !important;
  left: 85px !important;
  right: 85px !important;
}

/* Statusleiste mittlerer Abstand */
body {
  padding-top: 58px !important;
}

header {
  margin-top: -22px !important;
}

/* === DESTROYER HEADER FINAL FEINTUNING 4 === */

/* Oberer Strich: minimal dicker und Länge angepasst */
body::after {
  left: 74px !important;
  right: 74px !important;
  height: 2px !important;
  background: rgba(219, 234, 254, 0.58) !important;
}

/* Untere Status-Trennlinie optisch angleichen */
header {
  border-bottom-width: 2px !important;
}

/* === DESTROYER HEADER FINAL FEINTUNING 5 === */

/* Obere Linie exakt kürzer wie die untere Status-Linie */
body::after {
  left: 54px !important;
  right: 54px !important;
}

/* === DESTROYER HEADER FINAL FEINTUNING 6 === */

/* Obere Linie kürzer machen */
body::after {
  left: 95px !important;
  right: 95px !important;
}

/* === DESTROYER HEADER FINAL FEINTUNING 7 === */

/* 3 Zeilen Abstand zwischen Überschrift und oberem Strich */
body::after {
  top: 118px !important;
}

/* Restlichen Inhalt passend nach unten schieben */
body {
  padding-top: 98px !important;
}

/* === Disk Temperatur Kacheln === */

/* CustomAPI Temperaturwert größer/fetter */
.service-card .uppercase {
  display: none !important;
}

.service-card [class*="text-theme-"] {
  font-weight: 800 !important;
}

/* Widget-Wert optisch stärker */
.service-card div:has(+ .uppercase) {
  font-size: 22px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  text-shadow: 0 0 8px rgba(56, 189, 248, 0.45);
}

/* === Scroll-Fix: Überschrift und oberer Strich nicht mehr sticky === */
body::before {
  position: absolute !important;
}

body::after {
  position: absolute !important;
}

/* === Header wieder fest beim Scrollen === */
body::before {
  position: fixed !important;
}

body::after {
  position: fixed !important;
}

/* === Destroyer Header deaktivieren, wird jetzt direkt im Dashboard gebaut === */
body::before,
body::after {
  content: none !important;
  display: none !important;
}

body {
  padding-top: 0 !important;
}

header {
  margin-top: 0 !important;
}

/* === Destroyer-Dashboard Überschrift direkt im Homepage-Header === */
header {
  position: relative !important;
  padding-top: 125px !important;
  margin-top: 0 !important;
}

/* Überschrift im Dashboard-Fluss */
header::before {
  content: "Destroyer-Dashboard" !important;
  position: absolute !important;
  top: 8px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  font-family: "Viner Hand ITC", "Segoe Script", "Comic Sans MS", cursive !important;
  font-size: 48px !important;
  font-weight: 400 !important;
  color: #ffffff !important;
  text-align: center !important;
  white-space: nowrap !important;
  text-shadow:
    0 0 8px rgba(56, 189, 248, 0.75),
    0 0 18px rgba(37, 99, 235, 0.55) !important;
  pointer-events: none !important;
}

/* Strich unter der Überschrift */
header::after {
  content: "" !important;
  position: absolute !important;
  top: 112px !important;
  left: 95px !important;
  right: 95px !important;
  height: 2px !important;
  background: rgba(219, 234, 254, 0.58) !important;
  box-shadow: 0 0 8px rgba(56, 189, 248, 0.25) !important;
  pointer-events: none !important;
}

/* === Destroyer Header echtes Dashboard-Element === */
#destroyer-dashboard-header {
  width: 100%;
  padding-top: 8px;
  margin-bottom: 26px;
}

#destroyer-dashboard-header .destroyer-title {
  font-family: "Viner Hand ITC", "Segoe Script", "Comic Sans MS", cursive !important;
  font-size: 48px;
  font-weight: 400;
  color: #ffffff;
  text-align: center;
  white-space: nowrap;
  text-shadow:
    0 0 8px rgba(56, 189, 248, 0.75),
    0 0 18px rgba(37, 99, 235, 0.55);
}

#destroyer-dashboard-header .destroyer-line {
  height: 2px;
  margin: 45px 95px 0 95px;
  background: rgba(219, 234, 254, 0.58);
  box-shadow: 0 0 8px rgba(56, 189, 248, 0.25);
}

/* === Destroyer JS-Header komplett deaktivieren === */
#destroyer-dashboard-header {
  display: none !important;
}

header::before,
header::after {
  content: none !important;
  display: none !important;
}

header {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* === Destroyer Header FINAL ohne JS und ohne zweiten Scrollbereich === */
main::before {
  content: "Destroyer-Dashboard" !important;
  display: block !important;
  grid-column: 1 / -1 !important;
  width: calc(100% - 190px) !important;
  margin: 0 auto 28px auto !important;
  padding-top: 8px !important;
  padding-bottom: 58px !important;
  border-bottom: 2px solid rgba(219, 234, 254, 0.58) !important;

  font-family: "Viner Hand ITC", "Segoe Script", "Comic Sans MS", cursive !important;
  font-size: 48px !important;
  font-weight: 400 !important;
  color: #ffffff !important;
  text-align: center !important;
  white-space: nowrap !important;
  text-shadow:
    0 0 8px rgba(56, 189, 248, 0.75),
    0 0 18px rgba(37, 99, 235, 0.55) !important;
}

/* Sicherheit: alte Header-Tricks bleiben aus */
body::before,
body::after,
header::before,
header::after,
#destroyer-dashboard-header {
  content: none !important;
  display: none !important;
}

/* === Obere Ressourcen-Leiste ausblenden === */
header {
  display: none !important;
}

/* === Destroyer-Dashboard Gruppenüberschrift größer + Viner Hand ITC === */
main section:first-of-type h2,
main section:first-of-type [class*="text-xl"],
main section:first-of-type [class*="font-medium"] {
  font-family: "Viner Hand ITC", "Segoe Script", "Comic Sans MS", cursive !important;
  font-size: 34px !important;
  font-weight: 400 !important;
  color: #ffffff !important;
  text-shadow:
    0 0 8px rgba(56, 189, 248, 0.65),
    0 0 18px rgba(37, 99, 235, 0.45) !important;
  letter-spacing: 1px !important;
}

/* === Destroyer-Dashboard echte Header-Kachel === */
#destroyer-title-card {
  justify-content: center !important;
  text-align: center !important;
  min-height: 96px !important;
}

#destroyer-title-card .service-title,
#destroyer-title-card [class*="service-title"],
#destroyer-title-card [class*="font-medium"],
#destroyer-title-card [class*="text-sm"],
#destroyer-title-card [class*="text-base"] {
  font-family: "Viner Hand ITC", "Segoe Script", "Comic Sans MS", cursive !important;
  font-size: 38px !important;
  font-weight: 400 !important;
  color: #ffffff !important;
  text-shadow:
    0 0 8px rgba(56, 189, 248, 0.75),
    0 0 18px rgba(37, 99, 235, 0.55) !important;
  letter-spacing: 1px !important;
}

/* Beschreibung kleiner lassen */
#destroyer-title-card .service-description,
#destroyer-title-card [class*="description"] {
  font-family: inherit !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #dbeafe !important;
  text-shadow: none !important;
}

/* === Gruppenüberschriften größer === */
main h2 {
  font-size: 34px !important;
  line-height: 1.2 !important;
  font-weight: 500 !important;
  color: #eaf6ff !important;
}

/* Erste Überschrift Destroyer-Dashboard etwas edler */
main h2:first-of-type {
  font-family: "Viner Hand ITC", "Segoe Script", "Comic Sans MS", cursive !important;
  font-size: 38px !important;
  font-weight: 400 !important;
  color: #ffffff !important;
  text-shadow:
    0 0 8px rgba(56, 189, 248, 0.65),
    0 0 18px rgba(37, 99, 235, 0.45) !important;
}

/* === Mehrzeilige Beschreibungen sauber anzeigen === */
.service-description {
  white-space: pre-wrap !important;
  line-height: 1.45 !important;
}

/* === Root Disk Kachel Fix === */
.service-card:has(a[href="http://192.168.50.50:61208"]) {
  min-height: 150px !important;
}

/* Fortschrittsbalken / Disk-Footer sauber nach unten */
.service-card:has(a[href="http://192.168.50.50:61208"]) [class*="progress"],
.service-card:has(a[href="http://192.168.50.50:61208"]) [class*="absolute"] {
  bottom: 12px !important;
}

/* Root Disk Text kleiner und sauberer */
.service-card:has(a[href="http://192.168.50.50:61208"]) {
  overflow: hidden !important;
}

/* === Root Disk Labels über den Werten anzeigen === */
.service-card:has(a[href="#"]) .uppercase {
  display: block !important;
  order: -1 !important;
  margin-bottom: 6px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #dbeafe !important;
  letter-spacing: 0.5px !important;
}

/* Root Disk Werte darunter groß lassen */
.service-card:has(a[href="#"]) div:has(+ .uppercase) {
  font-size: 34px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
}

/* === Root Disk: Label direkt über Wert === */
.service-card:has([href="#"]) {
  white-space: pre-line !important;
}

.service-card:has([href="#"]) .uppercase {
  display: none !important;
}

/* === Root Disk Beschreibung wieder normal === */
.service-card .service-description,
.service-card [class*="description"] {
  font-weight: 400 !important;
}

/* === HDD/NVMe Kacheln: Modellname nicht fett, Temperatur weniger fett === */

/* Beschreibung/Modell wieder normal */
.service-card .service-description,
.service-card [class*="description"] {
  font-weight: 400 !important;
}

/* HDD/NVMe Temperaturwerte nicht mehr extra fett */
.service-card:has(a[href="#"]) div:has(+ .uppercase),
.service-card:has([href="#"]) div:has(+ .uppercase) {
  font-weight: 500 !important;
  text-shadow: none !important;
}

/* Falls Werte direkt im CustomAPI-Block groß/fett übernommen wurden */
.service-card:has(a[href="#"]) [class*="text-"],
.service-card:has([href="#"]) [class*="text-"] {
  font-weight: 500 !important;
}

/* === Root Disk: Belegt/Frei/Insgesamt direkt über den Werten === */
#root-disk-card .uppercase {
  display: block !important;
  order: -1 !important;
  margin-bottom: 6px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #dbeafe !important;
  letter-spacing: 0.4px !important;
  text-transform: none !important;
}

#root-disk-card div:has(+ .uppercase) {
  font-size: 32px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  text-shadow: 0 0 8px rgba(56, 189, 248, 0.35) !important;
}

/* === Root Disk Werte kleiner, damit GB daneben bleibt === */
#root-disk-card div:has(+ .uppercase) {
  font-size: 26px !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
}

#root-disk-card .uppercase {
  font-size: 13px !important;
}

/* === ZFS Pool Kachel wie Root Disk === */
#zfs-pool-card .uppercase {
  display: block !important;
  order: -1 !important;
  margin-bottom: 6px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #dbeafe !important;
  letter-spacing: 0.4px !important;
  text-transform: none !important;
}

#zfs-pool-card div:has(+ .uppercase) {
  font-size: 26px !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  text-shadow: 0 0 8px rgba(56, 189, 248, 0.35) !important;
}

/* === Storage Platzhalter unsichtbar, behalten aber Kachelplatz === */
#storage-spacer-1,
#storage-spacer-2,
#storage-spacer-3,
#storage-spacer-4,
#storage-spacer-5 {
  visibility: hidden !important;
  pointer-events: none !important;
}

/* === Netzwerk Traffic Kachel === */
#network-traffic-card {
  grid-column: span 2 / span 2 !important;
  min-height: 120px !important;
}

#network-traffic-card .uppercase {
  display: block !important;
  order: -1 !important;
  margin-bottom: 6px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #dbeafe !important;
  letter-spacing: 0.4px !important;
  text-transform: none !important;
}

#network-traffic-card div:has(+ .uppercase) {
  font-size: 28px !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  text-shadow: 0 0 8px rgba(56, 189, 248, 0.35) !important;
}

/* === Netzwerk Traffic wieder normale Kachelgröße === */
#network-traffic-card {
  grid-column: span 1 / span 1 !important;
  min-height: unset !important;
}

/* === Netzwerk Traffic: wieder normale Glances-Grafik-Kachel === */
#network-traffic-card {
  grid-column: span 1 / span 1 !important;
  min-height: unset !important;
}

#network-traffic-card .uppercase {
  display: initial !important;
}

/* === System Platzhalter unsichtbar, behalten aber Kachelplatz === */
#system-spacer-1,
#system-spacer-2,
#system-spacer-3,
#system-spacer-4 {
  visibility: hidden !important;
  pointer-events: none !important;
}

/* === Netzwerk Traffic Beschreibung rechtsbündig === */
#network-traffic-card .service-description,
#network-traffic-card [class*="description"] {
  text-align: right !important;
  display: block !important;
  width: 100% !important;
}

/* === Netzwerk Traffic Beschreibung linksbündig, feste Leerzeichen behalten === */
#network-traffic-card .service-description,
#network-traffic-card [class*="description"] {
  text-align: left !important;
  white-space: pre !important;
  display: block !important;
  width: 100% !important;
}

/* === FritzBox Herolzberg Schrift entschärfen === */
#fritzbox-herolzberg-card [class*="text-"],
#fritzbox-herolzberg-card div,
#fritzbox-herolzberg-card span {
  font-weight: 400 !important;
  text-shadow: none !important;
}

#fritzbox-herolzberg-card .uppercase {
  font-weight: 500 !important;
}

#fritzbox-herolzberg-card div:has(+ .uppercase) {
  font-size: 22px !important;
  font-weight: 500 !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
}

/* === FritzBox Herolzberg doppelt breite Kachel === */
#fritzbox-herolzberg-card {
  grid-column: span 2 / span 2 !important;
  min-height: 145px !important;
}

/* FritzBox Schrift normaler, nicht überfett */
#fritzbox-herolzberg-card [class*="text-"],
#fritzbox-herolzberg-card div,
#fritzbox-herolzberg-card span {
  font-weight: 400 !important;
  text-shadow: none !important;
}

#fritzbox-herolzberg-card div:has(+ .uppercase) {
  font-size: 22px !important;
  font-weight: 500 !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
}

/* === FritzBox Herolzberg wieder normale Kachelbreite === */
#fritzbox-herolzberg-card {
  grid-column: span 1 / span 1 !important;
  min-height: 120px !important;
}

/* === FritzBox Herolzberg wieder normale Kachelbreite === */
#fritzbox-herolzberg-card {
  grid-column: span 1 / span 1 !important;
  min-height: 120px !important;
}

/* === FritzBox Herolzberg halbe Breite statt volle Breite === */
#fritzbox-herolzberg-card {
  grid-column: span 1 / span 1 !important;
  min-height: 120px !important;
}

/* FritzBox Herolzberg Werte kleiner/normaler */
#fritzbox-herolzberg-card div:has(+ .uppercase) {
  font-size: 20px !important;
  font-weight: 500 !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
}

/* === FritzBox Herolzberg halbe Breite statt volle Breite === */
#fritzbox-herolzberg-card {
  grid-column: span 1 / span 1 !important;
  min-height: 120px !important;
}

/* FritzBox Herolzberg Werte kleiner/normaler */
#fritzbox-herolzberg-card div:has(+ .uppercase) {
  font-size: 20px !important;
  font-weight: 500 !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
}

/* === FritzBox Herolzberg große Detail-Kachel === */
#fritzbox-herolzberg-card {
  grid-column: span 2 / span 2 !important;
  min-height: 210px !important;
}

#fritzbox-herolzberg-card .uppercase {
  display: block !important;
  order: -1 !important;
  margin-bottom: 4px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #dbeafe !important;
  letter-spacing: 0.3px !important;
  text-transform: none !important;
}

#fritzbox-herolzberg-card div:has(+ .uppercase) {
  font-size: 17px !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
  font-weight: 500 !important;
  color: #ffffff !important;
  text-shadow: none !important;
}

/* === FritzBox Detail-Kacheln normal darstellen === */
#fritzbox-herolzberg-status,
#fritzbox-herolzberg-line,
#fritzbox-herolzberg-network {
  grid-column: span 1 / span 1 !important;
  min-height: 145px !important;
}

#fritzbox-herolzberg-status .uppercase,
#fritzbox-herolzberg-line .uppercase,
#fritzbox-herolzberg-network .uppercase {
  display: block !important;
  order: -1 !important;
  margin-bottom: 4px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: none !important;
}

#fritzbox-herolzberg-status div:has(+ .uppercase),
#fritzbox-herolzberg-line div:has(+ .uppercase),
#fritzbox-herolzberg-network div:has(+ .uppercase) {
  font-size: 18px !important;
  font-weight: 500 !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
}

/* === FritzBox Detail-Kacheln normal darstellen === */
#fritzbox-herolzberg-status,
#fritzbox-herolzberg-line,
#fritzbox-herolzberg-network {
  grid-column: span 1 / span 1 !important;
  min-height: 145px !important;
}

#fritzbox-herolzberg-status .uppercase,
#fritzbox-herolzberg-line .uppercase,
#fritzbox-herolzberg-network .uppercase {
  display: block !important;
  order: -1 !important;
  margin-bottom: 4px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: none !important;
}

#fritzbox-herolzberg-status div:has(+ .uppercase),
#fritzbox-herolzberg-line div:has(+ .uppercase),
#fritzbox-herolzberg-network div:has(+ .uppercase) {
  font-size: 18px !important;
  font-weight: 500 !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
}

/* === FritzBox Herolzberg eine große Detail-Kachel === */
#fritzbox-herolzberg-details {
  grid-column: span 2 / span 2 !important;
  min-height: 310px !important;
}

#fritzbox-herolzberg-details div,
#fritzbox-herolzberg-details span {
  white-space: pre-line !important;
  font-weight: 400 !important;
  line-height: 1.25 !important;
}

#fritzbox-herolzberg-details .uppercase {
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: none !important;
}

/* === FritzBox Herolzberg eine große Detail-Kachel === */
#fritzbox-herolzberg-details {
  grid-column: span 2 / span 2 !important;
  min-height: 310px !important;
}

#fritzbox-herolzberg-details div,
#fritzbox-herolzberg-details span {
  white-space: pre-line !important;
  font-weight: 400 !important;
  line-height: 1.25 !important;
}

#fritzbox-herolzberg-details .uppercase {
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: none !important;
}

/* === FritzBox Herolzberg Höhe korrigieren / Leerraum entfernen === */
#fritzbox-herolzberg-details {
  grid-column: span 2 / span 2 !important;
  min-height: 175px !important;
  height: auto !important;
}

#fritzbox-herolzberg-details > div {
  min-height: auto !important;
}

#fritzbox-herolzberg-details div,
#fritzbox-herolzberg-details span {
  line-height: 1.18 !important;
}

/* === FritzBox Herolzberg Anzeige kleiner === */
#fritzbox-herolzberg-details div,
#fritzbox-herolzberg-details span {
  font-size: 16px !important;
  line-height: 1.14 !important;
}

/* === Root Disk / ZFS / Speedtest Werte kleiner === */
#root-disk-card div,
#root-disk-card span,
#zfs-pool-card div,
#zfs-pool-card span,
#speedtest-card div,
#speedtest-card span {
  font-size: 16px !important;
  line-height: 1.14 !important;
}

/* === Root Disk / ZFS CustomAPI Werte wirklich kleiner === */
#root-disk-card [class*="text-"],
#root-disk-card [class*="font-"],
#root-disk-card div,
#root-disk-card span,
#zfs-pool-card [class*="text-"],
#zfs-pool-card [class*="font-"],
#zfs-pool-card div,
#zfs-pool-card span {
  font-size: 16px !important;
  line-height: 1.14 !important;
  font-weight: 500 !important;
}

#root-disk-card .text-4xl,
#root-disk-card .text-3xl,
#root-disk-card .text-2xl,
#zfs-pool-card .text-4xl,
#zfs-pool-card .text-3xl,
#zfs-pool-card .text-2xl {
  font-size: 16px !important;
}

/* === Root Disk / ZFS Werte noch kleiner === */
#root-disk-card [class*="text-"],
#root-disk-card [class*="font-"],
#root-disk-card div,
#root-disk-card span,
#zfs-pool-card [class*="text-"],
#zfs-pool-card [class*="font-"],
#zfs-pool-card div,
#zfs-pool-card span {
  font-size: 14px !important;
  line-height: 1.12 !important;
  font-weight: 500 !important;
}

#root-disk-card .text-4xl,
#root-disk-card .text-3xl,
#root-disk-card .text-2xl,
#zfs-pool-card .text-4xl,
#zfs-pool-card .text-3xl,
#zfs-pool-card .text-2xl {
  font-size: 14px !important;
}

/* === Root Disk / ZFS Werte noch kleiner === */
#root-disk-card [class*="text-"],
#root-disk-card [class*="font-"],
#root-disk-card div,
#root-disk-card span,
#zfs-pool-card [class*="text-"],
#zfs-pool-card [class*="font-"],
#zfs-pool-card div,
#zfs-pool-card span {
  font-size: 12px !important;
  line-height: 1.08 !important;
  font-weight: 500 !important;
}

#root-disk-card .text-4xl,
#root-disk-card .text-3xl,
#root-disk-card .text-2xl,
#zfs-pool-card .text-4xl,
#zfs-pool-card .text-3xl,
#zfs-pool-card .text-2xl {
  font-size: 12px !important;
}

/* === FritzBox Herolzberg kompakter === */
#fritzbox-herolzberg-details {
  min-height: 125px !important;
  height: auto !important;
  padding-bottom: 6px !important;
}

#fritzbox-herolzberg-details > div {
  min-height: auto !important;
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}

#fritzbox-herolzberg-details [class*="grid"] {
  gap: 6px !important;
}

#fritzbox-herolzberg-details [class*="rounded"] {
  min-height: 70px !important;
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}

#fritzbox-herolzberg-details div,
#fritzbox-herolzberg-details span {
  font-size: 13px !important;
  line-height: 1.05 !important;
}

/* === FritzBox Herolzberg horizontal scrollbar machen === */
#fritzbox-herolzberg-details {
  overflow-x: auto !important;
}

#fritzbox-herolzberg-details [class*="grid"] {
  min-width: 1100px !important;
  overflow-x: auto !important;
}

/* === FritzBox Herolzberg horizontal scrollbar bei kleinem Bildschirm === */
#fritzbox-herolzberg-details {
  overflow-x: auto !important;
  overflow-y: hidden !important;
  max-width: 100% !important;
  -webkit-overflow-scrolling: touch !important;
}

#fritzbox-herolzberg-details [class*="grid"] {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(300px, 1fr)) !important;
  min-width: 1250px !important;
  width: max-content !important;
}

#fritzbox-herolzberg-details [class*="grid"] > div {
  min-width: 300px !important;
}

/* === Nur FritzBox-Kachel innen horizontal scrollbar === */

/* Elternbereich der FritzBox-Kachel darf scrollen, aber nur dort */
*:has(> #fritzbox-herolzberg-details),
*:has(#fritzbox-herolzberg-details) {
  overflow-x: auto !important;
  max-width: 100% !important;
}

/* Die FritzBox-Kachel selbst bleibt im normalen Dashboard-Raster */
#fritzbox-herolzberg-details {
  max-width: 100% !important;
  width: 100% !important;
  min-width: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch !important;
}

/* Nur der innere FritzBox-Wertebereich wird breiter als die Kachel */
#fritzbox-herolzberg-details [class*="grid"] {
  display: grid !important;
  grid-template-columns: repeat(4, 280px) !important;
  width: 1160px !important;
  min-width: 1160px !important;
  max-width: none !important;
}

/* Innenfelder bleiben kompakt */
#fritzbox-herolzberg-details [class*="grid"] > div {
  width: 280px !important;
  min-width: 280px !important;
}

/* === FritzBox Scrollbox Höhe korrigieren === */
#fritzbox-herolzberg-details {
  min-height: 0 !important;
  height: auto !important;
}

#fritzbox-herolzberg-details [class*="grid"],
#fritzbox-herolzberg-details [class*="grid"] > div {
  align-items: flex-start !important;
  height: auto !important;
  min-height: 0 !important;
}

/* === FritzBox erste Scrollboxen nicht strecken === */
#fritzbox-herolzberg-details [style*="280px"] {
  height: fit-content !important;
  min-height: 0 !important;
  max-height: fit-content !important;
  align-self: flex-start !important;
  margin-bottom: 0 !important;
}

/* === FritzBox alle Scroll-Innenboxen gleiche Höhe === */
#fritzbox-herolzberg-details [style*="280px"] {
  height: 320px !important;
  min-height: 320px !important;
  max-height: 320px !important;
  align-self: stretch !important;
}

/* === FritzBox Scroll kompakt ohne große Platzhalter === */
#fritzbox-herolzberg-details {
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch !important;
}

#fritzbox-herolzberg-details [style*="280px"] {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  align-self: flex-start !important;
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}


/* === Root Disk / ZFS FINAL: Insgesamt wieder sichtbar === */
#root-disk-card,
#zfs-pool-card {
  min-height: 135px !important;
}

#root-disk-card .grid,
#zfs-pool-card .grid {
  gap: 8px !important;
}

#root-disk-card .grid > div,
#zfs-pool-card .grid > div {
  transform: none !important;
}

#root-disk-card div:has(+ .uppercase),
#zfs-pool-card div:has(+ .uppercase) {
  font-size: 18px !important;
  line-height: 1.15 !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
}

#root-disk-card .uppercase,
#zfs-pool-card .uppercase {
  display: block !important;
  font-size: 11px !important;
  line-height: 1.1 !important;
}

/* === FritzBox: nur innere Anzeige-Boxen sauber machen === */

/* Innere 4 Anzeige-Fenster größer machen */
#fritzbox-herolzberg-details [class*="grid"] > div {
  min-height: 105px !important;
  padding-top: 18px !important;
  padding-bottom: 18px !important;
  border-top: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

/* Striche innerhalb der FritzBox-Anzeige entfernen */
#fritzbox-herolzberg-details [class*="grid"] > div *,
#fritzbox-herolzberg-details [class*="grid"] > div div,
#fritzbox-herolzberg-details [class*="grid"] > div span {
  border-top: none !important;
  border-bottom: none !important;
  text-decoration: none !important;
  box-shadow: none !important;
}

/* Text sauber mittig in den Anzeige-Fenstern */
#fritzbox-herolzberg-details [class*="grid"] > div {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Textgröße normal lassen, nur sauber lesbar */
#fritzbox-herolzberg-details [class*="grid"] > div div,
#fritzbox-herolzberg-details [class*="grid"] > div span {
  font-size: 15px !important;
  line-height: 1.45 !important;
  font-weight: 400 !important;
  white-space: nowrap !important;
}

/* === FritzBox: nur Innenfenster höher machen, Scrollbalken behalten, Schrift unverändert === */
#fritzbox-herolzberg-details {
  overflow-x: auto !important;
  overflow-y: hidden !important;
}

/* Scroll-Inhalt bleibt breit, damit links/rechts scrollen bleibt */
#fritzbox-herolzberg-details [class*="grid"] {
  min-height: 150px !important;
}

/* Nur die vier inneren Anzeige-Fenster größer/höher */
#fritzbox-herolzberg-details [class*="grid"] > div {
  min-height: 130px !important;
  padding-top: 22px !important;
  padding-bottom: 22px !important;
}

/* Schrift NICHT verändern */

/* === FritzBox: echte innere Scroll-Fenster höher, Schrift unverändert === */
#fritzbox-herolzberg-details [style*="280px"],
#fritzbox-herolzberg-details [style*="300px"],
#fritzbox-herolzberg-details [class*="grid"] [class*="rounded"] {
  height: 135px !important;
  min-height: 135px !important;
  max-height: 135px !important;
  padding-top: 18px !important;
  padding-bottom: 18px !important;
  box-sizing: border-box !important;
}

/* Scrollbereich selbst nur hoch genug machen, Scroll links/rechts bleibt */
#fritzbox-herolzberg-details [class*="grid"] {
  min-height: 145px !important;
}

/* Kachel nicht breiter machen, Scrollbalken behalten */
#fritzbox-herolzberg-details {
  overflow-x: auto !important;
  overflow-y: hidden !important;
}

/* === FritzBox: Scrollbalken entfernen === */
#fritzbox-herolzberg-details {
  overflow-x: hidden !important;
  overflow-y: hidden !important;
}

#fritzbox-herolzberg-details [class*="grid"] {
  overflow-x: hidden !important;
  max-width: 100% !important;
}