/* Stylesheet für Selfhtml Design 03 
  responsives Layout mit Grid Layout ab Z. 210   */


/* ------------------- Screenreader ---------*/
.sr-only {
  position: absolute;
  left: -1000em;
}

/* ====================================================   GLOBAL DEFINITION   ==================================================== */

/* alternatives Boxmodell */
html { 
  box-sizing: border-box; 
  background: linear-gradient(#c6f2ff, white)/*linear-gradient(gray, white);*/
} 

*, ::before, ::after { 
  box-sizing: inherit; 
}

body {
	max-width: 75em;
	margin:-2em auto 0 auto;
	padding: 0;
	background: #fff;	
	color: #333; 
	font: normal 1em Arial, sans-serif;  /* Mindestschriftgröße wird dem Browser, bzw. dem Nutzer überlassen! */
                    
}


/* Position der Navigation */
#sitenav { 
	top: 1em; 
	left: 2em;
}
#sitenav.wide { 
	top: 0; 
	left: 2em; 
	right: 2em;
	margin: 0em 0em 0em 1em;
	width: calc(100% - 3em);
}

/* Farben */
#sitenav *,
#sitenav a { 
	
}

/* Skip-Link */
#skip-link { 
	position: absolute; 
	left: 0; top: 0; 
	background: black; 
	color: white; 
	padding: 0.25em; 
	transform: translateY(-100%);
	transition: 0.2s transform; 
	z-index: 1001; 
} 
#skip-link:focus { 
	transform: translateY(0); 
}			

/* Für Assistive Technologien */
.visually-hidden {
	position: absolute !important; 
	clip: rect(1px, 1px, 1px, 1px) !important; 
	padding: 0 !important; 
	border: 0 !important; 
	height: 1px !important; 
	width: 1px !important; 
	overflow: hidden !important; 
	white-space: nowrap !important; 
}

/* Positionierung */
/* Bei Browsern, die Details/Summary unterstützen, und bei eingeschaltetem Javascript wird die Navigation absolut positioniert. 
Die Klasse withjs wird vom Sript gesetzt. */

@supports (width: max-content) { 
	/* Nicht für IE und MS-Edge, indirekter Test auf Details/Summary */
	#sitenav,
  #sitenav ul { 
		position: absolute; 
		background: linear-gradient(#c6f2ff, white);
	}
}
#sitenav.withjs,
#sitenav.withjs ul { 
	position: absolute; 
}

/* Regeln für schmale und breite Displays */
#sitenav ul { 
	margin: 0;
	padding-top: .2em; 
	padding-left: 1em; 
	padding-right: 1em;
	background: aliceblue;
	min-width: 200px;
}
#sitenav > details { 
	padding: .2em; 
}
#sitenav > details > ul { 
	margin-left: -.5em; 
	margin-top: .3em; 
}
#sitenav ul ul { 
  /*margin-left: calc(100% - 1.2em);
  margin-top: -3.1em; */
  padding-left: .1em; 
  background: #bafff5;
}
#sitenav ul ul ul {background: #adffa6;}
#sitenav ul ul ul ul{background: #fbc6ff;}
#sitenav li a,
#sitenav li summary { 
	display: inline-block; 
	padding: .5em; 
	margin: .3em; 
	line-height: 1.4em; 
  max-height: 1.4em; 
}
#sitenav li { 
	padding: 0em; 
	white-space: nowrap; 
	vertical-align: middle; 
}

/* Anpassungen an breite Displays. Die Klasse wide wird vom Script gesetzt, wenn der Platz reicht. */
#sitenav.wide > details { 
	padding: 0; 
} 
#sitenav.wide > details > ul { 
	display: flex;
	flex-wrap: wrap; 
	width: 100%; 
	box-sizing: border-box; 
}
#sitenav.wide ul { 
	margin:0; 
	padding-top: .2em; 
	padding-left: 0; 
	padding-right: 0; 
}
#sitenav.wide ul ul { 
	margin-left: -.5em; 
	margin-top: -.1em; 
	padding-left: .5em; 
	padding-right: .5em; 
}
#sitenav.wide ul ul ul { 
	margin-left: calc(100% - 1.2em); 
	margin-top: -3.1em; 
	padding-left: .1em; 
}

/* Originalsymbole vor den Summary entfernen und eigene Symbole definieren */
#sitenav summary::-webkit-details-marker { 
	display: none; 
}
#sitenav summary { 
	list-style-type:  none; 
}
#sitenav *::before,
#sitenav *::after { 
	font-family: arial_unicode_ms; 
	vertical-align: top; 
  display: inline-block;
}
#sitenav details *::after {
  text-align: end;
  width: 1.5em;
}
#sitenav details *::before {
  text-align: center;
  width: 1.2em;
}
#sitenav ul details:not([open]) > summary::after { 
	content: '►'; 
}
#sitenav ul details[open] > summary::after { 
	content: '◄'; 
}
#sitenav > details:not([open]) > summary::before { 
	content: '☰';
} 
#sitenav > details[open] > summary::before { 
	content: '×';
} 
#sitenav.wide details[open] details:not([open]) summary::after { 
	content: '▼'; 
}
#sitenav.wide details[open] details[open] summary::after { 
	content: '▲'; 
}
#sitenav.wide details[open] details[open] details:not([open]) summary::after { 
	content: '►'; 
}
#sitenav.wide details[open] details[open] details[open] summary::after { 
	content: '◄'; 
}
html.no-details #sitenav ul summary::before { /* Für Details-Polyfill */
	content: ''; width: 0; 
} 

/* Link zur aktuellen Seite */
#sitenav li[aria-current] a[tabindex]::before { 
	content: '►';
  text-align: start;
}
#sitenav.withjs > details > ul > li[aria-current] > details > summary { 
	border-left: 2px solid black; 
}
#sitenav.withjs > details > ul > li[aria-current] > details > ul > li[aria-current] > details > summary { 
	border-left: 2px solid black; 
}
#sitenav.wide > details > ul > li[aria-current] > details > summary { 
	border-left: none; 
}
#sitenav.wide > details > ul > li[aria-current] { 
	
}

/* Sprachicon */
#sitenav .langselect img { 
	height: 2em; 
	transform: translateY(-.4em); 
}

/* Rahmen etc. */
#sitenav summary { 
	cursor: pointer; 
}
#sitenav ul { 
	list-style-type: none; 
	border-radius: .5em; 
}
#sitenav.wide ul ul { 
	border-radius: 0 0 .5em .5em;
}
#sitenav > details { 
	border: thin solid black; 
	border-radius: .2em; 
}
#sitenav.wide > details { 
	border: none; 
	border-radius: 0; 
} 
#sitenav.wide > details > ul { 
	border-radius: 0; 
}
#sitenav li a { 
	text-decoration: none; 
}
#sitenav li a,
#sitenav li summary { 
	outline: none; 
}
#sitenav li a:focus,
#sitenav li summary:focus { 
	outline: thin solid #5050ff; 
}
#sitenav li a:focus-visible, 
#sitenav li summary:focus-visible { 
	outline: thin solid #5050ff; 
}
#sitenav li a:focus:not(:focus-visible), 
#sitenav li summary:focus:not(:focus-visible) { 
	outline: none; 
}

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #9bff76b0;
  color: #210097;
  text-align: center;
  padding: 5px 0;
  margin-top:20px;
  border-radius: 6px;
 
  /* Position the tooltip text - see examples below! */
  position: absolute;
  z-index: 1;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
}

/* ====================================================   HEADER   ==================================================== */
header {
	position: relative;		
	height: 210px;
	margin: 2em  0  0 3em;
	background: #1e0c75 url("../img/JMHMD_BgImgMain3b2m_mirrored3.jpg") no-repeat right; 
	background-size: contain; 			 
	padding: 0 0 0.5em;
}

/*
header {
	position: relative;		
	height: 224px;
	margin: 2em  0  0 3em;
	background-size: contain; 			 
	padding: 0 0 0.5em;
	*/
	/*animation: bg_slideshow 30s linear infinite 0s;
	-moz-animation: bg_slideshow 30s linear infinite 0s;
	
	background-repeat:no-repeat;
	backface-visibility:hidden;
	background-image: url("../img/JMH_MediaDesign_HeaderImg_A1SW.jpg"); grayscale(0%); filter: blur(0.1px);*/
	/*background-color: #777;
	-webkit-transition: all 3s ease-out;
	background-position: right;*/
	/*animation-direction: alternate;*/
	/*animation-timing-function: linear;*/
	/*
}
*/
/*ÍmagePreloading weil bei erster Ani sonst sprünge auftreten - leider löste dies das Problem nicht.*/
/*body::after{
   position:absolute; width:0; height:0; overflow:hidden; z-index:-1;*/ /*hide images*/
   /*content:url("../img/JMH_MediaDesign_HeaderImg_A1SW.jpg") url("../img/JMH_MediaDesign_HeaderImg_AC1.jpg") url("../img/JMH_MediaDesign_HeaderImg_AC1_Inter.jpg");
}*/

.spriteBG672_224{ margin: 0px; float:left; width: 672px; height:224px;/*aktuell ungenutzt - war für headerAnimation geplant, ging nicht gut*/
  display: inline-block;
  background-image: url(../img/sprite/JMHMD_BgImgSet01.jpg);
  background-size: 200% 500%;  /* 16*128 = 2048, size des png */
}/*
.sS_bg1{background-position: -0% -0%;}
.sS_bg2{background-position: -100% -0%;}
.sS_bg3{background-position: -200% -0%;}

@keyframes bg_slideshow {
 	from { 
 		background-image: url("../img/JMH_MediaDesign_HeaderImg_A1SW.jpg"); grayscale(1%); filter: blur(0.1px);
 	}
 	25% {
 		 background-image: url("../img/JMH_MediaDesign_HeaderImg_A1C_Inter.jpg"); grayscale(0%); filter: blur(0.0px);
 	}
 	50% { 
 		background-image: url("../img/JMH_MediaDesign_HeaderImg_A1C.jpg"); grayscale(1%); filter: blur(0.1px);
 	}
 	75%{
		background-image: url("../img/JMH_MediaDesign_HeaderImg_A1C_Inter.jpg"); grayscale(0%); filter: blur(0.0px);
 	}
 	to { 
 		background-image: url("../img/JMH_MediaDesign_HeaderImg_A1SW.jpg"); grayscale(1%); filter: blur(0.1px);
 	}
}
	@-moz-keyframes bg_slideshow {
	 	from { 
	 		background-image: url("../img/JMH_MediaDesign_HeaderImg_A1SW.jpg"); grayscale(1%); filter: blur(0.1px);
	 	}
	 	25% {
	 		 background-image: url("../img/JMH_MediaDesign_HeaderImg_A1C_Inter.jpg"); grayscale(0%); filter: blur(0.0px);
	 	}
	 	50% { 
	 		background-image: url("../img/JMH_MediaDesign_HeaderImg_A1C.jpg"); grayscale(1%); filter: blur(0.1px);
	 	}
	 	75%{
			background-image: url("../img/JMH_MediaDesign_HeaderImg_A1C_Inter.jpg"); grayscale(0%); filter: blur(0.0px);
	 	}
	 	to { 
	 		background-image: url("../img/JMH_MediaDesign_HeaderImg_A1SW.jpg"); grayscale(1%); filter: blur(0.1px);
	 	}
	}
	*/
header a p {			/*Die Angaben für h1 müssen mit einem genauen Selektor überschrieben werden. */
	color: white; 
	border-left: 0;
	padding: 0;
    display: table;		/* Überschriften und Absätze sind sonst immer 100% breit, durch display:table und display: inline-block; für das Elternelement a.ribbon wird das Banner nur so breit wie nötig. */
}
header a h1{color:#2f2f2f; border-left: 0; padding: 0; display: table;}
.ribbon {
	display: inline-block;
	position: relative;	
	margin: 2em 0 2em -1.5em;
	padding: 0.5em 1em;
	background: #67bfe1;
	box-shadow: 0px 1px 3px rgba(0,0,0,.8);
	background: linear-gradient(-45deg, #74eef4, #4d85f0, #0fd5c2, #3dd9b4);
    background-size: auto;
    min-width: 300px;
background-size: 300% 300%;
animation: gradientA01 30s ease infinite;
}
 @keyframes gradientA01 {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}
.ribbon::before{
	display: block;
	width: 1.5em;
	height: 0;
	position: absolute;
	bottom: -1.5em;
	left: 0em;
	content: "";
	border-bottom: 1.5em solid transparent;
	border-right: 1.5em solid rgb(0, 80, 116);
}
 /**                             MODULES                                **/
 /**
 * Owl Carousel v2.2.0
 * Copyright 2013-2016 David Deutsch
 * Licensed under MIT (https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE)
 */

.owl-carousel,
.owl-carousel .owl-item {
    -webkit-tap-highlight-color: transparent;
    position: relative
}

.owl-carousel {
    display: none;
    width: 100%;
    z-index: 0
}

.owl-carousel .owl-stage {
    position: relative;
    -ms-touch-action: pan-Y
}

.owl-carousel .owl-stage:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0
}

.owl-carousel .owl-stage-outer {
    position: relative;
    overflow: hidden;
    -webkit-transform: translate3d(0, 0, 0);
    min-width: 270px;
}

.owl-carousel .owl-item {
    min-height: 1px;
    float: left;
    -webkit-backface-visibility: hidden;
    -webkit-touch-callout: none
}

.owl-carousel .owl-item img {
    display: block;
    width: 100%;
    -webkit-transform-style: preserve-3d
}

.owl-carousel .owl-dots.disabled,
.owl-carousel .owl-nav.disabled {
    display: none
}

.no-js .owl-carousel,
.owl-carousel.owl-loaded {
    display: block
}
button.owl-dot{
	background: 0 0;
	color: inherit;
	border: none;
	padding: 0 !important;
	font: inherit;
}
.owl-carousel .owl-dot,
.owl-carousel .owl-nav .owl-next,
.owl-carousel .owl-nav .owl-prev {
    cursor: pointer;
    cursor: hand;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.owl-dot span
{
	width: 10px;
	height: 10px;
	margin: 5px 7px;
	background: #D6D6D6;
	display: block;
	-webkit-backface-visibility: visible;
	transition: opacity .2s ease;
	border-radius: 30px;
}
.owl-dot.active span{background: #00dd8f;}

.owl-prev, .owl-next
{
	min-width: 20px;
	min-height: 40px;
	font-weight: bold;
	font-size: 1.5em;
	margin:2px;
}
.owl-carousel.owl-loading {
    opacity: 0;
    display: block
}

.owl-carousel.owl-hidden {
    opacity: 0
}

.owl-carousel.owl-refresh .owl-item {
    visibility: hidden
}

.owl-carousel.owl-drag .owl-item {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.owl-carousel.owl-grab {
    cursor: move;
    cursor: grab
}

.owl-carousel.owl-rtl {
    direction: rtl
}

.owl-carousel.owl-rtl .owl-item {
    float: right
}

.owl-carousel .animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
}

.owl-carousel .owl-animated-in {
    z-index: 0
}

.owl-carousel .owl-animated-out {
    z-index: 1
}

.owl-carousel .fadeOut {
    -webkit-animation-name: fadeOut;
    animation-name: fadeOut
}

@-webkit-keyframes fadeOut {
    0% {
        opacity: 1
    }
    100% {
        opacity: 0
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1
    }
    100% {
        opacity: 0
    }
}

.owl-height {
    transition: height .5s ease-in-out
}

.owl-carousel .owl-item .owl-lazy {
    opacity: 0;
    transition: opacity .4s ease
}

.owl-carousel .owl-item img.owl-lazy {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d
}

.owl-carousel .owl-video-wrapper {
    position: relative;
    height: 100%;
    background: #000
}

.owl-carousel .owl-video-play-icon {
    position: absolute;
    height: 80px;
    width: 80px;
    left: 50%;
    top: 50%;
    margin-left: -40px;
    margin-top: -40px;
    background: url(owl.video.play.png) no-repeat;
    cursor: pointer;
    z-index: 1;
    -webkit-backface-visibility: hidden;
    transition: -webkit-transform .1s ease;
    transition: transform .1s ease
}

.owl-carousel .owl-video-play-icon:hover {
    -webkit-transform: scale(1.3, 1.3);
    -ms-transform: scale(1.3, 1.3);
    transform: scale(1.3, 1.3)
}

.owl-carousel .owl-video-playing .owl-video-play-icon,
.owl-carousel .owl-video-playing .owl-video-tn {
    display: none
}

.owl-carousel .owl-video-tn {
    opacity: 0;
    height: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    transition: opacity .4s ease
}

.owl-carousel .owl-video-frame {
    position: relative;
    z-index: 1;
    height: 100%;
    width: 100%
}
.container-fluid{max-width: 1230px;}
/** MODULES ENDE **/
 
 
/** CONTENT **/

main {
	
	/*margin: 0 0 1em; padding: 1em;*/
	background: #fff;
	display:flex;
	flex-wrap:wrap;
	min-height: 100vh;
}

h1,
h2 {
	font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; 
	padding-left: 1em; 
	color: #0500a6; 
	text-transform: uppercase;
	border-left:5px solid #4e68AD;
}
	
h2 span {
	font-size: 0.70em; 
	color: #818181; 
	text-transform: none;
}

h3	{ 
	font-size: 1.25em; 
	font-weight: normal; 
	padding: 0px; 
	margin: 0px; 
	color: #4E68AD; 
}		

p {
	text-align: left; 
	line-height: 1.6em; 
	padding: 5px 0px;
	font-family: Calibri, Garamond;
	font-size: 0.95em;
}

a 	{ 
	outline: none; 
	text-decoration: none; 
}
a:hover, 			/* Durch Maus oder Tastatur angewählte Verweise werden sichtbar gemacht */
a:focus { 
	color: #87cef4; 
	text-decoration: none; 
	/*background-color: #4e7a92;	*/
}

a.more	{ 
	float: right; 
	font-weight: bold; 
}

a.more:after{
	content:" \2192 ";
	font-size:1.2em;
	font-weight:bold;
}

ul.square {
	list-style-type:square;
    color: #999999;
    margin: 0 0 0.5em 0.5em;
	font-size: 0.8em;
	font-weight: bold;
}

ul.square li{
	padding:10px;	
}

/*DL, DT, DD Datenliste*/
dl.grid { 
  display: grid; 
  grid-template-columns: 1fr 100%; 
}
dd { 
  margin: 0; 
  padding-left: 1em; 
}

dd span:first-child {
  display: inline-block;
  width: 4em;
}

dl.grid dd {
  margin-bottom: 1em;
}
a[href^="tel"] { white-space: nowrap; }

ul#footer-nav li { 
	list-style-type: none;  
	displaY: inline;
	padding: 0 0.5em; 
	border-right: 1px  solid #ACACAC; 
}
.flexy {display: flex; justify-content: space-around; flex-wrap:wrap; font-size:0.8em;}
footer {
	display: flex; flex-wrap:wrap;
    grid-template-columns: repeat(2, 1fr);
    justify-content: space-around;	
	padding: 1em;
	background-color: aquamarine;
	width:100%;
	min-height:10vh;
}
.foulli{list-style: none; padding: 3px;}
.topicC01
{
	padding: 4px;
	width: 100px;
	height: 40px;
	background-color: white;
	color: blue;
	border-radius: 30px;
	box-shadow: 2px 2px #dbdada;
}
.subtopicListDiv{float:right;}
.subtopicListDiv p{margin-left:40px;}
ul.subtopiclist { list-style-type:none; font-size: 0.95em; line-height: 1.5; color: #058c34;}
ul.subtopiclist li:before { content: "\25BA" " "; color:#0f87c1;}
.flexy div a:before{content: "\25BA" " "; color:#0f87c1;}
.flexy div a{color: #058c34; font-size: 1.5em;}

h4{color: #2eb061; text-decoration: underline;}
ul#footer-nav  li:last-child { 
	border: none; 
}	

ul#footer-nav img {
	width: 1.5em;
}

ul#footer-nav a:hover,
ul#footer-nav a:focus, 
ul#footer-nav a:active {
	background: white;
}
td,th{padding-top: 10px; font-size: 0.9em; font-family: candara;}
.hideSubCntBut{
	margin-top: 10px;
	float: left;
	margin-right: 10px;
	font-size: 0.8em;
	background-color: #47abbb;
	color: white;
	border-radius: 25px;
	padding-left: 10px;
	padding-right: 10px;
}
.hideSubCntBut:hover, .hideSubCntBut:active {background-color:#64d5e8; font-size:0.9em;} 
footer p {

}

/** Navigation **/

nav#navigation{transition: 0.5s; padding-right:0px; width:auto;}
	
#navigation ul {
    list-style-type: none;
    width: 100%;
	margin-bottom:30px;
	display:block;
}

#navigation ul li.first-child	{ border-top: 1px #DBDBDB solid; }


#navigation ul li a {
	display: block;
    font-size: 1.1em;
    line-height: 1.5em;
    padding: 0.6em 5px;
    text-decoration: none;
	width:13em;
}
#navigation ul li{margin-top:0px; margin-right:0px;}
#navigation ul li a:before{
	content:" ";
	display:inline-block;
	width:1em;
	height:1em;
	border-left:5px solid #4e7a92;;
}	
		
nav a[aria-current=page]{
 background: #7dd5f7;
}
nav a:hover, 			/* Durch Maus oder Tastatur angewählte Verweise werden sichtbar gemacht */
nav a:focus { 
	color: #0206dd;
text-decoration: none;	
}

.linkList{ /*klickbare Links*/
	margin-top:10px;
}

#bodyOuterWrap{z-index: 1;
position: absolute;
background: white;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
max-width: 75em;}
#bgCanvas{position: fixed; left: 0; top: 0; width: 100%; background: linear-gradient(#c6f2ff, white); z-index: 0; pointer-events: none;}
.canvasDark{position: fixed; left: 0; top: 0; width: 100%; background: linear-gradient(#25364f, #4d71a5, #ffffff); z-index: 0; pointer-events: none;}
.fehlerM{color:red; padding:10px;}
.listda1 li{margin-top: 10px; font-family: cambria, courier, times;}
.listda2 li{margin-top: 15px; font-family: cambria, courier, times; list-style: decimal;}
.h2d2{font-family: Courier, sans-serif; color: #002a79; margin-top: 40px;}
.h3d3{color: #4E68AD; font-family: candara;}
.h3d3 +div{padding: 20px; font-size: 0.9em;}
.markant1{font-weight: bold;}
/* ========================== interactive ===================== */
.oneTimeDotSpoiler{color: #34d1d9; font-weight: bold; font-size: 1.2em; text-align: center;}
.MainTopic{display:none; margin-top:20px; border: 1px dashed black; padding:15px;}
.subTopicLvl1{display:none;}
.showHideA{display:none;}
.ButVid1{margin-right:10px; margin-top:10px; margin-bottom:10px;}
.ButVid2P{margin-left:10px; margin-right:10px; margin-bottom:10px; margin-top:10px;}
/* ========== repsonsives Grid-Layout ========== */

/* mobile first - auf schmalen Bildschirmen wird alles untereinander platziert. */ 

/* ab einer Breite von 30em haben zwei Spalten nebeneinander Platz: */

@media (min-width: 650px) { 
  main {
  	width:100%;  
    /*grid-template-columns: repeat(2, 1fr);
	grid-gap: 1em;*/
  }

  nav {
  
  }
  
  #intro {
    grid-column: 2 / 3;
    grid-row:    1 / 2;					
  }

  article {
    grid-column: 2 / 3;
  }  
  
  .spalte img {
     width: 50%;
	 float: left;
	 margin-right: 0.5em;		
  }
}



@media (min-width: 50em) { 
  main {
    /*grid-template-columns: repeat(3, 1fr);*/
 }
 
  nav {
    grid-row: 1 / 4;
  } 

  #intro {
    grid-column: 2 / 4;
    grid-row:    1 / 2;					
  }

  article {
    grid-column: 2 / 4;
  }    
  
   aside {
    grid-column: 3 / 4;
    grid-row: 1 / 2;	
  }   
  
  .spalte {
    grid-row:    2 / 3;					
  }
  .spalte2 {
    grid-row:    3 / 3;					
  }
    
  .spalte img {
     width: 33%;
  } 
}
/*****************Barrierefreiheit***********************/
.unsichtbar {
        position: absolute;
        left: -10000px;
        top: auto;
        width: 1px;
        height: 1px;
        overflow: hidden;
    }
 #sprungmarken {
        display: inline;
        float: left;
        overflow: hidden;
}
#sprungmarken{list-style:none;}

#sprungmarken a.unsichtbar:focus,
#sprungmarken a.unsichtbar:active {
      left: 0;
      width: auto;
      white-space: nowrap;
      top: -1.6em;
      height: 20px;
      overflow: visible;
      display: block;
      color: #333;
      padding: 2px 2em 0;
      background-color: white;
      font-weight: 700;
}
/*********************************************/
#StatusMeldungErfolgNachricht{margin-top: 30px; color: #06c606;}
.fBt01A{flex-basis: 30%; margin-top: 20px; margin-right: 20px; min-width: 200px; min-height: 30px; border-radius: 1px;}
.fBt02A{margin-top: 20px; margin-right: 20px; min-width: 200px; min-height: 30px; border-radius: 1px; background:#dbe9f0;}
.zurueckB{color: #bd0000; border: 1px solid red; font-family: candara; font-weight: bold}
.zurueckB2{margin-bottom: 30px; color: #2456b5; border: 1px solid #2456b5; font-family: candara; background: aliceblue !important;}
.aktiverKontext{display:block;}
.deaktivierterKontext{display:none;}
.absendenB{color: #5570ff; border: 1px solid #0e1df9; font-family: candara; font-weight: bold}
.kontInfoP{padding: 10px; border: 0px dotted #35a88d; background-color: #f1ffee;
color: #058c34; border-radius: 10px; margin-top: 20px; max-width: 300px;}
.kontInfoP a:hover, a:focus {color:green;}
.closeNav{font-weight:bold; color:blue;}
.closeNav:before{border-left:0px !important;}
#contentBlockWrap{margin-left: auto; display: flex; flex-wrap: wrap; margin-right: auto; padding: 20px;}

#contentKPMain{width:100%; display: block; min-height:90vh; float:left; clear:right; padding: 25px; margin-left:15px; margin-right:auto; margin-top: 40px; max-width: calc( 95% - 25px);}
/*Main Content */
@media screen and (max-width: 500px){
	nav#navigation{padding-right:10px;}
	header{background: #1e0c75;}
	.linkList{margin-top:20px;}/*anklickbare Links bekommen mehr platz, vs. touch ungenauigkeit fehlklick*/
}
@media screen and (max-width: 799px){nav#navigation{width:100% !important;margin-left:auto !important; margin-right:auto !important;} nav#navigation ul{display: flex; flex-wrap: wrap;} nav#navigation ul li{margin-top:10px; margin-right:20px;}}
@media screen and (min-width: 400px){#contentKPMain{padding: 10px;}}
@media screen and (min-width: 470px){#contentKPMain{padding: 15px;}}
@media screen and (min-width: 550px){nav#navigation{margin-left:auto; margin-right:auto;}  #contentKPMain{width:100%; padding: 23px;}}
/*Main content kalkuliert*/
@media screen and (min-width: 600px){nav#navigation{margin-left:-30px; margin-right:0px;}  #contentKPMain{width:calc(97% - 20px); padding: 25px;} }
@media screen and (min-width: 700px){.spStart{margin-right: 0px; width:95%;} #contentKPMain{width:calc(100% - 20px); padding: 30px;}  }
@media screen and (min-width: 800px){.spStart{margin-right: 30px;} #contentKPMain{width:calc(100% - 10px); padding: 32px;} }
/*Main Content fixed max-width*/
@media screen and (min-width: 900px){#contentKPMain{padding: 35px;} .spStart{margin-right: 30px;}}
@media screen and (min-width: 1000px){#contentKPMain{padding: 40px;} .spStart{width: 40%;} }
@media screen and (min-width: 1100px){#contentKPMain{padding: 45px;} .spStart{width: 40%;} }
@media screen and (min-width: 1200px){#contentKPMain{padding: 50px;} .spStart{margin-right: 40px; min-width:265px; width: 29%;} }