/*
Theme Name: Gestaltung von Hogendorf
Theme URI: http://www.vonhogendorf.de/
Description: Seitengestaltung von Hogendorf
Author: Michael Neubert-Zimmer
Author URI: http://vonhogendorf.de/
Version: 1.0
Tags: 

License:
License URI:

*/



/* ######################################################################################################################### */
/* Allgemeine Angaben */
/* ######################################################################################################################### */

:root {
	--blau: rgb(44,90,166);
	--mittelblau: rgb(89,117,184);
	--hellblau: rgb(129,157,210);
	--lichtblau: rgb(158,182,221);
	--grundbeige: rgb(239,235,220);
	--dunkelbeige: rgb(223,216,190);
	--mittelgrau: rgb(163,163,162);
	--dunkelgrau: rgb(123,123,122);
	--grau: rgb(93,93,92);
	--schwarzgrau: rgb(43,43,42);
	--turkis: rgb(44,188,238);
	--weiss: rgb(255,255,255);
	--hellorange: rgb(244,153,55);
	--orange: rgb(231,83,24);
	
}

html,
body {
	height: 100%;
    margin: 0;
	padding: 0;
}

body {
	overflow: hidden;
    font-family: Arial, sans-serif;
}

a {
	text-decoration: none;
}

@font-face {
	font-family: "cofo";
	font-weight: 400;
	font-style: normal;
	src:url("../fonts/cofo.woff2") format("woff2");
}

@font-face {
	font-family: "mono-regular";
	font-weight: 400;
	font-style: normal;
	src:url("../fonts/mono-regular.woff2") format("woff2");
}

@font-face {
	font-family: "mono-bold";
	font-weight: 700;
	font-style: normal;
	src:url("../fonts/mono-bold.woff2") format("woff2");
}

@font-face {
	font-family: "silk";
	font-weight: 400;
	font-style: normal;
	src:url("../fonts/silkscreen.woff2") format("woff2");
}

@font-face {
	font-family: "Raleway";
	font-style: normal;
	font-weight: 400;
	src: url("../fonts/Raleway-Regular.woff2") format("woff2");
}



@font-face {
	font-family: "Raleway";
	font-style: normal;
	font-weight: 700;
	src: url("../fonts/Raleway-Bold.woff2") format("woff2");
}



/* ######################################################################################################################### */
/* Desktop */
/* ######################################################################################################################### */


.desktop {
	height: 100vh;
	display: flex;
	flex-direction: column;
	background:
    /* Punkte */
    radial-gradient(
      circle,
      rgba(255,255,255,0.1) 2px,
      transparent 2px
    ),

    /* Bild */
    url(../img/desktop.jpeg);

	background-size:
		18px 18px,   /* Punkte */
		cover;       /* Bild */

	background-repeat:
		repeat,      /* Punkte */
		no-repeat;   /* Bild */

	background-position:
		top left,
		center;
}

.desktop-workspace {
	flex: 1;
	overflow: hidden;
	position: relative;
	padding: 20px;
	box-sizing: border-box;
}

.hauptgrid {
	height: 100vh;
	max-width: 1920px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(12, 1fr);
    gap: 0rem 1.5rem;
    justify-content: space-around;
}

main {
	grid-column: 2 / 12;
	display: grid;
	grid-template-columns: repeat(10, 1fr);
    gap: 0rem 1.5rem;
    justify-content: space-around;
	align-self: flex-start;
	align-content: flex-start;
}


.desktop-workspace .hauptgrid main h1 {
	grid-column: 1 / -1;
	width: 100%;
	height: auto;
	margin: 2vh 0 3vh 0;
	padding: 0 0 0 0;
	text-transform: uppercase;
    font: 400 3.2rem 'Raleway', sans-serif;
	line-height: 3rem;
	text-align: center;
	letter-spacing: 1px;
    color: var(--weiss);
    text-decoration: none;
    text-shadow: -3px 2px 8px rgb(0 0 0 / 50%);
}



/* ######################################################################################################################### */
/* Navigation */
/* ######################################################################################################################### */


aside.hauptnavigation {
	grid-column: span 1;
	
}

aside.footernavigation {
	grid-column: 12 / -1;
	align-content: flex-end;
	padding: 0 0 10vh 0;
}

nav.menu-hauptnavigation-container,
nav.menu-footernavigation-container {
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
}

nav.menu-hauptnavigation-container ul,
nav.menu-footernavigation-container ul {
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 3vh 0rem;
}

nav.menu-hauptnavigation-container ul li,
nav.menu-footernavigation-container ul li {
	list-style-type: none;
	margin: 0;
	padding: 0;
	width: 100%;
	height: 80px;
}

nav.menu-hauptnavigation-container ul li a,
nav.menu-footernavigation-container ul li a {
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: 80px;
	margin: 0;
	padding: 68px 0 0 0;
	text-align: center;
	font: 400 1rem "cofo";
	letter-spacing: 1px;
	color: var(--weiss);
	opacity: 0.8;
	text-shadow: -1px 1px 8px rgba(0, 0, 0, 0.3);
	text-decoration: none;
	transition: all ease-in-out 0.3s;
}

nav.menu-hauptnavigation-container ul li a:hover,
nav.menu-footernavigation-container ul li a:hover {
	opacity: 1;
	filter: brightness(1.3);
	color: var(--weiss);
	text-shadow: -1px 1px 8px rgba(0, 0, 0, 1);
}

nav.menu-hauptnavigation-container ul li a:active,
nav.menu-footernavigation-container ul li a:active {
	transform: scale(0.90);
}

nav.menu-hauptnavigation-container ul li#menu-item-198 {
	display: none;
}

nav.menu-hauptnavigation-container ul li#menu-item-186 a{
	background:url("../img/icon_ubermich.svg") center/contain no-repeat;
}

nav.menu-hauptnavigation-container ul li#menu-item-223 a{
	background:url("../img/icon_ausbilder.svg") center/contain no-repeat;
}

nav.menu-hauptnavigation-container ul li#menu-item-185 a{
	background:url("../img/icon_portfolio.svg") center/contain no-repeat;
}

nav.menu-hauptnavigation-container ul li#menu-item-184 a{
	background:url("../img/icon_youtube.svg") center/contain no-repeat;
}

nav.menu-hauptnavigation-container ul li#menu-item-183 a{
	background:url("../img/icon_podcast.svg") center/contain no-repeat;
}

nav.menu-footernavigation-container ul li.menu-item-208 a{
	background:url("../img/icon_kontakt.svg") center/contain no-repeat;
}

nav.menu-footernavigation-container ul li.menu-item-187 a{
	background:url("../img/icon_impressum.svg") center/contain no-repeat;
}

nav.menu-footernavigation-container ul li.menu-item-189 a{
	background:url("../img/icon_datenschutz.svg") center/contain no-repeat;
}




/* ######################################################################################################################### */
/* Fensterbau */
/* ######################################################################################################################### */


section.closed {
  	opacity: 0;
  	pointer-events: none;
}

section header {
	height: 40px;
    display: flex;
    align-items: center;
	flex-shrink: 0;
    padding: 0 8px 0 12px;
    background: linear-gradient(to top, var(--blau) 0%, var(--mittelblau) 70%, var(--hellblau) 95%, var(--hellblau) 100%);
	border-radius: 8px 8px 0 0;
	border-bottom: solid 2px var(--blau);
}

section header h2 {
	width: calc(100% - 24px);
	height: auto;
	margin: 0;
	padding: 0 12px 0 0;
	color: var(--weiss);
    font: 400 1.3rem "cofo";
	letter-spacing: 1px;
	text-shadow: -1px 1px 3px rgb(0 0 0 / 50%); 
}

.close {
	box-sizing: border-box;
  	width: 25px;
  	height: 25px;
	margin: 0;
	padding: 0;
 	cursor: pointer;
  	font: 400 1rem "cofo";
  	color: var(--weiss);
  	box-shadow: inset 0 1px 0 rgba(255,255,255,0.4);
    background: linear-gradient(to bottom, var(--hellorange), var(--orange));
	border:solid 2px var(--weiss);
  	border-radius: 4px;
	text-align: center;
}

.close:hover {
  	filter: brightness(1.2);
}

.close:active {
  	transform: scale(0.95);
}

section article {
	flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
    box-sizing: border-box;
	background: var(--weiss);
	border-top: 0px solid var(--mittelgrau);
    border-right: 2px solid var(--mittelgrau);
    border-bottom: 2px solid var(--grundbeige);
    border-left: 2px solid var(--mittelgrau);

}

.leisten-oben {

}

.leisten-unten {
	border-bottom: 3px solid var(--blau);
}

.menuleiste {
	box-sizing: border-box;
	width: 100%;
	height: 36px;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	background: var(--dunkelbeige);
	display: flex;
}

.menuleiste nav.primary-nav-leiste{
	box-sizing: border-box;
	width: calc(100% - 102px);
	height: auto;
	margin: 0 2px 0 0;
	padding: 0 0 0 12px;
	border-bottom: solid 2px var(--mittelgrau);
	border-right: solid 2px var(--mittelgrau);
	align-items: center;
	display: flex;
	gap: 1rem;
}

.menuleiste nav.primary-nav-leiste ul {
	width: 100%;
	height: auto;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	display: flex;
	flex-wrap: nowrap;
	gap: 1rem;
}

.menuleiste nav.primary-nav-leiste ul li{
	height: auto;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	list-style: none;
}

.menuleiste nav.primary-nav-leiste ul li a{
	display: block;
	color: var(--dunkelgrau);
    font: 400 0.9rem "cofo";
    letter-spacing: 1px;
}

.menuleiste nav.primary-nav-leiste ul li a::first-letter {
	text-decoration: underline;
}

.menuleiste nav.primary-nav-leiste ul li a:hover{
	text-shadow: 0px 0px 0px var(--dunkelgrau);
}

.menuleiste .logobutton {
	box-sizing: border-box;
	width: 100px;
	height: 36px;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	background: var(--weiss) url(../img/logo_icon.svg) center / contain no-repeat;
	border-bottom: solid 2px var(--mittelgrau);
}

.breadcrompleiste {
	width: 100%;
	height: 36px;
	margin: 0 0 0 0;
	padding: 2px 0 2px 0;
	background: var(--dunkelbeige);
	display: flex;
	border-top: solid 2px var(--grundbeige);
	box-sizing: border-box;
	align-items: center;
}

.breadcrompleiste h4{
	box-sizing: border-box;
	width: 100px;
	height: auto;
	margin: 0 0 0 0;
	padding: 0 0 0 12px;
	color: var(--blau);
    font: 400 1.1rem "cofo";
	letter-spacing: 0.5px;
	text-shadow: 0px 0px 0px var(--blau);
}

.breadcrompleiste nav{
	box-sizing: border-box;
	width: calc(100% - 152px);
	height: 30px;
	margin: 0 0 0 0;
	padding: 4px 12px 2px 12px;
	background: var(--weiss);
	border: solid 2px var(--mittelblau);
	color: var(--dunkelgrau);
    font: 400 1rem "cofo";
	letter-spacing: 0.5px;
}

.breadcrompleiste nav a{
	color: var(--dunkelgrau);
}

.breadcrompleiste nav a:hover{
	color: var(--blau);
}


nav.secondary-nav-leiste {
	box-sizing: border-box;
	width: 100%;
	height: 30px;
	margin:0 0 0 0;
	padding: 0 12px 0 12px;
	background: var(--dunkelbeige);
	border-top: 2px solid var(--mittelgrau);
	border-right: 2px solid var(--mittelgrau);
	border-bottom: 2px solid var(--grundbeige);
	border-left: 2px solid var(--mittelgrau);
	align-items: center;
	display: flex;
}

nav.secondary-nav-leiste ul{
	width: 100%;
	height: auto;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	display: flex;
	flex-wrap: nowrap;
	gap: 1rem;
}

nav.secondary-nav-leiste ul li{
	list-style: none;
	height: auto;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
}

nav.secondary-nav-leiste ul li a{
	display: block;
	color: var(--mittelgrau);
    font: 400 0.9rem "cofo";
    letter-spacing: 1px;
}

nav.secondary-nav-leiste ul li a:hover{
	color: var(--dunkelgrau);
	text-shadow: 0px 0px 0px var(--dunkelgrau);
}


.style-switch-nav {
	width: 25%;
	height: auto;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	color: var(--mittelgrau);
    font: 400 0.9rem "cofo";
    letter-spacing: 1px;
	text-align: right;
	background: var(--dunkelbeige);
	border-top: 0px solid var(--mittelgrau);
	border-right: 0px solid var(--mittelgrau);
	border-bottom: 0px solid var(--grundbeige);
	border-left: 0px solid var(--mittelgrau);
	cursor: pointer;
}

.style-switch-nav:hover {
	cursor: pointer;
	color: var(--dunkelgrau);
	text-shadow: 0px 0px 0px var(--dunkelgrau);
}

/* ######################################################################################################################### */



[class^="fenster_"] article::-webkit-scrollbar,
[class^="fenster_"] aside::-webkit-scrollbar,
[class^="fenster_"] .inhalt::-webkit-scrollbar,
[class^="fenster_"] .stapel::-webkit-scrollbar{
	width: 22px;	
}

[class^="fenster_"] article::-webkit-scrollbar-track,
[class^="fenster_"] aside::-webkit-scrollbar-track,
[class^="fenster_"] .inhalt::-webkit-scrollbar-track,
[class^="fenster_"] .stapel::-webkit-scrollbar-track {
	background: var(--dunkelbeige);
	border-left: 2px solid var(--mittelgrau);
}

[class^="fenster_"] article::-webkit-scrollbar-thumb,
[class^="fenster_"] aside::-webkit-scrollbar-thumb,
[class^="fenster_"] .inhalt::-webkit-scrollbar-thumb,
[class^="fenster_"] .stapel::-webkit-scrollbar-thumb  {
	box-sizing: border-box;
	background: 
	/* SVG oben */
    url(../img/linien.svg) center center / 12px 12px no-repeat,
	
	linear-gradient(
    to right,
    var(--mittelblau),
    var(--hellblau) 20%,
    var(--lichtblau) 50%,
    var(--hellblau) 80%,
    var(--mittelblau)
  );
	border: 2px solid var(--blau);
	border-radius: 5px;
	box-shadow: 0 3px 2px rgba(0, 0, 0, 0.25);
}

[class^="fenster_"] article::-webkit-scrollbar-thumb:hover,
[class^="fenster_"] aside::-webkit-scrollbar-thumb:hover,
[class^="fenster_"] .inhalt::-webkit-scrollbar-thumb:hover,
[class^="fenster_"] .stapel::-webkit-scrollbar-thumb:hover {
	border: 2px solid var(--lichtblau);
	background: 
    url(../img/linien.svg) center center / 12px 12px no-repeat,
	
	linear-gradient(
    to right,
    var(--mittelblau),
    var(--hellblau) 15%,
    var(--lichtblau) 50%,
    var(--hellblau) 85%,
    var(--mittelblau)
  );
}



/* ######################################################################################################################### */


.fenster_gross {
	grid-column: 1 / -1;
	box-sizing: border-box;
	width: 100%;
	/*height: calc(100% - 20px);*/
	max-height: 80vh;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--blau);
	border-radius: 8px 8px 0 0;
	box-shadow: 0 8px 30px rgba(0,0,0,0.25);
	transition: opacity 0.2s ease;
	border-left: solid 3px var(--blau);
	border-right: solid 3px var(--blau);
	border-bottom: solid 3px var(--schwarzgrau);
}
	
.fenster_klein {
	grid-column: 2 / 10;
	box-sizing: border-box;
	width: 100%;
	/*height: calc(100% - 20px);*/
	max-height: 80vh;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--blau);
	border-radius: 8px 8px 0 0;
	box-shadow: 0 8px 30px rgba(0,0,0,0.25);
	transition: opacity 0.2s ease;
	border-left: solid 3px var(--blau);
	border-right: solid 3px var(--blau);
	border-bottom: solid 3px var(--schwarzgrau);
}




/* ######################################################################################################################### */
/* Standard Fenster */


.fenster_standard {
}

section.fenster_standard article {
	min-width: 0px;
	padding: 2vh 150px 2vh 2rem;
    hyphens: auto;
    overflow-wrap: break-word;
    text-wrap: pretty;
	overflow-x: hidden;
}

section.fenster_standard article p {
	width: 100%;
	height: auto;
	margin: 0 0 0 0;
	padding: 0 0 1vh 0;
	font: 400 1rem "mono-regular";
	line-height: 1.4rem;
  	color: var(--blau);
}

section.fenster_standard article p a {
	font: 700 1rem "mono-bold";
	color: var(--blau);
}

section.fenster_standard article p a:hover {
	color:var(--orange);
}

section.fenster_standard article h2 {
	width: 100%;
	height: auto;
	margin: 0 0 0 0;
	padding: 1vh 0 0.8vh 0;
	font: 700 1.9rem "mono-bold";
  	color: var(--blau);
}

section.fenster_standard article h3 {
	width: 100%;
	height: auto;
	margin: 0 0 0 0;
	padding: 0.5vh 0 0.8vh 0;
	font: 700 2rem "mono-bold";
  	color: var(--blau);
}

section.fenster_standard article h4 {
	width: 100%;
	height: auto;
	margin: 0 0 0 0;
	padding: 0.5vh 0 0.8vh 0;
	font: 700 1.5rem "mono-bold";
  	color: var(--blau);
}


section.fenster_standard article ul {
	width: 100%;
    height: auto;
    margin: 0 0 0 0;
    padding: 0 0 2vh 20px;
}

section.fenster_standard article ul li {
	font: 400 1rem "mono-regular";
    line-height: 1.4rem;
    color: var(--blau);
}



/* ######################################################################################################################### */
/* Startseite */


.fenster_start {
}

section.fenster_start .inhalt {
	box-sizing: border-box;
    width: 100%;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

section.fenster_start article {
	box-sizing: border-box;
	flex: 1;
    padding: 40px 20% 20px 2rem;
	background: var(--weiss);
	border-top: 0px solid var(--mittelgrau);
    border-right: 2px solid var(--mittelgrau);
    border-bottom: 0px solid var(--grundbeige);
    border-left: 2px solid var(--mittelgrau);
}

section.fenster_start article p {
	width: 100%;
	max-width: 950px;
	height: auto;
	margin: 0 0 0 0;
	padding: 0 0 1vh 0;
	font: 400 1rem "mono-regular";
  	color: var(--blau);
}


section.fenster_start article h2 {
	width: 100%;
	height: auto;
	margin: 0 0 0 0;
	padding: 0 0 3vh 0;
	font: 400 2.75rem "silk";
	line-height: 2.5rem;
  	color: var(--blau);
}

section.fenster_start .startkarten {
	box-sizing: border-box;
	width: 100%;
	height: auto;
	margin: 0 0 0 0;
	padding: 4vh 2rem 6vh 2rem;
	background: var(--weiss);
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 3vh 1rem;
	border-right: 2px solid var(--mittelgrau);
    border-bottom: 2px solid var(--grundbeige);
    border-left: 2px solid var(--mittelgrau);
	align-items: stretch;
}

section.fenster_start .startkarten aside {
	box-sizing: border-box;
	grid-column: span 1;
	width: 100%;
	height: 100%;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	display: flex;
    flex-direction: column;
    flex: 1;
	box-shadow: 0 3px 4px rgba(0, 0, 0, 0.15);
}

section.fenster_start .startkarten aside h3 {
	display: inline-flex;          
	align-items: center;           
	gap: 0.5rem;                   
	box-sizing: border-box;
	width: auto;
	height: auto;
	margin: 0;
    padding: 0.70rem 1rem 0.70rem 0.70rem;
    background: linear-gradient(to top, var(--grundbeige) 70%, var(--weiss) 100%);
    color: var(--grau);
    font: 700 0.95rem "mono-bold";
    letter-spacing: 0.8px;
    border-top: solid 2px var(--mittelgrau);
    border-right: solid 2px var(--mittelgrau);
    border-left: solid 2px var(--mittelgrau);
    border-bottom: 0;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

section.fenster_start .startkarten aside:first-of-type h3::before {
	content: "";
	width: 24px;
	height: 24px;
	background: url("../img/icon_wissen.svg") center / contain no-repeat;
	flex-shrink: 0;
}

section.fenster_start .startkarten aside:nth-of-type(2) h3::before {
	content: "";
	width: 24px;
	height: 24px;
	background: url("../img/icon_web.svg") center / contain no-repeat;
	flex-shrink: 0;
}

section.fenster_start .startkarten aside:last-of-type h3::before {
	content: "";
	width: 24px;
	height: 24px;
	background: url("../img/icon_reichweite.svg") center / contain no-repeat;
	flex-shrink: 0;
}

section.fenster_start .startkarten aside .textwidget{
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	margin: 0 0 0 0;
	padding: 0.70rem 1rem 1.5rem 0.70rem;
	border-top: solid 2px var(--mittelgrau);
    border-right: solid 2px var(--mittelgrau);
    border-bottom: solid 2px var(--dunkelgrau);
    border-left: solid 2px var(--mittelgrau);
	border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
	background: var(--grundbeige);
}

section.fenster_start .startkarten aside .textwidget p{
	box-sizing: border-box;
	width: 100%;
    height: auto;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    font: 400 0.90rem "mono-regular";
	line-height: 1.2rem;
    color: var(--grau);
}

section.fenster_start .startkarten aside .textwidget a{}

section.fenster_start .startkarten aside .textwidget a:hover{}

section.fenster_start .partnerlogos {
	box-sizing: border-box;
	width: 100%;
	height: auto;
	margin: 0 0 0 0;
	padding: 2vh 2rem 5vh 2rem;
	background: var(--dunkelbeige);
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 1vh 1rem;
	border-right: 2px solid var(--mittelgrau);
    border-bottom: 2px solid var(--grundbeige);
    border-left: 2px solid var(--mittelgrau);
	-webkit-hyphens: auto;
    hyphens: auto;
    text-wrap: pretty;
    overflow-wrap: break-word;
}

section.fenster_start .partnerlogos h2 {
	grid-column: 1 / -1;
	width: 100%;
    height: auto;
    margin: 0 0 0 0;
    padding: 0 0 10px 0;
    font: 400 1.8rem "silk";
	line-height: 2rem;
    color: var(--grau);
}

section.fenster_start .partnerlogos .partnerlogo {
	grid-column: span 1;
	width: 100%;
	height: auto;
	margin: 0 0 0 0;
}

section.fenster_start .partnerlogos .partnerlogo h3{
	display: none;
}

section.fenster_start .partnerlogos .partnerlogo a{
	box-sizing: border-box;
	display: block;
	width: 100%;
	height: auto;
	margin: 0 0 0 0;
	padding: 4px 4px 4px 4px;
	border-top: solid 2px var(--mittelgrau);
    border-right: solid 2px var(--mittelgrau);
    border-bottom: solid 2px var(--dunkelgrau);
    border-left: solid 2px var(--mittelgrau);
	border-radius: 4px;
	background: var(--weiss);
	box-shadow: 0 4px 5px rgba(0, 0, 0, 0.25);
	transition: all ease-in-out 0.5s;
}

section.fenster_start .partnerlogos .partnerlogo a:hover {
	transform: scale(1.05); /* 10% größer */
	box-shadow: 0 6px 7px rgba(0, 0, 0, 0.30);
}

section.fenster_start .partnerlogos .partnerlogo a:active{
	transform: scale(0.95);
}

section.fenster_start .partnerlogos .partnerlogo a img{

}



/* ######################################################################################################################### */
/* Explorer */

.fenster_explorer {
}

section.fenster_explorer .inhalt {
	min-height: 0;
    overflow-y: auto;
	width: 100%;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	display: grid;
	grid-template-columns: repeat(6, 1fr);
    gap: 0rem 0rem;
    justify-content: space-around;
}

section.fenster_explorer .inhalt article {
	box-sizing: border-box;
	grid-column: span 4;
    width: 100%;
    min-height: 0;
    overflow-y: auto;
	overflow-x:hidden;
    padding: 2vh 40px 1vh 40px;
	background: var(--weiss);
	border-top: 2px solid var(--mittelgrau);
	border-right: 2px solid var(--mittelgrau);
	border-bottom: 2px solid var(--grundbeige);
	border-left: 2px solid var(--mittelgrau);
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4rem 2rem;
    justify-content: space-around;
	align-content: flex-start;
}

section.fenster_explorer .inhalt article> * {
    min-width: 0;
	-webkit-hyphens: auto;
    hyphens: auto;
    text-wrap: pretty;
    overflow-wrap: break-word;
}

section.fenster_explorer .inhalt aside {
	box-sizing: border-box;
	grid-column: span 2;
	width: 100%;
    min-height: 0;
    overflow-y: auto;
	overflow-x:hidden;
    padding: 20px 40px 1vh 20px;
	background: linear-gradient(to top, var(--blau) 0%, var(--mittelblau) 70%, var(--hellblau) 95%, var(--hellblau) 100%);
	border-top: 2px solid var(--mittelgrau);
	border-right: 2px solid var(--mittelgrau);
	border-bottom: 2px solid var(--grundbeige);
	border-left: 2px solid var(--mittelgrau);
}

section.fenster_explorer .inhalt aside nav {
	width: 100%;
	height: auto;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
}

section.fenster_explorer .inhalt aside nav ul {
	box-sizing: border-box;
	width: 100%;
	height: auto;
	padding: 0 0 0 0;
	margin: 0 0 0 0;
	
}

section.fenster_explorer .inhalt aside nav ul li {
	list-style-type: none;
	box-sizing: border-box;
	color: var(--blau);
    font: 400 1.4rem "silk";
	line-height: 1.2rem;
	letter-spacing: -0.5px;
	margin: 0 0 1.5vh 0;
	padding: 0 0 0 0;
	background: var(--lichtblau);
	border-top-left-radius: 6px;
	border-top-right-radius: 6px;
	border:solid 2px var(--hellblau);
}

section.fenster_explorer .inhalt aside nav ul li::before {

}

section.fenster_explorer .inhalt aside nav ul li a{
	display: block;
	color: var(--weiss);
	margin: 0 0 0 0;
	padding: 8px 0 8px 12px;
	background: linear-gradient(to right, var(--blau) 0%, var(--mittelblau) 70%);
	border-top-left-radius: 6px;
	border-top-right-radius: 6px;
	text-shadow: -1px 1px 3px rgb(0 0 0 / 50%);
}

section.fenster_explorer .inhalt aside nav ul li a:hover{
	background: linear-gradient(to right, var(--orange) 0%, var(--mittelblau) 70%);
	text-shadow: -1px 1px 3px rgb(0 0 0 / 50%);
}

section.fenster_explorer .inhalt aside nav ul li ul{
	box-sizing: border-box;
	width: 100%;
	height: auto;
	padding: 0 10px 10px 0;
	margin: 10px 0 0 0;
}

section.fenster_explorer .inhalt aside nav ul li ul li {
	list-style-type: square;
	box-sizing: border-box;
	margin: 0 0 10px 35px;
	padding: 0 0 0 0;
	color: var(--weiss);
	background: var(--lichtblau);
	border-top-left-radius: 0px;
	border-top-right-radius: 0px;
	border:solid 0px var(--hellblau);
	opacity: 0.9;
}

section.fenster_explorer .inhalt aside nav ul li ul li:hover {
	opacity: 1;

}

section.fenster_explorer .inhalt aside nav ul li ul li::before {

}

section.fenster_explorer .inhalt aside nav ul li ul li a{
	display: block;
	color: var(--weiss);
    font: 400 1rem "cofo";
	letter-spacing: 0.5px;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	background: none;
	border-top-left-radius: 0px;
	border-top-right-radius: 0px;
	text-shadow: -1px 1px 3px rgb(0 0 0 / 0%);
}

section.fenster_explorer .inhalt aside nav ul li ul li a:hover{
	color: var(--orange);
	background: none;
	text-shadow: -1px 1px 3px rgba(255, 255, 255, 0.5);
}

section.fenster_explorer .inhalt article .beitragsicon {
	grid-column: span 1;
	box-sizing: border-box;
	width: 100%;
	height: auto;
	margin: 0 0 0 0;
    padding: 0 0 24px 0;
	background: var(--grundbeige);
	box-shadow: 0 4px 5px rgba(0, 0, 0, 0.25);
	border-radius:5px;
	transition: all ease-in-out 0.3s;
}

section.fenster_explorer .inhalt article .beitragsicon:hover {
	transform: scale(1.05); /* 10% größer */
	box-shadow: 0 6px 7px rgba(0, 0, 0, 0.30);
}

section.fenster_explorer .inhalt article .beitragsicon:active {
	transform: scale(0.95);
}

section.fenster_explorer .inhalt article .beitragsicon .beitragsbild {
	display: block;
    width: 100%;
    height: 150px;
    margin: 0 0 14px 0;
    padding: 0 0 0 0;
    overflow: hidden;
    position: relative;
	border-top-left-radius:5px;
	border-top-right-radius:5px;
}

section.fenster_explorer .inhalt article .beitragsicon .beitragsbild a {
	opacity: 1;
    transition: all 0.5s ease;
}

section.fenster_explorer .inhalt article .beitragsicon .beitragsbild a:hover {
	opacity: 0.8;
}

section.fenster_explorer .inhalt article .beitragsicon .beitragsbild a img {
	position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: translate(-50%, -50%);
}

section.fenster_explorer .inhalt article .beitragsicon h5 {
	box-sizing: border-box;
	width: 100%;
	height: auto;
	margin: 0 0 5px 0;
    padding: 0 10px 0 12px;
	font: 400 0.9rem "cofo";
	letter-spacing: 0.5px;
	color: var(--mittelblau);
}

section.fenster_explorer .inhalt article .beitragsicon h2 {
	box-sizing: border-box;
	width: 100%;
	height: auto;
	margin: 0 0 0 0;
    padding: 0 10px 0 12px;
	line-height: 1.1rem;
}

section.fenster_explorer .inhalt article .beitragsicon h2 a {
	font: 400 1.2rem "silk";
	line-height: 1rem;
	letter-spacing: 0.5px;
	color: var(--blau);
}

section.fenster_explorer .inhalt article .beitragsicon h2 a:hover {
	color: var(--orange);
	
}



/* ######################################################################################################################### */
/* Beitragsfenster */

.fenster_beitrag {
}

section.fenster_beitrag .inhalt {
	min-height: 0;
    overflow-y: auto;
	width: 100%;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
    gap: 0rem 0rem;
    justify-content: space-around;
}

section.fenster_beitrag .inhalt .beitragsbild {
	box-sizing: border-box;
	grid-column: span 3;
	display: block;
    width: 100%;
    height: 400px;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    overflow: hidden;
    position: relative;
	border-top: 2px solid var(--mittelgrau);
	border-right: 2px solid var(--mittelgrau);
	border-bottom: 2px solid var(--grundbeige);
	border-left: 2px solid var(--mittelgrau);
}

section.fenster_beitrag .inhalt .beitragsbild::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--bg-image) center/cover no-repeat;
    filter: blur(25px);
    transform: scale(1.1);
    z-index: 0;
}

section.fenster_beitrag .inhalt .beitragsbild img{
	position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center 30%;
    transform: translate(-50%, -50%);
}

section.fenster_beitrag .inhalt aside{
	box-sizing: border-box;
	grid-column: span 1;
	width: 100%;
    min-height: 0;
    overflow-y: auto;
	overflow-x:hidden;
    padding: 2vh 40px 1vh 12px;
	background: var(--grundbeige);
}

section.fenster_beitrag .inhalt aside:first-of-type {
	border-top: 2px solid var(--mittelgrau);
	border-right: 2px solid var(--mittelgrau);
	border-bottom: 0px solid var(--grundbeige);
	border-left: 2px solid var(--mittelgrau);
}

section.fenster_beitrag .inhalt aside:last-of-type{
	border-top: 0px solid var(--mittelgrau);
	border-right: 2px solid var(--mittelgrau);
	border-bottom: 2px solid var(--grundbeige);
	border-left: 2px solid var(--mittelgrau);
}

section.fenster_beitrag .inhalt aside h3{
	width: 100%;
    height: auto;
    margin: 0 0 0 0;
    padding: 0 0 0.8vh 0;
    font: 400 1.4rem "silk";
    color: var(--dunkelgrau);
}

section.fenster_beitrag .inhalt aside h4{
	width: 100%;
    height: auto;
    margin: 0 0 0.6vh 0;
    padding: 0 0 0 0;
    font: 400 1.1rem "cofo";
    color: var(--dunkelgrau);
}

section.fenster_beitrag .inhalt aside h5{
	width: 100%;
    height: auto;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    font: 400 1rem "cofo";
    color: var(--mittelgrau);
}

section.fenster_beitrag .inhalt article {
	box-sizing: border-box;
	grid-column: span 3;
    width: 100%;
    min-height: 0;
    overflow-y: auto;
	overflow-x:hidden;
    padding: 2vh 150px 1vh 2rem;
	background: var(--weiss);
	border-top: 2px solid var(--mittelgrau);
	border-right: 2px solid var(--mittelgrau);
	border-bottom: 2px solid var(--grundbeige);
	border-left: 2px solid var(--mittelgrau);
}

section.fenster_beitrag .inhalt article> * {
    min-width: 0;
	-webkit-hyphens: auto;
    hyphens: auto;
    text-wrap: pretty;
    overflow-wrap: break-word;
}

section.fenster_beitrag .inhalt article p {
	width: 100%;
	height: auto;
	margin: 0 0 0 0;
	padding: 0 0 1vh 0;
	font: 400 1rem "mono-regular";
	line-height: 1.5rem;
  	color: var(--mittelblau);
}


section.fenster_beitrag .inhalt article h2 {
	width: 100%;
	height: auto;
	margin: 0 0 0 0;
	padding: 0 0 2vh 0;
	font: 400 3rem "silk";
	line-height: 3.2rem;
  	color: var(--blau);
}

section.fenster_beitrag .inhalt article h3 {
	width: 100%;
	height: auto;
	margin: 0 0 0 0;
	padding: 1vh 0 0.5vh 0;
	font: 700 1.75rem "mono-bold";
  	color: var(--blau);
}

section.fenster_beitrag .inhalt article h4 {
	width: 100%;
	height: auto;
	margin: 0 0 0 0;
	padding: 0.5vh 0 0.8vh 0;
	font: 700 1.5rem "mono-bold";
  	color: var(--blau);
}

section.fenster_beitrag .inhalt article ul{
	width: 100%;
	height: auto;
	margin: 0 0 0 0;
	padding: 0 0 2vh 20px;
	
}

section.fenster_beitrag .inhalt article ul li{
	font: 400 1rem "mono-regular";
	line-height: 1.4rem;
  	color: var(--mittelblau);
}

.gallery {
    width: 100%;
    height: auto;
    margin: 35px 0 45px 0 !important;
    padding: 0 0 0 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

.gallery br {
	display: none;
}

.gallery .gallery-item {
    width: 100% !important;
    height: auto !important;
    margin: 0 0 0 0 !important;
    padding: 0 0 0 0 !important;
}

.gallery .gallery-item .gallery-icon {
	box-sizing: border-box;
    width: 100%;
    height: 150px;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    position: relative;
    overflow: hidden;
	background: var(--grundbeige);
	border: solid 3px var(--dunkelbeige);
    box-shadow: 0 4px 5px rgba(0, 0, 0, 0.25);
    border-radius: 5px;
}


.gallery .gallery-item .gallery-icon a {
}

.gallery .gallery-item .gallery-icon a img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: translate(-50%, -50%);
}



/* ######################################################################################################################### */
/* Über Mich Fenster */

.fenster_uebermich {
}

section.fenster_uebermich .inhalt {
	min-height: 0;
    overflow-y: auto;
	width: 100%;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	display: grid;
	grid-template-columns: repeat(8, 1fr);
    gap: 0rem 0rem;
    justify-content: space-around;
}

section.fenster_uebermich .inhalt aside {
	box-sizing: border-box;
	grid-column: span 3;
	width: 100%;
    padding: 2vh 30px 2vh 30px;
	background: var(--grundbeige);
}

section.fenster_uebermich .inhalt aside .beitragsbild {
	display: block;
	box-sizing: border-box;
    width: 100%;
    height: 400px;
    margin: 0 0 14px 0;
    padding: 0 0 0 0;
    overflow: hidden;
    position: relative;
	border-top: solid 2px var(--mittelgrau);
	border-right: solid 2px var(--mittelgrau);
	border-bottom: solid 2px var(--mittelgrau);
	border-left: solid 2px var(--mittelgrau);
	box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.15);
	border-radius: 4px;
}

section.fenster_uebermich .inhalt aside .fakten {
	width: 100%;
    height: auto;
    margin: 2vh 0 0 0;
    padding: 0 0 0 0;
}

section.fenster_uebermich .inhalt aside .fakten h2{
	width: 100%;
    height: auto;
    margin: 0 0 0 0;
    padding: 0 0 1vh 0;
    font: 400 2.35rem "silk";
	line-height: 2.5rem;
    color: var(--grau);
}

section.fenster_uebermich .inhalt aside .fakten p{
	width: 100%;
    height: auto;
    margin: 0 0 0 0;
    padding: 0 0 1vh 0;
    font: 400 0.9rem "mono-regular";
    line-height: 1.3rem;
    color: var(--dunkelgrau);
}

section.fenster_uebermich .inhalt aside .fakten ul {
	width: 100%;
    height: auto;
    margin: 0 0 0 0;
    padding: 0 0 1vh 20px;
}

section.fenster_uebermich .inhalt aside .fakten ul li{
	width: 100%;
    height: auto;
	margin: 0 0 5px 0;
	font: 400 0.9rem "mono-regular";
    line-height: 1.2rem;
    color: var(--dunkelgrau);
	list-style-position: outside;
}

section.fenster_uebermich .inhalt aside .fakten ul li strong {
	font: 700 0.9rem "mono-bold";
}

section.fenster_uebermich .inhalt aside .beitragsbild img{
	position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: translate(-50%, -50%);
}

section.fenster_uebermich .inhalt .stapel {
	box-sizing: border-box;
	grid-column: span 5;
	width: 100%;
    min-height: 0;
    overflow-y: auto;
	overflow-x:hidden;
    padding: 2vh 40px 1vh 12px;
	background: var(--grundbeige);
}

.widget-tab-nav {
	display: flex;
	flex-wrap: nowrap;
	gap: 0.2rem;
}

.widget-tab-button {
	box-sizing: border-box;
	padding: 0.75rem 1rem 0.75rem 1rem;
	cursor: pointer;
	background: linear-gradient(to top, var(--mittelgrau) 0%, var(--dunkelbeige) 4%,var(--grundbeige) 90%);
	color: var(--grau);
    font: 400 0.9rem "cofo";
    letter-spacing: 1px;
	border-top: solid 2px var(--mittelgrau);
	border-right: solid 2px var(--mittelgrau);
	border-bottom: solid 1px var(--mittelgrau);
	border-left: solid 2px var(--mittelgrau);
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
}

.widget-tab-button:hover {
	background: linear-gradient(to top, var(--mittelgrau) 0%, var(--dunkelbeige) 4%,var(--grundbeige) 90%, var(--hellorange) 100%);
}


.widget-tab-button.active {
	background: var(--weiss);
	background: linear-gradient(to top, var(--weiss) 93%, var(--hellorange) 100%);
	font-weight: 700;
	border-bottom: solid 1px var(--weiss);
	text-shadow: 0px 0px 0px var(--grau);
}

.widget-tab-panel {
	display: none;
}

.widget-tab-panel.active {
	display: block;
}

.widget-tab-content article {
	box-sizing: border-box;
	width: 100%;
	min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
	margin: -2px 0 0 0;
	padding: 2vh 20% 4vh 20px;
	border-top: solid 2px var(--mittelgrau);
	border-right: solid 2px var(--mittelgrau);
	border-bottom: solid 2px var(--mittelgrau);
	border-left: solid 2px var(--mittelgrau);
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
	box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.15);
}

.widget-tab-content article p{
	width: 100%;
    height: auto;
    margin: 0 0 0 0;
    padding: 0 0 1vh 0;
    font: 400 1rem "mono-regular";
    line-height: 1.4rem;
    color: var(--mittelblau);
}

.widget-tab-content article p strong{
    font: 700 1rem "mono-bold";
}


.widget-tab-content article h2 {
    width: 100%;
    height: auto;
    margin: 0 0 0 0;
    padding: 0 0 0.8vh 0;
    font: 400 2.1rem "silk";
	line-height: 2.3rem;
    color: var(--blau);
}


.widget-tab-content article h3 {
    width: 100%;
    height: auto;
    margin: 0 0 0 0;
    padding: 0 0 1.2vh 0;
    font: 400 2.2rem "silk";
	line-height: 2.2rem;
    color: var(--blau);
}

.widget-tab-content article h4 {
    width: 100%;
    height: auto;
    margin: 0 0 0 0;
    padding: 0 0 0.5vh 0;
    font: 700 1.4rem "mono-bold";
    color: var(--blau);
}

.widget-tab-content article ul {
	box-sizing: border-box;
	width: 100%;
    height: auto;
    margin: 0 0 0 0;
    padding: 0 0 1vh 20px;
}

.widget-tab-content article ul li{
	width: 100%;
    height: auto;
    margin: 0 0 0.5vh 0;
	font: 400 1rem "mono-regular";
    line-height: 1.4rem;
    color: var(--mittelblau);
}


/* ######################################################################################################################### */
/* Ausbilder Fenster */


.fenster_ausbilder {
}

section.fenster_ausbilder .inhalt {
	min-height: 0;
    overflow-y: auto;
	width: 100%;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	display: grid;
	grid-template-columns: repeat(8, 1fr);
    gap: 0rem 0rem;
    justify-content: space-around;
}

section.fenster_ausbilder .inhalt aside {
	box-sizing: border-box;
	grid-column: span 8;
	width: 100%;
    padding: 2vh 20% 2vh 30px;
	background: var(--grundbeige);
}



section.fenster_ausbilder .inhalt aside h2{
	width: 100%;
    height: auto;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    font: 400 2.7rem "silk";
	line-height: 3rem;
    color: var(--grau);
}

section.fenster_ausbilder .inhalt aside h3{
	width: 100%;
    height: auto;
    margin: 0 0 0 0;
    padding: 0 0 1.5vh 0;
    font: 700 1.15rem "mono-bold";
    color: var(--mittelgrau);
}

section.fenster_ausbilder .inhalt aside p{
	width: 100%;
    height: auto;
    margin: 0 0 0 0;
    padding: 0 0 1vh 0;
    font: 400 1rem "mono-regular";
    line-height: 1.5rem;
    color: var(--grau);
}


section.fenster_ausbilder .inhalt .stapel {
	box-sizing: border-box;
	grid-column: span 8;
	width: 100%;
    padding: 2vh 40px 1vh 20px;
	background: var(--grundbeige);
}

/* ######################################################################################################################### */
/* YouTube Fenster */


.fenster_youtube {
}

section.fenster_youtube .inhalt {
	min-height: 0;
    overflow-y: auto;
	width: 100%;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
    gap: 0rem 0rem;
    justify-content: space-around;
}

section.fenster_youtube .inhalt .einband {
	box-sizing: border-box;
	grid-column: span 3;
	display: block;
    width: 100%;
	height: 100%;
	min-height: 0;
    overflow-y: auto;
	overflow-x:hidden;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: auto 1fr;
    gap: 0rem 0rem;
    justify-content: space-around;
	align-items:start;
}

section.fenster_youtube .inhalt .einband .beitragsbild {
	box-sizing: border-box;
	grid-column: span 3;
	display: block;
    width: 100%;
    height: 300px;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    overflow: hidden;
    position: relative;
	border-top: 2px solid var(--mittelgrau);
	border-right: 2px solid var(--mittelgrau);
	border-bottom: 2px solid var(--grundbeige);
	border-left: 2px solid var(--mittelgrau);
}

section.fenster_youtube .inhalt .einband .beitragsbild::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--bg-image) center/cover no-repeat;
    filter: blur(25px);
    transform: scale(1.1);
    z-index: 0;
}

section.fenster_youtube .inhalt .einband .beitragsbild img{
	position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 50%;
    transform: translate(-50%, -50%);
}

section.fenster_youtube .inhalt aside {
	box-sizing: border-box;
	grid-column: span 1;
    width: 100%;
    min-height: 0;
	padding: 1vh 40px 1vh 40px;
    overflow-y: auto;
	overflow-x:hidden;
	background: var(--dunkelbeige);
}


section.fenster_youtube .inhalt aside article {
	box-sizing: border-box;
	width: 100%;
	height: auto;
	margin: 0 0 2vh 0;
	padding: 0 0 0 0;
	background: none;
	border: solid 0px var(--dunkelgrau);
}

section.fenster_youtube .inhalt aside article h3 {
	box-sizing: border-box;
	display: inline-block;
	width: auto;
	height: auto;
	margin: 0 0 0 0;
    padding: 0.70rem 1rem 0.70rem 0.70rem;
    background: linear-gradient(to top, var(--grundbeige) 70%, var(--weiss) 100%);
    color: var(--grau);
    font: 400 0.85rem "cofo";
    letter-spacing: 0.8px;
    border-top: solid 2px var(--mittelgrau);
    border-right: solid 2px var(--mittelgrau);
    border-bottom: solid 0px var(--dunkelbeige);
    border-left: solid 2px var(--mittelgrau);
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

section.fenster_youtube .inhalt aside article h3::before{
	display: inline-block;
    content: "";
    width: 14px;
    height: 14px;
	padding: 0 0 0 0;
	margin: -5px 3px 0 0;
    background-image: url("../img/icon_video.svg");
    background-size: contain;
    background-repeat: no-repeat;
}

section.fenster_youtube .inhalt aside article .wp-video {
	box-sizing: border-box;
	width: 100%;
	height: auto;
	margin: -2px 0 0 0;
	padding: 4px 4px 4px 4px;
	border-top: solid 2px var(--mittelgrau);
    border-right: solid 2px var(--mittelgrau);
    border-bottom: solid 2px var(--mittelgrau);
    border-left: solid 2px var(--mittelgrau);
	border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
	background: var(--grundbeige);
	overflow: hidden;
}

section.fenster_youtube .inhalt aside article .wp-video div {
	width: 100% !important;
	overflow: hidden;
}

section.fenster_youtube .inhalt aside article .custom-html-widget {
	box-sizing: border-box;
	width: 100%;
	height: auto;
	margin: -2px 0 0 0;
	padding: 4px 4px 4px 4px;
	border-top: solid 2px var(--mittelgrau);
    border-right: solid 2px var(--mittelgrau);
    border-bottom: solid 2px var(--mittelgrau);
    border-left: solid 2px var(--mittelgrau);
	border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
	background: var(--grundbeige);
}


section.fenster_youtube .inhalt .einband article {
	box-sizing: border-box;
	grid-column: span 3;
    width: 100%;
	height: 100%;
    min-height: 0;
    overflow-y: auto;
	overflow-x:hidden;
    padding: 2vh 150px 1vh 2rem;
	background: var(--weiss);
	border-top: 2px solid var(--mittelgrau);
	border-right: 2px solid var(--mittelgrau);
	border-bottom: 2px solid var(--grundbeige);
	border-left: 2px solid var(--mittelgrau);
}

section.fenster_youtube .inhalt .einband article> * {
    min-width: 0;
	-webkit-hyphens: auto;
    hyphens: auto;
    text-wrap: pretty;
    overflow-wrap: break-word;
}

section.fenster_youtube .inhalt .einband article p {
	width: 100%;
	height: auto;
	margin: 0 0 0 0;
	padding: 0 0 1vh 0;
	font: 400 1rem "mono-regular";
	line-height: 1.4rem;
  	color: var(--mittelblau);
}

section.fenster_youtube .inhalt .einband article p strong{
	font: 700 1rem "mono-bold";
}


section.fenster_youtube .inhalt .einband article h2 {
	width: 100%;
	height: auto;
	margin: 0 0 0 0;
	padding: 0 0 2vh 0;
	font: 400 2.8rem "silk";
    line-height: 3.2rem;
  	color: var(--blau);
}

section.fenster_youtube .inhalt .einband article h3 {
	width: 100%;
	height: auto;
	margin: 0 0 0 0;
	padding: 0.8vh 0 0.5vh 0;
	font: 700 1.6rem "mono-bold";
  	color: var(--blau);
}

section.fenster_youtube .inhalt .einband article h4 {
	width: 100%;
	height: auto;
	margin: 0 0 0 0;
	padding: 0.5vh 0 0.8vh 0;
	font: 700 1.5rem "mono-bold";
  	color: var(--blau);
}

section.fenster_youtube .inhalt .einband article ul{
	width: 100%;
	height: auto;
	margin: 0 0 0 0;
	padding: 0 0 2vh 20px;
	
}

section.fenster_youtube .inhalt .einband article ul li{
	font: 400 1rem "mono-regular";
	line-height: 1.4rem;
  	color: var(--mittelblau);
}


/* ######################################################################################################################### */
/* Kontaktfenster */

.fenster_kontakt {
	grid-column: 2 / 9;
	box-sizing: border-box;
	width: 100%;
	/*height: calc(100% - 20px);*/
	max-height: 80vh;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--blau);
	border-radius: 8px 8px 0 0;
	box-shadow: 0 8px 30px rgba(0,0,0,0.25);
	transition: opacity 0.2s ease;
	border-left: solid 3px var(--blau);
	border-right: solid 3px var(--blau);
	border-bottom: solid 3px var(--schwarzgrau);
}

.fenster_kontakt .inhalt {
	box-sizing: border-box;
    width: 100%;
    min-height: 0;
	
    overflow-y: auto;
    overflow-x: hidden;
}

.fenster_kontakt .inhalt article {
	box-sizing: border-box;
    width: 100%;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
	padding: 20px 20% 20px 20px;
	background: var(--grundbeige);
	border-top: 0px solid var(--mittelgrau);
    border-right: 2px solid var(--mittelgrau);
    border-bottom: 0px solid var(--grundbeige);
    border-left: 2px solid var(--mittelgrau);
}



/* ######################################################################################################################### */
/* Kontakt */
/* ######################################################################################################################### */



.fenster_kontakt .inhalt article .nf-form-title h3{
	width: 100%;
    height: auto;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    font: 400 2.4rem "silk";
	line-height: 2.5rem;
    color: var(--dunkelgrau);
}

form div nf-fields-wrap {
	display: grid;
	grid-template-columns: repeat(2,1fr);
	gap: 1rem;
}

.nf-field-label {
	color: var(--dunkelgrau);
    font: 400 1rem "cofo";
    letter-spacing: 1px;
	
}

form div nf-fields-wrap nf-field:nth-of-type(5),
form div nf-fields-wrap nf-field:nth-of-type(6){
	grid-column: 1 / -1;
}


#ninja_forms_required_items, .nf-field-container {
    clear: both;
    position: relative;
    margin-bottom: 0!important;
}

.nf-form-fields-required {
	box-sizing: border-box;
	width: 100%;
	height: auto;
	margin: 0 0 30px 0;
	padding: 0 0 0 0;
	text-align: left;
	color: var(--dunkelgrau);
    font: 400 0.9rem "cofo";
    letter-spacing: 1px;
	
}

.nf-form-content .list-select-wrap .nf-field-element>div, .nf-form-content input:not([type=button]), .nf-form-content textarea {
    width: 100%;
    height: auto;
	min-height: 50px;
    margin: 0 0 0 0;
    padding: 0 0 0 2%;
    color: var(--weiss);
    font: 400 0.9rem "cofo";
    letter-spacing: 1px;
    background: var(--weiss)!important;
	border-top: solid 2px var(--mittelgrau);
	border-right: solid 2px var(--mittelgrau);
	border-bottom: solid 2px var(--dunkelgrau);
	border-left: solid 2px var(--mittelgrau);
	border-radius: 4px;
    
}

.nf-form-content textarea {
	padding: 10px 0 0 2%;
}


.nf-form-content .list-select-wrap .nf-field-element>div::-webkit-input-placeholder,
.nf-form-content input:not([type=button])::-webkit-input-placeholder,
.nf-form-content textarea::-webkit-input-placeholder {
	
}

.nf-form-content .listselect-wrap .nf-field-element div, .nf-form-content input.ninja-forms-field, .nf-form-content select.ninja-forms-field:not([multiple]) {
	font: 400 1.1rem "cofo";
    letter-spacing: 1px;
	color: var(--blau);
}


.nf-form-content textarea.ninja-forms-field {
    font: 400 1.1rem "cofo";
    letter-spacing: 1px;
	color: var(--blau);
}

.checkbox-container.label-right .field-wrap {
	display: flex;
	justify-content:flex-start;
	flex-wrap:wrap;
}

/*
label#nf-label-field-12 {
    font: 400 1.1rem "cofo";
    letter-spacing: 1px;
    color: var(--mittelgrau);
}

label#nf-label-field-12 a {
    font: 400 1.1rem "cofo";
    letter-spacing: 1px;
    color: var(--dunkelgrau);
}

label#nf-label-field-12 a:hover {
    color: var(--orange);
}
*/

.label-right .nf-field-label {
	width: 88% !important;
}

.label-right .nf-field-description {
	width: 100%;
    margin: 5px 0 0 0 !important;
	font: 400 0.9rem "cofo";
    letter-spacing: 1px;
    color: var(--mittelgrau);
}

.label-right .nf-field-description p {
	font: 400 0.9rem "cofo";
    letter-spacing: 1px;
    color: var(--mittelgrau);
}

.label-right .nf-field-description a{
    margin: 0 0 0 0 !important;
	font: 400 0.9rem "cofo";
    letter-spacing: 1px;
    color: var(--dunkelgrau)!important;
}

.label-right .nf-field-description a:hover{
	font: 400 0.9rem "cofo";
    letter-spacing: 1px;
    margin: 0 0 0 0 !important;
	color: var(--orange)!important;
}


.nf-error-msg, .ninja-forms-req-symbol {
	margin: 0 0 20px 0;
    color: var(--orange) !important;
	font: 400 1.1rem "cofo";
    letter-spacing: 1px;
}

.nf-error .nf-error-msg {
	font: 400 0.9rem "cofo";
    letter-spacing: 1px;
    color: var(--orange) !important;
	border-radius: 4px !important;
}
.nf-form-content button, .nf-form-content input[type=button], .nf-form-content input[type=submit] {
    width: 100% !important;
    height: auto;
    margin: 25px 0 10px 0 !important;
    padding: 7px 0 8px 0 !important;
    cursor: pointer;
	align-items: center;
	color: var(--weiss);
    font: 400 1.2rem "cofo";
	letter-spacing: 1px;
	text-shadow: -1px 1px 3px rgb(0 0 0 / 40%);
	text-decoration: none;
	border-radius: 6px;
	background:linear-gradient(to bottom, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0) 30%), linear-gradient(to bottom, var(--lichtblau) 0%, var(--hellblau) 60%, var(--blau) 100%) !important;
	box-shadow:
		inset 0 2px 0 rgba(255,255,255,0.6),
		inset 0 -2px 0 rgba(0,0,0,0.25),
		0 2px 4px rgba(0,0,0,0.3) !important;
	transition: all 0.15s ease;
	border: solid 0px var(--weiss);
}

.nf-form-content button:hover, .nf-form-content input[type=button]:hover, .nf-form-content input[type=submit]:hover {
	cursor: pointer;
	background:
		linear-gradient(
			to bottom,
			rgba(255,255,255,0.10) 0%,
			rgba(255,255,255,0.03) 35%,
			rgba(0,0,0,0.08) 100%
		),
		linear-gradient(
			to bottom,
			var(--mittelblau) 0%,
			var(--blau) 100%
		) !important;

		box-shadow:
	inset 0 2px 6px rgba(0,0,0,0.35),
	inset 1px 1px 0 rgba(0,0,0,0.20),
	inset -1px -1px 0 rgba(255,255,255,0.08) !important;
}

.nf-form-content button:active, .nf-form-content input[type=button]:active, .nf-form-content input[type=submit]:active {
	transform: none;
	box-shadow:
		inset 0 2px 6px rgba(0,0,0,0.35),
		inset 1px 1px 0 rgba(0,0,0,0.20),
		inset -1px -1px 0 rgba(255,255,255,0.08) !important;
}


/* ######################################################################################################################### */
/* Footer */
/* ######################################################################################################################### */

footer {
	box-sizing: border-box;
	height: auto;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	flex-shrink: 0;
	display: grid;
	grid-template-columns: repeat(12, 1fr);
    gap: 0rem 0rem;
    justify-content: space-around;
	background: linear-gradient(to top, var(--blau) 0%, var(--mittelblau) 70%, var(--hellblau) 95%, var(--hellblau) 100%);
	color: white;
	border-top: 1px solid rgba(255,255,255,0.6);
}

footer nav.brotspur {
	box-sizing: border-box;
	grid-column: span 11;
	padding: 2px 0 4px 20px;
	border-right:solid 4px var(--mittelblau);
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap:5px;
}


footer nav.brotspur a.start {
	align-items: center;
	padding: 6px 16px 6px 12px;
	color: var(--weiss);
    font: 400 1.3rem "cofo";
	letter-spacing: 1px;
	text-shadow: -1px 1px 3px rgb(0 0 0 / 40%);
	text-decoration: none;
	border-radius: 6px;
	background:linear-gradient(to bottom, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 35%),
		linear-gradient(to bottom, #af3f7f 0%, #93346a 50%, #7e2a57 100%);
	box-shadow:
		inset 0 2px 0 rgba(255,255,255,0.6),
		inset 0 -2px 0 rgba(0,0,0,0.25),
		0 2px 4px rgba(0,0,0,0.3);
	transition: all 0.15s ease;
}

footer nav.brotspur a.tab {
	display: flex;
	align-items: center;
	padding: 6px 16px 6px 12px;
	color: var(--weiss);
	font: 400 1.3rem "cofo";
	letter-spacing: 1px;
	text-shadow: -1px 1px 2px rgb(0 0 0 / 35%);
	text-decoration: none;
	border-radius: 6px;

	background:
		linear-gradient(
			to bottom,
			rgba(255,255,255,0.10) 0%,
			rgba(255,255,255,0.03) 35%,
			rgba(0,0,0,0.08) 100%
		),
		linear-gradient(
			to bottom,
			var(--mittelblau) 0%,
			var(--blau) 100%
		);

		box-shadow:
	inset 0 2px 6px rgba(0,0,0,0.35),
	inset 1px 1px 0 rgba(0,0,0,0.20),
	inset -1px -1px 0 rgba(255,255,255,0.08);
	border: 1px solid rgba(0,0,0,0.25);
	transition: all 0.15s ease;
}


footer nav.brotspur a.tab:nth-of-type(2){
	background:
    linear-gradient(
      to bottom,
      rgba(255,255,255,0.25) 0%,
      rgba(255,255,255,0.08) 30%,
      rgba(0,0,0,0.15) 100%
    ),
    linear-gradient(
      to bottom,
      var(--hellblau) 0%,
      var(--lichtblau) 50%,
      var(--mittelblau) 100%
    );

  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,0.25),
    inset -1px -1px 0 rgba(0,0,0,0.25),
    inset 0 2px 6px rgba(0,0,0,0.2);
}

footer nav.brotspur a.tab:last-of-type {
	
}



footer nav.brotspur a.start:hover,
footer nav.brotspur a.tab:hover {
	background:linear-gradient(to bottom, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0) 30%), linear-gradient(to bottom, var(--lichtblau) 0%, var(--hellblau) 60%, var(--blau) 100%); 
	box-shadow: inset 0 2px 0 rgba(255,255,255,0.6), inset 0 -2px 0 rgba(0,0,0,0.25), 0 2px 4px rgba(0,0,0,0.3);
}

footer nav.brotspur a.start:active,
footer nav.brotspur a.tab:active {
	transform: none;
	box-shadow:
		inset 0 2px 6px rgba(0,0,0,0.35),
		inset 1px 1px 0 rgba(0,0,0,0.20),
		inset -1px -1px 0 rgba(255,255,255,0.08);
}

footer div.uhrzeit {
	grid-column: span 1;
	background: linear-gradient(to bottom, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0) 30%),
		linear-gradient(to bottom, var(--turkis) 0%, var(--turkis) 60%, var(--hellblau) 100%);
	height: 42px;
	border-left:solid 4px var(--turkis);
	font: 400 1.3rem "cofo";
	text-align: center;
	align-content: center;
	letter-spacing: 1px;
	text-shadow: -1px 1px 3px rgb(0 0 0 / 40%); 
	cursor: default;
}


/* ######################################################################################################################### */
/* Media */
/* ######################################################################################################################### */

@media only screen and (max-width: 1600px) {
	
	.fenster_klein {
		grid-column: 1 / -1;
	}
	
}





/* ###################################################################################################################### 1400 */

@media only screen and (max-width: 1400px) {
	
	section.fenster_explorer .inhalt article {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 4rem 2rem;
	}

	section.fenster_beitrag .inhalt aside {
		display: none;
	}

	section.fenster_beitrag .inhalt .beitragsbild {
		grid-column: span 4;
		min-height: unset;
    	height: 350px;
	}

	section.fenster_beitrag .inhalt article {
		grid-column: span 4;
		min-height: unset;
    	overflow-y: unset;
    	overflow-x: unset;
	}

	section.fenster_uebermich .inhalt aside,
	section.fenster_uebermich .inhalt .stapel {
		grid-column: 1 / -1;
	}
	section.fenster_uebermich .inhalt .stapel {
		padding: 2vh 20px 1vh 20px;
		min-height: unset;
    	overflow-y: unset;
    	overflow-x: unset;
	}
	

	section.fenster_uebermich .inhalt aside {
		display: grid;
    	grid-template-columns: repeat(3, 1fr);
    	gap: 0rem 2rem;
    	justify-content: space-around;
	}

	section.fenster_uebermich .inhalt aside .beitragsbild {
		grid-column: span 1;
		height: 350px
	}

	section.fenster_uebermich .inhalt aside .fakten {
		grid-column: span 2;
	}
}


/* ###################################################################################################################### 1200 */


@media only screen and (max-width: 1200px) {
	

	nav.menu-hauptnavigation-container ul,
	nav.menu-footernavigation-container ul {
		width: 60px;
		height: auto;
		margin: 0;
		padding: 0;
		display: grid;
		grid-template-columns: 1fr;
		gap: 20px 0rem;
	}

	nav.menu-hauptnavigation-container ul li,
	nav.menu-footernavigation-container ul li {
		list-style-type: none;
		margin: 0;
		padding: 0;
		width: 100%;
		height: auto;
	}

	nav.menu-hauptnavigation-container ul li a,
	nav.menu-footernavigation-container ul li a {
		display: block;
		box-sizing: border-box;
		width: 100%;
		height: auto;
		margin: 0;
		padding: 54px 0 0 0;
		text-align: center;
		font: 400 0.9rem "cofo";
		letter-spacing: 0.5px;
		color: var(--lichtblau);
		text-shadow: -1px 1px 8px rgba(0, 0, 0, 0.3);
		text-decoration: none;
		transition: all ease-in-out 0.5s;
	}
		
	.fenster_klein,
	.fenster_kontakt {
		grid-column: 1 / -1;
	}

	section.fenster_youtube .inhalt {
		box-sizing: border-box;
		width: 100%;
		height: 100%;
		min-height: 0;
		overflow-y: auto;
		overflow-x: hidden;
	}

	section.fenster_youtube .inhalt .einband article h2 {
		font: 400 2.4rem "silk";
    	line-height: 2.4rem;
	}

	section.fenster_youtube .inhalt .einband {
		grid-column: 1 / -1;
		min-height: unset;
    	overflow-y: unset;
    	overflow-x: unset;
	}

	section.fenster_youtube .inhalt aside {
		grid-column: 1 / -1;
		min-height: unset;
    	overflow-y: unset;
    	overflow-x: unset;
		padding: 1.5vh 20px 1vh 20px;
		display: grid;
    	grid-template-columns: repeat(3, 1fr);
    	gap: 0rem 2rem;
    	justify-content: space-around;
	}

	section.fenster_youtube .inhalt .einband article {
		padding: 2vh 20px 2vh 20px;
	}

	.breadcrompleiste {
		border-bottom: 2px solid var(--mittelgrau);
	}

	section.fenster_explorer .inhalt aside {
		grid-column: span 6;
		min-height: unset;
    	overflow-y: unset;
    	overflow-x: unset;
		order:2;
	}

	section.fenster_explorer .inhalt article {
		box-sizing: border-box;
		grid-column: span 6;
		min-height: unset;
    	overflow-y: unset;
    	overflow-x: unset;
		order:1;
		padding: 2vh 20px 100px 20px;
		border-top: 0px solid var(--mittelgrau);
	}

	section.fenster_explorer .inhalt aside nav ul {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
    	gap: 0rem 2rem;
    	justify-content: space-around;
	}
	
	section.fenster_explorer .inhalt aside nav ul li ul {
		display: grid;
		grid-template-columns: repeat(1, 1fr);
    	gap: 0rem 2rem;
    	justify-content: space-around;
	}

	footer nav.brotspur a.langtab {
		display: block;
		width: 200px;
		min-width: 0;
		white-space: nowrap;
  		overflow: hidden;
  		text-overflow: ellipsis;
	}
}

/* ###################################################################################################################### 1000 */

@media only screen and (max-width: 1000px) {
	
	aside.hauptnavigation,
	aside.footernavigation {
		display: none;
	}

	main {
		grid-column: 1 / -1;
	}

	section.fenster_uebermich .inhalt aside .beitragsbild {
		height: 300px
	}

	.breadcrompleiste nav {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
}




/* ###################################################################################################################### 900 */

@media only screen and (max-width: 900px) {

	.desktop-workspace .hauptgrid main h1 {
		font: 400 2.5rem 'Raleway', sans-serif;
   	 	line-height: 3rem;
		margin: 1.5vh 0 2vh 0;
	}
	
	section.fenster_start .partnerlogos {
		grid-template-columns: repeat(4, 1fr);
	}

	section.fenster_start .partnerlogos h2 {
		font: 400 1.6rem "silk";
	}

	section.fenster_start article h2 {
		font: 400 2rem "silk";
		line-height: 2.2rem;
	}

	section.fenster_youtube .inhalt aside {
    	grid-template-columns: repeat(2, 1fr);
    	gap: 0rem 2rem;
	}

	section.fenster_beitrag .inhalt article h2 {
		font: 400 2.8rem "silk";
		line-height: 3rem;
	}

	.style-switch-nav {
		width: 35%;
	}
}

/* ###################################################################################################################### 700 */

@media only screen and (max-width: 700px){
	
	.desktop-workspace .hauptgrid main h1 {
		font: 400 2rem 'Raleway', sans-serif;
   	 	line-height: 2.5rem;
		margin: 1vh 0 1.5vh 0;
	}


	.fenster_klein, 
	.fenster_gross {
        max-height: 87vh;
    }

	section header h2 {
		font: 400 1.2rem "cofo";
		min-width: 0;
		white-space: nowrap;
  		overflow: hidden;
  		text-overflow: ellipsis;
	}

	.menuleiste .logobutton {
		display: none;
	}

	[class^="fenster_"] article::-webkit-scrollbar,
	[class^="fenster_"] aside::-webkit-scrollbar,
	[class^="fenster_"] .inhalt::-webkit-scrollbar,
	[class^="fenster_"] .stapel::-webkit-scrollbar{
		width: 18px;	
	}

	.menuleiste nav.primary-nav-leiste {
		box-sizing: border-box;
		width: 100%;
		margin: 0 0 0 0;
		padding: 0 0 0 12px;
		border-bottom: solid 2px var(--mittelgrau);
		border-right: solid 0px var(--mittelgrau);
	}

	section.fenster_start article {
		padding: 20px 20px 20px 20px;
	}

	section.fenster_start article h2 {
		font: 400 1.8rem "silk";
		line-height: 2rem;
	}

	section.fenster_start article p {
		font: 400 0.9rem "mono-regular";
		line-height: 1.1rem;
	}

	section.fenster_start .startkarten {
		grid-template-columns: repeat(2, 1fr);
	}

	section.fenster_start .startkarten aside .textwidget p {
		font: 400 0.80rem "mono-regular";
		line-height: 1.1rem;
	}

	section.fenster_start .partnerlogos {
        grid-template-columns: repeat(3, 1fr);
    }

	section.fenster_start .partnerlogos h2 {
		font: 400 1.5rem "silk";
	}

	footer div.uhrzeit {
		font: 400 1.1rem "cofo";
		padding: 0 6px 0 6px;
	}

	footer nav.brotspur a.start,
	footer nav.brotspur a.tab  {
		padding: 7px 16px 7px 12px;
		font: 400 1.15rem "cofo";
	}

	section.fenster_uebermich .inhalt aside .beitragsbild,
	section.fenster_uebermich .inhalt aside .fakten  {
        grid-column: 1 / -1;
    }

	section.fenster_uebermich .inhalt aside .fakten h2 {
		font: 700 1.75rem "mono-bold";
	}

	section.fenster_uebermich .inhalt aside .fakten ul li {
		margin: 0 0 0.4vh 0;
		font: 400 0.9rem "mono-regular"
	}

	section.fenster_uebermich .inhalt aside .fakten ul li strong {
		font: 700 0.9rem "mono-bold"
	}

	.widget-tab-content article {
		padding: 2vh 30px 4vh 20px;
	}

	.widget-tab-button {
		padding: 0.7rem 0.9rem 0.7rem 0.9rem;
		font: 400 0.8rem "cofo";
	}

	.widget-tab-content article h3 {
		padding: 0 0 0.8vh 0;
		font: 700 1.6rem "mono-bold";
	}

	.widget-tab-content article h4 {
		padding: 0 0 0.4vh 0;
		font: 700 1.25rem "mono-bold";
	}

	.widget-tab-content article p {
		font: 400 0.85rem "mono-regular";
		line-height: 1.3rem;
	}

	.widget-tab-content article p strong {
		font: 700 0.85rem "mono-bold";
	}

	.widget-tab-content article ul li {
		margin: 0 0 0.3vh 0;
		font: 400 0.85rem "mono-regular";
		line-height: 1.25rem;
	}

	section.fenster_ausbilder .inhalt .stapel {
		padding: 2vh 20px 1vh 20px;
	}

	section.fenster_ausbilder .inhalt aside {
		padding: 2vh 20px 2vh 20px;
	}

	section.fenster_ausbilder .inhalt aside p {
		font: 400 0.9rem "mono-regular";
		line-height: 1.3rem;
	}

	section.fenster_ausbilder .inhalt aside h2 {
		padding: 0 0 0.3vh 0;
		font: 700 1.7rem "mono-bold";
		color: var(--grau);
	}

	section.fenster_ausbilder .inhalt aside h3 {
		padding: 0 0 1.3vh 0;
		font: 700 0.95rem "mono-bold";
	}

	section.fenster_youtube .inhalt .einband .beitragsbild {
		height: 250px;
	}

	section.fenster_youtube .inhalt .einband article h2 {
        padding: 0 0 0.5vh 0;
		font: 400 2rem "silk";
    	line-height: 2.1rem;
    }

	section.fenster_youtube .inhalt .einband article h3 {
		width: 100%;
		height: auto;
		margin: 0 0 0 0;
		padding: 0.4vh 0 0.2vh 0;
		font: 700 1.3rem "mono-bold";
		color: var(--blau);
	}

	section.fenster_youtube .inhalt .einband article p {
		font: 400 0.9rem "mono-regular";
		line-height: 1.3rem;
	}

	section.fenster_youtube .inhalt .einband article p strong {
		font: 700 0.9rem "mono-bold";
	}

	section.fenster_youtube .inhalt .einband article ul li {
		font: 400 0.9rem "mono-regular";
		line-height: 1.3rem;
	}

	.fenster_kontakt .inhalt article {
		padding: 20px 20px 20px 20px;
	}

	.fenster_kontakt .inhalt article .nf-form-title h3 {
		font: 400 1.8rem "silk";
	}

	.nf-form-fields-required {
		font: 400 0.8rem "cofo";
	}

	.nf-field-label {
		color: var(--dunkelgrau);
		font: 400 1rem "cofo";
		letter-spacing: 1px;
	}

	.nf-form-content .listselect-wrap .nf-field-element div, 
	.nf-form-content input.ninja-forms-field, 
	.nf-form-content select.ninja-forms-field:not([multiple]),
	.nf-form-content textarea.ninja-forms-field  {
		font: 400 1rem "cofo";
		letter-spacing: 1px;
	}

	.breadcrompleiste {
		padding: 2px 0 3px 0;
	}

	.breadcrompleiste h4 {
		font: 400 1rem "cofo";
	}

	.breadcrompleiste nav {
		padding: 5px 12px 2px 12px;
		font: 400 0.9rem "cofo";
	}

	section.fenster_explorer .inhalt article {
        grid-template-columns: repeat(1, minmax(0, 1fr));
        gap: 2rem 2rem;
    }

	section.fenster_explorer .inhalt aside {
		padding: 40px 20px 1vh 20px;
	}

	section.fenster_explorer .inhalt aside nav ul {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 0rem 2rem;
        justify-content: space-around;
    }

	section.fenster_explorer .inhalt aside nav ul li {
		font: 400 1.2rem "silk";
	}

	footer nav.brotspur a.langtab {
        width: 150px;
	}

	section.fenster_beitrag .inhalt .beitragsbild {
        height: 250px;
	}

	section.fenster_beitrag .inhalt article {
		padding: 20px 40px 50px 20px;
	}

	section.fenster_beitrag .inhalt article h2 {
		padding: 0 0 0.8vh 0;
		font: 400 2rem "silk";
		line-height: 2.1rem;
	}

	section.fenster_beitrag .inhalt article h3 {
		width: 100%;
		height: auto;
		margin: 0 0 0 0;
		padding: 0.4vh 0 0.2vh 0;
		font: 700 1.3rem "mono-bold";
		color: var(--blau);
	}

	section.fenster_beitrag .inhalt article p {
		font: 400 0.9rem "mono-regular";
		line-height: 1.3rem;
	}

	section.fenster_beitrag .inhalt article p strong {
		font: 700 0.9rem "mono-bold";
	}

	section.fenster_beitrag .inhalt article ul li {
		font: 400 0.9rem "mono-regular";
		line-height: 1.3rem;
	}

	section.fenster_standard article p {
		width: 100%;
		height: auto;
		margin: 0 0 0 0;
		padding: 0 0 20px 0;
		font: 400 0.9rem "mono-regular";
		color: var(--blau);
	}

	section.fenster_standard article h2 {
		padding: 0 0 0.5vh 0;
		font: 700 1.7rem "mono-bold";
	}

	section.fenster_standard article h3 {
		width: 100%;
		height: auto;
		margin: 0 0 0 0;
		padding: 0.4vh 0 0.2vh 0;
		font: 700 1.3rem "mono-bold";
		color: var(--blau);
	}

	section.fenster_standard article ul li {
		font: 400 0.9rem "mono-regular";
		line-height: 1.3rem;
	}

	.style-switch-nav {
		width: 55%;
	}
}


/* ###################################################################################################################### 550 */

@media only screen and (max-width: 550px) {

	.desktop-workspace {
		padding: 10px;
	}

	.desktop-workspace .hauptgrid main h1 {
		font: 400 1.8rem 'Raleway', sans-serif;
   	 	line-height: 2rem;
		margin: 1vh 0 1.2vh 0;
	}

	.fenster_klein, .fenster_gross {
        max-height: 88vh;
    }

	section header h2 {
        font: 400 1.1rem "cofo";
    }

	.menuleiste {
		min-height: 36px;
		height: auto;
		flex-wrap: wrap;
	}

	.menuleiste nav.primary-nav-leiste {
        padding: 0 12px 0 12px;
	}

	.menuleiste nav.primary-nav-leiste ul {
		flex-wrap: wrap;
		padding: 10px 0 10px 0;
	}

	nav.primary-nav-leiste ul li a,
	nav.secondary-nav-leiste ul li a {
		font: 400 0.85rem "cofo";
	}

	section.fenster_start .startkarten {
        grid-template-columns: repeat(1, 1fr);
    }
	
	section.fenster_start .partnerlogos {
        grid-template-columns: repeat(2, 1fr);
    }

	footer div.uhrzeit {
		font: 400 1rem "cofo";
		padding: 0 6px 0 6px;
	}

	footer nav.brotspur a.start,
	footer nav.brotspur a.tab  {
		padding: 8px 14px 8px 10px;
		font: 400 1rem "cofo";
	}

	.widget-tab-content article h3 {
        padding: 0 0 0.8vh 0;
        font: 700 1.4rem "mono-bold";
    }

	section.fenster_youtube .inhalt aside {
    	grid-template-columns: repeat(1, 1fr);
    	gap: 0rem 2rem;
	}

	form div nf-fields-wrap {
		display: grid;
		grid-template-columns: repeat(1, 1fr);
		gap: 1rem;
	}

	footer nav.brotspur a.langtab {
        width: 100px;
	}

	.style-switch-nav {
		font: 400 0.85rem "cofo";
		width: 55%;
	}
}