/* lapippa 2.0 — Player.
   Eigenbau statt Video.js 5.19.2 (Baujahr 2017) samt vier Erweiterungen und
   jQuery 1.11.1. Der alte Satz wog 1.089 KB roh; hier sind es CSS und JS
   zusammen unter 20 KB, ohne eine einzige fremde Ressource. */

*,*::before,*::after { box-sizing: border-box; }
html, body { margin:0; padding:0; height:100%; background:#000; overflow:hidden; }

.lp {
  position:relative; width:100%; height:100%; background:#000;
  font:14px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color:#fff; user-select:none; -webkit-tap-highlight-color:transparent;
}
.lp video { width:100%; height:100%; display:block; background:#000; object-fit:contain; }

/* --- Große Schaltfläche in der Mitte --- */
.lp-start {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  cursor:pointer; border:0; background:transparent; padding:0; margin:0;
}
.lp-start::after {
  content:""; width:74px; height:74px; border-radius:50%;
  background:rgba(0,0,0,.55) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M8 5v14l11-7z'/></svg>") no-repeat 54% 50%/34px 34px;
  transition:transform .15s ease, background-color .15s ease;
}
.lp-start:hover::after { transform:scale(1.08); background-color:rgba(0,0,0,.72); }
.lp.laeuft .lp-start { display:none; }

/* --- Bedienleiste --- */
.lp-leiste {
  position:absolute; left:0; right:0; bottom:0; padding:0 10px 8px;
  background:linear-gradient(to top, rgba(0,0,0,.82) 0%, rgba(0,0,0,.55) 55%, transparent 100%);
  opacity:1; transition:opacity .25s ease; z-index:3;
}
.lp.ruhig .lp-leiste { opacity:0; pointer-events:none; }
.lp.ruhig { cursor:none; }

.lp-knoepfe { display:flex; align-items:center; gap:4px; height:38px; }
.lp-btn {
  appearance:none; border:0; background:transparent; color:#fff; cursor:pointer;
  width:36px; height:36px; padding:7px; border-radius:5px; flex:0 0 auto;
}
.lp-btn:hover { background:rgba(255,255,255,.14); }
.lp-btn svg { width:100%; height:100%; fill:currentColor; display:block; }
.lp-zeit { font-variant-numeric:tabular-nums; font-size:12.5px; padding:0 6px; white-space:nowrap; }
.lp-fueller { flex:1 1 auto; }

/* --- Fortschritt --- */
.lp-spur {
  position:relative; height:16px; display:flex; align-items:center; cursor:pointer;
  margin:0 2px;
}
.lp-spur-bahn { position:relative; width:100%; height:4px; border-radius:2px; background:rgba(255,255,255,.28); transition:height .12s ease; }
.lp-spur:hover .lp-spur-bahn { height:6px; }
.lp-puffer, .lp-gespielt { position:absolute; left:0; top:0; bottom:0; border-radius:2px; }
.lp-puffer   { background:rgba(255,255,255,.34); }
.lp-gespielt { background:#e8a33d; }
.lp-griff {
  position:absolute; top:50%; width:12px; height:12px; margin:-6px 0 0 -6px; border-radius:50%;
  background:#e8a33d; opacity:0; transition:opacity .12s ease;
}
.lp-spur:hover .lp-griff { opacity:1; }

/* --- Zeitleisten-Vorschau --- */
.lp-vorschau {
  position:absolute; bottom:26px; width:160px; pointer-events:none; opacity:0;
  transition:opacity .12s ease; z-index:4; transform:translateX(-50%);
}
.lp-vorschau.an { opacity:1; }
.lp-vorschau-bild {
  width:160px; height:90px; border:2px solid rgba(255,255,255,.85); border-radius:4px;
  background-repeat:no-repeat; background-size:3200px 90px; background-color:#111;
}
.lp-vorschau-zeit {
  text-align:center; font-size:12px; font-variant-numeric:tabular-nums;
  margin-top:3px; text-shadow:0 1px 3px #000;
}

/* --- Lautstärke --- */
.lp-ton { display:flex; align-items:center; }
.lp-ton-regler {
  width:0; opacity:0; transition:width .18s ease, opacity .18s ease;
  appearance:none; height:4px; border-radius:2px; background:rgba(255,255,255,.35); outline:0; cursor:pointer;
}
.lp-ton:hover .lp-ton-regler, .lp-ton-regler:focus { width:72px; opacity:1; margin:0 6px 0 2px; }
.lp-ton-regler::-webkit-slider-thumb { appearance:none; width:11px; height:11px; border-radius:50%; background:#fff; }
.lp-ton-regler::-moz-range-thumb { width:11px; height:11px; border:0; border-radius:50%; background:#fff; }

/* --- Auflösungsmenü --- */
.lp-menue { position:relative; }
.lp-menue-liste {
  position:absolute; bottom:42px; right:0; min-width:98px; padding:5px 0; margin:0;
  list-style:none; background:rgba(18,18,18,.96); border-radius:7px;
  box-shadow:0 6px 22px rgba(0,0,0,.5); display:none;
}
.lp-menue.offen .lp-menue-liste { display:block; }
.lp-menue-liste li {
  padding:7px 14px; cursor:pointer; font-size:13px; white-space:nowrap;
}
.lp-menue-liste li:hover { background:rgba(255,255,255,.12); }
.lp-menue-liste li[aria-selected="true"] { color:#e8a33d; font-weight:600; }
.lp-aufloesung-text { font-size:12px; font-weight:600; letter-spacing:.02em; }

/* --- Logo --- */
.lp-logo { position:absolute; z-index:2; max-width:22%; max-height:16%; }
.lp-logo img { display:block; width:100%; height:auto; }
.lp-logo.top-right    { top:12px;    right:12px; }
.lp-logo.top-left     { top:12px;    left:12px; }
.lp-logo.bottom-right { bottom:52px; right:12px; }
.lp-logo.bottom-left  { bottom:52px; left:12px; }

/* --- Pausen-Werbung --- */
.lp-werbung {
  position:absolute; inset:0; z-index:5; display:none;
  align-items:center; justify-content:center; flex-direction:column;
  background:rgba(0,0,0,.72);
}
.lp-werbung.an { display:flex; }
.lp-werbung iframe { border:0; display:block; background:transparent; }
.lp-werbung-knoepfe { display:flex; gap:10px; margin-top:12px; }
.lp-werbung-knoepfe button {
  appearance:none; border:0; border-radius:5px; cursor:pointer;
  padding:8px 16px; font-size:13px; font-weight:600; font-family:inherit;
}
.lp-weiter { background:#e8a33d; color:#1a1a1a; }
.lp-schliessen { background:rgba(255,255,255,.18); color:#fff; }
.lp-weiter:hover { background:#f0b257; }
.lp-schliessen:hover { background:rgba(255,255,255,.28); }

/* --- Schmale Darstellung --- */
@media (max-width:420px) {
  .lp-zeit { font-size:11.5px; padding:0 3px; }
  .lp-btn { width:32px; height:32px; padding:6px; }
  .lp-vorschau, .lp-vorschau-bild { width:120px; }
  .lp-vorschau-bild { height:68px; background-size:2400px 68px; }
  .lp-ton:hover .lp-ton-regler { width:52px; }
}