<!--
:root {
  --buttonschriftfarbe: #ffdddd;
  --buttonhoverfarbe: #220000;

  --leistendicke1: 2%;
  --leistenpositionshoehe: 38.2%;
  --themenbildhoehe: var(--leistenpositionshoehe);

  --inhaltspositionshoehe: calc(var(--leistenpositionshoehe) + 12%);

  --buttonSchriftgroesse: 12px;
  --buttonbreite: 7%;
  --buttonabstand: 1.0002; /* ist ein Faktor*/
  --buttonhoehe: 100%;
}

/* Variablen für Computergröße */
@media (min-width: 768px) {
  :root {
    --inhaltspositionshoehe: calc(var(--leistenpositionshoehe) + 4%);
    
    --buttonSchriftgroesse: 16px;
    --buttonbreite: 9.9%;
    --buttonabstand: 1.0001;
    --buttonhoehe: 161.8%;
  }
}

a {
  text-decoration: none;
  text-underline: none;
}

#testpoly {
  z-index: 10;
  position: absolute;
  top: 1%; left: 80%;
  width: 100px; 
  height: 40px;
  display: none;  /* Flexbox aktivieren */
  justify-content: center; /* Horizontal zentrieren */
  align-items: center; /* Vertikal zentrieren */
  box-shadow: 1px 1px 6px grey;
  clip-path: polygon(0% 100%, 0% 61.8%, 2% 50%, 4% 30%, 8% 20%, 16% 10%, 32% 0%, 68% 0%, 84% 10%, 92% 20%, 96% 30%, 98% 50%, 100% 61.8%, 100% 100%);
  color: #ffffff;
  background-color:#123000;
  transition: background-color 1s ease;
}

#testpoly:hover {
  color: #000000;
  background-color:#44ff99;
  display: flex;
}

#thema {
  position:absolute;
  top:0%;
  left:50%;
  width:100%;
  height:var(--themenbildhoehe);
  margin-left: -50%;
  z-index:0;
  background-image:url('/fileadmin/alteHP/img/thema.jpg');
  background-size: cover; /* Bild behält das Verhältnis und deckt den gesamten Bereich ab */
  background-position: 100% 55%; /* Bild zentrieren */
  background-repeat: no-repeat; /* Verhindert das Wiederholen des Bildes */
}

#seitentitel {
  position:absolute;
  top:1%;
  left:50%;
  width:100%;
  height:2%;
  margin-left: -45%;
  font-size: 2.5vw;
  color: #330000;
  z-index:1;
}

@media (min-width: 768px) {
  #seitentitel {
    position:absolute;
    top:1%;
    left:50%;
    width:100%;
    height:2%;
    margin-left: -40%;
    font-size: 1vw;
    z-index:1;
  }
}

#inhaltsanzeige {
  position:absolute;
  top:var(--inhaltspositionshoehe);
  left:50%;
  width:90%;
  height:100%;
  margin-left: -45%;
  z-index:0;
  border:4px
}

@media (min-width: 768px) {
  #inhaltsanzeige {
    position:absolute;
    top:var(--inhaltspositionshoehe);
    left:50%;
    width:61.8%;
    height:100%;
    margin-left: -40%;
    z-index:0;
    border:4px
  }
}

#inhaltsanzeigetext {
  position:absolute;
  top:0%; left:1%;
  width:98%;
  height:100%;
  font-size:18px;
  text-align: justify; /* Aktiviert den Blocksatz */
  hyphens: auto; /* Aktiviert die Silbentrennung */
  z-index:0;
  border:4px
}

#leiste {
  position:absolute;
  top:var(--leistenpositionshoehe);
  left:50%;
  width:100%;
  aspect-ratio: 7 / 1; /* Beibehaltung des Verhältnisses 16:9 */
  margin-left:-50%;
  font-size: 0.7;
  z-index:1;
  box-shadow: 1px 1px 20px #330000;
  background-color:#330000;
}

@media (min-width: 768px) {
  #leiste {
    position:absolute;
    top:var(--leistenpositionshoehe);
    left:50%;
    width:100%;
    aspect-ratio: 50 / 1; /* Beibehaltung des Verhältnisses */
    margin-left:-50%;
    font-size: 1.2;
    z-index:1;
    box-shadow: 1px 1px 20px #330000;
    background-color:#330000;
  }
}

.dmenu {
  position: absolute;
  top:calc(var(--leistenpositionshoehe) + 2%);
  left:50%;
  width:20%;
  height:161.8%;
  margin-left:calc(-40% * var(--buttonabstand));
  background-color: #000000;
  visibility: hidden; /* Menü standardmäßig unsichtbar */
  opacity: 0; /* Initiale Opazität */
  transition: visibility 0s, opacity 0.5s ease; /* Übergangseffekte */
  z-index:0;
}

.buttext1:hover {
  .dmenu {
    display: flex; /* Flexbox aktivieren */
    visibility: visible; /* Menü sichtbar beim Hover */
    opacity: 1; /* Opazität ändern */
    flex-direction: column; /* Optional: Vertikale Anordnung */
  }
}

.buttext1 {
  position: absolute;
  top:0%;
  left:50%;
  width:var(--buttonbreite);
  height:var(--buttonhoehe);
  margin-left:calc(-40% * var(--buttonabstand));
  hyphens: auto; /* Aktiviert die Silbentrennung */
  overflow-wrap: break-word; /* Ermöglicht den Zeilenumbruch */
  word-wrap: break-word; /* Alte Syntax für den Zeilenumbruch – für bessere Unterstützung */
  display: flex; /* Flexbox aktivieren */
  justify-content: center; /* Horizontal zentrieren */
  align-items: center; /* Vertikal zentrieren */
  transition: opacity 1s;
  transition: background-color 1s ease;
  font-size:var(--buttonSchriftgroesse);
  color:var(--buttonschriftfarbe);
  z-index:1;
}

.buttext1:hover {
  background-color:var(--buttonhoverfarbe);
  box-shadow: 1px 1px 20px grey;
}

#buttext2 {
  position:absolute;
  top:0%;
  left:50%;
  width:var(--buttonbreite);
  height:var(--buttonhoehe);
  margin-left:calc(-30% * var(--buttonabstand));
  hyphens: auto; /* Aktiviert die Silbentrennung */
  overflow-wrap: break-word; /* Ermöglicht den Zeilenumbruch */
  word-wrap: break-word; /* Alte Syntax für den Zeilenumbruch – für bessere Unterstützung */
  display: flex;  /* Flexbox aktivieren */
  justify-content: center; /* Horizontal zentrieren */
  align-items: center; /* Vertikal zentrieren */
  z-index:1;
  transition: background-color 1s ease;
  font-size:var(--buttonSchriftgroesse);
  color:var(--buttonschriftfarbe);
}

#buttext2:hover {
  background-color:var(--buttonhoverfarbe);
  box-shadow: 1px 1px 20px grey;
}

#buttext3 {
  position:absolute;
  top:0%;
  left:50%;
  width:var(--buttonbreite);
  height:var(--buttonhoehe);
  margin-left:calc(-20% * var(--buttonabstand));
  hyphens: auto; /* Aktiviert die Silbentrennung */
  overflow-wrap: break-word; /* Ermöglicht den Zeilenumbruch */
  word-wrap: break-word; /* Alte Syntax für den Zeilenumbruch – für bessere Unterstützung */
  display: flex;  /* Flexbox aktivieren */
  justify-content: center; /* Horizontal zentrieren */
  align-items: center; /* Vertikal zentrieren */
  transition: background-color 1s ease;
  font-size:var(--buttonSchriftgroesse);
  color:var(--buttonschriftfarbe);
  z-index:1;
}

#buttext3:hover {
  background-color:var(--buttonhoverfarbe);
  box-shadow: 1px 1px 20px grey;
}

#buttext4 {
  position:absolute;
  top:0%;
  left:50%;
  width:var(--buttonbreite);
  height:var(--buttonhoehe);
  margin-left:calc(-10% * var(--buttonabstand));
  hyphens: auto; /* Aktiviert die Silbentrennung */
  overflow-wrap: break-word; /* Ermöglicht den Zeilenumbruch */
  word-wrap: break-word; /* Alte Syntax für den Zeilenumbruch – für bessere Unterstützung */
  display: flex;  /* Flexbox aktivieren */
  justify-content: center; /* Horizontal zentrieren */
  align-items: center; /* Vertikal zentrieren */
  transition: background-color 1s ease;
  font-size:var(--buttonSchriftgroesse);
  color:var(--buttonschriftfarbe);
  z-index:1;
}

#buttext4:hover {
  background-color:var(--buttonhoverfarbe);
  box-shadow: 1px 1px 20px grey;
}

#buttext5 {
  position:absolute;
  top:0%;
  left:50%;
  width:var(--buttonbreite);
  height:var(--buttonhoehe);
  margin-left:calc(0% * var(--buttonabstand));
  hyphens: auto; /* Aktiviert die Silbentrennung */
  overflow-wrap: break-word; /* Ermöglicht den Zeilenumbruch */
  word-wrap: break-word; /* Alte Syntax für den Zeilenumbruch – für bessere Unterstützung */
  display: flex;  /* Flexbox aktivieren */
  justify-content: center; /* Horizontal zentrieren */
  align-items: center; /* Vertikal zentrieren */
  transition: background-color 1s ease;
  font-size:var(--buttonSchriftgroesse);
  color:var(--buttonschriftfarbe);
  z-index:1; 
}

#buttext5:hover {
  background-color:var(--buttonhoverfarbe);
  box-shadow: 1px 1px 20px grey;
}

#suche {
  position:absolute;
  top:12%;
  left:50%;
  width:var(--buttonbreite);
  height:var(--buttonhoehe);
  align-items: center; /* Vertikal zentrieren */
  margin-left:calc(12% * var(--buttonabstand));
  z-index:2;
}

#emenu {
  position:absolute;
  top:40px;
  left:575px;
  width:120px;
  height:80px;
  z-index:1;
  display: none;
  box-shadow: 1px 1px 6px grey;
  background-color: #9087ff;
}

#buttext2:hover #emenu {
  display: block; /* Flexbox aktivieren */
}

#fmenu {
  position:absolute;
  top: 40px;
  left: 700px;
  width: 120px;
  height: 80px;
  z-index: 2;
  display: none;
  box-shadow: 1px 1px 6px grey;
  background-color: #f0033f;
}
#buttext3:hover {} + #fmenu {
  display: block; /* Flexbox aktivieren */
}

-->