/* Portrait- bzw. Smartphone-Darstellung */
/* ------------------------------------- */

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

/* Variablen, die je nach landscape oder portrait andere Werte haben */

/* 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: 0;   /* mit javascript herausfinden, ob Landscape oder Portrait */
   
   --b-scrollbarWidth: 2px;     /* wird per JavaScript genau gesetzt in basis/app/functions/scrollbarWidthSetzen */
   --b-page-width: calc(100vw - var(--b-scrollbarWidth));
   
   --b-page-padding-left: 5px;	
   --b-page-padding-right: 5px; /* muss mindestens Scrollbarbreite sein */
 

   --b-header-height: 45px;                /* variable Grösse, wird per javaScript verändert um Suchfeld einzublenden */
   --b-header-height-mit-suchfeld: 90px;   /* wird per javaScript auf --header-height übertragen */
   --b-header-height-ohne-suchfeld: 45px;  /* wird per javaScript auf --header-height übertragen */ 
   --b-header-top-bot-padding: 8px;	

   --b-subnavigation-background-color: var(--b-header-background-color);
   --b-subnavigation-font-size: 14px;
   --b-subnavigation-hover-color: var(--b-header-background-hover-color);

   --b-seitenheader-height: 40px;   /* wird per JavaScript aus einem der nachfolgenden Werte gesetzt */ 
   --b-seitenheader-height-mit-knöpfen: calc(var(--b-seitenheader-titel-brutto-höhe)
                                           + var(--b-seitenheader-knöpfe-brutto-höhe) 
                                           + var(--b-page-border-width)
                                           + 24px); /* falls auch noch Filterfeld, wird es knapp */
   --b-seitenheader-height-ohne-knöpfe: 40px;   
   
   --b-seitenheader-titel-brutto-höhe: 40px;
   
   --b-seitenheader-knöpfe-brutto-breite: var(--b-data-breite); 
   
   --b-seitenheader-titel-breite: 100%;              /* nur im Landscape verwendet */
   --b-seitenheader-titel-breite-ohne-knöpfe: 100%;  /* nur im Landscape verwendet */
   --b-seitenheader-titel-breite-mit-knöpfen: 100%;  /* nur im Landscape verwendet */
   
   --b-seitenheader-font-size: 18px;
   --b-seitenheader-font-size-details: 12px;
   
   --b-seitenheader-knöpfe-brutto-höhe: 38px;

   --b-seitenheader-knopf-margin-left: 3px;  
   --b-seitenheader-knopf-höhe: 32px;
   --b-seitenheader-knopf-font-size: 11px;
   
   --b-flashmeldung-height: 3px; 
   --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));
   
   --b-inhalt-padding-bottom: 100px;
   
}


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

/* 2-spaltige Datenausgabe im Portrait untereinander */
#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(--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);
	grid-template-rows: auto auto;    
}
.data1 {
	/* Normalfall: linke Seite im Portrait oben*/
   grid-row: 1 / 2;
}
.data2 {
	/* Normalfall: rechte Seite im Portrait unten*/
   grid-row: 2 / 3;
}
.data3 {
	/* linke Seite unten (startet in der 2. Reihe) */
   grid-row: 2 / 3;    
}
.data4 {
	/* die rechte Seite oben (startet in der 1. Reihe) */
	grid-row: 1 / 2;
}
.data0 {
   /* wie .data1-4, aber einspaltig*/
   grid-row: 1 / 3; /* über alles */
}

#header, #seitenHeader, #flashmeldung, #footer {	 
}

#header {
	/* nur Titel und NaviIcons. Navigation und Suchfeld per JavaScript an position fixed */  
   display: grid;
   justify-content: space-between;
   grid-template-columns: 70% auto;    
	grid-template-rows: auto;  
}
#header #headerTitel { 
   grid-column: 1 / 2;   
   grid-row: 1 / 2;   
}
#header #headerNaviIcons {
   grid-column: 2 / 3;   
   grid-row: 1 / 2;      
} 
#header #headerNaviIcons .hamburgerSymbol, #header #headerNaviIcons .lupenSymbol {
	float: right;
/*   padding-left: 18px;*/
   padding-left: 24px;   
}
#header #headerNaviIcons .hamburgerSymbol img, #header #headerNaviIcons .lupenSymbol img{
	width: 15px;  
}
#header #headerNaviIcons .hamburgerSymbol {
   padding-right: 3px;
}



#headerNavigation {
   /* darüber klatschen und Borderlinien wieder einfügen */
   position: fixed;
   top: var(--b-header-height);
   left: 0;
   width: 100%;  
   border: var(--b-page-border-width) solid var(--b-page-border-color); 
   border-top: var(--b-page-border-width) solid var(--b-subnavigation-background-color); 
   padding-top: 10px;
   padding-bottom: 5px;
   /* hier kein 'display: grid'. Wird mit class .zeigenMenu per javaScript hinzugefügt */
   grid-template-columns: auto; /* eine Spalte */
   grid-template-rows: repeat(var(--b-navigation-items), auto); /* mehrere Zeilen */
   grid-row-gap: 16px;
   padding-left: var(--b-page-padding-left);
   background-color: var(--b-header-background-color);
   font-size: var(--b-navigation-font-size);
   color: var(--b-navigation-font-color);
}
#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);
}
#headerNavigation .aktiv a{
   /* Menüanzeige: aktuell aktive Seite */
   font-weight: 600; /* sollte etwas weniger als bold sein */
}

.zeigenMenu {
   /* nur im portrait.css. Wird per javaScript hinzugefügt zur #headerNavigation hinzugefügt */
   display: grid;
}
.versteckenMenu {
   /* nur im portrait.css  Wird per javaScript hinzugefügt zur #headerNavigation hinzugefügt */
   display: none;
}


#headerNavigation .navigationItem {
   text-align: left;  
   padding-bottom: 15px;
}

#headerNavigation .navigationItem .subnavigation {
   display: grid;
   grid-template-columns: auto; /* eine Spalte, variable Anzahl Zeilen */
   grid-row-gap: var(--b-subnavigation-gap);
   background-color: var(--b-subnavigation-background-color); 
   padding-bottom: 5px;
}
#headerNavigation .navigationItem .subnavigationItem {
   padding-left: 20px;
   line-height: 2em;
}

#headerNavigation .navigationItem .subnavigation a {    
   font-size: var(--b-subnavigation-font-size); 
}
#headerNavigation .navigationItem .subnavigation a:hover {    
   background-color: var(--b-subnavigation-hover-color);
}

#headerSuchfeld {
   --b-formularbox-width: var(--b-data-breite); /* gilt auch für die Vorschläge */
}
#headerSuchfeldFormular {
   /* Spezialvariante von -formularBox */
   position: fixed;   
   top: var(--b-header-height-ohne-suchfeld);
   font-size: var(--b-page-font-size);    
   grid-template-columns: calc(var(--b-data-breite) - 30px) auto;
   grid-column-gap: 2px;  
}


.zeigenSuchfeld {
   display: block;
}
.versteckenSuchfeld {
   display: none;
}
#Vorschläge {
   position: fixed;
   top: var(--b-header-height-mit-suchfeld);
}
#Vorschläge a {
   line-height: 2em;      
}

#seitenHeader {
   /* Knöpfe oben, Seitentitel unten */
   grid-template-columns: auto;
	grid-template-rows: auto auto;   
}
#seitenHeaderTitelBrutto { 
   /* unten */
   grid-row: 2 / 3; 
}

#seitenheaderFilterfeld {
   width: var(--b-data-breite);
   grid-template-columns: calc(var(--b-data-breite) - 30px) auto;
   grid-column-gap: 5px;
}
#seitenheaderFilterfeld input{   
   margin-top: 1px;
}
#seitenheaderFilterfeld .filterLöschKnopf { 
   padding-top: 1px;
}




#seitenHeaderKnöpfeBrutto {
   /* oben */
   grid-row: 1 / 2;
}
.Knopf1 a, .Knopf2 a, .Knopf3 a, .Knopf4 a, .Knopf5 a {   
   border-radius: 3px;
   box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.Knopf1 { 
   /* im Portrait ganze Breite, falls nur 1 Knopf */
   flex-basis: calc(var(--b-data-breite) - var(--b-seitenheader-knopf-margin-left));
   flex-grow: 0;
   flex-shrink: 0;
}


.b-popupFenster {
   margin-right: var(--b-page-padding-right);
}


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


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

/* im Portrait label und input übereinander anstatt nebeneinander */

.b-formularBox {
   display: grid;
   grid-template-columns: auto; /* eine Spalte, zwei Zeilen */
   /* grid-row-gap: 0; */
}
.b-formularBox label {
   grid-column: 1 / 1;
   text-align: left;
}
.b-formularBox input {
   /* der Button zählt auch als input, ist input type="button"! */
   grid-column: 1 / 1;
   margin-bottom: 8px;
}
.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);
   margin-bottom: var(--b-formularbox-padding);
}


#headerSuchfeld input, .b-filterFeld input{
   margin-bottom: 0;
}



/* 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-sichtbarPortrait {
   /* Siehe auch b-sichtbar/b-unsichtbar in basis/cs../all.css für Ajax und Zeigen/Verstecken via javaScript */
   display: inline-block;
}
.b-sichtbarLandscape {
   /* Siehe auch b-sichtbar/b-unsichtbar in basis/cs../all.css für Ajax und Zeigen/Verstecken via javaScript */
   display: none;
}