/* Die date Angestelltenbereich_layout.css beschreibt Stileigenschaften, die nur von den
   Seiten des Angestelltenbereiches verwendet werden. 
   Man muss sie im html NACH der base_layout.css importieren
*/

/* Zuerst werden mal ein paar Sachen vom base_layout überschrieben */
a:link {
    /* Rahmenfarbe */
    border-color: rgb(100, 100, 100);
    /* Hintergrundfarbe */
    background-color: rgb(146, 167, 146); 
}

a:hover {
    /* Hintergrundfarbe heller */
    background-color: rgb(160, 179, 160); 
    /* Rahmenfarbe heller */
    border-color: rgb(110, 110, 110);
}

a:active {
    /* Hintergrundfarbe heller */
    background-color: rgb(160, 179, 160); 
    /* Rahmenfarbe heller */
    border-color: rgb(110, 110, 110);
}

a:visited {
    /* Schriftfarbe aller Links, im Angestelltenbereich auch für besuchte */
    color: var(--stdFontColor);
    /* Rahmenfarbe */
    border-color: rgb(100, 100, 100);
}

a.disabledLink:visited {
    /* Schriftfarbe aller Links, im Angestelltenbereich auch für besuchte */
    color: var(--disabledFontColor);
}

a.disabledLink:link {
    /* Schriftfarbe aller Links, im Angestelltenbereich auch für besuchte */
    color: var(--disabledFontColor);
    /* wenn man eine Maus hat, damit man sieht dass man ihn drücken kann */
    cursor: not-allowed;
}

nav.topmenu a { 
    /* Im Angestelltenbereich das Menü etwas kompakter */
    line-height: 140%;
}

label.hamburg { 
    /* Hintergrundfarbe */
    background-color: rgb(146, 167, 146); 
    /* Ein bisschen Schatten (offset-x, offset-y, Breite, Spreizung, Farbe)*/
    box-shadow: 1px 1px 1px 1px rgb(100, 100, 100); 
    /* Rahmenfarbe */
    border-color: rgb(100, 100, 100);
}

label.hamburg:hover {
    /* Hintergrundfarbe heller */
    background-color: rgb(160, 179, 160); 
    /* Rahmenfarbe heller */
    border-color: rgb(110, 110, 110);
}

/* Der Rasterbereich texte */
texte {
    /* für kleine Displays volle Breite (Rasterlinie 1 bis 5) */
	grid-column: 1 / 5;
    /* Zeilen 2 und 3 */
	grid-row: 2 / 4;
}
@media (min-width: 64em) { 
    texte{
        /* für große Displays linke Hälfte (Rasterlinie 1 bis 3, also Spalten 1 und 2) */
        grid-column: 1 / 3;
        grid-row: 2 / 4;
    }
}

/* Der Rasterbereich bilder */
bilder {
    /* für kleine Displays volle Breite (Rasterlinie 1 bis 5) */
	grid-column: 1 / 5;
    /* für kleine Displays Zeilen 4 und 5 */
	grid-row: 4 / 6;
}
@media (min-width: 64em) { 
    bilder{
        /* für große Displays rechte Hälfte (Rasterlinie 3 bis 5, also Spalten 3 und 4) wie base_layout */
        grid-column: 3 / 5;
        grid-row: 2 / 4;
    }
}

/* Der Rasterbereich fusszeile */
fusszeile {
    /* volle Breite (Rasterlinie 1 bis 5) */
    grid-column: 1 / 5;
    /* für kleine Displays Zeile 6 */
	grid-row: 6 / 7;
}

@media (min-width: 64em) { 
    fusszeile{
        /* für große Displays Zeile 4 */
        grid-row: 4 / 5;
    }
}

/* Der Rasterbereich arbeitsbereich. Wenn keine Aufteilung in Texte und Bilder vorliegt,
   nutzt der Arbeitsbereich die volle Breite */
arbeitsbereich {
    /* für kleine Displays volle Breite (Rasterlinie 1 bis 5) */
	grid-column: 1 / 5;
    /* Zeilen 2 und 3 */
	grid-row: 2 / 4;
    /* Innenabstand der Elemente zum Rand, erster Wert top/bottom, 2. Wert left/right */
    padding: 0.2em var(--paddingLR);
    /* Außenabstand des Rasterbereichs zu Nachbarn*/
	margin: 0.2em var(--marginLR);
}

/* Textarea Felder */
textarea {
    /* Die Font-Family müssen wir hier nochmals setzen da textarea eine eigene benutzen */
    font-family: arial, sans-serif;
    /* Schriftgröße */
    font-size: calc(0.6em * var(--zoom));
    /* Höhe des Feldes */
    height: calc(6em * var(--zoom));
    width: 100%;
    /* Keine Größenveränderung erlauben */
    resize: none;
    /* Scrollbar wenn nötig */
    overflow: auto;
}  

/* Ein Label und ein Eingabefeld ergeben ein eingabeElement */
.eingabeElement {
    /* Label linksbündig, Eingabefeld rechtsbündig */
    display: flex;
    /* Die Elemente liegen nebeneinander */
    flex-direction: row;
    /* erstes Element links, letztes rechts */
    justify-content: space-between;
} 

/* ein paar Besonderheiten für Eingabefelder */
.Eingabefeld {
    /* Rahmenfarbe */
    border-color: rgb(190, 190, 190);
    /* Rand um alle Links */
    border-radius: 0.2em 0.2em 0.2em 0.2em;
    border-width: 0.1em;
    border-style: solid;
    /* Gleiche Schrift wie "SchriftKleinFett" */
    font-size: calc(1.0em * var(--zoom));
}

.Eingabefeld:hover {
    border-color: rgb(140, 140, 140);
}

/* Der Aktionsknopf */
.Aktionsknopf {
    /* Gleiche Schrift wie "SchriftKleinFett", die Font-Family müssen wir hier nochmals setzen
       da Buttons eine eigene benutzen */
    font-family: Times New Roman,Times,serif;
    font-size: calc(1.0em * var(--zoom));
    /* alle Links und Knöpfe bekommen fette Schrift */
    font-weight: bold;
    /* Schriftfarbe aller Links auch für den Knopf */
    color: var(--stdFontColor);
    /* Rahmenfarbe */
    border-color: rgb(100, 100, 100);
    /* Hintergrundfarbe */
    background-color: rgb(146, 167, 146); 
    /* Rand um alle Links */
    border-radius: 0.2em 0.2em 0.2em 0.2em;
    border-width: 0.1em;
    border-style: solid;
    /* Ein bisschen Schatten (offset-x, offset-y, Breite, Spreizung, Farbe)*/
    box-shadow: 1px 1px 1px 1px rgb(100, 100, 100); 
    /* Innenabstand zum Rand um den Link, erster Wert top/bottom, 2. Wert left/right */
    padding: 0.3em 0.5em;
    /* wenn man eine Maus hat, damit man sieht dass man ihn drücken kann */
    cursor: pointer;
}

.Aktionsknopf:hover {
    /* Hintergrundfarbe heller */
    background-color: rgb(160, 179, 160); 
    /* Rahmenfarbe heller */
    border-color: rgb(110, 110, 110);
    /* Ein bisschen Schatten (offset-x, offset-y, Breite, Spreizung, Farbe)*/
    box-shadow: 1px 1px 1px 1px rgb(110, 110, 110); 
}

.Aktionsknopf:active {
    color: var(--fireFontColor);
    /* Hintergrundfarbe heller */
    background-color: rgb(160, 179, 160); 
    /* Rahmenfarbe heller */
    border-color: rgb(110, 110, 110);
    /* Kein Schatten */
    box-shadow:none;
}

/* Ein über das Attribut disabled Aktionsknopf */
.Aktionsknopf:disabled {
    /* Schriftfarbe heller */
    color: var(--disabledFontColor);
    /* wenn man eine Maus hat, damit man sieht dass man ihn drücken kann */
    cursor: not-allowed;
}

.Aktionsknopf.waitforDone {
    background-color: rgb(255, 255, 135);
    cursor: wait;
}


.disabledLink {
    /* Schriftfarbe heller */
    color: var(--disabledFontColor);
    /* wenn man eine Maus hat, damit man sieht dass man ihn drücken kann */
    cursor: not-allowed;
}

/* Buttons im Angestelltenbereich haben andere Farbe, überschreiben */
button.menuButton {
    /* Rahmenfarbe */
    border-color: rgb(100, 100, 100);
    /* Hintergrundfarbe */
    background-color: rgb(146, 167, 146); 
}

button.menuButton:hover {
    /* Hintergrundfarbe heller */
    background-color: rgb(160, 179, 160); 
    /* Rahmenfarbe heller */
    border-color: rgb(110, 110, 110);
}

/* Das sind die Definitionen für alle Menü-Buttons, die gerade aktiv sind, d.h. gedrückt werden.
   Dies geht auch am Handy. 
*/
button.menuButton:active {
    /* Hintergrundfarbe heller */
    background-color: rgb(160, 179, 160); 
    /* Rahmenfarbe heller */
    border-color: rgb(110, 110, 110);
}

.disabled {
    display: none;
}

#reservierungssystem { 
    display: none; /* iframe mit eingebettetem Reservierungssystem erstmal verstecken */
} 

.fieldsetParent {
    /* Hintergrund*/
    background-color: rgb(230, 230, 230); 
    /* Eckenradius */
    border-radius: 0.2em 0.2em 0.2em 0.2em;
    /* der Rand des Bereichs */
    border-color: rgb(180, 180, 180);
    border-width: 0.1em;
    border-style: solid;
    /* Rahmen so groß wie Inhalt */
    width: min-content;
}   

.fieldsetChild {
    /* Hintergrund*/
    background-color: rgb(230, 230, 230); 
    /* Eckenradius */
    border-radius: 0.2em 0.2em 0.2em 0.2em;
    /* der Rand des Bereichs */
    border-color: rgb(180, 180, 180);
    border-width: 0.1em;
    border-style: solid;
}

.vertikaleElemente {
    /* Elemente untereinander */
    display: flex;
    /* Die Elemente liegen untereinander */
    flex-direction: column;
    /* von oben nach unten */
    justify-content: flex-start;
}

.horizontaleElementeWrap {
    /* Elemente nebeneinander */
    display: flex;
    /* Die Elemente liegen nebeneinander */
    flex-direction: row;
    /* von links nach rechts */
    justify-content: flex-start;
    /* Falls es nicht alles in eine Zeile Passt, dann halt notfalls umbrechen
       das geschieht z.b. bei quer gekipptem Handy */
    /*flex-wrap: wrap;*/
    flex-flow: wrap;
    /* ohne max-content macht er alles immer untereinander */
    width:max-content;
    /* Falls es nicht in die view passt wird gewrapt, 2px sind irgendwelche Linien */
    /*max-width: calc(100vw - var(--vScrollbarWidth) - 2px);*/
}

.maximaleBreiteEbene1 {
    /* Falls es nicht in die view passt wird gewrapt, padding & margin der Bereiche wird abgezogen, 2px sind irgendwelche Linien */
    max-width: calc(100vw - var(--vScrollbarWidth) - (2 * var(--marginLR)) - (2 * var(--extraMargin)) - (2 * var(--paddingLR)) - 2px);
}

.horizontalZentriertesElement {
    display: flex;
    /* horizontal zentriert */
    flex-direction: row;
    justify-content: center;
}

.horizontalSpaceBetween {
    /* erster links, letzter rechts, rest gleichverteilt dazwischen */
    justify-content: space-between;
}

.vertikalZentriertesElement {
    display: flex;
    /* vertikal zentriert */
    flex-direction: column;
    justify-content: center;
}

.vertikalerAbstand4px {
    /* Abstand zum vorherigen Element */
    margin-top: calc(4px * var(--zoom));
}
 
.vertikalerAbstand8px {
    /* Abstand zum vorherigen Element */
    margin-top: calc(8px * var(--zoom));
}

.vertikalerAbstand16px {
    /* Abstand zum vorherigen Element */
    margin-top: calc(16px * var(--zoom));
}

.popup_Thumbnail {
    max-width: calc(200px * var(--zoom));
    max-height: calc(200px * var(--zoom));
    /*cursor: pointer;*/
}

.curPopup_Thumbnail {
    max-width: calc(200px * var(--zoom));
    max-height: calc(200px * var(--zoom));
    cursor: not-allowed;
}

.noPopup_Thumbnail {
    width: calc(200px * var(--zoom));
    height: calc(200px * var(--zoom));
    /* Hintergrund*/
    background-color: rgb(150, 150, 150); 
    cursor: not-allowed;
}

.popupButton {
    display: block;
    height: min-content;     
    width: min-content;
    /* Schriftfarbe wie links */
    color: var(--stdFontColor);
    /* keine Unterstreichung des Linktextes */
    text-decoration: none;
    /* Rahmenfarbe */
    border-color: var(--iconButBorderColor);
    /* Hintergrundfarbe */
    background-color: var(--iconButBkgColor); 
    /* Rand */
    border-radius: 3px 3px 3px 3px;
    border-width: 1px;
    border-style: solid;
    /* Ein bisschen Schatten (offset-x, offset-y, Breite, Spreizung, Farbe)*/
    box-shadow: 1px 1px 1px 1px rgb(100, 100, 100); 
    /* wenn man eine Maus hat, damit man sieht dass man ihn drücken kann */
    cursor: pointer;
}

displayHelp {
    /* Popup über alle anderen Fenster */
    z-index: 10;
    /* Damit sie überlappen kann */
    position: fixed;
    /* Hintergrund*/
    background-color: rgb(240, 240, 240); 
    /* Breite und Höhe sollen sich immer dem einbettContainer anpassen */
    width: 95vw; 
    height: 95vw; 
    /* Scrollbar wenn nötig */
    overflow: auto;
}

.overlayPopup {
    /* Innenabstand der Elemente zum Rand */
    padding: 4px;
    /* Fenster muss position: fixed haben */
    max-width: 95%;
    max-height: 95%;
    /* Hiermit wird das Popup positioniert */ 
    top: 50%; left: 50%;
    /* Dann um halbe Breite nach links oben schieben */
    transform: translate(-50%,-50%);
    /* Einen Schatten um das Popup um es hervorzuheben (offset-x, offset-y, Breite, Spreizung, Farbe) */
    box-shadow: 0 0 20px 5px rgb(150, 150, 150);
    /* Wenn der Bereich nach unten voll ist, wird automatisch eine Scrollbar eingeblendet */
    overflow: auto;
}

/* Das pdf wird jetzt im einbettContainer in die linke obere Ecke platziert */
.pdfVollformat {
    position: absolute; 
    top: 44px; 
    left: 0; 
    /* Breite und Höhe sollen sich immer dem einbettContainer anpassen */
    width: 100%; 
    height: calc(100% - 44px); 
    /* Kein Rahmen um das pdf */
    border: none;
}
  
/* Der Abbrechen-Button der Hilfe */
.res_iconButton {
    /* Schriftfarbe wie links */
    color: var(--stdFontColor);
    /* keine Unterstreichung des Linktextes */
    text-decoration: none;
    /* Rahmenfarbe */
    border-color: var(--iconButBorderColor);
    /* Hintergrundfarbe */
    background-color: var(--iconButBkgColor); 
    /* Rand */
    border-radius: 3px 3px 3px 3px;
    border-width: 1px;
    border-style: solid;
    /* Ein bisschen Schatten (offset-x, offset-y, Breite, Spreizung, Farbe)*/
    box-shadow: 1px 1px 1px 1px rgb(100, 100, 100); 
    /* wenn man eine Maus hat, damit man sieht dass man ihn drücken kann */
    cursor: pointer;
}

.res_iconMaxiButton {
    padding: 0px;
}

.res_iconMaxiImage {
    max-width: 35px;
    vertical-align: middle;
}

/* alle Knöpfe mit Bild */
button.res_iconButton.pick:hover {
    background-color: rgb(221, 255, 190);
    /* Ein bisschen Schatten (offset-x, offset-y, Breite, Spreizung, Farbe)*/
    box-shadow: 1px 1px 1px 1px rgb(110, 110, 110); 
}

/* Die class zentriertesBild50 skaliert die Bilder in den zur Verfügung stehenden Bereich, mit halber Breite */ 
.zentriertesBild50 {
    max-width: 50vw;
    max-height: 90vh;
    height: auto;
}