*,
*::before,
*::after {
  box-sizing: border-box
}

html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0
}

ul[role='list'],
ol[role='list'] {
  list-style: none
}

h1,
h2,
h3,
h4,
button,
input,
label {
  line-height: 1.1
}

h1,
h2,
h3,
h4 {
  text-wrap: balance
}

img,
picture,
video {
  max-width: 100%;
  display: block;
  height: auto
}

input,
button,
textarea,
select {
  font: inherit
}

textarea:not([rows]) {
  min-height: 10em
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: normal;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol {
  margin: 0;
  padding: 0;
}


@view-transition {
  navigation: auto;
}


@font-face {
  font-family: "Brockmann";
  src: url('brockmann-medium.woff2') format("woff2");

  font-weight: 500;
  font-style: normal;
}

* {
  box-sizing: border-box;
}

html {
  --bg: rgb(233, 233, 233);
  background-color: var( --bg );
  overflow-x: hidden;
  scroll-behavior: smooth;

  /* color: blue */
  --main-color: oklch(0.452 0.313214 264.052);
  --distance-side: 2rem;
  
  --spring-easing: linear(0, 0.009, 0.035 2.1%, 0.141, 0.281 6.7%, 0.723 12.9%, 0.938 16.7%, 1.017, 1.077, 1.121, 1.13 24.3%, 1.14, 1.15, 1.15, 1.14 29.9%, 1.129 32.8%, 1.051 39.6%, 1.017 43.1%, 0.991, 0.977 51%, 0.974 53.8%, 0.975 57.1%, 0.997 69.8%, 1.003 76.9%, 1.004 83.8%, 1);
  --spring-duration: 0.4s;

  @media (max-width: 600px){
    --distance-side: 1.25rem;
  }

  @media (prefers-color-scheme: dark) {
    --bg: rgb(213, 213, 213);
  }
}

body {
  font-family: "Brockmann", sans-serif;
  font-size: 1.4rem;
  line-height: 1.3;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  margin: var( --distance-side );

  @media (max-width: 600px){
    font-size: 1.2rem;
  }

  cursor: none;

  &.link-hovered{
    cursor: pointer;
  }
}

a {
  cursor: pointer;
  color: var( --main-color );
  text-decoration: underline;
  transition: 0.2s ease-out;

  text-decoration-thickness: 0.1em;
  text-underline-offset: 0.15em;

  &:visited{
    text-decoration-color: green;
  }

  &:hover{
    color: white;
  }

  &:focus {
    outline: 3px solid var( --main-color );
    outline-offset: 0.15em;
  }
}

.visually-hidden:not(:focus):not(:active) {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.small-text{
  font-size: 1.15rem;

  @media (max-width: 600px){
    font-size: 1rem;
  }
}

p{
  max-width: 60ch;
  text-wrap: balance;

}

p + p{
  margin-top: 1lh;
}

section{
  scroll-margin-block-start: 2rem;
}

section + section{
  margin-top: 3lh;
}

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

h1{
  @media (max-width: 600px){
    font-size: 1.65em;
    margin-bottom: 1.5em;
  }
}

h2{
  margin-top: 1lh;
}

ul{
  margin-inline-start: 1em;
  margin-block-start: 1em;
}

header{
  @media (max-width: 600px){
    --cols: 1;
  }
}

footer{
  margin-top: 3lh;
  padding-top: 1lh;
  border-top: 0.1em solid white;

  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: end;

  p{
    max-width: 100%;
  }
}

.webdev{ --color: oklch(0.452 0.2655 32); }
.performance{ --color: oklch(0.452 0.2655 210); }
.maps{ --color: oklch(0.452 0.2655 131.39); }
.audits{ --color: oklch(0.452 0.2655 334.36); }
.trainings{ --color: oklch(0.452 0.2655 90.21); }


.services-cards{
  --cols: 3;
  padding: 0;
  margin-block-start: 2rem;

  display: grid;
  grid-template-columns: repeat( var( --cols ), minmax(0,1fr));
  gap: 1rem;
  list-style: none;

  @supports (display: grid-lanes){
    display: grid-lanes;
    flow-tolerance: 4rem;
  }

  @media (max-width: 1000px){
    --cols: 2;
  }

  @media (max-width: 600px){
    --cols: 1;
  }

  article{
    @media (max-width: 600px){
      margin-inline: -0.5rem;
    }

    a{
      border: 3px solid var( --color, var( --main-color ));
      display: block;
      padding: 1em;
      text-decoration-line: none;

      @media (max-width: 1000px){
        padding: 1rem;
      }

      &:visited{
        h3{
          text-decoration-color: green;
        }
      }

      &:hover{
        color: white;

        p{
          color: currentColor;
        }
      }

      h3{
        margin-bottom: 0.5em;
        text-decoration-line: underline;
        text-decoration-color: var( --color );
        text-decoration-thickness: 0.08em;
        text-underline-offset: 0.15em;

        @media (max-width: 1000px){
          font-size: 1.4rem;
        }
      }

      p{
        color: black;
        transition: 0.2s ease-out;
        font-size: 1.2rem;
        text-wrap: unset;

        @media (max-width: 1000px){
          font-size: 1rem;
        }
      }
    }
  }
}

#portfolio{
  --cols: 3;

  @media (max-width: 1000px){
    --cols: 2;
  }

  @media (max-width: 600px){
    --cols: 1;
  }

  ul{
    list-style: none;
    grid-column: 1 / -1;
    margin-inline-start: 0;

    display: grid;
    grid-template-columns: repeat( var( --cols ), auto);  

    position: relative;

    @media (max-width: 600px){
      margin-inline: -0.5rem;
    }

    &::before{
      content: " ";
      position: absolute;
      width: calc( 100% + var( --distance-side ) * 2 );
      margin-inline: calc( var( --distance-side ) * -1 );
      top: var( --top );
      height: calc( var( --height ) + 2px );
      transition: var( --spring-duration ) var( --spring-easing );
      z-index: -1;
      translate: 0 -2px;
    }

    &:hover{
      &::before{
        background-color: var( --main-color );
      }
    }

    li{
      border-bottom: 2px solid currentColor;

      grid-column: 1 / -1;
      display: grid;
      grid-template-columns: subgrid;

      position: relative;

      &.header{
        position: sticky;
        top: 0;
        background-color: var( --bg );
        z-index: 2;
        margin-bottom: 3px;

        div{
          padding-block: 0.5rem;
          padding-inline: 0.5rem;
        }

        @media (max-width: 1000px){
          display: none;
        }
      }

    }


    a{
      grid-column: 1 / -1;
      display: grid;
      grid-template-columns: subgrid;
      
      column-gap: 1em;
      row-gap: 0.75rem;
      text-decoration: none;
      padding-block: 1rem;
      padding-inline: 0.5rem;
      margin-block: -1px; /* damit kein abstand zwischen links ist, und cursor nicht switcht */

      &:visited{
        span{
          &::before{
            color: green;
          }
        }
      }

      &:hover{
        /* background-color: blue; */
        color: white;

        span{
          &::before{
            color: pink;
          }
        }
      }

    }

    span{
      display: block;

      &::before{
        display: block;
        text-transform: uppercase;
        font-size: 0.8rem;
        margin-bottom: 0.25rem;
        color: black;
        letter-spacing: 0.03em;
        transition: 0.2s ease-out;

        @media (min-width: 1000px){
          display: none;
        }

        @media (max-width: 600px){
          margin-bottom: 0.05rem;
        }
      }
    }

    .client{
      display: block;

      /*
      @media (max-width: 1000px){
        grid-column-end: span 2;
      }
        */

      &::before{
        content: "client";
      }
    }

    .website{
      &::before{
        content: "url";
      }

      @media (max-width: 1000px){
        display: none;
      }
    }

    .design{
      &::before{
        content: "designed by";
      }
    }
  }
}


#cursor{
  --cursor-size: 1.6rem;
  --cursor-color: yellow;

  position: absolute;
  top: calc( var( --cursor-pos-top ) - var( --cursor-size ) * 0.5 );
  left: calc( var( --cursor-pos-left ) - var( --cursor-size ) * 0.5 );
  width: var( --cursor-size );
  height: var( --cursor-size );
  
  background-color: var( --cursor-color );
  z-index: 100;
  
  pointer-events: none;
  mix-blend-mode: difference;

  .link-hovered:has(a.service-link:hover) &{
    --cursor-color: var( --service-color );
    mix-blend-mode: normal;
  }

  .link-hovered &{
    --border-width: 4px;
    --correction: 0px;

    border-radius: 0;
    top: calc( var( --link-top ) - var( --border-width ) )!important;
    left: calc( var( --link-left ) - var( --border-width ) - var( --correction ) )!important;
    width: calc( var( --link-width ) + ( var( --correction ) * 2 ) );
    height: var( --link-height );
    z-index: -1;
    border: var( --border-width ) solid var( --cursor-color );
    box-sizing: content-box;

    transition-property: width, height, top, left, border-radius, background-color;
    transition-duration: 0.25s;
    transition-timing-function: ease-out;
  }

  :has(#portfolio li a:hover) &{
    --correction: var( --distance-side );
  }
}

::selection {
  color: hotpink;
  background: midnightblue;
}

.service-details ::selection { background-color: var( --color ); }

nav{
  margin-block: 1.25rem 2.5rem;
  margin-inline: calc( var( --distance-side ) * -1 );
  background-color: var( --main-color );
  color: white;
  padding: 0.5em var( --distance-side );

  position: sticky;
  top: 0;

  a{
    color: currentColor;
    text-underline-offset: 0.21em;
    text-decoration-color: white;
  }

  ul{
    margin: 0;
    padding: 0;
    list-style: none;

    display: flex;
    gap: 0.5rem;

    li:not(:last-child){
      &::after{
        content: "/";
        padding-left: 0.5rem;
      }
    }
  }

  .service-details &{
    background-color: var( --color );
  }
}

button{
  padding: 0;
  font: inherit;
  border: none;
  border-radius: 0;
  background-color: transparent;
  color: currentColor;
}

.portrait{
  float: left;

  width: 300px;
  max-width: 45vw;
  margin-block-end: 0.5rem;
  margin-inline-end: 1rem;
}

.about{
  .intro{
    /* display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: 1rem; */
    max-width: 60ch;

    p{
      margin-block-start: 0.5lh;
    }

    &::after{
      content: "";
      clear: both;
      display: table;
    }
  }
}

h2{
  clear: both;
}

.privacy{
  table{
    margin-block-start: 1lh;
    border-collapse: collapse;

    th, td{
      border: 1px solid currentColor;
      padding: 0.5em;
    }
  }
}