.fass-container {
  position: relative;
  width: 100%;
  max-width: 900px;
  height: 600px;
  margin: 0 auto;
  background-size: cover;
  background-position: center;
  box-sizing: border-box;
  overflow: visible;
  border: 1px solid #d6c7ad;
}
/* Fasskarten */
.fass {
  position: absolute;
  width: 300px;          /* kleiner, damit nichts kollidiert */
  height: 180px;
  padding: 0;            /* Text wird separat gestylt */
  text-align: center;
  font-family: sans-serif;

  background-image: url('../pic/Fass.jpg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;

  display: flex;         /* Text mittig im Fass */
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* Textblock im Fass */
.fass h3,
.fass p {
  background-color: rgba(255,255,255,0.95); /* Lesbarkeit */
  padding: 4px 8px;
  border-radius: 6px;
  margin: 2px 0;
  //color:red;
}

.badge,
.badge2 {
  position: relative;
  border-radius: 50%;
  background-color: yellow;
  width: 30px;
  left: -80px;
}
.badge2 {
  left: 60px;
  top: -23px;
}
/* Tooltip */
.badge:hover::after,
.badge2:hover::after {
  content: attr(data-title);
  position: absolute;
  top: 50%;
  left: 110%; /* rechts daneben */
  transform: translateY(-50%);
  background: #222;
  color: #fff;
  padding: 4px 8px;
  border-radius: 6px;
  white-space: nowrap;
  font-size: 0.8em;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  z-index: 20;
}
/* Neue Uhrpositionen – angepasst an dein 300×225 Fassbild */
.t12 { top: 20px; left: 50%; transform: translateX(-50%); }
.t10 { top: 140px; left: 40px; }
.t2  { top: 140px; right: 40px; }
.t4  { bottom: 100px; right: 40px; }
.t6  { bottom: 20px; left: 50%; transform: translateX(-50%); }
.t8  { bottom: 100px; left: 40px; }

a:hover {
  background-color: white;
}

/* Gruppenbeschriftungen innerhalb der Fass-Uhr */
.fass-gruppe {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);

    width: 250px;
    max-width: 28%;
    text-align: center;

    font-family: Georgia, serif;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
    color: #2C3E50;

    background: rgba(255, 255, 255, 0.92);
    padding: 5px;
    border-radius: 6px;

    z-index: 5;
    pointer-events: none;
}

/* Überschrift der oberen Gruppe */
.gruppe-oben {
    top: 215px;
}

/* Überschrift der unteren Gruppe */
.gruppe-unten {
    top: 330px;
}

/* Dezente Trennlinie zwischen den Gruppen */
.fass-trenner {
    position: absolute;
    top: 315px;
    left: 50%;
    transform: translateX(-50%);

    width: 800px;
    border-top: 1px solid #d6c7ad;

    z-index: 4;
    pointer-events: none;
}


/* Mobile und kleinere Tablets */

@media (max-width: 768px) {

    .fass-container {
        background: none;
        width: 100%;
        max-width: 100%;
        height: auto;
        padding: 20px 12px;
        box-sizing: border-box;
        background: none;
    }

    /* Fasskarten untereinander */
    .fass {
        position: static;;
        top: auto;
        right: auto;
        bottom: auto;
        left: auto;
        transform: none;

        width: 100%;
        max-width: 300px;
        height: 180px;
        margin: 0 auto 12px;
        box-sizing: border-box;
    }

    /* Gruppenüberschriften zurück in den Dokumentfluss */
    .fass-gruppe {
        position: static;
        transform: none;

        width: 100%;
        max-width: 100%;
        box-sizing: border-box;

        font-size: 1rem;
        line-height: 1.4;
        margin: 22px auto 12px;
        padding: 0 8px;
    }

    /* Erste Gruppenüberschrift etwas näher an die erste Karte */
    .gruppe-oben {
        margin-top: 0;
    }

    .gruppe-unten {
        margin-top: 22px;
    }

    .fass-trenner {
        position: static;
        transform: none;
        width: 75%;
        margin: 18px auto;
        border-top: 1px solid #d6c7ad;
    }
}