@media only screen and (max-width: 600px) { :root {
  /*--fontSize: calc(100vw / 30);*/
  --fontSize: 14px;
}}

@media only screen and (max-width: 600px) {
  /* overrides raster.css */    
  body {
    padding: calc(var(--lineHeight)*0.5);
    padding-bottom: calc(var(--lineHeight) * 1);
  }
}

:root {
    --dark-col: #1f1e1c;
    --light-col: #f1efed;
    --grey-col: #6e6f6c;
    --grey-dim-col: #5e5f5c;
}

html,body{height:100%;}

html {
    margin:    0 auto; padding-bottom:0;margin-bottom:0rem;
    max-width: 1300px; background:white;    
}
/* manuelles Hell Dunkel */

html.dark { background-color:var(--dark-col); color:var(--light-col);}
html.dark hr{background-color:#919f9d; height:2px;}
html.dark input{ background-color:var(--dark-col); color:var(--light-col);} 
html.dark select{ background-color:var(--dark-col); color:var(--light-col);}
html.dark.default-bg{background-color:var(--dark-col);}

.dark{background-color:var(--dark-col);}
.light{background-color:white;}

body{ 
    margin-top:0;padding-top:0;margin-bottom:0;padding-bottom:0rem;
    /*hyphens:auto;*/
    overflow-y:scroll; /*scrollbar always present */
    }

article{    
    /* article elternelement hälte alles zusammen, erstes kind element auto(=normal), 2. fr so hoch wie geht und 3. wieder auto */
    min-height: 100%;
    display: grid;
    grid-template-rows: auto 1fr auto;
    grid-template-columns: 100%;
    margin:0;padding:0;
}      

p{hyphens:auto;}
.halfbottom{margin-bottom:calc(var(--lineHeight) * 0.5);}
.halfbottomdesk{margin-bottom:calc(var(--lineHeight) * 0.5);}
@media only screen and (max-width: 600px) {
  .halfbottomdesk{margin-bottom:0;}
}

.read{font-size:1.1rem;}
a{text-decoration:none;white-space:normal!important;  transition: 0.2s;}
a:hover{color: var(--red);}
a.active{color: var(--red); font-weight:normal}
h3 > a:hover{color: var(--red);text-decoration:none;}
h4 > a:hover{color: var(--red);text-decoration:none;}

ul.mainmenu{font-size:1.1rem;font-weight:400;text-transform:uppercase;}
.logolarge{}
.logosmall{color:#999;font-size:1.2rem;letter-spacing:0.05rem;}
.logosmall:hover{color:#999;}

input[type=submit]{border:0; color:#fff;font-weight:bold; font-size:1.1rem; background-color: var(--red)!important; height:calc(var(--lineHeight)*1.5);}
input[type=submit]:hover{background-color:#d4230f!important;cursor:pointer;}
input[type=reset]{border:0; color:#fff;font-weight:bold; font-size:1.1rem; background-color: #888; height:calc(var(--lineHeight)*1.5);}
input[type=reset]:hover{background-color:#777;cursor:pointer;}

/* small text, overrides raster*/
.small {
  font-size: 0.95rem;
  line-height: var(--lineHeight);
}

/* Header specific */
.submenu{
  padding-top:0;margin-top:0;
  margin-bottom:calc(var(--lineHeight)*1.00);
  padding-bottom:calc(var(--lineHeight)*0.75);
  margin-bottom:1rem;padding-bottom:0.5rem;
  border-bottom:2px solid var(--myfgcol);
  line-height:calc(var(--lineHeight)*1.250);
}
#submenulist li{margin-bottom:0;padding-bottom:0;font-size:1.3rem;}

/* variante zwei button rot , höhe nach css variable ppbutton und ggbutton in use */
.ppbutton{color:#fff;font-weight:bold; font-size:1.1rem; border:0px solid #666; background-color: var(--red)!important; 
height:calc(var(--lineHeight)*1.75); padding-left:1rem;padding-right:1rem; }
.ppbutton:hover{ 
    cursor:pointer;background:#d4230f!important;
}
.ggbutton{color:#fff;font-weight:bold; font-size:1.1rem; border:0px solid #666; background-color: #414c58; background-color:var(--grey-col); 
          height:calc(var(--lineHeight)*1.75); padding-left:1rem;padding-right:1rem; }
.ggbutton:hover{ 
    cursor:pointer;background-color:#313c48; background-color:var(--grey-dim-col); 
}

a.genbutton{border:0; color:#fff;font-weight:bold; font-size:1.1rem; background-color: var(--red); height:calc(var(--lineHeight)*1.5);}
.genbutton:hover{ 
  cursor:pointer;background-color: var(--red);height:calc(var(--lineHeight)*1.5);
}

.mytxtinput{border:1px solid #bbb;width:100%;box-sizing: border-box;}
.mytxtinput:focus{border:1px solid var(--red);outline:none;}
.myslctinput{border:1px solid #bbb;width:100%;box-sizing: border-box;height:calc(var(--lineHeight)*1.2);padding:0;background-color:transparent;color:var(--dark_col);}
.myslctinput.dark{color: var(--light-col);};
.myslctinput:focus{border:1px solid var(--red);outline:none;}
.myslctinput:hover{background:transparent;}


input.mychkbx[type=checkbox]{
display:none;}
input.mychkbx[type=checkbox] + label:before{
content:"⬜";
letter-spacing:1rem;
color:#aaa;    
}
input.mychkbx[type=checkbox]:checked + label:before { content: ""; }

input[type=checkbox]{border-color:#999;}


#main{margin-top: 1rem;padding-top:0rem;}
@media only screen and (max-width: 600px) {
  #main{ margin-top: calc(var(--lineHeight)*2.25); } /*2.25*/
}

.bbox{border: 1px solid black;
  padding: 0.5rem;
  overflow: hidden;}
  
.mysearch{border:0; xborder-bottom: 1px solid #000;width:auto;background:transparent;min-width:200px;}
.mysearch:focus{background-color:var(--default-bg);border:0;outline:none;}
.mysmallsearchinput:focus{background-color:var(--default-bg);border:0;outline:none;}

.uppercase{text-transform:uppercase;}

.flex-container {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
}
.space-between { 
  justify-content: space-between; 
}  
.stroke-text{
  -webkit-text-stroke:1px black;
  -webkit-text-fill-color:transparent;
}

/* embed responsive video */
 .videobereich {
    background-color: orange;
    position: relative;
    height: 0;
    padding-bottom: 56.25%;
}

.videoextern {
    background-color: #eee;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}   

@keyframes imgfadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

img.fadegen{
    animation: imgfadein 1s;
}

img.fade169{
 aspect-ratio: 16 / 9 ;   
 animation: imgfadein 1s;
}

/*
r-grid > r-cell {
  border: 1px solid black;
  padding: 0.5rem;
  overflow: hidden;
}

body > r-grid > r-cell {
  padding: 2rem;
}
*/