:root {
--aktivemenuicons:rgba(164,196,28,1);
--graumenuicons:rgba(154,188,12,1);
--blaumenuschrift:rgba(29,29,27,1);
--activhover:rgba(254,173,173,1);
--h1farbe:rgba(251,171,52,1);
--h2farbe:rgba(154,188,12,1);
--h3farbe:rgba(196,116,116,1);
--menugruen:rgba(151,194,41,0.5);
--grauschrift:rgba(195,195,195,1);
--normalschrift:rgba(97,97,96,1);
--raemlifaarbe:rgba(229,225,225,1);
--leadtextfarbe:rgba(13,122,140,1);
--kastenfarbe:rgba(247,211,63,1);
}


@keyframes rugele {
  0%   {transform: rotate(0deg) translate(0px,0px);}
  20%  {transform: rotate(15deg) translate(0.2vw,0px);}
  55% {transform: rotate(-40deg) translate(-0.2vw,0px);}
  100% {transform: rotate(0deg) translate(0px,0px);}
}

@font-face {
  font-family: "Roboto";
  src: url("schrift/Roboto-Regular.eot"); /* IE9 Compat Modes */
  src: url("schrift/Roboto-Regular.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("schrift/Roboto-Regular.woff") format("woff"), /* Modern Browsers */
    url("schrift/Roboto-Regular.woff2") format("woff2"), /* Modern Browsers */
    url("schrift/Roboto-Regular.ttf")  format('truetype'); /* Open Type Font */
}

@font-face {
  font-family: "RobotoCondensed-Light";
  src: url("schrift/RobotoCondensed-Light.eot"); /* IE9 Compat Modes */
  src: url("schrift/RobotoCondensed-Light.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("schrift/RobotoCondensed-Light.woff") format("woff"), /* Modern Browsers */
    url("schrift/RobotoCondensed-Light.woff2") format("woff2"), /* Modern Browsers */
    url("schrift/RobotoCondensed-Light.ttf")  format('truetype'); /* Open Type Font */
}

@font-face {
  font-family: "Roboto-RegularItalic";
  src: url("schrift/Roboto-RegularItalic.eot"); /* IE9 Compat Modes */
  src: url("schrift/Roboto-RegularItalic.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("schrift/Roboto-RegularItalic.ttf") format("truetype"), /* Safari, Android, iOS */
    url("schrift/Roboto-RegularItalic.woff") format("woff"), /* Modern Browsers */
    url("schrift/Roboto-RegularItalic.woff2") format("woff2"); /* Modern Browsers */
}

@font-face {
  font-family: "Roboto-Light";
  src: url("schrift/Roboto-Light.eot"); /* IE9 Compat Modes */
  src: url("schrift/Roboto-Light.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("schrift/Roboto-Light.ttf") format("truetype"), /* Safari, Android, iOS */
    url("schrift/Roboto-Light.woff") format("woff"), /* Modern Browsers */
    url("schrift/Roboto-Light.woff2") format("woff2"); /* Modern Browsers */
}

@font-face {
  font-family: "Roboto-ThinItalic";
  src: url("schrift/Roboto-ThinItalic.eot"); /* IE9 Compat Modes */
  src: url("schrift/Roboto-ThinItalic.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("schrift/Roboto-ThinItalic.ttf") format("truetype"), /* Safari, Android, iOS */
    url("schrift/Roboto-ThinItalic.woff") format("woff"), /* Modern Browsers */
    url("schrift/Roboto-ThinItalic.woff2") format("woff2"); /* Modern Browsers */
}

@font-face {
  font-family: "Roboto-Thin";
  src: url("schrift/Roboto-Thin.eot"); /* IE9 Compat Modes */
  src: url("schrift/Roboto-Thin.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("schrift/Roboto-Thin.ttf") format("truetype"), /* Safari, Android, iOS */
    url("schrift/Roboto-Thin.woff") format("woff"), /* Modern Browsers */
    url("schrift/Roboto-Thin.woff2") format("woff2"); /* Modern Browsers */
}

@font-face {
  font-family: "Roboto-LightItalic";
  src: url("schrift/Roboto-LightItalic.eot"); /* IE9 Compat Modes */
  src: url("schrift/Roboto-LightItalic.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("schrift/Roboto-LightItalic.ttf") format("truetype"), /* Safari, Android, iOS */
    url("schrift/Roboto-LightItalic.woff") format("woff"), /* Modern Browsers */
    url("schrift/Roboto-LightItalic.woff2") format("woff2"); /* Modern Browsers */
}


@font-face {
  font-family: "Roboto-Medium";
  src: url("schrift/Roboto-Medium.eot"); /* IE9 Compat Modes */
  src: url("schrift/Roboto-Medium.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("schrift/Roboto-Medium.ttf") format("truetype"), /* Safari, Android, iOS */
    url("schrift/Roboto-Medium.woff") format("woff"), /* Modern Browsers */
    url("schrift/Roboto-Medium.woff2") format("woff2"); /* Modern Browsers */
}


body, #mainbox{
overflow: hidden;
}

.clearbox{
clear:both;
}

button{
-moz-appearance: none;
-webkit-appearance: none;
apperance:none;
border:none 0px;
background:none;
font-family:Lato;
box-shadow: none;
}

#sprachen{
display:none;

}

.naviname {
font-family: "Roboto";
font-weight: lighter;
}

.hauptitem .icon{
background-color:white;
border:solid 0.1vw rgba(249,146,11,1);
border-radius: 30%;
display: flex;
flex-shrink: 0;
}

#curriculum .hauptitem svg{
width:95%;
}

.texticon{
border-radius: 50%;
display: flex;
}

.hauptitem .icon.aktiv, .texticon{
border:solid 0.1vw rgba(121,140,74,1);
background-color:white;
}


body, div, a, li, ul, textarea, input, p{
font-family:Roboto-Thin, sans-serif;
color: var(--grauschrift);
font-weight:lighter;
}

h1{
font-family: Roboto-Light;
color: var(--h1farbe);
font-weight:normal;
}

a{
text-decoration:none;
color: var(--grauschrift);
}

input, textarea {
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 80%;
height: 1.2em;
font-size: 1em;
display: block;
color: var(--normalschrift);
}

input:focus, textarea:focus {
outline: none;
outline-width: 0;
}

#logintable{
display: none;
}

.fuerbots{
display:none;
}

.neutrallink{
color: var(--grauschrift) !important;
}

.hauptseite {
clear: both;
}

#oberabstandbild{
width:100vw;
height:100vh;
position:relative;
overflow:hidden;
}

#oberbildcontainer{
position:absolute;
width:100%;
}

.ganzbildschirm{
width:100%;
}

.oberabstandsbild .ganzbildschirm{
width: 108%;
margin: -5vw 0px 0px 0px;
}

.durchsichtig{
background-color: rgba(255, 255, 255, 0);
}

.undurchsichtigweiss{
background-color: rgba(255, 255, 255, 1);
}



#iphonebox{
  scroll-behavior: smooth;
}

.unsichtbar{
display:none !important;
}

.sichtbar{
display:block !important;
}

#favicon_x5F_klein_xA0_Bild_1_ {
display: block;
width: 100%;
}

	.footericonstile0{fill:#0D0E10;}
	.footericonstile1{fill:#C22382;}
	.footericonstile2{fill:#FFFFFF;}
	.footericonstile3{fill:none;}


.iconfarbe{
fill:none;
stroke:rgba(251,171,52,1);
}

.untericonfarbe{
fill:rgba(251, 171, 52, 1);
}

.icon.untermenu.aktiv .untericonfarbe {
fill: rgba(255,255,255,1);
}

.icon.untermenu.aktiv {
border: solid 0.1vw rgba(251,171,52,1);
background-color:rgba(249,185,101,1);
}

.texticon .untericonfarbe{
fill: rgba(164,196,28,1);
}

.typ2 .texticon svg{
width:95%;
}

.aktiv.popup{
color:rgba(249,150,8,1);
cursor:default;
}

.hauptitem:hover .iconfarbe{
fill:none;
stroke:rgba(256,256,256,1);
}
.aktiv .iconfarbe, .texticon .iconfarbe{
fill:none;
stroke:rgba(164,196,28,1);
}

.icon svg {
width: 100%;
display: block;
height: 100%;
margin: auto;
}

.pluszeichen svg {
width: 100%;
display: block;
height: 100%;
margin: auto;
}

.pluszeichenfarbe{
fill: rgba(255, 189, 82, 1);
}

.aktiv .pluszeichenfarbe{
fill:var(--graumenuicons);
}

#icon_angebote{
width: 85%;
height: 85%;
stroke:rgba(255,198,82,0.6);
}

#icon_uebermich {
width: 68%;
height: 68%;
margin: 10% auto 22% auto;
}


.hauptitem a{
color: var(--blaumenuschrift);
font-family: RobotoCondensed-Light;
}

.aktiv .hauptitem a{
color: var(--graumenuicons);
}


/*.aktiv .hauptitem a::after, .aktiv .hauptitem a::after{
content: "";
display: block;
width: 80%;
height: 0.2vw;
background-color: var(--activhover);
border-radius: 0.1vw;
margin-top: 0.2em;
margin-left: 10%;
}*/



	  


.iconbildsfooternavi .svgicon .farbe{
fill:#FFFFFF;
}

.clearbox{
clear:both;
}

.versteckt{
display:none;
}

.neueseinfuegen{
width: 3vw;
display: block;
background: none;
border: none 0px;
color: inherit;
padding: 0;
font: inherit;
cursor: pointer;
outline: inherit;
height: 3vw;
}

.unclickbar{
cursor:initial !important;
}

#webbern{
position: absolute;
bottom: -3vw;
left: 4vw;
}

.copy {
font-family: Roboto;
font-size: 1.2vw;
color: var(--normalschrift);
}

.hauptbild{
z-index:-10;
}

.zusatzbox{
display:none;
}

.iespan{
display:none;
position:absolute;
}


_:-ms-fullscreen,
:root .iespan {
    position:inherit;
}

_:-ms-lang(x),
.iespan {
    position:inherit\9;
}

.trennlinie{
display:none;
}

.servicesvghintergrund{
fill:#C44391;
stroke:#F7EFF5;
stroke-width:4;
stroke-miterlimit:10;
}

.servicenavirand{
fill:#F7EFF5;
}

.sevicenavigrund{
fill:#C44391;
}
.servicesvgfigur{
fill:#FFFFFF;
}

@keyframes wackeln{
  0%   {transform:scale(0.9,1)}
  25%  {transform:scale(1,0.9)}
  50%  {transform:scale(0.8,1)}
  65% {transform:scale(1,0.8)}
  80%  {transform:scale(0.7,1)}
  87%  {transform:scale(1,0.7)}
  94%  {transform:scale(0.6,1)}
  96%  {transform:scale(1,0.6)}
  98%  {transform:scale(0.5,1)}
  100% {transform:scale(1,0.5)};
}
	
	/*.wackelitem{
	transform:scale(1,1);
	}
	
	.wackelt{
	animation-name:wackeln;
	animation-duration:5s;
	}
	
	.unwackelt{
	animation:none;
	transform:scale(1,1);
	}*/
	
.medaille {
display: block;
width: 100%;
height: 100%;
background-image: url('../kleinbilder/icon_medaille.png');
background-size: 100%;
background-repeat: no-repeat;
}

.tox-tinymce, .tox, .tox-tinymce-aux{
z-index:3000000 !important;
}

.rightalign{
text-align:right;
}

.centeralign{
text-align:center;
}

.leftalign{
text-align:left;
}

.justifyalign{
text-align:justify;
}

img{
width:100%;
}
.hauptkasten{
position:relative;
width:5vw;
height:4.65vw;
}

#stricheinsbox{
    width:36.36%;
    height:15.04%;
    left:60.60%;
    top:70.95%;
    transform-origin:left;
}
#rechtsblattsbox{
    width:36.48%;
    height:33.86%;
    left:62.01%;
    top:45.82%;
    transform-origin:left bottom;
    transition-delay: 0.2s;
}
#linksblattbox{
    width:55.10%;
    height:53.56%;
    left:0%;
    top:33.64%;
    transform-origin:right bottom;
    transition-delay: 0.5s;

}
#zweitstrichbox{
    width:19.18%;
    height:29.15%;
    left:53.55%;
    top:15.57%;
    transform-origin:left;
    transition-delay: 1s;
}
#letztblattbox{
    width:18.78%;
    height:30.38%;
    left:44.37%;
    top:0%;
    transform-origin:left;
    transition-delay: 2s;
}

.bildkasten{
position:absolute;
transition: transform 3s;
}

.normalsize{

}

.unvisible{
   transform:scale(0.0);
}

#berstaetigungstext {
text-align: center;
}

#datenschutz{
display:none;
}

.iconversatz .icon svg {
width: 85% !important;
height: 85% !important;
margin-top:4% !important;
}

#hauptbildbannerkurse .texticon svg {
width: 85%;
height: 85%;
margin-top: 4%;
}