/* =========================================================
   PUZZLE-UNTERSEITE / HEADER
========================================================= */

.hero-section-puzzle{
  padding:28px 0 18px;
}

.puzzle-hero-bar{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:36px;
}

.puzzle-hero-text{
  max-width:720px;
  min-width:0;
}

.hero-topline{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:14px;
}

.hero-topline .hero-subline{
  margin:0;
}

.back-home{
  width:38px;
  height:38px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(0,0,0,0.12);
  border-radius:50%;
  color:#111;
  text-decoration:none;
  transition:0.25s ease;
  flex-shrink:0;
}

.back-home i{
  font-size:0.95rem;
}

.back-home:hover{
  border-color:#111;
}

.hero-section-puzzle h1{
  font-size:clamp(2rem, 4vw, 3.4rem);
  line-height:1;
  margin-bottom:0;
}


/* =========================================================
   PUZZLE ACTIONS
========================================================= */

.puzzle-stage-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:12px;
  flex-wrap:wrap;
}

.difficulty-control{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

.difficulty-button,
.btn-start,
.btn-solution{
  font-weight:300;
  letter-spacing:0.03em;
}

.difficulty-button{
  border:1px solid rgba(0,0,0,0.16);
  background:#fff;
  color:#111;
  padding:10px 14px;
  border-radius:999px;
  font-size:0.84rem;
  line-height:1;
  cursor:pointer;
  transition:0.25s ease;
}

.difficulty-button:hover,
.difficulty-button.is-active{
  border-color:#111;
  background:#111;
  color:#fff;
}

.btn-solution{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border:1px solid rgba(0,0,0,0.16);
  background:#fff;
  color:#111;
  padding:11px 18px;
  border-radius:999px;
  font-size:0.84rem;
  line-height:1;
  cursor:pointer;
  transition:0.25s ease;
}

.btn-solution:hover{
  border-color:#111;
}

.btn-solution.btn-icon,
.btn-solution.btn-sound{
  flex:0 0 44px;
  width:44px;
  min-width:44px;
  height:44px;
  padding:0;
  border-radius:50%;
}

.btn-start{
  border:0;
  background:#111;
  color:#fff;
  padding:14px 28px;
  border-radius:100px;
  cursor:pointer;
  transition:0.25s ease;
}

.btn-start:hover{
  background:#333;
}

.btn-start-small{
  padding:11px 18px;
  font-size:0.84rem;
}

.btn-sound i,
.btn-icon i{
  font-size:1rem;
}

.is-hidden{
  display:none !important;
}


/* =========================================================
   PUZZLE-BÜHNE
========================================================= */

.puzzle-section{
  padding:12px 0 160px;
}

.puzzle-section .container{
  max-width:1320px;
}

.puzzle-area{
  position:relative;
  width:100%;
  min-height:860px;
  background:#fff;
  overflow:visible;
}

.puzzle-board{
  position:absolute;
  left:50%;
  top:0;
  width:100%;
  max-width:1320px;
  aspect-ratio:3 / 2;
  transform:translateX(-50%);
  background:#fff;
  border:1px dashed rgba(0,0,0,0.18);
  overflow:visible;
}

.puzzle-board-preview,
.solution-preview{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  pointer-events:none;
}

.puzzle-board-preview{
  opacity:1;
  transition:opacity 0.8s ease;
}

.puzzle-board-preview.is-hidden{
  opacity:0;
}

.solution-preview{
  opacity:0;
  transition:opacity 0.35s ease;
  z-index:5;
}

.solution-preview.is-visible{
  opacity:0.82;
}

.puzzle-piece{
  position:absolute;
  border:0;
  padding:0;
  margin:0;
  background:transparent;
  appearance:none;
  -webkit-appearance:none;
  cursor:grab;
  touch-action:none;
  user-select:none;
  overflow:visible;
  border-radius:0;
  box-shadow:none;
}

.puzzle-piece:hover,
.puzzle-piece.is-dragging{
  transform:none;
}

.puzzle-piece.is-dragging{
  cursor:grabbing;
  z-index:1000;
}


/* =========================================================
   PUZZLE LOCATION
========================================================= */

.puzzle-location{
  padding:0 0 100px;
}

.puzzle-location-inner{
  max-width:720px;
}

.location-label{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 0 14px;
  font-size:0.78rem;
  text-transform:uppercase;
  letter-spacing:0.12em;
  opacity:0.58;
  font-weight:600;
}

.location-label i{
  font-size:0.9rem;
}

.location-title{
  margin:0;
  font-size:1.05rem;
  line-height:1.7;
  opacity:0.88;
  font-weight:300;
}

.location-links{
  display:flex;
  flex-wrap:wrap;
  gap:22px;
  margin-top:20px;
}

.location-links a{
  color:#111;
  text-decoration:none;
  opacity:0.58;
  transition:opacity 0.25s ease;
}

.location-links a:hover{
  opacity:1;
}

/* =========================================================
   SUCCESS OVERLAY
========================================================= */

.success-overlay{
  position:fixed;
  inset:0;
  z-index:2000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(255,255,255,0.72);
  backdrop-filter:blur(14px);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity 0.3s ease, visibility 0.3s ease;
}

.success-overlay.is-visible{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

.success-box{
  width:min(100%, 520px);
  padding:42px 34px 36px;
  background:#111;
  color:#fff;
  text-align:center;
}

.success-kicker{
  margin:0 0 22px;
  font-size:0.78rem;
  text-transform:uppercase;
  letter-spacing:0.12em;
  opacity:0.58;
}

.success-message{
  margin:0;
  font-size:clamp(1.45rem, 4vw, 2.4rem);
  line-height:1.12;
  font-weight:300;
  letter-spacing:-0.02em;
}

.success-question{
  margin:28px 0 18px;
  opacity:0.72;
}

.success-actions{
  display:flex;
  justify-content:center;
  gap:12px;
}

.success-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:82px;
  padding:11px 20px;
  border:1px solid rgba(255,255,255,0.28);
  border-radius:999px;
  background:transparent;
  color:#fff;
  text-decoration:none;
  font:inherit;
  font-size:0.88rem;
  cursor:pointer;
  transition:0.25s ease;
}

.success-button:hover{
  border-color:#fff;
}

.success-button-primary{
  background:#fff;
  color:#111;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width:991px){

  .puzzle-hero-bar{
    flex-direction:column;
    align-items:flex-start;
    gap:18px;
  }

  .puzzle-stage-actions{
    justify-content:flex-start;
    width:100%;
  }

}


@media (max-width:768px){

  .hero-section-puzzle{
    padding:18px 0 8px;
  }

  .hero-topline{
    gap:10px;
    margin-bottom:10px;
  }

  .back-home{
    width:36px;
    height:36px;
  }

  .hero-section-puzzle h1{
    font-size:clamp(1.65rem, 7vw, 2.3rem);
    line-height:1.05;
  }

  .puzzle-hero-bar{
    gap:12px;
  }

  .puzzle-stage-actions{
    gap:7px;
    margin-top:4px;
  }

  .difficulty-control{
    width:100%;
    gap:6px;
  }

  .difficulty-button{
    flex:1;
    padding:8px 8px;
    font-size:0.76rem;
  }

  .btn-start-small{
    flex:1;
    justify-content:center;
    padding:10px 14px;
    font-size:0.78rem;
  }

  .btn-solution.btn-icon,
  .btn-solution.btn-sound{
    flex:0 0 42px;
    width:42px;
    min-width:42px;
    height:42px;
    padding:0;
    border-radius:50%;
  }

  .puzzle-section{
    padding:0 0 64px;
  }

  .puzzle-area{
    min-height:780px;
  }

  .puzzle-board{
    top:0;
    left:0;
    width:100%;
    max-width:none;
    transform:none;
  }

}


@media (max-width:991px) and (orientation:landscape){

  .hero-section-puzzle{
    padding:16px 0 8px;
  }

  .puzzle-hero-bar{
    gap:10px;
  }

  .puzzle-stage-actions{
    gap:8px;
  }

  .puzzle-section{
    padding:0 0 40px;
  }

  .puzzle-area{
    min-height:660px;
  }

  .puzzle-board{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    max-width:none;
    transform:none;
  }

}


@media (max-width:420px){

  .hero-section-puzzle h1{
    font-size:1.85rem;
  }

  .puzzle-area{
    min-height:720px;
  }

  .difficulty-button{
    font-size:0.74rem;
    padding:8px 6px;
  }

  .btn-start-small{
    width:100%;
    flex:unset;
  }

}