/* ==========================================================================
   Bütikofer Schaffrath Landschaftsarchitekten – Frontend
   1:1-Nachbau der Originalseite (gruenplanung.ch)
   ========================================================================== */

:root{
    --black:#000;
    --gray:#b3b3b3;          /* Navigation / Footer inaktiv */
    --gray-dark:#8a8a8a;
    --white:#fff;
    --container:1600px;
    --gutter:30px;
    --img-h:450px;
    --font-regular:"Innervers Gothic Regular","Helvetica Neue",Arial,sans-serif;
    --font-thin:"Innervers Gothic Thin","Helvetica Neue",Arial,sans-serif;
    --font-medium:"Innervers Gothic Medium","Helvetica Neue",Arial,sans-serif;
    --font-bold:"Innervers Gothic Bold","Helvetica Neue",Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
    margin:0;
    font-family:var(--font-regular);
    font-size:18px;
    line-height:1.5;
    color:var(--black);
    background:var(--white);
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

/* --- Header --------------------------------------------------------------- */
.site-header{
    position:fixed;top:0;left:0;right:0;z-index:100;
    background:linear-gradient(to bottom, rgba(255,255,255,.95) 60%, rgba(255,255,255,0));
    padding:24px 40px 40px;
}
.header-inner{
    display:flex;align-items:center;justify-content:space-between;
    gap:30px;
}
.logo{
    font-family:var(--font-bold);
    font-size:clamp(16px, 2.2vw, 30px);   /* skaliert mit der Breite */
    line-height:1.05;
    letter-spacing:.5px;
    text-transform:uppercase;
    color:var(--black);
    /* darf umbrechen, bevor es mit der Navigation kollidiert */
}
.site-nav ul{
    list-style:none;display:flex;gap:40px;margin:0;padding:0;
}
.site-nav a{
    font-family:var(--font-regular);
    font-size:24px;
    letter-spacing:1px;
    text-transform:uppercase;
    color:var(--gray);
    transition:color .25s ease;
}
.site-nav a:hover,
.site-nav a.is-active{color:var(--black);}

.nav-toggle{display:none;background:none;border:0;cursor:pointer;width:34px;height:26px;padding:0;}
.nav-toggle span{display:block;height:3px;background:var(--black);margin:5px 0;transition:.3s;}

/* --- Main / Layout -------------------------------------------------------- */
.site-main{padding-top:120px;min-height:60vh;}
.site-main.is-fluid{padding-top:0;}
.container{max-width:var(--container);margin:0 auto;padding:0 40px;}

/* Seiten mit fixiertem Hintergrundbild (Büro & Aktuelles) */
.page-buro,.page-aktuelles{
    background-size:cover;background-position:center;
    background-attachment:fixed;background-repeat:no-repeat;
}
.page-buro::before,.page-aktuelles::before{
    content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
    background:rgba(255,255,255,.86);
}

/* --- Startseite: Hero ----------------------------------------------------- */
.page-home .site-header{background:rgba(255,255,255,.95);}   /* weisser Hintergrund, aber kein Verlauf nach unten */
.page-home .site-main{padding-top:0;}
.hero{
    height:100vh;min-height:600px;
    background-size:cover;background-position:center;background-repeat:no-repeat;
}

/* --- Projekte: Filterleiste + Raster ------------------------------------- */
.filter-bar{
    display:flex;flex-wrap:wrap;gap:34px;
    max-width:var(--container);margin:0 auto 50px;padding:0 40px;
}
.filter{
    background:none;border:0;cursor:pointer;padding:0;
    font-family:var(--font-thin);
    font-size:26px;line-height:1;color:var(--gray);
    transition:color .25s ease;
}
.filter:hover,.filter.is-active{color:var(--black);}

.project-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:40px var(--gutter);
    max-width:var(--container);margin:0 auto;padding:0 40px 80px;
}
.grid-item{display:block;position:relative;}
.grid-item.is-hidden{display:none;}
.image-box{display:block;overflow:hidden;height:var(--img-h);}
.image-box img{
    width:100%;height:100%;object-fit:cover;object-position:center;display:block;
}
/* Titel als Overlay über dem Bild – erscheint beim Hover (wie Original) */
.grid-title{
    position:absolute;inset:0;z-index:2;
    display:block;text-align:center;
    font-family:var(--font-thin);
    font-size:25px;line-height:37.5px;
    padding:20px 26px 0;color:var(--black);
    background:rgba(255,255,255,.7);
    opacity:0;transition:opacity .5s ease;
}
.grid-item:hover .grid-title{opacity:1;}

/* Scroll-Einblendung */
[data-aos]{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease;}
[data-aos].aos-in{opacity:1;transform:none;}

/* --- Projekt-Einzelseite -------------------------------------------------- */
.project-single{max-width:var(--container);margin:0 auto;padding:40px 40px 90px;}
.project-title{
    text-align:center;font-family:var(--font-bold);font-weight:400;
    font-size:30px;line-height:36px;letter-spacing:normal;text-transform:uppercase;
    margin:50px 0 30px;
}
.project-nav{display:flex;align-items:center;justify-content:center;gap:26px;margin-bottom:50px;}
.pnav{color:var(--gray);font-size:34px;line-height:1;transition:color .25s ease;}
.pnav:hover{color:var(--black);}
.pnav.is-disabled{opacity:.25;pointer-events:none;}
.grid-icon{display:grid;grid-template-columns:repeat(3,6px);gap:3px;}
.grid-icon i{width:6px;height:6px;background:currentColor;display:block;}
.pnav.grid{color:var(--gray);}
.pnav.grid:hover{color:var(--black);}

.project-description{max-width:900px;margin:0 auto 40px;text-align:center;}

.gallery{display:flex;flex-direction:column;gap:var(--gutter);}
.gallery-row{display:grid;gap:var(--gutter);grid-template-columns:1fr;}
.gallery-row.layout-1-2{grid-template-columns:1fr 2fr;}
.gallery-row.layout-2-1{grid-template-columns:2fr 1fr;}
.gallery-row.layout-1-1{grid-template-columns:1fr 1fr;}
.gallery-row.layout-thirds{grid-template-columns:1fr 1fr 1fr;}
.gallery-cell{margin:0;overflow:hidden;min-width:0;}
.gallery-cell img{
    width:100%;height:var(--img-h);object-fit:cover;cursor:zoom-in;
    transition:transform .6s ease;
}
.gallery-cell:hover img{transform:scale(1.03);}

.back-to-projects{text-align:center;margin-top:60px;}
.back-to-projects a{
    font-family:var(--font-thin);font-size:28px;letter-spacing:normal;
    text-transform:none;color:var(--black);transition:color .25s ease;
}
.back-to-projects a:hover{color:var(--gray-dark);}

/* --- Aktuelles (Titel oben, Bild links + Text rechts – wie Original) ------ */
.aktuelles-list{max-width:1120px;margin:0;margin-left:8%;padding:0 0 100px;}
.aktuelles-item{margin-bottom:100px;text-align:left;}
.aktuelles-item:last-child{margin-bottom:60px;}
.aktuelles-title{
    font-family:var(--font-bold);font-weight:400;font-size:30px;line-height:36px;
    margin:0 0 20px;letter-spacing:normal;text-transform:none;text-align:left;
}
.aktuelles-body{display:flex;gap:44px;align-items:flex-start;}
.aktuelles-image{flex:0 0 46%;max-width:46%;}
.aktuelles-image img{width:100%;height:auto;display:block;}
.aktuelles-text{flex:1;color:#000;text-align:left;line-height:1.55;}

/* --- Büro ----------------------------------------------------------------- */
.buro-content{max-width:1100px;margin:0 auto;padding:0 20px 80px;text-align:center;}
.buro-content h2{
    font-family:var(--font-bold);font-weight:400;font-size:30px;
    line-height:36px;letter-spacing:normal;margin:0 0 30px;text-transform:uppercase;
}
.buro-content h3{font-family:var(--font-bold);font-size:22px;margin:30px 0 8px;text-align:left;text-transform:none;}
.team{display:flex;flex-wrap:wrap;gap:60px;justify-content:center;margin:60px 0;}
.team-member{width:380px;cursor:pointer;}
.team-member img{width:100%;height:auto;filter:grayscale(0);}
.team-member .tm-name{font-family:var(--font-medium);font-size:20px;margin-top:16px;}
.team-member .tm-role{color:var(--gray-dark);font-size:16px;}
.standorte{display:flex;flex-wrap:wrap;gap:40px;justify-content:center;margin-top:50px;}
.standort{min-width:200px;}
.standort strong{font-family:var(--font-medium);}

/* Vita-Modal */
.vita-modal{position:fixed;inset:0;z-index:200;display:none;background:rgba(255,255,255,.98);overflow:auto;padding:80px 20px;}
.vita-modal.is-open{display:block;}
.vita-inner{max-width:800px;margin:0 auto;text-align:left;}
.vita-close{position:fixed;top:24px;right:34px;font-size:34px;cursor:pointer;background:none;border:0;color:var(--black);}
.vita-modal .vita-row{display:flex;gap:20px;padding:10px 0;border-bottom:1px solid #eee;}
.vita-modal .vita-row .k{min-width:150px;color:var(--gray-dark);}
.vita-modal .vita-space{height:16px;}
.vita-modal h3{font-family:var(--font-bold);font-size:20px;margin:22px 0 6px;}

/* --- Impressum ------------------------------------------------------------ */
.impressum-content{max-width:900px;margin:0 auto;padding:0 20px 80px;}
.prose h2{font-family:var(--font-medium);font-size:26px;margin:40px 0 14px;}
.prose p{margin:0 0 18px;line-height:1.7;}
.prose a{color:#2a5d34;text-decoration:underline;}

/* --- Footer --------------------------------------------------------------- */
.site-footer{
    position:relative;padding:30px 40px 40px;text-align:center;
}
.footer-mail{color:var(--gray);font-size:24px;letter-spacing:.5px;transition:color .25s;}
.footer-mail:hover{color:var(--black);}
.footer-impressum{
    position:absolute;left:40px;bottom:34px;
    color:var(--gray);font-size:15px;letter-spacing:.5px;transition:color .25s;
}
.footer-impressum:hover{color:var(--black);}

/* --- Lightbox ------------------------------------------------------------- */
.lightbox{position:fixed;inset:0;z-index:300;background:rgba(0,0,0,.92);
    display:flex;align-items:center;justify-content:center;padding:40px;}
.lightbox[hidden]{display:none;}
.lightbox img{max-width:92vw;max-height:88vh;object-fit:contain;width:auto;height:auto;}
.lb-close{position:absolute;top:20px;right:30px;font-size:44px;color:#fff;background:none;border:0;cursor:pointer;line-height:1;}

/* Download-Seite (versteckte Beiträge) – volle Bildschirmhöhe mit Hero-Hintergrund */
.page-download{
    background-size:cover;background-position:center;
    background-attachment:fixed;background-repeat:no-repeat;
}
.page-download::before{
    content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
    background:rgba(255,255,255,.45);   /* leicht transparent: Hero bleibt sichtbar */
}
.page-download .site-main{
    min-height:100vh;display:flex;align-items:center;justify-content:center;
    padding:120px 20px 60px;
}
.download-page{
    max-width:600px;margin:0 auto;text-align:center;
    background:rgba(255,255,255,.95);
    padding:56px 48px;border-radius:6px;
    box-shadow:0 24px 70px rgba(0,0,0,.18);
}
.download-page .project-title{margin:0 0 34px;text-shadow:none;}
.page-download .dl-ready,.page-download .dl-desc{text-shadow:none;}
.page-download .site-footer{background:#fff;position:relative;z-index:1;}
.dl-ready{font-size:20px;color:#1a1a1a;margin:0 0 22px;text-shadow:0 1px 10px rgba(255,255,255,.75);}
.dl-title{font-family:var(--font-bold);font-weight:400;font-size:30px;line-height:36px;margin:0 0 30px;}
.dl-desc{max-width:560px;margin:0 auto 30px;color:#1a1a1a;line-height:1.6;text-shadow:0 1px 10px rgba(255,255,255,.7);}
.page-download .project-title{text-shadow:0 2px 14px rgba(255,255,255,.7);}
.dl-button{display:inline-block;margin-top:10px;padding:16px 40px;background:var(--black);color:#fff;
    font-family:var(--font-thin);font-size:22px;letter-spacing:1px;text-transform:uppercase;
    border-radius:2px;transition:opacity .2s;}
.dl-button:hover{opacity:.8;}

/* Popup-Overlay */
.site-popup{position:fixed;inset:0;z-index:500;background:rgba(0,0,0,.5);
    display:flex;align-items:center;justify-content:center;padding:20px;}
.site-popup[hidden]{display:none;}
.popup-box{background:#fff;max-width:560px;width:100%;max-height:88vh;overflow:auto;
    padding:46px 42px;border-radius:6px;position:relative;box-shadow:0 30px 80px rgba(0,0,0,.35);}
.popup-close{position:absolute;top:12px;right:18px;font-size:32px;line-height:1;
    background:none;border:0;cursor:pointer;color:#333;}
.popup-close:hover{color:#000;}
.popup-title{font-family:var(--font-bold);font-weight:400;font-size:26px;line-height:1.2;margin:0 0 18px;}
.popup-content{line-height:1.6;color:#1a1a1a;}
.popup-content p{margin:0 0 12px;}
.popup-content h2,.popup-content h3{font-family:var(--font-medium);margin:18px 0 8px;}
.popup-content a{color:#2a5d34;text-decoration:underline;}
.popup-pdf{display:inline-block;margin-top:24px;background:var(--black);color:#fff;
    padding:14px 32px;font-family:var(--font-thin);font-size:18px;letter-spacing:1px;
    text-transform:uppercase;border-radius:2px;transition:opacity .2s;}
.popup-pdf:hover{opacity:.85;}
@media (max-width:560px){.popup-box{padding:40px 24px;}}

.error-page{max-width:800px;margin:0 auto;padding:80px 20px;text-align:center;}
.empty-note{text-align:center;color:var(--gray-dark);}

/* --- Responsive ----------------------------------------------------------- */
@media (max-width:1100px){
    .project-grid{grid-template-columns:repeat(2,1fr);}
    .site-header{padding:20px 24px 24px;}
    .header-inner{gap:18px;}
    .site-nav ul{gap:24px;}
    .site-nav a{font-size:19px;letter-spacing:.5px;}
}
@media (max-width:900px){
    .site-nav ul{gap:16px;}
    .site-nav a{font-size:17px;}
}
@media (max-width:820px){
    .site-header{padding:16px 20px 24px;}
    .logo{font-size:19px;white-space:normal;}
    .nav-toggle{display:block;}
    .site-nav{
        position:absolute;top:100%;right:0;left:0;background:#fff;
        transform:translateY(-8px);opacity:0;pointer-events:none;transition:.25s;
        box-shadow:0 10px 30px rgba(0,0,0,.08);
    }
    .site-nav.is-open{opacity:1;transform:none;pointer-events:auto;}
    .site-nav ul{flex-direction:column;gap:0;padding:10px 20px 20px;}
    .site-nav a{font-size:20px;display:block;padding:10px 0;}
    .site-main{padding-top:90px;}
    .filter-bar{gap:20px;}
    .filter{font-size:20px;}
    .project-grid{grid-template-columns:1fr;padding-bottom:50px;}
    .gallery-row{grid-template-columns:1fr !important;}
    :root{--img-h:320px;}
    .project-title{font-size:24px;}
    .footer-impressum{position:static;display:block;margin-top:16px;}
    .aktuelles-list{width:auto;margin-left:auto;margin-right:auto;max-width:100%;padding:0 20px 80px;}
    .aktuelles-item{margin-bottom:70px;}
    .aktuelles-body{flex-direction:column;gap:16px;}
    .aktuelles-image{flex:0 0 100%;max-width:100%;}
}
@media (max-width:1200px){
    .aktuelles-list{margin-left:5%;max-width:calc(100% - 60px);}
}