body {
            font-family: Arial, sans-serif;
            background-color: #4b1e08;

            color: #333;
        }
        nav.navbar {
            background-color: #4b1e08;
        }
        h1 {
            font-size: 2em;
            margin-bottom: 0.5em;
        }
        p {
            font-size: 1.2em;
            margin: 0.2em 0;
        }
        li.harvestItem {
            text-align:left;
            list-style-type: none;
            
            margin-right:7px;
            
        }
        li.server-item-modal {
            text-align:center;
            list-style-type: none;
            cursor:zoom-in;
            margin-bottom:7px;
            
        }
        li.server-item {
            text-align:center;
            list-style-type: none;
            margin-bottom:7px;
        }
        li.itemServerStats {
            display:inline-block;
            margin-right:7px;
            text-align:left;
            list-style-type: none;
        }
        .container {
            background-color: #000;
            color: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

        }
        div.container .mainIndex2 {
            background-color: #5C4033;
            color: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

        }

        span.serverstatus-1 {
            color:#00ff00;
            font-weight:bolder;
        }
        span.serverstatus-2 {
            color:#ffd600;
            font-weight:bolder;
        }
        big.WDdate {
            font-size: 4.5em;
            
            padding:12pt;
            width:80%;
        }
        span.serverstatus-0,span.serverstatus {
            color:#ff2600;
            font-weight:bolder;
        }
        .modal-step { display: none; }
        .modal-step.active { display: block; }
        h3.clusterName {
            font: 1.5rem/2 var(--bs-font-sans-serif);
            color: var(--bs-light);
            background-color:#4b1e08;
            border: 1px solid #000;
            text-align:center;
            border-radius:0.375rem;
        }
        div.mainIndex {
            background-color:#593b2b;
        }
/* Das Element, über das du fährst */
.tooltip {
  cursor: pointer;
  
}
.badge .mission-expired {
 color: var(--bs-gray);
}
.badge .deed-disbanded-byEnvironment {
 color: var(--bs-primary-bg-subtle);
}

.tooltip #text {
color:#000;
}

/* Der eigentliche Tooltip-Text */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 180px;
  background-color: #5C4033; /* Dunkelbraun */
  color: #FFD700; /* Gelb */
  text-align: center;
  border-radius: 10px;
  padding: 8px;
  position: absolute;
  z-index: 10;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%) scale(0.8);
  opacity: 0;
  transition: all 0.3s ease;
  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2);
  font-size: 14px;
}

/* Animation beim Hovern */
.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
  transform: translateX(-50%) scale(1);
}

/* kleiner Pfeil unten */
.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -7px;
  border-width: 7px;
  border-style: solid;
  border-color: #5C4033 transparent transparent transparent; /* Pfeil auch dunkelbraun */
}

/* Einheitliche, dezente Wurmfarben auch für archivierte Seitenlayouts */
:root {
  --wobot-page-bg: #f3eee5;
  --wobot-surface: #fffdf8;
  --wobot-surface-muted: #e9dfd0;
  --wobot-border: #d6c6b1;
  --wobot-text: #40362c;
  --wobot-accent: #80634b;
  --wobot-accent-soft: #eee2d2;
}

body {
  color: var(--wobot-text);
  background: #f3eee5;
}

nav.navbar {
  background-color: #e9dfd0;
  border-bottom: 1px solid #d6c6b1;
}

nav.navbar .navbar-brand,
nav.navbar .nav-link,
nav.navbar .navbar-text {
  color: #514333;
}

nav.navbar.navbar-dark .navbar-brand,
nav.navbar.navbar-dark .navbar-nav .nav-link,
nav.navbar.navbar-dark .navbar-text {
  color: #f1e8d9;
}

nav.navbar.navbar-dark .navbar-nav .nav-link:hover,
nav.navbar.navbar-dark .navbar-nav .nav-link:focus,
nav.navbar.navbar-dark .navbar-nav .nav-link.show,
nav.navbar.navbar-dark .navbar-brand:hover {
  color: #d9bd98;
}

.container,
div.container .mainIndex2,
div.mainIndex {
  color: #40362c;
  background-color: #fffdf8;
}

h3.clusterName {
  color: #604832;
  background-color: #eee2d2;
  border-color: #d6c2a8;
}

.tooltip .tooltiptext {
  color: #4d3d2d;
  background-color: #f4eadc;
}

.tooltip .tooltiptext::after {
  border-top-color: #d6c2a8;
}
table.starfall{background-color:#fff; color:000; border:1px solid #000;}