/* =====================================================================
   JOP-ART – Jonglier-Zeichnungen als zarte Hintergrund-Deko
   (Zeichnungen aus ZACK CON 2024, eingefärbt je Abschnitt wie im Flyer)
   Entfernen: <link ... jop-deko.css> und die <div class="jop-deko">-Blöcke löschen
   ===================================================================== */
.content-container { position: relative; }
.content-container > .container { position: relative; z-index: 1; }

.jop-deko {
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none; overflow: hidden;
}
.jop-deko img {
  position: absolute; height: auto; opacity: .18;
  user-select: none; -webkit-user-drag: none;
}

/* Tablet / Handy: kleiner, blasser, einzelne Elemente ausblenden */
@media (max-width: 991px) {
  .jop-deko img { opacity: .11; }
  .jop-deko .d-desk { display: none; }
}

/* ---------- JOP-ART (lila) ---------- */
#about-section .jd-hula   { width: clamp(150px, 17vw, 270px); right: 1%;  top: 38%; transform: rotate(-4deg); }
#about-section .jd-ball   { width: clamp(40px, 4vw, 70px);   left: 4%;   top: 9%; }

/* ---------- Offener Prozess (rot/orange) ---------- */
#services-section .jd-diabolo { width: clamp(110px, 13vw, 220px); right: 4%;  top: 6%;  transform: rotate(18deg); }
#services-section .jd-staebe  { width: clamp(220px, 30vw, 480px); left: -4%;  top: 63%; transform: rotate(-8deg); }

/* ---------- Organisierender Prozess (magenta) ---------- */
#portfolio-section .jd-devil { width: clamp(200px, 28vw, 440px); right: -4%; top: 30%; transform: rotate(-10deg); }
#portfolio-section .jd-keule { width: clamp(70px, 8vw, 130px);   left: 3%;   top: 84%; transform: rotate(32deg); }
#portfolio-section .jd-ball  { width: clamp(36px, 3.5vw, 60px);  left: 9%;   top: 6%; }

/* ---------- Ohne Perfektion (blau) ---------- */
#resume-section .jd-keule  { width: clamp(180px, 24vw, 380px); right: -6%; top: 38%; transform: rotate(-24deg); }
#resume-section .jd-ball1  { width: clamp(38px, 3.8vw, 64px);  right: 7%;  top: 4%; }
#resume-section .jd-ball2  { width: clamp(44px, 4.4vw, 74px);  right: 2%;  top: 52%; }
#resume-section .jd-ball3  { width: clamp(34px, 3.2vw, 56px);  left: 4%;   top: 84%; }

/* ---------- Kurs (gelb/orange) ---------- */
#kurs-section .jd-teller  { width: clamp(80px, 9vw, 150px);   right: 4%;  top: 12%; transform: rotate(16deg); }
#kurs-section .jd-ball    { width: clamp(36px, 3.6vw, 60px);  left: 6%;   top: 40%; }
#kurs-section .jd-rola    { width: clamp(200px, 24vw, 380px); right: -2%; top: 87%; transform: rotate(3deg); }

/* ---------- Über mich (grün) ---------- */
#blog-section .jd-stuhl   { width: clamp(70px, 7.5vw, 120px); right: 2%;  top: 44%; }
#blog-section .jd-diabolo { width: clamp(100px, 11vw, 190px); left: 2%;   top: 50%; transform: rotate(-15deg); }
#blog-section .jd-ball    { width: clamp(36px, 3.6vw, 60px);  right: 11%; top: 82%; }

/* ---------- Kontakt (dunkelgrün) ---------- */
#contact-section .jd-keule { width: clamp(70px, 8vw, 130px);  right: 4%;  top: 14%; transform: rotate(-25deg); }
#contact-section .jd-ball  { width: clamp(36px, 3.6vw, 60px); left: 5%;   top: 70%; }

/* JOP-ART-Logo in den Navigations-Kacheln: gefülltes Logo wirkt sonst zu groß */
.page-nav-icon img[src*="jop-art-logo_2"] { width: 100%; padding: 18%; box-sizing: border-box; }