:root{
    --impal-vpW:0;
    --impal-vpH:0;
 --impal-w:310px;
 --impal-h:310px;
 --impal-hb:linear-gradient(90deg,#090,#009);
 --impal-c0:#000;
 --impal-c2:#222;
 --impal-c4:#444;
 --impal-cB:#BBB;
 --impal-cD:#DDD;
 --impal-cF:#FFF;
 --impal-scr-0:1;/*kiga*/
 --impal-scr-1:1;
 --impal-scr-2:1;
 --impal-ceLeft:0px;
 --impal-ceTop:0px;
}
 ::selection{display:none;}

.w{width:var(--impal-w);}
.h{height:var(--impal-h);}
.hide{display:none;}
.show{display:inline-block;}

@container (height > 0px){
 alert{background:#0F0;}
 b{background:#0FF;}
}
body{
 /*:not([class]){  Versuch
  width:var(--impal-vpW);
  height:var(--impal-vpH);
 }*/
 margin:0;
 padding:0;
 background:var(--impal-c4);
 font-family:arial;
 font-size:12px;
 display:block;
}
content{
 padding-top:60px;
 transition:0.5s ease-out;
 display:block;
 &.grid{
  padding:120px 10px 10px 10px;
  display:inline-flex;
  flex-flow:row wrap;
  gap:10px;
  grid-template-columns:150px;
  align-items:stretch;
  &>*{position:relative;width:150px;height:150px;}
 }
}
#HBMark,#HBCsr{
 position:absolute;
 left:0px;
 top:50px;
}
#HBMark{z-index:2;opacity:0.3;}
#HBCsr{z-index:3;width:100%;height:100%;}
bc{
 position:relative;
 margin-bottom:0px;
 background:var(--impal-c4);
 box-shadow:0 0 0 1px var(--impal-c0);/*#*/
 padding:10px;
 overflow:hidden;
 vertical-align:top;
 display:block;
 &.shrink>ih>ihg{transform:rotate(90deg);}
 &.shrink>ih>ihg>svg>polygon{fill:#0A0;stroke:#0F0;}
 &.shrink>ic{transform:scale(0.2) translate(0%,0%);}
 transition:0.5s linear;
}
ic{
 position:relative;
 margin:10px 7px 0 0;
 overflow:hidden;
 vertical-align:top;
 display:inline-grid;
 gap:2px;
 transform-origin:0 0;
 transform:scale(1) translate(0%,0%);
 transition:0.5s linear;
}
header{
 left:0;
 top:0;
 right:0;
  height:calc(50px + 50px * var(--impal-scr-1));
  max-height:100px;
  border:none;
 box-shadow:0 0 0 1px #000 inset;/*#*/
  box-sizing:border-box;
 margin:0;
 padding:5px;/*nh*/
 background:var(--impal-hb);
 color:#FFF;/*#*/
 font-size:1em;/*nh*/
 display:flex;/*inline;/*nh statt flex*/
  flex-flow:column nowrap;
 &.OVC{align-items:start;justify-content:start;}
  gap:0%;
 vertical-align:top;
 position:fixed;
 z-index:50;
 &>*{transform-origin:0 0;}
 &>ispan{
  position:relative;
  left:0px;
  font-size:27px;
  &.Logo{
   font-size:400%;
   transform:scale(var(--impal-scr-0));
  }
  &.OVC{
   display:flex;
   flex-flow:row wrap;
   align-items:flex-start;
   justify-content:start;width:auto;
   right:50px;
   text-shadow:0 0 5px #111;
   &>:nth-child(1){position:absolute;left:calc(180px + 40px * var(--impal-scr-2));top:0px;}
   &>:nth-child(2){position:absolute;left:calc(200px + 40px * var(--impal-scr-2));top:40px;}
   &:before{content:url(/OVC/logo.svg);}
   &:after{content:" ...weil wir hier leben!";transform:scale(var(--impal-scr-2));font-style:italic;color:#FB2;position:absolute;left:180px;top:80px;white-space:nowrap;}
  }
 }
 &>span{
  position:absolute;
  left:40px;top:0px;
  font-size:27px;
  display:flex;
  z-index:100;
  transform-origin:0 0;
  transform:scale(var(--impal-scr-0));
 }
 &>intro{
  position:absolute;
  &:not(.OVC){left:50px;}
  &.OVC{                          display:none;
   right:5px;
   &>ifch{
    background:none;
    &>button{
     width:20px;
     height:20px;
     margin:3px;
     padding:1px;
     border:1px solid var(--impal-cD);
     border-radius:40%;
     box-shadow:0 0 2px 1px var(--impal-c0);
     font-size:12px;
     color:var(--impal-cD);
    }
   }
  }
  bottom:2px;
  font-size:0.6em;
  line-height:1em;
  display:flex;/*&.OVC{display:none;}*/
  transform-origin:50% 50%;
  transform:scale(var(--impal-scr-1));
 }
 &>path{
  position:absolute;
  left:50px;
  bottom:2px;
  font-size:0.7em;
  line-height:1em;
  display:flex;&.OVC{display:none;}
  transform-origin:50% 50%;
  transform:scale(var(--impal-scr-2));
 }
 &>img{
  position:absolute;
  left:5px;top:5px;width:40px;height:30px;
  box-shadow:none;border:none;margin:0;
  transform:scale(var(--impal-scr-0));
 }
 &>div{
  position:fixed;
  left:0;
  top:50px;
  max-height:100px;
  background:#333;
  font-size:1em;
  display:inline-flex;
  flex-flow:row wrap;
  padding:5px;
  gap:5px;
  transform-origin:50% 0;
  transform:translate(0,-200px);
  /*&.show2{transform:translate(0,0);}  tmp. abgeschaltet  */
  &>p{background:#050;width:48px;height:48px;margin:0;padding:3px;display:block;}
 }
}
header>ibutton{
 border:1px solid #AAA;
 border-radius:3px;
 background:none;
 color:#EEE;/*#*/
 font-size:2em;/*bei kiga 1.3*/
 width:36px;
 height:36px;
}
header>ibutton[title="Menü"]{
 position:absolute;
 right:5px;
 color:#AAA;
 background:#CCC6;
 &:hover{filter:brightness(150%);};
}
header>ibutton[title="zurück"]{
 position:absolute;
 left:5px;
 background:#777;
 font-size:2rem;
 &:hover{filter:brightness(150%);};
 &.ebene0{display:none;}
 &::after{content:"◄";}
 z-index:101;
}
header>hinfo{/*nhv*/
 position:absolute;
 background:none;
 color:#EEE;/*#*/
 font-size:1em;
 top:5px;
 right:50px;
 height:36px;
 vertical-align:top;
 display:inline-block;
}
header>span{/*nh*/
 padding-left:10px;
 font-size:2.5em;
 overflow:hidden;
 display:inline-block;
}

alert{
 position:fixed;
 border:1px solid #000;/*#*/
 margin:0;
 padding:5px;
 left:0;
 top:50px;
 right:0px;
 background:#900;/*#*/
 color:#FFF;/*#*/
 font-size:1.5em;
 vertical-align:top;
 overflow:hidden;
 z-index:49;
 display:block;
 transition:0.5s ease-out;
 transform:scale(0);
 &.alert{transform:scale(1);}
}

topbar{/*KVW Test*/
 position:absolute;
 border:1px solid #000;/*#*/
 margin:0;
 padding:5px;
 left:0;
 top:50px;
 right:0px;
 background:#DDD;/*#*/
 color:#222;/*#*/
 font-size:1.2em;
 vertical-align:top;
 overflow:hidden;
 z-index:40;
 display:block;
}

iupload,iprogress{
 width:300px;
 &>:last-child{width:75px;float:right;}
 margin:15px;
 display:block;
}
iprogress{
 height:1em;
 &>:first-child{width:223px;height:inherit;border:1px solid #FFF;float:left;}
 text-align:right;
}
iprogress>span>img{
 width:0%;
 height:inherit;
 background:#0F0;
 border:none;
 padding:0;
}

shield{
 position:fixed;
 inset:0;
 background:#0000;
 display:none;
 z-index:10;
}


ih{
 width:100%;
 display:flex;
 gap:10px;
 transform-origin:0 0;
 transform:scale(1);
 transition:0.5s linear;
}
ihg{
 width:42px;
 height:42px;
 transform-origin:21px 21px;
 transform:rotate(180deg);
 &>svg>polygon{fill:#A70;stroke:#FB0;}
 transition:0.5s linear;
}
iht{
 padding:2px;
 background:var(--impal-cD);/*#*/
 width:calc(100% - 4px);
 min-height:36px;
 display:inline-block;
 font-size:16px;
 overflow:hidden;
}
coordinates{
 font-size:1.2EM;	
 background:var(--impal-cD);/*#*/
}

i,textarea{
 border:0;
 margin:0;
 padding:2px;
 background:var(--impal-cD);/*#*/
 width:calc(100% - 4px);
 outline:none;
 resize:vertical;
}
textarea{
 height:5em;/*nh*/
 font-size:16px;
}
#Sendebutton{/*nh temporär*/
 width:calc(100% - 4px);
 max-width:310px;
 height:2em;
 font-size:16px;
}
body>textarea{
 margin-bottom:1em;/*nh*/
 position:absolute;
 display:none;
}
upload{/*nh*/
 position:absolute;
 /*width:calc(var(--impal-vpW)-10px);max-width:var(--impal-vpW);*/
 width:100%;
 display:none;
 &>iframe{
  border:0;
  margin:0;
  width:100%;
  height:1000px;
  resize:horizontal;
 }
}
move{
 margin:0;
 padding:0;
 position:absolute;
 overflow:hidden;
 opacity:0.5;
 cursor:none;
}
move>menu,move>ic{
 z-index:20;
 margin:0;
 padding:0;
}
move>bc{
 margin:0;
 padding:10px;
}

ic>iframe{
 background:var(--impal-cD);/*#*/
}
body>iframe{
 display:none;
}
#iCE{
 position:absolute;border:0px;margin:0px;padding:0px;z-index:1;
 display:block;width:100%;height:300px;
}


menu{
 position:absolute;
 border:3px solid var(--impal-c0);/*#*/
 border-radius:3px;
 margin:0;
 padding:0;
 &.mousemove{padding:10px;}
 background:var(--impal-c2);/*#*/
 color:var(--impal-cD);/*#*/
 font-size:2em;
 align-content:center;
 display:block;
 z-index:150;
 right:0;
 top:50px;
 width:300px;
 transform-origin:100% 0%;
 transform:scale(0) skew(-50deg,-50deg);
 &.grow{transform:scale(1);}
 transition:0.25s linear;
}
menu>div{
 background:var(--impal-c4);/*#*/
 border:1px solid #0000;
 box-sizing:border-box;
 margin:1px;
 padding:4px 4px 4px 40px;/*10*/
 min-height:40px;
 text-align:left;
 &>input#files{display:none;}
 &.input{
  padding-top:30px;
  &.active{border:1px solid #00A;}
 }
}
menu>div:hover:not([data-mi="-H"]){filter:brightness(150%);}
menu>*:not(button)::before{content:"";position:absolute;margin-left:-30px;}
[data-mi="-h"]{display:none;}
[data-mi="-H"]{color:#555;}/*#*/
[data-mi="+h"]{display:inline-block;}
[data-mi$="c"]::before{border:1px solid #0A0;width:20px;height:20px;margin:3px 10px 3px -32px;padding:0 0 3px 1px;}
[data-mi="+c"]::before{content:url(/impalWork/check.gif);}
[data-mi$="r"]::before{border:1px solid #0A0;width:20px;height:18px;margin:3px 10px 3px -32px;padding:0 0 3px 1px;border-radius:50%;}
[data-mi="+r"]::before{background:#0A0;}
[data-ms]{display:none;}
[data-mi^="+S"]::before{content:url(/impalWork/folder.1.gif);}
[data-mi^="-S"]::before{content:url(/impalWork/folder.0.gif);}
[data-mi="+S1"]~[data-mr]{
 position:fixed;right:43px;top:-49px;width:300px;height:38px;
 padding:0 10px;border:1px solid #AAA;border-radius:3px;z-index:150;
 &>*{position:absolute;right:10px;}
}

/*Einträge pro Hauptmenüpunkt:*/
[data-mi="+S1"]~[data-ms="s1"]{display:block;border-left:7px #0A0 solid;}
[data-mi="+S2"]~[data-ms="s2"]{display:block;border-left:7px #00C solid;}
[data-mi="+S3"]~[data-ms="s3"]{display:block;border-left:7px #0AA solid;}
[data-mi="+S4"]~[data-ms="s4"]{display:block;border-left:7px #A0A solid;}
[data-mi="+S5"]~[data-ms="s5"]{display:block;border-left:7px #AA0 solid;}
[data-mi="+Sk"]~[data-ms="sk"]{display:block;border-left:7px #A0A solid;}
[data-mi="+St"]~[data-ms="st"]{display:block;border-left:7px #A0A solid;}
/*...*/
[data-mi="-S1"]::before{content:"E";color:#DDD;}
[data-mi="+S1"]::before{content:"E";color:#FFF;}
[data-mi="-S2"]::before{content:"A";color:#DDD;}
[data-mi="+S2"]::before{content:"A";color:#FFF;}
[data-mi="-S3"]::before{content:"D";color:#DDD;}
[data-mi="+S3"]::before{content:"D";color:#FFF;}
[data-mi="-S4"]::before{content:"K";color:#DDD;}
[data-mi="+S4"]::before{content:"K";color:#FFF;}
[data-mi="-S5"]::before{content:"G";color:#DDD;}
[data-mi="+S5"]::before{content:"G";color:#FFF;}
[data-mi="-Sk"]::before{content:"S";color:#DDD;}
[data-mi="+Sk"]::before{content:"S";color:#FFF;}
menu>*[data]{display:none;::before{content:"";}}
/*...*/


/*🙂😀😃😄😢🥱🥳💚🌻💦☕😇🥲🤠👍👑🌂🎓🐺🦁🐱🦆🐦‍⬛🦅🦉🦇🐌🦋🐜🕸🐈🐈‍⬛🐇🐿🐾🌈🌍☂🍎🍐🍊🍋🍉🍇🍓🫐🍒🍅🫑🥐☕🍰⚽🎲⚓🚦⛱🧲⚖🔦🔑🗝🔒🔓🔎🔍✏⿠⿡⿢⿣⿤⿥⿦⿧⿨⿩♾🔔🔕🦔*/