/* ----------------------------------------------------------------------------
   Base Default Setting
------------------------------------------------------------------------------*/
:root {
--grund-farbe : #f3f3ed;
--logo-farbe : #fb1818;
--header-farbe :#000000;
--icon-farbe :#ffffff;
}
* {margin:0;padding:0;box-sizing: border-box;
  font-family:Helvetica,Arial,sans-serif;} /* just to force a good default                          */
header,footer {color: white;  background-color: var(--header-farbe); padding:1em;width:100%;}
footer {background-color:black}
header {width:100%;}
/* a nice card layout (as modern frameworks show as well)                     */
.card {background-color: white; border-radius: 5px; margin:10px;
       box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5);padding:1rem;}
.card-transparent {background-color: rgba(255,255,255,0.4); border-radius: 5px; margin:10px;
              box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5);padding:1rem;}
.paper {background-color: var(--grund-farbe); padding:1rem; font-size:1.1rem;}
.card-green-transparent {background-color: rgb(28 201 57 / 50%);border-radius: 3px; margin:10px;
       box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5);padding:1rem; color:white;}
.card-black-transparent {background-color: rgb(0 0 0 / 40%);border-radius: 3px; margin:10px;
       box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.25);padding:1rem; color:white;}
/* -----------------------------------------------------------------------------
    some Forms formatting
--------------------------------------------------------------------------------*/
.formsinput { display:block;width:calc(100% - 40px); position:relative;left:20px;
             font-size:1.2rem;border:solid 2px #ed0c0c;border-radius:5px;padding:5px;
             margin:1rem 0 1rem 0;}
.kontaktform input { margin: 0.5rem 1rem; width: 50%; font-size: 1rem;
                    padding: 0.5rem;border:solid 2px #ed0c0c;border-radius:5px;}
.kontaktform > h4 {text-align: left; padding: 1rem 0 0 1rem;}
/* -----------------------------------------------------------------------------
    Special Captcha scaling used and needed because of iphne 5 .. we scale the
    origonal size a bit to better fit
*/
.scalerecaptcha {
    transform:scale(0.93);
    transform-origin:0 0;
}
/* -----------------------------------------------------------------------------
  Define the viewport (visible page) as CSS Grid
  The Grid consists of the Header, the Navigation ,
  the scrollable Part (youTube, Fakultäten) and the footer
  In this case the Grid has four rows (height = auto) and 1 column with a
  width of 100 %
  The Header, the youTube and the Fakultäten become a flexbox
  ----------------------------------------------------------------------------  */
  .pagegridcontainer {display:grid;
    grid-template-columns: 100%;
    grid-template-rows: min-content min-content auto min-content;
    justify-items: stretch;
    align-items: stretch;
    grid-template-areas:
    "header"
    "navigation"
    "scroller"
    "footer"
  }
  .pagegridheader {grid-area: header;}
  .pagegridnavigation {grid-area: navigation;}
  .pagegridsrcol  {grid-area: scroller;overflow:auto;-webkit-overflow-scrolling:touch;}
  .pagegridsfooter  {grid-area: footer;}
/* -----------------------------------------------------------------------------
   The following statements are examples of flex-box classes, of course you can
   build your own
-------------------------------------------------------------------------------- */
    .flexboxheader,.flexboxnav,.flexThemen {display:flex; flex-flow: row wrap;}
    .flexboxheader,.flexThemen {justify-content: space-between; align-items: center;}
    .flexThemen {justify-content: space-around; align-items: flex-start;}
    .flexboxnav {justify-content: flex-start;}
    .flexcolumn {display: flex; flex-flow:column;}
    .flexlefttop {display:flex;flex-flow:row wrap;justify-content: flex-start;align-items:flex-start}
    .flexleftstretch {display:flex;flex-flow:row wrap;justify-content: flex-start;align-items:stretch;}
    .flexcolumleft {display:flex;flex-flow:column wrap;justify-content: flex-start;align-items:flex-start;}
/*------------------------------------------------------------------------------
/* Navigation Bar and footer navigation
-------------------------------------------------------------------------------*/
nav li, footer li  {list-style-type: none; text-align: center; border:solid black 1px;}
nav li, footer li  {min-width:100px;max-width: 1000px}
/* Give each even list item the color #848d9e; and each odd #e2e4e8;            */
nav li:nth-child(2n), footer li:nth-child(2n) {background: var(--logo-farbe); border: solid 1px #2912e5; }
nav li:nth-child(2n+1), footer li:nth-child(2n+1) {background: var(--logo-farbe); border: solid 1px #2912e5;}
nav li:hover, footer li:hover {background-color:white;}
nav li a, footer li a { text-decoration: none; display:block; padding:1.0rem;}
a:visited, a:link {color: black;}
a:hover, a:active, a:focus { color: darkred;  text-decoration: none;}
/* -----------------------------------------------------------------------------
Backposter Section
--------------------------------------------------------------------------------*/
.backposter  {opacity:0.95;margin:10px; width:calc(100% - 20px); height:calc(100% - 20px);background-position: top right;background-size: contain; background-repeat: no-repeat;
             }
#thecurtain  { background-image: url(../images/static/2024/Back1.jpg);
             background-position: top center;background-size: cover; background-position: center; background-repeat: no-repeat;}
/* -----------------------------------------------------------------------------
    Alertbox
--------------------------------------------------------------------------------*/
.alertContainer {right:0; z-index:10000; position: fixed; top:0; background-color:rgba(0,0,0,0.7); width:fit-content; min-width:320px;max-width:600px;
                 padding:0.5rem; background-color: rgba(23, 157, 8, 0.85);
                 border: 2px solid white; box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.8);
                 -webkit-border-radius:5px; -moz-border-radius:5px; -o-border-radius:5px; border-radius:5px;
                 color: white;
                   }
/* -----------------------------------------------------------------------------
    Trinagles
-------------------------------------------------------------------------------*/
.triangle {background-color: transparent; display:block;}
/* -----------------------------------------------------------------------------
Various buttons
-------------------------------------------------------------------------------*/
.buttons_grey {font-size:1rem; cursor:pointer; padding:10px; border: solid black 1px;
               min-width:200px;max-width: 400px;background-color:#d1caca; border-radius: 5px;
               margin:10px;box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5);}
.buttons_blue {font-size:1rem; color:white; cursor:pointer; padding:10px; border: solid black 1px;
               min-width:200px;max-width: 400px;background-color:#366aed; border-radius: 5px;
               margin:10px;box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5);}
.buttons_blue_small {font-size:1rem; color:white; cursor:pointer; padding:8px; border: solid black 1px;
               min-width:50px;max-width: 150px;width:fit-content;background-color:#366aed; border-radius: 5px;
               margin:8px;box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5);}
/*---------------------------------------------------------------------------------------------
Input field formats 
---------------------------------------------------------------------------------------------*/
input[type="text"],textarea
    {display:block;width:calc(100% - 40px);margin:0 1rem 6px 1rem;font-size:1.5rem;border:solid 2px #ed0c0c;border-radius:5px;padding:5px;}
/* -----------------------------------------------------------------------------
User Listen
---------------------------------------------------------------------------------*/
.usermustgrantedbox {background-color: black;font-size:1rem;color:white;margin-bottom: 1rem;}
.usergrantedbox {background-color:white;font-size:1rem;color:black}
.usermustgrantedbox>li {list-style:none;padding:1px 12px;display:flex;justify-content: space-between;align-items: first baseline;
                       border-radius: 5px;margin:8px 0px;box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5);}
.usergrantedbox>li {list-style:none; padding:8px;display:flex;justify-content: space-between;align-items: first baseline;
                       border-radius: 5px;margin:8px 0px;box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5);}
/* -----------------------------------------------------------------------------
Popup Layouts
--------------------------------------------------------------------------------*/
.posterouter {position:fixed; z-index:100; width:100%;
              display:flex;justify-content: center; flex-flow: row nowrap; visibility: hidden;}
.popupsmallwhite
     {position: relative; width:80%; min-width:300px;max-width:500px; padding:0.8rem;
     background-color: rgba(255,255,255,1); border:solid 1px black; border-radius:5px}
.popupsmallblack
    {position: relative; width:max-content; min-width:300px;max-width:400px; padding:0.8rem;
     background-color: rgba(0,0,0,1); border:solid 1px white; border-radius:5px;
    color:white;}
.popuplargewhite
     {position: relative; width:100%; min-width:320px;max-width:1000px; padding:0.8rem;
     background-color: rgba(255,255,255,1); border:solid 1px black; border-radius:5px}
.popuplargeblack
     {position: relative; width:100%; min-width:320px;max-width:1000px; padding:0.8rem;
     background-color: rgba(0,0,0,1); border:solid 1px white; border-radius:5px;
     color:white;}     
.popuplarge
     {position: relative; width:100%; min-width:320px;max-width:1000px;
      border-radius:5px; border: solid 10px var(--grund-farbe);
      background-repeat: no-repeat;
      background-size: cover;
     }
.popuplarge .gridpopupscroll  {background-color: rgba(255,255,255,0.8)}
 p.gridpopupheader
     {background-color: black;
      padding:6px;
      margin-bottom: 1rem;
      background-image: url("../images/static/faviconBagasch.svg"); background-position: calc(100% - 20px); background-size: 30px;
      background-repeat: no-repeat;
     }
p.gridpopupheader > i {color:white;font-size:32px;cursor:pointer}
.popuplargewhite i, .popupsmallwhite i {color:black;font-size:2rem; cursor:pointer }
/*
  The Popuo Grid
  */
.gridpopupcontainer {display:grid; height:calc(100% - 10px);position:absolute;
    grid-template-columns: 100%;
    grid-template-rows: min-content 1fr min-content;
    justify-items: stretch;
    align-items: stretch;
  }
  .gridpopupheader {grid-area: 1 / 1 / span 1 / span 1;}
  .gridpopupscroll {grid-area: 2 / 1 / span 1 / span 1; overflow:auto; -webkit-overflow-scrolling:touch;}
  .gridpopupbottom  {grid-area: 3 / 1 / span 1 / span 1;}

/*-------------------------------------------------------------------------------
/* MQ for changing the styles a (not the layout !!)
/* For mobile phones: */
/* For Handy  10 width to 450 */
@media only screen and (min-width: 10px) {
  nav li {flex: 1 1 auto;}
  #headerTitle {font-size:1.6rem}
  #right-header {display:none;}
  .card, .card-transparent {margin:5px auto 5px auto; padding:3px;}
  #left-header > a {display:none}
}
@media only screen and (min-width:350px){
   #left-header > a {display:inline}
}
    /* For small  tablets: 450-700  */
@media only screen and (min-width: 450px) {
nav li {flex: 1 1 auto}
 #right-header {display:none;}
 .card, .card-transparent {margin:8px 2px 8px 2px; padding:10px;}
}
@media only screen and (min-width: 700px) {
  #headerTitle {font-size:1.8rem}
  #right-header {display:inline;}
 .card, .card-transparent {margin:10px; padding:1rem;}

}
@media only screen and (min-width: 1000px) {
  #headerTitle {font-size:2.0rem}
  #right-header {display:inline;}
}
/* -----------------------------------------------------------------------------
   Printing
   ----------------------------------------------------------------------------*/
@media print {
  body {
      width: 21cm;
      height: 29.7cm;
   }
  i {display:none}
  p.gridpopupheader {padding:2rem}
  .popuplarge {background-repeat: repeat-y; background-size: auto 29.7cm;}
  .break {page-break-after: always;}
}
/*
/* -----------------------------------------------------------------------------
   Fade Background  start and end with opacitiy = 0 (default in the beginng in 0 as well)
-------------------------------------------------------------------------------*/
.fade {animation: do-fade 8s linear;}
@keyframes do-fade {
  0% {opacity: 0.0;}
  10% {opacity: 0.5;}
  25% {opacity: 0.90;}
  75% {opacity: 0.90;}
  90% {opacity: 0.5;}
  0% {opacity: 0.0;}
}
.fade-away {animation: do-fade-away 4s linear;}
@keyframes do-fade-away {
  0% {opacity: 0.95;}
  50% {opacity: 0.5;}
  100% {opacity: 0.0;}
}
/* -----------------------------------------------------------------------------
   Rotating the object within its scope
*/
.do-rotate {
       animation: do-rotate 500ms infinite linear;
   }
@keyframes do-rotate {
  0% {transform: rotate(0deg);}
  100% {transform: rotate(359deg);}
}
.do-rotate-walk {
          position:relative;
          animation: do-rotate-walk 5s infinite linear;
      }
@keyframes do-rotate-walk {
  0%  {transform: rotate(0deg); left:0px}
  10% {transform: rotate(360deg)}
  20% {transform: rotate(720deg)}
  30% {transform: rotate(1080deg)}
  40% {transform: rotate(1420deg)}
  50% {transform: rotate(1780deg);left:95%}
  60% {transform: rotate(1420deg)}
  70% {transform: rotate(1080deg)}
  80% {transform: rotate(720deg)}
  90% {transform: rotate(360deg)}
  100% {transform: rotate(0deg); left:0px}
}
/*   Rotation keyframes
*/
.rotateandwait {
  animation-name: rotateLos;
  animation-timing-function: linear;
  animation-duration: 3s;
}
@keyframes rotateLos {
  0% {
         transform: rotateY(0deg);
         transform-origin: 50% 0;
     }
100% {
        transform: rotateY(360deg);
        transform-origin: 50% 0;
      }
    }