/* ======================================
   Abschnitt-Intro
   ====================================== */
.p-intro{
  color:#ddd;
  text-align:center;
  margin:0 auto 16px;
  max-width: 900px;
}

/* ======================================
   Filter-Buttons
   ====================================== */
.p-filter{
  display:flex; flex-wrap:wrap; gap:10px;
  justify-content:center;
  margin: 16px auto 24px;
}
.p-filter-btn{
  padding:10px 14px;
  border-radius:10px;
  background: var(--bg);
  border:1px solid rgba(255,255,255,.12);
  color:#fff; cursor:pointer;
  transition: transform .2s, border .2s, box-shadow .25s, background .3s;
}
.p-filter-btn:hover{
  transform: translateY(-1px) scale(1.02);
  background: linear-gradient(145deg, #0b1220 0%, var(--accent) 100%);
  box-shadow:0 8px 22px rgba(42,95,167,0.35);
  border:1px solid rgba(42,95,167,.75);
}
.p-filter-btn.active{
  background: linear-gradient(145deg, #0b1220 0%, var(--accent) 100%);
  border:1px solid rgba(42,95,167,.9);
}

/* ======================================
   Grid
   ====================================== */
.p-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 18px;
}
.p-grid + h2,
h2:has(+ .p-grid),
#main h2 {
  text-align: center;
}


/* ======================================
   Portfolio Items – rahmenlos & ohne Caption
   ====================================== */
.p-item{
  background: transparent !important;
  border: none !important;
  border-radius: 12px;
  overflow: visible;
  box-shadow: none !important;
  padding: 0 !important;
  transition: none;
}
.p-item a{
  display:block;
  border: none !important;
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.p-item img,
.p-item video,
.p-item iframe{
  display:block; width:100%; height:auto;
  border-radius: 12px;
}

/* Hover-Effekt: Zoom + Glow */
.p-item a:hover{
  transform: scale(1.03);
  box-shadow:
    0 8px 20px rgba(0, 0, 0, 0.35),
    0 0 20px rgba(18, 55, 95, 0.7),
    0 0 40px rgba(18, 55, 95, 0.6);
  border: none !important;
  outline: none !important;
}

/* Captions deaktivieren */
.p-item figcaption{
  display:none !important;
  padding:0; margin:0; border:0;
}

/* ======================================
   Lightbox / Modal
   ====================================== */
.lb-backdrop{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.85);
  z-index: 10000;
  padding: 24px;
}
.lb-backdrop.open{ display:flex; }

.lb-content{
  position: relative;
  max-width: min(92vw, 1200px);
  max-height: 90vh;
  background: #0b0f1a;
  border:1px solid rgba(255,255,255,.15);
  border-radius:12px;
  overflow:hidden;
  box-shadow: 0 10px 34px rgba(0,0,0,.6);
}
.lb-inner{
  width:100%; height:100%;
}
.lb-inner img,
.lb-inner video,
.lb-inner iframe{
  display:block;
  max-width:100%;
  max-height:90vh;
  width:auto; height:auto;
  border-radius:0;
}
.lb-close{
  position:absolute; top:10px; right:10px;
  background: rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.3);
  color:#fff;
  border-radius:8px;
  padding:6px 10px;
  cursor:pointer;
}
.lb-close:focus{
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* Responsiveness */
@media (max-width: 700px){
  .lb-content{
    max-width: 85vw;
    max-height: 82vh;
  }
  .lb-inner img,
  .lb-inner video,
  .lb-inner iframe{
    max-height: 82vh;
  }
}

/* ======================================
   Bewegung reduzieren
   ====================================== */
@media (prefers-reduced-motion: reduce){
  .p-item a{
    transition: none;
  }
  .p-item a:hover{
    transform: none;
    box-shadow: 0 8px 20px rgba(0,0,0,.35);
  }
}

/* ======================================
   Tastatur-Fokus sichtbar machen
   ====================================== */
.p-item a:focus-visible {
  transform: scale(1.03);
  box-shadow:
    0 8px 20px rgba(0, 0, 0, 0.35),
    0 0 20px rgba(18, 55, 95, 0.7),
    0 0 40px rgba(18, 55, 95, 0.6);
  outline: none;
  border: none;
}
.lb-close:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
  box-shadow: 0 0 0 3px rgba(18, 55, 95, 0.65);
}
.lb-inner video:focus-visible,
.lb-inner iframe:focus-visible {
  outline: 3px solid rgba(255,255,255,0.9);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ======================================
   Large-Modus für Touren
   ====================================== */
.lb-backdrop.lbx-large .lb-content {
  max-width: 98vw;
  max-height: 96vh;
}
.lb-backdrop.lbx-large .lb-inner iframe {
  width: 96vw;
  height: 92vh;
  max-width: none;
  max-height: none;
}