:root{
      --brand: #0f766e; /* Akzentfarbe: anpassen */
    }
    .navbar-brand strong{ letter-spacing: .2px; }
    .btn-brand{
      background: var(--brand);
      border-color: var(--brand);
      color: #fff;
    }
    .btn-brand:hover{ filter: brightness(.35); color:#fff; border: 1px solid #0f766e; }
    .text-brand{ color: var(--brand); }

    /* Hero */
    .hero{
      position: relative;
      min-height: 68vh;
      display: grid;
      align-items: center;
      overflow: hidden;
      background: #f8f9fa;
    }
    .hero-bg{
      position:absolute; inset:0;
      background-image: url("../images/drohnen_hero3.jpg"); /* <- DEIN BILD */
      background-size: cover;
      background-position: center;
    }
    .hero::before{
      content:"";
      position:absolute; inset:0;
      /* Helles Overlay, damit Text auf RGB-Seite gut lesbar bleibt */
      background: linear-gradient(90deg,
        rgba(255,255,255,.92) 0%,
        rgba(255,255,255,.85) 38%,
        rgba(255,255,255,.40) 62%,
        rgba(255,255,255,0) 78%);
      pointer-events:none;
    }
    .hero-content{ position: relative; z-index: 1; padding-top: 30px;
    padding-bottom: 30px; }
    .hero-card{
      background: rgba(255,255,255,.86);
      backdrop-filter: blur(6px);
      border: 1px solid rgba(0,0,0,.06);
    }

    /* Section helpers */
    .section{ padding: 4.5rem 0; }
    .section-soft{ background: #f8fafc; }
    .card-soft{
      border: 1px solid rgba(0,0,0,.06);
      box-shadow: 0 .5rem 1.25rem rgba(0,0,0,.04);
      border-radius: 1rem;
    }
    .icon-badge{
      width: 44px; height: 44px;
      border-radius: 12px;
      display:grid; place-items:center;
      background: rgba(15,118,110,.10);
      color: var(--brand);
      flex: 0 0 auto;
    }
    .small-muted{ color: #64748b; }
    .sticky-cta{
      position: fixed;
      right: 16px;
      bottom: 16px;
      z-index: 1030;
      display:none;
    }
    @media (max-width: 991.98px){
      .hero{ min-height: 74vh; }
      .hero::before{
        background: linear-gradient(180deg,
          rgba(255,255,255,.92) 0%,
          rgba(255,255,255,.80) 45%,
          rgba(255,255,255,.20) 100%);
      }
      .sticky-cta{ display:block; }
    }
    @keyframes kenBurnsOnce {
  0%   { transform: scale(1.02) translate3d(0,0,0); }
  100% { transform: scale(1.06) translate3d(-1.2%, -0.8%, 0); }
}

.hero-bg{
  animation: kenBurnsOnce 18s ease-out 1 forwards;
  will-change: transform;
  transform-origin: 60% 40%;
}

@media (prefers-reduced-motion: reduce){
  .hero-bg{ animation: none !important; }
}

#beispiele img{
  height: 520px;
  object-fit: cover;
}

@media (max-width: 991.98px){
  #beispiele img{
    height: 280px;
  }
}

.contact{
  position: relative;
  padding: 5rem 0;
  background:
    radial-gradient(900px 500px at 15% 20%, rgba(15,118,110,.10), transparent 60%),
    radial-gradient(700px 400px at 85% 30%, rgba(2,132,199,.10), transparent 55%),
    linear-gradient(180deg, #f8fafc 0%, #ffffff 70%);
}

.contact-card{
  box-shadow: 0 1.25rem 2.5rem rgba(0,0,0,.06);
  border: 1px solid rgba(0,0,0,.06);
}

.tech-parallax{
  position: relative;
  padding: 6rem 0;
  background-image: url("../images/matrice.jpg"); /* DEIN BILD */
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  color: #fff;
}

/* dunkler, neutraler Overlay für Lesbarkeit */
.tech-overlay{
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,.55) 0%,
      rgba(0,0,0,.65) 100%
    );
  z-index: 0;
}

/* Inhalt über Overlay */
.tech-parallax .container-xl{
  z-index: 1;
}

/* Mobile: Parallax aus (Performance & iOS) */
@media (max-width: 991.98px){
  .tech-parallax{
    background-attachment: scroll;
  }
}

/* FAQ Styling (dezent, CI-farbig) */
#faq .accordion-item{
  border: 1px solid rgba(15,118,110,.18);
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 .5rem 1.25rem rgba(0,0,0,.04);
  background: #fff;
  margin-bottom: .75rem;
}

#faq .accordion-button{
  font-weight: 600;
  padding: 1.1rem 1.25rem;
  background: #fff;
}

/* Links eine CI-Leiste */
#faq .accordion-button{
  border-left: 6px solid rgba(15,118,110,.35);
}

#faq .accordion-button:not(.collapsed){
  color: #0b1320;
  border-left-color: var(--brand);
  background: rgba(15,118,110,.06);
}

/* Pfeil/Indicator in CI-Farbe */
#faq .accordion-button::after{
  filter: none; /* Bootstrap setzt teils Filter, wir bleiben clean */
  opacity: 1;
}

/* Für bessere Steuerung: wir ersetzen das Icon via mask */
#faq .accordion-button::after{
  background-image: none;
  width: 1.15rem;
  height: 1.15rem;
  margin-left: auto;
  background-color: var(--brand);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 5.5l6.5 6 6.5-6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 5.5l6.5 6 6.5-6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain;
  transform: rotate(0deg);
  transition: transform .2s ease;
}

#faq .accordion-button:not(.collapsed)::after{
  transform: rotate(180deg);
}

/* Body etwas luftiger */
#faq .accordion-body{
  padding: 1rem 1.25rem 1.25rem;
  color: #334155;
}

/* Focus sichtbar, CI-konform */
#faq .accordion-button:focus{
  box-shadow: 0 0 0 .25rem rgba(15,118,110,.18);
  border-color: rgba(15,118,110,.4);
}

/* Deliverables Styling */
.deliverables{
  position: relative;
  border-left: 6px solid rgba(15,118,110,.35);
  background: #fff;
}

.deliverable-tile{
  border: 1px solid rgba(15,118,110,.18);
  background: rgba(15,118,110,.04);
}

.deliverable-tile:hover{
  border-color: rgba(15,118,110,.35);
  background: rgba(15,118,110,.06);
}
/* CI-styled alerts */
.alert-success{
  background-color: rgba(15,118,110,.08);
  border-color: rgba(15,118,110,.35);
  color: #0b1320;
}

.alert-danger{
  background-color: rgba(220,38,38,.08);
  border-color: rgba(220,38,38,.35);
  color: #7f1d1d;
}
.alert{
  border-radius: 1rem;
}