:root { --ink:#273442; --cream:#f8fafb; --sand:#edf0f1; --sage:#65786f; --orange:#b9c5b1; --line:rgba(39,52,66,.18); }
* { box-sizing:border-box; } html { scroll-behavior:smooth; font-size:112.5%; } body { margin:0; color:var(--ink); background:var(--cream); font:400 1rem/1.65 "DM Sans",Arial,sans-serif; } a { color:inherit; text-decoration:none; } h1,h2,h3,p { margin-top:0; } h1,h2 { font-family:"Montserrat",Arial,sans-serif; font-weight:700; letter-spacing:-.055em; line-height:1.05; } .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.site-header { height:86px; padding:0 clamp(24px,5vw,76px); display:flex; align-items:center; justify-content:space-between; position:absolute; inset:0 0 auto; z-index:3; color:var(--ink); background:#fff; border-bottom:1px solid var(--line); }.brand { display:flex; align-items:center; gap:11px; }.brand-type { display:flex; flex-direction:column; font-family:"Montserrat",Arial,sans-serif; font-weight:800; line-height:1.05; letter-spacing:.015em; font-size:1.1rem; }.brand-type small { display:flex; align-items:center; gap:6px; font-size:.58rem; text-transform:uppercase; letter-spacing:.13em; margin-top:5px; font-weight:500; }.brand-type small:before { content:""; width:18px; height:18px; flex:0 0 18px; background:var(--ink) url("assets/logo-haus-weiss.svg") center/75% no-repeat; }.brand-type span small { text-transform:none; letter-spacing:0; font-size:.73em; }.brand-mark { font-size:1.15rem; font-weight:700; }.brand-name { font-size:.73rem; text-transform:uppercase; letter-spacing:.18em; }.main-nav { display:flex; align-items:center; gap:29px; font-size:.95rem; }.main-nav a:not(.nav-contact) { opacity:.88; }.nav-contact { border:1px solid var(--ink); padding:9px 15px; }.menu-button { display:none; background:none; border:0; color:var(--ink); }
.hero { min-height:780px; height:100vh; position:relative; display:flex; align-items:flex-end; color:#fff; overflow:hidden; }.hero-image { position:absolute; inset:0; background:linear-gradient(90deg,rgba(39,52,66,.8),rgba(39,52,66,.22)),url("assets/hero-startseite.jpg") center/cover; }.hero-content { position:relative; z-index:1; max-width:760px; padding:0 clamp(24px,9vw,144px) clamp(90px,12vh,130px); }.eyebrow { font-size:.78rem; text-transform:uppercase; letter-spacing:.16em; font-weight:700; margin-bottom:24px; }.hero h1 { font-size:clamp(4rem,8vw,7.5rem); margin-bottom:27px; }.hero h1 em { font-style:italic; color:var(--orange); }.hero-copy { font-size:clamp(1rem,1.4vw,1.22rem); max-width:480px; margin-bottom:37px; }.button { display:inline-flex; align-items:center; gap:24px; padding:14px 21px; font-size:.92rem; font-weight:600; }.button span,.text-link span { font-size:1.2rem; transition:transform .2s; }.button:hover span,.text-link:hover span { transform:translateX(5px); }.button-light { background:var(--orange); color:var(--ink); }.button-dark { color:#fff; background:var(--ink); }.scroll-hint { position:absolute; z-index:1; right:clamp(24px,5vw,76px); bottom:35px; font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; display:flex; gap:11px; align-items:center; }.scroll-hint span { font-size:1.15rem; }
.section { padding:clamp(75px,10vw,150px) clamp(24px,8vw,128px); }.intro-grid { display:grid; grid-template-columns:1.15fr .85fr; gap:10vw; align-items:end; }.intro h2 { font-size:clamp(2.6rem,4.5vw,4.7rem); margin:0; }.intro p:not(.eyebrow),.about p:not(.eyebrow) { font-size:1.14rem; margin-bottom:28px; }.text-link { display:inline-flex; align-items:center; gap:12px; font-size:.93rem; font-weight:600; border-bottom:1px solid currentColor; padding-bottom:4px; }.section-sand { background:var(--sand); }.section-heading { display:flex; justify-content:space-between; gap:50px; align-items:end; margin-bottom:55px; }.section-heading h2 { font-size:clamp(2.6rem,4vw,4.3rem); margin:0; }.section-heading>p { max-width:340px; margin:0 0 7px; }.service-grid { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); }.service-card { padding:31px 31px 10px 0; min-height:330px; display:flex; flex-direction:column; border-right:1px solid var(--line); }.service-card:not(:first-child) { padding-left:31px; }.service-card:last-child { border:0; }.service-number { font-size:.75rem; color:var(--sage); font-weight:700; }.service-card h3 { font:700 2.1rem/1.1 "Montserrat",Arial,sans-serif; letter-spacing:-.045em; margin:48px 0 17px; }.service-card p { max-width:310px; }.service-card .text-link { margin-top:auto; align-self:flex-start; }
.projects { background:#fff; }.project-heading { margin-bottom:44px; }.project-grid { display:grid; grid-template-columns:1.35fr .65fr; grid-template-rows:260px 260px; gap:16px; }.project { position:relative; overflow:hidden; min-height:230px; color:#fff; background-size:cover; background-position:center; }.project:after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(15,20,15,.6),transparent 65%); }.project-one { grid-row:span 2; background-image:url("https://images.unsplash.com/photo-1600585154340-be6161a56a0c?auto=format&fit=crop&w=1200&q=80"); }.project-two { background-image:url("https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?auto=format&fit=crop&w=1000&q=80"); }.project-three { background-image:url("https://images.unsplash.com/photo-1618221195710-dd6b41faaea6?auto=format&fit=crop&w=1000&q=80"); }.project-info { z-index:1; position:absolute; bottom:25px; left:25px; }.project-info p { text-transform:uppercase; letter-spacing:.13em; font-size:.73rem; margin-bottom:4px; }.project-info h3 { font:500 1.7rem/1.1 "Playfair Display",Georgia,serif; margin:0; }.project-note { font-size:.78rem; color:#5b635b; margin:20px 0 0; }
.projects { background:#fff; }.project-heading { margin-bottom:44px; }.project-grid { display:grid; grid-template-columns:1.35fr .65fr; grid-template-rows:260px 260px; gap:16px; }.project { position:relative; overflow:hidden; min-height:230px; color:#fff; background-size:cover; background-position:center; }.project:after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(15,20,15,.6),transparent 65%); }.project-one { grid-row:span 2; background-image:url("assets/ernetschwil/20260623_124128.jpg"); }.project-two { background-image:url("assets/anbau-efh/kartenbild.jpg"); }.project-three { background-image:url("assets/neubau-efh/fertig-2.jpg"); }.project-four { grid-column:span 2; background-image:url("assets/umbau-efh/ausblick.jpg"); }.project-five { grid-column:span 2; background-image:url("assets/umbau-3d-planung/bestand.jpg"); }.project-info { z-index:1; position:absolute; bottom:25px; left:25px; }.project-info p { text-transform:uppercase; letter-spacing:.13em; font-size:.73rem; margin-bottom:4px; }.project-info h3 { font:700 1.55rem/1.15 "Montserrat",Arial,sans-serif; letter-spacing:-.04em; margin:0; }.project-link { display:inline-block; margin-top:16px; font-size:.84rem; font-weight:700; opacity:0; transform:translateY(8px); transition:.2s; }.project:hover .project-link { opacity:1; transform:translateY(0); }.project-note { font-size:.78rem; color:#5b635b; margin:20px 0 0; }
.project-page { background:#fff; }.project-header { position:relative; }.back-link { font-size:.9rem; font-weight:600; }.project-hero-detail { position:relative; height:min(73vh,830px); min-height:530px; overflow:hidden; color:#fff; background:var(--ink); }.project-hero-detail img { width:100%; height:100%; object-fit:cover; object-position:center 52%; display:block; }.project-hero-detail:after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(22,30,36,.72),rgba(22,30,36,.08)); }.project-hero-overlay { position:absolute; z-index:1; left:clamp(24px,8vw,128px); bottom:clamp(58px,9vw,115px); }.project-hero-overlay h1 { font-size:clamp(3.1rem,6.5vw,6.4rem); margin:0; }.project-intro-detail { display:grid; grid-template-columns:1fr 1fr; gap:12vw; }.project-intro-detail h2,.gallery h2 { font-size:clamp(2.4rem,4vw,4rem); margin:0; }.project-intro-detail>div:last-child { max-width:540px; font-size:1.14rem; }.project-facts { margin:0 clamp(24px,8vw,128px); padding:30px 0; display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }.project-facts div { padding-right:30px; }.project-facts span { display:block; font-size:.75rem; text-transform:uppercase; letter-spacing:.13em; margin-bottom:10px; color:#65786f; font-weight:700; }.project-facts strong { font-size:1rem; }.gallery-heading { margin-bottom:45px; }.gallery-grid { display:grid; grid-template-columns:repeat(3,1fr); grid-auto-rows:300px; gap:15px; }.gallery-image { border:0; background:var(--sand); padding:0; overflow:hidden; cursor:zoom-in; }.gallery-image img { width:100%; height:100%; display:block; object-fit:cover; transition:transform .4s; }.gallery-image:hover img { transform:scale(1.035); }.gallery-image.wide { grid-column:span 2; }.gallery-image.tall { grid-row:span 2; }.project-cta { text-align:center; background:var(--ink); color:#fff; padding:105px 24px; }.project-cta h2 { font-size:clamp(2.6rem,5vw,5rem); margin-bottom:30px; }.lightbox { display:none; align-items:center; justify-content:center; position:fixed; z-index:10; inset:0; padding:45px; background:rgba(10,15,18,.94); }.lightbox.open { display:flex; }.lightbox img { max-width:100%; max-height:100%; object-fit:contain; }.lightbox-close { position:absolute; right:20px; top:12px; border:0; background:transparent; color:#fff; font-size:2.5rem; cursor:pointer; }
.project-story { display:grid; grid-template-columns:1fr 1fr; column-gap:12vw; row-gap:48px; }.project-story h2 { font-size:clamp(2.4rem,4vw,4rem); margin:0; }.project-story-copy,.project-result { max-width:580px; font-size:1.12rem; }.project-services-list { grid-column:1 / -1; border-top:1px solid var(--line); padding-top:30px; }.project-services-list ul { columns:2; column-gap:64px; margin:22px 0 0; padding:0; list-style:none; }.project-services-list li { break-inside:avoid; padding:10px 0; border-bottom:1px solid var(--line); font-weight:500; }
.about { padding:0; display:grid; grid-template-columns:1fr 1fr; background:var(--ink); color:#fff; }.about-image { min-height:670px; background:url("assets/ueber-uns.jpg") center/cover; }.about-content { padding:clamp(75px,10vw,145px) clamp(28px,8vw,125px); align-self:center; }.about h2 { font-size:clamp(2.6rem,4vw,4.2rem); }.contact { background:#b9c5b1; padding:clamp(70px,9vw,120px) clamp(24px,8vw,128px); display:flex; gap:60px; justify-content:space-between; align-items:end; }.contact h2 { font-size:clamp(2.6rem,4vw,4.4rem); max-width:700px; margin-bottom:20px; }.contact p:not(.eyebrow) { max-width:500px; font-size:1.12rem; }.contact-actions { display:flex; flex-direction:column; gap:18px; align-items:flex-start; white-space:nowrap; }.phone { font-size:.88rem; border-bottom:1px solid currentColor; }.site-footer { background:var(--ink); color:#fff; display:flex; justify-content:space-between; align-items:center; padding:27px clamp(24px,5vw,76px); font-size:.82rem; }.site-footer p { margin:0; opacity:.7; }
@media (max-width:750px) { .site-header { height:70px; }.brand-type { font-size:.83rem; }.brand-type small { font-size:.5rem; margin-top:3px; }.main-nav { display:none; position:absolute; top:70px; left:0; right:0; background:#fff; padding:20px 24px 28px; flex-direction:column; align-items:flex-start; gap:18px; }.main-nav.open { display:flex; }.nav-contact { border:0; padding:0; }.menu-button { display:flex; flex-direction:column; gap:5px; padding:5px; }.menu-button span:not(.sr-only) { width:24px; height:1px; background:currentColor; }.hero { min-height:650px; }.hero-content { padding-bottom:105px; }.scroll-hint { display:none; }.intro-grid,.about { grid-template-columns:1fr; gap:30px; }.section-heading { display:block; }.section-heading>p { margin-top:22px; }.service-grid { grid-template-columns:1fr; }.service-card,.service-card:not(:first-child) { padding:28px 0; min-height:260px; border-right:0; border-bottom:1px solid var(--line); }.project-grid { grid-template-columns:1fr; grid-template-rows:330px 230px 230px; }.project-one { grid-row:auto; }.about-image { min-height:390px; }.contact { display:block; }.contact-actions { margin-top:35px; }.site-footer { display:block; }.site-footer>* { margin-bottom:12px!important; } }
@media (max-width:750px) { .project-hero-detail { min-height:500px; height:66vh; }.back-link { font-size:.72rem; }.project-intro-detail { grid-template-columns:1fr; gap:28px; }.project-facts { grid-template-columns:1fr; gap:24px; }.gallery-grid { grid-template-columns:1fr 1fr; grid-auto-rows:190px; gap:9px; }.gallery-image.wide { grid-column:span 2; }.gallery-image.tall { grid-row:span 2; }.lightbox { padding:24px; } }
@media (max-width:750px) { .project-story { grid-template-columns:1fr; gap:28px; }.project-services-list { grid-column:auto; }.project-services-list ul { columns:1; } }

/* Referenz-Karussell */
.project-carousel { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:14px; }
.project-viewport { overflow-x:auto; scrollbar-width:none; scroll-snap-type:x mandatory; scroll-behavior:smooth; }
.project-viewport::-webkit-scrollbar { display:none; }
.project-carousel .project-grid { display:flex; grid-template-columns:none; grid-template-rows:none; gap:16px; }
.project-carousel .project { flex:0 0 calc((100% - 32px) / 3); min-height:330px; grid-column:auto; grid-row:auto; scroll-snap-align:start; }
.project-carousel .project-six { background-image:url("assets/stroh-und-lehm/wohnraum.jpg"); }
.section-green { background:#b9c5b1; }
.services .service-card h3 { margin-top:10px; }
.contact { display:grid; grid-template-columns:minmax(0,1fr); }
.contact-address { margin-top:29px; font-style:normal; font-size:1rem; line-height:1.6; }
.contact-map { grid-column:1 / -1; height:260px; margin-top:28px; overflow:hidden; border:1px solid rgba(39,52,66,.2); }
.contact-map iframe { width:100%; height:100%; border:0; display:block; }
.person-link { display:flex; align-items:center; gap:13px; max-width:310px; margin-top:31px; padding-top:18px; border-top:1px solid rgba(255,255,255,.36); color:#fff; }
.person-link img { width:49px; height:49px; object-fit:cover; object-position:center 26%; border-radius:50%; }
.person-link span { display:flex; flex-direction:column; gap:2px; font-size:.94rem; }
.person-link small { font-size:.77rem; opacity:.74; }
.person-link b { margin-left:auto; font-size:1.15rem; transition:transform .2s; }
.person-link:hover b { transform:translateX(5px); }
.brand-type small:before { content:none; }
.profile-page { background:#fff; }.profile-hero { display:grid; grid-template-columns:minmax(320px,.85fr) minmax(0,1.15fr); min-height:610px; background:var(--cream); }.profile-hero-image { min-height:560px; overflow:hidden; background:var(--sand); }.profile-hero-image img { width:100%; height:100%; display:block; object-fit:cover; object-position:center 20%; }.profile-hero-content { align-self:center; padding:clamp(55px,9vw,135px); }.profile-hero-content h1 { font-size:clamp(3.4rem,6.4vw,6.6rem); margin:0 0 18px; }.profile-hero-content>p:not(.eyebrow) { font-size:1.14rem; margin-bottom:34px; }.profile-content { display:grid; grid-template-columns:.6fr 1.4fr; gap:12vw; }.profile-facts { border-top:1px solid var(--line); padding-top:22px; }.profile-facts dl { margin:26px 0 0; }.profile-facts dl div { padding:13px 0; border-bottom:1px solid var(--line); }.profile-facts dt { color:var(--sage); font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; font-weight:700; }.profile-facts dd { margin:5px 0 0; font-size:1rem; }.profile-details section+section { margin-top:72px; }.profile-details h2,.profile-strengths h2 { font-size:clamp(2.3rem,4vw,4.3rem); margin:0 0 25px; }.profile-details ul { margin:0; padding:0; list-style:none; }.profile-details li { padding:15px 0; border-top:1px solid var(--line); font-size:1.1rem; }.profile-details li:last-child { border-bottom:1px solid var(--line); }.profile-strengths { background:#b9c5b1; }.profile-strengths>p:not(.eyebrow) { max-width:880px; font-size:1.18rem; line-height:1.65; }.profile-strengths h2 { max-width:850px; }.profile-strengths>p:last-child { margin-bottom:0; }
.carousel-button { width:42px; height:42px; display:grid; place-items:center; border:1px solid var(--line); border-radius:50%; background:#fff; color:var(--ink); font-size:1.3rem; cursor:pointer; transition:background .2s, color .2s, opacity .2s; }
.carousel-button:hover:not(:disabled) { background:var(--ink); color:#fff; }
.carousel-button:disabled { opacity:.3; cursor:default; }
@media (max-width:750px) { .project-carousel { grid-template-columns:1fr auto auto; gap:8px; }.project-viewport { grid-column:1 / -1; grid-row:1; }.project-carousel .project { flex-basis:88%; min-height:300px; }.carousel-button { grid-row:2; width:38px; height:38px; }.carousel-prev { grid-column:2; }.carousel-next { grid-column:3; } }
@media (max-width:750px) { .contact { display:block; }.contact-map { height:230px; } }
@media (max-width:750px) { .profile-hero,.profile-content { grid-template-columns:1fr; }.profile-hero-image { min-height:440px; }.profile-hero-content { padding:65px 24px; }.profile-content { gap:55px; }.profile-details section+section { margin-top:55px; } }

/* Rechtliche Seiten & Footer-Links */
.legal-page { max-width:860px; }
.legal-page h1 { font-size:clamp(2.6rem,5vw,4.6rem); margin:0 0 45px; }
.legal-page section { margin-bottom:42px; max-width:720px; }
.legal-page h2 { font-size:1.4rem; margin-bottom:13px; }
.legal-page p { font-size:1.05rem; line-height:1.7; }
.legal-page a { text-decoration:underline; text-underline-offset:3px; }
.footer-legal { display:flex; gap:20px; font-size:.82rem; }
.footer-legal a { opacity:.7; }
.footer-legal a:hover { opacity:1; }
.project-page .site-footer { border-top:1px solid rgba(255,255,255,.14); }

/* Mobile: lange Wörter in Überschriften trennen, Hero-Titel skalieren */
@media (max-width:750px) {
  h2, h3, .legal-page h1 { overflow-wrap:break-word; hyphens:auto; }
  .hero h1 { font-size:clamp(3rem,16vw,4.5rem); }
  .profile-hero-content h1 { font-size:clamp(2.6rem,15vw,4.5rem); }
}

/* FAQ */
.faq .section-heading { margin-bottom:34px; }
.faq-list { border-top:1px solid var(--line); }
.faq-item { border-bottom:1px solid var(--line); }
.faq-item summary { list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:28px; padding:23px 0; font-weight:600; font-size:1.13rem; line-height:1.4; }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary:after { content:"+"; flex:0 0 auto; font-size:1.8rem; font-weight:300; line-height:1; color:var(--sage); transition:transform .25s; }
.faq-item[open] summary:after { transform:rotate(45deg); }
.faq-item p { margin:0 0 26px; max-width:840px; }
@media (max-width:750px) { .faq-item summary { font-size:1.02rem; padding:19px 0; gap:16px; } }