/* 2-Klick-YouTube-Player (yt_consent.js). Geladen von login.html und tutorials.html. */

.yt-consent {
    position: relative;
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #3d4148;
    background: #000;
}

.yt-consent__preview {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    display: block;
}

.yt-consent__preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.yt-consent__play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 88px;
    height: 88px;
    border-radius: 50%;
    border: 0;
    background: rgba(26, 29, 35, 0.78);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.15s ease, background 0.15s ease;
    pointer-events: none; /* clicks handled by parent .yt-consent__preview */
}

.yt-consent__preview:hover .yt-consent__play,
.yt-consent__preview:focus-visible .yt-consent__play {
    transform: translate(-50%, -50%) scale(1.08);
    background: rgba(59, 130, 246, 0.92);
}

.yt-consent__preview:focus-visible {
    outline: 3px solid #3B82F6;
    outline-offset: -3px;
}

.yt-consent__play svg { margin-left: 4px; }

.yt-consent__confirm {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1.25rem;
    gap: 1rem;
    z-index: 2;
}

.yt-consent__confirm[hidden] { display: none; }

.yt-consent__confirm p {
    margin: 0;
    max-width: 520px;
    font-size: 0.9rem;
    line-height: 1.45;
}

.yt-consent__confirm a {
    color: #60a5fa;
    text-decoration: underline;
}

.yt-consent__confirm a:hover,
.yt-consent__confirm a:focus-visible {
    color: #fff;
    outline: none;
}

.yt-consent__accept {
    background: #3B82F6;
    color: #fff;
    border: 0;
    border-radius: 8px;
    padding: 0.65rem 1.4rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
}

.yt-consent__accept:hover {
    background: #2563EB;
    transform: translateY(-1px);
}

.yt-consent__accept:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.5);
}

.yt-consent--loaded iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* Tutorial-Raster (shared/tutorial_grid.html). Je Thema eine eigene .tut-row: Zieht eine Kachel auf
   (schmales Raster, unten), verschiebt sie nur ihre Zeile, und die Paare darunter bleiben zusammen. */

.tut-wrap { container: tut / inline-size; }

.tut-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.tut-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 24px;
}

.tut-grid .yt-consent,
.tut-missing {
    aspect-ratio: 16 / 9;
}

.tut-grid .yt-consent__play { width: 64px; height: 64px; }
.tut-grid .yt-consent__play svg { width: 36px; height: 36px; }

/* safe center + auto: Auf dem Handy ist die Kachel nur ~170 px hoch; der Knopf darf nie abgeschnitten werden. */
.tut-grid .yt-consent__confirm {
    padding: 0.75rem;
    gap: 0.6rem;
    justify-content: safe center;
    overflow-y: auto;
}

.tut-grid .yt-consent__confirm p {
    font-size: 0.75rem;
    line-height: 1.35;
}

.tut-grid .yt-consent__accept {
    padding: 0.45rem 1rem;
    font-size: 0.85rem;
}

.tut-missing {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #3d4148;
    background: #000;
    cursor: default;
}

.tut-missing img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: grayscale(1) opacity(.45);
}

.tut-missing-label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(26, 29, 35, 0.85);
    color: #fff;
    padding: 0.45rem 0.9rem;
    border-radius: 6px;
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
}

/* Gemessen wird das Raster, nicht das Fenster: Login bricht bei 860 px um, die App bei 768, und neben
   der Seitenleiste wird das Raster schon bei rund 1100 px schmal. Unter 640 px sind die Kacheln zu
   klein für Hinweis und Video, eine angetippte Kachel belegt dann ihre ganze Zeile.
   Muss hinter den Rasterregeln oben stehen (gleiche Spezifität, die Abfrage erhöht sie nicht). */
@container tut (width < 640px) {
    .tut-grid,
    .tut-row { gap: 12px; }

    .tut-grid .yt-consent__play { width: 40px; height: 40px; }
    .tut-grid .yt-consent__play svg { width: 22px; height: 22px; margin-left: 2px; }

    .tut-row > .yt-consent:has(> .yt-consent__confirm:not([hidden])),
    .tut-row > .yt-consent--loaded { grid-column: 1 / -1; }

    /* left/right statt left: 50%: sonst dürfte das Schild nur halb so breit werden wie die Kachel. */
    .tut-missing-label {
        left: 8px;
        right: 8px;
        width: fit-content;
        margin: 0 auto;
        transform: translateY(-50%);
        white-space: normal;
        text-align: center;
        font-size: 0.7rem;
        line-height: 1.3;
        padding: 0.3rem 0.5rem;
    }
}