/* --- Baseline --- */
@font-face {
  font-family: 'Pirelli';
  src:  url(../fonts/Pirelli-Regular.woff) format('woff'),
        url(../fonts/Pirelli-Regular.woff2) format('woff2');
  font-style: normal;
  font-weight: 400;
}

@font-face {
  font-family: 'Pirelli';
  src:  url(../fonts/Pirelli-RegularItalic.woff) format('woff'),
        url(../fonts/Pirelli-RegularItalic.woff2) format('woff2');
  font-style: italic;
  font-weight: 400;
}

@font-face {
  font-family: 'Pirelli';
  src:  url(../fonts/Pirelli-Bold.woff) format('woff'),
        url(../fonts/Pirelli-Bold.woff2) format('woff2');
  font-style: normal;
  font-weight: 700;
}


@font-face {
  font-family: 'Pirelli';
  src:  url(../fonts/Pirelli-BoldItalic.woff) format('woff'),
        url(../fonts/Pirelli-BoldItalic.woff2) format('woff2');
  font-style: italic;
  font-weight: 700;
}

:root {
  --content-width: 65rem;
  --font-size-fixed-l: 1.5625rem;
  --font-size-fixed-m: 1.1375rem;
  --font-size-fixed-s: 0.8125rem;
  --font-size-var-s: 2vw;
  --font-size-var-sm: 2.5vw;
  --font-size-var-m: 3.75vw;
  --margin-nav-horizontal: 1.4375rem;
  --color-bg: white;
  --color-fg: black;
  --color-hv: #f0f0f0;
  --border: 1px solid black;
  --vw: 1vw;
}

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

html {
  font-family: 'Pirelli', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  ;
}

li {
  list-style: none;
}

a {
  color: currentColor;
  text-decoration: none;
}

p a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

strong,
b {
  font-weight: 500;
}

img,
video {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

address {
  font-style: normal;
}

/* --- Main --- */
body {
  font-size: var(--font-size-fixed-m);
  line-height: 1.25;
  padding: 0 1rem;
  background-color: var(--color-bg);
}

header {
  font-size: var(--font-size-fixed-l);
  padding: .375rem 1rem .8125rem 1rem;
  position: sticky;
  width: calc(100% + 2rem);
  z-index: 11;
  top: var(--admin-bar--height, 0);
  left: 0;
  background-color: var(--color-bg);
  transform: translateY(0%) translateX(-1rem);
  transition: transform 0.25s ease-in-out;
}

header.is-hidden {
  transform: translateY(-100%) translateX(-1rem);
}


header>nav>ul,
nav#filter {
  display: flex;
}

header>nav>ul>li {
  margin-right: var(--margin-nav-horizontal);
  text-transform: lowercase;
}

header>nav>ul>li:last-child {
  margin-right: 0;
}

main {
  margin-top: var(--admin-bar--height, 0);
}

main#home>div:first-child {
  display: flex;
  gap: 1rem;
}

main#home>div:first-child>p {
  width: 75%;
}

main#home>div:first-child>p,
main#home>div:first-child>address {
  /* padding-right: calc(var(--vw) * 6.5); */
}

main#home>div:first-child>p {
  font-size: var(--font-size-fixed-l);
}

section.slider {
  margin-top: 2rem;
  position: relative;
  width: calc(100% + 2rem);
  transform: translateX(-1rem);
  height: calc((100vw - 2rem) * .477);
}

section.slider ul {
  width: 100%;
  height: 100%;
}

section.slider ul li {
  width: inherit;
  height: inherit;
  background-color: white;
}

section.slider ul li figure {
  height: 100%;
  width: 100%;
  position: relative;
  display: flex;
  align-items: end;
}

section.slider ul li figure picture {
  width: inherit;
  height: inherit;

}

section.slider ul li figure picture,
section.slider ul li figure video {
  position: absolute;
}

section.slider ul li figure img,
section.slider ul li figure video {
  width: inherit;
  height: inherit;
  object-fit: cover;
}

section.slider ul li.contain  img,
section.slider ul li.contain figure video {
  object-fit: contain;
}

section.slider ul li.light :is(.pb_font, .title_font) {
  color: var(--color-fg)
}

section.slider ul li div {
  position: absolute;
  z-index: 1;
  top: 2rem;
  left: 1rem;
  color: white;
}
section.slider ul li div h2 {
  padding-top: 3vw;
  max-width: 50vw;
}

section.slider ul li:not(:first-child) {
  display: none;
}

section.slider .slider_indicator_tray {
  position: absolute;
  width: 100%;
  padding: 1rem 1rem;
  top: 0;
  z-index: 90;
  display: flex;
  align-items: baseline;
  gap: 1rem;
}

section.slider .slider_indicator_tray div.active {
  transform: scaleY(4);
}

section.slider .slider_indicator_tray div {
  background: white;
  height: .2rem;
  flex-grow: 1;
  cursor: pointer;
  transition: all .3s;
  transform-origin: bottom;
}

section.slider:has(li:first-child:is(.light)) .slider_indicator_tray div {
  background: var(--color-fg);
}

section.news {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: calc(100% + 2rem);
  transform: translateX(-1rem);
}

section.news>article {
  background-color: var(--color);
  padding: 1rem;
}

section.news>article>a {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

section.news>article.full {
  width: 200%;
}


section.news>article.full>a {
  flex-direction: row;
  gap: 1rem;
}

section.news>article.full>a>* {
  width: 50%;
}

section.news>article>div:first-child {
  margin-bottom: 1vw;
}

section.news>article .news_text_block {
  display: grid;
}

section.news>article .title_font {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--clamp);
  line-clamp: var(--clamp);
  overflow: hidden;
  line-height: 1.1;
  padding-bottom: .1875rem;
  margin-top: 2vw;
}

section.news>article p {
  /* white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; */
}

section.news>article img {
  margin-top: 1vw;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  object-position: bottom left;
}

section.news>article.full img {
  aspect-ratio: 16 / 10;
}

main#info h1 {
  text-transform: lowercase;
}

section.employees {
  margin-top: 1.5rem;
  margin-bottom: 3.5rem;
}

section.employees ul li {
  display: block;
  border-top: var(--border);
  padding: 1rem 0;
}

section.employees ul li:last-child {
  border-bottom: var(--border);
}

section.employees p,
section.employees h3,
section.employees h2,
section.ehemalige h2 {
  font-size: var(--font-size-fixed-m);
}

section.employees h2 {
  padding-bottom: 1rem;
}

section.ehemalige h2 {
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: var(--border);
}

section.employees div.portrait {
  width: 100%;
  aspect-ratio: 3/4;
  background-color: lightgray;
  flex-shrink: 0;
  background-repeat: no-repeat;
  background-size: cover;
}

section.employees details {
  width: 100%;
  cursor: pointer;
}

section.employees summary {
  list-style: none;
  position: relative;
  grid-template-columns: [start] clamp(10rem, 33%, 20rem) auto [end];
  grid-gap: 1rem;
  display: grid;
}

section.employees summary::-webkit-details-marker {
  display: none;
}

section.employees summary::after {
  content: '↓';
  height: var(--font-size-fixed-m);
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%) rotate(0deg);
  transform-origin: center;
  margin-top: 0rem;
}

details[open]>summary::after {
  transform: translateY(-50%) rotate(180deg);
  margin-top: 0.25rem;
}

section.employees summary+p {
  margin-top: 1rem;
}

nav#filter {
  position: sticky;
  top: calc(var(--admin-bar--height, 0rem) + 3.1rem);
  width: calc(100% + 2rem);
  transform: translateY(0) translateX(-1rem);
  background-color: var(
  --color-bg);
  flex-direction: column;
  z-index: 11;
  transition: transform .25s ease-in-out;
}

nav#filter.is-hidden {
  transform: translateY(calc(3.25rem * -1)) translateX(-1rem);
}

nav#filter>form {
  display: inherit;
  border-top: var(--border);
}
nav#filter > * {
  padding: .6875rem 1rem .8125rem 1rem;
  border-bottom: var(--border);
}

nav#filter form {
  -ms-overflow-style: none;
  scrollbar-width: none;
  overflow-x: scroll;
  white-space: nowrap;
}

nav#filter form::-webkit-scrollbar {
  display: none;
}

nav#filter form>label:not(:last-child) {
  margin-right: var(--margin-nav-horizontal);
}

#filter_list>li:not(:first-child) {
  display: none;
}


#filter_list>li>form:not(.full_filter) label:nth-of-type(n + 7) {
  display: none;
}

#filter_list>li>form button {
  all: unset;
  cursor: pointer;
  font-weight: bold;
}

#filter_list>li>form.full_filter button {
  display: none;
}

#filter_list>li>form {
  display: flex;
  /* padding: .6875rem 0 .8125rem 0; */
}

input[type="radio"] {
  display: none;
}

input[type="radio"]+label {
  cursor: pointer;
}

input[type="radio"]:checked+label,
.active {
  font-weight: bold;
}

#pb_list>li {
  border-bottom: var(--border);
  padding-bottom: 1.75rem;
  background-color: var(--color-bg);
  transition: background-color .3s;
  width: calc(100% + 2rem);
  transform: translateX(-1rem);
  padding: 0 1rem 1.75rem;
}

#pb_list>li:has(a:hover) {
  background-color: var(--color-hv);
}

#pb_list>li>a>div:nth-child(1) {
  font-size: var(--font-size-fixed-s);
  padding: .9375rem 0 .4375rem 0;
}

#pb_list>li>a>div:nth-child(1)>span {
  margin-right: var(--margin-nav-horizontal);
}

#pb_list>li>a>div:nth-child(2) {
  display: grid;
  grid-template-columns: 2.2fr 2fr 1fr;
}

#pb_list h1 {
  font-size: var(--font-size-var-sm);
  padding: 0 1rem;
}

#pb_list picture {
  flex-grow: 1;
}

#pb_list img {
  height: auto;
  min-width: 100%;
}

#news_list>li {
  border-bottom: var(--border);
  background-color: var(--color-bg);
  transition: background-color .3s;
  width: calc(100% + 2rem);
  transform: translateX(-1rem);
  padding: 1rem 1rem 1.75rem;
}

#news_list>li:has(a:hover) {
  background-color: var(--color-hv);
}

#news_list>li:first-child {
  border-top: var(--border);
}

main section.flex_container {
  display: flex;
  gap: 1.25rem
}

main>section.flex_container>div {
  width: 50%;
}

main>section.flex_container>div>picture {
  width: inherit;
}

main>section.flex_container>div>picture img {
  min-width: 100%;
}

main.project .pb_font {
  margin-bottom: var(--font-size-var-sm);
}

main.project h1 {
  margin-bottom: calc(var(--font-size-fixed-m) * 1.25);
}

main.project>div>div {
  margin-bottom: 1rem;
}

main.project table {
  border-collapse: collapse;
  width: 100%;
  margin-top: calc(var(--font-size-fixed-m) * 1.25);
  margin-bottom: 3.5rem;
}

main.project tr:first-of-type {
  border-top: var(--border);
}

main.project tr {
  border-bottom: var(--border);
}
main.project :is(th,td) {
  padding: 1rem 0;
}

main.project tr th {
  text-align: left;
  width: 25%;
  min-width: 11rem;
}

main.project>section.column_6_grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(6, 1fr);
}

main.project>section.column_6_grid>div {
  grid-column: span var(--span);
  margin-bottom: 3rem;
}

figcaption:not(:empty) {
  font-size: var(--font-size-fixed-s);
  padding: .5rem 0;
}

main.article section.flex_container,
main.info section.flex_container {
  margin-top: 3vw;
}

main.info section.flex_container div:last-child {
  margin: .25vw;
}

main.article section.flex_container div:last-child {
  margin-top: .85vw;
}
main.article section.flex_container > div:first-child > div {
  margin-bottom: .75vw;
}

main.article section.flex_container div h2.subline_font {
  /* line-height: calc(var(--font-size-var-m) * 1.25); */
  margin-bottom: .5vw;
}

.blocks video {
  width: 100%;
}

.blocks iframe {
  aspect-ratio: 16 / 9;
  width: 100% !important;
  border: none;
}

/* --- var font classes --- */

.subline_font {
  font-size: var(--font-size-var-s);
  /* line-height: calc(var(--font-size-var-m) * .85); */
  font-weight: bold;
}

.title_font {
  font-size: var(--font-size-var-m);
  line-height: 1.1;
  font-weight: bold;
}

.pb_font {
  --capital-height: 170;
  --line-height: 1;

  --metrics-emSquare: 2;
  --metrics-capHeight: 1.43;
  --metrics-descender: 0.49;
  --metrics-ascender: 1.95;
  --metrics-linegap: 0;

  --lineheightNormal: calc(var(--metrics-ascender) + var(--metrics-descender) + var(--metrics-linegap));
  --distanceBottom: var(--metrics-descender);
  --distanceTop: calc(var(--metrics-ascender) - var(--metrics-capHeight));
  --computedFontSize: calc(var(--capital-height) / var(--metrics-capHeight));
  --contentArea: calc(var(--lineheightNormal) * var(--computedFontSize));
  --valign: calc((var(--distanceBottom) - var(--distanceTop)) * var(--computedFontSize));
  --computedLineheight: calc((var(--line-height) * var(--capital-height)) / var(--metrics-emSquare) - var(--valign));

  font-size: calc(var(--computedFontSize) * .1vw);
  line-height: calc(var(--computedLineheight) * .1vw);

  font-weight: bold;
}

.pb_font span {
  vertical-align: calc(var(--valign) * -.1vw);
}

/* --- Swiper --- */

section.swiper {
  overflow: hidden;
  position: relative;
}

.swiper-navigation {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: absolute;
  top: 0;
  width: 100%;
  height: calc(100%);
}

.swiper-pagination.swiper-pagination-fraction {
  position: static;
  margin-top: .25rem;
}

.swiper-button-next,
.swiper-button-prev {
  width: 100%;
  height: 100%;
  justify-self: end;
  cursor: e-resize;
  position: static;
  margin: 0;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}

.swiper-button-prev {
  cursor: w-resize;
  justify-content: flex-start;
}

.swiper-button-next:after,
.swiper-button-prev:after {
  color: var(--color-fg);
  font-size: var(--font-size-fixed-l);
  text-transform: none !important;
  letter-spacing: 0;
  text-transform: none;
  font-variant: initial;
  line-height: 1;
  border-radius: 50%;
  margin-left: .5rem;
  content: '←';
}

.swiper-button-next:after {
  margin-right: .5rem;
  margin-left: 0;
  content: '→';
}

section.imageGallery ul {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

footer {
  font-size: 12px;
  padding: 1rem 0;
  display: flex;
  justify-content: space-between;
}

footer div.legal,
footer div.legal ul {
  display: flex;
  gap: 1rem;
}

.blocks p + p {
  margin-top: 1rem;
}

@media screen and (min-width: 769px) {
  main.project :is(img, video) {
    max-height: 85vh;
    object-fit: contain;
    object-position: left;
    width: 100%;
  }
  main.project .swiper figure {
    /* display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center; */
    /* padding: 0 calc(var(--font-size-var-s) + 1rem); */
  }
}


@media screen and (max-width: 768px) {
  :root {
    --font-size-var-s: 6vw;
    --font-size-var-sm: 7.5vw;
    --font-size-var-m: 9vw;
  }

  html {
    font-size: 4vw;
  }

  header>nav>ul {
    justify-content: space-between;
  }

  main#home>div:first-child,
  section.flex_container {
    flex-direction: column-reverse;
  }


  main>section.flex_container>div {
    width: 100%;
    margin-bottom: 3vw;
  }

  main.info section.flex_container {
    margin-top: 7vw;
  }

  section.news,
  main.project>section.column_6_grid {
    grid-template-columns: 1fr;
  }

  main.project>section.column_6_grid {
    gap: 1rem;
  }

  section.slider ul li div h2 {
    padding-top: 4vw;
    max-width: unset;
  }

  main.project table {
    margin-bottom: 0;
  }

  main.project>section.column_6_grid div:not(.swiper-slide) {
    /* margin-bottom: 3vw; */
  }

  main.project>section.column_6_grid>div {
    margin-bottom: 0;
  }

  main#home>div:first-child>p,
  main#home>div:first-child>address {
    padding: 0;
  }

  main#home>div:first-child>address {
    margin: 1rem 0;
  }

  section.slider {
    height: calc((100vw - 2rem) * 1.2);
  }

  main#info h1 {
    /* word-wrap: break-word; */
    font-size: 17.8vw;
  }

  .pb_font {
    --capital-height: 295;
  }

  .empty {
    display: none;
}

  #pb_list h1 {
    width: 100%;
    padding: 0;
    margin-top: 6vw;
    margin-bottom: 3vw;
  }

  #pb_list>li>a>div:nth-child(2) {
    grid-template-columns: 1fr;
  }

  section.news>article.full>a {
    flex-direction: column;
  }

  section.news>article.full>a>* {
    width: 100%;
  }

  section.news>article.full {
    width: 100%;
  }

  section.slider,
  section.news {
    width: calc(100% + 2rem);
  }

  
  main.project {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .swiper-navigation {
    top: unset;
    bottom: -2px;
    height: auto;
  }
  .swiper-button-next:after,
.swiper-button-prev:after {
  font-size: var(--font-size-fixed-l);
  margin: 0;
}
}

main.article .blocks>* {
  margin-bottom: 1.5rem;
}