/* ========= Variablen ========= */
:root{
  --brand: #074435;
  --brand-light: #0a5a46;
  --text: #1f2937;
  --muted: #6b7280;
  --bg: #f9f9f9;
  --container: min(1200px, 92vw);
  --font: "avenir-lt-pro", system-ui, -apple-system, "Segoe UI", Roboto,
           "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  --header-h: 80px;
}

/* ========= Base ========= */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font: 16px/1.6 var(--font);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img{display:block;max-width:100%;height:auto}
a{color: var(--brand); text-decoration: none}
a:hover{text-decoration: underline}
.container{width:var(--container); margin-inline:auto}

.bg-stage{
  position: fixed;
  inset: 0;
  z-index: -1;       
  overflow: hidden;
}
.bg-stage img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  animation: heroFade 28s infinite linear; 
}
.bg-stage img:nth-child(1){ animation-delay: 0s;  opacity: 1; }
.bg-stage img:nth-child(2){ animation-delay: 7s;  }
.bg-stage img:nth-child(3){ animation-delay: 14s; }
.bg-stage img:nth-child(4){ animation-delay: 21s; }


/* ========= Typo ========= */
h1,h2,h3{margin:0 0 .5rem; font-weight:600; letter-spacing:.005em}
h1{font-size: clamp(28px, 6vw, 44px); line-height:1.15}
h2{font-size: clamp(22px, 4.4vw, 32px)}
h3{font-size: clamp(18px, 3.4vw, 22px)}
p{margin: 0 0 1rem}
.eyebrow{font-size: 12px; letter-spacing:.18em; text-transform:uppercase; color:#ffffffcc}
.lead{font-size: clamp(16px, 3.8vw, 20px)}

/* ========= Header & Nav ========= */
.site-header{
  position: fixed;
  top:0; left:0; right:0;
  z-index: 10;     
  background: transparent; 
  border: none;
  font-size: 2vh;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding: .65rem 0;
  position: relative;
}
.brand-logo{height:80px; width:auto}

.nav{
   position: absolute;
  top: 100%;        
  right: 0;          
  display: none;     
  flex-direction: column;
  gap: .25rem;
  width: 260px;         
  padding: .75rem 1rem 1rem;
  background: rgba(7,68,53,.68);        
  color:#fff;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-top: none;
  z-index: 30;  
}

.nav-link:hover{color:#fff; text-decoration: none;}
.nav-link::after{
  content:""; position:absolute; left:0; right:0; bottom:-4px; height:2px;
  background: var(--brand); transform: scaleX(0); transform-origin:left; transition: transform .25s ease;
}
.nav-link:hover::after{transform: scaleX(1)}

.nav-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:65px; height:65px; font-size:30px; border:1.5px solid #fff;
  color:#fff; cursor:pointer;background: transparent;
}


  .nav.is-open{display:flex; }
  .nav-link{
  color:#fff;
  font-weight:700;
  padding:.65rem .25rem;
  text-decoration:none;
  position:relative; 
  
}


/* ========= Sektionen ========= */
.section{padding: clamp(28px, 6vw, 72px) 0}
.section--grey{background:#fff}
.section-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:.75rem; margin-bottom: 1.1rem;
}
.narrow{max-width: 780px}

/* ========= Buttons ========= */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5rem; padding:.85rem 1.15rem; border:1px solid transparent; border-radius:12px;
  font-weight:700; line-height:1; text-decoration:none; user-select:none; cursor:pointer;
  position: relative; overflow: hidden;
  transition: transform .2s ease, box-shadow .25s ease, background-color .2s ease, color .2s ease, border-color .2s ease, filter .2s ease;
}
.btn-primary{background: #fff; color: var(--brand); border-color:#ffffff90}
.btn-primary:hover{background:#ffffffd9}
.btn-ghost{color:#ffffff; border-color:#ffffff70; background: transparent}
.btn-ghost:hover{background:#ffffff14}

/* Fancy hover without underline for buttons */
.btn:hover{
  text-decoration: none;               /* override global a:hover underline */
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(0,0,0,.18);
}
.btn:active{
  transform: translateY(0);
  box-shadow: 0 6px 16px rgba(0,0,0,.16);
}

/* Subtle shine sweep */
.btn::after{
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.28) 40%, transparent 80%);
  transform: translateX(-120%);
  transition: transform .5s ease;
  pointer-events: none;
}
.btn:hover::after{ transform: translateX(120%); }

/* Dark backgrounds (inline styles on primary) still get a slight brighten on hover */
.btn.btn-primary:hover{ filter: brightness(1.06); }

/* ========= Links ========= */

/* ========= HERO ========= */
.hero{
  position: relative;
  height: 100vh;
  color: #fff;
  display: grid;
  align-items: end;
}


.hero::after{
  content:"";
  position: static;
  background: linear-gradient(180deg, rgba(0,0,0,.10) 0%, rgba(0,0,0,.42) 65%, rgba(0,0,0,.65) 100%);
  z-index: 1;
}
.hero-text{ position: relative; z-index: 2; }

@keyframes heroFade{
  0%{opacity:0} 6%{opacity:1} 26%{opacity:1} 32%{opacity:0} 100%{opacity:0}
}

/* Lesbarkeits-Overlay */
.hero::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.10) 0%, rgba(0,0,0,.42) 65%, rgba(0,0,0,.65) 100%);
  z-index:1;
}
.hero-text{
  position:relative; z-index:2; padding: 20px 0 clamp(28px, 7vw, 72px);
}
.hero-cta{display:flex; gap:.6rem; flex-wrap:wrap; margin-top: .9rem}

.grid{display:grid; gap: clamp(14px, 2.5vw, 24px)}
 

.card{
  padding: 1.1rem; background:#fff; border:1px solid #e5e7eb;
}


 
 


.proj figcaption{margin-top:.5rem; color:#374151; font-size:14px}

/* ========= Footer ========= */
.site-footer{background: linear-gradient(180deg, rgba(0,0,0,.10) 0%, rgba(0,0,0,.42) 65%, rgba(0,0,0,.65) 100%);;border-top:1px solid #e5e7eb;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff;}
.footer-grid{
  display:grid; gap:22px; grid-template-columns: 1.2fr 1fr 1fr; padding: 28px 0;
}

.foot-h{margin:0 0 .5rem; font-weight:700; color: #fff}
.site-footer a{text-decoration:none; color: #fff}
.site-footer a:hover{text-decoration:underline}

.footer-meta{
  text-align:center; color: #fff; font-size:14px; padding: 12px 0;
}


::selection{background: #d6efe7}
:focus-visible{outline: 2px solid var(--brand-light); outline-offset: 2px}


.section--grey.services-section {
  background: linear-gradient(0deg, rgba(0,0,0,.10) 0%, rgba(0,0,0,.42) 65%, rgba(0,0,0,.65) 100%);
  color: #fff; 
  
}


.projects-section {
  background: linear-gradient(180deg, rgba(0,0,0,.10) 0%, rgba(0,0,0,.42) 65%, rgba(0,0,0,.65) 100%);
  color: #fff;
  
}
.projects-section .section-head h2 { color:#fff; }


.projects-grid {
  display:grid;
  gap: clamp(18px, 3vw, 28px);
  grid-template-columns: 1fr 1fr;
}


.proj{
  position: relative;
  margin: 0;

  overflow: hidden;
  background: #eaeaea;
  box-shadow: none;  
  border: 0;
}

.proj > img{
  position: static;
  width: 100%; height: auto;
  object-fit: contain;
  transform: none;
  transition: transform .5s ease;
  background: linear-gradient(0deg, rgba(0,0,0,.10) 0%, rgba(0,0,0,.42) 65%, rgba(0,0,0,.65) 100%);
}
.proj:hover > img{ transform: none; }

.proj::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0; height:55%;
  background: linear-gradient(0deg, rgba(0,0,0,.55), rgba(0,0,0,0));
  pointer-events:none;
}

.proj > figcaption{
  position:absolute; left:0; right:0; bottom:0;
  padding: clamp(14px, 2.6vw, 18px);
  color:#fff;
  font-size: 15px;
  background: transparent; 
  margin: 0;
}


.team-section{
  background: linear-gradient(0deg, rgba(0,0,0,.10) 0%, rgba(0,0,0,.42) 65%, rgba(0,0,0,.65) 100%);
  color: #fff; 
  text-align: center;
}

.team-grid{
  
  display: grid;
  gap: clamp(20px, 3vw, 40px);
  grid-template-columns: repeat(4, 1fr);
  margin-top: 2rem;
}

.team-member{
  margin: 0;
}
.team-member img{
  width: 180px; height: 180px;
  border-radius: 50%;
  object-fit: cover;
  margin-inline: auto;
  box-shadow: 0 4px 12px rgba(0,0,0,.12);
  transition: transform .3s ease;
}
.team-member:hover img{ transform: scale(1.05); }

.team-member figcaption{
  margin-top: 0.75rem;
}
.team-member h3{
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
}
.team-member p{
  margin: 0;
  font-size: 1.2rem;
  color: #fff;
}

.section--full {
  padding: clamp(24px, 5vw, 64px) 0;
}
.section--full > .container {
  width: 100%;
  max-width: none;       
  padding-inline: clamp(12px, 4vw, 40px); 
}

.leistungen {
  
  background: linear-gradient(180deg, rgba(0,0,0,.10) 0%, rgba(0,0,0,.42) 65%, rgba(0,0,0,.65) 100%);
}

.leistungsbox{
  margin-top: 10em;
  background: rgba(7,68,53,.88);
  color: #fff;
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 12px 30px rgba(0,0,0,.18);
  padding: clamp(18px, 2.2vw, 28px);

  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-height: clamp(420px, 52vh, 640px);
}

.leistungsbox h2{ 
  font-size: clamp(1.4rem, 2.2vw, 2rem);
  line-height: 1.25;
  margin: 0 0 .75rem 0;
  color: #fff;
}
.leistungsbox p{ color: #f0f7f4; }
.leistungsbox strong{ color: #fff; }

.leistung-bilder{
  margin-top: auto;              
  display: grid;
  grid-template-columns: 1fr 1fr;   
  gap: clamp(.6rem, 1.4vw, 1rem);
  align-items: stretch;
}
.leistung-bilder img{
  width: 100%;
  aspect-ratio: 16 / 10;   
  object-fit: cover;
  box-shadow: 0 8px 20px rgba(0,0,0,.15);
}

.leistungen-grid{
  display: grid;
  gap: clamp(1.5rem, 3vw, 3rem);
  grid-template-columns: 1fr;    
  margin: clamp(2rem, 6vw, 6rem) 0 0;
}




.project-sections {
  display: flex;
  flex-direction: column;
  gap: clamp(4rem, 8vw, 6rem);
  max-width: min(1400px, 95vw);
  margin-inline: auto;
  padding-block: clamp(3rem, 6vw, 6rem);
  color: #fff;
}

.project-sections .row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(1.5rem, 3vw, 3rem);
}

.project-sections .row.reverse .col.image { order: 2; }
.project-sections .row.reverse .col.text  { order: 1; }

.project-sections .col.image {
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
}

.project-sections .col.image img {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
  transition: transform .6s ease;
}

.project-sections .col.image:hover img {
  transform: scale(1.05);
}

.project-sections .col.text {
  color: #fff;
  line-height: 1.65;
  max-width: 600px;
}

.project-sections .col.text h2 {
  font-size: clamp(1.6rem, 2.3vw, 2.1rem);
  margin-bottom: 0.9rem;
  color: #fff;
  font-weight: 600;
}

.project-sections .col.text p + p {
  margin-top: 0.9rem;
}



.steckbrief{
  margin: 1rem 0 0;
  padding: .25rem;
  display: grid;
  gap: .25rem;  
  color: #fff;
}
.steckbrief dl,
.steckbrief dt,
.steckbrief dd{ margin: 0; } 

.steckbrief > div{
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 12px 16px;
  align-items: start;
  padding: .6rem .75rem;
  border-radius: 10px;
  background: rgba(255,255,255,.06);  
  border: 1px solid rgba(255,255,255,.10);
}

.steckbrief dt{
  font-weight: 700;
  letter-spacing: .01em;
  color: #eaf6f1;
  white-space: nowrap;
}

.steckbrief dd{
  color: #ffffff;
  opacity: .95;
}


.team-member-vert{
  text-align: left;
  
}
.team-member-vert img{
  box-shadow: 0 10px 28px rgba(0,0,0,.18);
  max-width: 820px;
}
.team-member-vert h2{ margin: 1rem 0 .25rem; }
.team-member-vert .role{ margin: 0 0 1rem; opacity: .9; }


.btn[disabled]{opacity:.6; cursor:not-allowed}

#cookie-banner {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 1000;
  max-width: 340px;
  border-radius: 10px;
  padding: 1.25rem 1.5rem;
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.5;
  background: rgba(7,68,53,0.95); 
  color: #fff;
  border: 1px solid rgba(255,255,255,0.4);
  box-shadow: 0 8px 25px rgba(0,0,0,0.2);
  animation: slideIn 0.5s ease-out;
}

#cookie-banner .buttons {
  display: flex;
  gap: .75rem;
  margin-top: 1rem;
}
#cookie-banner button {
  flex: 1;
  padding: .6rem 1rem;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: all .2s ease;
}
#cookie-banner #cookie-accept {
  background: #fff;
  color: #074435;
}
#cookie-banner #cookie-accept:hover {
  background: #f4f4f4;
}
#cookie-banner #cookie-decline {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.6);
}
#cookie-banner #cookie-decline:hover {
  background: rgba(255,255,255,0.1);
}


.project-banner {
  display: block;
  position: relative;
  width: 40%;
  max-width: 900px;
  margin: 2rem auto;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.project-banner:hover {
  transform: scale(1.02);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.project-banner figure { position: relative; margin: 0; }
.project-banner figure::after{
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 55%;
  background: linear-gradient(0deg, rgba(0,0,0,.55), rgba(0,0,0,0));
  pointer-events: none;
}

.project-banner img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.5s ease;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.project-banner:hover img {
  transform: scale(1.05);
}

.project-banner figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: clamp(14px, 2.6vw, 18px);
  color: #fff;
  background: transparent;
  margin: 0;
  display: block;
  opacity: 1;
  text-align: left;
}

.project-banner h3 {
  font-size: 1.6rem;
  margin-bottom: 0.3rem;
}

.project-banner p {
  font-size: 1rem;
  margin: 0;
}


@keyframes slideIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ========= Responsive ========= */
@media (max-width: 900px){
  .footer-grid{ grid-template-columns: 1fr 1fr; }
  .team-grid{ grid-template-columns: 1fr 1fr; }
  .project-sections .row { grid-template-columns: 1fr; }
  .project-sections .col.image img { height: auto; max-height: 500px; }
  .project-sections .row.reverse .col.image,
  .project-sections .row.reverse .col.text { order: initial; }
}

@media (max-width: 640px){
  .footer-grid{ grid-template-columns: 1fr; }
  .projects-grid{ grid-template-columns: 1fr; }
  .leistung-bilder{ grid-template-columns: 1fr; }
  .leistung-bilder img{ aspect-ratio: 16 / 11; }
}

@media (min-width: 900px){
  .leistungen-grid{ grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px){
  .team-grid{ grid-template-columns: 1fr; }
  #cookie-banner { right: 50%; bottom: 1rem; transform: translateX(50%); max-width: 90%; }
}

@media (max-width: 520px){
  .steckbrief > div{ grid-template-columns: 1fr; }
  .steckbrief dt{ margin-bottom: .15rem; }
}

@media (max-width: 768px) {
  .project-banner {
    width: 100%;
   
  }
  .project-banner:hover { transform: none; }

  .project-banner figcaption {
    opacity: 1;
    text-align: left;
    padding: 1rem 1.25rem 1.25rem;
    background: transparent;
  }

  .project-banner h3 {
    font-size: 1.25rem;
    line-height: 1.25;
    margin: 0 0 .25rem 0;
    text-shadow: 0 1px 2px rgba(0,0,0,.35);
  }

  .project-banner p {
    font-size: .95rem;
    max-width: 32ch;
    margin: 0;
    text-shadow: 0 1px 2px rgba(0,0,0,.35);
  }
}