*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Arial,sans-serif;background:#f4f4f0;color:#171717}.topbar{position:fixed;z-index:10;top:0;left:0;right:0;display:flex;justify-content:space-between;padding:22px 5vw;color:#fff;background:linear-gradient(rgba(0,0,0,.55),transparent)}.topbar a{color:#fff;text-decoration:none}.topbar nav{display:flex;gap:22px}.brand{font-weight:700}.hero{position:relative;min-height:100vh;display:flex;align-items:flex-end;overflow:hidden;background:#111;color:#fff}.slides,.slide,.overlay{position:absolute;inset:0}.slide{opacity:0;background-size:cover;background-position:center;transition:opacity 1.3s ease,transform 7s linear;transform:scale(1.04)}.slide.active{opacity:1;transform:scale(1)}.overlay{background:linear-gradient(90deg,rgba(0,0,0,.8),rgba(0,0,0,.2))}.hero-content{position:relative;z-index:2;max-width:760px;margin:0 7vw 12vh}.eyebrow{text-transform:uppercase;letter-spacing:.18em;font-weight:700;color:#d4a437;font-size:.8rem}.eyebrow.dark{color:#755817}h1{font-size:clamp(3rem,8vw,7rem);margin:0}h2{font-size:clamp(2.4rem,5vw,4.6rem);margin:0}.hero-content p{font-size:1.15rem;line-height:1.6}.button{display:inline-flex;padding:15px 24px;border:0;border-radius:999px;background:#d4a437;color:#111;text-decoration:none;font-weight:700;cursor:pointer}.dark-button{background:#102019;color:#fff}.controls{position:absolute;z-index:3;right:5vw;bottom:45px;display:flex;gap:10px}.controls button{width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.4);background:rgba(255,255,255,.12);color:#fff;cursor:pointer}.contact-section{max-width:1200px;margin:auto;padding:110px 24px;display:grid;grid-template-columns:1fr 1.2fr;gap:80px}.contact-copy p{color:#666;line-height:1.7}.contact-form{position:relative;background:#fff;padding:38px;border-radius:24px;box-shadow:0 25px 70px rgba(0,0,0,.08)}.field-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}.field{margin-bottom:18px}.field label{display:block;font-weight:700;margin-bottom:8px}input,textarea{width:100%;padding:14px;border:1px solid #ccc;border-radius:12px;font:inherit}.privacy{display:flex;gap:10px;align-items:flex-start;color:#666;margin-bottom:18px}.privacy input{width:auto;margin-top:3px}.error{display:block;color:#a12727;min-height:18px;margin-top:5px}.form-status.success{color:#17643b}.form-status.failure{color:#a12727}.honeypot{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important}footer{padding:28px;text-align:center;background:#102019;color:#fff}@media(max-width:800px){.topbar nav{display:none}.contact-section{grid-template-columns:1fr;gap:40px}.field-row{grid-template-columns:1fr}.hero-content{margin-bottom:130px}.controls{left:24px;right:auto}}
.gallery-notice {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 32px;
  text-align: center;
  color: rgba(255, 255, 255, 0.85);
  font-size: clamp(1rem, 2vw, 1.3rem);
  background: linear-gradient(135deg, #0e4f2d, #102019);
}

.controls button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}


/* Hoch- und Querformat automatisch korrekt darstellen */
.slide {
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #101010;
  transform: none;
  transition: opacity 2s ease;
}

.slide.active {
  transform: none;
}

.slide-background {
  position: absolute;
  inset: -7%;
  background-position: center;
  background-size: cover;
  filter: blur(38px);
  transform: scale(1.14);
  opacity: 0.76;
}

.slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.14);
}

.slide-image {
  position: relative;
  z-index: 1;
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  box-shadow: 0 22px 80px rgba(0, 0, 0, 0.3);
}

.slide.landscape .slide-image {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  box-shadow: none;
}

.slide.portrait .slide-image {
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

@media (max-width: 800px) {
  .slide.portrait .slide-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}


/* =========================================================
   NUR MOBILE – Desktop bleibt vollständig unverändert
   ========================================================= */
@media screen and (max-width: 800px) {

  /* Header steht separat oberhalb der Galerie */
  .topbar {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    z-index: 20 !important;
    min-height: 62px !important;
    padding: 18px 20px !important;
    background: #07120e !important;
    border-bottom: 1px solid rgba(212, 164, 55, 0.28) !important;
  }

  .topbar nav {
    display: none !important;
  }

  .topbar .brand {
    font-size: 1.15rem !important;
  }

  /* Hero auf dem Handy nur als Bildbereich */
  .hero {
    position: relative !important;
    min-height: 0 !important;
    height: calc(100svh - 62px) !important;
    display: block !important;
    overflow: hidden !important;
    background: #07120e !important;
  }

  /* Nichts darf mehr über der Grafik liegen */
  .hero-content,
  .overlay {
    display: none !important;
  }

  /* Bildfläche mit Platz für die Steuerung */
  .slides {
    position: absolute !important;
    inset: 0 0 76px 0 !important;
  }

  .slide {
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px !important;
    overflow: hidden !important;
    background: #07120e !important;
    transform: none !important;
  }

  .slide.active {
    transform: none !important;
  }

  /* Hintergrund nur dezent, damit freie Flächen gut aussehen */
  .slide-background {
    position: absolute !important;
    inset: -12% !important;
    background-position: center !important;
    background-size: cover !important;
    filter: blur(45px) !important;
    opacity: 0.22 !important;
    transform: scale(1.15) !important;
  }

  .slide::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background: rgba(0, 0, 0, 0.16) !important;
  }

  /* Entscheidend:
     Auf dem Handy werden ALLE Bilder vollständig angezeigt.
     Kein cover, kein Abschneiden. */
  .slide-image,
  .slide.portrait .slide-image,
  .slide.landscape .slide-image {
    position: relative !important;
    z-index: 2 !important;
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: calc(100vw - 16px) !important;
    max-height: calc(100svh - 158px) !important;
    object-fit: contain !important;
    object-position: center !important;
    border-radius: 16px !important;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.38) !important;
  }

  /* Steuerung separat unter dem Bild */
  .controls {
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    bottom: 14px !important;
    transform: translateX(-50%) !important;
    z-index: 5 !important;
    display: flex !important;
    gap: 12px !important;
  }

  .controls button {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    border: 1px solid rgba(212, 164, 55, 0.55) !important;
    background: rgba(7, 18, 14, 0.92) !important;
    color: #fff !important;
  }

  /* Kontaktbereich normal darunter */
  .contact-section {
    padding: 72px 20px !important;
  }

  .contact-form {
    padding: 24px 18px !important;
  }
}


.required-mark {
  color: #a12727;
  font-weight: 700;
}

.required-note {
  margin: -4px 0 18px;
  color: #666;
  font-size: 0.86rem;
}


/* WhatsApp-Kanal: Desktop unverändert, nur mobil sichtbar */
.mobile-whatsapp {
  display: none;
}

@media screen and (max-width: 800px) {
  .desktop-brand {
    display: none !important;
  }

  .mobile-whatsapp {
    display: inline-flex !important;
    align-items: center;
    gap: 9px;
    color: #fff !important;
    text-decoration: none;
    font-weight: 700;
    font-size: 1rem;
  }

  .whatsapp-icon {
    display: inline-grid;
    place-items: center;
    width: 27px;
    height: 27px;
    border-radius: 50%;
    background: #25D366;
    color: #fff;
    font-size: 0;
  }

  .whatsapp-icon::before {
    content: "↗";
    font-size: 15px;
    line-height: 1;
  }
}


/* Echtes, sofort erkennbares WhatsApp-Symbol */
@media screen and (max-width: 800px) {
  .whatsapp-icon {
    background: transparent !important;
    width: 29px !important;
    height: 29px !important;
  }

  .whatsapp-icon::before {
    content: none !important;
  }

  .whatsapp-icon svg {
    display: block;
    width: 29px;
    height: 29px;
    fill: #25D366;
  }
}


/* Mobiler Kontakt-Button rechts neben dem WhatsApp-Kanal */
.mobile-contact-link {
  display: none;
}

@media screen and (max-width: 800px) {
  .topbar {
    align-items: center !important;
  }

  .mobile-contact-link {
    display: inline-grid !important;
    place-items: center;
    margin-left: auto;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid rgba(212, 164, 55, 0.55);
    background: rgba(212, 164, 55, 0.12);
    text-decoration: none;
    flex: 0 0 auto;
  }

  .mobile-contact-link svg {
    width: 22px;
    height: 22px;
    fill: #d4a437;
  }
}