/* =============================================================================
 * MABACH – Stylesheet
 * Übernommen aus Contao (files/mabach/css/styles.css), für WordPress angepasst.
 * Änderungen gegenüber dem Original sind mit [WP] markiert.
 * ========================================================================== */

/* [WP] Schriften lokal als woff2 (DSGVO-konform, kein Google-Fonts-Abruf) */
@font-face {font-family: 'Merriweather'; font-style: normal; font-weight: 300; font-display: swap; src: url('../font/merriweather-latin-ext-300-normal.woff2') format('woff2'); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face {font-family: 'Merriweather'; font-style: normal; font-weight: 300; font-display: swap; src: url('../font/merriweather-latin-300-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face {font-family: 'Merriweather'; font-style: normal; font-weight: 400; font-display: swap; src: url('../font/merriweather-latin-ext-400-normal.woff2') format('woff2'); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face {font-family: 'Merriweather'; font-style: normal; font-weight: 400; font-display: swap; src: url('../font/merriweather-latin-400-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face {font-family: 'Oswald'; font-style: normal; font-weight: 300; font-display: swap; src: url('../font/oswald-latin-ext-300-normal.woff2') format('woff2'); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face {font-family: 'Oswald'; font-style: normal; font-weight: 300; font-display: swap; src: url('../font/oswald-latin-300-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face {font-family: 'Oswald'; font-style: normal; font-weight: 400; font-display: swap; src: url('../font/oswald-latin-ext-400-normal.woff2') format('woff2'); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face {font-family: 'Oswald'; font-style: normal; font-weight: 400; font-display: swap; src: url('../font/oswald-latin-400-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}


/* =============================================================================
 * reset & defaults
 * ========================================================================== */
* {margin: 0; padding: 0; border: 0; outline: 0; background-repeat: no-repeat;}
#wrapper * {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
ol, ul {list-style: none;}
table {border-spacing: 0;}

.float-left {float: left;}
.float-right {float: right;}
.image_container a {line-height: 0;}

.inside{position:relative;text-align:left}
.block{overflow:hidden}
.clear,#clear{height:0.1px;font-size:0.1px;line-height:0.1px;clear:both}
.invisible{width:0;height:0;left:-1000px;top:-1000px;position:absolute;overflow:hidden;display:inline}
header,footer,nav,section,aside,article,figure,figcaption{display:block}
#container:after {content: "\0020"; display: block; height: 0; clear: both; visibility: hidden;}

html {height: 100.1%; margin-bottom: 1px;}


/* =============================================================================
 * columns
 * ========================================================================== */
.full       	{overflow: hidden; margin-left: 0; width:100%; float:left; position:relative;}
.one_half		{overflow: hidden; margin-left: 4%; width:48%; float:left; position:relative;}
.one_third		{overflow: hidden; margin-left: 5%; width:30%; float:left; position:relative;}
.two_third		{overflow: hidden; margin-left: 5%; width:65%; float:left; position:relative;}
.one_fourth		{overflow: hidden; margin-left: 4%; width:22%; float:left; position:relative;}
.two_fourth		{overflow: hidden; margin-left: 4%; width:48%; float:left; position:relative;}
.three_fourth	{overflow: hidden; margin-left: 4%; width:74%; float:left; position:relative;}
.one_fifth		{overflow: hidden; margin-left: 5%; width:16%; float:left; position:relative;}
.two_fifth		{overflow: hidden; margin-left: 4%; width:37%; float:left; position:relative;}
.three_fifth	{overflow: hidden; margin-left: 4%; width:57%; float:left; position:relative;}
.four_fifth		{overflow: hidden; margin-left: 4%; width:79%; float:left; position:relative;}
.full.first, .one_fifth.first, .one_fourth.first, .two_fourth.first, .one_third.first, .two_fifth.first, .one_half.first, .three_fifth.first, .two_third.first, .three_fourth.first, .four_fifth.first {margin-left: 0!important; clear: left;}


/* =============================================================================
 * general styles & page setup
 * ========================================================================== */
a {color: #444; text-decoration: none;}
p {margin-bottom: 15px;}
#main a[target="_blank"], #main a.js_action-link {font-style: normal; text-decoration: underline; color: #003e90}
blockquote {font-style: italic; font-size: 16px; margin-bottom: 20px;}
blockquote p {line-height: 22px;}
iframe {max-width: 100%;}
#container .image_container img {width: 100%;}
code, pre {font-family: monospace;}
hr {padding: 0; border: none; border-top: medium double #ddd; color: #ccc; text-align: center; height: 1px; margin: 25px 0;}

/* headlines */
.as-h3 {font-family: 'Merriweather', serif; font-weight: 300; line-height: 1.3em; font-size: 18px; margin-bottom: 10px; background: url(../img/line-2.png) left bottom repeat-x; padding-bottom: 5px;}
h1, h2, h3, h4, h5, h6 {font-family: 'Merriweather', serif; font-weight: 300; line-height: 1.3em;}
h1 {font-size: 30px; margin-bottom: 20px;}
h2 {font-size: 22px; margin-bottom: 15px;}
h3 {font-size: 18px; margin-bottom: 10px; background: url(../img/line-2.png) left bottom repeat-x; padding-bottom: 5px;}
h4 {font-size: 18px; margin-bottom: 10px;}
h5 {font-size: 13px; margin-bottom: 10px;}
h6 {font-size: 13px; margin-bottom: 10px;}

/* body */
body {color: #595151; font-family: Arial, Verdana, sans-serif; line-height: 20px; font-size: 13px; overflow-x: hidden; background: #111;}

/* logo */
#logo {text-align: center; margin: 15px 0;}
#logo img {height: 160px; width: auto;}

/* menu */
#menu {float: left; width: 240px; background: url(../img/bg-menu.png) left bottom no-repeat; position: relative; padding-bottom: 60px;}

/* wrapper */
#wrapper {width: 960px; margin: 0 auto; position: relative; z-index: 1;}

/* container – [WP] rgba als Fallback, falls trsp-white-90.png fehlt */
#container {padding: 20px; margin-left: 260px; background: rgba(255,255,255,0.9) url(../img/trsp-white-90.png); box-shadow: 0px 0px 10px #222;}
body.without_content #container {display: none;}

/* footer */
#footer {border-top: 1px solid #ddd; clear: both;}
#footer .inside {overflow: hidden; padding: 25px 0 0 0;}
#footer li {display: inline-block; margin-right: 20px;}
#footer .socials ul {text-align: right;}
#footer .socials ul li {margin-left: 5px; margin-right: 0;}


/* =============================================================================
 * menue
 * ========================================================================== */
nav#mainmenu {overflow: visible!important; line-height: 0;}
nav#mainmenu ul {position: relative; width: 100%; white-space:nowrap; text-align: center;}
nav#mainmenu ul ul {width: auto; display: none;}
nav#mainmenu ul:after {content: ""; clear: both; display: block;}
nav#mainmenu ul li {position: relative; display: block; border-top: 1px solid #c1bdba; margin: 0 15px;}
nav#mainmenu ul li:hover > ul {display: block;}
nav#mainmenu ul li a {display: block; font-family: 'Oswald', serif; padding: 18px 0px; text-decoration: none; font-size: 18px; line-height: 18px; font-weight: 300;}
nav#mainmenu ul li a.first {border-top: 0;}
nav#mainmenu ul ul {left: 205px; border-radius: 0px; padding: 0; position: absolute; top: 0; z-index: 1000; text-align: left; background: rgba(255,255,255,0.9) url(../img/trsp-white-90.png) repeat;}
nav#mainmenu ul ul li {float: none; position: relative; border-top: 1px solid #ddd; margin: 0 5px; padding: 4px 0;}
nav#mainmenu ul ul li.first {border: 0;}
nav#mainmenu ul ul li a {padding: 9px 25px 7px 25px; color: #333; line-height: 1em; background: url(../img/icons/icon-arrow-gray.png) 5px center no-repeat; font-size: 14px; font-weight: 300;}
nav#mainmenu ul ul ul {position: absolute; left: 100%; top:0;}
nav#mainmenu ul a.trail,
nav#mainmenu ul a.active,
nav#mainmenu ul a:hover {background-color: rgba(0,0,0,0.05);}
nav#mainmenu ul a {transition: all 0.3s;}

/* subline in mainmenue */
nav#mainmenu span {display: block; line-height: 13px; margin-top: 10px; font-size: 13px; color: #7e7c7b;}
nav#mainmenu ul ul span {display: none;}

/* mobilenavi */
#mobnav {display: none;}
.selectnav {display: none;}


/* =============================================================================
 * features + content elements
 * ========================================================================== */
.back a:before {content: '\2039'; margin-right: 5px;}

/* table */
table {margin-bottom: 10px; border-bottom: solid 3px #E3E3E3; width: 100%;}
table td {border-top: solid 1px #E3E3E3; padding: 0.5em; text-align: left;}
table td p {margin: 0;}
table th {text-align: left; padding: 0.5em;}

/* image_container */
.image_container {position: relative; padding: 0; margin-bottom: 10px;}
.image_container .caption {background: #000; color: #fff; padding: 3px 6px; font-size: 11px; position: absolute; right: 0; bottom: 0; width: auto!important; opacity: 0.8;}
.image_container.float_right, .image_container.float_left {float: right; width: 45%; padding: 0; margin-bottom: 3%;}
.image_container.float_right {margin-left: 5%;}
.image_container.float_left {margin-right: 5%; float: left;}
.image_container img {width: 100%; display: block; height: auto;}

/* list */
.ce_text ul, .ce_list ul, .ce_text ol, .ce_list ol {margin-bottom: 15px;}
.ce_text li, .ce_list li, .ce_text ol, .ce_list ol {line-height: 1.5em;}
.ce_text ul li, .ce_list ul li {list-style-type: circle; list-style-position: outside;}
.ce_text ul {padding-left: 20px;}
.ce_text ol, .ce_list ol {list-style: decimal; padding-left: 25px;}
.ce_text ol ol, .ce_list ol ol {list-style: upper-alpha;}

/* blockquote – [WP] Zitatzeichen ohne Icon-Font */
.blockquote-a {padding-left: 35px; position: relative;}
.blockquote-a p {text-align: justify; font-family: Georgia, Times, serif; font-size: 13px; font-style: italic; line-height: 20px;}
.blockquote-a:before {font-family: Georgia, Times, serif; content: "\201C"; display: inline-block; position: absolute; top: -6px; left: 0; font-style: normal; font-size: 42px; line-height: 1;}
.blockquote-b {padding-left: 35px; position: relative; font-size: 17px; line-height: 24px;}
.blockquote-b:before {font-family: Georgia, Times, serif; content: "\2018"; display: inline-block; position: absolute; top: -4px; left: 0; font-style: normal; font-size: 36px; line-height: 1;}

/* content-boxes */
.content-box-a {background-color: #fefcf2; padding: 20px 20px 10px 20px; border: 1px solid #ccc; margin: 0 auto;}
.content-box-b {padding: 20px 20px 10px 20px; border: 1px solid #e9e7e7; border-radius: 10px; background: linear-gradient(#f1f1f1, #fff 15%);}
.content-box-c {padding: 20px 20px 10px 20px; border: 1px solid #ccc; border-radius: 10px;}
.content-box-e {padding: 20px 20px 10px 20px; border: 1px solid #E0E0E0; background: #F6F6F6; border-radius: 10px;}

/* dropcaps */
.dropcap-red p:first-letter   {font-size: 48px; float: left; display:block; margin:0 7px 0 0; line-height: 1; color: #8C2626;}
.dropcap-blue p:first-letter  {font-size: 48px; float: left; display:block; margin:0 7px 0 0; line-height: 1; color: #26738C;}
.dropcap-grey p:first-letter  {font-size: 48px; float: left; display:block; margin:0 7px 0 0; line-height: 1; color: #9B9B9B;}
.dropcap-black p:first-letter {font-size: 48px; float: left; display:block; margin:0 7px 0 0; line-height: 1; color: #000;}

/* buttons */
.button, input[type="submit"], input.submit {color: #fff; font-weight: bold; text-shadow: -1px -1px 1px rgba(0,0,0, 0.25); padding: 10px 12px; text-align: center; display: inline-block; margin-bottom: 18px; box-shadow: 0 2px 2px rgba(0,0,0, 0.2), inset 0 1px 0 rgba(255,255,255, 0.35), inset 0 10px 20px rgba(255,255,255, 0.12), inset 0 -10px 30px rgba(0,0,0, 0.12); background: #7a7a7a; cursor: pointer;}
.button:hover, input[type="submit"]:hover, input.submit:hover {color: #fff; text-decoration: none; box-shadow: 0 2px 1px rgba(0,0,0, 0.2), inset 0 1px 1px rgba(255,255,255, 0.5), inset 0 10px 20px rgba(255,255,255, 0.20), inset 0 -10px 20px rgba(0,0,0, 0.12);}
.button:active, input[type="submit"]:active, input.submit:active {box-shadow: inset 0 2px 2px rgba(0,0,0, 0.3), inset 0 10px 20px rgba(0,0,0, 0.08);}
.button.small {padding: 8px 10px; font-size: 11px;}
.button.large {padding: 15px 22px; font-size: 15px; line-height: 33px; vertical-align: middle;}
.button.rounded5 {border-radius: 5px;}

/* nachrichtenliste (Blog-Übersicht) */
.nachrichtenliste {margin-bottom: 25px; overflow: hidden; padding-bottom: 15px; border-bottom: 1px solid #ddd;}
.nachrichtenliste .image_container {width: 100%;}
.nachrichtenliste .image_container img {margin-bottom: 20px;}
.nachrichtenliste .date, .nachrichtenliste .author {margin-bottom: 10px; display: inline-block; font-size: 11px; margin-right: 20px;}
.nachrichtenliste .more {float: right;}
.nachrichtenliste .more a {color: #fff;}

/* nachrichtenleser (Blog-Beitrag) */
.nachrichtenleser .image_container {margin-bottom: 20px;}
.nachrichtenleser .date, .nachrichtenleser .author {margin-bottom: 10px; display: inline-block; font-size: 11px; margin-right: 20px;}
.nachrichtenleser .back {padding-top: 10px; margin-top: 10px; border-top: 1px solid #ddd;}
.nachrichtenleser .back a {font-size: 10px; text-transform: uppercase;}
.nachrichtenleser img {border: 1px solid #ddd;}

/* pagination */
.pagination {clear: both; border-top: 1px solid #ddd; padding-top: 5px; margin-top: 10px; overflow: hidden;}
.pagination .page-numbers {background: #333; display: block; float: left; margin-right: 1px; color: #fff; text-decoration: none; padding: 3px 7px;}
.pagination .page-numbers.current {background: #666;}

/* 404 */
#page-404 h1 {font-size: 120px; text-align: center; text-shadow: 0 -1px 1px #666666, 0 1px 1px #FFFFFF; color: #ccc; border: 0; margin: 0;}
#page-404 p {text-transform: uppercase; font-size: 20px; text-align: center;}
#page-404 p a {text-transform: none; margin: 0;}


/* =============================================================================
 * forms
 * ========================================================================== */
.input-wrapper {margin-bottom: 12px; position:inherit!important}
.input-wrapper * {width: 99.9%!important; margin-left: 0!important;}
.input-wrapper label, .captcha-container label {display: block;}
.ce_form .full {width: 99.9%;}
fieldset {border: 1px solid #ccc; padding: 0.5em; margin-bottom: 20px;}
legend {display: none;}
input, select, textarea {width: 100%; padding: 10px; margin: 0; border: 1px solid #ccc; color: #333; background: #F7F7F7; box-sizing: border-box; box-shadow: inset 0px 0px 1px 1px #ddd; font: inherit;}
input[type="submit"], input.submit {color: #fff;}
select {height: 35px; padding: 8px;}
textarea {height: 200px;}
.checkbox_container {margin-top: 1px;}
.checkbox_container label {float: none;}
.checkbox_container input {width: 20px!important; border: none!important; padding: 0; box-shadow: none;}
.checkbox_container legend {display: block; overflow: hidden;}
.checkbox_container span {display: block;}
.submit_container input {width: auto!important;}
.submit {-webkit-appearance:none;}
label.error {color: red;}
input.error, textarea.error, select.error {border: 1px solid red;}
p.error {color: red; clear: both;}
.ce_form .captcha {width: 20%; float: left; margin-right: 2%;}
.ce_form .captcha_text {width: 70%; float: left; line-height: 33px;}
.ce_form .captcha-container {background: #ecd0d0; padding: 2%; margin-bottom: 12px; overflow: hidden;}
span.mandatory {color: #c00; margin-left: 2px;}


/* =============================================================================
 * [WP] Ergänzungen für WordPress
 * ========================================================================== */

/* Vollbild-Hintergrund (ersetzt das jQuery-Plugin "supersized") */
#mabach-bg {position: fixed; inset: 0; z-index: 0; background-color: #111; background-position: center center; background-size: cover; background-repeat: no-repeat;}

/* Aktive Menüpunkte (WordPress setzt diese Klassen über den Walker wie Contao) */
nav#mainmenu ul ul li:first-child {border-top: 0;}

/* Fokus sichtbar halten */
a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {outline: 2px solid #003e90; outline-offset: 2px;}

/* Formular-Rückmeldungen */
.form-message {padding: 12px 15px; margin-bottom: 20px; border: 1px solid;}
.form-message.success {background: #eef7ee; border-color: #8bc48b; color: #2d5e2d;}
.form-message.error {background: #fbeeee; border-color: #d08b8b; color: #8c2626;}
.mabach-hp {position: absolute!important; left: -9999px!important; width: 1px; height: 1px; overflow: hidden;}

/* Gutenberg-Grundklassen */
.alignleft {float: left; margin: 0 5% 3% 0;}
.alignright {float: right; margin: 0 0 3% 5%;}
.aligncenter {display: block; margin-left: auto; margin-right: auto;}
.wp-block-image img {max-width: 100%; height: auto;}
.screen-reader-text {position: absolute!important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px);}

/* Admin-Leiste nicht über den Hintergrund legen */
body.admin-bar #mabach-bg {top: 32px;}


/* =============================================================================
 * media-queries - tablets
 * ========================================================================== */
@media only screen and (max-width: 980px) {
	#wrapper {width: 98%; max-width: 960px;}
	#logo {text-align: center; width: 100%; left: 0; top: -35px;}
	#mainmenu {position: static; text-align: center;}
}

/* =============================================================================
 * media-queries - phones
 * ========================================================================== */
@media only screen and (max-width: 767px) {
	#wrapper {width: 100%;}
	#menu {float: none; position: static; margin: 0 auto; background-position: top center;}
	body.without_content #menu {background-position: bottom center;}
	#container {margin: -50px 0 0 0; background: #fff;}
	#logo {margin: 0;}
	#mobilenavicenter {text-align: center;}
	#dropdown {display: none;}
	.selectnav {display: inline-block; width: 80%; margin: 10px 0; text-align: center;}
	.full, .one_half, .one_third, .two_third, .one_fourth, .two_fourth, .three_fourth, .one_fifth, .two_fifth, .three_fifth, .four_fifth {width: 100%; margin: 0 0 15px 0;}
	.image_container {margin-bottom: 10px;}
	#footer .one_half {text-align: center;}
	#footer .socials ul {text-align: center; margin-top: 10px;}
	html {-webkit-text-size-adjust: none;}
	table {font-size: 9px;}
}
@media only screen and (max-width: 782px) {
	body.admin-bar #mabach-bg {top: 46px;}
}
@media (prefers-reduced-motion: reduce) {
	nav#mainmenu ul a {transition: none;}
}