/* =========================================================
   JULE BOSCH — Website
   Farben, Typografie und Layout nach Design-Vorlage (Keynote)
   ========================================================= */

:root{
  --beige: #d9c7c1;
  --beige-dark: #c9b3ac;
  --blue: #1c22e2;
  --olive: #565a38;
  --ink: #1a1a1a;
  --white: #ffffff;

  --font-display: "Luckiest Guy", "Comic Sans MS", sans-serif;
  --font-body: "Outfit", "Segoe UI", sans-serif;
}

*{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

body{
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--beige);
  -webkit-font-smoothing: antialiased;
}

img{ max-width: 100%; display: block; }

a{ color: inherit; text-decoration: none; }

:focus-visible{
  outline: 3px solid var(--blue);
  outline-offset: 3px;
}

/* ---------- Wellen-Unterstreichung (wiederkehrendes Design-Element) ---------- */
.wave-under{
  position: relative;
  display: inline-block;
  padding-bottom: 0;
}
.wave-under::after{
  content: "";
  position: absolute;
  left: -0.02em;
  right: -0.02em;
  bottom: -0.02em;
  height: 0.55em;
  background-color: var(--blue);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 24' preserveAspectRatio='none'%3E%3Cpath d='M0 16 C 6 6, 12 24, 20 15 C 26 8, 32 22, 40 12 C 48 4, 54 20, 62 17 C 70 14, 76 3, 84 13 C 92 21, 98 9, 106 15 C 113 20, 118 5, 126 12 C 132 17, 136 10, 140 14 L140 24 L0 24 Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 24' preserveAspectRatio='none'%3E%3Cpath d='M0 16 C 6 6, 12 24, 20 15 C 26 8, 32 22, 40 12 C 48 4, 54 20, 62 17 C 70 14, 76 3, 84 13 C 92 21, 98 9, 106 15 C 113 20, 118 5, 126 12 C 132 17, 136 10, 140 14 L140 24 L0 24 Z'/%3E%3C/svg%3E");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  z-index: -1;
}

/* Hero-Namen: eigene Wellenzahl je Wort (5 bei JULE, 7 bei BOSCH) */
.hero-name--left::after{
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%2024'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0%2014%20C%205.6%205.0,%2012.4%2018.5,%2020.0%2017.1%20C%2025.6%2010.0,%2032.4%2016.0,%2040.0%2013.0%20C%2045.6%204.0,%2052.4%2019.0,%2060.0%2017.5%20C%2065.6%2011.0,%2072.4%2015.5,%2080.0%2013.2%20C%2085.6%207.0,%2092.4%2017.5,%20100.0%2016.4%20L100%2024%20L0%2024%20Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%2024'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0%2014%20C%205.6%205.0,%2012.4%2018.5,%2020.0%2017.1%20C%2025.6%2010.0,%2032.4%2016.0,%2040.0%2013.0%20C%2045.6%204.0,%2052.4%2019.0,%2060.0%2017.5%20C%2065.6%2011.0,%2072.4%2015.5,%2080.0%2013.2%20C%2085.6%207.0,%2092.4%2017.5,%20100.0%2016.4%20L100%2024%20L0%2024%20Z'/%3E%3C/svg%3E");
}
.hero-name--right::after{
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20140%2024'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0%2014%20C%205.6%206.0,%2012.4%2018.0,%2020.0%2016.8%20C%2025.6%2011.0,%2032.4%2015.5,%2040.0%2013.2%20C%2045.6%205.0,%2052.4%2018.5,%2060.0%2017.1%20C%2065.6%2010.0,%2072.4%2016.0,%2080.0%2013.0%20C%2085.6%204.0,%2092.4%2019.0,%20100.0%2017.5%20C%20105.6%2011.0,%20112.4%2015.5,%20120.0%2013.2%20C%20125.6%207.0,%20132.4%2017.5,%20140.0%2016.4%20L140%2024%20L0%2024%20Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20140%2024'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0%2014%20C%205.6%206.0,%2012.4%2018.0,%2020.0%2016.8%20C%2025.6%2011.0,%2032.4%2015.5,%2040.0%2013.2%20C%2045.6%205.0,%2052.4%2018.5,%2060.0%2017.1%20C%2065.6%2010.0,%2072.4%2016.0,%2080.0%2013.0%20C%2085.6%204.0,%2092.4%2019.0,%20100.0%2017.5%20C%20105.6%2011.0,%20112.4%2015.5,%20120.0%2013.2%20C%20125.6%207.0,%20132.4%2017.5,%20140.0%2016.4%20L140%2024%20L0%2024%20Z'/%3E%3C/svg%3E");
}

/* ---------- Header / Nav ---------- */
.site-header{
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--beige);
  padding: 1.75rem clamp(1.25rem, 5vw, 4rem) 1rem;
  border-bottom: 1.5px solid var(--ink);
}
.nav{
  display: flex;
  justify-content: flex-end;
  gap: clamp(1.5rem, 4vw, 3rem);
  font-size: 1.05rem;
}
.nav a{
  transition: opacity 0.15s ease;
}
.nav a:hover{ opacity: 0.6; }

/* ---------- Hero ---------- */
.hero{
  position: relative;
  min-height: min(92vh, 780px);
  display: grid;
  grid-template-columns: 1fr minmax(240px, 38vw) 1fr;
  align-items: center;
  padding: 2rem clamp(1.25rem, 6vw, 5rem) 0;
  gap: 1.5rem;
}
.hero-name{
  position: relative;
  z-index: 2;
  font-family: var(--font-display);
  font-weight: normal;
  color: var(--white);
  text-shadow: 0 3px 0 rgba(0,0,0,0.08);
  font-size: clamp(3rem, 9vw, 7rem);
  line-height: 0.9;
  letter-spacing: 0.02em;
}
.hero-name--left{ justify-self: end; }
.hero-name--right{ justify-self: start; }

.hero-photo{
  position: static;
  align-self: end;
  justify-self: center;
  width: 100%;
  max-width: 700px;
  height: auto;
  filter: drop-shadow(0 18px 30px rgba(0,0,0,0.22));
}

@media (max-width: 760px){
  .hero{
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    min-height: auto;
    padding-top: 3rem;
    padding-bottom: 3rem;
    overflow: visible;
  }
  .hero-name--left, .hero-name--right{ justify-self: center; }
  .hero-name--left{ order: 1; }
  .hero-photo{
    position: static;
    transform: none;
    order: 2;
    width: min(70vw, 320px);
    max-height: none;
  }
  .hero-name--right{ order: 3; }
}

/* ---------- About (blauer Bereich) ---------- */
.about{
  background: var(--blue);
  color: var(--white);
  padding: clamp(3rem, 8vw, 6rem) clamp(1.25rem, 6vw, 5rem);
}
.about-inner{
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}
.lede{
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  margin: 0;
  font-weight: 500;
}
.bubble-line{
  font-family: var(--font-display);
  font-weight: normal;
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  margin: 0;
  line-height: 1.2;
  letter-spacing: 0.01em;
}
.bubble-inline{
  font-family: var(--font-display);
  font-weight: normal;
  letter-spacing: 0.01em;
}
.body-text{
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  line-height: 1.6;
  margin: 0;
  max-width: 65ch;
}

/* ---------- Projekte ---------- */
.projekte{
  padding: clamp(3rem, 8vw, 6rem) clamp(1.25rem, 6vw, 5rem);
}
.section-title{
  display: block;
  text-align: center;
  font-family: var(--font-display);
  font-weight: normal;
  color: var(--white);
  text-shadow: 0 3px 0 rgba(0,0,0,0.08);
  font-size: clamp(2rem, 5vw, 3rem);
  letter-spacing: 0.02em;
  margin: 0 auto 3.5rem;
  width: fit-content;
  padding-bottom: 0.16em;
}
.section-title::after{
  height: 0.28em;
  bottom: -0.02em;
  z-index: 0;
}
.projekte-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(2rem, 5vw, 4rem);
  max-width: 1100px;
  margin: 0 auto;
}
a.project-card{
  cursor: pointer;
  transition: transform 0.18s ease;
}
a.project-card:hover{
  transform: translateY(-4px);
}

.project-card__media{
  aspect-ratio: 4 / 5;
  border-radius: 4px;
  box-shadow: 10px 12px 0 var(--white), 10px 12px 0 1px rgba(0,0,0,0.05);
  overflow: hidden;
  background: var(--beige-dark);
  margin-bottom: 1.25rem;
}
.project-card__media img{ width: 100%; height: 100%; object-fit: cover; }
.project-card__media--olive{
  background: var(--olive);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.project-card__media--empty{
  display: flex;
  align-items: center;
  justify-content: center;
}
.project-card__media--empty::before{
  content: "Bild einfügen";
  font-size: 0.9rem;
  opacity: 0.5;
}
.bubble-line--small{
  color: var(--white);
  font-size: clamp(2.4rem, 5vw, 3.4rem);
}
.project-card__label{
  font-size: 1.05rem;
  line-height: 1.4;
  margin: 0;
}

/* ---------- Kontakt / Footer ---------- */
.kontakt{
  position: relative;
  background: var(--beige);
  padding: clamp(3.5rem, 10vw, 7rem) clamp(1.25rem, 6vw, 5rem) 4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.25rem;
  text-align: center;
}
.kontakt-link{
  font-family: var(--font-display);
  font-weight: normal;
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  color: var(--white);
  text-shadow: 0 3px 0 rgba(0,0,0,0.08);
  letter-spacing: 0.01em;
  padding-bottom: 0.16em;
}
.kontakt-link::after{
  height: 0.28em;
  bottom: -0.02em;
  z-index: 0;
}
.legal-links{
  position: absolute;
  right: clamp(1.25rem, 6vw, 5rem);
  bottom: 1.5rem;
  display: flex;
  gap: 1.25rem;
}
.legal-link{
  font-size: 0.9rem;
  opacity: 0.75;
}
.legal-link:hover{ opacity: 1; }