/** Webfont Zurich
 * @license
 * MyFonts Webfont Build ID 2767687, 2014-03-12T12:53:34-0400
 * 
 * The fonts listed in this notice are subject to the End User License
 * Agreement(s) entered into by the website owner. All other parties are 
 * explicitly restricted from using the Licensed Webfonts(s).
 * 
 * You may obtain a valid license at the URLs below.
 * 
 * Webfont: Zurich by Bitstream
 * URL: http://www.myfonts.com/fonts/bitstream/zurich/zurich/
 * 
 * Webfont: Zurich Bold by Bitstream
 * URL: http://www.myfonts.com/fonts/bitstream/zurich/bold/
 * 
 * 
 * License: http://www.myfonts.com/viewlicense?type=web&buildid=2767687
 * Licensed pageviews: 10,000
 * Webfonts copyright: Copyright 1990-2003 Bitstream Inc. All rights reserved.
 * 
 * © 2014 MyFonts Inc
*/

/*-- Reset und Grundzüge des css übernommen und ergänzt durch seitenreich - Jörg Bühler --*/
@charset "UTF-8";
@import url("//hello.myfonts.net/count/2a3b47");
@font-face {
	font-family: 'ZurichBT-Roman';
    src: url('../webfonts/2A3B47_0_0.eot');
    src: url('../webfonts/2A3B47_0_0.eot?#iefix') format('embedded-opentype'),
        url('../webfonts/2A3B47_0_0.woff') format('woff'),
        url('../webfonts/2A3B47_0_0.ttf') format('truetype');
}
@font-face {
    font-family: 'ZurichBT-Bold';
    src: url('../webfonts/2A3B47_1_0.eot');
    src: url('../webfonts/2A3B47_1_0.eot?#iefix') format('embedded-opentype'),
        url('../webfonts/2A3B47_1_0.woff') format('woff'),
        url('../webfonts/2A3B47_1_0.ttf') format('truetype');
}

/* 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: inherit;
    font-size: 100%;
    vertical-align: baseline;}
html {line-height: 1;}
ol,
ul {list-style: none;}
table {
    border-collapse: collapse;
    border-spacing: 0;}
caption,
th,
td {
    text-align: left;
    font-weight: normal;
    vertical-align: middle;}
q,
blockquote {quotes: none;}
q:before,
q:after,
blockquote:before,
blockquote:after {
    content: '';
    content: none;}
a img {border: none;}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {display: block;}
* {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background-repeat: no-repeat;
    text-rendering: optimizeLegibility;}
*:focus {outline: none;}
html {
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;}
/* End Reset */ 

html.no-scroll {overflow: hidden; }
body {
    font-family: ZurichBT-Roman, sans-serif;
    font-size: 12px;
    line-height: 15px;
    background: #ffffff;
    color: #646464;
	width: 100%;
	max-width: 100%;}
body.no-scroll {overflow: hidden;}
	
/*-- Site Strukturelemente */
/* Modern-slider als Ersatz für js */
.slideshow-container {
    position: relative;
    width: 100%;
    height: 100vh; 
    overflow: hidden;}
.slideshow-container .slide:first-child {
    opacity: 1;
    transition: none;}
.slideshow-container .slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1.5s ease-in-out; 
    z-index: 1;}
.slideshow-container .slide.active {
    opacity: 1;
    z-index: 2;
    transition: none;}
.slideshow-container .slide.no-transition {
    transition: none;}
.slideshow-container a {
    display: block;
    width: 100%;
    height: 100%;}
@media (max-width: 480px) and (orientation: portrait) {
    .slideshow-container .slide {
        background-position: center 5%;
    }
}
/* Header mit Navigation */
#header {
    position: fixed;
    top: 0;
    left: 0;
    line-height: 15px;
    z-index: 10;
	height: 37px;
    padding: 12px 15px 2px 15px;
    background-color: white;
    overflow: hidden;
    -moz-transition-property: height;
    -o-transition-property: height;
    -webkit-transition-property: height;
    transition-property: height;
    -moz-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
	width: 100vw;}
#header h1 {
    font-family: ZurichBT-Bold, sans-serif;
    display: block;
    float: left;
    width: 258px;}
@media (max-width: 440px) {
    #header h1 {width: 200px;}
}
#header h1 a,
#header h1 a:visited {color: #927314;}
#header ul {
    display: block;
    float: left;}
@media (max-width: 1024px) {
    #header ul {display: none;}
}
#header ul li {
    width: 129px;
    display: block;
    float: left;
    position: relative;}
#header ul li ul {
    width: 100%;
    max-width: 635px;
    display: none;
    background-color: #ffffff;
    margin-bottom: 10px;
    position: absolute;}
#header ul li ul li {
    margin-right: 10px;
    float: none;
    display: block;
    width: 635px;
    overflow: visible;}
#header ul li ul li .about-image {margin-top: 74px;}
#header ul li:hover ul {display: block;}
#header.home ul {display: none;}#toggle-menu {
	position: absolute;
	right: 12px;
	display: none;
  	cursor: pointer; }
#toggle-menu {
    position: absolute;
    right: 12px;
    display: none;
    cursor: pointer;}
@media (max-height: 500px) and (orientation: landscape) {
	#header {
		padding-right: 30px;
		padding-left: 30px;}
	#toggle-menu {right: 30px;}
}
@media (max-width: 1024px) {
    #toggle-menu {display: block;}
}
#toggle-menu img {
	height: 12px;
    width: 18px;
	opacity: 1;}
ul.mobile-menu {
    display: none;
    position: fixed;
    left: 0;
    width: 100%;
    height: 100%;
    top: 37px;
    overflow-y: auto;
    background-color: white;
    padding: 0 15px 37px 15px;
	z-index: 50;}
ul.mobile-menu.active {display: block;}

/* neues mobile-menu by seitenreich */
.mobile-menu {
	list-style: none;
	margin: 0;
	padding: 0;}
.menu-header {display: flex;}
.accordion-trigger {
	display: flex;
	justify-content: space-between;
	color: #646464;
	align-items: center;
	width: 100%;
	background: none;
	border: none;
	padding: 1em 0;
	font: inherit;
	text-align: left;
	cursor: pointer;}
.accordion-trigger::after {
	content: "+";
	transition: transform 0.2s ease;}
.accordion-trigger[aria-expanded="true"]::after {
	content: "−";}
.accordion-trigger.is-static::after {
	content: "";}
.menu-content {
	overflow: hidden;
	max-height: 0;
	transition: max-height 0.3s ease;}
.menu-content.is-static {
	max-height: none;
	margin-bottom: 12px;}
.menu-content-inner {padding-bottom: 1em; }
.text-block {
	opacity: 0;
	transform: translateY(-0.25em);
	transition: opacity 0.2s ease, transform 0.2s ease;}
.menu-content.open .text-block {
	opacity: 1;
	transform: translateY(0);}
.menu-content figure a {opacity: 0.6;}
.menu-content figure a:hover {opacity: 1;}
.text-block figure {
	margin-bottom: 12px;}

/* -- Hauptteil */  
main {margin-top: 100px;
	margin-right: auto;
	margin-left: auto;
	width: 480px;}
#content {
	padding-right: 12px;
	padding-left: 15px;
	padding-bottom: 50px;
	overflow: hidden;}
#content.startpage {
    height: 99%;
    padding-top: 83px;
    padding-bottom: 15px;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;}
#content.startpage .slideshow-container {
    width: 100%;
    height: 100%;}
#content.startpage .slideshow-container div {
    width: 100%;
    height: 100%;
    background-size: contain;
    background-position-x: center;}
#content.startpage .slideshow-container div a {
    display: block;
    width: 100%;
    height: 100%;}
#content.startpage .slideshow-container div a img {
    display: block;
    width: 100%;
    height: auto;}
@media (max-width: 1024px) {
	#content.startpage .slideshow-container {margin-top: 10vh;}
	#content.startpage {
        padding-top: 50px;
        padding-bottom: 10px;}
}
	
/* -- Typographie Text */	
strong {font-family: ZurichBT-Bold, sans-serif;}
p {margin-bottom: 15px;}

/* Link */
a,
a:visited {
    text-decoration: none;
    color: #575757;}
a:hover,
a:active {
	font-style: italic; 
	cursor: pointer;}
#logo a:hover {font-style: normal;}

/* -- Flexbox für Mainprojects und Projects */
.flex-container {
    display: flex;
    flex-wrap: wrap;
    gap: 70px 4px; 
	margin-top: 90px;}
.bild {
	display:  flex;
	flex-direction: column;
	/* Der Firefox-Fix: */
    width: fit-content;
	margin:  0;
	position: relative;
	z-index: 5;
	pointer-events: auto;}
.bild:hover {cursor: pointer;}
.bild img {
	display: block;
	width: auto;
	height: 120px;
	pointer-events: all;}
.gallery-title {
    margin-top: 3px;
    text-align: left;
	white-space: nowrap;
	width: 0;
  	min-width: 0; /* Der Firefox-Fix: */
  	overflow: visible;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.5s ease-in-out;}
figure.is-loaded .gallery-title {
    opacity: 1;
    visibility: visible;}
.abstandzumnaechstenprojekt {
	display: inline-block;
    flex-shrink: 0; /* Verhindert, dass der Gap bei Platzmangel schrumpft */
    width: 180px;  
    height: 120px; 
    pointer-events: none;}
@media (max-width: 480px) {
	.flex-container {
		gap: 35px 4px;
  		margin-top:  40px;
		align-items: flex-start;}
  	.bild img {
  		height: 60px;
  		display: block;}
  	.gallery-titel {
  		white-space: normal; 
  		word-wrap:  break-word;
  		max-width: 160px;
  		width: auto;
  		line-height: 1.1;
  		margin-top: 4px;}
  	.abstandzumnaechstenprojekt { 
  		width: 60px;
  		height: 60px;
  		display: inline-block;
  		flex-shrink: 0;}
}
/* Overlay (Standard / Desktop) -- */
body.no-scroll { 
	position: fixed;
    width: 100%;
    height: 100%;
    overflow: hidden; }
.overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; 
    width: 100%; 
	height: 100vh; /* Fallback */
	height: 100dvh;
    background: white;
    pointer-events: none; /* Im Ruhezustand Klicks auf Thumbs erlauben */
    overscroll-behavior: contain;
    opacity: 0;
	visibility: hidden;
    transition: opacity 0.25s ease-in-out;
	z-index: -1;}
.overlay * {}
.overlay.active {
    display: flex;
	justify-content: center;
    align-items: center;
	height: 100dvh;
    opacity: 1;
	visibility: visible;
    pointer-events: all;
    cursor: none;
	z-index: 100;}
.overlay-figure {
    display: flex;
	flex-direction: column;
	align-items: center;
    z-index: 160;
	width: fit-content;
	max-height: 90dvh;
	max-width:  95%;
	margin: 0 auto;
	pointer-events: auto;
	cursor: none;}
.overlay-figure img {
    display: block;
	max-width: 95vw;
	max-height: 90dvh;
	width: auto;
	height: auto;
    object-fit: contain;
    pointer-events: auto;
    opacity: 0;
    transition: opacity 0.25s ease-in-out;
    visibility: hidden;
	z-index: 161;
	cursor: none;}
.overlay-caption {
    width: 100%;
	box-sizing: border-box;
    color: #646464;
    text-align: left;
    margin-top: 10px;
    opacity: 0;
    transition: opacity 0.25s ease-in-out;
    visibility: hidden;
	display: none;}
.overlay-figure.is-loaded img, 
.overlay-figure.is-loaded .overlay-caption {
    opacity: 1;
    visibility: visible;}
.overlay-figure.is-loaded .overlay-caption.should-show {
    display: block;
    opacity: 1;}
.overlay .nav {
    position: fixed;
    top: 0;
    height: 100dvh;
    cursor: none;
    -webkit-tap-highlight-color: transparent;
    z-index: 130;
	flex-shrink: 0;}
.overlay .nav.left { left: 0; width: 35%; }
.overlay .nav.right { right: 0; width: 65%; }
.overlay .close {
    position: fixed;
	cursor: pointer;
    z-index: 170;
    display: block;
    padding: 12px 12px 25px 25px;
    right: 0;
    top: 0;
	flex-shrink: 0;
	font-size: 1.75rem;}
#cursor {
    position: fixed;
    display: none; /* Standardmässig komplett weg */
    pointer-events: none !important;
	user-select: none;
    touch-action: none;
    align-items: center;
    transform: translate(-50%, -50%);
    z-index: 200;
    filter: 
        drop-shadow(1px 0 0 white) 
        drop-shadow(-1px 0 0 white) 
        drop-shadow(0 1px 0 white) 
        drop-shadow(0 -1px 0 white)
        drop-shadow(0 2px 4px rgba(0,0,0,0.4));
	will-change: transform; /* flüssigere Bewegung auf Desktop */}
.triangle {
    position: relative;
    width: 24px; 
	height: 12px; 
    pointer-events: none;}
.triangle::before, .triangle::after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    transition: all 0.2s ease;}
.triangle::before {
    height: 3px; 
	width: 14px;
    background-color: #aaa;}
.triangle::after {
    width: 0; 
	height: 0;
    border-style: solid;}
.triangle.left::before { 
	left: 8px;}
.triangle.left::after {
    left: 0;
    border-width: 6px 9px 6px 0;
    border-color: transparent #aaa transparent transparent;}
.triangle.right::before { 
	right: 8px;
	border-right: none;}
.triangle.right::after {
    right: 0;
    border-width: 6px 0 6px 9px;
    border-color: transparent transparent transparent #aaa;}
.active.left .triangle.left::before { background-color: black; }
.active.left .triangle.left::after { border-right-color: black; }
.active.right .triangle.right::before { background-color: black; }
.active.right .triangle.right::after { border-left-color: black; }

#cursor:not(.left) .triangle.left { display: none; }
#cursor:not(.right) .triangle.right { display: none; }

/* iOS Safari & Touch Devices */
@media (hover: none) and (pointer: coarse) {
    #cursor { display: none; }	

/* --- Portrait (Smartphone aufrecht) --- */
@media (max-width: 480px) and (orientation: portrait) {
    .overlay.active {align-items: flex-start; /* Oben ausrichten */}
    .overlay-figure {margin-top: 15dvh; }
    .overlay-img {max-height: 60dvh; /* Genug Platz nach unten */}
}

/* --- Landscape (Smartphone quer) --- */
@media (max-height: 500px) and (orientation: landscape) {
    .overlay.active {
        /* lvh erlaubt das Mitwachsen, wenn die Adressleiste wegrollt */
        height: 100lvh !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        /* Erlaubt das Scrollen zum Wegrollen der Adressleiste */
        overflow-y: auto;}
    .overlay-figure {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin: 0 auto !important;
        min-height: 100.2lvh; /* Ein winziger Überhang ermöglicht das Wegrollen der Browser-Leiste */
        width: fit-content; }
    .overlay-img {
        display: block;
        max-height: 82lvh !important; 
        max-width: 95vw !important;
        width: auto !important;
        height: auto !important;
        object-fit: contain;}
    .overlay-caption {
        position: static !important; 
        transform: none !important;
        width: 100%;
        margin-top: 5px !important; 
        padding: 2px 10px 5px;}
	.overlay .close {right: 30px;}
}