/*  HTML5 Boilerplate styles - h5bp.com (generated via initializr.com) */

html,
button,
input,
select,
textarea {color: #222;}
body {
    font-size: 1em;
    line-height: 1.4;}
::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;}
::selection {
    background: #b3d4fc;
    text-shadow: none;}
hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;}
img {vertical-align: middle}
fieldset {
    border: 0;
    margin: 0;
    padding: 0;}
textarea {resize: vertical;}
.chromeframe {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;}
body {font: 16px/26px Helvetica, Helvetica Neue, Arial;}
.wrapper {
    width: 90%;
    margin: 0 5%;}
    
html {scroll-behavior: smooth;}

/* == Theme */
.header-container {border-bottom: 20px solid #9de207;}
.footer-container, .main .side-top { border-top: 20px solid #9de207;}
.header-container, .footer-container, .main .side, .subnav {background: #3892e2;}
.subnav {margin-top: 15px;}

/* == Navigation */
nav ul, .subnav ul {
    margin: 0;
    padding: 0;}
.subnav ul {padding-top: 7px;}
.subnav li {
	list-style-type:none;
	border-bottom: 1px solid #9de108;
	padding-top: 5px;
	padding-bottom: 5px;}
.subnav li a.active{
	background: url(symbol_active.png) 0 10px no-repeat;
	padding-left: 15px;}
.subnav li a:hover {
	color: #dfedfa;}
nav a {
    display: block;
    margin-bottom: 10px;
    padding: 15px 0;

    text-align: center;
    text-decoration: none;
    font-weight: bold;

    color: #3892e2;
    background: #ffffff;
	font-size: 1.5em;
	font-family: Cabin, Helvetica, Arial, sans-serif;}
.subnav a {
	border-bottom-style: none;
	color: #ffffff;}
.v {background: url(../img/v.png) 20px no-repeat #ffffff;}
.h {background: url(../img/h.png) 20px no-repeat #ffffff;}
.p {background: url(../img/p.png) 20px no-repeat #ffffff;}
.s {background: url(../img/s.png) 20px no-repeat #ffffff;}
nav a:hover {
    color: #ffffff;
	text-decoration: none;
	border-bottom-style: none;}
nav a:hover {background-color: #3892e1;}

/* ==  Main*/
.main {
    padding: 30px 0 110px;
    font-family: Open Sans, Helvetica, Helvetica Neue, Arial, sans-serif;
    min-height: 100%;}
article {margin-bottom: 50px;}
article h1 {font: 1.7em Cabin, Helvetica, Arial, sans-serif;}
article h2 {font: 1.7em Cabin, Helvetica, Arial, sans-serif;}
h3 {font: 1.2em Cabin, Helvetica, Arial, sans-serif;}
div.aside h4 {
	font-weight: normal;
	font-style: normal;}
.las {
	font-size: 2em;
	top: 5px;
	position: relative;}
.aside h4 {
	margin-top: 0;
	margin-bottom: 0;}
.side {
    color: white;
	padding: 0px 5% 10px;
	font-family: Helvetica, Helvetica Neue, Arial, sans-serif;}
.aside {border-bottom: 4px solid #9de108;}
.subnav {padding-top: 10px;}
.aside a {
	color: #9de108;
	border-bottom: 1px dotted #9de108;}
.eingeloggt {font-size: 0.7em;}
.footer-container footer {
    color: white;
    padding: 10px 0;}
.footer-container a {color: white;}
.footer-container h3 {
	font-weight: normal;
	font-style: normal;
	font-size: 1em;}
.flex-container {
	display: flex;
	flex-direction: column; 
	justify-content: space-between;}
.disclaimer {flex: 100%;}
img, figure {width: 100%;}

/* == custom styles */
.title a {
	color: #f8f8f8;
	text-decoration: none;}
.seitentitel {
	color: #3892e1;
	font: 1.3em/2em Cabin, Helvetica, Arial, sans-serif;
	margin-bottom: 30px;}
.veranstaltung {
	border-bottom: 1px solid #9de108;
	padding-bottom: 15px;
	margin-bottom: 20px;}
.veranstaltung:last-child {
	border-bottom-style: none;}
.autor, .datum, .ort {
	font-size: 0.9em;
	padding: 0;
	margin: 0;}
.ort {
	font-size: 0.8em;
	margin-left: 10px;
	margin-top: 10px;
}
.autor {font-style: italic;}
a {
	text-decoration: none;
	color: #3892e1;}
a:hover {border-bottom: 1px solid #3892e1;}
.google-maps {
    position: relative;
    padding-bottom: 90%; // (450 ÷ 500 = 0.9 = 90%)
    height: 0;
    overflow: hidden;}
.google-maps iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;}
.submitbutton{
	margin-top: 100px;
	top: 10px;}

/* == Media Queries */
@media only screen and (min-width: 480px) {
    nav a {
        float: left;
        width: 19%;
        margin: 0 1%;
        padding: 25px 2%;
        margin-bottom: 0;
        font-size: 1em;}
    .v, .h, .p, .s {background-image: none;}
    nav li:first-child a {margin-left: 0;}
    nav li:last-child a {margin-right: 0;}
    nav ul li {display: inline;}
    .oldie nav a {margin: 0 0.7%;}
}
@media only screen and (min-width: 768px) {
    .title {float: left;}
    nav {
        float: right;
        width: 100%;}
    nav a {
    	text-align: right;
    	width: 18.5%;
		padding-right: 3%;}
    .v {background: url(../img/v.png) 20px no-repeat #ffffff;}
	.h {background: url(../img/h.png) 20px no-repeat #ffffff;}
    .p {background: url(../img/p.png) 20px no-repeat #ffffff;}
    .s {background: url(../img/s.png) 20px no-repeat #ffffff;}
    .maintext-container {
    	float: left;
    	width: 57%;
		min-height: 500px;
		display: block;}
    .side  {
        float: right;
		margin-top: 20px;
		width: 22%;
		overflow: visible;
	}
	.subnav {
		width: 100%;
		margin: 0;
		padding: 0;}
	.sticky {
		position: sticky;
		top: 0;}
	iframe {margin-top: 20px;}
	.footer-container {
		position: fixed;
		bottom: 0;
		width: 100%;}
	.flex-container {flex-direction: row; }
	.disclaimer {flex:  50%;}
}
@media only screen and (min-width: 1140px) {
    .wrapper {
        width: 1026px; /* 1140px - 10% for margins */
        margin: 0 auto;}
    nav a {font-size: 1.5em;}
}

/* == Helper classes */
.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    *text-indent: -9999px;}
.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;}
.hidden {
    display: none !important;
    visibility: hidden;}
.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;}
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;}
.invisible {visibility: hidden;}
.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;}
.clearfix:after {clear: both;}
.clearfix { *zoom: 1;}
.small-margin-bottom {margin-bottom: 0;}
.margin-top {margin-top: 20px;}
.margin-top:first-child {margin-top: 0;}
.fl-right {float: right;}
.align-right {text-align: right;}
.margin-right {margin-right: 20px;}
.padding-top {padding-top: 3px;}

/* == Form für Benutzer_in */
form {
	margin-top: 5%;
	margin-bottom: 5%;
	-webkit-animation: moveDown .3s;
	-moz-animation: moveDown .3s;
	animation: moveDown .3s;
	-webkit-animation-fill-mode: forwards;
	-moz-animation-fill-mode: forwards;
	animation-fill-mode: forwards;}
input {
	color: #444;
	font-size: 1.5em;
	border-bottom: solid 1px;
	border-color: #bbb;
	background: transparent;
	display: block;
	height: 2em;
	margin-bottom: 5%;
	padding: 0 3%;
	-webkit-transition: border .25s;
	-moz-transition: border .25s;
	-o-transition: border .25s;
	transition: border .25s;
	border-top-style: none;
	border-right-style: none;
	border-left-style: none;
	width: 100%;}
input:focus::-webkit-input-placeholder {color: #ddd;}
input:focus::-moz-input-placeholder {color: #ddd;}
input:focus::-ms-input-placeholder {color: #ddd;}
.alert {
  border-color: #E35F5F;
  color: #E35F5F;}
.alert + .button {margin-bottom: 2em;}
.button {
	background: transparent;
  	color: #bbb;
  	font-size: 2.05em;
  	padding: 3% 7%;
  	cursor: pointer;
	border: 1px solid #3892e1;
	width: 8em;}
.button:hover, button:focus {color: #111;}
.button span {display: none;}
input.button {padding-top: 13px;}

/* == Pagination == */
.pagination-container {margin-bottom: 50px;}
.pagination a {
	font-weight: normal;
	font-style: normal;
	font-size: 1em;
	padding-top: 0.6em;
	padding-bottom: 0.6em;
	width: 115px;}
.pagination .prev {
    float: right;
	margin: 0;
	text-align: left;
	border-style: solid;
	border-color: #9de108;}
.pagination .next {
    float: left;
    border-style: solid;
    border-color: #9de108;}
  
/* == Galerie Grid */
.pic-columns {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
	grid-gap: 5px}
.galerie-img {
	width: 100%;
	height: auto;
	margin-bottom: 15px;}
figcaption {grid-area: figcaption;}
.bildunterschrift {font-size: 0.8em;}

/* == Print styles */
@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow: none !important;
        text-shadow: none !important;}
    a,
    a:visited {text-decoration: underline;}
    a[href]:after { content: " (" attr(href) ")";}
    abbr[title]:after {content: " (" attr(title) ")";}

    /*
     * Don't show links for images, or javascript/internal links
     */
    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after { content: "";}
    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;}
    thead {display: table-header-group; /* h5bp.com/t */}
    tr,
    img {page-break-inside: avoid;}
    img {max-width: 100% !important;}
    @page {margin: 0.5cm;}
    p, h2, h3 {
        orphans: 3;
        widows: 3;}
    h2, h3 {page-break-after: avoid;}
}