@import "normalize.css";

:root {
    --ff-body: "Bitter";

    --clr-corp01-dark: rgb(153,0,102);
    --clr-corp01-light: rgb(195,18,160);
    --clr-corp02-dark: rgb(85,86,38);
    --clr-corp02-light: rgb(130,131,48);
    --clr-corp02-superlight: rgb(203,203,33);
    --clr-std: rgb(0,0,0);
    --clr-lines: rgb(142,145,146);

    --fw-l: 300;
    --fw-r: 500;
    --fw-b: 700;

    --fs-m: clamp(1rem, 0.5vw + 1rem, 1.5rem);
    --fs-m: clamp(1rem, 1.25vw, 2.5rem);
    --fs-l: clamp(1.1rem, 0.847vw + 1rem, 2.1175rem);
    --fs-l: clamp(1.1rem, 1.375vw, 2.75rem);
    --fs-menu: clamp(1.1rem, 0.847vw + 1rem, 2.1175rem);
    --fs-xl: clamp(1.1rem, 1.32vw + 1rem, 2.475rem);
    --fs-logo: clamp(2rem, 3vw + 1rem, 6rem);

    --s-menulogo: clamp(1rem, 8vw + 1rem, 8rem);

    --p-s: 0.6rem;
    --p-m: clamp(1.375rem, 1.2vw + 1rem, 2.5rem); /* 1.1rem; */
    --p-l: 1.8rem;

    --p-padbody: clamp(1rem, 5vw + 1rem, 20rem);
}

::selection {
    background-color: var(--clr-corp02-superlight);
}


/* bitter-100 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Bitter';
  font-style: normal;
  font-weight: 100;
  src: url('../fonts/bitter-v40-latin-100.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/bitter-v40-latin-100.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

/* bitter-100italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Bitter';
  font-style: italic;
  font-weight: 100;
  src: url('../fonts/bitter-v40-latin-100italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/bitter-v40-latin-100italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

/* bitter-200 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Bitter';
  font-style: normal;
  font-weight: 200;
  src: url('../fonts/bitter-v40-latin-200.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/bitter-v40-latin-200.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

/* bitter-200italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Bitter';
  font-style: italic;
  font-weight: 200;
  src: url('../fonts/bitter-v40-latin-200italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/bitter-v40-latin-200italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

/* bitter-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Bitter';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/bitter-v40-latin-300.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/bitter-v40-latin-300.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

/* bitter-300italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Bitter';
  font-style: italic;
  font-weight: 300;
  src: url('../fonts/bitter-v40-latin-300italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/bitter-v40-latin-300italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

/* bitter-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Bitter';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/bitter-v40-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/bitter-v40-latin-regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

/* bitter-italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Bitter';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/bitter-v40-latin-italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/bitter-v40-latin-italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

/* bitter-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Bitter';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/bitter-v40-latin-500.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/bitter-v40-latin-500.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

/* bitter-500italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Bitter';
  font-style: italic;
  font-weight: 500;
  src: url('../fonts/bitter-v40-latin-500italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/bitter-v40-latin-500italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

/* bitter-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Bitter';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/bitter-v40-latin-600.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/bitter-v40-latin-600.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

/* bitter-600italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Bitter';
  font-style: italic;
  font-weight: 600;
  src: url('../fonts/bitter-v40-latin-600italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/bitter-v40-latin-600italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

/* bitter-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Bitter';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/bitter-v40-latin-700.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/bitter-v40-latin-700.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

/* bitter-700italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Bitter';
  font-style: italic;
  font-weight: 700;
  src: url('../fonts/bitter-v40-latin-700italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/bitter-v40-latin-700italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

/* bitter-800 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Bitter';
  font-style: normal;
  font-weight: 800;
  src: url('../fonts/bitter-v40-latin-800.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/bitter-v40-latin-800.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

/* bitter-800italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Bitter';
  font-style: italic;
  font-weight: 800;
  src: url('../fonts/bitter-v40-latin-800italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/bitter-v40-latin-800italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

/* bitter-900 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Bitter';
  font-style: normal;
  font-weight: 900;
  src: url('../fonts/bitter-v40-latin-900.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/bitter-v40-latin-900.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

/* bitter-900italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Bitter';
  font-style: italic;
  font-weight: 900;
  src: url('../fonts/bitter-v40-latin-900italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/bitter-v40-latin-900italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

html {
  width: 100%;
  height: 100%;
  font-size: 16px;
  box-sizing: border-box;
  scroll-behavior: smooth;
}

body {
  width: 100%;
  height: 100%;
  background: #fff;
  font-size: 100%;
  box-sizing: border-box;
}

* {
    font-family: var(--ff-body);
    font-weight: var(--fw-r);
    font-size: var(--fs-m);
    padding: 0;
    margin: 0;
    list-style: none;
}

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

div {
  vertical-align: top;
}

*,
h1,
h2,
h3,
table caption {
  line-height: 1.5em;
  text-align: left;
}

p {
    padding-bottom: 1.5em;
}

.project-txtblock-bottom {
    margin-bottom: 1.5em;
}

h1,
h2 {
    margin-bottom: 1.35em;
}

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

b,
b *,
strong,
strong * {
    font-weight: var(--fw-b);
    color: var(--clr-corp01-light);
    letter-spacing: 0.1ex;
}

a {
    text-decoration: underline;
    color: var(--clr-corp01-dark);
}

a * {
    color: var(--clr-corp01-dark);
}

.slick-dots {
    bottom: 0.5em;
}

.slick-dotted.slick-slider {
    margin: 0;
}

.slick-dots li button:before {
    font-size: var(--fs-m);
    color: var(--clr-corp02-light);
}

.slick-dots li.slick-active button:before {
    color: var(--clr-corp02-light);
}

#control-tablet,
#control-desktop,
#control-desktop-xl {
  display: none;
}
#control-mobile {
  display: inline;
}

#website {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: "header"
                        "content"
                        "footer";
  grid-template-rows: auto 1fr auto;
  width: 100%;
  min-height: 100%;
  overflow-x: hidden;
}

#header {
    grid-area: header;
    display: grid;
    width: 100%;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-areas: " menu menu menu menu menu menu menu menu ";
}

#menu {
    position: fixed;
    grid-area: menu;
    display: grid;
    width: 100vw;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-template-areas: " . . menulogo menulogo menulogo . . . . . . . . . . ."
                            " . . menulogo menulogo menulogo menunav menunav menunav menunav menunav menunav menunav menunav menunav menunav menunav"
                            " . . menulogo menulogo menulogo . . . . . . . . . . .";
    border-bottom: 1px solid var(--clr-lines);
    align-content: center;
    background: #fff;
    transition: 500ms;
    z-index: 2000;
}

.stickyheader #menu {
    box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.4);

    
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 0.01fr 0.98fr 0.01fr;
    grid-template-areas: ". . menulogo menulogo menulogo . . . . . . . . . . ."
                            " . . menulogo menulogo menulogo menunav menunav menunav menunav menunav menunav menunav menunav menunav menunav menunav"
                            ". . menulogo menulogo menulogo . . . . . . . . . . .";
}

#menulogo {
    grid-area: menulogo;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    align-content: center;
    justify-content: end;
    align-self: center;
    justify-self: end;
    padding : 0;
    width: calc( 3.3 * var(--fs-menu));
    margin-right: 1em;
}

.stickyheader #menulogo {
    width: 1em;
    
}

#menulogo img {
    width: calc( 3.3 * var(--fs-menu));
    transition: 500ms;
}

.stickyheader #menulogo img {
    width: calc( 1 * var(--fs-menu));
}

#menu1 {
    grid-area: menunav;
    display: grid;
    align-content: center;
}

#footer {
    grid-area: menunav;
    display: grid;
    align-content: center;
}

#menu1 ul,
#footer_menu {
    align-content: center;
}

#menu1 ul:first-child {
    border-top: 1px solid var(--clr-lines);
    border-bottom: 1px solid var(--clr-lines);
}

.stickyheader #menu1 ul:first-child {
    border-top: 1px solid transparent;
    border-bottom: 1px solid transparent;
}

#footer_menu:first-child {
    border-top: 1px solid var(--clr-lines);
}

.menuitem,
.footerMenu-li {
    display: inline;
}

.menuitem::before,
.footerMenu-li::before {
    content: "|";
    font-size: calc(1.6 * var(--fs-m));
    font-weight: var(--fw-n);
}

.menuitem:first-child::before,
.footerMenu-li:first-child::before {
    content: "";
}

.menuitem-a,
.menuitem-b,
.project-teaser-button,
.project-txtblock-top li,
.footerMenu-li a,
.project-txtblock-bottom {
    display: inline-block;
    padding: var(--p-s) 0.5em var(--p-s) 0.5em;
    line-height: 1em;
}

.menuitem:first-child a.menuitem-a,
.menuitem:first-child a.menuitem-b {
    padding-left: 0.1em;
}


.footerMenu-li:first-child a {
    padding-left: 0;
}

.project-txtblock-middle {
    padding-top: var(--p-s);
    padding-bottom: var(--p-s);
}

.menuitem-a,
.menuitem-a *,
.menuitem-b,
.menuitem-b *,
.footerMenu-li a {
  text-decoration: none;
  color: var(--clr-std);
  font-size: var(--fs-menu);
  font-weight: var(--fw-n);
}

.menuitem-a:hover,
.menuitem-a:hover *,
.menuitem-a.act,
.menuitem-a.act *,
.menuitem-a.actPath,
.menuitem-a.actPath *,
.footerMenu-li a:hover {
  text-decoration: none;
  color: var(--clr-corp01-light);
}

.menuitem-a.act,
.menuitem-a.act *,
.menuitem-a.actPath,
.menuitem-a.actPath * {
  font-weight: var(--fw-b);
  font-size: var(--fs-menu);
  letter-spacing: 0.1ex;
}

.menu1-menuitem .menuitem-a,
.menu1-menuitem .menuitem-a *,
.menu1-menuitem .menuitem-b,
.menu1-menuitem .menuitem-b * {
  font-style: normal;
}
.menu1-menuitem .menuitem-a.act,
.menu1-menuitem .menuitem-a.act *,
.menu1-menuitem .menuitem-b.act,
.menu1-menuitem .menuitem-b.act * {
  text-decoration: none;
}

#logo {
    grid-area: logo;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-areas: " . logoimg logoimg logotext logotext logotext logotext . ";
    align-content: center;
}

#logo-img {
    grid-area: logoimg;
    position: relative;
    width: calc(5 * var(--fs-logo));
    align-content: center;
    justify-self: end;
}

#logo-img img {
    position: absolute;
    right:0;
    top: 0;
    padding: 5% 15% 5% 5%;
}

#logo-img img:nth-child(1) {
    position: relative;
    animation: animation-logo-01 30s infinite;
}

#logo-img img:nth-child(2) {
    animation: animation-logo-02 30s infinite;
}

#logo-img img:nth-child(3) {
    animation: animation-logo-03 30s infinite;
}

@keyframes animation-logo-01 {
  0%   { opacity: 0; }
  25%  { opacity: 0; }
  33%  { opacity: 0; }
  59%  { opacity: 1; }
  67%  { opacity: 1; }
  92%  { opacity: 0; }
  100% { opacity: 0; }
}

@keyframes animation-logo-02 {
  0%   { opacity: 1; }
  25%  { opacity: 0; }
  33%  { opacity: 0; }
  59%  { opacity: 0; }
  67%  { opacity: 0; }
  92%  { opacity: 1; }
  100% { opacity: 1; }
}

@keyframes animation-logo-03 {
  0%   { opacity: 0; }
  25%  { opacity: 1; }
  33%  { opacity: 1; }
  59%  { opacity: 0; }
  67%  { opacity: 0; }
  92%  { opacity: 0; }
  100% { opacity: 0; }
}

#logo-txt {
    grid-area: logotext;
    font-size: var(--fs-logo);
    font-weight: var(--fw-r);
    line-height: 1em;
    align-self: center;
}

#logo-txt * {
    font-size: var(--fs-logo);
    font-weight: var(--fw-r);
    line-height: 1em;
}

#content,
.sec,
.grid-project {
    display: block;
    width: 100%;
}

#content {
    grid-area: content;
    padding-bottom: 3em;
}

.sec {
    border-top: 1px solid var(--clr-lines);
}

.grid-project {
    width: 100vw;
    margin-bottom: calc( 2 * var(--p-s) );
}

.grid-project::after {
    content: "\00a0";
    line-height: 1em;
    font-size: var(--fs-l);
}

.grid-project-pics {
    display: block;
    width: 100%;
}

.grid-project-pics,
.project-teaser-button,
.project-txtblock-top li,
.project-txtblock-bottom {
    display: block;
    width: 100%;
    border-bottom: 1px solid var(--clr-lines);
}

.project-txtblock-bottom {
    border-top: 1px solid var(--clr-lines);
}

.project-txtblock-bottom:empty {
    border-top: none;
}

.sec-header {
    display: none;
}

.project-teaser-button,
.project-txtblock-top ul:first-child li,
.project-txtblock-middle,
.project-txtblock-bottom {
    padding-left: var(--p-padbody);
    padding-right: var(--p-padbody);

}

.project-teaser-button {
    cursor: pointer;
}

.project-teaser-button::after {
    content: "\00a0\00a0↓";
    font-weight: var(--fw-b);
    color: var(--clr-corp01-dark);
}

.secextra {
    display: none;
}

.project-txtblock {
    display: none;
}

.secextra:checked ~ .project-teaser-button::after {
    content: "\00a0\00a0↑";
}

.secextra:checked ~ .project-txtblock {
    display: block;
}

.secextra:not(:checked) ~ .project-teaser-button {
    color: var(--clr-std);
}

#footer_menu {
    padding: 0 2.5% 0 var(--p-padbody);
}

.project-teaser-button,
.project-txtblock-top > ul > li:nth-child(2) {
    font-weight: var(--fw-b);
    font-size: var(--fs-l);
    color: var(--clr-corp01-dark);
    letter-spacing: 0.1ex;
}

#footer {
    grid-area: footer;
}

.txtblock h1,
.txtblock h2 {
    padding: var(--p-s) var(--p-padbody) var(--p-s) var(--p-padbody);
    border-top: 1px solid var(--clr-lines);
    border-bottom: 1px solid var(--clr-lines);
    color: var(--clr-corp01-light);
    font-weight: var(--fw-b);
    font-size: var(--fs-l);
    letter-spacing: 0.1ex;
}

.txtblock h2 {
    color: var(--clr-corp01-dark);
}

h1 em {
    font-style: normal;
    color: var(--clr-corp01-dark);
    font-weight: var(--fw-r);
    font-size: var(--fs-m);
}

.txtblock p {
    padding-left: var(--p-padbody);
    padding-right: var(--p-padbody);
}

@media screen and (min-width: 40em) {
    #control-mobile,
    #control-tablet,
    #control-desktop,
    #control-desktop-xl {
        display: none;
    }
    #control-tablet {
        display: inline;
    }
    
}

@media screen and (min-width: 64em) {
    #control-mobile,
    #control-tablet,
    #control-desktop,
    #control-desktop-xl {
        display: none;
    }
    #control-desktop {
        display: inline;
    }

    :root {
        --fs-mx: 1.3vw;
        --fs-lx: 1.43vw;
    }

    #content {
        padding-bottom: 0;
    }
    
    .grid-project {
        display: grid;
        width: 100%;
        grid-template-columns: 2fr 1fr;
        column-gap: 3%;
        grid-template-areas: " project-pics project-text ";
        margin-bottom: 1.5em;
    }
    
    .sec:nth-child(odd) .grid-project {
        grid-template-areas: " project-text project-pics ";
    }

    .project-teaser-button {
        display: none;
    }

    .grid-project-pics {
        grid-area: project-pics;
        display: block;
        width: 66vw;
        border-bottom: none;
    }

    .project-txtblock {
        grid-area: project-text;
    }

    .sec:nth-child(odd) .project-txtblock * {
        text-align: right;
    }
    
    .project-teaser-button,
    .project-txtblock-top ul:first-child li,
    .project-txtblock-middle,
    .project-txtblock-bottom {
        padding-left: 0;
        padding-right: calc(var(--p-padbody) / 5);

    }
    
    .sec:nth-child(odd) .project-teaser-button,
    .sec:nth-child(odd) .project-txtblock-top ul:first-child li,
    .sec:nth-child(odd) .project-txtblock-middle,
    .sec:nth-child(odd) .project-txtblock-bottom {
        padding-left: calc(var(--p-padbody) / 5);
        padding-right: 0;

    }

    .project-txtblock {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr auto;
    }

    .project-txtblock-bottom {
        margin-bottom: 0;
    }

}

@media screen and (min-width: 100em) {
    #control-mobile,
    #control-tablet,
    #control-desktop,
    #control-desktop-xl {
        display: none;
    }
    #control-desktop-xl {
        display: inline;
    }
    
}