/* ==========================================================================
   Mobile Bar München – Standalone Nachbau
   Nachgebaut auf Basis von https://www.mobile-bar-muenchen.de/
   Farben & Maße aus dem Original-Template (Artisteer/Joomla) übernommen.
   ========================================================================== */

:root{
  --brand:        #890F75;   /* Haupt-Magenta (Überschriften, Links) */
  --brand-2:      #8A0F75;   /* Verlauf oben */
  --brand-dark:   #45083B;   /* Verlauf unten */
  --brand-tint:   rgba(137,15,117,0.14); /* Eingabefelder */
  --nav-bg:       #1F1F1F;
  --nav-text:     #A1A1A1;
  --nav-hover:    #890F75;
  --sheet-bg:     rgba(255,255,255,0.85);
  --footer-bg:    rgba(232,217,234,0.9);
  --text:         #272727;
  --maxw:         800px; /* Originalbreite von Header/Sheet/Nav */
}

*{ box-sizing: border-box; }

/* Nur für Suchmaschinen/Screenreader sichtbar, visuell ausgeblendet –
   damit jede Seite trotz des grafischen Layouts eine echte, aussagekräftige
   H1 im Quelltext hat (wichtig fürs SEO). */
.visually-hidden{
  position:absolute;
  width:1px; height:1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
}

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  padding:0;
  min-width:320px;
  font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
  font-size:13px;
  line-height:1.6;
  color: var(--text);
  text-align:left;
  background-color: var(--brand-dark);
  /* Original-Ebenen: Glanz/"Bubbles" oben, Verlauf, Welle unten (page.png) */
  background-image:
    url('../images/pageglare.png'),
    linear-gradient(to bottom, var(--brand-2) 0, var(--brand-2) 420px, var(--brand-dark) 1100px),
    url('../images/page.png');
  background-position: top center, top center, bottom left;
  background-repeat: no-repeat, no-repeat, repeat-x;
  background-attachment: fixed, fixed, fixed;
  background-size: auto, 100% 100%, auto;
}

a{ color: var(--brand); text-decoration:none; }
a:hover{ text-decoration:underline; }

img{ max-width:100%; }

#mbm-main{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 12px;
}

/* ---------------------------------------------------------------- Header */

.mbm-header{
  position:relative;
  margin: 20px auto 0;
  /* Seitenverhältnis der Original-Grafik (800×175) statt fester Höhe,
     damit der Banner auf schmalen Bildschirmen mitskaliert statt
     seitlich abgeschnitten zu werden (aspect-ratio wird von allen
     gängigen Browsern seit 2021 unterstützt). */
  aspect-ratio: 800 / 175;
  max-width: 800px;
  border-radius: 4px;
  overflow:hidden;
  background-color:#000;
  background-image: url('../images/object0.png'), url('../images/header.jpg');
  background-repeat: no-repeat, no-repeat;
  background-position: right top, left top;
  background-size: auto 100%, cover;
  box-shadow: 1px 1px 3px 2px rgba(0,0,0,0.6);
}

.mbm-logo{
  position:relative;
  z-index:2;
  display:block;
  height:100%;
}

.mbm-logo a{ display:block; height:100%; }

/* Der Schriftzug ist im Original als Grafik (header.jpg) eingebrannt;
   dieser Text bleibt wie im Original nur für SEO/Screenreader vorhanden
   und wird visuell ausgeblendet. */
.mbm-logo .headline,
.mbm-logo .slogan{
  position:absolute;
  width:1px; height:1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
}

/* ------------------------------------------------------------- Navigation */

nav.mbm-nav{
  background: var(--nav-bg);
  margin: 0 auto;
  position:relative;
  z-index: 499;
}

ul.mbm-hmenu{
  list-style:none;
  margin:0; padding:0;
  display:flex;
  flex-wrap:wrap;
}

ul.mbm-hmenu > li{
  position:relative;
}
ul.mbm-hmenu > li:not(:first-child)::before{
  content:"";
  position:absolute;
  left:0; top:8px;
  width:1px; height:24px;
  background-image:url('../images/menuseparator.png');
  background-repeat:no-repeat;
  background-position:center;
}

ul.mbm-hmenu > li > a{
  display:block;
  padding: 0 22px;
  height:40px;
  line-height:40px;
  color: var(--nav-text);
  font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
  font-weight:700;
  font-size:12px;
  text-decoration:none;
  white-space:nowrap;
}

ul.mbm-hmenu > li > a:hover,
ul.mbm-hmenu > li.active > a{
  background:#141414;
  color: var(--nav-hover);
  text-decoration:none;
}

ul.mbm-hmenu ul{
  list-style:none;
  margin:0; padding:0;
  position:absolute;
  top:100%; left:0;
  min-width:220px;
  background: var(--nav-bg);
  box-shadow: 0 4px 10px rgba(0,0,0,0.5);
  display:none;
  z-index:500;
}

ul.mbm-hmenu > li:hover > ul{ display:block; }

ul.mbm-hmenu ul li a{
  display:block;
  padding: 10px 16px;
  color: var(--nav-text);
  font-weight:700;
  font-size:13px;
  border-top:1px solid #333;
}
ul.mbm-hmenu ul li:first-child a{ border-top:0; }
ul.mbm-hmenu ul li a:hover{ background:#141414; color:var(--nav-hover); }

.mbm-menu-btn{
  display:none;
  border:1px solid #404040;
  border-radius:3px;
  background:#2a2a2a;
  margin:6px;
  padding:8px 10px;
  cursor:pointer;
}
.mbm-menu-btn span{
  display:block;
  width:20px; height:2px;
  background:#e0e0e0;
  margin:4px 0;
}

@media (max-width: 720px){
  .mbm-menu-btn{ display:inline-block; }
  ul.mbm-hmenu{ display:none; flex-direction:column; width:100%; }
  ul.mbm-hmenu.open{ display:flex; }
  ul.mbm-hmenu > li{ border-left:0; border-top:1px solid #3a3a3a; width:100%; }
  ul.mbm-hmenu > li:first-child{ border-top:0; }
  ul.mbm-hmenu ul{ position:static; box-shadow:none; }
}

/* ------------------------------------------------------------------ Sheet */

.mbm-sheet{
  background: var(--sheet-bg);
  box-shadow: 1px 1px 3px 2px rgba(0,0,0,0.2);
  border: 1px solid rgba(0,0,0,0.3);
  margin: 0 auto;
  padding: 30px 40px 10px;
}

.print-link{
  text-align:center;
  font-style:italic;
  margin: 0 0 10px;
}
.print-link button{
  background:none;border:0;color:var(--brand);font-style:italic;cursor:pointer;font-size:13px;text-decoration:underline;font-family:inherit;
}

.mbm-postcontent h1{
  color: var(--brand-2);
  font-size:33px;
  font-weight:700;
  text-align:left;
  margin: 20px 0;
}

.mbm-postcontent h2{
  color: var(--brand-2);
  font-size:31px;
  font-weight:700;
  text-align:left;
  margin: 20px 0;
}

.mbm-postcontent h3{
  color: var(--brand);
  font-size:20px;
  font-weight:700;
  text-align:left;
  margin: 18px 0;
}

.mbm-postcontent h4{
  color:#414141;
  font-size:18px;
  font-weight:700;
  text-align:left;
  margin: 20px 0;
}

.mbm-postcontent p{ margin: 0 0 16px; }

.mbm-postcontent ul{
  list-style:none;
  margin: 0 0 16px;
  padding:0;
}
.mbm-postcontent ul li{
  position:relative;
  padding: 3px 0 3px 22px;
}
.mbm-postcontent ul li::before{
  content:"";
  position:absolute;
  left:2px; top:7px;
  width:4px; height:7px;
  background-image:url('../images/postbullets.png');
  background-repeat:no-repeat;
  background-size:contain;
}

.mbm-postcontent ol{ margin:0 0 16px 20px; padding:0; }
.mbm-postcontent ol li{ margin-bottom:8px; }

.intro-lead{
  text-align:center;
  font-size:18px;
  font-weight:700;
  color: var(--text);
  margin: 6px 0 22px;
}

.hotline-box{
  display:flex;
  flex-wrap:wrap;
  gap:32px;
  align-items:flex-start;
  justify-content:space-between;
  padding-bottom:20px;
}
.hotline-box .bullets{ flex:1 1 320px; }
.hotline-box .hotline{ flex:0 0 220px; text-align:center; }
.hotline-box .hotline h4{ margin-bottom:2px; }
.hotline-box .hotline .phone{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-size:20px;
  font-weight:700;
  color: var(--brand);
  margin-top:6px;
}
.phone{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:20px;
  font-weight:700;
  color: var(--brand);
}
.phone img{ width:22px; height:auto; flex:none; }

/* --------------------------------------------------------- Inhaltsbilder */

.content-image{
  display:block;
  max-width:100%;
  height:auto;
  margin: 20px auto;
}

/* -------------------------------------------------------- Cocktailslider */
/* Original: 4 unabhängige Bilder-Slideshows nebeneinander, jede blendet für
   sich genommen laufend durch ihre eigenen Fotos (kein gemeinsamer Schieber). */

.cocktail-slider{
  display:flex;
  gap:4px;
  margin: 16px 0 24px;
}
.cocktail-slider .slide-box{
  position:relative;
  flex:1 1 0;
  aspect-ratio: 121 / 220;
  background:#fff;
  overflow:hidden;
}
.cocktail-slider .slide-box img{
  position:absolute;
  top:0; left:0;
  width:100%; height:100%;
  object-fit:contain;
  opacity:0;
  transition: opacity 1s ease;
}
.cocktail-slider .slide-box img.is-active{ opacity:1; }

/* ---------------------------------------------------- Nummerierte Tabelle */
/* Original-Muster für nummerierte Listen: eine Tabelle mit Leerspalte,
   Nummernspalte und Textspalte statt <ol>. */

table.numbered-table{ border-collapse:collapse; margin: 12px 0; }
table.numbered-table td{ padding:2px 4px; vertical-align:top; }
table.numbered-table td.spacer{ width:14px; }
table.numbered-table td.num{ white-space:nowrap; padding-right:2px; }

table.cocktail-table{ border-collapse:collapse; margin: 12px 0 16px; }
table.cocktail-table td{ padding:2px 4px; vertical-align:top; }
table.cocktail-table td.spacer{ width:14px; }
table.cocktail-table td.gap{ width:70px; }
table.cocktail-table td.num{ white-space:nowrap; padding-right:2px; }
table.cocktail-table td.heading{ font-weight:700; color:var(--brand); padding-bottom:6px; }

/* --------------------------------------------------------------- Kontakt */

.mbm-form label{
  display:block;
  font-weight:700;
  color: var(--brand);
  margin: 18px 0 6px;
}
.mbm-form input[type=text],
.mbm-form input[type=email],
.mbm-form input[type=tel],
.mbm-form textarea{
  width:100%;
  padding:10px 12px;
  border:1px solid rgba(0,0,0,0.15);
  background: var(--brand-tint);
  font-family:inherit;
  font-size:14px;
  border-radius:2px;
}
.mbm-form textarea{ min-height:120px; resize:vertical; }
.mbm-form .checkline{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin-top:10px;
  font-size:14px;
}
.mbm-form .checkline input{ margin-top:4px; }
.mbm-form button[type=submit]{
  margin: 22px 0 10px;
  background: var(--brand);
  color:#fff;
  border:0;
  padding:15px 30px;
  font-weight:700;
  font-size:15px;
  border-radius:2px;
  cursor:pointer;
}
.mbm-form button[type=submit]:hover{ background:#6d0c5c; }
.form-note{ font-size:12px; color:#555; margin-top:-4px; }

/* Honeypot-Feld: für Menschen unsichtbar, aber im Markup vorhanden */
.hp-field{
  position:absolute;
  left:-9999px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}

.form-feedback{
  margin-top:14px;
  padding:12px 14px;
  border-radius:2px;
  font-weight:600;
  display:none;
}
.form-feedback.is-visible{ display:block; }
.form-feedback.is-success{ background:rgba(60,150,60,0.12); color:#256b25; }
.form-feedback.is-error{ background:rgba(180,30,30,0.1); color:#a11f1f; }

address.impressum{ font-style:normal; }

/* ------------------------------------------------------------------ Footer */

.mbm-footer{
  background: var(--footer-bg);
  text-align:center;
  padding: 16px 20px;
  font-size:12px;
  color:#4a2c46;
}
.mbm-footer a{ color:#5d1650; }
.mbm-footer .links a{ margin: 0 4px; }
.mbm-footer .copyright{ margin-top:6px; }

.designed-by{
  text-align:center;
  color:#e8d9ea;
  font-size:12px;
  padding: 14px 0 26px;
}
.designed-by a{ color:#fff; }

@media (max-width: 640px){
  .mbm-sheet{ padding: 20px 18px 8px; }
}