:root {
        --corner-radius: 12px;
        --nav-height: 200px;
        --nav-color: #878787;
        --nav-active: #c51215;
        --brand-red: #c51215;
        --brand-red-hover: #e0282a;
        --footer-bg: #878787;
      }

      body {
        font-family: 'Convergence', serif;
        padding-top: calc(var(--nav-height) + 12px);
        color: #333;
      }

      .abstand { margin-top: 120px !important; }

      /* Mobile: .abstand mit 50px Abstand nach oben */
      @media (max-width: 575.98px) {
        .abstand { margin-top: 50px !important; }
      }

      h1 { font-size:1.8rem; line-height:1.3; margin-bottom:1.2rem; color:#000; }

      /* ===== Navbar (fixiert, weiß) ===== */
      .navbar-wrapper {position:fixed;top:0;left:0;right:0;background:#fff;z-index:1040;}
      .navbar-custom{min-height:var(--nav-height);}
      .navbar-brand img{height:var(--nav-height);width:auto;display:block;}
      .navbar-nav{align-items:center;margin-top:75px;}
      .navbar-nav .nav-link{font-size:1.05rem;font-weight:400;color:var(--nav-color);margin-left:1.5rem;transition:color .3s ease;}
      .navbar-nav .nav-link:hover,.navbar-nav .nav-link:focus,.navbar-nav .nav-link.active{color:var(--nav-active);}
      /* Nur "Kontakt" als roter Button */
      .navbar-nav .nav-item:last-child .nav-link{
        background-color:var(--brand-red);color:#fff;padding:.4rem 1rem;border-radius:6px;
        transition:background-color .3s ease,transform .2s ease;
      }
      .navbar-nav .nav-item:last-child .nav-link:hover{background-color:var(--brand-red-hover);transform:translateY(-2px);}

      /* Dropdowns */
      .dropdown-menu{border:none;border-radius:0 0 8px 8px;box-shadow:0 5px 15px rgba(0,0,0,.1);}
      .dropdown-item{font-family:'Convergence',serif;color:var(--nav-color);text-align:right;}
      .dropdown-item:hover{color:var(--nav-active);background-color:rgba(197,18,21,.05);}
      @media (min-width:992px){.nav-item.dropdown:hover .dropdown-menu{display:block;margin-top:0;}}
      @media (max-width:575.98px){:root{--nav-height:120px;}.navbar-nav{margin-top:30px;}.navbar-nav .nav-link{margin-left:0;}}

      /* ===== Buttons (rot) ===== */
      .btn-red{
        background-color:var(--brand-red);color:#fff;padding:.6rem 1.5rem;font-size:1.05rem;border-radius:6px;border:none;
        transition:background-color .3s ease,transform .2s ease,box-shadow .2s ease;
      }
      .btn-red:hover{background-color:var(--brand-red-hover);transform:translateY(-2px);}
      .btn-red:focus-visible{outline:2px solid var(--brand-red-hover);outline-offset:2px;}

      /* ===== Panorama / Bilder ===== */
      .card{border:0;background:transparent;border-radius:var(--corner-radius);overflow:hidden;}
      @media (min-width:576px){.gutter-3px{--bs-gutter-x:3px;--bs-gutter-y:3px;}}
      .image-wrapper{position:relative;overflow:hidden;border-radius:var(--corner-radius);isolation:isolate;}
      .card-slice{position:relative;width:100%;overflow:hidden;border-radius:var(--corner-radius);}
      .img-layer{
        position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity 1s ease;opacity:0;border-radius:var(--corner-radius);display:block;
      }
      .img-layer.active{opacity:1;}
      .hover-overlay{
        position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;
        transition:opacity .25s ease,visibility .25s ease;z-index:4;padding:1rem;border-radius:var(--corner-radius);pointer-events:none;
      }
      .hover-overlay .overlay-box{background:rgba(255,255,255,.9);border-radius:.5rem;padding:.75rem 1rem;box-shadow:0 10px 25px rgba(0,0,0,.15);max-width:90%;text-align:center;}
      .card.hoverable:hover .hover-overlay{opacity:1;visibility:visible;}
      .card.hoverable:hover .card-slice{filter:brightness(.9);transform:scale(1.01);}
      .card.hoverable{cursor:pointer;transition:transform .3s ease;}

      /* Sichtbarkeit: Mobile-Hero vs Desktop-Panorama */
      .desktop-panorama{display:none;}
      .mobile-hero{display:block;}
      @media (min-width:576px){.desktop-panorama{display:block;}.mobile-hero{display:none;}}
      .mobile-hero .hero-frame{position:relative;width:100%;aspect-ratio:1280/707;border-radius:var(--corner-radius);overflow:hidden;}
      .mobile-hero .hero-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity 1s ease;opacity:0;border-radius:var(--corner-radius);}
      .mobile-hero .hero-frame img.active{opacity:1;}

      /* ===== Intro-Text ===== */
      .intro-text{text-align:center;margin:3rem auto 4rem;}
      .intro-text h1{font-size:1.8rem;line-height:1.3;margin-bottom:1.2rem;color:#000;}
      .intro-text p{font-size:1.3rem;color:#333;margin-bottom:1.8rem;}

      /* ===== 3 Cards Abschnitt ===== */
      .service-card{
        display:flex;flex-direction:column;border:1px solid rgba(0,0,0,0.05);border-radius:12px;overflow:hidden;background:#fff;
        box-shadow:0 2px 10px rgba(0,0,0,0.06);transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;height:100%;
      }
      .service-card:hover{transform:translateY(-6px);box-shadow:0 8px 26px rgba(0,0,0,0.12);border-color:rgba(197,18,21,0.35);}
      .service-card .card-img-top{border-radius:12px 12px 0 0;height:220px;object-fit:cover;width:100%;}
      .service-card .card-title{color:#000;font-size:1.3rem;margin-top:.5rem;}
      .service-card .card-text{font-size:1rem;color:#333;margin-top:.75rem;flex-grow:1;}
      .service-card .card-body{display:flex;flex-direction:column;justify-content:space-between;flex-grow:1;padding:1.5rem;}
      .service-card .btn-red{align-self:center;margin-top:auto;margin-bottom:10px;}

      /* ===== Roter Fluid-Container (Elfsight) ===== */
      .brand-red-block{background:var(--brand-red);color:#fff;}
      .brand-red-block a{color:#fff;}

      /* ===== Kontaktbereich (2-spaltig) ===== */
      .contact-card{background:#fff;border-radius:12px;box-shadow:0 8px 26px rgba(0,0,0,.08);padding:1.5rem;}
      .form-label{font-weight:400;color:#222;}
      .required::after{content:" *";color:var(--brand-red);}
      .invalid-feedback.custom{display:none;}
      .was-validated .invalid-feedback.custom.show{display:block;}
      .btn-submit{
        background:var(--brand-red);color:#fff;border:none;border-radius:6px;padding:.6rem 1.4rem;
        transition:background-color .2s ease,transform .2s ease;
      }
      .btn-submit:hover{background:var(--brand-red-hover);transform:translateY(-2px);}

      /* ===== Footer ===== */
      footer{background:var(--footer-bg);color:#fff;padding:2.5rem 0 1rem;}
      footer a{color:#fff;text-decoration:none;transition:opacity .2s ease;}
      footer a:hover{opacity:.8;}
      .footer-bottom{border-top:1px solid rgba(255,255,255,0.3);margin-top:1.5rem;padding-top:1rem;font-size:.9rem;}
		
	  /* Inaktiv & abgeheftet grau */
	.btn-submit:disabled,
	.btn-submit[aria-disabled="true"]{
	  background:#adb5bd;       /* grauer Hintergrund */
	  color:#fff;
	  cursor:not-allowed;
	  opacity:0.95;
	  transform:none;           /* kein Hover-Lift im Disabled-Zustand */
	  box-shadow:none;
	}
		
	/* Accordion mit Tabs links */
.accordion-list .list-group-item {
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 0;
  font-size: 1.05rem;
  color: #333;
  padding: 0.9rem 1.1rem;
  cursor: pointer;
  transition: all 0.2s ease;
}
.accordion-list .list-group-item + .list-group-item {
  border-top: none;
}
.accordion-list .list-group-item:hover {
  background-color: rgba(197, 18, 21, 0.08);
  color: var(--brand-red);
}
.accordion-list .list-group-item.active {
  background-color: var(--brand-red);
  color: #fff;
  border-color: var(--brand-red);
  z-index: 2;
}

.tab-content {
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 8px;
  padding: 1.5rem;
  background: #fff;
  box-shadow: 0 4px 16px rgba(0,0,0,0.05);
}

.tab-content h3 {
  color: var(--brand-red);
  margin-bottom: 1rem;
}
		
		
/* ======= Galerie-Grid (8 Spalten; responsive) ======= */
.gallery-grid {
  display: grid;
  gap: 6px;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 576px){ .gallery-grid{ grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 992px){ .gallery-grid{ grid-template-columns: repeat(6, 1fr); } }
@media (min-width: 1200px){ .gallery-grid{ grid-template-columns: repeat(8, 1fr); } }

.gallery-grid2 {
  display: grid;
  gap: 6px;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 576px){ .gallery-grid2{ grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px){ .gallery-grid2{ grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px){ .gallery-grid2{ grid-template-columns: repeat(2, 1fr); } }

.gallery-item{
  position: relative;
  display: block;
  border-radius: 8px;
  overflow: hidden;
  background: #f7f7f7;
}
.gallery-item img{
  width: 100%;
  height: 100%;
  display: block;
  aspect-ratio: 1 / 1;     /* gleichmäßige Kacheln */
  object-fit: cover;
  transition: transform .25s ease, filter .25s ease;
}
.gallery-item:hover img{
  transform: scale(1.03);
  filter: brightness(.95);
}

/* ======= Lightbox (mit weißem Rahmen und Caption unten) ======= */
.lightbox{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.86);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  padding: 16px;
}
.lightbox.open{ display: flex; }

.lightbox-figure{
  margin: 0;
  max-width: min(95vw, 1200px);
  width: 100%;
  text-align: center;
  background: #fff;            /* Weißer Rahmenhintergrund */
  border-radius: 8px;
  padding: 10px 10px 30px 10px; /* Oben/Rechts/Links 10px, unten 30px */
  box-shadow: 0 10px 40px rgba(0,0,0,.5);
}

.lightbox-image{
  max-height: 80vh;
  width: auto;
  max-width: 100%;
  height: auto;
  border-radius: 4px;
  display: block;
  margin: 0 auto;
}

.lightbox-caption{
  margin-top: 8px;
  color: #333333;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.4;
}

/* Steuerungs-Buttons */
.lightbox-close,
.lightbox-prev,
.lightbox-next{
  position: absolute;
  background: rgba(255,255,255,.14);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: .5rem .7rem;
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
  backdrop-filter: blur(2px);
}
.lightbox-close{ top: 14px; right: 14px; font-size: 2rem; line-height: 1; }
.lightbox-prev{ left: 12px; }
.lightbox-next{ right: 12px; }
.lightbox-prev, .lightbox-next{
  top: 50%;
  transform: translateY(-50%);
  font-size: 2rem;
  width: 48px; height: 48px;
  display: grid; place-items: center;
}
.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover{ background: rgba(255,255,255,.24); transform: translateY(-50%) scale(1.05); }
.lightbox-close:hover{ transform: scale(1.05); }

/* Scroll sperren wenn Lightbox offen */
.body-no-scroll{ overflow: hidden; }

/* ===== Back to Top Button ===== */
.back-to-top {
  position: fixed;
  bottom: 25px;
  right: 25px;
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 50%;
  background-color: var(--brand-red);
  color: #fff;
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: all 0.3s ease;
  z-index: 1500;
  box-shadow: 0 4px 10px rgba(0,0,0,0.25);
}
.back-to-top.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.back-to-top:hover {
  background-color: var(--brand-red-hover);
  transform: translateY(-2px);
}
.back-to-top:focus-visible {
  outline: 2px solid var(--brand-red-hover);
  outline-offset: 3px;
}

/* Wenn nur 1 Bild: keine Fade-Transitions */
.no-animate .img-layer { transition: none !important; }
.no-animate .hero-frame img { transition: none !important; }