* { margin: 0; padding: 0; box-sizing: border-box; }

body { color: #333; background: #fff; font-family: Arial, Helvetica, sans-serif; }
.section-container { width: min(1180px, 90%); margin: 0 auto; }

nav { position: absolute; top: 0; left: 0; z-index: 10; width: 100%; height: 92px; border-bottom: 1px solid rgba(255,255,255,.28); }
.nav-container { width: min(1320px, 94%); height: 100%; margin: 0 auto; display: flex; align-items: center; }
.logo { margin-right: 55px; color: #fff; font-size: 39px; font-weight: 900; letter-spacing: -2px; text-decoration: none; }
nav ul { height: 100%; display: flex; align-items: center; gap: 24px; list-style: none; }
nav ul li { height: 100%; }
nav ul a { position: relative; height: 100%; display: flex; align-items: center; color: #fff; font-size: 12px; font-weight: bold; text-decoration: none; }
nav ul a::after { content: ""; position: absolute; right: 0; bottom: 24px; left: 0; height: 2px; background: #d0a42a; transform: scaleX(0); transition: transform .25s ease; }
nav ul a:hover::after, nav ul a.active::after { transform: scaleX(1); }
.nav-button { margin-left: auto; padding: 12px 22px; color: #fff; border: 1px solid rgba(255,255,255,.8); font-size: 12px; font-weight: bold; text-decoration: none; }
.nav-button:hover { color: #26394a; background: #fff; }

.gallery-hero { position: relative; min-height: 628px; background: url('../images/Galerie/gallery-hero.webp') center/cover no-repeat; }
.gallery-hero-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(17,35,45,.82), rgba(17,35,45,.3)); }
.gallery-hero-content { position: absolute; top: 34%; left: 11%; z-index: 1; width: min(1180px, 86%); color: #fff; }
.gallery-hero-content p { margin-bottom: 14px; color: #d6b88c; font-size: 12px; font-weight: bold; letter-spacing: 3px; }
.gallery-hero h1 { max-width: 700px; margin-bottom: 20px; font-family: Georgia, "Times New Roman", serif; font-size: clamp(52px, 7vw, 86px); font-weight: normal; line-height: 1.05; }
.gallery-hero-content span { max-width: 610px; display: block; font-size: 18px; line-height: 1.7; }

.tiles-gallery { padding: 105px 4%; background: #f2eee8; }
.tiles-grid {
    width: min(1360px, 100%);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: 220px;
    grid-auto-flow: dense;
    gap: 14px;
}
.tile { position: relative; overflow: hidden; background: #ddd; cursor: zoom-in; }
.tile-wide { grid-column: span 2; }
.tile-tall { grid-row: span 2; }
.tile img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .6s ease; }
.tile::after,
.tile figcaption { display: none; }
.tile:hover img { transform: scale(1.055); }
.tile img:focus-visible { outline: 4px solid #d0a42a; outline-offset: -4px; }

footer { color: rgba(255,255,255,.8); background: #9B7A5E; }
.footer-content { padding: 60px 0 45px; display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 60px; }
.footer-content strong { color: #fff; font-size: 39px; }
.footer-content h2 { margin-bottom: 15px; color: #fff; font-size: 16px; }
.footer-content p { margin-top: 10px; line-height: 1.6; }
.footer-content a { margin-bottom: 8px; display: block; color: rgba(255,255,255,.75); text-decoration: none; }
.copyright { padding: 18px; text-align: center; border-top: 1px solid rgba(255,255,255,.12); font-size: 12px; }

@media (max-width: 1050px) {
    .logo { margin-right: 25px; }
    nav ul { gap: 13px; }
    nav ul a { font-size: 10px; }
    .tiles-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 780px) {
    nav { position: relative; height: auto; background: #26394a; }
    .nav-container { padding: 16px 0; flex-direction: column; }
    .logo { margin: 0 0 12px; }
    nav ul { height: auto; flex-wrap: wrap; justify-content: center; gap: 10px 20px; }
    nav ul li, nav ul a { height: 30px; }
    nav ul a::after { bottom: 0; }
    .nav-button { margin: 14px 0 0; }
    .gallery-hero { min-height: 538px; }
    .gallery-hero-content { top: 30%; left: 7%; width: 86%; }
    .tiles-gallery { padding: 70px 5%; }
    .tiles-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 190px; }
    .footer-content { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
    .tiles-grid { grid-template-columns: 1fr; grid-auto-rows: 260px; }
    .tile-wide, .tile-tall { grid-column: span 1; grid-row: span 1; }
}