:root{
  --brand-orange:#f57c00;
  --brand-blue:#0d6efd;
  --brand-dark:#111827;
  --brand-muted:#6b7280;
  --surface:#ffffff;
  --surface-2:#f8fafc;
  --radius-xl:1.25rem;
  --shadow-soft:0 14px 35px rgba(0,0,0,.12);
  --shadow-card:0 10px 28px rgba(17,24,39,.10);
  --hero-min:64vh;
}

html{scroll-behavior:smooth;}
body{background:var(--surface); color:#0f172a;}
::selection{background:rgba(245,124,0,.25);}

/* Navbar background pattern */
.site-navbar{
  background-image:url("../images/logo_background.png");
  background-repeat:repeat-x;
  background-position:center;
  background-size:auto 100%;
}

.navbar-brand img{max-height:38px; height:auto;}

/* Navbar links – better readability */
.navbar .nav-link{
  font-weight:700;
  color:var(--brand-dark);
  letter-spacing:.2px;
  padding:.55rem .85rem;
  border-radius:.85rem;
}
.navbar .nav-link:hover,
.navbar .nav-link:focus{
  color:var(--brand-dark);
  background:rgba(245,124,0,.12);
}
.navbar .nav-link.active{
  color:var(--brand-dark);
  background:rgba(245,124,0,.18);
}
.nav-link{position:relative;}
.nav-link::after{
  content:"";
  position:absolute;
  left:.25rem; right:.25rem;
  bottom:-.25rem;
  height:2px;
  transform:scaleX(0);
  transform-origin:left;
  background:currentColor;
  transition:transform .2s ease;
  opacity:.85;
}
.nav-link:hover::after,
.nav-link.active::after{transform:scaleX(1);}

.navbar.is-scrolled{
  box-shadow:0 8px 28px rgba(0,0,0,.10);
}

/* Buttons */
.btn-orange{
  --bs-btn-bg: var(--brand-orange);
  --bs-btn-border-color: var(--brand-orange);
  --bs-btn-hover-bg:#e46f00;
  --bs-btn-hover-border-color:#e46f00;
  --bs-btn-color:#fff;
  --bs-btn-hover-color:#fff;
}
.badge-orange{background:var(--brand-orange); color:#fff;}
.text-muted-2{color:var(--brand-muted)!important;}

/* Hero */
.hero{
  position:relative;
  min-height:var(--hero-min);
  overflow:hidden;
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-soft);
}
.hero .video-layer{
  position:absolute; inset:0;
  background:#111;
}
.hero video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  filter:saturate(1.05) contrast(1.05);
}
.hero .overlay{
  position:relative;
  z-index:1;
  min-height:var(--hero-min);
  padding:4rem 1.25rem;
  background:linear-gradient(180deg, rgba(0,0,0,.40), rgba(0,0,0,.15), rgba(0,0,0,0));
}
.hero .kicker{
  display:inline-flex;
  gap:.5rem;
  align-items:center;
  padding:.35rem .75rem;
  border-radius:999px;
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(6px);
  font-weight:600;
  font-size:.9rem;
}
.hero .headline{letter-spacing:-.02em;}
.hero .lede{max-width:52ch;}

/* Sections */
.section{
  padding:2rem 0;
}
.section-alt{
  background:var(--surface-2);
  border-top:1px solid rgba(0,0,0,.06);
  border-bottom:1px solid rgba(0,0,0,.06);
}
.section-title{
  letter-spacing:-.02em;
}
.section-subtitle{
  max-width:70ch;
}

/* Card grid / tiles */
.tile-card{
  border-radius:var(--radius-xl);
  overflow:hidden;
  border:0;
  box-shadow:var(--shadow-card);
  transition:transform .18s ease, box-shadow .18s ease;
}
.tile-card:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 42px rgba(17,24,39,.16);
}
.tile-card .card-img-top{
  aspect-ratio:16/9;
  object-fit:cover;
}
.tile-card .card-body{
  display:flex;
  flex-direction:column;
}
.tile-card .btn{margin-top:auto;}

/* Feature list */
.feature{
  border-radius:var(--radius-xl);
  background:#fff;
  border:1px solid rgba(15,23,42,.08);
  box-shadow:0 10px 26px rgba(17,24,39,.06);
}
.feature .icon{
  width:48px; height:48px;
  border-radius:14px;
  display:grid; place-items:center;
  background:rgba(13,110,253,.10);
  color:var(--brand-blue);
}

/* Contact / floating actions */
.fab-whatsapp{
  position:fixed;
  bottom:18px;
  left:18px;
  z-index:1050;
  width:56px; height:56px;
  border-radius:50%;
  display:grid; place-items:center;
  background:#25D366;
  color:#fff;
  text-decoration:none;
  box-shadow:0 14px 30px rgba(0,0,0,.20);
  transition:transform .15s ease, filter .15s ease;
}
.fab-whatsapp:hover{transform:translateY(-2px); filter:brightness(.98);}
.fab-whatsapp:focus-visible{
  outline:3px solid #fff;
  outline-offset:2px;
  box-shadow:0 0 0 5px rgba(37,211,102,.35), 0 14px 30px rgba(0,0,0,.20);
}

/* Footer */
.site-footer{
  background:var(--brand-dark);
  color:#fff;
}
.site-footer a{
  color:rgba(255,255,255,.70);
  text-decoration:none;
}
.site-footer a:hover{color:#fff;}

/* Utility */
.skip-link{
  position:absolute;
  left:-9999px;
  top:auto;
  width:1px;height:1px;
  overflow:hidden;
}
.skip-link:focus{
  left:1rem; top:1rem;
  width:auto; height:auto;
  padding:.5rem .75rem;
  z-index:2000;
  background:#fff;
  border-radius:.75rem;
  box-shadow:0 10px 30px rgba(0,0,0,.18);
}

/* Better default for embedded map */
.ratio iframe{border:0;}


/* -------------------------
   Responsive adjustments
   ------------------------- */
@media (max-width: 991.98px){
  /* Mobile nav: turn collapsed menu into a readable panel */
  .navbar-collapse{
    background:rgba(255,255,255,.96);
    backdrop-filter: blur(10px);
    border:1px solid rgba(0,0,0,.08);
    border-radius:1rem;
    padding:.75rem;
    margin-top:.75rem;
    box-shadow:0 14px 35px rgba(0,0,0,.12);
  }
  .navbar-nav{
    gap:.25rem !important;
    align-items:stretch !important;
  }
  .nav-link::after{display:none;}
  .dropdown-menu{
    border-radius:1rem;
    border:1px solid rgba(0,0,0,.08);
    box-shadow:0 18px 40px rgba(0,0,0,.12);
  }
  .dropdown-item{padding:.65rem .9rem;}
}

@media (max-width: 575.98px){
  :root{ --hero-min:52vh; }

  /* Typography / spacing */
  .section{ padding:2.5rem 0; }
  .hero .overlay{ padding:2.5rem 1rem; }
  .display-5{ font-size:2.05rem; }
  .lead{ font-size:1.05rem; }

  /* Cards: soften hover jump for touch */
  .tile-card:hover{ transform:none; }

  /* Make buttons wrap nicely */
  .btn-lg{ padding:.85rem 1.05rem; }
}

.lieferbild{
  width:100%;
  height:auto;
  object-fit:cover;
  border-radius:16px;
}

.logo-badge{
  background:white;
  padding:6px;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 2px 8px rgba(0,0,0,0.15);
}

.logo-img{
  height:40px;
  width:auto;
  display:block;
}

.social-footer a{
  font-size: 2rem;
  color: #fff;
  transition: transform .2s ease, opacity .2s ease;
}

.social-footer a:hover{
  transform: scale(1.12);
  opacity: .85;
}

.footer-link{
  color: rgba(255,255,255,.85);
  text-decoration: none;
}

.footer-link:hover{
  color: #fff;
  text-decoration: underline;
}

.footer-contact div{
  margin-bottom:6px;
}

.footer-contact i{
  margin-right:6px;
  opacity:.8;
}

.footer-contact{
  font-size:.95rem;
}

/* ==========================
   Aktionen-Seite
   ========================== */

.angebote-hero{
  background:
    radial-gradient(circle at top right, rgba(245,124,0,.10), transparent 28%),
    linear-gradient(180deg, #fff8f1 0%, #ffffff 100%);
  padding: 4rem 0 5rem;
}

.angebote-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.45rem .9rem;
  border-radius:999px;
  background:#ffd166;
  color:#2b2b2b;
  font-size:.92rem;
  font-weight:700;
  letter-spacing:.02em;
  box-shadow:0 6px 18px rgba(0,0,0,.08);
}

.angebote-hero h1{
  letter-spacing:-.02em;
  color:var(--brand-dark);
}

.angebote-hero .lead{
  max-width: 40rem;
  margin-left:auto;
  margin-right:auto;
  color:var(--brand-muted);
}

/* Instagram-Karte */
.instagram-widget-wrap{
  width:100%;
  max-width:760px;
  margin:2rem auto 0;
  padding:1.25rem;
  background:#fff;
  border:1px solid rgba(15,23,42,.08);
  border-radius:1.5rem;
  box-shadow:0 10px 28px rgba(17,24,39,.10);
  overflow:hidden;
}

/* Zentrier-Wrapper */
.instagram-widget-inner{
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  text-align:center;
}

/* Elfsight-Container selbst */
.instagram-widget-inner .elfsight-app-fddf5bcc-2826-46bf-bad5-1876ee9f1e90{
  width:100%;
  max-width:540px;
  margin:0 auto;
}

/* Fallback: alles im Widget mittig halten */
.instagram-widget-inner .elfsight-app-fddf5bcc-2826-46bf-bad5-1876ee9f1e90,
.instagram-widget-inner .elfsight-app-fddf5bcc-2826-46bf-bad5-1876ee9f1e90 > div{
  display:block;
  margin-left:auto !important;
  margin-right:auto !important;
}

/* Häufig hilft das bei eingebetteten iFrames/Inner-Containern */
.instagram-widget-wrap iframe{
  display:block;
  margin-left:auto !important;
  margin-right:auto !important;
  max-width:100% !important;
}

/* Instagram-Button */
.btn-instagram{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.4rem;
  min-height:48px;
  padding:.9rem 1.35rem;
  border:none;
  border-radius:999px;
  background:linear-gradient(90deg, #f58529, #dd2a7b, #8134af, #515bd4);
  color:#fff;
  font-weight:700;
  text-decoration:none;
  box-shadow:0 10px 22px rgba(129,52,175,.18);
  transition:transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}

.btn-instagram:hover,
.btn-instagram:focus{
  color:#fff;
  transform:translateY(-2px);
  box-shadow:0 14px 28px rgba(129,52,175,.22);
  opacity:.98;
}

.btn-instagram:focus-visible{
  outline:3px solid rgba(129,52,175,.25);
  outline-offset:3px;
}

/* ==========================
   Responsive
   ========================== */

@media (max-width: 991.98px){
  .angebote-hero{
    padding:3rem 0 4rem;
  }

  .instagram-widget-wrap{
    max-width:680px;
  }
}

@media (max-width: 767.98px){
  .angebote-hero{
    padding:2.5rem 0 3rem;
  }

  .angebote-hero h1{
    font-size:2rem;
  }

  .angebote-hero .lead{
    font-size:1rem;
  }

  .instagram-widget-wrap{
    max-width:100%;
    padding:.9rem;
    border-radius:1.1rem;
    margin-top:1.5rem;
  }

  .instagram-widget-inner .elfsight-app-fddf5bcc-2826-46bf-bad5-1876ee9f1e90{
    max-width:100%;
  }

  .btn-instagram{
    width:100%;
    max-width:340px;
  }
}

@media (max-width: 575.98px){
  .angebote-badge{
    font-size:.85rem;
    padding:.38rem .75rem;
  }

  .instagram-widget-wrap{
    padding:.75rem;
  }
}