:root{
    --ink:#1c2620;         /* tiefes Waldgrün-Anthrazit */
    --ink-2:#2b3a30;
    --paper:#f6f2ea;       /* warmes Off-White */
    --paper-2:#efe9dc;
    --line:#d7cbb4;
    --line-soft:#e6dcc7;
    --accent:#9a5a2b;      /* Holz-Braun / Nuss */
    --accent-2:#b8703a;
    --accent-dark:#7c471f;
    --gold:#bfa14e;        /* Messing-Gold */
    --muted:#6b7268;
    --white:#fff;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{font-family:Georgia,'Times New Roman',serif;color:var(--ink);background:var(--paper);line-height:1.66;-webkit-font-smoothing:antialiased}
  .wrap{max-width:1120px;margin:0 auto;padding:0 32px}
  h1,h2,h3{font-weight:700;line-height:1.15;letter-spacing:.2px}
  a{color:inherit;text-decoration:none}
  svg{display:block}
  .eyebrow{font-family:Arial,Helvetica,sans-serif;font-size:12px;font-weight:700;letter-spacing:2.6px;text-transform:uppercase;color:var(--accent)}
  .eyebrow.gold{color:#9c8232}

  .topbar{background:var(--ink);color:#c9d2c8;font-family:Arial,sans-serif;font-size:12.5px}
  .topbar .wrap{display:flex;justify-content:space-between;align-items:center;height:38px;letter-spacing:.4px}

  header{position:sticky;top:0;z-index:50;background:rgba(246,242,234,.94);backdrop-filter:blur(6px);border-bottom:1px solid var(--line)}
  nav{display:flex;justify-content:space-between;align-items:center;height:72px}
  .brand{font-size:21px;font-weight:700;letter-spacing:.6px;display:flex;align-items:center;gap:12px}
  .brand .mark{width:40px;height:40px;background:var(--ink);color:var(--paper);display:flex;align-items:center;justify-content:center;position:relative}
  .brand .mark svg{width:22px;height:22px}
  .brand .mark::after{content:"";position:absolute;inset:4px;border:1px solid rgba(191,161,78,.6)}
  .brand small{display:block;font-family:Arial,sans-serif;font-size:9.5px;letter-spacing:2.4px;text-transform:uppercase;color:var(--muted);font-weight:700}
  .menu{display:flex;gap:32px;font-family:Arial,sans-serif;font-size:14.5px;font-weight:600}
  .menu a{padding:6px 2px;border-bottom:2px solid transparent;transition:.2s}
  .menu a:hover{border-color:var(--accent);color:var(--accent)}
  .btn{font-family:Arial,sans-serif;font-weight:700;font-size:13px;letter-spacing:.4px;display:inline-flex;align-items:center;gap:8px;padding:11px 20px;background:var(--accent);color:var(--white);border:2px solid var(--accent);cursor:pointer;transition:.2s;border-radius:0}
  .btn svg{width:15px;height:15px}
  .btn:hover{background:var(--accent-dark);border-color:var(--accent-dark)}
  .btn.ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
  .btn.ghost:hover{background:var(--ink);color:var(--paper)}
  .burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;border:2px solid var(--ink);background:var(--paper);cursor:pointer;padding:0}
  .burger span{display:block;width:19px;height:2px;background:var(--ink);margin:0 auto;transition:.25s}
  body.nav-open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  body.nav-open .burger span:nth-child(2){opacity:0}
  body.nav-open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

  /* Hero */
  .hero{padding:clamp(46px,6vw,72px) 0 clamp(44px,6vw,66px);border-bottom:1px solid var(--line);position:relative;overflow:hidden}
  .hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:56px;align-items:center}
  .hero h1{font-size:clamp(33px,4.8vw,46px);margin:18px 0 20px}
  .hero p{font-size:clamp(16px,1.7vw,17px);color:var(--ink-2);max-width:470px;margin-bottom:28px}
  .hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:30px}
  .hero-meta{display:flex;gap:30px;border-top:1px solid var(--line);padding-top:22px}
  .hero-meta .n{font-size:26px;font-weight:700;color:var(--accent)}
  .hero-meta .l{font-family:Arial,sans-serif;font-size:11px;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted)}
  .hero-visual{position:relative;height:420px}
  .hv-img{position:absolute;overflow:hidden;box-shadow:0 22px 52px rgba(28,38,32,.28)}
  .hv-img .frame{position:absolute;inset:11px;border:1px solid rgba(246,242,234,.5)}
  .hv-img .cap{position:absolute;left:15px;bottom:15px;color:var(--paper);font-family:Arial,sans-serif;font-size:11px;letter-spacing:1.4px;text-transform:uppercase}
  .hv-main{width:70%;height:74%;top:0;right:0;background:linear-gradient(150deg,#2b3a30,#1c2620)}
  .hv-sub{width:46%;height:44%;bottom:0;left:0;background:linear-gradient(150deg,#9a5a2b,#7c471f)}
  .hv-badge{position:absolute;left:5%;top:6%;background:var(--paper);padding:14px 20px;box-shadow:0 12px 30px rgba(28,38,32,.2);z-index:5;border-left:3px solid var(--accent)}
  .hv-badge .s{font-family:Arial,sans-serif;font-size:10px;letter-spacing:1.4px;text-transform:uppercase;color:var(--muted)}
  .hv-badge .b{font-size:19px;font-weight:700;color:var(--ink)}

  section{padding:clamp(50px,7vw,78px) 0}
  .sec-head{max-width:620px;margin-bottom:clamp(34px,4.5vw,48px)}
  .sec-head h2{font-size:clamp(27px,3.6vw,34px);margin:14px 0}
  .sec-head p{color:var(--muted);font-size:16.5px}
  .sec-head.center{margin-left:auto;margin-right:auto;text-align:center}

  #leistungen{background:var(--paper-2)}
  .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
  .card{background:var(--white);border:1px solid var(--line-soft);padding:32px 28px;transition:.25s;position:relative}
  .card::before{content:"";position:absolute;left:0;top:0;width:0;height:3px;background:var(--accent);transition:.3s}
  .card:hover{transform:translateY(-4px);box-shadow:0 20px 42px rgba(28,38,32,.1)}
  .card:hover::before{width:100%}
  .card .ic{width:52px;height:52px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--accent);margin-bottom:16px;background:var(--paper)}
  .card .ic svg{width:28px;height:28px}
  .card .num{font-family:Arial,sans-serif;font-size:11px;font-weight:700;color:var(--gold);letter-spacing:2px;margin-bottom:8px}
  .card h3{font-size:20px;margin-bottom:10px}
  .card p{color:var(--muted);font-size:15px}

  #projekte .grid{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:210px;gap:18px}
  .proj{position:relative;overflow:hidden;box-shadow:0 12px 30px rgba(28,38,32,.14)}
  .proj .inner{position:absolute;inset:0;transition:.4s}
  .proj:hover .inner{transform:scale(1.05)}
  .proj .meta{position:absolute;left:0;right:0;bottom:0;padding:20px;background:linear-gradient(transparent,rgba(28,38,32,.84));color:var(--paper)}
  .proj .meta .k{font-family:Arial,sans-serif;font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--gold);margin-bottom:4px}
  .proj .meta .t{font-size:18px;font-weight:700}
  .proj.wide{grid-column:span 2}
  .pj1{background:linear-gradient(150deg,#2b3a30,#1c2620)}
  .pj2{background:linear-gradient(150deg,#9a5a2b,#b8703a)}
  .pj3{background:linear-gradient(150deg,#3a4a3d,#2b3a30)}
  .pj4{background:linear-gradient(150deg,#7c471f,#9a5a2b)}
  .pj5{background:linear-gradient(150deg,#232f27,#374a3c)}

  #ueber .about-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:56px;align-items:center}
  .about-visual{position:relative;height:420px}
  .av-main{position:absolute;inset:0 28px 28px 0;background:linear-gradient(150deg,#2b3a30,#1c2620);overflow:hidden}
  .av-main .frame{position:absolute;inset:14px;border:1px solid rgba(246,242,234,.4)}
  .av-main .label{position:absolute;left:20px;bottom:20px;color:var(--paper);font-family:Arial,sans-serif;letter-spacing:1.5px;font-size:11px;text-transform:uppercase}
  .av-accent{position:absolute;right:0;bottom:0;width:44%;height:44%;background:var(--accent)}
  .about-text h2{font-size:clamp(24px,3.4vw,32px);margin-bottom:18px}
  .about-text p{color:var(--ink-2);font-size:16px;margin-bottom:16px}
  .sign{font-family:Georgia,serif;font-style:italic;font-size:20px;color:var(--accent-dark);margin-top:8px}

  .quote-band{background:var(--ink);color:var(--paper);text-align:center}
  .quote-band .wrap{padding:clamp(50px,6vw,68px) 32px}
  .quote-band .q{font-size:clamp(20px,2.6vw,27px);line-height:1.42;max-width:820px;margin:0 auto 20px;font-style:italic}
  .quote-band .who{font-family:Arial,sans-serif;font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:var(--gold)}
  .quote-band .stars{color:var(--gold);font-size:18px;letter-spacing:4px;margin-bottom:20px}

  #kontakt{background:var(--paper-2)}
  .contact-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:52px}
  .contact-info p{color:var(--ink-2);margin-bottom:24px;font-size:16px}
  .contact-info .row{display:flex;gap:15px;margin-bottom:20px;align-items:flex-start}
  .contact-info .ic{width:42px;height:42px;flex-shrink:0;background:var(--ink);color:var(--paper);display:flex;align-items:center;justify-content:center}
  .contact-info .ic svg{width:20px;height:20px}
  .contact-info b{display:block;font-family:Arial,sans-serif;font-size:10.5px;letter-spacing:1.3px;text-transform:uppercase;color:var(--muted);margin-bottom:3px}
  .contact-info .row span{color:var(--ink)}
  .form-wrap{background:var(--white);border:1px solid var(--line-soft);padding:36px}
  form{display:grid;gap:18px}
  .field-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
  label{font-family:Arial,sans-serif;font-size:11px;font-weight:700;letter-spacing:1.1px;text-transform:uppercase;display:block;margin-bottom:7px;color:var(--ink-2)}
  input,textarea{width:100%;padding:13px 15px;background:var(--paper);border:1px solid var(--line);color:var(--ink);font-family:Arial,sans-serif;font-size:14.5px;border-radius:0;transition:.2s}
  input:focus,textarea:focus{outline:none;border-color:var(--accent);background:var(--white)}
  textarea{min-height:120px;resize:vertical}
  form .btn{justify-self:start}

  footer{background:var(--ink);color:#97a096;font-family:Arial,sans-serif;font-size:13.5px;padding:50px 0 28px}
  .foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:36px;padding-bottom:30px;border-bottom:1px solid rgba(255,255,255,.1)}
  .foot-brand{font-family:Georgia,serif;font-size:20px;color:var(--paper);margin-bottom:10px}
  footer h4{color:var(--paper);font-size:12px;letter-spacing:1.3px;text-transform:uppercase;margin-bottom:14px}
  footer a{display:block;color:#97a096;padding:5px 0}
  footer a:hover{color:var(--paper)}
  .copy{padding-top:20px;text-align:center;color:#727b71;font-size:12.5px}

  @media(max-width:1024px){
    .cards{grid-template-columns:1fr 1fr}
    .cards .card:last-child{grid-column:1/-1}
    .hero-grid{gap:40px}
  }
  @media(max-width:900px){
    .burger{display:flex}
    .topbar{display:none}
    .menu{position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;background:var(--paper);border-bottom:1px solid var(--line);box-shadow:0 20px 40px rgba(28,38,32,.12);padding:6px 0;display:none}
    body.nav-open .menu{display:flex}
    .menu a{padding:15px 32px;border-bottom:1px solid var(--line-soft);font-size:16px}
    .hero-grid,#ueber .about-grid,.contact-grid{grid-template-columns:1fr;gap:42px}
    #projekte .grid{grid-auto-rows:200px}
    .hero-visual,.about-visual{height:380px;max-width:500px}
    /* Farbige Abschnittstrennung auf dem Handy */
    #leistungen,#projekte,#ueber,#kontakt{border-top:7px solid var(--accent)}
    #projekte,#kontakt{border-top-color:var(--gold)}
    #ueber{background:var(--paper-2)}
    #leistungen .eyebrow,#projekte .eyebrow,#ueber .eyebrow,#kontakt .eyebrow{
      display:inline-block;margin-bottom:4px;padding:5px 12px;background:var(--ink);color:var(--paper)}
    #projekte .eyebrow.gold{background:var(--gold);color:var(--ink)}
    .hero h1{font-size:34px}
    .sec-head h2,.about-text h2{font-size:28px}
    .hero p,.sec-head p,.about-text p,.card p{font-size:16px}
  }
  @media(max-width:600px){
    .wrap{padding:0 22px}
    .cards,#projekte .grid{grid-template-columns:1fr}
    .cards .card:last-child{grid-column:auto}
    .proj.wide{grid-column:span 1}
    #projekte .grid{grid-auto-rows:180px}
    .field-row{grid-template-columns:1fr}
    .hero-actions{flex-wrap:wrap;gap:12px}
    .hero-meta{gap:20px}
    .nav-cta{display:none}
    .foot-grid{grid-template-columns:1fr;gap:26px}
    .form-wrap{padding:24px}
    .hero-visual,.about-visual{height:340px}
  }
  @media(max-height:520px) and (orientation:landscape){
    .hero{padding:32px 0}
    .hero-visual,.about-visual{height:290px}
    section{padding:44px 0}
  }