:root{
 --impal-S:1;
 --impal-hb:linear-gradient(in oklch to right,#9393ff,#ddf,#9393ff);
}
body{background-image:var(--impal-hb);}

@container alert (height > 0px){
 alert{background:#0F0;font-style:italic;}
 b{background:#0FF;}
}

header{align-items:start;justify-content:start;height:calc(50px + 50px * var(--impal-scr-1));}
header>ispan{white-space:nowrap;
 font-size:16px;/*transform:scale(calc(0.5 + 0.5 * var(--impal-scr-1)));*/
 &>*{position:absolute;}
 &>:nth-child(1){transform-origin:0 0;transform:scale(calc(0.5 + 0.5 * var(--impal-scr-1)));left:50px;top:0px;}
 &>:nth-child(2){transform-origin:100% 0;transform:scale(calc(0.5 + 0.5 * var(--impal-scr-1)));left:50px;top:calc(20px - 20px * var(--impal-scr-2));}
 x&:before{content:url(/Logo.40x30.jpg);width:38px;transform:scale(var(--impal-scr-1));}
 xxx&:after{content:" ...weil wir hier leben!";transform:scale(var(--impal-scr-2));font-size:calc(60px + 1px * var(--impal-scr-1));font-style:italic;color:#FB2;position:absolute;left:180px;top:80px;white-space:nowrap;}
}
header>intro{display:none;}
header>path{
 left:50px;
 bottom:2px;
 font-size:1.2em;
 line-height:1.5em;
}

main{
 display:inline-block;
 width:100%;
 box-sizing:border-box;
 flex-flow:row wrap;
 flex:0 1 auto;
 gap:25px;
 background:var(--impal-hb);
 &.text{
  font-size:1rem;
 }
}
article{
 box-sizing:border-box;
 margin:0 5px 5em 5px;
}
section{
 box-sizing:border-box;
 margin:0 0 5em 0;
}
section.float{
 margin:5px;
 &>img{
  width:310px;
  max-width:310px;
  border:2px solid #000;
  margin:15px;
 }
 &>img.left{float:left;/*clip-path:circle(4em at 4em 4em);*/}
 &>img.right{float:right;}
 &>xxximg.w,video.w{
  height:8em;/*min-height:var(--impal-H);*/
  width:calc(var(--impal-S)/height);
  padding:5px;
  overflow:hidden;
 }
 &>p{
 }
 &>ol{
  display:inline-flex;flex-flow:row wrap;gap:1em;
  margin:0;
  padding:0;
  &>li{background:#00F5;padding:5px;}
 }
}

.fit{
 width:var(--impal-w);
 .w{
  height:var(--impal-t3s);
  width:calc(var(--impal-S)/height);
  /*max-height:var(--impal-t3s);
  min-height:var(--impal-t3s);*/
 }
 .h{
  width:var(--impal-t3s);
  height:calc(var(--impal-S)/width);
  /*max-width:var(--impal-t3s);
  min-width:var(--impal-t3s);*/
 }
}

img:fullscreen{transform:scale(3); }
img.scale{transform:scale(3); }

section.block{
 &>div{
  font-size:1.2em;
  border:1px solid #000;
  margin:10px;
  padding:0;
  &>big{width:100%;background:#0005;margin:0 -10px 0 -10px;padding:5px;display:inline-block;}
  &>:not(big){margin:3px 3px 3px 5px;line-height:1.2em;display:inline-block;vertical-align:top;font-weight:normal;}
  padding-left:10px;
 }
 &>div[data-bl]{border-left:5px solid blue;}
 &>div.stretch{padding:0;&>*{width:calc(100% - 10px);}}
}


section.gebetsanliegen{
 &>div{margin:20px 0;font-size:1.2em;
  &>*{display:inline-block;}
  &>c1{width:30px;height:100%;vertical-align:top;}
  &>c2{width:320px;}
  &>c3{width:90px;text-align:right;}
  &>c4{width:260px;height:100%;vertical-align:top;}
  &>c5{width:350px}
 }
}


section.BT{
 display:inline-flex;
 flex-flow:row wrap;
 gap:5px;
}

section.TT{
 display:inline-flex;
 flex-flow:column nowrap;
 gap:1em;
 &>div>i{box-sizing:border-box;display:inline;padding:5px 10px 0 10px;border-radius:5px 5px 0 0;}
 &>nav{display:none;}
 &>div{display:inline-block;width:350px;margin-top:1em;}
 &>div>span{
  display:grid;
  
  /*filter:opacity(50%);*/
  /*background-color:calc(background-color + 1);
  &>:first-child{align-self:stretch;width:350px;}*/
  &>b{
   border:1px solid #111;
   vertical-align:middle;
   padding:5px;
   font-family:arial;
   font-size:1.2em;
   font-weight:bold;
  }
 }
}






headline{
 position:relative;
 box-sizing:border-box;
 left:-5px;top:-5px;width:calc(100% + 10px);height:auto;
 text-align:center;
 background:#0F0;
 /*display:flex;flex-flow:row wrap;*/
 display:inline-block;
 &>*{margin:0.5em;}
}
bc2.BT{
 display:inline-flex;
 flex-flow:row wrap;
 gap:20px;
 background:var(--impal-cF);
 box-sizing:border-box;
 margin:5px;
 padding:10px;
 &>s1{
  display:flex;
  align-items:center;
  justify-content:center;
  width:var(--impal-M);
  height:var(--impal-M);
  overflow:hidden;
  box-sizing:border-box;
  /*background:var(--impal-cD);*/
 }
 &>side{
  position:relative;font-size:16px;
  &>img.start{align-self:start;}
  &>img.end{align-self:end;}
  &>div{
   font-size:12px;&>big{font-size:18px;}
   text-shadow:2px 2px 0 #FFF;
   display:block;
   position:absolute;
   inset:80% 3% 3% 3%;
   padding:1%;
   background:#0A08;
   color:var(--impal-c0);/*#*/
  }
 }
 &>s2{
  display:flex;
  width:var(--impal-M);
  height:var(--impal-M);
  padding:1em;
  box-sizing:border-box;
  flex-flow:column wrap;
  flex:0 1 auto;
  align-items:start;
  background:var(--impal-cD);
  /*&>*{margin:1rem;}*/
  &>h1{background:#33D;color:#FFF;margin:0;padding:1em;width:calc(100% - 2em);}
  &>h2{background:#DDD;color:#000;}
  &>h3{background:#33D;color:#FFF;margin:0;padding:1em;width:calc(100% - 2em);}
 }
}
aside{
 background:#EFE;
 border:2px solid #F00;
 margin:1em;
 padding:1em;
}
h1{
 font-size:2em;
 font-weight:bold;
}
h2{
 font-size:1.6em;
 font-weight:bold;
}
h3{
 font-size:1.2em;
 font-weight:bold;
}
h4{
 font-size:1em;
 font-weight:bold;
}
h5{
 font-size:0.8em;
 font-weight:bold;
}
h6{
 font-size:0.6em;
 font-weight:bold;
}
p{
 font-size:1.3em;
}
.center{text-align:center;}
ul{
 font-size:1.3em;
}
.rot   {background:#F00;color:#FFF;filter:saturate(40%);}
.blau  {background:#00F;color:#FFF;filter:saturate(40%);}
.orange{background:#FA0;color:#000;filter:saturate(40%);}
.gruen {background:#0F0;color:#000;filter:saturate(40%);}
.gelb  {background:#FF0;color:#000;filter:saturate(40%);}
.lila  {background:#F0F;color:#FFF;filter:saturate(40%);}