html { scroll-padding-top: 110px; }
body { overflow-wrap: break-word; }
a:focus-visible, button:focus-visible { outline: 3px solid #fb923c; outline-offset: 4px; }
[hidden] { display: none !important; }
.field-label { display: block; margin-bottom: .4rem; font-weight: 500; }
.privacy-note, #formStatus { font-size: .875rem; line-height: 1.7; }
.privacy-note a, .site-footer a, .legal a { text-decoration: underline; text-underline-offset: .2em; }
.site-footer { padding: 2rem 1.5rem 6rem; text-align: center; border-top: 1px solid #334155; }
.site-footer nav { display: flex; justify-content: center; flex-wrap: wrap; gap: 1.5rem; margin-top: .75rem; }
.map-box { padding: 2rem; background: #1e293b; line-height: 1.8; }
.map-box p { margin-bottom: 1rem; }
.map-box img { display: block; width: 100%; height: auto; border-radius: .75rem; }
.map-attribution { font-size: .8rem; margin-top: .5rem; }
.map-attribution a { text-decoration: underline; }
.route-button { display: inline-block; padding: .75rem 1rem; border-radius: .75rem; background: #f97316; color: #111827; }
.map-box button, .gallery-filters button { padding: .75rem 1rem; border: 1px solid #f97316; border-radius: .75rem; }
.map-box button, .gallery-filters button[aria-pressed="true"] { background: #f97316; color: #111827; }
.comparison-project > p { text-align: center; margin-bottom: 2rem; }
.comparison-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-bottom: 2rem; }
#projekte .comparison-pair img { height: auto; aspect-ratio: 3 / 4; object-fit: contain; background: #111827; }
.comparison-pair figcaption { padding: .75rem; text-align: center; font-weight: 600; }
.gallery-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin-bottom: 3rem; }
.gallery-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 1rem; align-items: start; }
.gallery-project { margin: 3rem 0; }
.gallery-project h2 { font-family: 'Playfair Display',serif; font-size: 1.75rem; margin-bottom: 1.5rem; }
.gallery-slot figcaption { padding: .65rem; font-size: .875rem; }
.legal { max-width: 900px; margin: 0 auto; padding: 160px 24px 80px; line-height: 1.85; }
.legal h1 { font-family: 'Playfair Display',serif; font-size: 2.6rem; margin-bottom: 1.5rem; }
.legal h2 { font-size: 1.4rem; margin: 2rem 0 .6rem; }
.legal p { margin-bottom: 1rem; }
.pending { border-left: 4px solid #fb923c; padding-left: 1rem; }
#menuToggle { display: none; }
#mobileMenu { display: none; }
button:disabled { opacity: .65; cursor: wait; }
#estimator > div { max-height: 88dvh; overflow-y: auto; }
@media (max-width: 1100px) {
  header .nav-menu { gap: 1rem; }
  html header .cta-btn.cta-btn { display: none !important; }
}
@media (max-width: 767px) {
  header > div { padding: 1rem; flex-wrap: wrap; gap: .75rem; }
  header > div > div:first-child { flex: 1; }
  header .font-heading { font-size: 1.1rem; }
  header .lang-btn { padding: .35rem .55rem; }
  #menuToggle { display: block; font-size: 1.5rem; }
  #mobileMenu.is-open { display: flex; flex-direction: column; padding: 1rem; gap: 1rem; max-height: 70dvh; overflow: auto; }
  .comparison-pair { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: 1fr; }
  #projekte img { height: auto; }
  #kontakt h2 { overflow-wrap: anywhere; }
  #kontakt a[href^="mailto"] { overflow-wrap: anywhere; }
  #hero-slogan { font-size: clamp(1.6rem,8.5vw,2.8rem); }
}
@media (min-width: 768px) and (max-width: 1023px) { .gallery-grid { grid-template-columns: repeat(3,minmax(0,1fr)); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

.hero-photo { background-image: url("gallery/g067.webp"); }

#dienstleistungen .service-title { hyphens: auto; overflow-wrap: normal; }

.hero-photo { background-position: center center; }

.service-fade { display: block; width: 100%; padding: 0; border: 0; position: relative; overflow: hidden; text-align: left; cursor: pointer; }
.service-fade img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.service-fade .fade-after { animation: service-fade 8s infinite; }
.service-fade .fade-label { position: absolute; left: 1rem; bottom: 1rem; padding: .3rem .6rem; border-radius: .4rem; background: #111827e6; color: #fff; font-size: .8rem; }
.fade-label-1 { animation: service-label-before 8s infinite; }
.fade-label-2 { animation: service-fade 8s infinite; }
.service-fade.is-manual .fade-after, .service-fade.is-manual .fade-label { animation: none; transition: opacity 1s ease; }
.service-fade.is-manual .fade-after, .service-fade.is-manual .fade-label-2 { opacity: 1; }
.service-fade.is-manual .fade-label-1 { opacity: 0; }
.service-fade.is-manual.show-before .fade-after, .service-fade.is-manual.show-before .fade-label-2 { opacity: 0; }
.service-fade.is-manual.show-before .fade-label-1 { opacity: 1; }
@keyframes service-fade { 0%, 37.5%, 100% { opacity: 0; } 50%, 87.5% { opacity: 1; } }
@keyframes service-label-before { 0%, 37.5%, 100% { opacity: 1; } 50%, 87.5% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .service-fade .fade-label-1 { opacity: 0; }
  .service-fade .fade-label-2, .service-fade .fade-after { opacity: 1; }
  .service-fade.show-before .fade-after, .service-fade.show-before .fade-label-2 { opacity: 0; }
  .service-fade.show-before .fade-label-1 { opacity: 1; }
}

@media (min-width: 768px) { .hero-photo { background-position: center top; } }