/* Reset / Grundgerüst */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: auto;  
  box-sizing: border-box;
  overflow: auto;
  overflow-x: hidden;
  font-family: system-ui,sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility; /* optional */
  -webkit-font-smoothing: antialiased; /* optional */
  -moz-osx-font-smoothing: grayscale;  /* optional */
}

*, *::before, *::after { box-sizing: inherit; margin: 0; padding: 0; }

/* Seiten-Skelett: Header | Main (flex:1) | Footer */
body {
  min-height: 100dvh;       
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* 3. Die Link-Heilung */
a {
  text-decoration: none; /* Optional: Falls du keine Unterstreichung willst */
  transition: opacity 0.2s; /* Schöner Effekt beim Hover */
}


header, .yu-header { flex: 0 0 auto; }
main,   .yu-main   { flex: 1 0 auto; min-height: 0; } 
footer, .yu-footer { flex: 0 0 auto; }

/* Sections im Main: im Fluss bleiben */
.yu-section {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  min-width: 0;
  min-height: 0;
  z-index: 0;
}

/* Container: zentrierter Content-Rahmen, keine Default-Höhe erzwingen */
.yu-container {
  display: flex;
  flex-direction: row;
  width: min(100%, 1440px);
  margin-inline: auto;  
  min-width: 0;
  min-height: 0;
  max-width: 1440px;
}

/* Gridbox: flexibel, aber ebenfalls ohne 100%-Zwang */
.yu-gridbox {
  display: flex;
  width: 100%;
  min-width: 0;
  min-height: 0;
}

[data-scroll-effects] [data-scroll-target] { transform: translateZ(0); }

/* MEDIA-WIDGET special*/
.yu-gridbox > .yu-widget[data-widget-key="yb_media"] {
  flex: 1 1 auto;
  min-width: 0;
}
.yu-gridbox > .yu-widget[data-widget-key="yb_media"] > * {
  width: 100%;
}

/* ===== HARD OVERRIDE: Mobile erzwingen, wenn .is-mobile gesetzt ist ===== */
.yu-widget[data-widget-key="yb_menu"] nav.yb_menu.is-mobile .yb_menu__burger{
  display:inline-grid !important;
}
.yu-widget[data-widget-key="yb_menu"] nav.yb_menu.is-mobile .yb_menu__panelHeader{
  display:flex !important;
}
.yu-widget[data-widget-key="yb_menu"] nav.yb_menu.is-mobile .yb_menu__backdrop{
  display:block !important;
}

/* Desktop-Layout ausknipsen */
.yu-widget[data-widget-key="yb_menu"] nav.yb_menu.is-mobile .yb_menu__panel{
  position:fixed !important;
  top:0; bottom:0; left:0; right:auto;
  width:min(86vw, 360px) !important;
  background:#fff;
  border-right:1px solid rgba(0,0,0,.08);
  transform:translateX(-100%) !important;
  transition:transform .3s ease !important;
  z-index:1000 !important;
  overflow-y:auto; -webkit-overflow-scrolling:touch; padding:12px;
  display:block !important; /* überschreibt evtl. display:flex aus Desktop */
}
.yu-widget[data-widget-key="yb_menu"] nav.yb_menu.flyout-right.is-mobile .yb_menu__panel{
  left:auto; right:0; border-right:none; border-left:1px solid rgba(0,0,0,.08);
  transform:translateX(100%) !important;
}

/* Panel sichtbar, wenn geöffnet */
.yu-widget[data-widget-key="yb_menu"] nav.yb_menu.is-mobile.is-open .yb_menu__panel{
  transform:translateX(0) !important;
}

.yu-widget[data-widget-key="yb_menu"] {
  z-index: 100;
}
/* Liste vertikal statt horizontal */
.yu-widget[data-widget-key="yb_menu"] nav.yb_menu.is-mobile .yb_menu__list--level-0{
  display:grid !important;
  gap:6px !important;
}

/* Hover-Dropdowns deaktivieren im Mobile */
.yu-widget[data-widget-key="yb_menu"] nav.yb_menu.is-mobile .yb_menu__submenu{
  display:none !important;
}

/* Einheitliches Styling für Slider-Navigation */
.yb_slider_arrows button,
.slider-arrows button {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: #fff;
  color: #111;
  font-size: 20px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

/* Container für zentrierte oder horizontale Ausrichtung */
.yb_slider_arrows,
.slider-arrows {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
}

/* Hover- und Active-Zustände */
.yb_slider_arrows button:hover,
.slider-arrows button:hover {
  background: #f3f3f3;
  transform: translateY(-1px);
}

.yb_slider_arrows button:active,
.slider-arrows button:active {
  transform: scale(0.95);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}