/** Allgemeine Stile **/

body { margin: 0; }

.box {
    font-size: 0.6em;
    color: black;
    float: center;
    margin: 4px;
    padding: 4px;
    background: #eee;
    box-sizing: border-box;
    height: 30px;
}
.box form {
    font-size: 1em;
    border: 0px;
    width: 90%;
    background-color: whitesmoke;
    margin: 0em auto;
    padding: 0em;
}
.box a {
    font-size: 1.4em;
color: black;
}
.box:last-child {
      margin-right: 0;
}

::marker {
  color: red;
  content: " ♥  ";
  font-size: 0.8em;
}
form {
    border: 1px solid black;
    width: 90%;
    //background-color: whitesmoke;
    margin: 0.5em auto;
    padding: 0.5em;
}
form label {
    display: block;
    font-size: 0.8em;
    color: darkslategrey;
    padding-left: 3px;    
}
summary {
	//color: #0b3e73;
	font-family: sans-serif;
}
.contentvoll {
		grid-column-start: 1;
   		grid-column-end: 1;
   		grid-row-start: 1;
   		grid-row-end: 1;
		background: blue;
		margin: 0 auto;
		border: 1px solid #dadada;
		border-radius: 6px;
		margin-bottom: 50px;
		padding: 0.5em 0.5em 0.5em 0.5em;
		position: relative;
		display: table-cell;
		overflow: scroll;
}
div { margin: 0em; }

h1, h2, h3, h4, h5, h6 { color: blue }
p, li { color: #000; 
list-style-type: "♥ ";
}
ul li::marker {
  color: red;
  font-size: 1.5em;
}


.tox.tox-tinymce {
    max-width: 32rem; /* Capped width */
    margin: auto;
}

input#hamburg {display:none}

#einloggbereich {
	margin-right: 0.5em;
	text-align: right;
	float: right;
	display: inline-block;
	font-size: 0.5em !important;
}

#einloggbereich p {
	margin: 0;
	padding: 0;
	line-height: 0.5em;
}

.error { color: red}
/** reframe ist der Abstandhalter gegen den linken und rechten Rand des Viewports oder Browserfensters
    Die Klasse reframe unterhalb eines Layoutbereichs wie carousel oder footer macht es einfacher, 
    einen Layoutbereich mit Hintergrundfarbe über die volle Breite des Monitors zu setzen
    und gleichzeitig den Inhalt auf Abstand vom linken und rechten Rand zu halten. **/

.reframe { padding-left: 10px; padding-right: 10px; float: none; border:0;}
reframe { padding-left: 10px; padding-right: 10px; float: none; border:0;}

/** Buttons **/
.btn { padding: 0.5em;  line-height: 1; display: inline; border-radius: 4px;}
.light { border: 1px solid white; color: white; }

/** Banner ist der obere Bereich der Seiten **/
#banner {background-color: #00ff;}
#banner .site-title { text-align: center; margin-top: 2vh; margin-bottom: 0.5em; font-size: 1.6em}
#banner .slogan { text-align: center; font-size: 1.0.5em; max-width: 480px; margin-left: auto; margin-right: auto; }

.landing-page #banner {background: #444; }
.landing-page #banner .site-title { color: #93deeeff; }
.landing-page #banner .slogan { color: #addbeeff; }

/** Kleiner einfacher Textbereich unter dem Banner **/
.teaser { font-size: 1.0.5em; background: #efefef; text-align: center; border-radius: 20px; padding: 1px;}
.teaser p { margin-top: 0; max-width: 780px; margin-right: auto; margin-left: auto }

/** CSS Slideshow unter dem Seitenkopf 
    Ohne Javascript, eine Beschreibung auf https://www.mediaevent.de/tutorial/keyframes-animation-timeline.html **/

#slider {
   background: #fff;
   border: 10px solid #e7e7e7;
   box-sizing:border-box;
   height: 270px;
   width: 60%;
   max-width: 800px;
   margin: 20px auto 0;
   overflow: hidden;
   position: relative;
   align-content: center;
}

#slider figure {
   width: 10em;  /* Breite des Bildes */
   position: absolute;
   align-content: center;
   margin: 0;
   bottom: 360px; /* Originalposition - Nicht im sichtbaren Ausschnitt */
   left: calc(50% - 360px); /* Setzt Bild in die Mitte des sichtbaren Ausschnitts */
}

#slider .animate1 {
   animation: cycle1 25s linear infinite;
}

#slider .animate2 {
   animation: cycle2 25s linear infinite;
}

#slider .animate3 {
   animation: cycle3 25s linear infinite;
}

#slider .animate4 {
   animation: cycle4 25s linear infinite;
}

#slider .animate5 {
   animation: cycle5 25s linear infinite;
}

/** 5 Bilder jeweils 5 Sekunden sichtbar: 25 Sekunden für die gesamte Animation **/
@keyframes cycle1 {
   0%  { top: 0px; } /* Am Anfang der Slideshow ist das erste Bild sichtbar */
   4%  { top: 0px; } /* Bilautod steht noch auf der Startposition */
   16% { top: 0px; opacity:1; z-index:0; } /* Von 4% bis 16 % ist das Bild für 3 Sekunden sichtbar */
   20% { top: -325px; opacity: 0; z-index: 0; } /* Von 16% bis 20% = 1 Sekunde für Slide Out */
   21% { top: 325px; opacity: 0; z-index: -1; } /* Zurück auf die Originalposition */
   92% { top: 325px; opacity: 0; z-index: 0; }
   96% { top: 325px; opacity: 0; } /* Von 96% bis 100% = 1 Sekunde für Slide In */
   100%{ top: 0px; opacity: 1; }
}

@keyframes cycle2 {
   0%  { top: 325px; opacity: 0; } /* Originalposition außer Sicht */
   16% { top: 325px; opacity: 0; }/* Beginnt mit der Bewegung */
   20% { top: 0px; opacity: 1; }
   24% { top: 0px; opacity: 1; }  /* Von 20% bis 24% = 1 Sekunde für Slide In */
   36% { top: 0px; opacity: 1; z-index: 0; }   /* Von 24% bis 36 % = Bild für 3 Sekunden sichtbar */
   40% { top: -325px; opacity: 0; z-index: 0; } /* Von 36% bis 40% = 1 Sekunde für Slide Out */
   41% { top: 325px; opacity: 0; z-index: -1; }   /* Zurück auf die Originalposition */
   100%{ top: 325px; opacity: 0; z-index: -1; }
}

@keyframes cycle3 {
   0%  { top: 325px; opacity: 0; }
   36% { top: 325px; opacity: 0; }
   40% { top: 0px; opacity: 1; }
   44% { top: 0px; opacity: 1; }
   56% { top: 0px; opacity: 1; }
   60% { top: -325px; opacity: 0; z-index: 0; }
   61% { top: 325px; opacity: 0; z-index: -1; }
   100%{ top: 325px; opacity: 0; z-index: -1; }
}

@keyframes cycle4 {
   0%  { top: 325px; opacity: 0; }
   56% { top: 325px; opacity: 0; }
   60% { top: 0px; opacity: 1; }
   64% { top: 0px; opacity: 1; }
   76% { top: 0px; opacity: 1; z-index: 0; }
   80% { top: -325px; opacity: 0; z-index: 0; }
   81% { top: 325px; opacity: 0; z-index: -1; }
   100%{ top: 325px; opacity: 0; z-index: -1; }
}

@keyframes cycle5 {
   0%  { top: 325px; opacity: 0; }
   76% { top: 325px; opacity: 0; }
   80% { top: 0px; opacity: 1; }
   84% { top: 0px; opacity: 1; }
   96% { top: 0px; opacity: 1; z-index: 0; }
   100%{ top: -325px; opacity: 0; z-index: 0; }
}

.progress-bar {
   position: relative;
   top: -5px;
   width: 680px;
   height: 5px;
   background: #00f;
   animation: fullexpand 25s ease-out infinite;
}

@keyframes fullexpand {
   /* Anfang: Fortschrittsbalken steht ist nicht sichtbar */
   0%, 20%, 40%, 60%, 80%, 100% { width: 0%; opacity: 0; }

   /* Fortschrittsbalken bereit zum Start */
   4%, 24%, 44%, 64%, 84% { width: 0%; opacity: 0.3; }

   /* Fortschrittsbalken läuft 3 Sekunden an */
   16%, 36%, 56%, 76%, 96% { width: 100%; opacity: 0.7; }

   /* Fortschrittsbalken hat Ende erreicht */
   17%, 37%, 57%, 77%, 97% { width: 100%; opacity: 0.3; }

   /* Fortschrittsbalken wird unsichtbar und beginnt einen neuen Durchlauf */
   18%, 38%, 58%, 78%, 98% { width: 100%; opacity: 0; }
}

#slider .label {
   background: hsla(0,0%,100%,0.8);
   width: 100%;
   height: 60px;
   padding-top: 10px; 
   box-sizing: border-box;
   position: absolute;
   left: -1000px;
   bottom: 4px;
   padding: 0;
   margin: 0;
   color: dimgray;
   text-align: center;
   font-size: 1.0.5em;
   box-sizing: border-box;
   transition: left 0.3s ease-in-out;
}

/**
.hover hat ausgedient, denn auf dem Touchscreen ist :hover unzuverlässig 
oder versagt völlig. Anstelle dessen muss jetzt Javascript einspringen.

#slider li:hover .label {
   left: 0px;
}

#slider:hover li,
#slider:hover .progress-bar {
   animation-play-state: paused;
}
**/

#slider figure.toggle .label {
   left: 0px;
}

#slider figure.toggle,
#slider.toggle .progress-bar {
   animation-play-state: paused;
}


/** Carousell ist eine Zeile mit je zwei Elementen  – auf kleinen Monitoren 4 Zeilen
    Kann auf jeder Seite eingesetzt werden und eine zusätzliche Navigation bieten **/
.carousell { background: white;
	border-top-left-radius: 12px;
	border-top-right-radius: 12px;

}

.flex-2-4 { max-width: 600px; margin-left: auto; margin-right: auto; padding-top: 0.5em; padding-bottom: 0.5em; }
.lineart {width: 120px; height: 120px; margin: 1ex auto; } 

/** Der Hauptinhalt der Seite **/
main { background: white; padding-top: 0.5em; padding-bottom: 0.5em; }
.landing-page main { background: #efefef; }


.datenpflege {
	border-top-left-radius: 12px;
	border-top-right-radius: 12px;
	background-color: #0055ffff;
}

#sidebar img,
main img { 
	border-top-left-radius: 12px; 
	border-top-right-radius: 12px;
}

.content article h3 { 
	text-align: center; 
	color: #666; 
	padding-left: 10px;
	padding-right: 10px;
}

#sidebar { background: white; padding-top: 0.5em; padding-bottom: 0.5em; }
#sidebar .widget { max-width: 480px; margin-left: auto; margin-right: auto; }
#stripe { height: 10vh; width: 100%; background: crimson; padding-top: 0.5em; padding-bottom: 0.5em; }
#stripe p { text-align: center; color: white; font-size: 1.0.5em; }

.mousebutton { width: 40px; margin-left: auto; margin-right: auto; padding-top: 0.5em; padding-bottom: 0.5em; }
.mousebutton2 { width: 600px; margin-left: auto; margin-right: auto; padding-top: 0.5em; padding-bottom: 0.5em; }

footer { background: #444; padding-top: 0.5em; padding-bottom: 0.5em; color: white; }

.svghide { display: none; }

.mouse {
	padding-top: 0.5em;
	padding-bottom: 0.5em;
	padding-left: 0.5em;
	padding-right: 0.5em;
	margin: 0.5em;
	border-radius: 18px;
	background-color: #efefef;
        display: flex;
        flex-wrap: wrap;
}
.mousekasse {
	padding-top: 0.3em;
	padding-bottom: 0.3em;
	padding-left: 0.3em;
	padding-right: 0.3em;
	margin: 0.0em;
	background-color: #efefef;
        display: flex;
        flex-wrap: wrap;
        width: 95%;
}
        .button {

            background-color: blue;
            color:  #F5F5F5;
            border: 0;
            font-size: 0.85em;
            margin: 3px auto;
            cursor:  pointer;
            padding: 3px;
            border-radius: 8px;
        }
        button:hover {
            background-color: #00c4ff ;
            color: blue;
        }
        .buttonr {
            width: 120px;
            height: 30px;
            background-color: red;
            color: yellow;
            border: 0;
            font-size: 0.85em;
            margin: 0 auto;
            cursor:  pointer;

        }
        .menue1 {
            background-color: white;
            color:  #red;
            border: 0;
            font-size: 0.9em;
            margin: 2px auto;
            cursor:  pointer;
            padding: 1px;
            margin: 1px;
            border-radius: 2px;
            float: right;
            display: block;
            position: relative;
        }
        menue1:hover {
            background-color: #00c4ff ;
            color: blue;
        }
        .menue2 {
            background-color: red;
            color: yellow;
            border: 0;
            font-size: 0.9em;
            margin: 1px auto;
            cursor:  pointer;
            display: block;
        }
        menue2:hover {
            background-color: white ;
            color: blue;
            top: 10px;
        }
        .menue3 {
            background-color: white;
            color: blue;
            border: 0;
            font-size: 0.9em;
            margin: 1px auto;
            cursor:  pointer;
            display: block;
            align-content: center;
            align-items:  center;
        }
        menue3:hover {
            background-color: white ;
            color: blue;
            top: 10px;
        }


/**  Bis hier hin waren alle Stile für alle Monitorgrößen. Jetzt kommen die Breakpoints
     Der erst Breakpoint dient den kleinen Monitoren und enthält den animierten Hamburger **/
@media only screen and (max-width: 400px) {

    .simditor {
      width: 380px; ;
    }
        .menue11 {
            display: none;
            //position: relative;
        }

    body {
        background-color: blue ;
    }

	input#hamburg { display: none; }
        
        .map{
            background-color: white ; 
            width: 95%; 
            height: 100%; 
            overflow: visible;
            
        }
	
	.container { 
  		display: grid; 
  		grid-template-rows:300px 300px 300px; 
  		grid-template-columns:100% ; 
	}	
  	.contentvoll {
  		grid-column:1 / 1; 
  		grid-row:1 / 3; 
		background: blue;
		margin: 0 auto;
		border: 1px solid #dadada;
		border-radius: 6px;
		margin-bottom: 50px;
		padding: 0.5em 0.5em 0.5em 0.5em;
		position: relative;
		display: table-cell;
		overflow: scroll;
}
	}

}
	label.hamburg {
		display: block;
		background: #555;
		width: 75px; 
		height: 50px; 
		position: relative;
		margin-top: 10em; 
		margin-left: auto; 
		margin-right: auto;
		margin-bottom: 0.5em;
		border-radius: 4px; 
		transition: border-radius .5s;
	}
	
	label.hamburg .line { 
		position: absolute; 
		height: 8px; 
		background: #fff;
		border-radius: 2px;
		width: 55px; 
		display: block; 
		left:25px;
		transition: 0.5s; 
		transform-origin: center; 
	}

	label.hamburg .line:nth-child(1) { top: 6px; }
	label.hamburg .line:nth-child(2) { top: 18px; }
	label.hamburg .line:nth-child(3) { top: 30px; }

	#hamburg:checked + .hamburg .line:nth-child(1) {
		transform: translateY(12px) rotate(-45deg);
	}

	#hamburg:checked + .hamburg .line:nth-child(2) {
		opacity:0;
	}

	#hamburg:checked + .hamburg .line:nth-child(3) {
		transform: translateY(-12px) rotate(45deg);
	}
	
	#hamburg:checked + .hamburg { background: #333; }

	#hamburg:checked + .hamburg  + nav.topmenu { height: auto; max-height: 1200px; background: crimson; }

	nav.topmenu { height: auto; max-height:0; overflow: hidden; background: white; transition: all 0.5s; }
	nav.topmenu ul { padding-left: 0.5em;}
	nav.topmenu ul li { list-style-type: none; color: white; border-bottom: 1px dotted white; padding-top: 1ex; padding-bottom: 1ex;  }
	nav.topmenu ul li:last-child{border-bottom: 0;}

	nav.topmenu ul li a { color: white; text-decoration: none; display: block }

	nav.topmenu ul .hassub:before { content: " ▶ "; float: right; padding-right: 0.5em }
	nav.topmenu ul .hassub2:before {
		content: " ▶ ";
	float: right;
	padding-right: 0.5em
	}
	

}

/** Jetzt kommen die Breakpoints für größere Monitore **/
@media only screen and (min-width: 600px ) {

.simditor {
  width: 580px ;
}

.map{
            background-color:  #96c0d8 ; 
            width: 100%; 
            height: 100%; 
            overflow: visible;
}
#banner { height: 20vh; min-height: 20px; padding-top: 0 }
	.flex-2-4 { display: -ms-flexbox; -ms-flex-flow : wrap; display: flex; flex-wrap: wrap; max-width: 1400px; }
	.flex-2-4 .col { width: 49%; }
	
	.flex-2-3 { display: -ms-flexbox; -ms-flex-flow : wrap;  display: flex; flex-wrap: wrap; justify-content: space-between; max-width: 1400px; margin-left: auto; margin-right: auto}
	.flex-2-3 .col { width: 49%; }
	
	nav.topmenu { height: auto; max-height: none; overflow: visible; z-index: 1;}
	
	
	nav.topmenu ul { display: -ms-flexbox; -ms-flex-pack : end; display: flex; justify-content: flex-end; padding-left: 0; padding-right: 0; padding-top: 0.5em; margin-top: 0; background: white; }
	.landing-page nav.topmenu ul { background: none; } 
	
	nav.topmenu ul li {  border-bottom:0; list-style-type:none; margin-left: 0.5em; text-transform: uppercase; font-size: 70%; min-width: 105px;  }
	.landing-page nav.topmenu ul li { color: white; }
	
	nav.topmenu ul li a { text-decoration: none; display: block }
	.landing-page nav.topmenu ul li a { color: white;  }
	
	nav.topmenu .hassub { position: relative; }
	nav.topmenu .hassub2 {
		position: relative;
	}
	
	nav.topmenu .hassub ul { flex-direction: column; width: auto; height: auto; max-height: 0; overflow: hidden; padding-top:0; background: dimgray; position: absolute; padding-left: 0; transition: all 1s }
	nav.topmenu.open .hassub ul{ max-height:800px;}
	
	nav.topmenu .hassub:before { content: " ▶ "; padding-right: 0.5em }
	
	nav.topmenu .hassub ul li { font-size: 70%; color: white; padding-top: 0.5em;}
	nav.topmenu .hassub ul li a { display: block; color: white; padding-top: 0.5em; }
	nav.topmenu .hassub ul li:last-child { padding-bottom: 0.5em;}
	nav.topmenu .hassub ul li:last-child a { padding-bottom: 0.5em; }
	
	nav.topmenu .hassub2 ul {
	flex-direction: column;
	width: auto;
	height: auto;
	max-height: 0;
	overflow: hidden;
	padding-top: 0;
	background: dimgray;
	position: absolute;
	padding-left: 0;
	transition: all 1s
	}
	nav.topmenu.open .hassub2 ul{
		max-height: 800px;
	}

	nav.topmenu .hassub2:before {
		content: " ▶ ";
	padding-right: 0.5em
	}

	nav.topmenu .hassub2 ul li {
		font-size: 70%;
	color: white;
	padding-top: 0.5em;
	}
	nav.topmenu .hassub2 ul li a {
		display: block;
	color: white;
	padding-top: 0.5em;
	}
	nav.topmenu .hassub2 ul li:last-child {
		padding-bottom: 0.5em;
	}
	nav.topmenu .hassub2 ul li:last-child a {
		padding-bottom: 0.5em;
	}
.container { 
  display: grid; 
  grid-template-rows:300px 300px 300px; 
  grid-template-columns:50% 50%; 
	}
.contentvoll {
	grid-column-start: 1;
   	grid-column-end: 1;
   	grid-row-start: 1;
   	grid-row-end: 1;
	background: green;
	margin: 0 auto;
	border: 1px solid #dadada;
	border-radius: 6px;
	margin-bottom: 50px;
	padding: 0.5em 0.5em 0.5em 0.5em;
	position: relative;
	display: table-cell;
	overflow: scroll;
}

}		
	/** Auf großen Monitoren dreht order die Reihenfolge im Banner: Oben Navigation, darunter der Header.**/
	.flex-column { 
		display: -ms-flexbox; 
		-ms-flex-direction: column; display: flex; flex-direction: column; }

	body:not(.landing-page) ul.mainmenu { background: white; }
	header { -ms-flex-order:2; order: 2 }
	nav.topmenu {-ms-flex-order:1;max-width:200px;}
}

@media only screen and (min-width: 980px ) {
	.simditor {
  width: 960px ;
}

	.container { 
  display: grid; 
  grid-template-rows:300px 300px 300px; 
  grid-template-columns:25% 25% 25% 25%; 
}
.contentvoll {
	grid-column-start: 1;
   	grid-column-end: 4;
   	grid-row-start: 1;
   	grid-row-end: 4;
	margin: 0 auto;
	background: red;
	border: 1px solid #dadada;
	border-radius: 6px;
	margin-bottom: 50px;
	padding: 0.5em 0.5em 0.5em 0.5em;
	position: relative;
	display: table-cell;
	overflow: scroll;
}		
	.flex-2-3 .col { width:32%; }
	
	.flex-2 { display: -ms-flexbox; -ms-flex-pack : distribute; display: flex; justify-content: space-around; max-width: 1260px; margin-left: auto; margin-right: auto; }
	.flex-2 main { width: 60%}
	.flex-2 #sidebar { width: 30%}
	
	.sidebar-left .flex-2 #sidebar { 
		-ms-flex-order:1;
		order: 1;
	}
	.sidebar-left .flex-2 main { 
		-ms-flex-order:2;
		order: 2;
	}
	
	.no-sidebar .flex-2 { flex-direction: column; }
	.no-sidebar .flex-2 main { max-width: 960px; margin-left: auto; margin-right: auto; padding-left: 4em; padding-right: 4em; }
	.no-sidebar .flex-2 #sidebar { width: 60%; max-width: 920px; margin-left: auto; margin-right: auto; margin-top: 0.5em; padding-left: 4em; padding-right: 4em;}
	.no-sidebar .flex-2 #sidebar .small { display: flex; justify-content: space-between }
	.no-sidebar .flex-2 #sidebar .small .widget { width: 49% }
	
	nav.topmenu ul li { font-size: 70%; min-width: 150px;}

	#banner .site-title { font-size: 2.5vw; margin-top: 5vh}
	#banner .slogan { font-size: 1.5vw }
}

@media only screen and (min-width: 1260px ) {
    .simditor {
 width: 100px ;
}
        #menue11 {
            display: block;
            position: relative;
        }

	.flex-2-4 .col { width: 24%; }
	.container { 
  display: grid; 
  grid-template-rows:300px 300px 300px; 
  grid-template-columns:25% 25% 25% 25%; 
}
.contentvoll {
	grid-column-start: 1;
   	grid-column-end: 3;
   	grid-row-start: 1;
   	grid-row-end: 4;
	margin: 0 auto;
	background: green;
	margin: 0 auto;
	border: 1px solid #dadada;
	border-radius: 6px;
	margin-bottom: 50px;
	padding: 0.5em 0.5em 0.5em 0.5em;
	position: relative;
	display: table-cell;
	overflow: scroll;
}	}
.content-container-3{ 

	Breite : 950px ; 

	Rand: :50px 0px 20px 20px ; 

}