@charset "UTF-8";
/* CSS Document */


/* Global Resets */

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;
}

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

/* Fonts */
/* Helvetica Now Text */
@font-face {
    font-family: "FBA Text";
    src: url("fonts/HelveticaNowText-Medium.eot");
    src: url("fonts/HelveticaNowText-Medium%EF%B9%96.eot#iefix") format("embedded-opentype"),
    url("fonts/HelveticaNowText-Medium.woff2") format("woff2"),
    url("fonts/HelveticaNowText-Medium.woff") format("woff"),
    url("fonts/HelveticaNowText-Medium.ttf") format("truetype"),
    url("fonts/HelveticaNowText-Medium.svg#svgFontName") format("svg");
}

/* Helvetica Now Micro */
@font-face {
    font-family: "FBA Micro";
    src: url("fonts/HelveticaNowMicro-Medium.eot");
    src: url("fonts/HelveticaNowMicro-Medium%EF%B9%96.eot#iefix") format("embedded-opentype"),
    url("fonts/HelveticaNowMicro-Medium.woff2") format("woff2"),
    url("fonts/HelveticaNowMicro-Medium.woff") format("woff"),
    url("fonts/HelveticaNowMicro-Medium.ttf") format("truetype"),
    url("fonts/HelveticaNowMicro-Medium.svg#svgFontName") format("svg");
}


/* Helvetica Now FBA */
@font-face {
    font-family: "FBA Logo";
    src: url("fonts/FBAHelveticaNowText-Medium.eot");
    src: url("fonts/FBAHelveticaNowText-Medium%EF%B9%96.eot#iefix") format("embedded-opentype"),
    url("fonts/FBAHelveticaNowText-Medium.woff2") format("woff2"),
    url("fonts/FBAHelveticaNowText-Medium.woff") format("woff"),
    url("fonts/FBAHelveticaNowText-Medium.ttf") format("truetype"),
    url("fonts/FBAHelveticaNowText-Medium.svg#svgFontName") format("svg");
}


/* 1 / Mobile / XS / */
/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
:root {
    --media: XS_Mobile;
    --scr: calc(((90px + (100vw / 100)) / 100));
    --blu: calc(var(--scr) * 13);

    --col-black: #000000;
    --col-accent: #e0b73a;

    --fba-text: "FBA Text", "Helvetica Neue", Helvetica, Arial, sans-serif;;
    --fba-micro: "FBA Micro", "FBA Text", "Helvetica Neue", Helvetica, Arial, sans-serif;;
    --fba-logo: "FBA Logo", "FBA Text", "Helvetica Neue", Helvetica, Arial, sans-serif;;

    --h9-lh: calc(var(--blu) * 1);
    --h9-fs: calc(var(--h9-lh) * 0.9);

    --p-lh: calc(var(--blu) * 1.35);
    --p-fs: calc(var(--p-lh) * 0.9);

    --h1-lh: calc(var(--blu) * 2.25);
    --h1-fs: calc(var(--h1-lh) * 0.97);

    --index-navi-btn: calc(var(--h1-fs) * 0.75);
}

body {
    padding: var(--blu);
    margin-top: var(--h1-lh);
}


/* Basic typography */
body, p, .p, table * {
    font-weight: 400;
    color: var(--col-black);
    font-family: var(--fba-text);
    line-height: var(--p-lh);
    font-size: var(--p-fs);
}

p, .p {
    font-weight: 400;
    margin-top: calc(0px - (var(--h9-lh) * 0.3));
    margin-bottom: calc(0px + (var(--h9-lh) * 0.3));
    margin-left: calc(0px - (var(--h9-lh) * 0.08));
}

h9, .h9 {
    display: inline-block;
    font-family: var(--fba-micro);
    line-height: var(--h9-lh);
    font-size: var(--h9-fs);
    margin-top: calc(0px - (var(--h9-lh) * 0.2));
    margin-bottom: calc(0px + (var(--h9-lh) * 0.2));
    margin-left: calc(0px - (var(--h9-lh) * 0.08));
}

h1, .h1 {
    color: var(--col-black);
    font-family: var(--fba-logo);
    line-height: var(--h1-lh);
    font-size: var(--h1-fs);
    margin-top: calc(0px - (var(--h1-lh) * 0.16));
    margin-bottom: calc(0px + (var(--h1-lh) * 0.16));
    margin-left: calc(0px - (var(--h1-lh) * 0.07));
    font-weight: 400;
}

.partner {
    font-family: var(--fba-logo);
}

table * {
    text-align: left;
}

/* Links */
a, a:link, a:visited {
    position: relative;
    color: var(--col-black);
    text-decoration: none;
}

a:hover, a:active {
    color: var(--col-accent);
}

a:not(#nav a, .pers-container a, #index-list a, a.ab-item)::after,
.name-container a::after {
    content: "";
    position: absolute;
    background: var(--col-black);
    left: 0;
    bottom: 13%;
    width: 100%;
    height: 5%;
}

a:hover:not(#nav a)::after,
a:active:not(#nav a)::after {
    background: var(--col-accent);
}

.no-hover {
    pointer-events: none;
}

.no-select {
    user-select: none;
}

.no-event {
    pointer-events: none;
}

/* Navigation */
#nav {
    position: fixed;
    font-family: var(--fba-text);
    margin-top: calc(0px - (var(--h1-lh) * 0.16));
    margin-bottom: calc(0px + (var(--h1-lh) * 0.16));
    display: inline-block;
    width: 100%;
    z-index: 900;
    top: 0;
    left: 0;
    padding: var(--blu);
    padding-bottom: calc(var(--blu) * 0.25);
}

#page-info #nav {
    background: none;
}

.active-proj #nav {
    visibility: hidden;
}

.active-pers #nav * {
    color: var(--col-accent);
    fill: var(--col-accent);
}


#nav-home,
#nav-info {
    display: inline-block;
}

#nav-info {
    font-family: var(--fba-micro);
    padding-left: var(--blu);
    position: absolute;
    right: 0;
    top: calc(0px + (var(--h1-lh) * 0.16));
}

#nav-home {
    line-height: var(--h1-lh);
    font-size: var(--h1-fs);
}

#nav-home::after {
    content: "Architektur";
    display: inline;
}

#fba-logo {
    fill: var(--col-black);
    height: calc(var(--h1-fs) * 0.715);
    margin-top: calc(0px - (var(--blu) * 0.6));
}

#nav-home:hover *,
#nav-home:active * {
    fill: var(--col-accent);
}

#nav-info * {
    font-family: var(--fba-micro);
    line-height: var(--h9-lh);
    font-size: var(--h9-fs);
}

#nav-info,
#nav-info a {
    cursor: pointer;
}

#nav-info .desk {
    display: none;
}

#nav-info .mobi {
    display: inline-block;
    position: relative;
    width: calc(var(--h1-fs) * 1);
    height: calc(var(--h1-fs) * 0.72);
    margin: var(--blu);
}

#page-info:not(.mobi-navi-open) #nav-info .mobi,
#page-index:not(.mobi-navi-open) #nav-info .mobi,
#page-jobs:not(.mobi-navi-open) #nav-info .mobi {
    margin: unset;
}

#nav-info .mobi div {
    display: block;
    position: absolute;
    left: 0;
    width: 100%;
    background: var(--col-black);
    height: 2px;
}

.nav-close {
    display: none;
    font-family: var(--fba-micro);
    line-height: var(--h9-lh);
    font-size: var(--h9-fs);
}

.nav-close .mobi .one {
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
}

.nav-close .mobi .two {
    top: 50%;
    transform: translateY(-50%) rotate(-45deg);
}

#nav-info .mobi .top {
    top: 0;
}

#nav-info .mobi .mid {
    top: 50%;
    transform: translateY(-50%);
}

#nav-info .mobi .bot {
    bottom: 0;
}

#page-proj .nav-close {
    display: unset;
}


/* Project list */
.scroll-box-container {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.scroll-box {
    width: 100%;
    height: calc(100% - (var(--h1-lh) + (var(--blu) * 0.9)));
    overflow: scroll;
    overflow-x: hidden;
    position: absolute;
    top: 0;
    left: 0;
    padding: 0 var(--blu) 0 var(--blu);
    margin-top: calc(var(--h1-lh) + (var(--blu) * 0.9));
}

.proj-container {
    position: relative;
    padding-top: calc(0px + (var(--h1-lh) * 0.04));
    margin-bottom: calc(0px - (var(--h1-lh) * 0.04));
}

.proj-container > div:not(.hover-zone) {
    pointer-events: none;
}

.pers-container {
    display: inherit;
}

.pers-container * {
    cursor: default;
}

.pers-container a * {
    cursor: pointer;
}

.hover-zone {
    display: block;
    position: absolute;
    width: calc(100% + (var(--blu) * 0.4));
    height: calc(100% - var(--h1-lh) * 0.02);
    top: calc(0px - (var(--h1-lh) * 0.11));
    left: calc(0px - var(--blu) * 0.8);
    z-index: 400;
}

.hover-zone a {
    display: none;
    width: 100%;
    height: 100%;
}

.pers-container.active .name-container .hover-zone {
    pointer-events: none;
}

.proj-container.this .hover-zone a {
    display: block;
}

.proj-type-a * {
    cursor: pointer;
}

.name-container .hover-zone {
    height: calc(100% - (var(--h1-lh) * 0.05));
    width: calc(100% + (var(--h1-lh) * 0.04));
    top: calc(0px - (var(--h1-lh) * 0.01));
    left: calc(0px - var(--h1-lh) * 0.15);
}

.pers-container .proj-container {
    display: inline-block;
}

.pers-container .name-container {
    display: inline-block;
    width: max-content;
}

.pers-container .name-container:hover,
.pers-container .name-container:hover * {
    color: var(--col-accent);
    cursor: pointer;
}

.pers-container .name-container.hover,
.pers-container .name-container.hover .educ {
    cursor: default;
}

.pers-container .proj-nr,
.pers-container .proj-title {
    font-family: var(--fba-logo);
    line-height: var(--h1-lh);
    font-size: var(--h1-fs);
    margin-top: calc(0px - (var(--h1-lh) * 0.16));
    margin-bottom: calc(0px + (var(--h1-lh) * 0.16));
    margin-left: calc(0px - (var(--h1-lh) * 0.07));
    font-weight: 400;
    position: relative;
    z-index: 500;
}

/* Hidden project on home */
.pers-container .more,
.pers-container .less {
    position: relative;
    display: inline-block;
    font-size: var(--h1-fs);
    line-height: var(--h1-lh);
    padding-right: var(--blu);
    padding-top: calc(0px + var(--blu));
    margin-top: calc(0px - (var(--h1-lh) * 0.16) - var(--blu));
    margin-left: calc(0px - (var(--h1-lh) * 0.07));
    cursor: pointer;
    z-index: 500;
}

.pers-container .hidden,
.pers-container .less {
    display: none;
}

.pers-container .more:hover,
.pers-container .less:hover {
    color: var(--col-accent);
}

.pers-container.show-more .less,
.pers-container.show-more .hidden {
    display: inline-block;
}

.pers-container.show-more .more {
    display: none;
}

.pers-container .proj-nr {
    padding-right: var(--blu);
}

.proj-type-a .index-ti {
    cursor: pointer;
}

.proj-type-a .hover-zone::after {
    pointer-events: none;
    content: "zum Projekt";
    position: absolute;
    display: block;
    width: max-content;
    font-family: var(--fba-micro);
    line-height: var(--h9-lh);
    font-size: var(--h9-fs);
    bottom: calc(0px + var(--blu) * 0.4);
    right: 0;
    transform: translateX(100%);
    visibility: hidden;
    color: var(--col-accent);
}

.pers-container .proj-type-a .proj-nr::after,
.pers-container .proj-type-b .proj-nr::after {
    content: "";
    position: absolute;
    background: var(--col-black);
    left: 0;
    bottom: 1%;
    width: calc(100% - var(--blu));
    height: 5%;
}

.pers-container .proj-type-b .proj-nr::after {
    height: 0;
    background: none;
    border-bottom: dotted calc(var(--h1-lh) * 0.08) var(--col-black);
}

.pers-container .proj-title {
    font-family: var(--fba-text);
    position: fixed;
    top: 0;
    left: 0;
    white-space: nowrap;
    display: none;
    width: 100%;
    padding: var(--blu) 0 calc(var(--blu) * 0.3) var(--blu);
}

.pers-container .proj-type-c .proj-title {
    background: white;
}

.pers-container .proj-img {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    display: none;
}

.proj-container:hover .proj-img {
    z-index: -1;
}

.pers-container .proj-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.name-container {
    position: relative;
    font-family: var(--fba-text);
    line-height: var(--h1-lh);
    font-size: var(--h1-fs);
    margin-top: calc(0px - (var(--h1-lh) * 0.12));
    margin-left: calc(0px - (var(--h1-lh) * 0.07));
    padding-bottom: calc(0px + (var(--h1-lh) * 0.12));
    padding-right: var(--blu);
    font-weight: 400;
    z-index: 100;
}

.name-container .educ,
.name-container .links,
.name-container .exit,
.all-proj {
    font-family: var(--fba-micro);
    line-height: var(--h9-lh);
    font-size: var(--h9-fs);
    margin-top: calc(0px - (var(--h9-lh) * 0.2));
    margin-bottom: calc(0px + (var(--h9-lh) * 0.2));
    margin-left: calc(0px - (var(--h9-lh) * 0.08));
    font-weight: 400;
}

.all-proj {
    cursor: pointer;
}

.proj-active .all-proj {
    visibility: hidden;
}

.name-container .exit {
    display: none;
}

.name-container .name-info {
    display: inline-block;
    z-index: 900;
}

.name-container .desk {
    display: none;
}

.name-container .links a {
    cursor: pointer !important;
    position: relative;
    display: block;
    width: fit-content;
}

.name-container a::after {
    bottom: -4%;
    background: var(--col-accent);
}

.name-container a.name::after {
    display: none;
}

.links a:hover::after,
.links a:active::after {
    visibility: hidden;
}

.port-top,
.port-bot {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    visibility: hidden;
}

.port-top img,
.port-bot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.port-top {
    z-index: 900;
}

.port-bot {
    z-index: -100;
}

/* Projects home hover states */
/* Name active */
.name-active .pers-container:not(.active) {
    z-index: 100;
}

.name-active .pers-container .proj-container,
.name-active .more,
.name-active .less {
    pointer-events: none;
}

.name-active .pers-container.active *,
.name-active .pers-container.active *,
.hover:not(.menupop) * {
    color: var(--col-accent);
}

.name-active .pers-container.active .proj-type-a .proj-nr::after {
    background: var(--col-accent);
}

.name-active .pers-container.active .name-container .links,
.name-active .pers-container.active .name-container .exit {
    display: block;
}

.name-active .pers-container.active .proj-type-b .proj-nr::after,
.proj-type-b.hover .proj-nr::after {
    border-color: var(--col-accent);

}

.name-active .pers-container.active .port-top,
.name-active .pers-container.active .port-bot {
    visibility: visible;
}

.name-active .pers-container.active .name-container,
.name-active .pers-container.active .proj-container {
    z-index: 1000;
}

/* Project active */
.proj-active #nav {
    visibility: hidden;
}

.proj-container.this .proj-title {
    display: block;
    z-index: 500;
}

.proj-active .hover .proj-nr::after {
    visibility: hidden;
}

.proj-active:not(.type-c) .pers-container.active .name-container {
    color: var(--col-accent);
}

.proj-active .pers-container.active .name-container > div {
    color: var(--col-black);
}

.proj-active .this .hover-zone::after {
    visibility: visible;
}

.proj-active:not(.type-c) .proj-container:not(.hover) .proj-nr,
.proj-active:not(.type-c) .pers-container:not(.active) .name-container,
.proj-active:not(.type-c) .pers-container .name-container > div,
.proj-active:not(.type-c) .pers-container .more,
.proj-active:not(.type-c) .pers-container .less,
.proj-active:not(.type-c) #footer {
    visibility: hidden;
}


/* Touch devices */
.touchevents .proj-type-a.hover.this .hover-zone {
    width: calc(100% + (var(--blu) * 6.5));
    z-index: 900;
}

.touchevents .proj-type-a.hover.this .hover-zone::after {
    transform: unset;
}


/* Project page */
#page-info,
#page-index,
#page-jobs,
#page-proj {
    margin-top: 0;
}

#page-proj {
    padding-top: 0;
}

#page-info #nav,
#page-index #nav,
#page-jobs #nav,
#page-proj #nav {
    position: relative;
    padding: 0;
}

#page-proj #nav * {
    color: var(--col-accent);
    cursor: default;
}

#page-proj #nav h1 {
    display: inline;
    padding-right: var(--blu);
    font-family: var(--fba-text);
}

#page-proj .counter .nav-close:hover,
.name-active .pers-container.active .name-container .exit:hover {
    color: var(--col-black);
}

.nav-close:hover {
    cursor: pointer;
    color: var(--col-accent);
}

#page-proj .proj-text * {
    font-family: var(--fba-text);
}

#page-proj .proj-info {
    margin-top: var(--p-lh);
}

#page-proj .proj-info p {
    margin-bottom: var(--p-lh);
}

#page-proj .proj-info h1 {
    margin-bottom: 0;
    font-family: var(--fba-text);
}

.slideshow {
    position: relative;
    width: calc(100% + (var(--blu) * 2));
    height: calc(var(--vh) * 100);
    left: calc(0px - var(--blu));
    user-select: none;
    margin-bottom: var(--blu);
    overflow: hidden;
    touch-action: manipulation;
}

.slideshow:not(.imag-load-complete .slideshow) {
    height: 100vh;
}

/*.slideshow:not(.imag-load-complete .slideshow) .slide.open img,*/
/*.slideshow:not(.imag-load-complete .slideshow) .slide.open video {*/
/*    width: 100%;*/
/*    height: 100%;*/
/*    object-fit: cover;*/
/*}*/

.slideshow .slide.open img,
.slideshow .slide.open video {
    opacity: 0;
}

.imag-load-complete .slideshow .slide.open img,
.imag-load-complete .slideshow .slide.open video {
    opacity: 1;
    transition: opacity 0.2s ease-in-out;
}


.slideshow button {
    position: absolute;
    display: flex;
    top: 0;
    width: calc(100% / 3);
    height: 100%;
    z-index: 10;
    border: none;
    cursor: pointer;
    background: none;
    padding: var(--blu);
    align-items: center;
    touch-action: manipulation;
}

.slideshow button.prev::before {
    content: "Zurück";
}

.slideshow button.next::before {
    content: "Weiter";
}

.slideshow button.zoom::before {
    content: "+";
    line-height: var(--h1-lh);
    font-size: var(--h1-fs);
}

.slideshow button::before {
    display: block;
    position: absolute;
    visibility: visible;
    color: var(--col-accent);
    font-family: var(--fba-micro);
    line-height: var(--h9-lh);
    font-size: var(--h9-fs);
}

.slideshow button.edge {
    opacity: 0;
}

.slideshow button.prev {
    left: 0;
    justify-content: flex-start;
}

.slideshow button.next {
    right: 0;
    justify-content: flex-end;
}

.slideshow button.zoom {
    left: calc(100% / 3);
    justify-content: center;
}

.slideshow button.zoom:not(:hover) {
    opacity: 0;
}

.slideshow.zoomActive button.zoom::before {
    content: "—";
    margin-top: calc(0px - (var(--h1-fs) * 0.1));
}

.slideshow.zoomActive .slide img,
.slideshow.zoomActive .slide video {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    object-fit: cover;
}

.slideshow.zoomActive .slide img.landscape,
.slideshow.zoomActive .slide video.landscape {
    width: auto;
    min-width: 100%;
}

.slideshow.zoomActive .slide img.portrait,
.slideshow.zoomActive .slide video.portrait {
    height: auto;
    min-height: 100%;
}

.slide img.square,
.slide video.square {
    width: unset;
    min-width: 100%;
    min-height: 100%;
}

.slideshow .info {
    font-family: var(--fba-text);
    line-height: var(--h1-lh);
    font-size: var(--h1-fs);
    position: absolute;
    padding: var(--blu);
    margin-bottom: calc(0px - (var(--h1-lh) * 0.12));
    bottom: 0;
    left: 0;
    color: var(--col-accent);
    z-index: 100;
}

.slide {
    display: block;
    position: absolute;
    top: calc(0px - (var(--blu) / 2));
    left: calc(0px - (var(--blu) / 2));
    width: calc(100% + var(--blu));
    height: calc(100% + var(--blu));
    overflow: hidden;
}

.slide:not(.open) {
    visibility: hidden;
    pointer-events: none;
}

.slide .counter {
    position: absolute;
    top: 0;
    left: 0;
    padding: calc(var(--blu) * 1.5);
    color: var(--col-accent);
    font-family: var(--fba-logo);
    line-height: var(--h1-lh);
    font-size: var(--h1-fs);
    margin-top: calc(0px - (var(--h1-lh) * 0.16));
    margin-bottom: calc(0px + (var(--h1-lh) * 0.16));
    margin-left: calc(0px - (var(--h1-lh) * 0.07));
    font-weight: 400;
    z-index: 100;
}

.slide img,
.slide video {
    position: absolute;
    left: 0;
    top: 0;
    object-fit: contain;
}

.slide img.landscape,
.slide video.landscape {
    height: 100%;
    width: 100%;
}

.slide img.portrait,
.slide video.portrait {
    width: 100%;
    height: 100%;
}

.slide img.square,
.slide video.square {
    height: 100%;
    width: 100%;
}


/* Info page */
.info-intro,
.info-jobs {
    position: relative;
    z-index: 200;
}

.info-intro h1 {
    margin-bottom: var(--h1-lh);
}

.info-index {
    margin-bottom: var(--h1-lh);
}

.info-index,
.index-navi {
    position: relative;
    z-index: 100;
}

.index-navi {
    display: flex;
    justify-content: space-between;
}

.index-navi .btn {
    position: relative;
    font-family: var(--fba-logo);
    line-height: var(--h1-lh);
    font-size: var(--h1-fs);
    margin-top: calc(0px - (var(--h1-lh) * 0.16));
    margin-bottom: calc(0px + (var(--h1-lh) * 0.16));
    margin-left: calc(0px - (var(--h1-lh) * 0.07));
    font-weight: 400;
    cursor: pointer;
    user-select: none;
}


.index-navi .btn .toggle {
    display: inline-block;
    width: calc(var(--index-navi-btn) * 1.618);
    height: var(--index-navi-btn);
    border-radius: 100vw;
    margin-right: calc(var(--blu) * 0.5);
    position: relative;
    border: solid calc(var(--blu) * 0.1);
    overflow: hidden;
}

.index-navi .btn .toggle::before {
    content: "";
    display: block;
    position: absolute;
    top: calc(0px - (var(--blu) * 0.1));
    left: calc(0px - (var(--blu) * 0.1));
    border-radius: 100vw;
    width: var(--index-navi-btn);
    height: calc(100% + (var(--blu) * 0.2));
    border: solid calc(var(--blu) * 0.1);
}

.open .index-navi .btn:hover .toggle {
    background: var(--col-accent);
}

.open .index-navi .btn .toggle {
    background: var(--col-black);
}

.open .index-navi .btn .toggle::before {
    left: unset;
    right: calc(0px - (var(--blu) * 0.1));
    background: white;
}


.sort-navi {
    position: relative;
    padding-top: var(--blu);
    padding-bottom: var(--blu);
    z-index: 100;
}

.sort-navi > div {
    cursor: pointer;
    padding-right: var(--blu);
}

.sort-navi > div::before {
    content: "";
    display: block;
    width: var(--blu);
    height: var(--blu);
    border-radius: 100vw;
    border: solid calc(var(--blu) * 0.1);
}

.sort-navi > div:hover::before {
    background: var(--col-accent);
    border-color: var(--col-accent);
}

.sort-navi > div.open::before {
    background: var(--col-black);
    border: none;
}

#index-list {
    width: 100%;
    cursor: default;
}

#index-list a,
#index-list a:link,
#index-list a:visited {
    text-decoration: underline;
}

#index-list a:hover,
#index-list a:active {
    text-decoration: none;
}

#index-list .index-fl::after {
    content: "m²";
    display: inline;
}

#index-list tr,
.sort-navi {
    display: grid;
    grid-column-gap: var(--blu);
    grid-template-columns:
    /*Nummer*/ calc(var(--blu) * 3)
    /*Titel*/     1fr
    /*Jahr*/      calc(var(--blu) * 4)
}

#index-list tr:hover * {
    color: var(--col-accent);
}

#index-list .index-fl,
#index-list .index-ka,
#index-list .index-nu,
#index-list .index-ba,
#index-list .index-st,
.sort-navi .sort-fl,
.sort-navi .sort-ka,
.sort-navi .sort-nu,
.sort-navi .sort-ba,
.sort-navi .sort-st {
    display: none;
}

#index-list .index-img {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(var(--vh) * 100);
    padding: 0;
    margin: 0;
    z-index: 0;
    pointer-events: none;
}

#index-list .index-img img {
    object-fit: cover;
    height: 100%;
    width: 100%;
    z-index: 0;
}

.open #index-list .index-img {
    display: block !important;
    position: relative;
    grid-column: 1/-1;
    height: calc(var(--blu) * 13);
    margin-top: calc(var(--blu) * 0.5);
    margin-bottom: var(--blu);
    pointer-events: all;
}

.open #index-list .index-img img {
    z-index: -1;
    object-fit: contain;
    object-position: left;
}

#index-list th {
    overflow: hidden;
    padding-bottom: calc(var(--p-lh) * 0.1);
    margin-top: calc(0px - (var(--p-lh) * 0.1));
    z-index: 100;
}

#index-list .index-ti,
#index-list .index-ka {
    position: relative;
}

#index-list .index-ka span:not(span:last-child, .rang, .partner)::after {
    content: ";";
}

#jobs-container {
    position: relative;
    min-height: calc((var(--vh) * 100) - (var(--blu) * 4.5));
    display: flex;
    flex-flow: wrap;
}

#jobs-container #footer {
    align-self: flex-end;
}


/* Info page */
/* Listen */
#page-info table {
    width: 100%;
    cursor: default;
}

#page-info table * {
    text-align: left;
    font-weight: 400;
    color: var(--col-black);
    font-family: var(--fba-text);
    line-height: var(--p-lh);
    font-size: var(--p-fs);
}

#page-info table sup {
    font-family: var(--fba-micro);
    line-height: var(--h9-lh);
    font-size: var(--h9-fs);
    bottom: calc(0px - var(--blu) * 0.1);
}

#page-info table tr {
    display: grid;
    grid-template-columns: calc(var(--blu) * 11) 1fr;
    grid-column-gap: var(--blu);
    min-height: calc(var(--p-lh) * 1);
}

#page-info table td {
    padding-bottom: calc(var(--p-lh) * 0.1);
    margin-top: calc(0px - (var(--p-lh) * 0.1));
    z-index: 100;
    min-height: calc(var(--p-lh) * 1);
    width: unset !important;
}


/* Footer */
#page-home #footer {
    padding-top: var(--blu);
    padding-bottom: var(--blu);
}

#footer {
    position: relative;
    z-index: 800;
}

#footer a {
    white-space: nowrap;
}

/* Imprint */
#imprint:not(#page-info #imprint) {
    display: none;
}


/* Jammer */
.jammer {
    cursor: pointer;
    position: fixed;
    z-index: 900;
    top: -999%;
    left: -999%;
}

.jammer:not(.fullsize) {
    width: calc(var(--blu) * 10);
    height: calc(var(--blu) * 10);
    transform: translate(-50%, -50%);
}

.jammer.fullsize {
    width: 100%;
    height: 100%;
}

.jammer img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.jammer.fullsize img {
    object-fit: cover;
}

/* 2 / Tablet / S / */
/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
@media all and (min-width: 35em) {
    :root {
        --media: S_Tablet;
        --blu: calc(var(--scr) * 15);

        --h1-lh: calc(var(--blu) * 3.88);
    }

    /* Navigation */
    #nav-info {
        position: relative;
        right: unset;
        top: unset;
    }

    #nav-info .desk {
        display: inline-block;
    }

    #nav-info .mobi {
        display: none;
    }

    /* Project list */
    .pers-container .proj-title {
        padding: var(--blu) 0 calc(var(--blu) * 0.5) var(--blu);
    }

    .pers-container .proj-type-a .proj-nr::after,
    .pers-container .proj-type-b .proj-nr::after {
        bottom: -4%;
    }

    #index-list tr,
    .sort-navi {
        display: grid;
        grid-template-columns:
      /*Nummer*/ calc(var(--blu) * 3)
      /*Titel*/     1fr
      /*Jahr*/      calc(var(--blu) * 4)
      /*Kategorie*/ 1fr
    }

    #index-list .index-ka,
    .sort-navi .sort-ka {
        display: block;
    }

    #jobs-container {
        min-height: calc((var(--vh) * 100) - (var(--blu) * 6));
    }

}


/* 2 / Mobile and Tablet only / S / */
/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
@media all and (max-width: 55em) {


    .name-container .name-info {
        display: flex;
        flex-direction: column;
    }

    .name-container .name-info .links {
        display: none;
    }

    .name-active .pers-container.active .name-container .exit {
        display: none;
    }

    .scroll-box > .exit {
        position: fixed;
        width: calc(var(--h1-fs) * 1);
        height: calc(var(--h1-fs) * 0.72);
        top: calc(var(--blu) * 1);
        right: calc(var(--blu) * 1);
        visibility: hidden;
    }

    .name-active .scroll-box > .exit {
        visibility: visible;
    }

    #page-proj .slideshow .nav-close::after, #page-proj .slideshow .nav-close::before,
    .scroll-box > .exit::before, .scroll-box > .exit::after {
        content: "";
        display: inline-block;
        position: absolute;
        left: 0;
        width: 100%;
        background: var(--col-black);
        height: 2px;
    }

    #page-proj .slideshow .nav-close::after, #page-proj .slideshow .nav-close::before {
        background: var(--col-accent);
    }

    #page-proj .slideshow .nav-close::before,
    .scroll-box > .exit::before {
        top: 50%;
        transform: translateY(-50%) rotate(45deg);
    }

    #page-proj .slideshow .nav-close::after,
    .scroll-box > .exit::after {
        top: 50%;
        transform: translateY(-50%) rotate(-45deg);
    }

    .name-active #nav-info {
        visibility: hidden;
    }

    .name-container .links {
        font-family: var(--fba-text);
        line-height: var(--h1-lh);
        font-size: var(--h1-fs);
    }

    .name-container .educ {
        height: var(--h1-lh);
        padding-top: calc(var(--blu) * 1);
    }

    #page-proj .slideshow .nav-close {
        position: absolute;
        width: calc(var(--h1-fs) * 1);
        height: calc(var(--h1-fs) * 0.72);
        top: calc(var(--blu) * 2);
        right: calc(var(--blu) * 1);
        color: transparent !important;
    }

    .slide .counter {
        position: relative;
    }

    .hover.this .hover-zone {
        position: fixed;
        bottom: var(--blu);
        left: var(--blu);
        height: var(--h1-lh);
        top: unset;
        width: calc(100% - (var(--blu) * 2));
        z-index: 900;
    }

    .hover.this .hover-zone::after {
        position: absolute;
        transform: none;
        max-width: unset;
        bottom: unset;
        right: unset;
        width: unset;
        font-family: var(--fba-text);
        font-size: var(--h1-fs);
        line-height: var(--h1-lh);
        top: 0;
        left: 0;
        white-space: nowrap;
    }

    .type-a .scroll-box {
        height: calc(100% - ((var(--h1-lh) + (var(--blu) * 0.9)) * 2));
        margin-bottom: calc(var(--h1-lh) + (var(--blu) * 0.9));
    }

    /* New Mobile Menu */
    body.mobi-navi-open {
        overflow: hidden;
    }

    .mobi-navi-open .scroll-box {
        margin-top: calc(var(--h1-lh) * 5.5);
        height: calc(100% - ((var(--h1-lh) * 5.1) + (var(--blu) * 0.9)));
    }

    #page-info.mobi-navi-open, #page-jobs.mobi-navi-open, #page-index.mobi-navi-open {
        margin-top: calc(var(--h1-lh) * 4.5);
    }

    #page-home.mobi-navi-open #nav {
        top: calc(var(--h1-lh) * 4.1);
    }

    .mobi-navi-open #nav-open .mobi {
        display: none;
    }

    .mobi-navi-open #nav-open .desk {
        display: block;
        position: fixed;
        top: calc(var(--blu) * 0.6);
        left: calc(var(--blu) * 0.9);
    }

    .mobi-navi-open #nav-open .desk a {
        font-family: var(--fba-text);
        font-size: var(--h1-fs);
        line-height: var(--h1-lh);
    }

    .mobi-navi-open .nav-close:not(.proj-info .nav-close, #page-proj .nav-close) {
        display: block;
        position: fixed;
        top: 0;
        right: 0;
    }

    .mobi-navi-open #jobs-container {
        min-height: calc((var(--vh) * 100) - (var(--blu) * 14.6));
    }


}


/* 3 / Laptop and Tablet / M / */
/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
@media all and (min-width: 55em) {
    :root {
        --media: M_Tablet_Laptop;
        --blu: calc(var(--scr) * 17);
    }

    /* Links */
    a:hover, a:active {
        color: var(--col-accent);
    }

    a:not(#nav a):hover::after,
    a:not(#nav a):active::after,
    a:not(#nav a):active::after {
        background: var(--col-accent);
    }

    /* Navigation */
    #nav-home:hover,
    #nav-info:hover {
        color: var(--col-accent);
        cursor: pointer;
    }

    .pers-container .proj-nr a {
        width: 100%;
    }

    .pers-container .proj-nr a::after {
        background: none;
        left: 100%;
    }

    .name-container .links {
        position: relative;
        font-family: var(--fba-micro);
        line-height: var(--h9-lh);
        font-size: var(--h9-fs);
        margin-top: calc(0px - (var(--h9-lh) * 0.2));
        margin-bottom: calc(0px + (var(--h9-lh) * 0.2));
        margin-left: calc(0px - (var(--h9-lh) * 0.08));
        font-weight: 400;
        width: unset;
        display: none;
    }

    .name-container a::after {
        bottom: -1%;
    }

    .name-container .desk {
        display: inline-block;
    }

    .name-container .mobi {
        display: none;
    }

    .name-container .links a {
        margin: 0;
        display: inline-block;
    }

    .name-active .pers-container:not(.active),
    .name-active .pers-container .proj-container,
    .name-active .pers-container .more,
    .name-active .pers-container .less {
        visibility: visible;
    }

    .slideshow button:hover::before {
        visibility: visible;
    }

    .slideshow .info:hover {
        cursor: pointer;
        color: var(--col-black);
    }

    #index-list tr,
    .sort-navi {
        display: grid;
        grid-template-columns:
      /*Nummer*/ calc(var(--blu) * 3)
      /*Titel*/     1fr
      /*Jahr*/      calc(var(--blu) * 4)
      /*Kategorie*/ 1fr
      /*Bauschaft*/   calc(var(--blu) * 14);
    }

    #index-list .index-ka,
    #index-list .index-ba,
    .sort-navi .sort-ka,
    .sort-navi .sort-ba {
        display: block;
    }

    .index-navi .btn:hover {
        color: var(--col-accent);
    }


}

/* 4 / Laptop / L / */
/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
@media all and (min-width: 75em) {
    :root {
        --media: L_Laptop_Desktop;
        --blu: calc(var(--scr) * 18);
    }

    /* Navigation */
    #nav-home::after {
        content: "Fritschi Beis Architektur";
    }

    #index-list tr,
    .sort-navi {
        display: grid;
        grid-template-columns:
      /*Nummer*/ calc(var(--blu) * 3)
      /*Titel*/     1fr
      /*Jahr*/      calc(var(--blu) * 4)
      /*Fläche*/    calc(var(--blu) * 5.5)
      /*Kategorie*/ 1fr
      /*Bauschaft*/ calc(var(--blu) * 14);
    }

    #index-list .index-fl,
    #index-list .index-ka,
    #index-list .index-ba,
    .sort-navi .sort-fl,
    .sort-navi .sort-ka,
    .sort-navi .sort-ba {
        display: block;
    }


}


/* 5 / Desktop / XL / */
/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
@media all and (min-width: 120em) {
    :root {
        --media: XL_Desktop;
        --blu: calc(var(--scr) * 19);
    }

    #index-list tr,
    .sort-navi {
        display: grid;
        grid-template-columns:
      /*Nummer*/ calc(var(--blu) * 3)
      /*Titel*/     1fr
      /*Jahr*/      calc(var(--blu) * 4)
      /*Fläche*/    calc(var(--blu) * 5.5)
      /*Kategorie*/ 1fr
      /*Nutzung*/   calc(var(--blu) * 14)
      /*Bauschaft*/ calc(var(--blu) * 14)
      /*Status*/    calc(var(--blu) * 10);
    }

    #index-list .index-fl,
    #index-list .index-ka,
    #index-list .index-nu,
    #index-list .index-ba,
    #index-list .index-st,
    .sort-navi .sort-fl,
    .sort-navi .sort-ka,
    .sort-navi .sort-nu,
    .sort-navi .sort-st,
    .sort-navi .sort-ba {
        display: block;
    }

}