:root{
  --bg: #0f1724;
  --card: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  --accent: #7c5cff;
  --accent2: #5de0ff;
  --muted: #9aa6b2;
  --text: #e6eef6;
  --radius: 12px;
  --shadow: 0 10px 30px rgba(2,6,23,0.7);
}
body{margin:0;font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;padding:5px}
.wrap{max-width:1600px;margin:0 auto}
.card{background:var(--card);padding:18px;border-radius:12px;border:1px solid rgba(255,255,255,0.03);box-shadow:var(--shadow)}
h1{margin:0 0 12px 0}
p.small{color:var(--muted);margin:0 0 12px 0}

/* Masonry-like layout using CSS columns (responsive) */
.masonry{ column-gap:16px }
.masonry{column-count:1}                         /* < 250px: 1 Spalte */
#masonry{ gap:0px }
.mcol{ gap:4px; padding: 2px;}
@media (min-width:250px){.masonry{column-count:2}}  /* >= 250px: 2 Spalten (Mobil) */
@media (min-width:900px){.masonry{column-count:3}}
@media (min-width:1300px){.masonry{column-count:4}}
@media (min-width:1500px){.masonry{column-count:5}}

.btn-login {
  min-width: 80px;
  text-align: center;
  margin-bottom: 10px;
}

@media (min-width:900px){
  body{padding:20px}
  .btn-login {margin-bottom: 0px;}
  .topbar{ margin-bottom: 20px; }
}

.owner-status-overlay { pointer-events: none; }
.owner-status-overlay .owner-status-icon { pointer-events: auto !important; }

.tile{
  display:inline-block;width:100%;margin:0 0 12px;break-inside:avoid;
  background:rgba(255,255,255,0.02);border-radius:10px;padding:8px;position:relative;
  border:1px solid rgba(255,255,255,0.03)
}
.thumb{width:100%;height:auto;border-radius:8px;display:block;background:#070814}
.meta{margin-top:8px;font-size:13px;color:var(--muted);display:flex;justify-content:space-between;align-items:center}
.btn{background:linear-gradient(90deg,var(--accent),var(--accent2));border:0;padding:8px 10px;border-radius:8px;color:#081126;font-weight:700;cursor:pointer}
.btn.ghost{background:transparent;border:1px solid rgba(255,255,255,0.06);color:var(--text);padding:6px 8px;border-radius:8px}
.error{background:rgba(239,68,68,0.06);border-left:4px solid rgba(239,68,68,0.12);color:#ffdede;padding:10px;border-radius:8px;margin-bottom:12px}
.ok{background:rgba(34,197,94,0.06);border-left:4px solid rgba(34,197,94,0.12);color:#eafff1;padding:10px;border-radius:8px;margin-bottom:12px}
.topbar{display:flex;justify-content:space-between;gap:12px;align-items:center}
form.inline{display:inline;margin:0}

/* Search bar + filter styling (responsive) */
.search-wrap{display:flex;align-items:center;gap:10px;width:100%}
.search-form{
  display:flex;align-items:center;gap:8px;
  background:rgba(255,255,255,0.02);padding:6px;border-radius:10px;border:1px solid rgba(255,255,255,0.03);
  position:relative;width:100%;
}
.search-input{
  background:transparent;border:0;color:var(--text);outline:none;
  padding:8px 6px;font-size:14px;min-width:220px;flex:1
}
.search-btn,.filter-btn{
  background:transparent;border:0;padding:6px;display:flex;align-items:center;justify-content:center;cursor:pointer
}
.filter-btn{border-left:1px solid rgba(255,255,255,0.03);margin-left:6px;padding-left:12px}

/* Integrated filter panel */
.filter-dropdown{
  position:absolute;left:0;right:0;top:calc(100% + 8px);
  background:#161c27;border:1px solid rgba(255,255,255,0.04);
  padding:10px;border-radius:8px;box-shadow:0 10px 30px rgba(0,0,0,0.6);
  display:none;z-index:12000;min-height:48px;max-height:240px;overflow:auto;
  -webkit-overflow-scrolling:touch;
  gap:12px;align-items:center;display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:flex-start
}
.filter-dropdown-option{background:#161c27}
.filter-item{
  display:flex;align-items:center;gap:8px;min-width:120px;padding:6px 8px;border-radius:8px;
  background:transparent;border:1px solid rgba(255,255,255,0.02);color:var(--text);font-size:13px;white-space:nowrap
}
.filter-row-download{margin-top: 5px;}
.filter-row{display:flex;flex-direction:row;gap:6px;align-items:center}
.filter-row label{font-size:13px;color:var(--muted);margin-right:6px;margin-top: 5px;}
.filter-actions{margin-top:15px;display:flex;gap:8px;justify-content:flex-start;margin-left:auto}
.select{background:rgba(255,255,255,0.01);border:1px solid rgba(255,255,255,0.03);padding:8px;border-radius:8px;color:var(--text)}
.checkbox-inline{display:inline-flex;align-items:center;gap:8px;color:var(--muted);cursor:pointer}

/* If there's not enough horizontal space, allow wrapping into multiple rows */
@media (max-width:820px){
  .filter-dropdown{flex-wrap:wrap;padding:10px;gap:8px;max-height:320px;box-sizing: border-box;}
  .filter-item{min-width:100px}
}

/* Owner status icon (for tiles owned by current user) */
.owner-status-icon{
  position:absolute;top:10px;left:10px;width:28px;height:28px;z-index:1001;border-radius:6px;
  background:rgba(0,0,0,0.25);padding:4px;box-sizing:content-box;display:block;
  box-shadow:0 6px 14px rgba(0,0,0,0.45)
}

/* Overlay (full image view) */
#overlay{
  position:fixed;inset:0;background:rgba(0,0,0,0.85);display:none;align-items:center;justify-content:center;z-index:9999;padding:20px
}
#overlay.active{display:flex}
#overlay .overlay-inner{max-width:1200px;width:100%;max-height:96vh;display:flex;flex-direction:column;gap:12px;position:relative}
#overlay .overlay-img-wrap{
  flex:1;display:flex;align-items:center;justify-content:center;position:relative;background:#06060a;border-radius:12px;overflow:hidden;
  min-height:60vh;max-height:92vh
}
#overlayImage{
  max-width:100%;max-height:92vh;width:auto;height:auto;display:block;visibility:hidden;object-fit:contain
}
#overlay .overlay-toolbar{display:flex;gap:8px;justify-content:space-between;align-items:center}
.ctl-left{display:flex;gap:8px;align-items:center}
.ctl-right{display:flex;gap:8px;align-items:center}
.icon-btn{background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.04);padding:8px 10px;border-radius:8px;color:var(--text);cursor:pointer}
.small-muted{color:var(--muted);font-size:13px}

/* Right-side vertical buttons (kept but hidden) */
.overlay-side{display:none}

/* Horizontal action area in toolbar */
.overlay-actions{display:flex;gap:8px;align-items:center;margin-left:8px}
.overlay-actions .side-btn{
  min-width:44px;height:44px;border-radius:10px;padding:6px;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,0.01);border:1px solid rgba(255,255,255,0.03);cursor:pointer;box-shadow:none;transition:transform .18s ease, box-shadow .18s ease;gap:8px
}

/* Like composite */
.like-composite{
  padding:6px 10px;font-weight:700;color:#ffffff;background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.04);
  box-shadow:0 6px 12px rgba(0,0,0,0.12);display:flex;align-items:center;gap:8px
}
.like-composite img{width:18px;height:18px;display:block;opacity:0.95}
.like-composite .like-count{font-size:14px;line-height:1;display:inline-block;padding-left:0;color:#ffffff}
.like-composite.liked{background:linear-gradient(180deg,#34d399,#10b981);color:#041014;border-color:rgba(16,185,129,0.65);box-shadow:0 6px 12px rgba(16,185,129,0.12)}

/* Animations */
.icon-lift{display:inline-block;will-change:transform;animation:icon-bounce 520ms cubic-bezier(.2,.7,.25,1) both}
@keyframes icon-bounce{0%{transform:translateY(0) scale(1)}40%{transform:translateY(-6px) scale(1.04)}100%{transform:translateY(0) scale(1)}}
.delete-btn{background:linear-gradient(180deg,#ff6b6b,#ff2b2b);border:1px solid rgba(255,80,80,0.9);color:#fff;box-shadow:0 6px 14px rgba(255,40,40,0.18),0 0 12px rgba(255,40,40,0.08)}
.delete-btn:hover{transform:translateY(-2px);transition:transform .12s ease-out}
.like-btn:hover{transform:translateY(-2px)}
.side-btn.lift{transform:translateY(-6px) scale(1.02);box-shadow:0 10px 24px rgba(0,0,0,0.28)}

/* Nav arrows */
.overlay-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:1002;display:flex;align-items:center;justify-content:center;
  width:46px;height:46px;border-radius:10px;background:rgba(0,0,0,0.35);border:1px solid rgba(255,255,255,0.04);color:var(--text);
  cursor:pointer;font-size:20px;transition:transform .22s ease, box-shadow .18s ease;padding:6px
}
.overlay-nav.left{left:12px}
.overlay-nav.right{right:12px}
.overlay-nav img{width:20px;height:20px;display:block;pointer-events:none}
.overlay-nav.nav-jump-left{transform:translateY(-50%) translateX(-12px) rotate(-6deg) scale(1.06);box-shadow:0 14px 30px rgba(0,0,0,0.5)}
.overlay-nav.nav-jump-right{transform:translateY(-50%) translateX(12px) rotate(6deg) scale(1.06);box-shadow:0 14px 30px rgba(0,0,0,0.5)}

/* Likes badge (tile) */
.likes-tile,.delete-tile{
  display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,0.02);padding:6px 8px;border-radius:10px;border:1px solid rgba(255,255,255,0.03);
  font-weight:700;color:var(--text);margin-right:8px;font-size:13px;cursor:pointer;user-select:none
}
.likes-tile img,.delete-tile img{width:16px;height:16px;display:block;opacity:0.95}
.likes-tile .likes-count{min-width:20px;display:inline-block;text-align:left}
.likes-tile.liked{background:linear-gradient(180deg,#34d399,#10b981);color:#041014;border-color:rgba(16,185,129,0.7);box-shadow:0 6px 12px rgba(16,185,129,0.06)}

/* Misc */
.muted{color:var(--muted)}
.loader{width:36px;height:36px;border-radius:50%;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:1003;display:block}
.loader::after{content:"";box-sizing:border-box;display:block;width:36px;height:36px;border-radius:50%;border:4px solid rgba(255,255,255,0.06);border-top-color:var(--accent);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* likes badge in toolbar (legacy, hidden) */
.likes-badge{
  display:flex;align-items:center;gap:8px;background:rgba(255,255,255,0.02);padding:6px 10px;border-radius:10px;border:1px solid rgba(255,255,255,0.03);
  font-weight:700;color:var(--text);margin-left:4px;visibility:hidden;height:0;overflow:hidden
}
.likes-badge img{width:18px;height:18px;display:block;opacity:0.95}

/* toast */
.toast{
  position:fixed;left:50%;transform:translateX(-50%);bottom:28px;background:rgba(0,0,0,0.7);color:var(--text);
  padding:10px 14px;border-radius:10px;border:1px solid rgba(255,255,255,0.04);z-index:11000;font-size:14px;box-shadow:0 6px 24px rgba(2,6,23,0.6);
  opacity:0;pointer-events:none;transition:opacity .18s ease
}
.toast.show{opacity:1;pointer-events:auto}

/* License tooltip styling */
.license-label{margin-left:2px;cursor:help;color:var(--muted);font-weight:600;position:relative}
.license-tooltip{
  position:absolute;display:none;z-index:12000;background:#07101a;color:var(--text);border:1px solid rgba(255,255,255,0.04);
  padding:10px;border-radius:10px;max-width:380px;box-shadow:0 10px 30px rgba(2,6,23,0.7);font-size:13px;line-height:1.35;white-space:normal;pointer-events:auto
}

/* New: click/tap animations for search and filter icons */
.search-btn img,.filter-btn img{transition:transform .22s cubic-bezier(.2,.7,.25,1),opacity .18s;display:block}
.search-btn.pulse img,.filter-btn.pulse img{transform:scale(1.06);opacity:0.98}
.search-btn:active img,.filter-btn:active img{transform:scale(0.92)}

/* Result count styling */
.result-count{font-size:13px;color:var(--muted);margin-top:6px;margin-bottom:20px}

/* STATUSTIP: global tooltip for owner-status icon */
#statustip.license-tooltip{
  position:fixed;display:none;z-index:12001;max-width:340px;padding:10px 12px;border-radius:8px;background:#111;color:#fff;
  box-shadow:0 6px 18px rgba(0,0,0,0.45);font-size:13px;line-height:1.3;pointer-events:none
}
#statustip.license-tooltip strong{display:block;font-weight:700;margin-bottom:6px}

/* Hover-Lift for Download & Report */
.overlay-actions .side-btn:hover{transform:translateY(-2px);transition:transform .12s ease-out}

.btn-survey{
    border: 0;
    padding: 8px 10px;
    border-radius: 8px;
    color: #081126;
    font-weight: 700;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 110px;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background-size: 250% 100%;
    color: var(--text);
    font-weight: 800;
    letter-spacing: .3px;
    text-decoration: none;
    /*box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);*/
}


/* --------- Mobile-first improvements --------- */
@media (max-width:720px){

  .btn-survey{ display:none !important; }

  .report-btn{ display:none !important; }

  .meta:has(.delete-tile) .likes-count { display:none; }

  /* optional kompakter, damit Icon + Delete besser nebeneinander passen */
  .meta:has(.delete-tile) .likes-tile { gap:0; padding:6px; }
  .meta:has(.delete-tile) { gap:6px; }           /* falls nötig */


  /* Statuspunkt rechts (● / ○) in der Meta-Leiste ausblenden */
  .tile .meta > div:last-child > span[title]{
    display: none !important;
  }

  /* Suche & Login gleiche Breite */
  .topbar > div:last-child .btn{
    width:100%;
    box-sizing:border-box;
  }
  .topbar .btn-login{
    display:inline-flex !important;   /* statt block */
    align-items:center;
    justify-content:center;
    gap:8px;
    width:100%;
  }

.search-form{              /* Sicherheitshalber auch hier */
  box-sizing:border-box;
}
@media (min-width:900px){
  /* Desktop wieder normal */
  .topbar .btn-login{ width:auto }
}


  #cv-buy-modal .cv-badges{
    margin-left:0 !important;          /* löst das Right-Pushen */
    width:100%;
    justify-content:flex-start !important;
  }
  #cv-buy-modal .cv-badge{ margin-right:0px; }

  #overlay .overlay-toolbar{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
  }
  #overlay .overlay-toolbar .ctl-left{
    order:1;
    flex:0 0 100%;
    justify-content:flex-start;
  }
  #overlay .overlay-toolbar .ctl-right{
    order:2;
    flex:0 0 100%;
    justify-content:center;      /* zentriert */
  }

  /* Entfernt das „leere Item“ links (legacy Likes-Badge),
     sonst reserviert visibility:hidden weiterhin Breite */
  #overlay #overlayLikes,
  #overlay .likes-badge{
    display:none !important;
  }

  /* keine seitliche Verschiebung */
  #overlay .overlay-actions{
    margin-left:0;
  }

  /* Topbar untereinander */
  .topbar{
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  /* Bereich rechts in der Topbar (Suche + Button) ebenfalls vertikal */
  .topbar > div:last-child{
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  /* Suche volle Breite, Container in Spalte */
  .search-wrap{
    display: flex;
    flex-direction: column;      /* <<< wichtig */
    align-items: stretch;        /* <<< wichtig */
    gap: 10px;
    width: 100%;
  }

  /* Formular darf NICHT positioning-context sein */
  .search-form{
    position: static !important; /* <<< wichtig */
    width: 100%;
    gap: 6px;
  }
  .search-input{ min-width:0; width:100%; flex:1 }
  .filter-btn{ border-left:0; margin-left:0; padding-left:6px }

  /* Dropdown in den normalen Dokumentfluss holen und unter die Suche setzen */
  .filter-dropdown{
    position: relative !important; /* <<< statt absolute */
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;        /* volle Breite */
    margin-top: 8px !important;
    max-height: none;
    flex-wrap: wrap;
    gap: 8px;
  }

  /* Dashboard/Login Button unter der Suche, volle Breite */
  .topbar > div:last-child .btn{
    width: 100%;
    text-align: center;
  }

  /* Ergebnis-Text */
  #resultCount,.result-count{ display:block; margin-top:6px }
}


#overlayImage{
  touch-action: none;        /* erlaubt uns, Pinch/Drag komplett per JS zu steuern */
  will-change: transform;
  transform: translate3d(0,0,0) scale(1);
}

/* css/art_gallery.css — ersetze den bisherigen .btn-login Block + Keyframes */
.btn-login{
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 120px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.10);
  justify-content: center;
  
  /* Behalte den Verlaufs-Look – animiere ihn sanft */
  background-image: linear-gradient(90deg, var(--accent), var(--accent2));
  background-size: 250% 100%;
  animation: loginGradientShift 6s ease-in-out infinite alternate;

  color: var(--text);
  font-weight: 800;
  letter-spacing: .3px;
  text-decoration: none;
  box-shadow: 0 10px 24px rgba(0,0,0,0.25);
}

.btn-login img{
  width: 20px;
  height: 20px;
  display: block;
  opacity: .95;
}

@keyframes loginGradientShift{
  0%   { background-position:   0% 50%; }
  100% { background-position: 100% 50%; }
}

.btn-login:active{ transform: translateY(1px); }



/* css/art_gallery.css — sanftes Hover-Zoom für Thumbnails */
.tile .open-overlay{
  overflow: hidden;            /* Zoom sauber clippen */
  border-radius: 8px;
}

/* langsamer & smoother */
.tile .open-overlay .thumb{
  transform-origin: 50% 50%;
  will-change: transform;
  backface-visibility: hidden;
  transition: transform .60s cubic-bezier(.16,.84,.44,1),
              filter .30s ease,
              opacity .30s ease;
}

@media (hover:hover){
  .tile[data-status="1"] .open-overlay:hover .thumb,
  .tile[data-status-id="1"] .open-overlay:hover .thumb{
    transform: scale(1.04);
  }
}
.tile[data-status="1"] .open-overlay:focus-visible .thumb,
.tile[data-status-id="1"] .open-overlay:focus-visible .thumb{
  transform: scale(1.04);
}


/* Bilder nicht markierbar / nicht ziehbar */
.thumb,
#overlayImage,
.tile .open-overlay img{
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

  -webkit-user-drag: none;
  user-drag: none;

  -webkit-touch-callout: none; /* verhindert Long-Press-Menü in Safari/iOS */
}


.no-select {
  user-select: none;           /* Standard */
  -webkit-user-select: none;   /* Safari/alte Chromium */
  -ms-user-select: none;       /* alter Edge/IE */
}


/* === Scroll-To-Top Button ============================================== */
.scroll-top-btn{
  position: fixed;
  right: 22px;
  bottom: 22px;
  width: 52px;
  height: 52px;
  border-radius: 9999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  backdrop-filter: blur(4px);
  box-shadow: var(--shadow);
  display: flex;
  align-items: center;
  justify-content: center;

  opacity: 0;
  transform: translateY(8px) scale(.96);
  transition: opacity .24s ease, transform .24s ease;
  pointer-events: none;           /* unsichtbar = nicht klickbar */
  z-index: 12002;                 /* über Grid/Overlay-UI */
}

.scroll-top-btn img{
  width: 22px;
  height: 22px;
  display: block;
  opacity: .95;
}

/* sichtbar-Zustand */
.scroll-top-btn.show{
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.scroll-top-btn:active{
  transform: translateY(1px) scale(.98);
}

/* optional: auf sehr kleinen Screens etwas kleiner */
@media (max-width: 420px){
  .scroll-top-btn{ width: 46px; height: 46px; right: 14px; bottom: 14px; }
}

/* Barrierefreiheit: weniger Animation, wenn gewünscht */
@media (prefers-reduced-motion: reduce){
  .scroll-top-btn{ transition: none; }
}


/* --- Badge „Gemerkt“ oben rechts --- */
.mark-badge{
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 1202;                     /* über Icon-Overlays */
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  background: rgba(0,0,0,.62);
  backdrop-filter: saturate(120%) blur(2px);
  pointer-events: none;
  user-select: none;
  box-shadow: 0 2px 6px rgba(0,0,0,.22);
}