/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Oct 24 2026 | 15:02:03 */
/* HO_Videokarte — Aussehen. Angelegt 24.10.2026.
   Uebernommen aus NN_Videokarte (CSS) von nicklas-nicklas.com (Stand 28.09.2026), angepasst an HORELEC:
   - Klassen hov- statt nnv-
   - Farben aus dem HO-CI: Tuerkis #6EC1E4 statt Bernstein, Navy #04093F statt Schiefer, Knopf Tuerkis mit weisser Schrift (Hover Indigo #2D4D8A)
   - Schrift Titillium Web statt Minerva Modern und Montserrat
   - Inhaltsbreite HORELEC 1380px statt 1250px: Karte erst ab 1768px Fensterbreite (1380 + 2 x 194), darunter Reiter
   - Kopfleiste HORELEC 80px: laufende Karte ab 120px statt 143px
   Gehoert zu HO_Videokarte (JS), das die Karte aus dem Platzhalter im Beitrag baut. */

.hov{--ruhe:clamp(168px, calc((100vw - 1380px) / 2 - 26px), 226px);--lauf:min(480px, calc((100vh - 150px) * 0.5625), calc((100vw - 1380px) / 2 + 260px));--abstand:26px;
  --akzent:#6EC1E4;--navy:#04093F;--linie:#E1E6EA;--nebel:#EEF3F8}
.hov-rand{position:fixed!important;right:var(--abstand)!important;top:50%!important;left:auto!important;
  z-index:10001;width:var(--ruhe)!important;display:block; /* ueber dem Kontakt-Knopf der Website (z-index 9999) */
  transform:translate(70px,-50%);opacity:0;pointer-events:none;
  transition:opacity .45s cubic-bezier(.22,.61,.36,1),transform .45s cubic-bezier(.22,.61,.36,1),width .3s ease}
.hov-rand.hov-da{opacity:1;transform:translate(0,-50%);pointer-events:auto}
.hov-rand.hov-laeuft{width:var(--lauf)!important;top:120px!important;transform:none!important}
.hov-rand.hov-laeuft.hov-da{transform:none!important}
.hov-knopf{display:block!important;width:100%!important;padding:0!important;margin:0!important;
  cursor:pointer;-webkit-appearance:none;appearance:none;background:#fff!important;
  border:1px solid var(--linie)!important;border-radius:18px!important;overflow:hidden;
  box-shadow:0 2px 6px rgba(4,9,63,.07),0 16px 40px rgba(4,9,63,.16);transition:transform .2s ease}
.hov-knopf:hover{transform:translateY(-3px);background:#fff!important}
.hov-knopf:focus,.hov-knopf:active,.hov-knopf:focus-visible{background:#fff!important;outline:none}
.hov-laeuft .hov-knopf{cursor:default;transform:none}
.hov-bild{display:block!important;position:relative;width:100%;aspect-ratio:9/16;
  background:var(--nebel);overflow:hidden}
.hov-bild>img{display:block;width:100%;height:100%;object-fit:cover;margin:0}
.hov-bild>video{display:none;position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;background:#000}
.hov-laeuft .hov-bild>video{display:block}
.hov-laeuft .hov-bild>img,.hov-laeuft .hov-schleier,.hov-laeuft .hov-taste{display:none}
.hov-schleier{display:block;position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(4,9,63,0) 60%,rgba(4,9,63,.26) 100%)}
.hov-taste{display:grid;place-items:center;position:absolute;left:50%;top:84%;
  transform:translate(-50%,-50%);width:64px;height:64px;border-radius:50%;
  background:rgba(255,255,255,.96);border:3px solid var(--akzent);box-shadow:0 6px 18px rgba(4,9,63,.3)}
@keyframes hov-puls{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.13)}}
.hov-puls .hov-taste{animation:hov-puls 1.1s ease-in-out 2}
.hov-laeuft .hov-zeile{display:none}
.hov-spitz{display:block;width:0;height:0;flex:none;margin-top:7px;border-style:solid;
  border-width:6px 0 6px 10px;border-color:transparent transparent transparent var(--akzent)}
.hov-zeile{display:flex;align-items:flex-start;gap:9px;padding:14px 13px 16px;
  font-family:"Titillium Web",Arial,sans-serif;font-size:18px;line-height:24px;color:var(--navy);text-align:left;white-space:normal!important}
.hov-text{display:block;min-width:0;white-space:normal!important;overflow-wrap:break-word;hyphens:auto}
.hov-schalt{position:absolute;top:-14px;right:-14px;left:auto;width:40px!important;height:40px;
  padding:0!important;border-radius:50%;z-index:3;background:#fff!important;
  border:1px solid var(--linie)!important;color:var(--navy)!important;font-size:24px;line-height:1;
  cursor:pointer;display:none;place-items:center;-webkit-appearance:none;appearance:none;
  box-shadow:0 3px 14px rgba(4,9,63,.28)}
.hov-schalt:hover,.hov-schalt:focus{background:#fff!important;outline:none;box-shadow:0 4px 18px rgba(4,9,63,.36)}
.hov-laeuft .hov-schalt{display:grid}

/* Abschlusskarte: erscheint 6 s vor Filmende. Fuehrt weiter auf den Cornerstone der Staffel.
   Knopf wie alle HORELEC-Buttons: weisse Schrift auf Tuerkis. */
.hov-ende{display:none;position:absolute;top:0;left:0;right:0;aspect-ratio:9/16;z-index:4;
  background:rgba(4,9,63,.9);flex-direction:column;align-items:center;justify-content:center;
  gap:16px;padding:18px;text-align:center;border-radius:18px 18px 0 0}
.hov-ende-an .hov-ende{display:flex}
.hov-ende p{margin:0;color:#fff;font-family:"Titillium Web",Arial,sans-serif;
  font-size:18px;line-height:25px;white-space:normal;max-width:100%}
.hov-knall{display:inline-block;background:var(--akzent)!important;color:#fff!important;text-decoration:none!important;
  font-family:"Titillium Web",Arial,sans-serif;font-size:16px;font-weight:600;line-height:1.35;
  box-sizing:border-box;max-width:100%;padding:13px 18px;border-radius:8px;white-space:normal;
  transition:background .2s ease}
.hov-knall:hover{background:#2D4D8A!important}
/* 24.10.2026: Kontaktknopf im Abspann (Wunsch Sabrina, wie bei IQ). Indigo mit weisser Schrift, damit er sich vom tuerkisen Weiter-Knopf abhebt. */
.hov-kontakt{display:inline-block;background:#2D4D8A!important;color:#fff!important;text-decoration:none!important;
  font-family:"Titillium Web",Arial,sans-serif;font-size:16px;font-weight:600;line-height:1.35;
  box-sizing:border-box;max-width:100%;padding:13px 18px;border-radius:8px;white-space:normal;transition:background .2s ease}
.hov-kontakt:hover{background:#04093F!important}
.hov-nochmal{background:none!important;border:0!important;padding:0!important;cursor:pointer;
  color:#CFD8DC!important;font-family:"Titillium Web",Arial,sans-serif;font-size:14px;
  text-decoration:underline;-webkit-appearance:none;appearance:none}
/* Unterhalb 1768px bleibt rechts neben dem 1380px-Inhalt kein Platz fuer die volle Karte.
   24.10.2026 (Wunsch Sabrina): Dort steht trotzdem eine kleine Karte mit Deckblatt und Unterzeile unten rechts,
   damit das Video nicht untergeht. Mit dem x wird sie zum schmalen Reiter (Klasse hov-zu, gilt fuer die Sitzung);
   ein Klick auf Karte oder Reiter klappt die Videokarte auf.
   Alle Breiten sind fest oder an vw/vh gebunden, nie an das Elternelement (Elementor-Container
   schrumpft auf seinen Inhalt; width:100% liess die Karte bei NN am 19.09.2026 auf 1px zusammenfallen). */
@media (max-width:1767px){
  @keyframes hov-reiter-ein{from{opacity:0;transform:translate(70px,-50%)}to{opacity:1;transform:translate(0,-50%)}}
  @keyframes hov-mini-ein{from{opacity:0;transform:translate(70px,0)}to{opacity:1;transform:translate(0,0)}}
  .hov-rand{opacity:1!important;pointer-events:auto!important}
  .hov-rand:not(.hov-zu){right:18px!important;left:auto!important;top:auto!important;bottom:96px!important;
    width:150px!important;margin:0!important;transform:none;animation:hov-mini-ein .55s .9s cubic-bezier(.22,.61,.36,1) both}
  .hov-rand:not(.hov-zu) .hov-zeile{font-size:14px;line-height:18px;padding:9px 10px 11px;gap:7px}
  .hov-rand:not(.hov-zu) .hov-spitz{margin-top:4px;border-width:5px 0 5px 8px}
  .hov-rand:not(.hov-zu) .hov-taste{width:44px;height:44px;border-width:2px}
  .hov-rand:not(.hov-zu) .hov-schalt{display:grid;width:32px!important;height:32px;top:-12px;right:-12px;font-size:20px}
  .hov-rand.hov-zu{right:0!important;top:50%!important;left:auto!important;
    width:56px!important;max-width:none!important;margin:0!important;
    animation:hov-reiter-ein .55s .9s cubic-bezier(.22,.61,.36,1) both;
    background:var(--akzent)!important;border-radius:16px 0 0 16px!important;overflow:hidden!important;
    box-shadow:0 6px 24px rgba(4,9,63,.22)!important}
  .hov-rand.hov-zu .hov-knopf{display:block!important;width:100%!important;background:transparent!important;border:0!important;padding:0!important}
  .hov-rand.hov-zu .hov-bild{aspect-ratio:auto!important;height:54px!important;width:100%!important;
    background:transparent!important;border-radius:0!important}
  .hov-rand.hov-zu .hov-bild img,.hov-rand.hov-zu .hov-bild video,.hov-rand.hov-zu .hov-schleier{display:none!important}
  .hov-rand.hov-zu .hov-taste{position:absolute!important;left:50%!important;top:50%!important;
    transform:translate(-50%,-50%)!important;width:32px!important;height:32px!important;border-width:2px!important}
  .hov-rand.hov-zu .hov-zeile{writing-mode:vertical-rl!important;display:block!important;padding:2px 0 14px!important;
    font-size:13.5px!important;line-height:16px!important;color:#fff!important;text-align:center;background:transparent!important}
  .hov-rand.hov-zu .hov-spitz{display:none!important}
  .hov-rand.hov-zu .hov-text{white-space:nowrap!important;color:#fff!important}
  .hov-rand.hov-zu .hov-schalt{display:none!important}
  .hov-rand.hov-laeuft{width:min(340px, calc(100vw - 36px), calc((100vh - 150px) * 0.5625))!important;
    right:18px!important;top:50%!important;bottom:auto!important;transform:translate(0,-50%)!important;animation:none!important;
    background:#fff!important;border-radius:18px!important;overflow:visible!important}
  .hov-rand.hov-laeuft.hov-da{transform:translate(0,-50%)!important}
  .hov-rand.hov-laeuft .hov-bild{aspect-ratio:9/16!important;height:auto!important;border-radius:18px 18px 0 0!important}
  .hov-rand.hov-laeuft .hov-bild video{display:block!important}
  .hov-rand.hov-laeuft .hov-zeile{writing-mode:horizontal-tb!important;display:flex!important;
    padding:14px 13px 16px!important;font-size:18px!important;line-height:24px!important;color:var(--navy)!important}
  .hov-rand.hov-laeuft .hov-spitz{display:block!important}
  .hov-rand.hov-laeuft .hov-text{white-space:normal!important;color:var(--navy)!important}
  .hov-rand.hov-laeuft .hov-schalt{display:grid!important}
  .hov-rand.hov-laeuft .hov-taste{display:none!important}
}
@media (max-width:1767px) and (prefers-reduced-motion:reduce){
  .hov-rand{animation:none!important}
  .hov-rand.hov-zu{transform:translate(0,-50%)!important}
}
/* Auf Telefonen (unter 600px): kleine Karte unten rechts (120px), nach dem x ein runder Knopf; aufgeklappt dieselbe Videokarte. */
@media (max-width:599px){
  @keyframes hov-knopf-ein{from{opacity:0;transform:translate(70px,0)}to{opacity:1;transform:translate(0,0)}}
  .hov-rand:not(.hov-zu){width:120px!important}
  .hov-rand:not(.hov-zu) .hov-zeile{font-size:12.5px;line-height:16px;padding:7px 8px 9px}
  .hov-rand.hov-zu{top:auto!important;bottom:96px!important;right:18px!important; /* ueber dem Kontakt-Knopf unten rechts */
    width:60px!important;height:60px!important;border-radius:50%!important;
    animation:hov-knopf-ein .55s .9s cubic-bezier(.22,.61,.36,1) both}
  .hov-rand.hov-zu .hov-bild{height:60px!important}
  .hov-rand.hov-zu .hov-zeile{display:none!important}
  .hov-rand.hov-zu .hov-taste{width:30px!important;height:30px!important}
  .hov-rand.hov-laeuft{top:50%!important;bottom:auto!important;right:18px!important;
    height:auto!important;border-radius:18px!important;transform:translate(0,-50%)!important;animation:none!important}
  .hov-rand.hov-laeuft.hov-da{transform:translate(0,-50%)!important}
}
@media (max-width:599px) and (prefers-reduced-motion:reduce){
  .hov-rand{animation:none!important}
}
@media (prefers-reduced-motion:reduce){.hov-rand{transition:none}.hov-puls .hov-taste{animation:none}}
/* iPhone/Safari (bei NN festgestellt 28.09.2026): geoeffnet ohne Animation, waagrecht und senkrecht
   mittig unter der Kopfleiste (80px + Luft). */
@media (max-width:599px){
  .hov-rand.hov-laeuft,.hov-rand.hov-laeuft.hov-da{animation:none!important;
    width:min(340px, calc(100vw - 48px), calc((100svh - 180px) * 0.5625))!important;
    left:50%!important;right:auto!important;top:calc(50% + 44px)!important;
    transform:translate(-50%,-50%)!important}
}