/*
Theme Name: TerraWerk
Description: One-Page Theme für TerraWerk – Erd-, Pflaster- & Gartenarbeiten (Rhein-Neckar)
Author: TerraWerk
Version: 1.0
*/

:root{
  --bg: #241F19;
  --bg2: #2C261E;
  --text: #F5F0E6;
  --muted: #D9D2C3;
  --submuted: #A69C89;
  --green: #9FAE7E;
  --clay: #C1723E;
  --plate: #C7C1AF;
  --plate-text: #2A2620;
  --rivet: #8C8571;
  --line: rgba(245,240,230,0.14);
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:'Lora', serif;
  line-height:1.6;
  overflow-x:hidden;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  background-image:repeating-linear-gradient(135deg,
    rgba(245,240,230,0.035) 0px, rgba(245,240,230,0.035) 1px,
    transparent 1px, transparent 9px);
  pointer-events:none;
  z-index:0;
}
h1,h2,h3,.brand{font-family:'Poppins',sans-serif;}
.eyebrow{
  font-family: Arial, sans-serif;
  font-weight:700;
  font-size:0.72rem;
  letter-spacing:2.5px;
  text-transform:uppercase;
  color:var(--green);
}
a{color:inherit;text-decoration:none;}
.wrap{max-width:1080px;margin:0 auto;padding:0 6vw;}
section{position:relative;z-index:1;}

/* --- NAV --- */
header{
  position:sticky; top:0; z-index:50;
  background:rgba(36,31,25,0.92);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
nav{
  max-width:1080px;margin:0 auto;padding:0 6vw;
  display:flex;align-items:center;justify-content:space-between;
  height:72px;
}
.brand{font-weight:700;font-size:1.15rem;letter-spacing:0.5px;}
.brand{display:flex; align-items:center; height:100%;}
.brand img{height:44px; width:auto; display:block;}
.brand .dot{color:var(--clay);}
.navlinks{display:flex;gap:2.2rem;font-family:Arial,sans-serif;font-size:0.86rem;letter-spacing:0.3px;}
.navlinks a{opacity:0.85;transition:opacity .2s, color .2s;}
.navlinks a:hover{opacity:1;color:var(--green);}
.nav-cta{
  font-family:Arial,sans-serif;font-weight:700;font-size:0.82rem;
  background:var(--clay);color:var(--bg);
  padding:0.6rem 1.1rem;border-radius:3px;letter-spacing:0.3px;
  white-space:nowrap;
}
.navlinks, .nav-cta{display:flex;}
.burger{display:none;background:none;border:none;color:var(--text);font-size:1.5rem;cursor:pointer;}

@media (max-width:820px){
  .navlinks{display:none;}
  .nav-cta{display:none;}
  .burger{display:block;}
  .navlinks.open{
    display:flex; position:absolute; top:72px; left:0; right:0;
    background:var(--bg2); flex-direction:column; padding:1.2rem 6vw;
    gap:1rem; border-bottom:1px solid var(--line);
  }
}

/* --- HERO --- */
.hero{
  padding:8rem 0 6rem;
  display:grid; grid-template-columns:1.1fr 0.9fr; gap:3rem; align-items:center;
}
.hero h1{
  font-size:clamp(2.6rem, 6vw, 4.2rem);
  line-height:0.98; font-weight:700; text-transform:uppercase;
  letter-spacing:0.5px; margin:0.8rem 0 1.4rem;
}
.hero h1 .accent{color:var(--clay);}
.hero p{color:var(--muted); font-size:1.08rem; max-width:36ch; margin-bottom:2rem;}
.btnrow{display:flex; gap:1rem; flex-wrap:wrap;}
.btn{
  font-family:Arial,sans-serif; font-weight:700; font-size:0.85rem;
  letter-spacing:0.4px; padding:0.85rem 1.6rem; border-radius:3px;
  display:inline-block;
}
.btn-primary{background:var(--clay); color:var(--bg);}
.btn-secondary{border:1px solid var(--line); color:var(--text);}
.btn:hover{filter:brightness(1.08);}

.rig{width:100%; max-width:420px; margin:0 auto; display:block;}
.hero-logo{width:100%; max-width:280px; margin:0 auto 1.2rem; display:block;}
.hero-logo-solo{max-width:380px; margin:0 auto;}
.rig .arm{transform-origin:78px 92px; animation:dig 5s ease-in-out infinite;}
.rig .bucket{transform-origin:150px 150px; animation:scoop 5s ease-in-out infinite;}
@keyframes dig{0%,100%{transform:rotate(0deg);}50%{transform:rotate(-6deg);}}
@keyframes scoop{0%,100%{transform:rotate(0deg);}50%{transform:rotate(10deg);}}
@media (prefers-reduced-motion: reduce){
  .rig .arm, .rig .bucket{animation:none;}
}
@media (max-width:760px){
  .hero{grid-template-columns:1fr; padding:6rem 0 3rem; text-align:left;}
}

.sec-head{margin-bottom:2.6rem;}
.sec-head h2{font-size:1.8rem; font-weight:700; margin-top:0.6rem;}

/* --- ÜBER UNS --- */
#ueber{padding:5rem 0; border-top:1px solid var(--line);}
.ueber-grid{display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:center;}
@media (max-width:760px){.ueber-grid{grid-template-columns:1fr;}}
.ueber-grid p{color:var(--muted); margin-bottom:1rem;}
.plate{
  background:var(--plate); color:var(--plate-text); border-radius:3px;
  padding:1.6rem 1.8rem; position:relative;
}
.plate::before,.plate::after{
  content:""; position:absolute; width:7px; height:7px; border-radius:50%;
  background:var(--rivet);
}
.plate::before{top:10px;left:10px;} .plate::after{bottom:10px;right:10px;}
.plate-title{
  font-family:Arial,sans-serif; font-weight:700; font-size:0.78rem;
  letter-spacing:1.5px; text-transform:uppercase; margin-bottom:0.9rem;
}
.plate-row{
  display:flex; justify-content:space-between; font-family:Arial,sans-serif;
  font-size:0.85rem; padding:0.45rem 0; border-top:1px solid rgba(42,38,32,0.15);
}
.plate-row:first-of-type{border-top:none;}
.plate-row b{font-weight:700;}

/* --- LEISTUNGEN --- */
#leistungen{padding:5rem 0; border-top:1px solid var(--line);}
.cards{display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem;}
@media (max-width:900px){.cards{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.cards{grid-template-columns:1fr;}}
.card{
  background:var(--bg2); border:1px solid var(--line); border-radius:4px;
  padding:1.8rem 1.5rem; transition:transform .25s, border-color .25s;
}
.card:hover{transform:translateY(-4px); border-color:var(--clay);}
.card svg{width:38px; height:38px; margin-bottom:1rem;}
.card h3{font-size:1.02rem; font-weight:600; margin-bottom:0.5rem;}
.card p{color:var(--submuted); font-size:0.88rem; line-height:1.5;}

/* --- ABLAUF --- */
#ablauf{padding:5rem 0; border-top:1px solid var(--line);}
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem;}
@media (max-width:820px){.steps{grid-template-columns:repeat(2,1fr);}}
@media (max-width:520px){.steps{grid-template-columns:1fr;}}
.step{position:relative; padding-left:0;}
.step-num{
  width:34px; height:34px; border-radius:50%; background:var(--clay); color:var(--bg);
  display:flex; align-items:center; justify-content:center;
  font-family:'Poppins',sans-serif; font-weight:700; font-size:0.95rem;
  margin-bottom:0.9rem;
}
.step h3{font-size:0.98rem; font-weight:600; margin-bottom:0.35rem;}
.step p{color:var(--submuted); font-size:0.85rem;}

/* --- REFERENZEN --- */
#referenzen{padding:5rem 0; border-top:1px solid var(--line);}
.ref-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem;}
@media (max-width:760px){.ref-grid{grid-template-columns:1fr;}}
.ref-placeholder{
  aspect-ratio:4/3; border:1.5px dashed var(--line); border-radius:4px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:0.6rem; color:var(--submuted); text-align:center; padding:1.5rem;
}
.ref-placeholder svg{width:30px;height:30px;opacity:0.55;}
.ref-placeholder span{font-family:Arial,sans-serif; font-size:0.78rem; letter-spacing:0.3px;}
.ref-photo{
  aspect-ratio:4/3; border:1px solid var(--line); border-radius:4px;
  overflow:hidden; background:var(--bg2);
}
.ref-photo img{width:100%; height:100%; object-fit:cover; display:block;}

/* --- KONTAKT --- */
#kontakt{padding:5rem 0 6rem; border-top:1px solid var(--line);}
.kontakt-grid{display:grid; grid-template-columns:1fr 1fr; gap:3rem;}
@media (max-width:760px){.kontakt-grid{grid-template-columns:1fr;}}
.kontakt-item{margin-bottom:1.5rem;}
.kontakt-item .label{
  font-family:Arial,sans-serif; font-size:0.72rem; letter-spacing:1.5px;
  text-transform:uppercase; color:var(--green); margin-bottom:0.3rem;
}
.kontakt-item .value{font-size:1.05rem;}
.kontakt-item .value a:hover{color:var(--clay);}
.kontakt-item .value div{margin-bottom:0.2rem;}
form{display:flex; flex-direction:column; gap:0.9rem;}
input,textarea,select{
  background:var(--bg2); border:1px solid var(--line); border-radius:3px;
  padding:0.85rem 1rem; color:var(--text); font-family:'Lora',serif; font-size:0.95rem;
}
input:focus,textarea:focus,select:focus{outline:2px solid var(--green); outline-offset:1px;}
textarea{min-height:110px; resize:vertical;}
form .btn{border:none; cursor:pointer; align-self:flex-start;}

footer{
  padding:2.2rem 0; border-top:1px solid var(--line);
  font-family:Arial,sans-serif; font-size:0.78rem; color:var(--submuted);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:0.6rem;
}
footer a{opacity:0.85;}
footer a:hover{opacity:1; color:var(--green);}

.legal-page{padding-bottom:6rem;}
.legal-block h3{font-size:1.05rem; font-weight:600; margin:2rem 0 0.6rem;}
.legal-block h3:first-child{margin-top:0;}
.legal-block p{color:var(--muted); font-size:0.95rem; margin-bottom:0.8rem;}
.legal-block a{color:var(--green); text-decoration:underline;}
.legal-block a:hover{color:var(--clay);}