@charset "UTF-8";

/*
============================================================

	(c) Ernährungsforum Zürich, 2019.	All rights reserved.
	Styles by outline4.ch

=============================================================
*/
:root {
	--base:	1.8rem;
	--black: #4e6470;
	--grau: #e3e5e8;
	--gruen: #0c9959;
	--orange: #e7b311;
	--lavendel: #3d5b9d;
	--blau: #00aaff;
	--signalrot: #ff0400;
}

/*	-------------------------------------------------------------------------
	Basics
*/

/* Box Model
------------------------------------------------------------------------------------------------------- */
* { box-sizing: border-box; }

html { font-size: 62.5%; overflow-y: scroll; }

/* Webfonts
------------------------------------------------------------------------------------------------------- */
/* lato-300 - latin */
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 300; src: local("Lato Light"), local("Lato-Light"), url("/assets/fonts/lato-v15-latin-300.woff2") format("woff2"), url("/assets/fonts/lato-v15-latin-300.woff") format("woff"); }
/* lato-regular - latin */
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 400; src: local("Lato Regular"), local("Lato-Regular"), url("/assets/fonts/lato-v15-latin-regular.woff2") format("woff2"), url("/assets/fonts/lato-v15-latin-regular.woff") format("woff"); }
/* lato-700 - latin */
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 700; src: local("Lato Bold"), local("Lato-Bold"), url("/assets/fonts/lato-v15-latin-700.woff2") format("woff2"), url("/assets/fonts/lato-v15-latin-700.woff") format("woff"); }
/* lato-italic - latin  @font-face { font-family: 'Lato'; font-style: italic; font-weight: 400; src: local("Lato Italic"), local("Lato-Italic"), url("/assets/fonts/lato-v15-latin-italic.woff2") format("woff2"), url("/assets/fonts/lato-v15-latin-italic.woff") format("woff"); } */
/* lato-900 - latin @font-face { font-family: 'Lato'; font-style: normal; font-weight: 900; src: local("Lato Black"), local("Lato-Black"), url("/assets/fonts/lato-v15-latin-900.woff2") format("woff2"), url("/assets/fonts/lato-v15-latin-900.woff") format("woff"); } */

body {
	font-size: var(--base); line-height: 1.35; font-family: Lato, Verdana, sans-serif;
	-webkit-font-feature-settings: "kern" 1; font-feature-settings: "kern" 1;
	-webkit-font-kerning: normal; font-kerning: normal;
}


/* Positionierung allgemein
------------------------------------------------------------------------------------------------------- */

/* Basics */
body { margin: 0 auto; color: --var(--black); }

section.in-body { clear: both; }

	section.in-body div,
	section.in-body h1,
	section.in-body h2,
	section.in-body h3 {
		margin: 1em 0;
	}

	.in-body > * { min-width: 320px; margin: 1em; }

div { margin: 1em 0; }

#map_canvas, #map_canvas div { margin: 0; }

main.content li { margin: 0 0 0.66em 0; list-style: square; }

/* Spalten (Benennung: desktop first) */
.container { display: -webkit-box; display: flex; flex-wrap: wrap; clear: both; }
.zweitel { -webkit-box-flex: 0; flex: 0 0 48%; margin-right: 2% !important; }
.drittel { -webkit-box-flex: 0; flex: 0 0 31.3%; margin-right: 2% !important; }
.zwei-drittel { -webkit-box-flex: 0; flex: 0 0 60%; margin-right: 4% !important; }
.viertel { -webkit-box-flex: 0; flex: 0 0 23%; margin-right: 2% !important; }
.letztes.viertel { -webkit-box-flex: 0; flex: 0 0 25%; margin-right: 0 !important; position: relative; }

main .zweitel p,
main .drittel p,
main .zwei-drittel p,
main .viertel p {
	-webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; -webkit-hyphenate-before: 2; -webkit-hyphenate-after: 3; hyphenate-limit-lines: 3; margin-top: 0;
}

	/* Vertikalabstände eliminieren
		.container { padding-top: 0; }
		.container > * { margin-top: 0; margin-top: 0; }
		div { background-color: transparent !important; position: relative; top: -1px; }
	*/

		img { width: 100%; height: auto; }
		.container > img { height: 37.5%; }
		div > img { margin-top: 0; }


footer { margin: 3em 0 0 0; width: 100%; max-width: 100%; background-color: #e3e5e8; padding: 0.5em 0; }
	footer h4 { margin: 0 !important; }
	footer ul { list-style: none; padding-left: 0; }
	footer ul, footer li { margin: 0 !important; padding: 0; border: none; }


header { margin-top: 5.0rem !important; height: 12.0rem; position: relative; }
	header .menu-toggle { display: none; }
	header .social { position: absolute; top: -1em; right: 0; margin: 0 !important; }
		header .social .schalter { width: auto; display: inline-block; margin: 0.1em 1.5em; position: relative; top: -0.66em; }
		header .social .rund {
			display: inline-block; margin: 0 0 0 0.66em; width: 3.6rem; height: 3.6rem;
			background: no-repeat; background-size: contain;
		}
		header .social .twitter { background-image: url(/assets/img/twitter.svg); }
		header .social .instagram { background-image: url(/assets/img/instagram.svg); }
		header .social .linkedin { background-image: url(/assets/img/linkedin.svg); }
		header .social .facebook { background-image: url(/assets/img/facebook.svg); }

	header .logo {
		position: absolute; top: -6.4rem; left: -1.6rem; margin: 0; height: 16.0rem; width: 16rem;
		background-size: 16rem 16rem;
		background-image: url(/assets/img/logo-efz2.png);
		background-repeat: no-repeat;
		background-position: top left;
		text-indent: -9999px;
		overflow: hidden;
	}

	header ul { list-style: none; padding-left: 0; width: 80%; float: right; display: -webkit-box; display: flex; -webkit-box-flex: 1; flex: 1; -webkit-box-pack: justify; justify-content: space-between; -webkit-box-align: end; align-items: flex-end; height: 3.66em; }
	header ul, header li { margin: 0 !important; padding: 0; border: none; }
	header + * { clear: both; }


	/* Subnavigation/Dropdown
	------------------------------------------------------------------------------------------------------- */
	@media screen and (min-width: 960px) {
		header .mit-subnav:after { content: '\00A0\25BE'; opacity: 0.5; }
		header ul.subnav { position: absolute; padding-top: 0.5em; display: none; width: 100%; float: left; text-align: left; }
		header ul.subnav li { display: inline; padding-right: 1.5em; font-size: 0.82em; }
		header li:hover.mit-subnav:after { opacity: 1; }
		header li:hover .subnav { display: block; }
	}

	@media screen and (max-width: 960px) {
		ul.subnav { padding-top: 0; height: auto !important; padding-top: 0 !important; padding-bottom: 1.5em; }
		ul.subnav li { font-size: 0.8em; }
		ul.subnav li:first-child { display: none !important; }
		ul.subnav li a { padding-top: 0; }
	}

/* Startseite
------------------------------------------------------------------------------------------------------- */
.anrissbox h4 { margin: 0.75em 0 0.75em 0; position: relative; }

.arbeitskreise .anrissbox a { text-align: left; padding-left: 0.66em; min-height: 6.2rem; }

.anrissbox span { position: absolute; bottom: 0.33em; right: 0.66em; }

/* Agenda
------------------------------------------------------------------------------------------------------- */
.agenda section.in-body .container { border-top: 2px solid rgba(77, 99, 111, 0.85); }
	.agenda section.in-body .container > div * { margin-top: 0; }
	.agenda section.in-body .container img { width: 100%; margin: 0; }
	.agenda section.in-body .container .veranstaltungsort {
		padding: 0 0 1em 2em; font-weight: 300; text-transform: uppercase;
		letter-spacing: 0.02em; word-spacing: 0.12em; font-size: 0.82em;
		background-image: url(/assets/img/marker.svg);
		background-position: -0.2em 0.15em; background-size: 1.6em 1.6em;
		background: no-repeat;
	}
	.agenda section.in-body .container ul li { margin: 0; list-style: square; }


/* Matrix
------------------------------------------------------------------------------------------------------- */
div.personen img { border-radius: 50%; }

div.bild-neben-text h4:first-child { margin-top: 0; }

div.bild-neben-text .profilbild { border-radius: 50%; }

ul.pdfs { padding-left: 1em; }
	ul.pdfs li { list-style: none; padding-left: 2em;
		background-image: url(/assets/img/icon-pdf.svg);
		background-size: 1.33em 1.33em;
		background-position: left top;
		background: no-repeat;
	}


/* Mitglieder
------------------------------------------------------------------------------------------------------- */
section .mitglied { border-top: 2px solid var(--black); }
	section .mitglied .container { margin: 0; }
	section .mitglied .logo { display: none; opacity: 0; }
	section .mitglied .zusatzinfo { max-height: 0; opacity: 0; -webkit-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; overflow: hidden; }
		section .mitglied .zusatzinfo .schalter.unten { visibility: hidden; }
	section .mitglied.alles-zeigen .zusatzinfo { max-height: 20em; opacity: 1; margin-bottom: 2em; }
	section .mitglied.alles-zeigen .basisinfo .schalter { opacity: 0; }
	section .mitglied.alles-zeigen .basisinfo .logo { display: inline; opacity: 1; }
	section .mitglied.alles-zeigen .schalter.unten { position: absolute; bottom: 0; left: 0; width: 100%; visibility: visible; }
	section .mitglied h3 { margin: 0; }
	section .mitglied h3, section .mitglied h4 { font-size: inherit; font-weight: bold; margin-top: 0; }
	section .mitglied .profilbild { border-radius: 50%; }

.filter-branche { margin-top: 1px !important; }
	.filter-branche ul { display: -webkit-box; display: flex; -webkit-box-flex: 1; flex: 1; -webkit-box-pack: start; justify-content: flex-start; flex-wrap: wrap; padding: 0; margin-top: 0; }
	.filter-branche li { margin: 0 !important; list-style-type: none !important; width: 25%; text-align: center; }
	.filter-branche li a { display: block; padding: 0.5em 0 !important; width: 100%; margin: 0; color: white; font-weight: bold; font-size: 0.9em; border-color: white !important; border-bottom: none !important; }
	.filter-branche li a:hover, .filter-branche li a:active { border-bottom: none !important; }

ul.themen { padding: 0; }
	ul.themen li { list-style-type: none; font-size: 0.9em; font-weight: bold; }

.mitglieder .farbkreis { width: 100%; height: auto; opacity: 0.85; }

	/*	mobile	*/
	@media screen and (max-width: 600px) {
		.viertel { -webkit-box-flex: 0; flex: 0 0 48%; margin-right: 2%; }
		.zweitel.container { display: block; }
	}

	/*	Handheld	*/
	@media screen and (max-width: 420px) {
		.container { display: block; }
	}

	/* wide */
	@media screen and (min-width: 1200px) {
		.in-body > * { margin: 1em auto; max-width: 1200px; }
	}

/* Map
------------------------------------------------------------------------------------------------------- */
a.show_on_map {
	display: inline-block;
	padding-left: 30px; margin-top: var(--base);
	border: none; text-decoration: none;

	background: url(/assets/markers/marker.svg) no-repeat 0 0 transparent;
	background-size: 26px;
}
	a.show_on_map:hover { border: none; text-decoration: none; }



/* TYPOGRAFIE
------------------------------------------------------------------------------------------------------- */
h1, h2, h3, h4, nav, .nav-like, .schalter, .themen li {
	margin-bottom: 0;
	color: var(--black);
	font-weight: 300;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	word-spacing: 0.12em; }

.agenda .datum strong {
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	word-spacing: 0.12em; }

h1, h2 { font-size: 2em; }
h1 small, h2 small { font-weight: normal; font-size: var(--base); }
h3 { font-size: 1.62em; color: var(--black); }
h4 { font-size: 1em; font-weight: bold; color: var(--black); }

nav, .nav-like {
	font-size: 1em;
	font-weight: 300;
	text-align: center;
	padding: 0.33em;
	margin-right: 0;
	top: -0.66em;
	position: relative; }

nav .sel > a { font-weight: bold; }

.nav-like { color: gray; }

.faq blockquote { margin-right: 0; }
.faq .content p { font-weight: bold; }
.faq .content blockquote p { font-weight: inherit; }
.faq blockquote + p { margin-top: 2em; }


/* Footer
------------------------------------------------------------------------------------------------------- */
.flex-column-mobile-reverse { display: -webkit-box; display: flex; -webkit-box-pack: justify; justify-content: space-between; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; }


@media screen and (max-width: 600px) {
	.flex-column-mobile-reverse { -webkit-box-orient: vertical; -webkit-box-direction: reverse; flex-direction: column-reverse; }
	.flex-column-mobile-reverse p.datenschutz { margin-bottom: 2em; }
}



/* Formular
------------------------------------------------------------------------------------------------------- */
.formular, .freeform-form { background-color: var(--black); padding: 1em; margin: 0; }

	.formular div.container,
	.freeform-form div.container, { margin-top: 0.5em !important; margin-bottom: 0.5em !important; }
	.formular div.container div,
	.freeform-form div.container div { margin-top: 0 !important; margin-bottom: 0 !important; }
	.formular label,
	.freeform-form label { display: block; color: white; font-size: 0.92em; font-weight: bold; text-transform: uppercase; letter-spacing: 0.05em; }
	.formular input[type="text"],
	.formular input[type="email"],
	.formular input[type="date"],
	.formular input[type="datetime-local"],
	.formular input[type="password"],
	.freeform-form input[type="text"],
	.freeform-form input[type="email"],
	.freeform-form input[type="date"],
	.freeform-form input[type="datetime-local"],
	.freeform-form input[type="password"] { width: 100% !important; padding: 0.33em; }
	.formular input[type="submit"],
	.formular button[type="submit"] { padding: 0.4em; margin-top: 1.4em; font-size: 1em; border: none; color: white; background-color: red; text-transform: uppercase; font-weight: bold; letter-spacing: 0.05em; }
	.freeform-form input[type="submit"],
	.freeform-form button[type="submit"] { padding: 0.4em; font-size: 1em; border: none; color: white; background-color: red; text-transform: uppercase; font-weight: bold; letter-spacing: 0.05em; }
	.formular textarea,
	.freeform-form textarea { width: 100%; min-height: 8em; padding: 0.33em; font-size: 0.96em; line-height: 1.3; }
	.formular input:disabled,
	.freeform-form input:disabled { background-color: #d3d7da; }

	.freeform-form-success { color: yellowgreen; font-weight: bold; }

.mitgliederbereich .formular { color: white; }
	.mitgliederbereich .formular .instruction { color: white; opacity: 0.66; letter-spacing: 0.02em; }
	.mitgliederbereich .formular div.group { padding-bottom: 1em !important; }
	.mitgliederbereich .formular .meldung { color: gold; font-weight: bold; letter-spacing: 0.02em; }
	.mitgliederbereich .formular .vorschaubild { border: 1px solid white; background-color: #eee; width: 100%; display: block; }
	.mitgliederbereich .formular #kurzbeschrieb { min-height: 25vh; }


/* Freeform
------------------------------------------------------------------------------------------------------- */
div.freeform-row { margin: 0 !important; }

label[for="form-input-mitgliedstyp"] { padding-bottom: 0.5em; }
label[for="form-input-mitgliedstyp"] ~ label { text-transform: none; cursor: pointer; }
input[name="mitgliedstyp"] { margin-top: 0.5em; margin-right: 0.75em !important; }

.freeform-form-has-errors, .freeform-errors li { color: red !important; font-weight: bold; }

#form-input-address { height: auto !important; min-height: 2.2em; }


/* Mitglied werden
------------------------------------------------------------------------------------------------------- */
.beitritt h1, .beitritt-einzelperson h1,
.beitritt h2, .beitritt-einzelperson h2 { margin-top: 0 !important; }


/* Newsletter
------------------------------------------------------------------------------------------------------- */
.newsletter-datenschutzhinweis { font-size: 1.1rem; }

.newsletter-titel { margin-bottom: 0.66em !important; }

.newsletter-danke .newsletter.formular,
.newsletter-danke .newsletter-titel,
.newsletter-danke .newsletter-datenschutzhinweis,
.mitgliederbereich .newsletter.formular,
.mitgliederbereich .newsletter-titel,
.mitgliederbereich .newsletter-datenschutzhinweis {
	display: none;
}

.newsletter-danke .datenschutz,
.mitgliederbereich .datenschutz {
	margin-top: 0;
}

/*	-------------------------------------------------------------------------
	Positionierung: Handheld
*/
@media screen and (max-width: 960px) {
	#menu nav { display: none; }
	#menu .social { display: none; }
	#menu .menu-toggle { display: block; position: fixed; right: 1.0em; top: 1.5em; width: 3.6rem; height: 3.0rem; stroke: var(--black); stroke-width: 0.75; z-index: 100; }
		#menu .menu-toggle .open { visibility: visible; }
		#menu .menu-toggle .close { visibility: hidden; }
	#menu nav ul { opacity: 0; -webkit-transition: opacity 0.4s ease-out; transition: opacity 0.4s ease-out; }
	#menu.show { position: fixed; top: 0; left: 0; min-height: 100vh; width: 100vw; overflow: hidden; margin: 0 !important; background-color: white; z-index: 100; }
		#menu.show .logo { z-index: 100; position: fixed; top: 0; left: 0; margin: 0.2em 0.1em; }
		#menu.show nav { display: block; margin-top: 6.0rem; margin-right: 1em; }
		#menu.show nav ul { display: block; padding-top: 1em; opacity: 1; }
		#menu.show nav ul li, #menu.show nav ul.subnav { display: block; text-align: right; }
		#menu.show nav ul li a { padding: 0.5em 0; display: block; }
		#menu.show .menu-toggle .open { visibility: hidden; }
		#menu.show .menu-toggle .close { visibility: visible; }
		#menu.show .social { display: -webkit-box; display: flex; top: auto; bottom: 20vh; right: 1.0em; margin: 0; }
			#menu.show .social a:first-child { display: none; }
			#menu.show .social a.schalter { position: static; font-size: 0.84em; }
		#menu.show ul.subnav, #menu.show li.mit-subnav:after { display: none; }


	/* Umbruch von Titeln
	------------------------------------------------------------------------------------------------------- */
	h1, h2, h3 { -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; -webkit-hyphenate-before: 2; -webkit-hyphenate-after: 3; hyphenate-limit-lines: 3; }


	/* Mitgliederliste
	------------------------------------------------------------------------------------------------------- */
	.zusatzinfo { position: relative; max-height: 100vw; }
		.zusatzinfo .portraitbild { position: absolute; top: 0; left: 0; width: 15vw; }
		.zusatzinfo .zitat { padding-left: 18vw; font-size: 0.88em; }
		.zusatzinfo .letztes.viertel { display: none; }


	/* Mitglieder Karte
	------------------------------------------------------------------------------------------------------- */
	#map_canvas { height: 50vh !important; }

	.filter-branche li { width: 50%; font-size: 1.4rem; }

}

/*	-------------------------------------------------------------------------
	Positionierung: Desktop
*/
@media screen and (min-width: 960px) {
	body { font-weight: 300; } }

/*	-------------------------------------------------------------------------
	Responsive Scaling
*/
@media screen and (min-width: 1240px) {
	html { font-size: 72.5%; }
}

/*	-------------------------------------------------------------------------
	Erscheinung & Typografie	(+ common positioning)
*/


/*	-------------------------------------------------------------------------
	Hyperlinks
*/
header a { text-decoration: none; color: var(--black); }

main a, footer a { color: var(--black); text-decoration: none; border-bottom: 0.1rem solid #a7b2b8; }

main a:hover, footer a:hover { border-color: black; color: black; border-bottom: 0.1rem solid black; }

a.schalter { display: block; text-align: center; padding: 0.33em 0.5em; color: white; background-color: var(--black); font-weight: bold; }

a.schalter:hover { color: white; background-color: black; border-bottom: none; }

a.schalter.zum-profil { background-color: #ff0400; }

.mehr { text-align: right; }
	.mehr a { font-weight: bold; }
	.mehr a:before { content: '\2192\00A0\00A0'; }

/* DATEPICKER */
.jquery-datepicker,
.datepicker-box,
.box-row,
.header-title,
.header-actions,
.header-action,
.box-cell {
	margin: 0 !important;
}

/* GOOGLE MAPS */
#map_canvas { height: 600px; }
	#map_canvas div { margin-bottom: 0; }
	#map_canvas img { margin: 0 auto; }
	#map_canvas h3 { margin: 0; }

.gm-svpc { display: none; }

/* .gm-style > div > div > div > div > div { -webkit-filter: grayscale(95%); filter: grayscale(95%); } */

/* Infobubble
------------------------------------------------------------------------------------------------------- */
/* .gm-style-iw { height: 3.3em; } */
.gm-style-iw h3 a { font-weight: bold; }

/* Zoom controls fix
------------------------------------------------------------------------------------------------------- */
.gmnoprint img { margin: 0; }
.gmnoprint div { padding: 0; }
.gmnoprint button { padding: 0; }