@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

:root {
  --standard-font: black;
  --hintergrund-gelb: #fff600;
}

body {
    margin: 0;
    font-family: 'Montserrat';
    overflow-x: hidden;
}

h1 {
    font-size: 8em;
    font-weight: 800;
}

h2 {
    font-size: 4.94em;
    font-weight: 700;
}

h3 {
    font-size: 3.1em;
    font-weight: 500;
}

p {
    font-size: 1.93em;
}

/*Navigation*/

.nav {
    position: absolute;
    top: 5dvh;
    right: 5dvw;
    z-index: 10;
    width: 100dvw;
}

/* Hamburger Button */
.nav-toggle {
  display: none;
  font-size: 2em;
  cursor: pointer;
  color: var(--standard-font);
}

/* Menü standardmäßig sichtbar */
.nav-list {
  list-style: none;
  display: flex;
  justify-content: right;
  align-items: center;
  gap: 4dvw;
}

ul:not(.nav-list) {
  list-style: none;
  display: flex;
  justify-content: right;
  align-items: center;
}

ul a {
    text-decoration: none;
    color: var(--standard-font);
    list-style-type: none;
    margin-left: 4dvw;
    font-size: 1.5em;
    }

.kontakt-button {
    background-color: black;
    border-radius: 500px;
    padding: 4% 7%;
    color: #fff600;
    border: 2px solid transparent;
    transition: all 0.4s ease;
}

.kontakt-button:hover {
  background-color: transparent;
  color: var(--standard-font);
  border: 2px solid var(--standard-font);
}

.hover-underline-animation {
display: inline-block;
position: relative;
color: var(--standard-font);
}
 
.hover-underline-animation::after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: var(--standard-font);
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
}

.hover-underline-animation:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

@media (max-width: 768px) {
    html, body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

  .nav-toggle {
  display: block;
  position: fixed;
  top: 1rem;
  right: 1rem;
  font-size: 2rem;
  background: none;
  border: none;
  color: var(--standard-font);
  z-index: 100;
  cursor: pointer;
}

.nav-close {
  display: none;
  position: fixed;
  top: 1rem;
  right: 1rem;
  font-size: 3rem;
  line-height: 1;
  background: none;
  border: none;
  color: var(--standard-font);
  z-index: 101;
  cursor: pointer;
}

  .nav-list {
  position: fixed;
  top: 0;
  left: 0;
  right: 0; /* NEU */
  bottom: 0; /* optional für Höhe */
  width: auto; /* NEU: verhindert Überlauf */
  height: 100vh;
  background-color: var(--hintergrund-gelb);
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  z-index: 99;
  text-align: center;
}

  .nav-list.active {
    display: flex;
  }

  .nav-list li {
    width: auto;
    margin: 0.5rem 0;
    text-align: center;
    justify-content: center;
  }

  .nav-list a {
  display: inline-block;
  padding: 1.5rem 2rem;
  font-size: 1.5em;
  text-decoration: none;
  color: var(--standard-font);
  margin: 0 auto; /* zentriert */
  width: auto;     /* verhindert linkes Kippen */
  text-align: center;
}

  .nav-list a:not(.kontakt-button)::after {
  content: "";
  display: block;
  margin: 0.5rem auto 0 auto;
  width: 60%;
  height: 1px;
  background: rgba(0, 0, 0, 0.2);
}

  .kontakt-button {
    background: transparent;
    color: var(--standard-font);
    border: 2px solid var(--standard-font);
    border-radius: 500px;
    padding: 0.8rem 2rem;
    font-size: 1rem;
    margin: 2rem auto 0 auto;
    display: inline-block;
    text-align: center;
    transition: none;
  }
}

@media (min-width: 769px) {
  .hover-underline-animation::after {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: var(--standard-font);
    transform-origin: bottom right;
    transition: transform 0.25s ease-out;
  }

  .hover-underline-animation:hover::after {
    transform: scaleX(1);
    transform-origin: bottom left;
  }
}


/*Hero*/

.hero {
    position: relative;
    height: 100dvh;
    width: 100dvw;
    background: url('/images/hero/gelb-mit-rauschen.webp') no-repeat center center;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    
}

.hero h1 {
    margin: 0;
    padding-left: 5dvw;
}

.hero .black-box-1,
.hero .black-box-2 {
    position: absolute;
    background: black;
    z-index: 1;
}

/* Linker Strich oben */
.hero .black-box-1 {
    top: 5dvh;
    left: 5dvw;
    width: 15px;
    height: 60px;
}

/* Kleiner horizontaler Strich */
.hero .black-box-2 {
    top: 90dvh;
    left: 5dvw;
    width: 60px;
    height: 15px;
}

.hero-bild {
    position: absolute;
    bottom: -300px;
    right: 10dvw;
    height: 600px;
    width: auto;
    border-radius: 2vw;
    z-index: 2;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.6);
}

@media (max-width: 768px) {

    .hero {
        height: 60dvh;
    }

    .hero h1 {
        font-size: 4em;
        
    }

    h2 {
        font-size: 2.47em;
    }

    h3 {
        font-size: 1.53em;
    }

    p {
        font-size: 1.53em;
    }

    .hero-bild {
        height: 50dvh;
        position: absolute;
        bottom: -35dvh;
        left: 50%;
        transform: translateX(-50%);
        padding-left: 0;
    }

    .black-box-1,
    .black-box-2 {
        visibility: hidden;
    }
}

/*Main*/

.main {
    text-align: center;
    overflow-x: hidden;
}



.willkommen {
    padding: 10dvh 10dvw 5dvh 10dvw;
    text-align: left;
}

@media (max-width: 768px) {
  .willkommen {
    margin-top: 30dvh;
    text-align: center;

  }
}

/*Portfolio*/
.portfolio {
    padding: 0;
    background: url(/images/portfolio/portfolio-hintergund.webp);
    background-size: cover
}

.bilder-wrapper {
  width: 60dvw;
  margin: 0 auto;
}

.bilder-grid-row {
  display: flex;
  justify-content: space-between; /* verteilt den verbleibenden Platz */
  align-items: stretch;
  margin-bottom: 1dvw;
}

/* Gemeinsamer Bildstil */
.bilder-grid-row img {
  height: auto;
  object-fit: cover;
  border-radius: 1vw;
  display: block;
  flex-shrink: 0;
}

/* Hochformat → exakt 33% */
.bilder-grid-row img[src*="grid_h_"] {
  flex: 0 0 32%;
  max-width: 32%;
}

/* Querformat → exakt 65% */
.bilder-grid-row img[src*="grid_q_"] {
  flex: 0 0 66%;
  max-width: 66%;
}

@media (max-width: 768px) {
  .bilder-wrapper {
    width: 70vw;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 2dvh; /* gleichmäßiger Abstand */
  }

  .bilder-grid-row {
    all: unset; /* neutralisiert das Flex-Verhalten */
    display: contents; /* lässt alle Bilder direkt in der Wrapper-Flexspalte erscheinen */
  }

  .bilder-grid-row img {
    width: 100%;
    height: auto;
    object-fit: cover;
    flex: none;
    max-width: 100%;
    border-radius: 2vw;
  }


  /* Sehr wichtig: Flexwerte zurücksetzen auch für Hoch-/Querformat */
  .bilder-grid-row img[src*="grid_h_"],
  .bilder-grid-row img[src*="grid_q_"] {
    flex: none;
    max-width: 100%;
  }
}

.portfolio a {
  display: inline-block;
  background-color: black;
  border-radius: 500px;
  padding: 1% 2%;
  color: #fff600;
  border: 2px solid transparent;
  transition: all 0.4s ease;
  text-decoration: none;
  margin-top: 10dvh;
  margin-bottom: 10dvh;
  font-size: 1.21em;
}

@media (max-width: 768px) {
    .portfolio a {
  display: inline-block;
  background-color: black;
  border-radius: 500px;
  padding: 5% 5%;
  color: #fff600;
  border: 2px solid transparent;
  transition: all 0.4s ease;
  text-decoration: none;
  margin-top: 8dvh;
  margin-bottom: 8dvh;
  font-size: 1.53em;
}
}

.portfolio-videos a {
      display: inline-block;
  background-color: black;
  border-radius: 500px;
  padding: 1% 2%;
  color: #fff600;
  border: 2px solid transparent;
  transition: all 0.4s ease;
  text-decoration: none;
  margin-top: 3dvh;
  margin-bottom: 10dvh;
  font-size: 1.21em;
}

@media (max-width: 768px) {
    .portfolio-videos a {
  display: inline-block;
  background-color: black;
  border-radius: 500px;
  padding: 5% 5%;
  color: #fff600;
  border: 2px solid transparent;
  transition: all 0.4s ease;
  text-decoration: none;
  margin-top: 8dvh;
  margin-bottom: 8dvh;
  font-size: 1.53em;
}
}

.portfolio a:hover,
.portfolio-videos a:hover {
    background-color: transparent;
  color: var(--standard-font);
  border: 2px solid var(--standard-font);
}

.portfolio-videos video {
  width: 70dvw;
  height: auto;
  display: block;
  margin: 5dvh auto 10dvh auto;
  border-radius: 1vw; /* optional: runde Ecken */
}

/*Kontakt*/

.kontakt {
    background: url(/images/portfolio/portfolio-hintergund.webp);
    background-size: cover;
    padding-bottom: 10dvh;
}

.kontakt-wrapper {
    display: flex;
    width: 70dvw;
    justify-content: center;
    padding: 0 15dvw;
    gap: 5dvw;
    text-align: left;
}

.kontakt img {
    width: 35dvw;
    object-fit: cover;
    border-radius: 1dvw;
}

.kontakt a {
    font-size: 1.93em;
    text-decoration: none;
    color: var(--standard-font);
    line-height: 150%;
}

@media (max-width: 768px) {
    .kontakt-wrapper {
        flex-wrap: wrap;
    }

    .kontakt img {
        width: 70dvw;
        border-radius: 2dvw;
    }

    .kontaktinfo a {
        font-size: 1.93em;
    }
}

.scroll-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background-color: black;
  color: var(--hintergrund-gelb);
  font-size: 1.5rem;
  border: none;
  cursor: pointer;
  z-index: 999;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  transition: background 0.3s ease;
}

.footer {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10dvh 10dvw 5dvh 10dvw;
  text-align: center;
}

.footer a {
  font-size: 1.2em;
  color: black;
  text-decoration: none;
}

.footer-hover-underline-animation {
display: inline-block;
position: relative;
color: black;
}
 
.footer-hover-underline-animation::after {
content: '';
position: absolute;
width: 100%;
transform: scaleX(0);
height: 2px;
bottom: 0;
left: 0;
background-color: black;
transform-origin: bottom right;
transition: transform 0.25s ease-out;
}
 
.footer-hover-underline-animation:hover::after {
transform: scaleX(1);
transform-origin: bottom left;
}

@media (max-width: 768px) {
  .footer {
    flex-direction: column;
    padding: 5dvh 5dvw;
  }
}

.scroll-top:hover {
  background-color: #222;
}


.impressum {
    padding: 10dvw;
}

.impressum-hero {
    position: relative;
    height: 100dvh;
    width: 100dvw;
    background: url('/images/hero/gelb-mit-rauschen.webp') no-repeat center center;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.impressum-hero h1 {
    margin: 0;
    padding-left: 5dvw;
}

.impressum-hero .black-box-1,
.impressum-hero .black-box-2 {
    position: absolute;
    background: black;
    z-index: 1;
}

/* Linker Strich oben */
.impressum-hero .black-box-1 {
    top: 5dvh;
    left: 5dvw;
    width: 15px;
    height: 60px;
}

/* Kleiner horizontaler Strich */
.impressum-hero .black-box-2 {
    top: 90dvh;
    left: 5dvw;
    width: 60px;
    height: 15px;
}

@media (max-width: 768px) {
    .impressum {
    padding: 10dvw;
}

.impressum-hero {
    height: 60dvh;
}

.impressum-hero h1 {
    font-size: 12vw;
  max-width: 90vw;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

}

/*Fotos Seite*/

.fotos-hero {
    position: relative;
    height: 70dvh;
    width: 100dvw;
    background: url('/images/hero/gelb-mit-rauschen.webp') no-repeat center center;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.fotos-hero h1 {
    margin: 0;
    padding-left: 5dvw;
}

.fotos-hero .black-box-1,
.fotos-hero .black-box-2 {
    position: absolute;
    background: black;
    z-index: 1;
}

/* Linker Strich oben */
.fotos-hero .black-box-1 {
    top: 5dvh;
    left: 5dvw;
    width: 15px;
    height: 60px;
}

/* Kleiner horizontaler Strich */
.fotos-hero .black-box-2 {
    top: 60dvh;
    left: 5dvw;
    width: 60px;
    height: 15px;
}

.fotogallerie {
    width: 90%;
    margin-top: 5%;
    display: flex;
    gap: 5px;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
    margin-bottom: 5%;
}

.spalte {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 33%;
}

.foto img {
    width: 100%;
    height: 100%;
}

@media (max-width: 768px) {
  .fotogallerie {
    flex-direction: column;
    align-items: center;
  }

  .spalte {
    width: 70dvw;
  }

.fotos-hero {
    height: 60dvh;
}

.fotos-hero h1 {
    font-size: 12vw;
  max-width: 90vw;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
}