/* ===========================================================================
   Übungsskizzen: Anzeige, Abspieler und Editor
   ---------------------------------------------------------------------------
   Die Skizze selbst wird NICHT über diese Datei eingefärbt. Ihre Farben stehen
   fest in skizze.js, weil aus demselben SVG das PNG für PDF und Word entsteht
   und eine Skizze in --ink dort weiß auf weiß wäre. Hier steht nur, was um die
   Skizze herum liegt: Rahmen, Werkzeugleiste, Knöpfe, Schrittleiste.

   Die weiße Fläche der Skizze ist deshalb im dunklen Design ein Fremdkörper.
   Das ist Absicht: sie ist ein Dokument, kein Bedienelement, und sieht auf dem
   Schirm so aus, wie sie später auf dem Papier aussieht.
   =========================================================================== */

/* --- Anzeige in der Übungsansicht ---------------------------------------- */
.skz-block { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }

.skz-rahmen {
    background: #fff;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    overflow: hidden;
}
.skz-rahmen svg { display: block; width: 100%; height: auto; }

.skz-steuerung {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.skz-steuerung .skz-stand {
    font-size: 0.86rem;
    opacity: 0.75;
    margin-left: 4px;
}

.skz-knopf {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: var(--feld-hoehe, 38px);
    padding: 0 12px;
    border: 1px solid var(--border-light);
    border-radius: 6px;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
}
.skz-knopf:hover:not(:disabled) { border-color: var(--tigers-yellow); color: var(--tigers-yellow-ink, inherit); }
.skz-knopf:disabled { opacity: 0.45; cursor: default; }
.skz-knopf:focus-visible { outline: 2px solid var(--tigers-yellow); outline-offset: 2px; }

/* Vorschauen der einzelnen Schritte unter der Skizze */
.skz-vorschauen { display: flex; flex-wrap: wrap; gap: 8px; }
.skz-vorschau {
    width: 96px;
    padding: 0;
    border: 2px solid var(--border-light);
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
    overflow: hidden;
}
.skz-vorschau svg { display: block; width: 100%; height: auto; }
.skz-vorschau.ist-aktiv { border-color: var(--tigers-yellow); }

/* --- Vollbild ------------------------------------------------------------ */
/* Kein <dialog>: die Übungsansicht liegt selbst schon in einem Overlay, und
   zwei gestapelte Dialoge haben im Portal bereits einmal dazu geführt, dass
   der äußere nicht mehr schließbar war. */
.skz-vollbild {
    position: fixed;
    inset: 0;
    z-index: 1200;
    background: rgba(0, 0, 0, .88);
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
}
.skz-vollbild .skz-rahmen { flex: 1 1 auto; min-height: 0; display: flex; }
.skz-vollbild .skz-rahmen svg { width: 100%; height: 100%; object-fit: contain; }
.skz-vollbild .skz-steuerung { justify-content: center; }
.skz-vollbild .skz-knopf { background: rgba(255, 255, 255, .1); color: #fff; border-color: rgba(255, 255, 255, .3); }

/* --- Editor -------------------------------------------------------------- */
.skz-editor {
    display: grid;
    grid-template-columns: 190px 1fr;
    grid-template-areas: "werkzeuge buehne" "leiste leiste";
    gap: 12px;
    min-height: 0;
}
.skz-werkzeuge {
    grid-area: werkzeuge;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow-y: auto;
    max-height: 62vh;
}
.skz-gruppe { display: flex; flex-direction: column; gap: 6px; }
.skz-gruppe-titel {
    font-size: 0.74rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    opacity: 0.7;
}
.skz-gruppe-knoepfe { display: flex; flex-wrap: wrap; gap: 6px; }

/* 44 px ist kein gerundeter Wert, sondern die Größe, unter der ein Ziel mit
   dem Finger nicht mehr zuverlässig getroffen wird. Der Editor wird auf dem
   Tablet in der Halle bedient. */
.skz-wz {
    width: 44px;
    height: 44px;
    padding: 3px;
    border: 1px solid var(--border-light);
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
}
.skz-wz:hover { border-color: var(--tigers-yellow); }
.skz-wz.ist-aktiv { border-color: var(--tigers-yellow); box-shadow: 0 0 0 2px var(--tigers-yellow-22); }
/* Der Zeiger steht als einziges Werkzeug für "nichts setzen" und bekommt
   deshalb ein Icon statt einer Symbolzeichnung. */
.skz-wz-zeiger { display: flex; align-items: center; justify-content: center; font-size: 1rem; }
.skz-wz:focus-visible { outline: 2px solid var(--tigers-yellow); outline-offset: 1px; }
.skz-wz-bild { display: block; width: 100%; height: 100%; }

.skz-buehne { grid-area: buehne; position: relative; min-width: 0; }
/* Das Seitenverhaeltnis steckt in der Feldart und wird von skizze.js als
   Klasse gesetzt. Ohne das ist der weisse Rahmen breiter als das Feld, und der
   Trainer tippt neben die Flaeche, auf der er zeichnen will. */
.skz-svg.ist-halb, .skz-svg.ist-leer { aspect-ratio: 1 / 1; }
.skz-svg.ist-ganz { aspect-ratio: 1 / 2; }

.skz-svg {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    max-height: 62vh;
    background: #fff;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    /* Ohne das rollt das Tablet beim Ziehen die Seite mit, statt das Symbol
       zu bewegen — Pointer-Events allein verhindern das nicht. */
    touch-action: none;
    cursor: crosshair;
}
.skz-hinweis {
    position: absolute;
    left: 50%;
    bottom: 12px;
    transform: translateX(-50%);
    background: var(--danger-red, #a5301f);
    color: #fff;
    font-size: 0.86rem;
    padding: 6px 12px;
    border-radius: 6px;
}

.skz-leiste {
    grid-area: leiste;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.skz-schritte { display: flex; flex-wrap: wrap; gap: 6px; }
.skz-schritt {
    min-width: 44px;
    min-height: 38px;
    padding: 0 10px;
    border: 1px solid var(--border-light);
    border-radius: 6px;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
}
.skz-schritt.ist-aktiv { border-color: var(--tigers-yellow); background: var(--tigers-yellow-12); }
.skz-schritt:focus-visible { outline: 2px solid var(--tigers-yellow); outline-offset: 2px; }
.skz-plus, .skz-weg { font-size: 0.86rem; }

.skz-werte { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.skz-werte label { display: flex; align-items: center; gap: 6px; font-size: 0.86rem; }
/* Die Portal-Grundregel gibt Feldern `padding: 12px 14px`. Zusammen mit einer
   festen Höhe von 38px und box-sizing: border-box bleiben nur 14px für den
   Text — die Schrift wurde oben und unten angeschnitten und war im Feld nicht
   mehr zu lesen. Deshalb hier weniger Polsterung statt mehr Höhe: die Leiste
   soll flach bleiben. */
.skz-werte select,
.skz-werte input[type="text"] {
    height: var(--feld-hoehe, 38px);
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 10px;
}
.skz-werte input[type="text"] { width: 110px; }
/* Drehknöpfe: gleiche Größe wie die Werkzeuge, damit sie mit dem Finger
   sicher zu treffen sind. */
.skz-drehen { display: inline-flex; gap: 4px; }
.skz-dreh {
    width: 44px;
    height: var(--feld-hoehe, 38px);
    border: 1px solid var(--border-light);
    border-radius: 6px;
    background: transparent;
    color: inherit;
    cursor: pointer;
}
.skz-dreh:disabled { opacity: 0.45; cursor: default; }
.skz-dreh:not(:disabled):hover { border-color: var(--tigers-yellow); }
.skz-dreh:focus-visible { outline: 2px solid var(--tigers-yellow); outline-offset: 2px; }

.skz-loeschen {
    min-height: var(--feld-hoehe, 38px);
    padding: 0 12px;
    border: 1px solid var(--border-light);
    border-radius: 6px;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
}
.skz-loeschen:disabled { opacity: 0.45; cursor: default; }
.skz-loeschen:not(:disabled):hover { border-color: var(--danger-red); color: var(--danger-red); }

/* Auf dem Tablet quer bleibt das Raster; hochkant und auf dem Telefon wandert
   die Werkzeugleiste über das Feld, damit das Feld die volle Breite bekommt. */
@media (max-width: 780px) {
    .skz-editor {
        grid-template-columns: 1fr;
        grid-template-areas: "werkzeuge" "buehne" "leiste";
    }
    .skz-werkzeuge { flex-direction: row; flex-wrap: wrap; max-height: none; }
    .skz-gruppe { flex: 1 1 auto; }
    .skz-svg { max-height: 52vh; }
}

/* --- Freihand-Farbauswahl ----------------------------------------------- */
.skz-farben-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
    padding: 4px;
    background: rgba(0, 0, 0, 0.04);
    border-radius: 6px;
}
.skz-farb-swatch {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2px solid #ffffff;
    box-shadow: 0 0 0 1px var(--border-light);
    cursor: pointer;
    padding: 0;
    transition: transform 0.1s ease;
}
.skz-farb-swatch:hover {
    transform: scale(1.15);
}
.skz-farb-swatch.ist-aktiv {
    box-shadow: 0 0 0 2px var(--tigers-yellow, #fdee17), 0 0 4px rgba(0,0,0,0.3);
    transform: scale(1.1);
}