/* =========================================================
   BLANQ Lab — Mobile Fahrzeugaufbereitung
   Stylesheet
   ========================================================= */

/* ---------- Tokens ---------- */
:root{
  --white:#ffffff;
  --cream:#F7F3E9;
  --beige:#EDE2C7;
  --beige-soft:#F2EAD7;
  --ink:#152019;
  --ink-soft:#4E594F;
  --green:#1F5C3F;
  --green-light:#6FBE8C;
  --green-dark:#0F3324;
  --green-mist:#E7F0E9;

  --ff-display:'Poppins', sans-serif;
  --ff-body:'Inter', sans-serif;

  --shadow-sm: 0 4px 14px -6px rgba(21,32,25,.12);
  --shadow-md: 0 16px 40px -16px rgba(21,32,25,.22);
  --shadow-lg: 0 30px 70px -20px rgba(21,32,25,.28);

  --radius-lg: 26px;
  --radius-md: 18px;
  --radius-sm: 12px;
  --radius-pill: 100px;

  --ease: cubic-bezier(.22,1,.36,1);
  --container-w: 1180px;
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing: border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family: var(--ff-body);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
button{ font: inherit; cursor:pointer; border:none; background:none; color:inherit; }
input, textarea{ font: inherit; }

h1,h2,h3,h4{
  font-family: var(--ff-display);
  color: var(--ink);
  font-weight:600;
  line-height:1.15;
  letter-spacing:-.01em;
}
h1{ font-size: clamp(2.3rem, 6vw, 4.2rem); font-weight:600; }
h2{ font-size: clamp(1.9rem, 4.4vw, 3rem); }
h3{ font-size: clamp(1.15rem, 2.4vw, 1.5rem); }
h4{ font-size: 1.05rem; font-weight:600; }

p{ color: var(--ink-soft); }

.container{
  width:100%;
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 0 24px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}

:focus-visible{ outline: 2px solid var(--green); outline-offset: 3px; border-radius: 4px; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding: 15px 30px;
  border-radius: var(--radius-pill);
  font-family: var(--ff-display);
  font-size: .95rem;
  font-weight:500;
  letter-spacing:.01em;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease), color .35s var(--ease);
  white-space: nowrap;
}
/* .btn-primary{
  background: var(--green);
  color: var(--white);
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}
.btn-primary:hover{
  background: var(--green-dark);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.btn-primary:active{ transform: translateY(0); } */
.btn-primary{
  background: var(--green);
  color: var(--white);
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
  animation: btn-bounce 2s ease-in-out infinite;
  margin-top: 20px
}
.btn-primary:hover{
  background: var(--green-dark);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  animation-play-state: paused;
}
.btn-primary:active{ transform: translateY(0); }

@keyframes btn-bounce {
  5%, 32%, 90% {
    transform: translateY(0);
  }
  8% {
    transform: translateY(-8px);
  }
  16% {
    transform: translateY(0);
  }
  24% {
    transform: translateY(-8px);
  }
}


.btn-sweep:hover::after{ left: 130%; }

.btn-secondary{
  background: transparent;
  color: var(--green-dark);
  border: 1.5px solid var(--green);
}
.btn-secondary:hover{
  background: var(--green);
  color: var(--white);
  transform: translateY(-3px);
}

/* ---------- Section labels ---------- */
.section-label{
  display:inline-block;
  font-family: var(--ff-display);
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.16em;
  color: var(--green);
  background: var(--green-mist);
  padding: 6px 16px;
  border-radius: var(--radius-pill);
  margin-bottom: 16px;
}

.section{ padding: 90px 0; position:relative; }
.section-mist{ background: var(--green-mist); }
.section-header{
  text-align:center;
  max-width: 620px;
  margin: 0 auto 56px;
}
.section-header p{ margin-top:12px; font-size:1.05rem; }

/* ---------- Scroll reveal ---------- */
.reveal{
  opacity:0;
  transform: translateY(28px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.reveal.in-view{ opacity:1; transform: translateY(0); }

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Header ---------- */
.site-header{
  position: fixed;
  top:0; left:0; right:0;
  z-index: 1000;
  padding: 18px 0;
  transition: background .4s var(--ease), box-shadow .4s var(--ease), padding .4s var(--ease);
}
.site-header.scrolled{
  background: rgba(247,243,233,.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 6px 24px -14px rgba(21,32,25,.2);
  padding: 12px 0;
}
.container-header{
  width:100%;
  max-width: var(--container-w);
  margin:0 auto;
  padding: 0 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 20px;
}
.logo img{ height: 70px; width:auto; }

.main-nav{
  display:flex;
  align-items:center;
  gap: 34px;
}
.main-nav ul{ display:flex; gap: 30px; }
.main-nav ul a{
  font-family: var(--ff-display);
  font-size:.95rem;
  font-weight:500;
  color: var(--ink);
  position:relative;
  padding: 4px 0;
}
.main-nav ul a::after{
  content:"";
  position:absolute; left:0; bottom:-2px;
  width:0; height:2px;
  background: var(--green);
  transition: width .35s var(--ease);
}
.main-nav ul a:hover::after{ width:100%; }
.main-nav ul a:hover{ color: var(--green-dark); }

.burger-btn{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:6px;
  width: 42px; height:42px;
  z-index: 1200;
  position:relative;
}
.burger-btn span{
  display:block;
  width: 24px; height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform .4s var(--ease), opacity .3s var(--ease);
}
.burger-btn.active span:nth-child(1){ transform: translateY(8px) rotate(45deg); }
.burger-btn.active span:nth-child(2){ opacity:0; }
.burger-btn.active span:nth-child(3){ transform: translateY(-8px) rotate(-45deg); }

.nav-overlay{
  position: fixed; inset:0;
  background: rgba(15,51,36,.35);
  backdrop-filter: blur(2px);
  opacity:0; visibility:hidden;
  transition: opacity .4s var(--ease), visibility .4s var(--ease);
  z-index: 1050;
}
.nav-overlay.active{ opacity:1; }

/* ---------- Hero ---------- */
.hero{
  position:relative;
  padding: 170px 0 110px;
  background:
    radial-gradient(ellipse 900px 500px at 85% -10%, rgba(111,190,140,.28), transparent 60%),
    linear-gradient(180deg, var(--cream) 0%, var(--beige-soft) 100%);
  overflow:hidden;
}
.hero-glow{
  position:absolute;
  top: -180px; right: -160px;
  width: 520px; height: 520px;
  background: radial-gradient(circle, rgba(31,92,63,.18), transparent 70%);
  border-radius:50%;
  filter: blur(10px);
  animation: floatGlow 9s ease-in-out infinite;
}
@keyframes floatGlow{
  0%,100%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(-30px, 30px) scale(1.06); }
}
.hero-content{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 50px;
  align-items: stretch;
}
.hero-text{
  max-width: 680px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  z-index: 1000;
  margin-top: 40px;
}
.hero-image{
  position:relative;
  min-height:0;
  border-radius: var(--radius-lg);
  overflow:hidden;
  box-shadow: var(--shadow-lg);
}
.hero-image img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
  transition: transform .6s var(--ease);
}
.hero-image:hover img{ transform: scale(1.04); }

/* Десктоп: левый край фото плавно растворяется в фоне секции */
@media (min-width: 861px){
  .hero-image{
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 16%, black 100%);
    mask-image: linear-gradient(90deg, transparent 0%, black 16%, black 100%);
  }
}
@media (max-width: 860px){
  .hero{ padding: 100px 0 0; }

  .hero-content{ grid-template-columns: 1fr; }

  .hero-image{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .hero-image img{ object-position: center top; }

  .hero-image::after{
    content:"";
    position:absolute; inset:0;
    background: linear-gradient(180deg, rgba(8,20,14,.35) 0%, rgba(8,20,14,.68) 45%, var(--cream) 97%);
  }
  .hero-glow{ z-index: 1; }

  .hero-content{ position:relative; z-index:2; }

  .hero-text{
    max-width: 100%;
    text-align: center;
    align-items: center;
  }
  .hero-text h1{

    line-height: 1.25;
  }
  .hero-text .eyebrow{ color: rgba(255, 255, 255, .9); }
  .hero-text p{
    color: rgba(255,255,255,.9);
    max-width: 100%;
  }
  .hero-actions{ justify-content: center; }
  .hero-actions .btn-secondary{
    background: rgba(255,255,255,.12);
    color: var(--white);
    border-color: rgba(255,255,255,.55);
  }
}
.eyebrow{
  font-family: var(--ff-display);
  font-size:.9rem;
  font-weight:500;
  letter-spacing:.04em;
  color: var(--green-dark);
  margin-bottom: 18px;
}
.hero-text h1{ 
  margin-bottom: 22px; 
}
.hero-text p{ 
  font-size: 1.1rem; 
  margin-bottom: 8px; 
  max-width: 540px; 
}
.hero-text p:last-of-type{ margin-bottom: 34px; }

.line-shine{
  position:relative;
  display:inline-block;
}
.line-shine::after{
  content:"";
  position:absolute;
  left:-4px; right:-4px; bottom:2px;
  height: .32em;
  background: linear-gradient(90deg, var(--green-light), var(--green));
  opacity:.28;
  border-radius: 3px;
  transform-origin:left;
  animation: wipeIn 1.1s .35s var(--ease) both;
}
@keyframes wipeIn{
  from{ transform: scaleX(0); }
  to{ transform: scaleX(1); }
}

.hero-actions{ display:flex; gap:16px; flex-wrap:wrap; }

.whatsapp-floating{ display:none; }

/* ---------- About ---------- */
.about-header{ text-align:center; max-width: 640px; margin: 0 auto 48px; }
.about-grid{
  display:grid;
  grid-template-columns: 1fr .85fr;
  gap: 60px;
  align-items:center;
}
.about-text p{ font-size: 1.05rem; margin-bottom: 18px; }
.about-text p:last-child{ margin-bottom:0; }
.about-image{
  position:relative;
  border-radius: var(--radius-lg);
  overflow:hidden;
  box-shadow: var(--shadow-lg);
  aspect-ratio: 4/5;
}
.about-image img{ width:100%; height:100%; object-fit:cover; transition: transform .6s var(--ease); }
.about-image:hover img{ transform: scale(1.05); }
.about-image::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(200deg, transparent 60%, rgba(15,51,36,.25));
  pointer-events:none;
}

/* ---------- Why us ---------- */
.why-us-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  margin-bottom: 64px;
}
.why-card{
  background: var(--white);
  border-radius: var(--radius-md);
  padding: 36px 30px;
  box-shadow: var(--shadow-sm);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.why-card:hover{ transform: translateY(-8px); box-shadow: var(--shadow-md); }
.why-card img{ width:48px; height:48px; margin-bottom:20px; }
.why-card h3{ margin-bottom:10px; }
.why-card p{ font-size:.96rem; }

.stats{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  padding-top: 44px;
  border-top: 1px solid rgba(15,51,36,.12);
}
.stat-item{ text-align:center; }
.stat-item strong{
  display:block;
  font-family: var(--ff-display);
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  font-weight:600;
  color: var(--green-dark);
  margin-bottom: 4px;
}
.stat-item span{ font-size:.85rem; color: var(--ink-soft); }

/* ---------- Services ---------- */
.services-grid{
  display:grid;
  align-items: start;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  padding: 0 24px;
  max-width: var(--container-w);
  margin: 0 auto;
}
.service-card{
  background: var(--white);
  border-radius: var(--radius-lg);
  overflow:hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
  display:flex;
  flex-direction:column;
}
.service-card:hover{ transform: translateY(-10px); box-shadow: var(--shadow-lg); }
.service-card.featured{ border: 2px solid var(--green); }

.service-image{ position:relative; aspect-ratio: 4/4; overflow:hidden; }
.service-image img{ width:100%; height:100%; object-fit:cover; transition: transform .6s var(--ease); }
.service-card:hover .service-image img{ transform: scale(1.08); }
.service-image::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(0deg, rgba(15,51,36,.75) 0%, rgba(15,51,36,0) 55%);
  z-index:1;
}
.service-overlay{
  position:absolute; left:0; right:0; bottom:0;
  padding: 20px 22px;
  z-index:2;
  color: var(--white);
}
.service-tag{
  display:inline-block;
  font-family: var(--ff-display);
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.4);
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  margin-bottom: 8px;
  backdrop-filter: blur(4px);
}
.service-tag.premium{ background: var(--green-light); border-color: var(--green-light); color: var(--green-dark); }
.service-overlay h3{ color: var(--white); }

.service-content{ padding: 26px 26px 30px; display:flex; flex-direction:column; flex:1; }
.service-description{ font-size:.95rem; margin-bottom: 18px; }
.service-price{
  font-family: var(--ff-display);
  font-size: 1.8rem;
  font-weight:600;
  color: var(--green-dark);
  margin-bottom: 20px;
}
.service-price span{ font-family: var(--ff-body); font-size:.9rem; font-weight:400; color: var(--ink-soft); margin-right:4px; }

.expand-btn{ width:100%; }
.expand-btn::before{
  content: "+ ";
}
.expand-btn.active::before{ content: "– "; }

.service-details{
  display:grid;
  grid-template-rows: 0fr;
  opacity:0;
  transition: grid-template-rows .5s var(--ease), opacity .4s var(--ease), margin-top .5s var(--ease);
  margin-top:0;
  height: 0;
}
.service-details.open{
  grid-template-rows: 1fr;
  opacity:1;
  margin-top: 30px;
  height: auto;
}
.service-details > div{ overflow:hidden; }
.service-details h4{ font-size:.9rem; color: var(--green-dark); margin-bottom:6px; margin-top:14px; }
.service-details h4:first-child{ margin-top:0; }
.service-details p{ font-size:.92rem; }
.service-list li{
  font-size:.92rem;
  color: var(--ink-soft);
  padding: 5px 0 5px 22px;
  position:relative;
}
.service-list li::before{
  content:"✓";
  position:absolute; left:0; top:5px;
  color: var(--green);
  font-weight:600;
}
.service-gallery{ display:none; }

/* ---------- Weitere Leistungen ---------- */
.addons-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  align-items: start;
}
.addon-card{
  background: var(--white);
  border-radius: var(--radius-lg);
  overflow:hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.addon-card:hover{ transform: translateY(-8px); box-shadow: var(--shadow-lg); }

.addon-image{ position:relative; aspect-ratio: 4/3; overflow:hidden; }
.addon-image img{ width:100%; height:100%; object-fit:cover; }
.addon-badge{
  position:absolute;
  bottom:12px;
  font-family: var(--ff-display);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.06em;
  color: var(--white);
  text-shadow: 0 1px 5px rgba(0,0,0,.45);
}
.addon-badge.before{ left:14px; }
.addon-badge.after{ right:14px; }

.addon-content{ padding: 18px 20px 22px; }
.addon-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  margin-bottom: 14px;
}
.addon-top h3{ font-size:1rem; }
.addon-price{
  font-family: var(--ff-display);
  font-size:.82rem;
  font-weight:600;
  color: var(--green-dark);
  background: var(--green-mist);
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  white-space:nowrap;
}

.addon-expand-btn{
  width:100%;
  background: transparent;
  border: 1.5px solid var(--green);
  color: var(--green-dark);
  border-radius: var(--radius-pill);
  padding: 10px 18px;
  font-family: var(--ff-display);
  font-size:.85rem;
  font-weight:500;
  transition: background .3s var(--ease), color .3s var(--ease);
}
.addon-expand-btn::before{ content:"+ "; }
.addon-expand-btn.active::before{ content:"– "; }
.addon-expand-btn:hover{ background: var(--green); color: var(--white); }

.addon-details{
  display:grid;
  grid-template-rows: 0fr;
  opacity:0;
  transition: grid-template-rows .5s var(--ease), opacity .4s var(--ease), margin-top .5s var(--ease);
  margin-top:0;
}
.addon-details.open{
  grid-template-rows: 1fr;
  opacity:1;
  margin-top: 16px;
}
.addon-details > div{ overflow:hidden; }
.addon-details p{ font-size:.88rem; margin-bottom: 12px; }
.addon-details .btn{ width:100%; padding: 12px 20px; font-size:.85rem; margin-top:0; animation:none; }

/* Responsive */
@media (max-width: 1024px){
  .addons-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px){
  .addons-grid{ grid-template-columns: 1fr; }
}

/* ---------- Gallery marquee ---------- */
.gallery-marquee{
  width:100%;
  overflow:hidden;
  position:relative;
  cursor:grab;
  touch-action: pan-y;
  -webkit-mask-image: linear-gradient(90deg, transparent, black 3%, black 97%, transparent);
  mask-image: linear-gradient(90deg, transparent, black 3%, black 97%, transparent);
}
.gallery-marquee.dragging{ cursor:grabbing; }
.gallery-track{
  display:flex;
  gap: 22px;
  width:max-content;
  padding: 0 24px;
  will-change: transform;
  height: 350px;
}
.gallery-item{
  flex: 0 0 auto;
  width: 340px;
  aspect-ratio: 4/3;
  border-radius: var(--radius-md);
  overflow:hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
  cursor: pointer;
}
.gallery-item:hover{ transform: translateY(-6px); box-shadow: var(--shadow-md); }
.gallery-item img{
  width:100%; height:100%;
  object-fit:cover;
  user-select:none;
  -webkit-user-drag:none;
  pointer-events:none;
}

@media (max-width: 860px){
  .gallery-item{ width: 340px; }
  .gallery-track{ gap: 14px; padding: 0 18px; }
}
@media (max-width: 480px){
  .gallery-item{ width: 340px; }
}

/* ---------- Gedanken (dark pain-points section) ---------- */
.section-dark{ background: var(--green-dark); }
.section-dark .section-label{
  background: rgba(255,255,255,.1);
  color: var(--green-light);
}
.section-dark .section-header h2{ color: var(--cream); }
.section-dark .section-header p{ color: rgba(247,243,233,.72); }

.thoughts-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.thought-card{
  background: var(--cream);
  border-radius: var(--radius-md);
  padding: 36px 28px;
  text-align:center;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.thought-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-lg); }

.thought-num{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  margin-bottom: 18px;
}
.thought-num::before,
.thought-num::after{
  content:"•";
  color: rgba(31,92,63,.4);
  font-size:.8rem;
}
.thought-num span{
  width: 46px; height: 46px;
  border-radius:50%;
  border: 1.5px solid rgba(31,92,63,.35);
  display:flex; align-items:center; justify-content:center;
  font-family: var(--ff-display);
  font-weight:600;
  font-size:.95rem;
  color: var(--green-dark);
}

.thought-card h3{
  font-size: 1.08rem;
  margin-bottom: 14px;
  padding-bottom: 14px;
  position:relative;
}
.thought-card h3::after{
  content:"";
  position:absolute; left:50%; bottom:0; transform: translateX(-50%);
  width: 34px; height: 2px;
  background: rgba(31,92,63,.3);
}
.thought-card p{ font-size:.9rem; }

@media (max-width: 1024px){
  .thoughts-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px){
  .thoughts-grid{ grid-template-columns: 1fr; }
  .thought-card{ padding: 30px 24px; }
}

/* ---------- Mein Versprechen ---------- */
.promise-list{
  display:flex;
  flex-direction:column;
  gap: 14px;
}
.promise-item{
  display:flex;
  align-items:center;
  gap: 28px;
  background: var(--white);
  border-radius: var(--radius-md);
  padding: 26px 32px;
  box-shadow: var(--shadow-sm);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.promise-item:hover{ transform: translateY(-4px); box-shadow: var(--shadow-md); }

.promise-icon{
  width: 60px; height: 60px;
  border-radius:50%;
  background: var(--green-mist);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.promise-icon svg{ width:26px; height:26px; color: var(--green); }

.promise-content h3{ font-size: 1.05rem; margin-bottom: 6px; }
.promise-content p{ font-size:.92rem; }

@media (max-width: 640px){
  .promise-item{
    flex-direction:column;
    align-items:flex-start;
    gap: 16px;
    padding: 24px 22px;
  }
}

/* ---------- Lightbox ---------- */
.lightbox{
  position: fixed; inset: 0;
  background: rgba(10,18,14,.94);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden;
  transition: opacity .35s var(--ease), visibility .35s var(--ease);
  z-index: 2000;
}
.lightbox.active{ opacity:1; visibility:visible; }
.lightbox-img{
  max-width: 88vw; max-height: 82vh;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  opacity:0; transform: scale(.96);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.lightbox.active .lightbox-img{ opacity:1; transform:scale(1); }

.lightbox-close, .lightbox-nav{
  position:absolute;
  border-radius:50%;
  background: rgba(255,255,255,.12);
  color: var(--white);
  display:flex; align-items:center; justify-content:center;
  transition: background .3s var(--ease);
  z-index: 2001;
}
.lightbox-close:hover, .lightbox-nav:hover{ background: rgba(255,255,255,.24); }

.lightbox-close{ top:24px; right:24px; width:46px; height:46px; }
.lightbox-close svg{ width:20px; height:20px; }

.lightbox-nav{ top:50%; transform: translateY(-50%); width:52px; height:52px; }
.lightbox-nav svg{ width:22px; height:22px; }
.lightbox-prev{ left:24px; }
.lightbox-next{ right:24px; }

@media (max-width: 640px){
  .lightbox-img{ max-width: 96vw; max-height: 70vh; }
  .lightbox-close{ top:16px; right:16px; width:40px; height:40px; }
  .lightbox-nav{ width:44px; height:44px; }
  .lightbox-prev{ left:8px; }
  .lightbox-next{ right:8px; }
}

/* ---------- Ablauf steps ---------- */
.process-steps{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 0;
  margin-bottom: 60px;
}

.step{
  flex: 1 1 0;
  min-width:0;
  text-align:center;
  background:none;
  box-shadow:none;
  padding: 0 14px;
  position:static;
  transition: transform .4s var(--ease);
}
.step:hover{ transform: translateY(-6px); box-shadow:none; }

.step-num{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 42px; height:42px;
  border-radius:50%;
  background:none;
  border: 1.5px solid rgba(31,92,63,.35);
  font-family: var(--ff-display);
  font-weight:600;
  font-size:.85rem;
  color: var(--green-dark);
  margin-bottom: 18px;
}

.step-icon{
  width: 60px; height:60px;
  margin: 0 auto 18px;
  display:flex; align-items:center; justify-content:center;
  color: var(--green);
}
.step-icon svg{ width:100%; height:100%; }

.step h3{ font-size:1.05rem; margin-bottom:10px; }
.step p{ font-size:.9rem; }

.step-arrow{
  display:flex;
  align-items:center;
  justify-content:center;
  color: rgba(31,92,63,.3);
  padding-top: 30px;
  flex-shrink:0;
}
.step-arrow svg{ width:24px; height:24px; }

@media (max-width: 1024px){
  .process-steps{ flex-wrap:wrap; row-gap: 40px; }
  .step{ flex: 1 1 40%; }
  .step-arrow{ display:none; }
}
@media (max-width: 640px){
  .process-steps{ flex-direction:column; gap: 34px; }
  .step{ flex: 1 1 auto; }
}


/* ---------- Servicegebiet — real map ---------- */
.service-map{
  height: 520px;
  border-radius: var(--radius-lg);
  overflow:hidden;
  box-shadow: var(--shadow-md);
  background: var(--beige-soft);
}
.service-map .leaflet-container{
  font-family: var(--ff-body);
  background: var(--beige-soft);
}
/* приглушаем стандартные цвета OSM под палитру сайта */
.service-map .leaflet-tile-pane{
  filter: grayscale(38%) sepia(16%) saturate(85%) brightness(1.03) contrast(.95);
}
.service-map .leaflet-control-attribution{
  font-size: 10px;
  background: rgba(255,255,255,.75);
}

.service-map-pin{ position:relative; }
.pin-dot{
  width:18px; height:18px;
  border-radius:50%;
  background: var(--green-dark);
  border: 3px solid var(--white);
  box-shadow: 0 2px 8px rgba(15,51,36,.4);
  position:absolute;
  top:50%; left:50%;
  transform: translate(-50%,-50%);
}
.pin-label{
  position:absolute;
  top: -14px; left:50%;
  transform: translate(-50%,-100%);
  white-space:nowrap;
  background: var(--white);
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  font-family: var(--ff-display);
  font-weight:600;
  font-size:.85rem;
  color: var(--green-dark);
  box-shadow: var(--shadow-sm);
}

@media (max-width: 640px){
  .service-map{ height: 380px; }
}


/* ---------- Ablauf ----------
.process-steps{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  margin-bottom: 60px;
  position:relative;
}
.process-steps::before{
  content:"";
  position:absolute;
  top: 26px; left: 6%; right:6%;
  height: 1px;
  background: repeating-linear-gradient(90deg, rgba(31,92,63,.35) 0 8px, transparent 8px 16px);
}
.step{
  background: var(--white);
  border-radius: var(--radius-md);
  padding: 30px 24px;
  box-shadow: var(--shadow-sm);
  position:relative;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.step:hover{ transform: translateY(-6px); box-shadow: var(--shadow-md); }
.step-num{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 40px; height:40px;
  border-radius:50%;
  background: var(--green);
  color: var(--white);
  font-family: var(--ff-display);
  font-weight:600;
  font-size:.9rem;
  margin-bottom: 16px;
}
.step h3{ margin-bottom:8px; font-size:1.1rem; }
.step p{ font-size:.92rem; }

.process-bottom{
  background: linear-gradient(120deg, var(--green-dark), var(--green));
  color: var(--white);
  border-radius: var(--radius-lg);
  padding: 48px;
  text-align:center;
  box-shadow: var(--shadow-md);
}
.process-bottom h3{ color: var(--white); margin-bottom:12px; }
.process-bottom p{ color: rgba(255,255,255,.85); max-width: 560px; margin: 0 auto; } */

/* ---------- Before / After slider ---------- */
.works .section-header{ margin-bottom: 40px; }
.ba-slider{
  position:relative;
  border-radius: var(--radius-lg);
  overflow:hidden;
}
.ba-track{
  display:flex;
  touch-action: pan-y;
  cursor: grab;
}
.ba-track.dragging{ cursor: grabbing; }
.ba-slide{
  flex: 0 0 100%;
  min-width:0;
}
.ba-pair{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  padding: 6px;
}
.ba-block{
  border-radius: var(--radius-md);
  padding: 40px 26px;
  text-align:center;
  position:relative;
  overflow:hidden;
  min-height: 300px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  user-select:none;
}
.ba-before{
  background: linear-gradient(145deg, #DCD2B6, #C6B999);
  color: var(--ink);
}
.ba-after{
  background: linear-gradient(145deg, var(--green-light), var(--green));
  color: var(--white);
}
.ba-after::before{
  content:"";
  position:absolute; top:0; left:-70%;
  width:45%; height:100%;
  background: linear-gradient(115deg, transparent, rgba(255,255,255,.4), transparent);
  transform: skewX(-18deg);
  animation: baShine 3.2s ease-in-out infinite;
}
@keyframes baShine{
  0%{ left:-70%; }
  45%{ left: 130%; }
  100%{ left: 130%; }
}
.ba-tag{
  font-family: var(--ff-display);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  padding: 5px 14px;
  border-radius: var(--radius-pill);
  margin-bottom: 18px;
  background: rgba(21,32,25,.1);
}
.ba-after .ba-tag{ background: rgba(255,255,255,.22); }
.ba-icon{ width:52px; height:52px; margin-bottom: 16px; opacity:.9; }
.ba-icon svg{ width:100%; height:100%; }
.ba-block h4{ margin-bottom:8px; }
.ba-after h4{ color: var(--white); }
.ba-block p{ font-size:.9rem; max-width: 240px; }
.ba-after p{ color: rgba(255,255,255,.9); }

.ba-arrow{
  position:absolute;
  top:50%; transform: translateY(-50%);
  width:48px; height:48px;
  border-radius:50%;
  background: var(--white);
  box-shadow: var(--shadow-md);
  display:flex; align-items:center; justify-content:center;
  color: var(--green-dark);
  z-index:5;
  transition: background .3s var(--ease), transform .3s var(--ease);
}
.ba-arrow svg{ width:20px; height:20px; }
.ba-arrow:hover{ background: var(--green); color: var(--white); }
.ba-prev{ left: -4px; }
.ba-next{ right: -4px; }

.ba-dots{
  display:flex;
  justify-content:center;
  gap: 9px;
  margin-top: 26px;
}
.ba-dots button{
  width: 9px; height: 9px;
  border-radius:50%;
  background: rgba(31,92,63,.25);
  transition: background .3s var(--ease), transform .3s var(--ease);
}
.ba-dots button.active{ background: var(--green); transform: scale(1.25); }

/* ---------- Reviews slider (outer mechanics) ---------- */
.reviews-slider{ position:relative; margin-top: 8px; }
.reviews-viewport{
  overflow:hidden;
  border-radius: var(--radius-lg);
  cursor: grab;
  touch-action: pan-y;
}
.reviews-viewport:active{ cursor: grabbing; }
.reviews-track{ display:flex; transition: transform .5s var(--ease); }

/* jede .reviews-slide ist eine "Seite" des Sliders mit mehreren Karten nebeneinander */
.reviews-slide{
  flex: 0 0 100%;
  display:flex;
  align-items:flex-start;   /* FIX 1: Karten strecken sich nicht mehr auf gleiche Höhe */
  gap: 26px;
  padding: 4px;
}

/* ---------- Review card ---------- */
.review-card{
  flex: 1 1 0;
  min-width: 0;
  background: var(--white);
  border-radius: var(--radius-md);
  padding: 30px 28px;
  box-shadow: var(--shadow-sm);
  display:flex;
  flex-direction:column;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.review-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-md); }

.review-stars-sm{ color: var(--green-light); letter-spacing:2px; margin-bottom: 14px; font-size:1rem; }

/* FIX 1: kein flex:1 mehr -> Kartenhöhe = tatsächliche Texthöhe */
.review-text{
  font-size:.95rem;
  margin-bottom: 8px;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.review-text.expanded{
  -webkit-line-clamp: unset;
  overflow: visible;
}

.review-more-btn{
  display: none; /* wird per JS nur bei abgeschnittenem Text angezeigt */
  background: none;
  border: none;
  padding: 0;
  margin: 0 0 20px;
  font-family: var(--ff-display);
  font-size: .85rem;
  font-weight: 600;
  color: var(--green-dark);
  cursor: pointer;
  align-self: flex-start;
}
.review-more-btn:hover{ color: var(--green); text-decoration: underline; }

/* FIX 1: festes padding-top:80px ersetzt durch normalen margin-top */
.review-author{
  display:flex;
  align-items:center;
  gap: 12px;
  margin-top: 16px;
  margin-bottom: 14px;
  padding-top: 16px;
  border-top: 1px solid rgba(21,32,25,.08);
}
.review-avatar{
  width: 38px; height: 38px;
  border-radius:50%;
  background: var(--green-dark);
  color: var(--white);
  font-family: var(--ff-display);
  font-weight:600;
  font-size:.9rem;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.review-author h4{ font-size:.9rem; color: var(--ink); margin:0 0 1px; }
.review-time{ font-size:.78rem; color: var(--ink-soft); }

.review-source{
  display:flex; align-items:center; gap:7px;
  font-size:.82rem; color: var(--ink-soft);
  margin-bottom: 16px;
}

/* ---------- FIX 3: Foto-Slider pro Karte ---------- */
.review-photos{
  position:relative;
  aspect-ratio: 1/1;
  border-radius: var(--radius-sm);
  overflow:hidden;
  cursor: grab;
  touch-action: pan-y;
}
.review-photos:active{ cursor: grabbing; }
.review-photos-track{
  display:flex;
  height:100%;
  transition: transform .4s var(--ease);
}

.review-photos:empty{
  display: none;
}
.review-photo{
  flex: 0 0 100%;
  height:100%;
}
.review-photo img{ width:100%; height:100%; object-fit:cover; display:block; }

.review-photos-arrow{
  position:absolute; top:50%; transform: translateY(-50%);
  width:32px; height:32px; border-radius:50%;
  background: rgba(255,255,255,.9);
  box-shadow: var(--shadow-sm);
  display:flex; align-items:center; justify-content:center;
  color: var(--green-dark); border:none; cursor:pointer; z-index:2;
}
.review-photos-arrow svg{ width:16px; height:16px; }
.review-photos-prev{ left:8px; }
.review-photos-next{ right:8px; }

.review-photos-dots{
  position:absolute; bottom:8px; left:0; right:0;
  display:flex; justify-content:center; gap:6px; z-index:2;
}
.review-photos-dots span{
  width:6px; height:6px; border-radius:50%;
  background: rgba(255,255,255,.6);
}
.review-photos-dots span.active{ background: var(--white); }

/* einzelnes Foto -> keine Steuerelemente nötig */
.review-photos.single .review-photos-arrow,
.review-photos.single .review-photos-dots{ display:none; }

/* ---------- Slider-Pfeile & Punkte (außen, für den Haupt-Slider) ---------- */
.reviews-arrow{
  position:absolute;
  top:50%; transform: translateY(-50%);
  width:48px; height:48px;
  border-radius:50%;
  /* background: var(--white);
  box-shadow: var(--shadow-md); */
  display:flex; align-items:center; justify-content:center;
  color: var(--green-dark);
  z-index:5;
  transition: background .3s var(--ease), transform .3s var(--ease);
}
.reviews-arrow svg{ width:20px; height:20px; }
.reviews-arrow:hover{ background: var(--green); color: var(--white); }
.reviews-prev{ left: -22px; }
.reviews-next{ right: -22px; }

@media (max-width: 1160px){
  .reviews-prev{ left: 6px; }
  .reviews-next{ right: 6px; }
}
@media (max-width: 640px){
  .reviews-arrow{ width:40px; height:40px; }
  .reviews-arrow svg{ width:17px; height:17px; }
  .reviews-prev{ left:8px; }
  .reviews-next{ right:8px; }
  .review-card{ padding: 24px 22px; }
}

.reviews-dots{ display:flex; justify-content:center; gap: 9px; margin-top: 26px; }
.reviews-dots button{
  width: 9px; height: 9px; border-radius:50%;
  background: rgba(31,92,63,.25);
  transition: background .3s var(--ease), transform .3s var(--ease);
}
.reviews-dots button.active{ background: var(--green); transform: scale(1.25); }

/* ---------- Reviews summary bar ---------- */
.reviews-summary{
  margin-top: 50px;
  /* background: var(--white);
  border-radius: var(--radius-lg); */
  box-shadow: var(--shadow-sm);
  padding: 30px 36px;
  display:flex; align-items:center; justify-content:space-between;
  gap: 30px; flex-wrap:wrap;
}
.reviews-summary-left{ display:flex; align-items:center; gap: 16px; }
.reviews-summary-rating{ display:flex; align-items:center; gap: 10px; }
.reviews-summary-score{ font-family: var(--ff-display); font-size: 1.5rem; font-weight:600; color: var(--green-dark); }
.reviews-summary-stars{ color: var(--green-light); letter-spacing:2px; }
.reviews-summary-count{ font-size:.85rem; color: var(--ink-soft); }
.reviews-summary-mid{ flex:1; min-width: 220px; }
.reviews-summary-mid strong{ font-family: var(--ff-display); font-size:.98rem; color: var(--ink); display:block; margin-bottom:4px; }
.reviews-summary-mid p{ font-size:.88rem; }
.reviews-summary-btn{ background: var(--green-dark); color: var(--white); padding: 13px 22px; font-size:.88rem; animation:none; margin-top:0; white-space:nowrap; }
.reviews-summary-btn:hover{ background: var(--green); transform: translateY(-3px); }

@media (max-width: 640px){
  .reviews-summary{ padding: 24px 22px; flex-direction:column; align-items:flex-start; }
  .reviews-summary-btn{ width:100%; justify-content:center; }
}

/* ---------- Social ---------- */
.follow-section{ text-align:center; margin-bottom: 40px; }
.social-blocks{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.social-card{
  border-radius: var(--radius-lg);
  padding: 44px 30px;
  text-align:center;
  color: var(--white);
  box-shadow: var(--shadow-md);
  transition: transform .4s var(--ease);
}
.social-card:hover{ transform: translateY(-8px) scale(1.01); }
.social-card h3{ color: var(--white); margin-bottom:6px; }
.social-card p{ color: rgba(255,255,255,.85); margin-bottom: 22px; }
.social-card .btn-primary{ background: rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.5); }
.social-card .btn-primary:hover{ background: var(--white); color: var(--ink); }
.social-card.instagram{ background: linear-gradient(135deg, #5C3A79, #C1467B 45%, #E08A4F); }
.social-card.tiktok{ background: linear-gradient(135deg, var(--ink), var(--green-dark)); }

/* ---------- Kontakt ---------- */
/* .contact-page{
  display:grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 60px;
}
.contact-left h2{ margin: 6px 0 4px; }
.contact-left h4{ color: var(--green-dark); margin-bottom: 16px; font-weight:500; }
.contact-left > p{ margin-bottom: 28px; font-size:1.02rem; }
.contact-lines{ display:flex; flex-direction:column; gap: 16px; margin-bottom: 30px; }
.contact-line{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding: 14px 20px;
  background: var(--white);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
}
.contact-line strong{ font-family: var(--ff-display); font-size:.9rem; }
.contact-line span{ color: var(--ink-soft); font-size:.92rem; }
.contact-follow{ font-size:.92rem; color: var(--ink-soft); }
.contact-follow strong{ color: var(--ink); margin-right:6px; }

.contact-right{
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 38px;
  box-shadow: var(--shadow-md);
}
.contact-note{ font-size:.92rem; margin-bottom: 22px; padding: 14px 16px; background: var(--green-mist); border-radius: var(--radius-sm); }
.contact-note strong{ color: var(--green-dark); }
.contact-form{ display:flex; flex-direction:column; gap: 6px; }
.contact-form label{ font-size:.82rem; font-weight:600; color: var(--ink); margin-top: 12px; }
.contact-form input, .contact-form textarea{
  border: 1.5px solid rgba(21,32,25,.12);
  border-radius: var(--radius-sm);
  padding: 13px 16px;
  background: var(--cream);
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.contact-form input:focus, .contact-form textarea:focus{
  border-color: var(--green);
  background: var(--white);
  outline:none;
}
.contact-form textarea{ min-height: 110px; resize: vertical; }
.contact-form button{ margin-top: 18px; align-self:flex-start; } */



/* ---------- Kontakt ---------- */
.kontakt-card{
  max-width: 720px;
  margin: 0 auto;
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 48px 44px;
  text-align:center;
}

.kontakt-icon{
  width: 78px; height:78px;
  border-radius:50%;
  background: var(--green-mist);
  color: var(--green);
  display:flex; align-items:center; justify-content:center;
  margin: 0 auto 26px;
}

.kontakt-whatsapp-btn{
  width:100%;
  max-width: 460px;
  background: var(--green-dark);
  color: var(--white);
  font-size: 1rem;
  padding: 17px 28px;
  animation:none;
  margin: 0 auto 22px;
}
.kontakt-whatsapp-btn:hover{ background: var(--green); transform: translateY(-3px); }

.kontakt-tagline{
  font-size:.92rem;
  color: var(--ink-soft);
  margin-bottom: 34px;
  position:relative;
  padding-top: 22px;
}
.kontakt-tagline::before{
  content:"";
  position:absolute; top:0; left:50%; transform: translateX(-50%);
  width: 40px; height:1.5px;
  background: rgba(31,92,63,.3);
}

.kontakt-perks{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.kontakt-perk{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 10px;
}
.kontakt-perk svg{ width:26px; height:26px; color: var(--green); }
.kontakt-perk span{ font-size:.85rem; color: var(--ink); line-height:1.3; }

.kontakt-bar{
  max-width: 900px;
  margin: 40px auto 0;
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap: 0;
}
.kontakt-bar-item{
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 10px 28px;
  position:relative;
}
.kontakt-bar-item:not(:last-child)::after{
  content:"";
  position:absolute;
  right:0; top:8px; bottom:8px;
  width:1px;
  background: rgba(21,32,25,.12);
}
.kontakt-bar-item svg{ width:20px; height:20px; color: var(--green); flex-shrink:0; }
.kontakt-bar-item strong{ display:block; font-family: var(--ff-display); font-size:.82rem; color: var(--ink); }
.kontakt-bar-item span{ font-size:.82rem; color: var(--ink-soft); }

@media (max-width: 860px){
  .kontakt-card{ padding: 38px 26px; }
  .kontakt-perks{ grid-template-columns: 1fr 1fr; gap: 26px 16px; }
}
@media (max-width: 640px){
  .kontakt-card{ padding: 32px 20px; }
  .kontakt-perks{ grid-template-columns: 1fr 1fr; }
  .kontakt-bar{ flex-direction:column; align-items:flex-start; gap: 4px; margin-top: 30px; }
  .kontakt-bar-item{ padding: 10px 4px; width:100%; }
  .kontakt-bar-item:not(:last-child)::after{ display:none; }
}

/* ---------- Footer ---------- */
.site-footer{
  background: var(--green-dark);
  color: rgba(255,255,255,.82);
  padding: 70px 0 0;
  margin-top: 40px;
}
.footer-content{
  display:grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 50px;
}
.footer-column h3{ color: var(--white); margin-bottom: 14px; }
.footer-column h4{ color: var(--white); margin-bottom: 16px; font-size:.95rem; letter-spacing:.04em; }
.footer-column p{ color: rgba(255,255,255,.72); font-size:.92rem; margin-bottom: 6px; }
.footer-column ul{ display:flex; flex-direction:column; gap: 10px; }
.footer-column ul a{ color: rgba(255,255,255,.72); font-size:.92rem; transition: color .3s var(--ease); }
.footer-column ul a:hover{ color: var(--green-light); }
.footer-bottom{
  border-top: 1px solid rgba(255,255,255,.12);
  padding: 22px 24px;
  text-align:center;
  font-size:.85rem;
  color: rgba(255,255,255,.55);
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1024px){
  .why-us-grid{ grid-template-columns: 1fr 1fr; }
  .services-grid{ grid-template-columns: 1fr 1fr; }
  .process-steps{ grid-template-columns: 1fr 1fr; }
  .process-steps::before{ display:none; }
  .reviews-grid{ grid-template-columns: 1fr 1fr; }
  .about-grid{ gap: 40px; }
  .footer-content{ grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px){
  .container-header{ padding: 0 20px; }
  .main-nav{
    position: fixed;
    top:0; right:0;
    height: 100vh;
    width: min(320px, 82vw);
    background: var(--cream);
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    gap: 40px;
    padding: 40px;
    transform: translateX(100%);
    transition: transform .5s var(--ease);
    z-index: 1100;
    box-shadow: -20px 0 50px -20px rgba(21,32,25,.3);
  }
  .main-nav.active{ transform: translateX(0); }
  .main-nav ul{ flex-direction:column; gap: 24px; }
  .main-nav ul a{ font-size: 1.2rem; }
  .burger-btn{ display:flex; }

  .hero{ padding: 100px 0 0; }
  .hero-actions{ flex-direction:column; align-items:stretch; }
  .hero-actions .btn{ text-align:center; }

  .about-grid{ grid-template-columns: 1fr; gap: 36px; }
  .about-image{ aspect-ratio: 16/16; order:2; }
  .about-text{ order:1; }

  .why-us-grid{ grid-template-columns: 1fr; }
  .stats{ grid-template-columns: 1fr 1fr; }

  .services-grid{ grid-template-columns: 1fr; padding: 0 20px; }
  .process-steps{ grid-template-columns: 1fr; }
  .process-bottom{ padding: 34px 26px; }

  .ba-pair{ gap: 10px; }
  .ba-block{ padding: 26px 14px; min-height: 240px; }
  .ba-icon{ width:40px; height:40px; }
  .ba-arrow{ width:40px; height:40px; }
  .ba-prev{ left: 6px; }
  .ba-next{ right: 6px; }

  .reviews-grid{ grid-template-columns: 1fr; }
  .social-blocks{ grid-template-columns: 1fr; }

  .contact-page{ grid-template-columns: 1fr; gap: 34px; }
  .contact-right{ padding: 28px; }

  .footer-content{ grid-template-columns: 1fr; gap: 30px; text-align:left; }
}

@media (max-width: 480px){
  .container{ padding: 0 18px; }
  h1{ font-size: clamp(2rem, 9vw, 2.6rem); }
  .section{ padding: 64px 0; }
  .section-header{ margin-bottom: 40px; }
  .ba-pair{ grid-template-columns: 1fr 1fr; }
  .ba-block p{ display:none; }
  .ba-block{ min-height: 180px; padding: 20px 10px; }
  .stats{ grid-template-columns: 1fr; }
  .process-bottom{ text-align:left; }
}


/* ---------- Servicegebiet features ---------- */
.service-features{
  display:flex;
  justify-content:center;
  align-items:flex-start;
  flex-wrap:wrap;
  margin-top: 46px;
}
.service-feature{
  display:flex;
  align-items:flex-start;
  gap: 14px;
  padding: 0 36px;
  max-width: 320px;
  position:relative;
}
.service-feature:not(:last-child)::after{
  content:"";
  position:absolute;
  right:0; top:2px; bottom:2px;
  width:1px;
  background: rgba(21,32,25,.12);
}
.service-feature-icon{
  width: 44px; height:44px;
  border-radius:50%;
  background: var(--green-mist);
  color: var(--green);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.service-feature-icon svg{ width:20px; height:20px; }
.service-feature h4{ font-size:.98rem; margin-bottom:5px; }
.service-feature p{ font-size:.88rem; }

@media (max-width: 860px){
  .service-features{ flex-direction:column; align-items:center; gap: 30px; }
  .service-feature{ padding:0 10px; max-width: 420px; }
  .service-feature:not(:last-child)::after{ display:none; }
}


/* ---------- Einblicke / Social ---------- */
.einblicke-grid{
  display:grid;
  grid-template-columns: 1fr 1.1fr 1fr;
  gap: 26px;
  align-items:stretch;
}

.einblicke-card{
  background: var(--cream);
  border: 1.5px solid rgba(31,92,63,.18);
  border-radius: var(--radius-lg);
  padding: 40px 32px;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.einblicke-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-md); }

.einblicke-icon{
  width: 64px; height:64px;
  border-radius:50%;
  border: 1.5px solid rgba(31,92,63,.3);
  display:flex; align-items:center; justify-content:center;
  color: var(--green-dark);
  margin-bottom: 20px;
}
.einblicke-icon svg{ width:28px; height:28px; }

.einblicke-card h3{ font-size:1.3rem; margin-bottom: 6px; }
.einblicke-handle{ font-size:.95rem; color: var(--ink-soft); margin-bottom: 18px; }
.einblicke-divider{
  width: 36px; height:1.5px;
  background: rgba(31,92,63,.3);
  margin-bottom: 18px;
}
.einblicke-card p{ font-size:.9rem; margin-bottom: 28px; flex:1; }

.einblicke-btn{
  background: var(--green-dark);
  color: var(--white);
  font-size:.88rem;
  padding: 13px 24px;
  animation:none;
  margin-top:0;
}
.einblicke-btn:hover{ background: var(--green); transform: translateY(-3px); }

.einblicke-video {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  aspect-ratio: 9/16;
  background: url("../images/video-poster.png") center/cover no-repeat;
}
.einblicke-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: transparent; /* важно */
}


.einblicke-cta{
  margin-top: 40px;
  background: var(--green-dark);
  border-radius: var(--radius-lg);
  padding: 30px 40px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 24px;
  flex-wrap:wrap;
}
.einblicke-cta-text{
  display:flex;
  align-items:center;
  gap: 18px;
  color: var(--white);
}
.einblicke-cta-text svg{ color: var(--green-light); flex-shrink:0; }
.einblicke-cta-text strong{ font-family: var(--ff-display); font-size:1.05rem; display:block; margin-bottom:4px; }
.einblicke-cta-text p{ color: rgba(255,255,255,.75); font-size:.9rem; }

.einblicke-cta-btn{
  background: transparent;
  border: 1.5px solid var(--green-light);
  color: var(--white);
  font-size:.9rem;
  padding: 13px 26px;
  animation:none;
  margin-top:0;
  white-space:nowrap;
}
.einblicke-cta-btn:hover{ background: var(--green-light); color: var(--green-dark); }

@media (max-width: 1024px){
  .einblicke-grid{ grid-template-columns: 1fr; }
  .einblicke-video{ order:-1; max-width: 380px; margin: 0 auto; aspect-ratio: 9/16; }
}
@media (max-width: 640px){
  .einblicke-card{ padding: 32px 24px; }
  .einblicke-cta{ flex-direction:column; align-items:flex-start; padding: 26px 24px; }
  .einblicke-cta-btn{ width:100%; justify-content:center; }
}






/* ==========================================
   COOKIE BANNER ONLY
   Никак не влияет на остальной сайт
   ========================================== */

#cookie-banner {
    position: fixed !important;

    left: 20px !important;
    right: 20px !important;
    bottom: 20px !important;

    z-index: 999999 !important;

    display: block;

    width: auto !important;
    height: auto !important;

    visibility: visible;

    pointer-events: auto;
}


/* ==========================================
   COOKIE CONTENT
   ========================================== */

#cookie-banner .cookie-content {
    box-sizing: border-box;

    width: 100%;
    max-width: 900px;

    margin: 0 auto;

    padding: 28px;

    background: #ffffff;

    color: #152019;

    border: 1px solid #dddddd;

    border-radius: 16px;

    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);

    font-family: Arial, Helvetica, sans-serif;
}


/* ==========================================
   TITLE
   ========================================== */

#cookie-banner h3 {
    margin: 0 0 12px;

    color: #152019;

    font-size: 22px;
    line-height: 1.3;
}


/* ==========================================
   TEXT
   ========================================== */

#cookie-banner p {
    margin: 0 0 20px;

    color: #444444;

    font-size: 14px;
    line-height: 1.6;
}

#cookie-banner a {
    color: #152019;
}


/* ==========================================
   CATEGORIES
   ========================================== */

#cookie-banner .cookie-categories {
    display: flex;

    flex-direction: column;

    gap: 8px;

    margin-bottom: 20px;
}


#cookie-banner .cookie-category {
    display: flex;

    align-items: center;

    padding: 12px;

    background: #f4f5f4;

    border: 1px solid #e2e4e2;

    border-radius: 8px;

    cursor: pointer;

    box-sizing: border-box;
}


#cookie-banner .cookie-category input {
    flex: 0 0 auto;

    width: 18px;
    height: 18px;

    margin: 0 10px 0 0;
}


#cookie-banner .label-text {
    display: flex;

    flex-direction: column;

    gap: 3px;

    color: #152019;
}


#cookie-banner .label-text small {
    color: #68716a;

    font-size: 12px;
}


/* ==========================================
   BUTTONS
   ========================================== */

#cookie-banner .cookie-actions {
    display: flex;

    flex-wrap: wrap;

    gap: 10px;
}


#cookie-banner .cookie-btn {
    display: inline-block;

    padding: 11px 18px;

    border-radius: 8px;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 14px;
    font-weight: 600;

    cursor: pointer;
}


#cookie-banner .cookie-btn.primary {
    background: #152019;

    color: #ffffff;

    border: 1px solid #152019;
}


#cookie-banner .cookie-btn.secondary {
    background: #eef0ee;

    color: #152019;

    border: 1px solid #d5d9d5;
}


/* ==========================================
   REOPEN BUTTON
   ========================================== */

#cookie-reopen-btn {
    position: fixed !important;

    left: 20px !important;
    bottom: 20px !important;

    z-index: 999998 !important;

    display: none;

    width: 46px;
    height: 46px;

    align-items: center;
    justify-content: center;

    padding: 0;

    border: none;

    border-radius: 50%;

    background: #152019;

    color: #ffffff;

    cursor: pointer;

    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}


#cookie-reopen-btn svg {
    width: 22px;
    height: 22px;

    pointer-events: none;
}


/* ==========================================
   MOBILE
   ========================================== */

@media (max-width: 700px) {

    #cookie-banner {
        left: 10px !important;
        right: 10px !important;
        bottom: 10px !important;
    }

    #cookie-banner .cookie-content {
        padding: 20px;
    }

    #cookie-banner .cookie-actions {
        flex-direction: column;
    }

    #cookie-banner .cookie-btn {
        width: 100%;
    }
}