/* ═══════════════════════════════════════════════════
   BODOLI auf Weltreise – Galerie und Upload-Formular
   Farben und Schriften folgen dem Theme.
   ═══════════════════════════════════════════════════ */

.wr-gallery,
.wr-form-wrap{
  --wr-black:#0B0906;
  --wr-char:#161208;
  --wr-gold:#C48A2B;
  --wr-gold-lt:#E8C97A;
  --wr-gold-dk:#6B4A10;
  --wr-cream:#F2E8D0;
  font-family:'Jost','Gill Sans MT',sans-serif;
  color:var(--wr-cream);
  max-width:1280px;
  margin:0 auto;
  padding:0 24px;
}

/* ── Raster ─────────────────────────────────────── */

.wr-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:18px;
  margin:48px 0 72px;
}

.wr-item{
  position:relative;
  margin:0;
  aspect-ratio:1/1;
  overflow:hidden;
  cursor:pointer;
  border:1px solid rgba(196,138,43,.18);
  background:var(--wr-char);
  transition:border-color .45s cubic-bezier(.22,1,.36,1),transform .45s cubic-bezier(.22,1,.36,1);
}
.wr-item:hover,
.wr-item:focus-visible{
  border-color:rgba(196,138,43,.55);
  transform:translateY(-4px);
  outline:none;
}

.wr-item img{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
  filter:brightness(.82) saturate(.92);
  transition:filter .55s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1);
}
.wr-item:hover img,
.wr-item:focus-visible img{
  filter:brightness(1) saturate(1);
  transform:scale(1.04);
}

/* Goldene Ecke oben rechts – Wappen-Anklang */
.wr-item::before{
  content:'';
  position:absolute;top:0;right:0;
  width:0;height:0;
  border-style:solid;
  border-width:0 26px 26px 0;
  border-color:transparent rgba(196,138,43,.32) transparent transparent;
  z-index:3;
  transition:border-color .45s ease;
}
.wr-item:hover::before{border-color:transparent var(--wr-gold) transparent transparent;}

.wr-item figcaption{
  position:absolute;left:0;right:0;bottom:0;
  padding:38px 18px 16px;
  background:linear-gradient(to top,rgba(11,9,6,.94) 12%,rgba(11,9,6,.65) 55%,transparent 100%);
  display:flex;flex-direction:column;gap:2px;
  z-index:2;
}
.wr-item .wr-ort{
  font-family:'Cormorant Garamond',Garamond,serif;
  font-size:1.22rem;font-weight:600;
  color:var(--wr-cream);
  line-height:1.2;
}
.wr-item .wr-name{
  font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--wr-gold);
}

.wr-empty{
  text-align:center;
  padding:72px 24px;
  font-family:'Cormorant Garamond',Garamond,serif;
  font-size:1.34rem;font-style:italic;
  color:rgba(242,232,208,.62);
  border:1px solid rgba(196,138,43,.16);
  background:rgba(22,18,8,.5);
}

/* ── Lightbox ───────────────────────────────────── */

.wr-lightbox{
  position:fixed;inset:0;
  background:rgba(11,9,6,.97);
  z-index:99998;
  display:flex;align-items:center;justify-content:center;
  padding:32px;
  opacity:0;transition:opacity .35s ease;
}
.wr-lightbox[hidden]{display:none;}
.wr-lightbox.open{opacity:1;}

.wr-lb-figure{
  margin:0;max-width:min(1100px,92vw);max-height:88vh;
  display:flex;flex-direction:column;align-items:center;gap:18px;
}
.wr-lb-figure img{
  max-width:100%;max-height:74vh;
  object-fit:contain;
  border:1px solid rgba(196,138,43,.3);
}
.wr-lb-figure figcaption{
  text-align:center;max-width:640px;
  font-family:'Jost','Gill Sans MT',sans-serif;
  color:var(--wr-cream);
}
.wr-lb-figure .wr-lb-ort{
  display:block;
  font-family:'Cormorant Garamond',Garamond,serif;
  font-size:1.7rem;font-weight:600;
  margin-bottom:4px;
}
.wr-lb-figure .wr-lb-name{
  display:block;
  font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--wr-gold);margin-bottom:10px;
}
.wr-lb-figure .wr-lb-text{
  display:block;
  font-size:.95rem;line-height:1.65;
  color:rgba(242,232,208,.8);
}

.wr-lightbox button{
  position:absolute;
  background:transparent;border:1px solid rgba(196,138,43,.34);
  color:var(--wr-gold);cursor:pointer;
  width:52px;height:52px;
  font-size:1.9rem;line-height:1;
  display:flex;align-items:center;justify-content:center;
  transition:background .3s ease,border-color .3s ease,color .3s ease;
}
.wr-lightbox button:hover{background:rgba(196,138,43,.14);border-color:var(--wr-gold);color:var(--wr-gold-lt);}
.wr-lb-close{top:28px;right:28px;}
.wr-lb-prev{left:28px;top:50%;transform:translateY(-50%);}
.wr-lb-next{right:28px;top:50%;transform:translateY(-50%);}

/* ── Formular ───────────────────────────────────── */

.wr-form-wrap{padding-top:8px;padding-bottom:80px;}

.wr-form{
  max-width:720px;margin:0 auto;
  background:rgba(22,18,8,.62);
  border:1px solid rgba(196,138,43,.2);
  padding:44px 40px;
}

.wr-field{margin-bottom:26px;display:flex;flex-direction:column;}
.wr-row{display:grid;grid-template-columns:1fr 1fr;gap:20px;}

.wr-form label{
  font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--wr-gold);margin-bottom:9px;
}
.wr-opt{text-transform:none;letter-spacing:.02em;color:rgba(242,232,208,.45);}

.wr-form input[type=text],
.wr-form textarea,
.wr-form input[type=file]{
  background:rgba(11,9,6,.78);
  border:1px solid rgba(196,138,43,.26);
  color:var(--wr-cream);
  padding:13px 15px;
  font-family:'Jost','Gill Sans MT',sans-serif;
  font-size:.95rem;
  width:100%;
  transition:border-color .3s ease,background .3s ease;
}
.wr-form input[type=text]:focus,
.wr-form textarea:focus,
.wr-form input[type=file]:focus{
  outline:none;
  border-color:var(--wr-gold);
  background:rgba(11,9,6,.95);
}
.wr-form textarea{resize:vertical;min-height:88px;line-height:1.6;}

.wr-form input[type=file]{padding:11px 14px;cursor:pointer;}
.wr-form input[type=file]::file-selector-button{
  background:transparent;
  border:1px solid rgba(196,138,43,.4);
  color:var(--wr-gold);
  padding:7px 15px;margin-right:14px;
  font-family:'Jost','Gill Sans MT',sans-serif;
  font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  cursor:pointer;
  transition:background .3s ease,color .3s ease;
}
.wr-form input[type=file]::file-selector-button:hover{background:rgba(196,138,43,.16);color:var(--wr-gold-lt);}

.wr-hint{
  font-size:.72rem;color:rgba(242,232,208,.42);
  margin-top:7px;letter-spacing:.04em;
}

.wr-preview{
  margin-top:16px;
  display:flex;gap:10px;flex-wrap:wrap;
}
.wr-preview img{
  width:calc(33.333% - 7px);
  aspect-ratio:1/1;
  object-fit:cover;
  border:1px solid rgba(196,138,43,.26);
  display:block;
}
.wr-preview:has(img:only-child) img{width:auto;max-width:100%;max-height:280px;aspect-ratio:auto;object-fit:contain;}

/* Honeypot – fuer Menschen unsichtbar */
.wr-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

.wr-consent{
  display:flex;gap:13px;align-items:flex-start;
  margin:8px 0 30px;
  text-transform:none!important;letter-spacing:normal!important;
  font-size:.85rem!important;line-height:1.62;
  color:rgba(242,232,208,.74)!important;
}
.wr-consent input[type=checkbox]{
  margin-top:4px;flex-shrink:0;
  width:17px;height:17px;
  accent-color:var(--wr-gold);cursor:pointer;
}
.wr-consent a{color:var(--wr-gold);text-decoration:underline;text-underline-offset:2px;}

.wr-submit{
  background:linear-gradient(90deg,var(--wr-gold-dk) 0%,var(--wr-gold) 50%,var(--wr-gold-dk) 100%);
  color:var(--wr-black);
  border:none;
  padding:15px 42px;
  font-family:'Jost','Gill Sans MT',sans-serif;
  font-size:.76rem;letter-spacing:.2em;text-transform:uppercase;font-weight:500;
  cursor:pointer;
  transition:filter .3s ease,transform .3s ease;
}
.wr-submit:hover{filter:brightness(1.14);transform:translateY(-1px);}
.wr-submit:disabled{opacity:.55;cursor:wait;transform:none;}

.wr-legal{
  margin-top:22px;
  font-size:.75rem;line-height:1.6;
  color:rgba(242,232,208,.42);
}
.wr-legal a{color:rgba(196,138,43,.85);text-decoration:underline;text-underline-offset:2px;}

/* Rueckmeldungen */
.wr-note{
  max-width:720px;margin:0 auto 28px;
  padding:19px 24px;
  border-left:3px solid var(--wr-gold);
  background:rgba(22,18,8,.75);
  font-size:.93rem;line-height:1.6;
}
.wr-note-ok{border-left-color:var(--wr-gold);}
.wr-note-err{border-left-color:#b4462f;}
.wr-note strong{color:var(--wr-cream);}

/* ── Kleine Bildschirme ─────────────────────────── */

@media(max-width:780px){
  .wr-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;margin:32px 0 52px;}
  .wr-form{padding:30px 22px;}
  .wr-row{grid-template-columns:1fr;gap:0;}
  .wr-lightbox{padding:16px;}
  .wr-lb-close{top:14px;right:14px;width:44px;height:44px;}
  .wr-lb-prev{left:8px;width:42px;height:42px;}
  .wr-lb-next{right:8px;width:42px;height:42px;}
  .wr-lb-figure img{max-height:62vh;}
}

@media(prefers-reduced-motion:reduce){
  .wr-item,.wr-item img,.wr-lightbox,.wr-submit{transition:none!important;}
  .wr-item:hover{transform:none;}
  .wr-item:hover img{transform:none;}
}

/* iOS zoomt in Felder unter 16px hinein – das verhindern wir */
@media(max-width:780px){
  .wr-form input[type=text],
  .wr-form textarea{font-size:16px;}
  .wr-form input[type=file]{min-height:48px;}
  .wr-submit{min-height:48px;width:100%;}
  .wr-consent input[type=checkbox]{width:22px;height:22px;}
  .wr-item figcaption{padding:30px 12px 12px;}
  .wr-item .wr-ort{font-size:1.05rem;}
}