@font-face {
    font-family: 'NexaR';
    src: url('../fonts/Nexa-Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'NexaB';
    src: url('../fonts/Nexa-Bold.otf') format('opentype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'NexaL';
    src: url('../fonts/Nexa-Light.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'MinionPro';
    src: url('../fonts/MinionPro-Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

body {
    background-color: #c6d7de;
    font-family: 'NexaR';
}

.scrolling.up .image-container figure figcaption,
.scrolling.down .image-container figure figcaption {
    color: white;
}

.scrolling {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    pointer-events: none;
    text-align: center;
    opacity: 1;
    width: auto;
    height: auto;
}

.scrolling.up {
    top: 32px;
}

.scrolling.down {
    bottom: 32px;
}

.scrolling img {
    width: 48px;
    height: auto;
    display: block;
    margin: 0 auto;
    pointer-events: none;
}

.scrolling figure {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin: 0;
}

.scrolling figcaption {
    font-size: 0.85rem;
    line-height: 1;
    color: white;
    margin-top: 4px;
    text-align: center;
}


.container.infobox.closinginfo {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    max-width: 800px;
    background-color: rgba(255, 255, 255, 1);
    border-radius: 10px;
    text-align: center;
}

.container.infobox.closinginfo .text-container {
    padding-top: 10px;
}

.closinginfo .image-container {
    margin-top: 2cm;
    margin-bottom: 1.5em;
}

.closinginfo img {
    max-width: 300px;
    height: auto;
}

.closinginfo .text-container a {
    font-weight: bold;
    font-size: 1.2em;
    display: inline-block;
    margin-top: 0.5em;
    text-decoration: underline;
}

.container.infobox.closinginfo img {
    max-width: 250px; /* Verhindert zu große Darstellung */
    height: auto;
    display: block;
    margin: 0 auto 10px auto;
}

.info-kasten figure {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 10px;
    margin: 0;
}

.info-kasten figure img,
.info-kasten figure video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

#v0 {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    object-fit: cover;
    image-rendering: auto;
    backface-visibility: hidden;
    will-change: transform, opacity;
}

#set-height {
    display: block;
    padding-bottom: 30vh;
}


section {
    z-index: 1;
    position: relative;
}

/* Quelle ist dein Slider-Wrapper */
.image-container, 
.info-kasten {
  position: relative;
}



.content {
    position: sticky;
    position: -webkit-sticky;
    width: 100%;
    top: 33.3%;
}
.content.right {
    width: 40%;
    margin: auto 0 auto auto;
}

.infobox .content {
    top: 12%;    
}

section .content { 
    opacity:0; 
    -webkit-transition: opacity 1s;
    -moz-transition: opacity 1s;
    -o-transition: opacity 1s;
    transition: opacity 1s;
}

h1 {
    font-size: 3em;
    background: #fff;
    display: inline-block;
    padding: 10px 15px;
    border-radius: 5px;
    margin: 0;
}
h3 { letter-spacing: 0.1rem; }
p { font-size: 1.5em; }

section.vidcontainer {
    height: 98000px;
}

.container { opacity: 0; z-index:10; 
   -webkit-transition: opacity 1s;
   -moz-transition: opacity 1s;
   -o-transition: opacity 1s;
   transition: opacity 1s;
}
.container.textblock {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    width: 100%;
    top: 54%;
}
.container.textblock.nelerundgang,
.container.textblock.Nele-two { top:68%; }
.container.textblock.kueken-flut { top:74%; }
/* .container.textblock.plaintext p { font-size: 2.5em; } */

.container.infobox {
    position: fixed;
    top: 15%;
    left:4%;
}

.container.infobox.contright {
    left:unset;
    right:8%;    
}

.container.closing-logo {
    position: fixed;
    top: 1%;
    left:1%;    
}
.closing-logo { width:20%; height:20%; }
.closing-logo img { max-width:100%; }



h2, h3 { 
    color:#fff; 
    font-size: 70px; 
    margin:0; 
    text-transform: uppercase;
}
h2 { font-family:NexaB; line-height: 45px;}
h3 { font-family:NexaL; font-weight:lighter; }

.center { text-align:center; }
.starttitle .content,
.intro .content {
    top: 50% !important;
}

.container.textblock.closinginfo {
    top: 48%;
}

.intro .content, .nelerundgang .content { top:70%; }
.content > p { color: #fff; }
.bottomcenter > p { color: #fff; }

.video-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
}

.video-wrapper video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
    display: block;
}

.play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 64px;
    height: 64px;
    background: url('../../img/Play_Button_weiss.svg') no-repeat center center;
    background-size: contain;
    border: none;
    cursor: pointer;
    z-index: 10;
    display: block;
    pointer-events: auto;
    justify-content: center;
    align-items: center;
}

.info-kasten {
    width:560px;
    min-height: 250px;
    background-color: #fff;
    border-radius: 8px;
    padding:10px 30px 30px 30px;
}
.video .info-kasten {
    width:560px;
    min-height: 250px;
    padding:10px 20px 20px 20px;
}

.info-kasten figure { 
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 10px;
    margin: 0;
}

.info-kasten figure img,
.info-kasten figure video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.info-kasten .text-container-r {
    display: flex;
    flex-direction: row-reverse;
    padding-top: 20px;
    gap: 1rem;
}

.info-kasten p { font-size:15px; }
.info-kasten p:last-child { margin-bottom:0; }
.info-kasten p:first-of-type { margin-top:0; }

.infobox.video.ptop .info-kasten {
    padding: 20px;
}
.closing-logo .image-container,
.scrolling .image-container {
    top:0;
}
.infobox .bottomcenter { bottom:10%; }

.hallig-cams video, .hallig-cams figure { height:315px; }

.video-container ~ p { position: relative; top:-30px; }

.container.plaintext .content { width:80%; left:10%; }


.slick-prev, .slick-next { bottom: -40px; top:unset; }
.slick-prev:before, .slick-next:before { color: #000; }
.slick-next { right: 30px; }
.slick-prev { left: 30px; }
.slick-next:before { content:''; }
.slick-prev:before { content:''; }
.slick-next img { transform:rotate(180deg); width:30px; }
.slick-prev img { width:30px; }


/* Einheitliche Pfeile + Zähler unter dem Bild */
.slider-counter {
    position: absolute;
    bottom: -40px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    background: #fff;
    color: #000;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 16px;
    font-family: 'NexaB', sans-serif;
    pointer-events: none;
    /* box-shadow: 0 0 4px rgba(0,0,0,0.1); */
}

/* Pfeilpositionen exakt abstimmen */
.slick-prev, .slick-next {
    bottom: -45px;
    top: unset;
    z-index: 10;
}

.slick-prev {
    left: calc(50% - 90px);
}

.slick-next {
    right: calc(50% - 90px);
}

.slick-prev img, .slick-next img {
    width: 24px;
    height: auto;
}


 .slider-counter span { color: #000; }

.fader {
   opacity:1 !important;
   -webkit-transition: opacity 1s;
   -moz-transition: opacity 1s;
   -o-transition: opacity 1s;
   transition: opacity 1s;
   z-index:100; 
}

.entered {
	-webkit-animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
	        animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}


@media screen and (max-width:800px) {
    .container.textblock.plaintext p { font-size:1.2em; }
}



/* MobilePhone Portrait  */
@media (min-width:320px) and (max-width:440px) and (orientation: portrait) {
    .container {
        width: 90%;
    }
    .info-kasten { width: 80%; }
    .video .info-kasten { width: 86%; left: 50%; transform: translateX(-49%) }
    h2, h3 { font-size:48px; }
    .container.textblock { width: 94%; }
    .hallig-birds.video .info-kasten,
    .bruecke-hauptpriel.video .info-kasten,
    .mess-sediment.video .info-kasten,
    .bruterfolg.video .info-kasten { width: 86%; }
    
}

 @-webkit-keyframes text-focus-in {
    0% {
      -webkit-filter: blur(12px);
              filter: blur(12px);
      opacity: 0;
    }
    100% {
      -webkit-filter: blur(0px);
              filter: blur(0px);
      opacity: 1;
    }
  }
  @keyframes text-focus-in {
    0% {
      -webkit-filter: blur(12px);
              filter: blur(12px);
      opacity: 0;
    }
    100% {
      -webkit-filter: blur(0px);
              filter: blur(0px);
      opacity: 1;
    }
  }

.video-container {
    position: relative;
}

.info-kasten figure {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 10px;
    margin: 0;
    width: 100%;
}

.info-kasten figure img,
.info-kasten figure video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}


  /* Fix: Start-Logo und erste Texte höher */
  .starttitle .content,
  .intro .content {
      top: 50% !important;
  }

  /* Fix: Letzte Texteinblendung sichtbarer platzieren */
  .container.textblock.closinginfo {
      top: 48%;
  }

  /* Fix: Mobile Textbox Scrollverhalten */
  @media screen and (max-width: 600px) {
    .container.textblock {
        top: 48% !important;
    }
  }


.pegellogger.video .info-kasten video {
    transform: scale(1.02);
    transform-origin: center center;
}


.container.infobox.closinginfo {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    max-width: 800px;
    background-color: rgba(255, 255, 255, 1);
    border-radius: 10px;
    text-align: center;
}

.container.infobox.closinginfo .text-container {
    padding-top: 10px;
}

.closinginfo .image-container {
    margin-top: 2cm;
    margin-bottom: 1.5em;
}

.closinginfo img {
    max-width: 300px;
    height: auto;
}

.closinginfo .text-container a {
    font-weight: bold;
    font-size: 1.2em;
    display: inline-block;
    margin-top: 0.5em;
    text-decoration: underline;
}

.container.infobox.closinginfo img {
    max-width: 250px; /* Verhindert zu große Darstellung */
    height: auto;
    display: block;
    margin: 0 auto 10px auto;
}

.info-kasten figure {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 10px;
    margin: 0;
}

.info-kasten figure img,
.info-kasten figure video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}


#set-height {
    display: block;
    padding-bottom: 30vh;
}


section {
    z-index: 1;
    position: relative;
}


.content {
    position: sticky;
    position: -webkit-sticky;
    width: 100%;
    top: 33.3%;
}
.content.right {
    width: 40%;
    margin: auto 0 auto auto;
}

.infobox .content {
    top: 12%;    
}

.info-kasten img:not(.read-button), .info-kasten video { width: 100%; border-radius: 10px; }

section .content { 
    opacity:0; 
    -webkit-transition: opacity 1s;
    -moz-transition: opacity 1s;
    -o-transition: opacity 1s;
    transition: opacity 1s;
}

h1 {
    font-size: 3em;
    background: #fff;
    display: inline-block;
    padding: 10px 15px;
    border-radius: 5px;
    margin: 0;
}
h3 { letter-spacing: 0.1rem; }
p { font-size: 1.5em; }

section.vidcontainer {
    height: 98000px;
}

.container { opacity: 0; z-index:10; 
   -webkit-transition: opacity 1s;
   -moz-transition: opacity 1s;
   -o-transition: opacity 1s;
   transition: opacity 1s;
}
.container.textblock {
    position: fixed;
    width: 100%;
    top: 54%;
}
.container.textblock.nelerundgang,
.container.textblock.Nele-two { top:60%; }
.container.textblock.kueken-flut { top:74%; }
/* .container.textblock.plaintext p { font-size: 2.5em; } */

.container.infobox {
    position: fixed;
    top: 15%;
    left:4%;
}

.container.infobox.contright {
    left:unset;
    right:8%;    
}

.container.closing-logo {
    position: fixed;
    top: 1%;
    left:1%;    
}
.closing-logo { width:20%; height:20%; }
.closing-logo img { max-width:100%; }


h2, h3 { 
    color:#fff; 
    font-size: 70px; 
    margin:0; 
    text-transform: uppercase;
}
h2 { font-family:NexaB; line-height: 45px;}
h3 { font-family:NexaL; font-weight:lighter; }

.center { text-align:center; }
.starttitle .content,
.intro .content {
    top: 50% !important;
}

.container.textblock.closinginfo {
    top: 48%;
}

.intro .content, .nelerundgang .content { top:70%; }
.content > p { color: #fff; }
.bottomcenter > p { color: #fff; }

.video-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
}

.video-wrapper video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
    display: block;
}

.play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 64px;
    height: 64px;
    background: url('../../img/Play_Button_weiss.svg') no-repeat center center;
    background-size: contain;
    border: none;
    cursor: pointer;
    z-index: 10;
    display: block;
    pointer-events: auto;
    justify-content: center;
    align-items: center;
}

.info-kasten {
    width:560px;
    min-height: 250px;
    background-color: #fff;
    border-radius: 8px;
    padding:10px 30px 30px 30px;
}
.video .info-kasten {
    width:560px;
    min-height: 250px;
    padding:20px;
}

/* Room for slider navigation */
.video .info-kasten.sldr .image-container {
    padding-bottom: 40px;
}

.info-kasten figure { 
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 10px;
    margin: 0;
}

.info-kasten figure img,
.info-kasten figure video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.info-kasten p { font-size:15px; }
.info-kasten p:last-child { margin-bottom:0; }
.info-kasten p:first-of-type { margin-top:0; }

.closing-logo .image-container,
.scrolling .image-container {
    top:0;
}
.infobox .bottomcenter { bottom:10%; }

.hallig-cams video, .hallig-cams figure { height:315px; }

.video-container ~ p { position: relative; top:-30px; }

.container.plaintext .content { width:80%; left:10%; }


.slick-prev, .slick-next { bottom: -40px; top:unset; }
.slick-prev:before, .slick-next:before { color: #2e2e2e; }
.slick-next { right: 30px; }
.slick-prev { left: 30px; }
.slick-next:before { content:''; }
.slick-prev:before { content:''; }
.slick-next img { transform:rotate(180deg); width:30px; }
.slick-prev img { width:30px; }



.slider-counter span { color: #bfbfbf; }

.fader {
   opacity:1 !important;
   -webkit-transition: opacity 1s;
   -moz-transition: opacity 1s;
   -o-transition: opacity 1s;
   transition: opacity 1s;
   z-index:100; 
}

.entered {
	-webkit-animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
	        animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}


@media screen and (max-width:800px) {
    .container.textblock.plaintext p { font-size:1.2em; }
}



/* MobilePhone Portrait  */
@media (min-width:320px) and (max-width:440px) and (orientation: portrait) {
    .container {
        width: 90%;
    }
    .info-kasten { width: 80%; }
    .video .info-kasten { width: 92%; }
    h2, h3 { font-size:48px; }
    .container.textblock { width: 100%; }
    .hallig-birds.video .info-kasten,
    .bruecke-hauptpriel.video .info-kasten,
    .mess-sediment.video .info-kasten,
    .bruterfolg.video .info-kasten { width: 86%; }
    
    
}


 @-webkit-keyframes text-focus-in {
    0% {
      -webkit-filter: blur(12px);
              filter: blur(12px);
      opacity: 0;
    }
    100% {
      -webkit-filter: blur(0px);
              filter: blur(0px);
      opacity: 1;
    }
  }
  @keyframes text-focus-in {
    0% {
      -webkit-filter: blur(12px);
              filter: blur(12px);
      opacity: 0;
    }
    100% {
      -webkit-filter: blur(0px);
              filter: blur(0px);
      opacity: 1;
    }
  }

.video-container {
    position: relative;
}

.info-kasten figure {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 10px;
    margin: 0;
    width: 100%;
}

.info-kasten figure img,
.info-kasten figure video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Fix: Start-Logo und erste Texte höher */
.starttitle .content,
.intro .content {
      top: 50% !important;
}

.starttitle img {
      width: 100%;
      max-width: 460px;
}

.starttitle p.title {
    font-size: 2rem;
}

@media(max-width: 600px) {
    .starttitle img {
      max-width: 280px;
    }
    .starttitle p.title {
        font-size: 1.5rem;
    }
}

/* Fix: Logo zu Beginn anzeigen */
.container.textblock.starttitle {
    width: 100% !important;
    bottom: 15% !important;
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
}

@media(max-height: 800px) {
  .container.textblock.starttitle {
      bottom: 35% !important;
  }
}

/* Fix: Letzte Texteinblendung sichtbarer platzieren */
.container.textblock.closinginfo {
  top: 48%;
}

/* Fix: Mobile Textbox Scrollverhalten */
@media screen and (max-width: 600px) {
    .container.textblock {
        top: 50% !important;
    }
}


.pegellogger.video .info-kasten video {
    transform: scale(1.02);
    transform-origin: center center;
}


/* --- GLOBAL PRELOADER --- */
#global-preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #ffffff; /* Hintergrundfarbe Preloader */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    z-index: 9999;
}

.spinner {
    width: 80px;
    height: 80px;
    border: 8px solid #cccccc;
    border-top: 8px solid #222f47;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

#global-preloader #progress span {
    display: inline-block;
    width: 68px;
    padding-top: 8px;
    text-align: right;
}

#global-preloader #spinnerNote {
    display: block;
    text-align: center;
    padding-top: 5px;
    font-size: 0.8rem;
    max-width: 320px;
}

/* Animation für den Dreh-Effekt */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

h1, h2, h3, h4, h5, h6, p, span, strong {
    font-family: 'NexaR', sans-serif !important;
    font-weight: normal !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

@-moz-document url-prefix() {
  .content.center {
    top: 60% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    position: absolute !important;
    text-align: center;
  }

  .container.textblock.starttitle .content.center {
    top: 60% !important;
  }

  .container.textblock.plaintext .content.center {
    top: 60% !important;
  }

  .container.infobox.closinginfo {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 90vw !important;
    max-width: 600px;
    z-index: 1000 !important;
  }
}


/* Sicherheitsregel: Alle nicht sichtbaren .container-Elemente zuverlässig deaktivieren */
.fader-hidden {
  opacity: 0 !important;
  pointer-events: none !important;
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
}

@media screen and (max-width: 600px) {
  .closing-kasten {
    width: 90% !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    padding: 10px 20px 10px 20px;
    margin: 0 auto;
    margin-top: -20px;
  }
  .closing-kasten img {
    max-width: 150px !important;
    height: auto;
  }
}