/* Globales Reset und Basis-Styling */
html {
  width: 100%;
  overflow-x: hidden;
  padding: 0;
  margin: 0;
  font-size: 16px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {

  text-align: center;
  margin: 0;
  background-color: #000000;
  font-family: "MeineSchriftart", Arial, sans-serif;
}


@font-face {
  font-family: "MeineSchriftart";
  src: url("../fonts/Sanford0103demo.woff") format("woff2");
  font-weight: bolder;
  font-style: normal;
  font-size: 18px;
}












/* Lazy Loading: Platzhalter für Bilder während des Ladevorgangs */
img {
  display: block;
  max-width: 100%;
  height: auto;
  object-fit: cover;
}

img[loading="lazy"] {
  filter: blur(10px);
  transition: filter 0.3s;
}

img:not([loading="lazy"]):not([src]) {
  visibility: hidden;
}

/* Grid-Layouts für Galerien */
.gallery-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 20px;
  padding: 20px;
}

.gallery-item {
  text-align: center;
  max-width: 300px;
  margin: auto;
}

.gallery-item img {
  border-radius: 15px;
  box-shadow: 0 0 10px rgb(255, 255, 255);
}

/* Lazy Loaded Platzhalter */
.gallery-item img[loading="lazy"] {
  background-color: #6b6b6b;
  filter: blur(8px);
}

/* Responsive Anpassungen */
@media (max-width: 768px) {
  h1 {
    font-size: 1.75rem;
  }

  .gallery-row {
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 10px;
  }
}

@media (max-width: 480px) {
  h1 {
    font-size: 1.5rem;
  }
}


  h3 {
    font-size: 3vw; /* Die Schriftgröße wird prozentual zur Breite des Viewports angepasst */
    font-weight: bold;
    color: #ffffff;
    transition: color 0.5s ease-in-out;

    
}

/* Media Queries zur Feinanpassung bei bestimmten Bildschirmgrößen */
@media (max-width: 800px) {
    .tab-container h3 {
        font-size: 5vw; /* Vergrößert die Schrift leicht für kleinere Geräte */
        
    }
}

@media (max-width: 600px) {
    .tab-container h3 {
        font-size: 6vw; /* Bei kleineren Geräten noch größere Schrift */
    }
}

@media (max-width: 400px) {
    .tab-container h3 {
        font-size: 7vw; /* Noch größere Schrift für sehr kleine Bildschirmgrößen */

    }
}

@media (max-width: 350px) {
    .tab-container h3 {
        font-size: 8vw; /* Bei extrem kleinen Bildschirmen am größten */
    }
}




  h4 {
    font-size: 40px;
    font-weight: bold;
    color: #ffffff;
    padding: 0 15px 25px 15px;
  }

  h5 {
    font-size: 23px;
    padding: 0 20px 0 20px;
  }
  @media (max-width: 800px) {
    h4 {
      font-size: 30px;
    }

    h5 {
      font-size: 18px;
    }
}








  h6 {
    color: #ffffff;
    font-size: 20px;

  }

  em {
    color: #ff00bb;
    font-size: 85px;
    padding-left: 145px;
  } 
  



  
  header {
    position: relative;
    margin-bottom: -30px;
    
    background: none;
    background-position: center;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}




  


  header h1 {
    
    font-weight: bold;
    padding: 10px 20px;
    border-radius: 5px;
  }
  
  #menu-bar {
    position: sticky;
    top: 0;
    background-color: #ff85f1;
    border-top: 2px solid #ffffff;
    box-shadow: 0 10px 10px 3px #ff85f1;
    z-index: 1000;
    height: fit-content;
  }
  
  .tab-container {
    display: flex;
    justify-content: space-evenly;
    padding: 5px 15px 5px 15px;
    
  }




  
  .tab-button {
    padding: 2px 8px;
    cursor: pointer;
    background: none;
    border: none;
    outline: none;
    transition: background-color 0.5s ease-in-out, border-radius 0.5s ease-in-out, color 0.5s ease-in-out;
    border-radius: 5px;
    height: fit-content;
    font-family: fantasy;
    font-weight: bolder;
    font-variant: small-caps;
  }

  @media (max-width: 800px) {
    .tab-button h3 {
      font-size: 21px;
    }

  }

  @media (max-width: 500px) {
    .tab-button h3 {
      font-size: 20px;
    }
  }

  @media (max-width: 400px) {
    .tab-button h3 {
      font-size: 18px;
    }
    .tab-button h3 {
      padding: 7px 5px;
    }
  }

  @media (max-width: 320px) {
    .tab-button h3 {
      font-size: 16px;
    }
    .tab-button h3 {
      padding: 7px 5px;
    }
  }

  @media (min-width: 801px) {
    .tab-button h3 {
      font-size: 21px;
    }
    .tab-button h3 {
      padding: 7px 5px;
    }
  }

  .tab-button.active {
    background-color: #560084;
  }

  .tab-button:hover {
    background-color: #27003d; /* Hintergrundfarbe beim Hover */
    color: #e9e9e9; /* Textfarbe beim Hover */
    border-radius: 5px;
    

  }

  .tab-button:hover * {
    color: rgb(255, 255, 255); /* Änderungen für Kinder-Elemente sicherstellen */
    transition: color 0.5s ease-in-out;
  }


  
  main {
    padding-top: 30px;
    background-color: #000000;
    height: fit-content;
    
  }
  
  .content-container {
    padding-top: 30px;
    padding-bottom: 50px;
    background-image: url('../img/ban_4.png');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat; /* Verhindert Wiederholung des Bildes */
    background-attachment: fixed; /* Fixiert das Hintergrundbild */
    min-height: 100vh; /* Das Bild bleibt mindestens so groß wie der Viewport */
    width: 100vw; /* Füllt immer die gesamte Breite des Bildschirms */
    box-sizing: border-box; /* Padding und Border in die Gesamtgröße einberechnen */
    overflow: hidden; /* Verhindert, dass der Container ausbricht */
}


  .sub-container h4 {
    color: #ffffff;    
  }
  
/* Tab-Container: Standard-Einstellung */
.sub-container {
  visibility: hidden; /* Verhindert Interaktionen, solange der Container unsichtbar ist */
  opacity: 0; /* Vollständig unsichtbar */
  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out; /* Übergang für Sichtbarkeit und Transparenz */
  position: absolute; /* Optional: verhindert Layout-Sprünge */
  width: 100%; /* Passt die Breite des Containers an */
}

/* Aktiver Container: Einblenden */
.sub-container.active {
  visibility: visible; /* Erlaubt Interaktionen */
  opacity: 1; /* Vollständig sichtbar */
  position: relative; /* Wieder in den Fluss einfügen */
}

/* Fade-Out für alte Tabs */
.sub-container.fade-out {
  visibility: hidden; /* Nach dem Ausblenden keine Interaktion */
  opacity: 0; /* Transparent */
  transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out; /* Sichtbar bleibt synchron */
}








  

#topbutton {
  position: fixed;
  bottom: 3vh;
  right: 2vw;
  opacity: 0;
  transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
  z-index: 99;
  background: #620097;
  border: solid 0.2em #620097;
  border-radius: 50%;
  cursor: pointer;
  font-size: 2vw;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3em; /* feste Breite */
  height: 3em; /* feste Höhe */
  text-shadow: 0 0 11px #ffffff;
  box-shadow: 0 0 11px #ffffff;
}

/* Hover-Effekt */
#topbutton:hover {
  background-color: blueviolet;
 color: #f786ff;
}

#topbutton:not(:hover) {
  color: #ffffff;
}


@media (max-width: 440px) {
  #topbutton {font-size: 3vw;}
}

@media (min-width: 441px) {
  #topbutton {font-size: 3vw;}
}

@media (min-width: 700px) {
  #topbutton {font-size: 1.2vw;}
}

@media (min-width: 1400px) {
  #topbutton {font-size: 2vw;}
}

@media (min-width: 1700px) {
  #topbutton {font-size: 3vw;}
}





  /* ----------------------------------------------------------------------------------------------------------------------------
  -------------------------------------------------------------------------------------------------------------------------------
  -------------------------------------------------------------------------------------------------------------------------------
  -------------------------------------------------------------------------------------------------------------------------------
  -------------------------------------------------------------------------------------------------------------------------------

  ------------------------------------------------------------HOME---------------------------------------------------------------
  ------------------------------------------------------------HOME---------------------------------------------------------------
  ------------------------------------------------------------HOME---------------------------------------------------------------
  
  -------------------------------------------------------------------------------------------------------------------------------
  -------------------------------------------------------------------------------------------------------------------------------
  -------------------------------------------------------------------------------------------------------------------------------
  -------------------------------------------------------------------------------------------------------------------------------
  -------------------------------------------------------------------------------------------------------------------------------
  -------------------------------------------------------------------------------------------------------------------------------
   */

  #home-container h4 {
    font-variant: small-caps;
    color: #ffffff;
    padding-top: 27vh;
    text-shadow: 0 0 5px #560084, 0 0 12px #560084, 0 0 18px #560084 ;
    font-size: 50px;
    line-height: 80%;
    padding-right: 180px;
  }

  #home-container h5 {
    font-variant: small-caps;
    color: #ffffff;
    padding-top: 5vh;
    text-shadow: 0 0 5px #560084, 0 0 12px #560084, 0 0 18px #560084 ;
    font-size: 30px;
    line-height: 70%;
  }









  #about-text {
    font-size: 18px;
    color: #560084;

  }

  @media (max-width: 700px) {
    #about-text {
      font-size: 14px;  
    }
  }

  .about-description {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 30px;
    background-color: #ff85f1;
    border-radius: 10px;
    box-shadow: 0 0 10px rgb(255, 255, 255);
    margin: 50vh auto;
    max-width: 80vw;
  }
  
  .about-description p {
    font-size: 18px;
    color: #560084;
    line-height: 1.6;
    text-align: justify;
    max-width: 600px;
  }
  
  .about-description #more-text {
    display: none; /* Der Rest des Textes ist versteckt */
  }
  

  
  .about-description {
    position: relative;
    overflow: visible; /* Der Text unterhalb bleibt sichtbar */
  }
  
  .image-wrapper {
    position: relative;
    overflow: hidden; /* Verhindert, dass das Bild über den Rahmen hinausragt */
    width: 100%; /* Passt die Breite des Wrappers an den Container an */
    max-width: 400px;
    height: 300px;
    box-shadow: 0 0 10px rgb(255, 255, 255);
    border-radius: 10px;

  }
  
  .image-wrapper img {
    display: block; /* Entfernt mögliche Lücken um das Bild */
    transition: transform 0.8s ease-in-out; /* Smooth-Effect */
    width: 100%; /* Bild füllt den Wrapper */
    height: auto; /* Bewahrt Seitenverhältnis */
    border-radius: 10px;
  }
  
  .image-wrapper img:hover {
    transform: scale(1.1); /* Nur das Bild wird gezoomt */
  }
  
  
  
  #read-more-btn {
    background-color: #ffffff;
    color: #620097;
    padding: 10px 20px;
    border: solid 1px rgb(0, 0, 0);
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
  }
  
  #read-more-btn:hover {
    background-color: #9d00ae;
    color: #ffffff;

  }
  







 








  .box-out {
    display: grid;
    grid-template-columns: auto auto;
    grid-gap: 30px;
    padding: 10px;
    justify-content: space-between;
    margin: 50vh auto;
  }

  .box-out h6 {
    font-size: 35px;
    padding: 0;
    text-shadow: 0 0 5px #560084, 0 0 12px #560084, 0 0 18px #560084 ;

  }
  


  .inner {
    justify-content: space-between;
    background-color: #ff85f1;
    width: fit-content;
    min-height: fit-content;
    border-radius: 20px;
    box-shadow: 0 0 10px rgb(255, 255, 255);
    margin: 0 5vw;
    padding: 20px;
  }
  #inner_topic {
    padding: 20px;
  }
  .inner p {
    color: #620097;
  padding: 20px;
  }


@media (max-width: 600px) {
    .box-out {
        grid-template-columns: 1fr; /* Eine Spalte für kleinere Bildschirme */
    }
    .box-out h6 {
        font-size: 18px;
    }
    .box-out p {
        font-size: 14px;
    }
    .inner {
      margin-left: 35px;
      margin-right: 35px;
    }
}

@media (max-width: 800px) {
    .box-out h6 {
        font-size: 25px;
    }   
    .box-out p {
        font-size: 18px;
    }
}


  

  
    
  .skill-container {
    margin: 50vh auto;

  }
  #color-5 h5{
    color: #560084;
    text-shadow: none;
    align-items: center;
    justify-content: center;
    margin-bottom: 30px;
    background-color: rgb(255, 255, 255); /* Dunkler transparenter Hintergrund */
    padding: 10px; /* Abstand zwischen Text und Hintergrund */
    border-radius: 5px; /* Abgerundete Ecken */
    display: inline-block; /* Passt die Größe des Hintergrunds an den Text an */
    box-shadow: 0 0 10px rgb(255, 255, 255);
    font-size: 38px;
  }
  


.skill-container h6 {
    color: #620097;
    background-color: rgba(255, 255, 255, 0.9); /* Dunkler transparenter Hintergrund */
    padding: 5px;
    border-radius: 5px;
    display: inline-block;
    margin-top: 10px;
    box-shadow: 0 0 10px rgb(255, 255, 255);

}



  
  .progress {
    width: 80%;
    height: 40px;
    background-color: #f0f0f0;
    border: 2px solid #560084;
    margin: 10px auto;
    border-radius: 10px;
    color: #ffffff;
    box-shadow: 0 0 5px rgb(255, 255, 255);

  }
  .progress-bar1, .progress-bar2, .progress-bar3, .progress-bar4 {
    width: calc(93% - 2px);
    height: 100%;
    background-color: #ff85f1;
    display: flex;
    align-items: center;
    justify-content: right;
    border-radius: 10px;
    padding-right: 10px;
  }  
  .progress-bar1 { width: calc(93% - 2px);}
  .progress-bar2 { width: calc(100%);}
  .progress-bar3 { width: calc(98% - 2px);}
  .progress-bar4 { width: calc(100%);}
  
  
  /* Philosophischer Text */
  .philosophy-text {
   margin-bottom: 60px;
    text-align: center;
    justify-content: center;
    background: #fff;
    height: 250px;
    overflow: auto;
    font-style: italic;
    font-size: 28px;
    box-shadow: 0 15px 10px 5px #fff;
    padding-left: 50px;
    padding-right: 50px;
    padding-top: 70px;
    color: #560084;
   
   
  }
  
  blockquote {
  
    margin: 0;
  
  }
  
  blockquote cite {
    display: block;
    margin-top: 10px;
    font-style: normal;
    font-size: 24px;
    text-align: right;
    padding-right: 50px;
  }





  




  #kommentar-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 7vw 0 7vw;
    gap: 20px;
    margin: 50vh auto;

  }




.kommentar-fenster {
    width: 350px;
    border: 2px solid #ffffff;
    border-radius: 10px;
    padding: 10px;
    text-align: center;
    background-color: #f8f8f8;
    box-shadow: 0 0 10px rgb(255, 255, 255);

}

.kommentar-fenster h3 {
  color: #560084;
font-size: 18px;
}

.google .kommentar-inhalt {
    border-top: 4px solid #ff85f1; /* Farbhinweis auf Google (gelb) */
    padding-top: 10px;
    font-size: 15px;
}

.instagram .kommentar-inhalt {
    border-top: 4px solid #ff85f1; /* Farbhinweis auf Instagram (pink) */
    padding-top: 10px;
    font-size: 15px;
}

.menupunkte {
    display: flex;
    justify-content: center;
    margin-top: 10px;
    gap: 30px;
 
}

.menupunkte .menu {
    border: none;
    background-color: #ff85f1;
    padding: 0 11px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
    color: #560084;
}

.menupunkte .menu:hover {
  background-color: #9d00ae;
  color: #ffffff;
}

.menupunkte .klein {
    display: none;
}

.menupunkte .mittel {
    font-size: 16px;
}

.menupunkte .groß {
   display: none;
}

.kommentar-inhalt {
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-style: italic;
    color: #560084;
}


.comment {
  height: auto;
  width: auto;
  padding: 10px;
  border-radius: 5px;
  text-align: center;
  margin: 10px;
  background-color: #ffffff;
  font-size: large;
  text-decoration: none;
  color: #560084;
  align-items: center;
  justify-content: center;
  transition: background-color 0.5s ease-in-out, color 0.5s ease-in-out;
  box-shadow: 0 0 10px rgb(255, 255, 255);

}

.comment:hover {
  background-color: #9d00ae;
  color: #ffffff;
}


@media (max-width: 600px) {
  #kommentar-section h3 {
    font-size: 12px;
  }

  .kommentar-fenster {
    width: 80vw;
  }
}
@media (max-width: 800px) {
  #kommentar-section {
    flex-direction: column;
    align-items: center;
  }
  #kommentar-section h3 {
    font-size: 15px;
  }
}




  /* ----------------------------------------------------------------------------------------------------------------------------
  -------------------------------------------------------------------------------------------------------------------------------
  -------------------------------------------------------------------------------------------------------------------------------
  -------------------------------------------------------------------------------------------------------------------------------
  -------------------------------------------------------------------------------------------------------------------------------

  ------------------------------------------------------------ABOUT ME-----------------------------------------------------------
  ------------------------------------------------------------ABOUT ME----------------------------------------------------------
  ------------------------------------------------------------ABOUT ME-----------------------------------------------------------
  
  -------------------------------------------------------------------------------------------------------------------------------
  -------------------------------------------------------------------------------------------------------------------------------
  -------------------------------------------------------------------------------------------------------------------------------
  -------------------------------------------------------------------------------------------------------------------------------
  -------------------------------------------------------------------------------------------------------------------------------
  -------------------------------------------------------------------------------------------------------------------------------
   */
   #open-container h4 {
    color: #ffffff;
    text-shadow: 0 0 5px #560084, 0 0 12px #560084, 0 0 18px #560084 ;
    font-variant: small-caps;
    font-size: 24px;
    padding: 12vh;
  }


   .wrapper_2 {
    display: flex;
    flex-wrap: wrap;
    border-radius: 10px;
    margin: 0 auto;
    max-width: 80vw;

    background-color: #ffffff;
    text-align: center;
    box-shadow: 0 0 10px rgb(255, 255, 255);
}

#opening-hours {
    list-style: none;
    padding: 0;
    margin-bottom: 20px;
}

#opening-hours li {
    margin: 10px 0;
    font-size: 26px;
    font-weight: bolder;
    font-variant: small-caps;
    color: #560084;
    width: 50vw;
}

#montag-animation {
  font-size: 28px;
  color: #ff0040;
  display: inline-block; /* Konsistente Breite und Höhe */
  min-width: 8ch; /* Länge des längsten Texts reservieren */
  height: 1.2em; /* Feste Höhe (Abhängig von Schriftgröße, z.B. 1.2-fache Zeilenhöhe) */
  line-height: 1.2em; /* Gleiche Zeilenhöhe wie Höhe */
  vertical-align: middle; /* Vertikale Ausrichtung bleibt stabil */
  text-align: center;
}












  /* ----------------------------------------------------------------------------------------------------------------------------
  -------------------------------------------------------------------------------------------------------------------------------
  -------------------------------------------------------------------------------------------------------------------------------
  -------------------------------------------------------------------------------------------------------------------------------
  -------------------------------------------------------------------------------------------------------------------------------

  ------------------------------------------------------------PORTFOLIO----------------------------------------------------------
  ------------------------------------------------------------PORTFOLIO----------------------------------------------------------
  ------------------------------------------------------------PORTFOLIO----------------------------------------------------------

  -------------------------------------------------------------------------------------------------------------------------------
  -------------------------------------------------------------------------------------------------------------------------------
  -------------------------------------------------------------------------------------------------------------------------------
  -------------------------------------------------------------------------------------------------------------------------------
  -------------------------------------------------------------------------------------------------------------------------------
  -------------------------------------------------------------------------------------------------------------------------------
   */

  #portfolio-container h5, h4 {
    color: #ffffff;
    text-shadow: 0 0 5px #560084, 0 0 12px #560084, 0 0 18px #560084 ;
    font-variant: small-caps;
    font-size: 24px;
    padding: 12vh;
  }




  .hello {
    opacity: 1 !important;
  }
  .full {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1001;
  }
  .full .content {
    background-color: rgba(0,0,0,0.75) !important;
    height: 100%;
    width: 100%;
    display: grid;
  }
  .full .content img {
    left: 50%;
    transform: translate3d(0, 0, 0);
    animation: zoomin 1s ease;
    max-width: 100%;
    max-height: 100%;
    margin: auto;
   
  }
  .byebye {
    opacity: 0;
  }
  .byebye:hover {
    transform: scale(0.2) !important;
  }






  .gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    grid-gap: 8px;
    position: relative;
    width: 100%;
    overflow: hidden;
  }


  .fullscreen-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ff85f1;
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    overflow: hidden;
  }

  .fullscreen-container img {
    max-height: 90vh;
    max-width: 100%;
    object-fit: contain;
    border-radius: 8px;
  }





  .gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    grid-gap: 25px;
    position: relative;
    width: 100%;
    overflow: hidden;
    justify-items: center;
    margin: 0 auto;
    padding: 10px;
    max-width: 90vw;
  }


  .gallery-item {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    max-width: 100%;
    box-shadow: 0 0 8px rgb(255, 255, 255);

  }


  .gallery img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    transition: transform 0.5s ease-in-out, box-shadow 0.5s ease-in-out;
   
  }



  .gallery img:hover {
    box-shadow: 0 0 12px rgb(255, 255, 255);
  }
  .gallery .content {
    padding: 4px;
 
  }
  .gallery .gallery-item {
    transition: grid-row-start 300ms linear;
    transition: transform 300ms ease;
    transition: all 0.5s ease;
    cursor: pointer;

  }
  .gallery .gallery-item:hover {
    transform: scale(1.025);
    
  }
  @media (max-width: 600px) {
    .gallery {
      grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));
    }
  }
  @media (max-width: 400px) {
    .gallery {
      grid-template-columns: repeat(auto-fill, minmax(50%, 1fr));
    }
  }
      @-moz-keyframes zoomin {
        0% {
          max-width: 50%;
          transform: rotate(-30deg);
          filter: blur(4px);
        }
        30% {
          filter: blur(4px);
          transform: rotate(-80deg);
        }
        70% {
          max-width: 50%;
          transform: rotate(45deg);
        }
        100% {
          max-width: 100%;
          transform: rotate(0deg);
        }
      }
      @-webkit-keyframes zoomin {
        0% {
          max-width: 50%;
          transform: rotate(-30deg);
          filter: blur(4px);
        }
        30% {
          filter: blur(4px);
          transform: rotate(-80deg);
        }
        70% {
          max-width: 50%;
          transform: rotate(45deg);
        }
        100% {
          max-width: 100%;
          transform: rotate(0deg);
        }
      }
      @-o-keyframes zoomin {
        0% {
          max-width: 50%;
          transform: rotate(-30deg);
          filter: blur(4px);
        }
        30% {
          filter: blur(4px);
          transform: rotate(-80deg);
        }
        70% {
          max-width: 50%;
          transform: rotate(45deg);
        }
        100% {
          max-width: 100%;
          transform: rotate(0deg);
        }
      }
      @keyframes zoomin {
        0% {
          max-width: 50%;
          transform: rotate(-30deg);
          filter: blur(4px);
        }
        30% {
          filter: blur(4px);
          transform: rotate(-80deg);
        }
        70% {
          max-width: 50%;
          transform: rotate(45deg);
        }
        100% {
          max-width: 100%;
          transform: rotate(0deg);
        }
      }
      




  [hidden] {
    display: none;
  }
  
  dialog img {
    padding: 0;
    margin: 0;
    width: 100%;
    

  }
  
  dialog {
    position: relative;
  }
  
  dialog::backdrop {
    background-color: #560084;
    opacity: 0.8;

  }
  
  #lightbox {
    border: thin solid #bfbfbf;
    position: fixed;
    left: 15px;
    border-radius: 10px;
    background-color: #040404;
    color: #d2d2d2;
    height: 600px;
    width: auto;
    box-shadow: 0 0 10px 10px;
    margin-top: 15px;

  }
  
  #lightbox img {
    margin-top: 20px;
    max-height: 80vh;
    max-width: 100%;
    object-fit: contain;
    border-radius: 5px;
    margin-bottom: 20px;
    position: fixed;
  }
  
  #lightbox figcaption {
    font-style: italic;
    text-align: center;
    font-size: 18px;
    margin: 25px;
  }
  
  #lightbox button {
    position: absolute;
    top: 21px;
    right: 28px;
    width: 3rem;
    height: 3rem;
    cursor: pointer;
    border: 0;
    font: 0/0 a;
    text-shadow: none;
    background: transparent;
    color: transparent;
    filter: grayscale(50%);
  }

  #lightbox #close:hover,
  #lightbox #close {
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='100' height='100' fill='firebrick' rx='10' /%3E%3Cpath d='M20,20 l60,60 m0,-60 l-60,60' fill='none' stroke='white' stroke-width='15' stroke-linecap='round'/%3E%3C/svg%3E");
    background-size: contain;
    
    
  }
  
  #lightbox #close:focus {
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='100' height='100' fill='red' rx='10' /%3E%3Cpath d='M20,20 l60,60 m0,-60 l-60,60' fill='none' stroke='white' stroke-width='15' stroke-linecap='round'/%3E%3C/svg%3E");
    filter: grayscale(30%);

  }
  
  
 
  
  
  
  #lightbox button:nth-of-type(2) {
    top: 40%;
    left: 1em;
    width: 3rem;
    height: 8rem;
    background-size: contain;
    border-radius: 0 90% 90% 0;
    
  }
  
  #lightbox button:nth-of-type(3) {
    top: 40%;
    right: 1em;
    width: 3rem;
    height: 8rem;
    background-size: contain;
    border-radius: 90% 0 0 90%;
    

  }
  
  
  
  #lightbox button:nth-of-type(2):hover,
  #lightbox button:nth-of-type(2):focus,
  #lightbox button:nth-of-type(3) {
    background-color: #ff0000;
    transition: 0.5s ease-in-out;
   
  
  }
  
  #lightbox button:nth-of-type(3):not(:hover){
    background-color: #c30000;
    
  }
  
  #lightbox button:nth-of-type(2):not(:hover){
    background-color: #c30000;
    transition: 0.5s ease-in-out;
  }
  
  
  
  @media (prefers-reduced-motion: no-preference) {
    #lightbox[open] img {
      animation: show 0.25s ease-in-out normal;
    }
    @keyframes show {
      from {
        opacity: 0;
      }
      to {
        opacity: 1;
      }
    }
  }
 
  
  ul,
  li {
    display: inline-block;
    margin: 0.1em;
  }
  
  li {
    list-style-type: none;
  }
  
  [role=note] {
    border-left: medium solid #eaff00;
    padding-left: 0.5em;
    max-width: 20em;
  }
  
  [role=note]:before {
    content: 'Beachten:';
    font-weight: blod;
  }
  
  
  
  @media (max-width: 768px) {
    #lightbox img {
      max-width: 90%;
      left: 5%;
      right: 5%;
    }
  }


  
  #cv-item h5, #cv-item-2 h5  {
    margin: 0; /* Kein äußerer Abstand */
    padding: 0; /* Kein innerer Abstand */
    color: #560084;
    text-shadow: none;
  }



  .cv {
    margin-top: 250px;
    color: #560084;
    text-align: center;
}



/* Bildstil */
.cv img {
    width: 40vw;
    height: auto;
    border-radius: 36px;
    box-shadow: 0 0 10px rgb(255, 255, 255);
}

/* Flexbox-Layout */
.cv-item {
    display: flex; /* Nebeneinander-Darstellung */
    align-items: flex-start; /* Elemente oben ausrichten */
    justify-content: flex-start; /* Links ausgerichtet */
    width: 80vw;
    min-height: 300px;
    background-color: #ff85f1;
    padding: 30px;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.5s ease-in-out;
    box-shadow: 0 0 10px rgb(255, 255, 255);
    margin: 50px 0;
}

/* Textcontainer neben dem Bild */
.cv-item div {
    margin: 0 0 0 20px; /* Abstand nur links vom Bild */
    display: flex;
    flex-direction: column; /* Vertikale Anordnung von h5 und p */
    justify-content: flex-start; /* Alles oben ausrichten */
}

/* Abstand zwischen h5 und p */
.cv-item p {
    margin: 10px 0 0; /* Abstand nur oberhalb des Absatzes */
    padding: 0;
    text-align: left;
}

/* Spiegeln von geraden Elementen */
.cv-item:nth-child(even) {
    flex-direction: row-reverse; /* Reihenfolge umkehren */
}

.cv-item:nth-child(even) div {
    margin: 0 20px 0 0; /* Abstand nur rechts vom Bild */
}

/* Sichtbarkeitsklasse */
.cv-item.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Responsives Design für kleinere Bildschirme */
@media (max-width: 800px) {
    .cv-item {
        display: block;
        width: 90%; /* Fast die gesamte Breite */
        margin: 20px auto;
        text-align: center;
        padding: 15px 10px;
    }

    .cv-item img {
        margin: 0 auto 15px;
        width: 80vw;
    }

    .cv-item div {
        margin: 0; /* Kein linker oder rechter Abstand */
    }

    .cv-item:nth-child(even) {
        flex-direction: column; /* Vertikale Darstellung */
    }
}


  /* ----------------------------------------------------------------------------------------------------------------------------
  -------------------------------------------------------------------------------------------------------------------------------
  -------------------------------------------------------------------------------------------------------------------------------
  -------------------------------------------------------------------------------------------------------------------------------
  -------------------------------------------------------------------------------------------------------------------------------

  ------------------------------------------------------------SERVICE------------------------------------------------------------
  ------------------------------------------------------------SERVICE------------------------------------------------------------
  ------------------------------------------------------------SERVICE------------------------------------------------------------
  
  -------------------------------------------------------------------------------------------------------------------------------
  -------------------------------------------------------------------------------------------------------------------------------
  -------------------------------------------------------------------------------------------------------------------------------
  -------------------------------------------------------------------------------------------------------------------------------
  -------------------------------------------------------------------------------------------------------------------------------
  -------------------------------------------------------------------------------------------------------------------------------
   */


 

#service-container h4, h5 {
  color: #ffffff;
  text-shadow: 0 0 5px #560084, 0 0 12px #560084, 0 0 18px #560084 ;
  font-variant: small-caps;
  font-size: 24px;
  padding: 12vh;
}


  .services-section {
    background: none;
    padding: 50px 20px;
    text-align: center;
   
   
  }
  
  .services-container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
    
  }
  
  .service-item {
    background-color: #ff85f1;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgb(255, 255, 255);
    width: 30%;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    box-sizing: border-box;
  }
  


  #faq-content h5 {
    color: #ffffff;
    font-size: 17px;
    margin-bottom: 30px;
  }
  
  .modal-section p {
    color: #ffffff;
    padding-bottom: 20px ;
  }
  .modal-section h6 {
    padding-bottom: 15px;
  }
  .service-item h3 {
    color: #ffffff;
    font-size: 24px;
    margin-bottom: 10px;
  }
  .service-item p {
    color: #ffffff; 
  }
  
  .service-item a {
    text-decoration: none;
    font-weight: bold;
    font-size: 16px;
  }
  
  .service-item a:hover {
    text-decoration: underline;
  }
  
  .service-item:hover {
    transform: translateY(-10px);
    box-shadow: 0 6px 15px rgb(0, 0, 0);
    
  }
  
  @media (max-width: 768px) {
    .service-item {
      width: 100%;
    }
  }
  




/* Schließbutton im Lightbox-Stil */
.lightbox-close {
    background: none;
    border: none;
    padding: 0;
    position: absolute;
    top: -92px;
    right: 10vw;
  
    background-image: url('path_to_your_close_icon.svg'); /* Dein Schließen-Icon */
    background-size: cover;
    cursor: pointer;
    transition: transform 0.3s ease-in-out;
    z-index: 99999;
   
}

.lightbox-close:hover {
    transform: scale(1.1);
}

.lightbox-close:focus {
    outline: none;
}












/* Modal Styles */
.modal-overlay {
  position: fixed;
  
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.7);
  display: none;
  justify-content: center;
  align-items: center;
  transition: opacity 0.3s ease-in-out;
  z-index: 9998;
  margin-top: 260px;
}

.modal-content {
  width: 90vw;
  height: 80vh;
  border: #ffffff solid 5px;

  background-color: #ff85f1;
  border-radius: 10px;
  overflow-y: auto;
  padding: 20px;
  box-shadow: 0 0 20px rgb(255, 255, 255);
  transform: translateY(-100px);
  transition: transform 0.3s ease-in-out;
}


.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

#modal-title {
    font-size: 40px;
    font-weight: bold;
    padding-bottom: 15px;
    color: #560084;

}

#modal-text {

    text-align: left; 

}
#modal-body p, #modal-body h6 {
  color: #560084;
}

#consultation-content, #parties-content, #designs-content, #piercings-content, #tattoo-content, #faq-content{
  font-size: 18px;
  color: #560084;
  font-weight: bolder;

}

#consultation-content p {
padding-bottom: 0;
text-align: left;


}



.modal-overlay.open {
    display: flex;
    opacity: 1;
}

.modal-content.show {
    transform: translateY(0);
   
}


.modal-section {
  display: none; /* Unsichtbar standardmäßig */
  text-align: left; 

}

.modal-section.active {
  display: block; /* Sichtbar, wenn aktiv */
 
}


.service-item button {
  margin-top: 50px;
  padding: 10px;
  width: 70%;
  left: 0;
  right: 0;
  bottom: 0; 
  border-radius: 10px;
  cursor: pointer;
  font-size: 14px;
  color: #ffffff;
  background-color: #560084;
  font-weight: 200;
  transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out; 
}

.service-item button:hover {
  background-color: #340050;
  color: #f79cff;
}










#faq-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 1vw;
  width: 100%;
  height: auto;
  box-sizing: border-box;

}

#faq-content h5 {
  padding: 0;
  text-shadow: none;
  text-align: left;
}
.faq-section {
  
  padding: 10px;
  border-radius: 10px;
  width: auto; /* Passt sich bei kleineren Bildschirmen an */
  max-width: 1100px; /* Verhindert, dass der Bereich zu breit wird */
  box-sizing: border-box;
  text-align: center;

}

.faq-section.active {
  display: block; /* Sichtbar, wenn aktiv */
}

.faq-item {
  text-align: left; /* Standard für Inhalte */
}

#faq-content h5 {
  color: #560084;
  margin-bottom: 10px;
  font-size: x-large;

}
#faq-content h6 {
  color: #560084;
  font-size: larger;
  padding-bottom: 12px;

}

#faq-content p {
  color: #560084;
  padding-bottom: 0 5px 20px 5px;
  font-size: large;
  text-align: left; 


}



/* Responsive Anpassungen */
@media (max-width: 600px) {
  .faq-item h3 {
    font-size: 1em; /* Verkleinerte Überschriften */
  }
  .faq-item p {
    font-size: 0.9em; /* Verkleinerter Text */
  }
  .faq-section h5 {
    font-size: 1.1em; /* Verkleinerte Überschriften */

  }
}











  /* ----------------------------------------------------------------------------------------------------------------------------
  -------------------------------------------------------------------------------------------------------------------------------
  -------------------------------------------------------------------------------------------------------------------------------
  -------------------------------------------------------------------------------------------------------------------------------
  -------------------------------------------------------------------------------------------------------------------------------

  ------------------------------------------------------------FOOTER-------------------------------------------------------------
  ------------------------------------------------------------FOOTER-------------------------------------------------------------
  ------------------------------------------------------------FOOTER-------------------------------------------------------------
  
  -------------------------------------------------------------------------------------------------------------------------------
  -------------------------------------------------------------------------------------------------------------------------------
  -------------------------------------------------------------------------------------------------------------------------------
  -------------------------------------------------------------------------------------------------------------------------------
  -------------------------------------------------------------------------------------------------------------------------------
  -------------------------------------------------------------------------------------------------------------------------------
   */











  footer {
    background-color: #ff85f1;
    padding: 10px 15vw 10px 15vw;
    display: block;
    width: 100%;
    box-shadow: 0 -10px 10px 5px #ff85f1;

    
  }
  @media (max-width: 900px){
  footer {
    padding: 15px 10vw 15px 10vw;
  }
  }


  .contact {
    min-height: auto; /* Mindesthöhe dynamisch entfernen */
    border-radius: 10px;
    background-color: #ffffff;
    text-align: center;
    padding: 10px; /* Direkte Begrenzung des Abstands von innen */
}

.contact .wrapper {
    display: flex;
    justify-content: center; /* Ausrichtung */
    align-items: flex-start; /* Verhindere vertikale Zentrierung */
    flex-wrap: wrap; /* Flexibles Verhalten bei kleiner Breite */
    gap: 10px; /* Abstand zwischen den Elementen */
    padding: 0; /* Reduziere zusätzliches Padding */
}
.contact .wrapper p, .contact .wrapper a {
  font-size: 22px;
}
  @media (max-width: 800px){
    .contact .wrapper {
      display: block;
    }
    .contact .wrapper p {
      margin-bottom: 15px; 

    }
  }


  .contact-wrapper1 {
    display: block;
    justify-content: center; /* Ausrichtung */
    align-items: flex-start; /* Verhindere vertikale Zentrierung */
    flex-wrap: wrap; /* Flexibles Verhalten bei kleiner Breite */
    gap: 10px; /* Abstand zwischen den Elementen */
    padding: 20px; /* Reduziere zusätzliches Padding */

}
.contact-wrapper1 h5 {
  font-size: 38px;

}
  @media (max-width: 800px){
    .contact .wrapper {
      display: block;
    }
    .contact .wrapper p {
      margin-bottom: 15px; 

    }
  }




  
  
  .contact h5, .contact p, .contact a {
    margin: 0; /* Margin minimieren */
    padding: 5px 0; /* Für eine feine Abgrenzung */
    text-shadow: none;
    text-decoration: none;
    color: #e600ff;
}
 
  


  /* Button */
  #getintouch input {
    color: #ffffff;
    background-color: #560084;
    font-size: 22px;
    font-weight: bold;
    border: none;
    border-radius: 5px;
    padding: 12px 20px;
    cursor: pointer;
    width: 80%; /* Gleiche Breite wie andere Felder */
    max-width: 300px;
    transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
    height: 60px;
  }
  
  #getintouch input:hover {
    background-color: #e600ff; /* Hover-Effekt */
  }
  









  .footer-container {
    display: flex;
    justify-content: space-between;
  }
  @media (max-width: 800px){
    .footer-container {
     display: block; 
    align-items: center;
    }
  }


  .footer-container a {
    font-size: 18px;
    font-weight: bold;
    font-variant: small-caps;
      
    margin-left: 10vw ;
    margin-right: 10vw;
    
   
  }
  @media (max-width: 800px){
    .footer-container a  {
      margin-left: 40px;
      margin-right: 40px;    }
  
  }
  
  @media (max-width: 500px){
    .footer-container a  {
      margin-left: 30px;
      margin-right: 30px; 
  }
  }







  .footer-section {
    flex: 1 1 100px;
 
  }
  .footer-section h4 {
    margin-top: -38px; 
    margin-bottom: -60px;
    font-size: 22px;
    color: #e600ff;
    font-weight: bold;
    font-variant: small-caps;
    text-shadow: none;
    
  }

 
  .footer-section a {
    text-decoration: none;
    color: #620097;
    display: block;
    
    
    transition: color 0.3s ease-in-out;
  }
  .footer-section a:hover {
    color: #e600ff;
  }

  



  .social-icons {
    text-align: center;
    margin-top: 20px;
    margin-bottom: 5px;
    scale: 1.8;
    display: flex; /* Flexbox für die Reihenanordnung */
    flex-wrap: wrap; /* Um die Icons in mehreren Zeilen anzuzeigen, wenn der Platz knapp wird */
    justify-content: center; /* Die Icons in der Mitte ausrichten */
}

.social-icons a {
    color: #620097;
    font-size: 20px;
    margin: 0 10px;
    text-decoration: none;
    transition: color 0.4s ease-in-out;
}

.social-icons a:hover {
    color: #e600ff;
}

/* Media Query für Bildschirme unter 800px */
@media (max-width: 400px) {
    .social-icons {
        flex-wrap: wrap; /* Ermöglicht das Umfließen der Icons */
        justify-content: center; /* Die Icons gleichmäßig verteilen */
        scale: 1.2;

    }
}



  .footer-bottom {
    
    text-align: center;
    font-size: 14px;
    color: #620097;
  }

  .footer-bottom a {
    text-decoration: none;
    color: #620196;
    font-weight: 500;
    font-variant: small-caps;
    transition: color 0.4s ease-in-out;
  }
  .footer-bottom a:hover {
    color: #000000;
    
  }
  @media (max-width: 700px) {
    .footer-bottom  {
      font-size: 10px;

    }
}