/* =====================================================================
   Merkliste: Besucher sammeln Lieblingsfotos und laden sie als PDF
   ===================================================================== */

/* ---- Die kleine Schaltfläche auf jedem Bild --------------------------- */
.merk-btn{
  position:absolute; left:8px; bottom:8px; z-index:4;
  width:23px; height:23px; padding:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:1px;
  border:0; border-radius:2px;
  background:rgba(12,12,14,.42);
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  color:rgba(255,255,255,.72);
  cursor:pointer;
  opacity:.55;
  transition:opacity .18s, background .18s, color .18s, transform .18s;
}
.merk-btn:hover{ opacity:1; background:rgba(12,12,14,.72); color:#fff; }
.shot:hover .merk-btn, .mshot:hover .merk-btn{ opacity:.9; }

.merk-btn .zeichen{
  font:400 15px/.78 "Geist Mono","SFMono-Regular",Menlo,monospace;
  display:block;
}
.merk-btn .wort{
  font:400 7.5px/1 "Geist Mono","SFMono-Regular",Menlo,monospace;
  letter-spacing:.04em; display:block;
}

/* gewählt */
.merk-btn.ist-drin{
  opacity:1;
  background:var(--accent, #e4ff00);
  color:#0e0e10;
}
.merk-btn.ist-drin .zeichen{ font-size:13px; }

@media (hover:none){ .merk-btn{ opacity:.8; } }

/* ---- In der Großansicht ----------------------------------------------- */
.merk-lb{
  position:absolute; bottom:14px; left:24px; z-index:6;
  display:flex; align-items:center; gap:9px;
  padding:9px 13px;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(12,12,14,.55);
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  color:#e9e6e2; cursor:pointer;
  font:400 9.5px/1 "Geist Mono","SFMono-Regular",Menlo,monospace;
  letter-spacing:.16em; text-transform:uppercase;
  transition:border-color .2s, background .2s, color .2s;
}
.merk-lb .zeichen{ font-size:15px; line-height:.8; }
.merk-lb:hover{ border-color:var(--accent,#e4ff00); color:#fff; }
.merk-lb.ist-drin{
  background:var(--accent,#e4ff00); border-color:var(--accent,#e4ff00); color:#0e0e10;
}
.merk-lb[hidden]{ display:none; }

@media (max-width:760px){
  /* neben den Blätterflächen wäre er nicht zu treffen */
  .merk-lb{ left:50%; transform:translateX(-50%); bottom:42px; }
}

/* ---- Die Leiste am oberen Rand ---------------------------------------- */
.merk-leiste{
  position:fixed; top:0; left:0; right:0; z-index:60;
  display:flex; align-items:center; justify-content:center; gap:16px;
  padding:7px 16px;
  background:rgba(14,14,16,.86);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid color-mix(in srgb, var(--accent,#e4ff00) 22%, transparent);
  font:400 10px/1 "Geist Mono","SFMono-Regular",Menlo,monospace;
  letter-spacing:.14em; text-transform:uppercase;
  color:#e9e6e2;
  transform:translateY(-100%);
  transition:transform .3s cubic-bezier(.2,.7,.3,1);
}
.merk-leiste.an{ transform:none; }
.merk-leiste .zahl{ color:var(--accent,#e4ff00); }
.merk-leiste button{
  border:0; background:none; padding:0;
  font:inherit; letter-spacing:inherit; text-transform:inherit;
  color:var(--accent,#e4ff00); cursor:pointer;
  border-bottom:1px solid transparent; transition:border-color .2s;
}
.merk-leiste button:hover{ border-bottom-color:currentColor; }
.merk-leiste .weg{ color:#8b8783; }

/* ---- Das Fenster mit der Auswahl -------------------------------------- */
.merk-fenster{
  position:fixed; inset:0; z-index:120;
  display:none; align-items:center; justify-content:center;
  padding:24px;
  background:rgba(8,8,10,.9);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.merk-fenster.auf{ display:flex; }
.merk-blatt{
  width:min(980px,100%); max-height:min(88vh,880px);
  display:flex; flex-direction:column;
  background:#16161a;
  border:1px solid rgba(255,255,255,.09);
  color:#e9e6e2;
}
.merk-kopf{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  padding:20px 22px 14px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.merk-kopf h2{
  margin:0;
  font:400 15px/1.2 "Oswald","Helvetica Neue",sans-serif;
  letter-spacing:.1em; text-transform:uppercase;
}
.merk-kopf .zu{
  border:0; background:none; color:#8b8783; cursor:pointer;
  font:400 18px/1 system-ui,sans-serif; padding:0 2px;
}
.merk-kopf .zu:hover{ color:#e9e6e2; }

.merk-koerper{ overflow:auto; padding:18px 22px; }

.merk-raster{
  display:grid; gap:10px;
  grid-template-columns:repeat(auto-fill,minmax(108px,1fr));
  margin:0 0 22px;
}
.merk-kachel{ position:relative; aspect-ratio:1; background:#0e0e10; }
.merk-kachel img{ width:100%; height:100%; object-fit:cover; display:block; }
.merk-kachel button{
  position:absolute; top:4px; right:4px;
  width:19px; height:19px; padding:0;
  border:0; border-radius:50%;
  background:rgba(10,10,12,.75); color:#fff;
  font:400 11px/1 system-ui,sans-serif; cursor:pointer;
  opacity:0; transition:opacity .15s;
}
.merk-kachel:hover button{ opacity:1; }
@media (hover:none){ .merk-kachel button{ opacity:.85; } }

.merk-leer{
  padding:40px 0; text-align:center; color:#8b8783;
  font:400 11px/1.6 "Geist Mono",monospace; letter-spacing:.1em;
  text-transform:uppercase;
}

/* ---- Wahl der Aufteilung ---------------------------------------------- */
.merk-wahl{
  display:flex; gap:10px; flex-wrap:wrap; align-items:center;
  margin:0 0 20px;
  font:400 9.5px/1 "Geist Mono",monospace; letter-spacing:.12em;
  text-transform:uppercase; color:#8b8783;
}
.merk-wahl label{
  display:inline-flex; align-items:center; gap:7px;
  padding:8px 12px; cursor:pointer;
  border:1px solid rgba(255,255,255,.13);
  color:#c9c5c1; transition:border-color .2s, color .2s;
}
.merk-wahl input{ accent-color:var(--accent,#e4ff00); margin:0; }
.merk-wahl label:has(input:checked){
  border-color:var(--accent,#e4ff00); color:#e9e6e2;
}

/* ---- Das Formular ------------------------------------------------------ */
.merk-form{ border-top:1px solid rgba(255,255,255,.08); padding-top:20px; }
.merk-form .zeilen{
  display:grid; gap:12px; grid-template-columns:1fr 1fr;
}
.merk-form .breit{ grid-column:1/-1; }
.merk-form label.feld{
  display:block;
  font:400 9px/1 "Geist Mono",monospace; letter-spacing:.14em;
  text-transform:uppercase; color:#8b8783; margin:0 0 6px;
}
.merk-form input[type=text],
.merk-form input[type=email],
.merk-form textarea{
  width:100%; padding:10px 12px;
  background:#0e0e10; color:#e9e6e2;
  border:1px solid rgba(255,255,255,.13);
  font:400 13px/1.4 "Jost","Helvetica Neue",sans-serif;
}
.merk-form textarea{ resize:vertical; min-height:60px; }
.merk-form input:focus, .merk-form textarea:focus{
  outline:none; border-color:var(--accent,#e4ff00);
}
.merk-zustimmung{
  display:flex; gap:10px; align-items:flex-start;
  margin:16px 0 0;
  font:400 11px/1.55 "Jost","Helvetica Neue",sans-serif; color:#8b8783;
}
.merk-zustimmung input{ margin-top:2px; accent-color:var(--accent,#e4ff00); flex:0 0 auto; }
.merk-zustimmung a{ color:#c9c5c1; }

.merk-fuss{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap;
  margin-top:20px;
}
.merk-los{
  border:0; padding:13px 26px; cursor:pointer;
  background:var(--accent,#e4ff00); color:#0e0e10;
  font:400 10px/1 "Geist Mono",monospace; letter-spacing:.16em;
  text-transform:uppercase;
  transition:opacity .2s;
}
.merk-los:disabled{ opacity:.35; cursor:default; }
.merk-hinweis{
  font:400 10px/1.5 "Geist Mono",monospace; letter-spacing:.08em;
  color:#8b8783; text-transform:uppercase;
}
.merk-hinweis.fehler{ color:#ff6a55; }

@media (max-width:640px){
  .merk-form .zeilen{ grid-template-columns:1fr; }
  .merk-blatt{ max-height:94vh; }
  .merk-kopf{ padding:16px 16px 12px; }
  .merk-koerper{ padding:14px 16px; }
}

@media print{ .merk-btn, .merk-leiste, .merk-fenster{ display:none !important; } }