/*
 Theme Name: Fuego Child
 Theme URI: https://fuego.qodeinteractive.com/
 Description: Child theme for Fuego by Mikado
 Author: Mikado Themes
 Version: 1.3.6
 Template: fuego
 Text Domain: fuego-child
*/

/* ============================== */
/*   Globale Variablen / Tweaks   */
/* ============================== */
:root{
  /* Header/Logo */
  --header-h: 100px;
  --pad-left: 20px;
  --logo-h: 90px;
  --logo-w: calc(225 / 161);

  /* Menü rechts */
  --menu-col-w: 260px;
  --menu-right-pad: 25px;
  --menu-gap: -40px;

  /* Content-Abstand unter Header */
  --content-gap: 32px;

  /* Portfolio-Overlay/Zoom */
  --thumb-overlay-a: .78;
  --thumb-zoom: 1.08;

  /* Button (Kontakt) */
  --btn-bg:#000; --btn-fg:#fff;
  --btn-bg-hover:#333; --btn-fg-hover:#fff;
  --btn-radius:6px; --btn-fs:18px; --btn-py:14px; --btn-px:28px;

  /* Schrift-Stacks (lokale Fonts via OMGF) */
  --font-body: 'Roboto', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, 'Apple Color Emoji','Segoe UI Emoji', sans-serif;
  --font-mono: 'Inconsolata', ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
}

/* ============================== */
/*           Fonts global         */
/* ============================== */
html, body{
  font-family: var(--font-body) !important;
  -webkit-text-size-adjust:100%;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
  font-synthesis: none;
}
.mkd-position-right-inner nav,
.mkd-position-right-inner nav *,
.mkd-main-menu, .mkd-main-menu *,
.mkd-title, h1,h2,h3,h4,h5,h6{
  font-family: var(--font-body) !important;
}
.mkd-portfolio-single-holder p,
.mkd-portfolio-single-holder .mkd-ps-info-holder p,
.mkd-portfolio-single-holder .mkd-ps-info-item p{
  font-family: var(--font-mono) !important;
  line-height: 1.67em;
}
.vscf, .vscf *{ font-family: var(--font-body) !important; }

/* ============================== */
/*        Header (Desktop)        */
/* ============================== */
@media (min-width:1025px){
  .mkd-page-header{
    position: fixed !important;
    top:0 !important; left:0 !important; right:0 !important;
    height: var(--header-h) !important;
    min-height: var(--header-h) !important;
    z-index: 10050 !important;
    background: transparent !important;
    transform:none !important;
    transition:none !important;
    will-change:auto !important;
    backface-visibility:hidden;
  }
  .mkd-page-header .mkd-fixed-wrapper,
  .mkd-page-header .mkd-menu-area{
    position: relative !important;
    height: var(--header-h) !important;
    min-height: var(--header-h) !important;
    transform:none !important;
    transition:none !important;
    overflow:visible !important;
  }

  body{ padding-top: calc(var(--header-h) + var(--content-gap)) !important; }

  .mkd-content, .mkd-content-inner,
  .mkd-full-width, .mkd-full-width-inner,
  .mkd-grid-row, .mkd-container, .mkd-container-inner,
  .mkd-section, .mkd-section-inner, .mkd-section-inner-m{
    margin-top:0 !important; padding-top:0 !important; background:transparent !important;
    transition:none !important;
  }
  .mkd-title-holder{ display:none !important; }

  .mkd-page-header .mkd-menu-area .mkd-vertical-align-containers{
    display:grid !important;
    grid-template-columns:max-content 1fr var(--menu-col-w) !important;
    align-items:center !important;
    height:var(--header-h) !important;
    padding:0 !important;
    column-gap:0 !important;
  }

  .mkd-position-left, .mkd-position-left-inner{
    grid-column:1 !important; position:relative !important; margin:0 !important;
    padding-left: var(--pad-left) !important;
  }
  .mkd-position-left-inner .mkd-logo-wrapper{
    position:absolute !important; top:50% !important; left:var(--pad-left) !important;
    transform:translateY(-50%) !important;
    width: calc(var(--logo-h) * var(--logo-w)) !important;
    height: var(--logo-h) !important; z-index:10060 !important;
  }

  .mkd-position-right, .mkd-position-right-inner{
    grid-column:3 !important; justify-self:end !important;
    width:var(--menu-col-w) !important; min-width:var(--menu-col-w) !important;
    padding-right:var(--menu-right-pad) !important; margin:0 !important; white-space:nowrap !important;
  }
  .mkd-position-right-inner nav.mkd-main-menu>ul{
    display:flex !important; flex-direction:column !important; align-items:flex-end !important;
  }
  .mkd-position-right-inner nav.mkd-main-menu>ul>li{
    float:none !important; display:block !important; margin:0 !important;
  }
  .mkd-position-right-inner nav.mkd-main-menu>ul>li+li{
    margin-top: var(--menu-gap) !important;
  }

  .mkd-cover, .mkd-cover::before,
  .mkd-full-width-inner::before, .mkd-content::before{ pointer-events:none !important; }
}

/* Logo Render & Variants */
.mkd-logo-wrapper a{ display:block !important; width:100% !important; height:100% !important; pointer-events:auto !important; }
.mkd-logo-wrapper img{
  display:block !important; width:100% !important; height:100% !important; object-fit:contain !important;
  opacity:1 !important; visibility:visible !important; transform:translateZ(0); backface-visibility:hidden;
  pointer-events:none !important;
}
.mkd-logo-wrapper img.mkd-light-logo,
.mkd-logo-wrapper img[src*="/fuego/assets/img/"]{ display:none !important; opacity:0 !important; visibility:hidden !important; }

.mkd-logo-wrapper a:hover img.mkd-normal-logo{
  animation: db-squash 420ms cubic-bezier(.25,.8,.25,1) 1 !important;
}
@keyframes db-squash{
  0%{transform:scale(1,1)} 28%{transform:scale(1.18,.84)} 62%{transform:scale(.92,1.10)} 100%{transform:scale(1,1)}
}

/* ============================== */
/*       Portfolio Hover/UI       */
/* ============================== */
.mkd-pl-gallery-overlay .mkd-pli-text-holder{
  background: rgba(0,0,0,0) !important;
  transition: background .28s ease-in-out !important;
  pointer-events: none !important;
}
.mkd-pl-gallery-overlay article:hover .mkd-pli-text-holder{
  background: rgba(0,0,0,var(--thumb-overlay-a)) !important;
}
.mkd-portfolio-list-holder article .mkd-pli-image img,
.mkd-portfolio-list-holder article .mkd-item-image img{
  transform: translateZ(0);
  will-change: transform;
  transition: transform .25s ease-in-out, filter .25s ease-in-out !important;
}
.mkd-portfolio-list-holder article:hover .mkd-pli-image img,
.mkd-portfolio-list-holder article:hover .mkd-item-image img{
  transform: scale(var(--thumb-zoom)) !important;
}

/* ============================== */
/*        Kontakt – Button        */
/* ============================== */
.btn.btn-primary,
button#vscf_send.btn.btn-primary{
  background: var(--btn-bg) !important; color: var(--btn-fg) !important;
  border:none !important; border-radius: var(--btn-radius) !important;
  padding: var(--btn-py) var(--btn-px) !important; font-size: var(--btn-fs) !important;
  transition: background .22s ease-in-out, color .22s ease-in-out !important;
}
.btn.btn-primary:hover,
button#vscf_send.btn.btn-primary:hover{
  background: var(--btn-bg-hover) !important; color: var(--btn-fg-hover) !important;
}
@media (max-width:768px){
  .btn.btn-primary, button#vscf_send.btn.btn-primary{ padding:12px 24px !important; font-size:17px !important; }
}

/* ============================== */
/*      Anti-Jump / Stabilität    */
/* ============================== */
.mkd-page-header, .mkd-page-header .mkd-menu-area, .mkd-sticky-header{ transition:none !important; }
.mkd-fixed-wrapper, .mkd-sticky-header, .mkd-page-header .mkd-fixed-wrapper{ transform:none !important; }
html{ scrollbar-gutter:stable both-edges; }

/* ===== MOBILE: Haarlinie unter dem Logo entfernen ===== */
@media (max-width:1024px){
  .mkd-mobile-header,
  .mkd-mobile-header .mkd-mobile-header-inner,
  header.mkd-page-header,
  .mkd-page-header .mkd-menu-area,
  .mkd-header-bottom,
  .mkd-header-bottom .mkd-header-bottom-holder,
  .mkd-page-header .mkd-fixed-wrapper {
    border: 0 !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
    background-image: none !important;
  }
  .mkd-mobile-header::before,
  .mkd-mobile-header::after,
  .mkd-page-header .mkd-menu-area::before,
  .mkd-page-header .mkd-menu-area::after,
  .mkd-header-bottom::before,
  .mkd-header-bottom::after{
    content:none !important;
    display:none !important;
  }
  .mkd-mobile-header, .mkd-page-header{ transform:none !important; }
}



/* =========================================
   Kontakt (/kontakt, ID 1048) – Fonts fix
   ========================================= */

/* Labels + Eingabefelder → Inconsolata */
body.page-id-1048 form#vscf label,
body.page-id-1048 form#vscf input,
body.page-id-1048 form#vscf select,
body.page-id-1048 form#vscf textarea {
  font-family: var(--font-mono) !important; /* Inconsolata */
  font-weight: 400 !important;
  line-height: 1.6 !important;
}

/* Placeholder ebenfalls in Inconsolata */
body.page-id-1048 form#vscf ::placeholder {
  font-family: var(--font-mono) !important;
}

/* Button → Roboto */
body.page-id-1048 button#vscf_send,
body.page-id-1048 form#vscf button#vscf_send.btn.btn-primary,
body.page-id-1048 form#vscf .btn.btn-primary,
body.page-id-1048 form#vscf button[type="submit"],
body.page-id-1048 .vscf button.btn.btn-primary {
  font-family: var(--font-body) !important; /* Roboto */
  font-weight: 500 !important;
  letter-spacing: 0.01em !important;
}

/* =========================================
   MOBILE <=1024px — Portfolio-Detailseiten
   Rand halbieren, Bilder wirklich größer
   (Startseite bleibt unberührt)
========================================= */
@media (max-width:1024px){
  :root{ --m-bleed: 20px; } /* gewünschter „Halb-Rand“ je Seite */

  /* A) FUEGO-Portfolio (normale Detailseiten) */
  body:not(.home) .mkd-portfolio-single-holder .mkd-ps-image-holder img,
  body:not(.home) .mkd-portfolio-single-holder .mkd-ps-image img,
  body:not(.home) .mkd-portfolio-single-holder .mkd-ps-image-inner img {
    display:block !important;
    width: calc(100% + (var(--m-bleed) * 2)) !important;
    max-width: none !important;
    margin-left: calc(-1 * var(--m-bleed)) !important;
    margin-right: calc(-1 * var(--m-bleed)) !important;
    height: auto !important;
  }

  /* B) PageBuilder/WPBakery-Bilder (z.B. „erklimadasmal“) */
  body:not(.home) img.vc_single_image-img,
  body:not(.home) .wpb_single_image img,
  body:not(.home) .wpb_wrapper .wpb_single_image img {
    display:block !important;
    width: calc(100% + (var(--m-bleed) * 2)) !important;
    max-width: none !important;
    margin-left: calc(-1 * var(--m-bleed)) !important;
    margin-right: calc(-1 * var(--m-bleed)) !important;
    height:auto !important;
  }

  /* Falls WPBakery eine linke/rechte Ausrichtung setzt → neutralisieren */
  body:not(.home) .wpb_single_image.vc_align_left,
  body:not(.home) .wpb_single_image.vc_align_right,
  body:not(.home) .vc_single_image-wrapper,
  body:not(.home) figure.vc_figure { text-align:center !important; }
}



/* =========================================
   BACK-TO-TOP BUTTON — Schwarz + leicht abgerundet
   ========================================= */
#mkd-back-to-top span.mkd-icon-stack {
  background-color: #000 !important;  /* schwarz */
  border-color: #000 !important;      /* schwarz */
  color: #fff !important;             /* Pfeil bleibt weiß */
  border-radius: 6px !important;      /* leichte Rundung für 42×42px */
}

/* Hover-Zustand ebenfalls schwarz mit Rundung */
#mkd-back-to-top span.mkd-icon-stack:hover {
  background-color: #000 !important;
  border-color: #000 !important;
  color: #fff !important;
  border-radius: 6px !important;
}


/* =========================================
   PASSWORTSEITE – Absenden-Button angleichen
   an den "Senden"-Button vom Kontaktformular
========================================= */
.post-password-form input[type="submit"] {
  background: #000 !important;     /* schwarz */
  color: #fff !important;          /* weiß */
  border: none !important;
  border-radius: 6px !important;   /* wie Sendebutton */
  padding: 12px 24px !important;   /* gleiches Innenpadding */
  font-family: var(--font-body) !important;
  font-weight: 500 !important;     /* medium */
  font-size: 16px !important;      /* gleiche Größe */
  letter-spacing: 0 !important;
  cursor: pointer !important;
  display: inline-block;
  text-transform: none !important; /* gemischte Schreibweise */
  transition: background .2s ease, color .2s ease;
}

/* Hover-Effekt: leicht dunkler Hintergrund */
.post-password-form input[type="submit"]:hover {
  background: #333 !important;
  color: #fff !important;
}



.post-password-form input[type="password"] {
  width: 100% !important;
  max-width: 400px;
  border: 1px solid #777 !important;  
  border-radius: 0 !important;        /* Rundung weg */
  padding: 10px 12px !important;
  font-family: var(--font-body) !important;
  font-size: 16px !important;
  outline: none !important;
  box-sizing: border-box;
  display: block;
  margin-bottom: -15px !important;      /* Abstand kleiner machen */
}


/* =========================================
   PASSWORTSEITE – Footer immer ganz unten
   (wir strecken nur Seiten mit Passwort-Form)
========================================= */

/* Moderne Browser: Nutzen :has(), um NUR die Passwortseite zu treffen */
body:has(.post-password-form) .mkd-wrapper-inner{
  min-height: 100svh;             /* volle Viewport-Höhe (safe units) */
  display: flex;
  flex-direction: column;
}
body:has(.post-password-form) .mkd-content{
  flex: 1 0 auto;                  /* Inhalt nimmt die übrige Höhe ein */
}
body:has(.post-password-form) footer.mkd-page-footer{
  margin-top: auto;                /* Footer nach unten drücken */
}

/* Fallback für Browser ohne :has() – gibt unten einfach Luft dazu */
@supports not(selector(:has(*))) {
  .post-password-form{
    margin-bottom: 18vh;           /* optischer Ausgleich */
  }
}







/* =========================================
   VIDEO-SLIDER — DOTS IM MIKADO-LOOK
   (12x12px, grauer Ring, aktiv schwarz)
========================================= */

.video-slider .video-dots {
  display: flex !important;
  gap: 12px !important;               /* Abstand zwischen den Punkten */
  justify-content: center !important;
  align-items: center !important;
  margin-top: 18px !important;
  min-height: 20px;                   /* verhindert springendes Layout */
}

.video-slider .video-dot {
  display: inline-block !important;
  width: 12px !important;             /* Außendurchmesser */
  height: 12px !important;
  border-radius: 50% !important;
  border: 2px solid #8c8c8c !important; /* grauer Ring wie Mikado */
  background: transparent !important;   /* innen hohl */
  box-sizing: border-box !important;
  cursor: pointer !important;
  transition: background .2s ease, border-color .2s ease !important;
}

.video-slider .video-dot.active {
  background: #000 !important;        /* aktiver Punkt gefüllt */
  border-color: #000 !important;
}

/* Hover-Effekt wie bei Mikado */
.video-slider .video-dot:hover {
  border-color: #000 !important;
}









/* ==========================================================
   MOBIL: Mikado-Image-Slider (Portrait)
   → bündig bis Seitenrand, Gutter wie übrige Bilder
   (greift NUR auf Portfolio-Detailseiten; verändert NICHT --m-bleed)
   ========================================================== */
@media (max-width: 767px){
  body:not(.home).single-portfolio-item .mkd-ig-slider{
    /* eigene, lokale Variable – erbt den bestehenden globalen Gutter */
    --slider-bleed: var(--m-bleed, 20px);

    position: relative !important;
    width: calc(100% + (var(--slider-bleed) * 2)) !important;
    max-width: none !important;
    left: calc(-1 * var(--slider-bleed)) !important;
    transform: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body:not(.home).single-portfolio-item .mkd-ig-slider .owl-stage-outer{
    overflow: hidden !important;
  }
}

/* ==========================================================
   MOBIL LANDSCAPE: Mikado-Image-Slider bündig wie die Bilder
   – breiterer Breakpoint, robustere Selektoren, Margin-Bleed
   ========================================================== */
@media (orientation: landscape) and (max-width: 1100px){

  /* Slider/Gallery volle Breite + gleicher Rand wie Bilder ( --m-bleed ) */
  body:not(.home) .mkd-ig-slider,
  body:not(.home) .mkd-image-gallery{
    display: block !important;
    width: calc(100% + (var(--m-bleed, 20px) * 2)) !important;
    max-width: none !important;
    margin-left: calc(-1 * var(--m-bleed, 20px)) !important;
    margin-right: calc(-1 * var(--m-bleed, 20px)) !important;
    padding: 0 !important;
  }

  /* Außencontainer dürfen den Bleed nicht abschneiden */
  body:not(.home) .vc_row,
  body:not(.home) .vc_row-fluid,
  body:not(.home) .wpb_column{
    overflow: visible !important;
  }

  /* Innenabstände neutralisieren, damit nichts „einrückt“ */
  body:not(.home) .vc_column_container > .vc_column-inner{
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }

  /* Slider-Viewport geschlossen halten */
  body:not(.home) .mkd-ig-slider .owl-stage-outer{
    overflow: hidden !important;
  }
}



/* ==========================================================
   PHONE LANDSCAPE – Portfolio (WPBakery): Bilder volle Viewport-Breite
   Gilt nur auf: Einzel-Portfolio-Seiten (body.single-portfolio-item)
   Ziel: Beim Kippen (quer) sind Bilder immer 100vw – unabhängig von Spaltenbreite/Offsets
   Hinweis: Header/Logo bleiben unberührt
   ========================================================== */
@media (orientation: landscape) and (max-width: 930px) {

  /* Sicherheit: nichts wird abgeschnitten */
  body.single-portfolio-item .vc_row,
  body.single-portfolio-item .vc_row-fluid{
    overflow: visible !important;
  }

  /* Bild-Wrapper auf Viewport-Breite „ziehen“ (Full-Bleed) */
  body.single-portfolio-item .vc_row .wpb_single_image,
  body.single-portfolio-item .vc_row .vc_single_image-wrapper{
    position: relative !important;
    left: 50% !important;                 /* zentrieren via Half-Shift */
    right: 50% !important;
    margin-left: -50vw !important;        /* negative Hälfte der Viewport-Breite */
    margin-right: -50vw !important;
    width: 100vw !important;              /* volle Viewport-Breite */
    max-width: 100vw !important;
  }

  /* Das eigentliche Bild ebenfalls auf 100vw */
  body.single-portfolio-item .vc_row .wpb_single_image img,
  body.single-portfolio-item .vc_row .vc_single_image-wrapper img{
    display: block !important;
    width: 100vw !important;
    max-width: none !important;
    height: auto !important;
  }

  /* Spalten-Innenabstände neutralisieren, damit nichts „einschnürt“ */
  body.single-portfolio-item .vc_row .vc_column-inner{
    box-sizing: border-box !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Header/Logo EXPLIZIT NICHT verändern */
  header.mkd-page-header,
  .mkd-logo-wrapper,
  .mkd-logo-wrapper img{
    width: auto !important;
    max-width: none !important;
    height: auto !important;
  }
}







/* ==========================================================
   VIDEO (FINAL V2):
   – Desktop: Poster aus
   – Mobil/Quer: NUR den äußeren WP-Wrapper verbreitern (Bleed)
   – Innen nichts an Höhe verändern → Controls bleiben stabil
   ========================================================== */

/* Desktop: Poster-Layer weg */
@media (min-width: 1025px){
  body.single-portfolio-item .wp-video .mejs-poster{
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}

/* Mobil (Hochkant ≤1024px): bündig wie die Bilder */
@media (max-width: 1024px){
  :root{ --m-bleed: 20px; } /* wie bei deinen Bildern */

  /* NUR den WP-Wrapper aufziehen */
  body:not(.home) .wp-video{
    display: block !important;
    width: calc(100% + (var(--m-bleed, 20px) * 2)) !important;
    max-width: none !important;
    margin-left: calc(-1 * var(--m-bleed, 20px)) !important;
    margin-right: calc(-1 * var(--m-bleed, 20px)) !important;
  }

  /* innen nur Breite festlegen – KEINE Höhe erzwingen */
  body:not(.home) .wp-video .mejs-container,
  body:not(.home) .wp-video .mejs-inner,
  body:not(.home) .wp-video .mejs-mediaelement,
  body:not(.home) .wp-video video,
  body:not(.home) .wp-video .mejs-poster,
  body:not(.home) .wp-video .mejs-overlay,
  body:not(.home) .wp-video .mejs-layers{
    width: 100% !important;
    max-width: 100% !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
  }
}

/* Phone Landscape (≤1100px): gleicher Bleed wie Bilder */
@media (orientation: landscape) and (max-width: 1100px){
  body:not(.home) .wp-video{
    width: calc(100% + (var(--m-bleed, 20px) * 2)) !important;
    max-width: none !important;
    margin-left: calc(-1 * var(--m-bleed, 20px)) !important;
    margin-right: calc(-1 * var(--m-bleed, 20px)) !important;
  }
}












/***********************************************
* FIX: Masonry-Kachel rutscht bei Resize
* Ziel: Kacheln bleiben auf allen Breakpoints sauber ausgerichtet
* Datum: 2025-09-12
***********************************************/

/* ---------------------------------------------
   1) Sofort feste Bühnenhöhe pro Kachel
   – alle Portfolio-Items sind quadratisch
   – aspect-ratio reserviert Platz bevor Bilder laden
--------------------------------------------- */
.mkd-portfolio-list-holder .mkd-pli-image,
.mkd-portfolio-list-holder .mkd-item-image {
  aspect-ratio: 1 / 1;          /* Quadratisch */
  display: block;
  width: 100%;
  overflow: hidden;
}

.mkd-portfolio-list-holder .mkd-pli-image img,
.mkd-portfolio-list-holder .mkd-item-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;  /* Bild füllt Quadrate */
  display: block !important;
}

/* ---------------------------------------------
   2) Subpixel-Bug bei mittleren Viewports
   – zwischen 1100–1399px Breite fest auf 2 Spalten
   – Bereich ggf. anpassen (z. B. 1050–1366px)
--------------------------------------------- */
@media (min-width:1100px) and (max-width:1399px) {
  .mkd-portfolio-list-holder.mkd-pl-masonry .mkd-pl-grid-sizer,
  .mkd-portfolio-list-holder.mkd-pl-masonry article.mkd-pl-item {
    width: 50% !important;          /* genau 2 Spalten */
    box-sizing: border-box !important;
  }

  /* Optional: falls Gutter (Abstand) Probleme macht, auf 0 setzen
     → nur aktivieren, wenn du wirklich Gutter nutzt */
  /* .mkd-portfolio-list-holder.mkd-pl-masonry .mkd-pl-grid-gutter {
       width: 0 !important;
  } */
}

/* ---------------------------------------------
   3) Zusätzliche Stabilität / Safety Nets
   – Box-Sizing & min-height zurücksetzen
--------------------------------------------- */
.mkd-portfolio-list-holder .mkd-pl-item {
  box-sizing: border-box;
  min-height: 0 !important;
}





/* WPBakery: Textspalte oben bündig ausrichten
   → Extra class name an der COLUMN:  top-align  */
.top-align.vc_column_container > .vc_column-inner{
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important; /* nach oben */
  align-items: flex-start !important;
  height: 100% !important;
  padding-top: 0 !important;              /* evtl. Column-Top-Padding neutralisieren */
}

/* innerer Wrapper darf keinen Startabstand mitbringen */
.top-align.vc_column_container > .vc_column-inner > .wpb_wrapper{
  margin-top: 0 !important;
}

/* typische Offsets von WPBakery-Textblöcken eliminieren */
.top-align .wpb_text_column,
.top-align .wpb_text_column > .wpb_wrapper,
.top-align .wpb_text_column > .wpb_wrapper > *:first-child{
  margin-top: 0 !important;
  padding-top: 0 !important;
}





/* =========================================
   Desktop: PageBuilder .top-align
   → Text oben ausgerichtet, Einzug wie Vorlage
   → Schriftstärke angleichen (500)
========================================= */
@media (min-width:1025px){
  .top-align.vc_column_container > .vc_column-inner{
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    height: 100% !important;

    box-sizing: border-box !important;
    padding-left: 32px !important; /* exakt wie Vorlage */
  }

  .top-align.vc_column_container > .vc_column-inner > .wpb_wrapper{
    margin: 0 !important;
    padding: 0 !important;
    font-weight: 500 !important;   /* gleiche Stärke wie Vorlage */
  }

  /* Falls nur der Fließtext (p) betroffen sein soll: */
  .top-align.vc_column_container p{
    font-weight: 500 !important;
  }
}








/* Idle: kein 3D-Layer, nichts „nachschärfen“ */
.mkd-portfolio-list-holder article .mkd-pli-image img,
.mkd-portfolio-list-holder article .mkd-item-image img{
  transform: none !important;
  -webkit-transform: none !important;
  will-change: auto !important;
  image-rendering: auto !important;
  backface-visibility: hidden;
}

/* Hover: sanft zoomen (2D) */
.mkd-portfolio-list-holder article:hover .mkd-pli-image img,
.mkd-portfolio-list-holder article:hover .mkd-item-image img{
  transform: scale(var(--thumb-zoom)) !important;
  -webkit-transform: scale(var(--thumb-zoom)) !important;
  will-change: transform;
  transform-origin: center center;
}


/* --- Safari/WebKit: Bilder sofort knackig rendern --- */
@supports (-webkit-hyphens:none) and (font-kerning: normal) {
  .mkd-portfolio-single-holder img,
  .mkd-portfolio-list-holder img{
    transform: translateZ(0);              /* eigene Compositing-Layer */
    backface-visibility: hidden;
    image-rendering: auto !important;      /* keine crisp-edges/crunch tricks */
    will-change: transform;                 /* frühes, sauberes Paint */
  }
}




/* Safari: weichzeichnen beim ersten Frame verhindern – nur Portfolio-Detailseiten */
@supports (-webkit-touch-callout: none) {
  body.single-portfolio-item .wpb_single_image img,
  body.single-portfolio-item .mkd-portfolio-single-holder .mkd-ps-image-holder img {
    filter: none !important;
    transform: none !important;
    backface-visibility: hidden !important;
    image-rendering: auto !important; /* keine crispen Edges erzwingen, Fotos bleiben sauber */
  }
}





/* Safari: Verhindert Weichzeichnung bei WPBakery Bildern auf Portfolio-Seiten */
@supports (-webkit-touch-callout: none) {
  body.single-portfolio-item .wpb_single_image img {
    image-rendering: -webkit-optimize-contrast;
    backface-visibility: hidden;
    transform: none !important;
    filter: none !important;
  }
}





/* Safari: Pagebuilder-Bilder nicht weichzeichnen */
@supports (-webkit-touch-callout: none) {
  body.single-portfolio-item .vc_column-inner,
  body.single-portfolio-item .wpb_wrapper,
  body.single-portfolio-item .wpb_single_image,
  body.single-portfolio-item .wpb_single_image .vc_single_image-wrapper {
    transform: none !important;
    filter: none !important;
    backface-visibility: hidden !important;
    will-change: auto !important;
  }

  body.single-portfolio-item .wpb_single_image img {
    image-rendering: -webkit-optimize-contrast; /* Safari nimmt die schärfere Variante */
    filter: none !important;
  }
}





/* Safari: keine Compositing-Softness auf Pagebuilder-Bildern */
@supports (-webkit-touch-callout: none) {
  body.single-portfolio-item .vc_column-inner,
  body.single-portfolio-item .wpb_wrapper,
  body.single-portfolio-item .wpb_single_image,
  body.single-portfolio-item .wpb_single_image .vc_single_image-wrapper {
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
    will-change: auto !important;
    backface-visibility: hidden !important; /* fixte Repaint ohne Blur */
  }

  /* Safari: schärferes Resampling */
  body.single-portfolio-item .wpb_single_image img,
  body.single-portfolio-item .mkd-ps-image-holder img {
    image-rendering: -webkit-optimize-contrast;
  }
}








/* =========================================
   Mikado Slider – Navigation Fade-In / Hover
   → Pfeile erscheinen sanft beim Hover (Desktop)
   → Sanftes Ein-/Ausblenden mit Fade-Transition
========================================= */

/* === Grundzustand: Pfeile unsichtbar, aber vorhanden === */
.mkd-ig-slider.mkd-owl-slider .owl-nav {
  display: block !important;           /* Sicherstellen, dass Element existiert */
  visibility: hidden;                  /* Unsichtbar, aber im Flow */
  opacity: 0 !important;               /* Für Fade-Out */
  pointer-events: none;                /* Keine Klicks im Ruhezustand */
  transition: opacity .35s ease, visibility 0s linear .35s;
  z-index: 50;                         /* Über Content, falls überlagert */
  position: absolute;                  /* Positionierung über dem Slider */
  inset: 0 0 0 0;                      /* Deckt gesamten Slider ab */
}

/* === Spans der Pfeile dürfen sichtbar sein === */
.mkd-ig-slider.mkd-owl-slider .owl-nav .owl-prev > span,
.mkd-ig-slider.mkd-owl-slider .owl-nav .owl-next > span {
  opacity: 1;
}

/* === Desktop: Pfeile beim Hover sanft einblenden === */
@media (hover: hover) and (pointer: fine) {
  .mkd-ig-slider.mkd-owl-slider:hover .owl-nav {
    visibility: visible;
    opacity: 1 !important;
    pointer-events: auto;
    transition: opacity .35s ease, visibility 0s;
  }
}


/* =========================================
   Mikado Slider – db-arrows (Custom Mobile Enable)
   → Zeigt Pfeile auf Mobile NUR, wenn .db-arrows gesetzt ist
   → Klasse kann am Body, einem übergeordneten Wrapper
     oder direkt am Slider liegen
========================================= */

@media (hover: none) and (pointer: coarse),
       (max-width: 1024px) {
  /* Wrapper-Varianten: Body, übergeordneter Container oder direkt am Slider */
  body.db-arrows .mkd-ig-slider.mkd-owl-slider .owl-nav,
  .db-arrows .mkd-ig-slider.mkd-owl-slider .owl-nav,
  .mkd-ig-slider.mkd-owl-slider.db-arrows .owl-nav {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* Sicherheitshalber auch die Buttons selbst freischalten */
  body.db-arrows .mkd-ig-slider.mkd-owl-slider .owl-prev,
  body.db-arrows .mkd-ig-slider.mkd-owl-slider .owl-next,
  .db-arrows .mkd-ig-slider.mkd-owl-slider .owl-prev,
  .db-arrows .mkd-ig-slider.mkd-owl-slider .owl-next,
  .mkd-ig-slider.mkd-owl-slider.db-arrows .owl-prev,
  .mkd-ig-slider.mkd-owl-slider.db-arrows .owl-next {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}


/* =========================================
   Mikado Slider – db-arrows (Desktop Dots Fix + Fade Retain)
   → Dots klickbar, Fade-In bleibt erhalten
========================================= */

/* 1) Nav leicht von den Dots abheben statt full-cover */
.mkd-ig-slider.mkd-owl-slider .owl-nav {
  position: absolute !important;
  inset: 0 0 40px 0 !important; /* 40px Abstand unten, damit Dots frei bleiben */
  z-index: 50 !important;
  pointer-events: none; /* verhindert Overlay über Dots */
}

/* 2) Nur die Pfeile selbst klickbar machen */
.mkd-ig-slider.mkd-owl-slider .owl-nav .owl-prev,
.mkd-ig-slider.mkd-owl-slider .owl-nav .owl-next {
  pointer-events: auto;
}

/* 3) Dots darüber klickbar halten */
.mkd-ig-slider.mkd-owl-slider .owl-dots {
  position: relative;
  z-index: 60;
  pointer-events: auto;
}