/* pages/galerie/galerie.css
   Hinweis: Vollständige Datei */

:root{
  --gal-border: rgba(255,255,255,.10);
  --gal-muted: var(--text-muted, rgba(255,255,255,.72));
}

.gal-page{width:100%}

.gal-page{
  background:
    radial-gradient(900px 520px at 10% 5%, rgba(0,140,255,.14), transparent 60%),
    radial-gradient(820px 520px at 90% 12%, rgba(170,80,255,.14), transparent 62%),
    radial-gradient(820px 520px at 78% 88%, rgba(0,220,190,.10), transparent 62%),
    radial-gradient(820px 520px at 18% 82%, rgba(255,170,0,.10), transparent 64%),
    radial-gradient(820px 520px at 60% 40%, rgba(255,70,170,.08), transparent 62%);
  border-radius:22px;
  padding:0;
}
.muted{color:var(--gal-muted)}
.small{font-size:.92rem}

.card{
  border-radius:18px;
  border:1px solid var(--gal-border);
  background:rgba(255,255,255,.04);
  box-shadow:0 12px 30px rgba(0,0,0,.22);
  overflow:hidden;
  backdrop-filter:saturate(120%) blur(8px);
}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:1rem 1.1rem;border-bottom:1px solid rgba(255,255,255,.10)}
.card-head h2{margin:0;font-size:1.08rem}
.card-body{padding:1rem 1.1rem 1.1rem}

.pill{
  font-size:.85rem;padding:.28rem .6rem;border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  color:var(--text,#fff);
  display:inline-flex;align-items:center;gap:.45rem;
  background:rgba(255,255,255,.06);
}
.p-blue{border-color:rgba(0,140,255,.28);background:linear-gradient(135deg, rgba(0,140,255,.14), rgba(255,255,255,.04))}
.p-teal{border-color:rgba(0,220,190,.28);background:linear-gradient(135deg, rgba(0,220,190,.14), rgba(255,255,255,.04))}
.p-violet{border-color:rgba(170,80,255,.28);background:linear-gradient(135deg, rgba(170,80,255,.14), rgba(255,255,255,.04))}
.p-amber{border-color:rgba(255,170,0,.28);background:linear-gradient(135deg, rgba(255,170,0,.14), rgba(255,255,255,.04))}
.p-rainbow{border-color:rgba(255,255,255,.16);background:linear-gradient(135deg, rgba(0,140,255,.14), rgba(170,80,255,.12), rgba(0,220,190,.10), rgba(255,170,0,.10), rgba(255,70,170,.10))}

.gal-hero{
  margin-bottom:1.25rem;
  background:
    radial-gradient(900px 520px at 12% 18%, rgba(0,140,255,.22), transparent 55%),
    radial-gradient(780px 520px at 86% 16%, rgba(170,80,255,.18), transparent 55%),
    radial-gradient(820px 520px at 74% 86%, rgba(0,220,190,.14), transparent 55%),
    radial-gradient(820px 520px at 18% 88%, rgba(255,170,0,.12), transparent 60%),
    linear-gradient(135deg, rgba(255,255,255,.06), rgba(0,0,0,.10));
}
.gal-hero-inner{padding:1.1rem 1.1rem;display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.gal-kicker{display:inline-flex;align-items:center;gap:.5rem;font-size:.9rem;padding:.25rem .6rem;border-radius:999px;background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.12)}
.gal-hero h1{margin:.55rem 0 .2rem;font-size:1.75rem}
.gal-hero-badges{display:flex;gap:.55rem;flex-wrap:wrap}
.gal-hero-actions{display:flex;gap:.75rem;flex-wrap:wrap}

.gal-sections{display:flex;flex-direction:column;gap:1.25rem}

.gal-cards{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:1rem;
}

.gal-card{
  display:flex;
  flex-direction:column;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background:linear-gradient(135deg, rgba(255,255,255,.05), rgba(0,0,0,.12));
  overflow:hidden;
  text-decoration:none;
  color:inherit;
  transition:transform .18s ease, border-color .18s ease, background .18s ease;
}
.gal-card:hover{transform:translateY(-2px);border-color:rgba(0,140,255,.22);
  background:linear-gradient(135deg, rgba(0,140,255,.12), rgba(170,80,255,.10), rgba(0,220,190,.08), rgba(255,170,0,.08), rgba(255,70,170,.08));
}
.gal-card-img{position:relative;aspect-ratio:16/10;overflow:hidden}
.gal-card-img img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.02);transition:transform .35s ease}
.gal-card:hover .gal-card-img img{transform:scale(1.06)}
.gal-card-overlay{position:absolute;left:.7rem;bottom:.7rem}
.gal-card-body{padding:.8rem .85rem .85rem}
.gal-card-title{font-weight:700;line-height:1.2}
.gal-card-meta{margin-top:.25rem;font-size:.92rem}

.gal-grid{margin-top:1.25rem}
.gal-thumbs{
  display:grid;
  grid-template-columns:repeat(5, minmax(0, 1fr));
  gap:.8rem;
}
.gal-thumb{
  border:0;
  padding:0;
  background:transparent;
  cursor:pointer;
  border-radius:16px;
  overflow:hidden;
  outline:none;
  border:1px solid rgba(255,255,255,.10);
  transition:transform .18s ease, border-color .18s ease;
}
.gal-thumb:hover{transform:translateY(-2px);border-color:rgba(0,220,190,.24);box-shadow:0 10px 26px rgba(0,220,190,.10)}
.gal-thumb img{width:100%;height:100%;display:block;object-fit:cover;aspect-ratio:1/1}

.gal-alert{
  display:flex;gap:.65rem;align-items:flex-start;
  padding:.75rem .85rem;border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  margin:0 0 1rem;
}
.gal-alert.err{background:rgba(255,70,170,.10);border-color:rgba(255,70,170,.18)}

.gal-modal{position:fixed;inset:0;display:none;z-index:9999}
.gal-modal[aria-hidden="false"]{display:block}
.gal-modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.66)}
.gal-modal-panel{
  position:relative;
  max-width:min(980px, calc(100vw - 24px));
  max-height:calc(100vh - 24px);
  margin:12px auto;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(15,18,26,.92);
  overflow:hidden;
  box-shadow:0 30px 70px rgba(0,0,0,.55);
  display:flex;
  flex-direction:column;
}
.gal-modal-top{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.75rem .9rem;
  border-bottom:1px solid rgba(255,255,255,.10);
}
.gal-modal-title{display:flex;align-items:center;gap:.55rem;font-weight:650}
.gal-modal-actions{display:flex;gap:.45rem;align-items:center}
.gal-modal-body{padding:.85rem;display:flex;align-items:center;justify-content:center;flex:1;min-height:0}
.gal-modal-body img{max-width:100%;max-height:100%;border-radius:14px;border:1px solid rgba(255,255,255,.10);background:rgba(0,0,0,.18)}
.gal-modal-bottom{padding:.75rem .9rem;border-top:1px solid rgba(255,255,255,.10);display:flex;justify-content:flex-end}

@media (max-width:1100px){
  .gal-cards{grid-template-columns:repeat(2, minmax(0, 1fr))}
}
@media (max-width:700px){
  .gal-cards{grid-template-columns:1fr}
  .gal-thumbs{grid-template-columns:repeat(3, minmax(0, 1fr))}
}


/* Buntere Section-Highlights */
.gal-section:nth-of-type(1){background:linear-gradient(135deg, rgba(0,140,255,.10), rgba(255,255,255,.04));}
.gal-section:nth-of-type(2){background:linear-gradient(135deg, rgba(0,220,190,.10), rgba(255,255,255,.04));}
.gal-section:nth-of-type(3){background:linear-gradient(135deg, rgba(170,80,255,.10), rgba(255,255,255,.04));}
.gal-section{position:relative}
.gal-section::before{content:'';position:absolute;inset:0;pointer-events:none;border-radius:18px;background:linear-gradient(135deg, rgba(255,255,255,.05), transparent 40%);}

/* Slideshow: große Vor/Zurück-Buttons */
.gal-modal-body{position:relative}
.gal-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:48px;height:48px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.28);
  color:var(--text,#fff);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  backdrop-filter:saturate(120%) blur(6px);
  box-shadow:0 12px 30px rgba(0,0,0,.35);
}
.gal-prev{left:12px}
.gal-next{right:12px}
.gal-nav:hover{background:rgba(255,255,255,.10);border-color:rgba(0,140,255,.22)}
@media (max-width:640px){
  .gal-nav{width:42px;height:42px}
  .gal-prev{left:8px}
  .gal-next{right:8px}
}