/***********************************
Datei: style CSS 
URL: www.musikschule-friedrichsdorf.de 
************************************
Copyright: www.Sabine-Kemper.de
Start: 24.09.2025
Letzte Aenderung: 24.09.2025
***********************************/

*  {
margin:0;
padding:0;
}

img, table {border:0; max-width: 100%; height: auto; margin:0;padding:0!important;}
article, section, aside {display: block;}

.clear {
  clear: both;
  height: 0px;
  width: 0px;
  font-size: 0.0em;
  visibility: hidden;
}

*, *:before, *:after {
    -webkit-box-sizing: border-box; /* Safari/Chrome, andere WebKit-Browser */
    -moz-box-sizing: border-box; /* Firefox, andere Gecko-Browser */
    box-sizing: border-box; /* Opera/IE 8+ */
}

a:focus {outline: 0;}

a:hover {
	opacity:0.5;
  transition: all 500ms;
  -webkit-transition: all 500ms;
  -moz-transition: all 500ms;
  -o-transition: all 500ms;
}

iframe, iframe#mein-iframe-id.mein-custom-iframe, .frameanmeldung {
      position: relative!important;
      padding-bottom: 0%!important; /* Verhältnis 16:9 für Videos */
      height: 900px!important; /* Passt die Höhe an */
      width: 100%!important;
            border: none!important; /* Entfernt den Standardrahmen */
            margin: 0 0!important; /* Fügt etwas Abstand hinzu */

border: 0px solid #ccc!important;
background-color: #f6f6f6 !important;
box-shadow: 0 5px 12px rgba(0, 0, 0, 0.4)!important;

    }


img {
	width: 100%;
	max-width: 100%;
	height: auto;
	vertical-align: middle;
}

#overall {
	width:100%;
	margin: 0 auto;
	height: 100%;
	text-align: center;
}

section.hanimiert {
	height: auto;
	width: 100%;
	margin: 0;
	font-style: normal;
	font-variant: normal;
	padding: 0.5em 1.0em 0.5em 1em;
	clear:both;
	background-image: linear-gradient(-45deg, #efb109, #f3e6d7, #F9BE76, #fb8c14, #f9a447);
	background-size: 400% 400%;
	animation: gradient 8s ease infinite;
	}

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

section.content1 {
height: auto;
width: 100%;
background: rgba(235,235,235,0.7);
margin: 0;
font-style: normal;
font-variant: normal;
padding: 0.5em 1.0em 0.5em 1em;
  clear:both;
}

section.content2 {
height: auto;
width: 100%;
margin: 0;
background: transparent;
font-style: normal;
font-variant: normal;
padding: 0.5em 1.0em 0.5em 1em;
clear:both;
}

.incontent, .incontenth {
    margin: 1% auto;
    text-align: left;
    height:auto;
    background-color: #ffffff;
    max-width: 1000px;
    padding: 1%;
}

.incontent2 {
    margin: 1% auto;
    text-align: left;
    height:auto;
    background-color: transparent!important;
    max-width: 80%;
    padding: 0%;
}


.incontent h2 {
{clear: both; font-size: 200%; font-weight:bold; padding: 0.5em 0 0.5em 0;color:#333333;line-height:1.3em; text-align:left;}
}

.iconabstand {
margin: 0em 2.0em 0 0em;
padding: 0.5em 1.0em 0.5em 0em;
}

#bgfooter {
	text-align:left;
	position:relative;
}

#footer {
  	box-shadow: 0px 0px 22px #333;
 	height:auto;
 	padding:1em 0 0 0;
 	color: #fff;
 	background-color: #76b82b;
    max-width: 100%;
    clear:both;
}

#footer p, #footer a {
 	color: #fff;
 	font-size: 100%!important;
}


.infooter {
	margin: 0 auto;
    max-width: 1000px;
    padding:1%;
  vertical-align: top;
}

.box_1, .box_2, .box_3 {
  float:left;
  width: 98%;
  height: 100%;
  padding: 0 15px 0 0 ;
}


@media only screen and (max-width:35em) {
.infooter {
	margin: 0 auto;
    max-width: 1000px;
    padding:2% 4% 2% 4%;
  vertical-align: top;
}
.incontent2 {
    max-width: 100%;
}
}

/* 
###############################################################
Boxen index				 #
###############################################################
*/

.boxStartseite {
   display: -webkit-flex;
   display: -ms-flex;
   display: flex;
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
  width: 100%;
  color: #666;
  position: relative;
  text-align:left;
}

.box_30 {
  width: 29%;
  background: transparent;
  padding: 1em;
  float:left;
  margin: 1% 0 1% 0;
    }

.box_40 {
  width: 40%;
  background: transparent;
  padding: 1em;
  float:left;
  margin: 1% 0 1% 0;
    }

.box_50 {
  width: 49%;
  background: transparent;
  padding: 1em;
  float:left;
  margin: 1% 0 1% 0;
    }

.box_60 {
  width: 59%;
  background: transparent;
  padding: 1em;
  float:left;
  margin: 1% 0 1% 0;
    }
    
.box_70 {
  width: 69%;
  background: transparent;
  padding: 1em;
  float:left;
  margin: 1% 0 1% 0;
    }

.box_20_1 {
  width: 24%;
  background: transparent;
  padding: 1em;
  float:left;
  margin: 1% 1% 1% 0;
  border:thin gray dotted;
    }

.boxStartseite h2 {
  font-size: 180%;
  font-weight: lighter;
  margin: 1% 0 3% 0;
  padding: 0;
  color:#ff9933;
  }

.boxStartseite a {
  font-weight: normal;
  font-size:100%;
  }

.boxStartseite p {
  font-weight: normal;
  }

.boxStartseite ul li {
  font-weight: normal;
margin: 0.5em 0 0 0.5em;
  }

@media only screen and (max-width:60em) {
.box_20, .box_30, .box_40, .box_50, .box_60, .box_70, .box_20_1  {width: 100%; margin: 1% 0 1% 0!important;}
.boxStartseite h2 {font-size: 140%;}
.boxStartseite h1 {font-size: 180%;}
.boxStartseite h2 {font-size: 120%;}
.boxStartseite h3 {font-size: 125%;}
.boxStartseite p {font-size: 100%;!important}
}

@media only screen and (max-width:35em) {
.box_20, .box_30, .box_40, .box_50, .box_60, .box_70, .box_20_1 {font-size: 100%;width: 100%; margin: 1% 0 1% 0!important;}
.boxStartseite h2 {font-size: 120%;}
.boxStartseite h1 {font-size: 100%;}
.boxStartseite h2 {font-size: 100%;}
.boxStartseite h3 {font-size: 100%;}
.boxStartseite p {font-size: 100%;!important}
.box_20_1 {border: 0 gray dotted;}
}

/* 
###############################################################
icon top			 #
###############################################################
*/

.top_icon {
  bottom:1em;
  position:fixed;
  right:0%;
  width:4em;
  z-index:1400;
  height: 4em;
}

.top_icon a  {
color: #f2f2f2;
  text-align:center;
background: rgba(197,199,197,0.6);
  display:block;
  border-radius: 5px;
  cursor:pointer;
}

.top_icon img {
  max-width:60%;
  margin: 0.5em!important;
}