/* --- Hinweis zu :hover ---
   Alle :hover-Regeln in dieser Datei stehen in
   @media (hover: hover) and (pointer: fine). Ohne diese Abfrage bleibt auf
   Touch der Hover-Zustand nach dem ersten Tippen kleben. */

/* ============================================
   CLIP — Video- und GIF-Werkzeuge
   Karte, Stufen, Drop-Zone, Fortschrittsring, Knöpfe und Toasts
   kommen aus ../converter/converter.css.
   ============================================ */

/* Marken-Symbol (Filmklappe) in der Kopfzeile.
   Gleiche Machart wie .yk-brand-icon (Yoink) und .sk-brand-icon (Skribo):
   ein Emoji mit blauem Schein, bewegt ausschliesslich über transform.
   Kein `color`, das faerbt ein Emoji ohnehin nicht. */
.cl-brand-icon {
    font-size: 1.1rem;
    line-height: 1;
    display: inline-block;
    transform-origin: left bottom;
    filter: drop-shadow(0 0 10px rgba(41, 151, 255, 0.5));
    animation: clKlappe 3.4s ease-in-out infinite;
}
@keyframes clKlappe {
    0%, 70%, 100% { transform: rotate(0deg); }
    82%           { transform: rotate(-11deg); }
}
@media (prefers-reduced-motion: reduce) {
    .cl-brand-icon { animation: none; }
}

/* Der Hinweis „hier rechnet der Server" heißt jetzt .cv-server und steht in
   ../converter/converter.css — /bild/hintergrund.html braucht ihn genauso und
   soll dafür nicht diese ganze Datei laden müssen. */

/* --- Arbeitsfläche --- */
.cl-work {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 2rem 2rem;
    align-items: start;
}
/* Ergebniszeile und Auslöser gehören unter die ganze Karte, nicht in die
   schmale rechte Spalte. Dort stand der Knopf am Desktop rechts unter der
   Vorschau, während die Einstellungen links noch 200 px weiterliefen — und
   auf dem Handy zog ihn `order: -1` sogar vor die Felder, die er braucht. */
.cl-work > .cl-aussicht,
.cl-work > .cv-actions {
    grid-column: 1 / -1;
    margin-top: 0;
}
.cl-work > .cl-aussicht {
    text-align: center;
    min-height: 0;
    margin-bottom: 0.2rem;
}
@media (max-width: 900px) {
    .cl-work { grid-template-columns: 1fr; gap: 1.4rem; }
    /* Auf dem Handy zuerst die Vorschau: an ihr stellt man die Zeitmarken
       ein, und ohne sie sind die Zahlenfelder blind. Ergebniszeile und Knopf
       bleiben dahinter (Reihenfolge 0) und schließen die Karte ab. */
    .cl-out { order: -1; }
}

/* --- Vorschau --- */
.cl-preview {
    border-radius: 16px;
    overflow: hidden;
    background: #000;
    border: 1px solid var(--border);
    aspect-ratio: 16 / 9;
    display: grid;
    place-items: center;
}
#vorschau {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    opacity: 0;
    transition: opacity 0.4s ease;
}
#vorschau.da { opacity: 1; }
.cl-preview-hint {
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.5;
    margin-top: 0.6rem;
}
.cl-preview-hint:empty { display: none; }

/* --- Steuerelemente --- */
.cl-field { display: block; margin-bottom: 1.1rem; }
/* [hidden] verstecken heisst display:none — aber NUR, solange kein Autor
   ein eigenes display setzt. Die Zeile darueber tut genau das, und damit
   hatte ein `el.hidden = true` auf einem .cl-field keine Wirkung mehr
   (aufgefallen an der Farbwahl unter „Hintergrund entfernen", die
   sichtbar blieb, obwohl sie versteckt sein sollte). */
.cl-field[hidden] { display: none; }
.cl-field > span {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 0.4rem;
}
/* Diese Hinweise erklären die wichtigste Entscheidung der Seite (schnell
   gegen genau). Mit 0.78rem waren sie in Beschriftungsgröße gesetzt und
   klebten 6 px unter den Knöpfen, während zwischen den Feldern 18 px lagen —
   Compry setzt seine Feld-Hinweise auf 0.85rem mit 12 px Abstand. */
.cl-hint {
    display: block;
    font-size: 0.86rem;
    color: var(--text-muted);
    line-height: 1.55;
    margin-top: 0.6rem;
    text-transform: none;
    letter-spacing: 0;
}
.cl-input {
    width: 100%;
    font-family: var(--font-body);
    font-size: 0.98rem;
    color: var(--text);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 0.65rem 0.85rem;
    min-height: 44px;
    font-variant-numeric: tabular-nums;
    transition: border-color 0.3s ease, background 0.3s ease;
}
[data-theme="light"] .cl-input { background: rgba(0, 0, 0, 0.03); }
.cl-input:focus { border-color: var(--primary); outline: none; }

/* Auswahlliste: dasselbe Feld wie .cl-input, nur mit einem eigenen Pfeil.
   Der eingebaute Pfeil des Browsers ist im dunklen Design schwarz auf
   schwarz — deshalb appearance:none und ein gezeichnetes Dreieck. */
.cl-select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 2.2rem;
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                      linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: calc(100% - 1.05rem) 55%, calc(100% - 0.75rem) 55%;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    cursor: pointer;
}
.cl-select option { background: var(--bg); color: var(--text); }

/* Ankreuzfeld — 44 px Tippflaeche auch am Handy, ohne dass die Zeile
   auseinanderfaellt. */
.cl-check {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-height: 44px;
    margin-bottom: 1.2rem;
    cursor: pointer;
    font-size: 0.95rem;
    color: var(--text);
}
.cl-check input {
    flex: none;
    width: 20px;
    height: 20px;
    accent-color: var(--primary);
    cursor: pointer;
}

/* Die Nebendatei (SRT) steht gleichberechtigt neben dem Video, nicht als
   Fussnote darunter: wer die Untertitel nachbessern will, braucht sie. */
.cl-extra { white-space: nowrap; }

.cl-row { display: flex; gap: 0.8rem; }
.cl-row > .cl-field { flex: 1 1 0; min-width: 0; }
@media (max-width: 520px) { .cl-row { flex-direction: column; gap: 0; } }

/* „⏱ hier" übernimmt die Stelle aus der laufenden Vorschau — das ist der
   Grund, warum man Zeitmarken hier nicht abtippen muss. */
.cl-time-row { display: flex; gap: 0.5rem; align-items: stretch; }
.cl-time-row .cl-input { flex: 1; }
.cl-mini {
    flex: none;
    appearance: none;
    padding: 0 0.8rem;
    min-height: 44px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--primary);
    font-family: var(--font-body);
    font-size: 0.82rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color 0.25s ease, background 0.25s ease;
    -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) and (pointer: fine) {
    .cl-mini:hover { border-color: var(--primary); background: rgba(41,151,255,0.08); }
}

.cl-choice { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.cl-choice-btn {
    appearance: none;
    padding: 0.45rem 0.85rem;
    min-height: 40px;
    border-radius: var(--radius-full);
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-muted);
    font-family: var(--font-body);
    font-size: 0.86rem;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.3s ease, border-color 0.3s ease, background 0.3s ease, transform 0.3s cubic-bezier(0.16,1,0.3,1);
    -webkit-tap-highlight-color: transparent;
}
[data-theme="light"] .cl-choice-btn { background: rgba(0, 0, 0, 0.03); }
.cl-choice-btn.active {
    color: #fff;
    background: var(--primary);
    border-color: var(--primary);
    box-shadow: 0 4px 16px rgba(41, 151, 255, 0.32);
}
/* Mit dem Finger sind 40 px zu wenig — die Knoepfe stehen in einer Reihe
   dicht nebeneinander, und daneben zu tippen aendert die falsche
   Einstellung. 44 px ist der Richtwert, ab dem das zuverlaessig geht.
   Am Desktop bleibt es bei 40, dort ist die Maus genau genug. */
@media (pointer: coarse) {
    .cl-choice-btn { min-height: 44px; padding-top: 0.6rem; padding-bottom: 0.6rem; }
}

@media (hover: hover) and (pointer: fine) {
    .cl-choice-btn:not(.active):hover {
        color: var(--text);
        border-color: rgba(41, 151, 255, 0.35);
        transform: translateY(-1px);
    }
}

/* Aussehen kommt aus .cv-range (converter.css) — hier nur die Einbettung. */
.cl-range { flex: 1; width: 100%; }
.cl-range-row { display: flex; align-items: center; gap: 0.7rem; }
.cl-range-val {
    flex: none;
    min-width: 4.2em;
    text-align: right;
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
}

.cl-note { font-size: 0.88rem; color: var(--text-muted); line-height: 1.65; margin-bottom: 1.2rem; }
.cl-note em { color: var(--text); font-style: normal; font-weight: 600; }

.cl-aussicht {
    font-size: 0.92rem;
    color: var(--text-muted);
    line-height: 1.6;
    margin: 1rem 0;
    min-height: 3em;
}
.cl-aussicht strong { color: var(--text); }
.cl-aussicht.warn { color: #ff9f0a; }

/* --- Ergebnis --- */
.cl-result-meta {
    font-size: 0.88rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    margin-top: 0.3rem;
}

/* --- Übersichtsseite --- */
/* Acht Kacheln: mit 240 px passen drei Spalten und unten rechts bleibt ein
   Feld leer. Mit 190 px werden es vier Spalten — zwei volle Reihen. */
.cl-tool-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
    gap: 1rem;
    margin-top: 1.6rem;
}
.cl-tool {
    display: block;
    padding: 1.4rem;
    border-radius: 20px;
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.035);
    color: inherit;
    text-decoration: none;
    transition: border-color 0.35s ease, background 0.35s ease, transform 0.4s cubic-bezier(0.16,1,0.3,1);
}
[data-theme="light"] .cl-tool { background: rgba(0, 0, 0, 0.02); }
@media (hover: hover) and (pointer: fine) {
    .cl-tool:hover {
        border-color: rgba(41, 151, 255, 0.4);
        background: rgba(41, 151, 255, 0.06);
        transform: translateY(-3px);
    }
}
.cl-tool-emoji { font-size: 1.7rem; line-height: 1; display: block; margin-bottom: 0.6rem; }
.cl-tool h3 { font-size: 1.05rem; margin-bottom: 0.35rem; }
.cl-tool p { font-size: 0.88rem; color: var(--text-muted); line-height: 1.55; }

.cl-cat-text { color: var(--text-muted); font-size: 0.88rem; line-height: 1.6; }
.cl-more { text-align: center; margin-top: 2rem; font-size: 0.95rem; line-height: 1.7; }
.cl-more a { color: var(--primary); font-weight: 600; }