body {
	background-color: #CBFDCB;
	margin:0;
	padding:0;
	font-family: sans-serif;
}

h1,h2,h3 {
	padding:0;
	margin:0;
}

a {
    color: #000000;
}

a:hover {
    color: #888888;
}

.balken {
    font-size: 1.15em;
    font-weight: bold;
    color: #000000;
    text-align: center;
    padding: 0.4em;
    background: #dddd00;
}

.balken_klein {
    font-size: 1.1em;
    font-weight: bold;
    color: #FFFFCC;
    text-align: center;
    padding: 0.3em;
    margin: 1em 5%;
    background: #408840;
}

div.main {
    margin: 1em 3% 1.5em 3%;
    padding:0;
}

div.main_klein {
    margin: 1em 7% 1.5em 7%;
    padding:0;
}

div.kontakt_step > p {
    display:inline-block;
    vertical-align: top;
    width:30%;
}

div.kontakt_step > p.kontakt_cur {
    color: red;
}

div.kontakt_step > p.kontakt_todo {
    color: gray;
}

div.kontakt_step > p.kontakt_done {
    color: green;
}

span.fehler {
    color:red;
    font-style:italic;
    font-size:1.05em;
    font-weight:bold;
}

ul > li {
    margin: 0.6em 0;
}

#page {
    max-width: 60em;
    margin: 0 auto;
    margin-bottom: 5em !important;
    background: #c1e7c1;
}

#footer_for_mobiles {
    border-top: 0.1em solid black;
    display:flex;
    justify-content: space-around;
    background: yellow;
    position: fixed;
    bottom: 0;
    width: 60em;
    max-width: 100%;
    height: 5em;
}

#footer_for_mobiles > a.footer_box {
    display: block;
    text-decoration: none;
    float: left;
    width: 25%;
    height: 100%;
    text-align: center;
    font-weight: bold;
    font-size:100%;
}

#footer_for_mobiles > a.footer_box > p {
    margin: 0;
    padding: 0;
}

#footer_for_mobiles > a.footer_box img {
    height: 100%;
}

#footer_for_mobiles > div.border {
    border-right: 0.1em solid black;
}

header {
    color:yellow;
    background: #307038; /* For browsers that do not support gradients */
    background: linear-gradient(#307038,#409040);
    text-align: center;
    margin: 0;
    margin-bottom: 1em;
}

header > div.center {
    overflow:hidden;
}

header a.title {
    display: inline-block;
    text-align: left;
    padding:0.7em;
    color:yellow;
    text-decoration:none;
}

header a.title > p {
    font-size:1.2em;
    padding:0.1em;
    margin:0;
    white-space:nowrap;
}

header > div.right {
    display:none;
    float:right;
    width:17em;
}

@media all and (min-width: 40em) {
    header > div.right {
        display: block;
    }

    header > div.center {
        text-align:left;
    }
}

header > div.left {
    display:none;
    float:left;
    width:17em;
}

@media all and (min-width: 56em) {
    header > div.left {
        display: block;
    }

    header > div.center {
        text-align:center;
    }

    #page {
        margin-bottom: 0 !important;
    }

    #footer_for_mobiles {
        display: none;
    }
}

header div.telephone {
    font-size:1.1em;
    padding-top:0.4em;
    padding-bottom:0.6em;
    padding-right:0.4em;
    text-align: right;
}

/* compat iPad (iPad automatically transforms tel into link with wrong color) */
header div.telephone > a {
    color:yellow;
    text-decoration:none;
}

header div.images a {
    text-decoration: none;
    display:block;
    font-size: 0.9em;
    padding:0;
    margin:0;
}

header div.images a img {
    padding:0;
    margin:0 0.2em;
    height:2.8em;
}

header div.images a span {
    display:block;
    color:yellow;
    padding:0;
    margin:0;
}

#nav_left {
    float:left;
    width:10em;
    display: none;
}

main > #toggle_nav_left {
    display: block;
    position:absolute;
    left:0;
    height:1.5em;
    background:white;
    padding:0.15em;
    border:0.25em solid #307038;
}

main .main_title {
    margin-left:2.3em;
    margin-right:2.3em;
}

@media all and (min-width: 36em) {
    #nav_left {
        display: block !important;
    }

    main > #toggle_nav_left {
        display: none;
    }

    main .main_title {
        margin-left:0;
    }
}

#nav_right {
    float:right;
    width:10em;
    display: none;
}

main > #toggle_nav_right {
    display: block;
    position:absolute;
    right:0;
    height:1.5em;
    background:white;
    padding:0.15em;
    border:0.25em solid #307038;
}

@media all and (min-width: 56em) {
    #nav_right {
        display: block !important;
    }

    main > #toggle_nav_right {
        display: none;
    }

    main .main_title {
        margin-right:0;
    }
}

nav > div.nav_box {
    background: #387038;
    padding-bottom: 0.3em;
    margin-bottom: 2em;
}

nav > div.nav_box p.headline {
    background: #307038; /* For browsers that do not support gradients */
    background: linear-gradient(#307038,#409040);
    color: yellow;
    text-align: center;
    font-weight: bold;
    padding: 0.5em 0;
    margin: 0;
}

/* compat iPad (iPad automatically transforms tel into link with wrong color) */
nav > div.nav_box > p > a {
    color:yellow;
    text-decoration:none;
}

nav > div.nav_box > a {
    font-size: 0.85em;
    text-decoration: none;
    margin: 0.6em 0.1em;
    padding: 0.2em;
    display: block;
    color: #ffffff;
    background: #1E841E;
    border-top:1px solid #e4d9c0;
    border-right:1px solid #837c6b;
    border-bottom:1px solid #837c6b;
    border-left:1px solid #e4d9c0;
}

nav > div.nav_box > a:visited {
    color: #dddd00;
}

nav > div.nav_box > a:hover {
    color: #000000;
    background: #23D810;
    border-top:1px solid #99917d;
    border-right:1px solid #e4d9c0;
    border-bottom:1px solid #e4d9c0;
    border-left:1px solid #99917d;
}

nav > div.nav_box > a.current_page {
    color: #000000;
    background: #dddd00;
    border-top:1px solid #99917d;
    border-right:1px solid #e4d9c0;
    border-bottom:1px solid #e4d9c0;
    border-left:1px solid #99917d;
}

nav > div.nav_box > a.subnav {
    font-size:0.75em;
    margin-left:2em;
    margin-right:0.5em;
}

main {
    position:relative;
    overflow:hidden;
    padding:0 0.5em;
}

footer {
    background: #050c06; /* For browsers that do not support gradients */
    background: linear-gradient(#050c06,#1a3d1e);
}

footer > div {
    float:left;
    width:22%;
    margin:1% 1%;
}

footer > div > p {
    color:lightgray;
    font-size:1.1em;
}

footer > div > a {
    color:lightgray;
    display:block;
    margin:0.6em 0;
    text-decoration: none;
}

div.clear {
    float:none;
    clear:both;
}

.center {
    text-align:center;
}

/* 2021 Fahnen Startseite */
.fahnen_marquee {
    max-width: 100vw; /* iOS braucht das */
    white-space: nowrap;
    overflow: hidden;
    /* hier evtl. noch font-size, color usw. */
}

.fahnen_marquee span {
    display: inline-block;
    padding-left: 105%; /* die zusätzlichen 5% erzeugen einen verzögerten Start und vermeiden so ein Ruckeln auf langsamen Seiten */
    animation: fahnen_marquee 25s linear infinite;
}

/* Make it move */
@keyframes fahnen_marquee {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}

.fahnen_marquee span img {
    height: 3em;
}