/* ============================================================
   STARTHAUS — video.css · Filmspieler
   ------------------------------------------------------------
   Zwei Bauformen, ein Spieler:

     .vid            Standbild + Abspielknopf. Nichts läuft von
                     allein, der Ton ist von Anfang an dabei.
     .vid.vid--loop  Bewegtes Bild: startet stumm und in Schleife,
                     sobald es sichtbar ist. Ton lässt sich
                     zuschalten, gespult werden kann trotzdem.

   Warum die Bedienleiste selbst gebaut ist und nicht `controls`:
   die eingebauten Leisten sehen in jedem Browser anders aus, sind
   in Safari halb durchsichtig weiß und zerreißen auf einer dunklen
   Seite jeden Eindruck. Die Bedienelemente hier sind ganz normale
   <button> und ein <input type=range> — Tastatur und Screenreader
   bekommen also das echte Verhalten, nicht eine Nachbildung.
   ============================================================ */

/* ---------- Eigene Farben, absichtlich ohne Design-Tokens ----------
   Die Bedienelemente liegen IMMER auf einem Foto — auch auf den hellen
   Bereichsseiten (Skiverleih, Sportshop, Sale tragen body[data-hell]).
   Dort dreht bereiche.css --snow auf #141A20 und --line auf ein dunkles
   Grau. Wer hier die Tokens benutzt, bekommt auf dem Skiverleih
   schwarze Schrift auf einem abgedunkelten Foto: gemessen rgb(20,26,32)
   auf einem Scrim von rgba(7,12,18,.6). Unlesbar, und es fällt beim
   Bauen nicht auf, weil die Startseite dunkel ist und richtig aussieht.

   Deshalb führt der Spieler eigene Werte. Sie hängen nicht am Thema der
   Seite, sondern am Untergrund — und der ist immer ein Foto.
   (Die Bildunterschrift darunter steht auf dem Seitengrund und benutzt
   weiter die Tokens. Das ist kein Widerspruch, sondern der Punkt.) */
.vid{
  --v-hell:#F4F9FD;
  --v-linie:rgba(244,249,253,.20);
  --v-linie-2:rgba(244,249,253,.34);
  --v-akzent:#8FD3F4;
  --v-akzent-tief:#2C6B95;

  position:relative;
  aspect-ratio:16/9;
  border-radius:var(--r-l);
  overflow:hidden;
  background:#070C12;
  border:1px solid rgba(244,249,253,.14);
  isolation:isolate;
}

/* Das Video selbst.
   opacity 0, bis es wirklich Bilder hat — sonst blitzt bei manchen
   Browsern kurz ein schwarzes Rechteck über dem Standbild auf. */
.vid__media{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  opacity:0;
  transition:opacity .45s ease;
}
.vid.is-bereit .vid__media{opacity:1}

/* Standbild — liegt darunter und bleibt liegen. Es verschwindet
   nicht, es wird nur überdeckt: so ist beim Spulen über einen noch
   nicht geladenen Bereich nie ein Loch zu sehen. */
.vid__poster{position:absolute; inset:0; z-index:0}
.vid__poster .ph{width:100%; height:100%; border-radius:0}
.vid__poster img{width:100%; height:100%; object-fit:cover}

.vid__media{z-index:1}

/* ---------- Großer Abspielknopf ---------- */
.vid__start{
  position:absolute; inset:0; z-index:3;
  display:grid; place-items:center;
  border:0; padding:0; margin:0;
  width:100%; height:100%;
  background:linear-gradient(180deg,rgba(7,12,18,.30),rgba(7,12,18,.62));
  color:var(--v-hell);
  cursor:pointer;
  transition:opacity .3s ease, visibility .3s;
}
.vid.is-gestartet .vid__start{opacity:0; visibility:hidden}

.vid__start i{
  width:clamp(64px,7vw,88px); aspect-ratio:1;
  border-radius:50%;
  display:grid; place-items:center;
  background:rgba(244,249,253,.14);
  border:1px solid var(--v-linie-2);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  transition:transform .25s ease, background .25s ease;
}
.vid__start i::after{
  content:""; margin-left:5px;
  border-style:solid; border-width:13px 0 13px 21px;
  border-color:transparent transparent transparent var(--v-hell);
}
.vid__start:hover i,.vid__start:focus-visible i{
  transform:scale(1.07); background:rgba(143,211,244,.28);
}
.vid__start b{
  display:block;
  margin-top:16px;
  font:600 .82rem/1.3 var(--body);
  letter-spacing:.10em; text-transform:uppercase;
  text-shadow:0 1px 12px rgba(7,12,18,.8);
}
.vid__start small{
  display:block; margin-top:5px;
  font:400 .74rem/1.3 var(--mono);
  color:rgba(244,249,253,.72);
}

/* ---------- Bedienleiste ---------- */
.vid__bar{
  position:absolute; left:0; right:0; bottom:0; z-index:4;
  display:flex; align-items:center; gap:10px;
  padding:26px 14px 12px;
  background:linear-gradient(180deg,transparent,rgba(7,12,18,.86));
  opacity:0; transform:translateY(6px);
  transition:opacity .25s ease, transform .25s ease;
  pointer-events:none;
}
/* Sichtbar, wenn: angehalten, Zeiger drüber, oder irgendwas darin
   den Tastaturfokus hat. Der Fokusfall ist der wichtige — ohne ihn
   bedient man mit der Tastatur eine unsichtbare Leiste. */
.vid.is-gestartet:hover .vid__bar,
.vid.is-gestartet.is-pause .vid__bar,
.vid.is-gestartet:focus-within .vid__bar{
  opacity:1; transform:none; pointer-events:auto;
}
@media (hover:none){
  .vid.is-gestartet .vid__bar{opacity:1; transform:none; pointer-events:auto}
}

/*  44 px, nicht 38. Gemessen bei 390 px waren alle drei Knöpfe und die
    Spulleiste 38 px hoch — unter der Grenze, ab der ein Daumen
    zuverlässig trifft. Die sichtbare Fläche bleibt schlank, die
    Trefferfläche wächst über padding. */
.vid__btn{
  flex:0 0 auto;
  width:44px; height:44px;
  display:grid; place-items:center;
  border:1px solid var(--v-linie); border-radius:11px;
  background:rgba(7,12,18,.5);
  color:var(--v-hell); cursor:pointer;
  transition:background .2s ease, border-color .2s ease;
}
.vid__btn:hover{background:rgba(143,211,244,.22); border-color:var(--v-linie-2)}
.vid__btn svg{width:17px; height:17px; fill:currentColor; pointer-events:none}
.vid__btn .ausblenden{display:none}
.vid.is-pause .vid__btn--spielen .i-pause{display:none}
.vid.is-pause .vid__btn--spielen .i-play{display:block}
.vid__btn--spielen .i-play{display:none}
.vid.is-stumm .vid__btn--ton .i-laut{display:none}
.vid.is-stumm .vid__btn--ton .i-stumm{display:block}
.vid__btn--ton .i-stumm{display:none}

/* Zeitanzeige — Ziffern gleich breit, sonst zappelt die Leiste
   bei jedem Sekundenwechsel. */
.vid__zeit{
  flex:0 0 auto;
  font:400 .76rem/1 var(--mono);
  color:var(--v-hell);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
  text-shadow:0 1px 8px rgba(7,12,18,.9);
}
.vid__zeit span{color:rgba(244,249,253,.55)}

/* Spulleiste. Der geladene Bereich liegt als zweite Spur darunter —
   so sieht man beim Vorspulen, wohin man springen kann, ohne zu
   warten. */
.vid__spulen{
  flex:1 1 auto; position:relative; min-width:60px;
  height:44px; display:flex; align-items:center;
}
.vid__spulen::before,.vid__spur{
  content:""; position:absolute; left:0; height:4px; border-radius:3px;
  pointer-events:none;
}
.vid__spulen::before{right:0; background:rgba(244,249,253,.22)}
.vid__spur{width:0; background:rgba(244,249,253,.34)}

.vid__spulen input{
  -webkit-appearance:none; appearance:none;
  position:relative; z-index:2;
  width:100%; height:44px; margin:0;
  background:transparent; cursor:pointer;
}
.vid__spulen input::-webkit-slider-runnable-track{
  height:4px; border-radius:3px;
  background:linear-gradient(90deg,var(--v-akzent) var(--fortschritt,0%),transparent 0);
}
.vid__spulen input::-moz-range-track{height:4px; border-radius:3px; background:transparent}
.vid__spulen input::-moz-range-progress{height:4px; border-radius:3px; background:var(--v-akzent)}
.vid__spulen input::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:13px; height:13px; margin-top:-4.5px;
  border-radius:50%; background:var(--v-hell);
  border:2px solid var(--v-akzent-tief);
  box-shadow:0 1px 6px rgba(7,12,18,.7);
}
.vid__spulen input::-moz-range-thumb{
  width:13px; height:13px; border-radius:50%;
  background:var(--v-hell); border:2px solid var(--v-akzent-tief);
}
.vid__spulen input:focus-visible{outline:2px solid var(--v-akzent); outline-offset:4px; border-radius:8px}

/* Lautstärke — auf schmalen Geräten weg. Dort regelt man die
   Lautstärke am Gerät, nicht auf der Seite. */
.vid__laut{flex:0 0 auto; width:74px; display:flex; align-items:center}
.vid__laut input{
  -webkit-appearance:none; appearance:none;
  width:100%; height:24px; margin:0; background:transparent; cursor:pointer;
}
.vid__laut input::-webkit-slider-runnable-track{
  height:3px; border-radius:3px;
  background:linear-gradient(90deg,var(--v-hell) var(--pegel,100%),rgba(244,249,253,.22) 0);
}
.vid__laut input::-moz-range-track{height:3px; border-radius:3px; background:rgba(244,249,253,.22)}
.vid__laut input::-moz-range-progress{height:3px; border-radius:3px; background:var(--v-hell)}
.vid__laut input::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:10px; height:10px; margin-top:-3.5px; border-radius:50%; background:var(--v-hell);
}
.vid__laut input::-moz-range-thumb{width:10px;height:10px;border-radius:50%;background:var(--v-hell);border:0}
.vid__laut input:focus-visible{outline:2px solid var(--v-akzent); outline-offset:3px; border-radius:8px}
@media (max-width:640px){ .vid__laut{display:none} }

/* ---------- Ton-zuschalten-Knopf der Schleifen-Bauform ----------
   Bei einem Film, der stumm von allein läuft, ist „Ton an" die
   einzige Bedienung, die jemand sucht. Deshalb steht sie oben rechts
   und nicht unten in der Leiste, die erst beim Zeigen erscheint. */
.vid__ton{
  position:absolute; top:14px; right:14px; z-index:5;
  display:none; align-items:center; gap:8px;
  padding:9px 14px 9px 11px;
  border:1px solid var(--v-linie); border-radius:999px;
  background:rgba(7,12,18,.58);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  color:var(--v-hell); cursor:pointer;
  font:600 .74rem/1 var(--body); letter-spacing:.08em; text-transform:uppercase;
  transition:background .2s ease;
}
.vid--loop.is-gestartet .vid__ton{display:flex}
.vid__ton:hover{background:rgba(143,211,244,.28)}
.vid__ton svg{width:15px; height:15px; fill:currentColor}
.vid:not(.is-stumm) .vid__ton .i-stumm{display:none}
.vid.is-stumm .vid__ton .i-laut{display:none}

/* ---------- Rahmen um den Spieler ---------- */
.vid-block{position:relative}
.vid-block .vid{box-shadow:0 30px 80px -40px rgba(0,0,0,.9)}
.vid-bu{
  margin:14px 2px 0;
  font:400 .82rem/1.5 var(--body);
  color:var(--dim);
}
.vid-bu b{color:var(--text); font-weight:600}

/* ---------- Bewegung reduzieren ----------
   Wer im Betriebssystem „Bewegung reduzieren" eingeschaltet hat,
   bekommt kein Video, das von allein losläuft — nur das Standbild
   mit Abspielknopf. Das ist keine Geschmacksfrage: für Menschen mit
   vestibulären Beschwerden ist ungefragte Bewegung ein Symptom. */
@media (prefers-reduced-motion:reduce){
  .vid__media,.vid__start,.vid__bar{transition:none}
}

/* ---------- Auf dem Handy bis an den Rand ---------------------------
   Rückmeldung: „Das Video auf der Startseite könnte auf der
   Mobilversion noch mal ein Stückchen größer sein."

   Er hat recht, und der Grund ist Arithmetik: Der Spieler steht in
   `.wrap`, und das hat auf schmalen Geräten links und rechts je 20 px
   Rand (`--gut`). Bei 390 px Fensterbreite bleiben 350 px — im
   16:9-Format also 197 px Höhe. Auf einem Bildschirm, der 780 px hoch
   ist, ist das ein Viertel.

   Der Rand ist für Fließtext richtig; ein Bild braucht ihn nicht. Der
   Spieler tritt deshalb unter 720 px aus der Spalte heraus und läuft
   bis an beide Kanten: 390 statt 350 px, das sind 219 px Höhe — gut
   11 % mehr Bildfläche.

   `calc(50% - 50vw)` statt fester Werte: das funktioniert unabhängig
   davon, wie breit `--gut` gerade ist, und bleibt richtig, wenn der
   Rand später einmal anders gesetzt wird.

   Die Ecken werden gerade, sobald der Spieler die Kante berührt —
   eine Rundung, die am Bildschirmrand abgeschnitten wird, sieht nach
   Fehler aus. Die Bildunterschrift behält ihren Rand: sie ist Text.
*/
@media (max-width:720px){
  .vid-block .vid{
    margin-left:calc(50% - 50vw);
    margin-right:calc(50% - 50vw);
    width:100vw;
    border-radius:0;
    border-left:0;
    border-right:0;
  }
  .vid-bu{margin-left:0;margin-right:0}
}

/*  Auf einem 390-px-Schirm ist der Spieler 219 px hoch. Die
    Bedienleiste bringt es mit Polster auf rund 70 px — das ist ein
    Drittel des Bildes, dauerhaft, weil sie auf Tippgeräten immer
    sichtbar bleibt. Also schlanker: weniger Vorlauf im Verlauf,
    engere Abstände, kleinere Zeitanzeige. Die Trefferflächen der
    Knöpfe bleiben bei 44 px — daran wird nicht gespart, sie sind nur
    dichter beieinander. */
@media (max-width:720px){
  .vid__bar{padding:18px 8px 8px; gap:4px}
  .vid__btn{width:44px; height:44px; border:0; background:rgba(7,12,18,.42)}
  .vid__btn svg{width:19px; height:19px}
  .vid__zeit{font-size:.68rem}
  .vid__spulen{min-width:40px}
  .vid__ton{top:10px; right:10px; padding:8px 12px 8px 10px; font-size:.68rem}
  .vid__start b{font-size:.74rem; margin-top:12px}
  .vid__start small{font-size:.68rem}
}