@charset "UTF-8";
nav .wrapper, nav menu, .footer .wrapper, .footer .links {
  display: flex;
  flex-direction: row;
}

.header .wrapper, .header .lead, .footer .license, .item .descr {
  display: flex;
  flex-direction: column;
}

.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.item {
  position: relative;
  background-color: var(--bg-level-1);
  color: var(--text-primary);
  transition: var(--trend-transition);
}
.item .descr {
  gap: 1rem;
}
.item:hover {
  transition: var(--trend-transition);
}

.item.half {
  border-right: var(--border-base) var(--border-default);
  border-bottom: var(--border-base) var(--border-default);
  grid-column: span 6;
}
.item.half .dot {
  display: none;
}
.item.half .dot.top.right {
  display: block;
}
.item.half:nth-of-type(2n + 1) .dot.bottom.left {
  display: block;
}
.item.half:nth-of-type(2n) {
  border-right: none;
}
.item.half:nth-last-of-type(-n + 2) {
  border-bottom: none;
}
.item.half:nth-last-of-type(-n + 2) .dot.bottom.right {
  display: block;
}
.item.large {
  border-right: var(--border-base) var(--border-default);
  border-bottom: var(--border-base) var(--border-default);
  grid-column: span 4;
}
.item.large .dot {
  display: none;
}
.item.large .dot.top.right {
  display: block;
}
.item.large:nth-of-type(3n + 1) .dot.bottom.left {
  display: block;
}
.item.large:nth-of-type(3n) {
  border-right: none;
}
.item.large:nth-last-of-type(-n + 3) {
  border-bottom: none;
}
.item.large:nth-last-of-type(-n + 3) .dot.bottom.right {
  display: block;
}
.item.large:nth-last-of-type(1):nth-of-type(-n + 2) {
  border-right: none;
}
.item.small {
  border-right: var(--border-base) var(--border-default);
  border-bottom: var(--border-base) var(--border-default);
  grid-column: span 3;
}
.item.small .dot {
  display: none;
}
.item.small .dot.top.right {
  display: block;
}
.item.small:nth-of-type(4n + 1) .dot.bottom.left {
  display: block;
}
.item.small:nth-of-type(4n) {
  border-right: none;
}
.item.small:nth-last-of-type(-n + 4) {
  border-bottom: none;
}
.item.small:nth-last-of-type(-n + 4) .dot.bottom.right {
  display: block;
}
.item.trend {
  border-right: var(--border-base) var(--border-default);
  border-bottom: var(--border-base) var(--border-default);
  grid-column: span 3;
}
.item.trend .dot {
  display: none;
}
.item.trend .dot.top.right {
  display: block;
}
.item.trend:nth-of-type(4n + 1) .dot.bottom.left {
  display: block;
}
.item.trend:nth-of-type(4n) {
  border-right: none;
}
.item.trend:nth-last-of-type(-n + 2) {
  border-bottom: none;
}
.item.trend:nth-last-of-type(-n + 4) .dot.bottom.right {
  display: block;
}
.item.trend:nth-last-of-type(3) {
  border-bottom: var(--border-base) var(--border-default);
}
.item.focus {
  border-right: var(--border-base) var(--border-default);
  border-bottom: var(--border-base) var(--border-default);
  grid-column: span 4;
}
.item.focus .dot {
  display: none;
}
.item.focus .dot.top.right {
  display: block;
}
.item.focus:nth-of-type(3n + 1) .dot.bottom.left {
  display: block;
}
.item.focus:nth-of-type(3n) {
  border-right: none;
}
.item.focus:nth-last-of-type(-n + 1) {
  border-bottom: none;
}
.item.focus:nth-last-of-type(-n + 3) .dot.bottom.right {
  display: block;
}
.item.focus:nth-last-of-type(2) {
  border-bottom: var(--border-base) var(--border-default);
}
.item.team {
  border-right: var(--border-base) var(--border-default);
  border-bottom: var(--border-base) var(--border-default);
  grid-column: span 2;
}
.item.team .dot {
  display: none;
}
.item.team .dot.top.right {
  display: block;
}
.item.team:nth-of-type(6n + 1) .dot.bottom.left {
  display: block;
}
.item.team:nth-of-type(6n) {
  border-right: none;
}
.item.team:nth-last-of-type(-n + 2) {
  border-bottom: none;
}
.item.team:nth-last-of-type(-n + 6) .dot.bottom.right {
  display: block;
}
.item.team:nth-last-of-type(3) {
  border-bottom: var(--border-base) var(--border-default);
}

.pattern {
  background-repeat: repeat;
  height: 35rem;
  display: block;
}

.cta {
  padding: 1.5rem 2.5rem;
  font-size: 2rem;
  border: var(--border-base) var(--border-default);
  border-color: var(--cta);
  border-radius: 999rem;
  width: fit-content;
  transition: var(--trend-transition);
  line-height: 1;
}

.footer .links a {
  border-bottom-width: 1px;
  border-bottom-style: solid;
  width: fit-content;
  transition: var(--trend-transition);
  color: var(--text-primary);
}
.footer .links a:hover {
  opacity: 0.6;
  transition: var(--trend-transition);
}

@media (max-width: 770px) {
  .grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .grid .item {
    grid-column: span 12 !important;
    border-right: none !important;
    border-bottom: var(--border-base) var(--border-default) !important;
  }
  .grid .item .dot.top.right,
  .grid .item .dot.top.left {
    display: none !important;
  }
  .grid .item .dot.bottom.right,
  .grid .item .dot.bottom.left {
    display: block !important;
  }
  .grid .item:first-of-type .dot.top.right {
    display: block !important;
  }
  .grid .item:last-of-type {
    border-bottom: none !important;
  }
}
:root {
  --accent-coral: #FD4F5C;
  --accent-ocean: #32F1F1;
  --core-0: #FFFFFF;
  --core-10: #EFF0F1;
  --core-30: #BFC7D3;
  --core-50: #7F8EA7;
  --core-70: #40567C;
  --core-90: #001E50;
  --core-100: #001639;
  color-scheme: light dark;
  --border-base: 1px solid;
  --bg-level-1: light-dark(var(--core-0), var(--core-90));
  --bg-level-2: light-dark(var(--core-10), var(--core-100));
  --bg-level-3: light-dark(var(--core-90), var(--core-0));
  --button-default: light-dark(var(--core-90), var(--accent-ocean));
  --button-hover: var(--accent-coral);
  --button-disabled: var(--core-50);
  --border-default: light-dark(var(--core-90), var(--core-0));
  --border-invert: light-dark(var(--core-0), var(--core-90));
  --border-dimmed: var(--core-30);
  --border-highlight: light-dark(var(--accent-coral), var(--accent-ocean));
  --cta: light-dark(var(--core-90), var(--accent-ocean));
  --accent: light-dark(var(--accent-coral), var(--accent-ocean));
  --text-primary: light-dark(var(--core-90), var(--core-0));
  --text-primary-invert: light-dark(var(--core-0), var(--core-90));
  --text-secondary: light-dark(var(--core-70), var(--core-30));
  --text-secondary-invert: light-dark(var(--core-30), var(--core-50));
  --text-highlight: light-dark(var(--accent-coral), var(--accent-ocean));
  --width: 100svw;
  --ard-sans: TheSans, Inter, -apple-system, BlinkMacSystemFont, "avenir next", avenir, helvetica, "helvetica neue", ubuntu, roboto, noto, "segoe ui", arial, sans-serif;
  --base: 8px;
  --margin-xs: 2rem;
  --margin-s: 3rem;
  --margin-m: 4rem;
  --margin-l: 5rem;
  --spacer-s: 5rem;
  --spacer-m: 8rem;
  --spacer-l: 10rem;
  --spacer-xl: 15rem;
  --trend-transition: all .1s linear, filter .1s linear;
  font-size: var(--base);
}

#dark {
  color-scheme: only dark;
}

#accent {
  color-scheme: only light;
  --bg-level-2:var(--accent-ocean);
  border-top: var(--border-base) var(--border-default);
  border-bottom: var(--border-base) var(--border-default);
}

/* Core */
html, body {
  height: auto;
  font-family: var(--ard-sans), sans-serif;
  font-weight: 400;
}

html {
  overflow-x: hidden;
  scroll-behavior: smooth;
  text-rendering: optimizeLegibility;
}

body {
  width: 100svw;
  font-size: 2rem;
  line-height: 140%;
  background-color: var(--bg-level-2);
  overflow-x: hidden;
  color: var(--text-primary);
}

picture {
  line-height: 0;
  width: 100%;
}
picture > img {
  width: 100%;
  height: inherit;
  object-fit: cover;
  object-position: center center;
}
picture > source {
  display: none;
}

/* SECTIONS STYLES */
section {
  max-width: 100svw;
  background-color: var(--bg-level-2);
  padding-top: 12rem;
  padding-bottom: 12rem;
}
section#light + section#light {
  padding-top: 6rem;
}

.wrapper {
  width: calc(100svw - 2 * var(--spacer-s));
  max-width: 170rem;
  margin: 0 auto;
  color: var(--text-primary);
  box-sizing: border-box;
  position: relative;
}

.grid {
  border: var(--border-base) var(--border-default);
  position: relative;
}

.pattern.coral {
  background-image: url("./../img/dot-koralle.png");
}
.pattern.ocean {
  background-image: url("./../img/dot-ozean.png");
}
.pattern.dark {
  background-image: url("./../img/dot-blau.png");
}

/* TEXT STYLES */
h3, h1,
h2 {
  font-style: normal;
  font-weight: 900;
  line-height: 100%;
  text-transform: uppercase;
}

h1,
h2 {
  font-size: 8rem;
}
h1 .slim,
h2 .slim {
  font-weight: 400;
}

h3 {
  font-size: 3rem;
}

p {
  font-size: 2rem;
  line-height: 140%;
  margin-bottom: 1rem;
}

/* CTA */
.cta {
  transition: var(--trend-transition);
}
.cta.filled {
  background-color: var(--cta);
  color: var(--text-primary-invert);
}
.cta.filled:hover {
  transition: var(--trend-transition);
  color: var(--text-primary);
  background-color: var(--bg-level-1);
}
.cta.outline {
  background-color: transparent;
  border-color: var(--cta);
  color: var(--cta);
}
.cta.outline:hover {
  transition: var(--trend-transition);
  color: var(--text-primary-invert);
  background-color: var(--cta);
}
.cta:active {
  transition: var(--trend-transition);
}

/* DOTS */
.dot {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background-color: var(--border-default);
  position: absolute;
  z-index: 50;
}

.top {
  top: -0.55rem;
}

.left {
  left: -0.55rem;
}

.right {
  right: -0.55rem;
}

.bottom {
  bottom: -0.55rem;
}

/* NAVIGATION STYLES */
nav {
  background-color: var(--bg-level-1);
  margin-bottom: var(--margin-l);
  border-bottom: var(--border-base) var(--border-default);
}
nav .wrapper {
  justify-content: space-between;
  align-items: center;
  padding: 0;
  height: 9rem;
}
nav .logo {
  padding-right: var(--margin-l);
  height: 100%;
  display: flex;
  align-items: center;
  border-right: var(--border-base) var(--border-default);
}
nav .logo svg path {
  fill: var(--text-primary);
}
nav menu {
  justify-content: flex-end;
  align-items: center;
  gap: 3rem;
  font-size: 2rem;
  text-transform: uppercase;
  font-weight: 700;
}
nav menu a {
  color: var(--text-primary);
}
nav menu a.active {
  opacity: 0.5;
}
nav menu a:hover {
  color: var(--accent-coral);
  opacity: 1;
  border-bottom: transparent;
}
nav menu a.cta:hover {
  opacity: 1;
  border: var(--border-base) var(--border-default);
}

/* CONTENT HEADER */
.header {
  padding-bottom: 0;
  padding-top: 0;
}
.header .wrapper {
  border: var(--border-base) var(--border-default);
  position: relative;
  background-color: var(--bg-level-1);
  padding: var(--margin-l);
}
.header .lead {
  gap: var(--margin-xs);
}
.header .lead p {
  font-size: 3rem;
  width: 50%;
}

.footer {
  transform: none;
  position: relative;
  padding-top: 0;
  background-color: var(--bg-level-1);
}
.footer .pattern {
  margin-bottom: 12rem;
}
.footer .wrapper {
  gap: 3rem;
  align-items: start;
  position: relative;
}
.footer .links {
  font-weight: 700;
  gap: 3rem;
  align-items: baseline;
  min-width: 50%;
  height: 100%;
  flex-grow: 1;
  flex-shrink: 0;
  text-transform: uppercase;
}
.footer .links a {
  border-bottom-color: transparent;
}
.footer .links a:hover {
  border-bottom-color: var(--border-default);
}
.footer .links a.cta {
  border-bottom-color: var(--cta);
  color: var(--cta);
}
.footer .links a.cta:hover {
  border-bottom-color: inherit;
  color: var(--text-primary-invert);
  opacity: 1;
}
.footer .license {
  padding-top: 2rem;
  gap: 3rem;
}
.footer .license span::after {
  content: " ・ ";
}
.footer .license span:last-of-type::after {
  content: "";
}

.do {
  display: block;
}

.mo {
  display: none;
}

@media (max-width: 1200px) {
  .header .lead p {
    width: 100%;
  }
}
@media (max-width: 770px) {
  :root {
    --margin-l: 2rem;
    --margin-s: 2rem;
    --spacer-s: 2rem;
  }
  .do {
    display: none;
  }
  .mo {
    display: block;
  }
  h1 {
    font-size: 5rem;
  }
  h2 {
    font-size: 4rem;
  }
  p {
    font-size: 2rem;
    line-height: 140%;
    margin-bottom: 1rem;
  }
  section {
    padding-top: 10rem;
    padding-bottom: 10rem;
  }
  .meta {
    width: 100%;
  }
  .logo-container {
    margin-bottom: 0;
    border-bottom: none;
  }
  nav {
    border-top: var(--border-base) var(--border-default);
  }
  nav .wrapper {
    flex-direction: column;
    height: auto;
    gap: var(--spacer-s);
  }
  nav .wrapper .logo {
    padding: var(--margin-l);
    border-right: none;
    width: 100%;
    height: auto;
  }
  nav .wrapper .logo svg {
    width: inherit;
    height: inherit;
  }
  nav .wrapper menu {
    gap: 3rem;
    padding: var(--margin-l) 0;
    width: 100%;
    justify-content: space-evenly;
  }
  nav .wrapper menu a {
    text-align: right;
  }
  nav .wrapper menu a.cta {
    display: block;
  }
  .header .wrapper {
    padding: 3rem 2rem;
    border-bottom: var(--border-base) var(--border-default);
  }
  .header .lead p {
    font-size: 2.5rem;
    width: 100%;
  }
  .footer .pattern {
    margin-bottom: 6rem;
    height: 20rem;
  }
  .footer .wrapper {
    flex-direction: column;
    gap: var(--spacer-m);
  }
  .footer .wrapper .links {
    order: 1;
    flex-direction: column;
    width: 100%;
    gap: 2rem;
  }
  .footer .wrapper .license {
    order: 2;
    gap: 2rem;
    padding-top: 0;
  }
}

/*# sourceMappingURL=style.css.map */