/* Landscape */

/* Achtung es gilt box-sizing: border-box -> width ist inklusive padding, border und margin */


/* Variablen, die im Format 'portrait' andere Werte haben oder dort nicht vorkommen */

/* Vorgehen: */
/* falls Werte gleich:   nur in all.css speichern, in landscape.css und portrait.css entfernen */
/* falls Werte ungleich: in all.css entfernen und in landscape.css und portrait.css speichern */
:root {
   --b-islandscape: 1;  /* mit javascript herausfinden, ob Landscape oder Portrait */
   
   --b-max-seitenbreite: 1200px; /* kann im lokalen landscape-css überschrieben werden, bei plan z.B. 1550 */

   --b-scrollbarWidth: 20px;     /* wird per JavaScript genau gesetzt in basis/app/functions/scrollbarWidthSetzen */
   --b-page-width: calc(100vw - var(--b-scrollbarWidth)); 
  
   --b-page-padding-left: 10px;	
   --b-page-padding-right: 10px; 
   
   

   --b-header-height: 80px; /* früher 92px */
   --b-header-top-bot-padding: 10px;

   --b-subnavigation-font-size: 14px;    

   --b-seitenheader-height: 60px; /* wird per JavaScript auf einen der nachfolgenden Werte gesetzt, im Portrait massiv unterschiedlich */
   --b-seitenheader-height-mit-knöpfen: 60px;
   --b-seitenheader-height-ohne-knöpfe: 60px;
   
   --b-seitenheader-titel-brutto-höhe: 60px;
   
   --b-seitenheader-titel-breite: var(--b-data-breite);   
   --b-seitenheader-titel-breite-ohne-knöpfe: 100%;
   --b-seitenheader-titel-breite-mit-knöpfen: var(--b-data-breite);
   
   --b-seitenheader-font-size: 20px;
   --b-seitenheader-font-size-details: 12px;

   --b-seitenheader-knöpfe-brutto-höhe: calc(var(--b-seitenheader-height-mit-knöpfen) - 2px); /* borderbreite abziehen */
   --b-seitenheader-knöpfe-brutto-breite: var(--b-data-breite); 
   
   --b-seitenheader-knopf-margin-left: 10px;    
   --b-seitenheader-knopf-höhe: 42px;
   --b-seitenheader-knopf-font-size: 11px;

   --b-flashmeldung-height: 20px;
   --b-flashmeldung-height-mit-meldung: 40px;
   
   --b-data-breite: calc(((var(--b-page-width) - var(--b-page-border-width) - var(--b-page-border-width))
                    - var(--b-page-padding-left) - var(--b-page-padding-right)
                    - var(--b-data-gap)) / 2);
   --b-data-gap: 20px; /* Leerraum zwischen 2-spaltiger Darstellung, kommt im portrait nicht vor */
   
   --b-inhalt-padding-bottom: 150px; 
   
}





/* Layout */
/* ------ */


#page {
   /* über die ganze Höhe, damit Scrollbar auf der ganzen Höhe sichtbar ist */
   padding-top: calc(var(--b-header-height) + var(--b-seitenheader-height) + var(--b-flashmeldung-height)); 
   padding-bottom: var(--b-footer-height);
}

#inhalt {
   /* Seiteninhalt ohne Header und ohne Seitenheader */
   padding-left: var(--b-page-padding-left);
   padding-right: var(--b-page-padding-right);
   padding-bottom: var(--b-inhalt-padding-bottom);
}
.data {
   /* Grid-Container */
   grid-template-columns: var(--b-data-breite) var(--b-data-breite);  /* eine Angabe muss sein, sonst falls 2.Spalte leer, wird 1. Spalte automatisch 100% */
   grid-column-gap: var(--b-data-gap);
}
.data1, .data3 {
   /* linke Spalte */
   grid-column: 1 / 2; 
}
.data2, .data4 {
   /* rechte Spalte */
   grid-column: 2 / 3; 
}
.data0 {
   /* wie .data1-4, aber einspaltig*/
   grid-column: 1 / 3; /* über alles */
}

#header, #seitenHeader, #flashmeldung, #footer {
   /* weiss nicht warum ich die Borderbreite abzählen muss. Es gilt doch 'box-sizing: border-box' */   
}

#header {
   grid-template-columns: 48% auto; /* Titel und Navigation */
   grid-template-rows: auto auto;   /* Navigation und Suchfeld */ 
   grid-column-gap: var(--b-data-gap);
}


#header #headerTitel {
   /* Titel in Spalte 1 und Reihe 1 und 2  von #header */
   grid-column: 1 / 2;  
   grid-row: 1 / 3;     
}
#header #headerNaviIcons {
   display: none;
}



#header #headerNavigation {
   /* Navigation in Spalte 2 und Reihe 1 von #header */
   grid-column: 2 / 3;
   grid-row: 1 / 2;
   display: grid;
   justify-content: end;
   margin: 0 0 0 auto;
   grid-template-rows: auto; /* eine Zeile */
   grid-template-columns: repeat(var(--b-navigation-items), auto); /* mehrere Spalten */
   grid-column-gap: 15px; /* anstatt padding left */
   
   font-size: var(--b-navigation-font-size);
   color: var(--b-navigation-font-color);
   padding-bottom: var(--b-navigation-padding-bottom);  
   border: var(--b-page-border-width) solid var(--b-header-background-color); /* unsichtbar, für border radius bei a:hover */    
}
#headerNavigation a {
   font-size: var(--b-navigation-font-size);
   color: var(--b-navigation-font-color);
   text-decoration: none;      
}
#headerNavigation a:hover {
   background-color: var(--b-header-background-hover-color);
   border-radius: 3px;
}
#headerNavigation .aktiv a{
   /* Menüanzeige: aktuell aktive Seite */
   font-weight: 600; /* sollte etwas weniger als bold sein */
}

#headerNavigation .navigationItem {
   /* immer sichtbarer Item, z.B. Liste oder Startseite */
   text-align: right; 
   position: relative; /* ermöglicht eine fixe Position der subnavigation in Relation zum navigationItem. */
   margin-bottom: 10px;        
}


#headerNavigation .navigationItem .subnavigation {
   /* Untermenüs anzeigen oder nicht - im Normalfall nicht anzeigen */
   display: none;
}
#headerNavigation .navigationItem:hover .subnavigation {
   /* Untermenüs anzeigen oder nicht - beim :hover über den Menü-Item anzeigen*/
   display: grid;
}

#headerNavigation .navigationItem .subnavigation {
   /* Style der Summe aller Untermenüs */ 
   /* hier kein 'display: grid'. wird mit :hover hinzugefügt */
   grid-template-columns: auto; /* eine Spalte, variable Anzahl Zeilen */
   position: absolute;  /* bewirkt eine fixe Position in Relation zum navigationItem. Dieser muss position relative sein */
   top: calc(var(--b-navigation-font-size) + var(--b-navigation-padding-bottom));
   left: 0;
   width: auto;
   background-color: var(--b-subnavigation-background-color);
   border: var(--b-page-border-width) solid var(--b-page-font-color);
   border-radius: 3px;
   padding: 5px;
}

#headerNavigation .navigationItem .subnavigation a {  
   font-size: var(--b-subnavigation-font-size);
   color: var(--b-page-font-color);
}
#headerNavigation .navigationItem .subnavigation a:hover { 
   background-color: var(--b-subnavigation-hover-color);
   display: block; 
   padding-top: 3px;
   padding-bottom: 1px;
}
#headerNavigation .navigationItem .subnavigation .subnavigationItem {
   text-align: left; 
   border-radius: 3px;
   padding-left: 0;
   padding-right: 0; 
   padding-bottom: 0;
}


#headerSuchfeld {
   /* Ist Grid-Element  in Spalte 2 und Reihe 2 von #header */
   /* Enthält das #headerSuchfeldFormular und die #Vorschläge */
   grid-column: 2 / 3;
   grid-row: 2 / 3;
   --b-formularbox-width: 250px; /* gilt auch für #Vorschläge */ 
}
#headerSuchfeldFormular {   
   /* Spezialvariante von -formularBox */   
   grid-template-columns: 222px auto;
   grid-column-gap: 2px;  
   --b-formularbox-input-padding: 0;
   /* Grid-Elemente rechtsbündig angleichen */
   justify-content: end;
   margin: 0 0 0 auto;   
}
#headerSuchfeldFormular input {
   
}
#headerSuchfeldFormular .suchEingabe {
/*   margin-bottom: -4px;   */
}
#headerSuchfeldFormular .suchLöschKnopf {
   margin-top: 2px;
}
#Vorschläge {
   float: right;
}




#seitenHeader {
   /* Titel links, Knöpfe rechts */
   /* var(--b-seitenheader-titel-breite) wird per JavaScript angepasst, falls keine Knöpfe (siehe functions "seitenheaderAnpassen") */
   display: grid;
   grid-template-columns: var(--b-seitenheader-titel-breite) auto;
   grid-column-gap: var(--b-data-gap); 
}

#seitenHeaderTitelBrutto {
   grid-column: 1 / 2;   
}


#seitenheaderFilterfeld {
   width: 250px;
   grid-template-columns: 224px auto;
   grid-column-gap: 3px;
}
#seitenheaderFilterfeld .filterLöschKnopf {   
   padding-top: 2px;
}


#seitenHeaderKnöpfeBrutto {
   grid-column: 2 / 3;
   /* padding-top: calc(((var(--b-seitenheader-height) - var(--b-seitenheader-knopf-höhe)) / 2) + 1px); */
}
.Knopf1 { 
   /* im Landscape rechtsbündig, falls nur 1 Knopf:  */
   margin-left: calc(((var(--b-data-breite) - var(--b-seitenheader-knopf-margin-left)) / 2) + var(--b-seitenheader-knopf-margin-left));
}



/* allgemein verwendbare Klassen */
/* ----------------------------- */


/* Formulare */
/* --------- */


.b-formularBox {
   display: grid;
   grid-template-columns: var(--b-formularbox-label-width) 1fr;
   grid-column-gap: var(--b-formularbox-label-input-gap); 
   grid-row-gap: var(--b-formularbox-zeilen-gap); 

}
.b-formularBox label {
   grid-column: 1 / 2;
   text-align: right;
}
.b-formularBox input {
   /* der Button zählt auch als input, ist input type="button"! */
   grid-column: 2 / 3;
}
.b-formularBox textarea {
   /* resize: none; */  /* Falls manuelles Vergrössern des Feldes nicht erwünscht ist */
   border-color: var(--b-formularbox-border-color);
   border-width: var(--b-formularbox-border-width);  
}



/* Allgemein */
/* --------- */

/* falls Texte im Landscape anders lauten als im Portrait */
/* im HTML den Text zwei Mal ausgeben, einmal mit class sichtbarPortrait, einmal mit class sichtbarLandscape */
.b-sichtbarLandscape {
   /* Siehe auch b-sichtbar/b-unsichtbar in basis/cs../all.css für Ajax und Zeigen/Verstecken via javaScript */
   display: inline-block;
}
.b-sichtbarPortrait {
   /* Siehe auch b-sichtbar/b-unsichtbar in basis/cs../all.css für Ajax und Zeigen/Verstecken via javaScript */
   display: none;
}


	
	
/* Die Grössenbeschränkung für übergrosse Landscape-Bildschirme ist in app/landscape.css verlegt */
/* Die Breitengrenze ist je nach Anweundg anders und bei @media-queries können keine variablen verwendet werden */