body{font-family: 'Crimson Text', serif;font-size:18px}

.font-crimson{font-family: 'Crimson Text', serif;}
.font-assistant{font-family: 'Assistant', sans-serif;}
.font-la-belle-aurore{font-family: 'La Belle Aurore', cursive;}

.bold-800{font-weight:800}

.font-size-24{font-size:24px}
.font-size-55{font-size: 55px !important;line-height: 60px !important;}

.rotate-minus-6 {transform: rotate(-6deg);}

.bg-wisch{margin-left:400px;margin-top:-20px;background:url(../img/bg-wisch.svg);background-repeat:no-repeat}

.cursor{cursor:pointer}

.inline-block{display:inline-block}

#mmenu_screen{background-image: url(../img/bg_paket.jpg);background-size: cover}
#mmenu_screen h1{font-family: 'Assistant', sans-serif;font-weight:800}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {font-family: 'Assistant', sans-serif;font-weight:800}
#mmenu_screen > .row {min-height: 100vh;}

.flex-fill {
    flex:1 1 auto;
}
.btn {
	font-family: 'Assistant', sans-serif;font-weight:800
    background-color: transparent;
    border: 3px solid transparent;
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: .25rem;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.btn-primary {
    color: #fff;
    background-color: #226f54 !important;
    border-color: #226f54 !important;
}
.btn-secondary {
    color: #226f54 !important; 
    background-color: transparent !important; 
    border-color: #226f54 !important; 
}
.modal-header {
    border-bottom: 0px solid #dee2e6 !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
}
.modal-footer {
    border-top: 0px solid #dee2e6 !important;
    border-bottom-right-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}
.modal-content {
    border: 0px solid rgba(0,0,0,.2) !important;
    border-radius: 0 !important;
	background: url(../img/bg-baumretter.png) repeat !important;
}

.modal-header .close {
    font-size: 24px !important;
    font-weight: 700 !important;
    -webkit-border-radius: 50px !important;
    -moz-border-radius: 50px !important;
    border-radius: 50px !important;
    padding: 5px 12px !important;
    height: 40px !important;
    border: 2px solid #000 !important;
    background-color: transparent !important;
    color: #000 !important;
margin: 0 !important;
}

.modal-dialog {
    max-width: 800px;
    margin: 1.75rem auto;
}
.modal-body {
    padding: 40px !important;
}

.footer{position:absolute;left:0;right:0;bottom:0;padding:20px;}
/* Goldener CTA – gleiche Schrift wie bisher */
.cta-gold {
  display: inline-block;
  padding: 12px 26px;
  border-radius: 999px;
  background: linear-gradient(
    135deg,
    #f7e27c,
    #d4af37,
    #b8962e
  );
  color: #111;
  font-weight: 800;
  letter-spacing: 0.3px;
  transition: all 0.25s ease;
  box-shadow: 0 6px 18px rgba(212,175,55,0.45);
}

/* Hover / Roll-over: Gelb */
.cta-gold:hover {
  background: #eaff00;
  box-shadow:
    0 0 10px rgba(234,255,0,0.8),
    0 0 22px rgba(234,255,0,0.6);
  transform: scale(1.05);
}

@media (max-width: 768px) {
  .footer {
    position: static;
    padding: 12px 10px;
  }
}
@media (max-width: 768px) {
  .bg-wisch {
    margin-left: 0;
    margin-top: 10px;
    background-position: center;
    background-size: contain;
  }
}
@media (max-width: 768px) {
  .font-size-55 {
    font-size: 34px !important;
    line-height: 38px !important;
  }
}@media (max-width: 768px) {
  .modal-body {
    padding: 18px !important;
    max-height: 75vh;
    overflow-y: auto;
  }
}
/* Bilder generell responsive */
img { max-width: 100%; height: auto; }

/* Hero-Logo/Bild speziell auf Mobile kleiner */
@media (max-width: 768px) {
  #mmenu_screen img {
    max-width: 320px;   /* ggf. 260–360 testen */
    width: 90%;
    height: auto;
  }
}
@media (max-width: 768px) {
  .cta-gold {
    max-width: 92%;
    text-align: center;
    padding: 12px 18px;
  }
}
@media (max-width: 768px) {
  .bg-wisch {
    margin-left: 0 !important;
    background-position: center;
    background-size: contain;
  }
}

/* Hero Images */
.hero-img {
  max-width: 100%;
  height: auto;
}

/* Standard: Desktop sichtbar */
.desktop-only { display: block; }
.mobile-only  { display: none; }

/* Mobile Ansicht */
@media (max-width: 768px) {
  .desktop-only { display: none; }
  .mobile-only  {
    display: block;
    max-width: 320px;
    width: 90%;
    margin-bottom: 10px;
  }
}
@media (max-width: 768px) {
  #mmenu_screen h1 {
    margin-bottom: 6px;
  }

  #mmenu_screen strong {
    display: block;
    margin-top: 10px;
  }

  .cta-gold {
    margin-top: 16px;
  }
}

.bg-wisch-gold {
  margin-left: 400px;
  margin-top: -20px;
  background: url(../img/bg-wisch-gold.svg) no-repeat;
}

/* Wisch-Text sauber über dem Brush */
.bg-wisch {
  display: inline-block;
  margin-left: 0;                 /* wichtig für Mobile */
  background-position: center;    /* zentrieren */
  background-size: 100% 100%;
  padding: 10px 18px;             /* Platz damit der Brush "unter" dem Text sitzt */
}

.bg-wisch p {
  margin: 0;
  line-height: 1.1;
  position: relative;
  z-index: 2;
}

/* Mobile Feintuning */
@media (max-width: 768px) {
  .bg-wisch {
    margin-top: 8px !important;
    padding: 12px 16px;
    background-position: center 70%; /* Brush etwas tiefer unter den Text */
    background-size: 110% 100%;
  }

  .font-size-24 {
    font-size: 20px;
  }
}
.modal-body img {
  max-height: 420px;
  width: auto;
}
@media (max-width: 768px) {
  .modal-body img {
    max-height: 260px;
    width: 100%;
  }
.hero-desktop { display: block; }
.hero-mobile  { display: none; }

@media (max-width: 768px) {
  .hero-desktop { display: none; }
  .hero-mobile  { display: block; }
}