* {
    padding: 0;
    margin: 0;
}

html {
  scroll-behavior: smooth;
  hyphens: auto;
}

@font-face {
    font-family: 'NewEdge666 Regular';
    src: url(../font/NewEdge666-Regular.otf) format("opentype");
}

@font-face {
  font-family: 'NewEdge666 Regular Rounded';
  src: url(../font/NewEdge666-RegularRounded.otf) format("opentype");
}

@font-face {
  font-family: 'NewEdge666 Semibold Rounded';
  src: url(../font/NewEdge666-SemiBoldRounded.otf) format("opentype");
}

@font-face {
    font-family: 'NewEdge666 Light';
    src: url(../font/NewEdge666Test-Light.otf) format("opentype");
}


/* Erzwinge den Lightmode unabhängig von Benutzereinstellungen */
:root {
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  body {
      background-color: ffffff;
      color: var(--bankblau);
  }
}

/* Begrenze die Breite auf die Größe eines Smartphones */
.mobil {
  width: 100%; /* Standard: volle Breite des Bildschirms */
  max-width: 480px; /* Maximale Breite eines Smartphones */
  margin: 0 auto; /* Zentrierung bei schmaleren Geräten */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Optional: leichte Schattenwirkung */
  background-color: #fff;
  position: relative;
}

/* Media Query für Bildschirme größer als 480px */
@media (min-width: 481px) {
  .mobil {
      width: 480px; /* Fixe Breite der Mobilansicht */
      /* margin: 20px auto; Zentrierung auf größeren Bildschirmen */
  }
}

/* Optionale Fallback-Einstellungen für alle Browser */
body {
  background-color: #ffffff;
  color:var(--bankblau)
}


/* Farben */
:root {
  --bankblau: #006DFF;
  --flieder: #CABDFF;
  --gelb: #fcff40;
  --gruen: #fcff40;
}

/*6aff40*/

/* Schriften */
h1 {
    font-family: 'NewEdge666 Semibold Rounded' !important;
    color: var(--bankblau) !important;
    font-weight: 100;
    font-size: 2.5em !important; /*weg von px lieber em nehmen !!*/
    line-height: 1em;
    text-transform: uppercase;
}

h2 {
  font-family: 'NewEdge666 Semibold Rounded' !important;
  color: var(--bankblau);
  font-weight: 100;
  font-size: 1.4em !important; /*weg von px lieber em nehmen !!*/
  text-transform: uppercase;
}

p {
    font-family: 'NewEdge666 Regular';
    font-size: 1.2em;
    line-height: 1.2em;
    color: var(--bankblau);
}

.Linktext {
  color: var(--bankblau);
  text-decoration: underline;
}


/**/

.body2 {
  overflow: hidden;
  height: 100vh;
  background-color: white;
}

.ebenevorne {
  z-index: 500;
}

.markerKM {
  padding: 0.3em 0.2em 0.1em 0.2em;
  border-radius: 1px;
  background-color: var(--bankblau);
  color: white;
}

.marker {
  padding: 0.3em 0.2em 0.1em 0.2em;
  border-radius: 1px;
  background-color: var(--gruen);
  color: var(--bankblau);
}


/*Rhein hoeren Bereich*/
.link-icon {
  width: 20px; /* Größe des Icons */
  height: 20px;
}

.playPauseText {
  /*background-color: var(--gelb);*/
  position: relative;
  top: -0.65em;
  /*padding: 0.3em 0.2em 0.1em 0.2em;*/
  /*border-radius: 1px;*/
  text-decoration: underline;
}

.pulsing img {
  animation: pulse 1.5s infinite ease-in-out;
}

@keyframes pulse {
  0% {
    transform: scale(1); /* Normalgröße */
  }
  50% {
    transform: scale(1.2); /* Vergrößern */
  }
  100% {
    transform: scale(1); /* Zurück zur Normalgröße */
  }
}



/*Umschalter in den Texten*/
input[type="checkbox"] {
    display: none;
}

label {
    display: inline-block;
    cursor: pointer;
    font-family: 'NewEdge666 Regular Rounded';
    font-size: 1.2em;
    color: var(--bankblau);
    text-decoration: underline;
}

.content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    margin-top: 10px;
}

input[type="checkbox"]:checked ~ .content {
    max-height: 800px; /* Oder anpassen, je nach Inhalt */
}




/* Button, Hervorhebungen */
button {
  font-family: 'NewEdge666 Regular Rounded';
  font-size: 1.2em;
  padding: 0.5em 1em 0.3em 1em;
  border-color: 2px solid var(--bankblau);
  color: var(--bankblau);
  background-color: white;
  cursor: pointer;
}


/* Movingline */
.header {
  position: relative;
  background-color: var(--bankblau);
  width: 100vw;
  height: 2.3em;
  padding-top: 1.1em;
  overflow: hidden;
  border-bottom: 2px solid white;
  border-top: 2px solid white;
}

#movingLine {
  display: inline-block;
  white-space: nowrap;
  animation: moveLine 10s linear infinite;
}

.header #movingLine p {
  color: white;
  text-transform: uppercase;
  font-family: 'NewEdge666 Regular Rounded';
}

.headerHell {
  position: relative;
  width: 100vw;
  height: 2.3em;
  padding-top: 1.1em;
  overflow: hidden;
  border-bottom: 2px solid var(--bankblau);
  border-top: 2px solid var(--bankblau);
}

#movingLineHell {
  display: inline-block;
  white-space: nowrap;
  animation: moveLine 10s linear infinite;
}

.headerHell #movingLineHell p {
  color: var(--bankblau);
  text-transform: uppercase;
  font-family: 'NewEdge666 Regular Rounded';
}


@keyframes moveLine {
  from {
    transform: translateX(100%); /* Start: komplett außerhalb auf der rechten Seite */
  }
  to {
    transform: translateX(-100%); /* Ende: komplett außerhalb auf der linken Seite */
  }
}


/*Navitagtion*/

/* Wrapper für die Navigation */

nav {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  background-color: var(--bankblau);
  z-index: 1;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 3rem;
  position: fixed;
  height: 100vh;
  overflow: auto;
  text-align: center;
  border-right: 1px solid white;
  background-color: var(--bankblau);
  z-index: 1;
}

ul img {
  width: 2.5rem;
}

li .navtop {
  height: 5vh;
}

li a {
  display: block;
  padding-top: 0.4rem;
  text-decoration: none;
}

nav ul li a.active{
  background-color: white;
}

li a.active img {
  filter: invert(60%) sepia(22%) saturate(5000%) hue-rotate(191deg) brightness(90%) contrast(300%);
}


/*SVG Map*/

.SVGMap {
  position: relative;
  z-index: 100;
  background-color: white;
} 


/*Inhalt Allgemein*/

.container {
  margin-left: 4rem;
  margin-top: 3rem;
  margin-bottom: 3rem;
  padding-right: 1rem;
  overflow: hidden;
}

hr {
  margin-left: -4rem;
  width: 99vw;
}

.einleitung {
  position: relative;
  background-color: var(--bankblau);
  padding: 3em 1em 3em 1em;
}

.einleitungHell {
  position: relative;
  background-color: white;
  padding: 3em 1em 3em 1em;
}

.section {
  padding-top: 1em;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}

.TexteVorne {
  position: relative;
}

.image-container {
  display: inline-block;
  cursor: pointer;
}

.gif-container {
  width: 100%; 
  max-width: 800px; /* Maximale Breite des GIFs */
  margin: 0 auto; 
}

.gif-container img {
  width: 100%;
  height: auto; 
  display: block; 
}

.infoabstand {
  margin-top: 20vh;
}

.SchaubildInfo {
  height: 2em;
}


.Impressum {
  font-size: 1em;
  line-height: 1em;
}

.ImpressumAbsand {
  margin-top: 5vh;
}

.LinktextImpressum {
  font-size: 1em;
  color: var(--bankblau);
  text-decoration: underline;
}

/*Pfeile*/

:root {
  --rotation: 0deg;
}

#overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--bankblau); /* Halbtransparente graue Fläche */
  z-index: 999; /* Über alles außer den Button */
  pointer-events: none !important; /* Macht es nicht klickbar */
}

#activate {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
  z-index: 1000;
  font-size: 1.5em;
}

.pfeile {
  margin: 0;
  padding: 0;
}

.pfeilehintergrund {
  width: 100vw;
  height: 100vh;
  position: fixed;
  display: grid;
  align-content: center;
  justify-content: center;
  /*z-index: 1000;*/
}

.scrolling-background {
  padding: 0;  
  width: max(200vh, 200vw);
  height: max(200vh, 200vw);
  background: url("/img/Pfeil_grau-2.png") repeat;
  /*background-size: 620px;*/
  /*transition: transform 0.1s linear; Weichere Bewegung*/
  /*animation: scroll 4s linear infinite;*/
  transform-origin: center;
}

/*
@keyframes scroll {
  from {
    /*background-position: center 0px;
    transform: rotate(var(--rotation));
  }
  to {
    /*background-position: center 200px; 
    transform: rotate(var(--rotation)) translateY(0);
  }
}*/



/*Pegel bei Pegelturm*/

.resultpegel {
  border: 2px solid var(--bankblau);
  border-radius: 1px;
  background-color: #D5E2FD;
  padding: 1em 1em 3em 1em;
}

.buttonpegel {
  padding: 1em;
  padding: 2px solid var(--bankblau);
  float: right;
  position: relative;
}

.buttonpegel img {
  width: 2em;
  position: center;
}

.pegelstandcm {
  font-family: 'NewEdge666 Regular Rounded' !important;
  font-weight: 100;
  font-size: 1.1em !important; /*weg von px lieber em nehmen !!*/
  line-height: 1.2em;
  /*background-color: var(--blau);
  padding: 0.2em 0em 0em 0em;*/
}

.pegelbackground {
  background-color: var(--blau);
}