/*
Theme Name: isf
Theme URI: http://www.bytesbones.ch
Author: Klaus Affolter
Author URI: http://www.bytesbones.ch
Description: Wordpress-Theme von bytes & bones.
Version: 1.2
Tags: none
*/


/* 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;
}
sub {
	font-size:11px;
	position: relative;
	line-height: 0;
	vertical-align: baseline;
	bottom: -0.2em;
	padding-left:1px;
}

/*padding egalisieren*/
*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}



/* schriften
-------------------------------------------------------------- */
@font-face {
    font-family: 'ibm_plex_sanslight';
    src: url('bb-schriften/ibmplexsans-light-webfont.eot');
    src: url('bb-schriften/ibmplexsans-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('bb-schriften/ibmplexsans-light-webfont.woff2') format('woff2'),
         url('bb-schriften/ibmplexsans-light-webfont.woff') format('woff'),
         url('bb-schriften/ibmplexsans-light-webfont.ttf') format('truetype'),
         url('bb-schriften/ibmplexsans-light-webfont.svg#ibm_plex_sanslight') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'ibm_plex_sanssemibold';
    src: url('bb-schriften/ibmplexsans-semibold-webfont.eot');
    src: url('bb-schriften/ibmplexsans-semibold-webfont.eot?#iefix') format('embedded-opentype'),
         url('bb-schriften/ibmplexsans-semibold-webfont.woff2') format('woff2'),
         url('bb-schriften/ibmplexsans-semibold-webfont.woff') format('woff'),
         url('bb-schriften/ibmplexsans-semibold-webfont.ttf') format('truetype'),
         url('bb-schriften/ibmplexsans-semibold-webfont.svg#ibm_plex_sanssemibold') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'ibm_plex_sansbold';
    src: url('bb-schriften/ibmplexsans-bold-webfont.eot');
    src: url('bb-schriften/ibmplexsans-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('bb-schriften/ibmplexsans-bold-webfont.woff2') format('woff2'),
         url('bb-schriften/ibmplexsans-bold-webfont.woff') format('woff'),
         url('bb-schriften/ibmplexsans-bold-webfont.ttf') format('truetype'),
         url('bb-schriften/ibmplexsans-bold-webfont.svg#ibm_plex_sansbold') format('svg');
    font-weight: normal;
    font-style: normal;
}





/*wartung*/
.wartungsbutton {
	position:fixed;
	bottom:20px;
	left: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;
}


/* Vars
------------------------------------------------------------ */
:root {
	color-scheme: light only !important;
	--blau:rgb(0,83,161);
	--gruen:rgb(118,188,33);
	--maxbreite:1600px;
	--abstandlinksrechts:4.444rem;/*80px*/;
}
.blau {
	color:var(--blau);
}
.gruen {
	color:var(--gruen);
}

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

body {
	margin:0px;
	padding:0px;
	background:#fff;
}
.konsole {
	position:relative;
	width:100%;
	margin-left:auto;
	margin-right:auto;
}
.kopfzeile {
	position:relative;
	width:calc(100% - (2 * var(--abstandlinksrechts)));
	max-width:var(--maxbreite);
	height:10rem;
	margin-left:auto;
	margin-right:auto;
}
a.logo {
	display:inline-block;
	width:14.44rem;
	height:5rem;
	text-decoration:none;
	background:url(images/isf_logo.svg);
	background-size:100% auto;
	background-repeat:no-repeat;
	float:left;
	margin-top:2.5rem;
	margin-left:-1.66rem;
}
.hauptnav {
	display:inline-block;
	margin-top:5.9rem;
	float:right;
}
.banner {
	position:relative;
	width:calc(100% - (2 * var(--abstandlinksrechts)));
	max-width:var(--maxbreite);
	margin-left:auto;
	margin-right:auto;
	margin-bottom:3rem;
	background:var(--blau);
	display:grid;
	grid-template-columns:1fr 1fr;
}
.bannerbild {
	width:100%;
	height:auto;
	aspect-ratio:5 / 3.5;
}
.bannertext {
	display: flex;
	flex-wrap: wrap;
	align-content: center;
	padding:0px 2.22rem 0px 2.22rem;
	color:#fff;
}


.site-content {
	/* 100vh - (((bannerhoehe))) - kopfhoehe - banner margin - fusszeile padding - fusszeile 4 * line-height
	ab --maxbreite: style-resp.css */
	display:block;
	min-height:calc(100vh - (((50vw - var(--abstandlinksrechts)) / 5) * 3.5) - 10rem - 3rem - 7.77rem - (4 * 1.33rem));
}

.site-content {
	position:relative;
	width:calc(100% - (2 * var(--abstandlinksrechts)));
	max-width:1200px;
	margin-left:auto;
	margin-right:auto;
}
.site-content.banner_off {
	padding-top:2rem;	
	min-height:calc(100vh + 2rem - 10rem - 3rem - 7.77rem - (4 * 1.33rem));
}
.block {
	padding-bottom:4.44rem;
}
.block.einspaltig {
	position:relative;
	width:calc(100% - (4 * var(--abstandlinksrechts)));
	max-width:800px;
	margin-left:auto;
	margin-right:auto;
}
.block.textlinks_bildrechts {
	position:relative;
	width:100%;
	display:grid;
	grid-template-columns:calc(50% + 2.22rem) calc(50% - 2.22rem);
}
.block.textrechts_bildlinks {
	position:relative;
	width:100%;
	display:grid;
	grid-template-columns:calc(50% - 2.22rem) calc(50% + 2.22rem);
}
.block.textlinks_textrechts {
	position:relative;
	width:100%;
	display:grid;
	grid-template-columns:1fr 1fr;/* chrome extrawurst */
	grid-column-gap:4.444rem;
}
.block.textlinks_bildrechts .blocktext {
	padding-right:4.444rem;
}
.block.textrechts_bildlinks .blocktext {
	padding-left:4.444rem;
}
.blockbild {
	width:100%;
	height:auto;
	aspect-ratio:1;
}




.teaserwrapper {
	width:100%;
	display:grid;/* anzahl spalten in page.php */
	grid-column-gap:2.22rem;
	padding-bottom:5.778rem;/* 80px + 24px von p */
}

.teaserwrapper a {
	text-decoration:none;
	display:block;
	width:100%;
	aspect-ratio:1 / 1;
	overflow:hidden;
}
.teaserwrapper a div {
	width:100%;
	height:100%;
	margin-left:0%;
	margin-top:0%;
	display: flex;
	flex-wrap: wrap;
	align-content: flex-end;
	-webkit-transition: all 0.6s ease-out;
	-moz-transition:all 0.6s ease-out;
	transition: all 0.6s ease-out;
}
.teaserwrapper a span {
	display:inline-block;
	width:100%;
	text-align:center;
	padding:0.89rem 0.33rem 1.33rem 0.33rem;
	background:var(--blau);
}
.teaserwrapper a:hover div {
	width:102%;
	height:102%;
	margin-left:-1%;
	margin-top:-2%;
	-webkit-transition: all 0.6s ease-out;
	-moz-transition:all 0.6s ease-out;
	transition: all 0.6s ease-out;
}	




.googlemap-container {
	position:relative;
	width:100%;
	height:100%;
	display:block;
	padding:0px 0px 0px 0px;
}
#googleMap {
	width:100%;
	height:100%;
	display:block;
}

.gm-style iframe + div {
	border:none!important;
}
.gm-style .gm-style-iw-c {
	max-width:400px !important;
	overflow:hiden !important;
}
.gm-ui-hover-effect {/*schliessbutt in info-fenster ausblenden */
	display:none !important;
}


.fusszeile {
	width:100%;
	padding:3.33rem 0px 4.44rem 0px;
	background:var(--blau);
	text-align:center;
	color:#fff;
}


.clearer {
	width:100%;
	height:0px;
	overflow:hidden;
	display:block;
	clear:both;
	background:#d00;
}



/* Textformate
-------------------------------------------------------------- */
html, body {
	font-size:clamp(13px,1.323vw,18px);
	line-height:1.33rem;
	font-family:ibm_plex_sanslight,sans-serif;
}
/* banner*/
.banner h1 {
	font-family:ibm_plex_sansbold, helvetica, sans-serif;
	font-size:clamp(21px, 3vw, 54px);
	line-height:clamp(24px, 3.2vw, 58px);
	font-weight:normal;
	margin-top:0px;
	margin-bottom:18px;
}
.banner p.ueberzeile {
	font-family:ibm_plex_sanssemibold, helvetica, sans-serif;
	font-size:clamp(12px, 1.2vw, 21.5px);
	line-height:clamp(14px, 1.4vw, 23px);
}


/* bloecke */
	
h2 {
	font-family:ibm_plex_sansbold, helvetica, sans-serif;
	font-size:1.9rem;
	line-height:2.1rem;
	font-weight:normal;
	margin-top:-0.333rem;
	margin-bottom:2.667rem;
}

h3 {
	font-family:ibm_plex_sansbold, helvetica, sans-serif;
	font-size:1.4rem;
	line-height:1.6rem;
	font-weight:normal;
	margin-top:2rem;
	margin-bottom:1.333rem;
}
.blocktext h3:first-of-type {
	margin-top:-0.333rem;
}
.blocktext p + h3:first-of-type {
	margin-top:2rem;
}

h4 {
	font-family:ibm_plex_sansbold, helvetica, sans-serif;
	font-size:1rem;
	line-height:1.33rem;
	font-weight:normal;
	margin-top:1.33rem;
	margin-bottom:0;
}

.site-content p {
	padding-bottom:1.333rem;
}
.site-content p.ueberzeile {
	font-size:0.889rem;
	line-height:1.06rem;
	font-family:ibm_plex_sanssemibold, helvetica, sans-serif;
	padding-bottom:0.56rem;
	margin-top:-0.25rem;
}
.site-content p.lead,
strong, b {
	font-family:ibm_plex_sanssemibold, helvetica, sans-serif;
}
.site-content p.lead {
	color:var(--blau);
	font-size:1.2rem;
	line-height:1.5rem;
}

.site-content ul {
	margin-bottom:18px;
	margin-left:16px;
}
.site-content ol {
	margin-bottom:18px;
	margin-left:36px;
}
.site-content p.bildlegende {
	margin-top:6px;
	font-size:12px;
	line-height:16px;
	font-style:italic;
}
.site-content .bildoben p.bildlegende {
	margin-bottom:0px;;
}
.site-content .zitat {
	font-style:italic;
	margin-left:36px;
}


.fusszeile p {
	font-size:0.889rem;
	line-height:1.4rem;
	margin-bottom:1.2rem;
}



@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:not(.lead) {
		
		/*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%;
	}
}




/* Bilder
-------------------------------------------------------------- */
.site-content img {
	margin:0px;
	padding:0px;
	vertical-align: bottom;
	max-width:100%;
	height:auto;
}

/* Links
-------------------------------------------------------------- */
.site-content a {
	color:#000;
	text-decoration:none;
	border-bottom:1px solid var(--blau);
}
.site-content a:hover {
	color:var(--blau);
}
.site-content .teaserwrapper a {
	color:#fff;
	border:0;
	font-family:ibm_plex_sanssemibold, helvetica, sans-serif;
	font-size:1.2rem;
	line-height:1.4rem;
}
.fusszeile a {
	color:#fff;
	text-decoration:none;
	border-bottom:1px solid #fff;
}
.topscrollbutton {
	position:fixed;
	bottom:41px;
	right:50%;
	height:0px;
	width:0px;
	cursor:pointer;
	z-index:99;
	background-color:#fff;
	background-image:url(images/topscroll.png);
	background-repeat:no-repeat;
	background-position:1px 1px;
	background-size:0px auto;
	border-radius:50%;

	-webkit-transition: all 0.4s ease-out;
	-moz-transition:all 0.4s ease-out;
	transition: all 0.4s ease-out;
}
.topscrollbutton.sichtbar {
	bottom:20px;
	right:calc(50% - 21px);
	height:42px;
	width:42px;
	background-position:1px -84px;
	background-size:40px auto;

	-webkit-transition: all 0.4s ease-out;
	-moz-transition:all 0.4s ease-out;
	transition: all 0.4s ease-out;
}

.topscrollbutton.sichtbar:hover {
	background-color:var(--gruen);
}	

/* nav
-------------------------------------------------------------- */
.hauptnav ul li {
	list-style:none;
	float:left;
	margin-left:20px;
}
.hauptnav a {
	font-size:1rem;
	line-height:1.33rem;
	font-family:ibm_plex_sanssemibold, helvetica, sans-serif;
	text-decoration:none;
	padding-bottom:10px;
	color:#000;
}
.hauptnav .current_page_item a,
.hauptnav .current_page_ancestor a, 
.hauptnav .current_page_parent a,
.hauptnav a:hover {
	color:var(--blau);
}


/* mobile */
.hauptnav-mobile a {
	font-size:1.5rem;
	line-height:2rem;
	font-family:ibm_plex_sanssemibold, helvetica, sans-serif;
	text-decoration:none;
	display:inline-block;
	padding-bottom:10px;
	color:#fff;
}
.hauptnav-mobile .current_page_item a,
.hauptnav-mobile .current_page_ancestor a, 
.hauptnav-mobile .current_page_parent a,
.hauptnav-mobile a:hover {
	color:var(--gruen);
}