/*
Hasspacher&Iseli -- design taken over unchanged from the WordPress theme
by Studio SW (Grafik) + Odoson (Entwicklung).
*/

@font-face {
	font-family: 'CalibreLight';
	src: url('fonts/CalibreLight.woff') format('woff');
	font-weight: 300;
	font-style: normal;
	font-stretch: normal;
	unicode-range: U+0020-20AC;
}


/**
 * reset.css
 *
 * Adapted from:
 * Normalize.css by Nicolas Gallagher and Jonathan Neal: https://github.com/necolas/normalize.css/
 * HTML5 boilerplate: http://html5boilerplate.com/
 * HTML5 Doctor Reset by Eric Meyer and Richard Clark: html5doctor.com/html-5-reset-stylesheet/
 *
 * Modified by Elliot Jay Stocks
 */

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

article, 
aside, 
details, 
figcaption, 
figure, 
footer, 
header, 
hgroup, 
nav, 
section 												{ display: block; }

audio, 
canvas, 
video 													{ display: inline-block; *display: inline; *zoom: 1; }

audio:not([controls]) 									{ display: none; }

[hidden] 												{ display: none; }

html 													{ font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }

body 													{ margin: 0; }

h1, h2, h3, h4, h5, h6 { font-weight:normal; }          

a		 												{ color:blue; }

a:focus  												{ outline: thin dotted; }

li														{ list-style:none; }

abbr[title]  											{ border-bottom:none; }

b, 
strong  												{ font-weight: 700; }

i,
em,
dfn  													{ font-style: italic; }

hr  													{ display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }

ins  													{ background: #ff9; color: #000; text-decoration: none; }

mark 	 												{ background: #ff0; color: #000; font-style: italic; font-weight: bold; }

pre, 
code, 
kbd, 
samp  													{ font-family: monospace, monospace; _font-family: 'courier new', monospace; }

pre  													{ white-space: pre; white-space: pre-wrap; word-wrap: break-word; }

q  														{ quotes: none; }

q:before, 
q:after  												{ content: ""; content: none; }

small 													{ font-size: 85%; }

sub, 
sup  													{ font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }

sup  													{ top: -0.5em; }

sub  													{ bottom: -0.25em; }

img  													{ border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }

label  													{ cursor: pointer; }

input, 
select, 
textarea  												{ font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }

button, 
input  													{ line-height: normal; *overflow: visible; }

button, 
input[type="button"], 
input[type="reset"], 
input[type="submit"] 									{ cursor: pointer; -webkit-appearance: button; }

input[type="checkbox"], 
input[type="radio"] 									{ box-sizing: border-box; }

input[type="search"] 									{ -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
input[type="search"]::-webkit-search-decoration			{ -webkit-appearance: none; }

button::-moz-focus-inner, 
input::-moz-focus-inner 								{ border: 0; padding: 0; }

textarea  												{ overflow: auto; vertical-align: top; resize: vertical; }

table  													{ border-collapse: collapse; border-spacing: 0; }

td  													{ vertical-align: top; }
div,
article,
section,
header,
footer,
nav,
li					{ position:relative; /* For absolutely positioning elements within containers (add more to the list if need be) */ }
.group:after 		{ display:block; height:0; clear:both; content:"."; visibility:hidden; /* For clearing */ }
body 				{ background:#fff; /* Don't forget to style your body to avoid user overrides */ }
::-moz-selection 	{ background:rgba(153,107,69,0.7); color:#fff; }
::selection 		{ background:rgba(153,107,69,0.7); color:#fff; }

/* ---------------------------------------------------------------------------------------------------------- 
02 Typography -----------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */
/*

12 / 16	= 		0.75em	 		(12px equivalent)
14 / 16	= 		0.875em 		(14px equivalent)
16 / 16	= 		1em 			(16px equivalent)
18 / 16 = 		1.125em 		(18px equivalent)
21 / 16 = 		1.3125em 		(21px equivalent)
24 / 16 = 		1.5em 			(24px equivalent)
30 / 16 = 		1.875em 		(30px equivalent)

*/

html,
body {
	font-family: 'CalibreLight', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	background: #fff;
	font-size: 20px;
 	-webkit-font-smoothing: antialiased;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
}

html {
	min-height: 120%
}

body {
	padding-top: 52px;
	padding-bottom: 100px;
}

h1, 
h2, 
h3, 
h4, 
h5, 
h6 { 
	color: rgb(153,107,69);
}

.wrap {
	width: 930px;
	margin: 0px auto;
}

header {
	border-bottom: 1px solid rgb(153,107,69);
	height: 52px;
	font-size: 1em;
	position: fixed;
	width: 930px;
	z-index: 110;
	top: 0px;
	background: #fff;
}

	h1.logo {
		top: 0px;
		overflow: hidden;
		position: absolute;
		width: 206px;
		height: 27px;
		background: url(img/logo.svg) no-repeat 0 0;
		background-size: 100% auto;
		text-indent: -10000px;
		z-index: 100;
	}
	
		h1.logo a {
			display: block;
			height: 100%;
			width: 100%;
		}
	
	h1.logo.fixed,
	h1.logo.fixed-fixed {
		width: 129px;
		height: 17px;
		top: 19px;
		position: fixed;
		z-index: 120;
	}
	
	header .navigation {
		margin-left: 414px;
	}
		
		header .navigation ul {
			font-size: 0px;
		}
		
			header .navigation ul li {
				font-size: 20px;
				display: inline-block;
			}
			
				header .navigation ul li a {
					display: block;
					line-height: 53px;
					text-decoration: none;
					padding: 0 13px;
					color: #000;
					-webkit-transition: all 0.2s ease-in-out;
					-moz-transition: all 0.2s ease-in-out;
					-o-transition: all 0.2s ease-in-out;
					transition: all 0.2s ease-in-out;
				}
				
				header .navigation ul li.current-menu-item a,
				header .navigation ul li.current-page-ancestor a,
				header .navigation ul li a:hover {
					color: rgb(153,107,69);
				}
				
			header .navigation ul li:last-child {
				float: right;
			}
			
				header .navigation ul li:last-child a {
					padding: 0 0 0 13px;
				}
				
				header .navigation ul li:first-child a {
					padding: 0 13px 0 0;
				}

.content {
	margin: 25px 0 0 0;
}

h1, h2 {
	font-size: 30px;
	line-height: 32px;
}

h3 {
	color: rgb(153,107,69);
	border-top: 1px solid rgb(153,107,69);
	border-bottom: 1px solid rgb(153,107,69);
	line-height: 100%;
	padding: 2px 0 4px 0;
	margin-bottom: 1em;
	z-index: 1;
}

	h3.list-heading {
		margin-bottom: 0px;
		z-index: 1;
		position: relative;
	}
	
	h3.list-heading.space {
		margin-top: 2em;
	}

h4 {
	color: #111;
	border-bottom: 1px solid #111;
	border-top: 1px solid #111;
	line-height: 100%;
	padding: 5px 0 0 0;
	margin-bottom: 1em;
	margin-top: -1px;
	z-index: 0;
}

img {
	max-width: 100%;
	height: auto;
}

.intro-images {
	position: relative;
	height: 380px;
	margin-left: 207px;
	margin-bottom: 35px;
	opacity: 0;
}

	.intro-images .image {
		position: absolute;
		width: 100%;
		height: 100%;
		z-index: 1;
		background-size: cover;
		background-position: center center;
		opacity: 0;
		display: none;
	}
	
		.intro-images .image:first-child {
			opacity: 1;
		}

.intro-text {
	margin-left: 414px;
	margin-bottom: 25px;
}

	.intro-text h2 {
		color: #000;
		line-height: 22px;
	}

.sidebar {
	width: 207px;
	float: left;
}
	.sidebar ul {

	}
	
		.sidebar ul li {
			height: auto;
			line-height: 120%;

		}
		
			.sidebar ul li a {
				margin: 0px;
				padding: 0px;
				line-height: 120%;
				text-decoration: none;
				color: inherit;
				-webkit-transition: all 0.2s ease-in-out;
				-moz-transition: all 0.2s ease-in-out;
				-o-transition: all 0.2s ease-in-out;
				transition: all 0.2s ease-in-out;
			}
			
			.sidebar ul li.current_page_item a,
			.sidebar ul li:hover a {
				color: rgb(153,107,69);
			}

.main {
	width: 723px;
	line-height: 120%;
	float: left;
}
	
	.main .links {
		float: left;
		width: 204px;
		padding-top: 5px;
	}
	
	.main .links h2 {
		width: 160px;
		margin-top: -6px;
		word-break: break-word;
		-webkit-hyphens: auto;
		-moz-hyphens: auto;
		-ms-hyphens: auto;
		hyphens: auto;
	}
	
	.main .rechts {
		float: right;
		width: 519px;
	}
	
	.main p {
		margin-bottom: 1em;
	}
	
	.main p:empty {
		display: none;
	}
	
	.main a {
		color: inherit;
		text-decoration: none;
		-webkit-transition: all 0.2s ease-in-out;
		-moz-transition: all 0.2s ease-in-out;
		-o-transition: all 0.2s ease-in-out;
		transition: all 0.2s ease-in-out;
	}
	
		.main a:hover {
			color: rgb(153,107,69);
		}
	
	.main ul {
		list-style: none; 
		padding-left: 0.8em; 
		text-indent: -0.8em;
		margin-bottom: 1em;
	} 
	
		.main li:before { 
			content: "\2013"; 
			display: block; 
			float: left; 
			width: 0.8em; 
		}
	
	.main ul.underlined {
		padding-left: 0px;
		text-indent: 0px;
	}
	
		.main ul.underlined li {
			border-bottom: 1px solid #000;
			padding: 1px 0 2px 0;
		}
		
		.main ul.underlined li:before {
			content: "";
		}
	
.list-item {
	cursor: pointer;
}

	.list-item.open {
		cursor: default;
		border-bottom: 1px solid rgb(153,107,69);
		margin-bottom: 30px;
	}
	
	.list-item.team.open {
		cursor: default;
		border-bottom: none;
		margin-bottom: 0px;
	}
	
	.list-item.open h3,
	.list-item.open .team-image {
		cursor: pointer;
	}
	
	.list-item.reference.open {
		border-bottom: 0px;
	}
	
	.list-item a,
	.rechts a
	 {
		text-decoration: none;
		color: rgba(153,107,69,1)
	}
	
	.list-item h3 {
		margin: 0px;
		margin-top: -1px;
		color: #000;
		z-index: 10;
		position: relative;
		border-color: #000;
		-webkit-transition: all 0.2s ease-in-out;
		-moz-transition: all 0.2s ease-in-out;
		-o-transition: all 0.2s ease-in-out;
		transition: all 0.2s ease-in-out;
	}
	
	.list-item .inner h3 {
		margin-bottom: 5px;
	}
	
	.list-item h4 {
		margin: 0px 0px 5px 0;
		margin-top: -6px;
		color: #000;
		z-index: 0;
		border-color: #000;
		-webkit-transition: all 0.2s ease-in-out;
		-moz-transition: all 0.2s ease-in-out;
		-o-transition: all 0.2s ease-in-out;
		transition: all 0.2s ease-in-out;
	}
		
		.list-item h3 .news-date,
		.list-item h3 .reference-date {
			float: right;
		}
		
		.list-item:hover h3 {
			color: rgb(153,107,69);
		}

		/* an entry without anything to open */
		.list-item.static {
			cursor: default;
		}

		.list-item.static:hover h3 {
			color: #000;
		}
		
		.list-item.open h3 {
			color: rgb(153,107,69);
			border-color: rgb(153,107,69);
		}
			
			.list-item.open h3 .reference-date {
				display: none;
			}
			
			.list-item.open h3 .news-date {
				float: none;
			}
			
			.list-item.open h3 .news-date:before {
				content: ", ";
			}
	
	.list-item.open .close {
		float: right;
		display: block;
		height: 15px;
		width: 20px;
		background: url(img/close.svg) no-repeat center center;
		cursor: pointer;
		margin-top: 4px;
	}
	
	.list-item .inner {
		display: none;
		margin: 8px 0 20px 0;
	}
	
		.list-item.team .inner {
			display: none;
			margin: 8px 0 0 0;
			padding-bottom: 25px;
		}
		
		.list-item.reference .inner {
			margin-top: 0px;
		}
		
		.list-item.open .inner {
			display: block;
		}
	
	.list-item .news-image,
	.list-item .team-image {
		width: 192px;
		height: auto;
		margin-bottom: 8px; 
	}
		
		.list-item .news-image {
			width: 100%;
		}

		/* the team photo stays visible outside the opening part, in the
		   left column below "Team"; name and CV stay narrow enough to
		   read comfortably */
		.main.vollbreite .team-liste {
			clear: both;
			padding-top: 20px;
		}

		.list-item.team {
			display: flow-root;
		}

		.list-item.team .team-image {
			float: left;
			margin: 0 0 20px -250px;
		}

		.list-item.team .team-text {
			display: flow-root;
			max-width: 34em;
		}

		@media screen and (max-width:780px) {
			.main.vollbreite .team-liste {
				padding-top: 0;
			}

			.list-item.team .team-image {
				float: none;
				margin: 0 0 8px 0;
			}
		}
	
		.list-item .team-image,
		.list-item .team-image .image {
			background: #d7c4a5;
			background-position: top center;
			height: auto;
			background-size: 100% auto;
			-webkit-transition: all 0.2s ease-in-out;
			-moz-transition: all 0.2s ease-in-out;
			-o-transition: all 0.2s ease-in-out;
			transition: all 0.2s ease-in-out;
		}
		
		/*
.list-item .team-image:hover .image {
			opacity: 0.3;
		}
*/
	
	.list-item .reference-image {
		width: 100%;
		height: auto;
	}
	
	.list-item .team-content {

	}

hr {
	background: rgb(153,107,69);
	border: 0px;
	height: 1px;
	margin: 0 0 30px 0;
}

.intro {
	position: fixed;
	height: 100%;
	width: 100%;
	z-index: 1000;
	top: 0px;
	bottom: 0px;
	background: #fff;
	background-size: cover;
	background-position: center center;
}

	.intro .logo {
		background: url(img/logo-intro.png) no-repeat 0 0;
		width: 849px;
		height: 111px;
		position: absolute;
		left: 50%;
		top: 50%;
		margin: -56px 0 0 -425px;
	}

footer {
	border-top: 1px solid rgb(178,178,178);
	color: rgb(178,178,178);
	padding: 15px 0;
	margin-top: 100px;
	position: fixed;
	bottom: 0px;
	width: 930px;
	background: #fff;
	z-index: 200;
}
	
	footer .footer-arrow {
		height: 17px;
		width: 33px;
		background: url(img/footer-arrow.png) no-repeat 0 0;
		cursor: pointer;
		position: absolute;
		right: -83px;
		top:-17px;
	}
		
		footer .footer-arrow:hover {
			background: url(img/footer-arrow-hover.png) no-repeat 0 0;
		}
	
	footer p {
		margin-bottom: 0em;
	}
	
	footer a {
		color: inherit;
		text-decoration: none;
		-webkit-transition: all 0.2s ease-in-out;
		-moz-transition: all 0.2s ease-in-out;
		-o-transition: all 0.2s ease-in-out;
		transition: all 0.2s ease-in-out;
	}
	
	footer a:hover {
		color: rgb(153,107,69);
	}

.citymap {
	width: 100%;
	height: 560px;
	background: url(img/Stadtplan_Olten.svg);
	background-size: 140% auto;
	background-repeat: no-repeat;
	background-position: center center;
}

	.citymap a {
		display: block;
		height: 100%;
		width: 100%;
	}

.spacer {
	height: 40px;
}

.fL {
	float: left;
}

.fR {
	float: right;
}

.clear {
	clear: both;
}


/* Impressum */
body.impressum h3 {
	margin-bottom: 5px;
}

@media screen and (max-width:1400px) {
	.citymap {
		height: 480px;
	}
}

@media screen and (max-width:1080px) {
	
	.wrap, header, footer {
		width: 762px;
	}
	
	header .navigation,
	.intro-text {
		margin-left: 204px;
	}
	
	h1.logo {
		width: 168px;
		height: 22px;
	}
		
	.intro-images {
		height: 400px;
		margin-left: 0;
	}
	
	.sidebar {
		float: none;
		width: 100%;
	}
	
		.sidebar ul {
			font-size: 0px;
			margin-top: -18px;
			padding-bottom: 10px;
			border-bottom: 1px solid rgb(153,107,69);
			margin-bottom: 20px;
		}
		
			.sidebar ul li {
				font-size: 20px;
				display: inline-block;
				margin-right: 15px;
			}
	
	.main {
		float: none;
		width: 100%;
	}
	
	.main .links {
		width: 204px;
	}
	
	.main .rechts {
		width: 558px;
	}
	
	.citymap {
		height: 400px;
	}
	
}

@media screen and (max-width:780px) {
	
	body {
		font-size: 16px;
		padding-top: 100px;
	}
	
	.wrap {
		width: 300px;
	}
	
	header, footer {
		width: 320px;
		margin-left: -10px;
	}
	
	header .navigation {
		margin-left: 0px;
		margin-top: 50px;
		width: 320px;
		text-align: center;
		border-bottom: 1px solid rgb(153,107,69);
		background: #fff;
	}
	
		header .navigation ul li {
			font-size: 15px;
			float: none !important;
		}
		
		header .navigation ul li a,
		header .navigation ul li:first-child a,
		header .navigation ul li:last-child a {
			padding: 0 4px;
			height: 50px;
		}
	
	.intro-text {
		margin-left: 0px;
		width: 100%;
	}
	
	h1.logo,
	h1.logo.fixed,
	h1.logo.fixed-fixed {
		width: 168px;
		height: 22px;
		position: fixed;
		top: 19px;
		z-index: 120;
		margin-left: 66px;
		-webkit-transition: all 0s ease-in-out;
		-moz-transition: all 0s ease-in-out;
		-o-transition: all 0s ease-in-out;
		transition: all 0s ease-in-out;
	}
	
	h1, h2 {
		font-size: 24px;
		line-height: 25px;
	}
	
	h1 br, h2 br {
		display: none;
	}
		
	.intro-images {
		height: 200px;
		margin-left: 0;
	}
	
	.sidebar {
		float: none;
		width: 100%;
	}
	
		.sidebar ul {
			font-size: 0px;
			margin-top: -18px;
			padding-bottom: 10px;
			border-bottom: 1px solid rgb(153,107,69);
			margin-bottom: 20px;
		}
		
			.sidebar ul li {
				font-size: 15px;
				display: inline-block;
				margin-right: 10px;
			}
	
	.main {
		float: none;
		width: 100%;
	}
	
	.main .links {
		width: 100%;
		float: none;
		margin-bottom: 10px;
	}
	
		.main .links h2 {
			width: 100%;
		}
	
	.main .rechts {
		width: 100%;
		float: none;
	}
	
	.list-item .links {
		margin-bottom: 0px;
		padding-top: 0px;
	}
	
	.citymap {
		height: 250px;
	}
	
}
/* Team list on the Firma page: same gap to the next line as a text block */
.main .team-liste {
	margin-bottom: 1em;
}

/* Arbeitsbereiche: one page, the list of its parts stays in view */
.main .links.abschnitte {
	position: sticky;
	top: 80px;
}

	.main .abschnitte ul {
		padding-left: 0;
		text-indent: 0;
		line-height: 140%;
	}

		.main .abschnitte li:before {
			content: none;
		}

		.main .abschnitte a.current,
		.main .abschnitte a:hover {
			color: rgb(153,107,69);
		}

.main section h2 {
	margin: -6px 0 0.5em 0;
}

.main section[id] {
	scroll-margin-top: 80px;
}

@media screen and (max-width:780px) {
	.main .links.abschnitte {
		position: static;
		margin-bottom: 30px;
	}

	.main section[id] {
		scroll-margin-top: 130px;
	}
}

/* Anchor for the "Kontakt" menu entry on the Firma page -- added with the move to Hugo */
#kontakt {
	scroll-margin-top: 80px;
}

@media screen and (max-width:780px) {
	#kontakt {
		scroll-margin-top: 130px;
	}
}

/* Gallery (Referenzen) -- added with the move to Hugo */
.main.vollbreite {
	width: 100%;
}

	/* without the left column, picture and text move left */
	.content.vollbreite .intro-images {
		height: 490px;
		margin-left: 0;
	}

	.main.vollbreite .links {
		width: 250px;
	}

		.main.vollbreite .links h2 {
			width: 210px;
		}

	.main.vollbreite .rechts {
		float: none;
		width: auto;
		margin-left: 250px;
	}

	/* text stays at a comfortable reading width, like the team CVs */
	.main.vollbreite .rechts p {
		max-width: 34em;
	}

	/* lines and the top picture end where the text does */
	.main.vollbreite hr,
	.content.vollbreite .intro-images {
		max-width: calc(250px + 34em);
	}


@media screen and (max-width:1080px) {
	.content.vollbreite .intro-images {
		height: 400px;
	}
}

@media screen and (max-width:780px) {
	.content.vollbreite .intro-images {
		height: 200px;
	}

	.main.vollbreite .links,
	.main.vollbreite .links h2 {
		width: 100%;
	}

	.main.vollbreite .rechts {
		margin-left: 0;
	}
}

.galerie {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

	.galerie figure {
		margin: 0;
		cursor: pointer;
		scroll-margin-top: 80px;
	}

	.galerie img {
		display: block;
		width: 100%;
		height: auto;
		-webkit-transition: all 0.2s ease-in-out;
		transition: all 0.2s ease-in-out;
	}

	.galerie figure:hover img {
		opacity: 0.8;
	}

	/* the picture an old reference page redirected to */
	.galerie figure:target img {
		outline: 1px solid rgb(153,107,69);
		outline-offset: 4px;
	}

.lightbox {
	border: 0;
	padding: 0;
	max-width: 100vw;
	max-height: 100vh;
	width: 100vw;
	height: 100vh;
	background: #fff;
}

	.lightbox::backdrop {
		background: #fff;
	}

	.lightbox figure {
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 60px 80px 30px 80px;
		box-sizing: border-box;
	}

	.lightbox img {
		max-width: 100%;
		min-height: 0;
		object-fit: contain;
	}

	.lightbox figcaption {
		color: rgb(153,107,69);
		padding-top: 10px;
		text-align: center;
	}

	.lightbox button {
		position: absolute;
		border: 0;
		background: none;
		cursor: pointer;
		color: #000;
		font: inherit;
		font-size: 60px;
		line-height: 1;
		z-index: 1;
	}

		.lightbox button:hover {
			color: rgb(153,107,69);
		}

	.lightbox .close {
		top: 20px;
		right: 20px;
		width: 30px;
		height: 30px;
		background: url(img/close.svg) no-repeat center center;
		background-size: contain;
	}

	.lightbox .prev,
	.lightbox .next {
		top: 50%;
		margin-top: -35px;
		padding: 0 20px;
	}

	.lightbox .prev { left: 0; }
	.lightbox .next { right: 0; }

@media screen and (max-width:1080px) {
	.galerie {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media screen and (max-width:780px) {
	.galerie {
		grid-template-columns: 1fr;
	}

	.galerie figure {
		scroll-margin-top: 130px;
	}

	.lightbox figure {
		padding: 60px 10px 20px 10px;
	}

	.lightbox .prev,
	.lightbox .next {
		top: auto;
		bottom: 10px;
		margin-top: 0;
		font-size: 40px;
	}
}

/* Picture captions: shown at once, unlike the browser's own tooltip */
.tooltip {
	position: fixed;
	z-index: 200;
	max-width: 320px;
	padding: 6px 10px;
	background: rgb(153,107,69);
	color: #fff;
	font-size: 18px;
	font-weight: bold;
	line-height: 120%;
	pointer-events: none;
}