body
{
    
    background-color: var(--webpage-background-color-main);
    color: var(--webpage-text-color-page-button);
    font-family: var(--default-font);
    font-weight: var(--weight-black);
    text-align: center;


    margin: 0;
    padding: 0;
    overflow-x: hidden; /* Sicherheit: Verhindert horizontales Scrollen */

}



* 
{
    box-sizing: border-box;
}



.image-pride-flag
{

    width: 55%; 
    aspect-ratio: 16 / 8; 
    margin: 0%; 
    margin-bottom: 2%;

}



.padding-element-page
{
    margin: 2vh;
}



body {
  margin: 0;
  background-color: #050f0a; /* Sehr dunkles Loki-Grün */
  /* overflow: hidden; <-- HIER ENTFERNT, damit du scrollen kannst */
}

.runen-hintergrund {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1; 
  pointer-events: none; 
  overflow: hidden; /* <-- HIER HINZUGEFÜGT, damit Runen am Rand nicht stören */
}

/* Der Rest der .rune und @keyframes bleibt genau gleich */


.rune {
    position: absolute;
    color: #00ff88; /* Loki-Grün */
    font-family: monospace; /* Oder eine spezielle Runen-Schriftart */
    font-size: 24px;
    text-shadow: 0 0 8px #00ff88, 0 0 15px #00aa55; /* Magischer Leuchteffekt */
    opacity: 0;
    animation: erscheinenVerschwinden 6s ease-in-out forwards;
}

@keyframes erscheinenVerschwinden {
    0% {
      opacity: 0;
      transform: scale(0.8);
    }
    30% {
      opacity: 0.7; /* Maximale Sichtbarkeit */
      transform: scale(1);
    }
    70% {
      opacity: 0.7;
    }
    100% {
      opacity: 0;
      transform: scale(0.9);
    }
}




.slogan-loki
{
    font-size: var(--size-subtitle-2);
}



.description-loki
{
    font-size: var(--size-text-1);
}



@media (max-width: 660px)
{

    .slogan-loki
    {
        font-size: var(--size-subtitle-1);
    }


    .description-loki
    {
        font-size: var(--size-text-2);
    }


}