body {margin:4vw 10vw 4vw 10vw; background:#FFFFFF; -webkit-text-size-adjust: none;}

/* schrift */

@font-face {font-family: 'blender'; src: url('fonts/blender-bold.otf') format('opentype'); font-weight: 500;}
@font-face {font-family: 'blender'; src: url('fonts/blender-medium.otf') format('opentype'); font-weight: 400;}
@font-face {font-family: 'blender'; src: url('fonts/blender-book.otf') format('opentype'); font-weight: 300;}

/* formatierung */

h1 {font-family:"blender", sans-serif; font-weight: 400; font-size:24px; color:#000000; margin:0ch 0ch 1.6ch 0ch; padding:0px;}
p {font-family:"blender", sans-serif; font-weight:300; font-feature-settings:'tnum'; font-size:18px; color:#000000; margin:0ch 0 2ch 0; padding:0ch 0 1ch 0;}
p2 {font-family:"blender", sans-serif; font-weight:300; font-feature-settings:'tnum'; font-size:18px; color:#000000; margin:0ch 0 0ch 0; padding:0ch 0 0ch 0;}
p3 {font-family:"blender", sans-serif; font-size:16px; color:#000000; margin:0.5ch 0 2ch 0; padding:0.5ch 0 1ch 0;}
a {font-family:"blender", sans-serif; font-weight:300; font-feature-settings:'tnum'; color:#000000;}a.link:hover {background-color: #000000; transition: 200ms;}
section {padding: 0ch; margin: 0ch;}

/* tabs */

.tabs {display:flex; flex-wrap:wrap; width:100%;} .tabs__label {cursor:pointer; font-family:"blender", sans-serif; font-size: 30px; color:#000000; margin: 0ch 1.5ch 2.2ch 0ch} .tabs__radio {display:none;} .tabs__content {order:1; width:100%; display:none;} .tabs__radio:checked + .tabs__label {background-color:#000000; transition-duration: 300ms;} .tabs__radio:checked + .tabs__label + .tabs__content {display:initial; transition-duration: 300ms;}

nav {margin: 0; padding: 0;}
.tabs2 ul {font-size:20px; font-weight:400; display:flex; gap:2ch 3ch; list-style: none; text-decoration: none; margin: 0ch; padding: 0 0 3ch 0;}
.tab2 {font-size: 20px;  font-weight:400; text-decoration: none; display: inline-block;}
.tab2 li {text-decoration: none; font-size: 20px; color:#000000;}
.tab2 li a {text-decoration: none;} .tab2 li a:hover {background-color: #000000; transition: 200ms;}

/* bilder */

.discography-container {display: flex; flex-direction: column; align-items: flex-start; margin: 0;}
.disc {display: flex; align-items: start; margin-bottom: 10px;}
.disc img {max-width: 180px; height: auto; margin: 0 16px 0 0; padding: 0px;}
.disc p {margin: 0; padding: 0;}

.graphic {width:100%; height:auto;} 
.projects {width:55%;} 
.lb {display: none; position: fixed; z-index: 999; top: 0; left: 0; right: 0; bottom: 0; padding: 3em; background: #FFFFFF;}
.lb:target {display: block;}
.lb span {display: block; width: 100%; height: 100%; background-position: center; background-repeat: no-repeat; background-size: contain;}

.container2 {display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 0.7ch;}
.container4 {display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 0.7ch;}
.container5 {display: grid; grid-template-columns: repeat(5, 1fr); grid-gap: 0.7ch;}
.container9 {display: grid; grid-template-columns: repeat(9, 1fr); grid-gap: 0.7ch;}

.i img {width:100%; height:100%; object-fit:cover;} i:hover {background-color: #000000; transition: 200ms;}

/* details */

.tab {margin: 0ch; padding: 0ch;}
.tab input {position: absolute; opacity: 0; z-index: -1;}
.tab__content {max-height: 0; overflow: hidden; transition: 300ms;}
.tab input:checked ~ .tab__content {max-height: 10rem;}

.details {padding: 0ch; margin: 0ch; overflow: hidden;} .tab__label {font-family:"blender", sans-serif;
 font-weight:300; font-size:18px; cursor: pointer; overflow: hidden;}
.tab__label:hover {text-decoration:line-through; transition: 200ms;}
.tab__label {padding: 0ch 0ch -0.7ch 0ch; margin: 0ch 0ch -0.7ch 0ch; display: inline-block; cursor: pointer;}
.tab__content p {font-family:"blender", sans-serif; font-weight:300; font-size:16px; padding: 0px; margin: 0px}

/* responsive */

@media only screen and (max-width: 600px) {body{-webkit-text-size-adjust:70%;} body {margin:2.7ch;} .tabs__label{font-size: 28px; margin:0 1ch 1.5ch 0;} .gallery {width: calc(100vw - 6ch); height: auto;} .projects {width: calc(100vw - 6ch); height: auto;} .lb {padding: 1.5em;} .container2 {grid-template-columns: repeat(1, 1fr);} .container4 {grid-template-columns: repeat(2, 1fr);} .container5 {grid-template-columns: repeat(3, 1fr);} .container9 {grid-template-columns: repeat(3, 1fr);}}

/* selection */

::selection {color: #FFFFFF; background: #000000;}