:root { --dark:#26241f; --dark2:#302d26; --green:#397b2c; --sage:#a8be7d; --ink:#292824; --cream:#f8f7f3; --line:#deded8; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--cream); font:16px/1.55 Arial,Helvetica,sans-serif; }
a { color:inherit; }
a:focus-visible,button:focus-visible { outline:3px solid #b1d47d; outline-offset:3px; }
button { font:inherit; }
.container { width:min(92%,1280px); margin-inline:auto; }
.skip-link { position:absolute; left:-999px; top:0; z-index:100; background:white; padding:12px; }
.skip-link:focus { left:0; }
.header { background:#23221f; color:white; position:relative; z-index:10; }
.header-inner { min-height:98px; display:flex; align-items:center; gap:28px; }
.logo { min-width:210px; display:flex; align-items:center; gap:10px; text-decoration:none; color:white; font:14px/1.1 Georgia,serif; }
.logo strong { font-size:18px; }
.logo-symbol { width:53px; height:53px; display:grid; place-items:center; border:3px solid #9d7a50; border-radius:50%; font:35px Georgia,serif; color:#a9c882; }
.navigation { display:flex; justify-content:center; align-items:center; gap:clamp(10px,1.55vw,26px); flex:1; }
.navigation a { text-decoration:none; }
.home-link,.nav-label>a { font-size:12px; font-weight:700; text-transform:uppercase; white-space:nowrap; }
.navigation a:hover { color:#b6d38d; }
.nav-item { position:relative; padding:15px 0; }
.nav-label { display:flex; align-items:center; }
.expand { background:none; border:0; color:inherit; padding:4px; cursor:pointer; }
.subnav { display:none; position:absolute; top:100%; left:-14px; min-width:195px; max-height:65vh; overflow-y:auto; padding:7px 0; background:#fff; color:var(--ink); box-shadow:0 18px 35px #0004; border-top:3px solid var(--green); }
.nav-item:hover .subnav,.nav-item:focus-within .subnav,.nav-item.expanded .subnav { display:block; }
.subnav a { display:block; padding:8px 16px; font-size:14px; }
.subnav a:hover { background:#edf3e8; color:var(--green); }
.header-contact { white-space:nowrap; text-decoration:none; text-transform:uppercase; font-size:11px; font-weight:700; background:var(--green); padding:13px 17px; }
.header-contact:hover,.button.solid:hover { background:#2c6421; }
.mobile-menu { display:none; }
.hero { background:var(--dark2); color:#fff; overflow:hidden; }
.hero-grid { display:grid; grid-template-columns:1fr 1fr; min-height:520px; }
.hero-copy { padding:clamp(58px,7vw,100px) 6% clamp(60px,7vw,100px) 0; align-self:center; }
.overline { color:var(--sage); font-size:13px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; margin:0 0 12px; }
.hero h1,.projects h2,.craft h2,.page-head h1,.contact-box h2 { font-family:Georgia,'Times New Roman',serif; font-weight:400; line-height:1.09; }
.hero h1 { font-size:clamp(43px,5vw,70px); letter-spacing:-.035em; margin:0 0 18px; }
.hero-copy>p:not(.overline) { max-width:420px; margin:0; color:#e5e3df; }
.hero-actions { display:flex; gap:12px; flex-wrap:wrap; margin-top:27px; }
.button { display:inline-flex; align-items:center; justify-content:space-between; gap:22px; min-height:45px; padding:12px 18px; text-decoration:none; font-size:12px; font-weight:700; text-transform:uppercase; }
.button.solid { background:var(--green); color:white; }
.button.line { border:1px solid #afafa9; color:white; }
.button.line:hover { background:#ffffff1c; }
.hero-image { min-height:520px; background:#574e40 url('assets/hero.jpg') center/cover no-repeat; position:relative; }
.hero-image::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,var(--dark2) 0%,#302d2640 22%,transparent 55%); pointer-events:none; }
.hero-image span { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.benefits { display:grid; grid-template-columns:repeat(3,1fr); background:white; padding-top:30px; padding-bottom:30px; }
.benefits article { display:flex; gap:16px; padding:10px 25px; border-right:1px solid var(--line); }
.benefits article:last-child { border:0; }
.benefit-icon { font-size:47px; color:var(--green); line-height:1; }
.benefits h2 { font-size:13px; text-transform:uppercase; margin:0 0 4px; }
.benefits p { font-size:14px; color:#575752; margin:0; }
.projects { text-align:center; color:white; background:#25241f; padding:45px 0 50px; }
.projects h2 { font-size:clamp(32px,3.5vw,45px); margin:0 0 18px; }
.filters { display:flex; justify-content:center; flex-wrap:wrap; gap:8px; margin-bottom:25px; }
.filters button { background:none; color:white; border:0; cursor:pointer; font-size:11px; font-weight:700; text-transform:uppercase; padding:8px 13px; }
.filters button.selected,.filters button:hover { background:var(--green); }
.project-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; margin-bottom:23px; }
.project-card { min-height:225px; text-decoration:none; background:linear-gradient(140deg,#a69e8f,#d4cabc); color:#38352d; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:10px; padding:12px; transition:transform .2s; }
.project-card:hover { transform:translateY(-4px); }
.project-card[hidden] { display:none; }
.tone-2 { background:linear-gradient(140deg,#c5b6a5,#e2d9cd); }
.tone-3 { background:linear-gradient(140deg,#abae9e,#d1d3c3); }
.tone-4 { background:linear-gradient(140deg,#a89883,#d9c8b3); }
.tone-5 { background:linear-gradient(140deg,#a49d92,#c3b8a8); }
.image-icon { font-size:44px; opacity:.65; }
.project-label { font-size:12px; font-weight:700; text-transform:uppercase; }
.center-button { width:max-content; margin:auto; }
.craft { display:grid; grid-template-columns:35% 1fr; gap:5%; padding-top:62px; padding-bottom:62px; background:white; }
.craft h2 { font-size:clamp(34px,3.8vw,51px); margin:0 0 13px; }
.craft-copy>p:not(.overline) { color:#555; }
.craft ul { padding:0; list-style:none; font-size:14px; line-height:2; margin:20px 0 25px; }
.craft li::before { content:'✓'; background:var(--green); color:white; border-radius:50%; display:inline-grid; place-items:center; width:17px; height:17px; font-size:11px; margin-right:9px; }
.craft-images { display:flex; flex-direction:column; gap:7px; min-height:370px; }
.image-placeholder { display:grid; place-items:center; border:1px dashed #9f9e94; background:repeating-linear-gradient(135deg,#d7d4cc,#d7d4cc 18px,#d0cdc4 18px,#d0cdc4 36px); color:#56534c; text-transform:uppercase; font-size:12px; font-weight:700; letter-spacing:.08em; }
.craft-main { flex:3; }
.craft-small { display:grid; grid-template-columns:repeat(4,1fr); gap:7px; flex:1; }
.footer { background:#24231f; color:#eee; padding-top:43px; }
.footer-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:30px; padding-bottom:35px; }
.footer-grid>div:not(:last-child) { border-right:1px solid #56554e; padding-right:22px; }
.footer-logo { font:16px/1.15 Georgia,serif; color:white; }
.footer-grid h2 { font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:#a5c581; margin:0 0 8px; }
.footer-grid p,.footer-grid address { font-size:13px; font-style:normal; margin:0 0 16px; }
.footer-grid a,.legal a { text-decoration:none; }
.footer-grid a:hover,.legal a:hover { color:#a5c581; }
.footer-direction { font-size:13px; }
.legal { display:flex; justify-content:space-between; gap:15px; flex-wrap:wrap; border-top:1px solid #4d4b45; padding-top:17px; padding-bottom:19px; font-size:11px; text-transform:uppercase; }
.legal span { display:flex; gap:25px; }
.page-head { background:#35352f; color:white; padding:65px 0; }
.page-head h1 { font-size:clamp(40px,5vw,65px); margin:0; }
.page-head p:last-child { margin:12px 0 0; }
.page-body { min-height:500px; padding-top:33px; padding-bottom:70px; }
.breadcrumb { color:#666; font-size:13px; margin-bottom:28px; }
.breadcrumb a { color:var(--green); text-decoration:none; }
.page-body>h2 { font:400 30px Georgia,serif; margin-top:55px; }
.four-images { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin:25px 0; }
.four-images .image-placeholder { aspect-ratio:4/3; }
.topic-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.topic-grid a { background:white; border:1px solid #e0e0da; padding:15px 18px; text-decoration:none; font-weight:700; }
.topic-grid a:hover { color:var(--green); border-color:var(--green); }
.contact-box { background:#e9ece4; text-align:center; padding:34px; margin-top:55px; }
.contact-box h2 { font-size:32px; margin:0 0 17px; }
@media(max-width:1160px) {
  .header-inner { gap:12px; }
  .logo { min-width:165px; font-size:11px; }
  .logo strong { font-size:15px; }
  .logo-symbol { width:42px; height:42px; font-size:26px; }
  .navigation { gap:9px; }
  .home-link,.nav-label>a { font-size:10px; }
  .header-contact { font-size:10px; padding:11px; }
}
@media(max-width:850px) {
  .header-inner { min-height:78px; justify-content:space-between; }
  .mobile-menu { display:block; color:white; background:none; border:1px solid #aaa; padding:8px 12px; cursor:pointer; }
  .header-contact { display:none; }
  .navigation { display:none; position:absolute; top:78px; left:0; right:0; background:#fafaf7; color:var(--ink); max-height:calc(100vh - 78px); overflow:auto; padding:13px 4% 24px; box-shadow:0 15px 30px #0005; }
  .navigation.open { display:block; }
  .home-link,.nav-item { display:block; padding:10px 0; border-bottom:1px solid #ddd; }
  .home-link,.nav-label>a { font-size:15px; }
  .nav-label { justify-content:space-between; }
  .expand { color:var(--ink); font-size:20px; padding:0 15px; }
  .subnav { position:static; box-shadow:none; border:0; max-height:none; padding:3px 0; }
  .nav-item:hover .subnav,.nav-item:focus-within .subnav { display:none; }
  .nav-item.expanded .subnav { display:block; }
  .hero-grid { grid-template-columns:1fr; }
  .hero-copy { padding:60px 0; }
  .hero-image { min-height:320px; order:-1; }
  .hero-image::after { background:linear-gradient(0deg,var(--dark2),transparent 25%); }
  .benefits { grid-template-columns:1fr; }
  .benefits article { border-right:0; border-bottom:1px solid var(--line); padding:17px 5px; }
  .benefits article:last-child { border:0; }
  .project-grid { grid-template-columns:repeat(3,1fr); }
  .craft { grid-template-columns:1fr; }
  .craft-images { min-height:360px; }
  .footer-grid { grid-template-columns:repeat(2,1fr); }
  .footer-grid>div:nth-child(2) { border-right:0; }
  .four-images { grid-template-columns:repeat(2,1fr); }
}
/* Fotos im Ordner bilder ersetzen die neutralen Bildplätze automatisch. */
.project-card,.image-placeholder { position:relative; overflow:hidden; }
.project-card>img,.image-placeholder>img { position:absolute; inset:0; visibility:hidden; width:100%; height:100%; object-fit:cover; }
.project-card.has-image>img,.image-placeholder.has-image>img { visibility:visible; }
.project-card>img { z-index:0; }
.project-card .image-icon,.project-card .project-label { position:relative; z-index:1; }
.project-card.has-image .image-icon,.image-placeholder.has-image>span { display:none; }
.project-card.has-image .project-label { align-self:stretch; margin-top:auto; color:white; text-shadow:0 1px 3px #000; background:#171714a8; padding:7px; }
.image-placeholder.has-image { border:0; background:none; }
@media(max-width:550px) {
  .hero h1 { font-size:44px; }
  .hero-image { min-height:240px; }
  .project-grid { grid-template-columns:repeat(2,1fr); }
  .project-card { min-height:165px; }
  .craft-images { min-height:270px; }
  .footer-grid { grid-template-columns:1fr; gap:15px; }
  .footer-grid>div { border-right:0!important; border-bottom:1px solid #56554e; padding-bottom:12px; }
  .topic-grid { grid-template-columns:1fr; }
  .four-images { gap:9px; }
}

/* Neues Treppenmotiv: ausschließlich die textfreie obere Fotofläche ist sichtbar.
   Die Bildhöhe ist bewusst größer als der Abschnitt, damit darunter liegende
   Bestandteile der Vorlage bei jeder Bildschirmgröße außerhalb bleiben. */
.hero { position:relative; min-height:max(560px,43vw); isolation:isolate; }
.hero::before { content:""; position:absolute; inset:0; z-index:-2; background:#3a3026 url('assets/hero-source.jpg') center top / auto 365% no-repeat; }
.hero::after { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,#171714e8 0%,#171714b0 36%,#17171430 76%,transparent); }
.hero-grid { display:block; min-height:inherit; }
.hero-copy { max-width:720px; padding:clamp(70px,8vw,125px) 0; }
.hero-image { display:none; }
@media(max-width:850px) {
  .hero { min-height:550px; }
  .hero::before { background-position:45% top; }
  .hero::after { background:linear-gradient(90deg,#171714df,#1717148c); }
  .hero-copy { padding:75px 0; }
}
.logo {
  min-width: 260px;
  display: flex;
  align-items: center;
  text-decoration: none;
}

.logo img {
  display: block;
  width: auto;
  height: 80px;
  max-width: 280px;
  object-fit: contain;
}

@media(max-width:1160px) {
  .logo img {
    height: 52px;
    max-width: 220px;
  }
}

@media(max-width:850px) {
  .logo img {
    height: 48px;
    max-width: 200px;
  }
}