@charset "UTF-8";


/* Animation der Herobuttons beim ersten Anzeigen */
@keyframes fadein{
	0% {opacity:0; filter:alpha(opacity=0); -moz-opacity:0; visibility: visible;}
	100% {opacity:1; filter:alpha(opacity=100); -moz-opacity:1; visibility: visible;}
	}

@keyframes slidedfadein{
	0% {transform:translateX(15px); opacity:0; filter:alpha(opacity=0); -moz-opacity:0; visibility: visible;}
	100% {transform:translateX(0); opacity:1; filter:alpha(opacity=100); -moz-opacity:1; visibility: visible;}
	}

@keyframes slideleft{
	0% {transform:translateX(50px); opacity:0; filter:alpha(opacity=0); -moz-opacity:0; visibility: visible;}
	100% {transform:translateX(0); opacity:1; filter:alpha(opacity=100); -moz-opacity:1; visibility: visible;}
	}

@keyframes dropin{
	0% {transform:scale(1.30); opacity:0; filter:alpha(opacity=0); -moz-opacity:0; visibility: visible;}
	50% {transform:scale(1.15); opacity:0.1; filter:alpha(opacity=10); -moz-opacity:0.1; visibility: visible;}
	100% {transform:scale(1.00); opacity:1; filter:alpha(opacity=100); -moz-opacity:1; visibility: visible;}
	}

@keyframes dropinover{
	0% {transform:scale(1.30); opacity:0; filter:alpha(opacity=0); -moz-opacity:0; visibility: visible;}
	30% {transform:scale(1.15); opacity:0.1; filter:alpha(opacity=10); -moz-opacity:0.1; visibility: visible;}
	65% {transform:scale(0.95); opacity:1; filter:alpha(opacity=100); -moz-opacity:1; visibility: visible;}
	100% {transform:scale(1.00); opacity:1; filter:alpha(opacity=100); -moz-opacity:1; visibility: visible;}
	}

@keyframes grow{
	0% {transform:scale(0); opacity:0; filter:alpha(opacity=0); -moz-opacity:0; visibility: visible;}
	100% {transform:scale(1.00); opacity:1; filter:alpha(opacity=100); -moz-opacity:1; visibility: visible;}
	}

@keyframes growover{
	0% {transform:scale(0); opacity:0; filter:alpha(opacity=0); -moz-opacity:0; visibility: visible;}
	65% {transform:scale(1.07); opacity:1; filter:alpha(opacity=100); -moz-opacity:1; visibility: visible;}
	100% {transform:scale(1.00); opacity:1; filter:alpha(opacity=100); -moz-opacity:1; visibility: visible;}
	}

	
	
	
/* ******** Styles für Titelzeile  ******** */
.rotelinie	{margin:0px; padding:0px; background:url('bilder/rotelinie.gif') repeat-x #ff0101; width:100%; height:7px; border-bottom:2px solid #444444;}
.halbezeile		{margin:0px; padding:0px; width:100%; height:6px;}
.titel		{font-family: Calibri, Verdana, Geneva, Arial, Helvetica, sans-serif; font-size:17px; font-weight:normal; font-style:normal; color:#000000; text-align:left; margin:0px; padding:0px; background:url('bilder/hg_titel.jpg') no-repeat #7596d9; width:100%; height:80px; border-bottom:2px solid #657699;}
@media screen and (max-width: 782px) {.titel	{background-position:-128px 0px}}
.titelbild		{width:600px; height:80px;}
@media screen and (max-width: 782px) {.titelbild	{width:400px; height:80px;}}

.navigation {position: fixed; top:0; left: 0; width:100%; transition:transform 0.3s ease; z-index: 9;}
.navigation.hidden {transform:translateY(-100%);}

/* ******** Styles für Menü ******** */
.menueblock		{background:url('bilder/hg_inhalt.gif'); background-size:cover; background-repeat:repeat-x; background-color:#7596d9; display:flex; flex-wrap:wrap; flex-direction:row; padding:0px 6vw 0px 6vw; border-top:0px solid #333333; border-right:0px solid #333333; border-bottom:1px solid #333333; border-left:0px solid #333333; gap:10px; justify-content:space-between;}
@media screen and (max-width: 782px) {.menueblock	{padding: 0px 0vw 0px 0vw; gap:0px; border-top:1px solid #aaaaaa;}}

.menueleiste		{font-family: Calibri, Verdana, Geneva, Arial, Helvetica, sans-serif; font-size:18px; font-weight:normal; color:#000000; margin:0px; padding:3px 0px 0px 0px; height:25px; display:flex; flex-wrap:wrap; flex-direction:row; gap:7px}
@media screen and (max-width: 782px) {.menueleiste	{height:27px;}}
.menue			{font-family: Calibri, Verdana, Geneva, Arial, Helvetica, sans-serif; font-size:18px; font-weight:normal; color:#3d3d3d; text-decoration:none; padding:0px; white-space:nowrap;}
@media screen and (max-width: 782px) {.menue	{font-size:21px;}}

.menue_aktiv		{font-family: Calibri, Verdana, Geneva, Arial, Helvetica, sans-serif; font-size:18px; font-weight:normal; color:#000000; text-decoration:none; padding:0px; background-color:#6680b0; border-bottom:1px solid #5f80c3;}
@media screen and (max-width: 782px) {.menue_aktiv	{font-size:21px;}}
a.menue:link		{font-weight:normal; color:#3d3d3d; text-decoration:none; padding:0px;}
a.menue:active		{font-weight:normal; color:#3d3d3d; text-decoration:none;}
a.menue:visited		{font-weight:normal; color:#3d3d3d; text-decoration:none;}
a.menue:hover		{font-weight:normal; color:#ffffff; text-decoration:none; background-color:#d00000;}

.menueleiste2		{font-family: Calibri, Verdana, Geneva, Arial, Helvetica, sans-serif; font-size:18px; font-weight:normal; color:#000000; margin:0px; padding:3px 0px 0px 0px; background:url('bilder/hg_inhalt2.gif'); background-size:cover; background-repeat:repeat-x; height:25px; justify-content:center; /* background-color:#a0c3f3; */}
@media screen and (max-width: 782px) {.menueleiste2	{margin:0px 0px 0px 10px; height:26px;}}
.menue2			{font-family: Calibri, Verdana, Geneva, Arial, Helvetica, sans-serif; font-size:18px; font-weight:normal; color:#3d3d3d; text-decoration:none; padding:0px; white-space:nowrap;}
@media screen and (max-width: 782px) {.menue2	{font-size:19px;}}
a.menue2:link		{font-weight:normal; color:#3d3d3d; text-decoration:none;}
a.menue2:active		{font-weight:normal; color:#3d3d3d; text-decoration:none;}
a.menue2:visited	{font-weight:normal; color:#3d3d3d; text-decoration:none;}
a.menue2:hover		{font-weight:normal; color:#111111; text-decoration:none;}

.navigation_emailicon	{position:relative; top:1px; padding:0px 20px 0px 25px; width:18px; height:auto;}
@media screen and (max-width: 782px) {.navigation_emailicon	{top:0px; transform: scale(1.2); transform-origin: center center; }}
.navigation_phoneicon	{position:relative; top:3px; padding:0px 10px 0px 20px; width:16px; height:auto;}
@media screen and (max-width: 782px) {.navigation_phoneicon	{top:2px; transform: scale(1.0); transform-origin: center center; }}


/* ******** Styles für Hero-Video ******** */
video {	object-fit:cover; width:100vw; max-height:720px; } /* Hero-Vodeo, 100vw= vollebreite, overflow:hidden verhindert Scrollbalken*/
.herocaption {font-family: Calibri, Verdana, Geneva, Arial, Helvetica, sans-serif; font-size:25; font-weight:normal; font-style:normal; color:#ffffff; text-align:center; margin:0px 0px 0px 0px; text-align:center; z-index: 2; position:relative; top:-80px; left: 2px; filter:alpha(opacity=70); opacity:0.7; -moz-opacity:0.7;}
.herobutton		{font-family: Calibri, Verdana, Geneva, Arial, Helvetica, sans-serif; font-size:20px; font-weight:bold; color:#ffffff; text-decoration:none; margin:0px 16px 0px 0px; padding:3px; border:2px solid #ffffff; border-radius: 30px; min-width:170px; display:inline-block; text-align:center; background-image:linear-gradient(0deg, #333333, #555555); background-color:#00689D; -webkit-box-shadow: -10px 0px 13px -7px #000000, 10px 0px 13px -7px #000000, -10px -10px 10px -10px rgba(157,157,157,0); box-shadow: -10px 0px 13px -7px #000000, 10px 0px 13px -7px #000000, -10px -10px 10px -10px rgba(157,157,157,0);}
@media screen and (max-width: 782px) {.herobutton	{font-size:14px; min-width:75px;  margin:0px 5px 0px 0px;}}
a.herobutton:link		{font-weight:normal; color:#ffffff; text-decoration:none;}
a.herobutton:active		{font-weight:normal; color:#ffffff; text-decoration:none;}
a.herobutton:visited	{font-weight:normal; color:#ffffff; text-decoration:none;}
a.herobutton:hover		{font-weight:bold; color:#ffffff; text-decoration:none; background-image:linear-gradient(0deg, #33A0D9, #44639E); background-color:#00689D; transform: scale(1.1);}

.js-enabled .herobutton {opacity: 0;} /* schaltet per JavaScript lib_controlviewport.js die Anzeige des Elements auf unsichtbar nur wenn JavaScript aktiviert ist und damit die Animation laufen kann. Der Befehl besagt, finde mir einen .herobutton, der irgendwo innerhalb eines Elements mit der Klasse class="js-enabled" steht */
.herobutton {
	animation: fadein 0.7s;
	animation-timing-function: ease-in;   /* Parameter: ease: langsam > schnell | ease-in: slow start | ease-out: soft end | ease-in-out | linear | cubic-bezier(n,n,n,n) */
	animation-delay: 0s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
	animation-play-state: running;
	}




/* ******** Styles für Haupttexte ******** */
.mainbody	{font-family: Calibri, Verdana, Geneva, Arial, Helvetica, sans-serif; font-size:17px; font-weight:normal; font-style:normal; color:#000000; margin:120px 0px 0px 0px; padding:0px 0px 0px 0px;}
.mainframe	{border:0px solid #000000; background-color:#ffffff; margin:0px 0px 0px 0px;}
/* Oldstyle mit Hintergundbild: .mainframe	{border:0px solid #000000; background:url('bilder/hg_text_.jpg'); background-attachment:fixed; background-repeat:no-repeat; background-color:#ffffff; margin:0px 0px 0px 0px;}  */
.maintextfield	{margin:40px 0px 0px 0px; padding: 0px 6vw 0px 6vw; display:flex; flex-wrap:wrap; flex-direction: row; justify-content:space-between; gap:50px;}
@media screen and (max-width: 782px) {.maintextfield	{padding: 0px 1vw 0px 1vw;}}



h1	{font-family: Calibri, Verdana, Geneva, Arial, Helvetica, sans-serif; font-size:22px; font-weight:normal; font-style:normal; color:#000000; text-align:center; margin:30px 0px 0px 0px; position:relative; left:-18px; padding:0px 0px 0px 0px; background-color:#e3e3e3; width:100vw; max-width:500px;}
@media screen and (max-width: 782px) {h1	{margin:70px 0px 0px 0px; font-size:28px; max-width:400px;}}
h2	{font-family: Calibri, Verdana, Geneva, Arial, Helvetica, sans-serif; font-size:20px; font-weight:normal; font-style:normal; color:#000000; text-align:left; margin:0px 0px 0px 0px; padding:0px 0px 0px 0px;}
@media screen and (max-width: 782px) {h2	{font-size:28px; }}
h3	{font-family: Calibri, Verdana, Geneva, Arial, Helvetica, sans-serif; font-size:20px; font-weight:normal; font-style:normal; color:#ffffff; text-align:left; margin:40px 0px 12px 0px; padding:0px 0px 0px 12px; width:75vw; max-width:500px; background-color:#7596d9; background-image:url(bilder/hg_ueberschrift3.gif);  background-size:cover; background-repeat:repeat-x; }
@media screen and (max-width: 782px) {h3	{font-size:22px; }}
h4	{font-family: Calibri, Verdana, Geneva, Arial, Helvetica, sans-serif; font-size:20px; font-weight:normal; font-style:normal; color:#ffffff; text-align:left; margin:40px 0px 12px 0px; padding:6px 0px 0px 12px; width:75vw; max-width:500px; height:28px; background-color:#7596d9; background-image:url(bilder/hg_ueberschrift4b.gif); background-repeat:no-repeat;}
@media screen and (max-width: 782px) {h4	{font-size:22px; }}
h5	{font-family: Calibri, Verdana, Geneva, Arial, Helvetica, sans-serif; font-size:18px; font-weight:normal; font-style:normal; color:#000000; text-align:left; margin:0px 0px 0px 0px; padding:15px 0px 3px 0px;  text-transform: uppercase}
@media screen and (max-width: 782px) {h5	{font-size:20px; }}

.startseite	{font-family: Calibri, Verdana, Geneva, Arial, Helvetica, sans-serif; font-size:17px; font-weight:normal; font-style:normal; color:#000000; text-align:center; line-height:17px;}
.normal		{font-family: Calibri, Verdana, Geneva, Arial, Helvetica, sans-serif; font-size:17px; font-weight:normal; font-style:normal; color:#000000; text-align:left;}
.doppelspaltig	{font-family: Calibri, Verdana, Geneva, Arial, Helvetica, sans-serif; font-size:17px; font-weight:normal; font-style:normal; color:#000000; text-align:left; column-count: 2;}
@media screen and (max-width: 782px) {.doppelspaltig	{column-count: 1;}}
.einzeilig {display:flex; gap:10px;}

.hideonphone {display:visible;}
@media screen and (max-width: 782px) {.hideonphone	{display:none;}}

.teaserbild	{width:100px; height:100px; z-index:2; padding:0; margin:0; display: block;} /* Vorschaubilder */
.image_link	{border:1px solid #ffffff; display:flex; line-height:0px; align-items: center; padding:0px; margin:0px; text-decoration: none; overflow: hidden;} /* inline-block, weil sonst der Rahmen nur in Schrifthöhe = 20% um das Bild ist. Line-height entfernt minimalen Abstände unter dem Bild */
a.image_link:link		{border:1px solid transparent;}
a.image_link:active		{border:1px solid transparent;}
a.image_link:visited	{border:1px solid transparent;}
a.image_link:hover		{border:1px solid #cc0000;}

ul li	{list-style-image:url("bilder/pfeil.gif"); text-indent:+0px; position:relative; left:-16px; text-align:left;}
.icon_link	{margin:0px 6px 0px 0px; padding:0px 2px 0px 2px; position:relative; top:2px;}
@media screen and (max-width: 782px) {.icon_link	{padding:0px 6px 0px 2px; position:relative; top:1px; transform: scale(1.2); transform-origin:left bottom; }}

/* .icon_neu	{font-family: Calibri, Verdana, Geneva, Arial, Helvetica, sans-serif; font-size:12px; font-weight:normal; font-style:italic; color:#008800; text-align:center; margin: 0px 0px 0px 0px; padding:0px 5px 0px 0px; width:18px; height:8px} nur unauffällige grüne Schrift */

.icon_neu2026-02	{font-family: Calibri, Verdana, Geneva, Arial, Helvetica, sans-serif; font-size:12px; font-weight:normal; font-style:italic; color:#ffffff; text-align:center; margin: 0px 5px 0px 0px; padding:0px 5px 0px 5px; border: 0px solid #35579b; border-radius:8px; background-image:linear-gradient(0deg, #335599, #99bbee); background-color:#7597df; width:18px; height:8px; position:relative; top:-1px;}
.icon_neu2026-02::before {content: "neu!";}

.icon_neu2025-10	{font-family: Calibri, Verdana, Geneva, Arial, Helvetica, sans-serif; font-size:12px; font-weight:normal; font-style:italic; color:#ffffff; text-align:center; margin: 0px 5px 0px 0px; padding:0px 5px 0px 5px; border: 0px solid #35579b; border-radius:8px; background-image:linear-gradient(0deg, #335599, #99bbee); background-color:#7597df; width:18px; height:8px; position:relative; top:-1px;}
.icon_neu2025-10::before {content: "neu!";}

.icon_neu2025-05	{font-family: Calibri, Verdana, Geneva, Arial, Helvetica, sans-serif; font-size:11px; font-weight:normal; font-style:italic; color:#ffffff; text-align:center; margin: 0px 5px 0px 0px; padding:0px 5px 0px 5px; border: 0px solid #aaaaaa; border-radius:8px; background-image:linear-gradient(0deg, #888888, #dadada); background-color:#7597df; width:18px; height:8px; position:relative; top:-1px;}
.icon_neu2025-05::before {content: "5/25";}



.icon_anmelden	{font-family: Calibri, Verdana, Geneva, Arial, Helvetica, sans-serif; font-size:12px; font-weight:normal; font-style:italic; color:#ffffff; text-align:center; margin: 0px 5px 0px 5px; padding:0px 5px 0px 5px; border: 0px solid #aaaaaa; border-radius:3px; background-image:linear-gradient(0deg, #335599, #99bbee); background-color:#7597df; width:18px; height:8px; position:relative; top:-1px;}
.icon_anmelden::before {content: "Anmelden";}



/* ******** Styles für Akkordeon ******** */
.akkordeon_thema	{font-family: Calibri, Verdana, Geneva, Arial, Helvetica, sans-serif; font-size:17px; font-weight:normal; font-style:normal; color:#000000; text-align:left; padding:0px 0px 0px 16px;}
details[open] > summary.akkordeon_thema {color:#355699; font-weight:bold; font-style:italic;}
@media screen and (max-width: 782px) {.akkordeon_thema	{font-size:20px; }}
.akkordeon_text		{font-family: Calibri, Verdana, Geneva, Arial, Helvetica, sans-serif; font-size:17px; font-weight:normal; font-style:normal; color:#000000; text-align:left; padding:2px 0px 8px 32px;}
@media screen and (max-width: 782px) {.akkordeon_text	{font-size:20px; padding:2px 0px 8px 36px;}}
.akkordeon_aufzaehlung	{padding:3px 0px 0px 10px; text-indent: -10px}
@media screen and (max-width: 782px) {.akkordeon_text	{font-size:20px; }}
.akkordeon_trenner	{margin:3px 0px 1px 0px; width:150px; height:10px; border-top:1px solid #bbbbbb;}

.akkordeon_button		{font-family: Calibri, Verdana, Geneva, Arial, Helvetica, sans-serif; font-size:13px; font-weight:normal; color:#000000; text-decoration:none; padding:3px; border:1px solid #333333; border-radius: 3px; min-width:100px; height:15px; display:inline-block; text-align:center;}
@media screen and (max-width: 782px) {.akkordeon_button	{font-size:17px; min-width:120px; height:22px; padding: 2px 8px 2px 8px}}
a.akkordeon_button:link		{font-weight:normal; color:#000000; text-decoration:none;}
a.akkordeon_button:active	{font-weight:normal; color:#000000; text-decoration:none;}
a.akkordeon_button:visited	{font-weight:normal; color:#000000; text-decoration:none;}
a.akkordeon_button:hover	{font-weight:bold; color:#ffffff; text-decoration:none; background-image:linear-gradient(0deg, #7597df, #95b5f6); background-color:#7597df;}

.js-enabled .akkordeon_button {opacity: 0;} /* schaltet per JavaScript lib_controlviewport.js die Anzeige des Elements auf unsichtbar nur wenn JavaScript aktiviert ist und damit die Animation laufen kann. */
.js-enabled .akkordeon_button.inViewport {  /* schaltet per JavaScript lib_controlviewport.js die Anzeige des Elements auf unsichtbar nur wenn JavaScript aktiviert ist und damit die Animation laufen kann. Der Befehl besagt, finde mir einen .akkorden_button, der irgendwo innerhalb eines Elements mit der Klasse class="js-enabled" steht */
	animation: slidedfadein 0.7s;
	animation-timing-function: ease-out;  /* Parameter: ease: langsam > schnell | ease-in: slow start | ease-out: soft end | ease-in-out | linear | cubic-bezier(n,n,n,n) */
	animation-delay: 0s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
	animation-play-state: running;
	}



/* ******** Styles für Wortwolke ******** */
.themen		{font-family: Calibri, Verdana, Geneva, Arial, Helvetica, sans-serif; font-size:16px; font-weight:normal; color:#8d8d8d; text-decoration:none; margin:0px 0px 3px 0px; padding:0px 0px 0px 4px;}
@media screen and (max-width: 782px) {.themen	{font-size:19px}}
a.themen:link		{font-weight:normal; color:#8d8d8d; text-decoration:none;}
a.themen:active		{font-weight:normal; color:#8d8d8d; text-decoration:none;}
a.themen:visited	{font-weight:normal; color:#8d8d8d; text-decoration:none;}
a.themen:hover		{font-weight:normal; color:#000000; text-decoration:none;}
.thementitel		{font-family: Calibri, Verdana, Geneva, Arial, Helvetica, sans-serif; font-size:15px; font-weight:bold; background-color:#e0e0e0; color:#3d3d3d; text-decoration:none; margin:0px 0px 3px 0px; padding:0px 0px 0px 10px;}
@media screen and (max-width: 782px) {.thementitel	{font-size:18px}}

/* ******** Styles für Buttons ******** */
.button		{font-family: Calibri, Verdana, Geneva, Arial, Helvetica, sans-serif; font-size:14px; font-weight:normal; color:#000000; text-decoration:none; padding:3px; border:1px solid #333333; border-radius: 20px; min-width:100px; display:inline-block; text-align:center;}
@media screen and (max-width: 782px) {.button	{font-size:17px}}
a.button:link		{font-weight:normal; color:#000000; text-decoration:none;}
a.button:active		{font-weight:normal; color:#000000; text-decoration:none;}
a.button:visited	{font-weight:normal; color:#000000; text-decoration:none;}
a.button:hover		{font-weight:bold; color:#ffffff; text-decoration:none; background-image:linear-gradient(0deg, #33A0D9, #44639E); background-color:#7597df;}

.js-enabled .button {opacity: 0;}  /* schaltet per JavaScript lib_controlviewport.js die Anzeige des Elements auf unsichtbar nur wenn JavaScript aktiviert ist und damit die Animation laufen kann. Der Befehl besagt, finde mir einen .button, der irgendwo innerhalb eines Elements mit der Klasse class="js-enabled" steht */
.js-enabled .button.inViewport {  /* JavaScript lib_controlviewport.js fügt an die Klasse genau diese Eigenschaftendefinition 'inViewport' hinzu, wenn das Element sichtbar wird. Klasse muss im Javascript AKTIV MANUELL zur Beobachtung eingetragen werden! */
	animation: dropin 0.7s;
	animation-timing-function: ease-out;  /* Parameter: ease: langsam > schnell | ease-in: slow start | ease-out: soft end | ease-in-out | linear | cubic-bezier(n,n,n,n) */
	animation-delay: 0s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
	animation-play-state: running;
	}



/* ******** Styles für Quickbar und Box ******** */
.quickbar	{font-family: Calibri, Verdana, Geneva, Arial, Helvetica, sans-serif; font-size:15px; font-weight:normal; font-style:normal; color:#000000;}
@media screen and (max-width: 782px) {.quickbar	{font-size:18px;}}
.box	{border:1px solid #cccccc; padding:0px; box-shadow: 0 2px 5px rgba(0,0,0,0.2), 0 5px 10px rgba(0,0,0,0.2); background-repeat: no-repeat; background-position:right bottom; background-color:#ffffff;}
/* Nur wenn die Klasse .js-enabled am HTML-Tag existiert, verstecken wir sie */
.js-enabled .boxanimation {opacity: 0;} /* schaltet per JavaScript lib_controlviewport.js die Anzeige des Elements auf unsichtbar nur wenn JavaScript aktiviert ist und damit die Animation laufen kann. */
.js-enabled .boxanimation.inViewport {  /* JavaScript lib_controlviewport.js fügt an die Klasse genau diese Eigenschaftendefinition 'inViewport' hinzu, wenn das Element sichtbar wird. Klasse muss im Javascript AKTIV MANUELL zur Beobachtung eingetragen werden! */
	animation: grow 0.7s;
	animation-timing-function: ease-out;  /* Parameter: ease: langsam > schnell | ease-in: slow start | ease-out: soft end | ease-in-out | linear | cubic-bezier(n,n,n,n) */
	animation-delay: 0s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
	animation-play-state: running;
	}



.box_rotelinie	{margin:0px; padding:0px; background-image:linear-gradient(0deg, #cc0000, #ff0000); width:100%; height:5px;}
.box_h1	{font-family: Calibri, Verdana, Geneva, Arial, Helvetica, sans-serif; font-size:17px; font-weight:bold; font-style:normal; color:#555555; text-align:left; background:url('bilder/verlauf_grau.jpg'); background-size:cover; background-repeat:repeat-x; background-color:#bbbbbb; margin:0px 0px 8px 0px; padding:2px 0px 2px 7px; border-bottom: 1px solid #999999;}
@media screen and (max-width: 782px) {.box_h1	{font-size:19px;}}
.boxtext	{font-family: Calibri, Verdana, Geneva, Arial, Helvetica, sans-serif; font-size:17px; font-weight:normal; font-style:normal; color:#555555; text-align:left; padding: 0px 10px 0px 17px;}
@media screen and (max-width: 782px) {.boxtext	{font-size:19px;}}
a.boxtext:link		{font-weight:normal; color:#000000; text-decoration:none; padding: 0px 0px 0px 4px;}
a.boxtext:active	{font-weight:normal; color:#000000; text-decoration:none; padding: 0px 0px 0px 4px;}
a.boxtext:visited	{font-weight:normal; color:#000000; text-decoration:none; padding: 0px 0px 0px 4px;}
a.boxtext:hover		{font-weight:normal; color:#000000; text-decoration:underline; padding: 0px 0px 0px 4px;}

.boxlink	{font-family: Calibri, Verdana, Geneva, Arial, Helvetica, sans-serif; font-size:17px; font-weight:normal; font-style:normal; color:#555555; text-align:left; padding: 0px 10px 0px 41px; text-indent:-24px;}
@media screen and (max-width: 782px) {.boxlink	{font-size:19px; padding: 0px 10px 0px 46px; text-indent:-29px;}}
a.boxlink:link		{font-weight:normal; color:#000000; text-decoration:none; padding: 0px 0px 0px 4px;}
a.boxlink:active	{font-weight:normal; color:#000000; text-decoration:none; padding: 0px 0px 0px 4px;}
a.boxlink:visited	{font-weight:normal; color:#000000; text-decoration:none; padding: 0px 0px 0px 4px;}
a.boxlink:hover		{font-weight:normal; color:#000000; text-decoration:underline; padding: 0px 0px 0px 4px;}

.boxen_doppelspaltig	{margin:35px 40px 40px 40px; padding: 0px; display:flex; flex-wrap:wrap; flex-direction: row; gap:40px; justify-content:space-between;}
.boxdetails	{font-family: Calibri, Verdana, Geneva, Arial, Helvetica, sans-serif; font-size:17px; font-weight:normal; font-style:normal; color:#555555; text-align:center; padding:15px 0px 15px 0px;}

/* Formate Insbesondere für Trainingszeiten, weil sonst die Uhrzeit umbricht */
.boxtable {display:table; padding: 0px 5px 0px 11px;}
.boxtable-row {display:table-row; white-space:nowrap;}
.boxtable-cell	{display:table-cell; font-family: Calibri, Verdana, Geneva, Arial, Helvetica, sans-serif; font-size:17px; font-weight:normal; font-style:normal; color:#555555; text-align:left; padding: 0px 6px 0px 6px;}
@media screen and (max-width: 782px) {.boxtable-cell	{font-size:19px;}}


.js-enabled .grafik {opacity: 0;}  /* schaltet per JavaScript lib_controlviewport.js die Anzeige des Elements auf unsichtbar nur wenn JavaScript aktiviert ist und damit die Animation laufen kann. Der Befehl besagt, finde mir eine .grafik, der irgendwo innerhalb eines Elements mit der Klasse class="js-enabled" steht */
.js-enabled .grafik.inViewport {  /* JavaScript lib_controlviewport.js fügt an die Klasse genau diese Eigenschaftendefinition 'inViewport' hinzu, wenn das Element sichtbar wird. Klasse muss im Javascript AKTIV MANUELL zur Beobachtung eingetragen werden! */
	animation: grow 0.7s;
	animation-timing-function: ease-out;  /* Parameter: ease: langsam > schnell | ease-in: slow start | ease-out: soft end | ease-in-out | linear | cubic-bezier(n,n,n,n) */
	animation-delay: 0s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
	animation-play-state: running;
	}



/* ******** Styles für Bilder Overlay ******** */
.bilderframe	{font-family: Calibri, Verdana, Geneva, Arial, Helvetica, sans-serif; font-size:15px; color:#000000; font-weight:normal; border:0px solid #eeeeee; margin-left:0px; position:absolute; left: 0px; top:-3000px; z-index:10; padding:10px 10px 10px 10px; width:800px; height:600px; text-align:left;}
.bilder_h1		{font-family: Calibri, Verdana, Geneva, Arial, Helvetica, sans-serif; font-size:22px; color:#f0f0f0; font-weight:normal; text-align:left;}
.bildanzeige	{font-family: Calibri, Verdana, Geneva, Arial, Helvetica, sans-serif; font-size:15px; color:#000000; font-weight:normal; border:0px solid #fffff; margin-left:0px; padding:0px 0px 10px 0px; text-align:left; background-color:#000000;}
.bildinfo		{font-size:15px;}
@media screen and (max-width: 782px) {.bildinfo	{font-size:18px; }}
.steuerelement	{}
@media screen and (max-width: 782px) {.steuerelement	{padding-left:5px; padding-right:5px; transform: scale(1.3); transform-origin: center center; }}


/* ******** Styles für Rechtstexte ******** */
.rechtsueberschrift	{font-family: Calibri, Verdana, Geneva, Arial, Helvetica, sans-serif; font-size:19px; font-style:normal; font-weight:normal; color:#000000; text-align:left; padding:0px 0px 4px 0px;}
.rechtstext		{font-family: Calibri, Verdana, Geneva, Arial, Helvetica, sans-serif; font-size:15px; font-style:normal; font-weight:normal; color:#000000; text-align:left;}


/* ******** Styles für Fussnoten ******** */
.fussnotenblock	{background-image:linear-gradient(45deg, #191e22, #3b4449); background-color:#191e22; display:flex; flex-wrap:wrap; flex-direction:row; justify-content:space-between; padding:0px 6vw 25px 6vw; border-top:1px solid #777777;}
@media screen and (max-width: 782px) {.fussnotenblock	{padding: 10px 1vw 20px 1vw;}}
.fussnote_h1	{font-family: Calibri, Verdana, Geneva, Arial, Helvetica, sans-serif; font-size:16px; font-weight:normal; font-style:normal; color:#aaaaaa; text-align:left; margin:13px 0px 8px 0px; padding:1px 0px 1px 0px;}
@media screen and (max-width: 782px) {.fussnote_h1	{font-size:19px;}}

.js-enabled .fussnote_h1 {opacity: 0;}  /* schaltet per JavaScript lib_controlviewport.js die Anzeige des Elements auf unsichtbar nur wenn JavaScript aktiviert ist und damit die Animation laufen kann. Der Befehl besagt, finde mir eine .fussnote_h1, der irgendwo innerhalb eines Elements mit der Klasse class="js-enabled" steht */
.js-enabled .fussnote_h1.inViewport {  /* JavaScript lib_controlviewport.js fügt an die Klasse genau diese Eigenschaftendefinition 'inViewport' hinzu, wenn das Element sichtbar wird. Klasse muss im Javascript AKTIV MANUELL zur Beobachtung eingetragen werden! */
	animation: dropin 0.7s;
	animation-timing-function: ease-out;  /* Parameter: ease: langsam > schnell | ease-in: slow start | ease-out: soft end | ease-in-out | linear | cubic-bezier(n,n,n,n) */
	animation-delay: 0.0s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
	animation-play-state: running;
	}

.fussnotentext	{font-family: Calibri, Verdana, Geneva, Arial, Helvetica, sans-serif; font-size:16px; font-weight:normal; font-style:normal; color:#dddddd; text-align:left; padding: 0px 10px 0px 5px;}
@media screen and (max-width: 782px) {.fussnotentext	{font-size:19px;}}

.fussnote	{font-family: Calibri, Verdana, Geneva, Arial, Helvetica, sans-serif; font-size:16px; font-weight:normal; font-style:normal; color:#dddddd;}
@media screen and (max-width: 782px) {.fussnote	{font-size:19px;}}
a.fussnote:link		{font-weight:normal; color:#dddddd; text-decoration:none;}
a.fussnote:active	{font-weight:normal; color:#dddddd; text-decoration:none;}
a.fussnote:visited	{font-weight:normal; color:#dddddd; text-decoration:none;}
a.fussnote:hover	{font-weight:normal; color:#eeeeee; text-decoration:underline;}

.emailadresse	{position:relative; top:2px; height:14px; width:auto;}
@media screen and (max-width: 782px) {.emailadresse	{position:relative; top:3px; transform: scale(1.2); transform-origin:left bottom; }}



/* ***** TEXTBAUSTEINE ***** */
.textbaustein-name::before {content: "Heiko Kieser";}
.textbaustein-telefon::before {content: "Telefon: 08271/802456";}

.textbaustein-training01-tag::before {content: "Di"; margin-right:5px;}
.textbaustein-training01-zeit::before {content: "19:00 - 20:30h";}
.textbaustein-training01-art::before {content: "Erwachsene";}

.textbaustein-training02-tag::before {content: "Do";}
.textbaustein-training02-zeit::before {content: "19:00 - 20:15h";}
.textbaustein-training02-art::before {content: "Stab/Schwert";}

.textbaustein-training03-tag::before {content: "Do";}
.textbaustein-training03-zeit::before {content: "20:15 - 21:45h";}
.textbaustein-training03-art::before {content: "Anfänger + Fortgeschrittene";}