/*
Theme Name: Enfold Child
Description: habs*gut - Cafe und Tagesbar, Maria Enzersdorf
Version: 4.0
Author: habsgut
Template: enfold
*/

html { font-optical-sizing: auto; }





.logo {
	padding: 15px;
}
@media only screen and (max-width: 767px) {
  .responsive .logo img, .responsive .logo svg {    
    max-height: 50px;
  }
}

.quoteheading {
	font-size: 100px;
	line-height: 100px;
	margin-top: 0px;
	margin-bottom: 0px;
}

.avia-button-wrap .avia_iconbox_title {
	font-size: 18px !important;
	line-height: 18px !important;
}

.lineunderlogo {
	border-bottom: 1px solid white !important;
}
.lineabovetext {
	border-top: 1px solid white !important;
}


/* Google Fonts are loaded via wp_enqueue_style in functions.php, not @import.
   Reason: @import only works at the top of a stylesheet; this file has CSS
   rules above this comment so a browser would silently drop the import. */

/* =============================================================================
   CSS CUSTOM PROPERTIES — matched to original habsgut.at
   ============================================================================= */
:root {
  --hg-black: #000000;
  --hg-white: #FFFFFF;
  --hg-beige: #EFEBEA;
  --hg-warm-gray: #CEC3BE;
  --hg-font-heading: 'Instrument Serif', serif;
/*   --hg-font-body: 'Inter', 'Inter Display', sans-serif; */
  --hg-font-body: 'Inter', sans-serif; 
  --hg-font-mono: 'Fragment Mono', monospace;
}


.hg-label, .av-special-heading.hg-label .av-special-heading-tag {
  font-family: var(--hg-font-mono);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

#hero, .hg-hero-section, .addpadding {
	margin-bottom: 70px !important;
}

.container .template-page {
	padding-bottom: 0px !important;
	margin-bottom: 0px !important;
}

/* =============================================================================
   GLOBAL TYPOGRAPHY — matched to original
   Original: body 20px Inter Display, headings 400-weight Instrument Serif
   ============================================================================= */
body {
  font-family: var(--hg-font-body);
  font-size: 20px;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--hg-black);
  background-color: var(--hg-beige);
}

/* Headings: Instrument Serif, weight 400 (NOT 600) */
h1, h2, h3, h4, h5, h6,
.av-special-heading h1, .av-special-heading h2,
.av-special-heading h3, .av-special-heading h4,
.av-special-heading-tag {
  font-family: var(--hg-font-heading);
  font-weight: 400;
  letter-spacing: -0.03em;
}
h1, .av-special-heading h1 { letter-spacing: -0.04em; }

/* Default heading sizes (Enfold inline sizes will override these) */
h1, .av-special-heading h1 { font-size: 120px; line-height: 108px; }
h2, .av-special-heading h2 { font-size: 40px; line-height: 40px; }
h3, .av-special-heading h3 { font-size: 50px; line-height: 50px; }
h4, .av-special-heading h4 { font-size: 40px; line-height: 40px; }
h5, .av-special-heading h5 { font-family: var(--hg-font-body); font-size: 20px; line-height: 30px; }


.styledheading .av-special-heading-tag, h2.styledheading {
	font-size: 50px !important;
	letter-spacing: -0.01em !important;
	line-height: 1em !important;
}

/* For MARKUS / ERIKA */
.avia_desktop .av-hover-overlay-active .av-masonry-image-container {
	opacity: 1 !important;
}


/* Body paragraphs — defaults, Enfold textblock sizes override */
p, span, a, li {
  font-family: var(--hg-font-body);
}

.avia-section p,
.avia-section .av_textblock_section p {
  font-weight: 400;
  color: var(--hg-black);
  line-height: 1.6;
}

/* Lead/intro paragraphs — opt-in class only */
.hg-lead-text,
.hg-lead-text p {
  font-family: var(--hg-font-heading);
  font-size: 30px;
  line-height: 42px;
}

/* Hero heading color: beige #EFEBEA on dark backgrounds (NOT pure white) */
.hg-hero-section .av-special-heading-tag {
  color: var(--hg-beige) !important;
  display: block !important;
  width: 100% !important;
}

.hg-hero-section .av-special-heading {
  text-align: center !important;
  width: 100% !important;
  height: auto !important;
}

.hg-hero-section .flex_column,
.hg-hero-section .flex_column_table {
  text-align: center !important;
}


.av-burger-overlay-inner .menuitem a, .av-burger-overlay-inner a .avia-menu-text {
	font-family: var(--hg-font-heading) !important;	
}
.html_av-overlay-full #top #wrap_all #av-burger-menu-ul li {
	line-height: 1em !important;
}
/* =============================================================================
   NAV — Layout: Left(Tagesbar|Seminare|Feiern) Center(☰) Right(Reservieren|Logo)
   ============================================================================= */
#header_main {
	margin-top: 15px;	
}

#top .main_menu .menu > li > a,
.av-main-nav > li > a {
  font-family: var(--hg-font-body) !important;  
  font-size: 16px !important;
  font-weight: 400 !important;
  text-decoration: none !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}


/* Active page indicator */
#top .main_menu .menu > li.current-menu-item > a {
  border-bottom: 1px solid currentColor;
}

/* --- Header: transparent, inverted colors, sticky on ALL devices --- */

/* Entire header fixed at top on ALL screen sizes.
   Background color is intentionally NOT forced here — set it via
   Enfold -> Header -> Header Background or per-page transparency. */
#top #wrap_all #header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  z-index: 1000 !important;
}

/* Strip Enfold's default header border/shadow only.
   (Background colors come from Enfold theme options.) */
#top #header,
#top #header_main,
#top #header .header_bg,
#top #header_main .container {
  border-bottom: none !important;
  box-shadow: none !important;
}

/* Hamburger icon container stays transparent (just the bars are coloured) */
.av-hamburger {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* --- Sticky/scrolled header: translucent beige bg, dark text & logo ---
   Enfold removes the .av_header_transparency class from #header once the
   page is scrolled past ~50px, so :not(.av_header_transparency) targets
   the scrolled state. */
#top #header:not(.av_header_transparency),
#top #header:not(.av_header_transparency) #header_main,
#top #header:not(.av_header_transparency) .header_bg {
  background-color: rgba(239, 235, 234, 1) !important; /* --hg-beige @ ~35% transparency */
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: background-color 0.25s ease;
}

/* Nav links + burger label → black */
#top #header:not(.av_header_transparency) .av-main-nav > li > a,
#top #header:not(.av_header_transparency) .av-open-burger-text,
#top #header:not(.av_header_transparency) .av-burger-menu-main a {
  color: var(--hg-black) !important;
}

/* Burger bars → black */
#top #header:not(.av_header_transparency) .av-hamburger-inner,
#top #header:not(.av_header_transparency) .av-hamburger-inner::before,
#top #header:not(.av_header_transparency) .av-hamburger-inner::after {
  background-color: var(--hg-black) !important;
}

/* Logo: flip the SVG fills from white to black.
   Works for the inline SVG logo whose paths use rgb(255,255,255). */
#top #header:not(.av_header_transparency) .logo svg path[fill="rgb(255,255,255)"],
#top #header:not(.av_header_transparency) .logo svg path[fill="#FFFFFF"],
#top #header:not(.av_header_transparency) .logo svg path[fill="#ffffff"],
#top #header:not(.av_header_transparency) .logo svg path[fill="#fff"],
#top #header:not(.av_header_transparency) .logo svg path[fill="white"] {
  fill: var(--hg-black) !important;
}

/* --- Burger overlay: Enfold's default. On desktop, constrain to a left-side
       720px panel; on mobile, keep Enfold's full-screen default. Colors and
       padding are global so both viewports use the brand palette. --- */
/* Burger overlay uses Enfold defaults — no customization here. */

/* Hide menu items with the "hidden" class everywhere (e.g. Academy) */
.av-main-nav li.hidden,
.av-burger-overlay-menu li.hidden {
  display: none !important;
}

/* Pin the burger overlay to the viewport using vh units. Enfold parents the
   overlay inside .avia-menu (which sits in our fixed 90px header), so
   "height: 100%" would resolve to 90px; vh sidesteps that. */
#top .av-burger-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
}
#top .av-burger-overlay-scroll {
  position: relative !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100vh !important;
  padding: 100px 20px 40px !important;
  overflow-y: auto !important;
}
#top .av-burger-overlay-bg {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100vh !important;
  background-color: var(--hg-beige) !important;
  opacity: 1 !important;
}
/* Overlay link color: black on beige */
#top .av-burger-overlay a,
#top .av-burger-overlay-menu li > a,
#top .av-burger-overlay .av-burger-overlay-inner a {
  color: var(--hg-black) !important;
}

/* Smooth color/opacity fade on nav-link hover (no underline) */
#top .av-main-nav > li > a {
  transition: opacity 0.2s ease, color 0.2s ease !important;
}
#top .av-main-nav > li > a:hover {
  opacity: 0.65 !important;
}

/* Nav links: white */
#top #header .av-main-nav > li > a {
  color: #FFFFFF !important;
}

/* Mobile/tablet burger lines: white, NO background box */
#top .av-hamburger {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
#top .av-hamburger-inner,
#top .av-hamburger-inner::before,
#top .av-hamburger-inner::after {
  background-color: #FFFFFF !important;
}

/* Mobile menu text "Menü": white */
#top #header .av-open-burger-text,
#top .av-burger-menu-main a {
  color: #FFFFFF !important;
}

/* --- Header layout: desktop only (>989px) — nav LEFT, logo RIGHT --- */
@media only screen and (min-width: 990px) {
  #top #header_main .container,
  #top #header_main .container.av-logo-container {
    max-width: 100% !important;
    padding: 0 40px !important;
  }

  #top .inner-container {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
  }

  /* Nav goes LEFT (order 1) */
  #top .inner-container > .main_menu,
  #top #header_main .main_menu {
    order: 1 !important;
    float: none !important;
    position: static !important;
    flex: 1 !important;
    width: auto !important;
  }

  /* Logo goes RIGHT (order 2) */
  #top .inner-container > .logo,
  #top #header_main span.logo {
    order: 2 !important;
    float: none !important;
    position: static !important;
    flex-shrink: 0 !important;
  }

  #top .av-main-nav,
  #top ul.av-main-nav {
    display: flex !important;
    align-items: center !important;
    float: none !important;
  }

  #top #header_main .container *:not(img):not(svg) {
    float: none !important;
  }
}

/* Show Enfold's native burger as the first item of the desktop nav.
   Only menu items tagged with the "topnav" CSS class (set per item in
   Appearance -> Menus) appear in the horizontal bar; everything else lives
   inside the burger overlay. Visual order of the 4 top-nav items is set
   per menu-item ID so it stays Tagesbar > Seminare > Feiern > Reservieren
   regardless of the burger-overlay sequence. */
@media only screen and (min-width: 990px) {
  #top .av-main-nav > li.av-burger-menu-main {
    display: list-item !important;
    order: -1 !important;
    margin-right: 24px !important;
  }
  #top .av-main-nav > li:not(.topnav):not(.av-burger-menu-main) {
    display: none !important;
  }
  #top .av-main-nav > li#menu-item-145 { order: 1 !important; } /* Café und Tagesbar */
  #top .av-main-nav > li#menu-item-146 { order: 2 !important; } /* Seminare und Meetings */
  #top .av-main-nav > li#menu-item-147 { order: 3 !important; } /* Feiern und Events */
  #top .av-main-nav > li#menu-item-148 { order: 4 !important; } /* Reservieren */
}

/* =============================================================================
   BUTTONS — match original: pill 30px radius, Inter Display
   ============================================================================= */
.avia-button {
  border-radius: 30px;
  font-size: 16px;
  font-weight: 400;
  padding: 12px 36px;
  font-family: var(--hg-font-body);
  letter-spacing: 0;
}

/* Card buttons */
.hg-card .avia-button {
  border-radius: 30px;
}

/* Buttons on dark backgrounds */
.hg-bg-black .avia-button.avia-color-light,
.hg-bg-black .avia-button[style*="transparent"] {
  border: 1px solid var(--hg-beige) !important;
  color: var(--hg-beige) !important;
}

/* =============================================================================
   CASCADING TEXT (Genussentspannt / Arbeiten / Feiern)
   — NO scrolling, NO marquee, just static staggered italic text
   ============================================================================= */

/* Cascading italic text (Genussentspannt / Arbeiten naturstadtnah / Feiern wie daheim) */
.hg-cascade-text {
/*   padding: 60px 0; */
  text-align: center;
}

.hg-cascade-line {
  font-family: var(--hg-font-heading);
  font-style: italic;
  font-size: 70px;
  line-height: 0.85;
  color: var(--hg-black);
  font-weight: 400;
  padding-top: 10px;
	
}

.hg-cascade-line:nth-child(1) { text-indent: -5%; }
.hg-cascade-line:nth-child(2) { text-indent: 5%; }
.hg-cascade-line:nth-child(3) { text-indent: 15%; }

@media only screen and (max-width: 768px) {
  .hg-cascade-line {
    font-size: 32px;
    padding-left: 5% !important;
  }
}

/* =============================================================================
   FAQ ACCORDION (details/summary)
   ============================================================================= */
details.hg-faq-item {
  border-bottom: 1px solid var(--hg-warm-gray);
  padding: 20px 0;
}

details.hg-faq-item summary {
  font-family: var(--hg-font-heading);
  font-size: 22px;
  font-weight: 400;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

details.hg-faq-item summary::-webkit-details-marker {
  display: none;
}

details.hg-faq-item summary::after {
  content: '+';
  font-size: 24px;
  font-weight: 300;
  font-family: var(--hg-font-body);
  transition: transform 0.2s;
}

details.hg-faq-item[open] summary::after {
  content: '\2212';
}

details.hg-faq-item .faq-answer {
  padding-top: 15px;
  font-size: 16px;
  line-height: 1.7;
  font-family: var(--hg-font-body);
}

/* =============================================================================
   FIX: Enfold wraps & in span.special_amp with Baskerville — override to inherit
   ============================================================================= */
.special_amp {
  font-family: inherit !important;
  font-style: inherit !important;
  color: inherit !important;
}

/* =============================================================================
   TARGETED COLOR OVERRIDES
   ============================================================================= */
.hg-bg-beige {
  background-color: var(--hg-beige);
}

.hg-bg-black {
  background-color: var(--hg-black);
  color: var(--hg-beige);
}

/* Text on dark backgrounds uses beige #EFEBEA, not pure white */
.hg-bg-black h1, .hg-bg-black h2, .hg-bg-black h3,
.hg-bg-black h4, .hg-bg-black h5, .hg-bg-black h6,
.hg-bg-black p, .hg-bg-black span, .hg-bg-black a {
  color: var(--hg-beige) !important;
}

/* =============================================================================
   RESPONSIVE
   ============================================================================= */
@media only screen and (max-width: 768px) {
  h1, .av-special-heading h1 {
    font-size: 60px !important;
    line-height: 54px !important;
  }

  .hg-marquee-inner span {
    font-size: 32px;
    padding: 0 30px;
  }

  details.hg-faq-item summary {
    font-size: 18px;
  }

  /* ===== MOBILE HERO: full width, no gaps ===== */

  /* Hero only: no side padding (video fills edge-to-edge) */
  #hero > .container,
  #hero > .av-section-cont-open {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* No top gap on mobile — header overlays content */
  .html_header_transparency .template-page.content,
  #main,
  .container_wrap:first-of-type {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  /* Force header transparent on mobile (sticky is handled globally) */
  #header, #header_main, #header .header_bg,
  #header .container, .av-burger-overlay-bg {
    background: transparent !important;
    background-color: transparent !important;
  }

  /* Hero section: edge-to-edge, exactly 100vh */
  #hero {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    padding: 0 !important;
    max-height: 100vh !important;
    overflow: hidden !important;
  }

  /* Hero text on mobile: centered, readable size */
  #hero .av-special-heading-tag {
    font-size: 36px !important;
    line-height: 44px !important;
  }

  #hero .av_textblock_section p,
  #hero .av_textblock_section {
    font-size: 14px !important;
    line-height: 22px !important;
  }

  #hero .flex_column {
    padding-left: 20px !important;
    padding-right: 20px !important;
    text-align: center !important;
  }

  /* Mobile hero fills exactly one screen */
  #hero .flex_column_table {
    min-height: 100vh !important;
    max-height: 100vh !important;
    padding-bottom: 40px !important;
  }
}

/* Tablet (769-989px): transparent header (sticky is handled globally) */
@media only screen and (min-width: 769px) and (max-width: 989px) {
  #header, #header_main, #header .header_bg,
  #header .container, .av-burger-overlay-bg {
    background: transparent !important;
    background-color: transparent !important;
  }

  .html_header_transparency .template-page.content,
  #main,
  .container_wrap:first-of-type {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
}

/* =============================================================================
   SLIDESHOW SIZE FIX
   ============================================================================= */
/*
 * .avia-slideshow:not(.av-section-video-bg) {
  max-height: 600px;
}
*/

.avia-slideshow img {
  object-fit: cover;
}

/* =============================================================================
   FIX: Remove Enfold special heading decoration lines
   ============================================================================= */
.av-special-heading .special-heading-border,
.av-special-heading .special-heading-inner-border,
.av-special-heading.elegant-centered .av-special-heading-tag .heading-wrap:before,
.av-special-heading.elegant-centered .av-special-heading-tag .heading-wrap:after {
  display: none !important;
}

/* Remove default content top-padding on transparent header pages */
.html_header_transparency .template-page.content {
  padding-top: 0 !important;
}

/* Fix: Enfold section padding not applied in fullsize mode.
   Enfold targets .content/.sidebar but fullsize pages don't have those wrappers. */

/* .avia-section-small.fullsize > .container { padding-top: 20px; padding-bottom: 20px; }
.avia-section-default.fullsize > .container { padding-top: 50px; padding-bottom: 50px; }
.avia-section-large.fullsize > .container { padding-top: 70px; padding-bottom: 70px; }
.avia-section-huge.fullsize > .container { padding-top: 130px; padding-bottom: 130px; }
.avia-section-no-padding.fullsize > .container { padding-top: 0; padding-bottom: 0; }
 */

.avia-section-small.fullsize > .container { padding-top: 70px; padding-bottom: 70px; }
.avia-section-default.fullsize > .container { padding-top: 70px; padding-bottom: 70px; }
.avia-section-large.fullsize > .container { padding-top: 70px; padding-bottom: 70px; }
.avia-section-huge.fullsize > .container { padding-top: 70px; padding-bottom: 70px; }
.avia-section-no-padding.fullsize > .container { padding-top: 70px; padding-bottom: 70px; }


/* =============================================================================
   CONTENT WIDTH CONSTRAINTS — match original habsgut.at layout
   ============================================================================= */
.container_wrap > .container.av-section-cont-open {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.avia-section > .container {
  max-width: 1054px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.hg-section-full > .container,
.hg-section-full > .container.av-section-cont-open {
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.avia-section.av-section-video-bg > .container,
.avia-section.avia-section-no-padding > .container,
.avia-section[style*="background-image"] > .container {
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.midwidthcontainer > .container {
	max-width: 1525px !important;
/* 	max-width: 80% !important; */
}
.highwidthcontainer > .container {
	max-width: 95% !important;
}

.hg-section-wide > .container {
  max-width: 1600px !important;
}

/* Footer: full width with padding, matching original (44px 50px 30px) */
#footer .container,
.avia-footer .container,
#socket .container {
  max-width: 100% !important;
  padding-left: 50px !important;
  padding-right: 50px !important;
}

/* Footer column headers: uppercase, small, letter-spacing */
.avia-footer .widget-title,
#footer .widget-title {
  text-transform: uppercase !important;
  font-family: var(--hg-font-body) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  letter-spacing: 1px !important;
  color: var(--hg-white) !important;
}

/* =============================================================================
   FIX: Heading text-transform - original uses normal case
   ============================================================================= */
.av-special-heading .av-special-heading-tag {
  text-transform: none;
  font-weight: 400;
}

/* =============================================================================
   VIMEO VIDEO — uses Enfold native section video, hide Vimeo controls via CSS
   ============================================================================= */
/* Hide Vimeo player controls (play, progress, share, etc.) on hero video */
#hero .av-section-video-controls,
#hero .mejs-container,
#hero .mejs-controls,
#hero .mejs-overlay,
#hero .mejs-overlay-play {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Hide the Vimeo UI elements inside the iframe overlay area */
#hero .avia-video {
  pointer-events: none !important;
}

/* Custom play/pause toggle for the hero video. Sits bottom-center, white pill. */
#hero { position: relative; }
.hg-video-controls {
  position: absolute !important;
  bottom: 70px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 10 !important;
  display: flex;
  align-items: center;
  gap: 10px;
}

.hg-video-toggle {
  width: 56px;
  height: 36px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  transition: background 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
.hg-video-toggle:hover {
  background: rgba(255, 255, 255, 0.32);
  border-color: rgba(255, 255, 255, 0.55);
  transform: scale(1.06);
}

/* Play / Pause icon swap (toggled by JS via .is-paused class) */
.hg-video-toggle .hg-icon-play  { display: none; }
.hg-video-toggle .hg-icon-pause { display: block; }
.hg-video-toggle.is-paused .hg-icon-play  { display: block; }
.hg-video-toggle.is-paused .hg-icon-pause { display: none; }

/* Mute / Unmute icon swap (toggled by JS via .is-muted class) */
.hg-video-mute .hg-icon-volume-on  { display: block; }
.hg-video-mute .hg-icon-volume-off { display: none; }
.hg-video-mute.is-muted .hg-icon-volume-on  { display: none; }
.hg-video-mute.is-muted .hg-icon-volume-off { display: block; }

/* Ensure hero content sits above the video and at the BOTTOM */
#hero .flex_column,
#hero .flex_column_table {
  position: relative !important;
  z-index: 2 !important;
}

#hero .flex_column_table {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  min-height: 100vh !important;
  padding-bottom: 60px !important;
}

/* Hero heading "Öffnungszeiten" — large and prominent */
#hero .av-special-heading-tag {
  font-size: 70px !important;
  line-height: 80px !important;
  font-family: var(--hg-font-heading) !important;
}

/* Hero hours text — clearly readable */
#hero .av_textblock_section p,
#hero .av_textblock_section {
  font-size: 24px !important;
  line-height: 36px !important;
  font-family: var(--hg-font-heading) !important;
}

/* Dark overlay on the video for text readability */
#hero .av-section-color-overlay {
  background: rgba(0, 0, 0, 0.25) !important;
}


/* ============================================================
   Hero Color Section — Mobile: Bild X% Breite, AUTO volle Bildhöhe
   ------------------------------------------------------------
   Konzept: zwei CSS-Variablen steuern den Mobile-Hero:
     --hg-hero-w-pct  : Bildbreite in % der Viewport-Breite
                        (Default 250 = 250vw, Bild überlappt links/rechts)
     --hg-hero-aspect : Bild-Aspect-Ratio (Breite / Höhe)
                        wird PRO SECTION von JS automatisch erkannt
                        (siehe functions.php: hg-hero-aspect-script)
                        Default-Fallback 1.5 (= 3:2)
   Section-Höhe = vw-Breite / Aspect, sodass das Bild exakt 1× ins
   Inner passt (kein Vertikal-Crop, voller Bildausschnitt).
   - Background-Position 'center top' = Bild beginnt oben am Section-Rand.
   - Parallax wird auf Mobile neutralisiert (transform/top/bottom/height),
     sonst zeigt das Inner einen verschobenen Ausschnitt.
   Desktop (>=768px) bleibt unverändert.
   ------------------------------------------------------------
   Pro-Section-Override (optional, falls JS nicht greift oder eine
   abweichende Breite gewünscht ist) — inline am Element:
       style="--hg-hero-w-pct: 200; --hg-hero-aspect: 1.78"
   ------------------------------------------------------------
   Anwendung: Klasse `hg-hero-bg-shrink` zur Color Section ergänzen
   Hinzugefügt: 2026-05-23 | Problem 1 — Hero-BG-Mobile
   ============================================================ */
@media only screen and (max-width: 767px) {
  .hg-hero-bg-shrink {
    --hg-hero-w-pct: 250;
    --hg-hero-aspect: 1.5;
    min-height: 0 !important;
    height: calc(1vw * var(--hg-hero-w-pct) / var(--hg-hero-aspect)) !important;
  }
  /* Parallax-Wrapper neutralisieren:
     - Höhe = 100% statt Enfold's calc(100vh*.3 + 100%)
     - Top:0 / Bottom:auto statt Bottom:0 (Bild ankert oben)
     - Transform:none überschreibt JS-Parallax-Translate */
  .hg-hero-bg-shrink > .av-parallax {
    height: 100% !important;
    top: 0 !important;
    bottom: auto !important;
    transform: none !important;
  }
  .hg-hero-bg-shrink > .av-parallax > .av-parallax-inner {
    height: 100% !important;
    top: 0 !important;
    bottom: auto !important;
    transform: none !important;
    background-size: calc(1vw * var(--hg-hero-w-pct)) auto !important;
    background-repeat: no-repeat !important;
    background-position: center top !important;
  }
  /* Enfold's min-height-100/av-height-100 müssen explizit überschrieben werden */
  .hg-hero-bg-shrink.av-minimum-height-100,
  .hg-hero-bg-shrink.av-height-100 {
    min-height: 0 !important;
    height: calc(1vw * var(--hg-hero-w-pct) / var(--hg-hero-aspect)) !important;
  }
}


/* ============================================================
   Logo-Grid Mobile-Shrink
   ------------------------------------------------------------
   Wenn eine Section eine Reihe Logos in Spalten enthält
   (z.B. Referenz-/Partner-Wand), kollabieren die Spalten auf
   Mobile zu 100% Breite — jedes Logo wird viel zu groß.
   Diese Regel begrenzt die Bildbreite per Default auf 100px,
   zentriert und proportional skaliert.
   ------------------------------------------------------------
   Pro-Section-Override (optional, falls eine abweichende
   Maximalgröße gewünscht ist) — inline am Element:
       style="--hg-logo-max: 150px"
   ------------------------------------------------------------
   Anwendung: Klasse `hg-logo-grid` zur Section ergänzen
   Hinzugefügt: 2026-05-23 | Problem 2 — Seminare-Logos
   ============================================================ */
@media only screen and (max-width: 767px) {
  .hg-logo-grid {
    --hg-logo-max: 100px;
  }
  .hg-logo-grid .avia-image-container img,
  .hg-logo-grid .avia-image-container,
  .hg-logo-grid .avia_image {
    max-width: var(--hg-logo-max) !important;
    height: auto !important;
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}


/* ============================================================
   Bild Mobile-Shrink (Universelle Opt-in-Klasse)
   ------------------------------------------------------------
   Für einzelne Bilder/Illustrationen, die auf Mobile zu groß
   werden (z.B. Brushstroke-Illustrationen, Brand-Visuals,
   große Card-Bilder). Klasse manuell pro Bild setzen.
   Default-Max: 50% der Viewport-Breite (50vw).
   Desktop bleibt unverändert.
   ------------------------------------------------------------
   Pro-Bild-Override (optional, abweichende Maximalgröße) —
   inline am Element:
       style="--hg-img-mobile-max: 30vw"
       style="--hg-img-mobile-max: 200px"
   ------------------------------------------------------------
   Anwendung: Klasse `hg-img-mobile-shrink` als zusätzliche
   Custom CSS Class am Enfold-av_image setzen
   Hinzugefügt: 2026-05-23 | Problem 3 — Illustration zu groß
   Erstes Beispiel: 51Brushstroke (Seminare-Page)
   ============================================================ */
@media only screen and (max-width: 767px) {
  .hg-img-mobile-shrink {
    --hg-img-mobile-max: 50vw;
  }
  .hg-img-mobile-shrink img,
  .hg-img-mobile-shrink .avia-image-container,
  .hg-img-mobile-shrink .avia-image-container img,
  .avia-image-container.hg-img-mobile-shrink img,
  .avia-image-container.hg-img-mobile-shrink {
    max-width: var(--hg-img-mobile-max) !important;
    height: auto !important;
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    float: none !important;
    text-align: center !important;
  }
}


/* ============================================================
   Section-Padding Mobile — global auf 30px
   ------------------------------------------------------------
   Hintergrund: Weiter oben in dieser Datei (~Zeile 661) zwingt
   ein vorhandener Override ALLE Padding-Stufen (small / default
   / large / huge / no-padding) auf 70px — auf Desktop UND auf
   Mobile. Auf Mobile ist das viel zu viel Whitespace.
   Diese Regel überschreibt das auf Mobile mit pauschal 30px
   oben/unten für alle Fullsize-Sections.
   Desktop bleibt bei 70px (unverändert).
   ------------------------------------------------------------
   Einzelne Sections enger machen (z.B. 0/10px): Custom CSS
   Class an die Section setzen und einen eigenen Override
   schreiben — diese Regel hier ist die globale Basis.
   Hinzugefügt: 2026-05-24 | Problem 4 — Mobile Abstände
   ============================================================ */
@media only screen and (max-width: 767px) {
  .avia-section-small.fullsize > .container,
  .avia-section-default.fullsize > .container,
  .avia-section-large.fullsize > .container,
  .avia-section-huge.fullsize > .container,
  .avia-section-no-padding.fullsize > .container {
    padding-top: 30px !important;
    padding-bottom: 30px !important;
  }
}


/* ============================================================
   Mini-Widget Position + Panel-Constraint
   ------------------------------------------------------------
   Bar-Position pro Viewport:
     Desktop : bottom: 120px  (Platz für Scroll-to-Top-Anker)
     Mobile  : bottom: 40px   (näher am Rand, mehr Höhe fürs Panel)
   Diese Werte überschreiben die im Widget-Codeblock gesetzten
   100px/70px (Codeblock-CSS hat kein !important).
   ------------------------------------------------------------
   Panel-Höhen-Constraint:
   Das Panel öffnet nach oben aus der Bar. Es darf nie über
   den sichtbaren Viewport hinaus wachsen, sonst ist der
   X-Button am oberen Rand verschluckt. Mit `svh` rechnen wir
   gegen den TATSÄCHLICH sichtbaren Bereich (Mobile-Adressleiste
   wird berücksichtigt); `vh` bleibt als Fallback.
   Buffer-Formel: Bar-Bottom + Bar-Höhe (48) + Gap (10) + 10
                = bottom + 68
   Panel-Content scrollt intern bei Überlauf.
   Hinzugefügt: 2026-05-24 | Widget Close-Fix + Position
   ============================================================ */
.mw-wrap {
  --mw-bar-bottom: 120px;
  bottom: var(--mw-bar-bottom) !important;
}
@media (max-width: 600px) {
  .mw-wrap {
    --mw-bar-bottom: 40px;
  }
}

.mw-panel {
  max-height: calc(100vh  - var(--mw-bar-bottom, 120px) - 68px) !important;
  max-height: calc(100svh - var(--mw-bar-bottom, 120px) - 68px) !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

/* ============================================================
   Borlabs Vimeo Content-Blocker – Fallback fuer Enfold Video-Hero
   Fix: blockierte Box kollabiert in Enfold-Video-Slides -> schwarzer Hero.
   Gibt der Box volle Hoehe, zeigt Poster-Bild als Cover. (2026-06-04)
   ============================================================ */
.av-video-slide .avia-slide-wrap { position: relative; }
.av-video-slide .mejs-mediaelement,
.av-video-slide .brlbs-cmpnt-container.brlbs-cmpnt-content-blocker,
.av-video-slide .brlbs-cmpnt-cb-preset-c,
.av-video-slide .brlbs-cmpnt-cb-thumbnail {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
}
.av-video-slide .brlbs-cmpnt-cb-thumbnail {
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}
/* Lade-Button/Text unter die Headline statt mittig (Ueberlappung vermeiden) */
.av-video-slide .brlbs-cmpnt-cb-main {
    position: absolute;
    left: 0; right: 0; bottom: 7%;
    top: auto;
    display: flex; flex-direction: column;
    align-items: center; text-align: center;
}
/* Home-Hero: konkretes Poster (domain-relativ -> migrationssicher) */
body.page-id-14 .av-video-slide .brlbs-cmpnt-cb-thumbnail {
    background-image: url("/wp-content/uploads/2026/06/habsgut-still-v3-horizointal.jpg") !important;
}

/* ===== Footer Responsive-Fix (2026-06-04) =====
   Vorher: Footer-Container max-width:100% (full-width) -> Inhalt klebt bei
   grossen Aufloesungen am Rand. Jetzt: zentriert begrenzt + Responsive-Padding.
   Breite (1310px) bei Bedarf anpassen. */
#footer .container,
.avia-footer .container,
#socket .container {
  max-width: 1310px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
@media (max-width: 767px) {
  #footer .container,
  .avia-footer .container,
  #socket .container {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}

/* ===== Footer-Fix v2 (2026-06-04): echter Selektor .footer-page-content =====
   Footer ist Custom-ALB-Seite (.footer-page-content), NICHT #footer. An
   Breite 1600px (etwas breiter), IMMER seitlich gepolstert -> kein Rand-Kleben. */
.footer-page-content .avia-section > .container {
  max-width: 1600px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 50px !important;
  padding-right: 50px !important;
  box-sizing: border-box !important;
}
@media (max-width: 767px) {
  .footer-page-content .avia-section > .container {
    padding-left: 24px !important;
    padding-right: 24px !important;
    box-sizing: border-box !important;
  }
}

/* ===== Footer-Trennlinien sauber neu (2026-06-05) =====
   Frueher: Border pro Spalte (.lineunderlogo/.lineabovetext) -> auf Desktop eine
   Linie, auf Mobile (gestapelt) mehrere/doppelte Linien.
   Jetzt: je EINE Linie auf dem vollbreiten Reihen-Wrapper (.flex_column_table).
   -> identisch auf Desktop + Mobile, nie doppelt, kein DB-Eingriff. */
.footer-page-content .lineunderlogo { border-bottom: none !important; }
.footer-page-content .lineabovetext { border-top: none !important; }
.footer-page-content .flex_column_table:first-of-type { border-bottom: 1px solid #fff !important; }
.footer-page-content .flex_column_table:last-of-type  { border-top: 1px solid #fff !important; }