.s-form{display:block}
.s-grid{display:grid;gap:18px}
.s-grid-2{grid-template-columns:1fr 1fr}
.s-span-2{grid-column:1 / -1}
.s-field label{display:block;margin:0 0 8px;font-weight:800;color:var(--text)}

.s-input{
  width:100%;
  min-height:48px;
  border:1px solid var(--line);
  border-radius:14px;
  padding:12px 14px;
  background:#fff;
  color:var(--text);
  font:inherit;
  outline:none;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.s-input:focus{
  border-color:#8ecf9b;
  box-shadow:0 0 0 4px rgba(47,158,68,.12);
}
.s-file{padding:10px 12px}
.s-textarea{min-height:110px;resize:vertical}
.s-help{margin-top:8px;color:var(--muted);font-size:.93rem}
.s-check{display:flex;gap:12px;align-items:flex-start;font-weight:500}
.s-check input{margin-top:4px;transform:scale(1.15)}

#s-map{
  width:100%;
  height:420px;
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden;
  background:#eef4f0;
}

.notice{
  border-radius:14px;
  padding:14px 16px;
  margin-bottom:16px;
  font-weight:700;
}
.notice-success{
  background:#edf8f0;
  border:1px solid #cfe8d6;
  color:#1d6b3a;
}
.notice-error{
  background:#fff3f2;
  border:1px solid #f3c3bf;
  color:#b42318;
}

.s-table-wrap{overflow:auto}
.s-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  min-width:800px;
}
.s-table th,
.s-table td{
  text-align:left;
  vertical-align:top;
  padding:14px 12px;
  border-bottom:1px solid var(--line);
}
.s-table thead th{
  background:#f6fbf7;
  position:sticky;
  top:0;
  z-index:2;
  font-size:.95rem;
}
.s-thumb{
  width:180px;
  max-width:100%;
  height:auto;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
}
.s-action-col{display:flex;flex-direction:column;gap:8px;min-width:120px}
.s-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:28px;
  padding:0 10px;
  border-radius:999px;
  font-size:.82rem;
  font-weight:900;
}
.s-badge-ok{background:#eaf7ef;color:#1d6b3a;border:1px solid #cfe8d6}
.s-badge-warn{background:#fff5dc;color:#8a5a00;border:1px solid #eed79c}
.s-pill{
  display:inline-block;
  padding:6px 10px;
  border-radius:999px;
  background:var(--blue-soft);
  border:1px solid #cfe8d6;
  font-weight:800;
  text-transform:uppercase;
  font-size:.78rem;
}
.s-link{color:var(--blue-dark);font-weight:800}
.admin-hero-grid{grid-template-columns:1fr auto}
.admin-actions-top{display:flex;align-items:center;justify-content:flex-end}

@media (max-width:860px){
  .s-grid-2{grid-template-columns:1fr}
  .s-span-2{grid-column:auto}
  .admin-hero-grid{grid-template-columns:1fr}
  .admin-actions-top{justify-content:flex-start}
}

.submit-wrap{
  display:flex;
  align-items:center;
  gap:16px;
}

.submit-loader{
  display:none;
  align-items:center;
  gap:10px;
  font-weight:700;
  color:var(--muted);
}

.submit-loader.active{
  display:flex;
}

/* eleganter Ring statt nerviger Spinner */
.loader-ring{
  width:22px;
  height:22px;
  border-radius:50%;
  border:3px solid rgba(47,158,68,.2);
  border-top:3px solid var(--blue);
  animation:spin 0.9s linear infinite;
}

@keyframes spin{
  from{ transform:rotate(0deg); }
  to{ transform:rotate(360deg); }
}

.video-frame-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:16px;
    margin-top:10px;
}

@media (max-width: 760px){
    .video-frame-grid{
        grid-template-columns:1fr;
    }
}

.video-frame-card{
    position:relative;
    border:2px solid #dbe4ea;
    border-radius:16px;
    overflow:hidden;
    background:#fff;
    box-shadow:0 8px 20px rgba(0,0,0,.06);
    cursor:pointer;
    transition:.18s ease;
}

.video-frame-card:hover{
    transform:translateY(-2px);
    box-shadow:0 12px 26px rgba(0,0,0,.10);
}

.video-frame-card.is-selected{
    border-color:#1d6b3a;
    box-shadow:0 0 0 3px rgba(29,107,58,.12), 0 12px 26px rgba(0,0,0,.10);
}

.video-frame-card img{
    display:block;
    width:100%;
    aspect-ratio:16/10;
    object-fit:cover;
    background:#f2f4f7;
}

.video-frame-meta{
    padding:10px 12px;
    font-size:14px;
    color:#24313a;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:8px;
}

.video-frame-time{
    font-weight:600;
}

.video-frame-badge{
    position:absolute;
    top:10px;
    left:10px;
    min-width:34px;
    height:34px;
    padding:0 10px;
    border-radius:999px;
    background:rgba(0,0,0,.62);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:14px;
    font-weight:700;
    box-shadow:0 6px 14px rgba(0,0,0,.18);
}

.video-frame-check{
    position:absolute;
    top:10px;
    right:10px;
    width:38px;
    height:38px;
    border-radius:999px;
    background:rgba(29,107,58,.95);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:20px;
    font-weight:800;
    box-shadow:0 8px 18px rgba(0,0,0,.18);
    opacity:0;
    transform:scale(.85);
    transition:.16s ease;
    border:2px solid rgba(255,255,255,.92);
}

.video-frame-card.is-selected .video-frame-check{
    opacity:1;
    transform:scale(1);
}

.video-frame-card.is-selected{
    border-color:#1d6b3a;
    box-shadow:0 0 0 4px rgba(29,107,58,.14), 0 12px 26px rgba(0,0,0,.10);
}

.video-frame-card:not(.is-selected) .video-frame-check{
    display:none;
}

.s-thumb-group{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
  width:230px;
  max-width:100%;
}

.s-thumb-group-item{
  position:relative;
}

.s-thumb-small{
  width:100%;
  height:140px;
  object-fit:cover;
}

.s-thumb-label{
  position:absolute;
  top:8px;
  left:8px;
  min-width:30px;
  height:30px;
  padding:0 8px;
  border-radius:999px;
  background:rgba(0,0,0,.68);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.82rem;
  font-weight:800;
  box-shadow:0 6px 14px rgba(0,0,0,.18);
}

/*Fortschrittsanzeige beim Foto-Rendern aus Film*/
.btn-loading {
  position: relative;
  overflow: hidden;
}

.btn-loading::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent);
  animation: shimmer 1.2s infinite;
}

@keyframes shimmer {
  100% { left: 100%; }
}


.upload-preview-grid{
  display:grid;
  grid-template-columns: 1.2fr 1fr;
  gap:18px;
  align-items:start;
}

.upload-preview-card{
  border:1px solid rgba(47,158,68,.18);
  background:#fff;
  border-radius:16px;
  padding:14px;
  box-shadow:0 10px 28px rgba(0,0,0,.06);
}

.upload-preview-title{
  font-weight:700;
  margin-bottom:10px;
  color:#1d6b3a;
}

#imagePreview{
  width:100%;
  height:auto;
  display:block;
  border-radius:12px;
  border:1px solid #dfe9e2;
  object-fit:contain;
  max-height:340px;
  background:#f8fbf8;
}

.s-option-row{
  display:flex;
  flex-wrap:wrap;
  gap:14px 22px;
  margin-top:8px;
}

@media (max-width: 900px){
  .upload-preview-grid{
    grid-template-columns: 1fr;
  }
}