:root {
    --b-header-font-size: 30px;
    
    --b-max-seitenbreite: 1200px; /* nur landscape. Achtung: für die @media-screen Abfrage leider keine Variable möglich. fix 1550px */
}

#header {
   grid-template-columns: 45% auto;
   grid-column-gap: 5px;
}

.zeilenabstandSeitenheader {
   padding-top: 2px;
}

.listenelement {
   /* 2 Spalten  im Landscape und Portrait unterschiedlich breit*/ 
   grid-template-columns: 30% auto;
} 
.listenBild, .listenBildLeer {  
   width: 66%;
}

.artBild{
   /* Bildgrösse in der Artanzeige: so gross wie möglich, Höhe = 70% der schmaleren Bildschirmseite (je nach Bildschirmgrösse anders) */
   height: 70vmin; 
}

.rechtsbündig {
   /* Filterfeld bei indexFamilien und indexGattungen im Bereich Knöpfe rechtsbündig */
   justify-content : flex-end;
}


@media screen and (min-width: 1200px) {  /* bei plan 1550px */
    /* bei ganz grossen Bildschirmen die Darstellungsbreite fixieren und zentrieren*/
    /* hier leider kein var(--xxx) möglich */
    
   :root { 
      --b-page-width: var(--b-max-seitenbreite);    
   }
    
   #page {
      /* damit die verkleinerte Seite in der Bildschirmmitte erscheint */
      width: var(--b-page-width);
      margin-left: auto;
      margin-right: auto;   
   }

   #header, #seitenHeader, #flashmeldung, #footer {
      /* muss die Borderbreite abzählen, weil 'box-sizing: border-box' gilt */
      width: calc(var(--b-page-width) - var(--b-page-border-width) - var(--b-page-border-width)); 
   }
    
    

}