/*
 * pcl-video.css — looks for [pcl_video].
 *
 * Colours come from the theme's own custom properties where they exist
 * (exzellent-2026 defines them via theme.json), with fallbacks so the player
 * also works on a theme that defines nothing.
 *
 * No @font-face and no external URL: the player must not pull anything from
 * elsewhere, which is the whole point of building it instead of embedding one.
 *
 * Since 0.16.0 every control lies ON the picture, in every state. That used to
 * be the fullscreen layout only; the bar below the video is gone. Fullscreen
 * therefore adds almost nothing now beyond letting the 16:9 box go.
 */

.pcl-video {
    /* Named by ROLE, not by palette or by place - the same move pcl-audio
       made in 1.3.0, and for the same reason: in a skin called "petrol", a
       variable called `--epa-petrol: #ffffff` reads like a bug. The mapping
       lives in pcl-audio/skins-farbflaechen.md §3 and was not invented here.

       Renamed in 0.18.0: `bar` -> `surface`, `on-bar` -> `on-surface`,
       `deep` -> `accent-deep`. `--pclv-focus` is new, it used to borrow the
       accent. */
    --pclv-accent: var(--wp--preset--color--accent, #92dadd);
    /* Fallback lines up with --epa-accent-deep. It used to fall back to
       petrol (#225c5e) while reading the accent-deep preset (#6fc4c8) - two
       different colours from one declaration. On exzellent the preset wins
       and it never showed; on a theme without these colours the two players
       drifted apart. */
    --pclv-accent-deep: var(--wp--preset--color--accent-deep, #6fc4c8);
    /* Same story: --epa-ink falls back to #3f3f3f, this one fell to #1a1a1a. */
    --pclv-ink: var(--wp--preset--color--contrast, #3f3f3f);

    /* The surface controls sit ON: the discs behind the three buttons. Until
       0.18.0 this variable was called `--pclv-bar`, held the old solid bar
       colour, and had no reader left at all - the bar took a gradient in
       0.16.0 and nothing else ever used it. */
    --pclv-surface: rgba(0, 0, 0, 0.55);
    --pclv-on-surface: #fff;
    /* Schrift auf dem ANGEFASSTEN Knopf. Beim Hover wechselt die Flaeche auf
       --pclv-accent-deep; ohne eine eigene Rolle bliebe das Symbol auf
       --pclv-on-surface stehen, und ein heller Skin mit dunklem Symbol waere
       genau dann unsichtbar, wenn der Finger darauf liegt. */
    --pclv-on-accent: #fff;
    /* The darkening under the bar, as a whole gradient rather than a colour:
       it needs three stops at three opacities, and a single colour cannot
       carry that without color-mix(). A skin replaces the whole value. */
    --pclv-scrim: linear-gradient(to top, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.6) 60%, rgba(0, 0, 0, 0));
    /* Schrift auf dem Verlauf: die beiden Zeitangaben und das Vollbild-Symbol.
       Getrennt von --pclv-on-surface, weil die beiden auf verschiedenen
       Gruenden liegen - das Knopfsymbol auf der Scheibe, die Zeiten auf dem
       Verlauf. Ein Skin mit heller Scheibe und dunklem Symbol haette die
       Zeiten sonst dunkel auf dunkel gesetzt. */
    --pclv-on-scrim: #fff;

    /* Deliberately turquoise, where pcl-audio sets petrol. Not drift: the
       name is the same in both, only the value differs, because this ring
       lies on a black picture and that one on a light card. */
    --pclv-focus: var(--pclv-accent);

    --pclv-radius: 6px;

    /* Symmetrical, and deliberately not `0` at the top: the shortcode renders a
       plain div, so the theme's block gap does not apply to it. With
       `margin-top: 0` the player sat flush against the paragraph above it -
       measured at exactly 0px on /video-kurs, because the preceding paragraph
       carries no bottom margin either. */
    margin: 1.5rem 0;
    /* No max-width here (until 0.41.9: 100%). In a block theme's constrained
       layout WordPress gives each child the content width
       (`.is-layout-constrained > :where(...) { max-width: content-size }`) with
       the same specificity, and ours, loading later, won: on kommunarden's page
       kommfeuer-live-2026-das-programm the player ran 1800px wide next to 800px
       text (PC'L, 14.09.2026). A block element never grows past its parent anyway. */
}

/* 16:9 box that keeps its height before any metadata arrives, so nothing
   jumps once the video loads (CLS 0). Every control is a child of this box,
   so the rounding applies to all four corners now. */
.pcl-video__stage {
    position: relative;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: var(--pclv-radius);
    overflow: hidden;
}

/* A square video gets a square box, as wide as a 16:9 one (PC'L, 13.09.2026,
   "2b"). Everything else keeps 16:9, portrait with bars at the sides. The class
   comes from the server when it knows the video, otherwise from pcl-video.js.
   Fullscreen still wins: its selector is more specific. */
.pcl-video--square .pcl-video__stage {
    aspect-ratio: 1 / 1;
}

.pcl-video__el {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #000;
}

/* FluentCommunity styles every video in a post: `.feed_md_content video,
   .feed_body video { margin: 10px 0; width: 100%; height: auto }` (app_css.css,
   measured on kommunarden 14.09.2026), and one class of ours loses against a class
   plus an element. The margin pushed the picture 10px down - a black bar on top
   (0.41.8). height: auto let a portrait video grow to its own ratio - 638x1135 in
   a 638x359 stage, cut off instead of shown with bars at the sides (0.41.9, PC'L's
   test with a 478x850 clip). Two classes, so this wins whatever loads last. */
.pcl-video .pcl-video__el {
    margin: 0;
    width: 100%;
    height: 100%;
}

/* ---- transport in the picture ---- */

/* The centred group: skip back, play/pause, skip forward. A flex row, so the
   skip buttons can never end up on top of the play button however wide the
   player gets - overlap is not a thing that has to be avoided by hand here.
   The group spans the whole stage but takes NO pointer events; only its three
   buttons do. Everything else falls through to the <video> underneath, where a
   click pauses - the behaviour that existed before this layer did. */
.pcl-video__centre {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(1rem, 6%, 3.5rem);
    pointer-events: none;
    /* `.pcl-video__btn` takes `color: inherit`, which used to mean the bar's
       white. Out here it would inherit the page's text colour - measured as
       black icons on a black picture. */
    color: var(--pclv-on-surface);
}

.pcl-video__centre > * { pointer-events: auto; }

/* Der ganzflaechige Schalter. Liegt ueber dem Video und unter allem anderen,
   ist durchsichtig und immer aktiv. Bis 0.20.0 lag dieselbe Funktion auf dem
   <video> UND auf dem grossen Knopf - zwei Stellen fuer eine Sache, und ein
   eigener Mechanismus musste verhindern, dass ein verborgener Knopf
   mitgetroffen wird. */
.pcl-video__surface {
    position: absolute;
    inset: 0;
    z-index: 1;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.pcl-video__big {
    /* aspect-ratio instead of a second clamp: percentage width and percentage
       height resolve against different boxes, which made the circle an oval
       (96x92). One dimension, one ratio. */
    flex: 0 0 auto;
    width: clamp(58px, 14%, 96px);
    height: auto;
    aspect-ratio: 1;
    padding: 0;
    border: 0;
    background: none;
    /* Nur Anzeige: Der Druck geht durch ihn hindurch an die Flaeche darunter.
       Deshalb auch kein `cursor: pointer` - die Flaeche bringt ihren eigenen
       mit, und zwar ueberall im Bild. */
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.pcl-video__big svg { width: 100%; height: 100%; display: block; }
/* No outline. The ring made the button a badge on top of the picture; without
   it the disc stays a disc and the film keeps the frame. The fill carries a
   little more weight instead, so the white glyph still reads on a bright
   scene - that is the only job the ring had left. */
.pcl-video__big-bg { fill: var(--pclv-surface); }
.pcl-video__big-icon { fill: var(--pclv-on-surface); }

/* Der Fokusring wird am Symbol gezeichnet, obwohl die FLAECHE den Fokus
   haelt: ein Rahmen um das ganze Bild waere genau das, was PC’L nie wollte. */
.pcl-video__surface:focus-visible { outline: none; }
.pcl-video__surface:focus-visible ~ .pcl-video__centre .pcl-video__big-bg { fill: var(--pclv-accent-deep); }
.pcl-video__surface:focus-visible ~ .pcl-video__centre .pcl-video__big-icon { fill: var(--pclv-on-accent); }
.pcl-video__surface:focus-visible ~ .pcl-video__centre .pcl-video__big {
    outline: 2px solid var(--pclv-focus);
    outline-offset: 4px;
    border-radius: 50%;
}

/* Hover only where a pointer can actually hover. On a touch screen :hover
   sticks after a tap until something else is tapped, so a highlight set this
   way stays lit long after the finger is gone - the button then looks active
   while nothing is. `:active` covers the touch case properly: it lights up
   while the finger is down and clears itself on release, with no scroll
   handler and no JS involved. */
@media (hover: hover) and (pointer: fine) {
    .pcl-video__surface:hover ~ .pcl-video__centre .pcl-video__big-bg { fill: var(--pclv-accent-deep); }
    .pcl-video__surface:hover ~ .pcl-video__centre .pcl-video__big-icon { fill: var(--pclv-on-accent); }
    .pcl-video__surface:hover ~ .pcl-video__centre .pcl-video__big { transform: scale(1.06); }
}

.pcl-video__surface:active ~ .pcl-video__centre .pcl-video__big-bg { fill: var(--pclv-accent-deep); }
.pcl-video__surface:active ~ .pcl-video__centre .pcl-video__big-icon { fill: var(--pclv-on-accent); }
/* The tap that only wakes the controls (touch, video running, controls hidden)
   must not light the button up: nothing happens on it. Set by pcl-video.js
   for the length of that one tap, since 0.29.1. */
.pcl-video.is-waking .pcl-video__surface:active ~ .pcl-video__centre .pcl-video__big-bg { fill: var(--pclv-surface); }
.pcl-video.is-waking .pcl-video__surface:active ~ .pcl-video__centre .pcl-video__big-icon { fill: var(--pclv-on-surface); }

/* No browser tap highlight anywhere in the player (since 0.29.2). The surface
   and the timeline already had it off; the buttons did not, and on Android a
   blind tap onto the hidden fullscreen button drew a blue square around it the
   moment it appeared - the tap was swallowed, but it looked pressed. Seen in
   PC'L's screen recording of 13.09.2026. */
.pcl-video,
.pcl-video * { -webkit-tap-highlight-color: transparent; }
.pcl-video__big:focus-visible .pcl-video__big-icon { fill: var(--pclv-on-accent); }

.pcl-video.is-playing .pcl-video__big-play { display: none; }
.pcl-video.is-paused .pcl-video__big-pause { display: none; }

/* The spinner occupies the same spot. While it turns, the button gets out of
   its way instead of showing through it. */
.pcl-video.is-buffering .pcl-video__big {
    opacity: 0;
    pointer-events: none;
}

.pcl-video__spinner {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 42px;
    height: 42px;
    border: 3px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: pclv-spin 0.8s linear infinite;
    pointer-events: none;
}

@keyframes pclv-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .pcl-video__spinner { animation-duration: 2.4s; }
    .pcl-video__big { transition: none; }
    .pcl-video__surface:hover ~ .pcl-video__centre .pcl-video__big { transform: none; }
    .pcl-video__skip { transition: none; }
}

/* ---- control bar ---- */

/* Bottom edge of the picture: elapsed, timeline, total, fullscreen. One row -
   but one that cannot wrap. The old bar under the video had four buttons in it
   and wrapped on narrow screens: the timeline dropped into a line of its own
   and the two timestamps ended up squeezed between the buttons, so the bar
   stopped reading as "elapsed, position, total". The fix back then was a
   second row; here there is no room for one, so `nowrap` plus a track that may
   shrink to nothing takes its place. The failure mode is not unlikely now, it
   is impossible.

   Side padding is 0.75rem, not the 1.3rem of the old bar. That value matched
   the audio player's card, which is 1.3rem of solid colour; over a picture the
   same inset eats 12% of a phone-width player and pushes the timeline into the
   middle third of the screen. */
.pcl-video__bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding: 1.6rem 0.75rem 0.45rem;
    /* Gradient instead of a solid bar: bright picture content stays readable
       behind the controls without boxing them in. */
    background: var(--pclv-scrim);
    color: var(--pclv-on-scrim);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.pcl-video__barrow {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.55rem;
}

/* ---- idle: the controls get out of the way ---- */
/* Was fullscreen-only until 0.16.0, for the good reason that hiding a bar
   which sits below the picture would make the page jump. It lies on the
   picture now, so it can fade everywhere. Only ever while playing - the JS
   never arms the timer on a paused video, because a paused player with no
   visible controls looks broken. */

.pcl-video.is-idle .pcl-video__bar {
    opacity: 0;
    transform: translateY(0.6rem);
    pointer-events: none;
}

/* Was bis 0.16.0 ein Zustand war, sind jetzt zwei. In Ruhe faellt alles weg -
   Leiste, Zeitleiste, Zeiten, Vollbild, die beiden Skip-Flaechen. Der grosse
   Knopf faellt nur mit, WENN das Video laeuft. Steht es, bleibt er als einziges
   sichtbar: ein stehendes Video ohne jeden Hinweis darauf, dass es eines ist,
   waere ein Standbild. */
.pcl-video.is-idle .pcl-video__skip {
    opacity: 0;
    pointer-events: none;
}

.pcl-video.is-idle.is-playing .pcl-video__big {
    opacity: 0;
    pointer-events: none;
}

/* The cursor only disappears in fullscreen. On a page, a video that swallows
   the mouse pointer while everything around it still needs one is a nuisance,
   not a cinema. */
.pcl-video:fullscreen.is-idle { cursor: none; }

@media (prefers-reduced-motion: reduce) {
    .pcl-video__bar { transition: opacity 0.25s ease; }
    .pcl-video.is-idle .pcl-video__bar { transform: none; }
}

.pcl-video__btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: none;
    color: inherit;
    cursor: pointer;
}

.pcl-video__btn svg { width: 21px; height: 21px; fill: currentColor; }
.pcl-video__btn text { fill: currentColor; stroke: none; font-family: inherit; }

/* The two skip surfaces. Deliberately bigger than the 34px they had in the old
   bar: they sit on the picture now, where a thumb aims at them without a row of
   neighbours to orient by. Round like the play button, a touch smaller, and
   without its ring - the play button stays the one thing the eye finds first.

   This block has to come AFTER the generic `.pcl-video__btn` rules above, not
   with the rest of the centre group: both are a single class, so nothing but
   source order decides. Standing earlier, the buttons measured 34x34 and
   transparent. */
.pcl-video__skip {
    width: clamp(46px, 10%, 64px);
    height: auto;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--pclv-surface);
}

.pcl-video__skip svg { width: 58%; height: 58%; }

/* Same fade as the bar - they appear and disappear together. */
.pcl-video__skip { transition: opacity 0.25s ease; }
/* Same split as on the big button: hover for real pointers, :active for touch.
   See the note there. The skip buttons carry their own dark disc, so they get
   their own hover colour instead of the bar button's translucent white - which
   would otherwise replace the disc and make them flash pale. */
@media (hover: hover) and (pointer: fine) {
    .pcl-video__btn:hover { background: rgba(255, 255, 255, 0.16); }
    .pcl-video__skip:hover { background: var(--pclv-accent-deep); color: var(--pclv-on-accent); }
}
.pcl-video__btn:active { background: rgba(255, 255, 255, 0.16); }
.pcl-video__skip:active { background: var(--pclv-accent-deep); color: var(--pclv-on-accent); }
/* The waking tap presses nothing, so nothing may look pressed (see is-waking in
   pcl-video.js). */
.pcl-video.is-waking .pcl-video__btn:active { background: none; }
.pcl-video.is-waking .pcl-video__skip:active { background: var(--pclv-surface); color: var(--pclv-on-surface); }

.pcl-video__time {
    flex: 0 0 auto;
    min-width: 2.9em;
    font-size: 0.82rem;
    font-variant-numeric: tabular-nums;
    opacity: 0.95;
    /* The bar is transparent over whatever the picture shows. Without a shadow
       the timestamps vanish into a bright frame. */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

/* Right-aligned so the total time sits flush against the fullscreen button,
   the same way the audio player does it. */
.pcl-video__dur { text-align: right; }

/* ---- timeline ---- */
/* 28px tall hit area with a 6px visible bar: the hit area is what a thumb needs,
   the rail is what the eye wants. 0.13.0 briefly pulled the rail to the audio
   player's 8px so both would match; on the dark bar under the picture that read
   as too heavy, so it is back at 6px. The hit area is unchanged either way -
   this is purely how thick the line looks. */

.pcl-video__track {
    position: relative;
    flex: 1 1 auto;
    /* `min-width: 0` is what lets the row keep its promise not to wrap: a flex
       item's automatic minimum size is its content, and without this the track
       refuses to shrink past it and pushes the timestamps out of the line. */
    min-width: 0;
    height: 28px;
    margin: 0 0.15rem;
    padding: 11px 0;
    box-sizing: border-box;
    cursor: pointer;
    /* `pan-y` hands vertical gestures to the browser's scrolling before any JS
       runs, and it is the single most effective part of the scroll fix. Until
       0.13.0 this was `none`: a touch that started on the bar could not scroll
       the page at all, so on a phone every scroll across the timeline seeked.
       Horizontal panning stays with us - that is the scrub. */
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

/* Safety net for the second contact during a momentum fling: while the page is
   scrolling the bar takes no input at all. Set from JS, see pcl-video.js. */
.pcl-video__track.is-locked { pointer-events: none; }

/* The rail is its own box, not a background gradient on the track. A gradient
   sits inside a 28px-tall element, so the element's border-radius never
   reaches it and the rail ends up square — while the played bar above it is
   rounded. That mismatch showed as "round on the left, sharp on the right". */
.pcl-video__track::before {
    content: "";
    position: absolute;
    top: 11px;
    bottom: 11px;
    left: 0;
    right: 0;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.28);
}

.pcl-video__buffer,
.pcl-video__played {
    position: absolute;
    top: 11px;
    bottom: 11px;
    left: 0;
    border-radius: 3px;
    pointer-events: none;
}

.pcl-video__buffer { background: rgba(255, 255, 255, 0.3); width: 0; }
.pcl-video__played { background: var(--pclv-accent); width: 0; }

/* The knob marks the current position and is always visible, so the timeline
   reads as draggable at a glance. Its `left` is set from JS; the negative
   margin centres it on that point. pointer-events stay off so the track keeps
   receiving the drag — the knob is a marker, not a handle. */
.pcl-video__knob {
    position: absolute;
    top: 50%;
    left: 0;
    width: 12px;
    height: 12px;
    margin: -6px 0 0 -6px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
    pointer-events: none;
    transition: width 0.12s ease, height 0.12s ease, margin 0.12s ease;
}

/* Bigger while dragging, while focused, and in the armed state. `is-armed`
   marks the two-stage touch behaviour: the first tap only arms the bar, the
   second one seeks. Without visible feedback that first tap would read as a
   dead control. */
.pcl-video__track:focus-visible .pcl-video__knob,
.pcl-video__track.is-armed .pcl-video__knob,
.pcl-video__track.is-scrubbing .pcl-video__knob {
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
}

/* Hover belongs to real pointers only. On a touch screen :hover sticks after a
   tap until something else is tapped, so the knob stayed big even after
   scrolling had disarmed the bar - the feedback then said "active" while the
   bar was not. Since 0.15.0 the hover rule is fenced off to devices that can
   actually hover, which leaves `is-armed` as the only thing driving the size on
   a phone. */
@media (hover: hover) and (pointer: fine) {
    .pcl-video__track:hover .pcl-video__knob {
        width: 16px;
        height: 16px;
        margin: -8px 0 0 -8px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pcl-video__knob { transition: none; }
}

/* Focus rings only for keyboard users, matching the rest of the site.
   The reset has to cover EVERY focusable part, not just the buttons: a
   div[tabindex] like the timeline gets the browser's default ring on plain
   :focus, and Chrome shows it after a mouse click too. */
.pcl-video:focus,
.pcl-video__btn:focus,
.pcl-video__track:focus,
.pcl-video__surface:focus {
    outline: none;
}

.pcl-video__btn:focus-visible,
.pcl-video__track:focus-visible {
    outline: 2px solid var(--pclv-focus);
    outline-offset: 2px;
}

/* The player container never draws a ring, not even for keyboard users: it has
   tabindex="-1" and is therefore not a tab stop, so nobody can land on it by
   tabbing. It only takes focus on click, where a ring would be noise. Keyboard
   users tab to the buttons and the timeline, and those do show their ring. */
.pcl-video:focus,
.pcl-video:focus-visible {
    outline: none;
}

/* ---- fullscreen ---- */
/* Almost nothing is left to do here since the controls lie on the picture in
   every state: the 16:9 box gives way, the rounding goes, and the bar gets a
   little more room at the bottom edge of a screen-filling picture. */

.pcl-video:fullscreen {
    width: 100%;
    height: 100%;
    margin: 0;
    background: #000;
}

.pcl-video:fullscreen .pcl-video__stage {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    border-radius: 0;
}

.pcl-video:fullscreen .pcl-video__bar {
    padding-bottom: 0.9rem;
}

.pcl-video:fullscreen .pcl-video__caption {
    display: none;
}

.pcl-video__caption {
    margin: 0.5rem 0 0;
    font-size: 0.92rem;
    color: var(--pclv-ink);
}

.pcl-video__reload {
    margin-left: 0.4rem;
    padding: 0.15rem 0.6rem;
    border: 1px solid currentColor;
    border-radius: 3px;
    background: none;
    color: inherit;
    font: inherit;
    font-size: 0.85em;
    cursor: pointer;
}

@media (hover: hover) and (pointer: fine) {
    .pcl-video__reload:hover { background: rgba(0, 0, 0, 0.06); }
}
.pcl-video__reload:active { background: rgba(0, 0, 0, 0.06); }

.pcl-video__notice,
.pcl-video__error {
    margin: 0.5rem 0 0;
    padding: 0.5rem 0.7rem;
    border-left: 3px solid #b3261e;
    background: rgba(179, 38, 30, 0.07);
    font-size: 0.9rem;
}

/* In a FluentCommunity post the player sits inside .feed_body, and a long post
   gets FC's "Mehr anzeigen" (.expand-button) laid over the end of the text:
   position absolute, no z-index. The surface (z-index 1), the centre buttons and
   the bar (2) stacked above it and took its clicks (PC'L, 13.09.2026). A stacking
   context of its own keeps those numbers inside the player; the button, later in
   the document, lies on top again. Scoped to posts: exzellent is untouched. */
.feed_body .pcl-video {
    isolation: isolate;
}

/* ---- Skins ---- */
/* Reines CSS: eine Klasse am Wrapper, die Rollen neu belegt. Gegenstueck zu
   `.ep-player--skin-*` in pcl-audio 1.3.0, gleiche drei Namen.

   Die WERTE sind andere, und das ist kein Auseinanderlaufen: Der Audioplayer
   sitzt auf einer hellen Karte, dieser hier auf einem schwarzen Bild. `nebel`
   und `tuerkis` leben dort von getoentem Papier - auf einem Bild gibt es kein
   Papier, nur Scheiben, die etwas verdecken. Was ein Skin hier aendert, sind
   deshalb die Scheiben und der Akzent, nicht der Grund.

   Was KEIN Skin anfasst: die schwarze Buehne, Schiene und Puffer der
   Zeitleiste, der Griff, der Spinner, der Schattenriss der Zeitangaben. Die
   liegen auf fremdem Bildinhalt und muessen vor jedem Motiv lesen - da ist
   Weiss-auf-halbtransparent keine Geschmacksfrage. */

/* nebel: helle Scheiben, petrolfarbene Symbole. Der leichteste der drei, und
   der groesste Gegensatz zum Standard. */
.pcl-video--skin-nebel {
    --pclv-surface: rgba(240, 247, 247, 0.88);
    --pclv-on-surface: #225c5e;
    --pclv-accent: #6fc4c8;
    --pclv-accent-deep: #225c5e;
    --pclv-on-accent: #fff;
    --pclv-focus: #92dadd;
}

/* petrol: die Hausfarbe als Flaeche, weisse Symbole darauf. */
.pcl-video--skin-petrol {
    --pclv-surface: rgba(34, 92, 94, 0.85);
    --pclv-on-surface: #fff;
    --pclv-accent: #92dadd;
    --pclv-accent-deep: #6fc4c8;
    --pclv-on-accent: #225c5e;
    --pclv-focus: #92dadd;
}

/* tuerkis: Akzentfarbe als Flaeche. Der Fortschritt bleibt tuerkis, damit
   Knopf und Zeitleiste dieselbe Farbe sprechen. */
.pcl-video--skin-tuerkis {
    --pclv-surface: rgba(146, 218, 221, 0.88);
    --pclv-on-surface: #225c5e;
    --pclv-accent: #92dadd;
    --pclv-accent-deep: #225c5e;
    --pclv-on-accent: #fff;
    --pclv-focus: #fff;
}

/* ---- narrow screens ---- */
/* Only the fullscreen button grows for touch; the skip buttons are already
   well past 40px on their own clamp, and the timeline's hit area was never
   width-dependent. The rule deliberately names `__full` rather than `__btn`:
   the skip buttons carry that class too and would lose their clamp to it. */

@media (max-width: 28rem) {
    .pcl-video__time { font-size: 0.78rem; min-width: 2.7em; }
    .pcl-video__full { width: 40px; height: 40px; }
    .pcl-video__barrow { gap: 0.4rem; }
    .pcl-video__bar { padding: 1.4rem 0.55rem 0.4rem; }
}

/* FluentCommunity media slot (since 0.23.1).

   FluentCommunity renders media into .feed_media_ext_video, which sets
   line-height: 0 - harmless for the iframe it expects, fatal for real text.
   The player sets no line-height of its own and inherits the zero: measured in
   the portal, the time readouts collapsed to a height of 0.

   The value is the ratio the player has on exzellent-praesentieren.de, where it
   was signed off (theme line-height 29.21px at 17.7px, the time readout 21.65px
   at 13.12px - both 1.65). Unitless on purpose, so it scales with the portal's
   own font size. Scoped to the slot: on every other page the player keeps
   inheriting whatever the theme gives it, as before.

   margin: 0 since 0.23.2. The player carries 24px above and below for running
   text. In the slot those margins collapse through FluentCommunity's wrappers,
   which have no padding or border: the video sat 24px lower than a Presto embed
   in the same place, and the slot was 24px taller (361px against 337px). */
.feed_media_ext_video .pcl-video {
    line-height: 1.65;
    margin: 0;
}

/* The player while Bunny still encodes a fresh upload (since 0.31.0, see
   PortalUpload::processing() and processing() in pcl-video.js). Sits under the
   picture like .pcl-video__error, but as information, not as a fault. The
   explicit line-height matters in FluentCommunity's media slot, which sets 0. */
.pcl-video__wait {
    margin: 0.5rem 0 0;
    padding: 0.5rem 0.7rem;
    border-left: 3px solid var(--pclv-accent-deep, #2a9d8f);
    background: rgba(42, 157, 143, 0.08);
    font-size: 0.9rem;
    line-height: 1.4;
}

/* ---- Embeds of other providers behind a question (0.39.0) ----
   Consent::placeholderHtml() and pcl-video.js. The picture is our own copy of the
   provider's preview; until it exists the box stays dark. The ratio comes from the
   original iframe (pcl-video.js), 16:9 until then. */
.pclv-consent {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 6px;
    background: #1d2327;
    color: #fff;
}
.pclv-consent__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
}
.pclv-consent__play {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(56px, 14%, 88px);
    aspect-ratio: 1;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.68);
    cursor: pointer;
}
.pclv-consent__play:hover { background: rgba(0, 0, 0, 0.85); }
.pclv-consent__icon {
    width: 0;
    height: 0;
    margin-left: 6px;
    border-style: solid;
    border-width: 14px 0 14px 24px;
    border-color: transparent transparent transparent #fff;
}
.pclv-consent__caption {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: 28px 12px 10px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.78));
    font-size: 13px;
    line-height: 1.35;
    text-align: left;
    pointer-events: none;
}
.pclv-consent__title { font-weight: 600; }
.pclv-consent__ask {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    overflow: auto;
    padding: 16px;
    background: rgba(0, 0, 0, 0.86);
    text-align: center;
}
.pclv-consent__ask p { max-width: 34em; margin: 0; font-size: 15px; line-height: 1.45; }
.pclv-consent__buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.pclv-consent__load,
.pclv-consent__cancel {
    padding: 8px 16px;
    border: 1px solid #fff;
    border-radius: 6px;
    font: inherit;
    font-size: 14px;
    cursor: pointer;
}
.pclv-consent__load { background: #fff; color: #1d2327; }
.pclv-consent__cancel { background: transparent; color: #fff; }
.pclv-consent :focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.pclv-consent__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* FluentCommunity only shows an oembed as video when its html holds a <video> (Consent). */
.pclv-consent .pclv-consent__marker { display: none !important; }
@media (max-width: 30rem) {
    .pclv-consent__ask { gap: 8px; padding: 10px; }
    .pclv-consent__ask p { font-size: 13px; }
}

/* A video for chosen people only (Audience, 0.43.0): the others see the poster
   and one line instead of the player. Nothing in it can be clicked. */
.pcl-video--restricted .pcl-video__poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    margin: 0;
    object-fit: contain;
}
.pcl-video--restricted .pcl-video__restricted {
    position: absolute;
    left: 50%;
    bottom: 1rem;
    transform: translateX(-50%);
    width: max-content;
    max-width: calc(100% - 2rem);
    margin: 0;
    padding: 0.45rem 0.9rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.72);
    color: #fff;
    font-size: 0.9rem;
    line-height: 1.35;
    text-align: center;
}