:root {
font-size: 10px;


/* Hauptfarben ÄNDERN
0 dunkelgrau
1 rot
2 lila
3 blau
4 grün
5 orange
6 grau

www.w3schools.com/colors/colors_hsl.asp
*/
--color0: #333;
--color1: #c70000;
--color2: #934775;
--color3: #58687f;
--color4: #004170;
--color5: #eea20e;
--color6: #575757;

/* Hintergrundfarben
b blau
g grau
i (inherit)
l lila
n grün
r rot
s schwarz
u braun
w weiss
y gelb

*/

--color-b: #001942;
--color-g: #666;
--color-l: #834775;
--color-n: #417f50;
--color-r: #a53535;
--color-s: #333;
--color-u: #553322;
--color-w: #fff;
--color-y: #f4dd53;


/* MODULFORMATE */

/* Lightbox in lightbox.css*/
/* Cycle2 in cycle2.css */

/* Bilder mit Lazyload kann entfallen */

}

@font-face {
font-family: 'Roboto-Regular';
src: url('Roboto-Regular-webfont.woff') format('woff');
font-display: swap;
}

@font-face {
font-family: 'fontello';
src: url('fontello.woff') format('woff'); 
}

* {
box-sizing: border-box;
scroll-behavior: smooth;
}

body {
background-color: #fff;
color: #333;
font-family: Roboto-Regular, sans-serif;
hyphens: auto;
margin-top: 1px;
}

::selection {
background-color: var(--color3);
color: #fff;
}

@media screen {
* {
border: 0;
margin: 0;
padding: 0;
}

/* BASISELEMENTE */
h1 {
font-size: 2.2rem;
margin: 16px 0;
}

h2 {
font-size: 2.0rem;
margin: 12px 0;
}

h3 {
font-size: 1.8rem;
margin: 8px 0;
}

h4 {
font-size: 1.6rem;
margin: 4px 0;
}

h1, h2, h3, h4 {
color: var(--color4);
}

p {
text-align: justify;
font-size: 1.6rem;
line-height: 2.4rem;
margin: 0 0 10px 0;
}

ul {
list-style-type: square;
padding-left: 15px;
margin-bottom: 30px;
}

li {
font-size: 1.6rem;
margin-bottom: 10px;
}

address {
color: #666;
font-size: 1.6rem;
font-weight: bold;
margin: 10px 0 1px 0;
}

tt {
font-size: 1.2rem;
}

blockquote, pre {
font-size: 1.5rem;
font-family: monospace;
}

caption {
font-size: 1.5rem;
margin: 10px 0;
}

/* LINKS */
a {
color: var(--color3);
font-size:large;
}

/* Spezielle Links */
a[href$=".pdf"], a[href$=".zip"], a[href^="tel:"], a[target="_blank"] {
font-family: 'fontello', 'Roboto-Regular-webfont.woff';
text-decoration: none
}

a[href$=".pdf"]:before {content: "\f1c1" " "}
a[href$=".zip"]:before {content: "\e801" " "}
a[href^="tel:"]:before {content: "\e802" " "}
a[target="_blank"]:before {content: "\f08e" " "}

/* Artikelarchiv auflisten */
.news_teaser {
display: inline-block;
}

.news_teaser a {
color: #333;
text-decoration: none;
}


/* STRUKTUR */
main {
margin: 0 auto;
}

/* Footer */
div#footerwrap {
border-bottom: 1px solid #333;
border-top: 1px solid #333;
margin: 6px 0;
width: 100%;
}

footer {
display: flex;
max-width: 960px;
padding: 15px;
margin: auto;
font-size: 1.3rem;
}

footer a {
color: #333;
text-decoration: none;
}

footer a:hover {
text-decoration: underline;
}

#footerleft {
flex: 7;
text-align: left;
}

#footerright {
flex: 3;
text-align: right;
}

/* Hochscrollen */
.back-to-top {
background-color: var(--color2);
color: #fff;
bottom: 10px;
font-size: 2.1rem;
padding: 10px;
position: fixed;
right: 10px;
text-decoration: none;
}

/* Nur bei keinem Gridsystem Zusatzcontainer nutzen */
.blockwrap {
max-width: 960px;
margin: auto;
}

/* Gridsystem */
.gridrow {
display: flex;
gap: 35px;
justify-content: space-between;
margin: auto;
max-width: 960px
}

.gridrow .col1 {flex: 1}
.gridrow .col2 {flex: 2}
.gridrow .col3 {flex: 3}
.gridrow .col4 {flex: 4}
.gridrow .col5 {flex: 5}
.gridrow .col6 {flex: 6}
.gridrow .col7 {flex: 7}
.gridrow .col8 {flex: 8}
.gridrow .col9 {flex: 9}
.gridrow .col10 {flex: 10}
.gridrow .col11 {flex: 11}
.gridrow .col12 {flex: 12}

/* Subgridsystem */
.subgrid {
display: flex;
gap: 35px;
justify-content: space-between
}

.subgrid div {
flex: 1
}

/* GLOBALE MODULKLASSEN */

/* Breiten für mehrspaltige Module - Desktop */
.wcol2 {max-width: 48%; margin-right: 10px}
.wcol3 {max-width: 32%; margin-right: 10px}
.wcol4 {max-width: 23%; margin-right: 10px}
.wcol5 {max-width: 18%; margin-right: 10px}

/* Bilder responsive */
img {
max-width: 100%;
height: auto;
}

/* Bildergalerie mit Bildtitel */
figure {
display: inline-block;
margin: 0 10px 10px 0;
vertical-align: top;
}

/* Bildergalerie ohne Bildtitel */
.galerie img {
margin: 0;
}

/* Bilder mit Texten */
figcaption {
font-size: 1.3rem;
}

/* Bilder mit Texten ohne Rahmen */
figure.rahmenlos {
background-color: inherit;
border: none;
}

.links {float: left; margin: 0 20px 20px 0;}
.rechts {float: right; margin: 0 0 20px 20px;}
.block {margin: 20px 0 20px 0}

/* Nebentexte für Bildtexte */
span.desctext {
font-size: 1.3rem
}

span.minortext {
font-size: 1.2rem;
}

/* Paginierung */
div.paginierung {
font-size: 1.6rem;
padding: 2px 0 12px 0;
}

div.paginierung a, div.paginierung span.gew {
display: inline-block;
font-weight: bold;
margin-bottom: 4px;
min-width: 50px;
padding: 10px;
text-align: center;
text-decoration: none;
}

div.paginierung a {
background-color: var(--color6);
color: #fff;
}

div.paginierung span.gew {
background-color: var(--color2);
color: #fff;
}

div.paginierung span.sprung a {
background-color: var(--color3);
}

div.paginierung a:hover {
background-color: var(--color4);
color: #fff;
}

/* BASISELEMENTE MIT KLASSEN */

/* Tabellen */
table {
border-collapse: collapse;
caption-side: bottom;
margin: 20px 0;
width: 100%;
}

td, th {
padding: 3px;
vertical-align: top;
}

th {
background-color: var(--color2);
padding: 7px;
text-align: left;
}

table.blind {
border: none;
}

table.blind tr {
background-color: transparent;
}

table.blind td {
padding-bottom: 3px;
}

table.daten td, table.daten th {
font-size: 1.5rem;
padding: 7px;
vertical-align: middle;
}

table.daten tr:nth-child(odd) {
background-color: var(--color3);
}

table.daten tr {
background-color: inherit;
transition: background 2.2s, color 2.2s;
}

table.daten tr:hover {
background-color: var(--color3);
color: #fff;
}

table.daten td a {
color: inherit;
text-decoration: none;
}

table.frei {
border: none;
font-size: 1.6rem;
margin: 10px 0;
}

table.frei tr {
background-color: transparent;
}


/* Veranstaltungen */
p.ort {
font-size: 1.4rem;
font-style: italic
}

p.termin {
font-style: italic;
margin: 28px 0 0 0;
}

p.titel {
font-weight: bold;
}

p.teaser {
font-weight: bold;
margin: 16px 0 6px 0;
}


/* MODULE */


/* Module Übersicht, Termine */
div.overview {
display: inline-block;
vertical-align: top;
width: 100%;
}

div.overview p {
text-align: left;
}

.overview a {
ätext-decoration: none;
}

div.overview img {
margin-bottom: 0.6rem;
}


/* Modul Auflistung der Unterelemente, Seitenlinks */
nav.nav_childs {
background-color: var(--color4);
padding: 12px;
}

nav.nav_childs a {
color: var(--color3);
}

/* Sprünge */
#skiplinks {position: absolute; top: -9999px; left: -9999px; width: 0; height: 0; font-size: 0; line-height: 0;}
}

@media screen and (max-width: 1060px) {
/* Breiten für mehrspaltige Module */
.wcol3, .wcol4, .wcol5 {max-width: 47%;}
}

@media screen and (max-width: 768px) {
:root {
font-size: 10px;
}

main {
width: 100%;
}

footer {
display: block;
font-size: 1.5rem;
padding: 15px;
}

#footerleft, #footerright {
text-align: left;
}

p {
text-align: left;
}

/* Breiten für mehrspaltige Module */
.wcol2, .wcol3, .wcol4, .wcol5 {max-width: 97%;}


/* Gridsystem */
.gridrow {
flex-direction: column;
margin: 0;
}

/* Subgridsystem */
.subgrid {
flex-direction: column;
}

/* Bilder auf volle Breite */
.links, .rechts {
float: none;
margin: 14px 0;
}

aside {
width: 100%;
float: none;
}

}

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


h1 {
font-size: 2.2rem;
margin: 10px 0;
}

h2 {
font-size: 2.0rem;
margin: 8px 0;
}

h3 {
font-size: 1.8rem;
margin: 6px 0;
}


h4 {
font-size: 1.6rem;
margin: 4px 0;
}


/* Responsive Tabelle tabfix, tabres */
.tabfix thead {
position: sticky;
top: 5px;
}

.tabres thead {
display: none;
}

.tabfix th, .tabfix td, .tabfix tr, .tabres td, .tabres tr {
float: left;
width: 100%;
}

.tabfix tr, .tabres tr {
margin-bottom: 12px;
}

.tabres td::before {
background-color: var(--color1);
color: #fff;
content: attr(data-label);
float: left;
font-weight: bold;
margin: -8px 10px -8px -8px;
padding: 8px 0 8px 8px;
width: 50%;
word-wrap: break-word;
}

}

@media print {
* {
border: 0;
margin: 0;
padding: 0;
}

body {
background-color: white;
color: #000;
font-family: Arial,Helvetica,sans-serif;
font-size: 10pt;
margin: 0;
padding: 0;
}

nav, #skiplinks, .menuswitch, #footerwrap, .paginierung, .noprint {
display: none;
}

p {
color: #000;
font-size: 11pt;
line-height: 14pt;
margin: 0;
padding: 0 0 15pt 0;
text-align: justify;
}

h1, h2, h3 {
color: var(--color1);
font-size: 14pt;
font-weight: bold;
margin: 0 0 5mm 0;
padding: 0;
}

h2 {
font-size: 12pt;
}

h3 {
font-size: 10pt;
}

img.foto {
background-color: #997e69;
border: 1px dotted #773107;
}

.links {
float: left;
margin: 0 20px 20px 0;
padding: 4px;
}

.rechts {
float: right;
margin: 0 0 20px 20px;
padding: 4px;
}
}
@media screen {
/* Modulsektions-Klassen */

/* Hintergrundfarben
b blau
b1 hellblau
g grau
l lila
n grün
r rot
s schwarz
w weiss
y gelb
u braun
i (inherit)
*/

/* Hintergrundfarben */

/* blau */
.strip-b {background-color: var(--color-b)}

/* hellblau */
.strip-b1 {background-color: var(--color-b1)}




/* grau */
.strip-g {background-color: var(--color-g)}

/* lila */
.strip-l {background-color: var(--color-l)}

/* grün */
.strip-n {background-color: var(--color-n)}

/* rot */
.strip-r {background-color: var(--color-r)}

/* schwarz */
.strip-s {background-color: var(--color-s)}

/* weiss */
.strip-w {background-color: var(--color-w)}

/* gelb */
.strip-y {background-color: var(--color-y)}

/* braun */
.strip-u {background-color: var(--color-u)}


/* Hintergrundbilder */
.wall-a {background-image: url(pix/wall-a.jpg)}
.wall-b {background-image: url(pix/wall-b.jpg)}
.wall-a, .wall-b {background-attachment: fixed; background-position: top center; padding: 15px}


/* Inhaltsboxen */
.box-0, .box-b, .box-b1, .box-g, .box-l, .box-n, .box-r, .box-s, .box-w, .box-y, .box-u {padding: 15px}

/* blau */
.box-b {background-color: var(--color-b); color: #fff}
.box-b h1, .box-b h2, .box-b h3, .box-b h4 {color: #fff}
.box-b a {color: #fff}

/* hellblau */
.box-b1 {background-color: var(--color-b1)}



/* grau */
.box-g {background-color: var(--color-g); color: #fff}
.box-g h1, .box-g h2, .box-g h3, .box-g h4 {color: #fff}

.box-g a {color: #fff}

/* lila */
.box-l {background-color: var(--color-l); color: #fff}
.box-l h1, .box-l h2, .box-l h3, .box-l h4 {color: #fff}
.box-l a {color: #fff}

/* grün */
.box-n {background-color: var(--color-n); color: #fff}
.box-n h1, .box-n h2, .box-n h3, .box-n h4 {color: #fff}
.box-n a {color: #fff}

/* rot */
.box-r {background-color: var(--color-r);color: #fff}
.box-r h1, .box-r h2, .box-r h3, .box-r h4 {color: #fff}
.box-r a {color: #fff}

/* schwarz */
.box-s {background-color: var(--color-s); color: #fff}
.box-s h1, .box-s h2, .box-s h3, .box-s h4 {color: #fff}
.box-s a {color: #fff}

/* braun */
.box-u {background-color: var(--color-u); color: #fff}
.box-u h1, .box-u h2, .box-u h3, .box-u h4 {color: #fff}
.box-u a {color: #fff}

/* gelb */
.box-y {background-color: var(--color-y); color: var(--color0)}
.box-y h1, .box-y h2, .box-y h3, .box-y h4 {color: var(--color0)}

/* weiss */
.box-w {background-color: var(--color-w)}

/* Grid-Klassen für dunkle Hintergründe: schwarz-rot-grau-blau-grün ... s-r-g-b-n */
.sec-s {background-color: var(--color-s); color: #fff}
.sec-r {background-color: var(--color-r); color: #fff}
.sec-g {background-color: var(--color-g); color: #fff}
.sec-b {background-color: var(--color-b); color: #fff}
.sec-n {background-color: var(--color-n); color: #fff}
/* Grid-Klassen für helle Hintergründe: .. b1*/

.sec-b1 {background-color: var(--color-b1)}


/* SOLV */
.sec-u {background-image: url(pix/wall-a.jpg)}
.sec-v {background-image: url(pix/wall-b.jpg)}
.sec-u, .sec-v {background-attachment: fixed; background-position: top center}


.sec-s h1, .sec-s h2, .sec-s h3, .sec-r h1, .sec-r h2, .sec-r h3, .sec-g h1, .sec-g h2, .sec-g h3, .sec-b h1, .sec-b h2, .sec-b h3, .sec-n h1, .sec-n h2, .sec-n h3 {
color: #fff;
}

.sec-s a, .sec-r a, .sec-g a, .sec-b a, .sec-n a {
color: #fff;
}

}

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

.wall-a, .wall-b {
background-image: none; padding: 1px
}

.box-0, .box-b, .box-g, .box-l, .box-n, .box-r, .box-s, .box-w, .box-y {
padding: 1px 15px
}

}
.sm{box-sizing:border-box;position:relative;z-index:9999;-webkit-tap-highlight-color:rgba(0,0,0,0);}
.sm,.sm ul,.sm li{display:block;list-style:none;margin:0;padding:0;line-height:normal;direction:ltr;text-align:left;}
.sm-rtl,.sm-rtl ul,.sm-rtl li{direction:rtl;text-align:right;}
.sm>li>h1,.sm>li>h2,.sm>li>h3,.sm>li>h4,.sm>li>h5,.sm>li>h6{margin:0;padding:0;}
.sm ul{display:none;}
.sm li,.sm a{position:relative;}
.sm a{display:block;}
.sm a.disabled{cursor:default;}
.sm::after{content:"";display:block;height:0;font:0px/0 serif;clear:both;overflow:hidden;}
.sm *,.sm *::before,.sm *::after{box-sizing:inherit;}
.sm-simple {
background-color: #fff;
}

.sm-simple a, .sm-simple a:hover, .sm-simple a:focus, .sm-simple a:active {
padding: 13px 20px;

/* make room for the toggle button (sub indicator) */
padding-right: 58px;
color: var(--color3);
font-family: Roboto-Regular, sans-serif;
font-size: 18px;

font-weight: normal;
line-height: 17px;
text-decoration: none;
}

.sm-simple a.current {
background-color: var(--color3);
color: #fff;
}

.sm-simple a.disabled {
color: #ccc;
}

.sm-simple a .sub-arrow {
position: absolute;
top: 50%;
margin-top: -17px;
left: auto;
right: 4px;
width: 34px;
height: 34px;
overflow: hidden;
font: bold 14px/34px monospace !important;
text-align: center;
text-shadow: none;
background-color: rgba(0, 0, 0, 0.08);
}

.sm-simple a .sub-arrow::before {
content: '+';
}

.sm-simple a.highlighted .sub-arrow::before {
content: '-';
}

.sm-simple li {
border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.sm-simple > li:first-child {
border-top: 0;
}

.sm-simple ul {
background-color: rgba(179, 179, 179, 0.1);
}

.sm-simple ul a, .sm-simple ul a:hover, .sm-simple ul a:focus, .sm-simple ul a:active {
font-size: 16px;
border-left: 8px solid transparent;
}

.sm-simple ul ul a,
.sm-simple ul ul a:hover,
.sm-simple ul ul a:focus,
.sm-simple ul ul a:active {
border-left: 16px solid transparent;
}

.sm-simple ul ul ul a,
.sm-simple ul ul ul a:hover,
.sm-simple ul ul ul a:focus,
.sm-simple ul ul ul a:active {
border-left: 24px solid transparent;
}

.sm-simple ul ul ul ul a,
.sm-simple ul ul ul ul a:hover,
.sm-simple ul ul ul ul a:focus,
.sm-simple ul ul ul ul a:active {
border-left: 32px solid transparent;
}

.sm-simple ul ul ul ul ul a,
.sm-simple ul ul ul ul ul a:hover,
.sm-simple ul ul ul ul ul a:focus,
.sm-simple ul ul ul ul ul a:active {
border-left: 40px solid transparent;
}

#menuswitch {
display: inline-block;
font-size: 5.53rem;
text-decoration: none;
color:  #fff;
margin-left: 20px;
}

@media (min-width: 768px) {
/* Switch to desktop layout
-----------------------------------------------
These transform the menu tree from
collapsible to desktop (navbar + dropdowns)
-----------------------------------------------*/

.sm-simple a, .sm-simple a:hover, .sm-simple a:focus, .sm-simple a:active {
padding: 5px 10px;
font-size: 14px;
line-height: 15px;
font-weight: bold;
}

.sm-simple a .sub-arrow::before {
content: '';
}

.sm-simple {
}

/* start... (it's not recommended editing these rules) */
.sm-simple ul {
position: absolute;
width: 12em;
}

.sm-simple li {
float: left;
}

.sm-simple.sm-rtl li {
float: right;
}

.sm-simple ul li, .sm-simple.sm-rtl ul li, .sm-simple.sm-vertical li {
float: none;
}

.sm-simple a {
white-space: nowrap;
}

.sm-simple ul a, .sm-simple.sm-vertical a {
white-space: normal;
}

.sm-simple .sm-nowrap > li > a, .sm-simple .sm-nowrap > li > :not(ul) a {
white-space: nowrap;
}

/* ...end */
.sm-simple {
}

.sm-simple a, .sm-simple a:hover, .sm-simple a:focus, .sm-simple a:active, .sm-simple a.highlighted {
padding: 18px 8px;
color: var(--color4);
background-color: var(--color-w);
}

.sm-simple a:hover, .sm-simple a:focus, .sm-simple a:active, .sm-simple a.highlighted {
background-color: var(--color-b);
color: #fff;
}

.sm-simple a.current {
background-color: var(--color-g);
color: #fff;
}

.sm-simple a.disabled {
background-color: #fff;
color: #ccc;
}

.sm-simple a .sub-arrow {
top: 50%;
margin-top: -8px;
right: 20px;
width: 8px;
height: 16px;
font: 14px/16px monospace !important;
background-color: transparent;
}

.sm-simple > li {
border-top: 0;
}
.sm-simple > li:first-child {
border-left: 0;
}
.sm-simple ul {
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}
.sm-simple ul a {
border: 0 !important;
}
.sm-simple ul a.has-submenu {
padding-right: 20px;
}
.sm-simple ul a .sub-arrow {
left: 8px;
right: auto;
}

.sm-simple ul > li {
border: none;
}
.sm-simple ul > li:first-child {
border-top: 0;
}
.sm-simple .scroll-up,
.sm-simple .scroll-down {
position: absolute;
display: none;
visibility: hidden;
overflow: hidden;
background-color: #fff;
height: 20px;
}
.sm-simple .scroll-up-arrow,
.sm-simple .scroll-down-arrow {
position: absolute;
top: -2px;
left: 50%;
margin-left: -8px;
width: 0;
height: 0;
overflow: hidden;
border-width: 8px;
border-style: dashed dashed solid dashed;
border-color: transparent transparent #555 transparent;
}
.sm-simple .scroll-down-arrow {
top: 6px;
border-style: solid dashed dashed dashed;
border-color: #555 transparent transparent transparent;
}
.sm-simple.sm-rtl a.has-submenu {
padding-right: 20px;
padding-left: 32px;
}
.sm-simple.sm-rtl a .sub-arrow {
left: 20px;
right: auto;
}
.sm-simple.sm-rtl.sm-vertical a.has-submenu {
padding: 11px 20px;
}
.sm-simple.sm-rtl.sm-vertical a .sub-arrow {
left: auto;
right: 8px;
}
.sm-simple.sm-rtl > li:first-child {
border-left: none;
}
.sm-simple.sm-rtl > li:last-child {
border-left: 0;
}
.sm-simple.sm-rtl ul a.has-submenu {
padding: 11px 20px;
}
.sm-simple.sm-rtl ul a .sub-arrow {
left: auto;
right: 8px;
}
.sm-simple.sm-vertical a .sub-arrow {
left: 8px;
right: auto;
}
.sm-simple.sm-vertical li {
border-left: 0;
border-top: 1px solid #eee;
}
.sm-simple.sm-vertical > li:first-child {
border-top: 0;
}

#menuswitch {
display: none;
}

/* Anpassungen */
#navlogo {
display: none;
}

}
.main-nav {
background-color: var(--color3);
}

.main-nav:after {
clear: both;
content: "\00a0";
display: block;
height: 0;
font: 0px/0 serif;
overflow: hidden;
}

.nav-brand {
float: left;
margin: 0;
}

.nav-brand a {
display: block;
padding: 8px 2px;
font-size: 20px;
font-weight: normal;
line-height: 17px;
text-decoration: none;
}

#main-menu {
clear: both;
border: 0;
box-shadow: none;
}

/* Mobile menu toggle button */
.main-menu-btn {
float: right;
margin: 5px 10px;
position: relative;
display: block;
width: 58px;
height: 58px;
text-indent: 58px;
white-space: nowrap;
overflow: hidden;
cursor: pointer;
}

/* hamburger icon */
.main-menu-btn-icon,
.main-menu-btn-icon:before,
.main-menu-btn-icon:after {
position: absolute;
top: 50%;
left: 2px;
height: 7px;
width: 48px;
background-color: #fff;
transition: all 0.25s;
}

.main-menu-btn-icon:before {
content: '';
top: -14px;
left: 0;
}

.main-menu-btn-icon:after {
content: '';
top: 14px;
left: 0;
}

/* x icon */
#main-menu-state:checked ~ .main-menu-btn .main-menu-btn-icon {
height: 0;
background-color: transparent;
}

#main-menu-state:checked ~ .main-menu-btn .main-menu-btn-icon:before {
top: 0;
transform: rotate(-45deg);
}

#main-menu-state:checked ~ .main-menu-btn .main-menu-btn-icon:after {
top: 0;
transform: rotate(45deg);
}

/* hide menu state checkbox (keep it visible to screen readers) */
#main-menu-state {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
border: 0;
padding: 0;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
}

/* hide the menu in mobile view */
#main-menu-state:not(:checked) ~ #main-menu {
display: none;
}

#main-menu-state:checked ~ #main-menu {
display: block;
}

header {
position: sticky;
top: 0;
}

@media (min-width: 768px) {

header {
padding-top: 270px;
/* mit Pfad bei Bündelung der Dateien */
background: var(--color-b) url(pix/header.jpg) center no-repeat;
position: relative;
}

/* hide the button in desktop view */
.main-menu-btn {
position: absolute;
top: -99999px;
}
/* always show the menu in desktop view */
#main-menu-state:not(:checked) ~ #main-menu {
display: block;
}

#main-menu {
clear: none;
}

.main-nav {
margin: auto;
max-width: 960px;
position: static;
}

}

/* Funzt nur hier */
header {
position: relative;
}
/* Preload images */
body:after {
content: url(script/lightbox/close.png) url(script/lightbox/loading.gif) url(script/lightbox/prev.png) url(script/lightbox/next.png);
display: none;
}

body.lb-disable-scrolling {
overflow: hidden;
}

.lightboxOverlay {
position: absolute;
top: 0;
left: 0;
z-index: 9999;
background-color: black;
opacity: 0.8;
display: none;
}

.lightbox {
position: absolute;
left: 0;
width: 100%;
z-index: 10000;
text-align: center;
line-height: 0;
font-weight: normal;
}

.lightbox .lb-image {
display: block;
height: auto;
max-width: inherit;
max-height: none;
border-radius: 0;
border: 2px solid var(--color3);
}

.lightbox a img {
border: none;
}

.lb-outerContainer {
position: relative;
width: 250px;
height: 250px;
margin: 0 auto;
border-radius: 0;
/* Background color behind image - visible during transitions. */
background-color: var(--color3);
}

.lb-outerContainer:after {
content: "";
display: table;
clear: both;
}

.lb-loader {
position: absolute;
top: 43%;
left: 0;
height: 25%;
width: 100%;
text-align: center;
line-height: 0;
}

.lb-cancel {
display: block;
width: 32px;
height: 32px;
margin: 0 auto;
background: url(script/lightbox/loading.gif) no-repeat;
}

.lb-nav {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 10;
}

.lb-container > .nav {
left: 0;
}

.lb-nav a {
outline: none;
background-image: url('data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==');
}

.lb-prev, .lb-next {
height: 100%;
cursor: pointer;
display: block;
}

.lb-nav a.lb-prev {
width: 34%;
left: 0;
float: left;
background: url(script/lightbox/prev.png) left 48% no-repeat;
opacity: 0;
transition: opacity 0.6s;
}

.lb-nav a.lb-prev:hover {
opacity: 1;
}

.lb-nav a.lb-next {
width: 64%;
right: 0;
float: right;
background: url(script/lightbox/next.png) right 48% no-repeat;
opacity: 0;
transition: opacity 0.6s;
}

.lb-nav a.lb-next:hover {
opacity: 1;
}

.lb-dataContainer {
background-color: var(--color3);
margin: 0 auto;
padding-top: 5px;
width: 100%;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}

.lb-dataContainer:after {
content: "";
display: table;
clear: both;
}

.lb-data {
padding: 0 8px;
}

.lb-data .lb-details {
width: calc(100% - 30px);
float: left;
text-align: left;
line-height: 1.5rem;
}

.lb-data .lb-caption {
color: #fff;
font-size: 1.4rem;
line-height: 1.8rem;
}

.lb-data .lb-caption a {
color: #4ae;
}

.lb-data .lb-number {
display: block;
clear: left;
padding: 1rem 0;
font-size: 1.4rem;
color: #eee;
}

.lb-data .lb-close {
display: block;
float: right;
width: 30px;
height: 30px;
background: url(script/lightbox/close.png) top right no-repeat;
text-align: right;
outline: none;
opacity: 0.7;
transition: opacity 0.2s;
}

.lb-data .lb-close:hover {
cursor: pointer;
opacity: 1;
}