/* Allgemeine Formate: */
body { margin: 0.5em; font: 12pt Verdana; max-width: 100%; }
h1,h2,h3,h4,p,img { margin: 0.1em; }

table { width: 100%; }
th,td { padding: 0.2em; }
th { text-align: left; }
textarea { width: 100%; }
input[type="text"].short { width: 3em; }
input[type="text"].long { width: 99%; }
img, textarea { max-width: 99%; }
.pageTitle { margin: 0.3em 0.1em; }
img.pageTitle { display:block; margin: 1em 0em; }
.adminPageTitle { margin-left: 1.6em; }

input:required + label::before {
  position: absolute;
  left: 300%;
  content: "★";
  color: red;
}
input:required:valid + label::before {
  content: "✔";
  color: green;
}

.error { font: 12pt Verdana; color: red; background-color: white; padding: 0em 0.2em; }
.alert { font: 12pt Verdana; color: red; background-color: yellow; padding: 0em 0.2em; }
.warning { font: 12pt Verdana; color: black; background-color: yellow; padding: 0em 0.2em; }
.success { font: 12pt Verdana; color: black; background-color: lightgreen; padding: 0em 0.2em; }
.debug   { color: orange; background-color: lightgray; padding: 0em 0.2em; }
.italic { font-style: italic; }
.bold { font-weight: bold; }
.tal { text-align: left; }
.tac { text-align: center; }
.centered { display:block; margin: 1em auto; }
.ro {  background-color: lightgray; }
.required {  background-color: PeachPuff; }
.fixedfont { font-family: Courier New; }
.fontSmaller { font-size: 0.8em; }
.footer { font-size: 0.6em; }
.tipp { font-size: 0.8em; display: flex; }
.no-border { border: none; }
.no-wrap { 
  white-space: nowrap;  /* verhindert Umbruch an Leerzeichen */ 
  }
.mt1b0 { margin-top: 1em; margin-bottom: 0.2em; }  /* space for questions */
.wid100-45 { width: 100%; height: 100%; } /* eg. img tags default full size / half size at big screens */
.shadowed { 
        -moz-box-shadow:1px 1px 6px #a0a0a0; /* Firefox */
        -webkit-box-shadow:1px 1px 6px #a0a0a0; /* Chrome, Safari */
        -khtml-box-shadow:1px 1px 6px #a0a0a0; /* Konqueror */
        box-shadow:1px 1px 6px #a0a0a0; /* CSS3 */
      }

/* Abgerundete Ecken: */
fieldset, input, select, textarea, button, .rounded { 
  border-width: 0.1em;
  border-radius: 0.3rem; 
  }

/* overwrite navi.css formats: */
label.hamburg { top: 0.5em; }
/* nav.navi { box-shadow: 8px 0px 10px -4px darkgray; } */
ul.navi { box-shadow: 4px 8px 4px darkgray; }

/* menue formats: */
form.menue { margin-left: 2.0em; margin-top: 0em; margin-bottom: 0.3em; }
form.adminmenue { margin: 0.2em; }
button.menue { height: 2.0em; padding: 0em 0.2em; margin: 0em 0.2em 0.2em; vertical-align: middle; }
button.imgBtn { border: none; padding: 0; margin-top: 0em; }
img.menue { height: 2.0em; width: auto; }

/* gallery formats: */
button.index { cursor: pointer; margin: 0.3em auto; padding: 0; }
div.album, div.index { display: flex; flex-flow: column; }
figure.album { position: relative; margin: 1em auto; padding: 0.2em; }
figure.album > img { display: block; margin: 0; max-height: 36em; }
figure.album > img.index { height: 10em; width: 10em; margin: 1.5em; }
figure.album span.album-symbol { 
  position: absolute;
  /*bottom: 0.1em;*/
  right: 0.3em;
  width: 1em; height: 1em; 
  color: white;
  background: rgba(0,0,0,.3);
  }
figure.album figcaption.album { 
  position: absolute;
  bottom: -1.6em;
  padding-bottom: 0.3em;
  width: 99%;
  line-height: 1.5em;
  color: white;
  background: rgba(0,0,0,.3);
  }
figure.album figcaption p { padding: 0em 1em; }  

@media all and (min-width: 20rem) {
  div.index { flex-flow: row wrap; }
  figure.album > img.solo { max-height: 26rem; max-width: 19rem; width: 19rem; height: auto; }
  figure.album > img.soloh { max-height: 26rem; max-width: 19rem; width: 19rem; height: auto; }
}
@media all and (min-width: 40rem) {
  div.album { flex-flow: row wrap; }
  div.flexCol { display: flex; flex-flow: column; }
  .fontSmaller { font-size: 0.7em; }
  figure.album > img.solo { max-height: 30rem; max-width: 39rem; width: 39rem; height: auto; }
  figure.album > img.soloh { max-height: 30rem; max-width: 39rem; height: 30rem; width: auto; }
}
@media all and (min-width: 60rem) {
  body {
    width: 59rem;
    margin: 0.5em auto;
    padding: 0; 
  }  /* overwrite flex.css */
  figure.album > img.solo { max-height: 33rem; max-width: 59rem; width: 59rem; height: auto; }
  figure.album > img.soloh { max-height: 33rem; max-width: 59rem; height: 33rem; width: auto; }  
}
@media print {
  div, h1, h2, h3, h4, p, span, td, textarea { color: black; }
  .no-print { display: none; }
}