html {
    font-size: 16px;
    padding: 0px;
    /* Hintergrundfarbe */
    background-color: #821300;
    }

body {
    padding: 0px 0px 400px 0px;
    margin: 0px;
    font-family: Arial, sans-serif;
    background-image: url(grafiken/bg-rot-01.png);
    background-size: cover;
    background-repeat: no-repeat;
}

#Titel {
    padding: 20px 0px;
    margin: 0px 0px 0px 0px;
    font-family: Arial, sans-serif;
    background-color: #821300;
}

.Titeltext {
    font-size: calc(0.6rem + 1.0vw);
    color: #d0ad83;
    text-align: center;
    width: 100%;
}

#Fuss {
    padding: 20px 10px;
    margin: 20px 0px 20px 0px;
    font-family: Arial, sans-serif;

}


.Fusstext {
    font-size: calc(0.3rem + 1.0vw);
    color: #d0ad83;
    padding: 0px;
    margin: 0px 0px;
    text-align: center;
    width: 100%;
}


@media (max-width:801px){

.Titeltext, .Fusstext {
  font-size: 18px;
  }

}

#Alles {
    padding: 0px 0px;
    margin: 20px 0px 10px 0px;
    font-size: 16px;
    color: #EFEFEF;
    text-align: center;
    width: 100%;
    /* TESTEN */
    border: 0px solid #FFFFFF;
}

#Advent1 {
  z-index: 1;
  position: relative;
  top: 0px;
  left: 0;
  margin: auto;
  padding: 0;
  width: 100%;
  /* max-width: kann man anpassen 60%; 800px; ... */
  max-width: 1000px;
  height: auto;
}


#AdventGrafik {
  z-index: 2;
  position: relative;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  width: 100%;
  height: auto;
  background-color: transparent;
}


#AdventGrafik img {
  margin: 0;
  padding: 0;
  width: 100%;
  height: auto;
  border-radius: 0px;
}

#Advent2 {
  z-index: 3;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  /* Rand 1 zum Testen */
  border: 0px solid #FF7F00;
}

#Advent2 table {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

#Advent2 td {
  width: 16.6666%;
  height: 25%;
  margin: 0;
  padding: 0;
  text-align: center;
  /* Rand 1 zum Testen */
  border: 0px solid #FFFFFF;
}

/*
#Advent2 img {
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  margin: 0;
  padding: 0;
  text-align: center;
  border: 0px solid #FFFFFF;
}
*/

#Advent2 a {
    text-decoration: none;
}

#Advent2 .tag {
    font-size: calc(0.5rem + 2.0vw);
    background-color: rgba(255, 255, 255, 0);
    transition: all 0.5s linear;
    padding: 15px;
    /* Ziffernfarbe */
    color: #55BBCC;
    /* Rand ? */
    border: 0px solid #FFFFFF;
    border-radius: 10%;
}

#Advent2 a:hover .tag {
    /* Ziffernfarbe MouseOver */
    color: #FFFFFF;
    border: 1px solid transparent;
    /* Hintergrundfarbe MouseOver */
    background-color: rgba(27, 95, 107, 0.5);
}


.button {
  background-color: #2C9CAF;
  border: none;
  color: #FFFFFF;
  padding: 6px 40px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 20px;
  border-radius: 10px;
}

.button {
  transition-duration: 0.6s;
}

.button:hover {
  background-color: #FFFFFF;
  color: #2C9CAF;
}



.xxbody {
  margin: 0;
  min-height: 100vh;
  display: grid;
  grid-template-columns: auto auto;
  place-content: center;
  gap: 30px;
  /* background: #C6E5D9; */
}


#Advent2 img {
  --s: calc(100% - 4px); /* Größe muss der eigentlichen Bildgröße für "center" und "random" entsprechen */
  width: var(--s);
  height: var(--s); /* besser als aspect-ratio, wenn das Bild ein Höhenattribut hat */
  box-sizing: border-box;
  cursor: pointer;
  transition: .5s;
  /* Rand 1 zum Testen */
  border: 0px solid #FFFFFF;
}

#Advent2 img.center {
  /* object-fit: none; Das ist der Zauber, kein üblicher Wert, aber er erlaubt es, die eigentliche Größe des ersetzten Inhalts beizubehalten */
  padding: calc(var(--s)/2);
  /* background: #88C425; */
  background-color: rgba(100, 10, 10, 0.5);
}

#Advent2 img.vertical {
  object-fit: cover; /* man kann hier auch "none" verwenden, es wird das gleiche Ergebnis liefern */
  padding-block: calc(var(--s)/2);
  /* background: #F07818; */
  background-color: rgba(100, 10, 10, 0.5);
}

#Advent2 img.horizontal {
  object-fit: cover;
  padding-inline: calc(var(--s)/2);
  /*background: #AB3E5B; */
  background-color: rgba(100, 10, 10, 0.5);
}

/*
Sie können jede beliebige Kombination von Polstern verwenden.
Achten Sie darauf, dass die Füllung den gesamten Bereich abdeckt.
Stellen Sie außerdem sicher, dass Sie object-position und object-fit korrekt einstellen, um die Illusion eines festen Bildes zu erzeugen.
*/

#Advent2 img.random {
  object-position: top left;
  object-fit: none;
  padding: 0 var(--s) var(--s) 0;
  background: #0E2430;
}

#Advent2 img:hover {
  padding: 0;
}