/*
 Theme Name: Divi Child
 Theme URI: https://www.elegantthemes.com/gallery/divi/
 Description: Divi Child Theme
 Author: Dirk
 Author URI: https://www.web-lorenz.de
 Template: Divi
 Version: 1.0.0
*/

/* =Theme customization starts here
------------------------------------------------------- */
/* Menu rechtsbuendig ausrichten */
/*.et_pb_menu__wrap {
	justify-content: flex-end !important;
}
*/


/***** ALLGEMEINES *********/

/* Schrift deklarieren */
/* montserrat-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: url('/wp-content/themes/divi-child/fonts/montserrat-v30-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* montserrat-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  src: url('/wp-content/themes/divi-child/fonts/montserrat-v30-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* Schriftart zuweisen */
h1,h2,h3,h4,h5,h6 {
    font-family:"Montserrat", sans-serif !important;
}

body {
    font-family:"Montserrat", sans-serif !important;
}


/* Vertikales Zentrieren von Elementen */
.vertikal-zentrieren {
display: flex;
flex-direction: column;
justify-content: center;
}


/* Buttons in einer Reihe */
.inline-buttons .et_pb_button_module_wrapper {
display: inline-block;
margin: 0 5px;
}

/* Ausrichtung der Button */
.inline-buttons {
text-align: center !important;
}

/* Buttons nebeneinander  - Regel sehr verschachtelt wird wahrscheinlich nie greifen*/
.et_pb_column .et_pb_column_4_4 .et_pb_column_2 .inline-textbutton  .et_pb_css_mix_blend_mode_passthrough .et-last-child {
    display: flex;
}

.inline-textbutton{
	display:flex;
}

/* Scroll on top Button */
.et_pb_scroll_top.et-pb-icon{
  bottom: 40px;
}

/*****  HAndball-Widget - extern eingebunden von handball.net  *********/
/* Border orange */
.hb-embed__title-container {
    border-bottom: 2px solid #fe884c!important;
}

/* Buttons anpassen */
.hb-embed__btn.hb-embed__btn-primary {
    background-color: #fe884c!important;
}

.hb-embed__btn.hb-embed__btn-primary:hover {
    background-color: #ff5400!important;
}

/***** HEADER *********/
/*Social Menü nebeneinander */
.social-hsg {
	display:flex;
}

/* Menütext nicht umbrechen, dafür wird das Logo ectl zu klein. Hier mss evtl noch bei ca 900.100px die Menüschrift verkleinert werden */
.et_pb_menu--style-left_aligned.et_pb_text_align_right .et_pb_menu__menu>nav>ul, .et_pb_menu--style-left_aligned.et_pb_text_align_right .et_pb_menu__wrap {
    flex-wrap: nowrap;
}

/*** Sticky Logo habe ich erstmal deaktiviert ***/
/* Jetziges Logo deaktivieren 
.et_pb_sticky .et_pb_menu__logo img{
	display:none;
}
*/

/* Sticky Logo aktivieren */
/* .et_pb_sticky .et_pb_menu__logo{
  content: url("http://hsg.web-lorenz.de/wp-content/uploads/2025/07/logo.png") !important;
  height: 78px !important; 
	min-width: 94px !important;
}
*/
/***** MENU *********/




/***** Hamburger Symvol beim ausklappen gegen X tauschen und rotieren lassen ***/

/* #region max-width 980px */
@media only screen and (max-width: 980px) {
  .et_fixed_nav header#main-header {
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
  }
  /* #region Pimp my mobile Menu Icon */
  .mobile_menu_bar::before {
    display: block;
    transition: all 0.4s ease;
  }

  .mobile_nav.opened .mobile_menu_bar::before {
    content: "M";
    transform: rotate(90deg);
  }
}

/** Anpassungen mobiles Menue **/

/* Menuhoehe verringern */
.et_mobile_menu {   
    overflow-y:scroll!important;
    max-height:85vh!important;
    -overflow-scrolling:touch!important;
    -webkit-overflow-scrolling:touch!important;
}

/* Menu auf volle Breite setzen */
.et_mobile_menu {
    min-width: 106vw;
    margin-left: -10vw;
}

 /* Es folgt Code den ich nicht zuordnen konnte und der nix gemacht hat */
 /* #endregion */
  /* fullwidth mobile nav menu aka gooder menu */
  /*header#main-header > .container {
    position: static;
  }
  header#main-header > .container #mobile_menu {
    background-color: #fff;
    border-top: none;
    box-shadow: 0px 3px 3px #0000001a !important;
    padding: 30px 12% 15px;
    width: 100%;
  }
  header#main-header > .container #mobile_menu li {
    padding: 0 0 18px;
  }
  header#main-header > .container #mobile_menu li a {
    background: none;
    border: none;
    color: #000;
    font-size: 18px;
   	font-weight: 400; 
    padding: 0;
  }
  header#main-header > .container #mobile_menu li a:hover {
    background: transparent;
  }*/

/* #### Colors #### */ 
/* Nur Desktop und Tablet */  
.nav li li a { 
	/* Dropdown unterer Rand */ 
  border-bottom: 1px solid #e5e5e5; 
	/* Dropdown font weight */ 
  /*font-weight: 500 !important; */
	/* #### Dropdown font size #### */ 
  font-size: 14px !important; 
	font-weight: 300 !important;
}
  
.et-menu > .menu-item-has-children > .sub-menu:before {
	/* Dropdown Pfeil Farbe */
  border-bottom: 12px #3a5199 solid; 
}  
  
ul.et_mobile_menu li.menu-item-has-children .mobile-toggle-icon::after,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle-icon::after {
	/* Collapsing mobile icon color */
	/*color: #000000; */
	/* Collapsing mobile icon background color */
	/*background: #f1f1f1; */
}
/* #### End Colors #### */ 

/* ### Add a backslash  before the number in case of a missing icon ### */  
  

/* ### End missing icon ### */   
  
/* #### Simple header V35 #### */ 

@media screen and (min-width: 981px) {
.clara-header-v2-column {
    display: flex;
    align-items: center;
}

.clara-menu-v2 {
    flex: 2 1 auto;
}

.clara-header-v2-column .et_pb_social_media_follow li {
    margin-bottom: 0px !important;
}

	/* Padding zwischen Menüelementen */
.clara-menu-v2.et_pb_menu .et-menu>li {
    padding-left: 18px;
    padding-right: 18px;
}

.clara-menu-v2 ul.sub-menu .menu-item-has-children>a:first-child:after {
	 top: 10px !important;	
}}  

/* Wechselnde Pfeilsymbole eim ein- und ausklappen */  
  ul.et_mobile_menu li.menu-item-has-children .mobile-toggle-icon::after,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle-icon::after {
	content: '3';
}
  
ul.et_mobile_menu li.menu-item-has-children.mobile-toggle-open>.mobile-toggle-icon::after,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children.mobile-toggle-open>.mobile-toggle-icon::after {
	content: '2';
}
  
/* #### Dropdown Menu #### */  
  /* Rahmen ganz unten der aufgeklappten Menüs*/
.nav li li:last-child a {
  border-bottom: 0px solid #e5e5e5;
}  
  
/* Aufgeklapptes Menü etwas abrunden */
.nav li ul.sub-menu {
	padding: 0px !important;
  border-radius: 5px;
  box-shadow: 0 5px 17px 0px rgb(0 0 0 / 25%);
  -moz-box-shadow: 0 5px 17px 0px rgba(0,0,0,.25);
  -webkit-box-shadow: 0 5px 17px 0px rgb(0 0 0 / 25%);
}

/* Aufgeklapptes Menü Padding zum Rand */
.nav li li {
  padding: 0 0px !important;
  width: 100%;
}
  
/* Aufgeklapptes Menü Padding von den Links */
.et-menu li li a {
  padding: 10px 20px;
  width: 100% !important;
}

/* Code hat nichts bewirkt */
/*.et-menu > .menu-item-has-children > .sub-menu:before {
	 content: '';
  display: block;
  position: absolute;
  left: 200px;
  top: -200px;
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-right: 12px solid transparent;
  border-left: 12px solid transparent;
  z-index: 1; 
}
*/
/*.nav li ul {
    right: 0!important;
}
  */
/*.et_pb_menu--without-logo .et_pb_menu__menu>nav>ul>li>a {
    padding-bottom: 200px;
}  
*/


  
/* #### Collaping Mobile Menu #### */

/* Stylen des Icons */
ul.et_mobile_menu li.menu-item-has-children .mobile-toggle-icon::after,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle-icon::after {
	top: 10px;
	position: relative;
	font-family: "ETModules";
	border-radius: 50%;
	padding: 3px;
}



/* Korrektes setzen des Icons an der rechten Seite */
ul.et_mobile_menu li.menu-item-has-children .mobile-toggle-icon,
ul.et_mobile_menu li.page_item_has_children .mobile-toggle-icon,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle-icon,
.et-db #et-boc .et-l ul.et_mobile_menu li.page_item_has_children .mobile-toggle-icon {
	width: 44px;
	height: 100%;
	padding: 0px !important;
	max-height: 44px;
	border: none;
	position: absolute;
	right: 0px;
	top: 0px;
	z-index: 999;
	background-color: transparent;
}

/* Setzen des Icons an der Seite an die richtigen Zeilen, da wo es Sub-Menus gibt */
ul.et_mobile_menu>li.menu-item-has-children,
ul.et_mobile_menu>li.page_item_has_children,
ul.et_mobile_menu>li.menu-item-has-children .sub-menu li.menu-item-has-children,
.et-db #et-boc .et-l ul.et_mobile_menu>li.menu-item-has-children,
.et-db #et-boc .et-l ul.et_mobile_menu>li.page_item_has_children,
.et-db #et-boc .et-l ul.et_mobile_menu>li.menu-item-has-children .sub-menu li.menu-item-has-children {
	position: relative;
}

/* Hintergrundfarbe ausblenden bei den Hauptmenüpunkten welche Sub-Menus haben */
.et_mobile_menu .menu-item-has-children>a,
.et-db #et-boc .et-l .et_mobile_menu .menu-item-has-children>a {
	background-color: transparent;
}

/* Blendet das Sub-Menu aus */
ul.et_mobile_menu .menu-item-has-children .sub-menu,
#main-header ul.et_mobile_menu .menu-item-has-children .sub-menu,
.et-db #et-boc .et-l ul.et_mobile_menu .menu-item-has-children .sub-menu,
.et-db #main-header ul.et_mobile_menu .menu-item-has-children .sub-menu {
	display: none !important;
	visibility: hidden !important;
}

/* Zeigt bei Klick das Sub-Menu an */
ul.et_mobile_menu .menu-item-has-children .sub-menu.visible,
#main-header ul.et_mobile_menu .menu-item-has-children .sub-menu.visible,
.et-db #et-boc .et-l ul.et_mobile_menu .menu-item-has-children .sub-menu.visible,
.et-db #main-header ul.et_mobile_menu .menu-item-has-children .sub-menu.visible {
	display: block !important;
	visibility: visible !important;
}

ul.et_mobile_menu li.menu-item-has-children .mobile-toggle-icon,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle-icon {
	text-align: center;
	opacity: 1;
}

/* Hauptlinks im mobilen Menü */
.et_mobile_menu .menu-item-has-children>a {
  font-weight: 900 !important;
}

/* Untermenü Links */
.et_mobile_menu .menu-item-has-children .sub-menu a {
  font-weight: 500 !important; 
}

/* Menü mobile scrollbar machen */
.et_mobile_menu {
  max-height: 100vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}


/**************** STARTSEITE - SLIDER ****************/
@media only screen and (max-width: 390px) {
    body .et_pb_slider .et_pb_slide_0.et_pb_slide .et_pb_slide_description .et_pb_slide_title {
        font-size: 31px !important;
        line-height: 1.1em !important;
    }

    body .et_pb_slider.et_pb_module .et_pb_slide_0.et_pb_slide .et_pb_slide_description .et_pb_slide_content{
        font-size: 16px !important;
    }
}


/***** BLOG *********/

/* ===  Blog-Styling mit fixiertem Textfluss & Logo-Erkennung === */

/* Weißer Rahmen ums Bild */
.et_pb_blog_0 .et_pb_post .entry-featured-image-url,
.et_pb_blog_0 .et_pb_post .et_pb_slides,
.et_pb_blog_0 .et_pb_post .et_pb_video_overlay {
  border-width: 2px;
  border-color: #ffffff;
}

/* Grundbox */
.pa-blog-list .et_pb_post {
  box-shadow: 2px 2px 20px 2px rgba(160, 190, 212, 0.22);
  border-radius: 6px;
  overflow: hidden;
  background-color: #FDFDFD;
}

/* === DESKTOP & TABLET === */
@media (min-width: 767px) {

  /* --- Bildcontainer links --- */
  .pa-blog-list .entry-featured-image-url {
    width: 240px; /* feste Breite für alle */
    height: 166px;
    float: left;
    margin-right: 20px;
    margin-bottom: 0 !important;
  }

  /* --- Bilder gleich groß halten --- */
  .pa-blog-list img,
  .pa-blog-list a img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover; /* Spielbilder füllen die Box */
    border-radius: 4px;
    display: block;
  }

  /* --- Dummy-Logo-Ausnahme: Bild vollständig zeigen, auch fuer unpassende Formate --- 
	       Dummy-Logo sind die HSG Logos mit MJD, MJB usw drauf, falls es mal kein
				 Vorschaubild für Beitraege gibt */
  .pa-blog-list img[src*="logo"], /* alle Bilder mit „logo“ im Dateinamen */
  .pa-blog-list a img[src*="logo"],
  .pa-blog-list .logo-bild img {
    object-fit: contain !important; /* Logo vollständig anzeigen */
    background: #F8F0E3;            
    width: 100%;
    height: 100%;
    padding: 6px; /* sorgt für etwas Luft zum Rand */
  }

  /* --- Dummy-Logo und unpassende Formate mittig zentrieren und stylen --- */
  .pa-blog-list .logo-bild {
    display: flex;
    align-items: center; /* vertikal mittig */
    justify-content: center; /* horizontal mittig */
    background: #F8F0E3; /* optional fuer weißen Rahmen */
    width: 100%;
    height: 166px; /* gleiche Höhe wie die Spielbilder */
    overflow: hidden;
  }

  /* --- Text rechts daneben bleibt fixiert --- */
  .pa-blog-list .entry-title,
  .pa-blog-list .post-meta,
  .pa-blog-list .post-content {
    margin-left: 260px; /* Platz für Bild + Abstand */
  }

  /* --- Abstände optimieren --- */
  .pa-blog-list .entry-title {
    margin-bottom: 0.2em !important;
  }

  .pa-blog-list .post-meta {
    margin-top: 0 !important;
    margin-bottom: 0.4em !important;
    line-height: 1.2em;
  }

  .pa-blog-list .post-content {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* --- Hover-Effekt --- */
  .pa-blog-list .et_pb_post:hover {
    transform: translateX(10px) !important;
  }

  /* --- Box --- */
  .pa-blog-list .et_pb_post {
    box-shadow: 2px 2px 20px 2px rgba(160, 190, 212, 0.22);
    border-radius: 6px;
    padding: 20px;
    margin-bottom: 30px;
    line-height: 1.5em;
    max-height: 390px; /* statt 300px */
    overflow: hidden; /* verhindert, dass Text überläuft */
    transition: transform 0.3s ease;
  }
}

/* Link Ältere Einträge und Neuere Einträge anpassen */
.pa-blog-list .pagination {
  margin-top: -20px;
  text-decoration: underline!important;
}

/* === MOBILE === */
@media (max-width: 768px) {

  /* Weißer Rahmen ums Bild entfernen*/
  .et_pb_blog_0 .et_pb_post .entry-featured-image-url,
  .et_pb_blog_0 .et_pb_post .et_pb_slides,
  .et_pb_blog_0 .et_pb_post .et_pb_video_overlay {
    border-width: 0px;
    border-color: #ffffff;
  }

  .pa-blog-list .et_pb_post {
    box-shadow: 0px 12px 18px -6px rgba(0, 0, 0, 0.3);
    background-color: #fff;
  }

  .pa-blog-list .entry-title,
  .pa-blog-list .post-meta,
  .pa-blog-list .post-content {
    padding-left: 14px;
    padding-right: 14px;
  }

  .pa-blog-list .post-content,
  .pa-blog-list .post-meta {
    padding-bottom: 20px;
    margin-bottom: 1px;
  }

  .pa-blog-list .entry-featured-image-url {
    width: 100% !important;
    float: none;
    margin-bottom: 10px;
    text-align: center;
  }

  .pa-blog-list img,
  .pa-blog-list a img {
    width: 100% !important;
    height: auto !important;
    object-fit: cover;
    padding: 6px;
  }
}


/******** Kategorien *********/
/* Beitraege Kategorien Links anpassen */
.category-saison-links a {
  /*color: #f6884c;   */
	color: white;
  text-decoration: none;       
}

.category-saison-links a:hover {
  /*background-color: #ff5400;
  color: white;*/
}

/* Fuer den Button fuer die Beitraege. Er enthaelt dynamisch die aktuelle Kategorie */
.custom-category-button {
  display: inline-block;
  background-color: #fe884c;
  color: white;
  text-decoration: none;
  padding: 12px 24px;
  font-weight: bold;
  border-radius: 3px;
  transition: background-color 0.3s ease;
  text-align: center;
  font-size: 16px;
}

.custom-category-button:hover {
  background-color: #ff5400;
  color: white;
}

.custom-category-button a{
   color: white !important;
	 text-decoration: underline;
 }

.custom-category-button a:hover {
  color: white!important
}


/***** Gutenberg Optimierungen *********/
/*.video-klein video{
	width: 300px;
	height: auto;
	display: block;
	margin-left: auto;
	margin-right: auto;
}*/

/***** MANNSCHAFTEN *********/
/*.image-overlay {
      position: relative; *//* Wichtig für absolute Positionierung des Overlays */
 /*   }
.image-overlay::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);*/ /* Beispiel: Halbtransparenter schwarzer Overlay */
      /*z-index: 1;*/ /* Stellt sicher, dass das Overlay über dem Bild liegt */
/*}*/

/******************** TRAININGSZEITEN *********/
@media (min-width: 767px) {
.my-blurb {
  display: flex;
  align-items: stretch;
}

.my-blurb .et_pb_blurb {
  flex: 1;
}

.my-blurb .et_pb_main_blurb_image img {
  max-height: 100px;  /* Logo-Höhe anpassen */
  object-fit: contain;
  margin: 0 auto;     /* mittig ausrichten */
  display: block;
}

.my-blurb .et_pb_main_blurb_image {
  min-height: 120px; /* gleiche Höhe für alle Bild-Container */
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.blurb-glashuetten p:last-child {
  margin-top: 108px;
}

.blurb-steinbach p:last-child {
  margin-top: 108px;
}
}

/* Früherer Umbruch nur zwischen 767px und 1000px, da die Blurbs sonst sehr gestaucht werden und die Tabelle zu groß für den Bildschirm ist. Greift zwischen 767px und 1000px. */
@media (min-width: 767px) and (max-width: 1000px) {
  .my-blurb {
    display: block !important;
    text-align: center;
  }

  .my-blurb .et_pb_blurb {
    width: 80% !important;       /* schmaler machen */
    max-width: 600px;            /* optional */
    margin: 0 auto 20px auto;    /* zentrieren + Abstand unten */
  }
}

/****** Fuer Kontaktforumlar - Labels oberhalb einfuegen ******/
.et_pb_contact_field input::placeholder,
.et_pb_contact_field textarea::placeholder {
  opacity: 0; /* Placeholder ausblenden */
}

.et_pb_contact_field[data-id="name"]::before {
  content: "Name";
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
  font-size: 17px!important;
}

.et_pb_contact_field[data-id="email"]::before {
  content: "E-Mail*";
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
  font-size: 17px!important;
}

.et_pb_contact_field[data-id="message"]::before {
  content: "Anliegen*";
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
  font-size: 17px!important;
}

.et_pb_contact_field[data-id="sonstiges"] {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(1px, 1px, 1px, 1px); /* WCAG-konform */
  white-space: nowrap !important;
  opacity: 0 !important;
}

/******* LINKS ********/
.link-grid {
  display: grid;
  grid-template-columns: auto auto auto auto;
  gap: 10px;

  max-width: 1000px;   /* Begrenzung der Gesamtbreite */
  margin: 0 auto;      /* Zentriert den Grid-Block */
  justify-content: center; /* Zentriert die Spalten innerhalb */
}

.link-grid a {
  display: block;
  padding: 14px 18px;
  background: #f7f7f7;
  border-radius: 8px;
  color: #000;
  text-decoration: none;
  text-align: center;
  font-weight: 500;
  transition: transform 0.2s, background 0.2s, color 0.2s;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.link-grid a:hover {
  background: #ff9800;
  color: #fff;
  transform: translateY(-3px);
}

/************* Consent Popup ***************/
/* Popup */
#handball-popup {
    position: fixed;
    top:0; left:0; right:0; bottom:0;
    background: rgba(0,0,0,0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
}
.handball-popup-inner {
    background: #fff;
    padding: 30px;
    border-radius: 10px;
    text-align: center;
    max-width: 500px;
    width: 90%;
}
.handball-popup-inner h2 { margin-top: 0; }
.handball-popup-inner button {
    margin: 10px;
    padding: 10px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
}
#handball-yes { background: #0073aa; color: #fff; }
#handball-no { background: #ccc; color: #000; }

/* Blockierte Widgets */
.handball-blocked {
    border: 2px dashed #999;
    padding: 20px;
    text-align: center;
    border-radius: 10px;
    background: #f4f4f4;
}

/* Steuert aussehen des Buttons, wenn externe Inhalt blockiert */
.handball-blocked button {
    background: #0073aa;
    color: #fff;
    border: none;
    padding-top: 6px;
    padding-right: 12px;
    padding-left: 12px;
    padding-bottom: 8px;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 10px;
    margin-bottom: 10px;
}
#handball-consent-reset {
    display: inline-block;
    /*margin-top: 20px;*/
    /*font-size: 14px;*/
    /*color: #0073aa;*/
    /*text-decoration: underline;*/
    cursor: pointer;
}

/************************ Datenschutz - Tabelle ***********************/
/* --- Responsive Tabellen für Datenschutzerklärung --- */
#handballnet-datenschutz .table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 1em;
  position: relative;
  box-shadow: inset 0 -1px 0 #e0e0e0;
}

/* Schatten-Hinweis am Rand, wenn Tabelle scrollbar ist */
#handballnet-datenschutz .table-wrapper::after {
  content: "← Wischen →";
  position: absolute;
  bottom: -4px;  
  right: 10px;
  font-size: 12px;
  font-weight: 700;
  /*color: #888;*/
  color: red;
  opacity: 0.7;
  display: none;
}

/* Nur auf kleinen Bildschirmen sichtbar machen */
@media (max-width: 768px) {
  #handballnet-datenschutz .table-wrapper::after {
    display: block;
  }
}

/* Optionale Basisformatierung für Tabellen */
#handballnet-datenschutz table {
  border-collapse: collapse;
  width: 100%;
  min-width: 600px; /* sorgt für horizontales Scrollen */
}

#handballnet-datenschutz th,
#handballnet-datenschutz td {
  text-align: left;
  padding: 8px;
  border-bottom: 1px solid #eee;
  font-size: 14px;
}

#handballnet-datenschutz th {
  font-weight: 600;
  background: #fafafa;
}

 /* Scrollbar ausblenden (alle Browser) */
.table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-top: 10px;
  border-radius: 8px;
}

/* Scrollbar ausblenden (alle Browser) */
.table-wrapper::-webkit-scrollbar {
  height: 0; /* oder 6px, wenn du sie dezent sehen willst */
}

.table-wrapper {
  scrollbar-width: none; /* Firefox */
}

#handballnet-datenschutz .table-scroll {
  overflow-x: overlay; /* scrollbar nicht reservieren */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE, Edge Legacy */
}

#handballnet-datenschutz .table-scroll::-webkit-scrollbar {
  display: none; /* Chrome, Safari */
}

/* optional: optisch sauberer Abschluss */
#handballnet-datenschutz table {
  border-bottom: none !important;
  margin-bottom: 0;
}


/***** WIRD D A S H I E R N O C H V E R W E N D E T ? ****/
.image-container {
      position: relative; /* Wichtig für absolute Positionierung des Overlays */
    }
.image-container::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(254,136,76,0.56); /* Beispiel: Halbtransparenter schwarzer Overlay */
      z-index: 1; /* Stellt sicher, dass das Overlay über dem Bild liegt */
}

/* Sponsoren TEST */
/* --- Sponsorenbereich im Footer --- */
/* --- Sponsorenbereich im Footer (1 Spalte mit 4 Zeilen) --- */
.footer-sponsoren {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 20px; /* Abstand zwischen Logos */
  text-align: center;
}

/* Jede Zeile (die die Bilder enthält) als “Kachel” behandeln */
.footer-sponsoren .et_pb_row {
  flex: 1 1 22%; /* 4 pro Reihe auf Desktop */
  margin: 0 !important;
  padding: 0 !important;
}

/* Tablet: 2 Bilder nebeneinander */
@media (max-width: 980px) {
  .footer-sponsoren .et_pb_row {
    flex: 1 1 45%;
  }
}

/* Smartphone: 2 Bilder nebeneinander */
@media (max-width: 767px) {
  .footer-sponsoren .et_pb_row {
    flex: 1 1 48%;
  }
}

/* Sehr kleine Geräte: 1 Bild pro Reihe */
@media (max-width: 480px) {
  .footer-sponsoren .et_pb_row {
    flex: 1 1 100%;
  }
}

/* Bilddarstellung angleichen */
.footer-sponsoren img {
  max-height: 80px; /* Höhe anpassen nach Wunsch */
  width: auto;
  object-fit: contain;
  display: inline-block;
}

/*************************************************************/



/**** MITGLIED WERDEN ****/

/**** Footer ****/
/*@media (max-width: 980px) {
  .sponsoren-row {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .sponsoren-row .et_pb_column {
    width: 100% !important;
    margin-bottom: 20px;
    text-align: center;
  }

  .sponsoren-row img {
    max-width: 80%;
    height: auto;
  }
}*/