/* ================================
   mobile.css – Sportwetten Online
   (komplett ersetzen)
   ================================ */

/* Basis */
* { box-sizing: border-box; }
body{
  margin:0;
  font-family: Arial, Helvetica, sans-serif;
  font-size:16px;
  color:#333;
  background:url(images/bg.jpg) repeat-x #6090C0;
}
a{ color:#005E94; text-decoration:none; }
a:hover{ color:#FF9205; }
img, iframe, video{ max-width:100%; height:auto; border:0; }

/* Page */
#page{ width:100% !important; margin:0 auto; }

/* ================================
   Mobile Header (Logo + Burger)
   ================================ */
.mbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px 0 12px;
}

.mlogo{
  display:block;
  width:252px;
  max-width:70vw;
  height:72px;
  background:url(images/logo.png) no-repeat left center;
  background-size:contain;
}

.mburger{
  width:46px;
  height:40px;
  border:0;
  border-radius:3px;
  background:url(images/topmenu-blue.png) repeat-x;
  cursor:pointer;
}

.mburger span,
.mburger span:before,
.mburger span:after{
  content:"";
  display:block;
  width:22px;
  height:2px;
  background:#fff;
  margin:0 auto;
  position:relative;
}
.mburger span:before{ position:absolute; top:-7px; left:0; }
.mburger span:after{ position:absolute; top: 7px; left:0; }

.mline{
  height:9px;
  margin:10px 0 0 0;
  background:url(images/line.jpg) no-repeat center;
  background-size:1200px 9px;
}

/* ================================
   Content / Layout
   ================================ */
#content{
  width:100% !important;
  background:#fff;
  border-left:1px solid #ccc;
  border-right:1px solid #ccc;
  border-bottom:1px solid #ccc;
  padding:12px;
}

#main{
  float:none !important;
  width:100% !important;
}

#sidebar{ display:none !important; }

/* Desktop-Module, die mobil NICHT erscheinen sollen */
#gallery, #table{ display:none !important; }

/* Mobile Trennlinie */
.m-sep{
  width:50%;
  margin:14px auto;
  border:0;
  border-top:1px solid #ccc;
}

/* ================================
   Introboxen (oben / unten)
   - Bild rechts, Text fließt herum
   ================================ */
#introbox, #introbox2{
  width:100% !important;
  background:#ececec;
  padding:10px;
  margin:0 0 12px 0;
}

#introbox h2, #introbox2 h2{
  width:100% !important;
  height:auto !important;
  line-height:1.25 !important;
  font-size:18px;
  font-family:Georgia, "Times New Roman", Times, serif;
  font-weight:normal;
  font-style:italic;
  border-bottom:1px solid #ccc;
  padding:0 0 8px 0;
  margin:0 0 10px 0;
}

#introbox #introbox_text,
#introbox2 #introbox2_text{
  width:100% !important;
  background:#fff;
  border:1px solid #e6e6e6;
  padding:10px;
}

#introbox #introbox_text img{
  float:right;
  margin:0 0 10px 14px; /* Abstand links vom Bild */
  width:min(42%, 160px);
  height:auto;
  background:#fff;
  padding:2px;
  border:1px solid #ccc;
}

/* Clearfix */
#introbox #introbox_text::after{
  content:"";
  display:block;
  clear:both;
}

/* Iframes aus Introboxen sauber */
#introbox #introbox_text iframe,
#introbox2 #introbox2_text iframe{
  width:100% !important;
  margin:10px 0 0 0 !important;
  height:auto !important;
}

/* Banner in Introbox */
#introbox .banner,
#introbox2 .banner{
  width:100% !important;
  height:auto !important;
  margin:10px 0 0 0 !important;
  background:#fff;
  border:1px solid #ccc;
  padding:6px;
}

/* ================================
   Top Anbieter (Startboxen)
   - Bild links, Text fließt herum
   - Buttons: "mehr lesen..." + "Webseite anzeigen"
   ================================ */
#main .startbox{
  float:none !important;
  width:100% !important;
  margin:0 0 12px 0 !important;
  background:#ececec;
  padding:10px;
  overflow:hidden;
}

#main .startbox .post{
  background:#fff;
  padding:10px;
  width:100% !important;
  height:auto !important;
  border:1px solid #e6e6e6;
}

#main .startbox .post h3{
  width:100% !important;
  height:auto !important;
  line-height:1.25 !important;
  font-size:18px;
  font-family:Georgia, "Times New Roman", Times, serif;
  font-weight:normal;
  font-style:italic;
  border-bottom:1px solid #ccc;
  margin:0 0 8px 0;
  padding:0 0 8px 0;
}

/* WICHTIG: Umfluss + Abstand zuverlässig */
#main .startbox .post .entry{
  width:100% !important;
  height:auto !important;
  overflow:hidden;            /* kapselt Float sauber */
  text-align:left !important;
}

#main .startbox .post .entry img.alignleft{
  float:left !important;
  margin:0 18px 12px 0 !important; /* sichtbarer Abstand */
  width:110px !important;          /* sorgt für Platz neben dem Bild */
  max-width:40% !important;
  height:auto !important;
  background:#fff;
  padding:2px;
  border:1px solid #ccc;
}

#main .startbox .post .entry p{
  margin:0 0 12px 0 !important;
  line-height:1.5;
  clear:none !important;
}

/* Linkleiste unter dem Text */
#main .startbox .m-links{
  display:flex;
  justify-content:space-between;
  gap:10px;
  margin-top:10px;
}

#main .startbox .m-links{
  display:flex;
  justify-content:space-between;
  gap:10px;
  margin-top:10px;
  flex-wrap:wrap;
}

#main .startbox .m-links a{
  flex: 1 1 calc(50% - 5px);  /* 2 Buttons nebeneinander ohne Überlauf */
  display:block;
  padding:10px 12px;
  border-radius:3px;
  background:url(images/topmenu-blue.png) repeat-x;
  color:#fff;
  font-weight:bold;
  text-align:center;
  white-space:nowrap;
}

#main .startbox .m-links a:hover{
  background:url(images/topmenu-orange.png) repeat-x;
  color:#005e94;
}

/* ================================
   News (Mobile-Karten wie Anbieter)
   ================================ */
.m-news-item{
  background:#ececec;
  padding:10px;
  margin:0 0 12px 0;
}

.m-news-item .m-news-thumb{
  float:left;
  margin:0 18px 12px 0;
  width:110px;
  max-width:40%;
  height:auto;
  background:#fff;
  padding:2px;
  border:1px solid #ccc;
}

.m-news-title{
  margin:0 0 6px 0;
  font-family:Georgia, "Times New Roman", Times, serif;
  font-style:italic;
  font-weight:normal;
  font-size:18px;
  line-height:1.25;
}

.m-news-excerpt p{
  margin:0 0 12px 0 !important;
  line-height:1.5;
}

.m-news-more{
  display:inline-block;
  padding:10px 12px;
  border-radius:3px;
  background:url(images/topmenu-blue.png) repeat-x;
  color:#fff;
  font-weight:bold;
}

.m-news-more:hover{
  background:url(images/topmenu-orange.png) repeat-x;
  color:#005e94;
}

/* Clearfix für News */
.m-news-item::after{
  content:"";
  display:block;
  clear:both;
}

/* ================================
   Burger Menu Overlay
   ================================ */
#mnav{
  position:fixed;
  inset:0;
  display:none;
  background:rgba(0,0,0,0.55);
  z-index:999999;
}
#mnav.open{ display:block; }

.mnav-panel{
  position:absolute;
  top:0; right:0;
  width:min(86vw, 340px);
  height:100%;
  background:#fff;
  border-left:1px solid #ccc;
  padding:12px;
  overflow:auto;
}

.mnav-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding-bottom:10px;
  border-bottom:1px solid #eee;
  margin-bottom:10px;
}

.mnav-close{
  width:40px;
  height:36px;
  border:0;
  border-radius:3px;
  background:url(images/topmenu-orange.png) repeat-x;
  color:#005e94;
  font-weight:bold;
  cursor:pointer;
}

/* Menülinks */
.mnav-panel ul{ list-style:none; padding:0; margin:0; }
.mnav-panel li{ margin:0 0 6px 0; }
.mnav-panel a{
  display:block;
  padding:10px 12px;
  background:url(images/topmenu-blue.png) repeat-x;
  color:#fff;
  font-weight:bold;
  border-radius:3px;
}
.mnav-panel a:hover{
  background:url(images/topmenu-orange.png) repeat-x;
  color:#005e94;
}

body.mnav-open{ overflow:hidden; }

/* ================================
   Footer
   ================================ */
/* ================================
   Footer (Mobile) – sauberer Aufbau
   ================================ */

#footer{
  width:100% !important;
  text-align:center;
  color:#fff;
  padding:14px 12px 18px 12px;
  line-height:1.5;
  font-size:14px;
}

/* AB18 Bild als Block oben, mit Abstand */
#footer img{
  display:block;
  margin:0 auto 10px auto;
  width:38px;
  height:auto;
}

/* Links wie im Theme, aber mit mehr "Luft" */
#footer a{
  color:#fff;
  font-weight:bold;
  display:inline;
  padding:2px 4px;
  margin:2px 2px;
}

#footer a:hover{
  color:#FF9205;
}

/* Trennstriche optisch entspannen */
#footer{
  word-break: normal;
  overflow-wrap: anywhere;
}
#footer br{ display:none; }
/* ================================
   Top Anbieter (Mobile): Titel + Bild zentriert
   ================================ */

/* Titel zentrieren */
#main .startbox .post h3{
  text-align: center !important;
}

/* Bild nicht floaten, sondern mittig */
#main .startbox .post .entry img.alignleft{
  float: none !important;
  display: block !important;
  margin: 10px auto 12px auto !important; /* oben/mittig/unten */
  width: min(180px, 60%) !important;      /* passt auf kleine Screens */
  max-width: 100% !important;
}

/* Text darunter normal */
#main .startbox .post .entry{
  overflow: visible !important;
  text-align: left !important;
}
/* ================================
   TOP ANBIETER – Bild mittig erzwingen
   ================================ */

/* Alle Bilder innerhalb der Anbieter-Entry neutralisieren */
#main .startbox .post .entry img{
  float: none !important;
  display: block !important;
  margin: 12px auto !important;
  width: min(180px, 60%) !important;
  height: auto !important;
}

/* Falls alignleft/alignright Klassen greifen */
#main .startbox .post .entry img.alignleft,
#main .startbox .post .entry img.alignright{
  float: none !important;
}
/* Grüner Button für "Webseite anzeigen" */
#main .startbox .m-links a.green{
  background: linear-gradient(to bottom, #3cb371, #2e8b57);
  color: #fff;
}

#main .startbox .m-links a.green:hover{
  background: linear-gradient(to bottom, #2e8b57, #1f6f45);
  color: #fff;
}
/* ================================
   Pagination (Mobile) – wie Desktop
   ================================ */

#main .navigation{
  width: 100%;
  text-align: center;
  margin: 16px 0 22px 0;
  clear: both;
}

#main .navigation .page-numbers{
  display: inline-block;
  padding: 8px 14px;
  margin: 3px;
  background: url(images/topmenu-blue.png) repeat-x;
  color: #fff;
  font-weight: bold;
  text-decoration: none;
  border-radius: 3px;
  font-size: 12px;
  line-height: 20px;
}

#main .navigation .page-numbers:hover{
  background: url(images/topmenu-orange.png) repeat-x;
  color: #005e94;
}

#main .navigation .page-numbers.current{
  background: url(images/topmenu-orange.png) repeat-x;
  color: #005e94;
  cursor: default;
}

#main .navigation .page-numbers.dots{
  background: none;
  color: #333;
  cursor: default;
}
/* ================================
   Footer Mobile – Listen Layout
   ================================ */

#footer{
  text-align:center;
  padding:18px 12px 24px 12px;
  line-height:1.6;
  font-size:14px;
  color:#fff;
}

#footer img{
  display:block;
  margin:0 auto 14px auto;
}

#footer .footer-item{
  margin:8px 0;
}

#footer a{
  color:#fff;
  font-weight:bold;
}

#footer a:hover{
  color:#FF9205;
}
/* Footer (Mobile) als Liste */
#footer{
  text-align:center;
  padding:18px 12px 24px 12px;
  line-height:1.6;
  font-size:14px;
  color:#fff;
}

#footer img{
  display:block;
  margin:0 auto 14px auto;
  width:38px;
  height:auto;
}

#footer .m-foot-item{
  margin:8px 0;
}

#footer .m-foot-item a{
  color:#fff;
  font-weight:bold;
}

#footer .m-foot-item a:hover{
  color:#FF9205;
}
/* ================================
   Mitglieder – Mobile Anpassung
   ================================ */

.member-card{
  flex-direction: column !important;
  align-items: center !important;
  text-align: left;
}

.member-card__media{
  margin: 0 auto 12px auto !important;
}

.member-card__media img{
  display: block;
  margin: 0 auto !important;
}

.member-card__body{
  width: 100%;
}
/* ================================
   Mitglieder – Mobile Trennlinie
   ================================ */

.member-card{
  position: relative;
  padding-bottom: 22px;
}

/* Linie nur zwischen Elementen, nicht beim letzten */
.member-card:not(:last-child)::after{
  content: "";
  display: block;
  width: 50%;
  height: 1px;
  background: #ccc;
  margin: 18px auto 0 auto;
}