/* 1. GRUND-LAYOUT (Gilt für alle Geräte) */
.spalten-layout {
    display: flex;
    align-items: stretch;
    gap: 1px;
    max-width: 1250px;
    margin: 20px auto;
	height: 900px;
	
}

/* Gemeinsame Regeln für alle Spalten */
.spalte, .links, .mitte, .rechts {
    padding: 20px;
    box-sizing: border-box;
    overflow: hidden; /* Wichtig für die Rundung! */
	
}


/* 3. DIE MITTE (PC) */
.mitte {
    flex: 2;
    background-image: url('bg_contenair_mitte.png');
    background-size: cover;
    background-position: center;
    color: black;
    text-shadow: 0px 0px 0px #000;
    border-radius: 20px; /* Hier ist die Rundung für PC */
    border: 3px solid #BDBBBB;
	 max-width: 1000px;
	 
}

/* 4. DER HANDY-EFFEKT (Nur für kleine Bildschirme) */
@media (max-width: 800px) {
    
    /* Seitenspalten komplett weg */
    .links, .rechts {
        display: none;
    }

    /* Container untereinander stapeln */
    .spalten-layout {
        display: block;
        padding: 10px;
    }

    /* Mitte auf volle Breite und Handy-Rundung */
    .mitte {
        width: 100% !important;
		height:70%;
        margin: 0;
        border-radius: 10px; /* Kleinere Rundung für Handy */
        font-size: 16px;
    }
}
,body{
background-color:#7D8CB3;
}
  </style>
  <style>
  table {
    /* Wichtig: Ränder zusammenführen */
    border-collapse: collapse; 
    width: 100%;
  }

  /* Nur der untere Rand der gesamten Tabelle */
  .tabelle-unten {
    border-bottom: 2px solid black;
  }

  /* Alternativ: Unterer Rand für jede Zelle (erzeugt Linien zwischen Zeilen) */
  .zeilen-rand td {
    border-bottom: 1px solid #ccc;
  }
  
  

  /* Nur der untere Rand der gesamten Tabelle */
  .tabelle-unten {
    border-bottom: 2px solid black;
  }

  /* Alternativ: Unterer Rand für jede Zelle (erzeugt Linien zwischen Zeilen) */
  .zeilen-rand td {
    border-bottom: 1px solid #ccc;
  }
  table {
  width: 100%;            /* Volle Bildschirmbreite */
  table-layout: fixed;    /* Erzwingt exakt gleiche Spaltenbreiten */
  border-collapse: collapse;
  border-bottom: 2px solid black; /* Dein gewünschter Rand unten */

  border-collapse: collapse;
  width: 100%;
  border-bottom:1px solid black; /* Dein Rand unten */
  border-left:1px solid black;   /* Rand ganz links */
  border-right: 1px solid black;  /* Rand ganz rechts */

}

td {
          /* Abstand für bessere Lesbarkeit */
  word-wrap: break-word;  /* Text bricht um, falls ein Wort zu lang ist */
  text-align: left;
   border-bottom: 1px solid black; /* Dein gewünschter Rand unten *
  
}
tr {
border-collapse: collapse;
border-right: 2px solid black;  /* Rand ganz rechts */
}
/* Media Query für sehr kleine Bildschirme (Handys) */
@media (max-width: 480px) {
  td {
    font-size: 14px;      /* Schrift etwas kleiner, damit mehr Text passt */
    padding: 1px;         /* Weniger Abstand bei Platzmangel */
  }
}