/* ---------------------------------------------------------------------------
   Eigene Komponenten. Ergaenzt base.css und ersetzt die Teile, die frueher
   von der Baukasten-Runtime kamen: Slider, Lightbox, Scroll-Animationen.
   --------------------------------------------------------------------------- */

/* --- Bilder ---------------------------------------------------------------- */

/* Notwendige Ergaenzung zu den width/height-Attributen im Markup. Ohne diese Regel
   erzwingt das Attribut die Groesse in der Richtung, die das CSS offenlaesst:
   .image gibt nur eine Breite vor (Logo wurde auf 293px hoch gestreckt),
   .clients-image nur eine Hoehe (Kundenlogos wurden 256px breit).
   Mit auto/auto dienen die Attribute nur noch als Seitenverhaeltnis - der Platz
   ist vor dem Laden reserviert, die Darstellung bleibt unveraendert. Bilder, deren
   Masse das CSS ausdruecklich setzt, gewinnen ueber ihre hoehere Spezifitaet. */
img {
  width: auto;
  height: auto;
}

/* --- Hauptueberschrift ----------------------------------------------------- */

/* Die Hauptueberschrift ist jetzt eine h1 statt einer h2 (die Seite hatte gar keine).
   base.css bringt die Groessenangaben nur fuer h2 mit, deshalb hier dieselben Werte,
   damit sich am Aussehen nichts aendert. */
h1.heading {
  letter-spacing: 0.05em;
  margin-top: 20px;
  font-size: 32px;
  line-height: 36px;
}

/* --- Vergleichsliste ------------------------------------------------------- */

/* In der linken Spalte steht das Icon auf breiten Bildschirmen rechts vom Text
   (base.css blendet dort .front aus und .back ein). Mehrzeilige Eintraege sollen
   deshalb rechtsbuendig laufen, damit die Zeilen buendig am Icon stehen.
   Unter 992px wandert das Icon nach links - dann wieder linksbuendig. */
.comparelist-item.left .text-block {
  text-align: right;
}

@media screen and (max-width: 991px) {
  .comparelist-item.left .text-block {
    text-align: left;
  }
}

/* --- Silbentrennung -------------------------------------------------------- */

/* base.css setzt hyphens:auto. Zusammen mit lang="de" (im Export stand faelschlich
   lang="en") wuerde der Browser ab jetzt nach deutschen Mustern automatisch trennen
   und dadurch alle Umbrueche verschieben. Die Texte enthalten bereits von Hand
   gesetzte weiche Trennstriche - nur die sollen greifen. */
body,
.body {
  -webkit-hyphens: manual;
  hyphens: manual;
}

/* --- Weiches Scrollen zu Sprungzielen -------------------------------------- */

/* Mit JavaScript uebernimmt main.js das Scrollen: nur dort lassen sich Dauer
   steuern und das Ziel waehrend der Fahrt nachmessen. Ohne JavaScript bleibt
   wenigstens die Variante des Browsers. */
html.no-js {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html.no-js {
    scroll-behavior: auto;
  }
}

/* --- Icons (ersetzen den frueheren Icon-Font) ------------------------------ */

.lr-icon {
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: middle;
  fill: currentColor;
}

/* --- Slider ---------------------------------------------------------------- */

.lr-slider-mask {
  position: relative;
}

.lr-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--slide-duration, 500ms) ease;
}

.lr-slide.is-active {
  z-index: 1;
  opacity: 1;
  pointer-events: auto;
}

/* Pfeile sind jetzt echte Buttons und brauchen den Browser-Reset. */
.lr-slider-prev,
.lr-slider-next {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  font-family: inherit;
  font-size: 40px;
}

.lr-slider-prev:focus-visible,
.lr-slider-next:focus-visible,
.lr-slider-dot:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.lr-slider-dot {
  border: 0;
  padding: 0;
  appearance: none;
}

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

/* --- Scroll-Animationen ---------------------------------------------------- */

/* Startzustand nur setzen, wenn JS laeuft - sonst bliebe der Inhalt unsichtbar. */
.js [data-reveal] {
  opacity: 0;
}

.js [data-reveal='slide-left'] {
  transform: translateX(-100px);
}

.js [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
  transition:
    opacity 1s cubic-bezier(0.165, 0.84, 0.44, 1) var(--reveal-delay, 0ms),
    transform 1s cubic-bezier(0.165, 0.84, 0.44, 1) var(--reveal-delay, 0ms);
}

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] {
    opacity: 1;
    transform: none;
  }
}

/* --- Scroll-nach-oben-Button ----------------------------------------------- */

.scrolltopbutton {
  opacity: 0;
  pointer-events: none;
  color: #fff;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.scrolltopbutton.is-visible {
  opacity: 1;
  pointer-events: auto;
}

/* --- Honeypot -------------------------------------------------------------- */

/* Aus dem Viewport schieben statt display:none - letzteres erkennen viele Bots. */
.lr-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --- Formular-Rueckmeldung -------------------------------------------------- */

.lr-form-done.is-visible,
.lr-form-fail.is-visible {
  display: block;
}

/* --- YouTube-Vorschau ------------------------------------------------------ */

/* Der Player wird erst auf Klick nachgeladen. Bis dahin steht hier nur ein
   lokales Standbild - es geht keine Anfrage an Google raus. */
.lr-video-facade {
  position: absolute;
  inset: 0;
  appearance: none;
  border: 0;
  padding: 0;
  margin: 0;
  background: #000;
  cursor: pointer;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.lr-video-poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 0.2s ease;
}

.lr-video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: var(--accent-color);
  color: #fff;
  box-shadow: 0 2px 14px #0000004d;
  transition:
    background-color 0.2s ease,
    transform 0.2s ease;
}

.lr-video-play svg {
  width: 38px;
  height: 38px;
  /* Optischer Ausgleich: das Dreieck wirkt sonst nach links versetzt. */
  margin-left: 4px;
}

.lr-video-facade:hover .lr-video-play,
.lr-video-facade:focus-visible .lr-video-play {
  background: #5e8189;
  transform: translate(-50%, -50%) scale(1.06);
}

.lr-video-facade:hover .lr-video-poster {
  opacity: 0.85;
}

.lr-video-facade:focus-visible {
  outline: 3px solid var(--accent-color);
  outline-offset: 3px;
}

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

@media (max-width: 767px) {
  .lr-video-play {
    width: 60px;
    height: 60px;
  }

  .lr-video-play svg {
    width: 30px;
    height: 30px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lr-video-play,
  .lr-video-poster {
    transition: none;
  }

  .lr-video-facade:hover .lr-video-play,
  .lr-video-facade:focus-visible .lr-video-play {
    transform: translate(-50%, -50%);
  }
}

/* --- Lightbox -------------------------------------------------------------- */

.lr-lb {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000000e6;
  opacity: 0;
  visibility: hidden;
  /* Beim Schliessen erst nach dem Ausblenden verbergen, beim Oeffnen sofort
     sichtbar schalten - sonst laesst sich der Dialog nicht fokussieren. */
  transition:
    opacity 0.2s ease,
    visibility 0s linear 0.2s;
}

.lr-lb.is-open {
  opacity: 1;
  visibility: visible;
  transition:
    opacity 0.2s ease,
    visibility 0s linear 0s;
}

.lr-lb-figure {
  margin: 0;
  max-width: 96vw;
  max-height: 92vh;
}

.lr-lb-image {
  display: block;
  max-width: 96vw;
  max-height: 92vh;
  width: auto;
  height: auto;
  object-fit: contain;
}

.lr-lb-btn {
  position: absolute;
  appearance: none;
  background: #0000004d;
  border: 0;
  border-radius: 3px;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  font-size: 32px;
  transition: background-color 0.2s ease;
}

.lr-lb-btn:hover,
.lr-lb-btn:focus-visible {
  background: #00000099;
}

/* display:flex oben wuerde das hidden-Attribut sonst aushebeln. */
.lr-lb-btn[hidden] {
  display: none;
}

.lr-lb-close {
  top: 12px;
  right: 12px;
}

.lr-lb-prev {
  left: 12px;
}

.lr-lb-next {
  right: 12px;
}

.lr-lb-count {
  position: absolute;
  bottom: 12px;
  left: 0;
  right: 0;
  text-align: center;
  color: #ffffffb3;
  font-size: 14px;
}

.lr-lb-spinner {
  position: absolute;
  width: 40px;
  height: 40px;
  border: 4px solid #ffffff40;
  border-bottom-color: #fff;
  border-radius: 50%;
  animation: lr-spin 0.8s linear infinite;
}

.lr-lb-spinner[hidden] {
  display: none;
}

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

.lr-noscroll {
  overflow: hidden;
}

@media (max-width: 767px) {
  .lr-lb-btn {
    width: 40px;
    height: 40px;
    font-size: 26px;
  }
}