/* Seiteneigene Stücke für shots.sixhop.net - nur CI-Tokens aus marke.css, Bausteine kommen aus marke.css. */

/* marke.css setzt .sx-meldung auf display:flex und hebt damit das hidden-Attribut auf (an ci gemeldet). */
.sx [hidden] { display: none; }

.sx main.sx-section { min-height: 60vh; }
.shot-wrap { display: grid; gap: var(--spalt); max-width: 760px; }
.shot-wrap h1 { margin: 0; }
.shot-wrap .sx-lead { margin: 0; }

.shot-ablage, .shot-ergebnis { gap: var(--spalt); }

.shot-drop { display: grid; place-content: center; gap: 4px; min-height: 180px; padding: var(--rand);
  border: 2px dashed var(--linie); border-radius: 8px; background: var(--weiss); text-align: center;
  cursor: pointer; transition: border-color var(--dauer), background var(--dauer); }
.shot-drop p { margin: 0; }
.shot-drop-titel { font-weight: 600; color: var(--tiefblau); }
.shot-drop:hover, .shot-drop.over { border-color: var(--sixhop-blau); background: var(--hellblau); }
.shot-drop:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; }

.shot-actions { display: flex; flex-wrap: wrap; gap: 16px; }

.shot-ergebnis-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.shot-ergebnis-kopf h2 { margin: 0; }
.shot-zaehler { font-weight: 400; color: var(--ink-muted); }

.shot-liste { list-style: none; margin: 0; padding: 0; display: grid; }
.shot-eintrag { display: grid; grid-template-columns: 64px minmax(0, 1fr) 40px; gap: 16px; align-items: center;
  padding: 16px 0; border-top: 1px solid var(--linie); }
.shot-eintrag:first-child { border-top: 0; padding-top: 0; }
.shot-vorschau { display: grid; place-items: center; width: 64px; height: 64px; overflow: hidden;
  border-radius: 8px; background: var(--hellblau); color: var(--sixhop-blau); }
.shot-vorschau img { width: 100%; height: 100%; object-fit: cover; }
.shot-vorschau svg { width: 24px; height: 24px; }
.shot-info { display: grid; gap: 4px; min-width: 0; }
.shot-info p { margin: 0; }
.shot-name { font-weight: 600; overflow-wrap: anywhere; }
.shot-groesse { font-weight: 400; color: var(--ink-muted); }
.shot-link { overflow-wrap: anywhere; }
.shot-link a { font-family: var(--font-mono); font-size: 14px; }
.shot-info audio { width: 100%; max-width: 420px; height: 36px; }

.shot-hinweis { margin: 0; color: var(--ink-muted); }
.sx-footer .sx-footer-spalten { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 767px) { .sx-footer .sx-footer-spalten { grid-template-columns: minmax(0, 1fr); } }

/* Ladeanimation: Kreis im Ablagefeld und in der Vorschau, solange hochgeladen wird */
@keyframes shot-dreh { to { transform: rotate(360deg); } }
.shot-drop.laedt { border-color: var(--sixhop-blau); background: var(--hellblau); }
.shot-drop.laedt::before, .shot-eintrag.laedt .shot-vorschau::before { content: ""; justify-self: center;
  width: 32px; height: 32px; border: 3px solid var(--linie); border-top-color: var(--sixhop-blau);
  border-radius: 50%; animation: shot-dreh 800ms linear infinite; }
.shot-eintrag.laedt .shot-vorschau::before { width: 24px; height: 24px; }
.shot-eintrag.laedt .shot-vorschau svg { display: none; }
@media (prefers-reduced-motion: reduce) {
  .shot-drop.laedt::before, .shot-eintrag.laedt .shot-vorschau::before { animation-duration: 2400ms; }
}

/* Kopf ohne Menü: Logo senkrecht mittig (Andreas 05.11.2026). marke.css richtet die Logo-Grundlinie am Menütext aus
   (negativer Rand unten), das schiebt das Logo ohne Menü aus der Mitte. */
.sx .sx-header { align-items: center; padding: 16px 0; }
.sx .sx-header .sx-brand .sx-logo { margin-bottom: 0; vertical-align: middle; }

/* Löschen rechts je Datei */
.shot-loeschen { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--linie);
  border-radius: 8px; background: var(--weiss); color: var(--ink-muted); cursor: pointer;
  transition: color var(--dauer), border-color var(--dauer); }
.shot-loeschen svg { width: 20px; height: 20px; }
.shot-loeschen:hover { color: var(--fehler); border-color: var(--fehler); }
.shot-loeschen:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; }
.shot-loeschen:disabled { cursor: wait; opacity: .5; }
.shot-eintrag.geloescht .shot-vorschau { opacity: .4; }