/*
 * Ergaenzungen zum uebernommenen Original-CSS.
 * Hier steht nur, was GoHighLevel frueher per JavaScript erzeugt hat.
 */

/* ------------------------------------------------------------------ Video */

.video-facade {
  position: relative;
  cursor: pointer;
  overflow: hidden;
  background: #000;
}

.video-facade__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.video-facade__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 68px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: rgba(0, 0, 0, .55);
  cursor: pointer;
  transition: background .2s ease;
}

.video-facade__play::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-40%, -50%);
  border-style: solid;
  border-width: 11px 0 11px 19px;
  border-color: transparent transparent transparent #fff;
}

.video-facade:hover .video-facade__play,
.video-facade__play:focus-visible {
  background: #cc0000;
}

.video-facade__note {
  position: absolute;
  right: 8px;
  bottom: 8px;
  max-width: 90%;
  padding: 4px 8px;
  border-radius: 4px;
  background: rgba(0, 0, 0, .55);
  color: #fff;
  font: 400 11px/1.3 "Lato", sans-serif;
}

.video-facade.is-playing {
  cursor: default;
}

.video-facade iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ------------------------------------------------------------- Menue Handy */

/* Die Leiste selbst bleibt wie im Original; nur das Aufklappen ist neu. */
@media (max-width: 767px) {
  .nav-menu-wrapper .cart-nav-wrapper .nav-menu {
    display: none;
  }

  .nav-menu-wrapper.nav-open .cart-nav-wrapper .nav-menu {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    padding: 8px 0 4px;
  }

  .nav-menu-wrapper.nav-open .cart-nav-wrapper .nav-menu .nav-menu-item {
    justify-content: center;
  }

  .nav-menu-wrapper.nav-open .cart-nav-wrapper .nav-menu .nav-menu-item a {
    width: 100%;
    justify-content: center;
    padding: 12px 20px;
  }
}

/* ------------------------------------------------------------- Einblenden */

/* Wird ausschliesslich von site.js gesetzt. Ohne JavaScript greift nichts
   davon und die Inhalte stehen einfach da - so wie sie sollen. */
.reveal {
  opacity: 0;
  transition: opacity .7s ease-out;
}

.reveal.is-visible {
  opacity: 1;
}

/* ------------------------------------------------------- Rechts-Fusszeile */

/* Steht auf jeder Seite. Impressum und Datenschutz kommen nur dort dazu, wo
   die Original-Fusszeile sie nicht schon hat (8 von 11 Seiten); die
   Kuendigungsschaltflaeche steht immer da - § 312k BGB verlangt sie
   "staendig verfuegbar". */
.legal-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 26px;
  padding: 22px 20px 26px;
  background: #073600;
  font: 400 15px/1.6 "Nunito Sans", system-ui, sans-serif;
}

.legal-bar a {
  color: #fcfbf2;
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 6px 4px;   /* groessere Tippflaeche auf dem Handy */
}

.legal-bar a:hover {
  color: #bac8b1;
}

/* Die Kuendigungsschaltflaeche muss "gut lesbar" sein (§ 312k Abs. 2 BGB) -
   also nicht kleiner und nicht leiser als der Rest der Zeile. Sie sieht
   deshalb aus wie ein Knopf und nicht wie ein Kleingedrucktes. */
.legal-bar .kuendigen-link {
  text-decoration: none;
  border: 1px solid #bac8b1;
  border-radius: 6px;
  padding: 7px 16px;
  font-weight: 700;
}

.legal-bar .kuendigen-link:hover {
  background: #bac8b1;
  color: #073600;
}

/* Der Weg in den Kursbereich. Steht in der Fusszeile jeder Seite, weil nur
   die Startseite eine sichtbare Kopfnavigation besitzt. */
.legal-bar .kursbereich-link {
  text-decoration: none;
  background: #bac8b1;
  color: #073600;
  border-radius: 6px;
  padding: 7px 16px;
  font-weight: 700;
}

.legal-bar .kursbereich-link:hover {
  background: #fcfbf2;
  color: #073600;
}

/* ---------------------------------------------------------- Terminkalender */

/* Der eingebettete Kalender von GoHighLevel. Steht erst da, wenn geklickt
   wurde - vorher ist der Kasten leer und ausgeblendet. */
.kalender-rahmen {
  max-width: 900px;
  margin: 28px auto 0;
  padding: 0 16px;
}

.kalender-rahmen iframe {
  display: block;
  width: 100%;
  height: 780px;
  border: 0;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 6px 26px rgba(7, 54, 0, .12);
}

@media (max-width: 700px) {
  .kalender-rahmen { padding: 0 8px; }
  .kalender-rahmen iframe { height: 900px; border-radius: 10px; }
}

/* ------------------------------------------------------ Anmelden (Kopfzeile) */

/* Die Navigationsliste von GoHighLevel ist in der statischen Kopie leer.
   build.mjs setzt genau einen Eintrag hinein: den Weg in den Kursbereich.
   Eigene Farben statt der CSS-Variablen des Originals - die sind auf einigen
   Seiten gar nicht gesetzt. */
.nav-menu .login-item { display: flex !important; align-items: center; }

.login-link {
  display: inline-block;
  font: 600 15px/1.3 "Nunito Sans", system-ui, sans-serif;
  color: #073600 !important;
  background: transparent;
  border: 1px solid rgba(7, 54, 0, .35);
  border-radius: 999px;
  padding: 8px 20px !important;
  text-decoration: none;
  white-space: nowrap;
  transition: background .2s ease, border-color .2s ease;
}

.login-link:hover {
  background: #073600;
  color: #fcfbf2 !important;
  border-color: #073600;
}

/* ------------------------------------------------------------- Kleinigkeiten */

/* Tastaturbedienung sichtbar machen - im Original fehlte das. */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid #073600;
  outline-offset: 2px;
}