/* Korrekturen und Ersatz fuer Funktionen, die im Original von JavaScript kamen.
   Reihenfolge: wird als letztes Stylesheet geladen. */

/* 1. Boxed-Layout: Original begrenzt die Seite auf 1200px und zentriert sie. */
html, body { margin: 0; padding: 0; }
body { background-color: #fff; }

/* 2. Vertikaler Header links: das Original setzt den Abstand per JS. */
#mk-theme-container { padding-left: 300px; box-sizing: border-box; }

/* 3. Rev-Slider ohne JavaScript: erste Folie sichtbar, restliche ausblenden. */
.rev_slider_wrapper .tp-revslider-mainul > li { display: none; }
.rev_slider_wrapper .tp-revslider-mainul > li:first-child { display: block; }
.tp-caption { visibility: visible !important; opacity: 1 !important; }
.tp-arr-wrapper, .tparrows, .tp-bannertimer, .rev_slider_wrapper .tp-leftarrow,
.rev_slider_wrapper .tp-rightarrow { display: none !important; }

/* 4. Formular im Footer: statische Fassung ohne wpforms-JS. */
.wpforms-field { margin-bottom: 12px; }
.wpforms-field-label { display: block; font-weight: bold; }
.wpforms-field input[type="text"] { width: 100%; box-sizing: border-box; }
.wpforms-submit-container { margin-top: 8px; }
.wpforms-submit { cursor: pointer; }

/* 5. Facebook-Widget: im Original ein iframe-Plugin, hier ein einfacher Link. */
.widget_text .textwidget a { text-decoration: underline; }

/* Ab hier: Mobil-Ansicht (bis 780px, gleicher Bruch wie im Theme). */

@media only screen and (max-width: 780px) {

  /* 6. Galerie-Shortcode (Startseite, Kosmetik, Waxing, Basische Anwendungen,
     Basische Produkte, Ueber mich): Im Original stehen die Bilder absolut auf
     Desktop-Koordinaten (left: 0/223/446/669/892 px) in einem 437 px hohen
     Kasten. Auf dem Telefon ist der Kasten 322 px breit, die Bilder liegen
     trotzdem 223 px auseinander und schieben sich uebereinander.
     Hier: Fluss-Layout, ein Bild unter dem anderen, volle Breite. */
  .mk-gallery-shortcode {
    height: auto !important;
    min-height: 0 !important;
    margin-bottom: 0 !important;
  }
  .mk-gallery-shortcode .mk-gallery-item {
    position: static !important;
    left: auto !important;
    top: auto !important;
    float: none !important;
    width: 100% !important;
    display: block;
  }
  .mk-gallery-shortcode .mk-gallery-item .item-holder {
    margin: 0 0 14px !important;
  }
  .mk-gallery-shortcode .mk-gallery-item img {
    width: 100% !important;
    height: auto !important;
    display: block;
  }

  /* 7. WordPress-Galerie (Seite "Alle Bilder", 78 Vorschaubilder): Im Original
     sechs Spalten zu 16 Prozent. Auf dem Telefon sind das 58 px breite Zellen
     mit 150 px grossen Bildern, die in die Nachbarzelle ragen.
     Hier: zwei Spalten, Bild passt in die Zelle. Die Vorschaubilder sind
     150 px breit, bei 173 px Zellenbreite bleiben sie scharf. */
  .gallery .gallery-item {
    float: left !important;
    width: 48% !important;
    margin: 0 1% 12px !important;
  }
  .gallery .gallery-item img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    box-sizing: border-box;
  }
  .gallery br {
    display: none !important;
  }

  /* 8. Klappmenue: Im Original baut theme-scripts.min.js das senkrechte Mobil-
     menue (mk-vm-*) und schaltet es per Klick auf das Symbol auf. Dieses
     Skript gibt es im Nachbau nicht, deshalb blieb das Symbol wirkungslos.
     Das Theme-CSS fuer das aufgeklappte Menue ist vorhanden (weisse Flaeche,
     aktiver Punkt in Pflaume); hier wird es nur ein- und ausgeblendet.
     Das Symbol wird von drei Strichen zum Kreuz, wie im Theme (mk-opened-nav). */
  #mk-header.mobil-offen .mk-vm-menuwrapper {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 400;
    margin: 0;
    background: #fff;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
    max-height: calc(100vh - 90px);
    overflow-y: auto;
  }
  #mk-header.mobil-offen #mk-vm-menu {
    display: block;
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
  }
  #mk-header.mobil-offen .mk-css-icon-menu-line-1 {
    transform: rotate(45deg);
    top: 6px;
  }
  #mk-header.mobil-offen .mk-css-icon-menu-line-2 {
    opacity: 0;
  }
  #mk-header.mobil-offen .mk-css-icon-menu-line-3 {
    transform: rotate(-45deg);
    top: -6px;
  }
  #mk-header .mk-nav-responsive-link {
    cursor: pointer;
  }
}