@charset "UTF-8";

i { color:#848484; }

h1.logo { text-align:center; }
h2.lead {
  border-bottom: 1px dotted #c3a475;
  margin-bottom: 30px;
}

.fettText { font-weight:700; }
.polaroidText { position:relative; top:35px; color:#c3a475; }
.polaroidTextLeft { position:relative; top:35px; text-align:left; color:#c3a475; }

.footer {
  margin:30px 0;
  background:#c3a475;
  color:#FFF;
}
.footerbar { width:100%; min-height:60px; display:block; background:#c3a475; position:relative; }
.footerSmallText { font-size:0.75em; line-height:12px; color:#FFF; }

.left {}
.center { text-align:center; }
.right { text-align:right; }

.footerUpLink { color:#FFF; }
.footerLogo { text-align:center; }

#marken { margin-top:50px; }
.image { text-align:center; }

#service { margin-top:50px; }
#firstRow { margin-top:80px; }
table { border:0 none; }
td, tr td, table tr td { border:0 none; }
#serviceText { margin:30px 0 50px; }
#anfahrt { margin-top:50px; }
#anfahrtText { margin:30px 0 50px; }
#kontakt { margin-top:50px; margin-bottom:50px; }
#inspiration { margin-top:50px; margin-bottom:50px; }
.impressum { margin-top:30px; }
.topAbstand { margin-top:74px; }
.white { color:#FFF !important; }
.blocksatz { text-align:justify; }

/* Force all brand logos to 120x80 on every screen size */
#marken ul.five_up.tiles li.image img {
  width: 120px !important;
  height: 80px !important;
  object-fit: contain !important;
  display: block !important;
  margin: 0 auto !important;
}

/* Four up grid layout - improved */
.four_up {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}

.four_up li {
  width: 25%;
  margin-bottom: 20px;
  padding: 10px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Force all brand logos to consistent size */
#marken ul.four_up.tiles li.image img {
  width: 120px !important;
  height: 80px !important;
  object-fit: contain !important;
  background: #fff;
  padding: 5px;
  border-radius: 3px;
}

/* Responsive adjustments for mobile */
@media only screen and (max-width: 767px) {
  .topAbstand { margin-top:0; }
  .left { text-align:left; }
  .center { text-align:left; }
  .right { text-align:left; }
  #firstRow { margin-top:80px; }
  .aktuellImage { margin-top:30px; }
  .kontaktAbstand { margin-top:30px; }
  
  /* Four up mobile adjustment */
  .four_up li {
    width: 50%; /* 2 logos per row on mobile */
  }
}

/* Very small screens */
@media only screen and (max-width: 480px) {
  .four_up li {
    width: 100%; /* 1 logo per row on very small screens */
  }
}