/* 
 * 20241222 WR
*/

:root {
  --Anthracite:  #393D47; /* anthracite */
  --SchalkeBlue: #004D9D;
  --H96Green:    #179D33; /* NICHT 179633 */
  --RichElectricBlue:    #0099D5; /* Freistaat Bayern */
  --ChinaPostGreen: #00684d;
  --anthracite:  var(--Anthracite); /* syntactic sugar */

  --bg_normal:   var(--Anthracite);
  --fg_normal:   Ivory;
  --bg_menubar:  Ivory;
  --fg_menubar:  var(--Anthracite);
  --bg_footer:   Ivory;
  --fg_footer:   var(--Anthracite);
/*  --bg_link:     #ffffa0; */
/*  --bg_link:     #c0ffff; */
/*  --bg_link:     CornSilk; */
  --fg_link:     var(--Anthracite);
/*  --bg_link:     DeepSkyBlue;*/
  --bg_head:     Silver;
  --bg_mhead:    Silver;
  --bg_hover:    DeepSkyBlue;
  }

* {
  box-sizing: border-box;
  }

.js-on {display: none;}
.js-off {display: none;}

.js-status-checkbox {
  display: none;
  }

#js-status-enabled:checked  ~ * .js-on {
  display: initial;
  }

#js-status-disabled:checked  ~ * .js-off {
  display: initial;
  }

html {
  /* font-family: "Lucida Sans", sans-serif; */
  font-family: sans-serif;
  height: 100%;
  width: 100%;
  /*
  */
  }

body {
/* shouldn't be visible */
/*** 
 Next two lines to extend body to bottom of device.
 Requires <div style="flex: 1;"></div> just before footer.
***/
  display: flex;
  flex-flow: column nowrap;
/* */  
  margin: 0;
  padding: 0;
  border: 0;
  background-color: var(--bg_normal);
  color: var(--fg_normal);
  height: 100%;
  width: auto;
  /* overflow: hidden; /* Hide scrollbars */
  }

/*
label {
  position: relative;
  display: inline;
  text-align: left;
  padding: 0.5rem 1rem 0.5rem 1rem;
  text-decoration: none;
  color: var(--fg_menubar);
  background-color: var(--bg_menubar);
  font-size: 1.0rem;
  border-radius: 3px;
  }

*/

input[type=submit] {
  text-align: left;
  padding: 0.1rem 0.25rem 0.1rem 0.25rem;
  text-decoration: none;
  color: var(--fg_menubar);
  background-color: var(--bg_menubar);
  /*font-size: 1.0rem;*/
  border-style: none;
  border-width: 0px 0px 0px 0px;
  border-radius: 3px;
  }

textarea.mail-msg:hover,
input[type=submit]:hover {
  color: var(--fg_menubar); 
  background-color: var(--bg_hover); 
  }

input[type=submit]:focus {
  color: var(--fg_menubar); 
  background-color: lightgrey; 
  }

textarea.mail-msg {
  color: var(--fg_menubar);
  background-color: var(--bg_menubar);
  margin: 0.5rem 0.0rem 0.5rem 0.0rem;
/*  outline: none; */
  border-style: none;
  border-width: 0px 0px 0px 0px;
  border-radius: 3px;
  }

textarea.mail-msg:focus {
  background-color: var(--bg_menubar); 
   outline: 1px solid var(--bg_menubar);
   outline-offset: 2px; 
  /*  border:1px solid blue;
    box-shadow: 0 0 1px green;  
    border-style: none;
   border-width: 0px 0px 0px 0px; */
  }

.row::after {
  content: "";
  clear: both;
  display: table;
  }

.header {
  display: block; 
  /*  align-items: center; */
  background-color: var(--bg_normal);
  color: var(--fg_normal);
  padding: 0px 0.0rem 0px 0.0rem;
  margin: .0rem .0rem 0px 0rem;
  border-bottom: 1px solid var(--fg_normal);
  width: auto;
  }

.aside {
/*  background-color: var(--SchalkeBlue); */
/*  background-color: var(--H96Green); */
  background-color: var(--RichElectricBlue);
  padding: 15px;
  color: var(--fg_normal);
  text-align: left;
  font-size: 0.875rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  }

.footer {
  display: flex;
  position: relative;
  width: auto;
  background-color: var(--bg_normal);
  color: var(--fg_normal);
  border-top: 1px solid var(--fg_normal);
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  column-gap: 0.25rem;
/*  row-gap: .5rem; */
  }

.footer .mod-time {
  display: inline-block;
  font-size: 0.75rem;
  padding: 0.25rem;
  margin: 0.25rem;
  }

.footer  a {
/*  position: relative; */
/*  cursor: pointer; */
  color: var(--fg_menubar); 
  background-color: var(--bg_menubar); 
  text-decoration: none;
  padding: .25rem .5rem;
  margin: 2px 0.5rem 2px 0.5rem;
  border-radius: 3px;
  }

.footer a.back-button {
/*  display: inline-block; */
/*  font-size: 2.0rem; */
/*  
  padding: 0.0rem 0.5rem 0.0rem 0.5rem;
  margin: 0.5rem 0.5rem 0.5rem 0.5rem;
*/
  }

.footer  label:hover, 
.footer  a:hover {
  color: var(--fg_menubar); 
  background-color: var(--bg_hover); 
  }

.error_01 {
  margin: 0rem 0rem 0rem 1rem;
}

.error_01 a {
  display: inline-block;
/*  background-color: var(--bg_menubar); */
  border: 0px solid red;
  color: var(--fg_menubar);
  margin: 0px 0rem 0px 0rem;
  padding: 0px .25rem 0px .25rem;
  font-size: 1.00rem;
  text-decoration: none;
  text-align: center;
  border-radius: 3px;
  }

a.email-address {
  color: var(--fg_menubar); 
  background-color: var(--bg_menubar); 
  padding: 0.5rem 1rem 0.5rem 1rem;
  text-decoration: none;
  border-radius: 3px;
  }

a.email-address:hover {
  color: var(--fg_menubar); 
  background-color: var(--bg_hover); 
  }

.restricted {
  background-color: var(--ChinaPostGreen);
 }

.RGEonly {
  background-color: Navy;
 }


/* For mobile phones and larger */
div {border: 0px solid red;}
.optional-border {}
.optional-s-border {}
[class*="col-"] {
  width: 100%;
  float: left;
  padding: 5px;
  }

.header .main-menu-container {
  }

.header .main-menu-container .main-toggle-logo {
  display: flex;
  position: relative;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  column-gap: .25rem;
/*  row-gap: .5rem; */
  width: auto;
  margin: auto;
  padding: 0;
  }

.header .main-menu-container .menu-checkbox {
  display: none;
  }

.header .main-menu-container a.logo {
  display: inline-flex;
/*  font-size: 4em; */
/*  font-weight: 900; */
/*  padding: 0.0rem 1.0rem; */
/*  background-color: var(--H96Green); */
/*  background-color: var(--RichElectricBlue); */
/*  background-color: var(--ChinaPostGreen); */
  /*
  color: red;
  */
  white-space: wrap;
  width: auto;
  height: auto;
  margin: 0.5rem 0.5rem 0.5rem 0.5rem;
  border-radius: 10px;
  border-style: solid;
  border-width: 3px 3px 3px 3px;
  color: var(--fg_normal); 
  background-color: var(--bg_normal); 
  text-decoration: none;
  }

.header .main-menu-container a.logo img {
  width: 7rem;
  vertical-align: middle;
  }

.header .main-menu-container a.logo:hover {
  color: var(--fg_normal);
  background-color: var(--bg_hover);
  width: auto;
/*  background-color: gray; */
/*
  border-radius: 3px;
  border-style: solid;
*/
/*  border-color: red; */
/*  border-width: 2px 2px 2px 2px; */
  }

#main-menu-burger-label {
  color: var(--fg_menubar); 
  background-color: var(--bg_menubar); 
/*  width: 3.0rem; */
/*  cursor: pointer; */
  text-align: center;
  color: var(--fg_menubar); 
  background-color: var(--bg_menubar); 
  font-size: 2.0rem;
  padding: 0.0rem 0.5rem 0.0rem 0.5rem;
  margin: 0.5rem 0.5rem 0.5rem 0.5rem;
  border-radius: 3px;
  }

#main-menu-burger-label:hover {
  background-color: var(--bg_hover);
  }

.header .main-menu-container .main-menu {
  display: none;
  }

.header .main-menu-container .menu-checkbox:checked ~ .main-menu {
  display: inline;
  }

.header .main-menu-container .main-menu ul {
  display: inline-block;
  position: absolute;
  z-index: 1;
  list-style-type: none;
  margin: 0;
  padding: 0;
  line-height: 2.5rem;
  }

.header .main-menu-container .main-menu li {
  display: block;
  color: var(--fg_menubar);
  background-color: var(--bg_menubar);
  }

.header .main-menu-container .main-menu ul li a,
.header .main-menu-container .main-menu ul li label {
  position: relative;
  display: block;
  text-align: left;
  padding: 0.5rem 1rem 0.5rem 1rem;
  text-decoration: none;
  color: var(--fg_menubar);
  background-color: var(--bg_menubar);
  font-size: 1.0rem;
  }

.header .main-menu-container .main-menu ul li a:hover,
.header .main-menu-container .main-menu ul li label.menu-toggle:hover {
  color: var(--fg_menubar);
  background-color: var(--bg_hover);
  }

.footer a.menu-toggle {
  display: none;
  }

.header .main-menu-container .main-menu hr.menu-toggle, 
 hr.other-sites {
  display: block;
  height: 2px;
  background-color: var(--fg_menubar);
  margin-top: 0.0em;
  margin-bottom: 0.0em;
  margin-left: 0.2rem;
  margin-right: 0.2rem;
  border-style: inset;
  border-width: 0px 0px 0px 0px;
  }

ul.other-sites {
  display: inline-block;
  position: static;
  list-style-type: none;
/*  line-height: 2.5rem; */
/*
  margin: 0.5rem 0.5rem 0.5rem 0.5rem;
  padding: 0.5rem 0.5rem 0.5rem 0.5rem;
*/
  margin: 0;
  padding: 0;
  border-radius: 0px;
  }

ul.other-sites li{
  display: block;
/*
  color: var(--fg_menubar);
  background-color: var(--bg_menubar);
  border-style: solid;
  border-width: 1px 1px 1px 1px;
  border-radius: 5px;
*/
  }

ul.other-sites li a,
ul.other-sites li label {
/*
  display: inline;
*/
  display: block;
  text-align: left;
  margin: 2px 0.5rem 2px 0.5rem;
  padding: .25rem .5rem;
  text-decoration: none;
  color: var(--fg_menubar);
  background-color: var(--bg_menubar);
  font-size: 1.0rem;
/*
  border-style: solid;
  border-width: 1px 1px 1px 1px;
*/
  border-radius: 3px;
  }

ul.other-sites li a:hover,
ul.other-sites li label:hover {
  color: var(--fg_menubar);
  background-color: var(--bg_hover);
  }

ul.other-sites li{
  display: block;
/*
  color: var(--fg_menubar);
  background-color: var(--bg_menubar);
  border-style: solid;
  border-width: 1px 1px 1px 1px;
  border-radius: 5px;
*/
  }

ul.gimmicks {
  display: inline-block;
  position: static;
  list-style-type: none;
/*
  line-height: 2.5rem;
  margin: 0.5rem 0.5rem 0.5rem 0.5rem;
  padding: 0.5rem 0.5rem 0.5rem 0.5rem;
*/
  margin: 0;
  padding: 0;
  border-radius: 0px;
  }

ul.gimmicks li{
  display: block;
  color: var(--fg_menubar);
  background-color: var(--bg_menubar);
  margin: 2px;
  padding: 0.5rem 0.5rem 0.5rem 0.5rem;
  border-radius: 3px;
/*
  border-style: solid;
  border-width: 1px 1px 1px 1px;
*/
  }

.home {
  position: relative;
}

.home a {
  position: relative;
/* padding: 0.5rem 1rem 0.5rem 1rem; */
  margin-right: 0.0rem;
  text-decoration: none;
  color: var(--fg_menubar);
/* background-color: var(--bg_menubar); */
  white-space: nowrap;
}

.home a:hover {
  color: var(--fg_menubar); 
  background-color: var(--bg_hover); 
  }

.status-aside {
  position: relative;
  background-color: var(--bg_normal);
/*  padding: 15px; */
  color: var(--fg_normal);
  text-align: left;
  font-size: 0.75rem;
/*  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); */
  }

.status {
  position: relative;
  background-color: var(--bg_normal);
  color: var(--fg_normal);
  text-align: left;
  font-size: 0.75rem;
/* white-space: normal; */
 }

.status-various hr {
  display: block;
  height: 1px;
  background-color: var(--fg_normal);
  margin-top: 0.0em;
  margin-bottom: 0.0em;
  margin-left: 0.0rem;
  margin-right: 0.0rem;
  border-style: inset;
  border-width: 0px 0px 0px 0px;
  }

.status button {
  background-color: var(--fg_normal);
  color: var(--bg_normal);
  margin: 2px 0px 2px 0px;
  padding: 1px 4px 1px 4px;
  border-radius: 5px;
  font-size: 0.75rem;
  }

.status input[type=file]::file-selector-button,
.status input[type=reset] { 
  background-color: var(--fg_normal);
  color: var(--bg_normal);
  margin: 2px 0.5rem 2px 0px;
  padding: 1px 4px 1px 4px;
  border-radius: 5px;
  font-size: 0.75rem;
  }

.status input[type=file]::file-selector-button:hover,
.status input[type=reset]:hover,
.status button:hover {
  color: var(--fg_menubar); 
  background-color: var(--bg_hover); 
  }

.status input[type=file] {
  font-size: 0.75rem;
  }

ul.status-various {
  /* word-break:break-all; */
  list-style-type: none;
  margin: .0rem .0rem .0rem .0rem;
  padding: 0 0 0 0.0rem;
  }

ul.status-various li {
  margin: 0.5rem .0rem 0.5rem 0.25rem;
  border: 0px solid var(--fg_normal); 
  }

button.piano {
  /* margin: 0.5rem .0rem 0.5rem 0.25rem; */
  /* margin: 0.5rem 0.25rem 0.5rem 0.25rem;
  padding: 0.0rem 0.25rem 0.0rem 0.25rem; */
  display: inline-block;
  width: 5em;
  margin: 2px 0px 2px 0px;
  padding: 1px 4px 1px 4px;
  border-radius: 5px;
  border: 0px solid var(--fg_normal); 
  font-size: 0.875rem;
  /* border-radius: 3px; */
  background-color: var(--fg_normal);
  color: var(--bg_normal);
  }

/***
***/
  button.piano:hover{
  color: var(--fg_menubar); 
  background-color: gray; 
  }

@media only screen and (min-width: 600px) {
  /* For tablets and larger */
  .col-s-1 {width: 8.33%;}
  .col-s-2 {width: 16.66%;}
  .col-s-3 {width: 25%;}
  .col-s-4 {width: 33.33%;}
  .col-s-5 {width: 41.66%;}
  .col-s-6 {width: 50%;}
  .col-s-7 {width: 58.33%;}
  .col-s-8 {width: 66.66%;}
  .col-s-9 {width: 75%;}
  .col-s-10 {width: 83.33%;}
  .col-s-11 {width: 91.66%;}
  .col-s-12 {width: 100%;}

  div {border: 0px solid yellow;}
  
  .optional-s-border {border-left: 1px solid var(--fg_normal);}
  
  .header .main-menu-container {
    display: inline-flex;
    }
  
  .header .main-menu-container label.menu-toggle {
    display: none;
    }

  .header .main-menu-container div.main-menu {
    display: inline-flex;
    margin: auto;
    }

  .header .main-menu-container .main-menu ul {
    display: inline;
    position: static;
    list-style-type: none;
    line-height: 2.5rem;
    margin: 0.5rem 0.0rem 0.5rem 0.0rem;
    }

  .header .main-menu-container .main-menu li{
    display: inline;
    margin: 0.5em .5em 0.5em .5em;
    padding: 0;
    color: var(--fg_menubar);
    background-color: var(--bg_menubar);
    white-space: nowrap;
    }

  .header .main-menu-container .main-menu ul li a,
  .header .main-menu-container .main-menu ul li label {
    display: inline;
    text-align: left;
    margin: 0;
    padding: .25rem .5rem;
    text-decoration: none;
    color: var(--fg_menubar);
    background-color: var(--bg_menubar);
    font-size: 1.0rem;
    border-radius: 3px;
    }

  .header .main-menu-container .main-menu li.menu-toggle,
  .header .main-menu-container .main-menu hr.menu-toggle {
    display: none;
    }

  .footer a.menu-toggle {
    display: inline;
    }
  }

  

@media only screen and (min-width: 850px) {
/*
@media only screen and (min-width: 768px) {
*/
/* For desktop: */
 .col-1 {width: 8.33%;}
 .col-2 {width: 16.66%;}
 .col-3 {width: 25%;}
 .col-4 {width: 33.33%;}
 .col-5 {width: 41.66%;}
 .col-6 {width: 50%;}
 .col-7 {width: 58.33%;}
 .col-8 {width: 66.66%;}
 .col-9 {width: 75%;}
 .col-10 {width: 83.33%;}
 .col-11 {width: 91.66%;}
 .col-12 {width: 100%;}
  div {border: 0px solid green;}
  .optional-border {border-left: 1px solid var(--fg_normal);}
  }