/* ========================================
   CUSTOM CURSOR (Eigener Mauszeiger)
   ======================================== */

/* Versteckt Standard-Cursor wenn Custom Cursor aktiv */
body:not(.custom-cursor-disabled) * {
  cursor: none !important;
}

/* ========================================
   BODY BASIS-EINSTELLUNGEN
   ======================================== */

body {
    margin:0;
   overflow: hidden;  /* Verhindert Scrollen der ganzen Seite */
   
}

/* ========================================
   SCHRIFTARTEN (Playfair Display)
   ======================================== */

/* Playfair Display font faces (local files in /playfair-display/) */
@font-face {
  font-family: 'Playfair Display';
  src: url('playfair-display/PlayfairDisplay-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Playfair Display';
  src: url('playfair-display/PlayfairDisplay-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Playfair Display';
  src: url('playfair-display/PlayfairDisplay-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* Use Playfair as the default site font */
body { font-family: 'Playfair Display', serif; }


/* ========================================
   CUSTOM CURSOR ELEMENTE (mit Goo-Filter)
   ======================================== */

/* Trail Container mit Goo-Filter */
#cursor-smear-container {
  position: fixed;
  left: 0; top: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 9999;
  filter: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='goo'%3E%3CfeGaussianBlur in='SourceGraphic' stdDeviation='3' result='blur'/%3E%3CfeColorMatrix in='blur' mode='matrix' values='1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 35 -15' result='goo'/%3E%3CfeComposite in='SourceGraphic' in2='goo' operator='atop'/%3E%3C/filter%3E%3C/svg%3E#goo");
  mix-blend-mode: difference;
}

/* Haupt-Cursor (Ring ohne Filter) */
#custom-cursor {
  position: fixed;
  left: 0; top: 0;
  width: 1.82vw;
  height: 1.82vw;
  border-radius: 50%;
  background: transparent;
  border: 0.3vw solid #f2e0d0;
  box-sizing: border-box;
  pointer-events: none;
  z-index: 10001;
  mix-blend-mode: difference;
  transition: border-width 0.15s ease-out;
}

/* Hover: Rahmen wird dicker */
#custom-cursor.cursor-hover {
  border-width: 0.5vw;
}

/* Custom-Cursor ausblenden wenn deaktiviert */
body.custom-cursor-disabled #custom-cursor,
body.custom-cursor-disabled #cursor-smear-container {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* System-Cursor als Fallback wiederherstellen */
body.custom-cursor-disabled {
  cursor: auto !important;
}

/* Smear-Effekt (einzelner Punkt, alt) */
#cursor-smear {
  position: fixed;
  left: 0; top: 0;
  width: 1.67vw;  /* Viewport-Einheiten - bleibt proportional */
  height: 1.67vw;  /* Viewport-Einheiten - bleibt proportional */
  border-radius: 50%;
  background: #f2e0d0;
  opacity: 1;
  mix-blend-mode: normal;
  pointer-events: none;
  z-index: 10001;
  transition: left 0.25s cubic-bezier(.5,1.8,.5,1), top 0.25s cubic-bezier(.5,1.8,.5,1);
}

/* Einzelne Smear-Punkte im Trail (Ink-Tropfen) */
.smear-dot {
  position: absolute;
  width: 1.82vw;
  height: 1.82vw;
  border-radius: 50%;
  background: #f2e0d0;
  pointer-events: none;
  transform: translate(-50%, -50%);
}


/* ========================================
   NAVIGATOR BUTTONS (Z-Index)
   ======================================== */

/* Stellt sicher dass alle Navigator Buttons über dem Content liegen */
.Navigator_Button,
.Navigator_Button_Animation,
.Navigator_Button_Illustration,
.Navigator_Button_Contact {
    z-index: 100;
}

/* ========================================
   PAPIER-TEXTUR OVERLAY
   ======================================== */

/* Textur-Overlay über der ganzen Seite für Papier-Effekt */
body::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: url('Footage/design-space-paper-textured-background.jpg') center/cover no-repeat;
    opacity: 1;
    mix-blend-mode: multiply;  /* Mischt sich mit Hintergrund */
    pointer-events: none;  /* Klicks gehen durch */
    z-index: 20;
}


/* ========================================
   PAGE CONTENT VISIBILITY LOGIC
   ======================================== */

/* About Content standardmäßig versteckt */
.About_Page_Content {
  display: none;
  pointer-events: none;
}

/* About Content sichtbar wenn PageGroup active */
.PageGroup_About.active .About_Page_Content {
  display: block;
  pointer-events: auto;
}

/* Animation Content standardmäßig keine Pointer Events */
.Animation_Page_Content {
 
  pointer-events: none !important;
}

/* Animation Content interaktiv wenn PageGroup active */
.PageGroup_Animation.active .Animation_Page_Content {
  display: flex !important;
  pointer-events: auto !important;
}


/* ========================================
   ABOUT SEITE
   ======================================== */

/*About Section------------------------------------------------------*/

/* PageGroup Container für About */
.PageGroup_About {
    position: absolute;
    top: 0;
    left: 0px;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    z-index: 1;
    transition-property: all;
    transition-duration: 0.5s;
    transition-timing-function: ease-in-out;
    

}
    /* Hintergrund der About-Seite (Gradient) */
    .Page_About {
        z-index: 1;
        height: 100vh;
        width: 100vw;
    background: linear-gradient(to right, #202026, #3C4959);

    }

    .Name {
        position: absolute;
        top: 1.04vw;  /* Weiter unten */
        left: calc(50% - 3.91vw);  /* Zentriert */
        transform: translateX(-50%);  /* Horizontal zentrieren */
        font-family: 'Playfair Display', serif;
        font-size: 1.25vw;  /* Viel größer */
        font-weight: 400; 
        letter-spacing: 0.05vw;
        color: #f2e0d0;  /* Cream */
        z-index: 1;  /* Über allem */
        text-align: center;
      }
        /* Scrollbarer Content-Bereich */
        .About_Page_Content {

             scrollbar-width: none;      /* Firefox: Scrollbar ausblenden */
             -ms-overflow-style: none;   /* IE/Edge: Scrollbar ausblenden */

            
             margin: 0;
            position: absolute;  /* Positionierung im Container */
            top: 5.21vw;  /* Abstand von oben */
            left: 3.96vw;  /* Abstand von links */
            height: calc(100vh - 7.81vw);  /* Höhe minus Margins */
            width: calc(100vw - 15.89vw);  /* Breite minus Margins */

            display: flex;
            flex-direction: column;  /* Untereinander */
            align-items: center;  /* Zentriert */
            justify-content: flex-start;  /* Von oben beginnend */
            padding: 0px 0px;

            border: dashed 0px #f2e0d0;
            overflow-y: auto;  /* Ermöglicht vertikales Scrollen */

            transition-property: all;
            transition-duration: 1s;
            transition-timing-function: ease-in-out;
        }
            /* Versteckt Scrollbar in Webkit-Browsern (Chrome, Safari) */
            .About_Page_Content::-webkit-scrollbar {
              width: 0;
              height: 0;
            }

            /* ---- About Seite: Header Video ---- */
            .About_Header_Video {
              margin-top: 0;
                mix-blend-mode: screen;  /* Blend-Mode für Leuchten auf dunklem Hintergrund */
                width: calc(100vw - 15.89vw);
                height: auto;
                display: block;
                margin: 20 auto;
            }

            /* ---- About Seite: Textbox (Cream-farbener Bereich) ---- */
            .About_Body {

                display:flex;
                flex-direction: column;
                text-align: center;
                align-items: center;
                align-self: center;
               
                
                
                z-index: 1;
                position: relative;             
                top: 0;
                margin-top: 0;  /* Überlappung mit Header Video */
                min-height: 41.15vw;
                width: 100%;
                content: '';
                background-color: #f2e0d0;  /* Cream */
                border-top-left-radius: 50vw;  /* Oben links abgerundet */
                border-top-right-radius: 50vw;  /* Oben rechts abgerundet */
                border-bottom-left-radius: 1.04vw;  /* Unten links leicht abgerundet */
                border-bottom-right-radius: 1.04vw;  /* Unten rechts leicht abgerundet */

            }

            /* ---- About Text (Beschreibung) ---- */
            .About_Body_Text {
                width: 90%;  /* Relativ zur Container-Breite */
                max-width: 46.88vw;  /* Maximale Breite für große Bildschirme */
                

                font-family: 'Playfair Display', serif;  /* Serif Schrift für eleganten Look */
                font-size: 1.82vw;
                font-weight: lighter;
                letter-spacing: 0.05vw;
                color: #202026;  /* Dunkle Schrift */

                padding: 3.13vw 0 0 0;
                line-height: 1.0;  /* Enger Zeilenabstand */
                text-align: justify;
                text-align-last: center;

                z-index: 3;
                position: relative;             
                top: 0;
                margin: 1.3vw auto 0 auto;
                
            }

            /* ---- Kontakt Button ---- */
            .About_Contact_Button {
                margin-top: 0.52vw;
                padding: 0.78vw 2.08vw;
                font-family: 'montserrat', sans-serif;  /* Sans-Serif für Buttons */
                font-size: 0.94vw;
                font-weight: 500;
                letter-spacing: 0.05vw;
                color: #f2e0d0;  /* Cream Text */
                background: #3C4959;  /* Blau-Grau Hintergrund */
                border: 0.1vw solid #3C4959;
                border-radius: 0.42vw;
                cursor: pointer;
                transition: all 0.3s ease;
                z-index: 3;
                position: relative;
            }

            /* Button Hover-Effekt: Transparent mit Outline */
            .About_Contact_Button:hover {
                background: transparent;
                color: #3C4959;
                border-color: #3C4959;
                transform: translateY(-0.1vw);  /* Hebt sich leicht an */
                box-shadow: 0 0.21vw 0.63vw rgba(60, 73, 89, 0.3);  /* Schatten */
            }

            /* ---- Scroll Down Pfeil ---- */
            .Scroll_Down_Arrow {

                transform-origin: center;  /* Rotation um Mittelpunkt */
                height: 1.04vw;
                position: fixed;  /* Fixiert am Bildschirm */
                bottom: 0.8vw;  /* Etwas höher */
                left: 46.8%;  /* Perfekt zentriert */
                transform: translateX(-50%);  /* Horizontal zentriert */
                scale: 2;
                z-index: 1;  /* Unter Animation Page (z-index: 2) */
                filter: brightness(0) saturate(100%) invert(91%) sepia(10%) saturate(479%) hue-rotate(335deg) brightness(103%) contrast(93%);  /* Cream-Farbe */
               

                transition-property: all;
                transition-duration: 0.3s;
                transition-timing-function: ease-in-out;
            }

            /* Pfeil dreht sich um 180° wenn .rotated Klasse aktiv */
            .Scroll_Down_Arrow.rotated {
                transform: translateX(-50%) rotate(180deg);
                transition: transform 0.3s;
        }

                /* Pfeil wird größer und transparent bei Hover */
                .Scroll_Down_Arrow:hover {
                    cursor: pointer;
                    scale: 2.5;
                    opacity: 20%;
                
                }

            /* ---- Portrait Bild ---- */
            .About_Portrait {
                width: min(20.83vw, 40%);  /* Maximal 400px oder 40% der Container-Breite */
                transform-origin: center;
                height: auto;  /* Automatische Höhe für Aspect Ratio */
                aspect-ratio: 1 / 1;  /* Bleibt quadratisch */
                position: relative;
                top: 2.86vw;  /* Positionierung im Textbereich */
                left: 0;
                scale:1;

                z-index: 2;
                margin: 0;

                display: block
                
            }

            


                /* Chrome/Safari: Scrollbar verstecken */
                .About_Page_Content::-webkit-scrollbar {
                    display: none;
                }


/* ========================================
   NAVIGATOR BUTTON (Linkes Menü)
   ======================================== */

    .Navigator_Button {
        display: flex;
        align-items: center;  /* Zentriert */
        justify-content: center;
        writing-mode: vertical-rl;  /* Text vertikal von rechts nach links */
        text-orientation: upright;  /* Buchstaben aufrecht */

  font-family: 'montserrat', sans-serif;
        font-size: 1.56vw;  /* Viewport-Einheiten - Schrift wird beim Zoom kleiner */
        font-weight: lighter;
        letter-spacing: 0.1vw;  /* Viewport-Einheiten - Schrift wird beim Zoom kleiner */
    

        opacity: 0.5;  /* Leicht transparent */

        position: fixed ;  /* Bleibt fixiert bei Scroll */
        height: 100vh;  /* Volle Höhe */
        width: 3.96vw;  /* Feste Breite - skaliert proportional */
        bottom: 0;
        left: 0;
        padding: 0 1.04vw;
        box-sizing: border-box;  /* Padding in Breite eingerechnet */
        background-color: none;
        color: #f2e0d0;  /* Cream Text */
        border-radius: 0;
        outline: #f2e0d0 0 solid;  /* Keine Outline standardmäßig */

        cursor: pointer;
      

        transition-property: all;
        transition-duration: 0.3s;
        transition-timing-function: ease-in-out;

    }
        /* Navigator Button Hover: Outline und mehr Letter Spacing */
        .Navigator_Button:hover  {
            display: flex;
            align-items: center;
            justify-content: center;
            writing-mode: vertical-rl;
            text-orientation: upright;

            font-family: 'montserrat', sans-serif;
            font-size: 1.56vw;  /* Viewport-Einheiten - Schrift wird beim Zoom kleiner */
            font-weight: lighter;
            letter-spacing: 1.04vw;  /* Viewport-Einheiten - Schrift wird beim Zoom kleiner */

            opacity: 1;  /* Voll sichtbar */

            position: fixed ;
            height: 100vh;
            width: 3.96vw;  /* Feste Breite - skaliert proportional */
            bottom: 0;
            left: 0;
            padding: 0.52vw 1.04vw;
            box-sizing: border-box;  /* Padding in Breite eingerechnet */
            background-color: none;
            color: #f2e0d0;
            border-radius: 0;
            outline: #f2e0d0 0.05vw solid;  /* Outline erscheint */

            cursor: pointer;
       
            
        }


/* ========================================
   ANIMATION SEITE
   ======================================== */

/*Animation Section------------------------------------------------------*/



/* PageGroup Container für Animation */
.PageGroup_Animation {
    position: absolute;
    top: 0;
    left: 3.96vw;  /* Viewport-Einheiten - bleibt proportional (76px) */
    height: 100vh;
    width: 100vw;
    overflow: visible;  /* Content kann überlaufen (für Modals) */
    z-index: 2;
    transition-property: all;
    transition-duration: 1s;
    transition-timing-function: ease-in-out;

}



/* Animation Content Bereich (Video Grid) */
.Animation_Page_Content {
    position: absolute;
    top: 5.21vw;  /* Abstand von oben */
    left: 3.91vw;  /* Abstand von links */
    height: calc(100vh - 7.81vw);  /* Höhe minus Margins */
    width: calc(100vw - 15.89vw);  /* Breite minus Margins */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 0;
    border: dashed 0 #f2e0d0;
    overflow-y: auto;  /* Scrollbar bei viel Content */
    background: transparent;
    z-index: 10;
      scrollbar-width: none;  /* Firefox: Scrollbar versteckt */
  -ms-overflow-style: none;  /* IE/Edge: Scrollbar versteckt */
}


/* Wenn Animation Seite aktiv: Pointer Events aktivieren */
.PageGroup_Animation.Animation_left .Animation_Page_Content,
.PageGroup_Animation.Animation_left .Page_Animation {
    pointer-events: auto;  /* Klicks gehen durch */
}

/* Pseudo-Element für linken Bereich */
.PageGroup_Animation.Animation_left .Animation_Page_Content::before,
.PageGroup_Animation.Animation_left .Page_Animation::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 3.96vw;  /* Breite der Navigator Buttons */
    height: 100vh;
    pointer-events: none;  /* Klicks gehen durch */
    background: transparent;
    z-index: 20;
}






    /* Animation Seite nach lincalc(ks ges / 2)2.56.2500.7651
        vwpxchoben (aktiv) */
    .Animation_left {
        left: 0;
        pointer-events: auto;  /* Interaktiv */
     
    }

    /* Animation Seite nach rechts geschoben (inaktiv) */
    .Animation_right {
        left: calc(100vw - 15.63vw);  /* Fast außerhalb des Screens */
        pointer-events: none;  /* Nicht klickbar */
    }

    /* Hintergrund der Animation Seite */
    .Page_Animation {

        overflow: auto;  /* Scrollbar bei viel Content */
        position: absolute;
        top: 0;
        left: 3.96vw;  /* Platz für Navigator Button */
        height: 100vh;
        width: calc(100vw - 3.96vw);  /* Breite minus Navigator */
        background: linear-gradient(to right, #3C4959, #A69581);  /* Blau-Grau zu Tan */
        z-index: 3;
    }   


    

    /* ---- Navigator Button für Animation (zweiter von links) ---- */
    .Navigator_Button_Animation {
        pointer-events: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        writing-mode: vertical-rl;  /* Vertikal */
        text-orientation: upright;

  font-family: 'montserrat', sans-serif;
        font-size: 1.56vw;  /* Viewport-Einheiten - Schrift wird beim Zoom kleiner */
        font-weight: lighter;
        letter-spacing: 0.1vw;  /* Viewport-Einheiten - Schrift wird beim Zoom kleiner */

        opacity: 0.5;  /* Leicht transparent */

        position: absolute;  /* Positioniert nach dem About Button */
        height: 100vh;
        width: 3.96vw;  /* Feste Breite - skaliert proportional */
        bottom: 0;
        left: 3.96vw;
        padding: 0 1.04vw;
        box-sizing: border-box;  /* Padding in Breite eingerechnet */
        background-color: none;
        color: #f2e0d0;
        border-radius: 0;
        outline: #f2e0d0 0 solid;

        cursor: pointer;
      

        transition-property: all;
        transition-duration: 0.3s;
        transition-timing-function: ease-in-out;

    }

        /* Animation Button Hover */
        .Navigator_Button_Animation:hover  {
            display: flex;
            align-items: center;
            justify-content: center;
            writing-mode: vertical-rl;
            text-orientation: upright;

            font-family: 'montserrat', sans-serif;
            font-size: 1.56vw;  /* Viewport-Einheiten - Schrift wird beim Zoom kleiner */
            font-weight: lighter;
            letter-spacing: 1.04vw;  /* Viewport-Einheiten - Schrift wird beim Zoom kleiner */

            opacity: 1;

            position: absolute;
            height: 100vh;
            width: 3.96vw;  /* Feste Breite - skaliert proportional */
            bottom: 0;
            left: 3.96vw;
            padding: 0 1.04vw;
            box-sizing: border-box;  /* Padding in Breite eingerechnet */
            background-color: none;
            color: #f2e0d0;
            border-radius: 0;
            outline: #f2e0d0 0.05vw solid;  /* Outline erscheint */

            cursor: pointer;
        
        }

/* ---- Overlay für Animation Seite (leicht dunkler Bereich über About Button) ---- */
.Animation_Overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 3.96vw;  /* Breite des About Buttons */
  height: 100vh;
  background: rgba(60, 73, 89, 0.122);  /* Leicht transparent */
  pointer-events: none;  /* Klicks gehen durch */
  z-index: 15;
  opacity: 0;  /* Standardmäßig unsichtbar */
  transition: opacity 0.5s;
}

/* Overlay wird sichtbar wenn Animation Seite aktiv */
.PageGroup_Animation.Animation_left .Animation_Overlay {
  opacity: 1;
}



/* ---- Video Mediathek Container ---- */
.Animation_Mediathek {
  display: flex;
  flex-direction: column;  /* Untereinander */
  align-items: center;  /* Zentriert */
  gap: 2vw;  /* Viewport-Einheiten - bleibt proportional */
  width: 85%;  /* Kleinere Breite */
  margin-top: 0;
  margin-left: auto;
  margin-right: 5%;  /* Rechterer Abstand */
}

/* ---- Showreel Container (erstes großes Video) ---- */
.Showreel_Container {
  width: 80%;
  margin-bottom: 2vw;  /* Viewport-Einheiten - bleibt proportional */
  border-radius: 0.94vw;  /* Abgerundete Ecken */
  overflow: hidden;  /* Schneidet überstehenden Content ab */
  box-shadow: 0 0.21vw 1.25vw rgba(60,73,89,0.08);  /* Leichter Schatten */
  transition: transform 0.3s;
  margin-left: 8%;
}

/* Showreel vergrößert sich bei Hover */
.Showreel_Container:hover {
  transform: scale(1.04);  /* 4% größer */
  z-index: 2;
}

/* Thumbnails für Showreel und Bentobox Videos */
.Showreel_Container img,
.Bentobox_Thumb img {
  width: 100%;
  height: auto;  /* Bild passt sich dem Format an */
  display: block;
  object-fit: contain;  /* Zeigt das ganze Bild ohne Beschneiden */
  background: #f2e0d0;  /* Cream Hintergrund */
}

/* ---- Bentobox Grid (weitere Videos in 3 Spalten) ---- */
.Bentobox_Grid {
  margin-left: 12%;  /* Mehr Abstand von links */
  margin-right: auto;
  column-count: 3;  /* Drei Spalten (Masonry Layout) */
  column-gap: 1.5vw;  /* Viewport-Einheiten - bleibt proportional */
  width: 85%;  /* Größere Breite */
}

/* Einzelnes Video Thumbnail im Grid */
.Bentobox_Thumb {
    position:relative;
  display: inline-block;  /* Damit sie in den Columns fließen */
  width: 100%;
  margin-bottom: 1.5vw;  /* Viewport-Einheiten - bleibt proportional */
  border-radius: 0.73vw;
  overflow: hidden;
  box-shadow: 0 0.1vw 0.63vw rgba(60,73,89,0.06);
  background: #fff2e6;  /* Helles Cream */
  transition:transform 0.3s;
 
}

/* Thumbnail vergrößert sich bei Hover */
.Bentobox_Thumb:hover {
  transform: scale(1.08);  /* 8% größer */
  z-index: 2;
}

/* "More To Come" Platzhalter */
.Bentobox_MoreToCome {
  display: inline-block;
  width: 100%;
  margin-bottom: 1.5vw;  /* Viewport-Einheiten - bleibt proportional */
  border-radius: 0.73vw;
  background: none;
  padding: 0.67vw 0.25vw;  /* Viewport-Einheiten - bleibt proportional */
  text-align: center;
  font-family: 'playfair display', serif;
  font-size: 2.5vw;  /* Viewport-Einheiten - bleibt proportional */
  font-weight: 400;
  letter-spacing: 0.03em;  /* Skaliert mit Schrift */
  color:#3c4959;  /* Blau-Grau */
  box-shadow: 0 0.1vw 0.63vw #3c49591f;
  outline: 0.1vw solid #3c4959;  /* Dünnere Outline */
  box-sizing: border-box;
  vertical-align: top;
  overflow: hidden;  /* Verhindert Überstehen */
  line-height: 1.2;  /* Kompaktere Zeilenhöhe */
}




/* Thumbnail Bilder */
.Bentobox_Thumb img {
  width: 100%;
   height: auto;
  display: block;
  object-fit: contain;
  margin: 0;
  padding: 0;

}




/* Hover-Effekt: Video Beschreibung erscheint */
.Animation_Video_Thumb:hover .Animation_Video_Description,
.Bentobox_Thumb:hover .Animation_Video_Description {
  opacity: 1;
  pointer-events: auto;
}


/* Alternative Video Thumbnail Klasse (älter, nicht verwendet?) */
.Animation_Video_Thumb {
  position: relative;
  width: 80vw;
  max-width: 46.88vw;
  margin-bottom: 1.25vw;
  cursor: pointer;
  transition: transform 0.3s;
  overflow: hidden;
  border-radius: 0.94vw;
  box-shadow: 0 0.21vw 1.25vw rgba(60,73,89,0.08);
}

/* Video Beschreibung versteckt */
.Animation_Video_Description {
  display: none !important;
}




/* Versteckt Fullscreen Button im Video Player */
video::-webkit-media-controls-fullscreen-button {
  display: none !important;
}






/* ========================================
   ILLUSTRATION SEITE
   ======================================== */

/*Illustration Section------------------------------------------------------*/

/* Illustration Content ist NICHT interaktiv wenn Seite nicht aktiv */
.PageGroup_Illustration:not(.active) .Page_Illustration,
.PageGroup_Illustration:not(.active) .Illustration_Grid,
.PageGroup_Illustration:not(.active) .Illustration_Thumb,
.PageGroup_Illustration:not(.active) .Multi_Thumb_Row {
  pointer-events: none !important;  /* Keine Klicks */
  user-select: none !important;  /* Kein Text selektieren */

}

/* Illustration Content ist interaktiv wenn Seite aktiv */
.PageGroup_Illustration.active .Page_Illustration,
.PageGroup_Illustration.active .Illustration_Grid,
.PageGroup_Illustration.active .Illustration_Thumb,
.PageGroup_Illustration.active .Multi_Thumb_Row {
  pointer-events: auto !important;  /* Klicks funktionieren */
  user-select: auto !important;
 
}

/* Illustration Content Bereich */
.Illustration_Page_Content {
  position: absolute;
  top: 5.21vw;  /* Abstand von oben */
  left: 4.48vw;  /* Platz für zwei Navigator Buttons */
  height: calc(100vh - 7.81vw);
  width: calc(100vw - 12.34vw);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  overflow-y: auto;  /* Scrollbar bei viel Content */
  background: transparent;
  z-index: 10;
}



/* PageGroup Container für Illustration */
.PageGroup_Illustration {
    position: absolute;
    top: 0;
    left: 7.92vw;  /* Viewport-Einheiten - bleibt proportional (152px) */
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    z-index: 3;
    transition-property: all;
    transition-duration: 1s;
    transition-timing-function: ease-in-out;

}



/* Wenn Illustration Seite aktiv: Pointer Events aktivieren */
.PageGroup_Illustration.Illustration_left .Page_Illustration,
.PageGroup_Illustration.Illustration_left .Illustration_Grid {
  pointer-events: auto;
}

        /* Illustration nach rechts geschoben (inaktiv) */
        .Illustration_right {
            left: calc(100vw - 15.63vw);
            pointer-events: none;
        }

        /* Illustration nach links geschoben (aktiv) */
        .Illustration_left {
        left: 0;
        pointer-events: none; }

    /* Hintergrund der Illustration Seite */
    .Page_Illustration {

        overflow-y: auto;  /* Scrollbar */
        position: absolute;
        top: 0;
        left: 7.87vw;  /* Platz für zwei Navigator Buttons */
        height: 100vh;
        width: calc(100vw - 7.87vw);
        background: linear-gradient(to right, #A69581, #f2e0d0);  /* Tan zu Cream */
        z-index: 3;
    } 


    
        /* Overlay für Illustration Seite (über Navigator Buttons) */
        .Illustration_Overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 7.87vw;  /* Breite der ersten beiden Buttons */
      height: 100vh;
      background: rgba(60,73,89,0.00);  /* Transparent */
      pointer-events: none;  /* Klicks gehen durch */
      z-index: 15;
      opacity: 0;
      transition: opacity 0.5s;
    }
    
    /* Overlay wird sichtbar wenn Illustration aktiv */
    .PageGroup_Illustration.Illustration_left .Illustration_Overlay {
      opacity: 1;
    }

/* Optimierung für Illustration Thumbs (Hardware-Beschleunigung) */
.Illustration_Thumb,
.Multi_Thumb_Row {
  will-change: transform;  /* Browser bereitet Transform-Änderungen vor */
}

/* ---- Illustration Grid (Masonry Layout) ---- */
.Illustration_Grid {
 
  margin-top: 2.5vw;  /* Viewport-Einheiten - bleibt proportional */
  margin-left: 8%;  /* Mehr Abstand von links */
  margin-right: auto;
  column-count: 3;  /* Drei Spalten wie Bentobox */
  column-gap: 0.25vw;  /* Viewport-Einheiten - bleibt proportional */
  width: 85%;  /* Kleinere Breite */
}

/* Einzelnes Illustration Thumbnail */
.Illustration_Thumb {
  position: relative;
  display: inline-block;  /* Fließt in Columns */
  width: 100%;
  margin-bottom: 0.25vw;  /* Viewport-Einheiten - bleibt proportional */
  border-radius: 0;  /* Keine abgerundeten Ecken */
  overflow: hidden;
  box-shadow: 0 0.1vw 0.63vw rgba(60,73,89,0.6);  /* Stärkerer Schatten als Videos */
  background: #fff2e6;  /* Helles Cream */
  transition: transform 0.3s;
}

/* Illustration Thumb vergrößert sich bei Hover */
.Illustration_Thumb:hover {
  transform: scale(1.08);
  z-index: 2;
}

/* Illustration Bild */
.Illustration_Thumb img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  margin: 0;
  padding: 0;
}


/* ---- Multi Thumb Container (für mehrere kleine Bilder nebeneinander) ---- */
.Multi_Thumb_Container {
  display: flex;
  gap: 0.42vw;  /* Viewport-Einheiten - bleibt proportional */
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  padding: 0.42vw;  /* Viewport-Einheiten - bleibt proportional */
}



/* Kleine Thumbnails im Multi Container */
.Multi_Thumb_Container img {
  width: 5vw;  /* Viewport-Einheiten - bleibt proportional */
  height: auto;
  border-radius: 0;
  object-fit: contain;
  box-shadow: 0 0.1vw 0.42vw rgba(60,73,89,0.5);
  background: #fff2e6;
    transition: transform 0.2s cubic-bezier(.5,1.8,.5,1);  /* Bounce-Effekt */
}

/* ---- Multi Thumb Row (2 Bilder nebeneinander in einer Zeile) ---- */
.Multi_Thumb_Row {
  display: flex;
  gap: 0;  /* Kein Abstand zwischen Bildern */
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  Margin-top: 0.63vw;  /* Viewport-Einheiten - bleibt proportional */
  margin-bottom: 0.63vw;  /* Viewport-Einheiten - bleibt proportional */
  background: #fff2e6;  /* Hintergrund für die ganze Zeile */
  border-radius: 0;
}

/* Bilder in Multi Thumb Row (jeweils 48% Breite) */
.Multi_Thumb_Row img {
  width: 48%;  /* Zwei Bilder nebeneinander */
  height: auto;
  border-radius: 0;
  object-fit: contain;
  box-shadow: 0 0.1vw 0.42vw rgba(60,73,89,0.06);
  background: none;
  transition: transform 0.2s;
  margin: 0;
  padding: 0;
}

/* Hover-Effekt für Multi Row Bilder */
.Multi_Thumb_Row img:hover {
  transform: scale(1.08);
  z-index: 2;
}

/* Hover-Effekt für Multi Container Bilder */
.Multi_Thumb_Container img:hover {
  transform: scale(1.08);
  z-index: 2;
}

    /* ---- Navigator Button für Illustration (dritter von links) ---- */
    .Navigator_Button_Illustration {
        pointer-events: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        writing-mode: vertical-rl;  /* Vertikal */
        text-orientation: upright;

  font-family: 'montserrat', sans-serif;
        font-size: 1.56vw;  /* Viewport-Einheiten - Schrift wird beim Zoom kleiner */
        font-weight: lighter;
        letter-spacing: 0.1vw;  /* Viewport-Einheiten - Schrift wird beim Zoom kleiner */

        opacity: 0.5;

        position: absolute ;
        height: 100vh;
        width: 3.96vw;  /* Feste Breite - skaliert proportional */
        bottom: 0;
        left: 7.92vw;
        padding: 0 1.04vw;
        box-sizing: border-box;  /* Padding in Breite eingerechnet */
        background-color: none;
        color: #f2e0d0;
        border-radius: 0;
        outline: #f2e0d0 0 solid;

        cursor: pointer;
      

        transition-property: all;
        transition-duration: 0.3s;
        transition-timing-function: ease-in-out;

    }

        /* Illustration Button Hover */
        .Navigator_Button_Illustration:hover  {
            display: flex;
            align-items: center;
            justify-content: center;
            writing-mode: vertical-rl;
            text-orientation: upright;

            font-family: 'montserrat', sans-serif;
            font-size: 1.56vw;  /* Viewport-Einheiten - Schrift wird beim Zoom kleiner */
            font-weight: lighter;
            letter-spacing: 1.04vw;  /* Viewport-Einheiten - Schrift wird beim Zoom kleiner */

            opacity: 1;

            position: fixedabsolute ;
            height: 100vh;
            width: 3.96vw;  /* Feste Breite - skaliert proportional */
            bottom: 0;
            left: 7.92vw;
            padding: 0 1.04vw;
            box-sizing: border-box;  /* Padding in Breite eingerechnet */
            background-color: none;
            color: #f2e0d0;
            border-radius: 0;
            outline: #f2e0d0 0.05vw solid;  /* Outline erscheint */

            cursor: pointer;
      
        }


  

/* ========================================
   CONTACT SEITE (Kontaktformular)
   ======================================== */

/*Contact Section------------------------------------------------------*/

/* PageGroup Container für Contact */
.PageGroup_Contact {
    position: absolute;
    top: 0;
    left: 11.82vw;  /* Platz für drei Navigator Buttons */
    height: 100vh;
    width: 100vw;
    overflow: auto;  /* Scrollbar wenn Content größer */
    scrollbar-width: none;  /* Firefox: Scrollbar verstecken */
    -ms-overflow-style: none;  /* IE/Edge: Scrollbar verstecken */
    z-index:4;
    transition-property: all;
    transition-duration: 1s;
    transition-timing-function: ease-in-out;

}

/* Chrome/Safari: Scrollbar verstecken */
.PageGroup_Contact::-webkit-scrollbar {
    display: none;
}

        /* Contact nach rechts geschoben (inaktiv) */
        .Contact_right {
            left: calc(100vw - 15.63vw);
            pointer-events: none;
        }

        /* Contact nach links geschoben (aktiv) */
        .Contact_left {
            left: 0;
            pointer-events: none;
        }

    /* Hintergrund der Contact Seite */
    .Page_Contact {

        overflow: auto;  /* Scrollbar wenn Content größer */
        scrollbar-width: none;  /* Firefox: Scrollbar verstecken */
        -ms-overflow-style: none;  /* IE/Edge: Scrollbar verstecken */
        position: absolute;
        top: 0;
        left: 11.82vw;  /* Platz für drei Navigator Buttons */
        height: 100vh;
        width: calc(100vw - 11.82vw);
        background: linear-gradient(to right, #f2e0d0, #59443f);  /* Cream zu Braun */
        z-index: 3;
    }

    /* Chrome/Safari: Scrollbar verstecken */
    .Page_Contact::-webkit-scrollbar {
        display: none;
    }

/* ---- Kontaktformular Container ---- */
.Contact_Form_Container {
  position: relative;  /* Scrollt mit der Seite */
  width: 52vw;  /* Viewport-Einheiten - bleibt proportional */
  margin: 9.4vh auto 5vh auto;  /* Viewport-Einheiten - bleibt proportional */
  margin-left: 13%;
  padding: 1.67vw 1.25vw;  /* Viewport-Einheiten - bleibt proportional */
  background: #fff2e6;  /* Helles Cream */
  border-radius: 0.83vw;  /* Viewport-Einheiten - bleibt proportional */
  box-shadow: 0 0.1vw 0.83vw rgba(60,73,89,0.08);  /* Viewport-Einheiten */
  font-family: 'Playfair Display', serif;
  pointer-events: auto;
}

/* Intro Text über dem Formular */
.Contact_Form_Intro {
  font-size: 1vw;  /* Viewport-Einheiten - bleibt proportional */
  margin-bottom: 1.25vw;  /* Viewport-Einheiten - bleibt proportional */
  color: #3C4959;  /* Blau-Grau */
  text-align: center;
}

/* Formular Labels (Name, Email, etc.) */
.Contact_Form label {
  display: block;
  margin-top: 0.83vw;  /* Viewport-Einheiten - bleibt proportional */
  margin-bottom: 0.31vw;  /* Viewport-Einheiten - bleibt proportional */
  font-size: 0.83vw;  /* Viewport-Einheiten - bleibt proportional */
  color: #59443f;  /* Braun */
}

/* Formular Eingabefelder */
.Contact_Form input,
.Contact_Form textarea {
  width: 100%;
  padding: 0.52vw 0.63vw;  /* Viewport-Einheiten - bleibt proportional */
  border: 1px solid #A69581;  /* Tan Border */
  border-radius: 0.42vw;  /* Viewport-Einheiten - bleibt proportional */
  font-size: 0.83vw;  /* Viewport-Einheiten - bleibt proportional */
  margin-bottom: 0.63vw;  /* Viewport-Einheiten - bleibt proportional */
  background: #fff;  /* Weiß */
  color: #202026;  /* Dunkel */
  font-family: inherit;
  box-sizing: border-box;
}

/* Submit Button */
.Contact_Form_Button {
  width: 100%;
  padding: 0.63vw;  /* Viewport-Einheiten - bleibt proportional */
  background: #A69581;  /* Tan */
  color: #fff;
  border: none;
  border-radius: 0.42vw;  /* Viewport-Einheiten - bleibt proportional */
  font-size: 0.9vw;  /* Viewport-Einheiten - bleibt proportional */
  font-family: inherit;
  cursor: pointer;
  margin-top: 0.63vw;  /* Viewport-Einheiten - bleibt proportional */
  transition: background 0.2s;
}

/* Submit Button Hover */
.Contact_Form_Button:hover {
  background: #3C4959;  /* Blau-Grau */
}

/* ========== SOCIAL MEDIA LINKS (Instagram, LinkedIn) ========== */
/* Social Links Container */
.Social_Links {
  display: flex;
  gap: 1.04vw;  /* Viewport-Einheiten - bleibt proportional */
  justify-content: center;
  align-items: center;
  margin-top: 1.25vw;  /* Viewport-Einheiten - bleibt proportional */
  margin-bottom: 0.83vw;  /* Viewport-Einheiten - bleibt proportional */
}

/* Social Icon Styling */
.Social_Icon {
  width: 1.67vw;  /* Viewport-Einheiten - bleibt proportional */
  height: 1.67vw;  /* Viewport-Einheiten - bleibt proportional */
  transition: opacity 0.3s ease, transform 0.3s ease;
  filter: brightness(0) saturate(100%) invert(27%) sepia(13%) saturate(925%) hue-rotate(342deg) brightness(95%) contrast(89%);
  /* Filter macht Icons braun (#59443f) */
}

/* Social Icon Hover */
.Social_Links a:hover .Social_Icon {
  opacity: 0.7;
  transform: scale(1.1);
}

/* ---- Legal Links (Impressum, Datenschutz) ---- */
.Legal_Links {
  margin-top: 1.04vw;
  text-align: center;
  font-size: 0.73vw;
  font-family: 'montserrat', sans-serif;
}

/* Legal Link Styling */
.Legal_Links a {
  color: #59443f;  /* Braun */
  text-decoration: none;
  transition: opacity 0.3s;
}

/* Legal Link Hover */
.Legal_Links a:hover {
  opacity: 0.7;  /* Leicht transparent */
}


/* ========================================
   LEGAL MODAL (Impressum / Datenschutz)
   ======================================== */

/* Legal Modal */
.LegalModal {
  position: fixed;
  left: 0; top: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;  /* Über allem */
  display: none;  /* Standardmäßig versteckt */
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;  /* Nicht klickbar wenn geschlossen */
  transition: opacity 0.3s ease;
}

/* Legal Modal geöffnet */
.LegalModal.open {
  display: flex;
  opacity: 1;
  pointer-events: auto;  /* Klickbar */
}

/* Legal Modal Backdrop (dunkler Hintergrund) */
.LegalModal_Backdrop {
  position: absolute;
  left: 0; top: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(32, 32, 38, 0.85);  /* Dunkel transparent */
  backdrop-filter: blur(8px);  /* Blur-Effekt */
  z-index: 1;
}

/* Legal Modal Content Box */
.LegalModal_Content {
  position: relative;
  background: #f2e0d0;  /* Cream */
  border-radius: 0.94vw;
  box-shadow: 0 0.42vw 1.67vw rgba(60,73,89,0.3);
  padding: 2.08vw;
  max-width: 83vw;
  max-height: 80vh;
  overflow-y: auto;
  z-index: 2;
  color: #202026;
}

/* Close Button (X oben rechts) */
.LegalModal_Close {
  position: absolute;
  top: 0.78vw;
  right: 1.04vw;
  background: transparent;
  border: none;
  font-size: 2.08vw;
  color: #59443f;
  cursor: pointer;
  line-height: 1;
  transition: opacity 0.3s;
}

/* Close Button Hover */
.LegalModal_Close:hover {
  opacity: 0.7;
}

/* Legal Modal Text Content */
.LegalModal_Body {
  font-family: 'Playfair Display', serif;
  font-size: 0.83vw;
  line-height: 1.6;
}

/* Überschriften in Legal Modal */
.LegalModal_Body h2 {
  font-size: 1.46vw;
  margin-bottom: 1.04vw;
  color: #59443f;
}

.LegalModal_Body h3 {
  font-size: 1.04vw;
  margin-top: 1.3vw;
  margin-bottom: 0.52vw;
  color: #3C4959;
}

/* Absätze in Legal Modal */
.LegalModal_Body p {
  margin-bottom: 0.78vw;
}


/* ========================================
   LOADING SCREEN (Video-Animation beim Laden)
   ======================================== */

/* Loading Screen - Dunkler Gradient-Hintergrund */
.LoadingScreen {
  position: fixed;
  left: 0; top: 0;
  width: 100vw;
  height: 100vh;
  background: linear-gradient(to right, #202026, #3C4959);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: opacity 0.8s ease;
  pointer-events: none;
}

/* Loading Screen versteckt */
.LoadingScreen.hidden {
  opacity: 0;
  pointer-events: none;
}

/* Loading Video */
.LoadingScreen_Video {
  width: auto;
  height: 25vh;
  object-fit: contain;
}

/* Content während Laden versteckt */
body.is-loading .Page,
body.is-loading .Navigator,
body.is-loading .Navigator_Button,
body.is-loading #headline-banner,
body.is-loading .custom-cursor,
body.is-loading #cursor-smear-container {
  opacity: 0;
}

/* Content nach Laden sichtbar */
body:not(.is-loading) .Page,
body:not(.is-loading) .Navigator,
body:not(.is-loading) .Navigator_Button,
body:not(.is-loading) #headline-banner,
body:not(.is-loading) .custom-cursor,
body:not(.is-loading) #cursor-smear-container {
  opacity: 1;
  transition: opacity 0.5s ease 0.1s;
}


    /* ---- Navigator Button für Contact (vierter von links) ---- */
    .Navigator_Button_Contact {
        pointer-events: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        writing-mode: vertical-rl;  /* Vertikal */
        text-orientation: upright;

        font-family: 'montserrat', sans-serif;;
        font-size: 1.56vw;  /* Viewport-Einheiten - Schrift wird beim Zoom kleiner */
        font-weight: lighter;
        letter-spacing: 0.1vw;  /* Viewport-Einheiten - Schrift wird beim Zoom kleiner */

        opacity: 0.5;

        position: absolute ;
        height: 100vh;
        width: 3.91vw;  /* Feste Breite - skaliert proportional */
        bottom: 0;
        left: 11.82vw;
        padding: 0 1.04vw;
        box-sizing: border-box;  /* Padding in Breite eingerechnet */
        background-color: none;
        color: #59443f;  /* Braun (passt zu Contact Gradient) */
        border-radius: 0;
        outline: #59443f 0 solid;

        cursor: pointer;
       

        transition-property: all;
        transition-duration: 0.3s;
        transition-timing-function: ease-in-out;

    }

        /* Contact Button Hover */
        .Navigator_Button_Contact:hover  {
            display: flex;
            align-items: center;
            justify-content: center;
            writing-mode: vertical-rl;
            text-orientation: upright;

            font-family: 'montserrat', sans-serif;
            font-size: 1.56vw;  /* Viewport-Einheiten - Schrift wird beim Zoom kleiner */
            font-weight: lighter;
            letter-spacing: 1.04vw;  /* Viewport-Einheiten - Schrift wird beim Zoom kleiner */

            opacity: 1;

            position: absolute ;
            height: 100vh;
            width: 3.91vw;  /* Feste Breite - skaliert proportional */
            bottom: 0;
            left: 11.82vw;
            padding: 0 1.04vw;
            box-sizing: border-box;  /* Padding in Breite eingerechnet */
            background-color: none;
            color: #59443f;
            border-radius: 0;
            outline: #59443f 0.05vw solid;  /* Outline erscheint */

            cursor: pointer;
          
        }

                /* Overlay für Contact Seite */
                .Contact_Overlay {
          position: absolute;
          top: 0;
          left: 0;
          width: 11.82vw;  /* Breite aller drei anderen Buttons */
          height: 100vh;
          background: rgba(60,73,89,0);  /* Transparent */
          pointer-events: none;  /* Klicks gehen durch */
          z-index: 15;
          opacity: 0;
          transition: opacity 0.5s;
        }










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


/* ========================================
   CUSTOM MEDIA MODAL (Video Player)
   ======================================== */

/* Custom Media Modal Container */
.CustomMediaModal {
  position: fixed;
  left: 0; top: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;  /* Über allem (außer Loading Screen) */
  display: none;  /* Standardmäßig versteckt */
  align-items: center;
  justify-content: center;
  background: none;
  backdrop-filter: blur(8px);  /* Blur-Effekt */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s cubic-bezier(.5,1.8,.5,1);  /* Bounce-Effekt */
}

/* Custom Media Modal Backdrop */
.CustomMediaModal_Backdrop {
  position: absolute;
  left: 0; top: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(60,73,89,0.5);  /* Blau-Grau transparent */
  z-index: 1;
}

/* Play Button im Custom Media Modal */
#custom-media-play {
  margin-top: -0.26vw;
  position: relative;
  top: 0;
}

/* Icons im Media Modal (invertiert für bessere Sichtbarkeit) */
#play-icon,
#close-icon,
#pause-icon {
  filter: invert(1);  /* Invertiert Farben */
}

/* Custom Media Modal geöffnet */
.CustomMediaModal.open {
  display: flex;
  opacity: 1;
  pointer-events: auto;
}

/* Custom Media Modal Content Box */
.CustomMediaModal_Content {
  position: relative;
  background:  rgba(0,0,0,0.5);  /* Halbtransparent schwarz */
  border-radius: 0.94vw;
  box-shadow: 0 0.42vw 1.67vw rgba(60,73,89,0.18);
  padding: 1.67vw 1.67vw 1.25vw 1.67vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: scale(0.96);  /* Leicht verkleinert */
  transition: transform 0.35s cubic-bezier(.5,1.8,.5,1), opacity 0.35s;  /* Bounce */
  opacity: 0.98;
  z-index: 2;
}

/* Content Box Animation beim Öffnen */
.CustomMediaModal.open .CustomMediaModal_Content {
  transform: scale(1);  /* Volle Größe */
  opacity: 1;
}

/* ---- Video Element im Custom Media Modal ---- */
#custom-media-video {
  max-width: 90vw;
  max-height: 80vh;
  width: auto;
  height: auto;
  border-radius: 0.73vw;
  background: #222;  /* Schwarz */
  margin-bottom: 1.25vw;
  box-shadow: 0 0.21vw 1.25vw rgba(60,73,89,0.12);
  display: block;
  object-fit: contain;  /* Behält Aspect Ratio */
}

/* ---- Custom Media Controls (Play, Pause, Progress, Volume) ---- */
.CustomMediaModal_Controls {
  display: flex;
  align-items: center;
  gap: 1.25vw;  /* Abstand zwischen Elementen */
  width: 100%;
  justify-content: center;
  margin-top: 0.42vw;
}

/* Buttons im Media Modal */
.CustomMediaBtn {
  background: none;
  border: none;
  font-size: 2.2rem;
  color: #3C4959;  /* Blau-Grau */
  cursor: pointer;
  padding: 0 0.63vw;
  border-radius: 0.42vw;
  transition: background 0.2s;
}

/* Button Hover */
.CustomMediaBtn:hover {
  background: #f2e0d0;  /* Cream Hintergrund */
}

/* Progress Bar (Zeitstrahl) */
#custom-media-progress {
  width: 16.67vw;
  accent-color:#f2e0d0;  /* Cream */
;
  height: 0.31vw;
  border-radius: 0.21vw;
}

/* Volume Slider (Lautstärke) */
#custom-media-volume {
  width: 5.21vw;
  accent-color: #f2e0d0;  /* Cream */
  height: 0.31vw;
  border-radius: 0.21vw;
}

/* Volume Icon */
#volume-icon {
  filter: invert(1);  /* Invertiert */
  vertical-align: middle;
  margin-right: 0;
  margin-left: 0;    
}

/* Volume Group (Icon + Slider zusammen) */
.volume-group {
  display: flex;
  align-items: center;
  gap: 0.31vw;  /* Kleiner Abstand zwischen Icon und Balken */
}

/* Close Button für Custom Media Modal */
.CustomMediaModal_Content .CustomMediaBtn#custom-media-close {
  position: absolute;
  top: 0.94vw;
  right: -1.82vw;  /* Außerhalb der Content Box */
  font-size: 2.5rem;
  background: none;
  color: #3C4959;
  border: none;
  cursor: pointer;
  z-index: 2;
  padding: 0;
}




/* ========================================
   HEADLINE BANNER (Name oben)
   ======================================== */

/* Headline Banner oben auf der Seite */
#headline-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100vw;
  height: 4.17vw;  /* Viewport-Einheiten - bleibt proportional */
  background: none;
  color: #000000;  /* Schwarz (wird aber invertiert) */
  font-family: 'DM Serif Display', serif;  /* Google Font */
  font-size: 2.5vw;  /* Viewport-Einheiten - bleibt proportional */
  font-weight: 400;
  letter-spacing: 0.1vw;  /* Viewport-Einheiten - bleibt proportional */
  text-align: center;
  z-index: 800;  /* Unter Modals (900+) */
  pointer-events: none;  /* Klicks gehen durch */
  user-select: none;  /* Nicht selektierbar */
  padding-top: 0.94vw;  /* Viewport-Einheiten - bleibt proportional */
  box-sizing: border-box;
  mix-blend-mode: invert;  /* Invertiert Farben (passt sich an Hintergrund an) */
  
}

/* Headline Transition */
#headline-banner {
  transition: opacity 0.8s, color 0.3s;
  opacity: 1;
}

/* Headline ausblenden */
#headline-banner.fade-out {
  opacity: 0;
}

/* Wenn Media Modal offen: Headline verstecken */
body.media-open #headline-banner {
  opacity: 0;
  pointer-events: none;
}



/* ========================================
   IMAGE MODAL (Bild Lightbox)
   ======================================== */

/* Bild‑Lightbox / Modal */
.ImageModal {
  position: fixed;
  inset: 0;  /* top, right, bottom, left: 0 */
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10;  /* Über Banner */
}

/* Image Modal geöffnet */
.ImageModal.open { display: flex; }

/* Image Modal Backdrop */
.ImageModal_Backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.6);  /* Dunkler Hintergrund */
  backdrop-filter: blur(4px);  /* Blur-Effekt */
  z-index: 1;
}

/* Image Modal Content */
.ImageModal_Content {
  position: relative;
  z-index: 2;
  max-width: 90vw;
  max-height: 90vh;
  padding: 0.94vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.63vw;
}

/* Bild im Image Modal */
#image-modal-img {
  max-width: 100%;
  max-height: calc(90vh - 4.17vw);  /* Platz für Controls */
  border-radius: 0.63vw;
  box-shadow: 0 0.42vw 1.56vw rgba(0,0,0,0.5);  /* Starker Schatten */
  object-fit: contain;  /* Behält Aspect Ratio */
}

/* Close Button für Image Modal */
.ImageModal_Close {
  position: absolute;
  top: -1.15vw;  /* Über dem Bild */
  right: -1.15vw;  /* Rechts vom Bild */
  z-index: 3;
  background: none;
  border: none;
  font-size: 3.13vw;
  color: #fff;  /* Weiß */
  cursor: pointer;
}

/* Caption unter dem Bild */
.ImageModal_Caption {
  color: #fff;
  font-size: 0.73vw;
  text-align: center;
  max-width: 90vw;
  word-break: break-word;  /* Bricht lange Wörter um */
}

/* ========== UNDER CONSTRUCTION BANNER ========== */
.Under_Construction_Banner {
  position: fixed;
  bottom: 0;
  left: 0;
  transform: translateX(0);
  background: rgba(89, 68, 63, 0.95);  /* Akzentfarbe halbtransparent */
  color: #f2e0d0;  /* Cream */
  padding: 0.5vh 1.25vw;  /* Viewport-Einheiten - bleibt proportional */
  border-radius: 0.63vw 0.63vw 0 0;  /* Abgerundete Ecken oben */
  display: flex;
  align-items: center;
  gap: 0.5vw;  /* Viewport-Einheiten - bleibt proportional */
  font-family: 'Playfair Display', serif;
  font-size: 0.83vw;  /* Viewport-Einheiten - bleibt proportional */
  font-weight: 400;
  letter-spacing: 0.03em;
  z-index: 10000;  /* Über allem */
  box-shadow: 0 -0.21vw 0.83vw rgba(0, 0, 0, 0.3);
}

.Construction_Icon {
  width: 1vw;  /* Viewport-Einheiten - bleibt proportional */
  height: 1vw;  /* Viewport-Einheiten - bleibt proportional */
  filter: brightness(0) saturate(100%) invert(91%) sepia(10%) saturate(479%) hue-rotate(335deg) brightness(103%) contrast(93%);  /* Cream-Farbe */
  animation: hammer-swing 2s ease-in-out infinite;
}

@keyframes hammer-swing {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-15deg); }
  75% { transform: rotate(15deg); }
}

/* Ende des CSS */