/*
Theme Name: kulturstadt
Theme URI: http://www.bytesbones.ch
Author: Klaus Affolter
Author URI: http://www.bytesbones.ch
Description: Wordpress-Theme von kulturstadt.
Version: 1.2
Tags: none
Text Domain: kulturstadt
*/


/* Reset
-------------------------------------------------------------- */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	vertical-align: baseline;
}

html {
	overflow:hidden;
	overflow-y:scroll;
	-webkit-text-size-adjust:100%;
	-ms-text-size-adjust:100%;
}
:focus {
	outline:none;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}
td {
	vertical-align: top;
}
sup {
	font-size:11px;
	vertical-align:top;
	padding-left:3px;
	padding-right:3px;
}
/*padding egalisieren*/
*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}



/* schriften
-------------------------------------------------------------- */
@font-face {
    font-family: 'Roboto-Regular';
    src:url('bb-schriften/Roboto-Regular.woff') format('woff'),
        url('bb-schriften/Roboto-Regular.woff2') format('woff2'),
        url('bb-schriften/Roboto-Regular.svg#Roboto-Regular') format('svg'),
        url('bb-schriften/Roboto-Regular.eot'),
        url('bb-schriften/Roboto-Regular.eot?#iefix') format('embedded-opentype'),
        url('bb-schriften/Roboto-Regular.ttf') format('truetype');

    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Roboto-Italic';
    src:url('bb-schriften/Roboto-Italic.woff') format('woff'),
        url('bb-schriften/Roboto-Italic.woff2') format('woff2'),
        url('bb-schriften/Roboto-Italic.svg#Roboto-Italic') format('svg'),
        url('bb-schriften/Roboto-Italic.eot'),
        url('bb-schriften/Roboto-Italic.eot?#iefix') format('embedded-opentype'),
        url('bb-schriften/Roboto-Italic.ttf') format('truetype');

    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Roboto-Bold';
    src:url('bb-schriften/Roboto-Bold.woff') format('woff'),
        url('bb-schriften/Roboto-Bold.woff2') format('woff2'),
        url('bb-schriften/Roboto-Bold.svg#Roboto-Bold') format('svg'),
        url('bb-schriften/Roboto-Bold.eot'),
        url('bb-schriften/Roboto-Bold.eot?#iefix') format('embedded-opentype'),
        url('bb-schriften/Roboto-Bold.ttf') format('truetype');

    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Roboto-Black';
    src:url('bb-schriften/Roboto-Black.woff') format('woff'),
        url('bb-schriften/Roboto-Black.woff2') format('woff2'),
        url('bb-schriften/Roboto-Black.svg#Roboto-Black') format('svg'),
        url('bb-schriften/Roboto-Black.eot'),
        url('bb-schriften/Roboto-Black.eot?#iefix') format('embedded-opentype'),
        url('bb-schriften/Roboto-Black.ttf') format('truetype');

    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


/* farben
-------------------------------------------------------------- */
:root {
  --orange:rgb(241,95,44);
  --petrol:rgb(89,191,209);
}



/*wartung*/
.wartungsbutton {
	position:fixed;
	bottom:20px;
	right:20px;
	height:20px;
	width:20px;
	cursor:pointer;
	z-index:201;
	font:14px/18px sans-serif;
	outline:1px solid #bbb;
	display:none;
}
.wartungsbutton-2 {
	position:fixed;
	bottom:20px;
	right:60px;
	height:20px;
	width:20px;
	cursor:pointer;
	z-index:201;
	font:14px/18px sans-serif;
	background:url(images/absatz-ausrichtung.png);
	background-repeat:no-repeat;
	background-position:0px 2px;
	display:none;
}
.wartungsbutton-2.aktiv {
	background-position:0px -48px;
}	
.rahmenanzeigen {
	outline:1px solid #d00;
}

/* Layout
-------------------------------------------------------------- */

body {
	margin:0px;
	padding:0px;
	background:#fff;
}



.kopfzeile {
	position:fixed;
	top:0px;
	height:70px;
	width:100%;
	background:#fff;
	border-bottom: 1px solid var(--orange);
	display:block;
	overflow:visible;
	z-index:101;
}
.kopfzeile-innen {
	position:relative;
	height:100%;
	width:1140px;
	display:block;
	overflow:visible;
	margin-left:auto;
	margin-right:auto;
}




.banner {
	width:100%;
	height:40vh;
	margin-top:70px;
	display:block;
	background-blend-mode: multiply;
	z-index:1;
}
.banner .logo-gross {
	position:relative;
	width:650px;
	height:250px;
	margin-left:auto;
	margin-right:auto;
	top:calc(20vh - 125px);
	background:url(images/logo-ksj-gross.png);
	background:url(images/logo-ksj-gross.svg), linear-gradient(transparent, transparent);
	background-size:100% auto;
	background-repeat:no-repeat;
   	-webkit-transition: height 0.4s ease-out, width 0.4s ease-out;
	-moz-transition: height 0.4s ease-out, width 0.4s ease-out;
	transition: height 0.4s ease-out, width 0.4s ease-out;
}

/* beitraege, personen, organisationen mit schliessbutt 50px + 10px */
.konsole {
	position:relative;
	margin-top:110px;
	min-height:calc(100vh - 110px - 170px);/* - margin-top - fuss */
	width:750px;
	margin-left:auto;
	margin-right:auto;
	background:#fff;
}
.konsole .site-content {
	width:100%;
	padding-bottom:60px;
}
.konsole .spalte-rechts {
	display:none;
}

/* seiten */
.konsole-seite {
	margin-top:40px;
	min-height:auto;
}
.konsole-seite.ohne-banner {
	margin-top:110px;
	min-height:calc(100vh - 110px - 170px);/* - margin-top - fuss */
}
.konsole-seite.mit-banner {
	min-height:calc(100vh - 110px - 40vh - 170px);/* - margin-top - banner - fuss */
}

/* blog-uebersicht */
.konsole-breit {
	margin-top:40px;
	width:1140px;
	min-height:auto;
}
.konsole-breit .site-content {
	width:750px;
	margin-right:105px;
	margin-bottom:60px;
	clear:both;
	float:left;
}
.konsole-breit .spalte-rechts {
	float:left;
	width:285px;
	display:block;
	margin-bottom:60px;
}


/*rest */
.fusszeile {
	clear:both;
	position:relative;
	width:100%;
	height:170px;
	padding:32px 0px 0px 0px;
	color:#fff;
	background: var(--orange);
	display:block;
}
.fusszeile-innen {
	position:relative;
	width:1140px;
	display:block;
	overflow:visible;
	margin-left:auto;
	margin-right:auto;
}
.clearer {
	width:100%;
	height:0px;
	overflow:hidden;
	display:block;
	clear:both;
	background:#d00;
}



/* kopfzeile
-------------------------------------------------------------- */
.logo {
	width:112px;
	height:112px;
	margin-top:14px;
	display:block;
	float:left;
	background:url(images/logo-ksj.png);
	background:url(images/logo-ksj.svg), linear-gradient(transparent, transparent);
	background-size:100% auto;
	background-repeat:no-repeat;
}
.hauptnav {
	width:650px;
	margin-top:20px;
    margin-left:132px;
	float:left;
}

.hauptnav ul {
	display: flex;
    justify-content: space-between;
}
.kopfzeile .sm-buttons {
	float:right;
	margin-top:26px;
}

/* blog uebersicht
-------------------------------------------------------------- */
.konsole-breit .entry-summary {
	margin-bottom:36px;
	padding-bottom:18px;
	border-bottom:1px solid var(--orange);	
}
.konsole-breit p.artikelkats {
	margin-top:-18px;
	margin-bottom:24px;
}

.spalte-rechts div.jahre {
	margin-top:48px;
}

/* einzelner beitrag
-------------------------------------------------------------- */
.schliessbutt {
	width:50px;
	height:50px;
	margin-left:710px;
	margin-bottom:10px;
	display:block;
	background:url(images/schliessbutt.png);
	background:url(images/schliessbutt.svg), linear-gradient(transparent, transparent);
	background-size:40px auto;
	background-position:5px 5px;
	background-repeat:no-repeat;
	cursor:pointer;
}
.schliessbutt:hover, .schliessbutt:active, .schliessbutt:focus {
	background-position:5px -43px;
}
.konsole-schmal p.artikelkats {
	margin-top:-18px;
	margin-bottom:24px;
}

/* personen kurz
-------------------------------------------------------------- */
.personencontainer {
	margin-bottom:18px;
	padding:20px;
	display:grid;
	grid-template-columns: 230px auto;
	grid-column-gap: 40px;
	border:1px solid var(--orange);
}
.personenbild {
	width:230px;
	height:230px;
	display:block;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	border-radius: 50%;
}
.personenbild:hover {
	background-blend-mode: luminosity;	
}
.personentext {
	display:flex;
	justify-content: center;
	flex-direction: column;
}

/* organisationen kurz
-------------------------------------------------------------- */
.organisationencontainer {
	margin-bottom:18px;
	padding:20px;
	display:grid;
	grid-template-columns: 230px auto;
	grid-column-gap: 40px;
	border:1px solid var(--orange);
}
.organisationenbild {
	width:230px;
	height:230px;
	display:block;
}
.organisationenbild:hover {
	background:var(--petrol);
	background-blend-mode: darken;
}
.organisationentext {
	display:flex;
	justify-content: center;
	flex-direction: column;
}

/* fusszeile
-------------------------------------------------------------- */
.fusszeile-innen {
	display:grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
	grid-column-gap: 0px;
}
.fusszeile-innen div.spalte {
	border-right:1px solid #fff;
	padding:0px 20px 0px 20px;
}
.fusszeile-innen div.spalte:last-of-type {
	border-right:0px;
}
.fusszeile-innen .spalte-1 {
	background:url(images/logo-ksj-gross.png);
	background:url(images/logo-ksj-gross.svg), linear-gradient(transparent, transparent);
	background-size:90% auto;
	background-position:left top;
	background-repeat:no-repeat;
}
.fusszeile .sm-buttons {
	display: flex;
    justify-content: space-between;
    padding-top:24px;
}

/* Textformate
-------------------------------------------------------------- */
body, td {
	font:18px/28px Roboto-Regular,sans-serif;
}
h1 {
	font:24px/28px Roboto-Bold, helvetica, sans-serif;
	font-weight:normal;
	color:var(--orange);
	margin-top:0px;
	margin-bottom:24px;
	clear:both;
}	
h1.haupttitel {/* «Artikel» auf blog-uebersicht */
	font:24px/28px Roboto-Black, helvetica, sans-serif;
	text-transform:uppercase;
}
h2 {
	font:24px/28px Roboto-Bold, helvetica, sans-serif;
	font-weight:normal;
	color:var(--orange);
	margin-top:36px;
	margin-bottom:24px;
	clear:both;
}
.konsole-seite h1,
.konsole-seite h2 {
	font:40px/46px Roboto-Bold, helvetica, sans-serif;
}
h3 {
	font:18px/21px Roboto-Bold, helvetica, sans-serif;
	font-weight:normal;
	color:var(--orange);
	margin-top:32px;
	margin-bottom:18px;
	clear:both;
}	
h4 {
	font:18px/21px Roboto-Bold, helvetica, sans-serif;
	font-weight:normal;
	color:var(--orange);
	margin-top:32px;
	margin-bottom:0px;
	clear:both;
}	

.site-content p {
	margin-bottom:18px;
}

.site-content ul {
    list-style: url(images/aufzaehlung.png?ver=1.2) outside none; 
	margin-bottom:18px;
	margin-left:18px;
}
.site-content ol {
	margin-bottom:18px;
	margin-left:30px;
}
p.lead, b, strong {
	font-family:Roboto-Bold, helvetica, sans-serif;
	font-weight:normal;
}
p.linie {
	width:100%;
	margin-top:-18px;
	margin-bottom:24px;
	border-bottom:1px solid var(--orange);
}

@supports (hyphens: auto) or (-ms-hyphens: auto) or (-moz-hyphens: auto) or (-webkit-hyphens: auto) {

	.site-content p.blocksatz {
		text-align:justify;
	}
	.site-content p.blocksatz {
		
		/*safari*/
		-webkit-hyphens: auto;
		-webkit-hyphenate-limit-before: 3;
		-webkit-hyphenate-limit-after: 3;
		-webkit-hyphenate-limit-chars: 4 2 2;
		-webkit-hyphenate-limit-lines: 3;
		-webkit-hyphenate-limit-last: always;
		-webkit-hyphenate-limit-zone: 8%;
		
		/*firefox*/
		-moz-hyphens: auto;
		-moz-hyphenate-limit-chars: 4 2 2;
		-moz-hyphenate-limit-lines: 3;
		-moz-hyphenate-limit-last: always;
		-moz-hyphenate-limit-zone: 8%;
		
		/*ie 10, edge*/
		-ms-hyphens: auto;
		-ms-hyphenate-limit-chars: 4 2 2;
		-ms-hyphenate-limit-lines: 3;
		-ms-hyphenate-limit-last: always;
		-ms-hyphenate-limit-zone: 8%;
		
		/*normal*/
		hyphens: auto;
		hyphenate-limit-chars: 4 2 2;
		hyphenate-limit-lines: 3;
		hyphenate-limit-last: always;
		hyphenate-limit-zone: 8%;
	}
}


/* fusszeile */
.fusszeile h4 {
	font:14px/18px Roboto-Bold, helvetica, sans-serif;
	font-weight:normal;
	margin-top:0px;
	margin-bottom:14px;
	color:#fff;
	text-transform:uppercase;
}
.fusszeile p {
	font:14px/18px Roboto-Regular,sans-serif;
}

/* personen & organisationen kurz */
.personencontainer h4,
.organisationencontainer h4 {
	font:24px/28px Roboto-Black, helvetica, sans-serif;
	font-weight:normal;
	color:var(--orange);
	margin-top:0px;
	padding-bottom:24px;
	border-bottom:1px solid var(--orange);
}
p.personenlead,
p.organisationenlead {
	padding:12px 0px 12px 0px;
	margin:0px;
	border-bottom:1px solid var(--orange);
}
.site-content p.personenkontakt,
.site-content p.organisationenkontakt {
	padding-top:12px;
	margin-bottom:0px;
}
.personencontainer p.zitat {
	font:24px/34px Roboto-Italic, sans-serif;
	color:var(--orange);
	text-align:left;
	border-top:1px solid var(--orange);
	margin:12px 0px 0px 0px;
	padding:12px 0px 0px 0px;
}

/* personen lang */
p.zitat {
	font:24px/34px Roboto-Italic, sans-serif;
	color:var(--orange);
	text-align:center;
	margin:0px 0px 32px 0px;
}
body.single-bb_person p.personenkontakt {
	padding:12px 0px 12px 0px;
	margin-bottom:32px;
	border-top:1px solid var(--orange);
	border-bottom:1px solid var(--orange);
}
div.personenpolitik,
div.personenuebrige {
	margin:32px 0px 32px 0px;
	padding-top:32px;
	border-top:1px solid var(--orange);
}
div.personenuebrige p,
div.personenpolitik p {
	margin:0px;
}

/* organisationen lang */
body.single-bb_organisation p.organisationenkontakt {
	padding:12px 0px 12px 0px;
	margin-bottom:32px;
	border-top:1px solid var(--orange);
	border-bottom:1px solid var(--orange);
}
div.organisationenuebrige {
	margin:32px 0px 32px 0px;
	padding-top:32px;
	border-top:1px solid var(--orange);
}
div.organisationenuebrige p {
	margin:0px;
}


/* Blogseite */
.konsole p.artikeldatum {
	color:var(--orange);
	margin-bottom:0px;	
}
.konsole-breit h2 {
	font:24px/28px Roboto-Bold, helvetica, sans-serif;
	font-weight:normal;
	color:var(--orange);
	margin-top:0px;
}
.entry-summary p.lead {
	font-family:Roboto-Regular, helvetica, sans-serif;
}
p.artikelkats {
	font:14px/21px Roboto-Regular,sans-serif;
	text-transform:uppercase;
}
.konsole-breit .spalte-rechts h3 {
	font:24px/28px Roboto-Black, helvetica, sans-serif;
	text-transform:uppercase;
	margin-bottom:24px;
	margin-top:0px;
}

.seitennavigation {
	margin-top:32px;
	clear:both;
}
.site-content .seitennavigation a, .site-content .seitennavigation .platzhalter {
	font:18px/22px Roboto-Regular, sans-serif;
	width:30px;
	height:30px;
	padding-top:4px;
	margin-right:6px;
	margin-bottom:6px;
	float:left;
	text-align:center;
	display:block;
	border:1px solid var(--orange);
}
.site-content .seitennavigation .aktiv, .site-content .seitennavigation a:hover {
	color:#fff;
	background:var(--orange);
}	
.site-content .seitennavigation .unsichtbar {
	display:none;
}
.site-content .seitennavigation .platzhalter {
	width:32px;
	height:20px;
	border:0;
}



/* Bilder und Legenden
-------------------------------------------------------------- */
.site-content img {
	margin:14px 0px 14px 0px;
	padding:0px;
	vertical-align: bottom;
	max-width:100%;
	height:auto;
}
.site-content .wp-caption {
	max-width:100%;
}
.site-content img.personenbildgross,
.site-content img.organisationenbildgross,
.site-content img.bildoben {
	margin:0px 0px 32px 0px;
}
.site-content img.organisationenbildgross {
	max-width:50%;	
}

.site-content p.bildlegende {
	font:16px/21px Roboto-Italic, sans-serif;
	margin-top:-24px;
	margin-bottom:24px;
}
.site-content p.wp-caption-text {
	font:16px/21px Roboto-Italic, sans-serif;
	margin-top:-8px;
	margin-bottom:24px;
}


/* video inkl. responsive
------------------------------------------------------------ */
.video-container {
	position: relative;
	padding-bottom: 56.25%;
	/*padding-top: 30px; weglassen? */
	height: 0;
	overflow: hidden;
	margin-top:6px;
	margin-bottom:20px;
	width:100%;
}

.video-container iframe,  
.video-container object,  
.video-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* Links
-------------------------------------------------------------- */
.site-content a {
	color:var(--orange);
	text-decoration:none;
}
.site-content a:hover {
	color:var(--petrol);
}
a.weiterlesenlink {
	width:30px;
	display:inline-block;
	background:url(images/pfeile.png?ver=1.3);
	background-size:20px auto;
	background-repeat:no-repeat;
	background-position:5px 8px;
}
a.weiterlesenlink:hover {
	background-position:5px -17px;
}

p.zuruecklink span {
	cursor:pointer;
	width:30px;
	display:inline-block;
	background:url(images/pfeile.png?ver=1.3);
	background-size:20px auto;
	background-repeat:no-repeat;
	background-position:0px -42px;
}
p.zuruecklink span:hover {
	background-position:0px -67px;
}

.kopfzeile a {
	text-decoration:none;
}

/* sm */

.kopfzeile .sm-buttons a {
	width:18px;
	height:18px;
	margin-left:36px;
	display:inline-block;
	background:url(images/sm-buttons-orange.png?ver=1.1);
	background:url(images/sm-buttons-orange.svg?ver=1.1), linear-gradient(transparent, transparent);
	background-size:auto 100%;
	background-repeat:no-repeat;
	background-position:0px 0px;
}
.kopfzeile .sm-buttons a:first-of-type {
	margin-left:0px;
}	
.kopfzeile .sm-buttons a.insta-link {
	background-position:-30px 0px;
}
.kopfzeile .sm-buttons a.tw-link {
	background-position:-60px 0px;
}
.kopfzeile .sm-buttons a:hover {
	background-position:-150px 0px;
}
.kopfzeile .sm-buttons a.insta-link:hover {
	background-position:-180px 0px;
}
.kopfzeile .sm-buttons a.tw-link:hover {
	background-position:-210px 0px;
}


.personenuebrige p.sm-buttons,
.organisationenuebrige p.sm-buttons {
	margin-top:12px;
}
.personenuebrige .sm-buttons a.sm-link,
.organisationenuebrige .sm-buttons a.sm-link {
	width:24px;
	height:24px;
	margin-right:12px;
	display:inline-block;
	background:url(images/sm-buttons-orange.png?ver=1.2);
	background:url(images/sm-buttons-orange.svg?ver=1.2), linear-gradient(transparent, transparent);
	background-size:auto 100%;
	background-repeat:no-repeat;
	background-position:0px 0px;
}
.personenuebrige .sm-buttons a.insta-link,
.organisationenuebrige .sm-buttons a.insta-link {
	background-position:-40px 0px;
}
.personenuebrige .sm-buttons a.tw-link,
.organisationenuebrige .sm-buttons a.tw-link {
	background-position:-80px 0px;
}
.personenuebrige .sm-buttons a.li-link,
.organisationenuebrige .sm-buttons a.li-link {
	background-position:-120px 0px;
}
.personenuebrige .sm-buttons a.ti-link,
.organisationenuebrige .sm-buttons a.ti-link {
	background-position:-160px 0px;
}

.personenuebrige .sm-buttons a.sm-link:hover,
.organisationenuebrige .sm-buttons a.sm-link:hover {
	background-position:-200px 0px;
}
.personenuebrige .sm-buttons a.insta-link:hover,
.organisationenuebrige .sm-buttons a.insta-link:hover {
	background-position:-240px 0px;
}
.personenuebrige .sm-buttons a.tw-link:hover,
.organisationenuebrige .sm-buttons a.tw-link:hover {
	background-position:-280px 0px;
}
.personenuebrige .sm-buttons a.li-link:hover,
.organisationenuebrige .sm-buttons a.li-link:hover {
	background-position:-320px 0px;
}
.personenuebrige .sm-buttons a.ti-link:hover,
.organisationenuebrige .sm-buttons a.ti-link:hover {
	background-position:-360px 0px;
}



.fusszeile .sm-buttons a {
	width:38px;
	height:38px;
	display:inline-block;
	background:url(images/sm-buttons-weiss.png?ver=1.1);
	background:url(images/sm-buttons-weiss.svg?ver=1.1), linear-gradient(transparent, transparent);
	background-size:auto 100%;
	background-repeat:no-repeat;
	background-position:0px 0px;
	text-decoration:none;
}
.fusszeile .sm-buttons a.insta-link {
	background-position:-63px 0px;
}
.fusszeile .sm-buttons a.tw-link {
	background-position:-126px 0px;
}
.fusszeile .sm-buttons a:hover {
	background-position:-191px 0px;
}	
.fusszeile .sm-buttons a.insta-link:hover {
	background-position:-254px 0px;
}
.fusszeile .sm-buttons a.tw-link:hover {
	background-position:-317px 0px;
}

/* blog */
.konsole-breit h2 a {
	color:var(--orange);
}
.artikelkats a {/* unter lead */
	padding-right:10px;
}	

.kategorien a {
	color:var(--orange);
	text-decoration:none;
	text-transform:uppercase;
	padding:4px 0px 4px 4px;
	display:block;
	border-bottom: 1px solid var(--orange);
}
.kategorien a.aktiv, .kategorien a:hover, .kategorien a:active, .kategorien a:focus {
	color:#fff;
	background:var(--orange);
}
.artikelkats span.raute,
.kategorien span.raute,
div.scrolllinks span.raute {
	padding-right:2px;
}

.jahre {
	text-align:justify;
}
.jahre a {
	color:var(--orange);
	text-decoration:none;
	padding:0px 6px 0px 6px;
}	
.jahre a.aktiv, .jahre a:hover, .jahre a:active, .jahre a:focus {
	background:var(--orange);
	color:#fff;
}
.jahre-leer {/* um blocksatz zu erzwingen */
	padding:0px 6px 0px 6px;
	width:52px;
	display:inline-block;
}
span.abstand {/* zwischen punkt und "alle" --> responisve */
	display:inline-block;
	width:7px;
}

/* tel & mail */
.tellink, .emaillink, .weblink {
	padding-left:28px;
	background:url(images/kontaktlinks-neu.png?ver=1.1);
	background-size:20px auto;
	background-repeat:no-repeat;
	background-position:0px 0px;
}
.emaillink {
	background-position:0px -37px;
}
.weblink {
	background-position:0px -182px;
}

.tellink:hover, .tellink:active, .tellink:focus {
	background-position:0px -85px;
}
.emaillink:hover, .emaillink:active, .emaillink:focus {
	background-position:0px -122px;
}
.weblink:hover, .weblink:active, .weblink:focus {
	background-position:0px -230px;
}

.fusszeile a {
	color:#fff;
	text-decoration:none;
}
.fusszeile a:hover, .fusszeile a:active, .fusszeile a:focus {
	color:var(--petrol);
}

/* nav
-------------------------------------------------------------- */
.hauptnav ul {
	font:18px/24px Roboto-Regular, sans-serif;
	text-transform:uppercase;
}


.hauptnav ul li {
    display: block;
    float:left;
    white-space: nowrap;
	list-style:none;
    margin: 0;
    padding: 0px 0px 20px 0px;
    vertical-align:top;
    overflow:hidden;
	/*outline:1px solid #aaa;
   	-webkit-transition: height 0.4s ease-out;
	-moz-transition: height 0.4s ease-out;
	transition: height 0.4s ease-out;	*/

}
.hauptnav ul li:last-of-type {
    margin-right:0px;
}	
.hauptnav ul li a, .hauptnav ul li span.linkleer {/*runde ecken unten*/
    width:100%;
    padding:4px 0px 4px 0px;
    display: block;
    text-decoration:none;
}
.hauptnav ul li span.linkleer {
	cursor:pointer;
}
.hauptnav ul li ul {
 	position: absolute;
 	margin-top:17px;
 	margin-left:-20px;
	min-width:150px;
	padding:0px;
 	position: absolute;
    display:none;
}
.hauptnav ul li ul li ul {
    display:none;
}
.hauptnav ul li.current_page_parent ul,
.hauptnav ul li.current_page_item ul {
    /*display:block;*/
}
.hauptnav ul li ul.navlevel-2,
.hauptnav ul li.current_page_parent ul.navlevel-2 {
    display:none;
}
.hauptnav ul li ul li {
	margin:0px;
    padding:0px;
	float:none;
}
.hauptnav ul li ul li a {
	display:block;
    padding: 8px 10px 8px 20px;
}



/* farben ////////// */
.hauptnav a, .hauptnav span {
	color:var(--orange);
	border-bottom:1px solid #fff;
}
.hauptnav .current_page_item a,
.hauptnav .current_page_ancestor a, 
.hauptnav .current_page_parent a,
.hauptnav .current_page_item span,
.hauptnav .current_page_ancestor span, 
.hauptnav .current_page_parent span {
	border-bottom:1px solid var(--orange);
}

body.single-bb_person .hauptnav .current_page_item a {
	border-bottom:1px solid #fff;
}

/* 2. stufe */
.hauptnav ul li ul {
	background:var(--orange);
}

.hauptnav ul li ul a {
	color:#fff;
	border-bottom:0;
}

.hauptnav .current_page_parent ul li a {
	border-bottom:0;
}

.hauptnav .current_page_parent ul .current_page_item a,
.hauptnav .current_page_item ul .current_page_item a {
	background:#fff;
	color:var(--orange);
}

/* hover ///////////////// */
.hauptnav a:hover, .hauptnav span:hover {
	border-bottom:1px solid var(--orange);
}
.hauptnav ul li span.linkleer {
    /*border-bottom:5px solid #fff;*/
}
.hauptnav ul li span.linkleer:hover,
.hauptnav ul li.page_item_has_children:hover span.linkleer {
	border-bottom:1px solid var(--orange);
}

.hauptnav ul li.page_item_has_children:hover ul {
	display:block;
	height:auto;
	opacity:1;
}
.hauptnav ul li.page_item_has_children:hover ul li ul {
	display:none;
}

.hauptnav ul li ul a:hover,
.hauptnav .current_page_parent ul a:hover,
.hauptnav .current_page_item ul a:hover {
	background:#fff;
	color:var(--orange);
	border-bottom:0;
}



/*hilfsklasse fuer jquery-click-events in scripts.js*/
.sichtbar {
	display:block;
}

/* nav mobile */
.hauptnav-mobile {
	position:fixed;
	top:50px;
	right:calc(-100vw - 600px);
	width:100%;
	min-height:34vh;
	background:var(--orange);
	z-index:100;
   	-webkit-transition: right 0.5s ease-in;
	-moz-transition: right 0.5s ease-in;
	transition: right 0.5s ease-in;	*/
}
.hauptnav-mobile.offen {
	right:0px;
   	-webkit-transition: right 0.5s ease-out;
	-moz-transition: right 0.5s ease-out;
	transition: right 0.5s ease-out;	*/
}
.hauptnav-mobile ul {
	position:relative;
	width:600px;
	margin-left:auto;
	margin-right:auto;
	margin-top:50px;
	padding: 0px 0px 20px 0px;
	font:18px/24px Roboto-Regular, sans-serif;
	text-transform:uppercase;
}

.hauptnav-mobile ul li {
    display:block;
    white-space: nowrap;
	list-style:none;
    margin: 0;
	padding: 0px;
    vertical-align:top;
    overflow:hidden;
    /*cursor:pointer;
	outline:1px solid #aaa;
   	-webkit-transition: height 0.4s ease-out;
	-moz-transition: height 0.4s ease-out;
	transition: height 0.4s ease-out;	*/
}
.hauptnav-mobile ul li a, .hauptnav-mobile ul li span.linkleer {
    display:block;
    text-decoration:none;
    color:#fff;
    padding:4px 0px 4px 10px;
    border-bottom:1px solid var(--orange);
}
.hauptnav-mobile ul li ul li a {
    padding:4px 0px 4px 30px;
    border-bottom:1px solid var(--orange);
}
.hauptnav-mobile ul li span.linkleer {
	cursor:pointer;
}

/* submenu auf-zu */
.hauptnav-mobile ul li ul {
	margin-top:0px;
	margin-bottom:0px;
	max-height:0px;
	padding: 0px;
	overflow:hidden;
   	-webkit-transition: max-height 0.4s ease-out;
	-moz-transition: max-height 0.4s ease-out;
	transition: max-height 0.4s ease-out;
}
.hauptnav-mobile ul li.offen ul {
	max-height:400px;
   	-webkit-transition: max-height 0.8s ease-out;
	-moz-transition: max-height 0.8s ease-out;
	transition: max-height 0.8s ease-out;
}

.hauptnav-mobile ul li.current_page_parent ul,
.hauptnav-mobile ul li.current_page_item ul {
    display:block;
}
.hauptnav-mobile ul li ul li {
 	float:none;
}
.hauptnav ul li ul li a {
}

.hauptnav-mobile ul li ul li ul,
.hauptnav-mobile ul li.current_page_parent ul li ul,
.hauptnav-mobile ul li.current_page_item ul li ul {
	display:none;
}



.hauptnav-mobile span.plusminus {
	padding-left:30px;
	background-image:url(images/plusminus.png);
	background-size:30px auto;
	background-repeat:no-repeat;
	background-position: -11px 5px;
}
.hauptnav-mobile .current_page_parent span.plusminus {
	background-position: 10px 5px;
}

.hauptnav-mobile .offen span.plusminus {
	background-position: -11px -35px;
}
.hauptnav-mobile .current_page_parent.offen span.plusminus {
	background-position: 10px -35px;
}


/* farben mobile */
.hauptnav-mobile .current_page_item a,
.hauptnav-mobile .current_page_parent span.linkleer {
	background:#fff;
	color:var(--orange);
}
.hauptnav-mobile .current_page_parent ul li a,
.hauptnav-mobile .current_page_item ul li a {
	background:var(--orange);
	color:#fff;
}
.hauptnav-mobile .current_page_parent ul .current_page_item a,
.hauptnav-mobile .current_page_item ul .current_page_item a {
	background:#fff;
	color:var(--orange);
}