@import url('https://fonts.googleapis.com/css2?family=Righteous&display=swap');


*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Arial,Helvetica,sans-serif;color:#4d5355;background:#fff;line-height:1.7}
.wrap{width:100%;min-height:100vh}

/* Bauhaus-inspirierte geometrische Typografie ohne externe Font-Abhaengigkeit */
.brand,h1,h2,.claim{
  font-family:"Righteous","Arial Rounded MT Bold","Century Gothic",sans-serif;
  text-transform:uppercase;
  letter-spacing:.075em;
  font-weight:500;
}
h1,h2{color:#a9c88d}
h1{font-size:36px;margin:0 0 25px}
h2{font-size:22px;margin-top:32px}

/* Fixierte, transparente hellblaue Navigation */
nav{
  position:fixed;top:0;left:0;right:0;z-index:2000;
  display:flex;justify-content:center;align-items:stretch;flex-wrap:wrap;
  background:rgba(154,205,222,.82);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  box-shadow:0 2px 12px rgba(0,0,0,.08)
}
nav>a,.dropbtn{
  display:block;color:#fff;text-decoration:none;padding:15px 16px;
  text-transform:uppercase;letter-spacing:.08em;font-size:13px
}
nav>a:hover,.dropbtn:hover,.dropdown-content a:hover{background:rgba(255,255,255,.18)}
.dropdown{position:relative}
.dropdown-content{
  display:none;position:absolute;left:0;top:100%;min-width:220px;
  background:rgba(154,205,222,.94);z-index:2100;
  box-shadow:0 8px 18px rgba(0,0,0,.15)
}
.dropdown-content a{
  display:block;color:#fff;text-decoration:none;padding:12px 15px;
  white-space:nowrap;text-transform:uppercase;letter-spacing:.06em;font-size:12px
}
.dropdown:hover .dropdown-content,.dropdown:focus-within .dropdown-content{display:block}
.dropbtn::after{content:" \25BE";font-size:.8em}

/* Grosser Architektur-Header */
header{
  min-height:520px;
  padding:100px 20px 50px;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  text-align:center;color:#fff;
  background:
    linear-gradient(rgba(20,40,45,.22),rgba(20,40,45,.28)),
    url("../bilder/header.jpg") center/cover no-repeat;
}
.site-logo img{
  width:auto;max-width:145px;max-height:90px;height:auto;object-fit:contain;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.18))
}
.brand{font-size:34px;margin-top:16px;text-shadow:0 2px 8px rgba(0,0,0,.35)}
.claim{font-size:14px;margin-top:8px;text-shadow:0 2px 6px rgba(0,0,0,.35)}

main{max-width:1050px;margin:auto;padding:55px 7% 70px}
a{color:#6d9eb0}
.hero{text-align:center;margin:25px 0}
.hero img{max-width:720px;width:100%;height:auto;max-height:400px;object-fit:contain}
.photos{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:28px 0;align-items:center;justify-items:center}
.photos.two{grid-template-columns:repeat(2,1fr)}
.photos img{width:100%;height:190px;max-width:290px;object-fit:contain;display:block}
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin:28px 0}
.card{padding:25px;background:#f6f9fa;border-top:3px solid #a9c88d}
.card h2{margin-top:0}
.button{
  display:inline-block;background:#9acdde;color:#fff;text-decoration:none;
  padding:11px 19px;text-transform:uppercase;letter-spacing:.07em;font-size:12px
}
.contactbox{
  margin-top:40px;padding:24px;background:#f4f8f9;text-align:center;
  border-top:2px solid #a9c88d
}
footer{text-align:center;background:#8fc3d5;color:#fff;padding:22px;font-size:13px}
footer a{color:#fff}
ul{padding-left:22px}
.timeline{border-left:3px solid #a9c88d;padding-left:22px}

@media(max-width:700px){
 nav>a,.dropbtn{padding:11px 8px;font-size:11px}
 .dropdown-content{min-width:180px}
 header{min-height:390px;padding-top:115px}
 .brand{font-size:25px}
 .site-logo img{max-width:110px}
 main{padding:38px 6% 50px}
 h1{font-size:28px}
 h2{font-size:19px}
 .cards{grid-template-columns:1fr}
 .photos{gap:6px}
 .photos img{height:105px}
}

/* V4: Dateiname direkt bei jedem Bild sichtbar */
.img-file{
  display:block;
  text-align:center;
  margin:4px 0 12px;
  font-size:12px;
  color:#8b989b;
  font-family:Arial,Helvetica,sans-serif;
  letter-spacing:.03em;
}

/* V5 Anpassungen */
.site-logo img{max-width:205px;max-height:122px}
.price-photo img{max-width:400px!important;max-height:240px!important}
.quick-contact{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:18px 0 30px}
.quick-contact a{display:inline-block;padding:12px 20px;text-decoration:none;color:#fff;background:#9acdde;text-transform:uppercase;letter-spacing:.06em;font-size:12px}
.quick-contact a.whatsapp{background:#73aa83}
.seo-links{margin-top:35px;padding:20px;background:#f6f9fa;border-left:3px solid #a9c88d}
@media(max-width:700px){.site-logo img{max-width:160px;max-height:102px}.price-photo img{max-width:100%!important}}