a  { color: #3800d0; font-size: 12pt; font-family: Arial; text-decoration:none;}
a:hover { color: red; font-size: 13pt; font-family: Arial; text-decoration:none;}

.my_body {
  width: 100%;
  background-color: red;
  background-image: url('../../Grafiken/Hintergrund/h_fuss.gif');
  color: black;
}

#karte_container { 
  text-align: center;
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  /*background-color: red;*/
  } 

.box1 {
    padding: 2px;
    width: auto;
    text-align: center;
    justify-self: center;
    grid-column: 1 / -1;
  }

.box2 {
    padding: 2px;
    width: 700px;
    border: 2px solid blue;
    justify-self: center;
    text-align: left;
  }

.box3 {
    padding: 2px;
    justify-self: center;
    text-align: left;    
  }

  .box4 {
    margin: 0 auto;
    padding: 5px;
    max-width:1000px;  
    font-size: 12pt;
    font-family: Arial, Georgia, Times;
    text-align: left;
    grid-column: 1 / -1;
    background-color: #fce5c7;
  }

/* ### Tabellen ### */
  .tab_karte {
    margin: 0 auto;
    padding: 0px;
    border-spacing: 0; /* Verhindert Zellabstände */
    border-collapse: collapse; /* Entfernt Lücken zwischen Zellen */
  }

  .td_karte {
    padding: 0px;
    white-space: nowrap;
    text-align: center;
    width: 700px;
    height: 400px;
    background-color: #dddddd;
    background-image: url('../../Grafiken/Hintergrund/kartenfehler.gif');
  }

  .tab_info {
    margin: 0 auto;
    padding: 5px;
    font-size: 12pt;
    font-family: Arial, Georgia, Times;
    white-space: nowrap;
  }

  .td_info_rechts {
    text-align: right;
    width: 150px;
  }
  .td_info_or {
    text-align: left;
    background-color: #fce5c7;
    width: 300px;
  }
  .td_info_yl {
    text-align: center;
    background-color: yellow;
  }
  .td_info_rcolor {
    text-align: right;
    width: 150px;
    background-color: #f7ffcc;    
  }
  .td_info_mcolor {
    text-align: left;
    width: 300px;
    background-color: #f7ffcc;    
  }

  .tab_minikarte {
    margin: 0 auto;
    padding: 0px;
    white-space: nowrap;
    width: 180px;
    height: 130px;
    background-image: url('../../Grafiken/Position/pos_stmk.gif');
  }

  .tab_fotos {
    margin: 0 auto;
    padding: 5px;
    border-spacing: 2; 
    background-color: #0000bb;
    border: 2px;
    
  }

html, body, #karte
    {
    height: 100%;
    width: 100%;
    padding: 0; margin: 0;
    }
    
div.olControlAttribution, div.olControlScaleLine
    {
    font-family: Verdana;
    font-size: 0.7em;
    bottom: 3px;
    left: 3px;
  }
 

/* Use a media query to add a break point at 1000px: */
@media screen and (max-width:1000px) 
{
  #karte_container {
    display: block;
    /*grid-template-columns: 1fr; /* Single column layout */
  }

  .box2,
  .td_karte  {
    width: 500px;
  }

  .box1,
  .box2,
  .box3,
  .box4 {
    /*justify-self: left;*/
    margin-left: auto;
    margin-right: auto;
  }

}