*{margin:0;padding:0;box-sizing:border-box}
body{font-family:system-ui,sans-serif;background:#0b0b0b;color:#f5f5f5}
nav{padding:30px 8%;display:flex;gap:30px}
nav a{color:#aaa;text-decoration:none}
section{padding:120px 8%}
.hero{
  min-height: calc(100vh - 80px);
  position: relative;
  padding: 120px 8%;
  overflow: hidden;
}

.hero::before{
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 100%;
  background:
    linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,.85)),
    url('../img/hero.jpeg') center -300px / cover no-repeat;
  z-index: -1;
}

h1{font-size:clamp(3rem,8vw,6rem)}
h2{font-size:2.4rem;margin-bottom:30px}
p,li{color:#aaa;max-width:800px}
.actions{margin-top:40px;display:flex;gap:16px}
.btn{padding:14px 28px;border-radius:14px;text-decoration:none}
.primary{background:#fff;color:#000}
.outline{border:1px solid #444;color:#fff}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px}
.tile{background:#161616;aspect-ratio:1/1;border-radius:18px}
footer{padding:40px 8%;color:#666;font-size:.9rem}
.list li{margin-bottom:12px}

.about{
  max-width: 820px;
  margin: 0 auto;
  padding: 140px 8%;
}

.about-header{
  margin-bottom: 48px;
}

.about h2{
  font-size: 2.6rem;
  margin-bottom: 18px;
}

.about-intro{
  font-size: 1.05rem;
  color: #ccc;
}

.about p{
  margin-bottom: 28px;
  color: #aaa;
  line-height: 1.8;
}

.about-image{
  margin: 70px 0;
  text-align: center;
}

.about-image img{
  width: 100%;
  max-width: 520px;
  height: 500px;
  object-fit: cover;
  object-position: center -65px;
  border-radius: 20px;
}


.about-image figcaption{
  margin-top: 14px;
  font-size: 0.9rem;
  color: #777;
  font-style: italic;
}

.about-highlight{
  margin-top: 50px;
  font-style: italic;
  color: #fff;
  opacity: 0.9;
}


.services{
  max-width: 900px;
  margin: 0 auto;
  padding: 140px 8%;
}

.services-header{
  margin-bottom: 70px;
}

.services-header h2{
  font-size: 2.6rem;
  margin-bottom: 18px;
}

.services-intro{
  color: #ccc;
  max-width: 520px;
}

.services-image{
  margin: 80px 0;
  text-align: center;
}

.services-image img{
  width: 100%;
  max-width: 560px;
  height: 520px;
  object-fit: cover;
  object-position: center top;
  border-radius: 22px;
  filter: contrast(1.05) saturate(0.9);
}

.services-image figcaption{
  margin-top: 14px;
  font-size: 0.9rem;
  color: #777;
  font-style: italic;
}

.services-list{
  display: grid;
  gap: 60px;
}

.service-item h3{
  font-size: 1.4rem;
  margin-bottom: 12px;
}

.service-item p{
  color: #aaa;
  line-height: 1.7;
  max-width: 720px;
}

.services-note{
  margin-top: 90px;
  padding-top: 40px;
  border-top: 1px solid #222;
}

.services-note p{
  color: #888;
  font-style: italic;
}

/* =========================
   PORTFOLIO – MODERN LOOK
   greift NUR im Portfolio
========================= */

section.portfolio{
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

section.portfolio h2{
  font-size: 2.4rem;
  margin-bottom: 48px;
}

section.portfolio .grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 22px;
}

section.portfolio .tile img{
  pointer-events: auto;
}

section.portfolio .tile::after{
  pointer-events: none;
}


section.portfolio .tile{
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  cursor: pointer;
  background: #111;
}

/* =========================
   PORTFOLIO – KLICKBAR + ORIGINALGRÖSSE
========================= */

section.portfolio .tile{
  position: relative;
  overflow: hidden;
}

section.portfolio .tile img{
  /* width: auto; */
  height: 100%;

  display: block;

  object-fit: cover;
  object-position: center top;
  /* border-radius: 10px; */

  cursor: pointer;
  pointer-events: auto;
  transition: transform .5s ease;
}

section.portfolio .tile:hover img{
  transform: scale(1.05);
}



section.portfolio .tile::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    rgba(0,0,0,0) 40%,
    rgba(0,0,0,0.25)
  );
  opacity: 0;
  transition: opacity .4s ease;
}

section.portfolio .tile:hover::after{
  opacity: 1;
}


.tile{
  cursor: pointer;
}

.tile img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center -20px;
  border-radius: 14px;
}

.tile img:hover{
  transform: scale(1.02);
}

/* Lightbox */
.lightbox{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 9999;
}

.lightbox.active{
  opacity: 1;
  pointer-events: auto;
}

.lightbox img{
  max-width: 90%;
  max-height: 90%;
  border-radius: 18px;
}

.reveal{
  opacity: 0;
  transform: translateY(40px);
  transition: opacity .9s ease, transform .9s ease;
}

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

/* =========================
   ABOUT – SAFE OVERRIDE
   berührt KEINE anderen Seiten
========================= */

section.about{
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}

section.about h2{
  font-size: 2.4rem;
  margin-bottom: 32px;
}

section.about p{
  margin-bottom: 26px;
  line-height: 1.8;
  color: #aaa;
}

section.about figure{
  margin: 60px 0;
  text-align: center;
}

section.about figure img{
  width: 100%;
  max-width: 520px;
  height: auto;              /* KEIN Crop */
  border-radius: 14px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

section.about figcaption{
  margin-top: 14px;
  font-size: 0.9rem;
  color: #777;
  font-style: italic;
}

section.about .about-highlight,
section.about .about-quote{
  margin-top: 48px;
  font-style: italic;
  color: #fff;
  opacity: 0.9;
}

.footer-logo img{
  height: 56px;
  opacity: 0.85;
}