/* ============================================================
   Section-Divider — Wave-Clipping + Bottle-Silhouetten in Next-Section-Farbe.

   Architektur:
     - Obere Section: .section-divider + Modifier --wN (Wellenform via Mask)
       + optional --bottles-left / --bottles-right (::after mit Bottle-Mask).
     - Bottles ::before sitzt in der Upper-Section, ragt knapp ueber die
       Wellenlinie nach oben, gefaerbt in var(--next-bg) (Farbe der
       folgenden Section). Visuell wirkt es als ob die Lower-Section
       durch die Bottle-Form scheint — funktional korrekt fuer solid
       backgrounds. Fuer Gradients/Bilder muesste man auf SVG <mask>
       element-Referenz wechseln.
     - Untere Section: .section-divider-overlap pullt per margin-top
       unter die Welle. Z-Ladder (Upper.z > Lower.z) sorgt dafuer dass
       Upper die Wellenform zuverlaessig zeigt.

   Z-Ladder pro Seite definieren — Reihenfolge der Sections ist
   seitenspezifisch und gehoert in die Page-CSS.
   ============================================================ */

:root {
  --divider-h: 30px;          /* Wellenhoehe konstant in px */
  --divider-overlap: 120px;   /* Ueberlappung lower → upper */
  --divider-bottle-h: 85px;   /* Bottle-Cutout Hoehe */
  --divider-bottle-w: 103px;  /* Bottle-Cutout Breite (entspricht aspect 103/85) */
}

@media (max-width: 720px) {
  :root {
    --divider-h: 22px;
    --divider-overlap: 70px;
    --divider-bottle-h: 60px;
    --divider-bottle-w: 73px;
  }
}

/* Obere Section — 2-Layer-Mask (opak + wave) */
.section-divider {
  position: relative;
  z-index: 2;
  padding-bottom: calc(clamp(5rem, 10vw, 8rem) + 60px) !important;

  -webkit-mask-image: linear-gradient(black, black), var(--divider-wave, linear-gradient(transparent, transparent));
          mask-image: linear-gradient(black, black), var(--divider-wave, linear-gradient(transparent, transparent));
  -webkit-mask-position: top, bottom;
          mask-position: top, bottom;
  -webkit-mask-size:
    100% calc(100% - var(--divider-h)),
    100% var(--divider-h);
          mask-size:
    100% calc(100% - var(--divider-h)),
    100% var(--divider-h);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}

/* Wellen-Varianten — SVG-Pfad beschreibt opake Region oberhalb der Wellenlinie.
   ViewBox 100x30, preserveAspectRatio='none' streckt horizontal mit Section-Breite. */

/* W1 — flach links, dipping rechts */
.section-divider--w1 {
  --divider-wave: url("data:image/svg+xml;utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%2030'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0,0L100,0L100,22C92,18,80,8,65,2L50,0L0,0Z'%20fill='black'/%3E%3C/svg%3E");
}
/* W2 — flach rechts, dipping links */
.section-divider--w2 {
  --divider-wave: url("data:image/svg+xml;utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%2030'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0,0L100,0L70,0C50,4,25,16,0,24L0,0Z'%20fill='black'/%3E%3C/svg%3E");
}
/* W3 — flach links, asymmetrischer Dip rechts */
.section-divider--w3 {
  --divider-wave: url("data:image/svg+xml;utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%2030'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0,0L100,0L100,25C90,20,78,10,62,3L48,0L0,0Z'%20fill='black'/%3E%3C/svg%3E");
}
/* W4 — flach rechts, asymmetrischer Dip links */
.section-divider--w4 {
  --divider-wave: url("data:image/svg+xml;utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%2030'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0,0L100,0L72,0C50,4,25,16,0,26L0,0Z'%20fill='black'/%3E%3C/svg%3E");
}
/* W5 — flach links, sanfter Dip rechts */
.section-divider--w5 {
  --divider-wave: url("data:image/svg+xml;utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%2030'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0,0L100,0L100,24C92,19,80,9,65,2L50,0L0,0Z'%20fill='black'/%3E%3C/svg%3E");
}

/* Bottle-Silhouetten — ::before auf Upper, gefaerbt in var(--next-bg).
   ::before damit Konflikte mit heroes::after vermieden werden.
   Sitzt in der Upper-Section knapp ueber der Wellenlinie und ragt nach oben. */
.section-divider--bottles-left::before,
.section-divider--bottles-right::before {
  content: '';
  position: absolute;
  bottom: var(--divider-h);
  width: var(--divider-bottle-w);
  height: var(--divider-bottle-h);
  background-color: var(--next-bg, transparent);
  -webkit-mask: var(--divider-bottles) no-repeat center / contain;
          mask: var(--divider-bottles) no-repeat center / contain;
  pointer-events: none;
  z-index: 5;
}

.section-divider--bottles-left::before {
  --divider-bottles: url("data:image/svg+xml;utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20103%2085'%3E%3Cg%20fill='black'%20transform='scale(0.6071)'%3E%3Cpath%20d='M14,0L22,0L22,5L24,5L24,46L32,56L32,140L4,140L4,56L12,46L12,5L14,5Z'/%3E%3Cpath%20transform='translate(59,0)'%20d='M2,0Q2,42,22,48L22,118L8,118Q4,118,4,124L4,134Q4,138,8,138L42,138Q46,138,46,134L46,124Q46,118,42,118L28,118L28,48Q48,42,48,0Z'/%3E%3Cpath%20transform='translate(132,0)'%20d='M14,0L22,0L22,5L24,5L24,38Q24,46,30,52Q34,56,34,62L34,140L2,140L2,62Q2,56,6,52Q12,46,12,38L12,5L14,5Z'/%3E%3C/g%3E%3C/svg%3E");
  left: 5%;
}

.section-divider--bottles-right::before {
  --divider-bottles: url("data:image/svg+xml;utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20103%2085'%3E%3Cg%20fill='black'%20transform='scale(0.6071)'%3E%3Cpath%20d='M14,0L22,0L22,5L24,5L24,38Q24,46,30,52Q34,56,34,62L34,140L2,140L2,62Q2,56,6,52Q12,46,12,38L12,5L14,5Z'/%3E%3Cpath%20transform='translate(59,0)'%20d='M8,0Q8,46,16,52L16,118L6,118Q4,118,4,122L4,136Q4,138,6,138L30,138Q32,138,32,136L32,122Q32,118,30,118L20,118L20,52Q28,46,28,0Z'/%3E%3Cpath%20transform='translate(132,0)'%20d='M14,0L22,0L22,5L24,5L24,46L32,56L32,140L4,140L4,56L12,46L12,5L14,5Z'/%3E%3C/g%3E%3C/svg%3E");
  right: 5%;
}

@media (max-width: 720px) {
  .section-divider--bottles-left::before  { left: 3%; }
  .section-divider--bottles-right::before { right: 3%; }
}

/* Untere Section — slidet per margin-top unter die Welle der oberen Section.
   Bewusst KEIN z-index, sodass die Upper (z=2) drueber malt — Lower wird nur
   durch die Mask-Cutouts der Upper sichtbar. */
.section-divider-overlap {
  position: relative;
  margin-top: calc(-1 * var(--divider-overlap));
  padding-top: calc(clamp(4rem, 9vw, 7rem) + var(--divider-overlap)) !important;
}