:root {
font-size: 10px
}

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

* {
box-sizing: border-box
}

body {
color: #333;
font-family: FengardoNeueRegular, sans-serif;
hyphens: auto
}

::selection {
background-color: #577f39;
color: #fff
}

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

/* Kompaktmenü */
nav.menuswitch {display: none}
nav.menuswitch a[href^="tel:"] {margin-left: 3px}
a.open {display: inline-block}
a.open:before {content: '\2261'}
a.close {display: none}
a.close:before {content: '\0078'}

a {
color: #577f39;
text-decoration: underline
}

a.web:before {
content: "\27BD" " "
}

a.mail:before {
content: "\2709" " "
}

a.hum:before {
content: "\265B" " "
}

main {
margin: 0 auto 20px auto;
max-width: 960px;
min-height: 400px;
background-color: #fff
}

header {
height: 230px;
margin: 10px auto;
max-width: 960px
}

article#inhalt {
padding: 25px
}

div#footerwrap {
background-color: #577f39;
width: 100%;
margin: 10px 0
}

footer {
color: #fff;
display: flex;
font-size: 1.4rem;
max-width: 960px;
padding: 15px;
margin: auto
}

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

footer a:hover {
text-decoration: underline
}

div#footerleft {
flex: 6;
text-align: left
}

div#footerright {
flex: 4;
text-align: right
}

.box0 {
padding: 15px
}

.box1 {
background-color: #459d44;
color: #fff;
padding: 15px
}

.box2 {
background-color: #b52733;
color: #fff;
padding: 15px
}

.box3 {
background-color: #666;
color: #fff;
padding: 15px
}

.box1 a, .box2 a, .box3 a {
color: #fff
}

article h1 {
margin: 4px 0 3px 0;
font-size: 2.6rem;
color: #577f39
}

article h2 {
color: #577f39; 
font-size: 1.8rem;
padding: 12px 0 2px 0
}

article h3, article h4 {
color: #529768;
font-size: 1.7rem;
font-weight: bold;
margin: 6px 0 6px 0
}

article h4 {
font-size: 1.5rem;
color: #539969
}

article p {
font-size: 1.7rem;
line-height: 2.4rem;
margin: 0 0 10px 0
}

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

article tt {
font-size: 1.5rem
}

article caption {
font-size: 1.0rem;
line-height: 1.5rem;
margin: 0 0 10px 0
}

article table {
width: 100%;
border-collapse: collapse;
border: 1px solid #ccc
}

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

article th {
font-weight: bold;
text-align: left
}

article table.blind {
border: none
}

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

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

article table.daten {
border: none
}

article table.daten td {
font-size: 1.5rem;
padding: 2px;
vertical-align: middle
}

article table.daten tr:nth-child(odd) {
background-color: #eee
}

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

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

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

article form table tr:nth-child(odd) {
background-color: transparent
}

article ul {
list-style-type: square;
padding-left: 15px
}

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

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

/* 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
}

/* Mehrspaltigkeit */
.col2 {
columns: 200px 2;
column-gap: 26px;
}

.col3 {
columns: 200px 3;
column-gap: 24px;
}

.col4 {
columns: 200px 4;
column-gap: 22px;
}

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

/* Bilder mit Texten */
figure, img.foto {
margin-right: 5px
}

figcaption {
font-size: 1.7rem
}

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

/* Veranstaltungen */
p.termin {
font-style: italic;
margin: 18px 0 2px 0
}

p.titel {
font-weight: bold
}

/* Nebentexte */
span.minortext {
font-size: 1.4rem
}

span.desctext {
font-size: 1.3rem
}

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

/* Modul Bildergalerie mit Bildtitel */
figure {
display: inline-block;
margin: 0 10px 2rem 0
}

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

div.overview p {
text-align: left
}

article .overview a {
text-decoration: none
}

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

/* Breiten für mehrspaltige Module - Desktop */
.wcol2 {max-width: 49%}
.wcol3 {max-width: 33%}
.wcol4 {max-width: 24%}
.wcol5 {max-width: 19%}
.wcol2, .wcol3, .wcol4, .wcol5 {padding-right: 15px}
.wcol2:last-child, .wcol3:last-child, .wcol4:last-child, .wcol5:last-child {padding-right: 0}

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

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

.block {
margin: 20px 0 20px 0
}


/* Formulare teilweise mit Bootstrap-Bezeichnungen */
input, button, textarea, select {
font-family: inherit;
line-height: inherit
}

fieldset {
border: 4px solid #577f39;
border-radius: 16px;
margin: auto;
margin-bottom: 24px;
padding: 18px
}

legend {
font-size: 1.7rem;
font-style: italic;
margin-left: 17px;
padding: 12px
}

label {
display: block;
font-size: 1.7rem
}

.form-control {
background: inherit;
border-bottom: 1px dotted #999;
font-size: 1.7rem;
margin-bottom: 2px;
padding: 8px;
vertical-align: middle
}

.fehler {
color: #c00
}

input:invalid, textarea:invalid, .falsch {
background-color: hsla(0, 90%, 70%, .5)
}

.b20 {
width: 20px
}

.nummerwahl {
padding: 2px;
width: 53px
}

/* Formulare FLEX */
.form-wrapper {
}

.form-row {
display: flex;
padding: 5px
}

.form-row label {
flex: 2
}

.form-row input {
flex: 5
}

.form-row select {
flex: 5
}

.form-col {
display: flex;
flex-direction: column
}

/* Ersetz button */
.btn {
border: 4px solid #2b401c;
border-radius: 4px;
cursor: pointer;
display: inline-block;
font-size: 1.7rem;
font-weight: normal;
margin-top: 20px;
min-width: 260px;
padding: 10px;
text-align: center;
touch-action: manipulation;
vertical-align: middle;
user-select: none
}

.btn-primary {
color: #fff;
background-color: #577f39
}

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

article 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
}

article div.paginierung a {
background-color: #999;
color: #fff
}

div.paginierung span.gew {
background-color: #577f39;
color: #fff
}

div.paginierung span.sprung {}

article div.paginierung a:hover {
background-color: #539969;
color: #fff
}

/* Hauptnavigation */
div#navwrap {
background-color: #577f39;
width: 100%;
margin: 10px 0 10px 0;
position: sticky;
top: 0px
}

nav#firstnav {
font-size: 1.5rem;
margin: auto;
max-width: 960px
}

nav#firstnav a {
color: #fff;
display: inline-block;
font-weight: bold;
padding: 8px 16px 8px 16px;
text-decoration: none;
text-align: center
}

nav#firstnav a.aktiv {
background-color: #2b401c
}

nav#firstnav a:hover {
background-color: #000;
color: #fff
}

nav#secondnav {
color: #333;
font-size: 1.4rem;
padding-left: 16px;
padding-top: 22px
}

nav#secondnav a {
color: #577f39;
font-weight: bold;
text-decoration: none
}

nav#secondnav a.aktiv {
color: #c00
}

nav#secondnav a:hover {
color: #000
}

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

/* grün */
.box-n {
background-color: #577f39;
color: #fff;
padding: 10px;
}

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

@media screen and (max-width: 740px) {
body {
font-size: 75%
}

main {
width: 100%
}

header {
display: none
}

div#navwrap {
position: static
}

article#inhalt {
padding: 18px
}

article p {
text-align: left
}

article table.daten td {
font-size: 1.0rem;
padding: 1px
}

/* Formulare Flexbox */
.form-row {
flex-direction: column
}

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

/* Horizontale Navigation */
nav#firstnav {
height: 0;
left: 0;
overflow:	hidden;
position: absolute;
top: 100px;
width: 100%
}

/* Kompaktmenü */
nav.menuswitch {
background-color: #577f39;
display: block;
margin: auto;
width: 100%;
min-height: 100px;
padding-left: 10px;
position: sticky;
top: 0
}

nav.menuswitch a {
font-size: 7rem;
color: #fff;
text-decoration: none
}

nav.menuswitch img {
float: right
}

#menuopen:target nav#firstnav {
height: 25.123rem
}

#menuopen:target article {
margin-top: 25.123rem
}

article {
transition: margin-top 1.5s
}

nav#firstnav {
margin-top: 2rem;
transition: height 1.2s;
z-index: 1
}

#menuopen:target a.open {
display: none
}

#menuopen:target a.close {
display: inline-block
}

nav#firstnav a {
display: inline-block;
width: 100%;
background-color: #577f39;
color: #fff;
text-align: left
}

nav#firstnav a.aktiv {
background-color: #2b401c
}

}

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

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

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

footer {
display: block
}

div#footerleft {
text-align: left
}

div#footerright {
text-align: left
}

}

@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, header, #skiplinks, .menuswitch, #footerwrap, .paginierung, .noprint {
display: none
}

article {
background-color: #fff
}

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

h1, h2, h3 {
color: #577f39;
font-size: 14pt;
font-weight: bold;
margin: 0 0 5mm 0;
padding: 0
}

h2 {
color: #333;
font-size: 12pt
}

h2 {
color: #333;
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
}
}