@import url("https://use.typekit.net/agg1mie.css");
/* fonts.css */
@font-face {
  font-family: 'Redig';
  src: url('fonts/Redig-Regular.eot');
  src: url('fonts/Redig-Regular.eot?#iefix') format('embedded-opentype'),
       url('fonts/Redig-Regular.woff2') format('woff2'),
       url('fonts/Redig-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Redig';
  src: url('fonts/Redig-Oblique.eot');
  src: url('fonts/Redig-Oblique.eot?#iefix') format('embedded-opentype'),
       url('fonts/Redig-Oblique.woff2') format('woff2'),
       url('fonts/Redig-Oblique.woff') format('woff');
  font-weight: normal;
  font-style: oblique;
}


.font-redig {
  font-family: 'Redig', sans-serif;
}
.font-din2014{
     font-family: "din-2014", sans-serif;
     font-weight: 400;
     font-style: normal;
}
.text-purple{
     color: #5A2D88;
}
media-theme-sutro{
    margin-inline: auto;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
}
.progress-bar {
            transition: width 1.5s ease-in-out;
}
.animate-gradient-text {
        /* Erstellt den Farbverlauf als Hintergrundbild */
        background-image: linear-gradient(
            45deg,
            #ab60f7,
            #e260f7,
            #f760c6
        );
        /* Macht den Hintergrund größer, damit er animiert werden kann */
        background-size: 200% auto;
        
        /* Maskiert den Hintergrund mit dem Text */
        -webkit-background-clip: text;
        background-clip: text;
        
        /* Macht die eigentliche Textfarbe transparent */
        -webkit-text-fill-color: transparent;

        /* Weist die Animation zu */
        animation: gradient-animation 5s ease infinite;
    }

    /* Definiert die Keyframe-Animation */
    @keyframes gradient-animation {
        0% {
            background-position: 0% 50%;
        }
        50% {
            background-position: 100% 50%;
        }
        100% {
            background-position: 0% 50%;
        }
    }


.gradient-border {
    position: relative;
    border: 1px solid white;
    border-radius: 0.75rem; /* rounded-lg */
    transition: all 0.3s ease;
}
.gradient-border:hover{
    animation: gradient-animation 5s linear infinite;
    box-shadow: 0 0 20px rgba(255,255,255,0.3); /* optional Glow */
}
/* Wenn ausgewählt: animierter Farbverlauf */
.gradient-border:has(input:checked) {
    border: 1px solid transparent; /* dickere Border für Animation */
    background: linear-gradient(#5a2d88, #2c1543) padding-box,
                linear-gradient(270deg, #c500ff, #ff00ff, #ffffff, #a366ff, #c500ff) border-box;
    background-clip: padding-box, border-box;
    background-size: 400% 400%;
    animation: gradient-animation 5s linear infinite;
    box-shadow: 0 0 20px rgba(255,255,255,0.3); /* optional Glow */
}

/* Keyframes für fließende Farben */
@keyframes gradient-animation {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}


#tilt-img {
  /* Drop Shadow auf die sichtbare PNG Form */
  filter: drop-shadow(0 15px 25px rgba(0, 0, 0, 0.5));
  transition: filter 0.2s ease;
}
#tilt-img:hover {
  /* Optional: beim Hover stärkerer Schatten */
  filter: drop-shadow(0 20px 35px rgba(0, 0, 0, 0.6));
}


@media (orientation: portrait) {
  
    body::before {
      content: "";
      position: fixed;
      inset: 0;
      z-index: 0;
      background-size: cover;
      background-position: top center;
      background-image: url('img/SGS-Bild-background_mobile-clean.webp');
    }
}

/* nur wenn das Gerät im Querformat ist (optional) */
@media (orientation: landscape) {
  
    body::before {
      content: "";
      position: fixed;
      inset: 0;
      z-index: 0;
      background-size: cover;
      background-position: top center;
      background-image: url('img/SGS-Bild-background_desktop.webp');
    }
}