/* Farben 

Rot Logo: #a60000
orange: #ff8400
hellbeige:#faf5f2

Rotbtraun Footer: #380b00
*/




html {
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}
body {
  font-family: 'open sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  margin: 0;
  padding: 0;

}


/* ------------------- a Basics ------------------------- */


p {
  font-size: 16px;
  font-weight:400;
  color:#1e1e1e;
  margin-bottom:10px;
}
@media (max-width: 768px) {
  p {
  font-size: 14px;
  }
}
p.small {
  font-size: 14px;
}
li {
  font-size: 16px;
  font-weight:400;
  color:#444444;
  margin-bottom:10px
}
@media (max-width: 768px) {
  li {
  font-size:14px;
  }
}
li.small {
  font-size: 14px;
}
li strong {
  color:dimgray;
}

a {
  color:#1e1e1e;
  text-decoration:underline;
}
a:hover,
a:focus,
a:active,
a.active {
  color:#a60000;
  text-decoration:underline
  }


h1 {
  font-family: 'Merriweather', "Bree Serif", "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight:600;
  color:#C10000;
  
  
  line-height:1.4em;
  font-size:40px;
  margin:50px 0px;
  text-align:center
}
@media (max-width: 1024px) {
	h1 {
	  font-size: 25px;
	}
}
h2,
h5,
h3 {
  font-family: 'Merriweather', 'open sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
  color:#252525;
  line-height:1.4em;
}
h2
 {
  font-size:28px;
  font-weight:600;
  color:#C10000;
  margin:40px 0px 20px 0px;
}
h3 {
  font-family: 'open sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size:22px;
  font-weight:600;
  margin:40px 0px 20px 0px;
}


h4 {
  font-family: 'open sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400;
  color:#222222;
}
h6 {
  font-family: 'open sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 300;
  color:#fd9d05;
}






.text-left {
  text-align: left;
}
.text-right {
  text-align: right;
}
.text-center {
  text-align: center;
}
.text-justify {
  text-align: justify;
}
.text-nowrap {
  white-space: nowrap;
}



/* -----------------------------  JS Customs ------------------------------- */

.logo-grafik {
	margin-top:5px;
	width:330px;
	height:auto;
	}
@media (max-width: 1023px) {
.logo-grafik {
	margin-top:10px;
	margin-left:10px;
	width:250px;
	}
}

.bildgross {
	/* SCALE */
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	-o-transform: scale(1);
	transform: scale(1);
	/* VERZÖGERUNG */
	-webkit-transition: all 0.3s linear;
	-moz-transition: all 0.3s linear;
	-ms-transition: all 0.3s linear;
	-o-transition: all 0.3s linear;
	transition: all 0.3s linear;
}
.bildgross:hover {
	-webkit-transform: scale(1.01);
	-moz-transform: scale(1.01);
	-ms-transform: scale(1.01);
	-o-transform: scale(1.01);
	transform: scale(1.01);
}

.hochhover {
      transition: transform 0.3s ease;
}
.hochhover:hover {
       transform: translateY(-5px);	
}




.footer  {
 	background:#faf5f2;
 	
	background-color:hsla(28,100%,52%,1);
	background-image:
	radial-gradient(at 91% 88%, hsla(24,99%,49%,1) 0px, transparent 50%),
	radial-gradient(at 26% 84%, hsla(314,89%,49%,1) 0px, transparent 50%),
	radial-gradient(at 55% 17%, hsla(218,100%,71%,1) 0px, transparent 50%),
	radial-gradient(at 99% 2%, hsla(0,100%,50%,0.53) 0px, transparent 50%);
 
 	margin:50px 0px 0px 0px;
 	padding-top:40px;
   }
.footer p {   
	font-family:'Open Sans', sans-serif;
	font-weight:400;
   color:#ffffff;
   text-align:center
   }

.footer h2 {
   font-size: 1.3em; 
   color:#ffffff;
   margin:0px 10px 10px 0px;
   }

.footer a {
	color:#ffffff;
}
.footer a:hover {
	color:black;
}
@media (max-width: 767px) {
.footer h2 {
   font-size: 1.0em; 
   color:white;
   margin:0px 10px 10px 0px;
   }
}



/* -----------------------------  Bild und Text auf Startseite ------------------------------- */
 
.text-auf-bild-container {
    background-color: rgba(0, 0, 0, 0.2);
    margin:50px 20px; 
    text-align: center;
    -webkit-border-radius: 10px;
	-moz-border-radius: 10px;;
	-khtml-border-radius: 10px;
	border-radius: 10px;
}

.text-auf-bild-inhalt {
	padding: 25px;
	/* Container horizontal mittig platzieren */
    margin: auto;
}
.text-auf-bild-inhalt h1{
	color:#ffffff;
	font-size:40px;
  	margin:10px 0px;
}
.text-auf-bild-inhalt h2{
	color:#ffffff;
	font-size:24px;
  	margin:10px 0px;
}
@media (max-width: 1023px) {
	.text-auf-bild-inhalt h1 {
	font-size:30px;
	/* Container horizontal mittig platzieren */
    margin: auto;
	}	
	.text-auf-bild-inhalt h2 {
	font-size:20px
	}	
}

@media (max-width: 768px) {
	.text-auf-bild-inhalt h1 {
		font-size:26px;
	/* Container horizontal mittig platzieren */
    margin: auto;
	}	
	.text-auf-bild-inhalt h2 {
		font-size:16px
	}	
}





    
   


.gradient-test {
background-image: linear-gradient(to top right in oklab,oklch(28% 0.3 22)  0%, oklch(86% 0.43 83) 81%);



}

/* Seite Index */

.gradient-test2 {

background-color:hsla(0,100%,50%,1);
background-image:
radial-gradient(at 85% 47%, hsla(24,99%,49%,1) 0px, transparent 50%),
radial-gradient(at 84% 17%, hsla(22,100%,77%,1) 0px, transparent 50%),
radial-gradient(at 12% 78%, hsla(260,100%,71%,1) 0px, transparent 50%),
radial-gradient(at 38% 26%, hsla(0,100%,33%,1) 0px, transparent 50%);
}

/* Seite Kinder */

.gradient-test3 {

background-color:hsla(28,100%,52%,1);
background-image:
radial-gradient(at 91% 88%, hsla(24,99%,49%,1) 0px, transparent 50%),
radial-gradient(at 26% 84%, hsla(314,89%,49%,1) 0px, transparent 50%),
radial-gradient(at 55% 17%, hsla(218,100%,71%,1) 0px, transparent 50%),
radial-gradient(at 99% 2%, hsla(0,100%,50%,0.53) 0px, transparent 50%);
}


.gradient-test4 {

background-color:hsla(28,100%,82%,1);
background-image:
radial-gradient(at 13% 82%, hsla(24,99%,49%,1) 0px, transparent 50%),
radial-gradient(at 78% 9%, hsla(24,99%,49%,1) 0px, transparent 50%),
radial-gradient(at 4% 4%, hsla(202,91%,49%,0.95) 0px, transparent 50%),
radial-gradient(at 44% 56%, hsla(266,79%,53%,1) 0px, transparent 50%),
radial-gradient(at 85% 77%, hsla(0,100%,50%,1) 0px, transparent 50%);
}

/* Seite Erwachsene */

.gradient-5 {

background-color:hsla(37,100%,50%,1);
background-image:
radial-gradient(at 47% 18%, hsla(23,98%,64%,0.99) 0px, transparent 50%),
radial-gradient(at 65% 12%, hsla(191,100%,50%,1) 0px, transparent 50%),
radial-gradient(at 64% 80%, hsla(358,100%,50%,1) 0px, transparent 50%),
radial-gradient(at 14% 5%, hsla(358,100%,54%,1) 0px, transparent 50%);
}

/* Seite Stimme */

.gradient-6 {

background-color:hsla(28,100%,82%,1);
background-image:
radial-gradient(at 50% 4%, hsla(30,100%,50%,1) 0px, transparent 50%),
radial-gradient(at 0% 57%, hsla(210,100%,56%,0.75) 0px, transparent 50%),
radial-gradient(at 8% 14%, hsla(355,100%,47%,1) 0px, transparent 50%),
radial-gradient(at 13% 96%, hsla(348,100%,50%,1) 0px, transparent 50%),
radial-gradient(at 0% 100%, hsla(18,100%,50%,1) 0px, transparent 50%),
radial-gradient(at 96% 86%, hsla(240,93%,62%,1) 0px, transparent 50%),
radial-gradient(at 0% 0%, hsla(343,100%,76%,1) 0px, transparent 50%);
}

/* Seite Praxis */

.gradient-7 {

background-color:hsla(28,100%,82%,1);
background-image:
radial-gradient(at 40% 20%, hsla(24,100%,49%,1) 0px, transparent 50%),
radial-gradient(at 92% 4%, hsla(216,80%,52%,1) 0px, transparent 50%),
radial-gradient(at 0% 100%, hsla(189,100%,56%,1) 0px, transparent 50%),
radial-gradient(at 0% 50%, hsla(355,100%,50%,1) 0px, transparent 50%),
radial-gradient(at 91% 76%, hsla(340,99%,49%,1) 0px, transparent 50%),
radial-gradient(at 0% 100%, hsla(18,100%,50%,0.97) 0px, transparent 50%),
radial-gradient(at 41% 12%, hsla(44,100%,76%,0.99) 0px, transparent 50%);
}

/* Seite Impressum */

.gradient-8 {

background-color:hsla(28,100%,82%,1);
background-image:
radial-gradient(at 40% 20%, hsla(24,100%,49%,1) 0px, transparent 50%),
radial-gradient(at 89% 62%, hsla(216,80%,52%,1) 0px, transparent 50%),
radial-gradient(at 12% 2%, hsla(189,100%,56%,1) 0px, transparent 50%),
radial-gradient(at 0% 50%, hsla(355,100%,50%,1) 0px, transparent 50%),
radial-gradient(at 31% 69%, hsla(0,100%,50%,0.97) 0px, transparent 50%),
radial-gradient(at 2% 93%, hsla(18,100%,50%,0.97) 0px, transparent 50%),
radial-gradient(at 63% 31%, hsla(44,100%,76%,0.99) 0px, transparent 50%);
}


.gradient-hell-1 {

background:#faf5f2;
 	
background-color:hsla(27,0%,100%,1);
background-image:
radial-gradient(at 13% 82%, hsla(24,99%,49%,0) 0px, transparent 50%),
radial-gradient(at 99% 7%, hsla(314,89%,49%,0.27) 0px, transparent 50%),
radial-gradient(at 98% 3%, hsla(202,91%,49%,0) 0px, transparent 50%),
radial-gradient(at 11% 11%, hsla(19,100%,50%,0.25) 0px, transparent 50%),
radial-gradient(at 97% 65%, hsla(0,100%,50%,0) 0px, transparent 50%);

}

.gradient-hell-2 {

background-color:hsla(0,0%,100%,1);
background-image:
radial-gradient(at 13% 2%, hsla(359,100%,50%,0.15) 0px, transparent 50%),
radial-gradient(at 91% 2%, hsla(38,100%,50%,0.24) 0px, transparent 50%);
}


background-image: linear-gradient(to top right, #870000 0%, #ff9500 81%);


  background-image: linear-gradient(to top right in oklab,oklch(28% 0.3 22)  0%, oklch(86% 0.43 83) 81%);
  --sdr-gradient: linear-gradient(to top right, #870000 0%, #ff9500 81%);

  background: var(--hdr-gradient);




/* Sektionen mit Hintergrundfarben */
  
.beigeverlauf {
	background:#faf5f2;     
	}
   
.orangeverlauf {
	background-color: #FF9B00;
   }

.hintergrund-rot {
	background:#a60000;     
	}

.hintergrund-orange {
	background:#ff8400;     
	}


/* Zungenbrecher */



.zungenbrechertext {
 	padding:10px 20px;
  	color:#ffffff;
  	font-family: 'Merriweather', 'open sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
  	font-weight: 800;
  	font-size:60px; 
  	font-style:italic;
  	text-align:center; 
  	line-height:1.3;
  	margin:80px 0px 30px 0px;
}
@media (max-width: 1223px) {
.zungenbrechertext {
  	font-size:45px;
	margin:60px 0px;
	}
}
@media (max-width: 1023px) {
.zungenbrechertext {
  	font-size:40px;	
  	margin:60px 0px 20px 0px;
	}
}
@media (max-width: 767px) {
.zungenbrechertext {
  	font-size:40px;	
  	margin:40px 0px 10px 0px;
	}
}

/* Red border */
.zungenbrecherlinie {
	border: 2px solid white;
}

.btn {
  display: inline-block;
  margin-bottom: 0;
  font-weight: normal;
  text-align: center;
  vertical-align: middle;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  cursor: pointer;
  background-image: none;
  border: 1px solid transparent;
  white-space: nowrap;
  padding: 10px 15px;
  font-size: 15px;
  line-height: 1.42857143;
  border-radius: 4px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.btn:focus,
.btn:active:focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn.active.focus {
  outline: thin dotted;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}
.btn:hover,
.btn:focus,
.btn.focus {
  color: #ffffff;
  text-decoration: none;
}
.btn:active,
.btn.active {
  outline: 0;
  background-image: none;
  -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}
.btn.disabled,
.btn[disabled],
fieldset[disabled] .btn {
  cursor: not-allowed;
  opacity: 0.65;
  filter: alpha(opacity=65);
  -webkit-box-shadow: none;
  box-shadow: none;
}
a.btn.disabled,
fieldset[disabled] a.btn {
  pointer-events: none;
}
.btn-default {
  color: #ffffff;
  background-color: #95a5a6;
  border-color: #95a5a6;
}
.btn-default:focus,
.btn-default.focus {
  color: #ffffff;
  background-color: #798d8f;
  border-color: #566566;
}
.btn-default:hover {
  color: #ffffff;
  background-color: #798d8f;
  border-color: #74898a;
}
.btn-default:active,
.btn-default.active,
.open > .dropdown-toggle.btn-default {
  color: #ffffff;
  background-color: #798d8f;
  border-color: #74898a;
}
.btn-default:active:hover,
.btn-default.active:hover,
.open > .dropdown-toggle.btn-default:hover,
.btn-default:active:focus,
.btn-default.active:focus,
.open > .dropdown-toggle.btn-default:focus,
.btn-default:active.focus,
.btn-default.active.focus,
.open > .dropdown-toggle.btn-default.focus {
  color: #ffffff;
  background-color: #687b7c;
  border-color: #566566;
}
.btn-default:active,
.btn-default.active,
.open > .dropdown-toggle.btn-default {
  background-image: none;
}
.btn-default.disabled:hover,
.btn-default[disabled]:hover,
fieldset[disabled] .btn-default:hover,
.btn-default.disabled:focus,
.btn-default[disabled]:focus,
fieldset[disabled] .btn-default:focus,
.btn-default.disabled.focus,
.btn-default[disabled].focus,
fieldset[disabled] .btn-default.focus {
  background-color: #95a5a6;
  border-color: #95a5a6;
}
.btn-default .badge {
  color: #95a5a6;
  background-color: #ffffff;
}
.btn-primary {
  	margin-Top:20px;
  	color:white;
  	background-color:#a60000;
  	border:2px solid #a60000;
  	text-decoration:none;
  	-webkit-border-radius:50px;
	-moz-border-radius:50px;
	-khtml-border-radius:50px;
	border-radius:50px;
	transition: all 0.4s; /* animiert */
}
.btn-primary:focus,
.btn-primary.focus {
  color: #ffffff;
  background-color: #ff8400;
  border-color: #ff8400;
}
.btn-primary:hover {
  	color: #ff8400;
  	background-color: #ffffff;
  	border:2px solid #ff8400;
}
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
  color: #ffffff;
  background-color: #1a242f;
  border-color: #161f29;
}
.btn-primary:active:hover,
.btn-primary.active:hover,
.open > .dropdown-toggle.btn-primary:hover,
.btn-primary:active:focus,
.btn-primary.active:focus,
.open > .dropdown-toggle.btn-primary:focus,
.btn-primary:active.focus,
.btn-primary.active.focus,
.open > .dropdown-toggle.btn-primary.focus {
  color: #ffffff;
  background-color: #0d1318;
  border-color: #000000;
}
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
  background-image: none;
}
.btn-primary.disabled:hover,
.btn-primary[disabled]:hover,
fieldset[disabled] .btn-primary:hover,
.btn-primary.disabled:focus,
.btn-primary[disabled]:focus,
fieldset[disabled] .btn-primary:focus,
.btn-primary.disabled.focus,
.btn-primary[disabled].focus,
fieldset[disabled] .btn-primary.focus {
  background-color: #2c3e50;
  border-color: #2c3e50;
}
.btn-primary .badge {
  color: #2c3e50;
  background-color: #ffffff;
}


.btn-orange {
  	margin-Top:20px;
  	color:white;
  	background-color:#ff8400;
  	border:2px solid #ff8400;
  	text-decoration:none;
  	-webkit-border-radius:50px;
	-moz-border-radius:50px;
	-khtml-border-radius:50px;
	border-radius:50px;
	transition: all 0.4s; /* animiert */
}
.btn-orange:focus,
.btn-orange.focus {
  color: #ffffff;
  background-color: #ff8400;
  border-color: #ff8400;
}
.btn-orange:hover {
  	color: #ff8400;
  	background-color: #ffffff;
  	border:2px solid #ff8400;
}
.btn-orange:active,
.btn-orange.active,
.open > .dropdown-toggle.btn-primary {
  color: #ffffff;
  background-color: #1a242f;
  border-color: #161f29;
}
.btn-orange:active:hover,
.btn-orange.active:hover,
.open > .dropdown-toggle.btn-primary:hover,
.btn-orange:active:focus,
.btn-orange.active:focus,
.open > .dropdown-toggle.btn-primary:focus,
.btn-orange:active.focus,
.btn-orange.active.focus,
.open > .dropdown-toggle.btn-primary.focus {
  color: #ffffff;
  background-color: #0d1318;
  border-color: #000000;
}
.btn-orange:active,
.btn-orange.active,
.open > .dropdown-toggle.btn-primary {
  background-image: none;
}
.btn-primary.disabled:hover,
.btn-primary[disabled]:hover,
fieldset[disabled] .btn-primary:hover,
.btn-primary.disabled:focus,
.btn-primary[disabled]:focus,
fieldset[disabled] .btn-primary:focus,
.btn-primary.disabled.focus,
.btn-primary[disabled].focus,
fieldset[disabled] .btn-primary.focus {
  background-color: #2c3e50;
  border-color: #2c3e50;
}
.btn-orange.badge {
  color: #2c3e50;
  background-color: #ffffff;
}