/* === Custom Scrollbar (Dark Theme) === */
:root {
    scrollbar-color: #3f3f46 #09090b; /* zinc-700 / zinc-950 */
    scrollbar-width: thin;
}

/* === Audio-Player Fortschrittsbalken === */
[data-progress] {
    transition: width 0.1s linear;
}

/* === Profilfoto-Platzhalter (wenn img nicht geladen werden kann) === */
.profile-placeholder::after {
    content: 'Foto hier einfügen';
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: #52525b; /* zinc-600 */
    font-size: 0.875rem;
    font-family: 'Inter', system-ui, sans-serif;
}

/* === Select-Dropdown Pfeil (Tailwind appearance-none entfernt den nativen Pfeil) === */
select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.875rem center;
    padding-right: 2.5rem;
}

/* === Fokus-Ring: konsistent überall === */
*:focus-visible {
    outline: 2px solid #c44a49;
    outline-offset: 2px;
}

/* === YouTube Inline-Player (yt-mount) === */
/* Füllt den absoluten Overlay-Container, egal ob YT ein Wrapper-div oder direkt ein iframe erzeugt */
.yt-mount > div    { width: 100% !important; height: 100% !important; }
.yt-mount iframe   { width: 100% !important; height: 100% !important; border: none; display: block; }

/* === Akkordeon (details / summary) === */
/* Browser-eigenes Dreieck entfernen */
summary::-webkit-details-marker { display: none; }
summary::marker               { display: none; }

/* Pfeil-Chevron dreht sich beim Öffnen */
.acc-chevron {
    transition: transform 0.2s ease;
}
details[open] > summary .acc-chevron {
    transform: rotate(90deg);
}