body {
    background-color: #f4f4f4;
}

.Gross {
    font-family: "Bricolage Grotesque", sans-serif;
    font-optical-sizing: auto;
    font-weight: 750;
    font-style: normal;
    font-variation-settings: "wdth" 100;
    
    font-size: 3.25vw;
    letter-spacing: .4px;
    line-height: 1.22;
    text-align: left;
    
    margin-left: 19vw;
    margin-right: 19vw;
    
    padding-top: 1.7vw;
    padding-bottom: 0;
}

.Header {
    font-family: 'Heebo', sans-serif;
    font-weight: 320;
    font-size: 2vw;
    letter-spacing: .9px;
    /*letter-spacing: 1.05;*/

    margin-left: 19vw;
    margin-right: 19vw;
    
    padding-top: 2.4vw;
    padding-bottom: 0;
}

/*Kurzbeschrieb Anfang*/

@keyframes swipe {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}

.Kurzbeschrieb {
    font-family: "Bricolage Grotesque", serif;
    font-optical-sizing: auto;
    font-weight: 750;
    font-style: normal;
    font-variation-settings: "wdth" 100;
    
    font-size: 3.8vw;
    letter-spacing: .4px;
    line-height: 1.25;
    text-align: left;
    
    margin-left: 19vw;
    margin-right: 19vw;
    padding-top: 5.7vw;
    padding-bottom: 3.8vw;
}

.highlight {
    position: relative;
    display: inline-block;
    padding: 0 5px;
    text-decoration: none;
    color: inherit;
}

.highlight::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background-color: var(--highlight-color);
    z-index: -1;
    animation: swipe 1s forwards;
    transition: transform 0.19s ease-in-out;
}

.highlight:hover::before {
   /* transform: scale(1.05); */
    background-color: white;
    transition: 0.19s ease-in-out;
}

.markierung-header:hover {
   /* transform: scale(1.05); */
    background-color: white;
    color: black;
    transition: 0.19s ease-in-out;
}

.redaktion { --highlight-color: #e4c89d; }
.gestaltung { --highlight-color: #a0b1db; animation-delay: .6; }
.bildfindung { --highlight-color: #97b996; animation-delay: 0.3s; }

/*Kurzbeschrieb Ende*/


.Klein {
    font-family: 'Heebo', sans-serif;
    font-weight: 350;
    font-size: 1.33vw;
    /*letter-spacing: 1.05;*/
    line-height: 1.4;
    
    margin-left: 19vw;
    margin-right: 19vw;

    padding-top: 0.6vw;
    padding-bottom: 0;
    
}

.Kompetenzen-Bold {
font-size: 1.8vw;
font-weight: 750;
line-height: 1.22;
}

.Bildunterschrift {
    font-family: 'Heebo', sans-serif;
    font-weight: 350;
    font-size: 1.12vw;
    /*letter-spacing: 1.05;*/
    line-height: 1.35;
    
    margin-left: 0;
    margin-right: 5vw;

    padding-top: 1.2vw;
    padding-bottom: 0;
}

.Bild {
    margin-left: 19vw;
    margin-right: 19vw;

    padding-top: 4.3vw;
    padding-bottom: 0;
}

img {
    box-sizing: border-box;
    width: 100%;
    height: auto;
}

a:hover {
    color: #737373;
    transition: 0.2s;
    }


	::-moz-selection { background: white; color: black; }
	::selection { background: white; color: black; }


#lightbox {
  position: fixed;
  z-index: 1000;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #000000;
  display: none;
  cursor: zoom-out;
}

#lightbox.active {
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

#lightbox img {

  background-color: #000000;
            
    object-fit: scale-down;
    max-width: 100%;
    max-height: 100vh;
    margin: auto;
}

#Anreiz:hover {
    transform: scale(0.994);
    transition: 0.19s ease-in-out;
}

/*klickbar versteht sich inkl. Anreiz*/
#klickbar:hover {
    transform: scale(0.994);
    transition: 0.19s ease-in-out;
}


/* Ergänzung durch Chat GPT */

#fixed-header {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    /*
    top: 0;
    left: 0;    
    z-index: 1000;
    padding: 0.5rem 1rem;
    */
}

#fixed-header h1 {
    transition: transform 0.8s ease, opacity 0.8s ease;
        
}

#fixed-header .toggle {
    cursor: pointer;
  /*  font-size: 1.5rem; */
    transition: transform 0.5s ease;
    margin-right: 19vw;
    margin-top: 2.4vw;
}

#expanded-text {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease, opacity 0.8s ease;
    opacity: 0;
    
    /* 
    margin-top: 3.5rem;
    padding: 0 1rem;
    */
    
    font-family: 'Heebo', sans-serif;
    font-weight: 350;
    font-size: 1.33vw;
    /*letter-spacing: 1.05;*/
    line-height: 1.4;
    
    margin-left: 19vw;
    margin-right: 19vw;


    padding-top: 0;
    padding-bottom: 0;
    
}


#expanded-text.expanded {
    max-height: 100%;
    opacity: 1;
}


.rotated {
    transform: rotate(135deg);
}

.content {
    margin-top: 4rem; /* Höhe des Headers */
}

#toggle-symbol img {
    width: 20px; /* Breite des Bildes */
    height: 20px; /* Höhe des Bildes */
    
    cursor: pointer; /* Zeiger ändert sich beim Hover */
    display: block; /* Verhindert unerwünschte Einflüsse von Inline-Elementen */
    
    transform-origin: center; /* Drehpunkt bleibt in der Mitte */
    margin-top: 0; /* Kein zusätzlicher Abstand */
}

#toggle-symbol img:hover {transition: 0.15s; transform: scale(1.16);}

.icon-wrapper {
    position: relative;
    height: 100%; /* Kann auf die gewünschte Höhe angepasst werden */
    display: flex;
    align-items: flex-start; /* SVG oben ausrichten */
}

.divider {
    width: 1.5px;
    background-color: darkgray;
    margin-right: 1.8vw;
    margin-left: 1.8vw;
}

/*Farbige Punkte Anfang*/

.bild-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
}

.bild-wrapper img {
    display: block;
    width: 100%;
    height: auto;
}

.dots {
    position: absolute;
    top: 14px;  /* Abstand von der oberen Bildkante */
    left: 14px; /* Abstand von der linken Bildkante */
    display: flex;
    gap: 10px;
    z-index: 2; /* Über dem Bild */
}

.dot {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;  /* Stellt sicher, dass nichts übersteht */
}

.dot img {
    width: 100%;  /* Skaliert die SVG innerhalb des Punktes */
    height: auto;
}

.R { background-color: #e4c89d; }
.G { background-color: #a0b1db; }
.B { background-color: #97b996; }


/*Farbige Punkte Ende*/


teaser-margin { padding-bottom: 5vw; }


@media only screen and (max-width: 1250px) {
    .Gross {
    font-size: 3.4vw;
    line-height:1.22;
    
    margin-left: 12vw;
    margin-right: 12vw;
    
    padding-top: 1.9vw;
    padding-bottom: 0;
    }
    
    .Klein {
    font-size: 1.9vw;  
    line-height:1.4;
        
    margin-left: 12vw;
    margin-right: 12vw;
    
    padding-top: 0.8vw;
    padding-bottom: 0;    
    }
    
    .Kompetenzen-Bold {
    font-size: 2.4vw;
    line-height: 1.22;
    }
    
    .Header {
    font-size: 2.4vw;

    margin-left: 12vw;
    margin-right: 12vw;
    
}

    .Kurzbeschrieb {
    font-size: 5vw; 

    margin-left: 12vw;
    margin-right: 12vw;
    

}
    
    #expanded-text {
    font-size: 1.9vw;  
    line-height:1.4;
        
    margin-left: 12vw;
    margin-right: 12vw;
    
    padding-top: 0.8vw;
    padding-bottom: 0;    
    }
    
    #fixed-header .toggle {
    margin-right: 12vw;
    }
    
    .Bildunterschrift {
    font-size: 1.7vw;
    line-height: 1.4;
    
    padding-top: 1.4vw;
    padding-bottom: 0;
        
    padding-right: 1vw;
}
    
    .Bild {
    margin-left: 12vw;
    margin-right: 12vw;
    
    padding-top: 4.3vw;
    padding-bottom: 0;     
    } 
}

@media only screen and (max-width: 700px) {
    
    
    .Gross {
    font-size: 5.9vw; 
    line-height:1.16;
    
    margin-left: 3.5vw;
    margin-right: 3.5vw;
    
    padding-top: 2.6vw;
    padding-bottom: 0;
    }
    
    .Klein {
    font-size: 3.75vw;  
    line-height:1.37;
        
    margin-left: 3.5vw;
    margin-right: 3.5vw;
    
    padding-top: 1.4vw;
    padding-bottom: 0;    
    }

    .Kompetenzen-Bold {
    font-size: 4.7vw;
    line-height: 1.22;
    margin-bottom: .7vw;
    }
    
    .Header {
    font-size: 4.7vw; 
    font-weight: 750;
        
    /*
    letter-spacing: 1.2px;
    */
    
    margin-left: 3.5vw;
    margin-right: 3.5vw;
    
    padding-top: 2.6vw;
    padding-bottom: 0;
}

    .Kurzbeschrieb {
    font-size: 7.3vw; 

    margin-left: 3.5vw;
    margin-right: 3.5vw;
    
    padding-top: 13.4vw;
    padding-bottom: 13.4vw;
}
    
    #expanded-text {
    font-size: 3.75vw;  
    line-height:1.37;
        
    margin-left: 3.5vw;
    margin-right: 3.5vw;
    
    padding-top: 1.4vw;
    padding-bottom: 0;    
    }
    
    #fixed-header .toggle {
    margin-right: 3.5vw;
        }
    
    .Bildunterschrift {
    font-size: 3.3vw;
    line-height: 1.35;
    
    padding-top: 2.8vw;
    padding-bottom: 0;
}
    
    .Bild {
    margin-left: 3.5vw;
    margin-right: 3.5vw;
    
    padding-top: 6.3vw;
    padding-bottom: 0;     
    }
    
    #Anreiz:hover {
    transform: scale(1);}
    
    .teaser-container {
    flex-direction: column;
    margin-top: 8vw;
    margin-bottom: 8vw;
    }

    .divider {        
    height: 1.5px;
    width: 100%;
    margin: 3vw 0 5vw 0;
    /*oben rechts unten links*/
    }
    
    .dots {
    top: 11px;  /* Abstand von der oberen Bildkante */
    left: 11px; /* Abstand von der linken Bildkante */
    gap: 8px;
    }
    
    .dot {
    width: 24px;
    height: 24px;
    }
    
    
    /* Animation vorläufig ausgeschaltet
    
    #klickbar {
    animation-name: zoom;
    animation-duration: 6.7s;
    animation-delay: -4.5s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    }
    
    */

}

@keyframes zoom {
    0% { transform: scale(1, 1); }
    90% { transform: scale(1, 1); }
    92.5% { transform: scale(0.96, 0.96); }
    95% { transform: scale(1, 1); }
    97.5% { transform: scale(0.96, 0.96); }
    100% { transform: scale(1, 1); }
}


.highlight::selection {
    background-color: var(--highlight-color); /* Hintergrundfarbe der Auswahl auf die Highlight-Farbe setzen */
    color: black; /* Textfarbe der Auswahl */
}

/*Kontakt-Button*/

    .fixed-button {
      position: fixed;
      bottom: 2.5vw; /* Abstand vom unteren Rand */
      right: 2.5vw; /* Abstand vom rechten Rand */
      width: 80px; /* Durchmesser des Buttons */
      height: 80px;
      background-color: white;
      border-radius: 50%; /* Rund machen */
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
    }

    .fixed-button:hover {
      transform: scale(1.07); /* Skalierung bei Hover */
      transition: 0.19s ease-in-out;
      background-color: #97b996;
    }

html {
  scroll-behavior: smooth;
}

/* Pop-Up ANFANG */

        .popup-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 9999; /* Sehr hoher Wert, damit es über allem liegt */
            
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.15s ease-in-out, visibility 0.15s ease-in-out;
            display: flex; /* Wichtig, um das Popup korrekt anzuzeigen */
            justify-content: center;
            align-items: center;
        }

.popup-overlay.show {
    opacity: 1;
    visibility: visible;
}

        .popup {
            background: white;
            padding: 27px;
            width: 33vw;
            max-width: 500px;
            min-width: 280px;
            position: absolute;
            cursor: grab;
            z-index: 10000; /* Noch höher als der Overlay-Hintergrund */

        }
        .popup-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            padding-top: 0;
            padding-bottom: 25px;
        }
        .popup-header img {
            width: 13vw;
            height: 13vw;
            max-width: 160px;
            max-height: 160px;
            border-radius: 50%;
        }

.close-btn {
    width: 20px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;

}

.close-btn img {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 100%;
    background: none;
}

.close-btn img:hover {transition: 0.15s; transform: scale(1.16);}

        .popup-content {
            cursor: grab;
        }

        @media (max-width: 700px) {
            .popup {
                width: 82%;
                max-width: none;
                position: static;
                cursor: default;
            }
            .popup-header img {
            width: 23vw;
            height: 23vw;
            width: 100%;
            height: 100%;
            display: block;
            }
        }

/*
        a {
            text-decoration: none;
            color: black;
            cursor: pointer;
        }
        a:hover {
            text-decoration: underline;
        }

*/

/* Pop-Up ENDE */


/* Karussell ANFANG */



/* Karussell ENDE */


/*Von hier an Footer*/

.footer {
    background-color: #a0b1db;

}

.footer-container {
    display: flex;
    max-width: 100%;


    /*
    margin-left: 19vw;
    margin-right: 19vw;
    */
}

.teaser-container {
    display: flex;
    max-width: 100%;
}

.column {
  flex: 1;
}

.footer-bold {
    font-family: 'Heebo', sans-serif;
    font-weight: 750 !important;
    /*
    font-size: 1.33vw;
    */
}

.footer-regular {
    font-family: 'Heebo', sans-serif;
    font-weight: 350;
    /*
    font-size: 1.33vw;
    */
}



/* Für den Video-Container */
.video-container {
    background: #e4c89d;
    display: flex;
    justify-content: center; /* Zentriert horizontal */
    align-items: center; /* Zentriert vertikal */
    margin-top: 5vw;
    margin-bottom: 5vw;
}

video {
  max-width: 97%; /* Verhindert, dass es zu groß wird */
  max-height: 97%;
  display: block; /* Verhindert, dass es als Inline-Element unerwartete Abstände hat */
    cursor: pointer;
}


/*
.tooltip {
    position: absolute;
    background: white;
    font-weight: 750;
    color: black;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-right: 10px;
    padding-left: 10px;
    white-space: nowrap;
    pointer-events: none;
    display: none;
    transform: translate(-50%, -50%);
}
*/