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: #000;
            color: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            text-align:left;
           
        }
        .center-container {
            background: #000;
            color: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            text-align:center;
           
        }

        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;
  
}
.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 */
}
table.starfall{background-color:#fff; color:#000; border:1px solid #000; margin-bottom:2em;}
table.starfall th {color:#9d7070; border:1px solid #9d7070; padding:4px;}
table.starfall td {color:#9d7070; border:1px dotted #9d7070; text-align:center;}
tr.jweek1 td, tr.jweek2 td, tr.jweek3 td, tr.jweek47 td, tr.jweek48 td {color:#9d7070; border:1px dotted #9d7070; text-align:center; background-color:#d4ddff;}
tr.jweek4 td, tr.jweek5 td, tr.jweek6 td, tr.jweek7 td, tr.jweek8 td, tr.jweek9 td, tr.jweek10 td, tr.jweek11 td, tr.jweek12 td, tr.jweek13 td {color:#9d7070; border:1px dotted #9d7070; text-align:center; background-color:#c9fcd6;}
tr.jweek14 td, tr.jweek15 td, tr.jweek16 td, tr.jweek17 td, tr.jweek18 td, tr.jweek19 td, tr.jweek20 td, tr.jweek21 td, tr.jweek22 td, tr.jweek23 td, tr.jweek24 td, tr.jweek25 td, tr.jweek26 td, tr.jweek27 td, tr.jweek28 td, tr.jweek29 td, tr.jweek30 td, tr.jweek31 td, tr.jweek32 td, tr.jweek33 td, tr.jweek34 td, tr.jweek35 td, tr.jweek36 td {color:#9d7070; border:1px dotted #9d7070; text-align:center; background-color:#fcfbc9;}
tr.jweek37 td, tr.jweek38 td, tr.jweek39 td, tr.jweek40 td, tr.jweek41 td, tr.jweek42 td, tr.jweek43 td, tr.jweek44 td, tr.jweek45 td, tr.jweek46 td {color:#f6f5a7; border:1px dotted #9d7070; text-align:center; background-color:#d09117;}
tr.jweek3 td.wd4,tr.jweek3 td.wd5,tr.jweek3 td.wd6,tr.jweek3 td.wd7 {color:#9d7070; border:1px dotted #9d7070; text-align:center; background-color:#e1fbff;}
tr.jweek13 td.wd4,tr.jweek13 td.wd5, tr.jweek13 td.wd6, tr.jweek13 td.wd7{color:#9d7070; border:1px dotted #9d7070; text-align:center; background-color:#e4ff48;}
tr.jweek36 td.wd4,tr.jweek36 td.wd5, tr.jweek36 td.wd6, tr.jweek36 td.wd7 {color:#9d7070; border:1px dotted #9d7070; text-align:center; background-color:#ffe42a;}
tr.jweek46 td.wd4,tr.jweek46 td.wd5 {color:#9d7070; border:1px dotted #9d7070; text-align:center; background-color:#2affda;}
tr.jweek46 td.wd6,tr.jweek46 td.wd7 {color:#9d7070; border:1px dotted #9d7070; text-align:center; background-color:#d4ddff;}
h2.wurmYear {color:#000; background-color:#c7a381;border:1px solid #000;}
table.starfall .highlight {border: 3px solid #9d7070; font-size:14pt;}
table.starfall .highlight td.highlight {border: 3px solid #000; background:#fff; color:#000;  font-weight:bold;}