:root,
::backdrop{
--red: #E34435;
--orange:#E7693C;
--yellow:#F0B351;
--green:#A9DA4E;
--bg:#F8F0E2;
--text:#010101;
--mark:#8FC923;
--rt:0deg;
--vw:68vw;
}
@font-face{
   font-family: Gasoek;
   src: url("/fonts/Gasoek-Heavy.otf");
}

@font-face{
   font-family: DejaVuSans;
    src: url("/fonts/dejavu-sans-webfont.woff2");
}

@font-face {
    font-family: Bricolage;
    src: url("bier/fonts/BricolageGrotesque-Bold.woff2");
    font-weight: Bold;
}


@font-face {
    font-family: 'DM Sans';
    src: url("bier/fonts/DMSans[opsz,wght].woff2");
}

@font-face {
  font-family: 'Quicksand';
  src: url('paula/fonts/Quicksand.woff2') format('woff2');
}

@font-face {
  font-family: 'Fraunces';
  src: url('zine/fonts/Fraunces.ttf');
}
@font-face {
  font-family: 'Mallows';
  src: url('paula/fonts/Mallow.woff2') format('woff2');
}


* {
  scrollbar-color: var(--text) var(--bg);
  scroll-behavior: smooth;}
html {
background:var(--green)
}
body {
margin:10px; 
overflow:hidden;
display: grid;
grid-template-columns:30vw 70vw;gap:0;
font-family:DejaVuSans, system-ui;
font-size:1.25rem;
}
header {
position:relative;
height:calc(100vh - 20px);
overflow:hidden;
background: repeating-linear-gradient( -45deg, var(--text), var(--text) 20px, white 20px, white 100px );
}
#me {
position:absolute;
margin-top:-150px;
right:-10px;
}
header::before {

content:"Willkommen!";
display: inline-block;
  background-color: white;
  padding: 10px;
  border-radius: 10px 10px 0px 10px;
box-shadow:10px 10px;
 position: relative;
top:10%;left:2vw;
animation:10s float ease-out infinite;
z-index:2
}

main {
background:var(--bg);
padding:2vw;
height:calc(100vh - 20px);
overflow-y:scroll; overflow-x:hidden;
width:calc(100% - 20px);
box-sizing:border-box
}


h1:not(section h1) {
white-space: nowrap;
text-transform:uppercase;
font-size:calc( var(--vw) / 14.25);
text-align:center;
margin-top:0;
margin-bottom:0
}
h1 ~ small {
font-size:2rem;
text-align:right;
display:block
}

h1 {
font-family:Gasoek, system-ui;
font-size:calc( var(--vw) / 19);
}
h2 {
font-size:calc( var(--vw) / 22);
}
h3 {
font-size:2rem;
font-weight:600;font-family:Gasoek
}

img {
max-width:100%
}

a {
color:var(--text);
text-decoration:none;
border-bottom:5px solid }


a:hover, .skillz a {
border-bottom:none }
mark {
background:var(--bg);
}

.flex {
display:grid;
grid-template-columns: repeat(2, 1fr);
gap:2rem
}

.drei {
grid-template-columns: repeat(3, 1fr);
}
.vier {
grid-template-columns: repeat(4, 1fr);
}

.schrift {
font-size:3rem;
}
.schrift p{
margin-top:0}
.proj summary img {
object-fit:cover;
aspect-ratio:1/1;
background:var(--yellow)
}
.proj summary {
list-style:none;
cursor:pointer
}

.proj summary:has(img)::before, .cta::after  {
    content:"";
display:block;
width: 4rem;
height: 4rem;
background-color: var(--text);
clip-path: polygon(0 0, 0 100%, 100% 50%);
margin-bottom:-2rem;
}

.proj h2 {
margin-top:0;
}
.cta::after {
height:2rem; width:2rem;
position:absolute;
right:2rem;
top:calc(50% - 1rem)

}
.proj[open] summary:has(img)::before  {
   clip-path: polygon(100% 0, 0 0, 50% 100%);
}
.proj[open] summary img{
float:left;
margin-right:2rem
}
.proj[open] {
 grid-column: 1 / span 3;
position:relative;
padding-bottom:2rem
}

.proj summary img:hover, .ill img:hover {
box-shadow: 10px 10px;
}
.proj[open] summary img  {
width:25%;
aspect-ratio:1/1.25
}

.ill img{
aspect-ratio:1/1;
object-fit:cover

}
.promo {
width:150px;height:150px;
position:absolute;
top:0;
object-fit:contain;
right:-50px;
z-index:0
}
.intro {
align-self:end;
}
.brief, .cta, .intro {
background:var(--green);
padding:2rem;
border:none
}
.brief{margin-left:calc(25% + 2rem);
}
.cta {
background:var(--orange);
position:relative
}
.cta:hover, .skillz a:hover img {
box-shadow:10px 10px;
border-bottom:none
}

.skillz a {
aspect-ratio:1/1;
display:block;
}
.skillz {
width:70%;
grid-template-columns: repeat(3, 1fr);
padding:15% 15% 10% 5%;
}
.skillz a {
--rt:10deg;
position:relative;
}
.skillz a, .float {
animation:10s float ease-out infinite;
}
@keyframes float {
	0% {
		transform: translatey(0px)  rotate(var(--rt));
	}
	50% {
		transform: translatey(-2vmin) rotate(calc(var(--rt) * 1.5));
	}
	100% {
		transform: translatey(0px) rotate(var(--rt));
	}
}
.skillz a:nth-of-type(1) {
top:50%;

}
.skillz a:nth-of-type(2) {
right:10%
}
.skillz a:nth-of-type(3) {
left:50%;top:10%
}

.skillz a:nth-of-type(4), 
.skillz a:nth-of-type(5) { 
left:110%
}

.skillz a:nth-of-type(5) { 
bottom:50%
}

.skillz a:nth-of-type(6) { 
top:70%;
left:40%
}

.skillz a:nth-of-type(7) { 
left:140%;
bottom:-20%

}

.skillz a:nth-of-type(8) { 
right:80%
}
.skillz a:nth-of-type(2n) {
--rt:0deg;
}

.skillz a:nth-of-type(3n) {
--rt:10deg;
}

.skillz a:nth-of-type(3n - 1) {
--rt:-10deg;
}


footer {
background:var(--text);
color:var(--bg);
position:absolute;
bottom:10px;
left:10px;
width:30vw;
height:130px;
padding:2rem;
box-sizing:border-box;
text-align:right;
line-height:2
}
footer a {
color:var(--bg);
}

.ill input {
position: absolute;
  width: 0;
  height: 0;
}
.ill label {
  cursor: pointer;
}
.ill label:has(input:checked) {
grid-column-end: span 2;}

.ill input:checked ~ img {
aspect-ratio:unset;
 }
fieldset {
all:unset}
.reverse {
display:flex;
flex-direction:column-reverse
}

@media (max-width: 900px) {
/* Nicht mobile-first -- mögen jenen, die Bewerbungen auf dem Handy einsehen, den ersten Stein werfen*/
body {
--vw:150vw;
display:flex;
flex-direction:column;
overflow-y:scroll
}

main {
width:calc(100vw - 20px);
box-sizing:border-box;
padding:20px;
overflow:hidden;
height:auto
}

header {
max-height:50vh;
aspect-ratio:2/1
}
#me {
position: absolute;
height:100vh;
width:auto;right:-10px
}
footer {
position:static;
width:100%;
}
footer {
height:min-content
}

h1:not(section h1) {
white-space: break-spaces;
}
.proj[open] summary img {
width:100%;
aspect-ratio:auto
}
.brief {
margin-left:0
}

.ill {
grid-template-columns: repeat(2, 1fr);
}
.drei:has(.proj) {
display:block}
.proj summary {position:relative;z-index:1}
.proj h2 {
z-index:0;
top:2REM
}
.promo {
display:none}
}
@media (max-width:1200px) {
.flex:not(.drei) {
display:block
}
.cta {
display:block;
margin:2rem 0}
}