html, body {
    margin: 0;
    padding: 0;
    /* Optional, verhindert horizontale Scrollbalken durch standardmäßige 
       Margins/Padding, falls vorhanden */
        justify-content: center;
        align-items: center;
        height: 100vh;
        margin: 0;
        font-family: sans-serif;
    }
    




 programm{display: grid;
            grid-template-columns: auto; 
            grid-row: 3/5;
            font-size: 1em;
            text-align: left;
            padding: 0.8em; 
            line-height: 0.8;}
 d-prog {display: grid;
            grid-template-columns: 4em 15em 15em; 
            line-height: 1.2;
            font-size: 0.8em
	    }
 d-eintritt {display: grid;
            grid-template-columns: auto auto auto; 
            line-height: 1.2;
            font-size: 0.8em
	    }

 d1 {grid-column: 1;
            text-align: left;}
 d2 {grid-column: 2;
            text-align: left;}
 d3 {grid-column: 3;
           text-align: left;}
 d2r {grid-column: 2;
            text-align: right;}
 d3r {grid-column: 3;
           text-align: right;}
 d13 { grid-column: 1/4;
             }






.box > * {
 
 align-items: center;
 
  justify-content: center;
  
  width: 100%

  height: 100%;
  }



.box {
  
  display: flex;
  
  flex-direction: column;

  
  background-color: rgb(171,205,171,0.2);
color: contrast-color(var(--bg-color)); 
  }


.text {
  color: black; /* Basis-Textfarbe */
  mix-blend-mode: difference; /* Invertiert die Farbe dynamisch */
}

.oben {
  display: grid;
 
           grid-template-columns: 70%; 
  /* 1 Spalten*/
          grid-auto-rows: auto; 
          padding: 0.5em;
 }
.oben img{
  width: 100%; }

.unten {
  display: grid;
 
           grid-template-columns:  70% ; 
  /* 1 Spalten*/
          grid-auto-rows: auto; 
          padding: 0.5em;
 }


.mitte {
  
   display: grid;
  
   grid-template-columns:  49% 49% ; 
  /* 2 Spalten*/
   grid-auto-rows: auto;  
   align-items: start;
   column-gap: 0.5em;
   padding: 0.5em;
  
   margin: 0.1em;
   container-name: mitte;
}

.mittelinks{
   display: grid;
  
   grid-auto-rows: auto;  
   overflow: hidden;
   padding: 0.5em;
  
   margin: 0.5em; 
   row-gap: 0.5em;
   }

.mitterechts{
   display: grid;
  
   grid-auto-rows: auto;  
   overflow: hidden;
   padding: 0.5em;
  
   margin: 0.1em; 
   row-gap: 0.5em;
   }

.info{
  border: 2px solid rgb(0 0 0);
  
  border-radius: 5px;
  
  grid-column-start: 1;
  grid-column-end: 1;
  grid-row-start: 1;
  grid-row-end: 1;
  padding: 0.5em;
 }

.dia{
  grid-column-start: 2;
  grid-column-end: 2;
  grid-row-start: 1;
  grid-row-end: 1; }
.dia img{
  width: 100%; }

.prog{
  border: 2px solid rgb(0 0 0);
  
  border-radius: 5px; 
  grid-column-start: 2;
  grid-column-end: 2;
  grid-row-start: 2;
  grid-row-end: 2;}
  overflow: hidden;
  padding: 0.5em;
}

.zwischentext{
 grid-column-start: 1;
  grid-column-end: 1;
  grid-row-start: 2;
  grid-row-end: 2;}

.zwischentext img{
    width: 100%; }

.eintritt{display: grid;
  grid-template-columns:  auto; 
  grid-auto-rows: auto; 
  border: 2px solid rgb(0 0 0);
  
  border-radius: 5px;
  
  grid-column-start: 1;
  grid-column-end: 1;
  grid-row-start: 3;
  grid-row-end: 3;
  padding: 0.5em;
  line-height: 1.2em;
  font-size: 1em;
  text-align: left;
}

.google-map-container {
    position: relative;
    padding-bottom: 56.25%; /* Dies erzeugt ein Seitenverhältnis von 16:9 (9/16 = 0.5625) */
    height: 0;
    overflow: hidden;
}

.google-map-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}