/* ADD YOUR CUSTOM CSS HERE */
/* Haupt-Content Container */
#global_content {
  width: 98% !important;
  max-width: 98% !important;
  padding-left: 5px !important;
  padding-right: 5px !important;
  box-sizing: border-box !important;
}
 
/* Header volle Breite */
.layout_page_header .layout_main,
.pulse_header_inner {
  max-width: 98% !important;
  width: 98% !important;
  margin: 0 auto !important;
  padding-left: 5px !important;
  padding-right: 5px !important;
}
 
/* Footer volle Breite */
.layout_page_footer .layout_main,
.pulse_footer .container,
.pulse_footer_bottom .container {
  max-width: 98% !important;
  width: 98% !important;
  margin: 0 auto !important;
  padding-left: 5px !important;
  padding-right: 5px !important;
}
 
/* Bootstrap Container überschreiben */
.container {
  max-width: 98% !important;
  width: 98% !important;
  padding-left: 5px !important;
  padding-right: 5px !important;
}
 
/* Mobile: volle Breite */
@media (max-width: 767px) {
  #global_content {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 5px !important;
    padding-right: 5px !important;
  }
 
  .container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 5px !important;
    padding-right: 5px !important;
  }
}

/* ===== Mini-Menü Modernisierung (Glocke/Nachrichten) ===== */
/* =========================================================
   core.menu-mini — Modernes CSS-Facelift
   Nur Optik. Keine IDs/Klassen/JS-Logik verändert.
   Einfach nach dem bestehenden Theme-CSS einbinden
   (z.B. eigene .css-Datei einbinden oder ans Ende
   der Haupt-styles.css anhängen).
   ========================================================= */

/* ---------- Grundlayout: Icon-Reihe ---------- */
#core_menu_mini_menu > ul{
  display:flex;
  align-items:center;
  gap:6px;
  list-style:none;
  margin:0;
  padding:0;
}
#core_menu_mini_menu > ul > li{
  position:relative;
  list-style:none;
}

/* ---------- Icon-Buttons (Glocke, Umschlag, Globus, Accessibility) ---------- */
#core_menu_mini_menu > ul > li > a{
  display:flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  border-radius:50%;
  background:var(--theme-list-background-color-alt,#f3f4f6);
  color:var(--theme-font-color,#333);
  text-decoration:none;
  position:relative;
  transition:background .18s ease, color .18s ease, transform .15s ease;
}
#core_menu_mini_menu > ul > li > a:hover{
  background:var(--theme-color,#4CAF50);
  color:#fff!important;
  transform:translateY(-1px);
}
#core_menu_mini_menu > ul > li > a:active{
  transform:scale(.93);
}
#core_menu_mini_menu .minimenu_icon{
  font-size:17px;
  line-height:1;
}
/* Text-Label bleibt für Screenreader erhalten, wird aber visuell versteckt
   (kein display:none, damit Barrierefreiheit + evtl. JS-Zugriffe funktionieren) */
#core_menu_mini_menu ._linktxt{
  position:absolute!important;
  width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
/* Ausnahme: Profil-Link zeigt eigenes Avatarbild, nicht nur Icon */
#minimenu_settings{
  padding:0;
  overflow:hidden;
}
#minimenu_settings img,
#minimenu_settings .bg_thumb_icon{
  width:100%!important;
  height:100%!important;
  border-radius:50%!important;
  object-fit:cover;
}
#minimenu_settings .icon_down{
  display:none; /* dezenter, moderner ohne Pfeil-Icon auf dem Avatar */
}

/* ---------- Badges (Zähler für Mitteilungen/Nachrichten) ----------
   WICHTIG: nur innerhalb des Header-Mini-Menüs anwenden (#core_menu_mini_menu),
   da dieselbe Klasse an anderer Stelle (z.B. Nachrichten-Seite) wiederverwendet
   wird und dort ein eigenes, unabhängiges Aussehen braucht.

   WICHTIG 2: Der Server rendert das Glocke-Badge (.minimenu_update_count_bubble)
   IMMER, auch bei 0 ungelesenen Mitteilungen. Ob wirklich etwas Neues da ist,
   steuert die Seite per JS über die zusätzliche Klasse
   "minimenu_update_count_bubble_active" - daher hier standardmäßig verstecken
   und nur mit dieser Klasse anzeigen. */
#core_menu_mini_menu .minimenu_update_count_bubble{
  display:none!important;
}
#core_menu_mini_menu .minimenu_update_count_bubble.minimenu_update_count_bubble_active,
#core_menu_mini_menu .minimenu_message_count_bubble{
  position:absolute!important;
  top:1px!important;
  right:1px!important;
  left:auto!important;
  bottom:auto!important;
  width:auto!important;
  min-width:16px!important;
  height:16px!important;
  padding:0 4px!important;
  border-radius:9px!important;
  background:#ff3b30;
  color:#fff!important;
  font-size:10px!important;
  font-weight:800;
  line-height:16px!important;
  text-align:center;
  box-shadow:0 0 0 2px var(--theme-list-background-color,#fff);
  pointer-events:none;
  display:inline-block!important;
}

/* Auf dem Handy gewinnt sonst eine spezifischere Regel aus responsive.css
   (u.a. mit .show_icons kombiniert) gegen die Regel oben - hier nochmal
   mit fester Breite/Höhe und höherer Spezifität erzwingen. */
@media (max-width: 991px) {
  #core_menu_mini_menu ul li .minimenu_update_count_bubble{
    display:none!important;
  }
  #core_menu_mini_menu > ul > li#core_menu_mini_menu_update{
    position:relative!important;
    display:inline-flex!important;
    flex:0 0 auto!important;
    width:auto!important;
    max-width:44px!important;
  }
  #core_menu_mini_menu ul li .minimenu_update_count_bubble.minimenu_update_count_bubble_active,
  #core_menu_mini_menu ul li .minimenu_message_count_bubble,
  #core_menu_mini_menu ul li .minimenu_update_count_bubble.minimenu_update_count_bubble_active.show_icons,
  #core_menu_mini_menu ul li .minimenu_message_count_bubble.show_icons{
    position:absolute!important;
    top:1px!important;
    right:1px!important;
    left:auto!important;
    bottom:auto!important;
    width:16px!important;
    max-width:16px!important;
    min-width:16px!important;
    height:16px!important;
    max-height:16px!important;
    padding:0!important;
    margin:0!important;
    border-radius:50%!important;
    background:#ff3b30!important;
    color:#fff!important;
    font-size:9px!important;
    line-height:16px!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    text-align:center!important;
    box-shadow:0 0 0 2px var(--theme-list-background-color,#fff)!important;
    z-index:10!important;
  }
}

/* ---------- Pulldown-Panels: Benachrichtigungen & Nachrichten ---------- */
/* WICHTIG: #core_mini_updates_pulldown wird per JS zum Wrapper der
   SICHTBAREN Glocke umfunktioniert (Icon + Popup landen im selben
   Element). Es darf deshalb NICHT selbst absolut positioniert werden,
   sonst verschwindet die klickbare Glocke aus der Menüzeile.
   Nur das eigentliche Popup-Panel (.pulldown_contents_wrapper) darin
   wird abgesetzt. */
#core_mini_updates_pulldown{
  position:relative; /* Anker für das Popup, bleibt selbst in der Zeile */
  display:inline-flex;
  align-items:center;
}
/* Der <li>-Container um die Glocke darf nicht breiter sein als das Icon
   selbst, sonst rutscht das Badge (top:1px;right:1px) an die falsche,
   zu weit rechts liegende Kante dieses Containers statt an die Glocke. */
#core_menu_mini_menu > ul > li#core_menu_mini_menu_update{
  display:inline-flex!important;
  flex:0 0 auto!important;
  width:auto!important;
  max-width:44px!important;
}
#core_mini_updates_pulldown > .pulldown_contents_wrapper{
  position:absolute!important;
  top:100%!important;
  left:50%!important;
  right:auto!important;
  bottom:auto!important;
  transform:translateX(-50%)!important;
  z-index:9999;
}

/* #pulldown_message ist bei "Nachrichten" NUR das Popup selbst
   (Geschwister-Element der klickbaren Glocke/Umschlag-Icons),
   deshalb hier unverändert absolut positionierbar. */
#pulldown_message{
  position:absolute!important;
  top:100%!important;
  left:50%!important;
  right:auto!important;
  bottom:auto!important;
  transform:translateX(-50%)!important;
  z-index:9999;
}

/* ---------- Warenkorb-Popup ----------
   Zurückgenommen: Eine erzwungene Positionierung von .sesbasic_header_pulldown
   hat dazu geführt, dass das Popup dauerhaft (auch nach Neuladen) sichtbar
   blieb - dieses Element wird vom Plugin offenbar nicht per display:none
   versteckt, sondern durch eine andere Positionierung "unsichtbar"
   gehalten. Der Warenkorb bleibt daher bewusst im Original-Zustand,
   ohne eigene CSS-Positionierung. */
.pulldown_contents_wrapper{
  width:360px;
  max-width:92vw;
  height:480px;
  max-height:80vh;
  flex-direction:column;
  background:var(--theme-list-background-color,#fff);
  border-radius:18px;
  box-shadow:0 14px 40px rgba(0,0,0,.18);
  overflow:hidden;
  border:1px solid var(--theme-border-color,#eee);
}
/* WICHTIG: Kein "display" hier gesetzt! Das würde die eigentliche
   Versteck-Regel der Seite überschreiben (dieselbe Klasse wird dort
   vermutlich auf display:none gesetzt, bis das Popup aktiv/geöffnet
   ist) und die Popups dauerhaft sichtbar machen, statt nur beim
   Klick. Das flex-Layout greift automatisch, sobald die Seite das
   Popup selbst auf display:flex/block schaltet. */
.core_pulldown_header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 18px;
  font-weight:800;
  font-size:15px;
  color:var(--theme-font-color,#222);
  border-bottom:1px solid var(--theme-border-color,#eee);
  flex-shrink:0;
}
.core_pulldown_header a{
  color:var(--theme-color,#4CAF50);
  width:28px;height:28px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--theme-list-background-color-alt,#f5f5f5);
  text-decoration:none;
}
.pulldown_contents{
  flex:1;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
.pulldown_options{
  display:flex;
  align-items:center;
  flex-shrink:0;
  justify-content:space-between;
  padding:10px 16px;
  border-top:1px solid var(--theme-border-color,#eee);
  background:var(--theme-list-background-color-alt,#fafafa);
}
.pulldown_options a{
  color:var(--theme-color,#4CAF50);
  font-weight:700;
  font-size:13px;
  text-decoration:none;
}

/* Ladeanimation etwas aufgeräumter */
.pulldown_content_loading_item{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 18px;
}
.pulldown_content_loading_item .circle{
  width:38px;height:38px;border-radius:50%;
  background:var(--theme-list-background-color-alt,#eee);
  flex-shrink:0;
}
.pulldown_content_loading_item .line{
  height:9px;border-radius:5px;
  background:var(--theme-list-background-color-alt,#eee);
  margin-bottom:6px;
}
.pulldown_content_loading_item .line1{width:70%;}
.pulldown_content_loading_item .line2{width:45%;}
.loading-animation{
  animation:pulse-skeleton 1.1s ease-in-out infinite;
}
@keyframes pulse-skeleton{
  0%,100%{opacity:.55;}
  50%{opacity:1;}
}

/* ---------- Profil-/Einstellungs-Dropdown ---------- */
.core_settings_dropdown{
  position:absolute;
  top:calc(100% + 10px);
  right:0;
  width:270px;
  background:var(--theme-list-background-color,#fff);
  border-radius:18px;
  box-shadow:0 14px 40px rgba(0,0,0,.18);
  border:1px solid var(--theme-border-color,#eee);
  padding:8px;
  z-index:9999;
}
.core_settings_dropdown ul{
  list-style:none;margin:0;padding:0;
}
.core_settings_dropdown li a,
.core_settings_dropdown li label{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 12px;
  border-radius:12px;
  color:var(--theme-font-color,#333);
  text-decoration:none;
  font-weight:600;
  font-size:14px;
  cursor:pointer;
  transition:background .15s;
}
.core_settings_dropdown li a:hover,
.core_settings_dropdown li label:hover{
  background:var(--theme-list-background-color-alt,#f5f5f5);
}
.core_settings_dropdown .menuicon{
  width:34px;height:34px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  background:var(--theme-list-background-color-alt,#f0f0f0);
  flex-shrink:0;font-size:15px;overflow:hidden;
}
.core_settings_dropdown .menuicon img{
  width:100%;height:100%;border-radius:50%;object-fit:cover;
}
.core_settings_dropdown li.sep{padding:6px 10px;}
.core_settings_dropdown li.sep span{
  display:block;height:1px;background:var(--theme-border-color,#eee);
}
.core_settings_dropdown li a > .icon_down,
.core_settings_dropdown #switch_account_i{
  margin-left:auto;font-size:12px;color:var(--theme-font-color-light,#999);
}

/* ---------- Konto wechseln ---------- */
.core_switch_account_pulldown{
  position:absolute;
  top:0;
  left:calc(100% + 8px);
  width:290px;
  background:var(--theme-list-background-color,#fff);
  border-radius:18px;
  box-shadow:0 14px 40px rgba(0,0,0,.18);
  border:1px solid var(--theme-border-color,#eee);
  padding:14px;
  z-index:10000;
}
.core_switch_account_pulldown_header ._heading{
  font-weight:800;font-size:14px;margin:0 0 4px;
}
.core_switch_account_pulldown_header .font_small{
  font-size:12px;color:var(--theme-font-color-light,#888);margin:0 0 10px;
}
.core_switch_account_list_item{
  padding:8px;border-radius:12px;transition:background .15s;
}
.core_switch_account_list_item:hover{
  background:var(--theme-list-background-color-alt,#f5f5f5);
}
.members_tab_item ._img{
  width:38px;height:38px;border-radius:50%;overflow:hidden;margin-right:10px;flex-shrink:0;
}
.members_tab_item ._img img{width:100%;height:100%;object-fit:cover;}
.core_switch_account_list_item ._name{font-weight:700;font-size:13.5px;}
.core_switch_account_list_item ._notification{font-size:11.5px;}
.core_switch_account_list .sep span{
  display:block;height:1px;background:var(--theme-border-color,#eee);margin:8px 0;
}
.core_switch_account_list_item.login_other .members_tab_item ._img{
  background:var(--theme-list-background-color-alt,#f0f0f0);
  display:flex;align-items:center;justify-content:center;color:var(--theme-color,#4CAF50);
}

/* ---------- Dark-Mode-Schalter (moderner iOS-Style) ---------- */
#thememodetoggle label{
  display:flex;align-items:center;gap:10px;cursor:pointer;
}
#thememodetoggle .menuicon{display:none;} /* Eclipse-Icon raus, Switch übernimmt */
#thememodetoggle span:not(._linktxt){flex:1;font-weight:600;font-size:14px;}
#theme_mode_toggle{
  appearance:none;-webkit-appearance:none;
  width:42px;height:24px;border-radius:12px;
  background:var(--theme-border-color,#d1d5db);
  position:relative;cursor:pointer;outline:none;flex-shrink:0;
  transition:background .2s;
}
#theme_mode_toggle:checked{background:var(--theme-color,#4CAF50);}
#theme_mode_toggle::before{
  content:'';position:absolute;top:2px;left:2px;
  width:20px;height:20px;border-radius:50%;background:#fff;
  transition:transform .2s;box-shadow:0 1px 3px rgba(0,0,0,.3);
}
#theme_mode_toggle:checked::before{transform:translateX(18px);}
.contrastmode_toggle{display:none;} /* Sonne/Mond-Icons ausblenden, Switch reicht */

/* ---------- Schriftgrößen-Auswahl ---------- */
#themefontmode > div{display:flex;align-items:center;gap:10px;}
#themefontmode .menuicon{
  width:34px;height:34px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  background:var(--theme-list-background-color-alt,#f0f0f0);flex-shrink:0;font-size:15px;
}
#themefontmode > div > span{font-weight:600;font-size:14px;flex-shrink:0;}
.resizer{
  display:flex;gap:6px;list-style:none;margin:0 0 0 auto;padding:0;
}
.resizer li a{
  display:flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:9px;
  background:var(--theme-list-background-color-alt,#f0f0f0);
  color:var(--theme-font-color,#333);
  text-decoration:none;font-weight:800;font-size:12px;
  transition:background .15s,color .15s;
}
.resizer li.active a{background:var(--theme-color,#4CAF50);color:#fff!important;}

/* ---------- Sprache/Standort/Währung-Link im Menü ---------- */
.core_mini_language a{
  width:auto!important;
  padding:0 14px 0 0;
  border-radius:20px!important;
  gap:6px;
}
.core_mini_language ._linktxt{
  position:static!important;width:auto!important;height:auto!important;
  clip:auto!important;overflow:visible!important;margin:0!important;
  font-size:12px;font-weight:700;
}

/* ---------- Gast: Anmelden / Registrieren ---------- */
.minimenu_guest #core_mini_auth a,
.minimenu_guest #core_mini_signup a{
  width:auto!important;height:auto!important;border-radius:10px!important;
  padding:9px 18px;font-weight:700;font-size:14px;
}
#core_mini_auth a{
  color:var(--theme-color,#4CAF50)!important;
  border:2px solid var(--theme-color,#4CAF50);
  background:transparent;
}
#core_mini_signup a{
  background:var(--theme-color,#4CAF50);
  color:#fff!important;
  border:2px solid var(--theme-color,#4CAF50);
}
.minimenu_guest #core_mini_auth ._linktxt,
.minimenu_guest #core_mini_signup ._linktxt{
  position:static!important;width:auto!important;height:auto!important;
  clip:auto!important;overflow:visible!important;margin:0!important;
}

/* ---------- Sprachen-/Standort-/Währungs-Modal (Bootstrap) ---------- */
.user_setting_modal .modal-content{
  border-radius:20px;border:none;box-shadow:0 20px 60px rgba(0,0,0,.25);
}
.user_setting_modal .modal-header{
  border-bottom:1px solid var(--theme-border-color,#eee);
  padding:18px 22px;
}
.user_setting_modal .modal-title{font-weight:800;font-size:17px;}
.user_setting_modal .modal-body{padding:20px 22px;}
.user_setting_modal .form-label{font-weight:700;font-size:13px;margin-bottom:6px;}
.user_setting_modal .form-control{
  border-radius:12px;padding:10px 14px;
  border:1.5px solid var(--theme-border-color,#e5e7eb);
}
.user_setting_modal .dropdown-toggle{
  display:flex;align-items:center;gap:8px;width:100%;
  padding:10px 14px;border-radius:12px;
  border:1.5px solid var(--theme-border-color,#e5e7eb);
  background:var(--theme-list-background-color,#fff);
  color:var(--theme-font-color,#333);text-decoration:none;
}
.user_setting_modal .dropdown-toggle::after{margin-left:auto;}
.user_setting_modal .dropdown-menu{
  border-radius:14px;border:none;box-shadow:0 12px 32px rgba(0,0,0,.16);padding:8px;
}
.user_setting_modal .dropdown-item{
  border-radius:10px;padding:8px 10px;display:flex;align-items:center;gap:8px;
}
.user_setting_modal .dropdown-item.selected,
.user_setting_modal .dropdown-item:hover{
  background:var(--theme-list-background-color-alt,#f5f5f5);
}
.user_setting_modal .modal-footer{
  border-top:1px solid var(--theme-border-color,#eee);padding:16px 22px;
}
.user_setting_modal .btn-primary{
  background:var(--theme-color,#4CAF50);
  border-color:var(--theme-color,#4CAF50);
  border-radius:10px;font-weight:700;padding:8px 20px;
}
.user_setting_modal .btn-link{color:var(--theme-font-color-light,#888);font-weight:600;}
.language_modal_remove_location label{font-size:13px;}

/* ---------- Sicherheitsbremse gegen seitliches Wackeln/Scrollen ----------
   Verhindert, dass irgendein Element (Icon-Reihe, Popup, Badge) die Seite
   breiter als den Bildschirm macht und dadurch seitliches Scrollen/Wackeln
   auf dem Handy verursacht. Klemmt nur echten Überstand ab, verändert
   sonst nichts am Layout. */
@media (max-width: 767px) {
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }
  #core_menu_mini_menu,
  #core_menu_mini_menu > ul,
  .header_menu_mini {
    max-width: 100% !important;
    overflow: visible;
  }
}

/* ---------- Warenkorb: nur Icon, kein Text ----------
   Das Cart-Icon kommt aus einem Drittanbieter-Plugin und nutzt
   keine _linktxt-Klasse wie die anderen Menüpunkte, daher eigene Regel. */
#sesproduct_add_cart_dropdown a > span:not(.cart_value){
  position:absolute!important;
  width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;
  overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important;
}

/* ---------- Popups (Mitteilungen, Nachrichten) auf dem Handy ----------
   Breite mobil etwas breiter (92vw), Höhe kommt jetzt einheitlich aus
   der zentralen .pulldown_contents_wrapper-Regel oben (height:480px,
   max-height:80vh) - keine Sonderregel mehr nötig, dadurch garantiert
   auf allen Bildschirmgrößen identisch.

   Mitteilungen zusätzlich mit position:fixed + left:50% wirklich am
   Bildschirm zentriert (nicht nur am Icon), da die Glocke oft nicht in
   der Bildschirmmitte sitzt und die Zentrierung sonst schief wirkt. */
@media (max-width: 767px) {
  #core_mini_updates_pulldown > .pulldown_contents_wrapper,
  #pulldown_message {
    width: 92vw !important;
    max-width: 92vw !important;
  }
  #core_mini_updates_pulldown > .pulldown_contents_wrapper {
    position: fixed !important;
    top: 64px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
  }
}

/* ---------- Warenkorb-Tooltip auf dem Handy zentrieren ----------
   Nur Position (kein display!), damit der Öffnen/Schließen-Mechanismus
   der Seite unangetastet bleibt. */
@media (max-width: 767px) {
  .sesbasic_header_pulldown {
    position: fixed !important;
    top: 64px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
  }
}

/* Hinweis: Der Warenkorb zeigt beim Hinzufügen nur eine kleine Tooltip-Meldung
   (kein Dropdown-Panel wie Mitteilungen/Nachrichten) - bleibt bewusst im
   Original-Zustand, keine eigene Positionierung nötig. */

/* =========================================================
   Sichtbarkeit auf schmalen Bildschirmen / Hochformat:
   Falls eine andere Regel eurer Seite die ganze Icon-Leiste
   (.header_menu_mini) unterhalb einer bestimmten Breite
   ausblendet, hier Glocke + Umschlag trotzdem erzwingen.
   (Zusammengeführt aus mobile-notify-fix.css, damit alles
   in einer einzigen Datei steckt.)
   ========================================================= */
@media (max-width: 991px) {
  .header_menu_mini #core_menu_mini_menu > ul > li {
    display: none !important;
  }
  .header_menu_mini #core_menu_mini_menu > ul > li#core_menu_mini_menu_update,
  .header_menu_mini #core_menu_mini_menu > ul > li.core_mini_messages,
  .header_menu_mini #core_menu_mini_menu > ul > li#sesproduct_add_cart_dropdown {
    display: flex !important;
    align-items: center;
  }
}
/* ==========================================================================
   MOBIL: Produkte 2-spaltig, Fotos randlos bis an den Bildschirmrand
   Gilt nur bis 767px Breite (Handy). Desktop/Tablet bleiben unveraendert.
   Betrifft:
     - Produkt-Grid (_gridView.tpl, .sesproduct_grid)
     - Karusselle im Banner-Category-Widget (.mh-wrap):
       "Haeufig gesucht", "Empfohlene Produkte", "EU Picks"
   Einstellbar:
     --mob-gap   Abstand zwischen den 2 Spalten (0px = Fotos beruehren sich)
     --mob-ratio Bildformat (1/1 quadratisch, 4/5 hochkant, 3/4 Mode-Look)
   ========================================================================== */
@media (max-width: 767px) {

  :root {
    --mob-gap: 2px;
    --mob-ratio: 4 / 5;
    --mob-pad: 10px;          /* Innenabstand nur fuer Text, nicht fuer Fotos */
  }

  /* ---------- Widget-Rahmen um Produkte entfernen ---------- */
  .layout_middle > .generic_layout_container:has(.sesproduct_grid),
  .layout_middle > .generic_layout_container:has(.mh-wrap),
  .layout_core_container_tabs > .generic_layout_container:has(.sesproduct_grid) {
    padding-left: 0 !important;
    padding-right: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
  }
  /* Widget-Ueberschrift behaelt etwas Abstand zum Rand */
  .generic_layout_container:has(.sesproduct_grid) > h3,
  .generic_layout_container:has(.mh-wrap) > h3 {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: var(--mob-pad) !important;
    padding-right: var(--mob-pad) !important;
  }

  /* ======================================================================
     1) PRODUKT-GRID  (_gridView.tpl)
     ====================================================================== */
  ul:has(> li > .sesproduct_grid),
  .row:has(> li > .sesproduct_grid) {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: calc(var(--mob-gap) + 14px) var(--mob-gap) !important;
    /* randlos: volle Bildschirmbreite, egal wie viel Abstand der Container hat */
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding: 0 !important;
  }
  li:has(> .sesproduct_grid) {
    width: auto !important;
    max-width: none !important;
    flex: none !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    min-width: 0;
  }
  .sesproduct_grid {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    height: 100%;
  }
  .sesproduct_grid article,
  .sesproduct_grid .sesproduct_thumb {
    display: block !important;             /* Theme darf Foto + Text nicht nebeneinander stellen */
    width: 100% !important;
    max-width: none !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  /* Foto: festes Format, randlos, ohne Rundung */
  .sesproduct_grid .sesproduct_grid_thumb {
    display: block !important;
    position: relative !important;
    float: none !important;
    flex: none !important;
    height: auto !important;               /* ueberschreibt die feste Widget-Hoehe */
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: var(--mob-ratio);
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    border-radius: 0 !important;
    overflow: hidden;
    background: #f3f4f6;
  }
  /* Foto-Link fuellt den ganzen Bildbereich aus */
  .sesproduct_grid .sesproduct_thumb_img {
    position: absolute !important;
    top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    transform: none !important;
    z-index: 1;
  }
  .sesproduct_grid .sesproduct_thumb_img span,
  .sesproduct_grid .sesproduct_thumb_img img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    transform: none !important;
    object-fit: cover;
  }
  /* Sticker und Labels ueber dem Foto halten */
  .sesproduct_grid .ses-disc-badge,
  .sesproduct_grid .sesproduct_sale,
  .sesproduct_grid .sesproduct_labels { z-index: 3 !important; }
  .sesproduct_grid .sesproduct_thumb_img span {
    background-size: cover !important;     /* Foto fuellt die Flaeche komplett */
    background-position: center !important;
  }
  /* Hover-Overlay (Teilen/Like) auf dem Handy aus - stoert beim Tippen */
  .sesproduct_grid .sesproduct_img_thumb_over { display: none !important; }

  /* Text unter dem Foto: mit kleinem Innenabstand */
  .sesproduct_grid .sesproduct_grid_info {
    padding: 8px var(--mob-pad) 4px !important;
    margin: 0 !important;
    background: transparent !important;
  }
  .sesproduct_grid .sesproduct_grid_info_title a {
    font-size: 12.5px !important;
    line-height: 1.35 !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .sesproduct_grid .sesproduct_grid_middle .current_value {
    font-size: 17px !important;
  }
  .sesproduct_grid .sesproduct_grid_middle .old_value {
    font-size: 11px !important;
  }
  .sesproduct_grid .ses-disc-save {
    font-size: 10.5px !important;
    padding: 4px 6px !important;
  }
  .sesproduct_grid a.ses-opt-btn {
    font-size: 12px !important;
    padding: 9px 8px !important;
    margin: 8px 0 2px !important;
  }
  .sesproduct_grid .ses-opt-btn .fa-sliders,
  .sesproduct_grid .ses-opt-dots { display: none !important; }
  /* Rabatt-Sticker etwas kleiner, damit er das Foto nicht verdeckt */
  .sesproduct_grid .ses-disc-badge {
    width: 46px !important; height: 46px !important;
    top: 6px !important; left: 6px !important;
  }
  .sesproduct_grid .ses-disc-badge-pct { font-size: 13px !important; }

  /* ======================================================================
     2) KARUSSELLE  (Banner-Category-Widget, .mh-wrap)
     ====================================================================== */
  .mh-wrap {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* Ueberschriften + Kategorie-Pillen behalten Abstand zum Rand */
  .mh-wrap .mh-block-title,
  .mh-wrap .mh-divider,
  .mh-wrap .mh-feature__title {
    padding-left: var(--mob-pad);
    padding-right: var(--mob-pad);
  }
  .mh-wrap .mh-sidebar { margin: 0 var(--mob-pad); }

  /* Produkt-Karusselle: genau 2 Produkte sichtbar, natives Wischen.
     Jede Karte ist exakt 50% der sichtbaren Breite - unabhaengig von der
     Rechnung des Karussells, darum nie mehr "1,5 Produkte". */
  .mh-hero__quickpicks .mh-cc__viewport,
  .mh-feature .mh-cc__viewport {
    border-radius: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .mh-hero__quickpicks .mh-cc__viewport::-webkit-scrollbar,
  .mh-feature .mh-cc__viewport::-webkit-scrollbar { display: none; }
  .mh-hero__quickpicks .mh-cc__slides,
  .mh-feature .mh-cc__slides {
    width: 100% !important;
    transform: none !important;           /* alte Schiebe-Rechnung aus */
    transition: none !important;
    cursor: auto !important;
    touch-action: auto !important;
  }
  .mh-hero__quickpicks .mh-cc__slide,
  .mh-feature .mh-cc__slide {
    flex: 0 0 50% !important;
    width: 50% !important;
    max-width: 50% !important;
    padding-right: var(--mob-gap) !important;
    scroll-snap-align: start;
  }
  .mh-hero__quickpicks .mh-cc__slide:last-child,
  .mh-feature .mh-cc__slide:last-child { padding-right: 0 !important; }
  /* Pfeile/Punkte gehoeren zur alten Schiebe-Rechnung -> auf dem Handy aus */
  .mh-hero__quickpicks .mh-cc__nav,
  .mh-hero__quickpicks .mh-cc__dots,
  .mh-feature .mh-cc__nav,
  .mh-feature .mh-cc__dots { display: none !important; }

  /* Bereiche "Empfohlene Produkte" / "EU Picks": randlos */
  .mh-wrap .mh-feature--wine,
  .mh-wrap .mh-feature--bronze {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 8px 0 4px !important;
    background: none !important;          /* kein blauer/rosa Hintergrund */
  }
  .mh-wrap .mh-feature--wine .mh-feature__title,
  .mh-wrap .mh-feature--bronze .mh-feature__title {
    color: #0f1115 !important;
    text-align: left !important;
  }

  /* Karte "Empfohlene Produkte" / "EU Picks" */
  .mh-wrap .mh-fp-slide {
    padding: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: #fff;
  }
  .mh-wrap .mh-fp-slide__imgwrap {
    border-radius: 0 !important;
  }
  .mh-wrap .mh-fp-slide__imgwrap img { transform: none !important; }
  .mh-wrap .mh-fp-slide__body { padding: 8px var(--mob-pad) 6px !important; }
  .mh-wrap .mh-fp-slide a.ses-opt-btn {
    width: calc(100% - 2 * var(--mob-pad)) !important;
    margin: 0 var(--mob-pad) 10px !important;
  }

  /* Karte "Haeufig gesucht" */
  .mh-wrap .mh-qp-slide {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #fff;
  }
  .mh-wrap .mh-qp-slide__link { justify-content: flex-start !important; }
  .mh-wrap .mh-qp-slide__eyebrow { order: 2; padding: 8px var(--mob-pad) 0; margin: 0 !important; }
  .mh-wrap .mh-qp-slide__label   { order: 3; padding: 2px var(--mob-pad) 8px; margin: 0 !important; text-align: left; align-self: stretch; }
  .mh-wrap .mh-qp-slide__imgwrap {
    order: 1;
    flex: 1 1 auto !important;
    max-height: none !important;
    min-height: 0;
    background: #f3f4f6;
  }
  .mh-wrap .mh-qp-slide__imgwrap img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    object-fit: cover !important;          /* Foto fuellt die Karte bis zum Rand */
  }
  .mh-wrap .mh-qp-slide a.ses-opt-btn {
    width: calc(100% - 2 * var(--mob-pad)) !important;
    margin: 0 var(--mob-pad) 10px !important;
  }
}








/* ===== MEINE SCHRIFTGROESSEN - Zahlen einfach aendern ===== */
/* Grundschrift ueberall (normal 15px) */
html body{ font-size:16px !important; }

/* Beitraege im Newsfeed (normal 15.5px) */
html body [class*="feed_item_bodytext"]{ font-size:16.5px !important; }

/* Kommentare (normal 14.5px) */
html body .comments_body{ font-size:15.5px !important; }

/* Ueberschriften der Bereiche (normal 17px) */
html body .generic_layout_container > h3{ font-size:19px !important; }

/* Produkt-Titel und Preis in der Liste (normal 15px / 19px) */
html body li.ses-grid-li .sesproduct_grid_info_title a{ font-size:16px !important; }
html body li.ses-grid-li .sesproduct_price .current_value{ font-size:20px !important; }

/* Knoepfe (normal 14.5px) */
html body button, html body .button{ font-size:15.5px !important; }

/* Handy etwas kleiner */
@media (max-width:640px){
  html body li.ses-grid-li .sesproduct_grid_info_title a{ font-size:14.5px !important; }
  html body li.ses-grid-li .sesproduct_price .current_value{ font-size:18px !important; }
}