/*Style nur für index. Texte linke Spalte werden bei kleinen Seiten, als erster Text, angezeigt*/

/*****************linke Spalte***************/
/* Sidebar/left column bei Index und kleiner Seite oben, 
deshalb statt side --> sideIndex der nicht mit media ausgeblendet wird*/
.sideIndex {
  -ms-flex: 20%; /* IE10 */
  flex: 20%;
  background-color: #f9f4c7;
  padding: 20px;
  box-sizing: border-box;
}
/****************ENDE linke Spalte*****************/
/*************** Main Spalte**********************/
/****************Layout Absatz Allgemein*******************/
.allg-wrapper {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}

.allg-image {
  flex: 0 1 200px; /* maximale Breite des Bildcontainers */
}

.allg-image img {
  width: 100%;           /* Bild füllt Containerbreite */
  max-width: 200px;      /* auf großen Screens nicht größer als 200px */
  aspect-ratio: 1 / 1;   /* quadratisches Format */
  object-fit: contain;   /* kein Verzerren */
  height: auto;          /* Höhe wird automatisch berechnet */
  display: block;
}

.allg-text {
  flex: 1 1 300px;
  min-width: 250px;
}

.allg-text ul {
  margin: 0.5rem 0 0 1.2rem;
  padding: 0;
  list-style-position: outside;
}

.allg-text li {
  margin-bottom: 0.3rem;
}
/****************Layout Absatz Allgemein*******************/
 
/******Autorenbox************/
.autor-box {
  margin-top: 30px;
  padding: 15px 20px;
  border-left: 5px solid #ffc439;
  background-color: #f4f7fa;
  font-size: 0.95em;
}

.autor-box hr {
  margin: 10px 0;
  border: none;
  border-top: 1px solid #ccc;
}

.autor-datum {
  margin-top: 8px;
  font-size: 0.85em;
  color: #555;
}
/******Ende Autorenbox************/
  
/*************** ENDE Main Spalte******************/



/* --- Zusatz für kleine Bildschirme --- */
@media (max-width: 600px) {
  .allg-wrapper {
    flex-direction: column; /* Bild über dem Text */
    align-items: center;    /* zentriert Bild */
  }

  .allg-image img {
    max-width: 80%;         /* auf Smartphones verkleinern */
  }

  .allg-text {
    min-width: auto;
    width: 100%;
  }

 #flexcontainer{
    display: flex;
    background-color: #f9f4c7;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content:space-around;
    min-height: 60px;
    width: 100%;
    align-items: center;
  }
  /* Sidebar/left column bei Index und kleiner Seite oben, 
deshalb statt side --> sideIndex der nicht mit media ausgeblendet wird*/
.sideIndex {
  display: none;
}
/****************ENDE linke Spalte*****************/
}