/* /////////////////////////////////////////////// 
RESPONSIVE
/////////////////////////////////////////////// */

#menuebutton {
	margin-top:10px;
	width:48px;
	height:40px;
	float:right;
	background-image:url(images/menuebutt.png);
	background-image:url(images/menuebutt.svg), linear-gradient(transparent, transparent);
	background-repeat:no-repeat;
	background-size:38px auto;
	background-position:10px 0px;
	cursor:pointer;
	display:none;
}

#menuebutton.aktiv {
	background-position:10px -56px;
}
/* scroll-links */
.mobile-only {
	display:none;
}
.mobile-only.scrolllinks {
	margin-top:-21px;
	margin-bottom:24px;

}
.mobile-only #katscroll,
.mobile-only #jahrescroll {
	cursor:pointer;
	padding-right:10px;
	font:13px/18px Roboto-Regular,sans-serif;
	text-transform:uppercase;
	color:var(--orange);
}

.mobile-only.topscroll {
	position:relative;
	width:50px;
	height:50px;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:20px;
	cursor:pointer;
	background:url(images/pfeile-hoch.png?ver=1.3);
	background-size:auto 20px;
	background-repeat:no-repeat;
	background-position:18px 4px;
}
.mobile-only.topscroll:hover {
	background-position:-64px 4px;
}

.site-content .mobile-only.topscroll {
	margin-top:0px;
	margin-bottom:0px;
	background-position:18px 14px;
}
.sitecontent .mobile-only.topscroll:hover {
	background-position:-64px 14px;
}

.konsole-schmal .mobile-only.topscroll {
	display:none;
}

/* mobilenav ausblenden */
@media only screen and (min-width: 921px){
	.hauptnav-mobile {
		height:0px;
		opacity:0;
		overflow:hidden;
		display:none;
	}
}


/* kleiner 1 */
@media only screen and (max-width: 1250px) {
	.kopfzeile-innen {
		width:1000px;
	}
	.hauptnav {
		width:580px;
	    margin-left:98px;
	}
	.banner {
		height:38vh;
	}
	.banner .logo-gross {
		width:580px;
		height:225px;
		top:calc(19vh - 110px);
	}
	
	
	/* normale seiten und beitraege, personen, organisationen mit schliessbutt 50px + 10px */
	.konsole {
		width:680px;
	}
	.schliessbutt {
		margin-left:640px;
	}
	.konsole-seite.mit-banner {
		min-height:calc(100vh - 110px - 38vh - 170px);/* - margin-top - banner - fuss */
	}



	/* blog-uebersicht */
	.konsole-breit {
		width:1000px;
	}
	.konsole-breit .site-content {
		width:680px;
		margin-right:60px;
	}
	.konsole-breit .spalte-rechts {
		float:left;
		width:260px;
	}

	/* personen & organisationen kurz */
	.personencontainer,
	.organisationencontainer {
		grid-template-columns: 180px auto;
		grid-column-gap: 30px;
	}
	.personenbild,
	.organisationenbild {
		width:180px;
		height:180px;
	}


	/* fuss */
	.fusszeile-innen {
		width:1000px;
	}

}



/* kleiner 2 */
@media only screen and (max-width: 1050px) {
	.kopfzeile-innen {
		width:850px;
	}
	.hauptnav {
		width:500px;
	    margin-left:64px;
	}
	.kopfzeile .sm-buttons a {
		margin-left:24px;
	}
	.banner {
		height:36vh;
	}
	.banner .logo-gross {
		width:500px;
		height:195px;
		top:calc(19vh - 110px);
	}
	
	
	/* normale seiten und beitraege, personen, organisationen mit schliessbutt 50px + 10px */
	.konsole {
		width:600px;
	}
	.schliessbutt {
		margin-left:560px;
	}
	.konsole-seite.mit-banner {
		min-height:calc(100vh - 110px - 36vh - 170px);/* - margin-top - banner - fuss */
	}


	/* blog-uebersicht */
	.konsole-breit {
		width:850px;
	}
	.konsole-breit .site-content {
		width:600px;
		margin-right:40px;
	}
	.konsole-breit .spalte-rechts {
		float:left;
		width:210px;
	}

	/* personen & organisationen kurz */
	.personencontainer,
	.organisationencontainer {
		grid-template-columns: 150px auto;
		grid-column-gap: 30px;
	}
	.personenbild,
	.organisationenbild {
		width:150px;
		height:150px;
	}


	/* fuss */
	.fusszeile-innen {
		width:850px;
		grid-template-columns: 17% 22% 22% 22% 17%;
	}
	.fusszeile-innen div.spalte {
		padding:0px 10px 0px 10px;
	}

	.fusszeile .sm-buttons a {
		width:28px;
		height:28px;
	}
	.fusszeile .sm-buttons a.insta-link {
		background-position:-47px 0px;
	}
	.fusszeile .sm-buttons a.tw-link {
		background-position:-94px 0px;
	}
	.fusszeile .sm-buttons a:hover {
		background-position:-140px 0px;
	}	
	.fusszeile .sm-buttons a.insta-link:hover {
		background-position:-187px 0px;
	}
	.fusszeile .sm-buttons a.tw-link:hover {
		background-position:-234px 0px;
	}


	/* Textformate */
	body, td {
		font:16px/24px Roboto-Regular,sans-serif;
	}
	h1 {
		font:21px/24px Roboto-Bold, helvetica, sans-serif;
		margin-bottom:21px;
	}	
	h1.haupttitel {/* «Artikel» auf blog-uebersicht */
		font:21px/24px Roboto-Black, helvetica, sans-serif;
	}
	h2 {
		font:21px/24px Roboto-Bold, helvetica, sans-serif;
		margin-top:32px;
		margin-bottom:21px;
	}
	.konsole-seite h1,
	.konsole-seite h2 {
		font:36px/42px Roboto-Bold, helvetica, sans-serif;
	}
	h3 {
		font:16px/21px Roboto-Bold, helvetica, sans-serif;
		margin-top:28px;
		margin-bottom:16px;
	}	
	h4 {
		font:16px/21px Roboto-Bold, helvetica, sans-serif;
		margin-top:28px;
		margin-bottom:0px;
	}	

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

	.site-content ul {
	    list-style: url(images/aufzaehlung-k.png?ver=1.2) outside none; 
		margin-bottom:16px;
		margin-left:18px;
	}
	.site-content ol {
		margin-bottom:16px;
		margin-left:30px;
	}
	p.lead, b, strong {
		font-family:Roboto-Bold, helvetica, sans-serif;
		font-weight:normal;
	}
	p.linie {
		margin-top:-16px;
		margin-bottom:21px;
	}


	/* personen & organisationen kurz */
	.personencontainer h4,
	.organisationencontainer h4 {
		font:21px/26px Roboto-Black, helvetica, sans-serif;
		padding-bottom:21px;
	}
	p.personenlead,
	p.organisationenlead {
		padding:9px 0px 9px 0px;
	}
	.site-content p.personenkontakt,
	.site-content p.organisationenkontakt {
		padding-top:0px;
	}
	.personencontainer p.zitat {
		font:21px/28px Roboto-Italic, sans-serif;
	}

	/* personen lang */
	p.zitat {
		font:21px/28px Roboto-Italic, sans-serif;
		margin:0px 0px 28px 0px;
	}
	body.single-bb_person p.personenkontakt {
		padding:9px 0px 9px 0px;
		margin-bottom:28px;
	}
	div.personenpolitik,
	div.personenuebrige {
		margin:28px 0px 28px 0px;
		padding-top:28px;
	}

	/* organisationen lang */
	body.single-bb_organisation p.organisationenkontakt {
		padding:9px 0px 9px 0px;
		margin-bottom:28px;
	}
	div.organisationenuebrige {
		margin:28px 0px 28px 0px;
		padding-top:28px;
	}
	div.organisationenuebrige p {
		margin:0px;
	}

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

	/* Blogseite */
	.konsole p.artikeldatum {
		color:var(--orange);
		margin-bottom:0px;	
	}
	.konsole-breit h2 {
		font:21px/24px Roboto-Bold, helvetica, sans-serif;
	}
	p.artikelkats {
		font:13px/18px Roboto-Regular,sans-serif;
	}
	.konsole-breit .spalte-rechts h3 {
		font:21px/24px Roboto-Black, helvetica, sans-serif;
		margin-top:0px;
		margin-bottom:21px;
	}
	.seitennavigation {
		margin-top:28px;
	}
	.site-content .seitennavigation a, .site-content .seitennavigation .platzhalter {
		font:16px/19px Roboto-Regular, sans-serif;
		width:25px;
		height:25px;
		padding-top:3px;
		margin-right:6px;
		margin-bottom:6px;
	}
	.site-content .seitennavigation .aktiv, .site-content .seitennavigation a:hover {
		color:#fff;
		background:var(--orange);
	}	
	.site-content .seitennavigation .platzhalter {
		width:25px;
		height:20px;
	}
	
	a.weiterlesenlink {
		background-position:5px 6px;
	}
	a.weiterlesenlink:hover {
		background-position:5px -19px;
	}
	
	p.zuruecklink span {
		background-position:0px -44px;
	}
	p.zuruecklink span:hover {
		background-position:0px -69px;
	}

	.jahre-leer {/* um blocksatz zu erzwingen */
		padding:0px 6px 0px 6px;
		width:46px;
	}
}


/* mobile 1 */
@media only screen and (max-width: 920px) {
	span.mobile-only {
		display:inline-block;
	}
	div.mobile-only {
		display:block;
	}
	.kopfzeile {
		height:50px;
	}
	.kopfzeile-innen {
		width:600px;
	}
	.logo {
		width:92px;
		height:92px;
		margin-top:4px;
	}
	.hauptnav {
		display:none;
	}
	#menuebutton {
		display:block;
	}
	.kopfzeile .sm-buttons {
		display:none;
	}
	.banner {
		height:34vh;
		margin-top:50px;
	}
	.banner .logo-gross {
		width:440px;
		height:172px;
		top:calc(17vh - 86px);
	}
	
	
	/* normale seiten und beitraege, personen, organisationen mit schliessbutt 50px + 10px */
	.konsole {
		width:600px;
	}
	.konsole-schmal {
		margin-top:90px;
		min-height:calc(100vh - 110px - 260px);/* - margin-top - banner - fuss */
	}
	.schliessbutt {
		margin-left:560px;
	}
	.konsole-seite.mit-banner {
		min-height:calc(100vh - 110px - 34vh - 260px);/* - margin-top - banner - fuss */
	}

	.konsole-seite.ohne-banner {
		margin-top:90px;
		min-height:calc(100vh - 110px - 260px);/* - margin-top - fuss */
	}

	/* blog-uebersicht */
	.konsole-breit {
		width:600px;
	}
	.konsole-breit .site-content {
		width:600px;
		margin-right:0px;
		margin-bottom:0px;
		padding-bottom:0px;
		float:none;
	}
	.konsole-breit .spalte-rechts {
		float:none;
		width:600px;
		margin-bottom:20px;
		display:grid;
		grid-template-columns: 1fr 1fr;
		grid-column-gap: 40px;
	}
	.spalte-rechts div.jahre {
		margin-top:0px;
	}
	.konsole-breit .spalte-rechts h3 {
		margin-bottom:21px;
		margin-top:0px;
	}


	/* personen & organisationen kurz */
	.personencontainer,
	.organisationencontainer {
		grid-template-columns: 150px auto;
		grid-column-gap: 30px;
	}
	.personenbild,
	.organisationenbild {
		width:150px;
		height:150px;
	}


	/* fuss */
	.fusszeile {
		height:280px;
	}
	.fusszeile-innen {
		width:600px;
		grid-template-columns: 24% 38% 38%;
		grid-row-gap: 20px;
	}
	.fusszeile-innen div.spalte {
		padding:0px 10px 0px 10px;
	}
	.fusszeile-innen div.spalte.spalte-4 {
		padding:0px 10px 0px 0px;
	}
	.fusszeile .sm-buttons {
		display: block;
	}
	.fusszeile .sm-buttons a {
		width:28px;
		height:28px;
		margin-right:20px;
	}
	.fusszeile .sm-buttons a.insta-link {
		background-position:-47px 0px;
	}
	.fusszeile .sm-buttons a.tw-link {
		background-position:-94px 0px;
	}
	.fusszeile .sm-buttons a:hover {
		background-position:-140px 0px;
	}	
	.fusszeile .sm-buttons a.insta-link:hover {
		background-position:-187px 0px;
	}
	.fusszeile .sm-buttons a.tw-link:hover {
		background-position:-234px 0px;
	}

}


/* mobile 2 (kleinste) */
@media only screen and (max-width: 640px) {
	
	.kopfzeile-innen {
		width:300px;
	}
	.banner {
		height:30vh;
		margin-top:50px;
	}
	.banner .logo-gross {
		width:300px;
		height:120px;
		top:calc(15vh - 60px);
	}
	
	.konsole-schmal {/*artikel, personen, organisationen */
		min-height:calc(100vh - 110px - 80px);/* 1. spalte fusszeile sichtbar */
	}
	.konsole-seite.mit-banner {/* seiten */
		min-height:calc(100vh - 110px - 30vh - 80px);/* 1. spalte fusszeile sichtbar */
	}
	.konsole-seite.ohne-banner {/* seiten */
		min-height:calc(100vh - 110px - 80px);/* 1. spalte fusszeile sichtbar */
	}

	
	/* normale seiten und beitraege, personen, organisationen mit schliessbutt 50px + 10px */
	.konsole {
		width:300px;
	}
	.schliessbutt {
		margin-left:260px;
	}


	/* blog-uebersicht */
	.konsole-breit {
		width:300px;
	}
	.konsole-breit .site-content {
		width:300px;
	}
	.konsole-breit .entry-summary {
		margin-bottom:28px;
		padding-bottom:18px;
	}
	.konsole-breit .spalte-rechts {
		width:300px;
		display:grid;
		grid-template-columns: 1fr;
		grid-row-gap: 40px;
	}
	.spalte-rechts div.jahre {
		margin-top:0px;
	}
	.konsole-breit .spalte-rechts h3 {
		margin-bottom:21px;
		margin-top:0px;
	}


	/* personen & organisationen kurz */
	.personencontainer,
	.organisationencontainer {
		display:block;
	}
	.personenbild,
	.organisationenbild {
		position:relative;
		width:150px;
		height:150px;
		margin-left:auto;
		margin-right:auto;
		margin-bottom:20px;
	}
	.personencontainer h4,
	.organisationencontainer h4 {
		text-align:center;
	}

	.site-content .seitennavigation a, .site-content .seitennavigation .platzhalter {
		margin-right:9px;
	}
	.site-content .seitennavigation a:last-of-type {
		margin-right:0px;
	}
	div.personenpolitik,
	div.personenuebrige,
	div.organisationenuebrige {
		margin:24px 0px 24px 0px;
		padding-top:24px;
		border-top:1px solid var(--orange);
	}
	.personencontainer p.zitat {
		font:19px/24px Roboto-Italic, sans-serif;
	}
	/* personen & organisationen lang */
	p.zitat {
		font:19px/24px Roboto-Italic, sans-serif;
		margin:0px 0px 24px 0px;
	}

	/* fuss */
	.fusszeile {
		height:auto;
		padding:12px 0px 48px 0px;
	}
	.fusszeile-innen {
		width:300px;
		grid-template-columns: 1fr;
		grid-row-gap: 20px;
	}
	.fusszeile-innen div.spalte,
	.fusszeile-innen div.spalte.spalte-4 {
		border-right:0px;
		border-bottom:1px solid #fff;
		padding:0px 0px 20px 0px;
	}
	.fusszeile-innen .spalte-1 {
		background-size:50% auto;
		background-position:left top;
 		padding:0px 0px 20px 0px;
		height:70px;
	}
	.fusszeile .sm-buttons {
		display: block;
		padding-top:0px;
	}
	.fusszeile .sm-buttons a {
		width:28px;
		height:28px;
		margin-right:20px;
	}
	.fusszeile .sm-buttons a.insta-link {
		background-position:-47px 0px;
	}
	.fusszeile .sm-buttons a.tw-link {
		background-position:-94px 0px;
	}
	.fusszeile .sm-buttons a:hover {
		background-position:-140px 0px;
	}	
	.fusszeile .sm-buttons a.insta-link:hover {
		background-position:-187px 0px;
	}
	.fusszeile .sm-buttons a.tw-link:hover {
		background-position:-234px 0px;
	}


	.hauptnav-mobile {
		min-height:100vh;
	}
	.hauptnav-mobile ul {
		width:300px;
		padding: 0px 0px 20px 0px;
	}
	.hauptnav-mobile ul li a, .hauptnav-mobile ul li span.linkleer {
	    padding:4px 0px 4px 20px;
	}
	.hauptnav-mobile ul li ul li a {
	    padding:4px 0px 4px 40px;
	}

	body, td {
		font:15px/21px Roboto-Regular,sans-serif;
	}
	h1 {
		font:18px/21px Roboto-Bold, helvetica, sans-serif;
		margin-bottom:21px;
	}	
	h1.haupttitel {/* «Artikel» auf blog-uebersicht */
		font:18px/21px Roboto-Black, helvetica, sans-serif;
	}
	h2 {
		font:18px/21px Roboto-Bold, helvetica, sans-serif;
		margin-top:32px;
		margin-bottom:21px;
	}
	.konsole-seite h1,
	.konsole-seite h2 {
		font:28px/34px Roboto-Bold, helvetica, sans-serif;
	}
	h3 {
		font:15px/21px Roboto-Bold, helvetica, sans-serif;
		margin-top:28px;
		margin-bottom:16px;
	}	
	h4 {
		font:15px/21px Roboto-Bold, helvetica, sans-serif;
		margin-top:28px;
		margin-bottom:0px;
	}	
	p.artikelkats {
		font:12px/16px Roboto-Regular,sans-serif;
	}
	.mobile-only #katscroll,
	.mobile-only #jahrescroll {
		font:12px/16px Roboto-Regular,sans-serif;
	}
	.site-content p.bildlegende {
		font:13px/18px Roboto-Italic, sans-serif;
		margin-top:-24px;
		margin-bottom:21px;
	}
	.site-content p.wp-caption-text {
		font:13px/18px Roboto-Italic, sans-serif;
		margin-top:-8px;
		margin-bottom:21px;
	}

	.tellink, .emaillink, .weblink {
		padding-left:28px;
		background-size:18px auto;
		background-repeat:no-repeat;
		background-position:0px 0px;
	}
	.emaillink {
		background-position:0px -33px;
	}
	.weblink {
		background-position:0px -164px;
	}
	.tellink:hover, .tellink:active, .tellink:focus {
		background-position:0px -77px;
	}
	.emaillink:hover, .emaillink:active, .emaillink:focus {
		background-position:0px -109px;
	}
	.weblink:hover, .weblink:active, .weblink:focus {
		background-position:0px -207px;
	}
	
	a.weiterlesenlink {
		background-position:5px 3px;
	}
	a.weiterlesenlink:hover {
		background-position:5px -22px;
	}
	
	p.zuruecklink span {
		background-position:0px -47px;
	}
	p.zuruecklink span:hover {
		background-position:0px -72px;
	}


}