/* ==========================================================================
   Puzzle-Kante (Desktop + Mobile Optimierung)
   ========================================================================== */

/* 1. Header-Abschluss */
#header {
  border-bottom: none !important;
  overflow: visible !important;
  position: relative !important;
  z-index: 500;
}

/* 2. Container für den SVG-Trennstreifen */
.puzzle-slant-container {
  position: absolute !important;
  top: 0%;
  left: 0;
  width: 100%;
  height: 80px;
  z-index: -1;
  pointer-events: none;
  overflow: visible;
	background-color:#fff;
}

/* Bei geöffnetem mobilen Menü ausblenden */
body.is-menu-open .puzzle-slant-container {
  display: none !important;
}

/* 3. Rotierter SVG-Track (Desktop) */
.puzzle-slant-container .rotated-track {
  position: absolute;
  top: 0px;
  left: -20%;
  width: 140%;
  height: 320px;
  transform: rotate(3.5deg);
  transform-origin: center center;
}

.puzzle-slant-container .rotated-track svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

/* 4. Schattenwurf des herausgelösten Puzzleteils */
.xxxpuzzle-slant-container .puzzle-piece {
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.35));
}

/* 5. Folgeinhalt (Hero / Container) */
#container,
.mod_article,
.hero-section {
  position: relative;
  z-index: 1;
}

body {
  overflow-x: hidden;
}

@media (max-width: 1024px) {
	.puzzle-slant-container {
    height: 0px;
  }
  .puzzle-slant-container .rotated-track {
    top: -130px;
  }
}
/* ==========================================================================
   MOBILE OPTIMIERUNG (Smartphones & Tablets < 768px)
   ========================================================================== */
@media (max-width: 768px) {
  
  /* Gesamthöhe der Kante halbieren, damit das Hero-Bild sichtbar bleibt */
  .puzzle-slant-container {
    height: 0px;
    top:40%;
  }

  /* SVG-Track verkleinern & Puzzleteil kompakter skalieren */
  .puzzle-slant-container .rotated-track {
    top: -100px;
    left: -30%;
    width: 160%;
    height: 280px;
    transform: rotate(1.8deg) scale(0.85); /* Etwas flachere Neigung & kleineres Teil */
  }

  .xxxpuzzle-slant-container .puzzle-piece {
    filter: drop-shadow(0 5px 8px rgba(0, 0, 0, 0.3)); /* Zarterer Schatten mobil */
  }
}

/* Sehr kleine Displays (< 480px) */
@media (max-width: 480px) {
  .puzzle-slant-container {
    height: 00px;
  }

  .puzzle-slant-container .rotated-track {
    top: -100px;
    left: -45%;
    width: 176%;
    transform: rotate(5.5deg) scale(0.75);/* Noch kompakter für kompakte Handys */
  }
}