/*
Theme Name: Mayr & Mayr
Description: This is a child theme for Flatsome Theme
Author: weLaunch.io
Template: flatsome
Version: 1.0.6
*/

/*************** ADD CUSTOM CSS HERE ***************/

/* ===== fahn-warenkorb-aus (13.10.2026) – Warenkorb-Symbol im Header (Desktop + Mobil) ausblenden ===== */
#masthead .cart-item,
#masthead .header-cart-link,
.header-wrapper .cart-item { display: none !important; }

/* ===== fahn-header-desktop (13.10.2026) – Logo + Menüpunkte zusammen, Button rechts ===== */
@media (min-width: 850px) {
  #masthead .header-inner { max-width: 1440px; padding-left: 48px; padding-right: 48px; }
  #masthead .flex-col.hide-for-medium.flex-left { display: none !important; }
  #masthead .flex-col.hide-for-medium.flex-right { flex: 1 1 auto; margin-left: 64px; }
  #masthead .flex-col.hide-for-medium.flex-right > ul.header-nav-main { justify-content: flex-start; width: 100%; flex-wrap: nowrap; }
  #masthead .header-nav-main > li.header-divider { display: none !important; }
  #masthead .header-nav-main > li.menu-item { margin: 0 18px; }
  #masthead .header-nav-main > li.menu-item:first-child { margin-left: 0; }
  #masthead .header-nav-main > li.menu-item > a.nav-top-link {
    position: relative; padding: 10px 0; background: transparent !important;
    font-size: 15px; font-weight: 400; letter-spacing: .01em;
    color: rgba(255,255,255,.82); transition: color .2s ease;
  }
  #masthead .header-nav-main > li.menu-item > a.nav-top-link::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 1px;
    background: #fff; transform: scaleX(0); transform-origin: left; transition: transform .25s ease;
  }
  #masthead .header-nav-main > li.menu-item:hover > a.nav-top-link,
  #masthead .header-nav-main > li.menu-item.active > a.nav-top-link,
  #masthead .header-nav-main > li.menu-item.current-menu-ancestor > a.nav-top-link { color: #fff; }
  #masthead .header-nav-main > li.menu-item:hover > a.nav-top-link::after,
  #masthead .header-nav-main > li.menu-item.active > a.nav-top-link::after,
  #masthead .header-nav-main > li.menu-item.current-menu-ancestor > a.nav-top-link::after { transform: scaleX(1); }
  #masthead .header-nav-main > li.header-button-1 { margin-left: auto; }
  #masthead .header-button .button { padding: 0 32px !important; height: 52px !important; min-height: 52px !important; line-height: 50px !important; }
}
@media (min-width: 850px) {
  .header-top .flex-row.container, .header-top .header-inner { max-width: 1440px; padding-left: 48px; padding-right: 48px; }
  #masthead .header-nav-main > li > a.nav-top-link, #masthead .header-button .button { white-space: nowrap; }
}
@media (min-width: 850px) and (max-width: 1279px) {
  #masthead .header-inner, .header-top .flex-row.container, .header-top .header-inner { padding-left: 24px; padding-right: 24px; }
  #masthead #logo { width: 150px !important; }
  #masthead .flex-col.hide-for-medium.flex-right { margin-left: 28px; }
  #masthead .header-nav-main > li.menu-item { margin: 0 9px; }
  #masthead .header-nav-main > li.menu-item > a.nav-top-link { font-size: 13.5px; }
  #masthead .header-nav-main > li.menu-item > a.nav-top-link .icon-angle-down { display: none; }
  #masthead .header-button .button { padding: 0 16px !important; letter-spacing: .08em !important; font-size: 10.5px !important; }
}

/* ===== fahn-termin-weiss (13.10.2026) – NUR der Beratungstermin-Button ist weiß ===== */
html body a.button[href*="termin-vereinbaren"]:not(.is-underline):not(.is-link),
html body a.button[href*="termin-arbeitsplatten"]:not(.is-underline):not(.is-link),
html body a.button[href*="#calendly"]:not(.is-underline):not(.is-link) {
  background-color: #ffffff !important; color: #0a0a0a !important; border: 1px solid #ffffff !important;
}
html body a.button[href*="termin-vereinbaren"]:not(.is-underline):not(.is-link) span,
html body a.button[href*="termin-arbeitsplatten"]:not(.is-underline):not(.is-link) span,
html body a.button[href*="#calendly"]:not(.is-underline):not(.is-link) span { color: #0a0a0a !important; }
html body a.button[href*="termin-vereinbaren"]:not(.is-underline):not(.is-link):hover,
html body a.button[href*="termin-arbeitsplatten"]:not(.is-underline):not(.is-link):hover,
html body a.button[href*="#calendly"]:not(.is-underline):not(.is-link):hover {
  background-color: #e8e8e8 !important; border-color: #e8e8e8 !important;
}

/* ===== fahn-buttons-outline (13.10.2026) – alle anderen Buttons: transparent mit weißer Linie ===== */
html body .button:not(.is-underline):not(.is-link):not(.icon):not(.ux-search-submit):not(.back-to-top):not(.components-button):not([href*="termin-vereinbaren"]):not([href*="termin-arbeitsplatten"]):not([href*="#calendly"]),
html body #wrapper .products .product-small button.wpb-get-a-quote-button-btn {
  background-color: transparent !important; color: #ffffff !important; border: 1px solid rgba(255,255,255,.6) !important; box-shadow: none !important;
}
html body .button:not(.is-underline):not(.is-link):not(.icon):not(.ux-search-submit):not(.back-to-top):not(.components-button):not([href*="termin-vereinbaren"]):not([href*="termin-arbeitsplatten"]):not([href*="#calendly"]) span { color: #ffffff !important; }
html body .button:not(.is-underline):not(.is-link):not(.icon):not(.ux-search-submit):not(.back-to-top):not(.components-button):not([href*="termin-vereinbaren"]):not([href*="termin-arbeitsplatten"]):not([href*="#calendly"]):hover,
html body #wrapper .products .product-small button.wpb-get-a-quote-button-btn:hover {
  background-color: rgba(255,255,255,.08) !important; border-color: #ffffff !important; color: #ffffff !important;
}

/* ===== fahn-marken-karten (13.10.2026) – Markenseite /ueber-uns/marken/ im Kartenstil ===== */
.fm-lead { max-width: 640px; margin: 18px auto 48px; opacity: .8; }
.fm-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; }
.fm-grid > p, .fm-grid > br { display: none; }
.fm-card { position: relative; display: block; overflow: hidden; background: #1a1a1c; color: #fff; text-decoration: none; aspect-ratio: 4 / 5; }
.fm-grid--3 .fm-card { flex: 0 0 calc((100% - 48px) / 3); }
.fm-grid--4 .fm-card { flex: 0 0 calc((100% - 72px) / 4); aspect-ratio: 5 / 6; }
.fm-card .fm-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; margin: 0; transition: transform .7s ease; }
.fm-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,.88) 100%); }
.fm-card:hover .fm-bg { transform: scale(1.05); }
.fm-logo { position: absolute; top: 16px; right: 16px; z-index: 2; display: flex; align-items: center; justify-content: center; width: 112px; height: 60px; padding: 8px 12px; background: #fff; }
.fm-logo img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; margin: 0; }
.fm-logo-txt { color: #0a0a0a; font-weight: 500; letter-spacing: .3em; font-size: 15px; padding-left: .3em; }
.fm-txt { position: absolute; left: 28px; right: 28px; bottom: 26px; z-index: 2; display: block; }
.fm-name { display: block; font-size: 26px; font-weight: 300; letter-spacing: .14em; text-transform: uppercase; line-height: 1.15; color: #fff; }
.fm-sub { display: block; margin-top: 8px; font-size: 14px; font-weight: 300; line-height: 1.5; color: rgba(255,255,255,.78); }
.fm-grid--4 .fm-name { font-size: 21px; }
.fm-grid--4 .fm-txt { left: 22px; right: 22px; bottom: 22px; }
.fm-cert { text-align: center; }
.fm-cert h3 { font-weight: 300; margin-bottom: 12px; }
@media (max-width: 1099px) {
  .fm-grid--4 .fm-card { flex-basis: calc((100% - 48px) / 3); }
}
@media (max-width: 849px) {
  .fm-grid { gap: 14px; }
  .fm-grid--3 .fm-card, .fm-grid--4 .fm-card { flex-basis: calc((100% - 14px) / 2); }
  .fm-name, .fm-grid--4 .fm-name { font-size: 18px; letter-spacing: .1em; }
  .fm-sub { font-size: 13px; }
  .fm-txt, .fm-grid--4 .fm-txt { left: 16px; right: 16px; bottom: 16px; }
  .fm-logo { width: 84px; height: 46px; top: 10px; right: 10px; padding: 6px 8px; }
}
@media (max-width: 549px) {
  .fm-grid--3 .fm-card { flex-basis: 100%; aspect-ratio: 4 / 3; }
  .fm-grid--4 .fm-sub { display: none; }
}

/* ===== fahn-referenz-galerie (13.10.2026) – Referenzseiten: ein großes Bild pro Zeile ===== */
.fahn-ref-gallery .fahn-ref-img { padding-bottom: 28px; }
.fahn-ref-gallery .fahn-ref-img .img, .fahn-ref-gallery .fahn-ref-img .img-inner { width: 100% !important; text-align: center; }
.fahn-ref-gallery .fahn-ref-img img { width: auto !important; max-width: 100%; max-height: 88vh; margin: 0 auto; display: block; }
@media (max-width: 849px) {
  .fahn-ref-gallery .fahn-ref-img { padding-bottom: 14px; }
  .fahn-ref-gallery .fahn-ref-img img { max-height: none; width: 100% !important; }
}