/* ========= einfache Variablen ========= */
:root{
  --hero-gutter: clamp(16px, 4vw, 24px);   /* Rand rund um die Box */
  --nav-pad: clamp(12px, 2.5vw, 20px);     /* Navi-Innenabstand */
  --content-gap-bottom: 64px;              /* Abstand Content zum Bild-Unterrand */
}

/* ========= HERO ========= */
.hero{
  background: #F0EBE6;
  padding: var(--hero-gutter);             /* gleichmäßiger Rand zum Viewport */
}

/* Box = 100vh - 2*gutter, mit Corner Radius; alles andere liegt darüber */
.hero__box{
  position: relative;
  height: calc(100vh - (2 * var(--hero-gutter)));
  border-radius: 20px;
  overflow: hidden;
  isolation: isolate; /* macht eine eigene Stacking-Context-Ebene -> z-index wird zuverlässig */
}



/* Hintergrundbild füllt die Box */
.hero__image{
  position: absolute;
  inset: 0;                 /* hier ok, kurz & eindeutig */
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* dunkles Overlay via Pseudo-Element – weniger Markup */
.hero__box::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,.42) 0%,
    rgba(0,0,0,.45) 35%,
    rgba(0,0,0,.50) 100%
  );
  pointer-events: none;
  z-index: 1;
}


/* ========= CONTENT ========= */
/* unten ausgerichtet, horizontal zentriert, 40px über Bild-Unterkante */
.hero__content{
  position: absolute;
  left: 0; right: 0;
  bottom: var(--content-gap-bottom);
  z-index: 2;
  text-align: center;
  padding: 0 clamp(16px, 6vw, 200px); /* NEU: links/rechts dynamisch */
}

.hero__title{
  color:#F0EBE6;
  text-shadow: 0 4px 18px rgba(0,0,0,.1);
  margin: 0;
  /* nutzt deine globalen h1-Styles */
}

/* ========= STICKER ========= */
/* Sticker – KEINE Keyframes, Animation macht JS (Web Animations API) */
.hero-sticker{
  position: absolute;   /* Bezug: .hero__box */
  left: 0; top: 0;
  width: clamp(56px, 7.5vw, 92px);
  height: auto;
  transform-origin: 50% 50%;
  will-change: transform, opacity;
  visibility: hidden;   /* bis Ziel gemessen ist */
  pointer-events: none;
  z-index: 3;
  opacity: 0;
}


/* ========= Featured ========= */
:root {
  --cream: #F0EBE6;
  --text: #2d2b29;
}

.featured {
  position: relative;
  background: var(--cream);
  padding-block: clamp(40px, 8vh, 80px);
}

@media (max-width: 900px){
  .featured {
    padding-block: clamp(20px, 5vh, 40px); /* ↓ deutlich kleiner */
  }
}

.featured__pin {
  position: relative;
  height: 100vh;
  overflow: hidden;
  display: grid;
  place-items: center;
}

.featured__grid {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;                          /* zentriert den Inhalt */
  padding: 0 clamp(20px, 5vw, 40px);       /* Abstand links/rechts */
  box-sizing: border-box;                  /* Padding IN der Breite */
  display: grid;
  grid-template-columns: 1fr minmax(0, 720px);
  gap: clamp(24px, 5vw, 80px);
  align-items: center;
  color: var(--text);
}

/* ===== Unterstreichung unter dem h2 ===== */
.featured__title {
  position: relative;
  display: inline-block; /* sorgt dafür, dass Breite = Textbreite */
  line-height: 1.1;
}

/* Die eigentliche Linie */
.featured__title::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;              /* Abstand unter dem Text */
  width: 100%;               /* exakt Textbreite */
  height: 12px;              /* Höhe deiner Doppellinie (anpassen falls anderes SVG) */
  background: url("../img/striche/double-underline_black.svg") no-repeat left bottom / 100% 100%;
  /* bei Retina ultra-scharf: */
  image-rendering: -webkit-optimize-contrast;
}


/* Bild-Container */
.featured__media {
  position: relative;
  width: 100%;
  height: min(62vh, 560px);
  overflow: visible;
}

.featured__item {
  position: absolute;
  inset: 0;
}

/* Bilder übereinander */
.featured__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 22px;
  transform-origin: center center;
  transition:none;          /* <— WICHTIG: GSAP übernimmt, keine CSS-Transitions */
  will-change: transform;
}

/* Anfangszustand: untere Bilder sind kleiner und unten versetzt */
.featured__img:nth-child(1) {
  z-index: 3;
  transform: scale(1) translateY(0);
}
.featured__img:nth-child(2) {
  z-index: 2;
  transform: scale(0.75) translateY(8vh);
}
.featured__img:nth-child(3) {
  z-index: 1;
  transform: scale(0.75) translateY(8vh);
}

/* --- Unterstreichung Links (unter dem h2) --- */
.featured__u {
  display: block;
   width: 100%;
  height: 20px;
  margin-top: 6px;
  color: var(--text);
}

#featured-u-path {
  stroke-width: 2.2; /* etwas feiner */
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
}

/* --- Sticker im Bildbereich --- */
.featured__media{ position: relative; } /* hast du schon, nur zur Sicherheit */
/* Container pro Bild+Sticker */
.featured__item {
  position: absolute;
  inset: 0;
}
.featured__sticker {
  position: absolute;
  width: clamp(60px, 8vw, 90px);
  height: auto;
  transform-origin: center center;
  will-change: transform, opacity;
  pointer-events: none;
  z-index: 4;
}

/* Projekt 1 */
.featured__item:nth-child(1) .featured__sticker {
  top: 12%;
  left: -8%;
  transform: rotate(-12deg);
}

/* Projekt 2 */
.featured__item:nth-child(2) .featured__sticker {
  bottom: -6%;
  right: 10%;
}

/* Projekt 3 */
.featured__item:nth-child(3) .featured__sticker {
  top: 65%;
  left: -4%;
}

/* ======= Mobile-Anpassungen (nur Layout, nicht Stacking!) ======= */
@media (max-width: 900px) {
  .featured__pin {
    height: 100vh; /* weiterhin „Scene“ für den Scroll-Effekt */
    overflow: hidden;
    display: grid;
    place-items: center;
    padding-inline: clamp(16px, 6vw, 28px);
  }

  .featured__grid {
    width: 100%;
    max-width: 640px;
    grid-template-columns: 1fr;   /* Text über Bild */
    gap: 24px;
    padding: 0;
  }

  .featured__copy {
    text-align: left;             /* oder center, wenn du magst */
  }

  .featured__media {
    width: 100%;
    height: min(55vh, 420px);     /* etwas kompakter auf Mobile */
  }
}


/* ==================== STATEMENT SECTION ==================== */
.statement {
  padding: clamp(60px, 12vh, 200px) 0;
}

.statement__inner {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 clamp(24px, 4vw, 48px);
  position: relative;
  text-align: center;
}

/* Underline SVG container */
/* Linie-Container */
.statement__underline {
  margin-top: 0px;
  color: #161616;
  display: flex;
  justify-content: center;
}

/* SVG — hier wird die Gesamtbreite geregelt */
.underline-svg {
  display: block;
  width: min(580px, 64%);   /* 👈 schmaler gemacht: vorher 740px */
  height: 100%;
  margin: 0 auto;
}

/* Pfad-Styling */
#underline-path {
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  shape-rendering: geometricPrecision;
}

/* Sticker (Heart) */
.statement__sticker {
  --sticker-size: clamp(36px, 5vw, 72px);
  position: absolute;
  width: var(--sticker-size);
  height: auto;
  right: clamp(8vw, 14%, 16%);
  top: calc(100% - 175px); /* aligned roughly with the italic line */
  transform-origin: center;
  opacity: 0;
}

/* Pop animation for sticker */
@keyframes sticker-pop {
  0% { transform: scale(0.5) rotate(-10deg); opacity: 0; }
  60% { transform: scale(1.1) rotate(5deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

/* Triggered when in view */
.statement.is-visible #underline-path {
  stroke-dashoffset: 0;
}

.statement.is-visible .statement__sticker {
  animation: sticker-pop 0.8s cubic-bezier(.25,.9,.25,1) 1s forwards;
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  #underline-path { transition: none !important; stroke-dashoffset: 0 !important; }
  .statement__sticker { animation: none !important; opacity: 1 !important; }
}


/* === Ribbon Section === */
/* Basis-Ribbon (deins) */
.ribbon{
  position: relative;
  width: 100%;
  margin-block: 7rem;
  overflow: visible;
  z-index: 5;
  left: -20px;
  margin-bottom: 200px;
}

@media (max-width: 900px){
  .ribbon {
  margin-bottom: 80px;
  }
}

@media (max-width: 500px){
  .ribbon {
  margin-bottom: 30px;
  }
}

.ribbon__inner{
  position: relative;
  width: 120vw;
  transform: rotate(-8deg);
  background: #0E0E0E;
  padding-block: clamp(8px, 1.5vw, 16px);
  overflow: hidden;
}

.marquee{ position:relative; overflow:hidden; }
.marquee__track{
  display:inline-flex; align-items:center; white-space:nowrap;
  gap: clamp(8px, 2vw, 24px);
  padding-inline: clamp(8px, 1vw, 16px);
  will-change: transform;
}

.marquee__track h3{
  margin:0;
  color:#fff;
}
.marquee__track .h3-highlight{
  color:#fff; white-space:nowrap;
}

/* Sichtbare Inline-Icons */
.ribbon .marquee__track .ribbon__icon{
  display:inline-block !important;
  position: static !important;
  opacity: 1 !important;
  transform: none !important;
  width: clamp(26px, 3.6vw, 44px) !important;
  height: auto !important;
  vertical-align: middle;
  filter: drop-shadow(0 3px 8px rgba(0,0,0,.25));
}

/* Falls es noch alte .ribbon__sticker-Regeln gibt: neutralisieren */
.ribbon .marquee__track .ribbon__sticker{
  all: unset;                /* löscht alte conflicting Styles */
  display:inline-block;
  width: clamp(26px, 3.6vw, 44px);
  height:auto;
  vertical-align: middle;
}

@media (max-width: 800px){
  .ribbon__inner{ width:130vw; transform: rotate(-7deg); }
  .marquee__track{ gap: clamp(14px, 4vw, 28px); }
}



/* ===== ABOUT TEASER SECTION ===== */
.about-teaser {
  position: relative;
  margin-top: 0.2 rem;                     /* dichter am Ribbon */
  padding-block: clamp(3rem, 7vh, 5rem);    /* weniger Weißraum */
  overflow: visible;
}

.about-teaser__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding-inline: min(8vw, 64px);
}

/* Bühne hält die Höhe; Content zentriert; Bilder liegen absolut darüber */
.about-teaser__stage {
  position: relative;
  min-height: clamp(420px, 56vh, 640px);    /* bei ~1200px ≈ 560px */
  display: grid;
  place-items: center;
}

.about-teaser__photos {
  position: absolute;
  inset: 0;
  pointer-events: none;                     /* klickt nichts weg */
}

/* Bilder starten EXAKT in der Mitte (keine CSS-Offsets mehr) */
.about-teaser__item {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);         /* nur zentrieren */
  border-radius: 18px;
  overflow: hidden;
  will-change: transform, opacity;
}

.about-teaser__item img {
  display: block;
  width: 24vw;                               /* kleiner als vorher */
  max-width: 360px;
  min-width: 220px;
  height: auto;
  user-select: none;
  pointer-events: none;
}

/* Sticker-Varianten: kleiner, ohne Radius, kein Crop, mit Shadow */
.about-teaser__item--sticker {
  border-radius: 0;
  overflow: visible;
}
.about-teaser__item--sticker img {
  width: clamp(68px, 9vw, 110px);
  max-width: none;
  min-width: 0;
}

/* Text in der Mitte der Bühne */
.about-teaser__content {
  text-align: center;
  max-width: 680px;
  margin: 0 auto;
  top: -100px;
}

.about-teaser__btn{
  font-family: Epilogue;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  margin-top: 12px;
  font-weight: 800;                /* bold */
  color: #000000;                  /* gleiche Farbe wie Text */
  text-decoration: none;           /* eigene Unterstreichung */
  padding-bottom: 8px;             /* Platz für die Doppellinie */

}

/* Label als Bezug für die Unterstreichung */
.about-teaser__label{
  line-height: 1.2;
}

.btn-underline{
  width: 80%;
  height: 12px;
}

.btn-underline path{
  /* Liniendefinition */
  stroke: currentColor;
  fill: none;
  stroke-width: 1px;
  stroke-linecap: round;

  /* Draw-Effekt Basis */
  stroke-dasharray: 240;    /* muss der ungefähren Pfadlänge entsprechen */
  stroke-dashoffset: 0;
}

/* Hover: Linie „zeichnet sich weg“ (nach rechts) */
.about-teaser__btn:hover .btn-underline path{
  stroke-dashoffset: 240;   /* vollständig wegerasen */
  transition: stroke-dashoffset .45s ease;

}

/* Rückwärts-Animation */
@keyframes drawback{
  from { stroke-dashoffset: 240; }
  to   { stroke-dashoffset: 0; }
}

/* Mobile */
@media (max-width: 900px){
  /* Fotos etwas kleiner als bisher */
  .about-teaser__item img {
    width: clamp(180px, 32vw, 260px);
    max-width: 260px;
    min-width: 0;
  }

  /* Sticker deutlich kleiner */
  .about-teaser__item--sticker img {
    width: clamp(48px, 12vw, 80px);
  }

  .about-teaser__stage {
    min-height: clamp(380px, 70vh, 520px);
  }
}