:root{
  --bg: #F7F7F3;
  --surface: #FFFFFF;
  --surface-tint: #EEF2E7;
  --ink: #21251F;
  --ink-soft: #565C51;
  --green: #71B100;
  --green-dark: #3F5F0A;
  --orange: #FE9638;
  --border: #DEE2D6;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{
  background:
    radial-gradient(ellipse 900px 600px at 8% -5%, rgba(113,177,0,0.10), transparent 60%),
    radial-gradient(ellipse 800px 700px at 96% 28%, rgba(254,150,56,0.09), transparent 60%),
    radial-gradient(ellipse 900px 700px at 10% 78%, rgba(113,177,0,0.07), transparent 60%),
    var(--bg);
  background-attachment: fixed;
  color: var(--ink);
  font-family: 'Quicksand', sans-serif;
  line-height: 1.6;
}
h1,h2,h3{
  font-family: 'Quicksand', sans-serif;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.15;
}
a{color: inherit; text-decoration:none;}
img{max-width:100%; display:block;}
.wrap{max-width: 1080px; margin: 0 auto; padding: 0 32px;}

html{scroll-behavior:smooth;}
section[id]{scroll-margin-top: 110px;}
header{
  display:flex; align-items:center; justify-content:space-between;
  padding: 20px 32px; max-width:1080px; margin:0 auto;
}
.logo img{height: 34px; width:auto;}
nav{display:flex; gap:32px; font-size:15px; color:var(--ink-soft);}
.phone-pill{
  display:flex; align-items:center; gap:8px;
  background: var(--orange); color:#4A2A05;
  padding: 10px 18px; border-radius: 8px; font-size:14px; font-weight:500;
}

.nav-toggle{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:40px; height:40px; background:none; border:none; cursor:pointer; padding:8px;
}
.nav-toggle span{width:100%; height:2px; background:var(--ink); border-radius:2px; transition:transform 0.2s ease, opacity 0.2s ease;}
.nav-toggle.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle.is-open span:nth-child(2){opacity:0;}
.nav-toggle.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

.hero{
  display:grid; grid-template-columns: 1.1fr 0.9fr; gap:48px;
  align-items:center; padding: 40px 0 88px;
}
.hero-eyebrow{color:var(--green-dark); font-size:15px; font-weight:500; margin-bottom:14px;}
.hero h1{font-size:44px; letter-spacing:-0.01em; margin-bottom:20px; color: var(--ink);}
.hero p.lead{font-size:17px; color:var(--ink-soft); max-width:440px; margin-bottom:32px;}
.btn-row{display:flex; gap:16px; align-items:center; flex-wrap:wrap;}
.btn-primary{
  background: var(--orange); color:#4A2A05; padding:14px 26px;
  border-radius: 8px; font-size:15px; font-weight:500; display:inline-block;
}
.btn-secondary{color:var(--green-dark); font-size:15px; font-weight:500; border-bottom:1px solid var(--green-dark); padding-bottom:2px;}
.hero-visual-wrap{ position:relative; }
.hero-visual{
  border-radius: 16px; aspect-ratio: 4/5;
  overflow:hidden; position:relative; background: var(--surface-tint);
}
.hero-chip{
  position:absolute; left:20px; bottom:20px;
  background: #fff; border:1px solid var(--border); border-radius:10px; padding:12px 16px;
  display:flex; align-items:center; gap:10px; max-width:220px;
}
.hero-chip .dot{width:10px; height:10px; border-radius:50%; background:var(--green); flex-shrink:0;}
.hero-chip span{font-size:13px; font-weight:500; color:var(--ink); line-height:1.3;}
.hero-visual img{width:100%; height:100%; object-fit:cover;}
.hero-visual .cap{
  position:absolute; left:0; right:0; bottom:0; padding: 20px 24px;
  background: linear-gradient(180deg, rgba(20,25,15,0) 0%, rgba(20,25,15,0.72) 100%);
  color:#fff; font-size:14px; font-weight:500;
}

.section-label{font-size:14px; color: var(--green-dark); font-weight:500; margin-bottom:10px;}

.services-main{padding: 20px 0 64px;}
.services-main h2{font-size:30px; margin-bottom:36px; max-width: 480px;}
.service-grid{display:grid; grid-template-columns: 1.3fr 1fr; gap:24px;}
.service-card{
  border-radius: 16px; padding: 36px; display:flex; flex-direction:column;
  justify-content:space-between; min-height: 300px;
}
.service-card.primary{background: var(--green-dark); color:#fff;}
.service-card.secondary{background: var(--surface-tint); border:1px solid var(--border);}
.service-card h3{font-size:24px; margin-bottom:12px;}
.service-card.primary h3{color:#fff;}
.service-card p{font-size:15px; margin-bottom:20px;}
.service-card.primary p{color:#DCE8C9;}
.service-card.secondary p{color: var(--ink-soft);}
.service-tags{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:24px;}
.tag{font-size:13px; padding:6px 12px; border-radius:999px;}
.service-card.primary .tag{background: rgba(255,255,255,0.16); color:#fff;}
.service-card.secondary .tag{background:#fff; color:var(--green-dark); border:1px solid var(--border);}
.card-cta{font-size:14px; font-weight:500;}
.service-card.primary .card-cta{color:#fff; border-bottom:1px solid rgba(255,255,255,0.5); padding-bottom:2px; width:fit-content;}
.service-card.secondary .card-cta{color:var(--green-dark); border-bottom:1px solid var(--green-dark); padding-bottom:2px; width:fit-content;}

.more-services{padding: 40px 0 80px; border-top:1px solid var(--border);}
.more-services h2{font-size:22px; margin-bottom: 28px;}
.more-grid{display:grid; grid-template-columns: repeat(3, 1fr); gap:32px 24px;}
.more-item{display:flex; flex-direction:column; gap:14px;}
.more-icon{
  width:48px; height:48px; border-radius:12px; background: var(--surface-tint);
  border: 1px solid var(--border);
  display:flex; align-items:center; justify-content:center; padding:10px;
}
.more-icon img{width:100%; height:100%; object-fit:contain;}
.more-item h3{font-size:16px; font-weight:600; font-family:'Quicksand',sans-serif;}
.more-item p{font-size:14px; color: var(--ink-soft);}

.steps{padding: 64px 0; background: var(--surface-tint); border-radius: 24px; margin: 0 0 80px;}
.steps-inner{padding: 0 48px;}
.steps h2{font-size:26px; margin-bottom: 40px;}
.step-row{display:grid; grid-template-columns: repeat(3,1fr); gap:32px;}
.step-num{font-family:'Quicksand',sans-serif; font-weight:700; font-size:26px; color: var(--orange); margin-bottom:10px;}
.step-item h3{font-size:16px; margin-bottom:8px; font-family:'Quicksand',sans-serif; font-weight:600;}
.step-item p{font-size:14px; color:var(--ink-soft);}

.about{display:grid; grid-template-columns: 0.72fr 1.28fr; gap:48px; align-items:start; padding: 0 0 88px;}
.about-photo{border-radius:16px; overflow:hidden; aspect-ratio: 3/4; position:sticky; top:100px;}
.about-photo img{width:100%; height:100%; object-fit:cover;}
.about-meta{font-size:14px; color: var(--ink-soft); margin-bottom:18px;}
.about-text h2{font-size:28px; margin-bottom:10px;}
.about-text p{font-size:15px; color:var(--ink-soft); max-width:620px; margin-bottom:16px;}
.about-text ul{list-style:none; margin: 4px 0 20px; padding:0; max-width:620px;}
.about-text li{
  font-size:15px; color:var(--ink-soft); padding-left:26px; position:relative;
  margin-bottom:10px; line-height:1.5;
}
.about-text li::before{
  content:""; position:absolute; left:0; top:8px; width:8px; height:8px;
  border-radius:50%; background: var(--orange);
}
.about-text .signoff{color: var(--ink); font-weight:500;}

.testimonial{padding: 0 0 88px; text-align:left;}
.testimonial blockquote{
  font-family:'Quicksand',sans-serif; font-size:24px; font-weight:500;
  color: var(--ink); max-width: 680px; line-height:1.4; margin-bottom:20px;
}
.testimonial cite{font-size:14px; color: var(--ink-soft); font-style:normal;}

.contact{
  background: var(--green-dark); color:#fff; border-radius: 16px;
  padding: 56px 48px; margin-bottom: 64px;
  display:grid; grid-template-columns: 1fr 1fr; gap:48px;
}
.contact h2{color:#fff; font-size:28px; margin-bottom:14px;}
.contact p{color:#DCE8C9; font-size:15px; margin-bottom:24px; max-width:380px;}
.contact-info{font-size:15px; color:#fff; margin-bottom:10px;}
.form-mock{display:flex; flex-direction:column; gap:12px;}
.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;}

.lightbox-trigger{cursor:zoom-in;}
.lightbox-overlay{
  position:fixed; inset:0; background:rgba(20,25,15,0.92); z-index:2000;
  display:flex; align-items:center; justify-content:center; padding:40px; cursor:zoom-out;
}
.lightbox-overlay[hidden]{display:none;}
.lightbox-img{max-width:90vw; max-height:90vh; border-radius:10px; box-shadow:0 20px 60px rgba(0,0,0,0.5); cursor:zoom-out;}
.lightbox-close{
  position:absolute; top:16px; right:20px; background:none; border:none; color:#fff;
  font-size:36px; line-height:1; cursor:pointer; padding:8px;
}
.form-notice{border-radius:10px; padding:12px 14px; font-size:14px; font-weight:500;}
.form-notice-success{background:rgba(113,177,0,0.18); color:#fff;}
.form-notice-error{background:rgba(220,60,40,0.22); color:#fff;}
.form-extras{
  display:flex; flex-direction:column; gap:10px; padding:12px 16px;
  background: rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.18); border-radius:12px;
}
.form-extras[hidden]{display:none;}
.form-extras-label{font-size:13px; color:#DCE8C9; font-weight:500;}
.form-extra-row{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;}
.form-checkbox{display:flex; align-items:center; gap:8px; font-size:14px; color:#fff; cursor:pointer; font-family:'Quicksand',sans-serif;}
.form-checkbox input{accent-color: var(--orange); width:16px; height:16px; cursor:pointer;}
.form-qty{
  width:84px; background: rgba(255,255,255,0.10); border:1px solid rgba(255,255,255,0.22);
  border-radius:8px; padding:8px 10px; font-size:14px; color:#fff; font-family:'Quicksand',sans-serif;
}
.form-qty[hidden]{display:none;}
.form-qty::placeholder{color:#E7EFDA;}
.form-field{
  background: rgba(255,255,255,0.10); border:1px solid rgba(255,255,255,0.22);
  border-radius:12px; padding:14px 16px; font-size:14px; color:#fff;
  font-family:'Quicksand',sans-serif; line-height:1.5;
}
.form-field::placeholder{color:#E7EFDA;}
select.form-field option{color:#21251F;}
.form-submit{
  background: var(--orange); color: #4A2A05; border-radius:8px;
  padding:14px; text-align:center; font-weight:500; font-size:15px; margin-top:6px;
  border:none; width:100%; cursor:pointer; font-family:inherit;
}

footer{padding: 32px; text-align:center; font-size:13px; color: var(--ink-soft); border-top:1px solid var(--border);}

/* Innenseiten (Galerie, Impressum, Datenschutz) */
.page-hero{padding: 48px 0 40px;}
.page-hero h1{font-size:36px; margin-bottom:14px;}
.page-hero p{font-size:16px; color:var(--ink-soft); max-width:600px;}

.gallery-grid{display:grid; grid-template-columns: repeat(3, 1fr); gap:20px; padding: 0 0 88px;}
.gallery-item{border-radius:16px; overflow:hidden; aspect-ratio: 4/5; background:var(--surface-tint); border:1px solid var(--border);}
.gallery-item img{width:100%; height:100%; object-fit:cover;}
.gallery-item.icon-tile{display:flex; align-items:center; justify-content:center; padding:40px;}
.gallery-item.icon-tile img{width:100%; height:100%; object-fit:contain;}

.story-intro{padding: 0 0 10px; max-width:720px;}

.project-grid{display:grid; grid-template-columns: repeat(3, 1fr); gap:24px; padding: 0 0 20px;}
.project-card{
  display:flex; flex-direction:column; border-radius:16px; overflow:hidden;
  background: var(--surface-tint); border:1px solid var(--border);
}
.project-card-img{aspect-ratio:4/3; background:var(--border);}
.project-card-img img{width:100%; height:100%; object-fit:cover;}
.project-card-body{padding:20px;}
.project-card-body h2{font-size:18px; margin-bottom:8px;}
.project-card-body p{font-size:14px; color:var(--ink-soft); margin-bottom:14px;}
.project-card .card-cta{color:var(--green-dark); font-weight:500; font-size:14px;}
.story-section{padding: 36px 0; border-top:1px solid var(--border);}
.story-section:first-of-type{border-top:none; padding-top:0;}
.story-date{font-size:13px; color:var(--green-dark); font-weight:600; text-transform:uppercase; letter-spacing:0.04em; margin-bottom:8px;}
.story-section h2{font-size:22px; margin-bottom:10px;}
.story-section p{font-size:15px; color:var(--ink-soft); max-width:680px; margin-bottom:20px;}
.story-grid{display:grid; grid-template-columns: repeat(3, 1fr); gap:16px;}
.story-photo{border-radius:14px; overflow:hidden; aspect-ratio:4/3; background:var(--surface-tint); border:1px solid var(--border);}
.story-photo img{width:100%; height:100%; object-fit:cover;}
.story-video{border-radius:14px; overflow:hidden; border:1px solid var(--border); background:#000; grid-column: span 1;}
.story-video video{width:100%; height:100%; object-fit:cover; display:block;}

.legal{padding: 0 0 88px; max-width:760px;}
.legal h2{font-size:22px; margin: 32px 0 12px;}
.legal h2:first-child{margin-top:0;}
.legal p, .legal li{font-size:15px; color:var(--ink-soft); margin-bottom:12px;}
.legal ul{padding-left:22px; margin-bottom:12px;}
.legal a.inline{color:var(--green-dark); text-decoration:underline;}

@media (max-width: 760px){
  .hero{grid-template-columns:1fr;}
  .service-grid{grid-template-columns:1fr;}
  .more-grid{grid-template-columns:1fr;}
  .step-row{grid-template-columns:1fr;}
  .contact{grid-template-columns:1fr;}
  .about{grid-template-columns:1fr;}
  .about-photo{position:static;}
  .gallery-grid{grid-template-columns: 1fr 1fr;}
  .story-grid{grid-template-columns: 1fr 1fr;}
  .project-grid{grid-template-columns: 1fr;}
  .hero h1{font-size:34px;}

  header{position:relative; flex-wrap:wrap;}
  .nav-toggle{display:flex; order:2;}
  .phone-pill{order:3;}
  nav{
    display:none; order:4; width:100%;
    position:absolute; top:100%; left:0; right:0;
    background: var(--surface); border:1px solid var(--border); border-radius:12px;
    margin-top:8px; padding:8px; flex-direction:column; gap:2px;
    box-shadow: 0 12px 24px rgba(33,37,31,0.12); z-index:500;
  }
  nav.nav-open{display:flex;}
  nav a{padding:12px 14px; border-radius:8px;}
  nav a:active, nav a:hover{background: var(--surface-tint);}
}

/* Hover-Farben (Logo-Grün/-Orange) – immer aktiv, unabhängig von Bewegungs-Einstellungen */
.btn-primary:hover{background-color: var(--green);}
.phone-pill:hover{background-color: var(--green);}
.form-submit:hover{background-color: var(--green);}

.wa-button{background: var(--orange); color:#4A2A05; box-shadow:0 6px 20px rgba(254,150,56,0.45);}
.wa-button:hover{background: var(--green);}

.btn-whatsapp{background: var(--orange); color:#4A2A05;}
.btn-whatsapp:hover{background: var(--green);}
.btn-secondary{position:relative;}
.btn-secondary::after{content:""; position:absolute; left:0; bottom:-1px; width:0; height:1px; background: var(--orange);}
.btn-secondary:hover{color: var(--orange);}
.btn-secondary:hover::after{width:100%;}
.card-cta{transition:none;}
.service-card.secondary .card-cta:hover{color: var(--orange); border-color: var(--orange);}
.service-card.primary .card-cta:hover{color: var(--orange); border-color: var(--orange);}
.project-card:hover .card-cta{color: var(--orange);}
nav a:hover{color: var(--orange);}

@media (prefers-reduced-motion: no-preference){
  .reveal{opacity:0; transform: translateY(14px) scale(0.94); transition: opacity 0.7s ease, transform 0.7s ease;}
  .reveal.is-visible{opacity:1; transform: translateY(0) scale(1);}

  .btn-primary{transition: background-color 0.25s ease, transform 0.2s ease, box-shadow 0.2s ease;}
  .btn-primary:hover{transform: translateY(-2px); box-shadow: 0 8px 18px rgba(63,95,10,0.25);}

  .phone-pill{transition: background-color 0.25s ease, transform 0.2s ease;}
  .phone-pill:hover{transform: translateY(-2px);}

  .form-submit{transition: background-color 0.25s ease, transform 0.2s ease;}
  .form-submit:hover{transform: translateY(-2px);}

  .wa-button{transition: background-color 0.25s ease;}
  .btn-whatsapp{transition: background-color 0.25s ease, transform 0.2s ease;}
  .btn-whatsapp:hover{transform: translateY(-2px);}

  .btn-secondary{transition: color 0.25s ease;}
  .btn-secondary::after{transition: width 0.25s ease;}

  .card-cta{transition: color 0.25s ease;}

  nav a{transition: color 0.2s ease;}

  .service-card{transition: box-shadow 0.2s ease, transform 0.2s ease;}
  .service-card:hover{box-shadow: 0 6px 16px rgba(33,37,31,0.08); transform: translateY(-2px);}

  .project-card{transition: box-shadow 0.2s ease, transform 0.2s ease;}
  .project-card:hover{box-shadow: 0 6px 16px rgba(33,37,31,0.08); transform: translateY(-2px);}
  .project-card .card-cta{transition: color 0.25s ease;}

  .about-photo img{transition: transform 0.4s ease;}
  .about-photo:hover img{transform: scale(1.02);}

  .scroll-scale{transform-origin:center; transition: transform 0.15s linear; will-change: transform;}

  @keyframes waPulse{
    0%, 100% { box-shadow: 0 6px 20px rgba(254,150,56,0.45); transform: scale(1); }
    50% { box-shadow: 0 6px 28px rgba(254,150,56,0.65); transform: scale(1.05); }
  }
  .wa-button{ animation: waPulse 2.6s ease-in-out infinite; }
}