@font-face {
font-display: swap;
font-family: 'Denk One';
font-style: normal;
font-weight: 400;
src: url('https://www.pfeffenhausen.de/webfonts/denk-one-v15-latin-regular.eot');
src: url('https://www.pfeffenhausen.de/webfonts/denk-one-v15-latin-regular.eot?#iefix') format('embedded-opentype'),
url('https://www.pfeffenhausen.de/webfonts/denk-one-v15-latin-regular.woff2') format('woff2'),
url('https://www.pfeffenhausen.de/webfonts/denk-one-v15-latin-regular.woff') format('woff'),
url('https://www.pfeffenhausen.de/webfonts/denk-one-v15-latin-regular.ttf') format('truetype'), 
url('https://www.pfeffenhausen.de/webfonts/denk-one-v15-latin-regular.svg#DenkOne') format('svg'); 
}

@font-face {
font-display: swap; 
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: 400;
src: url('https://www.pfeffenhausen.de/webfonts/source-sans-pro-v21-latin-regular.eot'); 
src: url('https://www.pfeffenhausen.de/webfonts/source-sans-pro-v21-latin-regular.eot?#iefix') format('embedded-opentype'), 
url('https://www.pfeffenhausen.de/webfonts/source-sans-pro-v21-latin-regular.woff2') format('woff2'),
url('https://www.pfeffenhausen.de/webfonts/source-sans-pro-v21-latin-regular.woff') format('woff'), 
url('https://www.pfeffenhausen.de/webfonts/source-sans-pro-v21-latin-regular.ttf') format('truetype'), 
url('https://www.pfeffenhausen.de/webfonts/source-sans-pro-v21-latin-regular.svg#SourceSansPro') format('svg'); 
}

@font-face {
font-display: swap; 
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: 700;
src: url('https://www.pfeffenhausen.de/webfonts/source-sans-pro-v21-latin-700.eot'); 
src: url('https://www.pfeffenhausen.de/webfonts/source-sans-pro-v21-latin-700.eot?#iefix') format('embedded-opentype'), 
url('https://www.pfeffenhausen.de/webfonts/source-sans-pro-v21-latin-700.woff2') format('woff2'), 
url('https://www.pfeffenhausen.de/webfonts/source-sans-pro-v21-latin-700.woff') format('woff'), 
url('https://www.pfeffenhausen.de/webfonts/source-sans-pro-v21-latin-700.ttf') format('truetype'), 
url('https://www.pfeffenhausen.de/webfonts/source-sans-pro-v21-latin-700.svg#SourceSansPro') format('svg'); 
}

/**************************************************************************************/

:root {
--color-bg: #FFFFFF;
--color-text: #000000;
--color-white: #FFFFFF;
--color-whitesoft: rgba(255,255,255,0.85);
--color-blue: #0D3C60;
--color-bluehighlight: #00528C;
--color-bluesoft: #DBE2E7;
--color-bluesoftlight: #F3F5F7;
--color-orange: #F3953D;
--color-orangesoft: #FEF1E3;
--color-red: #CF3C57;
--color-redsoft: #F8E4E4;
--color-green: #A0C861;
--color-greensoft: #F2F7EA;
--color-yellow: #FFD96F;
--color-yellowsoft: #FFF9EC;
--color-imgsource: #FFFFFF;
--color-greenopen: #009640;
--color-shadow: rgba(0, 0, 0, 0.7);
--color-navisub: rgba(0, 0, 0, 0.1);
}

.dark {
--color-bg: #0D3C60;
--color-text: #EEEEEE;
--color-white: #1E1E1E;
--color-whitesoft: rgba(13, 60, 96, 0.85);
--color-blue: #4DA3FF;
--color-bluehighlight: #61B0FF;
--color-bluesoft: #1A2A3A;
--color-bluesoftlight: #2A3B4C;
--color-orange: #FFAD66;
--color-orangesoft: #4A3A2A;
--color-red: #FF6B81;
--color-redsoft: #3A1F22;
--color-green: #B5E075;
--color-greensoft: #1F2E1F;
--color-yellow: #FFD96F;
--color-yellowsoft: #3A331C;
--color-imgsource: #1E1E1E;
--color-greenopen: #00B56E;
--color-shadow: rgba(0, 0, 0, 0.85);
--color-navisub: rgba(0, 0, 0, 0.3);
}

/**************************************************************************************/

html {
}

body {
margin: 0;
padding: 0;
font-family: 'Source Sans Pro', sans-serif;
font-size: 100%;
line-height: 1.4em;
text-align: center;
color: var(--color-text);
background-color: var(--color-bg);
hyphens: auto;
}

h1, h2, h3, h4 {
font-size: 180%;
line-height: 1.3em;
font-weight: 800;
margin: 0;
padding: 0;
margin-top: 30px;
margin-bottom: 15px;
color: var(--color-blue);
text-align: left;
}

h1.hlstart {
display: none;
}

h2, h3, h4 {
font-size: 130%;
line-height: 1.3em;
}

h2.hlstart {
font-size: 180%;
line-height: 1.3em;
}

h2.hlcenter {
text-align: center;
}

h2.hlstartbild {
font-family: 'Denk One', sans-serif;
text-align: center;
color: var(--color-white);
margin:0;
padding: 0;
font-size: 10.5vw;
line-height: 1.3em;
hyphens: none;
}

body.dark h2.hlstartbild, body.dark h3.hlstartbild {
color: var(--color-blue);
}

h2.hltabnews {
color: var(--color-white);
margin-top: 20px;
margin-bottom: 10px;
}

h2.hltabnews2 {
color: var(--color-white);
margin-top: 20px;
margin-bottom: 0;
}

h2.hlaufgabe {
margin-top: 0;
margin-bottom: 0;
font-size: 100%;
line-height: 1.4em;
color: var(--color-text);
}

h2.hlaside {
margin-top: 0;
margin-bottom: 15px;
}

h2.hltermin {
margin-top: 0;
margin-bottom: 10px;
}

h2.hlbg {
margin-top: 0;
}

h2.hlacc, h3.hlacc {
font-size: 130%;
line-height: 1.3em;
margin-top: 0;
margin-bottom: 0;
}

h2.hlsuche, .hlfootertab {
font-size: 120%;
line-height: 1.4em;
margin: 0;
}

h2.hlfooter {
font-size: 100%;
line-height: 1.4em;
font-weight: normal;
margin-top: 30px;
margin-bottom: 10px;
}

h3.hlstartbild {
font-family: 'Denk One', sans-serif;
text-align: center;
color: var(--color-white);
margin:0;
padding: 0;
transition: .2s ease;
font-size: 5.0vw;
line-height: 1.3em;
hyphens: none;
}

h3.hlstarttermine {
font-size: 100%;
line-height: 1.4em;
font-weight: normal;
margin-top: 0;
margin-bottom: 0;
color: var(--color-text);
display: inline;
}

h3.hlap {
font-size: 130%;
line-height: 1.4em;
margin-top: 0;
margin-bottom: 5px;
}

#hlapmarg {
margin-left: 20px;
}

h3.hlaside {
font-size: 100%;
line-height: 1.4em;
margin-top: 15px;
margin-bottom: 0;
color: var(--color-text);
}

h3.hlasideoeff {
font-size: 100%;
line-height: 1.4em;
margin-top: 15px;
margin-bottom: 10px;
color: var(--color-text);
}

h3.hljobs {
font-size: 100%;
line-height: 1.4em;
margin: 0;
padding: 0;
display: inline;
}

h3.hlthemenlinks {
margin-top: 0;
padding-bottom: 10px;
color: var(--color-text);
font-weight: normal;
border-bottom: 1px solid var(--color-text);
}

a {
color: var(--color-blue);
text-decoration: none;
transition: all .2s ease-out;
font-weight: 700;
}

a:hover {
text-decoration: underline;
}

img {
border: none;
display: block;
}

.imgsize {
max-width: 100%;
height: auto;
}

.imgsizemax {
width: 100%;
height: auto;
}

body.dark img {
filter: brightness(0.9) contrast(1.05);
}

body.dark #logo, body.dark footer img {
filter: invert(1);
}

input, select, textarea {
font-family: 'Source Sans Pro', sans-serif;
font-size: 100%;
color: var(--color-text);
border: 1px solid var(--color-text);
padding: 5px 20px;
box-sizing: border-box;
width: 100%;
margin-bottom: 20px;
background-color: var(--color-bg);
transition: all .2s ease-out;
}

input[type='checkbox'], input[type='radio'] {
padding: 0;
margin: 0;
width: 20px;
cursor: pointer;
}

input:hover, select:hover, textarea:hover {
border: 1px solid var(--color-blue);
color: var(--color-blue);
}

.forminput {
position: relative;
margin-bottom: 20px;
}

label {
position: absolute;
bottom: 100%;
left: 0;
display: block;
font-size: 80%;
}

input:hover + label, select:hover + label, textarea:hover + label  {
color: var(--color-bluehighlight);
}

.button {
font-family: 'Source Sans Pro', sans-serif;
font-size: 100%;
color: var(--color-white);
background-color: var(--color-blue);
padding: 15px 50px;
margin-top: 20px;
margin-bottom: 60px;
width: auto;
cursor: pointer;
transition: all .2s ease-out;
font-weight: bold;
border: none;
}

.button:hover {
opacity: 0.9;
border: none;
color: var(--color-white);
}

ul.liste {
list-style-type: disc;
list-style-position: outside;
padding: 0;
margin-left: 20px;
text-align: left;
}

ul.liste li {
padding-left: 10px;
margin-top: 10px;
}

#clear {
clear: both;
}

table {
border-collapse: collapse;
text-align: left;
width: 100%;
table-layout: auto; 
}

td {
border: none;
vertical-align: top;
padding: 8px 20px 8px 0;
}

td:first-child {
width: max-content;
}

.hidden, .formsubject {
display: none;
}

.wehinweis {
display: none;
}

/**************************************************************************************/

#container {
margin: 0em auto;
width: 90%;
text-align: justify;
}

/**************************************************************************************/

header {
width: 100%;
height: 100px;
background-color: var(--color-bg);
position: fixed;
top: 0;
left: 0;
z-index: 10;
}

header a {
color: var(--color-text);
font-weight: 400;
}

#headerright {
float: right;
line-height: 30px;
text-align: right;
}

header i {
margin-left: 5px;
display: inline;
}

#logo {
width: 148px;
}

.colorswitch {
cursor: pointer;
display: inline;
}

.colorswitch i {
margin-right: 5px;
}

.openheute {
font-weight: bold;
}

.openyes {
font-size: 55%;
line-height: 1.0em;
text-transform: uppercase;
background-color: var(--color-bg);
padding: 2px 4px;
display: inline;
margin-left: 10px;
}

.openyesheader {
display: none;
}

.openno {
font-size: 55%;
line-height: 1.0em;
text-transform: uppercase;
background-color: var(--color-bluesoft);
padding: 2px 4px;
display: inline;
margin-left: 15px;
}

.openyes i, .openyesheader i {
margin-right: 5px;
color: var(--color-greenopen);
}

/**************************************************************************************/

#headersuche {
display: inline-block;
}

.headersuchfeld {
height: 30px;
line-height: 30px;
}

.headersuchfeld i {
padding: 0;
}

.suchfeldinput {
outline: none;
border: none;
width: 120px;
padding: 0 10px;
color: var(--color-blue);
transition: all .2s ease-out;
line-height: 30px;
background-color: var(--color-bluesoft);
}

.suchfeldinput::placeholder {
color: var(--color-blue);
}

.suchfeldbtn {
color: var(--color-text);
text-decoration: none;
transition: all .2s ease-out;
border: none;
cursor: pointer;
line-height: 30px;
padding: 0;
margin: 0;
background-color: var(--color-bg);
}

.suchfeldinput:focus, .suchfeldinput:not(:placeholder-shown), .headersuchfeld:hover > .suchfeldinput {
border: none;
}

.suchbegriff {
background-color: var(--color-bluesoft);
}

.suchesub {
font-size: 80%;
opacity: 0.6;
}

.suchetext {
margin-top: 10px;
}

/**************************************************************************************/

nav * {
margin: 0;
padding: 0;
}

nav button {
all: unset;
}

nav {
background-color: var(--color-bg);
color: var(--color-text);
text-align: left;
}

nav a {
color: var(--color-text);
text-decoration: none;
display: block;
padding: 0 15px;
box-sizing: border-box;
}

nav a:hover {
text-decoration: none;
}

.hlnavi {
display: none;
}

.nav-container {
height: 70px;
display: flex;
justify-content: space-between;
align-items: center;
}

.menu-toggle {
display: none;
}

ul.nav {
display: flex;
}

ul.nav, .submenu, .submenu .submenu {
list-style: none;
margin: 0;
padding: 0;
}

ul.nav > li > button, ul.nav > li > a {
background: none;
border: none;
cursor: pointer;
color: var(--color-text);
text-decoration: none;
display: block;
padding: 0 15px;
box-sizing: border-box;
line-height: 70px;
}

.submenu {
display: none;
position: absolute;
top: 100px;
left: 0;
padding: 25px 20px;
box-sizing: border-box;
display: flex;
width: 100%;
height: calc(100vh - 100px);
justify-content: space-between;
z-index: 1000;
opacity: 0;
visibility: hidden;
}

#submenu1 {
background-color: var(--color-bluesoft);
}

#submenu2 {
background-color: var(--color-orangesoft);
}

#submenu3 {
background-color: var(--color-redsoft);
}

#submenu4 {
background-color: var(--color-greensoft);
}

#submenu5 {
background-color: var(--color-yellowsoft);
}

.submenu li {
position: relative;
border-top: 1px solid var(--color-text);
}

.submenu li:first-child {
border-top: none;
}

.submenu li a, .submenu li button {
background: none;
border: none;
cursor: pointer;
margin: 0;
line-height: 2.8em;
position: relative;
width: 100%;
}

.submenu li button::after {
content: "\f0da";
font-family: "Font Awesome 6 Free";
font-weight: 900;
line-height: 2.8em;
top: 0;
right: 3%;
position: absolute;
}

.submenu .submenu {
left: 100%;
top: 0;
background-color: var(--color-navisub);
height: auto;
}

.submenu .submenu li {
width: 100%;
}

.navimarker {
display: inline-block;
width: 4px;
height: 1.6em;
margin-right: 5px;
vertical-align: -0.5em;
}

.navimarker1 {
background-color: var(--color-blue);
}

.navimarker2 {
background-color: var(--color-orange);
}

.navimarker3 {
background-color: var(--color-red);
}

.navimarker4 {
background-color: var(--color-green);
}

.navimarker5 {
background-color: var(--color-yellow);
}

ul.nav li button:focus-visible, ul.nav li a:focus-visible, .submenu li a:focus-visible, .submenu li button:focus-visible, .menu-toggle:focus-visible {
outline: 2px solid currentColor;
}

ul.nav li button:focus:not(:focus-visible), ul.nav li a:focus:not(:focus-visible), .submenu li a:focus:not(:focus-visible), .submenu li button:focus:not(:focus-visible), .menu-toggle:focus:not(:focus-visible) {
outline: none;
}

@media (min-width: 1300px) {
/**********************************************/

.hlnavi {
display: block;
font-size: 160%;
line-height: 1.3em;
}

.hlnavi i {
display: block;
color: var(--color-white);
margin-top: 30px;
font-size: 400%;
}

ul.nav > li > button:hover, ul.nav > li > a:hover, #rathaus ul.nav > li > .navi01, #nachrichten ul.nav > li > .navi02, #bildung ul.nav > li > .navi03, #freizeit ul.nav > li > .navi04, #wirtschaft ul.nav > li > .navi05 {
color: var(--color-white);
}

ul.nav > li > .navi01:hover, #rathaus ul.nav > li > .navi01, #submenu1 li a:hover, #submenu1 li:hover button {
background-color: var(--color-blue);
}

ul.nav > li > .navi02:hover, #nachrichten ul.nav > li > .navi02, #submenu2 li a:hover, #submenu2 li:hover button {
background-color: var(--color-orange);
}

ul.nav > li > .navi03:hover, #bildung ul.nav > li > .navi03, #submenu3 li a:hover, #submenu3 li:hover button {
background-color: var(--color-red);
}

ul.nav > li > .navi04:hover, #freizeit ul.nav > li > .navi04, #submenu4 li a:hover, #submenu4 li:hover button {
background-color: var(--color-green);
}

ul.nav > li > .navi05:hover, #wirtschaft ul.nav > li > .navi05, #submenu5 li a:hover, #submenu5 li:hover button {
background-color: var(--color-yellow);
}

ul.nav > li > button:hover .navimarker, #rathaus ul.nav > li > .navi01 .navimarker, #nachrichten ul.nav > li > .navi02 .navimarker, #bildung ul.nav > li > .navi03 .navimarker, #freizeit ul.nav > li > .navi04 .navimarker, #wirtschaft ul.nav > li > .navi05 .navimarker {
background-color: var(--color-white);
}

.hlnavi01 {
color: var(--color-blue);
}

.hlnavi02 {
color: var(--color-orange);
}

.hlnavi03 {
color: var(--color-red);
}

.hlnavi04 {
color: var(--color-green);
}

.hlnavi05 {
color: var(--color-yellow);
}

li:hover > .submenu, li:focus-within > .submenu, li.open > .submenu {
display: block;
opacity: 1;
visibility: visible;
}

.submenu li {
width: 50%;
}

.submenu li a:hover, #submenu1 li:hover button, #submenu2 li:hover button, #submenu3 li:hover button, #submenu4 li:hover button, #submenu5 li:hover button {
color: var(--color-white);
}

/**********************************************/
}

@media (max-width: 768px) {
/**********************************************/

.submenu {
margin-top: -40px;
}

/**********************************************/
}

@media (max-width: 1299px) {
/**********************************************/

.menu-toggle {
display: block;
color: var(--color-text);
cursor: pointer;
position: absolute;
top: 25px;
right: 5%;
height: 70px;
padding-left: 15px;
}

.nav-container {
width: 100%;
height: auto;
display: block;
position: absolute;
top: 0;
left: 0;
background-color: var(--color-bg);
}

ul.nav {
flex-direction: column;
display: none;
height: calc(100vh - 50px);
width: 90%;
margin-top: 50px;
margin-left: 5%;
overflow-y: auto;
}

ul.nav.open {
display: flex;
}

ul.nav li {
border-top: 1px solid var(--color-text);
}

ul.nav li:first-child {
border-top: none;
}

ul.nav > li > button, ul.nav > li > a {
padding: 0;
width: 100%;
line-height: 50px;
}

.submenu {
position: static;
display: none;
opacity: 1;
visibility: visible;
padding: 0;
height: auto;
}

.submenu.open {
display: block;
}

.submenu #tabzweierwide {
grid-template-columns: 1fr;
gap: 0;
}

.submenu #tabzweierwideeinzel {
margin-top: 0;
}

.submenu li {
width: 90%;
margin-left: 5%;
}

.submenu .submenu li {
width: 90%;
}

.navimarker {
padding: 3px 0;
margin-right: 15px;
}

/**********************************************/
}

/**************************************************************************************/

ul.naviaside {
list-style-type: none;
padding: 0;
margin: 0;
}

ul.naviaside a {
font-weight: 400;
}

ul.naviaside li {
padding: 5px 0 3px 0;
margin-top: 4px;
border-top: 1px solid var(--color-white);
}

ul.naviaside li:first-child {
margin-top: 0;
border-top: none;
}

ul.naviaside ul {
list-style-type: none;
padding: 0;
margin: 3px 0 2px 25px;
}

.asidenavititel {
text-transform: uppercase;
margin-bottom: 15px;
color: var(--color-blue);
font-size: 75%;
}

.asidenavititellast {
margin-bottom: 0;
}

#tabasidecontent li.asidenaviactive a {
font-weight: 700;
}

#tabasidecontent li.asidenaviactive ul li a {
font-weight: 400;
}

#asidelinks {
display: none;
}

#kontaktlinks i {
margin-right: 10px;
}

/**************************************************************************************/

#sucheeinzel {
border-top: 1px solid var(--color-text);
padding: 20px 0;
}

#sucheeinzel:first-child {
border-top: none;
}

#sucheeinzel a {
display: block;
font-weight: 400;
}

#sucheeinzel a:hover {
text-decoration: none;
}

/**************************************************************************************/

#hinweis {
z-index: 5;
position: fixed;
top: 120px;
right: 20px;
background-color: var(--color-blue);
padding: 10px 20px;
box-sizing: border-box;
color: var(--color-white);
font-weight: bold;
max-width: 45%;
box-shadow: 0px 0px 10px var(--color-shadow);
}

#hinweisclose {
position: absolute;
top: 1px;
right: 0;
}

#hinweisclose a {
cursor: pointer;
color: var(--color-white);
padding: 5px 10px;
box-sizing: border-box;
}

/**************************************************************************************/

#startbild {
width: 100%;
height: calc(70vh - 100px);
position: relative;
z-index: 1;
}

.imgcover {
width: 100%;
height: 100%;
object-fit: cover;
}

img[data-object-fit="cover"] {
object-fit: cover;
}

#startbildlayer {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
}

#startbildcontent {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-shadow: 0px 0px 15px var(--color-shadow);
}

#startbildbuttons {
display: block;
position: absolute;
left: 0;
right: 0;
margin: auto;
bottom: 1vh;
z-index: 10;
}

#startbildbuttonseinzel {
width: 100px;
height: 100px;
line-height: 100px;
background-color: var(--color-bluesoft);
color: var(--color-blue);
margin: 0 5px;
padding: 10px;
box-sizing: border-box;
display: inline-block;
transition: all .2s ease-out;
hyphens: auto;
}

#startbildbuttonseinzel:hover {
background-color: var(--color-blue);
color: var(--color-white);
}

#startbildbuttonseinzelcontent {
display: inline-block;
vertical-align: middle;
font-size: 90%;
line-height: 1.1em;
}

#startbildbuttonseinzel i {
display: block;
font-size: 6.0vw;
margin-bottom: 10px;
margin-top: -15px;
}

/**************************************************************************************/

#headerbild {
margin-top: 100px;
}

.headerbild {
display: none;
}

#headerbildimg {
position: relative;
z-index: 1;
}

#headerbildimghalf {
position: relative;
z-index: 1;
width: 50%;
margin-left: auto;
margin-right: auto;
}

#headerbildquelle {
position: absolute;
bottom: 5px;
right: 5px;
font-size: 60%;
line-height: 1.0em;
color: var(--color-imgsource);
}

.newsbildbg {
background-color: var(--color-blue);
color: var(--color-white);
transition: all .2s ease-out;
text-align: left;
}

.newsbildbg:hover {
text-decoration: none;
opacity: 0.9;
}

.newsbildbg a {
color: var(--color-white);
}

.newsbildbg a:hover {
text-decoration: none;
}

#newsbildcontent {
padding: 30px;
box-sizing: border-box;
}

.newsbilddate {
float: right;
}

.newsbildkat {
border-bottom: 1px solid var(--color-white);
padding-bottom: 10px;
}

.newsmarker {
background-color: var(--color-white);
margin-right: 5px;
}

.newsmarker2 {
background-color: var(--color-blue);
}

.newsmarker3 {
background-color: var(--color-orange);
}

.newsmarker4 {
background-color: var(--color-red);
}

.newsmarker5 {
background-color: var(--color-green);
}

.newsmarker6 {
background-color: var(--color-yellow);
}

#newsdatum {
border-top: 1px solid var(--color-blue);
margin-top: 25px;
padding-top: 20px;
}

#newsshare i {
margin-right: 5px;
font-size: 110%;
line-height: 1.4em;
}

/**************************************************************************************/

.atermine {
font-weight: normal;
color: var(--color-text);
text-align: left;
}

.atermine:hover {
text-decoration: none;
}

#termineinzel {
padding: 15px 20px;
background-color: var(--color-bluesoftlight);
transition: all .2s ease-out;
margin-bottom: 10px;
}

#termineinzel:hover {
background-color: var(--color-bluesoft);
}

#termineinzel a:hover img {
transition: .2s ease;
}

#termineinzel a:hover img {
opacity: 0.85;
}

#termindatum {
float: left;
text-align: center;
font-size: 155%;
line-height: 1.0em;
width: 50px;
padding-top: 2px;
text-transform: uppercase;
}

#termindatumsmall {
font-size: 52%;
line-height: 1.0em;
padding: 5px 0 3px 0;
}

#termincontent {
margin-left: 70px;
text-align: left;
}

a #termincontent {
font-weight: normal;
}

.br {
white-space: pre-line;
}

.export {
float: right;
}

.export a {
color: var(--color-text);
}

.export a:hover {
color: var(--color-blue);
}

/**************************************************************************************/

.margtop {
margin-top: 80px;
}

.margtop2 {
margin-top: 40px;
}

.margtop3 {
margin-top: 10px;
}

#btn {
margin-top: 30px;
text-align: center;
}

.btn {
display: inline-block;
background-color: var(--color-blue);
padding: 15px 50px;
text-decoration: none;
transition: all .2s ease-out;
color: var(--color-white);
}

.btn i {
font-weight: bold;
margin-left: 10px;
transition: all 0.3s ease;
position: relative;
right: 0;
}

.btn:hover {
text-decoration: none;
opacity: 0.9;
}

.btn:hover i {
right: -5px;
}

.btnfilter {
display: inline-block;
border: 1px solid var(--color-white);
margin-right: 5px;
padding: 5px 8px;
text-decoration: none;
transition: all 0.3s ease;
color: var(--color-blue);
cursor: pointer;
background-color: var(--color-bg);
font-size: 100%;
}

.btnfilteractive {
border: 1px solid var(--color-blue);
}

.imgborder {
border: 1px solid var(--color-blue);
}

#video {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
z-index: 1;
}

#video iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

video {
width: 100% !important;
height: auto !important;
}

#maps {
width: 100%;
height: 300px;
}

.googlemaps {
position: relative;
0height: 0;
overflow: hidden;
height: 300px;
}

.googlemaps iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

/**************************************************************************************/

#themenlinkscontent {
background-color: var(--color-whitesoft);
padding: 30px;
margin-left: 40%;
box-sizing: border-box;
text-align: left;
height: 100%;
}

.ulthemenlinks {
margin: 0;
padding: 0;
}

.ulthemenlinks li {
list-style-type: none;
margin-top: 10px;
}

#aufgabeheader {
font-weight: bold;
padding: 10px;
box-sizing: border-box;
background-color: var(--color-bluesoft);
}

#aufgabeeinzel {
border-top: 1px solid var(--color-text);
padding: 10px;
box-sizing: border-box;
}

#aufgabeeinzel a {
font-weight: 400;
}

#aufgabeeinzel h2.hlaufgabe a {
font-weight: 700;
}

.suchfeldinputaufgaben {
font-family: 'Source Sans Pro', sans-serif;
outline: none;
border: none;
width: 100%;
color: var(--color-blue);
transition: all .2s ease-out;
padding: 10px 20px;
background-color: var(--color-bluesoft);
font-size: 100%;
box-sizing: border-box;
}

/**************************************************************************************/

.acc-content {
max-height: 0px;
overflow: hidden;
transition: all 0.2s ease-out;
}

.acc-title {
cursor: pointer;
display: block;
position: relative;
transition: all .2s ease-out;
padding: 12px 5%;
box-sizing: border-box;
border: 1px solid var(--color-blue);
margin-top: 15px;
}

.acc-input:checked + .acc-title, .acc-title:hover {
background-color: var(--color-blue);
}

.acc-input:checked + .acc-title h2, .acc-title:hover h2, .acc-input:checked + .acc-title h3, .acc-title:hover h3 {
color: var(--color-white);
}

.acc-input:checked + .acc-title + .acc-content {
max-height: 100%;
padding-top: 20px;
padding-bottom: 60px;
}

input.acc-input[type="checkbox"] {
display: none;
}

/**************************************************************************************/

#tabzeiten {
display: grid;
grid-template-columns: auto 1fr;
gap: 5px 40px;
}

#tabzweierwide > div:nth-child(2n + 2) {
margin-top: 40px;
}

#tabdreier, #tabdreierweiterenews {
display: grid;
grid-template-columns: 1fr;
gap: 35px;
}

#aufgabeheader #tabdreier, #aufgabeeinzel #tabdreier {
gap: 0;
}

#tabtermine {
display: grid;
grid-template-columns: 1fr 4fr;
border-left: 1px solid var(--color-text);
padding: 15px 10px;
box-sizing: border-box;
}

#tabterminerathaus {
display: grid;
grid-template-columns: 1fr 4fr;
border-left: 5px solid var(--color-blue);
padding: 15px 10px;
box-sizing: border-box;
background-color: var(--color-bluesoft);
}

#tabtermineaside {
display: grid;
grid-template-columns: 1fr 4fr;
padding: 15px 10px;
box-sizing: border-box;
}

#tabtermine > div:nth-child(1), #tabterminerathaus > div:nth-child(1) {
text-align: center;
text-transform: uppercase;
}

#tabdreierweiterenews > div:nth-child(3n + 4) {
display: none;
}

.termineday {
font-size: 180%;
margin-top: 5px;
margin-bottom: 5px;
}

#tabaside {
display: grid;
gap: 10px;
align-items: start;
grid-template-columns: 1fr;
}

#tabasidemain {
overflow: hidden;
}

#tabasidemain *:not(.owl-carousel):not(.owl-carousel *) {
max-width: 100%;
box-sizing: border-box;
overflow-wrap: break-word;
}

#tabasideleft {
display: none;
}

#tabasidecontent {
background-color: var(--color-bluesoft);
margin-top: 20px;
padding: 15px 5%;
text-align: left;
}

#tabasidecontent i {
color: var(--color-blue);
}

#tabasidecontent a {
font-weight: 400;
}

#tabasidecontent #btn a {
font-weight: 700;
}

table.tblap, table.tblap td {
border: 0;
padding: 0;
margin: 0;
}

table.tblap {
margin-top: 15px;
}

@media (min-width: 800px) {
/**********************************************/

#tabaside {
grid-template-columns: 1fr 32vw;
gap: 35px;
}

#tabasidecontent {
margin-top: 60px;
padding: 25px 35px;
}

/**********************************************/
}

@media (min-width: 1300px) {
/**********************************************/

#tabasideleft {
display: block;
}

#tabaside {
grid-template-columns: 15vw 1fr 20vw;
}

#tabasideleft:empty, #tabasideright:empty {
display: none;
}

#tabaside:has(#tabasideleft:empty):not(:has(#tabasideright:empty)) {
grid-template-columns: 1fr 20vw;
}

#tabaside:has(#tabasideright:empty):not(:has(#tabasideleft:empty)) {
grid-template-columns: 15vw 1fr;
}

#tabaside:has(#tabasideleft:empty):has(#tabasideright:empty) {
grid-template-columns: 1fr;
}

/**********************************************/
}

/**************************************************************************************/

footer {
background-color: var(--color-bluesoft);
color: var(--color-blue);
margin-top: 40px;
padding-top: 40px;
}

.ulfooter {
margin: 0;
padding: 0;
margin-top: 30px;
}

.ulfooter li {
list-style-type: none;
}

footer a {
color: var(--color-blue);
font-weight: 400;
}

i.footersocials {
font-size: 170%;
margin-right: 3px;
transition: .2s ease;
}

i.footersocials:hover {
opacity: 0.7;
}

#footersub {
font-size: 70%;
line-height: 1.0em;
margin-top: 40px;
padding: 10px 0;
background-color: var(--color-blue);
text-transform: uppercase;
}

#footersub a {
margin: 10px 0;
color: var(--color-white);
opacity: 0.5;
display: block;
}

#footersub a:hover {
opacity: 0.9;
text-decoration: none;
}

/****************************************************************************************************************************************************************************/

@media (min-width : 900px) {
/**************************************************************************************/

h1, h2, h3, h4 {
margin-top: 60px;
margin-bottom: 25px;
}

.suchfeldinput {
width: 240px;
padding: 0 10px;
}

.suchfeldinput:focus, .suchfeldinput:not(:placeholder-shown), .headersuchfeld:hover > .suchfeldinput {
width: 240px;
}

.openyesheader {
font-size: 70%;
line-height: 1.0em;
text-transform: uppercase;
display: inline-block;
margin-left: 15px;
}

#hinweis {
max-width: 20%;
}

#asidelinks {
display: block;
position: fixed;
right: 0;
top: 50%;
transform: translateY(-50%);
z-index: 10;
transition: all .2s ease-out;
}

.asidelinksscroll {
margin-right: -30px;
}

.asidelinksscroll:hover {
margin-right: 0;
}

#asidelinkseinzel {
width: 50px;
height: 50px;
line-height: 50px;
background-color: var(--color-blue);
margin: 5px 0;
font-size: 130%;
}

#asidelinkseinzel a {
color: var(--color-white);
display: block;
}

#asidelinkseinzel i {
transition: all .2s ease-out;
}

#asidelinkseinzel:hover i {
opacity: 0.7;
}

#startbildbuttonseinzel {
width: 130px;
height: 130px;
line-height: 130px;
margin-top: 0;
font-size: 100%;
}

.headerbild {
display: block;
}

.headerbildmobile {
display: none;
}

#maps, .googlemaps {
height: 450px;
}

#termindatum {
font-size: 210%;
line-height: 1.0em;
width: 140px;
}

#termincontent {
margin-left: 170px;
}

#aufgabeheader, #aufgabeeinzel {
padding: 20px;
}

#tabdreier, #tabdreierweiterenews {
grid-template-columns: 1fr 1fr;
}

#aufgabeheader #tabdreier, #aufgabeeinzel #tabdreier {
gap: 35px;
}

footer {
margin-top: 80px;
padding-top: 80px;
}

#footersub {
margin-top: 80px;
}

#footersub a {
margin: 0 15px;
display: inline;
}

/**************************************************************************************/
}

@media (min-width : 1000px) {
/**************************************************************************************/

h2.hlstartbild {
font-size: 4.5vw;
line-height: 1.3em;
}

h3.hlstartbild {
font-size: 1.8vw;
line-height: 1.3em;
}

/**************************************************************************************/
}

@media (min-width : 1200px) {
/**************************************************************************************/

#startbild {
height: calc(100vh - 100px);
margin-top: 100px;
}

#startbildbuttons {
bottom: 3vh;
}

#startbildbuttonseinzel {
width: 150px;
height: 150px;
line-height: 150px;
margin-top: 0;
font-size: 100%;
}

#startbildbuttonseinzel i {
font-size: 3.0vw;
margin-bottom: 20px;
}

#tabzweierwide {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 35px;
}

#tabzweierwide > div:nth-child(2n + 2) {
margin-top: 0;
}

/**************************************************************************************/
}

@media (min-width : 1450px) {
/**************************************************************************************/

#container {
width: 1400px;
}

#tabdreier, #tabdreierweiterenews {
grid-template-columns: 1fr 1fr 1fr;
}

/**************************************************************************************/
}