:root{
  --tvwu-blue:#2C3D4C;
  --tvwu-blue-hover:#9A8D84;
  --tvwu-gap:12px;
  --tvwu-radius:6px;
  --tvwu-font:'Lato', Arial, sans-serif;
  --tvwu-drop-h:120px;
  --tvwu-badge-pad:12px;   /* vertikales Padding Badge */
}

/* Container */
.tvwu-wrap{ width:100%; background:#fff; border-radius:8px; padding:14px; }
.tvwu-title{ font:600 14px/1.2 var(--tvwu-font); color:var(--tvwu-blue); margin-bottom:10px; }

/* Grid */
.tvwu-grid{ display:grid; gap:var(--tvwu-gap); }
.tvwu-grid--4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
@media (max-width:1024px){ .tvwu-grid--4{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:640px) { .tvwu-grid--4{ grid-template-columns:1fr; } }

.tvwu-slot{ position:relative; }

/* Drop-Zone */
.tvwu-drop{
  position:relative;
  height:var(--tvwu-drop-h);
  border:1px dashed rgba(44,61,76,.35);
  border-radius:var(--tvwu-radius);
  background:linear-gradient(#fafafa,#f3f3f3);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; outline:none;
  transition: box-shadow .15s ease, background .15s ease;
  overflow:hidden; /* <— wichtig: Bild bleibt im Rahmen */
}
.tvwu-drop:hover{ box-shadow:0 0 0 2px rgba(44,61,76,.1) inset; }
.tvwu-drop.is-drag{ box-shadow:0 0 0 2px rgba(44,61,76,.35) inset; }
.tvwu-drop.is-uploading{ opacity:.7; pointer-events:none; }

.tvwu-empty{ text-align:center; color:#666; }
.tvwu-icon{ font-size:22px; margin-top:20px; }
.tvwu-help{ font:400 12px var(--tvwu-font); }

/* Bild */
.tvwu-img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  border-radius:var(--tvwu-radius);
  display:block;
}

/* Badge */
.tvwu-badge{
  position:absolute; left:0; top:0; width:100%;
  background:var(--tvwu-blue); color:#fff;
  font:400 12px var(--tvwu-font);
  padding:var(--tvwu-badge-pad) 0;
  line-height:1; text-align:center;
  border-top-left-radius:var(--tvwu-radius);
  border-top-right-radius:var(--tvwu-radius);
  pointer-events:none;
}
.tvwu-drop:hover .tvwu-badge{ background:var(--tvwu-blue-hover); }

/* Remove X */
.tvwu-remove{
  position:absolute; right:6px; top:6px;
  width:22px; height:22px; border:none; border-radius:50%;
  background:rgba(0,0,0,.55); color:#fff; font-size:16px;
  line-height:22px; text-align:center; cursor:pointer;
  box-shadow:0 0 0 1px rgba(255,255,255,.4) inset;
}
.tvwu-remove:hover{ background:rgba(0,0,0,.75); }

/* Actions */
.tvwu-actions{ display:flex; justify-content:flex-end; margin-top:10px; }
.tvwu-clear-all{
  background:none; border:none; color:#666; font:400 12px var(--tvwu-font);
  text-decoration:underline; cursor:pointer; padding:4px 6px; border-radius:4px;
}
.tvwu-clear-all:hover{ color:#000; background:#f4f4f4; }

/* Modal */
.tvwu-modal{ position:fixed; inset:0; z-index:9999; }
.tvwu-modal[hidden]{ display:none; }
.tvwu-modal__backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.6); }
.tvwu-modal__inner{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  background:#fff; border-radius:8px; padding:10px;
  max-width:min(90vw,900px); max-height:min(90vh,900px);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 40px rgba(0,0,0,.35);
}
.tvwu-modal__img{ max-width:100%; max-height:80vh; display:block; border-radius:6px; }
.tvwu-modal__close{
  position:absolute; right:6px; top:6px;
  width:30px; height:30px; border:none; border-radius:50%;
  background:#000; color:#fff; font-size:18px; line-height:30px; cursor:pointer; opacity:.7;
}
.tvwu-modal__close:hover{ opacity:1; }
body.tvwu-modal-open{ overflow:hidden; }

/* Spinner im Modal */
.tvwu-modal__spinner{
  position:absolute;
  width:36px; height:36px;
  border:3px solid rgba(44,61,76,.2);
  border-top-color: var(--tvwu-blue);
  border-radius:50%;
  animation: tvwu-spin .8s linear infinite;
}
@keyframes tvwu-spin { to { transform: rotate(360deg); } }