/*!
Theme Name:  interpretenstiftung.ch Theme
Description: This is a child theme of zweidesign-theme (Framework by zweidesign)
Author:      zweidesign GmbH
Author URI:  https://zweidesign.ch
Template:    zweidesign-theme
Text Domain: interpretenstiftung-theme
*/

/* Settings */

@import url("https://use.typekit.net/pil3iqx.css");
@import url("style_gforms.css");

:root {
	--color-blue: 33, 126, 218;
	--color-yellow: 255, 230, 161;
	--color-green: 0, 153, 139;
	--color-red: 252, 147, 147;

	--color-primary: var(--color-blue);
	--color-secondary: var(--color-yellow);
	--color-background: 255, 255, 255;
	--color-text: 0, 0, 0;
	--color-link: var(--color-text);
	--color-link-hover: var(--color-text);
	--icon-size: 2em;
	--transition-duration: 300ms;

	--breakpoint: 640px;
	--padding-value: 4%;
	--padding-value-limited: min(var(--padding-value), 60px);
	--padding-value-number: tan(atan2(var(--padding-value), 1%)); /* (https://stackoverflow.com/questions/29505279/css-calc-multiplication-and-division-with-unit-ed-values) */
	--padding: calc(.5 * var(--padding-value-limited)) calc(2 * var(--padding-value-limited));
	--grid-gap: 20px;
	--grid-min: calc((var(--breakpoint) * calc((100 - 4 * var(--padding-value-number)) / 100) - var(--grid-gap)) * 0.5);
	
	--width-font-size-min: 320px;
	--width-paragraph-text: 800px;
	--width-font-size-max: 1120px;
	--width-font-size-max-number: tan(atan2(var(--width-font-size-max), 1px)); /* (https://stackoverflow.com/questions/29505279/css-calc-multiplication-and-division-with-unit-ed-values) */
	--width-max: 1920px;

	--font-size-normal: 20px;
	--font-size-small: 16px;
	--font-size-h1: calc(38px + min((1 / var(--width-font-size-max-number)) * (100vw - var(--width-font-size-min)), 1px) * 10);
	--font-size-h2: calc(32px + min((1 / var(--width-font-size-max-number)) * (100vw - var(--width-font-size-min)), 1px) * 6);
	--font-size-h3: 30px;
	--font-size-h4: 25px;
}

/* Generic: Ground zero styles. Low-specificity, far-reaching. Resets, Normalize.css, etc. */

* { /* http://www.paulirish.com/2012/box-sizing-border-box-ftw */
	box-sizing: border-box;
}

a, button, input, select, textarea, label, summary { /* https://adactio.com/journal/10019 */
	touch-action: manipulation;
}

/* Overall styles */

html {
	font-family: "loos-normal", sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: var(--font-size-normal);
	line-height: 1.3;
	text-size-adjust: 100%;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
}

body {
	margin: 0;
}

:where(.is-layout-grid) {
    gap: 2em 1em !important;
}

h1 {
	display: inline-block;
	font-size: var(--font-size-h1);
	font-weight: 500;
	color: white;
	background-color: rgb(var(--color-green));
	padding: 0 20px 3px 20px;
	border-radius: 3px;
	margin-top: 0;
	margin-bottom: .75em;
}

h2 {
	font-size: var(--font-size-h2);
	font-weight: 500;
	border-top: 2px solid black;
	margin-top: 0;
	margin-bottom: 1.5em;
}

h3 {
	font-size: var(--font-size-h3);
	font-weight: 500;
	margin-top: 0;
	margin-bottom: .75em;
}

h4 {
	font-size: var(--font-size-h4);
	font-weight: 500;
}

::selection {
	background-color: rgb(var(--color-secondary));
	color: black;
}

header ::selection {
	background-color: rgb(var(--color-primary));
	color: white;
}

a, a:visited {
	text-decoration: underline;
	//text-decoration-color: transparent;
	transition: text-decoration var(--transition-duration) ease;
	color: rgb(var(--color-text));
	//cursor: pointer;
}

a:hover, a:active {
	color: rgba(var(--color-text), .5);
	//text-decoration-color: rgb(var(--color-link-hover));
}

p {
	margin-top: 0;
}

img, svg {
	max-width: 100%;
	vertical-align: middle; /* to remove space at the bottom */
}

strong {
	font-weight: 500;
}

.icon-with-transition > * {
	transition: all .4s ease;
}

#icon-spot:hover {
	.path-01 { d: path("M65.0219 58.8421L74.4505 62.7052L63.4434 89.57L54.0148 85.7069C52.421 85.0538 51.6463 83.2226 52.3033 81.6192L60.9343 60.5537C61.5873 58.9598 63.4185 58.1851 65.0219 58.8421Z"); }
	.path-02 { d: path("M89.6761 44.8036L148.475 68.8949L120.442 137.315L61.643 113.223C54.5092 110.3 51.1013 102.143 54.0202 95.0183L71.4672 52.436C74.3901 45.3021 82.5479 41.8942 89.6722 44.8132L89.6761 44.8036Z"); }
	.path-02 { fill: #00998B; }
	.path-03 { d: path("M120.458 137.312L148.286 170.661C150.652 173.494 155.186 172.799 156.587 169.375L196.95 70.8537C198.361 67.4088 195.57 63.715 191.876 64.1196L148.483 68.8822L120.458 137.302V137.312Z"); fill: #00998B; }
	.path-03 { fill: #00998B; }
	.path-04 { d: path("M140.577 75.0146L83.6848 51.71"); }
	.path-05 { d: path("M135.347 87.7876L78.4448 64.4829"); }
	.path-06 { d: path("M130.118 100.571L73.2153 77.2559"); }
	.path-07 { d: path("M124.878 113.344L67.9858 90.0286"); }
	.path-08 { d: path("M119.648 126.117L62.7458 102.802"); }
	.path-09 { d: path("M101.064 19.9869L112.155 19.8998C114.583 19.8807 116.58 21.8366 116.6 24.2749L117.115 89.8497C117.158 95.3384 112.731 99.8351 107.242 99.8782C101.754 99.9213 97.2571 95.4947 97.214 90.006L96.6989 24.4312C96.6798 21.9929 98.6357 20.006 101.064 19.9869Z"); }
	.path-10 { d: path("M106.948 95.4657C110.449 95.4657 113.288 92.6273 113.288 89.1259C113.288 85.6246 110.449 82.7861 106.948 82.7861C103.447 82.7861 100.608 85.6246 100.608 89.1259C100.608 92.6273 103.447 95.4657 106.948 95.4657Z"); }
	.path-11 { d: path("M205.303 85.5981L249 91.3386"); }
	.path-11 { stroke: #217EDA; }
	.path-12 { d: path("M193.194 104.472L218.607 112.908"); }
	.path-12 { stroke: #217EDA; }
	.path-13 { d: path("M194.75 129.375L241.157 148.203"); }
	.path-13 { stroke: #217EDA; }
	.path-14 { d: path("M175.555 166.21L212.725 196.734"); }
	.path-14 { stroke: #217EDA; }
	.path-15 { d: path("M178.398 142.49L203.411 157.027"); }
	.path-15 { stroke: #217EDA; }
}

#icon-book:hover {
	.path-01 { d: path("M55.9009 55.2053H138.23C140.346 55.2053 142.071 56.9228 142.071 59.0301V162.878H55.9009C53.7847 162.878 52.0601 161.16 52.0601 159.053V59.0301C52.0601 56.9228 53.7847 55.2053 55.9009 55.2053Z"); }
	.path-01 { fill: #00998B; }
	.path-02 { d: path("M145.901 55.2053H228.23C230.346 55.2053 232.071 56.9228 232.071 59.0301V159.053C232.071 161.16 230.346 162.878 228.23 162.878H142.071V59.0301C142.071 56.9228 143.795 55.2053 145.911 55.2053H145.901Z"); }
	.path-02 { fill: #00998B; }
	.path-03 { d: path("M120.232 162.477H163.899C163.899 167.545 159.772 171.655 154.683 171.655H129.458C124.369 171.655 120.243 167.545 120.243 162.477H120.232Z"); }
	.path-03 { fill: #00998B; }
	.path-04 { d: path("M156.238 40.665H216.252C218.728 40.665 220.739 42.6564 220.739 45.122V146.852C220.739 149.317 218.739 151.309 216.263 151.309H157.328C149.096 151.309 142.06 158.589 142.06 158.589V54.7945C142.06 46.9869 148.409 40.665 156.238 40.665Z"); }
	.path-05 { d: path("M127.871 40.665H67.8571C65.3812 40.665 63.3815 42.6564 63.3815 45.122V146.852C63.3815 149.317 65.3812 151.309 67.8571 151.309H125.395C136.833 151.309 142.06 158.589 142.06 158.589V54.7945C142.06 46.9869 135.712 40.665 127.871 40.665Z"); }
	.path-06 { d: path("M161.169 68.6184H210.2"); }
	.path-06 { stroke: #217EDA; }
	.path-07 { d: path("M161.169 95.792H210.2"); }
	.path-07 { stroke: #217EDA; }
	.path-08 { d: path("M161.169 55.0264H210.2"); }
	.path-08 { stroke: #217EDA; }
	.path-09 { d: path("M161.169 82.1997H210.2"); }
	.path-09 { stroke: #217EDA; }
	.path-10 { d: path("M161.169 109.373H210.2"); }
	.path-10 { stroke: #217EDA; }
	.path-11 { d: path("M161.169 122.965H210.2"); }
	.path-11 { stroke: #217EDA; }
	.path-12 { d: path("M74.6923 68.6184H123.724"); }
	.path-12 { stroke: #217EDA; }
	.path-13 { d: path("M74.6923 95.792H123.724"); }
	.path-13 { stroke: #217EDA; }
	.path-14 { d: path("M74.6923 55.0264H123.724"); }
	.path-14 { stroke: #217EDA; }
	.path-15 { d: path("M74.6923 82.1997H123.724"); }
	.path-15 { stroke: #217EDA; }
	.path-16 { d: path("M74.6923 109.373H123.724"); }
	.path-16 { stroke: #217EDA; }
	.path-17 { d: path("M74.6923 122.965H123.724"); }
	.path-17 { stroke: #217EDA; }
	.path-18 { d: path("M197.599 140.962H210.2"); }
	.path-18 { stroke: #217EDA; }
	.path-19 { d: path("M74.6818 140.962H87.2835"); }
	.path-19 { stroke: #217EDA; }
	.path-20 { d: path("M142.06 60.1155V146.841"); }
}

#icon-ring:hover {
	.path-01 { d: path("M100.68 177.406C82.1204 166.494 67.7921 148.426 62.1733 125.886"); }
	.path-01 { stroke: #217EDA; }
	.path-02 { d: path("M217.78 141.558C207.465 163.158 187.932 180.152 162.884 186.397"); }
	.path-02 { stroke: #217EDA; }
	.path-03 { d: path("M210.777 57.9988C216.499 66.14 220.855 75.4565 223.404 85.6834"); }
	.path-03 { stroke: #217EDA; }
	.path-04 { d: path("M81.7107 49.452C92.3391 37.9092 106.34 29.2499 122.694 25.1733"); }
	.path-04 { stroke: #217EDA; }
	.path-05 { d: path("M136.327 79.865C142.131 78.4182 147.979 78.9939 153.095 81.1431"); }
	.path-05 { stroke: #217EDA; }
	.path-06 { d: path("M130.217 129.365C123.784 125.928 118.769 119.89 116.865 112.253"); }
	.path-06 { stroke: #217EDA; }
	.path-07 { d: path("M168.715 99.3273C172.284 113.645 163.57 128.146 149.253 131.715"); }
	.path-07 { stroke: #217EDA; }
	.path-08 { d: path("M202.143 63.4581L202.193 63.4027C196.549 55.4882 189.228 48.5699 180.366 43.2448C171.504 37.9196 161.959 34.7021 152.321 33.4338L152.296 33.5043C172.291 36.1396 190.417 47.0319 202.143 63.4581Z"); }
	.path-09 { d: path("M161.579 74.5225C167.848 78.2894 172.567 83.652 175.557 89.7665L202.145 63.4683C190.432 47.0496 172.306 36.1574 152.298 33.5145L141.558 69.3359C148.358 69.0962 155.311 70.7556 161.579 74.5225Z"); }
	.path-09 { fill: #00998B; }
	.path-10 { d: path("M83.4526 148.097L83.3745 148.17C89.0182 156.084 96.34 163.002 105.202 168.327C114.063 173.653 123.609 176.87 133.246 178.138L133.274 178.035C113.289 175.397 95.1628 164.505 83.4526 148.097Z"); }
	.path-11 { d: path("M123.991 137.06C117.722 133.293 113.004 127.93 110.013 121.816L83.4526 148.096C95.1628 164.505 113.289 175.397 133.274 178.035L144.012 142.246C137.212 142.486 130.259 140.827 123.991 137.06Z"); }
	.path-11 { fill: #00998B; }
	.path-12 { d: path("M100.458 46.4373L100.4 46.3769C92.4859 52.0206 85.5676 59.3423 80.2425 68.204C74.9173 77.0656 71.6998 86.6112 70.4315 96.2488L70.5247 96.2791C73.1599 76.2837 84.0421 58.1601 100.458 46.4373Z"); }
	.path-13 { d: path("M117.94 80.95 C115.28 82.95 120.64 76.01 126.76 73.02 C118.99 64.16 109.72 55.30 100.46 46.44 C84.05 58.16 73.16 76.28 70.52 96.28 C82.45 99.86 94.39 103.44 106.32 107.01 C106.08 100.21 107.74 93.26 111.51 86.99Z"); }
	.path-13 { fill: #00998B; }
	.path-14 { d: path("M215.139 115.334L215.058 115.311C212.41 135.299 201.518 153.425 185.099 165.137L185.17 165.205C193.084 159.562 200.002 152.24 205.328 143.378C210.653 134.517 213.87 124.971 215.139 115.334Z"); }
	.path-15 { d: path("M215.058 115.311L179.247 104.568C179.486 111.368 177.827 118.321 174.06 124.589C170.293 130.858 164.931 135.576 158.816 138.567L185.099 165.137C201.518 153.425 212.413 135.309 215.058 115.311Z"); }
	.path-15 { fill: #00998B; }
	.path-16 { d: path("M177.397 94.316C177.707 95.2557 177.985 96.2028 178.227 97.1701C178.282 97.3918 178.327 97.6159 178.37 97.8301C178.588 98.7923 178.779 99.7721 178.917 100.754C179.092 102.016 179.205 103.283 179.244 104.558L215.055 115.301C216.217 106.482 215.78 97.3012 213.497 88.1423C211.214 78.9833 207.306 70.6897 202.14 63.4479L175.552 89.7462C176.274 91.225 176.88 92.7542 177.395 94.306Z"); }
	.path-17 { d: path("M154.284 140.392C153.344 140.701 152.397 140.98 151.44 141.219C151.198 141.279 150.944 141.332 150.699 141.382C149.737 141.601 148.765 141.779 147.783 141.917C146.531 142.089 145.274 142.199 144.002 142.249L133.264 178.038C142.083 179.2 151.254 178.765 160.412 176.482C169.571 174.199 177.855 170.293 185.087 165.13L158.803 138.559C157.335 139.279 155.816 139.882 154.274 140.395Z"); }
	.path-18 { d: path("M108.535 118.332C108.195 117.4 107.906 116.455 107.637 115.505C107.577 115.264 107.494 115.017 107.434 114.775C107.195 113.818 106.997 112.85 106.829 111.876C106.558 110.274 106.378 108.649 106.323 107.015L70.5247 96.2791C69.3703 105.086 69.8048 114.256 72.083 123.395C74.3611 132.533 78.2869 140.855 83.4526 148.097L110.013 121.816C109.462 120.68 108.967 119.508 108.532 118.322Z"); }
	.path-19 { d: path("M130.268 71.5294C131.2 71.19 132.145 70.901 133.107 70.6398C133.329 70.5845 133.546 70.5091 133.757 70.4563C134.714 70.2177 135.689 70.0068 136.666 69.8488C138.279 69.5754 139.913 69.3926 141.558 69.3358L152.298 33.5144C143.489 32.3499 134.311 32.7971 125.163 35.0778C116.014 37.3584 107.692 41.2842 100.451 46.4499L126.749 73.0382C127.893 72.4748 129.064 71.9794 130.261 71.542L130.268 71.5294Z"); }
	.path-20 { d: path("M100.296 55.1464C100.296 55.1464 83.6951 64.7106 77.9275 91.1161"); }
	.path-21 { d: path("M184.315 155.209C184.315 155.209 200.916 145.645 206.684 119.239"); }
}

#icon-phone:hover {
	.path-01 { d: path("M58.7179 114.272C63.3041 113.898 66.7187 109.877 66.3444 105.291C65.9702 100.705 61.949 97.29 57.3627 97.6642C52.7765 98.0384 49.362 102.06 49.7362 106.646C50.1104 111.232 54.1316 114.647 58.7179 114.272Z"); }
	.path-02 { d: path("M59.0238 117.359L57.0456 94.5865C55.9842 82.3673 65.0475 71.5794 77.2668 70.518L95.5855 68.9266L101.41 135.978L83.0915 137.57C70.8722 138.631 60.0844 129.568 59.023 117.349L59.0238 117.359Z"); }
	.path-02 { fill: #00998B }
	.path-03 { d: path("M77.8368 77.0375C69.2067 77.7831 62.8249 85.3891 63.5697 94.0089"); }
	.path-04 { d: path("M152.478 146.182L101.406 135.981L95.5817 68.9184L164.089 42.3315L173.475 150.373L152.478 146.182Z"); }
	.path-04 { fill: #00998B }
	.path-05 { d: path("M182.304 80.3409L179.825 80.5562C175.281 80.951 171.917 84.955 172.312 89.4995L173.438 102.47C173.833 107.014 177.837 110.378 182.382 109.983L184.861 109.768C189.405 109.373 192.769 105.369 192.374 100.825L191.247 87.8545C190.853 83.3101 186.849 79.9461 182.304 80.3409Z"); }
	.path-05 { fill: #00998B }
	.path-06 { d: path("M170.872 31.4143L169.093 31.5688C165.838 31.8516 163.429 34.7195 163.711 37.9745L173.853 154.716C174.135 157.971 177.003 160.38 180.258 160.098L182.038 159.943C185.293 159.66 187.702 156.792 187.419 153.537L177.278 36.7959C176.995 33.541 174.127 31.1315 170.872 31.4143Z"); }
	.path-07 { d: path("M84.1872 137.476L101.405 135.981L104.862 175.776C105.146 179.046 102.723 181.931 99.4523 182.215L94.073 182.682C90.8022 182.966 87.918 180.543 87.6338 177.272L84.1769 137.477L84.1872 137.476Z"); }
	.path-08 { d: path("M102.017 73.7694L159.135 51.8202"); }
	.path-09 { d: path("M196.412 68.3823C196.412 68.3823 214.164 94.7702 200.248 120.898"); }
	.path-09 { stroke: #217EDA; }
	.path-10 { d: path("M206.639 50.9741C206.639 50.9741 234.624 93.4594 212.826 135.41"); }
	.path-10 { stroke: #217EDA; }
	.path-11 { d: path("M219.45 40.6061C219.45 40.6061 254.92 92.8517 227.043 144.609"); }
	.path-11 { stroke: #217EDA; }
}

.column-container {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(var(--grid-min), 1fr));
	grid-gap: var(--grid-gap);
}

ul.menu {
	margin: 0;
	padding: 0;

	& li {
		list-style-type: none;
	}
	
}

/* Template styles */

.header-block, .main-nav, article, .footer-block {
	max-width: 1440px;
	margin: auto;
	padding: var(--padding);
}

@media (min-width: 640px) {
	article .tagline {
		display: none;
	}
}

@media (min-width: 1920px) {

	.header-container,
	.main-container,
	.footer-container {
		width: var(--width-max);
		margin: auto;
	}

}

/* Trumps: Overrides, helpers, utilities. Only affect one piece of the DOM at a time. Usually carry !important. */

/* Content styles */

article .entry {

	margin-bottom: 2em;

	& > * + h2 {
		margin-top: 2em;
	}

	& > h2:first-child {
		margin-top: 1em;
	}

	& > h3,
	& > p,
	& > ul,
	& > ol,
	& > .narrow {
		max-width: var(--width-paragraph-text);
		margin-left: auto;
		margin-right: auto;
	}

	& > p.lead {
		max-width: none;
		font-size: var(--font-size-h4);
		margin-bottom: 60px;
	}

	& img {
		border-radius: 3px;
	}

}

.wp-block-buttons {
	margin-top: 1em !important;
	margin-bottom: 1em !important;
}

.wp-block-button .wp-element-button {
	color: white;
	font-family: "loos-compressed";
	font-weight: 500;
	font-size: var(--font-size-h4);
	text-transform: uppercase;
	border-radius: 3px;
	padding: 0 10px 3px 35px;
	background-color: rgb(var(--color-blue));
	background-image: url("img/icon-button.svg");
	background-repeat: no-repeat;
	background-position-x: 10px;
	background-position-y: center;

	&:hover {
		background-color: rgb(var(--color-green));
	}
}

.wp-block-accordion {
	max-width: 1188px;
	margin-bottom: 50px;
}

.wp-block-accordion-heading {
	font-size: var(--font-size-h4);
	background-color: rgb(var(--color-yellow));
	border-radius: 3px;
	margin-bottom: .5em;

	&:hover {
		background-color: rgba(var(--color-yellow), .7);
	}
	&:hover .wp-block-accordion-heading__toggle-icon {
		background-color: rgb(var(--color-green));
	}
}

.wp-block-accordion-heading__toggle {
	align-items: flex-start !important;
}

.wp-block-accordion-heading__toggle .wp-block-accordion-heading__toggle-title {
	padding-left: 20px;
}

.wp-block-accordion-heading__toggle:hover .wp-block-accordion-heading__toggle-title {
	text-decoration: none !important;
}

.wp-block-accordion-heading__toggle-icon {
	background-color: rgb(var(--color-blue));
	color: white;
	border-radius: 3px;
	height: 32px !important;
	width: 32px !important;
	margin-right: 10px;
}

.wp-block-accordion-heading__toggle-icon .custom-icon::before {
	content: "＋";
	font-size: 32px;
	display: inline-block;
	//transition: transform 0.2s;
}

.wp-block-accordion-item.is-open>.wp-block-accordion-heading .wp-block-accordion-heading__toggle-icon .custom-icon::before {
	content: "－";
}

.wp-block-accordion-heading__toggle[aria-expanded="true"] .wp-block-accordion-heading__toggle-icon .custom-icon::before {
	//transform: rotate(45deg);
}

.wp-block-accordion-item.is-open>.wp-block-accordion-heading .wp-block-accordion-heading__toggle-icon {
	transform: none !important;
}

.wp-block-accordion-panel {
	max-width: var(--width-paragraph-text);
	margin: auto;
}

.wp-block-file {
	display: flex;
	justify-content: space-between;
	font-size: var(--font-size-h4) !important;
	font-weight: 500;
	background-color: rgb(var(--color-yellow));
	border-radius: 3px;
	max-width: 1188px;
	padding: 10px 10px 10px 20px;
	margin-bottom: .5em;

	&:hover {
		background-color: rgba(var(--color-yellow), .7);
	}

	& > span {
		flex-grow: 1;
	}

	& > a {
		display: block;
		color: transparent;
		font-size: 0;
		border-radius: 3px;
		height: 32px;
		width: 32px;
		background-color: rgb(var(--color-blue));
		background-image: url("img/icon-download.svg");
		background-repeat: no-repeat;
		background-position-x: 5px;
		background-position-y: center;

		&:hover {
			background-color: rgb(var(--color-green));
		}

	}
}