/* OPARI landing — static recreation of www.opari.ch */

@font-face {
  font-family: "Roboto Condensed";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/roboto-condensed-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "opari-icons";
  font-display: block;
  src: url("/assets/fonts/opari-icons.woff") format("woff");
}
@font-face {
  font-family: "awb-icons";
  font-display: block;
  src: url("/assets/fonts/awb-icons.woff") format("woff");
}

:root {
  --c-white: #fff;
  --c-gold: #c3a93c;
  --c-paper: #f4f3f0;
  --c-teal: #223134;
  --c-teal-dark: #192629;
  --c-body: #899294;
  /* The live site declares Roboto Condensed over http:// (blocked as mixed content),
     so most text renders in the browser's default serif and the rest in Arial.
     To use the intended typeface, set --font-serif to "Roboto Condensed", Arial, sans-serif. */
  --font-serif: "Times New Roman", Times, serif;
  --font-sans: Arial, Helvetica, sans-serif;
  --gutter: 30px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--c-body);
  color: var(--c-white);
  font: 300 17px/1.75 var(--font-serif);
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; border: 0; vertical-align: middle; }
a { color: var(--c-gold); text-decoration: none; }
p { margin: 0 0 20px; }

.card-text p, .logo-item p, .logo-item a, .item p, .counter, .footer-mail, .skip-link { font-family: var(--font-sans); }

.sr-only, .skip-link {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.skip-link:focus {
  position: fixed; top: 8px; left: 8px; z-index: 1000;
  width: auto; height: auto; margin: 0; padding: 12px 16px;
  clip: auto; background: var(--c-teal); color: var(--c-gold);
}

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

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: 300;
  line-height: 1.2;
  text-transform: uppercase;
}
/* Fluid heading size: 20.4px at narrow widths, base size from ~1000px up. */
.t60, .t50, .t30 {
  font-size: clamp(20.4px, calc(20.4px + (var(--fs) - 20.4) * (100vw + 280px) / 1280), calc(var(--fs) * 1px));
}
.t60 { --fs: 60; }
.t50 { --fs: 50; }
.t30 { --fs: 30; }
h4 { font-size: 17px; }
@media (min-width: 1001px) { h4 { font-size: 19px; } }
h6 { font-size: 17px; letter-spacing: 0.09em; }
.t-case { text-transform: none; }

.center { text-align: center; }

.eyebrow { margin-bottom: 30px; }
.title { margin-bottom: 25px; }

/* ---------- Header ---------- */

.site-header {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 152;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 40px 6vw;
}
.site-header .logo { display: block; line-height: 0; }
.site-header .logo img { width: 110px; height: auto; }

.main-nav { position: relative; }
.main-nav ul {
  display: flex;
  gap: 40px;
  margin: 0; padding: 0;
  list-style: none;
}
.main-nav a {
  display: flex;
  align-items: center;
  height: 68px;
  color: var(--c-white);
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: color 0.2s;
}
.main-nav a:hover, .main-nav a:focus-visible, .main-nav a[aria-current="page"] { color: var(--c-gold); }

.nav-toggle {
  display: none;
  width: 30px; height: 30px;
  margin: 0; padding: 0;
  border: 0;
  background: none;
  color: var(--c-gold);
  font: 30px/30px "opari-icons";
  cursor: pointer;
}
.nav-toggle::before { content: "\e900"; }
.nav-toggle[aria-expanded="true"]::before { content: "\e901"; }

/* ---------- Layout ---------- */

main { display: block; background: #fff; }

/* Percentage paddings in the original resolve against a container that is 60px
   narrower than the viewport; keep that by padding the wrapper and pulling the
   rows back out. */
.page-in { padding-inline: var(--gutter); }
.row { margin-inline: calc(var(--gutter) * -1); }

.bg-teal { background: var(--c-teal); }
.bg-dark { background: var(--c-teal-dark); }
.bg-paper { background: var(--c-paper); color: var(--c-teal-dark); }

.sep {
  display: block;
  width: 20%;
  height: 0;
  margin: 31px 0 20px;
  border: 0;
  border-top: 1px solid var(--c-gold);
}
.sep.center { margin-inline: auto; }

.btn {
  display: inline-block;
  padding: 13px 29px;
  border: 1px solid var(--c-gold);
  background: transparent;
  color: var(--c-gold);
  font-size: 17px;
  line-height: 1.2;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: background 0.25s, color 0.25s;
}
.btn:hover, .btn:focus-visible { background: var(--c-gold); color: var(--c-teal); }

/* Section intro (eyebrow / title / lead) */
.intro { text-align: center; margin-bottom: 12%; }
.intro .title { margin-bottom: 31px; }
.intro p { margin-bottom: 0; }

/* ---------- Hero ---------- */

.hero {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 10%;
  background: center / cover no-repeat;
  background-image: url("/wp-content/uploads/2022/02/Main_Berge_2560x1440_02.jpg");
}
.hero-col {
  width: 75%;
  margin: 5% 0;
  text-align: center;
}
.hero-col .eyebrow { margin-bottom: 30.6px; }
.hero-col .title { margin-bottom: 25px; }
.hero-col p { margin-bottom: 0; }
.hero-col .btn { display: table; margin: 63.6px auto 0; }
.hero-col h1 { margin-bottom: 25px; }
.hero-col .t-mobile { display: none; }

/* ---------- Brands ---------- */

.brands { padding: 7% 10% 5%; }
.cards {
  display: grid;
  grid-template-columns: 49.04% 50.96%;
  margin-right: -2%;
}
.card { background: var(--c-teal-dark); }
.card-text { padding: 70px 30px 30px 90px; }
.card-text.alt { padding-top: 60px; }
.card-text h3 { margin-bottom: 0; }
.card-text p { margin-bottom: 20px; }
.card-text .sep { margin: 31px 0 20px; }
.card-logos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-content: start;
  padding: 70px 100px 70px 60px;
}
.card-logos.row-1 { padding-bottom: 107px; }
.logo-item { text-align: center; padding-bottom: 15px; }
.logo-item:nth-last-child(-n+2) { padding-bottom: 0; }
.logo-item img { width: 198px; margin-bottom: 11px; }
.logo-item p { margin: 0 0 20px; }
.logo-item a { color: var(--c-white); text-decoration: underline; }
.logo-item a:hover { color: var(--c-gold); }
.logo-item img { display: block; margin-inline: auto; }

/* ---------- Strengths ---------- */

.strengths { padding: 7% 10% 5%; }
.items {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 4%;
}
.item {
  flex: 0 0 calc((100% - 8%) / 3);
  margin-bottom: 2.4%;
  text-align: center;
}
.item img { width: 60px; height: 60px; margin-bottom: 20px; }
.item .sep { width: 20%; margin: 31px auto 20px; }

/* ---------- Accordion (details/summary) ---------- */

.accordion { margin-inline: -6.5px; }
.accordion details { margin: 0 0 10.5px; border: 1px solid transparent; }
.accordion summary {
  display: flex;
  align-items: center;
  padding: 15px 25px;
  color: var(--c-white);
  font-size: 20px;
  line-height: 1.38;
  list-style: none;
  cursor: pointer;
  transition: color 0.2s;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::before {
  content: "\e61d";
  flex: none;
  width: 30px; height: 30px;
  margin-right: 18px;
  border: 1px solid rgba(195, 169, 60, 0.55);
  border-radius: 50%;
  color: var(--c-gold);
  font: 14px/28px "awb-icons";
  text-align: center;
}
.accordion details[open] summary::before { content: "\e61c"; }
.accordion summary:hover, .accordion details[open] summary { color: var(--c-gold); }
.accordion .body { padding: 10px 25px 15px; font-size: 17px; }
.accordion .body p { font-size: 17px; }
.accordion .body > :last-child { margin-bottom: 0; }

.long { padding: 100px 25%; }
.long .col { margin-inline: -1%; padding-top: 5%; }
.long.tail { padding-bottom: 114px; }
.long .lead { margin-bottom: 20px; }
.long .lead + .accordion { margin-top: 38.25px; }
.long .tech { display: block; width: 700px; margin: 38.25px auto 61px; }

/* ---------- Counters ---------- */

.counters { padding: 7% 10% 8%; }
.counter-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-inline: -7px;
}
.counter {
  width: 33.33%;
  margin-bottom: 14px;
  padding: 20px 7px;
  text-align: center;
}
.counter .num {
  display: block;
  color: var(--c-gold);
  font-size: 50px;
  line-height: 1.2;
}
.counter .label { display: block; text-transform: uppercase; }

/* ---------- Page title bar & content pages ---------- */

.title-bar {
  padding: 7% 10%;
  background: var(--c-teal-dark) center / cover no-repeat;
}
.title-bar.bar-team { background-image: url("/wp-content/uploads/2022/02/PageTitel_Geschaeftsfuehrung.jpg"); }
.title-bar.bar-partner { background-image: url("/wp-content/uploads/2022/02/PageTitel_Partner.jpg"); }
.title-bar h1 { margin: 0; }
.title-bar .spacer { height: 0; margin-bottom: 9%; }
.title-bar h6 { margin-bottom: 0; }
.title-bar h2 { margin-bottom: 0; }

.intro-text { padding: 7% 10% 3%; }
.intro-text p { margin: 0; }

.people { padding: 100px 10%; }
.person {
  display: grid;
  grid-template-columns: repeat(2, 45.53%);
  justify-content: space-between;
  margin-bottom: 100px;
}
.person .photo img { display: block; width: 100%; aspect-ratio: 1070 / 1400; object-fit: cover; }
.person .copy { padding: 48.4px 48.4px 48.4px 0; }
.person .copy .sep { width: 70px; margin: 38.5px 0 38.5px; }
.person h6, .person h2 { margin: 0; }
.person .copy p { margin-bottom: 20px; }

.feature { padding: 4% 10% 0; }
.feature .person { margin-bottom: 0; }
.feature .copy p:last-child { margin-bottom: 0; }

.more-title { padding: 6% 10% 127px; }
.more-title h2 { color: var(--c-teal-dark); }
.logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0 10% 7%;
}
.logos a { display: block; width: 22%; padding: 0 28px; text-align: center; line-height: 0; }
.logos img { width: 200px; max-width: 100%; }

.legal { color: var(--c-teal-dark); padding: 0 10% 7%; }
.legal h2, .legal h3 { color: var(--c-teal-dark); margin-bottom: 20px; }
.legal h3 { margin-bottom: 31px; }
.legal h2 { margin-top: 59px; }
.legal h2:first-child { margin-top: 0; }
.legal p { margin: 0 0 20px; }
.legal.after-bar { padding-top: 37px; }
.legal.after-bar.roomy { padding-top: 58px; }
.intro-text.tall { padding-bottom: 7%; }
.person .photo img.landscape { aspect-ratio: 1400 / 1070; }
.legal-block { padding: 7% 10%; background: var(--c-paper); color: var(--c-teal-dark); }
.legal-block h3 { margin-bottom: 31px; }
.legal-block p { margin: 0 0 20px; }
.legal-block section + section { margin-top: 49px; }

.blank-main { padding: 55px 10% 0; background: #fff; color: var(--c-teal-dark); }
body.blank { background: #fff; }
.blank-main h3 { color: var(--c-teal-dark); }

/* ---------- Footer ---------- */

.site-footer {
  padding: 5% 10% 2%;
  background: var(--c-teal);
  text-align: center;
}
.site-footer .footer-logo { display: block; margin: 0 auto 17px; line-height: 0; }
.site-footer .footer-logo img { width: 160px; height: auto; }
.footer-mail { margin-bottom: 17px; }
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 102px;
}
.footer-nav ul { display: flex; gap: 25px; margin: 0; padding: 0; list-style: none; }
.footer-nav a {
  color: var(--c-white);
  font-size: 14px;
  letter-spacing: 0.255px;
  text-transform: uppercase;
  line-height: 1.72;
  padding-bottom: 2px;
}
.footer-nav a:hover { color: var(--c-gold); }
.copyright { margin: 0; font-size: 14px; letter-spacing: 0.015em; line-height: 1.72; text-align: right; }

.to-top {
  position: fixed;
  right: 75px; bottom: 0;
  z-index: 1000;
  width: 48px; height: 35px;
  background: #333;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}
.to-top.show { opacity: 0.9; visibility: visible; }
.to-top::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 9px; height: 9px;
  margin: -2px 0 0 -5px;
  border: solid #fff;
  border-width: 2px 0 0 2px;
  transform: rotate(45deg);
}

/* ---------- Motion ---------- */

.js .fx { opacity: 0; transition: opacity 1s ease, transform 1s ease; }
.js .fx-up { transform: translateY(100px); }
.js .fx.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .fx { opacity: 1; transform: none; transition: none; }
}

/* ---------- Tablet ---------- */

@media (max-width: 1024px) {
  .site-header {
    position: relative;
    padding: 15px 30px;
    background: var(--c-teal);
  }
  .site-header .logo img { width: 85px; }
  .nav-toggle { display: block; }
  .main-nav ul {
    display: none;
    position: absolute;
    top: calc(100% + 15px);
    right: -30px;
    width: 100vw;
    flex-direction: column;
    gap: 0;
    padding-bottom: 20px;
    background: var(--c-teal);
  }
  .main-nav.open ul { display: flex; }
  .main-nav a { height: 70px; justify-content: center; padding: 0 25.5px; }

  .hero-col { width: 100%; }
  .hero-col .t-desktop { display: none; }
  .hero-col .t-mobile { display: block; }

  .cards { grid-template-columns: 1fr; }
  .card, .intro, .item { margin-inline: 1.92%; }
  .items .item { width: 100%; margin-inline: 1.92%; }
  .items { column-gap: 0; }
  .card-logos { grid-template-columns: repeat(2, 1fr); }
  .card-logos.row-1 { padding-bottom: 70px; }

  .long { padding-block: 75px; }
  .long.tail { padding-bottom: 89px; }
  .title-bar .spacer { display: none; }
  .person { grid-template-columns: 1fr; row-gap: 0; }
  .person .copy { padding: 30px 0 0; }
  .logos a { width: 50%; margin-bottom: 20px; }
  .footer-bottom { align-items: flex-start; }
  .to-top { display: none; }
}

/* ---------- Phone ---------- */

@media (max-width: 640px) {
  .site-header .logo { margin-left: -7px; }
  .eyebrow, .hero-col .eyebrow { margin-bottom: 20px; }
  .hero-col { margin: 17% 0 25%; }
  .brands { padding: 0 5% 20%; }
  .strengths { padding: 20% 10%; }
  .intro { margin-inline: 0; padding-top: 15%; }
  .card { margin-inline: 0; }
  .card-text { padding-left: 30px; }
  .card-logos { padding: 0 30px; }
  .items { column-gap: 14px; }
  .items .item { flex: 0 0 calc(50% - 7px); width: auto; min-width: 0; margin-inline: 0; }
  .counters { padding: 20% 10%; }
  .counter { width: 100%; padding-block: 23px; }
  .long { padding: 50px 31.8px; }
  .long.tail { padding-bottom: 64px; }
  .site-footer { padding-inline: 30px; }
  .site-footer .footer-logo { margin-block: 10% ; }
  .footer-bottom { flex-direction: column; align-items: center; gap: 10px; margin-top: 40px; }
}