@charset "UTF-8";
 /* allgemeines  */
 *{box-sizing: border-box;padding:0;margin:0}
html {font-size:14px;line-height:1.3;}
body {font-family:"Saira",sans-serif;text-align:center}
#wrapper {text-align:left}

h1 {font-size:3.2rem;text-align:center;padding-top:3rem;padding-bottom:2rem}

@keyframes h1-animation {
   0% {color:#ff4e00;}
   30% {color:#ff0078}
   100% {color:#ff4e00;}
}

h1 {
  animation-name: h1-animation;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  /* weitere animation-Eigenschaften */}
  
h2 {font-size:1.7rem}

p {text-align:left; padding-bottom:0.5rem}

a {color: gray; text-decoration: none}

.mod_rocksolid_slider {border:10px solid black}

 /* Liste  */
 
ul {position:relative;display:flex;justify-content:center;gap:10px;padding:4px;flex-wrap:wrap}



 li {list-style-type:none;position:relative;padding-bottom:1px;padding-left:20px;border:1px solid rgba(255,0,0,0.5);padding-right:10px;display:flex; align-content:center;align-items:center;height:35px;border-radius:3px;text-align:left}
 
li::before {content:""; position:absolute;top:10px;left:-2px;width:10px;height:10px; display:block; background-color:rgba(50,0,150,0.5);border-radius:2px }

.mod_navigation{padding-top:1rem}
 
.mod_navigation li::before {border:0px;border-top:solid 2px rgba(50,0,150,0.5);border-right:solid 2px rgba(50,0,150,0.5);border-top-right-radius:3px;background-color:transparent;transform: rotate(45deg);}

.mod_navigation li:hover::before {border:0px;border-top:solid 4px rgba(50,0,50,0.5);border-right:solid 4px rgba(50,0,50,0.5);border-top-right-radius:3px;background-color:transparent;transform: rotate(45deg);top:9px;left:1px;}

.mod_navigation li:hover {background:rgba(50,155,0,0.05);border:1px solid rgba(100,155,100,1);box-shadow:0px 0px 3px rgba(100,155,100,0.3);}

.mod_navigation li:hover a {text-shadow:0px 0px 5px 2px white;color:rgba(100,155,100,1)}

.ce_text li {font-size:1.0rem;height:auto;border:none;display: block; margin-top:1rem}

.ce_text ul {display:block;padding:3rem}
code {display:inline-block; margin: 0 0.5rem 0 0.5rem;color: #5babae}

 /* zum start  */
 
.start {display:inline-block;border: 1px solid rgba(100,0,50,1);margin-top:5px; margin-bottom:5px; padding:1px 2px 0 2px;border-radius:2px;Position:fixed;bottom:0;left:48%;background:white;text-decoration:none; }

 /* Akkordeon  */
 
 .ce_accordion {width:45%; margin:20px;text-align:center;float:left;position:relative}
.toggler {border: 0px dotted green;text-align:center;position:relative;transition: all ease .3s}
 .toggler {font-family:"Saira";text-transform:uppercase; letter-spacing: 2px; font-size: 1.5rem;cursor:pointer; }
.ce_accordion:focus .toggler::after, .ce_accordion:hover .toggler::after {;display:block; content:"Öffnen!";position:absolute;top:0;color:green; width:100%;height:100%;transition: all 0.7s;background: rgba(252,255,255,1);transition: all ease .3s}

.toggler.active::after,.ce_accordion:hover .toggler.active::after {content:"Schließen!";;display:block;position:absolute;top:0;color:green; width:100%;height:100%;transition: all 0.7s;background: rgba(252,255,255,1);transition: all ease .3s}

.accordion {padding-top:1.5rem;z-index:2}

.accordion .image_container {margin-top:1rem; border: 2px dotted gray; border-radius:1rem;padding:1rem}

.ce_accordion.ce_text ul {justify-content:flex-start;padding:0}

.ce_accordion li::before {background-color:#ff4e00;top:4px;left:0px
}


 
  /* ce_iamge  */
 
 #header .ce_image {border:1px solid green}
  #header img {border:5px solid red}