/* css/style.css */
:root{
  --bg:#f0f4f8;
  --text:#111;
  --muted:#333;
  --card:#fff;
  --ring:rgba(14,165,233,.35);
  --radius:12px;
  --shadow:0 20px 60px rgba(0,0,0,.18);
}

*{box-sizing:border-box}

body{
  margin:0;
  font-family:Arial, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background:var(--bg);
  color:var(--text);
}

/* ------- Galerie ------- */
.gallery{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:16px;
  padding:16px;
}
.gallery-item{display:flex;flex-direction:column;cursor:pointer}
.gallery-item img{
  width:100%;
  aspect-ratio:3/4;
  object-fit:cover;
  border:4px solid #fff;border-radius:8px;
  box-shadow:0 4px 12px rgba(0,0,0,.10);
  transition:transform .25s ease, box-shadow .25s ease;
  -webkit-user-drag:none; user-select:none;
}
.gallery-item:hover img{
  transform:translateY(-2px) scale(1.03);
  box-shadow:0 10px 24px rgba(0,0,0,.14)
}
.gallery-item .caption{
  text-align:center;margin-top:8px;color:#333;font-size:.95rem;font-weight:600;
  user-select:none;
}

/* ------- Modal Overlay ------- */
.modal{
  display:none; /* via JS -> flex */
  position:fixed; inset:0;
  background:rgba(0,0,0,.70);
  align-items:center; justify-content:center;
  z-index:1000;
}

/* ------- Modal Card ------- */
.modal-content{
  position:relative;
  background:var(--card);
  border-radius:var(--radius);
  padding:16px;
  width:min(1100px,80vw);
  max-height:92vh;
  overflow:auto;
  box-shadow:var(--shadow);
  touch-action:pan-y; /* vertikal scrollen, horizontale Swipes möglich */
}

@media (min-width:768px){
  .modal-content{
    max-width:calc(100vw - 160px);
    overflow:visible; /* damit die außenliegenden Pfeile sichtbar sind */
  }
}

.modal-body{
  display:grid;
  grid-template-columns:minmax(220px,360px) 1fr;
  gap:20px; align-items:start;
}

/* Bild im Modal */
.modal-body img{
  max-width:360px; width:100%; height:auto;
  object-fit:cover; border-radius:10px; display:block;
  -webkit-user-drag:none; user-select:none;
}

/* Textspalte */
.modal-details{display:grid;gap:12px;min-width:0;text-align:left}
#modal-name{
  margin:0 0 8px 0; text-align:left;
  font-size:clamp(26px,3.6vw,40px); line-height:1.2;
  font-weight:800; color:#111; user-select:none;
}
.modal-details .details{
  margin:0 0 6px 0;
  color:#222;
  font-size:clamp(18px,2.4vw,24px);
  line-height:1.6;
  font-weight:400;      /* Standard: normal */
  user-select:none;
}
.modal-details .details strong{
  font-weight:600;      /* nur Label fett */
}
#detail-info{
  white-space:pre-line; margin-top:14px; color:#333;
  font-size:clamp(18px,2.4vw,24px); line-height:1.6; font-weight:400;
  user-select:none;
}

.close{
  position:absolute; top:10px; right:12px;
  font-size:28px; cursor:pointer; user-select:none;
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(229,231,235,.8);
  width: 38px; height: 38px; border-radius: 50%;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 4px 12px rgba(0,0,0,.12);
}

/* -------- Pfeile -------- */
.nav-btn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  font-size:44px;
  width:75px; height:75px;
  border-radius:50%;
  border:1px solid rgba(229,231,235,.8);
  background: rgba(255,255,255,.96);
  display:flex; align-items:center; justify-content:center;
  z-index:20;
  box-shadow:0 8px 20px rgba(0,0,0,.12);
  user-select:none;
}
.nav-btn:hover{opacity:1}
.nav-btn:focus-visible{outline:3px solid var(--ring); outline-offset:2px}
.nav-btn.prev{left:-100px}
.nav-btn.next{right:-100px}

/* Mobile: einspaltig + Pfeile im Bildbereich */
@media (max-width:767px){
  .modal-body{grid-template-columns:1fr}
  .modal-body img{max-width:100%}
  .nav-btn.prev{left:8px}
  .nav-btn.next{right:8px}
  .modal-content{width:94vw; max-width:94vw;}
}

body.no-select, body.no-select *{
  user-select:none !important;
  -webkit-user-select:none !important;
  -moz-user-select:none !important;
  -ms-user-select:none !important;
  -webkit-user-drag:none !important;
  -webkit-touch-callout:none !important;
}

@media (prefers-reduced-motion:reduce){
  .gallery-item img{transition:none}
}