html {  position:relative; height:fit-content;}
body { margin:0px; padding:0px; background-color:#FFFEDA; background-image: url('/img/briefkopf_brauerei_klein.png');  background-size: 80%; background-repeat: no-repeat; background-position-x: center; height:fit-content; }

#head { width:100%; height:100%; }
#head div:not([class]) {display: inline-block; padding-left:50; padding-right:10; text-decoration: underline;}
#head div:hover { cursor: pointer;}

#album_edit {background-color: rgba(255, 255, 255, .9); float:left; max-height:100%; height:auto; width:auto; display: block; overflow-y:scroll; z-index:710; position:relative;}

#album {background-color: rgba(255, 255, 255, .9); float:left; width:auto;}
#album h3 {display:block; width:100%; text-align:center;}
.alben {background-color: rgba(255, 255, 255, .9);  width: fit-content; margin: 1em; padding: 1em;}
.alben p:hover { display:inline; cursor: pointer;}

#album .bild_feld {display:block; float:left; min-width:320px; position:relative; margin-left:auto; margin-right:auto;}
#album .bildangaben_feld {width:auto; min-width:20em; display:block; float:right; min-width:220px; position:relative;}
#album .bildangaben_feld li[onclick] {text-decoration: underline;}
#album .bildangaben_feld li {text-decoration: none;}
#album .bildangaben_feld textarea {width:100%; min-height:6em;}
#album .bildangaben_feld li[onclick]:hover{cursor:pointer}
.bild_rahmen {position:relative; width:fit-content; margin-left:auto; margin-right:auto;} 
.album_member {background-color: rgba(255, 255, 255, .9); clear:both; min-width:40%; min-height:50px; width:fit-content; padding: 0.5em;}

// .album_details {background-color: rgba(255, 255, 255, .9); min-width:300px; min-height:50px; max-height:100%; height:fit-content; flex-grow: 1;  flex-basis: 50%; flex-shrink: 1; overflow-y:scroll;}
#album img:hover {cursor: pointer;}
#album svg:hover {cursor: pointer;}
#album img {max-width:100%; position:relative;}

#TAGsortlist {background-color: rgba(255, 255, 255, .9); float:left; width:90%; margin: 1em; padding: 1em; min-width:500px;}
#TAGshow {float:left; width:90%; margin: 1em; padding: 1em; min-width:500px;}
.clickable{text-decoration: underline;}
.clickable:hover{cursor: pointer;}
.tagsub {width:100%; clear:both;}
.tagsub div.tagsub {padding-left:5%; width:95%;}
.tagsub div.tagafter {min-height:10px; width:5em; width:100%; clear:both;}
#TAGsortlist .tagcE {display:none;}
#TAGshow .tagcE {display:block;}
#TAGshow p {clear:both;}
.tagcE textarea {float:left;}
.tags_select div {padding-left:2em;}

.set_tagpos {font-size:2em;}
.set_tagpos:hover {cursor: pointer;}

.tab {width:fit-content; float:left; padding-left:1em;}
.row {width:100%;}
.row label {float:left; padding-right:1em;}
.row input {float:right;}

.on {color:green; font-weight:bold; margin:0.5em;}
.off {color:red; font-weight:bold; margin:0.5em;}

#main {height:90%; display:block;}

#logout {float:right; padding:1em; padding-bottom:0px; text-align:center;}
#logout input {width:fit-content; display:block; background-color: rgba(50, 20, 10, 0.5); border: 1px solid #4F5758; border-radius: 6px; }

#login {float:right; padding:1em; padding-bottom:0px; text-align:center;}
#login fieldset {background-color: rgba(255, 255, 225, 0.8); text-align:center; border: 1px solid #4F5758; border-radius: 6px; }
#login input {width:8em; display:block;}

#list {display:none; overflow-y:scroll; height:80%; float:left; position:relative;}
#content {display:none; margin-left:1em; height:100%; overflow-x:scroll; float:right; position:relative;}

#fullscreen {display:none; }
#close_fullscreen {background-color:#FFF; color:red; z-index:820; width: fit-content; right:0%; height:15%; position:absolute;}
#detail_zoom    {background-color:#FFF; color:red; z-index:820; width: fit-content; left:0%; bottom:0%; height:15%; position:absolute;}
#rundgang_datum {background-color:#FFF; color:black; z-index:820; width: fit-content; left:0%; bottom:0%; height:auto; position:absolute; padding: 0.2em;}

#bildrahmen {background-color: rgba(100, 100,80, 0.3); position:absolute;  overflow:hidden;}
#bild {display: block; z-index: 750; position:relative; overflow:hidden;}
#map { background-color: #FFF; opacity: 0.9; position:relative; max-width:100%;}

#help {background-color: rgba(255, 255, 255, .9); float:left; width:auto; margin: 1em; padding: 1em;}

.upload {background-color: rgba(255, 255, 255, .9);  width: auto; margin: 1em; padding: 1em;}

#gpsfunctions {max-width: 100%;}
.gps {width: 100%;}
.gps td {width: 12%;}
.gps input{width: 8em;}

// #main {position:absolute; width:100%;}

.klickpoint {cursor:pointer; z-index:900; position:relative;}
.klickpoint circle {z-index:900; position:relative;}
.klickpoint circle:hover,
.klickpoint circle:focus {
  color: #c82f04;
}

.onoff {
    display: inline-block;
    padding: 10px;
    background-color: lightgray; /* Standard Hintergrund */
    cursor: pointer;
    border: 2px solid #999; border-radius: 6px; 
}

.onoff:has(> #svg_gps_follow:checked) {
    background-color: #AAFFAA; /* Hintergrund, wenn die Checkbox aktiviert ist */
    border: 2px solid #009900; border-radius: 6px; 
}
.gpsfollow_rundgang {
    display:block;
    width: 80%;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
    text-shadow: -1px -1px 0 rgba(169,169,169, 0.5), 1px -1px 0 rgba(169,169,169, 0.5), -1px 1px 0 rgba(169,169,169, 0.5), 1px 1px 0 rgba(169,169,169, 0.5);
}


.main_rundgang {height:100% !important;}
 #top { 
    position: absolute;
      width: 100%;
      height:auto;
      z-index: 700;
    }

@media (orientation: landscape) {
    #top { 
      height: 100%;
      width: auto;
      text-orientation: sideways-right;
      writing-mode: sideways-lr;
    }
}