@media all and (min-width: 800px) {
    .menue {
        width: 100%;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 100;
        
    }
    
    

    .menue.aktiv {
        background-color: rgba(255, 255, 255, 0.5);
        height: 100%;
    }
    
    .fliesstext__smartphone4 {
        display: none;
    }
    
    .menue__menue {
        color: rgb(0, 0, 0);
        /* margin-top 15 - 3 wegen margin von __punkt */
        /* padding: 15px 15px 0 15px;
        font-family: 'suisse';
        flex-wrap: wrap;
        width: 100%; */
        display: flex;
        z-index: 1;
        font-size: 13px;
        list-style: 11px;
        width: 100%;
        flex-wrap: wrap;
        font-family: 'suisse';
        background-color: rgb(255, 255, 255);
        line-height: 1.1;
        
        
    }

    .menue__menue-punkt--menue1 {
        width: 25%;
        padding: 10px 10px;
        position: relative; /* wichtig für ::after */
        
    }

    .menue__menue-punkt--en__und__de__button {
        width: 25%;
        display: flex;
        gap: 5px;
        align-items: center;
        

    }





    .menue__menue-punkt--me1 {
        width: 25%;
        text-align: end;
        padding: 10px 10px;
        position: relative; /* wichtig für das absolute Positionieren */
      }

      
/* Haupttext rechts (Spalten 2+3 = rechte Hälfte) */
.overlay-text {
    position: fixed;
    bottom: 0;
    left: 50%;
    width: 50%;
    
    padding: 10px;
    display: none;
    z-index: 9999;
  }
  
  .overlay-text.active {
    display: block;
  }
  
  .overlay-content {
    font-size: 13px;
    color: #000;
    padding-right: 10px;
    text-align: left;
  }
  
  /* Nebentext links (Spalte 1 = 25%) */
  .overlay-meta {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 50%;
   
    padding: 10px;
    font-size: 13px;
    display: none;
    z-index: 9999;
    color: #000;
    font-family: 'suisse';
  }
  
  .overlay-meta.active {
    display: block;
  }
   





      


      





    .menubalken {
        font-family: 'suisse';
        color: rgb(0, 0, 0);
        padding: 10px 10px;
        align-items: center;
        justify-content: center;
        font-size: 13px;
        z-index: 1000;             /* höher als .menue__menue */
        background: none;          /* kein Hintergrund */
        pointer-events: none;
        width: 25%;      /* damit Menü weiterhin klickbar ist */
    }

    .menubalken3 {
        font-family: 'suisse';
        color: rgb(0, 0, 0);
        padding: 10px 10px;
        align-items: center;
        justify-content: center;
        font-size: 13px;
        z-index: 1000;             /* höher als .menue__menue */
        background: none;          /* kein Hintergrund */
        pointer-events: none;
        width: 25%;      /* damit Menü weiterhin klickbar ist */
    }
    
    
    /* Optional: nur der Text soll sichtbar sein */
    .menubalken #projekttitel {
        pointer-events: auto;
        opacity: 0;                    /* Standard: unsichtbar */
        transition: opacity 0.3s ease; /* sanftes Ein-/Ausblenden */
    }
    

    .smartphone__menue__menue{
        display: none;
    }
    
   
   
    .malin1-bild {
        display: none;
    }
    .skizzen1-bild {
        display: none;
    }
    .mails__link1-bild {
        display: none;
    }

    .instu__link1-bild {
        display: none;
    }
   
    /* Container für die 3 Menüpunkte */


/* Jeder Menüpunkt */
.menue__menue-punkt--menue3 {
    flex: 0 0 33.333%;      /* nimmt 1/3 der Breite ein */
    box-sizing: border-box; /* Padding wird mitgerechnet */
    padding: 10px;
   
}


/* Der Link selbst */
.menue__menue-punkt--menue3 a {
    display: block;         /* gesamte Fläche klickbar */
    width: 100%;            /* füllt den Menüpunkt komplett */
    color: rgb(141, 141, 141);
    text-decoration: none;
    font-family: 'suisse';
    font-size: 15px;
    line-height: 1.1;
}

/* Jeder Menüpunkt */
.menue__menue-punkt--menue2 {
    flex: 0 0 33.333%;      /* nimmt 1/3 der Breite ein */
    box-sizing: border-box; /* Padding wird mitgerechnet */
    padding: 10px;
}

/* Der Link selbst */
.menue__menue-punkt--menue2 a {
    display: block;         /* gesamte Fläche klickbar */
    width: 100%;            /* füllt den Menüpunkt komplett */
    color: rgb(0,0,0);
    text-decoration: none;
    font-family: 'suisse';
    font-size: 15px;
    line-height: 1.1;
}
.projektbilder_uebersicht-smart{
    display: none;
}

    
    .menue__menue-punkt--schregstrich {  
        padding: 3px 5px;
       
        margin-left: 5px;
        
    }

  

    .menue__menue-punkt--menue1-1 {
        color: rgb(0, 0, 0);
        text-decoration: none;
        
    }
    
     .menue__menue-punkt--menue1-1 {
        color: rgb(0, 0, 0);
        text-decoration: none;
        
    }
    
    
    .menue__menue-punkt--liste {
        display: none;
        position: fixed;
        margin-top: 78px;
        font-size: 100px;
        font-family: 'suisse';
        text-decoration: none;
        
        
        
    }
    
    .menue__menue-punkt--liste.aktiv {
        display: flex;
        flex-wrap: wrap;
        
    }

    .menue__menue-punkt--listezwei {
        display: none;
        position: fixed;
        margin-top: 35px;
        margin-left:5px;
        font-size: 100px;
        font-family: 'suisse';
        text-decoration: none;
        
       
        
    }
    
    .menue__menue-punkt--listezwei.aktiv {
        display: flex;
        flex-wrap: wrap;
    }
    
    
    .projektbilder_uebersichtsp {
        display: none;
    }
    
    
    .menue__menue-punkt--text {
        width: 100%;
        text-decoration: none;
        color: rgb(0, 0, 0);
        font-size: 65px;
      
        
    }

    .menue__menue-punkt--text4 {
        width: 100%;
        text-decoration: none;
        font-size: 45px;
        -webkit-filter: blur(2px);
        filter: blur(2.5px);
        color: rgb(0, 0, 0);
        
        
    }



    
    .menue__menue-punkt--text:hover {
     
        color: rgb(0, 0, 0);
        
        
    }
    
    .menue__menue-punkt--text-span {
        margin-top: 30px;
        font-size: 13px;
        font-style: italic;
        padding-left: 2px;
    }
    
    
    
    
   

    .menue__menue-punkt--me1-1 {
        text-decoration: none;
        color: rgb(0, 0, 0);
        text-align: end;
    }


    
    .menue__menue-punkt--me1-1:hover {
  
        color: rgb(0, 0, 0);
        
    }

    .menue__menue-punkt--me2-1 {
        text-decoration: none;
        color: rgb(0, 0, 0);
        text-align: end;
    }


    
    .menue__menue-punkt--me2-1:hover {
        
        color: rgb(0, 0, 0);
        
    }

    .menue__menue-punkt--vorher {
        border-top-left-radius: 19px;
        border-bottom-left-radius: 19px;
        border: 2px solid rgb(0, 0, 0);
        padding: 3px 10px;
        border-top-right-radius: 19px;
        border-bottom-right-radius: 19px;
        background-color: rgb(255, 255, 255);
        text-decoration: none;
        color: rgb(0, 0, 0);
        
    }

    .menue__menue-punkt--vorher1 {
        color: rgb(0, 0, 0);
        text-decoration: none;
    }
    

    .menue__menue-punkt--vorher1:hover {
        -webkit-filter: blur(2px);
        filter: blur(1.5px);
        color: rgb(0, 0, 0);
    }

 

    .menue__menue-punkt--en {
        margin-right:-20px;
        padding: 3px 10px;
        margin-left: 2px;
        
    }

   

    .menue__menue-punkt--de {
        padding: 3px 10px;
        margin-left: -15px;
    

    }

   
    

    .menue__menue-punkt--next2 {
        padding: 3px 10px;
        border: 2px solid rgb(0, 0, 0);
        border-top-right-radius: 19px;
        border-bottom-right-radius: 19px;
        border-top-left-radius: 19px;
        border-bottom-left-radius: 19px;
        margin-left: 3px;
        background-color: rgb(255, 255, 255);
        text-decoration: none;
        color: rgb(0, 0, 0);
    }

    .menue__menue-punkt--vorher2 {
        border-top-left-radius: 19px;
        border-bottom-left-radius: 19px;
        border: 2px solid rgb(0, 0, 0);
        padding: 3px 10px;
        border-top-right-radius: 19px;
        border-bottom-right-radius: 19px;
        background-color: rgb(255, 255, 255);
        text-decoration: none;
        color: rgb(0, 0, 0);
    }



    .menue__menue-punkt--next {
        padding: 3px 10px;
        border: 2px solid rgb(0, 0, 0);
        border-top-right-radius: 19px;
        border-bottom-right-radius: 19px;
        border-top-left-radius: 19px;
        border-bottom-left-radius: 19px;
        margin-left: auto;
        text-align: end;
        background-color: rgb(255, 255, 255);
        text-decoration: none;
        color: rgb(0, 0, 0);
    }

    .menue__menue-punkt--next1 {
        color: rgb(0, 0, 0);
        text-decoration: none;
    }

    .menue__menue-punkt--next1:hover {
        
        -webkit-filter: blur(2px);
        filter: blur(1.5px);
        color: rgb(255, 0, 238);
        
    }

    

    .prozessflex__container {
        display: flex;
        justify-content: center;
    }

    .prozessflex__process {
        padding: 3px 10px;
        border: 2px solid rgb(0, 0, 0);
        border-top-right-radius: 19px;
        border-bottom-right-radius: 19px;
        border-top-left-radius: 19px;
        border-bottom-left-radius: 19px;
        text-align: center;
        background-color: rgb(255, 255, 255);
        color: rgb(0, 0, 0);
        font-size: 13px;
        align-items: center;
        display: flex;
        margin-bottom: 15px;
        font-family: 'suisse';
        font-size: 13px;
    }



    .projektbilder__box {
        display: block;
        position: relative;
        


    }

    .projektbilder__desktop {
        width: 100%;
        object-fit: cover;
        object-position: center top;
    }

    .projektbilder__desktop1 {
        width: 100%;
        object-fit: cover;
        object-position: center top;
        margin-bottom: -180px;
        
    }

    .projektbilder__box__ganzflächig2 {
        display: none;
    }

    .projektbilder__box__ganzflächig {
        width: 66.6%;               /* Breite des Bildes */
        margin: 35px auto 100px;    /* oben 50px, unten 100px, horizontal zentriert */
        display: block;             /* nötig, damit auto-Margins wirken */
    }

    .slider-container {
        position: relative;
        width: 66.6%;
        margin: 35px auto 100px;
    }
    
    .slider-images img {
        width: 100%;
        display: none;
        position: relative;
        z-index: 0; /* Bilder unter Klickflächen */
    }
    
    .slider-images img.active {
        display: block;
    }
    
    /* Klickflächen */
    .click-left, .click-right {
        position: absolute;
        top: 0;
        height: 100%;
        width: 50%;
        z-index: 10; /* über den Bildern */
    }
    
    .click-left { left: 0; cursor: w-resize; }
    .click-right { right: 0; cursor: e-resize; }
    

    .projektbilder__box__ganzflechig3 {
        width: 100%;
        margin-bottom: 100px;
    }

    .projektbilder__box__ganzflechig_smartphone3 {
        display: none;
    }
    

    .projektbilder__ganzflächig__startseite {
        width: 100%;
        object-fit: cover;
        object-position: center top;

    }

    .projektbilder__smartphone {
        display: none;
    }

    .projektbilder__ganzflächig__startseite--smartphone {
        display: none;
    }
    .projektbilder__ganzflächig__startseite--desktop {
        width: 100%;
        object-fit: cover;
        object-position: center top;
    }







    .fliesstext {
        font-size: 50px;
        color: rgb(0, 0, 0);
        font-family: 'suisse';
    }

    .fliesstext__projekt1 {
        font-size: 40px;
        color: rgb(0, 0, 0);
        padding: 15px;
        margin-bottom: 500px;
        font-family: 'suisse';

    }

    .text__projekt1 {
        display: flex;
        width: 100%;
        padding: 15px;
        margin-bottom: 100px;
        align-items: flex-end;
        font-family: 'suisse';
        font-size: 13px;
    }

    .text__lehrer {

        color: rgb(0, 0, 0);
        width: 20%;

    }

    .text__lehrer2 {
        width: 50%;
    }

    .text {
        align-items: flex-end;
        font-size: 13px;
        color: rgb(0, 0, 0);
        width: 30%;

    }

   

    .projektbilder_anordnung1 {
        display: flex;
        width: 100%;
        
        margin-bottom: 120px;

    }

    .projektbilder_anordnung1__links1 {
        width: 30%;
        padding-left: 3px;
    }

    .video2 {
        width: 30%;
        padding-left: 3px;
    }

    .projektbilder_anordnung1__mitte2 {
        width: 35%;
        padding-left: 3px;
    }

    .projektbilder_anordnung1__rechts3 {
        width: 35%;
        padding-left: 3px;
        padding-right: 3px;

    }

    .projektbilder_anordnung2 {
        display: flex;
        width: 100%;
        padding: 15px;
        margin-bottom: 120px;

    }

    .projektbilder_anordnung222 {
        display: flex;
        width: 100%;
        padding-left: 15px;
        padding-right: 15px;
        margin-bottom: -12px;

    }

    .projektbilder_anordnung222__links1 {
        width: 50%;
        padding-left: 3px;
    }

    .projektbilder_anordnung222__mitte2 {
        width: 50%;
        padding-left: 3px;
    }

    .projektbilder_anordnung2__links1 {
        width: 50%;
        padding-left: 3px;
    }

    .projektbilder_anordnung2__mitte2 {
        width: 50%;
        padding-left: 3px;
    }

    .projektbilder_anordnung3 {
        display: flex;
        width: 100%;
        padding: 15px;
        margin-bottom: 120px;

    }

    .projektbilder_anordnung3__links1 {
        width: 50%;
        padding-left: 3px;
    }

    .projektbilder_anordnung3__mitte2 {
        width: 50%;
        padding-left: 3px;
    }

    .projektbilder_anordnung4 {
        display: flex;
        width: 100%;
        padding: 15px;
        margin-bottom: 120px;

    }

    .projektbilder_anordnung4__links1 {
        width: 50%;
        padding-left: 3px;
    }

    .projektbilder_anordnung4__mitte2 {
        width: 50%;
        padding-left: 3px;
    }
    .projektbilder_anordnung5 {
        display: flex;
        width: 100%;
        padding: 15px;
        margin-bottom: 120px;

    }

    .projektbilder_anordnung5__links1 {
        width: 50%;
        padding-left: 3px;
    }

    .projektbilder_anordnung5__mitte2 {
        width: 50%;
        padding-left: 3px;
    }

    .projektbilder__gross {
        width: 100%;
        padding: 3px;
        margin-bottom: 100px;
    }
    .close-overlay-smart {
        display: none;
    }
    .overlay-meta-smart{
        display: none;
    }

    .projektbilder__handy {
        display: none;
    }
    .projektbilder_uebersicht {
        display: flex;
        flex-direction: row;          /* alles nebeneinander */
        gap: 0.5px;                    /* Abstand zwischen den Spalten */
        margin-top: 5px;
        overflow-x: auto;             /* horizontales Scrollen */
        overflow-y: hidden;           /* vertikales Scrollen verhindern */
        white-space: nowrap;          /* kein automatischer Umbruch */
        scroll-snap-type: x mandatory; /* optional: Snap-Effekt beim Scrollen */
        -ms-overflow-style: none;  /* IE und Edge */
        scrollbar-width: none;     /* Firefox */
        gap: 1px;
        height: 100%;
        margin-left: 1px;
        
    }

    .projektbilder_uebersicht3 {
        display: flex;
        flex-direction: row;          /* alles nebeneinander */
        gap: 0.5px;                    /* Abstand zwischen den Spalten */
        margin-top: 5px;
        overflow-x: auto;             /* horizontales Scrollen */
        overflow-y: hidden;           /* vertikales Scrollen verhindern */
        white-space: nowrap;          /* kein automatischer Umbruch */
        scroll-snap-type: x mandatory; /* optional: Snap-Effekt beim Scrollen */
        -ms-overflow-style: none;  /* IE und Edge */
        scrollbar-width: none;     /* Firefox */
        gap: 1px;
        height: 100%;
        margin-left: 1px;
        
    }
    .stage-smart {
        display: none;
    }
    
    /* Jede Spalte bleibt fix nebeneinander */
    .projektbilder__spalte {
        flex: 0 0 auto;               /* verhindert, dass die Spalten schrumpfen */
        display: flex;
        flex-direction: column;       /* Bilder innerhalb der Spalte untereinander */
        padding: 1.5px;
        scroll-snap-align: start;     /* Snap am Anfang der Spalte */
    }


    /* Jede Spalte bleibt fix nebeneinander */
    .projektbilder__spalte3 {
        flex: 0 0 auto;               /* verhindert, dass die Spalten schrumpfen */
        display: flex;
        flex-direction: column;       /* Bilder innerhalb der Spalte untereinander */
        padding: 1.5px;
        scroll-snap-align: start;     /* Snap am Anfang der Spalte */
    }
    
    /* Einzelnes Bild */
    .projektbilder__bild {
        position: relative;
        display: inline-block;
        margin-bottom: 3px;
    }
    
    .projektbilder__bild img {
        display: block;
        max-width: 400px;  /* Beispielgröße – kannst du anpassen */
        height: auto;
        margin-top: 22px;
    }
    
    /* Video innerhalb der Spalte wie ein Bild behandeln */
.projektbilder__bild video {
    display: block;
    max-width: 400px;  /* gleiche Maximalbreite wie die Bilder */
    height: auto;       /* Höhe proportional */
    margin-top: 22px;   /* Abstand nach oben, wie bei Bildern */
    object-fit: cover;  /* optional: skaliert Video schön, ohne Verzerrung */
}



/* Einzelnes Bild */
.projektbilder__bild3 {
    position: relative;
    display: inline-block;
    margin-bottom: 3px;
}


/* Standard: Alle Bilder gleich groß */
.projektbilder__bild3 img {
    width: 520px;   /* Beispielbreite */
    height: auto;
    transition: all 0.3s ease;
    cursor: pointer;
    margin-top: 22px;
  }
  
  
  /* Wenn Bild aktiv ist → größer */
  .projektbilder__bild3.active img {
    width: 645px;   /* doppelte Breite */
    height: auto;
    z-index: 10; /* nach vorne holen */
    margin-top: 22px;
  }

  /* Standard: Alle Bilder gleich groß */
.projektbilder__bild6 img {
    width: 600px;   /* Beispielbreite */
    height: auto;
    transition: all 0.3s ease;
    cursor: pointer;
    margin-top: 22px;
  }
  
  /* Wenn Bild aktiv ist → größer */
  .projektbilder__bild6.active img {
    width: 750px;   /* doppelte Breite */
    height: auto;
    z-index: 10; /* nach vorne holen */
    margin-top: 22px;
  }

   /* Standard: Alle Bilder gleich groß */
.projektbilder__bild9 img {
    width: 600px;   /* Beispielbreite */
    height: auto;
    transition: all 0.3s ease;
    cursor: pointer;
    margin-top: 22px;
  }
  
  /* Wenn Bild aktiv ist → größer */
  .projektbilder__bild9.active img {
    width: 665px;   /* doppelte Breite */
    height: auto;
    z-index: 10; /* nach vorne holen */
    margin-top: 22px;
  }
    /* Standard: Alle Bilder gleich groß */
.projektbilder__bild19 img {
    width: 500px;   /* Beispielbreite */
    height: auto;
    transition: all 0.3s ease;
    cursor: pointer;
    margin-top: 22px;
  }
  
  /* Wenn Bild aktiv ist → größer */
  .projektbilder__bild19.active img {
    width: 590px;   /* doppelte Breite */
    height: auto;
    z-index: 10; /* nach vorne holen */
    margin-top: 22px;
  }

  /* Standard: Alle Bilder gleich groß */
.projektbilder__bild5 img {
    width: 800px;   /* Beispielbreite */
    height: auto;
    transition: all 0.3s ease;
    cursor: pointer;
    margin-top: 22px;
  }
  
  /* Wenn Bild aktiv ist → größer */
  .projektbilder__bild5.active img {
    width: 1108px;   /* doppelte Breite */
    height: auto;
    z-index: 10; /* nach vorne holen */
    margin-top: 22px;
  }

   /* Standard: Alle Bilder gleich groß */
.projektbilder__bild16 img {
    width: 800px;   /* Beispielbreite */
    height: auto;
    transition: all 0.3s ease;
    cursor: pointer;
    margin-top: 22px;
  }
  
  /* Wenn Bild aktiv ist → größer */
  .projektbilder__bild16.active img {
    width: 1220px;   /* doppelte Breite */
    height: auto;
    z-index: 10; /* nach vorne holen */
    margin-top: 22px;
  }

   /* Standard: Alle Bilder gleich groß */
.projektbilder__bild15 img {
    width: 800px;   /* Beispielbreite */
    height: auto;
    transition: all 0.3s ease;
    cursor: pointer;
    margin-top: 22px;
  }
  
  /* Wenn Bild aktiv ist → größer */
  .projektbilder__bild15.active img {
    width: 1140px;   /* doppelte Breite */
    height: auto;
    z-index: 10; /* nach vorne holen */
    margin-top: 22px;
  }

   /* Standard: Alle Bilder gleich groß */
.projektbilder__bild8 img {
    width: 920px;   /* Beispielbreite */
    height: auto;
    transition: all 0.3s ease;
    cursor: pointer;
    margin-top: 22px;
  }
  
  /* Wenn Bild aktiv ist → größer */
  .projektbilder__bild8.active img {
    width: 1220px;   /* doppelte Breite */
    height: auto;
    z-index: 10; /* nach vorne holen */
    margin-top: 22px;
  }

     /* Standard: Alle Bilder gleich groß */
.projektbilder__bild1 img {
    width: 520px;   /* Beispielbreite */
    height: auto;
    transition: all 0.3s ease;
    cursor: pointer;
    margin-top: 22px;
  }
  
  /* Wenn Bild aktiv ist → größer */
  .projektbilder__bild1.active img {
    width: 1310px;   /* doppelte Breite */
    height: auto;
    z-index: 10; /* nach vorne holen */
    margin-top: 22px;
  }

   /* Standard: Alle Bilder gleich groß */
.projektbilder__bild8 img {
    width: 920px;   /* Beispielbreite */
    height: auto;
    transition: all 0.3s ease;
    cursor: pointer;
    margin-top: 22px;
  }
  
 
  
  /* Wenn Bild aktiv ist → größer */
  .projektbilder__bild1.active img {
    width: 576px;   /* doppelte Breite */
    height: auto;
    z-index: 10; /* nach vorne holen */
    margin-top: 22px;
  }

/* Standard: Alle Bilder gleich groß */
.projektbilder__bild6 img {
    width: 500px;   /* Beispielbreite */
    height: auto;
    transition: all 0.3s ease;
    cursor: pointer;
    margin-top: 22px;
  }
  
  /* Wenn Bild aktiv ist → größer */
  .projektbilder__bild6.active img {
    width: 612px;   /* doppelte Breite */
    height: auto;
    z-index: 10; /* nach vorne holen */
    margin-top: 22px;
  }

  /* Standard: Alle Bilder gleich groß */
.projektbilder__bild13 img {
    width: 550px;   /* Beispielbreite */
    height: auto;
    transition: all 0.3s ease;
    cursor: pointer;
    margin-top: 22px;
  }
  
  /* Wenn Bild aktiv ist → größer */
  .projektbilder__bild13.active img {
    width: 663px;   /* doppelte Breite */
    height: auto;
    z-index: 10; /* nach vorne holen */
    margin-top: 22px;
  }

  /* Standard: Alle Bilder gleich groß */
.projektbilder__bild10 img {
    width: 520px;   /* Beispielbreite */
    height: auto;
    transition: all 0.3s ease;
    cursor: pointer;
    margin-top: 22px;
  }
  
  /* Wenn Bild aktiv ist → größer */
  .projektbilder__bild10.active img {
    width: 590px;   /* doppelte Breite */
    height: auto;
    z-index: 10; /* nach vorne holen */
    margin-top: 22px;
  }

  .projektbilder__bild11 img {
    width: 700px;   /* Beispielbreite */
    height: auto;
    transition: all 0.3s ease;
    cursor: pointer;
    margin-top: 22px;
  }
  
  /* Wenn Bild aktiv ist → größer */
  .projektbilder__bild11.active img {
    width: 815px;   /* doppelte Breite */
    height: auto;
    z-index: 10; /* nach vorne holen */
    margin-top: 22px;
  }

  /* Standard: Alle Bilder gleich groß */
.projektbilder__bild7 img {
    width: 900px;   /* Beispielbreite */
    height: auto;
    transition: all 0.3s ease;
    cursor: pointer;
    margin-top: 22px;
  }
  
  /* Wenn Bild aktiv ist → größer */
  .projektbilder__bild7.active img {
    width: 1376px;   /* doppelte Breite */
    height: auto;
    z-index: 10; /* nach vorne holen */
    margin-top: 22px;
  }

/* Standard: Alle Bilder gleich groß */
.projektbilder__bild4 img {
    width: 700px;   /* Beispielbreite */
    height: auto;
    transition: all 0.3s ease;
    cursor: pointer;
    margin-top: 22px;
  }
  
  /* Wenn Bild aktiv ist → größer */
  .projektbilder__bild4.active img {
    width: 810px;   /* doppelte Breite */
    height: auto;
    z-index: 10; /* nach vorne holen */
    margin-top: 22px;
  }


/* Standard: Alle Bilder gleich groß */
.projektbilder__bild3-1 img {
    width: 850px;   /* Beispielbreite */
    height: auto;
    transition: all 0.3s ease;
    cursor: pointer;
    margin-top: 22px;
  }
  
  /* Wenn Bild aktiv ist → größer */
  .projektbilder__bild3-1.active img {
    width: 1150px;   /* doppelte Breite */
    height: auto;
    z-index: 10; /* nach vorne holen */
    margin-top: 22px;
  }


/* Standard: Alle Bilder gleich groß */
.projektbilder__bild3-2 img {
    width: 512px;   /* Beispielbreite */
    height: auto;
    transition: all 0.3s ease;
    cursor: pointer;
    margin-top: 22px;
  }
  
  /* Wenn Bild aktiv ist → größer */
  .projektbilder__bild3-2.active img {
    width: 1150px;   /* doppelte Breite */
    height: auto;
    z-index: 10; /* nach vorne holen */
    margin-top: 22px;
  }

.overlay-klein a {
  color: black;
  text-decoration: underline;
}

.overlay-klein a:visited {
  color: black;
}

.overlay-klein a:hover {
  color: black;
}



  /* Standard: Alle Bilder gleich groß */
.projektbilder__bild101 img {
    width: 900px;   /* Beispielbreite */
    height: auto;
    transition: all 0.3s ease;
    cursor: pointer;
    margin-top: 22px;
  }
  
  /* Wenn Bild aktiv ist → größer */
  .projektbilder__bild101.active img {
    width: 1212px;   /* doppelte Breite */
    height: auto;
    z-index: 10; /* nach vorne holen */
    margin-top: 22px;
  }
  

  /* Standard: Alle Bilder gleich groß */
.projektbilder__bild102 img {
    width: 516px;   /* Beispielbreite */
    height: auto;
    transition: all 0.3s ease;
    cursor: pointer;
    margin-top: 22px;
  }
  
  /* Wenn Bild aktiv ist → größer */
  .projektbilder__bild102.active img {
    width: 670px;   /* doppelte Breite */
    height: auto;
    z-index: 10; /* nach vorne holen */
    margin-top: 22px;
  }


   /* Standard: Alle Bilder gleich groß */
.projektbilder__bild1002 img {
    width: 516px;   /* Beispielbreite */
    height: auto;
    transition: all 0.3s ease;
    cursor: pointer;
    margin-top: 22px;
  }
  
  /* Wenn Bild aktiv ist → größer */
  .projektbilder__bild1002.active img {
    width: 1125px;   /* doppelte Breite */
    height: auto;
    z-index: 10; /* nach vorne holen */
    margin-top: 22px;
  }


  

  /* Standard: Alle Bilder gleich groß */
.projektbilder__bild104 img {
    width: 510px;   /* Beispielbreite */
    height: auto;
    transition: all 0.3s ease;
    cursor: pointer;
    margin-top: 22px;
  }
  
  /* Wenn Bild aktiv ist → größer */
  .projektbilder__bild104.active img {
    width: 680px;   /* doppelte Breite */
    height: auto;
    z-index: 10; /* nach vorne holen */
    margin-top: 22px;
  }
/* Standardgröße für Videos */
.projektbilder__video video {
    width: 850px;
    height: auto;
    transition: all 0.3s ease;
    cursor: pointer;
    margin-top: 22px;
  }
  
  /* Aktiv: Video vergrößern */
  .projektbilder__video.active video {
    width: 1445px; /* gewünschte Vergrößerung */
    height: auto;
    z-index: 10;
    margin-top: 22px;
  }

  /* Standardgröße für Videos */
.projektbilder__video5 video {
    width: 801px;
    height: auto;
    transition: all 0.3s ease;
    cursor: pointer;
    margin-top: 22px;
  }
  
  /* Aktiv: Video vergrößern */
  .projektbilder__video5.active video {
    width: 1111px; /* gewünschte Vergrößerung */
    height: auto;
    z-index: 10;
    margin-top: 22px;
  }

   /* Standardgröße für Videos */
.projektbilder__video6 video {
    width: 920px;
    height: auto;
    transition: all 0.3s ease;
    cursor: pointer;
    margin-top: 22px;
  }
  
  /* Aktiv: Video vergrößern */
  .projektbilder__video6.active video {
    width: 1225px; /* gewünschte Vergrößerung */
    height: auto;
    z-index: 10;
    margin-top: 22px;
  }


  /* Standardgröße für Videos */
.projektbilder__video3 video {
    width: 413.7px;
    height: auto;
    transition: all 0.3s ease;
    cursor: pointer;
    margin-top: 22px;
  }
  
  /* Aktiv: Video vergrößern */
  .projektbilder__video3.active video {
    width: 459px; /* gewünschte Vergrößerung */
    height: auto;
    z-index: 10;
    margin-top: 22px;
  }





 /* Galerie-Größe */
.projektbilder__video2 video {
    width: 900px; /* Standardbreite */
    transition: all 0.3s ease;
    margin-top: 22px;
  }
  


    /* Standardgröße für Videos */
.projektbilder__video9 video {
    width: 520px;
    height: auto;
    transition: all 0.3s ease;
    cursor: pointer;
    margin-top: 22px;
  }
  
  /* Aktiv: Video vergrößern */
  .projektbilder__video9.active video {
    width: 645px; /* gewünschte Vergrößerung */
    height: auto;
    z-index: 10;
    margin-top: 22px;
  }


  /* Standardgröße für Videos */
.projektbilder__video103 video {
    width: 516.2px;
    height: auto;
    transition: all 0.3s ease;
    cursor: pointer;
    margin-top: 22px;
  }
  
  /* Aktiv: Video vergrößern */
  .projektbilder__video103.active video {
    width: 670px; /* gewünschte Vergrößerung */
    height: auto;
    z-index: 10;
    margin-top: 22px;
  }
  



   /* Standardgröße für Videos */
.projektbilder__video105 video {
    width: 395.5px;
    height: auto;
    transition: all 0.3s ease;
    cursor: pointer;
    margin-top: 22px;
  }
  
  /* Aktiv: Video vergrößern */
  .projektbilder__video105.active video {
    width: 510px; /* gewünschte Vergrößerung */
    height: auto;
    z-index: 10;
    margin-top: 22px;
  }
  
 /* Standardgröße für Videos */
.projektbilder__video106 video {
    width: 600px;
    height: auto;
    transition: all 0.3s ease;
    cursor: pointer;
    margin-top: 22px;
  }
  
  /* Aktiv: Video vergrößern */
  .projektbilder__video106.active video {
    width: 870px; /* gewünschte Vergrößerung */
    height: auto;
    z-index: 10;
    margin-top: 22px;
  }
  
  
  /* Overlay klickdurchlässig machen, damit Controls funktionieren */
  .projektbilder__overlay {
    pointer-events: none;
  }
  
    .projektbilder__overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: transparent; /* kein sichtbarer Hintergrund */
        opacity: 0;
        transition: opacity 0.3s ease, background-color 0.3s ease;
        pointer-events: none; /* verhindert, dass das Overlay das Hover blockiert */
    }
    
    .projektbilder__bild:hover .projektbilder__overlay {
        opacity: 0.5; /* nur halbtransparent, Bild bleibt sichtbar */
    }
    
   


    .projektbilder__bild3:hover .projektbilder__overlay {
        opacity: 0.5; /* nur halbtransparent, Bild bleibt sichtbar */
    }
    
    
   
   

    .infos {
        font-size: 13px;
        color: rgb(0, 0, 0);
        display: flex;
        width: 100%;
        padding: 15px;
        font-family: 'suisse';
        font-size: 13px;
    }

    .infos_1 {
        width: 25%;
        margin-top: -7px;
    }

    .infos_2 {
        width: 25%;
        margin-top: -380px;
    }

    .infos_3 {
        width: 25%;
        margin-top: -275px;
    }

    .infos_4 {
        width: 25%;
        margin-top: -110px;
    }

    .infos2 {
        font-size: 13px;
        color: rgb(0, 0, 0);
        display: flex;
        width: 100%;
        padding: 15px;
        font-family: 'suisse';
        font-size: 135px;
    }

    .infos2_1 {
        width: 25%;
        margin-top: -192px;
    }

    .infos2_2 {
        width: 25%;
        margin-top: -310px;
    }

    .infos2_3 {
        width: 25%;
        margin-top: -500px;
    }

    .infos2_4 {
        width: 25%;
        margin-top: -30px;
    }

    .projektbilder_anordnung_overview3 {
        display: flex;
        width: 100%;
        padding: 15px;
    }

    .projektbilder_anordnung_overview3_5 {
        margin-top: -182px;
        padding: 2px;
        width: 25%;
    }

    .projektbilder_anordnung_overview3_6 {
        margin-top: -307px;
        padding: 2px;
        width: 25%;
    }

    .projektbilder_anordnung_overview3_7 {
        margin-top: -496px;
        padding: 2px;
        width: 25%;
    }

    .projektbilder_anordnung_overview3_8 {
        margin-top: -32px;
        padding: 2px;
        width: 25%;
    }

   

    

    
    .unterteilungen {
        color: rgb(0, 0, 0);
        display: flex;
        /* margin-top 15 - 3 wegen margin von __punkt */
        font-family: 'suisse';
        font-size: 13px;
        list-style: 11px;
    }

    


    
    .unterteilungen__punkt {
        margin-top: 3px;
    }
    
    
    .unterteilungen__punkt--gruppe1 {
        border-top-left-radius: 19px;
        border-bottom-left-radius: 19px;
        border: 1.5px solid rgb(0, 0, 0);
        padding: 3px 10px;
        border-top-right-radius: 19px;
        border-bottom-right-radius: 19px;
        background-color: rgb(255, 255, 255);
    }
   
    .unterteilungen__punkt--gruppe1:hover {
        font-style: italic;
    }
    
    

    .unterteilungen__punkt--gruppe2 {
        border-top-left-radius: 19px;
        border-bottom-left-radius: 19px;
        border: 1.5px solid rgb(0, 0, 0);
        padding: 3px 10px;
        border-top-right-radius: 19px;
        border-bottom-right-radius: 19px;
        background-color: rgb(255, 255, 255);
        margin-left: 3px;
    
    }
    .unterteilungen__punkt--gruppe2:hover {
        font-style: italic;
    }

    

    .unterteilungen__punkt--gruppe3 {
        border-top-left-radius: 19px;
        border-bottom-left-radius: 19px;
        border: 1.5px solid rgb(0, 0, 0);
        padding: 3px 10px;
        border-top-right-radius: 19px;
        border-bottom-right-radius: 19px;
        background-color: rgb(255, 255, 255);
        margin-left: 3px;
    }
    .unterteilungen__punkt--gruppe3:hover {
        font-style: italic;
    }

    .unterteilungen__punkt--gruppe4 {
        border-top-left-radius: 19px;
        border-bottom-left-radius: 19px;
        border: 1.5px solid rgb(0, 0, 0);
        padding: 3px 10px;
        border-top-right-radius: 19px;
        border-bottom-right-radius: 19px;
        background-color: rgb(255, 255, 255);
        margin-left: 3px;
    }
    .unterteilungen__punkt--gruppe4:hover {
        font-style: italic;
    }

    .unterteilungen__punkt--gruppe5 {
        border-top-left-radius: 19px;
        border-bottom-left-radius: 19px;
        border: 1.5px solid rgb(0, 0, 0);
        padding: 3px 10px;
        border-top-right-radius: 19px;
        border-bottom-right-radius: 19px;
        background-color: rgb(255, 255, 255);
        margin-left: 3px;
    }
    .unterteilungen__punkt--gruppe5:hover {
        font-style: italic;
    }

    .unterteilungen__punkt--gruppe6 {
        border-top-left-radius: 19px;
        border-bottom-left-radius: 19px;
        border: 1.5px solid rgb(0, 0, 0);
        padding: 3px 10px;
        border-top-right-radius: 19px;
        border-bottom-right-radius: 19px;
        background-color: rgb(255, 255, 255);
        margin-left: 3px;
    }
    .unterteilungen__punkt--gruppe6:hover {
        font-style: italic;
    }

    .unterteilungen__punkt--gruppe7 {
        border-top-left-radius: 19px;
        border-bottom-left-radius: 19px;
        border: 1.5px solid rgb(0, 0, 0);
        padding: 3px 10px;
        border-top-right-radius: 19px;
        border-bottom-right-radius: 19px;
        background-color: rgb(255, 255, 255);
        margin-left: 3px;
    }
    .unterteilungen__punkt--gruppe7:hover {
        font-style: italic;
    }

    .unterteilungen__punkt--gruppe8 {
        border-top-left-radius: 19px;
        border-bottom-left-radius: 19px;
        border: 1.5px solid rgb(0, 0, 0);
        padding: 3px 10px;
        border-top-right-radius: 19px;
        border-bottom-right-radius: 19px;
        background-color: rgb(255, 255, 255);
        margin-left: 3px;
    }
    .unterteilungen__punkt--gruppe8:hover {
        font-style: italic;
    }


    

    .texttabelle {
        margin-top: 50px;
    }



    .Textgrid {
        font-family: 'suisse';
        
        font-size: 13px;
        display: flex;
        width: 100%;
        color: rgb(0, 0, 0);
        padding-top: 140px;
        padding-left: 15px;
        padding-right: 15px;
        margin-bottom: -140px;


    }


    .Textgrid__Projekt1-1-poster {
        width: 60%;

        border-top: 1px solid rgb(0, 0, 0);
    }

    .Textgrid__Projekt1-2-01 {
        width: 20%;
        border-top: 1px solid rgb(0, 8, 255);
        border-bottom: 1px solid rgb(0, 8, 255);
    }

    .Textgrid__Projekt1-3-abdriften {
        width: 20%;
        border-top: 1px solid rgb(0, 8, 255);
        border-bottom: 1px solid rgb(0, 8, 255);
    }

    .Textgrid__Projekt1-1-editorial {
        width: 60%;

        border-top: 1px solid rgb(0, 8, 255);
    }

    .Textgrid__Projekt1-1-motion {
        width: 60%;
        border-bottom: 1px solid rgb(0, 8, 255);
        border-top: 1px solid rgb(0, 8, 255);
    }

    .Textgrid__Projekt1-1-fonts {
        width: 60%;

        border-top: 1px solid rgb(0, 8, 255);
    }

    .Textgrid__Projekt1-1-photography {
        width: 60%;

        border-top: 1px solid rgb(0, 8, 255);
    }

    .Textgrid__Projekt1-1-screenprinting {
        width: 60%;

        border-top: 1px solid rgb(0, 8, 255);
    }

    .Textgrid__Projekt1-1-merch {
        width: 60%;

        border-top: 1px solid rgb(0, 8, 255);
    }

    .Textgrid__Projekt1-1-illustration {
        width: 60%;

        border-top: 1px solid rgb(0, 8, 255);
    }

    .Textgrid__Projekt1-1 {
        width: 60%;



    }

    .Textgrid__Projekt1-2 {
        width: 20%;
        border-bottom: 1px solid rgb(0, 8, 255);
    }

    .Textgrid__Projekt1-3 {
        width: 20%;
        border-bottom: 1px solid rgb(0, 8, 255);
    }


   

    .fliesstext__mich__deen {
        font-family: 'suisse';
        font-size: 40px;
        color: rgb(0, 0, 0);
        padding-left: 15px;
        padding-right: 15px;
    }


    
    .videos {
        width: 100%;
        padding: 2px;
        margin-bottom: 100px;
    }

    .video1 {
        width: 100%;
        padding: 2px;
        margin-bottom: 100px;
    }

    .text__insta {
        font-family: 'suisse';
        font-size: 13px;
        color: rgb(0, 0, 0);
        padding-left: 15px;
        padding-bottom: 15px;
    }
    .text__insta:hover {
        font-style: italic;
    }
    .text__mail {
        font-family: 'suisse';
        font-size: 13px;
        color: rgb(0, 0, 0);
        padding-left: 15px;
        padding-bottom: 15px;
    }
    .video_smartphone {
        display: none;
    }


    .info__text{
        display: none;
    }
   

    .fliesstext_london {
        font-family: 'suisse';
        font-size: 15px;
        color: rgb(0, 0, 0);
        padding-left: 10px;
        margin-bottom: 10px;
        padding-right: 10px;
        margin-top: -85px;
        color: rgb(0, 0, 0);
        line-height: 1.1;
        width: 33.3%;       /* <-- nur ein Drittel der Breite */
        box-sizing: border-box; /* Padding wird mitgerechnet */
        
        
    }
    .fliesstext_mich {
        font-family: 'suisse';
        font-size: 17px;
        color: rgb(0, 0, 0);
        padding-left: 15px;
        padding-right: 15px;
        line-height: 1.1;
        letter-spacing: -0.75px;
        margin-top: 90px;
        
    }
    .fliesstext_london--klein {
        font-family: 'suisse';
        font-size: 12px;
        color: rgb(0, 0, 0);
        padding-left: 10px;
        margin-bottom: 100px;
        color: rgb(0, 0, 0);
        line-height: 1.1;
        
        
       
    }

    .text__insta {
        font-family: 'suisse';
        font-size: 15px;
        color: rgb(0, 0, 0);
        padding-left: 15px;
        padding-bottom: 15px;
        padding-top: 30px;
    }
    .instu__link {
        text-decoration: none;
        color: rgb(0, 0, 0);

       
    }

    

    .pdf__link {
        text-decoration: none;
        color: rgb(0, 0, 0);
        
    }

    
    .mails__link {
        text-decoration: none;
        color: rgb(0, 0, 0);
        
    }

    .malin {
        text-decoration: none;
        color: rgb(0, 0, 0);
        
    }

    .malin:hover {
        -webkit-filter: blur(2px);
         filter: blur(2px);
         color: rgb(255, 0, 238);
         cursor: pointer;
    }

    .skizzenbuch {
        text-decoration: none;
        color: rgb(0, 0, 0);
    }

    .skizzenbuch:hover {
        -webkit-filter: blur(2px);
         filter: blur(2px);
         color: rgb(255, 0, 238);
         cursor: pointer;
    }


    

   
    
    .text__mail {
        font-family: 'suisse';
        font-size: 15px;
        color: rgb(0, 0, 0);
        padding-left: 15px;
        padding-bottom: 15px;
        padding-top: 30px;
    }

    
    
    .video {
        width: 100%;
        
    }
    .video2 {
        width: 33%;
        
    }
    .video3 {
        width: 100%;
        margin-bottom: 190px;
        
    }

    .videohaha {
        position: relative;
        width: 80%;
        margin: 0 auto;
        margin-bottom: 90px;
        margin-top: 200px;
    }

    .videohahasp {
        display: none;
    }

    .videohahasp2 {
        display: none;
    }

    

    .video3__1 {
        width: 33%;
    }
    .video3__2 {
        width: 33%;
    }
    .video3__3 {
        width: 33%;
    }
    .projektbilder__box__ganzflächig_smartphone {
        display: none;
        
    }

    
    

    .text__sprachen {
        font-family: 'suisse';
        font-size: 12px;
         padding-left: 2px;
        
        padding-top: 30px;

        color: rgb(146, 145, 145);
        line-height: 1.1;
        letter-spacing: -0.75px;
    }

    .text__programme {
        font-family: 'suisse';
        font-size: 12px;
        color: rgb(91, 89, 89);
        padding-left: 2px;
        padding-bottom: 15px;
        color: rgb(146, 145, 145);
        line-height: 1.1;
        letter-spacing: -0.75px;
        
    }

    .prozess__titel {
        width: 100%;
        color: rgb(0, 0, 0);
        /* margin-top 15 - 3 wegen margin von __punkt */
        /* padding: 15px 15px 0 15px;
        font-family: 'suisse';
        flex-wrap: wrap;
        width: 100%; */
        padding: 15px 15px 0 15px;
        display: flex;
        z-index: 1;
        font-size: 13px;
        font-family: 'suisse';
        margin-top: -100px;
        
    
        
    
    }
    .prozess__titel__1 {
        border-top-left-radius: 19px;
        border-bottom-left-radius: 19px;
        border: 1.5px solid rgb(0, 0, 0);
        padding: 3px 10px;
        border-top-right-radius: 19px;
        border-bottom-right-radius: 19px;
        background-color: rgb(255, 255, 255);
        text-decoration: none;
        color: rgb(0, 0, 0);
    }



    .projektbilder_anordnung2-1 {
        display: flex;
        width: 100%;
        padding: 15px 15px 1.5px 15px;
        
        

    }

    

    .projektbilder_anordnung2-1__links1 {
        width: 25%;
        padding-left: 3px;
        
    }

    .projektbilder_anordnung2-1__mitte2 {
        width: 25%;
        padding-left: 3px;
    }


    .projektbilder_anordnung2-1__links2 {
        width: 25%;
        padding-left: 3px;
    }

    .projektbilder_anordnung2-1__mitte1 {
        width: 25%;
        padding-left: 3px;
    }
   

   

    .projektbilder_anordnung4-1 {
        display: flex;
        width: 100%;
        padding: 1.5px 15px 15px 15px;
        

    }

    .projektbilder_anordnung4-1__links1 {
        width: 25%;
        padding-left: 3px;
    }

    .projektbilder_anordnung4-1__mitte2 {
        width: 25%;
        padding-left: 3px;
    }


    .projektbilder_anordnung4-1__links2 {
        width: 25%;
        padding-left: 3px;
    }

    .projektbilder_anordnung4-1__mitte1 {
        width: 25%;
        padding-left: 3px;
    }

    
    .projektbilder_anordnungXSP {
        display: flex;
        width: 100%;
        padding: 1.5px 280px 1.5px 280px;
        margin-top: 60px;
        

    }

    .projektbilder_anordnungXSP__links1 {
        width: 50%;
        padding-left: 3px;
    }

    .projektbilder_anordnungXSP__links1-1 {
        width: 50%;
        padding-left: 3px;
    }

    

    .projektbilder_anordnungXSP__mitte2 {
        width: 50%;
        padding-left: 3px;
    }

    .projektbilder_anordnungX__gross {
        width: 100%;
        padding: 60px 200px 60px 200px;
    }
    .projektbilder_anordnungX__gross3 {
        display: flex;
        align-items: center;
        justify-content: center; /* Horizontale Zentrierung */
        width: 36%;
        margin: 0 auto; /* Automatische Seitenränder, um das Element zu zentrieren */
        margin-bottom: 90px;
    
    }

    .projektbilder_anordnungX2SP {
        display: flex;
        width: 100%;
        padding: 1.5px 280px 60px 280px;
        margin-top: 60px;
        margin-bottom: 20px;
        

    }

    .projektbilder_anordnungX2SP__links1 {
        width: 50%;
        padding-left: 3px;
    }

    .projektbilder_anordnungX2SP__mitte2 {
        width: 50%;
        padding-left: 3px;
    }
   

    .projektbilder__rotate {
        display: flex;
        width: 100%;
        margin-bottom: 150px;
        margin-top: 200px;

    }

    .projektbilder__rotate__links {
        width: 50%;
      
    }
    .projektbilder__rotate__rechts {
        width: 50%;
    }






    .container1 {
        position: relative;
        display: inline-block;
    }
  
      /* Stil für den Text im Container */
    .text1 {
        display: inline;
        font-family: 'suisse';
        font-size: 17px;
        text-decoration: none;
        color: black;
        
    }
  
      /* Stil für das Bild im Container (standardmäßig ausgeblendet) */
    .image1 {
        position: fixed;
        top: 60%;
        left: 50%;
        transform: translate(-50%, -50%); /* Zentriere das Bild */
        width: 410px; /* Ändere die Breite nach Bedarf */
        height: auto; /* Automatische Höhe beibehalten */
        display: none; 
        
    }

    .container1:hover .text1 {
        -webkit-filter: blur(2px);
         filter: blur(2px);
         color: rgb(255, 0, 238)
    }
  
      
    .container1:hover .image1 {
        display: block;
    }


    

    .container2 {
        position: relative;
        display: inline-block;
    }
    
    /* Stil für den Text im Container */
    .text2 {
        display: inline;
        font-family: 'suisse';
        font-size: 17px;
        text-decoration: none;
        color: black;
    }
    
    /* Stil für das Bild im Container (standardmäßig ausgeblendet) */
    .image2 {
        position: fixed;
        top: 60%;
        left: 50%;
        transform: translate(-50%, -50%); /* Zentriere das Bild */
        width: 800px; /* Ändere die Breite nach Bedarf */
        height: auto; /* Automatische Höhe beibehalten */
        display: none; 
    }
    
    /* Hover-Effekt für den Text und das Bild */
    .container2:hover .text2 {
        -webkit-filter: blur(2px);
        filter: blur(2px);
        color: rgb(255, 0, 238);
    }
    
    .container2:hover .image2 {
        display: block;
    }

    .container3 {
        position: relative;
        display: inline-block;
    }
    
    /* Stil für den Text im Container */
    .text3 {
        display: inline;
        font-family: 'suisse';
        font-size: 17px;
        text-decoration: none;
        color: black;
    }
    
    /* Stil für das Bild im Container (standardmäßig ausgeblendet) */
    .image3 {
        position: fixed;
        top: 60%;
        left: 50%;
        transform: translate(-50%, -50%); /* Zentriere das Bild */
        width: 300px; /* Ändere die Breite nach Bedarf */
        height: auto; /* Automatische Höhe beibehalten */
        display: none; 
    }
    .image32 {
        position: fixed;
        top: 60%;
        left: 50%;
        transform: translate(-50%, -50%); /* Zentriere das Bild */
        width: 800px; /* Ändere die Breite nach Bedarf */
        height: auto; /* Automatische Höhe beibehalten */
        display: none; 
    }
    
    /* Hover-Effekt für den Text und das Bild */
    .container3:hover .text3 {
        -webkit-filter: blur(2px);
        filter: blur(2px);
        color: rgb(255, 0, 238);
    }
    .container3:hover .image3 {
        display: block;
    }

    .container3:hover .image32 {
        display: block;
    }
    .container4 {
        position: relative;
        display: inline-block;
    }
    
    /* Stil für den Text im Container */
    .text4 {
        display: inline;
        font-family: 'suisse';
        font-size: 17px;
        text-decoration: none;
        color: black;
    }
    
    /* Stil für das Bild im Container (standardmäßig ausgeblendet) */
    .image4 {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%); /* Zentriere das Bild */
        width: 200px; /* Ändere die Breite nach Bedarf */
        height: auto; /* Automatische Höhe beibehalten */
        display: none; 
    }
    
    /* Hover-Effekt für den Text und das Bild */
    .container4:hover .text4 {
        -webkit-filter: blur(2px);
        filter: blur(2px);
        color: rgb(255, 0, 238);
    }
    .container4:hover .image4 {
        display: block;
    }


    .pdf__link1-bild {
        display: none;
    }
    .pdf__link-bild {
        display: none;
    }

    

    .projektbilder_anordnungX__gross1 {
        width: 100%;
        margin-top: 40px;
        margin-bottom: -300px;

        
        
    } 
    .malin-bild {
        display: none;
    }
    .skizzen-bild {
        display: none;
    }

    .instu__link-bild {
        display: none;
    }

    .mails__link-bild {
        display: none;
    }
    .projektbilder_anordnungX {
        display: flex;
        justify-content: center; /* Zentriere die Elemente horizontal */
        align-items: center; /* Zentriere die Elemente vertikal */
         height: 100vh;
        
        
    }
    
    .projektbilder_anordnungX__links1 {
        width: 25%;
        padding-right: 50px;
    }

    .projektbilder_anordnungX__mitte2 {
        width: 25%;
        padding-left: 50px;
    }

    .projektbilder_anordnungXW {
        display: flex;
        justify-content: center; /* Zentriere die Elemente horizontal */
        align-items: center; /* Zentriere die Elemente vertikal */
        height: 100vh;
        margin-bottom: 8px;
        
        
    }
    
    .projektbilder_anordnungXW__links1 {
        width: 35%;
        padding-right: 80px;
    }

    .projektbilder_anordnungXW__mitte2 {
        width: 35%;
        padding-left: 80px;
    }

    

    .text__programme--smartphone {
        display: none;
    }

    .text__sprachen--smartphone {
        display: none;
    }

    .fliesstext__smartphone {
        display: none;
    }
     
    .projektbilder_anordnungX__gross1--sp {
        display: none;
    }


    
    



    
   
    body {
        transition: opacity 0.3s ease;
      }
      
      body.fade-out {
        opacity: 0;
      }

    * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }
      
      body, html {
        width: 100%;
        height: 100%;
        overflow: hidden;
        font-family: sans-serif;
      }
      
      /* Bühne */
      .stage {
        position: relative;
        width: 100%;
        height: 100vh;
        background: #fff;
      }
      
      /* Layer-Grundverhalten */
      .featured,
      .home-grid {
        position: absolute;
        inset: 0;
        
      }
      
      /* Sichtbarkeit */
      .visible {
        opacity: 1;
        pointer-events: auto;
        z-index: 2;
      }
      
      .invisible {
        opacity: 0.1;
        pointer-events: none;
        z-index: 1;
        filter: blur(0.5px);
      }
      
      .h-scroll {
        display: flex;
        align-items: flex-start;
        overflow-x: auto;
        overflow-y: hidden;
        gap: 24px;
        scrollbar-width: none;
        height: 100%; /* <--- ganze Höhe des Layers */
    }
      
      .h-scroll::-webkit-scrollbar {
        display: none;
      }
      
      .projektbilder_uebersicht {
        display: flex;
        gap: 1px;
      }
      
      .projektbilder_uebersicht .projekt img {
        height: 55vh;
        width: auto;
        display: block;
      }
      

      .projektbilder_uebersicht3 {
        display: flex;
        gap: 1px;
      }
      
      .projektbilder_uebersicht3 .projekt img {
        height: 55vh;
        width: auto;
        display: block;
      }
      
.mini.first img,
.mini.first video {
  max-height: none;
}
.mini.hidden img,
.mini.hidden video {
  max-height: 100%;
}

      /* --- Mini-Bilder vertikal scrollen --- */
      .home-grid {
        display: flex;
        flex-direction: column;
      }
      
      .mini-grid {
        display: flex;
        flex-direction: column;  /* mehrere Reihen untereinander */
        gap: 4px;               /* Abstand zwischen den Reihen */
        margin-top: 35px;
        overflow-y: auto; 
        margin-left: 4px;       /* vertikal scrollen */
        
      }
      
   .mini-row {
  display: flex;
  align-items: flex-start;
  gap: 4px;
}
      
      .mini img,
.mini video {
  width: 190px;
  height: auto;
  display: block;
}
      
      /* nur das erste Bild bleibt sichtbar */
      .mini.hidden {
        display: none;
      }
.mini {
  display: inline-block;
  vertical-align: top;
}

.mini img,
.mini video {
  width: 105px;
  height: auto;
}
      
      
      /* wenn NUR das erste Bild gehovert wird → zeige alle anderen */
      .mini.first:hover ~ .mini.hidden {
        display: inline-block;
      }

      .mini-row {
        display: flex;
        align-items: flex-start; /* Texte oben am Bild ausrichten */
        gap: 4px; /* Abstand zwischen Text und erstem Bild */
      }
      
      .art {
        min-width: 180px; /* gleich breite Textspalte */
        font-size: 13px;
        font-family: 'suisse', sans-serif;
        color: black;
        padding-left: 4px;
      }
      
      .artname {
        line-height: 1.4;
      }
      
     
       .mini video {
        max-width: 80px;
       }

      .mini img {
        max-width: 150px;   /* gleiche Größe wie Bilder */
        height: auto;
        display: block;
        object-fit: cover;  /* sorgt dafür, dass das Video wie ein Bild zugeschnitten wird */
      }

      .mail__link {
        font-size: 13px;
        font-family: 'suisse', sans-serif;
        color: rgb(0, 0, 0);
        
      }

      .insta__link {
        font-size: 13px;
        font-family: 'suisse', sans-serif;
        color: rgb(0, 0, 0);
        
      }


      .awards-btn {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        background: none;
        border: none;
        font-family: 'suisse';
        font-size: 13px;
        
        cursor: pointer;
        margin-bottom: 10px;
      }
      
      .awards-btn .plus {
        font-weight: normal;
      }
      
      .awards-content {
        margin-bottom: 15px;
        font-size: 13px;
        font-family: 'suisse';
      }
      
      .hidden {
        display: none;
      }
      .award {
        font-family: 'suisse';
        color: rgb(0, 0, 0);
    }
   

  /* Vollbild-Splash */
#splash {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: white;
    display: flex;
    justify-content: flex-start;  /* Text oben links */
    align-items: flex-start;
    padding: 10px;
    z-index: 9999;
    opacity: 1;
    transition: opacity 1.2s ease; /* Fade-out: 2 Sekunden */
  }
  
  #splash.hidden {
    opacity: 0;
    pointer-events: none;
  }
  
  /* Bild mittig */
  #splash .splash-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    height: auto;
  }

}