@charset "UTF-8";

/*
 * Legal Disclaimer for Web licence
 *
 * Licence to use self-hosted webfonts for displaying dynamic text on specified website domains. Our package includes WOFF and WOFF2 font formats.
 *
 * Should the license page views limit be exceeded the license holder will be required to contact Lineto.com for an upgrade.
 * 
 * It is strictly prohibited to rename the font and to download or use these fonts in any other media. 
 * 
 * These Web fonts are licensed exclusively for the use on the following domain(s) and their subdomains:
 *
 * csa-architects.swiss (monthly pageviews: <50K)
 *
 */
@font-face {
  font-family: "AkkuratLLWeb-Regular";
  src: url("/site/templates/fonts/AkkuratLLWeb-Regular.woff") format("woff");
}

@font-face {
  font-family: "AkkuratLLWeb-Regular";
  src: url("/site/templates/fonts/AkkuratLLWeb-Regular.woff2") format("woff2");
}

@font-face {
  font-family: "AkkuratLLWeb-Bold";
  src: url("/site/templates/fonts/AkkuratLLWeb-Bold.woff") format("woff");
}

@font-face {
  font-family: "AkkuratLLWeb-Bold";
  src: url("/site/templates/fonts/AkkuratLLWeb-Bold.woff2") format("woff2");
}

* { box-sizing: border-box; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-touch-callout: none; }

body, html { margin: 0; }
body { font: 15px/24px "AkkuratLLWeb-Regular",Arial,sans-serif; }
ul { margin: 0; padding: 0; }
h1 { font: 26px/32px "AkkuratLLWeb-Bold",Arial,sans-serif; margin:0 0 26px; padding-top:11px; }
h1.acc { margin-bottom:11px; }
h2 { font: 27px/32px "AkkuratLLWeb-Regular",Arial,sans-serif; }
a { color: #005d92; text-decoration: none; border-bottom: 2px solid #fff; }
a:hover { border-bottom: 2px solid #d6d2d2; }

/*
Titel: Akkurat Bold 27pt/32pt
Lead: Akkurat Regular 27pt/32pt Fliesstext: Akkurat Regular 15pt/24pt
Menu: Akkurat Bold rechtsbündig 15pt 24pt Kopf/Fuss: Akkurat Bold 15pt 24pt
Fuss: Akkurat Regular 15pt 24pt */
/* 
Farbe  schwarz blau kleine Flächen R=0 G=93 B=146  blau grössere Flächen R=0 G=100 B=163  grau R=214 G=210 B=210 */
header, footer { position: fixed; height: 120px; width: 100%; background: #fff; z-index: 1; }

header { top: 0; display: flex; align-items: center; justify-content: center; }
footer { bottom: 0; }
footer p { max-width: 512px; margin: 0 auto 20px; color: #005d92; }
footer p.footertitel { font-family: "AkkuratLLWeb-Bold",Arial,sans-serif; margin: 20px auto 0; }
footer a { font-family: "AkkuratLLWeb-Bold",Arial,sans-serif; text-decoration: none; border-bottom: 2px solid #fff; }
footer a:hover { border-bottom: 2px solid #d6d2d2; }

a.logo { width: 100%; max-width: 512px; border-bottom:0; line-height:.7; margin-top:2px; }
a.logo:hover { border-bottom:0;  }
.logo img { width: 100%; max-width: 460px; }

a.externallink, a.pfeil { white-space: nowrap; }
a.externallink:before, a.pfeil:before {
  font-family:"AkkuratLLWeb-Regular",Arial,sans-serif;
  content: "\2197";
  display: inline-block;
  padding-right: 3px;
  vertical-align: middle;
  font-size:106.667%;
}
footer a.pfeil:before {
  padding-right: 2px;
}

main { margin-bottom:180px; }
.content { max-width: 512px; margin: 120px auto 0; }

p.mb0 { margin-bottom: 0 !important; }
p.zwischentitel { font-family:"AkkuratLLWeb-Bold",Arial,sans-serif; margin-bottom: 0 !important; padding-top:10px; }
.accordion div.acc_content + p.zwischentitel, .content + p.zwischentitel, h1 + p.zwischentitel { padding-top:0; }
p.hl { text-align:center; padding:9px 24px 9px 0; }
strong { font-family:"AkkuratLLWeb-Bold",Arial,sans-serif; }

.accordion { list-style-type: none; padding: 0; }
.accordion li { border: 3px solid #d6d2d2; border-width: 0 0 3px 0; position: relative; margin: 0; padding: 16px 0 4px; }
.accordion li::before { content: url(/site/templates/img/pfeil.svg); display: block; position: absolute; 
                        width: 13px; height: 19px; left: -24px; top: 15px; transform: rotate(0deg); 
                        transition: transform 0.3s ease-in-out; cursor:pointer; }
.accordion h2 { font: 22px/16px "AkkuratLLWeb-Bold",Arial,sans-serif; margin: 0; text-align: left; cursor:pointer; }
.accordion h2.mb { margin-bottom:10px; }
.accordion h3 { font: 22px/1.25 "AkkuratLLWeb-Regular",Arial,sans-serif; margin: 10px 0 6px; }
.accordion div.acc_content { margin:0; opacity: 0; height: 0; transition: opacity 0.15s ease-in-out 0s; }
.accordion div.acc_content p { margin:0 0 12px; display:none; }
.accordion div.acc_content p:last-of-type { margin:0 0 16px;}
.accordion .open::before { transform: rotate(-180deg) !important; }
.accordion .open div.acc_content { opacity: 1; transition: opacity 0.3s ease-in-out 0.3s; padding-bottom:0; padding-top:6px; }
.accordion .open div.acc_content p { display:block; }

/* .accordion li::after { content: ''; display: block; position: absolute; width: 570px; height: 16px; right: 0; top: 0; left: auto; background-color: pink; opacity: .3; } */
.navbar { position: fixed; top: 84px; left: 16px; right: 16px; max-width: 512px; margin: 0 auto; 
          z-index: 1; }

.navi { position: relative; }
.navi li { display: block !important; }
.navi li a, .langs a { font: 15px/24px "AkkuratLLWeb-Bold",Arial,sans-serifs; color: #005d92; text-decoration: none; border-bottom: 2px solid transparent; }
.navi li a:hover, .navi li.current a, .langs a:hover, .langs li.active a { border-bottom: 2px solid #d6d2d2; }
.langs { text-align: right; }
.langs li { margin-left: 10px; display: inline; }
#linkedin { width:16px;float:right;margin-top:9px;position:relative; }

@media only screen and (max-width: 767px) { /* mobile ? */
  a.logo { margin-top: -34px; }
  .logo img { max-width: 374px; }
  /* .navbar { margin-left: 16px; margin-right: 16px; } */
  .langs { position: absolute; right: 33px; right: 36px; top: 0; }
  .navi { height: 0; width: 0; padding: 0; opacity: 0; margin-top: -60px; margin-left: -31px; transition: height 0.3s ease-in-out, width 0.3s ease-in-out,  
    padding 0.3s ease-in-out, opacity 0.3s ease-in-out; }
  .navi li { opacity: 0; transition: opacity 0s ease-in-out 0s; }
  .navbar.open .navi { background-color: #ECECEC; width: 160px; height: auto; padding: 40px 33px 18px; opacity: 1; z-index: 1;margin-top:-30px; }
  .navbar.open .navi li { opacity: 1; transition: opacity 0.1s ease-in-out 0.3s; }
  .hamburger { position: relative; left: 2px; height: 14px; width: 24px; z-index: 2; border:2px solid #005d92; border-width: 2px 0; 
    transition: border-width .2s; cursor:pointer; margin-top:4px;}
  .hamburger::before, .hamburger::after { content: ""; position: absolute; width: 24px; height: 2px; left: 0; bottom: 4px; background: #005d92; border-radius: 3px; transition: all .3s ease; }
  .navbar.open .hamburger { border: 0; }
  .navbar.open .hamburger::before, .navbar.open .hamburger::after { width: 27px; left: -3px; bottom: 6px; }
  .navbar.open .hamburger::before { transform: rotate(45deg); }
  .navbar.open .hamburger::after { transform: rotate(-45deg); }
  .navbar .navi li a { display:none; }
  .navbar.open .navi li a { display:inline; }
  #linkedin { float:none; position:absolute; right:0; margin-top:46px; }
}

@media (max-width: 540px) { 
  .content { margin: 120px 16px 0; }
  .logo, footer p, footer p.footertitel { margin-left: 16px; margin-right: 16px; } 
  body { font-size: 14px; line-height: 21px; }
  .accordion h2 { font: 18px/1.5 "AkkuratLLWeb-Bold",Arial,sans-serif; }
  .accordion h3 { font: 18px/1.5 "AkkuratLLWeb-Regular",Arial,sans-serif; }
  .accordion li { padding-top: 10px; }
  .accordion li::before { width: 12.48px; height:18px; }
  .accordion p {  hyphens:auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto; }
  p.hl { padding:6px 12px 6px 0; }
}

@media (max-width: 420px) { 
  body { font-size: 13px; line-height: 21px; }
  footer { font-size:12px; line-height:19px; }
  .content h1 { font-size:18px; line-height:13px; margin-top:16px; }
  .accordion h2 { font-size:16px; line-height:1.5; }
  .accordion li { padding-top: 10px; }
  .accordion h3 { font-size:16px; line-height:1.5; }
  .accordion li::before { width: 12px; height:16px; top:14px; left:-23px; }
}
@media (max-width: 350px) {
  .accordion li::before { top:14px; left:-21px; }
}

@media (max-width: 593px) { 
  .logo, footer p, footer p.footertitel, .content { margin-left: 49px; margin-right: 16px; }
  .navbar { left: 0; right: 0; margin-left: 49px; margin-right: 16px; } 
}
@media only screen and (max-width: 319px) {
  footer { position:relative; bottom:auto; margin-top:36px; }
  .logo, footer p, footer p.footertitel, .navbar, .content { margin-left: 9px; margin-right: 9px; } 
  .home .content { margin-left:30px; }
  footer p { margin-bottom:0;  }
  main { margin-bottom: 80px; }
}
@media only screen and (min-width: 594px) { 
  header { justify-content: center; }
}

@media only screen and (min-width: 768px) { 
  header { justify-content: center; }
  .navbar { position: fixed; top: 120px; right: calc(50% + 256px + 49px); }
  .navi { text-align: right; margin-top: 69px; }
  .langs { margin-top: 69px; }
  .hamburger { display: none; }
}

@media (min-width: 768px) and (max-width: 816px) {
  .navbar { right: calc(50% + 256px + 19px); }
  .content, .logo, footer p { padding-left: 30px; }
}

/*body:not(.home) .content { overflow: hidden; }*/