/* ------------- schriftart ------------- */
@import url('https://fonts.googleapis.com/css2?family=REM:wght@400;700&display=swap');

/* ------------- globale einstellungen ------------- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
  --gelb: #FFD500;  
  --blau: #28526A;   
  --dunkelblau: #0F2A39; 
  --font-primary: "REM", Arial, sans-serif;
}

/* ------------- schriftstyles ------------- */
body {
  font-family: var(--font-primary);
}

p {
  font-weight: 400;
}

h1, h2, h3 {
  font-weight: 700;
  margin-bottom: 2rem;
}

h1 {
    font-size: 1.5em;
    margin-bottom: 2rem;
    text-transform: uppercase;
    text-align: left;
}

h2{
    text-align: center;
    text-transform: uppercase;

}

.right p {
    font-size: 1em;
    margin-bottom: 1rem;
}

/* ------------- bilder ------------- */
.logo{
    width: 12rem;
    margin-bottom: 7rem;
}

.svg-content{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ------------- map hover station ------------- */
#Siemens_AG_Popup,
#Hauptbahnhof_West_Popup,
#Permosertstrasse_Popup_Kopie,
#Stannebeinplatz_Popup {
    opacity: 0;
}

#Siemens_AG_Popup:hover,
#Hauptbahnhof_West_Popup:hover,
#Permosertstrasse_Popup_Kopie:hover,
#Stannebeinplatz_Popup:hover {
    opacity: 1;
}

#Siemens_AG,
#Hauptbahnhof_West,
#Permosertstrasse,
#Stannebeinplatz {
    cursor: pointer;
}

/* ------------- header ------------- */
.header {
    display: flex;
    flex-direction: row; /* Standard (größere Screens) */
    height: 100%;
    width: 100%;
}

.left {
    display: flex;
    flex: 7;
    height: 100%;
    width: 100%;
    overflow: hidden;
    object-fit: fill;
    background-color: var(--blau);
    align-items: center;
    justify-content: center;

}

.right {
    display: flex;  
    flex-direction: column;
    flex: 2;
    background-color: var(--gelb);
    color: var(--blau);
    padding: 3rem 5rem; 
    align-items: center;       
    text-align: left;        
}

/* ------------- popup ------------- */
.dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: var(--dunkelblau);
  color: var(--gelb); 
  padding: 2rem;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.6);
  width: 500px;
  max-width: 90%;
  z-index: 1000;
  font-family: 'REM', sans-serif;
}

.hidden {
  display: none;
}

#dialog-date{
  margin-bottom: 1rem;
}

.dialog-content {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.close-btn {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 1.5rem;
  color: white;
  cursor: pointer;
  background: none;
  border: none;
}

.info-container {
    display: flex;
    justify-content: space-around;
    margin-top: 40px;
}

.info-box {
    background: rgba(217, 217, 217, 0.2);
    color: white;
    padding: 1rem;
    border-radius: 8px;
    text-align: center;
    width: 10rem;
    margin: 0 0.5rem;
}

 .angle-down-mobil {
      display: none;
    }

/* ------------- breakpoint mobile ------------- */
@media (max-width: 767px) {
    .header {
        flex-direction: column;
        height: 75vh;
    }
    
    .left,
    .right {
        flex: none; 
        width: 100%;
    }

    .left{
      height: 85vh;
    }
    
    .right {
        padding: 2rem; 
    }

    .logo{
    width: 9rem;
    margin-bottom: 2rem;}

    h1{
      text-align: center;
    }

    .info-box {
      padding: 1rem;
    }

    .angle-down-mobil {
      display: block;
      margin: 1rem 3rem 7rem 3rem;
      width: 3rem;
    }

    h1{
      font-size: 1.25rem;
      text-align: center;
    }
  }