/* ==========================================================================
   Krokodent – statische Fassung
   Das Salient-Theme hat Layout und Effekte per JavaScript gesetzt.
   Diese Datei ersetzt das mit reinem CSS. Wird nach allen Theme-Styles geladen.
   ========================================================================== */

html, body { overflow-x: clip; }

/* --- Inhalte sind sofort sichtbar (Theme blendete sie per JS ein) ------- */
.is-static .has-animation,
.is-static .img-with-animation,
.is-static .col.has-animation,
.is-static .wpb_column.has-animation,
.is-static .nectar-fancy-ul ul li,
.is-static .team-member,
.is-static .portfolio-items .col,
.is-static .container-wrap,
.is-static #ajax-content-wrap,
.is-static .nectar-button,
.is-static .wpb_row {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}

/* --- Volle Breite: Zeilen laufen über den Container hinaus -------------- */
.is-static .full-width-section,
.is-static .full-width-content {
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  width: auto !important;
}
.is-static .full-width-section {
  padding-left: calc(50vw - 50%) !important;
  padding-right: calc(50vw - 50%) !important;
}

/* --- Header: transparent über Bühne/Seitenkopf, scrollt mit ------------- */
/* (Das Theme wechselte beim Scrollen per JS auf eine weiße Leiste.)        */
.is-static #header-outer[data-transparent-header="true"] ~ #header-space,
.is-static #header-space:has(+ #header-outer[data-transparent-header="true"]) { display: none !important; }
.is-static #header-outer[data-transparent-header="true"] {
  position: absolute !important;
  top: 0; left: 0; width: 100%;
  padding-top: 28px !important;
  background: transparent !important;
  box-shadow: none !important;
  z-index: 9999;
}
.is-static #header-outer #logo img { position: static !important; height: 32px !important; width: auto !important; }
.is-static #header-outer #logo img { display: none !important; }
.is-static #header-outer[data-transparent-header="true"] #logo img.starting-logo:not(.retina-logo),
.is-static #header-outer:not([data-transparent-header="true"]) #logo img.stnd:not(.retina-logo) { display: block !important; opacity: 1 !important; }
.is-static header#top nav,
.is-static header#top nav > ul,
.is-static header#top nav > ul > li > a { visibility: visible !important; }
.is-static #header-outer[data-transparent-header="true"] header#top nav > ul.sf-menu > li > a { color: #fff !important; }
.is-static #header-outer[data-transparent-header="true"] header#top nav > ul.sf-menu > li > a { opacity: .75; }
.is-static header#top nav > ul.sf-menu > li > a {
  padding: 6px 10px 34px !important;
  transition: opacity .2s;
}
.is-static #header-outer[data-transparent-header="true"] header#top nav > ul.sf-menu > li > a:hover,
.is-static #header-outer[data-transparent-header="true"] header#top nav > ul.sf-menu > li.current-menu-item > a { opacity: 1; }

/* --- Startseite: Bühne (früher Nectar-Slider mit nur einem Bild) --------- */
.is-static .parallax_slider_outer,
.is-static .nectar-slider-wrap,
.is-static .nectar-slider-wrap .swiper-container,
.is-static .nectar-slider-wrap .swiper-wrapper,
.is-static .nectar-slider-wrap .swiper-slide {
  position: relative !important;
  height: 100vh !important;
  min-height: 560px;
  width: 100% !important;
  left: 0 !important; top: 0 !important;
  display: block !important;
  visibility: visible !important;
  transform: none !important;
  overflow: hidden;
}
.is-static .nectar-slider-wrap .swiper-slide { background: #000; opacity: 1 !important; }
.is-static .full-width-section:has(.nectar-slider-wrap) { padding-left: 0 !important; padding-right: 0 !important; }
.is-static .nectar-slider-wrap .image-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  z-index: 1;
}
.is-static .nectar-slider-wrap .video-texture {
  position: absolute; inset: 0; z-index: 2; opacity: 1 !important;
  background-image: url(theme/img/textures/grid.png);
}
.is-static .nectar-slider-wrap .swiper-slide > .container {
  position: absolute; inset: 0; z-index: 3;
  display: flex; align-items: center; justify-content: center;
  max-width: none !important; width: auto !important; margin: 0 !important; padding: 0 90px !important;
}
.is-static .nectar-slider-wrap .swiper-slide .content {
  position: static !important; width: 100% !important; margin: 0 !important; padding: 0 !important;
  opacity: 1 !important; transform: none !important; text-align: center;
}
.is-static .nectar-slider-wrap .swiper-slide .content h2 { max-width: 1000px; margin: 0 auto 10px !important; padding-top: 0 !important; }
.is-static .nectar-slider-wrap .swiper-slide .content h2,
.is-static .nectar-slider-wrap .swiper-slide .content p,
.is-static .nectar-slider-wrap .swiper-slide .content .buttons { opacity: 1 !important; }
.is-static .nectar-slider-wrap .slider-down-arrow {
  position: absolute; z-index: 4; left: 50%; bottom: 30px; top: auto !important;
  width: 60px; height: 60px; margin-left: -30px; opacity: 1 !important; transform: none !important;
}
.is-static .nectar-slider-wrap .slider-prev,
.is-static .nectar-slider-wrap .slider-next,
.is-static .nectar-slider-wrap .slider-pagination { display: none !important; }

/* --- Linien-Icons (früher per JS nachgeladen und animiert) -------------- */
.is-static .svg-icon-holder { opacity: 1 !important; height: auto !important; overflow: visible !important; line-height: 0; }
.is-static .svg-icon-holder svg { display: block; max-width: 100%; height: auto; }

/* --- Spalten mit Hover-Farbe (z. B. grüner Kontakt-Balken) -------------- */
.is-static .wpb_column[style*="--hover-bg"] { transition: background-color .25s; }
.is-static .wpb_column[style*="--hover-bg"]:hover { background-color: var(--hover-bg) !important; }

/* --- Bildergalerien: Überblenden per CSS (Keyframes in galleries.css) ---- */
.is-static .flexslider { position: relative; overflow: hidden; height: auto !important; margin: 0; }
.is-static .flexslider ul.slides { position: relative; margin: 0; padding: 0; list-style: none; }
.is-static .flexslider ul.slides > li {
  position: absolute !important; inset: 0;
  opacity: 0; display: block !important; float: none !important; width: 100% !important; margin: 0 !important;
  animation-delay: calc(var(--i) * 5s - 0.6s) !important;
}
.is-static .flexslider ul.slides > li:first-child { position: relative !important; }
.is-static .flexslider ul.slides > li img { display: block; width: 100%; height: auto; opacity: 1 !important; position: static !important; margin: 0 !important; float: none !important; }
.is-static .flexslider:hover ul.slides > li { animation-play-state: paused; }
.is-static .flex-direction-nav, .is-static .flex-control-nav { display: none !important; }
@media (prefers-reduced-motion: reduce) {
  .is-static .flexslider ul.slides > li { animation: none !important; }
  .is-static .flexslider ul.slides > li:first-child { opacity: 1; }
}

/* --- Team & Arbeiten: Raster statt Isotope (JS-Positionierung) ----------- */
.is-static .portfolio-items {
  display: grid !important; gap: 0;
  height: auto !important; width: auto !important; transform: none !important; position: static !important; margin: 0 !important;
}
.is-static .portfolio-items[data-col-num="cols-4"] { grid-template-columns: repeat(4, 1fr); }
.is-static .portfolio-items[data-col-num="cols-3"] { grid-template-columns: repeat(3, 1fr); }
.is-static .portfolio-items[data-col-num="elastic"] { grid-template-columns: repeat(4, 1fr); }
.is-static .portfolio-items > .col {
  position: relative !important; left: auto !important; top: auto !important;
  width: auto !important; float: none !important; margin: 0 !important; opacity: 1 !important;
}
.is-static .portfolio-items .inner-wrap { opacity: 1 !important; transform: none !important; }
.is-static .portfolio-loading { display: none !important; }
/* Arbeiten: quadratische Kacheln mit Bild als Hintergrund */
.is-static .portfolio-items .work-item.style-5 { position: relative; aspect-ratio: 1 / 1; overflow: hidden; }
.is-static .portfolio-items .work-item.style-5 img.sizer { display: none; }
.is-static .portfolio-items .work-item.style-5 .parallaxImg,
.is-static .portfolio-items .work-item.style-5 .parallaxImg-layer { position: absolute; inset: 0; background-size: cover; background-position: center; }

/* --- Karussell-Hülle (enthält nur einen Eintrag) ------------------------ */
.is-static .carousel-wrap { display: block !important; height: auto !important; }
.is-static .carousel-wrap ul.carousel { position: static !important; width: auto !important; height: auto !important; margin: 0 !important; }
.is-static .carousel-wrap ul.carousel > li { width: 100% !important; float: none !important; margin: 0 !important; }
.is-static .carousel-heading, .is-static .carousel-prev, .is-static .carousel-next { display: none !important; }

/* Clearfix-Pseudoelemente würden im Grid eine Zelle belegen */
.is-static .portfolio-items::before, .is-static .portfolio-items::after { display: none !important; }
/* Arbeiten laufen wie im Original über die volle Breite */
.is-static .portfolio-items[data-col-num="elastic"] {
  margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important;
  padding: 0 12px; gap: 24px;
}

/* --- Kundenstimme mit Hintergrundfoto (Parallax-Zeile) ------------------- */
.is-static .parallax_section .row-bg {
  position: absolute; inset: 0; height: 100% !important; top: 0 !important;
  transform: none !important; opacity: 1 !important; visibility: visible !important;
  background-size: cover !important; background-position: center !important;
}
.is-static .testimonial_slider,
.is-static .testimonial_slider .slides,
.is-static .testimonial_slider blockquote { opacity: 1 !important; visibility: visible !important; transform: none !important; height: auto !important; position: relative !important; left: auto !important; }
.is-static .testimonial_slider .controls { display: none !important; }

/* Fester Hintergrund = Parallax-Effekt ohne JS; iOS/Touch kann das nicht sauber */
@media (hover: none) { .is-static .row-bg { background-attachment: scroll !important; } }

/* --- Zähler (40 Jahre, 500+) ------------------------------------------- */
.is-static .nectar-milestone, .is-static .nectar-milestone .number { opacity: 1 !important; visibility: visible !important; }

/* --- Statische Karte statt Google Maps --------------------------------- */
.is-static .static-map { position: relative; overflow: hidden; background: #e5e3df; }
.is-static .static-map > a { display: block; height: 100%; }
.is-static .static-map img { display: block; width: 100%; height: 100%; object-fit: none; object-position: center; }
@media (max-width: 1000px) { .is-static .static-map img { object-fit: cover; } }
.is-static .static-map-cta {
  position: absolute; left: 50%; bottom: 40px; transform: translateX(-50%);
  background: #00937f; color: #fff; padding: 13px 22px;
  font-family: 'Open Sans', sans-serif; font-size: 12px; letter-spacing: 2px; text-transform: uppercase;
  transition: background-color .2s;
}
.is-static .static-map > a:hover .static-map-cta { background: #0fe0ba; }
.is-static .static-map-credit {
  position: absolute; right: 0; bottom: 0; padding: 2px 6px;
  background: rgba(255,255,255,.8); color: #333; font-size: 11px; line-height: 1.4;
}
.is-static .static-map-credit a { color: #333; }

/* --- Mobil (Theme-Umbruch bei 1000 px): weiße feste Kopfleiste ----------- */
@media only screen and (max-width: 1000px) {
  .is-static #header-space { display: block !important; height: 58px !important; }
  .is-static #header-outer {
    position: fixed !important; height: 58px; padding-top: 10px !important;
    background: #fff !important; box-shadow: 0 0 3px rgba(0,0,0,.22) !important;
  }
  .is-static #header-outer #logo img { height: 24px !important; }
  .is-static #header-outer #logo img.starting-logo:not(.retina-logo) { display: none !important; }
  .is-static #header-outer #logo img.stnd:not(.retina-logo) { display: block !important; opacity: 1 !important; margin-top: 4px; }
  .is-static .slide-out-widget-area-toggle.mobile-icon { display: block !important; }

  .is-static .nectar-slider-wrap,
  .is-static .parallax_slider_outer,
  .is-static .nectar-slider-wrap .swiper-container,
  .is-static .nectar-slider-wrap .swiper-wrapper,
  .is-static .nectar-slider-wrap .swiper-slide { height: calc(100vh - 58px) !important; min-height: 480px; }
  .is-static .nectar-slider-wrap .swiper-slide > .container { padding: 0 45px !important; }
  .is-static .nectar-slider-wrap .swiper-slide .content h2 { font-size: 55px !important; line-height: 55px !important; letter-spacing: -.5px; margin-bottom: 8px !important; }
  .is-static .nectar-slider-wrap .swiper-slide .content p span { font-size: 16.8px !important; line-height: 1.4 !important; }
  .is-static .nectar-slider-wrap .swiper-slide .buttons .button a { font-size: 9px !important; padding: 8px 13px !important; letter-spacing: .5px !important; }
}
@media only screen and (max-width: 690px) {
  .is-static .portfolio-items[data-col-num] { grid-template-columns: repeat(2, 1fr); }
  .is-static .portfolio-items[data-col-num="elastic"] { padding: 0 8px; gap: 8px; }
}

/* --- Mobiles Menü: öffnet per Anker (:target) statt JS ------------------- */
.is-static #slide-out-widget-area { z-index: 10001; transition: transform .45s cubic-bezier(.2,.75,.3,1); }
.is-static #slide-out-widget-area:target { transform: none !important; }
.is-static #slide-out-widget-area-bg { transition: opacity .3s; }
.is-static:has(#slide-out-widget-area:target) #slide-out-widget-area-bg { width: 100%; height: 100%; opacity: 1; z-index: 10000; }
.is-static .slide-out-bg-close { position: absolute; inset: 0; }

/* --- Kontaktseite: Direktkontakt statt Formular -------------------------- */
.is-static .kontakt-direkt { color: #fff; max-width: 420px; }
.is-static .kontakt-direkt h3 { color: #fff; margin-bottom: 12px; }
.is-static .kontakt-direkt p { color: #fff; }
.is-static .kontakt-direkt .kontakt-button { background-color: #fff !important; color: #00937f !important; visibility: visible; }
.is-static .kontakt-direkt .kontakt-button span { color: inherit !important; }
.is-static .kontakt-direkt .kontakt-button--outline { background-color: transparent !important; color: #fff !important; border: 2px solid rgba(255,255,255,.7) !important; }

/* Kurze Seiten (Portfolio) bis zum Fensterende hell – live füllte das der Footer */
.is-static .container-wrap { min-height: calc(100vh - 88px); }

/* --- Facebook-Teilen-Kachel (Startseite) -------------------------------- */
.is-static .nectar-social.full-width { opacity: 1 !important; visibility: visible !important; }
.is-static .nectar-social.full-width a { opacity: 1 !important; transform: none !important; }
/* Spalten mit Hintergrundfarbe gleich hoch (früher per JS angeglichen) */
.is-static .span_12:has(> .wpb_column[data-has-bg-color="true"] + .wpb_column[data-has-bg-color="true"]) { display: flex; flex-wrap: wrap; }
.is-static .span_12:has(> .wpb_column[data-has-bg-color="true"] + .wpb_column[data-has-bg-color="true"])::before,
.is-static .span_12:has(> .wpb_column[data-has-bg-color="true"] + .wpb_column[data-has-bg-color="true"])::after { display: none; }
.is-static #contact-map.static-map { display: block !important; }
/* Kein Footer mehr: Seitenhintergrund hell statt Theme-Dunkelgrau */
body.is-static { background-color: #f6f6f6; }