/* GIF-Werkstatt (polarhub.de/gif/): Ablagefläche, Vorschau links, Werkzeuge rechts (Handy: untereinander) */
.ablage { display: grid; gap: 6px; place-items: center; text-align: center; padding: 34px 18px; border: 2px dashed var(--line); cursor: pointer; }
.ablage.drueber, .ablage:hover { border-color: var(--accent); }
.ablage input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.ablage:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.werkstatt { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 860px) { .werkstatt { grid-template-columns: 1fr; } }
.buehne canvas { display: block; max-width: 100%; max-height: 60vh; margin: 0 auto; touch-action: none; border-radius: 8px;
    background: repeating-conic-gradient(#8884 0% 25%, transparent 0% 50%) 0 0 / 16px 16px; }   /* Karomuster zeigt durchsichtige Stellen */
.steuer { align-items: center; margin-top: 10px; }
.tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.tabs button { font: inherit; font-size: .9rem; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--text); cursor: pointer; }
.tabs button[aria-selected=true] { background: var(--accent); border-color: var(--accent); color: #fff; }
.felder { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0; }
.felder label, label.breit { display: grid; gap: 4px; font-size: .88rem; color: var(--muted); }
.felder input[type=number], .felder select, label.breit input { font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 7px 10px; width: 8.5em; }
label.breit input { width: 100%; }
.felder input[type=range] { width: 9em; }
.haken { display: flex; gap: 8px; align-items: center; font-size: .92rem; margin: 6px 0; }
#meldung.fehler { border-color: #e5534b; color: #e5534b; }
.buehne .reihe { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* ezgif-artige Bilderleiste, Video-Vorschau, Dateiknopf */
.streifen { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; max-height: 420px; overflow-y: auto; }
.streifen li { display: grid; gap: 4px; padding: 4px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); font-size: .78rem; }
.streifen li.aktiv { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.streifen canvas { width: 100%; height: auto; border-radius: 6px; cursor: pointer; background: repeating-conic-gradient(#8884 0% 25%, transparent 0% 50%) 0 0 / 10px 10px; }
.streifen input { width: 100%; box-sizing: border-box; font: inherit; color: var(--text); background: transparent; border: 1px solid var(--line); border-radius: 6px; padding: 2px 4px; }
.streifen li > span:last-child { display: flex; gap: 4px; } .streifen li button { flex: 1; font: inherit; font-size: .72rem; padding: 2px; border-radius: 6px; border: 1px solid var(--line); background: transparent; color: var(--text); cursor: pointer; }
.v-vorschau video { display: block; width: 100%; max-height: 50vh; border-radius: 10px; margin: 8px 0; background: #000; }
.datei-knopf { position: relative; overflow: hidden; } .datei-knopf input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.hinweis-konverter { margin-top: 16px; }

/* ezgif-Aufbau: Werkzeugleiste oben (immer sichtbar), Ablage mitten in der Bühne, Optionen gesperrt bis eine Datei geladen ist */
.werkzeugleiste { padding: 10px 12px; margin-bottom: 14px; } .werkzeugleiste .tabs { margin: 0; justify-content: center; }
.werkzeugleiste .tabs button { padding: 8px 14px; font-weight: 600; }
.buehne .ablage { min-height: 300px; border-radius: 12px; }
.werkstatt.leer .nach-laden { display: none; }
.werkstatt:not(.leer) .erst-laden { display: none; }
.werkstatt.leer .werkzeuge-gif .tab-inhalt { opacity: .5; pointer-events: none; user-select: none; }
.video-teil h3 { margin-top: 0; }