html {
    font-size: 16px;
    padding: 0px;
    }

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

}

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

.Titeltext {
    font-size: 24px;
    /* berechnete Groesse */
    /* font-size: calc(0.8rem + 1.5vw); */
    color: #000000;
    text-align: center;
    width: 100%;
}

#Fuss {
    padding: 20px 0px;
    margin: 0px 0px 10px 0px;
    text-align: center;
}


.Fusstext {
    font-size: 20px;
    /* berechnete Groesse */
    /* font-size: calc(0.3rem + 1.2vw); */
    background-color: #a4aeb2;
    font-family: Arial, sans-serif;
    color: #FFFFFF;
    padding: 20px 20px;
    margin: 0px 0px;
    text-align: center;
    display: inline-block;
    border-radius: 10px;
}


@media (max-width:801px){

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

}

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

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

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

#AdventGrafik img {
  margin: 0;
  padding: 0;
  width: 100%;
  height: auto;
}

#AdventText {
z-index: 3;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

padding: 10px 10px;
text-align: center;
margin: auto;
width: 70%;
color: #EFEFEF;
font-family: Arial, sans-serif;
border: 1px solid #FFFFFF;
}

@media (min-width:601px){
#AdventText {
font-size: 18px;
}
}

@media (min-width:801px){
#AdventText {
font-size: 20px;
}
}

@media (min-width:1001px){
#AdventText {
font-size: 26px;
}
}





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

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

#Advent2 img.horizontal {
  object-fit: cover;
  padding-inline: calc(var(--s)/2);
  /*background: #AB3E5B; */

}

#Advent2 img:hover {
  padding: 0px;
}




#Advent2 a {
  text-decoration: none;
}

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






.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; */
}