@charset "UTF-8";
/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
/* Reset */
/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
html {
  box-sizing: border-box;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-tap-highlight-color: transparent;
}

*, *::before, *::after {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-tap-highlight-color: transparent;
  box-sizing: inherit;
  margin: 0;
  padding: 0;
  user-select: none;
}

button, textarea, input, select, a {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-tap-highlight-color: transparent;
  -webkit-tap-highlight-color: transparent;
}

i {
  font-style: unset;
}

b {
  font-weight: unset;
}

a {
  text-decoration: none;
}

/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
/* Roots */
/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
:root {
  --UniversalScheer: "UniversalScheer", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --vh: 1vh;
  --vhd: calc((var(--vh) * 100) - (var(--vhr) * 100));
  --vhs: 0.2s;
  --vht: ease-in-out;
  --grau: hsla(42, 8%, 76%, 1.00);
  --hellgrau: hsla(45, 8%, 81%, 1.00);
  --blau: hsla(185, 12%, 59%, 1.00);
  --grun: hsla(92, 23%, 68%, 1.00);
  --rosa: hsla(355, 52%, 73%, 1.00);
  --braun: hsla(13, 52%, 45%, 1.00);
  --orange: hsla(23, 100%, 70%, 1.00);
  --schwarz: hsla(0, 0%, 0%, 1.00);
  --weiss: hsla(0, 0%, 100%, 1.00);
  --blu: 17px;
  --margin: calc(var(--blu) * 1);
  --n-fs: calc(var(--blu) * 0.7);
  --n-lh: calc(var(--n-fs) * 1.15);
  --p-fs: var(--blu);
  --p-lh: var(--p-fs) * 1.15;
  --h1-fs: calc(var(--blu) * 1.4);
  --h1-lh: calc(var(--h1-fs) * 1.2);
  --m-fs: calc(var(--blu) * 2.1);
  --m-lh: calc(var(--m-fs) * 1);
  --m-tt: uppercase;
}

/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
/* Global */
/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
body {
  background: var(--grau);
}

.grau {
  background: var(--grau);
}

.hellgrau {
  background: var(--hellgrau);
}

.blau {
  background: var(--blau);
}

.grun {
  background: var(--grun);
}

.rosa {
  background: var(--rosa);
}

.braun {
  background: var(--braun);
}

.orange {
  background: var(--orange);
}

.schwarz {
  background: var(--schwarz);
}

.weiss {
  background: var(--weiss);
}

/* Navigation */
/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
#nav-btn {
  --side: calc(var(--h1-fs) * 0.71);
  position: fixed;
  display: block;
  width: calc(var(--side) * 1.252);
  height: var(--side);
  top: calc(var(--margin) * 1);
  right: calc(var(--margin) * 1);
  z-index: 900;
  cursor: pointer;
}
#nav-btn div {
  display: block;
  position: absolute;
  background: var(--schwarz);
}
#nav-btn div.bar-01 {
  width: 100%;
  height: 13.9333%;
  top: 0;
  left: 0;
}
#nav-btn div.bar-02 {
  width: 90.4686%;
  height: 13.2%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#nav-btn div.bar-03 {
  width: 100%;
  height: 13.9333%;
  bottom: 0;
  left: 0;
}
#nav-btn div.stem {
  width: 12.6731%;
  height: 0;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition-property: height;
  transition-timing-function: ease-in-out;
  transition-duration: 0.1s;
}

#nav-container {
  position: fixed;
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  z-index: 800;
  background: var(--grau);
  transform: translateX(100%);
  transition-property: transform;
  transition-timing-function: ease-in-out;
  transition-duration: 0.5s;
}
#nav-container .elements {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  transform: translateY(-50%);
}
#nav-container .footer {
  position: absolute;
  bottom: var(--margin);
  left: 0;
  width: 100%;
  text-align: center;
}

.navi-open #nav-container {
  transform: translateX(0%);
}

/* Grid */
/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
.grid {
  display: grid;
}
.grid .cell {
  position: relative;
}
.grid .cell.h100 {
  min-height: calc(var(--vh) * 100);
}
.grid .cell.h75 {
  min-height: calc(var(--vh) * 75);
}
.grid .cell.w100 {
  grid-column: 1/-1;
}

/* Hero */
/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
#home .top, #home .bot {
  display: block;
  width: 100%;
  text-align: center;
  position: absolute;
}
#home .top {
  top: var(--margin);
}
#home .bot {
  bottom: var(--margin);
  margin-bottom: var(--vhd);
  transition: margin-bottom var(--vhs) var(--vht);
}
#home .clamp {
  max-width: calc(var(--blu) * 12);
  left: 50%;
  transform: translateX(-50%);
}
#home .logo {
  background-image: url("../styles//logo/SCH_Wortmarke_Schwarz.svg");
  pointer-events: auto;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  position: absolute;
  width: calc(100% - var(--margin) * 2);
  height: calc(100% - var(--margin) * 4 - var(--blu) * 4);
  top: calc(50% - var(--vhd));
  left: 50%;
  transform: translate(-50%, -50%);
  max-height: calc(var(--blu) * 4);
  transition: top var(--vhs) var(--vht);
}

/* Werte */
/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
#werte .container {
  display: grid;
  height: 100%;
  position: relative;
}
#werte .container .inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - var(--margin) * 2);
  max-width: calc(var(--blu) * 30);
  text-align: center;
  --max-height: calc(var(--blu) * 12);
}

/* Angebote */
/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
#angebote {
  overflow: hidden;
}
#angebote .text .item {
  height: calc(var(--vh) * 100);
  position: relative;
}
#angebote .text .item .inner {
  text-align: center;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  padding: 0 var(--margin);
}
#angebote .text .item .inner * {
  hyphens: none;
}
#angebote .image .item {
  position: fixed;
  top: 0;
  left: 0;
  height: calc(var(--vh) * 100);
  width: 100%;
  overflow: hidden;
  z-index: -100;
  opacity: 1;
  transition-property: opacity;
  transition-timing-function: ease-in-out;
  transition-duration: 0.5s;
}
#angebote .image .item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#angebote .image .item:not(.active) {
  opacity: 0;
}

/* Kontakt */
/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
#kontakt-kurz {
  padding: calc(var(--margin) * 2) var(--margin);
  text-align: center;
}

#kontakt {
  display: grid;
  padding-bottom: var(--vhd);
  transition: padding-bottom var(--vhs) var(--vht);
  height: calc(var(--vh) * 100);
}
#kontakt > div {
  margin: var(--margin);
  text-align: center;
  position: relative;
}
#kontakt > div:nth-child(3) {
  align-self: end;
}
#kontakt > div:nth-child(1), #kontakt > div:nth-child(3) {
  z-index: 200;
}
#kontakt .logo-container {
  --side: calc(var(--blu) * 8);
  display: block;
  width: var(--side);
  height: var(--side);
  background-image: url("../styles//logo/SCH-Ligatur-Schwarz.svg");
  background-repeat: no-repeat;
  background-position: center center;
  object-fit: contain;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#kontakt .images {
  pointer-events: auto;
  margin: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#kontakt .images img {
  position: absolute;
  display: none;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#kontakt .images img.show {
  display: block;
}

#personen {
  display: grid;
  grid-gap: var(--margin);
  padding: var(--margin);
}
#personen .person {
  position: relative;
}
#personen .person .info {
  padding-top: calc(var(--blu) * 1);
}
#personen .person .info .qr {
  --side: calc(var(--p-lh) * 4);
  position: absolute;
  bottom: 0;
  right: 0;
  width: var(--side);
  height: var(--side);
  mix-blend-mode: multiply;
}
#personen .person .info .qr canvas {
  width: 100%;
  height: 100%;
}
#personen .person .images {
  width: 100%;
  padding-top: 125%;
  position: relative;
}
#personen .person .images img {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  object-fit: cover;
  z-index: 100;
}
#personen .person .images img.close {
  display: none;
}

/* Projekte */
/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
#projekte .header-container {
  position: relative;
}
#projekte .header-container .inner {
  padding: var(--margin);
  min-height: calc(var(--vh) * 50);
  padding-bottom: calc(var(--blu) * 6);
  position: relative;
}
#projekte .header-container .inner h1 {
  margin-bottom: calc(var(--blu) * 1);
}
#projekte .header-container .inner .footer {
  position: absolute;
  bottom: var(--margin);
}
#projekte .image-container {
  position: relative;
}
#projekte .image-container img {
  display: block;
  width: 100%;
  min-height: calc(var(--vh) * 50);
  object-fit: cover;
}
#projekte .image-container .alt-container {
  position: absolute;
  top: 0;
  left: 0;
}
#projekte .image-container .alt-container p {
  background: var(--hellgrau);
  padding: calc(var(--blu) * 1);
  max-width: calc(var(--blu) * 20);
}
#projekte .image-container.tall {
  grid-row: span 2;
}
#projekte .open-project-container {
  position: sticky;
  top: calc(100vh - var(--vhd));
  height: 0;
  transition: top var(--vhs) var(--vht);
}
#projekte .open-project-container .open-project {
  display: block;
  padding: calc(var(--blu) * 0.75);
  width: 100%;
  left: 50%;
  position: relative;
  transform: translate(-50%, -100%);
  text-align: center;
}
#projekte #more-projekte {
  position: relative;
  grid-column: 1/-1;
  padding: var(--margin);
  text-align: center;
  cursor: pointer;
  z-index: 800;
}
#projekte .hide {
  display: none;
}

/* Engagement */
/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
#engagement {
  padding: calc(var(--margin) * 2) 0;
  text-align: center;
}

/* Detail Seite */
/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
.detail-grid {
  display: grid;
}
.detail-grid .intro {
  padding: var(--margin);
  padding-top: calc(var(--blu) * 4);
  display: grid;
  grid-gap: calc(var(--margin) * 2);
  min-height: calc(var(--vh) * 50);
}
.detail-grid .intro.second.second {
  height: 100%;
}
.detail-grid .intro .header h1 {
  margin-bottom: calc(var(--blu) * 1);
}
.detail-grid .intro .footer {
  align-self: end;
}
.detail-grid .intro:nth-child(2) .footer {
  margin-bottom: var(--vhd);
  transition: margin-bottom var(--vhs) var(--vht);
}
.detail-grid .image {
  position: relative;
}
.detail-grid .image img {
  display: block;
  width: 100%;
}
.detail-grid .image .alt-container {
  position: absolute;
  top: 0;
  left: 0;
}
.detail-grid .image .alt-container p {
  background: var(--hellgrau);
  padding: calc(var(--blu) * 1);
  max-width: calc(var(--blu) * 20);
}
.detail-grid .close {
  position: fixed;
  bottom: 0;
  right: 0;
  padding: var(--margin);
}

/* Footer */
/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
footer {
  display: grid;
  background: var(--hellgrau);
  padding: var(--margin);
  grid-gap: calc(var(--p-lh) * 1);
  grid-auto-flow: row dense;
}
footer .logo {
  background-image: url("../styles//logo/SCH_Wortmarke_Schwarz.svg");
  display: block;
  width: 100%;
  height: calc(var(--p-fs) * 0.8);
  background-repeat: no-repeat;
}
footer .wide p {
  max-width: calc(var(--blu) * 11);
}
footer * {
  line-height: var(--p-lh) !important;
}

/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
/* Typo */
/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
/* UniversalScheer // Medium */
@font-face {
  font-family: "UniversalScheer";
  src: url("../styles/fonts/UniversalScheer-650.woff") format("woff"), url("../styles/fonts/UniversalScheer-650.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
*, *::before, *::after {
  font-family: var(--UniversalScheer);
  font-weight: normal;
  font-size: var(--p-fs);
  line-height: var(--p-lh);
}

h1, .h1,
h2, .h2 {
  font-size: var(--h1-fs);
  line-height: var(--h1-lh);
}
h1.m, .h1.m,
h2.m, .h2.m {
  font-size: var(--m-fs);
  line-height: var(--m-lh);
  text-transform: var(--m-tt);
}

h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
  font-size: var(--p-fs);
  line-height: var(--p-lh);
}

p, .p {
  font-size: var(--p-fs);
  line-height: var(--p-lh);
  hyphens: auto;
}
p.n, .p.n {
  font-size: var(--n-fs);
  line-height: var(--n-lh);
}

.hyphen {
  hyphens: auto;
}

a, .a {
  color: var(--schwarz);
  opacity: 0.5;
  border: 0;
  outline: 0;
  cursor: pointer;
}
a:link, a:hover, a:focus, a:active, a:visited, .a:link, .a:hover, .a:focus, .a:active, .a:visited {
  color: var(--schwarz);
  opacity: 0.5;
  border: 0;
  outline: 0;
}
a:hover, a:focus, .a:hover, .a:focus {
  opacity: 1;
}
a.hidden:link, a.hidden:hover, a.hidden:focus, a.hidden:active, a.hidden:visited, .a.hidden:link, .a.hidden:hover, .a.hidden:focus, .a.hidden:active, .a.hidden:visited {
  opacity: 1;
}
a.hidden:hover, a.hidden:focus, .a.hidden:hover, .a.hidden:focus {
  opacity: 0.5;
}

@media all and (max-width: 35em) {
  /* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
  /* 01 / Mobile */
  /* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
  :root {
    --media: _00_Mobile;
  }
  /* Grid */
  /* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
  .grid .cell.h100 {
    transition-property: height;
    transition-duration: 0.5s;
    transition-timing-function: ease-in-out;
  }
}
@media all and (min-width: 35em) {
  /* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
  /* 02 / Tablet */
  /* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
  :root {
    --media: _02_Tablet;
    --blu: 19px;
    --n-fs: calc(var(--blu) * 0.8);
    --h1-fs: calc(var(--blu) * 2);
    --m-fs: var(--h1-fs);
    --m-tt: none;
  }
  /* Werte */
  /* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
  #werte .container .inner {
    --max-height: calc(var(--blu) * 10);
  }
  /* Footer */
  /* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
  footer {
    grid-template-columns: repeat(2, 1fr);
  }
  footer .tall {
    grid-row: span 2;
  }
  footer .supertall {
    grid-row: span 3;
  }
}
@media all and (min-width: 55em) {
  /* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
  /* 03 / Tablet-Laptop */
  /* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
  :root {
    --media: _03_Tablet_Laptop;
    --blu: 21px;
  }
  /* Footer */
  /* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
  footer {
    grid-template-columns: repeat(3, 1fr);
  }
  footer .wide {
    grid-column: 2/-1;
  }
}
@media all and (min-width: 75em) {
  /* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
  /* 04 / Laptop */
  /* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
  :root {
    --media: _04_Laptop;
    --blu: 23px;
  }
  /* Footer */
  /* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
  footer {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media all and (min-width: 120em) {
  /* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
  /* 05 / Desktop */
  /* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
  :root {
    --media: _05_Desktop;
    --blu: 25px;
  }
  /* Footer */
  /* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
  footer {
    grid-template-columns: repeat(6, 1fr);
  }
}
@supports (-webkit-hyphens: none) {
  /* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
  /* 00 / Safari Only */
  /* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
}
@media all and (orientation: landscape) {
  /* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
  /* Landscape */
  /* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
  :root {
    --snap: landscape;
  }
  /* Navigation */
  /* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
  #nav-container {
    width: 50%;
  }
  /* Grid */
  /* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
  /* Angebote */
  /* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
  #angebote {
    height: calc(var(--vh) * 100);
  }
  #angebote .text {
    display: grid;
    height: 100%;
    position: relative;
    width: 50%;
    left: 0;
    background: var(--blau);
  }
  #angebote .text * {
    font-size: var(--p-fs);
    line-height: var(--p-lh);
  }
  #angebote .text .item {
    height: unset;
  }
  #angebote .text .item .inner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - var(--margin) * 2);
    max-width: calc(var(--blu) * 30);
    height: unset;
  }
  #angebote .text .item .inner p {
    opacity: 0;
    overflow: hidden;
    max-height: 0;
    transition-property: max-height, opacity;
    transition-timing-function: ease-in-out;
    transition-duration: 0.2s;
  }
  #angebote .text .item:hover p {
    max-height: calc(var(--blu) * 10);
    opacity: 1;
  }
  #angebote .image .item {
    width: 50%;
    left: unset;
    right: 0;
  }
  /* Projekte */
  /* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
  #projekte {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
  #projekte .header-container .inner {
    position: sticky;
    top: 0;
  }
  #projekte .header-container .open-project-container {
    top: 0;
  }
  #projekte .header-container .open-project-container .open-project {
    transform: translate(100%, 0);
    left: 0;
    height: calc(var(--blu) * 3.5);
    vertical-align: middle;
    align-content: center;
    background: var(--hellgrau);
  }
  #projekte .image-container.landscape {
    grid-column: 1/-1;
  }
  #projekte .image-container.landscape .alt-container p {
    width: 50%;
  }
  #projekte .image-container .alt-container {
    z-index: 100;
    height: 100%;
  }
  #projekte .image-container .alt-container p {
    position: sticky;
    top: 0;
    width: 100%;
    max-width: unset;
  }
  #projekte .image-container img {
    position: sticky;
    top: 0;
  }
  #projekte .open-project-container.mobile {
    display: none;
  }
  #projekte .separator {
    height: 0;
    grid-column: 1/-1;
  }
  /* Engagement */
  /* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
  #engagement * {
    font-size: var(--h1-fs);
    line-height: var(--h1-lh);
  }
  /* Kontakt */
  /* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
  #kontakt {
    position: sticky;
    top: 0;
  }
  #personen {
    height: auto;
    grid-template-columns: repeat(2, 1fr);
    position: relative;
  }
  #personen .person .info {
    padding-bottom: calc(var(--blu) * 3);
  }
  #personen .person .info .save {
    position: absolute;
    bottom: 0;
    left: 0;
  }
  #personen .person .info .qr {
    --side: calc(var(--p-lh) * 3);
  }
  #personen .person .images img.fare {
    display: none;
  }
  #personen .person .images img.close {
    display: block;
  }
  #personen::-webkit-scrollbar {
    display: none;
  }
  /* Detail Seite */
  /* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
  .detail-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .detail-grid .intro {
    padding-top: var(--margin);
  }
  .detail-grid .intro.h50 {
    height: calc(var(--vh) * 50);
  }
  .detail-grid .cell {
    height: fit-content;
    min-height: calc(var(--vh) * 100);
  }
  .detail-grid .cell.h75 {
    min-height: calc(var(--vh) * 75);
  }
  .detail-grid .image img {
    height: 100%;
    object-fit: cover;
  }
  .detail-grid .image .alt-container {
    height: 100%;
  }
  .detail-grid .image .alt-container p {
    position: sticky;
    top: 0;
    width: 100%;
    max-width: unset;
  }
  .detail-grid .image.landscape {
    grid-column: span 2;
  }
  .detail-grid .image.landscape .alt-container p {
    width: 50%;
  }
}
@media all and (orientation: portrait) {
  /* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
  /* Portrait */
  /* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
  :root {
    --snap: portrait;
  }
  /* Navigation */
  /* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
  #nav-btn {
    --side: calc(var(--blu) * 2);
    right: 50%;
    transform: translateX(50%);
  }
  #nav-container .elements a {
    font-size: calc(var(--blu) * 2.8);
    line-height: 1.2;
  }
  /* Grid */
  /* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
  .grid {
    grid-template-columns: repeat(1, 1fr);
  }
  /* Hero */
  /* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
  #home .top {
    display: none;
  }
  #home .logo {
    height: calc(var(--blu) * 2);
    background-size: auto calc(var(--blu) * 2);
    max-height: unset;
  }
  /* Werte */
  /* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
  #werte .container {
    padding-top: calc(var(--blu) * 3);
    padding-bottom: calc(var(--margin) + var(--vhd));
    transition: padding-bottom var(--vhs) var(--vht);
  }
  /* Kontakt */
  /* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
  #kontakt {
    grid-template-rows: 1fr calc(var(--margin) * 1) 1fr;
  }
  #kontakt > div {
    margin: 0;
  }
  #kontakt > div * {
    font-size: var(--h1-fs);
    line-height: var(--h1-lh);
  }
  #kontakt > div:nth-child(1) {
    align-self: end;
  }
  #kontakt > div:nth-child(3) {
    align-self: start;
  }
  #kontakt .logo-container {
    display: none;
  }
  #personen {
    height: auto;
  }
  /* Detail Seite */
  .detail-grid .intro:nth-child(2) {
    padding-top: var(--margin);
  }
  /* Projekte */
  /* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
  #projekte .header-container .open-project-container {
    display: none;
  }
}
@media (hover: hover) and (pointer: fine) {
  /* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
  /* Hover */
  /* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
  /* Navigation */
  /* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
  #nav-btn:hover .stem {
    height: 86.0667%;
  }
  /* Werte */
  /* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
  #werte .container .cell .inner p {
    opacity: 0;
    overflow: hidden;
    max-height: 0;
    transition-property: max-height, opacity;
    transition-timing-function: ease-in-out;
    transition-duration: 0.2s;
  }
  #werte .container .cell:hover p {
    opacity: 1;
    max-height: var(--max-height);
  }
  /* Projekte */
  /* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
  #projekte #more-projekte:hover {
    background: var(--grau);
  }
  /* Angebote */
  /* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
}

/*# sourceMappingURL=main-compiled.css.map */