body {
  margin: 0;
  padding-top: 140px; /* Header-Höhe + gewünschter Abstand */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  height: 100vh;
  overflow: hidden;
  background-color: white; /* nur Farbe, kein Hintergrundbild */
  font-family: "DIN Condensed";
}


/* Canvas */
canvas {
  width: 1200px;  /* 80% von 1338 */
  height: 598px;  /* 80% von 748 */
  background: white;
  display: block;
  cursor: none;
  border-radius: 50px;
  border: 5px solid #13388F;
}


/* Spiel-Container */
#gameContainer {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  margin-top: 50px;
}


/* Header */
Header {
  position: fixed;           
  top: 0;                    
  left: 0;                   
  width: 100vw;              
  height: 13%;             
  background-color: #13388F; 
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;               
}


/* Header Text */
Header h1 {
color: #FFF;
font-family: "DIN Condensed";
font-size: 90px;

  width: 603px;
  height: 96px;
  display: flex;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 23px;
  border: 6px solid #FFF;


/* utility layout helpers */
.centered { text-align: center; margin-top: 12px; }
.closedMain { padding: 160px 20px 20px; text-align: center; }
.mt18 { margin-top: 18px; }
}


/* Timer */
#timerDisplay {
  position: absolute;
  top: -35px;  /* leicht über Canvas */
  right: 40px;
  font-size: calc(90vw * 28 / 1338);
  font-weight: bold;
  color: #13388F;
  font-family: DIN Condensed, Arial, sans-serif;
  z-index: 20;
}
/* Parkhaus-Anzeige */
#parkhausName {
  position: absolute;
  top: -35px;   /* gleiche Höhe wie der Timer */
  left: 40px;   /* Abstand vom linken Rand */
  font-size: calc(90vw * 28 / 1338); /* gleiche Größe wie Timer */
  font-weight: bold;
  color: #13388F;
  font-family: DIN Condensed, Arial, sans-serif;
  z-index: 20;
}

/* Startscreen overlay */
#startScreen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.321); /* optional: halbtransparentes Overlay */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100; /* über Canvas */
}

/* Neues zentrales Fenster */
#startWindow {
  width: 498px;
  height: 484px;
  background: #13388F;  
  border-radius: 63px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: white;
  text-align: center;
  padding: 20px; /* optional für etwas Abstand */
}

/* Startbutton */
#startGameBtn {
  margin-top: 80px;
  padding: 12px 24px;
  font-size: 26px;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  background-color: #FFF;
  color: #13388F;
  font-weight: bold;
  transition: 0.3s;
}

#startGameBtn:hover {
  background-color: #e0e0e0;
}

/* Primary button style reused across panels (matches #startGameBtn) */
.btn-primary {
  margin-top: 80px;
  padding: 12px 24px;
  font-size: 26px;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  background-color: #FFF;
  color: #13388F;
  font-weight: bold;
  transition: 0.3s;
}
.btn-primary:hover { background-color: #e0e0e0; }
/* Game Over Screen overlay */
#gameOverScreen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,0.5); /* halbtransparentes Overlay */
  display: none;               /* standardmäßig unsichtbar */
  align-items: center;
  justify-content: center;
  z-index: 100;                /* über Canvas */
}

/* Neues zentrales Fenster für Game Over */
#gameOverWindow {
  width: 498px;
  height: 484px;
  background: #13388F;
  border-radius: 63px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: white;
  text-align: center;
  padding: 20px;
}

/* Wiederholen Button */
#restartBtn {
  width: 46px;
  height: 45px;
  border: none;
  background: none; /* transparent */
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

#restartBtn img#icon_Restart {
  width: 46px;
  height: 45px;
  object-fit: contain; /* Bild skaliert passend */
}

#gameOverWindow h1 {
color: #FFF;
text-align: center;
font-family: "DIN Condensed";
font-size: 96px;
font-style: normal;
font-weight: 700;
line-height: normal;
margin: 0;
}
#gameOverWindow p {
  font-size: 28px;
  color: white;
  text-align: center;
  margin: 0 auto 20px auto;   /* zentriert mit Abstand nach unten */
  width: 70%;                 /* reduziert die Breite auf 70 % des Containers */
  max-width: 350px;           /* verhindert, dass es zu breit wird */
}

/* === HINTERGRUND NUR FÜR Parkhaus_Wahl-SEITE === */
body.parkwahl {
  /* page layout for parkhaus selection; background image is placed via .park-background element now */
  background-color: white;
  height: 100vh;
  margin: 0;
  padding: 0;
}

.park-background {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0; /* sits behind the parkhaus images which may have higher z-index */
}

.park-background img {
  position: relative; /* specified by user */
  width: 100%;
  height: 100%;
  object-fit: cover; /* ensure it fills the area proportionally */
  display: block;
}

/* hide captions on the parkhaus selection page (they are shown on the start page only) */
/* captions removed: no CSS needed */
/* Parkhaus-Bilder auf Startseite */

#parkhaus1, #parkhaus2, #parkhaus3, #parkhaus4, #parkhaus5 {
  position: absolute;
  cursor: pointer;    /* optional: Mauszeiger zeigen, dass klickbar */
}
/* Hover-Effekt: leicht vergrößern */
#parkhaus1:hover,
#parkhaus2:hover,
#parkhaus3:hover,
#parkhaus4:hover,
#parkhaus5:hover {
  transform: scale(1.1); /* 10% größer */
}

/* Positionen anpassen */
#parkhaus1 {
  top: 23%;         /* Abstand vom oberen Rand */
  left: 10%;        /* Abstand vom linken Rand */
  width: 15%;       /* Breite anpassen */
  height: 20%;       /* Höhe proportional */
}

#parkhaus2 {
  bottom:  2%;
  left: 5%;       /* Abstand vom rechten Rand */
  width: 20%;       /* Breite anpassen */
  height: 25%;       /* Höhe proportional */
}

#parkhaus3 {
  bottom: 20%;
  right: 16%;
  width: 20%;   /* größere Breite */
  height: 25%;   /* Höhe proportional zur Breite */
}

#parkhaus4 {
  bottom: 33%;
  right: 35%;
  width: 20%;       /* Breite anpassen */
  height: 20%;       /* Höhe proportional */
}
#parkhaus5 {
  top:  20%;
  right: 20%;
  width: 15%;       /* Breite anpassen */
  height: 20%;       /* Höhe proportional */
}



/* Startseite */

/* Hintergrund Startseite  */
body.index {
  background: url("/img/hintergrund2.png") no-repeat center center fixed;
  background-size: cover;    /* Bild füllt den gesamten Bildschirm */
  background-color: white;   /* Fallback-Farbe, falls Bild nicht geladen wird */
}

.infoBox {
  width: 1126px;
  height: 503px;
  margin-top: 30px;
  margin-bottom: 50px;
  padding: 30px; /* mehr Abstand zwischen Text und Boxrand */
  border: 8px solid #13388F;
  border-radius: 33px;
  position: relative;
  z-index: 5;

  display: flex;                /* aktiviert Flexbox */
  flex-direction: column;       /* Elemente untereinander anordnen */
  justify-content: center;      /* vertikal zentrieren */
  align-items: center;          /* horizontal zentrieren */
  text-align: center;           /* Text in der Mitte ausrichten */
}

.infoBox p {
  color: #13388F; 
  font-family: "DIN Condensed";
  font-size: 48px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.3;  /* besserer Zeilenabstand */
  margin-bottom: 40px; /* Abstand zwischen Text und Button */
  max-width: 900px; /* optional: Textbreite begrenzen */
}
.infoBox .btn {
  background-color:#13388F;
  
  width: 214px;
  height: 47px;
  border: 2px solid #13388F;
  border-radius: 9px;
  text-align: center;
  font-family: "DIN Condensed";
  color: white;
  font-size: 40px;
  font-style: normal;
  font-weight: 700;
  }

  .btn:hover {
  background: white;     /* Hintergrund wird weiss */
  color: #13388F;        /* Text wird blau */
}

  /* Hover label for parkhaus selection (floating near cursor) */
  .hover-name {
    position: fixed;
    display: none;
    pointer-events: none;
    background: rgba(255,255,255,0.95);
    color: #13388F;
    border: 2px solid #13388F;
    padding: 8px 12px;
    border-radius: 10px;
    font-family: "DIN Condensed", sans-serif;
    font-size: 22px;
    z-index: 250;
    white-space: nowrap;
  }



/* Datum-Wählen-Seite */

/*  Hintergrund für Datum-Wählen-Seite  */
body.datum {
  background: url("../img/hintergrund2.png") no-repeat center center fixed;
  background-size: cover; 
}

.date-picker-wrapper {
  background-color:#13388F;
  width: 498px;
  height: 484px;
  flex-shrink: 0;
  border-radius: 63px;
  box-sizing: border-box;

  /* more space above the title: larger top padding */
  padding: 56px 36px 24px; /* top right/left bottom */
  position: fixed;      /* position relative to viewport */
  left: 50%;
  /* shift down by half the header height to visually center below the fixed header (header height ~122px) */
  top: calc(50% + 61px);
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column; /* stack title, triangle, then picker vertically */
  align-items: center;     /* center horizontally */
  justify-content: center; /* center vertically */
  gap: 8px;
  z-index: 40; /* keep it under the header (header has z-index:50) */
}

/* Title inside the wrapper */
/* date-picker-title removed in favor of .panel-title (shared across panels) */

/* Subtext used under date-picker titles (start screens, messages) */
.date-picker-subtext {
  color: white;
  font-family: "DIN Condensed", sans-serif;
  font-size: 30px; /* match the size used on datum_waehlen */
  text-align: center;
  margin: 0;
}

/* Start window title/subtext (same visual style as date-picker, but name relates to Start) */
.start-title {
  font-family: "DIN Condensed", sans-serif;
  color: white;
  font-size: 96px;
  font-weight: 700;  
  text-align: center;
  margin-bottom: 50px;
  margin-top: 30px;
  width: 100%;
}
.start-subtext {
  color: white;
  font-family: "DIN Condensed", sans-serif;
  font-size: 30px;
  margin-top: 30;
  text-align: center;
  margin: 0;
}

/* General panel utilities to keep title/subtext sizes consistent across pages */
.panel-title {
  font-family: "DIN Condensed", sans-serif;
  font-size: 80px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 20px;
  margin-top: 50px;
  width: 100%;
  color: white;
  text-align: center;
}
.panel-subtext {
  font-family: "DIN Condensed", sans-serif;
  font-size: 30px;
  text-align: center;
  margin: 0;
}

/* small white triangle pointing down under the title */
.date-picker-triangle {
  border-left: 28px solid transparent;
  border-right: 28px solid transparent;
  border-top: 70px solid #fff; /* larger elongated white tip */
  margin: 0 auto 10px auto;
}

/* Date/time input boxes inside the generated picker container */
/* override inline background/padding set by JS so the area between boxes stays the wrapper color */
#datePickerContainer {
  display: flex;          /* stack inputs vertically */
  flex-direction: column;
  align-items: stretch;   /* make children expand to full width */
  gap: 15px;
  padding: 0 !important; /* remove JS-inlined padding */
  background: transparent !important; /* ensure no white background between boxes */
  width: 100%;
  box-sizing: border-box;
}

#datePickerContainer input[type="date"],
#datePickerContainer input[type="time"] {
  background: #fff;           /* white box */
  border-radius: 30px;        /* requested rounded corners */
  padding: 12px 16px;         /* comfortable inner spacing */
  font-size: 16px;
  height: 45px;
  box-sizing: border-box;
  width: 100%;                /* full width when stacked */
  text-align: center;        /* center the text inside the white boxes */
  color: #13388F;            /* blue text to match design */
  -webkit-text-fill-color: #13388F; /* iOS/Safari fallback */
}

/* placeholder color (and vendor fallbacks) */
#datePickerContainer input::placeholder { color: rgba(19,56,143,0.75); }
#datePickerContainer input::-webkit-input-placeholder { color: rgba(19,56,143,0.75); }
#datePickerContainer input:-ms-input-placeholder { color: rgba(19,56,143,0.75); }

/* make sure the datalist element doesn't interfere visually */
#datePickerContainer datalist { display: none; }

/* Confirm image button inside picker */
#datePickerContainer button#confirmDateBtn {
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
#datePickerContainer button#confirmDateBtn img {
  height: 10px; /* confirm icon height */
  display: block;
  margin-top: 0;   /* move icon up so it sits well inside the blue wrapper */
  margin-bottom: 20px;
  align-self: center;
}
/* dim the image when button disabled */
#datePickerContainer button#confirmDateBtn:disabled img {
  opacity: 0.45;
}

/* --- dein bestehender Desktop CSS Code --- */
/* ... (alles wie gehabt, unverändert) ... */


/* ===========================================================
   >>> Responsive Anpassungen (Mobile & Tablet) <<<
   =========================================================== */

/* Tablets (max 1024px) */
@media (max-width: 1024px) {
  /* Prevent any scrolling on mobile: lock viewport to 100vh and hide overflow */
  html, body {
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column; /* Header remains on top */
    height: 100vh; /* fixed viewport height prevents scrolling */
    overflow: hidden; /* disable scrolling */
    -webkit-overflow-scrolling: auto;
  }

  .infoBox {
    width: 80%;
    height: auto;
    padding: 25px;
    margin-top: 20px;
  }

  .infoBox p {
    font-size: 36px;
    max-width: 100%;
  }

  .infoBox .btn {
    font-size: 32px;
    width: 180px;
    height: 45px;
  }

  canvas {
    width: 90%;
    height: auto;
    border-radius: 30px;
  }

  #startWindow,
  #gameOverWindow,
  .date-picker-wrapper {
    width: 80%;
    height: auto;
    padding: 30px 20px;
    border-radius: 40px;
  }

  .panel-title {
    font-size: 60px;
  }

  .panel-subtext {
    font-size: 24px;
  }
}

/* Mobile (max 768px) */
@media (max-width: 768px) {
  header {
    height: 100px;
  }

  header h1 {
    font-size: 40px;
    border: 3px solid #fff;
    padding: 8px 16px;
  }

  body {
    padding-top: 110px;
    overflow: auto;
  }

  .infoBox {
    width: 90%;
    height: auto;
    padding: 20px;
    margin-top: 15px;
    margin-bottom: 30px;
  }

  .infoBox p {
    font-size: 26px;
    line-height: 1.4;
    margin-bottom: 25px;
  }

  .infoBox .btn {
    font-size: 24px;
    width: 150px;
    height: 40px;
  }

  /* Canvas kleiner und scrollbar machen */
  canvas {
    width: 95%;
    height: auto;
    border-radius: 25px;
    border-width: 3px;
  }

  #startWindow,
  #gameOverWindow,
  .date-picker-wrapper {
    width: 90%;
    height: auto;
    padding: 20px;
    border-radius: 30px;
  }

  .panel-title {
    font-size: 40px;
    margin-top: 30px;
  }

  .panel-subtext {
    font-size: 20px;
  }

  /* Parkhaus Bilder proportional kleiner */
  #parkhaus1, #parkhaus2, #parkhaus3, #parkhaus4, #parkhaus5 {
    width: 25%;
    height: auto;
  }

  #timerDisplay,
  #parkhausName {
    font-size: 18px;
    top: -25px;
  }

  .date-picker-subtext,
  .start-subtext {
    font-size: 20px;
  }

  .start-title {
    font-size: 50px;
  }
}



/* Sehr kleine Smartphones (max 480px) */
@media (max-width: 480px) {
  header h1 {
    font-size: 28px;
  }

  .infoBox p {
    font-size: 20px;
  }

  .infoBox .btn {
    font-size: 20px;
    width: 130px;
    height: 36px;
  }

  .panel-title {
    font-size: 32px;
  }

  .panel-subtext {
    font-size: 18px;
  }

  #startWindow,
  #gameOverWindow,
  .date-picker-wrapper {
    padding: 15px;
    border-radius: 20px;
  }

  .date-picker-triangle {
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-top: 40px solid #fff;
  }
}